/* ========================================
   COMPLETE DEMO STYLES
   ======================================== */

/* CSS Variables */
:root {
    --primary: #6366F1;
    --primary-dark: #4F46E5;
    --accent: #818CF8;
    --success: #10B981;
    --danger: #EF4444;
    --warning: #F59E0B;
    --info: #3B82F6;
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

       --white: #FFFFFF;
    --dark: #111827;
    --medium: #6B7280;
    --light: #F3F4F6;
    --border: #E5E7EB;
    --shadow: 0 2px 8px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.15);
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --transition: all 0.3s ease;
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    line-height: 1.6;
    color: var(--gray-900);
    background: var(--gray-50);

    /* GEEN ZIJWAARTS SCHUIVEN. Eén element dat een paar pixels te breed is maakt de HELE pagina
       schuifbaar, en op een telefoon voelt dat als een kapotte site. Deze stylesheet wordt door
       elk tenantscherm geladen, dus dit dekt ze allemaal in één keer.
       `clip` en niet `hidden`: hidden maakt van body een scroll-container, waardoor
       `position: sticky` erbinnen niet meer plakt. */
    overflow-x: clip;
}

/* Een afbeelding zonder breedtebeperking is de meest voorkomende oorzaak van die paar pixels. */
img {
    max-width: 100%;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Header */
/* STREEP IN DE MERKKLEUR ONDER DE BALK, GEEN SCHADUW.
   Hier stond `box-shadow: 0 2px 4px rgba(0,0,0,0.1)`: een grijze vervaging die op elke tenant
   hetzelfde is en niets zegt. Een lijn in de eigen kleur scheidt net zo goed en draagt wel het merk.

   Het verloop loopt van de eerste naar de TWEEDE merkkleur. Koos de tenant geen tweede kleur, dan
   bestaat `--brand-line-2` niet (zie setBrandLine2 in config.js) en vallen beide uiteinden op
   `--primary` — dan is de lijn effen in de hoofdkleur, precies zoals bedoeld.

   Een pseudo-element en geen border-image: dat laatste werkt wel, maar zet border-radius uit en is
   lastiger te overschrijven. `.header` is `position: sticky` en dus een positioned element, dus een
   absoluut geplaatst kind hangt aan de balk zelf. */
.header {
    background: white;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg,
                var(--primary, #6366F1) 0%,
                var(--brand-line-2, var(--primary, #6366F1)) 100%);
    pointer-events: none;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-logo img {
    height: 40px;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 15px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
}

/* Buttons */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-primary {
    background: var(--primary);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-dark);
}

.btn-secondary {
    background: var(--gray-200);
    color: var(--gray-700);
}

.btn-secondary:hover {
    background: var(--gray-300);
}

.btn-success {
    background: var(--success);
    color: white;
}

.btn-danger {
    background: var(--danger);
    color: white;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 13px;
}

.btn-lg {
    padding: 14px 28px;
    font-size: 16px;
}

.btn-block {
    width: 100%;
    display: block;
}

/* Filter Buttons */
.filter-btn {
    padding: 10px 20px;
    border: 2px solid var(--gray-300);
    background: white;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.filter-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.filter-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Menu Grid — mobile-first 2-column compact (Issue 3) */
#menuGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 16px 0;
}
@media (min-width: 640px)  { #menuGrid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1024px) { #menuGrid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

/* Menu Card — compact, full-bleed image + one unified info row (Threely-style) */
.menu-card {
    background: white;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: transform 0.25s, box-shadow 0.25s;
    display: flex;
    flex-direction: column;
}
.menu-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.14);
}

/* Full-bleed media, 4:3, edge-to-edge */
.menu-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #F3F4F6;
}
.menu-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.menu-card-img-fallback {
    background: linear-gradient(135deg, var(--primary, #6366F1) 0%, var(--accent, #818CF8) 100%);
    display: flex; align-items: center; justify-content: center;
}
.menu-card-media .stock-badge {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px;
}

/* ================================
   SKELETON — HET MENU TIJDENS HET LADEN
   ================================
   Het menu wordt pas getekend NADAT `await apiRequest('/menu')` terug is. Op een koude start van de
   API (Render zet een slapende instantie pas op verzoek aan) duurt dat tientallen seconden, en tot
   dan stond `#menuGrid` volledig leeg: geen kaarten, geen melding, niets dat zegt dat er iets
   gebeurt. Deze kaarten worden meteen getekend, vóór het verzoek, en verdwijnen zodra de echte
   items binnen zijn.

   `prefers-reduced-motion` zet de puls uit — een eindeloos pulserend raster is precies het soort
   beweging waar die instelling voor bedoeld is. */
.menu-card-skeleton {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sk-media {
    width: 100%;
    aspect-ratio: 4 / 3;   /* exact dezelfde verhouding als .menu-card-media, dus geen sprong */
    background: #E9EBEF;
}

.sk-body { padding: 12px 14px 16px; }

.sk-line {
    height: 12px;
    border-radius: 6px;
    background: #E9EBEF;
    margin-bottom: 8px;
}
.sk-line.title { width: 65%; height: 15px; }
.sk-line.desc  { width: 92%; }
.sk-line.price { width: 34%; margin-bottom: 0; margin-top: 14px; }

.menu-card-skeleton .sk-media,
.menu-card-skeleton .sk-line {
    animation: sk-puls 1.4s ease-in-out infinite;
}

@keyframes sk-puls {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
    .menu-card-skeleton .sk-media,
    .menu-card-skeleton .sk-line { animation: none; }
}

/* Regel onder het raster die pas verschijnt als het lang duurt. Zie showMenuSkeleton() in menu.js:
   die zet hem na een paar seconden zichtbaar, zodat een normale laadtijd hem nooit toont. */
.menu-loading-hint {
    grid-column: 1 / -1;
    text-align: center;
    color: #6B7280;
    font-size: 14px;
    padding: 4px 0 0;
}

/* Floating info button over the image's top-right corner (neutral, legible over any image) */
.menu-info-btn {
    position: absolute; top: 8px; right: 8px;
    width: 30px; height: 30px; border-radius: 50%; padding: 0;
    background: rgba(0,0,0,0.45); color: #fff; border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 2;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    transition: background 0.2s;
}
.menu-info-btn:hover { background: rgba(0,0,0,0.65); }
.menu-info-btn svg { width: 16px; height: 16px; }

/* Info row: text stack (left) + full-height add button (right) — reads as one row */
/* Card body — full-width title + description, then a bottom row (price left, cart right) (FIX F) */
.menu-card-body {
    display: flex; flex-direction: column; flex: 1;
    padding: 10px 12px 12px;
}
.menu-card-name {
    font-size: 15px; font-weight: 700; line-height: 1.2;
    color: var(--gray-900); margin: 0 0 4px;
}
.menu-card-desc {
    font-size: 12px; color: var(--gray-600); line-height: 1.35; margin: 0 0 10px;
}
.menu-card-bottom {
    margin-top: auto;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
/* Price — its own hierarchy level, a clear step below the name */
.menu-card-price-section .price,
.menu-card-price-section .employee-price {
    font-size: 14px; font-weight: 700; color: var(--primary, #6366F1);
}
.menu-card-price-section .original-price {
    font-size: 12px; color: var(--gray-500); text-decoration: line-through; margin-left: 4px;
}
.menu-card-price-section .discount-badge {
    display: inline-block; font-size: 10px; margin-top: 2px; color: #065F46;
}

/* Add-to-cart — bare cart icon (no background shape) sitting on the white card (FIX I / J / K / L).
   Filled with var(--primary-dark) to match the "Inloggen" login button's DARKEST gradient stop
   (.nav-login-btn = primary→primary-dark). NOTE: this is intentionally NOT var(--primary) — the
   price text and the pre-Fix-J icon use var(--primary) (tenant primaryColor), whereas --primary-dark
   is a genuinely different variable (tenant secondaryColor). So the card icon deliberately differs
   in colour from the price beside it; that is by design, not an inconsistency bug. The floating cart
   button keeps its own gradient circle + white icon; this is card-icons only. */
.menu-add-btn {
    flex: 0 0 auto; align-self: center;
    width: 40px; height: 40px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: none; background: none; cursor: pointer;
    transition: opacity 0.2s, transform 0.08s;
}
.menu-add-btn:hover { opacity: 0.75; }
.menu-add-btn:active { transform: scale(0.9); }
.menu-add-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.menu-add-btn svg { width: 24px; height: 24px; fill: var(--primary-dark, #4F46E5); }

/* G1: compact inventory grid — 4 cols desktop, 2 tablet, 1 mobile.
   Stond op 3; met 4 passen er meer voorraadkaarten in beeld zonder te scrollen, en de kaart
   is smal genoeg omdat er alleen een naam, een categorie en een aantal in staan. */
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 16px 0;
}
@media (max-width: 768px) {
    .inventory-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .inventory-grid { grid-template-columns: 1fr; }
}

/* G2: full-size image lightbox (inventory thumbnails). */
.image-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.8);
}
.lightbox-content {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 90vh;
}
.lightbox-content img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 8px;
    display: block;
}
#lightboxClose {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: white;
    border: none;
    font-size: 16px;
    cursor: pointer;
    z-index: 2;
}

/* F1: unavailable menu items are greyed (not hidden) with a "Niet beschikbaar" banner. */
.menu-item-unavailable {
    opacity: 0.55;
}
.menu-item-unavailable .add-to-cart-btn {
    pointer-events: none;
    opacity: 0.4;
    cursor: not-allowed;
}
.unavailable-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    color: white;
    text-align: center;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 500;
    z-index: 3;
}

/* Category dropdown (FIX B) — custom, accessible; replaces the wrapping pill row.
   Matches the pill look: rounded, tenant-coloured selected state. */
.cat-dropdown { position: relative; display: inline-block; min-width: 220px; max-width: 320px; }
/* In een instellingenrij staat de lijst naast een omschrijving en hoeft hij niet zo breed. */
.cat-dropdown.setting-dropdown { min-width: 170px; max-width: 200px; }
/* Klein, voor naast een label in een regel — de btw-keuze bij een menu-item. */
.cat-dropdown.mini-dropdown { min-width: 88px; max-width: 110px; }
.cat-dropdown.mini-dropdown .cat-dropdown-trigger { padding: 5px 10px; font-size: 0.85rem; }
/* Vult zijn kolom — de keuzelijsten in een formulierraster. */
.cat-dropdown.breed-dropdown { display: block; min-width: 0; max-width: none; }
.cat-dropdown-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; padding: 10px 16px;
    border: 2px solid var(--gray-300, #D1D5DB); border-radius: 10px;
    background: white; color: #1F2937; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s;
}
.cat-dropdown-trigger:hover { border-color: var(--primary, #6366F1); }
.cat-dropdown-trigger[aria-expanded="true"] {
    border-color: var(--primary, #6366F1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.cat-caret { width: 18px; height: 18px; color: #6B7280; flex-shrink: 0; transition: transform 0.2s; }
.cat-dropdown-trigger[aria-expanded="true"] .cat-caret { transform: rotate(180deg); }

.cat-dropdown-menu {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
    margin: 0; padding: 6px; list-style: none;
    background: white; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    max-height: 320px; overflow-y: auto;
    display: none;
}
.cat-dropdown-menu.open { display: block; }
.cat-option {
    padding: 10px 14px; border-radius: 8px; font-size: 14px; font-weight: 600;
    color: #374151; cursor: pointer; outline: none;
}
.cat-option:hover, .cat-option:focus { background: #F3F4F6; }
.cat-option[aria-selected="true"] {
    background: linear-gradient(135deg, var(--primary, #6366F1) 0%, var(--accent, #818CF8) 100%);
    color: white;
}
.cat-option[aria-selected="true"]:hover, .cat-option[aria-selected="true"]:focus { filter: brightness(0.97); }

/* Badges */
.badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-vegetarian {
    background: #DCFCE7;
    color: #166534;
}

.badge-vegan {
    background: #FEF3C7;
    color: #92400E;
}

.badge-gluten-free {
    background: #DBEAFE;
    color: #1E40AF;
}

.badge-sandwich, .badge-drink, .badge-soup, .badge-salad, .badge-snack, .badge-dessert {
    background: var(--gray-200);
    color: var(--gray-700);
}

/* Order status badges (Mijn Bestellingen + order cards).
   Semantic status colors — intentionally NOT tenant-branded: a status reads amber/blue/green/
   gray/red regardless of brand color. Matches the kitchen display's scheme. Base .badge above
   supplies padding / radius / uppercase. */
.badge-pending,
.badge-pending_payment,
.badge-payment-initiated,
.badge-paid,
.badge-confirmed {
    background: #FEF3C7;   /* amber — new / awaiting */
    color: #92400E;
}

.badge-preparing {
    background: #DBEAFE;   /* blue — in progress */
    color: #1E40AF;
}

.badge-ready {
    background: #D1FAE5;   /* green — ready for pickup */
    color: #065F46;
}

.badge-completed,
.badge-collected {
    background: var(--gray-200);   /* gray — done */
    color: var(--gray-700);
}

.badge-cancelled {
    background: #FEE2E2;   /* red — cancelled */
    color: #991B1B;
}

/* Tabs — full-width white bar (like .header); the inner wrapper centers the tabs to 1200px so
   they align with the logo (.header-content) and content (.container), which use the same cap. */
/* DE MERKSTREEP HOORT ONDER HET HELE NAVIGATIEBLOK.
   Op de klantpagina's IS .header de hele navigatie, dus daar zit de streep goed. Op het
   keukenscherm staat er een tweede balk onder met de tabbladen (.tabs-nav), en dan viel de streep
   ERTUSSEN — tussen het logo met de uitlogknop en de eigenlijke navigatie-elementen.

   `~` en niet `+`: tussen </header> en .tabs-nav staan het mobiele uitklappaneel en zijn
   achtergrond, dus de tabbladen zijn geen DIRECT volgende broer.
   `:has(~ .tabs-nav)` zet hem daar uit en verplaatst hem naar de onderkant van de tabbladen. Valt
   `:has()` weg op een oude browser, dan staat de streep gewoon weer op de oude plek: lelijker,
   niet stuk.

   .header houdt in dat geval wel zijn schaduw. Hij is `position: sticky` en de tabbladen zijn dat
   niet, dus zodra je scrolt blijft de balk alleen achter — zonder schaduw zou hij dan zonder enige
   afscheiding boven de inhoud zweven. */
.header:has(~ .tabs-nav)::after {
    display: none;
}

.header:has(~ .tabs-nav) {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.tabs-nav {
    background: white;
    position: relative;
}

.tabs-nav::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg,
                var(--primary, #6366F1) 0%,
                var(--brand-line-2, var(--primary, #6366F1)) 100%);
    pointer-events: none;
}

/* De tabbladen dragen SVG-lijniconen in plaats van emoji. `currentColor` betekent dat ze meekleuren
   met de tab: grijs als hij niet actief is, merkkleur als hij dat wel is. Dat kon met een emoji
   niet — die houdt altijd zijn eigen kleuren.

   OOK .mobile-nav-item: buildDrawerItems() in kitchen.js kopieert de innerHTML van elke tab naar
   een knop in het uitklappaneel, maar die knop heeft een ANDERE klasse. Zonder deze tweede
   selector kreeg de gekopieerde SVG geen enkele regel — geen breedte, geen hoogte, geen
   fill:none. Een inline SVG zonder afmetingen valt terug op 300x150px en vult zwart, dus het
   paneel stond vol zwarte blokken. */
.nav-tab .tab-icon,
.mobile-nav-item .tab-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* TABBLADEN GECENTREERD, binnen exact dezelfde band als de kop erboven.
   Gemeten op 1400px: de inhoudsband loopt van 120 (linkerrand van het logo) tot 1280 (rechterrand
   van de uitlogknop). Dit blok heeft dezelfde max-width en padding, dus zijn contentbox is ook
   120-1280 — centreren valt daarmee precies tussen die twee randen. Ze stonden links uitgelijnd met
   313px lucht rechts.

   `safe center` en niet alleen `center`: dit blok is `overflow-x: auto` voor smalle schermen, en
   bij gewone centrering wordt overlopende inhoud aan de LINKERkant afgeknipt en is die niet meer
   te bereiken door te scrollen. `safe` valt in dat geval terug op links uitlijnen. De gewone
   `center` staat ervoor als terugval voor browsers die `safe` niet kennen; die krijgen het oude
   probleem alleen in de band 768-907px, waar de tabbladen breder zijn dan het scherm. */
.tabs-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 5px;
    overflow-x: auto;
    justify-content: center;
    justify-content: safe center;
}

.nav-tab {
    padding: 15px 20px;
    text-decoration: none;
    color: var(--gray-600);
    font-weight: 600;
    border-bottom: 3px solid transparent;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.nav-tab:hover {
    color: var(--primary);
}

.nav-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.tab-badge {
    background: var(--danger);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
}

.tab-section {
    display: none;
}

.tab-section.active {
    display: block;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.stat-card h3 {
    font-size: 14px;
    color: var(--gray-600);
    margin-bottom: 8px;
    font-weight: 600;
}

.stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--primary);
}

/* Kitchen Columns */
.kitchen-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.order-column {
    background: var(--gray-100);
    border-radius: 12px;
    padding: 15px;
    min-height: 400px;
}

/* De kolomkoppen dragen dezelfde drie iconen die de KLANT op zijn bevestigingspagina ziet:
   een inbak voor binnengekomen, een draaiende pijl voor lopend, een tas voor klaar. Personeel en
   klant kijken zo naar hetzelfde symbool voor dezelfde toestand. */
.column-header {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: 9px;
}

.column-header .col-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.order-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Order Card */
.order-card {
    background: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    /* Tenant primary, not var(--info) — that is a fixed generic blue (#3B82F6) that ignored the
       tenant's branding entirely, so every tenant's orders looked the same shade of blue. */
    border-left: 4px solid var(--primary);
}

/* Status colours. .order-ready and .order-completed were already being EMITTED by orders.js
   (createOrderCard) but had no rules anywhere, so a ready or collected order was
   indistinguishable from a pending one — same border, no signal. These stay semantic (green =
   ready, grey = done) rather than brand-coloured: a status must read the same on every tenant. */
.order-card.order-ready {
    border-left-color: var(--success);
}

.order-card.order-completed {
    border-left-color: var(--gray-400);
}

.order-card.order-urgent {
    border-left-color: var(--danger);
    background: #FEF2F2;
}

.order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.order-card-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-900);
}

.order-time {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-600);
}

.order-time.time-urgent {
    color: var(--danger);
}

.order-card-customer {
    font-size: 14px;
    color: var(--gray-700);
    margin-bottom: 12px;
}

.order-card-items {
    margin-bottom: 12px;
}

.order-item {
    display: flex;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--gray-200);
}

.order-item:last-child {
    border-bottom: none;
}

.item-qty {
    font-weight: 700;
    color: var(--primary);
    min-width: 30px;
}

.item-name {
    flex: 1;
    font-size: 14px;
}

.item-custom {
    font-size: 12px;
    color: var(--gray-500);
    font-style: italic;
}

.order-notes {
    background: var(--gray-100);
    padding: 8px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--gray-700);
    margin-bottom: 12px;
}

.order-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

.order-total {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-900);
}

/* Admin Menu Grid Container - block layout */
/* De klasse .synero-select stond hier: `appearance: none` plus een eigen pijltje op een
   <select>. Weg op 2026-09-08, want er is geen <select> meer in de tenantschermen — de
   keuzelijsten zijn .cat-dropdown geworden (zie dropdown.js). Dat lost ook op wat
   appearance:none NIET kon: de OPEN lijst van een select tekent het besturingssysteem.
   superadmin.html heeft nog wel <select>-elementen, maar die dragen hun eigen
   .filter-select en .form-input en hebben deze klasse nooit gebruikt. */

/* De werkbalk van Menu Beheer: keuzelijst + knop op een regel.
   min-width:0 op de keuzelijst is wat hem laat krimpen — zonder dat houdt een <select> zijn eigen
   minimumbreedte aan en wordt de knop naar buiten geduwd, dezelfde val als bij het couponveld op
   het afrekenscherm. Nagerekend op 320px: 320 - 24 containerpadding - 10 tussenruimte - 118 knop
   = 168px voor de lijst, ruim voor "Alle categorieën (24)". */
.menu-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 24px;
}

.menu-toolbar select {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 12px;
    font-size: 0.95rem;
}

.menu-toolbar .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .menu-toolbar .btn { padding: 10px 14px; font-size: 0.9rem; }
    .menu-toolbar select { font-size: 0.9rem; padding: 10px; }
}

.admin-menu-grid {
    display: block !important;
}

/* Grid for menu item cards only */
.admin-menu-items-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 20px !important;
}

.admin-menu-card {
    background: white;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.admin-card-image {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 12px;
}

.admin-card-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 10px;
}

.menu-item-price {
    font-size: 14px;
    color: var(--gray-600);
    font-weight: 600;
}

.availability-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

/* Charts */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

.chart-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.chart-card h3 {
    margin-bottom: 15px;
    color: var(--gray-900);
}

/* Quick Select */
.quick-select-panel {
    background: white;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.quick-select-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 15px;
}

.quick-btn {
    padding: 10px 20px;
    border: 2px solid var(--gray-300);
    background: white;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
}

.quick-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.quick-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Table */
.table-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow-x: auto;
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
}

.stats-table th,
.stats-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
}

.stats-table th {
    background: var(--gray-50);
    font-weight: 600;
    color: var(--gray-700);
}

.stats-table .positive {
    color: var(--success);
}

.stats-table .negative {
    color: var(--danger);
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary, #667eea) 0%, var(--accent, #818CF8) 100%);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: white;
    border-radius: 12px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-close {
    font-size: 28px;
    cursor: pointer;
    color: var(--gray-500);
}

.modal-body {
    padding: 20px;
}

/* Bread Options */
.bread-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.bread-option {
    border: 2px solid var(--gray-300);
    border-radius: 10px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

.bread-option:hover {
    border-color: var(--primary);
}

.bread-option.selected {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

.bread-image-container {
    position: relative;
    margin-bottom: 10px;
}

.bread-image {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
}

.bread-label {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}

.bread-description {
    font-size: 13px;
    color: var(--gray-600);
}

/* Pickup Grid */
.pickup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.pickup-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.pickup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.pickup-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
}

.pickup-time {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-700);
}

.pickup-customer {
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--gray-700);
}

.pickup-items {
    margin-bottom: 15px;
    padding: 10px;
    background: var(--gray-50);
    border-radius: 8px;
}

.pickup-items div {
    padding: 4px 0;
    font-size: 14px;
}

/* Auth (Login) */
.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* NO background - inherit from body.auth-page */
}

