@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --font-sans: 'Outfit', sans-serif;

  /* HSL Color System - Theme Tokens */
  --bg-main: hsl(222, 47%, 4%);
  --bg-card: hsla(220, 39%, 9%, 0.7);
  --border-color: hsla(217, 30%, 18%, 0.6);
  --border-hover: hsla(217, 30%, 28%, 0.8);
  
  --primary: hsl(262, 83%, 58%);
  --primary-hover: hsl(262, 83%, 68%);
  --primary-glow: hsla(262, 83%, 58%, 0.35);

  --secondary: hsl(190, 90%, 48%);
  --success: hsl(142, 70%, 45%);
  --success-glow: hsla(142, 70%, 45%, 0.2);
  --danger: hsl(346, 80%, 55%);
  --danger-glow: hsla(346, 80%, 55%, 0.2);

  --text-main: hsl(210, 40%, 98%);
  --text-muted: hsl(215, 20%, 65%);
  --text-dark: hsl(215, 25%, 27%);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-main);
  color: var(--text-main);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* Background ambient glows */
body::before, body::after {
  content: '';
  position: absolute;
  width: 50vw;
  height: 50vw;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  filter: blur(120px);
  opacity: 0.15;
}
body::before {
  top: -10vw;
  right: -10vw;
  background-color: var(--primary);
}
body::after {
  bottom: -10vw;
  left: -10vw;
  background-color: var(--secondary);
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--text-dark);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Typography utilities */
h1, h2, h3, h4, h5 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Utilities */
.hidden {
  display: none !important;
}

/* Keyframes animations */
@keyframes slideUp {
  from {
    transform: translateY(16px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.animate-slide-up {
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Generic page panels  */
.dashboard-panel {
  padding: 32px;
}

/* Min height pages */
.min-h-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ─── Light Theme System ────────────────────────────────────────────────── */
.light-theme {
  --bg-main: hsl(210, 20%, 96%);
  --bg-card: hsla(0, 0%, 100%, 0.85);
  --border-color: hsla(215, 20%, 82%, 0.8);
  --border-hover: hsla(215, 20%, 72%, 0.9);
  
  --primary: hsl(262, 83%, 50%);
  --primary-hover: hsl(262, 83%, 40%);
  --primary-glow: hsla(262, 83%, 50%, 0.15);

  --secondary: hsl(190, 90%, 38%);
  --success: hsl(142, 70%, 35%);
  --success-glow: hsla(142, 70%, 35%, 0.1);
  --danger: hsl(346, 80%, 45%);
  --danger-glow: hsla(346, 80%, 45%, 0.1);

  --text-main: hsl(222, 47%, 12%);
  --text-muted: hsl(215, 16%, 40%);
  --text-dark: hsl(215, 16%, 80%);
}

.light-theme input, 
.light-theme select, 
.light-theme textarea {
  background-color: hsl(0, 0%, 100%);
  border-color: hsla(215, 20%, 82%, 0.8);
  color: hsl(222, 47%, 12%);
}

.light-theme header.main-header {
  background: hsla(210, 20%, 96%, 0.85);
}

.light-theme .header-nav .tab-btn:hover {
  color: var(--text-main);
  background: hsla(215, 20%, 82%, 0.4);
}

.light-theme #menu-container header {
  background: hsla(210, 20%, 96%, 0.95) !important;
}

.light-theme .cart-drawer {
  background: hsl(0, 0%, 100%) !important;
}

.light-theme #waiter-tables-container div {
  background: hsl(210, 20%, 90%) !important;
}

.light-theme .modal-backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.light-theme #tables-checkbox-grid {
  background: hsl(210, 20%, 90%) !important;
}
.light-theme #tables-checkbox-grid span {
  color: var(--text-main) !important;
}

.light-theme .table-assign-checkbox + span {
  color: var(--text-main) !important;
}

.light-theme .table-card-body span, 
.light-theme .table-card-body div {
  color: var(--text-main) !important;
}

