:root{
  color-scheme: light;
  /* cool, modern neutral surfaces */
  --page-bg:   #eef1f7;
  --surface:   #ffffff;
  --surface-2: #f5f7fb;
  --surface-glass: color-mix(in srgb, #ffffff 78%, transparent);
  --border:    rgba(16,24,40,0.08);
  --border-strong: rgba(16,24,40,0.14);
  --text:      #0f172a;
  --text-dim:  #475569;
  --text-muted:#94a3b8;
  --grid:      #eef1f5;
  --baseline:  #cbd5e1;

  --primary:      #2f6ae0;
  --primary-wash: #eaf1fd;

  --good:     #0ca30c;  --good-wash:     #e7f6ea;
  --warning:  #c98500;  --warning-wash:  #fdf1da;
  --critical: #d03b3b;  --critical-wash: #fceaea;
  --violet:   #5b4bd6;  --violet-wash:   #eeecfc;
  --teal:     #0e8a8a;  --teal-wash:     #e2f5f5;

  --radius:    14px;
  --radius-sm: 9px;

  /* layered soft shadows */
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.06);
  --shadow-md: 0 2px 4px -2px rgba(16,24,40,0.06), 0 10px 20px -6px rgba(16,24,40,0.10);
  --shadow-lg: 0 8px 16px -6px rgba(16,24,40,0.10), 0 24px 48px -12px rgba(16,24,40,0.16);

  /* motion */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: .15s;
  --dur-med:  .28s;
  --dur-slow: .45s;

  font-size:16px;
}
:root:where(:not([data-theme="light"])) {
  @media (prefers-color-scheme: dark){
    color-scheme: dark;
    --page-bg:   #0a0d14;
    --surface:   #141926;
    --surface-2: #1b2130;
    --surface-glass: color-mix(in srgb, #141926 72%, transparent);
    --border:    rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.16);
    --text:      #f1f5f9;
    --text-dim:  #c3ccda;
    --text-muted:#8592a6;
    --grid:      #232b3a;
    --baseline:  #334155;

    --primary:      #5b8ef5;
    --primary-wash: #16233d;

    --good:     #22c55e;  --good-wash:     #10281a;
    --warning:  #fab219;  --warning-wash:  #33270a;
    --critical: #f26a6a;  --critical-wash: #311618;
    --violet:   #9a8cf5;  --violet-wash:   #201c3c;
    --teal:     #2dd4d4;  --teal-wash:     #0c2626;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
    --shadow-md: 0 2px 8px -2px rgba(0,0,0,0.45), 0 12px 24px -8px rgba(0,0,0,0.5);
    --shadow-lg: 0 10px 30px -8px rgba(0,0,0,0.6), 0 30px 60px -20px rgba(0,0,0,0.7);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --page-bg:   #0a0d14;
  --surface:   #141926;
  --surface-2: #1b2130;
  --surface-glass: color-mix(in srgb, #141926 72%, transparent);
  --border:    rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --text:      #f1f5f9;
  --text-dim:  #c3ccda;
  --text-muted:#8592a6;
  --grid:      #232b3a;
  --baseline:  #334155;

  --primary:      #5b8ef5;
  --primary-wash: #16233d;

  --good:     #22c55e;  --good-wash:     #10281a;
  --warning:  #fab219;  --warning-wash:  #33270a;
  --critical: #f26a6a;  --critical-wash: #311618;
  --violet:   #9a8cf5;  --violet-wash:   #201c3c;
  --teal:     #2dd4d4;  --teal-wash:     #0c2626;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 2px 8px -2px rgba(0,0,0,0.45), 0 12px 24px -8px rgba(0,0,0,0.5);
  --shadow-lg: 0 10px 30px -8px rgba(0,0,0,0.6), 0 30px 60px -20px rgba(0,0,0,0.7);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{
  background:
    radial-gradient(1200px 600px at 6% -10%, color-mix(in srgb, var(--primary) 10%, transparent), transparent),
    radial-gradient(1000px 520px at 100% -4%, color-mix(in srgb, var(--violet) 9%, transparent), transparent),
    radial-gradient(900px 480px at 50% 108%, color-mix(in srgb, var(--teal) 6%, transparent), transparent),
    var(--page-bg);
  background-attachment:fixed;
}
body{
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"cv02","cv03","cv04","ss01";
  padding-bottom:48px;
}
.hidden{display:none !important;}

/* ---------------- Motion primitives ---------------- */
@keyframes fadeSlideUp{
  from{opacity:0; transform:translateY(12px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes fadeIn{
  from{opacity:0;} to{opacity:1;}
}
@keyframes popIn{
  from{opacity:0; transform:scale(.92);}
  to{opacity:1; transform:scale(1);}
}
@keyframes rowIn{
  from{opacity:0; transform:translateY(3px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes pulseRing{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--primary) 45%, transparent);}
  100%{box-shadow:0 0 0 9px color-mix(in srgb, var(--primary) 0%, transparent);}
}

#app:not(.hidden){animation: fadeIn var(--dur-slow) var(--ease-out) both;}
.tab-panel:not(.hidden){animation: fadeSlideUp var(--dur-med) var(--ease-out) both;}

/* Topbar — glassy sticky header */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 28px; background:var(--surface-glass);
  -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:20; flex-wrap:wrap;
  box-shadow:0 1px 0 var(--border), 0 6px 24px -18px rgba(16,24,40,0.5);
}
.brand{display:flex; align-items:center; gap:13px;}
.brand-mark{
  font-size:19px; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:12px; flex:none;
  background:linear-gradient(135deg, var(--good), var(--primary) 55%, var(--violet));
  box-shadow:0 6px 18px -5px color-mix(in srgb, var(--primary) 60%, transparent), inset 0 1px 0 rgba(255,255,255,0.25);
  transition:transform var(--dur-med) var(--ease-spring);
}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.08);}
.brand h1{font-size:16.5px; margin:0; font-weight:700; letter-spacing:-0.02em;}
.file-meta{font-size:12.5px; color:var(--text-muted); margin-top:2px;}
.topbar-actions{display:flex; gap:9px; flex-wrap:wrap;}

.btn{
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text);
  padding:9px 15px; border-radius:var(--radius-sm); font-size:13px; font-weight:600;
  cursor:pointer; box-shadow:var(--shadow-sm);
  transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover{background:var(--surface-2); transform:translateY(-1px); box-shadow:var(--shadow-md);}
.btn:disabled{opacity:.6; cursor:wait; pointer-events:none; transform:none; box-shadow:none;}
.btn:active{transform:translateY(0) scale(.97); transition-duration:.08s;}
.btn-primary{
  background:linear-gradient(135deg, var(--primary), var(--violet)); border-color:transparent; color:#fff;
  box-shadow:0 4px 14px -4px color-mix(in srgb, var(--primary) 55%, transparent);
}
.btn-primary:hover{filter:brightness(1.08); box-shadow:0 8px 22px -5px color-mix(in srgb, var(--primary) 65%, transparent);}
.btn-ghost{background:transparent; border-color:transparent; box-shadow:none;}
.btn-ghost:hover{background:var(--surface-2); border-color:var(--border);}

/* Tabs — glassy segmented nav */
.tabs{
  display:flex; gap:4px; padding:0 28px; background:var(--surface-glass);
  -webkit-backdrop-filter:saturate(1.6) blur(14px); backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid var(--border); position:sticky; top:var(--topbar-h, 66px); z-index:19; overflow-x:auto;
}
.tab{
  border:none; background:transparent; color:var(--text-muted); position:relative; z-index:1;
  font-weight:600; font-size:13.5px; padding:13px 15px; cursor:pointer; white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-out);
}
.tab:hover{color:var(--text-dim);}
.tab.active{color:var(--primary);}
.tab-indicator{
  position:absolute; bottom:0; height:3px; background:linear-gradient(90deg, var(--primary), var(--violet)); border-radius:3px 3px 0 0;
  transition:left var(--dur-med) var(--ease-spring), width var(--dur-med) var(--ease-spring);
  left:0; width:0; pointer-events:none; box-shadow:0 0 12px -1px color-mix(in srgb, var(--primary) 55%, transparent);
}

/* Filter bar */
.filterbar{
  display:flex; flex-wrap:wrap; gap:22px; align-items:flex-end;
  padding:18px 20px; margin:22px 28px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-md);
  animation: fadeSlideUp var(--dur-med) var(--ease-out) both;
  /* The filling animation transforms this bar, which makes it a stacking
     context — an open multi-select panel is therefore trapped inside it and
     was being painted under the KPI cards and tables that follow. Lifting the
     whole bar keeps the dropdowns on top, while the sticky topbar (20) and
     tab nav (19) still sit above it. */
  position:relative; z-index:5;
}
.filter-group{display:flex; flex-direction:column; gap:6px;}
.filter-group > label{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted);}
.filter-row{display:flex; align-items:center; gap:6px;}
input[type=date], select, input[type=text]{
  border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text);
  padding:8px 10px; border-radius:var(--radius-sm); font-size:13px; font-family:inherit;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
input[type=date]:focus, select:focus, input[type=text]:focus{outline:none; border-color:var(--primary); background:var(--surface); box-shadow:0 0 0 3.5px color-mix(in srgb, var(--primary) 16%, transparent);}
.date-input-group{display:flex; align-items:center; border:1px solid var(--border-strong); border-radius:var(--radius-sm); overflow:hidden; background:var(--surface-2); position:relative; transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);}
.date-input-group:focus-within{border-color:var(--primary); box-shadow:0 0 0 3.5px color-mix(in srgb, var(--primary) 16%, transparent);}
.date-input-group input[type=date]{border:none; border-radius:0; background:transparent;}
.date-input-group input[type=date]:focus{box-shadow:none;}
.date-input-group input[type=date]::-webkit-calendar-picker-indicator{opacity:0; position:absolute; right:0; width:26px; height:100%; cursor:pointer;}
.cal-btn{
  border:none; border-left:1px solid var(--border); background:transparent; color:var(--text-muted);
  padding:8px 10px; cursor:pointer; font-size:13px; line-height:1; transition:color var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}