.auth-card {
    background: white;
    border-radius: 20px;
    padding: 40px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.auth-logo {
    height: 60px;
    display: block;
    margin: 0 auto 20px;
}

.auth-card h1 {
    text-align: center;
    margin-bottom: 10px;
}

.auth-subtitle {
    text-align: center;
    color: var(--gray-600);
    margin-bottom: 30px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--gray-700);
}

.form-group input {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--gray-300);
    border-radius: 8px;
    font-size: 14px;
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary);
}

.auth-tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.auth-tabs a {
    text-decoration: none;
    color: var(--gray-600);
    font-weight: 600;
}

.auth-tabs a.active {
    color: var(--primary);
}

/* Responsive */
@media (max-width: 768px) {
    .kitchen-columns {
        grid-template-columns: 1fr;
    }
    
    .charts-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .bread-options {
        grid-template-columns: 1fr;
    }
}
/* ================================
   NAVIGATION LINKS
   ================================ */

.nav-link {
    padding: 8px 16px;
    text-decoration: none;
    color: var(--gray-700);
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 6px;

    /* TWEEDE HELFT VAN DE WRAP-FIX HIERONDER (zie het blok in de 768px-media-query).
       Daar is `flex-wrap: nowrap` gezet zodat de nav-LINKS niet op een tweede rij belanden. Dat
       loste de halve zaak op: op /menu staat `activeLinks: ['orders']`, en het label
       "📋 Mijn Bestellingen" past op een telefoon niet op één regel, dus brak de TEKST BINNEN de
       link. De link werd 50px hoog in plaats van 31px en de balk zag er alsnog gebroken uit.
       Gemeten op de demo: twee regels op 360, 375 en 390px, één regel vanaf 414px. Het was dus
       geen probleem van één toestel maar van elke telefoon smaller dan ~414px. */
    white-space: nowrap;
}

