:root {
    /* Color Palette - Archi Brand Dark Theme */
    --bg-base: #37231A;
    --bg-panel: rgba(55, 35, 26, 0.78);
    --bg-glass: rgba(55, 35, 26, 0.5);
    
    --primary: #A74625;
    --primary-hover: #87351d;
    --primary-glow: rgba(167, 70, 37, 0.36);
    
    --secondary: #D3B89D;
    
    --accent: #E9D1B7;
    --accent-hover: #D3B89D;
    
    --danger: #ef4444; /* Red 500 */
    --warning: #f59e0b; /* Amber 500 */
    
    --text-primary: #f8fafc; /* Slate 50 */
    --text-secondary: #94a3b8; /* Slate 400 */

    --text-muted: #64748b; /* Slate 500 */
    
    --border-color: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.15);
    
    /* Layout */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 76px;
    --cart-width: clamp(400px, 35vw, 550px);
    --topbar-height: 70px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 9999px;
    
    /* Typography */
    --font-main: 'Outfit', sans-serif;
    
    /* Transitions */
    --trans-fast: 0.15s ease;
    --trans-normal: 0.3s ease;
    
    /* Shadows */
    --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 20px var(--primary-glow);
}

/* Light Mode Overrides */
body.light-mode {
    --bg-base: #f7f2ec;
    --bg-panel: rgba(255, 252, 248, 0.92);
    --bg-glass: rgba(233, 209, 183, 0.36);
    
    --primary: #A74625;
    --primary-hover: #87351d;
    --primary-glow: rgba(167, 70, 37, 0.24);
    
    --secondary: #E9D1B7;
    --accent: #85705F;
    --accent-hover: #6d594a;
    
    --text-primary: #37231A;
    --text-secondary: #85705F;
    --text-muted: #9b897a;

    /* Amber 500 (#f59e0b) terlalu muda di atas latar terang → teks peringatan
       sulit terbaca. Pakai amber lebih gelap (Amber 700) khusus tema terang;
       tetap aman sebagai warna isi/garis dengan teks putih. */
    --warning: #b45309;

    --border-color: rgba(55, 35, 26, 0.12);
    --border-hover: rgba(167, 70, 37, 0.32);
    
    --shadow-glass: 0 14px 34px rgba(55, 35, 26, 0.10);
}

body.light-mode {
    background: linear-gradient(135deg, #fffaf4 0%, #f4e6d7 50%, #D3B89D 100%);
}

/* Light Mode Specific Styles */
body.light-mode .menu-card {
    background: rgba(255, 252, 248, 0.9);
    border: 1px solid rgba(55, 35, 26, 0.12);
}

body.light-mode .menu-card:hover {
    border-color: var(--primary);
    box-shadow: 0 10px 25px rgba(167, 70, 37, 0.18);
}

body.light-mode .menu-img-container {
    background: rgba(233, 209, 183, 0.34);
}

body.light-mode .menu-img-actual,
body.light-mode .menu-img {
    background: rgba(255, 255, 255, 0.5);
}

body.light-mode .menu-add-btn {
    background: var(--primary);
    box-shadow: 0 4px 12px rgba(167, 70, 37, 0.22);
}

body.light-mode .menu-add-btn:hover {
    background: var(--primary-hover);
}

body.light-mode .type-btn {
    background: rgba(255, 252, 248, 0.78);
    border: 1px solid rgba(55, 35, 26, 0.12);
    color: var(--text-primary);
}

body.light-mode .type-btn.active {
    background: rgba(233, 209, 183, 0.62);
    color: var(--primary);
    border-color: var(--primary);
}

body.light-mode .cart-item {
    background: rgba(255, 252, 248, 0.84);
    border: 1px solid rgba(55, 35, 26, 0.12);
}

body.light-mode .qty-btn {
    background: rgba(211, 184, 157, 0.36);
    color: var(--text-primary);
}

body.light-mode .qty-btn:hover {
    background: rgba(167, 70, 37, 0.14);
}

body.light-mode .pay-btn {
    background: rgba(255, 252, 248, 0.84);
    border: 1px solid rgba(55, 35, 26, 0.12);
    color: var(--text-primary);
}

body.light-mode .payment-option input:checked + .pay-btn {
    background: rgba(233, 209, 183, 0.62);
    border-color: var(--accent);
    color: var(--accent);
}

body.light-mode .input-group input, 
body.light-mode .input-group select, 
body.light-mode .glass-input,
body.light-mode textarea {
    background: rgba(255, 252, 248, 0.9);
    color: var(--text-primary);
    border: 1px solid rgba(55, 35, 26, 0.14);
}

body.light-mode .input-group input:focus, 
body.light-mode .glass-input:focus {
    background: rgba(255, 252, 248, 0.98);
    border-color: var(--primary);
}

body.light-mode .input-group i {
    color: var(--text-secondary);
}

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

body {
    font-family: var(--font-main);
    background-color: var(--bg-base);
    color: var(--text-primary);
    overflow: hidden; /* Prevent body scroll, handle internally */
    position: relative;
    height: 100vh;
    width: 100%;
    overflow-x: hidden;
}

/* Base Glassmorphism utility */
.glass-panel {
    background: var(--bg-panel);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-glass);
}

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

/* ==========================================================================
   SCREENS & VIEWS
   ========================================================================== */
.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none; /* hidden by default */
    opacity: 0;
    transition: opacity var(--trans-normal);
}
.screen.view-active {
    display: flex;
    opacity: 1;
}

/* ==========================================================================
   LOGIN SCREEN
   ========================================================================== */
#login-screen {
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at 10% 20%, rgb(14, 21, 38) 0%, rgb(6, 10, 19) 90%);
    padding: 20px;
}

.login-container {
    width: 100%;
    max-width: 360px;
    padding: 35px 30px;
    border-radius: var(--radius-lg);
    z-index: 10;
    position: relative;
}

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

.login-header .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 48px;
    color: var(--primary);
    margin-bottom: 15px; /* Increased margin for better spacing */
    filter: drop-shadow(0 0 10px var(--primary-glow));
}

.login-header h2 {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 1px;
}

.login-header p {
    color: var(--text-secondary);
    font-size: 14px;
}

.input-group {
    position: relative;
    margin-bottom: 20px;
}

.input-group i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    transition: color var(--trans-fast);
}

.input-group input, .input-group select, .glass-input {
    width: 100%;
    padding: 14px 16px 14px 45px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 15px;
    outline: none;
    transition: all var(--trans-fast);
}

.input-group input:focus, .input-group select:focus, .glass-input:focus {
    border-color: var(--primary);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 4px var(--primary-glow);
}

.input-group input:focus + i, .input-group input:focus ~ i {
    color: var(--primary);
}

/* Prevent mobile browser auto-zoom on login form fields */
#login-screen .input-group input {
    font-size: 16px;
}

.btn-primary {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-main);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: all var(--trans-normal);
    position: relative;
    overflow: hidden;
}


.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

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

.error-text {
    color: var(--danger);
    font-size: 14px;
    text-align: center;
    margin-top: 5px;
    font-size: 11px;
}

/* Switch Toggle UI */
.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.1);
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: rgb(37, 0, 172);
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--primary);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--primary);
}

input:checked + .slider:before {
  transform: translateX(20px);
  background-color: #ffffff;
}

.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 50%;
}


/* Background Bloops */
.bloop {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 1;
    opacity: 0.5;
}
.bloop-1 {
    width: 300px;
    height: 300px;
    background: var(--primary);
    top: -100px;
    left: -100px;
    animation: drift 10s infinite alternate ease-in-out;
}
.bloop-2 {
    width: 400px;
    height: 400px;
    background: var(--secondary);
    bottom: -150px;
    right: -100px;
    animation: drift 12s infinite alternate-reverse ease-in-out;
}
.bloop-3 {
    width: 250px;
    height: 250px;
    background: var(--accent);
    top: 40%;
    left: 60%;
    animation: drift 15s infinite alternate ease-in-out;
}

@keyframes drift {
    100% { transform: translate(50px, 50px); }
}

/* ==========================================================================
   APP MAIN SCREEN LAYOUT
   ========================================================================== */
#app-screen {
    display: none;
    flex-direction: row;
}
#app-screen.view-active {
    display: flex;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    border-top: none;
    border-bottom: none;
    border-left: none;
    overflow: hidden;
    transition: width var(--trans-normal);
}

.sidebar-logo {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 0 24px;
    font-size: 24px;
    font-weight: 700;
    gap: 12px;
    color: var(--primary);
    border-bottom: 1px solid var(--border-color);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.sidebar-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brand-logo-img {
    width: 34px;
    height: 34px;
    display: block;
    object-fit: contain;
    flex: 0 0 auto;
}

.sidebar-collapse-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--trans-fast), border-color var(--trans-fast), color var(--trans-fast);
}

.sidebar-collapse-btn:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--border-hover);
    color: var(--text-primary);
}

.sidebar-nav {
    flex: 1;
    padding: 18px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nav-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nav-group + .nav-group {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.nav-group-title {
    padding: 0 20px 2px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: uppercase;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: all var(--trans-fast);
    cursor: pointer;
    border: 1px solid transparent;
    position: relative;
}

.nav-item i {
    width: 20px;
    flex: 0 0 20px;
    text-align: center;
}

.nav-item span:not(.badge) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-item:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.nav-item.active {
    color: white;
    background: var(--primary);
    border-color: var(--border-hover);
    box-shadow: inset 0 0 20px var(--primary-glow);
}

.sidebar-footer {
    padding: 20px 16px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.sidebar-footer .nav-item {
    width: 100%;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 6px 8px;
    /* Reset karena kini sebuah <button> */
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 14px;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.user-info:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--border-color);
}

.user-info .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    flex-shrink: 0;
}

.user-details {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

#user-name {
    font-weight: 500;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#user-role {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: capitalize;
    text-align: left;
}

/* Popup info akun — muncul DI ATAS tombol user-info.
   position: fixed agar tidak terpotong oleh .sidebar (overflow:hidden);
   koordinat left/bottom diset via JS dari posisi tombol. */
.user-popover {
    position: fixed;
    min-width: 200px;
    max-width: 280px;
    background: var(--bg-panel, var(--surface, #1e293b));
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 12px 14px;
    z-index: 2500;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    animation: userPopoverIn 0.16s ease;
}

/* Baris info akun (avatar + nama/peran) di dalam popover */
.user-popover-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Tombol "Ganti Kasir" di dalam popover */
.user-popover-action {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 11px;
    border-radius: 10px;
    border: 1px solid rgba(47,159,201,0.22);
    background: rgba(47,159,201,0.10);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.user-popover-action:hover { background: rgba(47,159,201,0.18); border-color: var(--primary); }
.user-popover-action[hidden] { display: none; }
.user-popover-action > i { color: var(--primary); }
.user-popover-action strong { color: var(--primary); font-weight: 600; }

/* Pastikan atribut [hidden] tetap menyembunyikan (kalahkan display:flex di atas) */
.user-popover[hidden] {
    display: none;
}

/* Ekor segitiga kecil menunjuk ke bawah (ke arah avatar) */
.user-popover::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 24px;
    border: 7px solid transparent;
    border-top-color: var(--border-color);
}

@keyframes userPopoverIn {
    from { opacity: 0; transform: translateY(6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.user-popover-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 15px;
    color: #fff;
}

.user-popover-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.user-popover-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-popover-role {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: capitalize;
}


.nav-item.logout {
    width: 100%;
    color: var(--danger);
    background: rgba(239, 68, 68, 0.1);
}
.nav-item.logout:hover {
    background: rgba(239, 68, 68, 0.2);
}

@media (min-width: 1025px) {
    body.sidebar-collapsed .sidebar {
        width: var(--sidebar-collapsed-width);
    }

    body.sidebar-collapsed .sidebar-logo {
        justify-content: center;
        padding: 0 10px;
    }

    body.sidebar-collapsed .sidebar-brand,
    body.sidebar-collapsed .nav-group-title,
    body.sidebar-collapsed .nav-item span:not(.badge),
    body.sidebar-collapsed .nav-sync-status span:not(.sync-badge),
    body.sidebar-collapsed .user-details {
        display: none;
    }

    body.sidebar-collapsed .sidebar-nav {
        padding: 16px 10px;
        gap: 8px;
        overflow-x: hidden;
    }

    body.sidebar-collapsed .nav-group {
        gap: 8px;
    }

    body.sidebar-collapsed .nav-group + .nav-group {
        margin-top: 8px;
        padding-top: 8px;
    }

    body.sidebar-collapsed .nav-item {
        justify-content: center;
        gap: 0;
        min-height: 48px;
        padding: 12px 0;
        border-radius: 16px;
    }

    body.sidebar-collapsed .nav-item i {
        width: auto;
        flex: 0 0 auto;
        font-size: 18px;
    }

    body.sidebar-collapsed .sidebar-footer {
        padding: 12px 10px;
    }

    body.sidebar-collapsed .user-info {
        justify-content: center;
        margin-bottom: 10px;
        padding: 0;
    }

    body.sidebar-collapsed .user-info .avatar {
        width: 42px;
        height: 42px;
    }

    body.sidebar-collapsed .nav-sync-status {
        justify-content: center;
        min-height: 48px;
        margin-top: 0;
        padding: 12px 0;
        border-radius: 16px;
    }

    body.sidebar-collapsed .nav-sync-status i {
        font-size: 18px;
    }

    body.sidebar-collapsed .nav-item .badge,
    body.sidebar-collapsed .nav-sync-status .sync-badge {
        position: absolute;
        top: 4px;
        right: 4px;
        margin-left: 0 !important;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border: 2px solid var(--bg-base);
        font-size: 10px;
        line-height: 14px;
    }
}

/* Main Content Area */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--bg-base);
    position: relative;
    overflow: hidden;
}

/* Topbar */
.topbar {
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    border-bottom: 1px solid var(--border-color);
    z-index: 5;
}

.search-bar {
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-radius: var(--radius-full);
    width: 300px;
    height: 40px;
}

.search-bar i {
    color: var(--text-secondary);
}

.search-bar input {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: inherit;
    padding: 8px 12px;
    width: 100%;
    outline: none;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-left: auto;
}

.dashboard-chart-container {
    width: 100%;
}

.dashboard-panel.glass-panel {
    padding: 24px;
}

.datetime {
    text-align: right;
}
#current-time {
    font-weight: 600;
    font-size: 16px;
}
#current-date {
    font-size: 12px;
    color: var(--text-secondary);
}

.notifications {
    position: relative;
    font-size: 20px;
    color: var(--text-secondary);
    cursor: pointer;
}
.notifications .badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--danger);
    color: white;
    font-size: 10px;
    font-weight: bold;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* View Content */
.view-content {
    flex: 1;
    display: none;
    overflow-y: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.view-content.active-view {
    display: block;
}

/* Specific view overrides */
#pos-view.active-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
#dashboard-view.active-view,
#orders-view.active-view,
#attendance-view.active-view,
#reservasi-view.active-view,
#menu-management-view.active-view,
#settings-view.active-view {
    display: block;
}

/* ==========================================================================
   POS INTERFACE
   ========================================================================== */
.pos-layout {
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.products-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px;
    overflow: hidden;
}

.categories-wrapper {
    padding: 10px;
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
}
.categories-wrapper::-webkit-scrollbar {
    height: 4px;
}
.categories-wrapper::-webkit-scrollbar-track {
    background: transparent;
}
.categories-wrapper::-webkit-scrollbar-thumb {
    background: var(--primary-glow);
    border-radius: 10px;
}
.categories-wrapper:hover::-webkit-scrollbar-thumb {
    background: var(--primary);
}

.categories-list {
    display: flex;
    list-style: none;
    gap: 10px;
}

.category-item {
    padding: 10px 24px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--trans-fast);
    font-weight: 500;
    border: 1px solid transparent;
}
.category-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}
.category-item.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary-hover);
    box-shadow: 0 4px 15px var(--primary-glow);
}

