/* ============================================================================
   ERP DESIGN SYSTEM — unified UI layer (loaded last).
   Reference: the Shipment list. Applies consistent tables, badges, cards,
   buttons and empty states across every module. No business logic here.
   ============================================================================ */

/* ── 1. STATUS TONES (canonical) ───────────────────────────────────────────
   Draft=gray · In progress=blue · Pending=orange · Completed=green ·
   Blocked/Error=red · Archived/void=purple. (.st-badge.st-* defined in
   05-components.css; legacy .pill is realigned below so green is never a
   default — green is reserved for positive/completed states only.)        */
.pill{ background:#e9eef6; color:#2f4f72; border-radius:999px; padding:3px 9px; font-size:.74rem; font-weight:700; }
.pill.done{ background:#e6f1ea; color:#2c6149; }
.pill.warn{ background:#fbe9e9; color:#a3261f; }
.pill.finance{ background:#fbf0e1; color:#945c10; }
.pill.status-pill{ background:#e9eef6; color:#2f4f72; }

/* ── 2. TABLES — reference density/typography for all module list tables ───
   (Shipment .ship-table and report .rpt-table keep their own rules.)      */
.app-view table:not(.ship-table):not(.rpt-table) th,
.app-view table:not(.ship-table):not(.rpt-table) td{ padding:9px 12px; }
.app-view table:not(.ship-table):not(.rpt-table) th{ font-size:.7rem; letter-spacing:.045em; font-weight:800; }
.app-view table:not(.ship-table):not(.rpt-table) tbody tr:hover{ background:#faf8f3; }
.app-view table:not(.ship-table):not(.rpt-table) td.amount,
.app-view table:not(.ship-table):not(.rpt-table) th.amount{ text-align:right; font-variant-numeric:tabular-nums; }

/* ── 3. CARDS — KPI / summary consistency ─────────────────────────────────
   .metric (summary) and .rpt-kpi (reports) share the same shape.          */
.metric{ border-radius:10px; }
.metric strong{ font-weight:800; }

/* ── 4. BUTTON VARIANTS — green ONLY for positive (primary/success) ───────*/
button.primary, .btn-primary, .btn-success{ background:var(--green); border-color:var(--green); color:#fff; font-weight:700; }
button.primary:hover, .btn-primary:hover, .btn-success:hover{ background:var(--green-dark); border-color:var(--green-dark); }
.btn-secondary{ background:var(--panel); border:1px solid var(--line); color:var(--ink); font-weight:650; }
.btn-secondary:hover{ border-color:#b8ae9f; background:var(--bg); }
.btn-warning{ background:#fbf0e1; border:1px solid #f0dcbf; color:#945c10; font-weight:700; }
.btn-warning:hover{ background:#f6e6cd; }
.btn-danger{ background:#fbe9e9; border:1px solid #f1c6c6; color:#a3261f; font-weight:700; }
.btn-danger:hover{ background:#f6dcdc; }

/* ── 5. EMPTY STATES — consistent card with icon across modules ───────────*/
.empty{ padding:40px 20px; color:var(--muted); text-align:center; border:1px dashed var(--line); border-radius:12px; background:var(--bg); font-size:.9rem; line-height:1.5; }
.empty::before{ content:"📭"; display:block; font-size:1.7rem; margin-bottom:8px; opacity:.75; }
.empty strong{ color:var(--ink); }

/* ── 6. PAGE HEADERS — optional helpers for module titles/descriptions ────*/
.ds-page-head{ margin:2px 0 16px; }
.ds-page-title{ margin:0; font-size:1.15rem; font-weight:800; letter-spacing:-.01em; }
.ds-page-desc{ margin:4px 0 0; color:var(--muted); font-size:.86rem; }