/* ═══════════════════════════════════════════════════════════════════════════
   ELYSIUM DESIGN SYSTEM — Component Styles
   ═══════════════════════════════════════════════════════════════════════════
   Source of truth for all Elysium UI components.
   Tokens/variables are in globals.css. This file contains component CSS only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════ SCROLLBAR — visible track, solid thumb ═══════════ */
::-webkit-scrollbar{width:14px;height:14px}
::-webkit-scrollbar-track{background:var(--card2)}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--t3) 40%,transparent);border:3px solid var(--card2);border-radius:99px;background-clip:content-box;transition:background .15s}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--t3) 70%,transparent);background-clip:content-box}
::-webkit-scrollbar-corner{background:var(--card2)}
/* Note: scrollbar-width/scrollbar-color standard props removed — they cause Chrome 121+ to
   ignore ::-webkit-scrollbar entirely and use native overlay scrollbars. Firefox 120+ supports
   ::-webkit-scrollbar, so no standard fallback needed. */

/* ═══════════ DATA-TIP TOOLTIP (universal — positions above element) ═══════════ */
[data-tip]{position:relative;cursor:default}
[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--t1);color:var(--bg);padding:4px 8px;border-radius:6px;font-size:10px;font-weight:500;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:9999;line-height:1.3}
[data-tip]:hover::after{opacity:1}

/* ═══════════ TOP BAR ═══════════ */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background:color-mix(in srgb,var(--card) 80%,transparent);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.topbar-left{display:flex;align-items:center;gap:10px}
.back-btn{width:34px;height:34px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--card2);cursor:pointer;font-size:20px;font-weight:600;color:var(--accent);display:flex;align-items:center;justify-content:center;transition:all .12s;flex-shrink:0}
.back-btn:hover{background:var(--hover);border-color:var(--accent)}
.case-id-pill{display:inline-flex;align-items:center;border-radius:var(--r-full);background:var(--card2);border:1px solid var(--border);overflow:hidden;min-width:0;max-width:100%;user-select:text;cursor:text}
.case-id-pill .cip-id{padding:4px 10px;font-size:var(--fs-sm);font-weight:700;color:var(--t1);white-space:nowrap;flex-shrink:0;background:rgba(34,139,230,.05);border-right:1px solid var(--border);user-select:all;cursor:text}
.case-id-pill .cip-sep{color:var(--t3);font-size:var(--fs-xs);flex-shrink:0;padding:0 2px;user-select:none}
.case-id-pill .cip-title{padding:4px 12px 4px 8px;font-size:var(--fs-base);font-weight:500;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;user-select:all;cursor:text}
.case-id-pill .cip-id::selection,.case-id-pill .cip-title::selection{background:rgba(34,139,230,.2);color:var(--t1)}
.topbar-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-full);background:var(--card2);border:1px solid var(--border);font-size:var(--fs-xs);font-weight:600;cursor:pointer;transition:all .2s;position:relative;white-space:nowrap;user-select:none}
.topbar-badge:hover{border-color:var(--accent);background:rgba(34,139,230,.04)}
.topbar-badge .badge-label{font-size:var(--fs-xs);color:var(--t3);text-transform:uppercase;letter-spacing:.3px;margin-right:2px}
.topbar-badge .badge-chevron{font-size:8px;color:var(--t3);margin-left:1px;transition:transform .2s}
.topbar-badge.open .badge-chevron{transform:rotate(180deg)}
.status-dot{width:6px;height:6px;border-radius:50%}
.status-dot.created{background:var(--t3)}.status-dot.triaged{background:var(--blue)}.status-dot.dispatched{background:var(--purple)}.status-dot.onsite{background:var(--amber)}.status-dot.resolved{background:var(--green)}.status-dot.invoiced{background:var(--green)}
/* DDL color dot — universal indicator driven by DB-stored DDL colors */
.ddl-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}
.fc-kpi-pill .ddl-dot{width:6px;height:6px}
.fp-facet-option .ddl-dot{width:7px;height:7px;margin-right:2px}
.fc-chip .ddl-dot{width:6px;height:6px;margin-right:2px}
.gc-meta-item .ddl-dot{width:6px;height:6px;margin-right:3px;vertical-align:middle}
.topbar-dropdown{position:absolute;top:calc(100% + 6px);left:0;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);z-index:150;min-width:200px;display:none;overflow:hidden}
.topbar-badge.open .topbar-dropdown{display:block}
.tbd-header{padding:8px 12px;font-size:var(--fs-sm);font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);background:var(--card2)}
.tbd-item{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:var(--fs-base);cursor:pointer;transition:background .12s;border-bottom:1px solid var(--border)}
.tbd-item:last-child{border:none}
.tbd-item:hover{background:var(--card2)}
.tbd-item.current{background:rgba(34,139,230,.06);font-weight:600;color:var(--accent)}
.tbd-item .tbd-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.tbd-item .tbd-av{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:600;color:#fff;flex-shrink:0}
.tbd-item .tbd-info{flex:1;min-width:0}
.tbd-item .tbd-name{font-size:var(--fs-base)}
.tbd-item .tbd-meta{font-size:var(--fs-sm);color:var(--t3)}
.tbd-item .tbd-check{font-size:12px;color:var(--accent);flex-shrink:0;opacity:0}
.tbd-item.current .tbd-check{opacity:1}
.tbd-search{padding:6px 10px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--card);z-index:1}
.tbd-search input{width:100%;padding:5px 8px 5px 26px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--card2);font-size:var(--fs-sm);font-family:inherit;outline:none;transition:border-color .15s;color:var(--t1)}
.tbd-search input:focus{border-color:var(--accent)}
.tbd-search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--t3);pointer-events:none}
.tbd-items{max-height:240px;overflow-y:auto}
.tbd-empty{padding:12px;text-align:center;font-size:var(--fs-sm);color:var(--t3);display:none}
.tbd-items:has(.tbd-item:not([style*="display: none"])) .tbd-empty{display:none}
.topbar-dropdown{min-width:220px}
.topbar-center{display:flex;align-items:center;gap:4px}
.topbar-save{display:flex;align-items:center;gap:8px;padding:0 8px;animation:topbar-save-in .25s var(--spring)}
.topbar-save-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:sb-pulse 1.5s infinite;flex-shrink:0}
.topbar-save-text{font-size:var(--fs-base);color:var(--t2);white-space:nowrap}
.topbar-save-btn{padding:4px 12px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--card);font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit;white-space:nowrap}
.topbar-save-btn:hover{background:var(--card2)}
.topbar-save-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.topbar-save-btn.primary:hover{background:#1c7ed6}
@keyframes topbar-save-in{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
.tb-btn{width:34px;height:34px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--card);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .25s var(--spring);position:relative;font-family:inherit}
.tb-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:scale(1.08)}
.tb-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.tb-badge{position:absolute;top:-3px;right:-3px;min-width:14px;height:14px;background:var(--red);border-radius:var(--r-full);font-size:8px;color:#fff;display:flex;align-items:center;justify-content:center;padding:0 3px}
.topbar-right{display:flex;align-items:center;gap:4px}

/* View cycle flash label */
.view-label{position:absolute;top:38px;left:50%;transform:translateX(-50%);background:var(--t1);color:var(--bg);padding:3px 12px;border-radius:var(--r-full);font-size:var(--fs-sm);font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s;white-space:nowrap;z-index:200}
.view-label.show{opacity:1}

/* ═══════════ MAIN LAYOUT (three-column) ═══════════ */
.main{display:grid;grid-template-columns:320px 5px 1fr 5px 280px;gap:0;min-height:calc(100vh - 52px)}
.main.sidebar-hidden{grid-template-columns:320px 5px 1fr 0px 0px}
.main.sidebar-hidden .col-right,.main.sidebar-hidden .col-resize-right{display:none}
.main.sidebar-expanded{grid-template-columns:320px 5px 1fr 5px 360px}
.main.view-simple{grid-template-columns:0px 0px 1fr 0px 0px}
.main.view-simple .col-left,.main.view-simple .col-right,.main.view-simple .col-resize{display:none}
.main.view-standard{grid-template-columns:320px 5px 1fr 0px 0px}
.main.view-standard .col-right,.main.view-standard .col-resize-right{display:none}

.col-left,.col-center,.col-right{overflow-y:auto;max-height:calc(100vh - 52px)}
.col-left{padding:8px;grid-column:1}
.col-resize-left{grid-column:2}
.col-center{background:var(--bg);padding:8px;grid-column:3}
.col-resize-right{grid-column:4}
.col-right{background:var(--card2);padding:8px;grid-column:5}
.col-resize{width:5px;cursor:col-resize;background:var(--border);position:relative;flex-shrink:0;transition:background .15s}
.col-resize:hover,.col-resize.active{background:var(--accent)}
.col-resize::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:3px;height:32px;border-radius:3px;background:rgba(128,128,128,.35);transition:background .15s}
.col-resize:hover::after,.col-resize.active::after{background:rgba(34,139,230,.6)}
.main.view-simple .col-resize{display:none}
.main.view-standard .col-resize-right{display:none}

/* ═══════════ WIDGET SYSTEM ═══════════ */
.widget{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:8px;overflow:visible;border:1px solid var(--border);transition:all .3s var(--spring);position:relative}
.widget:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}
.widget.dragging{opacity:.4;box-shadow:var(--shadow-lg);transform:scale(.97);transition:opacity .2s,transform .2s}
.widget.drag-over{border-color:var(--accent);box-shadow:0 0 0 3px rgba(34,139,230,.15)}
.widget::before{content:'';position:absolute;left:-1px;top:-1px;bottom:-1px;width:5px;border-radius:var(--r) 0 0 var(--r)}
.widget[style*="--widget-accent"]::before{background:var(--widget-accent)}
.col-right .widget::before{background:var(--blue)}
.widget-header{display:flex;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border);gap:8px;cursor:default;user-select:none}
.widget-header.collapsed{border-bottom:none}
.drag-handle{cursor:grab;display:none;align-items:center;opacity:.6;font-size:16px;color:var(--accent);transition:opacity .15s,transform .15s;padding:2px 4px;border-radius:4px}
.drag-handle:hover{opacity:1;background:rgba(34,139,230,.1);transform:scale(1.1)}
.drag-handle:active{cursor:grabbing;opacity:1}
body.reorg-mode .drag-handle{display:flex}
body.reorg-mode .widget[draggable="true"]{outline:2.5px dashed rgba(34,139,230,.4);outline-offset:-2px;cursor:grab}
body.reorg-mode .widget[draggable="true"]:hover{outline-color:rgba(34,139,230,.7)}
body.reorg-mode .widget.dragging{opacity:.4;outline-color:var(--accent);transform:scale(.97)}
/* Cross-column drop target highlight */
.reorg-drop-target{background:color-mix(in srgb,var(--accent) 4%,transparent);outline:2px dashed rgba(34,139,230,.3);outline-offset:-2px;border-radius:var(--r);transition:background .15s,outline .15s}
/* ── Form Designer ── */
.designer-editing .widget{border:1px dashed var(--border);transition:border-color .2s,box-shadow .2s}
.designer-editing .widget:hover{border-color:var(--accent);box-shadow:0 0 0 3px rgba(34,139,230,.1);transform:none}
.designer-editing .widget.designer-selected{border-color:var(--accent);border-style:solid}
.designer-selected{outline:2px solid var(--accent);outline-offset:-1px;box-shadow:0 0 0 4px rgba(34,139,230,.15);transition:outline .15s,box-shadow .15s}
.widget.designer-hidden{opacity:.4;position:relative}
.widget.designer-hidden::after{content:'Hidden';position:absolute;top:6px;right:8px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);background:var(--bg);padding:1px 6px;border-radius:3px;border:1px solid var(--border);pointer-events:none}
.designer-toolbar-label{font-size:13px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:6px;padding:0 8px;white-space:nowrap}
.designer-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;font-size:11px;font-weight:700;color:#fff;background:var(--accent);line-height:1}
#designer-toolbar-portal{display:contents}
.designer-panel-body{display:flex;flex-direction:column;gap:2px}
.designer-area-group{margin-bottom:4px}
.designer-area-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--t3);padding:8px 12px 4px}
.designer-widget-row{display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px;padding:6px 12px;border:none;background:none;color:var(--t1);font-size:13px;cursor:pointer;border-radius:var(--r);text-align:left;transition:background .1s}
.designer-widget-row:hover{background:var(--row-hover)}
.designer-widget-row.selected{background:rgba(34,139,230,.1);color:var(--accent)}
.designer-widget-row.hidden-widget{opacity:.5}
.designer-widget-row.hidden-widget .designer-widget-name{text-decoration:line-through}
.designer-widget-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:capitalize}
.designer-vis-toggle{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;background:none;color:var(--t3);cursor:pointer;border-radius:4px;transition:color .1s,background .1s}
.designer-vis-toggle:hover{background:var(--row-hover);color:var(--t1)}
.designer-inspector{border-top:1px solid var(--border);margin-top:10px;padding-top:10px}
.designer-inspector-row{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;gap:8px;font-size:13px}
.designer-inspector-label{color:var(--t3);font-weight:600;min-width:60px;flex-shrink:0}
.designer-inspector-value{color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.designer-inspector-input{flex:1;min-width:0;padding:5px 8px;border:1px solid var(--border);border-radius:var(--r);background:var(--card);color:var(--t1);font-size:13px;font-family:inherit}
.designer-inspector-input:focus{outline:none;border-color:var(--accent)}
.designer-accent-swatches{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.designer-accent-swatch{width:26px;height:26px;border-radius:50%;border:2px solid transparent;cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;color:var(--t3);transition:border-color .15s,box-shadow .15s}
.designer-accent-swatch:not([style]){background:var(--card);border-color:var(--border)}
.designer-accent-swatch.active{border-color:var(--t1);box-shadow:0 0 0 2px var(--t1)}
.designer-accent-swatch:hover{border-color:var(--t2)}
.designer-inspector-toggle{padding:4px 14px;border:1px solid var(--border);border-radius:var(--r);background:var(--card);color:var(--t2);font-size:13px;cursor:pointer;font-family:inherit;transition:all .15s}
.designer-inspector-toggle.on{background:var(--accent);color:#fff;border-color:var(--accent)}
/* ── Field Editor (element-level designer) ── */
.designer-field-list{margin-top:4px;border:1px solid var(--border);border-radius:4px;overflow:hidden}
.designer-field-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:3px 8px;border-bottom:1px solid var(--border);font-size:11px;transition:background .1s}
.designer-field-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;background:rgba(34,139,230,.06)}
.designer-field-selected{background:rgba(34,139,230,.12);outline:1px solid var(--accent);outline-offset:-1px}
.designer-bulk-toolbar{display:flex;align-items:center;gap:8px;padding:6px 12px;background:rgba(34,139,230,.08);border-bottom:1px solid var(--accent);font-size:11px}
.designer-bulk-count{color:var(--accent);font-weight:600}
.designer-bulk-btn{background:none;border:1px solid var(--border);border-radius:var(--r-sm);padding:2px 8px;font-size:10px;cursor:pointer;color:var(--t2);font-family:inherit}
.designer-bulk-btn:hover{border-color:var(--accent);color:var(--t1)}
.designer-field-row:last-child{border-bottom:none}
.designer-field-row.field-dirty{background:rgba(34,139,230,.08)}
.designer-field-row.field-hidden{opacity:.45}
.designer-field-row.field-hidden .designer-field-label{text-decoration:line-through}
.designer-field-vis{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:none;color:var(--t3);cursor:pointer;border-radius:3px;padding:0;transition:color .1s,background .1s}
.designer-field-vis:hover{background:var(--row-hover);color:var(--t1)}
.designer-field-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t1);font-weight:500}
.designer-field-label-input{width:100%;padding:1px 4px;border:1px solid var(--border);border-radius:3px;background:var(--card);color:var(--t1);font-size:10px;font-family:inherit}
.designer-field-label-input:focus{outline:none;border-color:var(--accent)}
.designer-field-badge{flex-shrink:0;font-size:9px;padding:1px 5px;border-radius:3px;background:var(--bg);color:var(--t3);font-family:var(--font-mono,monospace);text-transform:lowercase}
/* ── Inline Field Designer Controls (Phase C — inside widget body) ── */
.widget-body .designer-field-list{margin:0;border:none;border-radius:0}
.widget-body .designer-field-row{padding:5px 12px;font-size:var(--fs-base);gap:8px;position:relative}
.widget-body .designer-field-row:hover .designer-field-toggle{opacity:1}
.designer-field-ghost{opacity:.35;background:repeating-linear-gradient(135deg,transparent,transparent 4px,rgba(34,139,230,.04) 4px,rgba(34,139,230,.04) 8px)}
.designer-field-ghost .designer-field-kv .trip-val{font-style:italic;color:var(--t3)}
.designer-field-toggle{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;background:none;color:var(--t3);cursor:pointer;border-radius:4px;padding:0;font-size:13px;opacity:0;transition:opacity .15s,color .1s,background .1s}
.designer-field-ghost .designer-field-toggle{opacity:.7}
.designer-field-toggle:hover{background:var(--row-hover);color:var(--t1);opacity:1}
.designer-field-kv{flex:1;display:flex;align-items:center;gap:0;min-width:0}
.designer-field-kv .trip-lbl{flex:0 0 auto;min-width:80px;max-width:120px;padding-right:8px;color:var(--t3);font-size:var(--fs-sm);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.designer-field-kv .trip-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t1);font-size:var(--fs-sm)}
.designer-field-label-text{cursor:text;border-bottom:1px dashed transparent;transition:border-color .15s,color .15s}
.designer-field-label-text:hover{border-bottom-color:var(--accent);color:var(--accent)}
.widget-body .designer-field-label-input{padding:2px 6px;border:1px solid var(--accent);border-radius:3px;background:var(--card);color:var(--t1);font-size:var(--fs-sm);font-weight:500;font-family:inherit;width:100%;max-width:120px}
.widget-body .designer-field-label-input:focus{outline:none;box-shadow:0 0 0 2px rgba(34,139,230,.2)}
/* ── Phase D — Drag-to-Reorder Field Controls ── */
.designer-field-grip{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;color:var(--t3);cursor:grab;opacity:0;transition:opacity .15s,color .1s}
.widget-body .designer-field-row:hover .designer-field-grip{opacity:.5}
.designer-field-grip:hover{opacity:1!important;color:var(--t1)}
.designer-field-row[draggable="true"]{cursor:grab}
.designer-field-row[draggable="true"]:active{cursor:grabbing;opacity:.6}
.designer-field-drop-target{box-shadow:inset 0 -2px 0 0 var(--accent);background:rgba(34,139,230,.06)}
.designer-layer-select,.designer-role-select{font-size:12px;padding:3px 8px 3px 6px;border-radius:var(--r);border:1px solid var(--border);background:var(--card);color:var(--t1);cursor:pointer;max-width:120px;font-family:inherit;line-height:1.4;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;padding-right:22px}
.designer-layer-select:hover,.designer-role-select:hover{border-color:var(--t3)}
.designer-layer-select:focus,.designer-role-select:focus{outline:none;border-color:var(--accent)}
.designer-layer-select:disabled,.designer-role-select:disabled{opacity:.5;cursor:not-allowed}
.designer-role-select{max-width:130px}
.designer-security-select{font-size:11px;padding:2px 6px 2px 4px;border-radius:var(--r);border:1px solid var(--border);background:var(--card);color:var(--t1);cursor:pointer;max-width:100px;font-family:inherit;line-height:1.3;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;padding-right:18px}
.designer-security-select:hover{border-color:var(--t3)}
.designer-security-select:focus{outline:none;border-color:var(--accent)}
.designer-field-security{flex-basis:100%;margin:2px 0 4px 20px;padding:4px 8px;background:var(--bg);border-radius:4px;display:flex;flex-wrap:wrap;gap:4px 8px}
.designer-field-security .designer-inspector-row{padding:0}
.designer-field-reset-security{flex-basis:100%;background:none;border:none;color:var(--danger);font-size:10px;cursor:pointer;padding:2px 0;text-align:left;opacity:.8}
.designer-field-reset-security:hover{opacity:1;text-decoration:underline}
.field-required-indicator{color:var(--danger);font-weight:700;margin-left:2px;font-size:inherit}
/* ── Condition Editor (cross-widget condVis) ── */
.designer-condition-wrap{padding:4px 8px;background:var(--bg);border-top:1px solid var(--border);font-size:10px}
.designer-condition-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
.designer-condition-title{font-weight:600;color:var(--t2)}
.designer-condition-select{padding:1px 4px;border:1px solid var(--border);border-radius:3px;background:var(--card);color:var(--t1);font-size:10px;font-family:inherit;min-width:0;flex:1}
.designer-condition-select:focus{outline:none;border-color:var(--accent)}
.designer-condition-row{display:flex;align-items:center;gap:3px;margin-bottom:2px}
.designer-condition-input{flex:1;min-width:0;padding:1px 4px;border:1px solid var(--border);border-radius:3px;background:var(--card);color:var(--t1);font-size:10px;font-family:inherit}
.designer-condition-input:focus{outline:none;border-color:var(--accent)}
.designer-condition-input::placeholder{color:var(--t3)}
.designer-condition-remove{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:18px;height:18px;border:none;background:none;color:var(--t3);cursor:pointer;border-radius:3px;padding:0;font-size:13px;line-height:1}
.designer-condition-remove:hover{background:rgba(255,59,48,.1);color:var(--danger)}
.designer-condition-add{background:none;border:1px dashed var(--border);border-radius:3px;padding:2px 8px;font-size:10px;color:var(--t3);cursor:pointer;font-family:inherit;width:100%;margin-top:2px;transition:border-color .15s,color .15s}
.designer-condition-add:hover{border-color:var(--accent);color:var(--accent)}
.designer-condvis-badge{font-size:9px;background:var(--warn);color:#fff;border-radius:3px;padding:1px 4px;font-weight:600}
.designer-section-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:none;cursor:pointer;color:var(--t2);padding:4px 12px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px}
.designer-section-toggle:hover{color:var(--t1)}
.designer-section-toggle-icon{display:flex;align-items:center;gap:4px}
.designer-section-toggle-chevron{font-size:10px;transition:transform 150ms}
.designer-section-divider{border-top:1px solid var(--border);margin-top:4px;padding-top:4px}
.designer-search-input{width:100%;padding:5px 8px;border:1px solid var(--border);border-radius:var(--r);background:var(--card);color:var(--t1);font-size:12px;font-family:inherit}
.designer-search-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(34,139,230,.15)}
.designer-search-input::placeholder{color:var(--t3)}
.designer-field-revert{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;height:16px;border:none;background:none;color:var(--t3);cursor:pointer;border-radius:3px;padding:0;font-size:11px;opacity:0;transition:opacity .15s,color .1s}
.designer-field-row.field-dirty .designer-field-revert{opacity:.6}
.designer-field-revert:hover{opacity:1!important;color:var(--danger);background:rgba(255,59,48,.08)}
/* Designer inline WYSIWYG controls on WidgetShell */
.widget-title.designer-editable{cursor:text;border-bottom:1px dashed var(--accent);padding-bottom:1px}
.widget-title.designer-editable:hover{color:var(--accent)}
.widget-title-input{flex:1;min-width:0;padding:1px 4px;border:1px solid var(--accent);border-radius:3px;background:var(--card);color:var(--t1);font-size:var(--fs-sm);font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-wide);font-family:inherit}
.widget-title-input:focus{outline:none;box-shadow:0 0 0 2px rgba(34,139,230,.2)}
.widget-collapse-btn{flex-shrink:0;background:none;border:none;padding:2px 4px;cursor:pointer;color:var(--t3);line-height:1}
.widget-collapse-btn:hover{color:var(--t1)}
.widget-accent-strip{display:flex;gap:3px;align-items:center;margin-left:auto;padding:0 4px}
.widget-accent-dot{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--border);cursor:pointer;padding:0;transition:border-color .15s,transform .1s}
.widget-accent-dot:not([style]){background:var(--card)}
.widget-accent-dot.active{border-color:var(--t1);transform:scale(1.2)}
.widget-accent-dot:hover{border-color:var(--t2);transform:scale(1.15)}
/* Designer Widget Toolbar (floating, portaled) */
.dwt{display:flex;align-items:center;gap:2px;padding:3px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-lg);z-index:100;pointer-events:auto}
.dwt-btn{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border:none;background:none;color:var(--t2);cursor:pointer;border-radius:4px;padding:0;transition:color .1s,background .1s;font-family:inherit}
.dwt-btn:hover{background:var(--row-hover);color:var(--t1)}
.dwt-btn.active{color:var(--accent);background:rgba(34,139,230,.1)}
.dwt-warn{color:var(--danger)}
.dwt-divider{width:1px;height:16px;background:var(--border);flex-shrink:0}
.dwt-palette{position:absolute;top:100%;right:0;margin-top:4px;display:flex;gap:4px;padding:6px 8px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-lg)}
.dwt-swatch{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;transition:border-color .15s,transform .1s}
.dwt-swatch:not([style]){background:var(--card);border-color:var(--border)}
.dwt-swatch.active{border-color:var(--t1);transform:scale(1.15)}
.dwt-swatch:hover{border-color:var(--t2);transform:scale(1.1)}
.dwt-attr-badge{display:inline-flex;align-items:center;gap:2px;padding:1px 6px;border-radius:var(--r-full);background:var(--card2);border:1px solid var(--border);font-size:9px;font-weight:500;color:var(--t2);white-space:nowrap;letter-spacing:.2px}
/* CondVis popup on widget toolbar */
.dwt-condvis{position:absolute;top:100%;right:0;margin-top:4px;background:var(--card);border:1px solid var(--border);border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.15);min-width:260px;max-height:300px;overflow-y:auto;z-index:10;padding:4px}
.dwt-btn.dwt-condvis-active{color:var(--warn)}
/* Toolbar disabled state */
.tb-btn:disabled{opacity:.35;pointer-events:none}
/* Overflow menu in designer toolbar */
.dt-overflow{position:relative;display:inline-flex}
.dt-overflow-menu{position:absolute;top:100%;right:0;margin-top:4px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-lg);min-width:160px;padding:4px 0;z-index:50}
.dt-overflow-item{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:12px;color:var(--t1);background:none;border:none;width:100%;cursor:pointer;font-family:inherit}
.dt-overflow-item:hover{background:var(--row-hover)}
.dt-overflow-item.danger{color:var(--danger)}
.dt-overflow-divider{height:1px;background:var(--border);margin:4px 0}
/* Live match badge in condition editor */
.designer-condvis-live{font-size:9px;padding:1px 5px;border-radius:3px;font-weight:600}
.designer-condvis-live.matching{background:var(--accent2);color:#fff}
.designer-condvis-live.not-matching{background:var(--danger);color:#fff}
.widget-icon{font-size:14px}
.widget-title{font-size:var(--fs-sm);font-weight:600;text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--t2);flex:1}
button.widget-title{background:none;border:none;padding:0;text-align:left;font-family:inherit;cursor:default}
button.widget-title[aria-expanded]{cursor:pointer}
.widget-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.widget-action{font-size:var(--fs-sm);color:var(--accent);cursor:pointer;border:none;background:none;font-family:inherit}
.widget-nav-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 8px;border-radius:var(--r-full);background:linear-gradient(135deg,rgba(34,139,230,.08),rgba(34,139,230,.03));border:1px solid rgba(34,139,230,.2);font-size:var(--fs-sm);font-weight:600;color:var(--accent);cursor:pointer;transition:all .25s var(--spring);font-family:inherit;white-space:nowrap;text-decoration:none;margin-left:auto;margin-right:4px}
.widget-nav-badge:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(34,139,230,.18);border-color:var(--accent);background:linear-gradient(135deg,rgba(34,139,230,.14),rgba(34,139,230,.06))}
.widget-nav-badge:active{transform:translateY(0);box-shadow:none}
.widget-nav-badge .wnb-arrow{font-size:11px;transition:transform .2s;opacity:.6}
.widget-nav-badge:hover .wnb-arrow{transform:translateX(2px);opacity:1}
.widget-close{width:20px;height:20px;border-radius:50%;border:none;background:none;cursor:pointer;font-size:14px;color:var(--t3);display:flex;align-items:center;justify-content:center;transition:.15s}
.widget-close:hover{background:var(--danger);color:#fff}
.widget-body{padding:12px;overflow:visible}

/* ═══════════ WIDGET: Case Header ═══════════ */
.case-header-hero{background:linear-gradient(135deg,var(--hero-from),var(--hero-to));padding:16px 18px;display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px;user-select:text;border-radius:var(--r);overflow:hidden}
.case-header-hero .case-header-meta{width:100%;padding:10px 0 14px;margin:0;gap:6px;border-top:1px solid var(--border);margin-top:4px}
.case-header-icon{width:42px;height:42px;border-radius:10px;background:var(--card2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.case-header-info{flex:1;min-width:0;padding-top:2px}
.case-header-title{font-size:var(--fs-lg);font-weight:700;color:var(--t1);margin:0;line-height:1.3;user-select:text;cursor:text;position:relative;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.case-header-sub{font-size:var(--fs-sm);color:var(--t2);margin-top:3px;user-select:text;cursor:text;letter-spacing:.2px}

/* ═══════════ INLINE EDITING SYSTEM ═══════════ */
.inline-editable{position:relative;cursor:text;border:1px solid rgba(0,0,0,.1);border-radius:6px;padding:4px 32px 4px 8px;background:rgba(34,139,230,.03);transition:border-color .2s, background .2s, box-shadow .2s}
.inline-editable::after{content:'✎';position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:11px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;background:rgba(34,139,230,.08);color:var(--accent);opacity:.7;transition:all .2s;pointer-events:none}
.inline-editable:hover{border-color:var(--accent);background:rgba(34,139,230,.06);box-shadow:0 0 0 2px rgba(34,139,230,.1)}
.inline-editable:hover::after{opacity:1;background:rgba(34,139,230,.15)}
.inline-editable.editing{border-color:var(--accent);background:rgba(34,139,230,.06);box-shadow:0 0 0 3px rgba(34,139,230,.15)}
.inline-editable.editing::after{display:none}
.inline-editable.dirty{border-color:var(--accent)}
.inline-editable.dirty::before{content:'';position:absolute;left:-10px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;background:var(--accent)}
.case-header-hero .inline-editable{border-color:transparent;border-bottom-color:var(--border);background:transparent;padding:4px 28px 4px 8px;border-radius:8px;transition:all .2s}
.case-header-hero .inline-editable::after{background:transparent;color:var(--t3);font-size:10px;width:18px;height:18px;opacity:.5}
.case-header-hero .inline-editable:hover{border-color:var(--accent);background:rgba(34,139,230,.04)}
.case-header-hero .inline-editable:hover::after{opacity:1;color:var(--accent)}
.case-header-hero .inline-editable.editing{border-color:var(--accent);background:rgba(34,139,230,.04);box-shadow:0 0 0 2px rgba(34,139,230,.1)}
.case-header-hero .inline-editable.editing::after{display:none}
.case-header-hero .inline-editable.dirty{border-color:var(--accent)}
.case-header-hero .inline-editable.dirty::before{background:var(--accent)}

.ie-input{display:none;width:100%;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;margin:0;line-height:inherit}
.inline-editable.editing .ie-display{display:none}
.inline-editable.editing .ie-input{display:block}
.ie-textarea{display:none;width:100%;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;margin:0;line-height:inherit;resize:vertical;min-height:60px;field-sizing:content}
.inline-editable.editing .ie-textarea{display:block}

.trip-val.inline-editable{text-align:right;overflow:visible;padding:3px 26px 3px 6px}
.trip-val.inline-editable::after{right:2px;font-size:10px;width:18px;height:18px}
.trip-val.inline-editable .ie-input{text-align:right;font-weight:600;font-size:var(--fs-base)}
.trip-val.inline-editable.dirty::before{left:-6px}

.trip-val .ie-select{display:none;border:none;outline:none;background:transparent;font:inherit;color:inherit;font-weight:600;font-size:var(--fs-base);text-align:right;cursor:pointer;padding:0}
.trip-val.inline-editable.editing .ie-select{display:block}

/* ═══════════ FORM DIRTY STATE BAR ═══════════ */
.save-bar{position:sticky;top:48px;left:0;right:0;z-index:90;background:var(--card);border-bottom:1px solid var(--border);padding:0 16px;display:flex;align-items:center;gap:10px;max-height:0;overflow:hidden;opacity:0;transition:max-height .25s var(--spring),opacity .2s,padding .25s;box-shadow:0 2px 12px rgba(0,0,0,.08)}
.save-bar.visible{max-height:50px;opacity:1;padding:8px 16px}
.save-bar .sb-indicator{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:sb-pulse 1.5s infinite}
@keyframes sb-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.save-bar .sb-text{font-size:var(--fs-base);color:var(--t2);flex:1}
.save-bar .sb-text strong{color:var(--t1);font-weight:600}
.save-bar .sb-btn{padding:5px 14px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--card);font-size:var(--fs-base);font-weight:600;cursor:pointer;transition:all .15s}
.save-bar .sb-btn:hover{background:var(--card2)}
.save-bar .sb-btn-save{background:var(--accent);color:#fff;border-color:var(--accent)}
.save-bar .sb-btn-save:hover{background:#1c7ed6}
[data-theme="dark"] .save-bar{background:var(--card);box-shadow:0 2px 12px rgba(0,0,0,.3)}
.case-header-badge{padding:3px 10px;border-radius:var(--r-full);background:var(--card2);color:var(--t1);font-size:var(--fs-sm);font-weight:700;letter-spacing:.3px;white-space:nowrap;flex-shrink:0;border:1px solid var(--border);user-select:all;cursor:text}
.case-header-title::selection,.case-header-sub::selection,.case-header-badge::selection{background:rgba(34,139,230,.2)}
/* Description inside hero — uses same inline-editable style as title, full width */
.case-header-desc{width:100%;font-size:var(--fs-md);line-height:var(--lh-loose);white-space:pre-wrap;word-wrap:break-word;user-select:text}
.case-header-desc:empty{display:none}
.ie-field-label{display:block;font-size:var(--fs-sm);font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--accent);margin-bottom:4px;opacity:.9}
.case-header-desc .ie-field-label{color:var(--t3);font-size:var(--fs-xs);opacity:1}
.case-header-desc.inline-editable .ie-display{white-space:pre-wrap;color:var(--t2);max-height:120px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent);mask-image:linear-gradient(to bottom,#000 80%,transparent)}
.case-header-desc.inline-editable.editing .ie-display{display:none}
.case-header-desc.inline-editable .ie-textarea{white-space:pre-wrap;font-size:var(--fs-md);line-height:var(--lh-loose);max-height:200px;color:var(--t1);background:transparent}
.case-header-desc .ie-display:empty::after{content:'No description';color:var(--t3);font-style:italic}
.case-header-desc-wrap{width:100%}
.case-header-desc-wrap.expanded .ie-display{max-height:none!important;-webkit-mask-image:none!important;mask-image:none!important}
.case-header-show-more{display:block;background:none;border:none;color:var(--accent);font-size:var(--fs-sm);cursor:pointer;padding:2px 0;margin-top:2px;opacity:.8;transition:opacity .15s}
.case-header-show-more:hover{opacity:1;text-decoration:underline}
.case-header-meta{padding:10px 18px 12px}
.case-header-meta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.case-header-tag{display:inline-flex;flex-direction:column;align-items:center;gap:1px;padding:4px 10px 5px;border-radius:8px;background:var(--card2);border:1px solid var(--border);font-size:var(--fs-sm);font-weight:600;color:var(--t1);position:relative;cursor:default;user-select:none;flex:1 1 120px;min-width:110px;box-sizing:border-box}
.case-header-tag.cht-wide{flex:2 1 246px;min-width:220px}
.case-header-tag .cht-val{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;min-width:0}
.case-header-tag .cht-val > span:not(.cht-dot):not(.cht-chevron){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.case-header-tag.cht-wide .cht-val > span{overflow:visible;white-space:nowrap}
.case-header-tag.actionable{cursor:pointer;transition:all .2s var(--spring)}
.case-header-tag.actionable:hover{background:var(--hover, var(--card2));border-color:var(--accent);color:var(--t1)}
.case-header-tag.actionable.open{background:var(--hover, var(--card2));border-color:var(--accent);box-shadow:0 0 0 2px rgba(34,139,230,.12);z-index:50}
.case-header-tag .cht-label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.4px;opacity:.5;line-height:1}
.case-header-tag .cht-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.case-header-tag .cht-chevron{font-size:8px;opacity:.5;transition:transform .2s;margin-left:1px}
.case-header-tag.open .cht-chevron{transform:rotate(180deg);opacity:.9}
.cht-dropdown{position:fixed;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-lg),0 12px 40px rgba(0,0,0,.2);z-index:500;min-width:210px;display:none;overflow:hidden;max-height:380px;overflow-y:auto}
.cht-dropdown:has(.cht-search){min-width:260px}
.cht-dropdown:has(.cht-tree-node){min-width:300px}
.cht-search-list{overflow-y:auto;max-height:280px}
.cht-dropdown.visible{display:block}
.cht-dropdown .tbd-header{padding:8px 12px;font-size:var(--fs-sm);font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);background:var(--card2);position:sticky;top:0;z-index:1}
.cht-dropdown .tbd-item{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:var(--fs-base);cursor:pointer;transition:background .12s;border-bottom:1px solid var(--border)}
.cht-dropdown .tbd-item:last-child{border:none}
.cht-dropdown .tbd-item:hover{background:var(--card2)}
.cht-dropdown .tbd-item.current{background:rgba(34,139,230,.06);font-weight:600;color:var(--accent)}
.cht-search-wrap{padding:6px 8px;border-bottom:1px solid var(--border);background:var(--card2);position:sticky;top:0;z-index:2}
.cht-search-wrap + .tbd-header{position:sticky;top:44px}
.cht-search{width:100%;padding:6px 10px 6px 28px;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--t1);font-size:var(--fs-base);outline:none;transition:border-color .15s}
.cht-search:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(34,139,230,.15)}
.cht-search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:12px;opacity:.4;pointer-events:none}
.cht-search-wrap{position:relative}
.tbd-item.cht-highlighted{background:var(--card2)}
.cht-tree-node{display:flex;align-items:center;gap:6px;padding:6px 10px;font-size:var(--fs-base);cursor:pointer;transition:background .12s;border-bottom:1px solid var(--border);user-select:none}
.cht-tree-node:last-child{border:none}
.cht-tree-node:hover{background:var(--card2)}
.cht-tree-node.current{background:rgba(34,139,230,.06);font-weight:600;color:var(--accent)}
.cht-tree-node.cht-highlighted{background:var(--card2)}
.cht-tree-toggle{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:10px;opacity:.5;transition:transform .15s,background .12s;flex-shrink:0;cursor:pointer;border-radius:6px;margin:-4px 0}
.cht-tree-toggle:hover{opacity:.9;background:rgba(255,255,255,.12)}
.cht-tree-toggle.expanded{transform:rotate(90deg);opacity:.8}
.cht-tree-toggle.leaf{opacity:0;pointer-events:none}
.cht-tree-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.cht-tree-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cht-tree-count{font-size:var(--fs-sm);color:var(--t3);margin-left:auto;flex-shrink:0}
.tbd-item.cht-no-results{color:var(--t3);font-style:italic;cursor:default;justify-content:center;padding:16px 12px}
.tbd-item .tbd-sub{font-size:var(--fs-sm);color:var(--t3);margin-left:auto}