.menu-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 20px;
    overflow-y: auto;
    padding: 10px 10px 60px 10px;
    align-content: start;
    scroll-behavior: smooth;
}

/* Custom indicator for more items (fade effect) */
.products-section {
    position: relative;
}

.products-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(to top, var(--bg-base), transparent);
    pointer-events: none;
    z-index: 2;
    opacity: 0.8;
}

.menu-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--trans-normal);
    position: relative;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 190px;
}

.menu-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

/*
 * Animasi masuk kartu menu (POS) — kartu muncul berurutan dari bawah saat
 * layar kasir dibuka atau ganti kategori. Kelasnya dipasang dari
 * renderMenus() di public/js/pos.js, lengkap dengan --menu-card-i (nomor
 * urut kartu, dibatasi 12) sebagai jeda mulai.
 *
 * Sengaja HANYA opacity + transform: keduanya dikerjakan GPU, jadi tetap
 * mulus di HP kasir yang murah. Jangan tambahkan animasi width/height/
 * box-shadow di sini — itu memaksa browser menghitung ulang tata letak
 * seluruh grid tiap frame dan bikin patah-patah.
 */
@keyframes menuCardIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/*
 * `backwards` (BUKAN `both`/`forwards`) itu wajib di sini. Dengan `both`,
 * nilai transform dari animasi tetap menempel SELAMANYA sesudah animasi
 * selesai dan mengalahkan aturan biasa — akibatnya efek kartu terangkat saat
 * disentuh (`.menu-card:hover` / `:active`) mati total. `backwards` hanya
 * memakai keadaan awal selama jeda tunggu, lalu melepas kartu kembali ke
 * aturan normal begitu animasinya habis.
 */
.menu-card-enter {
    animation: menuCardIn 0.32s cubic-bezier(0.2, 0, 0, 1) backwards;
    animation-delay: calc(var(--menu-card-i, 0) * 40ms);
}

/* Hormati setelan "kurangi animasi" di HP/OS staf. */
@media (prefers-reduced-motion: reduce) {
    .menu-card-enter {
        animation: none;
    }
}

.menu-img-container {
    height: 110px;
    flex-shrink: 0;
    background: rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-img-placeholder {
    font-size: 48px;
    color: var(--text-muted);
}

.menu-img-actual, .menu-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: rgba(0,0,0,0.05);
    transition: transform var(--trans-normal);
}

.menu-details {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Space out title and price */
    min-height: 80px;
}

.menu-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    line-height: 1.4;
    color: var(--text-primary);
    /* Allow multi-line names */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.menu-price {
    color: var(--accent);
    font-weight: 700;
    font-size: 16px;
    margin-top: auto;
}

.menu-add-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.8);
    transition: all var(--trans-fast);
}

.menu-card:hover .menu-add-btn {
    opacity: 1;
    transform: scale(1);
}
.menu-add-btn:active {
    transform: scale(0.9) !important;
}

/* Cart Section */
.cart-section {
    width: var(--cart-width);
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border-color);
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0;
}

.cart-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cart-header h3 {
    font-weight: 600;
    font-size: 18px;
}

.icon-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    transition: color var(--trans-fast);
}
.icon-btn:hover {
    color: var(--danger);
}

.order-type-selector {
    display: flex;
    padding: 16px 24px;
    gap: 10px;
}

.customer-name-input {
    padding: 12px 24px;
}

/* Toggle Bazar & Kurir berdampingan (hemat ruang vertikal, beri napas ke daftar item).
   Di phone portrait di-stack lagi (lihat media query) karena kartu sempit. */
.order-toggles-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.order-toggles-row > .bazaar-toggle-container,
.order-toggles-row > .courier-toggle-container {
    flex: 1 1 0;
    min-width: 0;
}
.order-toggles-row > .bazaar-toggle-container > div,
.order-toggles-row > .courier-toggle-container > div {
    min-width: 0;
}
.order-toggles-row .bazaar-toggle-container span,
.order-toggles-row .courier-toggle-container span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Opsi lanjutan: kelompok Bazar/Kurir/Promo yang dapat dilipat agar daftar item
   mendapat lebih banyak ruang. Header menampilkan badge teks opsi yang aktif. */
.advanced-options {
    padding: 0 24px;
    margin-bottom: 12px;
}
.advanced-options-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--trans-fast);
}
.advanced-options-toggle:hover {
    background: rgba(255,255,255,0.06);
}
.advanced-options-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.advanced-options-badges {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.advanced-options-caret {
    color: var(--text-secondary);
    font-size: 12px;
    transition: transform var(--trans-fast);
}
.advanced-options.open .advanced-options-caret {
    transform: rotate(180deg);
}
.advanced-options-body {
    display: none;
    padding-top: 10px;
}
.advanced-options.open .advanced-options-body {
    display: block;
}

.customer-name-field {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: rgba(0,0,0,0.2);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: all var(--trans-fast);
}

.customer-name-field:focus {
    border-color: var(--primary);
    background: rgba(0,0,0,0.4);
    box-shadow: 0 0 0 4px var(--primary-glow);
}

body.light-mode .customer-name-field {
    background: rgba(255, 255, 255, 0.7);
    color: var(--text-primary);
}

body.light-mode .customer-name-field:focus {
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-glow);
}

.type-btn {
    flex: 1;
    padding: 8px;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    transition: all var(--trans-fast);
}
.type-btn.active {
    background: rgba(139, 92, 246, 0.2);
    color: var(--primary);
    border-color: var(--primary);
}

.cart-items {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.empty-cart-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    opacity: 0.7;
}
.empty-cart-msg i {
    font-size: 48px;
    margin-bottom: 16px;
}

.cart-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}
.cart-item-info {
    flex: 1;
}
.cart-item-name {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 4px;
}
.cart-item-price {
    color: var(--text-secondary);
    font-size: 12px;
}
.cart-item-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
.qty-btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: none;
    background: rgba(255,255,255,0.1);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qty-btn:hover { background: rgba(255,255,255,0.2); }
.qty-value {
    font-weight: 600;
    font-size: 14px;
    width: 20px;
    text-align: center;
}

.remove-item-btn {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--trans-fast);
    margin-left: 8px;
}

.remove-item-btn:hover {
    background: var(--danger);
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
}

body.light-mode .remove-item-btn {
    background: rgba(239, 68, 68, 0.08);
}

.cart-summary {
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
}
.summary-line {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: var(--text-secondary);
    font-size: 14px;
}
.summary-line.total {
    margin-top: 15px;
    margin-bottom: 0;
    padding-top: 15px;
    border-top: 1px dashed var(--border-color);
    color: white;
    font-size: 18px;
    font-weight: 700;
}
.summary-line.total span:last-child {
    color: var(--accent);
}

.payment-method-selector {
    padding: 0 24px 20px;
}
.payment-method-selector h4 {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    font-weight: 500;
}
.payment-options {
    display: flex;
    gap: 10px;
}
.payment-option {
    flex: 1;
    cursor: pointer;
}
.payment-option input {
    display: none;
}
.pay-btn {
    padding: 10px;
    text-align: center;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 13px;
    transition: all var(--trans-fast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.pay-btn i { font-size: 18px; }
.payment-option input:checked + .pay-btn {
    background: rgba(16, 185, 129, 0.15);
    border-color: var(--accent);
    color: var(--accent);
}

.btn-checkout {
    margin: 0 24px 24px;
    padding: 16px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all var(--trans-normal);
}
.btn-checkout:hover:not(:disabled) {
    background: var(--accent-hover);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    transform: translateY(-2px);
}
.btn-checkout:active:not(:disabled) {
    transform: translateY(0);
}
.btn-checkout:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.5;
}

/* ==========================================================================
   TOAST NOTIFICATIONS
   ========================================================================== */
#toast-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
}
.toast {
    padding: 16px 20px;
    border-radius: var(--radius-md);
    background: var(--bg-panel);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-glass);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 250px;
    transform: translateX(120%);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.toast.show {
    transform: translateX(0);
}
.toast-success i { color: var(--accent); }
.toast-error i { color: var(--danger); }
.toast-warning i { color: #f59e0b; }
.toast-info i { color: var(--primary); }

/* ==========================================================================
   DASHBOARD VIEW
   ========================================================================== */
.p-24 { padding: 24px; }
.view-title { font-size: 24px; margin-bottom: 24px; font-weight: 600; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 24px; }
.stat-card { padding: 20px; border-radius: var(--radius-md); display: flex; align-items: center; gap: 20px; transition: transform var(--trans-fast); }
.stat-card:hover { transform: translateY(-5px); }
.stat-icon { font-size: 30px; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); }
.stat-icon.primary { color: var(--primary); background: rgba(139, 92, 246, 0.1); }
.stat-icon.accent { color: var(--accent); background: rgba(16, 185, 129, 0.1); }
.stat-icon.secondary { color: var(--secondary); background: rgba(236, 72, 153, 0.1); }
.stat-icon.warning { color: var(--warning); background: rgba(245, 158, 11, 0.1); }
.stat-icon.danger { color: var(--danger); background: rgba(239, 68, 68, 0.1); }
.stat-icon.success { color: var(--accent); background: rgba(16, 185, 129, 0.1); }
.stat-label { font-size: 13px; color: var(--text-secondary); }
.stat-value { font-size: 24px; font-weight: 700; margin-top: 5px; }

.dashboard-bottom { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; }
.dashboard-panel { padding: 20px; border-radius: var(--radius-lg); overflow: hidden; }
.dashboard-panel h3 { font-size: 16px; margin-bottom: 15px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
.best-seller-item { display:flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.02); }
.recent-order-item { display:flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.02); }

/* ==========================================================================
   DASHBOARD TABS
   ========================================================================== */
.dash-tab-nav, .hpp-tab-nav { display: flex; gap: 8px; border-bottom: 1px solid var(--border-color); padding-bottom: 0; }
.dash-tab-btn, .hpp-tab-btn { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: var(--radius-md) var(--radius-md) 0 0; background: transparent; border: 1px solid transparent; border-bottom: none; color: var(--text-secondary); font-size: 14px; font-weight: 500; cursor: pointer; transition: all var(--trans-fast); position: relative; bottom: -1px; }
.dash-tab-btn:hover, .hpp-tab-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); }
.dash-tab-btn.active, .hpp-tab-btn.active { background: var(--surface); border-color: var(--border-color); color: var(--primary); border-bottom-color: var(--surface); }
.dash-tab-btn i, .hpp-tab-btn i { font-size: 15px; }
.dash-tab-pane, .hpp-tab-pane { padding-top: 28px; }

/* Modal LEBAR — dipakai modal yang berisi baris bahan (resep menu, resep
   produksi, modifier). Di lebar 500px nama bahan seperti "Adonan Tahu Frozen"
   dan angka "175,0000" terpotong sehingga sulit diisi. Shell ini hanya
   melebarkan wadahnya; isi modal tidak berubah. */
#modal-container.wide-modal-shell { max-width: 760px; }
@media (max-width: 820px) {
    #modal-container.wide-modal-shell { width: 94%; max-width: 94vw; }
}

/* Modal Resep: beri kolom Bahan porsi terlebar agar nama bahan terbaca penuh,
   kolom angka & aksi dibuat ringkas. */
.recipe-table { table-layout: fixed; width: 100%; }
.recipe-table .col-qty { width: 128px; }
.recipe-table .col-susut { width: 108px; }
.recipe-table .col-act { width: 46px; }
.recipe-table select, .recipe-table input { width: 100%; min-width: 0; }
.recipe-table td, .recipe-table th { white-space: nowrap; }
@media (max-width: 520px) {
    .recipe-table .col-qty { width: 88px; }
    .recipe-table .col-susut { width: 74px; }
}
.stats-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* 5 kartu memanjang horizontal — versi ringkas agar muat dalam 1 baris */
.stats-grid-5 { grid-template-columns: repeat(5, 1fr); gap: 16px; }
.stats-grid-5 .stat-card { gap: 14px; padding: 18px 16px; }
.stats-grid-5 .stat-icon { font-size: 22px; width: 48px; height: 48px; }
.stats-grid-5 .stat-value { font-size: 20px; }
.stat-subvalue { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-top: 4px; }
/* Layar menengah: turun jadi 3 kolom supaya tetap rapih, tidak menyempit */
@media (min-width: 769px) and (max-width: 1200px) {
    .stats-grid-5 { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   DOMPET DIGITAL
   ========================================================================== */
.wallet-hero { display: flex; justify-content: space-between; align-items: center; padding: 28px 32px; border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(167,70,37,0.18), rgba(139,92,246,0.15)); border: 1px solid rgba(167,70,37,0.25); }
.wallet-hero-label { font-size: 13px; color: var(--text-secondary); margin: 0 0 6px; }
.wallet-hero-amount { font-size: 36px; font-weight: 700; margin: 0 0 6px; }
.wallet-hero-icon { font-size: 52px; color: var(--primary); opacity: 0.25; }
.wallet-list-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.wallet-list-title { font-size: 17px; font-weight: 600; margin: 0; }
.wallet-add-btn { width: auto; padding: 9px 18px; font-size: 13px; }
/* Kartu dompet memakai konsep kartu ATM: kartu berwarna (informasi) di atas,
   "dok" tombol berlatar panel di bawahnya (aksi). Kartu sengaja lebih lebar
   (min 360px) supaya baris kaki kartu — peran dompet, catatan, logo jaringan —
   tidak saling berdesakan. */
/* `grid-auto-rows: 1fr` menyamakan tinggi SEMUA baris, bukan hanya baris yang
   sama. Tanpa ini, baris berisi dompet ber-tombol banyak jadi lebih tinggi
   daripada baris di bawahnya, dan kartunya terlihat tidak sejajar. */
.wallet-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); grid-auto-rows: 1fr; gap: 24px; margin-top: 16px; align-items: stretch; }

/* ===== Dompet (Konsep Kartu Digital ATM) ===== */
.wallet-atm-wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 20px;
    height: 100%;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.wallet-atm-wrapper:hover {
    transform: translateY(-4px);
}

.wallet-atm-card {
    position: relative;
    width: 100%;
    height: 260px;
    min-height: 260px;
    box-sizing: border-box;
    border-radius: 20px;
    overflow: hidden;
    color: #ffffff;
    padding: 20px 22px 16px 22px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 16px 36px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.3);
    background: radial-gradient(circle at 90% 15%, rgba(255,255,255,.22), transparent 40%),
                linear-gradient(135deg, #071b37 0%, #0b376b 45%, #0061a8 100%);
    border: 1px solid rgba(255,255,255,.15);
    z-index: 2;
    /* TIDAK boleh melar. Kalau kartu dibiarkan mengisi sisa tinggi baris,
       dompet ber-dok pendek (mis. Kas Laci, yang tanpa Setor/Prive/Opname)
       mendapat kartu jauh lebih jangkung berongga di tengah — persis keluhan
       "tinggi kartu tidak konsisten". Sisa tinggi diserahkan ke dok tombol
       di bawahnya, yang memang bisa menampungnya tanpa terlihat aneh. */
    flex: 0 0 auto;
}

/* Lingkaran orbit dekoratif kartu ATM */
.wallet-atm-card::before {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    right: -130px;
    bottom: -170px;
    pointer-events: none;
}

.wallet-atm-card::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 50%;
    right: -60px;
    bottom: -120px;
    pointer-events: none;
}