.light-theme .table-card.free {
  background: hsla(142, 70%, 45%, 0.1) !important;
  border-color: hsla(142, 70%, 45%, 0.3) !important;
}

.light-theme .table-card.occupied {
  background: hsla(346, 80%, 55%, 0.1) !important;
  border-color: hsla(346, 80%, 55%, 0.3) !important;
}

.light-theme .table-card-number {
  color: var(--text-main) !important;
}

.light-theme h1,
.light-theme h2,
.light-theme h3,
.light-theme h4,
.light-theme h5 {
  color: var(--text-main) !important;
}

.light-theme .btn-secondary {
  background: hsla(215, 20%, 82%, 0.5);
  color: var(--text-main);
}
.light-theme .btn-secondary:hover {
  background: hsla(215, 20%, 72%, 0.7);
}

.light-theme .goog-te-gadget-simple {
  background-color: hsl(0, 0%, 100%) !important;
  color: var(--text-main) !important;
}
.light-theme .goog-te-gadget-simple .goog-te-menu-value {
  color: var(--text-main) !important;
}
.light-theme .goog-te-gadget-simple .goog-te-menu-value span {
  color: var(--text-main) !important;
}

.light-theme #lang-selector {
  background: hsl(0, 0%, 100%) !important;
  color: var(--text-main) !important;
}

.light-theme .category-tab {
  background: hsla(215, 20%, 82%, 0.4);
}
.light-theme .category-tab:hover {
  color: var(--text-main);
}
.light-theme .category-tab.active {
  color: #fff !important;
}

.light-theme #google_translate_element {
  color: var(--text-main) !important;
}

/* ─── Comprehensive Light Theme Text Contrast Overrides ─────────────────────
   Forces dark readable text on ALL elements that may carry hardcoded
   color:#fff via inline styles or JS-generated markup. Elements on
   colored backgrounds (buttons, active tabs, step icons) are excluded. */

/* Master sweep: force dark text on every common text element in light mode */
.light-theme h1,
.light-theme h2,
.light-theme h3,
.light-theme h4,
.light-theme h5,
.light-theme h6,
.light-theme p,
.light-theme span,
.light-theme div,
.light-theme td,
.light-theme th,
.light-theme label,
.light-theme strong,
.light-theme li {
  color: var(--text-main) !important;
}

/* Preserve white text on elements with colored/gradient backgrounds */
.light-theme .btn-primary,
.light-theme .btn-primary span,
.light-theme .btn-primary i,
.light-theme .btn-danger:hover,
.light-theme .btn-danger:hover span,
.light-theme .category-tab.active,
.light-theme .step-node-icon.active,
.light-theme .step-node-icon.passed,
.light-theme [style*="background: linear-gradient"] i,
.light-theme [style*="background: linear-gradient"] span {
  color: #fff !important;
}

/* Cart counter badge on colored background stays white */
.light-theme #cart-counter {
  color: #fff !important;
}

/* Spinners inside buttons need white */
.light-theme .btn-primary div[style*="border-top-color"] {
  border-top-color: #fff !important;
}

/* Muted text should stay muted, not forced to main text */
.light-theme .text-muted,
.light-theme [class*="text-muted"],
.light-theme .kpi-title,
.light-theme .kds-ticket-time,
.light-theme .kds-item-qty,
.light-theme .summary-row:not(.total),
.light-theme .table-card-body {
  color: var(--text-muted) !important;
}

/* Badges keep their semantic colors */
.light-theme .badge-success {
  color: var(--success) !important;
}
.light-theme .badge-danger {
  color: var(--danger) !important;
}
.light-theme .badge-warning {
  color: hsl(38, 92%, 50%) !important;
}

/* Danger button (un-hovered) keeps its danger color */
.light-theme .btn-danger {
  color: var(--danger) !important;
}

/* Success / danger colored accents in KPI icons */
.light-theme .kpi-icon-wrapper {
  color: var(--primary-hover) !important;
}

/* Auth / login page sparkles icon on gradient stays white */
.light-theme #login-sparkles-fallback i {
  color: #fff !important;
}

