/* ──────────────────────────────────────────────────────────────────────────
   Hive design tokens + shared primitives

   Single source of truth for the dark/light palette and the handful of
   primitives (button, theme toggle, card) that every standalone Hive screen
   needs. Pull it in with `*= require hive-tokens` and override only what your
   page genuinely differs on.

   Used by: tds-compliance.css, api-docs.css
   Changing a value here changes every page that requires it — that is the point.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --bg:          #0f1117;
  --surface:     #16181f;
  --surface2:    #1e2130;
  --surface3:    #252840;
  --border:      rgba(255,255,255,0.07);
  --border2:     rgba(255,255,255,0.12);
  --text:        #e8eaf2;
  --text-dim:    #8b90a8;
  --text-xs:     #5e6178;
  --accent:      #6366f1;
  --accent-glow: rgba(99,102,241,0.25);
  --green:       #10b981;
  --green-dim:   rgba(16,185,129,0.15);
  --amber:       #f59e0b;
  --amber-dim:   rgba(245,158,11,0.15);
  --red:         #ef4444;
  --red-dim:     rgba(239,68,68,0.15);
  --blue:        #3b82f6;
  --blue-dim:    rgba(59,130,246,0.15);
  --purple:      #a855f7;
  --radius:      14px;
  --radius-sm:   8px;
  --font:        'Inter', system-ui, sans-serif;
  --mono:        'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --shadow:      0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.5);
  --topbar-bg:   rgba(15,17,23,0.9);
  --sidebar-w:   240px;
}

html.light {
  --bg:          #f4f6fb;
  --surface:     #ffffff;
  --surface2:    #f0f2f8;
  --surface3:    #e6e9f4;
  --border:      rgba(0,0,0,0.07);
  --border2:     rgba(0,0,0,0.13);
  --text:        #111827;
  --text-dim:    #6b7280;
  --text-xs:     #9ca3af;
  --accent:      #4f46e5;
  --accent-glow: rgba(79,70,229,0.18);
  --green:       #059669;
  --green-dim:   rgba(5,150,105,0.12);
  --amber:       #d97706;
  --amber-dim:   rgba(217,119,6,0.12);
  --red:         #dc2626;
  --red-dim:     rgba(220,38,38,0.10);
  --blue:        #2563eb;
  --blue-dim:    rgba(37,99,235,0.12);
  --purple:      #7c3aed;
  --shadow:      0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.10);
  --topbar-bg:   rgba(244,246,251,0.92);
}

/* ── Buttons ────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px; border: none;
  font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font);
}
.btn-primary      { background: var(--accent); color: #fff; }
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-ghost        { background: var(--surface2); color: var(--text); border: 1px solid var(--border2); }
.btn-ghost:hover  { background: var(--surface3); }
.btn-sm           { padding: 5px 11px; font-size: 12px; }

/* ── Theme toggle ───────────────────────────────────────────────── */
.theme-toggle {
  width: 50px; height: 26px; border-radius: 99px;
  background: var(--surface3); border: 1.5px solid var(--border2);
  cursor: pointer; position: relative; display: flex; align-items: center; padding: 3px;
}
.theme-toggle::after {
  content: ''; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,0.3);
  transform: translateX(0);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1) !important;
}
html.light .theme-toggle::after { transform: translateX(22px); }
.toggle-icons {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: space-between; padding: 0 4px; pointer-events: none; font-size: 10px;
}

