/* ========================================
   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 */
.header {
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.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;
}

/* 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 — 3 cols desktop, 2 tablet, 1 mobile. */
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(3, 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; }
.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. */
.tabs-nav {
    background: white;
    border-bottom: 2px solid var(--gray-200);
}
.tabs-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 5px;
    overflow-x: auto;
}

.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;
}

.column-header {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--gray-900);
}

.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 */
.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;
}

.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;
    }
}
/* 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);
        }
        
        .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);
    overflow: hidden;
    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;
}

/* 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;
    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;
    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. */
.audit-table td:last-child {
    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: 640px; }
}