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

:root {
    /* Primary Brand Color (QUEBO espresso) */
    --primary: #6F4E37;
    --primary-hover: #573C2A;
    --primary-light: rgba(111, 78, 55, 0.06);

    /* Legacy alias for compatibility */
    --primary-color: #6F4E37;

    /* Secondary/Accent Colors */
    --secondary: #C2A06A;
    --secondary-color: #C2A06A;
    --accent-color: #C2A06A;

    /* Feedback Colors */
    --success: #16a34a;
    --error: #EF4444;
    --error-dark: #b91c1c;
    --warning: #F59E0B;
    --danger: #EF4444;
    --info: #2563EB;

    /* Neutral/Grayscale */
    --white: #FFFFFF;
    --surface: #f7f7f7;
    --light-bg: #f7f7f7;
    --border: #e4e4e4;
    --border-color: #e4e4e4;
    --text-primary: #1a1a1a;
    --text-dark: #1a1a1a;
    --text-muted: #5c5c5c;
    --text-light: #5c5c5c;
    --text-subtle: #5c5c5c;

    /* Sidebar (Dark) */
    --sidebar-bg: #1A1512;
    --sidebar-text: rgba(255, 255, 255, 0.72);
    --sidebar-active: rgba(194, 160, 106, 0.22);

    /* Dark Background */
    --dark-bg: #1A1512;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.06);
    --shadow-focus: 0 0 0 3px rgba(194, 160, 106, 0.30);

    /* Token Aliases (legacy names used across modules) */
    --text-secondary: var(--text-muted);
    --text-color: var(--text-primary);
    --text: var(--text-primary);
    --card-bg: var(--white);
    --hover-bg: rgba(0, 0, 0, 0.04);
    --success-color: var(--success);
    --error-color: var(--error);
    --warning-color: var(--warning);
    --info-color: var(--info);

    /* Radius Scale */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;

    /* Spacing Scale (4px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
}

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: inherit;
    box-shadow: 0 0 0 4px rgba(194, 160, 106, 0.30);
}

body {
    font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--surface);
    overflow-x: hidden;
}

/* Login Screen */
.login-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #FAF7F2 0%, #F3E9D7 55%, #F3E9D7 100%);
    padding: 20px;
    z-index: 9999;
}

.login-screen.hidden {
    display: none !important;
}

.login-container {
    background: var(--white);
    padding: 40px;
    border-radius: 16px;
    border: 1px solid rgba(194, 160, 106, 0.10);
    box-shadow: 0 20px 50px rgba(194, 160, 106, 0.12);
    max-width: 400px;
    width: 100%;
    animation: fadeInUp 0.5s ease;
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-icon {
    font-size: 48px;
    color: var(--primary);
    margin-bottom: 10px;
}

.login-logo {
    max-width: 230px;
    height: auto;
    margin: 4px auto 16px;
    display: block;
}

.login-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 5px;
}

.login-subtitle {
    color: var(--text-light);
    font-size: 14px;
}

.login-form {
    margin-top: 20px;
}

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

.login-form .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-dark);
    font-size: 14px;
}

.login-form input[type="email"],
.login-form input[type="password"] {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e1e8ed;
    border-radius: 10px;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
    background: #f7f7f7;
}

.login-form input[type="email"]:focus,
.login-form input[type="password"]:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--white);
    box-shadow: var(--shadow-focus);
}

.login-form input[type="email"]::placeholder,
.login-form input[type="password"]::placeholder {
    color: #adb5bd;
}

.login-form select,
.login-form .form-select {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e1e8ed;
    border-radius: 10px;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    transition: all 0.3s ease;
    background: #f7f7f7;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

.login-form select:focus,
.login-form .form-select:focus {
    outline: none;
    border-color: var(--primary);
    background-color: var(--white);
    box-shadow: var(--shadow-focus);
}

/* Role Selection Buttons */
.role-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 8px;
}

.role-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    border: 2px solid #e1e8ed;
    border-radius: 10px;
    background: #f7f7f7;
    cursor: pointer;
    transition: all 0.3s ease;
    gap: 4px;
}

.role-btn i {
    font-size: 20px;
    color: #6c757d;
    transition: color 0.3s ease;
}

.role-btn span {
    font-size: 12px;
    font-weight: 600;
    color: #495057;
}

.role-btn small {
    font-size: 10px;
    color: #adb5bd;
}

.role-btn:hover {
    border-color: var(--primary);
    background: #fff;
    transform: translateY(-2px);
}

.role-btn:hover i {
    color: var(--primary);
}

.role-btn.active {
    border-color: var(--primary);
    background: linear-gradient(135deg, rgba(194, 160, 106, 0.1), rgba(194, 160, 106, 0.05));
    box-shadow: var(--shadow-focus);
}

.role-btn.active i {
    color: var(--primary);
}

.role-btn.active span {
    color: var(--primary);
}

.login-form input[readonly] {
    background: #e9ecef;
    cursor: not-allowed;
}

/* Quick Login toggle button (below Login button) */
.role-toggle-btn {
    margin-top: 12px;
    background: #f7f7f7;
    color: var(--primary);
    border: 2px solid var(--primary);
    font-weight: 600;
}

.role-toggle-btn:hover {
    background: var(--primary);
    color: #fff;
}

.role-toggle-btn.active {
    background: var(--primary);
    color: #fff;
}

/* Login layout — login box + slide-out role panel */
.login-layout {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
}

/* Slide-out Role Panel (right side) — separate card with a gap.
   Collapsed to 0×0 so it never inflates the layout height (which previously
   stretched the login card and left a big empty space below the form). */
.role-panel {
    width: 0;
    max-width: 0;
    max-height: 0;
    overflow: hidden;
    background: var(--white);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    margin-left: 0;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.35s ease;
    align-self: center;
}

.role-panel.open {
    width: 320px;
    max-width: 320px;
    max-height: 800px;
    padding: 40px 28px;
    margin-left: 20px;
    opacity: 1;
    transform: translateX(0);
}

.role-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    white-space: nowrap;
}

.role-panel-header i {
    color: var(--primary);
    margin-right: 6px;
}

.role-panel-close {
    border: none;
    background: #f1f3f5;
    color: #6c757d;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.role-panel-close:hover {
    background: var(--primary);
    color: #fff;
}

.role-panel .role-buttons {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 0;
}

.role-panel .role-btn {
    padding: 18px 12px;
}

@media (max-width: 720px) {
    .login-layout {
        flex-direction: column;
        align-items: center;
    }
    .role-panel {
        border-radius: 16px;
        transform: translateY(-20px);
        width: 100%;
        max-width: 400px;
    }
    .role-panel.open {
        width: 100%;
        max-width: 400px;
        margin-left: 0;
        margin-top: 20px;
        transform: translateY(0);
    }
}

@media (max-width: 400px) {
    .role-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
}

.login-notice {
    margin-top: 20px;
    padding: 12px;
    background: #dbeafe;
    border-left: 4px solid var(--info);
    border-radius: 4px;
    font-size: 13px;
    color: #0277bd;
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-footer {
    margin-top: 20px;
    text-align: center;
    color: #8A7355;
    font-size: 12px;
}

/* Main App Layout */
.main-app {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.main-app.hidden {
    display: none !important;
}

/* Sidebar */
.sidebar-backdrop {
    display: none;
}

.sidebar {
    position: relative;
    width: 280px;
    min-width: 280px;
    background: var(--sidebar-bg);
    color: var(--white);
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    transition: width 0.25s ease, min-width 0.25s ease, transform 0.3s ease;
    z-index: 1000;
}

.sidebar-header {
    height: 70px;
    box-sizing: border-box;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--sidebar-bg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    width: 100%;
}

/* Logo-only header: center the QUEBO wordmark on its own */
.sidebar-header--logo-only {
    height: auto;
    min-height: 70px;
    justify-content: center;
    gap: 0;
    padding: 18px 12px;
}

.sidebar-nav {
    background: var(--sidebar-bg);
}

.sidebar-logo-mark {
    display: block;
    width: 100%;
    max-width: 180px;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

.sidebar-brand {
    line-height: 1.2;
    min-width: 0;
}

.sidebar-brand-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.sidebar-brand-name .brand-ph {
    color: #C2A06A;
}

.sidebar-brand-sub {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #8a8a8a;
    margin-top: 3px;
}

.sidebar-header i {
    font-size: 28px;
    color: var(--primary);
}

.sidebar-nav {
    flex: 1;
    padding: 24px 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 24px;
    margin: 0 12px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    cursor: pointer;
    border-radius: 8px;
    font-size: 15px;
    border: none;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    will-change: transform;
    /* Springy, professional easing — slide + colour respond together */
    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.25s ease;
}

/* Left accent bar that grows from the centre on hover/active */
.nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 0 4px 4px 0;
    background: #C2A06A;
    transform: translateY(-50%);
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

/* Diagonal light "sweep" that glides across on hover */
.nav-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.10) 50%,
        transparent 100%
    );
    transform: skewX(-18deg);
    transition: left 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.nav-item:hover {
    background: rgba(194, 160, 106, 0.15);
    color: var(--white);
    transform: translateX(6px);
}

.nav-item:hover::before {
    height: 56%;
}

.nav-item:hover::after {
    left: 130%;
}

/* Press / thumb-tap feedback — gives a tactile "push" on touch */
.nav-item:active {
    transform: translateX(6px) scale(0.97);
    transition-duration: 0.09s;
}

.nav-item.active {
    background: linear-gradient(135deg, #6F4E37 0%, #573C2A 100%);
    color: var(--white);
    box-shadow: 0 4px 14px rgba(194, 160, 106, 0.35);
}

.nav-item.active::before {
    height: 64%;
    background: #ffffff;
}

.nav-item i {
    width: 22px;
    text-align: center;
    font-size: 16px;
    opacity: 0.75;
    transition:
        opacity 0.2s ease,
        transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Icon "pop" — scales up on hover, settles when active */
.nav-item:hover i {
    opacity: 1;
    transform: scale(1.18);
}

.nav-item:active i {
    transform: scale(1.05);
}

.nav-item.active i {
    opacity: 1;
}

/* Collapsed (icons-only) sidebar: items are centred, so swap the
   horizontal slide for a clean scale-pop instead of translateX. */
@media (min-width: 769px) {
    .sidebar.collapsed .nav-item:hover {
        transform: scale(1.08);
    }

    .sidebar.collapsed .nav-item:active {
        transform: scale(0.95);
    }
}

/* Accessibility / professional polish: honour reduced-motion. */
@media (prefers-reduced-motion: reduce) {
    .nav-item,
    .nav-item i {
        transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
    }

    .nav-item::after {
        display: none;
    }

    .nav-item:hover,
    .nav-item:active,
    .sidebar.collapsed .nav-item:hover,
    .sidebar.collapsed .nav-item:active {
        transform: none;
    }

    .nav-item:hover i,
    .nav-item:active i {
        transform: none;
    }
}

/* ============================================================
   Collapsible sidebar — minimize to icons-only / maximize
   ============================================================ */

/* Floating round toggle button on the sidebar's right edge.
   Hidden by default; shown only on desktop/tablet (>768px). */
.sidebar-collapse-btn {
    display: none;
    position: absolute;
    top: 22px; /* centred against the logo (header is 70px tall) */
    right: -13px;
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    background: #6F4E37;
    color: #fff;
    border: 2px solid var(--sidebar-bg);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1100;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: background 0.2s ease, transform 0.2s ease;
}

.sidebar-collapse-btn:hover {
    background: #6F4E37;
    transform: scale(1.1);
}

.sidebar-collapse-btn i {
    font-size: 12px;
    line-height: 1;
    transition: transform 0.3s ease;
}

/* The collapsed visual state only applies on desktop/tablet (>768px).
   On phones the sidebar uses the slide-in drawer instead, so the
   "icons-only" rules are scoped inside this media query. */
@media (min-width: 769px) {
    /* Show the floating minimize/maximize toggle */
    .sidebar-collapse-btn {
        display: flex;
    }

    /* When collapsed, the chevron flips to point right (= expand) */
    .sidebar.collapsed .sidebar-collapse-btn i {
        transform: rotate(180deg);
    }

    /* ---- Collapsed state: only the icons remain visible ---- */
    .sidebar.collapsed {
        width: 76px;
        min-width: 76px;
    }

    .sidebar.collapsed .sidebar-brand {
        opacity: 0;
        width: 0;
        overflow: hidden;
        pointer-events: none;
    }

    .sidebar.collapsed .sidebar-header {
        justify-content: center;
        padding: 10px 0;
        gap: 0;
    }

    .sidebar.collapsed .sidebar-logo-mark {
        width: 100%;
        max-width: 48px;
        margin: 0 auto;
    }

    .sidebar.collapsed .nav-item {
        position: relative;
        justify-content: center;
        gap: 0;
        padding: 14px 0;
        margin: 0 10px;
    }

    .sidebar.collapsed .nav-item span:not(.alert-badge) {
        display: none;
    }

    .sidebar.collapsed .nav-item i {
        font-size: 18px;
    }

    .sidebar.collapsed .nav-separator {
        margin: 12px 16px;
    }

    /* Keep the alert badge tucked to the icon corner when collapsed */
    .sidebar.collapsed .nav-item .alert-badge {
        position: absolute;
        top: 8px;
        right: 14px;
    }
}

/* Separator line between nav groups */
.nav-separator {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 16px 24px;
}

.logout-item {
    margin-top: auto;
    margin-bottom: 16px;
    color: var(--danger);
    background: none;
    border: none;
    width: calc(100% - 24px);
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
}

.logout-item:hover {
    background: rgba(220, 38, 38, 0.1);
}

/* Main Content */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Top Bar */
.top-bar {
    height: 70px;
    background: var(--white);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    box-shadow: var(--shadow);
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-dark);
    cursor: pointer;
}

.module-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-dark);
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.current-time {
    color: var(--text-light);
    font-size: 14px;
}

.cloud-sync-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #9aa0a6;
    background: #f3f4f6;
    padding: 5px 11px;
    border-radius: 20px;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .cloud-sync-badge span,
    .cloud-sync-badge { font-size: 0; gap: 0; }
    .cloud-sync-badge i { font-size: 13px; }
}

/* ============================================================
   NOTIFICATION BELL (role-scoped) — top-bar
   ============================================================ */
.notif-bell {
    position: relative;
    display: flex;
    align-items: center;
}
.notif-bell-btn {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    color: #4b5563;
    font-size: 18px;
    line-height: 1;
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    transition: color 0.15s ease, background 0.15s ease;
}
.notif-bell-btn:hover {
    color: #6F4E37;
    background: #FAF7F2;
}
.notif-badge {
    position: absolute;
    top: -1px;
    right: -1px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 8px;
    background: #F59E0B;       /* amber: attention only */
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px var(--white, #fff);
}
.notif-badge.critical { background: #EF4444; } /* red: has a critical item */

.notif-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 340px;
    max-width: 92vw;
    background: var(--white, #fff);
    border-radius: 14px;
    border: 1px solid #ececec;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
    z-index: 1001;
    overflow: hidden;
}
.notif-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    font-weight: 700;
    font-size: 14px;
    color: #1a1a1a;
    border-bottom: 1px solid #f1f1f1;
}
.notif-panel-head i { color: #6F4E37; margin-right: 6px; }
.notif-list {
    max-height: 62vh;
    overflow-y: auto;
}
.notif-item {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    padding: 12px 16px;
    border-bottom: 1px solid #f5f5f5;
    border-left: 3px solid transparent;
    transition: background 0.12s ease;
}
.notif-item[role="button"] { cursor: pointer; }
.notif-item[role="button"]:hover { background: #f9fafb; }
.notif-item:last-child { border-bottom: none; }
.notif-item.sev-critical { border-left-color: #EF4444; }
.notif-item.sev-warning  { border-left-color: #F59E0B; }
.notif-item.sev-info     { border-left-color: #C2A06A; }
.notif-item-icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
.sev-critical .notif-item-icon { background: #fee2e2; color: #b91c1c; }
.sev-warning  .notif-item-icon { background: #fef3c7; color: #b45309; }
.sev-info     .notif-item-icon { background: #F3E9D7; color: #6F4E37; }
.notif-item-body { flex: 1; min-width: 0; }
.notif-item-title {
    font-weight: 600;
    font-size: 13.5px;
    color: #1a1a1a;
    line-height: 1.3;
}
.notif-item-detail {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notif-item-go {
    align-self: center;
    color: #cbd5e1;
    font-size: 12px;
    flex-shrink: 0;
}
.notif-empty {
    text-align: center;
    padding: 34px 16px;
    color: #9ca3af;
}
.notif-empty i { font-size: 30px; color: #C2A06A; margin-bottom: 8px; }
.notif-empty p { margin: 0; font-size: 13px; }

@media (max-width: 480px) {
    .notif-panel {
        position: fixed;
        top: 60px;
        right: 8px;
        left: 8px;
        width: auto;
        max-width: none;
    }
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: var(--light-bg);
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.user-info:hover {
    background: #e9ecef;
}

.user-info i {
    font-size: 24px;
    color: var(--primary);
}

/* Profile dropdown menu */
.user-menu {
    position: relative;
}

.user-caret {
    font-size: 12px !important;
    color: var(--text-light) !important;
    margin-left: 2px;
    transition: transform 0.2s ease;
}

.user-menu.open .user-caret {
    transform: rotate(180deg);
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
    border: 1px solid #e4e4e4;
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: all 0.2s ease;
    z-index: 1000;
}

.user-menu.open .user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

.user-dropdown-item i {
    font-size: 16px;
    width: 18px;
    text-align: center;
}

.user-dropdown-item:hover {
    background: var(--light-bg);
}

.user-dropdown-item.logout {
    color: var(--danger);
}

.user-dropdown-item.logout:hover {
    background: rgba(220, 38, 38, 0.1);
}

/* Content Container */
.content-container {
    flex: 1;
    overflow-y: auto;
    padding: 30px;
}

/* Module Base */
.module {
    display: none;
    animation: fadeIn 0.3s ease;
}

.module.active {
    display: block;
}

/* Module Header */
.module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.module-header h3 {
    font-size: 20px;
    font-weight: 600;
}

.filter-controls {
    display: flex;
    gap: 10px;
}

/* Form Elements */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-dark);
}

.form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--shadow-focus);
}

textarea.form-control {
    resize: vertical;
}

/* ---------------------------------------------------------------------------
   Kill native input chrome — the "oval" inside search/number fields. WebKit
   renders type=search as a rounded searchfield and type=number with a spinner
   block; when our CSS strips the input's border (e.g. .pos-search, .cd-amount-input)
   that native shape shows through as an ugly inner oval. Reset appearance on all
   text-like inputs and drop the search decorations + number spinners. Date/time/
   range/checkbox/radio are intentionally excluded so their pickers still work.
   --------------------------------------------------------------------------- */
input[type="text"],
input[type="search"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

/* Inputs nested in a wrapper that already shows focus on its OWN border
   (:focus-within — .pos-search, .cd-amount-input, .att-picker__search) must not
   also draw the element-level focus ring: that ring hugs the input's radius and
   reads as a stray inner "oval". The wrapper is the focus indicator. */
.pos-search input:focus,
.pos-search input:focus-visible,
.cd-amount-input input:focus,
.cd-amount-input input:focus-visible,
.att-picker__search input:focus,
.att-picker__search input:focus-visible {
    box-shadow: none;
    outline: none;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

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

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

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(194, 160, 106, 0.3);
}

.btn-secondary {
    background: var(--text-light);
    color: var(--white);
}

.btn-secondary:hover {
    background: #5a6268;
}

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

.btn-warning {
    background: var(--warning);
    color: var(--text-dark);
}

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

.btn-danger:hover {
    background: #991b1b;
}

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

.btn-block {
    width: 100%;
    justify-content: center;
}

.btn-large {
    padding: 12px 20px;
    font-size: 15px;
}

/* Login Page Specific Button */
.login-form .btn-primary {
    margin-top: 10px;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(194, 160, 106, 0.3);
}

.login-form .btn-primary:hover {
    box-shadow: 0 6px 20px rgba(194, 160, 106, 0.4);
}

/* Summary Cards */
.summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.summary-card {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease;
}

.summary-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.card-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--white);
}

.card-content h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 4px;
}

.card-content p {
    color: var(--text-light);
    font-size: 13px;
}

/* Dashboard Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.dashboard-section {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

.section-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

/* Professional stock-status badge */
.stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
}

.stock-badge .stock-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ===== Low Stock Alert — premium card grid (dashboard) ===== */
/* 8pt spacing throughout; tables keep status colour, cards stay neutral white. */
#lowStockList { gap: 16px; }

.ls-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #5c5c5c;
}

.ls-summary-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 8px;
    background: #fdeaea;
    color: #C62828;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ls-summary-count-low { background: #fef3c7; color: #B26A00; }

.ls-summary-text strong { color: #C62828; font-weight: 700; }

.ls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
    gap: 16px;
}

.ls-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ls-card:hover {
    box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
    transform: translateY(-2px);
}

/* Status accent on the left edge (red = out of stock, amber = low) */
.ls-card-critical { border-left: 3px solid #EF4444; }
.ls-card-low { border-left: 3px solid #F59E0B; }

.ls-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ls-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.ls-icon-low { background: #fef3c7; color: #B26A00; }
.ls-icon-critical { background: #fdeaea; color: #C62828; }

.ls-info { flex: 1; min-width: 0; }

.ls-name {
    font-weight: 700;
    font-size: 15px;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ls-cat {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

/* Stock-level meter (current vs reorder point) */
.ls-meter {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ls-meter-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    color: #6b7280;
}

.ls-meter-top strong {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    font-variant-numeric: tabular-nums;
}

.ls-bar {
    height: 8px;
    border-radius: 8px;
    background: #f0f1f3;
    overflow: hidden;
}

.ls-bar-fill {
    height: 100%;
    border-radius: 8px;
    min-width: 4px;
    transition: width 0.4s ease;
}

.ls-card-foot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: auto;
}

.ls-restock {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--primary);
    background: #fff;
    color: var(--primary);
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.ls-restock:hover { background: var(--primary); color: #fff; }
.ls-restock:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(194, 160, 106, 0.3); }
.ls-restock:active { transform: scale(0.98); }
.ls-restock:disabled { opacity: 0.5; cursor: not-allowed; }

.ls-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px;
    color: #6F4E37;
    font-size: 14px;
    font-weight: 500;
}

.ls-empty i { font-size: 18px; }

/* ===== Calendar Reservations ===== */
.res-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}
@media (max-width: 900px) {
    .res-layout { grid-template-columns: 1fr; }
}

.res-cal {
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 14px;
    padding: 16px;
}
.res-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.res-cal-title { font-size: 16px; font-weight: 700; color: #1a1a1a; }
.res-cal-nav {
    width: 34px; height: 34px;
    border: 1px solid #e4e4e4;
    background: #fff;
    border-radius: 9px;
    cursor: pointer;
    color: #1a1a1a;
    transition: all 0.15s ease;
}
.res-cal-nav:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

.res-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}
.res-cal-dows { margin-bottom: 6px; }
.res-cal-dow {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #9aa0a6;
    text-transform: uppercase;
    padding: 4px 0;
}
.res-cal-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 1px solid #f0f1f3;
    border-radius: 9px;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 6px;
    transition: all 0.12s ease;
}
.res-cal-cell:hover { border-color: var(--primary); background: #f3faf6; }
.res-cal-empty { border: none; cursor: default; background: transparent; }
.res-cal-empty:hover { background: transparent; }
.res-cal-day { font-size: 13px; font-weight: 600; color: #1a1a1a; }
.res-cal-cell.is-today { border-color: var(--primary); }
.res-cal-cell.is-today .res-cal-day { color: var(--primary); }
.res-cal-cell.is-sel { background: var(--primary); border-color: var(--primary); }
.res-cal-cell.is-sel .res-cal-day { color: #fff; }
.res-cal-count {
    position: absolute;
    bottom: 5px; right: 5px;
    min-width: 17px; height: 17px;
    padding: 0 4px;
    background: #F59E0B;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.res-cal-cell.is-sel .res-cal-count { background: #fff; color: var(--primary); }
.res-cal-legend { margin-top: 12px; font-size: 11px; color: #9aa0a6; display: flex; align-items: center; gap: 6px; }

/* Day panel */
.res-day {
    background: #fff;
    border: 1px solid #eef0f2;
    border-radius: 14px;
    padding: 16px;
}
.res-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f1f3;
}
.res-day-title { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.res-day-sub { font-size: 12px; color: #5c5c5c; margin-top: 2px; }
.res-day-list { display: flex; flex-direction: column; gap: 10px; }
.res-day-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid #eef0f2;
    border-radius: 11px;
}
.res-day-time {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    background: #F3E9D7;
    padding: 5px 9px;
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}
.res-day-info { flex: 1; min-width: 0; }
.res-day-name { font-weight: 600; font-size: 14px; color: #1a1a1a; }
.res-day-meta { font-size: 12px; color: #5c5c5c; margin-top: 2px; }
.res-day-pre { font-size: 11px; color: #F59E0B; font-weight: 600; margin-top: 5px; }
.res-day-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.res-day-actions { display: flex; gap: 6px; }
.res-day-empty {
    text-align: center;
    color: #aab0b6;
    padding: 36px 16px;
}
.res-day-empty i { font-size: 30px; opacity: 0.5; display: block; margin-bottom: 10px; }
.res-day-empty p { margin: 0; font-size: 13px; }

/* Reservation form modal */
.res-form { display: flex; flex-direction: column; gap: 14px; }
.res-form-row { display: flex; gap: 12px; }
.res-form-group { flex: 1; min-width: 0; }
.res-form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #555;
    margin-bottom: 6px;
}
.res-form-group .form-control { width: 100%; }
.res-preorder {
    border-top: 1px solid #f0f1f3;
    padding-top: 14px;
}
.res-preorder > label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 10px;
}
.res-preorder > label i { color: var(--primary); }
.res-preorder-add { display: flex; gap: 8px; margin-bottom: 10px; }
.res-preorder-add .form-control { font-size: 13px; }
/* Center the "Add" label inside the button (the flex row stretches it to the
   select's height, which pushed the text off-center) */
.res-preorder-add .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    padding-top: 0;
    padding-bottom: 0;
}
.res-preorder-empty { font-size: 12px; color: #aab0b6; text-align: center; padding: 8px; }
.res-preorder-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    padding: 8px 10px;
    background: #f7f8fa;
    border-radius: 8px;
    margin-bottom: 6px;
    color: #1a1a1a;
}
.res-preorder-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px dashed #e4e4e4;
    color: var(--primary);
}

/* ===== Dashboard Live Floor Plan ===== */
.floorplan-hero {
    margin-bottom: 0;
}

/* Floor plan (wider) beside Order Type Breakdown — two columns */
.dashboard-grid-floor {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}

@media (max-width: 900px) {
    .dashboard-grid-floor {
        grid-template-columns: 1fr;
    }
}

.floorplan-header {
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.floorplan-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.floorplan-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: linear-gradient(135deg, #6F4E37, #573C2A);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.floorplan-title h3 {
    margin: 0;
    line-height: 1.2;
}

.floorplan-sub {
    font-size: 12px;
    color: #5c5c5c;
}

.floorplan-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.floorplan-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.fp-tab {
    padding: 7px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #cfcfcf;
    background: #fff;
    color: #1a1a1a;
    transition: all 0.2s ease;
}

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

.fp-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.floorplan-manage {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    color: var(--primary);
    background: #F3E9D7;
    border: 1px solid #D8BE8E;
    transition: all 0.2s ease;
}

.floorplan-manage:hover {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

/* Stat cards row */
.fp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.fp-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f7f8fa;
    border: 1px solid #e4e4e4;
    border-radius: 12px;
    padding: 12px 14px;
}

.fp-stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.fp-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
}

.fp-stat-label {
    font-size: 12px;
    color: #5c5c5c;
    margin-top: 3px;
}

.fp-occ {
    grid-column: span 2;
}

.fp-occ-bar {
    height: 8px;
    border-radius: 5px;
    background: #e5e7eb;
    overflow: hidden;
}

.fp-occ-fill {
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, #22C55E, #F59E0B, #EF4444);
    background-size: 200% 100%;
    transition: width 0.4s ease;
}

/* The grid */
.fp-grid-wrap {
    width: 100%;
    overflow: hidden;
    background: #f7f7f7;
    border: 1px solid #e4e4e4;
    border-radius: 12px;
    padding: 14px;
}

.fp-grid {
    display: grid;
    gap: 5px;
}

.fp-cell {
    min-width: 0;
    min-height: 0;
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.12s ease;
}

.fp-cell:not(.fp-empty):hover {
    transform: scale(1.08);
    cursor: default;
}

.fp-empty {
    background: #fff;
    border: 1px solid #f0f0f0;
}

.fp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 14px;
    font-size: 12px;
    color: #6b7280;
}

.fp-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fp-dot {
    width: 13px;
    height: 13px;
    border-radius: 4px;
    display: inline-block;
}

/* Phone: a 6+ wide floor plan can't fit readable tiles across ~360px, so the
   labels get crushed ("AVAILABL", "NPAID P6…"). Instead of shrinking the text,
   give each tile a comfortable fixed size and let the plan scroll sideways.
   --fp-cols/--fp-rows are set inline per floor so the track count matches the
   real grid (6×6, or larger if a presenter grew it). */
@media (max-width: 600px) {
    .fp-grid-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .fp-grid {
        width: max-content !important;
        height: auto !important;
        grid-template-columns: repeat(var(--fp-cols, 6), 64px) !important;
        grid-template-rows: repeat(var(--fp-rows, 6), 64px) !important;
    }
    /* Let multi-word status pills (e.g. "Unpaid ₱1234") wrap rather than clip;
       single words like "Available" still stay on one line and fit the tile. */
    .fp-grid .fp-cell span {
        white-space: normal !important;
    }
}

/* Order Breakdown */
.order-breakdown {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: var(--light-bg);
    border-radius: 8px;
}

.breakdown-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

.breakdown-value {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a1a;
}

/* Table */
.table-container {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
}

.data-table thead {
    background: var(--light-bg);
}

.data-table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: var(--text-dark);
    border-bottom: 2px solid var(--border-color);
}

.data-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
}

.data-table tr:hover {
    background: var(--light-bg);
}

.no-data {
    text-align: center;
    padding: 40px !important;
    color: var(--text-light);
}

/* Status Badges */
.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.status-pending {
    background: #fef3c7;
    color: #b45309;
}

.status-in-kitchen {
    background: #cce5ff;
    color: #004085;
}

.status-served {
    background: #d1ecf1;
    color: #0c5460;
}

.status-completed {
    background: #F3E9D7;
    color: var(--primary);
}

.status-cancelled {
    background: #fee2e2;
    color: #b91c1c;
}

.status-voided {
    background: #fce4ec;
    color: #880e4f;
}

.status-refunded {
    background: #fef3c7;
    color: #e65100;
}

.status-split {
    background: #dbeafe;
    color: #1565c0;
}

.status-ready {
    background: #ede9fe;
    color: #6d28d9;
}

.status-out-for-delivery {
    background: #ffedd5;
    color: #c2410c;
}

/* Orders-table generic badge variant for out-for-delivery rows */
.status-badge.road {
    background: #ffedd5;
    color: #c2410c;
}

.status-available {
    background: #F3E9D7;
    color: var(--primary);
}

.status-out-of-stock {
    background: #fee2e2;
    color: #b91c1c;
}

.status-on-duty {
    background: #F3E9D7;
    color: var(--primary);
}

.status-off-duty {
    background: #e2e3e5;
    color: #383d41;
}

.status-ok {
    background: #F3E9D7;
    color: var(--primary);
}

.status-low {
    background: #fef3c7;
    color: #b45309;
}

.status-critical {
    background: #fee2e2;
    color: #b91c1c;
}

.status-confirmed {
    background: #F3E9D7;
    color: var(--primary);
}

/* Alert List */
.alert-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.alert-item {
    padding: 12px;
    background: #fef3c7;
    border-left: 4px solid var(--warning);
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-item.critical {
    background: #fee2e2;
    border-left-color: var(--danger);
}

/* Dashboard Low Stock — show ~3 items, scroll for the rest */
#lowStockList {
    max-height: 172px;
    overflow-y: auto;
    padding-right: 6px;
}

/* POS Layout */
.pos-container {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 20px;
    height: calc(100vh - 160px);
}

.pos-menu-section {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pos-header {
    margin-bottom: 20px;
}

.category-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.category-tab {
    padding: 10px 20px;
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid transparent;
    border-radius: 999px; /* pill — matches the rounded card language */
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, color 0.2s ease,
                transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.category-tab:hover {
    background: #e8f5ee;
    color: var(--primary);
}

.category-tab:active {
    transform: scale(0.96);
}

.category-tab.active {
    background: linear-gradient(135deg, #6F4E37 0%, #573C2A 100%);
    color: var(--white);
    box-shadow: 0 4px 12px rgba(194, 160, 106, 0.28);
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    overflow-y: auto;
    /* Breathing room so the hover lift + shadow + border are never clipped */
    padding: 8px 12px 12px 8px;
}

/* Sold out / needs prep. The dim used to sit on the CARD, which dragged the
   badge down with it — grayscale(0.6) turned the amber NEEDS PREP into
   something barely distinguishable from the red SOLD OUT, and the badge is the
   one thing on the card that has to stay readable. Dim the photo and the text;
   leave the badge alone. */
.menu-item--out .menu-item-img img,
.menu-item--out .menu-item-img-placeholder > i {
    opacity: 0.5;
    filter: grayscale(0.75);
}
.menu-item--out .menu-item-name,
.menu-item--out .menu-item-goodfor,
.menu-item--out .menu-item-price {
    opacity: 0.5;
}

.menu-item {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 12px 12px 16px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #ececf0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    -webkit-tap-highlight-color: transparent;
    will-change: transform;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.28s ease, border-color 0.2s ease;
}

/* Fixed-size menu item photo with overlaid badge */
.menu-item-img {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    background: #ececf0;
}

.menu-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.menu-item-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C2A06A;
    font-size: 30px;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.75), transparent 60%),
        linear-gradient(135deg, #eef7f1 0%, #dcebe3 100%);
}

/* Smooth zoom of the photo / placeholder icon when hovering a POS card */
.menu-item-img img,
.menu-item-img-placeholder i {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-item:not(.menu-mcard):hover .menu-item-img img {
    transform: scale(1.06);
}

.menu-item:hover .menu-item-img-placeholder i {
    transform: scale(1.12);
}

/* Floating "+" add-to-order cue — appears on hover. Scoped to POS cards only
   (management cards are .menu-item.menu-mcard and use an upload overlay). */
.menu-item:not(.menu-mcard) .menu-item-img::after {
    content: '\f067'; /* fa-plus */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    background: linear-gradient(135deg, #6F4E37, #573C2A);
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(194, 160, 106, 0.45);
    opacity: 0;
    transform: translateY(6px) scale(0.8);
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    z-index: 2;
}

.menu-item:not(.menu-mcard):hover .menu-item-img::after {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* "BESTSELLER" badge pinned on the photo (like the reference image) */
.menu-item-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #fff;
    color: var(--primary);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
    padding: 5px 11px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 2;
    white-space: nowrap;
}

.menu-item-badge::before {
    content: '\f005';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #ffb300;
    margin-right: 4px;
}

.menu-item:hover {
    transform: translateY(-5px);
    border-color: rgba(194, 160, 106, 0.5);
    box-shadow: 0 12px 28px rgba(194, 160, 106, 0.16), 0 4px 10px rgba(16, 24, 40, 0.06);
}

/* Tactile press for touch (thumb tap) — POS cards only */
.menu-item:not(.menu-mcard):active {
    transform: translateY(-2px) scale(0.985);
    transition-duration: 0.1s;
}

.menu-item-name {
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 14.5px;
    line-height: 1.35;
    color: #1f2937;
    /* Clamp to 2 lines + reserve the height so every card aligns evenly */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}

.menu-item-price {
    color: var(--primary);
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.2px;
}

/* Accessibility: respect reduced-motion on the POS menu */
@media (prefers-reduced-motion: reduce) {
    .menu-item,
    .menu-item-img img,
    .menu-item-img-placeholder i,
    .category-tab {
        transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    }
    .menu-item:hover,
    .menu-item:active,
    .category-tab:active,
    .menu-item:hover .menu-item-img img,
    .menu-item:hover .menu-item-img-placeholder i {
        transform: none;
    }
    .menu-item .menu-item-img::after {
        transition: opacity 0.15s ease;
        transform: none;
    }
}

/* ===== Menu & Pricing — management cards (photo-forward, centered layout) ===== */
.menu-grid.menu-manage-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
    overflow: visible;
    padding-right: 0;
}
.menu-mcard {
    cursor: default;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid #ECEEF1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.menu-mcard .menu-item-img {
    cursor: pointer;
    position: relative;
    aspect-ratio: 1 / 1;
    height: auto;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: #E7E9ED;
    margin-bottom: 14px;
}
.menu-mcard .menu-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.menu-mcard .menu-item-name {
    text-align: center;
    font-size: 19px;
    font-weight: 800;
    color: var(--text-dark);
    margin-bottom: 8px;
    letter-spacing: -0.2px;
}
.menu-mcard-ph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #B9BFC9;
    font-size: 56px;
    background: linear-gradient(160deg, #ECEEF2, #E1E4E9);
}
.menu-mcard-upload {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(111, 78, 55, 0.82);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 7px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 3;
}
.menu-mcard .menu-item-img:hover .menu-mcard-upload {
    opacity: 1;
}
.menu-mcard-cat {
    align-self: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    background: #F3E9D7;
    padding: 5px 16px;
    border-radius: 20px;
    margin-bottom: 14px;
}
.menu-mcard-pricing {
    border-top: 1px solid #EEF0F3;
    padding: 12px 0 14px;
    margin-bottom: 2px;
}
.menu-mcard-price {
    font-size: 26px;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.5px;
    line-height: 1.2;
}
/* Interactive availability pill (replaces the static text + the old orange
   eye button). One tap toggles the item on/off the public menu. */
.mcard-avail-toggle {
    margin-top: 10px;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;            /* Fitts's Law — comfortable tap target */
    padding: 8px 18px;
    border: 1px solid transparent;
    border-radius: 999px;        /* pill */
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease,
                border-color 0.15s ease, box-shadow 0.15s ease,
                transform 0.05s ease;
}
.mcard-avail-toggle i { font-size: 13px; }

/* Available → subtle light-green */
.mcard-avail-toggle.is-on {
    background: #F3E9D7;
    color: #6F4E37;
    border-color: #F3E9D7;
}
.mcard-avail-toggle.is-on:hover { background: #F3E9D7; }

/* Unavailable → light neutral grey (text darkened for WCAG AA on the tint) */
.mcard-avail-toggle.is-off {
    background: #F1F3F5;
    color: #4B5563;
    border-color: #E5E7EB;
}
.mcard-avail-toggle.is-off:hover { background: #E5E7EB; color: #374151; }

.mcard-avail-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(194, 160, 106, 0.28);
}
.mcard-avail-toggle:active { transform: scale(0.97); }

/* Unavailable card → dim/grey the food image so it reads as "hidden" */
.menu-mcard-off .menu-item-img {
    opacity: 0.6;
    filter: grayscale(0.7);
}
.menu-mcard-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    align-items: stretch;
}
.menu-mcard-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 42px;
    border-radius: 10px;
    font-size: 14px;
    padding: 0 10px;
    box-sizing: border-box;
}
/* Edit takes the remaining width; the eye + delete are equal squares so the
   three controls read as one balanced group instead of a lopsided row. */
.mcard-btn-edit {
    flex: 1 1 auto;
    min-width: 0;
    background: #EFF1F4;
    color: #1F2937;
    font-weight: 700;
}
.mcard-btn-edit:hover {
    background: var(--primary);
    color: #fff;
}
.mcard-eye,
.mcard-btn-del {
    flex: 0 0 42px;
    width: 42px;
    padding: 0;
    font-size: 15px;
}
.mcard-btn-del {
    background: #C42B1C;
    color: #fff;
}
.mcard-btn-del:hover {
    background: #A52315;
    color: #fff;
}
/* Compact eye-icon availability toggle for full-access roles — sits in the
   action row beside Edit/Delete. State is shown by the eye/eye-slash + colour. */
.mcard-eye {
    border: 1px solid transparent;
    cursor: pointer;
}
.mcard-eye.is-on { background: #F3E9D7; color: #6F4E37; border-color: #F3E9D7; }
.mcard-eye.is-on:hover { background: #F3E9D7; }
.mcard-eye.is-off { background: #F1F3F5; color: #4B5563; border-color: #E5E7EB; }
.mcard-eye.is-off:hover { background: #E5E7EB; color: #374151; }
/* Don't lift the whole manage card on hover (only the photo is interactive) */
.menu-mcard:hover {
    transform: none;
    border-color: #E4E6EA;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* POS Order Section */
.pos-order-section {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Column wrappers for the order panel. Transparent by default (display:contents)
   so the desktop/portrait POS keeps its original single-column flow untouched —
   they only become real side-by-side columns in the phone-LANDSCAPE order sheet
   (see the landscape block further down). */
.pos-order-left,
.pos-order-right { display: contents; }

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.order-type-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.order-type-selector label {
    flex: 1;
    cursor: pointer;
}

.order-type-selector input[type="radio"] {
    display: none;
}

.order-type-selector span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 4px;
    background: var(--light-bg);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.order-type-selector span i {
    font-size: 12px;
}

.order-type-selector input[type="radio"]:checked + span {
    background: var(--primary);
    color: var(--white);
}

.order-options {
    margin-bottom: 8px;
}

.order-options input,
.order-options select,
.order-options textarea {
    margin-bottom: 8px;
}

.order-options label {
    font-size: 13px;
}

/* Floor-plan table picker button */
.table-picker-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: #f7f7f7;
    border: 2px solid #e1e8ed;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.table-picker-btn:hover {
    border-color: var(--primary);
    background: #fff;
}

.table-picker-btn i.fa-chair {
    color: var(--primary);
    margin-right: 6px;
}

.order-items {
    flex: 1 1 auto;
    min-height: 60px;
    overflow-y: auto;
    margin-bottom: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
}

/* Keep the summary, payment row and Place Order button pinned (never clipped).
   The button can sit directly under .pos-order-section (desktop) or inside the
   .pos-order-right wrapper (which is display:contents, so it still lays out as a
   direct flex child) — cover both. */
.order-summary,
.order-pay-row,
.pos-order-section > .btn,
.pos-order-right > .btn {
    flex-shrink: 0;
}

.empty-order {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    color: var(--text-light);
    margin: auto;   /* center vertically + horizontally in the order container */
}

.empty-order i {
    font-size: 22px;
    margin-bottom: 4px;
    opacity: 0.5;
}

.order-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: var(--light-bg);
    border-radius: 6px;
    margin-bottom: 10px;
}

.order-item-info {
    flex: 1;
}

.order-item-name {
    font-weight: 600;
    margin-bottom: 4px;
}

.order-item-price {
    color: var(--text-light);
    font-size: 12px;
}

.order-item-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qty-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: var(--primary);
    color: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qty-display {
    min-width: 30px;
    text-align: center;
    font-weight: 600;
}

.order-summary {
    padding: 9px 12px;
    background: var(--light-bg);
    border-radius: 8px;
    margin-bottom: 8px;
}

/* Paid / Unpaid segmented toggle */
.order-pay-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.order-pay-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
}

.order-pay-label i {
    color: var(--primary);
    margin-right: 4px;
}

.pay-segment {
    display: inline-flex;
    background: #e4e4e4;
    border-radius: 7px;
    padding: 2px;
    gap: 2px;
}

.pay-seg-btn {
    border: none;
    background: transparent;
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 11.5px;
    font-weight: 600;
    color: #6c757d;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s ease;
}

.pay-seg-btn#payUnpaidBtn.active {
    background: #EF4444;
    color: #fff;
}

.pay-seg-btn#payPaidBtn.active {
    background: #22C55E;
    color: #fff;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 12.5px;
}

.summary-row.total {
    padding-top: 9px;
    border-top: 2px solid var(--border-color);
    font-size: 15px;
    font-weight: 700;
    color: var(--primary);
}

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

.table-card {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.table-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.table-card.free {
    border-color: var(--success);
}

.table-card.occupied {
    border-color: var(--danger);
}

.table-card.reserved {
    border-color: var(--warning);
}

.table-icon {
    font-size: 48px;
    margin-bottom: 10px;
}

.table-number {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.table-capacity {
    color: var(--text-light);
    font-size: 13px;
    margin-bottom: 10px;
}

.table-status {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

/* Kitchen Tickets */
.kitchen-tickets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.kitchen-ticket {
    background: var(--white);
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid #ECEEF1;
    border-left: 5px solid var(--primary);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.kitchen-ticket:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); }

/* Status accent on the rail + badge — scannable at a glance */
.kitchen-ticket.new     { border-left-color: #F59E0B; }
.kitchen-ticket.cooking { border-left-color: #6F4E37; }

.ticket-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}
.ticket-head-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Ang queue number sa kitchen ticket. Siya ang tinatawag sa counter, kaya
   siya ang TANGING numero sa header kapag meron siya — pinapalitan niya ang
   panloob na `#id`, hindi sinasamahan. Iyon lang ang kailangang basahin. */
.ticket-qno {
    font-family: 'Courier New', Consolas, monospace;
    font-weight: 800;
    font-size: 21px;
    line-height: 1;
    background: var(--primary);
    color: #fff;
    border-radius: 7px;
    padding: 5px 10px;
    letter-spacing: .02em;
    white-space: nowrap;
}
.ticket-id {
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.5px;
    color: var(--text-dark);
}
/* (Walang `.ticket-qno + .ticket-id` na patakaran — hindi na sila magkatabi
   kailanman. Isa lang ang lumalabas sa ticket.) */
.ticket-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 3px 9px;
    border-radius: 999px;
}
.kitchen-ticket.new .ticket-status-badge     { background: #FEF3C7; color: #b45309; }
.kitchen-ticket.cooking .ticket-status-badge { background: #F3E9D7; color: #6F4E37; }

.ticket-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    background: #F3F4F6;
    padding: 4px 12px;
    border-radius: 999px;
    white-space: nowrap;
}
.ticket-type i { color: #9ca3af; font-size: 12px; }

.ticket-customer {
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 4px;
}
.ticket-customer i { margin-right: 5px; color: #9ca3af; font-size: 12px; }

.ticket-time {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 12px;
}
.ticket-time i { margin-right: 4px; }

.ticket-items {
    border-top: 1px solid #EEF0F3;
    padding-top: 10px;
    margin-bottom: 14px;
}
.ticket-line {
    padding: 7px 0;
    border-bottom: 1px dashed #E5E7EB;
}
.ticket-line:last-child { border-bottom: none; }
.ticket-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--text-dark);
}
.ticket-qty {
    flex: none;
    min-width: 30px;
    font-weight: 800;
    color: #6F4E37;
}

.ticket-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}
.ticket-actions .ticket-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 700;
}

/* Reports Cards */
.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.report-card {
    background: var(--white);
    border-radius: 12px;
    padding: 25px;
    box-shadow: var(--shadow);
    text-align: center;
}

.report-card h4 {
    color: var(--text-light);
    font-size: 14px;
    margin-bottom: 10px;
    font-weight: 500;
}

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

/* Settings Form */
.settings-form {
    max-width: 600px;
    background: var(--white);
    border-radius: 12px;
    padding: 30px;
    box-shadow: var(--shadow);
}

/* Modals */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
}

.modal-overlay.active {
    display: block;
}

.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    z-index: 9999;
}

.modal.active {
    display: block;
    animation: modalSlideIn 0.3s ease;
}

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

.modal-header h3 {
    font-size: 18px;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--text-light);
    cursor: pointer;
    line-height: 1;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(90vh - 80px);
}

/* Large Modal */
.modal-large {
    max-width: 900px;
}

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

.calc-row.total {
    border-top: 2px solid var(--border-color);
    padding-top: 15px;
    margin-top: 5px;
}

.calc-row.total strong {
    font-size: 18px;
    color: var(--primary);
}

.calc-row.highlight {
    background: var(--primary);
    color: var(--white);
}

.calc-row.highlight span,
.calc-row.highlight strong {
    color: var(--white);
}

.calc-row.highlight strong {
    font-size: 20px;
}

.costing-detail-card {
    background: var(--white);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.costing-detail-card h4 {
    margin-bottom: 15px;
    font-size: 16px;
    color: var(--text-dark);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 10px;
}

.detail-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.detail-info-item {
    padding: 10px;
    background: var(--light-bg);
    border-radius: 6px;
}

.detail-info-item label {
    font-size: 12px;
    color: var(--text-light);
    display: block;
    margin-bottom: 5px;
}

.detail-info-item .value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
}

.batch-history {
    margin-top: 20px;
}

.batch-history-item {
    padding: 15px;
    background: var(--light-bg);
    border-left: 4px solid var(--success);
    border-radius: 4px;
    margin-bottom: 10px;
}

.batch-history-item .date {
    font-weight: 600;
    color: var(--text-dark);
}

.batch-history-item .details {
    color: var(--text-light);
    font-size: 13px;
    margin-top: 5px;
}

.cost-warning {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: #fef3c7;
    color: #b45309;
    border-radius: 4px;
    font-size: 12px;
}

.cost-info-badge {
    display: inline-block;
    padding: 6px 12px;
    background: var(--secondary-color);
    color: var(--white);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    margin-left: 10px;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -48%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .pos-container {
        grid-template-columns: 1fr;
    }

    .pos-order-section {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-height: 50vh;
        border-radius: 12px 12px 0 0;
        z-index: 100;
    }

    .pos-menu-section {
        padding-bottom: 52vh;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        bottom: 0;
        z-index: 1001;
    }

    .sidebar.active {
        transform: translateX(280px);
    }

    .sidebar-backdrop.active {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1000;
        animation: fadeIn 0.2s ease;
    }

    .menu-toggle {
        display: block;
    }

    .module-title {
        font-size: 18px;
    }

    .summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .top-bar {
        padding: 0 15px;
    }

    .content-container {
        padding: 15px;
    }

    .user-info span:not(.topbar-avatar) {
        display: none;
    }

    .current-time {
        display: none;
    }

    .tables-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .kitchen-tickets {
        grid-template-columns: 1fr;
    }

    .menu-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
}

@media (max-width: 480px) {
    .summary-cards {
        grid-template-columns: 1fr;
    }

    .order-type-selector {
        flex-direction: column;
    }

    .filter-controls {
        flex-direction: column;
    }

    .module-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
}

/* Touch Targets */
@media (pointer: coarse) {
    .btn-sm {
        min-height: 40px;
        padding: 8px 14px;
    }

    .hub-tab {
        min-height: 40px;
    }
}

/* Print Styles */
@media print {
    .sidebar,
    .top-bar,
    .module-header,
    .hub-tabs,
    .btn,
    .menu-toggle,
    .modal-overlay,
    .toast-container {
        display: none !important;
    }

    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
    }

    .content-container {
        padding: 0;
        background: #fff !important;
    }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #c2c7cd;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: #6F4E37;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Dark areas (sidebar) get a lighter, theme-matched thumb */
.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border: 2px solid transparent;
    background-clip: padding-box;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: #6F4E37;
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: #c2c7cd transparent;
}

/* ===========================
   FULL PRODUCT RANKING STYLES
   =========================== */

/* Extra Large Modal */
.modal-xl {
    width: 95%;
    max-width: 1200px;
    max-height: 90vh;
    overflow-y: auto;
}

/* Ranking Filters */
.ranking-filters {
    background: var(--light-bg);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}

.filter-row:last-child {
    margin-bottom: 0;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 150px;
}

.filter-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
}

.filter-group .form-control {
    font-size: 14px;
}

/* Ranking Summary Cards */
.ranking-summary-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.ranking-summary-card {
    background: var(--white);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--border-color);
}

.ranking-summary-card .summary-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.ranking-summary-card .summary-content {
    flex: 1;
}

.ranking-summary-card .summary-label {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 4px;
}

.ranking-summary-card .summary-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
}

/* Ranking Table */
.ranking-table-container {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 20px;
}

.ranking-table th,
.ranking-table td {
    padding: 12px 15px;
    vertical-align: middle;
}

/* Rank Badges */
.rank-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 13px;
    background: var(--light-bg);
    color: var(--text-dark);
}

.rank-badge.rank-gold {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #7a5c00;
}

.rank-badge.rank-silver {
    background: linear-gradient(135deg, #C0C0C0, #A8A8A8);
    color: #4a4a4a;
}

.rank-badge.rank-bronze {
    background: linear-gradient(135deg, #CD7F32, #B8860B);
    color: #4a3000;
}

/* Row Highlighting for Top 3 */
.rank-gold-row {
    background: rgba(255, 215, 0, 0.08) !important;
}

.rank-silver-row {
    background: rgba(192, 192, 192, 0.08) !important;
}

.rank-bronze-row {
    background: rgba(205, 127, 50, 0.08) !important;
}

/* Contribution Bar */
.contribution-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.contribution-bar-container {
    flex: 1;
    height: 8px;
    background: var(--light-bg);
    border-radius: 4px;
    overflow: hidden;
    min-width: 60px;
}

.contribution-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #573C2A);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.contribution-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
    min-width: 45px;
    text-align: right;
}

/* Ranking Chart Section */
.ranking-chart-section {
    background: var(--white);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
}

.ranking-chart-section h4 {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.ranking-chart-section h4 i {
    color: var(--primary);
}

.ranking-chart-container {
    max-width: 350px;
    margin: 0 auto;
}

/* Inventory Alerts Section */
.inventory-alerts-section {
    background: var(--white);
    border-radius: 10px;
    padding: 20px;
    border: 1px solid var(--border-color);
}

.inventory-alerts-section h4 {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.inventory-alerts-section h4 i {
    color: var(--warning);
}

.alerts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.alerts-list .alert-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 14px;
}

.alerts-list .alert-item.warning {
    background: rgba(249, 202, 36, 0.1);
    border-left: 3px solid var(--warning);
}

.alerts-list .alert-item.critical {
    background: rgba(220, 38, 38, 0.1);
    border-left: 3px solid var(--error);
}

.alerts-list .alert-item.success {
    background: rgba(22, 163, 74, 0.1);
    border-left: 3px solid var(--success);
}

.alerts-list .alert-item i {
    font-size: 16px;
    margin-top: 2px;
}

.alerts-list .alert-item.warning i {
    color: var(--warning);
}

.alerts-list .alert-item.critical i {
    color: var(--danger);
}

.alerts-list .alert-item.success i {
    color: var(--success);
}

.alert-content {
    flex: 1;
}

.alert-detail {
    display: block;
    font-size: 12px;
    color: var(--text-light);
    margin-top: 4px;
}

/* Quick Insights Container */
.insights-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.insight-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: var(--light-bg);
    border-radius: 10px;
}

.insight-icon {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
}

.insight-content {
    flex: 1;
}

.insight-label {
    font-size: 11px;
    color: var(--text-light);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 2px;
}

.insight-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
}

.insight-detail {
    font-size: 12px;
    color: var(--text-light);
    margin-top: 2px;
}

/* Responsive Styles for Product Ranking */
@media (max-width: 1024px) {
    .ranking-summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .modal-xl {
        width: 98%;
        max-height: 95vh;
    }

    .ranking-summary-cards {
        grid-template-columns: 1fr;
    }

    .filter-row {
        flex-direction: column;
    }

    .filter-group {
        width: 100%;
    }

    .ranking-table-container {
        max-height: 300px;
    }

    .contribution-bar-container {
        display: none;
    }

    .contribution-value {
        min-width: auto;
    }
}

@media (max-width: 480px) {
    .ranking-filters {
        padding: 15px;
    }

    .ranking-summary-card {
        padding: 12px;
    }

    .ranking-summary-card .summary-icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .ranking-summary-card .summary-value {
        font-size: 14px;
    }

    .rank-badge {
        padding: 4px 8px;
        font-size: 11px;
    }
}

/* ===========================
   NAVIGATION CATEGORIES
   =========================== */

.nav-category {
    padding: 12px 20px 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.5px;
    margin-top: 10px;
}

.nav-category:first-child {
    margin-top: 0;
}

/* ===========================
   AI INSIGHTS MODULE
   =========================== */

.ai-insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
}

.ai-card {
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ai-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.ai-card-header {
    background: linear-gradient(135deg, var(--primary), #573C2A);
    color: var(--white);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ai-card-header i {
    font-size: 20px;
}

.ai-card-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.ai-card-body {
    padding: 20px;
    min-height: 120px;
}

.ai-loading {
    color: var(--text-light);
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-loading::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.ai-insight-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

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

.ai-insight-item .insight-title {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 5px;
}

.ai-insight-item .insight-text {
    font-size: 13px;
    color: var(--text-light);
}

.ai-recommendation {
    background: linear-gradient(135deg, rgba(194, 160, 106, 0.1), rgba(194, 160, 106, 0.05));
    border-left: 3px solid var(--secondary-color);
    padding: 12px 15px;
    border-radius: 0 8px 8px 0;
    margin-top: 10px;
}

.ai-recommendation strong {
    color: var(--secondary-color);
}

/* ===========================
   AI INSIGHTS MODULE
   =========================== */

.ai-insights-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

/* Summary Cards Row */
.insights-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.insights-summary .summary-card {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.summary-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.summary-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.summary-card-icon.green {
    background: rgba(194, 160, 106, 0.15);
    color: #C2A06A;
}

.summary-card-icon.blue {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.summary-card-icon.orange {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

.summary-card-icon.purple {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}

.summary-card-icon.red {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.summary-card-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-dark);
}

.summary-card-change {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 500;
}

.summary-card-change.positive {
    color: #22c55e;
}

.summary-card-change.negative {
    color: #ef4444;
}

/* Insights Grid */
.insights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.insight-card {
    background: var(--white);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--shadow);
    border-left: 4px solid var(--primary);
    transition: all 0.3s ease;
}

.insight-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.insight-card.warning {
    border-left-color: #f97316;
}

.insight-card.danger {
    border-left-color: #ef4444;
}

.insight-card.success {
    border-left-color: #22c55e;
}

.insight-card.info {
    border-left-color: #3b82f6;
}

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

.insight-card-type {
    display: flex;
    align-items: center;
    gap: 8px;
}

.insight-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: rgba(194, 160, 106, 0.12);
    color: var(--primary);
}

.insight-card.warning .insight-icon {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.insight-card.danger .insight-icon {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.insight-card.success .insight-icon {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.insight-card.info .insight-icon {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.insight-card h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

.insight-card-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.insight-card-badge.high {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.insight-card-badge.medium {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.insight-card-badge.low {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.insight-card p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 16px 0;
}

.insight-card-actions {
    display: flex;
    gap: 10px;
}

.insight-card-actions .btn {
    font-size: 13px;
    padding: 8px 16px;
}

/* Quick Actions Panel */
.insights-actions-panel {
    background: var(--white);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--shadow);
}

.insights-actions-panel h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 15px;
    background: var(--light-bg);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.quick-action-btn:hover {
    background: rgba(194, 160, 106, 0.08);
    border-color: var(--primary);
}

.quick-action-btn i {
    font-size: 24px;
    color: var(--primary);
}

.quick-action-btn span {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-dark);
    text-align: center;
}

/* Performance Metrics */
.performance-section {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

.performance-chart-card {
    background: var(--white);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--shadow);
}

.performance-chart-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 20px 0;
}

.chart-container {
    height: 250px;
    position: relative;
}

/* Top Items List */
.top-items-card {
    background: var(--white);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--shadow);
}

.top-items-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.top-items-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.top-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--light-bg);
    border-radius: 8px;
}

.top-item-rank {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: var(--primary);
    color: white;
}

.top-item-rank.silver {
    background: #9a9a9a;
}

.top-item-rank.bronze {
    background: #F59E0B;
}

.top-item-info {
    flex: 1;
}

.top-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}

.top-item-detail {
    font-size: 12px;
    color: var(--text-muted);
}

.top-item-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
}

/* Alerts Section */
.alerts-section {
    background: var(--white);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--shadow);
}

.alerts-section h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    background: var(--light-bg);
    border-radius: 10px;
    margin-bottom: 12px;
    border-left: 3px solid transparent;
}

.alert-item:last-child {
    margin-bottom: 0;
}

.alert-item.critical {
    border-left-color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

.alert-item.warning {
    border-left-color: #f97316;
    background: rgba(249, 115, 22, 0.05);
}

.alert-item.info {
    border-left-color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.alert-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.alert-item.critical .alert-icon {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.alert-item.warning .alert-icon {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

.alert-item.info .alert-icon {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.alert-content {
    flex: 1;
}

.alert-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.alert-message {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

.alert-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 6px;
}

.alert-action {
    flex-shrink: 0;
}

/* AI Insights Responsive */
@media (max-width: 1200px) {
    .insights-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .performance-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .insights-summary {
        grid-template-columns: 1fr;
    }

    .insights-grid {
        grid-template-columns: 1fr;
    }

    .quick-actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===========================
   AI CHATBOT MODULE
   =========================== */

.chatbot-container {
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow);
    height: calc(100vh - 220px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.chat-message {
    display: flex;
    gap: 12px;
    max-width: 80%;
}

.chat-message.bot {
    align-self: flex-start;
}

.chat-message.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.chat-message.bot .message-avatar {
    background: linear-gradient(135deg, var(--primary), #573C2A);
    color: white;
}

.chat-message.user .message-avatar {
    background: var(--secondary-color);
    color: white;
}

.message-content {
    background: var(--light-bg);
    padding: 15px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
}

.chat-message.user .message-content {
    background: var(--primary);
    color: white;
}

.message-content ul {
    margin: 10px 0;
    padding-left: 20px;
}

.message-content li {
    margin: 5px 0;
}

.chat-quick-actions {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    flex-wrap: wrap;
    border-top: 1px solid var(--border-color);
    background: var(--light-bg);
}

.quick-action-btn {
    padding: 8px 14px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-color);
}

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

.quick-action-btn i {
    font-size: 0.9rem;
}

.chat-input-container {
    display: flex;
    gap: 10px;
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--light-bg);
}

.chat-input-container .form-control,
.chat-input-container .chat-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 25px;
    font-size: 14px;
}

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

.chat-input-container .btn {
    border-radius: 50%;
    width: 45px;
    height: 45px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-suggestions {
    display: flex;
    gap: 10px;
    padding: 10px 20px 15px;
    flex-wrap: wrap;
    border-top: 1px solid var(--border-color);
    background: var(--white);
}

.chat-suggestions button {
    padding: 8px 16px;
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.chat-suggestions button:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* ===========================
   AI ANALYTICS - NEW STYLES
   =========================== */

.ai-analytics-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Comparison Banner */
.comparison-banner {
    background: linear-gradient(135deg, var(--primary), #573C2A);
    color: white;
    border-radius: 12px;
    padding: 24px;
}

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

.comparison-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

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

.comparison-metrics {
    display: flex;
    gap: 40px;
}

.comparison-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.comparison-label {
    font-size: 13px;
    opacity: 0.9;
}

.comparison-value {
    font-size: 24px;
    font-weight: 700;
}

.comparison-item.positive .comparison-value {
    color: #90EE90;
}

.comparison-item.negative .comparison-value {
    color: #FFB4B4;
}

/* AI KPI Grid */
.ai-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.ai-metric-card {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow);
}

.metric-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
}

.metric-icon.green { background: linear-gradient(135deg, #6F4E37, #C2A06A); }
.metric-icon.blue { background: linear-gradient(135deg, #3b82f6, #573C2A); }
.metric-icon.purple { background: linear-gradient(135deg, #9b59b6, #8e44ad); }
.metric-icon.orange { background: linear-gradient(135deg, #F59E0B, #d35400); }
.metric-icon.red { background: linear-gradient(135deg, #EF4444, #b91c1c); }

.metric-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metric-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
}

.metric-label {
    font-size: 13px;
    color: var(--text-light);
}

/* Date Range Picker */
.date-range-picker {
    background: var(--white);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}

.preset-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.preset-btn {
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    background: var(--white);
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-color);
}

.preset-btn:hover {
    background: var(--light-bg);
    border-color: var(--primary-color);
}

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

.custom-date-range {
    display: none;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}

.custom-date-range.visible {
    display: block;
}

.date-inputs {
    display: flex;
    gap: 16px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.date-input-group {
    flex: 1;
    min-width: 140px;
}

.date-input-group label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.date-input-group input[type="date"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
}

/* Ratio Cards */
.ai-ratio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.ratio-card {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow);
}

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

.ratio-title {
    font-weight: 600;
    color: var(--text-dark);
}

.ratio-target {
    font-size: 12px;
    color: var(--text-light);
}

.ratio-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 12px;
}

.ratio-value.warning {
    color: #EF4444;
}

.ratio-bar {
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
}

.ratio-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* AI Alerts Section */
/* Goal Tracking Section */
.ai-goals-section {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}

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

.goals-header h3 {
    margin: 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.goals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.goal-card {
    background: var(--light-bg);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    gap: 12px;
    border-left: 4px solid var(--border-color);
}

.goal-card.achieved {
    border-left-color: #16a34a;
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.05), var(--light-bg));
}

.goal-card.on-track {
    border-left-color: #3b82f6;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.05), var(--light-bg));
}

.goal-card.behind {
    border-left-color: #EF4444;
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.05), var(--light-bg));
}

.goal-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    color: var(--primary-color);
    font-size: 18px;
}

.goal-card.achieved .goal-icon {
    color: #16a34a;
}

.goal-card.behind .goal-icon {
    color: #EF4444;
}

.goal-content {
    flex: 1;
}

.goal-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.goal-values {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.goal-current {
    color: var(--text-color);
}

.goal-separator {
    color: var(--text-muted);
    margin: 0 4px;
}

.goal-target {
    color: var(--text-muted);
}

.goal-progress-bar {
    height: 6px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.goal-progress-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.goal-card.achieved .goal-progress-fill {
    background: #16a34a;
}

.goal-card.behind .goal-progress-fill {
    background: #EF4444;
}

.goal-status {
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.goal-card.achieved .goal-status {
    color: #16a34a;
}

.goal-card.on-track .goal-status {
    color: #3b82f6;
}

.goal-card.behind .goal-status {
    color: #EF4444;
}

.ai-alerts-section {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow);
}

.ai-alerts-section h3 {
    margin: 0 0 16px 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.alerts-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.alert-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}

.alert-item:hover {
    transform: translateX(4px);
}

.alert-item.warning {
    background: #fef3c7;
    color: #b45309;
}

.alert-item.danger {
    background: #fee2e2;
    color: #b91c1c;
}

.alert-item.info {
    background: #d1ecf1;
    color: #0c5460;
}

.alert-item.success {
    background: #F3E9D7;
    color: var(--primary);
}

.alert-item i:first-child {
    font-size: 16px;
}

.alert-item span {
    flex: 1;
}

.alert-item i:last-child {
    opacity: 0.5;
}

.days-remaining {
    font-size: 12px;
    font-weight: 600;
    background: rgba(0,0,0,0.1);
    padding: 4px 8px;
    border-radius: 4px;
}

.no-alerts {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px;
    color: var(--primary);
    font-weight: 500;
}

/* AI Chart Section */
.ai-chart-section {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow);
}

.ai-chart-section h3 {
    margin: 0 0 16px 0;
    font-size: 16px;
}

.ai-chart-section.half {
    flex: 1;
}

.ai-charts-row {
    display: flex;
    gap: 16px;
}

/* AI Table Section */
.ai-table-section {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow);
}

.ai-table-section h3 {
    margin: 0 0 16px 0;
    font-size: 16px;
}

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

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

.analytics-table th {
    background: var(--light-bg);
    font-weight: 600;
    color: var(--text-dark);
    font-size: 13px;
}

.analytics-table td {
    font-size: 14px;
}

.analytics-table tr:hover {
    background: #f7f7f7;
}

/* Badges */
.confidence-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.confidence-badge.high {
    background: #F3E9D7;
    color: var(--primary);
}

.confidence-badge.medium {
    background: #fef3c7;
    color: #b45309;
}

.confidence-badge.low {
    background: #fee2e2;
    color: #b91c1c;
}

.cost-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.cost-badge.normal {
    background: #F3E9D7;
    color: var(--primary);
}

.cost-badge.high {
    background: #fee2e2;
    color: #b91c1c;
}

.status-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.status-badge.ok {
    background: #F3E9D7;
    color: var(--primary);
}

.status-badge.warning {
    background: #fef3c7;
    color: #b45309;
}

.status-badge.critical {
    background: #fee2e2;
    color: #b91c1c;
}

.tier-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.tier-badge.platinum {
    background: #ffeeba;
    color: #b45309;
}

.tier-badge.vip {
    background: #e2d4f0;
    color: #5a2d82;
}

.tier-badge.regular {
    background: #F3E9D7;
    color: var(--primary);
}

.rank-badge {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

.rank-badge.rank-1 {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: white;
}

.rank-badge.rank-2 {
    background: linear-gradient(135deg, #C0C0C0, #A9A9A9);
    color: white;
}

.rank-badge.rank-3 {
    background: linear-gradient(135deg, #CD7F32, #B87333);
    color: white;
}

/* Recommendations Section */
.ai-recommendations-section {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow);
}

.ai-recommendations-section h3 {
    margin: 0 0 16px 0;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.recommendation-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.recommendation-card {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: var(--light-bg);
    border-radius: 10px;
    border-left: 4px solid var(--primary);
}

.rec-icon {
    width: 45px;
    height: 45px;
    background: var(--primary);
    color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.rec-content h4 {
    margin: 0 0 6px 0;
    font-size: 15px;
    color: var(--text-dark);
}

.rec-content p {
    margin: 0;
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.5;
}

/* Shift Comparison */
.shift-comparison {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.shift-card {
    background: var(--light-bg);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

.shift-header {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 12px;
}

.shift-metric {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 4px;
}

.shift-label {
    font-size: 12px;
    color: var(--text-light);
}

/* Menu Engineering Matrix */
.menu-matrix-container {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow);
}

.matrix-header {
    margin-bottom: 16px;
}

.matrix-header h4 {
    margin: 0 0 4px 0;
    font-size: 16px;
}

.matrix-header p {
    margin: 0;
    font-size: 13px;
    color: var(--text-light);
}

.menu-matrix {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.matrix-quadrant {
    border-radius: 10px;
    padding: 16px;
    min-height: 150px;
}

.matrix-quadrant.winners {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    border: 2px solid #4caf50;
}

.matrix-quadrant.workhorses {
    background: linear-gradient(135deg, #dbeafe, #bbdefb);
    border: 2px solid #2196f3;
}

.matrix-quadrant.opportunities {
    background: linear-gradient(135deg, #fff8e1, #ffecb3);
    border: 2px solid #F59E0B;
}

.matrix-quadrant.underperformers {
    background: linear-gradient(135deg, #fce4ec, #f8bbd9);
    border: 2px solid #e91e63;
}

.quadrant-header {
    margin-bottom: 12px;
}

.quadrant-title {
    font-size: 16px;
    font-weight: 700;
    display: block;
}

.quadrant-desc {
    font-size: 11px;
    opacity: 0.8;
}

.quadrant-items {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.matrix-item {
    background: rgba(255,255,255,0.7);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.no-items {
    font-size: 12px;
    opacity: 0.6;
    font-style: italic;
}

/* Scenario Selector */
.scenario-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.scenario-btn {
    padding: 10px 20px;
    border: 2px solid var(--border-color);
    background: var(--white);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

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

.scenario-btn:hover:not(.active) {
    border-color: var(--primary);
    color: var(--primary);
}

.positive { color: #16a34a; }
.negative { color: #dc3545; }

/* Reports */
.report-controls {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}

.date-range-picker {
    display: flex;
    align-items: center;
    gap: 12px;
}

.date-range-picker label {
    font-weight: 600;
}

.date-range-picker input[type="date"] {
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
}

.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.report-card {
    background: var(--white);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid transparent;
}

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

.report-icon {
    width: 50px;
    height: 50px;
    background: var(--light-bg);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
    font-size: 22px;
    color: var(--primary);
}

.report-card h4 {
    margin: 0 0 8px 0;
    font-size: 15px;
}

.report-card p {
    margin: 0;
    font-size: 12px;
    color: var(--text-light);
}

.report-preview {
    background: var(--white);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--shadow);
    min-height: 300px;
}

.preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 250px;
    color: var(--text-light);
}

.preview-placeholder i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.report-content h3 {
    margin: 0 0 8px 0;
    font-size: 20px;
}

/* Report Card Highlight */
.report-card.highlight {
    background: linear-gradient(135deg, var(--primary-color), #3E2A1C);
    color: var(--white);
}

.report-card.highlight .report-icon {
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
}

.report-card.highlight h4,
.report-card.highlight p {
    color: var(--white);
}

.report-card.highlight p {
    opacity: 0.8;
}

/* Comparison Section */
.comparison-section {
    background: var(--white);
    border-radius: 12px;
    padding: 24px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}

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

.comparison-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.comparison-controls {
    margin-bottom: 20px;
}

.comparison-preset-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.comparison-preset {
    padding: 10px 18px;
    border: 1px solid var(--border-color);
    background: var(--white);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
}

.comparison-preset:hover {
    background: var(--light-bg);
    border-color: var(--primary-color);
}

.comparison-preset.active {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

.comparison-title h4 {
    margin: 0 0 16px 0;
    color: var(--text-muted);
    font-weight: 500;
}

.comparison-table {
    margin-bottom: 20px;
}

.comparison-table .analytics-table td.positive {
    color: #16a34a;
}

.comparison-table .analytics-table td.negative {
    color: #EF4444;
}

.change-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.change-badge.up {
    background: rgba(39, 174, 96, 0.1);
    color: #16a34a;
}

.change-badge.down {
    background: rgba(231, 76, 60, 0.1);
    color: #EF4444;
}

.comparison-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.comparison-summary .summary-card {
    background: var(--light-bg);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    border-left: 4px solid var(--border-color);
}

.comparison-summary .summary-card.positive {
    border-left-color: #16a34a;
}

.comparison-summary .summary-card.negative {
    border-left-color: #EF4444;
}

.comparison-summary .summary-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.comparison-summary .summary-value {
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.comparison-summary .summary-card.positive .summary-value {
    color: #16a34a;
}

.comparison-summary .summary-card.negative .summary-value {
    color: #EF4444;
}

@media (max-width: 768px) {
    .comparison-summary {
        grid-template-columns: 1fr;
    }

    .comparison-preset-buttons {
        flex-direction: column;
    }
}

.report-period {
    color: var(--text-light);
    margin-bottom: 20px;
}

.report-summary {
    display: flex;
    gap: 30px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.summary-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.summary-item .label {
    font-size: 13px;
    color: var(--text-light);
}

.summary-item .value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
}

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

.report-table th,
.report-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.report-table th {
    background: var(--light-bg);
    font-weight: 600;
    font-size: 13px;
}

.export-buttons {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    justify-content: flex-end;
}

.section-header {
    margin-bottom: 4px;
}

.section-header h3 {
    margin: 0;
    font-size: 20px;
}

.section-subtitle {
    font-size: 14px;
    color: var(--text-light);
}

/* Responsive */
@media (max-width: 1200px) {
    .ai-charts-row {
        flex-direction: column;
    }

    .shift-comparison {
        grid-template-columns: 1fr;
    }

    .menu-matrix {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .ai-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .comparison-metrics {
        flex-direction: column;
        gap: 16px;
    }

    .report-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .report-summary {
        flex-wrap: wrap;
    }
}

/* ===========================
   CUSTOMERS MODULE
   =========================== */

.customer-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.stat-card {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: var(--shadow);
}

.stat-icon {
    width: 55px;
    height: 55px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), #573C2A);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-dark);
}

.stat-label {
    font-size: 13px;
    color: var(--text-light);
}

/* Member Type Badges */
.member-regular {
    background: #dbeafe;
    color: #1565c0;
}

.member-vip {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #7a5c00;
}

.member-platinum {
    background: linear-gradient(135deg, #E5E4E2, #B8B8B8);
    color: #333;
}

/* ===========================
   EMPLOYEES MODULE
   =========================== */

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

.role-badge {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: #eef1f4;   /* neutral default for any custom role */
    color: #4b5563;
    white-space: nowrap;
}

.role-owner { background: #f3e5f5; color: #7b1fa2; }
.role-manager { background: #dbeafe; color: #1565c0; }
.role-chef { background: #fef3c7; color: #e65100; }
.role-cashier { background: #e8f5e9; color: #2e7d32; }
.role-waiter { background: #fce4ec; color: #c2185b; }
.role-server { background: #e0f2f1; color: #00796b; }
.role-bartender { background: #ede7f6; color: #5e35b1; }
.role-host { background: #fff8e1; color: #b28704; }
.role-inventory { background: #f1f8e9; color: #558b2f; }

/* ===========================
   ATTENDANCE MODULE
   =========================== */

.attendance-summary {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.attendance-summary .summary-item {
    background: var(--white);
    padding: 15px 25px;
    border-radius: 10px;
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 12px;
}

.attendance-summary .label {
    color: var(--text-light);
    font-size: 13px;
}

.attendance-summary .value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
}

.clock-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.clock-in { background: #F3E9D7; color: var(--primary); }
.clock-out { background: #fee2e2; color: #b91c1c; }
.clock-late { background: #fef3c7; color: #b45309; }
.clock-off { background: #dbeafe; color: #1d4ed8; }       /* Day off — rest day / leave */
.clock-absent { background: #fee2e2; color: #b91c1c; }    /* Absent — no-show */

/* ===========================
   SCHEDULE MODULE
   =========================== */

.schedule-overview {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 25px;
}

.schedule-card {
    background: var(--white);
    border-radius: 12px;
    padding: 25px;
    box-shadow: var(--shadow);
}

.schedule-card h4 {
    margin: 0 0 20px 0;
    font-size: 18px;
    color: var(--text-dark);
}

.schedule-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.schedule-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: var(--light-bg);
    border-radius: 10px;
    border-left: 4px solid var(--primary);
}

.schedule-item.today {
    background: rgba(194, 160, 106, 0.1);
    border-left-color: var(--success);
}

.schedule-day {
    text-align: center;
    min-width: 60px;
}

.schedule-day .day-name {
    font-size: 12px;
    color: var(--text-light);
    text-transform: uppercase;
}

.schedule-day .day-num {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
}

.schedule-details {
    flex: 1;
}

.schedule-time {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.schedule-area {
    font-size: 13px;
    color: var(--text-light);
}

.schedule-stats {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.stat-item {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: var(--shadow);
}

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

.stat-text {
    font-size: 13px;
    color: var(--text-light);
    margin-top: 5px;
}

/* ===========================
   PAYROLL MODULE
   =========================== */

.payroll-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.payroll-card {
    background: var(--white);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: var(--shadow);
}

.payroll-card h4 {
    font-size: 13px;
    color: var(--text-light);
    margin: 0 0 10px 0;
}

.payroll-card .amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
}

.payroll-card .amount.positive { color: var(--success); }
.payroll-card .amount.negative { color: var(--danger); }

/* ===========================
   EXPENSES MODULE
   =========================== */

.expense-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.expense-card {
    background: var(--white);
    border-radius: 12px;
    padding: 25px;
    box-shadow: var(--shadow);
    text-align: center;
    border-top: 4px solid var(--primary);
}

.expense-card h4 {
    font-size: 14px;
    color: var(--text-light);
    margin: 0 0 10px 0;
}

.expense-card .amount {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-dark);
}

/* ===========================
   CASH DRAWER MODULE
   =========================== */

.drawer-status {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
}

.status-card {
    background: var(--white);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: var(--shadow);
}

.status-card h4 {
    font-size: 13px;
    color: var(--text-light);
    margin: 0 0 10px 0;
}

.status-card .amount {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-dark);
}

.drawer-open { border-left: 4px solid var(--success); }
.drawer-closed { border-left: 4px solid var(--danger); }

.variance-positive { color: var(--success) !important; }
.variance-negative { color: var(--danger) !important; }

/* ===========================
   GIFT CARDS MODULE
   =========================== */

.gift-card-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.gift-card-stats .stat-card {
    text-align: center;
    flex-direction: column;
    gap: 10px;
}

.gift-code {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    letter-spacing: 2px;
    background: var(--light-bg);
    padding: 5px 10px;
    border-radius: 4px;
}

.gift-status-active { background: #F3E9D7; color: var(--primary); }
.gift-status-redeemed { background: #e2e3e5; color: #383d41; }
.gift-status-expired { background: #fee2e2; color: #b91c1c; }

/* ===========================
   CALENDAR MODULE
   =========================== */

.calendar-container {
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--shadow);
    margin-bottom: 20px;
}

.calendar-month {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 15px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.calendar-day-header {
    text-align: center;
    font-weight: 600;
    font-size: 12px;
    color: var(--text-light);
    padding: 10px 5px;
    text-transform: uppercase;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    min-height: 60px;
}

.calendar-day:hover {
    background: var(--light-bg);
}

.calendar-day.today {
    background: var(--primary);
    color: white;
}

.calendar-day.other-month {
    color: var(--text-light);
    opacity: 0.5;
}

.calendar-day .day-number {
    font-weight: 600;
    font-size: 14px;
}

.calendar-day .event-dots {
    display: flex;
    gap: 3px;
    margin-top: 5px;
}

.event-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.event-dot.reservation { background: var(--primary); }
.event-dot.shift { background: var(--secondary-color); }
.event-dot.event { background: var(--accent-color); }

.calendar-legend {
    display: flex;
    gap: 20px;
    justify-content: center;
    padding: 15px;
    background: var(--white);
    border-radius: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-light);
}

.legend-item .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-item .dot.reservation { background: var(--primary); }
.legend-item .dot.shift { background: var(--secondary-color); }
.legend-item .dot.event { background: var(--accent-color); }

/* ===========================
   ACTIVITY LOGS MODULE
   =========================== */

.activity-log-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    background: var(--white);
    border-radius: 8px;
    margin-bottom: 10px;
    box-shadow: var(--shadow);
}

.log-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.log-icon.order { background: #dbeafe; color: #1565c0; }
.log-icon.inventory { background: #fef3c7; color: #e65100; }
.log-icon.staff { background: #f3e5f5; color: #7b1fa2; }
.log-icon.payment { background: #e8f5e9; color: #2e7d32; }
.log-icon.login { background: #fce4ec; color: #c2185b; }

.log-content {
    flex: 1;
}

.log-action {
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.log-details {
    font-size: 13px;
    color: var(--text-light);
}

.log-meta {
    text-align: right;
    font-size: 12px;
    color: var(--text-light);
}

/* ===========================
   ROLE-BASED ACCESS STYLES
   =========================== */

.role-restricted {
    position: relative;
    opacity: 0.5;
    pointer-events: none;
}

.role-restricted::after {
    content: 'Access Restricted';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}

.role-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--light-bg);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.role-indicator i {
    font-size: 14px;
}

/* ===========================
   RESPONSIVE ADJUSTMENTS
   =========================== */

@media (max-width: 768px) {
    .ai-insights-grid {
        grid-template-columns: 1fr;
    }

    .schedule-overview {
        grid-template-columns: 1fr;
    }

    .chatbot-container {
        height: calc(100vh - 180px);
    }

    .chat-message {
        max-width: 90%;
    }
}

@media (max-width: 480px) {
    .customer-stats,
    .expense-summary,
    .drawer-status,
    .gift-card-stats {
        grid-template-columns: 1fr;
    }

    .attendance-summary {
        flex-direction: column;
    }

    .schedule-stats {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .stat-item {
        flex: 1;
        min-width: 100px;
    }
}

/* ===========================
   HUB PAGES STYLES
   =========================== */

.hub-module {
    background: var(--surface);
    min-height: 100%;
}

.hub-header {
    background: var(--white);
    padding: 24px 30px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
}

.hub-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.hub-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hub-title-icon {
    width: 48px;
    height: 48px;
    background: var(--primary);
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.hub-title h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
}

.hub-subtitle {
    font-size: 14px;
    color: var(--text-light);
    margin: 4px 0 0 0;
}

/* Hub Quick Stats */
.hub-quick-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hub-stat {
    background: var(--surface);
    padding: 12px 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 140px;
}

.hub-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.hub-stat-icon.green { background: rgba(194, 160, 106, 0.1); color: var(--primary); }
.hub-stat-icon.blue { background: rgba(194, 160, 106, 0.1); color: var(--info); }
.hub-stat-icon.orange { background: rgba(217, 119, 6, 0.1); color: var(--warning); }
.hub-stat-icon.red { background: rgba(220, 38, 38, 0.1); color: var(--error); }
.hub-stat-icon.purple { background: rgba(139, 92, 246, 0.1); color: #8B5CF6; }
.hub-stat-icon.teal { background: rgba(194, 160, 106, 0.1); color: var(--secondary); }

.hub-stat-info {
    display: flex;
    flex-direction: column;
}

.hub-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.2;
}

.hub-stat-label {
    font-size: 12px;
    color: var(--text-light);
}

/* Hub Tabs */
.hub-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* Inline feature toggle switch (e.g. Customer Records on/off) */
.feature-switch {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-left: auto;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: #5a5a5f;
    user-select: none;
}
.feature-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.feature-switch .feature-switch-track {
    position: relative;
    width: 40px;
    height: 22px;
    background: #c8ccd2;
    border-radius: 999px;
    transition: background 0.2s ease;
    flex-shrink: 0;
}
.feature-switch .feature-switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
}
.feature-switch input:checked + .feature-switch-track {
    background: var(--primary);
}
.feature-switch input:checked + .feature-switch-track .feature-switch-thumb {
    transform: translateX(18px);
}
.feature-switch .feature-switch-text {
    white-space: nowrap;
}

/* ===========================================================
   MODULES & FEATURES — per-deployment module switches
   =========================================================== */

/* The single hiding channel used by js/config/features.js. It must be
   !important: roles.js gates by writing INLINE style.display and would
   otherwise re-show a switched-off module on its next MutationObserver pass. */
.feature-off {
    display: none !important;
}

/* When the floor plan half is switched off, let its neighbour take the row
   instead of leaving a dead column. */
.dashboard-grid-floor:has(> .floorplan-hero.feature-off) {
    grid-template-columns: minmax(0, 1fr);
}

.features-panel {
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 12px;
    padding: 18px;
}
.features-intro {
    font-size: 13px;
    color: #5c5c5c;
    margin: 0 0 18px;
    line-height: 1.55;
}
.feature-group + .feature-group {
    margin-top: 22px;
}
.feature-group-title {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #8a8a90;
    margin: 0 0 10px;
}
.feature-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 13px 0;
    border-top: 1px solid #f1f1f1;
}
.feature-group-title + .feature-row {
    border-top: none;
    padding-top: 4px;
}
.feature-row.is-child {
    padding-left: 22px;
    border-left: 2px solid #ececf0;
    margin-left: 6px;
}
.feature-row-main {
    flex: 1 1 auto;
    min-width: 0;
}
.feature-row-label {
    font-weight: 600;
    color: #1a1a1a;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.feature-row-desc {
    font-size: 12.5px;
    color: #5c5c5c;
    margin-top: 3px;
    line-height: 1.5;
}
.feature-row-note {
    font-size: 12px;
    margin-top: 5px;
    color: #b45309;
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.feature-lock-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b6b70;
    background: #f2f2f4;
    border-radius: 999px;
    padding: 3px 9px;
}
.feature-row.is-locked .feature-row-label,
.feature-row.is-blocked .feature-row-label {
    color: #6b6b70;
}
/* The switch itself is the .feature-switch component above; these only
   restyle it for the panel's stacked rows. */
.feature-row .feature-switch {
    margin-left: 0;
    flex: 0 0 auto;
    padding-top: 1px;
}
.feature-row.is-locked .feature-switch,
.feature-row.is-blocked .feature-switch {
    cursor: not-allowed;
    opacity: 0.55;
}
.feature-row.is-locked .feature-switch input:checked + .feature-switch-track {
    background: #b9bcc3;
}
.features-core-toggle {
    margin-top: 22px;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.features-core-toggle:hover {
    text-decoration: underline;
}

@media (max-width: 560px) {
    .feature-row {
        flex-direction: row-reverse;
    }
    .feature-row.is-child {
        padding-left: 12px;
    }
}

.hub-tab {
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: var(--text-light);
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.hub-tab:hover {
    background: var(--surface);
    color: var(--text-dark);
}

.hub-tab.active {
    background: var(--primary);
    color: white;
}

.hub-tab i {
    font-size: 14px;
}

/* Hub Content */
.hub-content {
    padding: 0 30px 30px 30px;
}

/* Embedded module styling (when inside hub) */
.hub-content .module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e4e4e4;
}

.hub-content .module-header h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #333;
}

.hub-content .content-container {
    padding: 0;
}

/* Hub responsive */
@media (max-width: 768px) {
    .hub-header {
        padding: 16px 20px;
    }

    .hub-title-row {
        flex-direction: column;
    }

    .hub-quick-stats {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .hub-stat {
        min-width: 120px;
        padding: 10px 14px;
    }

    .hub-stat-value {
        font-size: 18px;
    }

    .hub-tabs {
        overflow-x: auto;
        padding-bottom: 8px;
        flex-wrap: nowrap;
    }

    .hub-tab {
        white-space: nowrap;
        padding: 8px 16px;
    }

    .hub-content {
        padding: 0 20px 20px 20px;
    }

    .hub-title-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .hub-title h1 {
        font-size: 20px;
    }
}

/* ===========================
   PAYMENT PROCESSING MODULE
   =========================== */

.payment-container {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 30px;
    min-height: 400px;
}

.payment-order-summary {
    background: var(--surface);
    border-radius: 12px;
    padding: 20px;
}

.payment-order-summary h4 {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}

#paymentOrderDetails {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 15px;
}

.payment-order-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border);
    font-size: 13px;
}

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

.payment-order-item .item-name {
    color: var(--text-dark);
}

.payment-order-item .item-qty {
    color: var(--text-muted);
    margin-left: 8px;
}

.payment-order-item .item-price {
    font-weight: 500;
    color: var(--text-dark);
}

.payment-totals {
    border-top: 2px solid var(--border);
    padding-top: 15px;
}

.payment-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
}

.payment-row.total {
    border-top: 2px solid var(--primary);
    margin-top: 10px;
    padding-top: 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
}

.payment-methods-section h4 {
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-dark);
}

.payment-method-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.payment-method-btn {
    flex: 1;
    min-width: 100px;
    padding: 15px 10px;
    border: 2px solid var(--border);
    background: var(--white);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.payment-method-btn i {
    font-size: 24px;
    color: var(--text-muted);
}

.payment-method-btn span {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.payment-method-btn:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.payment-method-btn.active {
    border-color: var(--primary);
    background: var(--primary);
}

.payment-method-btn.active i,
.payment-method-btn.active span {
    color: white;
}

.payment-input-section {
    background: var(--surface);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.payment-input-section .form-control-lg {
    font-size: 24px;
    padding: 15px 20px;
    text-align: center;
    font-weight: 600;
}

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

.quick-amount-buttons .btn {
    flex: 1;
    min-width: 80px;
}

.btn-outline {
    background: var(--white);
    border: 2px solid var(--border);
    color: var(--text-dark);
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-outline:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
}

.change-display {
    background: linear-gradient(135deg, var(--primary), #573C2A);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    color: white;
    margin-top: 15px;
}

.change-label {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 5px;
}

.change-amount {
    font-size: 36px;
    font-weight: 700;
}

.change-amount.insufficient {
    color: #ffcdd2;
}

.split-payment-section {
    border-top: 1px solid var(--border);
    padding-top: 20px;
    margin-top: 20px;
}

.split-header {
    margin-bottom: 15px;
}

#splitPaymentDetails {
    background: var(--surface);
    border-radius: 12px;
    padding: 15px;
}

.payment-line {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.payment-line:last-of-type {
    border-bottom: none;
}

.split-summary {
    background: var(--white);
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}

.split-summary .summary-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-weight: 500;
}

.split-summary .summary-row:last-child {
    border-top: 1px solid var(--border);
    padding-top: 10px;
    margin-top: 5px;
    color: var(--primary);
    font-weight: 700;
}

.split-payment-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    background: var(--white);
    border-radius: 8px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
}

.split-payment-item .payment-info {
    flex: 1;
}

.split-payment-item .payment-method-label {
    font-weight: 600;
    color: var(--primary);
    display: block;
    font-size: 14px;
}

.split-payment-item .payment-ref {
    font-size: 12px;
    color: var(--text-muted);
}

.split-payment-item .payment-amount {
    font-weight: 700;
    font-size: 16px;
    color: var(--text-dark);
}

.order-info {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 13px;
}

.order-info strong {
    color: var(--text-dark);
}

.payment-actions {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    margin-top: 20px;
}

.payment-actions .btn-lg {
    padding: 15px 40px;
    font-size: 16px;
}

.gift-card-info {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}

.gift-card-info .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.gift-card-info .info-row strong {
    color: var(--primary);
    font-size: 18px;
}

.input-group {
    display: flex;
    gap: 10px;
}

.input-group .form-control {
    flex: 1;
}

.text-success {
    color: var(--success) !important;
}

.text-danger {
    color: var(--error) !important;
}

/* Payment Modal Responsive */
@media (max-width: 768px) {
    .payment-container {
        grid-template-columns: 1fr;
    }

    .payment-method-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 10px;
    }

    .payment-method-btn {
        min-width: 90px;
        flex: 0 0 auto;
    }

    .payment-input-section .form-control-lg {
        font-size: 20px;
    }

    .change-amount {
        font-size: 28px;
    }

    .payment-actions {
        flex-direction: column;
    }

    .payment-actions .btn {
        width: 100%;
    }
}

/* ===========================
   DISCOUNT SECTION
   =========================== */

.discount-section {
    background: var(--surface);
    border-radius: 10px;
    padding: 15px;
    margin-top: 15px;
    border: 1px dashed var(--border);
}

.discount-section h5 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}

.discount-section h5 i {
    color: var(--primary);
    margin-right: 6px;
}

.discount-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.discount-btn {
    flex: 1;
    min-width: 90px;
    padding: 10px 12px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.discount-btn i {
    font-size: 16px;
    color: var(--primary);
}

.discount-btn:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

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

.discount-btn.active i {
    color: white;
}

.discount-applied-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #16a34a, #2ecc71);
    color: white;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.discount-applied-badge i {
    font-size: 14px;
}

.btn-remove-discount {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    transition: background 0.2s;
}

.btn-remove-discount:hover {
    background: rgba(255,255,255,0.4);
}

/* ===========================
   ORDER NOTES
   =========================== */

.order-notes-section {
    margin-bottom: 10px;
}

.order-notes-section label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.order-notes-section label i {
    color: var(--warning);
    margin-right: 5px;
}

.order-notes-section textarea {
    resize: none;
    font-size: 13px;
    height: 44px;
    min-height: 44px;
    padding: 8px 10px;
}

.ticket-notes {
    background: #fef3c7;
    border-left: 4px solid #ffc107;
    padding: 8px 12px;
    margin-top: 10px;
    border-radius: 4px;
    font-size: 12px;
    color: #b45309;
    font-weight: 500;
}

.ticket-notes i {
    color: #ffc107;
    margin-right: 6px;
}

/* ===========================
   MENU MODIFIERS
   =========================== */

.modal-medium {
    max-width: 500px;
}

.modifier-item-info {
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 20px;
}

.modifier-item-info h4 {
    margin: 0 0 5px 0;
    font-size: 20px;
    color: var(--text-dark);
}

.modifier-item-price {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
}

.modifier-item-price span {
    color: var(--primary);
    font-weight: 600;
}

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

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

.modifier-group-header h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}

.modifier-group-header .required-badge {
    background: var(--error);
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 500;
}

.modifier-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.modifier-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modifier-option:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

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

.modifier-option-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.modifier-option-info input[type="checkbox"],
.modifier-option-info input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.modifier-option.selected input[type="checkbox"],
.modifier-option.selected input[type="radio"] {
    accent-color: white;
}

.modifier-option-name {
    font-weight: 500;
    font-size: 14px;
}

.modifier-option-price {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
}

.modifier-option.selected .modifier-option-price {
    color: rgba(255,255,255,0.9);
}

.modifier-summary {
    background: var(--surface);
    border-radius: 10px;
    padding: 15px;
    margin-top: 20px;
}

.modifier-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
}

.modifier-summary-row.total {
    border-top: 2px solid var(--primary);
    margin-top: 8px;
    padding-top: 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
}

.modifier-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
}

/* Order item modifiers display */
.order-item-modifiers {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    padding-left: 5px;
}

.order-item-modifiers .modifier-tag {
    display: inline-block;
    background: var(--primary-light);
    color: var(--primary);
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 4px;
    margin-top: 2px;
    font-size: 10px;
}

/* Kitchen ticket modifiers */
.ticket-item-modifiers {
    font-size: 11px;
    color: #5c5c5c;
    font-style: italic;
    margin-left: 28px;
    margin-top: 2px;
    padding: 3px 8px;
    background: #fef3c7;
    border-radius: 4px;
    border-left: 2px solid #ffc107;
}

/* Toast notifications */
@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ==========================================
   VOID/REFUND MODULE STYLES
   ========================================== */

.void-order-info {
    background: var(--surface);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
}

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

.void-order-header h4 {
    margin: 0;
    color: var(--text);
    font-size: 18px;
}

.void-order-details {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-muted);
}

.void-order-details span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.section-label {
    display: block;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 10px;
    font-size: 14px;
}

.section-label .required {
    color: #EF4444;
}

.void-type-section {
    margin-bottom: 20px;
}

.void-type-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.void-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    cursor: pointer;
    transition: all 0.2s ease;
}

.void-type-btn:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

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

.void-type-btn i {
    font-size: 24px;
    margin-bottom: 8px;
}

.void-type-btn span {
    font-weight: 600;
    font-size: 14px;
}

.void-type-btn small {
    font-size: 11px;
    opacity: 0.8;
    margin-top: 4px;
}

.void-items-section {
    margin-bottom: 20px;
}

.void-items-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}

.void-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.2s;
}

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

.void-item:hover {
    background: var(--surface);
}

.void-item.selected {
    background: #fee2e2;
}

.void-item-check {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border);
    border-radius: 4px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
}

.void-item.selected .void-item-check {
    background: #EF4444;
    border-color: #EF4444;
}

.void-item-info {
    flex: 1;
}

.void-item-name {
    font-weight: 500;
    color: var(--text);
}

.void-item-qty {
    font-size: 12px;
    color: var(--text-muted);
}

.void-item-price {
    font-weight: 600;
    color: var(--text);
}

.void-reason-section {
    margin-bottom: 20px;
}

.refund-method-section {
    margin-bottom: 20px;
}

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

.refund-method-btn {
    flex: 1;
    padding: 12px;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
    transition: all 0.2s;
}

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

.refund-method-btn.active {
    border-color: #6F4E37;
    background: #6F4E37;
    color: white;
}

.void-summary {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
}

.void-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
}

.void-summary-row:first-child {
    padding-top: 0;
}

.void-summary-row:last-child {
    padding-bottom: 0;
    font-weight: 600;
    font-size: 16px;
    border-top: 1px solid #fecaca;
    padding-top: 10px;
    margin-top: 5px;
}

.refund-highlight {
    color: #C2A06A;
    font-weight: 700;
}

.void-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
}

/* ==========================================
   SPLIT BILL MODULE STYLES
   ========================================== */

.split-order-info {
    background: var(--surface);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
}

.split-order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.split-order-header h4 {
    margin: 0;
    font-size: 18px;
}

.split-order-total {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary);
}

.split-method-section {
    margin-bottom: 20px;
}

.split-method-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.split-method-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    border: 2px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    cursor: pointer;
    transition: all 0.2s ease;
}

.split-method-btn:hover {
    border-color: var(--primary);
    background: var(--primary-light);
}

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

.split-method-btn i {
    font-size: 24px;
    margin-bottom: 8px;
}

.split-method-btn span {
    font-weight: 600;
    font-size: 14px;
}

.split-method-btn small {
    font-size: 11px;
    opacity: 0.8;
    margin-top: 4px;
}

.split-section {
    margin-bottom: 20px;
}

.equal-split-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 15px;
}

.split-qty-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--primary);
    background: white;
    color: var(--primary);
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

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

.split-qty-display {
    font-size: 32px;
    font-weight: bold;
    min-width: 60px;
    text-align: center;
}

.equal-split-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.split-preview-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.split-preview-card-title {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.split-preview-card-amount {
    font-size: 18px;
    font-weight: bold;
    color: var(--primary);
}

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

.bill-group {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
}

.bill-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.bill-group-title {
    font-weight: 600;
    color: var(--text);
}

.bill-group-total {
    font-weight: 600;
    color: var(--primary);
}

.bill-group-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bill-group-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: white;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.bill-group-item-name {
    font-size: 13px;
}

.bill-group-item-price {
    font-weight: 500;
    font-size: 13px;
}

.bill-group-empty {
    text-align: center;
    padding: 20px;
    color: var(--text-muted);
    font-size: 13px;
}

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

.custom-split-line {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.custom-split-line input {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 16px;
}

.custom-split-line .btn-remove {
    padding: 8px 12px;
    background: #fee2e2;
    color: #EF4444;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.custom-split-summary {
    text-align: right;
    padding: 10px;
    background: var(--surface);
    border-radius: 6px;
    margin-top: 10px;
    font-weight: 500;
}

.split-summary {
    background: #e8f4fd;
    border: 1px solid #b3d4fc;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
}

.split-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
}

.split-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
}

/* ==========================================
   ORDER MODIFICATION MODULE STYLES
   ========================================== */

.modify-order-info {
    background: var(--surface);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid var(--border);
}

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

.modify-order-header h4 {
    margin: 0;
    font-size: 18px;
}

.modify-order-warning {
    background: #fef3c7;
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 10px;
    font-size: 13px;
    color: #b45309;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modify-items-section {
    margin-bottom: 20px;
}

.modify-items-list {
    border: 1px solid var(--border);
    border-radius: 8px;
    max-height: 250px;
    overflow-y: auto;
}

.modify-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}

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

.modify-item.removed {
    background: #fee2e2;
    text-decoration: line-through;
    opacity: 0.7;
}

.modify-item.modified {
    background: #fef3c7;
}

.modify-item-info {
    flex: 1;
}

.modify-item-name {
    font-weight: 500;
    color: var(--text);
}

.modify-item-modifiers {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.modify-item-qty-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 15px;
}

.modify-qty-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s;
}

.modify-qty-btn:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.modify-qty-display {
    min-width: 30px;
    text-align: center;
    font-weight: 600;
}

.modify-item-price {
    font-weight: 600;
    min-width: 80px;
    text-align: right;
}

.modify-item-remove {
    padding: 6px 10px;
    background: #fee2e2;
    color: #EF4444;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-left: 10px;
}

.modify-item-restore {
    padding: 6px 10px;
    background: #F3E9D7;
    color: #6F4E37;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-left: 10px;
}

.modify-add-section {
    margin-bottom: 20px;
}

.modify-add-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.modify-add-controls select {
    flex: 1;
}

.modify-new-items {
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 10px;
    min-height: 60px;
}

.modify-new-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    background: #e8f5e9;
    border-radius: 6px;
    margin-bottom: 8px;
}

.modify-new-item:last-child {
    margin-bottom: 0;
}

.modify-reason-section {
    margin-bottom: 20px;
}

.modify-summary {
    background: #e8f4fd;
    border: 1px solid #b3d4fc;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 20px;
}

.modify-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 14px;
}

.modify-summary-row.total {
    font-weight: 600;
    font-size: 16px;
    border-top: 1px solid #b3d4fc;
    padding-top: 10px;
    margin-top: 5px;
}

.modify-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
}

/* ===========================
   SUPPLIER MANAGEMENT MODULE
   =========================== */

.supplier-filters {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.supplier-filters .search-box {
    flex: 1;
    min-width: 250px;
    position: relative;
}

.supplier-filters .search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
}

.supplier-filters .search-box input {
    width: 100%;
    padding: 10px 15px 10px 40px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
}

.supplier-filters select {
    width: 150px;
}

.suppliers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

.supplier-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 20px;
    transition: all 0.3s ease;
    border: 1px solid var(--border);
}

.supplier-card:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.supplier-card.inactive {
    opacity: 0.6;
    background: #f9f9f9;
}

/* FIX: the bare ".supplier-card" class is reused by other components (a flex
   ranking row at ~11474 and a dark transparent card at ~13145) whose rules leak
   in and break this layout. Scope the Menu & Stock supplier cards with higher
   specificity so they always render as proper vertical cards. */
.suppliers-grid .supplier-card {
    display: block;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    align-items: initial;
    gap: 0;
}
.suppliers-grid .supplier-card.inactive {
    opacity: 0.6;
    background: #f9f9f9;
}
.suppliers-grid .supplier-card .supplier-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.supplier-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.supplier-name-section h4 {
    margin: 0 0 6px 0;
    font-size: 16px;
    color: var(--text-primary);
}

.supplier-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.supplier-status.active {
    background: #F3E9D7;
    color: var(--primary);
}

.supplier-status.inactive {
    background: #fee2e2;
    color: #b91c1c;
}

.supplier-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ffc107;
    font-size: 12px;
}

.supplier-rating .rating-value {
    color: var(--text-secondary);
    font-weight: 600;
}

.supplier-contact {
    margin-bottom: 15px;
}

.supplier-contact .contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.supplier-contact .contact-item i {
    width: 16px;
    color: var(--primary);
}

.supplier-details {
    background: #f7f7f7;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 15px;
}

.supplier-details .detail-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 13px;
}

.supplier-details .detail-label {
    color: var(--text-secondary);
}

.supplier-details .detail-value {
    font-weight: 500;
    color: var(--text-primary);
}

.supplier-products {
    margin-bottom: 15px;
}

.supplier-products .products-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    display: block;
}

.supplier-products .products-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.supplier-products .product-tag {
    background: #dbeafe;
    color: #573C2A;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 500;
}

.supplier-products .product-tag.more {
    background: #f7f7f7;
    color: var(--text-secondary);
}

.supplier-actions {
    display: flex;
    gap: 8px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
}

.supplier-actions .btn {
    flex: 1;
}

/* Supplier Modal Styles */
.form-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.form-section:last-of-type {
    border-bottom: none;
    margin-bottom: 15px;
}

.form-section h4 {
    margin: 0 0 15px 0;
    font-size: 15px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-section h4 i {
    color: var(--primary);
}

.form-section .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

@media (max-width: 600px) {
    .form-section .form-row {
        grid-template-columns: 1fr;
    }
}

.form-hint {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #f7f7f7;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
}

.checkbox-item:hover {
    background: #e9ecef;
}

.checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.products-selection {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}

.product-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f7f7f7;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s ease;
}

.product-checkbox:hover {
    background: #e9ecef;
}

.product-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 15px;
    border-top: 1px solid var(--border);
}

/* Supplier Details View */
.supplier-details-view {
    padding: 0;
}

.supplier-view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border);
}

.supplier-view-name {
    display: flex;
    align-items: center;
    gap: 12px;
}

.supplier-view-name h2 {
    margin: 0;
    font-size: 22px;
}

.supplier-view-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffc107;
    font-size: 16px;
}

.supplier-view-rating span {
    color: var(--text-secondary);
    font-size: 14px;
}

.supplier-view-section {
    margin-bottom: 25px;
}

.supplier-view-section h4 {
    margin: 0 0 15px 0;
    font-size: 14px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.supplier-view-section h4 i {
    color: var(--primary);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 560px) {
    .detail-grid {
        grid-template-columns: 1fr;
    }
}

.detail-item {
    background: #f7f7f7;
    padding: 12px 15px;
    border-radius: 8px;
}

.detail-item.full-width {
    grid-column: 1 / -1;
}

.detail-item label {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.detail-item span {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}

.products-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-badge {
    background: #dbeafe;
    color: #573C2A;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.no-products {
    color: var(--text-secondary);
    font-style: italic;
}

.supplier-notes {
    background: #fff9e6;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #ffc107;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px;
    border-top: 1px solid var(--border);
    background: #f7f7f7;
    margin: 0 -20px -20px;
    border-radius: 0 0 12px 12px;
}

/* Hub stat icon blue color */
.hub-stat-icon.blue {
    background: linear-gradient(135deg, #2196f3, #573C2A);
}

/* ===========================
   PURCHASE ORDER MODULE
   =========================== */

.po-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.po-summary-card {
    background: white;
    border-radius: 10px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border);
}

.po-summary-icon {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
}

.po-summary-icon.pending {
    background: linear-gradient(135deg, #ffc107, #F59E0B);
}

.po-summary-icon.transit {
    background: linear-gradient(135deg, #2196f3, #573C2A);
}

.po-summary-icon.received {
    background: linear-gradient(135deg, #4caf50, #388e3c);
}

.po-summary-info {
    display: flex;
    flex-direction: column;
}

.po-summary-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.po-summary-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.po-filters {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.po-filters .search-box {
    flex: 1;
    min-width: 250px;
    position: relative;
}

.po-filters .search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
}

.po-filters .search-box input {
    width: 100%;
    padding: 10px 15px 10px 40px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
}

.po-filters select {
    width: 180px;
}

.po-actions-cell {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
}

/* PO Form Layout */
.po-form-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 25px;
}

@media (max-width: 900px) {
    .po-form-layout {
        grid-template-columns: 1fr;
    }
}

.po-form-left,
.po-form-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.available-products-list {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
}

.available-product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #f7f7f7;
    border-radius: 6px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.available-product:hover {
    background: #dbeafe;
}

.available-product:last-child {
    margin-bottom: 0;
}

.available-product .product-name {
    font-weight: 500;
    color: var(--text-primary);
}

.available-product .product-info {
    font-size: 12px;
    color: var(--text-secondary);
}

.no-products-msg {
    padding: 20px;
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
}

.po-items-container {
    min-height: 150px;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    background: #f7f7f7;
}

.po-item-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 80px 40px;
    gap: 10px;
    align-items: center;
    padding: 10px;
    background: white;
    border-radius: 6px;
    margin-bottom: 8px;
    border: 1px solid var(--border);
}

.po-item-row:last-child {
    margin-bottom: 0;
}

.po-item-name strong {
    display: block;
    font-size: 14px;
}

.po-item-name small {
    color: var(--text-secondary);
    font-size: 11px;
}

.po-item-qty-group {
    display: flex;
    align-items: center;
    gap: 5px;
}

.po-item-qty-group input {
    width: 60px;
    text-align: center;
}

.po-item-unit {
    font-size: 12px;
    color: var(--text-secondary);
}

.po-item-price-group {
    display: flex;
    align-items: center;
    gap: 5px;
}

.po-item-price-group span {
    color: var(--text-secondary);
}

.po-item-price-group input {
    width: 80px;
    text-align: right;
}

.po-item-total {
    font-weight: 600;
    text-align: right;
    color: var(--text-primary);
}

.po-totals {
    background: #f7f7f7;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}

.po-total-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 14px;
}

.po-total-row.total {
    border-top: 2px solid var(--border);
    padding-top: 10px;
    margin-top: 5px;
    font-weight: 700;
    font-size: 16px;
    color: var(--primary);
}

/* PO Details View */
.po-details-view {
    padding: 0;
}

.po-header-info {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--border);
}

.po-header-left h2 {
    margin: 0 0 8px 0;
    font-size: 22px;
}

.po-header-left p {
    margin: 4px 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.po-header-right {
    text-align: right;
}

.po-header-right p {
    margin: 5px 0;
    font-size: 13px;
}

.status-badge.large {
    padding: 8px 16px;
    font-size: 13px;
    margin-bottom: 10px;
    display: inline-block;
}

.po-items-section {
    margin-bottom: 25px;
}

.po-items-section h4 {
    margin: 0 0 15px 0;
    font-size: 15px;
    color: var(--text-primary);
}

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

.po-items-table th,
.po-items-table td {
    padding: 10px 12px;
    border: 1px solid var(--border);
}

.po-items-table th {
    background: #f7f7f7;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
}

.po-items-table tfoot td {
    background: #f7f7f7;
    font-size: 13px;
}

.po-items-table .total-row td {
    background: #e8f4fd;
    font-size: 15px;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.po-notes-section {
    background: #fff9e6;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #ffc107;
    margin-bottom: 25px;
}

.po-notes-section h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
}

.po-notes-section p {
    margin: 0;
    font-size: 14px;
    color: var(--text-primary);
}

.po-timeline {
    margin-bottom: 20px;
}

.po-timeline h4 {
    margin: 0 0 15px 0;
    font-size: 15px;
}

.timeline-items {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ddd;
    margin-top: 4px;
    flex-shrink: 0;
}

.timeline-dot.completed {
    background: #4caf50;
}

.timeline-content {
    display: flex;
    flex-direction: column;
}

.timeline-content strong {
    font-size: 14px;
    color: var(--text-primary);
}

.timeline-content span {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Receive Modal */
.receive-items-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.receive-item-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 15px;
    align-items: center;
    padding: 15px;
    background: #f7f7f7;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.receive-item-info strong {
    display: block;
    margin-bottom: 4px;
}

.receive-item-info span {
    font-size: 12px;
    color: var(--text-secondary);
}

.receive-item-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.receive-item-input label {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.receive-item-input input {
    width: 80px;
    text-align: center;
}

.receive-item-notes input {
    font-size: 13px;
}

/* ===========================
   WASTE & SPOILAGE TRACKING MODULE
   =========================== */

.waste-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.waste-summary-card {
    background: white;
    border-radius: 10px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border);
}

.waste-summary-icon {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
}

.waste-summary-icon.today {
    background: linear-gradient(135deg, #f44336, #c62828);
}

.waste-summary-icon.monthly {
    background: linear-gradient(135deg, #F59E0B, #f57c00);
}

.waste-summary-icon.reason {
    background: linear-gradient(135deg, #9c27b0, #7b1fa2);
}

.waste-summary-info {
    display: flex;
    flex-direction: column;
}

.waste-summary-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.waste-summary-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.waste-filters {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.waste-filters .search-box {
    flex: 1;
    min-width: 200px;
    position: relative;
}

.waste-filters .search-box i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
}

.waste-filters .search-box input {
    width: 100%;
    padding: 10px 15px 10px 40px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 14px;
}

.waste-filters select,
.waste-filters input[type="date"] {
    width: 180px;
}

.waste-reason-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.waste-reason-badge.expired {
    background: #fef3c7;
    color: #e65100;
}

.waste-reason-badge.spoiled {
    background: #ffebee;
    color: #c62828;
}

.waste-reason-badge.dropped {
    background: #dbeafe;
    color: #1565c0;
}

.waste-reason-badge.overproduction {
    background: #f3e5f5;
    color: #7b1fa2;
}

.waste-reason-badge.customer_return {
    background: #e8f5e9;
    color: #2e7d32;
}

.waste-reason-badge.theft {
    background: #fce4ec;
    color: #c2185b;
}

.waste-reason-badge.quality {
    background: #fff8e1;
    color: #ff8f00;
}

.waste-reason-badge.other {
    background: #eceff1;
    color: #546e7a;
}

.text-danger {
    color: #c62828 !important;
}

.waste-chart-section {
    margin-top: 30px;
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border);
}

.waste-chart-section h4 {
    margin: 0 0 20px 0;
    font-size: 16px;
    color: var(--text-primary);
}

.waste-chart-bars {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.waste-bar-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.waste-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}

.waste-bar-label span:first-child {
    font-weight: 500;
    color: var(--text-primary);
}

.waste-bar-label span:last-child {
    color: var(--text-secondary);
}

.waste-bar-track {
    height: 10px;
    background: #f0f0f0;
    border-radius: 5px;
    overflow: hidden;
}

.waste-bar-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.5s ease;
}

.waste-bar-fill.expired { background: #F59E0B; }
.waste-bar-fill.spoiled { background: #f44336; }
.waste-bar-fill.dropped { background: #2196f3; }
.waste-bar-fill.overproduction { background: #9c27b0; }
.waste-bar-fill.customer_return { background: #4caf50; }
.waste-bar-fill.theft { background: #e91e63; }
.waste-bar-fill.quality { background: #ffc107; }
.waste-bar-fill.other { background: #607d8b; }

.waste-cost-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #fef3c7;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #ffe0b2;
}

.waste-cost-preview .cost-value {
    font-size: 18px;
    font-weight: 700;
}

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

.waste-detail-item {
    background: #f7f7f7;
    padding: 12px 15px;
    border-radius: 8px;
}

.waste-detail-item.full-width {
    grid-column: 1 / -1;
}

.waste-detail-item label {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.waste-detail-item span {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}

/* =====================================================
   LOYALTY POINTS STYLES
===================================================== */

.loyalty-points-section {
    background: linear-gradient(135deg, #fff8e1 0%, #fef3c7 100%);
    border: 1px solid #ffe0b2;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
}

.loyalty-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ffe0b2;
}

.loyalty-header i {
    color: #F59E0B;
    font-size: 20px;
}

.loyalty-header span:first-of-type {
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.loyalty-tier {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.loyalty-tier.regular {
    background: #e4e4e4;
    color: #5c5c5c;
}

.loyalty-tier.vip {
    background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%);
    color: #7c5e00;
}

.loyalty-tier.platinum {
    background: linear-gradient(135deg, #b8c5d6 0%, #8fa5c0 100%);
    color: #2c3e50;
}

.loyalty-balance {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.balance-info,
.earn-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.balance-info .label,
.earn-info .label {
    font-size: 12px;
    color: var(--text-secondary);
}

.balance-info .value {
    font-size: 24px;
    font-weight: 700;
    color: #F59E0B;
}

.earn-info .value {
    font-size: 18px;
    font-weight: 600;
    color: #4caf50;
}

.redeem-section {
    background: white;
    border-radius: 8px;
    padding: 15px;
}

.redeem-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.redeem-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.redeem-checkbox span {
    font-size: 14px;
    color: var(--text-primary);
}

.points-slider-container {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

#pointsSlider {
    width: 100%;
    height: 8px;
    -webkit-appearance: none;
    background: #e4e4e4;
    border-radius: 4px;
    outline: none;
}

#pointsSlider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: #F59E0B;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(255, 152, 0, 0.3);
}

#pointsSlider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #F59E0B;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.slider-labels span:nth-child(2) {
    font-weight: 600;
    color: #F59E0B;
    font-size: 14px;
}

.redemption-value {
    text-align: center;
    margin-top: 12px;
    font-size: 14px;
    color: var(--text-primary);
}

.redemption-value strong {
    color: #4caf50;
    font-size: 18px;
}

.redeem-unavailable {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: #f7f7f7;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
}

.redeem-unavailable i {
    color: #9e9e9e;
}

/* Loyalty History Styles */
.loyalty-history-container {
    padding: 10px;
}

.loyalty-summary-card {
    display: flex;
    gap: 20px;
    background: linear-gradient(135deg, #fff8e1 0%, #fef3c7 100%);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 25px;
}

.loyalty-summary-card .summary-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.loyalty-summary-card .summary-item i {
    font-size: 24px;
    color: #F59E0B;
}

.loyalty-summary-card .summary-content {
    display: flex;
    flex-direction: column;
}

.loyalty-summary-card .summary-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.loyalty-summary-card .summary-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.loyalty-summary-card .tier-regular { color: #5c5c5c; }
.loyalty-summary-card .tier-vip { color: #f57c00; }
.loyalty-summary-card .tier-platinum { color: #5c6bc0; }

.loyalty-transactions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.loyalty-transaction {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: white;
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

.loyalty-transaction .transaction-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loyalty-transaction.earn .transaction-icon {
    background: #e8f5e9;
    color: #4caf50;
}

.loyalty-transaction.redeem .transaction-icon {
    background: #fce4ec;
    color: #e91e63;
}

.loyalty-transaction.adjust .transaction-icon {
    background: #dbeafe;
    color: #2196f3;
}

.loyalty-transaction .transaction-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.loyalty-transaction .transaction-desc {
    font-weight: 500;
    color: var(--text-primary);
}

.loyalty-transaction .transaction-date {
    font-size: 12px;
    color: var(--text-secondary);
}

.loyalty-transaction .transaction-points {
    font-weight: 600;
    font-size: 16px;
}

.loyalty-transaction .transaction-points.positive {
    color: #4caf50;
}

.loyalty-transaction .transaction-points.negative {
    color: #e91e63;
}

.loyalty-transaction .transaction-balance {
    font-size: 12px;
    color: var(--text-secondary);
    min-width: 100px;
    text-align: right;
}

.no-transactions {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}

.no-transactions i {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.3;
}

/* Payment Modal Loyalty Row */
.payment-summary-row.loyalty-row {
    color: #4caf50;
}

.payment-summary-row.loyalty-row .value {
    color: #4caf50;
    font-weight: 600;
}

/* =====================================================
   PAYROLL GENERATOR & PAYSLIP STYLES
===================================================== */

.payroll-generator-form {
    padding: 10px;
}

.payroll-generator-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.deduction-summary {
    background: #f7f7f7;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.deduction-summary h4 {
    margin: 0 0 15px 0;
    color: var(--text-primary);
}

.deduction-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.deduction-item {
    text-align: center;
    padding: 15px;
    background: white;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.deduction-item i {
    font-size: 24px;
    color: var(--primary-color);
    margin-bottom: 8px;
    display: block;
}

.deduction-item span {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.deduction-item small {
    font-size: 11px;
    color: var(--text-secondary);
}

.preview-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.preview-section h4 {
    margin: 0 0 15px 0;
}

.preview-summary {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.preview-summary .summary-item {
    text-align: center;
    padding: 15px;
    background: #f7f7f7;
    border-radius: 8px;
}

.preview-summary .summary-item label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 5px;
}

.preview-summary .summary-item strong {
    font-size: 18px;
}

.preview-table-container {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

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

.preview-table th,
.preview-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.preview-table th {
    background: #f7f7f7;
    font-weight: 600;
    position: sticky;
    top: 0;
}

/* Payslip Container */
.payslip-container {
    max-width: 500px;
    margin: 0 auto;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}

.payslip-header {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: white;
    padding: 20px;
    text-align: center;
}

.payslip-header h4 {
    margin: 0;
    font-size: 18px;
}

.payslip-header p {
    margin: 5px 0 0 0;
    opacity: 0.9;
}

.payslip-employee {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    padding: 15px 20px;
    background: #f7f7f7;
    border-bottom: 1px solid var(--border-color);
}

.payslip-employee .employee-info label {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.payslip-employee .employee-info strong {
    font-size: 14px;
    color: var(--text-primary);
}

.payslip-section {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
}

.payslip-section h5 {
    margin: 0 0 10px 0;
    font-size: 13px;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.payslip-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
}

.payslip-row.total {
    border-top: 1px solid var(--border-color);
    margin-top: 10px;
    padding-top: 10px;
    font-weight: 600;
}

.payslip-row.small {
    font-size: 13px;
    color: var(--text-secondary);
}

.payslip-section.net-pay {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
}

.payslip-section.net-pay .payslip-row {
    font-size: 18px;
    font-weight: 700;
}

.payslip-section.employer-section {
    background: #fef3c7;
}

.payslip-footer {
    padding: 10px 20px;
    text-align: center;
    background: #f7f7f7;
    color: var(--text-secondary);
}

/* 13th Month Pay & Info Banner Styles */
.info-banner {
    display: flex;
    gap: 15px;
    padding: 15px;
    background: #dbeafe;
    border: 1px solid #bbdefb;
    border-radius: 8px;
    margin: 15px 0;
}

.info-banner i {
    font-size: 24px;
    color: #573C2A;
    flex-shrink: 0;
}

.info-banner strong {
    display: block;
    margin-bottom: 8px;
    color: #1565c0;
}

.info-banner p {
    margin: 4px 0;
    font-size: 13px;
    color: #424242;
}

.thirteenth-month-form .form-group {
    max-width: 200px;
}

.no-data-message {
    text-align: center;
    padding: 60px 40px;
    color: var(--text-secondary);
    background: var(--card-bg);
    border-radius: 12px;
    margin: 20px 0;
}

.no-data-message .no-data-icon {
    width: 80px;
    height: 80px;
    background: rgba(194, 160, 106, 0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.no-data-message .no-data-icon i {
    font-size: 36px;
    color: var(--primary-color);
}

.no-data-message i {
    font-size: 48px;
    margin-bottom: 15px;
    color: #ffb74d;
}

.no-data-message h4 {
    margin: 0 0 10px 0;
    color: var(--text-primary);
    font-size: 18px;
}

.no-data-message p {
    margin: 0;
    font-size: 14px;
    max-width: 400px;
    margin: 0 auto;
    line-height: 1.6;
}

.year-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.year-section:last-child {
    border-bottom: none;
}

.year-section h4 {
    margin: 0 0 15px 0;
    color: var(--text-primary);
}

/* Daily Sales Report Styles */
.daily-sales-form .form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    align-items: flex-end;
}

.dsr-report {
    background: white;
    border: 2px solid #333;
    border-radius: 8px;
    padding: 25px;
    max-width: 500px;
    margin: 0 auto;
    font-family: 'Courier New', monospace;
}

.dsr-header {
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 2px dashed #5c5c5c;
}

.dsr-header h4 {
    margin: 0;
    font-size: 18px;
}

.dsr-header h5 {
    margin: 10px 0 5px 0;
    font-size: 16px;
    text-transform: uppercase;
}

.dsr-header p {
    margin: 5px 0;
    color: #5c5c5c;
}

.dsr-header hr {
    border: none;
    border-top: 2px dashed #5c5c5c;
    margin: 15px 0;
}

.dsr-section {
    margin: 15px 0;
    padding: 10px 0;
    border-bottom: 1px dashed #ccc;
}

.dsr-section h6 {
    margin: 0 0 10px 0;
    font-size: 12px;
    color: #5c5c5c;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.dsr-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
}

.dsr-row.indent {
    padding-left: 20px;
    color: #5c5c5c;
}

.dsr-row.total {
    border-top: 1px solid #333;
    margin-top: 8px;
    padding-top: 8px;
    font-weight: bold;
    font-size: 14px;
}

.dsr-footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 2px dashed #5c5c5c;
}

.dsr-footer p {
    margin: 5px 0;
    font-size: 11px;
    color: #5c5c5c;
}

/* ===========================
   INVENTORY EXPIRY / BATCH TRACKING STYLES
   =========================== */

/* Expiry Status Colors */
.expiry-expired {
    color: #EF4444 !important;
    background: #fdf2f2;
}

.expiry-critical {
    color: #F59E0B !important;
    background: #fef9e7;
}

.expiry-warning {
    color: #F59E0B !important;
    background: #fffbf0;
}

.expiry-ok {
    color: #16a34a !important;
    background: #f0fff4;
}

/* Inventory table expiry indicator */
.expiry-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    margin-top: 4px;
}

.expiry-indicator.expiry-expired {
    background: #fdf2f2;
    border: 1px solid #EF4444;
}

.expiry-indicator.expiry-critical {
    background: #fef9e7;
    border: 1px solid #F59E0B;
}

.expiry-indicator.expiry-warning {
    background: #fffbf0;
    border: 1px solid #F59E0B;
}

.expiry-indicator.expiry-ok {
    background: #f0fff4;
    border: 1px solid #16a34a;
}

/* Batch count badge */
.batch-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #3b82f6;
    color: white;
    font-size: 10px;
    font-weight: bold;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin-left: 6px;
}

.item-name-cell {
    display: flex;
    align-items: center;
}

/* Expiry Alerts Summary */
.expiry-alerts-summary {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 25px;
    padding: 15px;
    background: #f7f7f7;
    border-radius: 12px;
}

.alert-stat {
    text-align: center;
    padding: 15px 25px;
    border-radius: 10px;
    min-width: 120px;
}

.alert-stat.expired {
    background: linear-gradient(135deg, #fdf2f2 0%, #fce4e4 100%);
    border: 2px solid #EF4444;
}

.alert-stat.critical {
    background: linear-gradient(135deg, #fef9e7 0%, #fef3cd 100%);
    border: 2px solid #F59E0B;
}

.alert-stat.warning {
    background: linear-gradient(135deg, #eef6fc 0%, #d4edfc 100%);
    border: 2px solid #3b82f6;
}

.alert-stat .stat-number {
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
}

.alert-stat.expired .stat-number {
    color: #EF4444;
}

.alert-stat.critical .stat-number {
    color: #F59E0B;
}

.alert-stat.warning .stat-number {
    color: #3b82f6;
}

.alert-stat .stat-label {
    font-size: 12px;
    color: #5c5c5c;
    margin-top: 5px;
}

/* No alerts message */
.no-alerts-message {
    text-align: center;
    padding: 40px 20px;
    color: #16a34a;
}

.no-alerts-message i {
    font-size: 48px;
    margin-bottom: 15px;
}

.no-alerts-message h4 {
    margin: 0 0 10px;
    font-size: 20px;
}

.no-alerts-message p {
    color: #5c5c5c;
}

/* Expiry Section */
.expiry-section {
    margin-bottom: 25px;
}

.expiry-section h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.expired-section h4 {
    background: #fdf2f2;
    color: #b91c1c;
}

.critical-section h4 {
    background: #fef9e7;
    color: #d35400;
}

.warning-section h4 {
    background: #eef6fc;
    color: #573C2A;
}

/* Expiry Batch Cards */
.expiry-batch-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.expiry-batch-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-radius: 10px;
    border-left: 4px solid;
}

.expiry-batch-card.expired {
    background: #fdf2f2;
    border-left-color: #EF4444;
}

.expiry-batch-card.critical {
    background: #fef9e7;
    border-left-color: #F59E0B;
}

.expiry-batch-card.warning {
    background: #fffbf0;
    border-left-color: #F59E0B;
}

.batch-info {
    flex: 1;
}

.batch-item-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.batch-details {
    display: flex;
    gap: 15px;
    margin-bottom: 8px;
}

.batch-number {
    font-family: monospace;
    font-size: 12px;
    background: #e9ecef;
    padding: 2px 8px;
    border-radius: 4px;
}

.batch-category {
    font-size: 12px;
    color: #5c5c5c;
}

.batch-quantity {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 5px;
}

.batch-expiry {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.expiry-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 600;
}

.expiry-badge.expiry-expired {
    background: #EF4444;
    color: white;
}

.expiry-badge.expiry-critical {
    background: #F59E0B;
    color: white;
}

.expiry-badge.expiry-warning {
    background: #F59E0B;
    color: white;
}

.expiry-badge.expiry-ok {
    background: #16a34a;
    color: white;
}

.expiry-date {
    font-size: 12px;
    color: #5c5c5c;
}

.batch-cost-impact {
    font-size: 12px;
    color: #5c5c5c;
    margin-top: 5px;
}

.batch-cost-impact strong {
    color: #EF4444;
}

.batch-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Batch Management Modal */
.batch-summary {
    display: flex;
    justify-content: space-around;
    padding: 15px;
    background: #f7f7f7;
    border-radius: 10px;
    margin-bottom: 20px;
}

.batch-summary .summary-item {
    text-align: center;
}

.batch-summary .label {
    font-size: 12px;
    color: #5c5c5c;
    display: block;
}

.batch-summary .value {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

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

.batch-actions-header h4 {
    margin: 0;
}

/* Batch Table */
.batch-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.batch-table th,
.batch-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
}

.batch-table th {
    background: #f7f7f7;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    color: #5c5c5c;
}

.batch-row.expiry-expired {
    background: #fdf2f2;
}

.batch-row.expiry-critical {
    background: #fef9e7;
}

.batch-row.expiry-warning {
    background: #fffbf0;
}

.batch-number-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.batch-note-icon {
    color: #F59E0B;
    cursor: help;
}

.expiry-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.expiry-cell .expiry-badge {
    width: fit-content;
}

.batch-status-badge {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.batch-status-badge.status-available {
    background: #F3E9D7;
    color: var(--primary);
}

.batch-status-badge.status-used {
    background: #e2e3e5;
    color: #383d41;
}

.batch-status-badge.status-disposed {
    background: #fee2e2;
    color: #b91c1c;
}

/* No batches message */
.no-batches-message {
    text-align: center;
    padding: 30px;
    color: #5c5c5c;
}

.no-batches-message i {
    font-size: 40px;
    color: #ccc;
    margin-bottom: 10px;
}

/* Batch history toggle */
.batch-history-toggle {
    margin-top: 15px;
    text-align: center;
}

.batch-table.batch-history {
    background: #f7f7f7;
}

.history-row {
    color: #5c5c5c;
}

/* FIFO Suggestion Modal */
.fifo-suggestion {
    padding: 10px;
}

.suggestion-header {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #fff8e1 0%, #fef3c7 100%);
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.suggestion-header i {
    font-size: 24px;
    color: #F59E0B;
}

.suggestion-header h4 {
    margin: 0;
    color: #333;
}

.suggestion-details {
    background: #f7f7f7;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.suggestion-details .detail-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #e9ecef;
}

.suggestion-details .detail-row:last-child {
    border-bottom: none;
}

.suggestion-details .label {
    color: #5c5c5c;
}

.suggestion-details .value {
    font-weight: 600;
    color: #333;
}

.suggestion-details .value.expiry-critical {
    color: #F59E0B;
}

.menu-suggestions {
    background: #e8f5e9;
    padding: 15px;
    border-radius: 8px;
}

.menu-suggestions h5 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: #6F4E37;
}

.menu-suggestions ul {
    margin: 0 0 10px 20px;
    padding: 0;
}

.menu-suggestions li {
    padding: 3px 0;
}

.suggestion-tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: 12px;
    color: #5c5c5c;
    font-style: italic;
}

.suggestion-tip i {
    color: #C2A06A;
}

.no-menu-items {
    background: #f7f7f7;
    padding: 15px;
    border-radius: 8px;
    color: #5c5c5c;
    text-align: center;
}

/* Batch use info */
.batch-use-info {
    background: #f7f7f7;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.batch-use-info p {
    margin: 5px 0;
}

/* Expiry alert badge in sidebar/header */
.expiry-alert-badge {
    display: none;
    background: #EF4444;
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 5px;
}

/* Module header buttons layout */
.module-header-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* ===========================
   DATA BACKUP SYSTEM STYLES
   =========================== */

.backup-info-banner {
    display: flex;
    justify-content: space-around;
    background: linear-gradient(135deg, #6F4E37 0%, #573C2A 100%);
    color: white;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 25px;
}

.backup-info-banner .info-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.backup-info-banner .info-item i {
    font-size: 24px;
    opacity: 0.8;
}

.backup-info-banner .info-item .label {
    display: block;
    font-size: 12px;
    opacity: 0.8;
}

.backup-info-banner .info-item .value {
    display: block;
    font-size: 16px;
    font-weight: 600;
}

.backup-sections {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.backup-section {
    background: #f7f7f7;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e9ecef;
}

.backup-section h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    color: #333;
}

.backup-section h4 i {
    color: var(--primary);
}

.backup-section p {
    color: #5c5c5c;
    margin-bottom: 15px;
    font-size: 14px;
}

.backup-section.danger-zone {
    background: #fff5f5;
    border-color: #fed7d7;
}

.backup-section.danger-zone h4 {
    color: #c53030;
}

.backup-section.danger-zone h4 i {
    color: #e53e3e;
}

.csv-export-options {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed #dee2e6;
}

.csv-export-options h5 {
    font-size: 13px;
    color: #5c5c5c;
    margin: 0 0 12px;
}

.csv-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.file-upload-area {
    border: 2px dashed #dee2e6;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: white;
}

.file-upload-area:hover {
    border-color: var(--primary);
    background: #f8f9ff;
}

.file-upload-area i {
    font-size: 40px;
    color: #adb5bd;
    margin-bottom: 10px;
}

.file-upload-area p {
    margin: 0 0 5px;
    color: #495057;
}

.file-upload-area .file-types {
    font-size: 12px;
    color: #adb5bd;
}

.backup-file-info {
    margin-top: 15px;
    padding: 15px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 10px;
}

.file-info-content {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.file-info-content i {
    font-size: 32px;
    color: var(--primary);
}

.file-details {
    flex: 1;
}

.file-details .file-name {
    display: block;
    font-weight: 600;
    color: #333;
}

.file-details .file-size {
    display: block;
    font-size: 12px;
    color: #5c5c5c;
}

.restore-options {
    margin-bottom: 15px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #495057;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.text-warning {
    color: #F59E0B !important;
}

/* Data Management Card in Settings */
.data-management-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #f7f7f7 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 12px;
    padding: 20px;
}

.data-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.data-info i {
    font-size: 40px;
    color: var(--primary);
}

.data-info p {
    margin: 0;
}

.data-info .text-muted {
    font-size: 13px;
    color: #5c5c5c;
}

.data-actions {
    display: flex;
    gap: 10px;
}

/* Phone: these Settings cards lay out as icon+text | buttons in one row, which
   on a narrow screen crushes the description to one word per line and pushes the
   action buttons off the card. Stack them, and give the buttons a full-width
   row of their own. */
@media (max-width: 600px) {
    .data-management-card {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
    .data-management-card .data-actions {
        width: 100%;
    }
    .data-management-card .data-actions .btn {
        flex: 1;
        justify-content: center;
    }

    /* Operating Hours: the fixed 4-column row (110px 1fr 1fr 100px) overflows
       and clips the "Closed" toggle. Drop the column header and reflow each day
       to: day name + Closed on top, Open / Close inputs below. The grid-areas
       are matched to child order: 1=day, 2=open, 3=close, 4=status. */
    .oh-head { display: none !important; }
    .oh-row {
        grid-template-columns: 1fr 1fr !important;
        grid-template-areas:
            "day status"
            "open close" !important;
        gap: 10px !important;
        padding: 12px 0 !important;
    }
    .oh-row > :nth-child(1) { grid-area: day; }
    .oh-row > :nth-child(2) { grid-area: open; }
    .oh-row > :nth-child(3) { grid-area: close; }
    .oh-row > :nth-child(4) { grid-area: status; justify-self: end; }
}

/* ===========================
   PIN-BASED AUTHENTICATION STYLES
   =========================== */

.pin-login-container {
    background: white;
    border-radius: 20px;
    padding: 40px;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.pin-login-header {
    margin-bottom: 30px;
}

.pin-login-header i {
    font-size: 48px;
    color: var(--primary);
    margin-bottom: 15px;
}

.pin-login-header h1 {
    margin: 0 0 5px;
    font-size: 28px;
    color: #333;
}

.pin-login-header p {
    margin: 0;
    color: #5c5c5c;
    font-size: 14px;
}

.pin-login-users {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 25px;
}

.pin-user-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 15px 10px;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    background: #f7f7f7;
    cursor: pointer;
    transition: all 0.2s;
}

.pin-user-btn:hover {
    border-color: var(--primary);
    background: #f8f9ff;
    transform: translateY(-2px);
}

.user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.user-avatar.owner {
    background: linear-gradient(135deg, #F59E0B 0%, #F59E0B 100%);
}

.user-avatar.manager {
    background: linear-gradient(135deg, #6F4E37 0%, #573C2A 100%);
}

.user-avatar.cashier {
    background: linear-gradient(135deg, #6F4E37 0%, #573C2A 100%);
}

.user-avatar.waiter {
    background: linear-gradient(135deg, #3b82f6 0%, #573C2A 100%);
}

.user-avatar.chef {
    background: linear-gradient(135deg, #EF4444 0%, #b91c1c 100%);
}

.user-avatar.inventory {
    background: linear-gradient(135deg, #1abc9c 0%, #16a085 100%);
}

.user-name {
    font-weight: 600;
    color: #333;
    font-size: 13px;
}

.user-role {
    font-size: 11px;
    color: #5c5c5c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pin-input-section {
    padding: 20px;
    background: #f7f7f7;
    border-radius: 15px;
    margin-bottom: 20px;
}

.selected-user {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.selected-user span {
    font-weight: 600;
    color: #333;
    font-size: 18px;
}

.pin-display {
    margin-bottom: 20px;
}

.pin-dots {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.pin-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #dee2e6;
    background: white;
    transition: all 0.2s;
}

.pin-dot.filled {
    background: var(--primary);
    border-color: var(--primary);
}

.pin-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 280px;
    margin: 0 auto;
}

.pin-key {
    width: 70px;
    height: 70px;
    border: none;
    border-radius: 50%;
    background: white;
    font-size: 24px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pin-key:hover {
    background: #f0f0f0;
    transform: scale(1.05);
}

.pin-key:active {
    transform: scale(0.95);
    background: #e4e4e4;
}

.pin-key.clear {
    background: #fee2e2;
    color: #EF4444;
}

.pin-key.clear:hover {
    background: #fecaca;
}

.pin-key.submit {
    background: rgba(194, 160, 106, 0.25);
    color: #573C2A;
}

.pin-key.submit:hover {
    background: rgba(194, 160, 106, 0.4);
}

.pin-hint {
    margin-top: 15px;
    color: #EF4444;
    font-size: 14px;
}

.quick-login-note {
    margin-top: 20px;
    padding: 15px;
    background: #e8f4fd;
    border-radius: 10px;
    font-size: 12px;
    color: #573C2A;
}

.quick-login-note p {
    margin: 0 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.quick-login-note small {
    color: #5c5c5c;
}

/* Shake animation for invalid PIN */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake {
    animation: shake 0.5s ease-in-out;
}

/* Role badges */
.role-badge {
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.role-badge.role-owner {
    background: #fef3c7;
    color: #b45309;
}

.role-badge.role-manager {
    background: #e0e7ff;
    color: #4338ca;
}

.role-badge.role-cashier {
    background: #d1fae5;
    color: #059669;
}

.role-badge.role-waiter {
    background: #dbeafe;
    color: #573C2A;
}

.role-badge.role-chef {
    background: #fee2e2;
    color: #b91c1c;
}

.role-badge.role-inventory {
    background: #F3E9D7;
    color: #6F4E37;
}

/* Barista — dito siya nakalagay at hindi sa mga .role-* block sa 6150 o
   19417: dalawang class ang selector dito kaya siya ang nananalo sa specificity. */
.role-badge.role-barista {
    background: #F5EBE0;
    color: #8B5E3C;
}

/* User management */
.user-management-actions {
    margin-bottom: 20px;
}

/* Current user display in header */
#currentUserDisplay {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

#currentUserDisplay i {
    font-size: 16px;
}

#currentUserDisplay span {
    font-size: 14px;
}

#currentUserDisplay .role-badge {
    font-size: 10px;
    padding: 2px 8px;
}

/* ===========================
   ADVANCED AI SYSTEMS STYLES
   =========================== */

/* AI Action Toast Container */
.ai-action-toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 10001;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 400px;
}

.ai-action-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid #6F4E37;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(194, 160, 106, 0.3);
    animation: slideInRight 0.3s ease-out;
}

.ai-action-toast.fade-out {
    animation: slideOutRight 0.3s ease-out forwards;
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

.ai-toast-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6F4E37, #573C2A);
    border-radius: 10px;
    color: white;
    font-size: 18px;
}

.ai-toast-content {
    flex: 1;
}

.ai-toast-title {
    font-weight: 600;
    color: #C2A06A;
    margin-bottom: 4px;
    font-size: 14px;
}

.ai-toast-message {
    color: #e4e4e4;
    font-size: 13px;
    margin-bottom: 8px;
}

.ai-toast-countdown {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #5c5c5c;
    font-size: 12px;
}

.ai-toast-countdown i {
    color: #F59E0B;
}

.ai-toast-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-toast-undo {
    padding: 8px 16px;
    background: #F59E0B;
    color: #1a1a2e;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
}

.ai-toast-undo:hover {
    background: #F59E0B;
    transform: scale(1.05);
}

.ai-toast-dismiss {
    padding: 6px;
    background: transparent;
    color: #5c5c5c;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.ai-toast-dismiss:hover {
    color: #EF4444;
}

/* ===================================
   CONSOLIDATED AI TAB STYLES - CLEAN LIGHT THEME
   =================================== */

.ai-consolidated-container {
    padding: 20px;
    background: #fff;
}

/* Section Tabs (Sub-tabs within consolidated tabs) */
.ai-section-tabs {
    display: flex;
    gap: 8px;
    padding: 8px;
    background: #f7f7f7;
    border-radius: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    border: 1px solid #e4e4e4;
}

.section-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.section-tab:hover {
    background: #f0f0f0;
    border-color: var(--primary);
    color: var(--primary);
}

.section-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.section-tab i {
    font-size: 14px;
}

.ai-section-content {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Executive Banner in Overview */
.executive-banner {
    display: flex;
    align-items: center;
    gap: 24px;
    background: #f7f7f7;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.health-score-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.score-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.score-circle.excellent {
    background: var(--primary);
}

.score-circle.good {
    background: #F59E0B;
}

.score-circle.warning {
    background: #EF4444;
}

.score-text {
    font-size: 12px;
    color: #5c5c5c;
    font-weight: 500;
}

.one-action-today {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e4e4e4;
}

.one-action-today > i {
    font-size: 24px;
    color: #F59E0B;
}

.one-action-today .action-text {
    flex: 1;
}

.one-action-today .action-text strong {
    display: block;
    color: #5c5c5c;
    font-size: 12px;
    margin-bottom: 4px;
}

.one-action-today .action-text span {
    color: #333;
    font-size: 14px;
}

/* Briefing Grid Compact */
.briefing-grid.compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.briefing-list.compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.briefing-item.compact {
    padding: 12px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
}

.briefing-item.compact .item-content {
    flex: 1;
}

.briefing-item.compact .item-title {
    font-size: 13px;
    color: #333;
}

.briefing-item.compact .item-action,
.briefing-item.compact .item-value {
    font-size: 11px;
    margin-top: 4px;
    color: #5c5c5c;
}

/* Anomaly Cards Compact */
.anomaly-list.compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.anomaly-card.compact {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e4e4e4;
    border-left: 3px solid #F59E0B;
}

.anomaly-card.compact.high {
    border-left-color: #EF4444;
}

.anomaly-card.compact i {
    font-size: 18px;
    color: #F59E0B;
}

.anomaly-card.compact.high i {
    color: #EF4444;
}

.anomaly-card.compact .anomaly-content {
    flex: 1;
}

.anomaly-card.compact .anomaly-title {
    font-size: 13px;
    color: #333;
}

/* Forecast KPIs */
.forecast-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.forecast-kpi {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    padding: 20px;
}

.forecast-kpi .kpi-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f7f4;
    border-radius: 8px;
}

.forecast-kpi .kpi-icon i {
    font-size: 20px;
    color: var(--primary);
}

.forecast-kpi .kpi-content {
    flex: 1;
}

.forecast-kpi .kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 4px;
}

.forecast-kpi .kpi-label {
    font-size: 13px;
    color: #5c5c5c;
}

.forecast-kpi .kpi-change {
    font-size: 12px;
    margin-top: 4px;
}

.forecast-kpi .kpi-change.positive {
    color: var(--primary);
}

.forecast-kpi .kpi-change.negative {
    color: #EF4444;
}

.forecast-kpi .kpi-sublabel {
    font-size: 11px;
    color: #5c5c5c;
    margin-top: 4px;
}

/* Forecast Table */
.forecast-table {
    overflow-x: auto;
}

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

.forecast-table th,
.forecast-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #e4e4e4;
}

.forecast-table th {
    background: #f7f7f7;
    color: #5c5c5c;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
}

.forecast-table td {
    color: #333;
}

.confidence-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
}

.confidence-bar-small {
    width: 60px;
    height: 6px;
    background: #e4e4e4;
    border-radius: 3px;
    overflow: hidden;
}

.confidence-bar-small .confidence-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
}

/* Top Sellers List */
.top-sellers-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.top-seller-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
}

.top-seller-item:hover {
    background: #f7f7f7;
}

.top-seller-item .rank {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f7f4;
    border-radius: 6px;
    color: var(--primary);
    font-weight: 700;
    font-size: 14px;
}

.top-seller-item .item-info {
    flex: 1;
}

.top-seller-item .item-name {
    color: #333;
    font-weight: 600;
    margin-bottom: 2px;
}

.top-seller-item .item-category {
    color: #5c5c5c;
    font-size: 12px;
}

.top-seller-item .item-stats {
    text-align: right;
}

.top-seller-item .stat {
    color: #5c5c5c;
    font-size: 13px;
}

.top-seller-item .stat:first-child {
    color: #333;
    font-weight: 600;
}

/* Report Styles */
.report-type-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.report-type-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

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

.report-type-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.quick-reports-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.quick-report-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
}

.quick-report-btn:hover {
    border-color: var(--primary);
    background: #f0f7f4;
}

.quick-report-btn i {
    font-size: 24px;
    color: var(--primary);
}

.quick-report-btn span {
    font-size: 13px;
    font-weight: 500;
}

.report-preview {
    min-height: 300px;
    padding: 20px;
    background: #f7f7f7;
    border-radius: 8px;
    border: 1px solid #e4e4e4;
}

.report-actions {
    display: flex;
    gap: 8px;
}

/* Menu Matrix */
.menu-matrix {
    padding: 16px;
}

.matrix-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.matrix-quadrant {
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e4e4e4;
}

.matrix-quadrant.stars {
    background: #f0f7f4;
    border-color: var(--primary);
}

.matrix-quadrant.puzzles {
    background: #eef6fc;
    border-color: #3b82f6;
}

.matrix-quadrant.plowhorses {
    background: #fef9f0;
    border-color: #F59E0B;
}

.matrix-quadrant.dogs {
    background: #fef2f2;
    border-color: #EF4444;
}

.quadrant-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #333;
    font-weight: 600;
}

.quadrant-header i {
    font-size: 16px;
}

.quadrant-desc {
    font-size: 11px;
    color: #5c5c5c;
    font-weight: 400;
    margin-left: auto;
}

.quadrant-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.matrix-item {
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
    font-size: 13px;
    color: #333;
}

/* Menu Lab */
.lab-header,
.promo-header,
.staffiq-header,
.waste-header,
.simulator-header,
.supply-chain-header {
    margin-bottom: 24px;
}

.lab-title,
.promo-title,
.staffiq-title,
.waste-title,
.simulator-title,
.header-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.lab-title i,
.promo-title i,
.staffiq-title i,
.waste-title i,
.simulator-title i,
.header-title i {
    font-size: 24px;
    color: var(--primary);
}

.lab-title h2,
.promo-title h2,
.staffiq-title h2,
.waste-title h2,
.simulator-title h2,
.header-title h2 {
    margin: 0;
    color: #333;
    font-size: 22px;
}

.lab-description,
.promo-description,
.staffiq-description,
.waste-description,
.simulator-description,
.header-description {
    color: #5c5c5c;
    font-size: 14px;
}

.mutation-controls,
.promo-generator {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mutation-type-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.mutation-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.mutation-btn:hover,
.mutation-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.mutations-grid,
.generated-promos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.mutation-card,
.promo-card {
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    padding: 20px;
    transition: all 0.2s;
}

.mutation-card:hover,
.promo-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.mutation-badge,
.promo-badge {
    display: inline-block;
    padding: 4px 10px;
    background: #f0f7f4;
    border-radius: 20px;
    font-size: 11px;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.mutation-name,
.promo-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.mutation-description,
.promo-detail {
    font-size: 13px;
    color: #5c5c5c;
    margin-bottom: 16px;
    line-height: 1.5;
}

.mutation-projections,
.promo-projections {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    padding: 12px;
    background: #f7f7f7;
    border-radius: 6px;
    border: 1px solid #e4e4e4;
}

.mutation-projections .projection,
.promo-projections .projection {
    flex: 1;
}

.proj-label {
    display: block;
    font-size: 11px;
    color: #5c5c5c;
    margin-bottom: 4px;
}

.proj-value {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.proj-value.positive {
    color: var(--primary);
}

.mutation-actions,
.promo-actions {
    display: flex;
    gap: 8px;
}

/* Ingredients Table */
.ingredients-table {
    overflow-x: auto;
}

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

.ingredients-table th,
.ingredients-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #e4e4e4;
}

.ingredients-table th {
    background: #f7f7f7;
    color: #5c5c5c;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
}

.ingredients-table td {
    color: #333;
}

/* Cross-Utilization */
.cross-util-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cross-util-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    border-left: 3px solid var(--primary);
}

.util-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f7f4;
    border-radius: 8px;
}

.util-icon i {
    color: var(--primary);
    font-size: 18px;
}

.util-content {
    flex: 1;
}

.util-title {
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.util-detail {
    font-size: 13px;
    color: #5c5c5c;
}

.util-savings {
    font-weight: 600;
    color: var(--primary);
    font-size: 14px;
}

/* Prep Schedule */
.prep-schedule {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prep-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
    border-left: 3px solid var(--primary);
}

.prep-time {
    font-weight: 600;
    color: var(--primary);
    min-width: 80px;
}

.prep-task {
    flex: 1;
    color: #333;
}

.prep-quantity {
    color: #5c5c5c;
    font-size: 13px;
}

/* Shift Recommendations */
.shift-recommendations {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

.shift-rec-card {
    padding: 16px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    border-left: 3px solid #5c5c5c;
}

.shift-rec-card.increase {
    border-left-color: var(--primary);
}

.shift-rec-card.decrease {
    border-left-color: #EF4444;
}

.shift-day {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.shift-change {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.shift-change .current {
    color: #5c5c5c;
}

.shift-change i {
    color: #5c5c5c;
}

.shift-change .recommended {
    color: var(--primary);
    font-weight: 600;
}

.shift-reason {
    font-size: 13px;
    color: #5c5c5c;
    margin-bottom: 8px;
}

.shift-savings {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
}

.shift-rec-card.decrease .shift-savings {
    color: #EF4444;
}

/* Staff Matrix */
.staff-matrix {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.staff-perf-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
}

.staff-avatar {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
}

.staff-info {
    flex: 1;
}

.staff-name {
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.staff-role {
    font-size: 12px;
    color: #5c5c5c;
}

.staff-metrics {
    display: flex;
    gap: 16px;
}

.perf-metric {
    text-align: center;
}

.perf-metric .metric-val {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
}

.perf-metric .metric-label {
    font-size: 11px;
    color: #5c5c5c;
}

/* Upskill List */
.upskill-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.upskill-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
}

.upskill-staff {
    font-weight: 600;
    color: #333;
    min-width: 100px;
}

.upskill-skill {
    flex: 1;
    color: #5c5c5c;
}

.upskill-impact {
    font-size: 13px;
    color: var(--primary);
}

/* Waste Items */
.waste-items-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.waste-item-card {
    padding: 16px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    border-left: 3px solid #EF4444;
}

.waste-item-name {
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.waste-item-reason {
    font-size: 12px;
    color: #5c5c5c;
    margin-bottom: 8px;
}

.waste-item-cost {
    font-weight: 600;
    color: #EF4444;
    margin-bottom: 8px;
}

.waste-item-action {
    font-size: 12px;
    color: var(--primary);
    padding: 6px 10px;
    background: #f0f7f4;
    border-radius: 6px;
    display: inline-block;
}

/* Strategies List */
.strategies-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.strategy-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
}

.strategy-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f7f4;
    border-radius: 8px;
}

.strategy-icon i {
    font-size: 20px;
    color: var(--primary);
}

.strategy-content {
    flex: 1;
}

.strategy-title {
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.strategy-detail {
    font-size: 13px;
    color: #5c5c5c;
}

.strategy-impact {
    text-align: center;
    padding: 8px 12px;
    background: #f0f7f4;
    border-radius: 6px;
}

.strategy-impact .impact-value {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
}

.strategy-impact .impact-label {
    font-size: 11px;
    color: #5c5c5c;
}

/* Autopilot Stats */
.autopilot-stats {
    display: flex;
    gap: 24px;
    padding: 16px 24px;
    background: #f7f7f7;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    margin-bottom: 20px;
}

.autopilot-stats .stat-item {
    text-align: center;
}

.autopilot-stats .stat-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: var(--primary);
}

.autopilot-stats .stat-label {
    font-size: 12px;
    color: #5c5c5c;
}

/* Supplier Scorecard */
.supplier-scorecard {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.supplier-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
}

.supplier-rank {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f7f7f7;
    border-radius: 6px;
    color: #5c5c5c;
    font-weight: 700;
}

.supplier-rank.top {
    background: #F59E0B;
    color: #fff;
}

.supplier-info {
    min-width: 150px;
}

.supplier-name {
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.supplier-category {
    font-size: 12px;
    color: #5c5c5c;
}

.supplier-metrics {
    flex: 1;
    display: flex;
    gap: 24px;
}

.supplier-metrics .metric {
    flex: 1;
}

.supplier-metrics .label {
    display: block;
    font-size: 11px;
    color: #5c5c5c;
    margin-bottom: 4px;
}

.supplier-metrics .score-bar {
    height: 6px;
    background: #e4e4e4;
    border-radius: 3px;
    margin-bottom: 4px;
}

.supplier-metrics .score-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
}

.supplier-metrics .value {
    font-size: 12px;
    color: #333;
}

.supplier-overall {
    text-align: center;
}

.overall-score {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.overall-score.excellent {
    background: var(--primary);
}

.overall-score.good {
    background: #F59E0B;
}

.overall-score.warning {
    background: #EF4444;
}

/* Delivery Predictions */
.delivery-predictions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.delivery-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    border-left: 3px solid #5c5c5c;
}

.delivery-card.low {
    border-left-color: var(--primary);
}

.delivery-card.medium {
    border-left-color: #F59E0B;
}

.delivery-card.high {
    border-left-color: #EF4444;
}

.delivery-date {
    text-align: center;
    min-width: 60px;
}

.delivery-date .day {
    font-size: 12px;
    color: #5c5c5c;
}

.delivery-date .date {
    font-weight: 600;
    color: #333;
}

.delivery-info {
    flex: 1;
}

.delivery-supplier {
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.delivery-items {
    font-size: 13px;
    color: #5c5c5c;
}

.delivery-status {
    text-align: right;
}

.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 4px;
}

.status-badge.low {
    background: #f0f7f4;
    color: var(--primary);
}

.status-badge.medium {
    background: #fef9f0;
    color: #F59E0B;
}

.status-badge.high {
    background: #fef2f2;
    color: #EF4444;
}

.delivery-status .confidence {
    display: block;
    font-size: 11px;
    color: #5c5c5c;
}

/* Customer Segments */
.segments-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.segment-card {
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #e4e4e4;
    transition: all 0.2s;
}

.segment-card:hover {
    border-color: var(--primary);
}

.segment-card.vip {
    border-color: #F59E0B;
}

.segment-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f7f4;
    border-radius: 50%;
}

.segment-card.vip .segment-icon {
    background: #fef9f0;
}

.segment-icon i {
    font-size: 20px;
    color: var(--primary);
}

.segment-card.vip .segment-icon i {
    color: #F59E0B;
}

.segment-name {
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.segment-count {
    font-size: 13px;
    color: #5c5c5c;
    margin-bottom: 4px;
}

.segment-value {
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 8px;
}

.segment-action {
    font-size: 11px;
    color: #5c5c5c;
    padding: 4px 8px;
    background: #f7f7f7;
    border-radius: 4px;
    display: inline-block;
}

/* At-Risk Customers */
.at-risk-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.at-risk-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    border-left: 3px solid #EF4444;
}

.customer-avatar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fef2f2;
    border-radius: 50%;
    color: #EF4444;
    font-weight: 700;
}

.customer-info {
    flex: 1;
}

.customer-name {
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.customer-detail {
    font-size: 12px;
    color: #5c5c5c;
}

.customer-value {
    font-size: 13px;
    color: #5c5c5c;
    margin-right: 16px;
}

/* Generator Options */
.generator-options {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.option-group {
    flex: 1;
    min-width: 150px;
}

.option-group label {
    display: block;
    font-size: 12px;
    color: #5c5c5c;
    margin-bottom: 8px;
}

.option-group select,
.option-group input {
    width: 100%;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
    color: #333;
    font-size: 14px;
}

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

/* Active Promotions */
.active-promos-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.active-promo-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
}

.promo-status {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #5c5c5c;
}

.promo-status.active {
    background: var(--primary);
}

.active-promo-card .promo-info {
    flex: 1;
}

.active-promo-card .promo-name {
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.promo-dates {
    font-size: 12px;
    color: #5c5c5c;
}

.promo-performance {
    display: flex;
    gap: 24px;
}

.promo-performance .perf-metric {
    text-align: center;
}

.promo-performance .value {
    display: block;
    font-weight: 600;
    color: var(--primary);
}

.promo-performance .label {
    font-size: 11px;
    color: #5c5c5c;
}

/* Responsive for consolidated tabs */
@media (max-width: 1200px) {
    .segments-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .forecast-kpis {
        grid-template-columns: 1fr;
    }

    .quick-reports-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ai-section-tabs {
        flex-direction: column;
    }

    .section-tab {
        width: 100%;
        justify-content: center;
    }

    .executive-banner {
        flex-direction: column;
        text-align: center;
    }

    .one-action-today {
        flex-direction: column;
        text-align: center;
    }

    .briefing-grid.compact {
        grid-template-columns: 1fr;
    }

    .matrix-grid {
        grid-template-columns: 1fr;
    }

    .segments-grid {
        grid-template-columns: 1fr;
    }

    .supplier-card {
        flex-wrap: wrap;
    }

    .supplier-metrics {
        width: 100%;
        margin-top: 12px;
    }
}

/* Autopilot Styles */
.ai-autopilot-container,
.ai-simulator-container,
.ai-menu-lab-container,
.ai-staff-iq-container,
.ai-waste-container,
.ai-supplier-container,
.ai-growth-container,
.ai-executive-container {
    padding: 20px;
}

.autopilot-control-panel {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid #6F4E37;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}

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

.autopilot-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.autopilot-title i {
    font-size: 28px;
    color: #C2A06A;
}

.autopilot-title h2 {
    margin: 0;
    color: #e4e4e4;
    font-size: 24px;
}

.autopilot-description {
    color: #5c5c5c;
    margin: 0;
    font-size: 14px;
}

.autopilot-master-switch {
    display: flex;
    align-items: center;
    gap: 12px;
}

.switch-label {
    font-weight: 600;
    color: #C2A06A;
    font-size: 14px;
}

/* Toggle Switch */
.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #3a3a5a;
    transition: 0.4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
}

input:checked + .slider {
    background-color: #6F4E37;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Automation Rules */
.automation-rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.automation-rule {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.rule-info {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #e4e4e4;
}

.rule-info i {
    color: #C2A06A;
    font-size: 18px;
}

.rule-btn {
    padding: 8px 16px;
    border: 1px solid #6F4E37;
    background: transparent;
    color: #6F4E37;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.2s;
}

.rule-btn:hover {
    background: rgba(194, 160, 106, 0.12);
}

.rule-btn.auto {
    background: #6F4E37;
    color: white;
}

/* AI Action Cards */
.ai-action-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 12px;
    transition: all 0.2s;
}

.ai-action-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: #C2A06A;
}

.ai-action-card.pending {
    border-left: 4px solid #F59E0B;
}

.ai-action-card.executed {
    border-left: 4px solid #16a34a;
}

.action-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(243, 156, 18, 0.2);
    border-radius: 12px;
    color: #F59E0B;
    font-size: 20px;
}

.action-icon.success {
    background: rgba(34, 139, 90, 0.2);
    color: #16a34a;
}

.action-content {
    flex: 1;
}

.action-title {
    font-weight: 600;
    color: #e4e4e4;
    margin-bottom: 4px;
}

.action-description {
    color: #5c5c5c;
    font-size: 13px;
    margin-bottom: 8px;
}

.action-reasoning {
    font-size: 12px;
    color: #6c5ce7;
    background: rgba(108, 92, 231, 0.1);
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 12px;
}

.action-reasoning i {
    margin-right: 6px;
}

.action-confidence {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
}

.confidence-label {
    color: #5c5c5c;
}

.confidence-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    max-width: 100px;
}

.confidence-fill {
    height: 100%;
    background: linear-gradient(90deg, #C2A06A, #C2A06A);
    border-radius: 3px;
}

.confidence-value {
    color: #C2A06A;
    font-weight: 600;
}

.action-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.action-time {
    font-size: 12px;
    color: #5c5c5c;
}

.action-undo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.undo-timer {
    font-family: monospace;
    color: #F59E0B;
    font-size: 14px;
}

.action-final {
    font-size: 12px;
    color: #5c5c5c;
    font-style: italic;
}

/* Quick Actions */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.ai-autopilot-container .quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #e4e4e4;
    cursor: pointer;
    transition: all 0.2s;
}

.ai-autopilot-container .quick-action-btn:hover {
    background: rgba(194, 160, 106, 0.12);
    border-color: #C2A06A;
}

.ai-autopilot-container .quick-action-btn i {
    font-size: 24px;
    color: #C2A06A;
}

.ai-autopilot-container .quick-action-btn span {
    font-size: 13px;
}

/* Scenario Builder (light theme; dark header pass removed — canonical
   lab/waste/simulator header styles live in the CLEAN LIGHT THEME section) */
.scenario-type-selector label {
    display: block;
    color: #5c5c5c;
    margin-bottom: 8px;
    font-size: 13px;
}

.type-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.type-btn {
    padding: 12px 20px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    color: #5c5c5c;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.type-btn:hover {
    border-color: var(--primary);
    color: #333;
}

.type-btn.active {
    background: rgba(194, 160, 106, 0.12);
    border-color: var(--primary);
    color: var(--primary);
}

.config-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.config-group label {
    display: block;
    color: #5c5c5c;
    margin-bottom: 8px;
    font-size: 13px;
}

.item-selector {
    max-height: 200px;
    overflow-y: auto;
    background: #f7f7f7;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    padding: 12px;
}

.item-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.item-checkbox:hover {
    background: rgba(0, 0, 0, 0.04);
}

.item-checkbox input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
}

.item-checkbox span {
    flex: 1;
    color: #333;
    font-size: 13px;
}

.current-price {
    color: #5c5c5c;
    font-size: 12px;
}

.slider-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.slider-container input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    height: 6px;
    background: #e4e4e4;
    border-radius: 3px;
}

.slider-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: var(--primary);
    border-radius: 50%;
    cursor: pointer;
}

.slider-value {
    font-weight: 600;
    font-size: 16px;
    min-width: 50px;
    text-align: right;
    color: #333;
}

.slider-value.positive { color: #16a34a; }
.slider-value.negative { color: #EF4444; }

.config-group select {
    width: 100%;
    padding: 12px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    color: #333;
    font-size: 14px;
}

/* Simulation Results */
.simulation-results {
    padding: 20px 0;
}

.result-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.result-kpi {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.result-kpi.positive {
    border-color: rgba(39, 174, 96, 0.3);
    background: rgba(39, 174, 96, 0.05);
}

.result-kpi.negative {
    border-color: rgba(231, 76, 60, 0.3);
    background: rgba(231, 76, 60, 0.05);
}

.result-kpi.neutral {
    border-color: rgba(243, 156, 18, 0.3);
    background: rgba(243, 156, 18, 0.05);
}

.result-kpi .kpi-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 20px;
}

.result-kpi.positive .kpi-icon { color: #16a34a; }
.result-kpi.negative .kpi-icon { color: #EF4444; }
.result-kpi.neutral .kpi-icon { color: #F59E0B; }

.result-kpi .kpi-content .kpi-value {
    font-size: 24px;
    font-weight: 700;
    color: #333;
}

.result-kpi .kpi-content .kpi-label {
    font-size: 12px;
    color: #5c5c5c;
}

.ai-recommendations {
    background: rgba(108, 92, 231, 0.1);
    border: 1px solid rgba(108, 92, 231, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.ai-recommendations h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6c5ce7;
    margin: 0 0 12px 0;
}

.ai-recommendations ul {
    margin: 0;
    padding-left: 20px;
    color: #e4e4e4;
}

.ai-recommendations li {
    margin-bottom: 8px;
}

.simulation-actions {
    display: flex;
    gap: 12px;
}

/* Menu Suggestions */
.menu-suggestions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.suggestion-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s;
}

.suggestion-card:hover {
    border-color: #C2A06A;
}

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

.suggestion-name {
    font-weight: 600;
    font-size: 18px;
    color: #e4e4e4;
}

.suggestion-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.suggestion-badge.high {
    background: rgba(39, 174, 96, 0.2);
    color: #16a34a;
}

.suggestion-badge.medium {
    background: rgba(243, 156, 18, 0.2);
    color: #F59E0B;
}

.suggestion-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.suggestion-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #a1a1a6;
    font-size: 13px;
}

.suggestion-stat i {
    color: #C2A06A;
    width: 16px;
}

.suggestion-ingredients {
    font-size: 13px;
    color: #a1a1a6;
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

.suggestion-actions {
    display: flex;
    gap: 8px;
}

/* Time-Based Pricing */
.time-pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.time-pricing-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.time-pricing-card.highlight {
    border-color: #C2A06A;
    background: rgba(194, 160, 106, 0.08);
}

.time-icon {
    font-size: 32px;
    color: #C2A06A;
    margin-bottom: 12px;
}

.time-pricing-card h4 {
    margin: 0 0 8px 0;
    color: #e4e4e4;
}

.pricing-insight {
    font-size: 12px;
    color: #a1a1a6;
    margin-bottom: 16px;
}

.pricing-suggestion {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}

.pricing-suggestion span:first-child {
    color: #e4e4e4;
}

.expected-impact {
    color: #C2A06A;
    font-weight: 500;
}

/* Synergy List */
.synergy-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.synergy-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.synergy-ingredient {
    width: 120px;
    font-weight: 500;
    color: #e4e4e4;
}

.synergy-bar {
    flex: 1;
    height: 8px;
    background: linear-gradient(90deg, #C2A06A, #C2A06A);
    border-radius: 4px;
    max-width: 300px;
}

.synergy-percent {
    width: 100px;
    text-align: right;
    color: #a1a1a6;
    font-size: 13px;
}

/* Optimization Cards */
.optimization-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.optimization-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
}

.opt-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(194, 160, 106, 0.2);
    border-radius: 12px;
    color: #C2A06A;
    font-size: 20px;
}

.opt-content {
    flex: 1;
}

.opt-title {
    font-weight: 600;
    color: #e4e4e4;
    margin-bottom: 4px;
}

.opt-description {
    font-size: 13px;
    color: #a1a1a6;
    margin-bottom: 8px;
}

.opt-impact {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #C2A06A;
}

/* Training Cards */
.training-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.training-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
}

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

.staff-name {
    font-weight: 600;
    color: #e4e4e4;
}

.priority-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.priority-badge.high {
    background: rgba(231, 76, 60, 0.2);
    color: #EF4444;
}

.priority-badge.medium {
    background: rgba(243, 156, 18, 0.2);
    color: #F59E0B;
}

.gap-area {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e4e4e4;
    margin-bottom: 8px;
}

.gap-area i {
    color: #C2A06A;
}

.gap-details {
    font-size: 13px;
    color: #a1a1a6;
    margin-bottom: 12px;
}

.recommended-training {
    font-size: 13px;
    color: #6c5ce7;
    padding: 10px;
    background: rgba(108, 92, 231, 0.1);
    border-radius: 8px;
    margin-bottom: 12px;
}

/* Waste KPI Grid */
.waste-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.waste-kpi-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.waste-kpi-card .kpi-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 20px;
}

.waste-kpi-card .kpi-icon.danger {
    background: rgba(231, 76, 60, 0.2);
    color: #EF4444;
}

.waste-kpi-card .kpi-icon.warning {
    background: rgba(243, 156, 18, 0.2);
    color: #F59E0B;
}

.waste-kpi-card .kpi-icon.success {
    background: rgba(39, 174, 96, 0.2);
    color: #16a34a;
}

.waste-kpi-card .kpi-icon.info {
    background: rgba(52, 152, 219, 0.2);
    color: #3b82f6;
}

.waste-kpi-card .kpi-value {
    font-size: 28px;
    font-weight: 700;
    color: #e4e4e4;
}

.waste-kpi-card .kpi-label {
    font-size: 12px;
    color: #a1a1a6;
}

/* Attribution Grid */
.attribution-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.attribution-card {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.attribution-card.danger {
    border-color: rgba(231, 76, 60, 0.3);
}

.attribution-card.warning {
    border-color: rgba(243, 156, 18, 0.3);
}

.attr-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #a1a1a6;
    font-size: 18px;
}

.attr-content {
    flex: 1;
}

.attr-name {
    font-weight: 500;
    color: #e4e4e4;
    margin-bottom: 4px;
}

.attr-value {
    font-size: 18px;
    font-weight: 600;
    color: #EF4444;
    margin-bottom: 8px;
}

.attr-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin-bottom: 4px;
}

.attr-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #EF4444, #F59E0B);
    border-radius: 2px;
}

.attr-percent {
    font-size: 11px;
    color: #a1a1a6;
}

/* Reduction Plan */
.reduction-plan {
    padding: 20px 0;
}

.plan-target {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    background: rgba(194, 160, 106, 0.12);
    border: 1px solid rgba(194, 160, 106, 0.3);
    border-radius: 12px;
    margin-bottom: 20px;
}

.target-label {
    color: #a1a1a6;
}

.target-value {
    font-size: 24px;
    font-weight: 700;
    color: #C2A06A;
}

.target-savings {
    color: #C2A06A;
}

.plan-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.plan-step {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
}

.step-number {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #6F4E37;
    color: white;
    border-radius: 50%;
    font-weight: 600;
}

.step-content {
    flex: 1;
}

.step-title {
    font-weight: 600;
    color: #e4e4e4;
    margin-bottom: 4px;
}

.step-description {
    font-size: 13px;
    color: #a1a1a6;
    margin-bottom: 4px;
}

.step-impact {
    font-size: 12px;
    color: #C2A06A;
}

/* Supplier Grid */
.supplier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

.supplier-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.reliability-score {
    font-size: 24px;
    font-weight: 700;
}

.reliability-score.good { color: #16a34a; }
.reliability-score.medium { color: #F59E0B; }
.reliability-score.poor { color: #EF4444; }

.supplier-alert {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: rgba(243, 156, 18, 0.1);
    border-radius: 8px;
    font-size: 13px;
    color: #F59E0B;
    margin-bottom: 16px;
}

.supplier-actions {
    display: flex;
    gap: 8px;
}

/* Predictions */
.predictions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.prediction-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.prediction-card.high {
    border-color: rgba(231, 76, 60, 0.3);
}

.prediction-card.low {
    border-color: rgba(39, 174, 96, 0.3);
}

.pred-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
}

.prediction-card.high .pred-icon {
    background: rgba(231, 76, 60, 0.2);
    color: #EF4444;
}

.prediction-card.low .pred-icon {
    background: rgba(39, 174, 96, 0.2);
    color: #16a34a;
}

.pred-content {
    flex: 1;
}

.pred-title {
    font-weight: 600;
    color: #e4e4e4;
}

.pred-detail {
    font-size: 13px;
    color: #a1a1a6;
}

.pred-probability {
    font-weight: 600;
    color: #F59E0B;
}

/* Volatility Badge */
.volatility-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.volatility-badge.high {
    background: rgba(231, 76, 60, 0.2);
    color: #EF4444;
}

.volatility-badge.low {
    background: rgba(39, 174, 96, 0.2);
    color: #16a34a;
}

/* Promo Grid */
.promo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.promo-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    position: relative;
}

.promo-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    padding: 4px 10px;
    background: rgba(108, 92, 231, 0.2);
    color: #6c5ce7;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

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

.promo-header h4 {
    margin: 0;
    color: #e4e4e4;
}

.promo-discount {
    font-size: 20px;
    font-weight: 700;
    color: #C2A06A;
}

.promo-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.promo-details .detail {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #a1a1a6;
    font-size: 13px;
}

.promo-details .detail i {
    color: #C2A06A;
    width: 16px;
}

.promo-impact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px;
    background: rgba(194, 160, 106, 0.08);
    border-radius: 8px;
    margin-bottom: 16px;
}

.impact-stat {
    text-align: center;
}

.impact-value {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #C2A06A;
}

.impact-label {
    font-size: 11px;
    color: #a1a1a6;
}

.promo-actions {
    display: flex;
    gap: 8px;
}

/* Demand Visualization */
.demand-visualization {
    margin-bottom: 24px;
}

.hour-grid {
    display: flex;
    gap: 8px;
    height: 150px;
    align-items: flex-end;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
}

.hour-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
}

.bar-fill {
    width: 100%;
    background: linear-gradient(180deg, #C2A06A, #573C2A);
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    transition: height 0.3s;
}

.hour-bar.low-demand .bar-fill {
    background: linear-gradient(180deg, #F59E0B, #d68910);
}

.hour-label {
    font-size: 10px;
    color: #a1a1a6;
    margin-top: 8px;
}

.opportunity-badge {
    position: absolute;
    top: -8px;
    right: -4px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EF4444;
    color: white;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
}

/* Shaping Recommendations */
.shaping-recommendations h4 {
    color: #e4e4e4;
    margin-bottom: 16px;
}

.shaping-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shaping-action {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
}

.action-time {
    padding: 8px 16px;
    background: rgba(194, 160, 106, 0.2);
    color: #C2A06A;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
}

.action-content {
    flex: 1;
}

.action-title {
    font-weight: 600;
    color: #e4e4e4;
}

.action-impact {
    font-size: 13px;
    color: #C2A06A;
}

/* Campaigns List */
.campaigns-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.campaign-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
}

.campaign-card.active {
    border-left: 4px solid #16a34a;
}

.campaign-status {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #16a34a;
    font-size: 12px;
}

.campaign-status i {
    font-size: 8px;
}

.campaign-name {
    flex: 1;
    font-weight: 600;
    color: #e4e4e4;
}

.campaign-performance {
    display: flex;
    gap: 16px;
    color: #a1a1a6;
    font-size: 13px;
}

/* Executive - Health Score */
.health-score-section {
    margin-bottom: 24px;
}

.health-score-card {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 30px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid #C2A06A;
    border-radius: 16px;
}

.score-gauge {
    position: relative;
    width: 160px;
    text-align: center;
}

.score-gauge svg {
    width: 160px;
    height: 80px;
}

.score-value {
    font-size: 48px;
    font-weight: 700;
    color: #e4e4e4;
    margin-top: -20px;
}

.score-label {
    font-size: 14px;
    color: #a1a1a6;
}

.health-factors {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.factor {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

.factor span:first-child {
    color: #a1a1a6;
}

.factor span:last-child {
    font-weight: 600;
}

.factor.positive span:last-child {
    color: #16a34a;
}

.factor.negative span:last-child {
    color: #EF4444;
}

/* Briefing Grid */
.briefing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

/* Base card for AI hub sections (modifiers .risks/.opportunities/.key-action below) */
.section-card {
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.section-card.risks {
    border-color: rgba(231, 76, 60, 0.3);
}

.section-card.opportunities {
    border-color: rgba(194, 160, 106, 0.3);
}

.briefing-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.briefing-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
}

.item-rank {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    font-weight: 600;
    color: #a1a1a6;
}

.item-content {
    flex: 1;
}

.item-title {
    font-weight: 600;
    color: #e4e4e4;
    margin-bottom: 4px;
}

.item-detail {
    font-size: 13px;
    color: #a1a1a6;
    margin-bottom: 8px;
}

.item-action {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #C2A06A;
}

.item-value {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: #C2A06A;
    font-weight: 600;
}

.item-severity {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    height: fit-content;
}

.item-severity.high {
    background: rgba(231, 76, 60, 0.2);
    color: #EF4444;
}

.item-severity.medium {
    background: rgba(243, 156, 18, 0.2);
    color: #F59E0B;
}

.item-severity.low {
    background: rgba(52, 152, 219, 0.2);
    color: #3b82f6;
}

/* Key Action */
.section-card.key-action {
    border-color: #F59E0B;
    background: rgba(243, 156, 18, 0.05);
}

.key-action-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.key-action-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(243, 156, 18, 0.2);
    border-radius: 16px;
    color: #F59E0B;
    font-size: 28px;
}

.key-action-text {
    flex: 1;
}

.key-action-text h3 {
    margin: 0 0 8px 0;
    color: #F59E0B;
    font-size: 16px;
}

.key-action-text p {
    margin: 0;
    color: #e4e4e4;
    font-size: 14px;
}

/* Anomaly Cards */
.anomaly-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.anomaly-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.anomaly-card.high {
    border-color: rgba(231, 76, 60, 0.3);
    background: rgba(231, 76, 60, 0.05);
}

.anomaly-card.medium {
    border-color: rgba(243, 156, 18, 0.3);
    background: rgba(243, 156, 18, 0.05);
}

.anomaly-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(231, 76, 60, 0.2);
    border-radius: 10px;
    color: #EF4444;
    font-size: 18px;
}

.anomaly-content {
    flex: 1;
}

.anomaly-title {
    font-weight: 600;
    color: #e4e4e4;
    margin-bottom: 4px;
}

.anomaly-detail {
    font-size: 13px;
    color: #a1a1a6;
    margin-bottom: 8px;
}

.anomaly-context {
    font-size: 12px;
    color: #6c5ce7;
}

.anomaly-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Metrics Grid */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.metric-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.metric-card .metric-value {
    font-size: 28px;
    font-weight: 700;
    color: #e4e4e4;
}

.metric-card .metric-label {
    font-size: 13px;
    color: #a1a1a6;
    margin-bottom: 8px;
}

.metric-change {
    font-size: 12px;
}

.metric-change.positive {
    color: #16a34a;
}

.metric-change.negative {
    color: #EF4444;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}

.empty-state i {
    font-size: 40px;
    opacity: 0.4;
    margin-bottom: 12px;
    display: block;
}

.empty-state p {
    font-size: 14px;
    margin: 0;
}

/* The 40px display:block rule above is for the DECORATIVE icon. It also reached
   the little icon inside an empty-state's call-to-action button, which turned a
   normal CTA into a giant block with a huge plus sign. A button's own icon
   always follows the button. */
.empty-state .btn i,
.empty-state button i,
.empty-state a i {
    font-size: inherit;
    display: inline;
    margin-bottom: 0;
    opacity: 1;
}

/* Empty State Success */
.empty-state.success {
    color: #16a34a;
}

.empty-state.success i {
    color: #16a34a;
}

/* Responsive */
@media (max-width: 1200px) {
    .result-kpis,
    .metrics-grid,
    .waste-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .config-row {
        grid-template-columns: 1fr;
    }

    .briefing-grid {
        grid-template-columns: 1fr;
    }

    .time-pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .result-kpis,
    .metrics-grid,
    .waste-kpi-grid {
        grid-template-columns: 1fr;
    }

    .health-score-card {
        flex-direction: column;
        text-align: center;
    }

    .health-factors {
        grid-template-columns: 1fr;
    }

    .time-pricing-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   QUEBO ANALYZE - Executive Summary Dashboard
   ============================================================================ */

.ava-analyze-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.analyze-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.analyze-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.analyze-title > i {
    font-size: 2.5rem;
    color: var(--primary-color);
}

.analyze-title h1 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-color);
}

.analyze-title .subtitle {
    display: block;
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 400;
}

/* Summary Grid */
.analyze-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.analyze-summary-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--border-color);
    transition: transform 0.2s, box-shadow 0.2s;
}

.analyze-summary-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.analyze-summary-card .card-icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.analyze-summary-card.success .card-icon {
    background: rgba(39, 174, 96, 0.15);
    color: #16a34a;
}

.analyze-summary-card.danger .card-icon {
    background: rgba(231, 76, 60, 0.15);
    color: #EF4444;
}

.analyze-summary-card.warning .card-icon {
    background: rgba(243, 156, 18, 0.15);
    color: #F59E0B;
}

.analyze-summary-card.info .card-icon {
    background: rgba(52, 152, 219, 0.15);
    color: #3b82f6;
}

.analyze-summary-card .card-content {
    flex: 1;
}

.analyze-summary-card .card-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1;
}

.analyze-summary-card .card-label {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.analyze-summary-card .card-status {
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: 4px;
}

.analyze-summary-card.success .card-status { color: #16a34a; }
.analyze-summary-card.danger .card-status { color: #EF4444; }
.analyze-summary-card.warning .card-status { color: #F59E0B; }
.analyze-summary-card.info .card-status { color: #3b82f6; }

/* Priority Section */
.priority-section {
    background: linear-gradient(135deg, var(--primary-color), #5a52d5);
    border-radius: 12px;
    padding: 24px;
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
    color: white;
}

.priority-section .section-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.priority-section .section-content {
    flex: 1;
}

.priority-section h3 {
    margin: 0 0 12px 0;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.priority-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px;
}

.priority-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.priority-detail {
    font-size: 0.875rem;
    opacity: 0.9;
    margin-bottom: 12px;
}

.priority-action {
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.priority-action i {
    font-size: 0.75rem;
}

/* Alert Sections */
.analyze-section {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
}

.analyze-section.critical-section {
    border-left: 4px solid #EF4444;
}

.analyze-section.attention-section {
    border-left: 4px solid #F59E0B;
}

.analyze-section.opportunities-section {
    border-left: 4px solid #C2A06A;
}

.analyze-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.analyze-section .section-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.analyze-section .section-header h3 i {
    font-size: 0.875rem;
}

.critical-section .section-header h3 i { color: #EF4444; }
.attention-section .section-header h3 i { color: #F59E0B; }
.opportunities-section .section-header h3 i { color: #C2A06A; }

/* Alert Items */
.alert-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* NOTE: the bare .alert-item card style was a stale duplicate (4th definition,
   referenced undefined --bg-color) — canonical bare rules live earlier in this
   file; .alerts-list .alert-item covers the inventory alerts markup. */
.alert-item .alert-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.alert-item.critical .alert-icon {
    background: rgba(231, 76, 60, 0.15);
    color: #EF4444;
}

.alert-item.attention .alert-icon {
    background: rgba(243, 156, 18, 0.15);
    color: #F59E0B;
}

.alert-item.opportunity .alert-icon {
    background: rgba(194, 160, 106, 0.15);
    color: #C2A06A;
}

.alert-item .alert-content {
    flex: 1;
}

.alert-item .alert-title {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 2px;
}

.alert-item .alert-detail {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.alert-item .alert-value {
    font-size: 0.8rem;
    color: #C2A06A;
    font-weight: 500;
    margin-top: 4px;
}

.alert-item .alert-actions {
    display: flex;
    gap: 8px;
}

/* Footer */
.analyze-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.analyze-footer .footer-note {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Alert Badge in Sidebar */
.nav-item .alert-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

.alert-badge.critical {
    background: #EF4444;
    color: white;
}

.alert-badge.warning {
    background: #F59E0B;
    color: white;
}

/* Badges */
.badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.badge-danger {
    background: rgba(231, 76, 60, 0.15);
    color: #EF4444;
}

.badge-warning {
    background: rgba(243, 156, 18, 0.15);
    color: #F59E0B;
}

.badge-info {
    background: rgba(52, 152, 219, 0.15);
    color: #3b82f6;
}

.badge-success {
    background: rgba(39, 174, 96, 0.15);
    color: #16a34a;
}

/* Responsive */
@media (max-width: 1024px) {
    .analyze-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .ava-analyze-container {
        padding: 16px;
    }

    .analyze-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .analyze-summary-grid {
        grid-template-columns: 1fr;
    }

    .analyze-summary-card {
        padding: 16px;
    }

    .priority-section {
        flex-direction: column;
    }

    .alert-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .alert-item .alert-actions {
        width: 100%;
    }

    .alert-item .alert-actions .btn {
        width: 100%;
    }

    .analyze-footer {
        flex-direction: column;
        text-align: center;
    }
}

/* ===== Dashboard: compact Recent Orders (inside Order Type Breakdown) ===== */
.recent-orders-mini {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.recent-order-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #efefef;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.recent-order-row:hover {
    background: #eef0f2;
}
.recent-order-row .ro-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.recent-order-row .ro-id {
    font-weight: 700;
    font-size: 13px;
    color: #1a1a1a;
}
.recent-order-row .ro-type {
    font-size: 11px;
    color: #5c5c5c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.recent-order-row .ro-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.recent-order-row .ro-total {
    font-weight: 700;
    font-size: 13px;
    color: var(--primary);
}

/* Toast Notifications */
.toast-container,
#toastContainer {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 250px;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    color: var(--white);
    font-size: 14px;
    box-shadow: var(--shadow-lg);
    animation: slideIn 0.3s ease;
}

.toast-success {
    background: var(--success);
}

.toast-error {
    background: var(--error-dark);
}

.toast-warning {
    background: var(--warning);
}

.toast-info {
    background: #eff6ff;
    color: #2563EB;
    border: 1px solid #dbeafe;
}


/* Under the blue brand, status/positive indicators stay green (success role) */
.status-available, .status-ok, .status-confirmed, .status-on-duty, .status-completed,
.alert-item.success, .confidence-badge.high, .cost-badge.normal, .status-badge.ok,
.status-badge.success, .supplier-status.active, .res-day-time, .menu-mcard-cat {
    color: #6F4E37;
}

/* ============================================================
   PREMIUM BUTTON EFFECTS — lift, press, sheen, ripple
   ============================================================ */
.btn {
    position: relative;
    overflow: hidden;
    transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.4, 1),
                box-shadow 0.22s cubic-bezier(0.2, 0.8, 0.4, 1),
                background 0.22s ease, filter 0.22s ease;
    will-change: transform;
}

/* Hover: subtle lift with depth */
.btn:hover:not(:disabled) {
    transform: translateY(-1.5px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14);
}

/* Press: tactile push-down */
.btn:active:not(:disabled) {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.10);
    transition-duration: 0.05s;
}

/* Primary: soft top-light gradient + brand glow on hover */
.btn-primary {
    background: linear-gradient(180deg, #6F4E37 0%, #573C2A 100%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-primary:hover:not(:disabled) {
    background: linear-gradient(180deg, #573C2A 0%, #3E2A1C 100%);
    box-shadow: 0 6px 18px rgba(194, 160, 106, 0.38),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-success:hover:not(:disabled) { box-shadow: 0 6px 18px rgba(34, 197, 94, 0.35); }
.btn-danger:hover:not(:disabled) { box-shadow: 0 6px 18px rgba(239, 68, 68, 0.32); }
.btn-warning:hover:not(:disabled) { box-shadow: 0 6px 18px rgba(245, 158, 11, 0.32); }

/* Keyboard focus: brand glow ring */
.btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

/* Click ripple (injected by JS) */
.btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    transform: scale(0);
    animation: btnRipple 0.55s ease-out forwards;
    pointer-events: none;
    z-index: 1;
}
/* Light-surface buttons get a dark ripple instead */
.btn-secondary .btn-ripple,
.btn-outline .btn-ripple {
    background: rgba(15, 23, 42, 0.12);
}
@keyframes btnRipple {
    to { transform: scale(1); opacity: 0; }
}

/* Disabled: no effects */
.btn:disabled {
    transform: none;
    box-shadow: none;
    opacity: 0.55;
    cursor: not-allowed;
}

/* ============================================================
   AUTH LOGIN — Sign In / Create Account tabs
   ============================================================ */
.auth-tabs {
    display: flex;
    gap: 6px;
    background: #efefef;
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 18px;
}
.auth-tab {
    flex: 1;
    padding: 9px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #5c5c5c;
    font-weight: 600;
    font-size: 13.5px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.18s ease;
}
.auth-tab.active {
    background: #fff;
    color: #6F4E37;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}
.auth-msg {
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 12px;
    line-height: 1.5;
}
.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    color: #9a9a9a;
    font-size: 12px;
}
.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e4e4e4;
}

/* Signed-in boot: keep the login screen invisible while the session loads */
.authed-boot .login-screen {
    opacity: 0;
    pointer-events: none;
}

/* ============================================================
   MULTI-BRANCH — top-bar branch chip
   ============================================================ */
.branch-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border: 1px solid #e4e4e4;
    border-radius: 999px;
    background: #fff;
    color: #1a1a1a;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.18s ease;
}
.branch-chip:hover {
    border-color: #6F4E37;
    background: #F3E9D7;
}
.branch-chip i.fa-store {
    color: #6F4E37;
}

/* Staff view: branch chip is informational only (owner-only switching) */
.branch-chip-readonly {
    pointer-events: none;
    cursor: default;
}
.branch-chip-readonly .fa-chevron-down {
    display: none;
}

/* ============================================================
   LOGIN — professional polish + dark logo
   ============================================================ */
/* Dark logo: pre-colored deep-green mark (images/logo-dark-green.png) */
.login-logo {
    max-width: 150px;
    margin-bottom: 16px;
}

/* Ambient depth: soft green light blobs behind the card */
.login-screen {
    overflow: hidden;
}
.login-screen::before,
.login-screen::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.login-screen::before {
    width: 480px;
    height: 480px;
    top: -140px;
    left: -120px;
    background: radial-gradient(circle, rgba(194, 160, 106, 0.16), transparent 70%);
}
.login-screen::after {
    width: 560px;
    height: 560px;
    bottom: -180px;
    right: -140px;
    background: radial-gradient(circle, rgba(194, 160, 106, 0.14), transparent 70%);
}
.login-layout {
    position: relative;
    z-index: 1;
}

/* Card: roomier, softer, layered shadow */
.login-container {
    padding: 44px 40px 38px;
    border-radius: 20px;
    border: 1px solid rgba(194, 160, 106, 0.08);
    box-shadow: 0 24px 60px rgba(194, 160, 106, 0.13), 0 2px 8px rgba(15, 23, 42, 0.05);
}

/* Typography hierarchy */
.login-header h1 {
    font-size: 23px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: #0f172a;
    margin-bottom: 4px;
}
.login-subtitle {
    font-size: 13px;
    color: #5c5c5c;
    letter-spacing: 0.2px;
}

/* Inputs: taller, calm, with a clear green focus state */
.login-form .form-group label {
    font-size: 12.5px;
    font-weight: 600;
    color: #4a4a4a;
    margin-bottom: 6px;
}
.login-form .form-group input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1.5px solid #e4e4e4;
    border-radius: 10px;
    font-size: 14.5px;
    font-family: inherit;
    color: #1a1a1a;
    background: #f7f7f7;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.login-form .form-group input::placeholder {
    color: #9a9a9a;
}
.login-form .form-group input:focus {
    outline: none;
    border-color: #6F4E37;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(194, 160, 106, 0.14);
}

/* Primary action: bigger, confident */
.login-form .btn-block {
    padding: 13px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 10px;
    justify-content: center;
}

/* Tabs: larger touch targets */
.auth-tabs {
    padding: 5px;
    border-radius: 12px;
    margin-bottom: 20px;
}
.auth-tab {
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 9px;
}

/* Secondary buttons (Try the Demo / Quick Login / Back): quiet outline */
.login-form .role-toggle-btn {
    background: #fff;
    border: 1.5px solid #e4e4e4;
    color: #4a4a4a;
    border-radius: 10px;
    padding: 11px;
    font-weight: 600;
    font-size: 13.5px;
    justify-content: center;
    transition: all 0.18s ease;
}
.login-form .role-toggle-btn:hover {
    border-color: #6F4E37;
    color: #6F4E37;
    background: #FAF7F2;
}

/* ============================================================
   LOGIN — fit-to-viewport adjustments (compact + scrollable)
   ============================================================ */
/* Scroll as a safety net on short screens; blobs only need x clipped */
.login-screen {
    overflow-x: hidden;
    overflow-y: auto;
}
/* margin:auto centers when it fits, aligns sanely when it overflows */
.login-layout {
    margin: auto;
    padding: 18px 0;
}

/* Compact the card so everything fits a laptop viewport */
.login-container {
    padding: 26px 32px 24px;
}
.login-logo {
    max-width: 100px;
    margin-bottom: 8px;
}
.login-header {
    margin-bottom: 16px;
}
.login-header h1 {
    font-size: 19px;
    margin-bottom: 2px;
}
.login-subtitle {
    font-size: 12px;
}
.login-form .form-group {
    margin-bottom: 12px;
}
.login-form .form-group label {
    margin-bottom: 4px;
}
.login-form .form-group input {
    padding: 10px 13px;
    font-size: 14px;
}
.auth-tabs {
    margin-bottom: 14px;
    padding: 4px;
}
.auth-tab {
    padding: 8px 10px;
    font-size: 13.5px;
    white-space: nowrap;
}
.login-form .btn-block {
    padding: 11px;
    font-size: 14.5px;
}
.login-divider {
    margin: 12px 0;
}
.login-form .role-toggle-btn {
    padding: 9px;
    font-size: 13px;
}
.login-notice {
    font-size: 11.5px;
    padding: 8px 10px;
}
.login-footer {
    margin-top: 12px;
}

/* ============================================================
   KITCHEN PREP SUMMARY — combined component totals
   ============================================================ */
.prep-summary {
    background: #fff;
    border: 1px solid #e4e4e4;
    border-left: 4px solid #6F4E37;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 18px;
}
.prep-summary-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.prep-summary-head h4 {
    margin: 0;
    font-size: 15px;
    color: #1a1a1a;
}
.prep-summary-head h4 i {
    color: #6F4E37;
}
.prep-summary-sub {
    font-size: 12px;
    color: #5c5c5c;
}
.prep-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.prep-chip {
    background: #F3E9D7;
    color: #6F4E37;
    border: 1px solid #D8BE8E;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
}
.prep-chip strong {
    font-size: 16px;
    font-weight: 800;
}
/* Per-ticket component breakdown line */
.ticket-breakdown {
    font-size: 12px;
    color: #6b7280;
    padding: 3px 0 0 38px;
    line-height: 1.5;
}

/* ============================================================
   MENU & PRICING CARDS — compact size (dating sobrang laki)
   ============================================================ */
.menu-grid.menu-manage-grid {
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 14px;
}

/* ---- Menu card FLIP (front = photo/price/actions, back = details) ----
   Both faces are stacked in the SAME grid cell, so the card's height is the
   taller of the two and nothing jumps mid-flip. No will-change here: promoting
   every card in a long menu to its own compositor layer costs more memory than
   the animation saves. */
.menu-mcard-flip {
    perspective: 1200px;
    min-height: 0;
}
.menu-mcard-flip .mcard-inner {
    display: grid;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform .62s cubic-bezier(.22, .72, .24, 1);
}
.menu-mcard-flip.is-flipped .mcard-inner { transform: rotateY(180deg); }
.menu-mcard-flip .mcard-face {
    grid-area: 1 / 1;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.menu-mcard-flip .mcard-back { transform: rotateY(180deg); }

/* The little ⓘ on the photo that starts the flip */
.mcard-flip-btn {
    position: absolute;
    top: 8px; right: 8px;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--primary);
    font-size: 14px; cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    transition: transform .16s ease, background .16s ease;
    z-index: 3;
}
.mcard-flip-btn:hover { background: #fff; transform: scale(1.12); }
.mcard-flip-btn:active { transform: scale(.94); }

/* ---- drag-to-reorder handle ----
   Bottom-left of the photo: clear of the BESTSELLER badge (top-left) and the
   flip button (top-right). touch-action:none is what stops a finger-drag from
   scrolling the page instead of moving the card. */
.mcard-drag {
    position: absolute;
    left: 8px; bottom: 8px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 9px;
    background: rgba(255, 255, 255, .92);
    color: #57534e;
    font-size: 13px;
    cursor: grab;
    touch-action: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    transition: background .16s ease, color .16s ease;
    z-index: 3;
}
.mcard-drag:hover { background: #fff; color: var(--primary); }
.mcard-drag:active { cursor: grabbing; }
/* Coarse pointers get the full 44px target without growing the visible chip. */
@media (pointer: coarse) {
    .mcard-drag { width: 44px; height: 44px; border-radius: 12px; font-size: 15px; }
}

.menu-mcard-flip.is-dragging {
    /* pointer-events off so the card under the finger stays hit-testable */
    pointer-events: none;
    z-index: 60;
    opacity: .93;
    filter: drop-shadow(0 14px 28px rgba(194, 160, 106, .28));
}
.menu-mcard-flip.is-dragging .mcard-inner { transition: none; }
/* Kill hover lift + text selection everywhere while a drag is in progress. */
body.menu-dragging { user-select: none; -webkit-user-select: none; }
body.menu-dragging .menu-item:hover { transform: none; }

.menu-reorder-hint {
    display: flex; align-items: center; gap: 8px;
    margin: -6px 0 14px;
    font-size: 12.5px; line-height: 1.5; color: #5c5c5c;
    background: #f8fafc; border: 1px solid #eceff2;
    border-radius: 10px; padding: 9px 12px;
}
.menu-reorder-hint i { color: var(--primary); }

/* Back face — same card shell, detail-first content */
.mcard-back {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 6px 18px rgba(194, 160, 106, .10);
}
.mcard-back-head {
    display: flex; align-items: flex-start; gap: 8px;
    padding-bottom: 8px; margin-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}
.mcard-back-name {
    flex: 1; min-width: 0;
    font-size: 14px; font-weight: 700; line-height: 1.3;
    color: var(--text-dark);
}
.mcard-back .mcard-flip-back { position: static; flex-shrink: 0; box-shadow: none; background: var(--primary-light); }
.mcard-back-body { flex: 1; min-height: 0; overflow-y: auto; }
.mcard-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: #f3f4f6; color: #4b5563;
    font-size: 11px; font-weight: 600;
    padding: 3px 9px; border-radius: 999px;
    margin: 0 4px 6px 0;
}
.mcard-chip--good { background: var(--primary-light); color: var(--primary); }
.mcard-desc {
    margin: 4px 0 0;
    font-size: 12.5px; line-height: 1.45;
    color: var(--text-dark);
}
.mcard-desc--empty { color: var(--text-light); font-style: italic; }
.mcard-back-foot {
    display: flex; align-items: center; gap: 8px;
    padding-top: 8px; margin-top: 8px;
    border-top: 1px solid var(--border-color);
}
.mcard-back-price {
    flex: 1;
    font-size: 15px; font-weight: 700; color: var(--primary);
}
/* Respect the OS "reduce motion" switch — flip instantly instead. */
@media (prefers-reduced-motion: reduce) {
    .menu-mcard-flip .mcard-inner { transition: none; }
}

/* ---- Category tabs: drag to reorder (Menu & Stock) ----
   touch-action:none only on the draggable tabs, so the pointermove handler can
   take over horizontally without the page fighting it for the gesture. */
.menu-mgmt-cat-tabs .category-tab { cursor: grab; touch-action: none; }
.menu-mgmt-cat-tabs .category-tab:active { cursor: grabbing; }
.menu-mgmt-cat-tabs .category-tab[data-category="__all__"] { cursor: pointer; touch-action: auto; }
.menu-mgmt-cat-tabs .category-tab.cat-dragging {
    opacity: .9;
    transform: scale(1.06);
    box-shadow: 0 8px 20px rgba(194, 160, 106, .28);
    z-index: 2;
}

/* ---- Delivery board: rider assignment picker ---- */
.rider-assign {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 3px 8px 3px 10px;
    border: 1.5px solid var(--border-color);
    border-radius: 999px;
    background: #fff;
    font-size: 11.5px;
    font-weight: 600;
    color: #57534e;
    cursor: pointer;
}
.rider-assign i { color: var(--primary); font-size: 11px; }
.rider-assign select {
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    max-width: 150px;
    padding: 2px 0;
}
.rider-assign select:focus { outline: none; }

/* ---- POS item info (ⓘ on the card → popover) ----
   The button sits opposite the "+" so a fast tap never hits the wrong one. */
.menu-item-info {
    position: absolute;
    top: 8px; right: 8px;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--primary);
    font-size: 13px; cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .16);
    transition: transform .14s ease, background .14s ease;
    z-index: 3;
}
.menu-item-info:hover { background: #fff; transform: scale(1.12); }
.menu-item-info:active { transform: scale(.94); }
.menu-item-goodfor {
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--primary-light); color: var(--primary);
    font-size: 10.5px; font-weight: 700;
    padding: 2px 8px; border-radius: 999px;
    margin: 0 0 4px;
}
.pos-info-pop {
    position: fixed;
    z-index: 10050;
    width: min(280px, calc(100vw - 24px));
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 12px 34px rgba(16, 24, 40, .18);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .16s ease, transform .16s ease;
}
.pos-info-pop.is-in { opacity: 1; transform: translateY(0); }
.pos-info-pop .pip-head {
    display: flex; align-items: flex-start; gap: 8px;
    margin-bottom: 8px;
}
.pos-info-pop .pip-name {
    flex: 1; min-width: 0;
    font-size: 14px; font-weight: 700; color: var(--text-dark); line-height: 1.3;
}
.pos-info-pop .pip-close {
    flex-shrink: 0; border: 0; background: none; cursor: pointer;
    font-size: 22px; line-height: 1; color: var(--text-light); padding: 0 2px;
}
.pos-info-pop .pip-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--primary-light); color: var(--primary);
    font-size: 11px; font-weight: 700;
    padding: 3px 9px; border-radius: 999px; margin-bottom: 7px;
}
.pos-info-pop .pip-desc {
    font-size: 12.5px; line-height: 1.5; color: var(--text-dark);
    max-height: 180px; overflow-y: auto;
}
.pos-info-pop .pip-empty { color: var(--text-light); font-style: italic; }
.pos-info-pop .pip-foot {
    margin-top: 9px; padding-top: 8px;
    border-top: 1px solid var(--border-color);
    font-size: 15px; font-weight: 700; color: var(--primary);
}

/* ---- Settings → Payroll & Benefits ----
   One group per contribution, each with its own switch, so the page reads as a
   short list of decisions instead of a wall of unlabelled number boxes. */
.pay-cfg-group {
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #f1f0ec;
}
.pay-cfg-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
}
.pay-cfg-title i { color: var(--primary); }
.pay-cfg-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    font-weight: 700;
}
.pay-cfg-switch input { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; }
.pay-cfg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px 16px;
}
.pay-cfg-grid > label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #57534e;
}
.pay-cfg-grid > label small {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-light);
}
.pay-cfg-off {
    background: #f8fafc;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 12.5px;
    color: var(--text-light);
}

.menu-mcard {
    padding: 12px;
    border-radius: 14px;
}
.menu-mcard .menu-item-img {
    border-radius: 10px;
    margin-bottom: 10px;
}
.menu-mcard .menu-item-name {
    font-size: 14.5px;
    margin-bottom: 5px;
}
.menu-mcard-cat {
    font-size: 11px;
    padding: 3px 10px;
    margin-bottom: 8px;
}
.menu-mcard-pricing {
    padding: 8px 0 9px;
}
.menu-mcard-price {
    font-size: 17px;
    letter-spacing: -0.3px;
}
/* Availability pill — slightly tighter on compact cards, but keep the
   44px tap target (Fitts's Law) for easy mobile management. */
.mcard-avail-toggle {
    margin-top: 8px;
    min-height: 44px;
    padding: 7px 14px;
    font-size: 12px;
}
.mcard-avail-toggle i { font-size: 12px; }
.menu-mcard-actions {
    gap: 6px;
}
.menu-mcard-actions .btn {
    height: 40px;
    border-radius: 10px;
    font-size: 13px;
    gap: 6px;
    padding: 0 8px;
}
/* Keep the icon squares truly square and a comfortable tap size on phones. */
.menu-mcard-actions .mcard-btn-del,
.menu-mcard-actions .mcard-eye {
    flex: 0 0 40px;
    width: 40px;
    padding: 0;
    font-size: 14px;
}
.menu-mcard-upload {
    font-size: 10px;
    padding: 5px;
}

/* ===========================================================================
   Rider delivery cards + route map
   =========================================================================== */
/* ---- Responsive grid container ---- */
.rider-order-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin-top: 8px;
    align-items: stretch;
    text-align: left;
}

/* ---- Card shell ---- */
.rider-order-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    overflow: hidden;
    padding: 18px 18px 16px 22px;       /* extra left pad clears the rail */
    text-align: left;
    background: var(--white, #fff);
    border: 1px solid var(--border, #e4e4e4);
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, .06));
    cursor: pointer;
    color: var(--text-dark, #1a1a1a);
    transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}

.rider-order-card:hover,
.rider-order-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--primary, #6F4E37);
    box-shadow: 0 10px 28px rgba(194, 160, 106, .18);
    outline: none;
}

.rider-order-card:focus-visible {
    outline: 2px solid var(--primary, #6F4E37);
    outline-offset: 2px;
}

.rider-order-card:active {
    transform: translateY(-1px);
}

/* ---- Status-colored left accent rail ----
   Colored via a plain modifier class .rider-order-card--<status>, so it works
   on every browser (no :has()/color-mix()). */
.rider-order-card__rail {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--primary, #6F4E37);   /* default / completed */
}

.rider-order-card--pending    .rider-order-card__rail { background: #f59e0b; }
.rider-order-card--in-kitchen .rider-order-card__rail { background: #2563eb; }
.rider-order-card--served     .rider-order-card__rail { background: #0e7490; }
.rider-order-card--ready      .rider-order-card__rail { background: #7c3aed; }
.rider-order-card--out-for-delivery .rider-order-card__rail { background: #ea580c; }
.rider-order-card--completed  .rider-order-card__rail { background: var(--primary, #6F4E37); }
.rider-order-card--cancelled  .rider-order-card__rail { background: #dc2626; }

/* ---- Top row: status pill + id/time ---- */
.rider-order-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.rider-order-card__status {
    text-transform: capitalize;
    letter-spacing: .2px;
    white-space: nowrap;
}

.rider-order-card__meta-id {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.rider-order-card__id {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-light, #5c5c5c);
}

.rider-order-card__time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-light, #5c5c5c);
}

.rider-order-card__time i {
    font-size: 11px;
    opacity: .8;
}

/* ---- Headline: customer name ---- */
.rider-order-card__name {
    margin: 2px 0 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-dark, #1a1a1a);
    text-align: left;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Info stack: address + phone + GPS chip ---- */
.rider-order-card__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

.rider-order-card__line {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text-light, #5c5c5c);
    text-align: left;
}

.rider-order-card__line i {
    flex: 0 0 16px;
    margin-top: 2px;
    font-size: 13px;
    text-align: center;
}

.rider-order-card__line--addr span {
    color: var(--text-dark, #1a1a1a);
    font-weight: 500;
    word-break: break-word;
}

.rider-order-card__pin {
    color: #ef4444;
}

.rider-order-card__phone-ico {
    color: var(--primary, #6F4E37);
}

.rider-order-card__phone {
    font-weight: 600;
    color: var(--primary, #6F4E37);
    text-decoration: none;
}

.rider-order-card__phone:hover {
    color: var(--primary-hover, #573C2A);
    text-decoration: underline;
}

.rider-order-card__phone:focus-visible {
    outline: 2px solid var(--primary, #6F4E37);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ---- GPS-pin chip (pure CSS) ---- */
.rider-order-card__gps {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 1px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 999px;
}

.rider-order-card__gps i { font-size: 8px; }

.rider-order-card__gps-yes,
.rider-order-card__gps-no { display: none; }

.rider-order-card__gps--true {
    background: #F3E9D7;
    color: var(--primary, #6F4E37);
}
.rider-order-card__gps--true .rider-order-card__gps-yes { display: inline; }

.rider-order-card__gps--false {
    background: var(--surface, #f7f7f7);
    color: var(--text-light, #5c5c5c);
}
.rider-order-card__gps--false .rider-order-card__gps-no { display: inline; }

/* ---- Payment strip: prominent total ---- */
.rider-order-card__pay {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 2px;
    padding: 11px 14px;
    background: rgba(194, 160, 106, .07);
    border: 1px solid rgba(194, 160, 106, .14);
    border-radius: var(--radius-md, 10px);
}

.rider-order-card__pay-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--text-light, #5c5c5c);
}

.rider-order-card__pay-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.rider-order-card__total {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--primary, #6F4E37);
}

.rider-order-card__items {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-light, #5c5c5c);
    white-space: nowrap;
}

/* ---- Shared button base ---- */
.rider-order-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-md, 10px);
    cursor: pointer;
    transition: background .18s ease, color .18s ease, border-color .18s ease,
                box-shadow .18s ease, transform .12s ease;
}

.rider-order-card__btn:active { transform: translateY(1px); }

.rider-order-card__btn:focus-visible {
    outline: 2px solid var(--primary, #6F4E37);
    outline-offset: 2px;
}

/* ---- Hero CTA: View route / Navigate ---- */
.rider-order-card__cta { margin-top: 2px; }

.rider-order-card__btn--route {
    width: 100%;
    padding: 13px 16px;
    font-size: 15px;
    font-weight: 700;
    color: var(--white, #fff);
    background: var(--primary, #6F4E37);
    border: 1px solid var(--primary, #6F4E37);
    box-shadow: 0 4px 12px rgba(194, 160, 106, .26);
}

.rider-order-card__btn--route i { font-size: 15px; }

.rider-order-card__btn--route:hover {
    background: var(--primary-hover, #573C2A);
    border-color: var(--primary-hover, #573C2A);
    box-shadow: 0 6px 16px rgba(194, 160, 106, .32);
}

/* ---- Secondary actions row (Details + injected Delivered) ---- */
.rider-order-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
}

.rider-order-card__actions > * { flex: 1 1 auto; }

.rider-order-card__btn--ghost {
    padding: 10px 14px;
    color: var(--text-dark, #1a1a1a);
    background: var(--surface, #f7f7f7);
    border: 1px solid var(--border, #e4e4e4);
}

.rider-order-card__btn--ghost:hover {
    color: var(--primary, #6F4E37);
    border-color: var(--primary, #6F4E37);
    background: var(--primary-light, rgba(194, 160, 106, .06));
}

/* Normalize the injected Delivered button (.btn.btn-primary) so it lines up as
   a peer of the ghost Details button in this row. */
.rider-order-card__actions .btn {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    border-radius: var(--radius-md, 10px);
}

/* Phone / single-column */
@media (max-width: 600px) {
    .rider-order-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .rider-order-card {
        padding: 16px 16px 14px 20px;
    }
    .rider-order-card__name { font-size: 17px; }
    .rider-order-card__total { font-size: 21px; }
}

/* ---- Operations Hub header: keep title LEVEL with its bell icon, no subtitle ---- */
#operations-hub-module .hub-title {
    align-items: center;
}

#operations-hub-module .hub-title h1 {
    margin: 0;
    line-height: 1.2;
}

#operations-hub-module .hub-subtitle {
    display: none;
}

/* --- Route map modal --- */
.rider-map-dialog {
    background: var(--white);
    border-radius: 14px;
    width: 100%;
    max-width: 720px;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
    padding: 18px 20px 20px;
}

.rider-map-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.rider-map-head h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.rider-map-sub {
    font-size: 13px;
    color: var(--text-light);
    margin-top: 3px;
}

.rider-map-addr {
    font-size: 14px;
    color: var(--text-dark);
    margin: 12px 0 6px;
    display: flex;
    align-items: flex-start;
    gap: 7px;
}

.rider-route-summary {
    font-size: 13.5px;
    color: var(--text-light);
    min-height: 20px;
    margin-bottom: 10px;
}

.rider-map {
    width: 100%;
    height: 380px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: #e9eef2;
    z-index: 1;
}

.rider-map-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.rider-map-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
}

/* Pulsing "you are here" marker for the rider's own position */
.rider-me-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2563eb;
    border: 3px solid var(--white);
    box-shadow: 0 0 0 rgba(37, 99, 235, 0.5);
    animation: riderPulse 1.6s infinite;
}

@keyframes riderPulse {
    0%   { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5); }
    70%  { box-shadow: 0 0 0 12px rgba(37, 99, 235, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

@media (max-width: 600px) {
    .rider-map { height: 320px; }
}

/* =============================================================================
   RESPONSIVE HARDENING (APPEND-ONLY) — cross-gadget + phone LANDSCAPE
   Nothing here edits/deletes an existing rule. Every landscape rule is gated
   behind (orientation:landscape)+(max-height:*) so portrait/tablet/desktop are
   untouched. Reuses existing classes (.sidebar/.active/.sidebar-backdrop,
   .modal/.modal-overlay, .rider-map*, .login-*, .pos-order-section) and tokens.
   ============================================================================= */

/* 1) [CRITICAL] WIDE landscape phones (>768px wide) skip the max-width:768px
   mobile block and get the desktop 280px full-height sidebar with NO hamburger
   to dismiss it. Re-apply the same off-canvas pattern the app already uses at
   <=768px. .menu-toggle -> toggleSidebar() already toggles .active /
   .sidebar-backdrop.active, so NO JS change is needed. */
@media (max-width: 1024px) and (orientation: landscape) and (max-height: 600px) {
    /* off-canvas drawer mode — the desktop "minimize" tab doesn't apply here */
    .sidebar-collapse-btn { display: none; }
    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: -280px;
        width: 280px;       /* re-pin so a restored .collapsed width can't interfere */
        min-width: 280px;
        z-index: 1001;
    }
    .sidebar.active {
        transform: translateX(280px);
    }
    .sidebar-backdrop.active {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1000;
    }
    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
}

/* 2) [CRITICAL] Short-landscape chrome + overlays for ALL landscape phones.
   Slim the two stacked 70px bars, give static modals more height, and make the
   JS-injected flex-centered overlays scrollable + top-aligned so their header
   (close) and footer buttons stay reachable. */
@media (orientation: landscape) and (max-height: 600px) {

    /* Slimmer chrome reclaims vertical space */
    .top-bar {
        height: 52px;
        padding-top: 0;
        padding-bottom: 0;
        padding-left: max(15px, env(safe-area-inset-left));
        padding-right: max(15px, env(safe-area-inset-right));
    }
    .sidebar-header {
        height: 52px;
    }

    /* Static HTML .modal cards: use nearly the full short height */
    .modal {
        max-height: 96vh;
    }
    .modal-header {
        padding: 12px 20px;
    }
    .modal-body {
        max-height: calc(96vh - 64px);
        -webkit-overflow-scrolling: touch;
    }

    /* JS-injected .modal-overlay dialogs render inline as display:flex;
       align-items:center with no scroll. Top-align + scroll the overlay so the
       close (x) and action buttons are always reachable. !important is only to
       beat the inline align-items:center; harmless on the empty #modalOverlay. */
    .modal-overlay {
        align-items: flex-start !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    .modal-overlay > div {
        max-height: none;
    }

    /* Rider route map: fixed 380px map fills the short viewport and buries the
       action buttons. Shrink to a vh-based height with a floor. */
    .rider-map-dialog {
        max-height: 96vh;
        padding: 12px 14px 14px;
    }
    .rider-map {
        height: 42vh;
        min-height: 150px;
    }
    .rider-map-head h3 { font-size: 16px; }
    .rider-map-addr { margin: 8px 0 4px; }
    .rider-route-summary { margin-bottom: 6px; }
    .rider-map-actions { margin-top: 10px; }

    /* Login + slide-out role panel: compact + TOP-align so the existing
       .login-screen overflow-y:auto reveals everything. */
    .login-screen {
        justify-content: flex-start;
        align-items: flex-start;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px;
    }
    .login-layout {
        margin: 0 auto;
        padding: 8px 0;
        align-items: flex-start;
    }
    .login-container {
        padding: 18px 22px 16px;
    }
    .login-header { margin-bottom: 10px; }
    .login-logo { max-width: 72px; margin-bottom: 6px; }
    .login-form .form-group { margin-bottom: 12px; }
    .role-panel { align-self: flex-start; }
    .role-panel.open {
        align-self: flex-start;
        padding: 20px 18px;
        max-height: none;
    }
    .role-panel .role-buttons { gap: 10px; }
    .role-panel .role-btn { padding: 10px 8px; }
}

/* 3) [HIGH] POS order bar overlaps the still-visible 280px desktop sidebar
   between 769-1024px (.pos-order-section becomes position:fixed;left:0 while the
   sidebar is still an in-flow 280px column). Offset the bar past it. */
@media (min-width: 769px) and (max-width: 1024px) {
    .pos-order-section {
        left: 280px;
    }
}

/* 4) PHONE-PORTRAIT / SMALL-GADGET polish (additive, scoped). */

/* 4a) >=44px hit boxes for the two most-used phone controls. */
@media (max-width: 768px) {
    .menu-toggle {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: -8px;
    }
    .modal-close {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    #operationsHubContent [style*="overflow: auto"],
    #operationsHubContent [style*="overflow:auto"] {
        -webkit-overflow-scrolling: touch;
    }
}

/* 4b) Narrow-portrait top-bar crowding + long module titles + toast width. */
@media (max-width: 480px) {
    .top-bar { gap: 8px; }
    .top-bar-left { min-width: 0; flex: 1; gap: 10px; }
    .top-bar-right { gap: 10px; }
    .module-title {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .toast-container,
    #toastContainer {
        left: 12px;
        right: 12px;
        align-items: stretch;
    }
    .toast {
        min-width: 0;
        width: 100%;
    }
}

/* 4c) Wide data tables already use overflow-x:auto on .table-container; give
   .data-table a min-width so the intended horizontal scroll actually triggers
   instead of squeezing columns. */
@media (max-width: 600px) {
    .table-container {
        -webkit-overflow-scrolling: touch;
    }
    .table-container .data-table {
        min-width: 560px;
    }
}

/* 4d) Smallest phones: scale the off-canvas drawer so a backdrop strip stays
   tappable. */
@media (max-width: 360px) {
    .sidebar {
        width: 86vw;
        min-width: 86vw;
        left: -86vw;
    }
    .sidebar.active {
        transform: translateX(86vw);
    }
}

/* =====================================================================
   ATTENDANCE EMPLOYEE PICKER — searchable, grouped-by-role list used by
   the Biometric Time Clock card. Self-contained (.att-picker / .att-emp).
   White panel that reads well on the green clock card; works on phone + desktop.

   Design language: clean / minimal / premium. Refined hairline search field
   with a tasteful green :focus-within ring; quiet NON-STICKY role captions
   that flow with their group (removes the old header bleed-through and
   half-clipped-avatar bug by construction, in EVERY scroll position).
   Radius rhythm: search 12px -> list 14px -> rows 10px.
   ===================================================================== */
.att-picker{ width:100%; }
/* --- Search: first-class hairline field, not a floating white pill.
       Fixed height for a solid hit target; calm green focus ring. --- */
.att-picker__search{
    display:flex; align-items:center; gap:10px;
    background:#fff;
    border:1px solid #e2e8f0;
    border-radius:12px;
    padding:0 14px;
    height:46px;
    margin-bottom:10px;
    box-shadow:0 1px 2px rgba(16,24,40,.05);
    transition:border-color .15s ease, box-shadow .15s ease;
}
.att-picker__search:focus-within{
    border-color:#6F4E37;
    box-shadow:0 0 0 3px rgba(194,160,106,.16);
}
.att-picker__search i{
    color:#94a3b8; font-size:14px; flex:0 0 auto;
    transition:color .15s ease;
}
.att-picker__search:focus-within i{ color:#6F4E37; }
.att-picker__search input{
    flex:1; min-width:0; border:none; outline:none; background:transparent;
    font-size:15px; color:#1a1a1a; font-family:inherit;
    height:100%; padding:0; line-height:1.2;
}
.att-picker__search input::placeholder{ color:#94a3b8; opacity:1; }

/* --- List panel: white bordered surface on the green card; radius sits
       one notch larger than the search field above it. --- */
.att-picker__list{
    background:#fff;
    border:1px solid #eceff2;
    border-radius:14px;
    padding:6px;
    /* Taller list so more staff names are visible at once (was 300px); caps at
       62% of the viewport so it never overflows the screen on short displays. */
    max-height:min(620px, 62vh); overflow-y:auto;
    box-shadow:0 1px 2px rgba(16,24,40,.05);
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
}
.att-picker__list::-webkit-scrollbar{ width:8px; }
.att-picker__list::-webkit-scrollbar-thumb{
    background:#cbd5e1; border-radius:8px;
    border:2px solid #fff; background-clip:padding-box;
}
.att-picker__list::-webkit-scrollbar-thumb:hover{
    background:#94a3b8; background-clip:padding-box;
}
.att-picker__list::-webkit-scrollbar-track{ background:transparent; }

/* --- Role groups: quiet captions that FLOW with their group (NON-STICKY).
       Spacing is margin-only — robust under the JS filter, which toggles
       display:none on whole groups/rows. Sibling-combinator separators
       (border-top on .att-rolegroup + .att-rolegroup) would match across a
       display:none group and leave a stray line above the first visible
       group during search, so we deliberately avoid them. --- */
.att-rolegroup + .att-rolegroup{ margin-top:6px; }
.att-rolehead{
    display:flex; align-items:center; gap:8px;
    padding:8px 12px 5px;
    font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:#94a3b8;
    /* Explicitly supersede the old position:sticky/top:0/z-index. The caption
       now flows in document order, so no employee row can peek above it and a
       single-employee group can never show a half-clipped avatar — in EVERY
       scroll position. This removes the bleed-through bug by construction. */
    position:static; top:auto; background:transparent; z-index:auto;
}
.att-rolegroup:first-child .att-rolehead{ padding-top:5px; }
.att-rolecount{
    background:#f1f5f9; color:#64748b; border-radius:999px;
    padding:1px 8px; font-size:11px; font-weight:700; letter-spacing:0;
    line-height:1.5;
}

.att-emp{
    display:flex; align-items:center; gap:12px; width:100%;
    padding:9px 12px; margin:1px 0;
    border:none; background:transparent; border-radius:10px;
    cursor:pointer; text-align:left; font-family:inherit;
    transition:background .15s ease;
}
.att-emp:hover{ background:#f1f5f9; }
.att-emp:focus-visible{ outline:2px solid #6F4E37; outline-offset:-2px; }
.att-emp.is-selected{ background:#F3E9D7; }
.att-emp__avatar{
    flex:0 0 auto; width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:700; font-size:13.5px; letter-spacing:.02em;
}
.att-emp__main{ display:flex; flex-direction:column; min-width:0; flex:1; }
.att-emp__name{
    font-size:15px; font-weight:600; color:#1a1a1a; line-height:1.25;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.att-emp__role{ font-size:12.5px; color:#64748b; line-height:1.25; }
.att-emp__in{
    flex:0 0 auto; display:inline-flex; align-items:center; gap:5px;
    font-size:11px; font-weight:700; color:#6F4E37;
    background:#F3E9D7; border-radius:999px; padding:3px 9px;
}
.att-emp__in i{ font-size:7px; }
.att-emp__radio{
    flex:0 0 auto; width:20px; height:20px; border-radius:50%;
    border:2px solid #cbd5e1; position:relative; transition:border-color .15s ease;
}
.att-emp.is-selected .att-emp__radio{ border-color:#6F4E37; }
.att-emp.is-selected .att-emp__radio::after{
    content:""; position:absolute; inset:3px; border-radius:50%; background:#6F4E37;
}
.att-picker__empty{
    display:none; padding:20px 12px; text-align:center;
    color:#94a3b8; font-size:13px;
}

@media (max-width:600px){
    .att-picker__list{ max-height:46vh; }
    .att-emp__name{ font-size:15px; }
}

/* =====================================================================
   CASH DRAWER — friendly hero card, styled open/close modals, a
   denomination counter with live variance, and Cash In/Out. (.cd- prefix)
   ===================================================================== */
.cd-hero{ border-radius:16px; padding:22px 24px; margin-bottom:22px; color:#fff; box-shadow:0 8px 24px rgba(194,160,106,.20); }
.cd-hero--open{ background:linear-gradient(135deg,#6F4E37 0%,#573C2A 100%); }
/* Closed reads as "off" by being DARK and desaturated, not by leaving the
   brand palette — slate blue was the only blue surface in a green app. */
.cd-hero--closed{ background:linear-gradient(135deg,#3E2A1C 0%,#573C2A 100%); }
.cd-hero__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.cd-hero__status{ display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:14px; background:rgba(255,255,255,.18); padding:7px 15px; border-radius:999px; }
.cd-dot{ width:9px; height:9px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.25); }
.cd-hero__btn{ border:none; border-radius:10px; padding:11px 18px; font-weight:700; font-size:14px; cursor:pointer; background:#fff; color:#6F4E37; display:inline-flex; align-items:center; gap:8px; }
.cd-hero__btn:hover{ filter:brightness(.97); }
.cd-hero__btn--danger{ color:#b91c1c; }
.cd-hero__balance{ margin:18px 0 4px; }
.cd-hero__balance span{ display:block; font-size:13px; opacity:.85; }
.cd-hero__balance strong{ font-size:38px; font-weight:800; letter-spacing:-.01em; font-variant-numeric:tabular-nums; line-height:1.1; }
.cd-hero__stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; background:rgba(255,255,255,.12); border-radius:12px; padding:14px; }
.cd-hero__stats > div{ display:flex; flex-direction:column; gap:3px; }
.cd-hero__stats span{ font-size:11px; opacity:.85; text-transform:uppercase; letter-spacing:.04em; }
.cd-hero__stats strong{ font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; }
.cd-hero__actions{ display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
.cd-hero__actions button{ flex:1; min-width:130px; justify-content:center; border:2px solid rgba(255,255,255,.6); background:transparent; color:#fff; border-radius:10px; padding:11px; font-weight:700; font-size:14px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; }
.cd-hero__actions button:hover{ background:rgba(255,255,255,.14); }

.cd-section-title{ display:flex; align-items:center; gap:8px; margin:22px 0 10px; font-size:15px; font-weight:700; color:var(--text-dark, #1a1a1a); }
.cd-section-title i{ color:#6F4E37; }

/* Modals (self-contained, sit above app modals) */
.cd-modal{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:10010; padding:16px; }
.cd-dialog{ background:#fff; border-radius:16px; width:100%; max-width:440px; box-shadow:0 20px 60px rgba(0,0,0,.3); overflow:hidden; max-height:92vh; display:flex; flex-direction:column; }
.cd-dialog--wide{ max-width:520px; }
.cd-dialog__head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; color:#fff; font-size:17px; font-weight:700; }
.cd-dialog__head--green{ background:#6F4E37; }
.cd-dialog__head--red{ background:#b91c1c; }
.cd-dialog__head i{ margin-right:8px; }
.cd-x{ background:none; border:none; color:#fff; font-size:26px; line-height:1; cursor:pointer; opacity:.9; }
.cd-x:hover{ opacity:1; }
.cd-dialog__body{ padding:20px; overflow-y:auto; }
.cd-dialog__foot{ display:flex; gap:10px; justify-content:flex-end; padding:14px 20px; border-top:1px solid #eef2f7; }
.cd-dialog__foot .btn{ min-width:130px; justify-content:center; }
.cd-btn-cancel{ min-width:110px; border:1px solid #cbd5e1; background:#fff; color:#475569; border-radius:10px; padding:11px 16px; font-weight:600; font-size:14px; cursor:pointer; }
.cd-btn-cancel:hover{ background:#f1f5f9; }
.cd-help{ margin:0 0 14px; color:#64748b; font-size:13.5px; }
.cd-label{ display:block; font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#64748b; margin-bottom:8px; }
.cd-amount-input{ display:flex; align-items:center; gap:8px; border:2px solid #e2e8f0; border-radius:12px; padding:12px 14px; }
.cd-amount-input:focus-within{ border-color:#6F4E37; }
.cd-amount-input span{ font-size:22px; font-weight:700; color:#6F4E37; }
.cd-amount-input input{ border:none; outline:none; font-size:24px; font-weight:700; width:100%; color:#1a1a1a; font-variant-numeric:tabular-nums; }
.cd-text-input{ width:100%; border:2px solid #e2e8f0; border-radius:10px; padding:11px 14px; font-size:15px; outline:none; }
.cd-text-input:focus{ border-color:#6F4E37; }
.cd-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.cd-chip{ border:1px solid #cbd5e1; background:#f8fafc; color:#334155; border-radius:999px; padding:7px 14px; font-size:13px; font-weight:600; cursor:pointer; }
.cd-chip:hover{ background:#6F4E37; color:#fff; border-color:#6F4E37; }

.cd-expectbar{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; background:#f1f5f9; border-radius:12px; padding:12px; margin-bottom:18px; }
.cd-expectbar > div{ display:flex; flex-direction:column; gap:2px; }
.cd-expectbar span{ font-size:11px; color:#64748b; text-transform:uppercase; letter-spacing:.03em; }
.cd-expectbar strong{ font-size:14.5px; font-variant-numeric:tabular-nums; color:#1a1a1a; }
.cd-expectbar__exp{ background:#6F4E37; border-radius:8px; padding:6px 10px; }
.cd-expectbar__exp span, .cd-expectbar__exp strong{ color:#fff; }

.cd-dengrid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; }
.cd-denrow{ display:grid; grid-template-columns:58px 12px 1fr auto; align-items:center; gap:8px; }
.cd-den{ font-weight:700; color:#334155; font-variant-numeric:tabular-nums; }
.cd-denx{ color:#94a3b8; }
.cd-dencount{ width:100%; min-width:0; border:1.5px solid #e2e8f0; border-radius:8px; padding:7px 8px; font-size:14px; text-align:center; outline:none; font-variant-numeric:tabular-nums; }
.cd-dencount:focus{ border-color:#6F4E37; }
.cd-densub{ font-size:12.5px; color:#64748b; font-variant-numeric:tabular-nums; min-width:70px; text-align:right; }

.cd-counttotal{ display:flex; align-items:center; justify-content:space-between; margin-top:18px; padding:12px 14px; background:#f8fafc; border:1px solid #eef2f7; border-radius:10px; }
.cd-counttotal span{ font-weight:600; color:#475569; }
.cd-counttotal strong{ font-size:22px; font-weight:800; color:#1a1a1a; font-variant-numeric:tabular-nums; }
.cd-variance{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; padding:12px 14px; border-radius:10px; font-weight:700; }
.cd-variance strong{ font-size:18px; font-variant-numeric:tabular-nums; }
.cd-variance.is-balanced{ background:#F3E9D7; color:#6F4E37; }
.cd-variance.is-over{ background:#fef9c3; color:#a16207; }
.cd-variance.is-short{ background:#fee2e2; color:#b91c1c; }

@media (max-width:600px){
    .cd-hero__stats{ grid-template-columns:repeat(2,1fr); }
    .cd-hero__balance strong{ font-size:32px; }
    .cd-expectbar{ grid-template-columns:repeat(2,1fr); }
    .cd-dengrid{ grid-template-columns:1fr; }
}

/* =====================================================================
   DAILY SUMMARY — plain-language, complete end-of-day overview.
   Big metric cards + short labels + compact breakdown panels. (.dsum- prefix)
   ===================================================================== */
.dsum{ max-width:860px; }
.dsum__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; }
.dsum__title{ font-size:18px; font-weight:800; color:var(--text-dark, #1a1a1a); }
.dsum__date{ font-size:13px; color:#64748b; margin-top:2px; }
.dsum__line{ background:#FAF7F2; border:1px solid rgba(194,160,106,.18); color:#6F4E37; font-size:13.5px; font-weight:600; padding:8px 14px; border-radius:999px; }
.dsum__line b{ font-weight:800; }

.dsum__cards{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:18px; }
.dsum-card{ background:#fff; border:1px solid #eef2f7; border-radius:14px; padding:14px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.dsum-card__ic{ width:34px; height:34px; border-radius:9px; background:#FAF7F2; color:#6F4E37; display:flex; align-items:center; justify-content:center; font-size:15px; margin-bottom:9px; }
.dsum-card__v{ font-size:20px; font-weight:800; color:var(--text-dark, #1a1a1a); font-variant-numeric:tabular-nums; line-height:1.15; }
.dsum-card__l{ font-size:12.5px; font-weight:700; color:#334155; margin-top:3px; }
.dsum-card__d{ font-size:11.5px; color:#94a3b8; margin-top:2px; line-height:1.3; }
.dsum-card.is-pos .dsum-card__v{ color:#6F4E37; }
.dsum-card.is-pos .dsum-card__ic{ background:#F3E9D7; }
.dsum-card.is-neg .dsum-card__v{ color:#b91c1c; }
.dsum-card.is-neg .dsum-card__ic{ background:#fee2e2; color:#b91c1c; }

/* Redesigned summary — a P&L "hero" (Net + the two numbers that make it) sits
   above smaller secondary metric chips, so the bottom line reads at a glance. */
.dsum-hero{
    display:grid; grid-template-columns:1.25fr 1fr; gap:20px; align-items:center;
    background:#fff; border:1px solid #eef2f7; border-radius:16px;
    padding:20px 22px; box-shadow:0 1px 2px rgba(0,0,0,.04); margin-bottom:12px;
}
.dsum-hero__label{ font-size:13px; font-weight:700; color:#64748b; }
.dsum-hero__val{ font-size:34px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; margin-top:5px; }
.dsum-hero.is-pos .dsum-hero__val{ color:#6F4E37; }
.dsum-hero.is-neg .dsum-hero__val{ color:#b91c1c; }
.dsum-hero__sub{ font-size:12px; color:#94a3b8; margin-top:6px; }
.dsum-hero__io{ display:flex; flex-direction:column; gap:12px; border-left:1px solid #f1f5f9; padding-left:20px; }
.dsum-io{ display:flex; align-items:center; gap:11px; }
.dsum-io__ic{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.dsum-io--in .dsum-io__ic{ background:#FAF7F2; color:#6F4E37; }
.dsum-io--out .dsum-io__ic{ background:#fef2f2; color:#dc2626; }
.dsum-io__l{ font-size:12px; color:#64748b; font-weight:600; }
.dsum-io__v{ font-size:17px; font-weight:800; color:var(--text-dark,#1a1a1a); font-variant-numeric:tabular-nums; }

.dsum-mini{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
.dsum-mini__c{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #eef2f7; border-radius:14px; padding:12px 14px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.dsum-mini__ic{ width:34px; height:34px; border-radius:9px; background:#f8fafc; color:#64748b; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.dsum-mini__v{ font-size:18px; font-weight:800; color:var(--text-dark,#1a1a1a); font-variant-numeric:tabular-nums; line-height:1.1; }
.dsum-mini__l{ font-size:12px; font-weight:700; color:#334155; margin-top:1px; }
.dsum-mini__d{ font-size:11px; color:#94a3b8; }

.dsum-section-label{ font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#94a3b8; margin:4px 2px 11px; }

.dsum__panels{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.dsum-panel{ background:#fff; border:1px solid #eef2f7; border-radius:14px; padding:14px 16px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.dsum-panel__t{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--text-dark, #1a1a1a); margin-bottom:10px; padding-bottom:9px; border-bottom:1px solid #f1f5f9; }
.dsum-panel__t i{ color:#6F4E37; }
.dsum-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 0; font-size:13.5px; color:#334155; }
.dsum-row span{ min-width:0; }
.dsum-row strong{ font-weight:700; color:var(--text-dark, #1a1a1a); font-variant-numeric:tabular-nums; white-space:nowrap; }
.dsum-row em{ color:#64748b; font-style:normal; font-size:12.5px; }
.dsum-row__ic{ color:#94a3b8; width:16px; text-align:center; margin-right:4px; }
.dsum-rank{ display:inline-block; width:18px; height:18px; line-height:18px; text-align:center; border-radius:50%; background:#FAF7F2; color:#6F4E37; font-size:11px; font-weight:800; margin-right:4px; }
.dsum-row--total{ margin-top:4px; padding-top:9px; border-top:1px solid #eef2f7; font-weight:700; }
.dsum-row--total strong{ color:#6F4E37; font-size:15px; }
.dsum-var.is-balanced strong{ color:#6F4E37; }
.dsum-var.is-over strong{ color:#a16207; }
.dsum-var.is-short strong{ color:#b91c1c; }
.dsum-empty{ padding:8px 0; color:#94a3b8; font-size:13px; }

.dsum-details{ margin-top:22px; }
/* Clear, obviously-clickable disclosure row so users know it expands (the old
   faint Font-Awesome chevron didn't render reliably / read as a plain label). */
.dsum-details > summary{
    cursor:pointer; font-weight:700; color:#6F4E37; font-size:14px;
    padding:12px 16px; list-style:none; display:flex; align-items:center; gap:10px;
    background:#FAF7F2; border:1px solid #EADFC9; border-radius:10px;
    transition:background .15s ease, border-color .15s ease;
}
.dsum-details > summary:hover{ background:#F3E9D7; border-color:#D8BE8E; }
.dsum-details > summary:focus-visible{ outline:2px solid #6F4E37; outline-offset:2px; }
.dsum-details > summary::-webkit-details-marker{ display:none; }
/* Robust "Show ▾ / Hide ▴" cue — system glyphs, no webfont dependency. */
.dsum-details > summary::after{
    content:"Show \25BE"; font-family:inherit; font-weight:700; font-size:12px;
    color:#6F4E37; margin-left:auto; letter-spacing:.3px; white-space:nowrap;
}
.dsum-details[open] > summary{ border-bottom-left-radius:0; border-bottom-right-radius:0; }
.dsum-details[open] > summary::after{ content:"Hide \25B4"; }

@media (max-width:980px){ .dsum__cards{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){
    .dsum__cards{ grid-template-columns:repeat(2,1fr); }
    .dsum__panels{ grid-template-columns:1fr; }
    .dsum__line{ width:100%; }
    /* Stack the P&L hero and metric chips on narrow phones */
    .dsum-hero{ grid-template-columns:1fr; gap:14px; padding:18px; }
    .dsum-hero__io{ border-left:none; padding-left:0; border-top:1px solid #f1f5f9; padding-top:14px; }
    .dsum-mini{ grid-template-columns:1fr; }
}

/* ============================================================
   QUEBO Loading Splash — "Quiet Theatre" (drop-in).
   Layered-but-soft lighting + a single choreographed entrance +
   the 3D QUEBO logo as the sole hero. Self-contained (.ava- / .ava3d-).
   Markup adds 2 lean nodes:
     <div class="ava-aura"></div>     (soft halo)        — first child of .ava-splash__inner
     <div class="ava-reflect">..</div> (logo reflection) — last child of .ava3d-stage
   All motion is GPU-cheap: transform / opacity / filter ONLY.
   ============================================================ */

.ava-splash{
    position:fixed;
    inset:0;
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    /* QUEBO espresso wash — brand black, warm, no harsh corners */
    background:linear-gradient(165deg, #241A14 0%, #1A1512 55%, #0E0B09 100%);
    transition:opacity .55s ease, visibility .55s ease;
}
.ava-splash--hidden{ opacity:0; visibility:hidden; pointer-events:none; }

/* Soft, even centre-brightening only — never darkens the edges. */
.ava-splash::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:radial-gradient(60% 52% at 50% 45%,
        rgba(194,160,106,.14) 0%,
        rgba(194,160,106,0) 72%);
    opacity:0;
    animation:ava-amb-in 1s ease .05s forwards;
}

.ava-splash__inner{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:0 28px;
}

/* ---------------- Soft halo behind the logo ---------------- */
/* One tight, soft white glow that lifts the logo off the gradient.
   Calm breathe only — no big drifting blob. transform/opacity only. */
.ava-aura{
    position:absolute;
    left:50%; top:43%;
    width:min(420px, 82vw);
    height:min(420px, 82vw);
    transform:translate(-50%,-50%);
    pointer-events:none;
    z-index:0;
    opacity:0;
    animation:ava-amb-in 1.1s ease 0s forwards;
}
.ava-aura::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(194,160,106,.30) 0%,
        rgba(194,160,106,.16) 32%,
        rgba(194,160,106,.06) 52%,
        rgba(194,160,106,0) 70%);
    animation:ava-halo-breathe 6s ease-in-out 1.1s infinite;
}

/* ---------------- 3D logo (the hero) ---------------- */
.ava3d-stage{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    width:300px; max-width:84vw;
    height:230px;               /* room for the logo + its reflection */
    perspective:560px;          /* tighter perspective → stronger 3D depth */
    perspective-origin:50% 42%;
}
.ava3d-shadow{
    position:absolute;
    left:50%; bottom:22px;
    width:214px; height:21px;
    transform:translateX(-50%);
    border-radius:50%;
    background:radial-gradient(ellipse at center,
        rgba(0,0,0,.55) 0%,
        rgba(0,0,0,.28) 44%,
        rgba(0,0,0,0) 72%);
    filter:blur(6px);
    opacity:0;
    animation:
        ava-amb-in .6s ease .1s forwards,
        ava3d-shadow 3.6s ease-in-out 0s infinite;
}
.ava3d-logo3d{
    position:relative;
    transform-style:preserve-3d;
    width:258px; max-width:74vw;
    will-change:transform;
    /* fade in (opacity only) WHILE turning from t=0 — the 3D motion is
       visible immediately, not just in the splash's last moments.
       Opacity-only entrance + transform-only turn → no transform conflict. */
    animation:
        ava3d-in .55s ease both,
        ava3d-turn 3.6s ease-in-out infinite;
}
.ava3d-layer{
    display:block;
    width:100%;
    height:auto;
    transform:translateZ(calc(var(--i) * -3.4px));
    /* White QUEBO wordmark: keep the front face bright white and ramp the deeper
       layers darker (toward gold/graphite) so the extruded side reads as 3D depth
       against the espresso backdrop — front white, sides shaded. */
    filter:
        brightness(calc(1 - var(--i) * 0.052))
        sepia(calc(var(--i) * 0.05))
        saturate(calc(1 + var(--i) * 0.05));
}
.ava3d-layer:not(:last-child){ position:absolute; left:0; top:0; }
/* Ang puting harapan ay HULI sa DOM (tingnan ang index.html): kapag hindi
   na-sort ng engine ang preserve-3d habang tumatakbo ang transform
   animation, nagpi-paint ito ayon sa DOM order — kaya dapat huli ang
   harapan para manatili siyang nasa ibabaw. */
.ava3d-layer:last-child{
    position:relative;                  /* front face sizes the box */
    filter:brightness(1)
           drop-shadow(0 12px 22px rgba(0,0,0,.50))
           drop-shadow(0 2px 6px rgba(0,0,0,.38));
}
/* Warm key-light highlight baked onto the front face (top-left mint sheen),
   masked to the exact logo shape so it lights the glyph, not a rectangle.
   ::after, not ::before — sa DOM-order fallback ay dapat huli itong mag-paint.
   NOTE: no mix-blend-mode here — a blend mode on a preserve-3d descendant
   flattens the 3D context in some engines and would kill the extrusion. */
.ava3d-logo3d::after{
    content:"";
    position:absolute;
    inset:0;                            /* matches the 240×auto front-face box */
    transform:translateZ(2px);
    background:linear-gradient(125deg,
        rgba(255,255,255,.55) 0%,
        rgba(255,255,255,0) 38%);
    -webkit-mask:url('images/quebo-logo-light.png?v=quebo3') center/contain no-repeat;
            mask:url('images/quebo-logo-light.png?v=quebo3') center/contain no-repeat;
    pointer-events:none;
    opacity:.6;
}

/* ---------------- Reflection ---------------- */
/* A soft, blurred, flipped copy of the logo fading downward — the logo
   reads as sitting on a glossy surface. A darker element, so it actually
   shows on the light background (unlike glows). Static + cheap. */
.ava-reflect{
    position:absolute;
    left:50%; top:50%;
    width:258px; max-width:74vw;
    transform:translate(-50%, 54px) scaleY(-1);
    transform-origin:top center;
    opacity:.20;
    filter:blur(1.4px);
    -webkit-mask:linear-gradient(to bottom, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 62%);
            mask:linear-gradient(to bottom, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 62%);
    pointer-events:none;
    z-index:0;
}
.ava-reflect img{ display:block; width:100%; height:auto; filter:brightness(1.3) saturate(1.2); }

/* ---------------- Caption ---------------- */
.ava-splash__caption{
    position:relative;
    z-index:1;
    margin:18px 0 0;                    /* gap: stage→caption */
    font-family:'Inter', system-ui, -apple-system, sans-serif;
    font-size:13px;
    font-weight:500;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#EFE4D2;
    text-shadow:0 1px 2px rgba(0,0,0,.5);
    opacity:0;
    transform:translateY(8px);
    animation:ava-rise-in .6s cubic-bezier(.2,.7,.2,1) .3s forwards;
}

/* ---------------- Jewel progress bar ---------------- */
.ava-splash__bar{
    position:relative;
    z-index:1;
    margin-top:22px;                    /* gap: caption→bar */
    width:200px;
    max-width:62vw;
    height:5px;
    border-radius:999px;
    background:rgba(194,160,106,.22);     /* clearly-visible loading track */
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
    overflow:hidden;
    opacity:0;
    animation:ava-fade-in .6s ease .45s forwards;
}
.ava-splash__bar span{
    position:absolute;
    top:0; left:0;
    height:100%;
    width:42%;
    border-radius:999px;
    background:linear-gradient(90deg, #C2A06A 0%, #6F4E37 100%);
    box-shadow:0 0 8px rgba(194,160,106,.45);
    will-change:transform;
    /* back-and-forth sweep — the fill stays ON the track the whole time,
       so the bar always reads as actively loading (no dead/empty phase) */
    animation:ava-bar 1.5s cubic-bezier(.45,.05,.35,1) infinite alternate;
}

/* ---------------- Keyframes ---------------- */
@keyframes ava-amb-in{ to{ opacity:1; } }
@keyframes ava-fade-in{ to{ opacity:1; } }

@keyframes ava-rise-in{
    to{ opacity:1; transform:translateY(0); }
}

/* opacity-only fade-in — NO transform here, so the turn (transform-only)
   runs from t=0 and the motion is visible immediately. */
@keyframes ava3d-in{
    from{ opacity:0; }
    to  { opacity:1; }
}

/* presenting turn — clear 3D depth, gentle cadence. The base tilt keeps the
   extruded top/side edge visible even as the yaw passes through centre. */
@keyframes ava3d-turn{
    0%   { transform:rotateX(11deg) rotateY(-26deg) translateY(0); }
    50%  { transform:rotateX(11deg) rotateY(26deg)  translateY(-9px); }
    100% { transform:rotateX(11deg) rotateY(-26deg) translateY(0); }
}
@keyframes ava3d-shadow{
    0%,100%{ transform:translateX(-50%) scaleX(1);   opacity:.8; }
    50%    { transform:translateX(-50%) scaleX(.83); opacity:.52; }
}

/* halo breathes gently in counterpoint to the logo float (scale from centre) */
@keyframes ava-halo-breathe{
    0%,100%{ transform:scale(1);    opacity:.92; }
    50%    { transform:scale(1.05); opacity:1; }
}

/* indeterminate bar — fill bounces left↔right, always on the track */
@keyframes ava-bar{
    0%   { transform:translateX(0); }
    100% { transform:translateX(138%); }
}

/* ---------------- Responsive ---------------- */
@media (max-width:480px){
    .ava3d-stage{ height:200px; perspective:700px; }
    .ava3d-logo3d{ width:200px; }
    .ava3d-shadow{ width:160px; }
    .ava-reflect{ width:200px; transform:translate(-50%,44px) scaleY(-1); }
    .ava-aura{ width:min(440px,118vw); height:min(440px,118vw); }
    .ava-splash__bar{ width:180px; }
}

/* Very short viewports — keep the whole stack on-screen, no scroll */
@media (max-height:520px){
    .ava-splash__inner{ transform:none; }
    .ava3d-stage{ height:130px; }
    .ava3d-logo3d{ width:184px; }
    .ava3d-shadow{ bottom:18px; }
    .ava-reflect{ display:none; }   /* no room for a reflection here */
    .ava-splash__caption{ margin-top:14px; }
    .ava-splash__bar{ margin-top:16px; }
    .ava-aura{ width:min(380px,116vw); height:min(380px,116vw); }
}

/* ---------------- Reduced motion: calm, lit, fully legible ---------------- */
@media (prefers-reduced-motion: reduce){
    .ava-splash *,
    .ava-splash *::before,
    .ava-splash *::after{ animation:none !important; }

    /* everything resolves to its final, fully-lit frame */
    .ava-splash::after,
    .ava-aura,
    .ava3d-shadow{ opacity:1 !important; }

    .ava-aura::before{ transform:none !important; opacity:1 !important; }

    .ava3d-logo3d{
        opacity:1 !important;
        transform:rotateX(11deg) rotateY(-22deg) !important;
    }

    .ava-splash__caption{ opacity:1 !important; transform:none !important; }
    .ava-splash__bar{ opacity:1 !important; }
    .ava-splash__bar span{
        width:100% !important;
        transform:none !important;
        box-shadow:0 0 6px rgba(194,160,106,.4) !important;
    }
}

/* =====================================================================
   IN-APP DELIVERY NAVIGATION — next-turn banner + turn-by-turn list.
   Used by the Delivery Route modal (.rider-map*). Self-contained.
   ===================================================================== */
/* Live "next maneuver" banner shown in the route-summary slot */
.rider-nav-banner{
    display:flex;
    align-items:center;
    gap:11px;
    padding:10px 12px;
    border-radius:10px;
    background:linear-gradient(90deg, rgba(194,160,106,.10), rgba(194,160,106,.06));
    border:1px solid rgba(194,160,106,.18);
}
.rider-nav-ic{
    flex:0 0 auto;
    width:38px; height:38px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:#6F4E37;
    color:#fff;
    font-size:16px;
}
.rider-nav-txt{ display:flex; flex-direction:column; line-height:1.3; min-width:0; }
.rider-nav-txt strong{ font-size:15px; color:var(--text-dark); }
.rider-nav-txt span{ font-size:12.5px; color:var(--text-light); }

/* Stop-navigation state for the primary action button */
#riderNavBtn.is-navigating{
    background:#b91c1c;
    border-color:#b91c1c;
}
#riderNavBtn.is-navigating:hover{ background:#991b1b; }

/* Scrollable turn-by-turn directions list */
.rider-directions{
    margin-top:12px;
    border:1px solid var(--border-color);
    border-radius:12px;
    overflow:hidden;
    max-height:220px;
    overflow-y:auto;
    background:var(--white);
}
.rider-dir-title{
    position:sticky; top:0;
    padding:9px 12px;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.02em;
    color:#6F4E37;
    background:#FAF7F2;
    border-bottom:1px solid rgba(194,160,106,.14);
    z-index:1;
}
.rider-dir-step{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-bottom:1px solid var(--border-color);
    font-size:13.5px;
    color:var(--text-dark);
}
.rider-dir-step:last-child{ border-bottom:0; }
.rider-dir-ic{
    flex:0 0 auto;
    width:26px; height:26px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:#e2e8f0;
    color:#475569;
    font-size:12px;
}
.rider-dir-main{ flex:1 1 auto; min-width:0; }
.rider-dir-dist{ flex:0 0 auto; font-size:12px; color:var(--text-light); font-variant-numeric:tabular-nums; }
.rider-dir-step.is-active{ background:rgba(194,160,106,.12); }
.rider-dir-step.is-active .rider-dir-ic{ background:#6F4E37; color:#fff; }
.rider-dir-step.is-active .rider-dir-main{ font-weight:700; color:#6F4E37; }
.rider-dir-step.is-done{ opacity:.5; }
.rider-dir-step.is-done .rider-dir-main{ text-decoration:line-through; }

/* =====================================================================
   ORDER DETAILS MODAL — consistent typography & layout.
   ===================================================================== */
.order-detail-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:16px;
}
.order-detail-id{
    font-size:17px;
    font-weight:700;
    color:var(--text-dark);
}
.order-detail-badges{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
}
/* Payment pill — same geometry as .status-badge so the pair matches */
.pay-badge{
    display:inline-block;
    padding:4px 12px;
    border-radius:12px;
    font-size:12px;
    font-weight:600;
    line-height:1.5;
}
.pay-badge--paid{ background:var(--primary); color:#fff; }
.pay-badge--unpaid{ background:#ef4444; color:#fff; }

/* Label / value grid for the order meta.
   Denser than it looks: the old 12px/24px rhythm pushed the item table and the
   action buttons below the fold on a laptop, so every order needed a scroll
   before the cashier could do anything. Auto-fit keeps 2 columns on a phone and
   3 on a wide modal without a second breakpoint. */
.order-detail-meta{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap:8px 18px;
    margin:0 0 12px;
}
.order-detail-meta > div{
    display:flex;
    flex-direction:column;
    gap:1px;
    min-width:0;
}
.order-detail-meta dt{
    font-size:10px;
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--text-light);
}
.order-detail-meta dd{
    margin:0;
    font-size:14px;
    line-height:1.35;
    color:var(--text-dark);
    overflow-wrap:anywhere;
}

/* Action bar — pinned to the bottom of the modal body so "Delivered — collect"
   / "Void/Refund" are reachable without scrolling past the whole item table. */
.order-detail-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    position:sticky;
    bottom:0;
    z-index:2;
    margin:4px -20px -20px;
    padding:12px 20px;
    background:#fff;
    border-top:1px solid var(--border-color);
    box-shadow:0 -6px 16px rgba(0,0,0,.06);
}
.order-detail-actions .btn{ flex:1 1 auto; min-width:140px; }

.order-detail-pin{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin:0 0 16px;
    font-size:13.5px;
    font-weight:600;
    color:var(--primary);
    text-decoration:none;
}
.order-detail-pin:hover{ text-decoration:underline; }

.order-detail-section-title{
    font-size:14px;
    font-weight:700;
    color:var(--text-dark);
    margin:18px 0 10px;
}

/* Totals summary — aligned rows, clear total */
.order-detail-totals{
    margin:0 0 16px auto;
    max-width:340px;
}
.order-detail-totals .row{
    display:flex;
    justify-content:space-between;
    gap:24px;
    padding:3px 0;
    font-size:14px;
    color:var(--text-dark);
}
.order-detail-totals .row span:first-child{ color:var(--text-light); }
.order-detail-totals .row.total{
    margin-top:6px;
    padding-top:9px;
    border-top:1px solid var(--border-color);
    font-size:18px;
    font-weight:700;
}
.order-detail-totals .row.total span{ color:var(--primary); }

@media (max-width:480px){
    .order-detail-meta{ grid-template-columns:1fr; }
    .order-detail-totals{ max-width:none; }
}

/* =====================================================================
   QUEBO 3D LOADING LOGO — merged into the "Quiet Theatre" splash block
   above (.ava3d-stage / .ava3d-logo3d / .ava3d-layer live there now so
   the lighting + 3D depth stay one cohesive, conflict-free system).
   ===================================================================== */

/* ============================================================
   CONSOLIDATED ADDITIVE LAYER (token 20260618a) — a11y, design
   polish, responsive. Appended; inline styles win where set.
   ============================================================ */

/* [a11y-3] Screen-reader-only utilities */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
    position: static !important;
    width: auto; height: auto;
    margin: 0; overflow: visible;
    clip: auto; white-space: normal;
}

/* [design-6] Unified brand focus ring for native controls + links */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[contenteditable]:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--shadow-focus);
}
a:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* [design-1] Honor reduced-motion for interactive lift/press/ripple + modals */
@media (prefers-reduced-motion: reduce) {
    .btn,
    .summary-card,
    .modal,
    .modal.active,
    .modal-overlay,
    .modal-overlay > div {
        transition-property: background, color, box-shadow, border-color, opacity !important;
        transition-duration: 0.12s !important;
        animation: none !important;
    }
    .btn:hover:not(:disabled),
    .btn:active:not(:disabled),
    .summary-card:hover {
        transform: none !important;
    }
    .btn-ripple { display: none !important; }
}

/* [design-2] Entrance polish for JS-injected inline overlays */
@keyframes mvOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mvPanelIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-overlay[style*="flex"] {
    animation: mvOverlayIn 0.18s ease-out;
}
.modal-overlay[style*="flex"] > div {
    animation: mvPanelIn 0.22s cubic-bezier(0.2, 0.8, 0.4, 1);
}

/* [design-3] Baseline elevation for inline modal panels (inline values win) */
.modal-overlay > div {
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.22);
    border: 1px solid rgba(15, 23, 42, 0.05);
}

/* [design-4] Neutral fallback so an unmatched status class still pills */
.status-badge {
    background: #eef0f2;
    color: #475569;
    line-height: 1.5;
    white-space: nowrap;
}

/* [design-5] Empty-state container polish */
.empty-state {
    background: var(--light-bg);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-lg);
    margin: var(--space-3) 0;
}
.empty-state i {
    opacity: 0.35;
}
.empty-state p {
    color: var(--text-muted);
    max-width: 360px;
    margin: 0 auto;
}

/* [design-7] Slimmer scrollbar inside dialogs/scroll panes */
.modal-overlay > div::-webkit-scrollbar,
.modal-body::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
.modal-overlay > div::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, 0.18);
    border-radius: 8px;
    border: 1px solid transparent;
    background-clip: padding-box;
}
.modal-overlay > div,
.modal-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(15,23,42,0.22) transparent;
}

/* [design-8] Token-align dashboard card radii */
.summary-card { border-radius: var(--radius-lg); }
.card-icon { border-radius: var(--radius-md); }

/* [responsive-1] Tablet-portrait density (769-1024) */
@media (min-width: 769px) and (max-width: 1024px) {
    .summary-cards { grid-template-columns: repeat(2, 1fr); }
    .dashboard-grid { grid-template-columns: 1fr 1fr; }
    .tables-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .menu-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* Landscape phones (769–1024 wide): the Low Stock Alert is a single-child grid,
   so the rule above would strand it in a half-width cell (only 1 item column).
   Span it full width and lay its items out in 2 columns — better use of the
   wider landscape space. Tablet PORTRAIT is left untouched. */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .dashboard-grid-stock { grid-template-columns: 1fr; }
    .dashboard-grid-stock .ls-grid { grid-template-columns: repeat(2, 1fr); }
}

/* [responsive-2] Phone modal overflow safety net */
@media (max-width: 768px) {
    .modal-overlay[style*="flex"] {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 12px 0;
    }
    .modal-overlay[style*="flex"] > div {
        max-height: 88vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* [responsive-3] Report tables scroll on phones */
@media (max-width: 768px) {
    .report-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

/* [responsive-4] iOS safe-area insets (portrait) */
@media (max-width: 768px) {
    .top-bar {
        padding-left: max(15px, env(safe-area-inset-left));
        padding-right: max(15px, env(safe-area-inset-right));
    }
    .sidebar {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .pos-order-section {
        padding-bottom: max(0px, env(safe-area-inset-bottom));
    }
}

/* [responsive-5] Larger touch targets (second coarse-pointer block) */
@media (pointer: coarse) {
    .btn-sm { min-height: 44px; }
    .hub-tab { min-height: 44px; }
    .nav-item { min-height: 44px; }
    .category-tab { min-height: 44px; display: inline-flex; align-items: center; }
}

/* [responsive-6] POS category tabs scroll on phones */
@media (max-width: 768px) {
    .category-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
    }
    .category-tab { white-space: nowrap; flex: 0 0 auto; }
}

/* [responsive-7] Notif panel as edge-padded sheet 481-768 */
@media (min-width: 481px) and (max-width: 768px) {
    .notif-panel {
        position: fixed;
        top: 64px;
        right: 12px;
        left: auto;
        width: 360px;
        max-width: calc(100vw - 24px);
    }
}

/* ============================================================
   MOBILE POS — food-delivery-style ordering (phones only).
   Image cards with a "+" button, a sticky "View Order" bar, and
   the order panel as a slide-up sheet. Desktop POS is untouched.
   ============================================================ */
/* These elements only exist for the mobile experience */
.menu-item-add,
.mobile-order-bar,
.order-sheet-backdrop,
.order-sheet-close { display: none; }

/* The mobile-POS pattern applies to BOTH portrait phones (max-width:768px) AND
   landscape phones (short viewports). Landscape used to be a cramped two-pane
   split; it now shares this full-width menu + slide-up order-sheet design. The
   landscape block further down only tunes column count / image height. */
@media (max-width: 768px), (orientation: landscape) and (max-height: 600px) {
    /* Menu fills the width; the order panel becomes a bottom sheet */
    .pos-container { display: block; }
    .pos-menu-section { width: 100%; }

    /* Category tabs scroll horizontally */
    #categoryTabs {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    #categoryTabs::-webkit-scrollbar { display: none; }
    #categoryTabs .category-tab { white-space: nowrap; flex: 0 0 auto; }

    /* Two-column image cards */
    .menu-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        padding-bottom: 104px; /* clear the sticky View Order bar */
    }
    .menu-item {
        position: relative;
        display: flex;
        flex-direction: column;
        background: #fff;
        border-radius: 14px;
        padding: 0 0 12px;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
        overflow: visible;
    }
    .menu-item .menu-item-img {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
        border-radius: 14px 14px 0 0;
        overflow: hidden;
    }
    .menu-item .menu-item-name { padding: 10px 12px 0; font-size: 14px; font-weight: 700; }
    .menu-item .menu-item-price { padding: 2px 12px 0; font-size: 14px; font-weight: 700; color: #6F4E37; }

    /* Round "+" button on the photo's bottom-right (delivery-app style) */
    .menu-item-add {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 8px;
        bottom: 8px;
        width: 34px;
        height: 34px;
        border: none;
        border-radius: 50%;
        background: #fff;
        color: #6F4E37;
        font-size: 22px;
        font-weight: 700;
        line-height: 1;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
        cursor: pointer;
        z-index: 3;
        padding: 0;
    }
    .menu-item-add:active { transform: scale(0.9); background: #FAF7F2; }

    /* Sticky "View Order" bar — only when the cart has items */
    .mobile-order-bar {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 14px;
        z-index: 1200;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        border: none;
        border-radius: 14px;
        background: linear-gradient(135deg, #6F4E37 0%, #573C2A 100%);
        color: #fff;
        box-shadow: 0 8px 24px rgba(194, 160, 106, 0.4);
        font-family: inherit;
        text-align: left;
        cursor: pointer;
    }
    .mobile-order-bar.has-items { display: flex; }
    .mob-bar-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 26px;
        height: 26px;
        padding: 0 7px;
        background: rgba(255, 255, 255, 0.25);
        border-radius: 13px;
        font-weight: 800;
        font-size: 14px;
    }
    .mob-bar-main { flex: 1; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
    .mob-bar-title { font-weight: 800; font-size: 15px; }
    .mob-bar-sub { font-size: 11px; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mob-bar-total { font-weight: 800; font-size: 15px; white-space: nowrap; }
    #pos-module.order-sheet-open .mobile-order-bar { display: none; } /* sheet covers it */

    /* Order panel as a slide-up bottom sheet */
    .pos-order-section {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
        z-index: 1300;
        background: #fff;
        padding: 16px;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25);
        transform: translateY(100%);
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    }
    #pos-module.order-sheet-open .pos-order-section { transform: translateY(0); }

    .order-sheet-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1250;
    }
    #pos-module.order-sheet-open .order-sheet-backdrop { display: block; }

    .order-header { align-items: center; }
    .order-sheet-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin-right: 10px;
        border: none;
        border-radius: 50%;
        background: #f1f5f9;
        color: #334155;
        font-size: 16px;
        cursor: pointer;
    }
}

/* ============================================================
   PHONE LANDSCAPE — split the OPEN order sheet into two columns:
   item LIST on the left, TOTALS + payment + Place Order on the right.
   Portrait keeps the single-column slide-up sheet (untouched). Only the
   .pos-order-left / .pos-order-right wrappers change role here, from
   display:contents to real grid columns.
   ============================================================ */
@media (orientation: landscape) and (max-height: 600px) {
    #pos-module.order-sheet-open .pos-order-section {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
        grid-template-rows: auto minmax(0, 1fr);
        grid-template-areas:
            "header header"
            "list   total";
        column-gap: 16px;
        height: 90vh;
        max-height: 90vh;
        overflow: hidden;
    }
    #pos-module.order-sheet-open .pos-order-section > .order-header { grid-area: header; }

    /* LEFT column — the item list (scrolls on its own) */
    #pos-module.order-sheet-open .pos-order-left {
        grid-area: list;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #pos-module.order-sheet-open .pos-order-left .order-items {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* RIGHT column — totals, payment, Place Order pinned to the bottom */
    #pos-module.order-sheet-open .pos-order-right {
        grid-area: total;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #pos-module.order-sheet-open .pos-order-right > .btn { margin-top: auto; }
}

/* [responsive-8] Reservation day-panel actions wrap on small phones */
@media (max-width: 480px) {
    .res-day-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    .res-day-actions .btn { flex: 1 1 auto; min-height: 40px; }
}

/* [wave2] Kitchen 3-lane board + live elapsed timing */
.kitchen-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.kitchen-lane { background: #F8FAFC; border: 1px solid #ECEEF1; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 12px; min-height: 80px; }
.kitchen-lane-head { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .4px; color: #374151; display: flex; align-items: center; justify-content: space-between; }
.kitchen-lane-count { background: #E5E7EB; color: #374151; border-radius: 999px; padding: 1px 9px; font-size: 12px; }
.kitchen-ticket.ready { border-left-color: #2563EB; }
.kitchen-ticket.ready .ticket-status-badge { background: #DBEAFE; color: #1d4ed8; }
.ticket-elapsed { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #6B7280; margin: 4px 0; }
.ticket-elapsed.warning { color: #b45309; }
.ticket-elapsed.danger { color: #b91c1c; }
@media (max-width: 900px) { .kitchen-board { grid-template-columns: 1fr; } }

/* Dashboard "Rotate to landscape" button — shown only on phones/tablets held
   in portrait; it hides itself once the screen is landscape (goal achieved). */
.landscape-hint { display: none; }
@media (max-width: 900px) and (orientation: portrait) {
    .landscape-hint {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        margin: 0 0 14px;
        padding: 11px 14px;
        border: 1px solid #EADFC9;
        background: #FAF7F2;
        color: #6F4E37;
        font-family: inherit;
        font-weight: 700;
        font-size: 13px;
        border-radius: 10px;
        cursor: pointer;
    }
    .landscape-hint i { font-size: 15px; }
    .landscape-hint:active { transform: scale(0.99); }
}

/* (Removed 2026-08-19) Portrait nudge banner. It told phone users to turn
   the device sideways instead of the app working upright - a 52px fixed
   overlay on top of EVERY screen. Measured at 390x844: no horizontal
   overflow on any module, the POS cart is a proper slide-up sheet, and the
   floor plan and category tabs scroll on their own. The advice was stale.
   .landscape-hint above STAYS - the floor-plan editor still uses it, and
   dragging tables around genuinely is easier wide. */

/* (Removed) Back-to-portrait floating button — unnecessary: rotating the phone
   to portrait already switches the view, so the button was redundant. */

/* =============================================================================
   ATTENDANCE CAMERA CAPTURE — phone LANDSCAPE reflow (APPEND-ONLY)
   In portrait the modal stacks vertically (mirror on top, GPS + buttons below)
   and these classes carry no rules, so portrait is untouched. In landscape the
   card widens and .att-capture-body becomes a row: the mirror (.att-capture-stage)
   sits on the LEFT, and the GPS status + action buttons (.att-capture-side) move
   to the RIGHT of the mirror, stacked full-width. !important is required only to
   beat the element's inline max-width / width / flex.
   ============================================================================= */
@media (orientation: landscape) and (max-height: 600px) {
    #attCaptureModal .att-capture-card {
        max-width: 760px !important;
        width: 96% !important;
        padding: 16px !important;
    }
    #attCaptureModal .att-capture-body {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 16px;
    }
    #attCaptureModal .att-capture-stage {
        flex: 1 1 58%;
        aspect-ratio: auto !important;   /* drop the 4:3 box; height drives the size */
        height: min(64vh, 320px);
        min-height: 160px;
    }
    #attCaptureModal .att-capture-side {
        flex: 1 1 42%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 170px;
    }
    /* The mirror no longer sits above the status, so drop its top gap. */
    #attCaptureModal .att-capture-side #attLocStatus {
        margin-top: 0 !important;
    }
    /* Buttons stack vertically and fill the right column (override inline flex). */
    #attCaptureModal .att-capture-actions {
        flex-direction: column;
        margin-top: 14px !important;
    }
    #attCaptureModal .att-capture-actions button {
        flex: 0 0 auto !important;
        width: 100%;
    }
}

/* ============================================================
   MOBILE BOTTOM FADE — a soft, subtle dark gradient at the very
   bottom of the screen so content fades gently where it meets the
   phone's navigation buttons (instead of an abrupt cut). Phones
   only, never blocks taps, and sits below all interactive bars.
   ============================================================ */
@media (max-width: 768px) {
    body::after {
        content: '';
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 60px;
        pointer-events: none;   /* taps pass straight through */
        z-index: 90;            /* above page content, below bars/sheets/modals */
        background: linear-gradient(
            to bottom,
            rgba(15, 23, 42, 0) 0%,
            rgba(15, 23, 42, 0.05) 55%,
            rgba(15, 23, 42, 0.18) 100%
        );
    }
}

/* =============================================================================
   RESPONSIVE LAYOUT AUDIT — portrait/landscape clean-up (APPEND-ONLY, 2026-06)
   Goals, verified against headless phone/tablet screenshots in both orientations:
     • Nothing overlaps (the "Rotate" banner no longer covers the page title/nav).
     • No cut/truncated words — navigation tab strips wrap instead of clipping;
       the one intentional POS food-delivery scroll strip gets a fade cue.
     • Maximise space — stat/KPI cards pack 2-up (phones) / one row (landscape)
       instead of stacking one-per-row; data values stay on a single line.
   Source-order: this block is last, so it intentionally overrides earlier rules.
   ============================================================================= */


/* --- 2. DASHBOARD KPI CARDS: pack instead of stacking 1-per-row --------------- */
/* Phones: 2-up (was 1 column at <=480) so the four KPIs use one screen, not four. */
@media (max-width: 600px) {
    .summary-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        margin-bottom: 18px;
    }
    .summary-card { padding: 14px 16px; gap: 14px; }
    .summary-card .card-icon { width: 46px; height: 46px; font-size: 20px; }
    .summary-card .card-content h3 { font-size: 22px; }
}
/* Short landscape phones: fit all KPI cards on a single row (maximise width). */
@media (orientation: landscape) and (max-height: 600px) {
    .summary-cards {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 12px;
        margin-bottom: 14px;
    }
    .summary-card { padding: 12px 14px; }
}

/* --- 3. HUB QUICK STATS: auto-fit grid so they never drop to 1-per-row -------- */
@media (max-width: 600px) {
    .hub-quick-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(46%, 1fr));
        gap: 10px;
        width: 100%;
        overflow: visible;            /* was overflow-x:auto — no sideways scroll needed */
        padding-bottom: 0;
    }
    .hub-stat { min-width: 0; padding: 10px 12px; gap: 10px; }
    .hub-stat-value { font-size: 18px; }
    /* A lone 3rd stat (e.g. Operations "In Kitchen", Finance "Cash Drawer")
       spans the full row so it reads intentionally instead of a half-empty gap. */
    .hub-quick-stats .hub-stat:nth-child(3):last-child { grid-column: 1 / -1; }
}

/* Dedupe rotate nudges: the slim global banner already prompts to rotate, so the
   per-module in-content "Rotate to landscape …" hints are redundant clutter. */
@media (max-width: 900px) and (orientation: portrait) {
    .landscape-hint { display: none !important; }
}

/* --- 4. TAB STRIPS: wrap navigation tabs (no cut words); fade the POS strip ---- */
/* Hub sub-navigation + generic category pills WRAP on phones/tablets so no label
   is ever sliced mid-word and every tab stays discoverable. */
@media (max-width: 768px) {
    .hub-tabs {
        flex-wrap: wrap;
        overflow-x: visible;
        row-gap: 8px;
        padding-bottom: 0;
    }
    .hub-tab { white-space: nowrap; }
    .category-tabs {
        flex-wrap: wrap;
        overflow-x: visible;
        row-gap: 8px;
    }
    .category-tabs .category-tab { flex: 0 0 auto; white-space: nowrap; }
}
/* POS food-delivery strip (#categoryTabs id-rules keep it a horizontal scroller):
   add a soft right-edge fade so a partially-visible pill reads as "swipe for more"
   rather than a broken cut. */
@media (max-width: 768px) {
    #categoryTabs {
        -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
        mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
        scroll-snap-type: x proximity;
        scroll-padding-left: 4px;
    }
    #categoryTabs .category-tab { scroll-snap-align: start; }
}

/* --- 5. DATA TABLES: keep every value on one line; actions on one row --------- */
/* Tables already live inside .table-container (overflow-x:auto). Stopping cells
   from wrapping fixes phone numbers breaking onto 3 lines and the action icons
   stacking vertically; the table simply scrolls horizontally within its card. */
@media (max-width: 900px) {
    .table-container .data-table th,
    .table-container .data-table td {
        white-space: nowrap;
    }
    .table-container .data-table td .btn,
    .table-container .data-table td .btn-sm {
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
    }
}

/* --- 6. FLOOR PLAN: contain the scroll so it can't blow out its card/column --- */
/* The fp-grid is max-content wide on phones and scrolls inside .fp-grid-wrap; add
   min-width:0 so a CSS-grid/flex parent can't be stretched to the grid's width
   (which pushed the whole dashboard floor-plan card past the screen edge). */
.dashboard-section,
.floorplan-hero,
.fp-grid-wrap { min-width: 0; max-width: 100%; }
@media (max-width: 900px) {
    .dashboard-grid-floor { grid-template-columns: minmax(0, 1fr); }
}
/* Dashboard floor-plan stat tiles: pack 2-up on phones instead of side-scrolling. */
@media (max-width: 600px) {
    .fp-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: visible;
    }
    .fp-stat { min-width: 0; }
    .fp-occ { grid-column: span 2; }
}

/* --- 7. POS MENU CARDS: shorter image so more items fit per screen ------------ */
@media (max-width: 768px) {
    .menu-item-img { aspect-ratio: 4 / 3; }
}

/* --- 8. AI HUB (QUEBO Sensei) — recover wasted vertical space + fix contrast ----- */
/* The executive banner (health score + Today's Priority) is a clean side-by-side
   row on desktop, but the <=768px rule forced it to stack — wasting a full screen
   of height on tablet-portrait and large phones. Keep it a row from 480px up. */
@media (min-width: 480px) and (max-width: 768px) {
    .executive-banner { flex-direction: row; text-align: left; }
    .one-action-today { flex-direction: row; text-align: left; }
}
/* Green "Today vs Same Day" banner: labels and positive/negative values were too
   low-contrast on the saturated green. Lift them to legible tints. */
.comparison-label { opacity: 1; font-weight: 600; color: rgba(255, 255, 255, 0.92); }
.comparison-item.positive .comparison-value { color: #eafff1; }
.comparison-item.negative .comparison-value { color: #ffe1e1; }

/* --- 9. RESERVATIONS — uncramp the day-detail panel in the 2-column layout ----- */
/* Give the detail column a sensible minimum so guest meta (party · table · phone)
   isn't crushed into a 3-line stack next to the action buttons. */
@media (min-width: 901px) {
    .res-layout { grid-template-columns: minmax(0, 1.1fr) minmax(320px, 1fr); }
}
/* On the narrow 2-column widths (tablets/small laptops), let each reservation card
   put the time + status/actions on the top row and the name/meta on a full-width
   row below, so the phone number never breaks mid-value and nothing overlaps. */
@media (min-width: 901px) and (max-width: 1280px) {
    .res-day-item { flex-wrap: wrap; }
    .res-day-time { order: 1; }
    .res-day-right { order: 2; margin-left: auto; flex-direction: row; align-items: center; }
    .res-day-info { order: 3; flex: 1 1 100%; }
}
/* Tiny phone calendar cells: shrink the count badge so it sits clear of the date. */
@media (max-width: 600px) {
    .res-cal-count { min-width: 15px; height: 15px; font-size: 9px; bottom: 3px; right: 3px; }
}

/* --- 10. SIGN-UP FORM — fuller account-creation layout ------------------------ */
/* Restaurant Name + First/Last (one row) + Email + Phone + Password + Confirm +
   Terms agreement, matching the richer signup design. Scoped to the login card. */
.auth-pane-intro {
    margin: 2px 0 18px;
    font-size: 13px;
    color: #5c5c5c;
    text-align: center;
}
.login-form .form-group label .req { color: #e11d48; font-weight: 700; margin-left: 2px; }
.login-form .form-group label .opt { color: #9a9a9a; font-weight: 500; margin-left: 3px; }
/* First / Last name share one row even on the narrow login card */
.auth-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Terms agreement row */
.auth-terms {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 2px 0 16px;
    font-size: 13px;
    color: #4a4a4a;
    line-height: 1.45;
    cursor: pointer;
}
.auth-terms input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin: 1px 0 0;
    flex-shrink: 0;
    accent-color: #6F4E37;
    cursor: pointer;
}
.auth-terms a { color: #6F4E37; font-weight: 600; text-decoration: none; }
.auth-terms a:hover { text-decoration: underline; }
.auth-terms-note {
    font-size: 12px;
    color: #8A7355;
    background: #FAF7F2;
    border: 1px solid #EADFC9;
    border-radius: 9px;
    padding: 10px 12px;
    margin: -6px 0 16px;
    line-height: 1.5;
}

/* --- 11. POS in LANDSCAPE (phones) — same food-delivery layout as portrait ----- */
/* Landscape phones now share the portrait mobile-POS design (full-width menu +
   sticky "View Order" bar + slide-up order sheet) instead of the old cramped
   two-pane split. The mobile-POS @media block above is widened to match landscape
   too; here we only tune for the wider, shorter landscape canvas. */
@media (orientation: landscape) and (max-height: 600px) {
    /* Wider screen than portrait → more menu columns; shorter image cards so more
       rows stay visible on the short landscape canvas. */
    #pos-module .menu-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
    #pos-module .menu-item .menu-item-img { aspect-ratio: 16 / 10; }
    /* Keep the slide-up order sheet edge-to-edge even inside the 769–1024 sidebar rule */
    #pos-module .pos-order-section { left: 0; right: 0; }
}

/* --- 12. POS MENU SEARCH — quick find for large menus -------------------------- */
.pos-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f3f4f6;
    border: 1.5px solid #e4e4e4;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.pos-search i { color: #9aa0a6; font-size: 14px; flex-shrink: 0; }
.pos-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: 14.5px;
    color: #1a1a1a;
    /* Room for descenders (g, q, y, p, j) — the input clips its overflow, so a
       tight line box would shave the bottoms off. */
    line-height: 1.5;
    padding: 3px 0;
}
.pos-search input::placeholder { color: #9aa0a6; }
.pos-search:focus-within {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(194, 160, 106, 0.12);
}
/* Empty-state shown when a search / category yields no items */
.menu-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #6b6b70;
    padding: 40px 16px;
    font-size: 14px;
}
.menu-empty i { margin-right: 6px; color: #9aa0a6; }
/* Landscape phones: keep the search bar compact so it doesn't eat the short height */
@media (orientation: landscape) and (max-height: 600px) {
    #pos-module .pos-search { padding: 8px 12px; margin-bottom: 8px; }
}

/* --- 13. FINANCE REPORTS & ANALYTICS — stat cards in a row, not full-width stacks */
/* The markup used .reports-summary but only .reports-grid had a layout, so the
   three KPI cards (Total Sales / Total Orders / Avg Order Value) stacked full-width
   with huge empty space. Give them a responsive grid: a row on desktop/tablet,
   packed 2-up on phones. */
.reports-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
@media (max-width: 600px) {
    .reports-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    /* a lone 3rd card spans the full row so there's no awkward gap */
    .reports-summary .report-card:nth-child(3):last-child { grid-column: 1 / -1; }
    .reports-summary .report-card { padding: 16px; }
    .reports-summary .report-value { font-size: 24px; }
}

/* --- 14. FILTER-BAR BUTTONS — stop the "Export" label from being clipped ------ */
/* .btn has overflow:hidden (for its shine effect), so in a flex filter bar it can
   shrink below its text width and clip the label ("Expor…"). Keep filter-bar
   controls at their content width, and let the bar wrap if space is tight. */
.filter-controls { flex-wrap: wrap; align-items: center; }
.filter-controls .btn,
.filter-controls > button {
    flex-shrink: 0;
    white-space: nowrap;
}
/* The dropdown is .form-control (width:100%) which otherwise grabs the whole row
   and pushes the button to a second line — size it to its content instead so the
   select and Export button sit side by side. */
.filter-controls .form-control,
.filter-controls select {
    width: auto;
    min-width: 150px;
    flex: 0 1 auto;
}
/* Phones: stack the hub header (title over a full-width controls row) so the
   dropdown + Export sit side by side with room, instead of a cramped right column. */
@media (max-width: 600px) {
    .hub-content .module-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .hub-content .module-header .filter-controls {
        width: 100%;
        flex-direction: row;   /* override the global <=480px column rule */
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .hub-content .module-header .filter-controls .form-control,
    .hub-content .module-header .filter-controls select { flex: 1 1 auto; }
}

/* --- 15. PINNED ROW ACTIONS — keep View/Edit/Delete reachable ---------------- */
/* Wide data tables scroll sideways inside .table-container (overflow-x:auto). On
   tablets/phones the right-most "Actions" column used to scroll off the edge,
   hiding the Delete button with no obvious way to reach it. Pin that column to the
   right so the row actions stay put while the data columns scroll underneath.
   Scoped with :has(...button) so ONLY action columns are pinned — tables whose
   last column is a Status badge (a <span>, no button) are left untouched. */
.table-container { position: relative; }

.table-container .data-table:has(td:last-child button) th:last-child,
.table-container .data-table:has(td:last-child button) td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
}
/* Opaque backgrounds so scrolling cells don't bleed through the pinned column,
   plus a soft left edge so it reads as a floating actions rail when scrolled. */
.table-container .data-table:has(td:last-child button) tbody td:last-child {
    background: var(--white);
    box-shadow: -10px 0 8px -8px rgba(0, 0, 0, 0.10);
}
.table-container .data-table:has(td:last-child button) thead th:last-child {
    background: var(--light-bg);
    box-shadow: -10px 0 8px -8px rgba(0, 0, 0, 0.10);
}
.table-container .data-table:has(td:last-child button) tbody tr:hover td:last-child {
    background: var(--light-bg);
}
/* Keep the action buttons on one tidy row inside the pinned cell. */
.table-container .data-table:has(td:last-child button) td:last-child {
    white-space: nowrap;
}

/* ===========================================================================
   Phone (<=480px): stack data tables into labelled cards instead of a wide
   sideways-scrolling grid, so nothing is clipped ("putol") in portrait. Each
   cell shows its column header (via data-label, set by labelDataTables()).
   Scoped to .table-container .data-table so only real data tables transform;
   phone-landscape (>480px) keeps the normal scrollable table.
   =========================================================================== */
@media (max-width: 480px) {
    .table-container { overflow-x: visible; }
    .table-container .data-table { min-width: 0; }
    .table-container .data-table thead { display: none; }
    .table-container .data-table,
    .table-container .data-table tbody,
    .table-container .data-table tr,
    .table-container .data-table td { display: block; width: 100%; }

    .table-container .data-table tr {
        border: 1px solid #e6e8eb;
        border-radius: 12px;
        padding: 8px 14px;
        margin-bottom: 12px;
        background: var(--white);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .table-container .data-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 7px 0;
        border: none;
        text-align: right;
        white-space: normal;
        word-break: break-word;
    }
    .table-container .data-table td + td { border-top: 1px dashed #eef0f2; }
    .table-container .data-table td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        text-align: left;
        font-weight: 600;
        font-size: 12px;
        color: #6b7280;
        text-transform: none;
    }
    /* No label chrome for empty/avatar/colspan cells. */
    .table-container .data-table td:not([data-label])::before,
    .table-container .data-table td[data-label=""]::before,
    .table-container .data-table td[colspan]::before { content: ""; display: none; }
    .table-container .data-table td[colspan] { text-align: center; justify-content: center; }

    /* Un-pin the sticky Actions column; show its buttons as a right-aligned row. */
    .table-container .data-table:has(td:last-child button) td:last-child,
    .table-container .data-table:has(td:last-child button) th:last-child {
        position: static;
        right: auto;
        box-shadow: none;
    }
    .table-container .data-table td:last-child:has(button) { justify-content: flex-end; }
    .table-container .data-table td:last-child:has(button)::before { display: none; }
}

/* --- 16. ROW ACTION MENU — collapse crowded row actions into one ⋮ button ----- */
/* JS auto-collapses any data-table row whose last cell holds 2+ action buttons
   into a single kebab button; the original buttons MOVE into a floating popup
   (so their onclick handlers keep working). This frees the table width so key
   columns (e.g. Total Spent) are no longer pushed off-screen. */
.row-menu { position: relative; display: inline-flex; }
.row-menu-toggle {
    width: 36px; height: 36px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid #e4e4e4; background: #fff; color: #5c5c5c;
    border-radius: 9px; cursor: pointer; font-size: 16px; line-height: 1;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.row-menu-toggle:hover { background: #f3f4f6; color: #1a1a1a; border-color: #d0d4da; }
.row-menu.open .row-menu-toggle { background: #FAF7F2; color: var(--primary); border-color: #D8BE8E; }

.row-menu-pop {
    position: fixed;
    /* Must float ABOVE every modal that can host a data table (.modal = 9999,
       .modal-overlay = 9998, .cd-modal = 10010) — the popup is re-parented to
       <body>, so once a modal like User Management is open a lower value paints
       the menu BEHIND it. Kept under .ava-splash (99999, boot-only). */
    z-index: 10015;
    display: none;
    flex-direction: column;
    gap: 2px;
    min-width: 172px;
    padding: 6px;
    background: #fff;
    border: 1px solid #e8e8ec;
    border-radius: 12px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .20);
}
/* Shown via its own .open class — the popup is re-parented to <body> when open
   (so it escapes the sticky actions column's stacking context and can't be
   painted over by later rows). */
.row-menu-pop.open { display: flex; }

/* The moved action buttons render as clean, full-width labelled menu items */
.row-menu-pop > button,
.row-menu-pop > a,
.row-menu-pop .btn {
    width: 100%;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    padding: 8px 12px;
    margin: 0;
    border: none !important;
    border-radius: 8px;
    background: #fff !important;
    color: #1f2937 !important;
    box-shadow: none !important;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transform: none !important;
    overflow: visible;
}
/* Icon shares the row's single colour (no separate grey/blue/red tints). */
.row-menu-pop > button i,
.row-menu-pop .btn i { width: 18px; text-align: center; font-size: 14px; color: inherit !important; }
.row-menu-pop > button:hover,
.row-menu-pop .btn:hover { background: #f3f4f6 !important; }
/* One uniform colour for EVERY row action — View / Edit / Delete all match,
   icon + label included (overrides the btn-info/btn-danger/etc. semantic tints). */
.row-menu-pop > button,
.row-menu-pop > a,
.row-menu-pop .btn,
.row-menu-pop .btn-danger, .row-menu-pop .btn-danger i,
.row-menu-pop .btn-success, .row-menu-pop .btn-success i,
.row-menu-pop .btn-warning, .row-menu-pop .btn-warning i,
.row-menu-pop .btn-info, .row-menu-pop .btn-info i {
    color: #374151 !important;
}
.row-menu-pop .btn-danger:hover,
.row-menu-pop .btn-info:hover,
.row-menu-pop .btn-success:hover,
.row-menu-pop .btn-warning:hover { background: #f3f4f6 !important; }
.row-menu-label { flex: 1; }
/* When collapsed, the actions cell only needs room for the kebab */
.data-table td[data-rowmenu] { white-space: nowrap; }

/* ============================================================================
   SEARCH BARS — unified professional focus / press light effect + recent-search
   suggestion dropdown. Applies to every search bar across the app (POS menu,
   customers, suppliers, purchase orders, waste, attendance picker, delivery map).
   The press "light" is a single soft ring that expands on click and settles into
   a restrained focus glow — kept minimal on purpose.
   ============================================================================ */
@keyframes searchPressPulse {
    0%   { box-shadow: 0 0 0 0 rgba(194, 160, 106, 0.30); }
    55%  { box-shadow: 0 0 0 7px rgba(194, 160, 106, 0.07); }
    100% { box-shadow: 0 0 0 3px rgba(194, 160, 106, 0.18); }
}

/* Bordered-wrapper bars: the visible border lives on the wrapper, so glow it. */
.pos-search:focus-within,
.att-picker__search:focus-within {
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(194, 160, 106, 0.18);
    animation: searchPressPulse 0.42s ease-out;
}

/* Bordered-input bars: the border lives on the input itself, so glow the input.
   ID selectors outrank the generic .form-control:focus rule, so these win. */
#customerSearch:focus,
#supplierSearch:focus,
#poSearch:focus,
#wasteSearch:focus,
#ddMapSearch:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(194, 160, 106, 0.18);
    animation: searchPressPulse 0.42s ease-out;
    outline: none;
}

/* Recent-search suggestion dropdown (one shared, body-level, fixed-positioned). */
.search-suggest {
    position: fixed;
    z-index: 12000;
    display: none;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.13);
    padding: 6px;
    max-height: 240px;
    overflow-y: auto;
    animation: searchSuggestIn 0.14s ease-out;
}
@keyframes searchSuggestIn {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: none; }
}
.search-suggest__head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9aa0a6;
}
.search-suggest__head i { font-size: 11px; }
.search-suggest__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 9px 10px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    color: #2b2b2b;
    text-align: left;
    transition: background 0.12s ease, color 0.12s ease;
}
.search-suggest__item i { color: #9aa0a6; font-size: 12px; width: 14px; text-align: center; flex: 0 0 auto; }
.search-suggest__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-suggest__item:hover,
.search-suggest__item.is-active {
    background: rgba(194, 160, 106, 0.08);
    color: var(--primary);
}
.search-suggest__item:hover i,
.search-suggest__item.is-active i { color: var(--primary); }

/* --- 17. SMALLER MENU-CARD ACTION BUTTONS (View / Edit / Delete) -------------- */
/* Per request: shrink the action buttons on the Menu management cards so they're
   more compact and less heavy at the bottom of each card. */
.menu-mcard-actions { gap: 6px; }
.menu-mcard-actions .btn {
    height: 32px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    gap: 6px;
    padding: 0 9px;
}
.menu-mcard-actions .btn i { font-size: 12px; }
/* the eye + delete stay square at the smaller size */
.menu-mcard-actions .mcard-eye,
.menu-mcard-actions .mcard-btn-del {
    flex: 0 0 32px;
    width: 32px;
    padding: 0;
    font-size: 12.5px;
}

/* ============================================================================
   PROFILE PHOTO — the account owner can set a picture that shows in the top-bar
   avatar (falls back to the default user icon when none is set).
   ============================================================================ */
.topbar-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 50%;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
.topbar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.topbar-avatar.has-photo {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(194, 160, 106, 0.28);
}

/* ============================================================================
   FORM VALIDATION — inline "this field needs attention" highlight. Shared by
   every form guard (flagField in app.js) so required-field errors look the same
   across the whole system: red ring + a quick shake, cleared as soon as the
   user edits the field.
   ============================================================================ */
.field-invalid,
.field-invalid:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
    animation: fieldInvalidShake 0.3s ease;
}
@keyframes fieldInvalidShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

/* =========================================================================
   INLINE MODAL VALIDATION BANNER  (.form-alert)
   Clean / minimal / premium — a single restrained banner, not a heavy slab.
   Lives at the top of a modal's scrollable body. Append to styles.css.
   ========================================================================= */
#__formAlertBanner.form-alert,
.form-alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 14px 0;
  padding: 11px 13px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: 0.1px;
  background: #fff;
  color: #1a1a1a;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  /* gentle entrance — premium, not jarring */
  animation: formAlertIn 0.18s ease;
  /* never let a long message break the modal layout */
  word-break: break-word;
  overflow-wrap: anywhere;
}

@keyframes formAlertIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.form-alert__icon {
  flex: 0 0 auto;
  margin-top: 1px;
  font-size: 14px;
  line-height: 1.45;
}

.form-alert__msg {
  flex: 1 1 auto;
  min-width: 0;
}

/* Dismiss affordance — subtle, only darkens on hover */
.form-alert__close {
  flex: 0 0 auto;
  margin: -2px -4px -2px 4px;
  padding: 0 4px;
  background: none;
  border: none;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  color: inherit;
  opacity: 0.5;
  transition: opacity 0.12s ease;
}
.form-alert__close:hover { opacity: 1; }

/* ---- ERROR (default): soft red, thin border, tinted text ---- */
.form-alert--error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
.form-alert--error .form-alert__icon { color: #dc2626; }

/* ---- WARNING: soft amber ---- */
.form-alert--warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
.form-alert--warning .form-alert__icon { color: #d97706; }

/* ---- SUCCESS: soft green (used only via explicit type) ---- */
.form-alert--success {
  background: #FAF7F2;
  border-color: #F3E9D7;
  color: #573C2A;
}
.form-alert--success .form-alert__icon { color: #16a34a; }

/* Dark-card popups (cd-modal head is colored, body is white) inherit fine.
   Guard against the banner being clipped: bodies we insert into already
   scroll (.modal-body, .cd-dialog__body, dynamic dialogs are overflow:auto),
   so no extra overflow rule is needed. */

/* ======================================================================
   DELIVERY BOARD (operations → Delivery tab) + ONLINE ORDERS INBOX
   ====================================================================== */

/* Lanes: Ready for pickup / On the road / Preparing */
.delivery-lane { margin-bottom: 26px; }
.delivery-lane__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
}
.delivery-lane__title i { color: var(--primary, #6F4E37); }
.delivery-lane__count {
    background: #eceff2;
    color: #374151;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 10px;
}

/* Extra chips on rider cards */
.rider-order-card__wait {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #92400e;
    background: #fef3c7;
    border-radius: 999px;
    padding: 6px 12px;
}
.rider-order-card__online,
.rider-order-card__rider {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    margin-right: 6px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    padding: 3px 10px;
}
.rider-order-card__online { background: #F3E9D7; color: #573C2A; }
.rider-order-card__rider  { background: #e0e7ff; color: #3730a3; }

/* Online badge in the order-details modal */
.pay-badge--online { background: #F3E9D7; color: #573C2A; }

/* Role badge for staff tables */
.role-delivery { background: #ffedd5; color: #c2410c; }
.role-kitchen  { background: #fee2e2; color: #b91c1c; }

/* Online orders inbox (top of the Orders tab) */
.online-inbox {
    background: #fff;
    border: 1px solid #F3E9D7;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 22px;
}
.online-inbox__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.online-inbox__head h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}
.online-inbox__head h3 i { color: var(--primary, #6F4E37); }
.online-inbox__count {
    background: #dc2626;
    color: #fff;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 10px;
}
.online-inbox__empty { margin: 4px 0 0; font-size: 13px; color: #6b7280; }
.online-inbox__card {
    border: 1px solid #e5e7eb;
    border-left: 4px solid var(--primary, #6F4E37);
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 10px;
}
.online-inbox__row1 {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
}
.online-inbox__code {
    font-family: monospace;
    font-weight: 700;
    background: #FAF7F2;
    border-radius: 6px;
    padding: 2px 8px;
    color: #573C2A;
}
/* Ang queue number sa inbox card -- ito ang isinisigaw sa counter, kaya siya
   ang unang nababasa. Ang track_code sa tabi niya ay para sa paghahanap. */
.online-inbox__qno {
    font-family: monospace;
    font-weight: 800;
    font-size: 15px;
    background: #1B5E37;
    color: #fff;
    border-radius: 6px;
    padding: 2px 9px;
    letter-spacing: .02em;
}
.online-inbox__type { font-weight: 600; color: #374151; }
.online-inbox__age { color: #6b7280; }
.online-inbox__total { margin-left: auto; font-weight: 800; color: #6F4E37; font-size: 15px; }
.online-inbox__row2 { margin-top: 6px; font-size: 13px; color: #374151; }
.online-inbox__items { margin-top: 4px; font-size: 12.5px; color: #6b7280; }
.online-inbox__note {
    margin-top: 6px;
    font-size: 12.5px;
    color: #92400e;
    background: #fef3c7;
    border-radius: 8px;
    padding: 6px 10px;
}
.online-inbox__actions { display: flex; gap: 8px; margin-top: 10px; }

@media (max-width: 640px) {
    .online-inbox__total { margin-left: 0; width: 100%; }
}

/* ===========================================================================
   ADD / EDIT MENU ITEM MODAL — guided, audience-ordered layout
   Extends the existing .form-section / .form-group / .form-control /
   .form-hint / .form-actions system (styles.css:1148, 8614, 8650, 8717).
   Every override is scoped to #addMenuItemModal / #menuItemForm; every new
   class name was verified unused elsewhere in the repo.
   =========================================================================== */

#addMenuItemModal { max-width: 560px; }

#menuItemForm .form-section h4 { margin-bottom: 6px; flex-wrap: wrap; }
#menuItemForm .form-section > h4 + .form-hint { margin-bottom: 16px; line-height: 1.5; }
#menuItemForm .form-group { margin-bottom: 16px; }
#menuItemForm .form-group:last-child { margin-bottom: 0; }
#menuItemForm .form-group > label { margin-bottom: 6px; }
/* The grid row owns the spacing: its own 15px gap separates Category/Price once
   it collapses to one column ≤600px, so the child margins would double up. */
#menuItemForm .form-row { margin-bottom: 16px; }
#menuItemForm .form-row > .form-group { margin-bottom: 0; }
/* Category and Price carry hints of very different lengths, and the row keeps two
   columns on every tablet (it only collapses ≤600px). Stack each group as a flex
   column and let the hint absorb the leftover height, so both controls land on a
   common baseline instead of sitting ~36px apart. */
#menuItemForm .form-row > .form-group { display: flex; flex-direction: column; }
#menuItemForm .form-row > .form-group > .field-hint { flex: 1 1 auto; }

/* --- per-field guide text: label -> hint -> input --- */
.field-hint {
    font-size: 12px; line-height: 1.5;
    color: var(--text-secondary); margin: 0 0 8px;
}
.field-hint b { color: var(--text-dark); font-weight: 600; }

/* worked example under a field */
.field-eg { font-size: 11.5px; line-height: 1.5; color: var(--text-muted); margin: 6px 0 0; }
.field-eg code {
    background: #f2f2f4; border-radius: 4px; padding: 1px 5px;
    font-size: 11px; color: var(--text-dark);
}

/* --- required / optional markers inside labels --- */
.field-req { color: #d70015; font-weight: 700; margin-left: 2px; }
.field-opt { color: var(--text-muted); font-weight: 500; font-size: 12px; margin-left: 4px; }

/* --- "who sees this" pills, section headers only --- */
.vis-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
    padding: 3px 8px; border-radius: 999px; white-space: nowrap;
}
.vis-badge i { font-size: 9.5px; }
.vis-badge--customer { background: #F3E9D7; color: #6F4E37; border: 1px solid #D8BE8E; }
.vis-badge--internal { background: #f2f2f4; color: #5c5c5c; border: 1px solid #dcdce0; }

/* --- checkboxes that carry a guide line need top alignment ---
   (.checkbox-label at styles.css:11077 sets align-items:center) */
#menuItemForm .checkbox-label { align-items: flex-start; gap: 10px; }
#menuItemForm .checkbox-label input[type="checkbox"] { margin-top: 2px; flex: 0 0 auto; }
#menuItemForm .checkbox-label small {
    display: block; margin-top: 3px;
    font-size: 11.5px; line-height: 1.5; font-weight: 400; color: var(--text-secondary);
}
#menuItemForm .checkbox-label small b { color: var(--text-dark); font-weight: 600; }

/* --- description counter (advisory only, never blocks Save) --- */
.mi-count {
    font-size: 11.5px; line-height: 1.4; color: var(--text-secondary);
    margin: 6px 0 0; text-align: right;
}
.mi-count.is-long { color: #b45309; }
.mi-count.is-over { color: #d70015; font-weight: 600; }

/* ===== LIVE QR-MENU PREVIEW =====
   Mirrors order.html .item-card (145-160) and order-app.js:381-386 field order:
   tag -> name -> price -> goodFor -> description. */
.mi-preview { margin: 0 0 18px; }
.mi-preview__cap {
    display: flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--text-secondary); margin-bottom: 8px;
}
.mi-pv-card {
    display: flex; gap: 12px; align-items: center;
    background: #fff; border: 1px solid #e7e5e4; border-radius: 16px; padding: 12px;
    box-shadow: var(--shadow-sm);
    transition: opacity .2s ease, filter .2s ease;
}
.mi-pv-card.is-off { opacity: .5; filter: grayscale(1); }
.mi-pv-thumb {
    width: 88px; height: 88px; border-radius: 12px; background: #f5f5f4;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
}
.mi-pv-thumb i { color: #d6d3d1; font-size: 26px; }
.mi-pv-thumb img { width: 100%; height: 100%; object-fit: cover; display: none; }
.mi-pv-thumb.has-img img { display: block; }
.mi-pv-thumb.has-img i { display: none; }
.mi-pv-body { flex: 1; min-width: 0; }
.mi-pv-tag {
    display: none; background: #fef3c7; color: #92400e;
    font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
    margin-bottom: 4px; max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mi-pv-card.is-best .mi-pv-tag { display: inline-block; }
.mi-pv-name {
    font-weight: 600; font-size: 15px; line-height: 1.3; color: #1c1917;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere;
}
.mi-pv-name.is-empty { color: #c7c7cc; font-weight: 500; }
.mi-pv-price { font-weight: 700; color: var(--primary); font-size: 14.5px; margin-top: 3px; }
.mi-pv-good {
    font-size: 11.5px; font-weight: 600; color: #57534e; margin-top: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mi-pv-desc {
    color: #78716c; font-size: 12.5px; line-height: 1.45; margin-top: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* [hidden] is a UA rule (display:none) that loses to the class rules above,
   which set an explicit display. Restore it for the toggled preview rows. */
.mi-pv-good[hidden], .mi-pv-desc[hidden], .mi-pv-off[hidden] { display: none; }
.mi-pv-off {
    margin: 8px 0 0; padding: 7px 9px;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
    font-size: 11.5px; line-height: 1.45; color: #b45309;
}
.mi-pv-note { margin: 8px 2px 0; font-size: 11px; line-height: 1.45; color: var(--text-secondary); }
.mi-pv-note b { color: var(--text-muted); font-weight: 600; }

/* ===== COLLAPSED KITCHEN & INVENTORY BLOCK ===== */
.mi-adv {
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--white); margin-bottom: 18px;
}
.mi-adv > summary {
    cursor: pointer; list-style: none;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 12px 14px; font-size: 14px; font-weight: 600; color: var(--text-dark);
    background: #fafafa; border-radius: var(--radius-md);
    transition: background .15s ease;
}
.mi-adv > summary::-webkit-details-marker { display: none; }
.mi-adv > summary::after {
    content: "Show \25BE"; margin-left: auto;
    font-size: 12px; font-weight: 700; color: var(--primary); white-space: nowrap;
}
.mi-adv[open] > summary::after { content: "Hide \25B4"; }
.mi-adv[open] > summary {
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.mi-adv > summary:hover { background: #f1f1f3; }
.mi-adv > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.mi-adv > summary i { color: var(--primary); }
.mi-adv__body { padding: 16px 14px; }
.mi-adv__body .form-group:last-child { margin-bottom: 0; }

/* ingredient entry row — was inline styles, moved here so the ≤480px wrap wins */
.mi-ing-row { display: flex; gap: 8px; margin-top: 8px; }
.mi-ing-row #ingredientSelect { flex: 1; min-width: 0; }
.mi-ing-row #ingredientQty,
.mi-ing-row #ingredientUnit { width: 80px; flex: 0 0 auto; }
.mi-ing-add { padding: 8px 12px; }

/* Touch devices: the primary Save must not be the smallest target in the modal
   (.btn is ~37px, the "+ Add" ~33px — both under the 44px used elsewhere). */
@media (pointer: coarse) {
    #menuItemForm .form-actions .btn,
    #menuItemForm .mi-ing-add { min-height: 44px; }
}

/* ===== STICKY SAVE BAR =====
   .modal-body is the scroll container and has padding:20px, which is where the
   20px offsets come from. If that padding ever changes, change these to match.

   bottom is NEGATIVE and has to be. A sticky inset is resolved against the
   element's MARGIN box, and margin-bottom here is -20px, so bottom:-20px lands
   the BORDER box flush on the scrollport's bottom edge. That is both the stuck
   position and the at-rest position: no jump at the end of the scroll, and
   nothing underneath it.

   This used to read bottom:20px, on the theory that the -20px margin
   "cancels" the container padding. It does not — the two disagree by exactly
   20px, so the bar floated 20px up and permanently covered the last 22px of
   the Kitchen & Inventory block. You could scroll to the very bottom and still
   never see it, on any screen size, which is how it was reported.
   Measured at 1440x900, 1280x720, 1366x640, 814x862 and 390x844: with
   bottom:-20px the bar stays whole at top, middle and end of the scroll, sits
   flush (clip 0px), and leaves 18px of clearance under the last field. */
#menuItemForm .form-actions {
    position: sticky; bottom: -20px; z-index: 3;
    background: var(--white);
    margin: 0 -20px -20px; padding: 14px 20px;
    border-top: 1px solid var(--border);
}
#menuItemForm .form-actions .btn { min-width: 118px; }

@media (max-width: 480px) {
    #menuItemForm .form-actions .btn { flex: 1; min-width: 0; }
    .mi-pv-thumb { width: 72px; height: 72px; }
    .mi-pv-thumb i { font-size: 22px; }
    /* select + Qty + unit + "+ Add" needs ~248px of fixed width but only ~255px
       is left inside the collapsed section on a 390px phone. Wrap instead of
       overflowing the modal body sideways. */
    .mi-ing-row { flex-wrap: wrap; }
    .mi-ing-row #ingredientSelect { flex: 1 1 100%; }
    .mi-ing-row #ingredientQty,
    .mi-ing-row #ingredientUnit { flex: 1 1 0; width: auto; }
}

/* ======================================================================
   PRODUCTION & YIELD — Recipes, Prepared Products, Produce
   Widths and flex live HERE, never inline: the file already learned this
   lesson with .mi-ing-row — an inline width beats a media query, so a
   phone-width rule can never win against it.
   ====================================================================== */

/* ---- Modal panel: one responsive shell for every production dialog ---- */
.prod-modal {
    background: #fff;
    border-radius: var(--radius-lg, 16px);
    width: 100%;
    max-width: 620px;
    padding: 22px;
    max-height: 88vh;               /* proportional, like every other dialog here */
    overflow-y: auto;
    overflow-x: hidden;             /* a wide child must never make the dialog scroll sideways */
    -webkit-overflow-scrolling: touch;
}
.prod-modal--sm { max-width: 480px; }
.prod-modal--md { max-width: 520px; }
.prod-modal__title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.prod-modal__sub {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--text-muted, #6b7280);
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.prod-modal__section {
    border-top: 1px solid #eceff2;
    margin: 18px 0 14px;
    padding-top: 14px;
}
.prod-modal__section > label {
    display: block;
    font-weight: 600;
    margin-bottom: 2px;
}

/* Action bar. Wraps rather than sticks: the panel itself scrolls
   (max-height + overflow-y), so Save is always reachable by scrolling. */
.prod-modal__actions {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.prod-modal .prod-modal__actions button {
    flex: 1 1 140px;
    min-height: 44px;              /* comfortable touch target */
    padding: 12px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
}
.prod-btn-cancel {
    border: 1px solid #cfcfcf;
    background: #fff;
    color: var(--text-color, #1a1a1a);
}
.prod-btn-save {
    flex-grow: 1.4;
    border: none;
    background: var(--primary, #6F4E37);
    color: #fff;
    font-weight: 700;
}
.prod-btn-danger {
    border: none;
    background: #b91c1c;
    color: #fff;
    font-weight: 700;
}

/* ---- Ingredient picker row ---- */
.prod-ing-box {
    border: 1px solid #d2d2d7;
    border-radius: 8px;
    padding: 12px;
    background: #f5f5f7;
    min-height: 52px;
    margin-bottom: 10px;
}
.prod-ing-empty { margin: 0; font-size: 13px; color: #8e8e93; }
.prod-ing-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 13px;
}
.prod-ing-line + .prod-ing-line { border-top: 1px solid #e4e4e7; }
.prod-ing-line__name { min-width: 0; overflow-wrap: anywhere; }
.prod-ing-line__qty { font-weight: 600; white-space: nowrap; }
.prod-ing-line__del {
    background: none;
    border: none;
    color: #b91c1c;
    cursor: pointer;
    margin-left: 8px;
    min-width: 32px;
    min-height: 32px;
}

.prod-ing-add {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: flex-end;
}
.prod-ing-add__item { flex: 2 1 170px; min-width: 0; }
.prod-ing-add__qty  { flex: 1 1 90px;  min-width: 0; }
.prod-ing-add__unit { flex: 1 1 90px;  min-width: 0; }
.prod-ing-add__btn  { flex: 0 0 auto; min-height: 44px; }
/* Below ~430px a 4-across row cannot breathe: item takes the full width and
   qty/unit/Add share the next line. */
@media (max-width: 430px) {
    .prod-ing-add__item { flex: 1 1 100%; }
    .prod-ing-add__btn  { flex: 1 1 100%; }
}

/* ---- Paired number + unit input ---- */
.prod-qty-unit { display: flex; gap: 8px; min-width: 0; }
.prod-qty-unit input { flex: 1 1 auto; min-width: 0; }
.prod-qty-unit select { flex: 0 0 92px; max-width: 92px; }

/* ---- Read-only summary rows ---- */
.prod-summary {
    background: #f8fafc;
    border: 1px solid #eceff2;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 14px;
}
.prod-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 13px;
}
.prod-summary__row + .prod-summary__row { margin-top: 6px; }
.prod-summary__row span { color: var(--text-muted, #6b7280); }
.prod-summary__row strong { text-align: right; overflow-wrap: anywhere; }

.prod-list-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px solid #f1f1f4;
    font-size: 13px;
}
.prod-list-row span { min-width: 0; overflow-wrap: anywhere; }
.prod-list-row strong { white-space: nowrap; }

.prod-note {
    font-size: 13px;
    color: #374151;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 10px 12px;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.prod-preview {
    margin: 4px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary, #6F4E37);
    line-height: 1.5;
}
.prod-preview--warn { color: #b45309; }

/* ---- Sub-tab strip: must wrap, never scroll off ---- */
.production-subtabs,
.inventory-subtabs {
    margin-bottom: 18px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
/* Do NOT set a min-height below 44px here: this selector is more specific
   than, and later than, the app-wide @media (pointer: coarse) touch floor, so
   it would silently shrink the target on every phone. */
.production-subtabs .category-tab,
.inventory-subtabs .category-tab { min-height: 44px; }

/* NOTE: the sixth Production tab needs no extra rule. Wrapping is already
   correct at every width: the base .hub-tabs sets flex-wrap: wrap, a later rule
   sets nowrap, and the <=768px override restores wrap. Verified at 320px,
   360px and 1024px. A max-width rule appended here would be dead code. */

/* .text-muted is used by the new production tables for "— missing —" / "not
   set" placeholders and was never defined in this file. Scoped to those tables:
   a bare rule here would sit at the end of the cascade and restyle the eight
   pre-existing .text-muted elements elsewhere in the app. */
#productionBody .text-muted { color: var(--text-muted, #6b7280); }

/* The staged-ingredient remove button is the smallest control in the new UI.
   None of the four existing @media (pointer: coarse) blocks mention prod-*, so
   it gets its own floor here. */
@media (pointer: coarse) {
    .prod-ing-line__del {
        min-width: 44px;
        min-height: 44px;
    }
}

/* NOTE: do NOT add a horizontal gutter to .modal-overlay[style*="flex"] here.
   An identical rule already exists at the [responsive-2] block above with
   `padding: 12px 0`, and every injected panel already self-gutters
   (width:min(Xpx, 92-94vw)). Adding 12px of side padding makes the content box
   100vw-24px, which is NARROWER than 94vw on any screen under 400px — the
   overlay then scrolls sideways by a hair and the centred panel drifts
   off-centre. The three production dialogs carry their own inline
   `padding:24px 12px`, which is what they actually needed. */

/* Empty-state icon: the inline #c7c7cc was near-invisible on the light panel. */
.empty-state i.prod-empty-icon { font-size: 34px; color: #9aa1a9; opacity: 1; }
.empty-state h4.prod-empty-title { margin: 12px 0 6px; font-size: 15px; font-weight: 700; }

/* Produce CTA sits at the end of the sub-tab strip on desktop, and drops to its
   own full-width row on a phone rather than squeezing the tabs. */
.prod-produce-cta { margin-left: auto; min-height: 44px; }
@media (max-width: 560px) {
    .prod-produce-cta { margin-left: 0; flex: 1 1 100%; }
}
/* A variance the owner should look at. Colour is never the only signal — the
   number carries its own +/- sign. */
.prod-variance-bad { color: #b91c1c; font-weight: 700; }

/* Qty + unit pair inside a Produce ingredient row. Replaces an inline
   max-width:190px — inline would beat the phone rule below, which is the
   mistake this file keeps warning about. */
.prod-qty-unit--row { flex: 0 0 auto; max-width: 190px; }
@media (max-width: 430px) {
    /* On a narrow phone the name and the inputs each take a full line, so the
       pair can use the whole width instead of being squeezed to 190px. */
    .prod-ing-line { flex-wrap: wrap; }
    .prod-ing-line__name { flex: 1 1 100%; }
    .prod-qty-unit--row { flex: 1 1 100%; max-width: none; }
}

/* Production tiles on the dashboard. Auto-fit grid so five tiles sit in one row
   on a desktop, two or three on a tablet and one per row on a phone — no
   breakpoint list to keep in sync. */
.prod-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}
.prod-tile {
    background: var(--light-bg, #f8fafc);
    border: 1px solid var(--border-color, #e4e4e4);
    border-radius: var(--radius-md, 10px);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.prod-tile--warn { background: #fffbeb; border-color: #fde68a; }
.prod-tile__value {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.prod-tile__label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-color, #1a1a1a);
}
.prod-tile__sub {
    font-size: 11.5px;
    color: var(--text-muted, #6b7280);
    overflow-wrap: anywhere;
}
/* One section, so no grid: .dashboard-grid's minmax(400px, 1fr) auto-fit is for
   side-by-side panels and had this stretching oddly on tablet widths. */
.dashboard-production { display: block; margin-bottom: 18px; }

/* ==========================================================================
   SETTINGS HUB — layout
   Every rule here is scoped to #settingsHubContent on purpose. `.settings-form`
   is also used at index.html:574 OUTSIDE this hub, and `.module-header` is used
   across the whole app; an unscoped rule appended this late in the cascade
   would win every tie and restyle screens that are already correct.
   ========================================================================== */

/* Settings is a reading-and-typing screen, not a dashboard. Unconstrained it
   ran the full width of the window, which on a 1080p till put a 1900px gap
   between a label and its own input. */
#settingsHubContent {
    max-width: 1040px;
}

/* .settings-section had NO rule at all — it was a bare div with an inline
   margin, so every section rendered as flat text on the page background with
   nothing separating one concern from the next. Give it the same card the rest
   of the app already uses. */
#settingsHubContent .settings-section {
    background: var(--white, #fff);
    border: 1px solid var(--border-color, #e4e4e4);
    border-radius: var(--radius-md, 12px);
    padding: 22px 24px;
    box-shadow: var(--shadow, 0 1px 3px rgba(0, 0, 0, .06));
}

/* The card supplies the gap now, so the header's own 25px bottom margin
   double-spaces every section heading. */
#settingsHubContent .settings-section > .module-header {
    margin-bottom: 16px;
}

#settingsHubContent .module-header h3 {
    font-size: 17px;
    line-height: 1.3;
}

/* The General form is the one place with a column of plain label+input pairs,
   and it carried a hard max-width: 600px that left the rest of the card empty.
   TWO columns, never three: every checkbox here governs the field under it and
   spans the full row, so a third column just orphans the field beside it —
   Tax Rate, Service Charge Rate and Void PIN each ended up alone against a
   third of empty card. 340px is chosen so the hub's 1040px cap yields exactly
   two tracks, and a phone drops to one. */
#settingsHubContent .settings-form {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: 0 22px;
    align-content: start;
}

/* A checkbox row is a sentence, not a field: it reads badly squeezed into half
   a row next to a text input, so it takes the full width. */
#settingsHubContent .settings-form .form-group:has(input[type="checkbox"]) {
    grid-column: 1 / -1;
}

#settingsHubContent .settings-form .form-group {
    min-width: 0;   /* a long value must not push the grid track wider */
}

/* The Save button is a DIRECT child of that grid, so it became a grid item:
   half-width, and stretched to the height of the label+input beside it — a
   110px green slab. It gets its own full-width row and its natural size. */
#settingsHubContent .settings-form > .btn {
    grid-column: 1 / -1;
    justify-self: start;
    align-self: start;
    margin-top: 6px;
}

/* Phones: the card padding is a bigger share of a 360px screen than of a
   desktop one, so give the content back its horizontal room. */
@media (max-width: 560px) {
    #settingsHubContent .settings-section {
        padding: 16px 14px;
    }
    #settingsHubContent .settings-form {
        gap: 0;
    }
}

/* ==========================================================================
   DANGER CONFIRM — ang tanong bago ang hindi na mababawi
   ==========================================================================
   Kapalit ng browser `confirm()` para sa mga hakbang na hindi na maibabalik.
   Ang native na dialog ay nasa ibabaw ng lahat, kulay-abo, at nakasulat sa
   font ng OS — mukha siyang mula sa ibang programa, at ang OK/Cancel ay
   pareho ang bigat kahit ang isa sa kanila ay pagbura.

   May SARILING overlay siya, hindi ang `#modalOverlay` ng app. Sinadya iyon:
   isa lang ang overlay ng app at ibinabahagi siya ng bawat modal, kaya ang
   pag-sara ng confirm na nakapatong sa isang bukas na modal ay magsasara sa
   dalawa. Nakapatong siya sa z-index 10050, sa itaas ng modal (9999).

   Nananatili siya sa palette: `--error` ang accent, hindi bagong pula.
   -------------------------------------------------------------------------- */
.danger-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: dangerConfirmFade 0.15s ease;
}

@keyframes dangerConfirmFade { from { opacity: 0; } to { opacity: 1; } }

.danger-confirm {
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
    max-width: 420px;
    width: 100%;
    overflow: hidden;
    animation: modalSlideIn 0.22s ease;
    /* WALANG pulang border sa itaas — inalis ng may-ari 2026-08-13. Tatlo nang
       bagay ang nagdadala ng bigat: ang pulang icon, ang kahon ng kahihinatnan,
       at ang pulang pindutan. Ang pang-apat ay hindi na nagdadagdag ng linaw,
       nagdadagdag lang ng ingay sa isang card na dapat mabasa. */
}

.danger-confirm-body {
    padding: 22px 22px 18px;
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.danger-confirm-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.11);
    color: var(--error-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.danger-confirm-text { flex: 1 1 auto; min-width: 0; }

.danger-confirm-text h4 {
    margin: 2px 0 7px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    line-height: 1.35;
}

.danger-confirm-text p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-secondary, #5c5c5c);
}

/* Ang nawawala kapag nagpatuloy ka. Ito ang bahaging binabasa. */
.danger-confirm-text .danger-confirm-consequence {
    margin-top: 10px;
    padding: 9px 12px;
    border-left: 3px solid var(--error);
    background: rgba(239, 68, 68, 0.06);
    border-radius: 0 6px 6px 0;
    font-size: 12.5px;
    color: var(--error-dark);
}

.danger-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 22px 20px;
}

/* Ang Cancel ang default na hitsura. Ang mas ligtas na pindutan ang dapat
   mas madaling pindutin, hindi ang mas mabigat. */
.danger-confirm-actions .btn { min-width: 96px; }

@media (max-width: 480px) {
    .danger-confirm-actions { flex-direction: column-reverse; }
    .danger-confirm-actions .btn { width: 100%; }
}

/* Ang mabigat pero HINDI pagbura — hal. ang pag-logout. Kung pula ang lahat,
   wala nang ibig sabihin ang pula sa "Delete account". Ang icon lang ang
   nagbabago; ang card at ang layout ay iisa, kaya iisa pa rin ang pakiramdam. */
.danger-confirm-overlay.is-neutral .danger-confirm-icon {
    background: rgba(194, 160, 106, 0.10);
    color: #6F4E37;
}

/* ==========================================================================
   CHOOSER — pumili ng isa, hindi mag-type ng isa
   ==========================================================================
   Kapareho ng `.danger-confirm` na card at overlay (parehong z-index, parehong
   pag-uugali sa backdrop) pero may listahan ng pindutan sa halip na Cancel/
   Confirm. Kapalit ng browser `prompt()` sa mga lugar kung saan ang sagot ay
   isa sa maliit at alam nang hanay — kung saan ang pagpapa-type ay paghingi
   sa tao na hulaan ang tamang baybay ng bagay na alam na natin.
   -------------------------------------------------------------------------- */
.danger-confirm-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 22px 20px;
}

.danger-confirm-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 15px;
    border: 1.5px solid #e0e0e0;
    background: var(--white);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--text-primary, #1f2937);
    transition: border-color .12s ease, background .12s ease;
}

.danger-confirm-option:hover,
.danger-confirm-option:focus-visible {
    border-color: var(--primary, #6F4E37);
    background: #f3faf6;
    outline: none;
}

.danger-confirm-option i {
    flex: 0 0 auto;
    width: 20px;
    text-align: center;
    color: var(--primary, #6F4E37);
}

.danger-confirm-option-label { flex: 1 1 auto; font-weight: 600; font-size: 14px; }
.danger-confirm-option-hint  { flex: 0 0 auto; font-size: 13px; color: var(--text-secondary, #5c5c5c); }

/* Attendance date range (Staff & HR -> Attendance, and My Attendance).
   The From/To captions used to be bare <span>s that were SIBLINGS of their
   <input>, inside a flex-wrap row. On a phone the row broke between a caption
   and the field it names: 'From' stranded at the end of one line with its date
   input alone on the next, and 'To' pushed out to the right of it. Each pair is
   now one <label>, so it can never be split - and the caption is finally
   programmatically associated with its input for screen readers. */
.att-range__field { display: inline-flex; align-items: center; gap: 6px; }
.att-range__field > span { font-size: 12px; color: #5c5c5c; white-space: nowrap; }
@media (max-width: 600px) {
    /* Two per row where they fit... */
    .att-range__field { flex: 1 1 44%; min-width: 150px; }
    .att-range__field input.form-control { flex: 1 1 auto; min-width: 0; width: auto; }
}
@media (max-width: 480px) {
    /* ...but on a narrow phone 44% leaves the date input too cramped and the
       YEAR gets clipped ('19/08/202'). A full row each still puts the caption
       and the field side by side, with room to spare. */
    .att-range__field { flex: 1 1 100%; }
}

/* ============================================================================
   STATION SPLIT — Kitchen (pagkain) vs Barista (inumin at panghimagas)
   ----------------------------------------------------------------------------
   Hinati ang kitchen display sa dalawang istasyon. Iisang board pa rin ang
   nakikita ng dalawa, pero ang bawat isa ay ang SARILI NIYANG linya lang ang
   nakikita: sa `kitchen` ang pagkain, sa `barista` ang kape/inumin/dessert.

   Dahil hati na ang tiket, may bagong bitag: kapag natapos ng barista ang
   dalawang latte, mukhang tapos na ang buong order — hindi pa pala, may
   nakabinbin pang adobo sa kabilang istasyon. Kaya may dalawang piyesa dito
   na hindi palamuti kundi mismong sagot doon:
     .ticket-otherstation — tahimik na paalala na may linya ang order na
                            HINDI sa iyo, kaya hindi pa tapos ang order
     .station-done        — ang action button kapag tapos ka na pero sila hindi

   KULAY AT CONTRAST. Binabasa ito nang pasulyap, sa mainit na kusina, sa
   screen na nakasabit sa dingding. Kaya lahat ng teksto rito ay hindi bababa
   sa 4.5:1 kontra sa sariling ground niya (WCAG 2.1 AA, 1.4.3):
     kitchen chip    #9A3412 sa #FFEDD5 = 6.4:1
     barista chip    #8B5E3C sa #F5EBE0 = 4.7:1 (kapareha ng .role-badge.role-barista)
     otherstation    #5c5c5c sa puti    = 6.7:1
     station-done    #5c5c5c sa #F3F4F6 = 6.1:1
   PAALALA sa susunod na hahawak: ang orange ng kusina na #ea580c ay 3.6:1
   LANG kahit sa purong puti — bumabagsak siya bilang teksto, gaano man
   kagaan ang ground, kaya walang ground na makakapagligtas sa kaniya. Nasa
   BORDER siya ng chip (3.1:1 kontra #FFEDD5 — sapat para sa non-text sa
   1.4.11) at ang teksto ay ang mas madilim niyang kapatid na #9A3412.
   Huwag siyang ibalik bilang `color:`.
   ========================================================================== */

/* Chip ng istasyon. Lumalabas sa kitchen ticket line at sa tabi ng pangalan ng
   category sa Settings. Sinusundan ang hugis ng .ticket-status-badge (3084) at
   .ticket-type (3098) — 999px pill, ~11px, bold — para iisang wika pa rin ang
   tiket kahit may bagong bagay dito. */
.station-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1.4;
    padding: 2px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    white-space: nowrap;
    vertical-align: middle;
}
.station-chip i { font-size: 10px; }

/* Pagkain */
.station-chip--kitchen {
    background: #FFEDD5;
    border-color: #ea580c;
    color: #9A3412;
}

/* Inumin at panghimagas — sinasadyang kapareho ng pares ng
   .role-badge.role-barista (11623) para pareho ang mukha ng tao at ng linya. */
.station-chip--barista {
    background: #F5EBE0;
    border-color: #8B5E3C;
    color: #8B5E3C;
}

/* "+2 more in the kitchen" — isang linyang footer sa loob ng tiket.
   Sadyang mas maliit at mas kupas kaysa sa .ticket-item (15.5px / 600 /
   --text-dark): pang-gilid lang siya, hindi siya dapat makipag-agawan ng mata
   sa listahan ng pagkain sa itaas niya. Ang hairline sa itaas ang naghihiwalay
   sa kaniya sa huling .ticket-line — na walang border-bottom (3136).
   PLACEMENT: ilagay siyang KAPATID pagkatapos ng .ticket-items, hindi sa loob.
   Kapag nasa loob, siya na ang :last-child kaya babalik ang dashed border ng
   huling .ticket-line at magiging doble ang guhit. */
.ticket-otherstation {
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid #E5E7EB;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--text-muted);
}
.ticket-otherstation i {
    margin-right: 5px;
    font-size: 11px;
    color: #9ca3af;
}

/* Button kapag TAPOS NA ang parte ko pero hindi pa ang kabila.
   Dapat basahin bilang "naghihintay", hindi "pindutin mo ako": patag, walang
   kulay ng brand, walang anino. Ang pagka-mute ay galing sa desaturation at sa
   patag na ground — HINDI sa manipis na teksto; 6.1:1 pa rin siya para mabasa
   mula sa kabilang dulo ng kusina.
   Walang pointer-events: none dito — sa JS ang pag-disable, at kailangan pa
   ring maabot ng focus at ng tooltip ang button. */
.station-done,
.ticket-actions .station-done {
    background: #F3F4F6;
    color: var(--text-muted);
    border: 1px solid #E5E7EB;
    box-shadow: none;
    cursor: default;
}
.station-done i,
.ticket-actions .station-done i { color: #9ca3af; }

/* Kailangan ang mas mataas na specificity dito: may transform at box-shadow ang
   .btn-primary:hover (1274), at kung hindi siya papatayin ay tatalon pa rin ang
   button na para bang may mangyayari kapag pinindot — iyon mismo ang mensaheng
   iniiwasan natin. */
.station-done:hover,
.station-done:focus-visible,
.ticket-actions .station-done:hover,
.ticket-actions .station-done:focus-visible {
    background: #F3F4F6;
    color: var(--text-muted);
    transform: none;
    box-shadow: none;
}

/* ===========================
   EQUIPMENT & ASSETS
   Ginagamit ng Menu & Stock -> Inventory -> Equipment sub-tab. Ang status pill
   ay muling ginagamit ang `.stock-badge` at ang due date ang `.expiry-indicator`,
   kaya isang wika lang ang binabasa ng mata sa buong Inventory tab.
   =========================== */

.equipment-filters { margin-bottom: 18px; }

.eq-chip-count {
    opacity: 0.75;
    font-weight: 700;
    font-size: 12px;
}

.eq-muted { color: var(--text-muted); }

/* ---- Alert strip: ang tumigil na ang benta ang nasa unahan ---- */
.eq-alerts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.eq-alert {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: #fff4e0;
    color: #7a4a00;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.eq-alert:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.eq-alert:active { transform: scale(0.97); }

.eq-alert--critical {
    background: #fdeceb;
    color: #8c1d18;
    border-color: rgba(179, 38, 30, 0.25);
}

.eq-alert-name { font-weight: 700; }

.eq-alert-label { font-weight: 500; opacity: 0.9; }

.eq-alert-more {
    align-self: center;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

/* ---- Row detail ---- */
.eq-tag {
    margin-left: 8px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.eq-crit {
    margin-top: 3px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.eq-crit--critical  { color: #B3261E; }
.eq-crit--important { color: #B26A00; }
.eq-crit--minor     { color: var(--text-muted); }

/* ---- Detail modal ---- */
.eq-section-title {
    margin: 22px 0 10px;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}

/* Kapag alas-6 ng umaga at ayaw mag-init ng chiller, ang numerong ito ang
   hinahanap — kaya siya malaki, hiwalay at pindutin agad sa telepono. */
.eq-service-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-top: 16px;
    border-radius: 12px;
    background: var(--primary-light);
    border: 1px solid rgba(111, 78, 55, 0.18);
}

.eq-service-card i {
    font-size: 20px;
    color: var(--primary);
}

.eq-service-card > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.eq-service-phone {
    color: var(--primary);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
}

.eq-service-phone:hover { text-decoration: underline; }

.eq-verdict {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-top: 12px;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-primary);
}

.eq-verdict--warn {
    background: #fdeceb;
    border-color: rgba(179, 38, 30, 0.25);
    color: #8c1d18;
}

/* ---- Timeline ---- */
.eq-timeline {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.eq-timeline-row {
    display: grid;
    grid-template-columns: 96px 96px 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
}

.eq-timeline-row:last-child { border-bottom: none; }

.eq-timeline-date { color: var(--text-muted); font-variant-numeric: tabular-nums; }

.eq-timeline-note { color: var(--text-primary); }

.eq-timeline-cost { font-weight: 700; font-variant-numeric: tabular-nums; }

.eq-timeline-by { color: var(--text-muted); }

.eq-log-type {
    justify-self: start;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize;
}

.eq-log-type--repair      { background: #e6f1fa; color: #1F6FB2; border-color: rgba(31, 111, 178, 0.25); }
.eq-log-type--issue       { background: #fff4e0; color: #B26A00; border-color: rgba(178, 106, 0, 0.25); }
.eq-log-type--breakage    { background: #fdeceb; color: #B3261E; border-color: rgba(179, 38, 30, 0.25); }
.eq-log-type--preventive  { background: #e7f6ee; color: #1B7A43; border-color: rgba(27, 122, 67, 0.25); }
.eq-log-type--replacement { background: #e7f6ee; color: #1B7A43; border-color: rgba(27, 122, 67, 0.25); }

/* Sa telepono ay bumabagsak ang timeline sa dalawang hanay: ang limang-hanay na
   grid ay nagpipiga ng note hanggang isang salita kada linya. */
@media (max-width: 640px) {
    .eq-timeline-row {
        grid-template-columns: auto 1fr;
        row-gap: 4px;
    }
    .eq-timeline-note { grid-column: 1 / -1; }
    .eq-timeline-cost { grid-column: 1; }
    .eq-timeline-by   { grid-column: 2; justify-self: end; }
}

/* ============================================================
   QUEUE BOARD — ang screen na nakaharap sa kumakain
   ============================================================
   Tatlong bagay ang nagpapaiba nito sa isang generic na dashboard:

   1. MAY PANGALAN. Ang QUEBO wordmark sa itaas ang nagsasabing tindahan ito,
      hindi isang app na nagkataong nakabukas. Iyon ang unang nakikita ng
      pumapasok, kaya siya dapat ang unang nakalagay.
   2. HINDI PANTAY ANG DALAWANG KOLUM. Ang hinahanap ng mata ay "handa na ba
      ako" — kaya ang Now Serving ay mas maliwanag, mas mabigat, may sariling
      accent. Ang Preparing ay mahinahon: paghihintay lang siya.
   3. WALANG PRESYO, PANGALAN O ACTION. Nakaharap siya sa publiko buong araw.

   Grid: isang header na tumatawid sa dalawang kolum, tapos ang dalawa. */
.qb-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    gap: 16px;
    min-height: calc(100vh - 150px);
    position: relative;
}

/* ---- Ang brand bar ---- */
.qb-brand {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, #3B2A20 0%, #21160F 100%);
    /* WALANG gintong linya sa ilalim nang sinasadya. Dating may
       `box-shadow: inset 0 -3px 0 0 #C2A06A` dito para iugnay ang board sa
       brand — pero sa isang board na tinitingnan mula sa malayo, ang linyang
       iyon ay nagmumukhang PANGALAWANG GILID sa ilalim ng bar, na parang may
       nakapatong na ibang layer. Ang solidong gradient ay sapat na; ang
       gintong tono ay nasa logo naman at sa mga card sa ibaba. */
}
.qb-brand__logo {
    height: 34px;
    width: auto;
    display: block;
    /* Ang PNG ay may sariling alpha; walang filter para hindi mabago ang
       hugis ng wordmark. */
}
.qb-brand__right { display: flex; align-items: center; gap: 16px; }
.qb-brand__meta { text-align: right; line-height: 1.15; }
.qb-brand__clock {
    font-size: 21px;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}
.qb-brand__day {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #C2A06A;
    margin-top: 2px;
}

/* ---- Ang dalawang kolum ---- */
.qb-col {
    background: #fff;
    border: 1px solid var(--border-color, #e4e4e4);
    border-radius: 14px;
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
/* Ang Now Serving ang bumubuhat ng board. Bigyan siya ng sariling tinta. */
.qb-col--ready {
    background: linear-gradient(180deg, #F4FBF6 0%, #fff 42%);
    border-color: #CDE7D6;
}

.qb-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--border-color, #e4e4e4);
}
.qb-head__label {
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #8a7768;
}
.qb-col--ready .qb-head__label { color: #1B5E37; }
/* Ang bilang: nariyan para sa staff, hindi para sa kumakain — kaya tahimik. */
.qb-head__count {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #b6a596;
    background: #FAF7F2;
    border-radius: 999px;
    padding: 2px 10px;
    min-width: 28px;
    text-align: center;
}
.qb-col--ready .qb-head__count { color: #2f7d4f; background: #E8F5EC; }

.qb-list { display: flex; flex-direction: column; gap: 8px; overflow: hidden; min-height: 0; }

/* ---- Ang hilera ---- */
.qb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 16px;
    border-radius: 11px;
    background: #FBF9F6;
    border-left: 3px solid #E3D9CE;
}
.qb-col--ready .qb-row {
    background: #E8F5EC;
    border-left-color: #1B5E37;
    /* Ang bagong tinawag ay dapat mahuli ng mata mula sa layo — pero isang
       beses lang, hindi paulit-ulit na kumikislap. */
    animation: qbPop .4s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes qbPop {
    from { transform: translateY(-5px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.qb-num {
    font-size: 38px;
    font-weight: 800;
    /* Ang tabular-nums ang nagpapapantay ng mga digit sa isa't isa, kaya
       hindi gumagalaw ang hanay kapag nagbago ang numero. */
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    line-height: 1.05;
    color: #2A1D16;
}
.qb-col--ready .qb-num { color: #14532d; }

.qb-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: 4px 11px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #E7DED4;
    color: #8a7768;
    white-space: nowrap;
    flex-shrink: 0;
}
.qb-tag i { font-size: .92em; opacity: .75; }
.qb-row--drinks .qb-tag { color: #7A5330; border-color: #E3D3C4; }
.qb-row--food   .qb-tag { color: #8a6a45; border-color: #EADFCE; }
.qb-col--ready .qb-tag { border-color: #CDE7D6; color: #2f7d4f; }

/* ---- Walang laman ---- */
.qb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1;
    color: #b6a596;
    font-size: 15px;
    letter-spacing: .01em;
    padding: 30px 10px;
}
.qb-empty__mark { font-size: 30px; opacity: .35; }

/* Sa isang tablet na nakapatayo o sa telepono, magkapatong ang dalawang kolum
   sa halip na magsiksikan. Ang board ay pinakamadalas nasa TV, pero ang
   parehong screen ay binubuksan din sa tablet habang sinusubukan. */
@media (max-width: 820px) {
    .qb-wrap { grid-template-columns: 1fr; min-height: 0; }
    .qb-num { font-size: 30px; }
    .qb-brand__logo { height: 26px; }
    .qb-brand__clock { font-size: 17px; }
}

/* ---- TV MODE: ang board lang, wala nang iba --------------------------
   Ang F11 lang ay tinatanggal ang browser chrome pero naiiwan ang sidebar at
   ang top bar. Walang kwenta sa kumakain ang petsa, branch at pangalan ng
   naka-login — espasyo lang ang inaagaw nila sa numerong dapat nilang basahin
   mula sa kabilang dulo ng tindahan. */
.qb-tv .sidebar,
.qb-tv .sidebar-backdrop,
.qb-tv .top-bar,
.qb-tv .sidebar-collapse-btn { display: none !important; }

.qb-tv .main-content { margin-left: 0 !important; width: 100% !important; padding: 0 !important; }
.qb-tv .module { padding: 0 !important; }
.qb-tv .qb-wrap {
    min-height: 100vh;
    height: 100vh;
    gap: 10px;
    padding: 10px;
    border-radius: 0;
}

/* SUKAT SA TV — nakasukat sa TAAS ng screen, hindi sa pixel.
   Ang karaniwang 32" ay 1366x768, hindi 1080p, kaya ang naka-hardcode na
   58px ay nauubos ang taas at apat na hilera lang ang kasya. Ang vh ay
   umaangkop sa kung ano talaga ang panel: lumiliit sa 768p, lumalaki sa
   1080p at 4K, at hindi na kailangang hulaan pa. Ang clamp() ang humahawak
   ng dalawang dulo para hindi siya maging mikroskopiko o katawa-tawa. */
/* Bakit 7.6vh at hindi 6.2: sa 32" 16:9 ang taas ng screen ay 399 mm, kaya
   ang 6.2vh ay 24.7 mm lang na titik -- komportableng mabasa hanggang ~3.7 m.
   Sa isang cafe ay madalas 4-5 m ang layo ng pila sa counter. Ang 7.6vh ay
   30.3 mm, na umaabot sa ~4.5 m. Pareho ang milimetrong ito sa 768p at 1080p
   dahil vh siya, hindi px -- iyon ang buong dahilan ng vh dito. */
.qb-tv .qb-num          { font-size: clamp(32px, 7.6vh, 96px); }
.qb-tv .qb-head__label  { font-size: clamp(13px, 2.3vh, 30px); letter-spacing: .18em; }
.qb-tv .qb-head__count  { font-size: clamp(11px, 1.8vh, 22px); padding: .3vh 1.1vh; }
.qb-tv .qb-head         { padding-bottom: 1.1vh; margin-bottom: 1.1vh; }
.qb-tv .qb-tag          { font-size: clamp(11px, 1.8vh, 24px); padding: .4vh 1.1vh; gap: .5vw; }
.qb-tv .qb-row          { padding: 1.1vh 1.4vw; gap: 1.2vw; border-left-width: 4px; }
.qb-tv .qb-list         { gap: .9vh; }
.qb-tv .qb-empty        { font-size: clamp(15px, 2.4vh, 30px); }
.qb-tv .qb-empty__mark  { font-size: clamp(26px, 4.4vh, 54px); }

/* Ang brand bar ay nananatili sa TV -- siya ang nagsasabing tindahan ito at
   hindi isang screen na nagkataong nakabukas. Pero hindi siya dapat kumain ng
   espasyong pang-numero, kaya nananatiling manipis. */
.qb-tv .qb-brand        { padding: 1.1vh 1.6vw; border-radius: 10px; }
.qb-tv .qb-brand__logo  { height: clamp(22px, 4.4vh, 58px); }
.qb-tv .qb-brand__clock { font-size: clamp(16px, 3.2vh, 40px); }
.qb-tv .qb-brand__day   { font-size: clamp(9px, 1.5vh, 18px); }
.qb-tv .qb-col          { border-radius: 10px; padding: 1.4vh 1.2vw 1.6vh; }

/* OVERSCAN. Marami pa ring TV ang pinuputol ang gilid ng HDMI signal (2-5%),
   kaya ang numerong nakadikit sa gilid ay nawawala nang tahimik. Ang maliit
   na hangin sa paligid ang nagpapasiguro na buo pa rin ang nababasa. */
.qb-tv .qb-wrap {
    padding: 1.6vh 1.4vw;
    gap: 1.2vw;
    /* Kasama ang padding sa 100vh -- kung content-box ito ay lalampas siya sa
       screen at lalabas ang scrollbar na inaalis natin sa ibaba. */
    box-sizing: border-box;
}

/* WALANG SCROLLBAR SA TV. Pangit siya, at ang paglabas niya ay nangangahulugang
   may pinuputol na hindi mababasa -- walang tatayo sa harap ng TV para
   mag-scroll. Ang "+ N more" ang tamang sagot doon, hindi ang scrollbar. */
.qb-tv, .qb-tv body { overflow: hidden !important; }
html:has(body.qb-tv) { overflow: hidden !important; }
.qb-tv .main-content { overflow: hidden !important; height: 100vh !important; }
.qb-tv .module { overflow: hidden !important; height: 100vh; }
.qb-tv .qb-list { overflow: hidden; }

/* Kapag mas marami ang pila kaysa sa kasya, may sinasabi tayo -- hindi
   basta pinuputol. Walang nagsi-scroll ng TV, kaya ang tahimik na
   pagkakatago ay nagmumukhang "wala na ako sa pila". */
.qb-more {
    font-size: clamp(13px, 2vh, 24px);
    font-weight: 700;
    color: var(--text-muted, #9ca3af);
    padding: .8vh 1.4vw;
    text-align: center;
    letter-spacing: .02em;
}

/* Ang labasan. Tahimik hangga't hindi hinahanap — pero kailangang MAY
   nakikitang paraan pabalik, kung hindi ay parang sirang app ang dating. */
/* Nasa loob siya ng madilim na brand bar, kaya hindi puti -- ang lumang puting
   pill ay nakapatong pa sa orasan at mukhang naligaw. */
.qb-tv-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 1px solid rgba(194, 160, 106, .38);
    border-radius: 999px;
    background: rgba(255, 255, 255, .05);
    color: #C2A06A;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
    white-space: nowrap;
}
.qb-tv-btn:hover {
    background: rgba(194, 160, 106, .16);
    border-color: rgba(194, 160, 106, .7);
}

/* Sa TV mode: isang X sa kanang itaas na TULUYANG HINDI NAKIKITA hangga't
   hindi dinadaanan ng mouse. Hindi dapat mabasa ng kumakain ang salitang
   "Exit" -- wala siyang kinalaman doon, at ang anumang teksto sa gilid ay
   nakakaagaw ng pansin sa numerong dapat niyang basahin.
   Nananatiling MAY LAKI ang target kahit invisible, kaya madaling mahanap ng
   staff. Ang Esc ay palaging gumagana bilang pangalawang labasan. */
.qb-tv .qb-tv-btn--x {
    /* FIXED, hindi absolute: ang .qb-wrap ay may padding laban sa overscan,
       kaya ang absolute ay nakaupo 30px pababa at 45px papasok -- hindi sulok
       iyon. Ang fixed ay nakadikit sa mismong gilid ng screen. */
    position: fixed;
    top: 0;
    right: 0;
    width: 56px;
    height: 56px;
    padding: 0;
    gap: 0;
    justify-content: center;
    border: none;
    border-radius: 0 0 0 14px;
    background: transparent;
    font-size: 22px;
    color: #6b7280;
    opacity: 0;
}
.qb-tv .qb-tv-btn--x:hover,
.qb-tv .qb-tv-btn--x:focus-visible {
    opacity: 1;
    background: rgba(0, 0, 0, .06);
}

/* ANG SPEAKER. Sa labas ng TV mode ay karaniwang pill siya katabi ng TV Mode
   (namamana ang buong .qb-tv-btn sa itaas) -- may teksto pa, dahil doon
   naghahanda ang staff at kailangan niyang mabasa kung ano ang pipindutin.

   Sa loob ng TV mode ay sumusunod siya sa X: nakatago hangga't hindi
   dinadaanan ng mouse. Nasa harap ng kumakain ang screen na ito at wala siyang
   kinalaman sa isang kontrol ng tunog.

   ISANG EKSEPSIYON, at siya ang buong punto: ang NAKAPATAY ay NANANATILING
   NAKIKITA. Ang board na tahimik ay mukhang board na sira -- at kung
   ganap ding invisible ang tanging pindutang makakaayos nito, walang
   makakahanap sa kaniya. Naka-mute man o hindi pa nabubuksan, iisa ang basa
   ng nakatingin: walang maririnig, at ito ang pindutin. */
.qb-tv .qb-tv-btn--sound {
    position: fixed;
    /* IBABA, hindi sa tabi ng X. Ang buong kanang-itaas ay okupado na ng
       orasan at ng petsa sa `.qb-brand__right`, at ang `is-off` ay SADYANG
       nananatiling nakikita -- doon siya ilalagay ay magiging amber na icon
       sa ibabaw mismo ng oras. Walang laman ang ilalim ng screen: doon siya
       hindi nakakasagabal kahit nakikita. */
    bottom: 0;
    right: 0;
    width: 56px;
    height: 56px;
    padding: 0;
    gap: 0;
    justify-content: center;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 20px;
    color: #6b7280;
    opacity: 0;
}
.qb-tv .qb-tv-btn--sound:hover,
.qb-tv .qb-tv-btn--sound:focus-visible {
    opacity: 1;
    background: rgba(0, 0, 0, .06);
}
.qb-tv .qb-tv-btn--sound.is-off {
    opacity: .6;
    color: #b45309;
}
.qb-tv .qb-tv-btn--sound.is-off:hover,
.qb-tv .qb-tv-btn--sound.is-off:focus-visible {
    opacity: 1;
}

/* Sa labas ng TV mode: ginto ang bukas (namamana), amber ang patay. Hindi pula
   -- walang sira, isang switch lang na nakababa. */
.qb-tv-btn--sound.is-off {
    color: #b45309;
    border-color: rgba(180, 83, 9, .45);
}
.qb-tv-btn--sound.is-off:hover {
    background: rgba(180, 83, 9, .14);
    border-color: rgba(180, 83, 9, .7);
}

/* ===========================
   KDS — SANGKAP SA ISANG PINDOT
   Pinipindot ang pangalan sa ticket, lumalabas ang recipe. Iisang landas ang
   KDS, kaya pareho itong nakukuha ng kusinero at ng barista.
   =========================== */

/* Dapat MUKHANG mapipindot. Sa isang board na puno ng teksto, ang pangalang
   walang senyas ay hindi kailanman susubukan — kaya may tuldok na guhit sa
   ilalim, hindi buong underline (nagmumukhang link ang buo, at hindi siya
   link — walang pupuntahang page). */
.ticket-item-name.kdsr-tap {
    cursor: pointer;
    border-bottom: 1px dotted rgba(111, 78, 55, 0.55);
    -webkit-tap-highlight-color: transparent;
}
.ticket-item-name.kdsr-tap:hover { border-bottom-color: var(--primary); }
.ticket-item-name.kdsr-tap:active { opacity: 0.6; }

.kdsr-card {
    background: var(--white);
    border-radius: 16px;
    padding: 22px 22px 24px;
    width: min(520px, 100%);
    position: relative;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.kdsr-x {
    position: absolute;
    top: 12px; right: 12px;
    width: 40px; height: 40px;          /* 40px: daliri ito, hindi mouse */
    border: none; background: var(--surface);
    border-radius: 10px;
    font-size: 22px; line-height: 1;
    color: var(--text-muted); cursor: pointer;
}
.kdsr-x:hover { background: #ececec; color: var(--text-primary); }

.kdsr-title {
    margin: 0 44px 4px 0;
    font-size: 22px; line-height: 1.2;
    color: var(--text-primary);
}

.kdsr-meta {
    margin: 0 0 14px;
    font-size: 13px; font-weight: 700;
    color: var(--primary);
    letter-spacing: .02em;
}

.kdsr-sub { margin: 16px 0 8px; font-size: 14px; color: var(--text-primary); }

.kdsr-note {
    margin: 10px 0 0;
    font-size: 12.5px; line-height: 1.5;
    color: var(--text-muted);
}

.kdsr-desc {
    margin: 12px 0 0; padding: 10px 12px;
    background: var(--surface); border-radius: 10px;
    font-size: 13px; color: var(--text-primary);
}

/* Ang walang laman ay dapat MAGSABI, hindi blangkong kahon. Ito ang unang
   makikita ng barista sa halos bawat inumin — walang recipe ang mga iyon sa
   seed — at kung mukha siyang sira, hindi na nila bubuksan ulit kahit kailan. */
.kdsr-empty {
    margin: 0; padding: 14px 16px;
    background: #fff4e0; border: 1px solid rgba(178, 106, 0, 0.25);
    border-radius: 12px;
    font-size: 14px; font-weight: 600; color: #7a4a00;
    display: flex; align-items: center; gap: 10px;
}

.kdsr-list {
    display: flex; flex-direction: column;
    border: 1px solid var(--border); border-radius: 12px;
    overflow: hidden;
}

/* Malaki ang teksto nang sinasadya: binabasa ito sa dulo ng pass, madalas
   sa isang tablet na nakasabit at hindi hawak. */
.kdsr-row {
    display: flex; align-items: baseline; gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 16px;
}
.kdsr-row:last-child { border-bottom: none; }
.kdsr-row:nth-child(odd) { background: #fcfbfa; }

.kdsr-ing { flex: 1; color: var(--text-primary); }

.kdsr-qty {
    font-weight: 800; color: var(--primary);
    font-variant-numeric: tabular-nums;   /* pumipila ang mga digit */
    white-space: nowrap;
}

.kdsr-per {
    font-size: 12px; color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .kdsr-card { padding: 18px 16px 20px; }
    .kdsr-title { font-size: 19px; }
    .kdsr-row { font-size: 15px; flex-wrap: wrap; }
    .kdsr-per { width: 100%; }
}