/* digi-gastro Global Premium Design System */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* Premium Dark Theme Color Palette */
  --bg-obsidian: #050507;
  --bg-surface: #0b0c10;
  --bg-surface-elevated: #11131a;
  --bg-surface-overlay: #191c25;
  
  --border-subtle: rgba(255, 255, 255, 0.05);
  --border-strong: rgba(255, 255, 255, 0.12);
  --border-focus: rgba(201, 168, 76, 0.5); /* Gold focus */
  
  /* Primary & Accents (Luxurious Gold) */
  --color-primary: #C9A84C; /* Premium Gold */
  --color-primary-hover: #A8872E;
  --color-primary-glow: rgba(201, 168, 76, 0.15);
  
  --color-accent-gold: #f59e0b; /* Golden Glow */
  --color-accent-rose: #f43f5e; /* Rose Red */
  --color-accent-indigo: #6366f1; /* Cool Indigo */
  
  --text-on-surface: #f3f4f6;
  --text-on-surface-variant: #9ca3af;
  
  /* Font Families */
  --font-display: 'Outfit', 'Inter', sans-serif;
  --font-sans: 'Inter', sans-serif;
}

/* Base Body Revamp */
body {
  background-color: var(--bg-obsidian);
  color: #f3f4f6;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Elegant Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-obsidian);
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* Glassmorphism Panel styles */
.glass-panel {
  background: rgba(11, 12, 16, 0.65);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border-strong);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}

.glass-card {
  background: rgba(17, 19, 26, 0.55);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--border-subtle);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.6);
}

/* Accessibility & Contrast for Glassmorphism */
.glass-panel text, .glass-panel p, .glass-panel span,
.glass-card text, .glass-card p, .glass-card span {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

html.dark .glass-panel, html.dark .glass-card {
  color: #ffffff;
}

html.light .glass-panel, html.light .glass-card {
  color: #111827;
}

/* Grid overlay background effect */
.grid-bg {
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Radial Glow Gradient background */
.radial-glow {
  background-image: radial-gradient(circle at 50% 0%, rgba(201, 168, 76, 0.08) 0%, transparent 60%);
}

/* Glow Elements */
.glow-primary {
  box-shadow: 0 0 20px var(--color-primary-glow);
}

.glow-gold {
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.15);
}

.glow-text-primary {
  text-shadow: 0 0 12px rgba(201, 168, 76, 0.4);
}

/* Premium Button Interaction */
.btn-premium {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.btn-premium:active {
  transform: scale(0.97);
}

/* Glassmorphism Buttons for Landing Page */
.landing-page-wrapper {
  color: #ffffff !important;
}
.landing-page-wrapper .text-on-surface-variant,
.landing-page-wrapper .text-gray-200 {
    color: #e5e7eb !important;
}

.glass-btn-primary {
  background: rgba(201, 168, 76, 0.15) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(201, 168, 76, 0.4) !important;
  color: #EFD04D !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important;
}
.glass-btn-primary:hover {
  background: rgba(201, 168, 76, 0.25) !important;
  border-color: rgba(201, 168, 76, 0.6) !important;
  color: #fff !important;
}

.glass-btn-secondary {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #f3f4f6 !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important;
}
.glass-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
}

.btn-premium-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
  color: #030712;
  box-shadow: 0 4px 14px 0 rgba(201, 168, 76, 0.25);
}

.btn-premium-primary:hover {
  box-shadow: 0 6px 20px 0 rgba(201, 168, 76, 0.4);
  filter: brightness(1.05);
}

.btn-premium-secondary {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  color: #f3f4f6;
}

.btn-premium-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-strong);
}

/* Premium Inputs */
.input-premium {
  background: rgba(5, 5, 7, 0.6);
  border: 1px solid var(--border-subtle);
  color: #f3f4f6;
  border-radius: 12px;
  padding: 12px 16px;
  font-family: var(--font-sans);
  transition: all 0.2s ease;
  caret-color: #C9A84C;
}

.input-premium:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
  outline: none;
}

