/* =============================================================================
   Ankerpak fulfillment UI kit
   -----------------------------------------------------------------------------
   The dashboard's visual language, distilled from dashboard.css into reusable,
   page-agnostic pieces so every new surface (login, future admin/status pages,
   one-off tools) can `@import` or `<link>` this and look like it belongs.

   Relationship to the other style files:
     * dashboard.css  -- the wall/laptop dashboard. Still the LIVING source of
                         truth for the token VALUES. If you change a colour or
                         radius in its `:root`, mirror it in the `:root` here
                         (same discipline as the email `_H_*` constants noted
                         in STYLE.md).
     * STYLE.md        -- prose spec + the dashboard<->email token table.
     * ui-kit.css      -- this file: the same tokens + the handful of
                         components those pages actually reuse, named with a
                         `uk-` prefix so it can sit alongside dashboard.css
                         without class collisions.

   No web fonts, no external assets, dark theme only (matches the dashboard).
   ============================================================================= */

:root {
  /* ---- palette (verbatim from dashboard.css :root) ---- */
  --bg:        #0d1117;   /* page behind the cards */
  --bg-panel:  #161b22;   /* card / panel surface */
  --bg-panel2: #1c2330;   /* nested tile, strip, hover */
  --bg-row:    #10151d;   /* table expand rows */
  --border:    #2b3444;   /* every hairline / divider */
  --text:      #e6edf3;   /* primary text, big numbers */
  --text-dim:  #9aa7b4;   /* labels, body copy, axes */
  --text-mute: #6b7684;   /* footnotes, timestamps, dots */

  --accent:    #58a6ff;   /* interactive / focus */
  --green:     #3fb950;   /* at or above target */
  --amber:     #d29922;   /* within 10% of target / stale */
  --red:       #f85149;   /* below target / error */
  --pick:      #58a6ff;   /* pick series (blue) */
  --pack:      #bc8cff;   /* pack series (purple) */

  --radius: 10px;         /* cards, tiles */

  /* ---- ui-kit additions (implied by dashboard.css usage, not in its :root) ---- */
  --radius-sm: 6px;                 /* small controls: buttons, inputs, pills */
  --on-accent: #06121f;            /* text/glyph colour on an --accent fill */
  --bar-track: #223;               /* groove behind bars / gauges (#222233) */
  --danger-bg: #3d0d0d;            /* error-banner fill (see .banner.error) */
  --danger-text: #ff9d96;          /* error-banner + inline-error text */
  --ok-bg: #06301a;                /* ok-banner fill */
  --ok-text: #7ee2a8;
  --stale-bg: #3d1d00;             /* stale/amber-banner fill */
  --stale-text: #ffb84d;
  --focus-ring: 2px solid var(--accent);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  color-scheme: dark;
}

/* ---------- Reset / page base (matches dashboard.css) ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

.uk-root,
body.uk-root {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* Numbers that update or line up. */
.uk-tabular { font-variant-numeric: tabular-nums; }

/* Drop it on <body> (or any wrapper) to center a single card in the viewport. */
.uk-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

/* ---------- Typography ---------- */
/* Heading: dashboard joins parts with " — " (h1/h2, font-weight:700). */
.uk-h1 { margin: 0; font-size: clamp(20px, 2.6vw, 34px); font-weight: 700; line-height: 1.1; }
.uk-h2 { margin: 0; font-size: clamp(17px, 1.8vw, 24px); font-weight: 700; }

/* Section / field label: ~12px, uppercase, tracked, bold, dim
   (dashboard: .kpi-label, .prio-table th). */
.uk-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  color: var(--text-dim);
}

/* Big number (dashboard: .kpi-value). */
.uk-value {
  font-size: clamp(40px, 4.5vw, 92px);
  font-weight: 800;
  line-height: 1.02;
  font-variant-numeric: tabular-nums;
}

/* Footnote (dashboard: .footnote, .panel-note). */
.uk-note {
  font-size: clamp(11px, 1vw, 14px);
  line-height: 1.45;
  color: var(--text-mute);
}

/* ---------- Card / panel (dashboard: .panel, .kpi) ---------- */
.uk-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px 16px;
  min-width: 0;
}
/* Nested strip / callout inside a card, accented (dashboard: .manual-panel). */
.uk-card--nested {
  background: var(--bg-panel2);
  border-radius: var(--radius-sm);
  padding: 10px 12px 12px;
}
.uk-card--accent { border-color: var(--accent); }

/* ---------- Form controls ---------- */
.uk-field { margin-top: var(--space-4); }
.uk-field .uk-label { margin-bottom: 6px; }

.uk-input {
  width: 100%;
  padding: 9px 11px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.uk-input::placeholder { color: var(--text-mute); }
.uk-input:focus { outline: none; border-color: var(--accent); }
.uk-input:focus-visible { outline: var(--focus-ring); outline-offset: -1px; }

/* Buttons. --primary is the filled accent action (dashboard: .seg-btn.active,
   .day-nav active); base/--ghost is the quiet bordered control
   (dashboard: .manual-controls button). */
.uk-btn {
  display: inline-block;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  background: var(--bg-panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.uk-btn:hover { border-color: var(--accent); }
.uk-btn:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
.uk-btn--primary {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}
.uk-btn--primary:hover { filter: brightness(1.06); }
.uk-btn--block { display: block; width: 100%; }
.uk-btn:disabled { opacity: 0.38; cursor: not-allowed; }

/* ---------- Banner (dashboard: .banner) ---------- */
.uk-banner {
  padding: 14px 20px;
  border-radius: var(--radius);
  font-weight: 700;
  letter-spacing: 0.5px;
}
.uk-banner--ok      { background: var(--ok-bg);     color: var(--ok-text);     border: 2px solid var(--green); }
.uk-banner--stale   { background: var(--stale-bg);  color: var(--stale-text);  border: 2px solid var(--amber); }
.uk-banner--error   { background: var(--danger-bg); color: var(--danger-text); border: 2px solid var(--red); }
.uk-banner--neutral { background: var(--bg-panel2); color: var(--text);        border: 1px solid var(--border); }

/* Inline error box, quieter than a banner (dashboard: .panel-error). Pair with
   :empty so it stays invisible until it has text. */
.uk-error {
  font-size: 13px;
  color: var(--danger-text);
  background: #2a0f0f;
  border: 1px solid var(--red);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.uk-error:empty { display: none; }

/* ---------- Pills / tags (dashboard: .status-pill, .state-tag) ---------- */
.uk-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.uk-pill--pick  { background: #1b2f42; color: #7cc0ff; }
.uk-pill--pack  { background: #24203a; color: #cbaaff; }
.uk-pill--ok    { background: #12331f; color: var(--green); }
.uk-pill--warn  { background: #33241a; color: #f0b37e; }

/* ---------- Divider / page foot (dashboard: .pagefoot) ---------- */
.uk-rule { border: 0; border-top: 1px solid var(--border); margin: var(--space-4) 0; }
.uk-foot {
  margin-top: var(--space-4);
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}