/* ============================================================
   Golden Lotus POS — Design System
   Aesthetic: Refined Luxury / Deep Hospitality
   Fonts: Playfair Display (headings) + DM Sans (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── Tokens ──────────────────────────────────────────────── */
:root {
  --gold:         #B8860B;
  --gold-light:   #D4A017;
  --gold-pale:    #FFF8DC;
  --gold-rim:     rgba(184,134,11,.18);
  --ink:          #1A1A2E;
  --ink-80:       rgba(26,26,46,.80);
  --ink-40:       rgba(26,26,46,.40);
  --surface:      #FFFFFF;
  --surface-2:    #F7F6F2;
  --surface-3:    #EFEDE6;
  --border:       rgba(184,134,11,.20);
  --border-soft:  #E8E4D9;
  --text:         #2C2C3E;
  --text-muted:   #6B6B85;
  --red:          #C0392B;
  --red-bg:       #FDECEA;
  --green:        #1A7A4A;
  --green-bg:     #E9F7EF;
  --blue:         #1A5276;
  --blue-bg:      #EBF5FB;
  --orange:       #C97C2B;
  --orange-bg:    #FEF3E2;
  --purple:       #6B3FA0;
  --purple-bg:    #F3EEF9;

  /* Role colours */
  --role-admin:         #1A237E;
  --role-admin-bg:      #E8EAF6;
  --role-owner:         #4A148C;
  --role-owner-bg:      #F3E5F5;
  --role-manager:       #1B5E20;
  --role-manager-bg:    #E8F5E9;
  --role-cashier:       #006064;
  --role-cashier-bg:    #E0F7FA;
  --role-captain:       #BF360C;
  --role-captain-bg:    #FBE9E7;
  --role-kitchen:       #37474F;
  --role-kitchen-bg:    #ECEFF1;

  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 16px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:  0 10px 40px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.08);
  --shadow-gold:0 4px 20px rgba(184,134,11,.20);

  --radius:     10px;
  --radius-lg:  16px;
  --radius-xl:  24px;

  --transition: all .2s cubic-bezier(.4,0,.2,1);
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
}

/* ── Reset & Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--surface-2);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}

h1,h2,h3,h4,h5 { font-family: var(--font-display); font-weight: 600; color: var(--ink); }

a { color: var(--gold); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--gold-light); }

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface-3); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ── Login Page ──────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.login-hero {
  position: relative;
  background: var(--ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3rem;
}

.login-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 30% 20%, rgba(184,134,11,.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 70% 80%, rgba(74,21,140,.20) 0%, transparent 60%);
}

.login-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(255,255,255,.025) 39px, rgba(255,255,255,.025) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(255,255,255,.025) 39px, rgba(255,255,255,.025) 40px);
}

.hero-content { position: relative; z-index: 1; }

.hero-logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 3rem;
}

.hero-logo-icon {
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  box-shadow: var(--shadow-gold);
}

.hero-logo-text {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1.2;
}

.hero-logo-text span {
  display: block;
  font-family: var(--font-body);
  font-size: .7rem;
  color: rgba(255,255,255,.5);
  font-weight: 300;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero-tagline {
  margin-bottom: 2rem;
}

.hero-tagline h1 {
  font-size: 2.8rem;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.hero-tagline h1 em {
  color: var(--gold);
  font-style: italic;
}

.hero-tagline p {
  color: rgba(255,255,255,.55);
  font-size: .95rem;
  font-weight: 300;
  max-width: 340px;
  line-height: 1.7;
}

.hero-features {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.hero-feature {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: rgba(255,255,255,.65);
  font-size: .875rem;
}

.hero-feature-dot {
  width: 8px; height: 8px;
  background: var(--gold);
  border-radius: 50%;
  flex-shrink: 0;
}

.hero-footer {
  position: relative; z-index: 1;
  color: rgba(255,255,255,.3);
  font-size: .75rem;
}

/* ── Login Form Panel ────────────────────────────────────── */
.login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  background: var(--surface);
}

.login-form-wrap {
  width: 100%;
  max-width: 400px;
}

.login-form-wrap .form-title {
  font-size: 1.9rem;
  color: var(--ink);
  margin-bottom: .4rem;
}

.login-form-wrap .form-subtitle {
  color: var(--text-muted);
  font-size: .9rem;
  margin-bottom: 2.5rem;
}

.gl-input-group {
  margin-bottom: 1.25rem;
}

.gl-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}

.gl-input {
  width: 100%;
  padding: .75rem 1rem;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--text);
  background: var(--surface);
  transition: var(--transition);
  outline: none;
}

.gl-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-rim);
}

.gl-input.is-invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(192,57,43,.12);
}

.gl-input-icon {
  position: relative;
}

.gl-input-icon .gl-input {
  padding-left: 2.75rem;
}

.gl-input-icon .icon {
  position: absolute;
  left: .9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 1rem;
  pointer-events: none;
}

.password-toggle {
  position: absolute;
  right: .9rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0;
  font-size: 1rem;
  transition: var(--transition);
}

.password-toggle:hover { color: var(--gold); }

.gl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.5rem;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.gl-btn-primary {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  color: #fff;
  width: 100%;
  box-shadow: var(--shadow-gold);
}

.gl-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(184,134,11,.35);
  color: #fff;
}

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

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

.gl-btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1.5px solid var(--border-soft);
}

.gl-btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.gl-btn-sm { padding: .45rem .9rem; font-size: .85rem; }

/* ── Alerts ──────────────────────────────────────────────── */
.gl-alert {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .875rem 1rem;
  border-radius: var(--radius);
  font-size: .9rem;
  margin-bottom: 1.25rem;
  animation: slideDown .3s ease;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.gl-alert-error   { background: var(--red-bg);    color: var(--red);    border: 1px solid rgba(192,57,43,.2);  }
.gl-alert-success { background: var(--green-bg);  color: var(--green);  border: 1px solid rgba(26,122,74,.2);  }
.gl-alert-info    { background: var(--blue-bg);   color: var(--blue);   border: 1px solid rgba(26,82,118,.2);  }
.gl-alert-warn    { background: var(--orange-bg); color: var(--orange); border: 1px solid rgba(201,124,43,.2); }

/* ── Sidebar Layout ──────────────────────────────────────── */
/*
 * LAYOUT: sidebar is position:fixed so it overlays the page.
 * pos-layout must NOT be a grid — a fixed child is removed from
 * grid flow, leaving a phantom 260px column that shifts all
 * content left. Instead use plain block + margin-left on pos-main.
 */
.pos-layout {
  display: block !important;
  min-height: 100vh;
}

.pos-sidebar {
  background: var(--ink);
  display: flex;
  flex-direction: column;
  position: fixed !important;
  top: 0; left: 0;
  width: 260px;
  height: 100vh;
  overflow-y: auto;
  z-index: 100;
  transition: transform .3s ease;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.5rem 1.25rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.brand-icon {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-gold);
}

.brand-text {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold);
  line-height: 1.2;
}

