/* ══════════════════════════════════════════════
   static/tokens.css
   ══════════════════════════════════════════════ */
/* v20260921 — Cascade layers. Later layers beat earlier ones, so a
   `!important`-free rule in `legacy` can never win against `component`
   or `mobile`. This is the load-order fix from solution.md Step 0. */
@layer legacy, base, component, mobile;

:root {
  --brand-primary: #6366F1;
  --brand-primary-hover: #818CF8;
  --brand-primary-active: #4F46E5;
  --brand-secondary: #EC4899;
  --brand-tertiary: #14B8A6;
  --color-success: #10B981;
  --color-success-bg: rgba(16,185,129,.12);
  --color-warning: #F59E0B;
  --color-warning-bg: rgba(245,158,11,.12);
  --color-error: #EF4444;
  --color-error-bg: rgba(239,68,68,.12);
  --color-info: #3B82F6;
  --color-info-bg: rgba(59,130,246,.12);
  --bg-app: #0B0E14;
  --bg-surface-1: #12161F;
  --bg-surface-2: #1A1F2C;
  --bg-surface-3: #252B3B;
  --bg-input: #0F131C;
  --border-subtle: #252B3B;
  --border-default: #2F3649;
  --border-strong: #3D455B;
  --text-primary: #F1F5F9;
  --text-secondary: #CBD5E1;
  --text-tertiary: #94A3B8;
  --text-disabled: #64748B;
  --bg-primary: #0B0E14;
  --bg-secondary: #1A1F2C;
  --bg-surface: #1A1F2C;
  --accent: #6366F1;
  --accent-light: #818CF8;
  --accent-2: #EC4899;
  --text-subtle: #94A3B8;
  --border: #2F3649;
  --success: #10B981;
  --error: #EF4444;
  --warning: #F59E0B;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
  --shadow-sm: 0 2px 6px rgba(0,0,0,.35);
  --shadow-md: 0 6px 16px rgba(0,0,0,.40);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.55);
  --shadow-xl: 0 24px 60px rgba(0,0,0,.65);
  --shadow-glow: 0 0 0 3px rgba(99,102,241,.25);
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif,
               'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Segoe UI Symbol';
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 320ms;
  --control-height-sm: 30px;
  --control-height-md: 38px;
  --control-height-lg: 46px;
  /* VirtualTable row-height contract — SINGLE source of truth (CORR-16).
     VirtualTable.readRowH() reads this; it used to be declared in three
     mobile stylesheets, so a media-query override could desync spacer
     heights and clip rows. If the row height ever changes, change it HERE. */
  --dt-row-h: 40px;
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-popover: 1500;
  --z-toast: 2000;
}
[data-theme="light"] {
  --bg-app: #F5F7FA;
  --bg-surface-1: #F0F2F5;
  --bg-surface-2: #E8ECEF;
  --bg-surface-3: #DFE4E8;
  --bg-input: #F5F7FA;
  --bg-primary: #F5F7FA;
  --bg-secondary: #FFFFFF;
  --bg-surface: #F0F2F5;
  --border-subtle: #E2E8F0;
  --border-default: #CBD5E1;
  --border-strong: #94A3B8;
  --border: #CBD5E1;
  --text-primary: #1A202C;
  --text-secondary: #334155;
  --text-tertiary: #475569;
  --text-disabled: #94A3B8;
  --text-subtle: #475569;
  --accent: #2563EB;
  --accent-light: #3B82F6;
  --accent-2: #D946EF;
  --success: #16A34A;
  --color-success-bg: rgba(22,163,74,.10);
  --color-warning: #D97706;
  --color-warning-bg: rgba(217,119,6,.10);
  --error: #DC2626;
  --color-error-bg: rgba(220,38,38,.10);
  --color-info: #2563EB;
  --color-info-bg: rgba(37,99,235,.10);
  --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
  --shadow-sm: 0 2px 6px rgba(0,0,0,.08);
  --shadow-md: 0 6px 16px rgba(0,0,0,.10);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.12);
  --shadow-xl: 0 24px 60px rgba(0,0,0,.16);
  --shadow-glow: 0 0 0 3px rgba(37,99,235,.20);
}

/* ---------- skeleton loaders ---------- */
.skeleton {
  background: linear-gradient(90deg, var(--bg-surface-2, #1A1F2C) 25%, var(--bg-surface-3, #252B3B) 50%, var(--bg-surface-2, #1A1F2C) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}
.skeleton-inline {
  display: inline-block;
  height: 1em;
  width: 60%;
  vertical-align: middle;
}
.skeleton-block {
  display: block;
  height: 16px;
  margin-bottom: 8px;
  width: 100%;
}
.skeleton-circle {
  border-radius: 50%;
  width: 36px;
  height: 36px;
}
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════
   static/theme-pro.css
   ══════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   theme-pro.css — Hyper-realistic professional palette (v1)
   Load AFTER tokens.css + user.css + user-overrides.css.
   Refines color depth, adds elevation realism, fixes contrast (WCAG AA).
   ═══════════════════════════════════════════════════════════════════ */

:root, [data-theme="dark"] {
  /* Richer, deeper base — less flat "navy", more true graphite */
  --bg-app:        #090B11;
  --bg-primary:    #090B11;
  --bg-secondary:  #14181F;   /* panels */
  --bg-surface:    #1B212B;   /* cards / inputs container */
  --bg-surface-1:  #14181F;
  --bg-surface-2:  #1B212B;
  --bg-surface-3:  #232A36;
  --bg-input:      #0E1117;
  --bg-row-alt:    rgba(255,255,255,.022);

  /* Borders with subtle blue-grey tint for depth */
  --border:        #29313D;
  --border-subtle: #20262F;
  --border-default:#29313D;
  --border-strong: #3A4452;

  /* Text — higher contrast for AA on dark */
  --text-primary:  #F4F7FB;
  --text-secondary:#C3CCD9;
  --text-tertiary: #8B97A8;
  --text-subtle:   #8B97A8;
  --text-muted:    #69748A;
  --text-disabled: #5A6577;

  /* Brand — slightly more saturated indigo->violet with realistic glow */
  --accent:        #6D74F4;
  --accent-light:  #9298FF;
  --accent-2:      #F25CA2;
  --brand-primary: #6D74F4;
  --brand-primary-hover: #9298FF;

  /* Semantic — punchier, AA-safe */
  --success:       #1FCB7A;
  --error:         #FF5B5B;
  --warning:       #FFB020;
  --color-success: #1FCB7A;
  --color-error:   #FF5B5B;
  --color-warning: #FFB020;

  /* Realistic layered shadows (soft ambient + crisp key light) */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.40);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.30);
  --shadow-md: 0 4px 12px rgba(0,0,0,.40), 0 2px 4px rgba(0,0,0,.28);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.50), 0 4px 8px rgba(0,0,0,.32);
  --shadow-xl: 0 24px 56px rgba(0,0,0,.58), 0 8px 16px rgba(0,0,0,.40);
  --shadow-glow: 0 0 0 3px rgba(109,116,244,.28);
}

[data-theme="light"] {
  --bg-app:        #EDF1F7;
  --bg-primary:    #EDF1F7;
  --bg-secondary:  #FFFFFF;
  --bg-surface:    #F4F7FB;
  --bg-surface-1:  #FFFFFF;
  --bg-surface-2:  #F4F7FB;
  --bg-surface-3:  #E6EBF2;
  --bg-input:      #FFFFFF;
  --bg-row-alt:    rgba(15,23,42,.026);

  --border:        #D5DEE9;
  --border-subtle: #E4EAF1;
  --border-strong: #B4C0CF;

  --text-primary:  #101727;
  --text-secondary:#33415A;
  --text-tertiary: #5A6A82;
  --text-subtle:   #5A6A82;
  --text-muted:    #6B7A92;
  --text-disabled: #9AA8BC;

  --accent:        #4F56E0;
  --accent-light:  #6D74F4;
  --accent-2:      #DB2E84;

  --success:       #0E9E63;
  --error:         #DC2626;
  --warning:       #C77800;

  --shadow-xs: 0 1px 2px rgba(16,23,42,.08);
  --shadow-sm: 0 1px 3px rgba(16,23,42,.10), 0 1px 2px rgba(16,23,42,.06);
  --shadow-md: 0 6px 16px rgba(16,23,42,.10), 0 2px 6px rgba(16,23,42,.06);
  --shadow-lg: 0 16px 40px rgba(16,23,42,.14);
  --shadow-xl: 0 24px 56px rgba(16,23,42,.18);
  --shadow-glow: 0 0 0 3px rgba(79,86,224,.20);
}

/* Subtle realistic surface gradient on panels (depth without flatness) */
[data-theme="dark"] .panel,
[data-theme="dark"] .results-section,
[data-theme="dark"] .modal-dialog,
[data-theme="dark"] .stats-modal-dialog,
[data-theme="dark"] .export-dialog {
  background-image: linear-gradient(180deg, rgba(255,255,255,.018) 0%, rgba(255,255,255,0) 120px);
}
[data-theme="light"] .panel,
[data-theme="light"] .results-section {
  background-image: linear-gradient(180deg, rgba(16,23,42,.012) 0%, rgba(16,23,42,0) 120px);
}

/* Crisper focus rings everywhere for a11y + polish */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow);
  border-radius: var(--radius-sm);
}

/* Smooth, consistent micro-interactions */
.btn, .btn-pill, .es-chip, .de-tab, .fuse-view-btn,
.btn-action-primary, .btn-action-secondary,
.btn-analytics-sm, .btn-copy-sm, .btn-export-unified {
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease, transform .12s ease;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Section B: Prominent FOUND / NOT-FOUND / ERROR row status
   ═══════════════════════════════════════════════════════════════════ */

/* Stronger left accent + soft row tint so status reads instantly */
#resultsTableMain tr.row-found td {
  border-left-color: var(--success);
  background: linear-gradient(90deg, rgba(31,203,122,.10) 0%, rgba(31,203,122,0) 12%);
}
#resultsTableMain tr.row-notfound td {
  border-left-color: var(--error);
  background: linear-gradient(90deg, rgba(255,91,91,.09) 0%, rgba(255,91,91,0) 12%);
}
#resultsTableMain tr.row-error td {
  border-left-color: var(--warning);
  background: linear-gradient(90deg, rgba(255,176,32,.09) 0%, rgba(255,176,32,0) 12%);
}
#resultsTableMain tr.row-found:hover td   { background: rgba(31,203,122,.16) !important; }
#resultsTableMain tr.row-notfound:hover td{ background: rgba(255,91,91,.14)  !important; }

/* Make the found mobile pill bolder + a subtle glow */
.mobile-found, .cnic-found {
  box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.08) inset;
  font-weight: 800;
}
.cnic-found.result-auto { box-shadow: 0 0 0 1px rgba(103,232,249,.45), 0 0 10px rgba(8,145,178,.35); }

/* ═══════════════════════════════════════════════════════════════════
   Section C: MaxPro hard sticky header + all table headers
   ═══════════════════════════════════════════════════════════════════ */


#addrResultsTableWrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto !important;
}

#addrResultsTable.maxpro-table {
  border-collapse: separate;
  border-spacing: 0;
}
#addrResultsTable.maxpro-table thead th {
  position: sticky;
  top: 0;
  z-index: 8;
  background: var(--bg-surface) !important;
  background-clip: padding-box;
  box-shadow: inset 0 -2px 0 #0d9488;
}
#addrResultsTable.maxpro-table thead th { border-bottom: none !important; }