/* ═══════════ WIDGET: Gradient Tech Card ═══════════ */
.tech-hero{background:linear-gradient(135deg,var(--tech-from),var(--tech-to));padding:16px;border-radius:var(--r);margin-bottom:12px;display:flex;align-items:center;gap:12px;overflow:hidden}
.avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden;background:var(--accent)}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;position:absolute;inset:0}
.avatar.av-xs{width:22px;height:22px;font-size:8px}
.avatar.av-sm{width:28px;height:28px;font-size:10px}
.avatar.av-md{width:36px;height:36px;font-size:13px}
.avatar.av-lg{width:56px;height:56px;font-size:22px}
.avatar .av-status{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;border:2px solid var(--card);z-index:1}
.avatar.av-lg .av-status{width:14px;height:14px;border-width:3px}
.av-status.online{background:var(--green)}
.av-status.busy{background:var(--red)}
.av-status.away{background:var(--amber)}
.av-status.offline{background:var(--t3)}
.tech-avatar-big{width:56px;height:56px;border-radius:50%;background:color-mix(in srgb,var(--hero-text) 25%,transparent);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:var(--hero-text);border:2px solid color-mix(in srgb,var(--hero-text) 40%,transparent);flex-shrink:0;overflow:hidden;position:relative;cursor:pointer;transition:transform .2s var(--spring)}
.tech-avatar-big:hover{transform:scale(1.08)}
.tech-avatar-big img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;border-radius:50%}
.tech-hero-info{flex:1;min-width:0;color:var(--hero-text)}
.tech-hero-name{font-size:var(--fs-md);font-weight:600}
.tech-hero-detail{font-size:var(--fs-base);opacity:.95;margin-top:1px}
.tech-hero-eta{text-align:right}
.tech-hero-eta-big{font-size:18px;font-weight:700}
.tech-hero-eta-sub{font-size:var(--fs-sm);opacity:.9}
.tech-pills{display:flex;gap:4px;flex-wrap:wrap;padding:8px 12px 4px}
.tech-pill{padding:3px 8px;border-radius:var(--r-full);font-size:var(--fs-sm);font-weight:600;background:rgba(34,139,230,.06);border:1px solid rgba(34,139,230,.18);color:var(--accent)}
.tech-pill:first-child{background:rgba(64,192,87,.08);border-color:rgba(64,192,87,.22);color:var(--green)}

/* ═══════════ WIDGET: Progress Bar Pipeline ═══════════ */
.pipe-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.pipe-label{font-size:var(--fs-sm);font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.3px}
.pipe-step-count{font-size:var(--fs-sm);color:var(--t2);font-weight:500}
.pipe-bar{height:6px;border-radius:3px;background:var(--border);overflow:hidden;position:relative}
.pipe-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--green),var(--accent));transition:width .6s var(--spring)}
.pipe-steps{display:flex;justify-content:space-between;margin-top:8px}
.pipe-step{font-size:var(--fs-sm);color:var(--t3);position:relative;text-align:center;flex:1}
.pipe-step.done{color:var(--t1);font-weight:600}
.pipe-step.active{color:var(--accent);font-weight:700}
.pipe-step.active::before{content:'●';margin-right:4px;font-size:8px}
.pipe-step.done::before{content:'';display:none}

/* ═══════════ WIDGET: SLA Countdown / Multi-Milestone ═══════════ */
.sla-big{font-size:32px;font-weight:800;text-align:center;letter-spacing:-1px;margin:4px 0}
.sla-big.ok{color:var(--green)}
.sla-big.warn{color:var(--amber)}
.sla-big.danger{color:var(--red)}
.sla-bar{height:6px;border-radius:3px;background:var(--border);overflow:hidden;margin-top:8px}
.sla-bar-fill{height:100%;border-radius:3px;transition:width .6s}
.sla-meta{display:flex;justify-content:space-between;font-size:var(--fs-sm);color:var(--t3);margin-top:4px}

.sla-milestones{display:flex;flex-direction:column;gap:0}
.sla-milestone{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-bottom:1px solid var(--border);cursor:pointer;transition:all .2s;text-align:left}
.sla-milestone:last-child{border:none}
.sla-milestone:hover{background:var(--card2);border-radius:var(--r-sm)}
.sla-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--card);flex-shrink:0}
.sla-milestone.status-met .sla-dot{background:var(--green);box-shadow:0 0 0 3px rgba(46,184,92,.15)}
.sla-milestone.status-approaching .sla-dot{background:var(--amber);box-shadow:0 0 0 3px rgba(255,169,0,.15);animation:slaPulse 2s infinite}
.sla-milestone.status-pending .sla-dot{background:var(--border)}
.sla-milestone.status-scheduled .sla-dot{background:var(--blue);box-shadow:0 0 0 3px rgba(34,139,230,.15)}
@keyframes slaPulse{0%,100%{box-shadow:0 0 0 3px rgba(255,169,0,.15)}50%{box-shadow:0 0 0 6px rgba(255,169,0,.25)}}
.sla-info{flex:1;min-width:0;text-align:left}
.milestone-name{font-size:13px;font-weight:600;color:var(--t1)}
.milestone-sub{font-size:13px;color:var(--t2);margin-top:1px}
.sla-time{text-align:right;flex-shrink:0}
.sla-time-value{font-size:13px;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums}
.sla-time-label{font-size:13px;color:var(--t2);text-transform:uppercase;letter-spacing:.3px}
.sla-milestone.status-met .sla-time-value{color:var(--green)}
.sla-milestone.status-approaching .sla-time-value{color:var(--amber)}
.sla-milestone.status-scheduled .sla-time-value{color:var(--blue)}
/* Late SLA — never green/amber. Past commitment + still open: full-red signal,
   red urgency pulse on the dot. Overrides .status-approaching class colors. */
@keyframes slaPulseRed{0%,100%{box-shadow:0 0 0 3px rgba(239,68,68,.15)}50%{box-shadow:0 0 0 6px rgba(239,68,68,.25)}}
.sla-milestone[data-sla-status="Late"] .sla-dot{background:var(--red);box-shadow:0 0 0 3px rgba(239,68,68,.15);animation:slaPulseRed 2s infinite}
.sla-milestone[data-sla-status="Late"] .sla-time-value{color:var(--red)}
/* Fulfilled — render the snippet's status icon (✅ / ❌) inline in place of the dot.
   Same icon as the SidePanel flyout header/pill — ties widget and flyout visually. */
.sla-fulfilled-icon{flex-shrink:0;width:14px;text-align:center;font-size:14px;line-height:1;display:inline-block}
.sla-milestone[data-sla-status="Fulfilled_Late"] .sla-time-value{color:var(--red)}
/* Path A — dot is the LEFT CAP of the progress bar. Both live in .sla-progress-row inside .sla-info.
   No separate vertical timeline; status reads as one connected element per row. */
.sla-progress-row{display:flex;align-items:center;gap:6px;margin-top:6px}
.sla-progress{flex:1;height:5px;border-radius:2px;background:var(--border);position:relative}
.sla-progress-fill{height:100%;border-radius:2px;transition:width .5s ease;max-width:100%}
.sla-warning-tick{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--amber);transform:translateX(-1px);pointer-events:none;border-radius:1px;z-index:1}
/* Section headers — inline label + extending divider (compact fieldset-legend style).
   Drops ~13px of vertical space vs label+separate-line pattern, keeps the visual break. */
.sla-section-header{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);padding:4px 12px}
.sla-section-header::after{content:'';flex:1;height:1px;background:var(--border)}
.sla-show-more{display:block;width:100%;padding:6px 12px;margin-top:4px;font-size:var(--fs-xs);color:var(--t2);background:transparent;border:none;border-top:1px dashed var(--border);text-align:center;cursor:pointer;text-transform:uppercase;letter-spacing:.3px;transition:color .2s,background .2s}
.sla-show-more:hover{color:var(--t1);background:var(--card2)}

/* SLA Fulfill Panel — content inside SidePanel.flyout-body for fulfill/cancel/readonly states */
.sla-fulfill-panel-body{display:flex;flex-direction:column;gap:14px}
.sla-fulfill-status{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r-sm);font-size:var(--fs-sm);line-height:1.4;flex-wrap:wrap}
.sla-fulfill-status-icon{font-size:14px;line-height:1;flex-shrink:0}
.sla-fulfill-status-label{font-weight:700;text-transform:uppercase;letter-spacing:.3px;font-size:var(--fs-xs);flex-shrink:0}
.sla-fulfill-status-msg{color:var(--t1);font-size:var(--fs-sm);flex:1;min-width:140px}
.sla-fulfill-meta{display:flex;flex-direction:column;gap:6px;padding:8px 0;border-bottom:1px solid var(--border)}
.sla-fulfill-meta-row{display:flex;gap:10px;align-items:baseline;font-size:var(--fs-sm)}
.sla-fulfill-meta-label{color:var(--t2);font-weight:600;min-width:84px;flex-shrink:0}
.sla-fulfill-meta-value{color:var(--t1);font-variant-numeric:tabular-nums}
.sla-fulfill-body{display:flex;flex-direction:column;gap:10px;padding-top:4px}
.sla-fulfill-section-label{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--t2);margin-top:6px}
.sla-fulfill-readonly{padding:8px 10px;border:1px dashed var(--border);border-radius:var(--r-sm);background:var(--card2);color:var(--t1);font-size:var(--fs-sm);display:flex;flex-direction:column;gap:2px}
.sla-fulfill-readonly-note{font-size:var(--fs-xs);color:var(--t3);font-style:italic}
.sla-fulfill-comment{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-sm);font-size:var(--fs-sm);font-family:inherit;background:var(--card2);color:var(--t1);outline:none;transition:border-color .2s;box-sizing:border-box;resize:vertical;min-height:48px}
.sla-fulfill-comment:focus{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 12%,transparent)}
.sla-fulfill-error{padding:8px 10px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--red) 8%,transparent);color:var(--red);font-size:var(--fs-sm);border-left:3px solid var(--red)}
.sla-fulfill-live{padding:10px 12px;background:var(--card2);border-radius:var(--r-sm);display:flex;flex-direction:column;gap:8px;border:1px solid var(--border)}
.sla-fulfill-live-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sla-fulfill-live-value{font-size:24px;font-weight:700;color:var(--t1);font-variant-numeric:tabular-nums;letter-spacing:-.5px;line-height:1.1}
.sla-fulfill-live-label{font-size:var(--fs-xs);color:var(--t2);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.sla-fulfill-live-progress{height:6px;margin-top:0}

/* ═══════════ WIDGET: Trip Card (Gradient Hero) ═══════════ */
.trip-hero{border-radius:var(--r-sm);padding:12px;color:#fff;margin-bottom:10px;display:flex;align-items:center;gap:12px;font-size:12px;font-weight:600;overflow:hidden}
.trip-hero.customer{background:linear-gradient(135deg,var(--grad-customer-from),var(--grad-customer-to))}
.trip-hero.equipment{background:linear-gradient(135deg,var(--grad-equipment-from),var(--grad-equipment-to))}
.trip-hero.asset{background:linear-gradient(135deg,var(--grad-asset-from),var(--grad-asset-to))}
.trip-hero.location{background:linear-gradient(135deg,var(--grad-location-from),var(--grad-location-to))}
.trip-hero-icon{font-size:20px}
.trip-hero-text{flex:1}
.trip-hero-img{width:42px;height:42px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--hero-text) 20%,transparent);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;overflow:hidden;position:relative;border:1px solid color-mix(in srgb,var(--hero-text) 30%,transparent);cursor:pointer;transition:transform .2s var(--spring)}
.trip-hero-img:hover{transform:scale(1.08)}
.trip-hero-img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.trip-hero-img.no-img{display:none}

/* Image Hover Preview (lightbox-lite) */
.img-preview-wrap{position:relative;cursor:pointer}
.img-preview-popup{position:fixed;z-index:900;pointer-events:none;opacity:0;transform:scale(.85);transition:all .25s var(--spring);background:var(--card);border-radius:var(--r);box-shadow:var(--shadow-lg),0 16px 48px rgba(0,0,0,.2);overflow:hidden;border:1px solid var(--border);padding:4px}
.img-preview-popup.visible{opacity:1;transform:scale(1);pointer-events:auto}
.img-preview-popup img{display:block;max-width:280px;max-height:280px;border-radius:calc(var(--r) - 2px);object-fit:contain}
.img-preview-popup .img-preview-caption{padding:6px 8px;font-size:10px;color:var(--t2);text-align:center;font-weight:500}
.img-preview-popup .img-preview-close{display:none;position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;border:none;font-size:12px;cursor:pointer;align-items:center;justify-content:center;z-index:2;backdrop-filter:blur(4px)}
@media (hover:none) and (pointer:coarse){
  .img-preview-popup .img-preview-close{display:flex}
  .img-preview-popup img{max-width:240px;max-height:240px}
  .img-preview-wrap:hover{transform:none !important}
  .tech-avatar-big:hover{transform:none !important}
  .contact-av:hover{transform:none !important}
  .trip-hero-img:hover{transform:none !important}
  .qa-quick-note-avatar:hover{transform:none !important}
}
.trip-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border);font-size:var(--fs-base);gap:8px}
.trip-row:last-child{border:none}
.trip-row-clickable{cursor:pointer;border-radius:3px;transition:background .15s}
.trip-row-clickable:hover{background:var(--bg-hover,rgba(0,0,0,.04))}
.trip-row-clickable:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.trip-lbl{color:var(--t2);white-space:nowrap;flex-shrink:0}
.trip-val{font-weight:600;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.trip-val.status-good{color:var(--green)}
.trip-val.status-bad{color:var(--red)}
.trip-val.status-warn{color:var(--amber)}
.case-detail-pair{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--border)}
.case-detail-pair .trip-row{padding:5px 12px;border-bottom:none;overflow:hidden}
.case-detail-pair .trip-row:first-child{border-right:1px solid var(--border)}
.case-detail-pair-single{grid-template-columns:1fr}
.case-detail-pair-single .trip-row:first-child{border-right:none}
.field-card-empty{padding:12px;font-size:var(--fs-base);color:var(--t3)}

/* ═══════════ WIDGET: Banking P&L ═══════════ */
.bal-amount{font-size:26px;font-weight:700;color:var(--green);letter-spacing:-.5px}
.bal-sub{font-size:var(--fs-base);color:var(--t2);margin-bottom:10px}
.bal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.bal-cell-val{font-size:13px;font-weight:600}
.bal-cell-lbl{font-size:var(--fs-xs);color:var(--t2);text-transform:uppercase;letter-spacing:.3px}
.tx-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--border);font-size:var(--fs-base)}
.tx-icon{width:26px;height:26px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;font-weight:600;color:#fff}
.tx-icon.labor{background:var(--green)}
.tx-icon.parts{background:var(--blue)}
.tx-icon.travel{background:var(--amber)}
.tx-icon.tax{background:var(--purple)}
.tx-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx-amt{font-weight:600;color:var(--t2);flex-shrink:0}

/* ═══════════ WIDGET: Description / Case Detail ═══════════ */
.desc-field{margin-bottom:8px}
.desc-label{font-size:var(--fs-sm);font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px}
.desc-val{font-size:var(--fs-md);cursor:text;padding:4px 6px;border-radius:var(--r-sm);border:1px solid transparent;transition:.15s}
.desc-val:hover{border-color:var(--border);background:var(--card2)}
.desc-val:focus{outline:none;border-color:var(--accent);background:#fff}
.desc-val[contenteditable]{min-height:20px}

/* ═══════════ WIDGET SEARCH BADGES ═══════════ */
.widget-open-btn,.widget-create-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--r-full);background:linear-gradient(135deg,rgba(34,139,230,.06),rgba(34,139,230,.02));border:1px solid rgba(34,139,230,.18);font-size:12px;cursor:pointer;transition:all .25s var(--spring);color:var(--accent);flex-shrink:0;padding:0;font-family:inherit;line-height:1}
.widget-open-btn:hover,.widget-create-btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(34,139,230,.18);border-color:var(--accent);background:rgba(34,139,230,.12)}
.widget-open-btn:active,.widget-create-btn:active{transform:translateY(0);box-shadow:none}
.widget-create-btn{font-size:16px;font-weight:600;margin-right:4px}
.widget-search-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--r-full);background:linear-gradient(135deg,rgba(34,139,230,.06),rgba(34,139,230,.02));border:1px solid rgba(34,139,230,.18);font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:all .25s var(--spring);position:relative;white-space:nowrap;user-select:none;margin-right:4px;color:var(--accent)}
.widget-search-badge:hover{border-color:var(--accent);background:rgba(34,139,230,.1);transform:translateY(-1px);box-shadow:0 2px 8px rgba(34,139,230,.15)}
.widget-search-badge.open{border-color:var(--accent);box-shadow:0 0 0 2px rgba(34,139,230,.15)}
.wsb-val{color:var(--t1);max-width:100px;overflow:hidden;text-overflow:ellipsis}
.wsb-icon{font-size:9px;opacity:.5}
.widget-search-panel{position:absolute;top:calc(100% + 6px);right:0;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);z-index:60;min-width:260px;display:none;overflow:hidden}
.widget-search-badge.open .widget-search-panel{display:block}
.wsp-input{width:100%;padding:8px 12px;border:none;border-bottom:1px solid var(--border);font-size:var(--fs-base);font-family:inherit;background:var(--card2);color:var(--t1);outline:none}
.wsp-input:focus{background:var(--card);box-shadow:inset 0 -2px 0 var(--accent)}
.wsp-results{max-height:180px;overflow-y:auto}
.wsp-item{display:flex;flex-direction:column;padding:8px 12px;cursor:pointer;transition:background .12s;border-bottom:1px solid var(--border);font-size:var(--fs-base)}
.wsp-item:last-child{border:none}
.wsp-item:hover{background:var(--card2)}
.wsp-item strong{font-weight:600;color:var(--t1)}
.wsp-item span{font-size:var(--fs-sm);color:var(--t2)}
.wsp-item-attrs{display:flex;flex-wrap:wrap;column-gap:6px;row-gap:2px;margin-top:3px;font-size:var(--fs-sm);color:var(--t3)}
.wsp-item-attrs > span{white-space:nowrap;display:inline-flex;align-items:baseline;gap:4px;font-size:var(--fs-sm);color:var(--t3)}
.wsp-item-attrs > span:not(:last-child)::after{content:"·";margin-left:6px;opacity:.5}
.wsp-item-attrs .wsp-attr-prefix{font-style:normal;font-weight:500;opacity:.7;letter-spacing:.02em}

/* ═══════════ LINKED OBJECTS WIDGET ═══════════ */
.linked-obj{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:all .15s;border-radius:var(--r-sm)}
.linked-obj:last-of-type{border:none}
.linked-obj:hover{background:var(--card2);padding-left:4px}
.linked-icon{width:28px;height:28px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.linked-info{flex:1;min-width:0}
.linked-name{font-size:var(--fs-base);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linked-meta{font-size:var(--fs-sm);color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.linked-arrow{color:var(--t3);font-size:12px;flex-shrink:0}

/* ═══════════ FLYOUT SIDE PANEL ═══════════ */
.flyout-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:200;opacity:0;pointer-events:none;transition:opacity .3s ease;backdrop-filter:blur(2px)}
.flyout-overlay.active{opacity:1;pointer-events:all}
.flyout-panel{position:fixed;top:0;right:0;bottom:0;width:440px;max-width:90vw;background:var(--card);box-shadow:-8px 0 40px rgba(0,0,0,.15);z-index:210;transform:translateX(100%);transition:transform .35s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;border-left:1px solid var(--border)}
.flyout-panel.active{transform:translateX(0)}
/* Push variant — no backdrop, main content shifts left */
.flyout-panel.push{box-shadow:-4px 0 20px rgba(0,0,0,.08);z-index:205}
html[data-help-panel-open] .topbar{margin-right:400px;transition:margin-right .35s cubic-bezier(.22,1,.36,1)}
html[data-help-panel-open] .main{margin-right:400px;transition:margin-right .35s cubic-bezier(.22,1,.36,1)}
html:not([data-help-panel-open]) .topbar{transition:margin-right .35s cubic-bezier(.22,1,.36,1)}
html:not([data-help-panel-open]) .main{transition:margin-right .35s cubic-bezier(.22,1,.36,1)}
.flyout-head{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--border);background:var(--card);flex-shrink:0}
.flyout-head-icon{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.flyout-head-title{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px}
.flyout-head-title h3{font-size:12px;font-weight:700;margin:0;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flyout-head-title span{font-size:10px;color:var(--t3);white-space:nowrap}
.flyout-btn{width:24px;height:24px;border-radius:6px;border:1px solid var(--border);background:var(--card);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--t2);transition:all .15s;flex-shrink:0}
.flyout-btn:hover{background:var(--card2);border-color:var(--accent);color:var(--accent)}
.flyout-body{flex:1;overflow-y:auto;padding:16px 18px}
.future-feature{position:relative;border:1.5px dashed rgba(132,94,247,.35);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:12px;background:rgba(132,94,247,.03)}
.future-badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--purple);background:rgba(132,94,247,.1);padding:2px 8px;border-radius:var(--r-full);margin-bottom:6px;line-height:1}
.future-badge::before{content:'✦';font-size:8px}
.future-feature label{color:var(--purple)!important;opacity:.85}
.future-feature input,.future-feature textarea,.future-feature select,.future-feature button{opacity:.7;pointer-events:none}
.future-feature .future-interactive{opacity:1;pointer-events:auto}
.future-hint{font-size:var(--fs-sm);color:var(--t3);font-style:italic;margin-top:4px}
.future-feature-inline{display:inline-flex;align-items:center;gap:4px;border:1.5px dashed rgba(132,94,247,.35);border-radius:var(--r-sm);padding:4px 8px;background:rgba(132,94,247,.03);opacity:.85}
.future-feature-inline .future-badge{margin-bottom:0}
.cht-cascade{padding:10px 12px;border-bottom:1px solid var(--border)}
.cht-cascade-title{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);margin-bottom:8px}
.cht-cascade-level{display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:var(--fs-base);cursor:pointer;border-radius:var(--r-sm);margin-bottom:4px;background:var(--card2);border:1px solid var(--border);transition:all .15s}
.cht-cascade-level:hover{border-color:var(--accent);background:rgba(34,139,230,.04)}
.cht-cascade-level.open{border-color:var(--accent);box-shadow:0 0 0 2px rgba(34,139,230,.1);background:rgba(34,139,230,.06)}
.cht-cascade-num{font-size:var(--fs-xs);color:var(--t3);font-weight:700;width:16px;height:16px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border-radius:var(--r-full);flex-shrink:0}
.cht-cascade-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.cht-cascade-val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t1);font-weight:500}
.cht-cascade-level.empty .cht-cascade-val{color:var(--t3);font-style:italic;font-weight:400}
.cht-cascade-chevron{font-size:var(--fs-xs);color:var(--t3);transition:transform .15s;flex-shrink:0}
.cht-cascade-level.open .cht-cascade-chevron{transform:rotate(90deg);color:var(--accent)}
.cht-cascade-opts{max-height:160px;overflow-y:auto;margin:2px 0 6px 24px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--card)}
.cht-cascade-opt{display:flex;align-items:center;gap:8px;padding:6px 10px;font-size:var(--fs-base);cursor:pointer;transition:background .12s}
.cht-cascade-opt:hover{background:var(--card2)}
.cht-cascade-opt.current{color:var(--accent);font-weight:600}
.cht-cascade-opt.current::after{content:'✓';margin-left:auto;font-size:10px}
.cht-cascade-opt .cht-cascade-dot{width:8px;height:8px;border-radius:50%}
.cht-cascade-opt-count{margin-left:auto;font-size:var(--fs-sm);color:var(--t3)}
.cht-cascade-browse{display:flex;align-items:center;justify-content:center;gap:4px;font-size:var(--fs-sm);color:var(--t3);cursor:pointer;padding:8px 0 2px;transition:color .15s;border-top:1px solid var(--border);margin-top:4px}
.cht-cascade-browse:hover{color:var(--accent)}
.cat-suggested{border-bottom:1px solid var(--border);padding:6px 0 8px;margin-bottom:4px}
.cat-suggested-title{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--purple);padding:0 12px;margin-bottom:4px;display:flex;align-items:center;gap:4px}
.cat-suggested-title::before{content:'✦';font-size:9px}
.cat-suggested-item{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:var(--fs-base);cursor:pointer;border-radius:6px;margin:0 4px;transition:background .15s}
.cat-suggested-item:hover{background:rgba(132,94,247,.08)}
.cat-suggested-item .cs-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.cat-suggested-item .cs-path{color:var(--t2);font-size:var(--fs-sm);margin-left:auto}
.cat-suggested-item .cs-conf{font-size:var(--fs-xs);color:var(--purple);font-weight:600}

.flyout-section{margin-bottom:16px}
.flyout-section-collapsible{border:1px solid var(--border);border-radius:var(--r-sm);padding:0}
.flyout-section-collapsible .flyout-section-body{padding:8px 12px}
.flyout-section-summary{cursor:pointer;padding:8px 12px;list-style:none;display:flex;align-items:center;gap:6px;user-select:none}
.flyout-section-summary::-webkit-details-marker{display:none}
.flyout-section-summary::before{content:'\25B6';font-size:8px;color:var(--t3);transition:transform .15s}
details[open]>.flyout-section-summary::before{transform:rotate(90deg)}
.flyout-section-title{font-size:var(--fs-sm);font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t2);margin-bottom:8px}
.flyout-section-summary .flyout-section-title{margin-bottom:0}
.flyout-impersonate-bar{padding:8px 12px;background:rgba(34,139,230,.06);border:1px solid rgba(34,139,230,.15);border-radius:var(--r-sm)}
.flyout-impersonate-toggle{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--t1);cursor:pointer;font-weight:500}
.flyout-impersonate-toggle input[type="checkbox"]{accent-color:var(--accent);width:16px;height:16px;margin:0}
.flyout-field{margin-bottom:12px}
.flyout-field label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--t2);margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px}
/* `:not(.flyout-chiplookup-input)` excludes the inner input nested inside
   `.flyout-chiplookup-wrap` — that wrap already has its own border, so the
   double-outline (visible on To/Cc/Bcc fields pre-fix) was the descendant rule
   re-applying a border to the inner input. The wrap's border is the canonical
   one for chip-style multi-recipient pickers. */
.flyout-field input:not(.flyout-chiplookup-input),.flyout-field select,.flyout-field textarea{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-sm);font-size:var(--fs-sm);font-family:inherit;background:var(--card2);color:var(--t1);outline:none;transition:border-color .2s;box-sizing:border-box}
.flyout-field input:not(.flyout-chiplookup-input):focus,.flyout-field select:focus,.flyout-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(34,139,230,.1)}
.flyout-field input[type="number"]{-moz-appearance:textfield;font-variant-numeric:tabular-nums}
.flyout-field input[type="number"]::-webkit-inner-spin-button,.flyout-field input[type="number"]::-webkit-outer-spin-button{opacity:1}
[data-theme="dark"] .flyout-field input[type="number"]::-webkit-inner-spin-button,[data-theme="dark"] .flyout-field input[type="number"]::-webkit-outer-spin-button{filter:invert(1)}
[data-theme="dark"] .flyout-field input[type="date"]{color-scheme:dark}
/* Date picker — enlarge calendar icon touch target (44px WCAG minimum) */
.flyout-field input[type="date"]{position:relative;padding-right:44px}
.flyout-field input[type="date"]::-webkit-calendar-picker-indicator{position:absolute;right:0;top:0;width:44px;height:100%;padding:0;margin:0;cursor:pointer;opacity:.5;background-position:center;background-size:18px;border-left:1px solid var(--border);border-radius:0 var(--r-sm) var(--r-sm) 0;transition:opacity .15s,background-color .15s}
.flyout-field input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:.8;background-color:color-mix(in srgb,var(--accent) 8%,transparent)}
[data-theme="dark"] .flyout-field input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1) brightness(.8)}
/* NumberInput — reusable numeric control (replaces flyout-currency CSS ::before hack) */
.ni-wrap{position:relative;display:flex;align-items:stretch}
.ni-prefix{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:var(--fs-sm);color:var(--t3);pointer-events:none;z-index:1;line-height:1}
.ni-has-prefix .ni-input{padding-left:22px}
.ni-input{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-sm);font-size:var(--fs-sm);font-family:inherit;background:var(--card2);color:var(--t1);outline:none;transition:border-color .2s;box-sizing:border-box;font-variant-numeric:tabular-nums}
.ni-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(34,139,230,.1)}
.ni-input:disabled{opacity:.5;cursor:not-allowed}
/* Legacy flyout-currency kept for backward compat until LogExpenseFlyout migrates */
.flyout-currency{position:relative}
.flyout-currency::before{content:'$';position:absolute;left:10px;bottom:10px;font-size:var(--fs-sm);color:var(--t3);pointer-events:none;z-index:1}
.flyout-currency input{padding-left:22px}
.flyout-field-total input{border-color:color-mix(in srgb,var(--amber) 50%,var(--border));background:color-mix(in srgb,var(--amber) 5%,var(--card2));font-weight:600}
/* NumberInput total variant — amber highlight for computed fields */
.ni-wrap.ni-total .ni-input{border-color:color-mix(in srgb,var(--amber) 50%,var(--border));background:color-mix(in srgb,var(--amber) 5%,var(--card2));font-weight:600}
.flyout-field textarea{min-height:100px;resize:vertical}
.flyout-field-trigger{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-sm);font-size:var(--fs-sm);font-family:inherit;background:var(--card2);color:var(--t1);outline:none;transition:border-color .2s;box-sizing:border-box;cursor:pointer;text-align:left}
.flyout-field-trigger:hover{border-color:var(--accent)}
.flyout-field-trigger:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(34,139,230,.1)}
.flyout-field-error{font-size:var(--fs-sm);color:var(--danger);margin-top:4px;display:block}
.flyout-field-row{display:flex;gap:10px}
.flyout-field-row .flyout-field{flex:1}
.flyout-footer{display:flex;align-items:center;gap:8px;padding:8px 16px;border-top:1px solid var(--border);background:var(--card);flex-shrink:0}
.flyout-footer-btn{padding:5px 14px;border-radius:var(--r-full);font-size:var(--fs-base);font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit;border:1px solid var(--border)}
.flyout-footer-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.flyout-footer-btn.primary:hover{opacity:.9;box-shadow:0 2px 8px rgba(34,139,230,.3)}
.flyout-footer-btn.ghost{background:none;color:var(--t2)}
.flyout-footer-btn.ghost:hover{background:var(--card2)}
.flyout-footer-spacer{flex:1}
.flyout-toggle-row{display:flex;gap:4px}
.flyout-toggle{padding:3px 8px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--card);font-size:var(--fs-xs);font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit;color:var(--t2);font-variant-numeric:tabular-nums}
.flyout-toggle:hover{border-color:var(--accent);color:var(--accent);background:rgba(34,139,230,.04)}
.flyout-toggle.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Shared flyout furniture — labels, counters, sections, buttons */
.flyout-hint{font-size:var(--fs-xs);color:var(--t3)}
.flyout-char-count{float:right;font-weight:400;text-transform:none;letter-spacing:0;font-size:var(--fs-xs);color:var(--t3)}
.flyout-sublabel{font-weight:400;font-size:var(--fs-xs);color:var(--t3)}
.flyout-internal textarea{border-left:3px solid var(--amber)}
.flyout-details{margin-top:12px}
.flyout-details>summary{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t2);cursor:pointer;padding:6px 0;user-select:none}
.flyout-details.muted>summary{color:var(--t3)}
.flyout-details-count{font-weight:400;color:var(--t3)}
.flyout-recent-list{display:flex;flex-direction:column;gap:6px;padding-top:6px}
.flyout-empty{color:var(--t3);font-size:var(--fs-xs);font-style:italic}
.flyout-show-more{background:none;border:1px solid var(--border);border-radius:var(--r-full);padding:6px 14px;font-size:var(--fs-xs);font-weight:600;cursor:pointer;color:var(--accent);font-family:inherit;transition:all .15s;align-self:center;margin-top:4px}
.flyout-show-more:hover{border-color:var(--accent);background:rgba(34,139,230,.04)}
.flyout-att-label{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--t2);display:block;margin-bottom:6px}
.flyout-att-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.flyout-loading{font-size:var(--fs-xs);color:var(--t3);padding:8px 0}

