/* ============================================================================
   COD Admin — Design System ("Instrument")
   One linked stylesheet = the whole design language. Loaded by index.html, the
   login page, and design-system.html so every surface stays coherent.

   Layers:
     1. Tokens        — color/space/type/radius as CSS variables (light + dark)
     2. Base          — typography, focus, scrollbars, motion, RTL
     3. Overrides     — re-skin the Tailwind utilities the existing markup uses
                        (this is what re-themes every screen + enables dark mode
                        without editing 2,000 lines of bindings)
     4. Components    — canonical .btn / .input / .card / status pills / skeleton
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* ── 1. TOKENS ─────────────────────────────────────────────────────────────── */
:root {
  /* Accent — ONE brand color (indigo). Chrome + primary actions only. */
  --accent-50:#eef2ff; --accent-100:#e0e7ff; --accent-200:#c7d2fe; --accent-300:#a5b4fc;
  --accent-400:#818cf8; --accent-500:#6366f1; --accent-600:#4f46e5; --accent-700:#4338ca;
  --accent-800:#3730a3; --accent-900:#312e81;
  --accent: var(--accent-600);
  --accent-hover: var(--accent-700);
  --accent-fg: #ffffff;
  --accent-weak: var(--accent-50);
  --accent-weak-fg: var(--accent-700);

  /* Neutral ramp */
  --n-50:#f8fafc; --n-100:#f1f5f9; --n-200:#e2e8f0; --n-300:#cbd5e1; --n-400:#94a3b8;
  --n-500:#64748b; --n-600:#475569; --n-700:#334155; --n-800:#1e293b; --n-900:#0f172a;

  /* Semantic surfaces / text / borders */
  --bg:        var(--n-100);   /* app background            */
  --surface:   #ffffff;        /* cards, header, table      */
  --surface-2: var(--n-50);    /* subtle fill / hover       */
  --surface-3: var(--n-100);   /* table head, chips         */
  --border:    var(--n-200);   /* hairline                  */
  --border-strong: var(--n-300);
  --text:      var(--n-900);
  --text-muted:var(--n-500);
  --text-subtle:var(--n-400);
  --ring: var(--accent-500);

  /* Sidebar (its own dark chrome in light mode, deeper in dark) */
  --side-bg: var(--n-900);
  --side-fg: var(--n-300);
  --side-fg-strong:#ffffff;
  --side-active-bg: rgba(255,255,255,.08);
  --side-border: rgba(255,255,255,.07);

  /* Status palette — the ONLY strong color in tables. NEEDS_REVIEW is loudest. */
  --st-pending-bg:#fef3c7;  --st-pending-fg:#92400e;  --st-pending-dot:#f59e0b;
  --st-await-bg:#e0f2fe;    --st-await-fg:#075985;    --st-await-dot:#0ea5e9;
  --st-confirmed-bg:#dcfce7;--st-confirmed-fg:#166534;--st-confirmed-dot:#22c55e;
  --st-review-bg:#fee2e2;   --st-review-fg:#991b1b;    --st-review-dot:#ef4444;
  --st-correction-bg:#ffedd5;--st-correction-fg:#9a3412;--st-correction-dot:#f97316;
  --st-shipped-bg:#e0e7ff;  --st-shipped-fg:#3730a3;  --st-shipped-dot:#6366f1;
  --st-delivered-bg:#ccfbf1;--st-delivered-fg:#115e59;--st-delivered-dot:#14b8a6;
  --st-cancelled-bg:#e5e7eb;--st-cancelled-fg:#374151;--st-cancelled-dot:#9ca3af;
  --st-returned-bg:#ede9e3; --st-returned-fg:#57534e;  --st-returned-dot:#a8a29e;
  --st-default-bg:var(--n-100); --st-default-fg:var(--n-600); --st-default-dot:var(--n-400);

  /* Feedback */
  --danger:#dc2626; --danger-hover:#b91c1c; --danger-weak:#fef2f2; --danger-fg:#ffffff;
  --ok:#16a34a; --warn:#d97706;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 9999px;
  --shadow: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-lg: 0 10px 30px rgba(15,23,42,.12);
  --content-max: 1400px;
}