/* Phone/CNIC and Fuse table headers */
#resultsTableMain thead th,
#fuseResultsTable thead th {
  position: sticky; top: 0; z-index: 8;
  background: var(--bg-surface) !important;
  background-clip: padding-box;
}
#resultsTableMain thead th { box-shadow: inset 0 -2px 0 var(--accent); border-bottom: none !important; }
#fuseResultsTable thead th { box-shadow: inset 0 -2px 0 #7c3aed; border-bottom: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   Section D: MaxPro CNIC detail popover (scrollable)
   ═══════════════════════════════════════════════════════════════════ */

.ma-cnic-popover {
  position: fixed;
  z-index: 10000;
  display: none;
  flex-direction: column;
  width: 360px;
  max-width: calc(100vw - 16px);
  max-height: min(70vh, 480px);
  background: var(--bg-secondary);
  border: 1px solid var(--accent);
  border-radius: 10px;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  font-size: 13px; line-height: 1.55;
}
.ma-cnic-popover .macp-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 12px 16px 9px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
  background: linear-gradient(135deg, rgba(13,148,136,.14), rgba(6,182,212,.06));
}
.ma-cnic-popover .macp-title { font-weight: 700; font-size: 14px; font-family: var(--font-mono); }
.ma-cnic-popover .macp-close {
  width: 26px; height: 26px; flex-shrink: 0;
  border: 1px solid var(--border); background: var(--bg-primary);
  color: var(--text-primary); border-radius: 6px; cursor: pointer;
  font-size: 14px; line-height: 1;
}
.ma-cnic-popover .macp-close:hover { background: var(--error); color: #fff; border-color: var(--error); }
.ma-cnic-popover .macp-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 16px 14px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.ma-cnic-popover .macp-row {
  display: flex; gap: 10px; padding: 4px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.ma-cnic-popover .macp-k {
  font-weight: 700; color: var(--text-subtle); min-width: 90px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .3px; flex-shrink: 0;
}
.ma-cnic-popover .macp-v { word-break: break-word; }
.ma-cnic-popover .macp-meta { margin-top: 10px; font-size: 11px; color: var(--text-subtle); }

@media (max-width: 520px) {
  .ma-cnic-popover {
    left: 8px !important; right: 8px !important;
    width: auto; top: auto !important; bottom: 8px !important;
    max-height: 60vh;
  }
}

/* ════════════════════════════════════════════════════════════════
   UNIFIED SEARCH-TERM HIGHLIGHT — MaxPro + Fuse (v_fix: heartbeat pulse)
   Bright chartreuse pill + soft glow + gentle heartbeat so the user's
   eye locks onto matched terms instantly, wherever they appear in a row.
   ════════════════════════════════════════════════════════════════ */
.maxpro-term-hl,
#addrResultsTable .maxpro-term-hl,
mark.maxpro-term-hl,
.fuse-hl,
mark.fuse-hl {
  background: #d9f99d;
  color: #1a2e05;
  font-weight: 800;
  border-radius: 3px;
  padding: 0 3px;
  box-shadow: 0 0 0 1.5px #65a30d, 0 0 10px rgba(132, 204, 22, .65);
  text-shadow: none;
  animation: maxproTermPulse 1.15s ease-in-out infinite;
  will-change: box-shadow, background, transform;
}
@keyframes maxproTermPulse {
  0%, 100% {
    background: #d9f99d;
    box-shadow: 0 0 0 1.5px #65a30d, 0 0 6px rgba(132, 204, 22, .45);
    transform: scale(1);
  }
  50% {
    background: #ecfccb;
    box-shadow: 0 0 0 2px #4d7c0f, 0 0 16px rgba(132, 204, 22, .95);
    transform: scale(1.04);
  }
}
[data-theme="light"] .maxpro-term-hl,
[data-theme="light"] #addrResultsTable .maxpro-term-hl,
[data-theme="light"] mark.maxpro-term-hl,
[data-theme="light"] .fuse-hl,
[data-theme="light"] mark.fuse-hl {
  background: #bef264;
  color: #1a2e05;
  box-shadow: 0 0 0 1.5px #4d7c0f, 0 0 6px rgba(101, 163, 13, .5);
}
[data-theme="light"] .maxpro-term-hl { animation: maxproTermPulseLight 1.15s ease-in-out infinite; }
@keyframes maxproTermPulseLight {
  0%, 100% { background: #bef264; box-shadow: 0 0 0 1.5px #4d7c0f, 0 0 5px rgba(101,163,13,.4); transform: scale(1); }
  50%      { background: #d9f99d; box-shadow: 0 0 0 2px #3f6212, 0 0 14px rgba(101,163,13,.8); transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .maxpro-term-hl, .fuse-hl,
  mark.maxpro-term-hl, mark.fuse-hl {
    animation: none !important;
  }
}

/* ── Per-tab quota sections ── */
.quota-section { border-top: none !important; }
.quota-toggle-btn {
  margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .2px;
  padding: 2px 9px; height: 18px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-surface);
  color: var(--accent-light); transition: all .15s; text-transform: none;
}
.quota-toggle-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.fuse-quota-toggle { align-self: flex-start; margin: 6px 0 2px; }

.quota-chip-row { display: flex; gap: 5px; flex-wrap: wrap; margin: 4px 0; }
.quota-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  border-radius: 8px; background: var(--bg-primary); border: 1px solid var(--border);
  font-size: 10.5px; font-weight: 700; color: var(--text-subtle); line-height: 1;
}
.quota-chip .qc-ico { font-size: 11px; }
.quota-chip .qc-txt { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.quota-chip .qc-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: .3px; opacity: .8; }
.quota-chip.warn   { border-color: rgba(245,158,11,.45); background: rgba(245,158,11,.10); color: #fcd34d; }
.quota-chip.danger { border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.10); color: #fca5a5; }

.quota-detail {
  margin-top: 6px; padding: 9px 11px; border-radius: 8px;
  background: var(--bg-primary); border: 1px solid var(--border);
  animation: qdIn .15s ease-out;
}
@keyframes qdIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.quota-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; }
.qd-item { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.qd-item .qd-k { font-size: 10px; color: var(--text-subtle); white-space: nowrap; }
.qd-item .qd-v { font-size: 11.5px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.quota-detail-note {
  margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--border);
  font-size: 10px; line-height: 1.5; color: var(--text-subtle);
}
.quota-detail-note strong { color: var(--accent-light); }
@media (max-width: 360px) { .quota-detail-grid { grid-template-columns: 1fr; } }


/* ══════════════════════════════════════════════
   static/theme-pro-v2.css
   ══════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   theme-pro-v2.css — v3
   • Dark-blue prominent scrollbars
   • Hyper-realistic depth (NO backdrop-filter → no tab-switch lag)
   • Title-Case headings (overrides uppercase)
   • Unified quota section styling across Phone/CNIC, MaxPro, Fuse
   Load LAST on every page.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Scrollbars ── */
:root,[data-theme="dark"]{
  --sb-track:#0b1220; --sb-thumb:#1d4ed8; --sb-thumb-hover:#3b82f6;
  --sb-thumb-active:#1e3a8a; --sb-border:#070c16;
}
[data-theme="light"]{
  --sb-track:#d4def0; --sb-thumb:#1d4ed8; --sb-thumb-hover:#2563eb;
  --sb-thumb-active:#1e3a8a; --sb-border:#bccbe6;
}
*{ scrollbar-width:thin; scrollbar-color:var(--sb-thumb) var(--sb-track); }
*::-webkit-scrollbar{ width:12px; height:12px; }
*::-webkit-scrollbar-track{ background:var(--sb-track); border-radius:10px; }
*::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#2563eb,#1d4ed8 60%,#1e40af);
  border-radius:10px; border:2px solid var(--sb-border);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}
*::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#3b82f6,#2563eb); }
*::-webkit-scrollbar-thumb:active{ background:var(--sb-thumb-active); }
*::-webkit-scrollbar-corner{ background:var(--sb-track); }

/* ═══════════════════ HYPER-REALISTIC DEPTH (theme-scoped) ═══════════════════ */
:root,[data-theme="dark"]{
  --bg-app:#070A11; --bg-primary:#070A11; --bg-secondary:#11161F;
  --bg-surface:#181F2B; --bg-input:#0B0F18;
  --border:#283041; --border-subtle:#1c2330;
  --accent:#4f7cff; --accent-light:#82a4ff; --accent-2:#f25ca2;
}

/* ── DARK decorative layer ── */
[data-theme="dark"] .panel,
[data-theme="dark"] .results-section,
[data-theme="dark"] .modal-dialog,
[data-theme="dark"] .stats-modal-dialog,
[data-theme="dark"] .export-dialog,
[data-theme="dark"] .fb-group,
[data-theme="dark"] .card,
[data-theme="dark"] .kpi-card{
  background-image:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 90px);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 12px 30px rgba(0,0,0,.45),0 3px 8px rgba(0,0,0,.30);
}
[data-theme="dark"] .results-header,
[data-theme="dark"] .fuse-results-header,
[data-theme="dark"] .de-header,
[data-theme="dark"] .panel-header{
  background-image:linear-gradient(180deg,rgba(79,124,255,.07),rgba(255,255,255,0));
}
[data-theme="dark"] .btn-action-primary,
[data-theme="dark"] .fuse-search-btn,
[data-theme="dark"] .btn-export-unified{
  background-image:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0));
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 4px 14px rgba(79,124,255,.4);
}
[data-theme="dark"] .btn-action-primary:hover,
[data-theme="dark"] .fuse-search-btn:hover:not(:disabled),
[data-theme="dark"] .btn-export-unified:hover{
  filter:brightness(1.08);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 20px rgba(79,124,255,.55);
}
[data-theme="dark"] .form-input,
[data-theme="dark"] .fuse-term-input,
[data-theme="dark"] .fuse-field-select,
[data-theme="dark"] #manualInput,
[data-theme="dark"] .search-box input,
[data-theme="dark"] .fuse-filter-input,
[data-theme="dark"] .col-filter,
[data-theme="dark"] select.server-select,
[data-theme="dark"] .addr-term-input{
  box-shadow:inset 0 2px 4px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,255,255,.02);
}
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] .fuse-term-input:focus,
[data-theme="dark"] #manualInput:focus,
[data-theme="dark"] .search-box input:focus,
[data-theme="dark"] .fuse-filter-input:focus{
  box-shadow:inset 0 2px 4px rgba(0,0,0,.28),0 0 0 3px rgba(79,124,255,.22);
}

/* Table headers — DARK */
[data-theme="dark"] #resultsTableMain thead th,
[data-theme="dark"] #fuseResultsTable thead th,
[data-theme="dark"] #addrResultsTable.maxpro-table thead th{
  background-image:linear-gradient(180deg,#1c2434,#121826);
}
[data-theme="dark"] #resultsTableMain thead th{
  box-shadow:inset 0 -2px 0 var(--accent),0 0 14px rgba(79,124,255,.22);
}

/* ── LIGHT decorative layer ── */
[data-theme="light"] .panel,
[data-theme="light"] .results-section,
[data-theme="light"] .modal-dialog,
[data-theme="light"] .stats-modal-dialog,
[data-theme="light"] .export-dialog,
[data-theme="light"] .fb-group,
[data-theme="light"] .card,
[data-theme="light"] .kpi-card{
  background-image:linear-gradient(180deg,rgba(16,23,42,.018),rgba(16,23,42,0) 90px);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 10px 26px rgba(16,23,42,.10),0 2px 6px rgba(16,23,42,.06);
}
[data-theme="light"] .results-header,
[data-theme="light"] .fuse-results-header,
[data-theme="light"] .de-header,
[data-theme="light"] .panel-header{
  background-image:linear-gradient(180deg,rgba(37,99,235,.05),rgba(255,255,255,0));
}
[data-theme="light"] .form-input,
[data-theme="light"] .fuse-term-input,
[data-theme="light"] .fuse-field-select,
[data-theme="light"] #manualInput,
[data-theme="light"] .search-box input,
[data-theme="light"] .fuse-filter-input,
[data-theme="light"] .col-filter,
[data-theme="light"] select.server-select{
  box-shadow:inset 0 1px 2px rgba(16,23,42,.08);
}
[data-theme="light"] .form-input:focus,
[data-theme="light"] .fuse-term-input:focus,
[data-theme="light"] #manualInput:focus,
[data-theme="light"] .search-box input:focus,
[data-theme="light"] .fuse-filter-input:focus{
  box-shadow:inset 0 1px 2px rgba(16,23,42,.06),0 0 0 3px rgba(37,99,235,.18);
}

