@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=DM+Sans:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════
   THE FOOD SCIENTISTS — Premium Dark/Light Theme System
   Synced with logo: Dark bg, Yellow (#F5C518), White
   ═══════════════════════════════════════════════════════ */

/* ─── DARK THEME (default) ─── */
:root {
  --accent: #F5C518;
  --accent-hover: #e6b800;
  --accent-soft: rgba(245,197,24,0.12);
  --accent-glow: rgba(245,197,24,0.25);
  --green: #F5C518;
  --green2: #e6b800;
  --bg-base: #0a0a0a;
  --bg-surface: #141414;
  --bg-elevated: #1a1a1a;
  --bg-card: #1c1c1e;
  --bg-card-hover: #222224;
  --bg-input: #1e1e20;
  --bg-sidebar: #111113;
  --bg-topbar: rgba(17,17,19,0.88);
  --ink: #f0f0f0;
  --ink-secondary: #c4c4c4;
  --ink-muted: #a1a1a1;
  --line: rgba(255,255,255,0.12);
  --line-strong: rgba(255,255,255,0.20);
  --paper: #0a0a0a;
  --white: #ffffff;
  --mint: rgba(245,197,24,0.08);
  --mint2: rgba(245,197,24,0.14);
  --orange: #e49c53;
  --red: #ef4444;
  --shadow: 0 8px 32px rgba(0,0,0,0.35);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
  --glass: rgba(28,28,30,0.75);
  --glass-border: rgba(255,255,255,0.06);
  --radius: 14px;
  --radius-lg: 18px;
  --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
  color-scheme: dark;
}

/* ─── LIGHT THEME ─── */
[data-theme="light"] {
  --accent: #c9a200;
  --accent-hover: #b89200;
  --accent-soft: rgba(201,162,0,0.10);
  --accent-glow: rgba(201,162,0,0.18);
  --green: #c9a200;
  --green2: #b89200;
  --bg-base: #f5f5f0;
  --bg-surface: #ffffff;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #fafaf5;
  --bg-input: #f8f8f3;
  --bg-sidebar: #fafaf5;
  --bg-topbar: rgba(255,255,255,0.92);
  --ink: #1a1a1a;
  --ink-secondary: #5a5a5a;
  --ink-muted: #9a9a9a;
  --line: rgba(0,0,0,0.08);
  --line-strong: rgba(0,0,0,0.14);
  --paper: #f5f5f0;
  --white: #ffffff;
  --mint: rgba(201,162,0,0.06);
  --mint2: rgba(201,162,0,0.12);
  --shadow: 0 8px 28px rgba(0,0,0,0.06);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.1);
  --glass: rgba(255,255,255,0.85);
  --glass-border: rgba(0,0,0,0.06);
  color-scheme: light;
}


/* ═══════════════════════════════════
   BASE & RESET
   ═══════════════════════════════════ */
* { box-sizing: border-box }
body {
  margin: 0;
  background: var(--bg-base);
  color: var(--ink);
  font-family: "Inter", "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--transition), color var(--transition);
}
button, input, select, textarea { font: inherit }
button { cursor: pointer }
::selection { background: var(--accent); color: #000 }


/* ═══════════════════════════════════
   APP SHELL — Sidebar + Main
   ═══════════════════════════════════ */
.app-shell { min-height: 100vh; display: flex }

.sidebar {
  width: 260px;
  position: fixed;
  inset: 0 auto 0 0;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--line);
  padding: 22px 14px 14px;
  display: flex;
  flex-direction: column;
  z-index: 20;
  transition: background var(--transition), border-color var(--transition);
}

/* Brand area */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 28px;
}
.brand-mark {
  height: 44px;
  width: 44px;
  border-radius: 12px;
  background: var(--accent);
  color: #000;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -1px;
  font-family: "Inter", sans-serif;
  box-shadow: 0 4px 16px var(--accent-glow);
  transition: transform 0.2s, box-shadow 0.2s;
  overflow: hidden;
}
.brand-mark:hover { transform: scale(1.05) }
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.brand strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.brand span {
  display: block;
  font-size: 9px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 1.5px;
  margin-top: 3px;
}

/* Workspace label */
.workspace-label {
  font-size: 9px;
  color: var(--ink-muted);
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 0 12px 12px;
}

/* Side navigation */
.side-nav { display: grid; gap: 4px }
.nav-item {
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--ink-secondary);
  text-align: left;
  border-radius: 11px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 13px;
  transition: all var(--transition);
  position: relative;
}
.nav-item > span {
  width: 20px;
  text-align: center;
  font-size: 17px;
  font-weight: 500;
}
.nav-item:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.nav-item.active {
  background: var(--accent);
  color: #000;
  font-weight: 800;
  box-shadow: 0 4px 18px var(--accent-glow);
}
.nav-item.active > span { color: #000 }
.nav-dot {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  margin-left: auto;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1 }
  50% { opacity: 0.4 }
}

/* Sidebar bottom */
.sidebar-bottom { margin-top: auto }
.online-indicator {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 9px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.online-indicator > span, .status-pill i {
  height: 7px;
  width: 7px;
  background: #22c55e;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px #22c55e80;
}
.online-indicator strong, .online-indicator small { display: block }
.online-indicator strong { font-size: 11px; color: var(--ink) }
.online-indicator small { font-size: 10px; color: var(--ink-muted); margin-top: 2px }

.user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 16px 4px 0;
}
.avatar {
  height: 34px;
  width: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 900;
  font-size: 11px;
}
.avatar.small { height: 32px; width: 32px; border-radius: 50% }
.user-chip strong, .user-chip small { display: block }
.user-chip strong { font-size: 11px; color: var(--ink) }
.user-chip small { font-size: 10px; color: var(--ink-muted) }
.user-chip > span { margin-left: auto; color: var(--ink-muted) }


/* ═══════════════════════════════════
   MAIN AREA
   ═══════════════════════════════════ */
.main {
  margin-left: 260px;
  min-width: 0;
  width: calc(100% - 260px);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Top bar */
.topbar {
  height: 68px;
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background var(--transition), border-color var(--transition);
}
.crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-muted);
  font-size: 12px;
}
.crumb b { color: var(--ink-muted); font-weight: 500 }
.crumb strong { color: var(--ink); font-size: 13px; font-weight: 700 }
.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.status-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  border-radius: 30px;
  color: var(--ink-secondary);
  font-size: 10px;
  font-weight: 700;
}
.icon-button, .mobile-menu {
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--ink-secondary);
  border-radius: 10px;
  width: 34px;
  height: 34px;
  font-size: 18px;
  transition: all var(--transition);
}
.icon-button:hover, .mobile-menu:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-glow);
}
.mobile-menu { display: none }

/* Page content */
.page-content {
  padding: 26px 30px 34px;
  flex: 1;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
}
.footer {
  padding: 16px 30px 20px;
  color: var(--ink-muted);
  font-size: 10px;
}
.footer span { padding: 0 6px; color: var(--line-strong) }