/* Varian tema kartu sesuai warna dompet (daftar warna = WALLET_COLORS di dashboard.js) */
.wallet-atm-theme-blue {
    background: radial-gradient(circle at 90% 15%, rgba(255,255,255,.22), transparent 40%),
                linear-gradient(135deg, #071b37 0%, #0b376b 45%, #0061a8 100%);
}

.wallet-atm-theme-green {
    background: radial-gradient(circle at 90% 15%, rgba(255,255,255,.22), transparent 40%),
                linear-gradient(135deg, #032717 0%, #064e3b 45%, #059669 100%);
}

.wallet-atm-theme-orange {
    background: radial-gradient(circle at 90% 15%, rgba(255,255,255,.22), transparent 40%),
                linear-gradient(135deg, #381305 0%, #7c2d12 45%, #c2410c 100%);
}

.wallet-atm-theme-red {
    background: radial-gradient(circle at 90% 15%, rgba(255,255,255,.22), transparent 40%),
                linear-gradient(135deg, #3d0914 0%, #701124 45%, #be123c 100%);
}

.wallet-atm-theme-purple {
    background: radial-gradient(circle at 90% 15%, rgba(255,255,255,.22), transparent 40%),
                linear-gradient(135deg, #240c4a 0%, #4c1d95 45%, #7e22ce 100%);
}

/* Coklat: warna khas Archi, tidak ada di aplikasi acuan — dibuat senada. */
.wallet-atm-theme-brown {
    background: radial-gradient(circle at 90% 15%, rgba(255,255,255,.22), transparent 40%),
                linear-gradient(135deg, #23140d 0%, #5c2b12 45%, #a74625 100%);
}

.wallet-atm-card.wallet-card-inactive {
    opacity: 0.65;
    filter: grayscale(0.4);
}

/* Header kartu */
.wallet-atm-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    z-index: 2;
    gap: 12px;
    min-height: 42px;
}

.wallet-atm-brand {
    display: flex;
    align-items: center;
    gap: 11px;
}

.wallet-atm-logo-box {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(200,230,255,0.8));
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 0.5px;
    color: #0b376b;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 4px 10px rgba(0,0,0,.2);
    text-shadow: none;
    flex-shrink: 0;
}

.wallet-atm-theme-green .wallet-atm-logo-box {
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(187,247,208,0.85));
    color: #064e3b;
}

.wallet-atm-theme-orange .wallet-atm-logo-box {
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(254,215,170,0.85));
    color: #7c2d12;
}

.wallet-atm-theme-red .wallet-atm-logo-box {
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(254,205,211,0.85));
    color: #701124;
}

.wallet-atm-theme-purple .wallet-atm-logo-box {
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(233,213,255,0.85));
    color: #4c1d95;
}

.wallet-atm-theme-brown .wallet-atm-logo-box {
    background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(233,209,183,0.9));
    color: #5c2b12;
}

.wallet-atm-brand-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wallet-atm-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0,0,0,.35);
}

.wallet-atm-subtitle {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: .8;
    margin-top: 3px;
    display: block;
    font-weight: 600;
}

.wallet-atm-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wallet-atm-contactless {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(90deg);
    opacity: .9;
}

.wallet-atm-contactless svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.4;
    stroke-linecap: round;
}

.wallet-atm-badge-inactive {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0,0,0,.5);
    border: 1px solid rgba(255,255,255,.25);
    color: #f1f5f9;
    letter-spacing: 0.6px;
}

/* Baris tengah: penanda Kas Laci + chip EMV */
.wallet-atm-mid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    min-height: 36px;
    margin-top: 6px;
    gap: 12px;
}

.wallet-atm-chip {
    position: relative;
    width: 48px;
    height: 35px;
    border-radius: 7px;
    background: linear-gradient(135deg, #f5d87e 0%, #c99631 35%, #ffdf80 70%, #b47b20 100%);
    border: 1px solid rgba(70,45,0,.45);
    box-shadow: inset 0 0 5px rgba(255,255,255,.6), 0 2px 6px rgba(0,0,0,.3);
    flex-shrink: 0;
}

.wallet-atm-chip::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(70,45,0,.45);
}

.wallet-atm-chip::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(70,45,0,.45);
}

.wallet-atm-chip-grid1,
.wallet-atm-chip-grid2 {
    position: absolute;
    border: 1px solid rgba(70,45,0,.4);
    width: 14px;
    height: 14px;
}

.wallet-atm-chip-grid1 {
    left: 5px;
    top: 4px;
    border-left: none;
}

.wallet-atm-chip-grid2 {
    right: 5px;
    bottom: 4px;
    border-right: none;
}

.wallet-atm-drawer-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.3);
    color: #ffffff;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

/* Saldo */
.wallet-atm-balance-block {
    position: relative;
    z-index: 2;
    margin-top: 6px;
    margin-bottom: 6px;
}

.wallet-atm-balance-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: .75;
    font-weight: 600;
    margin-bottom: 2px;
}

.wallet-atm-balance-val {
    font-size: 25px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,.4);
    line-height: 1.15;
}

.wallet-atm-balance-val.text-danger {
    color: #fca5a5 !important;
}

/* Kaki kartu: peran dompet, catatan, logo jaringan */
.wallet-atm-footer {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.14);
    gap: 16px;
    min-height: 38px;
}

.wallet-atm-footer-info {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: flex-end;
    min-width: 0;
}

.wallet-atm-info-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wallet-atm-info-title {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    opacity: .65;
    margin-bottom: 2px;
    font-weight: 600;
}

.wallet-atm-info-val {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    opacity: .95;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wallet-atm-network {
    text-align: right;
    flex-shrink: 0;
}

.wallet-atm-network-logo {
    font-size: 22px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -1.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,.35);
    line-height: 1;
}

.wallet-atm-network-sub {
    font-size: 7px;
    text-align: right;
    opacity: .8;
    letter-spacing: 1.5px;
    margin-top: 2px;
    text-transform: uppercase;
    font-weight: 700;
}

/* Dok tombol di bawah kartu.
   Semua tombol dompet pindah ke sini dan SELALU terlihat — bukan lagi ikon
   yang baru muncul saat kursor menyentuh kartu. Alasannya sama dengan tombol
   Opname Kas dulu (1 Agustus 2026): fitur uang tidak boleh butuh ditemukan. */
.wallet-atm-actions-dock {
    background: var(--bg-panel, rgba(30, 41, 59, 0.7));
    border: 1px solid var(--border-color, rgba(255,255,255,.08));
    border-top: none;
    border-radius: 0 0 18px 18px;
    padding: 18px 14px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    margin-top: -8px;
    z-index: 1;
    /* Dok yang menyerap sisa tinggi baris (bukan kartunya) — lihat catatan di
       `.wallet-atm-card`. Boleh melar, tidak boleh menyusut di bawah isinya. */
    flex: 1 0 auto;
}

.wallet-atm-cash-actions {
    display: flex;
    gap: 8px;
}

/* Warna arah: hijau = uang masuk ke usaha (Setor), oranye = uang keluar ke
   pemilik (Prive). Sengaja BUKAN merah — prive bukan kesalahan, hanya perlu
   terlihat beda. */
.wallet-atm-btn-in {
    flex: 1;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid rgba(34,197,94,.4);
    background: rgba(34,197,94,.12);
    color: #22c55e;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.wallet-atm-btn-in:hover:not(:disabled) {
    background: rgba(34,197,94,.22);
    border-color: #22c55e;
    box-shadow: 0 0 12px rgba(34,197,94,.25);
    transform: translateY(-1px);
}

.wallet-atm-btn-out {
    flex: 1;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid rgba(249,115,22,.4);
    background: rgba(249,115,22,.12);
    color: #f97316;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.wallet-atm-btn-out:hover:not(:disabled) {
    background: rgba(249,115,22,.22);
    border-color: #f97316;
    box-shadow: 0 0 12px rgba(249,115,22,.25);
    transform: translateY(-1px);
}

/* Baris Mutasi/Ubah/Hapus menempel ke DASAR dok. Karena dok sekarang bisa
   melar, tanpa ini baris tombol menggantung di tengah rongga dan tidak sejajar
   antar-kartu. Dengan `margin-top: auto`, dasar tiap kartu selalu segaris. */
.wallet-atm-mgmt-actions {
    display: flex;
    gap: 6px;
    margin-top: auto;
}

.wallet-atm-btn-action {
    flex: 1;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid var(--border-color, rgba(255,255,255,.12));
    background: rgba(255,255,255,.05);
    color: var(--text-primary, #f8fafc);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: all 0.2s ease;
}

.wallet-atm-btn-action:hover:not(:disabled) {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.25);
    transform: translateY(-1px);
}

.wallet-atm-btn-action:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* Opname Kas berdiri sendiri selebar dok — tombol uang yang paling mudah
   terlewat kalau disempitkan sejajar tombol lain. */
.wallet-atm-btn-wide {
    width: 100%;
    flex: none;
}

.wallet-atm-btn-danger {
    flex: 0 0 auto;
    width: 38px;
    padding: 8px 0;
    color: var(--danger, #ef4444);
    border-color: rgba(239,68,68,.3);
    background: rgba(239,68,68,.08);
}

.wallet-atm-btn-danger:hover:not(:disabled) {
    background: rgba(239,68,68,.2);
    border-color: var(--danger, #ef4444);
}

/* Mode terang: latar dok jadi terang, jadi sorotan "putih transparan" harus
   dibalik menjadi "gelap transparan" supaya tombol tetap terlihat ditekan. */
body.light-mode .wallet-atm-actions-dock { box-shadow: 0 8px 24px rgba(55,35,26,.10); }
body.light-mode .wallet-atm-btn-action { background: rgba(55,35,26,.04); }
body.light-mode .wallet-atm-btn-action:hover:not(:disabled) { background: rgba(55,35,26,.10); border-color: var(--border-hover); }
body.light-mode .wallet-atm-btn-in { color: #15803d; background: rgba(34,197,94,.14); }
body.light-mode .wallet-atm-btn-out { color: #c2410c; background: rgba(249,115,22,.14); }
body.light-mode .wallet-atm-btn-danger { background: rgba(239,68,68,.08); }

/* Responsif */
@media (max-width: 500px) {
    .wallet-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .wallet-atm-card {
        padding: 18px 20px;
        height: auto;
        min-height: 220px;
    }
    .wallet-atm-balance-val {
        font-size: 22px;
    }
    .wallet-atm-footer-info {
        gap: 12px;
    }
}

/* Empty state */
.wallet-empty-state { text-align: center; padding: 60px 20px; display: flex; flex-direction: column; align-items: center; }

/* Wallet Modal */
.wallet-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; }
/* Cap tinggi + body scroll: header & footer (Simpan/Batal) tetap tampil di
   tablet landscape / saat keyboard muncul. */
.wallet-modal { width: 100%; max-width: 440px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; border-radius: var(--radius-lg); padding: 0; overflow: hidden; }
.wallet-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.wallet-modal-header h3 { margin: 0; font-size: 17px; font-weight: 600; }
.wallet-modal-body { padding: 24px; display: flex; flex-direction: column; gap: 16px; flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.wallet-modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border-color); flex-shrink: 0; }

/* Color Picker */
.wallet-color-picker { display: flex; gap: 10px; flex-wrap: wrap; }
.wallet-color-opt input { display: none; }
.wcp-swatch { display: block; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; transition: border-color var(--trans-fast), transform var(--trans-fast); }
.wallet-color-opt input:checked + .wcp-swatch { border-color: white; transform: scale(1.15); box-shadow: 0 0 0 2px rgba(255,255,255,0.3); }

/* Method Badges — sekarang duduk di dok tombol (latar panel), bukan lagi di
   badan kartu berwarna, jadi warnanya mengikuti tema aplikasi. */
.wallet-method-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 2px; }
.wallet-method-badge { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 20px; background: rgba(255,255,255,0.08); border: 1px solid var(--border-color); color: var(--text-secondary); letter-spacing: 0.5px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 4px; }
.wallet-method-badge.badge-penyusutan { background: rgba(167,70,37,.18); border-color: rgba(167,70,37,.40); color: var(--primary); }
.wallet-method-badge.badge-utang { background: rgba(220,38,38,.16); border-color: rgba(239,68,68,.40); color: #ef4444; }
body.light-mode .wallet-method-badge { background: rgba(55,35,26,.05); }

/* Mutasi Semua Dompet — filter header */
.wallet-mutation-filter { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.wallet-mutation-filter select { padding: 7px 12px; font-size: 13px; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); }
.wallet-mutation-filter label { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
/* Badge nama dompet di tabel mutasi semua */
.wallet-name-badge { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 10px; display: inline-block; white-space: nowrap; }

/* Mapping Section */
.wallet-mapping-section { padding: 24px; border-radius: var(--radius-lg); margin-top: 32px; }
.wallet-mapping-header { margin-bottom: 20px; }
.wallet-mapping-title { font-size: 15px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 8px; }
.wallet-mapping-rows { display: flex; flex-direction: column; gap: 12px; }
.wallet-mapping-row { display: grid; grid-template-columns: 1fr auto 1.6fr; align-items: center; gap: 14px; padding: 12px 16px; border-radius: var(--radius-md); background: rgba(255,255,255,0.03); border: 1px solid var(--border-color); }
.wallet-mapping-method { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.wallet-mapping-method i { font-size: 16px; color: var(--primary); width: 20px; text-align: center; }
.wallet-mapping-arrow { color: var(--text-muted); font-size: 12px; }
.wallet-mapping-select { padding: 8px 12px; font-size: 13px; }
.wallet-mapping-footer { margin-top: 16px; display: flex; justify-content: flex-end; }

/* Transfer antar dompet */
.wallet-transfer-arrow-row { text-align: center; padding: 4px 0; }
.wallet-transfer-history-section { margin-top: 28px; padding: 20px 24px; border-radius: var(--radius-lg); background: rgba(255,255,255,0.02); border: 1px solid var(--border-color); }
.wallet-transfer-history-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.transfer-item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; border-radius: var(--radius-md); background: rgba(255,255,255,0.03); border: 1px solid var(--border-color); }
.transfer-item-wallets { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.transfer-wallet-name { background: rgba(255,255,255,0.06); padding: 3px 8px; border-radius: var(--radius-sm); font-size: 12px; }
.transfer-item-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.transfer-amount { font-weight: 700; font-size: 14px; color: var(--warning); }
.transfer-note { width: 100%; font-size: 11px; color: var(--text-muted); padding-top: 4px; border-top: 1px solid var(--border-color); margin-top: 4px; }

/* Rekonsiliasi Neraca */
.bs-wallet-recon { padding: 20px 24px; border-radius: var(--radius-lg); margin-top: 24px; border: 1px solid rgba(167,70,37,0.2); }
.bs-wallet-recon-title { font-size: 14px; font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; color: var(--primary); }
.bs-wallet-recon-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-color); font-size: 13px; }
.bs-wallet-recon-status { margin-top: 12px; font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 6px; }

/* ==========================================================================
   ORDERS VIEW
   ========================================================================== */
.orders-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 24px; }
.order-filters { display: flex; gap: 10px; }
.filter-btn { padding: 8px 16px; border-radius: var(--radius-full); background: rgba(0,0,0,0.2); border: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; transition: all var(--trans-fast); }
.filter-btn.active { background: var(--primary); color: white; border-color: var(--primary); }
.table-container { 
    border-radius: var(--radius-lg); 
    overflow: auto; 
    padding: 10px; 
    width: 100%;
    max-width: 100%;
}

.table-scroll-limit {
    max-height: 310px;
    overflow-y: auto;
    position: relative;
}

/* Pesanan: tiap tab kini hanya menampilkan SATU tabel. Beri tinggi yang muat
   ~10 orderan dulu, baru muncul scroll (header tetap sticky). Tinggi baris
   bervariasi (menu/aksi bisa beberapa baris), jadi ~10 adalah perkiraan.
   Dibatasi viewport agar tidak melebihi layar; mobile dioverride di
   mobile-app.css (dvh). */
#orders-view .table-scroll-limit {
    max-height: min(720px, calc(100dvh - 200px));
    min-height: 320px;
}