.cal-btn:hover{color:var(--primary); transform:scale(1.15);}
/* Multi-select dropdown */
.multiselect{position:relative;}
.ms-trigger{
  border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text);
  padding:8px 28px 8px 11px; border-radius:var(--radius-sm); font-size:13px; font-family:inherit;
  cursor:pointer; text-align:left; min-width:130px; max-width:220px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position:relative;
  transition:border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.ms-trigger::after{
  content:"⌄"; position:absolute; right:10px; top:50%; color:var(--text-muted); font-size:11px;
  transform:translateY(-50%) rotate(0deg); transition:transform var(--dur-med) var(--ease-spring);
}
.ms-trigger.open::after{transform:translateY(-50%) rotate(180deg);}
.ms-trigger:hover{border-color:var(--baseline);}
.ms-trigger.active{border-color:var(--primary); color:var(--primary); background:var(--primary-wash);}
.ms-trigger.open{border-color:var(--primary); box-shadow:0 0 0 3.5px color-mix(in srgb, var(--primary) 16%, transparent);}
.ms-trigger:focus{outline:none;}
.ms-panel{
  position:absolute; top:calc(100% + 6px); left:0; z-index:30; width:250px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:9px;
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-6px) scale(.96);
  transform-origin:top left;
  transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-med) var(--ease-spring), visibility 0s linear var(--dur-fast);
}
.ms-panel.open{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1);
  transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-med) var(--ease-spring), visibility 0s linear 0s;
}
.ms-search{width:100%; margin-bottom:8px;}
.ms-actions{display:flex; gap:12px; margin-bottom:7px; padding-bottom:7px; border-bottom:1px solid var(--border);}
.ms-actions button{border:none; background:transparent; color:var(--primary); font-size:11.5px; font-weight:700; cursor:pointer; padding:2px 0;}
.ms-actions button:hover{text-decoration:underline;}
.ms-options{max-height:230px; overflow-y:auto; display:flex; flex-direction:column; gap:1px;}
.ms-option{display:flex; align-items:center; gap:9px; padding:7px 7px; border-radius:8px; font-size:13px; color:var(--text-dim); cursor:pointer; transition:background var(--dur-fast) var(--ease-out);}
.ms-option:hover{background:var(--surface-2);}
.ms-option input{margin:0; accent-color:var(--primary);}
.ms-empty{padding:10px 6px; font-size:12.5px; color:var(--text-muted); text-align:center;}

.presets{flex-direction:row; align-items:center; gap:2px; background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:3px; position:relative;}
.presets button{
  border:none; background:transparent; color:var(--text-dim); position:relative; z-index:1;
  padding:7px 11px; border-radius:6px; font-size:12.5px; font-weight:600; cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out);
}
.presets button.active{color:var(--primary);}
.preset-indicator{
  position:absolute; top:3px; bottom:3px; left:3px; width:0; border-radius:6px;
  background:var(--surface); box-shadow:var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent);
  transition:left var(--dur-med) var(--ease-spring), width var(--dur-med) var(--ease-spring);
  pointer-events:none; z-index:0;
}
.filterbar > .btn{align-self:flex-end;}
#btnApplyFilters{position:relative; opacity:.55; pointer-events:none; transition:opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out);}
#btnApplyFilters.pending{opacity:1; pointer-events:auto; animation:pulseRing 1.8s ease-out infinite;}

/* KPI grid */
.kpi-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:14px; padding:0 28px; margin-bottom:10px;
}
.kpi-card{
  position:relative; overflow:hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--wash, var(--surface)) 60%, var(--surface)) 0%, var(--surface) 72%);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow-sm);
  animation: fadeSlideUp var(--dur-med) var(--ease-out) both;
  transition:transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.kpi-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--accent, var(--border)), color-mix(in srgb, var(--accent, var(--border)) 55%, transparent));
}
.kpi-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--accent, var(--baseline)) 35%, var(--border));}
.kpi-grid .kpi-card:nth-child(1){animation-delay:0ms;}
.kpi-grid .kpi-card:nth-child(2){animation-delay:40ms;}
.kpi-grid .kpi-card:nth-child(3){animation-delay:80ms;}
.kpi-grid .kpi-card:nth-child(4){animation-delay:120ms;}
.kpi-grid .kpi-card:nth-child(5){animation-delay:160ms;}
.kpi-total{--accent:var(--primary); --wash:var(--primary-wash);}
.kpi-billed{--accent:var(--good); --wash:var(--good-wash);}
.kpi-exception{--accent:var(--critical); --wash:var(--critical-wash);}
.kpi-pending{--accent:var(--warning); --wash:var(--warning-wash);}
.kpi-ar{--accent:var(--violet); --wash:var(--violet-wash);}
.kpi-label{display:flex; align-items:center; gap:7px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim);}
.kpi-label::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--accent,var(--text-muted)); flex:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent, transparent) 22%, transparent);}
.kpi-value{font-size:27px; font-weight:800; margin-top:8px; letter-spacing:-0.025em; font-variant-numeric:tabular-nums; line-height:1.05;}
.kpi-sub{font-size:12px; color:var(--text-muted); margin-top:5px;}

/* AR view selector + Charts category hub — 3 card options */
.ar-view-toggle{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:4px 28px 6px;
}
.ar-view-btn{
  display:flex; align-items:center; gap:11px; text-align:left; cursor:pointer;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:11px 14px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.ar-view-btn::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent); opacity:0;
  transition:opacity var(--dur-fast) var(--ease-out);
}
.ar-view-btn:hover{transform:translateY(-1px); box-shadow:var(--shadow-md); border-color:color-mix(in srgb, var(--accent) 35%, var(--border));}
.ar-view-btn.active{
  border-color:color-mix(in srgb, var(--accent) 45%, transparent);
  background:color-mix(in srgb, var(--accent) 6%, var(--surface));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent) inset, var(--shadow-sm);
}
.ar-view-btn.active::before{opacity:1;}
.ar-view-icon{
  width:34px; height:34px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:10px; background:var(--surface-2); border:1px solid var(--border);
  color:var(--text-muted);
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.ar-view-btn.active .ar-view-icon{
  background:color-mix(in srgb, var(--accent) 13%, var(--surface));
  border-color:color-mix(in srgb, var(--accent) 30%, transparent);
  color:var(--accent);
}
.ar-view-text{display:flex; flex-direction:column; gap:2px; min-width:0;}
.ar-view-title{font-size:13px; font-weight:700; color:var(--text); letter-spacing:-0.012em;}
.ar-view-btn.active .ar-view-title{color:var(--accent);}
.ar-view-sub{font-size:11px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ar-view-panel{animation: fadeSlideUp var(--dur-med) var(--ease-out) both;}
@media (max-width: 720px){
  .ar-view-toggle{grid-template-columns:1fr; padding:4px 16px 6px;}
  .ar-view-sub{white-space:normal;}
}

/* Flash cards — one card per location, with test-mix counts */
.flash-groups{display:flex; flex-direction:column; gap:20px;}
.overview-summary-picker{padding:18px 20px 20px;}
.summary-picker-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:15px;}
.summary-picker-head h3{margin:0 0 4px;}
.summary-picker-head p{margin:0; color:var(--text-muted); font-size:12px;}
.summary-picker-hint{font-size:11px; color:var(--text-muted); white-space:nowrap;}
.overview-flash-grid{grid-template-columns:repeat(3, minmax(0, 1fr));}
.overview-flash-grid .flash-card{min-height:130px;}
.overview-flash-grid .flash-card.active{border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent), var(--shadow-md);}
.overview-summary-panel{animation:fadeSlideUp var(--dur-med) var(--ease-out) both;}
@media (max-width:720px){.overview-flash-grid{grid-template-columns:1fr;}.summary-picker-head{align-items:flex-start; flex-direction:column; gap:6px;}}
.flash-group{display:flex; flex-direction:column; gap:11px;}
.flash-group-head{
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  padding-bottom:9px; border-bottom:1px solid var(--border);
}
.fg-dot{
  width:8px; height:8px; border-radius:50%; background:var(--g); flex:none;
  align-self:center; box-shadow:0 0 0 3px color-mix(in srgb, var(--g) 18%, transparent);
}
.fg-title{font-size:13.5px; font-weight:800; color:var(--g); letter-spacing:-0.01em;}
.fg-sub{font-size:11.5px; color:var(--text-muted);}
.fg-meta{
  margin-left:auto; font-size:11px; font-weight:600; color:var(--text-dim);
  font-variant-numeric:tabular-nums; background:var(--surface-2);
  border:1px solid var(--border); border-radius:999px; padding:3px 10px;
}
.flash-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(268px, 1fr)); gap:12px;
}
.flash-card{
  display:flex; flex-direction:column; gap:10px; text-align:left; cursor:pointer; width:100%;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 15px 12px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  transition:transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.flash-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--teal);
  opacity:0; transition:opacity var(--dur-fast) var(--ease-out);
}
.flash-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:color-mix(in srgb, var(--teal) 42%, var(--border));}
.flash-card:hover::before{opacity:1;}
.flash-card.has-exceptions::before{background:var(--critical);}
.flash-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.flash-name{
  font-size:13.5px; font-weight:700; color:var(--text); line-height:1.35; letter-spacing:-0.01em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.flash-total{font-size:19px; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; line-height:1; white-space:nowrap;}
.flash-total small{display:block; font-size:9.5px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.06em; margin-top:3px;}
.flash-stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(74px,1fr)); gap:6px;}
.flash-stat{
  display:flex; flex-direction:column; gap:3px; align-items:center; padding:7px 4px;
  border-radius:9px; background:color-mix(in srgb, var(--c) 11%, var(--surface-2));
  border:1px solid color-mix(in srgb, var(--c) 20%, transparent);
}
.fs-val{font-size:15px; font-weight:800; color:var(--c); font-variant-numeric:tabular-nums; line-height:1;}
.fs-label{
  font-size:9px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em;
  max-width:100%; text-align:center; line-height:1.2; overflow-wrap:anywhere;
}
/* A location with no exceptions still shows the tile, just quietly. */
.flash-stat.is-zero{background:var(--surface-2); border-color:var(--border);}
.flash-stat.is-zero .fs-val{color:var(--text-muted);}
.flash-foot{
  display:flex; justify-content:space-between; gap:8px; font-size:11px; color:var(--text-muted);
  border-top:1px solid var(--border); padding-top:8px; margin-top:auto; font-variant-numeric:tabular-nums;
}
.flash-foot b{color:var(--text-dim); font-weight:700;}
.flash-empty{grid-column:1/-1; text-align:center; color:var(--text-dim); padding:28px;}