/* Fix browser autofill overriding dark theme (Chrome/Edge/Safari) */
.input-premium:-webkit-autofill,
.input-premium:-webkit-autofill:hover,
.input-premium:-webkit-autofill:focus,
.input-premium:-webkit-autofill:active,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #0b0c10 inset !important;
  box-shadow: 0 0 0 1000px #0b0c10 inset !important;
  -webkit-text-fill-color: #f3f4f6 !important;
  caret-color: #C9A84C !important;
  border-color: var(--border-subtle) !important;
  transition: background-color 600000s 0s, color 600000s 0s;
}

/* All inputs default dark text/background for non-autofill */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select {
  color: #f3f4f6;
  background-color: rgba(5, 5, 7, 0.6);
}

/* Micro animations */
@keyframes pulse-status-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(201, 168, 76, 0); }
}

@keyframes pulse-status-amber {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}

@keyframes pulse-status-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.5); background-color: rgba(244, 63, 94, 0.2); }
  50% { box-shadow: 0 0 0 10px rgba(244, 63, 94, 0); background-color: rgba(244, 63, 94, 0.6); }
}

.pulse-green {
  animation: pulse-status-green 2s infinite;
}

.pulse-amber {
  animation: pulse-status-amber 2s infinite;
}

.pulse-red-card {
  animation: pulse-status-red 1.5s infinite;
  border-width: 1.5px !important;
}

/* Floating Lift effect */
.hover-lift {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  border-color: var(--color-primary);
}

/* Shimmer Loading skeleton */
.shimmer {
  background: linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-surface-elevated) 50%, var(--bg-surface) 75%);
  background-size: 200% 100%;
  animation: shimmer-animation 1.5s infinite;
}

@keyframes shimmer-animation {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Elegant categories scroll indicator */
.scroll-indicator::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(90deg, transparent, var(--bg-obsidian));
  pointer-events: none;
}

/* Light background contrast overrides for standard inputs */
.bg-white input:not(.input-premium), 
.bg-white textarea:not(.input-premium), 
.bg-white select:not(.input-premium),
[class*="bg-zinc-"] input:not(.input-premium),
[class*="bg-gray-"] input:not(.input-premium),
[class*="bg-slate-"] input:not(.input-premium) {
  color: #000000 !important;
  background-color: #ffffff !important;
  border-color: #d1d5db !important;
}

/* Fallback: if body itself is not dark, ensure inputs have dark text */
html:not(.dark) input,
html:not(.dark) textarea,
html:not(.dark) select {
  color: #000000 !important;
}

/* Disable double-tap zoom globally to ensure rapid, responsive clicks on all pages */
*, *::before, *::after {
  touch-action: manipulation;
}

/* Light theme overrides */
html.light, body.light {
  --bg-obsidian: #f9fafb;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #f3f4f6;
  --bg-surface-overlay: #e5e7eb;
  
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.15);
  
  --color-primary: #A8872E; /* Darker gold for readability */
  --color-primary-hover: #866A24;
  --color-primary-glow: rgba(168, 135, 46, 0.15);

  --text-on-surface: #111827;
  --text-on-surface-variant: #4b5563;
}

html.light .grid-bg, body.light .grid-bg {
  background-image: none !important;
}
html.light .radial-glow, body.light .radial-glow {
  background-image: none !important;
}

html.light body, body.light {
  background-color: #ffffff !important;
  color: var(--text-on-surface) !important;
}

html.light .glass-panel, body.light .glass-panel {
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1) !important;
}

html.light .glass-card, body.light .glass-card {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

html.light .glass-card:hover, body.light .glass-card:hover {
  border-color: var(--border-strong) !important;
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.08) !important;
}

html.light .input-premium, body.light .input-premium {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid var(--border-subtle) !important;
  color: #111827 !important;
}

html.light .btn-premium-secondary, body.light .btn-premium-secondary {
  background: rgba(0, 0, 0, 0.03) !important;
  border: 1px solid var(--border-subtle) !important;
  color: #111827 !important;
}
html.light .btn-premium-secondary:hover, body.light .btn-premium-secondary:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  border-color: var(--border-strong) !important;
}