.brand-text small {
  display: block;
  font-family: var(--font-body);
  font-size: .65rem;
  color: rgba(255,255,255,.35);
  font-weight: 300;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* User card in sidebar */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.user-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
  font-size: .85rem;
  flex-shrink: 0;
  color: #fff;
}

.user-info .user-name {
  font-size: .875rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.2;
}

.user-info .user-role {
  font-size: .72rem;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Nav items */
.sidebar-nav { flex: 1; padding: 1rem 0; }

.nav-section-label {
  padding: .5rem 1.25rem .25rem;
  font-size: .65rem;
  color: rgba(255,255,255,.25);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 1.25rem;
  color: rgba(255,255,255,.55);
  font-size: .875rem;
  transition: var(--transition);
  border-left: 3px solid transparent;
  text-decoration: none;
  position: relative;
}

.nav-item:hover {
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.05);
  text-decoration: none;
}

.nav-item.active {
  color: var(--gold);
  background: rgba(184,134,11,.1);
  border-left-color: var(--gold);
}

.nav-item .nav-icon {
  width: 18px;
  text-align: center;
  font-size: .95rem;
  flex-shrink: 0;
}

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

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

.sidebar-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,.06);
}

.logout-btn {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .65rem 1rem;
  color: rgba(255,255,255,.45);
  background: transparent;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .875rem;
  cursor: pointer;
  transition: var(--transition);
  text-align: left;
}

.logout-btn:hover {
  color: var(--red);
  border-color: rgba(192,57,43,.4);
  background: rgba(192,57,43,.08);
}

/* ── Main Content Area ───────────────────────────────────── */
.pos-main {
  margin-left: 260px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: calc(100% - 260px);
}

.pos-topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
  padding: .875rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 90;
  box-shadow: var(--shadow-sm);
}

.topbar-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--ink);
  font-weight: 600;
}

.topbar-meta {
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: 1px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.topbar-time {
  font-size: .85rem;
  color: var(--text-muted);
  font-weight: 500;
  font-feature-settings: 'tnum';
}

/* ── Page Content ────────────────────────────────────────── */
.pos-content {
  padding: 2rem;
  flex: 1;
}

/* ── Stat Cards ──────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-soft);
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

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

.stat-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 80px; height: 80px;
  border-radius: 0 var(--radius-lg) 0 80px;
  opacity: .06;
}

.stat-card.gold::after   { background: var(--gold); }
.stat-card.blue::after   { background: var(--blue); }
.stat-card.green::after  { background: var(--green); }
.stat-card.red::after    { background: var(--red); }
.stat-card.purple::after { background: var(--purple); }

.stat-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  margin-bottom: 1rem;
}

.stat-icon.gold   { background: var(--gold-pale);  color: var(--gold);   }
.stat-icon.blue   { background: var(--blue-bg);    color: var(--blue);   }
.stat-icon.green  { background: var(--green-bg);   color: var(--green);  }
.stat-icon.red    { background: var(--red-bg);     color: var(--red);    }
.stat-icon.purple { background: var(--purple-bg);  color: var(--purple); }

.stat-value {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
  margin-bottom: .35rem;
  font-feature-settings: 'tnum';
}

.stat-label {
  font-size: .8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 500;
}

.stat-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .75rem;
  font-weight: 600;
  margin-top: .5rem;
  padding: 2px 7px;
  border-radius: 20px;
}

.stat-delta.up   { color: var(--green); background: var(--green-bg); }
.stat-delta.down { color: var(--red);   background: var(--red-bg);   }

/* ── Cards / Panels ──────────────────────────────────────── */
.gl-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.gl-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-soft);
}

.gl-card-header h5 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0;
}

.gl-card-body { padding: 1.5rem; }

/* ── Role Badges ─────────────────────────────────────────── */
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .7rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: capitalize;
}

.role-badge.admin        { background: var(--role-admin-bg);   color: var(--role-admin);   }
.role-badge.owner        { background: var(--role-owner-bg);   color: var(--role-owner);   }
.role-badge.manager      { background: var(--role-manager-bg); color: var(--role-manager); }
.role-badge.cashier      { background: var(--role-cashier-bg); color: var(--role-cashier); }
.role-badge.captain      { background: var(--role-captain-bg); color: var(--role-captain); }
.role-badge.kitchen_staff{ background: var(--role-kitchen-bg); color: var(--role-kitchen); }

/* ── Status Pill ─────────────────────────────────────────── */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .65rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
}

.status-pill::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-pill.active   { color: var(--green); background: var(--green-bg); }
.status-pill.inactive { color: var(--text-muted); background: var(--surface-3); }
.status-pill.locked   { color: var(--red);   background: var(--red-bg); }

/* ── Table ───────────────────────────────────────────────── */
.gl-table { width: 100%; border-collapse: collapse; }

.gl-table thead th {
  padding: .75rem 1rem;
  text-align: left;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-soft);
}

.gl-table tbody td {
  padding: .875rem 1rem;
  font-size: .875rem;
  border-bottom: 1px solid var(--border-soft);
  color: var(--text);
}

.gl-table tbody tr:last-child td { border-bottom: none; }

.gl-table tbody tr:hover td {
  background: var(--surface-2);
}

/* ── User Grid (Dashboard) ───────────────────────────────── */
.user-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-align: center;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

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

.user-card .avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  margin: 0 auto .75rem;
}

.user-card .u-name {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .25rem;
}

.user-card .u-email {
  font-size: .8rem;
  color: var(--text-muted);
  margin-bottom: .75rem;
  word-break: break-all;
}

/* ── Quick-action tiles ──────────────────────────────────── */
.quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}

.quick-tile {
  background: var(--surface);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1rem;
  text-align: center;
  transition: var(--transition);
  cursor: pointer;
  text-decoration: none;
  display: block;
  box-shadow: var(--shadow-sm);
}

.quick-tile:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
  text-decoration: none;
}

.quick-tile .qt-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  margin: 0 auto .75rem;
}

.quick-tile .qt-label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
}

.quick-tile .qt-desc {
  font-size: .75rem;
  color: var(--text-muted);
  margin-top: .2rem;
}

/* ── Section header ──────────────────────────────────────── */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.section-head h4 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--ink);
  margin: 0;
}

/* ── Welcome banner ──────────────────────────────────────── */
.welcome-banner {
  background: linear-gradient(135deg, var(--ink) 0%, #2C3E50 100%);
  border-radius: var(--radius-lg);
  padding: 1.75rem 2rem;
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
}

.welcome-banner::before {
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(184,134,11,.25) 0%, transparent 70%);
}

.welcome-banner h2 {
  color: #fff;
  font-size: 1.5rem;
  margin-bottom: .35rem;
}

