/* ======================================================
   GAMING CAFE ADMIN — Professional Dark Gaming Theme
   ====================================================== */
:root {
    --bg-deepest:   #07090f;
    --bg-dark:      #0d1117;
    --bg-card:      #111827;
    --bg-card2:     #161f2e;
    --bg-hover:     #1e2a3d;
    --border:       #1e2d45;
    --border-glow:  #1e4d82;
    --accent:       #00c6ff;
    --accent-2:     #7b2ff7;
    --accent-green: #00e676;
    --accent-yellow:#ffd600;
    --accent-red:   #ff3d57;
    --accent-orange:#ff7043;
    --text-primary: #e8f0fe;
    --text-second:  #8b9ab0;
    --text-muted:   #4a5568;
    --sidebar-w:    240px;
    --topbar-h:     56px;
    --radius:       10px;
    --radius-sm:    6px;
    --shadow:       0 4px 24px rgba(0,0,0,0.5);
    --glow-blue:    0 0 20px rgba(0,198,255,0.15);
    --glow-green:   0 0 20px rgba(0,230,118,0.15);
    --font:         'Segoe UI', system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;font-family:var(--font);background:var(--bg-dark);color:var(--text-primary);font-size:14px;}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:var(--bg-deepest);}
::-webkit-scrollbar-thumb{background:#1e3a5f;border-radius:3px;}

/* ======================================================
   LOGIN PAGE
   ====================================================== */
.login-page body,.login-page{background:var(--bg-deepest)!important;}
body.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;}
.login-bg{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 30% 40%,rgba(123,47,247,0.18) 0%,transparent 60%),radial-gradient(ellipse at 70% 60%,rgba(0,198,255,0.12) 0%,transparent 60%),var(--bg-deepest);}
.login-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.particle{position:absolute;background:var(--accent);border-radius:50%;opacity:0.4;animation:float-up linear infinite;}
@keyframes float-up{0%{transform:translateY(100vh) scale(0);opacity:0;}10%{opacity:0.4;}90%{opacity:0.4;}100%{transform:translateY(-100px) scale(1.5);opacity:0;}}
.login-box{position:relative;background:rgba(17,24,39,0.95);border:1px solid var(--border-glow);border-radius:16px;padding:40px 36px;width:380px;backdrop-filter:blur(16px);box-shadow:0 0 60px rgba(0,198,255,0.08),var(--shadow);}
.login-logo{text-align:center;margin-bottom:28px;}
.logo-icon{font-size:48px;margin-bottom:8px;filter:drop-shadow(0 0 12px var(--accent));}
.login-logo h1{font-size:22px;font-weight:800;letter-spacing:3px;color:var(--accent);text-shadow:0 0 20px rgba(0,198,255,0.5);}
.login-logo p{color:var(--text-second);font-size:12px;letter-spacing:2px;margin-top:2px;}
.login-error{background:rgba(255,61,87,0.12);border:1px solid rgba(255,61,87,0.4);color:#ff7090;padding:10px 14px;border-radius:var(--radius-sm);margin-bottom:16px;font-size:13px;}
.login-form{display:flex;flex-direction:column;gap:14px;}
.login-field{display:flex;align-items:center;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 12px;transition:border-color .2s;}
.login-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,198,255,0.12);}
.field-icon{font-size:16px;margin-right:8px;color:var(--text-second);}
.login-field input{background:none;border:none;outline:none;color:var(--text-primary);padding:12px 0;width:100%;font-size:14px;}
.login-btn{background:linear-gradient(135deg,var(--accent-2),var(--accent));border:none;border-radius:var(--radius-sm);color:#fff;padding:13px;font-size:15px;font-weight:700;cursor:pointer;letter-spacing:1px;transition:opacity .2s,transform .1s;margin-top:4px;}
.login-btn:hover{opacity:0.9;transform:translateY(-1px);}
.login-btn:active{transform:translateY(0);}
.login-hint{text-align:center;color:var(--text-muted);font-size:11px;margin-top:16px;}

/* ======================================================
   LAYOUT — SIDEBAR + MAIN
   ====================================================== */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);background:var(--bg-card);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:200;transition:transform .3s;}
.main-content{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column;}

