/* ============================================================
   BARAEM GRADEFLOW — COMPONENTS

   The shared vocabulary. Every page is assembled from these, which is what
   keeps the product reading as one system rather than a set of screens.

   Deliberately restrained: hairlines instead of heavy shadows, one accent,
   semantic colour only where it carries meaning, and no decorative gradients.
   ============================================================ */

/* ------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 0 var(--s-4); height: 34px;
  font: 600 var(--t-13)/1 var(--font);
  letter-spacing: .005em;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:active:not(:disabled) { transform: translateY(.5px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; flex: 0 0 15px; }

/* primary: the one filled green in the product */
.btn-primary { background: var(--accent); color: var(--text-on-brand); box-shadow: var(--sh-1); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); box-shadow: var(--sh-2); }

/* secondary: outlined, on surface */
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--sh-1); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-3); border-color: var(--text-mute); }

/* tertiary: no chrome until hover */
/* A quiet button is still a control. Transparent ground with soft ink measured
   2.0:1 on a white card, so it read as plain text until hovered. It keeps its
   lower emphasis — no fill, no shadow — but gains full-strength ink and a
   hairline edge so it is visibly pressable in its resting state. */
.btn-quiet { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-quiet:hover:not(:disabled) { background: var(--surface-sunk); color: var(--text); }

.btn-danger { background: var(--bad-600); color: #fff; }
.btn-danger:hover:not(:disabled) { background: var(--bad-700); }

.btn-lg { height: 42px; padding: 0 var(--s-6); font-size: var(--t-14); }
.btn-sm { height: 28px; padding: 0 var(--s-3); font-size: var(--t-12); }
.btn-icon { width: 34px; padding: 0; }
.btn-icon.btn-sm { width: 28px; }

/* ------------------------------------------------------------
   SURFACES
   ------------------------------------------------------------ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.card-pad { padding: var(--s-5); }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  /* `overflow: hidden` on the PANEL clipped a wide table instead of letting the
     .tbl-wrap inside it scroll, so the year table lost its last two columns with
     no way to reach them. The panel itself only needs to keep its own corners
     clean, which the header/foot already do. */
  overflow: clip;
  overflow-clip-margin: 0;
}
/* but a scroll container inside must still be able to scroll */
.panel .tbl-wrap { max-width: 100%; }
.panel-h {
  display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border-soft);
  background: var(--surface-2);
}
.panel-h h3 {
  margin: 0; font-size: var(--t-13); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text);
}
.panel-h .panel-s { font-size: var(--t-12); color: var(--text-faint); }
.panel-b { padding: var(--s-5); }
.panel-b.flush { padding: 0; }

/* ------------------------------------------------------------
   KPI — figures, not decorative tiles.
   One accent hairline marks the primary metric; the rest are plain.
   ------------------------------------------------------------ */
.kpis {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--border-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.kpi {
  background: var(--surface);
  padding: var(--s-4) var(--s-4) var(--s-3);
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.kpi-k {
  font-size: var(--t-11); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-v {
  font: 700 var(--t-24)/1.15 var(--font);
  letter-spacing: -.015em; color: var(--text);
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate;
}
.kpi-s {
  font-size: var(--t-11); color: var(--text-mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-primary { box-shadow: inset 0 2px 0 var(--accent); padding-top: calc(var(--s-4) - 2px); }
.kpi-primary .kpi-v { color: var(--accent-ink); }

.kpi-up   { color: var(--ok-700); }
.kpi-down { color: var(--bad-700); }
.kpi-flat { color: var(--text-mute); }

/* ------------------------------------------------------------
   CHIPS / TAGS
   ------------------------------------------------------------ */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 2px var(--s-2); border-radius: var(--r-pill);
  background: var(--surface-sunk); color: var(--text-soft);
  font-size: var(--t-11); font-weight: 600; white-space: nowrap;
}
.chip-accent { background: var(--accent-soft); color: var(--accent-ink); }
.chip-ok   { background: var(--ok-100);   color: var(--ok-700); }
.chip-warn { background: var(--warn-100); color: var(--warn-700); }
.chip-bad  { background: var(--bad-100);  color: var(--bad-700); }

/* ------------------------------------------------------------
   TABLES
   The workhorse. Sticky head, hairline rules, tabular figures, hover without
   shouting. Long tables are windowed by tools/paginate.js, not by dumping
   every row into the DOM.
   ------------------------------------------------------------ */
.tbl-wrap {
  border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: auto; background: var(--surface);
  max-height: var(--tbl-max, none);
}
/* min-width lets a table stay readable and scroll inside its wrapper instead of
   squeezing every column to an unreadable width. */
table.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-13); min-width: 100%; }
table.tbl thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-3);
  padding: var(--s-3) var(--s-3);
  font-size: var(--t-11); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-faint);
  text-align: start; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