.welcome-banner p {
  color: rgba(255,255,255,.55);
  font-size: .9rem;
  margin: 0;
}

.welcome-banner .wb-role {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
}

/* ── Scrolling ticker (kitchen/captain) ──────────────────── */
.status-ticker {
  background: var(--ink);
  color: rgba(255,255,255,.7);
  padding: .5rem 1.5rem;
  font-size: .8rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
}

.status-ticker .ticker-dot {
  width: 8px; height: 8px;
  background: var(--green);
  border-radius: 50%;
  animation: pulse 2s infinite;
  flex-shrink: 0;
}

@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(.85); }
}

/* ── KDS-style KOT card (kitchen staff) ──────────────────── */
.kot-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.kot-card-head {
  background: var(--ink);
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kot-card-head .kot-no {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--gold);
}

.kot-card-head .kot-table {
  font-size: .8rem;
  color: rgba(255,255,255,.6);
}

.kot-card-items { padding: 1rem; }

.kot-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .25rem;
  border-bottom: 1px dashed var(--border-soft);
  font-size: .875rem;
}

.kot-item:last-child { border-bottom: none; }

.kot-item .item-qty {
  font-weight: 700;
  color: var(--gold);
  min-width: 28px;
}

.kot-item-status {
  font-size: .72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.item-ordered   { background: var(--blue-bg);   color: var(--blue);  }
.item-preparing { background: var(--orange-bg); color: var(--orange);}
.item-ready     { background: var(--green-bg);  color: var(--green); }
.item-served    { background: var(--surface-3); color: var(--text-muted); }

/* ── Dividers ────────────────────────────────────────────── */
.gold-divider {
  height: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, transparent 100%);
  border: none;
  margin: 1.5rem 0;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .login-page { grid-template-columns: 1fr; }

  /* Compact branded top bar on phone (logo + name only) */
  .login-hero {
    display: flex;
    min-height: auto;
    padding: 1.6rem 1.25rem;
    align-items: center;
    justify-content: center;
  }
  .login-hero::before,
  .login-hero::after { display: none; }
  .hero-content { width: 100%; }
  .hero-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin: 0;
  }
  .hero-logo-icon img { width: 56px !important; height: 56px !important; }
  .hero-tagline,
  .hero-features,
  .hero-footer { display: none !important; }

  .pos-sidebar { transform: translateX(-100%); }
  .pos-sidebar.open { transform: translateX(0); }
  .pos-main { margin-left: 0; width: 100%; }
}

@media (max-width: 640px) {
  .pos-content { padding: 1rem; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .welcome-banner .wb-role { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   Module 2 — Menu Management
   ══════════════════════════════════════════════════════════════ */

/* ── Toggle Switch ───────────────────────────────────────────── */
.gl-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  user-select: none;
}

.gl-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}

.gl-toggle-track {
  width: 40px;
  height: 22px;
  background: var(--border-soft);
  border-radius: 11px;
  transition: var(--transition);
  position: relative;
  flex-shrink: 0;
}

.gl-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: var(--transition);
}

.gl-toggle input:checked + .gl-toggle-track {
  background: var(--green);
}

.gl-toggle input:checked + .gl-toggle-track::after {
  left: calc(100% - 19px);
}

.gl-toggle input:disabled + .gl-toggle-track {
  opacity: .5;
  cursor: not-allowed;
}

.gl-toggle-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 26px;
}

/* OOS toggle — orange when on */
.gl-toggle.oos input:checked + .gl-toggle-track {
  background: var(--orange);
}

/* ── Category Tabs ───────────────────────────────────────────── */
.cat-tabs-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.5rem;
  overflow-x: auto;
  padding-bottom: .25rem;
  scrollbar-width: none;
}

.cat-tabs-wrap::-webkit-scrollbar { display: none; }

.cat-tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  border-radius: 20px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--surface);
  border: 1.5px solid var(--border-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
  text-decoration: none;
}

.cat-tab:hover {
  border-color: var(--gold);
  color: var(--gold);
  text-decoration: none;
}

.cat-tab.active {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  box-shadow: var(--shadow-gold);
}

.cat-tab .cat-count {
  background: rgba(255,255,255,.3);
  font-size: .7rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.cat-tab:not(.active) .cat-count {
  background: var(--surface-3);
  color: var(--text-muted);
}

/* Category nav — scroll arrows for many categories (heavy-service ease) */
.cat-nav { position: relative; }
.cat-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border-soft); background: var(--surface); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  opacity: 0; pointer-events: none; transition: opacity .2s; font-size: 1rem;
}
.cat-arrow.show { opacity: 1; pointer-events: auto; }
.cat-arrow:hover { border-color: var(--gold); color: var(--gold); }
.cat-arrow.left  { left: -2px; }
.cat-arrow.right { right: -2px; }
.cat-nav .cat-tabs-wrap { scroll-behavior: smooth; scroll-snap-type: x proximity; }
.cat-nav .cat-tab { scroll-snap-align: start; }

/* ── Menu Item Row ───────────────────────────────────────────── */
.menu-item-row {
  display: grid;
  grid-template-columns: 36px 1fr 90px 60px 90px 90px 110px;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  transition: background .15s ease;
}

.menu-item-row:last-child { border-bottom: none; }
.menu-item-row:hover { background: var(--surface-2); }

.menu-item-row.deleted {
  opacity: .45;
  text-decoration: line-through;
}

.item-order-btns {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.order-btn {
  width: 20px; height: 18px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: .6rem;
  color: var(--text-muted);
  transition: var(--transition);
  padding: 0;
  line-height: 1;
}

.order-btn:hover {
  background: var(--gold-pale);
  border-color: var(--gold);
  color: var(--gold);
}

.item-name-col .item-name {
  font-weight: 600;
  color: var(--ink);
  font-size: .9rem;
  line-height: 1.2;
}

.item-name-col .item-desc {
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.price-col {
  font-weight: 700;
  color: var(--ink);
  font-size: .925rem;
  font-feature-settings: 'tnum';
}

.gst-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 8px;
  font-size: .72rem;
  font-weight: 700;
  background: var(--blue-bg);
  color: var(--blue);
}

.gst-badge.none {
  background: var(--surface-3);
  color: var(--text-muted);
}

/* ── Menu Action Buttons ─────────────────────────────────────── */
.item-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .35rem;
}