/* Sidebar brand */
.sidebar-brand{display:flex;align-items:center;gap:12px;padding:18px 16px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,rgba(0,198,255,0.06),transparent);}
.brand-icon{font-size:28px;filter:drop-shadow(0 0 8px var(--accent));}
.brand-logo{width:40px!important;height:40px!important;max-width:40px!important;max-height:40px!important;object-fit:contain;border-radius:8px;background:#fff;padding:3px;flex-shrink:0;}
.brand-name{font-size:14px;font-weight:800;letter-spacing:2px;color:var(--accent);}
.brand-sub{font-size:10px;color:var(--text-second);letter-spacing:1px;}

/* Sidebar nav */
.sidebar-nav{flex:1;padding:16px 0;overflow-y:auto;}
.nav-section-label{font-size:9px;letter-spacing:2px;color:var(--text-muted);padding:4px 16px 6px;text-transform:uppercase;}
.nav-link{display:flex;align-items:center;gap:10px;padding:10px 16px;color:var(--text-second);text-decoration:none;transition:all .2s;border-left:2px solid transparent;margin:1px 0;}
.nav-link:hover{background:var(--bg-hover);color:var(--text-primary);border-left-color:var(--accent);}
.nav-link.active{background:rgba(0,198,255,0.08);color:var(--accent);border-left-color:var(--accent);}
.nav-icon{width:20px;text-align:center;font-size:15px;}

/* Sidebar user */
.sidebar-user{padding:14px 16px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.user-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--accent-2),var(--accent));display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:14px;flex-shrink:0;}
.user-name{font-size:12px;font-weight:600;color:var(--text-primary);}
.user-role{font-size:10px;color:var(--text-second);}
.logout-btn{margin-left:auto;background:rgba(255,61,87,0.1);border:1px solid rgba(255,61,87,0.2);color:#ff7090;padding:6px 10px;border-radius:var(--radius-sm);cursor:pointer;text-decoration:none;font-size:16px;transition:all .2s;}
.logout-btn:hover{background:rgba(255,61,87,0.2);}

/* Topbar */
.topbar{height:var(--topbar-h);background:var(--bg-card);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:100;}
.topbar-left{display:flex;align-items:center;gap:14px;}
.menu-toggle{background:none;border:none;color:var(--text-second);font-size:20px;cursor:pointer;display:none;}
.page-title{font-size:16px;font-weight:600;color:var(--text-primary);}
.topbar-right{display:flex;align-items:center;gap:12px;}
.ist-clock{background:rgba(0,198,255,0.08);border:1px solid rgba(0,198,255,0.2);color:var(--accent);padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;font-family:monospace;letter-spacing:1px;}

/* Content */
.content-area{padding:20px 24px;flex:1;}

/* ======================================================
   PANELS & CARDS
   ====================================================== */
.panel{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:20px;overflow:hidden;}
.panel-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);background:rgba(255,255,255,0.01);}
.panel-header.clickable-header{cursor:pointer;}
.panel-header.clickable-header:hover{background:rgba(255,255,255,0.03);}
.panel-title{font-size:14px;font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:8px;}
.panel>form,.panel>div.table-wrap,.panel>div.form-grid-3,.panel>.form-group,.panel>.offer-form{padding:18px;}
.panel-toggle-btn{background:none;border:none;color:var(--text-second);cursor:pointer;font-size:16px;transition:transform 0.2s ease;}

/* ======================================================
   SETUP STATUS GRID
   ====================================================== */
.status-grid{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:28px;}
.status-type-block{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;min-width:200px;flex:1;transition:border-color .2s;}
.status-type-block:hover{border-color:var(--border-glow);}
.status-type-header{display:flex;align-items:center;justify-content:space-between;}
.status-type-name{font-size:13px;font-weight:700;color:var(--text-primary);letter-spacing:0.5px;display:flex;align-items:center;gap:8px;}
.status-type-summary{display:flex;align-items:center;gap:10px;font-size:12px;}
.status-pill{display:flex;align-items:center;gap:5px;padding:3px 10px;border-radius:12px;font-weight:700;}
.status-pill.available{background:rgba(0,230,118,0.1);color:var(--accent-green);}
.status-pill.occupied{background:rgba(255,61,87,0.1);color:var(--accent-red);}
.status-pill.maintenance{background:rgba(255,214,0,0.1);color:var(--accent-yellow);}
.status-units{display:flex;flex-direction:column;gap:6px;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);}
.status-unit{display:flex;align-items:center;gap:8px;font-size:12px;padding:5px 8px;border-radius:var(--radius-sm);}
.status-unit.available{background:rgba(0,230,118,0.06);color:var(--accent-green);}
.status-unit.occupied{background:rgba(255,61,87,0.06);color:var(--accent-red);}
.status-unit.maintenance{background:rgba(255,214,0,0.06);color:var(--accent-yellow);}
.unit-status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.available .unit-status-dot{background:var(--accent-green);box-shadow:0 0 6px var(--accent-green);}
.occupied .unit-status-dot{background:var(--accent-red);box-shadow:0 0 6px var(--accent-red);}
.maintenance .unit-status-dot{background:var(--accent-yellow);box-shadow:0 0 6px var(--accent-yellow);}
.unit-status-text{margin-left:auto;font-size:10px;opacity:0.7;}

/* ======================================================
   BOOKING FORM
   ====================================================== */
.form-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:18px;}
@media(max-width:900px){.form-grid-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.form-grid-3{grid-template-columns:1fr;}}
.form-group{display:flex;flex-direction:column;gap:6px;}
.form-hint{font-size:11px;color:var(--text-muted);}

