/* ══════════════════════════════════════════════════════════════
   Ampron UI v2 — Design System Override
   Loads after app.css. Remaps legacy HUD tokens → v2 values.
   Adds all v2 component classes.
   ══════════════════════════════════════════════════════════════ */

/* ── v2 native tokens ─────────────────────────────────────── */
:root {
  --red:#E30613; --red-tint:#fdf1f2; --red-border:rgba(227,6,19,.18); --red-soft:rgba(227,6,19,.10);
  --red-rgb:227 6 19;
  --green:#16a34a; --green-tint:#f0fdf4; --green-rgb:22 163 74;
  --amber:#d97706; --amber-tint:#fffbeb; --amber-rgb:217 119 6;
  --blue:#2563eb;  --blue-tint:#eff6ff;
  --ink-1:#111827; --ink-2:#374151; --ink-3:#6b7280; --ink-4:#9ca3af;
  --bg:#f8f9fa; --surface-1:#ffffff; --surface-2:#f8f9fa; --surface-3:#f3f4f6;
  --divider:#e5e7eb; --border:#e5e7eb;
  --radius-sm:10px; --radius:16px; --radius-lg:22px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow:0 4px 16px rgba(0,0,0,.07),0 1px 4px rgba(0,0,0,.04);
  --shadow-lg:0 8px 32px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.05);
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

.dark, [data-theme="dark"] {
  --red-tint:rgba(227,6,19,.12); --red-border:rgba(227,6,19,.22); --red-soft:rgba(227,6,19,.22);
  --green:#22c55e; --green-tint:rgba(34,197,94,.12); --green-rgb:34 197 94;
  --amber:#f59e0b; --amber-tint:rgba(245,158,11,.12); --amber-rgb:245 158 11;
  --blue:#60a5fa;  --blue-tint:rgba(96,165,250,.12);
  --ink-1:#f0eff0; --ink-2:#b8b6ba; --ink-3:#807e84; --ink-4:#4a484f;
  --bg:#0f0f10; --surface-1:#17171a; --surface-2:#1e1e22; --surface-3:#252529;
  --divider:rgba(255,255,255,.07); --border:rgba(255,255,255,.10);
  --shadow-sm:0 1px 3px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.25);
  --shadow:0 4px 16px rgba(0,0,0,.40),0 1px 4px rgba(0,0,0,.30);
  --shadow-lg:0 8px 32px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.40);
}

/* ── Remap legacy HUD tokens so existing Tailwind utilities use v2 values ── */
:root {
  --hud-bg: 248 249 250;
  --hud-panel: 255 255 255;
  --hud-card: 248 249 250;
  --hud-grid: 229 231 235;
  --hud-divider: 229 231 235;
  --hud-hover: 243 244 246;
  --accent: 227 6 19;       /* #E30613 — the one red */
  --accent-cobalt: 37 99 235;
  --mint: 22 163 74;        /* #16a34a */
  --solar: 217 119 6;       /* #d97706 */
  --crimson: 227 6 19;
  --lime: 101 163 13;
  --uv: 37 99 235;
  --txt-hi: 17 24 39;       /* #111827 */
  --txt-mid: 55 65 81;      /* #374151 */
  --txt-lo: 107 114 128;    /* #6b7280 */
}

.dark, [data-theme="dark"] {
  --hud-bg: 15 15 16;
  --hud-panel: 23 23 26;
  --hud-card: 30 30 34;
  --hud-grid: 37 37 41;
  --hud-divider: 39 39 42;  /* ≈ rgba(255,255,255,.10) on #0f0f10 */
  --hud-hover: 37 37 41;
  --accent: 227 6 19;
  --mint: 34 197 94;
  --solar: 245 158 11;
  --crimson: 227 6 19;
  --txt-hi: 240 239 240;
  --txt-mid: 184 182 186;
  --txt-lo: 128 126 132;
}

/* ── Typography ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Lexend', sans-serif !important;
  background: var(--bg) !important;
  background-image: none !important;  /* remove HUD grid pattern */
  color: var(--ink-1) !important;
  -webkit-font-smoothing: antialiased;
}

/* display font → Lexend 700 (was Rajdhani) */
.font-display { font-family: 'Lexend', sans-serif !important; }

/* mono → JetBrains Mono */
.font-mono, code, pre { font-family: 'JetBrains Mono', monospace !important; }

/* ── Page background ────────────────────────────────────────── */
html, body { background: var(--bg) !important; }
.dark body, [data-theme="dark"] body { background: #0f0f10 !important; }

/* ── Sidebar (left nav) ────────────────────────────────────── */
#sidebar {
  background: var(--surface-1) !important;
  border-right: 1px solid var(--border) !important;
}

