@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   DESIGN SYSTEM TOKENS
   ============================================================ */
:root {
  /* Color palette — semantic, based on Tailwind v3 slate + indigo + cyan + orange */
  --c-slate-50:  #f8fafc;
  --c-slate-100: #f1f5f9;
  --c-slate-200: #e2e8f0;
  --c-slate-300: #cbd5e1;
  --c-slate-400: #94a3b8;
  --c-slate-500: #64748b;
  --c-slate-600: #475569;
  --c-slate-700: #334155;
  --c-slate-800: #1e293b;
  --c-slate-900: #0f172a;
  --c-slate-950: #020617;

  --c-indigo-50:  #eef2ff;
  --c-indigo-500: #6366f1;
  --c-indigo-600: #4f46e5;
  --c-indigo-700: #4338ca;

  --c-cyan-50:  #ecfeff;
  --c-cyan-500: #06b6d4;
  --c-cyan-600: #0891b2;
  --c-cyan-700: #0e7490;

  --c-orange-50:  #fff7ed;
  --c-orange-400: #fb923c;
  --c-orange-500: #f97316;
  --c-orange-600: #ea580c;

  --c-red-50:  #fef2f2;
  --c-red-100: #fee2e2;
  --c-red-500: #ef4444;
  --c-red-600: #dc2626;
  --c-red-700: #b91c1c;

  --c-amber-50:  #fffbeb;
  --c-amber-100: #fef3c7;
  --c-amber-500: #f59e0b;
  --c-amber-600: #d97706;

  --c-green-50:  #f0fdf4;
  --c-green-100: #dcfce7;
  --c-green-500: #22c55e;
  --c-green-600: #16a34a;
  --c-green-700: #15803d;

  /* Semantic */
  --bg:           var(--c-slate-50);
  --bg-elevated: #ffffff;
  --bg-subtle:   var(--c-slate-100);
  --fg:          var(--c-slate-900);
  --fg-muted:    var(--c-slate-500);
  --fg-subtle:   var(--c-slate-400);
  --border:      var(--c-slate-200);
  --border-strong: var(--c-slate-300);
  --primary:     var(--c-orange-500);
  --primary-fg:  #ffffff;
  --accent:      var(--c-cyan-600);
  --accent-fg:   #ffffff;
  --navy:        var(--c-slate-900);

  /* Typography scale */
  --font-sans: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', 'Courier New', monospace;
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  32px;
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;
  --lh-tight:  1.2;
  --lh-snug:   1.4;
  --lh-normal: 1.5;

  /* Spacing scale (4-based) */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* Radius */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 9999px;

  /* Shadow */
  --sh-sm: 0 1px 2px rgba(15,23,42,0.06);
  --sh-md: 0 2px 8px rgba(15,23,42,0.08);
  --sh-lg: 0 8px 24px rgba(15,23,42,0.12);
  --sh-xl: 0 20px 48px rgba(15,23,42,0.18);
  --sh-ring: 0 0 0 3px rgba(6,182,212,0.15);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ============================================================
     Industrial v3 design language (terminal-grade spreadsheet)
     Stone neutrals + single industrial-orange accent + semantic
     match-type hues. Data cells use --font-mono; chrome uses
     --font-sans. Soft `color22` pill bgs carry the match pills.
     ============================================================ */
  --i-ink:         #1E1D1A;
  --i-ink-soft:    #4A4843;
  --i-ink-mute:    #8A857B;
  --i-bg:          #ECECE8;
  --i-surface:     #FFFFFF;
  --i-grid:        #E5E4DF;
  --i-chrome:      #F5F4EF;
  --i-row-head:    #F0EFEA;
  --i-row-alt:     #FAFAF7;
  --i-delta-row:   #FFF3EE;
  --i-accent:      #FF5B14;
  --i-accent-soft: #FFE8DC;
  --i-green:       #137A3F;
  --i-green-soft:  #DCEDE2;
  --i-blue:        #2C5FD9;
  --i-blue-soft:   #DDE5F7;
  --i-amber:       #B47800;
  --i-amber-soft:  #F5EAD0;
  --i-red:         #C1321F;
  --i-red-soft:    #F5D9D2;
  --i-violet:      #6B3FA0;
  --i-violet-soft: #E5D9EE;
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  color: var(--fg);
  background: var(--bg);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--fg);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
}

code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
kbd {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-7);
  background: linear-gradient(135deg, var(--c-slate-900) 0%, var(--c-indigo-700) 60%, var(--c-cyan-700) 100%);
  color: #fff;
  box-shadow: var(--sh-md);
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.brand { display: flex; align-items: center; gap: var(--s-3); }
.logo {
  background: linear-gradient(135deg, var(--c-orange-500), var(--c-orange-600));
  color: #fff;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  font-weight: var(--fw-black);
  font-size: var(--fs-lg);
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(249,115,22,0.4);
}
.brand-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.brand-sub { font-size: var(--fs-xs); opacity: 0.75; font-weight: var(--fw-medium); }

.period-controls { display: flex; gap: var(--s-3); align-items: center; }
.period-controls label {
  display: flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  opacity: 0.95;
}
.period-controls input {
  padding: 7px 12px;
  border-radius: var(--r-sm);
  border: none;
  background: rgba(255,255,255,0.95);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  width: 130px;
  transition: box-shadow var(--dur-fast) var(--ease);
}
.period-controls input:focus {
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(249,115,22,0.35);
}
.topbar-actions { display: flex; gap: var(--s-2); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  --btn-bg:   var(--c-slate-200);
  --btn-fg:   var(--c-slate-800);
  --btn-bd:   transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: var(--sh-sm);
  transition: all var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sh-md); }
.btn:active { transform: translateY(0); box-shadow: var(--sh-sm); }
.btn:focus-visible { outline: none; box-shadow: var(--sh-ring), var(--sh-md); }

.btn-primary   { --btn-bg: linear-gradient(135deg, var(--c-orange-500), var(--c-orange-600)); --btn-fg: #fff; }
.btn-primary:hover { --btn-bg: linear-gradient(135deg, var(--c-orange-600), #c2410c); }
.btn-secondary { --btn-bg: linear-gradient(135deg, var(--c-cyan-600), var(--c-cyan-700)); --btn-fg: #fff; }
.btn-secondary:hover { --btn-bg: linear-gradient(135deg, var(--c-cyan-700), #155e75); }
.btn-success   { --btn-bg: linear-gradient(135deg, var(--c-green-500), var(--c-green-600)); --btn-fg: #fff; }
.btn-success:hover { --btn-bg: linear-gradient(135deg, var(--c-green-600), var(--c-green-700)); }
.btn-warning   { --btn-bg: linear-gradient(135deg, var(--c-amber-500), var(--c-amber-600)); --btn-fg: #fff; }
.btn-danger    { --btn-bg: linear-gradient(135deg, var(--c-red-500), var(--c-red-600)); --btn-fg: #fff; }
.btn-ghost     { --btn-bg: transparent; --btn-fg: var(--fg); --btn-bd: var(--border); box-shadow: none; }
.btn-ghost:hover { --btn-bg: var(--bg-subtle); box-shadow: var(--sh-sm); }

.btn-xs { padding: 4px 10px; font-size: var(--fs-xs); border-radius: var(--r-sm); }

/* ============================================================
   TABS
   ============================================================ */
.tabs {
  display: flex;
  gap: var(--s-1);
  background: var(--bg-elevated);
  padding: 0 var(--s-7);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  box-shadow: var(--sh-sm);
}
.tab {
  background: transparent;
  border: none;
  padding: var(--s-4) var(--s-4);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--fg-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all var(--dur-fast) var(--ease);
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.tab:hover { color: var(--fg); }
.tab.active {
  color: var(--c-cyan-600);
  border-bottom-color: var(--c-orange-500);
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container { padding: var(--s-6) var(--s-7); max-width: 100%; }
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn var(--dur-base) var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   RECO HERO — Two-ledger reconciliation overview
   Modelled on a bank-reconciliation dashboard (e.g. Dribbble
   shot #24525836): Books on the left, GSTR 2B (portal) on the
   right, signed Difference in the middle. Centre block turns
   green with a "Balanced" chip when fully reconciled.
   ============================================================ */
.reco-hero {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-6) var(--s-7);
  margin-bottom: var(--s-6);
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--dur-base) var(--ease);
  position: relative;
  overflow: hidden;
}
.reco-hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--c-cyan-500), var(--c-indigo-500), var(--c-orange-500));
  opacity: 0.85;
}
.reco-hero:hover { box-shadow: var(--sh-md); }
.reco-hero-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--s-5);
  gap: var(--s-4);
}
.reco-hero-title { display: flex; flex-direction: column; gap: var(--s-1); }
.reco-hero-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}
.reco-hero-sub {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--fg);
  letter-spacing: -0.01em;
}
.reco-hero-status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-full);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-muted);
}
.reco-hero-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-slate-400);
}
.reco-status-empty    .reco-hero-status-dot { background: var(--c-slate-400); }
.reco-status-pending  .reco-hero-status-dot { background: var(--c-amber-500); animation: recoPulse 1.6s infinite; }
.reco-status-balanced { background: var(--c-green-50); border-color: var(--c-green-500); color: var(--c-green-700); }
.reco-status-balanced .reco-hero-status-dot { background: var(--c-green-500); box-shadow: 0 0 0 3px rgba(34,197,94,0.15); }
.reco-status-minor    { background: var(--c-amber-50); border-color: var(--c-amber-500); color: var(--c-amber-600); }
.reco-status-minor    .reco-hero-status-dot { background: var(--c-amber-500); }
.reco-status-diff     { background: var(--c-red-50); border-color: var(--c-red-500); color: var(--c-red-700); }
.reco-status-diff     .reco-hero-status-dot { background: var(--c-red-500); }
@keyframes recoPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.reco-hero-body {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 0;
  align-items: stretch;
  margin-bottom: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg);
}
.reco-col {
  padding: var(--s-5) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
}
.reco-col:last-child { border-right: none; }
.reco-col-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}
.reco-col-amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  color: var(--fg);
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.reco-col-hint {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}
.reco-col-hint b { color: var(--fg); font-weight: var(--fw-semibold); }

/* Centre — the Difference column. Default is neutral; turns red/amber/green
   based on how big the signed diff is, and green with a subtle glow when the
   reco lands at zero. */
.reco-col-diff {
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-subtle) 100%);
}
.reco-col-diff.reco-diff-balanced {
  background: linear-gradient(180deg, var(--c-green-50) 0%, #e7fbe9 100%);
}
.reco-col-diff.reco-diff-balanced .reco-col-amount { color: var(--c-green-700); }
.reco-col-diff.reco-diff-positive .reco-col-amount { color: var(--c-amber-600); }
.reco-col-diff.reco-diff-negative .reco-col-amount { color: var(--c-red-600); }
.reco-progress {
  margin-top: var(--s-3);
  height: 8px;
  background: var(--bg-subtle);
  border-radius: var(--r-full);
  overflow: hidden;
}
.reco-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-cyan-500), var(--c-indigo-500));
  transition: width var(--dur-slow) var(--ease);
  border-radius: var(--r-full);
}
.reco-col-diff.reco-diff-balanced .reco-progress-fill {
  background: linear-gradient(90deg, var(--c-green-500), var(--c-green-600));
}
.reco-progress-label {
  margin-top: var(--s-1);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
}

.reco-hero-meters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-4);
}
.reco-meter {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.reco-meter-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}
.reco-meter-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--fg);
  letter-spacing: -0.02em;
}
.reco-meter-bar {
  margin-top: var(--s-1);
  height: 4px;
  background: var(--bg-subtle);
  border-radius: var(--r-full);
  overflow: hidden;
}
.reco-meter-fill {
  height: 100%;
  transition: width var(--dur-slow) var(--ease);
  border-radius: var(--r-full);
  width: 0%;
}
.reco-meter-fill-matched   { background: var(--c-green-500); }
.reco-meter-fill-onlybooks { background: var(--c-orange-500); }
.reco-meter-fill-only2b    { background: var(--c-red-500); }
.reco-meter-fill-mismatch  { background: var(--c-amber-500); }

@media (max-width: 900px) {
  .reco-hero-body { grid-template-columns: 1fr; }
  .reco-col { border-right: none; border-bottom: 1px solid var(--border); }
  .reco-col:last-child { border-bottom: none; }
  .reco-hero { padding: var(--s-5); }
}

/* ============================================================
   RESULTS STRIP — compact totals above the reconciliation grid.
   Same design language as .reco-hero but denser (one-line numbers,
   no meter bars) because it sits above a data-dense table. The
   invariant advertised in the subtitle — "Σ of diff column matches
   this" — is the whole point: it lets auditors trust the grid.
   ============================================================ */
.results-strip {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-5) var(--s-6);
  margin-bottom: var(--s-4);
  box-shadow: var(--sh-sm);
  position: relative;
  overflow: hidden;
}
.results-strip::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--c-cyan-500), var(--c-indigo-500), var(--c-orange-500));
  opacity: 0.85;
}
.results-strip-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-4);
  gap: var(--s-4);
  flex-wrap: wrap;
}
.results-strip-title-wrap { display: flex; flex-direction: column; gap: 2px; }
.results-strip-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}
.results-strip-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--fg);
  letter-spacing: -0.01em;
}
.results-strip-status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 4px var(--s-3);
  border-radius: var(--r-full);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.results-status-empty    { color: var(--fg-muted); }
.results-status-balanced { background: var(--c-green-50); border-color: var(--c-green-500); color: var(--c-green-700); }
.results-status-minor    { background: var(--c-amber-50); border-color: var(--c-amber-500); color: var(--c-amber-600); }
.results-status-diff     { background: var(--c-red-50);   border-color: var(--c-red-500);   color: var(--c-red-700); }

/* Three columns: Books | Difference | Portal. Middle column widens slightly
   because the delta is the protagonist. Same visual rhythm as .reco-hero-body. */
.results-strip-cols {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg);
}
.results-strip-col {
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
}
.results-strip-col:last-child { border-right: none; }
.results-strip-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}
.results-strip-amount {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  color: var(--fg);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.results-strip-hint {
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.results-strip-hint b { color: var(--fg); font-weight: var(--fw-semibold); }

/* The centre Difference column inherits gradient + colour-of-number cues from
   the same palette the hero uses. Green on balanced, red/amber on diff. */
.results-strip-diff {
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-subtle) 100%);
}
.results-strip-diff.results-diff-zero {
  background: linear-gradient(180deg, var(--c-green-50) 0%, #e7fbe9 100%);
}
.results-strip-diff.results-diff-zero .results-strip-amount { color: var(--c-green-700); }
.results-strip-diff.results-diff-positive .results-strip-amount { color: var(--c-amber-600); }
.results-strip-diff.results-diff-negative .results-strip-amount { color: var(--c-red-600); }

@media (max-width: 900px) {
  .results-strip-cols { grid-template-columns: 1fr; }
  .results-strip-col { border-right: none; border-bottom: 1px solid var(--border); }
  .results-strip-col:last-child { border-bottom: none; }
}

/* ============================================================
   Industrial v3 — 6-metric aggregate strip
   Terminal-style row of monospace counters below the
   Books / Diff / Portal block. Pulls values from the already-
   computed _summary memo; no extra calc in renderResultsStrip.
   ============================================================ */
.results-metrics {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-top: var(--s-3);
  border: 1px solid var(--i-grid);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--i-chrome);
}
.rm-cell {
  padding: 10px var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px solid var(--i-grid);
}
.rm-cell:last-child { border-right: none; }
.rm-k {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  color: var(--i-ink-mute);
  text-transform: uppercase;
}
.rm-v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--i-ink);
  letter-spacing: -0.01em;
}
.rm-v.rm-v-accent  { color: var(--i-accent); }
.rm-v.rm-v-green   { color: var(--i-green); }
.rm-v.rm-v-blue    { color: var(--i-blue); }
.rm-v.rm-v-amber   { color: var(--i-amber); }
.rm-v.rm-v-mute    { color: var(--i-ink-mute); }