.customer-suggestions{
    position:absolute; top:100%; left:0; right:0; z-index:50;
    background:var(--bg-card); border:1px solid var(--border-glow);
    border-radius:var(--radius-sm); margin-top:4px;
    box-shadow:0 8px 24px rgba(0,0,0,0.4);
    max-height:280px; overflow-y:auto;
}
.customer-suggestion-item{
    padding:8px 12px; cursor:pointer; border-bottom:1px solid var(--border);
    transition:background .15s;
}
.customer-suggestion-item:last-child{border-bottom:none;}
.customer-suggestion-item:hover{background:rgba(0,198,255,0.08);}
.cs-name{font-size:13px; font-weight:700; color:var(--text-primary); text-transform:uppercase;}
.cs-meta{display:flex; gap:10px; margin-top:2px; font-size:11px; color:var(--text-muted); flex-wrap:wrap;}
.cs-phone{color:var(--accent);}
.cs-date{color:var(--text-second);}
.cs-amount{color:var(--accent-green); font-weight:600;}
label,.section-label{font-size:11px;font-weight:600;color:var(--text-second);letter-spacing:0.5px;text-transform:uppercase;}
.section-label{font-size:11px;font-weight:600;color:var(--text-second);padding:0 18px;margin-top:4px;}
.req{color:var(--accent-red);}
.form-input,.form-select{background:var(--bg-dark);border:1px solid var(--border);color:var(--text-primary);padding:9px 12px;border-radius:var(--radius-sm);font-size:13px;width:100%;transition:border-color .2s;}
.form-input:focus,.form-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,198,255,0.1);}
.form-input-sm{background:var(--bg-dark);border:1px solid var(--border);color:var(--text-primary);padding:6px 10px;border-radius:var(--radius-sm);font-size:13px;width:100%;}
.form-select-sm{background:var(--bg-dark);border:1px solid var(--border);color:var(--text-primary);padding:5px 8px;border-radius:var(--radius-sm);font-size:12px;}
.form-help{font-size:11px;color:var(--text-muted);padding:0 18px 12px;}

/* Unit select cards */
.unit-select-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;padding:12px 18px 16px;}
.unit-select-card{background:var(--bg-dark);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;cursor:pointer;transition:all .2s;}
.unit-select-card:hover{border-color:var(--border-glow);}
.unit-select-card.selected{border-color:var(--accent);background:rgba(0,198,255,0.05);box-shadow:var(--glow-blue);}
.unit-cb-label{cursor:pointer;display:block;}
.unit-cb-label input[type=checkbox]{display:none;}
.unit-card-content{display:flex;align-items:center;gap:10px;}
.unit-card-icon{font-size:24px;}
.unit-card-name{font-size:13px;font-weight:600;color:var(--text-primary);}
.unit-card-type{font-size:11px;color:var(--text-second);}
.unit-card-rate{font-size:11px;color:var(--accent-green);font-weight:600;}
.ctrl-select-wrap{margin-top:8px;padding-top:8px;border-top:1px solid var(--border);}
.ctrl-select-wrap label{font-size:10px;color:var(--text-muted);margin-bottom:4px;}

/* ======================================================
   ACTIVE BOOKINGS
   ====================================================== */
.section-header{display:flex;align-items:center;gap:12px;margin:28px 0 16px;}
.section-header h2{font-size:16px;font-weight:700;}
.badge-count{background:var(--accent);color:#000;padding:3px 10px;border-radius:10px;font-size:12px;font-weight:800;}
.booking-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:20px;overflow:hidden;}
.booking-card-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;background:linear-gradient(135deg,rgba(0,198,255,0.04),rgba(123,47,247,0.04));border-bottom:1px solid var(--border);cursor:pointer;gap:12px;}
.booking-customer{display:flex;align-items:center;gap:12px;}
.customer-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--accent-2),var(--accent));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;flex-shrink:0;}
.customer-name{font-size:16px;font-weight:700;}
.customer-meta{font-size:11px;color:var(--text-second);margin-top:2px;}
.returning-badge{font-size:10px;color:var(--accent-green);margin-top:3px;font-weight:600;}
.returning-badge.expired{color:var(--accent-yellow);}
.booking-live-total{text-align:right;}
.live-total-label{font-size:10px;color:var(--text-second);letter-spacing:1px;}
.live-total-amount{font-size:22px;font-weight:800;color:var(--accent-green);}
.booking-collapse-arrow{font-size:18px;color:var(--text-second);transition:transform 0.2s ease;flex-shrink:0;}
.booking-card.collapsed .booking-collapse-arrow{transform:rotate(-90deg);}
.booking-card-body{padding:0;}
.booking-card.collapsed .booking-card-body{display:none;}
.booking-card-header:hover{background:linear-gradient(135deg,rgba(0,198,255,0.08),rgba(123,47,247,0.08));}

