/* 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.45s ease;   /* 1.5x (2026-09-26, hiling ng may-ari) */
}

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

/* ---- Quebo Game: ang guhit sa dashboard ----
   ISANG linya lang siya nang sinasadya. Ang widget na wala pang ipinapakitang
   data ay hindi dapat kumuha ng taas mula sa Live Floor Plan; ang mabigat na
   "coming soon" na kahon ang unang tinatanggal ng nagmamadaling tao sa umaga.
   Ang kulay ay TIYAK na kapareho ng card sa telepono ng kumakain
   (`.game-teaser` sa order.html), para iisang bagay ang mabasa ng may-ari at
   ng bumibili -- hindi dalawang magkaibang feature na pareho lang ng pangalan. */
.qg-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #2C231C 0%, var(--dark-bg) 60%, #17120F 100%);
    border: 1px solid #3E3229;
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-sm);
}
.qg-ic {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #D9BC85 0%, #A8834D 100%);
    color: #1A1512;
    font-size: 13px;
}
.qg-name { color: #F3E9D7; font-size: 14px; font-weight: 600; }
.qg-name b { color: var(--secondary); font-weight: 700; }
.qg-badge {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--secondary);
    background: rgba(194, 160, 106, .13);
    border: 1px solid rgba(194, 160, 106, .42);
    border-radius: 999px;
    padding: 3px 9px;
    white-space: nowrap;
}
/* `margin-left:auto` ang nagtutulak ng pahiwatig sa kanan sa malapad na
   screen. Sa makitid ay TINATANGGAL siya nang buo imbes na pabayaang bumaba
   sa pangalawang linya: ang badge na "COMING SOON" ang mensahe, ang pahiwatig
   ay bonus lang -- at ang buong punto ng guhit na ito ay manatiling ISANG
   linya (utos ng may-ari). Sinukat: 56px sa 1440, at 88px sana kung
   hinayaang mag-wrap sa 900. */
