:root {
  --bg:       #080a0e;
  --surface:  #0d1117;
  --card:     #111318;
  --border:   rgba(255,255,255,0.07);
  --gold:     #c9a84c;
  --gold-dim: #a07800;
  --blue:     #1668b0;
  --blue-bright:#2882dc;
  --green:    #1a7f37;
  --red:      #c81e2e;
  --text:     #e8eaf0;
  --muted:    #8b949e;
  --sidebar-w:220px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif;font-size:14px;line-height:1.5;overflow-x:hidden}

/* ── SIDEBAR ── */
.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:200;overflow-y:auto}
.sb-brand{padding:16px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.sb-logo-mark{width:36px;height:36px;background:var(--red);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;color:#fff;letter-spacing:.05em;flex-shrink:0}
.sb-brand-text .line1{font-size:14px;font-weight:700;color:var(--text);letter-spacing:.04em}
.sb-brand-text .line2{font-size:10px;color:var(--gold);letter-spacing:.1em;text-transform:uppercase}
.sb-nav{padding:8px 0;flex:1}
.sb-section{font-size:9px;color:var(--muted);letter-spacing:.15em;text-transform:uppercase;padding:12px 14px 4px}
.sb-link{display:flex;align-items:center;gap:9px;padding:8px 14px;color:var(--muted);text-decoration:none;font-size:13px;transition:all .15s;border-left:3px solid transparent}
.sb-link:hover{color:var(--text);background:rgba(255,255,255,.04)}
.sb-link.active{color:var(--gold);border-left-color:var(--gold);background:rgba(201,168,76,.07);font-weight:500}
.sb-link i{font-size:15px;flex-shrink:0}
.sb-footer{padding:12px 14px;border-top:1px solid var(--border)}
.sb-user{display:flex;align-items:center;gap:9px}
.sb-avatar{width:32px;height:32px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:#fff;flex-shrink:0}
.sb-user-name{font-size:12px;font-weight:500;color:var(--text)}
.sb-user-role{font-size:10px;color:var(--muted)}

/* ── MAIN ── */
.main{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column}
.topbar{height:54px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:12px;position:sticky;top:0;z-index:100}
.topbar-title{font-size:15px;font-weight:600;color:var(--text)}
.topbar-clock{font-size:13px;color:var(--gold);font-variant-numeric:tabular-nums;margin-left:auto}
.topbar-date{font-size:12px;color:var(--muted)}
.mob-toggle{display:none;background:none;border:none;color:var(--text);font-size:20px;cursor:pointer}
.content{padding:20px;flex:1}

/* ── CARDS ── */
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.card-header{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px}
.card-header-title{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:7px}
.card-body{padding:16px}
.card-body-sm{padding:10px 16px}

/* ── STAT CARDS ── */
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;display:flex;align-items:center;gap:14px}
.stat-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.stat-val{font-size:22px;font-weight:700;color:var(--text);line-height:1.1}
.stat-val.gold{color:var(--gold)}
.stat-lbl{font-size:11px;color:var(--muted);margin-top:2px}

/* ── ACTIVITY / UNIT CARDS ── */
.unit-card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:transform .15s,box-shadow .15s;position:relative}
.unit-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.4)}
.unit-card.status-active{border-color:rgba(22,104,176,.5)}
.unit-card.status-available{border-color:rgba(26,127,55,.3)}
.unit-card.status-paused{border-color:rgba(139,148,158,.3)}
.unit-card.status-cleaning{border-color:rgba(176,111,0,.3)}
.unit-card.status-maintenance{border-color:rgba(200,30,46,.3)}
.unit-card.status-reserved{border-color:rgba(176,111,0,.4)}

.uc-header{padding:12px 14px 10px;display:flex;align-items:center;justify-content:space-between}
.uc-name{font-size:14px;font-weight:700;color:var(--text)}
.uc-activity{font-size:10px;color:var(--muted);margin-top:1px}

.uc-timer{font-family:'Courier New',monospace;font-size:26px;font-weight:700;color:var(--blue-bright);text-align:center;padding:8px 14px;letter-spacing:.08em;line-height:1}
.uc-amount{font-size:18px;font-weight:700;color:var(--gold);text-align:center;padding:0 14px 6px}
.uc-customer{padding:0 14px 10px;font-size:12px;color:var(--muted)}
.uc-customer span{color:var(--text);font-weight:500}