/* Unit session cards */
.units-row{display:flex;flex-wrap:wrap;gap:12px;padding:16px 18px;}
.unit-session-card{background:var(--bg-dark);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;min-width:220px;flex:1;transition:border-color .3s;}
.unit-session-card.warning{border-color:var(--accent-yellow);}
.unit-session-card.overtime{border-color:var(--accent-red);animation:pulse-border 1.5s infinite;}
@keyframes pulse-border{0%,100%{box-shadow:0 0 0 0 rgba(255,61,87,0.4);}50%{box-shadow:0 0 0 4px rgba(255,61,87,0);}}
.usc-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-weight:700;font-size:13px;}
.usc-icon{font-size:18px;}
.ctrl-badge{margin-left:auto;background:rgba(0,198,255,0.1);border:1px solid rgba(0,198,255,0.3);color:var(--accent);padding:2px 8px;border-radius:10px;font-size:11px;}
.usc-timer{text-align:center;margin:8px 0;padding:10px;background:var(--bg-card2);border-radius:var(--radius-sm);}
.timer-label{font-size:9px;letter-spacing:2px;color:var(--text-muted);margin-bottom:2px;}
.timer-value{font-size:26px;font-weight:800;font-family:monospace;color:var(--accent);}
.unit-session-card.warning .timer-value{color:var(--accent-yellow);}
.unit-session-card.overtime .timer-value{color:var(--accent-red);}
.usc-charge{text-align:center;font-size:16px;font-weight:700;color:var(--accent-green);margin-bottom:4px;}
.usc-times{text-align:center;font-size:11px;color:var(--text-muted);margin-bottom:10px;}
.usc-actions{display:flex;flex-direction:column;gap:6px;}
.inline-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}

/* Beverages */
.beverages-section{padding:12px 18px;border-top:1px solid var(--border);}
.bev-header{margin-bottom:8px;}
.bev-header h4{font-size:13px;font-weight:600;color:var(--text-second);}

.add-setup-section{border-top:1px solid var(--border);}
.add-setup-section > div[id^="add-setup-body-"]{padding:14px 18px 18px;}
.add-setup-section > div[id^="add-setup-body-"] .section-label{padding:0;margin-bottom:8px;}
.add-setup-section > div[id^="add-setup-body-"] .unit-select-grid{padding:0;}
.bev-add-form{margin-bottom:10px;}
.bev-search-wrap{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.bev-search{background:var(--bg-dark);border:1px solid var(--accent);color:var(--text-primary);padding:8px 12px;border-radius:var(--radius-sm);font-size:13px;min-width:140px;flex:1;}
.qty-input{background:var(--bg-dark);border:1px solid var(--border);color:var(--text-primary);padding:8px;border-radius:var(--radius-sm);width:60px;font-size:13px;}
.orders-table-wrap{margin-top:8px;}
.orders-table{width:100%;border-collapse:collapse;}
.orders-table td{padding:5px 8px;border-bottom:1px solid var(--border);font-size:13px;}
.order-price{color:var(--accent-green);font-weight:600;}
.btn-icon-red{background:none;border:none;color:var(--accent-red);cursor:pointer;font-size:14px;padding:2px 6px;border-radius:4px;}
.btn-icon-red:hover{background:rgba(255,61,87,0.1);}

/* Offers section */
.offers-section{padding:12px 18px;border-top:1px solid var(--border);background:rgba(0,230,118,0.02);}
.offers-section h4{font-size:12px;color:var(--accent-green);margin-bottom:8px;letter-spacing:1px;}
.offer-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(0,230,118,0.06);border:1px solid rgba(0,230,118,0.2);padding:6px 12px;border-radius:20px;cursor:pointer;margin:3px;font-size:12px;}
.offer-pill input{accent-color:var(--accent-green);}
.offer-desc{color:var(--text-muted);font-size:11px;}

.offers-banner{background:linear-gradient(135deg,rgba(0,230,118,0.08),rgba(0,198,255,0.05));border-top:2px solid var(--accent-green);padding:14px 18px;}
.offers-banner h4{font-size:13px;color:var(--accent-green);font-weight:700;letter-spacing:0.5px;}
.offer-pill-banner{display:flex;align-items:center;gap:10px;background:rgba(0,230,118,0.1);border:1px solid rgba(0,230,118,0.3);padding:10px 14px;border-radius:8px;margin:6px 0;font-size:13px;width:100%;box-sizing:border-box;}
.offer-pill-banner input{width:18px;height:18px;}
.offer-pill-locked{opacity:0.75;cursor:default;}
.offer-pill-locked input{cursor:default;}
.offer-pill-name{font-weight:700;color:var(--accent-green);}
.offers-hint{font-size:11px;color:var(--text-muted);margin-top:6px;}