.table-scroll-limit .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-panel);
    box-shadow: 0 1px 0 var(--border-color);
}
.data-table { width: 100%; border-collapse: collapse; text-align: left; }
.data-table th, .data-table td { padding: 12px 15px; border-bottom: 1px solid var(--border-color); }
.data-table th { background: rgba(0,0,0,0.2); color: var(--text-muted); font-weight: 600; font-size: 13px; text-transform: uppercase; }
.data-table tr:hover { background: rgba(255,255,255,0.02); }
.status-badge { padding: 4px 10px; border-radius: var(--radius-full); font-size: 11px; font-weight: 600; text-transform: uppercase; }
.status-pending { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.status-processed { background: rgba(139, 92, 246, 0.2); color: var(--primary); }
.status-completed { background: rgba(16, 185, 129, 0.2); color: var(--accent); }
.status-cancelled { background: rgba(239, 68, 68, 0.2); color: var(--danger); }
.status-offline { background: rgba(20, 184, 166, 0.2); color: #2dd4bf; }
.offline-order-row { background: rgba(20, 184, 166, 0.06); }

/* Salinan pesanan pending server saat sinyal hilang — sengaja BEDA warna dari
   .offline-order-row (teal = dibuat offline di HP ini) supaya kasir tidak
   mengira keduanya sama. Amber = "ini catatan lama, bukan keadaan sekarang". */
.cached-order-row { background: rgba(180, 83, 9, 0.07); }
.cached-orders-banner {
    background: rgba(180, 83, 9, 0.14);
    color: #b45309;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
    text-align: left;
}
.status-diterima { background: rgba(139, 92, 246, 0.2); color: var(--primary); }
.status-selesai { background: rgba(16, 185, 129, 0.2); color: var(--accent); }
.status-dibatalkan { background: rgba(239, 68, 68, 0.2); color: var(--danger); }
.action-btn { padding: 6px 12px; margin-right: 4px; border-radius: var(--radius-md); background: rgba(255,255,255,0.1); border: none; color: white; cursor: pointer; font-size: 12px; transition: all var(--trans-fast); display: inline-flex; align-items: center; gap: 5px; }
.action-btn:hover:not(:disabled) { background: var(--primary); }
.action-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.data-table td[data-label="Action"],
.data-table td[data-label="Aksi"] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.data-table td[data-label="Action"] .action-btn,
.data-table td[data-label="Aksi"] .action-btn {
    margin-right: 0;
}

.action-btn.process { background: rgba(245, 158, 11, 0.2); color: var(--warning); }
.action-btn.process:hover:not(:disabled) { background: var(--warning); color: white; }

.action-btn.complete { background: rgba(139, 92, 246, 0.2); color: var(--primary); }
.action-btn.complete:hover:not(:disabled) { background: var(--primary); color: white; }

.action-btn.view { background: rgba(16, 185, 129, 0.2); color: var(--accent); }
.action-btn.view:hover:not(:disabled) { background: var(--accent); color: white; }

.action-btn.cancel { background: rgba(239, 68, 68, 0.2); color: var(--danger); }
.action-btn.cancel:hover:not(:disabled) { background: var(--danger); color: white; }

.action-btn.payment { background: rgba(14, 165, 233, 0.18); color: #38bdf8; }
.action-btn.payment:hover:not(:disabled) { background: #0ea5e9; color: white; }

.action-btn.undo { background: rgba(255, 255, 255, 0.1); color: var(--text-secondary); padding: 6px 10px; }
.action-btn.undo:hover:not(:disabled) { background: rgba(255, 255, 255, 0.2); color: white; }
.action-btn.whatsapp { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.action-btn.whatsapp:hover:not(:disabled) { background: #22c55e; color: white; }
.action-btn.maps { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.action-btn.maps:hover:not(:disabled) { background: #3b82f6; color: white; }
.action-btn.detail { background: rgba(255, 255, 255, 0.12); color: var(--text-primary); }
.action-btn.detail:hover:not(:disabled) { background: rgba(255,255,255,0.24); color: white; }
/* Tombol Kemasan (ubah tipe/bungkus) — warna brand agar kontras di tema light & dark */
.action-btn.packaging { background: rgba(167, 70, 37, 0.18); color: #c2602f; }
.action-btn.packaging:hover:not(:disabled) { background: var(--primary); color: #fff; }
.action-btn.add-item { background: rgba(34, 197, 94, 0.18); color: #16a34a; }
.action-btn.add-item:hover:not(:disabled) { background: #16a34a; color: #fff; }
.action-btn.edit-order { background: rgba(59, 130, 246, 0.18); color: #2563eb; }
.action-btn.edit-order:hover:not(:disabled) { background: #2563eb; color: #fff; }
.text-center { text-align: center; }
.online-orders-panel { margin-top: 32px; padding: 20px; }
.online-orders-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.online-order-status-filters { justify-content: flex-start; margin-bottom: 12px; }
.online-order-search { margin-bottom: 16px; width: 100%; }
.online-order-search input { width: 100%; background: transparent; border: none; color: var(--text-primary); }
.online-order-search input:focus { outline: none; }
.online-order-meta { display: flex; flex-direction: column; gap: 4px; }
.online-order-meta small { color: var(--text-muted); }
.ordered-menu-cell { min-width: 150px; max-width: 240px; white-space: normal; }
.ordered-menu-line { line-height: 1.45; margin-bottom: 3px; color: var(--text-primary); }
.ordered-menu-line:last-child { margin-bottom: 0; }
.ordered-menu-line-cancelled { color: var(--text-muted); }
.ordered-menu-line-cancelled > span:first-child { text-decoration: line-through; }
.ordered-menu-line-cancelled small { display: block; color: var(--danger); font-size: 10px; line-height: 1.35; margin-top: 2px; }
.ordered-menu-cancelled-badge { display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 6px; border-radius: 4px; background: rgba(239, 68, 68, 0.2); color: var(--danger); font-size: 9px; font-weight: 700; text-decoration: none; vertical-align: middle; }
.online-address-cell { max-width: 260px; white-space: normal; }
.online-order-actions { display: flex; flex-wrap: wrap; gap: 6px; }

#orders-view .data-table {
    table-layout: fixed;
    min-width: 0;
    font-size: 13px;
}

#orders-view .data-table th,
#orders-view .data-table td {
    padding: 10px 9px;
    line-height: 1.4;
    text-align: left;
    vertical-align: middle;
}

#orders-view .data-table th {
    font-size: 11px;
}

#orders-view .data-table th:nth-child(1) { width: 8%; }
#orders-view .data-table th:nth-child(2) { width: 9%; }
#orders-view .data-table th:nth-child(3) { width: 7%; }
#orders-view .data-table th:nth-child(4) { width: 12%; }
#orders-view .data-table th:nth-child(5) { width: 15%; }
#orders-view .data-table th:nth-child(6) { width: 9%; }
#orders-view .data-table th:nth-child(7) { width: 10%; }
#orders-view .data-table th:nth-child(8) { width: 14%; }
#orders-view .data-table th:nth-child(9) { width: 16%; }

#orders-view .data-table td[data-label="Aksi"] {
    display: table-cell;
}

#orders-view .ordered-menu-cell {
    min-width: 0;
    max-width: none;
    overflow-wrap: anywhere;
}

#orders-view .ordered-menu-line {
    margin-bottom: 3px;
    font-size: 12px;
    line-height: 1.35;
}

#orders-view .data-table td[data-label="ID Pesanan"],
#orders-view .data-table td[data-label="Kode"] {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#orders-view .data-table td[data-label="ID Pesanan"] strong,
#orders-view .data-table td[data-label="ID Pesanan"] small,
#orders-view .data-table td[data-label="Kode"] strong,
#orders-view .data-table td[data-label="Kode"] small {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#orders-view .status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    padding: 4px 8px;
    font-size: 10px;
    line-height: 1.1;
    white-space: nowrap;
}

.orders-action-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

#orders-view .orders-action-list .action-btn {
    margin: 0;
    min-height: 30px;
    padding: 5px 7px;
    border-radius: 9px;
    font-size: 10.5px;
    line-height: 1.1;
    gap: 4px;
    white-space: nowrap;
}

#orders-view .orders-action-list .action-btn.print {
    background: rgba(14, 165, 233, 0.18);
    color: #38bdf8;
}

#orders-view .orders-action-list .action-btn.print:hover:not(:disabled) {
    background: #0ea5e9;
    color: white;
}

/* ==========================================================================
   PESANAN — TAMPILAN GRID (Kartu Tiket / Struk)
   ========================================================================== */

/* Toggle Grid ⇄ Tabel */
.orders-view-toggle {
    display: inline-flex;
    gap: 4px;
    margin-left: auto;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    padding: 3px;
}
.ovt-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all var(--trans-fast);
}
.ovt-btn.active { background: var(--primary); color: #fff; }
.ovt-btn:not(.active):hover { color: var(--text-primary); }

/* Grid container — kolom responsif: HP 2, tablet ke atas 4, layar besar 5.
   Tinggi dibatasi agar ~2 baris kartu langsung tampil di tablet. */
.orders-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
    margin-top: 14px;
    max-height: min(900px, calc(100dvh - 175px));
    overflow-y: auto;
    padding: 12px 10px;
}
@media (min-width: 768px) {
    .orders-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 1600px) {
    .orders-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.orders-grid-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 16px;
    color: var(--text-secondary);
}

/* Kartu tiket — PUTIH + Neomorphism + bayangan warna sesuai status.
   Warna teks di-hardcode (gelap) agar tetap terbaca di kartu putih pada
   tema gelap MAUPUN terang. Pembeda status: warna badge + glow bayangan. */
.order-ticket {
    --tk: #b45309;                       /* warna status (teks/aksen) */
    --glow: rgba(245, 158, 11, 0.45);    /* warna bayangan status */
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 270px;                       /* FIXED → semua kartu identik (≈2 baris muat di tablet) */
    overflow: hidden;                    /* pengaman: cegah footer melimpah */
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 16px;
    padding: 13px 14px 11px;
    color: #2b2723;
    box-shadow:
        0 10px 24px rgba(17, 24, 39, 0.10),
        0 6px 16px -6px var(--glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    transition: transform var(--trans-fast), box-shadow var(--trans-fast);
    animation: ticketIn 0.22s ease both;
}
/* Bagian tetap tidak boleh menyusut; hanya daftar item yang fleksibel + scroll */
.order-ticket > .ticket-top,
.order-ticket > .ticket-cust,
.order-ticket > .ticket-perf,
.order-ticket > .ticket-items-head,
.order-ticket > .ticket-tags,
.order-ticket > .ticket-foot { flex: 0 0 auto; }
.order-ticket:hover {
    transform: translateY(-3px);
    box-shadow:
        0 16px 34px rgba(17, 24, 39, 0.14),
        0 10px 22px -6px var(--glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
@keyframes ticketIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Warna status + glow bayangan per status */
.order-ticket.status-pending   { --tk: #b45309; --glow: rgba(245, 158, 11, 0.45); }
.order-ticket.status-processed { --tk: #6d28d9; --glow: rgba(139, 92, 246, 0.45); }
.order-ticket.status-completed { --tk: #047857; --glow: rgba(16, 185, 129, 0.42); }
.order-ticket.status-cancelled { --tk: #b91c1c; --glow: rgba(239, 68, 68, 0.35); opacity: 0.82; }
.order-ticket.status-offline   { --tk: #0f766e; --glow: rgba(20, 184, 166, 0.40); }
.order-ticket.status-cached    { --tk: #b45309; --glow: rgba(180, 83, 9, 0.40); opacity: 0.9; }

/* Badge status crisp di atas kartu putih */
.order-ticket .status-badge { background: rgba(0, 0, 0, 0.05); color: #4b5563; }
.order-ticket.status-pending   .status-badge { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.order-ticket.status-processed .status-badge { background: rgba(139, 92, 246, 0.16); color: #6d28d9; }
.order-ticket.status-completed .status-badge { background: rgba(16, 185, 129, 0.16); color: #047857; }
.order-ticket.status-cancelled .status-badge { background: rgba(239, 68, 68, 0.16); color: #b91c1c; }
.order-ticket.status-offline   .status-badge { background: rgba(20, 184, 166, 0.16); color: #0f766e; }
.order-ticket.status-cached    .status-badge { background: rgba(180, 83, 9, 0.16); color: #b45309; }

.ticket-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.ticket-no {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: 11px;                 /* dikecilkan agar badge status muat */
    letter-spacing: 0.2px;
    color: #9aa0a6;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 1 auto;
    min-width: 0;                    /* boleh menyusut → elipsis bekerja */
    overflow: hidden;
}
.ticket-no i { color: var(--tk); flex: 0 0 auto; }
/* Nomor pesanan: 1 baris, potong dengan … bila kepanjangan */
.ticket-no-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Badge status: jangan pernah menyusut/terpotong */
.order-ticket .ticket-top .status-badge { flex: 0 0 auto; white-space: nowrap; }

.ticket-cust { display: flex; flex-direction: column; gap: 2px; }
.ticket-cust-name {
    font-size: 17px;
    font-weight: 800;
    color: #1f2937;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ticket-meta {
    font-size: 12px;
    color: #6b7280;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* Pesanan pending yang sudah lama (>20 mnt): glow amber berkedip sebagai
   penanda urgensi (waktu "X mnt lalu" sudah tampil di meta). */
.order-ticket.is-stale {
    animation: ticketIn 0.22s ease both, stalePulse 2.4s ease-in-out infinite;
}
@keyframes stalePulse {
    0%, 100% { box-shadow: 0 10px 24px rgba(17,24,39,0.10), 0 6px 16px -6px var(--glow), inset 0 1px 0 rgba(255,255,255,0.85); }
    50%      { box-shadow: 0 10px 24px rgba(17,24,39,0.10), 0 0 0 2px var(--glow), 0 8px 20px -4px var(--glow), inset 0 1px 0 rgba(255,255,255,0.85); }
}

/* Garis perforasi ala struk */
.ticket-perf {
    height: 0;
    border-top: 1.5px dashed rgba(0, 0, 0, 0.12);
}

/* Judul kecil daftar item + jumlah (signal saat item banyak) */
.ticket-items-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #9aa0a6;
}
.ticket-items-count { color: var(--tk); }

/* Daftar item: mengisi sisa ruang kartu & SCROLL bila banyak (kartu tetap fixed) */
.ticket-items {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13.5px;
    color: #374151;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
}
.ticket-items::-webkit-scrollbar { width: 6px; }
.ticket-items::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.18); border-radius: 3px; }
.ticket-items::-webkit-scrollbar-track { background: transparent; }
.ticket-items .ordered-menu-line { padding: 1px 0; }

.ticket-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ticket-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 5px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.tag-bazar { background: #4338ca; }
.tag-promo { background: #10b981; }
.tag-local { background: #0f766e; }
.tag-cached { background: #b45309; }

.orders-grid-offline-banner {
    grid-column: 1 / -1;
    background: rgba(180, 83, 9, 0.14);
    color: #b45309;
    font-size: 13px;
    font-weight: 600;
    padding: 12px 14px;
    border-radius: var(--radius-md);
}

/* Footer kartu: total + aksi, selalu di bawah (didorong oleh .ticket-items flex:1) */
.ticket-foot { display: flex; flex-direction: column; gap: 6px; }

.ticket-money {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ticket-total { font-size: 19px; font-weight: 800; color: #1f2937; }
.pay-chip {
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    white-space: nowrap;
}
.pay-chip.pay-paid   { background: rgba(16, 185, 129, 0.16); color: #047857; }
.pay-chip.pay-unpaid { background: rgba(245, 158, 11, 0.16); color: #b45309; }

/* Teks muted dalam kartu tetap terbaca di putih */
.order-ticket .text-muted { color: #6b7280; }

/* Tombol aksi di kartu: sedikit lebih besar utk jempol; aksi utama melebar.
   Prefix #orders-view agar menang spesifisitas dari aturan tabel di atas. */
#orders-view .order-ticket .orders-action-list { gap: 6px; }
#orders-view .order-ticket .orders-action-list .action-btn {
    min-height: 34px;
    padding: 7px 9px;
    font-size: 11.5px;
    border-radius: 9px;
}
/* Tombol sekunder jadi ikon saja (label tetap via tooltip) → kartu ringkas */
#orders-view .order-ticket .action-btn span { display: none; }
/* Aksi utama (Proses/Selesai): pindah ke BARIS BAWAH sendiri (order), penuh & menonjol.
   Tanpa order, posisinya di tengah daftar bikin pecah jadi 3 baris. */
#orders-view .order-ticket .orders-action-list .action-btn.process,
#orders-view .order-ticket .orders-action-list .action-btn.complete {
    order: 1;
    flex: 1 1 100%;
    justify-content: center;
    font-weight: 700;
    min-height: 36px;
}
/* .view pakai var(--accent) yang di tema gelap = krem terang → tak terbaca di
   kartu putih. Paksa hijau agar kontras. */
#orders-view .order-ticket .orders-action-list .action-btn.view {
    background: rgba(16, 185, 129, 0.16);
    color: #047857;
}
#orders-view .order-ticket .orders-action-list .action-btn.view:hover:not(:disabled) {
    background: #047857;
    color: #fff;
}

/* ── Rapikan header/filter Pesanan (hemat ruang vertikal, terutama di tablet) ── */
.order-filters .filter-btn { padding: 7px 13px; font-size: 12.5px; }

/* Baris filter pane: status (kiri) · cari (fleksibel) · toggle (kanan) → 1 baris.
   Hanya ≥600px; di HP biarkan menumpuk seperti sedia kala. */
@media (min-width: 600px) {
    #orders-pane-langsung .order-filters {
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 0;
    }
    #orders-pane-langsung #customer-debt-search {
        width: auto !important;
        flex: 1 1 170px;
        min-width: 150px;
        max-width: 320px;
    }
}

/* Tablet & bawah: pangkas padding/margin supaya grid dapat ruang lebih besar */
@media (max-width: 1024px) {
    #orders-view .orders-layout.p-24 { padding: 14px !important; }
    #orders-view .orders-header { margin-bottom: 12px; }
    #orders-view .dash-tab-nav { margin-bottom: 10px !important; }
    .orders-grid { margin-top: 10px; max-height: calc(100dvh - 165px); }
}

@media (max-width: 768px) {
    .orders-view-toggle { margin-left: 0; }
}
@media (max-width: 380px) {
    .orders-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .orders-view-toggle { width: 100%; justify-content: center; }
    .orders-view-toggle .ovt-btn { flex: 1; justify-content: center; }
}

/* ==========================================================================
   NOTIFICATIONS DROPDOWN
   ========================================================================== */
.notif-dropdown { position: absolute; top: 35px; right: 0; width: 300px; border-radius: var(--radius-md); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s; z-index: 100; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.notif-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); }
.notif-header { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-bottom: 1px solid var(--border-color); }
.notif-header h4 { font-size: 14px; margin: 0; color: var(--text-primary) !important; }
#mark-read-btn { background: none; border: none; font-size: 11px; color: var(--text-secondary); cursor: pointer; }
#mark-read-btn:hover { color: var(--text-primary); text-decoration: underline; }
.notif-list { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; padding: 5px; }
.notif-item { padding: 12px; border-radius: var(--radius-sm); border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; gap: 5px; cursor: pointer; text-align:left; }
.notif-item:hover { background: rgba(255,255,255,0.05); }
.notif-item.unread { background: rgba(139, 92, 246, 0.1); }
.notif-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.notif-msg { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.notif-time { font-size: 10px; color: var(--text-muted); align-self: flex-end; }
.empty-notif { padding: 18px 12px; color: var(--text-secondary); text-align: center; font-size: 13px; }

body.light-mode .toast {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(0, 0, 0, 0.12);
}

body.light-mode .notif-dropdown {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}

body.light-mode .notif-item {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light-mode .notif-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

body.light-mode .notif-item.unread {
    background: rgba(0, 0, 0, 0.07);
}

/* ==========================================================================
   RESPONSIVE DESIGN (MOBILE & TABLET)
   ========================================================================== */

/* Mobile Header & Overlay (Hidden by default) */
.mobile-top-header {
    display: none;
    height: 60px;
    padding: 0 16px;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-panel);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.hamburger-btn {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 24px;
    cursor: pointer;
}

@media (max-width: 1024px) {
    .sidebar-collapse-btn {
        display: none;
    }
}

.mobile-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 18px;
    color: var(--primary);
}

.mobile-logo .brand-logo-img {
    width: 26px;
    height: 26px;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    z-index: 1999;
}

/* Floating Cart FAB */
.mobile-cart-fab {
    display: none !important; /* Force hide on desktop/tablet */
    position: fixed;
    bottom: 110px; /* Shifted up to avoid bottom navbar */
    right: 24px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    box-shadow: 0 10px 25px var(--primary-glow);
    z-index: 90;
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.2s;
}

.mobile-cart-fab:active {
    transform: scale(0.9);
}

.mobile-cart-fab .badge {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--danger);
    width: 20px;
    height: 20px;
    font-size: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tablet & Small Desktop (769px - 1366px) */
@media (min-width: 769px) and (max-width: 1366px) {
    .products-section {
        padding: 16px;
    }

    .categories-wrapper {
        margin-bottom: 14px;
    }

    .menu-grid {
        grid-template-columns: repeat(auto-fill, minmax(136px, 1fr));
        gap: 12px;
        padding: 6px 6px 48px;
    }

    .menu-img-container {
        height: 96px;
    }

    .menu-title {
        font-size: 13px;
        line-height: 1.3;
        margin-bottom: 4px;
    }
    
    .menu-price {
        font-size: 14px;
    }

    .menu-details {
        padding: 10px !important;
        padding-bottom: 14px !important;
        min-height: 76px !important;
    }

    .menu-card {
        min-height: 174px !important;
        height: auto !important;
        border-radius: 14px;
    }
}

/* ==========================================================================
   LANDSCAPE TABLET OPTIMIZATIONS (e.g. Infinix Xpad 20 1920x1200 landscape)
   Compact the cart bottom area to maximize item list space
   ========================================================================== */
@media (min-width: 769px) and (max-height: 1250px) {
    /* Cart summary - extremely tight */
    .cart-summary {
        padding: 4px 16px 2px !important;
    }
    .summary-line {
        margin-bottom: 2px !important;
        font-size: 12px !important;
    }
    .summary-line.total {
        margin-top: 4px !important;
        padding-top: 4px !important;
        font-size: 15px !important;
    }

    /* Promo code section - super compact */
    .promo-code-container {
        padding: 4px 0 !important;
        margin-bottom: 2px !important;
        margin-top: 2px !important;
    }
    .promo-code-container.mb-12, 
    .promo-code-container.mt-12 {
        margin-bottom: 2px !important;
        margin-top: 2px !important;
    }
    .promo-code-container .glass-input {
        padding: 4px 8px !important;
        font-size: 11px !important;
        height: 30px !important;
    }
    .promo-code-container .btn-primary {
        padding: 4px 8px !important;
        font-size: 11px !important;
        height: 30px !important;
    }

    /* Payment buttons - flat & tight */
    .payment-method-selector {
        padding: 0 16px 10px !important;
        margin-top: -6px !important;
    }
    .payment-method-selector h4 {
        font-size: 11px !important;
        margin-bottom: 3px !important;
    }
    .pay-btn {
        padding: 3px 8px 5px !important;
        font-size: 11px !important;
        line-height: 1.1 !important;
        gap: 2px !important;
        height: 40px !important;
        overflow: hidden !important;
    }
    .payment-method-selector .pay-btn i {
        font-size: 15px !important;
    }

    /* Charge button - compact */
    .btn-checkout {
        margin: 0 16px 8px !important;
        padding: 10px !important;
        font-size: 14px !important;
        height: 44px !important;
        position: relative;
        z-index: 2;
    }

    /* Cart header */
    .cart-header {
        padding: 10px 16px !important;
    }
    .cart-header h3 {
        font-size: 15px !important;
    }

    /* Inputs */
    .order-type-selector {
        padding: 8px 16px !important;
        gap: 6px !important;
    }
    .type-btn {
        padding: 4px !important;
        font-size: 12px !important;
    }
    .customer-name-input {
        padding: 4px 16px !important;
    }
    .customer-name-field {
        padding: 6px 10px !important;
        font-size: 12px !important;
        height: 32px !important;
    }

    /* Bazaar & Kurir toggle — berdampingan, ringkas */
    .order-toggles-row {
        gap: 8px;
        margin-bottom: 2px;
    }
    .bazaar-toggle-container,
    .courier-toggle-container {
        padding: 4px 10px !important;
        margin-bottom: 0 !important;
    }
    .bazaar-toggle-container span,
    .courier-toggle-container span {
        font-size: 12px !important;
    }

    /* Cart items list - give it all the space */
    .cart-items {
        padding: 0 16px !important;
        gap: 6px !important;
    }
    .cart-item {
        padding: 6px 8px !important;
    }
}

/* Phone landscape uses the tablet-style app shell: sidebar + topbar + inline cart. */
@media (orientation: landscape) and (max-width: 1024px) and (max-height: 600px) {
    :root {
        --cart-width: clamp(280px, 36vw, 360px);
    }

    body {
        overflow: hidden;
    }

    #app-screen.view-active {
        display: flex;
        flex-direction: row;
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }

    .mobile-top-header,
    .mobile-bottom-nav,
    .mobile-cart-fab,
    .sidebar-overlay {
        display: none !important;
    }

    .sidebar {
        position: relative !important;
        inset: auto !important;
        width: var(--sidebar-collapsed-width) !important;
        max-width: var(--sidebar-collapsed-width) !important;
        height: 100vh;
        height: 100dvh;
        padding-top: 0 !important;
        background: var(--bg-panel) !important;
        box-shadow: none !important;
        z-index: 10;
        transform: none !important;
        transition: none;
    }

    .sidebar.sidebar-open {
        left: auto !important;
    }

    .sidebar-logo {
        height: 48px;
        justify-content: center;
        padding: 0 10px;
    }

    .sidebar-brand {
        justify-content: center;
    }

    .sidebar-brand span,
    .sidebar-collapse-btn,
    .nav-group-title,
    .nav-item span:not(.badge),
    .nav-sync-status span:not(.sync-badge),
    .user-details {
        display: none !important;
    }

    .brand-logo-img {
        width: 30px;
        height: 30px;
    }

    .sidebar-nav {
        padding: 10px 8px;
        gap: 6px;
        overflow-x: hidden;
    }

    .nav-group {
        gap: 6px;
    }

    .nav-group + .nav-group {
        margin-top: 6px;
        padding-top: 6px;
    }

    .nav-item,
    .nav-sync-status {
        justify-content: center;
        gap: 0;
        min-height: 42px;
        padding: 9px 0;
        border-radius: 14px;
    }

    .nav-item i,
    .nav-sync-status i {
        width: auto;
        flex: 0 0 auto;
        font-size: 17px;
    }

    .nav-item .badge,
    .nav-sync-status .sync-badge {
        position: absolute;
        top: 2px;
        right: 2px;
        margin-left: 0 !important;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border: 2px solid var(--bg-base);
        font-size: 9px;
        line-height: 13px;
    }

    .sidebar-footer {
        padding: 8px;
    }

    .user-info {
        justify-content: center;
        margin-bottom: 8px;
        padding: 0;
    }

    .user-info .avatar {
        width: 38px;
        height: 38px;
    }

    .main-content {
        height: 100vh !important;
        height: 100dvh !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
    }

    .topbar {
        display: flex !important;
        height: 48px;
        min-height: 48px;
        padding: 0 14px;
        gap: 12px;
    }

    .search-bar {
        width: min(260px, 32vw);
        height: 34px;
    }

    .search-bar i {
        font-size: 13px;
    }

    .search-bar input {
        font-size: 12px;
    }

    .datetime {
        display: none;
    }

    .topbar-right {
        gap: 10px;
    }

    .topbar .icon-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
    }

    .view-content {
        height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-bottom: 0 !important;
        scroll-padding-bottom: 0 !important;
    }

    #pos-view.active-view {
        display: flex !important;
        flex-direction: column;
        height: 100% !important;
        overflow: hidden !important;
    }

    .pos-layout {
        flex-direction: row;
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .products-section {
        min-width: 0;
        padding: 10px;
    }

    .products-section::after {
        height: 22px;
    }

    .categories-wrapper {
        margin-bottom: 8px;
        padding: 5px;
        border-radius: 14px;
    }

    .categories-list {
        gap: 6px;
    }

    .category-item {
        min-height: 34px;
        padding: 7px 13px;
        font-size: 12px;
    }

    .menu-grid {
        grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
        gap: 8px;
        padding: 3px 3px 26px;
    }

    .menu-card {
        min-height: 142px !important;
        border-radius: 12px;
    }

    .menu-card:hover {
        transform: none;
    }

    .menu-img-container,
    .menu-card img {
        height: 70px !important;
    }

    .menu-details {
        min-height: 66px !important;
        padding: 8px !important;
    }

    .menu-title {
        font-size: 12px;
        line-height: 1.25;
        margin-bottom: 4px;
    }

    .menu-price {
        padding-right: 34px;
        font-size: 12px;
    }

    .menu-add-btn {
        right: 6px;
        bottom: 6px;
        width: 32px;
        height: 32px;
        border-radius: 12px;
        opacity: 1;
        transform: none;
    }

    .cart-section {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-content: start;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        width: var(--cart-width) !important;
        max-width: var(--cart-width) !important;
        height: 100% !important;
        max-height: none !important;
        padding-top: 0 !important;
        border-radius: 0 !important;
        border-top: 0 !important;
        z-index: auto !important;
        transform: none !important;
        transition: none;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    .cart-section::before {
        display: none !important;
    }

    .cart-section.cart-open {
        bottom: auto !important;
    }

    .cart-header,
    .order-type-selector,
    .customer-name-input,
    .advanced-options,
    .cart-items,
    .cart-summary,
    .payment-method-selector,
    .btn-checkout {
        grid-column: 1 / -1;
    }

    .cart-header {
        min-height: 34px;
        padding: 4px 12px !important;
    }

    .cart-header h3 {
        font-size: 13px !important;
    }

    .cart-header .icon-btn,
    .clear-cart-btn {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
    }

    .order-type-selector {
        padding: 4px 12px !important;
        gap: 6px !important;
    }

    .type-btn {
        min-height: 28px;
        padding: 5px !important;
        font-size: 11px !important;
    }

    .customer-name-input {
        padding: 3px 12px !important;
    }

    .customer-name-field {
        min-height: 28px;
        height: 28px;
        padding: 6px 8px !important;
        font-size: 12px !important;
    }

    .cart-items {
        flex: 0 0 auto;
        min-height: 104px;
        max-height: clamp(112px, 34dvh, 150px);
        padding: 0 12px !important;
        gap: 5px !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    .cart-items:has(.empty-cart-msg) {
        min-height: 24px;
        max-height: 24px;
    }

    .empty-cart-msg {
        height: 24px;
        min-height: 24px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 8px;
        font-size: 11px;
    }

    .empty-cart-msg i {
        display: none;
    }

    .cart-item {
        flex-shrink: 0;
        min-height: 46px;
        padding: 7px 8px !important;
        gap: 7px;
    }

    .cart-item-name {
        font-size: 12px;
        line-height: 1.2;
        margin-bottom: 2px;
    }

    .cart-item-price,
    .summary-line {
        font-size: 11px !important;
    }

    .cart-item-controls {
        gap: 6px;
    }

    .qty-btn {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
    }

    .remove-item-btn {
        width: 26px;
        height: 26px;
        flex: 0 0 26px;
        margin-left: 2px;
    }

    .cart-summary {
        padding: 2px 12px !important;
    }

    .bazaar-toggle-container,
    .courier-toggle-container {
        min-height: 32px !important;
        padding: 4px 8px !important;
        border-radius: 10px !important;
    }

    .advanced-options {
        padding: 0 12px !important;
        margin-bottom: 4px !important;
    }

    .advanced-options-body {
        padding-top: 6px;
    }

    .order-toggles-row {
        margin: 0 0 4px !important;
        gap: 6px;
    }

    .order-toggles-row > .bazaar-toggle-container,
    .order-toggles-row > .courier-toggle-container {
        margin: 0 !important;
    }

    .bazaar-toggle-container > div,
    .courier-toggle-container > div {
        gap: 8px !important;
    }

    .bazaar-toggle-container i,
    .courier-toggle-container i {
        font-size: 16px !important;
    }

    .bazaar-toggle-container span,
    .courier-toggle-container span {
        font-size: 12px !important;
        line-height: 1.15;
    }

    .bazaar-toggle-container label,
    .courier-toggle-container label {
        transform: scale(0.78);
        transform-origin: right center;
    }

    #courier-checkout-section {
        margin: 0 0 4px !important;
        padding: 6px 8px !important;
        border-radius: 10px !important;
    }

    #courier-checkout-section select {
        min-height: 30px !important;
        height: 30px;
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    .summary-line {
        margin-bottom: 2px !important;
    }

    .summary-line.total {
        margin-top: 3px !important;
        padding-top: 3px !important;
        font-size: 13px !important;
    }

    .promo-code-container {
        padding: 4px 0 !important;
        margin: 2px 0 !important;
    }

    .promo-code-container .glass-input,
    .promo-code-container .btn-primary {
        height: 30px !important;
        min-height: 30px !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    .payment-method-selector {
        padding: 0 12px 6px !important;
        margin-top: -6px !important;
    }

    .payment-method-selector h4 {
        display: none;
    }

    .payment-options {
        gap: 6px;
    }

    .pay-btn {
        height: 30px !important;
        min-height: 30px;
        padding: 3px 6px !important;
        flex-direction: row;
        justify-content: center;
        gap: 5px !important;
        font-size: 10.5px !important;
        line-height: 1.1 !important;
    }

    .pay-btn i {
        font-size: 13px !important;
    }

    .btn-checkout {
        height: 34px !important;
        min-height: 34px;
        margin: 0 12px 4px !important;
        padding: 6px 10px !important;
        font-size: 13px !important;
    }
}

/* MOBILE BREAKPOINT (PHONES ONLY) */
@media (max-width: 768px) and (orientation: portrait) {
    :root {
        --sidebar-width: 280px;
        --cart-width: 100%;
    }

    /* Kartu sempit di phone → toggle Bazar & Kurir kembali di-stack (menumpuk). */
    .order-toggles-row {
        flex-direction: column;
        gap: 0;
    }

    body {
        overflow-y: auto; /* Allow layout to flow on phone */
        overflow-x: hidden;
    }

    #app-screen {
        flex-direction: column;
    }

    .mobile-top-header {
        display: flex;
    }

    /* Sidebar Drawer Mode */
    .sidebar {
        position: fixed;
        top: 0;
        left: -100%; /* Hidden off-screen */
        width: var(--sidebar-width);
        max-width: 92vw;
        height: 100vh;
        height: 100dvh;
        z-index: 2000;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background: var(--bg-base);
        box-shadow: 20px 0 50px rgba(0,0,0,0.5);
    }

    .sidebar.sidebar-open {
        left: 0;
    }

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

    .main-content {
        margin-top: 60px; /* Space for mobile header */
        height: calc(100vh - 60px);
        overflow-y: auto !important;
    }

    .view-content {
        height: auto !important;
        overflow: visible !important;
    }

    .view-content.active-view {
        display: block !important;
    }

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

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

    .dash-tab-btn span { display: none; }
    .dash-tab-btn { padding: 10px 14px; }
    .wallet-hero { flex-direction: column; gap: 16px; text-align: center; padding: 20px; }
    .wallet-hero-icon { font-size: 36px; }
    .wallet-hero-amount { font-size: 28px; }
    .wallet-cards-grid { grid-template-columns: 1fr 1fr; }
    .wallet-mapping-row { grid-template-columns: 1fr; gap: 8px; }
    .wallet-mapping-arrow { display: none; }

    .topbar {
        display: none; /* Hide desktop topbar */
    }

    /* POS Responsive */
    .pos-layout {
        flex-direction: column;
        height: auto;
    }

    .products-section {
        padding: 16px;
    }

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

    .menu-card img, .menu-card .menu-img-container {
        height: 120px;
    }

    /* Cart Overlay Mode */
    .cart-section {
        position: fixed;
        bottom: -100%;
        left: 0;
        width: 100%;
        height: 80vh;
        z-index: 2000;
        transition: bottom 0.3s ease;
        background: var(--bg-base);
        border-radius: 30px 30px 0 0 !important;
        border-top: 2px solid var(--primary);
    }

    .cart-section.cart-open {
        bottom: 0;
    }

    .mobile-cart-fab {
        display: none !important; /* Hide by default even on mobile if empty */
    }

    .mobile-cart-fab.has-items {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    #login-screen {
        align-items: flex-start;
        overflow-y: auto;
        padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
    }

    #login-screen .login-container {
        margin: clamp(12px, 4vh, 28px) auto 16px;
        width: 100%;
        max-width: 420px;
    }

    /* TABLE TO CARDS */
    .data-table, .data-table thead, .data-table tbody, .data-table th, .data-table td, .data-table tr {
        display: block;
    }

    .data-table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .data-table tr {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        margin-bottom: 16px;
        padding: 12px;
    }

    .data-table td {
        border: none;
        position: relative;
        padding-left: 50% !important;
        text-align: right;
        margin-bottom: 8px;
        min-height: 24px;
    }

    .data-table td:before {
        position: absolute;
        left: 12px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        color: var(--text-secondary);
        content: attr(data-label);
    }

    .data-table td:last-child {
        margin-bottom: 0;
        border-top: 1px solid var(--border-color);
        padding-top: 12px;
        justify-content: flex-end;
        display: flex;
        padding-left: 0 !important;
        text-align: center;
    }

    /* Reservation Specific Mobile Tweaks */
    #reservasi-table-body td[data-label="WhatsApp"] a {
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    #reservasi-table-body .status-badge {
        font-size: 10px;
        padding: 4px 12px;
    }

    /* Attendance Grid */
    .grid-2-1 {
        grid-template-columns: 1fr !important;
    }

    /* Forms */
    .glass-panel {
        max-width: 100% !important;
    }

    .form-grid {
        grid-template-columns: 1fr !important;
    }

    /* Touch Friendly Buttons */
    .btn-primary, .btn-text, .nav-item, .category-item {
        min-height: 50px;
    }
    
    .action-btn {
        padding: 10px 16px !important;
        font-size: 14px;
    }
}

/* Small Mobile Specifics */
@media (max-width: 480px) {
    .menu-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .view-title {
        font-size: 20px;
    }
    
    .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .stat-card {
        padding: 16px !important;
    }

    .wallet-cards-grid { grid-template-columns: 1fr !important; }
    .wallet-modal { max-width: 100%; }
    
    .stat-label {
        font-size: 10px;
    }
    
    .stat-value {
        font-size: 14px !important;
    }

    #login-screen .login-container {
        padding: 24px 18px;
    }

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

    .login-header h2 {
        font-size: 24px;
    }

    .login-header p {
        font-size: 13px;
    }
}

/* ==========================================================================
   MOBILE BOTTOM NAVIGATION (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) and (orientation: portrait) {
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 20px;
        left: 20px;
        right: 20px;
        height: 70px;
        background: var(--bg-panel);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border: 1px solid var(--border-color);
        border-radius: 40px;
        z-index: 1000;
        justify-content: space-around;
        align-items: center;
        padding: 0 10px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 
                    0 4px 10px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: var(--text-secondary);
        flex: 1;
        height: 100%;
        transition: all var(--trans-fast);
        gap: 4px;
        position: relative;
    }

    .mobile-nav-item i {
        font-size: 20px;
    }

    .mobile-nav-item span {
        font-size: 10px;
        font-weight: 500;
    }

    .mobile-nav-item.active {
        color: var(--primary);
    }

    .mobile-nav-item.active i {
        filter: drop-shadow(0 0 5px var(--primary-glow));
    }

    /* Floating Center Button */
    .mobile-nav-center {
        position: relative;
        width: 80px;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 1001;
    }

    .mobile-fab {
        position: absolute;
        top: -30px;
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, var(--primary), var(--secondary));
        border: 4px solid var(--bg-base);
        border-radius: 50%;
        color: white;
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        outline: none;
        border: 4px solid var(--bg-base);
    }

    .mobile-fab:active {
        transform: scale(0.9) translateY(5px);
    }

    .fab-label {
        margin-top: auto;
        margin-bottom: 8px;
        font-size: 10px;
        font-weight: 600;
        color: var(--text-secondary);
    }

    /* Active Indicator */
    .mobile-nav-item.active::after {
        content: '';
        position: absolute;
        bottom: 8px;
        width: 4px;
        height: 4px;
        background: var(--primary);
        border-radius: 50%;
        box-shadow: 0 0 8px var(--primary);
    }

    /* Content Padding Adjustment */
    .main-content {
        padding-bottom: 100px !important;
    }
    
    /* Reposition Toast if needed */
    #toast-container {
        bottom: 100px;
    }
}

/* Hide on Desktop */
@media (min-width: 769px) {
    .mobile-bottom-nav {
        display: none;
    }
}

/* ---------------------------------------------------------
   REPORTING & FILTERS
--------------------------------------------------------- */
.order-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    min-width: 0;
}

.orders-header .view-title {
    margin-bottom: 0;
}

.filter-group, .date-filter-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.date-filter-group {
    padding: 6px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.date-range-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-input {
    padding: 9px 12px;
    font-size: 13px;
    width: 148px !important;
    color-scheme: dark;
    color: var(--text-primary);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.2);
    outline: none;
    transition: all var(--trans-fast);
    -webkit-appearance: none;
    appearance: none;
    min-height: 38px;
    box-sizing: border-box;
}

/* Fix text alignment & clipping di iOS Safari */
.date-input::-webkit-date-and-time-value {
    min-height: 1.5em;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.date-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

body.light-mode .date-input {
    color-scheme: light;
    background: rgba(255, 255, 255, 0.85);
}

.date-separator {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.print-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: white;
    border: 1px solid transparent;
    box-shadow: 0 6px 16px var(--primary-glow);
}

.print-btn span {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.print-btn:hover {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary));
    color: white;
    transform: translateY(-1px);
}

@media (max-width: 768px) and (orientation: portrait) {
    .orders-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .order-filters {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    .filter-group {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        padding: 6px;
        border-radius: var(--radius-full);
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid var(--border-color);
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .filter-group::-webkit-scrollbar {
        height: 4px;
    }

    .filter-btn {
        flex: 0 0 auto;
        min-height: 40px;
        white-space: nowrap;
    }

    .filter-btn.active {
        box-shadow: 0 6px 16px var(--primary-glow);
    }

    .date-filter-group {
        width: 100%;
        border-radius: var(--radius-md);
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .date-range-inputs {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 8px;
        align-items: center;
    }

    .date-input {
        width: 100% !important;
        min-height: 42px;
    }

    .date-separator {
        text-align: center;
    }

    .print-btn {
        width: 100%;
    }
}

.order-summary {
    display: flex;
    gap: 32px;
    padding: 20px 32px;
    align-items: center;
    border-left: 4px solid var(--primary);
}

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

.summary-item .label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.summary-item .value {
    font-size: 20px;
    font-weight: 700;
}

.summary-divider {
    width: 1px;
    height: 35px;
    background: var(--border-color);
    opacity: 0.5;
}

/* Print Utilities */
.print-only { display: none; }

.net-profit {
    font-weight: bold;
    font-size: 18px;
    color: #16a34a;
}

/* table-print removed from here to prevent UI regression */

@media print {
    /* Reset layout for printing */
    html, body {
        height: auto !important;
        overflow: visible !important;
        background: white !important;
        color: black !important;
        width: 100% !important;
    }

    .main-content {
        position: relative !important;
        overflow: visible !important;
        height: auto !important;
        background: white !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* Hide UI elements */
    .sidebar, .topbar, .mobile-top-header, .mobile-bottom-nav, 
    .mobile-cart-fab, .sidebar-overlay, .attendance-filters, 
    .attendance-actions, .order-filters, #toast-container,
    .btn-primary, .icon-btn, .search-bar {
        display: none !important;
    }

    /* Show only target view */
    .view-content {
        display: none !important;
        opacity: 1 !important;
        position: relative !important;
    }

    .active-view {
        display: block !important;
    }

    /* Print Titles and Headers */
    .print-only {
        display: block !important;
        visibility: visible !important;
    }

    /* Table styling for print */
    .glass-panel {
        background: transparent !important;
        backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .table-container {
        overflow: visible !important;
        height: auto !important;
    }

    .data-table {
        width: 100% !important;
        border-collapse: collapse !important;
        color: black !important;
        margin-top: 20px;
    }

    .data-table th, .data-table td {
        border: 1px solid #333 !important;
        padding: 10px !important;
        text-align: left !important;
        background: transparent !important;
        color: black !important;
    }

    .data-table th {
        background: #f0f0f0 !important;
        font-weight: bold !important;
    }

    .data-table img {
        max-width: 60px !important;
        height: auto !important;
    }

    .status-badge {
        background: transparent !important;
        border: 1px solid #333 !important;
        color: black !important;
        padding: 2px 8px !important;
    }

    /* Ensure table text is black even in dark theme */
    .data-table strong, .text-muted {
        color: black !important;
    }

    /* Page breaks */
    tr {
        page-break-inside: avoid;
    }

    /* Attendance Table Print Overrides */
    .print-table {
        width: 100% !important;
        border-collapse: collapse !important;
        table-layout: fixed !important;
        page-break-inside: auto;
    }

    .print-table th,
    .print-table td {
        border: 1px solid #000 !important;
        padding: 8px !important;
        text-align: center !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        font-size: 12px !important;
        color: #000 !important;
        white-space: normal !important;
        line-height: 1.4 !important;
    }

    .print-table tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    .col-no { width: 40px; }
    .col-nama { width: 20%; }
    .col-tanggal { width: 12%; }
    .col-checkin { width: 10%; }
    .col-checkout { width: 10%; }
    .col-foto { width: 80px; }
    .col-keterangan { width: auto; }

    @page {
        size: A4;
        margin: 1cm;
    }
}

/* Margin Utilities */
.mb-8 { margin-bottom: 8px !important; }
.mb-16 { margin-bottom: 16px !important; }
.mb-24 { margin-bottom: 24px !important; }
.mb-32 { margin-bottom: 32px !important; }
.mb-40 { margin-bottom: 40px !important; }
.mb-48 { margin-bottom: 48px !important; }

.orders-header {
    margin-bottom: 32px;
}

.stats-grid {
    margin-bottom: 32px;
}

/* ==========================================================================
   OFFLINE / SYNC UI
   ========================================================================== */

/* Network Status Bar - Fixed at top */
.network-status-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-main);
    letter-spacing: 0.3px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
}

.network-status-bar.hidden {
    transform: translateY(-100%);
    pointer-events: none;
}

.network-status-bar.offline {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: white;
    box-shadow: 0 2px 12px rgba(220, 38, 38, 0.4);
    animation: offlinePulse 2s infinite;
}

.network-status-bar.online {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: white;
    box-shadow: 0 2px 12px rgba(22, 163, 74, 0.4);
}

.network-status-bar i {
    font-size: 14px;
}

@keyframes offlinePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* Sync Status in Sidebar */
.nav-sync-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    margin-top: 8px;
    border-radius: var(--radius-md);
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.15);
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 14px;
    position: relative;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.nav-sync-status i {
    color: var(--primary);
    font-size: 16px;
}

.nav-sync-status:hover,
.sync-status-pill:hover,
.sync-status-button:hover {
    transform: translateY(-1px);
}

.nav-sync-status.syncing,
.sync-status-pill.syncing,
.sync-status-button.syncing {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.28);
    color: #93c5fd;
}

.nav-sync-status.has-pending,
.sync-status-pill.has-pending,
.sync-status-button.has-pending {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.32);
    color: #fbbf24;
}

.nav-sync-status.sync-error,
.sync-status-pill.sync-error,
.sync-status-button.sync-error {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.32);
    color: #fca5a5;
}

.nav-sync-status.synced,
.sync-status-pill.synced,
.sync-status-button.synced {
    background: rgba(34, 197, 94, 0.10);
    border-color: rgba(34, 197, 94, 0.24);
    color: #86efac;
}

.sync-status-pill {
    position: relative;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 12px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.sync-status-pill i,
.sync-status-button i {
    color: currentColor;
}

.sync-status-button {
    position: relative;
}

.sync-mini-badge {
    position: absolute;
    align-items: center;
    justify-content: center;
    top: -4px;
    right: -4px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    border: 2px solid var(--bg-panel);
    font-size: 10px;
    font-weight: 800;
    line-height: 15px;
    text-align: center;
}

/* Sync Badge (pending count) */
.sync-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--danger);
    color: white;
    font-size: 11px;
    font-weight: 700;
    margin-left: auto;
    animation: badgePop 0.3s ease;
}

@keyframes badgePop {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Offline Order Indicator */
.offline-order-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
    font-size: 11px;
    font-weight: 600;
}

.offline-order-tag i {
    font-size: 10px;
}

/* Syncing animation for sidebar icon */
.nav-sync-status.syncing i,
.sync-status-pill.syncing i,
.sync-status-button.syncing i {
    animation: syncSpin 1s linear infinite;
}

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

/* Light mode overrides for offline UI */
body.light-mode .network-status-bar.offline {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

body.light-mode .network-status-bar.online {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

body.light-mode .nav-sync-status {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.12);
}

body.light-mode .nav-sync-status i {
    color: var(--primary);
}

body.light-mode .sync-status-pill,
body.light-mode .sync-status-button {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(41, 71, 166, 0.20);
    color: var(--primary);
}

body.light-mode .nav-sync-status.synced,
body.light-mode .sync-status-pill.synced,
body.light-mode .sync-status-button.synced {
    color: #15803d;
}

body.light-mode .nav-sync-status.has-pending,
body.light-mode .sync-status-pill.has-pending,
body.light-mode .sync-status-button.has-pending {
    color: #b45309;
}

body.light-mode .nav-sync-status.sync-error,
body.light-mode .sync-status-pill.sync-error,
body.light-mode .sync-status-button.sync-error {
    color: #b91c1c;
}

.sync-status-modal-shell {
    width: min(92vw, 460px) !important;
    max-width: 460px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.sync-panel {
    padding: 24px;
}

.sync-panel-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.sync-panel-icon {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: rgba(34, 197, 94, 0.12);
    color: #86efac;
}

.sync-panel-icon.offline {
    background: rgba(245, 158, 11, 0.14);
    color: #fbbf24;
}

.sync-panel h3 {
    margin: 0 0 6px;
    font-size: 21px;
    line-height: 1.15;
    color: var(--text-primary);
}

.sync-panel p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.45;
}

.sync-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.sync-summary-grid div {
    min-width: 0;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-color);
}

.sync-summary-grid span,
.sync-detail-row span {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
}

.sync-summary-grid strong {
    display: block;
    margin-top: 6px;
    color: var(--text-primary);
    font-size: 24px;
    line-height: 1;
}

.sync-detail-table {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 14px;
}

.sync-detail-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 74px 64px;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
    border-bottom: 1px solid var(--border-color);
}

.sync-detail-row:last-child {
    border-bottom: 0;
}

.sync-detail-head {
    background: rgba(255, 255, 255, 0.05);
}

.sync-detail-row strong {
    text-align: right;
    color: var(--text-primary);
}

.sync-last-error {
    padding: 11px 12px;
    margin-bottom: 14px;
    border-radius: 14px;
    background: rgba(239, 68, 68, 0.10);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.4;
}

.sync-last-error strong {
    color: #fca5a5;
}

.sync-panel-actions {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 10px;
}

.sync-panel-actions button {
    min-height: 50px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 800;
}

.sync-panel-actions button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

body.light-mode .sync-summary-grid div,
body.light-mode .sync-detail-table {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(0, 0, 0, 0.10);
}

body.light-mode .sync-detail-head {
    background: rgba(0, 0, 0, 0.04);
}

body.light-mode .sync-panel-icon.online {
    color: #15803d;
}

body.light-mode .sync-last-error {
    background: rgba(239, 68, 68, 0.08);
}

body.light-mode .sync-last-error strong {
    color: #b91c1c;
}

/* Toast adjustments for offline messages */
.toast-info {
    border-left: 4px solid #3b82f6 !important;
}

.toast-warning {
    border-left: 4px solid #f59e0b !important;
}

/* Adjust body when network bar is visible */
.network-status-bar.offline ~ #login-screen,
.network-status-bar.offline ~ #app-screen {
    padding-top: 36px;
}

/* Mobile adjustments for network bar */
@media (max-width: 1024px) {
    .network-status-bar {
        font-size: 12px;
        padding: 6px 12px;
    }
    
    .network-status-bar.offline ~ #app-screen .mobile-top-header {
        top: 30px;
    }
    
    .nav-sync-status {
        padding: 10px 16px;
        font-size: 13px;
    }
}

/* ========================================================================== 
   SHIFT MANAGEMENT UI 
   ========================================================================== */ 
.shift-closing-modal, .shift-success-modal { 
    display: flex; 
    flex-direction: column; 
} 

.shift-modal-icon { 
    width: 80px; 
    height: 80px; 
    background: rgba(239, 68, 68, 0.1); 
    color: var(--danger); 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 32px; 
    margin: 0 auto 24px; 
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.2); 
} 

.shift-success-modal .shift-modal-icon { 
    background: rgba(16, 185, 129, 0.1); 
    color: var(--accent); 
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.2); 
} 

.shift-summary-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 16px; 
    margin-bottom: 24px; 
} 

.shift-summary-item { 
    background: rgba(255, 255, 255, 0.03); 
    border: 1px solid var(--border-color); 
    padding: 16px; 
    border-radius: var(--radius-md); 
    text-align: center; 
} 

.shift-summary-item .label { 
    display: block; 
    font-size: 11px; 
    color: var(--text-muted); 
    text-transform: uppercase; 
    margin-bottom: 8px; 
    letter-spacing: 0.5px; 
} 

.shift-summary-item .value { 
    font-size: 16px; 
    font-weight: 700; 
    color: var(--text-primary); 
} 

.shift-warning-box { 
    background: rgba(245, 158, 11, 0.1); 
    border-left: 4px solid var(--warning); 
    padding: 16px; 
    border-radius: 8px; 
    margin-bottom: 24px; 
    display: flex; 
    gap: 12px; 
    align-items: flex-start; 
} 

.shift-warning-box i { 
    color: var(--warning); 
    font-size: 18px; 
    margin-top: 2px; 
} 

.shift-warning-box p { 
    font-size: 13px; 
    color: var(--text-secondary); 
    line-height: 1.5; 
    margin: 0; 
} 

.shift-total-row { 
    background: rgba(255, 255, 255, 0.05); 
    padding: 20px; 
    border-radius: 12px; 
    margin-bottom: 32px; 
} 

.shift-total-row .row { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 12px; 
} 

.shift-total-row .row:last-child { 
    margin-bottom: 0; 
    padding-top: 12px; 
    border-top: 1px dashed var(--border-color); 
} 

.shift-total-row .label { font-size: 14px; color: var(--text-secondary); } 
.shift-total-row .value { font-weight: 700; font-size: 18px; } 
.shift-total-row .grand-total { font-size: 24px; color: var(--primary); } 

/* Shift Lock Screen Specifics */
#shift-lock-screen {
    background: radial-gradient(circle at center, #1e293b 0%, #0f172a 100%);
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5000;
}

#shift-lock-screen .login-container {
    max-width: 400px;
    width: 90%;
    padding: 48px 32px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.lock-badge {
    width: 100px;
    height: 100px;
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    margin: 0 auto 32px;
    position: relative;
    box-shadow: 0 0 30px rgba(245, 158, 11, 0.15);
}

.lock-badge::after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    border: 1px dashed var(--warning);
    opacity: 0.3;
    animation: rotate 10s linear infinite;
}

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

.shift-lock-title {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 12px;
    background: linear-gradient(to right, #fff, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.shift-lock-desc {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 32px;
}

/* Bazaar Styles */
.bazaar-mode-badge { display: flex; align-items: center; gap: 8px; padding: 6px 16px; background: linear-gradient(135deg, #f59e0b, #d97706); color: white; border-radius: 99px; font-size: 11px; font-weight: 700; margin: 0 20px; animation: pulse-bazaar 2s infinite; }
@keyframes pulse-bazaar { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
.price-breakdown { font-size: 12px; display: flex; flex-direction: column; color: #94a3b8; }
.markup-val { color: #f59e0b; font-weight: 600; }
/* ==========================================================================
   EMERGENCY RECOVERY UI (SAFETY NET)
   ========================================================================== */
.emergency-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 24px;
    animation: fadeIn 0.4s ease-out;
}

.emergency-card {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 40px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.emergency-icon {
    width: 80px;
    height: 80px;
    background: rgba(139, 92, 246, 0.1);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto 24px;
    animation: pulseGlow 2s infinite;
}

.emergency-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    color: white;
}

.emergency-desc {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 32px;
}

.btn-emergency {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 20px var(--primary-glow);
}

.btn-emergency:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px var(--primary-glow);
    filter: brightness(1.1);
}

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

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

@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4); }
    70% { box-shadow: 0 0 0 20px rgba(139, 92, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
}

/* Light mode support for emergency UI */
body.light-mode .emergency-overlay {
    background: rgba(255, 255, 255, 0.85);
}

body.light-mode .emergency-card {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

body.light-mode .emergency-title {
    color: #1a1a1a;
}

/* User Management Specific Styles */
.role-badge {
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

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

.status-completed {
    background: rgba(16, 185, 129, 0.1);
    color: var(--accent);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.status-cancelled {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Skeleton Loading */
.skeleton-card { width: 100%; min-height: 220px; background: var(--bg-panel); border-radius: var(--radius-lg); border: 1px solid var(--border-color); position: relative; overflow: hidden; }
.skeleton-card::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent); animation: skeleton-loading 1.5s infinite; }
@keyframes skeleton-loading { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* Management Grid */
.mgmt-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 1200px) {
    .mgmt-grid {
        grid-template-columns: 400px 1fr;
        align-items: start;
    }
}

.badge-outline {
    padding: 2px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-secondary);
}

.status-badge {
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 600;
}

.status-success {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

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

.status-warning {
    background: rgba(245, 158, 11, 0.14);
    color: #d97706;
}

.status-info {
    background: rgba(14, 165, 233, 0.12);
    color: #0284c7;
}

.status-muted {
    background: rgba(148, 163, 184, 0.14);
    color: #64748b;
}

/* Keterangan kondisi stok di bawah badge status bahan baku */
.stock-status-detail {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-secondary, #94a3b8);
    max-width: 260px;
}

/* Sorot baris bahan yang menipis/habis agar mudah terlihat */
tr.row-low-stock td {
    background: rgba(245, 158, 11, 0.06);
}

/* Legenda penjelasan status stok di atas tabel Bahan Baku */
.stock-legend {
    padding: 14px 16px;
    margin-bottom: 16px;
    border-radius: var(--radius-lg, 14px);
}
.stock-legend-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 8px;
}
.stock-legend-title i { color: var(--primary, #8b5cf6); }
.stock-legend-rule {
    margin: 0 0 10px;
    font-size: 12.5px;
    color: var(--text-secondary, #94a3b8);
    line-height: 1.5;
}
.stock-legend-items {
    display: grid;
    gap: 8px;
}
.stock-legend-items > span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-secondary, #94a3b8);
    flex-wrap: wrap;
}
.stock-legend-items .status-badge { flex: 0 0 auto; }

.table-thumb {
    border: 1px solid var(--border-color);
    transition: transform var(--trans-fast);
}

.table-thumb:hover {
    transform: scale(2);
    z-index: 10;
    position: relative;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.glass-input {
    transition: transform var(--trans-fast), border-color var(--trans-fast), box-shadow var(--trans-fast);
}

.glass-input:focus {
    transform: translateY(-1px);
}

#modal-container {
    animation: modal-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Lebar dasar modal. Dulu ditulis inline di index.html; dipindah ke sini
       supaya shell yang lebih lebar (mis. .wide-modal-shell) bisa menimpanya
       lewat specificity biasa, tanpa perlu !important. */
    width: 90%;
    max-width: 500px;
    /* Jaring pengaman tinggi: di tablet landscape / saat keyboard muncul,
       form yang tinggi tidak lagi meluber keluar layar — seluruh modal bisa
       di-scroll sehingga tombol Simpan/Batal selalu terjangkau. dvh mengikuti
       tinggi viewport nyata; vh fallback. Shell confirm/detail punya aturan
       sendiri (specificity lebih tinggi) dan tidak terpengaruh. */
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

@keyframes modal-pop {
    0% { transform: translate(-50%, -40%) scale(0.9); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

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

.modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-header i {
    color: var(--primary);
}

.form-group small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
}

/* ========================================================================== 
   ENHANCED FORM STYLING
   ========================================================================== */

/* Form Structure */
.form-row {
    display: grid;
    gap: 16px;
    margin-bottom: 16px;
}

.form-row.two-col {
    grid-template-columns: 1fr 1fr;
}

.form-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
}

.form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.form-section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

/* Form Group Enhancements */
.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    display: flex;
    align-items: center;
    gap: 4px;
}

.form-group label .required {
    color: var(--danger);
    font-weight: 700;
}

/* Helper Text */
.helper-text {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.helper-text.info {
    color: var(--text-secondary);
}

.helper-text.error {
    color: var(--danger);
    margin-top: 4px;
}

.helper-text.success {
    color: var(--accent);
}

/* Input Enhancements */
.glass-input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 15px;
    outline: none;
    transition: all var(--trans-fast);
}

.glass-input:hover {
    border-color: var(--border-hover);
}

.glass-input:focus {
    border-color: var(--primary);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 3px var(--primary-glow);
    transform: translateY(-1px);
}

.glass-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: rgba(0, 0, 0, 0.1);
}

.glass-input::placeholder {
    color: var(--text-muted);
}

/* Input Number Styling */
input[type="number"].glass-input {
    text-align: right;
}

input[type="number"].glass-input::-webkit-outer-spin-button,
input[type="number"].glass-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Select Styling */
select.glass-input {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    padding-right: 36px;
    appearance: none;
    cursor: pointer;
}

/* Button Enhancements */
.btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--trans-normal);
    position: relative;
    overflow: hidden;
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--primary-glow);
}

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

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-primary.loading {
    pointer-events: none;
}

.btn-primary.loading::after {
    content: '';
    width: 16px;
    height: 16px;
    margin-left: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
}

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

.btn-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-family: var(--font-main);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--trans-fast);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--border-hover);
}

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

.btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Flex utilities for buttons */
.flex {
    display: flex;
}

.flex-1 {
    flex: 1;
}

.flex-2 {
    flex: 2;
}

.gap-12 {
    gap: 12px;
}

.w-full {
    width: 100%;
}

/* Additional Margin & Padding Utilities */
.mt-8 { margin-top: 8px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-12 { margin-top: 12px !important; }
.mt-16 { margin-top: 16px !important; }
.py-16 { padding-top: 16px !important; padding-bottom: 16px !important; }
.py-20 { padding-top: 20px !important; padding-bottom: 20px !important; }
.p-24 { padding: 24px !important; }

/* Modal Enhancements */
.modal-body {
    padding: 24px;
    max-height: 70vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal-footer {
    display: flex;
    gap: 12px;
    padding: 24px;
    border-top: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.1);
    position: sticky;
    bottom: 0;
}

.modal-footer.sticky {
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.form-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Table Item Styling */
.expense-item-row {
    transition: all var(--trans-fast);
}

.expense-item-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.expense-item-row td {
    padding: 12px 12px;
    vertical-align: middle;
}

.expense-item-row .glass-input {
    padding: 8px 10px;
    font-size: 14px;
    margin: 0;
}

.exp-row-subtotal {
    text-align: right;
    color: var(--accent);
    font-weight: 700;
}

.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 16px;
    transition: all var(--trans-fast);
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.icon-btn.text-danger {
    color: var(--danger);
}

.icon-btn.text-danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* Final readable action controls for filters and printing */
.filter-btn,
.icon-btn.print-btn,
button.print-btn {
    min-width: 96px;
    min-height: 44px;
    width: auto;
    height: auto;
    padding: 10px 18px;
    border-radius: 14px;
    border: 1px solid rgba(139, 92, 246, 0.28);
    background: rgba(139, 92, 246, 0.14);
    color: var(--text-primary);
    font-family: var(--font-main);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    box-shadow: none;
}

.filter-btn:hover,
.icon-btn.print-btn:hover,
button.print-btn:hover {
    background: rgba(139, 92, 246, 0.22);
    border-color: rgba(139, 92, 246, 0.42);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.filter-btn.active,
.icon-btn.print-btn.is-primary,
button.print-btn.is-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.icon-btn.print-btn[id*="print"],
button.print-btn[id*="print"],
#attn-print-btn,
#print-report-btn,
#attn-print-qr-btn {
    min-width: 108px !important;
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

.icon-btn.print-btn[id*="print"]:hover,
button.print-btn[id*="print"]:hover,
#attn-print-btn:hover,
#print-report-btn:hover,
#attn-print-qr-btn:hover {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
    color: #fff !important;
}

.filter-btn i,
.icon-btn.print-btn i,
button.print-btn i {
    color: currentColor;
    font-size: 15px;
    flex: 0 0 auto;
}

.icon-btn.print-btn span,
button.print-btn span {
    color: currentColor;
    font-size: 13px;
    font-weight: 750;
}

body.light-mode .filter-btn,
body.light-mode .icon-btn.print-btn,
body.light-mode button.print-btn {
    background: #ffffff;
    border-color: rgba(17, 24, 39, 0.18);
    color: #111827;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

body.light-mode .filter-btn:hover,
body.light-mode .icon-btn.print-btn:hover,
body.light-mode button.print-btn:hover {
    background: #f3f4f6;
    border-color: rgba(17, 24, 39, 0.3);
    color: #111827;
}

body.light-mode .filter-btn.active {
    background: #111827;
    border-color: #111827;
    color: #ffffff;
}

body.light-mode .icon-btn.print-btn[id*="print"],
body.light-mode button.print-btn[id*="print"],
body.light-mode #attn-print-btn,
body.light-mode #print-report-btn,
body.light-mode #attn-print-qr-btn {
    background: #0f766e !important;
    border-color: #0f766e !important;
    color: #ffffff !important;
}

body.light-mode .icon-btn.print-btn[id*="print"]:hover,
body.light-mode button.print-btn[id*="print"]:hover,
body.light-mode #attn-print-btn:hover,
body.light-mode #print-report-btn:hover,
body.light-mode #attn-print-qr-btn:hover {
    background: #115e59 !important;
    border-color: #115e59 !important;
    color: #ffffff !important;
}

/* Responsive Form Layout */
@media (max-width: 768px) and (orientation: portrait) {
    .form-row.two-col {
        grid-template-columns: 1fr;
    }
    
    .modal-body {
        max-height: calc(100vh - 200px);
        padding: 20px;
    }
    
    .modal-header {
        padding: 20px;
    }
    
    .modal-header h3 {
        font-size: 18px;
    }
    
    .glass-input {
        font-size: 16px; /* Prevent mobile auto-zoom */
        padding: 14px 12px;
    }
    
    .btn-primary, .btn-secondary {
        padding: 14px 16px;
        font-size: 15px;
        min-height: 44px; /* Touch-friendly */
    }
    
    .icon-btn {
        width: 40px;
        height: 40px;
    }
    
    .form-section {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
    
    .form-row {
        gap: 12px;
        margin-bottom: 12px;
    }
}
/* ========================================================================== 
   CONFIRMATION MODAL STYLING
   ========================================================================== */
.confirm-modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 0;
}

.confirm-modal-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 24px;
    position: relative;
}

.confirm-modal-icon::after {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border-radius: 50%;
    border: 1px dashed currentColor;
    opacity: 0.3;
}

/* Types */
.confirm-modal-icon.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.1);
}