/* Eyebrow */
.eyebrow {
  color: var(--accent);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

/* Page heading */
.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
}
.page-heading h1 {
  margin: 5px 0 5px;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -1.2px;
  font-weight: 800;
  color: var(--ink);
}
.page-heading p { margin: 0; color: var(--ink-secondary); font-size: 13px }
.heading-actions { display: flex; gap: 9px; flex-wrap: wrap }


/* ═══════════════════════════════════
   BUTTONS
   ═══════════════════════════════════ */
.btn {
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: all var(--transition);
  cursor: pointer;
}
.btn-primary {
  background: var(--accent);
  color: #000;
  font-weight: 800;
}
.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px var(--accent-glow);
}
.btn-secondary {
  background: var(--bg-card);
  border-color: var(--line-strong);
  color: var(--ink-secondary);
}
.btn-secondary:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
  color: var(--accent);
}
.btn-soft {
  background: var(--accent-soft);
  color: var(--accent);
}
.btn-danger {
  background: rgba(239,68,68,0.12);
  color: #ef4444;
}
.btn-danger:hover {
  background: rgba(239,68,68,0.2);
}
.btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}
.btn-light {
  background: var(--white);
  color: #000;
  font-weight: 800;
}


/* ═══════════════════════════════════
   CARDS & SURFACES
   ═══════════════════════════════════ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: background var(--transition), border-color var(--transition);
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
}
.card-head h2, .section-title {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--ink);
}
.card-head p { margin: 4px 0 0; color: var(--ink-muted); font-size: 11px }
.text-link {
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}


/* ═══════════════════════════════════
   METRICS
   ═══════════════════════════════════ */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.metric {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 17px 18px;
  min-height: 116px;
  box-shadow: var(--shadow);
  transition: all var(--transition);
}
.metric:hover {
  border-color: var(--accent-glow);
  transform: translateY(-2px);
}
.metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 700;
}
.metric-icon {
  height: 32px;
  width: 32px;
  border-radius: 10px;
  background: var(--accent-soft);
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 16px;
}
.metric-value {
  font-size: 28px;
  letter-spacing: -1px;
  font-weight: 900;
  margin-top: 8px;
  color: var(--ink);
}
.metric-note {
  font-size: 10px;
  color: var(--ink-muted);
  margin-top: 2px;
}

/* Dashboard grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  gap: 16px;
}


/* ═══════════════════════════════════
   TABLES
   ═══════════════════════════════════ */
.table-wrap { overflow: auto }
table { border-collapse: collapse; width: 100%; white-space: nowrap }
th {
  text-align: left;
  color: var(--ink-muted);
  font-size: 9px;
  letter-spacing: .8px;
  text-transform: uppercase;
  font-weight: 800;
  padding: 11px 17px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elevated);
}
td {
  padding: 13px 17px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  color: var(--ink-secondary);
}
tr:last-child td { border-bottom: 0 }
td strong { color: var(--ink); font-size: 11px }


/* ═══════════════════════════════════
   BADGES
   ═══════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 30px;
  padding: 5px 9px;
  font-size: 9px;
  font-weight: 800;
  text-transform: capitalize;
  gap: 5px;
}
.badge-new { background: rgba(245,197,24,0.15); color: #F5C518 }
.badge-accepted { background: rgba(96,165,250,0.15); color: #60a5fa }
.badge-preparing { background: rgba(251,146,60,0.15); color: #fb923c }
.badge-ready { background: rgba(34,197,94,0.15); color: #22c55e }
.badge-completed, .badge-paid { background: rgba(34,197,94,0.12); color: #22c55e }
.badge-cancelled, .badge-failed { background: rgba(239,68,68,0.12); color: #ef4444 }
.badge-pending { background: rgba(245,197,24,0.12); color: #F5C518 }
.badge-out-for-delivery { background: rgba(56,189,248,0.12); color: #38bdf8 }


/* ═══════════════════════════════════
   QUICK LIST / FOOD ITEMS
   ═══════════════════════════════════ */
.empty-state {
  padding: 34px 20px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 12px;
}
.empty-state .empty-icon { font-size: 30px; margin-bottom: 8px }
.quick-list { padding: 0 20px 15px }
.quick-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.quick-row:last-child { border-bottom: 0 }
.food-emoji {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--bg-elevated);
  font-size: 23px;
  flex-shrink: 0;
}
.food-emoji.peach { background: rgba(255,160,100,0.12) }
.food-emoji.yellow { background: rgba(245,197,24,0.12) }
.food-emoji.pink { background: rgba(244,114,182,0.12) }
.food-emoji.blue { background: rgba(96,165,250,0.12) }
.food-emoji.green { background: rgba(34,197,94,0.12) }
.quick-info { flex: 1; min-width: 0 }
.quick-info strong, .quick-info small { display: block }
.quick-info strong { font-size: 12px; color: var(--ink) }
.quick-info small { color: var(--ink-muted); font-size: 10px; margin-top: 3px }
.quick-price { font-weight: 900; color: var(--accent) }

/* Section row */
.section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 22px 0 12px;
}
.section-row h2 { font-size: 14px; margin: 0; font-weight: 800; color: var(--ink) }
.muted { color: var(--ink-muted) }
.tiny { font-size: 10px }


/* ═══════════════════════════════════
   HERO — Customer & Admin shared
   ═══════════════════════════════════ */
.customer-hero {
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  overflow: hidden;
  position: relative;
  margin-bottom: 22px;
  min-height: 210px;
  border: 1px solid var(--line);
}
.customer-hero:after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(245,197,24,0.12);
  border-radius: 50%;
  right: 8%;
  top: -80px;
  box-shadow: 0 0 0 35px rgba(245,197,24,0.04), 0 0 0 70px rgba(245,197,24,0.02);
}
.hero-copy { position: relative; z-index: 1 }
.hero-kicker {
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 2px;
  font-weight: 800;
  text-transform: uppercase;
}
.customer-hero h1 {
  font-size: 34px;
  letter-spacing: -1.3px;
  line-height: 1.08;
  margin: 10px 0;
  color: #fff;
}
.customer-hero p {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  max-width: 400px;
  margin: 0 0 17px;
}
.hero-visual {
  font-size: 110px;
  text-align: center;
  filter: drop-shadow(0 16px 18px rgba(0,0,0,0.5));
  position: relative;
  z-index: 1;
  transform: rotate(-7deg);
}


/* ═══════════════════════════════════
   SEARCH & CATEGORIES
   ═══════════════════════════════════ */
.search-row { display: flex; gap: 10px; margin-bottom: 18px }
.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  border-radius: 10px;
  padding: 0 13px;
  transition: border-color var(--transition);
}
.search-box:focus-within { border-color: var(--accent) }
.search-box span { font-size: 17px; color: var(--ink-muted) }
.search-box input {
  border: 0;
  outline: 0;
  width: 100%;
  height: 42px;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
}
.category-row {
  display: flex;
  gap: 8px;
  overflow: auto;
  padding: 1px 1px 6px;
  margin-bottom: 14px;
}
.category-chip {
  border: 1px solid var(--line);
  background: var(--bg-card);
  color: var(--ink-secondary);
  padding: 8px 14px;
  border-radius: 30px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  transition: all var(--transition);
}
.category-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.category-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
  font-weight: 800;
}