/* Table headers — LIGHT (readable dark text on light gradient) */
[data-theme="light"] #resultsTableMain thead th,
[data-theme="light"] #fuseResultsTable thead th,
[data-theme="light"] #addrResultsTable.maxpro-table thead th{
  background-image:linear-gradient(180deg,#eef2fb,#e2e8f4) !important;
  color:#1e293b !important;
}
[data-theme="light"] #resultsTableMain thead th{
  box-shadow:inset 0 -2px 0 var(--accent);
}

/* Tab switching hint */
.de-tab-panel,.results-mode{ will-change:opacity; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important; }
}

/* ═══════════════════ TITLE-CASE HEADINGS (override UPPERCASE) ═══════════════════ */
.de-section-label,
.fuse-row-label .fuse-label-text,
.fuse-label-text,
.de-tab,
.stats-section-title,
.si-label,
.kpi-lbl,
.fuse-export-label,
.es-chip-lbl,
.de-mini-chip,
.fuse-results-title,
.frd-detail-label,
.quota-detail-note,
.qd-k,
.summary-stats-row .ss-pill .ss-lbl,
.fuse-field-cell,
.frd-field,
.section-title,
.usr-tab{
  text-transform:none !important;
  letter-spacing:.2px !important;
}
/* Keep small "uppercase-ish" labels readable but Title-Cased */
.de-section-label{ font-variant:normal; }

/* ═══════════════════ UNIFIED QUOTA SECTIONS (all 3 tabs identical) ═══════════════════ */
.quota-section{ border-top:none !important; }
.quota-toggle-btn,.fuse-quota-toggle{
  margin-left:auto; font-size:10px; font-weight:700; letter-spacing:.2px;
  padding:3px 10px; height:20px; border-radius:10px; cursor:pointer;
  border:1px solid var(--border); background:var(--bg-surface);
  color:var(--accent-light); transition:all .15s; text-transform:none;
  display:inline-flex; align-items:center; gap:4px;
}
.quota-toggle-btn:hover,.fuse-quota-toggle:hover{
  background:var(--accent); color:#fff; border-color:var(--accent);
}
.fuse-quota-toggle{ align-self:flex-start; margin:6px 0 2px; }

