/* ═══════════════════════════════════════════════════════════════════════════
   brand.css — the tokens and components from brand_guide.md.

   Tailwind via CDN still does layout, spacing, and flow. This file carries
   what Tailwind's default palette and type stack cannot express: Carolina
   blue, the Space Grotesk / IBM Plex stack, the queue ribbon, and the badge
   set. Written as tokens plus a small component layer rather than a Tailwind
   config, because the CDN build takes no config file and CLAUDE.md rules out
   a build step.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Core */
  --ink:            #0B1F33;
  --carolina:       #4B9CD3;
  --carolina-deep:  #1B6CA8;
  --mist:           #EAF3FA;
  --paper:          #FFFFFF;
  --slate:          #5A6B7B;

  /* Signal — used only to mean something, never decorative */
  --amber:          #E39A0C;
  --signal:         #C0392B;
  --verdant:        #1E8A5F;

  /* Cool neutrals, tinted blue so nothing looks muddy next to Carolina */
  --n-50:   #F5F8FB;
  --n-100:  #E8EEF4;
  --n-200:  #D6E0EA;
  --n-300:  #C3D0DC;
  --n-400:  #9AACBC;
  --n-500:  #7488A0;
  --n-600:  #5A6B7B;
  --n-800:  #22384C;
  --n-900:  #0B1F33;

  --radius-card:  10px;
  --radius-small: 6px;

  --font-display: 'Space Grotesk', 'Segoe UI', Tahoma, sans-serif;
  --font-body:    'IBM Plex Sans', 'Segoe UI', Tahoma, sans-serif;
  --font-data:    'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
}

/* ── Base ──────────────────────────────────────────────────────────────── */

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  /* Dark rails, light content. The working area stays light. */
  background: var(--n-50);
  margin: 0;
}

h1, h2, h3, .display { font-family: var(--font-display); }

h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
h2 { font-size: 18px; font-weight: 600; margin: 0; }

a { color: var(--carolina-deep); }

.meta  { font-size: 13px; color: var(--slate); }
.muted { color: var(--slate); }

/* Every figure gets tabular numerals. Money in a column that shifts as
   digits change looks broken. */
.data, .money, td.num, th.num {
  font-family: var(--font-data);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.money       { font-weight: 600; }
.money-minus { color: var(--signal); }   /* pair with U+2212, never a hyphen */

.hero {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  line-height: 1.1;
}

/* Focus is visible on everything interactive. Never remove the outline. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--carolina);
  outline-offset: 2px;
  border-radius: var(--radius-small);
}

/* ── Header rail ───────────────────────────────────────────────────────── */

.rail {
  background: var(--ink);
  height: 56px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  /* The one permitted shadow, to lift the rail off the content. */
  box-shadow: 0 1px 3px rgba(11, 31, 51, 0.18);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--paper);
  text-decoration: none;
  white-space: nowrap;
}

.rail-nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }

.rail-nav a {
  color: var(--n-300);
  text-decoration: none;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: var(--radius-small);
  transition: color 120ms ease, background 120ms ease;
  white-space: nowrap;
}
.rail-nav a:hover { color: var(--paper); background: rgba(75, 156, 211, 0.14); }

.rail-nav a[aria-current="page"] {
  color: var(--paper);
  background: rgba(75, 156, 211, 0.20);
}

.user-pill {
  background: rgba(75, 156, 211, 0.15);
  color: var(--carolina);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Layout ────────────────────────────────────────────────────────────── */

.page  { max-width: 1120px; margin: 0 auto; padding: 24px; }
.page-narrow { max-width: 720px; margin: 0 auto; padding: 24px; }

.stack     > * + * { margin-top: 24px; }
.stack-tight > * + * { margin-top: 12px; }

.card {
  background: var(--paper);
  border: 1px solid var(--n-200);   /* a border, not a shadow */
  border-radius: var(--radius-card);
  padding: 16px;
}

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

/* ── Stat tile ─────────────────────────────────────────────────────────── */

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 720px) { .tiles { grid-template-columns: 1fr; } }

.tile {
  background: var(--mist);
  border: 1px solid var(--n-200);
  border-radius: var(--radius-card);
  padding: 16px;
}
/* Sentence case. The brand guide drops parts-app's all-caps micro-labels. */
.tile-label { font-size: 13px; color: var(--slate); }
.tile-value { margin-top: 2px; }
.tile-meta  { font-size: 13px; color: var(--slate); margin-top: 2px; }

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: var(--radius-card);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease;
}