/* ═══════════════════════════════════
   PRODUCT GRID
   ═══════════════════════════════════ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.product-card {
  border: 1px solid var(--line);
  background: var(--bg-card);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.3);
  border-color: var(--accent-glow);
}
.product-art {
  height: 130px;
  display: grid;
  place-items: center;
  font-size: 69px;
  position: relative;
  background: var(--bg-elevated);
}
.product-art.peach { background: rgba(255,160,100,0.08) }
.product-art.yellow { background: rgba(245,197,24,0.08) }
.product-art.pink { background: rgba(244,114,182,0.08) }
.product-art.blue { background: rgba(96,165,250,0.08) }
.product-art.green { background: rgba(34,197,94,0.08) }
.product-art:after {
  content: "";
  position: absolute;
  width: 105px;
  height: 105px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 50%;
}
.product-art span {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 8px 8px rgba(0,0,0,0.3));
}
.product-info {
  padding: 13px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-category {
  font-size: 9px;
  color: var(--accent);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
}
.product-info h3 {
  font-size: 13px;
  margin: 5px 0 5px;
  letter-spacing: -0.2px;
  color: var(--ink);
}
.product-info p {
  font-size: 10px;
  color: var(--ink-muted);
  line-height: 1.5;
  margin: 0 0 12px;
  min-height: 30px;
}
.product-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: auto;
}
.price { font-weight: 900; color: var(--accent); font-size: 15px }
.add-btn {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #000;
  font-size: 20px;
  line-height: 1;
  transition: all var(--transition);
}
.add-btn:hover {
  background: var(--accent-hover);
  transform: scale(1.08);
  box-shadow: 0 4px 14px var(--accent-glow);
}
.stock-note { font-size: 9px; color: var(--orange); margin-top: 7px }


/* ═══════════════════════════════════
   ORDER LAYOUT
   ═══════════════════════════════════ */
.order-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 16px;
  align-items: start;
}
.order-card { padding: 0 18px 18px }

/* Forms */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px }
.field label { font-size: 10px; color: var(--ink-muted); font-weight: 800 }
.field input, .field select, .field textarea, .inline-input {
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg-input);
  padding: 10px 12px;
  outline: none;
  color: var(--ink);
  font-size: 12px;
  width: 100%;
  min-width: 0;
  transition: all var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field textarea { min-height: 65px; resize: vertical }

/* Cart */
.cart-item {
  display: flex;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.cart-item .food-emoji { height: 40px; width: 40px; font-size: 20px }
.cart-item-main { flex: 1; min-width: 0 }
.cart-item-main strong { display: block; font-size: 11px; color: var(--ink) }
.cart-item-main small { color: var(--ink-muted); font-size: 10px }
.qty-control { display: flex; align-items: center; gap: 7px; margin-top: 6px }
.qty-control button {
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-strong);
  background: var(--bg-elevated);
  border-radius: 7px;
  color: var(--accent);
  font-weight: 900;
}
.qty-control span { font-size: 11px; font-weight: 900; color: var(--ink) }
.cart-price { font-size: 11px; font-weight: 900; white-space: nowrap; color: var(--accent) }

/* Totals */
.totals { padding: 13px 0; display: grid; gap: 8px }
.total-row { display: flex; justify-content: space-between; color: var(--ink-muted); font-size: 11px }
.total-row.grand {
  font-size: 15px;
  color: var(--ink);
  font-weight: 900;
  border-top: 1px dashed var(--line-strong);
  padding-top: 12px;
  margin-top: 3px;
}
.wide { width: 100% }


/* ═══════════════════════════════════
   KANBAN / ORDER BOARD
   ═══════════════════════════════════ */
.order-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: 12px;
  overflow: auto;
  padding-bottom: 8px;
}
.kanban-col {
  background: var(--bg-elevated);
  border-radius: 14px;
  padding: 11px;
  min-height: 250px;
  border: 1px solid var(--line);
}
.kanban-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 12px;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink);
}
.count-pill {
  background: var(--bg-card);
  border-radius: 20px;
  padding: 3px 8px;
  color: var(--ink-muted);
  font-size: 10px;
}
.order-ticket {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px;
  margin-bottom: 9px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  transition: all var(--transition);
}
.order-ticket:hover { border-color: var(--accent-glow) }
.ticket-top { display: flex; align-items: center; justify-content: space-between; gap: 5px }
.ticket-top strong { font-size: 12px; color: var(--ink) }
.ticket-time { font-size: 9px; color: var(--ink-muted) }
.ticket-customer { font-size: 10px; color: var(--ink-secondary); margin: 7px 0 }
.ticket-items {
  font-size: 10px;
  color: var(--ink-secondary);
  line-height: 1.7;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  padding: 7px 0;
  margin-bottom: 9px;
}
.ticket-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 900;
  color: var(--ink);
}
.ticket-actions { display: flex; gap: 5px; margin-top: 10px }
.ticket-actions .btn { padding: 7px 8px; font-size: 10px; flex: 1 }


/* ═══════════════════════════════════
   TOOLBAR
   ═══════════════════════════════════ */
.toolbar { display: flex; gap: 9px; align-items: center; flex-wrap: wrap }
.toolbar .search-box { max-width: 280px }
.select-small {
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg-input);
  padding: 10px;
  color: var(--ink-secondary);
  font-size: 11px;
}

/* Table product */
.table-product { display: flex; align-items: center; gap: 9px }
.table-product .food-emoji { height: 34px; width: 34px; font-size: 18px }
.table-product strong { display: block; color: var(--ink) }
.table-product small { display: block; color: var(--ink-muted); margin-top: 2px; font-size: 9px }
.table-actions { display: flex; gap: 5px }
.table-actions button {
  border: 1px solid var(--line);
  background: var(--bg-card);
  border-radius: 7px;
  padding: 6px 8px;
  color: var(--ink-secondary);
  font-size: 10px;
  font-weight: 700;
  transition: all var(--transition);
}
.table-actions button:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-glow);
}

/* Stock bar */
.stock-bar {
  width: 78px;
  height: 5px;
  background: var(--bg-elevated);
  border-radius: 10px;
  overflow: hidden;
  display: inline-block;
  margin-right: 7px;
  vertical-align: middle;
}
.stock-bar span { display: block; height: 100%; background: #22c55e; border-radius: 10px }
.stock-bar.low span { background: #fb923c }

/* Alert box */
.alert-box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px;
  border-radius: 10px;
  background: rgba(245,197,24,0.08);
  border: 1px solid rgba(245,197,24,0.2);
  color: var(--accent);
  font-size: 11px;
  margin: 0 20px 15px;
}
.alert-box strong { display: block; margin-bottom: 3px }


/* ═══════════════════════════════════
   INVENTORY
   ═══════════════════════════════════ */
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.inventory-card { padding: 16px }
.inventory-card .inv-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink-muted);
  font-size: 10px;
}
.inventory-card h3 { font-size: 14px; margin: 10px 0 3px; color: var(--ink) }
.inventory-card .inv-amount {
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.7px;
  color: var(--ink);
}
.inventory-card small { font-size: 10px; color: var(--ink-muted) }