/* ── Cards ──────────────────────────────────────────────────────── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; }
html.light .card { box-shadow: var(--shadow); }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.card-title  { font-size: 14px; font-weight: 600; }
.card-sub    { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.tabs-gap    { margin-bottom: 16px; }
.page-narrow { max-width: 1100px; }
.filter-row  { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.filter-row .grow { flex: 1; }
.page-wide  { max-width: 1240px; }
.filter-row-box { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.page-actions-end { justify-content: flex-end; margin-bottom: 12px; }
.stat-row    { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 12px; margin-bottom: 14px; }
.auto-grid   { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; margin-bottom: 14px; }
.plain-list  { list-style: none; margin: 0; padding: 0; }
.plain-list > li + li { border-top: 1px solid var(--border); }
.plain-list .grow { flex: 1; min-width: 0; }

/* ── Ring avatar (shared/components/RingAvatar.tsx) ─────────────── */
.ring-avatar { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: #fff; flex: none; }
.ring-avatar-ring { fill: #fff; font-weight: 600; letter-spacing: 0.2px; }
.ring-avatar-initials { fill: #fff; font-weight: 700; text-anchor: middle; dominant-baseline: central; }

/* ── Data list tables, row actions, chips (shared by approval and register lists) ── */
.table-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.table-card .data-table tbody tr:last-child td { border-bottom: 0; }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.data-table th { text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-xs); background: var(--surface2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tbody tr:hover { background: var(--surface2); }
.data-table .col-check { width: 1%; padding-right: 0; }
.data-table .col-actions { width: 1%; text-align: right; white-space: nowrap; position: relative; }
/* Pinned to the right edge only where there is room for it; on a phone it scrolls with the row, so it never sits over the text. */
@media (min-width: 640px) {
  .data-table .col-actions { position: sticky; right: 0; }
  .data-table td.col-actions { background: var(--surface); }
  .data-table th.col-actions { background: var(--surface2); }
  .data-table tbody tr:hover td.col-actions { background: var(--surface2); }
}
.data-table th.num, .data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.amt-head { display: inline-flex; gap: 14px; flex-wrap: wrap; }
.amt-stack { display: grid; grid-template-columns: auto auto; column-gap: 12px; row-gap: 1px; justify-content: start; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.amt-stack > span:nth-child(odd) { color: var(--text-dim); }
.amt-stack > span:nth-child(even), .amt-stack > strong { text-align: right; }
.nowrap { white-space: nowrap; }
.card-form { max-width: 720px; }
.form-success { margin: 0 0 8px; color: var(--green); font-size: 14px; font-weight: 600; }
.plain-list-pad { margin: 8px 0 0; padding-left: 18px; }
.form-reset { border: none; margin: 0; padding: 0; min-inline-size: auto; }
.form-note { margin: 0 0 14px; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text-dim); font-size: 12px; line-height: 1.5; }
.form-callout { margin: 0 0 14px; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text-dim); font-size: 12.5px; line-height: 1.55; }
.form-callout strong { color: var(--text); font-weight: 600; }
.form-callout-block { border-color: var(--red); background: var(--red-dim); }
.form-callout-block strong { color: var(--red); }
.form-callout-warn { border-color: var(--amber); background: var(--amber-dim); }
.form-callout-warn strong { color: var(--amber); }
.form-error { margin: 4px 0 12px; padding: 8px 10px; border-radius: 8px; background: var(--red-dim); color: var(--red); font-size: 13px; }
.hint-warn { color: var(--amber); }
.drawer-stack { display: flex; flex-direction: column; gap: 18px; }
.drawer-note { margin: 0; font-size: 13px; color: var(--text-dim); }
.drawer-note-error { color: var(--red); }
.data-table tr.row-dim td { opacity: 0.6; }
.claim-remark { margin-top: 2px; font-size: 12px; color: var(--text-dim); }
.claim-reply { margin-top: 4px; padding: 6px 9px; border-radius: 8px; font-size: 12.5px; color: var(--text); background: var(--amber-dim); border-left: 3px solid var(--amber); }
.use-bar { height: 5px; margin-top: 6px; max-width: 220px; border-radius: 999px; background: var(--surface3); overflow: hidden; }
.use-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.use-bar-fill.full { background: var(--amber); }
.sort-btn { background: none; border: none; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; white-space: nowrap; }
.sort-mark { margin-left: 4px; opacity: 0.35; }
.sort-mark.on { opacity: 1; }
.data-table .col-wrap { min-width: 160px; max-width: 280px; }
.cell-title { font-weight: 600; color: var(--text); }
.cell-sub { margin-top: 2px; color: var(--text-dim); font-size: 11.5px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--surface3); color: var(--text); white-space: nowrap; }
.chip-info { background: var(--accent-glow); color: var(--accent); }
.chip-btn { cursor: pointer; border: 1px solid transparent; font-family: inherit; min-height: 30px; }
.chip-btn:hover { border-color: var(--border2); }
.chip-btn[aria-pressed="true"] { background: var(--accent-glow); color: var(--accent); border-color: var(--accent); }
.row-link { border: none; background: none; padding: 0; color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.row-link:disabled { opacity: 0.5; cursor: not-allowed; }
.row-link-danger { color: var(--red); }
.row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; }
.icon-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text-dim); cursor: pointer; transition: background 0.15s, color 0.15s; }
.icon-btn:hover { background: var(--surface3); color: var(--text); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.icon-btn-approve { color: var(--green); background: var(--green-dim); border-color: transparent; }
.icon-btn-approve:hover { background: var(--green); color: #fff; }
.icon-btn-reject { color: var(--red); background: var(--red-dim); border-color: transparent; }
.icon-btn-reject:hover { background: var(--red); color: #fff; }
.chip-late { background: var(--red-dim); color: var(--red); }
.text-red { color: var(--red); }
.chip-gap { margin-left: 8px; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── TDS Compliance ─────────────────────────────────────────────── */
/*
 *= require hive-tokens
 */
/* Palette + button/toggle/card primitives come from hive-tokens.css.
   Only TDS-specific rules live below. */

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.12s ease;
}
.progress-fill, canvas { transition: width 0.8s ease !important; }
html, body { height: 100%; font-family: var(--font); background: var(--bg); color: var(--text); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 99px; }

/* ── Layout ─────────────────────────────────────────────────────── */
.tds-wrapper { display: flex; min-height: 100vh; }

/* ── Sidebar ────────────────────────────────────────────────────── */
.tds-sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 100; overflow-y: auto;
  transition: transform 0.25s ease;
}
.sb-back {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 12px 4px; padding: 9px 14px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600; color: #fff;
  background: var(--red); border: 1px solid var(--red); cursor: pointer;
}
.sb-back span { font-size: 15px; line-height: 1; color: #fff; font-weight: 700; }
.sb-back:hover {
  filter: brightness(1.08);
  box-shadow: 0 2px 10px var(--red-dim);
}
.sb-logo {
  padding: 16px 18px 14px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border);
}
.sb-logo-icon {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #fff;
}
.sb-logo-title { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
.sb-logo-sub   { font-size: 10px; color: var(--text-dim); letter-spacing: 0.4px; text-transform: uppercase; }
.sb-section    { padding: 18px 14px 5px; font-size: 10px; font-weight: 600; color: var(--text-xs); text-transform: uppercase; letter-spacing: 1px; }
.sb-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 14px; margin: 1px 8px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--text-dim); cursor: pointer;
}
.sb-item:hover { background: var(--surface2); color: var(--text); }
.sb-item.active { background: var(--accent-glow); color: var(--accent); font-weight: 600; }
.sb-item .sb-icon { font-size: 15px; width: 18px; text-align: center; }
.sb-badge {
  margin-left: auto; font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 99px;
  background: var(--red-dim); color: var(--red);
}
.sb-footer { margin-top: auto; padding: 12px; border-top: 1px solid var(--border); }
.sb-user { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 8px; cursor: pointer; overflow: hidden; }
.sb-user:hover { background: var(--surface2); }
.sb-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff;
}
.sb-uname { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-urole { font-size: 11px; color: var(--text-dim); }

/* ── Main ───────────────────────────────────────────────────────── */
.tds-main { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; }

/* ── Topbar ─────────────────────────────────────────────────────── */
.tds-topbar {
  position: sticky; top: 0; z-index: 90;
  background: var(--topbar-bg); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  height: 58px; padding: 0 24px;
  display: flex; align-items: center; gap: 14px;
}
.tb-title  { font-size: 15px; font-weight: 600; }
.tb-crumb  { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 5px; }
.tb-crumb span { color: var(--text-xs); }
.tb-right  { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* ── Topbar selectors + buttons ─────────────────────────────────── */
.tb-select {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 500; cursor: pointer;
}
.tb-select select {
  background: transparent; border: none; outline: none;
  color: var(--text); font-family: var(--font); font-size: 13px; font-weight: 500; cursor: pointer;
}
.tb-select select option { background: var(--surface2); }

/* ── Content ────────────────────────────────────────────────────── */
.tds-content { padding: 22px 24px 48px; flex: 1; }

.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-title  { font-size: 15px; font-weight: 600; }
.section-sub    { font-size: 12px; color: var(--text-dim); margin-top: 2px; }

/* ── Progress bar ───────────────────────────────────────────────── */
.progress-bar  { height: 4px; border-radius: 99px; background: rgba(255,255,255,0.07); overflow: hidden; margin-top: 9px; }
.progress-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--purple)); }
html.light .progress-bar { background: rgba(0,0,0,0.07); }