@media (max-width: 900px) {
  .results-metrics { grid-template-columns: repeat(3, 1fr); }
  .rm-cell:nth-child(3n) { border-right: none; }
  .rm-cell:nth-child(-n+3) { border-bottom: 1px solid var(--i-grid); }
}

/* Checksum row ok/fail — used in Value Summary to surface bucket accounting
   integrity. When Σ − Diff collapses to 0.00 the row is green; otherwise red. */
.summary-table tr.vs-check-ok td {
  background: #eef9ef;
  border-top: 1px solid #c7e2c9;
  color: #15803d;
  font-weight: var(--fw-bold);
}
.summary-table tr.vs-check-fail td {
  background: #fef2f2;
  border-top: 1px solid #fecaca;
  color: #b91c1c;
  font-weight: var(--fw-bold);
}

/* ============================================================
   DASHBOARD PANEL — Unified overview surface, peer of .reco-hero
   ------------------------------------------------------------
   The stat cards no longer float in an ungrouped grid. They live
   inside a .dashboard-panel whose shell matches .reco-hero exactly
   (rounded-xl, soft shadow, 1px border, gradient accent strip at
   the top). Inside the panel the cards are grouped into semantic
   bands (Documents / Match Quality / Unmatched / CDNR) with small
   group labels — the same structural rhythm the hero uses for its
   three columns.
   ============================================================ */
.dashboard-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-6) var(--s-7) var(--s-5) var(--s-7);
  margin-bottom: var(--s-6);
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--dur-base) var(--ease);
  position: relative;
  overflow: hidden;
}
.dashboard-panel:hover { box-shadow: var(--sh-md); }
.dashboard-panel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--c-cyan-500), var(--c-indigo-500), var(--c-orange-500));
  opacity: 0.85;
}
.dashboard-panel-header { margin-bottom: var(--s-5); }
.dashboard-panel-title-wrap { display: flex; flex-direction: column; gap: var(--s-1); }
.dashboard-panel-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}
.dashboard-panel-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--fg);
  letter-spacing: -0.01em;
}

/* Semantic groups inside the panel */
.dashboard-groups {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.dashboard-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.dashboard-group-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
  padding-bottom: var(--s-1);
  border-bottom: 1px dashed var(--border);
}

/* Grid inside each group */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-3);
}
.dashboard-grid-inline { margin-bottom: 0; }

/* ============================================================
   STAT CARD — quiet cell inside the panel
   Matches .reco-col styling: plain white (or subtle wash for
   status cards), no individual accent bar, no heavy shadow.
   Color ONLY in the number, not in a coloured strip.
   ============================================================ */
.stat-card {
  background: var(--bg-elevated);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: none;
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
/* Explicit kill of any legacy ::before accents that earlier rules
   might have created via .stat-blue::before etc. */
.stat-card::before,
.stat-blue::before, .stat-green::before, .stat-teal::before,
.stat-amber::before, .stat-purple::before,
.stat-red::before, .stat-orange::before,
.stat-success::before, .stat-warning::before,
.stat-card.stat-cn::before, .stat-card.stat-dn::before {
  content: none !important;
  background: none !important;
  display: none !important;
}
.stat-card:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: var(--sh-sm);
}

/* Eyebrow label — identical treatment to .reco-col-eyebrow */
.stat-label {
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}

/* Big number — mono tabular, like .reco-col-amount */
.stat-value {
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  color: var(--fg);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin: 0;
}

/* Semantic coloring — ONLY via number text. No gradients, no strip. */
.stat-blue    .stat-value { color: var(--c-indigo-600); }
.stat-green   .stat-value { color: var(--c-green-700); }
.stat-teal    .stat-value { color: var(--c-cyan-700); }
.stat-amber   .stat-value { color: var(--c-amber-600); }
.stat-purple  .stat-value { color: #7c3aed; }
.stat-red     .stat-value { color: var(--c-red-600); }
.stat-orange  .stat-value { color: var(--c-orange-600); }
.stat-success .stat-value { color: var(--c-green-700); }
.stat-warning .stat-value { color: var(--c-amber-600); }

/* Reset any legacy gradient fills that were painted onto the whole card */
.stat-red, .stat-orange, .stat-success, .stat-warning,
.stat-card.stat-cn, .stat-card.stat-dn {
  background: var(--bg-elevated) !important;
}

/* Sub-line chips — same typography as .reco-col-hint */
.stat-card .stat-sub {
  margin-top: var(--s-1);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  display: flex;
  gap: var(--s-1);
  flex-wrap: wrap;
  line-height: 1.3;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.section {
  background: var(--bg-elevated);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-5);
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--dur-base) var(--ease);
}
.section:hover { box-shadow: var(--sh-md); }
.section h3 {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--fg);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
  letter-spacing: -0.01em;
}
.section h4 { font-size: var(--fs-md); margin: var(--s-2) 0; color: var(--fg); }
.section-tight { padding: var(--s-4) var(--s-5); }
.section-hint { color: var(--fg-muted); font-size: var(--fs-sm); margin: calc(-1 * var(--s-1)) 0 var(--s-3) 0; }

.sub-heading {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  color: #fff;
  margin: 0 0 var(--s-3) 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
}
.sub-red    { background: linear-gradient(135deg, var(--c-red-600), var(--c-red-700)); }
.sub-orange { background: linear-gradient(135deg, var(--c-orange-500), var(--c-orange-600)); }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }

/* ============================================================
   TABLES
   ============================================================ */