/* Section header icons (lucide) inherit text-main */
.light-theme .section-header h1 i,
.light-theme .section-header h2 i {
  color: var(--text-main) !important;
}

/* Glass-panel overrides — ensure nested content is readable */
.light-theme .glass-panel h1,
.light-theme .glass-panel h2,
.light-theme .glass-panel h3,
.light-theme .glass-panel h4,
.light-theme .glass-panel h5,
.light-theme .glass-panel span:not(.badge):not(.badge-success):not(.badge-danger):not(.badge-warning),
.light-theme .glass-panel div,
.light-theme .glass-panel td,
.light-theme .glass-panel th {
  color: var(--text-main) !important;
}

/* Credential overlay / error screens on login */
.light-theme .credential-overlay h2,
.light-theme .credential-overlay p,
.light-theme .credential-overlay span,
.light-theme .credential-overlay div {
  color: var(--text-main) !important;
}

/* Customer menu specific: restaurant name, drawer, tracker */
.light-theme #gr-restaurant-name,
.light-theme #menu-restaurant-name,
.light-theme #drawer-subtotal,
.light-theme #tracker-status-text,
.light-theme .cart-drawer h3,
.light-theme .cart-drawer h4,
.light-theme .cart-drawer span,
.light-theme .cart-drawer div {
  color: var(--text-main) !important;
}

/* Customer menu: fixed cart bar text */
.light-theme .fixed-cart-bar span,
.light-theme .fixed-cart-bar div {
  color: var(--text-main) !important;
}

/* KDS ticket overrides */
.light-theme .kds-ticket h4,
.light-theme .kds-ticket span,
.light-theme .kds-ticket div {
  color: var(--text-main) !important;
}

/* KDS ticket notes keep their accent color */
.light-theme .kds-ticket-notes {
  color: var(--primary-hover) !important;
}
.light-theme .instruction-note-card {
  color: var(--primary-hover) !important;
}

/* Cart item rows in POS order page */
.light-theme .cart-item-row h5,
.light-theme .cart-item-row span,
.light-theme .cart-item-row div {
  color: var(--text-main) !important;
}

/* Quantity selector buttons keep muted */
.light-theme .cart-item-qty-btn {
  color: var(--text-muted) !important;
}
.light-theme .cart-item-qty-btn:hover {
  color: var(--text-main) !important;
}

/* POS dish card text */
.light-theme .pos-dish-card h4,
.light-theme .pos-dish-card span,
.light-theme .pos-dish-card div {
  color: var(--text-main) !important;
}

/* Menu builder: category table, menu item cards */
.light-theme .menu-item-card h4,
.light-theme .menu-item-card span,
.light-theme .menu-item-card div {
  color: var(--text-main) !important;
}

/* Staff management: staff cards */
.light-theme #staff-grid h4,
.light-theme #staff-grid span,
.light-theme #staff-grid div {
  color: var(--text-main) !important;
}

/* Waiter notification toasts should keep white on colored bg */
.light-theme .waiter-notification {
  color: #fff !important;
}

/* Google translate widget in light mode */
.light-theme .goog-te-gadget-simple {
  background-color: hsl(0, 0%, 100%) !important;
  color: var(--text-main) !important;
}
.light-theme .goog-te-gadget-simple .goog-te-menu-value,
.light-theme .goog-te-gadget-simple .goog-te-menu-value span {
  color: var(--text-main) !important;
}

/* Language selector dropdown */
.light-theme #lang-selector {
  background: hsl(0, 0%, 100%) !important;
  color: var(--text-main) !important;
}

/* Links inside credentials / overlay panels */
.light-theme .credential-overlay a {
  color: var(--primary) !important;
}

/* Settings page: logo preview text */
.light-theme #logo-preview span {
  color: var(--text-main) !important;
}

/* Table grid card overrides */
.light-theme .table-card-number {
  color: var(--text-main) !important;
}
.light-theme .table-card-body span,
.light-theme .table-card-body div {
  color: var(--text-main) !important;
}