/* Location detail view */
.detail-head{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.btn-back{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; flex:none;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim);
  border-radius:9px; padding:7px 12px; font-size:12.5px; font-weight:600;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn-back:hover{background:var(--primary-wash); color:var(--primary); border-color:color-mix(in srgb, var(--primary) 40%, var(--border));}
.detail-title{display:flex; flex-direction:column; gap:2px; min-width:0;}
.detail-title h3{margin:0; padding:0; border:0;}
.detail-sub{font-size:11.5px; color:var(--text-muted);}
.detail-kpis{display:grid; grid-template-columns:repeat(auto-fit, minmax(126px,1fr)); gap:10px; margin-bottom:14px;}
.detail-kpi{
  padding:12px 14px 12px 15px; border-radius:12px; background:var(--surface);
  border:1px solid var(--border); display:flex; flex-direction:column; gap:5px;
  position:relative; overflow:hidden; box-shadow:var(--shadow-sm);
}
/* The accent is a rail, not a wash — the number stays the loudest thing. */
.detail-kpi::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c);
}
.dk-label{font-size:9.5px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.07em;}
.dk-val{
  font-size:21px; font-weight:800; color:var(--c); line-height:1.05; letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
}

/* Column checkbox chips */
.col-picker{
  display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap;
  padding:11px 13px; margin-bottom:12px; border-radius:11px;
  background:var(--surface-2); border:1px solid var(--border);
}
.col-picker-label{
  font-size:9.5px; font-weight:700; color:var(--text-muted); text-transform:uppercase;
  letter-spacing:.06em; padding-top:6px; flex:none;
}
.col-chips{display:flex; flex-wrap:wrap; gap:6px;}
.col-chip{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; user-select:none;
  padding:5px 11px 5px 8px; border-radius:999px; font-size:11.5px; font-weight:600;
  background:var(--surface); border:1px solid var(--border); color:var(--text-muted);
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.col-chip:hover{border-color:color-mix(in srgb, var(--primary) 40%, var(--border)); color:var(--text-dim);}
.col-chip input{appearance:none; margin:0; width:13px; height:13px; border-radius:4px; border:1.5px solid var(--border-strong); flex:none; position:relative; cursor:pointer; transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);}
.col-chip input:checked{background:var(--primary); border-color:var(--primary);}
.col-chip input:checked::after{content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:900; color:#fff;}
.col-chip.on{background:var(--primary-wash); border-color:color-mix(in srgb, var(--primary) 42%, transparent); color:var(--primary);}
.col-chip.dim-col.on{background:color-mix(in srgb, var(--violet) 12%, transparent); border-color:color-mix(in srgb, var(--violet) 42%, transparent); color:var(--violet);}
.col-chip.dim-col.on input:checked{background:var(--violet); border-color:var(--violet);}

@media (max-width: 720px){
  .flash-grid{grid-template-columns:1fr;}
  .col-picker{flex-direction:column; gap:8px;}
  .col-picker-label{padding-top:0;}
}

/* Charts tab category panels */
.cat-panel{animation: fadeSlideUp var(--dur-med) var(--ease-out) both;}
.cat-kpis{margin:0 28px 14px;}
.cat-toggle{padding-top:14px;}

/* Chart grid */
.chart-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px; padding:14px 28px;
}
.chart-card{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 20px 12px; box-shadow:var(--shadow-sm);
  animation: fadeSlideUp var(--dur-med) var(--ease-out) both;
  transition:box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.chart-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg, var(--accent, var(--border)), color-mix(in srgb, var(--accent, var(--border)) 45%, transparent));
}
.chart-card:hover{border-color:color-mix(in srgb, var(--accent, var(--baseline)) 30%, var(--border)); box-shadow:var(--shadow-lg); transform:translateY(-2px);}
.chart-grid .chart-card:nth-child(1){animation-delay:80ms; --accent:var(--primary);}
.chart-grid .chart-card:nth-child(2){animation-delay:120ms; --accent:var(--good);}
.chart-grid .chart-card:nth-child(3){animation-delay:160ms; --accent:var(--violet);}
.chart-grid .chart-card:nth-child(4){animation-delay:200ms; --accent:var(--warning);}
.chart-grid .chart-card:nth-child(5){animation-delay:240ms; --accent:var(--teal);}
.chart-card.wide{grid-column:1 / -1;}
.chart-card h3{font-size:13px; margin:0 0 14px; color:var(--text); font-weight:700; letter-spacing:-0.01em;}
.chart-wrap{position:relative; height:270px;}
.chart-card.wide .chart-wrap{height:290px;}

/* Tables — modern SaaS data tables */
.table-toolbar{
  display:flex; align-items:center; gap:12px; padding:0 28px; margin-top:6px; flex-wrap:wrap;
}
.table-toolbar input[type=text]{flex:1; min-width:220px;}
.table-count{
  font-size:11.5px; color:var(--text-dim); white-space:nowrap; font-weight:600;
  background:var(--surface-2); border:1px solid var(--border); padding:4px 10px; border-radius:20px;
}
.table-wrap{
  margin:14px 28px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  overflow:auto; max-height:65vh; box-shadow:var(--shadow-sm);
  animation: fadeSlideUp var(--dur-med) var(--ease-out) both;
}

/* thin custom scrollbars */
.table-wrap{scrollbar-width:thin; scrollbar-color:var(--baseline) transparent;}
.table-wrap::-webkit-scrollbar{width:11px; height:11px;}
.table-wrap::-webkit-scrollbar-track{background:transparent;}
.table-wrap::-webkit-scrollbar-thumb{background:var(--baseline); border-radius:8px; border:3px solid var(--surface); background-clip:padding-box;}
.table-wrap::-webkit-scrollbar-thumb:hover{background:var(--text-muted);}
.table-wrap::-webkit-scrollbar-corner{background:transparent;}
table{width:100%; border-collapse:separate; border-spacing:0; font-size:13px; font-variant-numeric:tabular-nums;}
thead th{
  position:sticky; top:0; background:var(--surface-2);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-strong);
  text-align:left; padding:12px 16px 12px 14px; font-weight:700; font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-muted); cursor:pointer; white-space:nowrap; z-index:2; position:sticky; user-select:none;
  transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
thead th::after{
  content:"⇅"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-size:9px; opacity:0; color:var(--text-muted); transition:opacity var(--dur-fast) var(--ease-out);
}
thead th{position:sticky; padding-right:20px;}
thead th:hover{color:var(--text); background:color-mix(in srgb, var(--baseline) 22%, var(--surface-2));}
thead th:hover::after{opacity:.65;}
tbody tr{animation: rowIn .22s var(--ease-out) both; transition:background var(--dur-fast) var(--ease-out);}
tbody td{padding:12px 14px; border-bottom:1px solid var(--border); white-space:nowrap; color:var(--text-dim);}
tbody td:first-child{color:var(--text); font-weight:500;}
tbody tr:hover{background:var(--surface-2);}
tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--primary);}
tbody tr:last-child td{border-bottom:none;}
tfoot td{padding:13px 14px; white-space:nowrap; font-variant-numeric:tabular-nums;}
tfoot .summary-total-row{position:sticky; bottom:0; background:var(--surface-2);}
tfoot .summary-total-row td{border-top:2px solid var(--border-strong); font-weight:800; color:var(--text); letter-spacing:-0.01em;}
/* AR location drill-down */
.ar-group-row{cursor:pointer;}
.ar-group-row.open{background:var(--surface-2);}
.ar-group-row.open td{font-weight:700; color:var(--text);}
.ar-group-row.open td:first-child{box-shadow:inset 3px 0 0 var(--primary);}
.drill-caret{display:inline-block; width:1.1em; color:var(--primary); font-size:10px; transition:transform var(--dur-fast) var(--ease-out);}
.ar-drill-row td{background:color-mix(in srgb, var(--primary) 6%, var(--surface-2)); color:var(--text-dim); font-size:12.5px; border-bottom:1px solid var(--border);}
.ar-drill-row td:first-child{color:var(--text-dim); font-weight:500;}
.ar-drill-row .drill-cell{padding-left:34px; position:relative;}
.ar-drill-row .drill-cell::before{content:""; position:absolute; left:18px; top:0; bottom:50%; width:9px; border-left:1.5px solid var(--baseline); border-bottom:1.5px solid var(--baseline); border-radius:0 0 0 4px;}
.badge{display:inline-flex; align-items:center; gap:5px; padding:3px 10px 3px 8px; border-radius:20px; font-size:11px; font-weight:700; transition:transform var(--dur-fast) var(--ease-spring);}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none;}
tbody tr:hover .badge{transform:scale(1.06);}
.badge-billed{background:var(--good-wash); color:var(--good);}
.badge-exception{background:var(--critical-wash); color:var(--critical);}
.badge-pending{background:var(--warning-wash); color:var(--warning);}
.badge-other{background:var(--surface-2); color:var(--text-muted);}