/* ── Status pills ───────────────────────────────────────────────── */
.status-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 99px; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.status-pill::before { content: '●'; font-size: 7px; }
.sp-filed   { background: var(--green-dim); color: var(--green); }
.sp-pending { background: var(--amber-dim); color: var(--amber); }
.sp-due     { background: var(--red-dim);   color: var(--red); }
.sp-na      { background: rgba(255,255,255,0.05); color: var(--text-xs); }
html.light .sp-na { background: rgba(0,0,0,0.05); }

/* ── Badges ─────────────────────────────────────────────────────── */
.badge        { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; }
.badge-green  { background: var(--green-dim); color: var(--green); }
.badge-red    { background: var(--red-dim);   color: var(--red); }
.badge-amber  { background: var(--amber-dim); color: var(--amber); }
.badge-accent { background: var(--accent-glow); color: var(--accent); }
.badge-grey   { background: rgba(255,255,255,0.06); color: var(--text-dim); }
html.light .badge-grey { background: rgba(0,0,0,0.06); }

/* ── Icon button ────────────────────────────────────────────────── */
.icon-btn {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--surface2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 13px; color: var(--text-dim);
}
.icon-btn:hover             { background: var(--surface3); color: var(--text); border-color: var(--border2); }
.icon-btn.danger:hover      { background: var(--red-dim); color: var(--red); }