/* Time combobox */
.time-combo-wrap{position:relative}
.time-combo{font-variant-numeric:tabular-nums;cursor:text}
.time-drop{display:none;position:absolute;left:0;right:0;top:100%;margin-top:2px;background:var(--card);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:180px;overflow-y:auto;z-index:200;scrollbar-width:thin}
.time-drop.open{display:block}
.time-drop-item{padding:6px 12px;font-size:var(--fs-base);cursor:pointer;transition:background .1s;font-variant-numeric:tabular-nums}
.time-drop-item:hover,.time-drop-item.highlighted{background:rgba(34,139,230,.08)}
.time-drop-item.active{background:rgba(34,139,230,.12);font-weight:600;color:var(--accent)}
.time-drop-now{font-weight:600;color:var(--accent);border-bottom:1px solid var(--border)}
.time-drop-empty{color:var(--t3);font-style:italic}

/* Tri-calc time row — 3 equal columns with aligned baselines */
.tri-calc-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;align-items:start}
.tri-calc-row .flyout-field{margin-bottom:0}

/* Duration quick-pick pills — below duration input */
.dur-pills{display:flex;gap:4px;margin-top:6px}
.dur-pill{padding:3px 8px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--card);font-size:var(--fs-xs);font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit;color:var(--t2);font-variant-numeric:tabular-nums}
.dur-pill:hover{border-color:var(--accent);color:var(--accent);background:rgba(34,139,230,.04)}
.dur-pill.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* "+ End Date" toggle button */
.end-date-toggle{width:100%;padding:7px 10px;border:1px dashed var(--border);border-radius:var(--r-sm);background:none;color:var(--t3);font-size:var(--fs-xs);cursor:pointer;font-family:inherit;transition:all .15s}
.end-date-toggle:hover{border-color:var(--accent);color:var(--accent)}

/* "same day x" dismiss link */
.end-date-dismiss{float:right;background:none;border:none;color:var(--t3);font-size:9px;cursor:pointer;padding:0;font-family:inherit;transition:color .15s}
.end-date-dismiss:hover{color:var(--accent)}

/* Future-time hint bar */
.flyout-future-hint{padding:4px 10px;font-size:var(--fs-xs);color:var(--amber);border-radius:var(--r-sm);background:rgba(253,126,20,.06);margin-top:6px}

/* Computed value pulse — teal flash when tri-calc auto-fills a field */
@keyframes tri-pulse{
  0%{box-shadow:0 0 0 3px rgba(32,201,151,.35);background:rgba(32,201,151,.08)}
  50%{box-shadow:0 0 0 2px rgba(32,201,151,.2);background:rgba(32,201,151,.04)}
  100%{box-shadow:0 0 0 0 transparent;background:transparent}
}
.time-combo.computed{animation:tri-pulse .7s ease-out}

/* Minimized flyout dock at bottom */
.flyout-dock{position:fixed;bottom:0;right:18px;display:flex;gap:6px;z-index:190;align-items:flex-end}
.flyout-dock-tab{display:flex;align-items:center;gap:6px;padding:7px 14px;background:var(--card);border:1px solid var(--border);border-bottom:none;border-radius:var(--r-sm) var(--r-sm) 0 0;font-size:var(--fs-base);font-weight:600;cursor:pointer;box-shadow:0 -2px 8px rgba(0,0,0,.06);transition:all .2s;color:var(--t1)}
.flyout-dock-tab:hover{background:var(--card2);border-color:var(--accent)}
.flyout-dock-tab .dock-close{font-size:10px;color:var(--t3);margin-left:4px;cursor:pointer}
.flyout-dock-tab .dock-close:hover{color:var(--accent)}

/* Display field — Logged By / Creation Time metadata */
.flyout-field-display .flyout-field-label{font-size:9px;color:var(--t3)}
.flyout-field-display .flyout-field-readonly{font-size:11px;font-weight:600;color:var(--t1);padding:4px 0}

/* Disabled save button */
.flyout-footer-btn.primary:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}

/* Flyout: field hint (small muted text after label) */
.flyout-field-hint{font-weight:400;text-transform:none;letter-spacing:0;color:var(--t3);font-size:9px;margin-left:4px}

/* Flyout: Will Notify mention summary */
.flyout-mentions-wrap{display:flex;flex-wrap:wrap;gap:6px}
.flyout-mention-tag{font-size:var(--fs-sm)}
.flyout-mentions-hint{font-size:var(--fs-xs);color:var(--t3);margin-top:4px}

/* Flyout: Designer mode — field customization overlay */
.flyout-designer-banner{padding:8px 12px;background:var(--warn-bg,#fff8e6);border-bottom:1px solid var(--border);font-size:11px;color:var(--t2);display:flex;align-items:center;gap:6px}
.flyout-designer-section-label{padding:6px 12px 2px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--t3);display:flex;align-items:center;justify-content:space-between}
.flyout-designer-section-toggle{background:none;border:none;cursor:pointer;color:var(--t3);padding:2px;font-size:10px;display:flex;align-items:center;gap:3px;border-radius:3px;transition:color .1s,background .1s}
.flyout-designer-section-toggle:hover{background:var(--row-hover);color:var(--t1)}
.flyout-designer-field{display:flex;align-items:center;gap:6px;padding:4px 12px;border-bottom:1px solid var(--border);transition:opacity .15s,background .15s}
.flyout-designer-field.field-hidden{opacity:.4}
.flyout-designer-field.field-dirty{background:rgba(34,139,230,.06)}
.flyout-designer-field-vis{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px;background:none;border:none;cursor:pointer;color:var(--t3);padding:0;border-radius:3px;transition:color .1s,background .1s}
.flyout-designer-field-vis:hover{background:var(--row-hover);color:var(--t1)}
.flyout-designer-field-vis.hidden{color:var(--danger)}
.flyout-designer-field-label{flex:1;font-size:12px;padding:2px 4px;border:1px solid transparent;border-radius:3px;background:transparent;color:var(--t1);font-family:inherit}
.flyout-designer-field-label:focus{border-color:var(--accent);background:var(--card);outline:none}
.flyout-designer-field.field-hidden .flyout-designer-field-label{text-decoration:line-through}
.flyout-designer-field-badge{flex-shrink:0;font-size:9px;padding:1px 4px;border-radius:3px;background:var(--bg);color:var(--t3)}
.flyout-designer-field-binding{flex-shrink:0;font-size:9px;color:var(--t3);max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flyout-designer-field-grip{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;color:var(--t3);cursor:grab;opacity:0;transition:opacity .15s,color .1s}
.flyout-designer-field:hover .flyout-designer-field-grip{opacity:.5}
.flyout-designer-field-grip:hover{opacity:1!important;color:var(--t1)}
.flyout-designer-field[draggable="true"]{cursor:grab}
.flyout-designer-field[draggable="true"]:active{cursor:grabbing;opacity:.6}
.flyout-designer-field.drop-target{box-shadow:inset 0 -2px 0 0 var(--accent);background:rgba(34,139,230,.06)}

/* Flyout: chipLookup (multi-recipient chip picker — To / Cc / Bcc in Log Email) */
.flyout-chiplookup-wrap{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-height:34px;padding:4px 8px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--card2);transition:border-color .2s;box-sizing:border-box}
.flyout-chiplookup-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px rgba(34,139,230,.1)}
.flyout-chiplookup-chip{padding:2px 6px 2px 10px;font-size:11px;gap:4px}
.flyout-chiplookup-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.flyout-chiplookup-chip-remove{background:none;border:none;cursor:pointer;color:var(--t3);font-size:14px;line-height:1;padding:0 2px;font-family:inherit;transition:color .15s;border-radius:3px}
.flyout-chiplookup-chip-remove:hover{color:var(--danger)}
.flyout-chiplookup-input{flex:1;min-width:120px;border:none;outline:none;background:transparent;color:var(--t1);font-size:var(--fs-sm);font-family:inherit;padding:4px 2px}
.flyout-chiplookup-input::placeholder{color:var(--t3)}
.flyout-chiplookup-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:220;max-height:240px;overflow-y:auto;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:0 4px 12px rgba(0,0,0,.12);padding:4px 0;display:flex;flex-direction:column}
.flyout-chiplookup-result{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:6px 12px;background:none;border:none;cursor:pointer;text-align:left;font-family:inherit;color:var(--t1);transition:background .1s}
.flyout-chiplookup-result:hover,.flyout-chiplookup-result.active{background:var(--accent-light,rgba(34,139,230,.06))}
.flyout-chiplookup-result-label{font-size:var(--fs-sm);font-weight:500;color:var(--t1)}
.flyout-chiplookup-result-email{font-size:var(--fs-xs);color:var(--t3)}
.flyout-chiplookup-loading,.flyout-chiplookup-empty{padding:8px 12px;font-size:var(--fs-sm);color:var(--t3);font-style:italic}
.flyout-chiplookup-chips{margin-top:2px}

/* Flyout: resolvedSelect (short 2-5 option picker with subtitles — e.g. LogEmail From) */
.flyout-resolved-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t1)}
.flyout-resolved-sub{margin-left:8px;font-size:var(--fs-xs);color:var(--t3);font-weight:400}
.flyout-field-trigger .flyout-resolved-label + .flyout-resolved-sub{flex-shrink:0}
.flyout-field-readonly-sub{font-weight:400;color:var(--t3);font-size:var(--fs-xs)}
/* Path B template-merge unknown-token pill — visual cue for [TOKEN] markers
   that have no value in _emailMergeContext (e.g. [next steps], [duration]).
   v15 inline style at Elysium-Case-Detail-v15.html:7634. */
.flyout-merge-unknown{background:rgba(253,126,20,.15);padding:1px 4px;border-radius:3px;color:var(--amber)}

/* Flyout: toggleLink (small accent-link button that flips a form-state flag — e.g. "+ Bcc") */
.flyout-field-toggle-link{align-self:flex-end;margin-bottom:4px;background:none;border:none;padding:0;font:inherit;font-size:11px;color:var(--accent);cursor:pointer;white-space:nowrap}
.flyout-field-toggle-link:hover{text-decoration:underline}
.flyout-field-toggle-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

/* Flyout: multiSelectGrid (checkbox grid backed by a DDL list — e.g. GL Account → GL Types) */
.flyout-multi-select-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px 12px;margin-top:4px;padding:8px;border:1px solid var(--border);border-radius:4px;background:var(--bg)}
.flyout-multi-select-grid-row{display:flex;align-items:center;gap:6px;font-size:13px;line-height:1;color:var(--t1);cursor:pointer;user-select:none;padding:1px 4px;border-radius:3px}
.flyout-multi-select-grid-row:hover{background:var(--hover)}
.flyout-multi-select-grid-row input[type="checkbox"]{width:13px;height:13px;flex-shrink:0;margin:0;accent-color:var(--accent);cursor:pointer}
.flyout-multi-select-grid-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flyout-multi-select-grid-loading,.flyout-multi-select-grid-empty{padding:12px;color:var(--t3);font-size:12px;font-style:italic}
.flyout-multi-select-grid-error{padding:12px;color:var(--red);font-size:12px}

/* SettingsListPage row delete affordance (slp = Settings List Page) */
.slp-row-delete{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;background:transparent;color:var(--t3);font-size:16px;line-height:1;cursor:pointer;border-radius:3px;transition:background .12s,color .12s}
.slp-row-delete:hover{background:var(--danger-bg,rgba(220,38,38,.1));color:var(--red)}
.slp-row-delete:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ═══════════ WIDGET: Apple Health Rings ═══════════ */
.rings-row{display:flex;justify-content:center;gap:16px;margin:4px 0 8px}
.ring-wrap{position:relative;width:72px;height:72px}
.ring-wrap svg{width:72px;height:72px;transform:rotate(-90deg)}
.ring-wrap circle{fill:none;stroke-width:7;stroke-linecap:round}
.ring-bg{stroke:var(--border)}
.ring-fill{transition:stroke-dashoffset .8s ease}
.ring-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
.ring-val{font-size:15px;font-weight:700;line-height:1}
.ring-unit{font-size:var(--fs-xs);color:var(--t2);text-transform:uppercase}
.ring-label{font-size:var(--fs-sm);color:var(--t2);text-align:center;margin-top:2px}
.streak-row{display:flex;justify-content:center;gap:5px;margin-top:6px}
.streak-dot{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:600}
.streak-dot.hit{background:var(--green);color:#fff}
.streak-dot.miss{background:var(--border);color:var(--t3)}
.streak-dot.today{background:var(--accent);color:#fff;box-shadow:0 0 0 2px rgba(34,139,230,.2)}

/* ═══════════ WIDGET: Netflix Carousel ═══════════ */
.carousel{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory}
.carousel::-webkit-scrollbar{height:3px}
.carousel::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.cc{flex-shrink:0;width:170px;scroll-snap-align:start;background:var(--card2);border-radius:var(--r-sm);border:1px solid var(--border);overflow:hidden;cursor:pointer;transition:all .3s var(--spring)}
.cc:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.cc-bar{height:3px}
.cc-bar.urgent{background:var(--red)}.cc-bar.normal{background:var(--green)}.cc-bar.warning{background:var(--amber)}
.cc-body{padding:8px}
.cc-title{font-size:var(--fs-sm);font-weight:600;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-meta{font-size:var(--fs-sm);color:var(--t3)}
.cc-foot{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.cc-badge{font-size:var(--fs-xs);font-weight:600;padding:1px 5px;border-radius:var(--r-full)}
.cc-badge.open{background:#e3f2fd;color:var(--blue)}.cc-badge.progress{background:#fff3e0;color:var(--amber)}.cc-badge.closed{background:#e8f5e9;color:var(--green)}

/* ═══════════ WIDGET: Activity Feed ═══════════ */
.chat-filter{display:flex;gap:3px;margin-bottom:8px;flex-wrap:nowrap;align-items:center}
.chat-filter-overflow{margin-top:-4px}
.cf-btn{padding:5px 10px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--card);font-size:var(--fs-sm);cursor:pointer;font-family:inherit;color:var(--t2);transition:.15s;white-space:nowrap}
.cf-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.cf-count{font-size:var(--fs-sm);font-weight:700;margin-left:4px;background:var(--card2);border-radius:var(--r-full);padding:1px 5px;min-width:14px;text-align:center;display:inline-block;color:var(--t2)}
.cf-count-zero{opacity:.4}
.cf-meta-group{display:inline-flex;gap:0;margin-right:6px;border-right:1px solid var(--border);padding-right:6px;flex-shrink:0}
.cf-meta-group .cf-btn{border-radius:0}
.cf-meta-group .cf-btn:first-child{border-radius:var(--r-full) 0 0 var(--r-full)}
.cf-meta-group .cf-btn:last-child{border-radius:0 var(--r-full) var(--r-full) 0}
.cf-meta-group .cf-btn+.cf-btn{border-left:0}
.cf-btn.active .cf-count{background:rgba(255,255,255,.25);color:#fff}
.cf-btn.active .cf-count-zero{opacity:.6}
.msg{display:flex;gap:8px;padding:10px;border-bottom:1px solid var(--border);border-left:3px solid transparent;border-radius:2px;transition:border-color .2s,background .3s}
.msg:last-of-type{border-bottom:none}
.msg[data-act-type="work-order"]{border-left-color:var(--blue)}
.msg[data-act-type="install"]{border-left-color:var(--green)}
.msg[data-act-type="expense"]{border-left-color:var(--amber)}
.msg[data-act-type="time"]{border-left-color:var(--teal)}
.msg[data-act-type="phone"]{border-left-color:var(--green)}
.msg[data-act-type="email"]{border-left-color:var(--purple)}
.msg[data-act-type="attachment"]{border-left-color:var(--rose)}
.msg[data-act-type="estimate"]{border-left-color:var(--purple)}
.msg[data-act-type="invoice"]{border-left-color:var(--blue)}
.msg[data-act-type="remove-part"]{border-left-color:var(--cyan)}
.msg[data-act-type="exchange-part"]{border-left-color:var(--cyan)}
.msg[data-act-type="order-part"]{border-left-color:var(--cyan)}
.msg[data-act-type="activity"]{border-left-color:var(--slate)}
.msg[data-act-type="manual-item"]{border-left-color:var(--amber)}
.msg[data-act-type="research"]{border-left-color:var(--yellow)}
.msg[data-act-type="signature"]{border-left-color:var(--indigo)}
.msg[data-act-type="copy-case"]{border-left-color:var(--slate)}
.msg[data-act-type="note"]{border-left-color:var(--blue)}
.msg[data-act-type="status"]{border-left-color:var(--green)}
.msg-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex-shrink:0;color:#fff;overflow:hidden;position:relative}
.msg-av img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;border-radius:50%}
.msg-av.sys{background:var(--border);color:var(--t2);font-size:13px}
.msg-av.av-note{background:rgba(34,139,230,.18);color:var(--blue);font-size:14px}
.msg-av.av-time{background:rgba(32,201,151,.18);color:var(--teal);font-size:14px}
.msg-av.av-expense{background:rgba(253,126,20,.18);color:var(--amber);font-size:14px}
.msg-av.av-call{background:rgba(64,192,87,.18);color:var(--green);font-size:14px}
.msg-av.av-email{background:rgba(132,94,247,.18);color:var(--purple);font-size:14px}
.msg-av.av-attach{background:rgba(230,73,128,.18);color:var(--rose);font-size:14px}
.msg-av.av-install{background:rgba(64,192,87,.18);color:var(--green);font-size:14px}
.msg-av.av-invoice{background:rgba(34,139,230,.18);color:var(--blue);font-size:14px}
.msg-av.av-estimate{background:rgba(132,94,247,.18);color:var(--purple);font-size:14px}
.msg-av.av-wo{background:rgba(34,139,230,.18);color:var(--blue);font-size:14px}
.msg-av.av-remove{background:rgba(14,165,233,.18);color:var(--cyan);font-size:14px}
.msg-av.av-exchange{background:rgba(14,165,233,.18);color:var(--cyan);font-size:14px}
.msg-av.av-order{background:rgba(14,165,233,.18);color:var(--cyan);font-size:14px}
.msg-av.av-activity{background:rgba(100,116,139,.18);color:var(--slate);font-size:14px}
.msg-av.av-manual{background:rgba(253,126,20,.18);color:var(--amber);font-size:14px}
.msg-av.av-research{background:rgba(234,179,8,.18);color:var(--yellow);font-size:14px}
.msg-av.av-signature{background:rgba(99,102,241,.18);color:var(--indigo);font-size:14px}
.msg-av.av-copy{background:rgba(100,116,139,.18);color:var(--slate);font-size:14px}
.msg-av.tech{background:var(--blue)}.msg-av.disp{background:var(--purple)}.msg-av.cust{background:var(--green)}
.msg-body{flex:1;min-width:0}
.msg-top{display:flex;align-items:center;gap:6px;margin-bottom:1px}
.msg-name{font-size:var(--fs-sm);font-weight:600}
.msg-time{font-size:var(--fs-sm);color:var(--t2);margin-left:auto}
.msg-badge{font-size:var(--fs-xs);padding:2px 7px;border-radius:var(--r-full);font-weight:700;display:inline-block;letter-spacing:.3px;text-transform:uppercase}
.msg-badge.note{background:rgba(34,139,230,.12);color:var(--blue)}
.msg-badge.status{background:rgba(64,192,87,.12);color:var(--green)}
.msg-badge.system{background:var(--card2);color:var(--t2)}
.msg-badge.photo{background:rgba(132,94,247,.12);color:var(--purple)}
.msg-badge.dispatch{background:rgba(253,126,20,.12);color:var(--amber)}
.msg-badge.ai{background:rgba(0,137,123,.1);color:#00897b}
.msg-badge.time{background:rgba(32,201,151,.12);color:var(--teal)}
.msg-badge.expense{background:rgba(253,126,20,.12);color:var(--amber)}
.msg-badge.call{background:rgba(64,192,87,.12);color:var(--green)}
.msg-badge.email{background:rgba(132,94,247,.12);color:var(--purple)}
.msg-badge.attach{background:rgba(230,73,128,.12);color:var(--rose)}
.msg-badge.install{background:rgba(64,192,87,.12);color:var(--green)}
.msg-badge.remove-part{background:rgba(14,165,233,.12);color:var(--cyan)}
.msg-badge.exchange-part{background:rgba(14,165,233,.12);color:var(--cyan)}
.msg-badge.order-part{background:rgba(14,165,233,.12);color:var(--cyan)}
.msg-badge.activity{background:rgba(100,116,139,.12);color:var(--slate)}
.msg-badge.manual-item{background:rgba(253,126,20,.12);color:var(--amber)}
.msg-badge.research{background:rgba(234,179,8,.12);color:var(--yellow)}
.msg-badge.signature{background:rgba(99,102,241,.12);color:var(--indigo)}
.msg-badge.copy-case{background:rgba(100,116,139,.12);color:var(--slate)}
.msg-badge.estimate{background:rgba(132,94,247,.12);color:var(--purple)}
.msg-badge.invoice{background:rgba(34,139,230,.12);color:var(--blue)}
.msg-meta{font-size:var(--fs-sm);color:var(--t2);margin-top:1px}
.msg-meta-italic{font-style:italic;color:var(--t1)}
.msg-note-rich{color:var(--t1);margin-top:3px;font-size:var(--fs-sm);line-height:1.4}
.msg-note-rich strong,.msg-note-rich b{font-weight:700}
.msg-note-rich em,.msg-note-rich i{font-style:italic}
.msg-note-rich ul,.msg-note-rich ol{margin:2px 0;padding-left:16px}
.msg-note-rich ul{list-style-type:disc}
.msg-note-rich ol{list-style-type:decimal}
.msg-note-rich li{margin:1px 0}
.msg-note-rich a{color:var(--accent);text-decoration:underline}
/* Expandable text — collapsed preview + "Show more" toggle (used by all card types) */
.msg-expand-collapsed{max-height:72px;overflow:hidden;-webkit-mask-image:linear-gradient(to bottom,#000 50%,transparent);mask-image:linear-gradient(to bottom,#000 50%,transparent)}
.msg-expand-open{max-height:300px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.msg-expand-open::-webkit-scrollbar{width:4px}
.msg-expand-open::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.msg-expand-toggle{display:block;background:none;border:none;color:var(--accent);font-size:var(--fs-sm);cursor:pointer;padding:2px 0;margin-top:2px;opacity:.8;transition:opacity .15s;font-family:inherit}
.msg-expand-toggle:hover{opacity:1}
.msg{cursor:pointer;border-radius:var(--r-sm);transition:background .15s}
.msg:hover{background:var(--card2)}
.msg:active{background:rgba(34,139,230,.04)}
.msg.active-highlight{background:rgba(34,139,230,.06);border-left:2px solid var(--accent)}
.msg-text{font-size:var(--fs-base);color:var(--t2);line-height:var(--lh-normal)}
.msg-text strong{color:var(--t1)}
.msg-muted{color:var(--t3)}
.status-pill{font-weight:600;font-size:var(--fs-sm);padding:1px 6px;border-radius:var(--r-full);letter-spacing:.2px}
.status-pill-good{color:var(--green);background:color-mix(in srgb,var(--green) 10%,transparent)}
.status-pill-warn{color:var(--amber);background:color-mix(in srgb,var(--amber) 10%,transparent)}
.status-pill-bad{color:var(--red);background:color-mix(in srgb,var(--red) 10%,transparent)}
.status-pill-closed{color:var(--t3);background:var(--card2)}
.status-pill-info{color:var(--blue);background:color-mix(in srgb,var(--blue) 10%,transparent)}
/* Activity-feed search row — wrapper only. Chrome lives in ToolbarSearch (.toolbar-search-*).
   The inner ToolbarSearch wears `.feed-search-slot` which gives it flex:1 so it fills the row
   beside the date filter button. */
.feed-search{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.feed-search-slot{flex:1 1 auto;min-width:0}
/* feed-scroll: bounded scroll container. JS wheel passthrough prevents scroll trap
   at boundaries — see ActivityFeedWidget feedScrollRef handler. */
.feed-scroll{max-height:600px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.feed-scroll::-webkit-scrollbar{width:5px}
.feed-scroll::-webkit-scrollbar-track{background:transparent}
.feed-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--r-full)}
.feed-empty{padding:20px 0;text-align:center;font-size:var(--fs-base);color:var(--t3)}
.feed-loading{padding:12px 0;text-align:center;font-size:var(--fs-sm);color:var(--t3)}
.date-picker-dropdown{position:fixed;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px;box-shadow:0 8px 24px rgba(0,0,0,.3);z-index:200;min-width:240px}
.date-picker-presets{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.date-picker-preset{background:none;border:none;color:var(--t1);font-size:var(--fs-sm);cursor:pointer;padding:6px 8px;border-radius:var(--r-sm);text-align:left;font-family:inherit;transition:background .15s}
.date-picker-preset:hover{background:var(--card2)}
.date-picker-preset.active{background:var(--accent);color:#fff}
.date-picker-custom{display:flex;flex-direction:column;gap:6px;padding-top:8px;border-top:1px solid var(--border)}
.date-picker-custom label{font-size:var(--fs-xs);color:var(--t2);text-transform:uppercase;letter-spacing:.5px}
.date-picker-custom input[type="date"]{background:var(--card2);border:1px solid var(--border);border-radius:var(--r-sm);padding:6px 8px;color:var(--t1);font-size:var(--fs-sm);font-family:inherit}
.audit-diff{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.audit-diff-entry{background:var(--card2);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 10px;display:flex;flex-direction:column;gap:5px}
.audit-field{color:var(--accent);font-weight:600;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.5px}
.audit-diff-values{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font-size:var(--fs-base);line-height:var(--lh-normal)}
.audit-old{color:var(--red,#e06c75);text-decoration:line-through;text-decoration-color:rgba(224,108,117,.4)}
.audit-arrow{color:var(--t3);font-size:12px;flex-shrink:0}
.audit-new{color:var(--green,#98c379);font-weight:600}
.audit-diff-toggle{background:none;border:none;color:var(--accent);font-size:var(--fs-sm);cursor:pointer;padding:4px 0;font-family:inherit;text-align:left;opacity:.85;transition:opacity .15s}
.audit-diff-toggle:hover{opacity:1;text-decoration:underline}
.msg-receipts{display:flex;align-items:center;gap:3px;margin-top:2px;font-size:var(--fs-sm);color:var(--t3)}
.msg-receipts .read{color:var(--blue)}
.msg-attach{display:flex;align-items:center;gap:6px;margin-top:4px;padding:6px 8px;background:var(--card2);border-radius:var(--r-sm);border:1px solid var(--border);font-size:var(--fs-sm)}
.typing-ind{display:flex;align-items:center;gap:6px;padding:6px 0;color:var(--t3);font-size:var(--fs-sm)}
.typing-dots{display:flex;gap:2px}
.typing-dots span{width:4px;height:4px;border-radius:50%;background:var(--t3);animation:tbounce 1.4s infinite}
.typing-dots span:nth-child(2){animation-delay:.2s}
.typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes tbounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-3px)}}

.composer{display:flex;flex-direction:column;gap:6px;margin-top:4px;margin-bottom:8px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.composer input{flex:1;padding:6px 12px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--card2);font-size:var(--fs-base);font-family:inherit;outline:none;transition:.2s}
.composer input:focus{border-color:var(--accent)}
.log-type-selector{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.lt-btn{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--card);cursor:pointer;font-size:10px;font-weight:600;transition:all .25s var(--spring);font-family:inherit;white-space:nowrap;color:var(--t1);flex-shrink:0}
.lt-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg);border-color:var(--accent);background:rgba(34,139,230,.04)}
.lt-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.lt-btn.active:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 4px 12px rgba(34,139,230,.3)}
.log-type-fields{margin-bottom:8px}
.ltf-group{display:none;flex-direction:column;gap:8px;padding:10px;background:var(--card2);border-radius:var(--r-sm);border:1px solid var(--border)}
.ltf-group[style*="display:flex"],.ltf-group.visible{display:flex!important}
.ltf-row{display:flex;flex-direction:column;gap:3px}
.ltf-row-pair{display:flex;gap:8px}
.ltf-row-pair .ltf-row{flex:1}
.ltf-label{font-size:var(--fs-sm);font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.3px}
.ltf-input{padding:6px 8px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--card);font-size:var(--fs-base);font-family:inherit;color:var(--t1);transition:border-color .15s}
.ltf-input:focus{outline:none;border-color:var(--accent)}
.ltf-select{padding:6px 8px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--card);font-size:var(--fs-base);font-family:inherit;color:var(--t1);cursor:pointer}
.ltf-toggle-row{display:flex;gap:4px}
.ltf-toggle{padding:4px 10px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--card);font-size:var(--fs-sm);cursor:pointer;transition:all .15s;font-family:inherit;color:var(--t2)}
.ltf-toggle.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.ltf-toggle:hover:not(.active){border-color:var(--accent);color:var(--accent)}
.ltf-dropzone{padding:20px;text-align:center;border:2px dashed var(--border);border-radius:var(--r-sm);cursor:pointer;color:var(--t2);font-size:var(--fs-base);transition:all .15s}
.ltf-dropzone:hover{border-color:var(--accent);background:rgba(34,139,230,.03)}
.composer-input-row{display:flex;gap:6px;align-items:center}
.composer button{width:28px;height:28px;border-radius:50%;border:none;background:var(--accent);color:#fff;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center}

/* ═══════════ WIDGET: Quick Actions (configurable row) ═══════════ */
.qa-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.qa-pill{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--card);cursor:pointer;font-size:10px;font-weight:600;transition:all .25s var(--spring);font-family:inherit}
.qa-pill:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg);border-color:var(--accent);background:rgba(34,139,230,.04)}
.qa-pill.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.qa-pill.primary:hover{opacity:.9}
.qa-overflow{display:inline-flex;align-items:center;cursor:pointer;gap:0;position:relative;overflow:visible}
.qa-menu{position:fixed;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-lg),0 8px 24px rgba(0,0,0,.12);z-index:500;display:none;flex-direction:column;min-width:200px;overflow:visible;padding:4px;opacity:0;transform:translateY(-4px);transition:opacity .15s,transform .15s var(--spring)}
.qa-menu.show{display:flex;opacity:1;transform:translateY(0)}
.qa-menu-item{display:flex;align-items:center;gap:8px;padding:7px 10px;font-size:12px;cursor:pointer;transition:background .12s;white-space:nowrap;border-radius:6px;color:var(--t1);border:none;background:none;font-family:inherit;width:100%;text-align:left}
.qa-menu-item:hover{background:var(--hover)}
.qa-menu-item .qa-item-icon{width:16px;font-size:13px;text-align:center;flex-shrink:0}
.qa-menu-item .qa-item-shortcut{margin-left:auto;font-size:10px;color:var(--t3);letter-spacing:.3px;padding-left:16px}
.qa-menu-separator{height:1px;background:var(--border);margin:4px 0}
.qa-menu-label{padding:6px 10px 4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);user-select:none}
.qa-customize{font-size:var(--fs-sm);color:var(--accent);cursor:pointer;margin-left:auto;flex-shrink:0}

/* Action Bar Customization Panel */
.ab-config-panel{display:none;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.ab-config-panel.open{display:block}
.ab-config-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ab-config-title{font-size:var(--fs-sm);font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--t2)}
.ab-config-done{font-size:var(--fs-sm);font-weight:600;color:var(--accent);cursor:pointer;border:none;background:none;font-family:inherit;padding:3px 8px;border-radius:var(--r-sm);transition:all .15s}
.ab-config-done:hover{background:rgba(34,139,230,.08)}
.ab-action-list{display:flex;flex-direction:column;gap:2px}
.ab-action-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r-sm);transition:background .12s;cursor:grab;user-select:none}
.ab-action-item:hover{background:var(--card2)}
.ab-action-item:active{cursor:grabbing;background:rgba(34,139,230,.06)}
.ab-action-dragging{opacity:.4;background:rgba(34,139,230,.06)}
.ab-action-grip{color:var(--t3);font-size:10px;cursor:grab;flex-shrink:0;opacity:.4}
.ab-action-item:hover .ab-action-grip{opacity:.8}
.ab-action-icon{font-size:13px;flex-shrink:0}
.ab-action-name{font-size:var(--fs-base);font-weight:500;color:var(--t1);flex:1}
.ab-action-toggle{position:relative;width:32px;height:18px;border-radius:9px;border:none;cursor:pointer;transition:background .2s;flex-shrink:0;padding:0}
.ab-action-toggle.on{background:var(--accent)}
.ab-action-toggle.off{background:var(--border)}
.ab-action-toggle::after{content:'';position:absolute;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .2s}
.ab-action-toggle.on::after{left:16px}
.ab-action-toggle.off::after{left:2px}
.ab-section-divider{font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);padding:8px 8px 4px;margin-top:4px}
.qa-quick-note{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.qa-quick-note-avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#1971c2);color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0;overflow:hidden;position:relative;cursor:pointer;transition:transform .2s var(--spring)}
.qa-quick-note-avatar:hover{transform:scale(1.15)}
.qa-quick-note input{flex:1;padding:7px 12px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--card2);font-size:var(--fs-base);font-family:inherit;color:var(--t1);outline:none;transition:all .2s}
.qa-quick-note input:focus{border-color:var(--accent);background:var(--card);box-shadow:0 0 0 2px rgba(34,139,230,.1)}
.qa-quick-note input::placeholder{color:var(--t3)}
.qa-quick-note-send{width:28px;height:28px;border-radius:50%;border:none;background:var(--accent);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;transition:all .2s;flex-shrink:0;opacity:.6}
.qa-quick-note-send:hover{opacity:1;transform:scale(1.05)}
.qa-quick-note input:focus ~ .qa-quick-note-send,.qa-quick-note input:not(:placeholder-shown) ~ .qa-quick-note-send{opacity:1}

