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

/* ============================================
   ORDO — Global Styles
   Color palette (Chowk Tandoor branding — pure yellow/black, no brown):
   - Black:         #141414  (background)
   - Bright Yellow: #F5D613  (accent, matches logo)
   - White:         #FFFFFF  (text)
   - Red:           #E74C3C  (errors only)
   - Card surface:  #1F1F1F
   ============================================ */

:root {
  --bg: #141414;
  --surface: #1F1F1F;
  /* Nested cards (a card inside a card) — one step lighter than --surface,
     so depth reads without needing another border everywhere. */
  --surface-2: #262626;
  --text: #FFFFFF;
  --text-dim: #A8A8A8;
  /* Kept as an alias, not a duplicate value that could drift out of sync —
     --amber is the name used throughout the existing app, --accent-yellow
     is the name the design spec uses. Same colour, one place to change it. */
  --amber: #F5D613;
  --accent-yellow: var(--amber);
  /* The second brand colour — ORDO's ember/tandoor tone. Reserved for
     SECONDARY actions and highlights (Back buttons, tags, the QR-ordering
     and Customers sections) so the app reads as two colours working
     together rather than one colour used for everything, which was the
     "bejaan" complaint. Primary actions — Save, Pay, Send KOT — stay
     amber; that contrast is what makes a primary button still look
     primary. */
  --accent-ember: #D9541E;
  --rust: #E74C3C;
  --success: #4ADE80;
  --success-rgb: 74, 222, 128;
  --warning: var(--amber);
  --info: #38BDF8;
  --info-rgb: 56, 189, 248;
  --text-muted: var(--text-dim);
  --border: #333333;

  /* Elevation — layered shadows instead of flat borders alone, so cards
     sit *on* the dark background rather than being cut out of it */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.55);
  --glow-amber: 0 0 0 3px rgba(245, 214, 19, 0.18);
  --glow-ember: 0 0 0 3px rgba(217, 84, 30, 0.22);

  /* One easing curve everywhere — motion feels like it came from the same
     hand rather than five different ones */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 0.16s;
  --base: 0.26s;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
}

/* Reset — sab browsers apna default margin/padding lagate hai, hum unko zero karte hai
   taaki humara design predictable rahe */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

.hidden {
  display: none !important;
}

/* ---------- ORDO brand badge (bottom-right, every screen) ---------- */
/* ---------- ORDO header logo bar (every screen, top of page) ---------- */
.ordo-header-bar {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
}

.ordo-header-bar img {
  height: 22px;
  width: auto;
  display: block;
}

.auth-loading {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: ordo-spin 0.7s linear infinite;
}

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

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden; /* safety net — stops any stray element from causing sideways scroll/cutoff on phones */
}

/* ---------- Login Screen ---------- */

.login-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.brand {
  text-align: center;
  margin-bottom: 32px;
}

.brand h1 {
  font-size: 3rem;
  letter-spacing: 2px;
  color: var(--amber);
  font-weight: 800;
}

.brand .tagline {
  color: var(--text-dim);
  font-size: 0.95rem;
  margin-top: 4px;
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  width: 100%;
  max-width: 360px;
}

.login-card h2 {
  font-size: 1.1rem;
  margin-bottom: 20px;
  color: var(--text);
}

/* Role selection buttons — 4 buttons ek row me, equal width */
.role-select {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 24px;
}

.role-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.15s ease;
}

.role-btn.active {
  background: var(--amber);
  color: var(--bg);
  border-color: var(--amber);
  font-weight: 600;
}

.role-btn:hover {
  border-color: var(--amber);
}

/* Form fields */
form label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 6px;
  margin-top: 14px;
}

form input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.95rem;
}

form input:focus {
  outline: none;
  border-color: var(--amber);
}

.submit-btn {
  width: 100%;
  margin-top: 24px;
  padding: 12px;
  background: var(--amber);
  color: var(--bg);
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.submit-btn:hover {
  opacity: 0.9;
}

.error-msg {
  color: var(--rust);
  font-size: 0.85rem;
  text-align: center;
  margin-top: 14px;
  min-height: 18px;
}

/* ---------- Toast notifications (replaces alert()) ---------- */
#ordoToastContainer {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 3000;
  max-width: 320px;
}