/* ── Toast ──────────────────────────────────────────────────────── */
.tds-toast {
  position: fixed; bottom: 22px; right: 22px; z-index: 400;
  background: var(--surface); border: 1px solid var(--green);
  border-radius: var(--radius); padding: 12px 16px;
  display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  transform: translateY(70px); opacity: 0;
  transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.tds-toast.show { transform: translateY(0); opacity: 1; }

/* ── Modal ──────────────────────────────────────────────────────── */
.tds-modal-overlay {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.tds-modal-overlay.open { opacity: 1; pointer-events: all; }
.tds-modal {
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: 16px; padding: 26px; width: 540px;
  max-width: calc(100vw - 32px); max-height: calc(100vh - 60px); overflow-y: auto;
  transform: translateY(14px) scale(0.98); transition: transform 0.2s;
}
.tds-modal-overlay.open .tds-modal { transform: translateY(0) scale(1); }
.tds-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.tds-modal-title  { font-size: 16px; font-weight: 700; }
.tds-modal-close  {
  width: 28px; height: 28px; border-radius: 7px; cursor: pointer;
  background: var(--surface2); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--text-dim);
}

/* ── Form ───────────────────────────────────────────────────────── */
.form-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.full { grid-column: 1/-1; }
.form-label { font-size: 11.5px; font-weight: 600; color: var(--text-dim); }
.form-input {
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 8px; padding: 8px 11px;
  font-size: 13px; color: var(--text); font-family: var(--font); outline: none;
}
.form-input:focus { border-color: var(--accent); }
.form-input::placeholder { color: var(--text-xs); }
.form-total {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface3); border: 1px solid var(--border2);
  border-radius: 8px; padding: 8px 11px; font-size: 13px; font-weight: 600;
}
.form-total-val { color: var(--accent); font-variant-numeric: tabular-nums; }
.form-actions { display: flex; gap: 9px; margin-top: 18px; justify-content: flex-end; }