.nav-link:hover {
    background: var(--gray-100);
    color: var(--primary);
}

/* ================================
   CART FLOATING BUTTON - FIXED
   ================================ */

.cart-float-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--primary, #6366F1) 0%, var(--accent, #818CF8) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
    cursor: pointer;
    transition: all 0.3s;
    z-index: 1000;
    border: none;
    text-decoration: none;
}

.cart-float-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.6);
}

.cart-float-btn.pulse {
    animation: cart-pulse 0.3s ease;
}

@keyframes cart-pulse {
    0%, 100% { 
        transform: scale(1); 
    }
    50% { 
        transform: scale(1.15); 
    }
}

.cart-float-btn svg {
    width: 28px;
    height: 28px;
    fill: var(--brand-icon-color, #fff);   /* contrast-safe on light tenant palettes (FIX E) */
}

.cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #EF4444;
    color: white;
    border-radius: 50%;
    min-width: 26px;
    height: 26px;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    padding: 0 6px;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.cart-badge[data-count]:not([data-count="0"]) {
    display: flex; /* Show when count > 0 */
}

/* ================================
   RESPONSIVE NAVIGATION
   ================================ */

@media (max-width: 768px) {
    /* nowrap, NOT wrap. Wrapping is what made the header look broken on cart, usersettings and
       orders: one link too many (or one long label like "📋 Mijn Bestellingen") pushed the nav
       onto a SECOND ROW, doubling the header height and misaligning the logo. Three pages had
       each pasted their own nowrap override; fixing it here fixes every page at once, including
       any page added later.
       NB: a base `.header-nav { flex-wrap: nowrap }` would NOT work — this media query would
       simply override it. The wrap has to be killed at its source. */
    .header-nav {
        flex-wrap: nowrap;
        gap: 8px;
    }

    .nav-link {
        font-size: 12px;
        padding: 6px 12px;
    }
    
    .user-info span {
        display: none;
    }
    
    .cart-float-btn {
        width: 56px;
        height: 56px;
        bottom: 20px;
        right: 20px;
    }
    
    .cart-float-btn svg {
        width: 24px;
        height: 24px;
    }
}


/* HELE SMALLE TELEFOONS (320px).
   `white-space: nowrap` op .nav-link haalt de tekst op één regel, maar daarmee wordt de balk ook
   zo breed als zijn langste label. Op /instellingen staan twee links naast het logo en de
   gebruiker, en dan stak .header-nav op 320px 7px buiten beeld (rechterrand 327 bij een viewport
   van 320). `overflow-x: clip` op de body verbergt dat, maar wegknippen is geen oplossing — het
   gebruikersicoon staat er half af.
   8px zijpadding in plaats van 12px scheelt 8px per link, ruim genoeg voor die twee. Vanaf 360px
   was er al plaats (rechterrand 340), dus daarboven verandert er niets. */
@media (max-width: 360px) {
    .nav-link {
        padding: 6px 8px;
    }
}
/* Outline Button Style */
.btn-outline {
    background: white;
    border: 2px solid var(--gray-300);
    color: var(--gray-700);
}

.btn-outline:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
}

