/* Application-only editor workspace; client reporting palette scoped to .client-canvas. */
.workspace { min-height: calc(100vh - 120px); padding: 18px 22px; }
.workspace[hidden] { display: none !important; }
.workspace-card { background: #21282D; border: 1px solid #3D454D; border-radius: 8px; padding: 22px; max-width: 1200px; }
.workspace-card h1 { margin: 0 0 8px; font-size: 22px; color: #fff; }
.workspace-card h2 { margin: 18px 0 8px; font-size: 15px; color: #fff; }
.workspace-card p { color: #BBBBBB; font-size: 13px; line-height: 1.45; }
.workspace-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 18px; flex-wrap: wrap; }
.client-picker { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-bottom: 16px; }
.client-picker label { display: block; color: #8E98A3; font-size: 11px; margin-bottom: 4px; }
.client-picker select { min-width: 240px; }
.client-picker .tip { margin: 0; flex: 1 1 220px; }
.source-option { margin: 18px 0; padding: 14px 0; border-top: 1px solid #3D454D; }
.source-option:first-of-type { border-top: 0; padding-top: 0; }
.shell-context { margin-top: 4px; color: #BBBBBB; font-size: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.shell-context-sep { color: #5c6570; }
.dash-list { display: grid; gap: 10px; }
.dash-card { display: flex; justify-content: space-between; gap: 12px; align-items: center; background: #2C333A; border: 1px solid #3D454D; border-radius: 6px; padding: 14px; flex-wrap: wrap; }
.dash-card.active { border-color: #A931FF; }
.dash-card strong { display: block; color: #fff; }
.dash-card small { color: #8E98A3; font-size: 11px; }
.dash-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sources-grid, .settings-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; }
.validation-box { background: #161c20; border: 1px solid #3D454D; border-radius: 6px; padding: 14px; min-height: 160px; color: #BBBBBB; font-size: 12px; }
.preview-workspace { max-width: 1400px; }
.preview-workspace .preview-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.preview-workspace h1 { margin: 0; color: #fff; font-size: 20px; }
@media (max-width: 960px) { .sources-grid, .settings-grid { grid-template-columns: 1fr; } }
#builderRoot { min-height: calc(100vh - 100px); }
.editor-app{padding:12px 16px 20px;min-width:0;max-width:none;margin:0}
.editor-toolbar{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.editor-toolbar .editor-status{margin-right:auto}
.editor-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.editor-tools > button,.editor-tools select{min-height:32px}
/* Workspace header owns Preview/Edit. This rule keeps a single purple selected state if a segmented control is present. */
.segmented button.active,
.segmented button[aria-pressed=true]{background:#A931FF;color:#fff}
.editor-app.preview-mode .editor-edit-only{display:none!important}
.editor-app.preview-mode .editor-cols{grid-template-columns:minmax(0,1fr)}
.editor-app.preview-mode .editor-page-del{pointer-events:none;opacity:.35}
.editor-canvas-wrap .tabs{margin:0 0 12px}
.editor-cols{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr) minmax(220px,280px);gap:12px;align-items:start}
.editor-app.left-collapsed .editor-cols{grid-template-columns:48px minmax(0,1fr) minmax(220px,280px)}
.editor-app.right-collapsed .editor-cols{grid-template-columns:minmax(220px,280px) minmax(0,1fr) 48px}
.editor-app.left-collapsed.right-collapsed .editor-cols{grid-template-columns:48px minmax(0,1fr) 48px}
.editor-app.left-collapsed .editor-left .panel-body,
.editor-app.right-collapsed .editor-right .panel-body{display:none}
.editor-app.left-collapsed .editor-left h2,
.editor-app.right-collapsed .editor-right h2{display:none}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.panel-head h2{margin:0}
.page-add{display:flex;gap:6px;margin-top:8px}
.page-add input{flex:1;min-width:0}
.page-add .btn-primary,.editor-left .secondary{width:auto}
.editor-left #applyTemplateDefaults{width:100%;margin-top:8px}
.editor-panel{background:#21282D;border:1px solid #3D454D;border-radius:8px;padding:12px;min-width:0}
@media (max-width:1366px){
  .editor-cols{grid-template-columns:210px minmax(0,1fr) 210px}
}
@media (max-width:1280px){
  .editor-app{padding:8px 10px 16px}
}
.editor-panel h2{font-size:13px;margin:0 0 12px;color:#fff}
.panel-head h2{margin:0}
.editor-panel h3{font-size:11px;color:#8E98A3;letter-spacing:.12em;margin:18px 0 9px}
.editor-panel p{font-size:12px;color:#BBBBBB;line-height:1.45}
.editor-panel label{display:block;font-size:11px;color:#BBBBBB;margin:10px 0 5px}
.editor-panel input,.editor-panel select,.editor-panel textarea{display:block;width:100%;border:1px solid #3D454D;background:#2C333A;color:#fff;padding:8px;border-radius:4px;min-height:36px;box-sizing:border-box}
.editor-panel input[type=color]{padding:2px;max-width:68px}
.editor-panel .btn-primary,.editor-panel .secondary{font-size:12px;min-height:34px;padding:7px 10px}
.editor-section{display:none}.editor-section.on{display:block}
.editor-library-item{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#2C333A;border:1px solid #3D454D;border-radius:5px;padding:9px;margin:7px 0;cursor:grab}
.editor-library-item span{font-size:12px}
.editor-library-item button.btn-add{
  font:inherit;cursor:pointer;min-height:27px;padding:4px 7px;border:1px solid #3D454D;border-radius:4px;
  background:#2C333A;color:#fff;font-size:12px
}
.editor-library-item button.btn-add:hover{background:#343c44;border-color:#4D5761}
.editor-library-item button.btn-add:disabled{opacity:.45;cursor:not-allowed}
/* Pages sidebar — exactly one .selected / aria-selected=true is purple */
.editor-page{display:flex;gap:6px;align-items:center;justify-content:space-between;margin:5px 0}
.editor-page-btn{
  flex:1;text-align:left;font:inherit;cursor:pointer;min-height:34px;padding:7px 10px;border-radius:4px;
  background:#21282D;border:1px solid #3D454D;color:#BBBBBB;font-size:12px;font-weight:500
}
.editor-page-btn:hover{background:#2C333A;color:#fff;border-color:#3D454D}
.editor-page-btn.selected,
.editor-page-btn[aria-selected=true]{background:#A931FF;border-color:#A931FF;color:#fff}
.editor-page-btn.selected:hover,
.editor-page-btn[aria-selected=true]:hover{background:#9328DE;border-color:#9328DE;color:#fff}
.editor-page-del{
  flex:0 0 auto;font:inherit;cursor:pointer;min-height:34px;min-width:34px;padding:4px 8px;border-radius:4px;
  background:transparent;border:1px solid transparent;color:#8E98A3;font-size:16px;line-height:1
}
.editor-page-del:hover:not(:disabled){background:#2C333A;border-color:#3D454D;color:#fff}
.editor-page-del:disabled{opacity:.35;cursor:not-allowed}
.editor-canvas-wrap{background:#161c20;border:1px solid #3D454D;border-radius:8px;padding:13px;min-height:650px;min-width:0}
.editor-canvas-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:2px 0 12px;color:#8E98A3;font-size:11px}
.client-canvas{--client-header:#1b163f;--client-accent:#cf1634;--client-page:#eef2f6;--client-ink:#0b2848;--client-surface:#fff;--client-table:#1b163f;--client-chart:#28aec8;background:var(--client-page);color:var(--client-ink);border-radius:6px;overflow:visible;min-height:530px}
.client-title{padding:19px 24px;background:var(--client-header);color:white;display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid var(--client-accent);font-size:18px;font-weight:700}
.client-page-label{background:var(--client-surface);padding:10px 20px;font-weight:600;border-bottom:1px solid #d8dee8;font-size:12px;color:var(--client-ink)}
.editor-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-flow:row dense;gap:10px;padding:14px;min-height:240px;align-content:start}
.editor-widget{grid-column:span var(--widget-width,4);min-height:calc(var(--widget-height,3)*35px);background:var(--client-surface);color:var(--client-ink);border:1px solid #d6dfe8;border-radius:6px;min-width:0;overflow:hidden;position:relative}
.editor-widget.selected{outline:3px solid #A931FF;outline-offset:0}
.editor-widget[draggable=true]{cursor:grab}.editor-widget.dropover{outline:3px dashed #A931FF}
.widget-toolbar{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;background:#f5f6f9;border-bottom:1px solid #e3e7eb;gap:5px;color:#445061;font-size:11px}
.widget-grip{font-size:14px;cursor:grab;color:#777}.widget-actions{display:flex;gap:4px}.widget-actions button{font-size:11px;color:#445061;border:1px solid #d9dee7;background:white;min-height:25px;padding:2px 6px}
.widget-content{padding:13px}.widget-caption{font-size:10px;color:#6b7789;text-transform:uppercase;font-weight:700;letter-spacing:.08em}.widget-number{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:26px;margin:12px 0;color:var(--client-ink)}
.widget-content table{color:var(--client-ink);font-size:11px;width:100%;border-collapse:collapse}.widget-content th{background:var(--client-table);color:#fff}.widget-content td,.widget-content th{padding:8px;text-align:left;border-bottom:1px solid #d8dee8}
.widget-content canvas{max-width:100%;height:220px;max-height:260px}
.widget-placeholder{padding:20px;color:#687889;font-size:12px;text-align:center;border:1px dashed #c5ccd7;border-radius:5px}
/* Real template components inside edit chrome */
.editor-widget-real{background:transparent;border:1px solid transparent;overflow:visible}
.editor-widget-real.selected{outline:3px solid #A931FF;outline-offset:2px}
.editor-widget-real .widget-toolbar{background:rgba(25,30,36,.92);color:#fff;border:0;border-radius:6px 6px 0 0}
.editor-widget-real .widget-actions button{color:#223;background:#fff}
.widget-content-real{padding:10px;background:var(--client-page,#eef2f6);border-radius:0 0 6px 6px}
.widget-content-real .uol-kpi{min-height:96px}
.widget-content-real .uol-chart-card,.widget-content-real .bl-chart-card{min-height:280px;margin:0}
.widget-content-real .uol-chart-wrap,.widget-content-real .bl-chart-wrap{height:240px}
.editor-shared-mount{padding:18px 22px 28px;background:var(--client-page,#eef2f6);min-height:480px}
/* Edit chrome overlays real shared components — does not replace their visuals */
.dash-comp{position:relative}
.editor-comp{position:relative;outline:1px solid transparent;border-radius:4px;transition:outline-color .12s}
.editor-comp:hover{outline-color:rgba(169,49,255,.45)}
.editor-comp.selected{outline:2px solid #A931FF;outline-offset:2px}
.editor-comp.dropover{outline:2px dashed #A931FF}
.editor-comp-chrome{display:none;position:absolute;top:4px;right:4px;z-index:5;align-items:center;gap:6px;padding:3px 6px;background:rgba(25,30,36,.92);color:#fff;border-radius:4px;font-size:10px;pointer-events:auto;max-width:calc(100% - 8px)}
.editor-comp:hover>.editor-comp-chrome,.editor-comp.selected>.editor-comp-chrome{display:flex}
.editor-comp-chrome .widget-grip{cursor:grab;color:#ddd}
.editor-comp-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}
.editor-comp-chrome .widget-actions button{font-size:11px;color:#223;background:#fff;border:1px solid #d9dee7;min-height:22px;padding:1px 5px}
.editor-widget-wide{grid-column:span 12!important}
.editor-help{color:#8E98A3;font-size:11px;margin:8px 0}.editor-status{font-size:11px;color:#BBBBBB}.status-good{color:#22C55E}.status-warn{color:#FFC107}
.editor-hidden{display:none!important}.editor-chip{border:1px solid #3D454D;border-radius:4px;padding:5px 8px;color:#BBBBBB;font-size:11px}
@media(max-width:1350px){.editor-cols{grid-template-columns:200px minmax(0,1fr) 220px}}
@media(max-width:1080px){.editor-cols{grid-template-columns:minmax(0,1fr)}.editor-left,.editor-right{max-width:none}.editor-grid{grid-template-columns:repeat(12,minmax(0,1fr))}}
@media(max-width:650px){.editor-app{padding:12px}.editor-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.editor-widget{grid-column:span min(var(--widget-width,4),6)}.editor-header{align-items:flex-start}}