/* ═══════════ WIDGET: Alerts ═══════════ */
.alert-item{display:flex;gap:6px;padding:8px;border-bottom:1px solid var(--border);font-size:var(--fs-base);cursor:pointer;border-radius:var(--r-sm);transition:.2s}
.alert-item:last-child{border:none}
.alert-item:hover{background:var(--card2)}
.alert-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:4px}
.alert-dot.crit{background:var(--red)}.alert-dot.warn{background:var(--amber)}.alert-dot.info{background:var(--blue)}
.alert-text{flex:1;color:var(--t2)}
.alert-text strong{color:var(--t1)}
.alert-time{font-size:var(--fs-sm);color:var(--t3);flex-shrink:0}

/* ═══════════ WIDGET: Parts (availability badges) ═══════════ */
.part-row{display:flex;align-items:center;gap:6px;padding:6px 0;font-size:var(--fs-base);border-bottom:1px solid var(--border)}
.part-row:last-child{border:none}
.part-name{flex:1}
.part-status{font-size:var(--fs-xs);font-weight:600;padding:2px 6px;border-radius:var(--r-full);white-space:nowrap}
.part-status.in-stock{background:var(--green);color:#fff}
.part-status.low{background:var(--amber);color:#fff}
.part-status.backordered{background:var(--red);color:#fff}
.part-status.on-van{background:var(--blue);color:#fff}

/* ═══════════ WIDGET: Contacts (quick contact) ═══════════ */
.contact-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border)}
.contact-row:last-child{border:none}
.contact-av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#fff;flex-shrink:0;position:relative;overflow:hidden;cursor:pointer;transition:transform .2s var(--spring)}
.contact-av:hover{transform:scale(1.15)}
.contact-av img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;border-radius:50%}
.contact-info{flex:1;min-width:0}
.contact-name{font-size:var(--fs-base);font-weight:500;display:flex;align-items:center;gap:3px}
.contact-role{font-size:var(--fs-sm);color:var(--t3)}
.contact-btns{display:flex;gap:3px}
.contact-btn{width:24px;height:24px;border-radius:50%;border:1px solid var(--border);background:var(--card);cursor:pointer;font-size:10px;display:flex;align-items:center;justify-content:center;transition:all .25s var(--spring)}
.contact-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:scale(1.12)}
.presence{width:7px;height:7px;border-radius:50%;display:inline-block;position:absolute;bottom:-1px;right:-1px;border:1px solid var(--card)}
.presence.on{background:var(--green)}.presence.busy{background:var(--amber)}.presence.off{background:var(--t3)}

/* ═══════════ WIDGET: Equipment Health ═══════════ */
.eq-gauge{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.eq-ring{position:relative;width:56px;height:56px;flex-shrink:0}
.eq-ring svg{width:56px;height:56px;transform:rotate(-90deg)}
.eq-ring circle{fill:none;stroke-width:6;stroke-linecap:round}
.eq-ring-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:14px;font-weight:700}
.eq-details{flex:1}
.eq-name{font-size:12px;font-weight:600}
.eq-meta{font-size:var(--fs-sm);color:var(--t2)}
.eq-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.eq-tag{padding:2px 6px;border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:600;background:var(--card2);border:1px solid var(--border)}

/* ═══════════ WIDGET: Photos Gallery ═══════════ */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.photo-grid.photo-grid--small{grid-template-columns:repeat(4,1fr);gap:3px}
.photo-grid.photo-grid--medium{grid-template-columns:repeat(3,1fr);gap:4px}
.photo-grid.photo-grid--large{grid-template-columns:repeat(2,1fr);gap:6px}
.photo-thumb{aspect-ratio:1;border-radius:var(--r-sm);background:var(--card2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;transition:all .3s var(--spring);overflow:hidden;text-decoration:none;color:var(--t1);font-family:inherit;padding:0}
.photo-thumb:hover{transform:scale(1.06);box-shadow:var(--shadow-lg)}
.photo-thumb--upload{background:var(--accent);color:#fff;border-color:var(--accent);font-weight:700;font-size:22px}
.photo-thumb--upload:hover{background:var(--accent);filter:brightness(1.08)}
.photo-gallery-status{padding:8px 0;font-size:var(--fs-sm);color:var(--t3)}
.photo-gallery-status--error{color:var(--red)}
.photo-gallery-status--drawer{padding:16px 0;text-align:center}
.photo-gallery-upload-link{background:none;border:none;cursor:pointer;font-family:inherit;font-size:var(--fs-base);font-weight:600;color:var(--accent);padding:0;text-decoration:none}
.photo-gallery-upload-link:hover{text-decoration:underline}
.photo-gallery-droptarget{position:relative;border-radius:var(--r-sm);transition:outline-color .15s,background .15s;outline:2px dashed transparent;outline-offset:2px}
.photo-gallery-droptarget--active{outline-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.photo-gallery-droptarget--uploading{outline-color:var(--border);opacity:.85;cursor:progress}
/* Toolbar — sits above the photo-grid in both inline and drawer surfaces.
   Filter pills on the left, size cycle (and SortControl in drawer) on the right. */
.photo-gallery-toolbar{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px;flex-wrap:nowrap}
.photo-gallery-toolbar--drawer{margin-bottom:8px;padding:0 2px}
.photo-gallery-toolbar-trail{display:flex;align-items:center;gap:6px;flex-shrink:0}
/* Filter pills inside the toolbar — compact variant of .chat-filter */
.photo-gallery-filter{flex:1;min-width:0;gap:3px;flex-wrap:wrap}
.photo-gallery-filter .cf-btn{padding:2px 7px;font-size:var(--fs-xs);line-height:1.4}
.photo-gallery-filter .cf-count{font-size:var(--fs-xs);padding:0 4px;margin-left:2px}
/* Thumbnail size cycle — 28×28 icon-only pill matching the SelectFormBar density toggle */
.photo-gallery-size-cycle{flex-shrink:0}
/* Photo gallery search slot — chrome lives in ToolbarSearch (.toolbar-search-*).
   flex-grow:1 lets the search bar fill the available middle space between the FilterPickerPill
   and the trail (matches the prominence of the Activity Feed search bar). At narrow widths
   it shrinks to 140px floor so the trail stays on the same row. */
.photo-gallery-search-slot{flex:1 1 200px;min-width:140px}
/* Gallery-tile file-type pill — sits bottom-left, opposite the delete badge.
   Dark scrim + bold mono-style label so it stays legible over image thumbnails. */
.att-type-pill{position:absolute;left:4px;bottom:4px;z-index:4;padding:1px 5px;border-radius:3px;font-size:9px;font-weight:700;letter-spacing:.04em;background:rgba(0,0,0,.55);color:#fff;line-height:1.4;pointer-events:none;backdrop-filter:blur(2px);user-select:none}

/* Multi-select bulk action bar — inline (not portal-floating) since this is
   widget-scoped selection, not page-scoped. The page-scoped pattern lives in
   ui/BulkActionBar.tsx (.bulk-bar) and floats from the bottom of the viewport;
   this bar sits between the toolbar and the photo grid. The Select toggle
   itself reuses the canonical .tb-pill style (no custom class) — only the
   bulk bar + sub-buttons get bespoke styling. */
/* Per-tile selection checkbox — top-left when AttachmentTile selectable=true.
   Mirrors the .att-type-pill (bottom-left) but mirrored corner + interactive.
   The rgba(255,255,255,.85) overlay matches the AttachmentTile delete-badge
   white-ring pattern (var(--bg1) border there, light overlay here) — neither
   is currently tokenized; both serve the same purpose of staying legible over
   image thumbnails regardless of theme. */
.att-selectbox{position:absolute;top:4px;left:4px;z-index:6;width:18px;height:18px;border-radius:3px;border:2px solid var(--bg1);background:rgba(255,255,255,.85);color:#fff;font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;font-weight:700;box-shadow:var(--shadow);font-family:inherit}
.att-selectbox.selected{border-color:var(--accent);background:var(--accent)}
/* URL-tile selected ring — applied to the .photo-thumb wrapper button when
   selectMode + selected. The AttachmentTile gallery branch handles its own
   selected ring via its inner tileBase style (boxShadow inset accent). */
.photo-thumb--url-selected{border:2px solid var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.photo-gallery-bulk-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 10px;margin-bottom:8px;border-radius:var(--r-sm);background:rgba(34,139,230,.08);border:1px solid rgba(34,139,230,.25);font-size:var(--fs-xs)}
.photo-gallery-bulk-count{font-weight:600;color:var(--accent)}
.photo-gallery-bulk-trail{display:flex;align-items:center;gap:6px;margin-left:auto}
.photo-gallery-bulk-select-all{height:24px;padding:0 10px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--card2);color:var(--t1);font-size:var(--fs-xs);font-weight:600;cursor:pointer;font-family:inherit}
.photo-gallery-bulk-select-all:disabled{opacity:.5;cursor:not-allowed}
.photo-gallery-bulk-action{height:24px;padding:0 10px;border-radius:var(--r-sm);border:1px solid var(--accent);background:var(--accent);color:#fff;font-size:var(--fs-xs);font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}
.photo-gallery-bulk-action:hover:not(:disabled){filter:brightness(1.1)}
.photo-gallery-bulk-action:disabled{opacity:.5;cursor:not-allowed}
.photo-gallery-bulk-action--danger{background:transparent;color:var(--red, #e03131);border-color:var(--red, #e03131)}
.photo-gallery-bulk-action--danger:hover:not(:disabled){background:var(--red, #e03131);color:#fff}
.photo-gallery-bulk-action--danger-confirm{background:var(--red, #e03131);color:#fff;border-color:var(--red, #e03131)}
.photo-gallery-bulk-status{font-size:var(--fs-xs);color:var(--t2);margin-left:8px}

/* ═══════════ WIDGET: Forms & Checklists ═══════════ */
.check-item{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--border);font-size:var(--fs-base);cursor:pointer}
.check-item:last-child{border:none}
.check-box{width:18px;height:18px;border-radius:4px;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;transition:.15s}
.check-item.done .check-box{background:var(--green);border-color:var(--green);color:#fff}
.check-item.done .check-text{text-decoration:line-through;color:var(--t3)}

/* ═══════════ WIDGET: Weather ═══════════ */
.weather-main{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.weather-icon{font-size:36px}
.weather-temp{font-size:28px;font-weight:700;letter-spacing:-1px}
.weather-desc{font-size:var(--fs-base);color:var(--t2)}
.weather-details{display:flex;gap:12px;font-size:var(--fs-sm);color:var(--t2)}

/* ═══════════ MAP WIDGET ═══════════ */
.map-container{position:relative;width:100%;height:200px;background:linear-gradient(135deg,#e8f4f8 0%,#d4eaf0 50%,#c8e0e8 100%);border-radius:var(--r-sm);overflow:hidden;cursor:pointer}
.map-container:hover .map-overlay{opacity:1}
.map-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(34,139,230,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(34,139,230,.06) 1px,transparent 1px);background-size:30px 30px}
.map-road{position:absolute;background:rgba(255,255,255,.7)}
.map-road.h{height:3px;left:0;right:0}.map-road.v{width:3px;top:0;bottom:0}
.map-road.main{background:rgba(255,200,50,.5)}
.map-road.main.h{height:5px}.map-road.main.v{width:5px}
.map-pin{position:absolute;width:32px;height:32px;transform:translate(-50%,-100%);filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));z-index:2;animation:mapPinDrop .5s var(--spring)}
.map-pin-dot{width:32px;height:32px;border-radius:50% 50% 50% 0;background:var(--red);transform:rotate(-45deg);display:flex;align-items:center;justify-content:center}
.map-pin-dot::after{content:'📍';font-size:14px;transform:rotate(45deg)}
.map-pin-pulse{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:16px;height:6px;background:rgba(0,0,0,.15);border-radius:50%;animation:mapPulse 2s infinite}
.map-tech-pin{position:absolute;z-index:3;transform:translate(-50%,-50%)}
.map-tech-dot{width:24px;height:24px;border-radius:50%;background:var(--accent);border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.2);overflow:hidden;position:relative}
.map-tech-dot img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;border-radius:50%}
.map-tech-route{position:absolute;z-index:1}
.map-legend{display:flex;flex-wrap:wrap;gap:4px 14px;padding:8px 0 0;font-size:var(--fs-sm);color:var(--t2);line-height:1.4}
.map-legend-item{display:flex;align-items:center;gap:6px;white-space:nowrap;min-width:0}
.map-legend-item span{overflow:hidden;text-overflow:ellipsis}
.map-legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.map-overlay{position:absolute;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s;border-radius:var(--r-sm)}
.map-overlay span{color:#fff;font-size:11px;font-weight:600;padding:6px 14px;background:rgba(0,0,0,.5);border-radius:var(--r-full);backdrop-filter:blur(4px)}
@keyframes mapPinDrop{0%{opacity:0;transform:translate(-50%,-200%)}100%{opacity:1;transform:translate(-50%,-100%)}}
@keyframes mapPulse{0%,100%{transform:translateX(-50%) scale(1);opacity:.3}50%{transform:translateX(-50%) scale(1.5);opacity:.1}}
.map-info-bar{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:var(--fs-sm);color:var(--t2)}
.map-info-bar strong{color:var(--t1);font-weight:600}
.map-info-bar-stacked{flex-direction:column;align-items:flex-start;gap:4px}
.map-info-line{display:flex;align-items:flex-start;gap:8px;min-width:0;line-height:1.4;width:100%}
.map-info-line .map-legend-dot{margin-top:6px;flex-shrink:0}
.map-info-line>strong,.map-info-line>span:not(.map-legend-dot){overflow-wrap:anywhere;word-break:break-word}
.elysium-map-marker{width:18px;height:18px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:pointer;box-sizing:border-box}
.elysium-map-marker.site{background:var(--red)}
.elysium-map-marker.supp{background:var(--green)}

/* ═══════════ WIDGET PICKER OVERLAY ═══════════ */
.picker-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:500;display:none;align-items:center;justify-content:center}
.picker-overlay.open{display:flex}
.picker-box{background:var(--card);border-radius:20px;width:560px;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-lg);padding:24px}
.picker-title{font-size:16px;font-weight:700;margin-bottom:4px}
.picker-sub{font-size:12px;color:var(--t2);margin-bottom:12px}
.picker-search{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-full);background:var(--bg);color:var(--t1);font-size:13px;font-family:inherit;margin-bottom:12px;outline:none;transition:border-color .15s}
.picker-search:focus{border-color:var(--accent)}
.picker-search::placeholder{color:var(--t3)}
.picker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.picker-item{padding:12px;border-radius:var(--r);border:1px solid var(--border);cursor:pointer;transition:all .25s var(--spring);text-align:center}
.picker-item:hover{border-color:var(--accent);background:rgba(34,139,230,.04);transform:translateY(-1px)}
.picker-item.active{border-color:var(--accent);background:rgba(34,139,230,.07)}
.picker-item-icon{font-size:22px;margin-bottom:4px}
.picker-item-name{font-size:var(--fs-base);font-weight:600}
.picker-item-desc{font-size:var(--fs-sm);color:var(--t3);margin-top:2px}
.picker-footer{display:flex;justify-content:space-between;margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
.picker-btn{padding:8px 20px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--card);cursor:pointer;font-size:12px;font-family:inherit;transition:.15s}
.picker-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.picker-btn.primary:hover{opacity:.9}
.picker-btn.danger{color:var(--danger);border-color:var(--danger)}
.picker-btn.danger:hover{background:var(--danger);color:#fff}

/* ═══════════ COMMAND PALETTE ═══════════ */
.cmd-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:600;display:flex;align-items:flex-start;justify-content:center;padding-top:120px;opacity:0;pointer-events:none;transition:opacity .2s}
.cmd-overlay.open{opacity:1;pointer-events:auto}
.cmd-overlay.open .cmd-box{animation:cmd-box-in .25s var(--spring) both}
.cmd-box{background:var(--card);border-radius:20px;width:480px;box-shadow:var(--shadow-lg);overflow:hidden}
.cmd-input{width:100%;padding:14px 16px;border:none;font-size:14px;font-family:inherit;background:transparent;outline:none;color:var(--t1)}
.cmd-results{border-top:1px solid var(--border);max-height:400px;overflow-y:auto}
.cmd-item{padding:10px 16px;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:12px;transition:.1s}
.cmd-item:hover,.cmd-item.selected{background:var(--card2)}
.cmd-item-icon{font-size:14px;width:20px;text-align:center}
.cmd-item-label{flex:1}
.cmd-item-key{font-size:10px;color:var(--t3);background:var(--card2);padding:2px 6px;border-radius:4px;border:1px solid var(--border)}
.cmd-result-card{flex-direction:column;align-items:stretch;gap:4px;padding:10px 16px}
.cmd-result-main{display:flex;align-items:baseline;gap:8px;min-width:0}
.cmd-result-id{font-size:11px;color:var(--accent);font-weight:600;white-space:nowrap;flex-shrink:0}
.cmd-result-title{font-size:12px;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmd-result-title mark,.cmd-result-id mark{background:var(--accent);color:#fff;border-radius:2px;padding:0 2px;font-weight:600}
.cmd-result-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cmd-badge{font-size:10px;padding:1px 6px;border-radius:var(--r-full);font-weight:500;white-space:nowrap}
.cmd-badge-blue{background:color-mix(in srgb,var(--blue) 18%,transparent);color:var(--blue)}
.cmd-badge-green{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green)}
.cmd-badge-purple{background:color-mix(in srgb,var(--purple) 18%,transparent);color:var(--purple)}
.cmd-badge-amber{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.cmd-badge-red{background:color-mix(in srgb,var(--red) 18%,transparent);color:var(--red)}
.cmd-badge-default{background:var(--card2);color:var(--t2)}
.cmd-result-detail{font-size:10px;color:var(--t3)}
.cmd-result-detail::before{content:'·';margin-right:6px}
.cmd-result-detail:first-of-type::before{content:none}
.cmd-group-header{font-size:10px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.05em;padding:8px 16px 4px;user-select:none}
.cmd-nlp-filters{padding:6px 16px;font-size:11px;color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent);border-bottom:1px solid var(--border)}
.cmd-scope-badge{font-size:13px;font-weight:700;color:var(--accent);padding:0 4px;flex-shrink:0}
.cmd-hint-pill{font-size:10px;padding:1px 5px;border:1px solid var(--border);border-radius:var(--r);color:var(--t3);cursor:default}
.cmd-input-row{display:flex;align-items:center;gap:8px;padding:0 16px}
.cmd-result-card:hover{background:color-mix(in srgb,var(--accent) 4%,transparent)}
.cmd-view-all{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;background:color-mix(in srgb,var(--accent) 8%,var(--card));border-top:1px solid color-mix(in srgb,var(--accent) 20%,transparent);cursor:pointer;transition:background .15s;position:sticky;bottom:0;z-index:1}
.cmd-view-all:hover{background:color-mix(in srgb,var(--accent) 15%,transparent)}
.cmd-view-all-text{font-size:12px;font-weight:600;color:var(--accent)}
.cmd-view-all-arrow{font-size:14px;color:var(--accent);transition:transform .15s}
.cmd-view-all:hover .cmd-view-all-arrow{transform:translateX(3px)}
@keyframes cmd-box-in{from{opacity:0;transform:translateY(-12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.cmd-footer{display:flex;align-items:center;justify-content:space-between;padding:6px 16px;border-top:1px solid var(--border);font-size:10px;color:var(--t3)}
.cmd-footer-hints{display:flex;gap:12px}
.cmd-footer kbd{padding:1px 4px;border:1px solid var(--border);border-radius:3px;font-size:9px;background:var(--bg)}
.cmd-footer-warn{color:var(--warn);font-size:10px}
.cmd-searching-text{color:var(--t3);font-style:italic}
.cmd-empty-text{color:var(--t3);font-style:italic;text-align:center;width:100%}

/* ═══════════ SEARCH RESULTS PAGE ═══════════ */
.srp-container{padding:24px 32px;max-width:1200px;margin:0 auto}
.srp-search-bar{display:flex;gap:8px;margin-bottom:16px}
.srp-search-input{flex:1;padding:10px 16px;border:1px solid var(--border);border-radius:var(--r);background:var(--card);color:var(--t1);font-size:14px;font-family:inherit;outline:none;transition:border-color .15s}
.srp-search-input:focus{border-color:var(--accent)}
.srp-search-btn{padding:10px 20px;border:none;border-radius:var(--r);background:var(--accent);color:#fff;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;transition:opacity .15s}
.srp-search-btn:hover{opacity:.85}
.srp-summary{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:12px;color:var(--t2)}
.srp-summary-count{font-weight:600;color:var(--t1)}
.srp-summary-source{font-size:10px;padding:1px 6px;border-radius:var(--r-full);background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}
.srp-clear-filters{border:none;background:none;color:var(--accent);font-size:12px;cursor:pointer;text-decoration:underline;font-family:inherit}
.srp-body{display:flex;gap:24px;align-items:flex-start}
.srp-sidebar{width:200px;flex-shrink:0;position:sticky;top:80px}
.srp-facet-group{margin-bottom:16px}
.srp-facet-group+.srp-facet-group{border-top:1px solid var(--border);padding-top:12px}
.srp-facet-title{font-size:11px;font-weight:600;color:var(--t2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.srp-facet-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:4px 8px;border:none;background:none;cursor:pointer;font-size:12px;color:var(--t2);border-radius:var(--r);font-family:inherit;transition:background .1s;text-align:left}
.srp-facet-item:hover{background:var(--card2)}
.srp-facet-item.active{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-weight:500}
.srp-facet-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:8px}
.srp-facet-count{font-size:10px;color:var(--t3);flex-shrink:0}
.srp-results{flex:1;min-width:0}
.srp-result-card{display:block;padding:12px 16px;border:1px solid var(--border);border-radius:var(--r);margin-bottom:8px;cursor:pointer;transition:border-color .15s,background .15s;text-decoration:none;color:inherit}
.srp-result-card.peek-active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent);box-shadow:inset 3px 0 0 var(--accent)}
.srp-result-card:hover{border-color:var(--accent);background:var(--card2);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.srp-result-header{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.srp-result-id{font-size:12px;color:var(--accent);font-weight:600;white-space:nowrap;flex-shrink:0;text-decoration:none}
.srp-result-id:hover{text-decoration:underline}
.srp-result-title{font-size:13px;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srp-result-title mark,.srp-result-id mark{background:var(--accent);color:#fff;border-radius:2px;padding:0 2px;font-weight:600}
.srp-result-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.srp-tag{font-size:10px;padding:1px 6px;border-radius:var(--r-full);font-weight:500;white-space:nowrap}
.srp-tag-blue{background:color-mix(in srgb,var(--blue) 18%,transparent);color:var(--blue)}
.srp-tag-green{background:color-mix(in srgb,var(--green) 18%,transparent);color:var(--green)}
.srp-tag-purple{background:color-mix(in srgb,var(--purple) 18%,transparent);color:var(--purple)}
.srp-tag-amber{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.srp-tag-red{background:color-mix(in srgb,var(--red) 18%,transparent);color:var(--red)}
.srp-tag-default{background:var(--card2);color:var(--t2)}
.srp-result-detail{font-size:11px;color:var(--t3)}
.srp-result-detail::before{content:'·';margin-right:6px}
.srp-result-detail:first-of-type::before{content:none}
.srp-result-matched{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.srp-matched-field{font-size:11px;color:var(--t2);background:color-mix(in srgb, var(--accent) 8%, transparent);border:1px solid color-mix(in srgb, var(--accent) 20%, transparent);border-radius:var(--r-full);padding:1px 8px}
.srp-matched-label{color:var(--t3);font-weight:600;text-transform:uppercase;font-size:10px;letter-spacing:.03em}
.srp-matched-field mark{background:color-mix(in srgb, var(--accent) 25%, transparent);color:var(--t1);border-radius:2px;padding:0 1px}
.srp-loading,.srp-empty{padding:32px;text-align:center;color:var(--t3);font-size:13px}
.srp-loading{animation:srp-pulse 1.5s ease-in-out infinite}
@keyframes srp-pulse{0%,100%{opacity:1}50%{opacity:.5}}
.srp-pagination{display:flex;align-items:center;justify-content:center;gap:16px;padding:20px 0}
.srp-page-btn{padding:6px 16px;border:1px solid var(--border);border-radius:var(--r);background:var(--card);color:var(--t1);font-size:12px;cursor:pointer;font-family:inherit;transition:.15s}
.srp-page-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.srp-page-btn:disabled{opacity:.4;cursor:default}
.srp-page-info{font-size:12px;color:var(--t2);font-weight:500}

/* ═══════════ TOAST ═══════════ */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(60px);background:var(--t1);color:var(--bg);padding:10px 24px;border-radius:var(--r-full);font-size:12px;font-weight:500;opacity:0;transition:all .4s var(--spring);z-index:700;pointer-events:none;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow-lg)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast button{background:var(--accent);color:#fff;border:none;padding:3px 10px;border-radius:var(--r-full);font-size:10px;cursor:pointer;pointer-events:auto}

/* ═══════════ ONBOARDING TOUR ═══════════ */
.tour-overlay{position:fixed;inset:0;z-index:800;pointer-events:none}
.tour-overlay.active{pointer-events:auto}
.tour-backdrop{position:fixed;inset:0;background:transparent;opacity:0;transition:opacity .3s;z-index:801}
.tour-overlay.active .tour-backdrop{opacity:1}
.tour-overlay.centered .tour-backdrop{background:rgba(0,0,0,.45)}
.tour-highlight{position:absolute;z-index:802;border-radius:var(--r);border:2px solid var(--accent);box-shadow:0 0 0 4000px rgba(0,0,0,.55),0 0 20px 4px rgba(34,139,230,.35);pointer-events:none;transition:all .4s var(--spring);display:none}
.tour-overlay.active .tour-highlight{display:block}
.tour-tooltip{position:absolute;z-index:803;background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-lg),0 12px 40px rgba(0,0,0,.18);padding:16px 18px;width:340px;opacity:0;transform:translateY(8px);transition:all .35s var(--spring);pointer-events:auto}
.tour-tooltip.visible{opacity:1;transform:translateY(0)}
.tour-tooltip::before{content:'';position:absolute;width:12px;height:12px;background:var(--card);border:1px solid var(--border);border-right:none;border-bottom:none;transform:rotate(45deg);z-index:-1}
.tour-tooltip.arrow-top::before{bottom:-7px;left:24px;border:1px solid var(--border);border-left:none;border-top:none}
.tour-tooltip.arrow-bottom::before{top:-7px;left:24px}
.tour-tooltip.arrow-left::before{right:-7px;top:16px;border:1px solid var(--border);border-left:none;border-top:none;transform:rotate(-45deg)}
.tour-step-badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-sm);font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.tour-step-badge .step-dots{display:flex;gap:3px}
.tour-step-badge .step-dot{width:6px;height:6px;border-radius:50%;background:var(--border);transition:background .2s}
.tour-step-badge .step-dot.active{background:var(--accent)}
.tour-step-badge .step-dot.done{background:var(--green)}
.tour-title{font-size:14px;font-weight:700;margin-bottom:4px;color:var(--t1)}
.tour-desc{font-size:12px;color:var(--t2);line-height:1.5;margin-bottom:6px}
.tour-detail{font-size:11px;color:var(--t2);line-height:1.5;padding:8px 10px;background:var(--card2);border-radius:var(--r-sm);border:1px solid var(--border);margin-bottom:10px;display:none}
.tour-detail.open{display:block}
.tour-detail-toggle{font-size:10px;color:var(--accent);cursor:pointer;font-weight:600;margin-bottom:10px;display:inline-flex;align-items:center;gap:3px;border:none;background:none;font-family:inherit;padding:0}
.tour-detail-toggle:hover{text-decoration:underline}
.tour-actions{display:flex;align-items:center;gap:6px}
.tour-btn{padding:6px 14px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--card);font-size:11px;font-weight:600;cursor:pointer;transition:all .2s var(--spring);font-family:inherit}
.tour-btn:hover{border-color:var(--accent);background:rgba(34,139,230,.04)}
.tour-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.tour-btn.primary:hover{opacity:.9;transform:scale(1.02)}
.tour-dismiss{margin-left:auto;font-size:var(--fs-sm);color:var(--t3);cursor:pointer;border:none;background:none;font-family:inherit;padding:2px 4px}
.tour-dismiss:hover{color:var(--t1)}
.tour-progress{display:flex;gap:2px;margin-top:10px}
.tour-progress-bar{flex:1;height:3px;border-radius:2px;background:var(--border);overflow:hidden}
.tour-progress-fill{height:100%;border-radius:2px;background:var(--accent);transition:width .4s var(--spring)}

/* ═══════════ ONBOARDING WELCOME WIDGET ═══════════ */
.onboard-widget{background:linear-gradient(135deg,#228be6 0%,#00c6ff 50%,#40c057 100%);border-radius:var(--r);margin-bottom:8px;overflow:hidden;position:relative;color:#fff}
.onboard-widget.dismissed{display:none}
.onboard-close{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.15);color:#fff;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;backdrop-filter:blur(4px)}
.onboard-close:hover{background:rgba(255,255,255,.3);transform:scale(1.08)}
.onboard-inner{padding:16px 18px 14px}
.onboard-greeting{font-size:16px;font-weight:700;margin-bottom:2px}
.onboard-sub{font-size:12px;opacity:.92;margin-bottom:12px;line-height:1.4}
.onboard-steps{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory}
.onboard-steps::-webkit-scrollbar{height:2px}
.onboard-steps::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:2px}
.onboard-card{flex-shrink:0;width:145px;scroll-snap-align:start;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-sm);padding:10px;cursor:pointer;transition:all .25s var(--spring);backdrop-filter:blur(4px)}
.onboard-card:hover{background:rgba(255,255,255,.25);transform:translateY(-2px)}
.onboard-card-icon{font-size:18px;margin-bottom:4px}
.onboard-card-title{font-size:var(--fs-sm);font-weight:700;margin-bottom:2px}
.onboard-card-desc{font-size:var(--fs-sm);opacity:.85;line-height:1.3}
.onboard-footer{display:flex;align-items:center;justify-content:space-between;padding:8px 18px 12px}
.onboard-tour-btn{padding:5px 14px;border-radius:var(--r-full);border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.2);color:#fff;font-size:10px;font-weight:600;cursor:pointer;transition:all .25s var(--spring);font-family:inherit;backdrop-filter:blur(4px)}
.onboard-tour-btn:hover{background:rgba(255,255,255,.35);transform:scale(1.03)}
.onboard-dismiss-link{font-size:var(--fs-sm);opacity:.7;cursor:pointer;border:none;background:none;color:#fff;font-family:inherit}
.onboard-dismiss-link:hover{opacity:1;text-decoration:underline}

/* Right column widget accent borders */
.col-right .performance-rings::before{background:var(--green)}
.col-right .alert-feed::before{background:var(--red)}
.col-right .parts-inventory::before{background:var(--blue)}
.col-right .contacts::before{background:var(--purple)}
.col-right .weather::before{background:var(--amber)}
.col-right .previous-cases::before{background:var(--t3)}
.col-right .site-location::before{background:#06b6d4}

/* ═══════════ ALERT FEED WIDGET (inline body + drawer) ═══════════ */
.alert-inline-header{padding:8px 12px 4px;display:flex;align-items:center}
.alert-inline-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--card);color:var(--t2);font-size:var(--fs-sm);font-weight:500;cursor:pointer;font-family:inherit;transition:all .15s}
.alert-inline-badge:hover{border-color:var(--accent);color:var(--accent)}
.alert-inline-badge--urgent{border-color:var(--source-site);color:var(--source-site);font-weight:600}
.alert-inline-badge--urgent:hover{background:color-mix(in srgb,var(--source-site) 8%,transparent);border-color:var(--source-site);color:var(--source-site)}
.alert-view-all{display:block;width:100%;text-align:center;padding:6px 12px;background:none;border:0;border-top:1px solid var(--border);color:var(--accent);font-size:var(--fs-sm);font-weight:500;cursor:pointer;font-family:inherit}
.alert-view-all:hover{background:var(--hover)}
.alert-empty-state{padding:20px 12px;text-align:center;font-size:var(--fs-base);color:var(--t3)}
.alert-site-preview{padding:8px 12px;border-top:1px solid var(--border);font-size:var(--fs-base);color:var(--t1);line-height:1.4}
.alert-site-preview-body{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap}
.alert-site-more{display:inline;margin-top:4px;background:none;border:0;padding:0;color:var(--accent);font-size:var(--fs-sm);font-weight:500;cursor:pointer;font-family:inherit}
.alert-site-more:hover{text-decoration:underline}
.alert-source-pill{display:inline-block;margin-top:4px;padding:1px 6px;border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.alert-acked-pill{display:inline-block;margin-top:4px;margin-left:6px;padding:1px 6px;border-radius:var(--r-full);background:var(--border);color:var(--t1);font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.alert-section-title{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--t2);margin:0 0 8px 0}
.alert-section-spaced{margin-top:16px}
.alert-section-toggle{border:0;background:transparent;padding:0;cursor:pointer;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.05em;color:var(--t2);margin-bottom:8px;display:flex;align-items:center;gap:6px;font-family:inherit}
.alert-section-count{color:var(--t3)}
.alert-site-body{font-size:var(--fs-base);color:var(--t1);white-space:pre-wrap;margin:0}
.alert-site-body--empty{color:var(--t3);font-style:italic}

/* ═══════════ MOBILE RESPONSIVE ═══════════ */
@media(max-width:768px){
  :root{--mob-tab-h:56px;--mob-header-h:40px}
  body{padding-bottom:var(--mob-tab-h)}
  .topbar{padding:8px 12px}
  .topbar-center{display:none}
  .topbar-right{display:none}
  /* Show help button on mobile — direct to full-screen help panel */
  .topbar-right .help-mob-show{display:flex;position:absolute;right:12px;top:50%;transform:translateY(-50%);min-width:44px;min-height:44px}
  .topbar-right.mob-menu-open{display:flex;position:absolute;top:52px;right:0;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:0;box-shadow:var(--shadow-lg);z-index:140;min-width:180px}
  .topbar-right.mob-menu-open .tb-btn{width:100%;height:40px;border:none;border-bottom:1px solid var(--border);border-radius:0;justify-content:flex-start;padding-left:16px}
  .topbar-right.mob-menu-open .tb-btn:last-child{border:none}
  .mob-hamburger{display:none;width:34px;height:34px;border:1px solid var(--border);background:var(--card);border-radius:var(--r-full);cursor:pointer;font-size:16px;align-items:center;justify-content:center;transition:all .25s var(--spring)}
  .mob-hamburger:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
  .topbar-right.mob-menu-visible .mob-hamburger{display:flex}
  .mob-case-bar{display:none;position:sticky;top:52px;height:var(--mob-header-h);background:var(--card);border-bottom:1px solid var(--border);padding:0 12px;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--t1);z-index:99}
  .mob-case-bar span:last-child{color:var(--t2);font-size:12px;font-weight:400;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .main{grid-template-columns:1fr !important;gap:0;min-height:auto}
  .main.sidebar-hidden{grid-template-columns:1fr !important}
  .main.sidebar-expanded{grid-template-columns:1fr !important}
  .col-resize{display:none !important}
  .col-left,.col-center,.col-right{display:contents;overflow:visible;max-height:none;border:none;padding:0;background:none}
  .widget{margin-bottom:8px;margin-left:8px;margin-right:8px;border-radius:var(--r);max-width:calc(100vw - 16px);overflow:hidden;box-sizing:border-box}
  .widget-header{cursor:pointer;user-select:none}
  .widget-header::after{content:'▾';font-size:10px;color:var(--t3);transition:transform .2s;margin-left:4px}
  .widget-header.collapsed::after{transform:rotate(-90deg)}
  .widget-collapse-btn{display:none}
  [data-wid="case-header"] .widget-header::after,
  [data-wid="activity-feed"] .widget-header::after{display:none}
  .widget-close{display:none}
  .drag-handle{display:none}
  .widget{user-select:none}
  .onboard-widget{display:none !important}
  .widget-nav-badge{display:none}
  .widget-open-btn,.widget-create-btn{display:none}
  .widget-search-badge{margin-left:auto}
  .flyout-panel{width:100vw;max-width:100vw;border-radius:0}
  /* dp-sheet variant — designer panel docks as bottom-sheet at narrow widths so the form preview stays visible above (F12 fix, E3 batch 2026-05-11). !important on width/max-width is required to override DesignerPanel's inline width={300} prop at mobile widths only; the desktop 300px width is preserved by the absence of this rule outside @media(max-width:768px). */
  .flyout-panel.dp-sheet{top:30vh;left:0;right:0;bottom:0;width:100vw!important;max-width:100vw!important;border-radius:12px 12px 0 0;border-top:1px solid var(--border);border-left:none;box-shadow:0 -8px 40px rgba(0,0,0,.20);transform:translateY(100%)}
  .flyout-panel.dp-sheet.active{transform:translateY(0)}
  /* Soften backdrop dim at narrow widths so dp-sheet's top 30vh live-preview reads more clearly (Option B 2026-05-11). Standard mobile flyouts cover the full viewport at width:100vw, so the overlay is only visually meaningful behind dp-sheet. Tap-to-dismiss remains intact. */
  .flyout-overlay{background:rgba(0,0,0,.15)}
  /* Disable push mode on mobile — fall back to overlay behavior */
  html[data-help-panel-open] .topbar,html[data-help-panel-open] .main{margin-right:0;transition:none}
  /* Widget content reflow — prevent clipping */
  .widget-body{overflow:hidden}
  .case-detail-pair{grid-template-columns:1fr}
  .case-detail-pair .trip-row:first-child{border-right:none;border-bottom:1px solid var(--border)}
  .case-header-meta-row{gap:4px}
  .case-header-tag{flex:1 1 100px;min-width:90px}
  .widget-header{min-height:44px;padding:10px 14px}
  .cf-btn{min-height:36px;padding:6px 14px}
  .lt-btn,.qa-pill{min-height:40px;padding:8px 16px;font-size:12px}
  .msg{padding:10px 14px}
  /* Mobile tab bar styles live in workspace.css (.ws-mobile-tab-bar) */
}

/* Desktop: hide mobile elements */
@media(min-width:769px){
  .mob-case-bar,.mob-hamburger,.topbar-right.mob-menu-visible .mob-hamburger{display:none !important}
}

/* ═══════════ TOUCH DEVICE LAYER — 44px minimum targets ═══════════ */
@media(pointer:coarse){
  .case-header-tag{padding:10px 14px 11px;font-size:10px;border-radius:10px;min-height:44px;box-sizing:border-box}
  .case-header-tag .cht-label{font-size:var(--fs-sm);letter-spacing:.5px}
  .case-header-tag .cht-val{font-size:var(--fs-base);gap:6px}
  .case-header-tag .cht-chevron{font-size:10px}
  .case-header-tag .cht-dot{width:8px;height:8px}
  .cht-dropdown .tbd-item{min-height:44px;padding:12px 14px;font-size:var(--fs-md);gap:10px}
  .cht-dropdown .tbd-header{padding:10px 14px;font-size:var(--fs-sm)}
  .cht-dropdown .tbd-item .tbd-sub{font-size:var(--fs-sm)}
  .cht-dropdown .tbd-av{width:28px;height:28px;font-size:10px}
  .cht-search{min-height:44px;padding:10px 12px 10px 34px;font-size:13px;border-radius:8px}
  .cht-search-icon{left:18px;font-size:14px}
  .cht-search-wrap{padding:8px 10px}
  .cht-tree-node{min-height:44px;padding:10px 12px;font-size:var(--fs-md);gap:8px}
  .cht-tree-toggle{width:44px;height:44px;font-size:12px;border-radius:8px;margin:-8px -4px}
  .cht-tree-dot{width:8px;height:8px}
  .cht-tree-label{font-size:var(--fs-md)}
  .cht-tree-count{font-size:var(--fs-sm)}
  .inline-editable{padding:10px 40px 10px 12px;min-height:44px;border-radius:8px}
  .inline-editable::after{width:28px;height:28px;font-size:14px;right:8px}
  .ie-field-label{font-size:var(--fs-sm)}
  .ie-input,.ie-textarea{font-size:14px;padding:10px 12px}
  .save-bar .sb-btn{min-height:44px;padding:10px 20px;font-size:13px}
  .save-bar{padding:10px 16px}
  .tb-btn{width:44px;height:44px}
  .back-btn{width:44px;height:44px;font-size:22px}
  .topbar-badge{padding:6px 12px;font-size:11px;min-height:32px}
  .mob-hamburger{width:44px;height:44px}
  .widget-header{min-height:48px;padding:10px 14px;gap:8px}
  .widget-close{width:36px;height:36px;font-size:18px}
  .widget-open-btn,.widget-create-btn{width:36px;height:36px}
  .widget-search-badge{padding:6px 12px;min-height:36px;font-size:11px}
  .widget-action{min-height:36px;padding:6px 12px;font-size:11px}
  .drag-handle{width:28px;min-height:28px}
  .cf-btn{min-height:44px;padding:8px 16px;font-size:var(--fs-sm)}
  .lt-btn{min-height:44px;padding:10px 18px;font-size:12px}
  .qa-pill{min-height:44px;padding:10px 16px;font-size:12px}
  .qa-quick-note input,.composer input{min-height:44px;padding:10px 14px;font-size:14px}
  .qa-quick-note-send,.composer button{width:44px;height:44px}
  .qa-menu-item{min-height:44px;padding:12px 14px;font-size:12px}
  .msg{padding:12px 14px}
  .check-box{width:24px;height:24px;border-radius:6px}
  .check-item{min-height:44px;padding:8px 0;gap:10px}
  .linked-obj{min-height:44px;padding:10px 0}
  .sla-milestone{min-height:44px;padding:12px 14px 12px 0}
  .pipeline-step{min-height:44px}
  .flyout-footer-btn{min-height:44px;padding:10px 20px;font-size:var(--fs-base)}
  .picker-btn{min-height:44px;padding:10px 24px;font-size:13px}
  .picker-item{min-height:48px;padding:14px}
  .cmd-item{min-height:44px;padding:12px 18px;font-size:12px}
  .ab-action-item{min-height:44px;padding:10px 12px;font-size:12px}
  .ab-action-toggle{width:44px;height:26px;border-radius:13px}
  .onboard-close{width:36px;height:36px}
  .onboard-tour-btn,.tour-btn{min-height:44px;padding:10px 18px;font-size:12px}
  .case-detail-pair{min-height:40px;padding:8px 14px}
  .case-header-meta{padding:12px 16px 14px}
  .case-header-meta-row{gap:8px}
}

/* ═══════════ STALE BANNER ═══════════ */
.stale-banner{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:8px;padding:0 12px;height:32px;font-size:12px;color:var(--t1);border-bottom:1px solid var(--amber);background:color-mix(in srgb,var(--amber) 10%,transparent)}
.stale-banner-icon{font-size:14px;flex-shrink:0;line-height:1}
.stale-banner-msg{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--t2);font-size:12px}
.stale-banner-msg strong{color:var(--t1);font-weight:600}
.stale-banner-actions{display:flex;gap:6px;flex-shrink:0}
.stale-banner-btn{padding:2px 10px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--card);font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit;line-height:1.6}
.stale-banner-btn:hover{background:var(--card2)}
.stale-banner-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.stale-banner-btn.primary:hover{opacity:.9}

/* ═══════════ UPGRADE CARD (D23) ═══════════ */
.ely-upgrade-card{display:flex;align-items:center;gap:12px;padding:16px 20px;border-radius:var(--r);border:1px dashed color-mix(in srgb,var(--warn) 50%,var(--border));background:color-mix(in srgb,var(--warn) 6%,var(--card));min-height:56px}
.ely-upgrade-card-icon{font-size:20px;flex-shrink:0;line-height:1;opacity:.7}
.ely-upgrade-card-body{flex:1;min-width:0}
.ely-upgrade-card-title{font-size:var(--fs-md);font-weight:600;color:var(--t1);line-height:1.3}
.ely-upgrade-card-desc{font-size:var(--fs-sm);color:var(--t3);line-height:1.4;margin-top:2px}
.ely-upgrade-card-btn{display:inline-block;padding:6px 16px;border-radius:var(--r-full);border:none;background:var(--warn);color:#fff;font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit;white-space:nowrap;flex-shrink:0;text-decoration:none;text-align:center}
.ely-upgrade-card-btn:hover{opacity:.9;box-shadow:var(--shadow)}
a.ely-upgrade-card-btn:visited{color:#fff}
[data-theme="dark"] .ely-upgrade-card{background:color-mix(in srgb,var(--warn) 8%,var(--card));border-color:color-mix(in srgb,var(--warn) 30%,var(--border))}
/* Disabled pill state (security + package gates on action bar) */
.qa-pill[disabled],.qa-row button[disabled]{opacity:.5;cursor:not-allowed;pointer-events:auto}

/* ═══════════ CONFLICT MODAL ═══════════ */
.conflict-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:1000;display:none;align-items:center;justify-content:center}
.conflict-overlay.open{display:flex}
.conflict-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:20px 24px;max-width:440px;width:90vw}
.conflict-title{font-size:14px;font-weight:700;color:var(--danger);margin:0 0 12px}
.conflict-body{font-size:12px;color:var(--t2);line-height:1.5;margin-bottom:16px}
.conflict-fields{margin:10px 0;padding:0;list-style:none}
.conflict-fields li{font-size:var(--fs-base);color:var(--t1);padding:2px 0;display:flex;align-items:center;gap:6px}
.conflict-fields li::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0}
.conflict-fields.yours li::before{background:var(--accent)}
.conflict-fields.theirs li::before{background:var(--amber)}
.conflict-label{font-size:var(--fs-sm);font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.conflict-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}
.conflict-btn{padding:6px 16px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--card);font-size:var(--fs-base);font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit}
.conflict-btn:hover{background:var(--card2)}
.conflict-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.conflict-btn.primary:hover{opacity:.9}
.conflict-btn.warning{background:var(--amber);color:#fff;border-color:var(--amber)}
.conflict-btn.warning:hover{opacity:.9}
[data-theme="dark"] .stale-banner{background:color-mix(in srgb,var(--amber) 12%,var(--card))}
[data-theme="dark"] .conflict-overlay{background:rgba(0,0,0,.6)}

/* ═══════════ CONFIRM DIALOG ═══════════ */
.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:1000;display:none;align-items:center;justify-content:center}
.confirm-overlay.open{display:flex}
.confirm-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:20px 24px;max-width:420px;width:90vw}
.confirm-title{font-size:14px;font-weight:700;color:var(--t1);margin:0 0 8px}
.confirm-title.destructive{color:var(--danger)}
.confirm-body{font-size:12px;color:var(--t2);line-height:1.5;margin:0 0 16px}
.confirm-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.confirm-btn{padding:6px 16px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--card);font-size:var(--fs-base);font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit;color:var(--t1)}
.confirm-btn:hover{background:var(--card2)}
.confirm-btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.confirm-btn.primary:hover{opacity:.9}
.confirm-btn.destructive{background:var(--danger);color:#fff;border-color:var(--danger)}
.confirm-btn.destructive:hover{opacity:.9}
[data-theme="dark"] .confirm-overlay{background:rgba(0,0,0,.6)}

/* ═══════════ ACTIVITY FEED — LIVE UPDATES BUTTON ═══════════ */
.feed-live-btn{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;font-size:var(--fs-sm);font-family:inherit;font-weight:500;border:1px solid var(--border);border-radius:var(--r-full);background:var(--card2);color:var(--t2);cursor:pointer;line-height:1.4;transition:all .15s;white-space:nowrap}
.feed-live-icon{font-size:var(--fs-base)}
.feed-mode-toast{position:absolute;right:0;top:100%;margin-top:4px;padding:3px 10px;font-size:var(--fs-sm);font-weight:500;border-radius:var(--r-full);background:var(--t1);color:var(--card);white-space:nowrap;pointer-events:none;opacity:.9}
.feed-live-btn:hover{border-color:var(--accent);color:var(--accent)}
.feed-live-btn.feed-live-pending{border-color:var(--accent);background:var(--accent);color:#fff;font-weight:600;animation:feed-pending-pulse 1.5s ease-in-out infinite}
@keyframes feed-pending-pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 40%,transparent)}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}}
/* ═══════════ CHT TAG FLASH ANIMATION ═══════════ */
@keyframes cht-flash-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 40%,transparent)}
  50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent)}
  100%{box-shadow:0 0 0 0 transparent}
}
.cht-flash{animation:cht-flash-pulse .75s ease-out 2;border-color:color-mix(in srgb,var(--accent) 40%,transparent)!important;transition:border-color .3s}

/* ═══════════ THEME PICKER ═══════════ */
.theme-picker-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--card);cursor:pointer;font-size:16px;transition:all .15s}
.theme-picker-btn:hover{border-color:var(--accent);background:var(--hover)}
.theme-picker-menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);z-index:500;min-width:180px;padding:4px;overflow:hidden}
.theme-picker-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;border:none;background:transparent;color:var(--t1);font-size:var(--fs-base);cursor:pointer;border-radius:6px;transition:background .1s}
.theme-picker-item:hover{background:var(--hover)}
.theme-picker-item.active{background:rgba(34,139,230,.1);color:var(--accent)}
.theme-picker-icon{font-size:18px;width:24px;text-align:center;flex-shrink:0}
.theme-picker-label{flex:1;text-align:left;font-weight:500}
.theme-picker-check{color:var(--accent);font-size:var(--fs-sm);font-weight:700}