/* ═══════════════════════════════════
   CHARTS
   ═══════════════════════════════════ */
.report-chart {
  padding: 10px 20px 20px;
  height: 230px;
  display: flex;
  align-items: end;
  gap: 12px;
}
.chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  height: 100%;
  justify-content: end;
}
.chart-bar-wrap {
  height: 160px;
  width: 100%;
  display: flex;
  align-items: end;
  justify-content: center;
}
.chart-bar {
  width: min(34px, 75%);
  min-height: 3px;
  background: rgba(245,197,24,0.25);
  border-radius: 6px 6px 2px 2px;
  position: relative;
  transition: background var(--transition);
}
.chart-bar.today { background: var(--accent) }
.chart-col small { font-size: 9px; color: var(--ink-muted) }
.chart-col strong { font-size: 9px; color: var(--ink-secondary) }


/* ═══════════════════════════════════
   SETTINGS
   ═══════════════════════════════════ */
.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, .7fr);
  gap: 16px;
}
.settings-body { padding: 0 20px 20px }
.settings-note {
  background: var(--accent-soft);
  border: 1px solid rgba(245,197,24,0.2);
  border-radius: 12px;
  padding: 15px;
  color: var(--ink-secondary);
  font-size: 11px;
  line-height: 1.7;
}
.settings-note strong { display: block; color: var(--accent); margin-bottom: 4px }


/* ═══════════════════════════════════
   MODALS
   ═══════════════════════════════════ */
.modal {
  border: 0;
  border-radius: var(--radius-lg);
  width: min(520px, calc(100% - 28px));
  padding: 0;
  background: var(--bg-card);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.modal::backdrop {
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
}
.modal-head {
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-head h2 { font-size: 17px; margin: 0; color: var(--ink) }
.modal-close {
  border: 0;
  background: var(--bg-elevated);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  font-size: 18px;
  color: var(--ink-muted);
  transition: all var(--transition);
}
.modal-close:hover { background: var(--accent-soft); color: var(--accent) }
.modal-body { padding: 18px 22px 22px }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px }

.payment-warning, .demo-banner {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.payment-warning {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.demo-banner {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-glow);
}



/* Toasts stay legible above page overlays; active dialogs receive toast nodes in the browser top layer. */
.toast-region { isolation:isolate; z-index:2147483000; }
.toast { opacity:1; backdrop-filter:none; -webkit-backdrop-filter:none; }

/* ═══════════════════════════════════
   TOASTS
   ═══════════════════════════════════ */
.toast-region {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  top: calc(76px + env(safe-area-inset-top));
  bottom: auto;
  z-index: 10000;
  pointer-events: none;
  max-width: min(420px, calc(100vw - 24px));
  display: grid;
  gap: 8px;
}
.toast {
  pointer-events: auto;
  position: relative;
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--accent-glow);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  padding: 13px 16px;
  box-shadow: var(--shadow-lg);
  font-size: 12px;
  min-width: 220px;
  animation: toast-in 0.3s cubic-bezier(0.4,0,0.2,1);
}
.toast.error { border-left-color: #ef4444; border-color: rgba(239,68,68,0.3) }


/* ═══════════════════════════════════
   LOADING
   ═══════════════════════════════════ */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 100px 0;
  color: var(--ink-muted);
}
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}


/* ═══════════════════════════════════
   MISC
   ═══════════════════════════════════ */
.payment-warning {
  font-size: 10px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 8px;
  padding: 10px;
  line-height: 1.5;
  margin: 8px 0;
}
.demo-banner {
  font-size: 10px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(245,197,24,0.15);
  padding: 9px 12px;
  border-radius: 10px;
  margin-bottom: 14px;
}
.mobile-bottom { display: none }

@keyframes spin { to { transform: rotate(360deg) } }
@keyframes toast-in {
  from { transform: translateY(12px) scale(0.95); opacity: 0 }
  to { transform: translateY(0) scale(1); opacity: 1 }
}


/* ═══════════════════════════════════
   DARK/LIGHT TOGGLE BUTTON
   ═══════════════════════════════════ */
.theme-toggle {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  background: var(--bg-card);
  color: var(--accent);
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 18px;
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: none;
}


/* ═══════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════ */
@media (max-width: 1200px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .page-content { padding: 24px }
  .topbar { padding: 0 24px }
  .footer { padding-left: 24px }
  .order-board { grid-template-columns: repeat(4, 230px) }
}
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); box-shadow: none }
  .sidebar.open { transform: translateX(0); box-shadow: 20px 0 60px rgba(0,0,0,0.4) }
  .main { margin-left: 0; width: 100% }
  .mobile-menu { display: block }
  .topbar { padding: 0 18px }
  .page-content { padding: 20px 18px }
  .footer { padding: 16px 18px }
  .dashboard-grid, .order-layout, .settings-layout { grid-template-columns: 1fr }
  .order-cart { order: -1 }
  .inventory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .customer-hero { min-height: 190px }
  .customer-hero h1 { font-size: 29px }
  .hero-visual { font-size: 85px }
}
@media (max-width: 600px) {
  .topbar { height: 60px; padding: 0 12px }
  .crumb { gap: 6px; font-size: 10px }
  .crumb strong { font-size: 11px }
  .status-pill { display: none }
  .top-actions { gap: 7px }
  .page-content { padding: 17px 12px 26px }
  .page-heading { display: block; margin-bottom: 18px }
  .page-heading h1 { font-size: 24px }
  .heading-actions { margin-top: 14px }
  .metrics { gap: 9px }
  .metric { padding: 13px; min-height: 100px }
  .metric-value { font-size: 23px }
  .metric-icon { width: 27px; height: 27px }
  .customer-hero { padding: 23px 20px; grid-template-columns: 1fr; min-height: 210px }
  .customer-hero h1 { font-size: 30px; max-width: 300px }
  .hero-visual { position: absolute; right: -5px; bottom: 4px; font-size: 90px; opacity: .45 }
  .customer-hero p { max-width: 270px }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px }
  .product-art { height: 105px; font-size: 58px }
  .product-info { padding: 10px }
  .product-info h3 { font-size: 12px }
  .product-info p { font-size: 9px; min-height: 40px }
  .price { font-size: 13px }
  .product-bottom { gap: 3px }
  .add-btn { width: 28px; height: 28px }
  .form-grid { grid-template-columns: 1fr; gap: 0 }
  .inventory-grid { grid-template-columns: 1fr 1fr; gap: 8px }
  .inventory-card { padding: 12px }
  .inventory-card .inv-amount { font-size: 20px }
  .toolbar { align-items: stretch }
  .toolbar .search-box { max-width: none; width: 100%; flex-basis: 100% }
  .toolbar .select-small { flex: 1 }
  .search-row { flex-wrap: wrap }
  .search-box { min-width: 180px }
  .card-head { padding: 15px 14px 12px }
  .quick-list { padding: 0 14px 12px }
  .table-wrap { margin: 0 }
  .page-heading p { max-width: 340px }
  .report-chart { padding: 10px 12px 18px; gap: 5px }
  .modal-body { padding: 16px }
  .modal-head { padding: 16px }
  .footer { padding: 12px }
  .order-board { grid-template-columns: repeat(4, 220px) }
}