.uc-actions{padding:10px 14px;border-top:1px solid var(--border);display:flex;gap:6px;flex-wrap:wrap}
.uc-status-bar{height:3px;width:100%}
.uc-status-bar.active{background:var(--blue-bright)}
.uc-status-bar.available{background:var(--green)}
.uc-status-bar.paused{background:var(--muted)}
.uc-status-bar.cleaning{background:var(--gold)}
.uc-status-bar.maintenance{background:var(--red)}
.uc-status-bar.reserved{background:#b86f00}

/* Status badges */
.badge{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.badge-available{background:rgba(26,127,55,.15);color:#56d364;border:1px solid rgba(26,127,55,.25)}
.badge-active{background:rgba(22,104,176,.15);color:#79c0ff;border:1px solid rgba(22,104,176,.25)}
.badge-paused{background:rgba(139,148,158,.15);color:var(--muted);border:1px solid rgba(139,148,158,.2)}
.badge-cleaning{background:rgba(201,168,76,.12);color:var(--gold);border:1px solid rgba(201,168,76,.25)}
.badge-maintenance{background:rgba(200,30,46,.12);color:#ff7b7b;border:1px solid rgba(200,30,46,.2)}
.badge-reserved{background:rgba(184,111,0,.15);color:#ffa657;border:1px solid rgba(184,111,0,.25)}
.badge-paid{background:rgba(26,127,55,.15);color:#56d364;border:1px solid rgba(26,127,55,.2)}
.badge-unpaid{background:rgba(200,30,46,.12);color:#ff7b7b;border:1px solid rgba(200,30,46,.2)}
.badge-partial{background:rgba(176,111,0,.15);color:#ffa657;border:1px solid rgba(176,111,0,.2)}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:8px;font-size:12px;font-weight:500;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:all .15s;font-family:inherit;white-space:nowrap}
.btn-sm{padding:4px 10px;font-size:11px;border-radius:6px}
.btn-lg{padding:10px 20px;font-size:14px}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-primary:hover{background:#1557a0}
.btn-success{background:var(--green);color:#fff;border-color:var(--green)}
.btn-success:hover{background:#15652e}
.btn-danger{background:var(--red);color:#fff;border-color:var(--red)}
.btn-danger:hover{background:#a01724}
.btn-warning{background:#b86f00;color:#fff;border-color:#b86f00}
.btn-gold{background:var(--gold-dim);color:#fff;border-color:var(--gold-dim)}
.btn-outline{background:transparent;color:var(--muted);border-color:var(--border)}
.btn-outline:hover{border-color:rgba(255,255,255,.2);color:var(--text)}
.btn-ghost{background:transparent;color:var(--muted);border-color:transparent}
.btn-ghost:hover{background:rgba(255,255,255,.05);color:var(--text)}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ── FORMS ── */
.form-group{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.form-label{font-size:12px;color:var(--muted);font-weight:500}
.form-label.required::after{content:' *';color:var(--red)}
.form-control,.form-select{background:var(--surface);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:9px 12px;font-size:13px;color:var(--text);width:100%;outline:none;transition:border-color .15s;font-family:inherit}
.form-control:focus,.form-select:focus{border-color:var(--blue-bright)}
.form-control::placeholder{color:var(--muted)}
.form-select option{background:var(--surface)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.form-full{grid-column:1/-1}

/* ── TABLES ── */
.table-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl th{background:rgba(255,255,255,.03);color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap;text-align:left}
table.tbl td{padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--text);vertical-align:middle}
table.tbl tbody tr:hover{background:rgba(255,255,255,.025)}
table.tbl tbody tr:last-child td{border-bottom:none}

/* ── ALERTS / FLASH ── */
.alert{padding:10px 14px;border-radius:8px;font-size:13px;display:flex;align-items:flex-start;gap:8px;margin-bottom:14px}
.alert-success{background:rgba(26,127,55,.12);border:1px solid rgba(26,127,55,.25);color:#56d364}
.alert-error,.alert-danger{background:rgba(200,30,46,.1);border:1px solid rgba(200,30,46,.2);color:#ff7b7b}
.alert-info{background:rgba(22,104,176,.1);border:1px solid rgba(22,104,176,.2);color:#79c0ff}
.alert-warning{background:rgba(176,111,0,.1);border:1px solid rgba(176,111,0,.2);color:#ffa657}

/* ── MODALS ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:999;display:flex;align-items:center;justify-content:center;padding:16px}
.modal-overlay.hidden{display:none}
.modal{background:var(--card);border:1px solid var(--border);border-radius:16px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto}
.modal-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.modal-title{font-size:15px;font-weight:600;color:var(--text)}
.modal-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;padding:4px}
.modal-body{padding:20px}
.modal-footer{padding:14px 20px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end}
.modal-lg{max-width:680px}

/* ── CAFÉ GRID ── */
.cafe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.cafe-item-btn{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 8px;text-align:center;cursor:pointer;transition:all .15s;display:flex;flex-direction:column;align-items:center;gap:4px}
.cafe-item-btn:hover{border-color:var(--gold-dim);background:rgba(201,168,76,.06)}
.cafe-item-btn.selected{border-color:var(--gold);background:rgba(201,168,76,.12)}
.cafe-item-icon{font-size:22px;color:var(--gold)}
.cafe-item-name{font-size:11px;font-weight:500;color:var(--text);line-height:1.3}
.cafe-item-price{font-size:12px;color:var(--muted)}

/* ── NOTIFICATION DOT ── */
.notif-dot{position:absolute;top:4px;right:4px;width:8px;height:8px;border-radius:50%;background:var(--red);border:2px solid var(--surface)}
.pos-relative{position:relative}

/* ── LIVE TIMER DISPLAY ── */
.big-timer{font-family:'Courier New',monospace;font-size:48px;font-weight:700;color:var(--blue-bright);letter-spacing:.1em;text-align:center;line-height:1}
.big-amount{font-size:32px;font-weight:700;color:var(--gold);text-align:center}

/* ── RECEIPT ── */
@media print {
  .no-print{display:none!important}
  body{background:#fff;color:#000}
  .receipt-wrap{max-width:380px;margin:0 auto;font-family:monospace;font-size:12px}
}
.receipt-wrap{max-width:380px;margin:0 auto;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;font-size:13px}
.receipt-header{text-align:center;border-bottom:1px dashed var(--border);padding-bottom:12px;margin-bottom:12px}
.receipt-logo{font-size:20px;font-weight:900;letter-spacing:.06em;color:var(--text)}
.receipt-logo em{color:var(--red);font-style:normal}
.receipt-row{display:flex;justify-content:space-between;padding:3px 0;font-size:12px}
.receipt-row.total{border-top:1px dashed var(--border);padding-top:8px;margin-top:4px;font-weight:700;font-size:14px;color:var(--gold)}
.receipt-divider{border:none;border-top:1px dashed var(--border);margin:10px 0}

/* ── RESPONSIVE ── */
@media(max-width:991px){
  .sidebar{transform:translateX(-100%);transition:transform .25s}
  .sidebar.open{transform:none}
  .main{margin-left:0}
  .mob-toggle{display:block}
  .form-row,.form-row-3{grid-template-columns:1fr}
}
@media(max-width:575px){
  .content{padding:12px}
  .topbar{padding:0 12px}
  .big-timer{font-size:32px}
  .big-amount{font-size:22px}
}

/* ── PWA / iPAD OPTIMIZATIONS ── */

/* Safe area insets for notch/home bar */
.sidebar {
  padding-bottom: env(safe-area-inset-bottom);
  padding-left:   env(safe-area-inset-left);
}
.main {
  padding-bottom: env(safe-area-inset-bottom);
}
.topbar {
  padding-right: max(20px, env(safe-area-inset-right));
  padding-left:  max(20px, env(safe-area-inset-left));
}

/* iPad landscape — widen sidebar slightly */
@media (min-width:1024px) and (max-width:1366px) and (orientation:landscape) {
  :root { --sidebar-w: 200px }
  .content { padding: 16px }
  .unit-card { border-radius: 12px }
  .uc-timer { font-size: 22px }
  .uc-amount { font-size: 16px }
}

/* iPad portrait */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
  :root { --sidebar-w: 0px }
  .sidebar { transform: translateX(-100%); transition: transform .25s }
  .sidebar.open { transform: none; width: 220px; z-index: 300 }
  .main { margin-left: 0 }
  .mob-toggle { display: block }
}

/* Touch targets — bigger on iPad */
@media (pointer:coarse) {
  .btn { padding: 9px 16px; min-height: 42px }
  .btn-sm { padding: 7px 12px; min-height: 36px; font-size: 12px }
  .sb-link { padding: 11px 14px }
  .form-control, .form-select { padding: 11px 12px; font-size: 15px }
  .cafe-item-btn { padding: 14px 8px; min-height: 80px }
  .unit-card { cursor: default }
}

/* PWA standalone mode — hide browser chrome artifacts */
@media (display-mode: standalone) {
  .topbar { border-top: env(safe-area-inset-top) solid var(--surface) }
}

/* Prevent text selection on tap (POS feel) */
.uc-actions, .cafe-grid, .btn {
  -webkit-user-select: none;
  user-select: none;
}

/* Smooth scrolling on iOS */
.table-wrap, .sidebar, .modal-body {
  -webkit-overflow-scrolling: touch;
}