/* Per-item Station column */
.item-station-cell { display: flex; align-items: center; }
.item-station-select {
  width: 100%;
  max-width: 104px;
  padding: .3rem .4rem;
  font-size: .72rem;
  line-height: 1.1;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.item-station-select:focus { outline: none; border-color: var(--gold); }

.icon-btn {
  width: 30px; height: 30px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  color: var(--text-muted);
  padding: 0;
}

.icon-btn:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.icon-btn.edit:hover  { border-color: var(--blue);   color: var(--blue);   background: var(--blue-bg); }
.icon-btn.del:hover   { border-color: var(--red);    color: var(--red);    background: var(--red-bg); }
.icon-btn.restore:hover { border-color: var(--green); color: var(--green); background: var(--green-bg); }

/* ── Category Management Modal ───────────────────────────────── */
.cat-mgmt-row {
  display: grid;
  grid-template-columns: 28px 1fr 80px 100px 80px;
  align-items: center;
  gap: .75rem;
  padding: .7rem .5rem;
  border-bottom: 1px solid var(--border-soft);
}

.cat-mgmt-row:last-child { border-bottom: none; }

/* ── Menu Item Form ──────────────────────────────────────────── */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.form-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.form-group.span-2 { grid-column: span 2; }
.form-group.span-3 { grid-column: span 3; }

.gl-select {
  width: 100%;
  padding: .72rem 1rem;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--text);
  background: var(--surface);
  transition: var(--transition);
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6B85' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.5rem;
}

.gl-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-rim);
}

.gl-textarea {
  width: 100%;
  padding: .72rem 1rem;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--text);
  background: var(--surface);
  transition: var(--transition);
  outline: none;
  resize: vertical;
  min-height: 80px;
}

.gl-textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-rim);
}

.form-hint {
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: .15rem;
}

/* ── Search / Filter bar ─────────────────────────────────────── */
.menu-controls {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 320px;
}

.search-wrap .search-icon {
  position: absolute;
  left: .9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: .9rem;
  pointer-events: none;
}

.search-wrap .gl-input {
  padding-left: 2.6rem;
}

.filter-select {
  padding: .65rem 2.2rem .65rem .9rem;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: .875rem;
  color: var(--text);
  background: var(--surface);
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6B85' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  transition: var(--transition);
}

.filter-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-rim);
}

/* ── Summary chips ───────────────────────────────────────────── */
.menu-summary {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.summary-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .8rem;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 600;
  border: 1px solid;
}

.chip-total   { background: var(--gold-pale);  color: var(--gold);   border-color: rgba(184,134,11,.2); }
.chip-active  { background: var(--green-bg);   color: var(--green);  border-color: rgba(26,122,74,.2); }
.chip-inactive{ background: var(--surface-3);  color: var(--text-muted); border-color: var(--border-soft); }
.chip-oos     { background: var(--orange-bg);  color: var(--orange); border-color: rgba(201,124,43,.2); }

/* ── Empty state ─────────────────────────────────────────────── */
.menu-empty {
  text-align: center;
  padding: 3rem 2rem;
  color: var(--text-muted);
}

.menu-empty .empty-icon {
  font-size: 2.5rem;
  margin-bottom: .75rem;
  display: block;
  opacity: .4;
}

/* ── Inline category name edit ───────────────────────────────── */
.cat-inline-edit {
  display: none;
  gap: .5rem;
  align-items: center;
}

.cat-inline-edit.show { display: flex; }

/* ── Table header ────────────────────────────────────────────── */
.menu-table-head {
  display: grid;
  grid-template-columns: 36px 1fr 90px 60px 90px 90px 110px;
  gap: .75rem;
  padding: .6rem 1rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-soft);
  border-top: 1px solid var(--border-soft);
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Viewer-mode (no actions column) */
.menu-table-head.view-mode {
  grid-template-columns: 1fr 100px 60px 80px 80px;
}

.menu-item-row.view-mode {
  grid-template-columns: 1fr 100px 60px 80px 80px;
}

/* Captain/Kitchen — tighter view */
.menu-table-head.kitchen-mode {
  grid-template-columns: 1fr 100px 80px 90px 90px;
}

.menu-item-row.kitchen-mode {
  grid-template-columns: 1fr 100px 80px 90px 90px;
}

/* ── OOS banner on item ──────────────────────────────────────── */
.oos-tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .7rem;
  font-weight: 700;
  color: var(--orange);
  background: var(--orange-bg);
  padding: 1px 6px;
  border-radius: 6px;
  margin-left: .4rem;
}

.unavail-tag {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .7rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface-3);
  padding: 1px 6px;
  border-radius: 6px;
  margin-left: .4rem;
}

/* ── Toast notification ──────────────────────────────────────── */
#gl-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
}

.toast-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1.1rem;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: toastIn .25s ease;
  pointer-events: auto;
  max-width: 320px;
}

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

.toast-success { background: #1A7A4A; color: #fff; }
.toast-error   { background: var(--red); color: #fff; }
.toast-info    { background: var(--blue); color: #fff; }

/* ── Custom Modal (no Bootstrap CSS dependency) ──────────────────── */
.gl-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1050;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fadeIn .2s ease;
}

.gl-modal-overlay.show {
  display: flex;
}

.gl-modal-box {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 540px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  animation: slideDown .2s ease;
}

.gl-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}

.gl-modal-header h5 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0;
}

.gl-modal-body {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.gl-modal-close {
  width: 28px; height: 28px;
  border: none;
  background: var(--surface-3);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: .85rem;
  color: var(--text-muted);
  transition: var(--transition);
  padding: 0;
  flex-shrink: 0;
}

.gl-modal-close:hover {
  background: var(--red-bg);
  color: var(--red);
}

/* ══════════════════════════════════════════════════════════════
   Module 3 — Table & Floor Management
   ══════════════════════════════════════════════════════════════ */

/* ── Table status colours ────────────────────────────────────── */
:root {
  --status-free:      #1A7A4A;
  --status-free-bg:   #E9F7EF;
  --status-free-bdr:  rgba(26,122,74,.25);
  --status-occupied:  #C97C2B;
  --status-occupied-bg: #FEF3E2;
  --status-occupied-bdr:rgba(201,124,43,.3);
  --status-billed:    #1A5276;
  --status-billed-bg: #EBF5FB;
  --status-billed-bdr:rgba(26,82,118,.25);
  --status-reserved:  #6B3FA0;
  --status-reserved-bg:#F3EEF9;
  --status-reserved-bdr:rgba(107,63,160,.25);
  --status-inactive:  #9E9E9E;
  --status-inactive-bg:#F5F5F5;
  --status-inactive-bdr:#E0E0E0;
}

/* ── Floor layout grid — fills row by row, adapts to screen width ── */
.tables-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: .75rem;
  padding: .75rem 0;
}

/* ── Table card — compact, uniform ───────────────────────────── */
.table-card {
  position: relative;
  border-radius: var(--radius-lg);
  border: 2px solid;
  padding: .8rem .5rem;
  text-align: center;
  transition: var(--transition);
  cursor: default;
  min-height: 106px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  background: var(--surface);
  overflow: visible;   /* allow status dropdown to render outside card bounds */
}

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