/* ═══════════ HELP SYSTEM ═══════════ */
/* Indicator: subtle dot that appears when help mode is on */
.help-indicator{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:var(--card2);border:1px solid var(--border);padding:0;margin-left:4px;cursor:help;font-size:9px;font-weight:700;color:var(--accent);line-height:1;vertical-align:middle;flex-shrink:0;transition:all .15s;animation:help-fade-in .3s ease-out;font-family:inherit}
.help-indicator:hover{background:var(--accent);color:#fff;border-color:var(--accent);transform:scale(1.15)}
/* C3 F7: scale-up at mobile widths + touch elevation (audit Phase A §F7) */
@media(max-width:768px){.help-indicator{width:20px;height:20px;font-size:11px;margin-left:6px}}
@media(pointer:coarse){.help-indicator{width:24px;height:24px;font-size:13px;margin-left:6px}}
@keyframes help-fade-in{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
/* Tooltip popup (portaled to body) */
.help-tooltip-popup{position:fixed;z-index:600;width:240px;padding:10px 14px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--t2);pointer-events:auto;animation:help-popup-in .15s ease-out}
@keyframes help-popup-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.help-tooltip-title{font-weight:700;color:var(--t1);margin-bottom:4px;font-size:var(--fs-base)}
.help-tooltip-text{color:var(--t2)}
/* "Learn more" link inside tooltip */
.help-tooltip-actions{display:flex;gap:10px;margin-top:6px}
.help-tooltip-more{padding:0;border:none;background:none;cursor:pointer;font-size:var(--fs-sm);font-family:inherit;font-weight:600;color:var(--accent);transition:opacity .15s}
.help-tooltip-more:hover{opacity:.8}
.help-tooltip-browse{color:var(--t3)}
.help-tooltip-browse:hover{color:var(--accent);opacity:1}
/* Help mode toggle in topbar */
.help-mode-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--card);cursor:pointer;font-size:14px;font-weight:700;color:var(--t3);transition:all .15s}
.help-mode-btn:hover{border-color:var(--accent);color:var(--accent)}
.help-mode-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
/* ── Help Menu Popup (topbar ? dropdown) ── */
.help-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:200px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:0 8px 24px rgba(0,0,0,.15);z-index:300;padding:4px;display:flex;flex-direction:column;gap:2px}
.help-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:none;border-radius:4px;background:none;cursor:pointer;text-align:left;font-family:inherit;font-size:var(--fs-sm);color:var(--t1);transition:background .12s}
.help-menu-item:hover{background:var(--card2)}
.help-menu-icon{font-size:14px;flex-shrink:0;width:20px;text-align:center}
.help-menu-label{flex:1}
.help-menu-arrow{color:var(--t3);font-size:14px;font-weight:600}
.help-menu-check{color:var(--accent);font-size:13px;font-weight:700}
.help-menu-hint{margin-left:auto;font-size:10px;padding:1px 5px;border-radius:var(--r-sm);background:var(--card2);border:1px solid var(--border);color:var(--t3);font-family:var(--font-mono,monospace);font-weight:600}
/* ── Help Panel (slide-out body content) ── */
.help-panel-search{position:relative;display:flex;align-items:center;margin-bottom:14px}
.help-panel-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--t3);pointer-events:none}
.help-panel-search-input{width:100%;padding:7px 28px 7px 30px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--card2);font-size:var(--fs-sm);font-family:inherit;outline:none;transition:border-color .15s;color:var(--t1)}
.help-panel-search-input:focus{border-color:var(--accent)}
.help-panel-search-input::placeholder{color:var(--t3)}
.help-panel-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:12px;color:var(--t3);padding:0 2px;line-height:1;transition:color .15s}
.help-panel-search-clear:hover{color:var(--t1)}
.help-panel-body{margin-bottom:16px}
.help-panel-paragraph{margin:0 0 10px;font-size:var(--fs-sm);line-height:var(--lh-relaxed);color:var(--t2)}
.help-panel-paragraph:last-child{margin-bottom:0}
.help-panel-paragraph strong{color:var(--t1);font-weight:600}
.help-panel-list{margin:0 0 10px;padding-left:18px;font-size:var(--fs-sm);line-height:var(--lh-relaxed);color:var(--t2)}
.help-panel-list li{margin-bottom:4px}
.help-panel-list li strong{color:var(--t1);font-weight:600}
.help-panel-section{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.help-panel-section-label{font-size:var(--fs-sm);font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);margin-bottom:8px}
.help-panel-tags{display:flex;flex-wrap:wrap;gap:5px}
.help-panel-tag{display:inline-block;padding:2px 8px;border-radius:var(--r-full);border:1px solid var(--border);font-size:11px;color:var(--t3);background:var(--card2);cursor:pointer;font-family:inherit;transition:border-color .15s, color .15s}
.help-panel-tag:hover{border-color:var(--accent);color:var(--accent)}
.help-panel-related-link{display:block;width:100%;padding:8px 10px;margin-bottom:4px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--card2);cursor:pointer;text-align:left;font-family:inherit;transition:border-color .15s}
.help-panel-related-link:hover{border-color:var(--accent)}
.help-panel-related-title{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--t1);margin-bottom:2px}
.help-panel-related-summary{display:block;font-size:11px;color:var(--t3);line-height:var(--lh-normal)}
/* Back button */
.help-panel-back{display:flex;align-items:center;gap:4px;padding:0;margin-bottom:12px;border:none;background:none;cursor:pointer;font-size:var(--fs-sm);font-family:inherit;font-weight:600;color:var(--accent);transition:opacity .15s}
.help-panel-back:hover{opacity:.8}
/* Category cards (home view) */
.help-panel-categories{display:flex;flex-direction:column;gap:6px}
.help-panel-category-card{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--card2);cursor:pointer;text-align:left;font-family:inherit;transition:border-color .15s, background .15s}
.help-panel-category-card:hover{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 5%, var(--card2))}
.help-panel-category-icon{font-size:20px;flex-shrink:0;width:32px;text-align:center}
.help-panel-category-info{flex:1;min-width:0}
.help-panel-category-name{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--t1)}
.help-panel-category-desc{display:block;font-size:11px;color:var(--t3);margin-top:1px}
.help-panel-category-count{flex-shrink:0;min-width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-full);background:var(--card);border:1px solid var(--border);font-size:11px;font-weight:600;color:var(--t2)}
/* Empty state */
.help-panel-empty{padding:24px 0;text-align:center;font-size:var(--fs-sm);color:var(--t3)}
/* Entry list */
.help-panel-entry-list{display:flex;flex-direction:column;gap:4px}
/* Home layout */
.help-panel-home{display:flex;flex-direction:column;gap:0}
.help-panel-home-section{margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.help-panel-home-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
/* ── Guide Cards ── */
.help-guide-featured{display:flex;flex-direction:column;gap:6px}
.help-guide-list{display:flex;flex-direction:column;gap:4px}
.help-guide-card{display:flex;align-items:flex-start;gap:12px;width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--card2);cursor:pointer;text-align:left;font-family:inherit;transition:border-color .15s, background .15s}
.help-guide-card:hover{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 5%, var(--card2))}
.help-guide-card.featured{padding:14px 16px}
.help-guide-card.compact{align-items:center;padding:8px 12px;gap:8px}
.help-guide-card-icon{font-size:22px;flex-shrink:0;width:32px;text-align:center;line-height:1.2}
.help-guide-card-icon-sm{font-size:16px;flex-shrink:0;width:20px;text-align:center}
.help-guide-card-body{flex:1;min-width:0}
.help-guide-card-title{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--t1);line-height:var(--lh-normal)}
.help-guide-card-meta{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:11px;color:var(--t3)}
.help-guide-card.compact .help-guide-card-meta{margin-top:0;margin-left:auto;flex-shrink:0}
.help-guide-icon-sm{margin-right:4px}
/* ── Guide Meta Bar (detail view) ── */
.help-guide-meta-bar{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding:8px 0;border-bottom:1px solid var(--border)}
.help-guide-meta-item{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--t3)}
/* ── Guide Type Badge ── */
.help-guide-type-badge{display:inline-block;padding:1px 7px;border-radius:var(--r-full);border:1px solid var(--border);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:var(--t3);background:var(--card)}
/* ── Level Dots ── */
.help-guide-level{display:inline-flex;align-items:center;gap:2px}
.help-guide-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--border)}
.help-guide-dot.filled{background:var(--accent)}
/* ── Procedural Guide Steps ── */
.help-guide-steps{display:flex;flex-direction:column;gap:0;margin-bottom:16px}
.help-guide-step{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.help-guide-step:last-child{border-bottom:none}
.help-guide-step-number{flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--accent);color:#fff;font-size:var(--fs-sm);font-weight:700;line-height:1}
.help-guide-step-content{flex:1;min-width:0}
.help-guide-step-title{font-size:var(--fs-sm);font-weight:700;color:var(--t1);margin-bottom:6px}
.help-guide-step-body{font-size:var(--fs-sm);color:var(--t2);line-height:var(--lh-relaxed)}
.help-guide-step-body .help-panel-paragraph{margin:0 0 8px}
.help-guide-step-body .help-panel-list{margin:0 0 8px}

/* ═══════════ TIPTAP RICH TEXT EDITOR ═══════════ */
.tiptap-editor{white-space:pre-wrap;word-wrap:break-word}
.tiptap-editor p{margin:0 0 4px}
.tiptap-editor p:last-child{margin-bottom:0}
.tiptap-editor strong{font-weight:700}
.tiptap-editor em{font-style:italic}
.tiptap-editor ul,.tiptap-editor ol{margin:4px 0;padding-left:24px}
.tiptap-editor ul{list-style-type:disc}
.tiptap-editor ol{list-style-type:decimal}
.tiptap-editor li{margin:2px 0}
.tiptap-editor li p{margin:0}
.tiptap-editor a,.tiptap-editor .editor-link{color:var(--accent);text-decoration:underline;cursor:pointer}
.tiptap-editor.is-editor-empty:first-child::before{content:attr(data-placeholder);color:var(--t3);pointer-events:none;font-style:italic;float:left;height:0}
.ProseMirror{outline:none}
.ProseMirror:focus{outline:none}

/* ═══════════ DATA TABLE (Select Forms) ═══════════ */

.select-form-page{display:flex;flex-direction:column;height:100%}
.dt-container{display:flex;flex-direction:column;flex:1;min-height:0;background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--border)}
.dt-scroll{flex:1;overflow-x:auto;overflow-y:auto;min-height:0}

.data-table{width:max-content;min-width:100%;border-collapse:collapse;background:var(--card)}
.data-table thead{background:var(--card2);border-bottom:1px solid var(--border)}
.data-table th{padding:8px 12px;text-align:left;font-size:10px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.4px;cursor:default;user-select:none;white-space:nowrap;transition:all .2s var(--spring)}
.data-table th.sortable{cursor:pointer}
.data-table th.sortable:hover{background:var(--border)}
.dt-sort-arrow{color:var(--accent);font-size:10px;margin-left:2px}
.dt-sort-rank{font-size:10px;font-weight:700;color:var(--accent);margin-left:2px}

.data-table td{padding:8px 12px;font-size:12px;color:var(--t1);border-bottom:1px solid var(--border);white-space:nowrap}
.data-table tbody tr{transition:background .15s}
.data-table tbody tr:hover{background:var(--card2)}
.data-table tbody tr.selected{background:rgba(34,139,230,.08);box-shadow:inset 3px 0 0 var(--accent)}
.data-table tbody tr.peek-active{background:rgba(34,139,230,.1) !important;box-shadow:inset 4px 0 0 var(--accent)}
.data-table tbody tr.kb-focused{outline:2px solid var(--accent);outline-offset:-2px;box-shadow:0 0 0 3px rgba(34,139,230,.15)}

.data-table .checkbox-col{width:40px;padding:8px}
.data-table input[type="checkbox"]{cursor:pointer;width:16px;height:16px;accent-color:var(--accent)}

.case-id-link{color:var(--accent);text-decoration:none;cursor:pointer;font-weight:600}
.case-id-link:hover{text-decoration:underline}

.dt-status-cell{display:inline-flex;align-items:center;gap:6px}
.dt-avatar-cell{display:inline-flex;align-items:center;gap:6px}
.dt-cell-editable{cursor:pointer;position:relative}
.dt-cell-editable:hover{background:rgba(34,139,230,.06)}
.dt-cell-editable:hover::after{content:'\270E';position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--t3);opacity:.6}

/* Search result highlighting (Typesense <mark> tags) */
.data-table mark{background:var(--accent);color:#fff;padding:0 2px;border-radius:2px;font-weight:600;font-style:normal}

/* Select Form body — flex row for facet sidebar + content */
.sf-body{display:flex;flex:1;min-height:0;overflow:hidden}
.sf-content{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0;overflow:hidden}
/* Non-split wrapper — passes flex height chain to dt-container so scrollbar + footer stay in viewport */
.sf-table-wrap{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}

/* FacetPanel — inline collapsible sidebar (inside .sf-body) */
.fp-panel{width:0;min-width:0;overflow:hidden;background:var(--card);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;transition:width .25s var(--spring),min-width .25s var(--spring)}
.fp-panel.fp-open{width:260px;min-width:260px}
.fp-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.fp-title{font-size:13px;font-weight:600;color:var(--t1)}
.fp-close{width:28px;height:28px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t2);font-size:16px;border-radius:var(--r);transition:all .2s var(--spring)}
.fp-close:hover{background:var(--card2);color:var(--t1)}
.fp-content{flex:1;padding:14px 16px;overflow-y:auto}
.fp-empty{font-size:13px;color:var(--t3);text-align:center;padding:24px 0}
.fp-facet{margin-bottom:20px}
.fp-facet-title{font-size:11px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;display:flex;align-items:center;gap:4px}
.fp-pin{border:none;background:none;cursor:pointer;padding:1px;line-height:1;font-size:13px;color:var(--t3);opacity:.4;transition:all .15s}
.fp-pin:hover{opacity:.8;color:var(--accent)}
.fp-pin.fp-pinned{opacity:1;color:var(--accent)}
.fp-facet-option{display:flex;align-items:center;gap:8px;padding:4px 0;cursor:pointer;font-size:13px;color:var(--t1);transition:color .15s}
.fp-facet-option:hover{color:var(--accent)}
.fp-facet-checkbox{width:15px;height:15px;cursor:pointer;accent-color:var(--accent);flex-shrink:0}
.fp-facet-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fp-facet-count{margin-left:auto;font-size:11px;color:var(--t3);flex-shrink:0}
.fp-facet-search{width:100%;padding:5px 8px;font-size:12px;color:var(--t1);background:var(--card2);border:1px solid var(--border);border-radius:var(--r);outline:none;margin-bottom:6px;transition:border-color .15s}
.fp-facet-search:focus{border-color:var(--accent)}
.fp-facet-search::placeholder{color:var(--t3)}
.fp-facet-searching{font-size:11px;color:var(--t3);padding:2px 0 4px;font-style:italic}
.fp-show-more{display:block;width:100%;padding:4px 0;font-size:12px;color:var(--accent);background:none;border:none;cursor:pointer;text-align:left;margin-top:2px}
.fp-show-more:hover{text-decoration:underline}
.fp-footer{padding:12px 16px;border-top:1px solid var(--border)}
.fp-clear-btn{width:100%;padding:6px 12px;font-size:12px;font-weight:500;color:var(--t2);background:var(--card2);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;transition:all .15s}
.fp-clear-btn:hover{background:var(--border);color:var(--t1)}
.fp-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;font-size:13px;font-weight:500;color:var(--t2);background:var(--card2);border:1px solid var(--border);border-radius:var(--r-full);cursor:pointer;white-space:nowrap;transition:all .15s;flex-shrink:0}
.fp-toggle-btn:hover{background:color-mix(in srgb,var(--accent) 6%,transparent);color:var(--accent);border-color:var(--accent)}
.fp-toggle-btn.fp-active{background:var(--accent);color:#fff;border-color:var(--accent)}
.fp-toggle-btn.fp-active:hover{opacity:.9}

.table-footer{padding:8px 16px;background:var(--card2);border-top:1px solid var(--border);font-size:11px;color:var(--t2);display:flex;align-items:center;gap:12px;flex-shrink:0}
.table-load-more{padding:12px 0;text-align:center;font-size:var(--fs-sm);color:var(--t3)}

.dt-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;text-align:center}
.dt-empty-icon{font-size:36px;margin-bottom:12px}
.dt-empty-title{font-size:14px;font-weight:600;color:var(--t1);margin-bottom:4px}
.dt-empty-desc{font-size:12px;color:var(--t2)}

/* Density modes */
[data-density="compact"] .data-table td{padding:4px 8px;font-size:11px}
[data-density="compact"] .data-table th{padding:6px 8px;font-size:10px}
[data-density="spacious"] .data-table td{padding:10px 12px;font-size:13px}
[data-density="spacious"] .data-table th{padding:10px 12px}

/* Sticky header */
.data-table thead{position:sticky;top:0;z-index:3}

/* Column header content + resize handle layout */
.data-table th{position:relative}
.dt-th-content{display:inline;pointer-events:none}
.data-table th.sortable .dt-th-content{pointer-events:auto}

/* Column resize handle */
.dt-resize-handle{position:absolute;top:0;right:0;width:4px;height:100%;cursor:col-resize;background:transparent;transition:background .15s;z-index:1}
.dt-resize-handle:hover,.data-table th.dt-resizing .dt-resize-handle{background:var(--accent)}
.dt-is-resizing{cursor:col-resize}
.dt-is-resizing .data-table{user-select:none}

/* Column drag-reorder feedback */
.data-table th[draggable="true"]{cursor:grab}
.data-table th[draggable="true"]:active{cursor:grabbing}
.data-table th.dt-drag-over{border-left:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}

/* Pinned column styling */
.data-table th.dt-pinned,.data-table td.dt-pinned{background:var(--card)}
.data-table tbody tr:hover td.dt-pinned{background:var(--card2)}
.data-table tbody tr.selected td.dt-pinned{background:rgba(34,139,230,.06)}
.data-table tbody tr.peek-active td.dt-pinned{background:rgba(34,139,230,.1)}