/* Form Control */
.form-control {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--border);
    border-radius: var(--border-radius);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
/* Loading Spinner */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinner {
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--primary, #6366F1);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

.loading-state {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    text-align: center;
}

.empty-state {
    text-align: center;
    padding: 80px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

        /* Kitchen-specific styles */
        .kitchen-columns {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 20px;
        }
        
        .order-column {
            background: #F3F4F6;
            border-radius: 12px;
            padding: 15px;
            min-height: 400px;
        }
        
        .column-header {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 15px;
            color: #1F2937;
        }
        
        .order-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .tab-badge {
            background: #EF4444;
            color: white;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            margin-left: 5px;
        }
        
        /* Order Timer */
        .order-timer {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 10px 0;
            padding: 8px;
            background: #FFF3CD;
            border-radius: 6px;
            font-size: 13px;
        }
        
        .order-timer.active {
            background: #D1ECF1;
            border-left: 3px solid #0C5460;
        }
        
        .order-timer-display {
            font-weight: 700;
            font-family: 'Courier New', monospace;
            font-size: 14px;
        }
        
        .timer-controls {
            display: flex;
            gap: 5px;
            margin-top: 5px;
        }
        
        .timer-btn {
            padding: 4px 8px;
            font-size: 11px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            background: #6C757D;
            color: white;
        }
        
        .timer-btn:hover {
            background: #5A6268;
        }
        
        .pickup-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
        }
        
        .pickup-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .admin-menu-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }
        
        .admin-menu-card {
            position: relative;
        }
        
        .admin-menu-card.unavailable {
            opacity: 0.6;
            position: relative;
        }
        
        .admin-menu-card.unavailable::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: repeating-linear-gradient(
                45deg,
                transparent,
                transparent 10px,
                rgba(0, 0, 0, 0.03) 10px,
                rgba(0, 0, 0, 0.03) 20px
            );
            border-radius: 12px;
            pointer-events: none;
            z-index: 1;
        }
        
        .unavailable-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #EF4444;
            color: white;
            padding: 4px 12px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 700;
            z-index: 2;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }
        
        .card-actions {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }
        
        /* Menu Editor Modal */
        .menu-editor-modal .modal-content {
            max-width: 700px;
            max-height: 90vh;
            overflow-y: auto;
        }
        
        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .form-group-full {
            grid-column: 1 / -1;
        }
        
        .form-group {
            display: flex;
            flex-direction: column;
        }
        
        .form-group label {
            font-weight: 600;
            margin-bottom: 8px;
            color: #374151;
            font-size: 14px;
        }
        
        .form-group input,
        .form-group select,
        .form-group textarea {
            padding: 10px 12px;
            border: 2px solid #E5E7EB;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.2s;
        }
        
        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--primary);
        }
        
        .form-group textarea {
            resize: vertical;
            min-height: 80px;
            font-family: inherit;
        }
        
        /* Image Upload */
        .image-upload-area {
            border: 2px dashed #E5E7EB;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
            background: #F9FAFB;
            margin-top: 8px;
        }
        
        .image-upload-area:hover {
            border-color: var(--primary);
            background: #F3F4F6;
        }
        
        .image-upload-area.dragover {
            border-color: var(--primary);
            background: #EEF2FF;
        }
        
        .image-preview {
            width: 100%;
            max-height: 200px;
            border-radius: 8px;
            overflow: hidden;
            margin-top: 10px;
            display: none;
        }
        
        .image-preview.show {
            display: block;
        }
        
        .image-preview img {
            width: 100%;
            height: auto;
            max-height: 200px;
            object-fit: cover;
        }
        
        .dietary-checkboxes {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            margin-top: 8px;
        }
        
        .checkbox-label {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px;
            border: 2px solid #E5E7EB;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .checkbox-label:hover {
            background: #F9FAFB;
        }
        
        .checkbox-label input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
        
        .checkbox-label input[type="checkbox"]:checked + span {
            font-weight: 600;
            color: var(--primary);
        }

        /* De statusfilters dragen dezelfde drie iconen als de kolomkoppen op de bestellingen-tab:
           een inbak, een draaiende pijl, een tas. Ze staan in een <span> naast de tekst, vandaar
           flex op die span in plaats van op het label — dat label bevat ook het aankruisvakje.
           `currentColor` betekent dat ze meekleuren met de regel erboven: grijs als het filter uit
           staat, merkkleur zodra het aangevinkt is. */
        .checkbox-label span {
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }

        .checkbox-label .filter-icon {
            width: 17px;
            height: 17px;
            flex-shrink: 0;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        
        .modal-actions {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 2px solid #E5E7EB;
        }
        
        .availability-toggle-group {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: #F9FAFB;
            border-radius: 8px;
            margin-top: 8px;
        }
        
        .toggle-switch {
            position: relative;
            width: 50px;
            height: 26px;
        }
        
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 26px;
        }
        
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        
        .toggle-switch input:checked + .toggle-slider {
            background-color: var(--primary);
        }
        
        .toggle-switch input:checked + .toggle-slider:before {
            transform: translateX(24px);
        }
        
        /* Category Management */
        .category-management {
            background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
            padding: 25px;
            border-radius: 12px;
            margin-bottom: 30px;
            border: 2px solid #E5E7EB;
        }
        
        .category-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 15px;
        }
        
        .category-chip {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            background: white;
            border: 2px solid #E5E7EB;
            border-radius: 8px;
            font-weight: 600;
            transition: all 0.2s;
        }
        
        .category-chip:hover {
            border-color: var(--primary);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .category-chip .emoji {
            font-size: 18px;
        }
        
        .category-chip button {
            background: none;
            border: none;
            color: #EF4444;
            cursor: pointer;
            font-size: 18px;
            line-height: 1;
            padding: 0;
            margin: 0;
            transition: color 0.2s;
        }
        
        .category-chip button:hover {
            color: #DC2626;
        }
        
        .category-chip.has-items button {
            color: #D1D5DB;
            cursor: not-allowed;
        }
        
        .add-category-form {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }
        
        .add-category-form input {
            flex: 1;
            padding: 10px 12px;
            border: 2px solid #E5E7EB;
            border-radius: 8px;
            font-size: 14px;
        }
        
        /* Settings Panel */
        .settings-panel {
            background: white;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 30px;
            border: 2px solid #E5E7EB;
        }
        
        .setting-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid #E5E7EB;
        }
        
        .setting-row:last-child {
            border-bottom: none;
        }
        
        .setting-info h4 {
            margin: 0 0 5px 0;
            font-size: 16px;
        }
        
        .setting-info p {
            margin: 0;
            font-size: 13px;
            color: #666;
        }
        
        .wake-lock-status {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 13px;
            font-weight: 600;
        }
        
        .wake-lock-status.active {
            background: #D1F4E0;
            color: #0F5132;
        }
        
        .wake-lock-status.inactive {
            background: #F8D7DA;
            color: #721C24;
        }
        
        /* Status Control Buttons */
        .status-control-group {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 15px;
        }
        
        .status-control-btn {
            padding: 15px;
            border: 2px solid #E5E7EB;
            border-radius: 8px;
            background: white;
            cursor: pointer;
            transition: all 0.2s;
            text-align: center;
        }
        
        .status-control-btn:hover {
            border-color: var(--primary);
            transform: translateY(-2px);
        }
        
        .status-control-btn.active {
            border-color: var(--primary);
            background: #EEF2FF;
        }
        
        .status-control-btn .status-emoji {
            font-size: 32px;
            display: block;
            margin-bottom: 8px;
        }
        
        .status-control-btn .status-label {
            font-weight: 600;
            display: block;
            margin-bottom: 4px;
        }
        
        .status-control-btn .status-desc {
            font-size: 12px;
            color: #666;
        }
        
        @media (max-width: 768px) {
            .kitchen-columns {
                grid-template-columns: 1fr;
            }
            
            .form-grid {
                grid-template-columns: 1fr;
            }
            
            .dietary-checkboxes {
                grid-template-columns: 1fr;
            }
            
            .status-control-group {
                grid-template-columns: 1fr;
            }
        }
        .status-control-btn.active {
    background: linear-gradient(135deg, var(--primary, #6366F1) 0%, var(--accent, #818CF8) 100%);
    color: white;
    border-color: var(--primary, #667eea);
    transform: scale(1.05);
}

.status-control-btn.active .status-emoji {
    transform: scale(1.2);
}
      /* Inline auth styles */
        .auth-container {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--primary, #6366F1) 0%, var(--accent, #818CF8) 100%);
        }

        .auth-card {
            background: white;
            border-radius: 20px;
            padding: 40px;
            max-width: 400px;
            width: 90%;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }

        .auth-logo {
            height: 60px;
            display: block;
            margin: 0 auto 20px;
        }

        .auth-card h1 {
            text-align: center;
            margin-bottom: 10px;
            color: #1F2937;
        }

        .auth-subtitle {
            text-align: center;
            color: #6B7280;
            margin-bottom: 30px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #374151;
        }

        .form-group input {
            width: 100%;
            padding: 12px;
            border: 2px solid #D1D5DB;
            border-radius: 8px;
            font-size: 14px;
            font-family: inherit;
        }

        .form-group input:focus {
            outline: none;
            border-color: var(--primary, #6366F1);
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .btn-primary {
            background: var(--primary, #6366F1);
            color: white;
            width: 100%;
        }

        .btn-primary:hover {
            background: var(--primary-dark, #4F46E5);
            transform: translateY(-1px);
        }

        .auth-tabs {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
        }

        .auth-tabs a {
            text-decoration: none;
            color: #6B7280;
            font-weight: 600;
        }

        .auth-tabs a.active {
            color: var(--primary, #6366F1);
        }

        .demo-links {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 2px solid #E5E7EB;
        }

        .demo-links h3 {
            text-align: center;
            color: #374151;
            margin-bottom: 15px;
            font-size: 14px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .demo-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .demo-btn {
            padding: 12px;
            background: #F3F4F6;
            border: 2px solid #D1D5DB;
            border-radius: 8px;
            text-decoration: none;
            color: #1F2937;
            font-weight: 600;
            text-align: center;
            transition: all 0.3s;
        }

        .demo-btn:hover {
            background: var(--primary, #6366F1);
            border-color: var(--primary, #6366F1);
            color: white;
            transform: translateX(5px);
        }
        .admin-menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* CRITICAL FIX: Make card a flex container to push buttons to bottom */
.admin-menu-card {
    position: relative;
    background: white;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    /* GEEN overflow:hidden meer. Dat knipte de OPEN lijst van de btw-keuzelijst af — je zag de
       knop, klikte, en er verscheen een halve lijst. De afgeronde hoeken van de foto komen nu van
       de foto zelf (zie .admin-card-image), dus de kaart hoeft niets meer af te knippen. */
    overflow: visible;
    transition: transform 0.2s, box-shadow 0.2s;
    
    /* Flexbox to control layout */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.admin-menu-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Image at top - fixed height */
.admin-card-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
    border-radius: 12px 12px 0 0;   /* de kaart knipt niet meer, dus de foto rondt zichzelf af */
}

/* Content area - grows to fill space */
.admin-menu-card > div:not(.unavailable-badge) {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Admin card header */
.admin-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    gap: 10px;
}

.admin-card-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #1F2937;
    flex: 1;
}

/* Price section - keep at bottom of main content */
.admin-menu-card > div > div[style*="display: flex"][style*="justify-content: space-between"] {
    margin-top: auto;
    margin-bottom: 12px;
}

/* Card actions - ALWAYS at bottom */
.card-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #E5E7EB;
}

.card-actions .btn {
    flex: 1;
    text-align: center;
    white-space: nowrap;
    padding: 10px 12px;
    font-size: 13px;
}

/* Ensure dietary badges don't push buttons */
.admin-menu-card .dietary-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 10px 0;
}

/* Unavailable styling */
.admin-menu-card.unavailable {
    opacity: 0.6;
}

.admin-menu-card.unavailable::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(0, 0, 0, 0.03) 10px,
        rgba(0, 0, 0, 0.03) 20px
    );
    border-radius: 12px;
    pointer-events: none;
    z-index: 1;
}

.unavailable-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #EF4444;
    color: white;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    z-index: 2;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Button improvements */
.btn-sm {
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
}

.btn-secondary {
    background: #F3F4F6;
    color: #374151;
    border: 1px solid #E5E7EB;
}

.btn-secondary:hover {
    background: #E5E7EB;
    border-color: #D1D5DB;
}

.btn-danger {
    background: #EF4444;
    color: white;
}

.btn-danger:hover {
    background: #DC2626;
}

.btn-success {
    background: #10B981;
    color: white;
}

.btn-success:hover {
    background: #059669;
}

/* Badge styling improvements */
.badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-sandwich,
.badge-salad,
.badge-soup,
.badge-drink,
.badge-snack,
.badge-dessert {
    background: #E5E7EB;
    color: #374151;
}

.badge-vegetarian,
.badge-vegan {
    background: #D1FAE5;
    color: #065F46;
}

/* Menu header section - clean button styling */
.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    gap: 20px;
}

.menu-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #1F2937;
}

/* Fix for the "+ Nieuw Item" button */
#addMenuItemBtn {
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    background: linear-gradient(135deg, var(--primary, #6366F1) 0%, var(--accent, #818CF8) 100%);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    /* `justify-content` ontbrak. Deze knop is flex, en dan doet de `text-align: center` van .btn
       niets — de tekst werd een anoniem flex-item op flex-start. Gemeten: 24px lucht links, 40px
       rechts. */
    justify-content: center;
    gap: 8px;
}

#addMenuItemBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

#addMenuItemBtn:active {
    transform: translateY(0);
}

/* If you wrap header in a div, this ensures proper layout */
div[style*="display: flex"][style*="justify-content: space-between"] h2 {
    margin: 0;
}

div[style*="display: flex"][style*="justify-content: space-between"] .btn-primary {
    flex-shrink: 0;
    width: auto;
    padding: 12px 24px;
}

/* Responsive fixes */
@media (max-width: 768px) {
    .admin-menu-grid {
        grid-template-columns: 1fr;
    }
    
    .card-actions {
        flex-direction: column;
    }
    
    .card-actions .btn {
        width: 100%;
    }
    
    .menu-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    #addMenuItemBtn {
        width: 100%;
        justify-content: center;
    }
}

/* Category select group styling */
.category-select-group {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.category-select-group > div:first-child {
    flex: 1;
}

.category-select-group .btn {
    flex-shrink: 0;
    padding: 10px 16px;
}

/* General button improvements */
.btn {
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

/* Prevent buttons from being too wide */
.btn-primary:not(.btn-block) {
    max-width: fit-content;
    min-width: 150px;
}

/* Style improvements for all primary buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--primary, #6366F1) 0%, var(--accent, #818CF8) 100%);
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.25);
}

.btn-primary:hover {
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
}
/* Fix Menu Card Layout - Push buttons to bottom */
.menu-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    
    /* CRITICAL: Flexbox to control layout */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.menu-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

/* Image - fixed height */
.menu-card-image {
    width: 100%;
    flex-shrink: 0;
    line-height: 0;
}

/* Content area - grows to fill space */
.menu-card-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.menu-card-content h3 {
    font-size: 18px;
    margin: 0 0 8px 0;
    color: var(--gray-900);
}

.menu-card-content p {
    font-size: 14px;
    color: var(--gray-600);
    margin: 0 0 12px 0;
    flex: 1; /* Allow description to grow */
}

/* Badges */
.menu-card-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

/* Footer - ALWAYS at bottom */
.menu-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto; /* Push to bottom */
    padding-top: 12px;
    border-top: 1px solid var(--gray-200);
}

.menu-card-price {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
}

.menu-card-footer .btn {
    flex-shrink: 0;
}

/* Filter Buttons - Clean styling */
.menu-filters-container {
    margin-bottom: 18px;   /* was 30px — tighten the gap to the grid by 12px (FIX H) */
}

.menu-filters-container h2 {
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: 700;
    color: #1F2937;
}

.menu-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 10px 20px;
    border: 2px solid var(--gray-300);
    background: white;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}

.filter-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
}

.filter-btn.active {
    background: linear-gradient(135deg, var(--primary, #6366F1) 0%, var(--accent, #818CF8) 100%);
    border-color: var(--primary, #667eea);
    color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* Badge improvements */
.badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-vegetarian,
.badge-vegan {
    background: #D1FAE5;
    color: #065F46;
}

.badge-gluten-free {
    background: #DBEAFE;
    color: #1E40AF;
}

.badge-lactose-free {
    background: #FEF3C7;
    color: #92400E;
}

.badge-halal {
    background: #E0E7FF;
    color: #3730A3;
}

/* Button improvements */
.btn-sm {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary, #6366F1) 0%, var(--accent, #818CF8) 100%);
    color: white;
    border: none;
    box-shadow: 0 2px 6px rgba(102, 126, 234, 0.25);
    transition: all 0.3s;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
}

.btn-primary:active {
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
    .menu-filters {
        justify-content: flex-start;   /* left-align the category dropdown with the heading (FIX G) */
    }

    .filter-btn {
        flex: 1;
        min-width: 120px;
    }
}

@media (max-width: 480px) {
    .filter-btn {
        width: 100%;
    }
}
/* ========================================
   CART PAGE STYLING
   Add to styles.css or create cart-styles.css
   ======================================== */

/* Cart Page Container */
.cart-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 20px;
}

.cart-page h1 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 30px;
    color: #1F2937;
}

/* Empty Cart State */
.empty-cart {
    text-align: center;
    padding: 80px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.empty-cart-icon {
    font-size: 80px;
    margin-bottom: 20px;
    opacity: 0.3;
}

.empty-cart h2 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #1F2937;
}

.empty-cart p {
    color: #6B7280;
    margin-bottom: 30px;
    font-size: 16px;
}

/* Cart Items Section */
.cart-items-section {
    margin-bottom: 30px;
}

/* Cart Item Card */
.cart-item-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: grid;
    grid-template-columns: 120px 1fr auto auto;
    gap: 20px;
    align-items: center;
    position: relative;
    transition: all 0.3s;
}

.cart-item-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Cart Item Image */
.cart-item-image {
    width: 120px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
}

/* Cart Item Details */
.cart-item-details {
    flex: 1;
}

.cart-item-details h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 5px 0;
    color: #1F2937;
}

.cart-item-meta {
    font-size: 14px;
    color: #6B7280;
    margin: 3px 0;
}

.cart-item-price {
    font-size: 14px;
    color: #6B7280;
    margin-top: 8px;
}

/* Quantity Controls */
.cart-item-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #F3F4F6;
    padding: 8px 12px;
    border-radius: 8px;
}

.qty-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: white;
    border-radius: 6px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary, #6366F1);
    transition: all 0.2s;
}