/* Status variants */
.table-card.free      { border-color: var(--status-free-bdr);     background: var(--status-free-bg); }
.table-card.occupied  { border-color: var(--status-occupied-bdr); background: var(--status-occupied-bg); }
.table-card.billed    { border-color: var(--status-billed-bdr);   background: var(--status-billed-bg); }
.table-card.reserved  { border-color: var(--status-reserved-bdr); background: var(--status-reserved-bg); }
.table-card.inactive  { border-color: var(--status-inactive-bdr); background: var(--status-inactive-bg); opacity:.6; }

/* Table name — standard body font, no serif */
.table-card .t-name {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
}

.table-card.free      .t-name { color: var(--status-free); }
.table-card.occupied  .t-name { color: var(--status-occupied); }
.table-card.billed    .t-name { color: var(--status-billed); }
.table-card.reserved  .t-name { color: var(--status-reserved); }
.table-card.inactive  .t-name { color: var(--status-inactive); }

/* Capacity */
.table-card .t-capacity {
  font-size: .75rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: .25rem;
  justify-content: center;
}

/* Status pill on card */
.table-card .t-status {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  font-weight: 700;
  padding: .25rem .7rem;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.t-status.free      { background: var(--status-free);     color: #fff; }
.t-status.occupied  { background: var(--status-occupied); color: #fff; }
.t-status.billed    { background: var(--status-billed);   color: #fff; }
.t-status.reserved  { background: var(--status-reserved); color: #fff; }
.t-status.inactive  { background: var(--status-inactive); color: #fff; }

/* Status dot (pulsing for occupied/billed) */
.t-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.t-dot.free     { background: var(--status-free); }
.t-dot.occupied { background: var(--status-occupied); animation: pulse 2s infinite; }
.t-dot.billed   { background: var(--status-billed); animation: pulse 2s infinite; }
.t-dot.reserved { background: var(--status-reserved); }

/* Admin actions on card — hover overlay, takes no flow space */
.table-card .t-actions {
  position: absolute;
  top: .4rem;
  right: .4rem;
  display: flex;
  gap: .3rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}

.table-card:hover .t-actions {
  opacity: 1;
  pointer-events: auto;
}

.t-action-btn {
  width: 26px; height: 26px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.9);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: .75rem;
  color: var(--text-muted);
  transition: var(--transition);
  padding: 0;
  text-decoration: none;
}

.t-action-btn:hover         { background:#fff; color:var(--ink); }
.t-action-btn.edit:hover    { color:var(--blue);  border-color:var(--blue); }
.t-action-btn.qr:hover      { color:var(--gold);  border-color:var(--gold); }
.t-action-btn.status:hover  { color:var(--green); border-color:var(--green); }
.t-action-btn.del:hover     { color:var(--red);   border-color:var(--red); }

/* ── Floor map — spatial grid mirroring the restaurant layout ──── */
/* Cards carry inline grid-area:row/col; empty cells stay blank so   */
/* the on-screen arrangement matches where tables physically sit.    */
.tables-map-wrap {
  overflow-x: auto;
  padding: .75rem 0;
}

.tables-map {
  display: grid;
  grid-template-columns: repeat(var(--map-cols, 8), minmax(104px, 1fr));
  grid-auto-rows: minmax(106px, auto);
  gap: .75rem;
  min-width: calc(var(--map-cols, 8) * 112px);
}

.tables-map .table-card { min-height: 0; } /* row height governs */

/* ── Arrange mode (admin, tables page) ──────────────────────────── */
.map-cell {
  border: 1.5px dashed var(--border-soft);
  border-radius: var(--radius-lg);
  min-height: 96px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.map-cell:hover { border-color: var(--gold); background: rgba(184,134,11,.06); }

.map-chip {
  width: 100%; height: 100%;
  min-height: 96px;
  border: 2px solid;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: grab;
  user-select: none;
}

.map-chip .mc-seats { font-size: .72rem; font-weight: 500; color: var(--text-muted); }

.map-chip.free      { border-color: var(--status-free-bdr);     background: var(--status-free-bg);     color: var(--status-free); }
.map-chip.occupied  { border-color: var(--status-occupied-bdr); background: var(--status-occupied-bg); color: var(--status-occupied); }
.map-chip.billed    { border-color: var(--status-billed-bdr);   background: var(--status-billed-bg);   color: var(--status-billed); }
.map-chip.reserved  { border-color: var(--status-reserved-bdr); background: var(--status-reserved-bg); color: var(--status-reserved); }
.map-chip.inactive  { border-color: var(--status-inactive-bdr); background: var(--status-inactive-bg); color: var(--status-inactive); opacity:.7; }

.map-chip.selected {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  box-shadow: var(--shadow-md);
}

/* ── Summary strip ───────────────────────────────────────────── */
.table-summary {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.ts-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .9rem;
  border-radius: 20px;
  font-size: .82rem;
  font-weight: 600;
  border: 1.5px solid;
}

.ts-chip .ts-num {
  font-size: 1rem;
  font-weight: 800;
  font-feature-settings: 'tnum';
}

.ts-free     { background:var(--status-free-bg);     color:var(--status-free);     border-color:var(--status-free-bdr); }
.ts-occupied { background:var(--status-occupied-bg); color:var(--status-occupied); border-color:var(--status-occupied-bdr); }
.ts-billed   { background:var(--status-billed-bg);   color:var(--status-billed);   border-color:var(--status-billed-bdr); }
.ts-reserved { background:var(--status-reserved-bg); color:var(--status-reserved); border-color:var(--status-reserved-bdr); }
.ts-inactive { background:var(--status-inactive-bg); color:var(--status-inactive); border-color:var(--status-inactive-bdr); }
.ts-total    { background:var(--gold-pale);           color:var(--gold);            border-color:var(--gold-rim); }

/* ── QR modal content ────────────────────────────────────────── */
.qr-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
}

.qr-canvas-wrap {
  width: 200px; height: 200px;
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: center;
  padding: 8px;
  box-shadow: var(--shadow-sm);
}

.qr-url-box {
  width: 100%;
  display: flex;
  gap: .5rem;
  align-items: center;
}

.qr-url-box input {
  flex: 1;
  font-size: .8rem;
  font-family: 'Courier New', monospace;
  color: var(--text-muted);
  padding: .5rem .75rem;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface-2);
  outline: none;
}

/* ── Floor section header ────────────────────────────────────── */
.floor-section {
  margin-bottom: 2rem;
}

.floor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1.25rem;
  background: var(--ink);
  border-radius: var(--radius);
  margin-bottom: .75rem;
}

.floor-header .f-name {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold);
  font-weight: 600;
}

.floor-header .f-count {
  font-size: .78rem;
  color: rgba(255,255,255,.4);
}

.floor-header .f-actions {
  display: flex;
  gap: .4rem;
}

/* ── Status change dropdown ──────────────────────────────────── */
.status-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  min-width: 140px;
  padding: .35rem 0;
  display: none;
}

.status-menu.show { display: block; }

.status-menu button {
  display: flex;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .5rem .9rem;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: .82rem;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
}

.status-menu button:hover { background: var(--surface-2); }

/* ── Inactive overlay ────────────────────────────────────────── */
.table-card.inactive::after {
  content: 'INACTIVE';
  position: absolute;
  top: 6px; right: 6px;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--text-muted);
  background: var(--surface-3);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ── Floor tab bar ───────────────────────────────────────────── */
.floor-tabs {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  align-items: center;
}

/* ══════════════════════════════════════════════════════════════
   Module 4 — Order Management
   ══════════════════════════════════════════════════════════════ */

/* ── Order editor two-panel layout ──────────────────────────────── */
.order-editor {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 0;
  height: calc(100vh - 130px);
  overflow: hidden;
}

.item-picker {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border-soft);
  background: var(--surface);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.order-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

/* ── Item picker header ──────────────────────────────────────────── */
.picker-header {
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  flex-shrink: 0;
}

.picker-search {
  position: relative;
  margin-bottom: .65rem;
}

.picker-search .bi-search {
  position: absolute;
  left: .875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: .9rem;
  pointer-events: none;
}

.picker-search input {
  width: 100%;
  padding: .6rem .875rem .6rem 2.4rem;
  border: 1.5px solid var(--border-soft);
  border-radius: 20px;
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--text);
  outline: none;
  transition: var(--transition);
}

.picker-search input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-rim);
}

