/* ═══════════════════════════════════════════════════════════════
   Midnight Espresso Design Tokens
   ═══════════════════════════════════════════════════════════════ */
:root {
  --menu-bg:       #1a1410;
  --menu-surface:  #241c16;
  --menu-surface2: #2e2419;
  --menu-ink:      #f3ead8;
  --menu-ink2:     rgba(243,234,216,0.65);
  --menu-ink3:     rgba(243,234,216,0.35);
  --menu-accent:   #c89a4c;
  --menu-accent2:  #e8c682;
  --menu-line:     rgba(243,234,216,0.10);
  --menu-serif:    'Cinzel', serif;
  --menu-sans:     'Amiri', serif;
  --menu-body:     'Cairo', sans-serif;
  --menu-mono:     'Courier New', monospace;
  --menu-r-sm:     4px;
  --menu-r-md:     10px;
  --menu-r-lg:     16px;
  --menu-r-xl:     24px;
  --menu-r-pill:   999px;
}

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

body {
  font-family: 'Cairo', 'Roboto', sans-serif;
  background: #F8F9FA;
  direction: rtl;
}

/* ───────────── Scrollbar ───────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--menu-surface); }
::-webkit-scrollbar-thumb { background: var(--menu-accent); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--menu-accent2); }

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

/* ───────────── Dashboard Nav ───────────── */
.mud-nav-link { transition: background 0.2s ease, padding-right 0.2s ease !important; }
.mud-nav-link.active {
  padding-right: 20px !important;
  border-right: 3px solid var(--menu-accent) !important;
  background: rgba(200,154,76,0.10) !important;
  color: var(--menu-accent2) !important;
}
.mud-nav-link:hover {
  background: rgba(200,154,76,0.07) !important;
}
.mud-nav-item .mud-nav-link-icon { color: var(--menu-accent) !important; }

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

/* ───────────── Table ───────────── */
.mud-table-row:hover { background: rgba(200,154,76,0.05) !important; }
.mud-table-head .mud-table-cell {
  font-family: var(--menu-mono) !important;
  letter-spacing: 0.04em;
  font-size: 11px !important;
  text-transform: uppercase;
  color: var(--menu-accent) !important;
}

/* ───────────── Dialog ───────────── */
.mud-dialog { border-radius: 20px !important; }

/* ───────────── Chip & Paper ───────────── */
.mud-chip { font-family: Cairo, sans-serif !important; }
.mud-card { border-radius: 16px !important; }
.mud-paper { font-family: Cairo, sans-serif !important; }

/* ───────────── Stat Cards ───────────── */
.stat-card-number {
  font-family: var(--menu-serif) !important;
  color: var(--menu-accent) !important;
  font-size: 2.4rem !important;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.stat-card-title {
  font-family: var(--menu-mono) !important;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--menu-ink2);
}

/* ───────────── Image Thumbnail hover ───────────── */
.menu-thumb {
  border-radius: 8px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.menu-thumb:hover {
  box-shadow: 0 0 0 2px var(--menu-accent);
  transform: scale(1.03);
}

/* ───────────── Animations ───────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mud-grid-item { animation: fadeInUp 0.35s ease forwards; }

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