/* Cafe OS workflow polish: visible navigation, FIFO queue urgency and payment reconciliation */
.sidebar { overflow-y: auto; overscroll-behavior: contain }
.side-nav { padding-bottom: 14px }
.nav-item { min-height: 42px; white-space: normal }
.nav-item span { flex: 0 0 22px }
.nav-dot { margin-left: auto }
.nav-item .payment-nav-dot { background: #fb923c; box-shadow: 0 0 0 3px rgba(251,146,60,0.2) }
.top-actions { min-width: 0; gap: 8px }
.notification-enable { white-space: nowrap }
.notification-on { background: var(--accent-soft) !important; border-color: rgba(245,197,24,0.3) !important; color: var(--accent) !important }
.order-layout { grid-template-columns: minmax(0, 1fr) minmax(285px, 330px); align-items: start; gap: 18px }
.order-cart {
  position: sticky;
  top: 82px;
  min-width: 0;
  max-height: calc(100vh - 100px);
  overflow: auto;
  padding: 17px;
}
.order-cart .card-head { padding: 0 0 12px !important }
.order-cart .btn-primary { margin-top: 8px }
.pos-billing-hint { display: block; color: var(--ink-muted); font-size: 10px; line-height: 1.5; margin-top: 9px }

.order-ticket { border-left: 4px solid #22c55e; transition: border-color 0.2s, background 0.2s }
.order-ticket.age-green { border-left-color: #22c55e; background: linear-gradient(90deg, rgba(34,197,94,0.06) 0, var(--bg-card) 28%) }
.order-ticket.age-orange { border-left-color: #fb923c; background: linear-gradient(90deg, rgba(251,146,60,0.06) 0, var(--bg-card) 28%) }
.order-ticket.age-red { border-left-color: #ef4444; background: linear-gradient(90deg, rgba(239,68,68,0.06) 0, var(--bg-card) 28%) }
.age-minutes { color: var(--ink-secondary) }
.age-orange .age-minutes { color: #fb923c }
.age-red .age-minutes { color: #ef4444 }

.payment-queue { display: grid; gap: 12px; padding: 0 20px 20px }
.payment-queue-item {
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  padding: 15px;
  background: var(--bg-card);
}
.payment-queue-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px }
.payment-queue-top strong { font-size: 13px; color: var(--ink) }
.payment-utr {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  padding: 10px;
  border-radius: 8px;
  margin: 12px 0;
}
.payment-utr span, .payment-queue-meta span { font-size: 10px; color: var(--ink-muted) }
.payment-utr code {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .5px;
  color: var(--accent);
  overflow-wrap: anywhere;
}
.table-actions-copy {
  border: 1px solid var(--line);
  background: var(--bg-card);
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 10px;
  color: var(--ink-secondary);
}
.payment-queue-meta {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 8px;
  margin: 10px 0;
}
.payment-queue-meta strong { font-size: 11px; overflow-wrap: anywhere; color: var(--ink) }
.payment-queue-actions { display: flex; gap: 8px; flex-wrap: wrap }
.payment-queue-actions .btn { font-size: 10px; padding: 9px 11px }
.utr-detail {
  padding: 12px;
  background: var(--bg-elevated);
  border-radius: 9px;
  font-size: 11px;
  line-height: 1.8;
  margin: 10px 0;
  color: var(--ink-secondary);
}
.utr-detail code { overflow-wrap: anywhere; font-weight: 900; color: var(--accent) }
.utr-detail span { color: var(--ink-muted) }

.customer-cart-button { white-space: nowrap; flex-shrink: 0 }
.customer-header-right { flex-shrink: 0; min-width: 0 }
.floating-tracker {
  position: fixed;
  z-index: 50;
  right: 18px;
  bottom: 18px;
  touch-action: none;
  cursor: grab;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  background: var(--accent);
  color: #000;
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 800;
  font-size: 12px;
}
.floating-tracker:active { cursor: grabbing }

@media (max-width: 900px) {
  .order-layout { grid-template-columns: minmax(0, 1fr) }
  .order-cart { position: static; order: 2; max-height: none }
  .order-layout > div:first-child { order: 1 }
  .sidebar { z-index: 80 }
  .top-actions .notification-enable { max-width: 125px; overflow: hidden; text-overflow: ellipsis }
  .payment-queue { padding: 0 14px 15px }
}
@media (max-width: 600px) {
  .order-cart { padding: 14px }
  .notification-enable { font-size: 0 !important; min-width: 38px; padding: 9px !important }
  .notification-enable::first-letter { font-size: 14px }
  .top-actions .btn { padding: 8px 9px; font-size: 10px }
  .payment-queue-actions .btn { flex: 1 1 100% }
  .payment-queue-meta { grid-template-columns: 95px minmax(0, 1fr) }
  .payment-queue { padding: 0 10px 12px }
}
@media (max-width: 420px) {
  .customer-header { gap: 6px; padding: 0 8px }
  .customer-header-right { gap: 5px }
  .customer-brand { gap: 6px; min-width: 0 }
  .customer-brand strong { max-width: 95px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .customer-brand small { display: none }
  .customer-header .brand-mark { width: 32px; height: 32px }
  .customer-header .btn { padding: 8px 8px; font-size: 10px }
  .customer-cart-button { min-width: 62px }
  .cart-label { display: none }
  #cart-count { display: inline-grid; place-items: center; min-width: 17px; height: 17px; border-radius: 50%; background: rgba(0,0,0,0.2); padding: 0 3px }
  .customer-main { padding-left: 9px; padding-right: 9px }
  .customer-main .product-grid { gap: 7px }
  .customer-main .product-info { padding: 9px }
  .floating-tracker { right: 10px; bottom: 10px; padding: 10px 12px }
  .topbar { gap: 6px }
  .crumb { min-width: 0; overflow: hidden }
  .crumb strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .top-actions .btn-secondary:last-child { font-size: 0 }
  .top-actions .btn-secondary:last-child::after { content: "↗"; font-size: 13px }
  .top-actions { gap: 5px }
}

.order-age-row.age-green td { background: rgba(34,197,94,0.05) }
.order-age-row.age-orange td { background: rgba(251,146,60,0.05) }
.order-age-row.age-red td { background: rgba(239,68,68,0.05) }
.tracker-utr-field {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-elevated);
}
.tracker-utr-field small { font-size: 10px; color: var(--ink-muted); line-height: 1.5 }


/* Payment + filtered SMS inbox UI */
.sms-integration-note {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  border-radius: var(--radius);
  margin: 0 0 16px;
  color: var(--ink-secondary);
}
.sms-note-icon {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 19px;
  font-weight: 900;
}
.sms-integration-note strong { display: block; color: var(--ink); font-size: 13px; margin: 1px 0 5px }
.sms-integration-note p { font-size: 11px; line-height: 1.75; margin: 0; overflow-wrap: anywhere }
.sms-integration-note code {
  background: var(--bg-elevated);
  border-radius: 5px;
  padding: 2px 4px;
  color: var(--accent);
}
.sms-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, .6fr);
  gap: 15px;
  margin-bottom: 16px;
  align-items: stretch;
}
.sms-import-form { padding: 0 20px 20px }
.sms-import-form .field { display: grid; gap: 7px; font-size: 11px; font-weight: 700; color: var(--ink-secondary) }
.sms-import-form textarea {
  resize: vertical;
  min-height: 95px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 12px;
  font: inherit;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg-input);
  outline: none;
}
.sms-import-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
.sms-filter-hint { display: flex; flex-wrap: wrap; gap: 7px; margin: 11px 0 14px }
.sms-filter-hint span {
  font-size: 9px;
  font-weight: 700;
  color: var(--ink-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 8px;
}
.sms-filter-hint span:last-child { color: #ef4444; background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.15) }
.sms-summary-card { padding-bottom: 17px }
.sms-summary-number { font-size: 38px; font-weight: 900; letter-spacing: -1.5px; color: var(--accent); padding: 16px 20px 0 }
.sms-summary-card > strong, .sms-summary-card > p { display: block; margin: 0 20px; color: var(--ink) }
.sms-summary-card > strong { font-size: 12px }
.sms-summary-card > p { margin-top: 5px; line-height: 1.6; color: var(--ink-secondary) }
.sms-summary-foot {
  display: flex;
  align-items: center;
  gap: 7px;
  border-top: 1px solid var(--line);
  padding: 12px 20px 0;
  margin-top: 15px;
  font-size: 10px;
  color: var(--ink-muted);
}
.status-dot { width: 7px; height: 7px; background: #22c55e; border-radius: 50%; box-shadow: 0 0 6px #22c55e60 }
.payment-panel, .sms-inbox-panel { margin-bottom: 16px }
.sms-inbox-list { display: grid; gap: 0 }
.sms-inbox-item { padding: 16px 20px; border-top: 1px solid var(--line) }
.sms-inbox-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap }
.sms-inbox-top > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.sms-amount { font-size: 18px; font-weight: 900; color: var(--accent) }
.sms-reference {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .4px;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px 8px;
  color: var(--ink);
}
.sms-match-state {
  font-size: 9px;
  font-weight: 800;
  border-radius: 999px;
  background: rgba(245,197,24,0.12);
  color: var(--accent);
  padding: 6px 9px;
}
.sms-match-state.is-matched { background: rgba(34,197,94,0.12); color: #22c55e }
.sms-inbox-item > p {
  font-size: 11px;
  line-height: 1.7;
  color: var(--ink-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  padding: 10px 12px;
  border-radius: 9px;
  margin: 12px 0;
}
.sms-inbox-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  color: var(--ink-muted);
  font-size: 10px;
}
.sms-inbox-meta button { margin-left: auto }
.sms-inbox-panel .empty-state { padding: 35px 15px }
@media (max-width: 800px) {
  .sms-workspace-grid { grid-template-columns: 1fr }
  .sms-summary-card { padding-bottom: 16px }
  .sms-inbox-item { padding: 14px }
  .sms-integration-note { padding: 13px }
  .sms-inbox-meta button { margin-left: 0 }
}


/* Kitchen filters: responsive, clear and touch-friendly */
.kitchen-filter-card { margin: 0 0 18px; padding: 0; overflow: hidden }
.kitchen-filter-head { padding: 18px 20px 14px; margin: 0; border-bottom: 1px solid var(--line) }
.kitchen-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; padding: 17px 20px 20px }
.kitchen-filter-field { display: grid; gap: 7px; min-width: 0; color: var(--ink-secondary); font-size: 11px; font-weight: 700 }
.kitchen-filter-field > span { line-height: 1.35 }
.kitchen-filter-field .select-small, .kitchen-filter-field .input {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 9px 11px;
  background: var(--bg-input);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  outline: none;
}
.kitchen-filter-field .select-small:focus, .kitchen-filter-field .input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.kitchen-filter-search { grid-column: span 2 }
.kitchen-empty { min-height: 95px; display: grid; place-items: center; text-align: center; padding: 14px; font-size: 11px; color: var(--ink-muted) }
@media (max-width: 1000px) { .kitchen-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 560px) {
  .kitchen-filter-head { padding: 14px; align-items: flex-start; gap: 10px }
  .kitchen-filter-head .btn { font-size: 10px; padding: 8px }
  .kitchen-filter-grid { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 11px }
  .kitchen-filter-search { grid-column: auto }
}


/* Inventory & purchasing module */
.inventory-category-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 0 17px }
.inventory-category-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-card);
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: all var(--transition);
}
.inventory-category-tile:hover { border-color: var(--accent-glow); transform: translateY(-2px) }
.inventory-category-tile.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.inventory-category-tile > span { font-size: 23px }
.inventory-category-tile strong { font-size: 11px; line-height: 1.35; color: var(--ink) }
.inventory-category-tile small { font-size: 10px; color: var(--ink-muted) }
.inventory-alert { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.inventory-alert > div { flex: 1; min-width: 180px }
.inventory-alert > div > div { font-size: 11px; line-height: 1.7; margin-top: 5px; color: var(--ink-secondary) }
.inventory-list-card, .inventory-reorder-card { margin-bottom: 17px; overflow: hidden }
.inventory-list-head { padding: 17px 20px 12px; margin: 0 }
.inventory-toolbar { display: flex; gap: 12px; align-items: flex-end; justify-content: space-between; padding: 0 20px 16px; flex-wrap: wrap }
.inventory-toolbar .search-box { flex: 1; min-width: 220px; max-width: none }
.inventory-select { display: grid; gap: 6px; min-width: 180px; font-size: 10px; font-weight: 700; color: var(--ink-muted) }
.inventory-select .select-small { width: 100%; min-height: 39px }
.inventory-table { min-width: 1000px }
.inventory-table td { vertical-align: middle }
.inventory-item-title { display: flex; align-items: center; gap: 10px; min-width: 160px }
.inventory-item-emoji { display: grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; background: var(--bg-elevated); font-size: 18px }
.inventory-item-title > div { display: grid; gap: 4px }
.inventory-item-title strong { font-size: 12px; color: var(--ink) }
.inventory-item-title small { font-size: 9px; color: var(--ink-muted) }
.inventory-category-label {
  display: inline-block;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  color: var(--ink-secondary);
  padding: 5px 7px;
  border-radius: 7px;
  font-size: 9px;
  max-width: 145px;
  line-height: 1.4;
}
.inventory-health-pill { display: inline-flex; align-items: center; white-space: nowrap; border-radius: 999px; padding: 6px 8px; font-size: 9px; font-weight: 800 }
.health-healthy { color: #22c55e; background: rgba(34,197,94,0.12) }
.health-soon { color: #eab308; background: rgba(234,179,8,0.12) }
.health-low { color: #fb923c; background: rgba(251,146,60,0.12) }
.health-out { color: #ef4444; background: rgba(239,68,68,0.12) }
.inventory-low td { background: rgba(251,146,60,0.04) }
.inventory-out td { background: rgba(239,68,68,0.04) }
.inventory-soon td { background: rgba(234,179,8,0.04) }
.inventory-actions { display: flex; gap: 5px; min-width: 185px; flex-wrap: wrap }
.inventory-actions button { font-size: 10px; padding: 7px 8px }
.inventory-form { display: grid; gap: 13px }
.inventory-form .field { display: grid; gap: 6px }
.inventory-form .field label { font-size: 11px; font-weight: 700; color: var(--ink-secondary) }
.inventory-form .field input, .inventory-form .field select {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 9px 11px;
  background: var(--bg-input);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}
.inventory-form .field input[readonly] { background: var(--bg-elevated); color: var(--ink-muted) }
.inventory-form-intro {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--bg-elevated);
  color: var(--ink-secondary);
  font-size: 11px;
  line-height: 1.6;
}
@media (max-width: 1100px) {
  .inventory-category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .inventory-table { min-width: 980px }
}
@media (max-width: 650px) {
  .inventory-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px }
  .inventory-category-tile { padding: 10px }
  .inventory-list-head { padding: 14px; align-items: flex-start; gap: 8px }
  .inventory-list-head .btn { font-size: 10px; padding: 8px }
  .inventory-toolbar { padding: 0 14px 14px }
  .inventory-toolbar .search-box { min-width: 100% }
  .inventory-select { width: 100% }
  .inventory-alert .btn { width: 100% }
}

/* ═══════════════════════════════════
   PRINT RECEIPT STYLES
   ═══════════════════════════════════ */
body.print-mode {
  background: white;
  color: black;
}
.receipt-header {
  display: none;
  text-align: center;
  margin-bottom: 12px;
}
.receipt-header h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: bold;
}
.receipt-header p {
  margin: 2px 0;
  font-size: 12px;
}
@media print {
  body.print-mode * {
    visibility: hidden;
  }
  body.print-mode #print-area, body.print-mode #print-area * {
    visibility: visible;
  }
  body.print-mode #print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 10px;
    background: white;
    color: black;
  }
  body.print-mode .hide-print {
    display: none !important;
  }
  body.print-mode .receipt-header {
    display: block;
  }
  body.print-mode .total-row {
    border-bottom: 1px dashed #ccc;
    color: black;
  }
  body.print-mode .totals {
    background: white;
    border: none;
    color: black;
    border-top: 1px solid black;
    padding: 8px 0;
    margin-top: 8px;
  }
  body.print-mode .total-row strong {
    color: black;
  }
  body.print-mode .total-row.grand {
    font-size: 16px;
    font-weight: bold;
    border-top: 1px dashed black;
    padding-top: 8px;
  }
  
  /* Paper widths */
  body.print-50mm #print-area {
    width: 48mm;
    font-size: 10px;
  }
  body.print-80mm #print-area {
    width: 72mm;
    font-size: 12px;
  }
}