.pagination{display:flex; gap:6px; justify-content:center; padding:16px 28px; flex-wrap:wrap;}
.pagination button{
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text-dim);
  padding:6px 11px; border-radius:8px; font-size:12px; cursor:pointer; box-shadow:var(--shadow-sm);
  transition:transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.pagination button:hover:not(:disabled){transform:translateY(-1px); border-color:var(--baseline); box-shadow:var(--shadow-md);}
.pagination button.active{background:linear-gradient(135deg, var(--primary), var(--violet)); border-color:transparent; color:#fff; box-shadow:0 4px 12px -4px color-mix(in srgb, var(--primary) 55%, transparent);}

/* Empty state */
.empty-state{display:flex; align-items:center; justify-content:center; padding:100px 20px;}
.empty-card{
  text-align:center; max-width:440px; padding:44px 40px; background:var(--surface);
  border:1px solid var(--border); border-radius:calc(var(--radius) + 4px); box-shadow:var(--shadow-lg);
  animation: fadeSlideUp var(--dur-slow) var(--ease-out) both;
}
.empty-icon{font-size:44px; margin-bottom:16px; display:inline-block; animation: float 3.2s ease-in-out infinite;
  filter:drop-shadow(0 8px 16px color-mix(in srgb, var(--primary) 30%, transparent));}
@keyframes float{0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);}}
.empty-card h2{font-size:19px; margin:0 0 10px; font-weight:700; letter-spacing:-0.02em;}
.empty-card p{color:var(--text-dim); font-size:13.5px; line-height:1.6;}
.empty-note{font-size:12px; margin-top:16px; color:var(--text-muted);}
.empty-card code{background:var(--surface-2); border:1px solid var(--border); padding:2px 7px; border-radius:6px; font-size:12px;}

/* Drop overlay */
.drop-overlay{
  position:fixed; inset:0; background:color-mix(in srgb, var(--primary) 14%, transparent); backdrop-filter:blur(3px);
  z-index:100; display:flex; align-items:center; justify-content:center; pointer-events:none;
}
.drop-overlay:not(.hidden){animation: fadeIn .18s var(--ease-out) both;}
.drop-card{
  background:var(--surface); border:2px dashed var(--primary); border-radius:calc(var(--radius) + 4px);
  padding:40px 60px; font-size:16px; font-weight:700; color:var(--primary); box-shadow:var(--shadow-lg);
}
.drop-overlay:not(.hidden) .drop-card{animation: popIn .22s var(--ease-spring) both;}

/* Modal */
.modal{
  position:fixed; inset:0; background:color-mix(in srgb, #0a0d14 55%, transparent); backdrop-filter:blur(4px); z-index:200; display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
}
.modal.open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition:opacity var(--dur-med) var(--ease-out), visibility 0s linear 0s;
}
.modal-card{
  background:var(--surface); border:1px solid var(--border); border-radius:calc(var(--radius) + 2px); max-width:520px; width:100%;
  max-height:85vh; display:flex; flex-direction:column; box-shadow:var(--shadow-lg);
  transform:scale(.94) translateY(16px);
  transition:transform var(--dur-med) var(--ease-spring);
}
.modal.open .modal-card{transform:scale(1) translateY(0);}
.modal-header{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border);}
.modal-header h2{font-size:16px; margin:0; font-weight:700; letter-spacing:-0.01em;}
.report-content{padding:16px 20px; overflow-y:auto; font-size:13.5px; line-height:1.6; color:var(--text-dim);}
.report-content h3{font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); margin:18px 0 7px; font-weight:700;}
.report-content h3:first-child{margin-top:0;}
.modal-actions{display:flex; gap:9px; padding:14px 20px; border-top:1px solid var(--border); flex-wrap:wrap;}
.modal-actions .btn{flex:1;}

/* Responsive / mobile */
@media (max-width: 980px){
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .chart-grid{grid-template-columns:1fr;}
}
@media (max-width: 620px){
  .topbar{padding:12px 16px;}
  .brand h1{font-size:15px;}
  .tabs{padding:0 16px;}
  .filterbar{margin:16px; padding:14px;}
  .kpi-grid{grid-template-columns:1fr 1fr; padding:0 16px;}
  .kpi-value{font-size:22px;}
  .chart-grid{padding:16px;}
  .chart-wrap{height:220px;}
  .table-toolbar{padding:0 16px;}
  .table-wrap{margin:14px 16px;}
  .empty-card{max-width:320px; padding:32px 24px;}
  .ms-panel{width:min(250px, calc(100vw - 48px));}
  .ms-trigger{max-width:150px;}
}

/* Print (Daily report -> PDF) */
@media print{
  /* The report lives inside a fixed, transformed, scroll-clipped modal. Printed
     as-is that repeats the card on every page and clips it to one screenful,
     which is what made the PDF overlap itself. Flatten all of it to normal
     document flow and let the content run to its natural height. */
  @page{ margin:12mm; }

  html, body{
    background:#fff !important; height:auto !important; min-height:0 !important;
    overflow:visible !important; padding:0 !important; margin:0 !important;
  }
  /* display:none, not visibility:hidden — hidden elements still reserve space. */
  body > *:not(#reportModal){ display:none !important; }

  #reportModal{
    display:block !important; position:static !important; inset:auto !important;
    opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
    background:none !important; padding:0 !important; margin:0 !important;
    z-index:auto !important; overflow:visible !important;
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  /* No animation in print: a transitioning transform would otherwise be caught
     mid-flight and print the card scaled and offset. */
  #reportModal, #reportModal *{
    transition:none !important; animation:none !important;
  }
  #reportModal .modal-card{
    display:block !important; position:static !important;
    transform:none !important; -webkit-transform:none !important;
    width:auto !important; max-width:none !important;
    height:auto !important; max-height:none !important;
    background:#fff !important; border:0 !important; border-radius:0 !important;
    box-shadow:none !important; overflow:visible !important;
  }
  #reportModal .modal-header,
  #reportModal .modal-actions,
  #reportModal .report-cats{ display:none !important; }

  #reportModal .report-content{
    display:block !important; position:static !important;
    height:auto !important; max-height:none !important;
    overflow:visible !important; padding:0 !important; margin:0 !important;
    color:#000 !important; font-size:11pt; line-height:1.45;
  }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* Report category selector inside the Reports modal */
.report-cats{
  display:flex; gap:6px; flex-wrap:wrap; padding:0 0 14px; margin-bottom:14px;
  border-bottom:1px solid var(--border);
}
.report-cat{
  cursor:pointer; border:1px solid var(--border); background:var(--surface-2); color:var(--text-muted);
  border-radius:999px; padding:7px 14px; font-size:12.5px; font-weight:600; white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.report-cat:hover{color:var(--text); border-color:var(--border-strong);}
.report-cat.active{
  background:var(--primary-wash); color:var(--primary);
  border-color:color-mix(in srgb, var(--primary) 45%, transparent);
}

/* Google Sheet sync modal */
.sync-status{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:11px 14px; border-radius:11px; margin-bottom:14px; font-size:13px; font-weight:600;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim);
}
.sync-status.ok{background:var(--good-wash); border-color:color-mix(in srgb, var(--good) 40%, transparent); color:var(--good);}
.sync-status.err{background:var(--critical-wash); border-color:color-mix(in srgb, var(--critical) 40%, transparent); color:var(--critical);}
.sync-status.busy{background:var(--primary-wash); border-color:color-mix(in srgb, var(--primary) 40%, transparent); color:var(--primary);}
.sync-actions{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:14px;}
.sync-auto{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none;
  padding:8px 13px; border-radius:var(--radius-sm); font-size:13px; font-weight:600;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim);
}
.sync-auto input{appearance:none; margin:0; width:14px; height:14px; border-radius:4px; border:1.5px solid var(--border-strong); position:relative; cursor:pointer;}
.sync-auto input:checked{background:var(--good); border-color:var(--good);}
.sync-auto input:checked::after{content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:900; color:#fff;}
.sync-auto:has(input:checked){background:var(--good-wash); border-color:color-mix(in srgb, var(--good) 40%, transparent); color:var(--good);}
.sync-interval{
  padding:8px 11px; border-radius:var(--radius-sm); font-size:13px; font-weight:600;
  background:var(--surface); border:1px solid var(--border-strong); color:var(--text);
}
.sync-setup{
  border:1px solid var(--border); border-radius:var(--radius); padding:0; background:var(--surface-2);
}
.sync-setup summary{
  cursor:pointer; padding:12px 14px; font-size:13px; font-weight:700; color:var(--text-dim);
  list-style:none; user-select:none;
}
.sync-setup summary::-webkit-details-marker{display:none;}
.sync-setup summary:hover{color:var(--text);}
.sync-setup[open] summary{border-bottom:1px solid var(--border);}
.sync-field{display:flex; flex-direction:column; gap:5px; padding:12px 14px 0;}
.sync-field span{font-size:11.5px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em;}
.sync-field em{text-transform:none; letter-spacing:0; font-weight:500; color:var(--text-muted);}
.sync-field input{
  padding:9px 11px; border-radius:var(--radius-sm); font-size:13px;
  background:var(--surface); border:1px solid var(--border-strong); color:var(--text);
}
.sync-field input:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);}
.sync-setup #btnSaveSyncCfg{margin:12px 14px;}
.sync-help{padding:0 14px 14px; font-size:12.5px; color:var(--text-dim); line-height:1.55;}
.sync-help b{color:var(--text);}
.sync-help ol{margin:8px 0; padding-left:20px;}
.sync-help li{margin-bottom:6px;}
.sync-help code{
  background:var(--surface); border:1px solid var(--border); border-radius:5px;
  padding:1px 6px; font-size:11.5px; color:var(--primary);
}
.sync-note{
  margin-top:10px; padding:9px 11px; border-radius:9px; font-size:11.5px;
  background:var(--good-wash); border:1px solid color-mix(in srgb, var(--good) 30%, transparent); color:var(--text-dim);
}