.mini-table, .summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
}
.mini-table th, .mini-table td,
.summary-table th, .summary-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.mini-table thead th, .summary-table thead th {
  background: linear-gradient(135deg, var(--c-slate-900), var(--c-slate-800));
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: none;
  white-space: nowrap;
}
.mini-table tbody tr, .summary-table tbody tr { transition: background var(--dur-fast) var(--ease); }
.mini-table tbody tr:hover, .summary-table tbody tr:hover { background: var(--bg-subtle); }
.mini-table .num, .summary-table .num {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
}
.mini-table .strong { font-weight: var(--fw-bold); color: var(--fg); }
.mini-table .diff-high { color: var(--c-red-600); font-weight: var(--fw-bold); }
.mini-table .diff-low  { color: var(--c-amber-600); font-weight: var(--fw-semibold); }
.mini-table .diff-zero { color: var(--c-green-600); font-weight: var(--fw-semibold); }
.summary-table tfoot td { font-weight: var(--fw-bold); background: var(--bg-subtle); }
/* Value summary structural rows (section + diff + checksum). */
.summary-table tr.vs-section td {
  background: var(--c-blue-50, #eaf1fb);
  font-weight: var(--fw-bold);
  border-top: 2px solid var(--c-blue-200, #b5c9e4);
  border-bottom: 1px solid var(--c-blue-200, #b5c9e4);
}
.summary-table tr.vs-subsection td {
  background: var(--bg-subtle, #f4f6fa);
  font-style: italic;
  color: var(--fg-muted, #555);
  border-top: 1px dashed var(--border, #d5dbe5);
}
.summary-table tr.vs-diff td {
  background: #fff4e6;
  border-top: 1px solid #f1c98a;
  border-bottom: 1px solid #f1c98a;
  font-weight: var(--fw-bold);
}
.summary-table tr.vs-checksum td {
  background: #eef9ef;
  border-top: 1px dashed #c7e2c9;
  color: #1a6d3e;
  font-style: italic;
}
.table-wrapper {
  max-height: 400px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.table-wrapper .mini-table thead th { position: sticky; top: 0; z-index: 1; }

/* ============================================================
   TOOLBAR
   ============================================================ */
.toolbar {
  background: var(--bg-elevated);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md) var(--r-md) 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
  box-shadow: var(--sh-sm);
}
.toolbar-info {
  margin-left: auto;
  display: flex;
  gap: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  font-weight: var(--fw-medium);
}
.search-box {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  min-width: 220px;
  transition: all var(--dur-fast) var(--ease);
  background: var(--bg-elevated);
}
.search-box:focus { outline: none; border-color: var(--accent); box-shadow: var(--sh-ring); }

.grid-container {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--r-md) var(--r-md);
  overflow: hidden;
  height: calc(100vh - 280px);
  min-height: 400px;
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
}

/* ============================================================
   DROPZONE
   ============================================================ */
.dropzone {
  border: 2px dashed var(--border-strong);
  background: linear-gradient(135deg, var(--bg-elevated), var(--bg-subtle));
  padding: var(--s-4);
  text-align: center;
  color: var(--fg-muted);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  border-bottom: none;
  transition: all var(--dur-base) var(--ease);
  cursor: pointer;
}
.dropzone:hover { border-color: var(--accent); color: var(--accent); background: var(--c-cyan-50); }
.dropzone.drag-over {
  background: linear-gradient(135deg, var(--c-orange-50), var(--c-amber-50));
  border-color: var(--c-orange-500);
  color: var(--c-orange-600);
  transform: scale(1.005);
}

/* ============================================================
   LEGEND
   ============================================================ */
.legend {
  display: flex;
  gap: var(--s-5);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-top: var(--s-3);
  flex-wrap: wrap;
  box-shadow: var(--sh-sm);
}
.legend.mini-legend { margin-top: var(--s-2); padding: var(--s-2) var(--s-3); font-size: var(--fs-xs); }
.legend-item { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.swatch { width: 18px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.08); }
.swatch.green  { background: var(--c-green-100); }
.swatch.blue   { background: #bfdbfe; }
.swatch.amber  { background: var(--c-amber-100); }
.swatch.purple { background: #e9d5ff; }
.swatch.red    { background: var(--c-red-100); }
.swatch.orange { background: var(--c-orange-50); }

/* ============================================================
   MATCH THE FOLLOWING
   ============================================================ */
.match-intro {
  background: linear-gradient(135deg, var(--c-indigo-50), var(--bg-elevated));
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-4);
  border-left: 4px solid var(--c-cyan-600);
  border: 1px solid var(--border);
  border-left: 4px solid var(--c-cyan-600);
}
.match-intro h3 { margin: 0 0 var(--s-1) 0; color: var(--fg); }
.match-intro p { margin: 0; font-size: var(--fs-sm); color: var(--fg-muted); }

.match-toolbar {
  background: var(--bg-elevated);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  margin-bottom: var(--s-4);
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
}

.match-panels {
  display: grid;
  grid-template-columns: 1fr 240px 1fr;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.match-panel {
  background: var(--bg-elevated);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}
.match-panel-header {
  padding: var(--s-3) var(--s-4);
  background: linear-gradient(135deg, var(--c-cyan-600), var(--c-cyan-700));
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
}
.match-panel-header h4 { margin: 0; font-size: var(--fs-sm); color: #fff; font-weight: var(--fw-bold); }
.match-panel-header input {
  padding: 5px 10px;
  border: none;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  width: 140px;
  font-family: var(--font-sans);
}
.match-list { max-height: 500px; overflow-y: auto; }
.match-item {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
  font-size: var(--fs-sm);
}
.match-item:hover { background: var(--bg-subtle); }
.match-item.selected { background: var(--c-amber-100); border-left: 3px solid var(--c-orange-500); padding-left: calc(var(--s-4) - 3px); }
.match-item.suggested { background: var(--c-cyan-50); border-left: 3px solid var(--c-cyan-600); padding-left: calc(var(--s-4) - 3px); }
.match-item .mi-row1 { font-weight: var(--fw-bold); color: var(--fg); margin-bottom: var(--s-1); }
.match-item .mi-row2 { color: var(--fg-muted); font-size: var(--fs-xs); }
.match-item .mi-amount { float: right; font-family: var(--font-mono); color: var(--fg); }

.match-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
}
.selected-box {
  background: var(--bg-elevated);
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: var(--s-3);
  width: 100%;
  text-align: center;
  min-height: 80px;
}
.selected-box.has-value { border-style: solid; border-color: var(--c-cyan-600); background: var(--c-cyan-50); }
.sel-title { font-size: var(--fs-xs); color: var(--fg-muted); text-transform: uppercase; font-weight: var(--fw-bold); letter-spacing: 0.05em; margin-bottom: var(--s-1); }
.sel-details { font-size: var(--fs-sm); color: var(--fg); }
.link-arrow { font-size: var(--fs-3xl); color: var(--c-orange-500); font-weight: var(--fw-black); }

/* ============================================================
   SETTINGS
   ============================================================ */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-3);
}
.settings-grid label {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  background: var(--bg-subtle);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.settings-grid span { font-weight: var(--fw-semibold); color: var(--fg); font-size: var(--fs-sm); }
.settings-grid input {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  background: var(--bg-elevated);
}
.settings-grid small { color: var(--fg-muted); font-size: var(--fs-xs); }
.help { color: var(--fg-muted); font-size: var(--fs-sm); margin: 0 0 var(--s-2) 0; }
.feature-list { list-style: none; padding: 0; margin: 0; }
.feature-list li { padding: var(--s-1) 0; color: var(--fg); font-size: var(--fs-sm); }

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed;
  bottom: var(--s-6);
  right: var(--s-6);
  background: var(--c-slate-900);
  color: #fff;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-md);
  box-shadow: var(--sh-xl);
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--dur-slow) var(--ease);
  z-index: 4000;
  min-width: 280px;
  max-width: 420px;
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  backdrop-filter: blur(8px);
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.success { background: linear-gradient(135deg, var(--c-green-600), var(--c-green-700)); }
.toast.error   { background: linear-gradient(135deg, var(--c-red-600), var(--c-red-700)); }
.toast.warning { background: linear-gradient(135deg, var(--c-amber-500), var(--c-amber-600)); }

/* ============================================================
   JSPREADSHEET OVERRIDES — Industrial v3
   Terminal-grade sheet: mono type for data, sans chrome headers,
   stone row-head, orange selection outline, peach delta rows.
   ============================================================ */
.jexcel, .jexcel_container { font-family: var(--font-sans) !important; background: var(--i-surface) !important; }

/* Column headers — inverted black bar with uppercase tracking */
.jexcel thead td {
  background: var(--i-ink) !important;
  color: #fff !important;
  font-family: var(--font-sans) !important;
  font-weight: var(--fw-bold);
  font-size: 10px !important;
  padding: 8px 10px !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: 1px solid var(--i-ink) !important;
}

/* Row-number gutter — stone chrome, mono, right-aligned */
.jexcel tbody tr > td.jexcel_row,
.jexcel tbody td:first-child {
  background: var(--i-row-head) !important;
  color: var(--i-ink-mute) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: var(--fw-semibold);
  text-align: center !important;
  border-right: 1px solid var(--i-grid) !important;
}

/* Data cells — mono, compact, tabular nums, stone grid lines */
.jexcel tbody td {
  font-family: var(--font-mono) !important;
  font-size: 12px;
  color: var(--i-ink);
  padding: 6px 10px !important;
  border-right: 1px solid var(--i-grid) !important;
  border-bottom: 1px solid var(--i-grid) !important;
  font-variant-numeric: tabular-nums;
}

/* Alternating row stripe (industrial `#FAFAF7`). Match-type/delta
   overrides below take precedence via higher specificity or !important. */
.jexcel tbody tr:nth-child(even) > td { background: var(--i-row-alt); }
.jexcel tbody tr:nth-child(odd)  > td { background: var(--i-surface); }

/* Selected row — accent-soft peach fill + orange left border */
.jexcel tbody tr.selected > td,
.jexcel tbody tr.selected > td:first-child {
  background: var(--i-accent-soft) !important;
}
.jexcel tbody tr.selected > td:first-child {
  box-shadow: inset 3px 0 0 var(--i-accent);
  color: var(--i-ink) !important;
}

/* Selected cell — orange outline (jspreadsheet highlight) */
.jexcel tbody td.highlight {
  box-shadow: inset 0 0 0 2px var(--i-accent) !important;
}

/* ------------------------------------------------------------
   Match-type pill on the "Match Type" column.
   Selector walks past the row-header td (:first-child) to the
   first real data column which carries the badge text.

   NOTE: Do NOT add padding to `.dt-cell` — frappe sizes columns by
   setting an inline width on `.dt-cell__content`, while the cell
   itself has `box-sizing: border-box`. Any padding here inflates
   the cell width beyond the configured column width and pushes
   every subsequent column out of sync with the header.
   ------------------------------------------------------------ */
.dt-row[data-match-type] .dt-cell[data-col-index="1"] {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}
.dt-row[data-match-type] .dt-cell[data-col-index="1"] .dt-cell__content {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
}
.dt-row[data-match-type="Exact"]         .dt-cell[data-col-index="1"] { background: var(--i-green-soft)  !important; color: var(--i-green); }
.dt-row[data-match-type="Cleaned"]       .dt-cell[data-col-index="1"] { background: var(--i-blue-soft)   !important; color: var(--i-blue); }
.dt-row[data-match-type^="Partial"]      .dt-cell[data-col-index="1"] { background: var(--i-amber-soft)  !important; color: var(--i-amber); }
.dt-row[data-match-type="Manual"]        .dt-cell[data-col-index="1"] { background: var(--i-violet-soft) !important; color: var(--i-violet); }
.dt-row[data-match-type="Only in 2B"]    .dt-cell[data-col-index="1"] { background: var(--i-green-soft)  !important; color: var(--i-green); }
.dt-row[data-match-type="Only in Books"] .dt-cell[data-col-index="1"] { background: #FFE1D2              !important; color: var(--i-accent); }

/* Special override for Only in 2B Credit Notes — these are REVERSAL risks, so they stay red */
.dt-row[data-match-type="Only in 2B"][data-doc-type="CN"] .dt-cell[data-col-index="1"] {
  background: var(--i-red-soft) !important;
  color: var(--i-red) !important;
}

/* ------------------------------------------------------------
   Row tinting — semantic washes for unmatched rows.
   These override the stripe; peach delta highlight below
   applies only to matched rows with a non-zero totalDiff.
   ------------------------------------------------------------ */
.dt-row[data-match-type="Only in 2B"] .dt-cell {
  background: #EDF7F1 !important; /* Soft green wash */
}
.dt-row[data-match-type="Only in 2B"][data-doc-type="CN"] .dt-cell {
  background: #FBEFEC !important; /* Soft red wash for CN risk */
}
.dt-row[data-match-type="Only in Books"] .dt-cell {
  background: #FFF1E7 !important;
}

/* Peach delta-row highlight — for matched rows that carry a diff.
   Only-in-* rows get their own wash above; guard against both. */
.dt-row[data-has-diff="1"]:not([data-match-type="Only in 2B"]):not([data-match-type="Only in Books"]) .dt-cell {
  background: var(--i-delta-row) !important;
}

/* Match-type pill preserves its own background even on tinted rows */
.dt-row[data-has-diff="1"][data-match-type="Exact"]    .dt-cell[data-col-index="1"],
.dt-row[data-has-diff="1"][data-match-type="Cleaned"]  .dt-cell[data-col-index="1"],
.dt-row[data-has-diff="1"][data-match-type^="Partial"] .dt-cell[data-col-index="1"],
.dt-row[data-has-diff="1"][data-match-type="Manual"]   .dt-cell[data-col-index="1"] {
  /* pill colors already set by the .dt-row[data-match-type] rules above */
}

/* Newly added row pulse */
.dt-row.row-new .dt-cell {
  background: var(--c-green-100) !important;
  animation: pulse-new 1.4s ease-in-out 2;
}
@keyframes pulse-new {
  0%, 100% { background: var(--c-green-100) !important; }
  50%      { background: #86efac !important; }
}
.dt-row.row-unmatched .dt-cell { background: var(--c-red-50)    !important; }
.dt-row.row-mismatch  .dt-cell { background: var(--c-amber-50)  !important; }

/* ============================================================
   CONFIDENCE BADGES
   ============================================================ */
.conf-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  min-width: 48px;
  text-align: center;
  cursor: help;
  font-variant-numeric: tabular-nums;
}
.conf-high { background: var(--c-green-100); color: var(--c-green-700); border: 1px solid var(--c-green-500); }
.conf-med  { background: var(--c-amber-100); color: var(--c-amber-600); border: 1px solid var(--c-amber-500); }
.conf-low  { background: var(--c-red-100);   color: var(--c-red-700);   border: 1px solid var(--c-red-500); }

/* ============================================================
   STATUS BADGES
   ============================================================ */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: 0.03em;
}
.badge-green { background: var(--c-green-100); color: var(--c-green-700); }
.badge-red   { background: var(--c-red-100);   color: var(--c-red-700); }

/* ============================================================
   GSTIN SUMMARY
   ============================================================ */
.kpi-box {
  background: var(--bg-elevated);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-4);
  box-shadow: var(--sh-sm);
  border: 1px solid var(--border);
}
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-3);
}
.kpi {
  background: linear-gradient(135deg, var(--bg-elevated), var(--bg-subtle));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  transition: transform var(--dur-fast) var(--ease);
}
.kpi:hover { transform: translateY(-1px); box-shadow: var(--sh-md); }
.kpi-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
}
.kpi-val {
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.kpi-ok    { border-left: 4px solid var(--c-green-500); }
.kpi-ok .kpi-val { color: var(--c-green-700); }
.kpi-warn  { border-left: 4px solid var(--c-amber-500); }
.kpi-warn .kpi-val { color: var(--c-amber-600); }
.kpi-alert { border-left: 4px solid var(--c-red-500); }
.kpi-alert .kpi-val { color: var(--c-red-600); }

.gstin-tw { max-height: calc(100vh - 360px); border-radius: var(--r-md); }
.gstin-table { border-collapse: separate; border-spacing: 0; }
.gstin-table thead tr:first-child th {
  background: linear-gradient(135deg, var(--c-slate-900), var(--c-slate-800));
  color: #fff;
  padding: 8px 10px;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  border-right: 1px solid rgba(255,255,255,0.08);
  position: sticky; top: 0; z-index: 2;
}
.gstin-table thead tr:nth-child(2) th.sub-col {
  background: var(--c-slate-700);
  color: var(--c-slate-200);
  padding: 4px 10px;
  font-size: 10px;
  text-transform: none;
  border: none;
  border-right: 1px solid rgba(255,255,255,0.08);
  position: sticky; top: 30px; z-index: 2;
  font-weight: var(--fw-semibold);
}
.gstin-table thead th.grp-2b { background: linear-gradient(135deg, var(--c-slate-900), var(--c-indigo-700)) !important; }
.gstin-table thead th.grp-pr { background: linear-gradient(135deg, var(--c-indigo-700), var(--c-cyan-700)) !important; }
.gstin-table tbody td {
  padding: 8px 10px;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.gstin-table tbody tr:nth-child(even) { background: var(--bg-subtle); }
.gstin-table tbody tr:hover { background: var(--c-indigo-50) !important; }

.gstin-code {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  background: var(--bg-subtle);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  letter-spacing: 0.03em;
  color: var(--c-slate-800);
  border: 1px solid var(--border);
}
.supplier-cell { display: flex; flex-direction: column; gap: 2px; max-width: 200px; }
.supplier-name { font-weight: var(--fw-semibold); color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.name-warn { font-size: 10px; color: var(--c-amber-600); cursor: help; font-weight: var(--fw-semibold); }

.match-bar {
  position: relative;
  height: 22px;
  background: var(--bg-subtle);
  border-radius: var(--r-full);
  overflow: hidden;
  min-width: 70px;
  border: 1px solid var(--border);
}
.match-bar-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  border-radius: var(--r-full);
  transition: width var(--dur-slow) var(--ease);
}
.bar-ok   { background: linear-gradient(90deg, #34d399, var(--c-green-600)); }
.bar-warn { background: linear-gradient(90deg, #fbbf24, var(--c-amber-600)); }
.bar-bad  { background: linear-gradient(90deg, #f87171, var(--c-red-600)); }
.match-bar-txt {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--fg);
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

.mini-counts { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.mini-count {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
}
.mc-red    { background: var(--c-red-100);    color: var(--c-red-700); }
.mc-orange { background: var(--c-orange-50);  color: var(--c-orange-600); }
.mc-amber  { background: var(--c-amber-100);  color: var(--c-amber-600); }
.mc-green  { background: var(--c-green-100);  color: var(--c-green-700); }
.actions-cell { white-space: nowrap; }

/* ============================================================
   SAVED RECO CARDS
   ============================================================ */
.saved-recos-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-3);
}
.saved-reco-card {
  background: linear-gradient(135deg, var(--bg-elevated), var(--bg-subtle));
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  transition: all var(--dur-base) var(--ease);
}
.saved-reco-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  border-color: var(--c-cyan-600);
}
.sr-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s-2); }
.sr-name { font-weight: var(--fw-bold); color: var(--fg); font-size: var(--fs-md); }
.sr-date { font-size: 10px; color: var(--fg-muted); }
.sr-meta { font-size: var(--fs-xs); color: var(--fg-muted); margin-bottom: var(--s-2); line-height: 1.5; }
.sr-actions { display: flex; gap: var(--s-1); flex-wrap: wrap; }
.empty-hint { color: var(--fg-muted); padding: var(--s-5); text-align: center; font-style: italic; }

/* ============================================================
   COLUMN FILTERS (Excel-like)
   ============================================================ */
.col-filter-badges {
  display: flex;
  gap: var(--s-1);
  flex-wrap: wrap;
  padding: var(--s-1) 0;
}
.col-filter-badge {
  background: var(--c-amber-100);
  color: var(--c-amber-600);
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  border: 1px solid var(--c-amber-500);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.col-filter-badge span {
  cursor: pointer;
  background: var(--c-amber-600);
  color: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}
.col-filter-badge span:hover { background: var(--c-red-500); }

.col-filter-picker {
  display: none;
  background: var(--bg-elevated);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  margin-bottom: var(--s-2);
}
.col-filter-picker.show { display: block; }
.cfp-title { font-weight: var(--fw-bold); color: var(--fg); margin-bottom: var(--s-2); font-size: var(--fs-sm); }
.cfp-options { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.cfp-options .btn { font-size: var(--fs-xs); padding: 4px 10px; }

.col-filter-panel {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  width: 420px;
  max-height: 520px;
  z-index: 3000;
  padding: var(--s-4);
}
.col-filter-panel.show { display: flex; flex-direction: column; gap: var(--s-3); }
.cf-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--fg);
  font-size: var(--fs-md);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--s-2);
  font-weight: var(--fw-bold);
}
.cf-close {
  cursor: pointer;
  background: var(--bg-subtle);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
}
.cf-close:hover { background: var(--c-red-500); color: #fff; }
.cf-search {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
}
.cf-actions { display: flex; gap: var(--s-1); }
.cf-options {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--s-1);
}
.cf-opt {
  display: block;
  padding: 4px 8px;
  font-size: var(--fs-sm);
  cursor: pointer;
  border-radius: var(--r-sm);
}
.cf-opt:hover { background: var(--bg-subtle); }
.cf-opt input { margin-right: var(--s-1); }
.cf-count { color: var(--fg-muted); font-size: var(--fs-xs); }
.cf-footer {
  display: flex;
  gap: var(--s-1);
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  padding-top: var(--s-2);
}

/* ============================================================
   MODALS
   ============================================================ */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(6px);
  z-index: 5000;
  align-items: center;
  justify-content: center;
  animation: fadeIn var(--dur-base) var(--ease);
}
.modal.show { display: flex; }
.modal-box {
  background: var(--bg-elevated);
  border-radius: var(--r-xl);
  width: 640px;
  max-width: 96vw;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sh-xl);
  animation: slideUp var(--dur-slow) var(--ease);
}
.modal-box-lg { width: 960px; }
.modal-box-xl { width: 1100px; }
@keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.modal-head {
  padding: var(--s-4) var(--s-5);
  background: linear-gradient(135deg, var(--c-slate-900), var(--c-cyan-700));
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-head h3 { margin: 0; color: #fff; font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.modal-close {
  cursor: pointer;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  transition: background var(--dur-fast) var(--ease);
  color: #fff;
}
.modal-close .ico { width: 16px; height: 16px; vertical-align: 0; }
.modal-close:hover { background: var(--c-red-500); }
.modal-body {
  padding: var(--s-5);
  overflow-y: auto;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  flex: 1;
}
.modal-body h4 { margin: var(--s-4) 0 var(--s-1) 0; color: var(--fg); font-size: var(--fs-md); font-weight: var(--fw-bold); }
.modal-body code { background: var(--bg-subtle); padding: 2px 8px; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: var(--fs-xs); }
.modal-footer {
  display: flex;
  gap: var(--s-2);
  justify-content: flex-end;
  margin-top: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--border);
}
.warning-note {
  background: var(--c-amber-50);
  border-left: 4px solid var(--c-amber-500);
  padding: var(--s-3) var(--s-4);
  margin-top: var(--s-4);
  border-radius: var(--r-sm);
  color: var(--c-amber-600);
  font-weight: var(--fw-semibold);
}

/* ============================================================
   PASTE FROM EXCEL MODAL
   ============================================================ */
.paste-instructions {
  background: var(--c-cyan-50);
  border-left: 4px solid var(--c-cyan-600);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  margin-bottom: var(--s-3);
  font-size: var(--fs-sm);
}
.paste-instructions b { color: var(--c-cyan-700); }
.paste-instructions small { color: var(--fg-muted); display: block; margin-top: var(--s-2); }

.paste-textarea {
  width: 100%;
  min-height: 160px;
  max-height: 260px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  padding: var(--s-3);
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  resize: vertical;
  transition: all var(--dur-fast) var(--ease);
  line-height: var(--lh-snug);
  white-space: pre;
  overflow: auto;
}
.paste-textarea:focus {
  outline: none;
  border-color: var(--c-cyan-600);
  background: var(--bg-elevated);
  box-shadow: var(--sh-ring);
}

.paste-options {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin: var(--s-3) 0;
  padding: var(--s-3);
  background: var(--bg-subtle);
  border-radius: var(--r-sm);
}
.paste-options label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
}

.paste-summary {
  padding: var(--s-2) var(--s-3);
  background: var(--c-green-50);
  color: var(--c-green-700);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  margin-bottom: var(--s-2);
  font-weight: var(--fw-medium);
}
.paste-summary:empty { display: none; }

.paste-preview-wrapper {
  max-height: 280px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
}
.paste-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
}
.paste-preview-table th, .paste-preview-table td {
  padding: 6px 10px;
  border: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.paste-preview-table thead th {
  background: var(--c-slate-800);
  color: #fff;
  font-weight: var(--fw-bold);
  position: sticky; top: 0; z-index: 1;
}
.paste-preview-table thead th.col-mapped { background: linear-gradient(135deg, var(--c-green-600), var(--c-green-700)); }
.paste-preview-table thead th.col-unmapped { background: var(--c-slate-500); opacity: 0.7; }
.paste-preview-table tbody tr:nth-child(even) { background: var(--bg-subtle); }

/* ============================================================
   SCROLLBARS
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-subtle); }
::-webkit-scrollbar-thumb {
  background: var(--c-slate-300);
  border-radius: var(--r-full);
  border: 2px solid var(--bg-subtle);
}
::-webkit-scrollbar-thumb:hover { background: var(--c-slate-400); }

/* ============================================================
   FOCUS
   ============================================================ */
*:focus-visible { outline: 2px solid var(--c-cyan-600); outline-offset: 2px; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--c-cyan-600);
  box-shadow: var(--sh-ring);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .topbar { flex-direction: column; gap: var(--s-2); }
  .period-controls { flex-wrap: wrap; justify-content: center; }
  .match-panels { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
  .two-col { grid-template-columns: 1fr; }
  .container { padding: var(--s-4); }
}

/* ============================================================
   MODERN REFINEMENT LAYER
   Mature, SaaS-grade polish: tighter typography rhythm, calmer
   borders, focus affordance, smooth scroll, doc-type badges.
   ============================================================ */

/* Calmer page chrome — less gradient saturation, more confident shadows */
:root {
  --sh-sm-plus: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --sh-md-plus: 0 2px 4px rgba(15,23,42,.04), 0 6px 16px rgba(15,23,42,.06);
  --ring: 0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent);
}