/* Modal content text */
.light-theme .modal-content h3,
.light-theme .modal-content h4,
.light-theme .modal-content span,
.light-theme .modal-content div,
.light-theme .modal-content p,
.light-theme .modal-content label {
  color: var(--text-main) !important;
}

/* Error alerts keep red text */
.light-theme [id$="-alert-error"],
.light-theme [id$="-alert-error"] span {
  color: var(--danger) !important;
}

/* Success alerts keep green text */
.light-theme [id$="-alert-success"],
.light-theme [id$="-alert-success"] span {
  color: var(--success) !important;
}

/* Login error box */
.light-theme #login-error,
.light-theme #login-error span {
  color: var(--danger) !important;
}

/* Tracker items list */
.light-theme #tracker-items-list h5,
.light-theme #tracker-items-list span {
  color: var(--text-main) !important;
}

/* Cart items container */
.light-theme #cart-items-container h4,
.light-theme #cart-items-container span,
.light-theme #cart-items-container div {
  color: var(--text-main) !important;
}

/* Scrollbar in light mode */
.light-theme ::-webkit-scrollbar-thumb {
  background: hsla(215, 16%, 60%, 0.5);
}
.light-theme ::-webkit-scrollbar-thumb:hover {
  background: hsla(215, 16%, 50%, 0.7);
}

/* Header background in light mode */
.light-theme header.main-header {
  background: hsla(210, 20%, 96%, 0.9) !important;
  backdrop-filter: blur(12px);
}

/* Tab buttons in light mode */
.light-theme .header-nav .tab-btn {
  color: var(--text-muted) !important;
}
.light-theme .header-nav .tab-btn:hover {
  color: var(--text-main) !important;
}
.light-theme .header-nav .tab-btn.active {
  color: var(--text-main) !important;
}

/* Reduce ambient glow intensity in light mode */
.light-theme::before,
.light-theme::after {
  opacity: 0.06 !important;
}

/* Glass panel subtle shadow adjustment for light mode */
.light-theme .glass-panel {
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08) !important;
}

/* Input/select backgrounds in light mode (already covered but reinforcing) */
.light-theme input,
.light-theme select,
.light-theme textarea {
  background-color: hsl(0, 0%, 100%) !important;
  border-color: hsla(215, 20%, 82%, 0.8) !important;
  color: hsl(222, 47%, 12%) !important;
}

/* Placeholder text for inputs */
.light-theme input::placeholder,
.light-theme textarea::placeholder {
  color: hsla(215, 16%, 40%, 0.6) !important;
}

/* Remove item image button stays white on dark bg */
.light-theme #remove-item-image-btn {
  color: #fff !important;
}

/* Touch Target Size & Active Visual Feedback */
button, 
.touch-target, 
.menu-item-card, 
.table-card, 
.order-card, 
.status-btn, 
.nav-item {
  min-width: 48px;
  min-height: 48px;
  padding: 12px 16px;
  transition: transform 0.1s ease, background-color 0.2s ease, border-color 0.2s ease;
  box-sizing: border-box;
}

button:active, 
.touch-target:active, 
.menu-item-card:active, 
.table-card:active, 
.order-card:active, 
.status-btn:active, 
.nav-item:active {
  transform: scale(0.97) !important;
}

/* Remove hover animations that don't scale well to touch devices */
@media (hover: none) {
  button:hover,
  .touch-target:hover,
  .menu-item-card:hover,
  .table-card:hover,
  .order-card:hover,
  .status-btn:hover,
  .nav-item:hover {
    transform: none !important;
  }
}

/* KDS Swipe Gestures indicators styling */
.kds-ticket {
  user-select: none;
  touch-action: pan-y;
  position: relative;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

/* Media queries for Waiter mobile navbar scaling and monitor grids */
@media (max-width: 768px) {
  .main-header {
    padding: 12px 16px;
    gap: 8px;
  }
  .header-nav {
    gap: 4px;
  }
  .header-nav .tab-btn {
    padding: 8px 12px;
    font-size: 11px;
    min-height: 40px;
    min-width: auto;
  }
  .kds-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .kds-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}