.btn-primary { background: var(--carolina-deep); color: var(--paper); }
.btn-primary:hover { background: #17608f; }   /* 8% darker */

.btn-secondary {
  background: var(--paper);
  border-color: var(--n-300);
  color: var(--ink);
}
.btn-secondary:hover { background: var(--n-50); }

.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }

/* ── Badges ────────────────────────────────────────────────────────────── */

.badge {
  display: inline-block;
  border-radius: var(--radius-small);
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
/* Colour is never the only signal — every badge carries its text label. */
.badge-paid      { background: rgba(30, 138, 95, 0.12);  color: #146045; }
.badge-pending   { background: rgba(227, 154, 12, 0.15); color: #8A5A00; }
.badge-estimated { background: var(--n-200);             color: var(--n-600); }
.badge-clawback  { background: rgba(192, 57, 43, 0.12);  color: #8E2A1F; }
.badge-cancelled { background: var(--ink);               color: var(--paper); }

/* ── Table ─────────────────────────────────────────────────────────────── */

.table-wrap { overflow-x: auto; border: 1px solid var(--n-200);
              border-radius: var(--radius-card); }

table.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }

.data-table thead th {
  background: var(--n-50);
  color: var(--slate);
  font-weight: 500;
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--n-200);
  white-space: nowrap;
}

.data-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--n-200);   /* rules as structure */
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--mist); }

.data-table th.num, .data-table td.num { text-align: right; }

/* A 2px Carolina rule marks the active row. */
.data-table tr.is-active td:first-child {
  box-shadow: inset 2px 0 0 var(--carolina);
}

/* ── Queue ribbon — the signature element, one per screen ──────────────── */

.ribbon {
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 34px;
  margin: 8px 0;
}

.ribbon-seg {
  flex: 1 1 0;
  min-width: 6px;
  border-radius: 2px;
  background: var(--n-200);          /* RSG-owned: present, not the point */
}
.ribbon-seg.other { background: var(--n-400); }
.ribbon-seg.mine  { background: var(--carolina);
                    border-bottom: 2px solid var(--ink); }

.ribbon-seg.sold {
  opacity: .30;
  background-image: repeating-linear-gradient(
      45deg, transparent 0 3px, rgba(11,31,51,.45) 3px 5px);
}

/* The sell pointer sits between segments, not on one. */
.ribbon-pointer { flex: 0 0 2px; background: var(--ink); border-radius: 0; }

/* Beyond 40 units the middle collapses rather than shrinking to stripes. */
.ribbon-more {
  flex: 0 0 auto;
  display: flex; align-items: center;
  padding: 0 8px;
  font-size: 12px; color: var(--slate);
  background: var(--n-100);
  border-radius: 2px;
}

/* ── Flash messages ────────────────────────────────────────────────────── */

.flash {
  border-radius: var(--radius-card);
  padding: 12px 16px;
  font-size: 14px;
  border: 1px solid;
}
.flash-error   { background: rgba(192,57,43,.08);  border-color: rgba(192,57,43,.35);  color: #8E2A1F; }
.flash-success { background: rgba(30,138,95,.08);  border-color: rgba(30,138,95,.35);  color: #146045; }
.flash-info    { background: var(--mist);          border-color: var(--n-200);        color: var(--ink); }

/* ── Forms ─────────────────────────────────────────────────────────────── */

.field-label { display: block; font-size: 13px; color: var(--slate);
               margin-bottom: 4px; }

.input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--n-300);
  border-radius: var(--radius-card);
  background: var(--paper);
  color: var(--ink);
}
.input:focus { border-color: var(--carolina); }

/* ── Empty state — says what would fill it, never "No data available." ─── */

.empty { text-align: center; padding: 40px 16px; }
.empty p { margin: 0; }
.empty p + p { margin-top: 4px; font-size: 14px; color: var(--slate); }

/* ── Placeholder marker. Removed as each stage lands its real page. ────── */

.stub {
  border: 1px dashed var(--n-300);
  border-radius: var(--radius-card);
  padding: 16px;
  background: var(--n-50);
  font-size: 14px;
  color: var(--slate);
}
.stub code { font-family: var(--font-data); font-size: 13px; }

/* ── Print: 2in x 1in barcode labels, carried over from parts-app ─────── */

@media print {
  @page { size: 2in 1in; margin: 0; }
  .rail, .rail-nav, .no-print { display: none !important; }
}