html, body { scroll-behavior: smooth; }
body { font-feature-settings: 'cv11','ss01','ss03'; letter-spacing: -0.005em; }

/* Monospaced numbers everywhere numbers matter — columns line up */
.num, td.num, th.num,
.jexcel td[data-type="numeric"],
.kpi-num, .stat-card .num,
.summary-table td, .mini-table td.num,
.conf-badge { font-variant-numeric: tabular-nums; }

/* Softer section borders, a little more breathing room */
.section {
  box-shadow: var(--sh-sm-plus);
  border-color: color-mix(in srgb, var(--border) 90%, transparent);
}
.section + .section { margin-top: var(--s-4); }

/* Tabs — refined active treatment (thin bottom rail, not a heavy bar) */
.tab {
  position: relative;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.tab::after {
  content: "";
  position: absolute;
  left: var(--s-3); right: var(--s-3); bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: transparent;
  transition: background var(--dur-fast) var(--ease);
}
.tab.active::after { background: var(--primary); }
.tab:hover:not(.active) { background: color-mix(in srgb, var(--bg-subtle) 70%, transparent); }

/* KPI / stat cards — motion-only transition. Shadow and transform for
   hover are defined inside the DASHBOARD PANEL block earlier in this
   file so that the in-panel cells stay visually quiet (no big lift). */
.stat-card {
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

/* Buttons — subtle press/hover motion; visible focus ring */
.btn {
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.btn:hover  { transform: translateY(-1px); box-shadow: var(--sh-sm-plus); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

/* Inputs / selects — quieter baseline, strong focus */
input, select, textarea, .search-box {
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
input:focus-visible, select:focus-visible, textarea:focus-visible, .search-box:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
}

/* Tables — subtler dividers, denser but legible */
.summary-table th, .mini-table th, .gstin-table th {
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.summary-table td, .mini-table td, .gstin-table td {
  border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}
tbody tr { transition: background-color var(--dur-fast) var(--ease); }
tbody tr:hover { background: color-mix(in srgb, var(--bg-subtle) 60%, transparent); }

/* Tab-content focus — when the user clicks/tabs into a panel, no chunky outline */
.tab-content:focus { outline: none; }
.tab-content:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 40%, transparent); border-radius: var(--r-sm); }

/* Modal backdrop — depth via subtle blur */
.modal.show, .modal.active {
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  background: color-mix(in srgb, var(--c-slate-950) 40%, transparent);
}
.modal-box {
  box-shadow: 0 12px 40px rgba(15,23,42,.22), 0 2px 8px rgba(15,23,42,.08);
  animation: modalIn 160ms var(--ease);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(4px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ------------------------------------------------------------
   Doc-type badges (INV / CN / DN)
   CN = ITC reversal → red-amber; DN = positive → blue;
   INV = neutral indigo/slate.
   ------------------------------------------------------------ */
.doc-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  line-height: 1.5;
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
}
.doc-inv { background: var(--c-slate-100);  color: var(--c-slate-700); border-color: var(--c-slate-200); }
.doc-cn  { background: var(--c-red-50);     color: var(--c-red-700);   border-color: var(--c-red-100); }
.doc-dn  { background: #eff6ff;             color: #1d4ed8;            border-color: #dbeafe; }

/* Style the Doc cell inside the frappe results grid (col-index 2 in frappe,
   since col-index 0 is the serial column and 1 is Match Type). data-doc-type
   is set by the virtual-scroll MutationObserver in initGrids. */
#grid-results .dt-row .dt-cell[data-col-index="2"] {
  text-align: center;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#grid-results .dt-row .dt-cell[data-col-index="2"][data-doc-type="CN"]  { background: var(--c-red-50);    color: var(--c-red-700); }
#grid-results .dt-row .dt-cell[data-col-index="2"][data-doc-type="DN"]  { background: #eff6ff;           color: #1d4ed8; }
#grid-results .dt-row .dt-cell[data-col-index="2"][data-doc-type="INV"] { background: var(--c-slate-50); color: var(--c-slate-600); }

/* ------------------------------------------------------------
   Scroll regions — visible, modern scrollbars (WebKit)
   ------------------------------------------------------------ */
.tab-content, .modal-body, .table-wrapper, .grid-container, .dt-scrollable {
  scroll-behavior: smooth;
}
.tab-content::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.table-wrapper::-webkit-scrollbar,
.dt-scrollable::-webkit-scrollbar { width: 10px; height: 10px; }
.tab-content::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.table-wrapper::-webkit-scrollbar-thumb,
.dt-scrollable::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--c-slate-400) 45%, transparent);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.tab-content::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.table-wrapper::-webkit-scrollbar-thumb:hover,
.dt-scrollable::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--c-slate-500) 60%, transparent);
  background-clip: padding-box;
}
.tab-content::-webkit-scrollbar-track,
.dt-scrollable::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------
   Top bar — keep the confident gradient, but calmer saturation
   ------------------------------------------------------------ */
.topbar {
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--c-indigo-600) 75%, #000) 0%, transparent 55%),
    linear-gradient(135deg, var(--c-slate-900) 0%, var(--c-slate-800) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.02) inset, 0 8px 24px rgba(15,23,42,.18);
}

/* Toast — refined drop-shadow, slight blur */
.toast {
  box-shadow: 0 10px 30px rgba(15,23,42,.22), 0 2px 6px rgba(15,23,42,.08);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}

/* Confidence badges — tabular numerics + subtle outline */
.conf-badge {
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  letter-spacing: 0;
}

/* ============================================================
   POLISH PASS 2 — icons, button scale, layout rhythm
   ============================================================ */

/* ---- SVG icon base ----
   Inline sprite-driven icons. Use <svg class="ico"><use href="#ico-..."/></svg>
   or the JS helper window.ico(name). */
.ico {
  width: 16px;
  height: 16px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -3px;
  pointer-events: none;
}
.ico-lg { width: 20px; height: 20px; vertical-align: -5px; }
.ico-sm { width: 14px; height: 14px; vertical-align: -2px; }

/* Tabs: give icon + text a tight gap */
.tab { display: inline-flex; align-items: center; gap: 8px; }
.tab .ico { width: 16px; height: 16px; opacity: 0.9; }
.tab.active .ico { opacity: 1; }

/* Buttons carry icons at the same size */
.btn .ico { width: 16px; height: 16px; }
.btn-xs .ico { width: 13px; height: 13px; }

/* ---- Button scale — critique fix: primary was 12px ----
   Baseline readable at 14px; primary/hero at 15px. */
.btn {
  font-size: 14px;
  padding: 9px 14px;
  border-radius: 8px;
  gap: 8px;
}
.btn-primary,
.topbar .btn-primary {
  font-size: 15px;
  padding: 10px 18px;
  font-weight: 700;
}
.btn-xs { font-size: 12px; padding: 4px 10px; }

/* Ghost variants for secondary confirmatory actions */
.btn-ghost-success {
  --btn-bg: transparent;
  --btn-fg: var(--c-green-700);
  --btn-bd: color-mix(in srgb, var(--c-green-500) 35%, var(--border));
  box-shadow: none;
}
.btn-ghost-success:hover {
  --btn-bg: var(--c-green-50);
  --btn-bd: var(--c-green-500);
}
.btn-ghost-subtle {
  --btn-bg: transparent;
  --btn-fg: var(--fg-muted);
  --btn-bd: var(--border);
  box-shadow: none;
}
.btn-ghost-subtle:hover {
  --btn-bg: var(--bg-subtle);
  --btn-fg: var(--fg);
}

/* ---- Dashboard: retired earlier stand-alone grid rhythm ----
   The dashboard now lives inside .dashboard-panel (see the "DASHBOARD
   PANEL" block earlier in this file). The old rules here used to give
   each .stat-card its own rounded-xl shell, soft shadow, and a 3px
   top accent bar — which worked against the panel's single-surface
   cohesion. Those rules have been removed in favour of the quieter
   in-panel cell treatment. Keep .stat-label / .stat-value typography
   overrides below since they harmonise with the hero's numeric line. */
.stat-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  margin-bottom: var(--s-2);
}
.stat-value {
  /* Keep the mono numeric treatment from the base rule; this override only
     tightens the display size to harmonise with the hero's 3xl amount. */
  font-size: 28px;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

/* ---- Topbar: remove the "G2B" pill and make the subtitle a live status strip ---- */
.brand { gap: 2px; flex-direction: column; align-items: flex-start; }
.brand-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.brand-sub {
  font-size: 12px;
  opacity: 0.72;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  display: flex;
  gap: 10px;
  align-items: center;
}
.brand-sub .dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}
.topbar-actions { gap: 8px; align-items: center; }
.topbar-actions .overflow-menu { position: relative; }
.topbar-actions .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.topbar-actions .icon-btn:hover { background: rgba(255,255,255,0.14); }
.overflow-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(15,23,42,.20);
  min-width: 180px;
  padding: 4px;
  z-index: 200;
}
.overflow-menu.show .overflow-dropdown { display: block; }
.overflow-dropdown button {
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  color: var(--fg);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.overflow-dropdown button:hover { background: var(--bg-subtle); }
.overflow-dropdown button.danger { color: var(--c-red-600); }
.overflow-dropdown button.danger:hover { background: var(--c-red-50); }

/* ---- Match & AI: quieter manual-linking panels ----
   Replace the saturated teal/cyan headers with white + top color rail. */
.match-panel {
  border: 1px solid var(--border);
  border-top: 3px solid var(--c-cyan-600);
}
.match-panel:nth-child(3) { border-top-color: var(--c-orange-500); }
.match-panel-header {
  background: var(--bg-elevated) !important;
  color: var(--fg) !important;
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
}
.match-panel-header h4 { color: var(--fg) !important; font-size: 13px; font-weight: 700; letter-spacing: 0.01em; }
.match-panel-header input {
  border: 1px solid var(--border) !important;
  background: var(--bg-elevated) !important;
  color: var(--fg);
  padding: 6px 10px !important;
}

/* ---- Match & AI: the "Selected" slot needs to read as a slot, not a blank ---- */
.match-center { gap: 14px; }
.selected-box {
  border: 2px dashed color-mix(in srgb, var(--c-cyan-600) 45%, var(--border));
  background: color-mix(in srgb, var(--c-cyan-50) 55%, #fff);
  padding: 14px;
  min-height: 96px;
  position: relative;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.selected-box::before {
  content: attr(data-slot-label);
  position: absolute;
  top: -9px; left: 12px;
  background: var(--bg-elevated);
  padding: 0 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  text-transform: uppercase;
}
.selected-box.has-value {
  border-style: solid;
  border-color: var(--c-cyan-600);
  background: var(--c-cyan-50);
}
.selected-box.waiting {
  animation: slotPulse 1.6s ease-in-out infinite;
}
@keyframes slotPulse {
  0%, 100% { border-color: color-mix(in srgb, var(--c-cyan-600) 45%, var(--border)); }
  50%      { border-color: var(--c-cyan-500); }
}
.sel-title { display: none; }  /* replaced by data-slot-label floating chip */
.link-arrow .ico { width: 24px; height: 24px; color: var(--fg-muted); }

/* ---- GSTIN Summary: flatten heavy gradient header ---- */
.gstin-table thead tr:first-child th {
  background: var(--c-slate-50) !important;
  color: var(--c-slate-700) !important;
  font-size: 11px;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
  border-right-color: var(--border);
  font-weight: 700;
}
.gstin-table thead tr:nth-child(2) th.sub-col {
  background: #fff !important;
  color: var(--fg-muted) !important;
  border-right-color: var(--border);
  border-bottom: 1px solid var(--border);
  top: 30px;
}
.gstin-table thead th.grp-2b,
.gstin-table thead th.grp-pr {
  background: var(--c-slate-50) !important;
  color: var(--c-slate-700) !important;
}

/* Also flatten the small recap tables' dark header */
.mini-table thead th, .summary-table thead th {
  background: var(--c-slate-50) !important;
  color: var(--c-slate-700) !important;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
}

/* Paste preview can stay darker — it's a modal and needs contrast */
.paste-preview-table thead th { background: var(--c-slate-800) !important; color: #fff !important; }

/* ---- Settings: normalize help text under every input ---- */
.settings-grid label { gap: 6px; padding: 14px 16px; }
.settings-grid small {
  color: var(--fg-muted);
  font-size: 12px;
  line-height: 1.4;
  display: block;
}
.settings-grid small:empty::before { content: " "; white-space: pre; }  /* reserve line */

/* ---- Toolbar filter dropdown: visible row count + keyboard hint ---- */
.toolbar .btn .ico { margin-right: 2px; }

/* Compact mode — hide the per-side tax columns, keep only the Diff
   Column order (0-indexed from first data column):
     0 matchType · 1 doc · 2 gstin · 3 supp2B · 4 suppPR
     5 inv2B · 6 invPR · 7 date2B · 8 datePR
     9 taxable2B · 10 taxablePR · 11 taxableDiff
     12 igst2B · 13 igstPR · 14 igstDiff
     15 cgst2B · 16 cgstPR · 17 cgstDiff
     18 sgst2B · 19 sgstPR · 20 sgstDiff
     21 cess2B · 22 cessPR · 23 cessDiff
     24 totalDiff · 25 remarks
   Compact = hide every *2B and *PR tax column (keep diffs).
*/
/* Frappe indexes are offset +1 vs jspreadsheet (serial col occupies col-index 0),
   so the old jexcel data-x="9" becomes data-col-index="10", etc. Single selector
   covers both header and body cells — frappe uses .dt-cell for both. */
body.results-compact #grid-results .dt-cell[data-col-index="10"],
body.results-compact #grid-results .dt-cell[data-col-index="11"],
body.results-compact #grid-results .dt-cell[data-col-index="13"],
body.results-compact #grid-results .dt-cell[data-col-index="14"],
body.results-compact #grid-results .dt-cell[data-col-index="16"],
body.results-compact #grid-results .dt-cell[data-col-index="17"],
body.results-compact #grid-results .dt-cell[data-col-index="19"],
body.results-compact #grid-results .dt-cell[data-col-index="20"],
body.results-compact #grid-results .dt-cell[data-col-index="22"],
body.results-compact #grid-results .dt-cell[data-col-index="23"] {
  display: none;
}

/* ---- Typed-reset confirm modal ---- */
#reset-confirm {
  display: none;
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--c-slate-950) 45%, transparent);
  backdrop-filter: blur(6px);
  z-index: 6000;
  align-items: center;
  justify-content: center;
}
#reset-confirm.show { display: flex; }
#reset-confirm .rc-card {
  width: 420px;
  max-width: 94vw;
  background: var(--bg-elevated);
  border-radius: 12px;
  box-shadow: 0 20px 48px rgba(15,23,42,.25);
  overflow: hidden;
  animation: modalIn 160ms var(--ease);
}
#reset-confirm .rc-head {
  padding: 16px 20px;
  background: var(--c-red-50);
  border-bottom: 1px solid var(--c-red-100);
  color: var(--c-red-700);
  font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
