@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
:root {
  /* ── Light palette (default) ──
     Ship 106ac: darkened the surface scale so borders and panel
     separations have proper visual weight.
     Ship 106e4: softened pure-white --s0 (#fff) to a subtle warm white
     (#fafaf8 — closer to Apple/Stripe's surface feel) to reduce
     "shiny white" eye strain on larger surfaces (modals, cards, the
     admin settings panel). The change is intentional and barely
     perceptible on most monitors, but the cumulative effect across
     all white surfaces is noticeably calmer. */
  --s0:#fafaf8;--s1:#f3f4f6;--s2:#e9ecf0;--s3:#cfd4da;--s4:#b0b7be;
  --t1:#202124;--t2:#5f6368;--t3:#9aa0a6;
  --blue:#1a73e8;--blue2:#1557b0;--blueL:#e8f0fe;
  --green:#188038;--greenL:#e6f4ea;
  --red:#d93025;--redL:#fce8e6;
  --yellow:#f9ab00;--yellowL:#fef7e0;
  --teal:#00897b;--tealL:#e0f2f1;
  --r:10px;--r2:8px;
  --sh:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.08);
  --sh2:0 4px 12px rgba(0,0,0,.15);
  --font:'Inter',system-ui,sans-serif;--mono:'JetBrains Mono',monospace;
  --panel:280px;
}
/* ── Dark theme palette ─────────────────────────────────────── */
[data-theme="dark"] {
  --s0:#1e1e2e;--s1:#181824;--s2:#13131f;--s3:#2a2a3e;--s4:#3a3a52;
  --t1:#e2e2f0;--t2:#a0a0b8;--t3:#606080;
  --blue:#7ba7f7;--blue2:#5a8df5;--blueL:#1a2540;
  --green:#4caf78;--greenL:#0e2a1a;
  --red:#f07070;--redL:#2a1010;
  --yellow:#f9c950;--yellowL:#2a2010;
  --sh:0 1px 3px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);
  --sh2:0 4px 12px rgba(0,0,0,.5);
}
/* Dark: invert the map select arrow SVG colour */
[data-theme="dark"] .fsel {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a0a0b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
/* Dark: inputs / textareas */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  color-scheme: dark;
}
/* Dark: map overlay tint */
[data-theme="dark"] #overlay { background:rgba(19,19,31,.92); }
/* Dark: scrollbars */
[data-theme="dark"] ::-webkit-scrollbar-track { background:var(--s2); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background:var(--s4); }
/* Dark: theme toggle button active state */
#theme-btn{display:flex;align-items:center;justify-content:center;padding:6px 8px;border-radius:8px;background:none;border:none;cursor:pointer;color:var(--t2);transition:all .15s;}
#theme-btn:hover{background:var(--s2);}
#theme-btn.dark svg { color:#f9c950; }
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:var(--font);background:var(--s2);color:var(--t1);height:100vh;overflow:hidden;display:flex;flex-direction:column;}
/* ── APP SIDEPANEL (Ship 1) ──────────────────────────────────────────────
   Primary nav. Sits at far left inside #main with order:-2 so it appears
   before the existing section sidepanel (#side has order:-1). Toggles
   between 60px (icons only) and 200px (icons + labels) via JS. Hidden
   on mobile to maximize screen space — section sidepanel + content do
   not need this nav layer on small screens (the mobile FAB handles it).
   ──────────────────────────────────────────────────────────────────────── */
#app-sidepanel{
  width:60px;background:var(--s0);border-right:1px solid var(--s4);
  display:flex;flex-direction:column;flex-shrink:0;order:-2;
  z-index:10100;  /* above all overlays so global nav stays clickable */
  overflow:hidden;transition:width .22s cubic-bezier(.4,0,.2,1);
}
#app-sidepanel.expanded{width:200px;}
/* CSS variable drives how far overlays are pushed right to make room
   for the sidepanel. Default 60px (collapsed). Body class flips it to
   200px when the user expands the sidepanel. Set on :root so it's
   inheritable everywhere. */
:root{--aps-w:60px;}
body.has-app-sidepanel.aps-expanded{--aps-w:200px;}
body.has-app-sidepanel #admin-settings-overlay,
body.has-app-sidepanel #studio-root{
  /* Ship A: overlays now sit BELOW the global topbar (56px tall) and to
     the RIGHT of the app sidepanel, so logo, user menu, theme toggle
     etc. stay visible in all three sections. Smooth slide when the
     sidepanel expands/collapses. */
  top:56px !important;
  left:var(--aps-w) !important;
  transition:left .22s cubic-bezier(.4,0,.2,1);
}
@media(max-width:900px){
  /* Mobile: sidepanel hidden, topbar is shorter (52px), overlays go
     edge-to-edge horizontally but still respect mobile topbar height */
  body.has-app-sidepanel #admin-settings-overlay,
  body.has-app-sidepanel #studio-root{left:0 !important;top:52px !important;}
}
.aps-toggle{
  width:100%;height:48px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;border-bottom:1px solid var(--s3);
  color:var(--t2);cursor:pointer;flex-shrink:0;transition:background .15s;
}
.aps-toggle:hover{background:var(--s2);color:var(--t1);}
.aps-items{display:flex;flex-direction:column;padding:6px 0;gap:2px;overflow-y:auto;overflow-x:hidden;}
/* 106f7: SaaS-standard icon sizes — sidepanel icons bumped from 18px→24px,
   item padding bumped from 10x16 to 12x18, font-size 14→15. These are the
   first thing users see and the old sizing felt cramped. */
.aps-item{
  display:flex;align-items:center;gap:14px;width:100%;
  padding:12px 18px;background:transparent;border:none;
  color:var(--t1);font-size:15px;font-weight:700;cursor:pointer;
  text-align:left;transition:background .12s, color .12s, box-shadow .12s;
  white-space:nowrap;overflow:hidden;
}
.aps-item:hover{background:var(--blueL);color:var(--blue);}
.aps-item.active{
  background:transparent;color:var(--blue);font-weight:700;
  box-shadow:inset 3px 0 var(--blue);
}
.aps-icon{font-size:24px;flex-shrink:0;width:30px;text-align:center;line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.10));}
.aps-label{opacity:0;transition:opacity .15s;pointer-events:none;font-size:14px;}
#app-sidepanel.expanded .aps-label{opacity:1;pointer-events:auto;}
/* Hide nav buttons in topbar that are now in sidepanel — keep DOM nodes
   for any JS that references them, just visually remove. If sidepanel JS
   fails to load, these come back automatically. */
body.has-app-sidepanel #studio-open-btn,
body.has-app-sidepanel #admin-panel-btn,
body.has-app-sidepanel #tb-sep-admin{display:none !important;}
@media(max-width:900px){
  #app-sidepanel{display:none;}
}
/* TOPBAR */
#topbar{height:56px;background:var(--s0);border-bottom:1px solid var(--s4);
  display:flex;align-items:center;padding:0 16px;gap:8px;flex-shrink:0;
  z-index:300;box-shadow:var(--sh);overflow:hidden;}
@media(max-width:900px){
  #ql-btn-label,#ql-chevron{display:none;}
  
#ql-menu-wrap{display:none;} /* shown by applyRoleCapabilities when role has quicklinks */
#ql-btn{padding:5px 8px;}
  .tb-btn span{display:none;}
}
.logo{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;color:var(--t1);flex-shrink:0;letter-spacing:-.3px;max-width:240px;overflow:hidden;}
.logo svg{color:var(--blue);}
.tb-sep{width:1px;height:28px;background:var(--s4);}
.status-chip{font-size:12px;font-weight:500;padding:4px 10px;border-radius:20px;white-space:nowrap;}
.sc-google{background:var(--blueL);color:var(--blue);border:1px solid #c5d8fb;}
.sc-err{background:var(--redL);color:var(--red);border:1px solid #fac9c6;}
.sc-idle{background:var(--s2);color:var(--t3);border:1px solid var(--s4);}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
#stats-chips{display:none;align-items:center;gap:6px;}
.stat-chip{font-size:12px;padding:4px 10px;border-radius:20px;border:1px solid var(--s4);background:var(--s1);color:var(--t2);display:flex;align-items:center;gap:4px;}
.stat-chip strong{color:var(--blue);font-weight:600;}
/* Topbar button + Dropdown + QL panel styles below */
.tb-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;border:1.5px solid var(--s4);background:var(--s0);color:var(--t2);font-size:12px;font-weight:600;line-height:1.4;cursor:pointer;white-space:nowrap;transition:all .15s;flex-shrink:0;}
.tb-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blueL);}
.tb-btn.active{border-color:var(--blue);color:var(--blue);background:var(--blueL);}
.tb-btn.success{border-color:#34a853;color:#34a853;background:#e6f4ea;}
.tb-btn.danger:hover{border-color:var(--red);color:var(--red);background:var(--redL);}
/* LAYOUT */
#main{flex:1;display:flex;overflow:hidden;}
/* SIDE */
#side{width:var(--panel);background:var(--s0);border-right:1px solid var(--s4);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;z-index:10;transition:width .25s cubic-bezier(.4,0,.2,1);order:-1;min-width:0;}
/* TABS */
#tab-nav{display:flex;border-bottom:2px solid var(--s3);background:var(--s0);flex-shrink:0;}
.tab-btn{flex:1;padding:10px 4px;font-size:13px;font-weight:500;color:var(--t3);border:none;background:transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:all .18s;border-bottom:2px solid transparent;margin-bottom:-2px;min-width:0;overflow:hidden;}
.tab-btn:hover{color:var(--t2);background:var(--s1);}
.tab-btn:hover .tab-glyph{ transform:scale(1.12); }
.tab-btn.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:600;background:var(--s1);}
/* 106f8: colorful 3D emoji glyphs for the right-panel tabs — Files /
   Filter / Results / Insights / COS / Help. Bumped from the 14px SVG
   to a 24px emoji glyph so the tabs feel as substantial as the rest
   of the SaaS-standard UI. */
.tab-glyph{
  font-size:24px; line-height:1;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji','EmojiOne Color',sans-serif;
  font-variant-emoji:emoji;
  display:inline-flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.15));
  transition:transform .12s;
  user-select:none;
}
.tab-pane{display:none!important;flex-direction:column;flex:1;overflow:hidden;}
.tab-pane.active{display:flex!important;flex:1;min-height:0;}
/* FIELD LABEL */
.fl{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--t3);margin-bottom:5px;}
/* FIELD SELECT */
.fsel{width:100%;padding:8px 32px 8px 10px;border:1.5px solid var(--s4);border-radius:8px;background:var(--s0);color:var(--t1);font-family:var(--font);font-size:13px;outline:none;cursor:pointer;transition:border-color .18s;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;}
.fsel:focus{border-color:var(--blue);}
/* ─── TAB: DATA ─── */
#tab-data{overflow-y:auto;padding:0;}
#tab-data::-webkit-scrollbar{width:4px;}
#tab-data::-webkit-scrollbar-thumb{background:var(--s3);border-radius:2px;}
/* Add file zone */
#add-zone{margin:14px;border:2px dashed var(--s4);border-radius:var(--r);padding:16px;text-align:center;cursor:pointer;transition:all .2s;position:relative;background:var(--s1);}
#add-zone:hover,#add-zone.dov{border-color:var(--blue);background:var(--blueL);}
#add-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;}
.dz-icon{font-size:22px;margin-bottom:6px;}
.dz-text{font-size:13px;color:var(--t2);line-height:1.5;}
.dz-text strong{color:var(--blue);}
/* Dataset cards */
#ds-list{display:flex;flex-direction:column;gap:0;padding:0 14px 14px;}
.ds-card{border:1.5px solid var(--s4);border-radius:var(--r);overflow:hidden;margin-bottom:10px;transition:border-color .18s;}
.stage-card:last-child{margin-bottom:0}
.stage-card .ds-btn{display:inline-flex;align-items:center;gap:4px;}
.ds-card.ds-active{border-color:var(--blue);}
.ds-header{display:flex;align-items:center;gap:8px;padding:9px 11px;background:var(--s1);cursor:pointer;user-select:none;}
.ds-swatch{width:12px;height:12px;border-radius:50%;flex-shrink:0;}
.ds-name{flex:1;font-size:12px;font-weight:600;color:var(--t1);overflow:hidden;min-width:0;;}
.ds-meta{font-size:11px;color:var(--t3);white-space:nowrap;flex-shrink:0;}
.ds-vis{background:none;border:none;cursor:pointer;color:var(--t3);padding:2px 4px;border-radius:4px;font-size:13px;transition:color .18s;}
.ds-vis:hover{color:var(--t1);}
.ds-del{background:none;border:none;cursor:pointer;color:var(--t3);padding:2px 4px;border-radius:4px;font-size:13px;transition:color .18s;}
.ds-del:hover{color:var(--red);}
.ds-body{padding:10px 11px;display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--s3);}
.ds-body.hidden{display:none;}
.multi-toggle{font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;border:1px solid var(--blue);background:var(--blueL);color:var(--blue);cursor:pointer;letter-spacing:.4px;}
.multi-toggle.on{border-color:var(--teal);background:var(--tealL);color:var(--teal);}
.multi-col-list{border:1.5px solid var(--s4);border-radius:20px;padding:5px;background:var(--s1);max-height:140px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;}
.mc-row{display:flex;align-items:center;gap:7px;padding:3px 5px;border-radius:4px;cursor:pointer;font-size:12px;color:var(--t1);}
.mc-row:hover{background:var(--blueL);}
.mc-row input{width:13px;height:13px;accent-color:var(--blue);cursor:pointer;flex-shrink:0;}
.multi-preview{padding:5px 8px;background:var(--blueL);border-radius:20px;font-size:12px;color:var(--blue);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.geo-btn{width:100%;padding:9px;background:var(--blue);color:#fff;font-family:var(--font);font-size:13px;font-weight:600;border:none;border-radius:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .2s;}
.geo-btn:hover{background:var(--blue2);}
.pgwrap{display:none;}
.pgout{background:var(--s3);border-radius:99px;height:5px;overflow:hidden;margin-bottom:4px;}
.pgin{height:100%;background:linear-gradient(90deg,var(--blue),var(--teal));border-radius:99px;width:0%;transition:width .3s;}
.pgtxt{font-size:12px;font-family:var(--mono);color:var(--t3);text-align:center;}
.nom-note{font-size:12px;color:#7a5c00;background:var(--yellowL);border:1px solid #fdd663;border-radius:20px;padding:6px 8px;line-height:1.5;display:none;}
/* ─── TAB: FILTER ─── */
#tab-filter{padding:0;gap:0;overflow-y:auto;flex:1;min-height:0;}
.filter-section{border-bottom:1px solid var(--s3);overflow:hidden;}
.fs-header{display:flex;align-items:center;gap:8px;padding:12px 14px;cursor:pointer;user-select:none;transition:background .15s;min-height:44px;}
.fs-header:hover{background:var(--s2);}
.fs-header.always-open{cursor:default;}
.fs-header.always-open:hover{background:transparent;}
.fs-chevron{margin-left:auto;color:var(--t3);transition:transform .22s cubic-bezier(.4,0,.2,1);flex-shrink:0;}
.fs-header.open .fs-chevron{transform:rotate(180deg);}
.fs-body{display:block;padding:4px 10px 10px 10px;}
/* ── GROUP BY COLOR SLOTS ── */
.group-row.gb-active-row{background:var(--blueL);border-radius:20px;outline:1.5px solid var(--blue);outline-offset:-1px;}
.group-row.gb-active-row label{color:var(--blue);font-weight:600;}
.fs-body.collapsed{display:none;}
.fs-section{border-bottom:1px solid var(--s3);flex-shrink:0;}
.fs-section:last-child{border-bottom:none;}
.filter-section + .filter-section{margin-top:0;}
/* badge on section headers showing active filter count */
.fs-badge{font-size:11px;font-weight:700;padding:1px 7px;border-radius:10px;background:var(--blue);color:#fff;min-width:18px;text-align:center;line-height:17px;}
.fs-badge.hidden{display:none;}
.fl-hint{font-size:12px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--t3);display:block;margin-top:1px;}
/* Layer vis toggles in filter tab */
.layer-vis-grid{display:flex;flex-direction:column;gap:4px;}
.lv-row{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:20px;cursor:pointer;border:1px solid var(--s3);background:var(--s1);transition:all .15s;user-select:none;}
.lv-row:hover{border-color:var(--blue);background:var(--blueL);}
.lv-row.on{border-color:currentColor;background:color-mix(in srgb, currentColor 8%, transparent);}
[data-theme="dark"] .lv-row.on{background:color-mix(in srgb, currentColor 12%, transparent);}
[data-theme="dark"] .lv-row{background:var(--s1);border-color:var(--s3);}
.lv-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.lv-label{flex:1;font-size:12px;font-weight:500;color:var(--t1);}
.lv-count{font-size:12px;font-family:var(--mono);color:var(--t3);background:var(--s2);padding:1px 6px;border-radius:10px;}
.lv-eye{font-size:14px;line-height:1;}
/* Results layer pills */
.rpill{font-size:12px;font-weight:500;padding:3px 9px;border-radius:20px;border:1.5px solid var(--s4);background:var(--s0);color:var(--t2);cursor:pointer;display:flex;align-items:center;gap:4px;transition:all .15s;}
.rpill:hover{border-color:var(--blue);color:var(--blue);}
.rpill.active{border-color:var(--blue);background:var(--blueL);color:var(--blue);font-weight:600;}
#tab-filter::-webkit-scrollbar{width:4px;}
#tab-filter::-webkit-scrollbar-thumb{background:var(--s3);border-radius:2px;}
#srch{width:100%;padding:9px 12px 9px 34px;border:1.5px solid var(--s4);border-radius:var(--r);background:var(--s0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 10px center;color:var(--t1);font-family:var(--font);font-size:13px;outline:none;transition:border-color .18s;}
#srch:focus{border-color:var(--blue);}
#srch::placeholder{color:var(--t3);}
.filter-card{background:var(--s1);border:1px solid var(--s3);border-radius:var(--r);padding:11px;}
.filter-grid{display:flex;flex-direction:column;gap:8px;}
.f-item{display:flex;flex-direction:column;gap:3px;}
.f-item label{font-size:12px;color:var(--t2);font-weight:500;}
.group-row{display:flex;align-items:center;gap:10px;}
.group-row label{font-size:13px;color:var(--t2);font-weight:500;white-space:nowrap;}
.no-filters{font-size:13px;color:var(--t3);text-align:center;padding:16px 0;font-style:italic;}
/* ─── TAB: RESULTS ─── */
#tab-results{flex:1;overflow:hidden;flex-direction:column;display:flex;min-height:0;}
#results-header{padding:10px 14px;border-bottom:1px solid var(--s3);display:flex;justify-content:space-between;align-items:center;background:var(--s0);flex-shrink:0;}
#results-header .rh-left{font-size:13px;font-weight:600;color:var(--t2);}
#rcnt-badge{background:var(--blue);color:#fff;font-size:12px;font-weight:700;padding:2px 9px;border-radius:12px;}
#rlist{flex:1;overflow-y:auto;padding:8px;background:var(--s1);min-height:0;}
#rlist::-webkit-scrollbar{width:5px;}
#rlist::-webkit-scrollbar-thumb{background:var(--s4);border-radius:3px;}
.rcard{background:var(--s0);border:1px solid var(--s3);border-radius:var(--r);padding:10px 12px;margin-bottom:7px;cursor:pointer;transition:all .18s;box-shadow:0 1px 2px rgba(0,0,0,.05);}
.rcard:hover{border-color:var(--blue);box-shadow:0 2px 8px rgba(26,115,232,.1);transform:translateY(-1px);}
.rcard.active{border-color:var(--blue);background:var(--blueL);}
.rcard-header{display:flex;align-items:flex-start;gap:8px;margin-bottom:5px;}
.rcard-pin{flex-shrink:0;margin-top:1px;}
.rcard-title{font-size:13px;font-weight:600;color:var(--t1);line-height:1.35;flex:1;}
.rcard-src{font-size:11px;font-weight:600;padding:1px 6px;border-radius:10px;white-space:nowrap;flex-shrink:0;margin-top:2px;}
.rcard-fields{border-top:1px solid var(--s3);padding-top:6px;display:flex;flex-direction:column;gap:3px;}
/* 106fi: match the tour popup aesthetic — fixed-width label column,
   left-aligned labels, ellipsis for very long ones. Hover any label
   to see the full text via title attribute. */
.rcard-row{
  display:grid;
  grid-template-columns:115px 1fr;
  column-gap:10px;
  margin-bottom:5px;
  font-size:12px;
  line-height:1.4;
  align-items:baseline;
}
.rcard-key{color:var(--t3);font-weight:600;font-size:11px;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rcard-val{color:var(--t1);word-break:break-word;min-width:0;}
.rcard-actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px;padding-top:6px;border-top:1px solid var(--s3);}
@media(max-width:767px){
  .rcard-actions .popup-action-btn,.rcard-actions .ff-jobs-btn{
    font-size:12px;padding:6px 10px;flex:1;justify-content:center;min-width:70px;
  }
}
.rcard-geo{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:11px;font-family:var(--mono);padding:2px 7px;border-radius:20px;}
.rcard-geo.ok{background:var(--greenL);color:var(--green);}
.rcard-geo.bad{background:var(--redL);color:var(--red);}
.rlist-empty{text-align:center;padding:36px 20px;font-size:13px;color:var(--t3);}
/* MAP */
#mapwrap{flex:1;position:relative;background:var(--s2);order:1;}
#map{width:100%;height:100%;}
#overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f8f9fa;z-index:5;gap:12px;}
#overlay.off{display:none;}
.ov-icon{font-size:48px;opacity:.2;}
.ov-msg{font-size:16px;font-weight:500;color:var(--t2);}
.ov-sub{font-size:13px;color:var(--t3);}
#mtbar{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:6px;z-index:20;}
.mbtn{background:var(--s0);border:1px solid var(--s4);border-radius:20px;color:var(--t2);width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;transition:all .18s;box-shadow:var(--sh);}
.mbtn:hover{border-color:var(--blue);color:var(--blue);background:var(--blueL);}
.mbtn.on{background:var(--blue);color:#fff;border-color:var(--blue);}
#legend{position:absolute;bottom:24px;right:12px;background:var(--s0);border:1px solid var(--s4);border-radius:var(--r);padding:11px 13px;z-index:20;max-width:200px;display:none;box-shadow:var(--sh2);}
#ltitle{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--t3);margin-bottom:7px;}
.lg-item{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-size:12px;color:var(--t1);}
.lg-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;}
/* Leaflet popup */
.leaflet-popup-content-wrapper{background:var(--s0)!important;border:1px solid var(--s4)!important;border-radius:var(--r)!important;box-shadow:var(--sh2)!important;padding:0!important;}
.leaflet-popup-tip{background:var(--s0)!important;}
.leaflet-popup-content{margin:0!important;font-family:var(--font)!important;color:var(--t1)!important;}
/* Google InfoWindow — strip ALL chrome/padding/header space */
.gm-style-iw{padding:0!important;border-radius:var(--r)!important;box-shadow:var(--sh2)!important;overflow:visible!important;}
.gm-style-iw-d{overflow-y:auto!important;overflow-x:hidden!important;padding:0!important;max-height:360px!important;}
.gm-style-iw-c{padding:0!important;border-radius:var(--r)!important;overflow:hidden!important;background:var(--s0)!important;}
.gm-style-iw-t::after{background:var(--s0)!important;}
.gm-style-iw-chr{display:none!important;}
.gm-ui-hover-effect{
  top:6px!important;right:6px!important;opacity:.7;
  background:var(--s2)!important;border-radius:50%!important;
  width:22px!important;height:22px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  z-index:10!important;
}
.gm-ui-hover-effect>span{background-color:var(--t2)!important;width:12px!important;height:12px!important;}
.gm-ui-hover-effect:hover{opacity:1;background:var(--redL)!important;}
.gm-ui-hover-effect:hover>span{background-color:var(--red)!important;}
/* Popup content — uses CSS variables so it responds to dark theme */
.popup-inner{
  padding:12px 14px;min-width:210px;max-width:290px;
  /* scrolling owned by Google's .gm-style-iw-d to prevent nested scrollbars */
  background:var(--s0);color:var(--t1);font-family:var(--font);
}
.popup-inner::-webkit-scrollbar{width:4px;}
.popup-inner::-webkit-scrollbar-thumb{background:var(--s4);border-radius:2px;}
/* 106fe: popup data layout rewritten as a 2-col CSS grid so labels and
   values align cleanly down the column. Old flex layout had labels
   capped at 95px which cramped longer field names; now the label column
   sizes to the longest label (max-content) up to 120px, then truncates,
   and the value column flows naturally. Each row also gets a subtle
   baseline gap so multi-line values don't collide with the next row. */
.popup-title{font-size:13px;font-weight:700;color:var(--blue);margin-bottom:8px;padding-bottom:7px;border-bottom:1px solid var(--s3);line-height:1.3;}
.popup-row{
  display:grid;
  grid-template-columns:110px 1fr;
  column-gap:10px;
  row-gap:0;
  margin-bottom:5px;
  font-size:12px;
  line-height:1.4;
  align-items:baseline;
}
.popup-key{
  color:var(--t3);
  font-weight:600;
  font-size:11px;
  letter-spacing:.2px;
  text-transform:capitalize;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  /* 106fi: removed text-align:right + max-content sizing — matches the
     tour demo popup look (left-aligned labels in a fixed column).
     Long labels truncate with ellipsis; the full label shows on hover
     via the title attribute that buildPopup adds at render. */
}
.popup-val{color:var(--t1);word-break:break-word;font-size:12px;min-width:0;}
.popup-coords{font-size:11px;font-family:var(--mono);color:var(--t3);margin-top:6px;padding-top:6px;border-top:1px solid var(--s3);}
.popup-src{font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px;display:inline-block;margin-bottom:6px;}
/* Service popup tabs */
.svc-pop-tabs .svc-pop-tab:hover{background:var(--s2)!important;}
.svc-pop-tabs .svc-pop-tab:focus{outline:none;}
.svc-pop-tabs .svc-pop-pane{max-height:320px;overflow-y:auto;}
.svc-pop-tabs .svc-pop-pane::-webkit-scrollbar{width:4px;}
.svc-pop-tabs .svc-pop-pane::-webkit-scrollbar-thumb{background:var(--s4);border-radius:2px;}
/* Service card tabs (Results panel) */
.svc-card-tabs{margin-top:4px;}
.svc-card-tabbar{display:flex;gap:2px;border-bottom:1px solid var(--s3);margin-bottom:5px;}
.svc-card-tab{flex:1;background:transparent;border:none;border-bottom:2px solid transparent;padding:5px 6px;font-size:11px;font-weight:500;color:var(--t3);cursor:pointer;white-space:nowrap;text-align:center;transition:color .15s,border-color .15s;}
.svc-card-tab:hover{color:var(--t2);}
.svc-card-tab.active{color:var(--t1);font-weight:600;border-bottom-color:var(--blue);}
.svc-card-tab:focus{outline:none;}
.svc-card-pane{max-height:220px;overflow-y:auto;}
.svc-card-pane::-webkit-scrollbar{width:4px;}
.svc-card-pane::-webkit-scrollbar-thumb{background:var(--s4);border-radius:2px;}
/* Dark theme: force popup action buttons to use variables */
[data-theme="dark"] .popup-action-btn{
  background:var(--s2)!important;color:var(--t2)!important;border-color:var(--s4)!important;
}
[data-theme="dark"] .popup-action-btn:hover{
  background:var(--blue)!important;color:#fff!important;border-color:var(--blue)!important;
}
[data-theme="dark"] .popup-action-btn.directions{
  background:var(--greenL)!important;color:var(--green)!important;border-color:var(--green)!important;
}
[data-theme="dark"] .popup-action-btn.streetview{
  background:var(--blueL)!important;color:var(--blue)!important;border-color:var(--blue)!important;
}
/* Dark: popup close button */
[data-theme="dark"] .popup-close-btn{
  background:var(--s3)!important;color:var(--t2)!important;
}
[data-theme="dark"] .popup-close-btn:hover{
  background:var(--red)!important;color:#fff!important;
}
/* TOAST */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--t1);color:#fff;border-radius:var(--r);padding:9px 18px;font-size:13px;font-weight:500;z-index:9999;pointer-events:none;transition:transform .3s cubic-bezier(.22,1,.36,1);white-space:nowrap;box-shadow:0 6px 24px rgba(0,0,0,.25);}
#toast.show{transform:translateX(-50%) translateY(0);}
#toast.success{background:#188038;}
#toast.error{background:var(--red);}
#toast.warn{background:#b06000;}
#toast.info{background:var(--blue);}
/* CSP BANNER */
#csp-banner{display:none;position:fixed;inset:0;z-index:99999;background:rgba(248,249,250,.95);backdrop-filter:blur(8px);align-items:center;justify-content:center;}
.csp-box{background:var(--s0);border:1px solid var(--s4);border-radius:16px;padding:36px 40px;max-width:520px;width:92%;box-shadow:0 20px 60px rgba(0,0,0,.15);text-align:center;}
.csp-icon{font-size:44px;margin-bottom:14px;}
.csp-box h2{font-size:20px;font-weight:700;color:var(--t1);margin-bottom:10px;}
.csp-box p{font-size:14px;color:var(--t2);line-height:1.7;margin-bottom:6px;}
.csp-steps{background:var(--s1);border:1px solid var(--s3);border-radius:var(--r);padding:16px 20px;margin:18px 0;text-align:left;}
.csp-steps li{font-size:13px;color:var(--t1);margin-bottom:8px;list-style:none;display:flex;gap:10px;align-items:flex-start;line-height:1.5;}
.step-n{background:var(--blue);color:#fff;font-size:12px;font-weight:700;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.csp-note{font-size:12px;color:var(--t3);font-style:italic;}
#csp-ok{background:var(--blue);color:#fff;border:none;border-radius:var(--r);padding:11px 28px;font-size:14px;font-weight:600;cursor:pointer;margin-top:16px;}
#csp-ok:hover{background:var(--blue2);}
/* ════════════════════════════════════════════
   RESPONSIVE — Mobile-first additions
   ════════════════════════════════════════════ */
/* Panel toggle button — visible on ALL devices */
#panel-toggle {
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:12px;
  border:none; background:transparent;
  cursor:pointer; flex-shrink:0; transition:transform .18s, color .15s; color:var(--t2);
  box-shadow:none;
}
#panel-toggle:hover{color:var(--blue);background:transparent;transform:translateY(-2px);}
#panel-toggle.open{background:transparent;color:var(--blue);}
/* Backdrop (mobile/tablet when panel open) */
#backdrop {
  display:none; position:fixed; inset:0; background:rgba(32,33,36,.45);
  z-index:149; backdrop-filter:blur(2px);
}
#backdrop.show{display:block;}
/* FAB — floating action button on map for mobile */
#fab {
  display:none; position:absolute; bottom:80px; left:50%;
  transform:translateX(-50%); z-index:20;
  background:var(--blue); color:#fff; border:none; border-radius:24px;
  padding:12px 20px; font-family:var(--font); font-size:14px; font-weight:600;
  cursor:pointer; box-shadow:0 4px 16px rgba(26,115,232,.45);
  display:none; align-items:center; gap:8px; white-space:nowrap;
  transition:all .2s;
}
#fab:hover{background:var(--blue2);box-shadow:0 6px 20px rgba(26,115,232,.55);}
/* Drag handle (mobile bottom sheet) */
#drag-handle {
  display:none; justify-content:center; padding:10px 0 4px;
  cursor:grab; flex-shrink:0; background:var(--s0);
  border-radius:16px 16px 0 0;
}
#drag-handle-bar {
  width:40px; height:4px; background:var(--s4); border-radius:2px;
}
/* ── TABLET: 768px – 1199px ── */
/* Search inputs inside color-group slots */
.tb-btn.active{border-color:var(--blue);color:var(--blue);background:var(--blueL);}
.tb-btn.danger:hover{border-color:var(--red);color:var(--red);background:var(--redL);}
/* COS tab type buttons */
.cos-type-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 13px;border-radius:20px;border:1.5px solid var(--s4);background:var(--s0);color:var(--t2);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap;}
.cos-type-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blueL);}
.cos-type-btn.active{border-color:var(--blue);color:var(--blue);background:var(--blueL);}
/* Results tab selects */
.u-select-arrow{-webkit-appearance:none;appearance:none;padding:5px 28px 5px 12px;border-radius:8px;border:1.5px solid var(--s4);background:var(--s0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 10px center;color:var(--t1);font-size:12px;font-weight:500;cursor:pointer;outline:none;transition:border-color .15s;}
.u-select-arrow:focus{border-color:var(--blue);}
/* Color group clear buttons */
/* Help search input */
#help-search-tab{width:100%;padding:7px 14px 7px 36px;border-radius:8px;border:1.5px solid var(--s4);background:var(--s0);color:var(--t1);font-size:13px;outline:none;transition:border-color .15s;}
#help-search-tab:focus{border-color:var(--blue);}
/* Admin form inputs — text, email, password, number */
#users-search,#add-user-email,#add-user-name,
#new-lu-username,#new-lu-name,#new-lu-email,#new-lu-password,
#new-role-id,#new-role-label,
#db-pass,#smtp-user,#smtp-pass,#smtp-from-name,#smtp-from-email {
  border-radius:20px;border:1.5px solid var(--s4);background:var(--s0);
  color:var(--t1);padding:6px 14px;font-size:13px;outline:none;
  transition:border-color .15s;width:100%;box-sizing:border-box;
}
#users-search:focus,#add-user-email:focus,#add-user-name:focus,
#new-lu-username:focus,#new-lu-name:focus,#new-lu-email:focus,
#new-lu-password:focus,#new-role-id:focus,#new-role-label:focus,
#db-pass:focus,#smtp-user:focus,#smtp-pass:focus,#smtp-from-name:focus,#smtp-from-email:focus {
  border-color:var(--blue);
}
/* DB / SMTP monospace inputs */
.u-mono,#db-host,#db-name,#db-user,#smtp-host,#smtp-port {
  border-radius:20px;border:1.5px solid var(--s4);background:var(--s0);
  color:var(--t1);padding:6px 14px;font-size:13px;outline:none;
  font-family:var(--mono,monospace);transition:border-color .15s;
  width:100%;box-sizing:border-box;
}
.u-mono:focus,#db-host:focus,#db-name:focus,#db-user:focus,
#smtp-host:focus,#smtp-port:focus{border-color:var(--blue);}
/* Login form eye button */
#login-pw-eye{border-radius:50%;border:none;background:transparent;cursor:pointer;padding:4px;color:var(--t3);transition:color .15s;display:flex;align-items:center;justify-content:center;}
#login-pw-eye:hover{color:var(--t1);}
/* Continue as guest link-button */
button[onclick*="continueAsGuest"],button[onclick*="guest"]{
  border-radius:20px;border:1px solid var(--s4) !important;
  padding:4px 12px !important;transition:all .15s;
}
/* Color group slot collapse CSS */
.audit-badge.login{background:#e8f0fe;color:#1a73e8;}
.audit-badge.admin{background:#fce8e6;color:#d93025;}
.audit-badge.data{background:#e6f4ea;color:#188038;}
.audit-badge.settings{background:#fef7e0;color:#e37400;}
.audit-badge.error{background:#fce8e6;color:#d93025;}
.audit-badge{background:var(--s2);color:var(--t2);}
/* Audit table rows */
#audit-log-body tr{border-bottom:1px solid var(--s3);transition:background .1s;}
#audit-log-body tr:hover{background:var(--s1);}
#audit-log-body td{padding:9px 12px;vertical-align:top;}
/* Role cards */
.role-body{padding:12px !important;display:flex !important;flex-direction:column;gap:10px;}
/* ─────────────────────────────────────────────────────────────
   COLOR GROUPS — filter panel (gb-*)
───────────────────────────────────────────────────────────────*/
.gb-header-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px 2px 8px;font-size:11px;font-weight:700;letter-spacing:.7px;color:var(--t3);text-transform:uppercase;}
.gb-ds-sel,.gb-col-sel{font-size:12px;border-radius:8px;border:1.5px solid var(--s4);background-color:var(--s0);background-repeat:no-repeat;background-position:right 8px center;color:var(--t1);padding:4px 24px 4px 8px;width:100%;outline:none;}
.gb-ds-sel:focus,.gb-col-sel:focus{border-color:var(--blue);}
.gb-chevron{color:var(--t3);transition:transform .2s;flex-shrink:0;}
.gb-slot.collapsed 
.gb-ctrl-btn{display:inline-flex !important;align-items:center !important;justify-content:center !important;padding:4px 8px;border-radius:20px !important;border:1.5px solid var(--s4);background:var(--s0);color:var(--t2);font-size:12px;cursor:pointer;transition:all .12s;flex-shrink:0;height:28px;min-width:28px;line-height:1;box-shadow:0 1px 2px rgba(0,0,0,.10);}
.gb-ctrl-btn:hover{background:var(--s2);border-color:var(--s4);box-shadow:0 2px 5px rgba(0,0,0,.16);transform:translateY(-1px);}
.gb-ctrl-btn:active{transform:translateY(0);box-shadow:0 1px 1px rgba(0,0,0,.12);}
.gb-ctrl-btn svg{display:block;}
/* 106em: Show all / Hide all are now flat colorful emoji icons (matching the
   side-menu icon style), not bordered 3D buttons. The Invert action was removed. */
.gb-vis-btn{background:none;border:none;cursor:pointer;font-size:18px;line-height:1;padding:2px 4px;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.35));transition:transform .12s ease;flex-shrink:0;}
.gb-vis-btn:hover{transform:scale(1.18);}
.gb-vis-btn:active{transform:scale(1.02);}
.gb-value-list{max-height:160px;overflow-y:auto;display:flex;flex-direction:column;gap:1px;}
.gb-val-row{display:flex;align-items:center;gap:7px;padding:5px 4px;border-radius:6px;cursor:pointer;transition:background .1s;}
.gb-val-row:hover{background:var(--s2);}
.gb-val-row.hidden-grp{opacity:.4;}
.gb-val-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,.1);}
.gb-val-label{flex:1;min-width:0;font-size:12px;font-weight:500;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gb-val-count{font-size:11px;font-family:var(--mono);color:var(--t3);background:var(--s2);padding:1px 6px;border-radius:10px;}
.gb-val-eye{font-size:12px;line-height:1;flex-shrink:0;color:var(--t3);}
.gb-value-summary{font-size:12px;color:var(--t3);text-align:center;padding:5px 0 2px;}
.gb-active-row{background:var(--blueL);}
.gb-active-row .gb-val-label{color:var(--blue);font-weight:600;}
#gb-clear-all-btn{display:none;width:100%;padding:7px 14px;border-radius:20px;border:1.5px solid var(--s4);background:var(--s0);color:var(--t3);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;margin-top:6px;}
#gb-clear-all-btn:hover{border-color:var(--red);color:var(--red);background:var(--redL);}
#gb-clear-all-btn.visible{display:block;}
/* ── Missing admin layout helpers ── */
.as-field-2{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.u-label{font-size:13px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.4px;margin-bottom:1px;}
.u-muted-xs{font-size:11px;color:var(--t3);line-height:1.4;margin-top:2px;}
.as-field-row{display:flex;gap:8px;align-items:center;margin-top:4px;}
.u-col-gap8{display:flex;flex-direction:column;gap:8px;}
.u-sub-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--t3);margin-bottom:6px;}
/* ── Security inputs ── */
#cur-pw,#new-pw,#conf-pw,
input[placeholder="Current password"],
input[placeholder="New password (min 8 chars)"],
input[placeholder="Confirm new password"]{
  padding:8px 14px;border-radius:8px;border:1.5px solid var(--s4);
  background:var(--s0);color:var(--t1);font-size:13px;outline:none;
  transition:border-color .15s;width:100%;box-sizing:border-box;}