html.dark {
  --bg: #0b1120;
  --surface: #111827;
  --surface-2: #161f30;
  --surface-3: #1c2740;
  --border: #243049;
  --border-strong: #33415c;
  --text: #e5e9f0;
  --text-muted: #94a3b8;
  --text-subtle: #64748b;
  --accent: var(--accent-500);
  --accent-hover: var(--accent-400);
  --accent-weak: rgba(99,102,241,.15);
  --accent-weak-fg: #c7d2fe;
  --ring: var(--accent-400);

  --side-bg: #0a0f1c;
  --side-fg: #94a3b8;
  --side-active-bg: rgba(255,255,255,.06);
  --side-border: rgba(255,255,255,.06);

  /* Dark status pills: translucent fill, light text */
  --st-pending-bg:rgba(245,158,11,.16);   --st-pending-fg:#fcd34d;
  --st-await-bg:rgba(14,165,233,.16);      --st-await-fg:#7dd3fc;
  --st-confirmed-bg:rgba(34,197,94,.16);   --st-confirmed-fg:#86efac;
  --st-review-bg:rgba(239,68,68,.20);      --st-review-fg:#fca5a5;
  --st-correction-bg:rgba(249,115,22,.16); --st-correction-fg:#fdba74;
  --st-shipped-bg:rgba(99,102,241,.18);    --st-shipped-fg:#c7d2fe;
  --st-delivered-bg:rgba(20,184,166,.16);  --st-delivered-fg:#5eead4;
  --st-cancelled-bg:rgba(148,163,184,.16); --st-cancelled-fg:#cbd5e1;
  --st-returned-bg:rgba(168,162,158,.16);  --st-returned-fg:#d6d3d1;
  --st-default-bg:rgba(148,163,184,.14);   --st-default-fg:#cbd5e1;

  --danger-weak: rgba(220,38,38,.15);
  --shadow: 0 1px 2px rgba(0,0,0,.4);
  --shadow-lg: 0 12px 36px rgba(0,0,0,.5);
}

/* ── 2. BASE ───────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
}
[x-cloak] { display: none !important; }

/* Numbers that must align/not jitter on refresh */
.tabular-nums, .tabular, table td, table th, .num { font-variant-numeric: tabular-nums; }

/* Visible keyboard focus everywhere */
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

/* Scrollbars */
.scroll-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-thin::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 9999px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }

/* Motion: fast + respectful */
* { transition-duration: 150ms; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* RTL: mirror chat bubble corners for Arabic/Darija content */
[dir="rtl"], [dir="auto"]:lang(ar) { text-align: start; }

/* ── 3. OVERRIDE LAYER (re-skin existing utilities → tokens, both themes) ───── */
/* Surfaces */
.bg-white { background-color: var(--surface) !important; }
.bg-slate-50, .bg-gray-50 { background-color: var(--surface-2) !important; }
.bg-slate-100, .bg-gray-100, .bg-slate-100\/70 { background-color: var(--surface-3) !important; }
.bg-slate-200\/70 { background-color: var(--surface-3) !important; }
/* App background container */
.bg-slate-100.text-slate-800 { background-color: var(--bg) !important; }

/* Text */
.text-slate-900, .text-gray-900, .text-slate-800, .text-gray-800, .text-slate-700, .text-gray-700 { color: var(--text) !important; }
.text-slate-600, .text-gray-600, .text-slate-500, .text-gray-500 { color: var(--text-muted) !important; }
.text-slate-400, .text-gray-400 { color: var(--text-subtle) !important; }

/* Borders / dividers */
.border-slate-200, .border-gray-200, .border-slate-100, .border-slate-300, .border-gray-300 { border-color: var(--border) !important; }
.divide-slate-100 > :not([hidden]) ~ :not([hidden]), .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }

/* Hover fills */
.hover\:bg-slate-50:hover, .hover\:bg-gray-50:hover { background-color: var(--surface-2) !important; }
.hover\:bg-slate-100:hover, .hover\:bg-gray-100:hover { background-color: var(--surface-3) !important; }
.hover\:bg-emerald-50\/40:hover { background-color: var(--accent-weak) !important; }

