/* ═══════════════════════════════════════════════════════════════
   ONYX & CHAMPAGNE — Premium restaurant admin design system
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Surfaces */
  --bg:        #0B0B0F;
  --surface:   #15151C;
  --surface-2: #1E1E27;
  --surface-3: #272731;
  --surface-4: #32323E;

  /* Ink (text) — warm ivory hierarchy */
  --ink:       #F2EEE3;
  --ink-2:     #B8B0A0;
  --ink-3:     #6B6356;

  /* Hairline borders */
  --line:    rgba(242, 238, 227, 0.08);
  --line-2:  rgba(242, 238, 227, 0.04);
  --line-strong: rgba(242, 238, 227, 0.14);

  /* Accent — muted champagne */
  --accent:        #C9A86A;
  --accent-2:      #E4C885;
  --accent-3:      #7B6A48;
  --accent-tint:   rgba(201, 168, 106, 0.10);
  --accent-tint-2: rgba(201, 168, 106, 0.18);
  --accent-glow:   rgba(201, 168, 106, 0.35);

  /* Status colors — desaturated, refined */
  --success: #7BA889;
  --danger:  #C57565;
  --info:    #7A8FB0;
  --warn:    #C9A86A;

  /* Typography */
  --serif:  'Cinzel', serif;
  --sans:   'Inter', 'Cairo', 'Segoe UI', sans-serif;
  --arabic: 'Cairo', 'Tajawal', sans-serif;
  --mono:   'JetBrains Mono', 'Geist Mono', 'Courier New', monospace;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* Shadows — refined */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.50);

  /* Backwards-compat aliases (so existing components keep working) */
  --menu-bg:       var(--bg);
  --menu-surface:  var(--surface);
  --menu-surface2: var(--surface-2);
  --menu-ink:      var(--ink);
  --menu-ink2:     var(--ink-2);
  --menu-ink3:     var(--ink-3);
  --menu-accent:   var(--accent);
  --menu-accent2:  var(--accent-2);
  --menu-line:     var(--line);
  --menu-serif:    var(--serif);
  --menu-sans:     var(--arabic);
  --menu-body:     var(--arabic);
  --menu-mono:     var(--mono);
}

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

body {
  font-family: var(--arabic);
  background: var(--bg);
  color: var(--ink);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ───────────── Scrollbar (subtle champagne) ───────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(242, 238, 227, 0.10);
  border-radius: 4px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ───────────── Selection ───────────── */
::selection { background: var(--accent-tint-2); color: var(--accent-2); }

/* ───────────── Blazor Error UI ───────────── */
#blazor-error-ui {
  background: var(--surface);
  color: var(--ink);
  bottom: 0;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.6);
  display: none;
  left: 0;
  padding: 0.75rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
  font-family: var(--arabic);
  border-top: 1px solid var(--accent);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; left: 1rem; top: 0.5rem; color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════
   MUDBLAZOR — fully dark theme overrides
   ═══════════════════════════════════════════════════════════════ */

/* ── Layout ── */
.mud-layout { background: var(--bg); }
.mud-main-content { background: var(--bg); }
.mud-drawer { background: var(--surface) !important; border-inline-start: 1px solid var(--line) !important; }
.mud-appbar { background: var(--surface) !important; border-bottom: 1px solid var(--line) !important; }
.mud-container { color: var(--ink); }

/* ── Navigation ── */
.mud-nav-link {
  color: var(--ink-2) !important;
  font-family: var(--arabic) !important;
  border-radius: var(--r-md) !important;
  margin: 0 var(--sp-2) var(--sp-1) !important;
  padding: 10px 14px !important;
  transition: all 0.22s ease !important;
  position: relative;
}
.mud-nav-link:hover {
  background: var(--accent-tint) !important;
  color: var(--ink) !important;
}
.mud-nav-link.active,
.mud-nav-link[aria-current="page"] {
  background: linear-gradient(90deg, var(--accent-tint-2), var(--accent-tint)) !important;
  color: var(--accent-2) !important;
  font-weight: 600 !important;
}
.mud-nav-link.active::before {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  background: var(--accent);
  border-radius: 3px 0 0 3px;
  box-shadow: -2px 0 8px var(--accent-glow);
}
.mud-nav-item .mud-nav-link-icon { color: var(--accent) !important; }

/* ── Paper / Cards ── */
.mud-paper {
  background: var(--surface) !important;
  color: var(--ink) !important;
  font-family: var(--arabic) !important;
  border-radius: var(--r-lg) !important;
}
.mud-card {
  background: var(--surface) !important;
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--line);
}

/* ── Buttons ── */
.mud-button-filled {
  background: var(--accent) !important;
  color: var(--bg) !important;
  font-family: var(--arabic) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  text-transform: none;
  border-radius: var(--r-pill) !important;
  padding: 8px 22px;
  transition: all 0.22s ease;
  box-shadow: var(--shadow-sm);
}
.mud-button-filled:hover {
  background: var(--accent-2) !important;
  box-shadow: 0 8px 24px var(--accent-glow);
  transform: translateY(-1px);
}
.mud-button-outlined {
  border-color: var(--line-strong) !important;
  color: var(--ink) !important;
  font-family: var(--arabic) !important;
}
.mud-button-text { color: var(--ink-2) !important; }
.mud-button-text:hover { background: var(--accent-tint) !important; color: var(--accent-2) !important; }