.ordo-toast {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--amber);
  color: var(--text);
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.4;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.ordo-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.ordo-toast-error {
  border-left-color: var(--rust);
}

/* ---------- Confirm dialog (replaces confirm()) ---------- */
.ordo-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  opacity: 0;
  transition: opacity 0.2s ease;
  padding: 20px;
}

.ordo-confirm-overlay.show {
  opacity: 1;
}

.ordo-confirm-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  max-width: 320px;
  width: 100%;
  text-align: center;
}

.ordo-confirm-box p {
  color: var(--text);
  margin-bottom: 20px;
  font-size: 0.95rem;
  line-height: 1.4;
}

.ordo-confirm-actions {
  display: flex;
  gap: 10px;
}

.ordo-confirm-actions button {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}

.ordo-confirm-cancel {
  background: var(--border);
  color: var(--text);
}

.ordo-confirm-ok {
  background: var(--rust);
  color: #fff;
}

.payment-mode-btn {
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 8px;
  font-size: 0.95rem;
  cursor: pointer;
  text-align: left;
}

.payment-mode-btn:hover {
  border-color: var(--amber);
}

/* ---------- Print receipt (shown inside an on-screen modal) ----------
   When printing, this CSS hides everything else on the page and shows
   only the receipt content — so printing never navigates away. */
/* Tells the printer/browser this is receipt-roll paper, not A4/Letter —
   80mm is the standard width for most restaurant thermal printers.
   "auto" height lets it print a continuous strip instead of cutting to
   a fixed page height (which most thermal printer drivers handle correctly). */
@page {
  size: 80mm auto;
  margin: 0;
}

@media print {
  /* Hide every top-level element except the receipt modal itself.
     The old approach used visibility:hidden, which keeps the hidden
     elements occupying space — that produced blank leading pages on a
     continuous thermal roll. display:none removes them outright. */
  /* #printArea is excluded too: the day-closing slip isn't inside a modal,
     so without this the element holding it was hidden along with the page
     and the printer produced a blank sheet. */
  body > *:not(.ordo-confirm-overlay):not(#printArea):not(#kotPrintArea) {
    display: none !important;
  }

  /* The receipt sits inside the on-screen modal, which is a scrolling box
     (max-height + overflow-y:auto) and carries a transform from its pop-in
     animation. A transformed ancestor becomes the containing block for an
     absolutely-positioned child, so #printArea got trapped inside that
     scrolling box and everything past the first screenful — i.e. all the
     items — was clipped away, leaving only the header on paper.
     Flattening the wrapper lets the whole receipt flow onto the roll. */
  .ordo-confirm-overlay,
  .ordo-confirm-box {
    display: block !important;
    position: static !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
    animation: none !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    backdrop-filter: none !important;
  }

  /* The Close / Print buttons are screen controls, not part of the bill */
  .ordo-confirm-actions {
    display: none !important;
  }

  /* Thermal printers burn dots into heat-sensitive paper, so thin small
     type comes out faint and grey however good the printer is. Heavier,
     larger, pure-black text is what actually reads well. !important is
     needed because the receipt is built with inline styles (so it can
     also be shared as plain text), and those would otherwise win. */
  #printArea, #printArea *,
  #kotPrintArea, #kotPrintArea * {
    color: #000 !important;
    font-weight: 700 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  #kotPrintArea {
    width: var(--receipt-width, 70mm) !important;
    padding: 1mm !important;
    box-sizing: border-box;
    font-family: 'Courier New', Consolas, monospace !important;
  }

  /* When a kitchen ticket is printing, nothing else may print with it —
     a KOT and a bill on one strip is two documents and one wasted slip. */
  #kotPrintArea ~ #printArea,
  #kotPrintArea ~ .ordo-confirm-overlay {
    display: none !important;
  }

  #printArea {
    /* Set from the restaurant's printer setting. 70mm suits an 80mm roll
       (the extra is unprintable margin); 48mm suits a 58mm roll. Printing
       an 80mm layout on 58mm paper chops the prices off the right edge,
       which is why this can't be hardcoded once ORDO runs on more than
       one restaurant's printer. */
    width: var(--receipt-width, 70mm) !important;
    padding: 1mm !important;
    box-sizing: border-box;
    font-family: 'Courier New', Consolas, monospace !important;
    font-size: var(--receipt-font, 13px) !important;
    /* Tightened from 1.5. Thermal paper is a running cost, and at this
       size the slip is still comfortably readable — the earlier spacing
       was adding roughly a third more length to every single bill. */
    line-height: 1.25 !important;
    overflow-wrap: break-word;
  }

  #printArea table {
    width: 100% !important;
    /* Fixed layout stops a long item name from stretching the table past
       the paper edge, which is what silently cut digits off the prices. */
    table-layout: fixed !important;
    border-collapse: collapse;
    page-break-inside: auto;
  }

  #printArea tr {
    page-break-inside: avoid; /* never split one item across a tear line */
  }

  #printArea td {
    padding: 0.6mm 0 !important;
    font-size: var(--receipt-td-font, 13px) !important;
    overflow-wrap: break-word;
    vertical-align: top;
  }

  /* Restaurant name — the one thing that should dominate the slip */
  #printArea > div:first-child > div:first-child {
    font-size: var(--receipt-title-font, 20px) !important;
  }

  /* Dashed and double rules come out as faint speckles on thermal paper */
  #printArea div[style*="border-top"] {
    border-top: 2px solid #000 !important;
    margin: 3px 0 !important;
  }
}