/* Make Fuse/MaxPro quota chips visually identical to Phone/CNIC chips */
.quota-chip-row{ display:flex; gap:6px; flex-wrap:wrap; margin:5px 0; }
.quota-chip,
.fuse-status-row .fuse-chip{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px;
  border-radius:9px; background:var(--bg-primary); border:1px solid var(--border);
  font-size:10.5px; font-weight:700; color:var(--text-subtle); line-height:1;
}
.quota-chip .qc-ico,.fuse-chip .fuse-chip-ico{ font-size:11px; }
.quota-chip .qc-txt{ color:var(--text-primary); font-variant-numeric:tabular-nums; }
.quota-chip .qc-lbl{ font-size:9px; text-transform:none; letter-spacing:.3px; opacity:.85; }
.quota-chip.warn,.fuse-chip.warn{ border-color:rgba(245,158,11,.45); background:rgba(245,158,11,.10); color:#fcd34d; }
.quota-chip.danger,.fuse-chip.danger{ border-color:rgba(239,68,68,.45); background:rgba(239,68,68,.10); color:#fca5a5; }

.quota-detail{
  margin-top:7px; padding:10px 12px; border-radius:9px;
  background:var(--bg-primary); border:1px solid var(--border);
  animation:qdIn .15s ease-out;
}
@keyframes qdIn{ from{opacity:0;transform:translateY(-3px);} to{opacity:1;transform:none;} }
.quota-detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; }
.qd-item{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; min-width:0; }
.qd-item .qd-k{ font-size:10px; color:var(--text-subtle); white-space:nowrap; }
.qd-item .qd-v{ font-size:11.5px; font-weight:800; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.quota-detail-note{
  margin-top:9px; padding-top:8px; border-top:1px dashed var(--border);
  font-size:10px; line-height:1.5; color:var(--text-subtle);
}
.quota-detail-note strong{ color:var(--accent-light); }
@media (max-width:360px){ .quota-detail-grid{ grid-template-columns:1fr; } }

/* ════════════ MaxPro numbers cell — pipe separator + network colors + counts ════════ */
.maxpro-numbers-wrap {
  display: inline;
  white-space: nowrap;
}
.maxpro-num-chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: #fff;
  line-height: 1.35;
  box-shadow: 0 1px 2px rgba(0,0,0,.22);
}
.maxpro-pipe {
  display: inline-block;
  margin: 0 5px;
  font-weight: 900;
  font-size: 15px;
  color: #f59e0b;
  vertical-align: middle;
  text-shadow: 0 0 6px rgba(245,158,11,.5);
}
[data-theme="light"] .maxpro-pipe { color: #d97706; }
.maxpro-num-summary {
  display: inline;
  white-space: nowrap;
  margin-left: 4px;
}
.maxpro-netcount {
  display: inline-block;
  padding: 0 6px;
  height: 16px;
  line-height: 16px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .3px;
  color: #fff;
}
.nc-j { background: #155e75; }
.nc-z { background: #a16207; color: #fff; }
.nc-u { background: #7c3aed; }
.nc-t { background: #0891b2; }
.nc-w { background: #2563eb; }
.nc-s { background: #dc2626; }
.nc-o { background: #16a34a; }
.maxpro-net-code {
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 4px;
  font-weight: 800;
  font-size: 11px;
  color: #fff;
  margin-right: 2px;
}



/* ════════════════════════════════════════════════════════════════
   Result rows — balanced compact (readable but space-efficient)
   ════════════════════════════════════════════════════════════════ */

/* Phone/CNIC table */
#resultsTableMain { font-size: 12px; }
#resultsTableMain thead th {
  padding: 6px 11px !important;
  font-size: 9.5px !important;
  line-height: 1.25 !important;
}
#resultsTableMain tbody td {
  padding: 5px 11px !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}
#resultsTableMain td[data-col="address"],
#resultsTableMain td:nth-child(9) {
  padding: 5px 11px !important;
  line-height: 1.4 !important;
  font-size: 11.5px !important;
}
#resultsTableMain .mobile-found,
#resultsTableMain .cnic-found,
#resultsTableMain .mobile-not-found,
#resultsTableMain .cnic-not-found,
#resultsTableMain .gender-m,
#resultsTableMain .gender-f,
#resultsTableMain [class^="network-"],
#resultsTableMain [class^="province-"] {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  line-height: 1.3 !important;
}

/* MaxPro table */
#addrResultsTable.maxpro-table { font-size: 12px; }
#addrResultsTable.maxpro-table thead th {
  padding: 6px 11px !important;
  font-size: 9.5px !important;
  line-height: 1.25 !important;
}
#addrResultsTable.maxpro-table tbody td {
  padding: 5px 11px !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}
#addrResultsTable.maxpro-table tbody td [class^="network-"],
#addrResultsTable.maxpro-table tbody td [class^="province-"],
#addrResultsTable.maxpro-table tbody td .gender-m,
#addrResultsTable.maxpro-table tbody td .gender-f {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  line-height: 1.3 !important;
}

/* ── Admin "Edit User" modal: protect tab switching from global overrides ── */
.usr-panes { display: block !important; width: 100%; min-height: 0; }
.usr-pane { display: none !important; }
.usr-pane.active { display: block !important; }
.usr-tabbar { will-change: auto; }
.usr-pane .card,
.usr-pane .kpi-card {
  background-image: none !important;
  box-shadow: none !important;
}
.usr-pane .form-grid,
.usr-pane .toggle-row,
.usr-pane .section-title { visibility: visible !important; opacity: 1 !important; }
.modal-form { min-height: 0 !important; }
.modal-body { min-height: 0 !important; }

/* ════════════════════════════════════════════════════════════════
   LIGHT THEME — authoritative overrides (loaded last, wins all).
   Neutralizes every hardcoded-dark `!important` rule from user.css /
   user-overrides.css so light mode renders correctly everywhere.
   ════════════════════════════════════════════════════════════════ */

/* App background */
[data-theme="light"] body {
  background:
    radial-gradient(1100px 700px at 10% 0%, rgba(37,99,235,.06), transparent 60%),
    radial-gradient(900px 700px at 100% 10%, rgba(167,139,250,.06), transparent 55%),
    #eef1f7 !important;
  color: #101727 !important;
}

/* Panels — kill the dark gradients from FIX 6 */
[data-theme="light"] .panel,
[data-theme="light"] .user-status-panel,
[data-theme="light"] .data-entry-panel,
[data-theme="light"] .results-section {
  background: #ffffff !important;
  color: #101727 !important;
  box-shadow: 0 1px 3px rgba(16,23,42,.10), 0 1px 2px rgba(16,23,42,.06) !important;
}
[data-theme="light"] .user-status-panel { border-left: 4px solid #4f56e0 !important; }
[data-theme="light"] .data-entry-panel  { border-left: 4px solid #db2e84 !important; }

/* Panel headers + de-header */
[data-theme="light"] .panel-header,
[data-theme="light"] .user-status-panel .panel-header,
[data-theme="light"] .data-entry-panel .de-header {
  background: #f4f7fb !important;
  border-bottom: 1px solid #d5dee9 !important;
}

/* Status info items — light cards, coloured left border kept */
[data-theme="light"] .status-info-item {
  background: #f4f7fb !important;
  border: 1px solid #e2e8f0 !important;
  border-left-width: 2px !important;
}
[data-theme="light"] .status-info-item .si-label { color: #5a6a82 !important; }
[data-theme="light"] .status-info-item .si-value { color: #101727 !important; }

/* Data-entry sections (the blue/green/violet tinted ones from FIX 6) */
[data-theme="light"] .de-tab-panel[data-tab-panel="pak"] .de-section {
  background: transparent !important;
  border-top: 1px solid #e4eaf1 !important;
}

/* Tabs — inactive readable, active keeps its colour */
[data-theme="light"] .de-header-tabs { background: rgba(16,23,42,.05) !important; }
[data-theme="light"] .de-tab[data-tab="pak"]     { color: #1d4ed8 !important; }
[data-theme="light"] .de-tab[data-tab="address"] { color: #0d9488 !important; }
[data-theme="light"] .de-tab[data-tab="fuse"]    { color: #c2410c !important; }
[data-theme="light"] .de-tab[data-tab="pak"].active     { color: #fff !important; }
[data-theme="light"] .de-tab[data-tab="address"].active { color: #fff !important; }
[data-theme="light"] .de-tab[data-tab="fuse"].active    { color: #fff !important; }

/* Inputs / textarea / selects */
[data-theme="light"] #manualInput,
[data-theme="light"] .textarea-wrapper,
[data-theme="light"] .form-input,
[data-theme="light"] .fuse-term-input,
[data-theme="light"] .fuse-field-select,
[data-theme="light"] select.server-select,
[data-theme="light"] .search-box input,
[data-theme="light"] .fuse-filter-input,
[data-theme="light"] .col-filter {
  background: #ffffff !important;
  color: #101727 !important;
  border-color: #d5dee9 !important;
}
[data-theme="light"] #lineNumbers { background: rgba(16,23,42,.04) !important; }

/* Tables — light surfaces, dark text */
[data-theme="light"] .table-container,
[data-theme="light"] .fuse-table-container,
[data-theme="light"] #addrResultsScroll,
[data-theme="light"] .fuse-results-scroll { background: #ffffff !important; }
[data-theme="light"] #resultsTableMain td,
[data-theme="light"] #fuseResultsTable td,
[data-theme="light"] #addrResultsTable.maxpro-table tbody td { color: #101727 !important; }
[data-theme="light"] #resultsTableMain tbody tr:nth-child(even) td,
[data-theme="light"] #addrResultsTable.maxpro-table tbody tr:nth-child(even) td {
  background: rgba(16,23,42,.025) !important;
}

/* Export bars / fuse results header */
[data-theme="light"] .export-bar {
  background: linear-gradient(180deg, rgba(20,184,166,.06), #f4f7fb 60%) !important;
}
[data-theme="light"] .fuse-export-bar { background: #ffffff !important; }
[data-theme="light"] .fuse-results-header,
[data-theme="light"] #phoneModeWrap .results-header {
  background: #f4f7fb !important;
}

/* Quota chips / details */
[data-theme="light"] .quota-chip,
[data-theme="light"] .quota-detail,
[data-theme="light"] .de-mini-chip,
[data-theme="light"] .de-summary-chip,
[data-theme="light"] .file-chip {
  background: #f4f7fb !important;
  border-color: #d5dee9 !important;
}
[data-theme="light"] .quota-chip .qc-txt,
[data-theme="light"] .qd-item .qd-v { color: #101727 !important; }

/* Modals + stats modal */
[data-theme="light"] .stats-modal-dialog,
[data-theme="light"] .export-dialog,
[data-theme="light"] .modal-dialog,
[data-theme="light"] .fb-group,
[data-theme="light"] .fb-card { background: #ffffff !important; color: #101727 !important; }
[data-theme="light"] .kpi-card { background: #f4f7fb !important; }
[data-theme="light"] .kpi-val { color: #101727 !important; }

/* Remove the "panel hover lift→none" interfering shadows in light */
[data-theme="light"] .results-section:has(#phoneModeWrap:not([hidden])),
[data-theme="light"] .results-section:has(#fuseModeWrap:not([hidden])) {
  box-shadow: 0 1px 3px rgba(16,23,42,.10) !important;
}

/* ── Prominent username in user-status panel header ── */
#whoami {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--accent-light) !important;
  letter-spacing: .2px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-status-panel .panel-icon {
  width: 26px !important;
  height: 26px !important;
  font-size: 14px !important;
}
[data-theme="light"] #whoami { color: #4f56e0 !important; }

/* MaxPro inline "searching" spinner in the empty-state */
.maxpro-spin {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid rgba(13,148,136,.25);
  border-top-color: #0d9488;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════
   LAYOUT LOCK — sidebar LEFT, results RIGHT (desktop ≥1025px).
   Hardened with !important so no stray CSS error can collapse it.
   v20260912-1: EVERY rule below is scoped with body:has(#mainGrid)
   so it applies ONLY to the user panel. The bare .container / .sidebar
   selectors also matched admin.html's <main class="container">, which
   clamped the admin page to one viewport height and hid the footer.
   admin.html has no #mainGrid, so :has() rules never match there.
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  body:has(#mainGrid) .container {
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body:has(#mainGrid) .main-grid:not(.results-fullpage) {
    display: grid !important;
    grid-template-columns: 340px minmax(0, 1fr) !important;
    gap: 10px !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* LEFT column — sidebar (user status + search/data-entry panel) */
  body:has(#mainGrid) .main-grid:not(.results-fullpage) > .sidebar {
    grid-column: 1 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 100% !important;
  }

  /* RIGHT column — results output panel */
  body:has(#mainGrid) .main-grid:not(.results-fullpage) > .results-section {
    grid-column: 2 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* The active result mode fills the results section */
  body:has(#mainGrid) .results-section .results-mode:not([hidden]) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  body:has(#mainGrid) .results-section .results-mode[hidden] { display: none !important; }
}

@media (min-width: 1400px) {
  body:has(#mainGrid) .main-grid:not(.results-fullpage) {
    grid-template-columns: 360px minmax(0, 1fr) !important;
  }
}

/* Mobile / tablet (<1025px): stack sidebar above results (intended) */
@media (max-width: 1024px) {
  .main-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .container { height: auto !important; overflow: auto !important; }
  body { overflow: auto !important; height: auto !important; }
  .results-section { min-height: 60vh !important; }
}

/* ── MaxPro & Fuse panels: fill height, internal scroll, fully workable ── */
@media (min-width: 1025px) {
  /* Data-entry panel grows to fill remaining sidebar height */
  .data-entry-panel {
    flex: 1 1 auto !important;
    min-height: 280px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .data-entry-panel .panel-collapse-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .de-tab-panel.active {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .de-tab-panel.active .panel-body,
  .de-tab-panel.active .fuse-panel-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* MaxPro results: header fixed, table scrolls, export bar pinned */
  #addressModeWrap .fuse-results-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
  }
  #addrResultsTableWrap:not([hidden]) {
    display: block !important;
    min-height: 0 !important;
  }

  /* Fuse results: same fill behaviour */
  #fuseModeWrap .fuse-results-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   MaxPro filter box + column menu
   ════════════════════════════════════════════════════════════════ */
.maxpro-filter-box {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 8px;
  background: var(--bg-input); border: 1px solid var(--border-subtle);
  flex: 0 1 280px; min-width: 120px;
}
.maxpro-filter-ico { font-size: 13px; opacity: .6; flex-shrink: 0; }
.maxpro-filter-input {
  flex: 1; min-width: 0; border: none; background: none;
  font: inherit; font-size: 12px; color: var(--text-primary);
  outline: none; padding: 3px 0;
}
.maxpro-filter-clear {
  flex-shrink: 0; width: 18px; height: 18px; border: none;
  background: var(--bg-surface-3); border-radius: 50%;
  font-size: 10px; line-height: 1; cursor: pointer;
  color: var(--text-tertiary); display: none; align-items: center; justify-content: center;
  padding: 0;
}
.maxpro-filter-clear.visible { display: flex; }
.maxpro-filter-clear:hover { background: var(--accent); color: #fff; }

.maxpro-colmenu-wrap { position: relative; flex-shrink: 0; }
.maxpro-colmenu-btn {
  padding: 4px 12px; border-radius: 6px; font-size: 11px; font-weight: 600;
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  color: var(--text-secondary); cursor: pointer; white-space: nowrap;
}
.maxpro-colmenu-btn:hover { border-color: var(--accent); color: var(--accent-light); }
.maxpro-colmenu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 100;
  background: var(--bg-surface-2); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-lg);
  min-width: 200px; max-width: 320px;
}
.maxpro-colmenu-head {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 12px 6px; font-size: 11px; font-weight: 700;
  color: var(--text-secondary); border-bottom: 1px solid var(--border-subtle);
}
.maxpro-colmenu-head span { flex: 1; }
.maxpro-colmenu-mini {
  font-size: 10px; padding: 2px 8px; border-radius: 4px;
  border: 1px solid var(--border-subtle); background: var(--bg-surface);
  color: var(--accent-light); cursor: pointer;
}
.maxpro-colmenu-mini:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.maxpro-colmenu-list {
  padding: 6px; max-height: 320px; overflow-y: auto;
}
.maxpro-colmenu-item {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: 5px; cursor: pointer;
  font-size: 12px; color: var(--text-primary);
}
.maxpro-colmenu-item:hover { background: var(--bg-surface); }

/* ═══ Regex Help Dialog — high-specificity rules (fix #4) ═══ */
#addrRegexHelpDialog.export-dialog-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9500 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
#addrRegexHelpDialog.export-dialog-overlay.hidden {
  display: none !important;
}
.maxpro-colmenu-item input { accent-color: var(--accent); }

/* ════════════════════════════════════════════════════════════════
   Family clusters enhancement
   ════════════════════════════════════════════════════════════════ */
.fam-strength { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:4px;
  font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.3px; }
.fam-strong { background:#16a34a; color:#fff; }
.fam-medium { background:#f59e0b; color:#1a1a1a; }
.fam-weak   { background:#64748b; color:#fff; }
.fam-shared { margin-left:5px; font-size:10px; color:var(--accent-light); font-weight:700; }
.fam-member { padding:3px 0; border-bottom:1px dashed var(--border-subtle); }
.fam-member:last-child { border-bottom:none; }
.fam-name { margin-left:6px; font-size:11px; color:var(--text-secondary); }
.fam-mobs { display:block; margin-top:2px; }

/* ════════════════════════════════════════════════════════════════
   LAYOUT FIX — toggle button removed from grid flow so the
   sidebar (col 1) and results (col 2) align correctly.
   ════════════════════════════════════════════════════════════════ */
#layoutToggleBtn {
  position: fixed !important;
  z-index: 200;
}

/* Guarantee grid child ORDER regardless of source position:
   sidebar always left, results always right.
   v20260912-1: scoped to the user panel via body:has(#mainGrid). */
@media (min-width: 1025px) {
  body:has(#mainGrid) .main-grid:not(.results-fullpage) > .sidebar {
    order: 1 !important;
    grid-column: 1 !important;
  }
  body:has(#mainGrid) .main-grid:not(.results-fullpage) > .results-section {
    order: 2 !important;
    grid-column: 2 !important;
  }
  /* The toggle button is fixed-position, so it never consumes a grid cell.
     Belt-and-braces: if it somehow stays in flow, force it span-0. */
  body:has(#mainGrid) .main-grid > #layoutToggleBtn {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 0;
    height: 0;
    overflow: visible;
  }
}

/* ════════ User-edit nested sub-tabs (admin modal) ════════ */
.usr-subtabbar{
  display:flex; gap:4px; flex-wrap:wrap;
  padding:5px; margin:0 0 14px;
  background:var(--bg-primary); border:1px solid var(--border);
  border-radius:9px; position:sticky; top:46px; z-index:18;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.usr-subtab{
  padding:6px 13px; border:1px solid transparent; border-radius:6px;
  background:transparent; color:var(--text-tertiary);
  font-size:11.5px; font-weight:700; cursor:pointer; white-space:nowrap;
  transition:all .15s; letter-spacing:.2px;
}
.usr-subtab:hover{ color:var(--text-primary); background:var(--bg-surface); }
.usr-subtab.active{
  background:linear-gradient(135deg,var(--accent),#7c3aed); color:#fff;
  border-color:transparent; box-shadow:0 2px 8px rgba(99,102,241,.35);
}
.usr-subpane{ display:none !important; }
.usr-subpane.active{ display:block !important; animation:usrPaneIn .16s ease-out; }
.usr-subpane .section-title:first-child{ margin-top:2px; }

/* ════════ Second-level sub-tabs (Services ▸ <service> ▸ Access/Limits) ════════
   v20260912-3 — the Services tab now nests two levels: a first-level
   sub-tab per service (Land Records (ROD), future FBR / NADRA …) and a
   second level inside it for that service's Access / Limits panes.
   Styled a step flatter than level 1 so the hierarchy reads clearly. */
.usr-subtabbar2{
  position:static !important;
  margin:0 0 12px; padding:4px;
  border-radius:8px; box-shadow:none;
  background:var(--bg-surface);
}
.usr-subtab2{
  padding:5px 12px; border:1px solid transparent; border-radius:6px;
  background:transparent; color:var(--text-tertiary);
  font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap;
  transition:all .15s; letter-spacing:.2px;
}
.usr-subtab2:hover{ color:var(--text-primary); background:var(--bg-primary); }
.usr-subtab2.active{
  background:var(--accent); color:#fff; border-color:transparent;
  box-shadow:0 1px 5px rgba(99,102,241,.3);
}
.usr-subpane2{ display:none !important; }
.usr-subpane2.active{ display:block !important; animation:usrPaneIn .16s ease-out; }
.usr-subpane2 .section-title:first-child{ margin-top:2px; }

/* ══════════════════════════════════════════════
   static/light-theme.css
   ══════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════
   light-theme.css — authoritative light palette (load LAST).
   Replaces the "sparkling white" surfaces with a low-glare grey stack.
   Specificity html[data-theme="light"] beats every earlier
   [data-theme="light"] !important rule.
   ══════════════════════════════════════════════════════════════════ */

html[data-theme="light"]{
  color-scheme: light;

  --bg-app:#E7EBF1;   --bg-primary:#E7EBF1;
  --bg-secondary:#F2F4F8;
  --bg-surface:#E9ECF2;
  --bg-surface-1:#F2F4F8; --bg-surface-2:#E9ECF2; --bg-surface-3:#DDE2EA;
  --bg-input:#F8F9FC;
  --bg-row-alt:rgba(23,32,46,.038);

  --border:#C7CFDB; --border-subtle:#DBE1EA;
  --border-default:#C7CFDB; --border-strong:#A4AFC0;

  --text-primary:#18212F; --text-secondary:#39465A; --text-tertiary:#5B6879;
  --text-subtle:#5B6879;  --text-muted:#6A7787;    --text-disabled:#93A0B2;

  --accent:#4A54D2; --accent-light:#5A65E6; --accent-2:#C4307A;
  --brand-primary:#4A54D2; --brand-primary-hover:#5A65E6;
  --success:#0E8A56; --color-success:#0E8A56; --color-success-bg:rgba(14,138,86,.10);
  --warning:#A9660A; --color-warning:#A9660A; --color-warning-bg:rgba(169,102,10,.10);
  --error:#C42B2B;   --color-error:#C42B2B;   --color-error-bg:rgba(196,43,43,.10);
  --color-info:#2B5BD7; --color-info-bg:rgba(43,91,215,.10);

  --shadow-xs:0 1px 2px rgba(24,33,47,.06);
  --shadow-sm:0 1px 3px rgba(24,33,47,.08),0 1px 2px rgba(24,33,47,.05);
  --shadow-md:0 4px 12px rgba(24,33,47,.09),0 2px 4px rgba(24,33,47,.05);
  --shadow-lg:0 12px 32px rgba(24,33,47,.12);
  --shadow-xl:0 20px 48px rgba(24,33,47,.16);
  --shadow-glow:0 0 0 3px rgba(74,84,210,.18);

  --sb-track:#D5DBE6; --sb-thumb:#8B96AB;
  --sb-thumb-hover:#6B7891; --sb-thumb-active:#525F77; --sb-border:#E7EBF1;
}

/* ── App background: matte grey, no glare, no animated gradient ── */
html[data-theme="light"] body{
  background:
    radial-gradient(1100px 700px at 10% 0%, rgba(74,84,210,.045), transparent 60%),
    radial-gradient(900px 700px at 100% 10%, rgba(196,48,122,.035), transparent 55%),
    #E7EBF1 !important;
  color: var(--text-primary) !important;
}
html[data-theme="light"] body::before{ display:none !important; }

/* ── Panels / cards / dialogs ── */
html[data-theme="light"] .panel,
html[data-theme="light"] .results-section,
html[data-theme="light"] .user-status-panel,
html[data-theme="light"] .data-entry-panel,
html[data-theme="light"] .subadmin-panel,
html[data-theme="light"] .sidebar-shell,
html[data-theme="light"] .modal-dialog,
html[data-theme="light"] .stats-modal-dialog,
html[data-theme="light"] .export-dialog,
html[data-theme="light"] .sa-modal,
html[data-theme="light"] .fb-group,
html[data-theme="light"] .udlg-box,
html[data-theme="light"] .frd-content,
html[data-theme="light"] .fcd-content,
html[data-theme="light"] .id-popover,
html[data-theme="light"] .ma-cnic-popover,
html[data-theme="light"] .maxpro-scope-dlg,
html[data-theme="light"] .maxpro-colmenu,
html[data-theme="light"] .notif-panel,
html[data-theme="light"] .cp-dialog{
  background:#F2F4F8 !important;
  background-image:none !important;
  color:var(--text-primary) !important;
  border-color:var(--border) !important;
  box-shadow:var(--shadow-sm) !important;
}

/* ── Section headers ── */
html[data-theme="light"] .panel-header,
html[data-theme="light"] .de-header,
html[data-theme="light"] .ss-topbar,
html[data-theme="light"] .results-header,
html[data-theme="light"] .fuse-results-header,
html[data-theme="light"] .modal-header,
html[data-theme="light"] .export-dialog-header,
html[data-theme="light"] .stats-modal-header,
html[data-theme="light"] .fb-group-head{
  background:#E6EAF1 !important;
  background-image:none !important;
  border-bottom-color:var(--border) !important;
}

/* ── Inner surfaces (chips, quota, wallet, cards) ── */
html[data-theme="light"] .status-info-item,
html[data-theme="light"] .quota-chip,
html[data-theme="light"] .quota-detail,
html[data-theme="light"] .file-chip,
html[data-theme="light"] .de-mini-chip,
html[data-theme="light"] .de-summary-chip,
html[data-theme="light"] .kpi-card,
html[data-theme="light"] .card,
html[data-theme="light"] .fb-card,
html[data-theme="light"] .sa-row,
html[data-theme="light"] .cs-item,
html[data-theme="light"] .ct-row,
html[data-theme="light"] .cp-item:hover,
html[data-theme="light"] .fuse-chip,
html[data-theme="light"] .export-stats-chips,
html[data-theme="light"] .ss-tabbar,
html[data-theme="light"] .cost-tabs,
html[data-theme="light"] .de-header-tabs,
html[data-theme="light"] .de-tabgroup .de-header-tabs{
  background:#E4E8F0 !important;
  border-color:var(--border-subtle) !important;
}

/* ── Inputs ── */
html[data-theme="light"] .form-input,
html[data-theme="light"] #manualInput,
html[data-theme="light"] .textarea-wrapper,
html[data-theme="light"] select.server-select,
html[data-theme="light"] .search-box input,
html[data-theme="light"] .fuse-term-input,
html[data-theme="light"] .fuse-field-select,
html[data-theme="light"] .fuse-mode-select,
html[data-theme="light"] .fuse-filter-input,
html[data-theme="light"] .maxpro-filter-box,
html[data-theme="light"] .maxpro-filter-input,
html[data-theme="light"] .col-filter,
html[data-theme="light"] .search-input,
html[data-theme="light"] .sa-input,
html[data-theme="light"] .sa-amt,
html[data-theme="light"] #searchFilter{
  background:#F8F9FC !important;
  color:var(--text-primary) !important;
  border-color:var(--border) !important;
  box-shadow:inset 0 1px 2px rgba(24,33,47,.06) !important;
}
html[data-theme="light"] #lineNumbers{ background:rgba(23,32,46,.05) !important; }
html[data-theme="light"] ::placeholder{ color:#8A96A8 !important; opacity:1; }

/* ── Tables ── */
html[data-theme="light"] .table-container,
html[data-theme="light"] .fuse-table-container,
html[data-theme="light"] .fuse-results-scroll,
html[data-theme="light"] .fuse-basic-container,
html[data-theme="light"] #addrResultsScroll,
html[data-theme="light"] #addrResultsTableWrap,
html[data-theme="light"] .data-table-wrap{
  background:#F2F4F8 !important;
}
html[data-theme="light"] #resultsTableMain thead th,
html[data-theme="light"] #fuseResultsTable thead th,
html[data-theme="light"] #addrResultsTable.maxpro-table thead th,
html[data-theme="light"] .data-compact-table thead th,
html[data-theme="light"] .stats-rel-table thead th,
html[data-theme="light"] table.bt thead th,
html[data-theme="light"] th{
  background:#DEE4EE !important;
  background-image:none !important;
  color:#26313F !important;
  border-bottom-color:var(--accent) !important;
}
html[data-theme="light"] #resultsTableMain tbody td,
html[data-theme="light"] #fuseResultsTable tbody td,
html[data-theme="light"] #addrResultsTable.maxpro-table tbody td,
html[data-theme="light"] .data-compact-table tbody td,
html[data-theme="light"] td{
  color:var(--text-primary) !important;
  border-bottom-color:var(--border-subtle) !important;
  border-right-color:var(--border-subtle) !important;
}
html[data-theme="light"] #resultsTableMain tbody tr:nth-child(even) td,
html[data-theme="light"] #fuseResultsTable tbody tr:nth-child(even) td,
html[data-theme="light"] #addrResultsTable.maxpro-table tbody tr:nth-child(even) td,
html[data-theme="light"] .data-compact-table tbody tr:nth-child(even) td{
  background:rgba(23,32,46,.032) !important;
}
html[data-theme="light"] #resultsTableMain tr:hover td,
html[data-theme="light"] #fuseResultsTable tr:hover td,
html[data-theme="light"] #addrResultsTable.maxpro-table tbody tr:hover td{
  background:rgba(74,84,210,.10) !important;
}
/* status stripes stay, tint removed */
html[data-theme="light"] #resultsTableMain tbody tr.row-found td{ background-image:linear-gradient(90deg,rgba(14,138,86,.09) 0%,transparent 12%) !important; }
html[data-theme="light"] tr.row-notfound td{ background-image:linear-gradient(90deg,rgba(196,43,43,.08) 0%,transparent 12%) !important; }
html[data-theme="light"] tr.row-error td{    background-image:linear-gradient(90deg,rgba(169,102,10,.09) 0%,transparent 12%) !important; }

/* ── Bars / footers ── */
html[data-theme="light"] .export-bar{
  background:linear-gradient(180deg,rgba(20,184,166,.05),#E6EAF1 60%) !important;
  border-top-color:#0E9384 !important;
}
html[data-theme="light"] .fuse-export-bar,
html[data-theme="light"] .modal-footer,
html[data-theme="light"] .export-dialog-footer,
html[data-theme="light"] .stats-actions,
html[data-theme="light"] .sa-modal-foot{
  background:#E6EAF1 !important;
  box-shadow:0 -3px 10px rgba(24,33,47,.06) !important;
}

/* ── Text hierarchy (kills the low-contrast washed-out look) ── */
html[data-theme="light"] .de-section-label,
html[data-theme="light"] .ss-sub-title,
html[data-theme="light"] .fuse-label-text,
html[data-theme="light"] .si-label,
html[data-theme="light"] .kpi-lbl,
html[data-theme="light"] .qd-k,
html[data-theme="light"] .form-label,
html[data-theme="light"] .stats-section-title,
html[data-theme="light"] .ul-group-title,
html[data-theme="light"] .sa-lbl{ color:#46536A !important; opacity:1 !important; }
html[data-theme="light"] .form-hint,
html[data-theme="light"] .quota-detail-note,
html[data-theme="light"] .fuse-info-line,
html[data-theme="light"] #rateLimitText,
html[data-theme="light"] .status-msg{ color:#5B6879 !important; }

/* ── Overlays ── */
html[data-theme="light"] .udlg-overlay,
html[data-theme="light"] .export-dialog-overlay,
html[data-theme="light"] .stats-modal-overlay,
html[data-theme="light"] .modal-backdrop,
html[data-theme="light"] .sa-modal-bd,
html[data-theme="light"] #creditInfoOverlay,
html[data-theme="light"] #maskedInfoOverlay,
html[data-theme="light"] .fuse-cooldown-dialog,
html[data-theme="light"] .fuse-result-dialog{
  background:rgba(28,36,50,.42) !important;
  backdrop-filter:blur(4px) !important;
}
html[data-theme="light"] dialog.maxpro-scope-dlg::backdrop{ background:rgba(28,36,50,.40) !important; }

/* ── Scrollbars ── */
html[data-theme="light"] *{ scrollbar-color:#8B96AB #D5DBE6; }
html[data-theme="light"] *::-webkit-scrollbar-track{ background:#D5DBE6 !important; }
html[data-theme="light"] *::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#9BA6B9,#7C8AA1) !important;
  border:2px solid #E7EBF1 !important; box-shadow:none !important;
}
html[data-theme="light"] *::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,#7C8AA1,#65738C) !important; }
html[data-theme="light"] .table-container::-webkit-scrollbar-thumb,
html[data-theme="light"] .fuse-table-container::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#5A65E6,#4A54D2) !important; border-color:#E7EBF1 !important;
}

/* ── Highlight pill: keep it readable, not neon ── */
html[data-theme="light"] .maxpro-term-hl,
html[data-theme="light"] mark.maxpro-term-hl,
html[data-theme="light"] .fuse-hl,
html[data-theme="light"] mark.fuse-hl{
  background:#D8F0A8 !important; color:#1E3305 !important;
  box-shadow:0 0 0 1px #7CA33A !important; animation:none !important;
}

/* ── Admin panel parity ── */
html[data-theme="light"] .users-table tbody tr:nth-child(even) td{ background:rgba(23,32,46,.032) !important; }
html[data-theme="light"] .users-table tbody tr:hover td{ background:rgba(74,84,210,.09) !important; }
html[data-theme="light"] .usr-tabbar{ background:#E6EAF1 !important; }
html[data-theme="light"] .usr-subtabbar,
html[data-theme="light"] .server-acl-list,
html[data-theme="light"] .addr-db-col-list,
html[data-theme="light"] .addr-col-order-list,
html[data-theme="light"] .fuse-fields-grid,
html[data-theme="light"] .addr-field-grid{ background:#E4E8F0 !important; }
html[data-theme="light"] .server-acl-row,
html[data-theme="light"] .addr-db-group,
html[data-theme="light"] .addr-col-order-item,
html[data-theme="light"] .fuse-field-pick,
html[data-theme="light"] .addr-col-pick{ background:#F2F4F8 !important; }

/* ══════════════════════════════════════════════
   static/responsive-universal-fix.css
   ══════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════
   responsive-universal-fix.css  ·  v20260918-final
   ──────────────────────────────────────────────────────────────────
   Single authoritative patch for cross-device visual correctness.
   Loaded LAST on every page so it wins the cascade.

   The project uses cascade layers declared in tokens.css:
     @layer legacy, base, component, mobile;
   We declare a NEW layer 'fix' LAST so everything here beats every
   existing layer, including the layered `!important` rules that have
   been accumulating in mobile-*.css / user-*.css.

   What it fixes (confirmed by Playwright audit on 360/390/768/1366/1920):
   • admin.html  — header/nav/table overflow on ≤640px (hOverflow 96–126px)
   • user.html   — ss-topbar-right / ss-tabbar / pr-toolbar bleeding 6–20px
                   past the viewport on mobile & tablet
   • all pages   — box-sizing, safe-area insets, tap-target sizes, table
                   scroll containment, modal viewport safety
   ══════════════════════════════════════════════════════════════════ */

@layer legacy, base, component, mobile, fix;
@layer fix {

/* ── 0 · GLOBAL RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box !important; }
html, body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
img, video, svg, canvas, table { max-width: 100% !important; }
input, select, textarea, button { font: inherit; max-width: 100% !important; }

/* Respect iOS notch / home indicator everywhere */
body { padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); }

/* ══════════════════════════════════════════════════════════════════
   1 · ADMIN PAGE — full mobile repair
   ══════════════════════════════════════════════════════════════════ */

/* 1a · Header: stack gracefully, never overflow */
@media (max-width: 768px) {
  .header { padding: 12px 14px !important; }
  .header .header-content {
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: space-between !important;
  }
  .header .logo-section { flex: 1 1 auto !important; min-width: 0 !important; }
  .header .logo-text { font-size: 19px !important; }
  .header .admin-badge { padding: 3px 9px !important; font-size: 10px !important; }

  .header .header-actions {
    flex: 1 1 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .header .header-actions > span { flex: 1 1 100% !important; font-size: 12.5px !important; }
  .header .header-actions .btn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 9px 12px !important;
    font-size: 12px !important;
    height: 38px !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .header .header-actions .theme-toggle {
    flex: 0 0 38px !important; width: 38px !important; height: 38px !important;
  }
}

/* 1b · Nav tabs: horizontal scroll instead of overflow */
@media (max-width: 768px) {
  .nav-tabs {
    padding: 0 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    position: static !important;
  }
  .nav-tabs::-webkit-scrollbar { display: none !important; }
  .nav-tabs .nav-content {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 8px 2px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .nav-tabs .tab {
    flex: 0 0 auto !important;
    padding: 9px 14px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
    min-height: 40px !important;
    gap: 6px !important;
  }
}

/* 1c · Container & panels breathe on small screens */
@media (max-width: 768px) {
  main.container { padding: 14px 12px calc(80px + env(safe-area-inset-bottom, 0px)) !important; }
  .panel { border-radius: 12px !important; }
  .panel-header {
    padding: 14px 14px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }
  .panel-title { font-size: 16px !important; }
  .panel-body { padding: 14px 12px !important; }
}

/* 1d · Toolbar (filter row): full-width stacked controls */
@media (max-width: 768px) {
  .toolbar-row { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  .toolbar-row > * { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; }
  .toolbar-row .search-input,
  .toolbar-row select,
  .toolbar-row .btn { width: 100% !important; min-width: 0 !important; height: 42px !important; font-size: 13px !important; }
}

/* 1e · Users table: force internal horizontal scroll, never page overflow */
.table-container,
#usersBox.table-container {
  display: block !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  border-radius: 10px !important;
}
.users-table { min-width: 100% !important; width: max-content !important; }
@media (max-width: 768px) {
  .table-container { max-height: none !important; }
  .users-table { font-size: 12px !important; }
  .users-table th, .users-table td { padding: 6px 8px !important; font-size: 11.5px !important; }
  .users-table .uc-actions .action-btn { padding: 5px 8px !important; font-size: 11px !important; }
}
/* Trim noisy columns on tight screens (in addition to existing 4/5) */
@media (max-width: 640px) {
  #usersBox th:nth-child(6), #usersBox td:nth-child(6) { display: none !important; }
}
@media (max-width: 460px) {
  #usersBox th:nth-child(3), #usersBox td:nth-child(3) { display: none !important; }
}

/* 1f · Modals: always fit the viewport, always scrollable */
.modal-backdrop { padding: 8px !important; }
.modal-dialog {
  width: 100% !important;
  max-width: min(560px, calc(100vw - 16px)) !important;
  max-height: calc(100dvh - 16px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
@media (max-width: 600px) {
  .modal-backdrop { padding: 0 !important; }
  .modal-dialog {
    max-width: 100vw !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }
  .form-grid { grid-template-columns: 1fr !important; }
  .form-grid .span-2 { grid-column: span 1 !important; }
}

/* ══════════════════════════════════════════════════════════════════
   2 · USER PAGE — fix sidebar component bleed on mobile/tablet
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  /* Every direct child of the sidebar respects the sidebar's inner width.
     The '100% + padding' trap: width:100% inside a padded parent overflows.
     Using width:auto + max-width:100% + min-width:0 + box-sizing:border-box
     (already set globally above) guarantees containment. */
  .sidebar .ss-topbar,
  .sidebar .ss-topbar-right,
  .sidebar .ss-tabbar,
  .sidebar .pr-toolbar,
  .sidebar .de-tabgroup,
  .sidebar .de-header-tabs,
  .sidebar .panel-body,
  .sidebar .de-tab-panel,
  .sidebar .ss-panes,
  .sidebar .ss-pane,
  .sidebar .de-section {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* ss-topbar-right: was bleeding 18px past viewport (R=378 on 360px).
     Root cause: flex children with fixed sizes + gap pushed past parent.
     Force wrap + strict min-width:0 on every child. */
  .sidebar .ss-topbar {
    overflow: hidden !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    display: flex !important;
  }
  .sidebar .ss-topbar > * { min-width: 0 !important; max-width: 100% !important; }
  .sidebar .ss-topbar .ss-id-wrap { flex: 1 1 0 !important; min-width: 0 !important; }
  /* CRITICAL: another stylesheet forces flex-wrap:nowrap and flex:0 0 auto.
     Beat it with the most-specific selector possible. */
  .sidebar .ss-topbar > .ss-topbar-right,
  .sidebar .ss-topbar-right {
    flex-wrap: wrap !important;
    overflow: hidden !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
    flex-shrink: 1 !important;
    order: 3 !important;
  }
  .sidebar .ss-topbar-right > * {
    min-width: 0 !important;
    max-width: 100% !important;
    flex-shrink: 1 !important;
  }
  .sidebar .ss-topbar-right .hdr-btn {
    /* override flex-shrink:0 in base .hdr-btn — buttons MUST shrink on 360px */
    flex: 1 1 0 !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    width: auto !important;
    font-size: 11px !important;
    padding: 0 6px !important;
    height: 40px !important;
    min-height: 40px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .sidebar .ss-topbar-right #themeToggleBtn {
    flex: 0 0 40px !important;
    flex-shrink: 0 !important;
    width: 40px !important;
    min-width: 40px !important;
  }
  .sidebar .ss-topbar-right .credit-chip {
    flex: 0 1 auto !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    order: -1 !important;
    max-width: 100% !important;
  }
  /* On very narrow screens, force the credit chip to its own row */
  .sidebar .ss-topbar-right .credit-chip { flex-basis: 100% !important; }

  /* ss-tabbar: was bleeding 6px. Force strict containment. */
  .sidebar .ss-tabbar {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  .sidebar .ss-tabbar::-webkit-scrollbar { display: none !important; }
  .sidebar .ss-tab {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  /* pr-toolbar (entry-tags toolbar): same bleed pattern */
  .sidebar .pr-toolbar {
    flex-wrap: wrap !important;
    overflow: hidden !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 6px !important;
  }
  .sidebar .pr-toolbar > * { min-width: 0 !important; max-width: 100% !important; }
  .sidebar .pr-toolbar .pr-chip,
  .sidebar .pr-toolbar .etag-trigger {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* de-header-tabs scroll horizontally */
  .sidebar .de-header-tabs {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    max-width: 100% !important;
  }
  .sidebar .de-header-tabs::-webkit-scrollbar { display: none !important; }
  .sidebar .de-tab { flex: 0 0 auto !important; white-space: nowrap !important; }

  /* Main content safe-area */
  #mainContent.container {
    padding-left: calc(8px + env(safe-area-inset-left, 0px)) !important;
    padding-right: calc(8px + env(safe-area-inset-right, 0px)) !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Results section: predictable height on mobile */
  #mainGrid > .results-section {
    height: calc(var(--app-vh, 1vh) * 78) !important;
    min-height: 420px !important;
    max-height: none !important;
    overflow: hidden !important;
    border-radius: 12px !important;
  }
  .results-section .table-container,
  .results-section .fuse-table-container {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  .sidebar .ss-topbar-right .hdr-btn { font-size: 10px !important; padding: 0 4px !important; }
  .sidebar .ss-tab { font-size: 11.5px !important; padding: 10px 8px !important; }
  .sidebar .de-tab { font-size: 11px !important; min-width: 100px !important; }
}

/* ══════════════════════════════════════════════════════════════════
   3 · ALL PAGES — tap targets, modals, toasts, misc
   ══════════════════════════════════════════════════════════════════ */

/* 3a · Minimum 40px tap targets on touch */
@media (hover: none) and (pointer: coarse) {
  button, .btn, .tab, .ss-tab, .de-tab, .action-btn, [role="button"] {
    min-height: 40px !important;
  }
  input[type="checkbox"], input[type="radio"] { width: 20px !important; height: 20px !important; }
}

/* 3b · Toast container: fit small screens */
@media (max-width: 480px) {
  .toast-container {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: none !important;
    width: auto !important;
  }
}

/* 3c · Command palette: full-width sheet on phones */
@media (max-width: 600px) {
  .command-palette { padding: 12px !important; align-items: flex-start !important; padding-top: 8vh !important; }
  .command-palette .cp-panel, .command-palette > div:not(.cp-backdrop) {
    width: 100% !important; max-width: 100% !important;
  }
}

/* 3d · Generic popovers / dropdowns: clamp to viewport */
.id-popover, .dropdown, .popover, .menu {
  max-width: calc(100vw - 16px) !important;
}

/* 3e · Sticky headers don't trap stacking on iOS */
.header, .nav-tabs { -webkit-transform: translateZ(0); transform: translateZ(0); }

/* 3f · Reduced-motion: honour system preference globally */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 3g · Landscape phones: reclaim vertical space */
@media (max-height: 500px) and (orientation: landscape) {
  .header { position: static !important; }
  .nav-tabs { position: static !important; }
}

/* 3h · Wide desktop: keep content readable, don't stretch forever */
@media (min-width: 1921px) {
  main.container, .container { max-width: 1680px !important; margin-left: auto !important; margin-right: auto !important; }
}

} /* /@layer fix */

/* ══════════════════════════════════════════════
   static/scroll-and-mobile-repair.css
   ══════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════
   scroll-and-mobile-repair.css · v20260918-repair1
   ──────────────────────────────────────────────────────────────────
   AUTHORITATIVE final patch. Must be the LAST stylesheet in <head>.

   Fixes two reported defects:

   BUG 1 — "main page doesn't scroll unless you scroll from the far
            right scroll point"
     Root cause: `body{overflow:hidden;height:100%}` +
     `.container{height:100dvh;overflow:hidden}` +
     `.main-grid{overflow:hidden}` made the DOCUMENT non-scrollable.
     Only the results pane (right column) had a real scrollbar, so the
     wheel only worked when the pointer was over that pane.
     Fix: the document is always a real scroller; inner panes keep
     their own scrolling but no longer swallow the wheel once they are
     exhausted (`overscroll-behavior: auto`), and the wheel is
     forwarded to the page from non-scrollable areas (JS companion).

   BUG 2 — "mobile: Fuse and All Services are visually broken and the
            page cannot be scrolled down"
     Root cause: on ≤1024px `mobile-authoritative-fix.css` /
     `mobile-vscroll-fix.css` pin `.results-section` to
     `height:78vh; overflow:hidden` and `mobile-results-gate.css`
     hides it behind a body class; combined with the locked body this
     left Fuse / All-Search content clipped with no way to reach it.
     Fix: on mobile everything returns to normal document flow —
     sidebar, panels and result blocks stack and the PAGE scrolls.

   Layer `repair` is declared last so it beats legacy/base/component/
   mobile/fix without needing to escalate specificity everywhere.
   ══════════════════════════════════════════════════════════════════ */

@layer legacy, base, component, mobile, fix, repair;

@layer repair {

/* ══════════════════════════════════════════════════════════════════
   1 · GLOBAL — the document is ALWAYS the scroller of last resort
   ══════════════════════════════════════════════════════════════════ */
html {
  height: auto !important;
  min-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scroll-behavior: smooth;
}

body {
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: auto !important;
}

/* A modal is the ONLY legitimate reason to lock the page. */
body.as-modal-open,
body.modal-open {
  overflow: hidden !important;
}

/* Inner scrollers must hand the wheel back to the page when they are
   at their own top/bottom edge (no more "dead" wheel zones). */
.panel-body,
.sidebar,
.sidebar-content,
.table-container,
.fuse-table-container,
.fuse-basic-container,
.fuse-results-scroll,
.as-block-scroll,
.vt-viewport,
#resultsTableWrap,
#addrResultsScroll,
#addrResultsTableWrap,
#asResultsScroll {
  overscroll-behavior-y: auto !important;
}

/* ══════════════════════════════════════════════════════════════════
   2 · DESKTOP (≥1025px) — page scrolls from anywhere
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {

  .container {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .main-grid {
    min-height: 0 !important;
    overflow: visible !important;
    align-items: start !important;
  }

  /* Sidebar column flows with the page instead of being a private
     scroll prison; it sticks so it stays usable while reading rows. */
  .main-grid > .sidebar {
    overflow: visible !important;
    max-height: none !important;
    position: sticky;
    top: 10px;
    align-self: start;
  }

  .main-grid > .sidebar .panel,
  .main-grid > .sidebar .panel-body {
    max-height: none !important;
  }
  .main-grid > .sidebar .panel-body {
    overflow-y: visible !important;
  }

  /* Results pane keeps an internal scroller, but bounded to the
     viewport so the page itself still has somewhere to go. */
  .results-section {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .results-section .table-container,
  .results-section .fuse-table-container,
  .results-section .fuse-basic-container,
  .results-section #addrResultsTableWrap,
  .results-section #resultsTableWrap,
  .results-section .vt-viewport {
    max-height: calc(100dvh - 190px) !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   3 · MOBILE / TABLET (≤1024px) — normal document flow
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  .container {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 8px 8px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .main-grid,
  #mainGrid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .main-grid > .sidebar,
  #mainGrid > .sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
    position: static !important;
  }

  .sidebar .panel,
  .sidebar .panel-body,
  .data-entry-panel,
  .data-entry-panel .panel-body,
  .de-tab-panel,
  .de-tab-panel .panel-body {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* 3a · Results section joins the flow — NO fixed 78vh cage. */
  #mainGrid > .results-section,
  .main-grid > .results-section,
  .results-section {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    width: 100% !important;
  }

  /* The results gate must never hide the section outright — that was
     what made Fuse / All Services look "empty and unscrollable". */
  body:not(.m-show-results) #mainGrid > .results-section,
  body:not(.m-show-results) .main-grid > .results-section {
    display: flex !important;
  }

  /* 3b · Mode wrappers flow; hidden ones stay hidden. */
  #phoneModeWrap,
  #addressModeWrap,
  #fuseModeWrap,
  #allSearchModeWrap,
  .results-mode {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
  }
  #phoneModeWrap[hidden],
  #addressModeWrap[hidden],
  #fuseModeWrap[hidden],
  #allSearchModeWrap[hidden],
  .results-mode[hidden] {
    display: none !important;
  }

  /* 3c · Outer scroll wrappers stop being scroll prisons. */
  .fuse-results-scroll,
  #asResultsScroll,
  #addrResultsScroll {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
  }

  /* 3d · Only the actual TABLE containers scroll, and only as much as
        one viewport — so there is always page left to scroll. */
  .table-container,
  #resultsTableWrap,
  #addrResultsTableWrap,
  .fuse-table-container,
  .fuse-basic-container,
  .as-block-scroll,
  .vt-viewport {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(var(--app-vh, 1vh) * 70) !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto !important;
    width: 100% !important;
  }

  /* 3e · Tables: horizontal scroll inside the container, never a
        page-wide horizontal overflow. */
  #resultsTableMain,
  #addrResultsTable,
  #fuseResultsTable,
  .results-section table {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    height: auto !important;
  }

  /* 3f · FUSE panel repair — rows, options and action bar stack. */
  .fuse-panel-body,
  .fuse-search-section {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
  }
  .fuse-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .fuse-row-label {
    width: auto !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }
  .fuse-options {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .fuse-term-input,
  .fuse-field-select,
  .fuse-mode-select {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;   /* stops iOS focus-zoom */
  }
  .fuse-flex-spacer { display: none !important; }
  .fuse-action-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .fuse-action-bar > button,
  .fuse-search-btn,
  .fuse-stop-btn {
    flex: 1 1 140px !important;
    min-width: 0 !important;
    min-height: 44px !important;
    justify-content: center !important;
  }
  .quota-row,
  .fuse-quota-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    min-width: 0 !important;
  }
  .quota-chip {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* 3g · ALL SEARCH / "All Services" repair — blocks stack and each
        block's body scrolls only when it is genuinely tall. */
  #asResultBlocks {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  .as-block {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 10px 0 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
  }
  .as-block-h,
  .as-group-h,
  .as-b-tools {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .as-block-title,
  .as-block-queries,
  .as-block-msg,
  .as-block-status {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }
  .as-b-btn,
  .as-b-collapse,
  .as-more-btn,
  .as-export,
  .as-copy {
    min-height: 36px !important;
    padding: 6px 10px !important;
  }
  .as-b-filter,
  .as-bfilter,
  .as-colfilter {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
  }
  .as-block-body {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .as-block-body table,
  .as-block table {
    width: max-content !important;
    min-width: 100% !important;
  }
  /* Card / key-value rendering inside all-search blocks */
  .as-card,
  .as-group {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .as-card-head,
  .as-card-opts {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    min-width: 0 !important;
  }
  .as-key,
  .as-lbl,
  .as-chip,
  .as-info {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }
  .as-type-list,
  #asTypeList {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    width: 100% !important;
  }
  #asQuery {
    width: 100% !important;
    font-size: 16px !important;
  }

  /* 3h · Tab bar scrolls horizontally instead of breaking the layout. */
  .de-header-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 4px !important;
  }
  .de-header-tabs::-webkit-scrollbar { display: none !important; }
  .de-tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-height: 38px !important;
  }

  /* 3i · Headers/toolbars never grow, and never clip their contents. */
  .results-header,
  .fuse-results-header,
  .maxpro-results-header,
  .results-toolbar,
  .export-bar,
  .fuse-export-bar,
  .maxpro-export-bar {
    flex: 0 0 auto !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    overflow: visible !important;
  }

  /* 3j · Nothing may bleed past the viewport horizontally. */
  .container,
  .main-grid,
  .sidebar,
  .panel,
  .results-section,
  .results-mode {
    max-width: 100vw !important;
  }

  /* 3k · Breathing room at the very bottom so the last row is reachable
        above the browser chrome / home indicator. */
  .results-section { margin-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ══════════════════════════════════════════════════════════════════
   4 · Small phones (≤480px) — tighten spacing
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .container { padding: 6px 6px calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
  .as-block { margin-bottom: 8px !important; }
  .results-header .panel-title { font-size: 12px !important; }
}

} /* @layer repair */

/* ══════════════════════════════════════════════
   static/mobile-total-fix.css
   ══════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════
   mobile-total-fix.css · v20260918-total1
   ──────────────────────────────────────────────────────────────────
   COMPREHENSIVE mobile / tablet fix. MUST be the LAST stylesheet in
   <head>. Uses `@layer total` (declared after every previous layer
   including `repair`) so nothing else can override it.

   Fixes reported "mobile web view totally broken" — every search
   type (Phone/CNIC, MaxPro, Fuse, Services, All Search) is now
   visually complete, reachable and scrollable on every mobile size.

   Root causes patched here
   ------------------------
   1. Old mobile-authoritative-fix.css / mobile-vscroll-fix.css pin
      the results section to 78vh + overflow:hidden. The later
      "repair" layer tried to undo that but the topbar-right block
      in responsive-universal-fix.css forces
        `.sidebar .ss-topbar { overflow: hidden !important; }`
      + `.sidebar-shell { overflow: hidden }` in ui-refine.css and
      mobile-master.css, which together CLIP the sidebar contents
      to just the topbar+tabbar (~150px), making the Search-Type
      tabs invisible on mobile.
   2. `scroll-and-mobile-repair.js` was FORCE-ADDING `m-show-results`
      unconditionally — that caused the empty results panel to
      appear at ~78vh even before a search ran, pushing the (already
      clipped) sidebar off-screen. Handled by mobile-total-fix.js.
   3. The Fuse / MaxPro / All-Search headers had `.results-header`
      children absolutely positioned relative to the filter input,
      producing the "overlapping title + Filter / Advanced / Sources"
      look you can see in the reference screenshots.
   ══════════════════════════════════════════════════════════════════ */

@layer legacy, base, component, mobile, fix, repair, total;

@layer total {

/* ══════════════════════════════════════════════════════════════════
   0 · Global — the page is ALWAYS the scroller of last resort.
   ══════════════════════════════════════════════════════════════════ */
html, body {
  height: auto !important;
  min-height: 100% !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
body.as-modal-open, body.modal-open { overflow: hidden !important; }

/* ══════════════════════════════════════════════════════════════════
   1 · MOBILE / TABLET (≤1024px)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  /* 1a · Outer shell — flow layout, one column. */
  .container, #mainContent.container {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 8px 8px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    display: block !important;
  }
  #mainGrid, .main-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }

  /* ────────────────────────────────────────────────────────────────
     1b · SIDEBAR — NEVER clipped. Must grow to fit the Search-Type
          tabs, the Usage / Files / Entries / Actions panels, etc.
     ──────────────────────────────────────────────────────────────── */
  #mainGrid > .sidebar,
  .main-grid > .sidebar,
  .sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
    position: static !important;
    display: block !important;
  }
  .sidebar > .panel,
  .sidebar .sidebar-shell,
  .sidebar .panel.sidebar-shell {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;         /* was: hidden — CULPRIT */
    display: flex !important;
    flex-direction: column !important;
  }
  .sidebar .ss-topbar {
    /* was: overflow:hidden + flex-wrap:wrap forced by
       responsive-universal-fix. Wrapping is fine; clipping is not. */
    overflow: visible !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 8px !important;
    column-gap: 8px !important;
    padding: 8px 10px !important;
  }
  .sidebar .ss-topbar .ss-avatar {
    flex: 0 0 auto !important;
    order: 0 !important;
  }
  .sidebar .ss-topbar .ss-id-wrap {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    order: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .sidebar .ss-topbar-right {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    flex: 1 1 100% !important;
    order: 3 !important;
    overflow: visible !important;
  }
  .sidebar .ss-topbar-right > * { min-width: 0 !important; }
  .sidebar .ss-topbar-right .hdr-btn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 40px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }
  .sidebar .ss-topbar-right #themeToggleBtn { flex: 0 0 44px !important; width: 44px !important; }
  .sidebar .ss-topbar-right .credit-chip { flex: 1 1 100% !important; order: -1 !important; }
  .sidebar .ss-panes {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;         /* was: hidden auto */
    padding: 8px 0 10px !important;
    gap: 10px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .sidebar .ss-pane {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    display: none !important;             /* hidden by default */
  }
  .sidebar .ss-pane.active {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .sidebar #dataEntryPanel,
  .sidebar .data-entry-panel,
  .sidebar .data-entry-panel .panel-collapse-body,
  .sidebar .de-header,
  .sidebar .de-tab-panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .sidebar .de-tab-panel {
    display: none !important;
  }
  .sidebar .de-tab-panel.active {
    display: flex !important;
    flex-direction: column !important;
  }
  .sidebar .de-tab-panel > .panel-body,
  .sidebar .de-tab-panel > .fuse-panel-body {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* 1c · Search-Type tab bar — horizontal scroll, always visible. */
  .sidebar .de-header,
  .sidebar .de-tabgroup {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  .sidebar .de-header-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    width: 100% !important;
    padding-bottom: 2px !important;
  }
  .sidebar .de-header-tabs::-webkit-scrollbar { display: none !important; }
  .sidebar .de-header-tabs .de-tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }
  .sidebar .de-header-tabs .de-tab[hidden] { display: none !important; }

  /* 1d · Fuse / MaxPro / All-Search forms in sidebar stack properly. */
  .sidebar .fuse-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  .sidebar .fuse-row-label { width: auto !important; flex: 0 0 auto !important; }
  .sidebar .fuse-options {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .sidebar .fuse-term-input,
  .sidebar .fuse-field-select,
  .sidebar .fuse-mode-select,
  .sidebar #addrTermInput,
  .sidebar #fuseTermInput,
  .sidebar #asQuery {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;   /* iOS focus-zoom guard */
    box-sizing: border-box !important;
  }
  .sidebar .fuse-action-bar,
  .sidebar .controls-row--actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .sidebar .fuse-search-btn,
  .sidebar .fuse-stop-btn,
  .sidebar .btn-action-primary,
  .sidebar .btn-action-secondary {
    flex: 1 1 140px !important;
    min-width: 0 !important;
    min-height: 44px !important;
    justify-content: center !important;
  }

  /* 1e · All-Search type list — one column, easy tap targets. */
  .sidebar .as-type-list,
  .sidebar #asTypeList {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    width: 100% !important;
  }

  /* ────────────────────────────────────────────────────────────────
     1f · RESULTS SECTION — the STAR bug. On mobile the results
          panel joins the page flow. It is only VISIBLE once the
          user actually has something to look at, controlled by
          <body>.m-show-results (mobile-results-gate.js).
     ──────────────────────────────────────────────────────────────── */
  #mainGrid > .results-section,
  .main-grid > .results-section,
  .results-section {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    position: static !important;
    margin-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* GATE: hide when nothing to show (mobile-results-gate.js decides). */
  body:not(.m-show-results) #mainGrid > .results-section,
  body:not(.m-show-results) .main-grid > .results-section {
    display: none !important;
  }

  /* Mode wrappers flow inside the results section. */
  #phoneModeWrap,
  #addressModeWrap,
  #fuseModeWrap,
  #allSearchModeWrap,
  .results-mode {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
  }
  #phoneModeWrap[hidden],
  #addressModeWrap[hidden],
  #fuseModeWrap[hidden],
  #allSearchModeWrap[hidden],
  .results-mode[hidden] { display: none !important; }

  /* Outer scroll wrappers stop being scroll prisons. */
  .fuse-results-scroll,
  #asResultsScroll,
  #addrResultsScroll {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    width: 100% !important;
  }

  /* Only the actual TABLE containers scroll, and only as much as
     one viewport-worth so there's always page left to scroll. */
  .table-container,
  #resultsTableWrap,
  #addrResultsTableWrap,
  .fuse-table-container,
  .fuse-basic-container,
  .as-block-scroll,
  .vt-viewport {
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(var(--app-vh, 1vh) * 65) !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto !important;
    width: 100% !important;
    display: block !important;
  }

  /* Tables get their own horizontal scroll inside the container. */
  #resultsTableMain,
  #addrResultsTable,
  #fuseResultsTable,
  .results-section table {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
    height: auto !important;
  }

  /* Sticky headers inside scrollers */
  #resultsTableMain thead th,
  #addrResultsTable thead th,
  #fuseResultsTable thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
  }

  /* ────────────────────────────────────────────────────────────────
     1g · RESULTS HEADERS — the "Filter · Advanced · Sources / title"
          overlap fix. Force each results header into a clean
          two-row grid: title on top, controls wrap below.
     ──────────────────────────────────────────────────────────────── */
  .results-header,
  .fuse-results-header,
  .maxpro-results-header,
  .as-block-h,
  .as-group-h {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    min-width: 0 !important;
    position: static !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }
  .results-header > *,
  .fuse-results-header > *,
  .maxpro-results-header > *,
  .as-block-h > *,
  .as-group-h > * {
    position: static !important;         /* kill any absolute overlap */
    min-width: 0 !important;
    max-width: 100% !important;
    flex-shrink: 1 !important;
  }
  .results-header .panel-title,
  .fuse-results-header .panel-title,
  .maxpro-results-header .panel-title,
  .as-block-title {
    flex: 1 1 100% !important;           /* title claims its own row */
    order: 0 !important;
    font-size: 15px !important;
    line-height: 1.25 !important;
  }
  /* Toolbar / status / export controls wrap onto the next row(s). */
  .results-header .results-toolbar,
  .fuse-results-header .fuse-toolbar,
  .maxpro-results-header .maxpro-toolbar,
  .fuse-toolbar,
  .maxpro-toolbar,
  .export-bar,
  .fuse-export-bar,
  .maxpro-export-bar,
  .as-b-tools {
    display: flex !important;
    flex: 1 1 100% !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    min-width: 0 !important;
    order: 1 !important;
  }
  .fuse-toolbar > button,
  .maxpro-toolbar > button,
  .export-bar > button,
  .fuse-export-bar > button,
  .maxpro-export-bar > button {
    flex: 0 1 auto !important;
    min-height: 36px !important;
    padding: 6px 12px !important;
    font-size: 12px !important;
  }
  .results-toolbar input[type="text"],
  .results-toolbar input[type="search"],
  .fuse-toolbar input,
  .maxpro-toolbar input,
  .as-b-filter,
  .as-bfilter,
  .as-colfilter {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
  }

  /* ────────────────────────────────────────────────────────────────
     1h · ALL SEARCH result blocks stack on their own rows.
     ──────────────────────────────────────────────────────────────── */
  #asResultBlocks {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  .as-block {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 10px 0 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    display: block !important;
  }
  .as-block-title,
  .as-block-queries,
  .as-block-msg,
  .as-block-status {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
  }
  .as-b-btn, .as-b-collapse, .as-more-btn, .as-export, .as-copy {
    min-height: 36px !important;
    padding: 6px 10px !important;
  }
  .as-block-body {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .as-block-body table, .as-block table {
    width: max-content !important;
    min-width: 100% !important;
  }
  .as-card, .as-group {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .as-card-head, .as-card-opts {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  /* 1i · Quota chips wrap cleanly. */
  .quota-chip-row,
  .quota-row,
  .fuse-quota-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    min-width: 0 !important;
  }
  .quota-chip {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* 1j · Modals fit the viewport. */
  .stats-modal-dialog,
  .export-dialog,
  .maxpro-scope-dlg,
  .udlg-box {
    max-height: 90dvh !important;
    max-width: min(560px, calc(100vw - 16px)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 1k · The little floating layout toggle has no purpose on mobile. */
  #layoutToggleBtn { display: none !important; }

  /* 1l · Nothing may bleed past the viewport horizontally. */
  .container, .main-grid, .sidebar, .panel,
  .results-section, .results-mode {
    max-width: 100vw !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   2 · Small phones (≤480px) — tighten spacing
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .container, #mainContent.container {
    padding: 6px 6px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .sidebar .de-header-tabs .de-tab {
    padding: 0 10px !important;
    font-size: 12px !important;
  }
  .as-block { margin-bottom: 8px !important; }
  .results-header .panel-title,
  .fuse-results-header .panel-title,
  .maxpro-results-header .panel-title {
    font-size: 14px !important;
  }
  /* Extra headroom for the sidebar internals on the smallest phones. */
  .sidebar .ss-topbar .ss-uid { font-size: 11px !important; }
  .sidebar .ss-topbar-right .hdr-btn {
    font-size: 10px !important;
    padding: 0 4px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   3 · DESKTOP (≥1025px) — strict no-op except a scroll guard.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  html, body { overflow-y: auto !important; }
  .container {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

} /* @layer total */