#sidebar .nav-item {
  border-radius: 8px;
  transition: background 120ms var(--ease), color 120ms var(--ease);
}

#sidebar .nav-item:hover svg.nav-icon { transform: none !important; }

/* ── Masthead / top bar ────────────────────────────────────── */
.erp-masthead {
  height: 56px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 30;
  flex-shrink: 0;
}

.erp-logo-mark {
  width: 30px; height: 30px;
  background: var(--red);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(227,6,19,.25);
}

.erp-logo-mark svg { width: 17px; height: 17px; fill: #fff; }

.erp-wordmark {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}

.erp-masthead-action {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--ink-3);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 120ms var(--ease), color 120ms var(--ease);
}

.erp-masthead-action:hover {
  background: var(--surface-2);
  color: var(--ink-1);
}

.erp-masthead-action svg { width: 18px; height: 18px; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-family: 'Lexend', sans-serif;
  font-size: 15px; font-weight: 500;
  cursor: pointer; border: none; text-decoration: none;
  transition: background 150ms var(--ease), box-shadow 150ms var(--ease), opacity 150ms;
  line-height: 1;
}

.btn svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.9; }

.btn-primary {
  background: var(--red); color: #fff;
  box-shadow: 0 2px 10px rgba(227,6,19,.30);
}
.btn-primary:hover { background: #c9050f; }

.btn-secondary {
  background: var(--surface-1); color: var(--ink-2);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { background: var(--surface-2); }

.btn-ghost {
  background: transparent; color: var(--ink-2);
}
.btn-ghost:hover { background: var(--surface-2); }

.btn-danger {
  background: var(--red-tint); color: var(--red);
  border: 1px solid var(--red-border);
}
.btn-danger:hover { opacity: .82; }

.btn.sm { padding: 6px 13px; font-size: 13px; border-radius: 8px; }

.btn:disabled, .btn.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.btn-icon {
  width: 38px; height: 38px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-1); color: var(--ink-3);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: background 120ms var(--ease), color 120ms var(--ease);
}
.btn-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.btn-icon:hover { background: var(--surface-2); color: var(--ink-1); }

/* ── Inputs ─────────────────────────────────────────────────── */
.amp-input {
  width: 100%;
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 14px !important;
  font-family: 'Lexend', sans-serif !important;
  font-size: 15px !important;
  color: var(--ink-1) !important;
  outline: none !important;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.amp-input::placeholder { color: var(--ink-4) !important; }
.amp-input:hover { border-color: var(--ink-3) !important; }
.amp-input:focus {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px var(--red-tint) !important;
}

/* ── Input label ────────────────────────────────────────────── */
.input-label {
  font-size: 13px; font-weight: 500; color: var(--ink-3);
  display: block; margin-bottom: 6px;
}

/* ── Chips / status badges ──────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 9999px;
  font-size: 13px; font-weight: 500; font-family: 'Lexend', sans-serif;
  white-space: nowrap; border: none;
}
.chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.chip.green  { background: var(--green-tint);  color: var(--green); }
.chip.red    { background: var(--red-tint);    color: var(--red); }
.chip.amber  { background: var(--amber-tint);  color: var(--amber); }
.chip.blue   { background: var(--blue-tint);   color: var(--blue); }
.chip.gray   { background: var(--surface-3);   color: var(--ink-3); border: 1px solid var(--border); }
.chip.solid-blue { background: var(--blue); color: #fff; }

/* ── Status pills ───────────────────────────────────────────── */
.status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px; border-radius: 9999px;
  font-size: 13px; font-weight: 500; font-family: 'Lexend', sans-serif;
}
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill.online  { background: var(--green-tint);  color: var(--green); }
.status-pill.alert   { background: var(--red-tint);    color: var(--red); }
.status-pill.warn    { background: var(--amber-tint);  color: var(--amber); }
.status-pill.info    { background: var(--blue-tint);   color: var(--blue); }
.status-pill.offline { background: var(--surface-3);   color: var(--ink-3); border: 1px solid var(--border); }

/* ── ID tags / mono tags ────────────────────────────────────── */
.id-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: var(--ink-3);
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 2px 7px; border-radius: 5px;
}

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--surface-1);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--divider);
  overflow: hidden;
}
.card.lift {
  transition: transform 140ms var(--ease), box-shadow 140ms var(--ease), border-color 140ms var(--ease);
  cursor: pointer;
}
.card.lift:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border); }
.card.selected { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-tint); }