/* Override text-white classes to make them readable on light background */
/* IMPORTANT: All selectors MUST exclude .landing-page-wrapper to keep landing text white */
html.light :not(.landing-page-wrapper) .text-white,
body.light :not(.landing-page-wrapper) .text-white,
html.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color: #ffffff"],
body.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color: #ffffff"],
html.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color:#ffffff"],
body.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color:#ffffff"],
html.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color: #fff"],
body.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color: #fff"],
html.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color:#fff"],
body.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color:#fff"],
html.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color: white"],
body.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color: white"],
html.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color:white"],
body.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color:white"],
html.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color: rgb(255, 255, 255)"],
body.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color: rgb(255, 255, 255)"],
html.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color:rgb(255, 255, 255)"],
body.light :not(.landing-page-wrapper) :not(.landing-page-wrapper) [style*="color:rgb(255, 255, 255)"] {
  color: var(--text-on-surface) !important;
}

/* Ensure specific containers that explicitly have a colored background retain white text */
html.light .bg-rose-500,
html.light .bg-rose-500 *,
html.light .bg-red-500,
html.light .bg-red-500 *,
html.light .bg-green-500,
html.light .bg-green-500 *,
html.light .bg-emerald-500,
html.light .bg-emerald-500 *,
html.light .bg-gastro,
html.light .bg-gastro *,
html.light .bg-amber-600,
html.light .bg-amber-600 *,
html.light .bg-zinc-800,
html.light .bg-zinc-800 *,
html.light .bg-zinc-700,
html.light .bg-zinc-700 *,
html.light .bg-zinc-900,
html.light .bg-zinc-900 *,
html.light .bg-gray-800,
html.light .bg-gray-800 *,
html.light .bg-gray-900,
html.light .bg-gray-900 * {
  color: #ffffff !important;
}

/* Popup headers always have dark gradient backgrounds — keep white text */
html.light .popup-header,
html.light .popup-header *,
html.light .popup-header [style*="color"],
html.light .popup-header [style*="color:"] {
  color: #ffffff !important;
}

/* Table selection tiles always have dark background */
html.light .table-sel-tile,
html.light .table-sel-tile * {
  color: #ffffff !important;
}

/* Colored buttons with inline style color:#fff must keep white text */
html.light [style*="background:#ef4444"],
html.light [style*="background: #ef4444"],
html.light button[style*="background:#ef4444"],
html.light button[style*="background: #ef4444"] {
  color: #ffffff !important;
}

/* Sidebar profile card always has dark gradient background */
html.light .profile-card,
html.light .profile-card * {
  color: #ffffff !important;
}

/* Admin dash-header is always light background, text stays dark — no override needed */

html.light .glass-btn-primary {
  background: rgba(201, 168, 76, 0.15) !important;
  border: 1px solid rgba(201, 168, 76, 0.5) !important;
  color: #866A24 !important;
}
html.light .glass-btn-primary:hover {
  background: rgba(201, 168, 76, 0.25) !important;
  color: #433512 !important;
}

html.light .glass-btn-secondary {
  background: rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  color: #111827 !important;
}
html.light .glass-btn-secondary:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  border-color: rgba(0, 0, 0, 0.35) !important;
}

/* Re-adjust text gray elements to have enough contrast */
html.light :not(.landing-page-wrapper) .text-zinc-300,
html.light :not(.landing-page-wrapper) .text-zinc-400,
html.light :not(.landing-page-wrapper) .text-gray-400,
html.light :not(.landing-page-wrapper) .text-slate-400,
html.light :not(.landing-page-wrapper) .text-on-surface-variant {
  color: var(--text-on-surface-variant) !important;
}

/* Light text colors that are invisible on light backgrounds */
html.light :not(.landing-page-wrapper) .text-amber-200 {
  color: #92400e !important; /* amber-800 for readability */
}
html.light :not(.landing-page-wrapper) .text-amber-400 {
  color: #b45309 !important; /* amber-700 */
}
html.light :not(.landing-page-wrapper) .text-emerald-400 {
  color: #047857 !important; /* emerald-700 */
}