/* Expand column + child rows */
.dt-expand-col{width:28px;padding:4px!important;text-align:center}
.dt-expand-btn{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:none;background:transparent;color:var(--t3);font-size:8px;cursor:pointer;border-radius:var(--r-sm);transition:all .15s;padding:0;line-height:1}
.dt-expand-btn:hover{background:var(--card2);color:var(--t1)}
.data-table tbody tr.dt-row-expanded{border-bottom:none}
.data-table tbody tr.dt-row-expanded>td{border-bottom:none}
.dt-child-row{background:var(--bg)!important}
.dt-child-row:hover{background:var(--bg)!important}
.dt-child-row>td{padding:0!important;border-bottom:1px solid var(--border)}
.dt-child-container{display:flex;flex-direction:column;gap:4px;padding:6px 12px 10px 52px}
.dt-child-loading{display:flex;flex-direction:column;gap:6px;padding:8px 0}
.dt-child-empty{font-size:11px;color:var(--t3);padding:6px 0;font-style:italic}
.dt-child-card{display:flex;align-items:flex-start;gap:10px;padding:8px 12px;border-left:3px solid var(--purple);background:var(--card);border:1px solid var(--border);border-left:3px solid var(--purple);border-radius:0 var(--r-sm) var(--r-sm) 0;cursor:pointer;transition:box-shadow .15s}
.dt-child-card:hover{box-shadow:var(--shadow-lg)}
.dt-child-card-id{color:var(--purple);font-weight:700;font-size:12px;min-width:60px;flex-shrink:0}
.dt-child-card-badge{font-size:10px;color:var(--t2);background:var(--card2);padding:1px 6px;border-radius:3px;flex-shrink:0;align-self:center}
.dt-child-card-title{font-size:12px;font-weight:500;color:var(--t1);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-child-card-meta{display:flex;gap:12px;font-size:10px;color:var(--t2);flex-shrink:0}

/* Card grid child rows */
.gc-child-container{display:flex;flex-direction:column;gap:4px;padding:4px 12px 8px 48px}
.gc-child-loading{padding:6px 0}
.gc-child-empty{font-size:11px;color:var(--t3);padding:6px 0;font-style:italic}
.gc-expand-btn{display:inline-flex;align-items:center;gap:3px;border:none;background:transparent;color:var(--t3);font-size:10px;cursor:pointer;padding:2px 4px;border-radius:var(--r-sm);margin-top:2px;transition:all .15s}
.gc-expand-btn:hover{background:var(--card2);color:var(--t1)}
.gc-expand-chevron{font-size:8px}

/* ═══════════ FLOATING BULK ACTION BAR ═══════════ */
.bulk-bar{position:fixed;bottom:-60px;left:50%;transform:translateX(-50%);background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:0 -4px 24px rgba(0,0,0,0.12),0 8px 32px rgba(0,0,0,0.16);padding:8px 16px;display:flex;align-items:center;gap:8px;z-index:1100;transition:bottom 0.3s var(--spring);backdrop-filter:blur(12px)}
[data-theme="dark"] .bulk-bar{box-shadow:0 -4px 24px rgba(0,0,0,0.3),0 8px 32px rgba(0,0,0,0.4);background:var(--card2)}
.bulk-bar.visible{bottom:24px}
.bulk-bar-count{font-size:12px;font-weight:700;color:var(--accent);padding:4px 10px;background:rgba(34,139,230,0.1);border-radius:var(--r-full);white-space:nowrap}
[data-theme="dark"] .bulk-bar-count{background:rgba(34,139,230,0.2)}
.bulk-bar-sep{width:1px;height:20px;background:var(--border)}
.bulk-bar-btn{padding:5px 12px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--card);font-size:11px;font-weight:500;color:var(--t1);cursor:pointer;transition:all 0.15s;font-family:inherit;white-space:nowrap}
.bulk-bar-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(34,139,230,0.04)}
.bulk-bar-btn.danger{color:var(--danger)}
.bulk-bar-btn.danger:hover{border-color:var(--danger);background:rgba(250,82,82,0.04)}
.bulk-bar-dismiss{width:24px;height:24px;border-radius:50%;border:none;background:none;color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all 0.15s}
.bulk-bar-dismiss:hover{background:var(--card2);color:var(--t1)}
.bulk-bar.visible~.toast{bottom:72px}

/* ── Toolbar pill base classes (shared by all toolbar buttons) ── */
.tb-pill{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r-full);background:var(--card2);color:var(--t2);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s;font-family:inherit;white-space:nowrap;flex-shrink:0;box-sizing:border-box}
.tb-pill:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.tb-pill.active{border-color:var(--accent);color:var(--accent)}
.tb-pill-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid var(--border);border-radius:var(--r-full);background:var(--card2);color:var(--t2);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;font-family:inherit;flex-shrink:0;box-sizing:border-box}
.tb-pill-icon:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.tb-pill-icon.active{border-color:var(--accent);color:var(--accent)}

/* ═══════════ SELECT FORM SUB-BAR ═══════════ */

.sub-bar{display:flex;align-items:flex-start;padding:6px 12px;background:var(--bg);border-bottom:1px solid var(--border);min-height:40px;gap:6px;flex-wrap:wrap}
.sub-bar-left{display:flex;align-items:center;gap:2px;overflow-x:auto;flex-shrink:0;min-width:0}
.sub-bar-sep{width:1px;height:18px;background:var(--border);margin:0 6px;flex-shrink:0}
.sub-bar-chips{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;overflow:visible}
.fc-row{display:flex;align-items:center;gap:6px;min-width:0;flex-wrap:nowrap;overflow:hidden}
.fc-row.fc-active-row{flex-wrap:wrap;overflow:visible}
.fc-chips-wrap{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;min-width:0;position:relative;overflow:hidden}
.fc-chips-wrap.fc-active-tier{flex-wrap:wrap;overflow:visible}
.fc-quick-tier{flex:0 1 auto;min-width:0;overflow:hidden}
.fc-overflow-wrap{position:relative;flex-shrink:0}
.fc-overflow{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--card2);font-size:12px;font-weight:500;color:var(--t2);cursor:pointer;white-space:nowrap;font-family:inherit;flex-shrink:0;transition:all .15s}
.fc-overflow:hover,.fc-overflow.active{border-color:var(--accent);color:var(--accent);background:rgba(34,139,230,.06)}
.fc-overflow-dropdown{position:fixed;min-width:180px;max-width:280px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:0 4px 16px rgba(0,0,0,.12);z-index:1000;display:flex;flex-direction:column;padding:4px;max-height:240px;overflow-y:auto}
.fc-overflow-item{display:flex;align-items:center;gap:6px;padding:6px 10px;font-size:12px;color:var(--t1);background:none;border:none;border-radius:var(--r);cursor:pointer;white-space:nowrap;text-align:left;font-family:inherit;transition:background .15s}
.fc-overflow-item:hover{background:var(--card2)}
.fc-overflow-item.active{color:var(--accent);font-weight:600}
.fc-overflow-item-x{margin-left:auto;padding:0 2px;color:var(--t3);font-size:14px;cursor:pointer;transition:color .15s}
.fc-overflow-item-x:hover{color:var(--danger)}
.fc-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;padding-left:10px;white-space:nowrap;position:sticky;right:0;z-index:1;background:var(--bg);margin-left:auto}
.sub-bar-right{display:flex;align-items:center;gap:4px;flex-shrink:0;margin-left:auto;padding-left:12px;align-self:flex-start}
.sfb-action-btn{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:1px solid var(--border);border-radius:var(--r-full);background:var(--card2);color:var(--t2);font-size:13px;cursor:pointer;white-space:nowrap;transition:all .15s;flex-shrink:0}
.sfb-action-btn:hover{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.sfb-action-icon{display:flex;align-items:center;justify-content:center;line-height:1}

.view-tab{padding:8px;border:none;background:transparent;cursor:pointer;font-size:11px;font-weight:500;color:var(--t3);white-space:nowrap;position:relative;transition:all .2s var(--spring);letter-spacing:.01em;font-family:inherit}
.view-tab:hover{color:var(--t1)}
.view-tab.active{color:var(--accent);font-weight:600}
.view-tab.active::after{content:'';position:absolute;bottom:0;left:4px;right:4px;height:2px;background:var(--accent);border-radius:1px}

/* ── Cycle toggles (single-button click-through with tooltip) ── */
.cycle-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--border);border-radius:var(--r-full);background:var(--card2);cursor:pointer;font-size:13px;font-weight:500;color:var(--t2);transition:all .15s;font-family:inherit;flex-shrink:0;padding:0}
.cycle-toggle:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 4%,transparent)}
.cycle-toggle:active{transform:scale(.92);transition:transform .08s}
.cycle-icon{display:flex;align-items:center;justify-content:center;line-height:1}

/* Live mode coloring */
.ct-live-auto{color:var(--success,#22c55e);border-color:color-mix(in srgb,var(--success,#22c55e) 40%,var(--border))}
.ct-live-auto:hover{color:var(--success,#22c55e);border-color:var(--success,#22c55e);background:color-mix(in srgb,var(--success,#22c55e) 6%,transparent)}
.ct-live-notify{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.ct-live-pause{color:var(--t3)}

/* TZ pill + selector menu — dropdown pattern (triad P4, mirrors .view-selector) */
.tz-selector{position:relative;flex-shrink:0}
.tz-pill{display:inline-flex;align-items:center;gap:6px;width:auto;padding:0 10px;height:28px;box-sizing:border-box;background:var(--card);border:1px solid var(--border);border-radius:var(--r-full);color:var(--t1);font-size:var(--fs-sm);cursor:pointer;font-family:inherit;transition:all .15s}
.tz-pill-clock{font-size:13px;color:var(--t2);display:inline-flex;align-items:center}
.tz-pill-label{font-weight:600;letter-spacing:.02em;white-space:nowrap}
.tz-pill:hover{background:color-mix(in srgb,var(--accent) 8%,var(--card));border-color:var(--accent);color:var(--accent)}
.tz-pill:hover .tz-pill-clock{color:var(--accent)}
.tz-pill[aria-expanded="true"]{background:color-mix(in srgb,var(--accent) 10%,var(--card));border-color:var(--accent);color:var(--accent)}
.tz-pill[aria-expanded="true"] .tz-pill-clock{color:var(--accent)}
/* Mode-specific accents — subtle coloring hints on the left edge via border-left */
.ct-tz-site{border-left:3px solid color-mix(in srgb,var(--accent) 70%,transparent)}
.ct-tz-user{border-left:3px solid color-mix(in srgb,var(--purple,#845ef7) 70%,transparent)}
.ct-tz-db  {border-left:3px solid color-mix(in srgb,var(--amber,#fd7e14) 70%,transparent)}
.ct-tz-utc {border-left:3px solid color-mix(in srgb,var(--teal,#20c997) 70%,transparent)}
/* Menu — opened by clicking the pill */
.tz-selector-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:200;min-width:240px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);padding:4px 0}
.tz-selector-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 12px;border:none;background:none;cursor:pointer;font-size:12px;color:var(--t2);font-family:inherit;text-align:left;transition:background .1s}
.tz-selector-item:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.tz-selector-item.active{color:var(--accent);font-weight:600;background:color-mix(in srgb,var(--accent) 6%,transparent)}
.tz-selector-item-icon{width:16px;text-align:center;font-size:13px;flex-shrink:0}
.tz-selector-item-label{font-weight:inherit;white-space:nowrap}
.tz-selector-item-desc{margin-left:auto;font-size:10px;color:var(--t3);white-space:nowrap}

/* Tooltip — appears on hover below the button */
.cycle-tooltip{display:none;position:absolute;top:calc(100% + 8px);right:-4px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);padding:8px 0;min-width:210px;z-index:100;text-align:left;pointer-events:none}
.cycle-toggle:hover .cycle-tooltip{display:block}
.cycle-tooltip::before{content:'';position:absolute;top:-5px;right:12px;width:8px;height:8px;background:var(--card);border-left:1px solid var(--border);border-top:1px solid var(--border);transform:rotate(45deg)}
.cycle-tooltip-title{padding:2px 12px 6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);border-bottom:1px solid var(--border);margin-bottom:4px}
.cycle-tooltip-row{display:flex;align-items:center;gap:8px;padding:4px 12px;font-size:12px;color:var(--t2);border-radius:0}
.cycle-tooltip-row.active{color:var(--accent);font-weight:600;background:color-mix(in srgb,var(--accent) 6%,transparent)}
.cycle-tooltip-icon{width:16px;text-align:center;font-size:12px;flex-shrink:0}
.cycle-tooltip-label{font-weight:inherit;white-space:nowrap}
.cycle-tooltip-desc{margin-left:auto;font-size:10px;color:var(--t3);white-space:nowrap}
.cycle-tooltip-hint{padding:5px 12px 2px;font-size:9px;color:var(--t3);border-top:1px solid var(--border);margin-top:4px;text-align:center;letter-spacing:.3px}
/* View selector dropdown (replaces layer CycleToggle) */
.view-selector{position:relative;flex-shrink:0}
.view-selector-btn{display:inline-flex;align-items:center;gap:3px;padding:0 8px;height:28px;box-sizing:border-box;border:1px solid var(--border);border-radius:var(--r-full);background:var(--card2);cursor:pointer;font-size:12px;font-weight:500;color:var(--t2);font-family:inherit;transition:all .15s}
.view-selector-btn:hover{border-color:var(--accent);color:var(--accent)}
.view-selector-icon{font-size:13px}
.view-selector-label{white-space:nowrap}
.view-selector-caret{font-size:9px;color:var(--t3)}
.view-selector-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:200;min-width:200px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);padding:4px 0}
.view-selector-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 12px;border:none;background:none;cursor:pointer;font-size:12px;color:var(--t2);font-family:inherit;text-align:left;transition:background .1s}
.view-selector-item:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.view-selector-item.active{color:var(--accent);font-weight:600;background:color-mix(in srgb,var(--accent) 6%,transparent)}
.view-selector-item.disabled{opacity:.4;cursor:not-allowed}
.view-selector-item.disabled:hover{background:none}
.view-selector-item-icon{width:16px;text-align:center;font-size:13px;flex-shrink:0}
.view-selector-item-label{font-weight:inherit;white-space:nowrap}
.view-selector-item-desc{margin-left:auto;font-size:10px;color:var(--t3);white-space:nowrap}
/* ── Scope selector (open/all/closed) ── */
.scope-selector{position:relative;flex-shrink:0}
.scope-selector-btn{/* inherits tb-pill-icon */}
.scope-selector-btn.active{border-color:var(--accent);color:var(--accent)}
.scope-selector-menu{position:absolute;top:calc(100% + 4px);right:0;z-index:200;min-width:200px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);padding:4px 0;animation:popIn .15s var(--spring)}
.scope-selector-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 12px;border:none;background:none;cursor:pointer;font-size:12px;color:var(--t2);font-family:inherit;text-align:left;transition:background .1s}
.scope-selector-item:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.scope-selector-item.active{color:var(--accent);font-weight:600;background:color-mix(in srgb,var(--accent) 6%,transparent)}
.scope-selector-item-icon{width:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.scope-selector-item-label{font-weight:inherit;white-space:nowrap}
.scope-selector-item-desc{margin-left:auto;font-size:10px;color:var(--t3);white-space:nowrap}

/* Pending updates pill */
.sub-bar-pending{padding:3px 10px;border:none;border-radius:var(--r-full);background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-size:11px;font-weight:500;cursor:pointer;transition:all .2s var(--spring);font-family:inherit;white-space:nowrap;flex-shrink:0;animation:pending-pulse 2s ease-in-out infinite}
.sub-bar-pending:hover{background:color-mix(in srgb,var(--accent) 20%,transparent)}
@keyframes pending-pulse{0%,100%{opacity:1}50%{opacity:.7}}

/* ═══════════ COLUMN CHOOSER ═══════════ */
.cc-btn{display:inline-flex;align-items:center;gap:4px;padding:0 10px;height:28px;box-sizing:border-box;border:1px solid var(--border);border-radius:var(--r-full);background:var(--card2);cursor:pointer;font-size:12px;font-weight:500;color:var(--t2);transition:all .15s;font-family:inherit;white-space:nowrap;flex-shrink:0}
.cc-btn:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 4%,transparent)}
.cc-btn.open{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.cc-btn-icon{font-size:15px;line-height:1}
.cc-btn-count{font-size:11px;color:var(--t3);font-weight:600}
.cc-btn.open .cc-btn-count{color:var(--accent)}

/* Panel (portaled) */
.cc-panel{position:fixed;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-lg),0 12px 40px rgba(0,0,0,.12);width:320px;max-height:420px;display:flex;flex-direction:column;z-index:200;overflow:hidden;animation:popIn .15s var(--spring)}
.cc-search-wrap{padding:8px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--card);z-index:1}
.cc-search{width:100%;padding:6px 10px;border:1px solid var(--border);border-radius:var(--r-full);background:var(--card2);font-size:13px;font-family:inherit;outline:none;color:var(--t1);box-sizing:border-box}
.cc-search:focus{border-color:var(--accent)}
.cc-search::placeholder{color:var(--t3)}

/* Scrollable list */
.cc-list{flex:1;overflow-y:auto;padding:4px 0}
.cc-item{display:flex;align-items:center;gap:6px;padding:4px 8px;cursor:default;transition:background .1s;border-left:2px solid transparent}
.cc-item:hover{background:var(--card2)}
.cc-item.drag-over{border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 4%,transparent)}
.cc-item.hidden .cc-item-label{color:var(--t3)}
.cc-item.protected .cc-item-label{font-weight:600}

/* Drag handle */
.cc-drag-handle{cursor:grab;color:var(--t3);font-size:11px;width:14px;text-align:center;flex-shrink:0;user-select:none;opacity:.4;transition:opacity .15s}
.cc-item:hover .cc-drag-handle{opacity:1}
.cc-drag-handle:active{cursor:grabbing}
.cc-item.protected .cc-drag-handle{visibility:hidden}

/* Toggle switch */
.cc-toggle{width:28px;height:16px;border-radius:8px;border:none;background:var(--border);cursor:pointer;position:relative;flex-shrink:0;transition:background .15s;padding:0}
.cc-toggle::after{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.cc-toggle.on{background:var(--success,#22c55e)}
.cc-toggle.on::after{transform:translateX(12px)}
.cc-toggle:disabled{opacity:.5;cursor:default}

/* Column label + stats preview */
.cc-item-label{flex:1;font-size:13px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:baseline;gap:6px}
.cc-stats{font-size:10px;color:var(--t3);font-weight:400;flex-shrink:0}
.cc-auto-tag{font-size:10px;color:var(--amber);margin-left:4px;font-style:italic;flex-shrink:0}

/* Pin button */
.cc-pin{border:none;background:transparent;cursor:pointer;font-size:12px;color:var(--t3);padding:2px;opacity:.25;transition:all .15s;flex-shrink:0}
.cc-item:hover .cc-pin{opacity:.6}
.cc-pin:hover{opacity:1!important;color:var(--accent)}
.cc-pin.active{opacity:1;color:var(--accent)}
.cc-pin:disabled{cursor:default}

/* Filter badge dot */
.cc-filter-badge{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0}

/* Footer */
.cc-footer{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px;border-top:1px solid var(--border);background:var(--card2)}
.cc-footer-btn{border:none;background:transparent;cursor:pointer;font-size:12px;color:var(--accent);font-family:inherit;font-weight:500;padding:2px 4px;transition:all .15s}
.cc-footer-btn:hover{text-decoration:underline}
.cc-footer-btn.danger{color:var(--t3)}
.cc-footer-btn.danger:hover{color:var(--danger)}
.cc-presets{display:flex;align-items:center;gap:6px;padding:6px 8px;border-top:1px solid var(--border)}
.cc-presets-label{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;font-weight:600;flex-shrink:0}
.cc-preset-btn{border:1px solid var(--border);background:var(--bg);cursor:pointer;font-size:11px;color:var(--t2);font-family:inherit;padding:3px 8px;border-radius:var(--r-full);transition:all .15s;display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.cc-preset-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--card2)}
.cc-preset-icon{font-size:12px}
.cc-team-default{padding:6px 8px;border-top:1px solid var(--border)}
.cc-team-default-btn{width:100%;border:1px dashed var(--border);background:var(--bg);cursor:pointer;font-size:11px;color:var(--t3);font-family:inherit;padding:5px 8px;border-radius:var(--r-sm);transition:all .15s;text-align:center}
.cc-team-default-btn:hover{border-color:var(--accent);color:var(--accent);border-style:solid;background:var(--card2)}

/* ═══════════ SORT CONTROL ═══════════ */
.sort-control{position:relative}
.sort-control-btn{display:inline-flex;align-items:center;gap:4px;padding:0 10px;height:28px;box-sizing:border-box;border:1px solid var(--border);border-radius:var(--r-full);background:var(--card2);cursor:pointer;font-size:12px;font-weight:500;color:var(--t2);transition:all .15s;font-family:inherit;white-space:nowrap;flex-shrink:0}
.sort-control-btn:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 4%,transparent)}
.sort-control-btn.active{border-color:var(--accent);color:var(--accent)}
.sort-control-icon{font-size:14px;line-height:1}
.sort-control-label{font-size:12px}
.sort-control-badge{font-size:10px;background:var(--accent);color:#fff;border-radius:var(--r-full);padding:0 5px;line-height:16px;font-weight:700}
.sort-control-dropdown{position:absolute;top:calc(100% + 4px);right:0;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);width:220px;z-index:200;overflow:hidden;animation:popIn .15s var(--spring)}
.sort-control-header{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border)}
.sort-control-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:6px 10px;border:none;background:none;cursor:pointer;font-size:13px;color:var(--t1);font-family:inherit;text-align:left;transition:background .1s}
.sort-control-item:hover{background:var(--card2)}
.sort-control-item.active{color:var(--accent);font-weight:600}
.sort-control-item.active .sort-control-dir{font-size:11px;color:var(--accent);opacity:.7}
.sort-control-sep{border-top:1px solid var(--border);margin:2px 0}
.sort-control-clear{color:var(--t3);font-size:12px}
.sort-control-clear:hover{color:var(--danger)}
.dropdown-header-clear{display:flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;border:none;background:none;color:var(--t3);cursor:pointer;border-radius:50%;transition:all .15s}
.dropdown-header-clear:hover{color:var(--danger);background:rgba(250,82,82,.1)}
.dropdown-header-clear svg{width:10px;height:10px}

/* ═══════════ FILTER PICKER PILL ═══════════ */
/* Single-select category filter as a pill+dropdown. Visual twin of .sort-control-btn —
   28px, .tb-pill family, rounded full. Used by FilterPickerPill (PhotoGalleryWidget toolbar). */
.filter-pill-btn{display:inline-flex;align-items:center;gap:5px;padding:0 10px;height:28px;box-sizing:border-box;border:1px solid var(--border);border-radius:var(--r-full);background:var(--card2);cursor:pointer;font-size:12px;font-weight:500;color:var(--t2);transition:all .15s;font-family:inherit;white-space:nowrap;flex-shrink:0}
.filter-pill-btn:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 4%,transparent)}
.filter-pill-btn[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.filter-pill-icon{font-size:13px;line-height:1}
.filter-pill-label{font-size:12px}
.filter-pill-chevron{font-size:9px;line-height:1;opacity:.7;margin-left:1px}

/* ═══════════ TOOLBAR SEARCH ═══════════ */
/* Compact 28px search input designed for inline use next to FilterPickerPill,
   SortControl, CycleToggle. SVG magnifier from TbIcon.search inherits currentColor.
   Owns its chrome end-to-end — no .cht-search baggage, no Windows color-emoji icon. */
.toolbar-search{position:relative;display:inline-flex;align-items:center;height:28px;box-sizing:border-box}
.toolbar-search-icon{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--t3);pointer-events:none;display:flex;align-items:center;justify-content:center;line-height:1}
.toolbar-search-icon svg{width:13px;height:13px}
.toolbar-search-input{width:100%;height:28px;box-sizing:border-box;padding:0 10px 0 28px;font-size:12px;font-family:inherit;color:var(--t1);background:var(--card2);border:1px solid var(--border);border-radius:var(--r-full);transition:border-color .15s,background .15s,color .15s;outline:none}
.toolbar-search-input::placeholder{color:var(--t3);opacity:.7}
.toolbar-search-input:focus{border-color:var(--accent);background:var(--card)}
.toolbar-search:focus-within .toolbar-search-icon{color:var(--accent)}
.toolbar-search.has-clear .toolbar-search-input{padding-right:28px}
.toolbar-search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:18px;height:18px;border:none;background:none;color:var(--t3);cursor:pointer;font-size:16px;line-height:1;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s}
.toolbar-search-clear:hover{color:var(--t1);background:var(--card2)}

/* ═══════════ GROUP CONTROL ═══════════ */
.group-control{position:relative}
.group-control-btn{display:inline-flex;align-items:center;gap:4px;padding:0 10px;height:28px;box-sizing:border-box;border:1px solid var(--border);border-radius:var(--r-full);background:var(--card2);cursor:pointer;font-size:12px;font-weight:500;color:var(--t2);transition:all .15s;font-family:inherit;white-space:nowrap;flex-shrink:0}
.group-control-btn:hover{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 4%,transparent)}
.group-control-btn.active{border-color:var(--accent);color:var(--accent)}
.group-control-icon{font-size:13px;line-height:1}
.group-control-label{font-size:12px}
.group-control-dropdown{position:absolute;top:calc(100% + 4px);right:0;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);width:220px;z-index:200;overflow:hidden;animation:popIn .15s var(--spring)}
.group-control-header{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border)}
.group-control-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:6px 10px;border:none;background:none;cursor:pointer;font-size:13px;color:var(--t1);font-family:inherit;text-align:left;transition:background .1s}
.group-control-item:hover{background:var(--card2)}
.group-control-item.active{color:var(--accent);font-weight:600}
.group-control-check{font-size:12px;color:var(--accent)}
.group-control-sep{border-top:1px solid var(--border);margin:2px 0}
.group-control-clear{color:var(--t3);font-size:12px}
.group-control-clear:hover{color:var(--danger)}

/* ═══════════ GROUP HEADERS (DataTable) ═══════════ */
.dt-group-header{cursor:pointer;user-select:none}
.dt-group-header td{padding:8px 12px;background:var(--card2);border-bottom:1px solid var(--border);font-size:13px;color:var(--t1)}
.dt-group-header:hover td{background:color-mix(in srgb,var(--accent) 6%,var(--card2))}
.dt-group-header.collapsed td{border-bottom:2px solid var(--border)}
.dt-group-chevron{display:inline-block;width:16px;font-size:10px;color:var(--t3);transition:transform .15s}
.dt-group-label{font-weight:500}
.dt-group-label strong{font-weight:700;color:var(--accent)}
.dt-group-count{margin-left:6px;font-size:12px;color:var(--t3);font-weight:500}

/* ═══════════ FILTER CHIP BAR ═══════════ */

.fc-quick{padding:4px 10px;font-size:12px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--bg);color:var(--t2);cursor:pointer;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;transition:all .15s;font-family:inherit}
.fc-quick:hover{border-color:var(--accent);color:var(--t1)}
.fc-quick.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.fc-quick-icon{font-size:11px;line-height:1}
.fc-facet-count{font-size:10px;font-weight:700;min-width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-full);background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);padding:0 4px;margin-left:2px;line-height:1}
.fc-quick.active .fc-facet-count{background:rgba(255,255,255,.2);color:#fff}
.f-enum-item .fc-facet-count{margin-left:auto;font-size:10px;font-weight:600;color:var(--t3);background:none;min-width:auto;height:auto;padding:0}
.fc-sep{width:1px;height:20px;background:var(--border);flex-shrink:0}
/* Filter chips — 3-part anatomy: FIELD op value */
@keyframes chipIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
@keyframes popIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.fc-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(34,139,230,.08);border:1px solid rgba(34,139,230,.25);padding:4px 10px 4px 8px;border-radius:var(--r-full);font-size:13px;font-weight:500;color:var(--accent);cursor:pointer;transition:all .2s var(--spring);animation:chipIn .2s var(--spring);white-space:nowrap;max-width:300px}
.fc-chip:hover{background:rgba(34,139,230,.14)}
.fc-chip-field{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--accent);opacity:.7}
.fc-chip-op{font-size:11px;color:var(--t3)}
.fc-chip-val{font-weight:600;color:var(--accent);max-width:160px;overflow:hidden;text-overflow:ellipsis}
.fc-chip-x{width:18px;height:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;font-size:13px;line-height:1;color:var(--accent);transition:all .15s;border:none;background:none;padding:0;font-family:inherit}
.fc-chip-x:hover{background:rgba(34,139,230,.2)}
.fc-chip-search .fc-chip-field{font-size:11px;opacity:1}
.fc-clear{/* inherits tb-pill-icon */}
.fc-clear:hover{color:var(--danger);border-color:rgba(250,82,82,.3);background:rgba(250,82,82,.06)}
/* AND/OR logic toggle between chips */
.fc-logic{display:inline-flex;align-items:center;padding:4px 8px;border-radius:var(--r-full);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;border:1px solid var(--border);background:var(--card2);color:var(--t2);transition:all .2s var(--spring);user-select:none;margin:0 2px;font-family:inherit}
.fc-logic:hover{border-color:var(--accent);color:var(--accent);background:rgba(34,139,230,.06)}
.fc-logic.or{color:var(--amber);border-color:rgba(253,126,20,.4);background:rgba(253,126,20,.06)}
.fc-logic.or:hover{border-color:var(--amber);background:rgba(253,126,20,.12)}
/* + Filter button */
.fc-add{/* inherits tb-pill-icon */}
.fc-add:hover,.fc-add.active{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
/* Save view */
.fc-save{/* inherits tb-pill-icon */}
.fc-save:hover{/* inherits tb-pill-icon:hover */}
.fc-save-row{display:inline-flex;align-items:center;gap:3px}
.fc-save-input{padding:2px 6px;font-size:10px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg);color:var(--t1);font-family:inherit;width:120px}
.fc-save-input:focus{outline:none;border-color:var(--accent)}
.fc-save-ok{padding:2px 6px;font-size:10px;border-radius:var(--r-sm);border:none;background:var(--accent);color:#fff;cursor:pointer;font-weight:500;font-family:inherit}
.fc-save-ok:disabled{opacity:.4;cursor:default}
.fc-save-cancel{padding:2px 4px;font-size:12px;border:none;background:none;color:var(--t3);cursor:pointer;font-family:inherit}
/* Saved view pills */
.fc-saved-view{position:relative;padding-right:16px}
.fc-saved-view-x{position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:9px;color:var(--t3);cursor:pointer;width:12px;height:12px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%}
.fc-saved-view-x:hover{color:var(--danger);background:rgba(250,82,82,.12)}
/* Inline search */
.fc-search-input{padding:0 10px;height:28px;box-sizing:border-box;font-size:12px;border:1px solid var(--border);border-radius:var(--r-full);background:var(--bg);color:var(--t1);font-family:inherit;max-width:160px;transition:border-color .15s}
.fc-search-input:focus{outline:none;border-color:var(--accent);background:var(--card)}
.fc-search-wrap{display:inline-flex;position:relative}

/* ── Slash Command Autocomplete Dropdown ── */
.fc-slash-dropdown{background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-lg),0 12px 40px rgba(0,0,0,.12);z-index:10000;max-height:320px;overflow-y:auto;animation:popIn .12s var(--spring);padding:4px 0}
.fc-slash-hint{font-size:11px;color:var(--t3);padding:4px 12px 6px;font-weight:500;letter-spacing:.2px;text-transform:uppercase;border-bottom:1px solid var(--border);margin-bottom:2px}
.fc-slash-item{display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;font-size:13px;transition:background .1s}
.fc-slash-item:hover,.fc-slash-item.active{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.fc-slash-item.active{outline:none}
.fc-slash-field{font-weight:600;color:var(--t1);flex:1}
.fc-slash-key{font-size:11px;font-family:var(--mono,monospace);color:var(--t3);background:var(--bg);padding:1px 6px;border-radius:var(--r-xs);border:1px solid var(--border)}
.fc-slash-val{color:var(--t1);flex:1}
.fc-slash-count{font-size:11px;font-weight:700;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-full);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);padding:0 5px}

/* ── NLP Suggestion Bar ── */
.fc-nlp-row{display:flex;align-items:center;gap:8px;padding:4px 12px;background:color-mix(in srgb,var(--accent) 6%,var(--card));border:1px solid color-mix(in srgb,var(--accent) 20%,var(--border));border-radius:var(--r-sm);animation:popIn .15s var(--spring)}
.fc-nlp-label{font-size:11px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
.fc-nlp-interpreted{font-size:12px;color:var(--t2);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.fc-nlp-filters{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.fc-nlp-chip{display:inline-flex;align-items:center;gap:2px;padding:2px 8px;border-radius:var(--r-full);background:var(--card);border:1px solid var(--border);font-size:12px}
.fc-nlp-chip-field{font-weight:600;color:var(--t2)}
.fc-nlp-chip-op{color:var(--t3);font-size:10px}
.fc-nlp-chip-pick{display:inline-flex;align-items:center;gap:3px;background:none;border:1px dashed var(--border);border-radius:var(--r-xs);padding:1px 8px;font-size:12px;color:var(--t3);cursor:pointer;font-family:inherit;transition:all .15s}
.fc-nlp-chip-pick:hover{border-color:var(--accent);color:var(--accent);border-style:solid}
.fc-nlp-chip-pick.chosen{border-style:solid;border-color:var(--accent);color:var(--accent);font-weight:500;background:color-mix(in srgb,var(--accent) 6%,transparent)}
.fc-nlp-caret{font-size:9px;opacity:.6}
.fc-nlp-apply{padding:3px 12px;border-radius:var(--r-full);background:var(--accent);color:#fff;border:none;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:opacity .15s}
.fc-nlp-apply:hover{opacity:.85}
.fc-nlp-apply:disabled{opacity:.4;cursor:default}
.fc-nlp-dismiss{background:none;border:none;color:var(--t3);font-size:16px;cursor:pointer;padding:0 4px;line-height:1}
.fc-nlp-dismiss:hover{color:var(--t1)}

/* ── Column Picker Popover (Step 1 of filter flow) ── */
.f-col-popover{position:fixed;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-lg),0 12px 40px rgba(0,0,0,.12);z-index:9999;width:220px;max-height:360px;overflow-y:auto;animation:popIn .15s var(--spring)}
.f-col-search{padding:8px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--card);z-index:1}
.f-col-search input{width:100%;border:1px solid var(--border);border-radius:var(--r-sm);padding:5px 8px;font-size:11px;font-family:inherit;background:var(--card2);color:var(--t1);outline:none;box-sizing:border-box}
.f-col-search input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(34,139,230,.15)}
.f-col-cat{padding:6px 10px 3px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);border-top:1px solid var(--border)}
.f-col-cat:first-child{border-top:none}
.f-col-item{padding:6px 10px;font-size:12px;cursor:pointer;color:var(--t1);display:flex;align-items:center;gap:8px;transition:background .1s;border:none;background:none;width:100%;text-align:left;font-family:inherit}
.f-col-item:hover{background:rgba(34,139,230,.06)}
.f-col-item-icon{font-size:11px;width:20px;text-align:center;color:var(--t3);flex-shrink:0}
.f-col-item-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f-col-item-type{font-size:9px;color:var(--t3);flex-shrink:0}
.f-col-item.active{color:var(--accent);font-weight:500}

