/**
 * _global_dark_override.css — Can I Take Your Order v3.9.1
 * Universal dark mode override for all pages.
 * Overrides any inline or legacy light-mode CSS across all 69+ legacy pages.
 * Also provides the page transition animation system.
 *
 * Include AFTER any existing <style> blocks:
 * <link rel="stylesheet" href="assets/css/_global_dark_override.css">
 *
 * Works standalone — does NOT require _design_system.css to be present first.
 */

/* ── DARK TOKENS (mirror _design_system.css so both can coexist) ────────── */
:root {
  --bg:        #050d1a;
  --bg-2:      #0a1628;
  --bg-3:      #0f2040;
  --surface-1: #111d35;
  --surface-2: #162032;
  --surface-3: #1c2a44;
  --border:    #1e3a5f;
  --border-2:  #274166;
  --text:      #f0f4f8;
  --text-2:    #c8d8e8;
  --text-muted:#7a9cc0;
  --text-dim:  #3d5a7a;
  --accent:    #16a34a;
  --accent-2:  #4ade80;
  --danger:    #ef4444;
  --warning:   #f59e0b;
  --info:      #38bdf8;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-full: 9999px;
  --glass-bg:  rgba(17,29,53,0.85);
  --hover:     rgba(30,58,95,0.6);
  /* Legacy variable names used by old pages */
  --primary:        #16a34a;
  --primary-dark:   #14532d;
  --white:          #111d35;
}

/* ── UNIVERSAL BODY + BACKGROUND OVERRIDE ───────────────────────────────── */
html, body {
  background-color: #0a1628 !important;
  background:       #0a1628 !important;
  color:            #f0f4f8 !important;
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* ── OVERRIDE LEGACY LIGHT BACKGROUNDS ─────────────────────────────────── */
/* Catch all common light-mode patterns from the 69 legacy files */
[style*="background:#f"],
[style*="background: #f"],
[style*="background:white"],
[style*="background: white"],
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background-color:#f"],
[style*="background-color: #f"] {
  background-color: var(--surface-1) !important;
  color: var(--text) !important;
}

/* ── HEADERS + NAVBARS ──────────────────────────────────────────────────── */
header, nav, .navbar, .topbar, .header, .site-header,
[class*="header"], [class*="topbar"], [class*="navbar"] {
  background: rgba(5,13,26,0.95) !important;
  background-color: rgba(5,13,26,0.95) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text) !important;
}
header a, nav a, .navbar a {
  color: var(--text-muted) !important;
}
header a:hover, nav a:hover { color: var(--text) !important; }

/* ── CARDS / PANELS / CONTAINERS ────────────────────────────────────────── */
.card, .panel, .box, .container-box,
[class*="card"]:not([class*="nav-card"]):not([class*="stat-card"]):not([class*="recipe-card"]),
[class*="panel"], [class*="section"] {
  background-color: var(--surface-1) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ── TABLES ─────────────────────────────────────────────────────────────── */
table { border-collapse: collapse; width: 100%; }
th {
  background-color: var(--surface-2) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
td {
  background-color: transparent !important;
  color: var(--text-2) !important;
  border-color: var(--border) !important;
}
tr:hover td {
  background-color: rgba(30,58,95,0.4) !important;
}
tr:nth-child(even) td {
  background-color: rgba(17,29,53,0.5) !important;
}
/* Legacy .zebra / .striped */
.zebra tr:nth-child(even) td,
.striped tr:nth-child(even) td {
  background-color: rgba(17,29,53,0.5) !important;
}

/* ── FORMS ───────────────────────────────────────────────────────────────── */
input[type=text], input[type=email], input[type=password],
input[type=number], input[type=date], input[type=time],
input[type=search], input[type=tel], input[type=url],
select, textarea {
  background-color: var(--bg-3) !important;
  background:       var(--bg-3) !important;
  color:            var(--text) !important;
  border:           1px solid var(--border) !important;
  border-radius:    var(--radius) !important;
  padding:          .6rem .9rem !important;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,.18) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--text-dim) !important;
}
label {
  color: var(--text-muted) !important;
  font-size: .82rem;
  font-weight: 600;
}
select option {
  background-color: var(--bg-3) !important;
  color: var(--text) !important;
}
/* Radio / checkbox labels */
input[type=radio], input[type=checkbox] {
  accent-color: var(--accent);
}

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
/* Primary green buttons */
button[type=submit],
.btn-primary, .btn-submit, .btn-save, .btn-green,
button.primary, input[type=submit] {
  background: linear-gradient(135deg, #16a34a, #0d7a3a) !important;
  background-color: #16a34a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--radius) !important;
  padding: .65rem 1.25rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all .2s !important;
  box-shadow: 0 4px 16px rgba(22,163,74,.25) !important;
}
button[type=submit]:hover,
.btn-primary:hover, input[type=submit]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(22,163,74,.4) !important;
}
/* Danger buttons */
.btn-danger, .btn-delete, .btn-red, button.danger {
  background: rgba(239,68,68,.15) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239,68,68,.35) !important;
}
.btn-danger:hover { background: rgba(239,68,68,.28) !important; }
/* Ghost/secondary */
.btn-ghost, .btn-secondary, .btn-back, .btn-cancel, a.btn-back {
  background: var(--surface-2) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border) !important;
}
.btn-ghost:hover, .btn-secondary:hover { background: var(--surface-3) !important; color: var(--text) !important; }