/* ── IconButton ── */
.mud-icon-button { color: var(--ink-2) !important; transition: all .22s; }
.mud-icon-button:hover {
  background: var(--accent-tint) !important;
  color: var(--accent-2) !important;
}

/* ── Inputs ── */
.mud-input-outlined .mud-input-outlined-border { border-color: var(--line-strong) !important; }
.mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--accent) !important; }
.mud-input-outlined.mud-focused .mud-input-outlined-border { border-color: var(--accent-2) !important; border-width: 1.5px !important; }
.mud-input-root { color: var(--ink) !important; font-family: var(--arabic) !important; }
.mud-input-label { color: var(--ink-3) !important; font-family: var(--arabic) !important; }
.mud-input-label.mud-input-label-outlined.mud-focused { color: var(--accent-2) !important; }
.mud-input-helper-text { font-family: var(--mono) !important; font-size: 10px !important; color: var(--ink-3) !important; }

/* RTL adornment fix */
.mud-input-adornment-start { order: 2; }
.mud-input-slot { text-align: right; }

/* ── DataGrid / Table ── */
.mud-table {
  background: var(--surface) !important;
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--line);
  overflow: hidden;
}
.mud-table-head { background: var(--surface-2) !important; }
.mud-table-head .mud-table-cell {
  font-family: var(--mono) !important;
  letter-spacing: 0.12em;
  font-size: 10px !important;
  text-transform: uppercase;
  color: var(--accent) !important;
  border-bottom: 1px solid var(--line-strong) !important;
  padding: 14px 16px !important;
}
.mud-table-cell {
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line-2) !important;
  font-family: var(--arabic) !important;
  font-size: 13px !important;
  padding: 14px 16px !important;
}
.mud-table-row:hover { background: var(--accent-tint) !important; }
.mud-data-grid {
  background: var(--surface) !important;
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--line);
}
.mud-data-grid .mud-input-control { background: transparent !important; }

/* ── Dialog ── */
.mud-dialog {
  background: var(--surface) !important;
  border-radius: var(--r-xl) !important;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}
.mud-dialog-title { color: var(--ink) !important; font-family: var(--arabic) !important; padding: 22px 26px 8px !important; }
.mud-dialog-content { padding: 8px 26px 22px !important; color: var(--ink) !important; }
.mud-dialog-actions { padding: 14px 26px 22px !important; border-top: 1px solid var(--line); }
.mud-overlay-dialog { background: rgba(0, 0, 0, 0.72) !important; backdrop-filter: blur(6px); }

/* ── Chip ── */
.mud-chip {
  font-family: var(--arabic) !important;
  border-radius: var(--r-sm) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  height: 24px !important;
}
.mud-chip-filled.mud-chip-color-primary {
  background: var(--accent) !important;
  color: var(--bg) !important;
}
.mud-chip-filled.mud-chip-color-secondary {
  background: var(--accent-tint-2) !important;
  color: var(--accent-2) !important;
  border: 1px solid var(--accent-3);
}
.mud-chip-filled.mud-chip-color-success {
  background: rgba(123, 168, 137, 0.18) !important;
  color: var(--success) !important;
  border: 1px solid rgba(123, 168, 137, 0.40);
}
.mud-chip-filled.mud-chip-color-error {
  background: rgba(197, 117, 101, 0.18) !important;
  color: var(--danger) !important;
  border: 1px solid rgba(197, 117, 101, 0.40);
}
.mud-chip-filled.mud-chip-color-info {
  background: rgba(122, 143, 176, 0.18) !important;
  color: var(--info) !important;
}

/* ── Switch ── */
.mud-switch-track { background: var(--surface-3) !important; }
.mud-switch-base.mud-checked .mud-switch-thumb { color: var(--accent) !important; }
.mud-switch-base.mud-checked + .mud-switch-track { background: var(--accent-3) !important; }

/* ── Tabs ── */
.mud-tabs .mud-tab {
  color: var(--ink-2) !important;
  font-family: var(--arabic) !important;
  font-weight: 600;
  text-transform: none;
}
.mud-tabs .mud-tab.mud-tab-active { color: var(--accent-2) !important; }
.mud-tabs .mud-tab-slider { background: var(--accent) !important; }

/* ── Snackbar ── */
.mud-snackbar {
  background: var(--surface-2) !important;
  color: var(--ink) !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--accent-3) !important;
  font-family: var(--arabic) !important;
}

/* ── Alert ── */
.mud-alert {
  background: var(--surface-2) !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--line-strong);
}

/* ── Progress ── */
.mud-progress-circular-circle { color: var(--accent) !important; }

/* ───────────── Animations ───────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mud-grid-item { animation: fadeInUp 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 50%, var(--surface) 75%);
  background-size: 400px 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--r-md);
}

/* ───────────── Utility ───────────── */
.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.hairline {
  height: 1px;
  background: linear-gradient(90deg, var(--accent-tint-2), var(--line), transparent);
}

/* Page title (h1-h6 inside admin pages) */
.mud-typography-h5,
.mud-typography-h6 {
  font-family: var(--arabic) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
}

/* Drawer toggle button safety */
.mud-drawer-header { color: var(--ink) !important; }