#reset-confirm .rc-body {
  padding: 18px 20px;
  font-size: 13px;
  color: var(--fg);
  line-height: 1.55;
}
#reset-confirm .rc-body b { color: var(--c-red-700); }
#reset-confirm input {
  margin-top: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#reset-confirm input:focus { outline: none; border-color: var(--c-red-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-red-500) 22%, transparent); }
#reset-confirm .rc-foot {
  padding: 14px 20px;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
#reset-confirm .rc-foot .btn-danger[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ============================================================
   CDNR-aware dashboard styles
   CN reduces ITC (reversal); DN increases ITC (like an invoice).
   We use distinct colors so CN and DN rows/cards are spottable
   at a glance without needing to read the label.
   ============================================================ */

/* Inline doc-type pills — used in mini-tables and stat-sub.
   (.stat-card .stat-sub base rule lives in the DASHBOARD PANEL block
   earlier in this file; duplicate has been removed.) */
.pill-inv, .pill-cn, .pill-dn {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.5;
  border: 1px solid transparent;
}
.pill-inv {
  background: color-mix(in srgb, var(--c-slate-500) 10%, transparent);
  color: var(--c-slate-700);
  border-color: color-mix(in srgb, var(--c-slate-500) 22%, transparent);
}
.pill-cn {
  /* Credit note — reversal, negative ITC direction */
  background: color-mix(in srgb, var(--c-red-500) 12%, transparent);
  color: var(--c-red-700);
  border-color: color-mix(in srgb, var(--c-red-500) 28%, transparent);
}
.pill-dn {
  /* Debit note — additional ITC direction */
  background: color-mix(in srgb, var(--c-violet-500, #8b5cf6) 12%, transparent);
  color: var(--c-violet-700, #6d28d9);
  border-color: color-mix(in srgb, var(--c-violet-500, #8b5cf6) 28%, transparent);
}
/* Secondary label shown on a pill when books used the opposite nomenclature
   (e.g. "CN/DN" means canonical CN but books wrote DN under own-view convention). */
.pill-inv .pill-alt,
.pill-cn  .pill-alt,
.pill-dn  .pill-alt {
  margin-left: 2px;
  opacity: 0.7;
  font-weight: 600;
}

/* CN / DN cards — accent lives in the .stat-value number color only.
   The older "3px top-bar + card-wide gradient" treatment was retired
   when the dashboard moved inside .dashboard-panel; per-card bars
   fought with the panel's single gradient strip. Numeric cues remain
   via .pill-cn / .pill-dn above and .stat-value colour below. */
.stat-card.stat-cn .stat-value { color: var(--c-red-600); }
.stat-card.stat-dn .stat-value { color: var(--c-violet-700, #6d28d9); }

/* ============================================================
 * Google Sheets–style column filter
 * ------------------------------------------------------------
 * `.col-filter-btn` is injected into every jspreadsheet thead cell by
 * attachColumnFilters(). Positioned absolutely at the right edge of the
 * header so it sits where Google Sheets users expect the filter button.
 * ============================================================ */
.jexcel thead td,
.jexcel thead th {
  position: relative;   /* anchor for absolute-positioned filter button */
}
.col-filter-btn {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  line-height: 14px;
  text-align: center;
  cursor: pointer;
  color: #6b7b8c;
  font-size: 10px;
  user-select: none;
  border-radius: 3px;
  background: transparent;
  transition: background 0.12s, color 0.12s;
  z-index: 2;
}
.col-filter-btn:hover {
  background: #e8f0fe;
  color: #1a73e8;
}
.col-filter-btn.active {
  color: #1a73e8;
  background: #e8f0fe;
  font-weight: bold;
}
.col-filter-btn.has-filter {
  color: #fff;
  background: #1a73e8;
}

/* Popover */
.col-filter-popover {
  width: 260px;
  background: #fff;
  border: 1px solid #d0d7e2;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  padding: 10px;
  font-size: 13px;
  font-family: inherit;
  color: #1f2733;
}
.col-filter-popover .cfp-title {
  font-weight: 600;
  padding: 2px 0 8px;
  border-bottom: 1px solid #e1e6ed;
  margin-bottom: 8px;
  color: #0b64d1;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.col-filter-popover .cfp-sort {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.col-filter-popover .cfp-sort-btn {
  padding: 6px 8px;
  border: 1px solid #d0d7e2;
  background: #f8f9fb;
  border-radius: 4px;
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  color: #1f2733;
  transition: background 0.1s;
}
.col-filter-popover .cfp-sort-btn:hover {
  background: #e8f0fe;
  border-color: #aac7f0;
}
.col-filter-popover .cfp-sort-btn.active {
  background: #e8f0fe;
  border-color: #1a73e8;
  color: #0b64d1;
  font-weight: 600;
}
.col-filter-popover .cfp-search-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #d0d7e2;
  border-radius: 4px;
  box-sizing: border-box;
  margin-bottom: 6px;
  font-size: 13px;
  font-family: inherit;
}
.col-filter-popover .cfp-search-input:focus {
  outline: none;
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.18);
}
.col-filter-popover .cfp-all-wrap {
  display: block;
  padding: 4px 6px;
  border-radius: 3px;
  font-weight: 600;
  background: #f0f4f9;
  margin-bottom: 4px;
  cursor: pointer;
  font-size: 12px;
}
.col-filter-popover .cfp-list {
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #e1e6ed;
  border-radius: 4px;
  padding: 4px;
  margin-bottom: 8px;
  background: #fafbfc;
}
.col-filter-popover .cfp-opt {
  display: flex;
  align-items: center;
  padding: 3px 4px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
}
.col-filter-popover .cfp-opt:hover { background: #eef3fa; }
.col-filter-popover .cfp-opt input[type="checkbox"] { flex-shrink: 0; }
.col-filter-popover .cfp-val-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.col-filter-popover .cfp-count {
  color: #7c8ba0;
  font-size: 11px;
  margin-left: auto;
  flex-shrink: 0;
}
.col-filter-popover .cfp-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.col-filter-popover .cfp-actions .btn {
  padding: 6px 12px;
  font-size: 12px;
  min-width: auto;
}

/* ============================================================
   INDUSTRIAL v3 — FULL UI OVERHAUL
   Applied LAST so it wins cascades. Replaces every shell
   (menu bar, tabs, toolbars, dashboard panels, mini-tables,
    legends, settings, match panels, status bar). Dark chrome,
    sharp 1px borders, uppercase mono headers, zero radii.
   ============================================================ */

/* Global body — stone terminal background */
body {
  background: var(--i-bg) !important;
  color: var(--i-ink);
  font-family: var(--font-sans);
  padding-bottom: 24px; /* reserve space for fixed status bar */
}
main.container {
  padding: 12px !important;
  max-width: none;
  margin: 0;
  background: var(--i-bg);
}
.tab-content { padding: 0; }

/* ── INDUSTRIAL MENU BAR ── */
.ind-menubar {
  display: flex; align-items: center; height: 28px;
  background: #1A1A19;
  color: #E5E5E0;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 0 12px;
  border-bottom: 1px solid #3A3A38;
  position: sticky; top: 0; z-index: 100;
  gap: 0;
}
.ind-brand {
  display: flex; align-items: center; gap: 8px;
  padding-right: 16px;
  border-right: 1px solid #3A3A38;
  margin-right: 12px;
}
.ind-brand-badge {
  width: 14px; height: 14px;
  background: var(--i-accent);
  color: #0A0A09;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 9px; font-family: var(--font-mono);
  letter-spacing: 0;
}
.ind-brand-name { font-weight: 600; letter-spacing: 0.5px; color: #E5E5E0; }
.ind-brand-ver { color: #8A857B; font-size: 10px; }

.ind-menu-items { display: flex; align-items: center; height: 100%; }
.ind-menu-item {
  background: transparent; border: 0; color: #C5C5C0;
  font-family: var(--font-mono); font-size: 11px;
  padding: 0 10px; height: 100%;
  cursor: pointer; letter-spacing: 0.3px;
  transition: background 120ms;
}
.ind-menu-item:hover { background: #2A2A28; color: #FFF; }

.ind-menu-meta {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
  color: #8A857B; font-size: 10px;
}
.ind-meta-field { display: inline-flex; align-items: center; gap: 4px; }
.ind-meta-key { color: #8A857B; letter-spacing: 0.3px; }
.ind-meta-input {
  background: transparent; border: 0; border-bottom: 1px dotted #5A5A58;
  color: #FFF; font-family: var(--font-mono); font-size: 10px;
  padding: 2px 4px; width: 72px; outline: none;
  border-radius: 0;
}
.ind-meta-input-gstin { width: 130px; }
.ind-meta-input:focus { border-bottom-color: var(--i-accent); }
.ind-meta-input::placeholder { color: #5A5A58; }
.ind-meta-sep { color: #5A5A58; }

.ind-conn {
  margin-left: 8px; color: #78C27E;
  font-size: 10px; letter-spacing: 0.4px;
  display: inline-flex; align-items: center; gap: 4px;
}
.ind-conn-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #78C27E;
  box-shadow: 0 0 4px #78C27E;
  display: inline-block;
}
.ind-conn-muted { color: #5A5A58; }

.ind-menu-overflow { position: relative; margin-left: 4px; }
.ind-menu-overflow-btn {
  background: transparent; border: 0; color: #C5C5C0;
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
  padding: 0 8px; height: 100%; cursor: pointer;
  line-height: 28px;
}
.ind-menu-overflow-btn:hover { background: #2A2A28; color: #FFF; }
.ind-menu-overflow-drop {
  display: none;
  position: absolute; top: 100%; right: 0;
  background: #1A1A19; border: 1px solid #3A3A38;
  min-width: 200px; padding: 4px;
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  z-index: 200;
  border-radius: 0;
}
.ind-menu-overflow.open .ind-menu-overflow-drop,
.ind-menu-overflow.show .ind-menu-overflow-drop { display: block; }
.ind-menu-overflow-drop button {
  display: block; width: 100%;
  background: transparent; border: 0; color: #E5E5E0;
  font-family: var(--font-mono); font-size: 11px;
  padding: 8px 12px; text-align: left;
  cursor: pointer; letter-spacing: 0.4px;
}
.ind-menu-overflow-drop button:hover { background: #2A2A28; color: #FFF; }
.ind-menu-overflow-drop button.danger { color: #E57A6A; }
.ind-menu-overflow-drop button.danger:hover { background: var(--i-red); color: #FFF; }

/* ── INDUSTRIAL SHEET TABS ── */
.ind-tabs {
  display: flex;
  background: var(--i-bg);
  border-bottom: 1px solid var(--i-grid);
  font-family: var(--font-mono); font-size: 11px;
  position: sticky; top: 28px; z-index: 90;
}
.ind-tab {
  background: transparent; border: 0;
  border-right: 1px solid var(--i-grid);
  border-top: 2px solid transparent;
  padding: 8px 16px;
  color: var(--i-ink-soft);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.3px; text-transform: uppercase;
  cursor: pointer;
  position: relative;
  margin-top: 0;
  border-radius: 0;
  transition: background 120ms, color 120ms;
}
.ind-tab:hover { background: rgba(255,91,20,.04); color: var(--i-ink); }
.ind-tab.active {
  background: var(--i-surface);
  border-top-color: var(--i-accent);
  color: var(--i-ink);
  font-weight: 600;
  margin-top: -1px;
}
.ind-tab.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; background: var(--i-surface);
}
.ind-tabs-spacer {
  flex: 1;
  border-bottom: 1px solid var(--i-grid);
}

/* ── INDUSTRIAL TOOLBAR ── */
.ind-toolbar {
  background: var(--i-surface);
  border-bottom: 1px solid var(--i-grid);
  padding: 6px 12px;
  display: flex; align-items: center; gap: 2px;
  font-family: var(--font-mono); font-size: 10px;
  flex-wrap: wrap;
  margin: 0 0 0 0;
}
.ind-tool, .ind-tool-toggle {
  padding: 6px 10px;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  color: var(--i-ink-soft);
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--font-mono); font-size: 10px;
  font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 0;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.ind-tool:hover, .ind-tool-toggle:hover { background: var(--i-row-head); color: var(--i-ink); }
.ind-tool-ico { font-size: 12px; color: var(--i-ink-mute); }
.ind-tool-warn { color: var(--i-red); }
.ind-tool-warn:hover { background: var(--i-red-soft); color: var(--i-red); }
.ind-tool-toggle input[type="checkbox"] {
  width: 12px; height: 12px; margin: 0; accent-color: var(--i-accent);
}

.ind-tool-cta {
  padding: 6px 14px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--i-accent); color: #FFF;
  border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 10px;
  font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase;
  border-radius: 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
  transition: background 120ms;
}
.ind-tool-cta:hover { background: #E84E0C; }
.ind-tool-cta:active { background: #C14208; }
.ind-tool-cta span:first-child { font-size: 11px; }

.ind-toolbar-sep {
  width: 1px; height: 20px;
  background: var(--i-grid);
  margin: 0 6px;
}
.ind-toolbar-spacer { flex: 1; }
.ind-toolbar-meta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 8px;
  color: var(--i-ink-mute);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.3px;
}
.ind-toolbar-meta-k { color: var(--i-ink-mute); }
.ind-toolbar-meta-v { color: var(--i-ink); font-weight: 700; }

.ind-select {
  background: var(--i-surface);
  border: 1px solid var(--i-grid);
  padding: 5px 10px;
  font-family: var(--font-mono); font-size: 10px;
  font-weight: 600; color: var(--i-ink);
  text-transform: uppercase; letter-spacing: 0.5px;
  border-radius: 0;
  outline: none;
  cursor: pointer;
}
.ind-select:focus { border-color: var(--i-accent); }

.ind-search {
  display: inline-flex; align-items: center;
  border: 1px solid var(--i-grid);
  padding: 2px 8px;
  width: 200px;
  background: var(--i-surface);
  border-radius: 0;
}
.ind-search-ico { color: var(--i-ink-mute); margin-right: 6px; }
.ind-search-input {
  border: 0; outline: 0;
  flex: 1; background: transparent;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--i-ink); letter-spacing: 0.3px;
  padding: 4px 0;
  text-transform: uppercase;
}
.ind-search-input::placeholder { color: var(--i-ink-mute); text-transform: uppercase; }

/* ── INDUSTRIAL KPI TILE ROW ── */
.ind-kpi-row {
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.ind-kpi-row.reco-hero::before { display: none !important; content: none; }
.ind-kpi-row.reco-hero { padding: 0 !important; }
.ind-kpi-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.ind-kpi {
  background: var(--i-surface);
  border: 1px solid var(--i-grid);
  padding: 14px;
  border-left: 3px solid var(--i-ink);
  font-family: var(--font-sans);
  min-height: 96px;
  display: flex; flex-direction: column;
  position: relative;
  border-radius: 0;
  transition: box-shadow 120ms;
}
.ind-kpi:hover { box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.ind-kpi-ink    { border-left-color: var(--i-ink); }
.ind-kpi-green  { border-left-color: var(--i-green); }
.ind-kpi-blue   { border-left-color: var(--i-blue); }
.ind-kpi-red    { border-left-color: var(--i-red); }
.ind-kpi-amber  { border-left-color: var(--i-amber); }
.ind-kpi-violet { border-left-color: var(--i-violet); }
.ind-kpi-accent { border-left-color: var(--i-accent); }
.ind-kpi-label {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--i-ink-mute); font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase;
}
.ind-kpi-value {
  font-family: var(--font-mono); font-size: 24px;
  font-weight: 700; color: var(--i-ink);
  margin-top: 4px; letter-spacing: -0.5px;
  line-height: 1.1;
  word-break: break-word;
}
.ind-kpi-green  .ind-kpi-value { color: var(--i-green); }
.ind-kpi-blue   .ind-kpi-value { color: var(--i-blue); }
.ind-kpi-red    .ind-kpi-value { color: var(--i-red); }
.ind-kpi-amber  .ind-kpi-value { color: var(--i-amber); }
.ind-kpi-violet .ind-kpi-value { color: var(--i-violet); }
.ind-kpi-accent .ind-kpi-value { color: var(--i-accent); }
.ind-kpi-sub {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--i-ink-mute);
  margin-top: auto; padding-top: 8px;
  letter-spacing: 0.2px;
}
.ind-kpi-sub-sep { margin: 0 6px; color: var(--i-grid); }
.ind-kpi-bar {
  height: 4px; margin-top: 6px;
  background: var(--i-row-head);
  border: 1px solid var(--i-grid);
  position: relative; overflow: hidden;
  border-radius: 0;
}
.ind-kpi-bar-fill {
  height: 100%;
  background: var(--i-green);
  width: 0;
  transition: width 200ms linear;
}
.ind-kpi-green  .ind-kpi-bar-fill { background: var(--i-green); }
.ind-kpi-red    .ind-kpi-bar-fill { background: var(--i-red); }
.ind-kpi-amber  .ind-kpi-bar-fill { background: var(--i-amber); }
.ind-kpi-violet .ind-kpi-bar-fill { background: var(--i-violet); }

.ind-hidden-stats { display: none !important; }

/* Neutralise legacy .reco-hero flourishes when it's now just an alias for .ind-kpi-row */
.ind-kpi-row.reco-hero,
.ind-kpi-row.reco-hero > * {
  border-radius: 0;
}
.reco-progress.ind-kpi-bar { background: var(--i-row-head); border-radius: 0; }
.reco-progress-fill.ind-kpi-bar-fill { background: var(--i-green); border-radius: 0; }

/* ── INDUSTRIAL PANEL (with head band) ── */
.ind-panel {
  background: var(--i-surface);
  border: 1px solid var(--i-grid);
  margin-bottom: 8px;
  border-radius: 0;
  overflow: hidden;
}
.ind-panel-wide { width: 100%; }
.ind-panel-head {
  padding: 8px 12px;
  border-bottom: 1px solid var(--i-grid);
  background: var(--i-row-head);
  font-family: var(--font-mono); font-size: 10px;
  font-weight: 700; letter-spacing: 0.6px;
  color: var(--i-ink-soft);
  display: flex; justify-content: space-between; align-items: center;
  text-transform: uppercase;
}
.ind-panel-head-red    { border-bottom-color: var(--i-red); color: var(--i-red); }
.ind-panel-head-amber  { border-bottom-color: var(--i-amber); color: var(--i-amber); }
.ind-panel-head-meta { color: var(--i-ink-mute); font-weight: 600; }
.ind-panel-head-cta {
  color: var(--i-accent); cursor: pointer;
  font-weight: 700; letter-spacing: 0.4px;
}
.ind-panel-head-cta:hover { text-decoration: underline; }
.ind-panel-body { padding: 16px; }
.ind-panel-body-pad0 { padding: 0; }
.ind-panel-hint {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--i-ink-mute);
  padding: 8px 12px; margin: 0;
  background: var(--i-row-alt);
  border-bottom: 1px solid var(--i-grid);
  letter-spacing: 0.3px;
}
.ind-panel-foot {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid var(--i-grid);
  margin-top: 12px;
}
.ind-panel-body > .ind-panel-foot:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* ── ROW-SPLIT (Dashboard row 2) ── */
.ind-row-split {
  display: grid; gap: 8px;
  margin-bottom: 8px;
}
.ind-row-14-1 { grid-template-columns: 1.4fr 1fr; }
.ind-row-1-1  { grid-template-columns: 1fr 1fr; }
.ind-row-split > .ind-panel { margin-bottom: 0; }
@media (max-width: 960px) {
  .ind-row-split { grid-template-columns: 1fr !important; }
  .ind-kpi-row { grid-template-columns: repeat(2, 1fr); }
}

/* ── STACKED BAR (match distribution) ── */
.ind-stack-bar {
  display: flex; height: 28px;
  border: 1px solid var(--i-grid);
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 0;
}
.ind-stack-seg {
  color: #FFF;
  display: flex; align-items: center;
  padding-left: 8px;
  font-family: var(--font-mono); font-size: 10px;
  font-weight: 700;
  white-space: nowrap; overflow: hidden;
  letter-spacing: 0.5px;
  transition: width 220ms ease;
}
.ind-stack-exact   { background: var(--i-green); }
.ind-stack-cleaned { background: var(--i-blue); }
.ind-stack-partial { background: var(--i-amber); }
.ind-stack-manual  { background: var(--i-violet); }
.ind-stack-unm     { background: var(--i-red); }

/* ── LEGEND TABLE (match distribution rows) ── */
.ind-legend-table {
  border: 1px solid var(--i-grid);
  font-family: var(--font-mono); font-size: 11px;
}
.ind-legend-head, .ind-legend-row, .ind-legend-foot {
  display: grid;
  grid-template-columns: 40px 1fr 80px 100px 120px;
}
.ind-legend-head {
  background: var(--i-row-head);
  border-bottom: 1px solid var(--i-grid);
}
.ind-legend-head > div {
  padding: 6px 8px;
  font-family: var(--font-mono); font-size: 10px;
  font-weight: 700; color: var(--i-ink-soft);
  letter-spacing: 0.4px;
  border-right: 1px solid var(--i-grid);
  text-transform: uppercase;
}
.ind-legend-head > div:last-child { border-right: 0; }
.ind-legend-head > div.num, .ind-legend-head > div:nth-child(3),
.ind-legend-head > div:nth-child(4), .ind-legend-head > div:nth-child(5) { text-align: right; }

.ind-legend-row { border-bottom: 1px solid var(--i-grid); }
.ind-legend-row:last-of-type { border-bottom: 0; }
.ind-legend-row > div {
  padding: 6px 8px;
  border-right: 1px solid var(--i-grid);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--i-ink);
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.ind-legend-row > div:last-child { border-right: 0; }
.ind-legend-swatch-cell { display: flex; align-items: center; justify-content: center; padding: 0 !important; }
.ind-legend-swatch { width: 10px; height: 10px; display: block; }
.ind-sw-green  { background: var(--i-green); }
.ind-sw-blue   { background: var(--i-blue); }
.ind-sw-amber  { background: var(--i-amber); }
.ind-sw-violet { background: var(--i-violet); }
.ind-sw-red    { background: var(--i-red); }
.ind-legend-type { font-weight: 600; }
.ind-legend-row .num { text-align: right; }
.ind-legend-row > div.num { font-weight: 600; }

.ind-legend-foot {
  background: var(--i-row-head);
  border-top: 2px solid #1A1A19;
}
.ind-legend-foot > div {
  padding: 6px 8px;
  font-family: var(--font-mono); font-size: 10px;
  font-weight: 700; letter-spacing: 0.4px;
  border-right: 1px solid var(--i-grid);
  text-transform: uppercase;
}
.ind-legend-foot > div:last-child { border-right: 0; }
.ind-legend-foot > div.num { text-align: right; font-size: 11px; }

/* ── VALUE.DELTA rows ── */
.ind-delta-head, .ind-delta-row {
  display: grid; grid-template-columns: 100px 1fr 1fr 110px;
}
.ind-delta-head {
  background: var(--i-row-head);
  border-bottom: 1px solid var(--i-grid);
}
.ind-delta-head > div {
  padding: 6px 8px;
  font-family: var(--font-mono); font-size: 10px;
  font-weight: 700; color: var(--i-ink-soft);
  letter-spacing: 0.4px;
  border-right: 1px solid var(--i-grid);
  text-transform: uppercase;
}
.ind-delta-head > div:last-child { border-right: 0; }
.ind-delta-head > div.num { text-align: right; }

.ind-delta-rows .ind-delta-row {
  border-bottom: 1px solid var(--i-grid);
}
.ind-delta-rows .ind-delta-row:last-child { border-bottom: 0; }
.ind-delta-row > div {
  padding: 6px 8px;
  font-family: var(--font-mono); font-size: 11px;
  border-right: 1px solid var(--i-grid);
  color: var(--i-ink);
}
.ind-delta-row > div:last-child { border-right: 0; }
.ind-delta-row > div:first-child { font-weight: 600; }
.ind-delta-row > div.num { text-align: right; }
.ind-delta-row-diff-pos { color: var(--i-red); font-weight: 600; }
.ind-delta-row-diff-neg { color: var(--i-green); font-weight: 600; }
.ind-delta-row-diff-zero { color: var(--i-ink-mute); }

.ind-delta-row-total {
  background: var(--i-accent-soft);
}
.ind-delta-row-total > div { font-weight: 700; color: var(--i-ink); }
.ind-delta-row-total > div:first-child { color: var(--i-accent); letter-spacing: 0.4px; }
.ind-delta-row-total > div:last-child { color: var(--i-accent); }

.ind-hidden-table { display: none !important; }

/* ── UNMATCHED QUEUE (Dashboard row 3) ── */
.ind-queue { display: block; }
.ind-queue-head, .ind-queue-row {
  display: grid;
  grid-template-columns: 40px 160px 1fr 180px 90px 110px 90px 110px 120px;
  align-items: stretch;
}
.ind-queue-head {
  background: var(--i-row-head);
  border-bottom: 1px solid var(--i-grid);
}
.ind-queue-head > div {
  padding: 6px 8px;
  font-family: var(--font-mono); font-size: 10px;
  font-weight: 700; color: var(--i-ink-soft);
  letter-spacing: 0.5px;
  border-right: 1px solid var(--i-grid);
  text-transform: uppercase;
}
.ind-queue-head > div:last-child { border-right: 0; }
.ind-queue-head > div.num { text-align: right; }
.ind-queue-rowhead {
  width: 40px; text-align: center; font-family: var(--font-mono); font-size: 10px;
  color: var(--i-ink-mute); background: var(--i-row-head);
  border-right: 1px solid var(--i-grid);
  line-height: 24px; height: 25px;
  padding: 0 !important;
}
.ind-queue-row {
  border-bottom: 1px solid var(--i-grid);
  background: var(--i-surface);
}
.ind-queue-row:nth-child(even) { background: var(--i-row-alt); }
.ind-queue-row:last-child { border-bottom: 0; }
.ind-queue-row > div {
  padding: 0 8px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--i-ink);
  border-right: 1px solid var(--i-grid);
  line-height: 24px;
  height: 25px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ind-queue-row > div:last-child { border-right: 0; }
.ind-queue-row > div.num { text-align: right; }
.ind-queue-flag {
  padding: 1px 6px;
  font-family: var(--font-mono); font-size: 9px;
  font-weight: 600; letter-spacing: 0.4px;
  display: inline-block; text-transform: uppercase;
}
.ind-queue-flag-2b    { background: var(--i-blue-soft);   color: var(--i-blue); }
.ind-queue-flag-books { background: var(--i-amber-soft);  color: var(--i-amber); }
.ind-queue-flag-mis   { background: var(--i-red-soft);    color: var(--i-red); }
.ind-queue-empty {
  padding: 24px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--i-ink-mute);
  text-align: center;
  background: var(--i-row-alt);
  letter-spacing: 0.4px;
}

/* ── INDUSTRIAL MINI TABLES (Action-req, recent results, AI suggestions, linked pairs, GSTIN) ── */
.ind-mini-table-wrap {
  overflow: auto;
}
.ind-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--i-ink);
  background: var(--i-surface);
}
.ind-mini-table thead th {
  background: var(--i-row-head);
  color: var(--i-ink-soft);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 6px 8px;
  border-bottom: 1px solid var(--i-grid);
  border-right: 1px solid var(--i-grid);
  text-align: left;
  white-space: nowrap;
}
.ind-mini-table thead th:last-child { border-right: 0; }
.ind-mini-table thead th.num { text-align: right; }
.ind-mini-table tbody td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--i-grid);
  border-right: 1px solid var(--i-grid);
  font-size: 11px;
  white-space: nowrap;
}
.ind-mini-table tbody td:last-child { border-right: 0; }
.ind-mini-table tbody tr:nth-child(even) td { background: var(--i-row-alt); }
.ind-mini-table tbody tr:hover td { background: var(--i-accent-soft) !important; }
.ind-mini-table tbody td.num { text-align: right; }
.ind-mini-table tbody td .match-pill,
.ind-mini-table tbody td .ind-pill {
  display: inline-block; padding: 1px 6px;
  font-family: var(--font-mono); font-size: 9px;
  font-weight: 600; letter-spacing: 0.4px;
  border-radius: 0; text-transform: uppercase;
}
.ind-pill-exact   { background: var(--i-green-soft);  color: var(--i-green); }
.ind-pill-cleaned { background: var(--i-blue-soft);   color: var(--i-blue); }
.ind-pill-partial { background: var(--i-amber-soft);  color: var(--i-amber); }
.ind-pill-manual  { background: var(--i-violet-soft); color: var(--i-violet); }
.ind-pill-only2b  { background: var(--i-red-soft);    color: var(--i-red); }
.ind-pill-onlybk  { background: var(--i-amber-soft);  color: var(--i-amber); }
.ind-pill-status-ok   { background: var(--i-green-soft); color: var(--i-green); }
.ind-pill-status-warn { background: var(--i-amber-soft); color: var(--i-amber); }
.ind-pill-status-err  { background: var(--i-red-soft);   color: var(--i-red); }

/* GSTIN summary sub-groups (2B vs Books bands) */
.ind-mini-table thead .grp-2b { background: var(--i-blue-soft); color: var(--i-blue); text-align: center; }
.ind-mini-table thead .grp-pr { background: var(--i-amber-soft); color: var(--i-amber); text-align: center; }
.ind-mini-table thead .sub-col { font-size: 9px; }

.ind-gstin-tw { max-height: 70vh; overflow: auto; }

/* ── DROPZONE (industrial) ── */
.ind-dropzone {
  border: 1px dashed var(--i-grid);
  border-radius: 0;
  padding: 14px 16px;
  background: var(--i-row-alt);
  color: var(--i-ink-mute);
  font-family: var(--font-mono); font-size: 10px;
  text-align: center;
  letter-spacing: 0.6px;
  margin: 0 0 8px 0;
  transition: all 160ms;
}
.ind-dropzone.dragover {
  background: var(--i-accent-soft);
  border-color: var(--i-accent);
  color: var(--i-accent);
}

/* ── GRID CONTAINER (industrial outer shell) ── */
.ind-grid {
  margin: 0 0 8px 0;
  border: 1px solid var(--i-grid);
  background: var(--i-surface);
  border-radius: 0;
}

/* ── INDUSTRIAL LEGEND (mini-legend) ── */
.ind-legend {
  display: flex; gap: 12px; flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--i-row-alt);
  border: 1px solid var(--i-grid);
  border-radius: 0;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--i-ink-soft);
  letter-spacing: 0.4px;
  margin: 0;
}
.ind-legend .legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  text-transform: uppercase;
}
.ind-legend .swatch {
  width: 10px; height: 10px; border-radius: 0; display: inline-block;
}
.ind-legend .swatch.green  { background: var(--i-green); }
.ind-legend .swatch.blue   { background: var(--i-blue); }
.ind-legend .swatch.amber  { background: var(--i-amber); }
.ind-legend .swatch.red    { background: var(--i-red); }
.ind-legend .swatch.orange { background: var(--i-amber); }
.ind-legend .swatch.purple { background: var(--i-violet); }

/* ── MATCH PANELS (industrial twin-list) ── */
.ind-match-panels {
  display: grid;
  grid-template-columns: 1fr 280px 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.ind-match-panel {
  background: var(--i-surface);
  border: 1px solid var(--i-grid);
  border-radius: 0;
  display: flex; flex-direction: column;
  min-height: 360px;
  overflow: hidden;
}
.ind-match-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
  background: var(--i-row-head);
  border-bottom: 1px solid var(--i-grid);
  gap: 8px;
}
.ind-match-panel-title {
  font-family: var(--font-mono); font-size: 10px;
  font-weight: 700; letter-spacing: 0.5px;
  color: var(--i-ink-soft);
  text-transform: uppercase;
}
.ind-match-filter {
  flex: 1; max-width: 140px;
  border: 1px solid var(--i-grid);
  background: var(--i-surface);
  padding: 3px 6px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--i-ink);
  outline: none;
  border-radius: 0;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.ind-match-filter:focus { border-color: var(--i-accent); }
.ind-match-list {
  flex: 1; overflow: auto;
  padding: 0;
  background: var(--i-surface);
}
.ind-match-center {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: var(--i-surface);
  border: 1px solid var(--i-grid);
  border-radius: 0;
}
.ind-sel-box {
  width: 100%;
  padding: 10px;
  background: var(--i-row-alt);
  border: 1px solid var(--i-grid);
  font-family: var(--font-mono); font-size: 10px;
  color: var(--i-ink);
  border-radius: 0;
  position: relative;
  min-height: 72px;
}
.ind-sel-box::before {
  content: attr(data-slot-label);
  position: absolute;
  top: -8px; left: 8px;
  background: var(--i-surface);
  padding: 0 6px;
  font-family: var(--font-mono); font-size: 9px;
  color: var(--i-ink-mute);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.ind-sel-details {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--i-ink-soft);
  white-space: pre-wrap;
  letter-spacing: 0.2px;
  line-height: 1.5;
}
.ind-link-arrow {
  font-family: var(--font-mono); font-size: 20px;
  color: var(--i-accent);
  font-weight: 700;
}

/* Override legacy .match-list items if app.js injects them */
.ind-match-list .match-list-item,
.ind-match-list > div {
  border-bottom: 1px solid var(--i-grid);
  padding: 8px 10px;
  font-family: var(--font-mono); font-size: 11px;
  cursor: pointer;
  background: var(--i-surface);
}
.ind-match-list .match-list-item:hover,
.ind-match-list > div:hover { background: var(--i-accent-soft); }
.ind-match-list .match-list-item.selected,
.ind-match-list > div.selected { background: var(--i-accent-soft); border-left: 3px solid var(--i-accent); }
.ind-match-list .match-list-item:nth-child(even) { background: var(--i-row-alt); }
.ind-match-list .match-list-item.selected:nth-child(even) { background: var(--i-accent-soft); }

@media (max-width: 960px) {
  .ind-match-panels { grid-template-columns: 1fr; }
}

/* ── INDUSTRIAL TOTALS STRIP (Results tab) ── */
.ind-totals {
  background: var(--i-surface);
  border: 1px solid var(--i-grid);
  border-radius: 0;
  margin: 0 0 8px 0;
  overflow: hidden;
}
.ind-totals-head {
  padding: 8px 12px;
  background: var(--i-row-head);
  border-bottom: 1px solid var(--i-grid);
  font-family: var(--font-mono); font-size: 10px;
  font-weight: 700; letter-spacing: 0.6px;
  color: var(--i-ink-soft);
  display: flex; justify-content: space-between; align-items: center;
  text-transform: uppercase;
}
.ind-totals-status {
  padding: 2px 8px;
  font-family: var(--font-mono); font-size: 9px;
  border: 1px solid var(--i-grid);
  background: var(--i-surface);
  letter-spacing: 0.5px;
  color: var(--i-ink-mute);
}
.ind-totals-status.results-status-empty    { background: var(--i-row-alt); color: var(--i-ink-mute); border-color: var(--i-grid); }
.ind-totals-status.results-status-matched  { background: var(--i-green-soft); color: var(--i-green); border-color: var(--i-green); }
.ind-totals-status.results-status-drift    { background: var(--i-amber-soft); color: var(--i-amber); border-color: var(--i-amber); }
.ind-totals-status.results-status-break    { background: var(--i-red-soft); color: var(--i-red); border-color: var(--i-red); }
.ind-totals-cols {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
}
.ind-totals-col {
  padding: 14px 16px;
  border-right: 1px solid var(--i-grid);
  background: var(--i-surface);
}
.ind-totals-col:last-child { border-right: 0; }
.ind-totals-col-diff { background: var(--i-accent-soft); }
.ind-totals-col-label {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--i-ink-mute); font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.ind-totals-col-value {
  font-family: var(--font-mono); font-size: 22px;
  font-weight: 700; color: var(--i-ink);
  margin: 4px 0;
  letter-spacing: -0.3px;
  word-break: break-word;
}
.ind-totals-col-diff .ind-totals-col-value { color: var(--i-accent); }
.ind-totals-col-hint {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--i-ink-mute);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
/* Legacy diff-col state classes from renderResultsStrip — retint in industrial hues */
.ind-totals-col-diff.results-strip-diff-green { background: var(--i-green-soft); }
.ind-totals-col-diff.results-strip-diff-green .ind-totals-col-value { color: var(--i-green); }
.ind-totals-col-diff.results-strip-diff-red { background: var(--i-red-soft); }
.ind-totals-col-diff.results-strip-diff-red .ind-totals-col-value { color: var(--i-red); }

/* ── RESULTS 6-METRIC STRIP (already in old CSS, re-tune to sharp ) ── */
.results-metrics {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--i-grid);
  background: var(--i-row-alt);
}
.results-metrics .rm-cell {
  padding: 8px 10px;
  border-right: 1px solid var(--i-grid);
  border-radius: 0;
  background: transparent;
  display: flex; flex-direction: column; gap: 2px;
}
.results-metrics .rm-cell:last-child { border-right: 0; }
.results-metrics .rm-k {
  font-family: var(--font-mono); font-size: 9px;
  color: var(--i-ink-mute); font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.results-metrics .rm-v {
  font-family: var(--font-mono); font-size: 14px;
  color: var(--i-ink); font-weight: 700;
  letter-spacing: -0.2px;
}
.rm-v-green  { color: var(--i-green) !important; }
.rm-v-blue   { color: var(--i-blue) !important; }
.rm-v-amber  { color: var(--i-amber) !important; }
.rm-v-red    { color: var(--i-red) !important; }
.rm-v-violet { color: var(--i-violet) !important; }

/* ── COL FILTER BADGES / PICKER (industrial) ── */
.ind-col-filter-badges {
  padding: 6px 12px 0 12px;
  background: transparent;
  font-family: var(--font-mono); font-size: 10px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.ind-col-filter-badges:empty { display: none; }
.ind-col-filter-picker {
  display: none;
  padding: 8px 12px;
  background: var(--i-surface);
  border: 1px solid var(--i-grid);
  margin-bottom: 8px;
  border-radius: 0;
  font-family: var(--font-mono); font-size: 10px;
}
.ind-col-filter-picker.show { display: block; }
.ind-col-filter-picker .cfp-title {
  font-weight: 700; letter-spacing: 0.5px;
  color: var(--i-ink-soft);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.ind-col-filter-picker .cfp-options {
  display: flex; flex-wrap: wrap; gap: 4px;
}

/* ── SETTINGS grid (industrial) ── */
.ind-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}
.ind-settings-grid label {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  background: var(--i-row-alt);
  border: 1px solid var(--i-grid);
  border-radius: 0;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.3px;
}
.ind-settings-grid label > span {
  font-weight: 700;
  color: var(--i-ink-soft);
  text-transform: uppercase; letter-spacing: 0.5px;
  font-size: 10px;
}
.ind-settings-grid label input[type="number"],
.ind-settings-grid label input[type="text"],
.ind-settings-grid label input[type="email"] {
  font-family: var(--font-mono); font-size: 12px;
  padding: 6px 8px;
  background: var(--i-surface);
  border: 1px solid var(--i-grid);
  color: var(--i-ink);
  border-radius: 0;
  outline: none;
}
.ind-settings-grid label input:focus { border-color: var(--i-accent); }
.ind-settings-grid label input[type="checkbox"] {
  width: 14px; height: 14px; margin: 0; accent-color: var(--i-accent);
  align-self: flex-start;
}
.ind-settings-grid label small {
  color: var(--i-ink-mute);
  font-family: var(--font-mono); font-size: 10px;
  line-height: 1.45;
  letter-spacing: 0.2px;
}
.ind-settings-grid label small b { color: var(--i-ink); }

.ind-textarea {
  width: 100%;
  font-family: var(--font-mono); font-size: 11px;
  padding: 10px 12px;
  background: var(--i-surface);
  border: 1px solid var(--i-grid);
  color: var(--i-ink);
  border-radius: 0;
  outline: none;
  resize: vertical;
  letter-spacing: 0.3px;
  line-height: 1.5;
}
.ind-textarea:focus { border-color: var(--i-accent); }

.ind-label-block {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono); font-size: 10px;
}
.ind-label-k {
  display: block;
  font-weight: 700;
  color: var(--i-ink-soft);
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.ind-input, .ind-input-wide {
  font-family: var(--font-mono); font-size: 12px;
  padding: 6px 8px;
  background: var(--i-surface);
  border: 1px solid var(--i-grid);
  color: var(--i-ink);
  border-radius: 0;
  outline: none;
}
.ind-input-wide { width: 100%; max-width: 400px; }
.ind-input:focus, .ind-input-wide:focus { border-color: var(--i-accent); }

.ind-saved-list { margin-top: 0; }

.ind-feature-list {
  list-style: none; padding: 0; margin: 0;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--i-ink);
  line-height: 1.8;
}
.ind-feature-list li { padding: 2px 0; }
.ind-feature-ok {
  color: var(--i-green);
  font-weight: 700;
  margin-right: 8px;
}

.ind-kpi-header {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
  /* Override the legacy .kpi-box inherited styles (rounded bg card) */
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* Compact the tiles a touch for the 10-tile GSTIN header row */
.ind-kpi-header .ind-kpi {
  padding: 10px 12px;
  min-height: 68px;
}
.ind-kpi-header .ind-kpi-value {
  font-size: 18px;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
}
.ind-kpi-header .ind-kpi-label {
  font-size: 10px;
  letter-spacing: 0.6px;
}

/* ── INDUSTRIAL STATUS BAR (fixed bottom) ── */
.ind-statusbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 24px;
  background: #1A1A19;
  color: #C5C5C0;
  display: flex; align-items: center;
  padding: 0 12px; gap: 10px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.4px;
  z-index: 80;
  border-top: 1px solid #3A3A38;
}
.ind-sb-stat { display: inline-flex; align-items: center; gap: 6px; }
.ind-sb-k { color: #8A857B; }
.ind-sb-v { color: #FFF; font-weight: 700; }
.ind-sb-sep { color: #3A3A38; }
.ind-sb-spacer { flex: 1; }
.ind-sb-ready { color: #8A857B; margin-right: 10px; letter-spacing: 0.6px; }
.ind-sb-rec   { color: var(--i-accent); letter-spacing: 0.6px; }

/* ── JSPREADSHEET container polish for industrial look — supplements existing overrides ── */
.ind-grid .jexcel_container { border: 0 !important; border-radius: 0 !important; }
.ind-grid table.jexcel { border-radius: 0 !important; }

/* ── NEUTRALISE LEGACY SHELL STYLES ──
   Any legacy class still remaining in HTML as alias gets flattened
   when combined with the industrial wrapper. */
.reco-hero.ind-kpi-row { background: transparent; box-shadow: none; padding: 0; border: 0; border-radius: 0; }
.reco-hero.ind-kpi-row::before { display: none; }

/* Legacy .toolbar still used inside modals — keep for modals, don't touch */
/* Legacy .section still used inside modals — keep for modals, don't touch */

/* Modal chrome: keep as-is; only sharpen buttons inside modals */
.modal .btn {
  border-radius: 0 !important;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  font-size: 11px;
}

/* Reset confirm dialog — sharpen */
#reset-confirm .rc-card { border-radius: 0; }
#reset-confirm .btn-danger { border-radius: 0; background: var(--i-red); }
#reset-confirm .btn-ghost { border-radius: 0; }
#reset-confirm input { border-radius: 0; font-family: var(--font-mono); }

/* Toast (sharpen) */
#toast.toast { border-radius: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3px; }

/* ── Narrow-width fallback ── */
@media (max-width: 720px) {
  .ind-menubar { flex-wrap: wrap; height: auto; padding: 4px 8px; }
  .ind-menu-meta { margin-left: 0; flex-wrap: wrap; }
  .ind-kpi-row { grid-template-columns: 1fr; }
  .ind-kpi-row-3 { grid-template-columns: 1fr; }
  .results-metrics { grid-template-columns: repeat(3, 1fr); }
  .ind-totals-cols { grid-template-columns: 1fr; }
  .ind-totals-col { border-right: 0; border-bottom: 1px solid var(--i-grid); }
}

/* =====================================================================
 *  INDUSTRIAL v3 — FOLLOW-UP OVERRIDES
 *  VALUE.SUMMARY · PASTE MODALS · GSTIN TABLE · GRID SCROLL · BUSY
 *  ================================================================== */

/* ── VALUE.SUMMARY (full grand-reco table, reskinned legacy .summary-table) ── */
.ind-vs-wrap {
  max-height: 520px;
  overflow: auto;
  background: var(--i-surface);
}
.ind-vs-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--i-surface);
  border-radius: 0;
  box-shadow: none;
  overflow: visible;           /* override legacy .summary-table overflow */
  table-layout: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--i-ink);
}
.ind-vs-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--i-row-head);
  color: var(--i-ink-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--i-grid);
  border-right: 1px solid var(--i-grid);
  white-space: nowrap;
}
.ind-vs-table thead th:last-child { border-right: 0; }
.ind-vs-table thead th.num { text-align: right; }

.ind-vs-table tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--i-grid);
  border-right: 1px solid var(--i-grid);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--i-ink);
  background: var(--i-surface);
  white-space: nowrap;
}
.ind-vs-table tbody td:last-child { border-right: 0; }
.ind-vs-table tbody td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Section band (REGULAR / RCM / GRAND TOTAL) — dark industrial strip */
.ind-vs-table tbody tr.vs-section td {
  background: #1A1A19 !important;
  color: var(--i-accent) !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  padding: 8px 10px !important;
  border-bottom: 1px solid var(--i-accent) !important;
  font-size: 11px !important;
}
.ind-vs-table tbody tr.vs-section td small {
  color: #A8A6A0 !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0.2px !important;
  margin-left: 8px;
}

/* Sub-section band (Difference Reconciliation explainer row) */
.ind-vs-table tbody tr.vs-subsection td {
  background: var(--i-row-alt) !important;
  color: var(--i-ink-soft) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  padding: 6px 10px !important;
  font-size: 10px !important;
}

/* Difference (Books − Portal) — bold orange numbers */
.ind-vs-table tbody tr.vs-diff td {
  background: var(--i-accent-soft) !important;
  color: var(--i-ink) !important;
  font-weight: 700 !important;
}
.ind-vs-table tbody tr.vs-diff td.num {
  color: var(--i-accent) !important;
}

/* Checksum row (Σ of buckets) */
.ind-vs-table tbody tr.vs-checksum td {
  background: var(--i-row-alt) !important;
  color: var(--i-ink-mute) !important;
  font-weight: 600 !important;
  border-top: 1px dashed var(--i-grid) !important;
}

/* Check-ok (Σ − Diff all zeros) = green strip */
.ind-vs-table tbody tr.vs-check-ok td {
  background: var(--i-green-soft) !important;
  color: var(--i-green) !important;
  font-weight: 700 !important;
}
.ind-vs-table tbody tr.vs-check-ok td:first-child::before {
  content: '✓ ';
  color: var(--i-green);
  font-weight: 700;
}

/* Check-fail = red alarm strip */
.ind-vs-table tbody tr.vs-check-fail td {
  background: var(--i-red-soft) !important;
  color: var(--i-red) !important;
  font-weight: 700 !important;
}
.ind-vs-table tbody tr.vs-check-fail td:first-child::before {
  content: '⚠ ';
  color: var(--i-red);
  font-weight: 700;
}

/* Collapse the legacy gradient header / border-radius rules the old
   .summary-table shipped with — they'd otherwise punch through the panel.  */
.ind-vs-table,
.ind-vs-table tbody,
.ind-vs-table thead,
.ind-vs-table tr {
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* ── PASTE MODAL — industrial chrome ── */
.modal {
  background: rgba(10, 10, 9, 0.72) !important;
  backdrop-filter: blur(2px);
}
.modal .modal-box,
.modal .modal-box-xl {
  background: var(--i-surface) !important;
  border: 1px solid var(--i-grid) !important;
  border-radius: 0 !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35) !important;
  color: var(--i-ink);
  overflow: hidden;
}
.modal .modal-head {
  background: #1A1A19 !important;
  color: #E5E5E0 !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-bottom: 1px solid var(--i-accent) !important;
  padding: 10px 14px !important;
  border-radius: 0 !important;
}
.modal .modal-head h3,
.modal .modal-head h2,
.modal .modal-head .modal-title {
  color: #FFF !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}
.modal .modal-head button,
.modal .modal-head .modal-close {
  background: transparent !important;
  color: #C5C5C0 !important;
  border: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 16px;
  cursor: pointer;
}
.modal .modal-head button:hover { color: var(--i-accent) !important; }
.modal .modal-body {
  background: var(--i-surface) !important;
  color: var(--i-ink) !important;
  padding: 16px !important;
  font-family: var(--font-sans);
}
.modal .modal-footer {
  background: var(--i-row-alt) !important;
  border-top: 1px solid var(--i-grid) !important;
  padding: 12px 14px !important;
  border-radius: 0 !important;
}

/* Paste-specific sub-chrome inside the modal body */
.modal .paste-instructions {
  background: var(--i-row-alt) !important;
  border: 0 !important;
  border-left: 3px solid var(--i-accent) !important;
  color: var(--i-ink) !important;
  border-radius: 0 !important;
  padding: 10px 12px !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
}
.modal .paste-instructions b,
.modal .paste-instructions strong {
  color: var(--i-accent) !important;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.modal .paste-textarea {
  background: var(--i-bg) !important;
  border: 1px solid var(--i-grid) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  color: var(--i-ink) !important;
  padding: 10px !important;
  box-shadow: none !important;
}
.modal .paste-textarea:focus {
  border-color: var(--i-accent) !important;
  outline: 1px solid var(--i-accent) !important;
  outline-offset: -1px !important;
}
.modal .paste-options {
  background: var(--i-row-alt) !important;
  border: 1px solid var(--i-grid) !important;
  border-radius: 0 !important;
  padding: 8px 10px !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--i-ink-soft) !important;
  letter-spacing: 0.3px;
}
.modal .paste-options label {
  color: var(--i-ink) !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.modal .paste-summary {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--i-ink-soft) !important;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 6px 0;
}
.modal .paste-preview-wrapper {
  background: var(--i-surface) !important;
  border: 1px solid var(--i-grid) !important;
  border-radius: 0 !important;
  max-height: 320px;
  overflow: auto;
}
.modal .paste-preview-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-mono);
  font-size: 10px;
}
.modal .paste-preview-table thead th {
  position: sticky; top: 0;
  background: var(--i-row-head) !important;
  color: var(--i-ink-soft) !important;
  font-size: 9px !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 6px 8px;
  border-bottom: 1px solid var(--i-grid) !important;
  border-right: 1px solid var(--i-grid);
  text-align: left;
}
.modal .paste-preview-table tbody td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--i-grid);
  border-right: 1px solid var(--i-grid);
  color: var(--i-ink);
  background: var(--i-surface);
  white-space: nowrap;
}
.modal .paste-preview-table tbody tr:nth-child(even) td {
  background: var(--i-row-alt);
}

