/* ============================================================
   GRANDSUITE POS — PREMIUM HOSPITALITY MANAGEMENT SYSTEM
   Upgraded UI: Glassmorphism + Premium Dark Mode Design
   ============================================================ */

/* === DESIGN TOKENS === */
:root {
  /* Backgrounds — professional deep dark, less saturated blue */
  --bg-0: #0d1117;
  --bg-1: #161b22;
  --bg-2: #1c2128;
  --bg-3: #21262d;
  --bg-card: #161b22;
  --bg-glass: #1c2128;
  --border: #30363d;
  --border-hover: rgba(0,176,155,0.45);

  /* Brand teal */
  --teal: #001619;
  --teal-light: #00cfb5;
  --teal-dark: #008a78;
  --teal-glow: rgba(0,176,155,0.22);
  --accent: #6366f1;
  --accent-light: #818cf8;

  /* Semantic */
  --green: #001619;
  --red: #f85149;
  --orange: #e3b341;
  --blue: #58a6ff;
  --purple: #bc8cff;
  --pink: #ff7b72;

  /* Text — calibrated for WCAG AA contrast on dark backgrounds */
  --text-0: #e6edf3;
  --text-1: #8b949e;
  --text-2: #6e7681;
  --text-3: #3d444d;

  /* Layout */
  --sidebar-width: 260px;
  --topbar-height: 58px;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 18px rgba(0,0,0,0.55);
  --shadow-lg: 0 8px 36px rgba(0,0,0,0.65);
  --shadow-teal: 0 4px 20px rgba(0,176,155,0.28);

  --transition: 0.18s ease;
}

body.theme-light {
  --bg-0: #f1f5f9;
  --bg-1: #ffffff;
  --bg-2: #f8fafc;
  --bg-3: #e2e8f0;
  --bg-card: #ffffff;
  --bg-glass: #ffffff;
  --border: #cbd5e1;
  --border-hover: #94a3b8;
  --text-0: #001619;
  --text-1: #0f172a;
  --text-2: #334155;
  --text-3: #64748b;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
}

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--bg-0);
  color: var(--text-0);
  height: 100vh;
  overflow: hidden;
  display: flex;
  font-size: 14px;
  line-height: 1.5;
}

/* === LAYOUT === */
.main-wrapper {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  transition: margin-left var(--transition);
}

body.sidebar-collapsed .main-wrapper { margin-left: 64px; }
body.sidebar-collapsed .sidebar { width: 64px; }
body.sidebar-collapsed .sidebar .brand-info,
body.sidebar-collapsed .sidebar .sidebar-section-label,
body.sidebar-collapsed .sidebar-nav span,
body.sidebar-collapsed .sidebar .staff-info,
body.sidebar-collapsed .sidebar .nav-badge { display: none; }
body.sidebar-collapsed .sidebar .brand-logo { margin: 0 auto; }
body.sidebar-collapsed .sidebar-brand { justify-content: center; }
body.sidebar-collapsed .staff-chip { justify-content: center; padding: 12px 0; }

/* === OPT MANAGER MILESTONE 3: 3-ZONE POS WORKSPACE STYLES === */
.opt-pos-workspace {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--bg-0);
  color: var(--text-0);
  overflow: hidden;
}

.opt-pos-header {
  height: 48px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  gap: 16px;
}

.opt-pos-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.opt-pos-logo {
  font-size: 16px;
  font-weight: 800;
  color: var(--teal-light);
}

.opt-dept-dropdown {
  background: var(--bg-2);
  color: #ffffff;
  border: 1px solid var(--teal);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}

.opt-pos-header-mid {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
}

.opt-pos-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
}

.opt-shift-badge {
  background: rgba(99, 102, 241, 0.2);
  color: #818cf8;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(99, 102, 241, 0.4);
}

.opt-clock {
  font-family: monospace;
  font-weight: 700;
  color: var(--teal-light);
}

/* 3-ZONE LAYOUT CONTAINER */
.opt-pos-3zone {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ZONE 1: LEFT ENTITIES PANEL */
.opt-zone-left {
  width: 280px;
  background: var(--bg-1);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}

.opt-zone-title {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 800;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.opt-area-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
}

.opt-area-btn {
  background: var(--bg-2);
  color: var(--text-1);
  border: 1px solid var(--border);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.opt-area-btn.active {
  background: var(--teal);
  color: #ffffff;
  border-color: var(--teal-light);
}

.opt-entity-grid {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 8px;
  align-content: start;
}

.opt-entity-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 6px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.1s, border-color 0.1s;
  user-select: none;
}

.opt-entity-card:hover {
  transform: translateY(-2px);
  border-color: var(--teal);
}

.opt-entity-card.available {
  border-left: 4px solid var(--green);
}

.opt-entity-card.occupied {
  border-left: 4px solid var(--blue);
  background: rgba(59, 130, 246, 0.12);
}

.opt-entity-card.ordered {
  border-left: 4px solid var(--orange);
  background: rgba(245, 158, 11, 0.12);
}

.opt-entity-card.bill_requested {
  border-left: 4px solid #eab308;
  background: rgba(234, 179, 8, 0.15);
}

.opt-entity-card.active-order {
  box-shadow: 0 0 0 2px var(--teal);
}

.opt-entity-name {
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
}

.opt-entity-sub {
  font-size: 10px;
  color: var(--text-2);
  margin-top: 2px;
}

.opt-entity-amount {
  font-size: 11px;
  font-weight: 800;
  color: var(--green);
  margin-top: 4px;
}

/* ZONE 2: CENTER MENU & PRODUCT GRID */
.opt-zone-center {
  flex: 1;
  background: var(--bg-0);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
}

.opt-menu-search-bar {
  padding: 8px 12px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 8px;
  align-items: center;
}

.opt-menu-search-bar input {
  flex: 1;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
}

.opt-search-clear {
  background: transparent;
  border: none;
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
}

.opt-category-bar {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.opt-cat-btn {
  background: var(--bg-2);
  color: var(--text-1);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.opt-cat-btn.active {
  background: #f97316;
  color: #ffffff;
  border-color: #fb923c;
}

.opt-product-grid {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  align-content: start;
}

.opt-prod-tile {
  background: #001619;
  color: #ffffff;
  border-radius: 8px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 90px;
  cursor: pointer;
  transition: transform 0.1s, background 0.1s;
  box-shadow: var(--shadow-sm);
  user-select: none;
}

.opt-prod-tile:hover {
  transform: translateY(-2px);
  background: #001619;
}

.opt-prod-tile:active {
  transform: scale(0.96);
}

.opt-prod-name {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.opt-prod-price {
  font-size: 14px;
  font-weight: 900;
  color: #fef08a;
  text-align: right;
  margin-top: 8px;
}

/* ZONE 3: RIGHT ACTIVE ORDER PANEL */
.opt-zone-right {
  width: 340px;
  background: var(--bg-1);
  display: flex;
  flex-direction: column;
}

.opt-active-order-header {
  padding: 12px 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}

.opt-order-num {
  font-size: 15px;
  font-weight: 900;
  color: var(--teal-light);
}

.opt-order-badge {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
}

.opt-order-items-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.opt-cart-item-row {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 6px;
}

.opt-cart-item-top {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
}

.opt-cart-item-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.opt-qty-btn {
  background: var(--bg-3);
  color: #ffffff;
  border: 1px solid var(--border);
  width: 24px;
  height: 24px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.opt-qty-btn:hover {
  background: var(--teal);
}

.opt-remove-btn {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
  width: 24px;
  height: 24px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}

.opt-order-summary-box {
  padding: 10px 14px;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  font-size: 12px;
}

.opt-summary-line {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  color: var(--text-1);
}

.opt-total-line {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  font-weight: 900;
  border-top: 1px solid var(--border);
  padding-top: 6px;
  margin-top: 4px;
}

.opt-order-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  padding: 10px;
  background: var(--bg-1);
  border-top: 1px solid var(--border);
}

.opt-btn-action {
  padding: 10px 6px;
  border-radius: 6px;
  font-weight: 900;
  font-size: 12px;
  border: none;
  cursor: pointer;
  text-align: center;
  color: #ffffff;
}

.opt-btn-hold { background: #0284c7; }
.opt-btn-send { background: #ea580c; }
.opt-btn-pay { background: #001619; font-size: 13px; }

/* === FULLY HIDDEN SIDE DASHBOARD STATE === */
body.sidebar-hidden .sidebar,
.sidebar.hidden {
  display: none !important;
}

body.sidebar-hidden .main-wrapper,
.sidebar.hidden + .main-wrapper,
.sidebar.hidden ~ .main-wrapper {
  margin-left: 0 !important;
  width: 100vw !important;
}

/* === SIDEBAR === */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 200;
  transition: width var(--transition);
  overflow: hidden;  /* outer container clips; inner scrolls */
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--border);
}

.brand-logo-img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: #ffffff;
  padding: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  flex-shrink: 0;
}

.login-brand-logo-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: #ffffff;
  padding: 4px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}

.cds-brand-logo-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: var(--radius-lg);
  background: #ffffff;
  padding: 6px;
  margin-bottom: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.brand-title {
  font-family: 'Outfit', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.3px;
  background: linear-gradient(90deg, var(--teal-light), var(--accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-tagline { font-size: 11px; color: var(--text-2); }

.sidebar-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--text-2);
  padding: 10px 18px 4px;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Scrollable nav area — sits between brand and footer */
.sidebar-nav-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  padding-bottom: 8px;
}
.sidebar-nav-scroll::-webkit-scrollbar { width: 4px; }
.sidebar-nav-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: all var(--transition);
  position: relative;
  white-space: nowrap;
}

.nav-item svg { flex-shrink: 0; width: 18px; height: 18px; }

.nav-item:hover {
  background: var(--bg-glass);
  color: var(--text-0);
}

.nav-item.active {
  background: var(--teal-glow);
  color: var(--teal-light);
  font-weight: 600;
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--teal);
  border-radius: 0 4px 4px 0;
}

.nav-badge {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  min-width: 20px;
  text-align: center;
}

.nav-badge.warning { background: var(--orange); }

.nav-indicator { display: none; }

.sidebar-footer {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--border);
}

.staff-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--bg-glass);
  border: 1px solid var(--border);
}

.staff-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--teal), var(--accent));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.staff-name { font-size: 13px; font-weight: 600; display: block; }
.staff-role { font-size: 11px; color: var(--text-2); display: block; }
.staff-info { flex: 1; min-width: 0; }

/* === TOP BAR === */
.app-topbar {
  height: var(--topbar-height);
  background: var(--bg-card);
  backdrop-filter: none;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  z-index: 100;
  flex-shrink: 0;
}

.topbar-title {
  font-size: 16px;
  font-weight: 700;
  flex: 1;
}

.topbar-actions { display: flex; align-items: center; gap: 10px; }

.topbar-btn {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text-1);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  position: relative;
}

.topbar-btn:hover { background: var(--border); color: var(--text-0); }

.notif-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  border: 1.5px solid var(--bg-1);
  display: none;
}

.notif-dot.visible { display: block; }

.currency-select {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--teal);
  font-weight: 700;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: var(--radius-full);
  outline: none;
  cursor: pointer;
}

.shift-status {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  color: var(--green);
}

.shift-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

.shift-dot.pulse {
  animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
  50% { box-shadow: 0 0 0 5px rgba(16,185,129,0); }
}

.btn-sidebar-toggle {
  background: transparent;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

/* === NOTIFICATIONS PANEL === */
.notif-panel {
  position: fixed;
  top: var(--topbar-height);
  right: -400px;
  width: 380px;
  bottom: 0;
  background: var(--bg-card);
  backdrop-filter: none;
  border-left: 1px solid var(--border);
  z-index: 300;
  transition: right 0.25s ease;
  display: flex;
  flex-direction: column;
}

.notif-panel.open { right: 0; }

.notif-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

#notif-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }

.notif-item {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  gap: 10px;
  border-left: 3px solid var(--teal);
}

.notif-item.danger { border-left-color: var(--red); }
.notif-item.warning { border-left-color: var(--orange); }

.notif-icon { font-size: 18px; width: 20px; }
.notif-text { flex: 1; min-width: 0; }
.notif-title { font-weight: 600; font-size: 13px; color: var(--text-0); }
.notif-desc { font-size: 12px; color: var(--text-1); margin-top: 2px; line-height: 1.4; }

/* Dismiss button per notification */
.notif-dismiss-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--radius-xs);
  transition: color var(--transition), background var(--transition);
  align-self: flex-start;
  margin-top: -2px;
}
.notif-dismiss-btn:hover { color: var(--text-0); background: var(--bg-glass); }

/* Clear All button in panel header */
.notif-clear-all-btn {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-1);
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 3px 8px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.notif-clear-all-btn:hover { color: var(--red); border-color: var(--red); }

/* Dismiss animation */
.notif-item.notif-dismissing {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Empty state */
.notif-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  padding: 60px 20px;
  color: var(--text-2);
  font-size: 13px;
  text-align: center;
}

/* === CONTENT AREA === */
.content-area {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.tab-module {
  position: absolute;
  inset: 0;
  display: none;
  overflow-y: auto;
}

.tab-module.active { display: flex; flex-direction: column; }

/* === TOAST NOTIFICATIONS === */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  min-width: 280px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  box-shadow: var(--shadow-lg);
  animation: toast-in 0.3s ease;
  border-left: 4px solid var(--teal);
}

.toast.success { border-left-color: var(--green); }
.toast.error { border-left-color: var(--red); }
.toast.warning { border-left-color: var(--orange); }

@keyframes toast-in {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* === COMMON COMPONENTS === */
.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 24px 16px;
}

.module-header h1 { font-size: 22px; font-weight: 700; }
.module-sub { font-size: 13px; color: var(--text-2); margin-top: 2px; }

.panel-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.panel-topbar h2 { font-size: 18px; font-weight: 700; }

.split-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  height: 100%;
  overflow: hidden;
}

.side-panel {
  background: var(--bg-1);
  border-right: 1px solid var(--border);
  padding: 20px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.side-panel h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.main-panel {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.set-section {
  display: none;
}

.set-section.active {
  display: block;
}

/* Side Menus */
.side-menu { list-style: none; display: flex; flex-direction: column; gap: 2px; }

.side-menu li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  transition: all var(--transition);
}

.side-menu li:hover { background: var(--bg-glass); color: var(--text-0); }

.side-menu li.active {
  background: var(--teal-glow);
  color: var(--teal-light);
  font-weight: 600;
}

.side-menu li svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Acc/HR/BO sections */
.acc-section, .hr-section, .bo-section { display: none; }
.acc-section.active, .hr-section.active, .bo-section.active { display: block; }

/* Buttons */
.btn-primary {
  background: var(--teal);
  color: #fff;
  border: none;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition);
}

.btn-primary:hover { background: var(--teal-light); box-shadow: var(--shadow-teal); }
.btn-primary.full-width { width: 100%; justify-content: center; }

.btn-ghost {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text-1);
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition);
}

.btn-ghost:hover { background: var(--border); color: var(--text-0); }

.btn-charge {
  background: linear-gradient(135deg, var(--teal) 0%, var(--accent) 100%);
  color: #fff;
  border: none;
  padding: 13px 20px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  grid-column: 1 / -1;
  transition: all var(--transition);
  box-shadow: 0 4px 20px rgba(0,176,155,0.3);
}

.btn-charge:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(0,176,155,0.4); }

.icon-btn-sm {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text-1);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.icon-btn-sm:hover { background: var(--border); color: var(--text-0); }
.icon-btn-sm.danger:hover { background: rgba(239,68,68,0.15); color: var(--red); border-color: rgba(239,68,68,0.3); }
.icon-btn-sm svg { width: 15px; height: 15px; }

/* Form Elements */
.form-control {
  width: 100%;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text-0);
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  outline: none;
  font-size: 13px;
  font-family: inherit;
  transition: border-color var(--transition);
}

.form-control:focus { border-color: var(--teal); }
.form-control.lg-input { padding: 13px 14px; font-size: 15px; }
.form-control textarea { resize: vertical; }

.form-group { margin-bottom: 14px; }
.form-group:last-child { margin-bottom: 0; }

.field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}

.form-group label {
  display: block;
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 4px;
  font-weight: 500;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.form-row .form-group { margin-bottom: 0; }

/* Data Tables */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  backdrop-filter: none;
}

.data-table th, .data-table td {
  padding: 11px 16px;
  text-align: left;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}

.data-table th {
  background: rgba(255,255,255,0.03);
  color: var(--text-2);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.data-table tr:hover td { background: var(--bg-glass); }
.data-table tr:last-child td { border-bottom: none; }

/* Metrics Grid */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.metric-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  backdrop-filter: none;
  transition: transform var(--transition);
}

.metric-card:hover { transform: translateY(-2px); }

.metric-label { font-size: 12px; color: var(--text-2); font-weight: 500; }
.metric-val { font-size: 24px; font-weight: 800; margin: 6px 0; font-family: 'Outfit', sans-serif; }
.metric-trend { font-size: 11px; font-weight: 600; }
.metric-trend.green { color: var(--green); }
.metric-trend.blue { color: var(--blue); }
.metric-trend.red { color: var(--red); }

/* Badge / Pills */
.badge-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

.badge-pill.teal { background: var(--teal-glow); color: var(--teal-light); }

/* Status Badges (inline) */
.status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.status-badge.available { background: rgba(16,185,129,0.15); color: var(--green); }
.status-badge.occupied { background: rgba(59,130,246,0.15); color: var(--blue); }
.status-badge.reserved { background: rgba(245,158,11,0.15); color: var(--orange); }
.status-badge.dirty { background: rgba(239,68,68,0.15); color: var(--red); }
.status-badge.paid { background: rgba(16,185,129,0.15); color: var(--green); }
.status-badge.unpaid { background: rgba(239,68,68,0.15); color: var(--red); }
.status-badge.pending { background: rgba(245,158,11,0.15); color: var(--orange); }
.status-badge.approved { background: rgba(99,102,241,0.15); color: var(--accent-light); }

.text-green { color: var(--green) !important; }
.text-red { color: var(--red) !important; }
.text-teal { color: var(--teal) !important; }
.text-orange { color: var(--orange) !important; }

/* ======================== POS REGISTER ======================== */
.pos-layout, .pos-layout-main {
  display: grid;
  grid-template-columns: 1fr 380px;
  height: 100%;
  flex: 1;
  overflow: hidden;
}

.pos-catalog {
  display: flex;
  flex-direction: column;
  background: var(--bg-0);
  border-right: 1px solid var(--border);
}

.catalog-header {
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
}

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  padding: 9px 13px;
  border-radius: var(--radius-sm);
  transition: border-color var(--transition);
}

.search-box:focus-within { border-color: var(--teal); }

.search-box input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-0);
  font-size: 14px;
  width: 100%;
}

.search-box svg { color: var(--text-2); flex-shrink: 0; width: 16px; height: 16px; }

.search-kbd {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.view-toggles {
  display: flex;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 2px;
}

.btn-toggle {
  background: transparent;
  border: none;
  color: var(--text-2);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.btn-toggle svg { width: 16px; height: 16px; }
.btn-toggle.active { background: var(--bg-2); color: var(--teal); }

/* Category Bar */
.category-bar {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  overflow-x: auto;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}

.category-bar::-webkit-scrollbar { display: none; }

.chip {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 5px 14px;
  border-radius: var(--radius-full);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
}

.chip:hover { color: var(--text-0); border-color: rgba(255,255,255,0.15); }
.chip.active { background: var(--teal); color: #fff; border-color: var(--teal); }

/* Items Grid */
.items-container {
  flex: 1;
  padding: 14px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.items-container.grid-mode {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 10px;
  align-content: start;
}

.items-container.list-mode { display: flex; flex-direction: column; gap: 6px; }

.item-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 120px;
  backdrop-filter: none;
}

.item-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.item-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.item-card:active { transform: scale(0.98); }

.item-name {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 4px;
}

.item-meta { display: flex; justify-content: space-between; align-items: flex-end; }
.item-price { font-weight: 700; color: var(--teal-light); font-size: 14px; }
.item-stock { font-size: 10px; color: var(--text-2); }

/* Ticket Pane */
.pos-ticket-pane {
  background: var(--bg-1);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ticket-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.ticket-id {
  font-size: 15px;
  font-weight: 700;
}

.link-btn {
  background: none;
  border: none;
  color: var(--teal);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  margin-top: 3px;
}

.ticket-actions { display: flex; gap: 4px; }

/* Loyalty Bar */
.loyalty-bar {
  background: linear-gradient(90deg, rgba(0,176,155,0.12), rgba(99,102,241,0.08));
  border-bottom: 1px solid rgba(0,176,155,0.2);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.loyalty-avatar {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--teal), var(--accent));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.loyalty-info { flex: 1; }
.loyalty-info span { font-size: 13px; font-weight: 600; display: block; }
.loyalty-info small { font-size: 11px; color: var(--teal); }

.btn-redeem {
  background: var(--teal);
  color: #fff;
  border: none;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

/* Cart Items */
.ticket-items-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.empty-cart {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  gap: 8px;
}

.empty-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: var(--bg-glass);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.empty-icon svg { width: 22px; height: 22px; }

.cart-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
}

.cart-item-row:hover { background: var(--bg-glass); }

.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-weight: 600; font-size: 13px; }
.cart-item-mods { font-size: 11px; color: var(--text-2); margin-top: 2px; }

.cart-item-controls { display: flex; align-items: center; gap: 6px; }

.qty-btn {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-0);
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.qty-btn:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.qty-val { font-size: 13px; font-weight: 700; width: 22px; text-align: center; }
.cart-item-price { font-weight: 700; font-size: 14px; min-width: 60px; text-align: right; }

/* Ticket Summary */
.ticket-summary {
  padding: 14px 16px;
  background: var(--bg-0);
  border-top: 1px solid var(--border);
}

.summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-2);
  padding: 4px 0;
}

.summary-line.total-line {
  color: var(--text-0);
  font-weight: 700;
  font-size: 17px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.text-btn {
  background: none;
  border: none;
  color: var(--red);
  font-size: 11px;
  cursor: pointer;
}

.ticket-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

/* ======================== FLOOR & TABLES ======================== */
.floor-zone-tabs {
  display: flex;
  gap: 6px;
  background: var(--bg-card);
  padding: 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.zone-btn {
  background: transparent;
  border: none;
  color: var(--text-2);
  padding: 7px 14px;
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}

.zone-btn.active { background: var(--teal); color: #fff; }

.tables-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 0 24px 24px;
}

.table-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  cursor: pointer;
  transition: all var(--transition);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  backdrop-filter: none;
  position: relative;
  overflow: hidden;
}

.table-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.table-card.vacant::after { background: var(--green); }
.table-card.occupied::after { background: var(--blue); }

.table-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-hover); }

.table-name { font-family: 'Outfit', sans-serif; font-size: 20px; font-weight: 700; }
.table-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-full); text-transform: uppercase; }
.table-header-row { display: flex; justify-content: space-between; align-items: center; }
.table-info { margin-top: 12px; font-size: 13px; color: var(--text-2); }

/* ======================== KDS ======================== */
.kds-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
}

.kds-title { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; }

.kds-filters { display: flex; gap: 6px; }

.kds-filter {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--transition);
}

.kds-filter.active { background: var(--teal); color: #fff; border-color: var(--teal); }
.kds-clock { margin-left: auto; font-size: 22px; font-weight: 700; font-family: 'Outfit', monospace; color: var(--teal); }

.kds-orders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 16px;
  padding: 20px;
}

.kds-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  backdrop-filter: none;
  transition: all var(--transition);
}

.kds-card:hover { border-color: var(--border-hover); }

.kds-card-head {
  padding: 12px 16px;
  background: rgba(255,255,255,0.03);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
}