/* ── Value Popover (Step 2 of filter flow) ── */
.f-val-popover{position:fixed;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-lg),0 12px 40px rgba(0,0,0,.12);z-index:10000;width:280px;animation:popIn .15s var(--spring)}
.f-val-header{padding:8px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.f-val-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--t2);display:flex;align-items:center;gap:6px}
.f-val-close{width:20px;height:20px;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:var(--t3);font-size:14px;border-radius:var(--r-sm);transition:all .1s;padding:0;font-family:inherit}
.f-val-close:hover{background:var(--card2);color:var(--t1)}
.f-val-body{padding:8px}

/* Enum multi-select widget */
.f-enum-search{width:100%;border:1px solid var(--border);border-radius:var(--r-sm);padding:5px 8px;font-size:11px;font-family:inherit;background:var(--card2);color:var(--t1);outline:none;margin-bottom:6px;box-sizing:border-box}
.f-enum-search:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(34,139,230,.15)}
.f-enum-list{max-height:200px;overflow-y:auto}
.f-enum-item{display:flex;align-items:center;gap:8px;padding:5px 4px;cursor:pointer;border-radius:var(--r-sm);transition:background .1s;font-size:12px}
.f-enum-item:hover{background:rgba(34,139,230,.06)}
.f-enum-cb{width:15px;height:15px;border:1.5px solid var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;font-size:10px;color:white}
.f-enum-cb.checked{background:var(--accent);border-color:var(--accent)}
.f-enum-label{flex:1;color:var(--t1)}
.f-enum-count{font-size:10px;color:var(--t3);min-width:20px;text-align:right}
.f-enum-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
/* Grouped-status condition header */
.f-enum-group{padding:6px 4px 2px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--t2);cursor:pointer;display:flex;align-items:center;gap:6px;border-radius:var(--r-sm);transition:background .1s}
.f-enum-group:hover{background:rgba(34,139,230,.06);color:var(--accent)}
.f-enum-group.active{color:var(--accent)}

/* Date filter widget */
.f-date-presets{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.f-date-preset{padding:4px 8px;border-radius:var(--r-full);border:1px solid var(--border);background:var(--card);font-size:10px;font-weight:500;color:var(--t2);cursor:pointer;transition:all .15s;font-family:inherit}
.f-date-preset:hover{border-color:var(--accent);color:var(--accent)}
.f-date-preset.active{background:var(--accent);color:white;border-color:var(--accent)}
.f-date-divider{font-size:9px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;padding:6px 0 4px;font-weight:600;text-align:center}
.f-date-range{display:flex;gap:6px;align-items:center}
.f-date-input{flex:1;border:1px solid var(--border);border-radius:var(--r-sm);padding:5px 8px;font-size:11px;font-family:inherit;background:var(--card2);color:var(--t1);outline:none}
.f-date-input:focus{border-color:var(--accent)}
.f-date-sep{font-size:11px;color:var(--t3)}

/* Text filter widget */
.f-text-row{display:flex;align-items:center;gap:6px}
.f-text-op{border:1px solid var(--border);border-radius:var(--r-sm);padding:4px 6px;font-size:10px;font-family:inherit;background:var(--card2);color:var(--t1);outline:none;cursor:pointer}
.f-text-op:focus{border-color:var(--accent)}
.f-text-input{flex:1;border:1px solid var(--border);border-radius:var(--r-sm);padding:5px 8px;font-size:12px;font-family:inherit;background:var(--card2);color:var(--t1);outline:none}
.f-text-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(34,139,230,.15)}

/* Number range widget */
.f-num-row{display:flex;align-items:center;gap:6px}
.f-num-op{border:1px solid var(--border);border-radius:var(--r-sm);padding:4px 8px;font-size:11px;font-family:inherit;background:var(--card2);color:var(--t1);outline:none;cursor:pointer;min-width:50px}
.f-num-op:focus{border-color:var(--accent)}
.f-num-input{flex:1;border:1px solid var(--border);border-radius:var(--r-sm);padding:5px 8px;font-size:12px;font-family:inherit;background:var(--card2);color:var(--t1);outline:none;width:60px}
.f-num-input:focus{border-color:var(--accent)}

/* Shared apply button */
.f-apply-btn{width:100%;margin-top:8px;padding:6px;border:none;border-radius:var(--r-sm);background:var(--accent);color:white;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}
.f-apply-btn:hover{opacity:.9}
.f-apply-btn:disabled{opacity:.4;cursor:default}

/* Row flash animation (SSE auto-mode update) */
.dt-row-flash{animation:row-flash 1.5s ease-out}
@keyframes row-flash{0%{background:color-mix(in srgb,var(--accent) 18%,transparent)}100%{background:transparent}}

/* Notify toast (brief flash for new SSE updates) */
.sub-bar-toast{padding:2px 8px;font-size:9px;color:var(--accent);animation:toast-fade 3s ease-out forwards;white-space:nowrap;pointer-events:none}
@keyframes toast-fade{0%{opacity:1}70%{opacity:1}100%{opacity:0}}

/* KPI Bar — standalone full-width strip between toolbar and grid */
.kpi-bar{display:flex;align-items:center;gap:6px;padding:3px 12px;background:var(--bg);border-bottom:1px solid var(--border);flex-wrap:nowrap;position:relative}
.kpi-bar-inner{display:flex;align-items:center;gap:6px;flex:1;min-width:0;overflow:hidden;flex-wrap:nowrap}
.kpi-bar.kpi-expanded .kpi-bar-inner{flex-wrap:wrap;overflow:visible}
.kpi-bar-more{flex-shrink:0;border:1px solid var(--border);background:var(--card);color:var(--t2);cursor:pointer;font-size:11px;font-weight:600;padding:2px 10px;border-radius:var(--r-full);white-space:nowrap;transition:all .15s}
.kpi-bar-more:hover{border-color:var(--accent);color:var(--accent)}
.fc-kpi-group{display:inline-flex;align-items:center;gap:3px;padding:2px 4px 2px 0;border-right:1px solid var(--border);margin-right:2px;flex-shrink:0;transition:opacity .15s}
.fc-kpi-group[draggable]{cursor:grab}
.fc-kpi-group[draggable]:active{cursor:grabbing;opacity:.6}
.kpi-drag-handle{color:var(--t3);font-size:11px;cursor:grab;opacity:.3;transition:opacity .15s;user-select:none;line-height:1}
.kpi-drag-handle:hover{opacity:.7}
.fc-kpi-group:last-child{border-right:none;margin-right:0}
.fc-kpi-group-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--t3);padding-right:4px;white-space:nowrap}
.fc-kpi-pill{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:var(--r-full);background:var(--card);border:1px solid var(--border);font-size:12px;cursor:pointer;transition:all .15s var(--spring);white-space:nowrap}
.fc-kpi-pill:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.fc-kpi-pill.active{background:var(--accent);border-color:var(--accent);color:#fff}
.fc-kpi-pill.active .fc-kpi-count{background:rgba(255,255,255,.2);color:#fff}
.fc-kpi-val{font-weight:500;color:var(--t2)}
.fc-kpi-count{font-weight:700;font-size:10px;min-width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-full);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);padding:0 4px}

/* Context Menu — right-click on grid rows */
.dt-ctx-menu{position:fixed;z-index:1400;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);padding:4px 0;min-width:180px;animation:popIn .15s var(--spring)}
.dt-ctx-item{display:flex;align-items:center;gap:8px;padding:7px 14px;font-size:13px;color:var(--t1);cursor:pointer;border:none;background:none;width:100%;text-align:left;font-family:inherit}
.dt-ctx-item:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.dt-ctx-sep{height:1px;background:var(--border);margin:4px 0}

/* Split-View — table + detail side-by-side */
.sf-split-wrap{display:flex;flex-direction:row;flex:1;min-height:0;overflow:hidden}
.sf-split-list{flex:1;min-width:0;overflow:hidden;display:flex;flex-direction:column}
.sf-split-list .dt-container{border-radius:0;border:none;box-shadow:none}
.sf-split-detail{width:480px;flex-shrink:0;overflow:hidden;background:var(--card);display:flex;flex-direction:column;border-left:1px solid var(--border)}
.sf-split-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:var(--t3);font-size:13px}
.sf-split-empty-icon{font-size:36px;opacity:.3}

/* Split-View inline peek panel (replaces SidePanel portal) */
.sf-peek-inline{display:flex;flex-direction:column;height:100%;min-height:0}
.sf-peek-inline-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0;background:var(--card2)}
.sf-peek-inline-title{font-size:14px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sf-peek-inline-subtitle{font-size:12px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.sf-peek-inline-body{flex:1;overflow-y:auto;min-height:0}
.sf-peek-inline-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:8px 16px;border-top:1px solid var(--border);flex-shrink:0;background:var(--card2)}

/* ═══════════ LIST CARDS (Select Form List Layer) ═══════════ */
.gc-list{display:flex;flex-direction:column;padding:4px 12px;flex:1;min-height:0;overflow-y:auto}
.gc-row{display:flex;align-items:center;background:var(--card);border:1px solid var(--border);border-left:4px solid var(--border);border-radius:var(--r-sm);margin-bottom:4px;cursor:pointer;transition:all .2s var(--spring);min-height:72px}
.gc-row:hover{box-shadow:var(--shadow-lg);border-left-color:var(--accent);transform:translateX(2px)}
.gc-row.peek-active{border-left-color:var(--accent);box-shadow:inset 4px 0 0 var(--accent),var(--shadow-lg);background:color-mix(in srgb,var(--accent) 6%,var(--card))}
.gc-row.selected{background:color-mix(in srgb,var(--accent) 4%,var(--card))}
.gc-row.status-open{border-left-color:var(--green)}
.gc-row.status-created,.gc-row.status-new{border-left-color:var(--blue)}
.gc-row.status-opendispatch,.gc-row.status-dispatched{border-left-color:var(--amber)}
.gc-row.status-resolved{border-left-color:var(--purple)}
.gc-row.status-closed{border-left-color:var(--slate)}
/* Density */
.gc-row.density-compact{min-height:52px}
.gc-row.density-spacious{min-height:88px}
/* Checkbox zone */
.gc-checkbox{padding:0 12px;display:flex;align-items:center}
.gc-checkbox input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
/* ID zone — left pillar */
.gc-id-zone{min-width:90px;padding:10px 12px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:3px;justify-content:center;flex-shrink:0}
.gc-id{font-weight:600;font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums;text-decoration:none}
a.gc-id:hover{text-decoration:underline}
a.case-id-link{color:var(--accent);text-decoration:none}
a.case-id-link:hover{text-decoration:underline}
.gc-id-status{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--t3)}
/* Content zone — 2-row spread */
.gc-content{flex:1;padding:10px 16px;display:flex;flex-direction:column;gap:3px;justify-content:center;min-width:0;overflow:hidden}
.gc-line1{display:flex;align-items:center;justify-content:space-between;gap:12px}
.gc-line2{display:flex;align-items:center;justify-content:space-between;gap:12px}
.gc-title{font-size:13px;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.gc-meta{display:flex;align-items:center;gap:2px;font-size:12px;color:var(--t2);flex-wrap:wrap;min-width:0}
.gc-meta-item{display:inline-flex;align-items:center;gap:2px;white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis}
.gc-sep{color:var(--t4);margin:0 3px}
.gc-owner{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--t2);flex-shrink:0;white-space:nowrap}
.gc-time{font-size:11px;color:var(--t3);flex-shrink:0;white-space:nowrap}
/* Arrow zone → Open button on hover */
.gc-arrow-zone{padding:0 12px;display:flex;align-items:center;flex-shrink:0}
.gc-arrow{font-size:18px;color:var(--t4);transition:all .15s}
.gc-arrow-label{display:none;font-size:11px;font-weight:600;color:var(--accent);white-space:nowrap}
.gc-row:hover .gc-arrow{display:none}
.gc-row:hover .gc-arrow-label{display:inline}
/* Keyboard focus */
.gc-row.kb-focused{outline:2px solid var(--accent);outline-offset:-2px;background:color-mix(in srgb,var(--accent) 4%,var(--card))}
/* Compact overrides */
.gc-row.density-compact .gc-id-zone{padding:6px 10px;min-width:80px}
.gc-row.density-compact .gc-content{padding:6px 12px}
.gc-row.density-compact .gc-title{font-size:12px}
.gc-row.density-compact .gc-meta{font-size:11px}
.gc-row.density-compact .gc-arrow-zone{padding:0 8px}
/* Spacious overrides */
.gc-row.density-spacious .gc-id-zone{padding:14px 14px}
.gc-row.density-spacious .gc-content{padding:14px 20px;gap:5px}
.gc-row.density-spacious .gc-arrow-zone{padding:0 16px}
/* Skeleton */
.gc-skeleton{opacity:.5;pointer-events:none}
/* Row flash reuse */
.gc-row.dt-row-flash{animation:row-flash 1.5s ease-out}

/* ═══════════ KANBAN BOARD (Select Form Kanban Layer) ═══════════ */
.kb-container{padding:12px 16px;background:var(--bg);overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1;min-height:0}
.kb-header{margin-bottom:12px;display:flex;align-items:center;gap:10px;padding:0 0 10px 0;border-bottom:1px solid var(--border)}
.kb-label{font-size:12px;font-weight:600;color:var(--t2);text-transform:uppercase}
.kb-select{padding:6px 12px;border:1px solid var(--border);background:var(--card);border-radius:var(--r-sm);cursor:pointer;font-size:13px;color:var(--t1)}
.kb-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;min-width:min-content}
/* Column */
.kb-column{background:var(--card2);border-radius:var(--r);padding:16px;min-height:300px;display:flex;flex-direction:column}
.kb-column.drag-over{background:rgba(34,139,230,0.06);outline:2px dashed var(--accent);outline-offset:-4px;transition:all 0.2s}
.kb-column-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.kb-column-title{font-size:14px;font-weight:600;color:var(--t1);display:flex;align-items:center;gap:8px}
.kb-column-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.kb-column-count{background:var(--border);color:var(--t2);padding:2px 8px;border-radius:var(--r-full);font-size:12px;font-weight:600}
/* Cards container */
.kb-cards{display:flex;flex-direction:column;gap:8px;flex:1}
/* Card */
.kb-card{background:var(--card);border:1px solid var(--border);padding:12px;border-radius:var(--r-sm);cursor:pointer;transition:all 0.2s var(--spring)}
.kb-card:hover{transform:scale(1.01);box-shadow:var(--shadow-lg);border-color:var(--accent)}
.kb-card.peek-active{border-color:var(--accent);box-shadow:inset 4px 0 0 var(--accent),0 0 0 1px rgba(34,139,230,0.3),var(--shadow-lg);background:rgba(34,139,230,0.08)}
.kb-card.dragging{opacity:0.4;transform:rotate(2deg);box-shadow:var(--shadow-lg);transition:none}
/* Card layout */
.kb-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;gap:8px}
.kb-card-id{font-weight:600;font-size:13px;color:var(--accent);cursor:pointer}
.kb-card-id:hover{text-decoration:underline}
.kb-card-title{font-size:13px;font-weight:500;color:var(--t1);margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kb-card-meta{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:12px;color:var(--t2)}
.kb-card-footer{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;color:var(--t2)}
.kb-card-footer .avatar{width:20px;height:20px;font-size:9px}
.kb-card-owner{display:flex;align-items:center;gap:4px}
.kb-card-wo{background:var(--card2);padding:2px 6px;border-radius:var(--r-sm);font-size:11px;font-weight:600}
.kb-card-child{background:var(--card2);border:1px solid var(--border);padding:8px;border-radius:var(--r-sm);font-size:11px;color:var(--t2);margin-top:8px;padding-left:12px;border-left:2px solid var(--purple)}
/* Priority badges */
.kb-priority{display:inline-block;padding:2px 8px;border-radius:var(--r-sm);font-size:11px;font-weight:600;text-transform:uppercase}
.kb-priority-p1{background:rgba(250,82,82,0.1);color:var(--red)}
.kb-priority-p2{background:rgba(253,126,20,0.1);color:var(--amber)}
.kb-priority-p3{background:rgba(34,139,230,0.1);color:var(--blue)}
.kb-priority-sla{background:rgba(100,116,139,0.1);color:var(--t2)}
/* Drop indicator */
.kb-drop-indicator{height:3px;background:var(--accent);border-radius:3px;margin:4px 0;animation:fadeIn 0.15s ease;box-shadow:0 0 6px rgba(34,139,230,0.4)}
/* Empty column */
.kb-no-items{color:var(--t3);text-align:center;padding:40px 20px;font-size:14px}
/* Density variants */
[data-density="compact"] .kb-card{padding:8px}
[data-density="compact"] .kb-card-title{font-size:12px}
[data-density="spacious"] .kb-card{padding:16px}
/* Skeleton */
.kb-skeleton-card{height:120px;margin-bottom:8px}
/* Move-to menu (a11y alternative to drag) */
.kb-move-menu{position:fixed;z-index:9999;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-lg);padding:4px 0;min-width:160px}
.kb-move-item{padding:6px 12px;font-size:13px;color:var(--t1);cursor:pointer;display:flex;align-items:center;gap:8px;transition:background 0.1s}
.kb-move-item:hover{background:var(--card2)}
.kb-move-item .kb-column-dot{width:6px;height:6px}
/* WIP limits */
.kb-column.wip-exceeded{background:rgba(250,82,82,0.04);border:1px dashed var(--red)}
.kb-column.wip-exceeded .kb-column-header{border-bottom-color:var(--red)}
.kb-column-count.wip-over{background:rgba(250,82,82,0.15);color:var(--red)}
/* Card aging (left accent border — visual signal for time in column) */
.kb-card.kb-age-fresh{border-left:4px solid var(--green)}
.kb-card.kb-age-warm{border-left:4px solid var(--amber)}
.kb-card.kb-age-stale{border-left:4px solid var(--red)}
.kb-card.kb-age-old{border-left:4px solid var(--purple)}
/* Condition badge (Open/Closed indicator on column header) */
.kb-condition-badge{font-size:10px;font-weight:600;padding:1px 6px;border-radius:var(--r-full);text-transform:uppercase;letter-spacing:0.03em}
.kb-condition-badge.kb-condition-open{background:rgba(34,197,94,0.12);color:var(--green)}
.kb-condition-badge.kb-condition-closed{background:rgba(148,163,184,0.15);color:var(--t3)}
/* Column search (visible when cards exceed maxCardsPerColumn) */
.kb-col-search{position:relative;margin-bottom:8px}
.kb-col-search-input{width:100%;padding:6px 28px 6px 10px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--card);color:var(--t1);font-size:12px;outline:none;transition:border-color 0.15s}
.kb-col-search-input:focus{border-color:var(--accent)}
.kb-col-search-input::placeholder{color:var(--t3)}
.kb-col-search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--t3);cursor:pointer;font-size:14px;line-height:1;padding:2px}
.kb-col-search-clear:hover{color:var(--t1)}
/* Show more / show less toggle */
.kb-show-more{width:100%;padding:8px;background:none;border:1px dashed var(--border);border-radius:var(--r-sm);color:var(--accent);font-size:12px;font-weight:500;cursor:pointer;transition:all 0.15s;text-align:center}
.kb-show-more:hover{background:rgba(34,139,230,0.06);border-color:var(--accent)}
/* Load more pagination bar */
.kb-load-more-bar{grid-column:1/-1;text-align:center;padding:12px 0}
.kb-load-more{padding:8px 24px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--accent);font-size:13px;font-weight:500;cursor:pointer;transition:all 0.15s}
.kb-load-more:hover:not(:disabled){background:rgba(34,139,230,0.08);border-color:var(--accent)}
.kb-load-more:disabled{opacity:0.5;cursor:default}
/* Keyboard focus (container accepts focus for arrow keys) */
.kb-container:focus{outline:none}
.kb-card.kb-focused{outline:2px solid var(--accent);outline-offset:-2px;box-shadow:0 0 0 3px rgba(34,139,230,0.2)}

/* ═══════════ CREATE CASE (Class 4 Object Creation) ═══════════ */
.create-case-page{display:flex;flex-direction:column;height:100vh;background:var(--bg);color:var(--t1)}
/* create-case compact header — inline title + small action buttons */
.cc-form-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.cc-form-title{font-size:15px;font-weight:600;color:var(--t1)}
.cc-form-actions{display:flex;gap:6px}
.cc-action-btn{padding:4px 10px;font-size:12px;font-weight:500;border-radius:var(--r-sm,6px);border:1px solid var(--border);background:var(--card);color:var(--t2);cursor:pointer;font-family:inherit;transition:all .12s}
.cc-action-btn:hover{border-color:var(--accent);color:var(--t1)}
.cc-action-btn:disabled{opacity:.5;cursor:not-allowed}
.cc-action-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.cc-action-primary:hover:not(:disabled){filter:brightness(1.1)}
.create-case-error-banner{padding:10px 24px;background:var(--red-bg,rgba(250,82,82,0.1));color:var(--red,#fa5252);font-size:13px;border-bottom:1px solid var(--red,#fa5252)}
.create-case-workspace{display:flex;flex:1;overflow:hidden}
.create-case-form{flex:1;max-width:560px;padding:24px;overflow-y:auto}
.create-case-context{flex:1;border-left:1px solid var(--border);overflow-y:auto;background:var(--bg-raised,var(--card))}
.create-case-field{margin-bottom:16px}
.create-case-row{display:flex;gap:16px;margin-bottom:16px}
.create-case-field-half{flex:1}
.create-case-label{display:block;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:var(--t2);margin-bottom:4px}
.create-case-required::after{content:" *";color:var(--red,#fa5252)}
.create-case-input{width:100%;padding:7px 10px;font-size:13px;border:1px solid var(--border);border-radius:var(--r-sm,6px);background:var(--card);color:var(--t1);outline:none;transition:border-color .15s}
.create-case-input:focus{border-color:var(--accent)}
.create-case-input-error{border-color:var(--red,#fa5252) !important}
.create-case-ddl-trigger{width:100%;padding:7px 10px;font-size:13px;border:1px solid var(--border);border-radius:var(--r-sm,6px);background:var(--card);color:var(--t1);outline:none;transition:border-color .15s;cursor:pointer;text-align:left;font-family:inherit;position:relative;box-sizing:border-box}
.create-case-ddl-trigger:hover{border-color:var(--accent)}
.create-case-ddl-trigger:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(34,139,230,.1)}
.create-case-ddl-trigger::after{content:'▾';position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--t3);font-size:11px;pointer-events:none}
.create-case-textarea{width:100%;padding:7px 10px;font-size:13px;border:1px solid var(--border);border-radius:var(--r-sm,6px);background:var(--card);color:var(--t1);outline:none;resize:vertical;font-family:inherit;transition:border-color .15s}
.create-case-textarea:focus{border-color:var(--accent)}
.create-case-field-error{display:block;font-size:11px;color:var(--red,#fa5252);margin-top:2px}
.create-case-show-more{background:none;border:none;color:var(--accent);font-size:13px;cursor:pointer;padding:4px 0;margin-bottom:16px}
.create-case-show-more:hover{text-decoration:underline}
.create-case-more-fields{animation:cc-slide-in .2s var(--ease,ease)}
@keyframes cc-slide-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.create-case-checkbox-label{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--t1);cursor:pointer}
.create-case-context-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:40px;text-align:center;color:var(--t3)}
.create-case-context-empty-title{font-size:15px;font-weight:500;color:var(--t2);margin:0 0 8px}
.create-case-context-empty-sub{font-size:13px;margin:0;color:var(--t3)}
.create-case-context-content{padding:16px}
.create-case-context-card{border:1px solid var(--border);border-radius:var(--r-sm,6px);background:var(--card);overflow:hidden}
.create-case-context-card-header{padding:10px 14px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:var(--t2);border-bottom:1px solid var(--border);background:var(--bg)}
.create-case-context-card-body{padding:14px;font-size:13px;color:var(--t1)}
.cc-ctx-site-header{padding:0 0 12px;border-bottom:1px solid var(--border);margin-bottom:12px}
.cc-ctx-site-name{font-size:14px;font-weight:600;color:var(--t1);display:block}
.cc-ctx-site-loc{font-size:12px;color:var(--t3);margin-top:2px;display:block}
.cc-ctx-card{border:1px solid var(--border);border-radius:var(--r-sm,6px);background:var(--card);overflow:hidden}
.cc-ctx-card-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;color:var(--t2);border-bottom:1px solid var(--border);background:var(--bg)}
.cc-ctx-card-count{font-size:10px;padding:1px 7px;border-radius:var(--r-full,999px);background:var(--card2);color:var(--t3);font-weight:500}
.cc-ctx-card-body{max-height:300px;overflow-y:auto}
.cc-ctx-loading,.cc-ctx-empty{padding:16px;text-align:center;font-size:12px;color:var(--t3)}
.cc-ctx-case{display:flex;justify-content:space-between;align-items:center;padding:8px 14px;border-bottom:1px solid var(--border);text-decoration:none;color:inherit;transition:background .1s}
.cc-ctx-case:hover{background:var(--card2)}
.cc-ctx-case:last-child{border-bottom:none}
.cc-ctx-case-left{min-width:0;flex:1}
.cc-ctx-case-id{font-weight:600;color:var(--accent);font-size:11px}
.cc-ctx-case-title{display:block;font-size:10px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:180px}
.cc-ctx-case-right{text-align:right;flex-shrink:0;margin-left:8px}
.cc-ctx-case-date{font-size:10px;color:var(--t3);display:block}
.cc-ctx-case-status{font-size:9px;padding:2px 6px;border-radius:var(--r-full,999px);background:var(--card2);color:var(--t2);display:inline-block;margin-top:2px}
.cc-ctx-site-header-top{display:flex;justify-content:space-between;align-items:baseline}
.cc-ctx-contact-count{font-size:10px;color:var(--t3);font-weight:400}
.cc-ctx-alert{display:flex;align-items:flex-start;gap:8px;padding:10px 14px;border-radius:var(--r-sm,6px);font-size:12px;line-height:1.4;margin-bottom:10px}
.cc-ctx-alert-danger{background:color-mix(in srgb,var(--danger) 12%,transparent);border:1px solid color-mix(in srgb,var(--danger) 30%,transparent);color:var(--danger)}
.cc-ctx-alert-warn{background:color-mix(in srgb,var(--warn) 12%,transparent);border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);color:var(--warn)}
.cc-ctx-alert-icon{flex-shrink:0;font-size:14px;line-height:1}
.cc-ctx-alert-source{margin-left:auto;flex-shrink:0;font-size:9px;text-transform:uppercase;letter-spacing:.3px;opacity:.7}
.cc-ctx-notes-card{margin-bottom:10px}
.cc-ctx-notes{padding:10px 14px;font-size:12px;color:var(--t2);line-height:1.5;white-space:pre-wrap;max-height:120px;overflow-y:auto}
.cc-input-readonly{background:var(--bg) !important;color:var(--t2);cursor:default;border-color:transparent !important;opacity:.85}
.cc-label-readonly{color:var(--t3);font-size:10px}
.create-case-footer-hint{padding:8px 24px;font-size:11px;color:var(--t3);text-align:center;border-top:1px solid var(--border);flex-shrink:0}
.create-case-footer-hint kbd{display:inline-block;padding:1px 5px;font-size:10px;border:1px solid var(--border);border-radius:3px;background:var(--bg);font-family:inherit}
/* create-case chip-row — pill selector for Priority, Severity, Origin (v3 pattern) */
.cc-chip-row{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.cc-chip{padding:6px 12px;border:1px solid var(--border);border-radius:var(--r-full,999px);background:var(--card);cursor:pointer;font-size:12px;font-weight:500;display:inline-flex;align-items:center;gap:5px;color:var(--t2);transition:all .15s var(--spring,ease);user-select:none;white-space:nowrap;font-family:inherit}
.cc-chip:hover{border-color:var(--accent-border,var(--accent));background:var(--accent-light,rgba(34,139,230,.06))}
.cc-chip.active{border-color:var(--accent);background:var(--accent-light,rgba(34,139,230,.06));color:var(--accent);box-shadow:var(--shadow-focus,0 0 0 2px rgba(34,139,230,.1))}
.cc-chip-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.cc-chip-more{padding:6px 10px;border:1px dashed var(--border);border-radius:var(--r-full,999px);background:transparent;cursor:pointer;font-size:11px;font-weight:500;color:var(--t3);transition:all .15s var(--spring,ease);font-family:inherit}
.cc-chip-more:hover{border-color:var(--accent-border,var(--accent));color:var(--accent)}
/* create-case details divider — progressive disclosure for Origin + Severity */
.cc-details-toggle{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;padding:4px 0;margin:4px 0 12px;cursor:pointer;font-family:inherit}
.cc-details-line{flex:1;height:1px;background:var(--border)}
.cc-details-label{font-size:11px;font-weight:500;color:var(--t3);white-space:nowrap;display:inline-flex;align-items:center;gap:4px;transition:color .15s}
.cc-details-toggle:hover .cc-details-label{color:var(--accent)}
.cc-details-chev{font-size:8px;transition:transform .2s}
.cc-details-chev.open{transform:rotate(180deg)}
.cc-details-fields{animation:cc-slide-in .2s var(--ease,ease)}
.btn{padding:6px 14px;font-size:13px;font-weight:500;border-radius:var(--r-sm,6px);cursor:pointer;border:1px solid transparent;transition:all .15s}
.btn:disabled{opacity:0.5;cursor:not-allowed}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover:not(:disabled){filter:brightness(1.1)}
.btn-secondary{background:var(--card);color:var(--t1);border-color:var(--border)}
.btn-secondary:hover:not(:disabled){background:var(--bg)}

/* ═══════════ SEARCH SELECT (typeahead search-and-select) ═══════════ */
.ss-wrap{position:relative;width:100%}
.ss-wrap.ss-error .ss-input-wrap{border-color:var(--danger)}
.ss-input-wrap{display:flex;align-items:center;gap:6px;padding:0 10px;height:34px;border:1px solid var(--border);border-radius:var(--r-sm,6px);background:var(--card);transition:border-color .12s}
.ss-input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px rgba(34,139,230,0.12)}
.ss-search-icon{flex-shrink:0;color:var(--t3);opacity:.6}
.ss-input{flex:1;border:none;background:transparent;color:var(--t1);font-size:13px;font-family:inherit;outline:none;min-width:0}
.ss-input::placeholder{color:var(--t3)}
.ss-spinner{width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:ss-spin .6s linear infinite;flex-shrink:0}
@keyframes ss-spin{to{transform:rotate(360deg)}}
.ss-field-error{display:block;font-size:11px;color:var(--danger);margin-top:3px}
.ss-selected{display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--border);border-radius:var(--r-sm,6px);background:var(--card);min-height:34px}
.ss-selected-label{font-size:13px;color:var(--t1);font-weight:500}
.ss-selected-sub{font-size:12px;color:var(--t3)}
.ss-clear{margin-left:auto;border:none;background:transparent;color:var(--t3);font-size:16px;cursor:pointer;padding:0 2px;line-height:1;transition:color .12s}
.ss-clear:hover{color:var(--danger)}
.ss-dropdown{z-index:9999;background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm,6px);box-shadow:0 8px 24px rgba(0,0,0,0.12);max-height:280px;overflow-y:auto;padding:4px 0}
.ss-group-header{padding:6px 12px 4px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--t3)}
.ss-item{display:flex;align-items:center;gap:8px;width:100%;padding:7px 12px;border:none;background:transparent;color:var(--t1);font-size:13px;font-family:inherit;cursor:pointer;text-align:left;transition:background .08s}
.ss-item:hover,.ss-item-active{background:var(--hover,rgba(0,0,0,0.04))}
.ss-item-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-item-sub{flex-shrink:0;font-size:12px;color:var(--t3)}
.ss-empty{padding:16px 12px;text-align:center;font-size:13px;color:var(--t3)}
.ss-load-more{display:block;width:100%;padding:10px 12px;border:none;border-top:1px solid var(--border);background:var(--card);color:var(--accent);font-size:13px;cursor:pointer;text-align:center}
.ss-load-more:hover{background:var(--card2)}
/* Multi-select mode — checkbox per row, sticky header (count + Select all/none) and sticky footer (+ Add N selected). Activated by .ss-multi on the dropdown root. */
.ss-dropdown.ss-multi{padding:0;max-height:380px}
.ss-multi-header{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--card2);position:sticky;top:0;z-index:1;font-size:12px}
.ss-multi-count{flex:1;color:var(--t2);font-weight:500}
.ss-multi-link{border:none;background:transparent;color:var(--accent);font-size:12px;font-weight:500;cursor:pointer;padding:2px 6px;border-radius:3px;transition:background .12s}
.ss-multi-link:hover:not(:disabled){background:rgba(34,139,230,.08)}
.ss-multi-link:disabled{color:var(--t3);cursor:not-allowed}
.ss-multi .ss-group{padding:4px 0}
.ss-item-checkbox{flex-shrink:0;width:16px;height:16px;border:1.5px solid var(--border);border-radius:3px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:#fff;background:var(--card);transition:all .12s}
.ss-item-checkbox-checked{border-color:var(--accent);background:var(--accent)}
.ss-item.ss-item-checked{background:rgba(34,139,230,.04)}
.ss-multi-footer{position:sticky;bottom:0;display:flex;justify-content:flex-end;padding:8px 12px;border-top:1px solid var(--border);background:var(--card2);z-index:1}
.ss-multi-submit{font-size:13px;padding:6px 14px}
.ss-multi-submit:disabled{opacity:.5;cursor:not-allowed}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTEXT LAYOUT ENGINE
   Composable container system for entity create form context panels.
   3 container types (Stack/Split/Tabs), collapsible headers, tab bar.
   Source: Elysium-New-Case-v3.html lines 497-970, adapted to production tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Layout Containers --- */
.lc-stack{border-bottom:1px solid var(--border)}
.lc-stack .ctx-panel{display:flex !important;flex:none;overflow:visible}
.lc-stack .ctx-panel .ctx-list{flex:none;max-height:180px;overflow-y:auto}
.lc-stack .ctx-panel .notes-panel{flex:none}
.lc-stack .ctx-panel .notes-editor{min-height:50px;max-height:110px}
.lc-stack .ctx-panel.collapsed{display:block !important}
.lc-stack .ctx-panel.collapsed>:not(.lc-header){display:none}

.lc-split{display:flex;border-bottom:1px solid var(--border)}
.lc-split>.lc-split-cell{flex:1;min-width:0;border-right:1px solid var(--border);display:flex;flex-direction:column}
.lc-split>.lc-split-cell:last-child{border-right:none}
.lc-split .ctx-panel{display:flex !important;flex:1;min-height:0;overflow:hidden}
.lc-split .ctx-panel .ctx-list{flex:1;max-height:140px;overflow-y:auto}
.lc-split .ctx-panel .notes-panel{flex:1}
.lc-split .ctx-panel .notes-editor{min-height:40px;max-height:80px}
.lc-split .ctx-panel.collapsed{display:block !important;flex:none}
.lc-split .ctx-panel.collapsed>:not(.lc-header){display:none}

.lc-tabs .ctx-tab-bar{display:flex}
.lc-tabs .ctx-panel{display:none;flex:1;flex-direction:column;min-height:0;overflow:hidden}
.lc-tabs .ctx-panel.active{display:flex}

/* --- Container Header (stack + split) --- */
.lc-header{display:flex;padding:6px 10px;cursor:pointer;font-size:11px;font-weight:600;color:var(--t2);background:var(--card2);user-select:none;transition:all .12s;align-items:center;gap:6px;border-bottom:1px solid var(--border)}
.lc-header:hover{color:var(--accent);background:var(--accent-light)}
.lc-header-icon{font-size:12px}
.lc-header-label{flex:1}
.lc-header-count{font-size:9px;font-weight:700;color:var(--t3)}
.lc-header-chev{font-size:8px;transition:transform .15s var(--spring);color:var(--t3)}
.ctx-panel.collapsed .lc-header-chev{transform:rotate(-90deg)}
.lc-tabs .lc-header{display:none}

/* --- Tab Bar --- */
.ctx-tab-bar{display:flex;flex-wrap:nowrap;border-bottom:2px solid var(--border);flex-shrink:0;background:var(--card2);overflow:hidden}
.ctx-tab{flex:1;padding:9px 6px;border:none;background:transparent;font-family:inherit;font-size:11px;font-weight:600;color:var(--t2);cursor:pointer;text-align:center;border-bottom:2px solid transparent;transition:all .15s var(--spring);user-select:none;display:flex;align-items:center;justify-content:center;gap:4px}
.ctx-tab:hover{color:var(--t1);background:var(--hover)}
.ctx-tab.active{color:var(--accent);border-bottom-color:var(--accent);background:var(--card)}
.ctx-tab-count{padding:0 5px;border-radius:var(--r-full);font-size:9px;font-weight:700;min-width:16px;background:var(--hover);color:var(--t3)}
.ctx-tab.active .ctx-tab-count{background:var(--accent-light);color:var(--accent)}
.ctx-tab-gear{padding:9px 7px;border:none;background:transparent;font-family:inherit;font-size:12px;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;flex-shrink:0;line-height:1}
.ctx-tab-gear:hover{color:var(--accent);background:var(--hover)}

/* --- Tab Search --- */
.ctx-search{padding:8px 12px;border-bottom:1px solid var(--border);flex-shrink:0;position:relative}
.ctx-search-icon{position:absolute;left:20px;top:50%;transform:translateY(-50%);font-size:12px;pointer-events:none;color:var(--t3)}
.ctx-search input{width:100%;padding:7px 10px 7px 28px;border:1px solid var(--border);border-radius:var(--r-xs);font-family:inherit;font-size:12px;color:var(--t1);background:var(--card);transition:border-color .15s,box-shadow .15s}
.ctx-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)}
.ctx-search input::placeholder{color:var(--t3)}