.nav-link {
  display: block;
  color: var(--amber);
  text-decoration: none;
  font-size: 0.85rem;
  margin-bottom: 10px;
}

.nav-link:hover {
  text-decoration: underline;
}

/* ============================================================
   POLISH LAYER
   Motion, depth and typographic rhythm applied app-wide.
   Loaded on every page via style.css, so no per-page markup
   changes were needed to roll this out.
   ============================================================ */

/* ---------- Typography ----------
   Poppins is the logo's own typeface, so every heading in the app
   is literally set in the brand. Body stays Inter for legibility at
   small sizes on a kitchen tablet across a room. */
h1, h2, h3,
.admin-title, .track-title, .brand h1 {
  font-family: 'Poppins', 'Inter', sans-serif;
  letter-spacing: -0.02em;
}

.section-title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
}

/* ---------- Signature: the ember line ----------
   A slow amber sweep under the header bar — the one deliberately
   expressive element in the app. It reads as the glow of a tandoor,
   which is where this whole thing is actually installed. Everything
   else stays quiet so this is the detail people remember. */
.ordo-header-bar {
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.ordo-header-bar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 45%;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  animation: ordo-ember 5s var(--ease) infinite;
  opacity: 0.75;
}

@keyframes ordo-ember {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(240%); }
  100% { transform: translateX(240%); }
}

/* ---------- Page entrance ----------
   Applied to page shells only, never to lists that re-render on every
   keystroke (the menu search) — otherwise items would re-animate as
   you type, which reads as jitter rather than polish. */
/* Fade only — deliberately NO transform here.
   Any transform on an element makes it the containing block for its
   position:fixed descendants, so the pinned cart bars inside these
   screens stopped sticking to the bottom of the phone and started
   sticking to the bottom of the (very tall) page instead — which meant
   scrolling all the way down to reach them. Fading avoids that entirely. */
.waiter-screen,
.track-screen,
.admin-screen,
.dashboard-screen,
.staff-screen,
.settings-screen,
.reports-screen,
.inventory-screen,
.login-screen,
.setup-screen {
  animation: ordo-fade var(--base) var(--ease) both;
}

@keyframes ordo-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ordo-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Buttons ----------
   Every button gets the same press response, so the whole app
   feels physically consistent under the thumb. */
button,
.nav-link {
  transition: transform var(--fast) var(--ease),
              background-color var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease),
              opacity var(--fast) var(--ease);
}