/* ── Section / table containers ─────────────────────────────── */
.erp-section {
  background: var(--surface-1);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.erp-section-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--divider);
  display: flex; align-items: center; justify-content: space-between;
}

.erp-section-title {
  font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-4);
}

/* ── Data tables ────────────────────────────────────────────── */
.erp-table { width: 100%; border-collapse: collapse; }
.erp-table th {
  font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-4); text-align: left;
  padding: 11px 20px; background: var(--surface-2);
  border-bottom: 1px solid var(--divider);
}
.erp-table td {
  padding: 13px 20px; font-size: 15px;
  color: var(--ink-2); border-bottom: 1px solid var(--divider);
  vertical-align: middle;
}
.erp-table tr:last-child td { border-bottom: none; }
.erp-table tr:hover td { background: var(--surface-2); }

/* ── Toast ──────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
  right: 1.5rem;
  z-index: 9999;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}

.toast {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-left: 3px solid var(--ink-3) !important;
  border-radius: var(--radius-sm) !important;
  padding: 13px 16px !important;
  box-shadow: var(--shadow) !important;
  max-width: 360px;
  animation: toast-slide-in 200ms var(--ease-out) !important;
  color: var(--ink-1) !important;
  font-family: 'Lexend', sans-serif !important;
  font-size: 14px !important;
}

.toast.success { border-left-color: var(--green) !important; }
.toast.info    { border-left-color: var(--blue) !important; }
.toast.warn    { border-left-color: var(--amber) !important; }
.toast.error   { border-left-color: var(--red) !important; }

@keyframes toast-slide-in {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* ── Modal ──────────────────────────────────────────────────── */
.modal {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.modal-head {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--divider);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-head .modal-title { font-size: 17px; font-weight: 600; color: var(--ink-1); }
.modal-body { padding: 18px 22px; font-size: 15px; color: var(--ink-2); }
.modal-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--divider);
  display: flex; justify-content: flex-end; gap: 10px;
  background: var(--surface-2);
}

/* ── KPI stat card ──────────────────────────────────────────── */
.kpi-card {
  background: var(--surface-1);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform 140ms var(--ease), box-shadow 140ms var(--ease);
  text-decoration: none; display: block;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.kpi-label {
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-4); margin-bottom: 8px;
}
.kpi-value {
  font-family: 'Lexend', sans-serif;
  font-size: 36px; font-weight: 700;
  letter-spacing: -.04em; line-height: 1;
  color: var(--ink-1);
}
.kpi-value.red   { color: var(--red); }
.kpi-value.green { color: var(--green); }
.kpi-value.amber { color: var(--amber); }
.kpi-value.muted { color: var(--ink-3); }

/* ── Count badge ────────────────────────────────────────────── */
.count-badge {
  min-width: 20px; height: 20px; padding: 0 6px;
  background: var(--red); color: #fff;
  border-radius: 9999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
}
.count-badge.muted { background: var(--surface-3); color: var(--ink-3); border: 1px solid var(--border); }

/* ── Form groups ────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; }

/* ── Notification badge on bell ─────────────────────────────── */
.notif-badge {
  position: absolute; top: -4px; right: -4px;
  width: 16px; height: 16px;
  background: var(--red); color: #fff;
  border-radius: 9999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
}

/* ── Right panel (order detail, partner panel) ───────────────── */
.erp-panel {
  background: var(--surface-1);
  border-left: 1px solid var(--divider);
}

/* ── Overdue / urgency color ────────────────────────────────── */
.text-overdue { color: var(--red) !important; }
.text-soon    { color: var(--amber) !important; }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

/* ── Motion: respect reduced-motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Suppress old HUD decorative elements ───────────────────── */
.hud-cut { clip-path: none !important; }
.hud-glow { box-shadow: none !important; }
.hud-glow:hover { box-shadow: var(--shadow) !important; border-color: var(--border) !important; }
.hud-inner { box-shadow: none !important; }
.hud-dot-pulse { animation: none; }

/* HTMX */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-block; }

/* ── Status dropdown menu ───────────────────────────────────── */
.status-menu {
  background: var(--surface-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow) !important;
}
.status-menu button { color: var(--ink-2) !important; }
.status-menu button:hover { background: var(--surface-2) !important; color: var(--ink-1) !important; }

/* ── Login page ─────────────────────────────────────────────── */
.login-card {
  background: var(--surface-1);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: 36px 32px;
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 380px;
}

/* ── Focus ring ─────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }