/* ================================================================
   Restaurant POS — Global Stylesheet
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700;800&display=swap');

/* ── CSS Variables ─────────────────────────────────────────────── */
:root {
  --primary:        #FF6B35;
  --primary-dark:   #E55A24;
  --primary-light:  #FFF0EB;
  --secondary:      #1A1D2E;
  --secondary-mid:  #2D3436;
  --accent:         #00CEC9;
  --success:        #00B894;
  --success-light:  #E8F8F5;
  --warning:        #FDCB6E;
  --danger:         #D63031;
  --danger-light:   #FEF0F0;
  --info:           #3498DB;
  --info-light:     #EBF5FB;

  --bg:             #F0F2F5;
  --card:           #FFFFFF;
  --border:         #E9ECEF;
  --border-light:   #F5F5F5;
  --text:           #2D3436;
  --text-muted:     #636E72;
  --text-light:     #B2BEC3;

  --shadow-sm:      0 2px 8px  rgba(0,0,0,0.06);
  --shadow:         0 4px 20px rgba(0,0,0,0.08);
  --shadow-md:      0 8px 30px rgba(0,0,0,0.12);
  --shadow-lg:      0 16px 48px rgba(0,0,0,0.18);

  --radius-sm:      8px;
  --radius:         12px;
  --radius-lg:      16px;
  --radius-xl:      24px;

  --transition:     all 0.2s ease;
  --transition-md:  all 0.3s ease;
}

/* ── Reset & Base ──────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Prompt', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}


button, input, select, textarea { font-family: inherit; }
/* ── Typography ────────────────────────────────────────────────── */
.text-primary   { color: var(--primary)  !important; }
.text-success   { color: var(--success)  !important; }
.text-danger    { color: var(--danger)   !important; }
.text-muted-pos { color: var(--text-muted); }
.text-light-pos { color: var(--text-light); }
.fw-800         { font-weight: 800; }