.confirm-modal-icon.danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.1);
}

.confirm-modal-icon.info {
    background: rgba(139, 92, 246, 0.1);
    color: var(--primary);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.1);
}

.confirm-modal-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.confirm-modal-message {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 32px;
    max-width: 320px;
}

.confirm-modal-buttons {
    display: flex;
    gap: 12px;
    width: 100%;
}

.confirm-modal-buttons button {
    flex: 1;
    padding: 14px;
    font-size: 15px;
    font-weight: 600;
}

/* Animation for icon */
@keyframes confirm-icon-bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.confirm-modal-icon i {
    animation: confirm-icon-bounce 2s infinite ease-in-out;
}

/* Modal Close Button (X) */
.modal-close-x {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--trans-fast);
    line-height: 1;
    padding: 0;
    z-index: 10;
}

.modal-close-x:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    border-color: rgba(239, 68, 68, 0.2);
    transform: rotate(90deg);
}

body.light-mode .modal-close-x {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-muted);
}

body.light-mode .modal-close-x:hover {
    background: rgba(239, 68, 68, 0.08);
    color: var(--danger);
}

/* ========================================================================== 
   BEAUTIFIED CANCEL BUTTON
   ========================================================================== */
.confirm-modal-buttons .btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 20px;
    font-weight: 500;
    transition: all var(--trans-fast);
}