input[placeholder="Current password"]:focus,
input[placeholder="New password (min 8 chars)"]:focus,
input[placeholder="Confirm new password"]:focus{border-color:var(--blue);}
/* ── Audit log table ── */
#audit-log-body tr{border-bottom:1px solid var(--s3);}
#audit-log-body tr:last-child{border-bottom:none;}
#audit-log-body tr:hover{background:var(--s1);}
#audit-log-body td{padding:9px 12px;vertical-align:top;font-size:12px;color:var(--t2);}
.audit-badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;background:var(--s2);color:var(--t2);}
.audit-badge.login{background:#e8f0fe;color:#1a73e8;}
.audit-badge.admin{background:#fce8e6;color:#d93025;}
.audit-badge.data{background:#e6f4ea;color:#188038;}
.audit-badge.settings{background:#fef7e0;color:#e37400;}
.audit-badge.error{background:#fce8e6;color:#d93025;}
/* ── QL panel launcher ── */
#ql-panel-close:hover{background:var(--redL);color:var(--red);}
/* ─── Admin: Role tabs ─────────────────────────────────────────────── */
.role-tab-bar{display:flex;flex-wrap:wrap;gap:4px;border-bottom:2px solid var(--s3);margin-bottom:16px;padding-bottom:0;}
.role-tab{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:none;background:transparent;
  color:var(--t3);font-size:12px;font-weight:600;cursor:pointer;border-radius:8px 8px 0 0;
  border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;white-space:nowrap;}
.role-tab:hover{background:var(--s2);color:var(--t1);}
.role-tab.active{color:var(--blue);border-bottom-color:var(--blue);background:var(--s0);}
.role-tab-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.role-tab-label{overflow:hidden;text-overflow:ellipsis;max-width:90px;}
.role-tab-badge{font-size:11px;font-weight:700;background:var(--blue);color:#fff;
  padding:1px 5px;border-radius:8px;letter-spacing:.3px;}
.role-pane-wrap{min-height:180px;}
.role-pane{display:flex;flex-direction:column;gap:12px;animation:fadeIn .15s ease;}
.role-pane-section{display:flex;flex-direction:column;gap:6px;}
.role-pane-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--t3);}
.role-check-group{display:flex;flex-wrap:wrap;gap:6px;}
.role-check-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;
  border-radius:20px;border:1.5px solid var(--s4);background:var(--s0);
  font-size:12px;font-weight:500;cursor:pointer;transition:all .12s;color:var(--t2);}
.role-check-pill:has(input:checked){border-color:var(--blue);background:var(--blueL);color:var(--blue);}
.role-check-pill input{accent-color:var(--blue);cursor:pointer;}
.role-pane-actions{display:flex;gap:6px;align-items:center;padding-top:8px;border-top:1px solid var(--s3);flex-wrap:wrap;}
.role-default-toggle{display:flex;align-items:center;gap:5px;font-size:12px;cursor:pointer;color:var(--t2);}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* ── MOBILE: ≤ 767px ── */
/* ─── COLOR GROUP SLOTS ─────────────────────────────────────────── */
.gb-slot{
  border:1.5px solid var(--s3);border-radius:10px;
  margin-bottom:8px;overflow:hidden;background:var(--s0);
  transition:box-shadow .15s;
}
.gb-slot:last-of-type{margin-bottom:0;}
.gb-slot:focus-within{border-color:var(--blue);}
/* Slot header — grid: title | ds-sel | col-sel | summary | clear | chevron */
.gb-slot-header{
  display:flex;flex-wrap:nowrap;
  gap:4px;align-items:center;
  padding:6px 8px;cursor:pointer;
  min-height:36px;overflow:hidden;
}
.gb-slot-header .gb-ds-sel { flex:1;min-width:0; }
.gb-slot-header .gb-col-sel { flex:1;min-width:0; }
.gb-slot-header:hover{background:var(--s1);}
.gb-slot-header select{cursor:default;}
/* Title label — shown only when collapsed */
.gb-slot-title{
  display:none;
  font-size:12px;font-weight:600;color:var(--t2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Summary chip — shown when column selected */
.gb-slot-summary{
  font-size:12px;color:var(--blue);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Clear button */
.gb-slot-clear{
  display:none;align-items:center;gap:4px;
  padding:2px 8px;border-radius:20px;border:1.5px solid var(--s4);
  background:transparent;color:var(--t3);font-size:12px;cursor:pointer;
}
.gb-slot-clear:hover{border-color:var(--red);color:var(--red);background:var(--redL);}
.gb-slot-clear.visible{display:inline-flex;}
/* Chevron */
.gb-slot .gb-chevron{transition:transform .2s;flex-shrink:0;color:var(--t3);}
.gb-slot.collapsed .gb-chevron{transform:rotate(-90deg);}
/* Values panel */
.gb-slot-values{padding:0 10px 10px;border-top:1px solid var(--s3);}
.gb-slot-controls{display:flex;align-items:center;gap:5px;padding:8px 0 6px;flex-wrap:wrap;}
.gb-slot-controls input[type="text"]{
  flex:1;min-width:80px;padding:5px 10px;
  border-radius:20px;border:1.5px solid var(--s4);
  background:var(--s0);color:var(--t1);font-size:12px;
}
.gb-slot-controls input[type="text"]:focus{border-color:var(--blue);outline:none;}
/* ── COLLAPSED STATE ── */
.gb-slot.collapsed .gb-slot-header{
  padding:5px 10px;min-height:34px;
}
.gb-slot.collapsed .gb-slot-title { display:block; }
.gb-slot.collapsed .gb-ds-sel     { display:none; }
.gb-slot.collapsed .gb-col-sel    { display:none; }
.gb-slot.collapsed .gb-slot-values{ display:none !important; }
/* ═══════════════════════════════════════════════════════════════════
   ROLE-BASED VISIBILITY — ff-hide-* and is-guest body classes
   Applied by applyRoleCapabilities() and ffApply() based on role/flags
   ═══════════════════════════════════════════════════════════════════ */
/* Features */
body.ff-hide-agent      .ff-feature-agent,
body.ff-hide-agent      #agent-fab,
body.ff-hide-agent      #tn-agent                { display:none !important; }
body.ff-hide-insights   .ff-feature-insights,
body.ff-hide-insights   #tn-analysis             { display:none !important; }
body.ff-hide-streetview .ff-feature-streetview,
body.ff-hide-streetview .sv-btn                  { display:none !important; }
body.ff-hide-openmaps   .ff-feature-openmaps,
body.ff-hide-openmaps   .popup-action-btn.maps   { display:none !important; }
/* 106ef: COS Explorer tab (#tn-cos) decoupled from the findjobs feature flag.
   It's governed solely by the view_cos permission (body.no-view-cos) + is-guest.
   The findjobs feature now only controls the "Find Jobs" button on client pins
   (.ff-jobs-btn) and the findjobs feature elements — NOT the COS Explorer tab,
   which has its own dedicated permission in the role editor. */
body.ff-hide-findjobs   .ff-feature-findjobs,
body.ff-hide-findjobs   .ff-jobs-btn                { display:none !important; }
body.ff-hide-upload     .ff-feature-upload,
body.ff-hide-upload     #add-zone,
body.ff-hide-upload     .upload-drop-area,
body.ff-hide-upload     #upload-btn              { display:none !important; }
body.ff-hide-clients    #lr-clients,
body.ff-hide-clients    .lv-row[data-layer-key="clients"] { display:none !important; }
/* Results tab stays visible — it shows all layer results, not just uploaded files */
body.ff-hide-export     #xbtn                    { display:none !important; }
/* Layers — hide layer legend row and suppress map layer */
body.ff-hide-layer-primary  #lr-primary,
body.ff-hide-layer-primary  .lv-row[data-layer-key="primary"]  { display:none !important; }
body.ff-hide-layer-business #lr-business,
body.ff-hide-layer-business .lv-row[data-layer-key="business"] { display:none !important; }
body.ff-hide-layer-service  #lr-service,
body.ff-hide-layer-service  .lv-row[data-layer-key="service"]  { display:none !important; }
body.ff-hide-layer-caseload #lr-caseload,
body.ff-hide-layer-caseload .lv-row[data-layer-key="caseload"] { display:none !important; }
/* Guest — hide all interactive features, show read-only map */
body.is-guest .admin-only        { display:none !important; }
body.is-guest .signed-in-only    { display:none !important; }
body.role-loading .signed-in-only { display:none !important; }
body.is-guest #panel-toggle      { display:none !important; }
body.is-guest #xbtn              { display:none !important; }
body.is-guest #fab               { display:none !important; }
body.is-guest #ql-menu-wrap      { display:none !important; }
body.is-guest #tn-filter         { display:none !important; }
body.is-guest #tn-results        { display:none !important; }
body.is-guest #tn-analysis       { display:none !important; }
body.is-guest #tn-cos            { display:none !important; }
body.is-guest .ff-jobs-btn       { display:none !important; }
body.is-guest .rcard-actions     { display:none !important; }
body.is-guest #agent-fab         { display:none !important; }
body.is-guest #mobile-panel-fab  { display:none !important; }
body.is-guest #side              { display:none !important; }
body.is-guest #lr-clients        { display:none !important; }
body.is-guest #lr-caseload       { display:none !important; }
body.is-guest #mapwrap           { width:100% !important; }
/* Ship 106u: hide all navigation chrome for guest. Guests should see the
   read-only map only — no way to navigate to Studio or Admin sections.
   #sa-section is inside #layer-ctrl (NOT #side) so the #side hide above
   doesn't cover it; needs its own rule. */
body.is-guest #sa-section        { display:none !important; }
body.is-guest #app-sidepanel     { display:none !important; }
body.is-guest #mobile-tabbar     { display:none !important; }
/* When the left app sidepanel is hidden, reclaim its width so the map
   fills the full viewport. Overlays use --aps-w too but guests can't
   reach them anyway (sidepanel hidden, tabbar hidden). */
body.is-guest                    { --aps-w: 0 !important; }
@media (max-width:767px) {
  /* ── Ship G: Mobile UX refactor ──
     - Bottom tab bar (Map/Studio/Admin) at bottom of screen
     - Topbar hamburger opens section-specific left drawer
     - All sections use the same drawer pattern (no more bottom sheet) */
  /* Topbar */
  #topbar{padding:0 12px;gap:8px;height:52px;}
  .logo{font-size:15px;}
  .tb-sep{display:none;}
  #mstatus{display:none;}
  #stats-chips{display:none!important;}
  .tb-btn span{display:none;}
  .tb-btn{padding:8px 10px;}
  /* Map layout: full screen, content below topbar above tab bar */
  #main{position:relative;}
  #mapwrap{position:absolute;inset:0;}
  /* Section drawer pattern — same for Map's #side, Studio source list,
     Admin section sidebar. Slides in from left over content; hamburger
     in topbar toggles via togglePanel(). */
  #side {
    position:fixed; top:52px; bottom:56px;  /* below topbar, above tab bar */
    left:0;
    width:min(85vw, 320px) !important;
    border-right:1px solid var(--s4);
    border-top:none; border-radius:0;
    box-shadow:4px 0 16px rgba(0,0,0,.2);
    transform:translateX(-100%);
    transition:transform .22s cubic-bezier(.4,0,.2,1);
    z-index:150;
    overflow:hidden;
    background:var(--s0);
  }
  #side.mobile-open { transform:translateX(0); }
  /* Reset old bottom-sheet states — no longer used */
  #side.peek, #side.half, #side.full, #side.hidden-mobile {
    /* These classes may still be set by old code paths; ignore them
       in favor of the new mobile-open class. */
    transform:translateX(-100%);
    height:auto; bottom:56px;
  }
  #side.peek.mobile-open, #side.half.mobile-open, #side.full.mobile-open {
    transform:translateX(0);
  }
  /* Drag handle was for bottom sheet — hide on mobile drawer */
  #drag-handle{display:none !important;}
  /* Map FAB hidden on mobile — bottom tab bar handles section switching */
  #fab{display:none!important;}
  /* Map toolbar/legend stay near top-right; tab bar at bottom doesn't conflict */
  #mtbar{top:12px;bottom:auto;right:12px;}
  #legend{bottom:80px;right:12px;}  /* bumped up to avoid tab bar */
  /* Bigger tap targets for inputs */
  .fsel{padding:11px 32px 11px 10px;font-size:15px;}
  /* Color-group slot header: stop cramming both selects + chevron on one tight
     row — let them wrap so each select is comfortably wide and the expand
     chevron doesn't collide with the dropdown arrows. */
  .gb-slot-header{flex-wrap:wrap;}
  .gb-slot-header .gb-ds-sel,.gb-slot-header .gb-col-sel{flex:1 1 calc(50% - 22px);}
  #srch{padding:11px 12px 11px 36px;font-size:15px;}
  .geo-btn{padding:13px;font-size:15px;}
  .ds-vis,.ds-del{padding:6px 8px;font-size:16px;}
  .ds-header{padding:12px 13px;}
  .mc-row{padding:6px 7px;}
  #rlist{padding:8px;}
  .rcard{margin-bottom:10px;}
  .popup-inner{max-width:280px;}
  .popup-actions{gap:4px;}
  .popup-action-btn{font-size:11px;padding:4px 8px;}
  #overlay{z-index:5;}
}
/* ════════════════════════════════════════════════════════════════════════
   Ship G: Mobile bottom tab bar (replaces app sidepanel on phones)
   Hidden on desktop. At <768px, shown as fixed-position 56px-tall bar at
   the bottom of the viewport. Three icons (Map / Studio / Admin).
   ════════════════════════════════════════════════════════════════════════ */
#mobile-tabbar{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  height:56px;background:var(--s0);
  border-top:1px solid var(--s4);
  box-shadow:0 -2px 8px rgba(0,0,0,.06);
  z-index:10300;  /* Above all overlays (Studio 10000, Admin 9850) and sidepanel (10100) */
  flex-direction:row;align-items:stretch;
  padding-bottom:env(safe-area-inset-bottom, 0);  /* iPhone notch handling */
}
@media (max-width:767px){
  #mobile-tabbar{display:flex;}
  /* Content above tab bar gets 56px bottom padding so tab bar doesn't
     cover stuff. Body uses flex column so we adjust #main. */
  #main{padding-bottom:56px;}
  /* Overlays (Studio, Admin) shift up too. Use !important to override
     the inset:0 shorthand on their base rules. */
  body.has-app-sidepanel #studio-root,
  body.has-app-sidepanel #admin-settings-overlay{
    bottom:56px !important;
  }
}
.mtb-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:6px 4px;
  background:transparent;border:none;cursor:pointer;
  color:var(--t3);font-size:11px;font-weight:500;font-family:var(--font);
  transition:color .12s;
}
.mtb-item:hover, .mtb-item:focus{color:var(--t1);}
.mtb-item.active{color:var(--blue);font-weight:700;}
.mtb-icon{font-size:20px;line-height:1;}
.mtb-label{font-size:11px;letter-spacing:.2px;}
/* ── VERY SMALL: ≤ 380px ── */
@media (max-width:380px) {
  .logo{font-size:14px;}
  .tab-btn{font-size:11px;gap:2px;padding:8px 4px;}
  .tab-btn svg{width:12px;height:12px;}
  #fab{font-size:13px;padding:10px 16px;}
  .mtb-label{font-size:11px;}
  .mtb-icon{font-size:18px;}
}
/* Mobile modal */
@media(max-width:767px){}
/* ── DEFAULT SUMMARY NETWORK CARDS ── */
.an-net-card{background:var(--s0);border:1px solid var(--s3);border-radius:var(--r);padding:8px 10px;text-align:center;}
.an-net-num{font-size:20px;font-weight:700;color:var(--blue);line-height:1;}
.an-net-lbl{font-size:11px;color:var(--t3);margin-top:3px;font-weight:500;}
.an-net-sub{font-size:12px;color:var(--t2);margin-top:4px;}
/* ═══════════════════════════════════════════════════════════════════════
   LAYER CONTROL PANEL — map overlay
═══════════════════════════════════════════════════════════════════════ */
/* Base card */
#layer-ctrl {
  position:absolute;
  top:12px; left:12px; right:auto; bottom:auto;
  z-index:20;
  background:var(--s0);
  border:1px solid var(--s4);
  border-radius:10px;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  padding:8px 0 4px;
  min-width:170px;
  max-width:220px;
  max-height:calc(100vh - 80px);
  overflow-y:auto;
  font-family:var(--font);
  /* Ship 106u: thin custom scrollbar so the legend doesn't get the
     chunky default browser one. Falls back gracefully on browsers
     that don't support these (Firefox uses scrollbar-width). */
  scrollbar-width: thin;
  scrollbar-color: var(--s4) transparent;
}
#layer-ctrl::-webkit-scrollbar { width: 6px; }
#layer-ctrl::-webkit-scrollbar-track { background: transparent; }
#layer-ctrl::-webkit-scrollbar-thumb {
  background: var(--s4);
  border-radius: 3px;
}
#layer-ctrl::-webkit-scrollbar-thumb:hover { background: var(--t4); }
/* Drag handle */
#layer-ctrl-drag-handle {
  display:none;
  width:28px; height:3px;
  background:var(--s4);
  border-radius:2px;
  margin:0 auto 6px;
  cursor:grab;
  touch-action:none;
}
#layer-ctrl-drag-handle:active { cursor:grabbing; }
/* Title */
#layer-ctrl-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px 6px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.9px;
  color:var(--t3);
  border-bottom:1px solid var(--s3);
  margin-bottom:2px;
}
/* Collapse toggle */
#layer-ctrl-toggle {
  display:flex;
  align-items:center;
  justify-content:center;
  width:18px; height:18px;
  border:none; background:none;
  cursor:pointer; color:var(--t3);
  border-radius:4px; padding:0; flex-shrink:0;
}
#layer-ctrl-toggle:hover { color:var(--t1); background:var(--s2); }
#layer-ctrl-toggle svg { transition:transform .2s; }
#layer-ctrl.collapsed #layer-ctrl-toggle svg { transform:rotate(180deg); }
/* Collapsed */
#layer-ctrl.collapsed .layer-row { display:none; }
#layer-ctrl.collapsed #sa-section { display:none !important; }