/* Modal buttons — override legacy .btn inside modals only */
.modal .btn {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  border-radius: 0 !important;
  padding: 8px 14px !important;
  box-shadow: none !important;
  background-image: none !important;
  cursor: pointer;
  border: 1px solid transparent;
}
.modal .btn-primary {
  background: var(--i-accent) !important;
  color: #FFF !important;
  border-color: var(--i-accent) !important;
  font-weight: 700 !important;
}
.modal .btn-primary:hover {
  background: var(--i-accent-strong, #E04E0F) !important;
  border-color: var(--i-accent-strong, #E04E0F) !important;
}
.modal .btn-ghost,
.modal .btn-secondary {
  background: transparent !important;
  color: var(--i-ink) !important;
  border-color: var(--i-grid) !important;
}
.modal .btn-ghost:hover,
.modal .btn-secondary:hover {
  background: var(--i-row-alt) !important;
  border-color: var(--i-ink-soft) !important;
}
.modal .btn-danger {
  background: var(--i-red) !important;
  color: #FFF !important;
  border-color: var(--i-red) !important;
}

/* ── GSTIN SUMMARY table (industrial rows) ── */
#tab-gstin .gstin-table,
#tab-gstin table.ind-mini-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--i-surface);
  font-family: var(--font-mono);
  font-size: 11px;
  border-radius: 0;
}
#tab-gstin .gstin-table thead th,
#tab-gstin table.ind-mini-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--i-row-head) !important;
  color: var(--i-ink-soft) !important;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--i-grid);
  border-right: 1px solid var(--i-grid);
  white-space: nowrap;
}
#tab-gstin .gstin-table thead th.num,
#tab-gstin table.ind-mini-table thead th.num { text-align: right; }
#tab-gstin .gstin-table tbody td,
#tab-gstin table.ind-mini-table tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--i-grid);
  border-right: 1px solid var(--i-grid);
  color: var(--i-ink);
  background: var(--i-surface);
  white-space: nowrap;
}
#tab-gstin .gstin-table tbody td.num,
#tab-gstin table.ind-mini-table tbody td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#tab-gstin .gstin-table tbody tr:nth-child(even) td,
#tab-gstin table.ind-mini-table tbody tr:nth-child(even) td {
  background: var(--i-row-alt);
}
#tab-gstin .gstin-table tbody tr:hover td,
#tab-gstin table.ind-mini-table tbody tr:hover td {
  background: var(--i-accent-soft);
  box-shadow: inset 3px 0 0 var(--i-accent);
}