.picker-cats {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.picker-cats::-webkit-scrollbar { display: none; }

.picker-cat-btn {
  flex-shrink: 0;
  padding: .3rem .8rem;
  border-radius: 16px;
  font-size: .78rem;
  font-weight: 600;
  border: 1.5px solid var(--border-soft);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}

.picker-cat-btn:hover  { border-color: var(--gold); color: var(--gold); }
.picker-cat-btn.active { background: var(--gold); border-color: var(--gold); color: #fff; }

/* ── Item grid (scrollable) ──────────────────────────────────────── */
.picker-items {
  flex: 1;
  overflow-y: auto;
  padding: .875rem 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .6rem;
  align-content: start;
}

.picker-item-card {
  background: var(--surface);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
  padding: .75rem;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  user-select: none;
}

.picker-item-card:hover:not(.disabled) {
  border-color: var(--gold);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.picker-item-card.in-order {
  border-color: var(--green);
  background: var(--green-bg);
}

.picker-item-card.disabled {
  opacity: .5;
  cursor: not-allowed;
  background: var(--surface-3);
}

.pi-name {
  font-weight: 600;
  font-size: .875rem;
  color: var(--ink);
  margin-bottom: .25rem;
  line-height: 1.3;
}

.pi-price {
  font-size: .9rem;
  font-weight: 700;
  color: var(--gold);
  font-feature-settings: 'tnum';
}

.pi-gst {
  font-size: .7rem;
  color: var(--text-muted);
  margin-left: .3rem;
}

.pi-qty-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--green);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

.pi-oos-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--orange);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: .03em;
}

/* ── Order panel header ──────────────────────────────────────────── */
.order-panel-header {
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  background: var(--ink);
  border-radius: 0 var(--radius-lg) 0 0;
  flex-shrink: 0;
}

.order-panel-header .table-label {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--gold);
  font-weight: 700;
}

.order-panel-header .order-meta {
  font-size: .75rem;
  color: rgba(255,255,255,.5);
  margin-top: .1rem;
}

.pax-control {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.pax-btn {
  width: 22px; height: 22px;
  background: rgba(255,255,255,.1);
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-size: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  padding: 0;
}

.pax-btn:hover { background: rgba(255,255,255,.2); }

.pax-val {
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
  min-width: 20px;
  text-align: center;
  font-feature-settings: 'tnum';
}

/* ── Order items list ────────────────────────────────────────────── */
.order-items-list {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.order-item-row {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  transition: background .1s;
}

.order-item-row:hover { background: var(--surface-2); }

.oi-name {
  flex: 1;
  min-width: 0;
}

.oi-name .name {
  font-weight: 600;
  font-size: .875rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oi-notes-input {
  width: 100%;
  margin-top: .3rem;
  padding: .25rem .5rem;
  font-size: .78rem;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  font-family: var(--font-body);
  color: var(--text-muted);
  outline: none;
  background: var(--surface-2);
  transition: var(--transition);
}

.oi-notes-input:focus {
  border-color: var(--gold);
  background: var(--surface);
}

.oi-notes-input::placeholder { color: var(--border-soft); font-style: italic; }

/* Quantity control */
.oi-qty {
  display: flex;
  align-items: center;
  gap: .2rem;
  flex-shrink: 0;
}

.oi-qty-btn {
  width: 24px; height: 24px;
  border: 1.5px solid var(--border-soft);
  background: var(--surface);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: .8rem;
  color: var(--text-muted);
  transition: var(--transition);
  padding: 0;
  font-weight: 700;
  flex-shrink: 0;
}

.oi-qty-btn:hover  { background: var(--gold-pale); border-color: var(--gold); color: var(--gold); }
.oi-qty-btn.minus:hover { background: var(--red-bg); border-color: var(--red); color: var(--red); }

.oi-qty-num {
  font-weight: 700;
  font-size: .9rem;
  color: var(--ink);
  min-width: 22px;
  text-align: center;
  font-feature-settings: 'tnum';
}

.oi-price {
  font-weight: 600;
  font-size: .875rem;
  color: var(--ink);
  min-width: 64px;
  text-align: right;
  font-feature-settings: 'tnum';
  flex-shrink: 0;
}

.oi-remove {
  width: 22px; height: 22px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  padding: 0;
  transition: var(--transition);
  flex-shrink: 0;
}

.oi-remove:hover { background: var(--red-bg); color: var(--red); }

/* Empty order state */
.order-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  padding: 2rem;
  text-align: center;
}

/* ── Order panel footer ──────────────────────────────────────────── */
.order-panel-footer {
  border-top: 1px solid var(--border-soft);
  flex-shrink: 0;
}

.order-subtotal {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border-soft);
}

.order-subtotal-row {
  display: flex;
  justify-content: space-between;
  font-size: .875rem;
  color: var(--text-muted);
  margin-bottom: .2rem;
}

.order-subtotal-row.total {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  padding-top: .35rem;
  border-top: 1px solid var(--border-soft);
  margin-top: .35rem;
}

.order-notes-box {
  padding: .5rem 1rem;
  border-bottom: 1px solid var(--border-soft);
}

.order-notes-input {
  width: 100%;
  padding: .45rem .6rem;
  font-size: .82rem;
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius);
  font-family: var(--font-body);
  color: var(--text);
  resize: none;
  outline: none;
  transition: var(--transition);
}

.order-notes-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-rim); }

.order-actions {
  display: flex;
  gap: .5rem;
  padding: .75rem 1rem;
}