/* Service Areas section — matches MAP LAYERS heading style + layer-row shape */
#sa-section {
  border-top:1px solid var(--s3);
  margin-top:6px;
  padding-top:6px;
}
#sa-section-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px 6px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.9px;
  color:var(--t3);
  margin-bottom:2px;
}
#sa-section-title #sa-draw-btn {
  background:none;
  border:1px solid var(--s4);
  color:var(--t2);
  cursor:pointer;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  padding:2px 6px;
  border-radius:3px;
  line-height:1.1;
}
#sa-section-title #sa-draw-btn:hover { color:var(--t1); background:var(--s2); }
#sa-empty {
  font-size:12px;
  color:var(--t3);
  padding:4px 10px 6px;
}
/* Layer rows */
.layer-row {
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px 10px;
  cursor:pointer;
  transition:background .12s;
  font-size:12px;
  color:var(--t1);
  font-weight:500;
  user-select:none;
}
.layer-row:hover { background:var(--s2); }
.layer-row.off { opacity:.45; }
/* Color/check dot */
.layer-check {
  width:10px; height:10px;
  border-radius:50%;
  border:2px solid currentColor;
  flex-shrink:0;
  position:relative;
  transition:all .15s;
}
.layer-check.checked::after {
  content:'';
  position:absolute;
  inset:2px;
  border-radius:50%;
  background:currentColor;
}
.layer-chk {
  width:10px; height:10px;
  border-radius:2px;
  border:2px solid var(--s4);
  flex-shrink:0;
  transition:all .15s;
}
.layer-row:not(.off) .layer-chk { border-color:var(--t2); background:var(--t2); }
/* Pin icon (SVG injected by JS) */
.layer-pin-icon {
  display:flex; align-items:center; justify-content:center;
  width:16px; height:16px; flex-shrink:0;
}
/* Layer name */
.layer-name {
  flex:1;
  font-size:12px;
  font-weight:500;
  color:var(--t1);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.3;
}
.layer-row.off .layer-name { color:var(--t3); }
/* Count badge */
.layer-count {
  font-size:11px;
  font-weight:600;
  color:var(--t3);
  background:var(--s2);
  padding:1px 5px;
  border-radius:8px;
  flex-shrink:0;
  min-width:18px;
  text-align:center;
  line-height:1.5;
}
.layer-row.off .layer-count { opacity:.5; }
/* ─── TABLET ─── */
@media (max-width:1024px) {
  #layer-ctrl { top:10px; left:10px; min-width:155px; }
}
/* ─── MOBILE ─── */
@media (max-width:767px) {
  #layer-ctrl {
    position:fixed;
    top:auto; bottom:calc(50vh + 56px);
    left:10px; right:auto;
    min-width:145px; max-width:195px;
    max-height:32vh; overflow-y:auto;
    border-radius:12px; padding:6px 0 2px;
    box-shadow:0 4px 20px rgba(0,0,0,.18);
  }
  #layer-ctrl-drag-handle { display:block; }
  .layer-row { padding:6px 10px; }
}
/* Semi-transparent backdrop behind the panel */
#ql-panel-backdrop {
  display: none;
  position: fixed; inset: 0;
  z-index: 10150;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(1px);
}
#ql-panel-backdrop.open { display: block; }
/* Panel container — slides in from the LEFT */
#ql-panel {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: min(480px, 90vw);
  z-index: 10200;
  display: flex;
  flex-direction: column;
  background: var(--s0);
  border-right: 1px solid var(--s4);
  box-shadow: 4px 0 40px rgba(0,0,0,.18);
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
#ql-panel.open    { transform: translateX(0); }
#ql-panel.collapsed {
  width: 48px !important;
  transform: translateX(0);
  border-right: 1px solid var(--s4);
}
#ql-panel.collapsed #ql-panel-header,
#ql-panel.collapsed #ql-panel-body { display: none; }
#ql-panel.collapsed #ql-panel-tab  { display: flex; }
/* Swipe handle — right edge, visual affordance */
#ql-panel-swipe-handle {
  position: absolute;
  top: 0; right: -1px; bottom: 0;
  width: 4px;
  cursor: ew-resize;
  background: transparent;
}
#ql-panel-swipe-handle:hover { background: var(--blue); opacity: .4; }
/* Header */
#ql-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  min-height: 52px;
  padding: 0 14px;
  border-bottom: 1px solid var(--s3);
  background: var(--s1);
  flex-shrink: 0;
}
#ql-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--t1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
#ql-panel-header button:hover { background: var(--s2) !important; }
#ql-panel-close:hover         { background: var(--redL) !important; color: var(--red) !important; }
/* Body — launcher card lives here */
#ql-panel-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--s0);
  min-height: 0;
}
#ql-panel-blocker {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}
/* Collapsed tab strip — vertical label on the left */
#ql-panel-tab {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 14px 0 0;
  gap: 8px;
  height: 100%;
  background: var(--s1);
  cursor: pointer;
  width: 48px;
}
#ql-panel-tab:hover { background: var(--s2); }
#ql-panel-tab svg   { color: var(--t3); flex-shrink: 0; }
#ql-panel-tab-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size:12px;
  font-weight: 600;
  color: var(--t2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-height: 160px;
  transform: rotate(180deg);
}
/* Mobile: panel takes more width */
@media (max-width: 767px) {
  #ql-panel { width: min(360px, 92vw); }
}
/* ═══════════════════════════════════════════════════════════════
   QUICK LINKS — RIGHT-SIDE BROWSER PANEL
   Slides in from right, resizable from left edge, iframe inside
═══════════════════════════════════════════════════════════════ */
#ql-panel-backdrop{
  display:none; position:fixed; inset:0; z-index:10150;
  /* No background — panel sits beside the app */
}
#ql-panel-backdrop.open{ display:block; pointer-events:none; }
/* The panel itself */
#ql-panel{
  position:fixed;
  top:56px;                        /* below topbar */
  left:var(--panel, 320px);        /* starts at right edge of left sidebar */
  bottom:0;
  right:auto;
  width:var(--ql-width, 44vw);
  min-width:280px;
  max-width:calc(100vw - var(--panel, 320px) - 40px);
  z-index:10200;
  display:none;
  flex-direction:column;
  background:var(--s0);
  border-right:2px solid var(--s4);
  box-shadow:4px 0 32px rgba(0,0,0,.14);
  transition:none;
}
#ql-panel.open{ display:flex; }
#ql-panel.full{
  top:0;
  left:var(--panel, 320px) !important;
  width:calc(100vw - var(--panel, 320px)) !important;
  border-right:none;
}
/* Collapsed to a slim 48px strip on right edge */
#ql-panel.collapsed{
  width:48px !important;
  min-width:48px;
  display:flex;
  left:0;   /* stays on left edge */
}
#ql-panel.collapsed #ql-panel-header,
#ql-panel.collapsed #ql-panel-frame,
#ql-panel.collapsed #ql-panel-blocked{ display:none !important; }
#ql-panel.collapsed #ql-panel-tab{ display:flex; }
#ql-panel.collapsed #ql-panel-resize{
  position:absolute; right:0; top:0; bottom:0;
  width:6px; cursor:ew-resize; z-index:10;
  background:transparent; transition:background .15s;
}
#ql-panel-resize:hover{ background:var(--blue); opacity:.5; }
/* Drag handle — left edge */
#ql-panel-resize{
  position:absolute; right:0; left:auto; top:0; bottom:0;
  width:5px; cursor:ew-resize; z-index:1;
  background:transparent;
  transition:background .15s;
}
#ql-panel-resize:hover{ background:var(--blue); opacity:.5; }
/* Header */
#ql-panel-header{
  display:flex; align-items:center; gap:6px;
  height:48px; min-height:48px;
  padding:0 10px 0 14px;
  border-bottom:1px solid var(--s3);
  background:var(--s1);
  flex-shrink:0; position:relative; z-index:1;
}
#ql-panel-title{
  font-size:13px; font-weight:600; color:var(--t1);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  flex:1; min-width:0;
}
/* Header buttons */
.ql-hbtn{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; flex-shrink:0;
  border:none; background:none; cursor:pointer;
  border-radius:6px; color:var(--t3);
  transition:background .12s, color .12s;
}
.ql-hbtn:hover{ background:var(--s2); color:var(--t1); }
#ql-panel-close:hover{ background:var(--redL) !important; color:var(--red) !important; }
/* Collapsed tab strip */
#ql-panel-tab{
  display:none; flex-direction:column; align-items:center;
  padding:14px 0 0; gap:10px; height:100%;
  background:var(--s1); cursor:pointer; width:48px;
}
#ql-panel-tab:hover{ background:var(--s2); }
#ql-panel-tab svg{ color:var(--t3); }
#ql-panel-tab-label{
  writing-mode:vertical-rl; text-orientation:mixed;
  font-size:12px; font-weight:600; color:var(--t2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-height:180px; transform:rotate(180deg);
}
/* #main layout: map shrinks to make room for panel */
#main.ql-panel-open #mapwrap{
  /* map takes whatever space is left */
}
/* Mobile: panel goes full-width bottom sheet style */
@media (max-width:767px){
  #ql-panel{
    top:auto; right:0; left:0;
    bottom:0; width:100% !important;
    height:50vh;
    border-left:none; border-top:1px solid var(--s4);
    border-radius:16px 16px 0 0;
    box-shadow:0 -4px 24px rgba(0,0,0,.15);
  }
  #ql-panel.collapsed{
    height:48px; width:100% !important;
  }
  #ql-panel-resize{ display:none; }
}
/* ─── SMALL MOBILE ─── */
@media (max-width:480px) {
  #layer-ctrl {
    bottom:calc(50vh + 52px);
    left:8px; min-width:135px; max-width:175px;
  }
}
/* ─── TAB: ANALYSIS ─── */
#tab-analysis{overflow-y:auto;flex:1;min-height:0;}
#tab-analysis::-webkit-scrollbar{width:4px;}
#tab-analysis::-webkit-scrollbar-thumb{background:var(--s3);border-radius:2px;}
/* Summary stat cards */
.an-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 14px 0;}
.an-stat{background:var(--s1);border:1px solid var(--s3);border-radius:var(--r);padding:10px 12px;}
.an-stat-val{font-size:22px;font-weight:700;line-height:1.1;margin-bottom:2px;}
.an-stat-lbl{font-size:12px;color:var(--t3);font-weight:500;}
.an-stat.risk .an-stat-val{color:var(--red);}
.an-stat.ok   .an-stat-val{color:var(--green);}
.an-stat.info .an-stat-val{color:var(--blue);}
.an-stat.warn .an-stat-val{color:var(--yellow);}
/* Controls bar */
.an-controls{padding:10px 14px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--s3);flex-shrink:0;flex-wrap:wrap;}
.an-controls label{font-size:12px;color:var(--t2);white-space:nowrap;}
.an-threshold{width:70px;padding:5px 8px;border:1.5px solid var(--s4);border-radius:20px;font-size:13px;font-family:var(--font);outline:none;color:var(--t1);background:var(--s0);}
.an-threshold:focus{border-color:var(--blue);}
.an-run-btn{background:var(--blue);color:#fff;border:none;border-radius:20px;padding:7px 16px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:background .18s;white-space:nowrap;}
.an-run-btn:hover{background:var(--blue2);}
.an-run-btn:disabled{background:var(--t3);cursor:not-allowed;}
.an-export-btn{background:var(--s0);color:var(--t2);border:1.5px solid var(--s4);border-radius:20px;padding:7px 12px;font-size:12px;font-weight:500;cursor:pointer;display:none;align-items:center;gap:5px;transition:all .18s;}
.an-export-btn:hover{border-color:var(--blue);color:var(--blue);}
/* Client analysis cards */
.an-search-bar{display:none;padding:8px 12px 4px;gap:6px;flex-shrink:0;border-bottom:1px solid var(--s3);flex-wrap:wrap;}
.an-search-bar.visible{display:flex;align-items:center;flex-wrap:wrap;}
.an-filter-pill{font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;border:1.5px solid var(--s4);background:var(--s0);color:var(--t3);cursor:pointer;transition:all .15s;white-space:nowrap;}
.an-filter-pill.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.an-filter-pill.risk-active{background:var(--red);border-color:var(--red);color:#fff;}
.an-list{padding:8px 14px 14px;}
.an-card{background:var(--s0);border:1px solid var(--s3);border-radius:var(--r);padding:11px 12px;margin-bottom:8px;cursor:pointer;transition:all .18s;box-shadow:0 1px 2px rgba(0,0,0,.05);}
.an-card:hover{border-color:var(--blue);box-shadow:0 2px 8px rgba(26,115,232,.1);transform:translateY(-1px);}
.an-card.active{border-color:var(--blue);background:var(--blueL);}
.an-card-header{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px;}
.an-card-title{font-size:13px;font-weight:600;color:var(--t1);flex:1;line-height:1.35;}
.risk-badge{font-size:11px;font-weight:700;padding:2px 7px;border-radius:20px;background:var(--redL);color:var(--red);border:1px solid rgba(217,48,37,.25);white-space:nowrap;flex-shrink:0;}
.risk-badge.ok{background:var(--greenL);color:var(--green);border-color:rgba(24,128,56,.25);}
/* Proximity rows inside card */
.prox-rows{display:flex;flex-direction:column;gap:5px;}
.prox-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:20px;background:var(--s1);font-size:12px;}
.prox-row.highlight{background:var(--blueL);border:1px solid rgba(26,115,232,.2);}
.prox-icon{flex-shrink:0;}
.prox-name{flex:1;color:var(--t1);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.prox-dist{font-family:var(--mono);font-size:12px;color:var(--t3);flex-shrink:0;}
.prox-dist.far{color:var(--red);font-weight:600;}
.prox-go{background:none;border:none;cursor:pointer;color:var(--blue);font-size:12px;padding:0 2px;flex-shrink:0;opacity:.6;transition:opacity .15s;}
.prox-go:hover{opacity:1;}
/* Status pills inside client card */
.an-pills{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:6px;}
.an-pill{font-size:11px;font-weight:600;padding:2px 7px;border-radius:10px;}
.an-pill.active{background:var(--greenL);color:var(--green);}
.an-pill.closed{background:var(--s2);color:var(--t3);}
.an-pill.class{background:var(--blueL);color:var(--blue);}
/* Empty / no data state */
.an-empty{text-align:center;padding:40px 20px;}
.an-empty-icon{font-size:40px;opacity:.2;margin-bottom:10px;}
.an-empty-msg{font-size:14px;color:var(--t2);font-weight:500;margin-bottom:4px;}
.an-empty-sub{font-size:12px;color:var(--t3);}
/* Connection lines on map (drawn via Google Maps polylines) */
/* ─── GOOGLE INTEGRATIONS ─── */
/* Street View pane inside popup */
.sv-wrap{width:100%;height:200px;border-radius:20px;overflow:hidden;margin-top:8px;background:var(--s2);position:relative;}
.sv-wrap iframe{width:100%;height:100%;border:none;}
.sv-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--t3);}
/* Popup action buttons row */
.popup-actions{display:flex;gap:6px;margin-top:8px;padding-top:6px;border-top:1px solid var(--s3);flex-wrap:wrap;}
.popup-action-btn{display:flex;align-items:center;gap:4px;padding:5px 10px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;border:1.5px solid var(--s4);background:var(--s0);color:var(--t2);text-decoration:none;transition:all .18s;white-space:nowrap;}
.popup-action-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blueL);}
.popup-action-btn.directions{border-color:#34a853;color:#34a853;background:#e6f4ea;}
.popup-action-btn.directions:hover{background:#34a853;color:#fff;}
.popup-action-btn.streetview{border-color:#1a73e8;color:#1a73e8;background:var(--blueL);}
.popup-action-btn.streetview:hover{background:#1a73e8;color:#fff;}
/* Drive time display in prox rows */
.prox-drive{font-size:11px;color:var(--t3);font-family:var(--mono);display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex-shrink:0;}
.prox-drive .drive-time{font-weight:600;color:var(--t1);}
.prox-drive .drive-dist{color:var(--t3);}
.prox-drive.far .drive-time{color:var(--red);}
/* Navigate button in prox rows */
.prox-nav{background:none;border:1.5px solid #34a853;border-radius:20px;cursor:pointer;color:#34a853;font-size:11px;font-weight:600;padding:3px 8px;flex-shrink:0;transition:all .15s;display:flex;align-items:center;gap:3px;}
.prox-nav:hover{background:#34a853;color:#fff;}
/* Use Drive Time toggle */
.an-drive-toggle{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t2);}
.toggle-pill{position:relative;width:34px;height:18px;border-radius:9px;background:var(--s4);cursor:pointer;transition:background .2s;flex-shrink:0;}
.toggle-pill.on{background:var(--blue);}
.toggle-pill::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.25);}
.toggle-pill.on::after{transform:translateX(16px);}
/* ═══ AI AGENT PANEL ═══ */
#agent-panel {
  position:fixed; bottom:0; right:0; width:360px; height:480px;
  background:var(--s0); border:1px solid var(--s4); border-radius:16px 16px 0 0;
  box-shadow:0 -4px 32px rgba(0,0,0,.15); z-index:400;
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateY(100%); transition:transform .3s cubic-bezier(.32,0,.67,0);
}
#agent-panel.open { transform:translateY(0); }
/* Topbar */
#agent-header {
  display:flex; align-items:center; gap:8px; padding:12px 14px 10px;
  border-bottom:1px solid var(--s3); flex-shrink:0; background:var(--s0);
  border-radius:16px 16px 0 0;
}
#agent-header .ag-title { flex:1; font-size:14px; font-weight:700; color:var(--t1); display:flex; align-items:center; gap:7px; }
#agent-header .ag-badge {
  font-size:11px; font-weight:600; padding:2px 7px; border-radius:10px;
  background:var(--blueL); color:var(--blue); border:1px solid #c5d8fb;
}
#agent-header .ag-model-tag {
  font-size:11px; color:var(--t3); font-family:var(--mono);
}
#agent-close { background:none; border:none; cursor:pointer; color:var(--t3); font-size:18px; padding:2px 5px; border-radius:6px; line-height:1; }
#agent-close:hover { background:var(--redL); color:var(--red); }
/* ── JOB MATCH PANEL ──────────────────────────────────────── */
#job-panel {
  position:fixed; top:0; bottom:0; right:0; width:460px;
  min-width:340px; max-width:min(1100px,90vw); /* resize bounds — desktop */
  background:var(--s0); border:1px solid var(--s4); border-radius:16px 0 0 16px;
  box-shadow:-4px 0 32px rgba(0,0,0,.15); z-index:401;
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateX(100%); transition:transform .3s cubic-bezier(.32,0,.67,0);
}
#job-panel.open { transform:translateX(0); }
#job-header {
  display:flex; align-items:center; gap:8px; padding:12px 14px 10px;
  border-bottom:1px solid var(--s3); flex-shrink:0;
  background:linear-gradient(135deg,#00897b11,transparent);
}
#job-header .jb-title { flex:1; font-size:14px; font-weight:700; color:var(--t1); display:flex; align-items:center; gap:7px; }
#job-header .jb-client { font-size:12px; color:var(--t3); font-weight:400; font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; }
#job-close { background:none; border:none; cursor:pointer; color:var(--t3); font-size:18px; padding:2px 5px; border-radius:6px; line-height:1; }
#job-close:hover { background:var(--redL); color:var(--red); }
#job-form { padding:12px 14px; border-bottom:1px solid var(--s3); flex-shrink:0; display:flex; flex-direction:column; gap:9px; }
.jb-field-label { font-size:12px; font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:.5px; margin-bottom:3px; }
#job-query-1, #job-query-2, #job-query-3 { width:100%; padding:8px 10px; border:1.5px solid var(--s4); border-radius:20px; font-size:13px; font-family:var(--font); background:var(--s0); color:var(--t1); outline:none; box-sizing:border-box; display:block; }
#job-query-1:focus, #job-query-2:focus, #job-query-3:focus { border-color:#00897b; }
.jb-row { display:flex; align-items:center; gap:10px; }
#job-radius { width:70px; padding:7px 9px; border:1.5px solid var(--s4); border-radius:20px; font-size:13px; font-family:var(--font); background:var(--s0); color:var(--t1); outline:none; }
#job-radius:focus { border-color:#00897b; }
.jb-type-chips { display:flex; gap:5px; flex-wrap:wrap; flex:1; min-width:0; }
.jb-chip { font-size:12px; font-weight:600; padding:4px 10px; border-radius:20px; border:1.5px solid var(--s4); background:var(--s0); color:var(--t3); cursor:pointer; transition:all .15s; user-select:none; }
.jb-chip.on { background:#00897b; border-color:#00897b; color:#fff; }
#job-search-btn { width:100%; padding:9px; border:none; border-radius:20px; background:#00897b; color:#fff; font-size:13px; font-weight:700; cursor:pointer; transition:background .18s; display:flex; align-items:center; justify-content:center; gap:6px; }
#job-search-btn:hover { background:#00796b; }
#job-search-btn:disabled { background:var(--t3); cursor:not-allowed; }
#job-results-header { padding:8px 14px 4px; font-size:12px; font-weight:600; color:var(--t3); text-transform:uppercase; letter-spacing:.5px; flex-shrink:0; display:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#job-list { flex:1; overflow-y:auto; padding:6px 10px 14px; }
#job-list::-webkit-scrollbar { width:4px; }
#job-list::-webkit-scrollbar-thumb { background:var(--s3); border-radius:2px; }
.jb-card { background:var(--s0); border:1px solid var(--s3); border-radius:var(--r); padding:10px 12px; margin-bottom:8px; transition:all .18s; }
.jb-card:hover { border-color:#00897b; box-shadow:0 2px 8px rgba(0,137,123,.12); }
.jb-card.active { border-color:#00897b; background:#00897b0d; }
.jb-card-name { font-size:13px; font-weight:700; color:var(--t1); margin-bottom:3px; }
.jb-card-dist { font-size:12px; color:#00897b; font-weight:600; font-family:var(--mono); }
.jb-card-addr { font-size:12px; color:var(--t2); margin:3px 0 6px; line-height:1.4; }
.jb-card-phone { font-size:12px; color:var(--t3); margin-bottom:6px; }
.jb-card-actions { display:flex; gap:5px; flex-wrap:wrap; }
.jb-btn { display:inline-flex; align-items:center; gap:3px; padding:4px 9px; border-radius:20px; font-size:12px; font-weight:600; cursor:pointer; border:1.5px solid; transition:all .15s; text-decoration:none; white-space:nowrap; }
.jb-btn.dir { border-color:#1a73e8; color:#1a73e8; background:var(--blueL); }
.jb-btn.dir:hover { background:#1a73e8; color:#fff; }
.jb-btn.web { border-color:var(--s4); color:var(--t2); background:var(--s0); }
.jb-btn.web:hover { border-color:var(--t2); color:var(--t1); }
.jb-btn.car { border-color:#00897b; color:#00897b; background:#00897b11; }
.jb-btn.car:hover { background:#00897b; color:#fff; }
.jb-btn.map { border-color:var(--s4); color:var(--t3); background:var(--s0); }
.jb-btn.map:hover { border-color:#00897b; color:#00897b; }
.jb-empty { text-align:center; padding:36px 20px; }
.jb-empty-icon { font-size:36px; opacity:.2; margin-bottom:8px; }
.jb-empty-msg { font-size:13px; color:var(--t2); font-weight:500; }
.jb-empty-sub { font-size:12px; color:var(--t3); margin-top:3px; }
/* Section dividers inside job-list */
.jb-section-hdr { display:flex; align-items:center; gap:8px; padding:10px 2px 6px; margin-top:4px; }
.jb-section-hdr:first-child { margin-top:0; padding-top:4px; }
.jb-section-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--t3); white-space:nowrap; }
.jb-section-line { flex:1; height:1px; background:var(--s3); }
.jb-section-count { font-size:11px; font-family:var(--mono); color:var(--t3); background:var(--s2); padding:1px 6px; border-radius:8px; }
/* CareerOneStop listing cards — slightly different style from employer cards */
.jb-listing { background:var(--s1); border:1px solid var(--s3); border-radius:var(--r); padding:10px 12px; margin-bottom:8px; transition:all .18s; }
.jb-listing:hover { border-color:#00897b; box-shadow:0 2px 8px rgba(0,137,123,.1); }
.jb-listing.active { border-color:#00897b; background:#00897b08; }
.jb-listing-title { font-size:13px; font-weight:700; color:var(--t1); margin-bottom:2px; }
.jb-listing-company { font-size:12px; color:var(--t2); margin-bottom:2px; }
.jb-listing-meta { display:flex; flex-wrap:wrap; gap:5px; margin:5px 0; }
.jb-listing-chip { font-size:11px; padding:2px 7px; border-radius:8px; background:var(--s2); color:var(--t3); border:1px solid var(--s3); white-space:nowrap; }
.jb-listing-chip.salary { background:#e8f5e9; color:#2e7d32; border-color:#a5d6a7; }
.jb-listing-chip.posted { background:var(--blueL); color:var(--blue); border-color:#c5d8fb; }
.jb-listing-chip.onet { background:#fff3e0; color:#e65100; border-color:#ffcc80; }
.jb-listing-desc { font-size:12px; color:var(--t2); line-height:1.5; margin:5px 0 6px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.jb-cos-empty { text-align:center; padding:14px 10px; font-size:12px; color:var(--t3); background:var(--s1); border:1px dashed var(--s3); border-radius:var(--r); }
.jb-cos-loading { display:flex; align-items:center; gap:8px; padding:12px; font-size:12px; color:var(--t3); }
.jb-cos-key-note { font-size:12px; color:var(--t3); background:var(--yellowL); border:1px solid #fdd663; border-radius:20px; padding:7px 10px; margin-bottom:8px; line-height:1.5; }
@media(max-width:767px){
  #job-panel{
    width:100%; border-radius:16px 16px 0 0;
    height:72vh; top:auto; bottom:0;
    left:0; right:0;
    z-index:401;
    transform:translateY(100%);
    transition:height .3s cubic-bezier(.32,0,.67,0), transform .3s cubic-bezier(.32,0,.67,0);
  }
  #job-panel.open { transform:translateY(0); }
  #job-panel.minimized{ height:52px; overflow:hidden; }
#job-panel.minimized #job-header{ cursor:pointer; }
#job-panel.minimized #job-form,
#job-panel.minimized #job-results-header,
#job-panel.minimized #job-list,
#job-panel.minimized #cos-key-note{ display:none; }
  #job-drag-handle{ display:block !important; }
  #job-minimize{ display:inline-block !important; }
  #job-form{ gap:6px; padding:10px 12px; }
  #job-query-1,#job-query-2,#job-query-3{ padding:10px; font-size:14px; }
  #job-radius{ width:60px; font-size:14px; }
  .jb-chip{ font-size:12px; padding:5px 10px; }
  #job-search-btn{ padding:11px; font-size:14px; }
  .jb-card-actions{ gap:4px; }
  .jb-btn{ font-size:11px; padding:4px 7px; }
}
/* Key setup bar */
#agent-key-bar {
  display:flex; gap:6px; padding:8px 12px; background:var(--yellowL);
  border-bottom:1px solid #fdd663; flex-shrink:0; align-items:center;
}
#agent-key-bar.hidden { display:none; }
#agent-key-input {
  flex:1; font-size:12px; font-family:var(--mono); padding:5px 8px;
  border:1.5px solid #fdd663; border-radius:8px; outline:none; background:var(--s0);
  color:var(--t1);
}
#agent-key-input:focus { border-color:var(--blue); }
#agent-key-save {
  background:var(--blue); color:#fff; border:none; border-radius:20px;
  font-size:12px; font-weight:600; padding:5px 11px; cursor:pointer; white-space:nowrap;
}
#agent-key-save:hover { background:var(--blue2); }
/* Messages */
#agent-messages {
  flex:1; overflow-y:auto; padding:10px 12px; display:flex; flex-direction:column; gap:8px;
}
#agent-messages::-webkit-scrollbar { width:4px; }
#agent-messages::-webkit-scrollbar-thumb { background:var(--s3); border-radius:2px; }
.ag-msg { display:flex; flex-direction:column; gap:2px; max-width:90%; }
.ag-msg.user { align-self:flex-end; align-items:flex-end; }
.ag-msg.agent { align-self:flex-start; align-items:flex-start; }
.ag-bubble {
  padding:8px 11px; border-radius:12px; font-size:13px; line-height:1.5;
}
.ag-msg.user .ag-bubble { background:var(--blue); color:#fff; border-radius:12px 12px 3px 12px; }
.ag-msg.agent .ag-bubble {
  background:var(--s1); color:var(--t1); border:1px solid var(--s3);
  border-radius:12px 12px 12px 3px;
}
.ag-msg.agent .ag-bubble.thinking {
  color:var(--t3); font-style:italic; font-size:12px;
}
.ag-bubble .ag-actions {
  margin-top:7px; padding-top:7px; border-top:1px solid rgba(0,0,0,.08);
  display:flex; flex-wrap:wrap; gap:5px;
}
.ag-action-chip {
  font-size:12px; padding:2px 8px; border-radius:10px; border:1.5px solid var(--s4);
  background:var(--s0); color:var(--t2); cursor:pointer; transition:all .15s; font-weight:500;
}
.ag-action-chip:hover { border-color:var(--blue); color:var(--blue); background:var(--blueL); }
.ag-timestamp { font-size:11px; color:var(--t3); margin-top:2px; }
/* Input bar */
#agent-input-bar {
  display:flex; gap:6px; padding:10px 12px; border-top:1px solid var(--s3);
  flex-shrink:0; background:var(--s0); align-items:flex-end;
}
#agent-input {
  flex:1; resize:none; border:1.5px solid var(--s4); border-radius:var(--r);
  padding:8px 10px; font-family:var(--font); font-size:13px; color:var(--t1);
  outline:none; max-height:80px; line-height:1.4; background:var(--s0);
  transition:border-color .18s;
}
#agent-input:focus { border-color:var(--blue); }
#agent-input::placeholder { color:var(--t3); }
/* Mic + send buttons */
#agent-mic {
  width:36px; height:36px; border-radius:50%; border:1.5px solid var(--s4);
  background:var(--s0); color:var(--t2); cursor:pointer; display:flex;
  align-items:center; justify-content:center; flex-shrink:0; transition:all .2s;
}
#agent-mic:hover { border-color:var(--red); color:var(--red); background:var(--redL); }
#agent-mic.listening { background:var(--red); border-color:var(--red); color:#fff; animation:pulse 1s ease-in-out infinite; }
#agent-send {
  width:36px; height:36px; border-radius:50%; border:none;
  background:var(--blue); color:#fff; cursor:pointer; display:flex;
  align-items:center; justify-content:center; flex-shrink:0; transition:all .2s;
}
#agent-send:hover { background:var(--blue2); transform:scale(1.05); }
#agent-send:disabled { background:var(--s4); cursor:not-allowed; transform:none; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(217,48,37,.4)} 50%{box-shadow:0 0 0 8px rgba(217,48,37,0)} }
/* FAB to open agent */
#agent-fab {
  position:fixed; bottom:20px; right:20px; z-index:399;
  width:52px; height:52px; border-radius:50%; border:none;
  background:var(--blue); color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(26,115,232,.4); transition:all .2s;
}
#agent-fab:hover { background:var(--blue2); transform:scale(1.08); box-shadow:0 6px 24px rgba(26,115,232,.5); }
#agent-fab .fab-badge {
  position:absolute; top:-3px; right:-3px; background:var(--red); color:#fff;
  font-size:11px; font-weight:700; width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--s0);
}
.agent-open #agent-fab { background:var(--t2); }
/* Mobile */
@media(max-width:767px){
  #agent-panel{ width:100%; border-radius:16px 16px 0 0; height:55vh; }
  #agent-fab{ bottom:calc(52vh + 16px); }
}/* === AGENT TABS === */
#agent-tab-nav{display:flex;border-bottom:2px solid var(--s3);flex-shrink:0;background:var(--s1);}
.ag-tab{flex:1;padding:9px 0;font-size:12px;font-weight:500;color:var(--t3);border:none;background:transparent;cursor:pointer;transition:all .15s;border-bottom:2px solid transparent;margin-bottom:-2px;}
.ag-tab:hover{color:var(--t2);background:var(--s0);}
.ag-tab.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:600;background:var(--s0);}
/* === KNOWLEDGE BASE PANEL === */
#agent-kb-panel{display:none;flex-direction:column;flex:1;overflow:hidden;}
#kb-toolbar{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid var(--s3);flex-shrink:0;flex-wrap:wrap;}
#kb-search{flex:1;min-width:120px;padding:6px 10px;border:1.5px solid var(--s4);border-radius:8px;font-size:12px;font-family:var(--font);outline:none;}
#kb-search:focus{border-color:var(--blue);}
.kb-add-btn{padding:6px 12px;border:none;background:var(--blue);color:#fff;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;}
.kb-add-btn:hover{background:var(--blue2);}
.kb-exp-btn{padding:6px 10px;border:1.5px solid var(--s4);background:var(--s0);color:var(--t2);border-radius:20px;font-size:12px;cursor:pointer;}
.kb-exp-btn:hover{border-color:var(--blue);color:var(--blue);}
#kb-list{flex:1;overflow-y:auto;padding:8px;}
#kb-list::-webkit-scrollbar{width:4px;}
#kb-list::-webkit-scrollbar-thumb{background:var(--s3);border-radius:2px;}
.kb-entry{background:var(--s0);border:1px solid var(--s3);border-radius:20px;padding:9px 11px;margin-bottom:6px;position:relative;}
.kb-entry:hover{border-color:var(--blue);}
.kb-entry-q{font-size:12px;font-weight:600;color:var(--t1);margin-bottom:3px;padding-right:52px;line-height:1.4;}
.kb-entry-a{font-size:12px;color:var(--t2);line-height:1.5;}
.kb-entry-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px;}
.kb-tag{font-size:11px;padding:1px 6px;border-radius:8px;background:var(--blueL);color:var(--blue);border:1px solid #c5d8fb;}
.kb-entry-acts{position:absolute;top:8px;right:8px;display:flex;gap:3px;}
.kb-edit-btn,.kb-del-btn{width:22px;height:22px;border-radius:4px;border:none;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.kb-edit-btn{background:var(--blueL);color:var(--blue);}
.kb-del-btn{background:var(--redL);color:var(--red);}
.kb-edit-btn:hover{background:var(--blue);color:#fff;}
.kb-del-btn:hover{background:var(--red);color:#fff;}
.kb-empty{text-align:center;padding:28px 16px;font-size:12px;color:var(--t3);}
#kb-form{background:var(--s1);border-top:1px solid var(--s3);padding:10px 12px;flex-shrink:0;}
#kb-form.hidden{display:none;}
.kb-form-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--t3);margin-bottom:3px;display:block;}
.kb-form-input,.kb-form-textarea{width:100%;padding:6px 9px;border:1.5px solid var(--s4);border-radius:8px;font-size:12px;font-family:var(--font);outline:none;color:var(--t1);background:var(--s0);margin-bottom:6px;}
.kb-form-textarea{resize:vertical;min-height:56px;}
.kb-form-input:focus,.kb-form-textarea:focus{border-color:var(--blue);}
.kb-form-row{display:flex;gap:6px;}
.kb-save-btn{flex:1;padding:7px;background:var(--blue);color:#fff;border:none;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;}
.kb-cancel-btn2{padding:7px 12px;background:var(--s0);border:1.5px solid var(--s4);color:var(--t2);border-radius:20px;font-size:12px;cursor:pointer;}
/* === DEFAULTS HUB MODAL === */
#defaults-hub-overlay{display:none;position:fixed;inset:0;background:rgba(32,33,36,.5);
  backdrop-filter:blur(4px);z-index:9600;align-items:center;justify-content:center;padding:20px;}
#defaults-hub-overlay.open{display:flex;}
#defaults-hub-modal{background:var(--s0);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.2);
  width:100%;max-width:520px;overflow:hidden;}
#defaults-hub-header{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--s3);}
#defaults-hub-header h2{flex:1;font-size:16px;font-weight:700;color:var(--t1);}
#defaults-hub-close{background:none;border:none;cursor:pointer;color:var(--t3);font-size:20px;padding:2px 6px;border-radius:6px;line-height:1;}
#defaults-hub-close:hover{background:var(--redL);color:var(--red);}
#defaults-hub-body{padding:16px 20px;display:flex;flex-direction:column;gap:10px;}
.dhub-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1.5px solid var(--s3);
  border-radius:var(--r);background:var(--s1);transition:all .15s;}
.dhub-card:hover{border-color:var(--s4);background:var(--s0);}
.dhub-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;}
.dhub-info{flex:1;}
.dhub-name{font-size:13px;font-weight:600;color:var(--t1);}
.dhub-sub{font-size:12px;color:var(--t3);margin-top:2px;}
.dhub-btns{display:flex;gap:6px;}
.dhub-edit-btn{padding:6px 12px;border:1.5px solid var(--s4);border-radius:20px;
  font-size:12px;font-weight:500;cursor:pointer;background:var(--s0);color:var(--t2);transition:all .15s;}
.dhub-edit-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blueL);}
.dhub-import-btn{padding:6px 12px;border:none;border-radius:20px;
  font-size:12px;font-weight:600;cursor:pointer;color:#fff;transition:all .15s;}
.dhub-import-btn:hover{opacity:.88;}
/* === ADMIN MODE === */
/* Superadmin-only elements */
.superadmin-only { display:none !important; }
body.is-superadmin .superadmin-only { display:flex !important; }
/* Prevent flash of wrong role during page load
   Hide everything that might not belong to the final role
   until applyRoleCapabilities runs and removes role-loading */
body.role-loading .admin-only        { display:none !important; }
body.role-loading #xbtn              { display:none !important; }
body.role-loading #ql-menu-wrap      { display:none !important; }
body.role-loading #agent-fab         { display:none !important; }
body.role-loading .ff-feature-upload { display:none !important; }
body.role-loading #lr-clients        { display:none !important; }
body.role-loading #lr-caseload       { display:none !important; }
/* Keep the map and core structure visible — only hide role-dependent UI */
.admin-only{display:none!important;}
body.is-admin .admin-only{display:flex!important;}
.admin-only-block{display:none;}
body.is-admin .admin-only-block{display:block!important;}
#tb-sep-admin{display:none;}
body.is-admin #tb-sep-admin{display:block;}
#admin-badge{display:none;align-items:center;gap:4px;font-size:11px;font-weight:700;
  padding:3px 8px;border-radius:10px;background:var(--yellowL);color:#7a5200;
  border:1px solid #fdd663;letter-spacing:.3px;}
body.is-admin #admin-badge{display:flex;}
#admin-panel-btn{
  display:none;align-items:center;justify-content:center;gap:5px;
  padding:5px 12px;border-radius:20px;
  border:1.5px solid #fdd663;background:var(--yellowL);
  color:#7a5200;font-size:12px;font-weight:600;
  cursor:pointer;transition:all .18s;flex-shrink:0;
  white-space:nowrap;}
#admin-panel-btn.is-admin{display:inline-flex;}
body.is-admin #admin-panel-btn{display:flex;}
#admin-panel-btn:hover{background:#fdd663;}
/* Password modal */
#admin-pw-overlay{display:none;position:fixed;inset:0;background:rgba(15,15,20,.85);
  backdrop-filter:blur(8px);z-index:99999;align-items:center;justify-content:center;}
#admin-pw-overlay.open{display:flex;}
#admin-pw-box{background:#1e2028;border:1px solid #333;border-radius:16px;padding:32px 36px;
  width:320px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.6);}
.pw-icon{font-size:32px;margin-bottom:12px;}
#admin-pw-box h3{font-size:15px;font-weight:600;color:#e8eaed;margin-bottom:4px;}
#admin-pw-box p{font-size:12px;color:#9aa0a6;margin-bottom:18px;}
#admin-pw-input{width:100%;padding:11px 14px;border-radius:20px;border:1.5px solid #333;
  background:#2a2d35;color:#e8eaed;font-size:14px;font-family:var(--mono);text-align:center;
  letter-spacing:.1em;outline:none;margin-bottom:12px;transition:border-color .2s;box-sizing:border-box;}
#admin-pw-input:focus{border-color:#1a73e8;}
#admin-pw-input.shake{animation:pwshake .4s ease;border-color:var(--red);}
@keyframes pwshake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
#admin-pw-submit{width:100%;padding:10px;border:none;border-radius:20px;
  background:#1a73e8;color:#fff;font-size:13px;font-weight:600;cursor:pointer;
  transition:background .18s;margin-bottom:8px;}
#admin-pw-submit:hover{background:#1557b0;}
#admin-pw-cancel{width:100%;padding:8px;border:1px solid #333;border-radius:20px;
  background:transparent;color:#9aa0a6;font-size:12px;cursor:pointer;}
#admin-pw-cancel:hover{background:#2a2d35;}
#admin-pw-err{font-size:12px;color:var(--red);margin-top:4px;min-height:16px;}
/* Admin settings modal */
/* ═══════════════════════════════════════════════════
   ADMIN PANEL — Full-screen layout with sidebar nav
   Grid: header (full width) / sidebar + content
═══════════════════════════════════════════════════ */
/* ╔══════════════════════════════════════════════════════════╗
   ║  ADMIN PANEL v4  —  Grouped tabs + slide animation      ║
   ║  Full-screen • Top tab bar • Animated content panes     ║
   ╚══════════════════════════════════════════════════════════╝ */
/* ── Overlay ── */
/* Admin overlay — converted from modal to full-page view (matches Data Studio).
   No backdrop, no card frame. Takes over the whole viewport. */
#admin-settings-overlay{
  display:none;position:fixed;inset:0;
  background:var(--s0);
  z-index:9800;}
#admin-settings-overlay.open{display:flex;}
/* ── Full-page view shell ── */
#admin-settings-modal{
  position:relative;
  top:auto;left:auto;
  transform:none;
  width:100%; height:100%;
  min-width:0; min-height:0;
  max-width:none; max-height:none;
  display:flex; flex-direction:column;
  background:var(--s0); overflow:hidden;
  border-radius:0;
  box-shadow:none;
  z-index:9850;
  resize:none;
}
/* ════════════════════════════════════════════════════════════════════════
   Ship C: Admin section sidebar (replaces the old top tab bar)
   ──────────────────────────────────────────────────────────────────────
   Old internal header + tab bar are hidden via CSS (DOM elements remain
   for backward-compatible JS references). New section sidebar lists all
   17 admin sub-items grouped under 5 visual headers. Same collapse
   pattern as Studio's section sidebar.
   ════════════════════════════════════════════════════════════════════════ */
/* Hide the now-redundant internal header (global topbar replaces it) and
   the horizontal tab bar (section sidebar replaces it). Kept in DOM so
   existing JS that touches #admin-settings-header or .atb-tab keeps
   working without errors. */
body.has-app-sidepanel #admin-settings-header,
body.has-app-sidepanel #admin-tab-bar{display:none !important;}
/* Hide the per-view sidenav since the new unified sidebar shows
   everything at once. */
body.has-app-sidepanel #admin-body .av-sidenav{display:none !important;}
/* Ship C activates a single view at a time. Ship F fix: the prior rule
   used display:block which destroyed the flex chain below — av-content,
   av-panel, av-panel-body all need flex flow to participate in the
   parent-height-then-overflow-auto chain. Use display:flex (matching the
   default .admin-view rule on line 1866) and rely on opacity/pointer-
   events to hide inactive views. */
body.has-app-sidepanel #admin-body .admin-view{
  display:flex !important;
  opacity:0;pointer-events:none;
}
body.has-app-sidepanel #admin-body .admin-view.active{
  opacity:1;pointer-events:auto;
}
body.has-app-sidepanel #admin-body .av-content{width:100%;max-width:none;}

/* Shell: horizontal flex with section sidebar | admin body */
#admin-shell{
  flex:1;display:flex;flex-direction:row;min-height:0;overflow:hidden;
}
/* Section sidebar */
#admin-section-sidebar{
  width:240px;flex-shrink:0;
  background:var(--s1);border-right:1px solid var(--s3);
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:width .22s cubic-bezier(.4,0,.2,1);
}
#admin-section-sidebar.collapsed{width:48px;}
.ass-scroll{
  flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0;
}
.ass-section{
  padding:2px 0;
  /* Ship 106af: divider line between groups, matching Studio's
     .studio-sources-group treatment. User couldn't tell where one group
     ended and the next began without these. */
  border-bottom:1px solid var(--s3);
}
.ass-section:last-child{border-bottom:none;}
/* Group title — clickable to toggle group's items visibility.
   Ship 106ai: styling matched to Studio's .studio-group-header so the
   two sidebars feel consistent. Was: 11px UPPERCASE in --t3 light gray
   with 0.6 tracking. Now: 12px mixed-case in --t2 (darker, more
   readable), 0.3 tracking, generous 12px vertical padding.
   Ship 106aj: bumped to 14px / --t1 (primary text color) so the title
   is one step LARGER than the 13px items below — proper parent>child
   hierarchy. Previously the title was smaller than its own children,
   which read as backwards. */