.kds-timer {
  font-weight: 700;
  font-size: 13px;
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

.kds-timer.green { background: rgba(16,185,129,0.15); color: var(--green); }
.kds-timer.red { background: rgba(239,68,68,0.15); color: var(--red); }
.kds-timer.orange { background: rgba(245,158,11,0.15); color: var(--orange); }

.kds-card-body { padding: 14px; flex: 1; }
.kds-item { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.kds-mod { font-size: 11px; color: var(--teal); margin-top: -4px; margin-bottom: 8px; }

.kds-card-foot { padding: 12px; border-top: 1px solid var(--border); }

.btn-kds-done {
  width: 100%;
  background: var(--green);
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  cursor: pointer;
  font-size: 13px;
  transition: all var(--transition);
}

.btn-kds-done:hover { background: #0fa870; }

/* ======================== CDS ======================== */
.cds-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  height: 100%;
}

.cds-promo-panel {
  background: linear-gradient(145deg, #0f0c29, #302b63, #24243e);
  padding: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cds-brand-logo {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--teal), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: var(--shadow-teal);
}

.cds-brand-logo svg { width: 36px; height: 36px; color: #fff; }
.cds-promo-panel h2 { font-size: 28px; font-weight: 700; margin-bottom: 6px; }
.cds-promo-panel > p { color: var(--text-2); margin-bottom: 32px; }

.cds-promo-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 360px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.promo-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: rgba(0,176,155,0.15);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cds-order-panel {
  background: var(--bg-1);
  border-left: 1px solid var(--border);
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.cds-items { flex: 1; overflow-y: auto; margin: 16px 0; }

.cds-totals { border-top: 1px solid var(--border); padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.cds-total-row { display: flex; justify-content: space-between; font-size: 15px; }
.cds-total-row.grand { font-size: 24px; font-weight: 800; color: var(--teal); }

/* ======================== PMS HOTEL ======================== */
.room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.room-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  cursor: pointer;
  transition: all var(--transition);
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  backdrop-filter: none;
  position: relative;
  overflow: hidden;
}

.room-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.room-card.status-available::after { background: var(--green); }
.room-card.status-occupied::after { background: var(--blue); }
.room-card.status-reserved::after { background: var(--orange); }
.room-card.status-dirty::after { background: var(--red); }

.room-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.room-number { font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 800; }
.room-type-label { font-size: 11px; color: var(--text-2); margin-top: 2px; }
.room-guest-name { font-size: 13px; font-weight: 600; margin-top: 10px; }
.room-folio-val { font-size: 12px; color: var(--teal); font-weight: 700; margin-top: 2px; }

.room-card-head { display: flex; justify-content: space-between; align-items: flex-start; }

/* PMS Stats */
.stat-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }

.stat-tile {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  text-align: center;
}

.stat-num { font-size: 22px; font-weight: 800; font-family: 'Outfit', sans-serif; }
.stat-lbl { font-size: 11px; color: var(--text-2); }
.stat-tile.teal .stat-num { color: var(--teal); }
.stat-tile.green .stat-num { color: var(--green); }
.stat-tile.orange .stat-num { color: var(--orange); }

.legend-box { background: var(--bg-glass); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; }

.legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 6px; }
.dot-legend { width: 10px; height: 10px; border-radius: 3px; }
.dot-legend.available { background: var(--green); }
.dot-legend.occupied { background: var(--blue); }
.dot-legend.reserved { background: var(--orange); }
.dot-legend.dirty { background: var(--red); }

.tab-pills { display: flex; gap: 4px; background: var(--bg-glass); padding: 3px; border-radius: var(--radius-sm); border: 1px solid var(--border); }

.tab-pill {
  background: transparent;
  border: none;
  color: var(--text-2);
  padding: 6px 12px;
  border-radius: var(--radius-xs);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition);
}

.tab-pill.active { background: var(--teal); color: #fff; }

/* ======================== HOUSEKEEPING ======================== */
.hk-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 0 24px 20px;
}

.hk-board {
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.hk-column { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.hk-col-header {
  padding: 12px 16px;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hk-tasks { padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 80px; }

.hk-task-card {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 13px;
}

.hk-task-room { font-weight: 700; font-size: 14px; }
.hk-task-type { font-size: 12px; color: var(--text-2); }
.hk-task-staff { font-size: 12px; color: var(--teal); margin-top: 4px; }
.hk-task-priority { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: var(--radius-full); }
.hk-task-priority.high { background: rgba(245,158,11,0.15); color: var(--orange); }
.hk-task-priority.urgent { background: rgba(239,68,68,0.15); color: var(--red); }
.hk-task-priority.normal { background: rgba(16,185,129,0.15); color: var(--green); }

/* ======================== EVENTS ======================== */
.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  padding: 0 24px 24px;
}

.event-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  backdrop-filter: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all var(--transition);
}

.event-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.event-header { display: flex; justify-content: space-between; align-items: flex-start; }
.event-name { font-size: 16px; font-weight: 700; }
.event-client { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.event-meta { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2); }
.event-meta span { display: flex; align-items: center; gap: 6px; }
.event-price { font-size: 18px; font-weight: 800; color: var(--teal); }

/* ======================== ACCOUNTING ======================== */
.pnl-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-width: 720px;
  backdrop-filter: none;
}

.pnl-group-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border);
}

.pnl-group-title.green { color: var(--green); border-color: var(--green); }
.pnl-group-title.red { color: var(--red); border-color: var(--red); }
.pnl-group-title.orange { color: var(--orange); border-color: var(--orange); }

.pnl-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.pnl-row.subtotal {
  font-weight: 700;
  border-top: 1px solid var(--border);
  border-bottom: 2px solid var(--border);
  padding: 10px 0;
  font-size: 14px;
}

.pnl-row.subtotal.red strong { color: var(--red); }

.pnl-highlight {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-weight: 700;
}

.pnl-highlight.green { background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.2); }
.pnl-highlight.teal { background: var(--teal-glow); border: 1px solid rgba(0,176,155,0.3); }

.bs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.bs-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  backdrop-filter: none;
}

.bs-card h4 { font-size: 13px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; margin-bottom: 16px; }

/* ======================== EXPENSES ======================== */
.expense-metrics { margin: 0 24px 16px; }

/* ======================== REPORTS ======================== */
.reports-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 0 24px 24px;
}

.report-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  backdrop-filter: none;
}

.report-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 16px; }

.chart-bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; }

.chart-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}

.chart-bar {
  width: 100%;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  transition: height 0.5s ease;
  min-height: 4px;
}

.chart-bar-label { font-size: 10px; color: var(--text-2); }
.chart-bar-val { font-size: 10px; font-weight: 700; color: var(--teal); }

.rank-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.rank-item:last-child { border-bottom: none; }
.rank-num { font-size: 11px; color: var(--text-2); font-weight: 700; width: 20px; }
.rank-bar-wrap { flex: 1; margin: 0 10px; }
.rank-bar { height: 4px; border-radius: var(--radius-full); }

/* ======================== BACK OFFICE ======================== */
.bo-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 20px;
}

.bo-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  backdrop-filter: none;
}

.bo-panel h3 { font-size: 15px; font-weight: 700; margin-bottom: 12px; }

.item-rank-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.item-rank-list li { display: flex; justify-content: space-between; padding: 8px 0; font-size: 13px; border-bottom: 1px solid var(--border); }

.menu-mgmt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.menu-item-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all var(--transition);
}

.menu-item-card:hover { border-color: var(--border-hover); }
.menu-item-card .item-name-lbl { font-weight: 700; font-size: 14px; }
.menu-item-card .item-cat-lbl { font-size: 11px; color: var(--text-2); }
.menu-item-card .item-price-lbl { font-size: 16px; font-weight: 800; color: var(--teal); margin-top: 4px; }
.menu-item-card .item-actions { display: flex; gap: 6px; margin-top: 6px; }

/* ======================== HR ======================== */
.shift-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.shift-stat {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
}

.shift-stat span { font-size: 11px; color: var(--text-2); display: block; }
.shift-stat strong { font-size: 16px; font-weight: 700; }

/* ======================== MODALS ======================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: none;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-overlay.active { display: flex; }

.modal-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  width: 480px;
  max-width: 94vw;
  max-height: 90vh;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modal-in 0.2s ease;
}

.modal-card.modal-lg { width: 640px; }

@keyframes modal-in {
  from { transform: scale(0.95) translateY(10px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

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

.modal-hdr h3 { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }

.modal-close {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text-2);
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.modal-close:hover { background: var(--red); color: #fff; border-color: var(--red); }

.modal-bdy {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.modal-ftr {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: rgba(0,0,0,0.1);
}

/* Checkout Modal */
.checkout-total-box {
  background: linear-gradient(135deg, var(--teal-glow), rgba(99,102,241,0.1));
  border: 1px solid rgba(0,176,155,0.2);
  border-radius: var(--radius-lg);
  padding: 20px;
  text-align: center;
  margin-bottom: 20px;
}

.checkout-lbl { font-size: 12px; color: var(--text-2); display: block; margin-bottom: 4px; }
.checkout-amt { font-size: 36px; font-weight: 800; color: var(--teal); font-family: 'Outfit', sans-serif; }

.pay-methods-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.pay-method {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 13px 8px;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  transition: all var(--transition);
}

.pay-method:hover { border-color: var(--teal); color: var(--teal); }

.pay-method.active {
  background: var(--teal-glow);
  border-color: var(--teal);
  color: var(--teal-light);
}

.cash-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }

.cash-preset {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text-1);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: all var(--transition);
  flex: 1;
  min-width: 60px;
}

.cash-preset:hover { background: var(--teal-glow); color: var(--teal); border-color: var(--teal); }

.change-box {
  margin-top: 12px;
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--green);
  font-weight: 600;
}

.info-alert {
  background: rgba(59,130,246,0.1);
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: #60a5fa;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.room-preview {
  margin-top: 12px;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 13px;
}

/* Receipt */
.receipt-ticket {
  background: #fff;
  color: #000;
  font-family: 'Courier New', monospace;
  padding: 20px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.5;
}

.receipt-ticket h2 { text-align: center; font-size: 16px; margin-bottom: 4px; }
.receipt-ticket .receipt-sub { text-align: center; font-size: 11px; color: #666; margin-bottom: 14px; }
.receipt-line { display: flex; justify-content: space-between; margin-bottom: 4px; }
.receipt-divider { border-top: 1px dashed #999; margin: 10px 0; }

/* Payslip */
.payslip-wrap {
  background: #fff;
  color: #000;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.6;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
}

.payslip-header {
  background: #1a3a5c;
  color: #fff;
  padding: 16px;
  text-align: center;
}

.payslip-body { padding: 16px; }
.payslip-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #f0f0f0; }
.payslip-row.total { font-weight: bold; border-top: 2px solid #333; border-bottom: 2px solid #333; font-size: 14px; }
.payslip-row.green { color: green; }
.payslip-row.red { color: red; }

/* Utility */
.full-width { width: 100%; }
.checkout-bdy { display: flex; flex-direction: column; }

/* ============================================================
   BAR & RESTAURANT - ENHANCED POS STYLES
   ============================================================ */

/* Happy Hour Banner */
.happy-hour-banner {
  background: linear-gradient(90deg, rgba(245,158,11,0.2), rgba(236,72,153,0.15));
  border-bottom: 2px solid var(--orange);
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--orange);
  animation: hh-pulse 2s infinite;
}

@keyframes hh-pulse {
  0%, 100% { background: linear-gradient(90deg, rgba(245,158,11,0.2), rgba(236,72,153,0.15)); }
  50% { background: linear-gradient(90deg, rgba(245,158,11,0.28), rgba(236,72,153,0.22)); }
}

.happy-hour-banner svg { width: 16px; height: 16px; }
#happy-hour-countdown { margin-left: auto; font-family: 'Outfit', monospace; font-size: 14px; }

/* POS 3-Column Layout */
.pos-layout-main {
  display: grid;
  grid-template-columns: 1fr 360px;
  height: calc(100% - 0px);
  position: relative;
}

.pos-layout-main.tabs-open { grid-template-columns: 1fr 360px 280px; }

/* Quick Items Bar */
.quick-items-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(90deg, var(--bg-1), var(--bg-0));
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}

.quick-items-bar::-webkit-scrollbar { display: none; }

.quick-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}

#quick-items-list { display: flex; gap: 6px; }

.quick-item-btn {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text-1);
  padding: 5px 14px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
  border-left: 3px solid var(--teal);
}

.quick-item-btn:hover {
  background: var(--teal-glow);
  color: var(--teal-light);
  border-color: var(--teal);
}

/* Ticket Meta Bar */
.ticket-meta-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.ticket-meta-field { display: flex; flex-direction: column; }
.ticket-meta-field label { font-size: 10px; color: var(--text-2); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }
.ticket-meta-field .ticket-id { font-size: 14px; font-weight: 700; }

.ticket-select {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text-0);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  outline: none;
  cursor: pointer;
}

/* Cover count control */
.cover-control {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cover-btn {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text-0);
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  line-height: 1;
}

.cover-btn:hover { background: var(--teal); color: #fff; border-color: var(--teal); }

#covers-count { font-size: 15px; font-weight: 800; min-width: 20px; text-align: center; color: var(--teal); }

/* Course Bar */
.course-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}

.course-bar::-webkit-scrollbar { display: none; }
.course-label { font-size: 11px; font-weight: 700; color: var(--text-2); white-space: nowrap; }

.course-btns { display: flex; gap: 4px; }

.course-btn {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
}

.course-btn:hover { color: var(--text-0); }
.course-btn.active { background: var(--teal); color: #fff; border-color: var(--teal); }

/* Per-item action buttons in cart */
.cart-item-row { position: relative; }
.cart-item-row:hover .item-action-btns { opacity: 1; }

.item-action-btns {
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity var(--transition);
}

.item-action-btn {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  width: 22px;
  height: 22px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.item-action-btn:hover { background: var(--teal); color: #fff; border-color: var(--teal); }
.item-action-btn.danger:hover { background: var(--red); color: #fff; border-color: var(--red); }

.cart-item-course-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  text-transform: uppercase;
}

.course-badge-starter { background: rgba(59,130,246,0.2); color: var(--blue); }
.course-badge-main { background: rgba(16,185,129,0.2); color: var(--green); }
.course-badge-dessert { background: rgba(249,115,22,0.2); color: var(--orange); }
.course-badge-bar { background: rgba(236,72,153,0.2); color: var(--pink); }

.item-note-tag {
  font-size: 10px;
  color: var(--orange);
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 3px;
}

.item-voided { opacity: 0.5; text-decoration: line-through; }
.item-comped .cart-item-price { color: var(--green) !important; }
.item-comped .cart-item-price::before { content: 'COMP '; font-size: 10px; }

/* Fire Kitchen Button */
.ticket-charge-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.btn-fire-kitchen {
  background: linear-gradient(135deg, rgba(239,68,68,0.8), rgba(245,158,11,0.8));
  color: #fff;
  border: none;
  padding: 11px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all var(--transition);
}

.btn-fire-kitchen:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(239,68,68,0.3); }

.ticket-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
}

.ticket-action-row .btn-ghost {
  padding: 7px 8px;
  font-size: 12px;
  justify-content: center;
}

/* Bar Tabs Panel */
.bar-tabs-panel {
  display: none;
  background: var(--bg-1);
  border-left: 1px solid var(--border);
  flex-direction: column;
  width: 280px;
  flex-shrink: 0;
}

.bar-tabs-panel.open { display: flex; }

.bar-tabs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.bar-tabs-header h3 {
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--teal);
}

.bar-tab-search {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.bar-tab-search input {
  width: 100%;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text-0);
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  outline: none;
  font-size: 12px;
}

#bar-tabs-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bar-tab-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  cursor: pointer;
  transition: all var(--transition);
  border-left: 3px solid var(--teal);
}

.bar-tab-card:hover { border-color: var(--teal); transform: translateX(2px); }
.bar-tab-card.active { background: var(--teal-glow); border-color: var(--teal); }

.bar-tab-name { font-weight: 700; font-size: 14px; }
.bar-tab-meta { font-size: 12px; color: var(--text-2); margin-top: 3px; }
.bar-tab-total { font-size: 16px; font-weight: 800; color: var(--teal); margin-top: 6px; }

.bar-tab-actions { display: flex; gap: 6px; margin-top: 8px; }

/* ===== TABLES MODULE - ENHANCED ===== */
.table-stats-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
}

.table-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  border-right: 1px solid var(--border);
  font-size: 12px;
}

.table-stat-item:last-child { border-right: none; }
.table-stat-num { font-size: 22px; font-weight: 800; font-family: 'Outfit', sans-serif; }
.table-stat-lbl { font-size: 11px; color: var(--text-2); margin-top: 2px; }

.tables-view-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  height: calc(100% - 58px);
  overflow: hidden;
}

.tables-side {
  background: var(--bg-1);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.tables-main { overflow-y: auto; padding: 0 20px 20px; }

.zone-list { display: flex; flex-direction: column; gap: 3px; }

.zone-list-btn {
  background: transparent;
  border: none;
  color: var(--text-2);
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  width: 100%;
  transition: all var(--transition);
}

.zone-list-btn:hover { background: var(--bg-glass); color: var(--text-0); }
.zone-list-btn.active { background: var(--teal-glow); color: var(--teal-light); font-weight: 700; }

.tables-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0 12px;
}

.tables-topbar h2 { font-size: 18px; font-weight: 700; }

.tables-floor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

/* Enhanced Table Cards */
.table-card {
  min-height: 155px;
  position: relative;
}

.table-timer {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
}

.table-timer.green { background: rgba(16,185,129,0.15); color: var(--green); }
.table-timer.orange { background: rgba(245,158,11,0.15); color: var(--orange); }
.table-timer.red { background: rgba(239,68,68,0.15); color: var(--red); }

.table-waiter { font-size: 11px; color: var(--text-2); margin-top: 4px; display: flex; align-items: center; gap: 4px; }
.table-covers { font-size: 11px; color: var(--text-2); }

.table-action-row { display: flex; gap: 4px; margin-top: 8px; }
.table-action-btn {
  flex: 1;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 5px 6px;
  border-radius: var(--radius-xs);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all var(--transition);
}

.table-action-btn:hover { background: var(--teal-glow); color: var(--teal); border-color: var(--teal); }
.table-action-btn.bill { background: rgba(245,158,11,0.1); color: var(--orange); border-color: rgba(245,158,11,0.3); }

/* Bill Requested Status */
.table-card.bill-requested::after { background: var(--orange); }
.table-card.reserved::after { background: var(--purple); }

/* Reservations Board */
#reservations-board { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }

.reservation-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  border-left: 4px solid var(--teal);
  transition: all var(--transition);
}

.reservation-card:hover { border-color: var(--teal); background: var(--teal-glow); }
.reservation-card.pending { border-left-color: var(--orange); }
.reservation-card.seated { border-left-color: var(--green); }
.reservation-card.cancelled { border-left-color: var(--red); opacity: 0.6; }

.res-time {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--teal);
  min-width: 60px;
  text-align: center;
}

.res-info { flex: 1; }
.res-name { font-weight: 700; font-size: 14px; }
.res-meta { font-size: 12px; color: var(--text-2); margin-top: 2px; }

.res-actions { display: flex; gap: 6px; }

/* ===== KDS ENHANCED STYLES ===== */
.kds-topbar {
  flex-wrap: wrap;
  gap: 10px;
  min-height: auto;
  padding: 12px 16px;
}

.kds-controls {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.kds-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kds-filter-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-2);
  text-transform: uppercase;
}

.kds-course-filter {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 5px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}

.kds-course-filter:hover { color: var(--text-0); }
.kds-course-filter.active { background: var(--purple); color: #fff; border-color: var(--purple); }

/* KDS Summary Bar */
.kds-summary-bar {
  display: flex;
  gap: 12px;
  padding: 8px 16px;
  background: rgba(0,0,0,0.2);
  border-bottom: 1px solid var(--border);
}

.kds-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--bg-glass);
  border: 1px solid var(--border);
}

.kds-stat svg { width: 13px; height: 13px; }

/* Enhanced KDS Cards */
.kds-card .kds-items-list { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }

.kds-order-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 10px;
  background: var(--bg-glass);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.kds-item-qty { font-weight: 800; font-size: 16px; color: var(--teal); min-width: 24px; }
.kds-item-name { flex: 1; font-weight: 600; font-size: 14px; margin-left: 8px; }
.kds-item-note { font-size: 11px; color: var(--orange); font-style: italic; margin-top: 3px; display: flex; align-items: center; gap: 3px; }

.kds-item-bump-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  flex-shrink: 0;
}

.kds-item-bump-btn:hover { background: var(--green); color: #fff; border-color: var(--green); }

.kds-course-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  margin-left: auto;
}

.kds-card .kds-card-head {
  padding: 10px 14px;
}

.kds-rush-badge {
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  animation: rush-blink 1s infinite;
}

@keyframes rush-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.kds-card-actions { display: flex; gap: 6px; padding: 0 12px 10px; }

.btn-kds-rush {
  flex: 1;
  background: rgba(239,68,68,0.15);
  color: var(--red);
  border: 1px solid rgba(239,68,68,0.3);
  padding: 7px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  cursor: pointer;
  font-size: 12px;
  transition: all var(--transition);
}

.btn-kds-rush:hover { background: var(--red); color: #fff; }

.btn-kds-print {
  flex: 1;
  background: rgba(59,130,246,0.15);
  color: var(--blue);
  border: 1px solid rgba(59,130,246,0.3);
  padding: 7px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  cursor: pointer;
  font-size: 12px;
  transition: all var(--transition);
}

.btn-kds-print:hover { background: var(--blue); color: #fff; }

/* Quick Notes */
.quick-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 10px;
}

.quick-note-btn {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text-1);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  cursor: pointer;
  transition: all var(--transition);
}

.quick-note-btn:hover { background: var(--teal-glow); color: var(--teal); border-color: var(--teal); }

/* Split Bill */
.split-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}

.split-opt-btn {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all var(--transition);
}

.split-opt-btn:hover { color: var(--text-0); }
.split-opt-btn.active { background: var(--teal-glow); color: var(--teal-light); border-color: var(--teal); }

/* ============================================================
   ENTERPRISE INVENTORY SYSTEM STYLES
   ============================================================ */

/* Inventory Sub-tabs */
.inv-sub-sec { display: none; }
.inv-sub-sec.active { display: block; animation: fadeIn 0.2s ease-in-out; }

.recipes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  margin-top: 10px;
}

.recipe-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px;
  transition: all var(--transition);
  border-top: 3px solid var(--teal);
}

.recipe-card:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.recipe-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-0);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recipe-cost-badge {
  font-size: 12px;
  font-weight: 700;
  background: rgba(16,185,129,0.15);
  color: var(--green);
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

.recipe-ingredients-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.recipe-ing-item {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  padding: 4px 8px;
  background: var(--bg-glass);
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
}

.recipe-ing-name { font-weight: 500; color: var(--text-1); }
.recipe-ing-qty { font-weight: 700; color: var(--teal); }

.status-badge.received { background: rgba(16,185,129,0.2); color: var(--green); }
.status-badge.sent { background: rgba(59,130,246,0.2); color: var(--blue); }
.status-badge.draft { background: rgba(148,163,184,0.2); color: var(--text-2); }

.audit-input {
  width: 80px;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text-0);
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  font-weight: 700;
  text-align: center;
}

.audit-input:focus { border-color: var(--teal); outline: none; }

/* Menu Sub-sections */
.msub-sec { display: none; }
.msub-sec.active { display: block; animation: fadeIn 0.2s ease-in-out; }

.portion-input {
  width: 90px;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text-0);
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  font-weight: 700;
}

/* =========================================================
   SAMBAPOS-STYLE ORDERING FLOW — COMPLETE STYLES
   ========================================================= */

/* --- SlideUp animation for dept picker sheet --- */
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* --- SambaPOS Floor Grid --- */
.tables-floor-grid.sambapos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
  padding: 4px 2px;
}

/* --- SambaPOS Table Tiles --- */
.sambapos-table-tile {
  min-height: 148px;
  border-radius: 18px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  user-select: none;
}
.sambapos-table-tile:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}
.sambapos-table-tile:active {
  transform: scale(0.97);
}

/* --- Department Card Hover --- */
.dept-card:hover {
  transform: translateY(-4px) scale(1.03) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35) !important;
}
.dept-card:active {
  transform: scale(0.97) !important;
}

/* --- SambaPOS Item Tiles Grid --- */
.items-container.sambapos-items {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  padding: 8px 4px;
  align-content: start;
}
.items-container.list-mode.sambapos-items {
  display: flex !important;
  flex-direction: column;
}

/* --- Individual SambaPOS Item Tile --- */
.sambapos-item-tile {
  position: relative;
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.13s ease, box-shadow 0.13s ease;
  overflow: hidden;
  background: var(--bg-card);
  border: 2px solid var(--border);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  user-select: none;
}

/* Color accent bar at top — matches item color */
.sambapos-item-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--tile-color, #001619);
}

/* Background wash from item color */
.sambapos-item-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tile-color, #001619) 12%, transparent), transparent 60%);
  pointer-events: none;
}

.sambapos-item-tile:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
  border-color: var(--tile-color, var(--teal));
}

.sambapos-item-tile:active,
.sambapos-item-tile.tile-tap {
  transform: scale(0.94);
  box-shadow: none;
}

/* IN CART state — glowing teal border */
.sambapos-item-tile.in-cart {
  border-color: var(--teal);
  box-shadow: 0 0 0 1px var(--teal), 0 6px 18px rgba(20,184,166,0.2);
}

/* Tile inner layout */
.sambapos-tile-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 14px 10px 10px;
  text-align: center;
  gap: 6px;
}