/* Bill preview + close */
.bill-preview{padding:12px 18px;background:var(--bg-deepest);border-top:1px solid var(--border);}
.bill-row{display:flex;justify-content:space-between;padding:4px 0;font-size:13px;color:var(--text-second);}
.bill-row.total{color:var(--text-primary);font-weight:700;font-size:15px;}
.bill-row.discount-row{color:var(--accent-green);}
.bill-row.roundoff-preview{color:var(--accent-yellow);font-weight:600;}
.bill-divider{border-top:1px dashed var(--border);margin:6px 0;}
.roundoff-row{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--border);}
.roundoff-input{width:100px;}
.roundoff-note{flex:1;}
.btn-start-booking{width:100%;padding:14px;margin-top:16px;background:linear-gradient(135deg,var(--accent-2),var(--accent));border:none;border-radius:var(--radius);color:#fff;font-size:15px;font-weight:700;letter-spacing:0.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:opacity .2s,transform .2s;}
.btn-start-booking:hover{opacity:0.92;transform:translateY(-1px);}
.btn-start-booking .btn-icon{font-size:18px;}
.btn-close-booking{width:100%;padding:14px;background:linear-gradient(135deg,#7b2ff7,#00c6ff);border:none;border-radius:0 0 var(--radius) var(--radius);color:#fff;font-size:15px;font-weight:700;cursor:pointer;letter-spacing:0.5px;transition:opacity .2s,transform .2s;text-align:center;display:flex;align-items:center;justify-content:center;gap:10px;}
.btn-close-booking:hover{opacity:0.92;transform:translateY(-1px);}
.btn-close-booking:disabled{background:var(--bg-deepest);color:var(--text-muted);cursor:not-allowed;opacity:0.6;transform:none;}
.close-booking-hint{text-align:center;font-size:12px;color:var(--accent-yellow);padding:10px;background:rgba(255,214,0,0.08);border-top:1px solid var(--border);}

/* ======================================================
   BUTTONS
   ====================================================== */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--radius-sm);border:none;cursor:pointer;font-size:13px;font-weight:600;text-decoration:none;transition:all .2s;}
.btn-primary{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff;}
.btn-primary:hover{opacity:0.9;transform:translateY(-1px);}
.btn-whatsapp{background:#25D366;color:#fff;}
.btn-whatsapp:hover{opacity:0.9;transform:translateY(-1px);}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text-second);}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);}
.btn-danger{background:rgba(255,61,87,0.12);border:1px solid rgba(255,61,87,0.3);color:var(--accent-red);}
.btn-danger:hover{background:rgba(255,61,87,0.22);}
.btn-sm{padding:5px 12px;font-size:12px;}
.btn-lg{padding:12px 24px;font-size:15px;}
.btn-blue{background:rgba(0,198,255,0.1);border:1px solid rgba(0,198,255,0.25);color:var(--accent);}
.btn-blue:hover{background:rgba(0,198,255,0.2);}
.btn-yellow{background:rgba(255,214,0,0.1);border:1px solid rgba(255,214,0,0.25);color:var(--accent-yellow);}
.btn-yellow:hover{background:rgba(255,214,0,0.2);}
.btn-red{background:rgba(255,61,87,0.1);border:1px solid rgba(255,61,87,0.25);color:var(--accent-red);}
.btn-red:hover{background:rgba(255,61,87,0.2);}
.btn-green{background:rgba(0,230,118,0.1);border:1px solid rgba(0,230,118,0.25);color:var(--accent-green);}
.btn-sm.btn-blue,.btn-sm.btn-yellow,.btn-sm.btn-red,.btn-sm.btn-green{padding:5px 10px;font-size:12px;}

/* ======================================================
   TABLES
   ====================================================== */
.table-wrap{overflow-x:auto;padding:0;}
.data-table{width:100%;border-collapse:collapse;font-size:13px;}
.data-table th{background:var(--bg-dark);color:var(--text-muted);font-size:10px;text-transform:uppercase;letter-spacing:1px;padding:10px 14px;text-align:left;border-bottom:1px solid var(--border);}
.data-table td{padding:10px 14px;border-bottom:1px solid rgba(30,45,69,0.5);color:var(--text-primary);}
.data-table tr:hover td{background:rgba(255,255,255,0.02);}
.row-muted td{opacity:0.4;}
.row-low td{background:rgba(255,61,87,0.04);}
.total-col{color:var(--accent-green);font-weight:700;}
.discount-col{color:var(--accent-orange);}

/* ======================================================
   STOCK GRID
   ====================================================== */
.stock-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;padding:18px;}
.stock-category-label{grid-column:1/-1;font-size:10px;letter-spacing:2px;color:var(--text-muted);text-transform:uppercase;padding-top:8px;}
.stock-card{background:var(--bg-dark);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;text-align:center;}
.stock-card.low{border-color:var(--accent-red);background:rgba(255,61,87,0.04);}
.stock-card.medium{border-color:var(--accent-yellow);}
.stock-name{font-size:12px;color:var(--text-second);margin-bottom:6px;}
.stock-qty{font-size:28px;font-weight:800;color:var(--text-primary);}
.stock-label{font-size:10px;color:var(--text-muted);}
.stock-alert{font-size:10px;color:var(--accent-red);font-weight:700;margin-top:4px;animation:blink 1.5s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0.5;}}