.ass-section-title{
  display:flex;align-items:center;gap:10px;width:100%;
  font-size:15px;font-weight:700;color:var(--t1);
  letter-spacing:.3px;
  padding:13px 16px;
  background:transparent;border:none;cursor:pointer;
  text-align:left;font-family:var(--font);
  white-space:nowrap;overflow:hidden;
  transition:color .12s, background .12s;
}
.ass-section-title:hover{color:var(--t1);}
.ass-section-chevron{
  font-size:11px;flex-shrink:0;width:10px;
  transition:transform .15s;display:inline-block;
}
.ass-section.collapsed-group .ass-section-chevron{transform:rotate(-90deg);}
.ass-section-label{flex:1;overflow:hidden;text-overflow:ellipsis;}
/* 106f9: section + item icons bumped to SaaS standard 32×32 tiles
   with larger emoji glyphs (18px). The old 22×22 + 13px reads as
   cramped against the now-bigger primary sidepanel icons. */
.ass-section-icon {
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(26, 115, 232, 0.12);
  font-size:18px;flex-shrink:0;line-height:1;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.10));
  transition:background .12s, transform .12s;
}
.ass-section-title:hover .ass-section-icon {
  background:rgba(26, 115, 232, 0.20);
  transform:scale(1.05);
}
.ass-group-items{display:flex;flex-direction:column;overflow:hidden;}
.ass-section.collapsed-group .ass-group-items{
  display:none;
}
#admin-section-sidebar.collapsed .ass-section-title{
  padding:6px 4px;
  justify-content:center;
  cursor:pointer;
  pointer-events:auto;
}
#admin-section-sidebar.collapsed .ass-section-title:hover{
  background:var(--blueL);
}
#admin-section-sidebar.collapsed .ass-section-chevron,
#admin-section-sidebar.collapsed .ass-section-label{display:none;}
.ass-nav-item{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:10px 16px;background:transparent;border:none;
  color:var(--t1);font-size:14px;font-weight:500;cursor:pointer;
  text-align:left;transition:background .12s, color .12s, box-shadow .12s;
  white-space:nowrap;overflow:hidden;
  font-family:var(--font);
}
.ass-nav-item:hover{background:var(--blueL);color:var(--blue);}
.ass-nav-item:hover .ass-icon{ transform:scale(1.06); }
.ass-nav-item.active{
  background:transparent;color:var(--blue);font-weight:600;
  box-shadow:inset 3px 0 var(--blue);
}
.ass-icon{
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(26, 115, 232, 0.12);
  font-size:18px;flex-shrink:0;line-height:1;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.10));
  transition:background .12s, transform .12s;
}
.ass-nav-item.active .ass-icon {
  background: rgba(26, 115, 232, 0.30);
}
.ass-label{flex:1;font-size:14px;}
#admin-section-sidebar.collapsed .ass-label{display:none;}
#admin-section-sidebar.collapsed .ass-nav-item{
  padding:8px 4px;
  justify-content:center;
}
/* ════════════════════════════════════════════════════════════════════════
   Ship D: Section-aware topbar — hide Map-specific controls in
   Studio/Admin sections. Body class section-map / section-studio /
   section-admin is set by appSidepanelSetActive.
   ════════════════════════════════════════════════════════════════════════ */
/* Hide Map-only buttons when NOT on the Map section */
body.section-studio #studio-open-btn,
body.section-admin #studio-open-btn,
body.section-studio #admin-panel-btn,
body.section-admin #admin-panel-btn,
body.section-studio #edit-defaults-btn,
body.section-admin #edit-defaults-btn,
body.section-studio #xbtn,
body.section-admin #xbtn,
body.section-studio .tb-btn.danger,
body.section-admin .tb-btn.danger,
body.section-studio #mstatus,
body.section-admin #mstatus,
body.section-studio #tb-sep-admin,
body.section-admin #tb-sep-admin{display:none !important;}
/* ════════════════════════════════════════════════════════════════════════
   Ship D — Responsiveness pass
   ──────────────────────────────────────────────────────────────────────
   The recent UI changes (app sidepanel, admin section sidebar, removed
   internal topbars) need explicit mobile handling. Strategy:
   - <900px (tablet): app sidepanel hidden (already); admin sidebar
     narrows; studio toolbar wraps
   - <767px (phone): admin sidebar becomes a slide-out drawer; studio
     toolbar items shrink; topbar drops to icon-only buttons
   - <480px (small phone): further tightening
   This is a baseline pass to keep the app usable on mobile — full
   mobile UX polish is a future ship.
   ════════════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  /* Admin section sidebar narrows on tablet */
  #admin-section-sidebar{width:200px;}
  #admin-section-sidebar.collapsed{width:44px;}
  /* Group titles shrink a bit */
  .ass-section-title{padding:6px 10px 3px 10px;}
  .ass-nav-item{padding:7px 10px;font-size:12px;}
  /* Studio toolbar can wrap if too crowded */
  .studio-toolbar{flex-wrap:wrap;gap:6px;padding:8px 12px;}
  .studio-toolbar-right{flex-wrap:wrap;}
}
@media(max-width:767px){
  /* Phone: hide admin section sidebar by default (acts like a drawer
     activated by the topbar hamburger). When .open class is added it
     slides in as an overlay over the content. */
  body.has-app-sidepanel.section-admin #admin-section-sidebar{
    position:absolute;
    top:0;left:0;bottom:0;
    width:240px;
    z-index:10050;
    box-shadow:4px 0 16px rgba(0,0,0,.2);
    transform:translateX(-100%);
    transition:transform .22s cubic-bezier(.4,0,.2,1);
  }
  body.has-app-sidepanel.section-admin #admin-section-sidebar.mobile-open{
    transform:translateX(0);
  }
  /* The shell content takes full width on mobile since sidebar is now overlay */
  body.has-app-sidepanel.section-admin #admin-shell{position:relative;}
  /* Studio toolbar: smaller buttons, fewer visible (rely on horizontal scroll) */
  .studio-toolbar{padding:6px 10px;font-size:12px;}
  .studio-toolbar-left h2{font-size:14px;}
  .studio-toolbar-right{overflow-x:auto;max-width:100%;}
  /* Topbar: hide the danger button label and shrink padding */
  #topbar{padding:0 8px;gap:4px;}
  .tb-btn{padding:5px 8px;font-size:12px;}
}
@media(max-width:480px){
  /* Very small screens: drop QL panel label, status chip, admin badge */
  body.section-map #mstatus{font-size:11px;padding:3px 6px;}
  #admin-badge{font-size:11px;padding:2px 6px;}
  /* Studio source title can wrap */
  .studio-toolbar-left h2{font-size:12px;}
}

/* Header */
#admin-settings-header{
  display:flex;align-items:center;gap:8px;
  padding:0 16px;height:48px;min-height:48px;
  border-bottom:1px solid var(--s3);
  background:var(--s0);flex-shrink:0;z-index:5;}
#admin-settings-header h2{
  font-size:13px;font-weight:700;color:var(--t2);
  text-transform:uppercase;letter-spacing:.8px;flex:1;}
#admin-header-breadcrumb{
  font-size:12px;color:var(--t4,var(--t3));
  padding:2px 10px;background:var(--s2);
  border-radius:20px;font-weight:500;}
#as-mobile-nav-btn{
  display:none;background:none;border:none;cursor:pointer;
  color:var(--t2);padding:6px;border-radius:6px;
  align-items:center;justify-content:center;}
.as-close{
  background:none;border:none;cursor:pointer;
  color:var(--t3);border-radius:8px;
  padding:6px 8px;font-size:18px;line-height:1;
  transition:all .15s;}
.as-close:hover{background:var(--redL);color:var(--red);}
/* ── Tab group bar ── */
#admin-tab-bar{
  display:flex;align-items:center;gap:4px;
  padding:8px 12px;
  border-bottom:1px solid var(--s3);
  background:var(--s1);flex-shrink:0;
  overflow-x:auto;scrollbar-width:none;}
#admin-tab-bar::-webkit-scrollbar{display:none;}
.atb-group{
  display:flex;align-items:center;gap:1px;
  background:var(--s2);border-radius:10px;
  padding:3px;}
.atb-tab{
  display:flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:8px;border:none;
  font-size:12px;font-weight:600;cursor:pointer;
  color:var(--t3);background:transparent;
  white-space:nowrap;transition:all .15s;}
.atb-tab:hover{background:var(--s0);color:var(--t1);}
.atb-tab.active{background:var(--s0);color:var(--t1);
  box-shadow:0 1px 4px rgba(0,0,0,.1);}
.atb-tab.active .atb-dot{background:var(--blue);}
.atb-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--s4);flex-shrink:0;transition:background .15s;}
.atb-sep{width:1px;height:24px;background:var(--s3);margin:0 8px;flex-shrink:0;}
/* ── Content area ── */
#admin-body{flex:1;overflow:hidden;position:relative;display:flex;flex-direction:column;min-height:0;}
/* ── Tab views (slide in/out) ── */
.admin-view{
  position:absolute;inset:0;
  display:flex;flex-direction:row;
  overflow:hidden;
  opacity:0;pointer-events:none;
  transform:translateX(32px);
  transition:opacity .18s ease, transform .18s ease;}
.admin-view.active{
  opacity:1;pointer-events:auto;
  transform:translateX(0);}
.admin-view.exit-left{
  opacity:0;pointer-events:none;
  transform:translateX(-32px);}
/* ── Left sub-nav (within each view) ── */
.av-sidenav{
  width:160px;min-width:140px;flex-shrink:0;
  border-right:1px solid var(--s3);
  background:var(--s1);
  overflow-y:auto;padding:12px 8px;
  display:flex;flex-direction:column;gap:1px;}
.av-sidenav::-webkit-scrollbar{width:3px;}
.av-sidenav::-webkit-scrollbar-thumb{background:var(--s4);border-radius:2px;}
.av-nav-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 14px;border-radius:8px;border:none;
  font-size:14px;font-weight:500;cursor:pointer;
  color:var(--t2);background:transparent;
  text-align:left;width:100%;transition:all .12s;
  white-space:nowrap;}
.av-nav-item:hover{background:var(--s2);color:var(--t1);}
.av-nav-item:hover .av-nav-icon{ transform:scale(1.06); }
.av-nav-item.active{background:var(--blue);color:#fff;font-weight:600;}
.av-nav-icon{
  font-size:18px;flex-shrink:0;
  width:30px;height:30px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(26,115,232,0.12);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.10));
  transition:background .12s, transform .12s;
}
.av-nav-item.active .av-nav-icon{ background:rgba(255,255,255,0.20); }
/* ── Content panels (slide within view) ── */
.av-content{flex:1;overflow:hidden;position:relative;min-width:200px;display:flex;flex-direction:column;min-height:0;}
.av-content::-webkit-scrollbar{width:5px;}
.av-content::-webkit-scrollbar-thumb{background:var(--s4);border-radius:3px;}
.av-panel{display:none;flex-direction:column;gap:0;padding:0;animation:panelIn .18s ease;flex:1;min-height:0;}
.av-panel.active{display:flex;flex:1;min-height:0;overflow:hidden;}
@keyframes panelIn{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:none;}}
/* ── Section cards ── */
.as-section{
  border:1px solid var(--s3);border-radius:10px;
  overflow:visible;background:var(--s0);}
.as-section-title{
  font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;
  padding:10px 16px;background:var(--s1);color:var(--t3);
  border-bottom:1px solid var(--s3);
  display:flex;align-items:center;justify-content:space-between;gap:8px;}
.as-section-body{padding:12px;display:flex;flex-direction:column;gap:10px;}
/* ── Form elements ── */
.as-row{display:flex;gap:8px;align-items:center;}
.as-label{
  font-size:12px;font-weight:600;color:var(--t3);
  text-transform:uppercase;letter-spacing:.4px;}
.as-input{
  padding:8px 14px;border:1.5px solid var(--s4);border-radius:8px;
  font-size:13px;font-family:var(--font);color:var(--t1);
  background:var(--s0);outline:none;width:100%;
  box-sizing:border-box;transition:border-color .15s;}
.as-input:focus{border-color:var(--blue);}
.as-input.mono{font-family:var(--mono);font-size:12px;}
.as-row .as-input{flex:1;width:auto;}
.as-note{font-size:12px;color:var(--t3);line-height:1.55;}
.as-status{font-size:12px;font-weight:600;min-height:16px;}
.as-status.ok{color:var(--green);}
.as-status.err{color:var(--red);}
/* ── Buttons ── */
.as-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 18px;border-radius:20px;border:1.5px solid transparent;
  font-size:12px;font-weight:600;line-height:1.4;
  cursor:pointer;white-space:nowrap;transition:all .15s;}
.as-btn.primary{background:var(--blue);color:#fff;}
.as-btn.primary:hover{opacity:.88;}
.as-btn.success{background:#34a853;color:#fff;}
.as-btn.success:hover{opacity:.88;}
.as-btn.secondary{background:var(--s0);border-color:var(--s4);color:var(--t2);}
.as-btn.secondary:hover{border-color:var(--blue);color:var(--blue);}
.as-btn.danger{background:var(--s0);border-color:var(--s4);color:var(--red);}
.as-btn.danger:hover{background:var(--redL);}
.as-btn[disabled]{opacity:.45;cursor:not-allowed;}
/* ── 106ed: Data Studio / COS Explorer access gates ──
   applyFeatureVisibility() toggles these body classes from the user's
   view_studio / view_cos permissions. The CSS hides EVERY entry point at
   once — topbar button, the desktop left-rail nav item, the mobile bottom
   tab-bar item, and the Defaults-Hub edit/import buttons — so a denied role
   can't slip in through a nav button the JS toggle missed. !important so a
   later tab-bar/nav re-render can't re-show them. Admin never gets the class. */
body.no-view-studio #studio-open-btn,
body.no-view-studio [data-aps-section="studio"],
body.no-view-studio .dhub-edit-btn,
body.no-view-studio .dhub-import-btn { display: none !important; }
body.no-view-cos #tn-cos { display: none !important; }

/* ── 106e8: Export permission gate ──
   When the current user's role denies the 'export' permission, the body gets
   the 'no-export-perm' class via applyFeatureVisibility(). The rule below
   hides any element tagged .js-export-action regardless of what other code
   tries to show it — important because some export buttons get un-hidden by
   data-loaded handlers (e.g. studio-bulk-export-btn appears when rows are
   selected), and we want the perm gate to win in that race. !important is
   intentional here — the perm gate must be authoritative.
   Admins bypass: applyFeatureVisibility() never sets the body class for them. */
body.no-export-perm .js-export-action { display: none !important; }

/* ── 2-col grid for General ── */
.as-2col{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;align-items:start;}
.as-2col .as-full{grid-column:1/-1;}
.as-2col .as-section{margin-top:0!important;}
.as-4col{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));}
/* 106fe: was @900px which kicked in too aggressively — Settings showed
   single-column on most laptops. Lowered to 700px so wider screens
   reliably get the 2-col layout. */
@media(max-width:700px){.as-2col{grid-template-columns:1fr;}}
/* ── Location cards ── */
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.loc-card{
  border:1.5px solid var(--s3);border-radius:12px;overflow:hidden;
  background:var(--s0);cursor:pointer;transition:border-color .15s,box-shadow .15s;}
.loc-card:hover{border-color:var(--blue);box-shadow:0 2px 12px rgba(26,115,232,.1);}
.loc-card-head{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--s3);background:var(--s1);}
.loc-card-icon{
  width:36px;height:36px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;}
.loc-card-title{font-size:13px;font-weight:600;color:var(--t1);}
.loc-card-sub{font-size:12px;color:var(--t3);margin-top:1px;}
.loc-card-count{
  font-size:12px;font-weight:700;padding:3px 9px;border-radius:20px;
  background:var(--s2);margin-left:auto;flex-shrink:0;}
.loc-card-body{padding:12px 16px;}
.loc-card-desc{font-size:12px;color:var(--t3);line-height:1.45;margin-bottom:10px;}
.loc-card-btn{
  width:100%;padding:8px;border:none;border-radius:6px;
  font-size:12px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:6px;
  transition:opacity .15s;}