/* GSTIN status badges — match industrial flag-pill look */
#tab-gstin .status-ok,
#tab-gstin .gstin-status-ok {
  background: var(--i-green-soft); color: var(--i-green);
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  padding: 2px 8px; letter-spacing: 0.4px; text-transform: uppercase;
  border-radius: 0; display: inline-block;
}
#tab-gstin .status-warn,
#tab-gstin .gstin-status-warn {
  background: var(--i-amber-soft); color: var(--i-amber);
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  padding: 2px 8px; letter-spacing: 0.4px; text-transform: uppercase;
  border-radius: 0; display: inline-block;
}
#tab-gstin .status-fail,
#tab-gstin .gstin-status-fail,
#tab-gstin .status-error {
  background: var(--i-red-soft); color: var(--i-red);
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  padding: 2px 8px; letter-spacing: 0.4px; text-transform: uppercase;
  border-radius: 0; display: inline-block;
}

/* ── GRID SCROLL — ensure grids use internal datatable scroller ── */
.ind-grid {
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}
.ind-grid .datatable,
.ind-grid .dt-instance {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ind-grid .dt-scrollable {
  flex: 1;
  overflow: auto !important;
}

/* Results can have 1000+ rows — cap its internal height. */
#tab-results .ind-grid {
  max-height: calc(100vh - 260px);
}