/* ======================================================
   MISC
   ====================================================== */
.low-tag{background:rgba(255,61,87,0.15);color:var(--accent-red);font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;margin-left:6px;}
.toast-success{background:rgba(0,230,118,0.1);border:1px solid rgba(0,230,118,0.3);color:var(--accent-green);padding:10px 16px;border-radius:var(--radius-sm);margin-bottom:16px;}
.toast-error{background:rgba(255,61,87,0.1);border:1px solid rgba(255,61,87,0.3);color:var(--accent-red);padding:10px 16px;border-radius:var(--radius-sm);margin-bottom:16px;}
.empty-state{text-align:center;color:var(--text-muted);padding:24px;font-size:14px;}
.empty-state.large{padding:48px;font-size:16px;}
.day-checks{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.day-check{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text-primary);cursor:pointer;}
.day-check input{accent-color:var(--accent);}
.toggle-switch{position:relative;display:inline-block;width:44px;height:24px;}
.toggle-switch input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;inset:0;background:var(--border);border-radius:12px;transition:.3s;cursor:pointer;}
.toggle-slider:before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.3s;}
input:checked+.toggle-slider{background:var(--accent-green);}
input:checked+.toggle-slider:before{transform:translateX(20px);}
.offer-form{padding:18px;}
.offer-form .form-grid-3{padding:0;margin-bottom:12px;}

/* ======================================================
   THERMAL RECEIPT (Bill Page)
   ====================================================== */