.confirm-modal-buttons .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-color: var(--text-muted);
    transform: translateY(-1px);
}

body.light-mode .confirm-modal-buttons .btn-secondary {
    background: rgba(0, 0, 0, 0.03);
    color: var(--text-secondary);
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .confirm-modal-buttons .btn-secondary:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
    border-color: rgba(0, 0, 0, 0.2);
}

/* App-grade confirmation dialog overrides */
#modal-container.confirm-modal-shell {
    width: min(92vw, 440px) !important;
    max-width: 440px !important;
    padding: 0 !important;
    /* Jaring pengaman tinggi (sama seperti #modal-container dasar, tapi shell ini
       punya specificity lebih tinggi sehingga harus diulang di sini). Di tablet
       landscape pendek (mis. Galaxy Tab A7 Lite) atau saat keyboard angka muncul,
       isi modal yang tinggi — terutama PaymentModal/kalkulator kembalian — dulu
       ter-clip oleh `overflow:hidden` sehingga tombol Konfirmasi/Batal keluar
       layar dan tak bisa di-scroll. Sekarang seluruh modal bisa di-scroll vertikal
       sehingga tombol selalu terjangkau. dvh mengikuti tinggi viewport nyata. */
    max-height: 92vh !important;
    max-height: 92dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98)) !important;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.48) !important;
}