/* ── Running order card ──────────────────────────────────────────── */
.running-order-card {
  background: var(--surface);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: var(--transition);
  cursor: pointer;
  text-decoration: none;
}

.running-order-card:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  text-decoration: none;
}

.roc-table {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--status-occupied);
  min-width: 52px;
  text-align: center;
}

.roc-info { flex: 1; }
.roc-order-no { font-weight: 600; font-size: .9rem; color: var(--ink); }
.roc-meta    { font-size: .78rem; color: var(--text-muted); margin-top: .1rem; }

.roc-items {
  text-align: center;
  min-width: 48px;
}

.roc-items .num {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--gold);
  font-feature-settings: 'tnum';
}

.roc-items .lbl {
  font-size: .68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.roc-total {
  text-align: right;
  min-width: 80px;
}

.roc-total .amt {
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
  font-feature-settings: 'tnum';
}

.roc-total .lbl {
  font-size: .7rem;
  color: var(--text-muted);
}

/* ── Floor view table card order badge ───────────────────────────── */
.table-order-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--status-occupied);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 8px;
  border: 2px solid #fff;
  white-space: nowrap;
}

/* ── Order status chip ───────────────────────────────────────────── */
.order-status-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .7rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.chip-open   { background: var(--green-bg);  color: var(--green);  }
.chip-draft  { background: var(--surface-3); color: var(--text-muted); }
.chip-kotted { background: var(--orange-bg); color: var(--orange); }

/* ── Item picker loading ─────────────────────────────────────────── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.spin { animation: spin .7s linear infinite; display: inline-block; }

/* ── Order count dot on table card ──────────────────────────────── */
.t-order-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--status-occupied);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1.5px solid #fff;
}

/* ── Responsive order editor ─────────────────────────────────────── */
@media (max-width: 900px) {
  .order-editor {
    grid-template-columns: 1fr;
    height: auto;
  }
  .item-picker  { height: 55vh; border-right: none; border-bottom: 1px solid var(--border-soft); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .order-panel  { height: 55vh; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .order-panel-header { border-radius: 0; }
}

/* ══════════════════════════════════════════════════════════════
   Module 5 — KOT Management
   ══════════════════════════════════════════════════════════════ */

/* ── KOT status badges (order editor) ───────────────────────────── */
.kot-item-status {
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: .04em;
  flex-shrink: 0;
}

.item-ordered   { background: var(--surface-3);  color: var(--text-muted); }
.item-preparing { background: var(--orange-bg);  color: var(--orange); }
.item-ready     { background: var(--green-bg);   color: var(--green); }
.item-served    { background: var(--surface-3);  color: var(--text-muted); opacity: .55; }

/* ── Fire KOT button pulse ───────────────────────────────────────── */
@keyframes kotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198,168,75,.4); }
  50%       { box-shadow: 0 0 0 8px rgba(198,168,75,0); }
}

#fire-kot-btn:not(:disabled) {
  animation: kotPulse 2s infinite;
}

/* ── KOT round divider ───────────────────────────────────────────── */
.kot-round-divider {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem 1rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-soft);
  border-top: 1px solid var(--border-soft);
}

/* ── Print styles ────────────────────────────────────────────────── */
@media print {
  .pos-layout { display: block !important; }
  .pos-sidebar, .pos-topbar, .order-panel-footer { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════
   Module 6 — Billing & Settlement
   ══════════════════════════════════════════════════════════════ */

/* ── Bill editor layout ──────────────────────────────────────────── */
.bill-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 0;
  height: calc(100vh - 130px);
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-md);
}

.bill-items-panel {
  overflow-y: auto;
  background: var(--surface);
  border-right: 1px solid var(--border-soft);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.bill-summary-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

/* ── Bill items table ────────────────────────────────────────────── */
.bill-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.bill-table thead th {
  padding: .6rem 1rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-soft);
  white-space: nowrap;
}
.bill-table tbody td {
  padding: .7rem 1rem;
  border-bottom: 1px solid var(--border-soft);
  color: var(--ink);
  vertical-align: middle;
}
.bill-table tbody tr:last-child td { border-bottom: none; }
.bill-table tbody tr:hover td { background: var(--surface-2); }
.bill-table .num { text-align: right; font-feature-settings: 'tnum'; }

/* ── Bill summary ────────────────────────────────────────────────── */
.bill-summary-header {
  padding: .875rem 1.25rem;
  background: var(--ink);
  border-radius: 0 var(--radius-lg) 0 0;
  flex-shrink: 0;
}

.bill-summary-scroll { flex: 1; overflow-y: auto; }

.bill-totals { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-soft); }

.bill-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .3rem 0;
  font-size: .875rem;
  color: var(--text-muted);
}

.bill-row.total-row {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  padding-top: .6rem;
  margin-top: .4rem;
  border-top: 2px solid var(--border-soft);
}

.bill-row .amount { font-feature-settings: 'tnum'; color: var(--ink); font-weight: 600; }
.bill-row.discount-row .amount { color: var(--green); }
.bill-row.tax-row .amount { color: var(--text-muted); }

/* ── Discount section ───────────────────────────────────────────── */
.discount-section {
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
}

.discount-type-tabs {
  display: flex;
  gap: .4rem;
  margin-bottom: .6rem;
}

.disc-tab {
  flex: 1;
  padding: .35rem .5rem;
  border: 1.5px solid var(--border-soft);
  border-radius: 8px;
  font-size: .8rem;
  font-weight: 600;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
  transition: var(--transition);
}

.disc-tab.active {
  border-color: var(--green);
  background: var(--green-bg);
  color: var(--green);
}

/* ── Payment section ─────────────────────────────────────────────── */
.payment-section { padding: .875rem 1.25rem; border-bottom: 1px solid var(--border-soft); }

.payment-modes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .4rem;
  margin-bottom: .75rem;
}

.pay-mode-btn {
  padding: .45rem .25rem;
  border: 1.5px solid var(--border-soft);
  border-radius: 8px;
  font-size: .72rem;
  font-weight: 600;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
}

.pay-mode-btn i { font-size: .95rem; }
.pay-mode-btn:hover  { border-color: var(--gold); color: var(--gold); }
.pay-mode-btn.active { border-color: var(--gold); background: var(--gold-pale); color: var(--gold); }
.pay-mode-btn.split-active { border-color: var(--blue); background: rgba(33,150,243,.1); color: var(--blue); }

.split-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap: .4rem;
  align-items: center;
  margin-bottom: .4rem;
  font-size: .82rem;
}

/* ── Bill actions ─────────────────────────────────────────────────── */
.bill-actions { padding: .875rem 1.25rem; flex-shrink: 0; display: flex; gap: .5rem; }

/* ── Bill history card ───────────────────────────────────────────── */
.bill-history-card {
  display: grid;
  grid-template-columns: 100px 80px 1fr 80px 100px 120px 160px;
  gap: .75rem;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
  align-items: center;
  font-size: .875rem;
  transition: background .1s;
}