/* ── ALERTS / MESSAGES ───────────────────────────────────────────────────── */
.alert.success, .message.success, .msg-success, [class*="alert-success"] {
  background: rgba(34,197,94,.12) !important;
  border: 1px solid rgba(34,197,94,.35) !important;
  color: #4ade80 !important;
  border-radius: var(--radius) !important;
}
.alert.error, .message.error, .msg-error, [class*="alert-error"],
.alert.danger, [class*="alert-danger"] {
  background: rgba(239,68,68,.12) !important;
  border: 1px solid rgba(239,68,68,.35) !important;
  color: #f87171 !important;
  border-radius: var(--radius) !important;
}
.alert.warning, .message.warning, .msg-warning, [class*="alert-warning"] {
  background: rgba(245,158,11,.12) !important;
  border: 1px solid rgba(245,158,11,.35) !important;
  color: #fbbf24 !important;
  border-radius: var(--radius) !important;
}
.alert.info, [class*="alert-info"] {
  background: rgba(56,189,248,.12) !important;
  border: 1px solid rgba(56,189,248,.35) !important;
  color: #7dd3fc !important;
  border-radius: var(--radius) !important;
}

/* ── BADGES / STATUS PILLS ───────────────────────────────────────────────── */
.badge, .pill, .tag, .status-badge {
  border-radius: var(--radius-full) !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
  padding: .2rem .65rem !important;
}

/* ── LINKS ───────────────────────────────────────────────────────────────── */
a { color: var(--accent-2) !important; text-decoration: none; }
a:hover { color: #86efac !important; }
/* Preserve button-styled links */
a.btn-primary, a.btn-danger, a.btn-ghost, a.btn-back,
a[class*="btn"], a[class*="nav-card"] {
  text-decoration: none !important;
}

/* ── LEGACY PAGE-SPECIFIC OVERRIDES ─────────────────────────────────────── */
/* Old --primary / --bg variables used by legacy pages */
body { --primary: #16a34a; --primary-dark: #14532d; --bg: #0a1628; --white: #111d35; --text: #f0f4f8; --border: #1e3a5f; }

/* Segoe UI override — keep Inter */
* { font-family: inherit !important; }
body, html { font-family: 'Inter', 'Segoe UI', system-ui, sans-serif !important; }

/* ── SCROLLBAR ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ════════════════════════════════════════════════════════════════════════════
   PAGE TRANSITION SYSTEM
   Slide current page out → slide new page in on every navigation.
   Works via the data-transition-link attribute or automatic on <a> clicks.
   ════════════════════════════════════════════════════════════════════════════ */

/* Entry animation — new page slides in from right */
@keyframes pt-slide-in {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: translateX(0);    }
}
/* Exit animation — current page slides out to left */
@keyframes pt-slide-out {
  from { opacity: 1; transform: translateX(0);    }
  to   { opacity: 0; transform: translateX(-48px); }
}
/* Back navigation — slides in from left */
@keyframes pt-slide-in-back {
  from { opacity: 0; transform: translateX(-48px); }
  to   { opacity: 1; transform: translateX(0);     }
}

/* The transition wrapper — wraps body content */
.pt-wrapper {
  animation: pt-slide-in 0.32s cubic-bezier(0.4, 0, 0.2, 1) both;
  will-change: transform, opacity;
}
.pt-wrapper.pt-exit {
  animation: pt-slide-out 0.22s cubic-bezier(0.4, 0, 0.2, 1) both;
  pointer-events: none;
}
.pt-wrapper.pt-enter-back {
  animation: pt-slide-in-back 0.32s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Progress bar at top of page during navigation */
.pt-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9999;
  background: linear-gradient(90deg, #16a34a, #4ade80, #16a34a);
  background-size: 200% 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
  border-radius: 0 2px 2px 0;
}
.pt-progress.pt-loading {
  transform: scaleX(0.7);
  animation: pt-progress-shimmer 1s linear infinite;
}
.pt-progress.pt-done {
  transform: scaleX(1);
  transition: transform 0.1s ease;
}
@keyframes pt-progress-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}