/* Exact-origin helper in the sync setup steps */
.origin-box{display:flex; align-items:center; gap:8px; margin:7px 0; flex-wrap:wrap;}
.origin-box code{
  flex:1; min-width:0; overflow-x:auto; white-space:nowrap;
  padding:7px 10px; font-size:12.5px; font-weight:700;
  background:var(--surface); border:1px solid var(--primary); color:var(--primary); border-radius:7px;
}
.origin-box .btn{padding:6px 11px; font-size:12px;}
.origin-warn{
  display:block; margin-top:6px; padding:8px 10px; border-radius:8px; font-size:11.5px; font-weight:600;
  background:var(--critical-wash); border:1px solid color-mix(in srgb, var(--critical) 35%, transparent); color:var(--critical);
}

/* Figures right-aligned and digit-locked so columns compare at a glance */
table td.num, table th.num{text-align:right; font-variant-numeric:tabular-nums;}
table th.num{padding-right:14px;}
table td.num{padding-right:14px;}

/* Dates line up on their right edge with fixed-width digits — left-aligned
   dates look ragged because month names and day digits vary in width. */
table td.dt, table th.dt{
  text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;
}
table th.dt{padding-right:14px;}
table td.dt{padding-right:14px;}

/* Cap the free-text columns so a wide table still fits its card instead of
   forcing a horizontal scroll; polishTables adds a title for the full value. */
table tbody td, table thead th{ white-space:nowrap; }
table tbody td:not(.num):not(.dt){
  max-width:260px; overflow:hidden; text-overflow:ellipsis;
}
table tbody td:first-child{max-width:340px;}

