/* ═══════════════════════════════════════════════════════════════════
   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
   ═══════════════════════════════════════════════════════════════════ */

/* ── MaxPro: hard sticky header, single scroll context ── */
#addressModeWrap .fuse-results-scroll {
  overflow: hidden !important;
  display: flex; flex-direction: column;
}
#addrResultsTableWrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto !important;
}
/* MaxPro: guarantee the table wrapper has real height when visible */
#addressModeWrap #addrResultsTableWrap:not([hidden]) {
  display: block !important;
  flex: 1 1 auto;
  min-height: 200px;
  overflow: auto !important;
}
#addressModeWrap #addrEmptyState:not(.active) {
  display: none !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;
  }
}

/* MaxPro: UNIQUE search-term highlight — vivid magenta, distinct from
   every network/province/result/gender pill. Glowing outline so the
   user instantly recognises matched search terms. */
.maxpro-term-hl {
  background: #fbcfe8;
  color: #831843;
  border-radius: 3px;
  padding: 0 3px;
  font-weight: 800;
  box-shadow: 0 0 0 1.5px #db2777, 0 0 8px rgba(219,39,119,.55);
  text-shadow: none;
}
[data-theme="light"] .maxpro-term-hl {
  background: #f9a8d4;
  color: #500724;
  box-shadow: 0 0 0 1.5px #be185d, 0 0 6px rgba(190,24,93,.45);
}

/* ── 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; } }