/* ===== LANDING PAGE EXCEPTIONS — MUST be LAST to win specificity battles ===== */
/* Landingpage texts MUST remain white over the background slideshow in light mode */
/* Nuclear approach: force ALL children white, then add back gray exceptions */
/* Using id-level specificity hack (#id) to guarantee landing text always wins */
html.light .landing-page-wrapper,
html.light .landing-page-wrapper#landing-page-wrapper,
html.light .landing-page-wrapper.landing-page-wrapper *,
html.dark .landing-page-wrapper,
html.dark .landing-page-wrapper * {
    color: #ffffff !important;
}

/* Explicitly force all text-white/heading elements white in both modes */
html.light .landing-page-wrapper .text-white,
html.light .landing-page-wrapper h1,
html.light .landing-page-wrapper h2,
html.light .landing-page-wrapper h3,
html.light .landing-page-wrapper h4,
html.light .landing-page-wrapper p,
html.light .landing-page-wrapper span,
html.light .landing-page-wrapper strong,
html.light .landing-page-wrapper a:not(.glass-btn-primary):not(.glass-btn-secondary),
html.light .landing-page-wrapper strong.text-on-surface,
html.dark .landing-page-wrapper h1,
html.dark .landing-page-wrapper h2,
html.dark .landing-page-wrapper h3,
html.dark .landing-page-wrapper h4,
html.dark .landing-page-wrapper p,
html.dark .landing-page-wrapper span,
html.dark .landing-page-wrapper strong,
html.dark .landing-page-wrapper .text-white {
    color: #ffffff !important;
}

/* Gray text exceptions — subtitles, descriptions should stay light gray for readability */
html.light .landing-page-wrapper .text-gray-200,
html.light .landing-page-wrapper p.text-gray-200,
html.light .landing-page-wrapper p.text-sm,
html.dark .landing-page-wrapper .text-gray-200,
html.dark .landing-page-wrapper p.text-gray-200 {
    color: #e5e7eb !important;
}
html.light .landing-page-wrapper .text-zinc-300,
html.dark .landing-page-wrapper .text-zinc-300 {
    color: #d4d4d8 !important;
}
html.light .landing-page-wrapper .text-zinc-400,
html.dark .landing-page-wrapper .text-zinc-400 {
    color: #a1a1aa !important;
}
html.light .landing-page-wrapper .text-on-surface-variant,
html.dark .landing-page-wrapper .text-on-surface-variant {
    color: #d4d4d8 !important;
}
/* Amber text in Happy Hour card must stay amber */
html.light .landing-page-wrapper .text-amber-400,
html.light .landing-page-wrapper .text-amber-300,
html.dark .landing-page-wrapper .text-amber-400,
html.dark .landing-page-wrapper .text-amber-300 {
    color: #fbbf24 !important;
}
/* Button text should keep its own colors */
html.light .landing-page-wrapper .glass-btn-primary,
html.light .landing-page-wrapper .glass-btn-primary span {
    color: #866A24 !important;
}
html.light .landing-page-wrapper .glass-btn-secondary,
html.light .landing-page-wrapper .glass-btn-secondary span {
    color: #ffffff !important;
}
html.dark .landing-page-wrapper .glass-btn-secondary,
html.dark .landing-page-wrapper .glass-btn-secondary span {
    color: #ffffff !important;
}
/* SVG icons inside buttons keep their fill */
html.light .landing-page-wrapper svg path {
    color: inherit !important;
}
/* Google review stars SVG — keep original fill colors */
html.light .landing-page-wrapper svg {
    color: inherit !important;
}

/* ── ADMIN PANEL LIGHT MODE CONTRAST FIXES ── */

/* Admin sidebar profile card always dark bg → keep white text */
html.light .profile-card,
html.light .profile-card * {
    color: #ffffff !important;
}

/* Section card headers must be readable on light backgrounds */
html.light .section-card-header h3,
html.light .section-card-header span {
    color: #111827 !important;
}

