* { font-family: 'Inter', system-ui, sans-serif; }

#drawer {
  position: fixed; top: 0; right: -520px; width: 520px; height: 100vh;
  background: white; border-left: 1px solid #e2e8f0; z-index: 50;
  transition: right 0.2s ease; overflow: hidden; display: flex; flex-direction: column;
}
#drawer.open { right: 0; }
#drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.15); z-index: 40; display: none;
}
#drawer-overlay.open { display: block; }

.issue-badge { display:inline-block; padding:1px 7px; border-radius:4px; font-size:11px; font-weight:600; white-space:nowrap; }
.issue-NO_GATEWAY_MATCH    { background:#fef3c7; color:#92400e; }
.issue-NO_BANK_MATCH       { background:#fee2e2; color:#991b1b; }
.issue-AMOUNT_MISMATCH     { background:#ffedd5; color:#9a3412; }
.issue-MISSING_UTR         { background:#f1f5f9; color:#475569; }
.issue-UNKNOWN_GATEWAY     { background:#f3e8ff; color:#6b21a8; }
.issue-ORDER_NOT_FOUND     { background:#fee2e2; color:#991b1b; }
.issue-DUPLICATE           { background:#fef9c3; color:#713f12; }
.issue-MATCHED_ROW_DELETED { background:#f1f5f9; color:#64748b; }
.issue-MATCHED_ROW_MISSING { background:#f1f5f9; color:#64748b; }

.status-badge { display:inline-block; padding:1px 7px; border-radius:4px; font-size:11px; font-weight:600; }
.status-ACTIVE               { background:#f1f5f9; color:#475569; }
.status-MATCHED              { background:#dcfce7; color:#166534; }
.status-MATCHED_WITH_DIFFERENCE { background:#d1fae5; color:#065f46; }
.status-IGNORED              { background:#f1f5f9; color:#94a3b8; }
.status-DELETED              { background:#f1f5f9; color:#94a3b8; text-decoration:line-through; }
.status-RUNNING              { background:#dbeafe; color:#1e40af; }
.status-SUCCEEDED            { background:#dcfce7; color:#166534; }
.status-FAILED               { background:#fee2e2; color:#991b1b; }
.status-QUEUED               { background:#f1f5f9; color:#64748b; }

.src-badge { display:inline-block; padding:1px 7px; border-radius:4px; font-size:11px; font-weight:500; }
.src-bank      { background:#dbeafe; color:#1e40af; }
.src-gokwik    { background:#dcfce7; color:#166534; }
.src-snapmint  { background:#f3e8ff; color:#6b21a8; }
.src-bluedart  { background:#ffedd5; color:#9a3412; }
.src-delhivery { background:#fef9c3; color:#713f12; }
.src-other     { background:#f1f5f9; color:#475569; }

.nav-item {
  display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:6px;
  cursor:pointer; color:#94a3b8; font-size:13px; font-weight:500; transition:all 0.1s;
  user-select:none;
}
.nav-item:hover  { background:rgba(255,255,255,0.07); color:#e2e8f0; }
.nav-item.active { background:#4f46e5; color:white; }
.nav-item svg    { width:15px; height:15px; flex-shrink:0; }

/* Expandable category groups */
.nav-group { margin-top: 6px; }
.nav-group:first-child { margin-top: 0; }
.nav-group-header {
  user-select: none;
  color: #cbd5e1;                      /* slightly brighter than nav items */
  font-size: 12px;
  letter-spacing: 0.02em;
  padding-top: 7px;
  padding-bottom: 7px;
}
.nav-group-header:hover { color: white; }
.nav-group.open  .nav-group-header { color: #e2e8f0; }
.nav-group .nav-subs { display:none; padding-top: 2px; padding-bottom: 4px; }
.nav-group.open .nav-subs { display:block; }
.nav-group.open .nav-chevron { transform: rotate(0deg); color: #94a3b8; }
.nav-group:not(.open) .nav-chevron { transform: rotate(-90deg); color: #64748b; }
.nav-chevron { transition: transform 0.15s ease; width:12px; height:12px; }
.nav-sub { padding-left:26px; font-size:0.8rem; }
.nav-sub-dot { width:5px; height:5px; background:#475569; border-radius:50%; flex-shrink:0; }
.nav-item.nav-sub.active .nav-sub-dot { background:white; }

.btn {
  display:inline-flex; align-items:center; gap:5px; padding:6px 13px;
  border-radius:6px; font-size:13px; font-weight:500; cursor:pointer;
  border:none; outline:none; transition:all 0.1s;
}
.btn:disabled { opacity:0.5; cursor:not-allowed; }
.btn-primary   { background:#4f46e5; color:white; }
.btn-primary:hover:not(:disabled)   { background:#4338ca; }
.btn-secondary { background:white; color:#374151; border:1px solid #d1d5db; }
.btn-secondary:hover:not(:disabled) { background:#f9fafb; }
.btn-danger    { background:#dc2626; color:white; }
.btn-danger:hover:not(:disabled)    { background:#b91c1c; }
.btn-sm { padding:4px 10px; font-size:12px; }

input, select, textarea {
  font-size:13px; padding:6px 10px; border:1px solid #d1d5db; border-radius:6px;
  background:white; color:#374151; outline:none; font-family:inherit;
}
input:focus, select:focus, textarea:focus {
  border-color:#6366f1; box-shadow:0 0 0 2px rgba(99,102,241,0.12);
}

table { width:100%; border-collapse:collapse; font-size:13px; }
th {
  font-size:11px; font-weight:600; color:#64748b; text-transform:uppercase;
  letter-spacing:.04em; padding:10px 12px; text-align:left;
  border-bottom:1px solid #e2e8f0; white-space:nowrap;
}
td { padding:8px 12px; border-bottom:1px solid #f1f5f9; color:#374151; }
tbody tr { cursor:pointer; }
tbody tr:hover { background:#f8fafc; }
tbody tr.row-selected { background:#eff6ff !important; }

/* Sync & Jobs table — readable font, full label, uses remaining width */
table.sync-jobs-table { table-layout: auto; }
table.sync-jobs-table th {
  font-size: 12px; font-weight: 600; color: #64748b;
  padding: 10px 12px; white-space: nowrap;
}
table.sync-jobs-table td { padding: 10px 12px; }
table.sync-jobs-table td:nth-child(4) {
  /* Label column — expands to fill remaining space, wraps long lines */
  width: 100%; white-space: normal; word-break: break-word;
  line-height: 1.4;
}

/* Advance-Held bucket pills */
.adv-bucket {
  padding: 6px 12px; font-size: 12px; font-weight: 500; color: #475569;
  background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 999px;
  cursor: pointer; transition: all 0.15s;
}
.adv-bucket:hover { background: #e2e8f0; color: #1e293b; }
.adv-bucket.active { background: #4f46e5; border-color: #4f46e5; color: white; }
.adv-bucket span { margin-left: 4px; opacity: 0.8; }

/* GSTR-1 section tabs */
.gst-tab {
  padding: 10px 14px; font-size: 12.5px; font-weight: 500; color: #64748b;
  border: none; background: transparent; cursor: pointer;
  border-bottom: 2px solid transparent; transition: all 0.15s;
}
.gst-tab:hover { color: #334155; background: #f8fafc; }
.gst-tab.active { color: #4f46e5; border-bottom-color: #4f46e5; }
.gst-tab span { margin-left: 4px; }

/* ── Queue-mode: lock outer scroll so sticky column headers work reliably ── */
#content-area.queue-mode {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}
#content-area.queue-mode .xl-queue-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 20px 20px 0 20px;
  gap: 12px;
}
#content-area.queue-mode .xl-queue-table-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  margin-bottom: 20px;
}
#content-area.queue-mode #sq-tbl {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
#content-area.queue-mode [id^="xl-chipbar-"] { flex-shrink: 0; }
#content-area.queue-mode .xl-table-wrap { max-height: none; flex: 1; min-height: 0; }

/* Excel-like per-sheet table — natural widths + horizontal scroll + sticky header + sortable + resizable */
.xl-table-wrap { overflow: auto; max-height: calc(100vh - 320px); position: relative; border-radius: 6px; }
table.xl-table { width: auto; min-width: 100%; table-layout: fixed; }
table.xl-table th,
table.xl-table td {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 7px 10px; font-size: 12.5px;
}
table.xl-table thead th {
  position: sticky; top: 0; background: #f8fafc; z-index: 2;
  border-bottom: 1px solid #e2e8f0; padding: 6px 8px;
  user-select: none;
}
table.xl-table thead tr.xl-filter-row th {
  background: white; padding: 4px 6px; border-bottom: 1px solid #e2e8f0;
}
table.xl-table th .xl-col-wrap {
  display: flex; align-items: center; gap: 4px;
  padding-right: 8px;  /* room for resize handle */
}
table.xl-table th .xl-col-label {
  flex: 1; cursor: pointer; user-select: none;
  font-size: 11px; font-weight: 600; color: #475569;
  text-transform: uppercase; letter-spacing: 0.03em;
}
table.xl-table th .xl-col-label:hover { color: #4f46e5; }
table.xl-table th .xl-sort-ind { font-size: 10px; color: #94a3b8; }
table.xl-table th .xl-sort-ind.active { color: #4f46e5; }
.xl-col-resize {
  position: absolute; top: 0; right: 0; bottom: 0; width: 5px;
  cursor: col-resize; background: transparent; z-index: 3;
}
.xl-col-resize:hover { background: #4f46e5; opacity: 0.5; }
.xl-filter-input {
  width: 100%; font-size: 11px; padding: 3px 6px;
  border: 1px solid #e2e8f0; border-radius: 3px; background: white;
}
.xl-filter-input:focus { outline: none; border-color: #4f46e5; }
.xl-filter-input.has-value { background: #fef9c3; border-color: #facc15; }

/* Excel-style filter dropdown (click header to toggle) */
.xl-col-btn {
  display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px;
  border-radius:3px; color:#94a3b8; cursor:pointer; flex-shrink:0;
}
.xl-col-btn:hover { background:#e0e7ff; color:#4f46e5; }
.xl-col-btn.active { color:#4f46e5; background:#e0e7ff; }
.xl-col-filter-badge {
  position:absolute; top:2px; right:8px; width:6px; height:6px;
  background:#f59e0b; border-radius:50%;
}
.xl-popup {
  position:fixed; background:white; border:1px solid #cbd5e1; border-radius:6px;
  box-shadow: 0 10px 30px -5px rgba(0,0,0,0.18); z-index:1000;
  width: 280px; max-height: 460px; display:flex; flex-direction:column;
  font-size: 12.5px;
}
.xl-popup-sec { padding:8px 10px; border-bottom:1px solid #f1f5f9; }
.xl-popup-sec:last-child { border-bottom:none; }
.xl-popup button.xl-pop-btn {
  display:block; width:100%; text-align:left; padding:5px 8px; font-size:12px;
  border-radius:4px; color:#334155;
}
.xl-popup button.xl-pop-btn:hover { background:#f1f5f9; }
.xl-popup select, .xl-popup input[type=text], .xl-popup input[type=number], .xl-popup input[type=date] {
  width:100%; font-size:12px; padding:4px 6px; border:1px solid #cbd5e1; border-radius:3px;
}
.xl-values-list {
  overflow-y:auto; max-height:200px; padding:2px 10px;
  border-top:1px solid #f1f5f9;
}
.xl-values-list label {
  display:flex; align-items:center; gap:6px; padding:3px 0; font-size:12px;
  color:#334155; cursor:pointer; user-select:none;
}
.xl-values-list label:hover { color:#4f46e5; }
.xl-values-list .xl-val-count {
  margin-left:auto; color:#94a3b8; font-size:11px; font-family:'SFMono-Regular',monospace;
}
.xl-popup-actions { display:flex; gap:6px; padding:8px 10px; background:#f8fafc; border-top:1px solid #e2e8f0; }
.xl-popup-actions button { flex:1; font-size:12px; padding:5px 10px; border-radius:4px; font-weight:500; }
.xl-popup-actions .btn-apply { background:#4f46e5; color:white; }
.xl-popup-actions .btn-apply:hover { background:#4338ca; }
.xl-popup-actions .btn-clear { background:white; color:#64748b; border:1px solid #cbd5e1; }
.xl-popup-actions .btn-clear:hover { background:#f1f5f9; }

/* Filter chip bar above table */
.xl-filter-bar {
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  padding:8px 12px; background:#eef2ff; border:1px solid #c7d2fe;
  border-radius:6px; font-size:12px;
}
.xl-filter-chip {
  display:inline-flex; align-items:center; gap:5px; padding:3px 5px 3px 9px;
  background:white; border:1px solid #c7d2fe; border-radius:9999px;
  color:#3730a3; font-size:11.5px;
}
.xl-filter-chip button { width:16px; height:16px; border-radius:50%; background:#e0e7ff; color:#4f46e5;
  display:inline-flex; align-items:center; justify-content:center; font-size:11px; line-height:1; }
.xl-filter-chip button:hover { background:#c7d2fe; }

/* Match cell pill (the rolled-up status column) */
.match-pill {
  display:inline-flex; align-items:center; gap:5px; padding:2px 9px;
  border-radius:9999px; font-size:11.5px; font-weight:500;
  border:1px solid transparent; white-space:nowrap;
}
.match-ok       { background:#d1fae5; color:#065f46; border-color:#a7f3d0; }
.match-diff     { background:#fef3c7; color:#92400e; border-color:#fde68a; }
.match-pending  { background:#e0e7ff; color:#3730a3; border-color:#c7d2fe; }
.match-orphan   { background:#fee2e2; color:#991b1b; border-color:#fecaca; }
.match-ignored  { background:#f1f5f9; color:#64748b; border-color:#e2e8f0; }
.match-pill .match-sub { color:inherit; opacity:.75; font-weight:400; margin-left:4px; }

/* Source pill — colored badge per gateway source */
.src-pill {
  display:inline-flex; align-items:center; padding:2px 8px; border-radius:4px;
  font-size:11px; font-weight:500; letter-spacing:0.02em;
  border:1px solid transparent; cursor:pointer; user-select:none;
}
.src-pill:hover { filter:brightness(0.97); }
.src-easebuzz   { background:#dbeafe; color:#1e40af; border-color:#bfdbfe; }
.src-worldline  { background:#fef3c7; color:#92400e; border-color:#fde68a; }
.src-snapmint   { background:#d1fae5; color:#065f46; border-color:#a7f3d0; }
.src-bluedart   { background:#fee2e2; color:#991b1b; border-color:#fecaca; }
.src-delhivery  { background:#ede9fe; color:#5b21b6; border-color:#ddd6fe; }
.src-dtdc       { background:#ffedd5; color:#9a3412; border-color:#fed7aa; }
.src-paytm      { background:#cffafe; color:#155e75; border-color:#a5f3fc; }
.src-other      { background:#f1f5f9; color:#475569; border-color:#e2e8f0; }
.src-twid       { background:#fce7f3; color:#9d174d; border-color:#fbcfe8; }

/* Truncated UTR with tooltip */
.utr-short { font-family:'SFMono-Regular',monospace; font-size:11.5px; color:#475569; cursor:help; }
.utr-short:hover { color:#4f46e5; }

/* Row action menu (⋯) */
.row-actions { position:relative; }
.row-actions-btn {
  width:22px; height:22px; border-radius:4px; color:#94a3b8;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.row-actions-btn:hover { background:#f1f5f9; color:#475569; }

/* Bank narration cleanup — smaller, subdued, with hover for full */
.bank-nar { font-size:11.5px; color:#64748b; cursor:help; }

/* ════════════════════════════════════════════════════════════
   Two-track recon visuals — row state coloring, KPI gradients,
   lens chips, error strip, session switcher, pulse dots
   ════════════════════════════════════════════════════════════ */

/* Row-level state tinting + 3px left accent bar.  Makes the state of every
   row visible at a glance — bank/order/both/matched/ignored. */
table.xl-table td { transition: background-color 0.15s ease; }
tr.row-matched       td { background: white; }
tr.row-bank-issue    td { background: rgba(253, 230, 138, 0.22); }
tr.row-bank-issue    td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }
tr.row-order-issue   td { background: rgba(199, 210, 254, 0.28); }
tr.row-order-issue   td:first-child { box-shadow: inset 3px 0 0 #6366f1; }
tr.row-both-issue    td { background: rgba(254, 202, 202, 0.30); }
tr.row-both-issue    td:first-child { box-shadow: inset 3px 0 0 #e11d48; }
tr.row-ignored       td { background: #f8fafc; color: #94a3b8; }
tr.row-ignored       td:first-child { box-shadow: inset 3px 0 0 #94a3b8; }
tr.row-old-year      td { background: rgba(148, 163, 184, 0.08); }
tr.row-old-year      td:first-child { box-shadow: inset 3px 0 0 #64748b; }

/* Old Year pill — distinct from green matched + amber issue */
.match-pill.old-year-pill {
  background: #e2e8f0; color: #334155; border-color: #cbd5e1;
  font-style: italic;
}

/* Hover: subtle lift. Combined with sticky-header-z so hover stays below. */
table.xl-table tbody tr { cursor: pointer; }
table.xl-table tbody tr:hover td { filter: brightness(0.97); }

/* Slightly larger type + padding — less cramped, errors easier to scan */
table.xl-table th, table.xl-table td { padding: 9px 10px; font-size: 13px; }

/* Sticky-right column — opt-in via .sticky-right on a th/td.  Use it to
   pin an action column (e.g. Allocate button) to the right edge of the
   viewport so users on narrower screens don't have to scroll horizontally
   to find it.  Subtle left-edge shadow signals the column floats above
   scrolled content. */
table.xl-table th.sticky-right,
table.xl-table td.sticky-right {
  position: sticky;
  right: 0;
  background: white;
  box-shadow: -6px 0 8px -6px rgba(15, 23, 42, 0.12);
  z-index: 1;
}
table.xl-table thead th.sticky-right {
  background: #f8fafc;   /* match the rest of the sticky-top header */
  z-index: 3;            /* above the sticky-top header band */
}

/* Sticky-left column — mirror of sticky-right.  Opt-in via .sticky-left on
   a th/td to pin the row's primary identifier columns (chain id / order
   ref) so the operator never loses context during horizontal scroll.
   Multiple sticky-left cells in the same row need explicit inline `left:`
   offsets matching the cumulative width of preceding sticky-left columns.
   Subtle right-edge shadow signals the column floats above scrolled
   content. */
table.xl-table th.sticky-left,
table.xl-table td.sticky-left {
  position: sticky;
  left: 0;
  background: white;
  box-shadow: 6px 0 8px -6px rgba(15, 23, 42, 0.12);
  z-index: 1;
}
table.xl-table thead th.sticky-left {
  background: #f8fafc;   /* match the rest of the sticky-top header */
  z-index: 3;            /* above body sticky-left AND the sticky-top band */
}

/* Row-state tints carry over to sticky cells (both -left and -right) so the
   state colour remains visible on the pinned columns.  Uses opaque
   equivalents of the rgba tints (which would otherwise let scrolling cells
   bleed through transparency). */
tr.row-bank-issue  td.sticky-left,
tr.row-bank-issue  td.sticky-right { background: #fef9d6; }
tr.row-order-issue td.sticky-left,
tr.row-order-issue td.sticky-right { background: #e6ebfb; }
tr.row-both-issue  td.sticky-left,
tr.row-both-issue  td.sticky-right { background: #fde0e0; }
tr.row-ignored     td.sticky-left,
tr.row-ignored     td.sticky-right { background: #f8fafc; }
tr.row-old-year    td.sticky-left,
tr.row-old-year    td.sticky-right { background: #f1f5f9; }

/* KPI accent variants — same kpi component, different gradient + border */
.kpi { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.kpi.clickable { cursor: pointer; }
.kpi.clickable:hover { transform: translateY(-2px); box-shadow: 0 6px 16px -4px rgba(0,0,0,0.08); }
.kpi.kpi-total    { background: linear-gradient(135deg, #f8fafc 0%, white 60%); }
.kpi.kpi-bank     { background: linear-gradient(135deg, #fef3c7 0%, white 70%); border-color:#fde68a; }
.kpi.kpi-order    { background: linear-gradient(135deg, #e0e7ff 0%, white 70%); border-color:#c7d2fe; }
.kpi.kpi-both     { background: linear-gradient(135deg, #fee2e2 0%, white 70%); border-color:#fecaca; }
.kpi.kpi-cancel   { background: linear-gradient(135deg, #f1f5f9 0%, white 70%); border-color:#cbd5e1; }
.kpi.kpi-done     { background: linear-gradient(135deg, #d1fae5 0%, white 70%); border-color:#a7f3d0; }
.kpi.kpi-selected { outline: 2px solid #4f46e5; outline-offset: -1px; }

/* Recon "lens" chip bar — segmented control look.
   Switches to flex-wrap when there are too many chips to fit on one line
   (Order Lifecycle has 15 status chips — would overflow on narrow screens). */
.lens-bar {
  display: flex;
  flex-wrap: wrap;
  padding: 3px;
  background: #f1f5f9;
  border-radius: 8px;
  gap: 3px;
  row-gap: 4px;
}
.lens-chip {
  padding: 5px 12px; font-size: 12px; border-radius: 6px; cursor: pointer;
  color: #64748b; font-weight: 500; white-space: nowrap;
  transition: all 0.12s ease; display: inline-flex; align-items: center; gap: 5px;
}
.lens-chip:hover:not(.active) { color: #4f46e5; background: rgba(255,255,255,0.6); }
.lens-chip.active {
  background: white; color: #4f46e5; font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 1px 2px rgba(15,23,42,0.04);
}
.lens-chip-count {
  font-size: 10.5px; padding: 1px 6px; border-radius: 9999px;
  background: rgba(99,102,241,0.12); color: #4f46e5; font-weight: 600;
}
.lens-chip.active .lens-chip-count { background: #4f46e5; color: white; }

/* Error summary chips (issue types found in loaded rows) */
.err-strip { display: flex; flex-wrap: wrap; gap: 6px; }
.err-chip {
  display:inline-flex; align-items:center; gap:6px; padding: 3px 10px;
  font-size: 11.5px; border-radius: 9999px; cursor: pointer;
  background: white; border: 1px solid #e2e8f0; color: #475569;
  transition: all 0.12s ease; user-select: none; white-space: nowrap;
}
.err-chip:hover { border-color: #6366f1; color: #4338ca; transform: translateY(-1px); }
.err-chip.active { background: #4f46e5; color: white; border-color: #4f46e5; }
.err-chip-count  { font-weight: 600; font-size: 10.5px; opacity: 0.85; }

/* Session switcher — pinned at top of sidebar */
.session-switcher {
  margin: 8px 8px 16px 8px; padding: 10px 10px;
  background: linear-gradient(135deg, #1e293b 0%, #0b1220 100%);
  border: 1px solid #334155; border-radius: 8px;
}
.session-label { font-size: 9.5px; color: #94a3b8; text-transform: uppercase;
                  letter-spacing: 0.08em; margin-bottom: 6px; font-weight: 600; }
.session-btns { display: flex; gap: 3px; padding: 3px; background: #0f172a; border-radius: 6px; }
.session-btn {
  flex: 1; padding: 5px 6px; font-size: 11px; border-radius: 4px;
  color: #cbd5e1; text-align: center; cursor: pointer; font-weight: 500;
  transition: all 0.12s ease;
}
.session-btn:hover:not(.active) { background: rgba(255,255,255,0.06); color: white; }
.session-btn.active { background: #4f46e5; color: white; font-weight: 600; }

/* Empty state when filter/lens returns nothing */
.empty-state {
  padding: 48px 20px; text-align: center;
  background: linear-gradient(180deg, #f8fafc 0%, white 100%);
}
.empty-state-icon { font-size: 40px; opacity: 0.35; margin-bottom: 10px; }
.empty-state-title { font-size: 14px; font-weight: 600; color: #334155; margin-bottom: 3px; }
.empty-state-sub { font-size: 12px; color: #64748b; }

/* Pulsing dot for the newest unresolved row */
.pulse-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #ef4444; margin-right: 5px; animation: pulse 1.5s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Failed-payment-attempt chips (DECISION-014)
 *   .failed-attempt-chip          (yellow) — suggestion: "FA?"
 *   .failed-attempt-chip-done     (green)  — already marked: "FA ✓" */
.failed-attempt-chip {
  display: inline-block;
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 4px;
  background: #fef3c7; color: #92400e; border: 1px solid #fcd34d;
  margin-right: 6px; vertical-align: middle;
  cursor: help;
}
.failed-attempt-chip.failed-attempt-chip-done {
  background: #dcfce7; color: #166534; border-color: #86efac;
}

.kpi { background:white; border:1px solid #e2e8f0; border-radius:8px; padding:16px 18px; }
.kpi-val { font-size:22px; font-weight:600; color:#0f172a; line-height:1.2; }
.kpi-lbl { font-size:11px; color:#64748b; margin-top:3px; text-transform:uppercase; letter-spacing:.04em; }
.kpi-sub { font-size:12px; font-weight:500; color:#64748b; margin-top:2px; }

.chip {
  display:inline-flex; align-items:center; gap:4px; padding:3px 10px;
  border-radius:9999px; font-size:12px; font-weight:500; cursor:pointer;
  border:1px solid transparent; transition:all 0.1s;
}

.mono { font-family:'SFMono-Regular','Consolas','Menlo',monospace; font-size:12px; }

.editable {
  cursor: text;
  position: relative;
  transition: background 0.1s;
}
.editable:hover {
  background: #f0f9ff;
  box-shadow: inset 0 0 0 1px #cbd5e1;
}
.editable.editing {
  padding: 0 !important;
  background: white !important;
}
.editable input, .editable select {
  width: 100%; height: 100%; min-height: 32px;
  border: 2px solid #6366f1; border-radius: 4px;
  padding: 4px 8px; outline: none; font: inherit; font-size: 13px;
  background: white; color: #1e293b;
}
.editable.saving { background: #fffbeb !important; }
.editable.saved { background: #dcfce7 !important; transition: background 0.8s ease; }
.editable.error { background: #fee2e2 !important; }

::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px; }
::-webkit-scrollbar-track { background:transparent; }

/* ════════════════════════════════════════════════════════════
   V2 — Bold redesign (Tier A)
   New classes coexist with legacy ones until render functions migrate.
   Brand: indigo → violet → fuchsia gradient. Inter w/ tabular-nums.
   ════════════════════════════════════════════════════════════ */

.brand-grad      { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%); }
.brand-grad-text { background: linear-gradient(135deg, #818cf8, #c084fc);
                   -webkit-background-clip: text; background-clip: text; color: transparent; }
.num             { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ── Sidebar v2 (dark theme, expandable groups) ──────────── */
.sb-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.sb-brand-mark {
  width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 11px;
  box-shadow: 0 4px 14px -4px rgba(99,102,241,0.5);
  flex-shrink: 0;
}
.sb-brand-title { color: white; font-size: 13.5px; font-weight: 600; line-height: 1.2; }
.sb-brand-sub   { color: #64748b; font-size: 10.5px; line-height: 1.2; margin-top: 2px;
                   display: flex; align-items: center; gap: 5px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981;
            animation: live-pulse 2s ease-in-out infinite; flex-shrink: 0; }
@keyframes live-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.nav-v2 {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 11px; border-radius: 8px;
  color: #94a3b8; font-size: 13px; font-weight: 500;
  cursor: pointer; user-select: none;
  transition: all 0.15s ease;
}
.nav-v2:hover { background: rgba(255,255,255,0.06); color: white; }
.nav-v2.active {
  background: linear-gradient(135deg, rgba(99,102,241,0.22), rgba(139,92,246,0.16));
  color: white;
  border-left: 2px solid #818cf8;
  padding-left: 9px;
}
.nav-v2 > svg { width: 15px; height: 15px; flex-shrink: 0; }
.nav-v2 .nav-label { flex: 1; }
.nav-v2 .nav-chev {
  width: 13px; height: 13px; flex-shrink: 0;
  color: #64748b;
  transition: transform 0.15s ease;
}
.nav-v2.open .nav-chev { transform: rotate(90deg); color: #94a3b8; }

.nav-subs-v2 {
  margin: 2px 0 4px 0;
  padding: 2px 0;
}
.nav-sub-v2 {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 11px 5px 38px;
  font-size: 12.5px; color: #94a3b8;
  border-radius: 6px; cursor: pointer;
  transition: all 0.15s ease;
}
.nav-sub-v2:hover { color: white; background: rgba(255,255,255,0.04); }
.nav-sub-v2.active {
  background: rgba(99,102,241,0.15); color: white;
  border-left: 2px solid #818cf8; padding-left: 36px;
  font-weight: 500;
}
.nav-sub-section {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 700; color: #475569;
  padding: 8px 11px 4px 28px;
  user-select: none;
}

/* Reports-only mid-level: collapsible section header (Audit / Settlements / Tax / Marketing).
   Clicking navigates to the section's first report AND auto-expands its children. */
.nav-sec-v2 {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 11px 5px 38px;
  font-size: 12px; color: #cbd5e1;
  font-weight: 500;
  border-radius: 6px; cursor: pointer;
  transition: all 0.15s ease;
}
.nav-sec-v2:hover { color: white; background: rgba(255,255,255,0.04); }
.nav-sec-v2 .nav-label { flex: 1; }
.nav-sec-v2 .nav-chev {
  width: 11px; height: 11px; flex-shrink: 0;
  color: #475569;
  transition: transform 0.15s ease;
}
.nav-sec-v2.open .nav-chev { transform: rotate(90deg); color: #94a3b8; }
.nav-sec-v2.active { color: white; }

/* Reports-only level 3: individual report item under an open section. */
.nav-rep-v2 {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 11px 4px 56px;
  font-size: 12px; color: #94a3b8;
  border-radius: 6px; cursor: pointer;
  transition: all 0.15s ease;
}
.nav-rep-v2:hover { color: white; background: rgba(255,255,255,0.04); }
.nav-rep-v2.active {
  background: rgba(99,102,241,0.15); color: white;
  border-left: 2px solid #818cf8; padding-left: 54px;
  font-weight: 500;
}

.nav-badge {
  font-size: 10px; padding: 1.5px 7px; border-radius: 999px;
  font-weight: 700; font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #f43f5e, #ec4899);
  color: white;
  box-shadow: 0 2px 6px -2px rgba(244,63,94,0.4);
  white-space: nowrap;
}
.nav-badge-amber  { background: linear-gradient(135deg, #f59e0b, #ea580c);
                    box-shadow: 0 2px 6px -2px rgba(245,158,11,0.4); }
.nav-badge-indigo { background: linear-gradient(135deg, #6366f1, #8b5cf6);
                    box-shadow: 0 2px 6px -2px rgba(99,102,241,0.4); }

/* Session switcher polish (override existing) */
.session-switcher {
  margin: 10px 10px 14px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 8px;
}
.session-label {
  font-size: 9.5px; color: #64748b; text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 6px; font-weight: 700;
  padding: 0 2px;
}
.session-btns { display: flex; gap: 2px; padding: 2px; background: rgba(0,0,0,0.2); border-radius: 7px; }
.session-btn {
  flex: 1; padding: 5px 6px; font-size: 11px; border-radius: 5px;
  color: #cbd5e1; text-align: center; cursor: pointer; font-weight: 600;
  transition: all 0.15s ease;
}
.session-btn:hover:not(.active) { background: rgba(255,255,255,0.06); color: white; }
.session-btn.active {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  box-shadow: 0 4px 12px -4px rgba(99,102,241,0.5);
}

/* ── Top bar v2 ──────────────────────────────────────────── */
.breadcrumb {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: #64748b;
}
.breadcrumb-sep { color: #cbd5e1; display: inline-flex; }
.breadcrumb-current { color: #0f172a; font-weight: 600; font-size: 13.5px; }

.sync-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: #64748b;
  padding: 4px 10px; border-radius: 999px;
  background: #f8fafc; border: 1px solid #e2e8f0;
  font-variant-numeric: tabular-nums;
}
.sync-pill .sync-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #10b981;
  flex-shrink: 0;
}
.sync-pill.syncing .sync-dot { background: #f59e0b; animation: sync-spin 1.2s linear infinite; }
.sync-pill.stale   .sync-dot { background: #94a3b8; }
.sync-pill.error   .sync-dot { background: #ef4444; }
@keyframes sync-spin { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.85); } }

.btn-brand {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white; border: none;
  box-shadow: 0 4px 14px -4px rgba(99,102,241,0.5);
  transition: box-shadow 0.2s ease, transform 0.1s ease;
}
.btn-brand:hover:not(:disabled) {
  box-shadow: 0 6px 18px -4px rgba(99,102,241,0.6);
  transform: translateY(-1px);
}
.btn-brand:active:not(:disabled) { transform: translateY(0); }

/* ── KPI tile v2 (bold) ──────────────────────────────────── */
.kpi-v2 {
  position: relative;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px 20px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kpi-v2.clickable { cursor: pointer; }
.kpi-v2.clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -8px rgba(15,23,42,0.12);
}
.kpi-v2 .kpi-blob {
  position: absolute; top: -30px; right: -30px;
  width: 120px; height: 120px; border-radius: 50%;
  opacity: 0.12; filter: blur(20px); pointer-events: none;
}
.kpi-v2 .kpi-head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.kpi-v2 .kpi-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kpi-v2 .kpi-icon svg { width: 18px; height: 18px; color: white; stroke-width: 2.5; }
.kpi-v2 .kpi-val-lg {
  position: relative;
  font-size: 30px; font-weight: 700; line-height: 1; color: #0f172a;
  font-variant-numeric: tabular-nums; letter-spacing: -0.025em;
}
.kpi-v2 .kpi-lbl-strong { position: relative; font-size: 13px; font-weight: 600; color: #0f172a; margin-top: 10px; }
.kpi-v2 .kpi-sub-soft   { position: relative; font-size: 11px; color: #64748b; margin-top: 2px; }

.kpi-icon-rose    { background: linear-gradient(135deg, #f43f5e, #db2777); box-shadow: 0 8px 16px -6px rgba(244,63,94,0.35); }
.kpi-icon-amber   { background: linear-gradient(135deg, #f59e0b, #ea580c); box-shadow: 0 8px 16px -6px rgba(245,158,11,0.35); }
.kpi-icon-indigo  { background: linear-gradient(135deg, #6366f1, #8b5cf6); box-shadow: 0 8px 16px -6px rgba(99,102,241,0.35); }
.kpi-icon-emerald { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 8px 16px -6px rgba(16,185,129,0.35); }
.kpi-icon-fuchsia { background: linear-gradient(135deg, #d946ef, #ec4899); box-shadow: 0 8px 16px -6px rgba(217,70,239,0.35); }
.kpi-icon-slate   { background: linear-gradient(135deg, #64748b, #475569); box-shadow: 0 8px 16px -6px rgba(100,116,139,0.3); }

.kpi-blob-rose    { background: #fb7185; }
.kpi-blob-amber   { background: #fbbf24; }
.kpi-blob-indigo  { background: #818cf8; }
.kpi-blob-emerald { background: #34d399; }
.kpi-blob-fuchsia { background: #e879f9; }
.kpi-blob-slate   { background: #94a3b8; }

.trend-chip {
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  font-weight: 600; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 3px;
}
.trend-up   { background: #fef2f2; color: #b91c1c; }
.trend-down { background: #ecfdf5; color: #047857; }
.trend-flat { background: #f1f5f9; color: #64748b; }
.trend-good { background: #ecfdf5; color: #047857; }
.trend-warn { background: #fffbeb; color: #b45309; }
.trend-info { background: #eef2ff; color: #4338ca; }

/* ── Gateway pills (brand colors per gateway) ────────────── */
.gw-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; padding: 2.5px 8px; border-radius: 6px;
  font-weight: 600; white-space: nowrap;
}
.gw-pill .gw-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.gw-pill-gokwik     { background: #ecfdf5; color: #047857; }
.gw-pill-gokwik     .gw-dot { background: #10b981; }
.gw-pill-snapmint   { background: #eef2ff; color: #4338ca; }
.gw-pill-snapmint   .gw-dot { background: #6366f1; }
.gw-pill-iloan      { background: #fffbeb; color: #b45309; }
.gw-pill-iloan      .gw-dot { background: #f59e0b; }
.gw-pill-razorpay   { background: #fdf2f8; color: #be185d; }
.gw-pill-razorpay   .gw-dot { background: #ec4899; }
.gw-pill-cashfree   { background: #fdf4ff; color: #a21caf; }
.gw-pill-cashfree   .gw-dot { background: #d946ef; }
.gw-pill-paytm      { background: #ecfeff; color: #0e7490; }
.gw-pill-paytm      .gw-dot { background: #06b6d4; }
.gw-pill-easebuzz   { background: #eff6ff; color: #1d4ed8; }
.gw-pill-easebuzz   .gw-dot { background: #3b82f6; }
.gw-pill-worldline  { background: #fef3c7; color: #92400e; }
.gw-pill-worldline  .gw-dot { background: #d97706; }
.gw-pill-bluedart   { background: #fef2f2; color: #b91c1c; }
.gw-pill-bluedart   .gw-dot { background: #ef4444; }
.gw-pill-delhivery  { background: #f5f3ff; color: #6d28d9; }
.gw-pill-delhivery  .gw-dot { background: #8b5cf6; }
.gw-pill-twid       { background: #fff1f2; color: #be123c; }
.gw-pill-twid       .gw-dot { background: #f43f5e; }
.gw-pill-bank       { background: #f0fdfa; color: #115e59; }
.gw-pill-bank       .gw-dot { background: #14b8a6; }
.gw-pill-other      { background: #f1f5f9; color: #475569; }
.gw-pill-other      .gw-dot { background: #94a3b8; }
.gw-pill-shopify    { background: #ecfdf5; color: #166534; }
.gw-pill-shopify    .gw-dot { background: #16a34a; }

/* ── Hover-glow rows — applies to every .xl-table automatically ──
   Overrides the legacy `filter: brightness(0.97)` rule with a tasteful
   gradient sweep. Specificity wins via the `td` selector. ─── */
table.xl-table tbody tr:hover td {
  background: linear-gradient(90deg, rgba(99,102,241,0.06), rgba(139,92,246,0.03), transparent);
  filter: none;
}
/* Preserve the existing per-state row tinting on hover (don't wipe row-matched / row-bank-issue / etc.) */
table.xl-table tbody tr.row-matched:hover    td { background: linear-gradient(90deg, rgba(99,102,241,0.06), rgba(139,92,246,0.03), white); }
table.xl-table tbody tr.row-bank-issue:hover td { background: linear-gradient(90deg, rgba(245,158,11,0.18), rgba(245,158,11,0.10), rgba(253,230,138,0.22)); }
table.xl-table tbody tr.row-order-issue:hover td { background: linear-gradient(90deg, rgba(99,102,241,0.22), rgba(99,102,241,0.14), rgba(199,210,254,0.28)); }
table.xl-table tbody tr.row-both-issue:hover  td { background: linear-gradient(90deg, rgba(244,63,94,0.20), rgba(244,63,94,0.12), rgba(254,202,202,0.30)); }
table.xl-table tbody tr.row-ignored:hover     td { background: linear-gradient(90deg, rgba(148,163,184,0.10), rgba(148,163,184,0.05), #f8fafc); }

/* ── Toast queue v2 (FIFO, persistent until dismissed) ───── */
#toast-queue {
  position: fixed; bottom: 16px; right: 16px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 200; pointer-events: none; max-width: 380px;
}
.toast-v2 {
  pointer-events: auto;
  background: white; border: 1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 10px 30px -10px rgba(15,23,42,0.18);
  padding: 11px 12px 11px 14px;
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12.5px; color: #0f172a; line-height: 1.4;
  animation: toast-slide-in 0.25s ease-out;
  position: relative; overflow: hidden;
}
.toast-v2::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
}
.toast-v2.toast-ok::before   { background: linear-gradient(180deg, #10b981, #059669); }
.toast-v2.toast-err::before  { background: linear-gradient(180deg, #f43f5e, #be123c); }
.toast-v2.toast-warn::before { background: linear-gradient(180deg, #f59e0b, #ea580c); }
.toast-v2.toast-info::before { background: linear-gradient(180deg, #6366f1, #8b5cf6); }
.toast-v2.fade-out { animation: toast-slide-out 0.2s ease-in forwards; }
.toast-v2 .toast-icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.toast-v2 .toast-icon.ok   { color: #10b981; }
.toast-v2 .toast-icon.err  { color: #f43f5e; }
.toast-v2 .toast-icon.warn { color: #f59e0b; }
.toast-v2 .toast-icon.info { color: #6366f1; }
.toast-v2 .toast-msg { flex: 1; min-width: 0; word-wrap: break-word; }
.toast-v2 .toast-close {
  width: 16px; height: 16px; color: #94a3b8; cursor: pointer; flex-shrink: 0;
  margin-top: 1px; padding: 0; background: none; border: none;
}
.toast-v2 .toast-close:hover { color: #64748b; }
@keyframes toast-slide-in  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-slide-out { to   { opacity: 0; transform: translateX(20px); } }

/* ── Skeleton loaders ────────────────────────────────────── */
.skel {
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.2s ease-in-out infinite;
  border-radius: 6px;
  display: block;
}
.skel-line    { height: 12px; }
.skel-line-lg { height: 22px; }
.skel-line-xl { height: 34px; }
.skel-card    { height: 110px; border-radius: 16px; }
.skel-row     { height: 36px; border-radius: 8px; margin-bottom: 8px; }
@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Generic v2 panel ────────────────────────────────────── */
.panel-v2 {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15,23,42,0.03);
}
.panel-v2-head {
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
  display: flex; align-items: center; justify-content: space-between;
}
.panel-v2-title { font-size: 14px; font-weight: 700; color: #0f172a; }
.panel-v2-sub   { font-size: 11.5px; color: #64748b; margin-top: 2px; }
.panel-v2-body  { padding: 16px 20px; }

/* ── Empty-state v2 (SVG icon container) ─────────────────── */
.empty-state-svg {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  color: #818cf8;
}
.empty-state-svg svg { width: 26px; height: 26px; }

/* ── Quick-action tile (Dashboard) ───────────────────────── */
.qa-tile {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  border: 1px solid #f1f5f9; background: white;
  cursor: pointer; transition: all 0.15s ease;
  text-decoration: none;
}
.qa-tile:hover {
  border-color: #e2e8f0;
  background: linear-gradient(90deg, #fafbff, white);
  transform: translateX(2px);
}
.qa-tile-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: transform 0.15s ease;
}
.qa-tile:hover .qa-tile-icon { transform: scale(1.05); }
.qa-tile-icon svg { width: 16px; height: 16px; color: white; stroke-width: 2.5; }
.qa-tile-title { font-size: 12.5px; font-weight: 600; color: #0f172a; }
.qa-tile-sub   { font-size: 10.5px; color: #64748b; margin-top: 1px; }

/* ── Tab bar v2 (used by renderTabBar) ───────────────────── */
.tab-v2 {
  display: inline-block;
  padding: 11px 14px;
  font-size: 12.5px; font-weight: 500;
  color: #64748b;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tab-v2:hover { color: #334155; }
.tab-v2.active {
  color: #4338ca; font-weight: 600;
  border-bottom-color: #6366f1;
}
.tab-section-label {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 700; color: #94a3b8;
  padding: 0 10px; align-self: center;
}
.tab-section-sep { color: #e2e8f0; padding: 0 2px; align-self: center; user-select: none; }

/* ── Page kicker (small label above page H1) ─────────────── */
.page-kicker {
  font-size: 10.5px; text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 700; color: #94a3b8;
  margin-bottom: 4px;
}

/* ── Anim: number counter (used in animateCount JS) ──────── */
@keyframes count-up {
  from { transform: translateY(4px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.count-anim { animation: count-up 0.4s ease-out; }

/* ── Role-based visibility ─────────────────────────────────
   Hide write actions for non-operator viewers (CA / viewer role).
   Body gets data-is-operator="0" for viewers, "1" for operators.
   ─── */
body[data-is-operator="0"] #hdr-sync-btn,
body[data-is-operator="0"] #sync-pill {
  display: none !important;
}

/* ── Bulk selection (Tier C3) ─────────────────────────────── */
.bulk-select-cell {
  background: white;
  border-bottom: 1px solid #f1f5f9;
}
table.xl-table thead .bulk-select-cell { background: #f8fafc; }
.bulk-select-cell input[type="checkbox"] {
  width: 14px; height: 14px;
  cursor: pointer;
  accent-color: #6366f1;
}
table.xl-table tbody tr:hover .bulk-select-cell { background: rgba(99,102,241,0.04); }

/* Floating action bar — bottom-center pill */
#bulk-action-bar {
  position: fixed;
  bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 150;
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: white;
  padding: 8px 10px 8px 14px;
  border-radius: 16px;
  box-shadow: 0 20px 50px -10px rgba(15,23,42,0.4), 0 0 0 1px rgba(255,255,255,0.06);
  min-width: 440px;
  animation: bulk-slide-up 0.2s ease-out;
}
@keyframes bulk-slide-up {
  from { transform: translate(-50%, 16px); opacity: 0; }
  to   { transform: translate(-50%, 0); opacity: 1; }
}
#bulk-action-bar .bulk-count {
  font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  box-shadow: 0 2px 8px -2px rgba(99,102,241,0.5);
}
#bulk-action-bar .bulk-action-btn {
  font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.05);
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}
#bulk-action-bar .bulk-action-btn:hover:not(:disabled) { background: rgba(255,255,255,0.14); color: white; }
#bulk-action-bar .bulk-action-btn:disabled {
  cursor: not-allowed; opacity: 0.45; background: rgba(255,255,255,0.04);
}
#bulk-action-bar .bulk-clear-btn {
  color: rgba(255,255,255,0.5);
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.15s ease;
  background: transparent;
  border: 0;
}
#bulk-action-bar .bulk-clear-btn:hover { color: white; }

/* ── Focus rings — visible-only (not on mouse click) ─────── */
.nav-v2:focus-visible,
.nav-sub-v2:focus-visible,
.nav-sec-v2:focus-visible,
.nav-rep-v2:focus-visible,
.session-btn:focus-visible {
  outline: 2px solid #818cf8;
  outline-offset: -2px;
}
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
  border-radius: 6px;
}
[role="button"]:focus-visible,
[role="link"]:focus-visible {
  outline-color: #818cf8;
}
/* Screen-reader-only utility (Tailwind ships .sr-only but be explicit here) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── Cmd-K palette polish ─────────────────────────────────── */
#cmdk-overlay { animation: cmdk-fade-in 0.15s ease-out; }
#cmdk-overlay > div { animation: cmdk-slide-in 0.18s ease-out; }
@keyframes cmdk-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cmdk-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
#shortcut-help { animation: cmdk-fade-in 0.15s ease-out; }

/* ── Roles & Permissions — left pane role rows ────────────── */
.rl-row {
  padding: 8px 12px;
  cursor: pointer;
  border-left: 2px solid transparent;
}
.rl-row:hover { background: #f8fafc; }
.rl-row.active {
  background: #eef2ff;
  border-left-color: #4f46e5;
}
.rl-row.active .font-medium { color: #4338ca; }