/* Mobile stability pass: prevent sideways overflow and keep controls touch-friendly. */
@media (max-width: 640px) {
  html, body { max-width:100%; overflow-x:hidden; }
  .topbar { min-height:60px; gap:10px; padding:0 12px; }
  .page-content { padding:14px 12px 24px; }
  .page-header, .section-header, .toolbar, .header-actions { flex-wrap:wrap; gap:10px; }
  .page-header h1, .page-title { font-size:clamp(1.35rem,6vw,1.8rem); line-height:1.2; }
  .metrics, .dashboard-grid, .inventory-grid, .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .metric-card, .stat-card, .panel, .card { min-width:0; padding:13px; }
  .table-wrap, .table-container { max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table { min-width:640px; }
  input, select, textarea, button, .btn { max-width:100%; min-height:42px; font-size:16px; }
  .form-grid, .settings-layout, .order-layout { grid-template-columns:minmax(0,1fr) !important; }
  .sidebar { z-index:1000; }
  .theme-toggle, .theme-toggle:hover, .theme-toggle:active { transform:none !important; transition:background-color .18s ease,color .18s ease,border-color .18s ease; }
}
@media (max-width: 380px) {
  .metrics, .inventory-grid, .product-grid { grid-template-columns:minmax(0,1fr); }
  .topbar { padding:0 9px; }
  .page-content { padding:12px 9px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* Mobile navigation controls and top-layer notifications */
.sidebar-close { display:none; }
.sidebar-backdrop { display:none; }
@media (max-width:900px) {
 .sidebar-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.52); backdrop-filter:blur(2px); z-index:79; display:block; opacity:0; pointer-events:none; transition:opacity .18s ease; }
 .sidebar-backdrop.visible { opacity:1; pointer-events:auto; } .sidebar-backdrop:not(.visible){opacity:0!important;pointer-events:none!important;visibility:hidden;} .sidebar-backdrop.visible{visibility:visible;}
 .sidebar { z-index:80; }
 .sidebar-close { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; margin-left:auto; border:1px solid var(--border); border-radius:10px; background:var(--bg-card); color:var(--ink); font-size:22px; cursor:pointer; }
 .toast-region { top:calc(64px + env(safe-area-inset-top)); right:10px; }
}
@media (prefers-reduced-motion:reduce) { .sidebar-backdrop,.sidebar { transition:none!important; } .toast { animation:none!important; } }

/* Mobile layout: one primary column, no clipped cards/charts, stable admin header. */
@media (max-width: 640px) {
  .app-shell, .main, #app, .page-content, .dashboard-grid, .card, .panel { min-width:0; max-width:100%; }
  .dashboard-grid, .settings-layout, .order-layout { grid-template-columns:minmax(0,1fr) !important; }
  .metrics, .inventory-grid { grid-template-columns:minmax(0,1fr) !important; }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .report-chart { height:auto; min-height:0; display:grid; grid-template-columns:minmax(0,1fr); align-items:stretch; gap:10px; padding:12px; }
  .chart-col { height:auto; display:grid; grid-template-columns:minmax(54px,auto) minmax(0,1fr) 42px; align-items:center; gap:10px; justify-content:stretch; min-width:0; }
  .chart-col strong { font-size:12px; text-align:left; overflow-wrap:anywhere; }
  .chart-col small { font-size:11px; text-align:right; }
  .chart-bar-wrap { height:12px; width:100%; justify-content:flex-start; background:var(--bg-elevated); border-radius:999px; overflow:hidden; }
  .chart-bar { width:var(--mobile-bar-width, 50%); max-width:100%; height:100% !important; min-height:0; border-radius:999px; }
  .topbar { position:sticky; top:0; z-index:70; display:flex; width:100%; min-width:0; gap:8px; padding:0 10px; }
  .mobile-menu { flex:0 0 42px; width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; }
  .crumb { flex:1 1 auto; min-width:0; }
  .top-actions { flex:0 0 auto; display:flex; align-items:center; gap:5px; min-width:0; }
  .top-actions .btn:not(.notification-enable) { font-size:0; min-width:38px; padding:8px; }
  .top-actions .btn:not(.notification-enable)::first-letter { font-size:15px; }
  .sidebar { width:min(86vw,320px); max-width:calc(100vw - 48px); height:100dvh; padding-bottom:max(16px,env(safe-area-inset-bottom)); }
  .sidebar .brand { position:sticky; top:0; z-index:2; background:var(--bg-sidebar); padding-top:env(safe-area-inset-top); }
  .nav-item { min-height:46px; padding-top:11px; padding-bottom:11px; }
  .pos-scroll-toggle { position:fixed; z-index:75; right:14px; bottom:calc(16px + env(safe-area-inset-bottom)); border:1px solid var(--accent); background:var(--accent); color:#171717; border-radius:999px; padding:12px 16px; min-height:46px; font-size:13px; font-weight:800; box-shadow:0 8px 26px rgba(0,0,0,.28); }
  .pos-scroll-toggle[hidden] { display:none !important; }
  .order-cart { order:2; width:100%; max-width:100%; }
  .order-layout > div:first-child { order:1; min-width:0; }
  .table-wrap, .table-container { width:100%; }
}
@media (max-width: 380px) {
  .topbar { gap:5px; padding-inline:7px; }
  .crumb span, .crumb b { display:none; }
  .crumb strong { font-size:12px; }
  .top-actions { gap:3px; }
  .top-actions .theme-toggle, .top-actions #refresh-btn { min-width:34px; width:34px; padding:5px; }
  .product-grid { grid-template-columns:minmax(0,1fr) !important; }
}


/* Dashboard popular-item food photography */
.popular-item-image{width:48px;height:48px;flex:0 0 48px;object-fit:cover;border-radius:12px;background:var(--bg-elevated);border:1px solid var(--border);display:block}

/* Draggable assistive order ball and live-order drawer (theme-token based). */
.assistive-ball{position:fixed;right:18px;bottom:18px;z-index:9990;width:42px;height:42px;border:1px solid color-mix(in srgb,var(--accent) 70%,transparent);border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#151515;font-size:18px;font-weight:900;box-shadow:0 7px 20px #0003,0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent);cursor:grab;touch-action:none;user-select:none;transition:box-shadow .18s,transform .18s;}
.assistive-ball:hover{transform:scale(1.04);box-shadow:0 16px 42px #0005,0 0 0 7px color-mix(in srgb,var(--accent) 18%,transparent)}.assistive-ball:active{cursor:grabbing}.assistive-ball.has-updates{animation:assistive-pulse 1.8s ease-in-out infinite}.assistive-ball i,.floating-tracker i{position:absolute;right:-4px;top:-4px;min-width:17px;height:17px;padding:0 4px;box-sizing:border-box;display:grid;place-items:center;border:2px solid var(--bg-base);border-radius:20px;background:#e74c3c;color:#fff;font-size:9px;font-style:normal;font-weight:900}.assistive-ball i[hidden],.floating-tracker i[hidden]{display:none}
@keyframes assistive-pulse{0%,100%{box-shadow:0 12px 34px #0004,0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent)}50%{box-shadow:0 12px 34px #0004,0 0 0 9px color-mix(in srgb,var(--accent) 7%,transparent)}}
.assistive-orders-panel{position:fixed;right:20px;bottom:92px;z-index:9989;width:min(430px,calc(100vw - 24px));max-height:min(72vh,720px);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--bg-card);color:var(--ink);box-shadow:0 24px 80px #0005;backdrop-filter:blur(18px)}.assistive-orders-panel[hidden]{display:none}.assistive-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border-bottom:1px solid var(--line);background:var(--bg-panel,var(--bg-card))}.assistive-panel-head strong{display:block;font-size:15px}.assistive-panel-head small{display:block;color:var(--ink-muted);font-size:11px;margin-top:3px}.assistive-panel-close{width:34px;height:34px;flex:0 0 34px;border:1px solid var(--line);border-radius:10px;background:var(--bg-input);color:var(--ink);font-size:23px;cursor:pointer}.assistive-panel-body{overflow:auto;padding:10px;display:grid;gap:9px;overscroll-behavior:contain}.assistive-order-card{padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--bg-base);min-width:0}.assistive-order-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.assistive-order-top>strong{font-size:13px}.assistive-order-meta{font-size:11px;color:var(--ink-muted);margin-top:6px;line-height:1.5;overflow-wrap:anywhere}.assistive-order-meta b{color:var(--ink)}.assistive-order-items{font-size:12px;line-height:1.5;margin-top:8px;overflow-wrap:anywhere}.assistive-order-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}.assistive-order-actions button,.assistive-panel-foot button{border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:var(--bg-input);color:var(--ink);font:inherit;font-size:11px;font-weight:800;cursor:pointer}.assistive-order-actions button.primary{background:var(--accent);color:#141414;border-color:var(--accent)}.assistive-order-actions button.payment-confirm{background:color-mix(in srgb,#16a34a 14%,var(--bg-card));border-color:#16a34a;color:var(--ink)}.assistive-empty{padding:26px 14px;text-align:center;color:var(--ink-muted);font-size:13px}.assistive-panel-foot{display:flex;justify-content:space-between;gap:8px;padding:11px 13px;border-top:1px solid var(--line);background:var(--bg-panel,var(--bg-card))}.floating-tracker{width:42px;height:42px;padding:0;display:grid;place-items:center;border-radius:50%;font-size:18px;position:fixed;z-index:9990;right:18px;bottom:18px;box-shadow:0 12px 34px #0004,0 0 0 5px color-mix(in srgb,var(--accent) 15%,transparent);touch-action:none;user-select:none}.floating-tracker span{pointer-events:none}.floating-tracker:active{cursor:grabbing}
@media(max-width:600px){.assistive-ball{width:40px;height:40px;right:12px;bottom:12px}.assistive-orders-panel{right:8px;bottom:62px;width:calc(100vw - 16px);max-height:72dvh;border-radius:17px}.floating-tracker{right:12px;bottom:12px;width:40px;height:40px}}
@media(prefers-reduced-motion:reduce){.assistive-ball,.assistive-ball.has-updates{animation:none!important;transition:none!important}}