/* Event modal panel always needs proper contrast */
html.light #event-modal .form-label {
    color: #374151 !important;
}

/* ── GENERAL CONTRAST SAFETY NET ── */

/* Any text-white on a non-colored background gets corrected in light mode */
html.light :not(.landing-page-wrapper):not(.bg-rose-500):not(.bg-red-500):not(.bg-green-500):not(.bg-emerald-500):not(.bg-gastro):not(.bg-amber-600):not(.bg-zinc-800):not(.bg-zinc-700):not(.bg-zinc-900):not(.bg-gray-800):not(.bg-gray-900):not(.popup-header):not(.profile-card):not(.table-sel-tile) .text-white {
    color: var(--text-on-surface) !important;
}

/* Ensure popup-card children have dark text in light mode */
html.light .popup-card,
html.light .popup-card * {
    color: #111827 !important;
}
/* Popup header always has dark gradient bg → white text stays */
html.light .popup-header,
html.light .popup-header * {
    color: #ffffff !important;
}
/* Buttons inside popup-card with colored bg → keep white text */
html.light .popup-card .bg-gastro,
html.light .popup-card .bg-gastro * {
    color: #ffffff !important;
}

/* ── CHECKBOX IMPROVEMENTS FOR CUSTOMER MENU ── */

/* Make checkboxes in the customer menu (dark theme) more visible */
input[type="checkbox"].custom-checkbox {
    border-width: 2.5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Product badge event labels need proper contrast in light mode */
html.light .bg-\\[\\#7c3aed\\] {
    background-color: #7c3aed !important;
    color: #ffffff !important;
}

/* ── EVENT PRODUCT SELECTOR CHECKBOXES ── */
/* Native checkboxes inside event modal need visibility in both themes */
html.light .ep-toggle,
html.light .event-day-check {
    accent-color: #7c3aed !important;
    width: 16px !important;
    height: 16px !important;
}
html.dark .ep-toggle,
html.dark .event-day-check {
    accent-color: #a78bfa !important;
    width: 16px !important;
    height: 16px !important;
}

/* ── ADMIN EVENT MODAL LIGHT MODE CONTRAST ── */
/* Ensure form labels are readable in light mode event modal */
html.light #event-modal .form-label {
    color: #374151 !important;
}
html.light #event-modal .form-field {
    color: #111827 !important;
    background-color: #f9fafb !important;
    border-color: #d1d5db !important;
}
html.light #event-modal .form-field option {
    color: #111827 !important;
    background-color: #ffffff !important;
}

/* ── SELECT DROPDOWN LIGHT MODE FIX ── */
/* Select options inside popup-card or admin panel need dark text in light mode */
html.light select option,
html.light .popup-card select option {
    color: #111827 !important;
    background-color: #ffffff !important;
}

/* ── TEILRECHNUNG CHECKBOX HIGH-VISIBILITY ── */
/* Kellner partial-payment checkboxes need extra visibility in both themes */
.teilrechnung-box .custom-checkbox,
.control-split-item .custom-checkbox {
    width: 22px !important;
    height: 22px !important;
    border-width: 3px !important;
    border-color: #6b7280 !important;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.12) !important;
}
html.dark .teilrechnung-box .custom-checkbox,
html.dark .control-split-item .custom-checkbox {
    border-color: #9ca3af !important;
    background: #1f2937 !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.06), 0 1px 4px rgba(0,0,0,0.3) !important;
}
.teilrechnung-box .custom-checkbox:checked,
.control-split-item .custom-checkbox:checked {
    background: #009900 !important;
    border-color: #009900 !important;
    box-shadow: 0 0 0 2px rgba(0,153,0,0.2), 0 2px 8px rgba(0,153,0,0.3) !important;
}
.teilrechnung-box .custom-checkbox:checked::after,
.control-split-item .custom-checkbox:checked::after {
    border-width: 0 3px 3px 0 !important;
}