table.tbl th.sortable { cursor: pointer; user-select: none; }
table.tbl th.sortable:hover { color: var(--text); }
table.tbl th .sort-ind { opacity: .35; margin-inline-start: 4px; font-size: .8em; }
table.tbl th.sorted .sort-ind { opacity: 1; color: var(--accent); }
table.tbl tbody td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--border-soft);
  color: var(--text); vertical-align: middle;
}
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover td { background: var(--surface-2); }
table.tbl td.n, table.tbl th.n {
  text-align: end;
  font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate;
}
table.tbl td.strong { font-weight: 650; }
table.tbl .muted { color: var(--text-mute); }
table.tbl tbody tr.clickable { cursor: pointer; }
table.tbl tbody tr.is-selected td { background: var(--accent-soft); }

.tbl-foot {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border-soft);
  background: var(--surface-2);
  font-size: var(--t-12); color: var(--text-faint);
}
.tbl-foot .spacer { margin-inline-start: auto; }

/* ------------------------------------------------------------
   FORMS
   ------------------------------------------------------------ */
.field { display: grid; gap: var(--s-1); min-width: 0; }
.field > label, .lbl {
  font-size: var(--t-11); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-faint);
}
.inp, .sel {
  height: 34px; padding: 0 var(--s-3);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  font: 400 var(--t-13)/1 var(--font);
  width: 100%; min-width: 0;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.inp:hover, .sel:hover { border-color: var(--text-mute); }
.inp:focus, .sel:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.inp::placeholder { color: var(--text-mute); }
textarea.inp { height: auto; padding: var(--s-2) var(--s-3); line-height: var(--lh-body); resize: vertical; }
.sel {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-end: var(--s-7);
}
[dir="rtl"] .sel {
  background-position: 15px calc(50% + 1px), 10px calc(50% + 1px);
  padding-inline-end: var(--s-3); padding-inline-start: var(--s-7);
}
.sel[multiple] { height: auto; padding: var(--s-1); background-image: none; }

.check { display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; font-size: var(--t-13); }
.check input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; margin: 0; }

/* segmented control — for small mutually-exclusive choices */
.seg {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--surface-sunk); border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.seg button {
  border: 0; background: transparent; cursor: pointer;
  padding: var(--s-1) var(--s-3); border-radius: var(--r-xs);
  font: 600 var(--t-12)/1 var(--font); color: var(--text-soft);
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"], .seg button.on {
  background: var(--surface); color: var(--accent-ink);
  box-shadow: var(--sh-1);
}

/* ------------------------------------------------------------
   STATES — empty, error, loading. Each says what happened and
   what to do next. A spinner alone is not a message.
   ------------------------------------------------------------ */
.state {
  display: grid; justify-items: center; gap: var(--s-3);
  padding: var(--s-9) var(--s-5);
  text-align: center;
}
.state-ic {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-sunk); color: var(--text-faint);
}
.state-ic svg { width: 20px; height: 20px; }
.state h3 {
  margin: 0; font-size: var(--t-15); font-weight: 700;
  letter-spacing: .02em; color: var(--text);
}
.state p { margin: 0; font-size: var(--t-13); color: var(--text-soft); max-width: 48ch; line-height: var(--lh-body); }
.state-a { margin-top: var(--s-2); display: flex; gap: var(--s-2); }

.state-error .state-ic { background: var(--bad-100); color: var(--bad-700); }
.state-error h3 { color: var(--bad-700); }

/* skeleton — neutral, quiet, no shimmer carnival */
.skel { background: var(--surface-sunk); border-radius: var(--r-sm); position: relative; overflow: hidden; }
.skel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform: translateX(-100%);
  animation: skel-sweep 1500ms var(--ease) infinite;
}
:root[data-theme="dark"] .skel::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
}
@keyframes skel-sweep { to { transform: translateX(100%); } }
.skel-row { height: 13px; margin-bottom: var(--s-2); }
.skel-row.w40 { width: 40%; } .skel-row.w60 { width: 60%; }
.skel-row.w80 { width: 80%; } .skel-row.w100 { width: 100%; }
.skel-row.tall { height: 190px; }
.skel-row.mid  { height: 90px; }