button:active:not(:disabled) {
  transform: scale(0.96);
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Primary actions get a soft amber lift on hover — a hint of the
   accent's light spilling onto the surface below it */
.send-kot-btn:hover:not(:disabled),
.add-btn:hover:not(:disabled),
.ready-btn:hover:not(:disabled),
.paid-btn:hover:not(:disabled),
.save-btn:hover:not(:disabled) {
  box-shadow: 0 6px 18px rgba(245, 214, 19, 0.28);
  transform: translateY(-1px);
}

/* ---------- Cards ---------- */
.order-card,
.bill-card,
.settings-card,
.add-item-card,
.stat-card {
  box-shadow: var(--shadow-md);
  transition: transform var(--base) var(--ease), box-shadow var(--base) var(--ease), border-color var(--base) var(--ease);
}

.order-card:hover,
.bill-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: #444;
}

/* ---------- Tabs & filters ---------- */
.unit-tab,
.page-tab,
.filter-btn,
.role-btn {
  transition: all var(--fast) var(--ease);
}

.unit-tab.active,
.page-tab.active,
.filter-btn.active,
.role-btn.active {
  box-shadow: 0 4px 14px rgba(245, 214, 19, 0.25);
}

/* ---------- Inputs ----------
   A focused field glows rather than just changing border colour, so
   it's obvious which one is live even on a glare-y counter screen. */
input, select, textarea {
  font-family: 'Inter', sans-serif;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: var(--glow-amber);
}

/* ---------- Modals ---------- */
.ordo-confirm-overlay {
  backdrop-filter: blur(3px);
  transition: opacity var(--base) var(--ease);
}

.ordo-confirm-box {
  animation: ordo-pop var(--base) var(--ease) both;
  box-shadow: var(--shadow-lg);
}

@keyframes ordo-pop {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------- Toasts ---------- */
.ordo-toast {
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(6px);
}



/* ---------- Quality floor ----------
   Keyboard users get a visible focus ring, and anyone who has asked
   their device to reduce motion gets a still interface. */
:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Offline & sync indicators ----------
   Two things are being said and they belong apart: the banner states that
   the connection is down, the badge counts what's still waiting to reach
   the server. Both sit where they can be read across a counter rather than
   tucked into a corner in small type. */
.ordo-offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4000;
  background: var(--rust);
  color: #fff;
  padding: 12px 16px;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
  box-shadow: var(--shadow-md);
}

/* Bottom-left corner. It was moved to the centre to be more noticeable
   and simply got in the way — this is a status line, not an alert, and it
   shouldn't sit in the middle of the screen during service. Raised enough
   to clear the pinned cart bar. */
.ordo-sync-badge {
  position: fixed;
  bottom: 86px;
  left: 14px;
  z-index: 3500;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  max-width: calc(100vw - 28px);
  white-space: nowrap;
}

.ordo-sync-badge strong { font-weight: 800; }

.ordo-sync-badge.offline {
  background: var(--rust);
  color: #fff;
}

.ordo-sync-badge.syncing {
  background: var(--amber);
  color: #141414;
}

.ordo-sync-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  animation: ordo-sync-pulse 1.4s var(--ease) infinite;
}

@keyframes ordo-sync-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* ---------- Shared page patterns ----------
   Tabs and the page title were defined inside waiter.css, which meant any
   new page that didn't happen to load that file got unstyled browser
   buttons. They're generic UI, so they belong here where every page
   already picks them up. */
.page-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.page-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  padding: 10px 4px;
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
}

.page-tab.active {
  color: var(--amber);
  border-bottom-color: var(--amber);
  font-weight: 700;
}

.admin-title {
  color: var(--amber);
  font-size: 1.5rem;
  margin-bottom: 16px;
}

/* ---------- Classes that were used in markup but never styled ----------
   Found by auditing every class name in the HTML and JS against the
   stylesheets. Each of these was rendering as an unstyled browser
   default. */

/* Device setup page — it only loads style.css, so its own classes belong here */
.setup-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  max-width: 400px;
  margin: 0 auto;
  box-shadow: var(--shadow-md);
}