.sambapos-tile-icon {
  font-size: 28px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.sambapos-tile-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-0);
  line-height: 1.3;
}

.sambapos-tile-price {
  font-size: 14px;
  font-weight: 900;
  color: var(--tile-color, var(--teal));
  letter-spacing: 0.3px;
}

/* Quantity badge — top-right bubble */
.sambapos-qty-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(20,184,166,0.5);
  animation: popIn 0.2s ease;
}

@keyframes popIn {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* Low stock warning badge */
.sambapos-stock-warn {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-size: 9px;
  font-weight: 800;
  color: var(--orange);
  background: rgba(249,115,22,0.15);
  border: 1px solid rgba(249,115,22,0.3);
  border-radius: 6px;
  padding: 1px 5px;
  z-index: 2;
}

/* --- POS Context Bar (shown when a table is open) --- */
#pos-context-bar {
  flex-shrink: 0;
}
#pos-context-bar .btn-ghost {
  white-space: nowrap;
}

/* =========================================================
   STAFF LOGIN & PIN SECURITY OVERLAY STYLES
   ========================================================= */

.login-overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(10, 15, 26, 0.88);
  backdrop-filter: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.25s ease;
}

.login-overlay-card {
  background: var(--bg-card);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(20, 184, 166, 0.1);
  width: 100%;
  max-width: 840px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.login-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(20, 184, 166, 0.12), rgba(139, 92, 246, 0.08));
  border-bottom: 1px solid var(--border);
}

.login-brand-logo {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--teal), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  box-shadow: var(--shadow-teal);
}

.login-brand-title {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-0);
}

.login-brand-sub {
  font-size: 12px;
  color: var(--text-2);
}

.login-clock {
  font-family: 'Outfit', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: var(--teal);
}

.login-date {
  font-size: 11px;
  color: var(--text-2);
}

.login-body {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  padding: 24px;
}

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

.login-section-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--text-2);
  margin-bottom: 12px;
}

.login-user-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  max-height: 380px;
  overflow-y: auto;
  padding-right: 4px;
}

.login-user-card {
  background: var(--bg-glass);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all var(--transition);
}

.login-user-card:hover {
  border-color: var(--teal);
  background: rgba(20, 184, 166, 0.08);
  transform: translateY(-2px);
}

.login-user-card.selected {
  border-color: var(--teal);
  background: var(--teal-glow);
  box-shadow: 0 0 16px rgba(20, 184, 166, 0.25);
}

.login-user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--accent));
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.login-user-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-0);
}

.login-user-role {
  font-size: 11px;
  color: var(--text-2);
}

/* PIN Col */
.login-pin-col {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
}

.pin-user-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 16px;
}

.pin-dots-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 12px 0 16px;
}

.pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border-hover);
  background: transparent;
  transition: all 0.15s ease;
}

.pin-dot.filled {
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 0 10px var(--teal);
  transform: scale(1.15);
}

.pin-error-msg {
  color: var(--red);
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-xs);
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 12px;
  display: none !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.pin-error-msg.visible {
  display: flex !important;
  animation: pinPopShake 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.pin-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}

.keypad-btn {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  color: var(--text-0);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.12s ease;
  user-select: none;
}

.keypad-btn:hover {
  background: var(--teal-glow);
  border-color: var(--teal);
  color: var(--teal-light);
  transform: scale(1.04);
}

.keypad-btn:active {
  transform: scale(0.95);
}

.keypad-btn.action-btn {
  font-size: 15px;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.04);
}


/* --- Category bar dept chips --- */
#category-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 0;
}

/* --- Items grid scrollable area --- */
#items-container {
  overflow-y: auto;
  flex: 1;
}

/* ============================================================
   SAMBAPOS V5 PRO THEME & COMPONENT STYLES
   ============================================================ */

/* --- SambaPOS Work Period Status Bar --- */
.samba-wp-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #1c1e26 0%, #252834 100%);
  border-bottom: 2px solid #f39c12;
  padding: 8px 18px;
  flex-shrink: 0;
}

.samba-wp-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.samba-wp-status-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(46, 204, 113, 0.6);
}
.samba-wp-status-dot.green { background: #2ecc71; }
.samba-wp-status-dot.red { background: #e74c3c; box-shadow: 0 0 10px rgba(231, 76, 60, 0.6); }

.samba-wp-title {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
  display: block;
}

.samba-wp-meta {
  font-size: 11px;
  color: #95a5a6;
}

.samba-wp-action-btn {
  background: rgba(243, 156, 18, 0.15);
  border: 1px solid #f39c12;
  color: #f39c12;
  font-weight: 800;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}
.samba-wp-action-btn:hover {
  background: #f39c12;
  color: #fff;
}

/* --- SambaPOS 5-Button Command Strip --- */
.samba-cmd-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-top: 10px;
}

.samba-cmd-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: var(--radius-sm);
  border: none;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.12s ease;
  user-select: none;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}

.samba-cmd-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
}

.samba-cmd-btn:active {
  transform: translateY(1px);
}

.samba-cmd-btn.danger  { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.samba-cmd-btn.warning { background: linear-gradient(135deg, #f39c12, #d35400); }
.samba-cmd-btn.info    { background: linear-gradient(135deg, #00a8ff, #0097e6); }
.samba-cmd-btn.purple  { background: linear-gradient(135deg, #9b59b6, #8e44ad); }
.samba-cmd-btn.success { background: linear-gradient(135deg, #2ecc71, #27ae60); }

/* --- SambaPOS Quick Modifiers Bar --- */
.samba-quick-tags-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 12px;
  background: rgba(0,0,0,0.2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.samba-tag-title {
  font-size: 10px;
  font-weight: 800;
  color: var(--text-2);
  letter-spacing: 1px;
  margin-right: 4px;
  flex-shrink: 0;
}

.samba-tag-pill {
  background: #252834;
  border: 1px solid #343846;
  color: #ecf0f1;
  font-weight: 700;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s ease;
  flex-shrink: 0;
}

.samba-tag-pill:hover {
  background: #00a8ff;
  border-color: #00a8ff;
  color: #fff;
  transform: scale(1.05);
}

/* --- SambaPOS Portion Grid Modal --- */
.samba-portions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.samba-portion-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #21242d;
  border: 2px solid #343846;
  border-radius: var(--radius-md);
  padding: 14px 18px;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.samba-portion-btn:hover {
  border-color: #00a8ff;
  background: rgba(0, 168, 255, 0.15);
  transform: translateX(4px);
}

.samba-portion-price {
  font-weight: 800;
  font-size: 16px;
  color: #00a8ff;
}

/* --- SambaPOS Touch Numpad & Payment Terminal --- */
/* ════════════════════════════════════════════════════════════════════
   SAMBAPOS 5 ULTIMATE PAYMENT SETTLEMENT TERMINAL (PRO UI)
════════════════════════════════════════════════════════════════════ */
.samba-settle-card {
  width: 980px !important;
  max-width: 96vw !important;
  background: #111827 !important;
  border: 1px solid #1f2937 !important;
  border-radius: 16px !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  max-height: 94vh !important;
  color: #f3f4f6 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Header */
.samba-settle-header {
  background: #1f2937;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #374151;
}
.samba-settle-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.samba-settle-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #001619, #001619);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}
.samba-settle-title {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
  margin: 0;
  text-transform: uppercase;
}
.samba-settle-meta-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.samba-settle-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: #374151;
  color: #e5e7eb;
}
.samba-settle-pill.table {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.4);
}
.samba-settle-pill.ticket {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.4);
}
.samba-settle-close-btn {
  background: #374151;
  border: none;
  color: #9ca3af;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.samba-settle-close-btn:hover {
  background: #ef4444;
  color: #fff;
}

/* Body 3-Column Layout */
.samba-settle-grid {
  display: grid;
  grid-template-columns: 290px 1fr 225px;
  gap: 16px;
  padding: 18px 20px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Left Panel: Ticket Receipt */
.samba-settle-ticket-panel {
  background: #1a202c;
  border: 1px solid #2d3748;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.samba-settle-ticket-hdr {
  background: #242c3d;
  padding: 10px 14px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  color: #94a3b8;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #2d3748;
  display: flex;
  justify-content: space-between;
}
.samba-settle-items-list {
  flex: 1;
  padding: 10px 14px;
  overflow-y: auto;
  max-height: 250px;
}
.samba-settle-item-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  font-size: 12.5px;
}
.samba-settle-item-name {
  font-weight: 600;
  color: #f1f5f9;
  flex: 1;
  padding-right: 8px;
}
.samba-settle-item-price {
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.samba-settle-totals-box {
  background: #111827;
  padding: 14px;
  border-top: 1px solid #2d3748;
}
.samba-settle-sub-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 5px;
}
.samba-settle-due-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #374151;
}
.samba-settle-due-label {
  font-size: 12.5px;
  font-weight: 900;
  color: #f3f4f6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.samba-settle-due-val {
  font-size: 24px;
  font-weight: 900;
  color: #001619;
}
.samba-settle-ticket-actions {
  padding: 10px 14px;
  background: #1e2533;
  border-top: 1px solid #2d3748;
}
.samba-settle-bill-btn {
  width: 100%;
  padding: 9px;
  border-radius: 8px;
  background: #2563eb;
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
}
.samba-settle-bill-btn:hover {
  background: #1d4ed8;
}

/* Center Panel: Numpad & Digital Display */
.samba-settle-center-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Digital Displays */
.samba-settle-displays {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 10px;
}
.samba-display-box {
  background: #090d16;
  border: 1.5px solid #1f2937;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: border-color 0.15s ease;
}
.samba-display-box.active {
  border-color: #001619;
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.15);
}
.samba-display-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #9ca3af;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.samba-display-val-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.samba-tender-input {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  color: #001619 !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  font-family: 'JetBrains Mono', 'Segoe UI', monospace !important;
  width: 100% !important;
  text-align: right !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
}
.samba-backspace-btn {
  background: #1f2937;
  border: 1px solid #374151;
  color: #9ca3af;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 16px;
  cursor: pointer;
  margin-left: 8px;
  transition: all 0.15s ease;
}
.samba-backspace-btn:hover {
  background: #374151;
  color: #fff;
}
.samba-change-val {
  font-size: 26px;
  font-weight: 900;
  font-family: 'JetBrains Mono', 'Segoe UI', monospace;
  text-align: right;
  color: #38bdf8;
}

/* Quick Cash Presets */
.samba-qc-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.samba-qc-chip {
  background: #1e293b;
  border: 1px solid #334155;
  color: #f8fafc;
  font-weight: 800;
  font-size: 12.5px;
  padding: 10px 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.samba-qc-chip:hover {
  background: #f59e0b;
  border-color: #f59e0b;
  color: #0f172a;
  transform: translateY(-1px);
}
.samba-qc-chip.exact {
  background: #065f46;
  border-color: #001619;
  color: #e2e8f0;
}
.samba-qc-chip.exact:hover {
  background: #001619;
  color: #fff;
}

/* Tactile Numpad */
.samba-numpad-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  flex: 1;
}
.samba-pad-key {
  background: #1f2937;
  border: 1px solid #374151;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  padding: 15px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}
.samba-pad-key:hover {
  background: #374151;
  border-color: #4b5563;
  transform: translateY(-2px);
}
.samba-pad-key:active {
  transform: translateY(1px);
  background: #111827;
}
.samba-pad-key.clear {
  background: #dc2626;
  border-color: #b91c1c;
  color: #fff;
}
.samba-pad-key.clear:hover {
  background: #ef4444;
}

/* Right Panel: Payment Methods */
.samba-settle-tenders-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.samba-tender-btn {
  display: flex;
  flex-direction: column;
  padding: 13px 15px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  text-align: left;
  position: relative;
  overflow: hidden;
}
.samba-tender-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  filter: brightness(1.1);
}
.samba-tender-btn:active {
  transform: translateY(1px);
}
.samba-tender-btn-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #fff;
  text-transform: uppercase;
}
.samba-tender-btn-sub {
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0.85;
  margin-top: 3px;
  color: #fff;
}
.samba-tender-btn.cash {
  background: linear-gradient(135deg, #001619, #001619);
}
.samba-tender-btn.card {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
}
.samba-tender-btn.mobile {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.samba-tender-btn.room {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}
.samba-tender-btn.comp {
  background: linear-gradient(135deg, #475569, #334155);
}

.samba-settle-theme-btn {
  background: #374151;
  border: none;
  color: #f3f4f6;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.samba-settle-theme-btn:hover {
  background: #4b5563;
  transform: scale(1.05);
}

/* ════════════════════════════════════════════════════════════════════
   SAMBAPOS 5 SETTLEMENT TERMINAL — STANDARD LIGHT MODE
════════════════════════════════════════════════════════════════════ */
body.theme-light .samba-settle-card {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
  color: #1e293b !important;
}

body.theme-light .samba-settle-header {
  background: #f8fafc !important;
  border-bottom-color: #e2e8f0 !important;
}
body.theme-light .samba-settle-title {
  color: #0f172a !important;
}
body.theme-light .samba-settle-pill {
  background: #e2e8f0 !important;
  color: #334155 !important;
}
body.theme-light .samba-settle-pill.table {
  background: #fef3c7 !important;
  color: #b45309 !important;
  border-color: #fde68a !important;
}
body.theme-light .samba-settle-pill.ticket {
  background: #f1f5f9 !important;
  color: #065f46 !important;
  border-color: #e2e8f0 !important;
}
body.theme-light .samba-settle-close-btn,
body.theme-light .samba-settle-theme-btn {
  background: #e2e8f0 !important;
  color: #475569 !important;
}
body.theme-light .samba-settle-close-btn:hover {
  background: #ef4444 !important;
  color: #fff !important;
}
body.theme-light .samba-settle-theme-btn:hover {
  background: #cbd5e1 !important;
  color: #0f172a !important;
}

/* Light Mode: Left Panel (Ticket Receipt) */
body.theme-light .samba-settle-ticket-panel {
  background: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
body.theme-light .samba-settle-ticket-hdr {
  background: #f1f5f9 !important;
  color: #475569 !important;
  border-bottom-color: #e2e8f0 !important;
}
body.theme-light .samba-settle-item-row {
  border-bottom-color: #f1f5f9 !important;
}
body.theme-light .samba-settle-item-name {
  color: #1e293b !important;
}
body.theme-light .samba-settle-item-price {
  color: #0f172a !important;
}
body.theme-light .samba-settle-totals-box {
  background: #f8fafc !important;
  border-top-color: #e2e8f0 !important;
}
body.theme-light .samba-settle-sub-row {
  color: #64748b !important;
}
body.theme-light .samba-settle-due-row {
  border-top-color: #e2e8f0 !important;
}
body.theme-light .samba-settle-due-label {
  color: #0f172a !important;
}
body.theme-light .samba-settle-due-val {
  color: #001619 !important;
}
body.theme-light .samba-settle-ticket-actions {
  background: #f8fafc !important;
  border-top-color: #e2e8f0 !important;
}

/* Light Mode: Center Panel (Display & Numpad) */
body.theme-light .samba-display-box {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}
body.theme-light .samba-display-box.active {
  border-color: #001619 !important;
  background: #ffffff !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.12) !important;
}
body.theme-light .samba-display-lbl {
  color: #64748b !important;
}
body.theme-light .samba-tender-input {
  color: #001619 !important;
}
body.theme-light .samba-change-val {
  color: #0284c7 !important;
}
body.theme-light .samba-backspace-btn {
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}
body.theme-light .samba-backspace-btn:hover {
  background: #cbd5e1 !important;
  color: #0f172a !important;
}

/* Light Mode: Quick Cash Chips */
body.theme-light .samba-qc-chip {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #1e293b !important;
}
body.theme-light .samba-qc-chip:hover {
  background: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #ffffff !important;
}
body.theme-light .samba-qc-chip.exact {
  background: #f1f5f9 !important;
  border-color: #34d399 !important;
  color: #065f46 !important;
}
body.theme-light .samba-qc-chip.exact:hover {
  background: #001619 !important;
  color: #ffffff !important;
}

/* Light Mode: Numpad Keys */
body.theme-light .samba-pad-key {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}
body.theme-light .samba-pad-key:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
}
body.theme-light .samba-pad-key:active {
  background: #e2e8f0 !important;
}
body.theme-light .samba-pad-key.clear {
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
}
body.theme-light .samba-pad-key.clear:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
}

/* --- SambaPOS Table Tile Cards --- */
.sambapos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  padding: 16px;
}

.sambapos-grid .samba-table-card {
  background: #21242d;
  border: 2px solid #343846;
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120px;
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
  overflow: hidden;
}

.sambapos-grid .samba-table-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.sambapos-grid .samba-table-card.vacant {
  border-color: #2ecc71;
}
.sambapos-grid .samba-table-card.vacant:hover {
  background: rgba(46, 204, 113, 0.1);
}

.sambapos-grid .samba-table-card.occupied {
  background: linear-gradient(135deg, #e67e22, #d35400);
  border-color: #f39c12;
  color: #fff;
}

.sambapos-grid .samba-table-card.bill-printed {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
  border-color: #b91c1c;
  color: #fff;
}

.sambapos-grid .samba-table-card.reserved {
  background: linear-gradient(135deg, #9b59b6, #8e44ad);
  border-color: #9b59b6;
  color: #fff;
}

.samba-table-name {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 4px;
}

.samba-table-meta {
  font-size: 11px;
  opacity: 0.85;
}

.samba-table-total {
  font-size: 16px;
  font-weight: 800;
  margin-top: 8px;
  align-self: flex-end;
}

/* ============================================================
   SAMBAPOS 5.7.24 1:1 EXACT SCREEN THEME
   ============================================================ */
/* tab-pos overrides: don't scroll the outer section, let inner workspace handle it */
#tab-pos {
  display: none;
  overflow: hidden !important;
  flex: 1 !important;
  height: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

#tab-pos.active {
  display: flex !important;
  flex-direction: column !important;
}

.samba5-screen-container {
  background: #eef0f2;
  color: #111;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  user-select: none;
}

.samba5-top-header {
  background: #ffffff;
  padding: 6px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #d0d4d9;
  flex-shrink: 0;
}

.samba5-brand-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.samba5-logo-text {
  font-size: 15px;
  font-weight: 800;
  color: #111;
}

.samba5-trial-badge {
  background: #d32f2f;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 2px;
}

.samba5-top-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.samba5-clock {
  font-size: 13px;
  color: #555555;
  font-weight: 600;
}

.samba5-demo-badge {
  color: #d32f2f;
  font-weight: 800;
  font-size: 12px;
}

/* 3-Column Workspace */
.samba5-workspace {
  flex: 1;
  display: grid;
  grid-template-columns: 380px 140px 1fr;
  gap: 8px;
  padding: 8px;
  overflow: hidden;
}

/* Left Ticket Column */
.samba5-ticket-col {
  display: grid;
  grid-template-columns: 105px 1fr;
  gap: 8px;
  height: 100%;
  overflow: hidden;
}

.samba5-side-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.samba5-side-btn {
  background: #ffffff;
  border: 1px solid #c0c4c9;
  color: #222222;
  font-size: 12px;
  font-weight: 600;
  padding: 10px 4px;
  text-align: center;
  border-radius: 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  line-height: 1.2;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: background 0.12s ease;
}

.samba5-side-btn:hover {
  background: #e8ecef;
}

/* Ticket Box */
.samba5-ticket-box {
  background: #ffffff;
  border: 1px solid #c0c4c9;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.samba5-ticket-header {
  background: #d6d8db;
  padding: 8px 12px;
  border-bottom: 1px solid #c0c4c9;
  font-size: 13px;
  font-weight: 700;
  color: #333333;
}

.samba5-table-name { font-size: 13.5px; font-weight: 800; color: #222; }
.samba5-table-status { font-size: 11.5px; color: #555; margin-top: 2px; }

.samba5-ticket-items-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  background: #ffffff;
}

.samba5-ticket-line {
  display: flex;
  justify-content: space-between;
  padding: 6px 4px;
  border-bottom: 1px dashed #e0e0e0;
  font-size: 13px;
  color: #111;
  font-weight: 600;
}

.samba5-ticket-bottom-actions {
  display: flex;
  gap: 6px;
  padding: 6px;
  background: #e8ebed;
  border-top: 1px solid #c0c4c9;
}

.samba5-btn-settle {
  flex: 1;
  background: #ffffff;
  border: 1px solid #c0c4c9;
  color: #111111;
  font-weight: 800;
  font-size: 18px;
  padding: 14px 8px;
  cursor: pointer;
  border-radius: 2px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: background 0.12s ease;
}
.samba5-btn-settle:hover { background: #f0f0f0; }

.samba5-btn-close {
  flex: 1;
  background: #bc4d4d;
  border: 1px solid #a33f3f;
  color: #ffffff;
  font-weight: 800;
  font-size: 18px;
  padding: 14px 8px;
  cursor: pointer;
  border-radius: 2px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: background 0.12s ease;
}
.samba5-btn-close:hover { background: #a83e3e; }

/* Middle Categories Column */
.samba5-categories-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
}

.samba5-cat-btn {
  background: #ff9800;
  border: none;
  color: #000000;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 8px;
  text-align: center;
  border-radius: 2px;
  cursor: pointer;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.1s ease, background 0.12s ease;
}
.samba5-cat-btn:hover { background: #f57c00; transform: scale(1.02); }
.samba5-cat-btn.active { background: #e65100; color: #ffffff; font-weight: 800; }

/* Right Products & Numpad Column */
.samba5-products-numpad-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  overflow: hidden;
}

.samba5-product-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  overflow-y: auto;
  align-content: start;
}

.samba5-prod-tile {
  background: #008000;
  border: none;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  padding: 14px 10px;
  text-align: center;
  border-radius: 2px;
  cursor: pointer;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.25;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: background 0.12s ease, transform 0.1s ease;
}
.samba5-prod-tile:hover { background: #006400; transform: scale(1.02); }
.samba5-prod-tile:active { transform: scale(0.98); }

/* Out of Stock & Inventory Protection (Prevent Negative Sales) */
.samba5-prod-tile.out-of-stock {
  background: #475569 !important;
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  filter: grayscale(85%) !important;
  border: 1.5px dashed #dc2626 !important;
  box-shadow: none !important;
}
.samba5-prod-tile.out-of-stock:hover {
  background: #334155 !important;
  transform: none !important;
}
.samba5-prod-tile .stock-pill {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 3px;
  line-height: 1.2;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.samba5-prod-tile .stock-pill.out {
  background: #dc2626 !important;
  color: #ffffff !important;
}
.samba5-prod-tile .stock-pill.low {
  background: #d97706 !important;
  color: #ffffff !important;
}
.quick-item-btn.out-of-stock {
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
  cursor: not-allowed !important;
  border: 1px dashed #dc2626 !important;
  opacity: 0.6;
}

/* Numpad Box */
.samba5-numpad-box {
  background: #e4e7ea;
  border: 1px solid #c0c4c9;
  padding: 6px;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 320px;
  align-self: flex-end;
}

.samba5-entry-bar {
  display: flex;
  gap: 4px;
  border: 1px solid #b0b4b9;
  background: #ffffff;
  padding: 2px;
}

.samba5-entry-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 18px;
  font-weight: 800;
  padding: 4px 8px;
  color: #000000;
}

.samba5-entry-check {
  background: #ffffff;
  border: none;
  font-size: 16px;
  font-weight: 800;
  padding: 4px 12px;
  cursor: pointer;
  color: #000;
}
.samba5-entry-check:hover { background: #e0e0e0; }

.samba5-entry-clear {
  background: #ffffff;
  border: none;
  font-size: 16px;
  font-weight: 800;
  padding: 4px 12px;
  cursor: pointer;
  color: #000;
}
.samba5-entry-clear:hover { background: #e0e0e0; }

.samba5-numpad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.samba5-num-key {
  background: #ffffff;
  border: 1px solid #d0d4d9;
  color: #111111;
  font-size: 18px;
  font-weight: 700;
  padding: 12px;
  cursor: pointer;
  text-align: center;
  border-radius: 2px;
  transition: background 0.1s ease;
}
.samba5-num-key:hover { background: #e2e6ea; }

/* Bottom Alert Footer Bar */
.samba5-footer-bar {
  background: #eef0f2;
  border-top: 1px solid #c0c4c9;
  padding: 5px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  flex-shrink: 0;
}

.samba5-alert-msg {
  color: #d32f2f;
  font-weight: 800;
  letter-spacing: 0.5px;
  font-size: 12px;
}

.samba5-footer-right {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #333;
}

.samba5-mini-btn {
  background: #ffffff;
  border: 1px solid #c0c4c9;
  color: #333333;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 2px;
  cursor: pointer;
}
.samba5-mini-btn:hover { background: #e2e6ea; }

/* ============================================================
   SAMBAPOS ENTERPRISE LIGHT & CLEAR MODAL THEME & DROPDOWN FIX
   ============================================================ */

/* Global Select Option Fix for all dropdowns */
select option,
select optgroup {
  background-color: #ffffff !important;
  color: #111111 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 8px 12px !important;
}

/* Modals High-Contrast Bright Styling */
.modal-card {
  background: #ffffff !important;
  border: 1px solid #c0c4c9 !important;
  color: #111111 !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4) !important;
}

.modal-hdr {
  background: #0078d7 !important;
  border-bottom: 2px solid #005a9e !important;
  padding: 16px 20px !important;
  color: #ffffff !important;
}

.modal-hdr h3, .modal-hdr h4 {
  color: #ffffff !important;
  font-weight: 800 !important;
}

.modal-hdr p {
  color: rgba(255,255,255,0.9) !important;
}

.modal-close {
  background: rgba(255,255,255,0.2) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}
.modal-close:hover {
  background: #d32f2f !important;
  color: #ffffff !important;
}

.modal-bdy {
  background: #ffffff !important;
  color: #111111 !important;
}

.modal-ftr {
  background: #f4f6f8 !important;
  border-top: 1px solid #d0d4d9 !important;
}

/* Form Controls & Inputs inside Modals */
.modal-card .form-control,
.modal-card input[type="text"],
.modal-card input[type="number"],
.modal-card select,
.modal-card textarea {
  background: #ffffff !important;
  color: #111111 !important;
  border: 1.5px solid #a6a6a6 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

.modal-card .form-control:focus,
.modal-card input:focus,
.modal-card select:focus {
  border-color: #0078d7 !important;
  box-shadow: 0 0 0 2px rgba(0,120,215,0.25) !important;
}

.modal-card label,
.modal-card .field-label {
  color: #222222 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

/* ============================================================
   SAMBAPOS V5 1:1 ENTERPRISE BACK OFFICE SIDEBAR & NAVIGATION
   ============================================================ */

.samba-bo-sidebar {
  width: 240px;
  min-width: 240px;
  background: #f0f2f5;
  border-right: 1px solid #dcdfe6;
  display: flex;
  flex-direction: column;
  height: 100%;
  user-select: none;
}

.samba-bo-header {
  padding: 12px 16px;
  background: #e4e7ed;
  border-bottom: 1px solid #dcdfe6;
  font-size: 14px;
  font-weight: 700;
  color: #303133;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.samba-bo-sublist {
  list-style: none;
  padding: 8px 0;
  margin: 0;
  flex: 1;
  overflow-y: auto;
  background: #ffffff;
  border-bottom: 1px solid #dcdfe6;
}

.samba-bo-sublist li {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  color: #484848;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.samba-bo-sublist li:hover {
  background: #f5f7fa;
  color: #0078d7;
}

.samba-bo-sublist li.active {
  background: #e6f0fa;
  color: #0078d7;
  font-weight: 700;
  border-left: 4px solid #0078d7;
}

.samba-bo-modules {
  display: flex;
  flex-direction: column;
  background: #f0f2f5;
  border-top: 1px solid #dcdfe6;
  overflow-y: auto;
  max-height: 48vh;
}

.samba-bo-mod-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 16px;
  background: #f0f2f5;
  border: none;
  border-bottom: 1px solid #e4e7ed;
  font-size: 13px;
  font-weight: 600;
  color: #505050;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.samba-bo-mod-btn:hover {
  background: #e6f0fa;
  color: #0078d7;
}

.samba-bo-mod-btn.active {
  background: #0078d7;
  color: #ffffff;
  font-weight: 700;
}

/* Hide duplicate nested top tab pills for ultra-clean single-focus Back Office layout */
#inv-sub-pills,
#menu-sub-pills {
  display: none !important;
}

/* ============================================================
   SAMBAPOS V5 1:1 UNIFORM WHITE ENTERPRISE SUITE THEME
   ============================================================ */

/* Back Office Main Container Scope */
#tab-backoffice {
  background: #ffffff !important;
  color: #2c3e50 !important;
}

#tab-backoffice .main-panel {
  background: #f8f9fa !important;
  color: #2c3e50 !important;
}

/* Panel Headers & Topbars */
#tab-backoffice .panel-topbar {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 14px 20px !important;
  border-radius: 6px !important;
  margin-bottom: 16px !important;
}

#tab-backoffice .panel-topbar h2,
#tab-backoffice h2,
#tab-backoffice h3 {
  color: #1e293b !important;
  font-weight: 800 !important;
}

/* High-Contrast Control Cards & Containers */
#tab-backoffice div[style*="background:var(--bg-glass)"],
#tab-backoffice .bo-panel,
#tab-backoffice .recipe-card,
#tab-backoffice .menu-item-card {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
  border-radius: 6px !important;
}

/* High-Contrast Form Inputs & Selects inside Back Office */
#tab-backoffice input[type="text"],
#tab-backoffice input[type="number"],
#tab-backoffice select,
#tab-backoffice textarea,
#tab-backoffice .form-control {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
}

#tab-backoffice input:focus,
#tab-backoffice select:focus {
  border-color: #0078d7 !important;
  box-shadow: 0 0 0 2px rgba(0,120,215,0.2) !important;
  outline: none !important;
}

#tab-backoffice label,
#tab-backoffice .field-label {
  color: #475569 !important;
  font-weight: 700 !important;
}

/* Data Tables in SambaPOS Light Theme */
#tab-backoffice .data-table {
  width: 100% !important;
  background: #ffffff !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}

#tab-backoffice .data-table th {
  background: #f1f5f9 !important;
  color: #334155 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.5px !important;
  padding: 10px 14px !important;
  border-bottom: 2px solid #cbd5e1 !important;
}

#tab-backoffice .data-table tr {
  background: #ffffff !important;
  transition: background 0.15s ease !important;
}

#tab-backoffice .data-table tr:nth-child(even) {
  background: #f8fafc !important;
}

#tab-backoffice .data-table tr:hover {
  background: #e2e8f0 !important;
}

#tab-backoffice .data-table td {
  padding: 10px 14px !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
  font-size: 13px !important;
}