/* AR › Total AR Details */
.ar-view-toggle-4{grid-template-columns:repeat(4,1fr);}
@media (max-width: 1100px){ .ar-view-toggle-4{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 640px){ .ar-view-toggle-4{grid-template-columns:1fr;} }

/* ---- icons -------------------------------------------------------------
   One stroked set at a single weight. Emoji rendered differently on every
   machine and read as casual next to financial figures. -------------------- */
.vt-icon{
  width:18px; height:18px; flex:none; display:block;
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
/* Icons sitting inside a button line up with the label rather than pushing it. */
.btn-icon{
  width:15px; height:15px; flex:none; display:inline-block; vertical-align:-2px; margin-right:7px;
  fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.btn-ghost .btn-icon:only-child, .btn .btn-icon:only-child{ margin-right:0; vertical-align:-3px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; }
.pin-glyph{ width:30px; height:30px; fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.drop-glyph{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:-4px; margin-right:10px; }
.empty-glyph{ width:44px; height:44px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; opacity:.55; }
.cal-btn .btn-icon{ margin-right:0; vertical-align:-3px; }
.brand-glyph{
  width:21px; height:21px; fill:none; stroke:#fff; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round; display:block;
}

/* ---- AR: main category (the measure) sits above the sub categories ----
   A segmented control, not a second row of cards — the eye should read one
   dominant switch, then the dimension cards under it. */
.ar-mode-toggle{
  display:inline-flex; gap:3px; margin:16px 28px 2px; padding:4px;
  border-radius:13px; background:var(--surface-2); border:1px solid var(--border);
}
.ar-mode-btn{
  display:flex; align-items:center; gap:9px; cursor:pointer; text-align:left; font-family:inherit;
  padding:8px 15px 8px 10px; border-radius:10px;
  background:transparent; border:1px solid transparent; color:var(--text-muted);
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.ar-mode-btn:hover{ color:var(--text-dim); }
.ar-mode-btn.active{
  background:var(--surface); border-color:color-mix(in srgb, var(--primary) 32%, transparent);
  color:var(--text);
  box-shadow:0 1px 2px rgba(16,24,40,.07), 0 6px 16px -8px color-mix(in srgb, var(--primary) 55%, transparent);
}
.ar-mode-btn.active .ar-mode-title{ color:var(--primary); }
.ar-mode-icon{
  width:28px; height:28px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:8px; background:var(--surface); border:1px solid var(--border); color:var(--text-muted);
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.ar-mode-btn.active .ar-mode-icon{
  background:var(--primary-wash); border-color:color-mix(in srgb, var(--primary) 30%, transparent); color:var(--primary);
}
.ar-mode-text{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.ar-mode-title{ font-size:13px; font-weight:700; letter-spacing:-0.01em; }
.ar-mode-sub{ font-size:10.5px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ar-mode-btn.active .ar-mode-sub{ color:var(--text-muted); }

@media (max-width: 720px){
  .ar-mode-toggle{ margin:12px 16px 2px; display:flex; }
  .ar-mode-btn{ flex:1 1 0; }
  .ar-mode-sub{ display:none; }
}

/* ---- AR aging ---- */

.ar-aging-sub{margin:-6px 0 14px; font-size:12px; color:var(--text-muted);}
/* The bucket's colour, repeated next to its name, so the bar and the table
   below it can be read as one thing. */
.aging-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px;
  background:var(--c, var(--primary)); vertical-align:baseline;
}
/* Money past 90 days is the number people act on — let it carry weight. */
td.aging-old{color:var(--critical); font-weight:700;}
/* ---- Data ED: the date entry bar ---- */
.dataed-bar{ display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.dataed-field{ display:flex; flex-direction:column; gap:5px; }
.dataed-field > label{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted);
}
.dataed-bar .table-count{ margin-left:auto; }
.dataed-note{
  margin:0 0 12px; padding:9px 12px; border-radius:10px; font-size:12px; font-weight:600;
  background:var(--warning-wash); color:var(--warning);
  border:1px solid color-mix(in srgb, var(--warning) 38%, transparent);
}
@media (max-width:620px){
  .dataed-bar > .btn{ flex:1 1 auto; }
  .dataed-bar .table-count{ margin-left:0; flex:1 1 100%; }
}

/* ---- report chart + notes ---------------------------------------------
   Inline SVG so the chart survives print and PDF export, where a canvas would
   need rasterising and a library to redraw. ------------------------------- */
.rc-chart{ width:100%; height:auto; display:block; margin-top:4px; }
.rc-chart .bar{ fill:var(--primary); opacity:.32; }
.rc-chart .bar.is-latest{ fill:var(--primary); opacity:1; }
.rc-chart .val{ fill:var(--text-dim); font-size:9.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.rc-chart .lbl{ fill:var(--text-muted); font-size:9px; }
.rc-chart .axis{ stroke:var(--border); stroke-width:1; }
.report-note{ margin:-4px 0 10px; font-size:11.5px; color:var(--text-muted); }
.report-flow{ margin:2px 0 4px; }

/* ---- reason cards ------------------------------------------------------
   One card per test type: a ranked list of what is driving it, with a share
   bar per row. Rows align across cards, long reason text truncates instead of
   spilling, and the proportions are readable without doing arithmetic. ----- */
.reason-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px;
}
.reason-card{
  display:flex; flex-direction:column; gap:11px; padding:15px 16px 13px;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow-sm);
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.reason-card{ cursor:pointer; }
.reason-card:hover{ border-color:color-mix(in srgb, var(--primary) 40%, var(--border)); box-shadow:var(--shadow-md); }
.reason-card:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }
/* A row is a narrower slice of the same card — hovering one should say so. */
.rc-row.is-clickable{ cursor:pointer; border-radius:6px; }
.rc-row.is-clickable:hover .rc-label{ color:var(--text); text-decoration:underline; text-underline-offset:2px; }

/* ---- claim list behind a card ---- */
.drill-modal{ max-width:min(1080px, 100%); min-width:0; }
.drill-head{ min-width:0; }
.drill-head h2{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drill-sub{ margin:3px 0 0; font-size:12px; color:var(--text-muted); }
.drill-toolbar{ padding:12px 20px 10px; border-bottom:1px solid var(--border); }
.drill-body{ padding:0 20px 16px; overflow-y:auto; }
@media (max-width:720px){ .drill-toolbar, .drill-body{ padding-left:16px; padding-right:16px; } }

.rc-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.rc-name{
  margin:0; font-size:14px; font-weight:700; color:var(--text); letter-spacing:-0.015em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.rc-total{ text-align:right; flex:none; }
.rc-total b{ font-size:20px; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.rc-total small{
  display:block; font-size:9px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--text-muted); margin-top:2px;
}

.rc-sec{ display:flex; flex-direction:column; gap:8px; }
/* A second block inside the card gets a hairline and its own caption, so the
   two distributions never read as one continuous list. */
.rc-sec + .rc-sec{ margin-top:11px; padding-top:11px; border-top:1px dashed var(--border); }
.rc-cap{
  margin:0; font-size:9px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:var(--text-muted);
}
.rc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
/* Label across the top with its figures, bar full width beneath — the reason
   text gets almost the whole card instead of a 90px sliver, and a full-width
   bar reads proportion far better than a stub. */
.rc-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto;
  grid-template-areas:"label n pct" "bar bar bar";
  align-items:baseline; gap:4px 9px; font-size:11.5px;
}
.rc-label{ grid-area:label; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-dim); }
.rc-n{ grid-area:n; }
.rc-pct{ grid-area:pct; min-width:28px; }
.rc-bar{ grid-area:bar; height:4px; border-radius:2px; background:var(--surface-2); overflow:hidden; margin-top:1px; }
.rc-bar i{ display:block; height:100%; border-radius:2px; background:var(--baseline); }
.rc-n{ text-align:right; font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; }
.rc-pct{ text-align:right; font-size:10.5px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
/* The leading reason is the one worth acting on. */
.rc-row.is-top .rc-label{ color:var(--text); font-weight:600; }
.rc-row.is-top .rc-bar i{ background:var(--rc, var(--critical)); }
.rc-row.is-top .rc-n{ color:var(--rc, var(--critical)); }

.rc-more{ margin:0; font-size:10.5px; color:var(--text-muted); cursor:help; }
.rc-foot{
  margin-top:auto; padding-top:10px; border-top:1px solid var(--border);
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:10.5px; color:var(--text-muted); white-space:nowrap;
}
.rc-foot b{ color:var(--text-dim); font-weight:700; }

@media (max-width: 520px){
  .reason-grid{ grid-template-columns:1fr; }
}

/* On an aging card, the over-90 half of the footer carries the warning. */
.flash-foot .foot-old b{color:var(--critical);}

/* A status with nothing left open is context, not a call to action. */
tr.aging-settled td{color:var(--text-muted);}
tr.aging-settled td:first-child{box-shadow:inset 3px 0 0 var(--good);}

.ar-total-kpis{
  margin:0 24px 16px;
  grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
}
.ar-total-kpis .detail-kpi{padding:14px 16px; gap:5px;}
.ar-total-kpis .dk-val{font-size:23px; letter-spacing:-0.02em;}
.dk-sub{font-size:11px; color:var(--text-muted); font-variant-numeric:tabular-nums;}

/* Charges split into collected vs still owed */
.flow-bar{
  display:flex; height:34px; border-radius:10px; overflow:hidden;
  background:var(--surface-2); border:1px solid var(--border);
}
.flow-seg{
  background:color-mix(in srgb, var(--c) 78%, transparent);
  border-right:1px solid var(--surface);
  transition:width var(--dur-slow) var(--ease-out);
}
.flow-seg:last-child{border-right:0;}
.flow-legend{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:12px; align-items:center;}
.flow-key{display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--text-dim);}
.flow-key i{width:10px; height:10px; border-radius:3px; background:var(--c); flex:none;}
.flow-key b{color:var(--text); font-weight:700; font-variant-numeric:tabular-nums;}
.flow-key em{font-style:normal; color:var(--text-muted); font-variant-numeric:tabular-nums;}
.flow-total{margin-left:auto; font-size:12px; color:var(--text-muted);}
.flow-total b{color:var(--text-dim); font-variant-numeric:tabular-nums;}

/* ---------------- Reports: proper documents, not label/value lists -------- */
#reportModal .modal-card{max-width:920px;}
.report-doc{color:var(--text);}
.report-head{padding-bottom:14px; margin-bottom:16px; border-bottom:2px solid var(--text);}
.report-doc-title{font-size:19px; font-weight:800; letter-spacing:-0.02em; color:var(--text); margin:0 0 6px;}
.report-meta{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:11.5px; color:var(--text-muted);}
.report-meta b{color:var(--text-dim); font-weight:700;}

.report-stats{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(132px,1fr)); gap:10px; margin-bottom:20px;
}
.report-stat{
  padding:10px 12px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border);
  border-left:3px solid var(--c, var(--primary));
}
.rs-label{display:block; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted);}
.rs-val{display:block; font-size:17px; font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; margin-top:3px; letter-spacing:-0.01em;}
.rs-sub{display:block; font-size:10.5px; color:var(--text-muted); margin-top:2px; font-variant-numeric:tabular-nums;}

.report-section{margin-bottom:22px;}
.report-section h4{
  font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted);
  font-weight:800; margin:0 0 8px; padding-bottom:6px; border-bottom:1px solid var(--border);
}
.report-table{width:100%; border-collapse:collapse; font-size:12.5px;}
.report-table th{
  text-align:left; font-size:9.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-muted); font-weight:700; padding:7px 10px; background:var(--surface-2);
  border-bottom:1px solid var(--border-strong); white-space:nowrap;
}
.report-table td{padding:7px 10px; border-bottom:1px solid var(--border); color:var(--text-dim);}
.report-table tbody tr:last-child td{border-bottom:1px solid var(--border-strong);}
.report-table td:first-child{color:var(--text); font-weight:600;}
.report-table tfoot td{
  padding:8px 10px; font-weight:800; color:var(--text);
  border-top:1px solid var(--text-dim); border-bottom:none; background:var(--surface-2);
}
.report-table .rt-mix{color:var(--text-muted); font-weight:500; font-size:11.5px;}
.report-empty{padding:10px; font-size:12.5px; color:var(--text-muted); font-style:italic;}

/* Reports navigation alignment */
.report-cats{
  width:100%; display:flex; align-items:center; justify-content:center;
  gap:10px; flex-wrap:wrap; padding:14px 20px 15px; margin:0;
  background:var(--surface); border-bottom:1px solid var(--border);
}
.report-cat{
  display:inline-flex; align-items:center; justify-content:center; min-height:42px;
  padding:9px 18px; line-height:1.15; text-align:center; border-radius:999px;
  border:1px solid var(--border-strong); background:var(--surface-2); color:var(--text-dim);
}
.report-cat.active{background:var(--primary-wash); color:var(--primary); border-color:var(--primary);}
@media (max-width:640px){
  .report-cats{justify-content:stretch; gap:8px; padding:12px;}
  .report-cat{flex:1 1 calc(50% - 8px); min-width:0; padding-inline:10px;}
}

/* PDF output mirrors the on-screen Option B report view. */
@media print{
  *, *::before, *::after{-webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;}
  #reportModal .modal-card{color:#102a43 !important;}
  #reportModal .report-content{background:#fff !important; color:#52657a !important;}
  #reportModal .report-doc-title{color:#102a43 !important;}
  #reportModal .report-head{border-bottom:2px solid #173454 !important;}
  #reportModal .report-stat{background:#f8fafc !important; border:1px solid #dbe3ee !important; border-left:3px solid var(--c, #1d4ed8) !important;}
  #reportModal .rs-label, #reportModal .rs-sub{color:#7d8da1 !important;}
  #reportModal .rs-val{color:#102a43 !important;}
  #reportModal .report-section h4{color:#52657a !important; border-bottom:1px solid #dbe3ee !important;}
  #reportModal .report-table{border:1px solid #dbe3ee !important;}
  #reportModal .report-table th{background:#173454 !important; color:#fff !important; border-color:#173454 !important; text-align:center !important;}
  #reportModal .report-table td{color:#102a43 !important; border-bottom:1px solid #dbe3ee !important; text-align:center !important;}
  #reportModal .report-table tbody tr:nth-child(even) td{background:#f8fafc !important;}
  #reportModal .report-table tfoot td{background:#eef4fb !important; color:#102a43 !important; border-top:2px solid #c5d0df !important;}
}

/* Print: just the report, on white, ink-friendly */
@media print{
  .report-doc, .report-doc-title{color:#000 !important;}
  .report-head{border-bottom:2px solid #000 !important;}
  .report-meta, .report-meta b{color:#333 !important;}
  .report-stats{grid-template-columns:repeat(3,1fr) !important; gap:8px !important;}
  .report-stat{border:1px solid #bbb !important; background:#fff !important; border-left-width:3px !important;}
  .rs-label, .rs-sub{color:#555 !important;}
  .rs-val{color:#000 !important;}
  .report-section h4{color:#000 !important; border-bottom:1px solid #999 !important;}
  .report-table th{background:#f0f0f0 !important; color:#000 !important; border-bottom:1px solid #666 !important;}
  .report-table td{color:#222 !important; border-bottom:1px solid #ddd !important;}
  .report-table td:first-child{color:#000 !important;}
  .report-table tfoot td{
    color:#000 !important; background:#f0f0f0 !important; border-top:1px solid #000 !important;
  }
  .report-table .rt-mix{color:#555 !important;}
  /* Keep a heading with its table, and never split a row across pages. */
  .report-section{break-inside:auto;}
  .report-section h4{break-after:avoid;}
  .report-table thead{display:table-header-group;}
  .report-table tfoot{display:table-footer-group;}
  .report-table tr{break-inside:avoid;}
  .report-stats{break-inside:avoid;}
}

/* Exceptions Worklist category panels */
.exc-view-panel{animation: fadeSlideUp var(--dur-med) var(--ease-out) both;}
#excTotalKpis{margin:0 24px 16px;}
/* Secure PIN gate */
.pin-gate { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 20px; overflow: hidden; background: radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 34%), radial-gradient(circle at 90% 85%, color-mix(in srgb, var(--teal) 14%, transparent), transparent 32%), var(--page-bg); }
.pin-gate::before, .pin-gate::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; filter: blur(2px); opacity: .55; }
.pin-gate::before { width: 360px; height: 360px; top: -180px; right: 12%; border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent); }
.pin-gate::after { width: 460px; height: 460px; bottom: -300px; left: 8%; border: 1px solid color-mix(in srgb, var(--teal) 18%, transparent); }
.pin-gate.unlocked { display: none; }
.pin-card { position: relative; z-index: 1; width: min(410px, 100%); padding: 42px 38px 34px; text-align: center; border: 1px solid var(--border-strong); border-radius: 24px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: var(--shadow-lg); backdrop-filter: blur(18px); }
.pin-mark { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 20px; font-size: 29px; background: linear-gradient(135deg, var(--primary), var(--violet)); box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 30%, transparent); }
.pin-card h2 { margin: 0 0 8px; color: var(--text); font-size: 24px; letter-spacing: -.3px; }
.pin-card p { color: var(--text-dim); margin: 0 0 28px; font-size: 14px; }
.pin-card form { display: grid; gap: 12px; text-align: left; }
.pin-card input { width: 100%; box-sizing: border-box; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: 12px; outline: none; color: var(--text); background: var(--surface-2); font-size: 18px; letter-spacing: 5px; text-align: center; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.pin-card input::placeholder { color: var(--text-muted); letter-spacing: 0; }
.pin-card input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent); }
.pin-card .btn { width: 100%; min-height: 46px; border-radius: 12px; font-weight: 700; }
.pin-error { min-height: 20px; margin-top: 16px; color: var(--critical); font-size: 13px; }
@media (max-width: 480px) { .pin-card { padding: 34px 22px 28px; border-radius: 20px; } }

/* Product-wide visual pass: consistent density, hierarchy, and interaction states. */
:root{
  --content-max: 1480px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
button, input, select, textarea{font:inherit;}
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible{outline:2px solid var(--primary); outline-offset:2px; box-shadow:var(--focus-ring);}
.topbar, .tabs, .filterbar, #app{width:100%;}
.topbar{padding:14px clamp(16px, 3vw, 36px);}
.tabs{padding-inline:clamp(16px, 3vw, 36px);}
#app{max-width:var(--content-max); margin:0 auto;}
.filterbar{margin:18px auto 16px; max-width:var(--content-max); padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius); background:color-mix(in srgb, var(--surface) 92%, transparent); box-shadow:var(--shadow-sm);}
.kpi-grid{gap:14px; margin:18px 0 16px;}
.kpi-card{min-height:116px; padding:18px 18px 16px; border-radius:16px;}
.kpi-value{font-size:clamp(24px, 2.1vw, 31px);}
.chart-grid{gap:14px;}
.chart-card{border-radius:16px; padding:18px 20px; box-shadow:var(--shadow-sm);}
.chart-card h3{font-size:14px; margin-bottom:16px;}
.table-toolbar{min-height:38px; gap:10px;}
.table-toolbar input[type=text], .table-toolbar input[type=search]{height:38px; border-radius:10px;}
.table-wrap{border:1px solid var(--border); border-radius:12px; background:var(--surface);}
table{width:100%; border-collapse:separate; border-spacing:0;}
th{height:42px; padding:10px 12px; background:var(--surface-2); color:var(--text-dim); font-size:10px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;}
td{height:43px; padding:10px 12px; border-top:1px solid var(--border); color:var(--text); font-size:12px; vertical-align:middle;}
tbody tr:hover td{background:color-mix(in srgb, var(--primary) 4%, var(--surface));}
td.num, th[data-key="count"], th[data-key="allowedAmount"], th[data-key="insPayment"], th[data-key="totalPtResp"], th[data-key="charge"], th[data-key="deniedCount"]{font-variant-numeric:tabular-nums;}
.modal-card{border-radius:20px; border:1px solid var(--border-strong); box-shadow:var(--shadow-lg);}
.modal-header{padding:18px 22px;}
.modal-actions{padding:14px 22px 18px; border-top:1px solid var(--border);}
.report-content{padding:20px 22px;}
.report-table th, .report-table td{white-space:normal;}
.btn{min-height:38px;}
@media (max-width:980px){
  .topbar{align-items:flex-start;}
  .topbar-actions{width:100%;}
  .filterbar{margin-inline:16px;}
  .kpi-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:620px){
  body{padding-bottom:24px;}
  .brand h1{font-size:15px;}
  .topbar-actions .btn{flex:1; min-width:0;}
  .filterbar{margin:12px 12px 14px; padding:12px;}
  .kpi-grid{grid-template-columns:1fr; margin-inline:12px;}
  .chart-card{margin-left:12px !important; margin-right:12px !important; padding:15px 14px;}
  .table-toolbar{align-items:stretch; flex-direction:column;}
  .table-toolbar input[type=text]{min-width:0; width:100%;}
  .table-wrap{overflow-x:auto;}
  table{min-width:700px;}
  .tabs{overflow-x:auto; padding-inline:12px;}
  .tab{white-space:nowrap;}
}

/* =====================================================================
   Option B — Premium finance / healthcare billing theme
   Shared tokens and component overrides keep the entire product calm,
   high-contrast, and data-first while preserving existing interactions.
===================================================================== */
/* Global table alignment: keep every generated and static table visually consistent. */
table th, table td,
.report-table th, .report-table td,
.report-table tfoot td{text-align:center !important; vertical-align:middle;}
:root{--table-cell-align:center;}
:root{
  --page-bg:#f4f7fb;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --surface-glass:rgba(255,255,255,.94);
  --border:#dbe3ee;
  --border-strong:#c5d0df;
  --text:#102a43;
  --text-dim:#52657a;
  --text-muted:#7d8da1;
  --grid:#e7edf4;
  --baseline:#cbd5e1;
  --primary:#1d4ed8;
  --primary-wash:#eaf1ff;
  --good:#157347;
  --good-wash:#e9f7ef;
  --warning:#a15c00;
  --warning-wash:#fff4df;
  --critical:#b42318;
  --critical-wash:#fff0ee;
  --violet:#5746af;
  --violet-wash:#f0edff;
  --teal:#0f6f78;
  --teal-wash:#e8f7f8;
  --radius:12px;
  --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(16,42,67,.04), 0 2px 8px rgba(16,42,67,.04);
  --shadow-md:0 5px 18px rgba(16,42,67,.08);
  --shadow-lg:0 12px 32px rgba(16,42,67,.12);
}
:root[data-theme="dark"]{
  --page-bg:#0d1726; --surface:#142337; --surface-2:#192b40;
  --surface-glass:rgba(20,35,55,.94); --border:#2a4058; --border-strong:#3b5570;
  --text:#f1f5f9; --text-dim:#c5d2df; --text-muted:#91a4b8; --grid:#263b52; --baseline:#486078;
  --primary:#6d9cff; --primary-wash:#1b3159; --good:#54c889; --good-wash:#123b2a;
  --warning:#f2b84b; --warning-wash:#483514; --critical:#ff8075; --critical-wash:#4d211f;
  --violet:#a99cff; --violet-wash:#2a2454; --teal:#5ed3d3; --teal-wash:#123d41;
}
html{background:var(--page-bg);}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--text);}
.topbar{background:var(--surface); border-bottom:1px solid var(--border); box-shadow:0 1px 0 rgba(16,42,67,.03);}
/* The logo: a single mark, not an emoji. A deep gradient plate with a hairline
   highlight reads as a product mark at 38px and stays legible in dark mode. */
.brand-mark{
  width:38px; height:38px; border-radius:11px;
  background:linear-gradient(150deg, color-mix(in srgb, var(--primary) 82%, #fff) 0%, var(--primary) 45%, color-mix(in srgb, var(--violet) 88%, #000) 100%);
  box-shadow:0 5px 14px -4px color-mix(in srgb, var(--primary) 45%, transparent),
             inset 0 1px 0 rgba(255,255,255,.32), inset 0 0 0 1px rgba(255,255,255,.10);
}
.brand:hover .brand-mark{transform:none;}
.dyn-mark{
  background:linear-gradient(150deg, color-mix(in srgb, var(--teal) 78%, #fff) 0%, var(--primary) 50%, color-mix(in srgb, var(--violet) 88%, #000) 100%);
  box-shadow:0 5px 14px -4px color-mix(in srgb, var(--primary) 45%, transparent),
             inset 0 1px 0 rgba(255,255,255,.32), inset 0 0 0 1px rgba(255,255,255,.10);
}
.brand h1{font-size:16px; font-weight:750; letter-spacing:-.015em;}
.file-meta{color:var(--text-muted);}
.tabs{background:var(--surface); border-bottom:1px solid var(--border);}
.tab{color:var(--text-dim); font-weight:650;}
.tab:hover{color:var(--text); background:var(--surface-2);}
.tab.active{color:var(--primary);}
.tab-indicator{background:var(--primary); height:2px;}
.btn{background:var(--surface); border-color:var(--border-strong); color:var(--text); box-shadow:none;}
.btn:hover{background:var(--surface-2); border-color:var(--primary); box-shadow:var(--shadow-sm); transform:none;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--primary); border-color:var(--primary); color:#fff; box-shadow:0 3px 8px color-mix(in srgb, var(--primary) 22%, transparent);}
.btn-primary:hover{background:color-mix(in srgb, var(--primary) 88%, #000); filter:none; box-shadow:0 5px 12px color-mix(in srgb, var(--primary) 28%, transparent);}
.btn-ghost{color:var(--text-dim);}
.filterbar{background:var(--surface); border-color:var(--border); box-shadow:var(--shadow-sm);}
.filter-group > label{color:var(--text-dim); font-size:10px; letter-spacing:.075em;}
input, select, textarea, .ms-trigger{background:var(--surface); border-color:var(--border-strong); color:var(--text); border-radius:8px;}
input:hover, select:hover, textarea:hover, .ms-trigger:hover{border-color:var(--primary);}
.kpi-card{background:var(--surface); border-color:var(--border); box-shadow:var(--shadow-sm);}
.kpi-card:hover{transform:none; box-shadow:var(--shadow-md); border-color:var(--border-strong);}
.kpi-label{color:var(--text-dim);}
.kpi-value{color:var(--text); font-weight:760;}
.chart-card{background:var(--surface); border-color:var(--border); box-shadow:var(--shadow-sm);}
.chart-card::before{width:2px; opacity:.8;}
.chart-card:hover{transform:none; border-color:var(--border-strong); box-shadow:var(--shadow-md);}
.chart-card h3{color:var(--text); font-weight:750;}
.table-wrap{border-color:var(--border); box-shadow:none;}
table{background:var(--surface);}
thead th{background:#173454; color:#f8fbff; border-color:#173454; font-weight:700;}
:root[data-theme="dark"] thead th{background:#203b5a; border-color:#203b5a;}
tbody tr:nth-child(even) td{background:color-mix(in srgb, var(--surface-2) 52%, var(--surface));}
tbody tr:hover td{background:var(--primary-wash);}
tbody td{color:var(--text); border-color:var(--border);}
tfoot .summary-total-row td{background:#eef4fb; color:var(--text); border-top:2px solid var(--border-strong);}
:root[data-theme="dark"] tfoot .summary-total-row td{background:#1b3048;}
.table-count{color:var(--text-dim); font-weight:700;}
.badge{border:1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius:6px; padding:4px 8px; font-size:10px; letter-spacing:.02em;}
.badge::before{width:5px; height:5px;}
.flash-card{background:var(--surface); border-color:var(--border); box-shadow:var(--shadow-sm);}
.flash-card:hover{transform:none; border-color:var(--primary); box-shadow:var(--shadow-md);}
.flash-card.active{border-color:var(--primary); box-shadow:0 0 0 2px color-mix(in srgb, var(--primary) 12%, transparent), var(--shadow-sm);}
.detail-kpi{background:var(--surface); border-color:var(--border); box-shadow:var(--shadow-sm);}
.modal{background:rgba(16,42,67,.42);}
.modal-card{background:var(--surface); border-color:var(--border-strong);}
.modal-header{border-bottom:1px solid var(--border);}
.report-head, .report-section{border-color:var(--border);}
.report-table th{background:#173454; color:#fff;}
.empty-state, .report-empty{color:var(--text-muted);}
@media (max-width:620px){
  .topbar-actions .btn{background:var(--surface-2);}
  .topbar-actions .btn-primary{background:var(--primary);}
  .chart-card{box-shadow:var(--shadow-sm);}
}

@media print{
  *, *::before, *::after{-webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;}
  #reportModal .report-head{border-bottom:2px solid #173454 !important;}
  #reportModal .report-stat{background:#f8fafc !important; border:1px solid #dbe3ee !important; border-left:3px solid var(--c, #1d4ed8) !important;}
  #reportModal .report-table{border:1px solid #dbe3ee !important;}
  #reportModal .report-table th{background:#173454 !important; color:#fff !important; border-color:#173454 !important; text-align:center !important;}
  #reportModal .report-table td{color:#102a43 !important; border-color:#dbe3ee !important; text-align:center !important;}
  #reportModal .report-table tbody tr:nth-child(even) td{background:#f8fafc !important;}
  #reportModal .rc-chart .bar{fill:#c7d3e6 !important; opacity:1 !important;}
  #reportModal .rc-chart .bar.is-latest{fill:#1d4ed8 !important;}
  #reportModal .rc-chart .val{fill:#102a43 !important;}
  #reportModal .rc-chart .lbl{fill:#7d8da1 !important;}
  #reportModal .rc-chart .axis{stroke:#dbe3ee !important;}
  #reportModal .report-note{color:#7d8da1 !important;}
  #reportModal .flow-bar{border:1px solid #dbe3ee !important;}
  #reportModal .flow-key{color:#52657a !important;}
  #reportModal .flow-key b{color:#102a43 !important;}
  #reportModal .flow-total, #reportModal .flow-key em{color:#7d8da1 !important;}

  /* ---- PDF polish -----------------------------------------------------
     The report is printed and mailed, so it should read as a document: a
     rule under the title, sections that do not split across a page break,
     table headers repeated on every page, and no orphaned headings. ---- */
  @page{ margin:14mm 12mm; }
  #reportModal .report-content{ font-size:10.5pt; line-height:1.5; }
  #reportModal .report-doc-title{ font-size:20pt !important; letter-spacing:-0.01em; }
  #reportModal .report-head{ padding-bottom:10px !important; margin-bottom:16px !important; }
  #reportModal .report-meta{ font-size:9pt !important; }
  #reportModal .report-stats{ gap:8px !important; margin-bottom:18px !important; break-inside:avoid; }
  #reportModal .report-stat{ padding:9px 11px !important; }
  #reportModal .rs-val{ font-size:15pt !important; }
  #reportModal .rs-label{ font-size:7pt !important; letter-spacing:.06em !important; }
  #reportModal .rs-sub{ font-size:7.5pt !important; }
  #reportModal .report-section{ break-inside:avoid; page-break-inside:avoid; margin-bottom:16px !important; }
  #reportModal .report-section h4{ break-after:avoid; page-break-after:avoid; font-size:11pt !important; }
  /* A long table may split, but never leave its heading stranded. */
  #reportModal .report-section:has(.report-table tbody tr:nth-child(12)){ break-inside:auto; }
  #reportModal .report-table{ font-size:9pt !important; }
  #reportModal .report-table thead{ display:table-header-group; }
  #reportModal .report-table tr{ break-inside:avoid; }
  #reportModal .rc-chart{ max-height:150px; }
  #reportModal .flow-bar{ height:16px !important; }
  #reportModal .flow-legend{ font-size:8.5pt !important; }
  #reportModal .report-table tfoot td{background:#eef4fb !important; color:#102a43 !important; border-top:2px solid #c5d0df !important;}
}

/* Subtotal rows inside a merged report table.
   Specific enough to beat the even-row striping, which would otherwise erase
   the subtotal shading on every second group. */
#reportModal .report-table tbody tr.rt-sub td,
.report-table tbody tr.rt-sub td{
  background:var(--surface-2); font-weight:700; color:var(--text);
  border-top:1px solid var(--border-strong); border-bottom:1px solid var(--border-strong);
}
@media print{
  #reportModal .report-table tbody tr.rt-sub td,
  .report-table tbody tr.rt-sub td{
    background:#dce7f4 !important; color:#102a43 !important; font-weight:700 !important;
    border-top:1px solid #9db3cc !important; border-bottom:1px solid #9db3cc !important;
  }
}

/* Denied tab — reason rows act as a filter for the claim list below */
.denied-reason-row{cursor:pointer;}
.denied-reason-row.active td{
  background:var(--critical-wash);
  box-shadow:inset 3px 0 0 var(--critical);
}
.denied-reason-row.active td:first-child{font-weight:800; color:var(--critical);}
#deniedReasonActive{
  cursor:pointer; background:var(--critical-wash); color:var(--critical);
  border-color:color-mix(in srgb, var(--critical) 40%, transparent);
}
#deniedReasonActive:hover{filter:brightness(1.06);}

/* Denied tab category panels */
.denied-view-panel{animation: fadeSlideUp var(--dur-med) var(--ease-out) both;}

/* Location cards used purely as a read-out (Exceptions / Denied) */
.flash-card.is-static{cursor:default;}
.flash-card.is-static:hover{transform:none; box-shadow:var(--shadow-sm); border-color:var(--border);}
.flash-card.is-static:hover::before{opacity:0;}

/* Subtotal rows in dashboard tables (Exceptions / Denied → By Test Type) */
.table-wrap table tbody tr.rt-sub td{
  background:var(--surface-2); font-weight:700; color:var(--text);
  border-top:1px solid var(--border-strong); border-bottom:1px solid var(--border-strong);
}
.table-wrap table tbody tr.rt-sub td:first-child{color:var(--text);}

/* Insurance breakdown inside a location card */
.flash-ins{
  display:flex; flex-direction:column; gap:5px;
  border-top:1px solid var(--border); padding-top:8px; margin-top:auto;
}
.fi-label{
  font-size:9px; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.06em;
}
.fi-list{display:flex; flex-wrap:wrap; gap:4px; align-items:center;}
.fi-chip{
  display:inline-flex; align-items:center; gap:5px; max-width:100%;
  padding:3px 7px; border-radius:999px; font-size:10.5px; font-weight:600;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.fi-chip b{
  font-weight:800; color:var(--text); font-variant-numeric:tabular-nums; flex:none;
}
.fi-more{font-size:10px; font-weight:600; color:var(--text-muted); white-space:nowrap;}

/* ---- Filter bar on one row -------------------------------------------
   The groups plus both buttons overflowed the bar and pushed "Clear filters"
   onto a second line. On wide screens keep a single row and let the flexible
   controls shrink; below that, fall back to wrapping. */
@media (min-width: 1100px){
  .filterbar{flex-wrap:nowrap; gap:12px; align-items:flex-end;}
  .filterbar > .filter-group{min-width:0;}

  /* Date range and presets keep their natural size; the selects give way. */
  .filterbar > .filter-group:has(.multiselect){flex:1 1 0; min-width:96px;}
  .filterbar .multiselect{width:100%; min-width:0;}
  .filterbar .ms-trigger{width:100%; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

  .filterbar .presets{gap:0; padding:3px;}
  .filterbar .presets button{padding:7px 8px; font-size:12px;}
  .filterbar .filter-row{gap:4px;}
  .filterbar input[type=date]{padding:8px 6px; font-size:12.5px;}

  /* Both buttons sit together at the end of the same row. */
  .filterbar > .btn{flex:none; white-space:nowrap;}
  .filterbar > #btnApplyFilters{margin-left:auto;}
}