.loc-card-btn:hover{opacity:.85;}
@media(max-width:700px){.loc-grid{grid-template-columns:1fr;}}
/* Compact location rows (replaces big cards in the Locations panel) */
.loc-compact-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.loc-compact{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 12px;border:1px solid var(--s3);border-radius:8px;
  background:var(--s0);color:var(--t1);cursor:pointer;text-align:left;
  transition:border-color .15s,background .15s;font-family:inherit;
}
.loc-compact:hover{border-color:var(--blue);background:var(--s1);}
.loc-compact:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px rgba(26,115,232,.15);}
.loc-compact-icon{
  width:28px;height:28px;border-radius:6px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
}
.loc-compact-name{flex:1;font-size:12px;font-weight:600;color:var(--t1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.loc-compact-count{font-size:11px;font-weight:700;padding:2px 7px;border-radius:10px;
  flex-shrink:0;white-space:nowrap;}
.loc-compact-chev{color:var(--t4);flex-shrink:0;}
@media(max-width:600px){.loc-compact-grid{grid-template-columns:1fr;}}
/* Field Visibility admin — tabbed, mobile-friendly */
.fv-tabbar{display:flex;gap:2px;border-bottom:1px solid var(--s3);margin-bottom:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.fv-tabbar::-webkit-scrollbar{display:none;}
.fv-tab{
  background:transparent;border:none;border-bottom:2px solid transparent;
  padding:8px 12px;font-size:12px;font-weight:500;color:var(--t3);
  cursor:pointer;white-space:nowrap;flex-shrink:0;font-family:inherit;
  transition:color .15s,border-color .15s;
}
.fv-tab:hover{color:var(--t2);}
.fv-tab.active{color:var(--t1);font-weight:600;}
.fv-tab:focus{outline:none;}
.fv-content{border:1px solid var(--s3);border-radius:6px;overflow:hidden;}
.fv-layer-hdr{padding:6px 12px;background:var(--s1);border-bottom:1px solid var(--s3);font-size:12px;}
.fv-count{color:var(--t3);}
.fv-list{display:flex;flex-direction:column;}
.fv-list-hdr,.fv-row{
  display:grid;grid-template-columns:1fr 80px 100px;gap:8px;
  align-items:center;padding:8px 12px;font-size:12px;
  border-bottom:1px solid var(--s2);
}
.fv-list-hdr{background:var(--s1);color:var(--t2);font-weight:600;font-size:12px;}
.fv-row{cursor:default;}
.fv-row:hover{background:var(--s1);}
.fv-col-label{color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fv-col-check{text-align:center;display:flex;justify-content:center;align-items:center;gap:4px;}
.fv-col-check input{cursor:pointer;}
.fv-check-mlbl{display:none;font-size:12px;color:var(--t3);}
.fv-actions{display:flex;gap:6px;padding:10px 12px;border-top:1px solid var(--s3);background:var(--s1);}
@media(max-width:520px){
  .fv-list-hdr{display:none;}
  .fv-row{grid-template-columns:1fr;gap:6px;padding:10px 12px;}
  .fv-row .fv-col-label{font-weight:600;color:var(--t1);margin-bottom:2px;}
  .fv-row .fv-col-check{justify-content:flex-start;gap:6px;}
  .fv-check-mlbl{display:inline;}
}
/* ── Add by Address (user additions) ── */
.ua-section{
  background:var(--s0);border:1px solid var(--s3);border-radius:10px;
  margin:8px 14px 14px;
}
.ua-header{
  display:flex;align-items:center;gap:8px;padding:9px 12px;
  background:linear-gradient(90deg,rgba(0,131,143,.08),rgba(0,131,143,.02));
  border-bottom:1px solid var(--s3);font-size:12px;font-weight:600;color:var(--t1);
  cursor:pointer;user-select:none;
  border-top-left-radius:9px;border-top-right-radius:9px;
}
.ua-header:hover{background:linear-gradient(90deg,rgba(0,131,143,.12),rgba(0,131,143,.04));}
.ua-header svg:first-child{color:#00838f;}
.ua-header > span{flex:1;}
.ua-chevron{color:var(--t3);transition:transform .2s;}
.ua-section.open .ua-chevron{transform:rotate(180deg);}
.ua-section.open .ua-header{border-bottom-color:var(--s3);}
.ua-section:not(.open) .ua-header{border-bottom-color:transparent;}
.ua-hint{font-size:11px;color:var(--t3);padding:4px 2px 0;line-height:1.4;}
/* User additions card body — list of saved addresses inside ds-card */
.ua-card-list{display:flex;flex-direction:column;}
.ua-card-item{
  display:flex;align-items:center;gap:6px;padding:8px 10px;
  border-bottom:1px solid var(--s2);font-size:12px;
}
.ua-card-item:last-child{border-bottom:none;}
.ua-card-item:hover{background:var(--s1);}
.ua-card-item-body{flex:1;min-width:0;cursor:pointer;}
.ua-card-item-name{color:var(--t1);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ua-card-item-addr{color:var(--t3);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ua-card-item-actions{display:flex;gap:3px;flex-shrink:0;}
.ua-card-ibtn{
  background:none;border:1px solid var(--s3);border-radius:4px;
  padding:4px 6px;color:var(--t2);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
}
.ua-card-ibtn:hover{background:var(--s2);color:var(--t1);border-color:var(--s4);}
.ua-card-ibtn-del:hover{background:var(--red);color:#fff;border-color:var(--red);}
/* Inline edit state — when the form body is relocated under a row */
.ua-card-item.ua-editing-row{background:rgba(0,131,143,.06);border-left:3px solid #00838f;padding-left:7px;}
.ua-body.ua-inline-edit{
  border-top:1px solid var(--s3);
  background:var(--s1);
  padding:8px 10px;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}
/* Editing-mode banner in the form */
.ua-editing-banner{
  background:#fff3e0;border:1px solid #ffcc80;border-radius:5px;
  padding:6px 9px;font-size:12px;color:#8a5a00;font-weight:600;
  display:flex;align-items:center;gap:6px;
}
.ua-editing-banner .ua-edit-cancel{
  margin-left:auto;background:none;border:none;color:#8a5a00;
  cursor:pointer;font-size:14px;padding:0 4px;line-height:1;
}
.ua-body{padding:10px 12px;display:flex;flex-direction:column;gap:6px;border-bottom-left-radius:9px;border-bottom-right-radius:9px;}
.ua-input{
  width:100%;padding:7px 10px;border:1px solid var(--s3);border-radius:6px;
  background:var(--s1);color:var(--t1);font-size:12px;font-family:inherit;
  box-sizing:border-box;
}
.ua-input:focus{outline:none;border-color:#00838f;box-shadow:0 0 0 2px rgba(0,131,143,.15);}
.ua-textarea{resize:vertical;min-height:40px;line-height:1.4;font-family:inherit;}
.ua-buttons{display:flex;gap:6px;margin-top:2px;flex-wrap:wrap;}
.ua-btn{
  padding:5px 9px;border:1px solid var(--s3);border-radius:5px;
  background:var(--s1);color:var(--t1);font-size:11px;font-weight:600;
  cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s;
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;
}
.ua-btn:hover{background:var(--s2);border-color:var(--s4);}
.ua-btn-primary{background:#00838f;color:#fff;border-color:#00838f;}
.ua-btn-primary:hover{background:#8540c7;border-color:#8540c7;}
.ua-btn-primary:disabled{opacity:.5;cursor:not-allowed;}
.ua-btn-save{background:var(--green);color:#fff;border-color:var(--green);}
.ua-btn-save:hover{opacity:.9;}
.ua-status{font-size:12px;color:var(--t3);min-height:14px;}
.ua-status.error{color:var(--red);}
.ua-status.success{color:var(--green);}
.ua-status.warn{color:#b85042;}  /* amber — used for low-accuracy GPS warnings */
.ua-save-row{
  display:flex;align-items:center;gap:8px;padding:8px 10px;
  background:rgba(0,131,143,.08);border:1px solid rgba(0,131,143,.25);
  border-radius:6px;margin-top:2px;
}
.ua-save-preview{flex:1;font-size:12px;color:var(--t2);line-height:1.35;}
.ua-list-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;background:var(--s1);border-top:1px solid var(--s3);
  font-size:12px;font-weight:600;color:var(--t2);
}
.ua-list-count{font-size:11px;color:var(--t3);background:var(--s2);padding:1px 7px;border-radius:10px;}
.ua-list{display:flex;flex-direction:column;}
.ua-item{
  display:flex;align-items:center;gap:8px;padding:8px 12px;
  border-top:1px solid var(--s2);font-size:12px;
}
.ua-item:hover{background:var(--s1);}
.ua-item-body{flex:1;min-width:0;cursor:pointer;}
.ua-item-name{color:var(--t1);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ua-item-addr{color:var(--t3);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ua-item-del{
  background:none;border:1px solid var(--s3);border-radius:4px;padding:3px 7px;
  color:var(--red);font-size:11px;cursor:pointer;flex-shrink:0;
}
.ua-item-del:hover{background:var(--red);color:#fff;border-color:var(--red);}
/* ── LLM provider cards ── */
#llm-cards-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start;}
@media(max-width:760px){#llm-cards-wrap{grid-template-columns:1fr;}}
.llm-provider-card{
  border:1.5px solid var(--s3);border-radius:10px;overflow:hidden;
  background:var(--s0);transition:border-color .15s;}
.llm-provider-card.configured{border-color:#34a85340;background:#34a8530a;}
.llm-provider-header{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;background:var(--s1);border-bottom:1px solid var(--s3);}
.llm-provider-logo{
  width:32px;height:32px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;flex-shrink:0;}
.llm-provider-name{font-size:13px;font-weight:600;color:var(--t1);flex:1;}
.llm-provider-badge{
  font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;
  background:var(--s2);color:var(--t3);}
.llm-provider-badge.ok{background:#34a85320;color:#34a853;}
.llm-provider-badge.err{background:#ea433520;color:#ea4335;}
.llm-provider-model{
  padding:6px 14px;font-size:12px;color:var(--t3);font-family:var(--mono);}
.llm-provider-key-row{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;border-top:1px solid var(--s3);}
.llm-provider-key-row input{
  flex:1;padding:7px 10px;border:1.5px solid var(--s4);border-radius:7px;
  font-size:12px;font-family:var(--mono);background:var(--s0);color:var(--t1);
  outline:none;}
.llm-provider-key-row input:focus{border-color:var(--blue);}
.llm-provider-actions{
  padding:8px 14px;display:flex;align-items:center;gap:8px;}
.llm-set-default-btn{
  background:none;border:1px solid var(--s4);border-radius:6px;
  font-size:12px;font-weight:600;color:var(--t3);padding:4px 10px;cursor:pointer;transition:all .12s;}
.llm-set-default-btn:hover{border-color:var(--blue);color:var(--blue);}
.llm-set-default-btn.is-default{background:#1e8e3e;border-color:#1e8e3e;color:#fff;cursor:default;box-shadow:0 1px 3px rgba(30,142,62,.35);}
.llm-set-default-btn.is-default:hover{background:#1e8e3e;border-color:#1e8e3e;color:#fff;}
.llm-status-line{padding:0 14px 10px;font-size:12px;color:var(--t3);min-height:18px;}
/* ── COS status badge ── */
#cos-status-badge{
  font-size:11px;font-weight:600;padding:2px 10px;border-radius:20px;
  border:1px solid var(--s4);color:var(--t3);background:var(--s2);}
/* ── Quick Links ── */
/* ── Column manager ── */
#dmp-cols{display:flex;flex-direction:column;overflow:hidden;}
/* COS status badge */
#cos-status-badge.ok{background:#34a85318;color:#34a853;border-color:#34a85340;}
#cos-status-badge.err{background:#ea433518;color:#ea4335;border-color:#ea433540;}
/* as-row plain inputs (without as-input class) */
.as-row input:not([type="checkbox"]):not([type="radio"]),
.as-row select{
  flex:1;padding:8px 10px;border:1.5px solid var(--s4);border-radius:7px;
  font-size:13px;font-family:var(--font);color:var(--t1);
  background:var(--s0);outline:none;transition:border-color .15s;}
.as-row input:focus,.as-row select:focus{border-color:var(--blue);}
/* Make pane for cols use flex column */
#dmp-cols{ display:none;flex-direction:column;flex:1;overflow:hidden; }
#dmp-cols.active{ display:flex; }
@media(max-width:860px){#ql-btn-label,#ql-chevron{display:none;}#ql-btn{padding:5px 8px;}}
/* ═══════════════════════════════════════
   COS EXPLORER TAB
═══════════════════════════════════════ */
#tab-cos{display:none;flex-direction:column;height:100%;overflow:hidden;}
#tab-cos.active-tab{display:flex;}
.cos-toolbar{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:10px 12px;border-bottom:1px solid var(--s3);
  background:var(--s1);flex-shrink:0;}
.cos-type-pills{display:flex;gap:4px;flex-wrap:wrap;}
.cos-pill{
  padding:4px 10px;border-radius:20px;border:1.5px solid var(--s4);
  font-size:12px;font-weight:600;cursor:pointer;color:var(--t2);
  background:var(--s0);transition:all .12s;}
.cos-pill.active{background:var(--blue);border-color:var(--blue);color:#fff;}
#cos-table-wrap{flex:1;overflow-y:auto;overflow-x:auto;}
#cos-table-wrap::-webkit-scrollbar{width:4px;height:4px;}
#cos-table-wrap::-webkit-scrollbar-thumb{background:var(--s4);border-radius:2px;}
.cos-table{width:100%;border-collapse:collapse;font-size:12px;}
.cos-table th{
  position:sticky;top:0;z-index:2;
  padding:8px 10px;background:var(--s1);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;color:var(--t3);
  border-bottom:1px solid var(--s3);text-align:left;}
.cos-table td{
  padding:8px 10px;border-bottom:1px solid var(--s3);
  color:var(--t1);vertical-align:top;}
.cos-table tr:hover td{background:var(--s1);}
.cos-table tr:last-child td{border-bottom:none;}
/* ═══════════════════════════════════════
   HELP TAB — polished
═══════════════════════════════════════ */
#tab-help{display:none;flex-direction:column;overflow:hidden;}
#tab-help.active-tab{display:flex;}
.help-hero{
  background:linear-gradient(135deg,var(--blue) 0%,#1557b0 100%);
  padding:18px 16px;color:#fff;flex-shrink:0;}
.help-hero-title{font-size:16px;font-weight:700;margin-bottom:4px;}
.help-hero-sub{font-size:12px;opacity:.85;line-height:1.5;}
.help-search-wrap{padding:10px 12px;border-bottom:1px solid var(--s3);flex-shrink:0;position:relative;}
.help-search-wrap svg{position:absolute;left:22px;top:50%;transform:translateY(-50%);}
/* Ship 106dp: search-icon-inside-input helper (Results filter, etc.) */
.u-icon-abs{position:absolute;left:8px;top:50%;transform:translateY(-50%);pointer-events:none;}
#help-search{
  width:100%;padding:8px 10px 8px 34px;border:1.5px solid var(--s4);
  border-radius:8px;font-size:13px;font-family:var(--font);
  outline:none;background:var(--s0);color:var(--t1);}
#help-search:focus{border-color:var(--blue);}
.help-body{flex:1;overflow-y:auto;}
.help-body::-webkit-scrollbar{width:4px;}
.help-body::-webkit-scrollbar-thumb{background:var(--s4);border-radius:2px;}
.help-section{border-bottom:1px solid var(--s3);}
.help-section-header{
  display:flex;align-items:center;gap:10px;padding:12px 14px;
  cursor:pointer;user-select:none;background:var(--s0);transition:background .12s;}
.help-section-header:hover{background:var(--s1);}
.help-section-icon{font-size:16px;flex-shrink:0;width:24px;text-align:center;}
.help-section-title{flex:1;font-size:13px;font-weight:600;color:var(--t1);}
.help-section-arrow{font-size:11px;color:var(--t3);transition:transform .2s;}
.help-section-arrow.open{transform:rotate(90deg);}
.help-section-body{display:none;padding:0 14px 12px 48px;}
.help-section-body.open{display:block;}
.help-topic{padding:8px 0;border-bottom:1px solid var(--s3);}
.help-topic:last-child{border-bottom:none;}
.help-topic-q{
  font-size:12px;font-weight:600;color:var(--t1);margin-bottom:4px;
  cursor:pointer;display:flex;align-items:flex-start;gap:6px;}
.help-topic-q::before{
  content:'Q';font-size:11px;font-weight:700;color:var(--blue);
  background:var(--blueL,#e8f0fe);border-radius:3px;
  padding:1px 4px;flex-shrink:0;margin-top:1px;}
.help-topic-a{font-size:12px;color:var(--t2);line-height:1.6;padding-left:22px;display:none;}
.help-topic-a.open{display:block;}
/* ═══════════════════════════════════════
   CUSTOM CONFIRM MODAL
═══════════════════════════════════════ */
#app-confirm-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(16,17,20,.6);
  backdrop-filter:blur(4px);z-index:99000;
  align-items:center;justify-content:center;}
#app-confirm-overlay.open{display:flex;}
#app-confirm-box{
  background:var(--s0);border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  width:min(400px,90vw);padding:24px;
  display:flex;flex-direction:column;gap:16px;}
#app-confirm-title{font-size:15px;font-weight:700;color:var(--t1);}
#app-confirm-msg{font-size:13px;color:var(--t2);line-height:1.55;}
#app-confirm-btns{display:flex;gap:8px;justify-content:flex-end;}
/* ═══════════════════════════════════════
   ADMIN LAYOUT — Panel body & form fixes
═══════════════════════════════════════ */
/* Panel body wrapper (content inside av-panel) */
.av-panel-body{display:flex;flex-direction:column;gap:16px;padding:16px;flex:1;overflow-y:auto;min-height:0;}
/* Ship 106p: extra bottom padding so the last items aren't covered by
   the mobile tab bar (56px) or other sticky bottom UI. Safe-area-inset
   handles iOS notch. Applied at all viewport widths because admin can
   also have other floating UI; on desktop this just adds harmless air. */
.av-panel-body{padding-bottom:calc(72px + env(safe-area-inset-bottom, 0));}
/* Sections inside av-panel-body get their own spacing */
.av-panel > .as-section,
.av-panel > .as-2col,
.av-panel > .av-panel-body > .as-section,
.av-panel > .av-panel-body > .as-2col{
  margin-bottom:0;}
/* Field stacking fix: as-field always column */
.as-field{display:flex;flex-direction:column;gap:5px;}
.as-field .as-input{width:100%;}
/* Row inputs flex properly */
.as-row .as-input,.as-row input,.as-row select{flex:1;min-width:0;}
/* Select styling */
select.as-input{
  padding:8px 10px;border:1.5px solid var(--s4);border-radius:8px;
  font-size:13px;font-family:var(--font);color:var(--t1);
  background:var(--s0);outline:none;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  padding-right:28px;}
select.as-input:focus{border-color:var(--blue);}
/* Inline code */
.as-section-body code{
  font-family:var(--mono);font-size:12px;
  background:var(--s2);padding:1px 5px;border-radius:4px;color:var(--t2);}
/* Compact section spacing inside views */
.av-content .as-section + .as-section{margin-top:12px;}
/* 2-col grid inside panels */
.av-panel .as-2col{gap:12px;}
/* QL dropdown enhanced */
/* QL right panel */
/* ── Audit Log ── */
#audit-log-table-wrap{
  flex:1;overflow-y:auto;overflow-x:auto;
  border:1px solid var(--s3);border-radius:8px;
  background:var(--s0);}
.audit-table{width:100%;border-collapse:collapse;font-size:12px;}
.audit-table th{
  position:sticky;top:0;z-index:2;
  padding:8px 12px;background:var(--s1);
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:var(--t3);
  border-bottom:1px solid var(--s3);text-align:left;}
.audit-table td{
  padding:8px 12px;border-bottom:1px solid var(--s3);
  color:var(--t1);vertical-align:top;}
.audit-table tr:last-child td{border-bottom:none;}
.audit-table tr:hover td{background:var(--s1);}
.audit-badge{
  font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px;
  display:inline-block;}
.audit-badge.login{background:#e8f0fe;color:#1a73e8;}
.audit-badge.admin{background:#fce8e6;color:#d93025;}
.audit-badge.data{background:#e6f4ea;color:#137333;}
.audit-badge.settings{background:#fef3e2;color:#f9ab00;}
.audit-badge.error{background:#f5f5f5;color:#666;}
.audit-filters{
  display:flex;align-items:center;gap:8px;
  padding:10px 0;flex-wrap:wrap;}
.audit-filter-btn{
  padding:4px 12px;border-radius:20px;border:1.5px solid var(--s4);
  font-size:12px;font-weight:600;cursor:pointer;color:var(--t2);
  background:var(--s0);transition:all .12s;}
.audit-filter-btn.active{background:var(--blue);border-color:var(--blue);color:#fff;}
/* ── Trigger button ── */
/* QL dropdown panel */
/* ── Dropdown internals ── */
/* ── Right-side slide panel ── */
/* ── Admin Quick Links rows ── */
/* ═══════════════════════════════════════════════════════════
   QUICK LINKS  —  topbar button · dropdown · slide panel
════════════════════════════════════════════════════════════ */
/* ── Topbar trigger button ───────────────────────────── */
#ql-menu-wrap{position:relative;flex-shrink:0;}
#ql-btn{
  /* inherits .tb-btn pill style */
  gap:5px;}
#ql-btn .ql-caret{
  width:10px;height:10px;
  transition:transform .18s;
  color:var(--t3);flex-shrink:0;}
#ql-btn.active .ql-caret{transform:rotate(180deg);}
/* ── Dropdown menu ───────────────────────────────────── */
#ql-dropdown{
  display:none;
  position:fixed;z-index:10200;
  min-width:230px;max-width:320px;
  background:var(--s0);
  border:1px solid var(--s3);
  border-radius:12px;
  box-shadow:0 10px 40px rgba(0,0,0,.16),0 2px 8px rgba(0,0,0,.08);
  overflow:hidden;
  padding-bottom:6px;}
#ql-dropdown.open{
  display:block;
  animation:qlDropIn .16s cubic-bezier(.16,1,.3,1);}
@keyframes qlDropIn{
  from{opacity:0;transform:translateY(-8px) scale(.96)}
  to  {opacity:1;transform:none}}
.ql-dd-header{
  padding:11px 14px 7px;
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.7px;color:var(--t3);}
.ql-dd-divider{height:1px;background:var(--s3);margin:0 10px 5px;}
.ql-dd-item{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:9px 14px;
  background:none;border:none;
  cursor:pointer;text-align:left;
  color:var(--t1);font-size:13px;font-weight:500;
  transition:background .1s;}
.ql-dd-item:hover{background:var(--s2);}
.ql-dd-item:active{background:var(--s3);}
.ql-dd-icon{
  flex-shrink:0;color:var(--t3);
  display:flex;align-items:center;justify-content:center;
  width:18px;}
.ql-dd-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ql-dd-badge{
  flex-shrink:0;
  font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:20px;
  letter-spacing:.3px;}
.ql-dd-badge.panel{background:#e8f0fe;color:#1a73e8;}
.ql-dd-badge.tab  {background:#e6f4ea;color:#34a853;}
.ql-dd-empty{
  padding:22px 14px 16px;
  display:flex;flex-direction:column;align-items:center;
  gap:6px;text-align:center;
  font-size:12px;color:var(--t3);line-height:1.5;}
/* ── Right-side slide panel ──────────────────────────── */
#ql-panel-newtab:hover{border-color:var(--blue);color:var(--blue);}
#ql-panel-close:hover{background:var(--redL);color:var(--red);}
/* ── Admin links list ────────────────────────────────── */
#ql-admin-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:8px;align-items:start;}
.ql-admin-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border:1.5px solid var(--s3);border-radius:10px;
  background:var(--s0);
  transition:border-color .15s;}
.ql-admin-row:hover{border-color:var(--s4);}
.ql-admin-row.editing{flex-direction:column;align-items:stretch;gap:8px;grid-column:1/-1;}
.ql-admin-edit{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;
  background:none;border:none;cursor:pointer;
  color:var(--t3);flex-shrink:0;transition:all .15s;}
.ql-admin-edit:hover{background:var(--s2);color:var(--blue);}
.ql-admin-grip{display:inline-flex;align-items:center;cursor:grab;color:var(--t3);flex-shrink:0;}
.ql-admin-grip:active{cursor:grabbing;}
.ql-admin-row.ql-dragging{opacity:.45;}
.ql-admin-row.ql-drop-target{border-color:var(--blue)!important;box-shadow:inset 0 0 0 1px var(--blue);}
.ql-admin-drag{
  color:var(--t3);cursor:grab;font-size:16px;
  flex-shrink:0;user-select:none;line-height:1;}
.ql-admin-drag:active{cursor:grabbing;}
.ql-admin-info{flex:1;min-width:0;}
.ql-admin-name{
  font-size:13px;font-weight:500;color:var(--t1);}
.ql-admin-url{
  font-size:12px;color:var(--t3);font-family:var(--mono);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ql-mode-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 11px;border-radius:20px;
  font-size:12px;font-weight:700;letter-spacing:.3px;
  cursor:pointer;flex-shrink:0;transition:all .15s;
  border:1.5px solid;background:none;}
.ql-mode-badge.panel{color:#1a73e8;border-color:#1a73e8;}
.ql-mode-badge.panel:hover{background:#e8f0fe;}
.ql-mode-badge.tab{color:#34a853;border-color:#34a853;}
.ql-mode-badge.tab:hover{background:#e6f4ea;}
.ql-admin-del{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:8px;
  background:none;border:none;cursor:pointer;
  color:var(--t3);flex-shrink:0;transition:all .15s;}
.ql-admin-del:hover{background:var(--redL);color:var(--red);}
#user-topbar-btn{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;border:1.5px solid var(--s4);background:var(--s0);color:var(--t2);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;}
#user-topbar-btn:hover{border-color:var(--blue);color:var(--blue);}
.as-btn.ghost{background:none;border-color:transparent;color:var(--t2);padding:5px 8px;}
.as-btn.ghost:hover{background:var(--s2);border-color:var(--s4);}
/* Admin full-page view layout (was modal popup) */
#admin-tab-bar{ overflow-x:auto; flex-shrink:0; }
#admin-body{ min-height:0;display:flex;flex-direction:column; }
/* ── Inner tabs (DB connection/status, etc.) ── */
.inner-tab-bar{display:flex;gap:4px;padding:0 0 12px;flex-shrink:0;}
.inner-tab{display:inline-flex !important;align-items:center !important;justify-content:center !important;padding:6px 16px !important;border-radius:20px !important;border:1.5px solid var(--s4) !important;background:var(--s0) !important;color:var(--t2) !important;font-size:12px !important;font-weight:600 !important;cursor:pointer !important;transition:all .15s;white-space:nowrap;}
.inner-tab:hover{border-color:var(--blue) !important;color:var(--blue) !important;}
.inner-tab.active{border-color:var(--blue) !important;color:var(--blue) !important;background:var(--blueL) !important;}
.inner-tab-pane{display:none;}
.inner-tab-pane.active{display:block;}
/* ── Tab nav 2-row layout ── */
#tab-nav{
  display:flex; flex-direction:column;
  border-bottom:1px solid var(--s4); flex-shrink:0;
}
.tab-row{ display:flex; width:100%; }
.tab-row:first-child{ border-bottom:1px solid var(--s3); }
.tab-row .tab-btn{
  flex:1; min-width:0; overflow:hidden;
  padding:8px 2px; font-size:12px; gap:2px;
  flex-direction:column; align-items:center; justify-content:center;
}
.tab-row .tab-btn .tab-label{
  display:block; font-size:11px; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%; text-align:center;
}
.tab-row .tab-btn svg{ flex-shrink:0; }
/* ds-card two-line header: name above meta */
.ds-header{ flex-wrap:nowrap; align-items:center; }
.ds-name-wrap{ flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;overflow:hidden; }
.ds-name-wrap .ds-name{ white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.ds-name-wrap .ds-meta{ font-size:11px;color:var(--t3); }
/* Audit log panel full height */
#avp-sys-audit.active{display:flex !important;flex-direction:column;flex:1;overflow:hidden;}
/* System panel content padding and scroll */
.av-panel-body > .as-section { margin:0; border-radius:0; border:none; flex-shrink:0; }
.av-panel-body > .as-section:last-child { flex:1; }
.av-panel-body > .inner-tab-bar { flex-shrink:0; padding:12px 16px 0; }
.av-panel-body > [id^="dbt-pane-"] { flex:1; overflow-y:auto; min-height:0; padding:16px; }
/* Ensure as-section content areas scroll */
.as-section-body { overflow-y:auto; }
/* Direct scrollable panel body */
.av-panel-body.scrollable { overflow-y:auto; }
/* Smooth role reveal — prevent hard flash when role classes are removed */
#side, #topbar { transition: opacity .15s ease; }
body.role-loading #side,
body.role-loading #topbar { opacity: 0; }
body:not(.role-loading) #side,
body:not(.role-loading) #topbar { opacity: 1; }
/* Admin modal — responsive breakpoints */
@media (max-width: 768px){
  #admin-settings-modal{
    width:100vw !important; height:100vh !important;
    max-width:100vw !important; max-height:100vh !important;
    top:0 !important; left:0 !important;
    transform:none !important;
    border-radius:0 !important;
    resize:none !important;
  }
  /* Show hamburger toggle at the same breakpoint where the sidenav becomes a drawer */
  #as-mobile-nav-btn{display:flex !important;}
  /* Hide tab labels — keep only the dot indicator to save horizontal space */
  .atb-tab span.atb-label{display:none;}
  .atb-tab{padding:6px 10px;}
  /* Sidenav becomes drawer */
  .av-sidenav{
    position:absolute !important;
    left:0; top:0; bottom:0;
    width:220px; min-width:220px;
    transform:translateX(-100%);
    transition:transform .22s ease;
    z-index:20;
    box-shadow:4px 0 24px rgba(0,0,0,.2);
  }
  #admin-settings-modal.mobile-nav-open .av-sidenav{
    transform:translateX(0);
  }
  /* Backdrop overlay when drawer is open — tap to close */
  #admin-body::before{
    content:'';position:absolute;inset:0;background:rgba(0,0,0,0);
    pointer-events:none;transition:background .22s ease;z-index:15;
  }
  #admin-settings-modal.mobile-nav-open #admin-body::before{
    background:rgba(0,0,0,.4);pointer-events:auto;
  }
  /* Content takes full width when sidenav is hidden */
  .av-content{ width:100% !important; min-width:0 !important; }
  /* Panel padding reduces */
  .av-panel-body{ padding:12px !important; gap:12px !important; }
  /* Tab bar scrolls horizontally */
  #admin-tab-bar{ overflow-x:auto; padding:8px 12px !important; }
  /* Modal header compacts */
  #admin-settings-header{ height:44px !important; padding:0 12px !important; }
  /* Hide breadcrumb on small screens — limited space */
  #admin-header-breadcrumb{display:none;}
}
@media (max-width: 480px){
  .av-panel-body{ padding:10px !important; gap:10px !important; }
  .as-section-title{ font-size:13px !important; padding:10px 12px !important; }
  .as-section-body{ padding:10px 12px !important; }
  .atb-tab{ font-size:11px !important; padding:5px 10px !important; }
}
/* Ensure every admin panel's content fills the container width evenly */
.av-panel-body > * { width: 100%; box-sizing: border-box; }
.av-panel-body > .as-2col { width: 100%; }
.as-section { width: 100%; box-sizing: border-box; }
/* Panels that use custom header/table layouts (users) stay as-is via their own inline styles */
/* ════════════════════════════════════════════════════════════════════════ */
/*  DATA STUDIO — full-page data management interface                        */
/* ════════════════════════════════════════════════════════════════════════ */
#studio-root {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--s0); color: var(--t1);
  display: flex; flex-direction: column;
  font-family: var(--font);
}
#studio-root.open { display: flex !important; }
/* Topbar */
/* Ship B: studio-topbar removed. Save/Export migrated to .studio-toolbar
   (action bar above data). The internal section sidebar (#studio-sources)
   still has its own collapse toggle in its footer. */
.studio-dirty {
  font-size:11px; font-weight: 700;
  padding: 3px 8px; border-radius: 10px;
  background: #fff4e5; color: #b26a00; border: 1px solid #ffcc80;
  text-transform: uppercase; letter-spacing: .5px;
  margin-left: 4px;
}
/* Inline section-sidebar toggle button living in the studio-toolbar.
   Looks the same as other studio-btn-icon buttons in the toolbar for
   visual consistency. */
.studio-sb-toggle-inline {
  margin-right: 2px;
}
/* Visual separator between adjacent button groups in the toolbar */
.studio-toolbar-sep {
  width: 1px; height: 22px; background: var(--s3); margin: 0 4px;
}
/* Ship 106aq: Saved Views toolbar group — keeps the label, dropdown,
   and save/delete buttons visually grouped as one feature. */
.studio-views-group {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 4px 0 6px;
}
.studio-views-label {
  font-size: 11px; font-weight: 600;
  color: var(--t2);
  letter-spacing: .2px;
  white-space: nowrap;
  margin-right: 2px;
}
.studio-btn, .studio-btn-sm {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 9px;
  border: 1.5px solid var(--s3); background: var(--s0);
  color: var(--t1); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s;
  font-family: var(--font);
  min-height: 36px;
}
.studio-btn svg, .studio-btn-sm svg{ width:16px; height:16px; }
.studio-btn-sm { padding: 6px 12px; font-size:12px; min-height:32px; }
.studio-btn:hover, .studio-btn-sm:hover { background: var(--s2); border-color: var(--s4); }
.studio-btn.primary, .studio-btn-sm.primary {
  background: var(--blue); color: #fff; border-color: var(--blue);
}
.studio-btn.primary:hover:not(:disabled), .studio-btn-sm.primary:hover {
  background: #1765cc; border-color: #1765cc;
}
.studio-btn:disabled { opacity: .4; cursor: not-allowed; }
.studio-btn-sm.danger { color: var(--red); border-color: #f5c6c2; }
.studio-btn-sm.danger:hover { background: #fce8e6; }
/* 106fd: Studio toolbar icon buttons bumped from 32→36 with bigger
   inner SVGs. The old 14px SVGs inside 32px buttons read as tiny in
   the screenshot Nef shared. */
.studio-btn-icon, .studio-btn-icon-sm {
  width: 36px; height: 36px; border-radius: 9px;
  border: 1.5px solid var(--s3); background: var(--s0);
  cursor: pointer; color: var(--t2);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; line-height:1;
  transition: all .15s;
}
.studio-btn-icon svg, .studio-btn-icon-sm svg{
  width:18px; height:18px;
}
.studio-btn-icon-sm { width: 28px; height: 28px; border: none; }
.studio-btn-icon:hover { background: var(--blue); color: #fff; border-color: var(--blue); transform:translateY(-1px); box-shadow:0 3px 8px rgba(26,115,232,.25);}
.studio-btn-icon-sm:hover { color: var(--red); }
/* Body layout */
.studio-body {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 240px 1fr 340px;
  /* Ship 106x: explicit grid-auto-rows so the single implicit row fills
     the container height. Default auto sizes rows to content; on mobile
     where studio-sources and studio-detail are position:absolute and
     only studio-grid remains in grid flow, the auto row would otherwise
     collapse to the toolbar+tabs natural height — leaving the data
     area BELOW the visible grid track with zero height. With 1fr the
     row always takes the full studio-body height regardless of how
     many children are in flow. */
  grid-auto-rows: 1fr;
  background: var(--s0);
  transition: grid-template-columns .22s ease;
  position: relative;
  width: 100%;        /* Ship 106p: ensure body claims full available width */
  min-width: 0;
}
/* Ship 106p: ensure the middle column (studio-grid) fills its grid track
   even if some flex/grid weirdness occurs. width:100% inside a grid track
   is safe — width is constrained by the track, not the viewport. */
.studio-grid {
  width: 100%;
  min-width: 0;
}
/* When right detail panel is hidden, collapse the third column to 0 */
#studio-root.detail-collapsed .studio-body {
  grid-template-columns: 240px 1fr 0;
}
/* Detail panel & tab are hidden entirely for views that don't use record
   selection (Chart, Pivot, Analytics). Different from collapsed because
   even the slide-tab is removed — there's nothing to slide back. */
#studio-root.detail-hidden .studio-body {
  grid-template-columns: 240px 1fr 0;
}
#studio-root.detail-hidden .studio-detail,
#studio-root.detail-hidden .studio-detail-show-tab {
  display: none !important;
}
#studio-root.detail-collapsed .studio-detail {
  width: 0;
  overflow: hidden;
  border-left: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}
#studio-root.detail-collapsed .studio-detail-show-tab {
  display: flex;
}
.studio-detail-show-tab {
  display: none;
  position: absolute;
  top: 50%; right: 0;
  transform: translateY(-50%);
  z-index: 5;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 8px 0 0 8px;
  padding: 16px 8px;
  cursor: pointer;
  box-shadow: -2px 2px 8px rgba(0,0,0,.15);
  align-items: center; justify-content: center;
  font-size: 12px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 1px;
  font-weight: 600;
  transition: background .15s ease;
}
.studio-detail-show-tab:hover {
  background: var(--blueDark, var(--blue));
  filter: brightness(1.1);
}
/* ── LEFT: Sources sidebar ── */
.studio-sources {
  border-right: 1px solid var(--s3);
  background: var(--s1);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.studio-sources-section {
  padding: 16px 12px 8px;
  border-bottom: 1px solid var(--s3);
}
/* Ship 106ab: collapsible logical groups. Replaces .studio-sources-section
   for the four-group sidebar layout. Header is a button; content slides
   open/closed via max-height. Only the .open group reveals its content. */
.studio-sources-group {
  border-bottom: 1px solid var(--s3);
}
.studio-sources-group:last-child { border-bottom: none; }
.studio-group-header {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--t1);
  text-align: left;
  letter-spacing: .3px;
  transition: background .12s;
}
.studio-group-header:hover { background: var(--s1); }
.studio-group-header:hover .studio-group-icon{ transform:scale(1.05); }
.studio-group-arrow {
  display: inline-block;
  font-size:11px;
  color: var(--t3);
  transition: transform .18s ease;
  width: 10px; text-align: center;
  flex-shrink: 0;
}
.studio-sources-group.open .studio-group-arrow { transform: rotate(90deg); }
/* 106f9: group icon bumped to SaaS standard 20px so the chevron + icon
   + title row reads at the same scale as Admin's section headers. */
.studio-group-icon { font-size: 20px; flex-shrink: 0; filter:drop-shadow(0 1px 1px rgba(0,0,0,.10)); transition:transform .12s; }
.studio-group-title { flex: 1; }
.studio-group-content {
  /* Collapsed by default — only .open groups reveal content */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .22s ease, opacity .18s ease, padding .22s ease;
  /* Ship 106ah: was padding: 0 12px — that 12px horizontal padding made
     source items sit inside the sidebar edge, so the active blue line
     appeared 12px from the left rather than flush like Admin's. Now
     items run edge-to-edge; the blue line touches the sidebar boundary. */
  padding: 0;
}
.studio-sources-group.open .studio-group-content {
  /* Generous max-height so even huge group contents reveal fully.
     Use overflow-y:auto so very long groups still scroll within. */
  max-height: 65vh;
  opacity: 1;
  overflow-y: auto;
  padding: 0 0 6px;
}
.studio-sources-title {
  font-size:11px; font-weight: 700;
  color: var(--t3); text-transform: uppercase;
  letter-spacing: .6px;
  padding: 0 8px 8px;
  display: flex; align-items: center; justify-content: space-between;
}
.studio-sources-add {
  width: 20px; height: 20px; border-radius: 6px;
  border: none; background: var(--s3); color: var(--t2);
  font-size: 14px; line-height: 1; cursor: pointer;
  transition: all .15s;
}
.studio-sources-add:hover { background: var(--blue); color: #fff; }
.studio-source-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px; color: var(--t1);
  transition: background .12s;
}
.studio-source-item:hover {
  background: var(--blueL);
  color: var(--blue);
}
.studio-source-item:hover .studio-source-icon{ transform:scale(1.06); }
.studio-source-item.active {
  background: transparent;
  color: var(--blue);
  font-weight: 600;
  box-shadow: inset 3px 0 var(--blue);
}
.studio-source-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(26, 115, 232, 0.12);
  font-size: 18px; flex-shrink: 0;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.10));
  transition: background .12s, transform .12s;
}
.studio-source-item.active .studio-source-icon {
  background: rgba(26, 115, 232, 0.30);
}
/* Ship 106ag: removed the .studio-source-item.active .studio-source-icon
   override that turned the icon into a blue square with white symbol
   when selected. That second visual indicator (on top of the blue left
   line + bold text) made Studio's selection look heavier than Admin's.
   Now icon stays the same regardless of state — selection is signaled
   only by the line + bold + blue text, matching Admin's clean look. */
.studio-source-item-count {
  margin-left: auto; font-size:11px;
  color: var(--t4); font-weight: 500;
}
.studio-empty-hint {
  font-size:12px; color: var(--t4);
  padding: 10px 10px; font-style: italic;
}
.studio-sources-footer { margin-top: auto; border-top: 1px solid var(--s3); }
/* ── CENTER: Grid / content ── */
.studio-grid {
  display: flex; flex-direction: column;
  min-width: 0; overflow: hidden;
  background: var(--s0);
}
.studio-toolbar {
  flex-shrink: 0;
  padding: 14px 20px;
  border-bottom: 1px solid var(--s3);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  background: var(--s1);
}
.studio-toolbar-left { display: flex; align-items: center; gap: 10px; }
.studio-toolbar-left h2 {
  font-size: 16px; font-weight: 700; margin: 0;
  color: var(--t1); letter-spacing: -.2px;
}
.studio-chip {
  font-size:11px; font-weight: 700;
  padding: 3px 8px; border-radius: 10px;
  background: var(--s2); color: var(--t3);
  text-transform: uppercase; letter-spacing: .4px;
}
.studio-toolbar-right { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
/* 106fe: small visual separator groups in the toolbar — gives the eye
   a place to rest between related action groups (search | views |
   columns/mode | actions | export+save). */
.studio-toolbar-sep{ width:1px; height:24px; background:var(--s3); margin:0 4px; }
.studio-search {
  position: relative;
  display: flex; align-items: center;
}
.studio-search svg {
  position: absolute; left: 10px;
  color: var(--t4); pointer-events: none;
}
.studio-search input {
  padding: 7px 12px 7px 30px;
  border: 1.5px solid var(--s3); border-radius: 8px;
  background: var(--s0); color: var(--t1);
  font-size: 12px; width: 220px;
  outline: none; transition: border .15s;
  font-family: var(--font);
}
.studio-search input:focus { border-color: var(--blue); }
#studio-mode-select {
  padding: 7px 10px;
  border: 1.5px solid var(--s3); border-radius: 8px;
  background: var(--s0); color: var(--t1);
  font-size: 12px; cursor: pointer;
  font-family: var(--font);
}
/* Ship 106av: catch-all rule so every <select> inside Studio renders
   with the custom app dropdown chrome (appearance:none + SVG arrow)
   instead of the browser-native dropdown. Previously each select had
   to remember to use .as-input, .fsel, or its own appearance:none —
   easy to forget when adding new dropdowns (which is what happened
   with studio-view-select and others). This rule applies by default;
   the :not() exceptions skip selects that already have their own
   complete styling. */
#studio-root select:not(.as-input):not(.fsel):not(.u-select-arrow) {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 26px;
  font-family: var(--font);
  cursor: pointer;
}
#studio-root select:not(.as-input):not(.fsel):not(.u-select-arrow):focus {
  border-color: var(--blue);
  outline: none;
}
/* Hover state on toolbar selects for subtle interactive feedback */
.studio-toolbar select:not(.as-input):not(.fsel):not(.u-select-arrow):hover {
  border-color: var(--blue);
}

/* Ship 106bc: previously had a .studio-cfg-select class for the
   compact chart/pivot dropdowns. Removed in favor of using .as-input
   throughout Studio so every dropdown matches the rest of the app's
   visual language (email wizard, admin panels, dialogs). The catch-all
   rule above still styles any select that forgets to use a class. */
.studio-content {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
/* Grid table */
.studio-table-wrap {
  flex: 1; overflow: auto;
  padding: 0;
}
.studio-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.studio-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--s1);
  font-size:12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--t3); text-align: left;
  padding: 10px 14px;
  border-bottom: 2px solid var(--s3);
  white-space: nowrap; user-select: none;
}
.studio-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--s3);
  color: var(--t1);
  max-width: 220px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.studio-table tbody tr { cursor: pointer; transition: background .1s; }
.studio-table tbody tr:hover { background: var(--s1); }
.studio-table tbody tr.active {
  background: var(--blueL); box-shadow: inset 3px 0 0 var(--blue);
}
.studio-table tbody tr.active td { color: var(--t1); }
/* JSON mode */
.studio-json-toolbar {
  padding: 10px 20px;
  display: flex; gap: 8px; align-items: center;
  border-bottom: 1px solid var(--s3); background: var(--s1);
  flex-shrink: 0;
}
.studio-json-status { font-size:12px; color: var(--t3); margin-left: auto; }
#studio-json-textarea {
  flex: 1; width: 100%;
  padding: 16px 20px;
  border: none; outline: none; resize: none;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.55;
  background: var(--s0); color: var(--t1);
}
/* Schema mode */
.studio-schema-intro, .studio-import-intro { padding: 20px; border-bottom: 1px solid var(--s3); }
.studio-schema-intro p, .studio-import-intro p {
  margin: 0; font-size: 13px; color: var(--t2); line-height: 1.55;
}
.studio-schema-list {
  flex: 1; overflow-y: auto;
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.studio-schema-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--s1); border-radius: 8px;
  border: 1px solid var(--s3);
}
.studio-schema-row input, .studio-schema-row select {
  padding: 6px 10px;
  border: 1.5px solid var(--s3); border-radius: 6px;
  background: var(--s0); color: var(--t1);
  font-size: 12px; font-family: var(--font);
}
.studio-schema-row input[type="text"] { flex: 1; }
.studio-schema-row.core { opacity: .7; background: var(--s2); }
.studio-schema-row.core::before {
  content: "🔒"; margin-right: 4px; font-size:12px;
}
.studio-schema-add {
  padding: 12px 20px;
  border-top: 1px solid var(--s3); background: var(--s1);
  display: flex; gap: 8px; align-items: center;
  flex-shrink: 0;
}
.studio-schema-add input, .studio-schema-add select {
  padding: 7px 12px;
  border: 1.5px solid var(--s3); border-radius: 8px;
  background: var(--s0); font-size: 12px; font-family: var(--font);
}
/* Import mode */
.studio-import-drop {
  margin: 20px; padding: 40px;
  border: 2px dashed var(--s4); border-radius: 12px;
  text-align: center; color: var(--t2);
  cursor: pointer; transition: all .15s;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.studio-import-drop.dragover {
  border-color: var(--blue); background: var(--blueL);
  color: var(--blue);
}
.studio-import-drop p { margin: 4px 0; font-size: 13px; }
#studio-import-preview {
  padding: 0 20px 20px;
  overflow-y: auto;
}
/* ── RIGHT: Detail pane ── */
.studio-table tbody td.readonly {
  color: var(--t3);
  background: var(--s2);
}
.studio-table tbody td:not(.readonly) {
  cursor: text;
}
.studio-table tbody td:not(.readonly):hover {
  background: rgba(var(--blueRgb,52,116,222), 0.05);
  outline: 1px dashed var(--s4);
  outline-offset: -3px;
}
.studio-cell-edit {
  outline: none !important;
}
.studio-detail {
  border-left: 1px solid var(--s3);
  background: var(--s1);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.studio-detail-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px; padding: 40px 20px; text-align: center;
  color: var(--t3);
}
.studio-detail-empty p { font-size: 13px; line-height: 1.55; max-width: 200px; margin: 0; }
.studio-detail-form {
  flex: 1; display: flex; flex-direction: column;
  min-height: 0;
}
.studio-detail-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--s3);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--s0);
  flex-shrink: 0;
}
.studio-detail-label {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--t3);
}
.studio-detail-fields {
  flex: 1; overflow-y: auto;
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.studio-field {
  display: flex; flex-direction: column; gap: 5px;
}
.studio-field-label {
  font-size:11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--t3);
  display: flex; align-items: center; gap: 6px;
}
.studio-field-type-icon {
  font-size:12px; opacity: .6;
}
.studio-field input, .studio-field textarea, .studio-field select {
  padding: 9px 12px;
  border: 1.5px solid var(--s3); border-radius: 8px;
  background: var(--s0); color: var(--t1);
  font-size: 13px; font-family: var(--font);
  outline: none; transition: border .15s;
  width: 100%; box-sizing: border-box;
}
.studio-field textarea { min-height: 60px; resize: vertical; font-family: var(--font); }
.studio-field input:focus, .studio-field textarea:focus, .studio-field select:focus {
  border-color: var(--blue);
}
.studio-detail-actions {
  padding: 14px 20px;
  border-top: 1px solid var(--s3); background: var(--s0);
  display: flex; gap: 8px; justify-content: space-between;
  flex-shrink: 0;
}
/* ── Responsive ── */
@media (max-width: 1100px) {
  .studio-body { grid-template-columns: 200px 1fr 300px; }
}
@media (max-width: 900px) {
  .studio-body { grid-template-columns: 180px 1fr; }
  .studio-detail { display: none; }
  .studio-detail.open {
    display: flex;
    position: fixed; top: 56px; right: 0; bottom: 0;
    width: min(360px, 90vw); z-index: 10;
    box-shadow: -8px 0 32px rgba(0,0,0,.2);
  }
}
/* Ship 106aa: utility class for mobile-only controls. Desktop hides
   them entirely (display:none wins over inline-flex on mobile). */
.studio-mobile-only { display: none; }
@media (max-width: 767px) {
  .studio-mobile-only { display: inline-flex !important; }
  /* Select-mode visual: when admin taps "Select" the grid enters a
     mode where checkboxes are visible and tappable. Make the toggle
     button itself stand out so admin knows they're in select mode. */
  #studio-root.select-mode #studio-select-mode-btn {
    background: var(--blue) !important;
    color: #fff !important;
    border-color: var(--blue) !important;
  }
}
@media (max-width: 767px) {
  /* Ship G: Studio mobile drawer — unified mobile-open class matches Map
     and Admin patterns. The whole studio-sources slides in from left
     when topbar hamburger fires studioToggleSidebar(). */
  .studio-body { grid-template-columns: 1fr; }
  /* Ship 106z: force the single-column layout regardless of what state
     classes studio-root has (detail-collapsed, sidebar-collapsed, both,
     etc.). The desktop combined-class rules at lines 2727 / 3386 / 3392
     all have higher specificity than the simple .studio-body rule above,
     so without this override the desktop "48px 1fr 0" or "240px 1fr 0"
     layouts win on mobile. With studio-sources and studio-detail being
     position:absolute on mobile, only studio-grid is in flow — and CSS
     auto-places it in the FIRST grid track (48px or 240px), making the
     data area absurdly narrow while the remaining 1fr column sits empty.
     Forcing 1fr on every combination keeps the data area at full width. */
  #studio-root .studio-body,
  #studio-root.detail-collapsed .studio-body,
  #studio-root.detail-hidden .studio-body,
  #studio-root.sidebar-collapsed .studio-body,
  #studio-root.sidebar-collapsed.detail-collapsed .studio-body,
  #studio-root.sidebar-collapsed.detail-hidden .studio-body {
    grid-template-columns: 1fr !important;
  }
  .studio-sources {
    position: absolute; top: 0; left: 0; bottom: 0; z-index: 20;
    width: min(280px, 85vw) !important;
    min-width: 0 !important; max-width: none !important;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.4,0,.2,1);
    box-shadow: 4px 0 16px rgba(0,0,0,.2);
    border-right: 1px solid var(--s4);
  }
  .studio-sources.mobile-open { transform: translateX(0); }
  /* Back-compat: if old sources-open class still fires anywhere, honor it */
  #studio-root.sources-open .studio-sources { transform: translateX(0); }
  .studio-toolbar { padding: 10px 14px; }
  .studio-toolbar-left h2 { font-size: 14px; }
  .studio-search input { width: 140px; }
  /* Ship G: Detail panel on mobile becomes a full-screen drawer over the
     grid. When detail-collapsed (default), grid uses 100% width. When
     a record is selected, detail-collapsed is removed and the panel
     slides over the grid from the right. */
  .studio-detail {
    position: absolute !important;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100% !important;
    max-width: none !important;
    z-index: 25;
    transform: translateX(0);
    transition: transform .22s cubic-bezier(.4,0,.2,1);
    box-shadow: -4px 0 16px rgba(0,0,0,.2);
  }
  #studio-root.detail-collapsed .studio-detail {
    transform: translateX(100%) !important;
    opacity: 1 !important;
    pointer-events: none;
  }
  /* Hide the desktop "DETAILS" slide-tab on mobile — user re-opens
     detail by tapping a record row, not by clicking the tab */
  .studio-detail-show-tab { display: none !important; }
  #studio-root.detail-collapsed .studio-detail-show-tab { display: none !important; }
  /* Grid: smaller fonts + horizontal scroll for wide tables */
  .studio-table {
    font-size:13px;
  }
  .studio-table th, .studio-table td {
    padding: 6px 8px;
    white-space: nowrap;  /* don't wrap inside cells — let user scroll horizontally */
  }
  .studio-table-wrap, .studio-grid-content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* ════════════════════════════════════════════════════════════════════════ */
/*  DATA STUDIO — extended styles: popovers, filters, sidebar collapse,      */
/*  import wizard, column drag.                                              */
/* ════════════════════════════════════════════════════════════════════════ */
/* ── View mode tab bar (above grid/excel content) ── */
.studio-mode-tabs {
  display: flex;
  gap: 0;
  background: var(--s1);
  border-bottom: 1px solid var(--s3);
  padding: 0 12px;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.studio-mode-tabs::-webkit-scrollbar { display: none; }
.studio-mode-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--t3);
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  display: inline-flex;
  align-items: center;
}
.studio-mode-tab:hover {
  color: var(--t1);
}
.studio-mode-tab.active {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

/* ── Excel-style virtualized grid ── */
#studio-excel-wrap {
  outline: none;
}
#studio-excel-wrap:focus {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}
.xl-grid {
  position: relative;
  font-family: var(--font);
  font-size: 12px;
  color: var(--t1);
  /* Ship 106y: ensure the grid container always fills its wrap visually.
     With few rows (e.g. 5 rows × 32px = 160px tall) and a now-tall wrap
     (after 106x made studio-grid take full height), the area below the
     last row was rendering as the wrap's underlying background — looked
     like a broken/empty bottom half. min-height:100% stretches xl-grid
     to at least the wrap height; background matches Studio's surface
     so the area below the data is seamlessly part of the grid. */
  min-height: 100%;
  background: var(--s0);
}
.xl-row {
  display: flex;
  position: absolute;
  left: 0; right: 0;
  border-bottom: 1px solid var(--s3);
  background: var(--s0);
}
.xl-row.even { background: var(--s0); }
.xl-row.odd  { background: var(--s05, var(--s0)); }
.xl-cell {
  flex-shrink: 0;
  padding: 5px 8px;
  border-right: 1px solid var(--s3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: cell;
  user-select: none;
  box-sizing: border-box;
}
.xl-cell.selected {
  background: rgba(52, 116, 222, 0.15);
  outline: 2px solid var(--blue);
  outline-offset: -2px;
  z-index: 2;
  position: relative;
}
.xl-cell.in-range {
  background: rgba(52, 116, 222, 0.08);
}
.xl-cell.readonly {
  color: var(--t3);
  background: var(--s2);
}
.xl-cell.editing {
  padding: 0;
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}
.xl-cell.editing input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: var(--s0);
  color: var(--t1);
  font: inherit;
  padding: 5px 8px;
  box-sizing: border-box;
}
/* Header row — sticky top */
.xl-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--s2);
}
.xl-header .xl-cell {
  font-weight: 700;
  background: var(--s2);
  color: var(--t2);
  cursor: pointer;
  border-bottom: 2px solid var(--s4);
  text-transform: uppercase;
  font-size:11px;
  letter-spacing: .5px;
}
.xl-header .xl-cell:hover {
  background: var(--s3);
}
/* First column — sticky left (row number column) */
.xl-cell.col-rownum {
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--s2);
  color: var(--t3);
  font-weight: 600;
  text-align: center;
  font-size:12px;
  font-variant-numeric: tabular-nums;
  width: 56px !important;
  min-width: 56px;
  border-right: 2px solid var(--s4);
}
.xl-header .xl-cell.col-rownum {
  z-index: 11;
}
.xl-row.selected .xl-cell.col-rownum {
  background: rgba(52, 116, 222, 0.2);
  color: var(--blue);
}
/* ── Pivot field chips ── */
.pv-chip {
  display: flex; align-items: center; gap: 6px;
  background: var(--s2); border: 1px solid var(--s4);
  border-radius: 4px; padding: 4px 6px;
  font-size:12px; color: var(--t1);
}
.pv-chip code { font-size:12px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pv-chip select { background: none; border: none; font-size:11px; color: var(--t2); cursor: pointer; }
.pv-chip-x {
  background: none; border: none; cursor: pointer;
  color: var(--t3); padding: 0 2px; font-size: 14px; line-height: 1;
}
.pv-chip-x:hover { color: var(--red); }

/* ── Pivot table styling ── */
.pv-table {
  border-collapse: collapse;
  font-size: 12px;
  font-family: var(--font);
  background: var(--s0);
}
.pv-table th, .pv-table td {
  border: 1px solid var(--s3);
  padding: 5px 9px;
  text-align: right;
  white-space: nowrap;
}
.pv-table thead th {
  background: var(--s2); color: var(--t2);
  font-weight: 700; text-transform: uppercase;
  font-size:11px; letter-spacing: .5px;
}
.pv-table tbody th {
  background: var(--s1); color: var(--t1);
  font-weight: 600; text-align: left;
  position: sticky; left: 0;
}
.pv-table tfoot th, .pv-table tfoot td {
  background: var(--s2); font-weight: 700;
  border-top: 2px solid var(--s4);
}
.pv-table .pv-cell-number { font-variant-numeric: tabular-nums; }
.pv-table .pv-cell-empty { color: var(--t4); }

/* ── Analytics cards ── */
.an-card {
  background: var(--s0); border: 1px solid var(--s3);
  border-radius: 8px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.an-card-title {
  font-size:12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--t3);
}
.an-card-big {
  font-size: 24px; font-weight: 700;
  color: var(--t1); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.an-stat-row {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--t2);
}
.an-stat-row .lbl { color: var(--t3); }
.an-stat-row .val { color: var(--t1); font-variant-numeric: tabular-nums; font-weight: 600; }
.an-bar { height: 4px; background: var(--s2); border-radius: 2px; overflow: hidden; }
.an-bar-fill { height: 100%; background: var(--blue); }
.an-quality-flag {
  display: flex; align-items: center; gap: 8px;
  background: #fff3cd; border: 1px solid #856404; border-radius: 6px;
  padding: 8px 12px; font-size: 12px; color: #856404; margin-bottom: 6px;
}
.an-top-list { display: flex; flex-direction: column; gap: 3px; }
.an-top-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
  font-size:12px; color: var(--t2);
}
.an-top-row code { font-size:12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-top-row .cnt { font-variant-numeric: tabular-nums; color: var(--t3); }

/* Ship 106ap: clickable Analytics elements — drill-throughs that filter
   the Data view to the rows behind each finding. Clickable rows get a
   subtle hover background + arrow indicator, action buttons (download,
   bulk fill) are small chips below the empty bar. */
.an-clickable {
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 6px;
  margin: 0 -6px;
  transition: background .12s;
}
.an-clickable:hover {
  background: var(--blueL);
}
.an-clickable:hover .lbl,
.an-clickable:hover code,
.an-clickable:hover .cnt { color: var(--blue); }
.an-drill-arrow {
  display: inline-block;
  margin-left: 4px;
  color: var(--t3);
  font-size: 11px;
  transition: transform .12s;
}
.an-clickable:hover .an-drill-arrow {
  color: var(--blue);
  transform: translateX(2px);
}
.an-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--s3);
  background: var(--s0);
  color: var(--t1);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  font-family: var(--font);
}
.an-action-btn:hover {
  background: var(--blueL);
  border-color: var(--blue);
  color: var(--blue);
}
.an-action-btn.primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.an-action-btn.primary:hover {
  background: var(--blue2);
  border-color: var(--blue2);
  color: #fff;
}