/* ── Alert ──────────────────────────────────────────────────────── */
.tds-alert {
  display: flex; align-items: flex-start; gap: 11px;
  border-radius: 12px; padding: 12px 16px; margin-bottom: 20px;
}
.tds-alert.amber { background: var(--amber-dim); border: 1px solid rgba(245,158,11,0.3); }
.tds-alert.red   { background: var(--red-dim);   border: 1px solid rgba(239,68,68,0.3); }
.tds-alert-icon  { font-size: 17px; margin-top: 1px; }
.tds-alert-text  { font-size: 13px; font-weight: 500; }
.tds-alert-sub   { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.tds-alert-action { margin-left: auto; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline; white-space: nowrap; padding-left: 10px; }
.tds-alert.amber .tds-alert-text   { color: var(--amber); }
.tds-alert.amber .tds-alert-action { color: var(--amber); }
.tds-alert.red   .tds-alert-text   { color: var(--red); }

/* ── Animations ─────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp 0.35s ease forwards; }

/* ── Skeleton loading shimmer ───────────────────────────────────── */
@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--surface2)  0%,
    var(--surface3) 50%,
    var(--surface2) 100%
  );
  background-size: 400px 100%;
  animation: skeleton-shimmer 1.4s infinite linear;
  border-radius: 4px;
  color: transparent;
  user-select: none;
}
html.light .skeleton {
  background: linear-gradient(90deg, #eef0f4 0%, #f8f9fb 50%, #eef0f4 100%);
  background-size: 400px 100%;
}

/* Stale-while-refetch overlay — keep prior data visible but mark it refreshing */
.refetching {
  position: relative;
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.refetching::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent-glow) 50%,
    transparent 100%
  );
  background-size: 600px 100%;
  animation: skeleton-shimmer 1.4s infinite linear;
  pointer-events: none;
  border-radius: inherit;
}

/* Inline pill shown next to FY/Group selectors during refetch */
.refresh-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--accent-glow);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: 1px solid var(--accent-glow);
}
.refresh-pill::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse-dot 1s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.7); }
}

/* ── Mobile responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }

  .tds-sidebar {
    transform: translateX(-240px);
    width: 240px;
    z-index: 200;
  }
  .tds-sidebar.open { transform: translateX(0); }

  .tds-main { margin-left: 0; }

  .tds-topbar { padding: 0 14px; gap: 8px; }
  .tb-title   { font-size: 13px; }
  .tb-crumb   { display: none; }
  .tb-right   { gap: 5px; }
  .tb-select  { padding: 5px 7px; font-size: 12px; }

  .tds-content { padding: 14px 12px 60px; }

  /* Stack metric grids */
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }
  [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Sidebar overlay backdrop */
  .tds-overlay {
    display: none;
    position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 150;
  }
  .tds-overlay.open { display: block; }

  /* Mobile menu button */
  .tds-menu-btn {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 8px;
    background: var(--surface2); border: 1px solid var(--border);
    cursor: pointer; font-size: 16px; color: var(--text-dim); flex-shrink: 0;
  }

  .tds-modal { padding: 18px; }
  .form-grid { grid-template-columns: 1fr; }

  /* Hide secondary topbar buttons on mobile */
  .tb-hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
  .tds-menu-btn { display: none; }
  .tds-overlay  { display: none !important; }
}

/* ──────────────────────────────────────────────────────────────────
 * Extended responsiveness for TDS Compliance pages.
 *
 * Reuses the existing `data-tour="…"` anchors from the React pages so we
 * don't need to refactor JSX to add hooks. Each rule targets one of the
 * specific overflow / cramped-layout problems that show up below 1024px.
 * ────────────────────────────────────────────────────────────────── */

/* Body-level clip — last-resort guard so a stray wide element never makes
 * the entire viewport scroll horizontally on mobile. The inner content
 * already wraps; this is purely defensive. */
html, body { max-width: 100%; overflow-x: hidden; }

/* ── Tablet / small laptop (769 – 1024 px) ────────────────────────────
 * 4-up metric grids become 2-up, the chart stays full-width. Sidebar still
 * shown but narrower; charts and challan rows keep desktop layout otherwise.
 */