#modal-container.confirm-modal-shell #modal-body {
    width: 100%;
}

#modal-container.confirm-modal-shell .confirm-modal-content {
    align-items: stretch;
    text-align: left;
    padding: 30px 28px 24px;
}

#modal-container.confirm-modal-shell .confirm-modal-icon {
    width: 48px;
    height: 48px;
    margin: 0 0 18px;
    border-radius: 16px;
    font-size: 22px;
}

#modal-container.confirm-modal-shell .confirm-modal-icon::after {
    display: none;
}

#modal-container.confirm-modal-shell .confirm-modal-title {
    margin: 0 42px 8px 0;
    font-size: 22px;
    line-height: 1.15;
}

#modal-container.confirm-modal-shell .confirm-modal-message {
    max-width: none;
    margin: 0 0 24px;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.45;
}

#modal-container.confirm-modal-shell .confirm-modal-buttons {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr);
    gap: 12px;
}

#modal-container.confirm-modal-shell .confirm-modal-buttons button,
#modal-container.confirm-modal-shell .modal-close-x {
    appearance: none;
    -webkit-appearance: none;
}

#modal-container.confirm-modal-shell .confirm-modal-buttons button {
    width: 100%;
    min-height: 52px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 700;
}

#modal-container.confirm-modal-shell .confirm-cancel-btn {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.14);
}