.studio-toggle-sb { display: inline-flex !important; }
/* Ship 106q: hide data-only toolbar buttons (Save view, Show/hide cols,
   Add record, Clean, Export, etc.) when Studio is in a non-data mode.
   The data tab is the only one that needs these record-level actions;
   Chart/Pivot/Analytics/Dashboard/JSON/Schema/Import each have their
   own controls in their content area. */
#studio-root.mode-chart      .studio-data-only,
#studio-root.mode-pivot      .studio-data-only,
#studio-root.mode-analytics  .studio-data-only,
#studio-root.mode-dashboard  .studio-data-only,
#studio-root.mode-json       .studio-data-only,
#studio-root.mode-schema     .studio-data-only,
#studio-root.mode-import     .studio-data-only {
  display: none !important;
}
/* Ship 106at: .studio-aggregate-only is the inverse — visible only in
   the aggregate views (chart/pivot/analytics/dashboard). Hidden in
   data mode and the other non-aggregate modes (json/schema/import). */
.studio-aggregate-only { display: none !important; }
#studio-root.mode-chart     .studio-aggregate-only,
#studio-root.mode-pivot     .studio-aggregate-only,
#studio-root.mode-analytics .studio-aggregate-only,
#studio-root.mode-dashboard .studio-aggregate-only {
  display: inline-flex !important;
}
/* Ship 106at: "Show identifiers" toggle in the toolbar — compact
   checkbox + label pair, styled to fit the existing toolbar height. */
.studio-id-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--t2);
  cursor: pointer;
  border-radius: 6px;
  transition: background .12s, color .12s;
  user-select: none;
}
.studio-id-toggle:hover {
  background: var(--blueL);
  color: var(--blue);
}
.studio-id-toggle input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--blue);
}
#studio-root.sidebar-collapsed .studio-body {
  grid-template-columns: 48px 1fr 340px;
}
/* When BOTH the sidebar and detail panel are collapsed, both columns
   shrink. This rule must come after both single-class rules so it wins
   on specificity ties. */
#studio-root.sidebar-collapsed.detail-collapsed .studio-body,
#studio-root.sidebar-collapsed.detail-hidden .studio-body {
  grid-template-columns: 48px 1fr 0;
}
#studio-root.sidebar-collapsed .studio-sources-title span,
#studio-root.sidebar-collapsed .studio-source-label,
#studio-root.sidebar-collapsed .studio-source-item-count,
#studio-root.sidebar-collapsed .studio-src-menu,
#studio-root.sidebar-collapsed .studio-empty-hint,
#studio-root.sidebar-collapsed .sb-open-label,
#studio-root.sidebar-collapsed .studio-sources-add,
#studio-root.sidebar-collapsed .studio-group-title,
#studio-root.sidebar-collapsed .studio-group-arrow {
  display: none !important;
}
/* Ship 106ao: collapsed mode now honors the .open state. Only the
   currently-open group's items show — same one-at-a-time behavior as
   expanded mode. Was previously force-opening all group contents which
   showed every source icon at once and required scrolling. */
#studio-root.sidebar-collapsed .studio-group-header {
  padding: 6px 4px;
  justify-content: center;
  cursor: pointer;
}
#studio-root.sidebar-collapsed .studio-group-header:hover {
  background: var(--blueL);
}
/* When a group is collapsed (closed), keep its content hidden in
   collapsed mode just like in expanded mode. The .open class lifts
   max-height to reveal items as icons. */
#studio-root.sidebar-collapsed .sb-closed-label { display: inline !important; }
#studio-root:not(.sidebar-collapsed) .sb-closed-label { display: none; }
#studio-root.sidebar-collapsed .studio-sources-section {
  padding: 10px 4px;
}
#studio-root.sidebar-collapsed .studio-source-item {
  justify-content: center; padding: 8px 4px;
}
#studio-root.sidebar-collapsed .studio-source-item:hover .studio-source-label {
  display: inline-block !important;
  position: absolute; left: 56px;
  background: var(--s0); color: var(--t1);
  padding: 6px 10px; border-radius: 6px;
  border: 1px solid var(--s3);
  box-shadow: 0 2px 12px rgba(0,0,0,.1);
  z-index: 100; white-space: nowrap;
  font-size: 12px;
}
.studio-sources-footer {
  padding: 8px;
  display: flex; justify-content: center;
}
.studio-sb-collapse {
  width: 100%; padding: 6px 10px;
  background: none; border: 1px solid var(--s3);
  border-radius: 6px; color: var(--t3);
  font-size:12px; cursor: pointer;
  transition: all .15s;
}
.studio-sb-collapse:hover { background: var(--s2); color: var(--t1); }
/* Source item menu button */
.studio-src-menu {
  margin-left: auto;
  width: 20px; height: 20px;
  background: none; border: none;
  color: var(--t4); cursor: pointer;
  border-radius: 4px; font-size: 14px;
  opacity: 0; transition: opacity .15s;
}
.studio-source-item:hover .studio-src-menu { opacity: 1; }
.studio-src-menu:hover { background: var(--s3); color: var(--red); }
/* Popovers (generic) */
.studio-popover {
  position: fixed; z-index: 20000;
  background: var(--s0);
  border: 1px solid var(--s3);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  padding: 10px;
  min-width: 220px;
  font-size: 12px;
}
.studio-popover button {
  display: flex; align-items: center; gap: 8px;
  width: 100%; text-align: left;
  padding: 7px 10px; margin: 0 0 2px;
  border: none; background: none;
  border-radius: 6px; color: var(--t1);
  cursor: pointer; font-size: 12px;
  font-family: var(--font);
}
.studio-popover button:hover { background: var(--s2); }
.studio-popover button.studio-btn-sm { width: auto; display: inline-flex; padding: 5px 10px; border: 1.5px solid var(--s3); }
.studio-popover-label {
  font-size:11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--t3); padding: 4px 10px 8px;
}
.studio-popover-sep { height: 1px; background: var(--s3); margin: 6px 0; }
.studio-popover input, .studio-popover select {
  width: 100%; padding: 6px 10px;
  border: 1.5px solid var(--s3); border-radius: 6px;
  background: var(--s0); color: var(--t1);
  font-size: 12px; margin-bottom: 6px;
  font-family: var(--font);
}
/* Filter popover layout */
.studio-filter-popover input, .studio-filter-popover select {
  width: 100%; margin-bottom: 6px;
}
/* Column checkbox list in column manager */
.studio-col-popover { max-width: 260px; }
.studio-col-check {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; margin-bottom: 2px;
  border-radius: 6px; cursor: pointer;
  font-size: 12px;
}
.studio-col-check:hover { background: var(--s2); }
.studio-col-check input { width: auto; margin: 0; }
.studio-col-check span:first-of-type { flex: 1; color: var(--t1); }
.studio-col-check .studio-col-type {
  font-size:11px; color: var(--t4);
  text-transform: uppercase; letter-spacing: .4px;
}
/* Column header filter button + add column button */
.studio-col-filter-btn {
  margin-left: 6px;
  width: 16px; height: 16px;
  background: none; border: none;
  color: var(--t4); cursor: pointer;
  font-size:11px; border-radius: 3px;
  opacity: 0; transition: opacity .15s;
}
.studio-table thead th:hover .studio-col-filter-btn { opacity: 1; }
.studio-col-filter-btn:hover { background: var(--s3); color: var(--t1); }
.studio-col-add {
  width: 36px; text-align: center; cursor: pointer;
  color: var(--t4); font-size: 16px; font-weight: 300;
}
.studio-col-add:hover { background: var(--blueL); color: var(--blue); }
/* Filter chips */
.studio-filter-chips {
  padding: 8px 20px;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  background: var(--s1);
  border-bottom: 1px solid var(--s3);
}
.studio-chip-filter {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px;
  background: var(--blueL); color: var(--blue);
  border: 1px solid rgba(26,115,232,.3);
  border-radius: 14px; font-size:12px; font-weight: 600;
}
.studio-chip-filter button {
  width: 16px; height: 16px;
  background: rgba(26,115,232,.15); border: none;
  border-radius: 50%; color: var(--blue);
  cursor: pointer; font-size:11px; line-height: 1;
  padding: 0;
}
.studio-chip-filter button:hover { background: var(--blue); color: #fff; }
.studio-chip-clear {
  padding: 3px 10px;
  background: none; border: none;
  color: var(--t3); font-size:12px;
  cursor: pointer; text-decoration: underline;
}
.studio-chip-clear:hover { color: var(--red); }
/* Column drag feedback */
.studio-table thead th { cursor: grab; }
.studio-table thead th:active { cursor: grabbing; }
/* Saved views dropdown */
#studio-view-select {
  padding: 7px 10px;
  border: 1.5px solid var(--s3); border-radius: 8px;
  background: var(--s0); color: var(--t1);
  font-size: 12px; cursor: pointer;
  max-width: 160px;
  font-family: var(--font);
}
/* Import wizard */
.studio-import-wiz {
  padding: 20px;
  background: var(--s1);
  border-radius: 10px;
  margin: 20px;
}
.studio-import-wiz h3 {
  font-size: 13px; font-weight: 700;
  margin: 0 0 8px; color: var(--t1);
}
.studio-hint {
  font-size: 12px; color: var(--t3);
  margin: 0 0 12px; line-height: 1.5;
}
.studio-map-grid {
  display: grid;
  grid-template-columns: 1fr 30px 1fr;
  gap: 6px 10px;
  align-items: center;
  background: var(--s0);
  padding: 12px; border-radius: 8px;
  max-height: 240px; overflow-y: auto;
}
.studio-map-head {
  font-size:11px; font-weight: 700;
  color: var(--t3); text-transform: uppercase;
  letter-spacing: .4px; padding-bottom: 4px;
  border-bottom: 1px solid var(--s3);
}
.studio-map-cell { font-size: 12px; color: var(--t1); }
.studio-map-cell code {
  background: var(--s2); padding: 2px 6px;
  border-radius: 4px; font-size:12px;
}
.studio-map-cell select {
  width: 100%; padding: 5px 8px;
  border: 1.5px solid var(--s3); border-radius: 6px;
  background: var(--s0); color: var(--t1);
  font-size:12px;
}
.studio-strategy-list {
  display: flex; flex-direction: column; gap: 8px;
}
.studio-strategy {
  display: flex; gap: 10px;
  padding: 12px; background: var(--s0);
  border: 1.5px solid var(--s3);
  border-radius: 8px; cursor: pointer;
  transition: all .15s;
}
.studio-strategy:hover { border-color: var(--s4); background: var(--s2); }
.studio-strategy input[type="radio"] { margin-top: 2px; }
.studio-strategy input[type="radio"]:checked + div { color: var(--blue); }
.studio-strategy:has(input:checked) {
  border-color: var(--blue); background: var(--blueL);
}
.studio-strategy strong { font-size: 13px; display: block; margin-bottom: 3px; }
.studio-strategy p { margin: 0; font-size:12px; color: var(--t3); line-height: 1.4; }
.studio-import-summary {
  background: var(--s0); border-radius: 8px;
  padding: 12px; margin-bottom: 12px;
}
.studio-import-summary div {
  font-size: 13px; color: var(--t1); margin-bottom: 4px;
}
.studio-import-summary code {
  background: var(--s2); padding: 1px 5px;
  border-radius: 3px; font-size: 12px;
}
.studio-import-warn {
  color: #b26a00 !important;
  background: #fff4e5;
  padding: 8px 10px !important;
  border-radius: 6px;
  border: 1px solid #ffcc80;
  margin: 6px 0 !important;
  font-size: 12px !important;
}
.studio-summary-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--s0);
  border-radius: 8px; overflow: hidden;
}
.studio-summary-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--s3);
  font-size: 13px; color: var(--t1);
}
.studio-summary-table tr:last-child td { border-bottom: none; }
.studio-summary-table tr.warn td { color: #b26a00; background: #fff8ea; }
.studio-summary-table td:last-child {
  text-align: right; font-weight: 700;
}
/* Responsive adjustments */
@media (max-width: 1100px) {
  .studio-toolbar-right { flex-wrap: wrap; gap: 6px; }
  #studio-view-select { max-width: 120px; }
}
@media (max-width: 900px) {
  #studio-view-select, .studio-btn-icon[title*="Save"], .studio-btn-icon[title*="Delete"] {
    display: none;
  }
}
/* ════════════════════════════════════════════════════════════════════════ */
/*  APP-LEVEL DIALOGS (confirm/prompt/alert) — replaces browser dialogs      */
/* ════════════════════════════════════════════════════════════════════════ */
.app-dialog-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 30000;
  align-items: center; justify-content: center;
  padding: 20px;
}
.app-dialog-overlay.open { display: flex; }
.app-dialog {
  background: var(--s0);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
  width: min(440px, 92vw);
  max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: appDialogIn .18s ease-out;
}
@keyframes appDialogIn {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.app-dialog-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--s3);
  display: flex; align-items: center; justify-content: space-between;
}
.app-dialog-header h3 {
  margin: 0; font-size: 15px; font-weight: 700; color: var(--t1);
  letter-spacing: -.2px;
}
.app-dialog-close {
  background: none; border: none;
  width: 28px; height: 28px;
  border-radius: 6px; cursor: pointer;
  color: var(--t3); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.app-dialog-close:hover { background: var(--s2); color: var(--t1); }
.app-dialog-body {
  padding: 18px 20px;
  overflow-y: auto;
  flex: 1;
}
.app-dialog-body p, .app-dialog-msg {
  margin: 0 0 12px; font-size: 13px;
  color: var(--t2); line-height: 1.55;
}
.app-dialog-input {
  width: 100%; box-sizing: border-box;
  padding: 9px 12px;
  border: 1.5px solid var(--s3); border-radius: 8px;
  background: var(--s0); color: var(--t1);
  font-size: 13px; font-family: var(--font);
  outline: none; transition: border .15s;
}
.app-dialog-input:focus { border-color: var(--blue); }
.app-dialog-actions {
  padding: 14px 20px;
  border-top: 1px solid var(--s3);
  background: var(--s1);
  display: flex; gap: 10px; justify-content: flex-end;
}
/* Prevent scrollbar in collapsed studio sidebar */
#studio-root.sidebar-collapsed .studio-sources { overflow-y: hidden; }
/* ─── Job Panel: Layer visibility toggle strip ─── */
.jb-layer-strip {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 14px; border-bottom: 1px solid var(--s3);
  background: var(--s1);
}
.jb-layer-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 14px;
  background: var(--s0); border: 1.5px solid var(--s3);
  color: var(--t2); font-size:12px; font-weight: 600;
  cursor: pointer; transition: all .15s;
  font-family: var(--font);
  user-select: none;
}
.jb-layer-pill:hover { background: var(--s2); border-color: var(--s4); color: var(--t1); }
.jb-layer-pill.active {
  background: var(--blueL); border-color: var(--blue); color: var(--blue);
}
.jb-layer-pill.active .jb-layer-dot { box-shadow: 0 0 0 2px rgba(26,115,232,.25); }
.jb-layer-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
/* Mobile: tighten padding and allow horizontal scroll if needed */
@media (max-width: 600px) {
  .jb-layer-strip { padding: 8px 10px; overflow-x: auto; flex-wrap: nowrap; }
  .jb-layer-pill { padding: 4px 8px; font-size:11px; white-space: nowrap; flex-shrink: 0; }
}
/* ─── Pass 2: Resizable panel + 2-column layout ─── */
/* Resize handle — left edge, drag to widen */
#job-resize-handle {
  position: absolute; top: 16px; left: 0; bottom: 16px;
  width: 6px; cursor: ew-resize;
  background: transparent; z-index: 2;
  transition: background .15s;
}
#job-resize-handle:hover,
#job-resize-handle.dragging {
  background: linear-gradient(90deg, var(--blue) 0%, transparent 100%);
}
#job-resize-handle::before {
  content: ''; position: absolute;
  top: 50%; left: 1px; width: 3px; height: 36px;
  margin-top: -18px; border-radius: 2px;
  background: var(--s4);
  transition: background .15s;
}
#job-resize-handle:hover::before { background: var(--blue); }
@media (max-width: 767px) { #job-resize-handle { display: none; } }
/* When panel is wide AND a detail is open, split body into list + detail columns.
   When wide but no detail is open, list fills full width. */
#job-panel.wide .jb-body {
  display: flex; flex: 1; min-height: 0;
  flex-direction: row;   /* explicit — override the base .jb-body column */
  overflow: hidden;
}
#job-panel.wide #job-list {
  flex: 1 1 100%;
  overflow-y: auto;
  border-right: none;
}
#job-panel.wide.jb-detail-open #job-list {
  flex: 1 1 55%; min-width: 300px; max-width: 60%;
  border-right: 1px solid var(--s3);
}
#job-panel.wide.jb-detail-open #job-detail {
  flex: 1 1 45%; display: flex; flex-direction: column;
  min-width: 260px; overflow: hidden;
}
/* Detail pane is hidden unless the panel is wide AND a row is selected */
#job-detail { display: none; }
#job-panel.wide.jb-detail-open #job-detail { display: flex; }
.jb-detail-header {
  padding: 10px 14px; border-bottom: 1px solid var(--s3);
  background: var(--s1); flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
}
.jb-detail-title {
  font-size: 13px; font-weight: 700; color: var(--t1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-right: 8px;
}
.jb-detail-close {
  background: none; border: none; color: var(--t3);
  font-size: 14px; cursor: pointer; padding: 2px 6px;
  border-radius: 4px;
}
.jb-detail-close:hover { background: var(--s3); color: var(--red); }
.jb-detail-body {
  flex: 1; overflow-y: auto;
  padding: 14px;
  color: var(--t1); font-size: 13px; line-height: 1.6;
}
.jb-detail-section { margin-bottom: 14px; }
.jb-detail-section-title {
  font-size:11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: var(--t3); margin-bottom: 4px;
}
.jb-detail-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 10px;
  color: var(--t3); font-size: 12px; padding: 40px 20px; text-align: center;
}
.jb-detail-empty svg { color: var(--t4); }
.jb-detail-actions {
  padding: 10px 14px; border-top: 1px solid var(--s3);
  background: var(--s1); flex-shrink: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
/* Body wrapper — holds list + detail */
.jb-body { display: flex; flex: 1; min-height: 0; flex-direction: column; overflow: hidden; }
#job-panel:not(.wide) .jb-body { display: contents; } /* pass-through when narrow */
/* Prevent text selection during drag */
body.jb-resizing { user-select: none; cursor: ew-resize !important; }
body.jb-resizing * { cursor: ew-resize !important; }
/* Mobile: disable 2-column split even if wide (fullwidth bottom sheet) */
@media (max-width: 767px) {
  #job-panel.wide #job-list,
  #job-panel.wide #job-detail { flex: 1 1 auto; max-width: none; min-width: 0; border-right: none; }
  #job-panel.wide #job-detail { display: none; } /* keep single-column on mobile */
}
/* ─── Per-query filter pills (Job panel, item 4) ─── */
.jb-qfilter-strip {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 10px;
  background: var(--s1);
  border-bottom: 1px solid var(--s3);
  margin-bottom: 2px;
  align-items: center;
}
.jb-qfilter-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px 4px 6px;
  background: var(--s0); border: 1.5px solid var(--s3);
  border-radius: 14px; cursor: pointer;
  font-size:12px; font-weight: 600; color: var(--t1);
  font-family: var(--font);
  transition: all .12s;
  user-select: none;
}
.jb-qfilter-pill:hover { background: var(--s2); border-color: var(--s4); }
.jb-qfilter-pill.active {
  background: var(--blueL); border-color: var(--blue); color: var(--blue);
  box-shadow: 0 0 0 2px rgba(26,115,232,.12);
}
.jb-qfilter-label {
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.jb-qfilter-count {
  padding: 1px 6px; border-radius: 10px;
  background: var(--s2); color: var(--t2);
  font-size:11px; font-weight: 700;
  min-width: 18px; text-align: center;
}
.jb-qfilter-pill.active .jb-qfilter-count {
  background: var(--blue); color: #fff;
}
.jb-qfilter-clear {
  padding: 4px 10px; border-radius: 14px;
  background: none; border: 1.5px dashed var(--s3);
  color: var(--t3); font-size:12px; font-weight: 600;
  cursor: pointer; font-family: var(--font);
  transition: all .12s;
}
.jb-qfilter-clear:hover { background: var(--s2); color: var(--red); border-color: var(--red); }
/* ─── Insights summary cards: icon + hover tooltip (item 7) ─── */
.an-stat { position: relative; }
.an-stat-icon {
  position: absolute; top: 6px; right: 8px;
  font-size: 14px; line-height: 1;
  opacity: .7; cursor: help;
  user-select: none;
}
.an-stat.svc .an-stat-val { color: #00897b; }
.an-stat.cl  .an-stat-val { color: #e91e63; }
/* Hover tooltip using ::after on the card itself */
.an-stat[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: rgba(20,22,28,.96);
  color: #fff;
  padding: 8px 10px;
  border-radius: 6px;
  font-size:12px; font-weight: 400; line-height: 1.45;
  white-space: normal;
  width: max-content;
  max-width: 260px;
  z-index: 100;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  pointer-events: none;
}
.an-stat[data-tooltip]:hover::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px); left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(20,22,28,.96);
  z-index: 100;
  pointer-events: none;
}
/* Make the summary grid wrap nicely for 6 cards now instead of 4 */
.an-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  padding: 10px 12px;
}
/* ─── Main side panel: drag-resize handle (desktop only) ─── */
/* Desktop: #side needs position:relative to anchor the absolute resize 
   handle. Mobile (<=767px) sets #side to position:fixed for the bottom 
   sheet slide-up — we must not override that, or the sheet breaks. */