/* --- Tab Panels + Shared Content --- */
.ctx-panel{display:none;flex:1;flex-direction:column;min-height:0;overflow:hidden}
.ctx-panel.active{display:flex}
.ctx-list{flex:1;overflow-y:auto;padding:6px 10px;position:relative}
.ctx-empty{color:var(--t3);font-size:12px;padding:20px 4px;text-align:center}
.ctx-load-more{text-align:center;padding:8px;font-size:11px;color:var(--t3)}
.ctx-load-more.loading::after{content:' Loading...'}
.ctx-ftr{flex-shrink:0;padding:6px 12px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--t3)}
.ctx-ftr a{color:var(--accent);cursor:pointer;font-weight:500;text-decoration:none}

/* --- Notes Error State --- */
.notes-panel.notes-error{outline:2px solid var(--red);border-radius:var(--r-sm)}
.notes-error-msg{padding:4px 10px;font-size:11px;color:var(--red);font-weight:500}

/* --- Filter Chips --- */
.ctx-chip{padding:3px 10px;border:1px solid var(--border);border-radius:var(--r-full);background:transparent;font-family:inherit;font-size:10px;font-weight:600;color:var(--t3);cursor:pointer;transition:all .12s}
.ctx-chip:hover{border-color:var(--accent-border);color:var(--t1)}
.ctx-chip.active{background:var(--accent-light);color:var(--accent);border-color:var(--accent-border)}

/* --- Selected Contact Row --- */
.sel{background:var(--accent-light) !important;border-left:2px solid var(--accent)}

/* --- Site Header Modes --- */
.ctx-header.hdr-compact .ctx-header-collapse{display:none}
.ctx-header.hdr-compact .sla-badges{display:none}
.ctx-header.hdr-compact{padding-bottom:6px}
.ctx-header.hdr-hidden{display:none}
.ctx-header.hdr-in-container{display:none}

/* --- Site Header Widget (CtxSiteHeaderWidget) --- */
.ctx-site-header{padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.ctx-site-header-name{font-size:13px;font-weight:600;color:var(--t1);line-height:1.3}
.ctx-site-header-account{font-size:11px;color:var(--t2);font-weight:500}
.ctx-site-header-row{display:flex;align-items:flex-start;gap:6px;font-size:11px;color:var(--t2);line-height:1.4}
.ctx-site-header-icon{font-size:11px;flex-shrink:0;color:var(--t3);margin-top:1px}
.ctx-site-header-notes{margin-top:4px;padding-top:6px;border-top:1px solid var(--border)}
.ctx-site-header-notes-label{font-size:9px;font-weight:700;text-transform:uppercase;color:var(--t3);letter-spacing:0.4px;margin-bottom:3px}
.ctx-site-header-notes-body{font-size:11px;color:var(--t2);line-height:1.45;white-space:pre-wrap;max-height:80px;overflow-y:auto}

/* --- Widget Stub (CtxPartsWidget, CtxDispatchWidget) --- */
.ctx-widget-stub{padding:16px 14px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;color:var(--t2)}
.ctx-widget-stub-icon{font-size:22px;opacity:.7;margin-bottom:2px}
.ctx-widget-stub-title{font-size:12px;font-weight:600;color:var(--t1)}
.ctx-widget-stub-body{font-size:11px;line-height:1.5;color:var(--t3);max-width:220px}
.ctx-widget-stub-footer{margin-top:6px;padding:2px 8px;border-radius:var(--r-full);background:var(--hover);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--t3)}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTEXT LAYOUT CONFIG MODAL (Phase A5)
   User-facing modal to configure widgets, containers, and header mode.
   Triggered by the gear icon in TabsContainer's tab bar (ctx-tab-gear).
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- Overlay + Shell --- */
.ctx-config-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1200;opacity:0;pointer-events:none;transition:opacity .18s var(--spring);backdrop-filter:blur(2px)}
.ctx-config-overlay.open{opacity:1;pointer-events:auto}

.ctx-config-modal{width:min(720px,calc(100vw - 48px));max-height:calc(100vh - 64px);background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:0 20px 60px rgba(0,0,0,.35),0 0 0 1px var(--border);display:flex;flex-direction:column;overflow:hidden;font-size:13px;color:var(--t1)}

/* --- Header --- */
.ctx-config-header{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border);background:var(--card2);flex-shrink:0}
.ctx-config-title{flex:1;margin:0;font-size:15px;font-weight:600;color:var(--t1);letter-spacing:-.01em}
.ctx-config-close{width:28px;height:28px;border:none;background:transparent;color:var(--t2);font-size:22px;line-height:1;cursor:pointer;border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;transition:all .12s}
.ctx-config-close:hover{background:var(--hover);color:var(--t1)}

/* --- Body --- */
.ctx-config-body{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:20px}

.ctx-config-section{display:flex;flex-direction:column;gap:8px}
.ctx-config-section-title{margin:0;font-size:11px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.06em}
.ctx-config-hint{margin:0 0 4px;font-size:12px;line-height:1.45;color:var(--t3)}
.ctx-config-empty{padding:14px 12px;text-align:center;font-size:12px;color:var(--t3);border:1px dashed var(--border);border-radius:var(--r-sm);background:var(--card2)}

/* --- Header mode radios --- */
.ctx-config-radio-row{display:flex;gap:8px}
.ctx-config-radio{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r-xs);background:var(--card2);font-size:12px;font-weight:500;color:var(--t2);cursor:pointer;transition:all .12s;user-select:none}
.ctx-config-radio:hover{color:var(--t1);background:var(--hover)}
.ctx-config-radio.active{background:var(--accent-light);border-color:var(--accent);color:var(--accent);font-weight:600}
.ctx-config-radio input{accent-color:var(--accent);cursor:pointer}

/* --- Active widgets grid --- */
.ctx-config-widgets-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ctx-config-widget-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px 10px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--card2);font-family:inherit;color:var(--t2);cursor:pointer;transition:all .14s var(--spring);text-align:center;position:relative;min-height:98px}
.ctx-config-widget-card:hover{border-color:var(--accent);background:var(--hover)}
.ctx-config-widget-card.active{background:var(--accent-light);border-color:var(--accent);color:var(--accent)}
.ctx-config-widget-card:not(.active){opacity:.6}
.ctx-config-widget-card:not(.active):hover{opacity:1}
.ctx-config-widget-icon{font-size:20px;line-height:1}
.ctx-config-widget-label{font-size:12px;font-weight:600;color:var(--t1)}
.ctx-config-widget-card.active .ctx-config-widget-label{color:var(--accent)}
.ctx-config-widget-desc{font-size:10px;line-height:1.3;color:var(--t3);margin-top:1px}
.ctx-config-widget-placement{position:absolute;top:4px;right:4px;padding:1px 5px;border-radius:var(--r-full);background:var(--card);border:1px solid var(--border);font-size:9px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.3px}
.ctx-config-widget-placement.unassigned{background:var(--warn-light,#fef3c7);color:var(--warn,#92400e);border-color:var(--warn,#fbbf24)}

/* --- Containers list --- */
.ctx-config-containers-list{display:flex;flex-direction:column;gap:10px}
.ctx-config-container{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--card2);overflow:hidden}
.ctx-config-container-header{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--card);border-bottom:1px solid var(--border)}
.ctx-config-container-num{font-size:11px;font-weight:700;color:var(--t3);min-width:22px}
.ctx-config-container-type{flex:0 0 auto;padding:4px 8px;border:1px solid var(--border);border-radius:var(--r-xs);background:var(--card);color:var(--t1);font-family:inherit;font-size:11px;font-weight:600;cursor:pointer}
.ctx-config-container-type:focus{outline:none;border-color:var(--accent)}
.ctx-config-container-actions{margin-left:auto;display:flex;gap:4px}
.ctx-config-container-actions button{width:22px;height:22px;border:1px solid var(--border);background:var(--card);color:var(--t2);font-size:11px;line-height:1;cursor:pointer;border-radius:var(--r-xs);display:flex;align-items:center;justify-content:center;transition:all .12s}
.ctx-config-container-actions button:hover:not(:disabled){background:var(--hover);color:var(--t1);border-color:var(--accent)}
.ctx-config-container-actions button:disabled{opacity:.35;cursor:not-allowed}
.ctx-config-container-remove{color:var(--danger,#dc2626) !important}
.ctx-config-container-remove:hover{background:var(--danger-light,#fee2e2) !important;border-color:var(--danger,#dc2626) !important}

.ctx-config-container-widgets{display:flex;flex-wrap:wrap;gap:6px;padding:10px}
.ctx-config-container-empty{padding:2px 4px;font-size:11px;color:var(--t3);font-style:italic}
.ctx-config-container-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 4px 4px 8px;border:1px solid var(--border);border-radius:var(--r-full);background:var(--card);font-size:11px;font-weight:500;color:var(--t1)}
.ctx-config-chip-icon{font-size:11px}
.ctx-config-chip-label{font-size:11px}
.ctx-config-chip-remove{width:16px;height:16px;border:none;background:transparent;color:var(--t3);font-size:13px;line-height:1;cursor:pointer;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;transition:all .12s;padding:0}
.ctx-config-chip-remove:hover{background:var(--danger-light,#fee2e2);color:var(--danger,#dc2626)}

.ctx-config-container-add{margin:0 10px 10px;padding:4px 8px;border:1px dashed var(--border);border-radius:var(--r-xs);background:var(--card);color:var(--t2);font-family:inherit;font-size:11px;cursor:pointer;width:calc(100% - 20px);box-sizing:border-box}
.ctx-config-container-add:focus{outline:none;border-color:var(--accent);border-style:solid}

.ctx-config-add-container{display:flex;gap:6px;justify-content:center;padding-top:4px}
.ctx-config-add-btn{padding:6px 12px;border:1px dashed var(--border);border-radius:var(--r-xs);background:var(--card2);color:var(--t2);font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;transition:all .12s}
.ctx-config-add-btn:hover{border-color:var(--accent);border-style:solid;background:var(--accent-light);color:var(--accent)}

/* --- Footer --- */
.ctx-config-footer{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--border);background:var(--card2);flex-shrink:0}
.ctx-config-btn-ghost{padding:8px 14px;border:1px solid var(--border);border-radius:var(--r-xs);background:transparent;color:var(--t2);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .12s}
.ctx-config-btn-ghost:hover{background:var(--hover);color:var(--t1);border-color:var(--t3)}
.ctx-config-btn-primary{margin-left:auto;padding:8px 18px;border:1px solid var(--accent);border-radius:var(--r-xs);background:var(--accent);color:#fff;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .12s}
.ctx-config-btn-primary:hover{filter:brightness(1.08);box-shadow:0 2px 8px var(--focus-ring)}

@media (max-width:640px){
  .ctx-config-widgets-grid{grid-template-columns:repeat(2,1fr)}
  .ctx-config-modal{width:calc(100vw - 24px);max-height:calc(100vh - 32px)}
}

/* ═══════════ UTILITY CLASSES ═══════════ */
.tabular-nums{font-variant-numeric:tabular-nums}

/* ═══════════ EXPLORE PICKER (Entity Explorer Phase 7 Half 1) ═══════════ */
/* POC tooling at /explore — generic select-form shell + relationship-tree
   picker. Visible to devs only (no nav entry). Composes ToolbarSearch and
   uses theme tokens throughout. */

/* --- Index page (/explore) --- */
.explore-index{padding:24px;max-width:760px;margin:0 auto;color:var(--t1)}
.explore-index-header{margin-bottom:18px}
.explore-index-header h1{margin:0 0 6px;font-size:18px;font-weight:600;color:var(--t1)}
.explore-index-blurb{margin:0;font-size:13px;line-height:1.5;color:var(--t2)}
.explore-index-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.explore-index-item{display:flex;align-items:baseline;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-xs);background:var(--card,var(--bg));color:var(--t1);text-decoration:none;transition:border-color .12s,background .12s}
.explore-index-item:hover{border-color:var(--accent);background:var(--accent-light)}
.explore-index-item-label{font-size:14px;font-weight:600}
.explore-index-item-slug{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--accent)}
.explore-index-item-meta{margin-left:auto;font-size:11px;color:var(--t3);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.explore-index-footer{margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
.explore-index-footer p{margin:0;font-size:12px;color:var(--t3);line-height:1.5}

/* --- Entity page (/explore/[entity]) --- */
.explore-entity{padding:18px 24px;color:var(--t1)}
.explore-not-found{padding:24px;color:var(--t1)}
.explore-not-found h1{margin:0 0 8px;font-size:16px;font-weight:600}
.explore-not-found p{margin:6px 0;font-size:13px;color:var(--t2)}
.explore-not-found code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:var(--card2,var(--bg));padding:1px 6px;border-radius:3px;border:1px solid var(--border)}

.explore-entity-badge{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--card,var(--bg));border:1px solid var(--border);border-radius:var(--r-xs);font-size:13px}
.explore-entity-back{color:var(--accent);text-decoration:none;font-size:12px;font-weight:500}
.explore-entity-back:hover{text-decoration:underline}
.explore-entity-badge-label{font-weight:600;color:var(--t1)}
.explore-entity-badge-slug{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--t3);font-weight:400}
.explore-entity-badge-meta{margin-left:auto;font-size:11px;color:var(--t2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.explore-entity-badge-error{margin-left:auto;font-size:11px;color:var(--danger,#dc2626);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.explore-entity-badge-loading{margin-left:auto;font-size:11px;color:var(--t3);font-style:italic}

/* --- Mode toggle (View / Pick) --- */
.explore-mode-toggle{display:inline-flex;margin:14px 0 12px;border:1px solid var(--border);border-radius:var(--r-xs);overflow:hidden;background:var(--card,var(--bg))}
.explore-mode-button{padding:6px 14px;border:none;background:transparent;color:var(--t2);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:background .12s,color .12s}
.explore-mode-button:not(:last-child){border-right:1px solid var(--border)}
.explore-mode-button:hover:not(:disabled){background:var(--hover);color:var(--t1)}
.explore-mode-button.is-active{background:var(--accent);color:#fff}
.explore-mode-button:disabled{opacity:.5;cursor:not-allowed}

/* --- Pick mode 2-col layout --- */
.explore-pick-mode{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}
.explore-pick-tree{min-width:0;overflow-x:auto}
.explore-pick-no-token{padding:14px;color:var(--t3);font-size:13px;font-style:italic}

/* --- Tree node --- */
.explore-tree-node{border:1px solid var(--border);border-radius:var(--r-xs);background:var(--card,var(--bg));margin-bottom:8px}
.explore-tree-node[data-depth="0"]{border-color:var(--accent-border)}
.explore-tree-header{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--card2,var(--bg))}
.explore-tree-entity-name{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:600;color:var(--t1)}
.explore-tree-counts{margin-left:auto;display:inline-flex;gap:4px}
.explore-tree-count-chip{display:inline-flex;align-items:center;padding:1px 6px;border-radius:var(--r-full);background:var(--accent-light);color:var(--accent);font-size:11px;font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.explore-tree-count-chip[data-kind="rels"]{background:var(--card2,var(--bg));color:var(--t2);border:1px solid var(--border)}

/* --- Section toggle (Fields / Relationships) --- */
.explore-tree-section-toggle{display:flex;align-items:center;gap:6px;width:100%;padding:7px 12px;border:none;background:transparent;color:var(--t1);font-family:inherit;font-size:12px;font-weight:600;text-align:left;cursor:pointer;transition:background .12s}
.explore-tree-section-toggle:hover{background:var(--hover)}
.explore-tree-section-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.explore-tree-section-caret{font-size:11px;color:var(--t3);width:12px;display:inline-block;text-align:center}
.explore-tree-section-label{flex:1;color:var(--t1)}
.explore-tree-section-counts{display:inline-flex;align-items:center;gap:6px}
.explore-tree-section-picked{padding:1px 7px;border-radius:var(--r-full);background:var(--accent);color:#fff;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.explore-tree-section-total{font-size:11px;color:var(--t3);font-weight:500;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;min-width:34px;text-align:right}

/* --- Section filter (ToolbarSearch wrapper override) --- */
.explore-tree-section-filter{padding:6px 12px 4px;border-top:1px solid var(--border);background:var(--card2,var(--bg))}
.explore-tree-filter-wrap{flex:1 1 auto;min-width:0}

/* --- Field list --- */
.explore-tree-field-list,.explore-tree-rel-list{list-style:none;margin:0;padding:4px 0;border-top:1px solid var(--border)}
.explore-tree-field-row{padding:0}
.explore-tree-field-row:hover{background:var(--hover)}
.explore-tree-field-row[data-checked]{background:var(--accent-light)}
.explore-tree-field-row label{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 28px;cursor:pointer;font-size:13px}
.explore-tree-field-row input[type="checkbox"]{margin:0;accent-color:var(--accent)}
.explore-tree-field-label{flex:1;color:var(--t1);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.explore-tree-field-type{font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.04em;padding:1px 6px;border-radius:var(--r-full);background:var(--card2,var(--bg));border:1px solid var(--border)}

/* --- Relationship list --- */
.explore-tree-rel-row{border-top:1px solid transparent}
.explore-tree-rel-row:not(:first-child){border-top-color:var(--border)}
.explore-tree-rel-row[data-checked]{background:var(--accent-light)}
.explore-tree-rel-row[data-clash]{background:repeating-linear-gradient(135deg,transparent,transparent 6px,var(--card2,var(--bg)) 6px,var(--card2,var(--bg)) 12px)}
.explore-tree-rel-row[data-clash][data-checked]{background:var(--accent-light)}
.explore-tree-rel-header{display:flex;align-items:center;gap:6px;padding:0 12px}
.explore-tree-rel-header label{display:inline-flex;align-items:center;gap:8px;padding:6px 0;flex:1;cursor:pointer;font-size:13px;min-width:0}
.explore-tree-rel-header input[type="checkbox"]{margin:0;accent-color:var(--accent)}
.explore-tree-rel-typeglyph{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:var(--r-full);background:var(--card2,var(--bg));border:1px solid var(--border);font-size:11px;color:var(--t2)}
.explore-tree-rel-row[data-rel-type="has-one"] .explore-tree-rel-typeglyph{color:var(--accent);border-color:var(--accent-border)}
.explore-tree-rel-row[data-rel-type="has-many"] .explore-tree-rel-typeglyph{color:var(--accent2);border-color:var(--accent-border)}
.explore-tree-rel-row[data-rel-type="ddl"] .explore-tree-rel-typeglyph{color:var(--t3)}
.explore-tree-rel-role{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--t1);font-weight:500}
.explore-tree-rel-via{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--warning,#b45309);background:var(--warning-light,#fef3c7);border:1px solid var(--warning-border,#fbbf24);padding:1px 6px;border-radius:var(--r-full);font-weight:600;letter-spacing:.02em}
.explore-tree-rel-arrow{color:var(--t3);font-size:12px}
.explore-tree-rel-target{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--t2)}
.explore-tree-rel-class{margin-left:auto;font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.04em;padding:1px 6px;border-radius:var(--r-full);background:var(--card2,var(--bg));border:1px solid var(--border);flex-shrink:0}
.explore-tree-rel-class[data-target-class="ddl"]{color:var(--accent2);border-color:var(--accent-border)}
.explore-tree-rel-class[data-target-class="self"]{color:var(--warning,#b45309);border-color:var(--warning-border,#fbbf24)}

.explore-tree-expand{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid var(--border);border-radius:var(--r-xs);background:var(--card,var(--bg));color:var(--t2);font-size:13px;font-weight:600;cursor:pointer;transition:all .12s;flex-shrink:0}
.explore-tree-expand:hover{border-color:var(--accent);color:var(--accent)}
.explore-tree-expand[aria-expanded="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
.explore-tree-rel-children{padding:4px 0 4px 16px;border-left:2px solid var(--accent-border);margin:4px 0 6px 24px}

/* --- Empty / loading / error states --- */
.explore-tree-empty{padding:10px 12px 10px 28px;font-size:12px;color:var(--t3);font-style:italic}
.explore-tree-loading{padding:10px 12px;font-size:12px;color:var(--t3);font-style:italic;background:var(--card2,var(--bg));border:1px solid var(--border);border-radius:var(--r-xs);margin-bottom:8px}
.explore-tree-error{padding:10px 12px;font-size:12px;color:var(--danger,#dc2626);background:var(--danger-light,#fee2e2);border:1px solid var(--danger-border,#fecaca);border-radius:var(--r-xs);margin-bottom:8px}
.explore-tree-error code,.explore-tree-loading code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600}

/* --- Spec preview pane --- */
.explore-spec-preview{position:sticky;top:14px;display:flex;flex-direction:column;gap:10px;padding:14px;background:var(--card,var(--bg));border:1px solid var(--border);border-radius:var(--r-xs);max-height:calc(100vh - 80px);overflow:auto}
.explore-spec-header{display:flex;align-items:center;gap:10px}
.explore-spec-header h3{margin:0;font-size:13px;font-weight:600;color:var(--t1);text-transform:uppercase;letter-spacing:.04em}
.explore-spec-actions{margin-left:auto;display:inline-flex;gap:6px}
.explore-spec-action{padding:4px 10px;border:1px solid var(--border);border-radius:var(--r-xs);background:var(--card,var(--bg));color:var(--t2);font-family:inherit;font-size:11px;font-weight:600;cursor:pointer;transition:all .12s}
.explore-spec-action:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
.explore-spec-action:disabled{opacity:.4;cursor:not-allowed}
.explore-spec-summary{display:flex;flex-wrap:wrap;gap:10px 14px;font-size:12px;color:var(--t2);padding:8px 10px;background:var(--card2,var(--bg));border-radius:var(--r-xs);border:1px solid var(--border)}
.explore-spec-summary code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--accent);background:transparent;padding:0}
.explore-spec-hint{margin:0;padding:10px 12px;font-size:12px;line-height:1.5;color:var(--t2);background:var(--accent-light);border-left:3px solid var(--accent);border-radius:0 var(--r-xs) var(--r-xs) 0}
.explore-spec-hint code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--accent);background:transparent;padding:0}
.explore-spec-json{margin:0;padding:10px 12px;background:var(--card2,var(--bg));border:1px solid var(--border);border-radius:var(--r-xs);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.5;color:var(--t1);white-space:pre-wrap;word-break:break-word;overflow-x:auto;max-height:380px;overflow-y:auto}

/* --- Result panel (Run query → /api/reporting/compose) --- */
.explore-result-panel{margin-top:14px;padding:14px;background:var(--card,var(--bg));border:1px solid var(--border);border-radius:var(--r-xs);display:flex;flex-direction:column;gap:10px}
.explore-result-header{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.explore-result-header h3{margin:0;font-size:13px;font-weight:600;color:var(--t1);text-transform:uppercase;letter-spacing:.04em}
.explore-result-run{padding:6px 14px;border:1px solid var(--accent);border-radius:var(--r-xs);background:var(--accent);color:#fff;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .12s}
.explore-result-run:hover:not(:disabled){filter:brightness(1.08);box-shadow:0 2px 8px var(--focus-ring,rgba(34,139,230,.25))}
.explore-result-run:disabled{opacity:.4;cursor:not-allowed;background:var(--card2,var(--bg));color:var(--t3);border-color:var(--border)}
.explore-result-stats{margin-left:auto;display:inline-flex;gap:10px;font-size:11px;color:var(--t2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.explore-result-stat{padding:2px 8px;border-radius:var(--r-full);background:var(--card2,var(--bg));border:1px solid var(--border)}
.explore-result-stat strong{color:var(--accent);font-weight:700}
.explore-result-stat[data-schema-variant="GSP"]{color:var(--accent);border-color:var(--accent-border)}
.explore-result-stat[data-schema-variant="Clarify"]{color:var(--accent2);border-color:var(--accent-border)}
.explore-result-stats-error .explore-result-stat{color:var(--danger,#dc2626);border-color:var(--danger-border,#fecaca);background:var(--danger-light,#fee2e2)}
.explore-result-empty,.explore-result-loading{margin:0;padding:18px 12px;font-size:13px;color:var(--t3);font-style:italic;text-align:center;background:var(--card2,var(--bg));border:1px dashed var(--border);border-radius:var(--r-xs)}
.explore-result-error{padding:12px 14px;background:var(--danger-light,#fee2e2);border:1px solid var(--danger-border,#fecaca);border-radius:var(--r-xs)}
.explore-result-error-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--danger,#dc2626);font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.explore-result-error-msg{margin:0 0 6px;font-size:13px;color:var(--t1)}
.explore-result-error-hint{margin:0;padding:8px 10px;background:var(--card,var(--bg));border-radius:var(--r-xs);font-size:12px;line-height:1.5;color:var(--t2)}
.explore-result-error-hint code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--accent);background:transparent;padding:0}

/* --- Result table --- */
.explore-result-tablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-xs);background:var(--card2,var(--bg))}
.explore-result-table{width:100%;border-collapse:collapse;font-size:13px;color:var(--t1)}
.explore-result-table thead{position:sticky;top:0;background:var(--card,var(--bg));z-index:1}
.explore-result-table th{text-align:left;padding:8px 10px;border-bottom:2px solid var(--border);font-weight:600;color:var(--t1);white-space:nowrap}
.explore-result-table td{padding:6px 10px;border-bottom:1px solid var(--border);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--t1);max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.explore-result-table tbody tr:hover{background:var(--hover)}
.explore-result-table td[data-data-type="datetime"],.explore-result-table td[data-data-type="date"]{color:var(--accent)}
.explore-result-table td[data-data-type="number"],.explore-result-table td[data-data-type="decimal"],.explore-result-table td[data-data-type="int"]{text-align:right;font-variant-numeric:tabular-nums}
.explore-result-col-alias{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--t1)}
.explore-result-col-path{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;color:var(--t3);font-weight:400;margin-top:1px}
.explore-result-truncated{margin:8px 0 0;font-size:11px;color:var(--t3);font-style:italic;text-align:center}

/* --- Mobile / narrow viewport --- */
@media (max-width:900px){
  .explore-pick-mode{grid-template-columns:1fr}
  .explore-spec-preview{position:static;max-height:none}
  .explore-result-stats{margin-left:0;width:100%}
}

/* ═══════════ DASHBOARD METRIC TILES (Phase 7 Half 3) ═══════════ */
/* Curated workspace-home tiles — one MetricCardWidget per entry in
   definitions/dashboard-tiles/. Each tile renders a big-number count
   from /api/reporting/compose. Same widget code drives every tile;
   new tiles add by JSON only (Half 3 gate). */

.dashboard-tile-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin-bottom:32px;
}

.metric-card-body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}

.metric-card-value{
  font-size:32px;
  font-weight:700;
  line-height:1.1;
  color:var(--t1);
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.02em;
}

.metric-card-meta{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:var(--t3);
  font-variant-numeric:tabular-nums;
}

.metric-card-meta [data-schema-variant]{
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-weight:600;
}

.metric-card-link{
  margin-top:4px;
  font-size:12px;
  font-weight:500;
  color:var(--accent);
  text-decoration:none;
}
.metric-card-link:hover{text-decoration:underline}

.metric-card-error{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:8px 10px;
  border-radius:4px;
  background:color-mix(in srgb, var(--red) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--red) 24%, transparent);
}

.metric-card-error-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  font-weight:600;
  color:var(--red);
  text-transform:uppercase;
  letter-spacing:0.04em;
}

.metric-card-error-msg{
  font-size:12px;
  color:var(--t2);
  line-height:1.35;
}

/* ═══════════ RECURRENCE EDITOR ═══════════ */
/* Compact schedule editor — Daily/Weekly/Monthly with day-of-week,
   time (via TimeCombo), start date, and end condition (never/date/count). */

.recurrence-editor{
  display:flex;
  flex-direction:column;
  gap:14px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:6px;
  padding:14px;
}

.recurrence-summary{
  font-size:12px;
  color:var(--t2);
  line-height:1.4;
  padding:6px 0;
  border-bottom:1px solid var(--border);
  margin-bottom:4px;
}

.recurrence-row{
  display:flex;
  align-items:center;
  gap:10px;
}

.recurrence-label{
  flex:0 0 52px;
  font-size:13px;
  font-weight:500;
  color:var(--t2);
}

.recurrence-select{
  font-size:13px;
  color:var(--t1);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:4px;
  padding:5px 8px;
  outline:none;
}
.recurrence-select:focus{border-color:var(--accent)}

.recurrence-input-num{
  width:54px;
  font-size:13px;
  color:var(--t1);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:4px;
  padding:5px 8px;
  text-align:center;
  outline:none;
}
.recurrence-input-num:focus{border-color:var(--accent)}

.recurrence-input-date{
  font-size:13px;
  color:var(--t1);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:4px;
  padding:5px 8px;
  outline:none;
}
.recurrence-input-date:focus{border-color:var(--accent)}

.recurrence-unit{
  font-size:13px;
  color:var(--t2);
}

.recurrence-days{
  display:flex;
  flex-wrap:wrap;
  gap:6px 12px;
}

.recurrence-day-label{
  display:flex;
  align-items:center;
  gap:4px;
  font-size:13px;
  color:var(--t1);
  cursor:pointer;
  user-select:none;
}

.recurrence-day-label input[type="checkbox"]{
  accent-color:var(--accent);
  margin:0;
  cursor:pointer;
}

.recurrence-editor .time-combo{
  border:1px solid var(--border);
  border-radius:4px;
  padding:5px 8px;
  background:var(--card);
  font-size:13px;
  color:var(--t1);
}
.recurrence-editor .time-combo:focus{border-color:var(--accent)}

.recurrence-end-group{
  display:flex;
  gap:10px;
  margin-top:4px;
}

.recurrence-end-options{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.recurrence-end-option{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:var(--t1);
  cursor:pointer;
  user-select:none;
}

.recurrence-end-option input[type="radio"]{
  accent-color:var(--accent);
  margin:0;
  cursor:pointer;
}

.recurrence-end-inline{
  margin-left:2px;
}

.recurrence-monthly-mode{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.recurrence-mode-toggles{
  display:flex;
  gap:4px;
}

.recurrence-mode-toggle{
  font-size:12px;
  padding:4px 10px;
  border:1px solid var(--border);
  border-radius:4px;
  background:var(--card);
  color:var(--t2);
  cursor:pointer;
}
.recurrence-mode-toggle:hover{background:var(--hover)}
.recurrence-mode-toggle.active{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}
.recurrence-mode-toggle:disabled{opacity:.5;cursor:not-allowed}

.recurrence-relative-row{
  display:flex;
  gap:8px;
}

.recurrence-month-select{
  min-width:120px;
}

.recurrence-warning{
  font-size:12px;
  color:var(--warn);
  padding:6px 10px;
  border:1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  border-radius:4px;
  background:color-mix(in srgb, var(--warn) 10%, var(--card));
  margin-left:62px;
}