.qg-hint { color: #A2917C; font-size: 12.5px; margin-left: auto; }
@media (max-width: 900px) { .qg-hint { display: none; } }
/* Sa 360-390px na screen ay 301px ang nilalaman sa loob ng 298px -- kulang
   ng TATLONG pixel, at bumabagsak sa pangalawang linya ang badge (56px ->
   91px). Ang mas masikip na padding at gap ang nagbabalik sa kanya sa isang
   linya nang hindi hinihipo ang laki ng titik sa malalaking screen. */
@media (max-width: 480px) {
    .qg-strip { padding: 10px 12px; gap: 9px; }
    .qg-name { font-size: 13.5px; }
    .qg-badge { letter-spacing: .08em; padding: 3px 7px; }
}
/* Sa 360px ay 324px pa rin ang kailangan sa loob ng 306px -- LABING-WALONG
   pixel ang kulang, at ang salitang "Leaderboard" (77px) ang kumakain nito.
   Siya ang inaalis, hindi ang laki ng titik: ang paliitin ang lahat ng
   titik nang paunti-unti ay umaabot lang ng 304 laban sa 306 -- lumulusot
   sa isang telepono at bumabagsak sa susunod. Nananatiling tama ang
   "Quebo Game + COMING SOON" kahit walang salitang iyon. */
@media (max-width: 420px) {
    .qg-name b { display: none; }
}

/* 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".
   ⚠️ SA <img> ANG FILTER, HINDI SA LALAGYAN. Ang `filter` sa magulang ay
   tumatama sa lahat ng anak, kaya noong nasa `.menu-item-img` pa siya ay
   kasama sa pagiging kulay-abo ang pulang "Not available" na badge -- ang
   mismong bagay na dapat sumigaw. Ang litrato lang ang kumukupas ngayon. */
.menu-mcard-off .menu-item-img > img,
.menu-mcard-off .menu-mcard-ph {
    opacity: 0.6;
    filter: grayscale(0.7);
}

/* Naka-lock na grip: nasa dulo ng kategorya niya ang nakatagong item, kaya
   walang mahihila. Nananatili siyang nakikita (hindi `display:none`) para
   hindi umuurong ang layout ng card at para may masabi ang tooltip. */
.mcard-drag.is-locked {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: auto;   /* kailangan pa rin ng hover para sa tooltip */
}
.mcard-drag.is-locked:hover { background: inherit; transform: none; }

/* ---- LISTAHAN NG FEEDBACK NG KUMAKAIN ---------------------------------- */
/* Isang card kada feedback. Dati silang magkakadikit sa isang kahon na
   hiwalay lang ng manipis na guhit -- sa sampu ay isang dingding ng teksto
   iyon, at walang alam ang mata kung saan magsisimula. */
.fbl-box {
    background: #f8fafc;
    border: 1px solid #eceff2;
    border-radius: 10px;
    padding: 12px;
    font-size: 13px;
    color: #6b7280;
    /* TAKDANG TAAS. Ang settings pane ay hindi dapat maging isang milyahe
       ang haba dahil lang sa masipag ang mga kumakain. */
    max-height: 420px;
    overflow-y: auto;
}
.fbl-head {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 10px;
}
.fbl-avg {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    background: #fff;
    border: 1px solid #e7e5e4;
    border-radius: 999px;
    padding: 5px 13px;
    font-size: 12.5px;
    color: #1a1a1a;
}
.fbl-avg-n { color: #6F4E37; font-size: 15px; }
.fbl-avg span { color: #9ca3af; font-size: 11.5px; }
.fbl-count { margin-left: auto; color: #9ca3af; font-size: 12px; }

.fbl-item {
    background: #fff;
    border: 1px solid #eceff2;
    border-radius: 9px;
    padding: 9px 11px;
    margin-bottom: 7px;
}
.fbl-item:last-child { margin-bottom: 0; }
.fbl-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.fbl-who { color: #1a1a1a; font-size: 13px; }
.fbl-stars { color: #f59e0b; letter-spacing: 1px; font-size: 13px; }
.fbl-stars-off { color: #e0ddd9; }
.fbl-dlv { color: #9ca3af; font-size: 11.5px; }
.fbl-when { margin-left: auto; color: #9ca3af; font-size: 11.5px; white-space: nowrap; }
.fbl-tags { margin-top: 6px; display: flex; gap: 5px; flex-wrap: wrap; }
.fbl-tag {
    background: #f3f4f6;
    color: #4b5563;
    font-size: 11.5px;
    padding: 2px 9px;
    border-radius: 999px;
}
/* Ang komento ang tunay na laman. Bigyan siya ng hangin at ng gilid para
   makilala siyang sinabi ng tao, hindi metadata. */
.fbl-text {
    margin-top: 7px;
    padding-left: 9px;
    border-left: 3px solid #E7DCC8;
    color: #44403c;
    font-size: 12.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.fbl-more {
    margin-top: 9px;
    text-align: center;
    color: #9ca3af;
    font-size: 11.5px;
}
.fbl-empty {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 16px 4px;
    color: #6b7280;
    font-size: 12.5px;
    line-height: 1.5;
}
.fbl-empty i { font-size: 20px; color: #d6d3d1; flex: none; }

/* ---- SEARCH SA MENU & PRICING ------------------------------------------ */
.mm-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    min-width: 230px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    color: #6b7280;
    cursor: text;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mm-search:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(194, 160, 106, .18);
}
.mm-search i { font-size: 13px; flex: none; }
.mm-search input {
    flex: 1 1 auto;
    min-width: 0;
    width: 170px;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 14px;
    color: inherit;
}
.mm-search input::-webkit-search-cancel-button { cursor: pointer; }
.mm-search-n {
    flex: none;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Ang card na hindi tumugma. `!important` dahil ang card ay may sariling
   display mula sa grid, at ang search ang huling salita. */
.menu-mcard-flip.mm-hide { display: none !important; }
.mm-nomatch {
    padding: 34px 12px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}
.mm-nomatch b { color: inherit; font-weight: 700; }
.mm-nomatch .btn { margin-left: 8px; }
@media (max-width: 640px) {
    .mm-search { min-width: 0; flex: 1 1 100%; }
    .mm-search input { width: 100%; }
}

/* Ang pulang tatak ng nakatagong item. Nakapatong sa litrato para isang
   sulyap lang ang kailangan sa isang grid ng 40 card. */
.menu-mcard-na {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #dc2626;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35);
    white-space: nowrap;
    /* ⚠️ HANGGANAN, HINDI TIWALA SA HABA NG TEKSTO. Ang ⓘ na buton ay nasa
       kanang-itaas ng parehong larawan. Sa 5-hanay na grid (card na 187px)
       ay NAGPAPATONG ng 7px ang badge kapag walang hadlang -- nasukat, hindi
       hinulaan. Ang 56px ay ang buton (26) + ang gilid niya (10) + espasyo. */
    max-width: calc(100% - 56px);
    overflow: hidden;
    text-overflow: ellipsis;
    /* Ang litrato sa ilalim ay pindutan ng pag-upload -- huwag siyang harangan. */
    pointer-events: none;
}

/* Kapag may "BESTSELLER" din, ibaba siya para hindi magpatong sa pula. */
.menu-mcard-na + .menu-item-badge { top: 38px; }
.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; }
/* Discount button sa menu card (2026-10-02): berde = may discount, dilaw = halo. */
.mcard-eye.is-disc-on { background: #E7F6EC; color: #166534; border-color: #C9EAD5; }
.mcard-eye.is-disc-on:hover { background: #E7F6EC; }
.mcard-eye.is-disc-mixed { background: #FFF7E0; color: #92400E; border-color: #FDE68A; }
.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;
}

/* ===========================
   PAYMENT ROW (POS) — 2026-08-31
   ===========================
   Dating: label + dalawang magkaibang-hugis na segment sa isang flex row na
   nagwawrap sa makitid na order panel — ang Unpaid/Paid ay bumabagsak sa
   pangalawang linya at mukhang sira. Ngayon: ang "Payment" ay maliit na
   header line (buong lapad), at ang dalawang segment ay pantay na kalahati
   ng isang hilera — hindi na nagwawrap dahil hinahati nila ang espasyo, at
   kapareho na ng hugis ng Dine-In/Takeout selector sa itaas. WALANG
   binagong markup o id — ang JS (`setOrderPaid`, `_orderPayRender`) ay
   parehong mga id pa rin ang hinahanap. */
.order-pay-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-bottom: 8px;
}

.order-pay-label {
    flex: 0 0 100%;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--text-light);
}

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

.pay-segment {
    flex: 1 1 0;
    min-width: 130px;          /* sobrang kitid = maayos na pag-stack, hindi pagsisiksik */
    display: flex;
    background: var(--light-bg);
    border-radius: 8px;
    padding: 3px;
    gap: 3px;
}

.pay-seg-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: none;
    background: transparent;
    padding: 7px 6px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s ease, color 0.2s ease;
}

/* (Tinanggal ang Unpaid/Paid na toggle 2026-09-12 -- bawat order ay bayad
   bago ilagay. Ang Cash/Online na lang ang segment, buong lapad na siya
   dahil flex:1 ang .pay-segment.) */
.pay-seg-btn#payCashBtn.active,
.pay-seg-btn#payOnlineBtn.active { background: #6F4E37; color: #fff; }
.pay-seg-btn i { font-size: 12px; }
#orderQrphBox { margin-top: 8px; margin-bottom: 10px; }
.qrph-ok { margin: 0; color: #15803d; font-weight: 700; font-size: 13px; }
/* (tinanggal ang dobleng .order-pay-row override — nasa pangunahing block na, 2026-08-31) */
.pay-method-seg { margin-right: auto; }
.pay-seg-btn#payCashBtn.active,
.pay-seg-btn#payOnlineBtn.active { background: #6F4E37; color: #fff; }
.pay-seg-btn i { margin-right: 4px; }
#orderQrphBox { margin-top: 8px; margin-bottom: 10px; }
.qrph-ok { margin: 0; color: #15803d; font-weight: 700; font-size: 13px; }
/* (tinanggal ang dobleng .order-pay-row override — nasa pangunahing block na, 2026-08-31) */
.pay-method-seg { margin-right: auto; }
.pay-seg-btn#payCashBtn.active,
.pay-seg-btn#payOnlineBtn.active { background: #6F4E37; color: #fff; }
.pay-seg-btn i { margin-right: 4px; }
#orderQrphBox { margin-top: 8px; margin-bottom: 10px; }
.qrph-ok { margin: 0; color: #15803d; font-weight: 700; font-size: 13px; }
/* (tinanggal ang dobleng .order-pay-row override — nasa pangunahing block na, 2026-08-31) */
.pay-method-seg { margin-right: auto; }
.pay-seg-btn#payCashBtn.active,
.pay-seg-btn#payOnlineBtn.active { background: #6F4E37; color: #fff; }
.pay-seg-btn i { margin-right: 4px; }
#orderQrphBox { margin-top: 8px; margin-bottom: 10px; }
.qrph-ok { margin: 0; color: #15803d; font-weight: 700; font-size: 13px; }

.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);
}
/* Mga bawas: berde para agad makita; ang kabuuan ay may guhit sa itaas. */
.summary-row.summary-deduct { color: #15803d; }
.summary-row.summary-deduct.deduct-total { font-weight: 700; border-top: 1px dashed #bbf7d0; padding-top: 6px; }
.summary-row.to-pay { font-weight: 800; color: #0f766e; }

/* ---- Confirm this order (bago ang Place Order) ---- */
.poc-sec { padding: 10px 0; border-bottom: 1px solid #eceff2; }
.poc-sec:last-of-type { border-bottom: 0; }
.poc-h { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #6b7280; margin-bottom: 6px; }
.poc-row, .poc-item { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 3px 0; }
.poc-item span:first-child { color: #374151; }
.poc-row.poc-ded { color: #15803d; }
.poc-row.poc-ded-total { font-weight: 700; border-top: 1px dashed #bbf7d0; margin-top: 4px; padding-top: 6px; }
.poc-row.poc-total { font-size: 17px; font-weight: 800; color: var(--primary); border-top: 2px solid #e5e7eb; margin-top: 6px; padding-top: 8px; }
.poc-row.poc-pay { font-weight: 700; color: #0f766e; }
.poc-muted { color: #9ca3af; font-size: 12.5px; }
.poc-chip { display: inline-block; background: #FAF7F2; border: 1px solid #D8BE8E; border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-weight: 700; color: #6F4E37; margin: 0 6px 6px 0; }

/* 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;
    /* SINIKSIK (2026-09-06, hiling ng may-ari): bawat patay na pixel sa tiket
       ay pinahahaba ang lane at pinahihirap ang pag-scroll sa rush. Ang mga
       bawas dito at sa mga kasunod na block (.ticket-items/.ticket-line/
       .ticket-mods/.ticket-meta/.kitchen-lane/.ticket-notes/
       .ticket-otherstation) ay iisang pagpapasya. */
    padding: 12px 14px;
    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; }
/* MAGKAIBANG KULAY BAWAT ORDER TYPE (2026-08-24) — dapat makita AGAD sa
   board kung saan pupunta ang pagkain, hindi binabasa. HINDI asul ang
   dine-in: ASUL na ang READY status badge (tingnan ang :18585) at
   magkakamukha sana ang "ready" at "dine-in" sa isang sulyap. */
.ticket-type--dinein   { background: #DCFCE7; color: #15803D; }
.ticket-type--takeout  { background: #FFEDD5; color: #C2410C; }
.ticket-type--delivery { background: #EDE9FE; color: #6D28D9; }
.ticket-type--dinein i,
.ticket-type--takeout i,
.ticket-type--delivery i { color: inherit; opacity: .8; }

.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: 6px;
    margin-bottom: 8px;
}
.ticket-line {
    padding: 5px 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: 46px;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 700;
}
.ticket-actions .ticket-btn i { font-size: 15px; }
/* ANG "My part is done" / "Ready" (btn-info) — ITO ANG PINAKAMADALAS PINDUTIN
   ng barista, pero WALANG global na `.btn-info` sa buong stylesheet (nasa
   `.row-menu-pop` lang siya). Kaya bumabagsak siya sa DEFAULT na kulay-abo ng
   browser at mukhang disabled — ang pinakaimportanteng pindot, mukhang pinaka-
   hamak. Binibigyan natin siya ng tiwala-sa-sariling teal, KATABI ng orange na
   "Start" at ng kayumangging "Served" — tatlong yugto, tatlong malinaw na kulay:
   orange (simula) → teal (handa/tapos ang parte) → kayumanggi (naiabot na). */
.ticket-actions .ticket-btn.btn-info {
    background: #0E7490;
    color: #FFF;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.ticket-actions .ticket-btn.btn-info i { color: #FFF; opacity: .95; }
.ticket-actions .ticket-btn.btn-info:hover:not(:disabled) {
    background: #155E75;
    box-shadow: 0 6px 18px rgba(14, 116, 144, 0.34);
}

/* 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; }
/* Timed in with no shift on the roster — neutral slate on purpose: it is a
   record, not a warning. Amber here would read as "late" all over again. */
.clock-nosched { background: #eef2f7; color: #475569; }
.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;
}

/* ── BADGE NG TAB: ilan ang naghihintay ──────────────────────────────────
   Ang `.hub-tab` ay `display:flex` na may `gap:8px`, kaya ang badge ay
   flex child -- hindi na kailangan ng margin, hinahawakan na siya ng gap.
   Nakatago siya hangga't walang laman: ang "0" ay ingay, hindi impormasyon. */
.hub-tab-badge { display: none; }

.hub-tab-badge.on {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
    background: #e2e8f0;
    color: #334155;
}

/* Sa BUKAS na tab ay kabaligtaran ang lupa (kayumanggi, puting titik), kaya
   kailangan niya ng sariling kulay -- kung hindi, mawawala ang badge sa
   mismong tab na tinitingnan mo. */
.hub-tab.active .hub-tab-badge.on {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}

/* 15 minuto. Kaparehong hangganan ng ticket sa kusina
   (`_kitchenElapsedClass`) -- sinasadya, para pareho ang sinasabi ng badge
   at ng board na bubuksan mo. */
.hub-tab-badge.on.warning { background: #fef3c7; color: #92400e; }
.hub-tab.active .hub-tab-badge.on.warning { background: #F59E0B; color: #fff; }

/* 25 minuto. Kumukurap na siya rito -- ang pula na hindi gumagalaw ay
   nagiging bahagi ng disenyo pagkalipas ng ilang oras ng shift. */
.hub-tab-badge.on.danger {
    background: #EF4444;
    color: #fff;
    animation: opsBadgePulse 1.6s ease-in-out infinite;
}
.hub-tab.active .hub-tab-badge.on.danger { background: #fff; color: #b91c1c; }

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

/* Ang gumagalaw na kulay ay hindi naaabot ng lahat. Ipagpalagay na hindi
   nakikita ang pagkurap at panatilihing nababasa ang bilang. */
@media (prefers-reduced-motion: reduce) {
    .hub-tab-badge.on.danger { animation: none; }
}

/* 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: 6px 10px;
    margin-top: 6px;
    border-radius: 4px;
    font-size: 12px;
    color: #b45309;
    font-weight: 500;
}

.ticket-notes i {
    color: #ffc107;
    margin-right: 6px;
}

/* ANG "PAID" NA HILERA (2026-09-11). Magandang balita, hindi babala — berde,
   may check, hiwalay sa amber na notes. Kapareho ng anatomy ng .ticket-notes
   para pareho silang dumapo sa ilalim ng tiket. */
.ticket-paid {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #F0FDF4;
    border-left: 4px solid #22C55E;
    padding: 6px 10px;
    margin-top: 6px;
    border-radius: 4px;
    font-size: 12px;
    color: #15803D;
    font-weight: 800;
    letter-spacing: .03em;
}
.ticket-paid i { color: #16A34A; font-size: 13px; }

/* ---- CATEGORY MANAGER: iisang builder, dalawang host (2026-09-11) ---- */
.catmgr-add { display: flex; gap: 8px; margin-bottom: 10px; max-width: 560px; }
.catmgr-hint { color: #6b7280; font-size: 12.5px; margin: 0 0 8px; max-width: 78ch; line-height: 1.5; }
.catmgr-hint b { color: #374151; }
.catmgr-hint i { font-size: 11px; }
.catmgr-list { border: 1px solid #E7E2DA; border-radius: 12px; background: #fff; overflow: hidden; margin-top: 4px; }
.catmgr-row {
    display: flex; align-items: center; gap: 10px; padding: 9px 12px;
    border-top: 1px solid #F1EDE6; background: #fff; flex-wrap: wrap;
}
.catmgr-row:first-child { border-top: 0; }
.catmgr-grip {
    color: #C4BBAE; cursor: grab; padding: 4px 3px; flex: none;
    touch-action: none; user-select: none;
}
.catmgr-grip:active { cursor: grabbing; }
.catmgr-num {
    width: 24px; height: 24px; border-radius: 50%; background: #F4EEE7; color: #6F4E37;
    font-size: 11.5px; font-weight: 800; display: inline-flex; align-items: center;
    justify-content: center; flex: none; font-variant-numeric: tabular-nums;
}
.catmgr-name { flex: 1; min-width: 110px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catmgr-count { color: #9ca3af; font-size: 12px; flex: none; white-space: nowrap; }
.catmgr-arrows { display: inline-flex; gap: 4px; flex: none; }
.catmgr-sel { width: auto; min-width: 96px; padding: 6px 8px; font-size: 12.5px; }
.catmgr-row--drag { opacity: .45; }
.catmgr-row--over { box-shadow: inset 0 3px 0 #6F4E37; }
.catmgr-row--overend { box-shadow: inset 0 -3px 0 #6F4E37; }

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

/* ---- ADD-ON NA MAY DAMI (hal. Extra Rice x2) ------------------------- */
/* Ang hilerang may stepper ay WALANG onclick -- ang stepper lang ang
   nagbabago ng bilang. Kaya hindi rin siya dapat magmukhang mapipindot:
   ang cursor na kamay sa isang bagay na walang ginagawa ay isang pangako
   na hindi tinutupad. */
.modifier-option.mod-has-qty { cursor: default; }
.modifier-option.mod-has-qty:hover {
    border-color: var(--border);
    background: var(--surface);
}
/* May laman -> parehong hitsura ng `selected`, para iisa ang wika ng modal. */
.modifier-option.mod-has-qty.has-some {
    border-color: var(--primary);
    background: var(--primary-light);
}
.mod-qty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    flex: none;
}
.mod-qty button {
    width: 30px;
    height: 30px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, border-color .15s ease;
}
.mod-qty button:hover  { border-color: var(--primary); background: var(--primary-light); }
.mod-qty button:active { transform: scale(0.94); }
.mod-qty-n {
    min-width: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-size: 15px;
}

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

/* ANG LAKI NG TASA sa tiket ng KDS — at kung anu-ano pang opsyon ang pinili
   sa linyang iyon (gatas, syrup, sukat ng yelo).
   Ang rule na ito ay NAKASULAT NA RITO MULA PA SA UNANG COMMIT pero WALANG
   KAHIT ISANG LINYA NG JS ANG NAGLALABAS NIYA -- patay na CSS sa isang banda,
   at sa kabila ay isang barista na hindi makita kung 16 oz ba o 32 oz ang
   hawak niya. Ngayon lang siya nailabas ng `renderKitchenTicket`.

   HINDI SIYA AMBER, kahit amber siya dati. `#fef3c7` + `#ffc107` ang
   `.ticket-notes` sa itaas, at doon nakaupo ang "BAYAD NA (NextPay)".
   Dalawang magkaparehong dilaw na kahon sa iisang tiket at ang laki ay
   babasahing pangalawang paalala — hindi bilang parte ng iniinom. Kayumanggi
   siya: kasama siya ng pangalan sa itaas niya, hindi ng babala.

   38px na indent, hindi 28: kapareho ng `.ticket-breakdown`, kaya nakahanay
   siya sa ILALIM NG PANGALAN at hindi sa ilalim ng bilang. (30px na
   `.ticket-qty` + 8px na gap.) */
/* Hiwalay nang chip kada modifier. Ang lalagyan ang may kaliwang margin
   ngayon -- kung nasa chip pa rin siya, ang bawat isa ay may sariling 38px
   at magkakalayo sila. */
.ticket-mods {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 3px 0 0 32px;
}
.ticket-item-modifiers {
    display: inline-block;
    padding: 2px 10px;
    background: #F3E9D7;
    color: #6F4E37;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.55;
}

/* ---- ANG ANTAS NG TAMIS ------------------------------------------------
   Apat na magkakasunod na latte na pare-parehong beige ay kailangang basahin
   nang isa-isa. Ang kulay ang nagpapabilis niyan sa isang sulyap.

   ASUL / ABO / AMBER ang pinili at HINDI pula-berde: ligtas siya sa
   pinakakaraniwang color blindness (deuteranopia at protanopia), at
   magkakaiba pa rin sila sa malayo -- TV ang kadalasang kinalalagyan ng
   tiket na ito.

   Ang `normal` ay ABO nang sinasadya: siya ang karaniwan, kaya hindi siya
   dapat sumigaw. Ang DALAWANG pagbubukod ang dapat tumawag ng pansin. */
.ticket-item-modifiers.tm-less {
    background: #DBEAFE;
    color: #1E40AF;
}
.ticket-item-modifiers.tm-normal {
    background: #E9E9EC;
    color: #52525B;
}
.ticket-item-modifiers.tm-sweet {
    background: #FDE68A;
    color: #92400E;
}

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

/* Compact supplier TABLE (replaces the space-heavy card grid) */
.suppliers-table td { vertical-align: middle; }
.suppliers-table tr.inactive td { opacity: 0.55; }
.suppliers-table .cust-name { margin-bottom: 4px; }
.suppliers-table .supplier-rating { justify-content: flex-start; }
.sup-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 280px;
}
.sup-tag {
    background: #dbeafe;
    color: #573C2A;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}
.sup-tag.more {
    background: #f1f1f1;
    color: var(--text-secondary);
}

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

/* ⚠️ VESTIGIAL ANG NEGATIBONG MARGIN SA ITAAS — 2026-08-29.
   Ang `margin: 0 -20px -20px` ay para sa footer na nasa LOOB ng
   `.modal-body`: kinakansela niya ang 20px padding nito para maabot ng
   footer ang gilid. Pero wala nang ganoong hugis sa app — sa 21 na
   `.modal-footer` sa `app.js`, LAHAT ay KAPATID ng `.modal-body`, walang
   isa mang anak.

   Sa hugis na iyon ay baligtad ang epekto: hinihila ng negatibong margin
   ang footer nang 20px LAMPAS sa modal (540px na footer sa 500px na
   modal), kaya EKSAKTONG 0 ang gap ng buton sa kanang gilid at sa ibaba.
   Dikit na dikit sa border — nakita sa "Confirm withdrawal", totoo sa
   lahat ng 21.

   Hindi binura ang rule sa itaas: baka may markup pa sa labas ng `.modal`
   na umaasa sa kaniya. Ang child combinator lang ang pinapayagan dito. */
.modal > .modal-footer {
    margin: 0;
}

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

/* DESIGNATION — ang tunay na trabaho ng tao, at puwedeng higit sa isa.
   Sadyang mas matingkad siya kaysa sa `.role-badge` na katabi niya: ang
   role ay label na lang at hindi nagbibigay ng access, kaya hindi siya
   dapat ang unang nakikita sa hilera. */
.desig-chip {
    display: inline-block;
    padding: 4px 10px;
    margin: 2px 4px 2px 0;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 700;
    background: #efe3d6;
    color: #573C2A;
    white-space: nowrap;
}

.desig-none {
    color: var(--text-muted);
    font-size: 12px;
}

.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;
}
/* Ang numerong isinisigaw sa counter. Mas malaki at may kulay ng brand kaysa
   sa panloob na `#id` sa tabi niya — iyon ang hinahanap ng mata kapag may
   lumapit na "QUE-003 po". `tabular-nums` para pumila ang mga digit sa hanay. */
.recent-order-row .ro-q {
    font-weight: 800;
    font-size: 14px;
    color: var(--primary);
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
}
/* Ang panloob na id — hindi tinanggal (siya ang nasa resibo at audit trail),
   pero hindi na siya nakikipag-agawan ng pansin. */
.recent-order-row .ro-idsub {
    font-size: 10.5px;
    color: #8a8a8a;
    font-variant-numeric: tabular-nums;
}
.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;
}

/* ---- ANG BILANG SA DULO (2026-09-12) ----
   Kapag paulit-ulit ang PAREHONG mensahe, isang hilera pa rin siya at ang
   pill na ito ang nagsasabi kung ilan. Tingnan ang `showToast` sa app.js at
   ang `_deliverForeign` sa cloud-sync.js — doon inayos ang ugat. */
.toast-msg { flex: 1; min-width: 0; }
.toast-x {
    flex: none;
    margin-left: auto;
    font-weight: 800;
    font-size: 12.5px;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .16);
    font-variant-numeric: tabular-nums;
}
.toast-info .toast-x { background: #dbeafe; color: #1d4ed8; }

/* ---- THANK YOU (2026-10-08, hiling ng may-ari) ----
   Isang hilera lang sa dashboard, kasunod ng summary cards. Hindi siya
   kumakain ng espasyo — kaparehong pilosopiya ng `.qg-strip` sa ilalim niya. */
.thanks-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 18px;
}
.thanks-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    border: none;
    border-radius: 12px;
    background: var(--primary, #6F4E37);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .14s ease, background .18s ease, opacity .18s ease;
}
.thanks-btn i { font-size: 15px; }
.thanks-btn:hover:not(:disabled) { background: #5a3f2c; }
.thanks-btn:active:not(:disabled) { transform: scale(.97); }
/* Habang nagsasalita: malinaw na may nangyari, at hindi na mapipindot ulit. */
.thanks-btn.is-speaking { background: #16a34a; opacity: .92; cursor: default; }
.thanks-btn:disabled { cursor: default; }
.thanks-hint { font-size: 12px; color: var(--text-light, #6b7280); }

/* ---- SA ULO NG BAR DISPLAY (2026-10-09) ----
   Inilipat mula sa dashboard, hiling ng may-ari: katabi mismo ng pamagat.
   Walang margin sa ilalim -- nasa loob na siya ng `.module-header`. */
.kds-head-title { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.thanks-strip--bar { margin: 0; gap: 10px; }
.thanks-strip--bar .thanks-btn { padding: 9px 16px; font-size: 14px; }

/* ---- ANG MALIIT NA BERSYON SA HEADER NG CART (2026-10-08) ----
   Kapatid ng Staff at ng Clear All sa sukat, pero may sariling kulay: hindi
   siya pang-admin na aksyon kundi ang mabait na pindutan. */
.thanks-mini {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #CDEBD6;
    background: #EFFAF3;
    color: #15803d;
    font-weight: 700;
}
.thanks-mini i { font-size: 12.5px; }
.thanks-mini:hover:not(:disabled) { background: #DCF5E6; border-color: #A7DDBA; }
.thanks-mini.is-speaking { background: #16a34a; border-color: #16a34a; color: #fff; }
.thanks-mini:disabled { cursor: default; }
/* ⚠️ IKON LANG, SA LAHAT NG LAPAD — AT HINDI ITO PAGPAPAGANDA.
   Ang unang bersyon ay may "Thanks" na teksto, at sa 1366x810 ay NAG-WRAP ang
   tatlong pindutan sa dalawang linya: tumaas ang header, at ang overflow ng
   kanang kolum ay 25px -> 51px. Ibinabalik niyan ang mismong scroll na
   inalis natin noong 2026-09-14 nang tanggalin ang talata ng QRPh.
   Ang kulay (berde, kakaiba sa dalawang kulay-abo) at ang ikon ang
   nagpapakilala sa kanya; ang `title` ang nagdadala ng buong pangungusap; at
   ang BERDENG estado habang nagsasalita ang sagot sa mata — hindi na
   kailangan ang teksto para malaman mong tumama ang pindot.
   Ang buong label ay nasa dashboard pa rin, kung saan maluwag. */
.thanks-mini-txt { display: none; }

/* Bawat pindutan ng boses ay sariling kahon sa Settings: ang pangalan at ang
   sinasabi ay dapat magkadikit sa mata, kung hindi ay mawawala kung alin ang
   sa alin kapag apat na sila. */
/* Ang lalagyanan ay hindi dapat maging dagdag na puwang sa pagitan ng mga
   pindutan: `display: contents` kaya ang mga anak mismo ang kaagapay ng Staff
   at ng Clear All sa flex row ng header. */
.pos-voice-btns { display: contents; }

/* Slider ng lakas. Hindi siya `form-control`: ang padding at border niyon ay
   nagpapalaki sa track at nagpapalihis sa thumb sa Chrome. */
.form-range {
    width: 100%;
    height: 26px;
    accent-color: var(--primary, #6F4E37);
    cursor: pointer;
}

/* ---- ANG LISTAHAN NG MGA PINDUTAN NG BOSES (2026-10-08) ----
   Hiling ng may-ari na linisin: apat na talata ng paliwanag kada pindutan at
   apat na pindutan ang pinapayagan -- tinatakpan na ng tulong ang kontrol.
   Isang siksik na hilera na lang kada isa; ang paliwanag ay nasa placeholder
   at sa hover (`title`), hindi sa ilalim ng bawat kahon. */
/* Senyas ng voucher sa listahan ng Orders. Nasa TABI NG TOTAL siya at
   hindi sa tabi ng pangalan: tanong ito tungkol sa pera -- "bakit ganito ang
   halaga" -- at ang sagot ay dapat nasa tabi ng halagang tinatanong. */
.ord-voucher {
    display: inline-block;
    margin-top: 3px;
    padding: 1px 7px;
    border-radius: 999px;
    background: #e9f6ef;
    border: 1px solid #bfe3cf;
    color: #1B7A43;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.vb-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}
.vb-item {
    background: var(--card, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    padding: 12px;
}
.vb-item__top {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}
/* Tanda lang, hindi na kontrol: ang puwesto ang nagtatakda ng ikon. Tingnan
   ang VB_POS_ICONS sa app.js kung bakit tinanggal ang pamimili. */
.vb-item__badge {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #EFFAF3;
    border: 1px solid #CDEBD6;
    color: #15803d;
    font-size: 15px;
}
.vb-item__name { flex: 1 1 auto; min-width: 0; }
.vb-item__act {
    flex: 0 0 auto;
    width: 40px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.vb-item__says { resize: vertical; }
.vb-add { align-self: flex-start; }

/* Tatlo sa isang hilera: magkakapatid silang lahat ng tunog, at ang
   magkakalayong kahon ay nagmumukhang tatlong magkaibang bagay. */
.vb-tune {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 10px;
}
.vb-tune label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 13px;
}
.vb-now { margin: 0; }

@media (max-width: 720px) {
    .vb-tune { grid-template-columns: 1fr; }
}

/* ---- ANG PAALALANG NGUMITI (2026-10-08) ----
   Tingnan ang `_thanksSmile()` sa app.js kung bakit kard at hindi modal.
   Ang `pointer-events: none` ay HINDI pampaganda: nakapatong siya sa gitna-
   itaas ng POS, at kung humaharang siya ng pindot ay hinahadlangan niya ang
   mismong cart na pinagdadaanan ng bayad. */
.thanks-smile {
    position: fixed;
    top: 96px;
    left: 50%;
    transform: translate(-50%, -10px);
    z-index: 4000;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 28px;
    border-radius: 16px;
    background: #16a34a;
    color: #fff;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .22);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .3px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}
.thanks-smile.is-on { opacity: 1; transform: translate(-50%, 0); }
.thanks-smile__face { font-size: 30px; line-height: 1; }
@media (max-width: 560px) {
    .thanks-smile { top: 72px; padding: 13px 20px; font-size: 16px; gap: 10px; }
    .thanks-smile__face { font-size: 25px; }
}
.thanks-mini { padding-left: 10px; padding-right: 10px; }
/* Huling bakod lang ang `wrap`: kung sakaling sumikip pa rin, mas mabuting
   bumaba kaysa umapaw palabas ng kolum. Sa normal ay isang linya sila. */
.order-header-actions { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 560px) {
    .thanks-hint { display: none; }          /* ang pindutan ang laman, hindi ang tala */
    .thanks-btn { width: 100%; justify-content: center; }
}

/* ---- ANG TAHIMIK NA TANDA NG SYNC (2026-09-12) ----
   Kapalit ng toast na "Updated from another gadget". Nasa top bar siya,
   katabi ng babala, at HINDI tumatakip ng kahit ano. Tingnan ang
   `renderSyncFresh` sa app.js. */
/* ⚠️ TEKSTO, HINDI PILL (2026-09-12). Reklamo ng may-ari: "grabe sa
   space." Pill siya dati — gilid, likod, at 12px na padding sa magkabila —
   at dahil ang multo sa ibaba ay sumusukat sa PINAKAMAHABANG label, laging
   malapad siya kahit tahimik lang ang sinasabi.
   Ngayon: teksto na lang katabi ng oras sa header, at ganoon din naman ang
   hitsura ng oras. Wala nang hugis-pindutan — tugma iyon sa `span` na
   ginawa sa index.html: BASAHIN siya, hindi pindutin. */
.sync-fresh {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #8A9099;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    white-space: nowrap;
    transition: color .2s ease;
}
.sync-fresh i { font-size: 12px; opacity: .75; }

/* ⚠️ WALANG PAGTALON NG HEADER.
   Mas mahaba ang "Updated from another gadget" kaysa sa "Synced 3m ago", kaya
   tuwing may dumarating ay nauurong ng ~90px ang branch chip at ang oras —
   paulit-ulit, sa buong serbisyo.
   Ang `::before` ay isang MULTO: may laman siyang pinakamahabang label pero
   `visibility: hidden`. Nasa IISANG grid cell sila ng totoong teksto, kaya ang
   MULTO ang sumusukat sa hanay at pareho ang lapad ng chip sa dalawang estado.
   Walang hardcoded na pixel: kahit anong font ng gadget ay tama pa rin.
   🔴 Kung papalitan ang teksto sa `renderSyncFresh` (app.js), PALITAN DIN
      ang `content` sa ibaba — magkatabi silang dapat, kung hindi ay babalik
      ang pagtalon o mapuputol ang mas mahabang label. */
.sync-fresh .sf-text { display: grid; }
.sync-fresh .sf-text::before {
    /* Ang MAS MAHABA sa dalawang label ng `renderSyncFresh` (app.js).
       Pinaikli siya noong 2026-09-12 mula sa "Updated from another gadget":
       iyon ang dahilan kung bakit laging malapad ang tanda. */
    content: "Updated just now";
    grid-area: 1 / 1;
    visibility: hidden;
    white-space: nowrap;
    height: 0;
}
.sync-fresh .sf-now {
    grid-area: 1 / 1;
    justify-self: start;
    align-self: center;
    white-space: nowrap;
}

/* MAY BAGO. Asul, hindi berde: ang berde sa buong app ay "tapos na/OK", at
   ito ay HINDI tagumpay kundi BALITA — may dumating na galing sa iba. Anim
   na segundo lang siya, saka bumabalik sa abo. */
.sync-fresh-new {
    color: #1D4ED8;
    animation: syncFreshPop .45s ease;
}
.sync-fresh-new i { opacity: 1; }

@keyframes syncFreshPop {
    0%   { transform: scale(.94); opacity: .5; }
    60%  { transform: scale(1.03); }
    100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .sync-fresh-new { animation: none; }
}

/* Masikip ang top bar sa telepono. Ang KULAY at ang ikon ang nananatili —
   sila ang nakikita sa sulok ng mata; ang buong pangungusap ay nasa `title`
   at sa `sr-only` na live region pa rin. */
@media (max-width: 820px) {
    .sync-fresh { gap: 0; }
    /* Pati ang multo — `display: none` ang buong hanay, kaya walang naiiwang
       lapad na wala namang teksto. */
    .sync-fresh .sf-text { display: none; }
}


/* 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;
    /* Nasa ILALIM na ng kitchen board (2026-08-25) — puwang sa itaas, hindi
       sa ibaba. */
    margin: 18px 0 0;
}
.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. */
/* "N left" sa litrato ng menu card (2026-09-25). Kanang-ibaba: ang ibang
   sulok ay may drag grip (kaliwa-ibaba), ℹ (kanan-itaas) at tatak (kaliwa-
   itaas). Kapareho ng taas ng drag grip para magkapantay sila. */
.mcard-left {
    position: absolute;
    right: 8px; bottom: 8px;
    z-index: 3;
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 11px 0 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: #292524;
    font-size: 12px; font-weight: 600; letter-spacing: .1px;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: transform .15s ease, box-shadow .15s ease;
}
.mcard-left b { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mcard-left-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .18);
    flex: 0 0 8px;
}
.mcard-left--low { background: #F59E0B; color: #fff; }
.mcard-left--low .mcard-left-dot { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); }
.mcard-left--out { background: #dc2626; color: #fff; font-weight: 800; text-transform: uppercase; font-size: 10.5px; letter-spacing: .5px; }
.mcard-left--out .mcard-left-dot { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); }
.mcard-left.is-click { cursor: pointer; }
.mcard-left.is-click:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, .24); }
.mcard-left.is-click:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.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; }

/* Ang switch na "ipakita ang hindi available sa QR menu". Nakaupo siya sa
   ibabaw ng grid ng Menu & Stock, kasama ng reorder hint, dahil doon din
   nagpipindot ng mata ang may-ari. */
.menu-showout-row {
    display: flex; align-items: flex-start; gap: 10px;
    margin: 0 0 10px; padding: 10px 14px;
    background: var(--white); border: 1px solid var(--border);
    border-radius: 10px; font-size: 13px; color: #57534e;
    cursor: pointer;
}
.menu-showout-row input { margin-top: 2px; flex: 0 0 auto; }
.menu-showout-row b { color: var(--text); }

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

/* ===== HIDE TOOLS: Hide multiple + Hide history (2026-09-18) ===== */
.menu-hide-tools { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }

/* Sticky action bar habang pumipili ng maraming itatago */
.menu-hide-actionbar {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin: 0 0 14px; padding: 11px 14px;
    background: #6F4E37; color: #fff; border-radius: 12px;
    box-shadow: 0 6px 18px rgba(111, 78, 55, .28);
}
.menu-hide-actionbar .mhs-left { font-size: 13px; }
.menu-hide-actionbar .mhs-left b { font-size: 15px; }
.menu-hide-actionbar .mhs-right { display: flex; gap: 8px; }
.menu-hide-actionbar .btn-secondary { background: #fff; color: #6F4E37; border: none; }
.menu-hide-actionbar .btn-primary { background: #3f2d20; color: #fff; border: none; }
.menu-hide-actionbar .btn[disabled] { opacity: .5; cursor: not-allowed; }
/* Unhide mode = pagbabalik: berde para malinaw na iba siya sa pagtatago */
.menu-hide-actionbar.is-unhide { background: #2f6b4f; box-shadow: 0 6px 18px rgba(47, 107, 79, .28); }
.menu-hide-actionbar.is-unhide .btn-secondary { color: #2f6b4f; }
.menu-hide-actionbar.is-unhide .btn-primary { background: #1f4a37; }

/* Select overlay sa bawat card habang nasa Hide-multiple mode */
body.menu-hide-selecting .menu-mcard-flip { position: relative; }
/* Ang overlay na ang may hawak ng tap — patayin ang grip/flip sa ilalim */
body.menu-hide-selecting .mcard-drag,
body.menu-hide-selecting .mcard-flip-btn { pointer-events: none; }
.mcard-select {
    position: absolute; inset: 0; z-index: 45;
    display: block; padding: 0; margin: 0;
    border: none; background: transparent; cursor: pointer;
    border-radius: 16px;
    transition: background .12s ease, box-shadow .12s ease;
}
.mcard-select .mcard-select-box {
    position: absolute; top: 12px; left: 12px;
    width: 30px; height: 30px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 2px solid #cbb89b; color: transparent;
    font-size: 15px; box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.mcard-select.is-picked { background: rgba(111, 78, 55, .18); box-shadow: inset 0 0 0 3px #6F4E37; }
.mcard-select.is-picked .mcard-select-box { background: #6F4E37; border-color: #6F4E37; color: #fff; }
.mcard-select.is-disabled { cursor: not-allowed; background: rgba(120, 120, 120, .30); }
.mcard-select-tag {
    position: absolute; top: 12px; left: 12px;
    background: rgba(0, 0, 0, .62); color: #fff;
    font-size: 10.5px; font-weight: 700; letter-spacing: .3px;
    padding: 3px 8px; border-radius: 999px; text-transform: uppercase;
}

/* Reason box chips */
.hr-items { display: flex; flex-wrap: wrap; gap: 6px; }
.hr-item-chip { background: #f3f4f6; color: #374151; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.hr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hr-chip {
    background: #f8f5f0; color: #6F4E37; border: 1px solid #e7dccb;
    font-size: 12.5px; font-weight: 600; padding: 7px 12px;
    border-radius: 999px; cursor: pointer; transition: background .12s ease, color .12s ease;
}
.hr-chip:hover { background: #f1e9dc; }
.hr-chip.is-on { background: #6F4E37; color: #fff; border-color: #6F4E37; }

/* Hide history list */
.hh-row { padding: 11px 8px; border-bottom: 1px solid #f0eee9; }
.hh-row:last-child { border-bottom: none; }
.hh-item { font-size: 14px; font-weight: 700; color: #2b2b2b; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hh-batch { background: #f3e9d7; color: #6F4E37; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .3px; }
.hh-reason { margin: 3px 0; font-size: 13px; color: #6F4E37; }
.hh-reason i { opacity: .5; margin-right: 4px; font-size: 10px; }
.hh-meta { font-size: 11.5px; color: #9ca3af; }
.hh-empty { text-align: center; padding: 34px 16px; color: #9ca3af; }
.hh-empty i { font-size: 30px; opacity: .5; }
.hh-empty p { margin: 10px 0 0; font-size: 13.5px; }

/* 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 (Menu & Stock): filter lang, hindi na hinihila ----
   (2026-09-11) Tinanggal ang drag-to-reorder at ang `touch-action:none` na
   kasama niya: ginagawa nilang reorder ang pag-swipe sa tablet, kaya "laging
   gumagalaw" ang categories ng kumakain. Ang pagkakasunod ay nasa
   Settings > Menu Order na. Karaniwang pindutan na ulit ang tab. */

/* ---- 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%; position:relative; }
/* --- 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; }

/* AUTO-SUGGEST dropdown (2026-10-23): ang listahan ay lumulutang na lang sa
   ilalim ng search box, lumalabas lang habang nag-se-search — hindi na siya
   laging bukas sa card. */
.att-picker__list--suggest{
    position:absolute; left:0; right:0; top:52px; z-index:40;
    max-height:min(320px, 48vh);
    box-shadow:0 14px 34px rgba(16,24,40,.22);
}

/* --- 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;
}
/* Hide-from-clock control on each picker row + the un-hide panel (2026-09-19) */
.att-emp__hide{
    flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:8px; color:#94a3b8; cursor:pointer;
    transition:background .15s ease, color .15s ease;
}
.att-emp__hide:hover{ background:#fde8e8; color:#c0392b; }
.att-emp__hide:focus-visible{ outline:2px solid #6F4E37; outline-offset:-2px; }
.att-hidden{ margin-top:16px; }
.att-hidden__toggle{
    display:inline-flex; align-items:center; gap:8px; width:auto;
    padding:8px 14px; border-radius:999px; cursor:pointer;
    border:1px solid rgba(255,255,255,0.4); background:rgba(255,255,255,0.12);
    color:#fff; font-family:inherit; font-size:13px; font-weight:600;
}
.att-hidden__toggle:hover{ background:rgba(255,255,255,0.2); }
.att-hidden__count{
    background:rgba(255,255,255,0.9); color:#6F4E37; font-weight:800;
    border-radius:999px; padding:0 8px; font-size:12px; min-width:20px; text-align:center;
}
.att-hidden__list{ margin-top:10px; background:#fff; border-radius:12px; padding:6px; }
.att-hidden__row{
    display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:10px;
}
.att-hidden__row + .att-hidden__row{ border-top:1px solid #f1f5f9; }
.att-hidden__unhide{
    flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
    padding:7px 14px; border-radius:8px; border:1px solid #6F4E37;
    background:#6F4E37; color:#fff; font-family:inherit; font-size:13px; font-weight:700; cursor:pointer;
}
.att-hidden__unhide:hover{ background:#573C2A; }

@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-help a{ color:#6F4E37; font-weight:600; text-decoration:none; }
.cd-help a:hover{ text-decoration:underline; }
.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; line-height:1.2; 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; }
/* Add Expense mula sa drawer (2026-09-06): select na kamukha ng .cd-text-input,
   checkbox na hilera, dalawang-kolum na hilera, at ang opsyonal na kahon ng
   inventory. Nasa .cd- prefix para hindi tumama sa .form-control ng ibang modal. */
.cd-select{ width:100%; border:2px solid #e2e8f0; border-radius:10px; padding:11px 14px; font-size:15px; outline:none; background:#fff; color:#0f172a; }
.cd-select:focus{ border-color:#6F4E37; }
.cd-check{ display:flex; align-items:flex-start; gap:10px; margin-top:16px; font-size:14px; color:#334155; cursor:pointer; }
.cd-check input{ width:18px; height:18px; margin-top:2px; flex:none; accent-color:#6F4E37; }
.cd-check.is-disabled{ color:#94a3b8; cursor:not-allowed; }
.cd-check.is-disabled input{ cursor:not-allowed; }
.cd-check small{ display:block; color:#64748b; font-size:12.5px; margin-top:2px; }
.cd-check.is-disabled small{ color:#94a3b8; }
.cd-row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cd-sub{ margin-top:18px; padding:14px; border:1px dashed #cbd5e1; border-radius:12px; background:#f8fafc; }
.cd-sub__title{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:#6F4E37; margin-bottom:10px; }
.cd-sub__title span{ font-weight:500; color:#64748b; }
.cd-unit{ display:flex; align-items:center; border:2px solid #e2e8f0; border-radius:10px; padding:11px 14px; font-size:15px; line-height:1.2; color:#64748b; background:#f1f5f9; }
.cd-preview{ margin:8px 0 0; font-size:12.5px; color:#64748b; min-height:16px; }
.cd-preview strong{ color:#6F4E37; }
@media (max-width:480px){ .cd-row2{ grid-template-columns:1fr; } }
.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:1180px; }
.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; }

/* Auto-fit: pinupuno ang lapad ng screen (3 hanay sa malawak, 2 sa laptop,
   1 sa telepono) sa halip na naka-piit sa kaliwa. */
.dsum__panels{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:14px; align-items:start; }
.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; }
/* Ang cash na dapat makuha -- ito ang tinitingnan ng may-ari kapag binibilang
   ang drawer, kaya bahagyang naka-highlight. */
.dsum-row--cash{ background:#FAF7F2; border-radius:9px; margin:2px -8px; padding:7px 8px; }
.dsum-row--cash .dsum-row__ic{ color:#6F4E37; }
.dsum-row--cash strong{ color:#6F4E37; font-size:15px; }
/* Bukas pa, walang pumasok -- babala na hindi pa koleksyon. */
.dsum-row--warn span{ color:#b45309; }
.dsum-row--warn .dsum-row__ic{ color:#d97706; }
.dsum-row--warn strong{ color:#b45309; }
.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 .825s ease, visibility .825s 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 1.5s ease .075s 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.65s 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 9s ease-in-out 1.65s 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 .9s cubic-bezier(.2,.7,.2,1) .45s 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 .9s ease .675s 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 2.25s cubic-bezier(.45,.05,.35,1) infinite alternate;
}

/* ---------------- Powered by AVA ----------------
   ⚠️ IKAAPAT NA LUGAR NG IISANG MARKA (2026-09-12, hiling ng may-ari).
   VERBATIM ang mga halaga mula sa `.boot-by` ng `brew-line.html`; kapareho
   rin ng `.ava-credit` ng `landing.html` at ng nasa `games.html`. Kapag
   ginalaw ang isa, GALAWIN ANG LAHAT — iisang marka ito sa paningin ng
   may-ari, at ang isang naiwan ay kitang-kita.
   Walang LARAWAN dito nang sinasadya: walang request na maaaring mabigo,
   walang `onerror` na hakbang, at walang kalahating logong nawawala sa
   madilim na likod. Naitala na iyon sa landing.html at doon mismo tinanggal
   ang larawan — huwag siyang ibalik dito.
   Ang `.62s` ay kasunod ng caption (.3s) at ng bar (.45s): pumapasok siyang
   HULI, kaya hindi niya inaagaw ang logo. */
.ava-splash__by{
    position:relative;
    z-index:1;
    margin-top:64px;                    /* gap: bar→credit (2026-09-14) */
    text-align:center;
    opacity:0;
    animation:ava-fade-in .9s ease .93s forwards;
}
.ava-splash__by .l1{
    font-size:9.5px; letter-spacing:.2em; color:#6F6055;
    text-transform:uppercase;
}
.ava-splash__by .l2{
    font-size:13px; font-weight:700; color:#C2A06A;
    margin-top:4px; letter-spacing:.04em;
}

/* ---------------- 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; }
    .ava-splash__by{ margin-top:48px; }
}

/* 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; }
    /* Tahasan, hindi mana: ang 64px sa itaas ay magtutulak sa logo palabas ng
       nakahigang telepono, at "no scroll" ang buong punto ng breakpoint na ito. */
    .ava-splash__by{ margin-top:28px; }
    .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: 10px; display: flex; flex-direction: column; gap: 10px; 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; }
/* SAME-TABLE GROUP BOX (2026-10-22): isang kahon kada mesa kapag 2+ ang umorder
   sa iisang mesa (KKB). Ang pangalan ay nasa ilalim ng bawat order sa loob. */
.kds-table-group { border: 1.5px solid #E7D9C5; border-radius: 14px; background: #FBF7F1; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.kds-table-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px; }
.kds-tg-table { font-weight: 800; font-size: 13px; letter-spacing: .3px; color: #6F4E37; display: inline-flex; align-items: center; gap: 6px; }
.kds-tg-table i { color: #8a6d4f; }
.kds-tg-count { background: #6F4E37; color: #fff; border-radius: 999px; padding: 2px 10px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.kds-table-group-body { display: flex; flex-direction: column; gap: 8px; }
.ticket-name-foot { margin-top: 6px; font-size: 13.5px; font-weight: 800; color: #6F4E37; background: #F3E9D7; border-radius: 8px; padding: 5px 10px; display: flex; align-items: center; gap: 7px; }
.ticket-name-foot i { color: #8a6d4f; font-size: 12px; }
.ticket-elapsed { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #6B7280; margin: 2px 0; }
.ticket-elapsed.warning { color: #b45309; }
.ticket-elapsed.danger { color: #b91c1c; }
/* Stage word (Waiting / Cooking / Total) sa harap ng orasan */
.ticket-elapsed-lbl { font-weight: 700; text-transform: uppercase; letter-spacing: .3px; font-size: 9.5px; opacity: .75; }

/* ===== KDS HISTORY (2026-09-19): timing ng bawat natapos na order ===== */
.kds-history { margin-top: 4px; }
.kdsh-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; font-size: 13px; color: #57534e; }
.kdsh-head i { color: var(--primary); margin-right: 5px; }
.kdsh-avg { background: var(--primary-light, #F3E9D7); color: var(--primary, #6F4E37); padding: 4px 11px; border-radius: 999px; font-size: 12.5px; }
.kdsh-scroll { overflow: auto; border: 1px solid var(--border, #eee); border-radius: 12px; background: #fff; }
.kdsh-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kdsh-table th, .kdsh-table td { padding: 9px 12px; text-align: center; white-space: nowrap; }
.kdsh-table th { background: #faf7f2; color: #6b7280; font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px; border-bottom: 1px solid var(--border, #eee); }
.kdsh-table th small { display: block; font-weight: 600; font-size: 9.5px; opacity: .7; letter-spacing: 0; text-transform: none; }
.kdsh-table tbody tr { border-bottom: 1px solid #f2efe9; }
.kdsh-table tbody tr:last-child { border-bottom: none; }
.kdsh-table td { color: #374151; font-weight: 600; }
.kdsh-id { text-align: left !important; font-weight: 700; color: #2b2b2b; }
.kdsh-total { color: var(--primary, #6F4E37) !important; font-weight: 800; }
.kdsh-when { color: #9ca3af !important; font-weight: 500; font-size: 12px; }
/* KDS History — day filter (Today/Yesterday/picker) + "Made" items column (2026-09-19) */
.kdsh-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.kdsh-fbtn { border: 1px solid var(--border, #e7e2d9); background: #fff; color: #57534e; font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 999px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.kdsh-fbtn:hover { border-color: var(--primary, #6F4E37); color: var(--primary, #6F4E37); }
.kdsh-fbtn.active { background: var(--primary, #6F4E37); border-color: var(--primary, #6F4E37); color: #fff; }
.kdsh-fdate { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border, #e7e2d9); border-radius: 999px; padding: 4px 12px; color: #57534e; font-size: 12.5px; }
.kdsh-fdate i { color: var(--primary, #6F4E37); }
.kdsh-fdate input { border: none; background: transparent; font: inherit; color: inherit; cursor: pointer; outline: none; }
.kdsh-avgs { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kdsh-avgs .kdsh-avg i { margin-right: 4px; }
th.kdsh-items { text-align: left !important; }
td.kdsh-items { text-align: left !important; white-space: normal !important; max-width: 260px; color: #44403c !important; font-weight: 600; line-height: 1.35; }
.kdsh-more { color: var(--primary, #6F4E37); font-weight: 700; }
.kdsh-noitems { color: #cbd5e1; }
/* KDS Recipes — category filter chips + Add recipe button + add-item form (2026-09-19) */
.kdsr-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.kdsr-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.kdsr-spacer { flex: 1 1 auto; }
.kdsr-chip { border: 1px solid var(--border, #e7e2d9); background: #fff; color: #57534e; font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 999px; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.kdsr-chip:hover { border-color: var(--primary, #6F4E37); color: var(--primary, #6F4E37); }
.kdsr-chip.active { background: var(--primary, #6F4E37); border-color: var(--primary, #6F4E37); color: #fff; }
.kdsr-add { display: inline-flex; align-items: center; gap: 7px; border: none; background: var(--primary, #6F4E37); color: #fff; font-size: 13.5px; font-weight: 700; padding: 9px 16px; border-radius: 10px; cursor: pointer; transition: background .15s; }
.kdsr-add:hover { background: #573C2A; }
.kdsr-addform { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px; }
.kdsr-addform .kdsr-fld { display: flex; flex-direction: column; gap: 5px; }
.kdsr-addform .kdsr-fld > span { font-size: 12.5px; font-weight: 700; color: #57534e; }
.kdsr-addform .kdsr-fld input { padding: 11px 13px; border: 1px solid var(--border, #e7e2d9); border-radius: 10px; font: inherit; color: #2b2b2b; outline: none; }
.kdsr-addform .kdsr-fld input:focus { border-color: var(--primary, #6F4E37); box-shadow: 0 0 0 3px rgba(111,78,55,0.12); }
.kdsr-fld2 { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.kdsr-check { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: #2b2b2b; cursor: pointer; }
.kdsr-check input { width: 18px; height: 18px; accent-color: var(--primary, #6F4E37); cursor: pointer; }
.kdsr-check small { color: #94a3b8; font-weight: 500; }
.kdsr-hint { font-size: 12.5px; color: #78716c; margin: 0; }
.kdsr-addactions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
@media (max-width: 520px) { .kdsr-fld2 { grid-template-columns: 1fr; } }
/* KDS History "On duty" column + attendance grid duty badge (2026-09-19) */
td.kdsh-duty { text-align: left !important; white-space: normal !important; max-width: 200px; color: #6F4E37 !important; font-weight: 600; line-height: 1.35; }
th.kdsh-duty { text-align: left !important; }
.att-duty-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #F3E9D7; color: #6F4E37; font-size: 12px; font-weight: 700; white-space: nowrap; }
/* KDS recipe: read-only view + clickable "connect to inventory" (2026-09-19) */
.kdsr-view-method { font-size: 13.5px; line-height: 1.5; color: #374151; background: #f8f9fb; border: 1px solid #eceef1; border-radius: 10px; padding: 11px 13px; white-space: pre-wrap; }
.kdsr-view-track { display: inline-flex; align-items: center; gap: 7px; margin: 12px 0 2px; font-size: 12.5px; font-weight: 600; color: #6F4E37; background: #F3E9D7; border-radius: 999px; padding: 6px 12px; }
.kdsr-ing-connect { display: inline-flex; align-items: center; gap: 6px; border: none; background: none; padding: 2px 0; margin: 0; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.kdsr-ing-connect i { font-size: 10px; }
.kdsr-ing-connect:hover { filter: brightness(0.9); }

/* ===== KDS Checklist (opening/closing) — 2026-09-21 ===== */
.kds-checklist { padding: 2px; }
.kdsck-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.kdsck-day { font-size: 13.5px; color: #6b7280; }
.kdsck-day b { color: #6F4E37; }
.kdsck-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.kdsck-card { background: #fff; border: 1px solid #eceef1; border-radius: 14px; padding: 14px 16px 16px; box-shadow: 0 1px 3px rgba(17,24,39,.04); }
.kdsck-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14.5px; font-weight: 800; color: #1f2937; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid #f0f1f3; }
.kdsck-head i { color: #6F4E37; margin-right: 6px; }
.kdsck-prog { font-size: 12.5px; font-weight: 800; color: #6b7280; background: #f3f4f6; border-radius: 999px; padding: 3px 11px; white-space: nowrap; }
.kdsck-prog.all { color: #166534; background: #dcfce7; }
.kdsck-item { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid #f6f7f8; }
.kdsck-item:last-child { border-bottom: none; }
.kdsck-box { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; border: 2px solid #cbd0d6; background: #fff; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; transition: all .12s; padding: 0; }
.kdsck-box:hover { border-color: #6F4E37; }
.kdsck-item.done .kdsck-box { background: #16a34a; border-color: #16a34a; }
.kdsck-text { flex: 1 1 auto; font-size: 14px; color: #374151; line-height: 1.35; }
.kdsck-item.done .kdsck-text { color: #9aa1a9; text-decoration: line-through; }
.kdsck-by { flex: 0 0 auto; font-size: 11.5px; color: #9aa1a9; white-space: nowrap; }
.kdsck-editin { flex: 1 1 auto; font: inherit; font-size: 13.5px; padding: 6px 9px; border: 1px solid #d7dbe0; border-radius: 8px; }
.kdsck-editin:focus { outline: none; border-color: #6F4E37; }
.kdsck-move { flex: 0 0 auto; width: 26px; height: 26px; border: 1px solid #e2e5e9; background: #f6f7f8; color: #4b5563; border-radius: 7px; font-size: 11px; line-height: 1; cursor: pointer; }
.kdsck-move:hover { background: #eceef1; }
.kdsck-move:disabled { opacity: .35; cursor: default; }
.kdsck-del { flex: 0 0 auto; width: 26px; height: 26px; border: none; background: #fbeaea; color: #c0392b; border-radius: 7px; font-size: 18px; line-height: 1; cursor: pointer; }
.kdsck-del:hover { background: #f5d5d5; }
.kdsck-add { display: flex; gap: 8px; margin-top: 12px; }
.kdsck-add input { flex: 1 1 auto; font: inherit; font-size: 13.5px; padding: 8px 11px; border: 1px dashed #cbd0d6; border-radius: 9px; }
.kdsck-add input:focus { outline: none; border-color: #6F4E37; border-style: solid; }
.kdsck-add button { flex: 0 0 auto; border: none; background: var(--primary, #6F4E37); color: #fff; width: 38px; border-radius: 9px; cursor: pointer; font-size: 13px; }
.kdsck-add button:hover { filter: brightness(1.06); }

/* ===== Reusable save feedback overlay: loading -> ✓ / ✗ (2026-09-19) ===== */
.savefx-overlay {
    position: fixed; inset: 0; z-index: 10080;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .28);
    opacity: 0; visibility: hidden; transition: opacity .16s ease;
    pointer-events: none;
}
.savefx-overlay.show { opacity: 1; visibility: visible; }
.savefx-card {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    background: #fff; border-radius: 18px; padding: 26px 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3); min-width: 220px; max-width: 86vw;
    transform: translateY(8px) scale(.97);
    transition: transform .18s cubic-bezier(.22, .68, .28, 1);
}
.savefx-overlay.show .savefx-card { transform: none; }
.savefx-icon {
    width: 58px; height: 58px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 27px; color: #fff;
}
.savefx-overlay.is-saving .savefx-icon { background: #6F4E37; }
.savefx-overlay.is-ok .savefx-icon { background: #16a34a; animation: savefxpop .28s ease; }
.savefx-overlay.is-fail .savefx-icon { background: #dc2626; animation: savefxpop .28s ease; }
@keyframes savefxpop { 0% { transform: scale(.4); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.savefx-msg { font-size: 14.5px; font-weight: 700; color: #2b2b2b; text-align: center; line-height: 1.4; }
.savefx-actions { display: none; gap: 8px; margin-top: 6px; }
.savefx-btn { padding: 9px 15px; border-radius: 9px; font-weight: 700; font-size: 13px; cursor: pointer; border: none; display: inline-flex; align-items: center; gap: 6px; }
.savefx-btn-retry { background: #6F4E37; color: #fff; }
.savefx-btn-retry:hover { background: #5a3f2c; }
.savefx-btn-dismiss { background: #f1f3f5; color: #374151; }
.savefx-btn-dismiss:hover { background: #e5e7eb; }
@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; }
}

/* ANG HEADLINE CARDS, HINIWALAY SA PATAY NA CSS. May pangalawang
   `.report-card` block (~:5732) na para sa isang chooser UI na wala na:
   cursor:pointer, hover na tumataas, at `p { font-size:12px }` na siyang
   nagpapaliit sa mismong halaga — kaya mas maliit ang ₱7,955.88 kaysa sa
   sariling label. Mas mataas ang specificity ng mga ito kaya sila ang
   nananaig; walang binubura, para kung may lumang screen pang umaasa sa
   5732 ay buhay pa siya. */
.reports-summary .report-card {
    text-align: left;
    cursor: default;
    border: 1px solid var(--border-color);
    box-shadow: none;
    padding: 18px 20px;
    transition: none;
}
.reports-summary .report-card:hover {
    border-color: var(--border-color);
    transform: none;
}
.reports-summary .report-card .report-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 4px;
    line-height: 1.15;
}
.reports-summary .report-card h4 {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-light);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* ANG KATAWAN NG REPORT (`renderSalesReport`, inventory, staff...): ang
   `.report-stat` ay WALANG kahit anong CSS dati — hubad na teksto na
   lumulutang sa puting espasyo, habang may magagandang card ang kapatid
   niyang headline sa itaas. Parehong tile na sila ngayon. Ang
   `.summary-item` (ibang gumagamit ng .report-summary) ay hindi ginagalaw. */
.report-summary {
    flex-wrap: wrap;
    gap: 16px;
    border-bottom: none;
    padding-bottom: 0;
}
.report-summary .report-stat {
    flex: 1 1 200px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 16px 20px;
}
.report-summary .report-stat h4 {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-light);
    margin: 4px 0 0;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.report-summary .report-stat .stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.15;
}
.report-summary .report-stat .stat-of {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-light);
}

/* --- 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 {
    background: #fff;
    border: 1px solid #F3E9D7;
    border-left: 4px solid var(--primary, #6F4E37);
    border-radius: 14px;
    padding: 16px 18px;
    margin-top: 12px;
    box-shadow: 0 1px 2px rgba(111, 78, 55, .04), 0 10px 28px -18px rgba(111, 78, 55, .28);
}
.online-inbox__row1 {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
}
.online-inbox__code {
    font-family: monospace;
    font-weight: 600;
    font-size: 12px;
    color: #A8927C;
    letter-spacing: .02em;
}
/* 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__name { font-weight: 800; font-size: 15px; color: #1A1512; }
.online-inbox__voucher {
    font-size: 12px; font-weight: 800; color: #1B5E37; background: #E8F3EC;
    border: 1px solid #BFDCC9; border-radius: 999px; padding: 2px 10px; white-space: nowrap;
}
.online-inbox__pay {
    font-weight: 600; color: #573C2A; font-size: 12.5px;
    background: #FAF7F2; border: 1px solid #F3E9D7; border-radius: 999px; padding: 2px 10px;
    white-space: nowrap;
}
.online-inbox__type { font-weight: 500; color: #573C2A; }
.online-inbox__age { color: #A8927C; }
.online-inbox__total {
    margin-left: auto; font-weight: 800; color: var(--primary, #6F4E37); font-size: 20px;
    font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.online-inbox__row2 { margin-top: 6px; font-size: 13px; color: #374151; }
.online-inbox__items { margin-top: 10px; font-size: 13px; color: #573C2A; }
.online-inbox__note {
    margin-top: 6px;
    font-size: 12.5px;
    color: #8A5A14;
    border-left: 3px solid var(--secondary, #C2A06A);
    padding: 2px 0 2px 9px;
}
.online-inbox__actions { display: flex; gap: 8px; margin-top: 14px; }

/* ---- INVENTORY HISTORY (2026-09-24) ------------------------------------- */
/* ---- AUTO-SCHEDULE (2026-09-24) ---------------------------------------- */
.as-modal { width: min(920px, 96vw); max-height: 90vh; overflow: auto; }
.as-h { margin: 18px 0 8px; font-size: 14px; color: #3B2A1E; }
.as-time { display: grid; grid-template-columns: 110px 1fr auto 1fr; gap: 8px; align-items: center; margin-bottom: 6px; }
.as-time { grid-template-columns: 150px 1fr auto 1fr 36px; }
.as-halfs-h { margin: 12px 0 6px; font-weight: 700; font-size: 13px; color: #3B2A1E; }
.as-half__name { font-weight: 600; }
.as-half__x { border: 0; background: none; color: #B3261E; cursor: pointer; font-size: 13px; opacity: .7; }
.as-half__x:hover { opacity: 1; }
.as-add-half { margin-top: 4px; }
.as-time__lbl { font-weight: 700; color: #3B2A1E; font-size: 13px; }
.as-time__lbl em { font-style: normal; color: #A8927C; font-weight: 500; }
.as-counts, .as-staff, .as-preview { width: 100%; border-collapse: collapse; font-size: 13px; }
.as-counts th, .as-counts td, .as-staff th, .as-staff td, .as-preview th, .as-preview td {
    padding: 6px 8px; border-bottom: 1px solid #F3E9D7; text-align: center;
}
.as-counts th:first-child, .as-staff .as-name, .as-preview .as-name { text-align: left; font-weight: 600; color: #3B2A1E; }
.as-num { width: 70px; margin: 0 auto; text-align: center; }
.as-staff select { min-width: 120px; }
.as-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.as-preview th span { font-weight: 500; color: #A8927C; font-size: 11px; }
.as-chip { display: inline-flex; flex-direction: column; align-items: center; border-radius: 8px; padding: 3px 8px; font-weight: 700; font-size: 12px; }
.as-chip small { font-weight: 500; font-size: 10.5px; opacity: .8; }
.as-chip--morning { background: #E8F3EC; color: #1B5E37; }
.as-chip--night   { background: #EDE7F6; color: #4527A0; }
.as-chip--half    { background: #FFF4E0; color: #8A5A14; }
.as-chip--old     { background: #f1f1f1; color: #6b7280; }
.as-off { font-size: 11px; font-weight: 700; color: #2563EB; }
.as-sub { display: block; font-weight: 500; font-size: 10.5px; color: #A8927C; }
.as-short--cap { background: #FBF4E6; border-color: #E9D6AE; color: #8A5A14; }
.as-short { background: #FDF1EE; border: 1px solid #F2C9BF; color: #B3261E; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.inv-history { background: #fff; border: 1px solid #F3E9D7; border-radius: 14px; padding: 4px 14px 10px; }
.inv-history__day {
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #A8927C; padding: 14px 0 6px; border-bottom: 1px solid #F3E9D7;
}
.inv-history__row {
    display: grid; grid-template-columns: 64px 34px 1fr auto; gap: 12px; align-items: start;
    padding: 10px 0; border-bottom: 1px solid #f5efe6;
}
.inv-history__row:last-child { border-bottom: 0; }
.inv-history__time { font-size: 12px; color: #A8927C; padding-top: 7px; font-variant-numeric: tabular-nums; }
.inv-history__icon {
    width: 34px; height: 34px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.inv-history__main { min-width: 0; font-size: 13.5px; color: #3B2A1E; }
.inv-history__action { font-size: 11.5px; font-weight: 700; margin-left: 4px; }
.inv-history__detail { font-size: 13px; color: #3B2A1E; margin-top: 2px; line-height: 1.5; }
.inv-history__muted { color: #A8927C; }
.inv-history__sep { color: #D8BE8E; margin: 0 7px; }
.inv-history__tag {
    font-size: 11px; font-weight: 600; color: #573C2A; background: #FAF7F2;
    border: 1px solid #F3E9D7; border-radius: 999px; padding: 1px 8px; margin-left: 4px;
}
.inv-history__user { font-size: 12px; color: #573C2A; font-weight: 600; padding-top: 7px; white-space: nowrap; }
@media (max-width: 640px) {
    .inv-history__row { grid-template-columns: 34px 1fr; }
    .inv-history__time, .inv-history__user { grid-column: 2; padding-top: 0; }
    .inv-history__icon { grid-row: 1 / span 3; }
}
.online-inbox__actions .btn { border-radius: 10px; font-weight: 600; padding: 8px 16px; box-shadow: none; }
.online-inbox__actions .btn-warning {
    background: #fff; color: #9A3412; border: 1px solid #EBD9C3;
}
.online-inbox__actions .btn-warning:hover { background: #FAF7F2; }

/* ---- CASH PANEL (2026-09-24) --------------------------------------------
   Minimal: isang hanay ng tatlong numero -- Babayaran · Pambayad · Sukli
   -- na may manipis na guhit sa pagitan. Ang ikatlo lang ang may kulay at
   pinakamalaki: iyon ang kailangang gawin ng cashier. Pula = kulang,
   dilaw = walang idineklara. */
.oi-cash {
    margin-top: 12px;
    border-radius: 14px;
    background: #FAF7F2;
    border: 1px solid #F3E9D7;
    padding: 4px;
}
.oi-cash--short { background: #FDF1EE; border-color: #F2C9BF; }
.oi-cash--none  { background: #FBF4E6; border-color: #E9D6AE; }
.oi-cash__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    align-items: stretch;
}
.oi-cash__cell {
    padding: 10px 14px;
    display: flex; flex-direction: column; gap: 3px;
    min-width: 0;
}
.oi-cash__cell + .oi-cash__cell { border-left: 1px solid #EBDFCB; }
.oi-cash__lbl {
    font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: #A8927C;
}
.oi-cash__amt {
    font-size: 19px; font-weight: 700; color: #3B2A1E;
    font-variant-numeric: tabular-nums; line-height: 1.2; letter-spacing: -.01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oi-cash__cell--change, .oi-cash__cell--short {
    border-radius: 11px; border-left: 0 !important;
}
.oi-cash__cell--change { background: #1B5E37; }
.oi-cash__cell--change .oi-cash__lbl { color: #CFE3D5; }
.oi-cash__cell--change .oi-cash__amt { color: #FAF7F2; font-size: 28px; font-weight: 800; }
.oi-cash__cell--short { background: #B3261E; }
.oi-cash__cell--short .oi-cash__lbl { color: #F6D5CF; }
.oi-cash__cell--short .oi-cash__amt { color: #fff; font-size: 28px; font-weight: 800; }
.oi-cash__cell--unknown .oi-cash__amt { color: #A8762A; }
.oi-cash__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex-wrap: wrap; padding: 6px 10px 8px;
}
.oi-cash__msg { font-size: 12.5px; font-weight: 600; }
.oi-cash--short .oi-cash__msg { color: #B3261E; }
.oi-cash--none  .oi-cash__msg { color: #8A5A14; }
.oi-cash__edited { padding: 0 14px 8px; font-size: 11.5px; font-weight: 500; color: #8A5A14; }
.oi-cash__btn {
    display: inline-flex; align-items: center; gap: 6px;
    border-radius: 999px; padding: 7px 14px;
    font-size: 12.5px; font-weight: 700; cursor: pointer;
    border: 0; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.oi-cash__btn:hover { transform: translateY(-1px); }
/* Tahimik na text button sa ilalim ng Pambayad (tugma ang pera) */
.oi-cash__btn--link {
    align-self: flex-start; margin-top: 2px; padding: 2px 0;
    background: none; color: var(--primary, #6F4E37); font-weight: 600; font-size: 12px;
    text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #D8BE8E;
}
.oi-cash__btn--link:hover { color: #573C2A; transform: none; }
.oi-cash__btn--link i { display: none; }
/* "Baguhin" sa ilalim ng Pambayad: maliit na pulang pindutan (hiling ng may-ari) */
.oi-cash__btn--edit {
    align-self: flex-start; margin-top: 5px; padding: 4px 12px;
    background: #B3261E; color: #fff; font-size: 12px;
}
.oi-cash__btn--edit:hover { background: #8F1E17; box-shadow: 0 6px 14px -8px rgba(179, 38, 30, .6); }
.oi-cash__btn--edit i { font-size: 11px; }
.oi-cash__btn--warn   { background: var(--secondary, #C2A06A); color: #1A1512; }
.oi-cash__btn--danger {
    background: #B3261E; color: #fff;
    animation: oiCashPulse 1.6s ease-in-out infinite;
}
@keyframes oiCashPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(179, 38, 30, .45); }
    50%      { box-shadow: 0 0 0 8px rgba(179, 38, 30, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .oi-cash__btn--danger { animation: none; }
}
@media (max-width: 640px) {
    .oi-cash__grid { grid-template-columns: 1fr 1fr; }
    .oi-cash__cell--change, .oi-cash__cell--short, .oi-cash__cell--unknown { grid-column: 1 / -1; }
    .oi-cash__cell + .oi-cash__cell--change, .oi-cash__cell + .oi-cash__cell--short,
    .oi-cash__cell + .oi-cash__cell--unknown { border-left: 0; }
    .oi-cash__btn--warn, .oi-cash__btn--danger { width: 100%; justify-content: center; }
}

@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: 5px;
    padding-top: 5px;
    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. */
}
/* Apat na pill kasama ang orasan ay hindi kasya sa 1366px na laptop, at
   `white-space: nowrap` ang .qb-tv-btn -- kaya bumabalot, hindi umaapaw. */
.qb-brand__right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.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 {
    display: inline-flex;
    /* Ang pangalan ay nasa TABI na ng numero (2026-09-05, hiling ng may-ari)
       — dating nasa ilalim, at ang dagdag na linya ay kumakain ng hilera sa
       TV. Baseline para pantay ang upo; wrap para ang mahabang pangalan ay
       bumaba nang maayos sa makitid na screen imbes na ipitin ang numero. */
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 10px;
    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;
    min-width: 0;
}
.qb-col--ready .qb-num { color: #14532d; }
/* Ang pangalang isisigaw, sa TABI ng queue number. Mas maliit at mahina ang
   timbang — ang numero pa rin ang pangunahin, pero may pangalang tutugma ang
   kumakain kapag hindi niya narinig ang numero. */
.qb-name {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: none;
    color: #6F4E37;
    margin-top: 0;
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qb-col--ready .qb-name { color: #2f7d4f; }

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

/* WALANG MENSAHENG PANLOOB SA TV. Publiko ang board — nakikita siya ng buong
   pila mula sa kabilang dulo ng tindahan. Ang toast ay para sa STAFF, at
   kusang pumuputok kahit walang pumipindot: "🛵 New online order: QUE-231"
   kada 45s na poll (js/core/online-orders.js), "Online order accepted — now
   Order #123 🎉" sa bawat bayad na NextPay order na awtomatikong tinatanggap
   (cashierless), "Sync stopped…", "Browser storage is full…", at ang AI
   Action toast na may Undo countdown na NANANATILI nang minuto-minuto, hindi
   3 segundo. Wala sa mga iyon ang para sa kumakain — order number ng ibang
   tao, estado ng sync, at mga pindutang wala siyang karapatang pindutin.

   Nakatago LANG sila, hindi pinatay: tumatakbo pa rin ang auto-accept, ang
   sync, ang undo timer at ang badge. Ang `.qb-tv` scope ang buong seguridad
   nito — sa labas ng TV mode ay walang nagbago kahit isang pixel, at pagkalabas
   sa TV mode ay normal ulit agad ang toast. */
.qb-tv #toastContainer,
.qb-tv .toast-container,
.qb-tv .ai-action-toast-container { 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-name         { font-size: clamp(14px, 2.8vh, 40px); margin-top: 0; max-width: 44vw; }
.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; }
/* PREPARING lang: bahagyang liit (7.6 → 6.9vh, ~9%) at manipis na padding
   para mas maraming numero ang kasya — ang Now Serving ay nananatili sa
   dating laki, siya ang binabasa mula sa layo. Kasama ng pangalang nasa TABI
   na ng numero, ang fit-loop sa renderQueueBoard ang kusang nagdadagdag ng
   hilera kapag pumaikli ang bawat isa. (2026-09-05, hiling ng may-ari) */
.qb-tv .qb-col--prep .qb-num  { font-size: clamp(30px, 6.9vh, 88px); }
.qb-tv .qb-col--prep .qb-name { font-size: clamp(13px, 2.5vh, 36px); }
.qb-tv .qb-col--prep .qb-row  { padding: .9vh 1.4vw; }
.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);
}

/* ---- Ang bilis: dropdown, at ang pabalik-sa-default ----
   Ang <select> ay nakaupo SA LOOB ng pill at hindi katabi niya. Ang katabi ay
   dalawang magkadikit na target na magkaibang hugis, at sa isang board na
   tinitingnan mula sa malayo ay parang isang pindutang nabiyak.
   LIMA na ang pill kasama ang orasan (dating apat) -- `flex-wrap: wrap` na ang
   `.qb-brand__right` mula pa noong apat, kaya bumabalot siya sa 1366px at
   hindi umaapaw. */
.qb-tv-btn--rate {
    position: relative;
    padding-right: 26px;
    /* Mas masikip kaysa sa 7px ng ibang pill: ang "Speed:" at ang halaga ay
       IISANG parirala, hindi icon-at-teksto. Ang malapad na puwang ay
       nagmumukhang dalawang magkaibang pindutan. */
    gap: 5px;
    cursor: pointer;
}
.qb-rate-select {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    padding: 0 0 0 2px;
    outline: none;
}
/* Sariling pana at hindi ang glyph ng Font Awesome: ang pill na ito ay nasa
   header ng board na naiiwang bukas buong araw, at ang icon font ay isa pang
   bagay na pwedeng hindi dumating. Ang border-triangle ay laging naroon. */
.qb-tv-btn--rate::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -2px;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: .8;
    pointer-events: none;
}
/* Ang focus ay dumadapo sa <select> sa loob, hindi sa pill -- kaya ang pill ang
   nagpapakita nito. Kung wala ito, ang taong gumagamit ng keyboard ay walang
   makikitang saan siya naroon. */
.qb-tv-btn--rate:focus-within {
    background: rgba(194, 160, 106, .16);
    border-color: rgba(194, 160, 106, .7);
}
/* Ang popup ng <select> ay iginuguhit ng OS at HINDI namamana ang madilim na
   brand bar. Kung hindi ito isusulat, may browser na nagpapakita ng gintong
   teksto sa puting listahan -- halos hindi mabasa. */
.qb-rate-select option {
    background: #2B211B;
    color: #F3E9DA;
    text-transform: none;
    letter-spacing: normal;
}
/* Nasa default ka na: naroon pa rin ang pindutan (may gagawin pa siya kung
   nagalaw ang isa sa tatlo) pero hindi na siya humihingi ng pansin. */
.qb-tv-btn--default.is-set { opacity: .5; }
.qb-tv-btn--default.is-set:hover { opacity: 1; }

/* 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. */
/* EKSAKTONG kaparehong amber ng .qb-tv-btn--sound.is-off sa ibaba. Iisang tint
   lang ang ginagamit ng board para sa "tingnan mo ako" -- ang pangalawang kulay
   ay nagiging pangalawang kahulugan na kailangan pang matutunan. */
.qb-tv-btn.is-warn { color: #b45309; border-color: rgba(180, 83, 9, .45); }

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

/* ===========================
   ANG COUNTER NG PIRASO (KDS)
   ===========================
   Ito ang TANGING pinagmumulan ng bilog sa telepono ng kumakain, kaya kailangan
   niyang matamaan ng hinlalaki sa isang tablet na may mantika sa screen — hindi
   siya 20px na checkbox. Nasa kanang dulo siya ng linya (`margin-left:auto`)
   para pare-pareho ang posisyon sa bawat hilera: isang haligi ang tinatapik ng
   kusinero, hindi isang target na gumagalaw kasabay ng haba ng pangalan.

   `align-self:center` dahil `align-items:baseline` ang `.ticket-item` — kung
   wala ito, nakabitin ang pill sa baseline ng teksto at mukhang lumulutang. */
.ticket-tick {
    margin-left: auto;
    align-self: center;
    flex: none;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 5px 14px;
    border: 1.5px solid rgba(111, 78, 55, 0.35);
    border-radius: 999px;
    background: var(--white);
    color: #6F4E37;
    font-size: 14px;
    font-weight: 800;
    /* Ang "1/2" at "2/2" ay hindi dapat magkaibang lapad — tumatalon ang buong
       hilera sa bawat pindot kung proportional ang numero. */
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, border-color .15s, color .15s;
}
/* ANG PROGRESS FILL. Ang `--tick-fill` (0%..100%) ay galing sa `_dn/_q` sa
   markup; ito ang berdeng bumubuhos mula kaliwa habang tinatapik ng kusinero.
   Nasa likod ng teksto (`z-index`), kaya nababasa pa rin ang "Made 1/2".
   Isang sulyap sa buong ticket = alam mo agad kung gaano na kalayo bawat linya. */
.ticket-tick::before {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--tick-fill, 0%);
    background: rgba(22, 163, 74, 0.16);
    transition: width .2s ease;
    pointer-events: none;
}
.ticket-tick > * { position: relative; z-index: 1; }
.ticket-tick i { font-size: 13px; opacity: .85; }
/* Ang salita ("Made"/"Done") ang nagsasabi kung PARA SAAN ang pill — ang "0/1"
   lang ay walang kahulugan sa bagong barista. Bahagyang mas maliit at mababa
   ang timbang kaysa sa numero, para ang bilang pa rin ang mata unang tumama. */
.ticket-tick-lbl { font-size: 12.5px; font-weight: 700; letter-spacing: .2px; }
.ticket-tick-num { font-variant-numeric: tabular-nums; }
.ticket-tick:hover { border-color: var(--primary); }
.ticket-tick:active { transform: scale(0.96); }
/* Nasimulan na pero hindi pa tapos — berde na ang guhit at ang ✓-notch, para
   makita kaagad na "may progreso na dito" nang hindi binabasa ang numero. */
.ticket-tick.is-partial { border-color: rgba(22, 163, 74, 0.5); color: #15803D; }
.ticket-tick.is-partial i { opacity: 1; }
.ticket-tick.is-done { background: #16A34A; border-color: #16A34A; color: #FFF; }
.ticket-tick.is-done::before { width: 0; }

/* ===========================
   PALITAN ANG ITEM (KDS) — 2026-08-25
   ===========================
   Ang ⇄ ay kapatid ng counter sa kanan: parehong 34px na pill, parehong
   kulay, pero icon lang — bihira siyang pindutin at hindi siya dapat
   makipag-agawan sa bilang. Kinukuha niya ang `margin-left:auto` ng linya
   para magkatabi sila sa kanang dulo. */
/* Ang ⇄ ay PANGALAWA sa counter: bihira siyang pindutin, kaya dapat hindi siya
   makipag-agawan ng mata. Ghost/mahinang estilo — walang punong kulay, mas
   pinong border — para ang berdeng counter ang pangunahing target. */
.ticket-swap {
    margin-left: auto;
    align-self: center;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 38px;
    padding: 5px 11px;
    border: 1.5px solid rgba(111, 78, 55, 0.22);
    border-radius: 999px;
    background: transparent;
    color: rgba(111, 78, 55, 0.72);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, border-color .15s, color .15s;
}
.ticket-swap i { font-size: 11px; }
/* Dati icon-only ang ⇄ — walang paraan ang barista para malaman kung ano.
   Nakadikit na ang salita ngayon. */
.ticket-swap-lbl { letter-spacing: .2px; }
/* Ang ⇄ ang kumukuha ng `margin-left:auto` (itinutulak ang grupo sa kanan);
   pinapatay nito ang auto ng counter, kaya 8px lang ang puwang sa pagitan nila
   sa halip na hatiin ng dalawang auto-margin ang buong linya. */
.ticket-swap + .ticket-tick { margin-left: 8px; }
.ticket-swap:hover { border-color: var(--primary); color: var(--primary); background: rgba(111, 78, 55, 0.05); }
.ticket-swap:active { transform: scale(0.96); }
/* Ang pinalitang linya ay may tatak — ang kusinerong bumalik mula sa kawali
   ay dapat makitang IBA na ang nasa ticket, hindi lang mapansin. */
.ticket-swapped {
    display: inline-block;
    margin: 5px 0 0 38px;
    padding: 2px 10px;
    background: #FFF7ED;
    color: #C2410C;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.55;
}
.ticket-swapped i { font-size: 11px; margin-right: 3px; }
/* Ang picker — nasa loob ng .kdsr-card, kaya ang ulo ay sa kaniya. */
.kdss-note { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.kdss-list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow: auto; }
.kdss-opt {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "name go" "cat go";
    align-items: center;
    gap: 2px 12px;
    text-align: left;
    padding: 12px 14px;
    min-height: 52px;                   /* daliri, hindi mouse */
    border: 1.5px solid var(--border-color);
    border-radius: 12px;
    background: var(--white);
    color: var(--text-dark);
    cursor: pointer;
    font: inherit;
}
.kdss-opt:hover { border-color: var(--primary); }
.kdss-name { grid-area: name; font-size: 15.5px; font-weight: 700; }
.kdss-name em {
    font-style: normal; font-weight: 700; font-size: 12.5px;
    color: #6F4E37; background: #F3E9D7;
    border-radius: 999px; padding: 1px 8px; margin-left: 6px;
}
.kdss-cat { grid-area: cat; font-size: 12px; color: var(--text-light); text-transform: uppercase; letter-spacing: .3px; }
.kdss-go { grid-area: go; font-size: 13px; font-weight: 800; color: #6F4E37; white-space: nowrap; }
.kdss-opt.is-picked { border-color: #16A34A; background: #F0FDF4; }
.kdss-opt.is-picked .kdss-go { color: #15803D; }
.kdss-empty { margin: 0; padding: 18px 12px; text-align: center; color: var(--text-muted); font-size: 14px; }

/* ===== INVENTORY: haligi ng Supplier + pagtanggap ng PO (2026-08-29) ===== */
.inv-supplier { font-size: 13.5px; color: var(--text-dark); }
.inv-supplier.is-off { color: var(--text-light); text-decoration: line-through; }
.inv-supplier.none { color: var(--text-light); }
/* Ang linyang hindi matatanggap: nakikita ang dahilan, hindi tinatago. */
.receive-item-row.is-blocked { opacity: .75; }
.receive-block {
    display: block; margin-top: 4px;
    font-size: 12.5px; font-weight: 600; color: #B91C1C;
}
.receive-block i { margin-right: 4px; }

/* ===========================
   SIZES & PRICES EDITOR (Edit Menu Item) — 2026-09-06
   ===========================
   Bawat laki ay isang card na may ulo (on/off · pangalan · presyo · tanggal)
   at may "Packaging" na sub-kahon. Dating pinaghalong input na lumulutang —
   hindi halata kung aling packaging ang kaninong laki. */
.size-card {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--white, #fff);
}
.size-card.is-off { opacity: .55; background: #fafafa; }
.size-head { display: flex; gap: 8px; align-items: center; }
.size-head input[type="checkbox"] { width: 17px; height: 17px; flex: 0 0 auto; cursor: pointer; }
.size-head .size-name { flex: 1; min-width: 96px; padding: 7px 9px; }
.size-peso { color: #6b7280; font-weight: 600; flex: none; }
.size-head .size-price { width: 104px; padding: 7px 9px; }
.size-base-tag {
    flex: none;
    font-size: 10px; font-weight: 800; letter-spacing: .05em;
    color: #6F4E37; background: #F3E9D7;
    border-radius: 999px; padding: 2px 8px;
}
.size-pack {
    margin: 8px 0 0 25px;
    padding: 8px 10px;
    background: #F8FAFC;
    border: 1px solid #EEF0F3;
    border-radius: 8px;
}
.size-pack-head {
    display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: #6b7280; margin-bottom: 4px;
}
.size-pack-head i { color: #8e8e93; }
.size-pack-hint { font-weight: 500; text-transform: none; letter-spacing: 0; color: #9ca3af; }
.size-pack-none { font-size: 12.5px; color: #9ca3af; padding: 2px 0; }
.size-pack-row { display: flex; gap: 6px; align-items: center; padding: 2px 0; font-size: 13px; }
.size-pack-row i { color: #8e8e93; width: 14px; }
.size-pack-row .size-pack-name { flex: 1; }
.size-pack-row strong { color: #6b7280; }
.size-pack-add { display: flex; gap: 6px; align-items: center; margin-top: 5px; }
.size-pack-add select { flex: 1; min-width: 120px; padding: 6px 8px; font-size: 13px; }
.size-pack-add input[type="number"] { width: 62px; padding: 6px 8px; font-size: 13px; }
.sizes-hint { font-size: 12px; color: #6b7280; margin: 0 0 8px; line-height: 1.45; }

/* Ang tapos nang linya ay kumukupas. Isang sulyap lang ang natatanggap ng
   ticket sa gitna ng rush — ang natitira pang gawin ang dapat maging
   pinakamadaling makita, hindi ang natapos na. */
.ticket-line--done .ticket-item-name,
.ticket-line--done .ticket-qty { opacity: .45; text-decoration: line-through; }

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

/* Ang hub tab na pinapatay ng KONFIGURASYON, hindi ng role o ng feature switch.
   Sariling channel siya nang sadya: ang ROLES ay sumusulat ng inline
   `style.display` at ang FEATURES ay ng `.feature-off` — kung sasakay tayo sa
   alinman sa kanila, magsasagutan sila tuwing muling tatakbo ang isa.
   Ginagamit ngayon ng Barista tab kapag walang category na naka-atas sa
   barista: sa estadong iyon ay kambal lang siya ng Kitchen. */
.hub-tabs .hub-tab.hub-tab--station-off { display: none !important; }

/* ============================================================
   ANG SWITCH NG TUNOG NG BAGONG ORDER
   ------------------------------------------------------------
   Lumalabas sa ulo ng KDS (Kitchen / Bar Display) at sa ulo ng Online Orders
   inbox — dalawang lugar, iisang pindutan, iisang flag.

   BUKAS = kayumanggi at matatag: siya ang normal na estado at hindi siya
   dapat mukhang babala. PATAY = kupas at may guhit sa kampanilya, at SADYANG
   nananatiling malinaw na nababasa — ang tahimik na istasyon ay dapat may
   nakikitang dahilan, kung hindi ay "sira ang system" ang basa nito.
   (Kapareho ng lohika ng `.qb-tv-btn--sound.is-off` sa Queue Board.) */
.chime-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border: 1px solid #D8BE8E;
    border-radius: 999px;
    background: #FAF7F2;
    color: #6F4E37;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.chime-toggle:hover {
    background: #F3E9D7;
    border-color: #6F4E37;
}
.chime-toggle i { font-size: 13px; }

.chime-toggle.is-off {
    border-color: #d1d5db;
    background: #f9fafb;
    color: #6b7280;
}
.chime-toggle.is-off:hover {
    border-color: #9ca3af;
    color: #374151;
}
/* NAKAKANDADO (2026-08-25): walang humawak pa sa screen mula nang mag-reload,
   kaya hindi pa papayagan ng browser ang tunog. Amber at kumukurap — babala
   ito, hindi estado. Nawawala sa unang pindot kahit saan. (Wala nang `is-off`
   na nire-render mula nang maging laging bukas ang tunog; naiwan ang CSS
   para sa mga lumang cached na pahina.) */
.chime-toggle.is-locked {
    border-color: #F59E0B;
    background: #FFFBEB;
    color: #B45309;
    animation: chime-locked-pulse 1.6s ease-in-out infinite;
}
.chime-toggle.is-locked:hover { background: #FEF3C7; border-color: #D97706; }
@keyframes chime-locked-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .45); }
    50%      { box-shadow: 0 0 0 7px rgba(245, 158, 11, 0); }
}
@media (prefers-reduced-motion: reduce) { .chime-toggle.is-locked { animation: none; } }


/* ===== STAFF PURCHASE (POS) =====
   Ang staff mode ay pumapalit sa buong itaas ng order panel, kaya kailangan
   niyang mukhang IBANG kalagayan -- hindi lang bagong field. Ang aktibong
   buton ang tanging senyas na nakikita habang naka-scroll pababa. */
#staffModeBtn.is-on {
    background: var(--primary, #6F4E37);
    border-color: var(--primary, #6F4E37);
    color: #fff;
}
/* IBANG KULAY SA STAFF NANG SINASADYA. Magkatabi sila at magkapareho ang
   hugis, at pareho silang nagbabawas sa IISANG total -- kaya kung magkaparehong
   kayumanggi rin sila kapag bukas, walang makakapagsabi mula sa malayo kung
   alin ang tumatakbo. Berde ang estudyante. (Hindi sila kailanman sabay:
   itinatago ng `_renderStudentOrderUI` ang isang ito sa staff mode.) */
/* ---- SINO ANG BUMIBILI: ang dropdown at ang Student, iisang hilera ----
   Magkadikit sila dahil IISANG tanong sila. Ang `align-items: stretch` ang
   nagpapapantay sa taas ng pindutan sa dropdown nang hindi hinuhulaan ang
   padding ng `.form-control` -- kapag nagbago iyon, sumusunod siya. */
.order-buyer-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 8px;
}
/* `min-width: 0` para makasikip ang dropdown kapag makitid ang panel: kung
   wala siya, ang flex item ay tumatanggi nang mas maliit sa nilalaman niya at
   itinutulak niya palabas ang pindutan. */
.order-buyer-row > #posCustomerOption {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}
/* ⚠️ `margin-bottom: 8px` ang `.order-options select` -- iyon ang buong
   pinagkaiba ng 48px na hilera sa 40px na dropdown: umaabot ang balot sa taas
   ng hilera, pero ang select ay nakaupo sa itaas na may 8px na hangin sa
   ilalim. Sa hilerang ito ay walang ilalim na susundan, kaya inaalis siya --
   at doon lang nagiging pantay ang dalawa. */
.order-buyer-row > #posCustomerOption select { width: 100%; margin-bottom: 0; }

.buyer-student {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    border: 1px solid var(--border-color, #d9dce1);
    border-radius: 8px;
    background: #fff;
    color: #4b5563;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.buyer-student:hover { border-color: #15803d; color: #15803d; }
/* BERDE, HINDI KAYUMANGGI. Kayumanggi ang Staff at ang Takeout sa parehong
   panel; kung kayumanggi rin ito kapag bukas, walang makakapagsabi mula sa
   isang tingin kung aling bawas ang tumatakbo -- at magkaiba sila ng
   pinagmumulan ng pera. */
.buyer-student.is-on {
    background: #15803d;
    border-color: #15803d;
    color: #fff;
}
/* Walang porsyentong nakatakda: naroon pa rin siya (kung hindi, iisipin ng
   may-ari na nawala ang feature) pero hindi na siya humihingi ng pansin.
   May sinasabi pa rin ang pagpindot -- kung saan iseset. */
.buyer-student.is-unset { opacity: .45; }
.buyer-student.is-unset:hover { border-color: var(--border-color, #d9dce1); color: #4b5563; }

/* ---- Student ▾ : PWD / Senior Citizen ----
   Isang split button: ang kaliwa ang on/off ng napiling uri, ang arrow ang
   pilian. Iisang hitsura nila (`.buyer-student`) para iisang pindutan sila
   sa mata; ang arrow lang ang walang kaliwang gilid. */
.buyer-pick { position: relative; display: inline-flex; flex: 0 0 auto; align-items: stretch; }
.buyer-pick > .buyer-student { border-radius: 8px 0 0 8px; }
.buyer-pick > .buyer-arrow { border-radius: 0 8px 8px 0; border-left: 0; padding: 0 10px; font-size: 11px; }
.buyer-pick > .buyer-arrow.is-on { border-left: 1px solid rgba(255,255,255,.35); }
.buyer-menu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
    min-width: 210px; padding: 6px;
    background: #fff; border: 1px solid var(--border-color, #d9dce1);
    border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.14);
}
.buyer-menu[hidden] { display: none; }
.buyer-menu button {
    display: flex; width: 100%; align-items: center; gap: 10px;
    padding: 10px 10px; border: 0; border-radius: 7px; background: none;
    color: #374151; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left;
}
.buyer-menu button i { width: 16px; text-align: center; }
.buyer-menu button .bm-pct { margin-left: auto; font-weight: 700; color: #6b7280; font-size: 12px; }
.buyer-menu button:hover { background: #f0fdf4; color: #15803d; }
.buyer-menu button.is-sel { background: #dcfce7; color: #15803d; }
.buyer-menu button.is-unset { opacity: .45; }

/* ---- Ang dalawang aksyon sa header, magkadikit ----
   `space-between` ang `.order-header`: ang bawat anak ay itinutulak palayo sa
   isa't isa, kaya ang Staff ay naiiwang nakalutang sa gitna -- malayo sa
   pamagat at malayo sa Clear All. Isang balot ang gumagawa sa kanilang
   IISANG bagay sa mata. */
.order-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.pos-order-section.staff-mode .order-summary { border-left: 3px solid #6F4E37; padding-left: 10px; }
/* Sa staff mode, NAKATAGO ang Paid/Unpaid: doble siya ng pagpili sa Staff
   Purchase modal (Salary / Cash / Online), at ang toggle na naiwan sa Unpaid
   ay hindi nagtatala ng bili habang nalikha na ang bawas sa sahod. Ang
   `_finalizeNewOrder()` ay hindi na siya binabasa kapag staff mode. */
.pos-order-section.staff-mode .order-pay-row { display: none; }

/* Ang porsyento ay BINABASA, hindi ini-input -- kaya pill siya at hindi field.
   Ang hitsura ng input ay isang pangako na puwede siyang palitan dito. */
.staff-pill-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.staff-rate-pill {
    display: inline-block; padding: 6px 14px; border-radius: 999px;
    background: #F3E9D7; color: #6F4E37; font-weight: 800; font-size: 16px;
}

.staff-pay-grid { display: grid; gap: 8px; }
/* Dine in / Take out ng tauhan: dalawang haligi, magkatabi (2026-08-29). */
.staff-type-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .staff-type-grid { grid-template-columns: 1fr; } }
.staff-pay-opt { display: block; cursor: pointer; }
.staff-pay-opt input { position: absolute; opacity: 0; pointer-events: none; }
.staff-pay-opt > span {
    display: block; padding: 12px 14px; border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--text, #1f2937);
}
.staff-pay-opt > span small { display: block; font-weight: 400; font-size: 12px; color: #6b7280; margin-top: 2px; }
.staff-pay-opt > span i { width: 18px; margin-right: 6px; color: #6F4E37; }
.staff-pay-opt input:checked + span {
    border-color: #6F4E37; background: #FBF7F0; box-shadow: inset 0 0 0 1px #6F4E37;
}
.staff-pay-opt input:focus-visible + span { outline: 2px solid #6F4E37; outline-offset: 2px; }

.staff-qr-wrap { margin-top: 12px; text-align: center; }
.staff-qr-wrap img { max-width: 240px; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border, #e5e7eb); }

/* ===========================
   SCAN-TO-ORDER QR (Dashboard)
   ===========================
   Ang QR ay dapat kayang i-scan mula sa katapat ng counter, kaya malaki-laki
   siya (200px) at puti ang likod kahit anong tema — ang kulay-abong QR ay
   pumapalya sa maraming scanner. Ang svg mula sa QRCodeGen ay walang sariling
   sukat na css, kaya dito pinipilit sa lapad ng kahon. */
.dash-qr-body {
    display: flex;
    gap: 22px;
    align-items: center;
    flex-wrap: wrap;
}
.dash-qr-code {
    flex: none;
    width: 200px;
    max-width: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px;
}
.dash-qr-code svg { width: 100%; height: auto; aspect-ratio: 1 / 1; display: block; }
.dash-qr-info { flex: 1; min-width: 220px; }
.dash-qr-hint { font-size: 13.5px; color: var(--text-dark); margin: 0 0 10px; line-height: 1.5; }
.dash-qr-link {
    display: block;
    font-size: 11.5px;
    color: #6b7280;
    word-break: break-all;
    margin-bottom: 12px;
}
.dash-qr-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── QRPh SA COUNTER — payment modal ─────────────────────────────────────
   Ang kahon na ito ay lumalabas sa GCash AT sa Maya na tab: iisang QRPh ang
   tinatanggap ng dalawa (at ng kahit anong bangko). Tingnan ang `_qrphRender`
   sa app.js. */
.qrph-box { margin-top: 14px; padding: 12px; border-radius: 12px;
    border: 1px solid var(--border, #e5e7eb); background: var(--bg-subtle, #f9fafb); }
.qrph-head { display: flex; align-items: center; justify-content: space-between;
    gap: 8px; font-weight: 600; font-size: 0.92rem; margin-bottom: 8px; }
.qrph-clock { font-variant-numeric: tabular-nums; font-weight: 700;
    color: var(--text-muted, #6b7280); }
.qrph-body { text-align: center; }
.qrph-img { margin: 4px 0 8px; }
/* 260px: kasya sa modal, at nase-scan pa rin mula sa isang dangkal ang layo.
   PUTI ang likod nang laging-laging — ang QR sa kulay abo ay QR na tumatanggi
   sa kalahati ng telepono. */
.qrph-img img { width: 100%; max-width: 260px; height: auto; border-radius: 10px;
    background: #fff; padding: 8px; border: 1px solid var(--border, #e5e7eb); }
.qrph-amt { margin: 0 0 4px; font-size: 1.05rem; }
.qrph-idle, .qrph-sub { margin: 0; font-size: 0.84rem;
    color: var(--text-muted, #6b7280); line-height: 1.45; }
.qrph-good { margin: 0 0 4px; font-size: 1.05rem; font-weight: 600; color: #16a34a; }
.qrph-bad { margin: 0; font-size: 0.88rem; color: #b91c1c; line-height: 1.45; }
/* Ang babala na luma na ang halaga ng QR. SINASADYANG hindi siya
   mapagpakumbaba — ang tahimik na bersyon nito ay sobrang singil sa kumakain. */
.qrph-warn { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px;
    font-size: 0.84rem; line-height: 1.45; text-align: left;
    color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; }
.qrph-actions { display: flex; gap: 8px; margin-top: 10px; }
.qrph-actions .btn { flex: 1; }

/* ---- Password ng bili ng tauhan + history (Staff Purchase) ---- */
.spw-passline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: #6b7280; margin: 0 0 8px; }
.spw-passline .spw-ok { color: #15803d; font-weight: 700; }
.spw-passline .spw-none { color: #b45309; font-weight: 700; }
.spw-passline button { margin-left: auto; padding: 4px 10px; font-size: 12px; }
.spw-hist { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto; }
.spw-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 8px 10px; border: 1px solid #eceff2; border-radius: 9px; background: #fafafa; font-size: 12.5px; }
.spw-row .spw-when { color: #6b7280; font-size: 11.5px; }
.spw-row .spw-amt { font-weight: 800; color: var(--primary); text-align: right; }
.spw-row .spw-items { color: #374151; grid-column: 1 / span 2; }
.spw-row .spw-pay { color: #6b7280; font-size: 11.5px; text-align: right; }
.spw-empty { color: #9ca3af; font-size: 12.5px; padding: 6px 2px; }
.spw-name { display: inline-flex; align-items: center; gap: 8px; background: #FAF7F2; border: 1px solid #D8BE8E; border-radius: 999px; padding: 6px 12px; font-weight: 700; color: #6F4E37; margin-bottom: 14px; }
.spw-field { position: relative; margin-bottom: 12px; }
.spw-field label { display: block; font-size: 12px; color: #6b7280; margin-bottom: 5px; }
.spw-field input { width: 100%; padding: 12px 44px 12px 12px; border: 1px solid #d4d4d4; border-radius: 10px; font-size: 18px; letter-spacing: .14em; }
.spw-field input:focus { outline: none; border-color: #6F4E37; box-shadow: 0 0 0 3px rgba(111, 78, 55, .15); }
.spw-eye { position: absolute; right: 8px; bottom: 6px; border: 0; background: none; color: #6b7280; padding: 8px; cursor: pointer; font-size: 14px; }
.spw-err { display: none; color: #b91c1c; font-size: 12.5px; font-weight: 700; margin: -4px 0 10px; }
.spw-err.show { display: block; }
.spw-hint { color: #6b7280; font-size: 12.5px; line-height: 1.5; }


/* ===========================
   KDS: SIKSIK NA TICKET — 2026-09-04
   ===========================
   Ang problema, sinukat at hindi hinulaan: sa 345px na haligi (tatlong haligi
   ang `.kitchen-board`), ang pangalan ng ulam ay may **61px** lang — 18% ng
   card. Kinukuha ng dalawang pill sa tabi niya ang natira, at ang salitang
   "Swap" pa lang ay 38px. Resulta: ang "Trio Fries + Cheese Dip" ay APAT na
   linya, at ang apat na linyang iyon ang halos buong taas ng ticket.

   Sinukat sa tunay na `styles.css` at tunay na Inter/Font Awesome:
       kasalukuyan .............. 325px, pangalan 61px, 4 na linya
       walang salitang "Swap" ... 275px, pangalan 99px, 2 linya   (-15%)
       + walang "Made" .......... 275px, pangalan 138px           (sahig na)
       + isang hilera ang meta .. 252px                           (-22%)
       + siksik na padding ...... 240px, pangalan 146px           (-26%)

   Pagkatapos ng "Swap", 275px na ang SAHIG — hindi na siya bumababa sa
   pag-aalis ng salita. Kaya lang bumaba pa ang huling dalawa dahil tumatanggal
   sila ng buong HILERA at ng padding, hindi ng teksto.

   ⚠️ MAY PRESYO: nawawala ang salitang "Swap" at "Made". Nananatili ang icon,
      ang bilang (`0/2`) at ang `title` tooltip. Sa barista na araw-araw
      gumagamit ay ayos; para sa bago, isang tapik ang tuklas. Kung babalik ang
      salita, ang una at tanging kailangan ay ang `.ticket-swap-lbl` — siya ang
      nag-iisang sanhi ng 4-na-linyang pangalan. */

/* SA MAKIPOT NA HALIGI LANG. Sa ibaba ng 900px ay ISANG haligi ang board
   (`.kitchen-board { grid-template-columns: 1fr }` sa 18995), kaya buong-lapad
   ang card at kasya ang salita nang hindi nagsisiksik — doon ay panatilihin
   sila. Ang pagtatago sa lahat ng lapad ay pagbabayad ng kalinawan kung saan
   walang problemang sinosolusyunan. */
@media (min-width: 901px) {
    .kitchen-ticket .ticket-swap-lbl,
    .kitchen-ticket .ticket-tick-lbl { display: none; }
    /* Icon lang siya ngayon — kailangan niyang manatiling bilog, hindi maging
       makitid na hugis-itlog kapag nawala ang teksto sa loob. */
    .kitchen-ticket .ticket-swap { padding: 5px 12px; }
}

/* Pangalan, mesa at oras sa IISANG hilera. Ang `.kitchen-ticket` ay
   `flex-direction: column`, kaya buong-lapad na hilera ang bawat anak — tatlo
   silang hilera dati para sa mga 70px na teksto. `flex-wrap` para ang mahabang
   pangalan + chip ng mesa ay bumaba nang malinis sa halip na dumikit. */
.ticket-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin: 0 0 4px;
}
/* Kanselahin ang margin na para sa hilerang mag-isa. Kung hindi, ang
   `margin-bottom` ng pangalan at ang `margin: 4px 0` ng oras ay nagdaragdag ng
   taas sa isang hilerang hindi na kailangan nila. */
.ticket-meta .ticket-customer,
.ticket-meta .ticket-elapsed { margin: 0; }

/* Ang natitirang dalawang pixel-na-tipid: ang gilid ng card at ang pagitan ng
   linya. 18px -> 14px at 7px -> 5px. Nasa dulo sila ng file para manalo sa
   `.kitchen-ticket` (3289) at `.ticket-line` (3399) — magkapareho ang
   specificity, kaya ang HULI ang nananalo. Huwag silang ilipat pataas. */
.kitchen-ticket { padding: 14px; }
.kitchen-ticket .ticket-line { padding: 5px 0; }


/* ==========================================================================
   TEMPORARILY CLOSED — kard sa Settings, modal, at ang alerto sa POS
   ==========================================================================
   Sinasadyang PULA at sinasadyang malaki. Ang buong punto ng tampok na ito ay
   hindi ito ang mapipindot nang aksidente, at hindi makakalimutang nakabukas.
   Nasa DULO ng file para manalo sa `.btn` (16350) nang walang !important. */

.closed-store-card {
    border: 1px solid #e5e0d8; border-radius: 12px; padding: 15px;
    margin: 14px 0 4px; background: #fcfbf9;
}
.closed-store-card.is-closed { border: 2px solid #dc2626; background: #fef2f2; }
.closed-store-head { display: flex; gap: 12px; align-items: flex-start; }
.closed-store-head > i { font-size: 19px; color: #8A7355; margin-top: 2px; flex: none; }
.closed-store-card.is-closed .closed-store-head > i { color: #dc2626; }
.closed-store-head strong { display: block; font-size: 14.5px; color: #1A1512; margin-bottom: 3px; }
.closed-store-card.is-closed .closed-store-head strong { color: #991b1b; letter-spacing: .3px; }
.closed-store-head span { display: block; font-size: 12.5px; color: #6b6257; line-height: 1.5; }
.closed-store-preview {
    margin: 11px 0 0; padding: 9px 12px; background: #fff; border: 1px dashed #f0b4b4;
    border-radius: 8px; font-size: 12.5px; color: #7a2828;
}
.closed-store-preview em { color: #a08a8a; font-style: normal; }
.closed-store-btn { margin-top: 13px; width: 100%; justify-content: center; }

/* Ang PULANG pindutan. Hiwalay sa `.btn-danger` para hindi magmana ng kahit
   anong pagbabago doon — ito ay hindi "delete", ito ay "isara ang tindahan". */
.closed-store-danger {
    background: #dc2626; color: #fff; border: none; font-weight: 700;
    box-shadow: 0 2px 8px rgba(220, 38, 38, .28);
}
.closed-store-danger:hover:not(:disabled) { background: #b91c1c; box-shadow: 0 5px 16px rgba(220, 38, 38, .38); }

/* ---- modal ---- */
.closed-modal {
    background: #fff; border-radius: 16px; width: min(500px, 94vw);
    max-height: 90vh; overflow-y: auto; padding: 22px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.closed-modal-top { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.closed-modal-top > i { font-size: 21px; color: #dc2626; }
.closed-modal-top.is-open > i { color: #16a34a; }
.closed-modal-top h3 { margin: 0; font-size: 18px; font-weight: 700; color: #1A1512; }
.closed-modal-lead { font-size: 13.5px; color: #5c5449; line-height: 1.6; margin: 0 0 18px; }
.closed-modal-label { font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: #8A7355; margin: 0 0 9px; }
.closed-modal-label span { text-transform: none; letter-spacing: 0; font-weight: 400; }
.closed-msg-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.closed-msg-opt {
    display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
    border: 1px solid #e5e0d8; border-radius: 10px; padding: 11px 13px; background: #fff;
}
.closed-msg-opt:hover { border-color: #C2A06A; background: #fdfbf7; }
.closed-msg-opt input { margin-top: 3px; flex: none; accent-color: #6F4E37; }
.closed-msg-opt:has(input:checked) { border-color: #6F4E37; background: #f8f4ee; box-shadow: inset 0 0 0 1px #6F4E37; }
.closed-msg-opt strong { display: block; font-size: 13.5px; color: #1A1512; margin-bottom: 2px; }
.closed-msg-opt em { display: block; font-size: 12px; color: #8A7355; font-style: normal; line-height: 1.45; }
.closed-modal-btns { display: flex; gap: 10px; margin-top: 20px; }
.closed-modal-btns .btn { flex: 1; justify-content: center; min-height: 44px; }

/* ---- ang alerto sa POS ---- */
.closed-badge {
    position: fixed; top: 14px; right: 14px; z-index: 9998;
    display: flex; align-items: center; gap: 11px;
    max-width: min(370px, calc(100vw - 28px));
    background: #dc2626; color: #fff; border-radius: 12px;
    padding: 11px 12px 11px 14px;
    box-shadow: 0 8px 26px rgba(220, 38, 38, .4);
    animation: closedBadgeIn .28s ease-out;
}
@keyframes closedBadgeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.closed-badge-ico { font-size: 17px; flex: none; }
.closed-badge-txt strong { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .4px; line-height: 1.35; }
.closed-badge-txt span { display: block; font-size: 11px; opacity: .9; margin-top: 3px; }
.closed-badge-x, .closed-badge-mini {
    background: rgba(255, 255, 255, .18); border: none; color: #fff; cursor: pointer;
    border-radius: 8px; width: 30px; height: 30px; flex: none;
    display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.closed-badge-x:hover, .closed-badge-mini:hover { background: rgba(255, 255, 255, .32); }
/* Nakatago = isang bilog na icon. Nananatiling PULA at nananatiling nakikita —
   ang tuluyang pagkawala ay ang mismong problemang inaayos nito. */
.closed-badge.is-mini {
    background: none; box-shadow: none; padding: 0; gap: 0;
    top: 14px; right: 14px;
}
.closed-badge-mini {
    width: 42px; height: 42px; border-radius: 50%; font-size: 16px;
    background: #dc2626; box-shadow: 0 5px 18px rgba(220, 38, 38, .45);
}
.closed-badge-mini:hover { background: #b91c1c; }
@media print { .closed-badge { display: none !important; } }
@media (max-width: 640px) {
    .closed-badge { top: auto; bottom: 14px; right: 10px; left: 10px; max-width: none; }
    .closed-badge.is-mini { left: auto; bottom: 14px; }
}

/* ============================================================================
   KDS TICKET -- ANG V2 MULA SA MOCKUP, 1:1 (2026-09-07)

   Ito ang eksaktong disenyong pinili ng may-ari sa `_kds-card-designs.html`,
   ibinalik matapos ang isang buong pag-revert. Bawat halaga rito ay kopya
   mula roon -- HUWAG silang "pagandahin". Anim na pasada ang nasayang dati sa
   paggalaw ng mga bagay na hindi hiningi:
     pinaliit ang QUE pill -> ibinalik
     ginawang pula ang uri -> ibinalik sa kulay ng bawat uri
     tinanggal ang guhit sa kaliwa -> ibinalik
     binilugan ang pindutan -> ibinalik sa dikit-sa-gilid
   Kung may mukhang mali rito, ITANONG -- huwag baguhin.

   Ang markup ay nasa `renderKitchenTicket` sa app.js. Ang `.ticket-mods` ay
   KAPATID ng `.ticket-item` doon (hindi na anak ng `.ti-main`) -- kung
   ibabalik siya sa loob, babalik din ang tatlong-linyang salansan ng chips.
   ============================================================================ */

/* min-width:0 -- ang grid item ay may min-width:auto na default, kaya hindi
   siya lumiliit kaysa sa min-content ng laman niya. Isang mahabang chip ang
   sapat para itulak ang pahina palabas ng screen sa telepono. */
.kitchen-lane { min-width: 0; }

/* 12px na radius, hindi 14px -- ito ang nasa mockup. Ang 14px sa ibabaw ng
   5px na guhit ay gumagawa ng mas malaking kurbadang wedge sa sulok. */
.kitchen-ticket {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 12px;
    /* Sariling layer: isang beses lang iginuguhit ang bilog na clip, kaya
       hindi na kumukurap ang ilalim habang nagsa-scroll (tingnan ang tala
       sa `.ticket-actions` sa ibaba). */
    transform: translateZ(0);
}

/* ---- ULO: isang hilera ang lima ---- */
.ticket-header {
    gap: 8px;
    margin-bottom: 0;
    padding: 7px 11px;
    background: #FAFBFC;
    border-bottom: 1px solid #EEF0F3;
    /* NOWRAP: nagwawrap ang flexbox BAGO mag-shrink, kaya bumababa ang uri sa
       ikalawang hilera kahit limang pixel lang ang kulang. Dito, ang PANGALAN
       ng kumakain ang lumiliit -- may ellipsis siya -- hindi ang numero. */
    flex-wrap: nowrap;
}
.ticket-header .ticket-qno { font-size: 14px; padding: 2px 9px; }
/* `flex-shrink: 100`, hindi 1 (2026-09-08). Ang `.ticket-meta` at ang
   `.ticket-type` ay PAREHONG `0 1 auto` noon, kaya PROPORSYONAL silang
   lumiliit kapag makipot ang ulo -- at ang `DINE IN` ay nahahati sa
   DALAWANG linya (`DINE` / `IN`) samantalang ang `Hanna Bia...` ay may
   malaking puwang pang maibibigay. Mali ang pagkakasunod: ang pangalan ang
   may `text-overflow: ellipsis` -- MAAYOS siyang naiiksian -- samantalang
   ang uri ay nawawasak lang.
   Sa `100`, ang pangalan ang UBOS MUNA bago pa mahawakan ang uri. Ang
   `min-width: min-content` sa `.ticket-type` ang natitirang sahig: ang
   mahabang label ng MESA ay nagwawrap pa rin sa loob ng pill, at ang
   iisang salitang `DELIVERY` ay hindi kayang pababain nang wala nang
   mapuputol. Tingnan ang mahabang tala sa `.ticket-type` sa ibaba. */
.ticket-meta {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 7px;
    margin: 0;
    min-width: 0;
    flex: 0 100 auto;
    overflow: hidden;
}
/* Ang pangalan ang naaputol, HINDI ang oras: nasa resibo ang pangalan, pero
   ang "12m" lang ang babala na lumalamig na ang order. */
.ticket-customer {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-size: 11.5px;
}
.ticket-meta .ticket-elapsed { flex: none; margin: 0; font-size: 11.5px; }

/* ---- URI: kulay ng bawat uri, uppercase ----
   HINDI PULA. Ang pula ay may iisang kahulugan sa tiket -- HILING -- at ang
   uri ay hindi hiling: siya ay kung SAAN pupunta. Berde = dine in,
   kahel = takeout, lila = delivery, gaya sa POS at sa inbox card.

   🔴 `min-width: min-content`, HINDI `0`. Ito ang isang halagang HINDI galing
   sa mockup -- may sirang dala ang `0` na hindi makikita sa 1440px, at
   DALAWANG maling sagot ang sinukat bago ito:

     `min-width: 0`   -- sa 390px na telepono ay ibinabalik ng V2 ang 5px na
       kulay na guhit sa kaliwa (0.8px lang siya sa naunang estado), kaya 4px
       ang nabawas sa ulo: 282px -> 278px. Pinapayagan nito ang pill mismo na
       LUMIIT: 93px -> 83px, at ang salitang `DELIVERY` -- IISANG salita, kaya
       walang mahahati ang `white-space: normal` -- ay naputol sa `DELIVER`.
       (`scrollWidth` 289 laban sa `clientWidth` 278. Walang error, at buo pa
       rin ang teksto sa DOM -- kaya tahimik siya.)
     `flex: 0 0 auto` -- hindi na naputol ang `DELIVERY`, pero ang mahabang
       label ng mesa (`Table 12 · Second Floor Terrace`) ay kinuha ang buong
       max-content niya at LUMAMPAS na sa ulo. Sinukat: `headClipped: true`.

   Ang `min-content` ang tanging tama sa dalawang dulo: lumiliit siya hanggang
   sa PINAKAMAHABANG SALITA lang. Ang label ng mesa ay nagwawrap sa LOOB ng
   pill -- lumalaki siya pababa, hindi ang ulo -- samantalang ang `DELIVERY`
   ay hindi kayang pababain nang wala nang mapuputol.
   Ang `.ticket-meta` ang nagbabayad ng puwang, at IYON ANG TAMA: may
   `text-overflow: ellipsis` ang pangalan ng kumakain, kaya maayos siyang
   naiiksian samantalang ang uri ay naguguluhan lang. */
.ticket-type {
    margin-left: auto;
    flex: 0 0 auto;
    max-width: 46%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 5px 11px;
}
.ticket-type i { font-size: 13px; }
/* SOLID NA KULAY + PUTING TEKSTO (2026-09-11, hiling ng may-ari: "ang
   pangit" ang pula-sa-pastel noong 09-08). Ang "saan pupunta" ay nasa KULAY
   pa rin — berde/kahel/lila, mas matingkad pa ngayon — at ang puting teksto
   ay malinaw sa lahat ng tatlo. Ang mga selector dito ay tumatalo sa mga
   pastel sa ~3471 dahil huli sila sa file, kaparehong dahilan ng pinalitang
   pulang bloke. */
.ticket-type--dinein   { background: #16A34A; color: #fff; }
.ticket-type--takeout  { background: #EA580C; color: #fff; }
.ticket-type--delivery { background: #7C3AED; color: #fff; }
.ticket-type--dinein i,
.ticket-type--takeout i,
.ticket-type--delivery i { color: #fff; opacity: .9; }

/* ---- MGA HILERA ---- */
.ticket-items { border-top: none; padding: 0; margin: 0; }
/* `.kitchen-ticket .ticket-line` ANG KAILANGAN, hindi `.ticket-line`: may
   `.kitchen-ticket .ticket-line { padding: 5px 0 }` sa ~22554 na 0,2,0 ang
   specificity -- tinatalo niya ang 0,1,0 KAHIT mas huli ako sa file. Bunga:
   0px na padding, at ang `2x` at ang `0/2` ay dumidikit sa gilid ng card.

   🔴 COLUMN, HINDI ROW -- AT ITO ANG SIRANG IPINAKITA NG MAY-ARI (2026-09-07).
   Tatlo ang anak ng `.ticket-line` sa markup at MAGKAKAPATID sila:
       .ticket-item  ·  .ticket-swapped  ·  .ticket-breakdown
   Sa `row`, TUMATABI ang breakdown sa item imbes na bumaba sa ilalim niya.
   Sinukat sa browser: 309px na card -> 162px ang item, 137px ang breakdown,
   at ang pangalang "Chicken Adobo" ay 35px ang lapad at 97px ang TAAS --
   apat na linyang "Chic / ken / Ado / bo". (Ang `overflow-wrap: anywhere` sa
   `.ticket-item-name` ang pumuputol; hindi siya ang may sala -- siya ang
   nagpapakita lang ng kulang na lapad.)

   KUSINA LANG SIYA NAKIKITA, at iyon ang dahilan kung bakit siya nabuhay:
   ang `.ticket-breakdown` ay lumalabas lang kapag HINDI `isSelf` ang item --
   kapag may prep components siya. Walang breakdown ang inumin, kaya MALINIS
   ang Bar Display at wala siya sa alinmang screenshot na pinagbasehan ng
   disenyo. Huwag ibalik sa `row`.

   `align-items: stretch` ang kasama nito. Sa `flex-start`, lumiliit ang
   `.ticket-item` sa lapad ng laman niya at hindi na dumidikit sa kanan ang
   `0/2` -- kalahating card lang ang hilera. */
.kitchen-ticket .ticket-line {
    padding: 6px 11px;
    border-bottom: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}
.ticket-line:nth-child(even) { background: #FCFCFD; }
.ticket-line + .ticket-line { border-top: 1px solid #E3E8EF; }

/* `nowrap` -- ito ang nagpapanatili sa `1x`, sa pangalan at sa `0/1` sa
   IISANG hilera. Ang bumabagsak na `0/1` ay hindi masabi kung kanino siya.
   ITO ang tunay na hilera ngayon; ang `.ticket-line` ay ang salansan. */
.ticket-item {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 7px;
    font-size: 15px;
    width: 100%;
    min-width: 0;
}
.ticket-qty { min-width: 24px; font-size: 14px; line-height: 1.5; }
.ti-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 6px;
    flex: 1 1 auto;
    min-width: 0;
}
/* Kung wala ang min-width:0, ang mahabang pangalan ang nagtutulak sa
   `Made 0/12` PALABAS ng card -- `nowrap` kasi ang hilera sa itaas. */
.ti-main .ticket-item-name { min-width: 0; overflow-wrap: anywhere; }

/* BUONG-LAPAD NA SARILING HILERA (2026-09-07, pinili ng may-ari mula sa
   mockup). Kapatid na ng `.ticket-item` ang `.ticket-mods` sa markup -- kaya
   `.kitchen-ticket .ticket-mods` ang tumatama ngayon, HINDI `.ti-main ...`.

   Ang lumang `flex: 1 1 240px` sa loob ng `.ti-main` ay may isang problemang
   hindi nakikita sa mockup: ang hanay ng PANGALAN ang lapad ng chips doon --
   158px lang sa 309px na lane -- kaya ang tatlong chip ng isang latte
   (`22 oz` · `Extra Sweet` · `+ 1x Extra Espresso`) ay NAGSASALANSAN nang
   tig-iisang linya: 78px na taas, sinukat sa browser. Bilang sariling hilera
   sila ay 281px at 51px na lang, at nagsisimula sila sa GILID -- kahanay ng
   `1x`, hindi ng pangalan. Iyon ang nasa disenyo.

   `margin-left: 0` ang mahalaga rito: `32px` ang base sa ~8307, at iyon ang
   magtutulak sa kanila pabalik sa hanay ng pangalan. 0,2,0 ang specificity
   nito laban sa 0,1,0 ng base, kaya panalo siya kahit saan sa file. */
.kitchen-ticket .ticket-mods { margin: 3px 0 0 0; gap: 4px; min-width: 0; }
.ticket-item-modifiers { overflow-wrap: anywhere; }

/* Naka-pako sa kanan ng UNANG hilera. Puro bilang ang pindutan (`0/1`):
   297px lang ang lane, at ang salitang "Made" ay walang sinasabing hindi na
   sinasabi ng bilang. Buo pa rin ang aria-label -- "Done: 0 of 1." */
.ticket-swap, .ticket-tick { flex: none; margin-left: 0; }
.ticket-tick {
    padding: 0;
    width: 44px;
    height: 26px;
    justify-content: center;
    font-size: 12px;
}
.ticket-tick i, .ticket-tick-lbl { display: none; }
.ticket-swap { width: 26px; height: 26px; font-size: 11px; }

/* ---- ILALIM: dumidikit sa gilid ----
   Ang buong-lapad na pindutan ang PINAKAMALAKING TAP TARGET sa board:
   hinahampas siya ng barista na basa ang kamay nang hindi tumitingin. */
.ticket-otherstation {
    padding: 5px 11px;
    margin: 0;
    border-top: 1px solid #EEF0F3;
    background: #FAFBFC;
    font-size: 11.5px;
}
.ticket-notes { margin: 0; border-radius: 0; font-size: 11.5px; padding: 6px 11px; }
.ticket-paid { margin: 0; border-radius: 0; font-size: 11.5px; padding: 6px 11px; }
/* 31px = 24px na `.ticket-qty` + 7px na gap. Nakahanay sila sa ILALIM NG
   PANGALAN, hindi sa ilalim ng bilang -- kapareho ng layunin ng lumang 38px
   noong 30px pa ang qty. Sarili na nilang hilera sila ngayon (column ang
   `.ticket-line`), kaya ang indent lang ang nagsasabi kung kanino sila. */
.ticket-swapped { margin-left: 31px; padding-left: 0; }
.ticket-breakdown { padding: 2px 0 0 31px; }
/* ---- NAKADIKIT ANG PINDUTAN SA KARD (2026-09-11) ----
   Ulat ng may-ari: "parang humihiwalay ang button kapag nag-scroll."
   DALAWANG sanhi, iisang lunas:
     1. 12px na bilog ang sulok ng kard at PARISUKAT ang pindutan, kaya may
        puting singit sa dalawang ilalim na sulok -- mukhang nakapatong lang
        siya, hindi bahagi ng kard.
     2. Ang bilog na `overflow: hidden` ay muling ini-rasterize ng browser
        habang gumagalaw ang scroll, kaya kumukurap ang gilid na iyon.
   Ang action bar na mismo ang may bilog na ilalim (hindi na umaasa sa clip
   ng magulang), at binibigyan ng sariling layer ang kard (`translateZ(0)`)
   kaya isang beses lang iginuguhit ang sulok -- tahimik na siya sa scroll. */
.ticket-actions {
    margin: 0;
    padding: 0;
    gap: 1px;
    /* PANLOOB na radius, hindi 11px sa dalawa: 12px ang sulok ng kard, at
       ang gilid ay 5px sa KALIWA (ang kulay ng istasyon) at 1px sa kanan --
       kaya 7px at 11px. Kapag pareho silang 11px, may puting singit sa
       kaliwang sulok kung saan hindi tugma ang dalawang kurba. */
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 11px;
    overflow: hidden;
}
.ticket-actions .ticket-btn,
.ticket-actions .btn {
    border-radius: 0;
    padding: 10px;
    font-size: 13.5px;
}

/* ---- PULA: DALAWANG BIGAT NGAYON, HINDI PULA-LABAN-SA-TAHIMIK ----
   Hiling ng may-ari (2026-09-08) matapos makita ang tiket sa TUNAY na
   tindahan: PULA ANG TEKSTO NG LAHAT NG CHIP, pati ang `16 oz` at ang
   `Normal` na tahimik dati.

   Nananatili ang panghati, nasa BIGAT na lang siya at wala na sa presensya
   ng pula -- at ito ang buong dahilan kung bakit hindi lahat ay ginawang
   solid:
     MAPUSYAW na likod + PULANG teksto  = ari-arian ng inumin
                                          (`16 oz`, `Normal`, `Fried Liempo`)
     SOLID na pula + PUTING teksto      = HILING na dapat GAWIN
                                          (`Less Sweet`, `Extra Sweet`,
                                           at ang mga `Extra ___` na add-on)
   Kung solid din ang una, mawawala ang pangalawa -- naitala na ang bitag na
   iyon noong 2026-09-07 ("sumosobra sobra", PADER NG PULA).

   Ang arrow na marka ay idinadagdag sa app.js -- siya ang humahalili sa
   nawawalang asul-laban-sa-amber, at gumagana siya sa color blindness at sa
   TV sa malayo. */
.ticket-item-modifiers { color: #B91C1C; }
/* Ang tatlong HILING: solid pa rin, at PUTI ang teksto. Nakasulat sila
   PAGKATAPOS ng patakaran sa itaas -- kung mauuna sila, ang `#B91C1C` ang
   tatama sa kanila at mawawala ang puti sa ibabaw ng pula. */
.ticket-item-modifiers.tm-less,
.ticket-item-modifiers.tm-sweet,
.ticket-item-modifiers.tm-extra {
    background: #DC2626;
    color: #FFF;
    font-weight: 800;
}
/* `Normal` -- abong likod pa rin (siya ang default, hindi siya hiling),
   pero pula na rin ang teksto gaya ng iba pang chip. */
.ticket-item-modifiers.tm-normal { background: #E9E9EC; color: #B91C1C; }

/* Sa telepono ay isang pixel lang ang naibabawas sa gilid. Walang
   `.ti-main .ticket-mods` dito: sariling buong-lapad na hilera na ang chips
   sa BAWAT lapad, kaya wala nang ibabagsak ang telepono. */
@media (max-width: 520px) {
    .ticket-header { padding: 7px 10px; }
    .kitchen-ticket .ticket-line { padding: 6px 10px; }
    .ticket-otherstation { padding: 5px 10px; }
}

/* ==========================================================================
   PAGBABALIK-BALIK NG KUMAKAIN — Customers Hub + Customer view  (2026-09-12)
   Hiling ng may-ari: makita agad kung sino ang pinakasuki, at ayusin ang
   hitsura kapag tinitingnan ang isang tao. Lahat ng numero ay hinuhugot sa
   `appData.orders` sa render (docs/20) — walang bagong naka-imbak na state.
   ========================================================================== */

/* --- talahanayan --------------------------------------------------------- */
.cust-name { font-weight: 600; color: var(--text-dark); }

.cust-sub {
    font-size: 11.5px;
    color: var(--text-light);
    margin-top: 2px;
}

.cust-muted { color: #9a9a9a; }

.cust-num { white-space: nowrap; }

/* Ang tatak ng estado. Maliit sana — katabi siya ng pangalan at hindi siya
   dapat mas malakas tingnan kaysa sa pangalan mismo. */
.cust-chip {
    display: inline-block;
    margin-top: 3px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cust-chip.is-new      { background: rgba(37, 99, 235, 0.10); color: var(--info); }
.cust-chip.is-active   { background: rgba(22, 163, 74, 0.12); color: var(--success); }
.cust-chip.is-slipping { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.cust-chip.is-lapsed   { background: rgba(92, 92, 92, 0.12);  color: var(--text-light); }

.hub-stat-sub {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
    margin-left: 2px;
}

/* --- ang tinitingnang tao ------------------------------------------------ */
.cust-view {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cust-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cust-avatar {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
}

.cust-head-info { min-width: 0; }

.cust-head-name {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
}

.cust-head-name .cust-chip { margin-top: 0; }

.cust-head-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--text-light);
}

.cust-head-meta i { margin-right: 4px; opacity: .7; }

/* Apat na numero bilang 2x2. Ang `auto-fit` ay nagbibigay ng TATLO sa
   lapad ng modal (~470px), kaya naiiwang nakabitin mag-isa ang ikaapat sa
   susunod na hanay. Hindi puwedeng media query ang lunas: ang sinusukat
   niya ay ang viewport, hindi ang modal -- sa malaking screen ay apat pa
   rin siyang magkakasiksik sa loob ng parehong makitid na kahon. */
.cust-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.cust-stat {
    background: var(--surface);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cust-stat--accent {
    background: var(--primary-light);
    box-shadow: inset 0 0 0 1px rgba(111, 78, 55, 0.14);
}

.cust-stat-value {
    font-size: 19px;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.2;
}

.cust-stat-label {
    font-size: 11.5px;
    color: var(--text-light);
    line-height: 1.3;
}

/* Una at huling bisita, magkatabi — ang agwat nila ang buong kwento. */
.cust-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    flex-wrap: wrap;
}

.cust-strip-item { display: flex; flex-direction: column; gap: 2px; }

.cust-strip-label {
    font-size: 11px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.cust-strip-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
}

.cust-strip-ago {
    font-weight: 500;
    font-size: 12px;
    color: var(--text-light);
    margin-left: 6px;
}

.cust-strip-arrow { color: #c9c9c9; font-size: 12px; }

.cust-section-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 10px 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
}

.cust-section-title span {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-light);
}

.cust-empty {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-light);
}

/* Anim na buwan bilang anim na haligi. Hindi chart library — anim na div. */
.cust-spark {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 96px;
}

.cust-spark-col {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 4px;
}

.cust-spark-bar {
    width: 100%;
    max-width: 34px;
    background: var(--primary);
    border-radius: 5px 5px 2px 2px;
    min-height: 3px;
    transition: height .18s ease;
}

/* Ang buwang walang order ay guhit pa rin — ang PUWANG ang sinasabi niya. */
.cust-spark-bar.is-zero { background: var(--border); }

.cust-spark-n {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dark);
    min-height: 13px;
}

.cust-spark-m {
    font-size: 10.5px;
    color: var(--text-light);
}

/* "The usual?" */
.cust-usual { display: flex; flex-direction: column; gap: 6px; }

.cust-usual-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--surface);
    border-radius: 8px;
}

.cust-usual-rank {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    font-size: 10.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cust-usual-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cust-usual-qty {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
}

/* Buong kasaysayan — may sariling scroll para hindi lumaki nang walang
   hanggan ang modal sa isang taong 60 na ang order. */
.cust-orders {
    display: flex;
    flex-direction: column;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
}

.cust-order {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
}

.cust-order:last-child { border-bottom: 0; }

.cust-order-main { min-width: 0; }

.cust-order-date {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
}

.cust-order-meta {
    display: block;
    font-size: 11.5px;
    color: var(--text-light);
    text-transform: capitalize;
}

.cust-order-right { text-align: right; white-space: nowrap; }

.cust-order-total {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-dark);
}

.cust-order-status {
    display: block;
    font-size: 11px;
    color: var(--text-light);
    text-transform: capitalize;
}

@media (max-width: 520px) {
    .cust-strip { gap: 10px; }
    .cust-strip-arrow { display: none; }
    .cust-spark { height: 84px; }
}

/* ============================================================================
   SUB-TABS (2026-10-03) — hiling ng may-ari: "dapat may subtabs para arranged
   mga items, hindi sabog". Iisang hitsura para sa Settings → General,
   Settings → Online Ordering, Settings → Payroll at sa Edit Menu Item —
   kapareho ng pill row ng Options & Sizes (`optmgr-tabs`).
   Ang JS ay nasa app.js: `subTabsHtml()` / `selectSubTab()` / `revealSubTab()`.
   ============================================================================ */
.sub-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 10px 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eceef1;
}
.sub-tabs .sub-tab {
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    width: auto;
    white-space: nowrap;
    box-shadow: none;
}
.sub-tabs .sub-tab:hover { border-color: #c9b8a6; }
.sub-tabs .sub-tab[aria-selected="true"] {
    border-color: #6F4E37;
    background: #6F4E37;
    color: #fff;
}
.sub-tabs .sub-tab:focus-visible { outline: 2px solid #6F4E37; outline-offset: 2px; }
.sub-tabs .sub-tab i { margin-right: 5px; opacity: .85; }
/* `hidden` ay natatalo ng kahit anong `display:` na rule — kaya tahasan. */
.sub-tab-pane[hidden] { display: none !important; }
/* Ang huling grupo sa bawat pane ng Payroll ay walang guhit sa ilalim. */
.sub-tab-pane > .pay-cfg-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
/* Ang unang section sa pane ay hindi na kailangan ng 30px na puwang sa itaas —
   ang tab row na mismo ang naghihiwalay. */
.sub-tab-pane > .settings-section:first-child,
.sub-tab-pane > .module-header:first-child { margin-top: 4px !important; }