@media (min-width: 768px) {
  #side { position: relative; }
}
#side-resize-handle {
  position: absolute; top: 0; right: -3px; bottom: 0;
  width: 6px; cursor: ew-resize;
  background: transparent; z-index: 15;
  transition: background .15s;
}
#side-resize-handle:hover,
#side-resize-handle.dragging {
  background: linear-gradient(270deg, var(--blue) 0%, transparent 100%);
}
#side-resize-handle::before {
  content: ''; position: absolute;
  top: 50%; right: 1px; width: 3px; height: 36px;
  margin-top: -18px; border-radius: 2px;
  background: var(--s4);
  transition: background .15s;
  opacity: 0;
}
#side:hover #side-resize-handle::before,
#side-resize-handle.dragging::before {
  opacity: 1; background: var(--blue);
}
@media (max-width: 767px){ #side-resize-handle { display: none; } }
/* While dragging, disable text selection + set global cursor */
body.side-resizing { user-select: none; cursor: ew-resize !important; }
body.side-resizing * { cursor: ew-resize !important; }
/* ─── Narrow side-panel content safety (Issue 5) ─── */
/* Prevent inner tabs + stat cards + filter pills from overflowing horizontally */
#tab-data, #tab-analysis, #tab-cos, #tab-help { min-width: 0; }
.lv-row { min-width: 0; }
.lv-row > * { min-width: 0; }
.lv-row .lv-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.an-filter-pill {
  flex-shrink: 1;  /* let pills shrink before breaking layout */
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.an-search-bar { flex-wrap: wrap; }
.an-stat { min-width: 0; overflow: hidden; }
.an-stat-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-stat-lbl { overflow: hidden; text-overflow: ellipsis; }
.ds-name, .ds-meta {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.ds-header { min-width: 0; }
.ds-header > * { min-width: 0; }
/* The tab bar icons should never push off the panel */
.tab-btn { min-width: 0; flex-shrink: 1; }
.tab-label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ─── Caseload Import Wizard ─── */
.civ-stat {
  padding: 10px 12px;
  border: 1.5px solid var(--s3);
  border-radius: 8px;
  background: var(--s0);
  text-align: center;
}
.civ-stat.ok   { border-color: #1880381f; background: #f0f9f3; }
.civ-stat.info { border-color: #1a73e81f; background: #f0f7ff; }
.civ-stat.warn { border-color: #f9ab001f; background: #fffaf0; }
.civ-stat.err  { border-color: #d930251f; background: #fdf0f0; }
.civ-stat-val {
  font-size: 22px; font-weight: 700; line-height: 1.1;
  color: var(--t1);
}
.civ-stat.ok   .civ-stat-val { color: var(--green); }
.civ-stat.info .civ-stat-val { color: var(--blue); }
.civ-stat.warn .civ-stat-val { color: var(--yellow); }
.civ-stat.err  .civ-stat-val { color: var(--red); }
.civ-stat-lbl {
  font-size:12px; color: var(--t3);
  text-transform: uppercase; letter-spacing: .3px;
  margin-top: 2px;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Import run-details rows */
.ir-row {
  display: flex; justify-content: space-between;
  font-size: 12px; padding: 3px 0;
  border-bottom: 1px solid var(--s3);
}
.ir-row:last-child { border-bottom: none; }
.ir-row .lbl { color: var(--t3); }
.ir-row .val { color: var(--t1); font-variant-numeric: tabular-nums; font-weight: 600; }

/* ──────────────────────────────────────────────────────────
   Help "?" icons — small inline buttons that deep-link to
   a specific help topic. See helpDeepLink() in help.js.
   ────────────────────────────────────────────────────────── */
.hlp-q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  padding: 0;
  border: 1px solid var(--s4);
  background: var(--s1);
  color: var(--t3);
  border-radius: 50%;
  font-size:11px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  transition: background .12s, color .12s, border-color .12s;
}
.hlp-q:hover {
  background: var(--s3);
  color: var(--t1);
  border-color: var(--t3);
}
.hlp-q:focus { outline: 1px solid var(--t3); outline-offset: 1px; }

/* ── Dashboard (Tier 3 #1) ────────────────────────────────────────────── */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.dash-widget {
  background: var(--s0);
  border: 1px solid var(--s3);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  min-height: 130px;
  transition: border-color .15s, box-shadow .15s;
}
.dash-widget:hover {
  border-color: var(--s4);
  box-shadow: 0 1px 6px rgba(0,0,0,.04);
}
.dash-widget:hover .dash-widget-actions { opacity: 1; }
.dash-widget-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.dash-widget-title {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: .5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-widget-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity .15s;
}
.dash-widget-actions button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--t3);
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 3px;
  line-height: 1;
}
.dash-widget-actions button:hover { background: var(--s2); color: var(--t1); }
.dash-widget-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dash-kpi-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--t1);
  line-height: 1.1;
  letter-spacing: -.5px;
}
.dash-kpi-sublabel {
  font-size:12px;
  color: var(--t3);
  margin-top: 4px;
}

/* Dashboard widget type picker (in the Add Widget dialog) */
.dash-type-card {
  border: 2px solid var(--s3);
  border-radius: 6px;
  padding: 12px 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: var(--s0);
}
.dash-type-card:hover { border-color: var(--s4); background: var(--s1); }
.dash-type-card.selected {
  border-color: var(--blue);
  background: rgba(26, 115, 232, 0.05);
}
/* Bar charts read better when wider — 2 columns on grids that have room */
.dash-widget.dash-widget-wide {
  grid-column: span 2;
  min-height: 220px;
}
@media (max-width: 600px) {
  .dash-widget.dash-widget-wide { grid-column: span 1; }
}
.dash-widget-actions button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Data view column resize handle (105n) */
.xl-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  background: transparent;
  transition: background .12s;
  z-index: 2;
}
.xl-resize-handle:hover,
.xl-resize-handle:active {
  background: var(--blue);
  opacity: 0.45;
}
/* Column drag-reorder feedback (Ship 106em) */
.xl-cell.xl-col-dragging { opacity: .4; }
.xl-cell.xl-col-drop-target { box-shadow: inset 3px 0 0 0 var(--blue); }

/* Dashboard widget resize handle (105n) */
.dash-widget {
  position: relative;
  overflow: hidden;
}
.dash-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  opacity: 0;
  transition: opacity .15s;
  background: linear-gradient(135deg, transparent 0%, transparent 45%, var(--t3) 45%, var(--t3) 55%, transparent 55%, transparent 70%, var(--t3) 70%, var(--t3) 80%, transparent 80%);
  z-index: 3;
}
.dash-widget:hover .dash-resize-handle { opacity: 0.6; }
.dash-resize-handle:hover { opacity: 1 !important; }
/* When a chart widget gets resized taller (h=2), the canvas needs space. */
.dash-widget-body { min-height: 0; }

/* Dashboard mini list widget (105o) */
.dash-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.dash-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size:12px;
}
.dash-list-rank {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  font-weight: 600;
  color: var(--t3);
  font-size:11px;
}
.dash-list-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-list-label {
  font-size:12px;
  color: var(--t1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-list-bar-wrap {
  width: 100%;
  height: 6px;
  background: var(--s2);
  border-radius: 3px;
  overflow: hidden;
}
.dash-list-bar {
  height: 100%;
  background: var(--blue, #1976d2);
  border-radius: 3px;
  transition: width .25s ease-out;
}
.dash-list-value {
  flex-shrink: 0;
  font-size:12px;
  font-weight: 600;
  color: var(--t1);
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: right;
}

/* Dashboard mini pivot widget (105o) */
.dash-pivot-wrap {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.dash-pivot-table {
  width: 100%;
  border-collapse: collapse;
  font-size:12px;
}
.dash-pivot-table th,
.dash-pivot-table td {
  padding: 4px 8px;
  text-align: right;
  border-bottom: 1px solid var(--s3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dash-pivot-table thead th {
  position: sticky;
  top: 0;
  background: var(--s1);
  color: var(--t2);
  font-weight: 600;
  font-size:11px;
  text-transform: uppercase;
  letter-spacing: .3px;
  z-index: 1;
}
.dash-pivot-rowhead {
  text-align: left !important;
  font-weight: 600;
  color: var(--t2);
  position: sticky;
  left: 0;
  background: var(--s0);
  z-index: 2;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-pivot-table thead .dash-pivot-rowhead { background: var(--s1); z-index: 3; }
.dash-pivot-total {
  font-weight: 600;
  background: var(--s1);
  color: var(--t1);
}
.dash-pivot-grand {
  background: var(--s2);
}
.dash-pivot-totals-row td,
.dash-pivot-totals-row th {
  border-top: 2px solid var(--s4);
}

/* Dashboard note widget (105q) — markdown-rendered free-text content */
.dash-note {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.5;
  color: var(--t1);
}
.dash-note h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; color: var(--t1); }
.dash-note h4 { font-size: 14px; font-weight: 700; margin: 0 0 6px; color: var(--t1); }
.dash-note h5 { font-size: 13px; font-weight: 700; margin: 0 0 4px; color: var(--t1); }
.dash-note p  { margin: 0 0 8px; }
.dash-note p:last-child { margin-bottom: 0; }
.dash-note ul { margin: 0 0 8px; padding-left: 20px; }
.dash-note li { margin-bottom: 2px; }
.dash-note code {
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size:12px;
  background: var(--s2);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--t1);
}
.dash-note a {
  color: var(--blue, #1976d2);
  text-decoration: none;
}
.dash-note a:hover { text-decoration: underline; }
.dash-note strong { font-weight: 700; }
.dash-note em { font-style: italic; }

/* Dashboard drag-to-reorder (105s) */
.dash-widget[draggable="true"] .dash-widget-header {
  cursor: grab;
}
.dash-widget[draggable="true"] .dash-widget-header:active {
  cursor: grabbing;
}
.dash-widget.dash-dragging {
  opacity: 0.4;
}
/* Drop-indicator: vertical bar on the side that will receive the dropped widget */
.dash-widget.dash-drop-before {
  box-shadow: -3px 0 0 0 var(--blue, #1976d2);
}
.dash-widget.dash-drop-after {
  box-shadow: 3px 0 0 0 var(--blue, #1976d2);
}

/* Service Areas toolbar buttons (105t) */
#sa-draw-toolbar button {
  background: none;
  border: 1px solid var(--s4);
  border-radius: 4px;
  width: 26px;
  height: 24px;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  color: var(--t2);
  transition: background .12s, color .12s, border-color .12s;
}
#sa-draw-toolbar button:hover {
  background: var(--s1);
  color: var(--t1);
  border-color: var(--t3);
}

/* Ship 106cv: Data Dictionary 2-column layout (table doc | fields) */
.dict-2col{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;max-width:1600px;}
.dict-col{min-width:0;}
@media(max-width:980px){.dict-2col{grid-template-columns:1fr;}}
/* Ship 106du: Coverage Areas control gated by role.
   Hidden by default; shown only when the role grants it (prevents any flash
   of the control before the role is resolved, e.g. for guests). */
.cov-ctrl{display:none;}
body.ff-show-coverage .cov-ctrl{display:block;}
/* Lives in the side panel now (not a map control), so it flows full-width. */
body.ff-show-coverage .cov-ctrl{ margin:0 0 10px; max-width:none; }

/* ── 106el: Guided tour (onboarding) ─────────────────────────────────── */
.tour-spot{position:fixed;border-radius:10px;box-shadow:0 0 0 9999px rgba(0,0,0,.60);border:2px solid #1a73e8;z-index:99998;pointer-events:none;transition:all .28s cubic-bezier(.4,0,.2,1);}
.tour-card{position:fixed;z-index:99999;width:330px;max-width:calc(100vw - 28px);background:var(--s0);color:var(--t1);border:1px solid var(--s3);border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,.34);padding:16px 18px;font-size:13px;line-height:1.5;transition:top .28s ease,left .28s ease;}
.tour-card h4{margin:0 0 6px;font-size:15px;font-weight:700;color:var(--t1);}
.tour-card p{margin:0;color:var(--t2);}
.tour-eg{margin-top:9px;padding:8px 10px;background:#1a73e814;border-left:3px solid #1a73e8;border-radius:0 6px 6px 0;font-size:12px;color:var(--t2);}
.tour-eg b{color:#1a73e8;}
.tour-actions{display:flex;align-items:center;gap:8px;margin-top:14px;}
.tour-progress{font-size:11px;color:var(--t3);font-family:var(--mono);margin-right:auto;}
.tour-dotrow{display:flex;gap:4px;margin-right:auto;}
.tour-dot{width:6px;height:6px;border-radius:50%;background:var(--s4);}
.tour-dot.on{background:#1a73e8;}
.tour-btn{border:1px solid var(--s4);background:var(--s1);color:var(--t1);border-radius:7px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;}
.tour-btn:hover{background:var(--s2);}
.tour-btn.primary{background:#1a73e8;border-color:#1a73e8;color:#fff;}
.tour-btn.primary:hover{background:#1761c4;}
.tour-btn.ghost{border:none;background:none;color:var(--t3);padding:5px 6px;}
.tour-skip{display:none;}  /* 106eo: legacy floating button removed; Skip now lives in the modal */
.tour-trybtn{margin-top:10px;display:inline-flex;align-items:center;gap:6px;border:1px dashed #1a73e8;background:#1a73e80f;color:#1a73e8;border-radius:7px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;}
.help-tour-cta{background:linear-gradient(120deg,#1a73e81a,#1a73e808);border:1px solid #1a73e840;border-radius:10px;padding:9px 11px;margin:10px 12px;display:flex;flex-direction:column;gap:7px;}
.help-tour-cta .htc-row{display:flex;align-items:center;gap:7px;}
.help-tour-cta .htc-ico{font-size:16px;}
.help-tour-cta .htc-title{font-size:12.5px;font-weight:700;color:var(--t1);}
.help-tour-cta .htc-btns{display:flex;gap:6px;}
.help-tour-cta .tour-btn{padding:3px 12px;font-size:11.5px;flex:1;}
@media (max-width:560px){ .tour-card{width:calc(100vw - 24px);left:12px !important;} }

/* ── 106em: interactive mini filter demo inside the guided tour ───────── */
.fdemo{margin-top:10px;}
/* 106en: stylized map background (roads, water, parks) so the demo feels like
   a real map. Pure CSS data URI — no network fetch, no real data. */
.fdemo-map{position:relative;height:120px;border:1px solid var(--s3);border-radius:8px;overflow:hidden;
  background-color:#e8f0e6;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 120' preserveAspectRatio='none'><rect width='280' height='120' fill='%23e8f0e6'/><path d='M-10 82 Q 60 55 130 78 T 290 65 L 290 130 L -10 130 Z' fill='%23bcd9e8'/><ellipse cx='205' cy='28' rx='40' ry='17' fill='%23cde6c4'/><ellipse cx='45' cy='22' rx='28' ry='13' fill='%23cde6c4'/><ellipse cx='90' cy='100' rx='22' ry='10' fill='%23cde6c4' opacity='.8'/><path d='M0 48 L 280 50' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' fill='none' opacity='.9'/><path d='M140 0 L 138 120' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' fill='none' opacity='.85'/><path d='M0 92 Q 100 86 200 97 T 280 90' stroke='%23ffffff' stroke-width='2' fill='none' opacity='.75'/><path d='M70 0 L 92 120' stroke='%23ffffff' stroke-width='1.5' fill='none' opacity='.55'/><path d='M220 0 L 198 120' stroke='%23ffffff' stroke-width='1.5' fill='none' opacity='.55'/><path d='M0 20 Q 60 18 140 25' stroke='%23ffffff' stroke-width='1.2' fill='none' opacity='.45'/></svg>");
  background-size:100% 100%;background-repeat:no-repeat;}
[data-theme="dark"] .fdemo-map{filter:brightness(.55) contrast(1.05) saturate(.85);}
.fdemo-pin{position:absolute;width:11px;height:11px;border-radius:50%;border:1.5px solid #fff;box-shadow:0 1px 2px rgba(0,0,0,.4);transform:translate(-50%,-50%);transition:opacity .35s ease,transform .35s ease;}
.fdemo-pin.off{opacity:0;transform:translate(-50%,-50%) scale(.2);}
.fdemo-count{position:absolute;bottom:5px;right:7px;font-size:10px;font-family:var(--mono);background:rgba(0,0,0,.55);color:#fff;padding:1px 6px;border-radius:8px;}
.fdemo-dim{margin-top:8px;}
.fdemo-dim-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--t3);margin-bottom:3px;}
.fdemo-chips{display:flex;gap:5px;flex-wrap:wrap;}
.fdemo-chip{display:inline-flex;align-items:center;gap:5px;border:1.5px solid var(--s4);background:var(--s1);color:var(--t2);border-radius:14px;padding:3px 10px;font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;}
.fdemo-chip .dot{width:8px;height:8px;border-radius:50%;}
/* 106eq: each chip's "on" state uses its own --chip color, so Duval/Orange and
   Healthcare/Retail read as visually distinct rather than uniformly blue. */
.fdemo-chip.on{border-color:var(--chip,#1a73e8);background:color-mix(in srgb,var(--chip,#1a73e8) 14%,transparent);color:var(--t1);box-shadow:0 1px 3px color-mix(in srgb,var(--chip,#1a73e8) 28%,transparent);}
.fdemo-chip:not(.on){opacity:.55;text-decoration:line-through;}
.fdemo-chip:not(.on) .dot{filter:grayscale(1);}

/* ── 106en: Look up coordinates modal + role gate ───────────────────── */
body.no-coord-lookup-perm #coord-lookup-btn{display:none !important;}
/* 106gy: Service Status side-panel section — deny-by-default; only roles
   granted view_service_status (and admins) see it. */
body.no-service-status-perm #service-status-panel{display:none !important;}
/* 106ha: Security admin view — two-column layout for the section cards */
#avp-users-security .av-panel-body{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
#avp-users-security .av-panel-body > .as-section{margin-top:0 !important}
@media (max-width:900px){#avp-users-security .av-panel-body{grid-template-columns:1fr}}
/* 106gz: give the Service Status side-panel section breathing room */
#service-status-panel{padding:12px 13px;margin-bottom:10px}
#service-status-panel-body > div:first-child{margin-bottom:2px}
#service-status-panel .svc-tabbar{margin-top:12px !important}
#service-status-panel .svc-list{margin-top:10px !important;max-height:340px}
#service-status-panel .svc-list > div{padding-top:9px !important;padding-bottom:9px !important}
.cl-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100000;display:flex;align-items:center;justify-content:center;padding:18px;}
.cl-modal-card{background:var(--s0);color:var(--t1);border:1px solid var(--s3);border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,.4);width:min(560px,100%);max-height:85vh;overflow:auto;padding:18px 20px;}
.cl-modal-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;}
.cl-modal-head > div:first-child{flex:1;min-width:0;}
.cl-modal-title{font-size:16px;font-weight:700;}
.cl-modal-sub{font-size:12px;color:var(--t3);margin-top:2px;}
.cl-modal-x{background:none;border:none;color:var(--t3);font-size:18px;cursor:pointer;padding:2px 6px;border-radius:6px;}
.cl-modal-x:hover{background:var(--s2);color:var(--t1);}
.cl-input{width:100%;font-family:var(--mono);font-size:13px;padding:10px 12px;border:1px solid var(--s3);border-radius:8px;background:var(--s1);color:var(--t1);resize:vertical;box-sizing:border-box;}
.cl-modal-actions{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap;}
.cl-hint{font-size:11px;color:var(--t3);margin-right:auto;}
#cl-results{margin-top:14px;}
.cl-row{display:grid;grid-template-columns:1fr auto;gap:8px;padding:8px 10px;border:1px solid var(--s2);border-radius:8px;margin-bottom:6px;background:var(--s1);}
.cl-row .cl-addr{font-size:13px;color:var(--t1);word-break:break-word;}
.cl-row .cl-coords{font-family:var(--mono);font-size:12px;color:var(--t2);margin-top:5px;display:flex;flex-direction:column;gap:5px;}
.cl-row .cl-coord-pair{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.cl-row .cl-coord-label{font-size:10px;font-weight:700;color:var(--t3);background:var(--s2);padding:1px 6px;border-radius:5px;letter-spacing:.5px;min-width:30px;text-align:center;}
.cl-row .cl-coord-pair code{flex:1;min-width:0;word-break:break-all;color:var(--t1);}
.cl-row .cl-copy{border:none;background:var(--s2);color:var(--t2);border-radius:5px;padding:1px 6px;font-size:11px;cursor:pointer;}
.cl-row .cl-copy:hover{background:var(--s3);color:var(--t1);}
.cl-row .cl-status{font-size:11px;font-weight:700;padding:2px 7px;border-radius:10px;align-self:start;white-space:nowrap;}
.cl-row .cl-status.ok{background:#1e8e3e1f;color:#1e8e3e;}
.cl-row .cl-status.err{background:#d930251f;color:#d93025;}

/* ── 106eq: interactive marker-popup demo inside the guided tour ──────── */
.mdemo{margin-top:10px;border:1px solid var(--s3);border-radius:8px;overflow:hidden;background:var(--s0);}
.mdemo-mini-map{position:relative;height:54px;background-color:#e8f0e6;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 54' preserveAspectRatio='none'><rect width='280' height='54' fill='%23e8f0e6'/><path d='M-10 38 Q 80 28 160 36 T 290 28 L 290 60 L -10 60 Z' fill='%23bcd9e8'/><ellipse cx='60' cy='14' rx='28' ry='9' fill='%23cde6c4'/><path d='M0 24 L 280 26' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' opacity='.85'/><path d='M140 0 L 138 54' stroke='%23ffffff' stroke-width='2.5' opacity='.8'/><path d='M70 0 L 92 54' stroke='%23ffffff' stroke-width='1.4' opacity='.55'/></svg>");
  background-size:100% 100%;cursor:pointer;}
[data-theme="dark"] .mdemo-mini-map{filter:brightness(.55) contrast(1.05) saturate(.85);}
.mdemo-pin{position:absolute;left:50%;top:60%;transform:translate(-50%,-100%);width:16px;height:22px;animation:mdemoPinPulse 1.6s ease-in-out infinite;pointer-events:none;}
.mdemo-pin svg{display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));}
@keyframes mdemoPinPulse{0%,100%{transform:translate(-50%,-100%) scale(1);}50%{transform:translate(-50%,-100%) scale(1.12);}}
.mdemo-mini-map .mdemo-hint{position:absolute;left:50%;top:8px;transform:translateX(-50%);font-size:10px;color:#fff;background:rgba(0,0,0,.55);padding:2px 7px;border-radius:10px;pointer-events:none;}
.mdemo-popup{padding:11px 13px;font-size:12px;}
.mdemo-popup-head{display:flex;align-items:flex-start;gap:8px;}
.mdemo-popup-title{font-size:13px;font-weight:700;color:var(--t1);flex:1;}
.mdemo-popup-src{font-size:9px;font-weight:700;background:#12a4a422;color:#0e7878;border:1px solid #12a4a455;padding:2px 6px;border-radius:9px;letter-spacing:.5px;}
.mdemo-tabs{display:flex;gap:0;border-bottom:1.5px solid var(--s3);margin-top:8px;}
.mdemo-tab{background:none;border:none;cursor:pointer;padding:6px 12px;font-size:11.5px;font-weight:600;color:var(--t3);border-bottom:2px solid transparent;margin-bottom:-1.5px;transition:all .15s;display:flex;align-items:center;gap:5px;}
.mdemo-tab.on{color:#1a73e8;border-bottom-color:#1a73e8;}
.mdemo-tab:hover:not(.on){color:var(--t2);}
.mdemo-content{padding:8px 0 6px;min-height:90px;animation:mdemoFade .25s ease;}
@keyframes mdemoFade{from{opacity:0;transform:translateY(2px);}to{opacity:1;transform:none;}}
.mdemo-row{display:grid;grid-template-columns:88px 1fr;gap:6px;padding:3px 0;font-size:11.5px;}
.mdemo-key{color:var(--t3);font-weight:600;}
.mdemo-val{color:var(--t1);word-break:break-word;}
.mdemo-coords{margin-top:5px;padding-top:5px;border-top:1px solid var(--s2);font-family:var(--mono);font-size:10.5px;color:var(--t2);}
.mdemo-actions{display:flex;gap:6px;margin-top:8px;}
.mdemo-action{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 8px;border-radius:6px;border:1px solid var(--s4);background:var(--s1);color:var(--t1);font-size:11px;font-weight:600;cursor:pointer;text-decoration:none;}
.mdemo-action.openmaps{background:#1a73e814;border-color:#1a73e855;color:#1a73e8;}
.mdemo-action.streetview{background:#1e8e3e14;border-color:#1e8e3e55;color:#1e8e3e;}
.mdemo-action:hover{filter:brightness(.94);}
.mdemo-toast{margin-top:7px;padding:5px 9px;font-size:11px;background:var(--s2);color:var(--t2);border-radius:6px;border-left:3px solid #1a73e8;animation:mdemoFade .25s;}

/* ── 106er/106ev: selected-marker halo — pulsing ring + glow ──────────
   Anchored under the pin TIP (which is at the bottom of the SVG, not the
   center), so the ring sits centered on the marker's actual location.
   Pseudo-element ::before needs a real element to attach to — that's why
   makePinElement now wraps the img in a div with class .pin-wrap. */
/* ── 106f5: marker halo extended so the glow is visible around the
   InfoWindow when a pin is clicked. Previously the popup overlay covered
   the halo from above and Nef couldn't tell the marker had been picked.
   Bigger halo + brighter outer glow ring so it peeks around the popup
   edges. */
.pin-wrap{display:inline-block;position:relative;}
.marker-active{z-index:99999 !important;}
.marker-active img{filter:drop-shadow(0 0 6px #1a73e8) drop-shadow(0 0 12px rgba(26,115,232,.95));}
.marker-active::before{
  content:'';
  position:absolute;
  left:50%;
  /* 106fr: halo trimmed further from 48→38 per Nef. Border thinned
     to 2px to keep it proportional to the smaller circle. */
  top:50%;
  width:38px;
  height:38px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:2px solid #1a73e8;
  background:radial-gradient(circle,rgba(26,115,232,.45) 0%,rgba(26,115,232,.10) 55%,transparent 80%);
  box-shadow:0 0 14px rgba(26,115,232,.85), 0 0 5px rgba(26,115,232,.6) inset;
  animation:markerHaloPulse 1.35s ease-in-out infinite;
  pointer-events:none;
  z-index:-1;
}
@keyframes markerHaloPulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);   opacity:.90;}
  50%    {transform:translate(-50%,-50%) scale(1.40); opacity:.50;}
}

/* ── 106er: colored tour-card buttons — replaces uniform ghost gray ───── */
.tour-btn.back{border-color:var(--s4);background:var(--s1);color:var(--t2);}
.tour-btn.back:hover{border-color:var(--t3);color:var(--t1);background:var(--s2);}
.tour-btn.skip{border-color:#d9302555;background:#d930250c;color:#d93025;}
.tour-btn.skip:hover{background:#d930251a;border-color:#d93025;}
.tour-btn.demo{border-color:#8b5cf655;background:#8b5cf60c;color:#8b5cf6;}
.tour-btn.demo:hover{background:#8b5cf61a;border-color:#8b5cf6;}
.tour-btn.demo.playing{background:#8b5cf6;color:#fff;border-color:#8b5cf6;}

/* Caption under the Help CTA buttons clarifying Start vs Demo */
.help-tour-cta .htc-note{font-size:10.5px;color:var(--t3);font-style:italic;margin-top:-2px;line-height:1.4;}
.help-tour-cta .htc-note b{color:var(--t2);font-style:normal;}

/* ── 106er: Layers widget (tour) ─────────────────────────────────────── */
.ldemo{margin-top:10px;display:flex;flex-direction:column;gap:6px;}
.ldemo-row{display:flex;align-items:center;gap:9px;padding:7px 9px;border:1px solid var(--s3);border-radius:7px;background:var(--s0);transition:transform .15s;}
.ldemo-row:hover{transform:translateX(2px);}
.ldemo-pin{flex-shrink:0;width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 2.5px rgba(0,0,0,.35);}
.ldemo-meta{flex:1;min-width:0;}
.ldemo-name{font-size:12.5px;font-weight:700;color:var(--t1);}
.ldemo-desc{font-size:11px;color:var(--t3);margin-top:1px;}

/* ── 106er: User-additions widget (tour) ─────────────────────────────── */
.uademo{margin-top:10px;display:flex;flex-direction:column;gap:6px;}
.uademo-row{display:flex;align-items:center;gap:10px;padding:7px 9px;border:1px solid var(--s3);border-left:3.5px solid var(--s4);border-radius:0 7px 7px 0;background:var(--s0);}
.uademo-icon{flex-shrink:0;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;}
.uademo-meta{flex:1;min-width:0;}
.uademo-name{font-size:12.5px;font-weight:700;color:var(--t1);}
.uademo-desc{font-size:11px;color:var(--t3);margin-top:1px;line-height:1.45;}

/* 106es: icon-only Back/Skip so all four actions + dots fit a 330px card */
.tour-btn.back,.tour-btn.skip{padding:4px 10px;font-size:14px;font-weight:700;min-width:36px;line-height:1;}
.tour-btn.demo{padding:5px 11px;font-size:12px;}
.tour-btn.primary{padding:5px 13px;font-size:12px;}
.tour-actions{flex-wrap:wrap;}
.tour-dotrow{margin-right:auto;}

/* ── 106ev: Help-tab feedback CTA (sits below the tour CTA) ─────────── */
.help-feedback-cta{background:linear-gradient(120deg,#1e8e3e14,#1e8e3e06);border:1px solid #1e8e3e40;border-radius:10px;padding:11px 13px;margin:0 12px 12px;display:flex;flex-direction:column;gap:8px;}
.help-feedback-cta .htc-row{display:flex;align-items:center;gap:7px;}
.help-feedback-cta .htc-ico{font-size:18px;}
.help-feedback-cta .htc-title{font-weight:700;font-size:14px;color:var(--t1);}
.help-feedback-cta .htc-note{font-size:12px;color:var(--t2);line-height:1.45;}
.help-feedback-cta .htc-btns{display:flex;gap:8px;flex-wrap:wrap;}
.help-feedback-cta .tour-btn.primary{background:#1e8e3e;border-color:#1e8e3e;}
.help-feedback-cta .tour-btn.primary:hover{filter:brightness(1.08);}

/* ── 106ew: VR Areas tour step — small "look at the map" cue ────────── */
.vrademo{margin-top:10px;}
.vrademo-row{display:flex;align-items:center;gap:12px;padding:9px 11px;border:1px dashed #1a73e8;border-radius:7px;background:#1a73e80c;}
.vrademo-arrow{font-size:22px;animation:vraArrowNudge 1.2s ease-in-out infinite;}
.vrademo-name{font-size:13px;font-weight:700;color:var(--t1);}
.vrademo-desc{font-size:11.5px;color:var(--t3);margin-top:1px;}
@keyframes vraArrowNudge{0%,100%{transform:translateX(0);}50%{transform:translateX(5px);}}

/* ── 106ew: Notifications Phase 1 ─────────────────────────────────────── */
/* Top banner above the map */
/* 106f1: announcement banner sits directly under the topbar (≈48px tall),
   spanning the full width — no left offset now that the bell is in the
   topbar instead of the sidepanel. */
#ann-bar{position:fixed;top:48px;left:0;right:0;z-index:9998;display:none;pointer-events:none;}
#ann-bar .ann-row{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:9px 16px;border-bottom:1px solid;font-size:13px;}
#ann-bar .ann-row .ann-icon{font-size:18px;flex-shrink:0;}
#ann-bar .ann-row .ann-text{flex:1;min-width:0;}
#ann-bar .ann-row .ann-text strong{margin-right:8px;}
#ann-bar .ann-row .ann-x{background:none;border:none;cursor:pointer;font-size:18px;color:inherit;opacity:.7;padding:0 6px;}
#ann-bar .ann-row .ann-x:hover{opacity:1;}
#ann-bar .ann-row.lvl-info    {background:#e8f0fe;color:#174ea6;border-color:#1a73e833;}
#ann-bar .ann-row.lvl-success {background:#e6f4ea;color:#0d652d;border-color:#1e8e3e33;}
#ann-bar .ann-row.lvl-warning {background:#fef7e0;color:#b06000;border-color:#f9ab0033;}
#ann-bar .ann-row.lvl-critical{background:#fce8e6;color:#a50e0e;border-color:#d9302566;}
@media (max-width: 640px){ #ann-bar{left:0;} }

/* Bell panel — slides out from the side panel */
/* 106f2: notif panel is a dropdown anchored under the bell — not a modal
   overlay. Sized to content (no big empty slide), max-height capped so
   long lists scroll. The Links dropdown was the design reference. */
#notif-panel{position:fixed;z-index:9999;background:transparent;display:none;}
#notif-panel.is-open{display:block;}
#notif-panel .notif-panel-card{background:var(--s0);box-shadow:0 8px 24px rgba(0,0,0,.18);border:1px solid var(--s3);border-radius:10px;display:flex;flex-direction:column;width:380px;max-width:calc(100vw - 16px);max-height:min(72vh,640px);overflow:hidden;}
#notif-panel .notif-head{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-bottom:1px solid var(--s3);}
#notif-panel .notif-title{font-size:15px;font-weight:700;color:var(--t1);}
#notif-panel .notif-sub  {font-size:11px;color:var(--t3);margin-top:2px;}
#notif-panel .notif-empty{padding:30px 18px;text-align:center;color:var(--t3);font-size:13px;}
/* 106g0: old notif-item rules removed — superseded by the card-style
   block further down. Keep only the level color helpers since they're
   referenced from both old and new markup. */
#notif-panel .notif-item-x{background:none;border:none;color:var(--t3);cursor:pointer;font-size:14px;padding:0 4px;}
#notif-panel .notif-item-x:hover{color:#d93025;}
#notif-panel .notif-item-level{display:inline-block;padding:1px 6px;border-radius:8px;font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;margin-right:6px;}
#notif-panel .lvl-info    .notif-item-level{background:#1a73e822;color:#1a73e8;}
#notif-panel .lvl-success .notif-item-level{background:#1e8e3e22;color:#1e8e3e;}
#notif-panel .lvl-warning .notif-item-level{background:#b0600022;color:#b06000;}
#notif-panel .lvl-critical .notif-item-level{background:#d9302522;color:#d93025;}

/* 106fw: What's New section inside the Help tab. Mirrors the
   keep-a-changelog pattern: version + date header, bullet list of
   entries grouped by colored type chips (Added/Improved/Fixed/Removed). */
.whats-new-card{
  margin:8px 0 14px;
  background:var(--s1);
  border:1px solid var(--s3);
  border-radius:8px;
  overflow:hidden;
}
.whats-new-card .wn-head{
  padding:10px 14px;
  border-bottom:1px solid var(--s3);
  background:linear-gradient(135deg, rgba(26,115,232,.06), transparent);
  display:flex; align-items:center; gap:8px;
}
.whats-new-card .wn-head-icon{ font-size:16px; line-height:1; }
.whats-new-card .wn-head-title{ font-size:14px; font-weight:700; color:var(--t1); }
.whats-new-card .wn-head-sub  { font-size:11.5px; color:var(--t3); margin-left:4px; }
.whats-new-card .wn-body{
  max-height:420px; overflow-y:auto;
  padding:4px 0;
}
.whats-new-card .wn-version{
  padding:10px 14px;
  border-bottom:1px solid var(--s2);
}
.whats-new-card .wn-version:last-child{ border-bottom:none; }
.whats-new-card .wn-version-head{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin-bottom:6px;
}
.whats-new-card .wn-version-num{
  font-size:14px; font-weight:700; color:var(--t1);
  font-family:var(--mono);
}
.whats-new-card .wn-version-title{
  font-size:12.5px; color:var(--t2);
}
.whats-new-card .wn-version-date{
  margin-left:auto;
  font-size:11px; color:var(--t3);
  font-family:var(--mono);
}
.whats-new-card .wn-entries{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:5px;
}
.whats-new-card .wn-entry{
  display:flex; gap:8px; align-items:flex-start;
  font-size:12.5px; line-height:1.45; color:var(--t2);
}
.whats-new-card .wn-type-chip{
  display:inline-block;
  padding:1px 7px; border-radius:9px;
  font-size:10px; font-weight:700;
  letter-spacing:.4px; text-transform:uppercase;
  flex-shrink:0; min-width:62px; text-align:center;
  line-height:1.5;
}
.whats-new-card .wn-entry-text{ flex:1; min-width:0; }

/* 106fv: User Activity sub-tabs (Summary / Sign-in History) */
.ua-subtab{
  background:transparent; border:none;
  border-bottom:2px solid transparent;
  color:var(--t3); font-size:13px; font-weight:600;
  padding:8px 16px; cursor:pointer; font-family:var(--font);
  margin-bottom:-1px;
  transition:color .15s, border-color .15s;
}
.ua-subtab:hover{ color:var(--t1); }
.ua-subtab.is-active{
  color:var(--blue); border-bottom-color:var(--blue);
}

/* 106fz: top-level section tabs inside the bell panel
   (Announcements / What's New). Larger than the inner Unread/Read/All
   tabs to read as a higher-priority navigation. */
#notif-panel .notif-sections{
  display:flex; gap:0;
  background:var(--s2);
  border-bottom:1px solid var(--s3);
}
#notif-panel .notif-section{
  flex:1; background:transparent; border:none;
  border-bottom:3px solid transparent;
  color:var(--t2); font-size:13px; font-weight:700;
  padding:10px 8px; cursor:pointer; font-family:var(--font);
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition:color .15s, border-color .15s, background .15s;
}
#notif-panel .notif-section:hover{ color:var(--t1); background:rgba(0,0,0,.04); }
#notif-panel .notif-section.is-active{
  color:var(--blue); border-bottom-color:var(--blue);
}
#notif-panel .notif-section-pane{
  display:flex; flex-direction:column; flex:1; min-height:0;
}

/* 106g0: announcements as cards matching What's New rows — same
   container, same chevron, same hover. Body shows when expanded. */
#notif-panel #notif-body{ padding:8px; }
#notif-panel .notif-item{
  margin:0 0 8px;
  border:1px solid var(--s3);
  border-radius:8px;
  background:var(--s0);
  padding:10px 12px;
  cursor:pointer;
  transition:background .15s, border-color .15s;
  position:relative;
  border-left:4px solid var(--s4);
}
#notif-panel .notif-item.lvl-info{    border-left-color:#1a73e8; }
#notif-panel .notif-item.lvl-warning{ border-left-color:#f9ab00; }
#notif-panel .notif-item.lvl-critical{ border-left-color:#d93025; }
#notif-panel .notif-item:hover{ border-color:var(--blue); }
:root[data-theme="dark"] #notif-panel .notif-item{ background:var(--s1); }
#notif-panel .notif-item-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:8px;
}
#notif-panel .notif-item-title{
  flex:1; min-width:0;
  font-size:13px; font-weight:600; color:var(--t1);
  display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap;
}
#notif-panel .notif-item-x,
#notif-panel .notif-item-restore{
  flex-shrink:0;
}
#notif-panel .notif-item-meta{
  margin-top:6px;
  font-size:11px; color:var(--t3);
}
#notif-panel .notif-item-body{
  margin-top:8px;
  font-size:12.5px; color:var(--t2);
  line-height:1.45;
}
#notif-panel .notif-item.read .notif-item-title{ color:var(--t2); }
#notif-panel .notif-item-chev{
  display:inline-block; margin-left:auto;
  font-size:10px; color:var(--t3);
  transition:transform .18s;
}
#notif-panel .notif-item.collapsed .notif-item-meta,
#notif-panel .notif-item.collapsed .notif-item-body{ display:none; }
#notif-panel .notif-item.collapsed .notif-item-chev{ transform:rotate(-90deg); }
#notif-panel .notif-item:hover{ background:rgba(0,0,0,.025); }
:root[data-theme="dark"] #notif-panel .notif-item:hover{ background:rgba(255,255,255,.04); }

/* 106fz: What's New section inside the bell panel — version cards
   collapsible same as announcements. */
#notif-panel #notif-wn-body{ background:transparent; }
#notif-panel .wn-version-row{
  margin:0 0 8px;
  border:1px solid var(--s3);
  border-radius:8px;
  background:var(--s0);
  padding:10px 12px;
  cursor:pointer;
  transition:background .15s, border-color .15s;
}
#notif-panel .wn-version-row:hover{ border-color:var(--blue); }
#notif-panel .wn-version-head{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
}
#notif-panel .wn-version-num{
  font-size:14px; font-weight:700; color:var(--t1);
  font-family:var(--mono);
}
#notif-panel .wn-version-title{
  font-size:12.5px; color:var(--t2);
  flex:1; min-width:0;
}
#notif-panel .wn-version-date{
  font-size:11px; color:var(--t3);
  font-family:var(--mono);
}
#notif-panel .wn-version-chev{
  font-size:11px; color:var(--t3);
  transition:transform .18s;
}
#notif-panel .wn-version-row.collapsed .wn-version-chev{ transform:rotate(-90deg); }
#notif-panel .wn-version-summary{
  margin-top:6px;
  display:flex; gap:5px; flex-wrap:wrap;
}
#notif-panel .wn-summary-chip{
  display:inline-block;
  padding:1px 7px; border-radius:9px;
  font-size:10px; font-weight:700;
  letter-spacing:.3px;
}
#notif-panel .wn-version-row.collapsed .wn-entries{ display:none; }
#notif-panel .wn-version-row:not(.collapsed) .wn-version-summary{ display:none; }
#notif-panel .wn-entries{
  list-style:none; padding:0; margin:8px 0 0;
  display:flex; flex-direction:column; gap:5px;
}
#notif-panel .wn-entry{
  display:flex; gap:8px; align-items:flex-start;
  font-size:12.5px; line-height:1.45; color:var(--t2);
}
#notif-panel .wn-type-chip{
  display:inline-block;
  padding:1px 7px; border-radius:9px;
  font-size:10px; font-weight:700;
  letter-spacing:.4px; text-transform:uppercase;
  flex-shrink:0; min-width:62px; text-align:center;
  line-height:1.5;
}
#notif-panel .wn-entry-text{ flex:1; min-width:0; }
:root[data-theme="dark"] #notif-panel .wn-version-row{ background:var(--s1); }

/* 106fu: tab bar inside the notif panel (Unread / Read / All). */
#notif-panel .notif-tabs{
  display:flex; gap:0; padding:0 8px; background:var(--s1);
  border-bottom:1px solid var(--s3);
}
#notif-panel .notif-tab{
  flex:1; background:transparent; border:none; border-bottom:2px solid transparent;
  color:var(--t3); font-size:12px; font-weight:600;
  padding:8px 4px; cursor:pointer; font-family:var(--font);
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition:color .15s, border-color .15s;
}
#notif-panel .notif-tab:hover{ color:var(--t1); }
#notif-panel .notif-tab.is-active{
  color:var(--blue); border-bottom-color:var(--blue);
}
#notif-panel .notif-tab-count{
  font-size:10.5px; font-weight:700; line-height:1;
  padding:2px 6px; border-radius:9px;
  background:var(--s3); color:var(--t2);
  min-width:18px; text-align:center;
}
#notif-panel .notif-tab.is-active .notif-tab-count{
  background:var(--blue); color:#fff;
}

/* Read (dismissed) items appear dimmer than unread, plus a "Reopen"
   button replaces the X so users can bring them back. */
#notif-panel .notif-item.read{ opacity:.72; }
#notif-panel .notif-item.read .notif-item-title{ color:var(--t2); font-weight:600; }
#notif-panel .notif-item-restore{
  background:none; border:1px solid var(--s4); color:var(--t3);
  cursor:pointer; font-size:10.5px; font-weight:600;
  padding:2px 8px; border-radius:10px; line-height:1;
}
#notif-panel .notif-item-restore:hover{ color:var(--blue); border-color:var(--blue); }
#notif-panel .notif-item-read-meta{
  display:inline-block; margin-left:6px;
  font-size:10px; color:var(--t3); font-family:var(--mono);
}

/* ── 106f2: Security Checklist — tabs + 3-column item grid ─────────── */
.cl-tabbar{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--s3);margin-bottom:14px;}
.cl-tab{padding:7px 12px;border:1px solid transparent;border-bottom:1px solid transparent;background:transparent;color:var(--t2);font-size:12.5px;font-weight:500;border-radius:7px 7px 0 0;cursor:pointer;margin-bottom:-1px;display:inline-flex;align-items:center;gap:6px;}
.cl-tab:hover{background:var(--s1);}
.cl-tab.active{border-color:var(--s3);border-bottom-color:var(--s0);background:var(--s0);color:var(--t1);font-weight:700;}
.cl-tab-dot{display:inline-block;width:8px;height:8px;border-radius:50%;}
.cl-tab-count{font-size:10px;color:var(--t3);font-family:var(--mono);font-weight:500;}
.cl-tab-header{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding:8px 11px;background:var(--s1);border:1px solid var(--s3);border-radius:8px;flex-wrap:wrap;}
.cl-tab-title{font-size:13px;font-weight:700;color:var(--t1);}
.cl-tab-progress{font-size:11px;color:var(--t3);font-family:var(--mono);}
.cl-tab-bar{flex:1;height:6px;background:var(--s2);border-radius:3px;overflow:hidden;max-width:220px;margin-left:auto;}
/* 3-col grid that collapses to 2 then 1 */
.cl-item-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
@media (max-width:1100px){ .cl-item-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:720px){  .cl-item-grid{grid-template-columns:1fr;} }
/* Item card — explicit border + background so each block is visible in
   light theme (was washing out before). */