#modal-container.confirm-modal-shell .confirm-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.24);
}

#modal-container.confirm-modal-shell .confirm-primary-btn {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    border: 0;
    box-shadow: 0 12px 28px var(--primary-glow);
}

#modal-container.confirm-danger .confirm-primary-btn {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    box-shadow: 0 12px 28px rgba(239, 68, 68, 0.26) !important;
}

#modal-container .confirm-modal-buttons .danger-btn {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    box-shadow: 0 12px 28px rgba(239, 68, 68, 0.26) !important;
}

#modal-container.confirm-modal-shell .modal-close-x {
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-secondary);
    font-size: 16px;
}

#modal-container.confirm-modal-shell .modal-close-x:hover {
    transform: none;
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fecaca;
}

body.light-mode #modal-container.confirm-modal-shell {
    border-color: rgba(0, 0, 0, 0.12) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 246, 243, 0.98)) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.16) !important;
}

body.light-mode #modal-container.confirm-modal-shell .confirm-cancel-btn {
    background: rgba(255, 255, 255, 0.78);
    color: var(--primary);
    border-color: rgba(0, 0, 0, 0.16);
}

body.light-mode #modal-container.confirm-modal-shell .confirm-cancel-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.28);
}

body.light-mode #modal-container.confirm-modal-shell .modal-close-x {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(0, 0, 0, 0.14);
    color: var(--primary);
}

body.light-mode #modal-container.confirm-modal-shell .modal-close-x:hover {
    background: rgba(239, 68, 68, 0.08);
    color: var(--danger);
    border-color: rgba(239, 68, 68, 0.2);
}

/* ── Fitur: Stok Kurang & Modifier Badge ─────────────────────── */
.cart-item-stock-warning {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--warning);
    margin-top: 3px;
}

.cart-item-modifier-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(167, 70, 37, 0.18);
    color: var(--secondary);
    font-size: 10px;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: middle;
}

/* ── Detail Modal Shell — sticky header + scrollable body ─────── */
#modal-container.detail-modal-shell {
    padding: 0 !important;
    width: min(96vw, 640px) !important;
    max-width: 640px !important;
    max-height: min(90vh, 760px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#modal-container.detail-modal-shell #modal-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}
.detail-modal-hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    background: var(--card-bg);
}
.detail-modal-hdr h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.detail-modal-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px 20px;
}
.detail-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    margin-bottom: 16px;
}
.detail-info-grid .info-cell { font-size: 13px; }
.detail-info-grid .info-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 3px;
}
.badge-ingredient {
    display: inline-block;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(167, 70, 37, 0.15);
    color: var(--primary);
    font-weight: 600;
    vertical-align: middle;
}
@media (max-width: 480px) {
    #modal-container.detail-modal-shell {
        width: 98vw !important;
        max-height: 94vh;
    }
    .detail-info-grid { grid-template-columns: 1fr; gap: 8px; }
}

.cart-item.cart-item-low-stock {
    border-left: 3px solid var(--warning);
}

.menu-card-stock-badge {
    position: absolute;
    top: 7px;
    right: 7px;
    background: rgba(245, 158, 11, 0.9);
    color: #fff;
    border-radius: 999px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}

.menu-card.menu-card-low-stock .menu-img-container {
    position: relative;
}

.menu-card.menu-card-low-stock {
    border: 1px solid rgba(245, 158, 11, 0.35);
}

/* Modifier dropdown di cart */
.cart-item-modifier-select {
    font-size: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: rgba(255,255,255,.06);
    color: var(--text-primary);
    padding: 3px 8px;
    margin-top: 4px;
    cursor: pointer;
    width: 100%;
    max-width: 180px;
}

body.light-mode .cart-item-modifier-select {
    background: rgba(0,0,0,.05);
    color: var(--text-primary);
}

/* Halaman Kalibrasi */
.calibration-form-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
}

.calibration-item-row {
    display: grid;
    grid-template-columns: 1fr 100px 80px auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 10px;
}

@media (max-width: 600px) {
    .calibration-item-row {
        grid-template-columns: 1fr 80px auto;
    }
}

.calibration-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

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

.calibration-history-table th {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ── Activity Log badges ──────────────────────────────────────────────── */
.al-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.al-badge-auth        { background: #1d4ed820; color: #60a5fa; }
.al-badge-order       { background: #16a34a20; color: #4ade80; }
.al-badge-shift       { background: #7c3aed20; color: #c084fc; }
.al-badge-expense     { background: #dc262620; color: #f87171; }
.al-badge-income      { background: #0891b220; color: #22d3ee; }
.al-badge-menu        { background: #d9770620; color: #fb923c; }
.al-badge-settings    { background: #64748b20; color: #94a3b8; }
.al-badge-consignment { background: #b4590520; color: #fbbf24; }
.al-badge-user        { background: #0d948820; color: #2dd4bf; }
.al-badge-inventory   { background: #92400e20; color: #d97706; }
.al-badge-default     { background: #1e293b;   color: #94a3b8; }

.al-user { font-weight: 600; font-size: 13px; }
.al-role {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--bg-elevated);
    color: var(--text-muted);
}
.al-role-admin   { background: #7c3aed30; color: #c084fc; }
.al-role-owner   { background: #b4590530; color: #fbbf24; }
.al-role-manager { background: #0891b230; color: #22d3ee; }
.al-role-kasir   { background: #16a34a30; color: #4ade80; }

/* ===== Operator Aktif / Kasir Bergiliran ===== */
/* Tombol "Ganti Kasir" ada di dalam popover akun (lihat .user-popover-action). */
.operator-switcher-hint { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.operator-list { display: flex; flex-direction: column; gap: 6px; }
.operator-row {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    width: 100%; padding: 6px 8px 6px 6px; border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-primary); font-size: 14px;
}
.operator-row:hover { border-color: var(--primary); }
.operator-row.is-active { border-color: var(--primary); background: rgba(47,159,201,0.10); }
.operator-row-pick {
    flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: none; border: none; color: inherit; font-size: 14px; cursor: pointer;
    text-align: left; padding: 6px 6px;
}
.operator-row-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.operator-row.is-active .operator-row-main > .fa-circle-dot { color: var(--primary); }
.operator-sales { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.operator-tag {
    font-size: 11px; padding: 2px 8px; border-radius: 999px;
    background: #b4590530; color: #000;
}
.operator-tag-warn { background: rgba(248,113,113,0.18); color: #f87171; }
.operator-row-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.operator-icon-btn { color: var(--text-muted); padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.operator-icon-btn:hover { color: var(--primary); background: rgba(255,255,255,0.06); }
.operator-icon-btn.operator-remove:hover { color: #f87171; background: rgba(248,113,113,0.12); }
.operator-add-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); }
.operator-add-section > label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }

/* PIN prompt & step-up (Tahap 2) */
.pin-prompt { display: flex; flex-direction: column; }
.pin-message { font-size: 13px; color: var(--text-secondary); margin: 0 0 12px; line-height: 1.5; }
.pin-input { text-align: center; letter-spacing: 6px; font-size: 20px; }
.pin-input::placeholder { letter-spacing: normal; }
.pin-error { color: #f87171; font-size: 12px; min-height: 16px; margin-top: 8px; }

.open-shift-roster { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; max-height: 220px; overflow-y: auto; }
.roster-check {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,0.03);
}
.roster-check.is-self { opacity: .85; }
.roster-check input { width: 16px; height: 16px; }
.roster-onduty {
    font-size: 10px; padding: 1px 7px; border-radius: 999px; margin-left: 6px;
    background: rgba(34,197,94,0.18); color: #4ade80; white-space: nowrap;
}