.bill-page-wrap{display:flex;flex-direction:column;align-items:center;padding:10px 0 40px;}
.bill-actions{display:flex;gap:10px;margin-bottom:20px;align-self:flex-start;}
.receipt{background:#fff;color:#1a1a1a;width:320px;padding:24px 20px;font-family:'Courier New',Courier,monospace;font-size:12px;box-shadow:0 8px 40px rgba(0,0,0,0.6);border-radius:4px;}
.receipt-header{text-align:center;margin-bottom:8px;}
.receipt-logo{font-size:28px;margin-bottom:4px;}
.receipt-logo-img{max-width:90px!important;max-height:60px!important;width:auto!important;height:auto!important;object-fit:contain;margin:0 auto 4px;display:block;}
.receipt-shop-name{font-size:16px;font-weight:900;letter-spacing:2px;text-transform:uppercase;}
.receipt-shop-addr{font-size:11px;color:#555;margin-top:2px;}
.receipt-shop-site{font-size:11px;font-weight:700;margin-top:2px;}
.receipt-shop-phone{font-size:11px;color:#555;}
.receipt-dashes{border-top:2px dashed #999;margin:10px 0;}
.receipt-dashes-thin{border-top:1px dashed #ccc;margin:8px 0;}
.receipt-meta div{display:flex;justify-content:space-between;margin:2px 0;font-size:11px;}
.receipt-meta span{color:#666;}
.receipt-section-title{font-size:10px;letter-spacing:2px;text-align:center;margin:6px 0;font-weight:700;color:#444;}
.receipt-item-header{font-weight:700;font-size:12px;margin-top:4px;}
.receipt-item-sub{font-size:10px;color:#666;margin-bottom:4px;}
.receipt-line{display:flex;justify-content:space-between;margin:2px 0;font-size:11px;}
.receipt-line.subtotal{font-weight:700;border-top:1px solid #ccc;margin-top:4px;padding-top:2px;}
.receipt-line.discount{color:#2e7d32;font-weight:600;}
.receipt-line.free-item{color:#1565c0;}
.receipt-line.gst-line{font-size:9px; color:#888; font-style:italic;}
.receipt-line.gst-total-line{font-size:10px; color:#666; font-style:italic; margin-top:-2px;}
.free-tag{background:#e3f2fd;color:#1565c0;padding:0 4px;border-radius:2px;font-size:9px;font-weight:700;margin-left:4px;}
.offer-applied-suffix{color:#1565c0;font-weight:700;}
.receipt-total{display:flex;justify-content:space-between;font-size:18px;font-weight:900;margin:8px 0;}
.receipt-qr{text-align:center;margin:10px 0;}
.receipt-qr img{border:2px solid #eee;padding:4px;border-radius:4px;}
.receipt-barcode{height:48px;background:repeating-linear-gradient(90deg,#111 0px,#111 2px,#fff 2px,#fff 4px,#111 4px,#111 5px,#fff 5px,#fff 8px,#111 8px,#111 11px,#fff 11px,#fff 13px);margin:8px 0;}
.receipt-barcode-text{text-align:center;font-size:9px;color:#666;margin-bottom:4px;}
.receipt-footer{text-align:center;font-size:12px;font-weight:700;margin:4px 0;}
.receipt-footer-2{text-align:center;font-size:10px;color:#666;}
.receipt-coupon{margin-top:10px;}
.coupon-scissors{color:#999;font-size:11px;letter-spacing:1px;}
.coupon-body{
    position:relative;
    border:2px dashed #f57f17;
    border-radius:10px;
    padding:16px 14px;
    text-align:center;
    margin-top:6px;
    background:linear-gradient(135deg,#fff8e1 0%,#ffecb3 100%);
    overflow:hidden;
}
/* Ticket notches on left/right edges */
.coupon-body::before, .coupon-body::after{
    content:'';
    position:absolute;
    top:50%;
    width:16px; height:16px;
    background:#fff;
    border:2px dashed #f57f17;
    border-radius:50%;
    transform:translateY(-50%);
}
.coupon-body::before{ left:-10px; }
.coupon-body::after{ right:-10px; }
.coupon-icon{font-size:30px;margin-bottom:2px;}
.coupon-title{font-size:11px;letter-spacing:3px;color:#e65100;font-weight:800;text-transform:uppercase;}
.coupon-discount{
    font-size:34px;font-weight:900;color:#e65100;margin:6px 0 4px;
    text-shadow:1px 1px 0 rgba(255,255,255,0.6);
}
.coupon-label{font-size:11px;color:#6d4c00;margin-bottom:8px;font-weight:600;}
.coupon-tags{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;}
.coupon-valid{
    font-size:10px;color:#8d6e00;
    display:inline-block;
    padding:3px 10px;
    border:1px solid #f57f17;
    border-radius:12px;
    background:rgba(255,255,255,0.5);
}
.coupon-code{font-size:12px;font-weight:700;color:#a15c00;letter-spacing:3px;margin-top:10px;}

/* Dompdf-safe simplified coupon (no gradients/flex/pseudo-elements) */
.receipt-coupon-pdf{border:2px dashed #f57f17;border-radius:6px;padding:12px;text-align:center;background:#fff8e1;margin-top:6px;}
.coupon-pdf-title{font-size:11px;letter-spacing:2px;color:#e65100;font-weight:800;}
.coupon-pdf-discount{font-size:28px;font-weight:900;color:#e65100;margin:6px 0 4px;}
.coupon-pdf-label{font-size:11px;color:#6d4c00;margin-bottom:6px;font-weight:600;}
.coupon-pdf-tags{font-size:10px;color:#8d6e00;}
.coupon-pdf-code{font-size:12px;font-weight:700;color:#a15c00;letter-spacing:3px;margin-top:8px;}

.receipt-offer-status{display:flex;align-items:flex-start;gap:8px;padding:10px;border-radius:6px;margin-top:6px;font-size:10px;line-height:1.5;}
.receipt-offer-status.applied{background:#e8f5e9;border:1px solid #66bb6a;color:#2e7d32;}
.receipt-offer-status.expired{background:#fff3e0;border:1px solid #ffb74d;color:#e65100;}
.offer-status-icon{font-size:16px;flex-shrink:0;}
.offer-status-text{flex:1;}

/* ======================================================
   PAUSE STATE + TIME'S UP PROMPT
   ====================================================== */
.sidebar-backdrop{display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:190;}
.sidebar-backdrop.show{display:block;}

.unit-session-card.paused{border-color:var(--text-muted); opacity:0.85;}
.unit-session-card.paused .timer-value{color:var(--text-muted);}
.pause-badge{margin-left:auto;background:rgba(255,214,0,0.12);border:1px solid rgba(255,214,0,0.3);color:var(--accent-yellow);padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700;}
.bonus-badge{background:rgba(0,230,118,0.12);border:1px solid rgba(0,230,118,0.3);color:var(--accent-green);padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700;}
.bonus-badge:first-of-type{margin-left:auto;}
.pause-badge ~ .bonus-badge{margin-left:6px;}

.timeup-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,0.65);
    display:flex; align-items:center; justify-content:center;
    z-index:1000; padding:16px;
}
.timeup-box{
    background:var(--bg-card); border:1px solid var(--accent-yellow);
    border-radius:var(--radius); padding:24px; max-width:360px; width:100%;
    text-align:center; box-shadow:0 0 40px rgba(255,214,0,0.15);
}
.timeup-icon{font-size:40px; margin-bottom:8px;}
.timeup-box h3{font-size:16px; margin-bottom:8px; color:var(--text-primary);}
.timeup-customer{font-size:13px; color:var(--accent-blue); font-weight:600; margin-bottom:8px;}
.timeup-box p{font-size:13px; color:var(--text-second); margin-bottom:16px;}
.timeup-actions{display:flex; gap:8px; justify-content:center; margin-bottom:12px; flex-wrap:wrap;}
.timeup-dismiss{width:100%;}

/* ======================================================
   RESPONSIVE — Mobile & Tablet
   ====================================================== */

/* Tablet and below: collapse sidebar to hamburger, stack grids */
@media(max-width:1024px){
    .sidebar{transform:translateX(-100%);}
    .sidebar.open{transform:none; box-shadow:4px 0 24px rgba(0,0,0,0.5);}
    .main-content{margin-left:0;}
    .menu-toggle{display:block;}

    .form-grid-3{grid-template-columns:repeat(2,1fr);}
    .unit-select-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
    .bookings-grid{grid-template-columns:1fr;}
    .stock-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));}
}

/* Mobile phones */
@media(max-width:640px){
    .content-area{padding:12px;}
    .topbar{padding:0 12px;}
    .page-title{font-size:14px;}
    .ist-clock{font-size:11px; padding:4px 8px;}

    /* Forms stack to single column */
    .form-grid-3{grid-template-columns:1fr; gap:10px;}
    .form-row{flex-direction:column; align-items:stretch;}

    /* Setup status grid: 2 columns on phones */
    .status-grid{grid-template-columns:1fr; gap:10px;}
    .status-type-block{min-width:unset;}

    /* Unit selection cards: 2 per row on phones */
    .unit-select-grid{grid-template-columns:repeat(2,1fr); gap:8px;}
    .unit-card-content{flex-direction:column; align-items:flex-start; gap:6px;}
    .unit-card-icon{font-size:20px;}
    .unit-card-rate{font-size:11px;}

    /* Booking cards full width, units stack vertically */
    .units-row{flex-direction:column; padding:12px;}
    .unit-session-card{min-width:unset; padding:12px;}
    .timer-value{font-size:22px;}

    .booking-card-header{flex-direction:column; align-items:flex-start; gap:10px; padding:12px;}
    .booking-live-total{text-align:left; width:100%;}
    .live-total-amount{font-size:20px;}

    /* Action buttons stack and go full-width for easy tapping */
    .usc-actions{gap:8px;}
    .inline-form{flex-direction:column; align-items:stretch; gap:6px;}
    .inline-form select, .inline-form button{width:100%;}
    .usc-actions .btn-sm{width:100%; padding:10px; font-size:13px;}

    /* Beverage row stacks */
    .bev-search-wrap{flex-direction:column; align-items:stretch;}
    .bev-search-wrap select, .bev-search-wrap input, .bev-search-wrap button{width:100%;}

    /* Tables scroll horizontally instead of overflowing */
    .table-wrap{overflow-x:auto;}
    .data-table{min-width:560px;}

    /* Roundoff row stacks */
    .roundoff-row{flex-direction:column; align-items:stretch; gap:8px;}
    .roundoff-input, .roundoff-note{width:100%;}

    /* Offers pills wrap nicely */
    .offer-pill{display:flex; width:100%; box-sizing:border-box;}

    /* Receipt scales to viewport width */
    .receipt{width:100%; max-width:340px; padding:16px 14px;}

    /* Time's up prompt */
    .timeup-actions{flex-direction:column;}
    .timeup-actions button{width:100%;}

    /* Sidebar takes full width when open on small phones */
    .sidebar{width:80%; max-width:280px;}
}

/* Very small phones */
@media(max-width:380px){
    .brand-name{font-size:13px;}
    .customer-avatar, .user-avatar{width:34px; height:34px; font-size:14px;}
    .timer-value{font-size:20px;}
    .live-total-amount{font-size:18px;}
}

/* ======================================================
   PRINT
   ====================================================== */
@page{ size: 80mm auto; margin: 0; }
@media print{
    .sidebar,.topbar,.bill-actions,.no-print{display:none!important;}
    .main-content{margin-left:0!important; width:100%!important;}
    .content-area{padding:0!important; width:100%!important;}
    .bill-page-wrap{padding:0!important; width:100%!important; display:flex!important; justify-content:center!important;}
    html,body{background:#fff!important; width:100%!important; margin:0!important; padding:0!important; -webkit-print-color-adjust:exact; print-color-adjust:exact;}
    .receipt{box-shadow:none!important;width:80mm!important;max-width:80mm!important;margin:0 auto!important;padding:3mm 2mm!important;border-radius:0!important;}
}

/* ======================================================
   GLOBAL STYLED CONFIRM/ALERT DIALOG
   ====================================================== */
.gc-dialog-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:5000;
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transition:opacity .15s;
}
.gc-dialog-overlay.open{ opacity:1; pointer-events:auto; }
.gc-dialog-box{
    background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:0 16px 48px rgba(0,0,0,0.5); width:100%; max-width:380px; margin:16px;
    padding:28px 24px 22px; text-align:center;
    transform:scale(0.96) translateY(8px); transition:transform .15s;
}
.gc-dialog-overlay.open .gc-dialog-box{ transform:scale(1) translateY(0); }
.gc-dialog-icon{ font-size:30px; margin-bottom:10px; }
.gc-dialog-title{ font-size:16px; font-weight:700; color:var(--text-primary); margin-bottom:8px; }
.gc-dialog-message{ font-size:14px; color:var(--text-second); line-height:1.5; margin-bottom:22px; white-space:pre-wrap; }
.gc-dialog-actions{ display:flex; gap:10px; justify-content:center; }
.gc-dialog-actions .btn{ flex:1; justify-content:center; }