@media (max-width: 1024px) {
  /* Mapping page — collapse the 280px challan rail to a stacked layout so
   * the right-side payslip panel gets full width. The inline style is
   * `grid-template-columns: 280px 1fr` — match that fragment.            */
  [style*="grid-template-columns: 280px 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Filing page — right rail (history + due dates) drops below the wizard. */
  [style*="grid-template-columns: 1fr 320px"] {
    grid-template-columns: 1fr !important;
  }

  /* 4-up metric grids → 2-up so each card is at least ~280 px wide.       */
  [data-tour="dashboard-metrics"],
  [data-tour="challans-stats"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Mobile / small tablet (≤ 768 px) ─────────────────────────────────
 * Stronger overrides — every metric grid stacks; row-grid "tables" inside
 * data-tour anchors collapse to a single-column stack so each card row
 * becomes scannable instead of clipping or causing horizontal scroll.
 */
@media (max-width: 768px) {
  /* Each row in the dashboard / challans list is itself a CSS Grid with
   * fixed pixel column widths (`32px 1fr 60px 130px 160px …`). On mobile
   * those don't fit; flatten to a single column so the row reads as a
   * stacked card. The data-tour anchors limit the blast radius to the
   * intended lists only.                                                  */
  [data-tour="dashboard-challans"] > div > .card[style*="grid-template-columns"],
  [data-tour="challans-list"] > .card[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 12px 14px !important;
  }

  /* Mapping page payslip rows — same trick.                               */
  [data-tour="mapping-payslips"] .card[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 12px 14px !important;
  }

  /* Column-header rows (the small uppercase legends above each table) are
   * now meaningless when their cells stack — hide them on mobile.         */
  [data-tour="challans-list"] + div [style*="text-transform: uppercase"],
  [data-tour="dashboard-challans"] [style*="text-transform: uppercase"] {
    display: none;
  }

  /* Section headers — the right-aligned action button shouldn't push text
   * off-screen; let it wrap below the title.                              */
  .section-header,
  .card-header {
    flex-wrap: wrap;
    gap: 10px;
  }

  /* Filter / FY+Group row uses inline `display: flex` — make sure it wraps
   * onto a second line instead of overflowing.                            */
  [data-tour$="-fy"] {
    flex-wrap: wrap;
  }

  /* Quarter tabs — let the row scroll horizontally so all four quarters
   * remain reachable without distorting the desktop layout.               */
  [data-tour$="-quarters"] > div {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
  /* Hide the "(Apr – Jun)" date-range hint on the active quarter tab so
   * each pill stays small enough to fit without scrolling on most phones. */
  [data-tour$="-quarters"] button > span:nth-child(2) {
    display: none;
  }

  /* Stepper labels can overflow when long ("Validate", "Ready to File"…) —
   * shrink font + reduce per-step horizontal padding.                     */
  .card .progress-bar { width: 100%; }

  /* Modals — already padding-reduced by the existing rule; also constrain
   * width so they fit a 360 px viewport without horizontal scrollbars.    */
  .tds-modal {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 24px);
  }

  /* Form rows — make every input full-width by default on mobile so the
   * Add Challan / PAN entry / etc. modals don't overflow.                 */
  .form-input,
  input.form-input,
  select.form-input,
  textarea.form-input {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Action button row inside modals — wrap to a second line if needed.    */
  .form-actions { flex-wrap: wrap; gap: 8px; }

  /* Employee TDS summary table is wrapped in `overflow-x: auto` already,
   * but ensure the wrapper doesn't itself overflow its parent.            */
  [data-tour="challans-emp-summary"] [style*="overflow-x: auto"] {
    max-width: 100%;
  }

  /* Mapping page reconciliation grid (4 stat columns above the table) —
   * wraps to 2x2.                                                         */
  [data-tour="mapping-payslips"] [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Small phone (≤ 480 px) ────────────────────────────────────────────
 * Single-column everywhere; topbar buttons shrink further; quarter tabs
 * use compact text; chart height shrinks so it doesn't dominate the fold. */
@media (max-width: 480px) {
  /* All multi-column metric grids collapse to one card per row.           */
  [data-tour="dashboard-metrics"],
  [data-tour="challans-stats"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  /* Reconciliation grid that stays 2-up on mobile becomes 1-up here.     */
  [data-tour="mapping-payslips"] [style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }

  /* Slightly smaller body text + tighter card padding.                    */
  .tds-content { padding: 10px 8px 60px; }
  .card        { padding: 12px 14px; }

  /* Buttons — full-width inside form-actions to make taps easier.         */
  .form-actions .btn { flex: 1 1 100%; }

  /* Quarter tabs — drop the FY-range hint already; also tighten padding.  */
  [data-tour$="-quarters"] button {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
}

/* ── Phone-width fixes found hosting the pages in the new shell ─────────────
 * The quarter tabs scroll inside their own box instead of running off the screen, and the
 * challan list's column-header row goes away once the rows stack into cards (≤ 768 px). */
.tds-quarter-tabs { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tds-quarter-tabs button { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 768px) {
  .tds-col-head { display: none !important; }
}