/* Accent re-point: the app's emerald → the single indigo accent */
.bg-emerald-600 { background-color: var(--accent) !important; }
.hover\:bg-emerald-700:hover { background-color: var(--accent-hover) !important; }
.bg-emerald-500 { background-color: var(--accent) !important; }
.text-emerald-600, .text-emerald-700, .text-emerald-900 { color: var(--accent) !important; }
.bg-emerald-50, .bg-emerald-100 { background-color: var(--accent-weak) !important; }
.text-emerald-800 { color: var(--accent-weak-fg) !important; }
.ring-emerald-400, .ring-emerald-500, .focus\:ring-emerald-400:focus, .focus\:ring-emerald-500:focus { --tw-ring-color: var(--ring) !important; }
.border-emerald-200, .border-emerald-300 { border-color: var(--accent) !important; }

/* Dark sidebar / log panels stay dark but tokenized */
.bg-slate-900 { background-color: var(--side-bg) !important; }
.bg-slate-800 { background-color: var(--side-active-bg) !important; }
.border-slate-800 { border-color: var(--side-border) !important; }

/* ── 4. COMPONENTS ─────────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 38px; padding: 0 14px; border-radius: var(--radius-sm);
  font-size: .875rem; font-weight: 500; line-height: 1; cursor: pointer;
  border: 1px solid transparent; white-space: nowrap; user-select: none;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-2); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.btn-danger { background: var(--danger); color: var(--danger-fg); }
.btn-danger:hover:not(:disabled) { background: var(--danger-hover); }
.btn-sm { height: 30px; padding: 0 10px; font-size: .8125rem; }

.input, .field {
  width: 100%; height: 38px; padding: 0 12px; font-size: .875rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.input::placeholder { color: var(--text-subtle); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
textarea.input { height: auto; padding: 10px 12px; }

/* Status pills (color only — structural classes stay in markup). */
.st-pending{background:var(--st-pending-bg)!important;color:var(--st-pending-fg)!important}
.st-await{background:var(--st-await-bg)!important;color:var(--st-await-fg)!important}
.st-confirmed{background:var(--st-confirmed-bg)!important;color:var(--st-confirmed-fg)!important}
.st-review{background:var(--st-review-bg)!important;color:var(--st-review-fg)!important}
.st-correction{background:var(--st-correction-bg)!important;color:var(--st-correction-fg)!important}
.st-shipped{background:var(--st-shipped-bg)!important;color:var(--st-shipped-fg)!important}
.st-delivered{background:var(--st-delivered-bg)!important;color:var(--st-delivered-fg)!important}
.st-cancelled{background:var(--st-cancelled-bg)!important;color:var(--st-cancelled-fg)!important}
.st-returned{background:var(--st-returned-bg)!important;color:var(--st-returned-fg)!important}
.st-default{background:var(--st-default-bg)!important;color:var(--st-default-fg)!important}
.dot-pending{background:var(--st-pending-dot)!important}
.dot-await{background:var(--st-await-dot)!important}
.dot-confirmed{background:var(--st-confirmed-dot)!important}
.dot-review{background:var(--st-review-dot)!important}
.dot-correction{background:var(--st-correction-dot)!important}
.dot-shipped{background:var(--st-shipped-dot)!important}
.dot-delivered{background:var(--st-delivered-dot)!important}
.dot-cancelled{background:var(--st-cancelled-dot)!important}
.dot-returned{background:var(--st-returned-dot)!important}
.dot-default{background:var(--st-default-dot)!important}

/* Skeleton shimmer for polled data */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
  background-size: 400% 100%; animation: skeleton 1.4s ease infinite; border-radius: 6px;
}
@keyframes skeleton { 0%{background-position:100% 50%} 100%{background-position:0 50%} }

/* Empty state */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
.empty-state svg { width: 40px; height: 40px; margin: 0 auto .75rem; color: var(--text-subtle); }