/* ── KELLNER ITEM-CARD CHECKBOX VISIBILITY ── */
/* Item cards in order popup: ensure checkboxes stand out against card background */
.item-card .custom-checkbox {
    width: 22px !important;
    height: 22px !important;
    border-width: 3px !important;
    border-color: #9ca3af !important;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.1) !important;
}
html.dark .item-card .custom-checkbox {
    border-color: #6b7280 !important;
    background: #1f2937 !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.05), 0 1px 4px rgba(0,0,0,0.25) !important;
}
.item-card .custom-checkbox:checked {
    background: #009900 !important;
    border-color: #009900 !important;
    box-shadow: 0 0 0 2px rgba(0,153,0,0.2), 0 2px 8px rgba(0,153,0,0.3) !important;
}

/* ── POPUP-FOOTER LIGHT MODE TEXT FIX ── */
/* Ensure confirmation text in popup footer is readable in light mode */
html.light .popup-footer .text-white,
html.light .popup-footer [style*="color:#fff"],
html.light .popup-footer [style*="color: #fff"],
html.light .popup-footer [style*="color:white"],
html.light .popup-footer [style*="color: white"] {
    color: #111827 !important;
}

/* ── ADMIN SECTION CARD BODY LIGHT MODE ── */
/* Section card bodies need proper text in light mode */
html.light .section-card-body {
    color: #374151 !important;
}
html.light .section-card-body .text-zinc-400,
html.light .section-card-body .text-zinc-500 {
    color: #6b7280 !important;
}

/* ── EVENT MODAL PANEL OVERLAY IN LIGHT MODE ── */
/* The event modal slide-in panel needs proper text contrast */
html.light #event-modal,
html.light #event-modal *:not(.popup-header *):not(.bg-gastro):not(.bg-gastro *):not(button[style*="background:#7c3aed"]):not(button[style*="background:#7c3aed"] *) {
    color: #1f2937 !important;
}
html.light #event-modal .bg-gray-50 {
    background-color: #f3f4f6 !important;
}
html.light #event-modal .text-zinc-400,
html.light #event-modal .text-zinc-500 {
    color: #6b7280 !important;
}
html.light #event-modal .text-zinc-800 {
    color: #1f2937 !important;
}
/* Event modal save button stays purple with white text */
html.light #event-modal button[style*="background:#7c3aed"],
html.light #event-modal button[style*="background:#7c3aed"] * {
    color: #ffffff !important;
}

/* ── SITZPLAN TABLE TILE DARK MODE CONTRAST ── */
/* In dark mode, inline dark colors on table tiles are nearly invisible */
/* Override all inline color styles inside sitzplan-table to inherit from parent */
html.dark .sitzplan-table span[style*="color:"],
html.dark .sitzplan-table a[style*="color:"] {
    color: inherit !important;
}

/* Status-specific bright colors for dark mode tiles */
html.dark .sitzplan-table.status-active {
    color: #34d399 !important;  /* emerald-400 */
}
html.dark .sitzplan-table.status-pending {
    color: #fca5a5 !important;  /* red-300 */
}
html.dark .sitzplan-table.status-calling {
    color: #fcd34d !important;  /* amber-300 */
}
html.dark .sitzplan-table.status-free {
    color: #a1a1aa !important;  /* zinc-400 */
}

/* Dark mode: tile timers and small text need visibility */
html.dark .sitzplan-table .tile-timer {
    color: #fca5a5 !important;
    background: rgba(239, 68, 68, 0.15) !important;
}

/* ── SITZPLAN TABLE TILE LIGHT MODE CONTRAST ── */
/* In light mode, tiles have white background with status tint - keep dark text */
html.light .sitzplan-table.status-active {
    color: #065f46 !important;  /* emerald-800 */
}
html.light .sitzplan-table.status-pending {
    color: #9f1239 !important;  /* rose-800 */
}
html.light .sitzplan-table.status-calling {
    color: #92400e !important;  /* amber-800 */
}
html.light .sitzplan-table.status-free {
    color: #6b7280 !important;  /* gray-500 */
}

/* ── MENU LIGHT MODE: SOLID WHITE BACKGROUND ── */
/* (Solid white background applied via html.light body rule near top of file) */