.qty-btn:hover:not(:disabled) {
    background: var(--primary, #6366F1);
    color: white;
    transform: scale(1.1);
}

.qty-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.qty-display {
    font-size: 16px;
    font-weight: 600;
    min-width: 30px;
    text-align: center;
    color: #1F2937;
}

/* Remove Button */
.remove-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: #FEE2E2;
    color: #EF4444;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    line-height: 1;
}

.remove-btn:hover {
    background: #EF4444;
    color: white;
    transform: scale(1.1);
}

/* Upsell Section */
.upsell-section {
    margin: 40px 0;
    padding: 30px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.upsell-section h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #1F2937;
}

.upsell-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

.upsell-card {
    background: #F9FAFB;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.upsell-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-color: var(--primary, #6366F1);
}

.upsell-card img {
    width: 100%;
    height: 140px;
    object-fit: cover;
}

.upsell-info {
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.upsell-info h4 {
    font-size: 14px;
    font-weight: 600;
    color: #1F2937;
    margin: 0;
}

.upsell-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary, #6366F1);
}

.upsell-add-btn {
    width: 100%;
    padding: 10px;
    background: var(--primary, #6366F1);
    color: white;
    border: none;
    border-radius: 0 0 8px 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.upsell-add-btn:hover {
    background: var(--primary-dark, #4F46E5);
}

/* Add More Section */
.add-more-section {
    text-align: center;
    margin: 30px 0;
}

.btn-add-more {
    padding: 14px 28px;
    background: white;
    border: 2px solid var(--primary, #6366F1);
    color: var(--primary, #6366F1);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-add-more:hover {
    background: var(--primary, #6366F1);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* Cart Summary Card */
.cart-summary-card {
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: sticky;
    top: 100px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    font-size: 16px;
    color: #6B7280;
}

.summary-row.total-row {
    border-top: 2px solid #E5E7EB;
    margin-top: 10px;
    padding-top: 15px;
    font-size: 20px;
    font-weight: 700;
    color: #1F2937;
}

.summary-price {
    font-weight: 600;
    color: #1F2937;
}

.summary-price-total {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary, #6366F1);
}

.btn-checkout {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--primary, #6366F1) 0%, var(--accent, #818CF8) 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 20px;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-checkout:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
}

.btn-checkout:active {
    transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 768px) {
    .cart-item-card {
        grid-template-columns: 80px 1fr;
        gap: 15px;
    }
    
    .cart-item-image {
        width: 80px;
        height: 60px;
    }
    
    .cart-item-controls {
        grid-column: 1 / -1;
        justify-content: center;
        margin-top: 10px;
    }
    
    .remove-btn {
        position: absolute;
        top: 15px;
        right: 15px;
    }
    
    .upsell-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cart-summary-card {
        position: static;
    }
}

@media (max-width: 480px) {
    .cart-page {
        padding: 20px 10px;
    }
    
    .cart-page h1 {
        font-size: 24px;
    }
    
    .cart-item-card {
        padding: 15px;
    }
    
    .upsell-grid {
        grid-template-columns: 1fr;
    }
}
/* ========================================
   CHECKOUT PAGE STYLING
   Add to styles.css or create checkout-styles.css
   ======================================== */

/* Checkout Container */
.checkout-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.checkout-container h1 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #1F2937;
}

.checkout-container > p {
    color: #6B7280;
    margin-bottom: 30px;
}

/* Checkout Grid */
.checkout-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 30px;
    align-items: start;
}

/* Checkout Section */
.checkout-section {
    background: white;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.checkout-section h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 20px 0;
    color: #1F2937;
}

/* Order Summary */
.order-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding: 15px 0;
    border-bottom: 1px solid #E5E7EB;
}

.order-summary-item:last-child {
    border-bottom: none;
}

.item-details strong {
    font-size: 16px;
    color: #1F2937;
}

.item-details > div {
    margin-top: 5px;
}

.item-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.item-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary, #6366F1);
    flex-shrink: 0;
    margin-left: 15px;
}

/* Order Total */
.order-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0 0 0;
    border-top: 2px solid #E5E7EB;
    margin-top: 15px;
    font-size: 22px;
    font-weight: 700;
}

.order-total-label {
    color: #1F2937;
}

.order-total-price {
    color: var(--primary, #6366F1);
    font-size: 28px;
}

/* Time Slot Picker Styling */
.time-picker-section {
    margin-bottom: 20px;
}

.day-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.day-btn {
    flex: 1;
    padding: 15px 20px;
    border: 2px solid #E5E7EB;
    background: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

.day-btn:hover {
    border-color: var(--primary, #6366F1);
    transform: translateY(-2px);
}

.day-btn.active {
    border-color: var(--primary, #6366F1);
    background: linear-gradient(135deg, var(--primary, #6366F1) 0%, var(--accent, #818CF8) 100%);
    color: white;
}

.day-btn-label {
    font-weight: 700;
    font-size: 16px;
    display: block;
    margin-bottom: 5px;
}

.day-btn-date {
    font-size: 14px;
    opacity: 0.8;
}

/* Time Slots Grid */
.time-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
    background: #F9FAFB;
    border-radius: 8px;
}

.time-slot {
    background: white;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.time-slot:hover:not(.disabled) {
    border-color: var(--primary, #6366F1);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.time-slot.selected {
    border-color: var(--primary, #6366F1);
    background: linear-gradient(135deg, var(--primary, #6366F1) 0%, var(--accent, #818CF8) 100%);
    color: white;
}

.time-slot.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #F3F4F6;
}

.time-slot.limited {
    border-color: #F59E0B;
    background: #FEF3C7;
}

.time-text {
    font-size: 16px;
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
}

.capacity-text {
    font-size: 12px;
    opacity: 0.8;
}

/* No Slots Message */
.no-slots-message {
    text-align: center;
    padding: 40px 20px;
    color: #6B7280;
}

.no-slots-message p {
    margin: 10px 0;
}

/* Selected Time Display */
.selected-time-display {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background: #EEF2FF;
    border: 2px solid var(--primary, #6366F1);
    border-radius: 8px;
    margin-top: 20px;
}

.selected-time-display.show {
    display: flex;
}

.selected-time-icon {
    font-size: 32px;
}

.selected-time-text {
    flex: 1;
    font-weight: 600;
    color: #1F2937;
}

/* Order Notes */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #374151;
}

.form-control {
    width: 100%;
    padding: 12px;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
}
/* De hoogte en het sleepgrepje horen bij het notitieveld, niet bij elk invoerveld met deze klasse:
   het e-mailveld en de datumvelden van het auditlogboek waren hierdoor 100px hoog. */
textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary, #6366F1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Place Order Button */
.place-order-section {
    position: sticky;
    top: 100px;
}

.btn-place-order {
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, var(--primary, #6366F1) 0%, var(--accent, #818CF8) 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    margin-top: 20px;
}

.btn-place-order:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
}

.btn-place-order:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Payment Modal */
.payment-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.payment-modal.active {
    display: flex;
}

.payment-modal-content {
    background: white;
    border-radius: 16px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.payment-modal-header {
    padding: 25px;
    border-bottom: 2px solid #E5E7EB;
    text-align: center;
}

.payment-modal-header h2 {
    margin: 0 0 10px 0;
    font-size: 24px;
    color: #1F2937;
}

.payment-modal-body {
    padding: 30px 25px;
}

.payment-qr-section {
    text-align: center;
    margin: 20px 0;
}

#qrcode {
    display: inline-block;
    padding: 15px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.qr-loading {
    padding: 40px;
    text-align: center;
    color: #6B7280;
}

.payment-instructions {
    text-align: center;
    margin: 20px 0;
    color: #6B7280;
    font-size: 14px;
}

.payment-info {
    background: #F9FAFB;
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
}

.payment-info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.payment-info-row:last-child {
    margin-bottom: 0;
    padding-top: 10px;
    border-top: 2px solid #E5E7EB;
    font-weight: 700;
}

.payment-amount {
    color: var(--primary, #6366F1);
    font-size: 24px;
    font-weight: 700;
}

/* Payment Status */
.payment-status {
    display: none;
    text-align: center;
    padding: 20px;
}

.payment-status.show {
    display: block;
}

/* Test Mode Section */
.test-mode-section {
    display: none;
    background: #FEF3C7;
    border: 2px solid #F59E0B;
    border-radius: 8px;
    padding: 15px;
    margin-top: 20px;
}

.test-mode-section h4 {
    margin: 0 0 10px 0;
    color: #92400E;
}

.test-buttons {
    display: flex;
    gap: 10px;
}

/* Cancel Button */
.btn-cancel {
    width: 100%;
    padding: 12px;
    background: #EF4444;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 15px;
}

.btn-cancel:hover {
    background: #DC2626;
}

/* Responsive */
@media (max-width: 968px) {
    .checkout-grid {
        grid-template-columns: 1fr;
    }
    
    .place-order-section {
        position: static;
    }
    
    .time-slots-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}

@media (max-width: 480px) {
    .checkout-container {
        padding: 20px 10px;
    }
    
    .checkout-container h1 {
        font-size: 24px;
    }
    
    .day-selector {
        flex-direction: column;
    }
    
    .time-slots-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Loading Animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary, #6366F1);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

/* ========================================
   DUAL PRICING DISPLAY (Employee vs Visitor)
   ======================================== */

/* Price Container */
.price-container {
    margin: 1rem 0;
}

/* Regular Price */
.price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1F2937;
}

/* Employee Pricing */
.employee-price-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.employee-price {
    font-size: 1.75rem;
    font-weight: 800;
    color: #10B981;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.original-price {
    font-size: 1.125rem;
    text-decoration: line-through;
    color: #9CA3AF;
    font-weight: 500;
}

/* Discount Badge */
.discount-badge {
    display: inline-block;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
    padding: 0.375rem 0.875rem;
    border-radius: 16px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    animation: pulse-badge 2s infinite;
}

/* Pending Badge */
.pending-badge {
    display: inline-block;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: white;
    padding: 0.375rem 0.875rem;
    border-radius: 16px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

/* Pulse animation for discount badge */
@keyframes pulse-badge {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.85;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   FIX 3: AUTH PAGE IMPROVEMENTS
   Removes unwanted scrollbar on login page ONLY
   ═══════════════════════════════════════════════════════════════════ */

/* DEFAULT: All pages CAN scroll */
html, body {
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

/* ONLY auth page (index.html) should NOT scroll */
body.auth-page {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden !important;
    width: 100vw;
    /* Background image - set in index.html inline styles */
    /* This is fallback only, inline styles take priority */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.auth-card {
    max-height: 90vh;
    overflow-y: auto;
    
    /* Hide scrollbar but keep functionality */
    scrollbar-width: thin;
    scrollbar-color: rgba(102, 126, 234, 0.3) transparent;
}

.auth-card::-webkit-scrollbar {
    width: 6px;
}

.auth-card::-webkit-scrollbar-track {
    background: transparent;
}

.auth-card::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.3);
    border-radius: 3px;
}

.auth-card::-webkit-scrollbar-thumb:hover {
    background: rgba(102, 126, 234, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════
   END OF CRITICAL FIXES
   ═══════════════════════════════════════════════════════════════════ */

/* ========================================
   AUDIT & COMPLIANCE TABLE (admin SPA)
   The audit section inside admin.html rendered a bare, unstyled <table>: `.audit-table` was
   defined NOWHERE in the codebase, and `.action-badge` existed only inside the standalone
   admin-audit.html page. So the inline section looked broken and the only presentable view was
   behind the 'Volledig audit rapport' button. Ported here, branding-aware, so the SPA section
   stands on its own.
   ======================================== */
.audit-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white, #FFFFFF);
    border: 1px solid var(--gray-200, #E5E7EB);
    border-radius: 12px;
    overflow: hidden;
}

.audit-table th,
.audit-table td {
    padding: 12px 16px;
    text-align: left;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--gray-200, #E5E7EB);
}

.audit-table th {
    background: var(--gray-50, #F9FAFB);
    color: var(--gray-500, #6B7280);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.audit-table tbody tr:last-child td { border-bottom: none; }
.audit-table tbody tr:hover { background: var(--gray-50, #F9FAFB); }

/* Details can be long — keep rows single-line and let the title attribute carry the rest.
   Targets the details CELL by class, not :last-child: since the audit view moved into the panel
   the last column holds the 'Details' BUTTON, and truncating that one made no sense. */
.audit-table td.audit-details {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--gray-500, #6B7280);
}

.action-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Category modifiers — same five buckets the standalone page uses. */
.action-badge.auth     { background: rgba(99, 102, 241, 0.10); color: var(--primary, #6366F1); }
.action-badge.data     { background: rgba(16, 185, 129, 0.10); color: var(--success, #10B981); }
.action-badge.security { background: rgba(239, 68, 68, 0.10);  color: var(--danger, #EF4444); }
.action-badge.gdpr     { background: rgba(59, 130, 246, 0.10); color: var(--info, #3B82F6); }
.action-badge.system   { background: rgba(107, 114, 128, 0.10); color: var(--gray-500, #6B7280); }

@media (max-width: 768px) {
    /* Let the table scroll rather than squash the columns. */
    #auditLogsContainer { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .audit-table { min-width: 780px; }   /* zeven kolommen sinds het logboek in het paneel staat */
}


/* ================================
   EIGEN SCHUIFBALK — gedeelde hulpklasse
   ================================
   Zet `class="synero-scroll"` op elk element met `overflow-y: auto`. De schuifbalk van het
   besturingssysteem ziet er per platform anders uit en is op Windows breed en grijs; midden in een
   modal valt dat op.

   Twee mechanismen, want geen enkele werkt overal:
   - `scrollbar-width` / `scrollbar-color` is de standaard; dat is wat Firefox leest.
   - `::-webkit-scrollbar` is ouder en niet gestandaardiseerd, maar het enige dat in Chrome, Edge en
     Safari de vorm bepaalt.
   `background-clip: padding-box` hoort bij de doorzichtige rand: zonder dat vult de achtergrond ook
   die rand en is de duim alsnog 10px breed in plaats van 4px met lucht eromheen. */
.synero-scroll {
    scrollbar-width: thin;
    scrollbar-color: #C7D2FE transparent;
}
.synero-scroll::-webkit-scrollbar {
    width: 10px;
}
.synero-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.synero-scroll::-webkit-scrollbar-thumb {
    background: #C7D2FE;
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: 999px;
}
.synero-scroll::-webkit-scrollbar-thumb:hover {
    background: #A5B4FC;
    background-clip: padding-box;
}

/* ========================================
   OPTIEMODAL OP HET MENU (.vsm-*) — "kies je variant"
   Dit venster was één scrollblok van max 80vh met alles erin: de foto, de titel, de optiegroepen,
   de totaalprijs en de knop. Op een telefoon van 390x844 betekende dat 675px gebruikt van de 804px
   die er onder de schermranden zijn, en je scrolde langs de knop heen om hem te vinden.

   Nu drie verdiepingen: de foto staat vast, alleen het middenstuk scrollt, en de knop staat
   altijd onderaan in beeld. De kaart mag bovendien bijna het hele scherm gebruiken.

   `dvh` en niet `vh`: op een telefoon telt vh de adresbalk mee die er niet altijd staat, dus 92vh
   is daar hoger dan het zichtbare scherm. De vh-regel blijft als terugval voor oudere browsers.
   ======================================== */
.vsm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.vsm-card {
    background: #FFFFFF;
    border-radius: 20px;
    width: 100%;
    max-width: 450px;
    max-height: 88vh;
    max-height: 88dvh;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;          /* de ronde hoeken knippen de foto en de scrollrand netjes af */
}

.vsm-media {
    position: relative;
    flex: 0 0 auto;
}

.vsm-media img,
.vsm-media .vsm-placeholder {
    display: block;
    width: 100%;
    height: 170px;
    object-fit: cover;
}

.vsm-placeholder {
    background: linear-gradient(135deg, var(--primary, #6366F1) 0%, var(--accent, #8B5CF6) 100%);
}

/* Het enige dat scrollt. */
.vsm-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 20px 4px;
}

/* Blijft staan, ook bij tien optiegroepen. */
.vsm-footer {
    flex: 0 0 auto;
    padding: 12px 20px 20px;
    background: #FFFFFF;
    border-top: 1px solid #F3F4F6;
}

@media (max-width: 640px) {
    /* Minder lucht om de kaart en een lagere foto: dat is samen ruim 100px extra voor de opties,
       en op een scherm van 390x844 loopt de bruikbare hoogte van 675 naar ongeveer 800px. */
    .vsm-overlay {
        padding: 10px;
    }

    .vsm-card {
        max-height: 94vh;
        max-height: 94dvh;
    }

    .vsm-media img,
    .vsm-media .vsm-placeholder {
        height: 120px;
    }

    .vsm-body {
        padding: 16px 16px 4px;
    }

    .vsm-footer {
        padding: 10px 16px 16px;
    }
}

/* Een laag scherm in liggende stand: dan is de foto het eerste dat mag wijken. */
@media (max-height: 520px) {
    .vsm-media img,
    .vsm-media .vsm-placeholder {
        height: 84px;
    }
}

/* ========================================
   DE MELDINGSSTROOK (.app-toast)
   Vier klantschermen bouwden hem elk apart op met inline stijlen: menu, winkelwagen, afrekenen en
   bestellingen, met drie verschillende paddings en twee verschillende hoogtes. Nu één klasse.

   Drie dingen zijn veranderd, alle drie omdat ze op een telefoon in de weg zaten:

   1. EEN REGEL, NIET TWEE. Er stond geen max-width, dus "Broodje gezond met Bruin, Extra kaas
      toegevoegd!" brak op een telefoon in twee regels en het blok werd een blok. Nu een regel met
      een beletselteken; de volledige tekst is niet nodig om te weten dat het gelukt is.

   2. ONDERAAN, VLAK BOVEN DE ZWEVENDE WINKELWAGENKNOP — overal, niet alleen op een telefoon.
      Hij stond rechtsboven, pal naast de winkelwagen in de kop, waar tegelijk het aantal opspringt
      (cart-pulse). Op een telefoon was hij al naar onderen verhuisd, maar naar bottom:18px — en de
      knop staat op bottom:20px, dus de strook LAG OVER DE KNOP HEEN, precies op het moment dat je
      erop wilt klikken. Nu staat hij op elke breedte 12px boven de bovenrand van die knop, en op
      pagina's zonder knop (bestellingen, instellingen) gewoon in de hoek — `body:has(.cart-float-btn)`
      maakt dat onderscheid, dezelfde techniek als `.header:has(~ .tabs-nav)` elders in dit bestand.
      De maten volgen de knop: 64px op bottom:30px breed, 56px op bottom:20px onder 768px.

   3. DE ANIMATIE BESTAAT NU ECHT. De vier bestanden verwezen naar `slideIn` en `slideOut`, en die
      keyframes staan nergens in dit project. Er gebeurde dus niets; het blok stond er ineens.
   ======================================== */
.app-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    max-width: min(360px, calc(100vw - 40px));
    padding: 12px 16px;
    border-radius: 10px;
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    z-index: 10000;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    animation: app-toast-in 0.25s ease both;
}

.app-toast.success { background: #10B981; }
.app-toast.error   { background: #EF4444; }
.app-toast.warning { background: #F59E0B; }
.app-toast.info    { background: #3B82F6; }

.app-toast.is-leaving {
    animation: app-toast-out 0.25s ease both;
}

/* Boven de zwevende knop als die er is: 30 + 64 + 12. */
body:has(.cart-float-btn) .app-toast { bottom: 106px; }

@keyframes app-toast-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes app-toast-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(12px); }
}

/* Onder 768px is de knop 56px op bottom:20px (zie .cart-float-btn hierboven): 20 + 56 + 12. */
@media (max-width: 768px) {
    .app-toast { bottom: 20px; right: 20px; }
    body:has(.cart-float-btn) .app-toast { bottom: 88px; }
}

@media (max-width: 640px) {
    .app-toast {
        left: 12px;
        right: 12px;
        max-width: none;
        text-align: center;
        animation-name: app-toast-in-mobile;
    }

    .app-toast.is-leaving {
        animation-name: app-toast-out-mobile;
    }

    @keyframes app-toast-in-mobile {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes app-toast-out-mobile {
        from { opacity: 1; transform: translateY(0); }
        to   { opacity: 0; transform: translateY(16px); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-toast,
    .app-toast.is-leaving {
        animation: none;
    }
}

/* ========================================
   VOORRAAD — de vier tegels en de categoriekeuze
   ======================================== */
.inv-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* HET CIJFER STAAT OP ELKE TEGEL OP DEZELFDE HOOGTE.
   "Lage Voorraad" breekt in twee regels en de andere labels niet, dus stond dat cijfer lager dan de
   rest — precies het soort verschil dat je niet kunt benoemen maar wel ziet.

   Niet opgelost met een vaste labelhoogte (dan moet je per breedte een getal raden dat klopt zolang
   niemand een label hernoemt), maar met de kaart als kolom en het cijfer op `margin-top: auto`. De
   tegels in een grid-rij zijn per definitie even hoog (align-items: stretch), dus het cijfer wordt
   dan overal tegen dezelfde onderkant geduwd — hoeveel regels het label ook neemt. */
.inv-stats > div {
    display: flex;
    flex-direction: column;
}

.inv-stats > div > div:last-child {
    margin-top: auto;
}

/* De keuzelijst met categorieën staat in dezelfde werkbalk als de knoppen. Ze stond eronder als
   rij pillen, en dat werd op een telefoon drie regels.
   Dit is sinds 2026-09-08 GEEN <select> meer maar een .cat-dropdown (zie dropdown.js), dus deze
   regel bepaalt alleen nog hoe het blok zich in de werkbalk gedraagt. Padding en lettergrootte
   zitten op .cat-dropdown-trigger en horen hier niet meer. */
.inv-cat-select {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 220px;
}

@media (max-width: 640px) {
    /* VIER TEGELS OP EEN RIJ.
       Met auto-fit en een ondergrens van 160px werden het er twee per rij, dus twee rijen van
       ongeveer 80px — 160px voordat de eerste voorraadkaart begint. Ze horen samen gelezen te
       worden (totaal, categorieën, bijna op, op).
       Nagerekend op 360px: 360 - 24 (containerpadding van het keukenscherm) = 336, min drie
       tussenruimtes van 8 = 312, gedeeld door 4 = 78px per tegel. Op 320px is dat 68px. Met 10px
       zijpadding blijft er 48-58px over: "Lage Voorraad" op 10px breekt daar in twee regels
       ("Lage" is 24px, "Voorraad" 44px) en dat past. */
    .inv-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .inv-stats > div {
        padding: 10px 8px !important;
        text-align: center;
    }

    .inv-stats > div > div:first-child {
        font-size: 10px !important;
        line-height: 1.2;
    }

    .inv-stats > div > div:last-child {
        font-size: 22px !important;
    }

    /* Op een telefoon mag de keuzelijst de hele regel hebben; de twee knoppen staan erboven. */
    .inv-cat-select {
        flex: 1 1 100%;
        max-width: none;
    }
}