/* Primary SambaPOS Blue Buttons */
#tab-backoffice .btn-primary,
#tab-backoffice button.btn-primary {
  background: #0078d7 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
  transition: background 0.15s ease !important;
}

#tab-backoffice .btn-primary:hover {
  background: #0063b1 !important;
}

/* Ghost / Secondary Action Buttons */
#tab-backoffice .btn-ghost {
  background: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
}

#tab-backoffice .btn-ghost:hover {
  background: #f1f5f9 !important;
  color: #0078d7 !important;
  border-color: #0078d7 !important;
}

/* Metric Cards in SambaPOS Enterprise Theme */
#tab-backoffice .metric-card {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 16px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

#tab-backoffice .metric-label {
  color: #64748b !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

#tab-backoffice .metric-val {
  color: #0f172a !important;
  font-weight: 800 !important;
}

/* Sidebar Collapse Toggle Button & Collapsed State */
.bo-collapse-btn {
  background: transparent !important;
  border: 1px solid #dcdfe6 !important;
  color: #303133 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
}

.bo-collapse-btn:hover {
  background: #0078d7 !important;
  color: #ffffff !important;
  border-color: #0078d7 !important;
}

.samba-bo-sidebar {
  transition: width 0.25s ease, min-width 0.25s ease !important;
}

.samba-bo-sidebar.collapsed {
  width: 54px !important;
  min-width: 54px !important;
}

.samba-bo-sidebar.collapsed .samba-bo-header #samba-bo-active-title,
.samba-bo-sidebar.collapsed .samba-bo-sublist li span,
.samba-bo-sidebar.collapsed .samba-bo-mod-btn span {
  display: none !important;
}

.samba-bo-sidebar.collapsed .samba-bo-sublist li,
.samba-bo-sidebar.collapsed .samba-bo-sublist li,
.samba-bo-sidebar.collapsed .samba-bo-mod-btn {
  justify-content: center !important;
  padding: 10px 0 !important;
}

/* ============================================================
   RECEPTION & FRONT DESK SUITE — UNIFORM WHITE ENTERPRISE THEME
   ============================================================ */

#tab-reception {
  background: #ffffff !important;
  color: #2c3e50 !important;
}

#tab-reception .main-panel,
#tab-reception .split-layout,
#tab-reception .pms-layout,
#tab-reception .pms-sidebar {
  background: #f8f9fa !important;
  color: #2c3e50 !important;
}

#tab-reception h1,
#tab-reception h2,
#tab-reception h3,
#tab-reception h4 {
  color: #0f172a !important;
  font-weight: 800 !important;
}

/* Reception Control Cards & Sidebar Panel */
#tab-reception .sidebar-panel,
#tab-reception .pms-sidebar,
#tab-reception div[style*="background:var(--bg-glass)"],
#tab-reception .card,
#tab-reception .metric-card {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
  border-radius: 6px !important;
  color: #1e293b !important;
}

/* High-Contrast Room Grid Cards */
#tab-reception .room-card,
#tab-reception .pms-room-card {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
  border-radius: 8px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

#tab-reception .room-card:hover,
#tab-reception .pms-room-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08) !important;
  border-color: #0078d7 !important;
}

#tab-reception .room-card .room-number,
#tab-reception .pms-room-card .room-number {
  color: #0f172a !important;
  font-weight: 800 !important;
}

#tab-reception .room-card .room-type,
#tab-reception .pms-room-card .room-type {
  color: #64748b !important;
  font-weight: 600 !important;
}

#tab-reception .room-card .guest-name,
#tab-reception .pms-room-card .guest-name {
  color: #0f172a !important;
  font-weight: 700 !important;
}

#tab-reception .room-card .room-folio,
#tab-reception .pms-room-card .room-folio {
  color: #0078d7 !important;
  font-weight: 800 !important;
}

/* Status Badges in Light Enterprise Theme */
#tab-reception .status-badge.available,
#tab-reception .badge-available,
#tab-reception .pms-badge.available {
  background: #e6f4ea !important;
  color: #137333 !important;
  border: 1px solid #ceebe1 !important;
  font-weight: 800 !important;
}

#tab-reception .status-badge.occupied,
#tab-reception .badge-occupied,
#tab-reception .pms-badge.occupied {
  background: #e8f0fe !important;
  color: #1a73e8 !important;
  border: 1px solid #d2e3fc !important;
  font-weight: 800 !important;
}

#tab-reception .status-badge.dirty,
#tab-reception .badge-dirty,
#tab-reception .pms-badge.dirty {
  background: #fce8e6 !important;
  color: #c5221f !important;
  border: 1px solid #fad2cf !important;
  font-weight: 800 !important;
}

#tab-reception .status-badge.reserved,
#tab-reception .badge-reserved,
#tab-reception .pms-badge.reserved {
  background: #feefc3 !important;
  color: #b06000 !important;
  border: 1px solid #fde293 !important;
  font-weight: 800 !important;
}

/* Form Controls & Inputs inside Reception */
#tab-reception input[type="text"],
#tab-reception input[type="number"],
#tab-reception input[type="date"],
#tab-reception select,
#tab-reception textarea,
#tab-reception .form-control {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
}

#tab-reception input:focus,
#tab-reception select:focus {
  border-color: #0078d7 !important;
  box-shadow: 0 0 0 2px rgba(0,120,215,0.2) !important;
  outline: none !important;
}

#tab-reception label {
  color: #475569 !important;
  font-weight: 700 !important;
}

/* Action Buttons in Reception Theme */
#tab-reception .btn-primary,
#tab-reception button.btn-primary {
  background: #0078d7 !important;
  color: #ffffff !important;
  border: none !important;
  font-weight: 700 !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

#tab-reception .btn-primary:hover {
  background: #0063b1 !important;
}

#tab-reception .btn-ghost {
  background: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
}

#tab-reception .btn-ghost:hover {
  background: #f1f5f9 !important;
  color: #0078d7 !important;
  border-color: #0078d7 !important;
}

/* Data Tables in Reception */
#tab-reception .data-table {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
}

#tab-reception .data-table th {
  background: #f1f5f9 !important;
  color: #334155 !important;
  font-weight: 800 !important;
  border-bottom: 2px solid #cbd5e1 !important;
}

#tab-reception .data-table td {
  border-bottom: 1px solid #e2e8f0 !important;
  color: #1e293b !important;
}

#tab-reception .data-table tr:nth-child(even) {
  background: #f8fafc !important;
}

/* Home Navigation Button in Topbar */
.btn-home-nav {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #0078d7 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
  transition: all 0.2s ease !important;
}

.btn-home-nav:hover {
  background: #0063b1 !important;
  transform: translateY(-1px) !important;
}



/* ============================================================
   OPT MANAGER — MILESTONE 24 — WORKSPACE & ENTERPRISE UI STYLES
   ============================================================ */

/* === WORKSPACE WRAPPER & HEADER === */
.opt-workspace {
  padding: 24px;
  max-width: 1400px;
  margin: 0 auto;
  min-height: calc(100vh - var(--topbar-height, 58px) - 40px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.opt-workspace-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-1, #0c1527);
  padding: 18px 24px;
  border-radius: var(--radius-lg, 16px);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.2));
  flex-wrap: wrap;
  gap: 12px;
}

.opt-workspace-header h1,
.opt-workspace-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-0, #f8fafc);
  display: flex;
  align-items: center;
  gap: 10px;
}

.opt-workspace-header p {
  margin: 4px 0 0 0;
  font-size: 13px;
  color: var(--text-2, #94a3b8);
}

.opt-workspace-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* === KPI GRIDS === */
.opt-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.opt-kpi-card {
  background: var(--bg-card, rgba(17, 29, 53, 0.8));
  backdrop-filter: none;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: var(--radius-md, 12px);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.2));
  transition: transform var(--transition, 0.18s ease), border-color var(--transition, 0.18s ease);
}

.opt-kpi-card:hover {
  transform: translateY(-2px);
  border-color: var(--teal, #001619);
}

.opt-kpi-card .opt-kpi-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-2, #94a3b8);
  letter-spacing: 0.5px;
}

.opt-kpi-card .opt-kpi-val {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-0, #f8fafc);
}

.opt-kpi-card .opt-kpi-sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--teal-light, #00d4b8);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* === PANELS & CARDS === */
.opt-panel {
  background: var(--bg-1, #0c1527);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: var(--radius-lg, 16px);
  padding: 20px 24px;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.2));
}

.opt-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  flex-wrap: wrap;
  gap: 10px;
}

.opt-panel-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-0, #f8fafc);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* === WORKFLOW KANBAN BOARDS === */
.opt-kanban-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  align-items: flex-start;
}

.opt-kanban-col {
  background: var(--bg-2, #111d35);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: var(--radius-md, 12px);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 280px;
}

.opt-kanban-col-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text-1, #cbd5e1);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
}