.setup-btn {
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  background: var(--amber);
  color: #141414;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}

.not-found-box {
  background: rgba(231, 76, 60, 0.1);
  border: 1px solid var(--rust);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 16px;
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* Table number on an order/bill card */
.order-table {
  font-weight: 700;
  font-size: 1rem;
}

/* Scrollable order panel, so a long order doesn't push the total off screen */
.order-list {
  max-height: 340px;
  overflow-y: auto;
}

.dash-tables {
  margin-bottom: 8px;
}

.login-restaurant {
  color: var(--amber);
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: -6px;
  margin-bottom: 14px;
}


/* ============================================================
   Shared components

   These were defined inside dashboard.css and waiter.css, which meant any
   OTHER page using them rendered them as plain browser defaults — the
   Udhaar and Customers pages both did. Shared patterns belong in the
   stylesheet every page already loads.
   ============================================================ */

/* ---------- Stat cards ---------- */
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-card.highlight {
  border-color: var(--amber);
}

.stat-label {
  color: var(--text-dim);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-value {
  font-size: 1.6rem;
  font-weight: 700;
}

.stat-card.highlight .stat-value {
  color: var(--amber);
}


/* ---------- Search box ---------- */
/* Sticky on purpose: on a phone, the whole page scrolls as one column
   (menu, then the order panel below it) — without this, scrolling down a
   long menu carried the search box away with it, right when it's most
   useful for jumping straight to an item instead of scrolling further.
   Still works as the icon's positioning anchor exactly like the old
   `position: relative` did — sticky behaves the same way for that until
   it actually sticks. */
.menu-search-wrapper {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface);
  margin-bottom: 14px;
  padding-top: 2px; /* breathing room so the input doesn't touch the stuck edge */
}

/* On pages with the fixed app bar (Create Bill), stick just below it
   instead of under it. Everywhere else (the waiter screen has no app
   bar) top: 0 is correct as-is. */
.has-app-bar .menu-search-wrapper {
  top: 56px;
}

.is-offline.has-app-bar .menu-search-wrapper {
  top: 100px; /* 56px bar + 44px offline banner, same offset used for .app-bar itself */
}

.menu-search-wrapper::before {
  content: "🔍";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  opacity: 0.5;
  pointer-events: none;
}

.menu-search-input {
  width: 100%;
  padding: 11px 14px 11px 36px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.9rem;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}

.menu-search-input::placeholder {
  color: var(--text-dim);
}

.menu-search-input:focus {
  outline: none;
  border-color: var(--amber);
}


/* ---------- Form field group ---------- */
.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-bottom: 6px;
}

/* Cautionary note inside a card */
.warning {
  background: rgba(245, 214, 19, 0.08);
  border: 1px solid var(--amber);
  border-radius: var(--radius-md);
  padding: 14px;
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.6;
}


/* ---------- Payment mode picker ----------
   Used by Mark Paid, Create Bill and the Udhaar Khata. It lived in
   waiter.css, so on the Udhaar page the buttons rendered as plain browser
   defaults. */
.payment-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.payment-mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
}

.payment-mode-btn:hover {
  border-color: var(--amber);
  background: rgba(245, 214, 19, 0.08);
}

.payment-mode-icon { font-size: 1.6rem; line-height: 1; }

/* ---------- Empty state ----------
   The same rule was copied into nine stylesheets, and any page that
   didn't happen to load one of them showed unstyled text. */
.empty-msg {
  color: var(--text-dim);
  font-size: 0.9rem;
  text-align: center;
  padding: 28px 16px;
  line-height: 1.6;
}


/* ---------- Dropdowns ----------
   No stylesheet covered <select> at all, so every dropdown in the app fell
   back to the browser's own control — a white box on a dark screen. */
select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 11px 34px 11px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  cursor: pointer;
  /* Chevron drawn inline so no image file is needed */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2.5' stroke-linecap='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px;
}

select:focus {
  outline: none;
  border-color: var(--amber);
}