/* ------------------------------------------------------------
   SKELETON LAYOUTS used by several pages
   ------------------------------------------------------------ */
.skel-kpis {
  display: grid; gap: 1px; margin-bottom: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  background: var(--border-soft);
  border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
}
.skel-kpi { background: var(--surface); padding: var(--s-4); }
.skel-kpi .skel-row:first-child { width: 55%; height: 9px; }
.skel-kpi .skel-row:nth-child(2)  { width: 40%; height: 26px; margin-top: var(--s-2); }
.skel-kpi .skel-row:nth-child(3)  { width: 65%; height: 9px; }

/* ------------------------------------------------------------
   FEEDBACK
   ------------------------------------------------------------ */
.toast-host {
  position: fixed; inset-block-end: var(--s-5); inset-inline-end: var(--s-5);
  z-index: 900; display: flex; flex-direction: column; gap: var(--s-2);
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--s-3);
  min-width: 240px; max-width: 420px;
  padding: var(--s-3) var(--s-4);
  background: var(--sl-900); color: #fff;
  border-radius: var(--r-md); box-shadow: var(--sh-4);
  font-size: var(--t-13); font-weight: 500;
  pointer-events: auto;
  animation: toast-in var(--t-slow) var(--ease-out);
}
:root[data-theme="dark"] .toast { background: var(--surface-3); border: 1px solid var(--border-strong); }
.toast-ok   { border-inline-start: 3px solid var(--ok-500, #22965b); }
.toast-err  { border-inline-start: 3px solid var(--bad-600); }
.toast-info { border-inline-start: 3px solid var(--info-600); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   PAGE HEADER — one pattern for every page
   ------------------------------------------------------------ */
.page-head {
  display: flex; align-items: flex-end; gap: var(--s-4);
  flex-wrap: wrap;
  padding-block-end: var(--s-4);
  margin-block-end: var(--s-5);
  border-block-end: 1px solid var(--border);
}
.page-head-t { min-width: 0; }
.page-head h1 {
  margin: 0; font-size: var(--t-20); font-weight: 700;
  letter-spacing: -.015em; color: var(--text); line-height: var(--lh-tight);
}
.page-head .page-sub {
  margin: var(--s-1) 0 0; font-size: var(--t-13);
  color: var(--text-faint); line-height: var(--lh-snug);
}
.page-head-a { margin-inline-start: auto; display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }

/* ------------------------------------------------------------
   SECTION RHYTHM — vertical spacing between major blocks
   ------------------------------------------------------------ */
.stack   { display: grid; gap: var(--s-5); }
.stack-s { display: grid; gap: var(--s-3); }
.stack-l { display: grid; gap: var(--s-7); }
.row     { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.row-end { margin-inline-start: auto; }
.grid-2  { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid-3  { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.rule { height: 1px; background: var(--border-soft); border: 0; margin: 0; }
.rule-gold { height: 2px; background: var(--gold-500); border: 0; margin: 0; opacity: .8; }

/* ------------------------------------------------------------
   MOTION — entrance for content, entrance for charts
   ------------------------------------------------------------ */
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.rise { animation: rise var(--t-slow) var(--ease-out) both; }
.rise-1 { animation-delay: 40ms; }
.rise-2 { animation-delay: 80ms; }
.rise-3 { animation-delay: 120ms; }
.rise-4 { animation-delay: 160ms; }
.rise-5 { animation-delay: 200ms; }

@keyframes draw { from { stroke-dashoffset: var(--dash, 1000); } to { stroke-dashoffset: 0; } }
.chart-enter path, .chart-enter line { animation: fade-in var(--t-slower) var(--ease-out) both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.chart-enter rect, .chart-enter circle, .chart-enter polygon { animation: pop var(--t-slow) var(--ease-out) both; }
@keyframes pop { from { opacity: 0; transform: scale(.94); transform-origin: center; } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .page-head h1 { font-size: var(--t-18); }
  .kpi-v { font-size: var(--t-20); }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .panel-h, .panel-b { padding: var(--s-4); }
  .page-head-a { margin-inline-start: 0; width: 100%; }
}
@media print {
  .no-print, .toast-host, .page-head-a { display: none !important; }
  .rise, .rise-1, .rise-2, .rise-3, .rise-4, .rise-5 { animation: none !important; }
}