.opt-kanban-col-count {
  background: var(--bg-0, #060b14);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--teal, #001619);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
}

.opt-kanban-card {
  background: var(--bg-card, rgba(17, 29, 53, 0.95));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: var(--radius-sm, 8px);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: transform 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}

.opt-kanban-card:hover {
  transform: translateY(-2px);
  border-color: var(--teal, #001619);
}

.opt-kanban-card-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-0, #f8fafc);
  display: flex;
  justify-content: space-between;
}

.opt-kanban-card-meta {
  font-size: 11px;
  color: var(--text-2, #94a3b8);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* === SERVICE BAY BOARD (CAR WASH / WORKSHOPS) === */
.opt-bay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.opt-bay-card {
  background: var(--bg-2, #111d35);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: var(--radius-md, 12px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.opt-bay-card.busy {
  border-color: var(--blue, #3b82f6);
  background: linear-gradient(180deg, rgba(59,130,246,0.05), var(--bg-2, #111d35));
}

.opt-bay-card.available {
  border-color: var(--green, #001619);
}

/* === ROOM GRID (HOTEL PMS) === */
.opt-room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}

.opt-room-tile {
  background: var(--bg-2, #111d35);
  border: 1.5px solid var(--border, rgba(255,255,255,0.08));
  border-radius: var(--radius-md, 12px);
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  text-align: center;
}

.opt-room-tile:hover {
  transform: scale(1.03);
}

.opt-room-tile.available { border-color: var(--green, #001619); color: var(--green, #001619); }
.opt-room-tile.occupied  { border-color: var(--blue, #3b82f6); color: var(--blue, #3b82f6); background: rgba(59,130,246,0.08); }
.opt-room-tile.dirty     { border-color: var(--orange, #f59e0b); color: var(--orange, #f59e0b); }
.opt-room-tile.reserved  { border-color: var(--purple, #8b5cf6); color: var(--purple, #8b5cf6); }

.opt-room-num { font-size: 16px; font-weight: 900; color: var(--text-0, #f8fafc); }
.opt-room-type { font-size: 10px; color: var(--text-2, #94a3b8); font-weight: 600; }
.opt-room-status { font-size: 10px; font-weight: 800; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; }

/* === TIMELINE (CUSTOMER 360) === */
.opt-timeline {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  padding-left: 24px;
}

.opt-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--border, rgba(255,255,255,0.1));
}

.opt-timeline-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.opt-timeline-dot {
  position: absolute;
  left: -24px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--teal, #001619);
  border: 2px solid var(--bg-1, #0c1527);
}

.opt-timeline-time {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2, #94a3b8);
}

.opt-timeline-content {
  background: var(--bg-2, #111d35);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: var(--radius-sm, 8px);
  padding: 10px 14px;
  font-size: 13px;
}

/* === EMPTY, LOADING & ERROR STATES === */
.opt-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 12px;
  color: var(--text-2, #94a3b8);
}

.opt-empty-icon {
  font-size: 40px;
  color: var(--teal, #001619);
  opacity: 0.8;
}

.opt-empty-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-0, #f8fafc);
}

.opt-empty-desc {
  font-size: 13px;
  max-width: 400px;
  line-height: 1.5;
}

.opt-loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  gap: 12px;
  font-weight: 700;
  color: var(--teal, #001619);
}

.opt-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(0,176,155,0.2);
  border-top-color: var(--teal, #001619);
  border-radius: 50%;
  animation: opt-spin 0.8s linear infinite;
}

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

.opt-error-banner {
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.3);
  color: #fca5a5;
  padding: 12px 18px;
  border-radius: var(--radius-sm, 8px);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* === MOBILE BOTTOM NAVIGATION BAR === */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--bg-1, #0c1527);
  border-top: 1px solid var(--border, rgba(255,255,255,0.1));
  z-index: 9999;
  justify-content: space-around;
  align-items: center;
  padding: 0 4px;
  backdrop-filter: none;
}

.mobile-nav-btn {
  background: transparent;
  border: none;
  color: var(--text-2, #94a3b8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  flex: 1;
  height: 100%;
  transition: color 0.15s ease;
}

.mobile-nav-btn.active,
.mobile-nav-btn:hover {
  color: var(--teal-light, #00cfb5);
}

/* [MOBILE RESPONSIVE — see comprehensive block at end of file] */

/* ============================================================
   MILESTONE 25 — PRODUCTION OPERATIONS & WORK QUEUE STYLES
   ============================================================ */

.role-qa-btn {
  background: var(--surface-2, #1e293b);
  border: 1px solid var(--border, #334155);
  color: var(--text-0, #f8fafc);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}
.role-qa-btn:hover {
  background: var(--teal, #14b8a6);
  color: #ffffff;
  border-color: var(--teal, #14b8a6);
  transform: translateY(-1px);
}

.filter-pill {
  background: var(--surface-2, #1e293b);
  border: 1px solid var(--border, #334155);
  color: var(--text-2, #94a3b8);
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.filter-pill:hover,
.filter-pill.active {
  background: var(--teal, #14b8a6);
  color: #ffffff;
  border-color: var(--teal, #14b8a6);
}

.queue-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.queue-tag-pending { background: rgba(59, 130, 246, 0.15); color: var(--blue, #3b82f6); border: 1px solid rgba(59, 130, 246, 0.3); }
.queue-tag-in_progress { background: rgba(245, 158, 11, 0.15); color: var(--amber, #f59e0b); border: 1px solid rgba(245, 158, 11, 0.3); }
.queue-tag-waiting { background: rgba(139, 92, 246, 0.15); color: var(--purple, #8b5cf6); border: 1px solid rgba(139, 92, 246, 0.3); }
.queue-tag-overdue { background: rgba(239, 68, 68, 0.15); color: var(--red, #ef4444); border: 1px solid rgba(239, 68, 68, 0.3); animation: pulse 2s infinite; }
.queue-tag-completed { background: rgba(16, 185, 129, 0.15); color: var(--green, #001619); border: 1px solid rgba(16, 185, 129, 0.3); }

.kds-station-pill {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-1);
  cursor: pointer;
}
.kds-station-pill.active {
  background: var(--orange, #f97316);
  color: #fff;
  border-color: var(--orange, #f97316);
}


/* ============================================================
   ODOO VIBRANT UI — FLOOR PLAN & POS MODERNIZATION
   ============================================================ */

/* --- Odoo Brand Theme Variables --- */
:root {
  --odoo-primary: #714B67;
  --odoo-primary-dark: #583a50;
  --odoo-primary-light: #8e5b82;
  --odoo-teal: #017E84;
  --odoo-teal-dark: #00666b;
  --odoo-teal-light: #00A09D;
  --odoo-card-bg: #ffffff;
  --odoo-card-border: #e2e8f0;
  --odoo-card-hover-border: #714b67;
  --odoo-shadow-sm: 0 2px 6px rgba(0,0,0,0.04);
  --odoo-shadow-md: 0 4px 14px rgba(0,0,0,0.06);
  --odoo-shadow-lg: 0 10px 25px rgba(113,75,103,0.12);
  --odoo-radius: 12px;
  --odoo-radius-lg: 16px;
}

/* --- Odoo KPI Stats Grid at Top of Floor Plan --- */
.odoo-kpi-stats-banner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.odoo-kpi-stat-card {
  background: var(--odoo-card-bg);
  border: 1px solid var(--odoo-card-border);
  border-radius: var(--odoo-radius-lg);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--odoo-shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.odoo-kpi-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--odoo-shadow-md);
  border-color: #cbd5e1;
}

.odoo-kpi-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

.odoo-kpi-content {
  flex: 1;
  min-width: 0;
}

.odoo-kpi-val {
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

.odoo-kpi-lbl {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.odoo-kpi-sub {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Vibrant Horizontal Zone Bar --- */
.odoo-zone-pills-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  scrollbar-width: thin;
}

.odoo-zone-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.odoo-zone-pill-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
  transform: translateY(-1px);
}

.odoo-zone-pill-btn.active {
  background: linear-gradient(135deg, var(--odoo-primary), var(--odoo-primary-light));
  color: #ffffff;
  border-color: var(--odoo-primary);
  box-shadow: 0 4px 12px rgba(113, 75, 103, 0.3);
}

.odoo-zone-pill-btn .pill-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
  background: rgba(0,0,0,0.06);
  color: inherit;
}

.odoo-zone-pill-btn.active .pill-badge {
  background: rgba(255,255,255,0.25);
  color: #ffffff;
}

/* --- Filter & Search Toolbar --- */
.odoo-tables-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.odoo-search-box {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 12px;
  min-width: 260px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}

.odoo-search-box input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  width: 100%;
  color: #1e293b;
}

.odoo-status-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.odoo-filter-chip {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  transition: all 0.12s ease;
}

.odoo-filter-chip:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.odoo-filter-chip.active {
  background: #0f172a;
  color: #ffffff;
  border-color: #0f172a;
}

/* --- Table Grid & Vibrant Cards --- */
.tables-floor-grid.sambapos-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  gap: 16px !important;
  align-content: start !important;
}

.odoo-table-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--odoo-radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  min-height: 168px;
  box-shadow: var(--odoo-shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  position: relative;
  overflow: hidden;
  user-select: none;
}

.odoo-table-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--odoo-shadow-lg);
  border-color: var(--odoo-card-hover-border);
}

.odoo-table-card:active {
  transform: scale(0.98);
}

/* Card Top Accent Line */
.odoo-table-accent-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

/* Table Card Header */
.odoo-table-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}

.odoo-table-name {
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
}

.odoo-status-pill {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.odoo-table-meta-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 12px;
}

.odoo-seats-badge {
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
}

/* Occupied Content Box */
.odoo-card-occupied-box {
  background: #fdfaf6;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: auto;
}

.odoo-server-line {
  font-size: 11px;
  font-weight: 700;
  color: #9a3412;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.odoo-ticket-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.odoo-item-count-chip {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}

.odoo-balance-pill {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #e2e8f0;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
}

/* Vacant Content Box */
.odoo-card-vacant-box {
  margin-top: auto;
  padding: 8px 0 0;
  border-top: 1px dashed #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.odoo-vacant-hint {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}

.odoo-open-btn {
  background: linear-gradient(135deg, var(--odoo-teal), var(--odoo-teal-light));
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(1,126,132,0.25);
  transition: opacity 0.12s;
}

.odoo-open-btn:hover {
  opacity: 0.92;
}

/* --- Modern Sidebar Overhaul --- */
.tables-side {
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  box-shadow: var(--odoo-shadow-sm) !important;
}

.zone-list-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #334155 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
  margin-bottom: 4px !important;
}

.zone-list-btn:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
}

.zone-list-btn.active {
  background: linear-gradient(135deg, #714B67, #8e5b82) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(113,75,103,0.25) !important;
}

/* ============================================================
   TABLES TAB LAYOUT FIX � KPI bar compact horizontal strip
   ============================================================ */

/* Make the list-view fill remaining flex space as a column */
#tables-list-view {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  overflow: hidden !important;
  min-height: 0 !important;
}

/* KPI stats bar: compact single horizontal row, no huge tall cards */
#table-stats-bar {
  flex-shrink: 0;
}

#table-stats-bar .odoo-kpi-stats-banner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
  padding: 0 20px !important;
  overflow-x: auto !important;
}

#table-stats-bar .odoo-kpi-stat-card {
  flex: 1 1 140px !important;
  min-width: 120px !important;
  max-width: 220px !important;
  padding: 10px 12px !important;
  gap: 10px !important;
}

#table-stats-bar .odoo-kpi-icon-box {
  width: 36px !important;
  height: 36px !important;
  font-size: 18px !important;
  border-radius: 10px !important;
}

#table-stats-bar .odoo-kpi-val {
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

#table-stats-bar .odoo-kpi-lbl {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}

#table-stats-bar .odoo-kpi-sub {
  font-size: 10px !important;
}

/* Floor grid area fills remaining space after the compact KPI strip */
.tables-view-layout {
  flex: 1 1 0 !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.tables-main {
  overflow-y: auto !important;
  min-height: 0 !important;
}

.tables-side {
  overflow-y: auto !important;
  min-height: 0 !important;
}
/* -- Zone Manager Modal Styles -- */
.zm-zone-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: background 0.15s;
}
.zm-zone-row:hover { background: var(--bg-1); }
.zm-zone-color-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.zm-zone-info { flex: 1; min-width: 0; }
.zm-zone-name { font-weight: 700; font-size: 14px; color: var(--text-0); }
.zm-zone-meta { font-size: 11px; color: var(--text-2); margin-top: 2px; }
.zm-zone-actions { display: flex; gap: 6px; }
.zm-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 32px; height: 32px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  transition: background 0.15s;
}
.zm-btn:hover { background: var(--bg-1); }
.zm-btn-delete:hover { border-color: var(--red); }

/* ═══════════════════════════════════════════════════════════════
   OPT MANAGER TERMINAL REAL LOCK SCREEN (PRIVATE & SECURE KIOSK)
   ═══════════════════════════════════════════════════════════════ */

/* ============================================================
   SAMBAPOS-STYLE LIGHT THEME LOCK SCREEN
   Two-column layout: Branding left | PIN entry right
   ============================================================ */

/* Hidden state */
#staff-login-overlay.hidden,
#staff-login-overlay[style*="display: none"],
#staff-login-overlay[style*="display:none"],
.samba-lock-overlay.hidden {
  display: none !important;
}

/* OUTER WRAPPER */
.samba-lock-overlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 100000 !important;
  background: #ebebeb !important;
  display: flex !important;
  flex-direction: row !important;
  overflow: hidden !important;
  animation: fadeIn 0.25s ease;
}

/* LEFT PANEL: Branding */
.samba-lock-left {
  width: 42%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 48px 40px;
  position: relative;
  border-right: 1px solid #d1d5db;
  background: #f4f4f4;
}

.samba-lock-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.samba-lock-logo {
  max-width: 220px;
  max-height: 100px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  background: #ffffff;
  padding: 8px 14px;
}

.samba-lock-propname {
  font-size: 28px;
  font-weight: 900;
  color: #1a1a2e;
  line-height: 1.2;
  max-width: 320px;
}

.samba-lock-station {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}

.samba-lock-work-warning {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  color: #dc2626;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-align: center;
}

/* RIGHT PANEL: PIN Entry */
.samba-lock-right {
  width: 58%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 60px;
  gap: 10px;
  background: #ebebeb;
}

.samba-lock-datetime-row {
  width: 100%;
  max-width: 360px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #64748b;
  margin-bottom: 6px;
}

.samba-lock-live-badge {
  color: #dc2626;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1px;
  border: 1px solid #dc2626;
  padding: 1px 6px;
  border-radius: 3px;
}

.samba-lock-pin-display {
  width: 100%;
  max-width: 360px;
  padding: 14px 18px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 10px;
  border: 2px solid #f59e0b;
  border-radius: 6px;
  background: #ffffff;
  color: #0f172a;
  text-align: center;
  outline: none;
  cursor: default;
  caret-color: transparent;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}

.samba-lock-pin-display::placeholder {
  color: #94a3b8;
  font-size: 15px;
  letter-spacing: 2px;
  font-weight: 500;
}

.pin-error-msg {
  display: none !important;
  width: 100%;
  max-width: 360px;
  color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.08) !important;
  border: 1px solid rgba(220, 38, 38, 0.3) !important;
  border-radius: 6px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-sizing: border-box;
}

.pin-error-msg.visible {
  display: flex !important;
  animation: pinPopShake 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes pinPopShake {
  0% { transform: scale(0.92); opacity: 0; }
  35% { transform: scale(1.03) translateX(-5px); opacity: 1; }
  55% { transform: scale(1) translateX(5px); }
  75% { transform: translateX(-2px); }
  100% { transform: translateX(0); opacity: 1; }
}

.samba-lock-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 360px;
}

.samba-key {
  height: 68px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 22px;
  font-weight: 700;
  color: #1a1a2e;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  user-select: none;
}

.samba-key:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.samba-key:active {
  transform: scale(0.94);
  background: #e2e8f0;
  box-shadow: none;
}

.samba-key-clear {
  color: #374151;
  font-size: 18px;
  border-color: #e5e7eb;
}

.samba-key-clear:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #dc2626;
}

.samba-key-enter {
  color: #374151;
  font-size: 20px;
  border-color: #e5e7eb;
}

.samba-key-enter:hover {
  background: #f8fafc;
  border-color: #86efac;
  color: #001619;
}

.samba-lock-licensed {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  margin-top: 4px;
  width: 100%;
  max-width: 360px;
  text-align: center;
}

.samba-lock-pin-hint {
  font-size: 12px;
  color: #64748b;
  text-align: center;
  width: 100%;
  max-width: 360px;
}

.samba-lock-power-btn {
  margin-top: 6px;
  width: 46px;
  height: 46px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  border-radius: 6px;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  color: #374151;
}

.samba-lock-power-btn:hover {
  background: #fee2e2;
  border-color: #f87171;
  color: #dc2626;
}

@media (max-width: 640px) {
  .samba-lock-overlay { flex-direction: column !important; }
  .samba-lock-left { width: 100% !important; padding: 24px !important; border-right: none !important; border-bottom: 1px solid #d1d5db !important; }
  .samba-lock-right { width: 100% !important; padding: 24px !important; }
}



/* ============================================================
   SAMBAPOS 5.7.24 EXACT FLOOR PLAN STYLES
   ============================================================ */

/* --- Floor Container: full height, white background --- */
.samba-floor-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #ffffff;
  font-family: 'Segoe UI', Arial, sans-serif;
  overflow: hidden;
}

/* --- Top Bar: dark gray header --- */
.samba-floor-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #3c3c3c;
  color: #fff;
  padding: 5px 14px;
  font-size: 13px;
  min-height: 34px;
  flex-shrink: 0;
}
.samba-floor-topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.samba-floor-logo {
  font-weight: 900;
  font-size: 14px;
  color: #fff;
}
.samba-floor-version {
  background: #c00;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 2px;
}
.samba-floor-badge {
  background: #555;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 2px;
  border: 1px solid #777;
}
.samba-floor-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #ccc;
}
.samba-floor-demo {
  color: #f00;
  font-weight: 800;
  font-size: 11px;
}

/* --- Zone Tabs: All Tables | Bar | Restaurant --- */
.samba-zone-tabs {
  display: flex;
  background: #e8e8e8;
  border-bottom: 1px solid #bbb;
  flex-shrink: 0;
}
.samba-zone-tab {
  flex: 1;
  max-width: 240px;
  padding: 10px 20px;
  background: #e0e0e0;
  border: none;
  border-right: 1px solid #bbb;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
}
.samba-zone-tab:hover { background: #d0d0d0; }
.samba-zone-tab.active {
  background: #fff;
  font-weight: 700;
  color: #111;
  border-bottom: 2px solid #fff;
  margin-bottom: -1px;
}

/* --- Table Grid: 7 columns, auto rows --- */
.samba-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  gap: 0;
  border-left: 1px solid #ccc;
  border-top: 1px solid #ccc;
  overflow: auto;
  padding: 0;
}

/* --- Each Table Button --- */
.samba-table-btn {
  background: #fff;
  border: none;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  font-size: 1.5rem;
  font-weight: 700;
  color: #111;
  cursor: pointer;
  padding: 0;
  aspect-ratio: unset;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s, color 0.1s;
  letter-spacing: -0.5px;
  user-select: none;
}
.samba-table-btn:hover { background: #f5f5f5; }
.samba-table-btn:active { background: #e8e8e8; transform: scale(0.97); }
.samba-table-btn.selected,
.samba-table-btn.active-table {
  background: #f5a623;
  color: #fff;
  font-weight: 800;
}
.samba-table-btn.occupied {
  background: #ffc107;
  color: #333;
}
.samba-table-btn.bill {
  background: #dc2626;
  color: #fff;
}
.samba-table-btn.reserved {
  background: #7b1fa2;
  color: #fff;
}

/* --- Bottom Bar --- */
.samba-floor-bottombar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #e0e0e0;
  border-top: 1px solid #bbb;
  padding: 5px 12px;
  min-height: 34px;
  flex-shrink: 0;
}
.samba-floor-bottom-btn {
  background: #d0d0d0;
  border: 1px solid #aaa;
  border-radius: 2px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
}
.samba-floor-bottom-btn:hover { background: #c0c0c0; }
.samba-floor-bottom-right {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #333;
}
.samba-floor-separator { color: #aaa; }

/* ============================================================
   SAMBAPOS ORDER VIEW — BAR/RESTAURANT DEPT TOGGLE
   ============================================================ */

.samba-dept-toggle-bar {
  display: flex;
  gap: 0;
  margin-bottom: 6px;
  border: 1px solid #c0c4c9;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.samba-dept-toggle-btn {
  flex: 1;
  padding: 8px 10px;
  background: #f5f5f5;
  border: none;
  font-size: 13px;
  font-weight: 700;
  color: #555;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  border-right: 1px solid #c0c4c9;
}
.samba-dept-toggle-btn:last-child { border-right: none; }
.samba-dept-toggle-btn.active {
  background: #e65100;
  color: #fff;
}
.samba-dept-toggle-btn:hover:not(.active) { background: #e8e8e8; }


/* ============================================================
   ULTRA-MODERN KITCHEN DISPLAY SYSTEM (KDS) REVAMP STYLES
   ============================================================ */

/* KDS Full Module Container */
#tab-kds.tab-module {
  background: #090d16 !important;
  color: #e2e8f0 !important;
  min-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  padding: 0;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
}

#tab-kds.tab-module:not(.active) {
  display: none !important;
}

/* Master KDS Header */
.kds-master-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: #0f172a;
  border-bottom: 1px solid #1e293b;
  box-shadow: 0 4px 15px rgba(0,0,0,0.4);
  position: sticky;
  top: 0;
  z-index: 50;
}

.kds-brand-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kds-live-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  color: #001619;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.8px;
}

.kds-live-dot {
  width: 8px;
  height: 8px;
  background: #001619;
  border-radius: 50%;
  box-shadow: 0 0 8px #001619;
  animation: kds-pulse-dot 1.5s infinite;
}

@keyframes kds-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.kds-master-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #f8fafc;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.3px;
}

.kds-master-title svg {
  color: #38bdf8;
}

.kds-counter-pill {
  background: #1e293b;
  color: #38bdf8;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #334155;
}

.kds-rush-pill {
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  animation: rush-blink 1s infinite;
  box-shadow: 0 0 10px rgba(220, 38, 38, 0.5);
}

/* KDS Filter Bar */
.kds-filter-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

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

.kds-group-tag {
  font-size: 10px;
  font-weight: 800;
  color: #64748b;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.kds-chip-row {
  display: flex;
  gap: 4px;
}

.kds-chip {
  background: #1e293b;
  border: 1px solid #334155;
  color: #94a3b8;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.kds-chip:hover {
  background: #334155;
  color: #f1f5f9;
}

.kds-chip.active {
  background: #0284c7;
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(2, 132, 199, 0.4);
}

/* Utility Action Buttons */
.kds-utility-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kds-util-btn {
  background: #1e293b;
  border: 1px solid #334155;
  color: #cbd5e1;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.kds-util-btn:hover {
  background: #334155;
  color: #fff;
}

.kds-util-btn.active {
  background: #0284c7;
  color: #fff;
  border-color: #38bdf8;
}

.kds-recall-btn:hover {
  background: #475569;
}

.kds-master-clock {
  font-family: 'Courier New', monospace;
  font-size: 18px;
  font-weight: 800;
  color: #38bdf8;
  background: #0b1120;
  border: 1px solid #1e293b;
  padding: 4px 12px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

/* Expo Summary Drawer */
.kds-expo-summary-drawer {
  background: #0f172a;
  border-bottom: 1px solid #1e293b;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.kds-expo-summary-drawer.collapsed {
  display: none;
}

.kds-expo-title {
  font-size: 11px;
  font-weight: 800;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  letter-spacing: 0.5px;
}

.kds-expo-items-list {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}

.kds-expo-pill {
  background: #1e293b;
  border: 1px solid #334155;
  color: #f1f5f9;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.kds-expo-pill:hover,
.kds-expo-pill.highlighted {
  background: #0284c7;
  border-color: #38bdf8;
  transform: translateY(-1px);
}

.kds-expo-qty {
  background: #0284c7;
  color: #fff;
  font-weight: 900;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
}

/* KDS Orders Grid */
.kds-orders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 16px !important;
  padding: 20px !important;
  flex: 1;
  align-content: start;
  overflow-y: auto;
}

/* Individual KDS Card */
.kds-card {
  background: #131d31 !important;
  border: 1px solid #1e293b !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease !important;
  position: relative;
}

.kds-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.6) !important;
}

/* Header border status indicators */
.kds-card.time-normal {
  border-top: 4px solid #001619 !important;
}

.kds-card.time-warning {
  border-top: 4px solid #f59e0b !important;
}

.kds-card.time-danger {
  border-top: 4px solid #ef4444 !important;
  border-color: #ef4444 !important;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.3) !important;
}

.kds-card.status-ready {
  border: 2px solid #001619 !important;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.4) !important;
}

.kds-card.rush-order {
  border: 2px solid #ef4444 !important;
  animation: kds-rush-glow 1.5s infinite alternate;
}

@keyframes kds-rush-glow {
  0% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.3); }
  100% { box-shadow: 0 0 22px rgba(239, 68, 68, 0.7); }
}

/* Card Header */
.kds-card-head {
  padding: 12px 14px !important;
  background: #0f172a !important;
  border-bottom: 1px solid #1e293b !important;
}

.kds-card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.kds-table-title {
  font-size: 18px;
  font-weight: 900;
  color: #f8fafc;
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kds-seq-badge {
  background: #334155;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

.kds-live-timer {
  font-family: 'Courier New', monospace;
  font-size: 15px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.kds-live-timer.green {
  background: rgba(16, 185, 129, 0.15);
  color: #001619;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.kds-live-timer.orange {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.kds-live-timer.red {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.4);
  animation: rush-blink 1s infinite;
}

.kds-card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #94a3b8;
  margin-top: 4px;
}

.kds-server-info {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #cbd5e1;
  font-weight: 600;
}

.kds-ticket-num {
  font-size: 11px;
  color: #64748b;
  font-weight: 700;
}

/* Allergy & Priority Banner */
.kds-allergy-banner {
  background: #7f1d1d;
  color: #fecaca;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #991b1b;
  letter-spacing: 0.3px;
  animation: rush-blink 1.2s infinite;
}

.kds-order-note-banner {
  background: #1e293b;
  color: #fbbf24;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-bottom: 1px solid #334155;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Items List */
.kds-items-list {
  padding: 12px !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  max-height: 380px;
  overflow-y: auto;
}

.kds-order-item {
  display: flex;
  align-items: flex-start;
  padding: 10px 12px !important;
  background: #1e293b !important;
  border: 1px solid #293548 !important;
  border-radius: 8px !important;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.kds-order-item:hover {
  background: #273549 !important;
  border-color: #3b82f6 !important;
}

.kds-order-item.item-done {
  background: rgba(15, 23, 42, 0.6) !important;
  border-color: #1e293b !important;
  opacity: 0.45;
}

.kds-order-item.item-done .kds-item-name {
  text-decoration: line-through;
  color: #64748b;
}

.kds-item-qty {
  font-size: 17px !important;
  font-weight: 900 !important;
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.15);
  padding: 2px 8px;
  border-radius: 6px;
  min-width: 36px;
  text-align: center;
  flex-shrink: 0;
}

.kds-order-item.item-done .kds-item-qty {
  color: #64748b !important;
  background: rgba(100, 116, 139, 0.15);
}

.kds-item-details {
  flex: 1;
  margin-left: 10px;
}

.kds-item-name {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #f8fafc;
  line-height: 1.3;
}

.kds-mod {
  font-size: 12px;
  color: #38bdf8;
  margin-top: 3px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.kds-item-note {
  font-size: 11px;
  color: #fbbf24;
  margin-top: 3px;
  font-style: italic;
  font-weight: 600;
}

.kds-course-tag {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 6px;
  flex-shrink: 0;
}

.kds-course-starter { background: rgba(168, 85, 247, 0.2); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.3); }
.kds-course-main { background: rgba(14, 165, 233, 0.2); color: #38bdf8; border: 1px solid rgba(14, 165, 233, 0.3); }
.kds-course-dessert { background: rgba(236, 72, 153, 0.2); color: #f472b6; border: 1px solid rgba(236, 72, 153, 0.3); }
.kds-course-bar { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }

.kds-item-check-btn {
  background: #0f172a;
  border: 1px solid #334155;
  color: #64748b;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
  margin-left: 8px;
  transition: all 0.15s ease;
}

.kds-order-item.item-done .kds-item-check-btn {
  background: #001619;
  color: #fff;
  border-color: #001619;
}

/* Card Action Footer */
.kds-card-actions {
  display: flex !important;
  gap: 8px !important;
  padding: 10px 12px 12px !important;
  background: #0f172a !important;
  border-top: 1px solid #1e293b !important;
}

.btn-kds-rush {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  padding: 10px 12px !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-kds-rush:hover {
  background: #ef4444 !important;
  color: #fff !important;
}

.btn-kds-ready {
  flex: 1;
  background: rgba(34, 197, 94, 0.15) !important;
  color: #001619 !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
  padding: 10px 12px !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.btn-kds-ready:hover {
  background: #001619 !important;
  color: #fff !important;
}

.btn-kds-ready.ready-active {
  background: #001619 !important;
  color: #ffffff !important;
  animation: kds-pulse-ready 1.5s infinite;
}

@keyframes kds-pulse-ready {
  0%, 100% { box-shadow: 0 0 8px rgba(34, 197, 94, 0.6); }
  50% { box-shadow: 0 0 18px rgba(34, 197, 94, 0.9); }
}

.btn-kds-bump {
  flex: 2;
  background: #0284c7 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 10px 14px !important;
  border-radius: 6px !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
  transition: all 0.15s ease;
}

.btn-kds-bump:hover {
  background: #0369a1 !important;
  transform: translateY(-1px);
}

.btn-kds-bump:active {
  transform: translateY(1px);
}

/* ==========================================================================
   GYM & FITNESS CLUB OPERATIONS MODULE (REVAMPED)
   ========================================================================== */

.gym-master-header {
  background: var(--bg-1, #ffffff);
  border-bottom: 1px solid var(--border, #e2e8f0);
  padding: 16px 22px;
  margin-bottom: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.gym-brand-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gym-brand-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-0, #001619);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.02em;
}

.gym-subnav-bar {
  display: flex;
  gap: 4px;
  background: var(--bg-2, #f8fafc);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--border, #e2e8f0);
  overflow-x: auto;
}

.gym-subnav-btn {
  background: transparent;
  border: 1px solid transparent;
  padding: 7px 13px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2, #64748b);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.gym-subnav-btn:hover {
  color: var(--text-0, #001619);
  background: var(--bg-1, #ffffff);
  border-color: var(--border, #e2e8f0);
}

.gym-subnav-btn.active {
  background: #001619;
  color: #ffffff;
  border-color: #001619;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);
}

.gym-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Professional Corporate Gym KPI Cards */
.gym-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.gym-kpi-card {
  background: var(--bg-1, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gym-kpi-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05);
}

/* No AI RGB left bars */
.gym-kpi-card::before,
.gym-kpi-card.kpi-blue::before,
.gym-kpi-card.kpi-green::before,
.gym-kpi-card.kpi-orange::before,
.gym-kpi-card.kpi-teal::before,
.gym-kpi-card.kpi-purple::before {
  display: none !important;
}

.gym-kpi-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-2, #64748b);
  margin-bottom: 6px;
}

.gym-kpi-val {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-0, #001619);
  line-height: 1.1;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.gym-kpi-sub {
  font-size: 11px;
  color: var(--text-2, #64748b);
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}

/* Gym Views Container */
.gym-view-container {
  display: none;
}

.gym-view-container.active {
  display: block;
}

/* Gym Classes Grid */
.gym-classes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.gym-class-card {
  background: var(--bg-1, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 0.15s ease;
}

.gym-class-card:hover {
  border-color: #cbd5e1;
}

.gym-class-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.gym-class-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-0, #001619);
}

.gym-class-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.gym-class-meta {
  font-size: 12px;
  color: var(--text-2, #64748b);
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gym-capacity-bar-wrap {
  margin-bottom: 14px;
}

.gym-capacity-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2, #64748b);
  margin-bottom: 4px;
}

.gym-capacity-bar-bg {
  height: 6px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}

.gym-capacity-fill {
  height: 100%;
  border-radius: 999px;
  background: #001619;
  transition: width 0.3s ease;
}

/* Gym Trainers Grid */
.gym-trainers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.gym-trainer-card {
  background: var(--bg-1, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: border-color 0.15s ease;
}

.gym-trainer-card:hover {
  border-color: #cbd5e1;
}

.gym-trainer-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #001619;
  border: 1px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 12px;
  box-shadow: none;
}

.gym-trainer-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-0, #001619);
  margin-bottom: 2px;
}

.gym-trainer-role {
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 6px;
}

.gym-trainer-specialty {
  font-size: 11px;
  color: var(--text-2, #64748b);
  margin-bottom: 14px;
}

/* Gym Plans Grid */
.gym-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.gym-plan-card {
  background: var(--bg-1, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gym-plan-card:hover {
  border-color: #001619;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.gym-plan-card.highlight {
  border: 1.5px solid #001619;
  background: #fafafa;
}

.gym-plan-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-0, #001619);
  margin-bottom: 6px;
}

.gym-plan-price {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-0, #001619);
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.gym-plan-price span {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2, #64748b);
}

.gym-plan-desc {
  font-size: 12px;
  color: var(--text-2, #64748b);
  margin-bottom: 16px;
  min-height: 36px;
}

.gym-plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
  font-size: 12px;
  color: var(--text-1, #334155);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gym-plan-features li {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Fast Check-In Kiosk UI */
.gym-kiosk-panel {
  background: var(--bg-1, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  max-width: 600px;
  margin: 0 auto 24px auto;
  text-align: center;
}

.gym-kiosk-input-wrap {
  position: relative;
  margin: 16px 0;
}

.gym-kiosk-input {
  width: 100%;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 18px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
  background: #ffffff;
  color: #001619;
}

.gym-kiosk-input:focus {
  border-color: #001619;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}

.gym-kiosk-result-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: left;
}

/* Gym Live Occupancy & Pro-Shop Strip Enhancements */
.gym-occupancy-banner {
  background: var(--bg-1, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.gym-proshop-strip {
  background: var(--bg-1, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.gym-proshop-strip .ds-btn:hover {
  transform: translateY(-1px);
  border-color: #001619;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.gym-finance-wrapper .opt-panel {
  background: var(--bg-1, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  overflow: hidden;
}

/* ==========================================================================
   SAMBAPOS V5 EXACT WORKSPACE & TOUCH MODAL SUITE
   ========================================================================== */

/* Selected Ticket Item Highlight */
.samba5-ticket-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid #e2e8f0;
  cursor: pointer;
  background: #ffffff;
  transition: background 0.15s ease, border-color 0.15s ease;
  user-select: none;
}

.samba5-ticket-item:hover {
  background: #f8fafc;
}

.samba5-ticket-item.selected {
  background: #e0f2fe !important;
  border-left: 4px solid #0284c7 !important;
}

.samba5-ticket-item.comped {
  text-decoration: line-through;
  opacity: 0.6;
}

.samba5-item-name {
  font-weight: 700;
  font-size: 13px;
  color: #0f172a;
}

.samba5-item-price {
  font-weight: 800;
  font-size: 13px;
  color: #0f172a;
}

.samba5-item-portion {
  font-size: 11px;
  font-weight: 700;
  color: #0284c7;
  margin-left: 4px;
}

.samba5-item-tags {
  font-size: 11px;
  color: #d97706;
  margin-top: 2px;
}

/* Touch Selected Item Action Strip */
.samba5-selected-actions-strip {
  display: none;
  background: #f1f5f9;
  border-top: 1px solid #cbd5e1;
  border-bottom: 1px solid #cbd5e1;
  padding: 6px 10px;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
}

.samba5-selected-actions-strip.active {
  display: flex;
}

.samba5-item-tool-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s;
}

.samba5-item-tool-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.samba5-item-tool-btn.danger {
  color: #dc2626;
  border-color: #fca5a5;
}

.samba5-item-tool-btn.danger:hover {
  background: #fef2f2;
}

/* Manage Topbar Button in POS */
.samba5-manage-btn {
  background: #1e293b !important;
  color: #f8fafc !important;
  font-weight: 800 !important;
  border-radius: 3px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 12px !important;
  border: 1px solid #334155 !important;
  cursor: pointer !important;
  font-size: 12px !important;
}

.samba5-manage-btn:hover {
  background: #334155 !important;
}

/* Touch Portions Modal Grid */
.touch-portions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.touch-portion-btn {
  background: #ffffff;
  border: 2px solid #cbd5e1;
  border-radius: 8px;
  padding: 16px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.touch-portion-btn:hover {
  border-color: #0284c7;
  background: #f0f9ff;
}

.touch-portion-name {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}

.touch-portion-mult {
  font-size: 12px;
  font-weight: 700;
  color: #0284c7;
}

/* Touch Void Reasons Grid */
.touch-void-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.touch-void-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 12px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
}

.touch-void-btn:hover {
  background: #fef2f2;
  border-color: #ef4444;
  color: #dc2626;
}

/* Touch Calculator UI */
.touch-calc-screen {
  background: #1e293b;
  color: #001619;
  font-family: monospace;
  font-size: 28px;
  font-weight: 900;
  text-align: right;
  padding: 14px 18px;
  border-radius: 8px;
  margin-bottom: 14px;
  letter-spacing: 1px;
  overflow-x: auto;
}

.touch-calc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.touch-calc-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 16px;
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  cursor: pointer;
  transition: all 0.1s;
}

.touch-calc-btn:hover {
  background: #f1f5f9;
}

.touch-calc-btn.op {
  background: #f8fafc;
  color: #0284c7;
}

.touch-calc-btn.eq {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}

.touch-calc-btn.eq:hover {
  background: #0369a1;
}


/* ============================================================
   SAMBAPOS V5 AUTHENTIC FLOOR PLAN & DYNAMIC TABLE ENGINE
   ============================================================ */

/* Floor Control Strip */
.samba-floor-control-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #34495e;
  border-bottom: 2px solid #2c3e50;
  padding: 4px 10px;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 42px;
}

.samba-floor-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.samba-zoom-btns,
.samba-table-ops-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}

.samba-tool-btn {
  background: #2c3e50;
  color: #ecf0f1;
  border: 1px solid #4a6278;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.12s ease;
  user-select: none;
}
.samba-tool-btn:hover {
  background: #1abc9c;
  color: #fff;
  border-color: #16a085;
}
.samba-tool-btn.primary {
  background: #27ae60;
  border-color: #219653;
  color: #fff;
}
.samba-tool-btn.primary:hover {
  background: #2ecc71;
}

.samba-autolock-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.25);
  color: #f1f5f9;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  border: 1px solid rgba(255,255,255,0.1);
}
.samba-autolock-checkbox input {
  cursor: pointer;
}

/* Authentic SambaPOS Seamless 7-Column Table Grid */
.samba-grid {
  flex: 1;
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  grid-auto-rows: minmax(85px, 1fr);
  gap: 0 !important;
  padding: 0 !important;
  border-left: 1px solid #ccc !important;
  border-top: 1px solid #ccc !important;
  background: #ffffff !important;
  overflow-y: auto !important;
  align-content: start;
}

/* Densities: keeps seamless 7 columns (or 8 for dense) while adjusting vertical compactness */
.samba-grid.density-spacious {
  grid-template-columns: repeat(7, 1fr) !important;
}
.samba-grid.density-spacious .samba-table-btn {
  min-height: 105px !important;
}
.samba-grid.density-spacious .samba-table-code {
  font-size: 1.45rem !important;
}

.samba-grid.density-normal {
  grid-template-columns: repeat(7, 1fr) !important;
}
.samba-grid.density-normal .samba-table-btn {
  min-height: 85px !important;
}
.samba-grid.density-normal .samba-table-code {
  font-size: 1.3rem !important;
}

.samba-grid.density-compact {
  grid-template-columns: repeat(7, 1fr) !important;
}
.samba-grid.density-compact .samba-table-btn {
  min-height: 72px !important;
  padding: 6px 8px !important;
}
.samba-grid.density-compact .samba-table-code {
  font-size: 1.15rem !important;
}
.samba-grid.density-compact .samba-table-total {
  font-size: 1.05rem !important;
}

.samba-grid.density-dense {
  grid-template-columns: repeat(8, 1fr) !important;
}
.samba-grid.density-dense .samba-table-btn {
  min-height: 62px !important;
  padding: 4px 6px !important;
}
.samba-grid.density-dense .samba-table-code {
  font-size: 1.0rem !important;
}
.samba-grid.density-dense .samba-table-total {
  font-size: 0.95rem !important;
}
.samba-grid.density-dense .samba-table-waiter {
  font-size: 9px !important;
  padding: 1px 3px !important;
}

@media (max-width: 700px) {
  .samba-grid,
  .samba-grid.density-spacious,
  .samba-grid.density-normal,
  .samba-grid.density-compact {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  .samba-grid.density-dense {
    grid-template-columns: repeat(5, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .samba-grid,
  .samba-grid.density-spacious,
  .samba-grid.density-normal,
  .samba-grid.density-compact,
  .samba-grid.density-dense {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Authentic SambaPOS Flat Seamless Tile Component */
.samba-table-btn {
  position: relative;
  background: #ffffff !important;
  border: none !important;
  border-right: 1px solid #ccc !important;
  border-bottom: 1px solid #ccc !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  cursor: pointer;
  user-select: none;
  transition: background 0.1s ease;
  box-shadow: none !important;
  text-align: left;
  overflow: hidden;
  min-height: 85px;
  box-sizing: border-box !important;
}

.samba-table-btn:hover {
  background: #f5f5f5 !important;
  box-shadow: none !important;
  transform: none !important;
}

.samba-table-btn:active {
  transform: none !important;
  background: #e8e8e8 !important;
}

/* Inner Container - completely transparent and seamless */
.samba-table-inner,
.samba-table-btn .samba-table-card {
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: auto !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.samba-table-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-bottom: 2px !important;
}

.samba-table-code {
  font-weight: 800 !important;
  line-height: 1 !important;
  font-size: 1.35rem !important;
  letter-spacing: -0.3px !important;
}

.samba-table-meta {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  opacity: 0.9 !important;
}

.samba-table-waiter {
  background: rgba(0, 0, 0, 0.22) !important;
  color: #ffffff !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  margin: 2px 0 !important;
}

.samba-table-total {
  font-weight: 900 !important;
  text-align: right !important;
  line-height: 1.1 !important;
  font-size: 1.2rem !important;
  letter-spacing: -0.3px !important;
}

.samba-table-sub {
  font-size: 11.5px !important;
  font-weight: 600 !important;
}
.samba-table-sub.vacant {
  color: #64748b !important;
}

.samba-table-seats-count {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #888888 !important;
  text-align: right !important;
}

.samba-table-tag {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 1px 5px !important;
  border-radius: 2px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin: 2px 0 !important;
}
.samba-table-tag.bill {
  background: rgba(0,0,0,0.3) !important;
  color: #ffffff !important;
}
.samba-table-tag.reserved {
  background: rgba(0,0,0,0.3) !important;
  color: #ffffff !important;
}

/* --- State: Vacant (SambaPOS Clean Flat White) --- */
.samba-table-btn.vacant {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #111111 !important;
}
.samba-table-btn.vacant .samba-table-code {
  color: #111111 !important;
}
.samba-table-btn.vacant .samba-table-meta {
  color: #666666 !important;
}
.samba-table-btn.vacant:hover {
  background: #f5f5f5 !important;
  background-color: #f5f5f5 !important;
}

/* --- State: Occupied / Open Orders (SambaPOS Signature Flat Amber / Golden Orange) --- */
.samba-table-btn.occupied {
  background: #f5a623 !important;
  background-color: #f5a623 !important;
  color: #ffffff !important;
}
.samba-table-btn.occupied .samba-table-code {
  color: #ffffff !important;
}
.samba-table-btn.occupied .samba-table-meta {
  color: #ffffff !important;
  background: rgba(0,0,0,0.18) !important;
  padding: 1px 5px !important;
  border-radius: 2px !important;
}
.samba-table-btn.occupied .samba-table-total {
  color: #ffffff !important;
}
.samba-table-btn.occupied:hover {
  background: #e69516 !important;
  background-color: #e69516 !important;
}

/* --- State: Bill Requested / Printed (RED — Needs Settlement) --- */
.samba-table-btn.bill {
  background: #dc2626 !important;
  background-color: #dc2626 !important;
  color: #ffffff !important;
}
.samba-table-btn.bill .samba-table-code {
  color: #ffffff !important;
}
.samba-table-btn.bill .samba-table-total {
  color: #ffffff !important;
}
.samba-table-btn.bill:hover {
  background: #b91c1c !important;
  background-color: #b91c1c !important;
}

/* --- State: Reserved (SambaPOS Ocean Blue) --- */
.samba-table-btn.reserved {
  background: #2980b9 !important;
  background-color: #2980b9 !important;
  color: #ffffff !important;
}
.samba-table-btn.reserved .samba-table-code {
  color: #ffffff !important;
}
.samba-table-btn.reserved:hover {
  background: #2471a3 !important;
  background-color: #2471a3 !important;
}

/* --- State: Selected / Active Table (SambaPOS Cyan Highlight Frame) --- */
.samba-table-btn.selected,
.samba-table-btn.active-table {
  outline: 3px solid #00d2d3 !important;
  outline-offset: -3px !important;
  box-shadow: none !important;
  z-index: 2;
}
.samba-table-btn.selected.vacant,
.samba-table-btn.active-table.vacant {
  background: #fef9c3 !important;
  background-color: #fef9c3 !important;
}
.samba-table-btn.selected.occupied,
.samba-table-btn.active-table.occupied {
  background: #d97706 !important;
  background-color: #d97706 !important;
}

/* Bottom Bar Extensions */
.samba-floor-bottom-btn.logout-accent {
  background: #c0392b;
  border-color: #962d22;
  color: #ffffff;
  font-weight: 700;
}
.samba-floor-bottom-btn.logout-accent:hover {
  background: #e74c3c;
}

.samba-floor-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  color: #1e293b;
  cursor: pointer;
}
.samba-floor-user-pill:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.samba-floor-badge-occ {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
}

/* POS Top Header Logout Button */
.samba5-top-logout-btn {
  background: #dc2626;
  color: #ffffff;
  border: 1px solid #b91c1c;
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.1s ease;
}
.samba5-top-logout-btn:hover {
  background: #ef4444;
}

/* POS Close & Lock Ticket Action */
.samba5-btn-close-lock {
  background: #e67e22;
  color: #ffffff;
  border: 1px solid #d35400;
  padding: 8px 12px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.1s ease;
}
.samba5-btn-close-lock:hover {
  background: #f39c12;
}
/* ============================================================
   SAMBAPOS V5 FULLSCREEN POS & DYNAMIC SCROLLING ENGINE (v49)
   ============================================================ */

/* 1. Hide ERP topbar and sidebars when in POS / Tables mode to give big UI for POS */
body.pos-fullscreen-active header.app-topbar,
body.pos-fullscreen-active .ds-topbar,
body.pos-fullscreen-active .ds-sidebar,
body.pos-fullscreen-active .sidebar,
body.pos-fullscreen-active .mobile-bottom-nav,
body.pos-fullscreen-active #app-update-banner {
  display: none !important;
}

body.pos-fullscreen-active {
  overflow: hidden !important;
}

body.pos-fullscreen-active .main-wrapper,
body.pos-fullscreen-active .ds-main {
  padding-top: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

body.pos-fullscreen-active .content-area {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.pos-fullscreen-active #tab-pos,
body.pos-fullscreen-active #tab-tables {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2. Responsive Sizing & Container Layout */
body.pos-fullscreen-active .samba5-screen-container {
  background: #eef0f2;
  color: #111;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  user-select: none;
}

body.pos-fullscreen-active .samba5-top-header {
  background: #ffffff;
  padding: 3px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #cbd5e1;
  flex-shrink: 0;
  height: 40px;
  max-height: 40px;
  overflow: hidden;
  white-space: nowrap;
}

body.pos-fullscreen-active .samba5-brand-left {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

body.pos-fullscreen-active .samba5-top-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* 3. 3-Column Workspace — Flexible & Scroll-Enabled */
body.pos-fullscreen-active .samba5-workspace {
  flex: 1;
  display: grid;
  grid-template-columns: 360px 130px 1fr;
  gap: 6px;
  padding: 6px 8px;
  min-height: 0; /* CRITICAL: allows grid children to shrink and scroll */
  height: calc(100vh - 68px);
  max-height: calc(100vh - 68px);
  overflow: hidden;
}

/* Column 1: Left Ticket Area */
body.pos-fullscreen-active .samba5-ticket-col {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 6px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.pos-fullscreen-active .samba5-side-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100%;
  min-height: 0;
  padding-right: 2px;
}

body.pos-fullscreen-active .samba5-side-btn {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #1e293b;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 3px;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: all 0.1s ease;
  flex-shrink: 0;
}
body.pos-fullscreen-active .samba5-side-btn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

body.pos-fullscreen-active .samba5-ticket-box {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.pos-fullscreen-active .samba5-ticket-header {
  background: #e2e8f0;
  padding: 5px 8px;
  border-bottom: 1px solid #cbd5e1;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  flex-shrink: 0;
}

body.pos-fullscreen-active .samba5-ticket-items-list {
  flex: 1;
  min-height: 60px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 6px;
  background: #ffffff;
}

body.pos-fullscreen-active .samba5-selected-actions-strip {
  background: #f1f5f9;
  border-top: 1px solid #cbd5e1;
  border-bottom: 1px solid #cbd5e1;
  padding: 4px 8px;
  display: none;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

body.pos-fullscreen-active .samba5-ticket-totals-box {
  background: #f8fafc;
  border-top: 1px solid #cbd5e1;
  padding: 5px 8px;
  flex-shrink: 0;
}

body.pos-fullscreen-active .samba5-ticket-bottom-actions {
  display: flex;
  gap: 4px;
  padding: 5px;
  background: #e2e8f0;
  border-top: 1px solid #cbd5e1;
  flex-shrink: 0; /* Ensures Settle & Close are ALWAYS visible */
}

body.pos-fullscreen-active .samba5-btn-settle {
  flex: 1.2;
  background: linear-gradient(135deg, #001619 0%, #001619 100%);
  border: 1px solid #047857;
  color: #ffffff;
  font-weight: 900;
  font-size: 16px;
  padding: 9px 4px;
  cursor: pointer;
  border-radius: 3px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: all 0.1s ease;
}
body.pos-fullscreen-active .samba5-btn-settle:hover {
  background: linear-gradient(135deg, #001619 0%, #047857 100%);
  transform: translateY(-1px);
}

body.pos-fullscreen-active .samba5-btn-close {
  flex: 0.8;
  background: #ef4444;
  border: 1px solid #dc2626;
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  padding: 9px 4px;
  cursor: pointer;
  border-radius: 3px;
  text-align: center;
  transition: all 0.1s ease;
}
body.pos-fullscreen-active .samba5-btn-close:hover {
  background: #dc2626;
}

body.pos-fullscreen-active .samba5-btn-close-lock {
  flex: 1;
  background: #f59e0b;
  border: 1px solid #d97706;
  color: #ffffff;
  font-weight: 800;
  font-size: 13px;
  padding: 9px 4px;
  cursor: pointer;
  border-radius: 3px;
  text-align: center;
  transition: all 0.1s ease;
}
body.pos-fullscreen-active .samba5-btn-close-lock:hover {
  background: #d97706;
}

/* Column 2: Categories Column */
body.pos-fullscreen-active .samba5-categories-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100%;
  min-height: 0;
  padding-right: 2px;
}

body.pos-fullscreen-active .samba5-cat-btn {
  background: #f39c12;
  border: 1px solid #d68910;
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  padding: 9px 4px;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  flex-shrink: 0;
  transition: all 0.1s ease;
}
body.pos-fullscreen-active .samba5-cat-btn:hover {
  background: #e67e22;
}
body.pos-fullscreen-active .samba5-cat-btn.active {
  background: #27ae60;
  border-color: #219653;
}

/* Column 3: Products & Numpad Column */
body.pos-fullscreen-active .samba5-products-numpad-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.pos-fullscreen-active .samba-dept-toggle-bar {
  flex-shrink: 0;
  margin-bottom: 2px;
}

body.pos-fullscreen-active .samba5-product-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
  min-height: 70px;
  padding: 2px;
}

body.pos-fullscreen-active .samba5-numpad-box {
  flex-shrink: 0;
  max-width: 300px;
  align-self: flex-end;
}

body.pos-fullscreen-active .samba5-num-key {
  padding: 8px 4px;
  font-size: 16px;
  font-weight: 700;
}

/* Footer Status Bar */
body.pos-fullscreen-active .samba5-footer-bar {
  background: #2c3e50;
  color: #ecf0f1;
  padding: 3px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  border-top: 1px solid #1a252f;
  flex-shrink: 0;
  height: 28px;
  max-height: 28px;
  overflow: hidden;
}

/* 4. Responsive Fallback: Enable Outer Scrolling on Short Viewports */
@media (max-height: 650px) {
  body.pos-fullscreen-active {
    overflow-y: auto !important;
  }
  body.pos-fullscreen-active .content-area,
  body.pos-fullscreen-active #tab-pos,
  body.pos-fullscreen-active .samba5-screen-container {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow-y: auto !important;
  }
  body.pos-fullscreen-active .samba5-workspace {
    height: auto !important;
    min-height: 540px !important;
    max-height: none !important;
  }
};

/* ==========================================================================
   PRINT MEDIA STYLESHEET FOR CLEAN ERP & REPORT PRINTING
   ========================================================================== */
@media print {
  /* Hide UI navigation, sidebar, topbar, buttons, modals, input pickers */
  #sidebar,
  .sidebar,
  .samba-bo-sidebar,
  .samba-bo-modules,
  .panel-topbar button,
  .panel-topbar .btn-ghost,
  .panel-topbar .btn-primary,
  .pos-header,
  header,
  #toast-container,
  #bo-modal-overlay,
  .btn-ghost,
  .btn-primary,
  input,
  select,
  .samba-bo-sublist,
  .metrics-grid .metric-trend,
  .floating-cart-toggle,
  #lock-screen-modal,
  .ds-sidebar,
  .header-actions {
    display: none !important;
  }

  body, html {
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 11pt !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    width: 100% !important;
  }

  .main-panel,
  .bo-section,
  #bo-dynamic,
  #bo-dynamic-content {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    position: static !important;
    overflow: visible !important;
  }

  .panel-topbar h2 {
    font-size: 18pt !important;
    color: #000000 !important;
    margin-bottom: 12pt !important;
  }

  .metrics-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10pt !important;
    margin-bottom: 15pt !important;
  }

  .metric-card {
    flex: 1 1 120pt !important;
    border: 1px solid #999999 !important;
    box-shadow: none !important;
    background: #f8fafc !important;
    color: #000000 !important;
    padding: 8pt !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  .metric-card .metric-label {
    font-size: 9pt !important;
    color: #555555 !important;
    font-weight: 700 !important;
  }

  .metric-card .metric-val {
    font-size: 14pt !important;
    color: #000000 !important;
    font-weight: 800 !important;
  }

  .data-table, table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 10pt !important;
  }

  .data-table th, .data-table td, table th, table td {
    border: 1px solid #cccccc !important;
    color: #000000 !important;
    padding: 5pt 8pt !important;
    font-size: 9.5pt !important;
  }

  .data-table thead, table thead {
    background: #eeeeee !important;
  }

  tr {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
}

/* Settle button styling when logged-in user is a Waiter / Service Attendant */
.samba5-btn-settle.settle-requires-auth {
  position: relative;
  background: linear-gradient(135deg, #475569 0%, #334155 100%) !important;
  border-color: #64748b !important;
  opacity: 0.95;
}

.samba5-btn-settle.settle-requires-auth::after {
  content: '🔒 Cashier Auth';
  display: block;
  font-size: 9px;
  font-weight: 800;
  color: #fbbf24;
  letter-spacing: 0.5px;
  margin-top: 1px;
}


/* ==========================================================================
   ENTERPRISE PLAIN PROFESSIONAL UI & BLUE CHARCOAL #001619 SPECIFICATION
   - No duplicate upper mirrored module subnav
   - Zero AI colors / rainbow gradients / neon green
   - Red (#dc2626) strictly for omitted steps, warnings, errors, overdue
   - Clean Blue Charcoal (#001619) for primary buttons, active tabs, dark accents
   ========================================================================== */

/* 1. Hide Upper Mirrored Module Navigation (only keep lower master nav) */
.odoo-module-subnav,
#odoo-module-subnav {
  display: none !important;
}

/* 2. Primary Buttons in Blue Charcoal #001619 */
.btn-primary,
.ds-btn-primary {
  background: #001619 !important;
  border-color: #001619 !important;
  color: #ffffff !important;
}
.btn-primary:hover,
.ds-btn-primary:hover {
  background: #022b31 !important;
  border-color: #022b31 !important;
  color: #ffffff !important;
}

/* 3. Live Connection & Indicator Dots (No Neon Green Pulse) */
.ds-connection-dot,
.shift-dot,
.kds-live-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #001619 !important;
  box-shadow: none !important;
  animation: none !important;
}
.ds-connection-indicator {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #001619 !important;
  padding: 3px 10px !important;
  border-radius: 9999px !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
}

/* 4. Plain Professional Status Badges (Zero Green/AI Colors) */
.status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: #f1f5f9;
  color: #001619;
  border: 1px solid #e2e8f0;
}
.status-badge.available,
.status-badge.paid,
.status-badge.received,
.status-badge.occupied,
.status-badge.approved,
.status-badge.confirmed,
.status-badge.open,
.status-badge.ready,
.badge-pill.teal,
.badge-pill.blue,
.badge-pill.green,
.badge-pill.purple {
  background: #f1f5f9 !important;
  color: #001619 !important;
  border: 1px solid #cbd5e1 !important;
}

/* 5. Red Color STRICTLY for Omitted Steps, Errors, Warnings, Overdue */
.status-badge.dirty,
.status-badge.unpaid,
.status-badge.voided,
.status-badge.overdue,
.status-badge.expired,
.status-badge.warning,
.status-badge.danger,
.status-badge.omitted,
.status-badge.rejected,
.badge-pill.orange,
.badge-pill.red {
  background: #fef2f2 !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca !important;
}

.status-badge.pending,
.status-badge.reserved {
  background: #fffbeb !important;
  color: #b45309 !important;
  border: 1px solid #fde68a !important;
}

/* 6. Gym Navigation Active Tab in Blue Charcoal #001619 */
.gym-subnav-btn.active {
  background: #001619 !important;
  color: #ffffff !important;
  border-color: #001619 !important;
  box-shadow: 0 1px 3px rgba(0, 22, 25, 0.25) !important;
}
.gym-subnav-btn:hover {
  color: #001619 !important;
}
.gym-brand-title {
  color: #001619 !important;
}
.gym-kpi-val {
  color: #001619 !important;
}
.gym-capacity-fill {
  background: #001619 !important;
}
.gym-trainer-avatar {
  background: #f1f5f9 !important;
  color: #001619 !important;
  border: 1px solid #cbd5e1 !important;
}
.gym-trainer-name {
  color: #001619 !important;
}
.gym-plan-price {
  color: #001619 !important;
}
.gym-plan-card.highlight {
  border: 1.5px solid #001619 !important;
}
.gym-kiosk-input:focus {
  border-color: #001619 !important;
  box-shadow: 0 0 0 3px rgba(0, 22, 25, 0.12) !important;
}


/* ══════════════════════════════════════════════════════════
   STAFF & TRAINER MANAGEMENT MODULE
   ══════════════════════════════════════════════════════════ */
.gym-staff-module-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
.gym-staff-title { font-size:18px; font-weight:800; color:var(--text-1); margin:0; display:flex; align-items:center; gap:8px; }
.gym-staff-subtitle { font-size:12px; color:var(--text-2); margin:4px 0 0; }
.gym-staff-header-right { display:flex; gap:8px; align-items:center; }
.gym-staff-filter-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.gym-staff-type-filters { display:flex; gap:6px; flex-wrap:wrap; }
.gym-staff-filter-btn { padding:7px 14px; border-radius:7px; border:1px solid var(--border); background:#f8fafc; font-size:12px; font-weight:600; cursor:pointer; color:var(--text-2); display:flex; align-items:center; gap:5px; transition:all 0.15s; }
.gym-staff-filter-btn.active { background:#001619; color:#fff; border-color:#001619; }
.gym-staff-search-wrap { display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--border); border-radius:8px; padding:7px 12px; min-width:240px; }
.gym-staff-search-input { border:none; outline:none; font-size:13px; background:transparent; width:100%; color:var(--text-1); }
.gym-staff-workspace { display:flex; gap:16px; height:calc(100vh - 280px); min-height:500px; }
.gym-staff-list-pane { width:300px; flex-shrink:0; overflow-y:auto; background:#fff; border:1px solid var(--border); border-radius:10px; }
.gym-staff-detail-pane { flex:1; overflow-y:auto; background:#fff; border:1px solid var(--border); border-radius:10px; padding:20px; min-width:0; }
.gym-staff-empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; padding:40px; }
.gym-staff-row { display:flex; gap:12px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--border); cursor:pointer; transition:background 0.15s; }
.gym-staff-row:hover { background:#f8fafc; }
.gym-staff-row.selected { background:#f1f5f9; border-left:3px solid #001619; }
.gym-staff-row-info { flex:1; min-width:0; }
.gym-staff-detail-banner { display:flex; gap:16px; align-items:flex-start; padding:16px; background:#f8fafc; border-radius:10px; border:1px solid var(--border); margin-bottom:16px; flex-wrap:wrap; }
.gym-staff-tabs { display:flex; gap:2px; border-bottom:2px solid var(--border); margin-bottom:20px; overflow-x:auto; }
.gym-staff-tab-btn { padding:9px 16px; font-weight:600; font-size:12px; border:none; background:transparent; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; color:var(--text-2); white-space:nowrap; display:flex; align-items:center; gap:6px; transition:all 0.15s; }
.gym-staff-tab-btn.active { color:#001619; border-bottom-color:#001619; }
.gym-staff-info-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.gym-info-card { background:#f8fafc; border:1px solid var(--border); border-radius:10px; padding:14px; }
.gym-info-card-title { font-size:12px; font-weight:700; color:#001619; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.gym-info-row { display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px solid var(--border); font-size:12px; }
.gym-info-row:last-child { border-bottom:none; }
.gym-info-label { color:var(--text-2); flex-shrink:0; }
.gym-info-val { color:var(--text-1); font-weight:600; text-align:right; }
.gym-cert-badge { display:inline-block; padding:3px 10px; border-radius:20px; background:#e2e8f0; color:#001619; font-size:11px; font-weight:600; }
.gym-shift-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.gym-shift-cell { padding:10px 4px; border-radius:8px; text-align:center; font-size:11px; border:1px solid var(--border); }
.gym-shift-cell.working { background:#001619; color:#fff; border-color:#001619; }
.gym-shift-cell.off { background:#f1f5f9; color:#94a3b8; }
.gym-shift-cell.today { outline:2px solid #001619; outline-offset:2px; }
.gym-shift-input-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.gym-shift-input-cell { text-align:center; }
.gym-perm-list { display:flex; flex-direction:column; gap:8px; }
.gym-perm-item-full { display:flex; align-items:center; gap:16px; padding:12px 14px; border-radius:8px; background:#f8fafc; border:1px solid var(--border); }
.gym-perm-toggle-btn { width:42px; height:24px; border-radius:12px; border:none; cursor:pointer; position:relative; transition:background 0.2s; flex-shrink:0; }
.gym-perm-toggle-btn.on { background:#001619; }
.gym-perm-toggle-btn.off { background:#cbd5e1; }
.gym-toggle-knob { position:absolute; top:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left 0.2s; }
.gym-perm-toggle-btn.on .gym-toggle-knob { left:21px; }
.gym-perm-toggle-btn.off .gym-toggle-knob { left:3px; }
.gym-perf-stat-row { display:flex; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.gym-perf-stat { flex:1; text-align:center; padding:16px 10px; border-radius:10px; background:#f8fafc; border:1px solid var(--border); min-width:80px; }
.gym-perm-item { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-radius:8px; background:#f8fafc; border:1px solid var(--border); font-size:13px; gap:10px; }
.gym-perm-item input[type=checkbox] { width:16px; height:16px; accent-color:#001619; }
.gym-staff-type-radio { display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:8px; border:1px solid var(--border); cursor:pointer; font-size:12px; font-weight:600; }
.gym-staff-type-radio input { accent-color:#001619; }
.gym-form-group { display:flex; flex-direction:column; gap:4px; }
.gym-form-label { font-size:12px; font-weight:600; color:var(--text-2); }
.gym-form-input { border:1px solid var(--border); border-radius:7px; padding:9px 12px; font-size:13px; background:#fff; color:var(--text-1); outline:none; width:100%; box-sizing:border-box; }
.gym-form-input:focus { border-color:#001619; }


/* ══════════════════════════════════════════════════════════
   HIGH-CONTRAST CLEAR SOLID UI OVERRIDES (NO GLASS / NO BLUR)
   ══════════════════════════════════════════════════════════ */
*, *::before, *::after {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Eliminate all glassmorphism translucency on cards, panels, headers, tables */
.app-topbar,
.notif-panel,
.data-table,
.metric-card,
.item-card,
.table-card,
.kds-card,
.opt-kpi-card,
.opt-panel,
.bo-panel,
.deploy-mode-card,
.gym-master-header,
.gym-class-card,
.gym-trainer-card,
.gym-plan-card,
.gym-kiosk-panel,
.gym-occupancy-banner,
.gym-proshop-strip,
.gym-staff-list-pane,
.gym-staff-detail-pane,
.gym-info-card,
.gym-shift-cell,
.gym-perm-item-full,
.recipe-card,
.menu-item-card,
.ds-modal,
.modal-box,
.login-overlay-card,
div[style*="background:var(--bg-glass)"],
div[style*="background: var(--bg-glass)"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Theme Light Solid, Crisp Surfaces */
body.theme-light .app-topbar {
  background: #ffffff !important;
  border-bottom: 1px solid #cbd5e1 !important;
}

body.theme-light .sidebar {
  background: #ffffff !important;
  border-right: 1px solid #cbd5e1 !important;
}

body.theme-light .notif-panel {
  background: #ffffff !important;
  border-left: 1px solid #cbd5e1 !important;
}

body.theme-light .data-table {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
}

body.theme-light .data-table th {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  border-bottom: 1px solid #cbd5e1 !important;
}

body.theme-light .data-table td {
  border-bottom: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

body.theme-light .data-table tr:hover td {
  background: #f8fafc !important;
}

body.theme-light .opt-panel,
body.theme-light .bo-panel,
body.theme-light .metric-card,
body.theme-light .item-card,
body.theme-light .table-card,
body.theme-light .kds-card,
body.theme-light .opt-kpi-card,
body.theme-light .recipe-card,
body.theme-light .menu-item-card,
body.theme-light .deploy-mode-card,
body.theme-light .gym-class-card,
body.theme-light .gym-trainer-card,
body.theme-light .gym-plan-card,
body.theme-light .gym-kiosk-panel,
body.theme-light .gym-occupancy-banner,
body.theme-light .gym-proshop-strip,
body.theme-light .gym-staff-list-pane,
body.theme-light .gym-staff-detail-pane,
body.theme-light .gym-info-card,
body.theme-light div[style*="background:var(--bg-glass)"],
body.theme-light div[style*="background: var(--bg-glass)"] {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

body.theme-light .tab-pills,
body.theme-light .legend-box,
body.theme-light .kds-filter,
body.theme-light .gym-subnav-bar,
body.theme-light .gym-staff-detail-banner,
body.theme-light .gym-perm-item-full {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
}

body.theme-light .modal-box,
body.theme-light .ds-modal,
body.theme-light .odoo-launcher-card,
body.theme-light .login-overlay-card {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16) !important;
}

/* Dark Theme Solid Clear Surfaces */
body:not(.theme-light) div[style*="background:var(--bg-glass)"],
body:not(.theme-light) div[style*="background: var(--bg-glass)"],
body:not(.theme-light) .glass-panel,
body:not(.theme-light) .glass-card {
  background: #1c2128 !important;
  border-color: #30363d !important;
}

body:not(.theme-light) .data-table {
  background: #161b22 !important;
  border-color: #30363d !important;
}

body:not(.theme-light) .data-table th {
  background: #21262d !important;
  color: #e6edf3 !important;
  border-bottom: 1px solid #30363d !important;
}

body:not(.theme-light) .data-table tr:hover td {
  background: #21262d !important;
}


/* ══════════════════════════════════════════════════════════
   ATTENDANCE TRACKING & ACCESS CONTROL MODULE
   ══════════════════════════════════════════════════════════ */
.gym-att-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.gym-att-kpi-card {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.gym-att-kpi-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}
.gym-att-kpi-val {
  font-size: 22px;
  font-weight: 800;
  color: #001619;
  margin: 6px 0 2px 0;
  letter-spacing: -0.01em;
}
.gym-att-kpi-sub {
  font-size: 11px;
  color: #64748b;
}

/* Access Mode Tabs */
.gym-access-tabs {
  display: flex;
  gap: 6px;
  background: #f1f5f9;
  padding: 4px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  margin-bottom: 18px;
}
.gym-access-tab-btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s ease;
}
.gym-access-tab-btn:hover {
  color: #001619;
  background: #ffffff;
}
.gym-access-tab-btn.active {
  background: #001619;
  color: #ffffff;
  border-color: #001619;
  box-shadow: 0 1px 3px rgba(0, 22, 25, 0.2);
}

.gym-access-panel {
  display: none;
}
.gym-access-panel.active {
  display: block;
}

/* Autocomplete Dropdown */
.gym-autocomplete-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 1000;
  max-height: 220px;
  overflow-y: auto;
}
.gym-autocomplete-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background 0.12s ease;
}
.gym-autocomplete-item:hover {
  background: #f8fafc;
}
.gym-autocomplete-item:last-child {
  border-bottom: none;
}

/* QR Code Scanner Viewport */
.gym-scanner-viewport {
  background: #001619;
  border-radius: 10px;
  height: 200px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid #002e35;
  transition: box-shadow 0.2s ease;
}
.gym-scanner-viewport.scanning-flash {
  box-shadow: 0 0 0 4px #001619, 0 0 24px rgba(0,22,25,0.6);
}
.gym-qr-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.gym-qr-target-box {
  width: 130px;
  height: 130px;
  border: 2px dashed rgba(255,255,255,0.4);
  border-radius: 12px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.gym-laser-scan-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #ffffff;
  box-shadow: 0 0 8px #ffffff;
  animation: gymScanLaser 2s infinite ease-in-out alternate;
}
@keyframes gymScanLaser {
  0% { top: 4px; }
  100% { top: 124px; }
}

/* Biometric Boxes */
.gym-biometric-box {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 18px 14px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.gym-biometric-box:hover {
  background: #ffffff;
  border-color: #001619;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.gym-biometric-icon-wrap {
  width: 72px;
  height: 72px;
  margin: 0 auto;
  border-radius: 50%;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.gym-biometric-icon-wrap.biometric-pulse {
  background: #001619;
  box-shadow: 0 0 0 6px rgba(0,22,25,0.2);
}
.gym-biometric-icon-wrap.biometric-pulse i {
  color: #ffffff !important;
}

/* Live Floor Member Cards */
.gym-live-floor-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gym-live-member-card {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.12s ease;
}
.gym-live-member-card:hover {
  background: #ffffff;
}

/* Peak Hours Chart */
.gym-peak-chart-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 160px;
  padding: 24px 8px 8px 8px;
  overflow-x: auto;
}
.gym-peak-bar-col {
  flex: 1;
  min-width: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.gym-peak-bar-count {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 4px;
}
.gym-peak-bar-track {
  flex: 1;
  width: 100%;
  max-width: 20px;
  background: #f1f5f9;
  border-radius: 4px 4px 0 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.gym-peak-bar-fill {
  width: 100%;
  border-radius: 4px 4px 0 0;
  transition: height 0.4s ease;
}
.gym-peak-bar-label {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  margin-top: 6px;
  white-space: nowrap;
}
.gym-peak-bar-label.peak {
  color: #001619;
  font-weight: 800;
}

/* Expenses Navigation & Return Bar */
.expenses-nav-bar { background: #ffffff; border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px 14px; margin-bottom: 14px; }
.btn-return-dashboard { background: #f1f5f9 !important; color: #001619 !important; border: 1px solid #cbd5e1 !important; font-weight: 700 !important; }
.btn-return-dashboard:hover { background: #e2e8f0 !important; }

/* ============================================================
   OFFLINE MODE — Status Pill, Banner & Sync Animations
   ============================================================ */

/* Offline status pill in topbar */
.offline-status-pill {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: #7f1d1d;
  border: 1px solid #ef4444;
  color: #fca5a5;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: default;
  user-select: none;
  animation: offlinePulse 2s ease-in-out infinite;
}

.offline-status-pill.syncing {
  background: #1c2a40;
  border-color: #3b82f6;
  color: #93c5fd;
  animation: syncPulse 1s ease-in-out infinite;
}

.offline-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
}

.offline-status-pill.syncing .offline-dot {
  background: #3b82f6;
}

.offline-queue-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
}

.offline-status-pill.syncing .offline-queue-badge {
  background: #3b82f6;
}

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

@keyframes syncPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.85; transform: scale(1.02); }
}

/* Offline top banner */
.offline-banner {
  position: fixed;
  top: 56px; /* below topbar */
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  background: #7f1d1d;
  border-bottom: 2px solid #ef4444;
  color: #fecaca;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.offline-banner strong {
  color: #fff;
}

/* Stale data indicator on cards */
.stale-data-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #f59e0b;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.25);
}


@media (max-width: 768px) {
  /* ── Show mobile bottom nav ── */
  .mobile-bottom-nav {
    display: flex !important;
  }

  /* ── Remove sidebar push on main wrapper ── */
  .main-wrapper {
    margin-left: 0 !important;
    padding-bottom: 68px !important;
  }

  /* ── Hide sidebar by default (target BOTH class names used in HTML) ── */
  .sidebar,
  .ds-sidebar,
  #sidebar {
    display: none !important;
  }

  /* ── Mobile sidebar drawer — slides in from left ── */
  .sidebar.mobile-open,
  .ds-sidebar.mobile-open,
  #sidebar.mobile-open {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(280px, 85vw);
    z-index: 10001;
    box-shadow: 0 0 40px rgba(0,0,0,0.85);
    overflow-y: auto;
  }

  /* ── Backdrop overlay behind mobile sidebar ── */
  .mobile-sidebar-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 10000;
  }

  /* ── Reduce workspace padding ── */
  .opt-workspace {
    padding: 10px;
  }

  /* ── Topbar: hide non-essential items ── */
  .ds-search-trigger,
  .odoo-business-badge,
  .btn-home-nav {
    display: none !important;
  }

  /* ── Topbar: slim layout ── */
  .app-topbar,
  .ds-topbar {
    padding: 0 10px !important;
    gap: 6px !important;
  }

  /* ── Hide less important topbar right items on very small screens ── */
  #toggle-theme,
  .ds-connection-indicator,
  .ds-divider {
    display: none !important;
  }

  /* ── Make topbar icon buttons bigger for touch ── */
  .ds-topbar-btn,
  .topbar-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }

  /* ── POS 3-zone — tabbed layout on mobile ── */
  .opt-pos-3zone {
    flex-direction: column;
    overflow: visible;
  }

  /* Default: show only center zone (product grid) on mobile */
  .opt-zone-left {
    width: 100% !important;
    max-width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
    display: none; /* hidden by default, shown via tab */
    height: 50vh;
    min-height: 240px;
  }

  .opt-zone-center {
    width: 100% !important;
    flex: none !important;
    height: 55vh;
    min-height: 300px;
    border-right: none !important;
  }

  .opt-zone-right {
    width: 100% !important;
    max-width: 100% !important;
    height: 45vh;
    min-height: 260px;
    border-top: 2px solid var(--teal-light, #00cfb5);
    display: none; /* hidden by default, shown via tab */
  }

  /* POS mobile zone tabs bar */
  .pos-mobile-zone-tabs {
    display: flex !important;
  }

  /* When zone-left is active */
  .opt-pos-3zone.show-left .opt-zone-left { display: flex !important; }
  .opt-pos-3zone.show-left .opt-zone-center { display: none !important; }
  .opt-pos-3zone.show-left .opt-zone-right { display: none !important; }

  /* When zone-right (cart) is active */
  .opt-pos-3zone.show-right .opt-zone-right { display: flex !important; }
  .opt-pos-3zone.show-right .opt-zone-center { display: none !important; }
  .opt-pos-3zone.show-left .opt-zone-left { display: flex !important; }

  /* Default shows center */
  .opt-pos-3zone.show-center .opt-zone-center { display: flex !important; }
  .opt-pos-3zone.show-center .opt-zone-left { display: none !important; }
  .opt-pos-3zone.show-center .opt-zone-right { display: none !important; }

  /* ── Touch targets — minimum 44px ── */
  .opt-qty-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
    border-radius: 8px !important;
  }

  .opt-remove-btn {
    width: 44px !important;
    height: 44px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
  }

  .opt-area-btn {
    padding: 8px 12px !important;
    font-size: 13px !important;
    min-height: 36px !important;
  }

  .opt-cat-btn {
    padding: 10px 16px !important;
    font-size: 13px !important;
    min-height: 40px !important;
  }

  /* ── Product grid: 2-column on mobile ── */
  .opt-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  .opt-prod-tile {
    min-height: 80px !important;
    padding: 10px 8px !important;
  }

  .opt-prod-name {
    font-size: 12px !important;
  }

  .opt-prod-price {
    font-size: 13px !important;
  }

  /* ── KPI/stat cards: 2-column ── */
  .ds-kpi-grid,
  .kpi-grid,
  .stat-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* ── Order item font sizes ── */
  .opt-entity-name { font-size: 13px !important; }
  .opt-order-num { font-size: 14px !important; }

  /* ── Category scroll bar: horizontally scrollable ── */
  .opt-category-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 10px !important;
  }
  .opt-category-bar::-webkit-scrollbar { display: none; }

  /* ── Area tabs: scrollable ── */
  .opt-area-tabs-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .opt-area-tabs-bar::-webkit-scrollbar { display: none; }
}

/* ── 480px — very small phones ── */
@media (max-width: 480px) {
  .opt-product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .opt-zone-center { height: 52vh; min-height: 280px; }
  .opt-zone-right  { height: 48vh; min-height: 250px; }
  .opt-zone-left   { height: 48vh; min-height: 240px; }

  /* Topbar — keep only essential actions */
  #btn-topbar-shift,
  #currency-selector {
    display: none !important;
  }

  .app-topbar, .ds-topbar {
    padding: 0 8px !important;
    gap: 4px !important;
  }

  /* Mobile bottom nav labels — keep them */
  .mobile-nav-btn span { font-size: 10px !important; }

  /* KPI: single column */
  .ds-kpi-grid,
  .kpi-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── POS Mobile Zone Tab Bar (injected by JS) ── */
.pos-mobile-zone-tabs {
  display: none; /* hidden on desktop */
  background: var(--bg-2, #1c2128);
  border-bottom: 1px solid var(--border, #30363d);
  position: sticky;
  top: 0;
  z-index: 10;
}

.pos-mobile-zone-tab {
  flex: 1;
  padding: 10px 4px;
  background: transparent;
  border: none;
  color: var(--text-1, #8b949e);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.pos-mobile-zone-tab.active {
  color: var(--teal-light, #00cfb5);
  border-bottom-color: var(--teal-light, #00cfb5);
}



/* ============================================================
   SAMBA5 QUICK WALK-IN STRIP  (mobile only)
   ============================================================ */
.samba5-walkin-strip {
  display: flex; /* Visible at top on desktop and mobile */
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: #0f1724;
  border-bottom: 1px solid #1e293b;
}
@media (max-width: 768px) {
  .samba5-walkin-strip {
    padding: 6px 10px;
    gap: 8px;
  }
}
.samba5-walkin-btn {
  flex-shrink: 0;
  padding: 7px 18px;
  background: #ea580c; /* Deep Orange */
  color: #ffffff;
  border: 1px solid #c2410c;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: all 0.15s ease;
}
.samba5-walkin-btn:hover {
  background: #f97316;
  border-color: #ea580c;
  transform: translateY(-1px);
}
.samba5-walkin-btn:active {
  transform: scale(0.97);
  opacity: 0.9;
}
.samba5-walkin-hint {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.3;
}
@media (max-width: 768px) {
  .samba5-walkin-hint {
    font-size: 11px;
  }
}

/* ============================================================
   SAMBA5 POS — RESPONSIVE MOBILE LAYOUT  (max-width: 768px)
   ============================================================ */

/* Mobile view-switcher bar — hidden on desktop */
.samba5-mobile-view-tabs {
  display: none;
  width: 100%;
  background: #0f172a;
  padding: 6px 8px;
  gap: 6px;
  border-bottom: 1px solid #334155;
  flex-shrink: 0;
}

.samba5-mob-tab-btn {
  flex: 1;
  padding: 9px 6px;
  border: 1px solid #334155;
  border-radius: 6px;
  background: #1e293b;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.samba5-mob-tab-btn.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}

/* Mobile floating cart bar — hidden on desktop */
.samba5-mobile-floating-cart {
  display: none;
  position: fixed;
  bottom: 68px; /* above mobile bottom nav */
  left: 8px;
  right: 8px;
  z-index: 999;
  background: #0284c7;
  color: #ffffff;
  border-radius: 10px;
  padding: 10px 14px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.45);
  cursor: pointer;
}

.samba5-mob-cart-summary {
  font-size: 13px;
  font-weight: 600;
}

.samba5-mob-cart-btn {
  background: #ffffff;
  color: #0284c7;
  border: none;
  border-radius: 6px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

@media (max-width: 768px) {

  /* Show the mobile switcher bar */
  .samba5-mobile-view-tabs {
    display: flex !important;
  }

  /* ── MENU MODE: show categories + products, hide ticket column ── */
  .samba5-workspace.mobile-mode-menu {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding: 6px !important;
    gap: 6px !important;
  }

  .samba5-workspace.mobile-mode-menu .samba5-ticket-col {
    display: none !important;
  }

  .samba5-workspace.mobile-mode-menu .samba5-categories-col {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100% !important;
    gap: 6px !important;
    padding: 4px 0 !important;
    max-height: 50px !important;
    flex-shrink: 0 !important;
  }

  .samba5-workspace.mobile-mode-menu .samba5-categories-col::-webkit-scrollbar {
    display: none;
  }

  .samba5-workspace.mobile-mode-menu .samba5-categories-col .samba5-cat-btn {
    flex: 0 0 auto !important;
    height: 38px !important;
    min-width: 80px !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    border-radius: 5px !important;
  }

  .samba5-workspace.mobile-mode-menu .samba5-products-numpad-col {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    flex: 1;
    overflow: visible !important;
  }

  .samba5-workspace.mobile-mode-menu .samba5-product-grid,
  .samba5-workspace.mobile-mode-menu #items-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    max-height: none !important;
    padding: 4px !important;
  }

  .samba5-workspace.mobile-mode-menu .samba5-prod-tile {
    min-height: 80px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
  }

  /* Hide numpad in menu mode — qty done via tap modal */
  .samba5-workspace.mobile-mode-menu .samba5-numpad-box,
  .samba5-workspace.mobile-mode-menu #samba5-numpad-col {
    display: none !important;
  }

  /* Show the floating cart bar only in menu mode */
  .samba5-mobile-floating-cart.visible {
    display: flex !important;
  }

  /* ── TICKET MODE: show ticket column full width, hide menu ── */
  .samba5-workspace.mobile-mode-ticket {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding: 6px !important;
  }

  .samba5-workspace.mobile-mode-ticket .samba5-categories-col {
    display: none !important;
  }

  .samba5-workspace.mobile-mode-ticket .samba5-products-numpad-col {
    display: none !important;
  }

  .samba5-workspace.mobile-mode-ticket .samba5-ticket-col {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    gap: 8px !important;
  }

  .samba5-workspace.mobile-mode-ticket .samba5-side-actions {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    width: 100% !important;
    gap: 4px !important;
    flex-direction: unset !important;
  }

  .samba5-workspace.mobile-mode-ticket .samba5-side-btn {
    height: 44px !important;
    font-size: 10px !important;
    padding: 4px 2px !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .samba5-workspace.mobile-mode-ticket .samba5-ticket-box {
    width: 100% !important;
    min-height: 400px !important;
    height: auto !important;
    flex: 1;
  }

  /* Back-to-menu button */
  .samba5-add-more-btn {
    display: flex !important;
  }
}

.pos-mobile-zone-tab svg,
.pos-mobile-zone-tab i {
  width: 18px !important;
  height: 18px !important;
}

/* ── Mobile sidebar backdrop ── */
.mobile-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 10000;
}

/* ── Light theme mobile nav active color ── */
body.theme-light .mobile-nav-btn.active,
body.theme-light .mobile-nav-btn:hover {
  color: var(--teal-dark, #008a78) !important;
}

/* ============================================================
   BACK OFFICE & OPERATIONS MODULES — MOBILE RESPONSIVE ENGINE (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
  /* 1. Responsive Split Layout: Convert desktop 240px grid into single-column flex stack */
  .split-layout,
  #tab-backoffice .split-layout,
  #tab-reports .split-layout,
  #tab-accounting .split-layout,
  #tab-settings .split-layout,
  #tab-users .split-layout,
  #tab-reception .split-layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(100vh - 120px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  /* 2. Samba Back Office Sidebar -> Mobile Horizontal Control Center */
  .samba-bo-sidebar {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-right: none !important;
    border-bottom: 2px solid #cbd5e1 !important;
    flex-shrink: 0 !important;
    background: #f1f5f9 !important;
  }

  /* Prevent collapsed state from crushing layout on mobile */
  .samba-bo-sidebar.collapsed {
    width: 100% !important;
    min-width: 100% !important;
  }
  .samba-bo-sidebar.collapsed .samba-bo-header #samba-bo-active-title,
  .samba-bo-sidebar.collapsed .samba-bo-sublist li span,
  .samba-bo-sidebar.collapsed .samba-bo-mod-btn span {
    display: inline !important;
  }

  .samba-bo-header {
    padding: 8px 12px !important;
    background: #e2e8f0 !important;
    border-bottom: 1px solid #cbd5e1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .samba-bo-header #samba-bo-active-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
  }
  .samba-bo-header .bo-collapse-btn {
    display: none !important; /* Hide sidebar collapse button on mobile */
  }

  /* Modules strip: Horizontal swipeable touch tabs */
  .samba-bo-modules {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    max-height: none !important;
    padding: 6px 8px !important;
    gap: 6px !important;
    background: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    white-space: nowrap !important;
  }
  .samba-bo-modules::-webkit-scrollbar { display: none !important; }

  .samba-bo-mod-btn {
    width: auto !important;
    flex-shrink: 0 !important;
    padding: 7px 13px !important;
    border-radius: 6px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .samba-bo-mod-btn svg,
  .samba-bo-mod-btn i {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
  }
  .samba-bo-mod-btn span {
    display: inline !important;
    font-size: 12px !important;
  }
  .samba-bo-mod-btn.active {
    background: #0078d7 !important;
    color: #ffffff !important;
    border-color: #0078d7 !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 3px rgba(0, 120, 215, 0.3) !important;
  }

  /* Sublist: Horizontal swipeable sub-tabs */
  .samba-bo-sublist {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 6px 8px !important;
    gap: 6px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #cbd5e1 !important;
    white-space: nowrap !important;
  }
  .samba-bo-sublist::-webkit-scrollbar { display: none !important; }

  .samba-bo-sublist li {
    width: auto !important;
    flex-shrink: 0 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    font-size: 12px !important;
    color: #475569 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border-left: 1px solid #e2e8f0 !important;
  }
  .samba-bo-sublist li svg,
  .samba-bo-sublist li i {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
  }
  .samba-bo-sublist li span {
    display: inline !important;
    font-size: 12px !important;
  }
  .samba-bo-sublist li.active {
    background: #0078d7 !important;
    color: #ffffff !important;
    border-color: #0078d7 !important;
    border-left: 1px solid #0078d7 !important;
    font-weight: 700 !important;
  }

  /* 3. Main Panel Full Width (Zero wasted space) */
  #tab-backoffice .main-panel,
  .main-panel {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 10px 80px 10px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    height: auto !important;
    flex: 1 !important;
  }

  .bo-panel-inner {
    padding: 4px 0 !important;
    width: 100% !important;
  }

  /* 4. Panel Topbars: Clean stacking with swipeable actions */
  #tab-backoffice .panel-topbar,
  .panel-topbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #tab-backoffice .panel-topbar h2,
  .panel-topbar h2 {
    font-size: 17px !important;
    margin: 0 !important;
    width: 100% !important;
    line-height: 1.3 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Action buttons container in topbars */
  #tab-backoffice .panel-topbar > div:last-child {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    width: 100% !important;
    padding-bottom: 2px !important;
  }
  #tab-backoffice .panel-topbar > div:last-child::-webkit-scrollbar { display: none !important; }

  #tab-backoffice .panel-topbar .btn-ghost,
  #tab-backoffice .panel-topbar .btn-primary {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
  }

  /* 5. Responsive Data Tables: Swipeable container */
  .bo-table-scroll-container,
  .data-table-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 8px 0 16px 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
  }

  #tab-backoffice .data-table,
  .data-table {
    width: 100% !important;
    min-width: 550px !important;
    margin: 0 !important;
  }
  #tab-backoffice .data-table th,
  #tab-backoffice .data-table td,
  .data-table th,
  .data-table td {
    padding: 8px 10px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* 6. Adaptive Metrics Grids */
  #tab-backoffice .metrics-grid,
  .metrics-grid,
  #inv-metrics-bar,
  #transfers-metrics-bar {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #tab-backoffice .metric-card,
  .metric-card {
    padding: 10px 12px !important;
    min-width: 0 !important;
    border-radius: 6px !important;
  }
  #tab-backoffice .metric-label,
  .metric-label {
    font-size: 11px !important;
    margin-bottom: 4px !important;
  }
  #tab-backoffice .metric-val,
  .metric-val {
    font-size: 16px !important;
    word-break: break-all !important;
  }

  /* 7. Search, Dropdown Filters & Forms on Mobile */
  #tab-backoffice .form-control,
  #tab-backoffice input[type="text"],
  #tab-backoffice input[type="number"],
  #tab-backoffice select {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 40px !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
  }

  #inv-sec-items > div:first-child,
  #inv-sec-transfers > div:nth-child(3) {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  #inv-sec-items > div:first-child > div:first-child,
  #inv-sec-transfers > div:nth-child(3) > div:first-child {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 8px !important;
  }
  #inv-sec-items button.btn-primary,
  #inv-sec-transfers button.btn-primary {
    width: 100% !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
  }

  /* 8. Other modules with .side-panel (Reports, Accounting, Settings, Users) */
  #tab-reports .side-panel,
  #tab-settings .side-panel,
  #tab-users .side-panel,
  #tab-accounting .side-panel {
    width: 100% !important;
    max-width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 8px 10px !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
  }
  #tab-reports .side-panel .side-menu,
  #tab-settings .side-panel .side-menu,
  #tab-users .side-panel .side-menu,
  #tab-accounting .side-panel .side-menu {
    flex-direction: row !important;
    gap: 6px !important;
  }
  #tab-reports .side-panel .side-menu li,
  #tab-settings .side-panel .side-menu li,
  #tab-users .side-panel .side-menu li,
  #tab-accounting .side-panel .side-menu li {
    flex-shrink: 0 !important;
  }
}

/* ============================================================
   SALON & SPA ENTERPRISE SUITE STYLES
   ============================================================ */
.salon-subnav-bar {
  scrollbar-width: none;
}
.salon-subnav-bar::-webkit-scrollbar {
  display: none;
}
.salon-nav-tab {
  padding: 8px 16px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}
.salon-nav-tab:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.salon-nav-tab.active {
  background: #7c3aed;
  border-color: #6d28d9;
  color: #ffffff;
}

/* Salon POS Workspace */
.salon-pos-workspace {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  .salon-pos-workspace {
    grid-template-columns: 1fr;
  }
}

.salon-cat-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  margin-bottom: 10px;
  scrollbar-width: none;
}
.salon-cat-bar::-webkit-scrollbar { display: none; }

.salon-cat-pill {
  padding: 6px 14px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
}
.salon-cat-pill.active {
  background: #7c3aed;
  color: #ffffff;
  border-color: #7c3aed;
}

/* Services Grid */
.salon-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
@media (max-width: 480px) {
  .salon-services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

.salon-service-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.salon-service-card:hover {
  border-color: #7c3aed;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
  transform: translateY(-2px);
}
.salon-service-card .srv-name {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 4px;
  line-height: 1.3;
}
.salon-service-card .srv-meta {
  font-size: 11px;
  color: #64748b;
  margin-bottom: 8px;
}
.salon-service-card .srv-price {
  font-size: 15px;
  font-weight: 900;
  color: #7c3aed;
}

/* Salon Ticket Box */
.salon-ticket-box {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.salon-ticket-header {
  padding: 14px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
.salon-ticket-items {
  max-height: 340px;
  overflow-y: auto;
  padding: 12px 14px;
  min-height: 160px;
}
.salon-ticket-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed #e2e8f0;
}
.salon-ticket-footer {
  padding: 14px 16px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

/* Payment Tender Buttons in Modal */
.salon-pay-btn {
  padding: 12px 10px;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #334155;
  cursor: pointer;
  transition: all 0.12s ease;
  text-align: center;
}
.salon-pay-btn:hover {
  border-color: #cbd5e1;
  background: #f1f5f9;
}
.salon-pay-btn.active {
  border-color: #10b981;
  background: #ecfdf5;
  color: #065f46;
}



/* ========================================================
   OPT POS BRANDED SPLASH SCREEN — v8.0
   ======================================================== */

/* Logo entrance animation */
@keyframes splashLogoIn {
  from { opacity:0; transform:scale(0.82) translateY(20px); }
  to   { opacity:1; transform:scale(1)    translateY(0);    }
}

/* Progress bar fill animation — 15 seconds */
@keyframes splashProgressFill {
  from { width: 0%; }
  to   { width: 100%; }
}

/* Fade out the entire splash */
@keyframes splashFadeOut {
  from { opacity:1; }
  to   { opacity:0; pointer-events:none; }
}

/* Floating particle rise */
@keyframes splashParticleRise {
  0%   { opacity:0;    transform:translateY(0)     scale(0.6); }
  20%  { opacity:0.55; }
  80%  { opacity:0.3;  }
  100% { opacity:0;    transform:translateY(-80vh) scale(1.2); }
}

/* Icon badge subtle pulse */
@keyframes splashBadgePulse {
  0%,100% { box-shadow:0 0 0 0 rgba(201,149,42,0); }
  50%      { box-shadow:0 0 0 18px rgba(201,149,42,0.12); }
}

#opt-splash-screen {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#opt-splash-screen.splash-hiding {
  animation: splashFadeOut 0.9s ease-out forwards;
}

.splash-icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 26px;
  animation: splashBadgePulse 2.5s ease-in-out infinite;
  filter: drop-shadow(0 8px 24px rgba(26,107,60,0.55));
}

.splash-opt-text {
  font-size: clamp(44px, 8vw, 68px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #1a6b3c;
  text-shadow: 0 2px 16px rgba(26,107,60,0.3);
}

.splash-pos-text {
  font-size: clamp(44px, 8vw, 68px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #c9952a;
  text-shadow: 0 2px 16px rgba(201,149,42,0.35);
}

.splash-tagline {
  margin-top: 10px;
  font-size: clamp(10px, 2vw, 13px);
  font-weight: 700;
  letter-spacing: 0.28em;
  color: #4aac7a;
  text-transform: uppercase;
}

.splash-version {
  margin-top: 7px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(74,172,122,0.6);
  letter-spacing: 0.1em;
}

.splash-progress-container {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: min(480px, 88vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.splash-progress-track {
  width: 100%;
  height: 5px;
  background: rgba(255,255,255,0.1);
  border-radius: 100px;
  overflow: hidden;
}

.splash-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 100px;
  background: linear-gradient(90deg, #1a6b3c 0%, #c9952a 60%, #f5d07a 100%);
  box-shadow: 0 0 12px rgba(201,149,42,0.6);
  animation: splashProgressFill 8s linear forwards;
}

.splash-progress-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.06em;
  text-align: center;
}

.splash-footer {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255,255,255,0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: 0.05em;
}

.splash-footer-dot {
  opacity: 0.4;
}

/* Floating particles */
.splash-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.sp-dot {
  position: absolute;
  bottom: -10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(201,149,42,0.55);
  animation: splashParticleRise linear infinite;
}

/* ========================================================
   END SPLASH SCREEN STYLES
   ======================================================== */


/* ════════════════════════════════════════════════════
   PLATFORM ADMIN CONSOLE STYLES
   ════════════════════════════════════════════════════ */
.admin-auth-hidden  { display: none !important; }
.adm-console-hidden { display: none !important; }

/* Auth Modal */
#admin-auth-modal { position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,0.92);display:flex;align-items:center;justify-content:center; }
.adm-login-box { background:#1e293b;border:1px solid #334155;border-radius:16px;padding:40px 36px;width:360px;max-width:94vw;box-shadow:0 24px 64px rgba(0,0,0,0.6); }
.adm-login-logo { text-align:center;margin-bottom:28px; }
.adm-shield-icon { font-size:48px;color:#f59e0b;margin-bottom:8px; }
.adm-login-title { font-size:20px;font-weight:700;color:#f1f5f9;letter-spacing:.3px; }
.adm-login-sub { font-size:13px;color:#64748b;margin-top:4px; }
.adm-login-form { display:flex;flex-direction:column;gap:14px; }
.adm-field-group { display:flex;flex-direction:column;gap:6px; }
.adm-field-group label { font-size:12px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.4px; }
.adm-field-group input,.adm-field-group select,.adm-select {
  background:#0f172a;border:1px solid #334155;border-radius:8px;
  padding:10px 14px;color:#f1f5f9;font-size:14px;outline:none;width:100%;box-sizing:border-box;
}
.adm-field-group input:focus,.adm-field-group select:focus,.adm-select:focus { border-color:#f59e0b; }
.adm-error { background:#7f1d1d;border:1px solid #ef4444;border-radius:6px;padding:8px 12px;font-size:13px;color:#fca5a5; }
.adm-btn-primary { background:#f59e0b;color:#000;border:none;border-radius:8px;padding:11px 20px;font-size:14px;font-weight:700;cursor:pointer;transition:background .2s; }
.adm-btn-primary:hover { background:#fbbf24; }
.adm-btn-ghost { background:transparent;color:#64748b;border:1px solid #334155;border-radius:8px;padding:10px 20px;font-size:14px;cursor:pointer;transition:all .2s; }
.adm-btn-ghost:hover { border-color:#64748b;color:#94a3b8; }

/* Admin Console Panel */
#admin-console-panel { position:fixed;inset:0;z-index:99998;background:#0f172a;display:flex;flex-direction:column;font-family:'Inter',system-ui,sans-serif; }
.adm-topbar { height:56px;background:#1e293b;border-bottom:1px solid #334155;display:flex;align-items:center;justify-content:space-between;padding:0 24px;flex-shrink:0; }
.adm-topbar-left { display:flex;align-items:center;gap:10px; }
.adm-topbar-badge { font-size:20px;color:#f59e0b; }
.adm-topbar-title { font-size:16px;font-weight:700;color:#f1f5f9;letter-spacing:.3px; }
.adm-topbar-right { display:flex;align-items:center;gap:16px; }
.adm-topbar-user { font-size:13px;color:#64748b; }
.adm-topbar-logout { background:transparent;border:1px solid #334155;color:#94a3b8;border-radius:6px;padding:6px 14px;font-size:13px;cursor:pointer;transition:all .2s; }
.adm-topbar-logout:hover { background:#7f1d1d;border-color:#ef4444;color:#fca5a5; }

.adm-layout { display:flex;flex:1;overflow:hidden; }
.adm-sidebar { width:200px;background:#1e293b;border-right:1px solid #334155;display:flex;flex-direction:column;padding:16px 0;flex-shrink:0; }
.adm-nav-btn { display:flex;align-items:center;gap:10px;padding:11px 20px;background:transparent;border:none;color:#64748b;font-size:14px;font-weight:500;cursor:pointer;transition:all .15s;width:100%;text-align:left; }
.adm-nav-btn:hover { background:#0f172a;color:#f1f5f9; }
.adm-nav-btn.active { background:#0f172a;color:#f59e0b;border-left:3px solid #f59e0b;padding-left:17px; }
.adm-nav-icon { font-size:16px; }

.adm-content { flex:1;overflow-y:auto;padding:28px 32px; }
.adm-tab-pane { display:none; }
.adm-tab-pane.active { display:block; }
.adm-section-title { font-size:22px;font-weight:700;color:#f1f5f9;margin:0 0 20px 0; }
.adm-tab-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:20px; }
.adm-tab-header .adm-section-title { margin:0; }

/* Stat Cards */
.adm-stats-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px; }
.adm-stat-card { background:#1e293b;border:1px solid #334155;border-radius:12px;padding:20px 16px;text-align:center; }
.adm-stat-value { font-size:32px;font-weight:800;color:#f1f5f9; }
.adm-stat-label { font-size:12px;color:#64748b;margin-top:4px;text-transform:uppercase;letter-spacing:.4px; }
.adm-stat-green .adm-stat-value { color:#4ade80; }
.adm-stat-blue  .adm-stat-value { color:#60a5fa; }
.adm-stat-amber .adm-stat-value { color:#f59e0b; }
.adm-stat-purple .adm-stat-value { color:#c084fc; }

/* Card */
.adm-card { background:#1e293b;border:1px solid #334155;border-radius:12px;padding:20px 24px; }
.adm-card-title { font-size:15px;font-weight:600;color:#94a3b8;margin-bottom:14px; }
.adm-quick-actions { display:flex;gap:12px;flex-wrap:wrap; }
.adm-btn-action { background:#0f172a;border:1px solid #334155;color:#f1f5f9;border-radius:8px;padding:9px 16px;font-size:13px;cursor:pointer;transition:all .2s; }
.adm-btn-action:hover { border-color:#f59e0b;color:#f59e0b; }

/* Search */
.adm-search-bar { margin-bottom:16px; }
.adm-search-bar input { background:#1e293b;border:1px solid #334155;border-radius:8px;padding:9px 14px;color:#f1f5f9;font-size:14px;width:320px;outline:none;box-sizing:border-box; }
.adm-search-bar input:focus { border-color:#f59e0b; }

/* Table */
.adm-table { width:100%;border-collapse:collapse;font-size:13px; }
.adm-table th { background:#1e293b;color:#64748b;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:10px 14px;border-bottom:1px solid #334155;text-align:left; }
.adm-table td { padding:12px 14px;border-bottom:1px solid #1e293b;color:#cbd5e1;vertical-align:middle; }
.adm-table tbody tr:hover { background:#1e293b44; }
.adm-loading { color:#475569;text-align:center;padding:24px; }
.adm-empty-state { color:#475569;text-align:center;padding:40px 20px;font-size:14px; }

/* Status Badges */
.adm-badge { display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase; }
.adm-badge-active     { background:#14532d;color:#4ade80; }
.adm-badge-suspended  { background:#7f1d1d;color:#f87171; }
.adm-badge-disabled   { background:#1c1917;color:#78716c; }
.adm-badge-plan-pro   { background:#1e3a5f;color:#60a5fa; }
.adm-badge-plan-ent   { background:#3b0764;color:#c084fc; }
.adm-badge-plan-str   { background:#1c2520;color:#6b7280; }

/* Tenant Action Buttons */
.adm-btn-xs { background:#0f172a;border:1px solid #334155;color:#94a3b8;border-radius:5px;padding:4px 10px;font-size:11px;cursor:pointer;margin-right:4px; }
.adm-btn-xs:hover { border-color:#f59e0b;color:#f59e0b; }
.adm-btn-xs-danger { border-color:#ef444422;color:#f87171; }
.adm-btn-xs-danger:hover { background:#7f1d1d;border-color:#ef4444; }

/* Module Grid */
.adm-modules-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:16px; }
.adm-module-card { background:#1e293b;border:1px solid #334155;border-radius:10px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between; }
.adm-module-name { font-size:14px;font-weight:600;color:#f1f5f9; }
.adm-module-id { font-size:11px;color:#475569;margin-top:2px; }
.adm-toggle { position:relative;display:inline-block;width:44px;height:24px;cursor:pointer; }
.adm-toggle input { opacity:0;width:0;height:0; }
.adm-toggle-slider { position:absolute;inset:0;background:#334155;border-radius:12px;transition:.25s; }
.adm-toggle-slider:before { content:'';position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#64748b;border-radius:50%;transition:.25s; }
.adm-toggle input:checked + .adm-toggle-slider { background:#14532d; }
.adm-toggle input:checked + .adm-toggle-slider:before { transform:translateX(20px);background:#4ade80; }
.adm-module-tenant-select-row { display:flex;align-items:center;gap:14px; }

/* Activity Feed */
.adm-activity-feed { display:flex;flex-direction:column;gap:0; }
.adm-activity-item { display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid #1e293b; }
.adm-activity-dot { width:8px;height:8px;border-radius:50%;background:#334155;margin-top:5px;flex-shrink:0; }
.adm-activity-dot-login    { background:#4ade80; }
.adm-activity-dot-create   { background:#60a5fa; }
.adm-activity-dot-status   { background:#f59e0b; }
.adm-activity-dot-module   { background:#c084fc; }
.adm-activity-dot-default  { background:#64748b; }
.adm-activity-body { flex:1; }
.adm-activity-action { font-size:13px;font-weight:600;color:#f1f5f9; }
.adm-activity-detail { font-size:12px;color:#64748b;margin-top:2px; }
.adm-activity-time { font-size:11px;color:#475569;flex-shrink:0; }

/* Create Tenant Modal */
.adm-modal-overlay { position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center; }
.adm-modal-hidden  { display:none !important; }
.adm-modal-box { background:#1e293b;border:1px solid #334155;border-radius:16px;width:480px;max-width:95vw;max-height:90vh;overflow-y:auto; }
.adm-modal-header { display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #334155; }
.adm-modal-header h3 { margin:0;font-size:17px;font-weight:700;color:#f1f5f9; }
.adm-modal-close { background:transparent;border:none;font-size:22px;color:#64748b;cursor:pointer;line-height:1; }
.adm-modal-close:hover { color:#f87171; }
.adm-modal-body { padding:20px 24px;display:flex;flex-direction:column;gap:14px; }
.adm-modal-footer { display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;border-top:1px solid #334155; }
.adm-btn-primary-sm { background:#f59e0b;color:#000;border:none;border-radius:8px;padding:8px 16px;font-size:13px;font-weight:700;cursor:pointer; }
.adm-btn-primary-sm:hover { background:#fbbf24; }
.adm-btn-ghost-sm { background:transparent;border:1px solid #334155;color:#94a3b8;border-radius:6px;padding:7px 14px;font-size:13px;cursor:pointer; }
.adm-btn-ghost-sm:hover { border-color:#64748b; }
.adm-module-select-row { display:flex;align-items:center;gap:14px;margin-bottom:8px; }
.adm-module-select-row label { color:#94a3b8;font-size:13px;font-weight:600;white-space:nowrap; }
.adm-module-select-row .adm-select { max-width:300px; }

@media(max-width:640px) {
  .adm-sidebar { display:none; }
  .adm-content { padding:16px; }
  .adm-stats-grid { grid-template-columns:1fr 1fr; }
}