/* The list itself is drawn by the operating system, so only the colours
   can be set — but that's enough to stop white-on-white options. */
select option {
  background: var(--surface);
  color: var(--text);
}

/* ---------- Scrollbars ----------
   The menu panel scrolls on its own now, and the default scrollbar sits on
   a dark panel as a bright grey slab. */
.menu-list::-webkit-scrollbar,
.order-panel::-webkit-scrollbar,
.edit-search-results::-webkit-scrollbar {
  width: 8px;
}

.menu-list::-webkit-scrollbar-track,
.order-panel::-webkit-scrollbar-track,
.edit-search-results::-webkit-scrollbar-track {
  background: transparent;
}

.menu-list::-webkit-scrollbar-thumb,
.order-panel::-webkit-scrollbar-thumb,
.edit-search-results::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
}

.menu-list::-webkit-scrollbar-thumb:hover,
.order-panel::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

.menu-list,
.order-panel {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

/* ============================================================
   App shell — top bar + navigation drawer (admin-nav.js)
   ============================================================ */

/* Pushes every page's own content below the fixed bar, so nothing on any
   admin page has to carry its own top padding for this. */
.has-app-bar {
  padding-top: 56px;
}

/* ---------- Top bar ---------- */
.app-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.app-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0; /* lets the restaurant name truncate instead of overflowing */
}

.app-bar-logo {
  height: 18px;
  width: auto;
  flex-shrink: 0;
}

.app-bar-restaurant {
  color: var(--text-dim);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 10px;
  border-left: 1px solid var(--border);
}

.app-bar-menu-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 13px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.app-bar-menu-btn:hover {
  border-color: var(--amber);
  color: var(--amber);
}

/* ---------- Drawer ---------- */
.app-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--base) var(--ease);
}

.app-drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.app-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(300px, 84vw);
  z-index: 1001;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.35);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--base) var(--ease);
}

.app-drawer.open {
  transform: translateX(0);
}

.app-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--border);
}

.app-drawer-profile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.app-drawer-name {
  font-weight: 800;
  font-size: 0.98rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-drawer-role {
  color: var(--amber);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.app-drawer-close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px;
}

.app-drawer-close:hover { color: var(--amber); }

.app-drawer-group {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
}

.app-drawer-group:last-child { border-bottom: none; }

.app-drawer-group-title {
  color: var(--text-dim);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 10px 8px;
}

.app-drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
}

.app-drawer-link:hover {
  background: var(--bg);
}

.app-drawer-link.active {
  background: rgba(245, 214, 19, 0.1);
  color: var(--amber);
}

.app-drawer-link.active .nav-icon {
  color: var(--amber);
}

.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text-dim);
}

.app-drawer-link:hover .nav-icon,
.app-drawer-link.active .nav-icon {
  color: inherit;
}

.app-drawer-foot .app-drawer-link {
  color: var(--text-dim);
}

@media (min-width: 640px) {
  .app-drawer { width: 320px; }
}

/* Coordinates the offline banner with the fixed app bar — both are
   "position: fixed; top: 0" on their own, so without this the banner
   would land directly on top of the bar instead of above it. Scoped to
   .has-app-bar only: pages without the app bar (the offline banner works
   everywhere) are untouched. */
.is-offline.has-app-bar .app-bar {
  top: 44px;
}

.is-offline.has-app-bar {
  padding-top: 100px; /* 56px bar + 44px banner */
}

/* ---------- Sticky order panel vs the app bar ----------
   .order-panel (waiter.css) sticks 20px from the top of the viewport,
   which is correct on waiter.html (no app bar there) but would tuck it
   partly UNDER the fixed 56px app bar on create-bill.html, which loads
   this same stylesheet and does have one. Scoped to .has-app-bar so
   waiter.html's own layout is untouched. */
@media (min-width: 769px) {
  .has-app-bar .order-panel {
    top: 76px; /* 56px bar + the original 20px gap */
    max-height: calc(100vh - 276px);
  }

  .has-app-bar .menu-panel {
    max-height: calc(100vh - 276px);
  }
}