.cl-item-grid > div{background:var(--s0);border:1px solid var(--s3) !important;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.04);margin-bottom:0 !important;}
.cl-item-grid > div:hover{box-shadow:0 2px 6px rgba(0,0,0,.08);}

/* ── 106f1: Document Expiration Calendar ─────────────────────────────── */
.cal-week-head{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;padding:6px 0;border-bottom:1px solid var(--s3);background:var(--s1);text-align:center;}
.cal-month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;background:var(--s2);border:1px solid var(--s3);padding:4px;border-radius:8px;}
.cal-cell{background:var(--s0);min-height:90px;padding:4px 5px;border-radius:5px;display:flex;flex-direction:column;gap:3px;border:1px solid transparent;transition:border-color .12s,background .12s;}
.cal-cell.empty{background:transparent;min-height:0;}
.cal-cell.is-today{border-color:#1a73e8;background:linear-gradient(180deg,#1a73e80c 0%,var(--s0) 18%);}
.cal-cell.drop-over{border-color:#1a73e8;background:#e8f0fe;}
.cal-day-num{font-size:11px;font-weight:600;color:var(--t2);display:flex;align-items:center;justify-content:space-between;}
.cal-day-num .cal-day-count{font-size:9px;font-weight:700;background:var(--s2);color:var(--t2);padding:1px 5px;border-radius:8px;}
.cal-day-items{display:flex;flex-direction:column;gap:2px;overflow:hidden;}
.cal-pill{padding:2px 6px;border-radius:4px;font-size:10.5px;font-weight:600;cursor:grab;border:1px solid transparent;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:transform .08s, box-shadow .12s;}
.cal-pill:hover{box-shadow:0 1px 3px rgba(0,0,0,.18);transform:translateY(-1px);}
.cal-pill.dragging{opacity:.45;cursor:grabbing;}
.cal-pill.lvl-ok      {background:#e6f4ea;color:#0d652d;border-color:#1e8e3e44;}
.cal-pill.lvl-soon    {background:#fef7e0;color:#a55c00;border-color:#f9ab0044;}
.cal-pill.lvl-expired {background:#fce8e6;color:#a50e0e;border-color:#d9302566;}
.cal-pill-title{display:block;overflow:hidden;text-overflow:ellipsis;}
@media (max-width: 760px){
  .cal-cell{min-height:70px;}
  .cal-pill{font-size:9.5px;padding:1px 4px;}
}

/* ── 106f2: Cron Steps modal panes — both same size, toggle via class ── */
.csm-pane{display:none;}
.csm-pane.csm-active{display:flex;flex-direction:column;}

/* ── 106f2: Custom Tables — 3-column responsive grid ───────────────── */
.ct-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
@media (max-width:1100px){ .ct-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:720px){  .ct-grid{grid-template-columns:1fr;} }
.ct-grid > div{margin-bottom:0 !important;}

/* ── 106f2 → 106f5: Topbar icon buttons — true 3D depth ──────────────
   The bell, theme switcher, hamburger toggle (sidepanel), profile, and
   Links button share the same visual language. The 3D effect comes from
   a layered approach:
     1. A subtle vertical gradient gives the surface a top-light feel.
     2. A 1px inset highlight on the top edge mimics a beveled lip.
     3. A small soft drop-shadow grounds the button to the bar below.
     4. A 1px outer border keeps the silhouette crisp.
   Active state inverts the gradient + pushes the button down slightly so
   it feels physically pressed. */
/* 106f8: Nef requested removing the square button surround from the
   topbar icons — show just the colorful glyph, no background/border/
   shadow. Hover lifts the glyph slightly instead of changing the
   button surface. Applies to .tb-icon-btn (bell, theme), .aps-toggle
   (left hamburger), #panel-toggle (right hamburger), and #ql-btn
   (Links pill — keeps the label/caret but loses the box). */
.tb-icon-btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  padding:0;
  border-radius:12px;
  border:none;
  background:transparent;
  color:var(--t2);
  cursor:pointer;
  transition:transform .12s, color .15s;
  box-shadow:none;
  flex-shrink:0;
}
.tb-icon-btn:hover{
  background:transparent;
  border-color:transparent;
  color:var(--blue);
  transform:translateY(-2px);
  box-shadow:none;
}
.tb-icon-btn:active{
  transform:translateY(0);
  background:transparent;
  box-shadow:none;
}
.tb-icon-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(26,115,232,.30); }
/* Unread badge sits on top of the icon */
.tb-icon-badge{
  position:absolute;top:-3px;right:-3px;
  background:linear-gradient(180deg,#ea4335 0%,#c5221f 100%);
  color:#fff;
  font-size:10px;font-weight:700;line-height:1;
  padding:2px 5px;border-radius:9px;
  min-width:16px;text-align:center;
  border:2px solid var(--s0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    0 2px 5px rgba(217,48,37,.5);
}
/* 106fi: pulsing ring around the badge so it draws the eye when an
   unread announcement / message is waiting. Stops once the user opens
   the bell panel and items are marked read. */
.tb-icon-badge::after{
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:50%;
  border:2px solid rgba(234,67,53,.55);
  animation:tb-badge-pulse 1.6s ease-out infinite;
  pointer-events:none;
}
@keyframes tb-badge-pulse{
  0%   { transform:scale(0.9); opacity:.7; }
  70%  { transform:scale(1.45); opacity:0; }
  100% { transform:scale(1.45); opacity:0; }
}
/* Bell-icon emoji takes on a slight forward-tilt / brighter cue while
   the badge is visible — the wrapper class is added/removed by
   notifUpdateBell based on unread count. */
.tb-icon-btn.has-unread .tb-glyph{
  filter:drop-shadow(0 0 6px rgba(234,67,53,.55));
  animation:tb-bell-wiggle 1.6s ease-in-out infinite;
}
@keyframes tb-bell-wiggle{
  0%, 60%, 100% { transform:rotate(0deg); }
  10%           { transform:rotate(-12deg); }
  20%           { transform:rotate(10deg); }
  30%           { transform:rotate(-8deg); }
  40%           { transform:rotate(6deg); }
  50%           { transform:rotate(-3deg); }
}
/* Dark-mode sun icon stays warm yellow */
#theme-btn.dark svg{ color:#f9c950; }

/* User pill button — pill-shaped with avatar + name. Matches the style
   of the Links button but with an avatar circle on the left. */
/* 106fd: Profile and Links both get a subtle pill outline. The icon
   buttons (bell, theme, hamburger) stay flat — only the pill-shaped
   buttons get the border. */
.tb-user-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:4px 14px 4px 4px;
  height:44px;
  border-radius:22px;
  border:1.5px solid var(--s4);
  background:var(--s0);
  color:var(--t1);
  font-size:13px;font-weight:600;
  cursor:pointer;
  transition:transform .12s, border-color .15s, background .15s, color .15s;
  box-shadow:0 1px 2px rgba(60,64,67,.08);
  flex-shrink:0;
}
.tb-user-btn:hover{
  background:var(--blueL);
  border-color:var(--blue);
  color:var(--blue);
  transform:translateY(-1px);
  box-shadow:0 3px 8px rgba(26,115,232,.20);
}
.tb-user-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(26,115,232,.30); }
.tb-user-btn #user-login-icon{ color:var(--t2); margin-left:4px; }
.tb-user-btn #user-topbar-label{
  font-size:13px;font-weight:600;
  max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--t1);
}
/* Stale duplicate removed — see #user-avatar-wrap block lower in this
   file (106f8 claymorphism version) for the active style. */

/* Sidepanel hamburger gets the same treatment so it visually matches
   the topbar icons. */
.aps-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin:8px auto;
  border-radius:12px;
  border:none;
  background:transparent;
  color:var(--t2);
  cursor:pointer;
  transition:transform .12s, color .15s;
  box-shadow:none;
}
.aps-toggle:hover{
  background:transparent;
  border-color:transparent;color:var(--blue);
  transform:translateY(-2px);
  box-shadow:none;
}
/* Links button — matches the user pill so the two read as a coherent pair. */
#ql-btn{
  height:44px;
  padding:0 14px;
  background:var(--s0) !important;
  border:1.5px solid var(--s4) !important;
  border-radius:22px !important;
  box-shadow:0 1px 2px rgba(60,64,67,.08) !important;
  transition:transform .12s, border-color .15s, background .15s, color .15s;
}
#ql-btn:hover{
  background:var(--blueL) !important;
  border-color:var(--blue) !important;
  color:var(--blue) !important;
  transform:translateY(-1px);
  box-shadow:0 3px 8px rgba(26,115,232,.20) !important;
}

/* Dark-mode tweaks — icon buttons (bell, theme, hamburger) stay flat,
   the two pill buttons (Profile + Links) keep a subtle outline. */
:root[data-theme="dark"] .tb-icon-btn,
:root[data-theme="dark"] .aps-toggle{
  background:transparent !important;
  border-color:transparent !important;
  color:var(--t1) !important;
  box-shadow:none !important;
}
:root[data-theme="dark"] .tb-icon-btn:hover,
:root[data-theme="dark"] .aps-toggle:hover{
  background:transparent !important;
  color:var(--blue) !important;
  box-shadow:none !important;
}
:root[data-theme="dark"] .tb-user-btn,
:root[data-theme="dark"] #ql-btn{
  background:var(--s1) !important;
  border-color:var(--s4) !important;
  color:var(--t1) !important;
  box-shadow:0 1px 2px rgba(0,0,0,.40) !important;
}
:root[data-theme="dark"] .tb-user-btn:hover,
:root[data-theme="dark"] #ql-btn:hover{
  background:var(--blueL) !important;
  border-color:var(--blue) !important;
  color:var(--blue) !important;
  box-shadow:0 3px 8px rgba(26,115,232,.35) !important;
}
/* 106f7: dark-mode Links button — caret + label inherit text color */
:root[data-theme="dark"] #ql-btn .ql-caret{ stroke:var(--t1); }
:root[data-theme="dark"] #ql-btn-label{ color:var(--t1); }

/* ── 106f5: mobile sizing for the modernized topbar icons. On narrow
   screens the topbar gets crowded once the user is signed in (bell +
   theme + profile + Links + 2 action buttons). Tighten everything so
   it still fits on a phone without overlap. */
@media (max-width:560px){
  .tb-icon-btn{ width:34px;height:34px;border-radius:9px; }
  .tb-icon-btn svg{ width:18px;height:18px; }
  .aps-toggle{ width:34px;height:34px;border-radius:9px; }
  .tb-user-btn{ height:34px;padding:3px 10px 3px 3px;border-radius:18px; }
  .tb-user-btn #user-topbar-label{ max-width:80px;font-size:12px; }
  #user-avatar-wrap{ width:26px;height:26px;font-size:11px; }
  #ql-btn{ height:34px; }
  /* When the topbar is really tight, hide the user name and just show the
     avatar — the dropdown still labels the account. */
}
@media (max-width:380px){
  .tb-user-btn #user-topbar-label{ display:none; }
  .tb-user-btn{ padding:3px 6px; }
  #topbar{ gap:6px;padding:0 10px; }
}
/* Notification dropdown on mobile: edge-to-edge with a small gutter so
   the right-anchored card never hangs off-screen. */
@media (max-width:440px){
  #notif-panel .notif-panel-card{ width:calc(100vw - 16px);max-height:calc(100vh - 80px); }
}
/* Tour card: keep within a narrow phone viewport at all step placements. */
@media (max-width:560px){
  .tour-card{ font-size:12.5px;padding:13px 14px; }
  .tour-card h4{ font-size:14px; }
  .tour-card .tour-eg{ font-size:11.5px; }
}

/* ── 106f6: Quick Links icon picker (admin) + emoji glyph in dropdown ─ */
.ql-icon-picker{ display:grid;grid-template-columns:repeat(12,1fr);gap:4px;padding:6px;border:1px solid var(--s3);border-radius:6px;background:var(--s1);max-height:140px;overflow-y:auto;}
@media (max-width:760px){ .ql-icon-picker{ grid-template-columns:repeat(8,1fr);} }
.ql-icon-opt{ width:30px;height:30px;border:1.5px solid transparent;border-radius:6px;background:transparent;cursor:pointer;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;transition:transform .08s, background .15s, border-color .15s;}
.ql-icon-opt:hover{ background:var(--s2);transform:scale(1.1); }
.ql-icon-opt.selected{ border-color:var(--blue);background:var(--blueL);box-shadow:0 0 0 1px var(--blue) inset; }
.ql-dd-emoji{ display:inline-flex;align-items:center;justify-content:center;width:24px;font-size:18px;flex-shrink:0;line-height:1;}

/* ── 106f6: Colorful emoji glyphs in topbar icon buttons ────────────
   Emoji render as colorful 3D glyphs on all modern OSes (Apple SBIX,
   Windows segoe-color, Android noto-color). Sized to match the SVG
   icons they replace, with a subtle pop on hover. */
.tb-glyph{
  font-size:26px; line-height:1;
  font-family: 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji','EmojiOne Color',sans-serif;
  font-variant-emoji:emoji;
  display:inline-flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.12));
  transition:transform .12s;
  user-select:none;
}
.tb-icon-btn:hover .tb-glyph,
.tb-user-btn:hover .tb-glyph,
.aps-toggle:hover .tb-glyph{ transform:scale(1.12); }
/* New 3D person SVG icon shown when signed-out — bumped to SaaS standard. */
.tb-user-btn .person3d{ width:34px; height:34px; flex-shrink:0; transition:transform .12s; }
.tb-user-btn:hover .person3d{ transform:scale(1.08); }
/* Hamburger 3D claymorphism SVG sizing — both hamburger icons */
.ham3d{ width:32px; height:32px; flex-shrink:0; transition:transform .12s; }
.aps-toggle:hover .ham3d, #panel-toggle:hover .ham3d{ transform:scale(1.08); }

/* 106f8: signed-in avatar = 3D claymorphism tile with initials. Pumped
   up to 38×38 with stronger inset highlight + deeper drop shadow so
   the 3D effect is unmistakable. Background gradient is set inline
   from JS based on the user's role (admin amber, supervisor blue,
   staff green, partner purple, viewer gray). */
/* 106fa/106fb: avatar wrap hosts the 3D person SVG. Transparent — the SVG
   itself provides the look. 32×32 matches the standard SaaS topbar
   icon footprint (down from 42 which felt oversized in the user pill). */
#user-avatar-wrap{
  width:32px; height:32px;
  border-radius:50%;
  background:transparent;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  padding:0;
  filter:drop-shadow(0 1.5px 3px rgba(0,0,0,.22));
  transition:transform .12s, filter .15s;
}
#user-avatar-wrap svg{ width:100%; height:100%; display:block; }
.tb-user-btn:hover #user-avatar-wrap{
  transform:scale(1.08);
  filter:drop-shadow(0 3px 6px rgba(26,115,232,.40));
}
/* Hamburger glyph wrapper — gives the SVG a subtle drop-shadow so the
   gradient bars match the topbar icons' depth. */
.aps-toggle-glyph{
  display:inline-flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 1px 2px rgba(26,115,232,.35));
  transition:transform .12s;
}
.aps-toggle:hover .aps-toggle-glyph{ transform:scale(1.08); }

/* ── 106f7: Help Center compact tour/feedback strip + group accordion ── */
.help-compact-cta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:10px 14px; background:linear-gradient(180deg,var(--blueL) 0%,var(--s1) 100%);
  border-bottom:1px solid var(--s3);
}
.help-compact-cta .hc-ico{ font-size:18px; }
.help-compact-cta .hc-text{ font-size:12.5px; color:var(--t2); flex:1; }
.help-compact-cta .hc-btn{
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 11px; font-size:12px; font-weight:600;
  background:#fff; color:var(--t1); border:1px solid var(--s4);
  border-radius:8px; cursor:pointer; transition:all .12s;
  box-shadow:0 1px 2px rgba(60,64,67,.10);
}
.help-compact-cta .hc-btn.primary{
  background:linear-gradient(180deg,#1d6fdc 0%,#1557b0 100%);
  color:#fff; border-color:#1557b0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 2px 4px rgba(26,115,232,.30);
}
.help-compact-cta .hc-btn:hover{ transform:translateY(-1px); box-shadow:0 4px 8px rgba(60,64,67,.15); }
.help-compact-cta .hc-btn.primary:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 4px 10px rgba(26,115,232,.40); }
.help-compact-cta .hc-sep{ width:1px; height:20px; background:var(--s4); margin:0 4px; }
:root[data-theme="dark"] .help-compact-cta .hc-btn{ background:linear-gradient(180deg,#3a3d42 0%,#2b2d31 100%); color:var(--t1); border-color:var(--s4); }
:root[data-theme="dark"] .help-compact-cta .hc-btn.primary{ background:linear-gradient(180deg,#1d6fdc 0%,#1557b0 100%); color:#fff; }

/* 106fp: tour nudge banner — narrower than the announcement bar,
   floats top-center, dismissible. Shown once per session for users
   who have never started the guided tour. */
#tour-nudge-banner{
  position:fixed; z-index:9997;
  top:64px; left:50%; transform:translateX(-50%);
  max-width:560px; width:calc(100% - 32px);
  display:none;
  background:linear-gradient(135deg,#fff5d6,#fef7e0);
  border:1px solid #f9c950; border-left:4px solid #f9ab00;
  border-radius:8px;
  box-shadow:0 6px 20px rgba(60,64,67,.18);
  padding:12px 14px;
  align-items:center;
  gap:12px;
  animation:tnb-slide-in .35s ease-out;
}
#tour-nudge-banner.show{ display:flex; }
@keyframes tnb-slide-in{
  from { opacity:0; transform:translate(-50%, -16px); }
  to   { opacity:1; transform:translate(-50%, 0); }
}
#tour-nudge-banner .tnb-ico{ font-size:22px; line-height:1; flex-shrink:0; }
#tour-nudge-banner .tnb-text{ flex:1; min-width:0; font-size:13px; color:#5a3a00; line-height:1.35; }
#tour-nudge-banner .tnb-text b{ color:#a05a00; font-weight:700; }
#tour-nudge-banner .tnb-btn{
  font-size:12.5px; font-weight:600; padding:6px 12px;
  border-radius:6px; cursor:pointer; flex-shrink:0;
  transition:transform .12s, box-shadow .15s;
}
#tour-nudge-banner .tnb-btn.primary{
  background:linear-gradient(180deg,#1d6fdc,#1557b0); color:#fff; border:1px solid #1557b0;
}
#tour-nudge-banner .tnb-btn.ghost{
  background:transparent; color:#5a3a00; border:1px solid #d4a82c;
}
#tour-nudge-banner .tnb-btn:hover{ transform:translateY(-1px); box-shadow:0 3px 8px rgba(60,64,67,.20); }
#tour-nudge-banner .tnb-close{
  background:transparent; border:none; color:#5a3a00; cursor:pointer; font-size:18px; line-height:1; padding:4px 6px;
  border-radius:4px; flex-shrink:0;
}
#tour-nudge-banner .tnb-close:hover{ background:rgba(0,0,0,.06); }
:root[data-theme="dark"] #tour-nudge-banner{
  background:linear-gradient(135deg,#3a2f0a,#2b240a);
  border-color:#a8841f; border-left-color:#f9ab00;
}
:root[data-theme="dark"] #tour-nudge-banner .tnb-text{ color:#f4e0a8; }
:root[data-theme="dark"] #tour-nudge-banner .tnb-text b{ color:#fbd35a; }
:root[data-theme="dark"] #tour-nudge-banner .tnb-btn.ghost{ color:#f4e0a8; border-color:#7a5e1a; }
:root[data-theme="dark"] #tour-nudge-banner .tnb-close{ color:#f4e0a8; }

/* 106ft: full-screen session-lockout overlay. Blocks all interaction
   with the underlying app; user can only Sign In or Reload. */
#session-lockout{
  position:fixed; inset:0;
  z-index:2147483646; /* one below max so toasts can still show on top if needed */
  display:flex; align-items:center; justify-content:center;
  pointer-events:auto;
}
#session-lockout .sl-backdrop{
  position:absolute; inset:0;
  background:rgba(15,20,30,.78);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:sl-fade-in .25s ease-out;
}
#session-lockout .sl-card{
  position:relative; z-index:1;
  background:var(--s0); color:var(--t1);
  width:calc(100% - 32px); max-width:440px;
  border-radius:14px;
  padding:32px 28px 24px;
  text-align:center;
  box-shadow:0 24px 64px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.08);
  animation:sl-pop-in .35s cubic-bezier(.2,.9,.3,1.2);
}
#session-lockout .sl-icon{
  font-size:48px; line-height:1;
  margin-bottom:14px;
  filter:drop-shadow(0 4px 12px rgba(217,48,37,.45));
}
#session-lockout .sl-title{
  margin:0 0 8px;
  font-size:20px; font-weight:700;
  color:var(--t1);
}
#session-lockout .sl-body{
  margin:0 0 22px;
  font-size:14px; line-height:1.5;
  color:var(--t2);
}
#session-lockout .sl-actions{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin-bottom:14px;
}
#session-lockout .sl-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 22px; border-radius:8px;
  font-size:14px; font-weight:700; cursor:pointer;
  border:1.5px solid var(--s4);
  background:var(--s0); color:var(--t1);
  font-family:var(--font);
  transition:transform .12s, box-shadow .15s, background .15s;
  min-width:120px;
}
#session-lockout .sl-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(60,64,67,.18);
}
#session-lockout .sl-btn.primary{
  background:linear-gradient(180deg,#1d6fdc 0%,#1557b0 100%);
  color:#fff;
  border-color:#1557b0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 2px 5px rgba(26,115,232,.30);
}
#session-lockout .sl-btn.primary:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 4px 12px rgba(26,115,232,.50);
}
#session-lockout .sl-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(26,115,232,.40), 0 4px 10px rgba(60,64,67,.18);
}
#session-lockout .sl-footnote{
  font-size:11.5px; color:var(--t3);
  margin-top:4px;
}
@keyframes sl-fade-in{
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes sl-pop-in{
  from { opacity:0; transform:scale(.92) translateY(8px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
/* Defense-in-depth: while session is locked, hide signed-in UI
   regions behind the overlay so the app reads as "not signed in"
   even if dev-tools removes the overlay. */
body.session-locked .signed-in-only,
body.session-locked .admin-only,
body.session-locked #right-panel,
body.session-locked #notif-panel,
body.session-locked #user-dropdown,
body.session-locked #ann-bar,
body.session-locked #tour-nudge-banner{
  display:none !important;
}
/* Dark-mode card */
:root[data-theme="dark"] #session-lockout .sl-card{
  background:#1f2228;
  border-color:rgba(255,255,255,.10);
}

/* 106fs: tour status pill — redesigned for narrow side panels.
   Stacked layout (no left-icon column), responsive buttons styled
   to match the original blue "Take the tour" CTA. */
.tour-status-card{
  margin:8px 0 12px;
  padding:12px 14px;
  border:1px solid var(--s3);
  border-left:4px solid #1a73e8;
  border-radius:8px;
  background:var(--s1);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.tour-status-card[data-status="completed"]{ background:#e6f4ea33; }
.tour-status-card[data-status="skipped"]  { background:#fef7e055; }
.tour-status-card[data-status="in_progress"]{ background:#e8f0fe55; }
.tour-pill-head{
  display:flex; flex-direction:column; gap:4px;
}
.tour-pill-chip{
  align-self:flex-start;
  font-size:10.5px; font-weight:700;
  letter-spacing:.5px; text-transform:uppercase;
  padding:2px 8px; border-radius:10px;
  border:1px solid;
  line-height:1.4;
}
.tour-pill-title{
  margin:0;
  font-size:14.5px; font-weight:700;
  line-height:1.3;
}
.tour-pill-body{
  margin:0;
  font-size:12.5px; color:var(--t2);
  line-height:1.4;
}
.tour-pill-progress{
  height:5px; background:rgba(60,64,67,.10);
  border-radius:3px; overflow:hidden;
}
.tour-pill-progress-fill{
  height:100%; transition:width .25s;
}
.tour-pill-actions{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:2px;
}
/* Pill buttons match the blue "Take the tour" CTA — same gradient,
   shadow, hover lift. Two variants: primary (blue) and ghost (white). */
.tour-pill-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:8px;
  font-size:13px; font-weight:700; cursor:pointer;
  border:1.5px solid transparent;
  transition:transform .12s, box-shadow .15s, background .15s;
  font-family:var(--font);
  white-space:nowrap;
  line-height:1;
}
.tour-pill-btn .tpb-ico{ font-size:14px; line-height:1; }
.tour-pill-btn.primary{
  background:linear-gradient(180deg,#1d6fdc 0%,#1557b0 100%);
  color:#fff;
  border-color:#1557b0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 2px 5px rgba(26,115,232,.30);
}
.tour-pill-btn.primary:hover{
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30), 0 4px 10px rgba(26,115,232,.45);
}
.tour-pill-btn.ghost{
  background:var(--s0);
  color:var(--t1);
  border-color:var(--s4);
  box-shadow:0 1px 2px rgba(60,64,67,.10);
}
.tour-pill-btn.ghost:hover{
  transform:translateY(-1px);
  border-color:var(--blue);
  color:var(--blue);
  box-shadow:0 3px 8px rgba(60,64,67,.15);
}
/* Dark-mode adjustments */
:root[data-theme="dark"] .tour-status-card{ background:var(--s2); }
:root[data-theme="dark"] .tour-status-card[data-status="completed"]{ background:#1f3a282b; }
:root[data-theme="dark"] .tour-status-card[data-status="skipped"]  { background:#3a2f0a30; }
:root[data-theme="dark"] .tour-status-card[data-status="in_progress"]{ background:#1a2c4a30; }
:root[data-theme="dark"] .tour-pill-btn.ghost{ background:linear-gradient(180deg,#3a3d42 0%,#2b2d31 100%); color:var(--t1); border-color:var(--s4); }

/* 106fn: small red dot on the Help tab nav button when the user has
   an incomplete tour. Sits in the top-right corner of the button. */
#tn-help { position:relative; }
.help-nav-badge{
  position:absolute;
  top:6px;
  right:6px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ea4335;
  box-shadow:0 0 0 1.5px var(--s0), 0 0 6px rgba(234,67,53,.6);
  pointer-events:none;
}
/* Pulsing variant — same approach as the bell badge. */
.help-nav-badge::after{
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:50%;
  border:2px solid rgba(234,67,53,.55);
  animation:tb-badge-pulse 1.8s ease-out infinite;
}

/* Group accordion */
.help-group{ border-bottom:1px solid var(--s3); }
.help-group-header{
  width:100%; padding:14px 18px; background:var(--s1); border:none; cursor:pointer;
  display:flex; align-items:center; gap:10px;
  text-align:left; transition:background .12s;
  border-left:3px solid transparent;
}
.help-group-header:hover{ background:var(--s2); border-left-color:var(--blue); }
.help-group-header[aria-expanded="true"]{ background:var(--blueL); border-left-color:var(--blue); }
.help-group-header .hg-title{
  flex:1; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.8px; color:var(--t1);
}
.help-group-header[aria-expanded="true"] .hg-title{ color:var(--blue); }
.help-group-header .hg-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:18px; padding:0 6px;
  font-size:10.5px; font-weight:700; color:var(--t3);
  background:var(--s0); border:1px solid var(--s4); border-radius:9px;
}
.help-group-header[aria-expanded="true"] .hg-count{ background:#fff; color:var(--blue); border-color:var(--blue); }
.help-group-header .hg-chev{ font-size:14px; color:var(--t3); width:14px; text-align:center; transition:transform .12s; }

/* Topic rows inside a group */
.help-topic{ border-top:1px solid var(--s3); }
.help-topic:first-child{ border-top:none; }
.help-topic-header{
  width:100%; padding:11px 18px 11px 30px; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; gap:10px; text-align:left;
  transition:background .1s;
}
.help-topic-header:hover{ background:var(--s2); }
.help-topic-header .ht-ico{ font-size:18px; flex-shrink:0; filter:drop-shadow(0 1px 1px rgba(0,0,0,.10)); }
.help-topic-header .ht-title{ flex:1; font-size:13.5px; font-weight:600; color:var(--t1); }
.help-topic-header .ht-chev{ color:var(--t3); font-size:14px; flex-shrink:0; }
.help-topic-body{
  padding:4px 22px 16px 58px;
  font-size:13px; color:var(--t2); line-height:1.7;
  background:var(--s1);
  border-top:1px solid var(--s3);
}
:root[data-theme="dark"] .help-topic-body{ background:var(--s1); }