/* ── Cards ─────────────────────────────────────────────────────── */
.pos-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.pos-card-body   { padding: 20px 24px; }
.pos-card-header { padding: 16px 24px; border-bottom: 1.5px solid var(--border); }
.pos-card-footer { padding: 14px 24px; border-top:    1.5px solid var(--border); background: #fafafa; }

/* ── Buttons ───────────────────────────────────────────────────── */
.btn-pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 22px;
  border: none;
  border-radius: var(--radius);
  font-family: 'Prompt', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
}
.btn-pos:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-primary  { background: var(--primary);  color: #fff; }
.btn-primary:hover  { background: var(--primary-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(255,107,53,0.35); }

.btn-success  { background: var(--success);  color: #fff; }
.btn-success:hover  { filter: brightness(0.92); transform: translateY(-1px); }

.btn-danger   { background: var(--danger);   color: #fff; }
.btn-danger:hover   { filter: brightness(0.92); transform: translateY(-1px); }

.btn-info     { background: var(--info);     color: #fff; }
.btn-info:hover     { filter: brightness(0.92); transform: translateY(-1px); }

.btn-secondary-pos { background: var(--bg); color: var(--text); border: 1.5px solid var(--border); }
.btn-secondary-pos:hover { background: var(--border); }

.btn-ghost {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
}
.btn-ghost:hover { background: var(--primary); color: #fff; }

.btn-icon {
  width: 38px; height: 38px;
  padding: 0;
  border-radius: 50%;
  font-size: 16px;
}

.btn-sm  { padding: 7px 14px; font-size: 12px; border-radius: var(--radius-sm); }
.btn-lg  { padding: 14px 32px; font-size: 16px; border-radius: var(--radius-lg); }
.btn-full { width: 100%; }

/* ── Forms ─────────────────────────────────────────────────────── */
.pos-form-label {
  font-size: 13px;
  font-weight: 600;
  color: #444;
  margin-bottom: 6px;
  display: block;
}

.pos-input, .pos-select, .pos-textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: 'Prompt', sans-serif;
  font-size: 14px;
  color: var(--text);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.pos-input:focus, .pos-select:focus, .pos-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255,107,53,0.12);
}

.pos-input::placeholder { color: var(--text-light); }
.pos-textarea { resize: vertical; min-height: 80px; }

/* ── Badges / Tags ─────────────────────────────────────────────── */
.badge-pos {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}

.badge-primary  { background: var(--primary-light); color: var(--primary); }
.badge-success  { background: var(--success-light); color: var(--success); }
.badge-danger   { background: var(--danger-light);  color: var(--danger);  }
.badge-info     { background: var(--info-light);    color: var(--info);    }
.badge-warning  { background: #FFF8E7;              color: #856404;        }
.badge-neutral  { background: #F0F2F5;              color: var(--text-muted); }

/* ── Tables ────────────────────────────────────────────────────── */
.pos-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.pos-table th {
  background: #F8F9FA;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: left;
  border-bottom: 2px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.pos-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
  vertical-align: middle;
}
.pos-table tr:last-child td { border-bottom: none; }
.pos-table tr:hover td { background: #FAFBFC; }

/* ── Status chips ──────────────────────────────────────────────── */
.status-available { background: var(--success-light); color: var(--success); }
.status-occupied  { background: var(--primary-light);  color: var(--primary);  }
.status-pending   { background: #FFF8E7;               color: #856404;         }
.status-preparing { background: var(--info-light);     color: var(--info);     }
.status-ready     { background: var(--success-light);  color: var(--success);  }
.status-closed    { background: #F0F2F5;               color: var(--text-muted); }

/* ── Navbar ────────────────────────────────────────────────────── */
.pos-navbar {
  background: linear-gradient(135deg, var(--secondary) 0%, #12141f 100%);
  padding: 13px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 300;
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.pos-navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pos-navbar-icon {
  width: 40px; height: 40px;
  background: var(--primary);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.pos-navbar-title  { color: #fff; font-size: 17px; font-weight: 700; line-height: 1.2; }
.pos-navbar-sub    { color: rgba(255,255,255,0.45); font-size: 11px; }

.pos-nav-btn {
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.13);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: 'Prompt', sans-serif;
  font-size: 13px;
  font-weight: 500;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.pos-nav-btn:hover { background: rgba(255,255,255,0.18); color: #fff; }
.pos-nav-btn.active { background: var(--primary); border-color: var(--primary); }

/* ── Toast notifications ───────────────────────────────────────── */
.pos-toast-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.pos-toast {
  background: var(--secondary-mid);
  color: #fff;
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-lg);
  min-width: 240px;
  max-width: 340px;
  animation: toastIn 0.3s ease;
  pointer-events: all;
  font-size: 13px;
}
.pos-toast.success { border-left: 4px solid var(--success); }
.pos-toast.error   { border-left: 4px solid var(--danger);  }
.pos-toast.info    { border-left: 4px solid var(--info);    }
.pos-toast.warning { border-left: 4px solid var(--warning); }

@keyframes toastIn {
  from { transform: translateX(60px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes toastOut {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(60px); opacity: 0; }
}

/* ── Skeleton loader ───────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Live / Pulse indicators ───────────────────────────────────── */
.live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
  display: inline-block;
  animation: livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0,184,148,0.4); }
  50%       { opacity: 0.7; box-shadow: 0 0 0 6px rgba(0,184,148,0); }
}

/* ── Dividers ──────────────────────────────────────────────────── */
.pos-divider {
  border: none;
  border-top: 1.5px solid var(--border);
  margin: 16px 0;
}

/* ── Grid helpers ──────────────────────────────────────────────── */
.pos-grid-2 { display: grid; grid-template-columns: 1fr 1fr;       gap: 16px; }
.pos-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.pos-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }

@media (max-width: 768px) {
  .pos-grid-4 { grid-template-columns: 1fr 1fr; }
  .pos-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .pos-grid-2, .pos-grid-3, .pos-grid-4 { grid-template-columns: 1fr; }
}

/* ── Scrollbar — hidden globally ───────────────────────────────── */
* {
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE/Edge */
}
*::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* ── Animations ────────────────────────────────────────────────── */
@keyframes fadeIn    { from { opacity: 0; }               to { opacity: 1; } }
@keyframes slideUp   { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes scaleIn   { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bounce    { 0%,100%{transform:scale(1)} 40%{transform:scale(1.25)} 70%{transform:scale(0.9)} }

.anim-fade-in  { animation: fadeIn  0.3s ease both; }
.anim-slide-up { animation: slideUp 0.35s ease both; }
.anim-scale-in { animation: scaleIn 0.3s ease both; }

/* ── Modal overrides ───────────────────────────────────────────── */
.pos-modal .modal-content {
  border: none;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.pos-modal .modal-header {
  background: linear-gradient(135deg, var(--secondary) 0%, #12141f 100%);
  color: #fff;
  border-bottom: none;
  padding: 18px 24px;
}
.pos-modal .modal-title { font-size: 17px; font-weight: 700; }
.pos-modal .modal-body  { padding: 24px; }

/* ── Print styles ──────────────────────────────────────────────── */
@media print {
  .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  .pos-card { box-shadow: none; border: 1px solid #ddd; }
}

/* ================================================================
   Consolidated Page CSS
   Extracted from PHP templates. Keep page-specific rules scoped by body class.
   ================================================================ */

/* ---- login.php ---- */
body.page-login, body.page-login *{scrollbar-width:none;-ms-overflow-style:none;}body.page-login::-webkit-scrollbar, body.page-login *::-webkit-scrollbar{display:none;}
body.page-login, body.page-login * { font-family:'Prompt',sans-serif; box-sizing:border-box; margin:0; padding:0; }
body.page-login .fa, body.page-login .fas, body.page-login .far, body.page-login .fal, body.page-login .fad, body.page-login .fab, body.page-login .fa-solid, body.page-login .fa-regular, body.page-login .fa-brands {
  font-style: normal;
  line-height: 1;
}
body.page-login .fas, body.page-login .fa-solid { font-family: "Font Awesome 6 Free"; font-weight: 900; }
body.page-login .far, body.page-login .fa-regular { font-family: "Font Awesome 6 Free"; font-weight: 400; }
body.page-login .fab, body.page-login .fa-brands { font-family: "Font Awesome 6 Brands"; font-weight: 400; }
body.page-login .fa-emoji-fallback { font-family:'Prompt',sans-serif!important; font-weight:400!important; }

body.page-login {
  min-height: 100vh;
  display: flex;
  background: #0F1117;
  overflow: hidden;
}

/* Left panel - decorative */
body.page-login .left-panel {
  flex: 1;
  background: linear-gradient(145deg, #1a1d2e 0%, #0f1117 60%, #1a0a05 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px;
  position: relative;
  overflow: hidden;
}

/* Animated background circles */
body.page-login .bg-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.06;
  animation: floatCircle 8s ease-in-out infinite;
}
body.page-login .bg-circle:nth-child(1) { width:500px; height:500px; background:#FF6B35; top:-150px; left:-150px; animation-delay:0s; }
body.page-login .bg-circle:nth-child(2) { width:300px; height:300px; background:#FF6B35; bottom:50px; right:-80px; animation-delay:3s; }
body.page-login .bg-circle:nth-child(3) { width:200px; height:200px; background:#fff; top:50%; left:60%; animation-delay:5s; }

@keyframes floatCircle {
  0%,100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-30px) scale(1.05); }
}

body.page-login .brand-section { position: relative; z-index: 1; text-align: center; }
body.page-login .brand-logo {
  width: 90px; height: 90px;
  background: linear-gradient(135deg, #FF6B35, #E55A24);
  border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; margin: 0 auto 24px;
  box-shadow: 0 20px 60px rgba(255,107,53,0.4);
  animation: logoFloat 4s ease-in-out infinite;
}
@keyframes logoFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(3deg); }
}

body.page-login .brand-name { color: #fff; font-size: 32px; font-weight: 800; letter-spacing: -0.5px; }
body.page-login .brand-sub  { color: rgba(255,255,255,0.4); font-size: 15px; margin-top: 8px; }

body.page-login .feature-list {
  position: relative; z-index: 1;
  margin-top: 48px;
  display: flex; flex-direction: column; gap: 14px;
}
body.page-login .feature-item {
  display: flex; align-items: center; gap: 14px;
  color: rgba(255,255,255,0.65); font-size: 14px;
}
body.page-login .feature-dot {
  width: 36px; height: 36px; border-radius: 10px;
  background: rgba(255,107,53,0.15);
  border: 1px solid rgba(255,107,53,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}

/* Right panel - login form */
body.page-login .right-panel {
  width: 480px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  position: relative;
}

body.page-login .login-box { width: 100%; max-width: 360px; }

body.page-login .login-welcome { font-size: 26px; font-weight: 800; color: #1A1D2E; margin-bottom: 6px; }
body.page-login .login-sub { font-size: 14px; color: #636E72; margin-bottom: 36px; }

/* Role selector tabs */
body.page-login .role-tabs {
  display: flex; gap: 8px; margin-bottom: 28px;
  background: #F0F2F5; border-radius: 12px; padding: 5px;
}
body.page-login .role-tab {
  flex: 1; padding: 10px; border: none; border-radius: 9px;
  background: transparent; cursor: pointer;
  font-family: 'Prompt',sans-serif; font-size: 13px; font-weight: 600;
  color: #636E72; transition: all 0.25s; display: flex; align-items: center;
  justify-content: center; gap: 7px;
}
body.page-login .role-tab.active {
  background: #fff;
  color: #1A1D2E;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
body.page-login .role-tab.active.admin-tab { color: #D63031; }
body.page-login .role-tab.active.staff-tab { color: #FF6B35; }

/* Form fields */
body.page-login .field-wrap { margin-bottom: 18px; }
body.page-login .field-label { display: block; font-size: 13px; font-weight: 600; color: #444; margin-bottom: 7px; }

body.page-login .field-input-wrap { position: relative; }
body.page-login .field-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: #B2BEC3; font-size: 15px; pointer-events: none;
}
body.page-login .field-input {
  width: 100%; padding: 13px 14px 13px 42px;
  border: 1.5px solid #E9ECEF; border-radius: 12px;
  font-family: 'Prompt',sans-serif; font-size: 14px; color: #2D3436;
  outline: none; transition: border-color 0.2s, box-shadow 0.2s;
  background: #FAFBFC;
}
body.page-login .field-input:focus {
  border-color: #FF6B35;
  box-shadow: 0 0 0 4px rgba(255,107,53,0.1);
  background: #fff;
}
body.page-login .field-input::placeholder { color: #C8D0D8; }

/* Toggle password */
body.page-login .toggle-pw {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #B2BEC3; cursor: pointer;
  font-size: 15px; padding: 0;
}
body.page-login .toggle-pw:hover { color: #636E72; }

/* Error message */
body.page-login .error-box {
  background: #FEF0F0; border: 1.5px solid #FABEBE;
  border-radius: 10px; padding: 12px 14px;
  color: #D63031; font-size: 13px;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 18px; animation: shakeErr 0.35s ease;
}
@keyframes shakeErr {
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 60%{transform:translateX(8px)} 80%{transform:translateX(-4px)}
}

/* Submit button */
body.page-login .login-btn {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, #FF6B35, #E55A24);
  border: none; border-radius: 12px; color: #fff;
  font-family: 'Prompt',sans-serif; font-size: 15px; font-weight: 700;
  cursor: pointer; transition: all 0.25s; margin-top: 4px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 6px 20px rgba(255,107,53,0.35);
}
body.page-login .login-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255,107,53,0.45); }
body.page-login .login-btn:active { transform: translateY(0); }
body.page-login .login-btn.loading { opacity: 0.75; pointer-events: none; }

/* Quick login hint */
body.page-login .hint-box {
  margin-top: 24px; background: #F8F9FA; border-radius: 10px;
  padding: 14px 16px; font-size: 12px; color: #636E72;
  border-left: 3px solid #FF6B35;
}
body.page-login .hint-box strong { color: #2D3436; }

/* Version tag */
body.page-login .version-tag {
  position: absolute; bottom: 20px; right: 24px;
  font-size: 11px; color: #B2BEC3;
}

@media (max-width: 768px) {
  body.page-login .left-panel { display: none; }
  body.page-login .right-panel { width: 100%; padding: 32px 24px; }
}

/* ---- change_password.php ---- */
body.page-change-password, body.page-change-password *{font-family:'Prompt',sans-serif;box-sizing:border-box;}
body.page-change-password{background:#F0F2F5;min-height:100vh;display:flex;flex-direction:column;}
body.page-change-password .top-bar{background:linear-gradient(135deg,#1A1D2E,#12141f);padding:14px 24px;display:flex;align-items:center;justify-content:space-between;}
body.page-change-password .top-bar-brand{display:flex;align-items:center;gap:12px;}
body.page-change-password .top-bar-icon{width:38px;height:38px;border-radius:10px;background:#FF6B35;display:flex;align-items:center;justify-content:center;font-size:18px;}
body.page-change-password .top-bar-title{color:#fff;font-size:16px;font-weight:700;}
body.page-change-password .top-bar-sub{color:rgba(255,255,255,0.4);font-size:11px;}
body.page-change-password .back-link{color:rgba(255,255,255,0.65);text-decoration:none;font-size:13px;display:flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid rgba(255,255,255,0.12);border-radius:8px;transition:.2s;}
body.page-change-password .back-link:hover{background:rgba(255,255,255,0.1);color:#fff;}
body.page-change-password .wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 16px;}
body.page-change-password .card{background:#fff;border-radius:20px;padding:36px;max-width:440px;width:100%;box-shadow:0 8px 40px rgba(0,0,0,0.1);}
body.page-change-password .user-badge{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;background:#F8F9FA;border:1.5px solid #E9ECEF;margin-bottom:24px;}
body.page-change-password .user-avatar{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;color:#fff;flex-shrink:0;}
body.page-change-password .user-badge-name{font-weight:700;font-size:15px;}
body.page-change-password .user-badge-meta{font-size:12px;color:#636E72;margin-top:2px;}
body.page-change-password .role-pill{display:inline-flex;align-items:center;padding:2px 9px;border-radius:20px;font-size:10px;font-weight:700;color:#fff;margin-left:6px;}
body.page-change-password .card-title{font-size:20px;font-weight:800;color:#1A1D2E;margin-bottom:4px;}
body.page-change-password .card-sub{font-size:13px;color:#636E72;margin-bottom:22px;}
body.page-change-password .field-wrap{margin-bottom:16px;}
body.page-change-password .field-wrap label{display:block;font-size:12px;font-weight:700;color:#444;margin-bottom:6px;text-transform:uppercase;letter-spacing:.3px;}
body.page-change-password .pw-wrap{position:relative;}
body.page-change-password .pw-wrap input{padding-right:44px!important;}
body.page-change-password .pw-eye{position:absolute;right:13px;top:50%;transform:translateY(-50%);background:none;border:none;color:#B2BEC3;cursor:pointer;font-size:14px;padding:0;}
body.page-change-password .pw-eye:hover{color:#636E72;}
body.page-change-password .pw-strength{height:5px;border-radius:3px;margin-top:6px;background:#E9ECEF;transition:all .3s;}
body.page-change-password .pw-strength.weak{background:linear-gradient(90deg,#D63031 30%,#E9ECEF 30%);}
body.page-change-password .pw-strength.medium{background:linear-gradient(90deg,#F39C12 65%,#E9ECEF 65%);}
body.page-change-password .pw-strength.strong{background:#00B894;}
body.page-change-password .pw-hint{font-size:11px;margin-top:3px;}
body.page-change-password .submit-btn{width:100%;padding:14px;background:linear-gradient(135deg,#FF6B35,#E55A24);border:none;border-radius:12px;color:#fff;font-family:'Prompt',sans-serif;font-size:15px;font-weight:700;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px;}
body.page-change-password .submit-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(255,107,53,.4);}
body.page-change-password .submit-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none;}
body.page-change-password .alert-box{border-radius:12px;padding:12px 16px;font-size:13px;display:flex;align-items:center;gap:10px;margin-bottom:18px;font-weight:500;}
body.page-change-password .alert-success{background:#E8F8F5;color:#00695C;border:1.5px solid #B2DFDB;}
body.page-change-password .alert-error{background:#FEF0F0;color:#C62828;border:1.5px solid #FFCDD2;}
body.page-change-password .divider{border:none;border-top:1.5px solid #F0F2F5;margin:20px 0;}
body.page-change-password .tip-box{background:#F8F9FA;border-radius:10px;padding:12px 14px;font-size:12px;color:#636E72;border-left:3px solid #FF6B35;}
body.page-change-password .tip-box li{margin-bottom:4px;}

/* ---- index.php ---- */
/* ── Base ─────────────────────────────────────────────────────── */
body.page-staff-dashboard {
  --primary:#FF6B35; --primary-dark:#E55A24; --secondary:#2D3436;
  --accent:#00CEC9; --success:#00B894; --warning:#FDCB6E;
  --danger:#D63031; --light-bg:#F8F9FA; --card-bg:#FFFFFF;
  --text-main:#2D3436; --text-muted:#636E72; --border:#E9ECEF;
  --shadow:0 4px 20px rgba(0,0,0,0.08); --shadow-hover:0 8px 30px rgba(0,0,0,0.15);
}
body.page-staff-dashboard, body.page-staff-dashboard *{box-sizing:border-box;margin:0;padding:0;scrollbar-width:none;-ms-overflow-style:none;}
body.page-staff-dashboard::-webkit-scrollbar, body.page-staff-dashboard *::-webkit-scrollbar{display:none;}
body.page-staff-dashboard{height:100vh;overflow:hidden;font-family:'Prompt',sans-serif;}
body.page-staff-dashboard{display:flex;flex-direction:column;background:#F0F2F5;}

/* ── Navbar ───────────────────────────────────────────────────── */
body.page-staff-dashboard .navbar-pos{background:linear-gradient(135deg,var(--secondary) 0%,#1a1f2e 100%);padding:10px 20px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;box-shadow:0 2px 20px rgba(0,0,0,0.3);gap:12px;}
body.page-staff-dashboard .navbar-brand-pos{display:flex;align-items:center;gap:12px;flex-shrink:0;}
body.page-staff-dashboard .brand-icon{width:36px;height:36px;background:var(--primary);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;}
body.page-staff-dashboard .brand-name{color:#fff;font-size:16px;font-weight:600;}
body.page-staff-dashboard .brand-sub{color:rgba(255,255,255,0.5);font-size:11px;}
body.page-staff-dashboard .pulse-dot{width:7px;height:7px;background:var(--success);border-radius:50%;display:inline-block;margin-right:5px;animation:page-staff-dashboard-pulse 1.5s infinite;}
@keyframes page-staff-dashboard-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.5;transform:scale(1.5);}}

/* ── Nav Tab Toggle ───────────────────────────────────────────── */
body.page-staff-dashboard .nav-tabs-pos{display:flex;gap:4px;background:rgba(255,255,255,.1);border-radius:10px;padding:4px;flex-shrink:0;}
body.page-staff-dashboard .nav-tab-pos{padding:7px 18px;border:none;border-radius:8px;cursor:pointer;font-family:'Prompt';font-size:13px;font-weight:600;color:rgba(255,255,255,.6);background:transparent;transition:.15s;white-space:nowrap;}
body.page-staff-dashboard .nav-tab-pos.active{background:var(--primary);color:#fff;}

/* ── Nav Actions ──────────────────────────────────────────────── */
body.page-staff-dashboard .nav-actions{display:flex;gap:8px;align-items:center;flex-shrink:0;}
body.page-staff-dashboard .nav-btn{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.15);color:#fff;padding:7px 13px;border-radius:8px;cursor:pointer;font-family:'Prompt';font-size:12px;transition:all 0.2s;display:flex;align-items:center;gap:5px;text-decoration:none;}
body.page-staff-dashboard .nav-btn:hover{background:rgba(255,255,255,0.2);color:#fff;}
body.page-staff-dashboard .alert-badge{position:relative;}
body.page-staff-dashboard .badge-count{position:absolute;top:-6px;right:-6px;background:var(--danger);color:#fff;border-radius:50%;width:18px;height:18px;font-size:10px;display:flex;align-items:center;justify-content:center;font-weight:700;}

/* ── Calls Panel ──────────────────────────────────────────────── */
body.page-staff-dashboard #callsPanel{background:#fff;padding:14px 20px;border-bottom:1px solid var(--border);flex-shrink:0;}
body.page-staff-dashboard .call-item{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;margin-bottom:8px;}
body.page-staff-dashboard .call-item.call_staff{background:#FFF8E7;border-left:4px solid var(--warning);}
body.page-staff-dashboard .call-item.check_bill{background:#E8F8F5;border-left:4px solid var(--success);}
body.page-staff-dashboard .call-item.out_of_stock{background:#FEF0F0;border-left:4px solid var(--danger);}
body.page-staff-dashboard .call-icon{font-size:20px;}body.page-staff-dashboard .call-info{flex:1;}body.page-staff-dashboard .call-table{font-weight:600;font-size:14px;}
body.page-staff-dashboard .call-time{font-size:11px;color:var(--text-muted);}
body.page-staff-dashboard .call-ack-btn{background:var(--success);color:#fff;border:none;border-radius:8px;padding:6px 12px;font-family:'Prompt';font-size:12px;cursor:pointer;}
body.page-staff-dashboard .card-ack-bar{background:#FF6B35;padding:6px 12px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#fff;font-weight:600;gap:8px;}
body.page-staff-dashboard .card-ack-btn{background:#fff;color:#FF6B35;border:none;border-radius:6px;padding:3px 10px;font-size:12px;font-weight:700;cursor:pointer;}

/* ── Tab Sections ─────────────────────────────────────────────── */
body.page-staff-dashboard #tabSale{flex:1;overflow:hidden;display:flex;}
body.page-staff-dashboard #tabDash{flex:1;overflow-y:auto;display:none;background:#F0F2F5;}

/* ════════════════════════════════════════════════════════════════
   COUNTER SALE CSS
   ════════════════════════════════════════════════════════════════ */
body.page-staff-dashboard .products-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#F0F2F5;}
body.page-staff-dashboard .cart-panel{width:390px;display:flex;flex-direction:column;background:#fff;border-left:1px solid #E9ECEF;flex-shrink:0;}
body.page-staff-dashboard .cat-bar{padding:10px 12px;background:#fff;border-bottom:1px solid #E9ECEF;display:flex;gap:6px;overflow-x:auto;flex-shrink:0;}
body.page-staff-dashboard .cat-btn{padding:6px 14px;border-radius:20px;border:1.5px solid #E9ECEF;background:#fff;cursor:pointer;font-family:'Prompt';font-size:12px;font-weight:600;color:#636E72;white-space:nowrap;transition:.15s;flex-shrink:0;}
body.page-staff-dashboard .cat-btn:hover{border-color:#FF6B35;color:#FF6B35;}body.page-staff-dashboard .cat-btn.active{background:#FF6B35;border-color:#FF6B35;color:#fff;}
body.page-staff-dashboard .h-search{flex:1;max-width:400px;position:relative;margin:0 12px;}
body.page-staff-dashboard .h-search input{width:100%;padding:8px 16px 8px 38px;border-radius:10px;border:none;background:rgba(255,255,255,.12);color:#fff;font-family:'Prompt';font-size:13px;outline:none;}
body.page-staff-dashboard .h-search input::placeholder{color:rgba(255,255,255,.4);}
body.page-staff-dashboard .h-search input:focus{background:rgba(255,255,255,.2);}
body.page-staff-dashboard .h-search .search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.4);font-size:13px;}
body.page-staff-dashboard .h-search .clear-btn{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.4);cursor:pointer;font-size:13px;display:none;}
body.page-staff-dashboard .h-clock{color:rgba(255,255,255,.6);font-size:13px;font-weight:500;min-width:65px;text-align:right;}
body.page-staff-dashboard .product-grid{flex:1;overflow-y:auto;padding:12px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-content:start;}
body.page-staff-dashboard .product-card{background:#fff;border-radius:12px;padding:12px 8px;cursor:pointer;border:2px solid transparent;transition:all .15s;position:relative;text-align:center;user-select:none;}
body.page-staff-dashboard .product-card:hover{border-color:#FF6B35;box-shadow:0 4px 14px rgba(255,107,53,.18);transform:translateY(-2px);}
body.page-staff-dashboard .product-card:active{transform:scale(.95);background:#FFF5F0;}
body.page-staff-dashboard .p-icon{font-size:28px;margin-bottom:5px;display:block;}body.page-staff-dashboard .p-img{width:64px;height:64px;object-fit:cover;border-radius:10px;margin-bottom:5px;}body.page-staff-dashboard .p-name{font-size:12px;font-weight:600;color:#2D3436;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body.page-staff-dashboard .p-code{font-size:10px;color:#b2bec3;margin-bottom:3px;}body.page-staff-dashboard .p-price{font-size:14px;font-weight:700;color:#FF6B35;}
body.page-staff-dashboard .p-orig{font-size:11px;color:#b2bec3;text-decoration:line-through;}body.page-staff-dashboard .p-badge{position:absolute;top:6px;right:6px;background:#FF6B35;color:#fff;border-radius:50%;width:20px;height:20px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;}
body.page-staff-dashboard .p-promo{position:absolute;top:6px;left:6px;background:#E74C3C;color:#fff;border-radius:4px;padding:1px 5px;font-size:9px;font-weight:700;}
body.page-staff-dashboard .no-results{grid-column:1/-1;text-align:center;padding:40px;color:#b2bec3;font-size:14px;}
body.page-staff-dashboard .cart-head{padding:12px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #E9ECEF;flex-shrink:0;}
body.page-staff-dashboard .cart-count{background:#FF6B35;color:#fff;border-radius:20px;padding:3px 10px;font-size:13px;font-weight:700;}
body.page-staff-dashboard .cart-clear{border:none;background:none;color:#b2bec3;cursor:pointer;font-family:'Prompt';font-size:12px;}
body.page-staff-dashboard .cart-items{flex:1;overflow-y:auto;padding:8px 0;}
body.page-staff-dashboard .cart-empty{text-align:center;padding:40px 16px;color:#b2bec3;}
body.page-staff-dashboard .cart-empty i{font-size:36px;margin-bottom:10px;display:block;}
body.page-staff-dashboard .cart-row{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid #F0F2F5;}
body.page-staff-dashboard .cr-name{flex:1;font-size:13px;font-weight:600;color:#2D3436;}body.page-staff-dashboard .cr-sub{font-size:11px;color:#636E72;}
body.page-staff-dashboard .cr-addons{font-size:11px;color:#00695C;margin-top:3px;line-height:1.45;}
body.page-staff-dashboard .cr-price{font-size:14px;font-weight:700;color:#FF6B35;white-space:nowrap;}
body.page-staff-dashboard .cr-disc{font-size:11px;color:#E74C3C;}
body.page-staff-dashboard .qty-ctrl{display:flex;align-items:center;gap:6px;}body.page-staff-dashboard .qty-btn{width:26px;height:26px;border-radius:50%;border:1.5px solid #E9ECEF;background:#fff;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#636E72;}
body.page-staff-dashboard .qty-btn:hover{border-color:#FF6B35;color:#FF6B35;}body.page-staff-dashboard .qty-num{font-size:14px;font-weight:700;min-width:20px;text-align:center;}
body.page-staff-dashboard .cart-footer{flex-shrink:0;padding:12px 16px;border-top:1px solid #E9ECEF;}
body.page-staff-dashboard .summary-row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;color:#636E72;}
body.page-staff-dashboard .summary-row.total-row{font-size:16px;font-weight:700;color:#2D3436;border-top:1px solid #E9ECEF;padding-top:8px;margin-top:4px;}
body.page-staff-dashboard .s-label{}body.page-staff-dashboard .s-discount{color:#E74C3C;font-weight:600;}
body.page-staff-dashboard .pay-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0;}
body.page-staff-dashboard .pay-btn{padding:8px 4px;border-radius:10px;border:2px solid #E9ECEF;background:#fff;cursor:pointer;font-family:'Prompt';font-size:12px;font-weight:600;color:#636E72;display:flex;flex-direction:column;align-items:center;gap:3px;transition:.15s;}
body.page-staff-dashboard .pay-btn i{font-size:16px;}body.page-staff-dashboard .pay-btn.active{border-color:#FF6B35;background:#FFF5F0;color:#FF6B35;}
body.page-staff-dashboard .cash-section{}body.page-staff-dashboard .quick-amts{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px;}
body.page-staff-dashboard .qa-btn{padding:5px 10px;border-radius:8px;border:1px solid #E9ECEF;background:#fff;cursor:pointer;font-family:'Prompt';font-size:12px;font-weight:600;color:#636E72;}
body.page-staff-dashboard .qa-btn:hover{border-color:#FF6B35;color:#FF6B35;}
body.page-staff-dashboard .received-input{width:100%;padding:10px 14px;border-radius:10px;border:2px solid #E9ECEF;font-family:'Prompt';font-size:20px;font-weight:700;text-align:right;outline:none;margin-bottom:8px;}
body.page-staff-dashboard .received-input:focus{border-color:#FF6B35;}
body.page-staff-dashboard .numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:8px;}
body.page-staff-dashboard .np-btn{padding:10px;border-radius:8px;border:1px solid #E9ECEF;background:#fff;cursor:pointer;font-family:'Prompt';font-size:16px;font-weight:600;transition:.1s;}
body.page-staff-dashboard .np-btn:active{background:#F0F2F5;}body.page-staff-dashboard .np-back{background:#FFF0EB;color:#FF6B35;border-color:#FFD4C2;}
body.page-staff-dashboard .change-box{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:8px;background:#E8F8F5;font-size:14px;font-weight:700;color:#00695C;margin-bottom:8px;}
body.page-staff-dashboard .change-box.change-short{background:#FFF0F0;color:#C0392B;}
body.page-staff-dashboard .checkout-btn{width:100%;padding:14px;border:none;border-radius:12px;background:linear-gradient(135deg,#FF6B35,#E55A24);color:#fff;font-family:'Prompt';font-size:15px;font-weight:700;cursor:pointer;transition:all .2s;}
body.page-staff-dashboard .checkout-btn:hover:not(:disabled){box-shadow:0 5px 18px rgba(255,107,53,.4);transform:translateY(-1px);}
body.page-staff-dashboard .checkout-btn:disabled{opacity:.5;cursor:not-allowed;}

/* ── Walk-in Queue Overlay ───────────────────────────────────── */
body.page-staff-dashboard .wq-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:3000;display:none;align-items:center;justify-content:center;}
body.page-staff-dashboard .wq-modal{background:#1A1D2E;border-radius:24px;padding:36px 32px;text-align:center;max-width:400px;width:92%;animation:page-staff-dashboard-popIn .35s ease;border:2px solid rgba(243,156,18,.35);}
@keyframes page-staff-dashboard-popIn{from{transform:scale(.88);opacity:0}to{transform:scale(1);opacity:1}}
body.page-staff-dashboard .wq-label{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:8px;letter-spacing:2px;text-transform:uppercase;}
body.page-staff-dashboard .wq-queue{font-size:72px;font-weight:900;color:#F39C12;line-height:1;margin-bottom:4px;letter-spacing:2px;}
body.page-staff-dashboard .wq-sub{font-size:13px;color:rgba(255,255,255,.45);margin-bottom:20px;}
body.page-staff-dashboard .wq-summary{background:rgba(255,255,255,.06);border-radius:12px;padding:14px 18px;margin-bottom:18px;text-align:left;}
body.page-staff-dashboard .wq-total{font-size:22px;font-weight:800;color:#fff;margin-bottom:4px;}body.page-staff-dashboard .wq-change{font-size:14px;color:#2ECC71;font-weight:600;}
body.page-staff-dashboard .wq-actions{display:flex;gap:10px;}
body.page-staff-dashboard .btn-wq-print{flex:1;padding:12px;border:1.5px solid rgba(52,152,219,.6);border-radius:10px;background:rgba(52,152,219,.15);color:#3498DB;cursor:pointer;font-family:'Prompt';font-size:13px;font-weight:600;}
body.page-staff-dashboard .btn-wq-new{flex:1;padding:12px;border:none;border-radius:10px;background:linear-gradient(135deg,#F39C12,#E67E22);color:#fff;cursor:pointer;font-family:'Prompt';font-size:14px;font-weight:700;}

/* ── Add-on Picker ───────────────────────────────────────────── */
body.page-staff-dashboard .addon-overlay{position:fixed;inset:0;background:rgba(0,0,0,.58);z-index:3100;display:none;align-items:center;justify-content:center;padding:20px;}
body.page-staff-dashboard .addon-box{background:#fff;border-radius:18px;width:100%;max-width:420px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.25);}
body.page-staff-dashboard .addon-head{padding:18px 20px;background:#1A1D2E;color:#fff;}
body.page-staff-dashboard .addon-title{font-size:16px;font-weight:700;}
body.page-staff-dashboard .addon-sub{font-size:12px;opacity:.7;margin-top:2px;}
body.page-staff-dashboard .addon-list{padding:14px 18px;max-height:320px;overflow-y:auto;}
body.page-staff-dashboard .addon-hint{margin:0 18px 12px;padding:10px 12px;border-radius:10px;background:#FFF4E8;color:#A9481F;font-size:12px;font-weight:600;line-height:1.45;}
body.page-staff-dashboard .addon-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #F0F2F5;cursor:pointer;}
body.page-staff-dashboard .addon-row:last-child{border-bottom:none;}
body.page-staff-dashboard .addon-row input{width:18px;height:18px;accent-color:#FF6B35;}
body.page-staff-dashboard .addon-row-name{flex:1;font-size:14px;font-weight:600;}
body.page-staff-dashboard .addon-row-price{font-size:13px;font-weight:700;color:#FF6B35;}
body.page-staff-dashboard .addon-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 18px 18px;border-top:1px solid #F0F2F5;}
body.page-staff-dashboard .addon-actions button{flex:1;border:none;border-radius:10px;padding:12px;font-family:'Prompt',sans-serif;font-weight:700;}
body.page-staff-dashboard .addon-skip{grid-column:1/-1;background:#FFF4E8;color:#E55A24;border:1.5px solid rgba(255,107,53,.35)!important;}
body.page-staff-dashboard .addon-cancel{background:#F0F2F5;color:#636E72;}
body.page-staff-dashboard .addon-confirm{background:#FF6B35;color:#fff;}

/* ── History Drawer ──────────────────────────────────────────── */
body.page-staff-dashboard .hist-drawer{position:fixed;top:64px;right:0;bottom:0;width:340px;background:#fff;box-shadow:-4px 0 24px rgba(0,0,0,.12);z-index:2000;transform:translateX(100%);transition:transform .3s;display:flex;flex-direction:column;}
body.page-staff-dashboard .hist-head{padding:14px 16px;border-bottom:1px solid #E9ECEF;display:flex;align-items:center;gap:10px;flex-shrink:0;}
body.page-staff-dashboard .hist-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 16px;background:#F8F9FA;flex-shrink:0;}
body.page-staff-dashboard .hs-box{background:#fff;border-radius:10px;padding:10px;text-align:center;border:1px solid #E9ECEF;}
body.page-staff-dashboard .hs-val{font-size:16px;font-weight:700;color:#2D3436;}body.page-staff-dashboard .hs-lbl{font-size:10px;color:#b2bec3;margin-top:2px;}
body.page-staff-dashboard .hist-list{flex:1;overflow-y:auto;}body.page-staff-dashboard .hist-item{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid #F0F2F5;cursor:pointer;}
body.page-staff-dashboard .hist-item:hover{background:#FFF5F0;}body.page-staff-dashboard .hi-num{font-size:13px;font-weight:700;color:#2D3436;}body.page-staff-dashboard .hi-meta{font-size:11px;color:#636E72;margin-top:1px;}
body.page-staff-dashboard .hi-total{margin-left:auto;font-size:14px;font-weight:700;color:#FF6B35;white-space:nowrap;}
body.page-staff-dashboard .pm-badge{display:inline-block;padding:1px 7px;border-radius:4px;font-size:10px;font-weight:700;}
body.page-staff-dashboard .pm-cash{background:#E8F8F5;color:#00695C;}body.page-staff-dashboard .pm-qr{background:#EBF5FB;color:#2980B9;}body.page-staff-dashboard .pm-card{background:#F5EEF8;color:#8E44AD;}

/* ════════════════════════════════════════════════════════════════
   STAFF DASHBOARD CSS
   ════════════════════════════════════════════════════════════════ */
body.page-staff-dashboard .main-container{padding:24px;max-width:1600px;margin:0 auto;}
body.page-staff-dashboard .section-title{font-size:18px;font-weight:600;color:var(--text-main);margin-bottom:16px;display:flex;align-items:center;gap:10px;}
body.page-staff-dashboard .stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;}
body.page-staff-dashboard .stat-card{background:#fff;border-radius:16px;padding:18px 22px;box-shadow:var(--shadow);display:flex;align-items:center;gap:14px;}
body.page-staff-dashboard .stat-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:20px;}
body.page-staff-dashboard .stat-icon.orange{background:#FFF0EB;color:var(--primary);}body.page-staff-dashboard .stat-icon.green{background:#E8F8F5;color:var(--success);}
body.page-staff-dashboard .stat-icon.blue{background:#E8F4FD;color:#3498DB;}body.page-staff-dashboard .stat-icon.yellow{background:#FFFBEB;color:#F39C12;}
body.page-staff-dashboard .stat-value{font-size:26px;font-weight:700;color:var(--text-main);line-height:1;}body.page-staff-dashboard .stat-label{font-size:12px;color:var(--text-muted);margin-top:4px;}
body.page-staff-dashboard .tables-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;}
body.page-staff-dashboard .table-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;transition:all .3s;border:2px solid transparent;}
body.page-staff-dashboard .table-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);}
body.page-staff-dashboard .table-card.occupied{border-color:var(--primary);}body.page-staff-dashboard .table-card.available{border-color:transparent;}
body.page-staff-dashboard .table-card.calling{background:repeating-linear-gradient(45deg,#fff 0,#fff 14px,rgba(255,107,53,.28) 14px,rgba(255,107,53,.28) 28px)!important;border-color:#FF6B35!important;border-width:3px;animation:calling-pulse 1.2s ease-in-out infinite;}
@keyframes calling-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,107,53,.5);}50%{box-shadow:0 0 0 8px rgba(255,107,53,0);}}
body.page-staff-dashboard .status-bar{height:4px;width:100%;}body.page-staff-dashboard .status-bar.available{background:var(--success);}body.page-staff-dashboard .status-bar.occupied{background:var(--primary);}
body.page-staff-dashboard .table-header{padding:14px;display:flex;justify-content:space-between;align-items:flex-start;}
body.page-staff-dashboard .table-number{font-size:26px;font-weight:700;color:var(--text-main);}
body.page-staff-dashboard .table-status-badge{padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;}
body.page-staff-dashboard .status-available{background:#E8F8F5;color:var(--success);}body.page-staff-dashboard .status-occupied{background:#FFF0EB;color:var(--primary);}
body.page-staff-dashboard .table-body{padding:0 14px 14px;}body.page-staff-dashboard .table-info{font-size:12px;color:var(--text-muted);margin-bottom:8px;}
body.page-staff-dashboard .table-amount{font-size:18px;font-weight:700;color:var(--primary);}body.page-staff-dashboard .table-amount small{font-size:11px;font-weight:400;color:var(--text-muted);}
body.page-staff-dashboard .table-footer{background:#F8F9FA;padding:10px 14px;display:flex;gap:6px;}
body.page-staff-dashboard .table-btn{flex:1;padding:7px;border:none;border-radius:8px;font-size:11px;font-family:'Prompt';cursor:pointer;font-weight:500;}
body.page-staff-dashboard .btn-open{background:var(--success);color:#fff;}body.page-staff-dashboard .btn-qr{background:var(--accent);color:#fff;}
body.page-staff-dashboard .btn-close{background:var(--danger);color:#fff;}body.page-staff-dashboard .btn-view{background:#3498DB;color:#fff;}
body.page-staff-dashboard .cap-bar-wrap{padding:0 14px 10px;}body.page-staff-dashboard .cap-label{display:flex;justify-content:space-between;margin-bottom:4px;}
body.page-staff-dashboard .cap-label-text{font-size:11px;color:var(--text-muted);}body.page-staff-dashboard .cap-label-num{font-size:12px;font-weight:700;}
body.page-staff-dashboard .available-cap{color:var(--success);}body.page-staff-dashboard .occupied-cap{color:var(--primary);}body.page-staff-dashboard .full-cap{color:var(--danger);}
body.page-staff-dashboard .cap-bar-bg{height:6px;background:#E9ECEF;border-radius:3px;overflow:hidden;}
body.page-staff-dashboard .cap-bar-fill{height:100%;border-radius:3px;transition:width .4s ease;}
body.page-staff-dashboard .cap-bar-fill.low{background:var(--success);}body.page-staff-dashboard .cap-bar-fill.mid{background:#F39C12;}body.page-staff-dashboard .cap-bar-fill.full{background:var(--danger);}
body.page-staff-dashboard .floor-tab{padding:7px 16px;border-radius:20px;border:1.5px solid var(--border);background:#fff;font-family:'Prompt';font-size:13px;font-weight:500;cursor:pointer;}
body.page-staff-dashboard .floor-tab.active{background:var(--primary);color:#fff;border-color:var(--primary);}
body.page-staff-dashboard .toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;}

/* Modal */
body.page-staff-dashboard .modal-content{border-radius:20px;border:none;overflow:hidden;}
body.page-staff-dashboard .modal-header{background:linear-gradient(135deg,var(--secondary),#1a1f2e);color:#fff;border-bottom:none;padding:18px 22px;}
body.page-staff-dashboard .modal-title{font-size:17px;font-weight:600;}body.page-staff-dashboard .modal-body{padding:22px;}
body.page-staff-dashboard .form-label{font-weight:500;font-size:14px;}
body.page-staff-dashboard .form-control,body.page-staff-dashboard .form-select{border-radius:10px;border:1.5px solid var(--border);padding:10px 14px;font-family:'Prompt';}
body.page-staff-dashboard .form-control:focus,body.page-staff-dashboard .form-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(255,107,53,.15);}
body.page-staff-dashboard .btn-confirm{background:var(--primary);border:none;border-radius:12px;color:#fff;padding:12px;font-family:'Prompt';font-size:15px;font-weight:600;width:100%;cursor:pointer;}
body.page-staff-dashboard .pay-method-btn{border:2px solid var(--border);border-radius:12px;padding:12px 6px;background:#fff;font-family:'Prompt';font-size:12px;font-weight:500;cursor:pointer;text-align:center;transition:.2s;}
body.page-staff-dashboard .pay-method-btn:hover{border-color:var(--success);}
body.page-staff-dashboard .pay-method-btn.active{border-color:var(--success);background:#E8F8F5;color:#00695C;font-weight:700;}
body.page-staff-dashboard #qrPreview{display:flex;justify-content:center;background:#fff;border-radius:16px;padding:20px;margin:14px 0;box-shadow:0 2px 12px rgba(0,0,0,.06);}
body.page-staff-dashboard .qr-table-num{font-size:30px;font-weight:700;color:var(--primary);text-align:center;}
body.page-staff-dashboard .btn-print-qr{background:var(--secondary);border:none;border-radius:12px;color:#fff;padding:12px;font-family:'Prompt';font-size:14px;font-weight:600;width:100%;cursor:pointer;margin-top:8px;}
/* ── Printer Selection ── */
body.page-staff-dashboard .printer-card{border:2px solid var(--border);border-radius:14px;padding:16px 10px;background:#fff;cursor:pointer;text-align:center;transition:.18s;user-select:none;}
body.page-staff-dashboard .printer-card:hover{border-color:var(--primary);background:#EBF5FB;}
body.page-staff-dashboard .printer-card.selected{border-color:var(--primary);background:#EBF5FB;color:var(--primary);}
body.page-staff-dashboard .printer-card i{font-size:24px;margin-bottom:8px;display:block;}
body.page-staff-dashboard .printer-card .pc-name{font-size:14px;font-weight:700;}
body.page-staff-dashboard .printer-card .pc-sub{font-size:11px;color:var(--text-muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body.page-staff-dashboard .printer-card.selected .pc-sub{color:var(--primary);}
body.page-staff-dashboard .printer-card{position:relative;}
body.page-staff-dashboard .pc-check{display:none;position:absolute;top:8px;right:8px;color:var(--primary);font-size:16px;}
body.page-staff-dashboard .printer-card.selected .pc-check{display:block;}
body.page-staff-dashboard .printer-card-sunmi{border-color:#27AE60 !important;background:linear-gradient(135deg,#F0FBF4,#fff);}
body.page-staff-dashboard .printer-card-sunmi:hover{border-color:#1E8449 !important;background:linear-gradient(135deg,#E8F8F0,#fff);}
body.page-staff-dashboard .printer-card-sunmi.selected{border-color:#1E8449 !important;background:linear-gradient(135deg,#D5F5E3,#fff);color:#1E8449;}
body.page-staff-dashboard .printer-card-sunmi i{color:#27AE60;}
body.page-staff-dashboard .printer-card-sunmi.selected i{color:#1E8449;}
body.page-staff-dashboard .printer-card-sunmi .pc-check{color:#1E8449;}
body.page-staff-dashboard .pc-badge{position:absolute;top:8px;left:10px;background:#27AE60;color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;font-family:'Prompt';}
body.page-staff-dashboard #psQrWrap{background:#f8f9fa;border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:14px;margin-bottom:16px;}

/* ════════════════════════════════════════════════════════════════
   STAFF ORDERS CSS
   ════════════════════════════════════════════════════════════════ */
body.page-staff-dashboard .filter-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
body.page-staff-dashboard .filter-tab{padding:7px 18px;border-radius:20px;border:1.5px solid var(--border);background:#fff;font-family:'Prompt';font-size:13px;font-weight:500;cursor:pointer;}
body.page-staff-dashboard .filter-tab.active{background:var(--primary);color:#fff;border-color:var(--primary);}
body.page-staff-dashboard .orders-wrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px;}
body.page-staff-dashboard .order-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.06);border:2px solid #f0f0f0;}
body.page-staff-dashboard .order-card-head{padding:12px 14px;background:#f8f9fa;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
body.page-staff-dashboard .order-num{font-weight:700;font-size:14px;}body.page-staff-dashboard .order-table{font-size:12px;color:#636E72;}
body.page-staff-dashboard .time-elapsed{font-size:12px;font-weight:600;color:var(--primary);}
body.page-staff-dashboard .section-tag{padding:8px 14px;font-size:12px;font-weight:700;letter-spacing:.5px;}
body.page-staff-dashboard .food-tag{background:#FFF5F0;color:var(--primary);}body.page-staff-dashboard .drink-tag{background:#EBF5FB;color:#3498DB;}
body.page-staff-dashboard .item-row{display:flex;padding:7px 14px;gap:10px;border-bottom:1px solid #f9f9f9;font-size:13px;}
body.page-staff-dashboard .item-qty{font-weight:700;color:#fff;background:var(--primary);border-radius:6px;min-width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:11px;}
body.page-staff-dashboard .item-qty.d{background:#3498DB;}body.page-staff-dashboard .item-name{flex:1;}body.page-staff-dashboard .item-addons{font-size:11px;color:#00695C;margin-top:2px;line-height:1.45;}body.page-staff-dashboard .item-sub{font-weight:600;}
body.page-staff-dashboard .order-foot{padding:10px 14px;display:flex;gap:8px;background:#fafafa;border-top:1px solid var(--border);}
body.page-staff-dashboard .acc-btn{flex:1;padding:8px;border:none;border-radius:10px;font-family:'Prompt';font-size:13px;font-weight:600;cursor:pointer;}
body.page-staff-dashboard .btn-food{background:var(--primary);color:#fff;}body.page-staff-dashboard .btn-drink{background:#3498DB;color:#fff;}body.page-staff-dashboard .btn-accepted{background:#E8F8F5;color:var(--success);cursor:default;}
body.page-staff-dashboard .total-row{padding:8px 14px;font-weight:700;font-size:14px;text-align:right;border-top:1px solid var(--border);}
body.page-staff-dashboard .empty-msg{grid-column:1/-1;text-align:center;padding:60px;color:#aaa;font-size:14px;}
body.page-staff-dashboard .btn-print-k{background:#FFF0EB;color:#E55A24;border:none;border-radius:8px;padding:7px 11px;font-family:'Prompt';font-size:12px;font-weight:600;cursor:pointer;}
body.page-staff-dashboard .btn-print-d{background:#EBF5FB;color:#2980B9;border:none;border-radius:8px;padding:7px 11px;font-family:'Prompt';font-size:12px;font-weight:600;cursor:pointer;}
body.page-staff-dashboard .btn-print-r{background:#E8F8F5;color:#00695C;border:none;border-radius:8px;padding:7px 11px;font-family:'Prompt';font-size:12px;font-weight:600;cursor:pointer;}
body.page-staff-dashboard .print-row{padding:8px 14px;background:#f9f9f9;border-top:1px dashed #eee;display:flex;gap:6px;flex-wrap:wrap;}
body.page-staff-dashboard .btn-cancel-order{background:#FEF0F0;color:#C0392B;border:1.5px solid #F1948A;border-radius:8px;padding:7px 14px;font-family:'Prompt';font-size:12px;font-weight:600;cursor:pointer;}
body.page-staff-dashboard .btn-cancel-order:hover{background:#e74c3c;color:#fff;border-color:#e74c3c;}
body.page-staff-dashboard .pulse{animation:pulse2 1.5s infinite;}@keyframes pulse2{0%,100%{opacity:1}50%{opacity:.5}}

/* Cancel Modal */
body.page-staff-dashboard .cancel-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9000;display:flex;align-items:center;justify-content:center;}
body.page-staff-dashboard .cancel-modal-box{background:#fff;border-radius:20px;padding:26px 22px;max-width:400px;width:92%;box-shadow:0 20px 60px rgba(0,0,0,.2);animation:page-staff-dashboard-popIn .25s ease;}
body.page-staff-dashboard .reason-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}
body.page-staff-dashboard .reason-chip{padding:11px 10px;border:2px solid #E9ECEF;border-radius:12px;text-align:center;font-family:'Prompt';font-size:13px;font-weight:500;cursor:pointer;background:#fff;color:#2D3436;line-height:1.4;}
body.page-staff-dashboard .reason-chip:hover{border-color:#FF6B35;color:#FF6B35;background:#FFF5F0;}body.page-staff-dashboard .reason-chip.active{border-color:#e74c3c;color:#fff;background:#e74c3c;}
body.page-staff-dashboard .reason-other-wrap{display:none;margin-bottom:14px;}body.page-staff-dashboard .reason-other-wrap input{width:100%;padding:10px 14px;border:2px solid #E9ECEF;border-radius:10px;font-family:'Prompt';font-size:13px;outline:none;}
body.page-staff-dashboard .reason-other-wrap input:focus{border-color:#FF6B35;}body.page-staff-dashboard .cancel-modal-actions{display:flex;gap:10px;}
body.page-staff-dashboard .btn-modal-confirm{flex:1;padding:11px;background:#e74c3c;color:#fff;border:none;border-radius:10px;font-family:'Prompt';font-size:14px;font-weight:700;cursor:pointer;}
body.page-staff-dashboard .btn-modal-confirm:disabled{opacity:.6;cursor:not-allowed;}body.page-staff-dashboard .btn-modal-cancel{flex:1;padding:11px;background:#f0f2f5;color:#636E72;border:none;border-radius:10px;font-family:'Prompt';font-size:14px;font-weight:600;cursor:pointer;}

@media(max-width:768px){body.page-staff-dashboard .stats-row{grid-template-columns:repeat(2,1fr);}body.page-staff-dashboard .main-container{padding:14px;}body.page-staff-dashboard .product-grid{grid-template-columns:repeat(3,1fr);}body.page-staff-dashboard .cart-panel{width:320px;}body.page-staff-dashboard .nav-tabs-pos{display:none;}}

/* ── Mobile — elements hidden by default ──────────────────── */
body.page-staff-dashboard .mobile-bottom-nav{display:none;}body.page-staff-dashboard .mobile-cart-fab{display:none;}
body.page-staff-dashboard .cart-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1400;}

/* ── Portrait Mobile ≤600px ───────────────────────────────── */
body.page-staff-dashboard @media(max-width:600px){
  /* Navbar condensed */
  .brand-name,.brand-sub,.h-clock{display:none;}
  #userNameTag,#closeDayBtn,#histBtn{display:none!important;}
  .nav-actions>a[href="kitchen/index.php"],.nav-actions>a[href="admin/index.php"]{display:none;}
  .navbar-pos{padding:8px 10px;}
  .nav-actions{gap:5px;}
  .nav-btn{padding:6px 10px;}
  .h-search{flex:1;margin:0 4px;max-width:none;}

  /* Tab Sale — stack vertically */
  #tabSale{flex-direction:column;}
  .products-panel{overflow:hidden;display:flex;flex-direction:column;}
  .product-grid{grid-template-columns:repeat(3,1fr);}

  /* Cart panel — full-width slide-up bottom sheet */
  .cart-panel{
    position:fixed;bottom:0;left:0;right:0;
    width:100%;height:80vh;
    border-left:none;
    border-radius:20px 20px 0 0;
    border-top:3px solid #FF6B35;
    box-shadow:0 -8px 30px rgba(0,0,0,.2);
    z-index:1500;
    transform:translateY(100%);
    transition:transform .3s ease;
  }
  .cart-panel::before{content:'';display:block;width:40px;height:4px;background:#E9ECEF;border-radius:2px;margin:10px auto 0;flex-shrink:0;}
  .cart-panel.mob-open{transform:translateY(0);}
  .cart-backdrop.show{display:block;}

  /* Mobile Cart FAB */
  .mobile-cart-fab{
    display:flex;position:fixed;
    right:16px;bottom:62px;
    width:58px;height:58px;
    background:#FF6B35;border-radius:50%;
    align-items:center;justify-content:center;
    box-shadow:0 4px 20px rgba(255,107,53,.55);
    z-index:1450;color:#fff;font-size:22px;
    border:none;cursor:pointer;transition:transform .15s;
  }
  .mobile-cart-fab:active{transform:scale(.9);}
  .fab-badge{
    position:absolute;top:-5px;right:-5px;
    background:#2D3436;color:#fff;border-radius:50%;
    width:22px;height:22px;font-size:11px;font-weight:700;
    display:none;align-items:center;justify-content:center;
  }

  /* Mobile Bottom Nav */
  .mobile-bottom-nav{
    display:flex;position:fixed;
    bottom:0;left:0;right:0;height:54px;
    background:#1a1f2e;
    border-top:1px solid rgba(255,255,255,.12);
    z-index:2000;
  }
  .mbn-btn{
    flex:1;display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    font-family:'Prompt';font-size:10px;
    color:rgba(255,255,255,.45);gap:2px;
    border:none;background:transparent;cursor:pointer;padding:0;
    text-decoration:none;
  }
  .mbn-btn.active{color:#FF6B35;}
  .mbn-btn i{font-size:18px;}

  body{padding-bottom:54px;}
}

/* ---- order.php ---- */
body.page-order {
  --primary: #FF6B35;
  --primary-dark: #E55A24;
  --primary-light: #FFF0EB;
  --secondary: #2D3436;
  --success: #00B894;
  --bg: #F8F9FA;
  --card: #FFFFFF;
  --text: #2D3436;
  --muted: #636E72;
  --border: #EFEFEF;
}
body.page-order, body.page-order * { font-family: 'Prompt', sans-serif; margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body.page-order { background: var(--bg); min-height: 100vh; padding-bottom: 120px; }

/* Header */
body.page-order .order-header {
  background: linear-gradient(135deg, #FF6B35 0%, #E55A24 100%);
  padding: 16px;
  position: sticky; top: 0; z-index: 200;
  box-shadow: 0 2px 15px rgba(255,107,53,0.35);
}
body.page-order .header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
body.page-order .restaurant-name { color: #fff; font-size: 18px; font-weight: 700; }
body.page-order .table-badge { background: rgba(255,255,255,0.2); color: #fff; border-radius: 20px;
  padding: 5px 14px; font-size: 13px; font-weight: 600; }

/* Search bar */
body.page-order .search-wrap { background: #fff; border-radius: 12px; display: flex; align-items: center;
  padding: 0 14px; gap: 10px; }
body.page-order .search-wrap input { border: none; outline: none; flex: 1; font-family: 'Prompt',sans-serif;
  font-size: 14px; padding: 10px 0; color: var(--text); }
body.page-order .search-wrap i { color: #bbb; }

/* Category nav */
body.page-order .cat-nav {
  background: #fff;
  border-bottom: 1.5px solid var(--border);
  position: sticky; top: 100px; z-index: 100;
  overflow-x: auto; white-space: nowrap;
  padding: 10px 12px;
  scrollbar-width: none;
  display: flex; gap: 8px; align-items: center;
}
body.page-order .cat-nav::-webkit-scrollbar { display: none; }
body.page-order .cat-btn {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 8px 14px;
  color: var(--muted); font-size: 11px; font-weight: 600;
  cursor: pointer; border-radius: 16px;
  background: #F4F5F7; flex-shrink: 0;
  border: 2px solid transparent;
  transition: all 0.2s; white-space: nowrap;
  line-height: 1.2;
}
body.page-order .cat-btn-icon { font-size: 20px; line-height: 1; display: block; }
body.page-order .cat-btn.active {
  background: var(--primary); color: #fff;
  border-color: var(--primary);
  box-shadow: 0 3px 10px rgba(255,107,53,0.35);
}
body.page-order .cat-btn:hover:not(.active) { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }

/* Sections */
body.page-order .section { padding: 20px 16px 8px; }
body.page-order .section-label { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
body.page-order .section-label-text { font-size: 17px; font-weight: 700; color: var(--text); }
body.page-order .section-label-sub { font-size: 12px; color: var(--muted); }
body.page-order .see-all { margin-left: auto; font-size: 13px; color: var(--primary); cursor: pointer; font-weight: 500; }

/* Horizontal scroll menu (popular/signature) */
body.page-order .h-scroll { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
body.page-order .h-scroll::-webkit-scrollbar { display: none; }
body.page-order .menu-card-h {
  min-width: 160px; max-width: 160px; background: var(--card);
  border-radius: 16px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; flex-shrink: 0;
}
body.page-order .menu-card-h:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
body.page-order .menu-card-h .img-wrap { height: 110px; overflow: hidden; background: #f5f5f5; position: relative; }
body.page-order .menu-card-h .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
body.page-order .menu-card-h .img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 42px; }
body.page-order .menu-card-h .card-body-h { padding: 10px 12px; }
body.page-order .menu-card-h .item-name { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
body.page-order .menu-card-h .item-price { font-size: 15px; font-weight: 700; color: var(--primary); margin-top: 5px; }
body.page-order .menu-card-h .item-price-old { font-size: 11px; text-decoration: line-through; color: var(--muted); }
body.page-order .promo-tag { position: absolute; top: 8px; left: 8px; background: var(--primary); color: #fff;
  border-radius: 6px; font-size: 10px; font-weight: 700; padding: 2px 7px; }
body.page-order .sig-tag { position: absolute; top: 8px; left: 8px; background: #F39C12; color: #fff;
  border-radius: 6px; font-size: 10px; font-weight: 700; padding: 2px 7px; }
body.page-order .pop-tag { position: absolute; top: 8px; left: 8px; background: var(--success); color: #fff;
  border-radius: 6px; font-size: 10px; font-weight: 700; padding: 2px 7px; }

/* List menu items */
body.page-order .menu-list-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border-radius: 14px; padding: 12px;
  margin-bottom: 10px; box-shadow: 0 1px 8px rgba(0,0,0,0.05);
  cursor: pointer; transition: transform 0.2s;
}
body.page-order .menu-list-item:hover { transform: translateX(4px); }
body.page-order .menu-list-item .item-img { width: 80px; height: 80px; border-radius: 12px;
  overflow: hidden; background: #f5f5f5; flex-shrink: 0; }
body.page-order .menu-list-item .item-img img { width: 100%; height: 100%; object-fit: cover; }
body.page-order .menu-list-item .item-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 36px; }
body.page-order .menu-list-item .item-details { flex: 1; min-width: 0; }
body.page-order .menu-list-item .item-name { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.page-order .menu-list-item .item-desc { font-size: 11px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.page-order .menu-list-item .item-code { font-size: 10px; color: #aaa; margin-top: 2px; }
body.page-order .menu-list-item .item-price { font-size: 16px; font-weight: 700; color: var(--primary); margin-top: 6px; }
body.page-order .menu-list-item .item-price-old { font-size: 11px; text-decoration: line-through; color: var(--muted); }
body.page-order .add-btn { background: var(--primary); border: none; border-radius: 50%; width: 34px; height: 34px;
  color: #fff; font-size: 18px; cursor: pointer; flex-shrink: 0; transition: transform 0.15s;
  display: flex; align-items: center; justify-content: center; }
body.page-order .add-btn:hover { transform: scale(1.1); }
body.page-order .qty-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
body.page-order .qty-btn { background: #F0F2F5; border: none; border-radius: 50%; width: 30px; height: 30px;
  font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--text); }
body.page-order .qty-btn.minus { background: #FEF0F0; color: var(--primary); }
body.page-order .qty-btn.plus { background: var(--primary); color: #fff; }
body.page-order .qty-num { font-size: 15px; font-weight: 700; color: var(--text); min-width: 20px; text-align: center; }

/* Category section divider */
body.page-order .cat-section-title { padding: 16px 16px 8px; display: flex; align-items: center; gap: 10px; }
body.page-order .cat-section-title .icon { font-size: 22px; }
body.page-order .cat-section-title .name { font-size: 17px; font-weight: 700; color: var(--text); }
body.page-order .cat-section-title .count { font-size: 12px; color: var(--muted); background: #f0f2f5; padding: 2px 8px; border-radius: 20px; }

/* Cart FAB */
body.page-order .cart-fab {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--secondary); color: #fff; border-radius: 50px;
  padding: 14px 28px; display: flex; align-items: center; gap: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25); cursor: pointer; z-index: 500;
  transition: all 0.3s; min-width: 280px; justify-content: space-between;
  border: none; font-family: 'Prompt',sans-serif;
  animation: bounceIn 0.4s ease;
}
body.page-order .cart-fab:hover { transform: translateX(-50%) translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
body.page-order .cart-fab.hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(20px); }
@keyframes bounceIn { 0% { transform: translateX(-50%) scale(0.8); opacity:0; } 100% { transform: translateX(-50%) scale(1); opacity:1; } }
@keyframes readyBounce { 0% { opacity:0; } 100% { opacity:1; } }
@keyframes bellRing { 0% { transform:rotate(-22deg) scale(1.1); } 100% { transform:rotate(22deg) scale(1.1); } }
@keyframes readyFlash { 0%,100% { background:rgba(30,132,73,0.97); } 50% { background:rgba(88,214,141,0.97); } }
@keyframes page-order-readyPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.12); } }
body.page-order .cart-count-badge { background: var(--primary); border-radius: 50%; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
body.page-order .cart-label { font-size: 14px; font-weight: 600; }
body.page-order .cart-total { font-size: 15px; font-weight: 700; color: var(--primary); }

/* Cart drawer */
body.page-order .cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 600; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
body.page-order .cart-overlay.show { opacity: 1; pointer-events: all; }
body.page-order .cart-drawer { position: fixed; bottom: 0; left: 0; right: 0; background: #fff;
  border-radius: 24px 24px 0 0; z-index: 700; transform: translateY(100%); transition: transform 0.35s cubic-bezier(0.25,0.8,0.25,1);
  max-height: 85vh; display: flex; flex-direction: column; }
body.page-order .cart-drawer.show { transform: translateY(0); }
body.page-order .cart-handle { width: 40px; height: 4px; background: #ddd; border-radius: 4px;
  margin: 10px auto; }
body.page-order .cart-header { padding: 16px 20px 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1.5px solid var(--border); }
body.page-order .cart-title { font-size: 18px; font-weight: 700; }
body.page-order .cart-close-btn { background: #f0f2f5; border: none; border-radius: 50%; width: 34px; height: 34px;
  cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; }
body.page-order .cart-items { overflow-y: auto; flex: 1; padding: 12px 20px; }
body.page-order .cart-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
body.page-order .cart-item-name { flex: 1; font-size: 14px; font-weight: 500; }
body.page-order .cart-item-price { font-size: 14px; font-weight: 600; color: var(--primary); }
body.page-order .cart-item-addons { width:100%; font-size:11px; color:#00695C; margin-top:3px; line-height:1.5; }
body.page-order .cart-footer { padding: 16px 20px 30px; border-top: 1.5px solid var(--border); }
body.page-order .cart-total-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
body.page-order .cart-total-label { font-size: 15px; color: var(--muted); }
body.page-order .cart-total-amount { font-size: 22px; font-weight: 700; color: var(--text); }
body.page-order .confirm-order-btn { background: var(--primary); border: none; color: #fff; width: 100%; border-radius: 14px;
  padding: 15px; font-family: 'Prompt',sans-serif; font-size: 16px; font-weight: 700;
  cursor: pointer; transition: all 0.2s; }
body.page-order .confirm-order-btn:hover { background: var(--primary-dark); transform: translateY(-1px); }
body.page-order .note-input { width: 100%; border: 1.5px solid var(--border); border-radius: 10px; padding: 10px 14px;
  font-family: 'Prompt',sans-serif; font-size: 13px; resize: none; margin-bottom: 12px;
  outline: none; transition: border-color 0.2s; }
body.page-order .note-input:focus { border-color: var(--primary); }

/* Action buttons (floating) */
body.page-order .action-btns { position: fixed; bottom: 90px; right: 14px; display: flex; flex-direction: column; gap: 8px; z-index: 150; }
body.page-order .action-btn { background: #fff; border: 1.5px solid var(--border); border-radius: 50px;
  padding: 10px 14px; font-size: 11px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  color: var(--text); transition: all 0.2s; text-align: center; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
body.page-order .action-btn:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(0,0,0,0.18); }
body.page-order .action-btn.call { border-color: #F39C12; color: #F39C12; background: #FFFBF0; }
body.page-order .action-btn.bill { border-color: var(--success); color: var(--success); }

/* Item ready toast (แจ้งลูกค้าเมื่อรายการเดี่ยวๆ พร้อมแล้ว) */
body.page-order .item-ready-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: #1a2e1a; border: 1.5px solid #27AE60; border-radius: 14px;
  padding: 12px 20px; z-index: 9990; color: #f0f0f0; font-size: 14px; font-weight: 500;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35); white-space: nowrap;
  animation: itemToastIn 0.3s ease, itemToastOut 0.4s ease 3.6s forwards;
  display: flex; align-items: center; gap: 10px;
}
body.page-order .item-ready-toast .toast-icon { font-size: 18px; }
@keyframes itemToastIn  { from { opacity:0; transform:translateX(-50%) translateY(12px); } to { opacity:1; transform:translateX(-50%) translateY(0); } }
@keyframes itemToastOut { from { opacity:1; } to { opacity:0; transform:translateX(-50%) translateY(8px); } }

/* Staff coming notification */
body.page-order .staff-coming-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  background: linear-gradient(135deg, #00B894, #00CEC9);
  color: #fff; padding: 0; max-height: 0; overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
body.page-order .staff-coming-banner.show {
  max-height: 100px; padding: 14px 20px;
}
body.page-order .staff-coming-inner {
  display: flex; align-items: center; gap: 14px; max-width: 500px; margin: 0 auto;
}
body.page-order .staff-coming-icon { font-size: 32px; animation: walk 0.6s ease-in-out infinite alternate; }
@keyframes walk { from { transform: translateX(0); } to { transform: translateX(6px); } }
body.page-order .staff-coming-text .title { font-size: 16px; font-weight: 700; }
body.page-order .staff-coming-text .sub   { font-size: 12px; opacity: 0.85; margin-top: 2px; }

/* Success overlay */
body.page-order .success-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 900;
  display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
body.page-order .success-overlay.show { opacity: 1; pointer-events: all; }
body.page-order .success-card { background: #fff; border-radius: 24px; padding: 40px 32px; text-align: center; max-width: 300px; }
body.page-order .success-icon { font-size: 60px; margin-bottom: 16px; animation: bounce 0.5s ease; }
@keyframes bounce { 0%,100% { transform: scale(1); } 50% { transform: scale(1.2); } }

body.page-order .addon-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 940;
  display: none; align-items: center; justify-content: center; padding: 18px; }
body.page-order .addon-box { background:#fff; border-radius:18px; width:100%; max-width:420px; overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,0.25); }
body.page-order .addon-head { padding:18px 20px; background:#1A1D2E; color:#fff; }
body.page-order .addon-title { font-size:16px; font-weight:700; }
body.page-order .addon-sub { font-size:12px; opacity:.7; margin-top:2px; }
body.page-order .addon-list { padding:14px 18px; max-height:320px; overflow-y:auto; }
body.page-order .addon-hint { margin:0 18px 12px; padding:10px 12px; border-radius:10px; background:#FFF4E8; color:#A9481F; font-size:12px; font-weight:600; line-height:1.45; }
body.page-order .addon-row { display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid #F0F2F5; cursor:pointer; }
body.page-order .addon-row:last-child { border-bottom:none; }
body.page-order .addon-row input { width:18px; height:18px; accent-color:var(--primary); }
body.page-order .addon-row-name { flex:1; font-size:14px; font-weight:600; }
body.page-order .addon-row-price { font-size:13px; font-weight:700; color:var(--primary); }
body.page-order .addon-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px 18px 18px; border-top:1px solid #F0F2F5; }
body.page-order .addon-actions button { flex:1; border:none; border-radius:10px; padding:12px; font-family:'Prompt',sans-serif; font-weight:700; }
body.page-order .addon-skip { grid-column:1/-1; background:#FFF4E8; color:#E55A24; border:1.5px solid rgba(255,107,53,.35)!important; }
body.page-order .addon-cancel { background:#F0F2F5; color:#636E72; }
body.page-order .addon-confirm { background:var(--primary); color:#fff; }

body.page-order .order-warning-box {
  border-radius: 20px;
  border: 1px solid #FFE1D6;
  background: linear-gradient(180deg, #FFF8F5 0%, #FFFFFF 100%);
  padding: 16px;
  text-align: left;
}
body.page-order .order-warning-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: #E55A24;
  font-weight: 700;
}
body.page-order .order-warning-head i { font-size: 20px; }
body.page-order .order-warning-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  margin: 0;
}

/* Order status badges */
body.page-order .os-pending   { background:#FFF8E7; color:#856404; border:1.5px solid #FDCB6E; }
body.page-order .os-accepted  { background:#EBF5FB; color:#2980B9; border:1.5px solid #AED6F1; }
body.page-order .os-preparing { background:#FFF0EB; color:#E55A24; border:1.5px solid #FAB8A0; }
body.page-order .os-ready     { background:#E8F8F5; color:#00695C; border:1.5px solid #A2D9CE; }
body.page-order .os-served    { background:#F0F2F5; color:#636E72; border:1.5px solid #D5D8DC; }
body.page-order .os-cancelled { background:#FEF0F0; color:#C0392B; border:1.5px solid #F1948A; }
body.page-order .order-status-row { border-radius:12px; padding:12px 14px; margin-bottom:10px; border:1.5px solid #eee; }
body.page-order .order-status-row .ord-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
body.page-order .order-status-row .ord-num  { font-weight:700; font-size:14px; }
body.page-order .ord-badge { padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; }
body.page-order .ord-item-row { display:flex; justify-content:space-between; align-items:center; font-size:13px; padding:5px 0; border-bottom:1px solid #f9f9f9; gap:8px; }
body.page-order .type-food  { color:#FF6B35; font-size:10px; font-weight:700; }
body.page-order .item-status-badge { font-size:11px; font-weight:700; padding:2px 8px; border-radius:12px; white-space:nowrap; flex-shrink:0; }
body.page-order .status-pending   { background:#FFF8E7; color:#856404; }
body.page-order .status-accepted  { background:#EBF5FB; color:#2980B9; }
body.page-order .status-preparing { background:#FFF0EB; color:#E55A24; }
body.page-order .status-ready     { background:#E8F8F5; color:#00695C; }
body.page-order .status-served    { background:#F0F2F5; color:#636E72; }
body.page-order .status-na        { background:#F0F2F5; color:#B2BEC3; }
body.page-order .status-cancelled { background:#FEF0F0; color:#C0392B; }
body.page-order .type-drink { color:#3498DB; font-size:10px; font-weight:700; }
body.page-order .ord-timer { font-size:11px; font-weight:700; color:#9B59B6; background:#F3EAF9; border-radius:12px; padding:2px 8px; white-space:nowrap; flex-shrink:0; }
body.page-order .btn-cancel-order { display:block; width:100%; margin-top:10px; padding:8px; background:#FEF0F0; color:#C0392B; border:1.5px solid #F1948A; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; text-align:center; transition:all 0.18s; }
body.page-order .btn-cancel-order:hover { background:#e74c3c; color:#fff; border-color:#e74c3c; }
body.page-order .btn-cancel-items { display:block; width:100%; margin-top:10px; padding:8px; background:#FEF0F0; color:#C0392B; border:1.5px solid #F1948A; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; text-align:center; transition:all 0.18s; }
body.page-order .btn-cancel-items:hover { background:#e74c3c; color:#fff; border-color:#e74c3c; }

/* Customer cancel items modal */
body.page-order .cust-cancel-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:9500;
  display:flex; align-items:center; justify-content:center; }
body.page-order .cust-cancel-box { background:#fff; border-radius:20px; padding:22px; max-width:400px; width:94%;
  max-height:88vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.25); }
body.page-order .cust-cancel-title { font-size:16px; font-weight:700; color:#2D3436; margin-bottom:3px; }
body.page-order .cust-cancel-sub   { font-size:12px; color:#636E72; margin-bottom:14px; }
body.page-order .cust-item-list { border:1px solid #E9ECEF; border-radius:10px; margin-bottom:12px; overflow:hidden; }
body.page-order .cust-item { display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid #F0F2F5; cursor:pointer; }
body.page-order .cust-item:last-child { border-bottom:none; }
body.page-order .cust-item input[type=checkbox] { width:18px; height:18px; accent-color:#e74c3c; flex-shrink:0; }
body.page-order .cust-item-info { flex:1; }
body.page-order .cust-item-name { font-size:13px; font-weight:600; color:#2D3436; }
body.page-order .cust-item-meta { font-size:11px; color:#888; margin-top:1px; }
body.page-order .cust-btn-row { display:flex; gap:10px; margin-top:4px; }
body.page-order .cust-btn-back { flex:1; padding:11px; background:#f0f2f5; color:#636E72; border:none; border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; font-family:'Prompt',sans-serif; }
body.page-order .cust-btn-confirm { flex:1; padding:11px; background:#e74c3c; color:#fff; border:none; border-radius:10px; font-size:13px; font-weight:700; cursor:pointer; font-family:'Prompt',sans-serif; }
body.page-order .cust-btn-confirm:disabled { opacity:0.45; cursor:not-allowed; }
body.page-order .cust-btn-all { width:100%; padding:8px 14px; background:#fff; color:#C0392B; border:1.5px dashed #F1948A; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; margin-bottom:10px; }
body.page-order .cust-reason-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
body.page-order .cust-reason-chip { padding:9px 6px; background:#f9f9f9; border:1.5px solid #E9ECEF; border-radius:10px; font-size:12px; font-weight:600; color:#555; cursor:pointer; text-align:center; line-height:1.3; font-family:'Prompt',sans-serif; transition:all 0.15s; }
body.page-order .cust-reason-chip.active { background:#FEF0F0; border-color:#e74c3c; color:#C0392B; }
body.page-order .cust-reason-other { width:100%; margin-bottom:10px; padding:9px 12px; border:1.5px solid #E9ECEF; border-radius:10px; font-family:'Prompt',sans-serif; font-size:13px; outline:none; }
body.page-order .cust-reason-other:focus { border-color:#e74c3c; }

/* Promotion banner */
body.page-order .promo-banner-section { padding: 14px 16px 6px; }
body.page-order .promo-banner {
  border-radius: 14px; padding: 14px 16px; margin-bottom: 10px;
  display: flex; align-items: flex-start; gap: 12px;
  border: 1.5px solid transparent; position: relative; overflow: hidden;
}
body.page-order .promo-banner.type-percent {
  background: linear-gradient(135deg,#F3E5F5,#EDE7F6);
  border-color: #CE93D8;
}
body.page-order .promo-banner.type-bogo {
  background: linear-gradient(135deg,#FFF3E0,#FFE0B2);
  border-color: #FFCC80;
}
body.page-order .promo-banner-icon { font-size: 28px; flex-shrink: 0; margin-top: 2px; }
body.page-order .promo-banner-info { flex: 1; }
body.page-order .promo-banner-name { font-size: 14px; font-weight: 700; }
body.page-order .promo-banner.type-percent .promo-banner-name { color: #6A1B9A; }
body.page-order .promo-banner.type-bogo   .promo-banner-name { color: #BF360C; }
body.page-order .promo-banner-desc { font-size: 12px; margin-top: 2px; }
body.page-order .promo-banner.type-percent .promo-banner-desc { color: #8E24AA; }
body.page-order .promo-banner.type-bogo   .promo-banner-desc { color: #E64A19; }
body.page-order .promo-banner-date { font-size:10px; color:#aaa; margin-top:4px; }
body.page-order .promo-badge-pill {
  padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 800;
  flex-shrink: 0; align-self: center;
}
body.page-order .type-percent .promo-badge-pill { background:#8E24AA; color:#fff; }
body.page-order .type-bogo    .promo-badge-pill { background:#E64A19; color:#fff; }
/* item promo indicator */
body.page-order .item-promo-tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 6px; font-size: 10px; font-weight: 700;
  margin-top: 3px;
}
body.page-order .item-promo-tag.percent { background: #F3E5F5; color: #6A1B9A; }
body.page-order .item-promo-tag.bogo    { background: #FFF3E0; color: #E64A19; }

/* Unavailable overlay */
body.page-order .unavail { opacity: 0.4; pointer-events: none; }
body.page-order .sold-out-badge { position: absolute; inset: 0; background: rgba(0,0,0,0.5); display: flex;
  align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; }

/* ── Category Hero Banner ─────────────────────────────────── */
body.page-order .cat-hero {
  margin: 16px 16px 0;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  padding: 18px 20px;
}
body.page-order .cat-hero-bg-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 76px;
  opacity: 0.18;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
body.page-order .cat-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
}
body.page-order .cat-hero-icon-box {
  font-size: 30px;
  background: rgba(255,255,255,0.22);
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
body.page-order .cat-hero-name {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.18);
  line-height: 1.2;
}
body.page-order .cat-hero-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.82);
  margin-top: 3px;
}
body.page-order .cat-items-wrap {
  padding: 10px 16px 4px;
}

/* ── PDPA Consent ───────────────────────────────────────────────── */
body.page-order .pdpa-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: linear-gradient(160deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
body.page-order .pdpa-overlay.hide { display: none; }
body.page-order .pdpa-box {
  background: #fff; border-radius: 24px; width: 100%; max-width: 480px;
  max-height: 90vh; display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  overflow: hidden;
}
body.page-order .pdpa-header {
  background: linear-gradient(135deg, #FF6B35, #E55A24);
  padding: 22px 24px 18px; text-align: center; flex-shrink: 0;
}
body.page-order .pdpa-header .shield { font-size: 40px; margin-bottom: 6px; }
body.page-order .pdpa-header h2 { color: #fff; font-size: 18px; font-weight: 700; margin: 0; }
body.page-order .pdpa-header p  { color: rgba(255,255,255,0.85); font-size: 12px; margin: 4px 0 0; }
body.page-order .pdpa-body {
  padding: 20px 22px; overflow-y: auto; flex: 1;
  font-size: 13px; color: #444; line-height: 1.7;
}
body.page-order .pdpa-body h3 { font-size: 13px; font-weight: 700; color: #2D3436; margin: 14px 0 6px; }
body.page-order .pdpa-body h3:first-child { margin-top: 0; }
body.page-order .pdpa-body ul { padding-left: 18px; margin: 4px 0; }
body.page-order .pdpa-body ul li { margin-bottom: 3px; }
body.page-order .pdpa-body .highlight {
  background: #FFF8E7; border-left: 3px solid #F39C12;
  border-radius: 0 8px 8px 0; padding: 10px 12px; margin: 12px 0; font-size: 12px;
}
body.page-order .pdpa-footer {
  padding: 16px 22px 20px; flex-shrink: 0;
  border-top: 1px solid #f0f0f0; display: flex; gap: 10px;
}
body.page-order .pdpa-btn {
  flex: 1; padding: 13px; border: none; border-radius: 12px;
  font-family: 'Prompt', sans-serif; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all 0.2s;
}
body.page-order .pdpa-btn-accept {
  background: linear-gradient(135deg, #00B894, #00CEC9); color: #fff;
}
body.page-order .pdpa-btn-accept:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,184,148,0.35); }
body.page-order .pdpa-btn-decline {
  background: #F0F2F5; color: #636E72;
}
body.page-order .pdpa-declined {
  position: fixed; inset: 0; z-index: 10000;
  background: linear-gradient(160deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
  display: none; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 40px;
}
body.page-order .pdpa-declined.show { display: flex; }
body.page-order .pdpa-declined .icon { font-size: 60px; margin-bottom: 16px; }
body.page-order .pdpa-declined h3 { color: #fff; font-size: 20px; font-weight: 700; margin-bottom: 10px; }
body.page-order .pdpa-declined p  { color: rgba(255,255,255,0.65); font-size: 14px; line-height: 1.7; }

/* ---- staff_orders.php ---- */
body.page-staff-orders, body.page-staff-orders *{scrollbar-width:none;-ms-overflow-style:none;}body.page-staff-orders::-webkit-scrollbar, body.page-staff-orders *::-webkit-scrollbar{display:none;}
body.page-staff-orders { --primary:#FF6B35; --success:#00B894; --secondary:#2D3436; --bg:#F0F2F5; --border:#E9ECEF; }
body.page-staff-orders, body.page-staff-orders * { font-family:'Prompt',sans-serif; }
body.page-staff-orders { background:var(--bg); }
body.page-staff-orders ::-webkit-scrollbar { display:none; }
body.page-staff-orders, body.page-staff-orders * { scrollbar-width:none; -ms-overflow-style:none; }
body.page-staff-orders .top-bar { background:var(--secondary); color:#fff; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; }
body.page-staff-orders .top-bar h1 { font-size:18px; font-weight:700; margin:0; }
body.page-staff-orders .filter-tabs { display:flex; gap:8px; padding:16px 20px 0; }
body.page-staff-orders .filter-tab { padding:8px 20px; border-radius:20px; border:1.5px solid var(--border);
  background:#fff; font-family:'Prompt',sans-serif; font-size:13px; font-weight:500; cursor:pointer; transition:all 0.2s; }
body.page-staff-orders .filter-tab.active { background:var(--primary); color:#fff; border-color:var(--primary); }
body.page-staff-orders .orders-wrap { padding:16px 20px; display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:16px; }
body.page-staff-orders .order-card { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.06); border:2px solid #f0f0f0; }
body.page-staff-orders .order-card-head { padding:14px 16px; background:#f8f9fa; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; }
body.page-staff-orders .order-num { font-weight:700; font-size:15px; }
body.page-staff-orders .order-table { font-size:12px; color:#636E72; }
body.page-staff-orders .time-elapsed { font-size:13px; font-weight:600; color:var(--primary); }
body.page-staff-orders .section-tag { padding:10px 16px; font-size:12px; font-weight:700; letter-spacing:.5px; }
body.page-staff-orders .food-tag { background:#FFF5F0; color:var(--primary); }
body.page-staff-orders .drink-tag { background:#EBF5FB; color:#3498DB; }
body.page-staff-orders .item-row { display:flex; padding:8px 16px; gap:10px; border-bottom:1px solid #f9f9f9; font-size:13px; }
body.page-staff-orders .item-qty { font-weight:700; color:#fff; background:var(--primary); border-radius:6px;
  min-width:24px; height:24px; display:flex; align-items:center; justify-content:center; font-size:12px; }
body.page-staff-orders .item-qty.d { background:#3498DB; }
body.page-staff-orders .item-name { flex:1; }
body.page-staff-orders .item-addons { font-size:11px; color:#00695C; margin-top:2px; line-height:1.45; }
body.page-staff-orders .item-sub { font-weight:600; color:#2D3436; }
body.page-staff-orders .order-foot { padding:12px 16px; display:flex; gap:8px; background:#fafafa; border-top:1px solid var(--border); }
body.page-staff-orders .acc-btn { flex:1; padding:9px; border:none; border-radius:10px; font-family:'Prompt',sans-serif; font-size:13px; font-weight:600; cursor:pointer; }
body.page-staff-orders .btn-food { background:var(--primary); color:#fff; }
body.page-staff-orders .btn-drink { background:#3498DB; color:#fff; }
body.page-staff-orders .btn-accepted { background:#E8F8F5; color:var(--success); cursor:default; }
body.page-staff-orders .total-row { padding:10px 16px; font-weight:700; font-size:15px; text-align:right; border-top:1px solid var(--border); }
body.page-staff-orders .badge-type { padding:2px 8px; border-radius:6px; font-size:10px; font-weight:700; }
body.page-staff-orders .b-food { background:#FFF0EB; color:var(--primary); }
body.page-staff-orders .b-drink { background:#EBF5FB; color:#3498DB; }
body.page-staff-orders .empty-msg { grid-column:1/-1; text-align:center; padding:60px; color:#aaa; font-size:15px; }
body.page-staff-orders .btn-print-k { background:#FFF0EB; color:#E55A24; border:none; border-radius:8px; padding:8px 12px; font-family:'Prompt',sans-serif; font-size:12px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
body.page-staff-orders .btn-print-d { background:#EBF5FB; color:#2980B9; border:none; border-radius:8px; padding:8px 12px; font-family:'Prompt',sans-serif; font-size:12px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
body.page-staff-orders .btn-print-r { background:#E8F8F5; color:#00695C; border:none; border-radius:8px; padding:8px 12px; font-family:'Prompt',sans-serif; font-size:12px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
body.page-staff-orders .btn-print-k:hover { background:#FFD9C8; } body.page-staff-orders .btn-print-d:hover { background:#C8E6F7; } body.page-staff-orders .btn-print-r:hover { background:#B2DFDB; }
body.page-staff-orders .print-row { padding:8px 16px; background:#f9f9f9; border-top:1px dashed #eee; display:flex; gap:6px; flex-wrap:wrap; }
body.page-staff-orders .pulse { animation:page-staff-orders-pulse 1.5s infinite; }
@keyframes page-staff-orders-pulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* Cancel button */
body.page-staff-orders .btn-cancel-order { background:#FEF0F0; color:#C0392B; border:1.5px solid #F1948A; border-radius:8px;
  padding:8px 14px; font-family:'Prompt',sans-serif; font-size:12px; font-weight:600; cursor:pointer; transition:all 0.18s; }
body.page-staff-orders .btn-cancel-order:hover { background:#e74c3c; color:#fff; border-color:#e74c3c; }

/* Cancel modal */
body.page-staff-orders .cancel-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:9000;
  display:flex; align-items:center; justify-content:center; animation:page-staff-orders-fadeInBg 0.2s ease; }
@keyframes page-staff-orders-fadeInBg { from{opacity:0} to{opacity:1} }
body.page-staff-orders .cancel-modal-box { background:#fff; border-radius:20px; padding:24px; max-width:440px; width:92%;
  box-shadow:0 20px 60px rgba(0,0,0,0.2); animation:page-staff-orders-popIn 0.25s ease; }
@keyframes page-staff-orders-popIn { from{transform:scale(0.88);opacity:0} to{transform:scale(1);opacity:1} }
body.page-staff-orders .cancel-modal-title { font-size:16px; font-weight:700; margin-bottom:3px; color:#2D3436; }
body.page-staff-orders .cancel-modal-sub   { font-size:12px; color:#636E72; margin-bottom:14px; }
/* Step 1 — item list */
body.page-staff-orders .cancel-item-list { max-height:260px; overflow-y:auto; margin-bottom:12px; border:1px solid #E9ECEF; border-radius:10px; }
body.page-staff-orders .cancel-item { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid #F0F2F5; cursor:pointer; }
body.page-staff-orders .cancel-item:last-child { border-bottom:none; }
body.page-staff-orders .cancel-item:hover { background:#FFF5F0; }
body.page-staff-orders .cancel-item input[type=checkbox] { width:17px; height:17px; accent-color:#e74c3c; cursor:pointer; flex-shrink:0; }
body.page-staff-orders .cancel-item-name { flex:1; font-size:13px; font-weight:500; }
body.page-staff-orders .cancel-item-qty  { font-size:12px; color:#636E72; flex-shrink:0; }
body.page-staff-orders .cancel-item-type-food  { border-left:3px solid #FF6B35; }
body.page-staff-orders .cancel-item-type-drink { border-left:3px solid #3498DB; }
body.page-staff-orders .btn-select-all { width:100%; padding:8px; margin-bottom:10px; border:1.5px dashed #E9ECEF; border-radius:8px;
  background:#fff; font-family:'Prompt',sans-serif; font-size:12px; font-weight:600; color:#636E72; cursor:pointer; }
body.page-staff-orders .btn-select-all:hover { border-color:#e74c3c; color:#e74c3c; }
/* Step 2 — reason */
body.page-staff-orders .reason-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
body.page-staff-orders .reason-chip { padding:10px 8px; border:2px solid #E9ECEF; border-radius:10px; text-align:center;
  font-family:'Prompt',sans-serif; font-size:12px; font-weight:500; cursor:pointer;
  transition:all 0.18s; background:#fff; color:#2D3436; line-height:1.4; }
body.page-staff-orders .reason-chip:hover  { border-color:#FF6B35; color:#FF6B35; background:#FFF5F0; }
body.page-staff-orders .reason-chip.active { border-color:#e74c3c; color:#fff; background:#e74c3c; }
body.page-staff-orders .reason-other-wrap { display:none; margin-bottom:12px; }
body.page-staff-orders .reason-other-wrap input { width:100%; padding:10px 14px; border:2px solid #E9ECEF; border-radius:10px;
  font-family:'Prompt',sans-serif; font-size:13px; outline:none; }
body.page-staff-orders .reason-other-wrap input:focus { border-color:#FF6B35; }
/* Shared actions */
body.page-staff-orders .cancel-modal-actions { display:flex; gap:10px; margin-top:4px; }
body.page-staff-orders .btn-modal-confirm { flex:1; padding:12px; background:#e74c3c; color:#fff; border:none; border-radius:10px;
  font-family:'Prompt',sans-serif; font-size:13px; font-weight:700; cursor:pointer; }
body.page-staff-orders .btn-modal-confirm:disabled { opacity:0.5; cursor:not-allowed; }
body.page-staff-orders .btn-modal-back { padding:12px 16px; background:#f0f2f5; color:#636E72; border:none; border-radius:10px;
  font-family:'Prompt',sans-serif; font-size:13px; font-weight:600; cursor:pointer; }
body.page-staff-orders .btn-modal-back:hover { background:#dfe6e9; }

/* ---- queue_display.php ---- */
/* ───── Reset & Base ───── */
body.page-queue-display, body.page-queue-display *, body.page-queue-display::before, body.page-queue-display *::before, body.page-queue-display::after, body.page-queue-display *::after { box-sizing: border-box; margin: 0; padding: 0; }

body.page-queue-display {
  --bg:       #0d0f1a;
  --panel:    #151828;
  --border:   #252840;
  --pending:  #4a4e6b;
  --prep-bg:  #1a2b1a;
  --prep:     #4caf50;
  --ready-bg: #1a2200;
  --ready:    #c8ff00;
  --done-bg:  #1a1a1a;
  --done:     #555;
  --text:     #e0e4ff;
  --muted:    #6b7099;
  --font:     'Segoe UI', 'Noto Sans Thai', sans-serif;
}

body.page-queue-display {
  height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;
}

/* ───── Layout ───── */
body.page-queue-display .layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  gap: 0;
}

body.page-queue-display .topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 28px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

body.page-queue-display .topbar-brand {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
}

body.page-queue-display .topbar-clock {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ready);
}

body.page-queue-display .topbar-date {
  font-size: 14px;
  color: var(--muted);
  text-align: right;
}

/* ───── Columns ───── */
body.page-queue-display .columns {
  display: grid;
  grid-template-columns: 1fr 1.4fr 0.8fr;
  gap: 1px;
  flex: 1;
  overflow: hidden;
  background: var(--border);
}

body.page-queue-display .col {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
}

body.page-queue-display .col-header {
  padding: 14px 20px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  flex-shrink: 0;
}

body.page-queue-display .col-preparing .col-header { background: var(--prep-bg);  color: var(--prep);  border-bottom: 2px solid var(--prep); }
body.page-queue-display .col-ready     .col-header { background: var(--ready-bg); color: var(--ready); border-bottom: 2px solid var(--ready); }
body.page-queue-display .col-completed .col-header { background: var(--done-bg);  color: var(--done);  border-bottom: 2px solid var(--done); }

body.page-queue-display .col-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

/* ───── Queue Cards ───── */
body.page-queue-display .q-card {
  width: 100%;
  max-width: 240px;
  border-radius: 14px;
  padding: 14px 14px 12px;
  text-align: center;
  border: 2px solid transparent;
  animation: cardIn .25s ease;
}

@keyframes cardIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

body.page-queue-display .q-number {
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 10px;
}

/* ── Two sections per card ── */
body.page-queue-display .q-sections {
  display: flex;
  gap: 6px;
}

body.page-queue-display .q-section {
  flex: 1;
  border-radius: 9px;
  padding: 8px 6px 7px;
  border: 1px solid transparent;
  min-width: 0;
}

body.page-queue-display .q-sect-icon  { font-size: 18px; line-height: 1; }
body.page-queue-display .q-sect-name  { font-size: 10px; opacity: .65; margin: 3px 0 5px; letter-spacing: .5px; }
body.page-queue-display .q-sect-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

/* section status colors */
body.page-queue-display .q-section[data-status="pending"]   { background: rgba(255,255,255,.04); border-color: #333; }
body.page-queue-display .q-section[data-status="pending"]   .q-sect-badge { background: #333; color: #888; }
body.page-queue-display .q-section[data-status="pending"]   .q-sect-icon  { opacity: .4; }

body.page-queue-display .q-section[data-status="accepted"],
body.page-queue-display .q-section[data-status="preparing"] { background: rgba(255,165,0,.1); border-color: #f90; }
body.page-queue-display .q-section[data-status="accepted"]  .q-sect-badge,
body.page-queue-display .q-section[data-status="preparing"] .q-sect-badge { background: #f90; color: #000; }

body.page-queue-display .q-section[data-status="ready"]     { background: rgba(200,255,0,.12); border-color: var(--ready); }
body.page-queue-display .q-section[data-status="ready"]     .q-sect-badge { background: var(--ready); color: #000; }

body.page-queue-display .q-section[data-status="served"],
body.page-queue-display .q-section[data-status="completed"] { background: rgba(255,255,255,.03); border-color: #2a2a2a; }
body.page-queue-display .q-section[data-status="served"]    .q-sect-badge,
body.page-queue-display .q-section[data-status="completed"] .q-sect-badge { background: #2a2a2a; color: #555; }
body.page-queue-display .q-section[data-status="served"]    .q-sect-icon,
body.page-queue-display .q-section[data-status="completed"] .q-sect-icon  { opacity: .3; }

/* card border follows worst (most urgent) status */
body.page-queue-display .col-preparing .q-card {
  background: rgba(76,175,80,.06);
  border-color: var(--prep);
}
body.page-queue-display .col-preparing .q-number { color: var(--prep); }

body.page-queue-display .col-ready .q-card {
  background: rgba(200,255,0,.06);
  border-color: var(--ready);
  box-shadow: 0 0 20px rgba(200,255,0,.15);
  animation: cardIn .25s ease, page-queue-display-pulse 2s infinite;
}
body.page-queue-display .col-ready .q-number { color: var(--ready); text-shadow: 0 0 18px rgba(200,255,0,.45); }

@keyframes page-queue-display-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(200,255,0,.15); }
  50%       { box-shadow: 0 0 35px rgba(200,255,0,.35); }
}

body.page-queue-display .col-completed .q-card { background: rgba(255,255,255,.02); border-color: #2a2a2a; }
body.page-queue-display .col-completed .q-number { color: var(--done); }

/* ───── Empty state ───── */
body.page-queue-display .empty-msg {
  color: var(--muted);
  font-size: 13px;
  margin-top: 24px;
  text-align: center;
  opacity: .6;
}

/* ───── Status bar ───── */
body.page-queue-display .statusbar {
  background: var(--panel);
  border-top: 1px solid var(--border);
  padding: 6px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  flex-shrink: 0;
}

body.page-queue-display .status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  background: var(--muted);
}
body.page-queue-display .status-dot.ok  { background: var(--prep); }
body.page-queue-display .status-dot.err { background: #e74c3c; }

/* ───── Item list inside card ───── */
body.page-queue-display .q-items { margin-top: 10px; text-align: left; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 8px; }
body.page-queue-display .q-item {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 2px; font-size: 12px; line-height: 1.3;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
body.page-queue-display .q-item:last-child { border-bottom: none; }
body.page-queue-display .q-item-icon { font-size: 13px; flex-shrink: 0; }
body.page-queue-display .q-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.page-queue-display .q-item-qty  { color: var(--muted); font-size: 11px; flex-shrink: 0; }
body.page-queue-display .q-item-check { font-size: 14px; flex-shrink: 0; width: 18px; text-align: center; }

body.page-queue-display .q-item.q-item-done .q-item-name  { text-decoration: line-through; opacity: 0.45; }
body.page-queue-display .q-item.q-item-done .q-item-check { color: var(--ready); }
body.page-queue-display .q-item:not(.q-item-done) .q-item-check { color: var(--muted); opacity: 0.4; }

/* Progress bar inside card */
body.page-queue-display .q-progress { margin-top: 8px; }
body.page-queue-display .q-progress-bar { background: rgba(255,255,255,0.1); border-radius: 4px; height: 4px; overflow: hidden; }
body.page-queue-display .q-progress-fill { height: 100%; border-radius: 4px; transition: width 0.35s ease; }
body.page-queue-display .col-preparing .q-progress-fill { background: var(--prep); }
body.page-queue-display .col-ready     .q-progress-fill { background: var(--ready); }
body.page-queue-display .col-completed .q-progress-fill { background: var(--done); }

/* ───── Scrollbar ───── */
body.page-queue-display .col-body::-webkit-scrollbar { width: 4px; }
body.page-queue-display .col-body::-webkit-scrollbar-track { background: transparent; }
body.page-queue-display .col-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ───── Top buttons ───── */
body.page-queue-display .topbar-btns { display: flex; gap: 8px; align-items: center; }

body.page-queue-display .btn-topbar {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  padding: 5px 14px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
}
body.page-queue-display .btn-topbar:hover { border-color: var(--text); color: var(--text); }
body.page-queue-display .btn-topbar.muted { border-color: #e74c3c; color: #e74c3c; }
body.page-queue-display .btn-topbar.muted:hover { background: rgba(231,76,60,.1); }

/* ---- QDisplay.php ---- */
/* ─────────────────────────────────────────
   Reset & Variables
───────────────────────────────────────── */
body.page-qdisplay, body.page-qdisplay *, body.page-qdisplay::before, body.page-qdisplay *::before, body.page-qdisplay::after, body.page-qdisplay *::after { box-sizing: border-box; margin: 0; padding: 0; }

body.page-qdisplay {
  --bg:          #02030a;
  --panel:       #06080f;
  --card-prep:   #0a0c18;
  --card-ready:  #060f0b;
  --card-done:   #08080e;
  --border:      rgba(255,255,255,0.07);
  --prep:        #7B61FF;
  --prep-glow:   rgba(123,97,255,0.25);
  --ready:       #00FFB3;
  --ready-glow:  rgba(0,255,179,0.22);
  --done:        #7a7aaa;
  --text:        #cdd5f0;
  --muted:       #3e4268;
  --warning:     #f59e0b;
  --font:        'Space Grotesk', 'Noto Sans Thai', sans-serif;
}

body.page-qdisplay {
  height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ─────────────────────────────────────────
   Scan-line overlay (CRT effect)
───────────────────────────────────────── */
body.page-qdisplay .scanlines {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0)    0px,
    rgba(0,0,0,0)    2px,
    rgba(0,0,0,0.04) 2px,
    rgba(0,0,0,0.04) 4px
  );
}

/* ─────────────────────────────────────────
   Layout
───────────────────────────────────────── */
body.page-qdisplay .layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* ─────────────────────────────────────────
   Top Bar
───────────────────────────────────────── */
body.page-qdisplay .topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 28px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

/* กรอบเรืองแสงบาง ๆ ด้านล่าง topbar */
body.page-qdisplay .topbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, var(--prep) 30%, var(--ready) 70%, transparent 100%);
  opacity: 0.5;
}

body.page-qdisplay .topbar-brand {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
body.page-qdisplay .brand-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1.5px;
  background: linear-gradient(90deg, #fff 0%, var(--ready) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body.page-qdisplay .brand-sub {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* LIVE badge */
body.page-qdisplay .live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,50,50,0.12);
  border: 1px solid rgba(255,80,80,0.35);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #ff7070;
  letter-spacing: 2px;
  text-transform: uppercase;
}
body.page-qdisplay .live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ff4444;
  animation: livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(255,68,68,0.5); }
  50%       { opacity: 0.5; transform: scale(0.75); box-shadow: 0 0 6px 3px rgba(255,68,68,0.2); }
}

body.page-qdisplay .topbar-clock-wrap { text-align: right; }
body.page-qdisplay .topbar-clock {
  font-size: 32px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 2px;
  color: var(--ready);
  text-shadow: 0 0 20px rgba(0,255,179,0.4);
  line-height: 1;
}
body.page-qdisplay .topbar-date {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
  margin-top: 3px;
}

body.page-qdisplay .topbar-btns { display: flex; gap: 8px; align-items: center; }
body.page-qdisplay .btn-top {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  padding: 5px 14px;
  cursor: pointer;
  font-family: var(--font);
  font-size: 12px;
  white-space: nowrap;
  transition: all 0.2s;
}
body.page-qdisplay .btn-top:hover { border-color: rgba(255,255,255,0.25); color: var(--text); }
body.page-qdisplay .btn-top.muted { border-color: rgba(231,76,60,0.5); color: #e74c3c; }

/* ─────────────────────────────────────────
   Columns
───────────────────────────────────────── */
body.page-qdisplay .columns {
  display: grid;
  grid-template-columns: 1fr 1.5fr 0.9fr;
  flex: 1;
  overflow: hidden;
  gap: 0;
}

body.page-qdisplay .col {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border);
  position: relative;
}
body.page-qdisplay .col:last-child { border-right: none; }

/* Column header */
body.page-qdisplay .col-header {
  flex-shrink: 0;
  padding: 0 20px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

body.page-qdisplay .col-prep   .col-header { color: var(--prep);  background: rgba(123,97,255,0.06); }
body.page-qdisplay .col-ready  .col-header { color: var(--ready); background: rgba(0,255,179,0.06); }
body.page-qdisplay .col-done   .col-header { color: var(--done);  background: rgba(0,0,0,0.2); }

/* Accent line under header */
body.page-qdisplay .col-prep  .col-header::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--prep); opacity:0.5; }
body.page-qdisplay .col-ready .col-header::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--ready),transparent); }
body.page-qdisplay .col-done  .col-header::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:var(--done); opacity:0.3; }

body.page-qdisplay .col-header-label { display: flex; align-items: center; gap: 10px; }
body.page-qdisplay .col-header-icon  { font-size: 16px; }

/* Animated counter badge */
body.page-qdisplay .col-count {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: center;
  transition: transform 0.15s;
}
body.page-qdisplay .col-count.bump { animation: countBump 0.25s ease; }
@keyframes countBump {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.4); }
}

/* Ticker marquee inside ready header */
body.page-qdisplay .ready-ticker-wrap {
  flex: 1;
  overflow: hidden;
  margin: 0 12px;
  opacity: 0.6;
}
body.page-qdisplay .ready-ticker {
  display: inline-block;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 2px;
  animation: tickerScroll 18s linear infinite;
}
@keyframes tickerScroll {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* Column body */
body.page-qdisplay .col-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  scrollbar-width: thin;
  scrollbar-color: var(--muted) transparent;
}
body.page-qdisplay .col-body::-webkit-scrollbar { width: 3px; }
body.page-qdisplay .col-body::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 2px; }

body.page-qdisplay .empty-col {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.5;
  margin-top: 30px;
  text-align: center;
}

/* ─────────────────────────────────────────
   Queue Cards — Preparing
───────────────────────────────────────── */
body.page-qdisplay .q-card {
  width: 100%;
  max-width: 280px;
  border-radius: 12px;
  border: 1px solid transparent;
  overflow: hidden;
  animation: cardFallIn 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards;
  position: relative;
}
@keyframes cardFallIn {
  from { opacity: 0; transform: translateY(-20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

body.page-qdisplay .col-prep .q-card {
  background: var(--card-prep);
  border-color: rgba(123,97,255,0.3);
  box-shadow: 0 0 0 0 var(--prep-glow);
}
body.page-qdisplay .col-prep .q-card:hover {
  border-color: rgba(123,97,255,0.6);
  box-shadow: 0 0 20px rgba(123,97,255,0.12);
  transition: all 0.3s;
}

/* ─────────────────────────────────────────
   Queue Cards — Ready
───────────────────────────────────────── */
body.page-qdisplay .col-ready .q-card {
  background: var(--card-ready);
  border-color: rgba(0,255,179,0.4);
  box-shadow: 0 0 24px rgba(0,255,179,0.1), inset 0 0 20px rgba(0,255,179,0.03);
  animation: cardFallIn 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards,
             page-qdisplay-readyPulse 2.5s ease-in-out 0.4s infinite;
  max-width: 340px;
}
@keyframes page-qdisplay-readyPulse {
  0%, 100% { box-shadow: 0 0 24px rgba(0,255,179,0.1), inset 0 0 20px rgba(0,255,179,0.03); }
  50%      { box-shadow: 0 0 40px rgba(0,255,179,0.22), inset 0 0 30px rgba(0,255,179,0.06); }
}

/* Flash animation (×3 เมื่อ card เพิ่งกลายเป็น ready) */
body.page-qdisplay .q-card.flash-ready {
  animation: cardFallIn 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards,
             flashBurst 0.22s ease 3;
}
@keyframes flashBurst {
  0%   { background-color: rgba(0,255,179,0.05); border-color: rgba(0,255,179,0.4); }
  50%  { background-color: rgba(0,255,179,0.28); border-color: rgba(0,255,179,0.9); }
  100% { background-color: rgba(0,255,179,0.05); border-color: rgba(0,255,179,0.4); }
}

/* Shimmer sweep บน ready card */
body.page-qdisplay .col-ready .q-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,255,179,0.06), transparent);
  animation: shimmerSweep 3.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmerSweep {
  0%   { left: -60%; }
  100% { left: 160%; }
}

/* ─────────────────────────────────────────
   Card Header (queue number)
───────────────────────────────────────── */
body.page-qdisplay .q-card-head {
  padding: 14px 16px 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}

body.page-qdisplay .q-num-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: 0.4;
  margin-bottom: 2px;
}

/* Queue number — split-flap target */
body.page-qdisplay .q-number {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 800;
  letter-spacing: 4px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
body.page-qdisplay .col-prep  .q-number { color: #d0ccff; }
body.page-qdisplay .col-ready .q-number {
  color: var(--ready);
  text-shadow: 0 0 20px rgba(0,255,179,0.5);
}

body.page-qdisplay .q-head-right { text-align: right; }
body.page-qdisplay .q-status-icon { font-size: 22px; }
body.page-qdisplay .q-time-warn {
  font-size: 11px;
  color: var(--warning);
  margin-top: 2px;
  letter-spacing: 0.5px;
}

/* ─────────────────────────────────────────
   Item list
───────────────────────────────────────── */
body.page-qdisplay .q-items {
  padding: 10px 16px 6px;
}
body.page-qdisplay .q-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 13px;
  transition: opacity 0.3s;
}
body.page-qdisplay .q-item:last-child { border-bottom: none; }
body.page-qdisplay .q-item-icon  { font-size: 12px; opacity: 0.6; flex-shrink: 0; }
body.page-qdisplay .q-item-name  { flex: 1; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.page-qdisplay .q-item-qty   { color: var(--muted); font-size: 12px; flex-shrink: 0; }
body.page-qdisplay .q-item-check {
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  transition: color 0.3s, transform 0.3s;
}

/* Pending item */
body.page-qdisplay .q-item:not(.item-done) .q-item-check { color: var(--muted); }

/* Done item */
body.page-qdisplay .q-item.item-done .q-item-name  { opacity: 0.4; text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.2); }
body.page-qdisplay .q-item.item-done .q-item-check { color: var(--ready); transform: scale(1.1); }
body.page-qdisplay .col-prep .q-item.item-done .q-item-check { color: var(--prep); }

/* ─────────────────────────────────────────
   Segment Progress Bar
───────────────────────────────────────── */
body.page-qdisplay .q-progress {
  padding: 8px 16px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
body.page-qdisplay .seg-wrap {
  flex: 1;
  display: flex;
  gap: 3px;
  align-items: center;
}
body.page-qdisplay .seg {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: rgba(255,255,255,0.08);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
body.page-qdisplay .col-prep  .seg.on { background: var(--prep);  box-shadow: 0 0 6px var(--prep-glow); }
body.page-qdisplay .col-ready .seg.on { background: var(--ready); box-shadow: 0 0 6px var(--ready-glow); }

body.page-qdisplay .seg-label {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  white-space: nowrap;
  min-width: 36px;
  text-align: right;
}
body.page-qdisplay .col-prep  .seg-label { color: var(--prep);  }
body.page-qdisplay .col-ready .seg-label { color: var(--ready); }

/* All done text */
body.page-qdisplay .all-done-label {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ready);
  padding: 4px 0 12px;
  opacity: 0;
  animation: allDoneFadeIn 0.5s ease 0.3s forwards;
}
@keyframes allDoneFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 0.8; transform: translateY(0); }
}

/* ─────────────────────────────────────────
   Done column — compact chips
───────────────────────────────────────── */
body.page-qdisplay .done-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  max-width: 260px;
  padding: 2px;
}
body.page-qdisplay .done-chip {
  border: 1px solid rgba(122,122,170,0.35);
  border-radius: 10px;
  background: rgba(122,122,170,0.10);
  padding: 10px 8px;
  text-align: center;
  animation: chipFadeIn 0.3s ease forwards;
}
@keyframes chipFadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1);   }
}
body.page-qdisplay .done-chip-num {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--done);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
body.page-qdisplay .done-chip-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--done);
  opacity: 0.75;
  margin-top: 4px;
}

/* ─────────────────────────────────────────
   Status Bar
───────────────────────────────────────── */
body.page-qdisplay .statusbar {
  flex-shrink: 0;
  background: var(--panel);
  border-top: 1px solid var(--border);
  padding: 6px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 1px;
}
body.page-qdisplay .status-indicator { display: flex; align-items: center; gap: 7px; }
body.page-qdisplay .status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--muted);
  transition: background 0.3s, box-shadow 0.3s;
}
body.page-qdisplay .status-dot.ok  {
  background: var(--ready);
  box-shadow: 0 0 8px rgba(0,255,179,0.5);
  animation: statusBlink 3s ease-in-out infinite;
}
body.page-qdisplay .status-dot.err { background: #e74c3c; }
@keyframes statusBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* ─────────────────────────────────────────
   Overdue warning glow on card
───────────────────────────────────────── */
body.page-qdisplay .col-prep .q-card.overdue {
  border-color: rgba(245,158,11,0.5);
  box-shadow: 0 0 20px rgba(245,158,11,0.12);
}

/* ─────────────────────────────────────────
   Responsive tweaks
───────────────────────────────────────── */
body.page-qdisplay @media (max-width: 900px) {
  .columns { grid-template-columns: 1fr 1.3fr 0.7fr; }
  .q-number { font-size: 26px; }
}

/* ---- setup.php ---- */
body.page-setup, body.page-setup *{scrollbar-width:none;-ms-overflow-style:none;}body.page-setup::-webkit-scrollbar, body.page-setup *::-webkit-scrollbar{display:none;}
body.page-setup, body.page-setup *{font-family:'Prompt',sans-serif;box-sizing:border-box;}
body.page-setup{background:#F0F2F5;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;}
body.page-setup .box{background:#fff;border-radius:20px;padding:36px;max-width:560px;width:100%;box-shadow:0 8px 40px rgba(0,0,0,0.1);}
body.page-setup h1{font-size:22px;font-weight:700;color:#1A1D2E;margin-bottom:6px;}
body.page-setup .sub{color:#636E72;font-size:13px;margin-bottom:28px;}
body.page-setup .warn{background:#FFF8E7;border:1.5px solid #FDCB6E;border-radius:10px;padding:14px 16px;font-size:13px;color:#856404;margin-bottom:24px;}
body.page-setup .field{margin-bottom:16px;}
body.page-setup .field label{display:block;font-size:12px;font-weight:700;color:#444;margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px;}
body.page-setup .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
body.page-setup input[type=text],body.page-setup input[type=password]{width:100%;padding:10px 14px;border:1.5px solid #E9ECEF;border-radius:10px;font-family:'Prompt',sans-serif;font-size:14px;outline:none;transition:.2s;}
body.page-setup input:focus{border-color:#FF6B35;box-shadow:0 0 0 3px rgba(255,107,53,.1);}
body.page-setup .role-badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:10px;font-weight:700;margin-left:6px;}
body.page-setup .r-admin{background:#FEF0F0;color:#D63031;}
body.page-setup .r-staff{background:#EBF5FB;color:#3498DB;}
body.page-setup .r-kitchen{background:#FFF0EB;color:#FF6B35;}
body.page-setup .r-bar{background:#E8F8F5;color:#00B894;}
body.page-setup .btn{width:100%;padding:14px;background:linear-gradient(135deg,#FF6B35,#E55A24);border:none;border-radius:12px;color:#fff;font-family:'Prompt',sans-serif;font-size:15px;font-weight:700;cursor:pointer;margin-top:8px;}
body.page-setup .btn:hover{filter:brightness(.95);}
body.page-setup .result-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:10px;margin-bottom:8px;background:#F8F9FA;font-size:13px;}
body.page-setup .result-row .u{font-weight:700;}
body.page-setup .result-row .p{font-family:monospace;background:#fff;padding:2px 8px;border-radius:6px;border:1px solid #eee;font-size:13px;}
body.page-setup .success-header{text-align:center;margin-bottom:20px;}
body.page-setup .success-icon{font-size:48px;}
body.page-setup .next-steps{background:#E8F8F5;border-radius:12px;padding:16px;margin-top:20px;font-size:13px;color:#00695C;}
body.page-setup .next-steps a{color:#00B894;font-weight:600;}
body.page-setup .del-warn{background:#FEF0F0;border-radius:10px;padding:12px;margin-top:16px;font-size:12px;color:#D63031;text-align:center;}
body.page-setup .php-ver{text-align:center;font-size:11px;color:#aaa;margin-top:20px;}

/* ---- print_receipt.php ---- */
body.page-print-receipt, body.page-print-receipt * { margin:0; padding:0; box-sizing:border-box; }
body.page-print-receipt {
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  width: 80mm;
  padding: 6px 8px;
  background: #fff;
  color: #000;
}
body.page-print-receipt .center  { text-align: center; }
body.page-print-receipt .right   { text-align: right; }
body.page-print-receipt .bold    { font-weight: bold; }
body.page-print-receipt .big     { font-size: 18px; font-weight: bold; }
body.page-print-receipt .xlarge  { font-size: 22px; font-weight: bold; }
body.page-print-receipt .line-dash { border-top: 1px dashed #000; margin: 5px 0; }
body.page-print-receipt .line-solid{ border-top: 2px solid #000; margin: 5px 0; }
body.page-print-receipt .line-double { border-top: 3px double #000; margin: 5px 0; }
body.page-print-receipt .row     { display: flex; justify-content: space-between; margin: 2px 0; }
body.page-print-receipt .row .name { flex:1; padding-right:6px; }
body.page-print-receipt .addon-row { display:flex; justify-content:space-between; font-size:11px; margin:1px 0 1px 12px; color:#333; }
body.page-print-receipt .section-head {
  font-weight: bold; font-size: 12px;
  margin: 4px 0 2px; padding: 2px 0;
  border-bottom: 1px solid #000;
}
body.page-print-receipt .subtotal-row {
  display: flex; justify-content: space-between;
  font-weight: bold; font-size: 13px;
  padding: 2px 0;
}
body.page-print-receipt .grand-total {
  display: flex; justify-content: space-between;
  font-weight: bold; font-size: 18px;
  padding: 4px 0;
}
body.page-print-receipt .feed { height: 18px; }
body.page-print-receipt .item-cancelled {
  text-decoration: line-through;
  color: #aaa;
}
body.page-print-receipt .void-badge {
  font-size: 9px; font-weight: bold;
  color: #c0392b; border: 1px solid #c0392b;
  padding: 0 3px; border-radius: 2px;
  vertical-align: middle; margin-left: 3px;
  white-space: nowrap;
}
@media screen {
  body.page-print-receipt { max-width: 320px; margin: 20px auto; border: 1px dashed #ccc; padding: 16px; }
  body.page-print-receipt .screen-only { display: block; }
  body.page-print-receipt .printer-info {
    font-size: 11px; color: #636E72; text-align: center;
    margin-top: 6px; font-family: monospace;
  }
  body.page-print-receipt .print-btn {
    display: block; width: 100%; margin: 16px 0 4px;
    padding: 12px; background: #1a1d2e; color: #fff;
    border: none; border-radius: 8px; font-size: 15px; cursor: pointer;
  }
  body.page-print-receipt .close-btn {
    display: block; width: 100%; padding: 10px;
    background: #f0f2f5; color: #636E72;
    border: none; border-radius: 8px; font-size: 13px; cursor: pointer;
  }
}
@media print {
  body.page-print-receipt .print-btn, body.page-print-receipt .close-btn, body.page-print-receipt .screen-only, body.page-print-receipt .printer-info { display: none !important; }
  body.page-print-receipt { width: 80mm; margin: 0; padding: 4px 6px; }
}

/* ---- print_kitchen.php ---- */
body.page-print-kitchen, body.page-print-kitchen * { margin:0; padding:0; box-sizing:border-box; }
body.page-print-kitchen {
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  width: 80mm;
  padding: 6px 8px;
  background: #fff;
  color: #000;
}
body.page-print-kitchen .center  { text-align: center; }
body.page-print-kitchen .bold    { font-weight: bold; }
body.page-print-kitchen .big     { font-size: 20px; font-weight: bold; }
body.page-print-kitchen .xlarge  { font-size: 26px; font-weight: bold; letter-spacing: 2px; }
body.page-print-kitchen .line-dash { border-top: 1px dashed #000; margin: 6px 0; }
body.page-print-kitchen .line-solid{ border-top: 2px solid #000; margin: 6px 0; }
body.page-print-kitchen .row     { display: flex; justify-content: space-between; align-items: flex-start; margin: 3px 0; }
body.page-print-kitchen .qty-box {
  background: #000; color: #fff;
  font-size: 18px; font-weight: bold;
  padding: 2px 8px; border-radius: 3px;
  min-width: 34px; text-align: center;
  flex-shrink: 0;
}
body.page-print-kitchen .item-name { flex: 1; padding: 2px 8px; font-size: 14px; font-weight: bold; }
body.page-print-kitchen .item-note { font-size: 12px; color: #333; padding: 0 8px 4px 50px; font-style: italic; }
body.page-print-kitchen .addon-line { font-size: 12px; padding: 0 0 2px 50px; display:flex; justify-content:space-between; gap:8px; }
body.page-print-kitchen .header-tag {
  background: #000; color: #fff;
  text-align: center; font-size: 16px; font-weight: bold;
  padding: 4px; margin: 6px 0;
  letter-spacing: 1px;
}
body.page-print-kitchen .feed { height: 20px; }
@media screen {
  body.page-print-kitchen { max-width: 320px; margin: 20px auto; border: 1px dashed #ccc; padding: 16px; }
  body.page-print-kitchen .printer-info {
    font-size: 11px; color: #636E72; text-align: center;
    margin-top: 6px; font-family: monospace;
  }
  body.page-print-kitchen .print-btn {
    display: block; width: 100%; margin: 16px 0 0;
    padding: 12px; background: #1a1d2e; color: #fff;
    border: none; border-radius: 8px; font-size: 15px; cursor: pointer;
  }
}
@media print {
  body.page-print-kitchen .print-btn { display: none; }
  body.page-print-kitchen { width: 80mm; margin: 0; padding: 4px 6px; }
}

/* ---- print_bar.php ---- */
body.page-print-bar, body.page-print-bar * { margin:0; padding:0; box-sizing:border-box; }
body.page-print-bar {
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  width: 80mm;
  padding: 6px 8px;
  background: #fff;
  color: #000;
}
body.page-print-bar .center  { text-align: center; }
body.page-print-bar .bold    { font-weight: bold; }
body.page-print-bar .big     { font-size: 20px; font-weight: bold; }
body.page-print-bar .xlarge  { font-size: 26px; font-weight: bold; letter-spacing: 2px; }
body.page-print-bar .line-dash { border-top: 1px dashed #000; margin: 6px 0; }
body.page-print-bar .line-solid{ border-top: 2px solid #000; margin: 6px 0; }
body.page-print-bar .row     { display: flex; justify-content: space-between; align-items: flex-start; margin: 3px 0; }
body.page-print-bar .qty-box {
  background: #333; color: #fff;
  font-size: 18px; font-weight: bold;
  padding: 2px 8px; border-radius: 3px;
  min-width: 34px; text-align: center;
  flex-shrink: 0;
}
body.page-print-bar .item-name { flex: 1; padding: 2px 8px; font-size: 14px; font-weight: bold; }
body.page-print-bar .item-note { font-size: 12px; color: #333; padding: 0 8px 4px 50px; font-style: italic; }
body.page-print-bar .addon-line { font-size: 12px; padding: 0 0 2px 50px; display:flex; justify-content:space-between; gap:8px; }
body.page-print-bar .header-tag {
  background: #333; color: #fff;
  text-align: center; font-size: 16px; font-weight: bold;
  padding: 4px; margin: 6px 0;
  letter-spacing: 1px;
}
body.page-print-bar .feed { height: 20px; }
@media screen {
  body.page-print-bar { max-width: 320px; margin: 20px auto; border: 1px dashed #ccc; padding: 16px; }
  body.page-print-bar .printer-info {
    font-size: 11px; color: #636E72; text-align: center;
    margin-top: 6px; font-family: monospace;
  }
  body.page-print-bar .print-btn {
    display: block; width: 100%; margin: 16px 0 0;
    padding: 12px; background: #1a1d2e; color: #fff;
    border: none; border-radius: 8px; font-size: 15px; cursor: pointer;
  }
}
@media print {
  body.page-print-bar .print-btn { display: none; }
  body.page-print-bar { width: 80mm; margin: 0; padding: 4px 6px; }
}

/* ---- api/print_report.php ---- */
body.page-print-report, body.page-print-report * { box-sizing: border-box; margin: 0; padding: 0; }
  body.page-print-report { font-family: 'TH Sarabun New', 'Sarabun', Arial, sans-serif; font-size: 11pt; color: #1a1a1a; background: #f0f0f0; }

  body.page-print-report .page { background: #fff; width: 210mm; min-height: 297mm; margin: 10mm auto; padding: 12mm 14mm; }

  /* ── Section ── */
  body.page-print-report .sec { margin-bottom: 14pt; }
  body.page-print-report .sec-title { font-size: 12pt; font-weight: 700; color: #fff; background: #2c3e50; padding: 4pt 8pt; margin-bottom: 6pt; }
  body.page-print-report .sec-sub   { font-size: 10pt; font-weight: 700; color: #5d6d7e; background: #ebf5fb; padding: 3pt 8pt; margin: 8pt 0 4pt; }

  /* ── Report Header ── */
  body.page-print-report .rpt-header { border-bottom: 2pt solid #2c3e50; padding-bottom: 8pt; margin-bottom: 12pt; }
  body.page-print-report .rpt-title  { font-size: 18pt; font-weight: 700; color: #2c3e50; }
  body.page-print-report .rpt-sub    { font-size: 11pt; color: #7f8c8d; margin-top: 2pt; }

  /* ── KPI Grid ── */
  body.page-print-report .kpi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6pt; margin-bottom: 10pt; }
  body.page-print-report .kpi-card { border: 1pt solid #d5dbdb; border-radius: 4pt; padding: 6pt 8pt; text-align: center; }
  body.page-print-report .kpi-num  { font-size: 14pt; font-weight: 700; color: #2c3e50; }
  body.page-print-report .kpi-lbl  { font-size: 9pt; color: #7f8c8d; margin-top: 1pt; }
  body.page-print-report .kpi-sub  { font-size: 9pt; color: #aaa; }

  body.page-print-report .kpi-grid-4 { grid-template-columns: repeat(4,1fr); }
  body.page-print-report .kpi-grid-5 { grid-template-columns: repeat(5,1fr); }
  body.page-print-report .kpi-grid-6 { grid-template-columns: repeat(6,1fr); }

  /* ── Tables ── */
  body.page-print-report table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  body.page-print-report th { background: #2c3e50; color: #fff; padding: 4pt 5pt; text-align: center; font-weight: 600; }
  body.page-print-report td { padding: 3pt 5pt; border-bottom: 0.5pt solid #e8e8e8; }
  body.page-print-report tr:nth-child(even) td { background: #f8f9fa; }
  body.page-print-report td.r { text-align: right; }
  body.page-print-report td.c { text-align: center; }
  body.page-print-report .tot td { font-weight: 700; background: #d5dbdb !important; }

  /* ── Two-column layout ── */
  body.page-print-report .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12pt; }

  /* ── Status badges ── */
  body.page-print-report .st-closed  { color: #27ae60; }
  body.page-print-report .st-active  { color: #e67e22; }
  body.page-print-report .st-cancel  { color: #e74c3c; }

  /* ── Page breaks ── */
  body.page-print-report .pb { page-break-before: always; }

  /* ── Print button (no-print) ── */
  body.page-print-report .no-print { position: fixed; top: 10mm; right: 10mm; z-index: 9999; display: flex; flex-direction: column; gap: 6pt; }
  body.page-print-report .btn-print  { background: #2c3e50; color: #fff; border: none; padding: 8pt 16pt; font-size: 11pt; cursor: pointer; border-radius: 4pt; font-family: inherit; }
  body.page-print-report .btn-print:hover { background: #1a252f; }
  body.page-print-report .btn-close  { background: #95a5a6; color: #fff; border: none; padding: 6pt 16pt; font-size: 10pt; cursor: pointer; border-radius: 4pt; font-family: inherit; }

  @media print {
    body.page-print-report { background: #fff; }
    body.page-print-report .no-print { display: none !important; }
    body.page-print-report .page { margin: 0; padding: 10mm 12mm; width: 100%; min-height: auto; box-shadow: none; }
    @page { size: A4 portrait; margin: 10mm 12mm; }
  }

/* ---- kitchen/index.php ---- */
body.page-kitchen, body.page-kitchen *{scrollbar-width:none;-ms-overflow-style:none;}body.page-kitchen::-webkit-scrollbar, body.page-kitchen *::-webkit-scrollbar{display:none;}
body.page-kitchen {
  --bg: #0F1117;
  --card: #1A1D26;
  --card-border: #2A2D3A;
  --text: #F0F0F0;
  --muted: #8A8D9F;
  --pending: #FF6B35;
  --preparing: #3498DB;
  --ready: #27AE60;
  --accent: #F39C12;
}
body.page-kitchen, body.page-kitchen * { font-family: 'Prompt', sans-serif; }
body.page-kitchen { background: var(--bg); color: var(--text); min-height: 100vh; }
body.page-kitchen .kds-header {
  background: var(--card); border-bottom: 2px solid var(--card-border);
  padding: 16px 24px; display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
}
body.page-kitchen .kds-title { font-size: 22px; font-weight: 800; letter-spacing: 1px; }
body.page-kitchen .kds-title.food { color: var(--pending); }
body.page-kitchen .kds-title.drink { color: #3498DB; }
body.page-kitchen .kds-stats { display: flex; gap: 20px; }
body.page-kitchen .kds-stat { text-align: center; }
body.page-kitchen .kds-stat .num { font-size: 24px; font-weight: 800; }
body.page-kitchen .kds-stat .lbl { font-size: 11px; color: var(--muted); }
body.page-kitchen .kds-time { font-size: 20px; font-weight: 700; color: var(--muted); }
body.page-kitchen .tab-btns { display: flex; gap: 8px; }
body.page-kitchen .tab-btn { padding: 8px 18px; border-radius: 8px; border: none; cursor: pointer;
  font-family: 'Prompt',sans-serif; font-weight: 600; font-size: 13px; transition: all 0.2s; }
body.page-kitchen .tab-btn.food { background: rgba(255,107,53,0.2); color: var(--pending); }
body.page-kitchen .tab-btn.drink { background: rgba(52,152,219,0.2); color: #3498DB; }
body.page-kitchen .tab-btn.active { filter: brightness(1.5); }
body.page-kitchen .kds-branch-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
body.page-kitchen .kds-branch-badge {
  padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,0.08); color: var(--text); border: 1px solid rgba(255,255,255,0.08);
}
body.page-kitchen .kds-branch-form { display:flex; align-items:center; gap:8px; }
body.page-kitchen .kds-branch-form select {
  background: #131722; color: var(--text); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; padding: 8px 12px; font-size: 12px; font-weight: 600;
}
body.page-kitchen .kds-branch-form button {
  background: rgba(255,255,255,0.08); color: var(--text); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; padding: 8px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
}
body.page-kitchen .kds-branch-form button:hover { filter: brightness(1.15); }

/* Orders grid */
body.page-kitchen .orders-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px; padding: 20px; }
body.page-kitchen .order-card {
  background: var(--card); border-radius: 16px; overflow: hidden;
  border: 2px solid var(--card-border); transition: border-color 0.3s;
}
body.page-kitchen .order-card.is-new { animation: fadeInCard 0.4s ease forwards; }
@keyframes fadeInCard { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
body.page-kitchen .order-card.urgent { border-color: #e74c3c !important; background: rgba(231,76,60,0.12) !important; animation: urgentPulse 2s infinite; }
body.page-kitchen .order-card.urgent .order-card-header { background: linear-gradient(135deg,rgba(231,76,60,0.45),rgba(231,76,60,0.22)) !important; }
body.page-kitchen .order-card.is-new.urgent { animation: fadeInCard 0.4s ease forwards, urgentPulse 2s 0.4s infinite; }
@keyframes urgentPulse { 0%,100% { border-color: #e74c3c; box-shadow: 0 0 0 0 rgba(231,76,60,0); } 50% { border-color: #ff6b6b; box-shadow: 0 0 18px 4px rgba(231,76,60,0.45); } }

/* Overdue popup modal */
body.page-kitchen .overdue-modal { position:fixed; inset:0; background:rgba(0,0,0,0.78); z-index:9999; display:flex; align-items:center; justify-content:center; }
body.page-kitchen .overdue-modal-box { background:#1A1D26; border:2px solid #e74c3c; border-radius:20px; padding:32px 28px; text-align:center; max-width:380px; width:90%; box-shadow:0 0 50px rgba(231,76,60,0.55); animation:overduePopIn 0.3s ease; }
@keyframes overduePopIn { from{transform:scale(0.8);opacity:0} to{transform:scale(1);opacity:1} }
body.page-kitchen .overdue-modal-icon { font-size:52px; margin-bottom:10px; }
body.page-kitchen .overdue-modal-title { font-size:22px; font-weight:800; color:#e74c3c; margin-bottom:14px; }
body.page-kitchen .overdue-modal-body { margin-bottom:20px; max-height:200px; overflow-y:auto; }
body.page-kitchen .overdue-order-item { background:rgba(231,76,60,0.15); border-radius:8px; padding:8px 14px; margin:5px 0; font-weight:600; color:#F0F0F0; font-size:14px; }
body.page-kitchen .overdue-modal-close { background:#e74c3c; color:#fff; border:none; border-radius:10px; padding:12px 36px; font-family:'Prompt',sans-serif; font-size:15px; font-weight:700; cursor:pointer; transition:filter 0.2s; }
body.page-kitchen .overdue-modal-close:hover { filter:brightness(1.2); }
body.page-kitchen .order-card-header { padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; }
body.page-kitchen .order-card-header.food-h { background: linear-gradient(135deg, rgba(255,107,53,0.25), rgba(255,107,53,0.1)); }
body.page-kitchen .order-card-header.drink-h { background: linear-gradient(135deg, rgba(52,152,219,0.25), rgba(52,152,219,0.1)); }
body.page-kitchen .order-info { display: flex; flex-direction: column; }
body.page-kitchen .order-num { font-size: 16px; font-weight: 800; }
body.page-kitchen .order-table { font-size: 13px; color: var(--muted); margin-top: 2px; }
body.page-kitchen .order-time { text-align: right; }
body.page-kitchen .order-elapsed { font-size: 20px; font-weight: 800; }
body.page-kitchen .order-elapsed.urgent { color: var(--pending); }
body.page-kitchen .order-elapsed.warn { color: var(--accent); }
body.page-kitchen .order-elapsed.ok { color: var(--ready); }
body.page-kitchen .order-elapsed-lbl { font-size: 10px; color: var(--muted); }

body.page-kitchen .order-items { padding: 12px 16px; }
body.page-kitchen .kds-item { display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05); }
body.page-kitchen .kds-item:last-child { border: none; }
body.page-kitchen .kds-item-qty { background: var(--pending); color: #fff; border-radius: 8px;
  min-width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; flex-shrink: 0; }
body.page-kitchen .kds-item-qty.drink-q { background: #3498DB; }
body.page-kitchen .kds-item-name { flex: 1; font-size: 14px; font-weight: 500; }
body.page-kitchen .kds-item-note { font-size: 11px; color: var(--accent); }
body.page-kitchen .kds-item-addons { font-size: 11px; color: #5eead4; margin-top: 2px; line-height: 1.45; }
body.page-kitchen .kds-item.done .kds-item-name { text-decoration: line-through; color: var(--muted); }
body.page-kitchen .kds-item.cancelled { opacity: 0.45; }
body.page-kitchen .kds-item.cancelled .kds-item-name { text-decoration: line-through; color: #6b7280; }
body.page-kitchen .kds-item.cancelled .kds-item-qty { background: #4b5563; }
body.page-kitchen .kds-item.cancelled-label { font-size:10px; color:#e74c3c; font-weight:700; letter-spacing:.5px; margin-left:4px; }

/* Item tap-to-done (เมื่อ status = preparing) */
body.page-kitchen .kds-item.tappable { cursor: pointer; border-radius: 8px; margin: 0 -4px; padding: 8px 4px;
  transition: background 0.15s; -webkit-tap-highlight-color: transparent; }
body.page-kitchen .kds-item.tappable:hover { background: rgba(255,255,255,0.06); }
body.page-kitchen .kds-item.tappable:active { background: rgba(255,255,255,0.12); transform: scale(0.98); }
body.page-kitchen .kds-item.item-ready { background: rgba(39,174,96,0.12) !important; border-radius: 8px; }
body.page-kitchen .kds-item.item-ready .kds-item-name { text-decoration: line-through; color: var(--muted); }
body.page-kitchen .kds-item.item-ready .kds-item-qty { background: var(--ready) !important; }
body.page-kitchen .kds-item-check { font-size: 18px; flex-shrink: 0; width: 22px; text-align: center;
  transition: all 0.2s; user-select: none; }

/* Progress bar */
body.page-kitchen .kds-progress { padding: 4px 16px 10px; }
body.page-kitchen .kds-progress-bar-bg { background: rgba(255,255,255,0.08); border-radius: 6px;
  height: 6px; overflow: hidden; }
body.page-kitchen .kds-progress-bar-fill { height: 100%; background: var(--ready); border-radius: 6px;
  transition: width 0.35s ease; }
body.page-kitchen .kds-progress-text { font-size: 11px; color: var(--muted); margin-top: 5px; }

body.page-kitchen .order-footer { padding: 12px 16px; border-top: 1px solid var(--card-border); display: flex; flex-direction: column; gap: 8px; }
body.page-kitchen .order-footer-btns { display: flex; gap: 8px; }
body.page-kitchen .customer-status-bar { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  background: rgba(255,255,255,0.04); border-radius: 8px; border: 1px solid rgba(255,255,255,0.07); }
body.page-kitchen .customer-status-bar .cs-label { font-size: 11px; color: var(--muted); white-space: nowrap; }
body.page-kitchen .customer-status-bar .cs-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
body.page-kitchen .customer-status-bar .cs-value { font-size: 12px; font-weight: 700; }
body.page-kitchen .kds-btn { flex: 1; border: none; border-radius: 10px; padding: 10px 12px; font-family: 'Prompt',sans-serif;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.2s;
  display: flex; flex-direction: column; align-items: center; gap: 2px; }
body.page-kitchen .kds-btn .btn-sub { font-size: 10px; font-weight: 400; opacity: 0.8; line-height: 1.3; }
body.page-kitchen .btn-accept { background: var(--pending); color: #fff; }
body.page-kitchen .btn-accept:hover { filter: brightness(1.2); }
body.page-kitchen .btn-ready { background: var(--ready); color: #fff; }
body.page-kitchen .btn-ready:hover { filter: brightness(1.2); }
body.page-kitchen .btn-served { background: #636E72; color: #fff; }
body.page-kitchen .btn-kds-cancel { flex: 0 0 auto; border: 1.5px solid rgba(231,76,60,0.5); background: rgba(231,76,60,0.12);
  color: #e74c3c; border-radius: 10px; padding: 10px 14px; font-family: 'Prompt',sans-serif;
  font-size: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; }
body.page-kitchen .btn-kds-cancel:hover { background: rgba(231,76,60,0.28); border-color: #e74c3c; }

/* KDS Cancel Modal */
body.page-kitchen .kds-cancel-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.75); z-index:9500;
  display:flex; align-items:center; justify-content:center; animation:page-kitchen-fadeInBg 0.2s ease; }
@keyframes page-kitchen-fadeInBg { from{opacity:0} to{opacity:1} }
body.page-kitchen .kds-cancel-box { background:#1E2130; border:2px solid #2A2D3A; border-radius:20px;
  padding:28px 24px; max-width:400px; width:92%; box-shadow:0 20px 60px rgba(0,0,0,0.5);
  animation:overduePopIn 0.25s ease; }
body.page-kitchen .kds-cancel-title { font-size:17px; font-weight:800; color:#F0F0F0; margin-bottom:4px; }
body.page-kitchen .kds-cancel-sub   { font-size:13px; color:var(--muted); margin-bottom:18px; }
body.page-kitchen .kds-reason-grid  { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
body.page-kitchen .kds-reason-chip  { padding:12px 10px; border:2px solid #2A2D3A; border-radius:12px; text-align:center;
  font-family:'Prompt',sans-serif; font-size:12px; font-weight:600; cursor:pointer;
  background:#161820; color:#B0B3C1; line-height:1.4; transition:all 0.18s; }
body.page-kitchen .kds-reason-chip:hover  { border-color:#e74c3c; color:#e74c3c; background:rgba(231,76,60,0.1); }
body.page-kitchen .kds-reason-chip.active { border-color:#e74c3c; color:#fff; background:rgba(231,76,60,0.25); }
body.page-kitchen .kds-reason-other { display:none; margin-bottom:14px; }
body.page-kitchen .kds-reason-other input { width:100%; padding:10px 14px; background:#161820; border:2px solid #2A2D3A;
  border-radius:10px; font-family:'Prompt',sans-serif; font-size:13px; color:#F0F0F0; outline:none; transition:border-color 0.18s; }
body.page-kitchen .kds-reason-other input:focus { border-color:#e74c3c; }
body.page-kitchen .kds-cancel-actions { display:flex; gap:10px; }
/* Item selection list */
body.page-kitchen .kds-item-select-list { max-height:240px; overflow-y:auto; margin-bottom:12px; border:1px solid #2A2D3A; border-radius:10px; }
body.page-kitchen .kds-cancel-item { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid #2A2D3A; cursor:pointer; }
body.page-kitchen .kds-cancel-item:last-child { border-bottom:none; }
body.page-kitchen .kds-cancel-item:hover { background:rgba(231,76,60,0.1); }
body.page-kitchen .kds-cancel-item input[type=checkbox] { width:17px; height:17px; accent-color:#e74c3c; cursor:pointer; flex-shrink:0; }
body.page-kitchen .kds-cancel-item-name { flex:1; font-size:13px; font-weight:500; color:#F0F0F0; }
body.page-kitchen .kds-cancel-item-qty  { font-size:12px; color:var(--muted); flex-shrink:0; }
body.page-kitchen .kds-btn-select-all { width:100%; padding:8px; margin-bottom:10px; border:1.5px dashed #2A2D3A; border-radius:8px;
  background:transparent; font-family:'Prompt',sans-serif; font-size:12px; font-weight:600; color:var(--muted); cursor:pointer; }
body.page-kitchen .kds-btn-select-all:hover { border-color:#e74c3c; color:#e74c3c; }
body.page-kitchen .kds-btn-back { padding:12px 16px; background:#2A2D3A; color:var(--muted); border:none; border-radius:10px;
  font-family:'Prompt',sans-serif; font-size:13px; font-weight:600; cursor:pointer; }
body.page-kitchen .kds-btn-back:hover { background:#363a4a; }
body.page-kitchen .kds-btn-confirm { flex:1; padding:12px; background:#e74c3c; color:#fff; border:none; border-radius:10px;
  font-family:'Prompt',sans-serif; font-size:14px; font-weight:700; cursor:pointer; transition:filter 0.18s; }
body.page-kitchen .kds-btn-confirm:hover    { filter:brightness(1.15); }
body.page-kitchen .kds-btn-confirm:disabled { opacity:0.5; cursor:not-allowed; }
body.page-kitchen .kds-btn-dismiss { flex:1; padding:12px; background:#2A2D3A; color:#8A8D9F; border:none; border-radius:10px;
  font-family:'Prompt',sans-serif; font-size:14px; font-weight:600; cursor:pointer; }
body.page-kitchen .kds-btn-dismiss:hover { background:#323546; }

/* New order notification */
body.page-kitchen .new-order-toast {
  position: fixed; top: 80px; right: 20px; background: var(--pending);
  color: #fff; border-radius: 14px; padding: 14px 20px; z-index: 999;
  font-weight: 700; font-size: 15px; box-shadow: 0 8px 30px rgba(255,107,53,0.4);
  animation: slideInRight 0.3s ease, shake 0.5s ease 0.3s;
}
@keyframes slideInRight { from { transform:translateX(100%); } to { transform:translateX(0); } }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }

/* Empty state */
body.page-kitchen .empty-kds { text-align: center; padding: 80px 20px; color: var(--muted); }
body.page-kitchen .empty-icon { font-size: 60px; margin-bottom: 16px; opacity: 0.5; }

/* Status bar */
body.page-kitchen .status-row { display: flex; gap: 8px; padding: 12px 20px 0; flex-wrap: wrap; }
body.page-kitchen .status-chip { padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; }
body.page-kitchen .chip-pending { background: rgba(255,107,53,0.2); color: var(--pending); }
body.page-kitchen .chip-preparing { background: rgba(52,152,219,0.2); color: var(--preparing); }
body.page-kitchen .chip-ready { background: rgba(39,174,96,0.2); color: var(--ready); }

/* Walk-in badge */
body.page-kitchen .walkin-badge { display: inline-flex; align-items: center; gap: 4px;
  background: rgba(243,156,18,0.2); color: #F39C12;
  border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 700; }
body.page-kitchen .order-num-walkin { font-size: 17px; font-weight: 900; color: #F39C12; letter-spacing: 1px; }
body.page-kitchen .order-card.walkin-card { border-color: rgba(243,156,18,0.4); }
body.page-kitchen .order-card.walkin-card .order-card-header { background: linear-gradient(135deg,rgba(243,156,18,0.25),rgba(243,156,18,0.1)); }

/* ---- staff/index.php ---- */
body.page-staff-management{background:var(--bg);}
body.page-staff-management.is-admin-router{display:flex;min-height:100vh;}
body.page-staff-management.is-admin-router .sidebar{width:230px;background:#1A1D2E;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;}
body.page-staff-management.is-admin-router .sidebar-logo{padding:20px 18px;border-bottom:1px solid rgba(255,255,255,0.08);}
body.page-staff-management.is-admin-router .sidebar-logo .name{color:#fff;font-weight:700;font-size:16px;}
body.page-staff-management.is-admin-router .sidebar-logo .sub{color:rgba(255,255,255,0.4);font-size:11px;margin-top:2px;}
body.page-staff-management.is-admin-router .nav-item a{display:flex;align-items:center;gap:10px;padding:12px 20px;color:rgba(255,255,255,0.65);text-decoration:none;font-size:14px;font-weight:500;transition:all 0.2s;}
body.page-staff-management.is-admin-router .nav-item a:hover,body.page-staff-management.is-admin-router .nav-item a.active{background:rgba(255,255,255,0.1);color:#fff;}
body.page-staff-management.is-admin-router .nav-item a.active{border-left:3px solid var(--primary);padding-left:17px;}
body.page-staff-management.is-admin-router .nav-section{padding:12px 20px 4px;font-size:10px;color:rgba(255,255,255,0.3);letter-spacing:1px;font-weight:600;}
body.page-staff-management.is-admin-router .main-area{flex:1;padding:24px;overflow-y:auto;}
body.page-staff-management .page-wrap{max-width:1060px;margin:0 auto;padding:24px;}
body.page-staff-management.is-admin-router .page-wrap{max-width:none;margin:0;padding:0;}
body.page-staff-management .user-avatar{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;flex-shrink:0;color:#fff;}
body.page-staff-management .user-card{background:#fff;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,0.05);margin-bottom:10px;overflow:hidden;border:1.5px solid var(--border);transition:box-shadow 0.2s;}
body.page-staff-management .user-card:hover{box-shadow:0 4px 20px rgba(0,0,0,0.09);}
body.page-staff-management .user-card-body{display:flex;align-items:center;gap:14px;padding:14px 18px;flex-wrap:wrap;}
body.page-staff-management .user-info{flex:1;min-width:0;}
body.page-staff-management .user-name{font-weight:700;font-size:15px;color:var(--text);}
body.page-staff-management .user-meta{font-size:12px;color:var(--text-muted);margin-top:2px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
body.page-staff-management .user-actions{display:flex;gap:7px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end;}
body.page-staff-management .role-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;color:#fff;}
body.page-staff-management .branch-list{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
body.page-staff-management .branch-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;background:#EEF3FF;color:#355C9A;border:1px solid #D9E4FF;}
body.page-staff-management .branch-badge.primary{background:#FFF4E5;color:#B35C00;border-color:#FFD8A8;}
body.page-staff-management .act-btn{border:none;border-radius:8px;padding:7px 13px;font-family:'Prompt',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.18s;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
body.page-staff-management .act-btn:hover{filter:brightness(0.92);transform:translateY(-1px);}
body.page-staff-management .btn-reset{background:#EBF5FB;color:#2980B9;}
body.page-staff-management .btn-edit{background:#F4ECFF;color:#6C3EB8;}
body.page-staff-management .btn-toggle-on{background:var(--success-light);color:var(--success);}
body.page-staff-management .btn-toggle-off{background:var(--danger-light);color:var(--danger);}
body.page-staff-management .add-card{background:#fff;border-radius:16px;padding:24px;box-shadow:var(--shadow);margin-bottom:22px;border:1.5px solid var(--border);}
body.page-staff-management .section-head{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;color:var(--text);margin-bottom:18px;}
body.page-staff-management .stats-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:22px;}
body.page-staff-management .stat-chip{background:#fff;border-radius:12px;padding:14px 16px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,0.05);border:1.5px solid var(--border);}
body.page-staff-management .stat-chip .n{font-size:24px;font-weight:800;}
body.page-staff-management .stat-chip .l{font-size:11px;color:var(--text-muted);margin-top:3px;}
body.page-staff-management .pw-strength{height:4px;border-radius:2px;margin-top:5px;transition:all 0.3s;background:#E9ECEF;}
body.page-staff-management .pw-strength.weak{background:linear-gradient(90deg,#D63031 30%,#E9ECEF 30%);}
body.page-staff-management .pw-strength.medium{background:linear-gradient(90deg,#F39C12 65%,#E9ECEF 65%);}
body.page-staff-management .pw-strength.strong{background:#00B894;}
body.page-staff-management .pw-hint{font-size:11px;margin-top:3px;}
body.page-staff-management .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:800;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.25s;}
body.page-staff-management .modal-overlay.show{opacity:1;pointer-events:all;}
body.page-staff-management .modal-box{background:#fff;border-radius:20px;padding:30px 28px;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,0.2);transform:scale(0.92);transition:transform 0.25s;}
body.page-staff-management .modal-overlay.show .modal-box{transform:scale(1);}
body.page-staff-management .modal-title{font-size:18px;font-weight:700;margin-bottom:6px;}
body.page-staff-management .modal-sub{font-size:13px;color:var(--text-muted);margin-bottom:22px;}
body.page-staff-management .modal-close{float:right;background:none;border:none;font-size:20px;cursor:pointer;color:#aaa;margin-top:-4px;}
body.page-staff-management .field-wrap{margin-bottom:14px;}
body.page-staff-management .field-wrap label{display:block;font-size:12px;font-weight:700;color:#555;margin-bottom:5px;}
body.page-staff-management .pw-input-wrap{position:relative;}
body.page-staff-management .pw-input-wrap input{padding-right:42px!important;}
body.page-staff-management .pw-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:#B2BEC3;cursor:pointer;font-size:14px;padding:0;}
body.page-staff-management .pw-eye:hover{color:#636E72;}
body.page-staff-management .modal-btn{width:100%;padding:13px;border:none;border-radius:12px;font-family:'Prompt',sans-serif;font-size:15px;font-weight:700;cursor:pointer;transition:all 0.2s;}
body.page-staff-management .modal-btn-primary{background:linear-gradient(135deg,#FF6B35,#E55A24);color:#fff;margin-bottom:8px;}
body.page-staff-management .modal-btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(255,107,53,.35);}
body.page-staff-management .modal-btn-cancel{background:#F0F2F5;color:var(--text-muted);}
body.page-staff-management .inline-alert{border-radius:10px;padding:11px 14px;font-size:13px;display:flex;align-items:center;gap:8px;margin-bottom:16px;}
body.page-staff-management .alert-success{background:var(--success-light);color:#00695C;border:1.5px solid #B2DFDB;}
body.page-staff-management .alert-error{background:var(--danger-light);color:#C62828;border:1.5px solid #FFCDD2;}
@media(max-width:640px){body.page-staff-management .stats-strip{grid-template-columns:1fr 1fr;}body.page-staff-management .user-actions{width:100%;margin-top:10px;}}

/* ---- admin/index.php ---- */
body.page-admin, body.page-admin *{scrollbar-width:none;-ms-overflow-style:none;}body.page-admin::-webkit-scrollbar, body.page-admin *::-webkit-scrollbar{display:none;}
body.page-admin{--primary:#FF6B35;--secondary:#1A1D2E;--bg:#F0F2F5;--card:#fff;--border:#E9ECEF;--success:#00B894;}
body.page-admin, body.page-admin *{font-family:'Prompt',sans-serif;}
body.page-admin .fa, body.page-admin .fas, body.page-admin .far, body.page-admin .fab, body.page-admin .fa-solid, body.page-admin .fa-regular, body.page-admin .fa-brands {
  font-style: normal;
  line-height: 1;
  text-rendering: auto;
}
body.page-admin .fa, body.page-admin .fas, body.page-admin .fa-solid { font-family:"Font Awesome 6 Free"; font-weight:900; }
body.page-admin .far, body.page-admin .fa-regular { font-family:"Font Awesome 6 Free"; font-weight:400; }
body.page-admin .fab, body.page-admin .fa-brands { font-family:"Font Awesome 6 Brands"; font-weight:400; }
body.page-admin .fa-emoji-fallback { font-family:'Prompt',sans-serif!important; font-weight:400!important; }
body.page-admin{background:var(--bg);display:flex;min-height:100vh;}
body.page-admin .sidebar{width:230px;background:var(--secondary);flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;}
body.page-admin .sidebar-logo{padding:20px 18px;border-bottom:1px solid rgba(255,255,255,0.08);}
body.page-admin .sidebar-logo .name{color:#fff;font-weight:700;font-size:16px;}
body.page-admin .sidebar-logo .sub{color:rgba(255,255,255,0.4);font-size:11px;margin-top:2px;}
body.page-admin .nav-item a{display:flex;align-items:center;gap:10px;padding:12px 20px;color:rgba(255,255,255,0.65);text-decoration:none;font-size:14px;font-weight:500;border-radius:0;transition:all 0.2s;}
body.page-admin .nav-item a:hover,body.page-admin .nav-item a.active{background:rgba(255,255,255,0.1);color:#fff;}
body.page-admin .nav-item a.active{border-left:3px solid var(--primary);padding-left:17px;}
body.page-admin .nav-section{padding:12px 20px 4px;font-size:10px;color:rgba(255,255,255,0.3);letter-spacing:1px;font-weight:600;}
body.page-admin .main-area{flex:1;padding:24px;overflow-y:auto;}
body.page-admin .page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
body.page-admin .page-title{font-size:22px;font-weight:700;color:#2D3436;}
body.page-admin .card-panel{background:var(--card);border-radius:16px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.06);margin-bottom:20px;}
body.page-admin .form-label{font-size:13px;font-weight:600;color:#444;}
body.page-admin .form-control,body.page-admin .form-select{border-radius:10px;border:1.5px solid var(--border);font-family:'Prompt',sans-serif;font-size:14px;}
body.page-admin .form-control:focus,body.page-admin .form-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(255,107,53,0.12);}
body.page-admin .btn-save{background:var(--primary);border:none;color:#fff;border-radius:10px;padding:10px 24px;font-family:'Prompt',sans-serif;font-weight:600;cursor:pointer;}
body.page-admin .btn-save:hover{filter:brightness(0.95);}
/* Table */
body.page-admin .data-table{width:100%;border-collapse:separate;border-spacing:0;}
body.page-admin .data-table th{background:#f8f9fa;padding:12px 14px;font-size:12px;font-weight:700;color:#636E72;text-align:left;border-bottom:2px solid var(--border);}
body.page-admin .data-table td{padding:12px 14px;border-bottom:1px solid #f5f5f5;font-size:13px;vertical-align:middle;}
body.page-admin .data-table tr:hover td{background:#fafafa;}
body.page-admin .tag{padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600;}
body.page-admin .tag-food{background:#FFF0EB;color:var(--primary);}
body.page-admin .tag-drink{background:#EBF5FB;color:#3498DB;}
body.page-admin .tag-sig{background:#FEF9E7;color:#F39C12;}
body.page-admin .tag-pop{background:#E8F8F5;color:var(--success);}
body.page-admin .tag-warn{background:#FFF8E7;color:#856404;}
body.page-admin .tag-off{background:#F0F2F5;color:#636E72;}
body.page-admin .tag-promo{background:#EBF5FB;color:#9B59B6;}
body.page-admin .toggle-avail{border:none;border-radius:6px;padding:5px 12px;font-family:'Prompt',sans-serif;font-size:12px;font-weight:600;cursor:pointer;}
body.page-admin .avail-yes{background:#E8F8F5;color:var(--success);}
body.page-admin .avail-no{background:#FEF0F0;color:#D63031;}
/* Stats */
body.page-admin .stats-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px;}
body.page-admin .stat-mini{background:var(--card);border-radius:12px;padding:18px;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,0.05);}
body.page-admin .stat-mini .n{font-size:26px;font-weight:800;color:var(--primary);}
body.page-admin .stat-mini .l{font-size:12px;color:#aaa;margin-top:4px;}
/* Charts placeholder */
body.page-admin .chart-box{background:var(--card);border-radius:16px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.06);}
body.page-admin .printer-card{background:#f8f9fa;border-radius:12px;padding:16px;margin-bottom:14px;border:1.5px solid var(--border);}
body.page-admin .printer-type-label{font-weight:700;font-size:14px;margin-bottom:12px;}
body.page-admin .log-row{font-size:12px;padding:8px 12px;border-bottom:1px solid #f5f5f5;display:flex;gap:12px;}
body.page-admin .log-time{color:#aaa;flex-shrink:0;width:140px;}
body.page-admin .log-action{font-weight:600;flex-shrink:0;width:140px;}
body.page-admin .log-detail{color:#555;flex:1;}
body.page-admin img.menu-thumb{width:48px;height:48px;border-radius:8px;object-fit:cover;}
/* Tables management page */
body.page-admin .floor-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
body.page-admin .floor-badge{background:var(--primary);color:#fff;border-radius:8px;padding:4px 14px;font-size:13px;font-weight:700;}
body.page-admin .table-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;}
body.page-admin .t-card{background:#F8F9FA;border-radius:12px;padding:14px 16px;border:1.5px solid var(--border);display:flex;align-items:center;gap:12px;transition:.2s;}
body.page-admin .t-card:hover{border-color:var(--primary);background:#FFF5F0;}
body.page-admin .t-card.occupied{border-color:#27AE60;background:#F0FFF4;}
body.page-admin .t-num{font-size:22px;font-weight:800;color:#1A1D2E;}
body.page-admin .t-cap{font-size:12px;color:#636E72;}
body.page-admin .t-actions{display:flex;gap:5px;}
body.page-admin .t-btn{border:none;border-radius:6px;padding:5px 8px;font-size:11px;font-weight:600;cursor:pointer;font-family:'Prompt',sans-serif;}
body.page-admin .t-btn-edit{background:#EBF5FB;color:#2980B9;} body.page-admin .t-btn-edit:hover{background:#C8E6F7;}
body.page-admin .t-btn-del{background:#FEF0F0;color:#D63031;} body.page-admin .t-btn-del:disabled{opacity:.4;cursor:not-allowed;}
body.page-admin .form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;}
body.page-admin .inline-alert{border-radius:10px;padding:11px 14px;font-size:13px;display:flex;align-items:center;gap:8px;margin-bottom:16px;}
body.page-admin .alert-success-box{background:#E8F8F5;color:#00695C;border:1.5px solid #B2DFDB;}
body.page-admin .alert-error-box{background:#FEF0F0;color:#C62828;border:1.5px solid #FFCDD2;}
/* Modal */
body.page-admin .t-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:800;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:.25s;}
body.page-admin .t-modal-overlay.show{opacity:1;pointer-events:all;}
body.page-admin .t-modal-box{background:#fff;border-radius:20px;padding:28px;width:100%;max-width:380px;transform:scale(.92);transition:.25s;}
body.page-admin .t-modal-overlay.show .t-modal-box{transform:scale(1);}
body.page-admin .t-modal-title{font-size:17px;font-weight:700;margin-bottom:18px;}
body.page-admin .t-modal-close{float:right;background:none;border:none;font-size:20px;cursor:pointer;color:#aaa;margin-top:-4px;}
/* Promotions page */
body.page-admin .promo-card{background:#fff;border-radius:14px;overflow:hidden;border:2px solid var(--border);margin-bottom:14px;transition:.2s;}
body.page-admin .promo-card:hover{box-shadow:0 4px 20px rgba(0,0,0,0.09);}
body.page-admin .promo-head{padding:14px 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
body.page-admin .promo-type-badge{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;}
body.page-admin .type-percent{background:linear-gradient(135deg,#9B59B6,#8E44AD);}
body.page-admin .type-bogo   {background:linear-gradient(135deg,#E67E22,#D35400);}
body.page-admin .promo-status{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;flex-shrink:0;}
body.page-admin .promo-body{padding:0 18px 14px;font-size:13px;color:#636E72;}
body.page-admin .promo-foot{padding:10px 18px;background:#f9f9f9;border-top:1px solid var(--border);display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
body.page-admin .date-range{display:flex;align-items:center;gap:6px;font-size:12px;color:#636E72;background:#F0F2F5;padding:4px 10px;border-radius:8px;}
body.page-admin .type-tabs-promo{display:flex;gap:8px;margin-bottom:16px;}
body.page-admin .type-tab-promo{flex:1;padding:14px;border:2px solid var(--border);border-radius:12px;cursor:pointer;text-align:center;transition:.2s;background:#fff;}
body.page-admin .type-tab-promo:hover{border-color:var(--primary);}
body.page-admin .type-tab-promo.selected{border-color:var(--primary);background:#FFF5F0;}
body.page-admin .menu-items-list{max-height:240px;overflow-y:auto;border:1.5px solid var(--border);border-radius:10px;}
body.page-admin .menu-item-check{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;border-bottom:1px solid #f9f9f9;transition:.15s;}
body.page-admin .menu-item-check:hover{background:#FFF5F0;}
body.page-admin .menu-item-check input[type=checkbox]{width:16px;height:16px;accent-color:var(--primary);flex-shrink:0;}
body.page-admin .promo-empty{text-align:center;padding:60px 20px;color:#aaa;}
/* Categories page */
body.page-admin .cat-table td,body.page-admin .cat-table th{vertical-align:middle;}
body.page-admin .cat-icon-preview{font-size:24px;line-height:1;}
body.page-admin .cat-type-food{background:#FFF0EB;color:var(--primary);padding:3px 10px;border-radius:8px;font-size:11px;font-weight:700;}
body.page-admin .cat-type-drink{background:#EBF5FB;color:#3498DB;padding:3px 10px;border-radius:8px;font-size:11px;font-weight:700;}
body.page-admin .cat-active-yes{background:#E8F8F5;color:#00695C;padding:3px 10px;border-radius:8px;font-size:11px;font-weight:700;}
body.page-admin .cat-active-no{background:#F0F2F5;color:#636E72;padding:3px 10px;border-radius:8px;font-size:11px;font-weight:700;}
body.page-admin .btn-cat-edit{background:#EBF5FB;color:#2980B9;border:none;border-radius:7px;padding:5px 10px;font-size:12px;font-weight:600;cursor:pointer;font-family:'Prompt',sans-serif;}
body.page-admin .btn-cat-edit:hover{background:#C8E6F7;}
body.page-admin .btn-cat-del{background:#FEF0F0;color:#D63031;border:none;border-radius:7px;padding:5px 10px;font-size:12px;font-weight:600;cursor:pointer;font-family:'Prompt',sans-serif;}
body.page-admin .btn-cat-del:hover{background:#FFCDD2;} body.page-admin .btn-cat-del:disabled{opacity:.4;cursor:not-allowed;}
body.page-admin .icon-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;max-height:160px;overflow-y:auto;border:1.5px solid var(--border);border-radius:10px;padding:10px;margin-top:6px;}
body.page-admin .icon-opt{font-size:22px;text-align:center;cursor:pointer;padding:6px;border-radius:8px;border:2px solid transparent;transition:.15s;}
body.page-admin .icon-opt:hover{border-color:var(--primary);background:#FFF5F0;}
body.page-admin .icon-opt.selected{border-color:var(--primary);background:#FFF5F0;}

/* ---- admin/index.php ---- */
body.page-admin .type-tabs-promo{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:16px;}
body.page-admin .type-tab-promo{padding:14px 6px;border:2px solid #E9ECEF;border-radius:12px;cursor:pointer;text-align:center;transition:.2s;background:#fff;}
body.page-admin .type-tab-promo:hover{border-color:var(--primary);}
body.page-admin .type-tab-promo.selected{border-color:var(--primary);background:#FFF5F0;}
body.page-admin .pcfg{background:#F8F9FA;border-radius:10px;padding:16px;border:1.5px solid #E9ECEF;margin-bottom:14px;}
body.page-admin .prow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
body.page-admin .prow span{font-size:14px;font-weight:600;color:#555;white-space:nowrap;}
body.page-admin .pnum{width:80px!important;}
body.page-admin .ppreset{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px;}
body.page-admin .ppbtn{padding:5px 12px;border-radius:20px;border:2px solid;background:#fff;font-size:12px;font-weight:700;cursor:pointer;font-family:Prompt,sans-serif;transition:.15s;}
body.page-admin .ppbtn:hover{color:#fff!important;}
body.page-admin .type-percent .ppbtn,body.page-admin .ppbtn-pct{border-color:#9B59B6;color:#9B59B6;}
body.page-admin .ppbtn-pct:hover{background:#9B59B6;}
body.page-admin .ppbtn-bxgy{border-color:#E67E22;color:#E67E22;}
body.page-admin .ppbtn-bxgy:hover{background:#E67E22;}
body.page-admin .ppbtn-hs{border-color:#E74C3C;color:#E74C3C;}
body.page-admin .ppbtn-hs:hover{background:#E74C3C;}
body.page-admin .ptime-presets{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px;}
body.page-admin .ptbtn{padding:4px 10px;border-radius:14px;border:1.5px solid #E74C3C;background:#fff;color:#E74C3C;font-size:11px;font-weight:600;cursor:pointer;font-family:Prompt,sans-serif;}
body.page-admin .ptbtn:hover{background:#E74C3C;color:#fff;}
body.page-admin .promo-card{background:#fff;border-radius:14px;overflow:hidden;border:2px solid #E9ECEF;margin-bottom:12px;transition:.2s;}
body.page-admin .promo-card:hover{box-shadow:0 4px 18px rgba(0,0,0,0.08);}
body.page-admin .promo-head{padding:12px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
body.page-admin .promo-type-badge{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;}
body.page-admin .type-percent{background:linear-gradient(135deg,#9B59B6,#8E44AD);}
body.page-admin .type-bxgy  {background:linear-gradient(135deg,#E67E22,#D35400);}
body.page-admin .type-bundle{background:linear-gradient(135deg,#3498DB,#2980B9);}
body.page-admin .type-fixed {background:linear-gradient(135deg,#27AE60,#229954);}
body.page-admin .type-hotsale{background:linear-gradient(135deg,#E74C3C,#C0392B);}
body.page-admin .promo-status{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;}
body.page-admin .promo-body{padding:0 16px 12px;font-size:13px;color:#636E72;}
body.page-admin .promo-foot{padding:9px 16px;background:#f9f9f9;border-top:1px solid #E9ECEF;display:flex;gap:7px;align-items:center;flex-wrap:wrap;}
body.page-admin .hot-time-tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;background:#FFF0F0;color:#E74C3C;padding:3px 10px;border-radius:7px;border:1px solid #FFCDD2;}
body.page-admin .date-range{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#636E72;background:#F0F2F5;padding:3px 10px;border-radius:7px;}

/* ---- admin/index.php ---- */
body.page-admin #recentOrdersTbody tr:hover { background:#f0f4ff; }

/* ---- admin/import_menu.php ---- */
body.page-admin-import-menu, body.page-admin-import-menu *{scrollbar-width:none;-ms-overflow-style:none;}body.page-admin-import-menu::-webkit-scrollbar, body.page-admin-import-menu *::-webkit-scrollbar{display:none;}
body.page-admin-import-menu{--primary:#FF6B35;--secondary:#1A1D2E;--bg:#F0F2F5;--card:#fff;--border:#E9ECEF;--success:#00B894;}
body.page-admin-import-menu, body.page-admin-import-menu *{font-family:'Prompt',sans-serif;}
body.page-admin-import-menu{background:var(--bg);display:flex;min-height:100vh;}
body.page-admin-import-menu .sidebar{width:230px;background:var(--secondary);flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;}
body.page-admin-import-menu .sidebar-logo{padding:20px 18px;border-bottom:1px solid rgba(255,255,255,0.08);}
body.page-admin-import-menu .sidebar-logo .name{color:#fff;font-weight:700;font-size:16px;}
body.page-admin-import-menu .sidebar-logo .sub{color:rgba(255,255,255,0.4);font-size:11px;margin-top:2px;}
body.page-admin-import-menu .nav-item a{display:flex;align-items:center;gap:10px;padding:12px 20px;color:rgba(255,255,255,0.65);text-decoration:none;font-size:14px;font-weight:500;transition:all 0.2s;}
body.page-admin-import-menu .nav-item a:hover,body.page-admin-import-menu .nav-item a.active{background:rgba(255,255,255,0.1);color:#fff;}
body.page-admin-import-menu .nav-item a.active{border-left:3px solid var(--primary);padding-left:17px;}
body.page-admin-import-menu .nav-section{padding:12px 20px 4px;font-size:10px;color:rgba(255,255,255,0.3);letter-spacing:1px;font-weight:600;}
body.page-admin-import-menu .main-area{flex:1;padding:24px;overflow-y:auto;}
body.page-admin-import-menu .page-title{font-size:22px;font-weight:700;color:#2D3436;margin-bottom:20px;}
body.page-admin-import-menu .card-panel{background:var(--card);border-radius:16px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.06);margin-bottom:20px;}
body.page-admin-import-menu .form-label{font-size:13px;font-weight:600;color:#444;}
body.page-admin-import-menu .form-control,body.page-admin-import-menu .form-select{border-radius:10px;border:1.5px solid var(--border);font-family:'Prompt',sans-serif;font-size:14px;}
body.page-admin-import-menu .form-control:focus,body.page-admin-import-menu .form-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(255,107,53,0.12);}
body.page-admin-import-menu .btn-primary-custom{background:var(--primary);border:none;color:#fff;border-radius:10px;padding:10px 24px;font-family:'Prompt',sans-serif;font-weight:600;cursor:pointer;font-size:14px;}
body.page-admin-import-menu .btn-primary-custom:hover{filter:brightness(0.93);}
body.page-admin-import-menu .btn-outline-custom{background:#fff;border:1.5px solid var(--primary);color:var(--primary);border-radius:10px;padding:9px 20px;font-family:'Prompt',sans-serif;font-weight:600;cursor:pointer;font-size:14px;text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
body.page-admin-import-menu .btn-outline-custom:hover{background:#FFF5F0;}

/* Steps */
body.page-admin-import-menu .steps{display:flex;gap:0;margin-bottom:28px;}
body.page-admin-import-menu .step{flex:1;display:flex;align-items:center;gap:10px;padding:14px 18px;background:#f8f9fa;border:1.5px solid var(--border);}
body.page-admin-import-menu .step:first-child{border-radius:12px 0 0 12px;}
body.page-admin-import-menu .step:last-child{border-radius:0 12px 12px 0;}
body.page-admin-import-menu .step.active{background:#FFF5F0;border-color:var(--primary);}
body.page-admin-import-menu .step.done{background:#E8F8F5;border-color:#00B894;}
body.page-admin-import-menu .step-num{width:28px;height:28px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;}
body.page-admin-import-menu .step.active .step-num{background:var(--primary);color:#fff;}
body.page-admin-import-menu .step.done .step-num{background:var(--success);color:#fff;}
body.page-admin-import-menu .step-lbl{font-size:13px;font-weight:600;color:#636E72;}
body.page-admin-import-menu .step.active .step-lbl{color:var(--primary);}
body.page-admin-import-menu .step.done .step-lbl{color:var(--success);}

/* Upload zones */
body.page-admin-import-menu .upload-zone{border:2px dashed var(--border);border-radius:14px;padding:32px 24px;text-align:center;cursor:pointer;transition:.2s;background:#fafafa;}
body.page-admin-import-menu .upload-zone:hover,body.page-admin-import-menu .upload-zone.drag{border-color:var(--primary);background:#FFF5F0;}
body.page-admin-import-menu .upload-zone.has-file{border-color:var(--success);background:#E8F8F5;}
body.page-admin-import-menu .upload-icon{font-size:36px;margin-bottom:8px;opacity:.6;}
body.page-admin-import-menu .upload-title{font-size:15px;font-weight:600;color:#2D3436;margin-bottom:4px;}
body.page-admin-import-menu .upload-sub{font-size:12px;color:#aaa;}

/* Preview table */
body.page-admin-import-menu #previewWrap{display:none;}
body.page-admin-import-menu .preview-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;}
body.page-admin-import-menu .preview-table th{background:#f8f9fa;padding:10px 12px;font-size:11px;font-weight:700;color:#636E72;border-bottom:2px solid var(--border);text-align:left;}
body.page-admin-import-menu .preview-table td{padding:9px 12px;border-bottom:1px solid #f5f5f5;vertical-align:middle;}
body.page-admin-import-menu .preview-table tbody tr:hover td{background:#fafafa;}
body.page-admin-import-menu .badge-type-food{background:#FFF0EB;color:var(--primary);padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600;}
body.page-admin-import-menu .badge-type-drink{background:#EBF5FB;color:#3498DB;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600;}
body.page-admin-import-menu .img-match{background:#E8F8F5;color:#00695C;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600;}
body.page-admin-import-menu .img-missing{background:#FEF0F0;color:#C62828;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:600;}

/* Results */
body.page-admin-import-menu .result-row-ok   td:first-child{border-left:3px solid var(--success);}
body.page-admin-import-menu .result-row-skip td:first-child{border-left:3px solid #F39C12;}
body.page-admin-import-menu .result-row-error td:first-child{border-left:3px solid #E74C3C;}
body.page-admin-import-menu .badge-ok   {background:#E8F8F5;color:#00695C;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700;}
body.page-admin-import-menu .badge-skip {background:#FEF9E7;color:#8B6914;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700;}
body.page-admin-import-menu .badge-error{background:#FEF0F0;color:#C62828;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700;}

/* Summary cards */
body.page-admin-import-menu .sum-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;}
body.page-admin-import-menu .sum-card{border-radius:12px;padding:16px 20px;text-align:center;}
body.page-admin-import-menu .sum-card.ok  {background:#E8F8F5;border:1.5px solid #B2DFDB;}
body.page-admin-import-menu .sum-card.skip{background:#FEF9E7;border:1.5px solid #FFECB3;}
body.page-admin-import-menu .sum-card.err {background:#FEF0F0;border:1.5px solid #FFCDD2;}
body.page-admin-import-menu .sum-card .num{font-size:28px;font-weight:800;}
body.page-admin-import-menu .sum-card.ok   .num{color:#00695C;}
body.page-admin-import-menu .sum-card.skip .num{color:#8B6914;}
body.page-admin-import-menu .sum-card.err  .num{color:#C62828;}
body.page-admin-import-menu .sum-card .lbl{font-size:12px;color:#666;margin-top:2px;}

/* Info box */
body.page-admin-import-menu .info-box{background:#EBF5FB;border:1.5px solid #AED6F1;border-radius:12px;padding:16px 20px;font-size:13px;color:#1A5276;}
body.page-admin-import-menu .cat-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
body.page-admin-import-menu .cat-chip{background:#f0f2f5;border-radius:20px;padding:3px 10px;font-size:12px;color:#555;}

/* ---- admin/promotions.php ---- */
body.page-admin-promotions{--primary:#FF6B35;--secondary:#1A1D2E;--success:#00B894;--danger:#D63031;--bg:#F0F2F5;--card:#fff;--border:#E9ECEF;}
body.page-admin-promotions, body.page-admin-promotions *{font-family:'Prompt',sans-serif;}
body.page-admin-promotions{background:var(--bg);display:flex;min-height:100vh;}
body.page-admin-promotions .sidebar{width:230px;background:var(--secondary);flex-shrink:0;min-height:100vh;overflow-y:auto;display:flex;flex-direction:column;}
body.page-admin-promotions .sidebar-logo{padding:20px 18px;border-bottom:1px solid rgba(255,255,255,0.08);}
body.page-admin-promotions .sidebar-logo .name{color:#fff;font-weight:700;font-size:16px;}
body.page-admin-promotions .sidebar-logo .sub{color:rgba(255,255,255,0.4);font-size:11px;margin-top:2px;}
body.page-admin-promotions .nav-item a{display:flex;align-items:center;gap:10px;padding:12px 20px;color:rgba(255,255,255,0.65);text-decoration:none;font-size:14px;font-weight:500;transition:all 0.2s;}
body.page-admin-promotions .nav-item a:hover,body.page-admin-promotions .nav-item a.active{background:rgba(255,255,255,0.1);color:#fff;}
body.page-admin-promotions .nav-item a.active{border-left:3px solid var(--primary);padding-left:17px;}
body.page-admin-promotions .nav-section{padding:12px 20px 4px;font-size:10px;color:rgba(255,255,255,0.3);letter-spacing:1px;font-weight:600;}
body.page-admin-promotions .main-area{flex:1;padding:24px;overflow-y:auto;}

/* ── Cards & Layout ── */
body.page-admin-promotions .page-title{font-size:22px;font-weight:700;color:#2D3436;margin-bottom:20px;}
body.page-admin-promotions .card-panel{background:var(--card);border-radius:16px;padding:24px;box-shadow:0 2px 12px rgba(0,0,0,0.06);margin-bottom:20px;}
body.page-admin-promotions .form-label{font-size:13px;font-weight:600;color:#444;}
body.page-admin-promotions .form-control,body.page-admin-promotions .form-select{border-radius:10px;border:1.5px solid var(--border);font-family:'Prompt',sans-serif;font-size:14px;}
body.page-admin-promotions .form-control:focus,body.page-admin-promotions .form-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(255,107,53,.12);}
body.page-admin-promotions .btn-save{background:var(--primary);border:none;color:#fff;border-radius:10px;padding:10px 24px;font-family:'Prompt',sans-serif;font-weight:600;cursor:pointer;font-size:14px;}
body.page-admin-promotions .btn-save:hover{opacity:.9;}

/* ── Type Tabs ── */
body.page-admin-promotions .type-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:20px;}
body.page-admin-promotions .type-tab{padding:16px 8px;border:2px solid var(--border);border-radius:12px;cursor:pointer;text-align:center;transition:.2s;background:#fff;}
body.page-admin-promotions .type-tab:hover{border-color:var(--primary);}
body.page-admin-promotions .type-tab.selected{border-color:var(--primary);background:#FFF5F0;}
body.page-admin-promotions .type-tab .t-icon{font-size:26px;margin-bottom:5px;}
body.page-admin-promotions .type-tab .t-label{font-size:13px;font-weight:700;}
body.page-admin-promotions .type-tab .t-desc{font-size:11px;color:#aaa;margin-top:2px;}

/* ── Config Sections ── */
body.page-admin-promotions .config-section{background:#F8F9FA;border-radius:12px;padding:18px 20px;border:1.5px solid var(--border);}
body.page-admin-promotions .config-title{font-size:13px;font-weight:700;color:#555;margin-bottom:14px;display:flex;align-items:center;gap:6px;}

/* ── BXGY Presets ── */
body.page-admin-promotions .preset-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
body.page-admin-promotions .preset-btn{padding:6px 14px;border-radius:20px;border:2px solid #E67E22;background:#fff;color:#E67E22;font-size:13px;font-weight:700;cursor:pointer;font-family:'Prompt',sans-serif;transition:.15s;}
body.page-admin-promotions .preset-btn:hover,body.page-admin-promotions .preset-btn.active-preset{background:#E67E22;color:#fff;}
body.page-admin-promotions .bxgy-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
body.page-admin-promotions .bxgy-row span{font-size:14px;font-weight:600;color:#555;white-space:nowrap;}
body.page-admin-promotions .num-input{width:80px!important;}

/* ── Time Presets ── */
body.page-admin-promotions .time-presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
body.page-admin-promotions .time-btn{padding:5px 12px;border-radius:16px;border:1.5px solid #E74C3C;background:#fff;color:#E74C3C;font-size:12px;font-weight:600;cursor:pointer;font-family:'Prompt',sans-serif;transition:.15s;}
body.page-admin-promotions .time-btn:hover{background:#E74C3C;color:#fff;}
body.page-admin-promotions .time-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
body.page-admin-promotions .time-row span{font-size:14px;font-weight:600;color:#555;}

/* ── Promo Cards (List) ── */
body.page-admin-promotions .promo-card{background:var(--card);border-radius:14px;overflow:hidden;border:2px solid var(--border);margin-bottom:14px;transition:.2s;}
body.page-admin-promotions .promo-card:hover{box-shadow:0 4px 20px rgba(0,0,0,0.09);}
body.page-admin-promotions .promo-head{padding:14px 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
body.page-admin-promotions .promo-type-badge{padding:5px 12px;border-radius:20px;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;white-space:nowrap;}
body.page-admin-promotions .badge-percent{background:linear-gradient(135deg,#9B59B6,#8E44AD);}
body.page-admin-promotions .badge-bxgy   {background:linear-gradient(135deg,#E67E22,#D35400);}
body.page-admin-promotions .badge-bundle {background:linear-gradient(135deg,#3498DB,#2980B9);}
body.page-admin-promotions .badge-fixed  {background:linear-gradient(135deg,#27AE60,#229954);}
body.page-admin-promotions .badge-hotsale{background:linear-gradient(135deg,#E74C3C,#C0392B);}
body.page-admin-promotions .promo-name{font-weight:700;font-size:15px;flex:1;min-width:120px;}
body.page-admin-promotions .promo-status{padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;flex-shrink:0;white-space:nowrap;}
body.page-admin-promotions .promo-body{padding:0 18px 14px;font-size:13px;color:#636E72;}
body.page-admin-promotions .promo-foot{padding:10px 18px;background:#f9f9f9;border-top:1px solid var(--border);display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
body.page-admin-promotions .date-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#636E72;background:#F0F2F5;padding:4px 10px;border-radius:8px;}
body.page-admin-promotions .hot-time-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;background:#FFF0F0;color:#E74C3C;padding:5px 12px;border-radius:8px;border:1px solid #FFCDD2;}

/* ── Menu Selector ── */
body.page-admin-promotions .menu-search-wrap{position:relative;margin-bottom:8px;}
body.page-admin-promotions .menu-search-wrap input{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:10px;font-family:'Prompt',sans-serif;font-size:13px;outline:none;}
body.page-admin-promotions .menu-search-wrap input:focus{border-color:var(--primary);}
body.page-admin-promotions .menu-items-list{max-height:250px;overflow-y:auto;border:1.5px solid var(--border);border-radius:10px;}
body.page-admin-promotions .menu-item-check{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;border-bottom:1px solid #f9f9f9;transition:.15s;}
body.page-admin-promotions .menu-item-check:hover{background:#FFF5F0;}
body.page-admin-promotions .menu-item-check input[type=checkbox]{width:16px;height:16px;accent-color:var(--primary);flex-shrink:0;}
body.page-admin-promotions .menu-item-check .item-info{flex:1;min-width:0;}
body.page-admin-promotions .menu-item-check .item-name{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
body.page-admin-promotions .menu-item-check .item-meta{font-size:11px;color:#aaa;}
body.page-admin-promotions .selected-count{font-size:12px;color:var(--primary);font-weight:600;margin-top:6px;}

/* ── Alerts ── */
body.page-admin-promotions .inline-alert{border-radius:10px;padding:11px 14px;font-size:13px;display:flex;align-items:center;gap:8px;margin-bottom:16px;}
body.page-admin-promotions .alert-success{background:#E8F8F5;color:#00695C;border:1.5px solid #B2DFDB;}
body.page-admin-promotions .alert-error  {background:#FEF0F0;color:#C62828;border:1.5px solid #FFCDD2;}
body.page-admin-promotions .empty-state{text-align:center;padding:60px 20px;color:#aaa;}
body.page-admin-promotions .empty-state .icon{font-size:48px;margin-bottom:12px;opacity:.4;}

/* ---- admin/tables.php ---- */
body.page-admin-tables { background:var(--bg); display:flex; }
/* sidebar styles loaded from admin/index.php shared CSS */
body.page-admin-tables .sidebar { width:230px; background:var(--secondary); flex-shrink:0; min-height:100vh; overflow-y:auto; display:flex; flex-direction:column; }
body.page-admin-tables .sidebar-logo { padding:20px 18px; border-bottom:1px solid rgba(255,255,255,0.08); }
body.page-admin-tables .sidebar-logo .name { color:#fff; font-weight:700; font-size:16px; }
body.page-admin-tables .sidebar-logo .sub  { color:rgba(255,255,255,0.4); font-size:11px; margin-top:2px; }
body.page-admin-tables .nav-item a { display:flex; align-items:center; gap:10px; padding:12px 20px; color:rgba(255,255,255,0.65); text-decoration:none; font-size:14px; font-weight:500; transition:all 0.2s; }
body.page-admin-tables .nav-item a:hover,body.page-admin-tables .nav-item a.active { background:rgba(255,255,255,0.1); color:#fff; }
body.page-admin-tables .nav-item a.active { border-left:3px solid var(--primary); padding-left:17px; }
body.page-admin-tables .nav-section { padding:12px 20px 4px; font-size:10px; color:rgba(255,255,255,0.3); letter-spacing:1px; font-weight:600; }
body.page-admin-tables .main-area { flex:1; padding:24px; overflow-y:auto; }
body.page-admin-tables .page-title { font-size:22px; font-weight:700; margin-bottom:20px; }
body.page-admin-tables .card-panel { background:#fff; border-radius:16px; padding:22px; box-shadow:0 2px 12px rgba(0,0,0,0.06); margin-bottom:20px; }
body.page-admin-tables .floor-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
body.page-admin-tables .floor-badge { background:#FF6B35; color:#fff; border-radius:8px; padding:4px 14px; font-size:13px; font-weight:700; }
body.page-admin-tables .table-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
body.page-admin-tables .t-card { background:#F8F9FA; border-radius:12px; padding:14px 16px; border:1.5px solid #E9ECEF; display:flex; align-items:center; gap:12px; transition:.2s; }
body.page-admin-tables .t-card:hover { border-color:#FF6B35; background:#FFF5F0; }
body.page-admin-tables .t-card.occupied { border-color:#27AE60; background:#F0FFF4; }
body.page-admin-tables .t-num { font-size:22px; font-weight:800; color:#1A1D2E; }
body.page-admin-tables .t-info { flex:1; min-width:0; }
body.page-admin-tables .t-cap { font-size:12px; color:#636E72; }
body.page-admin-tables .t-actions { display:flex; gap:5px; }
body.page-admin-tables .t-btn { border:none; border-radius:6px; padding:5px 8px; font-size:11px; font-weight:600; cursor:pointer; font-family:'Prompt',sans-serif; }
body.page-admin-tables .t-btn-edit { background:#EBF5FB; color:#2980B9; }
body.page-admin-tables .t-btn-del  { background:#FEF0F0; color:#D63031; }
body.page-admin-tables .t-btn-del:disabled { opacity:.4; cursor:not-allowed; }
body.page-admin-tables .stats-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:22px; }
body.page-admin-tables .stat-c { background:#fff; border-radius:12px; padding:14px 16px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,.05); border:1.5px solid #E9ECEF; }
body.page-admin-tables .stat-c .n { font-size:26px; font-weight:800; }
body.page-admin-tables .stat-c .l { font-size:11px; color:#aaa; margin-top:3px; }
body.page-admin-tables .inline-alert { border-radius:10px; padding:11px 14px; font-size:13px; display:flex; align-items:center; gap:8px; margin-bottom:16px; }
body.page-admin-tables .alert-success { background:#E8F8F5; color:#00695C; border:1.5px solid #B2DFDB; }
body.page-admin-tables .alert-error   { background:#FEF0F0; color:#C62828; border:1.5px solid #FFCDD2; }
/* Modal */
body.page-admin-tables .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:800; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:.25s; }
body.page-admin-tables .modal-overlay.show { opacity:1; pointer-events:all; }
body.page-admin-tables .modal-box { background:#fff; border-radius:20px; padding:28px; width:100%; max-width:400px; transform:scale(.92); transition:.25s; }
body.page-admin-tables .modal-overlay.show .modal-box { transform:scale(1); }
body.page-admin-tables .modal-title { font-size:17px; font-weight:700; margin-bottom:20px; }
body.page-admin-tables .modal-close { float:right; background:none; border:none; font-size:20px; cursor:pointer; color:#aaa; }
body.page-admin-tables .form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
body.page-admin-tables .field-wrap { margin-bottom:14px; }
body.page-admin-tables .field-wrap label { display:block; font-size:12px; font-weight:700; color:#444; margin-bottom:5px; }
body.page-admin-tables .modal-btn { width:100%; padding:13px; border:none; border-radius:12px; font-family:'Prompt',sans-serif; font-size:15px; font-weight:700; cursor:pointer; }
body.page-admin-tables .modal-btn-primary { background:linear-gradient(135deg,#FF6B35,#E55A24); color:#fff; margin-bottom:8px; }
body.page-admin-tables .modal-btn-cancel  { background:#F0F2F5; color:#636E72; }

/* ---- admin/qz_cert.php ---- */
body.page-admin-qz-cert, body.page-admin-qz-cert * { font-family: 'Prompt', sans-serif; } body.page-admin-qz-cert { background: #F0F2F5; padding: 40px 20px; }

/* ---- index.php receipt popup ---- */
body.page-walkin-receipt-preview,
body.page-walkin-receipt-preview * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body.page-walkin-receipt-preview {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  padding: 12px;
  max-width: 300px;
  margin: auto;
  background: #fff;
  color: #000;
}
body.page-walkin-receipt-preview .c { text-align: center; }
body.page-walkin-receipt-preview .b { font-weight: 700; }
body.page-walkin-receipt-preview .row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}
body.page-walkin-receipt-preview .sub {
  font-size: 11px;
  color: #555;
}
body.page-walkin-receipt-preview hr {
  border: none;
  border-top: 1px dashed #ccc;
  margin: 6px 0;
}

/* ---- order.php error pages ---- */
body.page-order-error,
body.page-order-error * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body.page-order-error {
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #f5f5f5;
  padding: 16px;
  color: #333;
}
body.page-order-error .card {
  background: #fff;
  border-radius: 16px;
  padding: clamp(24px, 8vw, 48px);
  text-align: center;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
body.page-order-error .icon {
  font-size: clamp(48px, 15vw, 80px);
  margin-bottom: 16px;
}
body.page-order-error .title {
  font-size: clamp(18px, 5vw, 26px);
  font-weight: 700;
  color: #333;
  margin-bottom: 8px;
}
body.page-order-error.is-expired .title {
  color: #e53935;
}
body.page-order-error .desc {
  font-size: clamp(13px, 3.5vw, 16px);
  color: #666;
  line-height: 1.6;
}