.bill-history-card:hover { background: var(--surface-2); }

/* ── Status chips ────────────────────────────────────────────────── */
.chip-paid   { background: var(--green-bg);  color: var(--green);  }
.chip-draft  { background: var(--gold-pale); color: var(--gold);   }
.chip-void   { background: var(--red-bg);    color: var(--red);    }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .bill-layout { grid-template-columns: 1fr; height: auto; }
  .bill-items-panel { border-right: none; border-bottom: 1px solid var(--border-soft); max-height: 50vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .bill-summary-panel { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .bill-summary-header { border-radius: 0; }
}

/* ══════════════════════════════════════════════════════════════
   Module 7 — Customer & Loyalty
   ══════════════════════════════════════════════════════════════ */

:root {
  --bronze:     #CD7F32;
  --bronze-bg:  #FBF0E6;
  --silver:     #8A8A8A;
  --silver-bg:  #F2F2F2;
  --gold-tier:  #C6A84B;
  --gold-tier-bg:#FEF9EC;
  --vip:        #7B2D8B;
  --vip-bg:     #F5EAF8;
}

/* ── Tier badge ────────────────────────────────────────────────── */
.tier-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .75rem;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tier-bronze { background: var(--bronze-bg);   color: var(--bronze);     border: 1px solid rgba(205,127,50,.25); }
.tier-silver { background: var(--silver-bg);   color: var(--silver);     border: 1px solid rgba(138,138,138,.25); }
.tier-gold   { background: var(--gold-tier-bg);color: var(--gold-tier);  border: 1px solid rgba(198,168,75,.25); }
.tier-vip    { background: var(--vip-bg);      color: var(--vip);        border: 1px solid rgba(123,45,139,.25); }

/* ── Repeat customer badge ───────────────────────────────────────── */
.repeat-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .15rem .6rem;
  background: var(--green-bg);
  color: var(--green);
  border-radius: 10px;
  font-size: .72rem;
  font-weight: 700;
  border: 1px solid rgba(26,122,74,.2);
}

/* ── Customer card ───────────────────────────────────────────────── */
.customer-row {
  display: grid;
  grid-template-columns: 44px 1fr 120px 100px 120px 100px 120px;
  gap: .75rem;
  padding: .875rem 1.25rem;
  align-items: center;
  border-bottom: 1px solid var(--border-soft);
  transition: background .1s;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.customer-row:hover { background: var(--surface-2); text-decoration: none; color: inherit; }

.cust-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem;
  flex-shrink: 0;
}

.avatar-bronze { background: var(--bronze-bg); color: var(--bronze); }
.avatar-silver { background: var(--silver-bg); color: var(--silver); }
.avatar-gold   { background: var(--gold-tier-bg); color: var(--gold-tier); }
.avatar-vip    { background: var(--vip-bg); color: var(--vip); }

/* ── Stats row ───────────────────────────────────────────────────── */
.cust-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.cust-stat-card {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: .875rem 1rem;
  text-align: center;
}

.cust-stat-num  { font-size: 1.4rem; font-weight: 800; font-feature-settings: 'tnum'; color: var(--ink); }
.cust-stat-lbl  { font-size: .75rem; color: var(--text-muted); margin-top: .2rem; }

/* ══════════════════════════════════════════════════════════════
   Notification Bell + Panel (topbar)
   ══════════════════════════════════════════════════════════════ */
.notif-bell-btn {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  width: 36px; height: 36px;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  transition: var(--transition);
  flex-shrink: 0;
}
.notif-bell-btn:hover  { border-color: var(--gold); color: var(--gold); }
.notif-bell-btn.has-unread { border-color: var(--red); color: var(--red); }

.notif-badge {
  position: absolute; top: -5px; right: -5px;
  background: var(--red); color: #fff;
  font-size: .62rem; font-weight: 700;
  min-width: 17px; height: 17px;
  border-radius: 20px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  animation: badge-pop .25s ease;
}

@keyframes badge-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* Notification slide panel */
.notif-panel {
  position: fixed; top: 0; right: 0;
  width: 340px; height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border-soft);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform .28s ease;
  display: flex; flex-direction: column;
  box-shadow: -8px 0 32px rgba(0,0,0,.25);
}
.notif-panel.open { transform: translateX(0); }
.notif-panel-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,.35);
  display: none;
}
.notif-panel-overlay.open { display: block; }

.notif-panel-head {
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
  background: var(--surface-2);
}
.notif-panel-title { font-weight: 700; font-size: .95rem; }

.notif-scroll { flex: 1; overflow-y: auto; padding: .5rem; }

.notif-item {
  display: flex; gap: .75rem;
  padding: .75rem .875rem;
  border-radius: var(--radius);
  margin-bottom: .35rem;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background .1s;
}
.notif-item:hover { background: var(--surface-3); }
.notif-item.unread { border-color: rgba(198,168,75,.3); }

.notif-dot {
  width: 9px; height: 9px; border-radius: 50%;
  flex-shrink: 0; margin-top: 5px;
}
.nd-item_ready      { background: var(--green); }
.nd-new_kot         { background: var(--gold); }
.nd-new_qr_order    { background: var(--blue); }
.nd-bill_request    { background: var(--orange); }
.nd-kot_pending_print{ background: var(--purple); }
.nd-system_alert    { background: var(--red); }
.nd-default         { background: var(--text-muted); }

.notif-content { flex: 1; min-width: 0; }
.notif-title   { font-size: .85rem; font-weight: 600; color: var(--ink); }
.notif-body    { font-size: .78rem; color: var(--text-muted); margin-top: 2px; }
.notif-time    { font-size: .7rem; color: var(--dimmer, rgba(255,255,255,.2)); margin-top: 3px; }

/* ── Dashboard stats override (live data) ─────────────────────── */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .875rem;
  margin-bottom: 1.5rem;
}
.dash-stat {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.dash-stat-num  { font-size: 1.6rem; font-weight: 800; font-feature-settings: 'tnum'; line-height: 1; }
.dash-stat-lbl  { font-size: .75rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.dash-stat-sub  { font-size: .72rem; color: var(--text-muted); }
.ds-gold   { color: var(--gold); }
.ds-green  { color: var(--green); }
.ds-blue   { color: var(--blue); }
.ds-orange { color: var(--orange); }
.ds-red    { color: var(--red); }
.ds-purple { color: var(--purple); }

/* ── Recent items list ────────────────────────────────────────── */
.recent-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1.25rem;
  border-bottom: 1px solid var(--border-soft);
  font-size: .875rem;
}
.recent-row:last-child { border: none; }
.recent-row:hover { background: var(--surface-2); }

/* Menu category station indicator (kitchen / cafe) */
.cat-station{font-size:.78rem;margin:0 .15rem;opacity:.85}