/* ================================================
   RASHFA — Dark Mode Overrides
   Uses [data-theme="dark"] on <html>
   ================================================ */

[data-theme="dark"] {
  --clr-bg: #1A1A1A;
  --clr-bg-card: #252525;
  --clr-bg-alt: #1E1E1E;
  --clr-text: #E8E8E8;
  --clr-text-secondary: #A0A0A0;
  --clr-text-muted: #707070;
  --clr-border: #3A3A3A;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,.3);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.4);

  /* Slightly lighten brand colors for legibility on dark */
  --clr-teal: #35969A;
  --clr-teal-dark: #2A7B7F;
  --clr-teal-light: #4AB8BD;
  --clr-orange: #E8A83A;
  --clr-orange-light: #F0BE5C;
}

/* Navbar keeps brand teal in dark mode, just deepen slightly */
[data-theme="dark"] .navbar {
  background: #1D5F62;
}

/* Hero */
[data-theme="dark"] .hero-wrapper {
  background: linear-gradient(135deg, #143C3E 0%, #1D5F62 60%, #25787C 100%);
}

/* Search */
[data-theme="dark"] #search-input {
  background: var(--clr-bg-card);
  border-color: var(--clr-border);
  color: var(--clr-text);
}

[data-theme="dark"] #search-input::placeholder {
  color: var(--clr-text-muted);
}

/* Category nav */
[data-theme="dark"] .category-nav-wrapper {
  background: var(--clr-bg);
  border-bottom-color: var(--clr-border);
}

/* Cards */
[data-theme="dark"] .menu-item-card {
  background: var(--clr-bg-card);
  border: 1px solid var(--clr-border);
}

/* Badge tweaks */
[data-theme="dark"] .badge-best {
  background: rgba(192,57,43,.2);
}

[data-theme="dark"] .badge-new {
  background: rgba(53,150,154,.2);
}

[data-theme="dark"] .badge-special {
  background: rgba(232,168,58,.2);
}

/* Qty button minus */
[data-theme="dark"] .qty-btn.minus {
  background: #333;
  color: var(--clr-text-secondary);
}

/* Cart panel */
[data-theme="dark"] #cart-panel {
  background: var(--clr-bg-card);
  box-shadow: 0 -4px 20px rgba(0,0,0,.4);
}

[data-theme="dark"] .cart-item {
  border-bottom-color: var(--clr-border);
}

/* Order form */
[data-theme="dark"] .order-field input,
[data-theme="dark"] .order-field textarea {
  background: var(--clr-bg);
  color: var(--clr-text);
  border-color: var(--clr-border);
}

[data-theme="dark"] .order-mode-group label {
  border-color: var(--clr-border);
  color: var(--clr-text-secondary);
}

/* Reservation */
[data-theme="dark"] #reservation-section {
  background: var(--clr-bg-alt);
}

[data-theme="dark"] .reservation-form input {
  background: var(--clr-bg-card);
  color: var(--clr-text);
  border-color: var(--clr-border);
}

/* Contact cards */
[data-theme="dark"] .contact-card {
  background: var(--clr-bg-card);
}

/* Footer */
[data-theme="dark"] footer {
  background: #111;
}

/* Lang selector */
[data-theme="dark"] #lang-selector {
  background: var(--clr-bg-alt);
}

[data-theme="dark"] .lang-btn {
  background: var(--clr-bg-card);
  border-color: var(--clr-border);
  color: var(--clr-text-secondary);
}

/* ─── ADMIN DARK OVERRIDES ─── */

[data-theme="dark"] .login-container {
  background: var(--clr-bg-card);
}

[data-theme="dark"] .admin-header {
  background: #1D5F62;
}

[data-theme="dark"] .admin-nav {
  background: var(--clr-bg-card);
  border-bottom-color: var(--clr-border);
}

[data-theme="dark"] .admin-tab {
  color: var(--clr-text-secondary);
}

[data-theme="dark"] .admin-tab.active {
  color: var(--clr-teal);
  border-bottom-color: var(--clr-teal);
}

[data-theme="dark"] .admin-main {
  background: var(--clr-bg);
}

[data-theme="dark"] .admin-table th {
  background: #1E1E1E;
}

[data-theme="dark"] .admin-table td {
  border-bottom-color: var(--clr-border);
}

[data-theme="dark"] .admin-table tr:hover td {
  background: rgba(53,150,154,.08);
}

[data-theme="dark"] .cat-card {
  background: var(--clr-bg-card);
  border-color: var(--clr-border);
}

[data-theme="dark"] .modal-backdrop {
  background: rgba(0,0,0,.6);
}

[data-theme="dark"] .modal-content {
  background: var(--clr-bg-card);
}

[data-theme="dark"] .modal-content input,
[data-theme="dark"] .modal-content textarea,
[data-theme="dark"] .modal-content select {
  background: var(--clr-bg);
  color: var(--clr-text);
  border-color: var(--clr-border);
}

[data-theme="dark"] .hero-card {
  background: var(--clr-bg-card);
  border-color: var(--clr-border);
}

[data-theme="dark"] .settings-form input,
[data-theme="dark"] .settings-form textarea {
  background: var(--clr-bg);
  color: var(--clr-text);
  border-color: var(--clr-border);
}