/* Legacy .ind-grid-wrap — keep clipped. */
.ind-grid-wrap { overflow: hidden !important; }

/* ── BUSY STATE — industrial feedback for heavy actions ── */
.ind-busy {
  position: relative;
  pointer-events: none;
  opacity: 0.75;
  animation: ind-busy-pulse 1.2s ease-in-out infinite;
}
@keyframes ind-busy-pulse {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 0.50; }
}
.ind-sb-busy {
  background: var(--i-accent) !important;
  color: #FFF !important;
  padding: 0 8px;
  animation: ind-busy-pulse 0.9s ease-in-out infinite;
}

/* =====================================================================
 *  LEGACY .btn-* — INDUSTRIAL RESKIN
 *  ---------------------------------------------------------------------
 *  The app still has a pile of buttons rendered by JS templates that use
 *  `.btn .btn-success`, `.btn .btn-warning`, `.btn-xs`, etc. (AI Match
 *  accept/reject, GSTIN row actions, saved-reco load/export/delete,
 *  column-filter apply/clear). Rather than touching every template, we
 *  override the legacy classes here so they match the industrial design:
 *  sharp 1px borders, zero radius, mono uppercase, semantic colours
 *  (green/amber/red/accent) driven by the variant class.
 *
 *  Scoped so modal (.modal) and reset-confirm surfaces keep their
 *  already-industrial overrides — those are more specific and win via
 *  specificity.
 * =================================================================== */
.btn, .btn-xs {
  background: var(--i-surface) !important;
  color: var(--i-ink) !important;
  border: 1px solid var(--i-grid) !important;
  border-radius: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 6px 10px;
  transition: background 120ms, color 120ms, border-color 120ms !important;
}
.btn:hover, .btn-xs:hover {
  transform: none !important;
  box-shadow: none !important;
  background: var(--i-row-head) !important;
  border-color: var(--i-ink-soft) !important;
}
.btn-xs { padding: 4px 8px !important; font-size: 9px !important; }

/* Primary = orange accent — primary action */
.btn.btn-primary {
  background: var(--i-accent) !important;
  color: #FFF !important;
  border-color: var(--i-accent) !important;
}
.btn.btn-primary:hover {
  background: #D44A0A !important;
  border-color: #D44A0A !important;
}
/* Secondary = neutral ghost — view/filter/exports */
.btn.btn-secondary {
  background: var(--i-surface) !important;
  color: var(--i-ink) !important;
  border-color: var(--i-grid) !important;
}
.btn.btn-secondary:hover {
  background: var(--i-row-head) !important;
  border-color: var(--i-ink-soft) !important;
}
/* Success = green — accept / confirm */
.btn.btn-success {
  background: var(--i-green-soft) !important;
  color: var(--i-green) !important;
  border-color: var(--i-green) !important;
}
.btn.btn-success:hover {
  background: var(--i-green) !important;
  color: #FFF !important;
}
/* Warning = amber — reject / unlink / clear */
.btn.btn-warning {
  background: var(--i-amber-soft) !important;
  color: var(--i-amber) !important;
  border-color: var(--i-amber) !important;
}
.btn.btn-warning:hover {
  background: var(--i-amber) !important;
  color: #FFF !important;
}
/* Danger = red — delete / reset */
.btn.btn-danger {
  background: var(--i-red-soft) !important;
  color: var(--i-red) !important;
  border-color: var(--i-red) !important;
}
.btn.btn-danger:hover {
  background: var(--i-red) !important;
  color: #FFF !important;
}
.btn.btn-ghost {
  background: transparent !important;
  color: var(--i-ink-soft) !important;
  border-color: var(--i-grid) !important;
  box-shadow: none !important;
}
.btn.btn-ghost:hover {
  background: var(--i-row-alt) !important;
  color: var(--i-ink) !important;
}
/* Kill gradient/icon flourishes inherited from the legacy .btn base */
.btn::before, .btn::after { display: none !important; content: none !important; }
.btn .ico { filter: none; }

/* =====================================================================
 *  AI MATCH TAB — strip remaining legacy cyan accents, industrial paint
 * =================================================================== */
#tab-match .match-panels,
#tab-match .ind-match-panels {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  gap: 10px;
}
#tab-match .match-panel,
#tab-match .ind-match-panel {
  background: var(--i-surface) !important;
  border: 1px solid var(--i-grid) !important;
  border-top: 1px solid var(--i-grid) !important;   /* kill cyan 3px top */
  border-radius: 0 !important;
  box-shadow: none !important;
}
#tab-match .match-panel:nth-child(3),
#tab-match .ind-match-panel:nth-child(3) {
  border-top-color: var(--i-grid) !important;        /* kill orange */
}
#tab-match .match-panel-header,
#tab-match .ind-match-panel-head {
  background: var(--i-row-head) !important;
  color: var(--i-ink-soft) !important;
  border-bottom: 1px solid var(--i-grid) !important;
  padding: 8px 12px !important;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
#tab-match .match-panel-header h4,
#tab-match .ind-match-panel-title {
  color: var(--i-ink) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  margin: 0;
}
#tab-match .match-panel-header input,
#tab-match .ind-match-filter {
  background: var(--i-surface) !important;
  color: var(--i-ink) !important;
  border: 1px solid var(--i-grid) !important;
  border-radius: 0 !important;
  padding: 4px 8px !important;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  min-width: 140px;
  margin-left: auto;
}
#tab-match .match-panel-header input:focus,
#tab-match .ind-match-filter:focus {
  outline: none;
  border-color: var(--i-accent) !important;
}

/* SELECTED · 2B / BOOKS — strip cyan dashed, use industrial grid */
#tab-match .selected-box,
#tab-match .ind-sel-box {
  background: var(--i-row-alt) !important;
  border: 1px dashed var(--i-ink-mute) !important;
  border-radius: 0 !important;
  padding: 12px !important;
  min-height: 80px;
}
#tab-match .selected-box::before,
#tab-match .ind-sel-box::before {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.6px !important;
  color: var(--i-ink-mute) !important;
  text-transform: uppercase !important;
  background: transparent !important;
  padding: 0 !important;
}
#tab-match .sel-details,
#tab-match .ind-sel-details {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--i-ink-soft);
}
#tab-match .link-arrow,
#tab-match .ind-link-arrow {
  color: var(--i-accent);
  font-weight: 700;
}

/* Match list rows — sharpen */
#tab-match .match-list,
#tab-match .ind-match-list {
  background: var(--i-surface) !important;
  max-height: 420px;
  overflow: auto;
}
#tab-match .match-list .row,
#tab-match .ind-match-list .row,
#tab-match .match-list .match-row,
#tab-match .ind-match-list .match-row {
  background: var(--i-surface) !important;
  border-bottom: 1px solid var(--i-grid) !important;
  border-radius: 0 !important;
  padding: 8px 12px !important;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--i-ink);
  cursor: pointer;
}
#tab-match .match-list .row:hover,
#tab-match .ind-match-list .row:hover,
#tab-match .match-list .match-row:hover,
#tab-match .ind-match-list .match-row:hover {
  background: var(--i-row-head) !important;
  border-left: 3px solid var(--i-accent);
  padding-left: 9px !important;
}
#tab-match .match-list .row.selected,
#tab-match .ind-match-list .row.selected,
#tab-match .match-list .match-row.selected,
#tab-match .ind-match-list .match-row.selected {
  background: var(--i-accent-soft) !important;
  border-left: 3px solid var(--i-accent) !important;
  padding-left: 9px !important;
  color: var(--i-ink) !important;
}

/* AI.CONFIDENCE suggestions table — confidence pill industrial */
.conf-badge {
  display: inline-block;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  border-radius: 0;
  border: 1px solid currentColor;
}
.conf-badge.conf-high {
  background: var(--i-green-soft) !important;
  color: var(--i-green) !important;
}
.conf-badge.conf-med {
  background: var(--i-amber-soft) !important;
  color: var(--i-amber) !important;
}
.conf-badge.conf-low {
  background: var(--i-red-soft) !important;
  color: var(--i-red) !important;
}

/* Quick Match candidate table row hover and selection styling */
#qm-candidates-body tr:hover td {
  background: var(--i-row-head) !important;
  color: var(--i-ink) !important;
}
#qm-candidates-body tr.selected td {
  background: var(--i-accent-soft) !important;
  color: var(--i-ink) !important;
  box-shadow: inset 3px 0 0 var(--i-accent);
}