/* BiasharaGo — global stylesheet
   Extracted from the former inline <style> block in index.html so Vite
   can process, minify, and hash it as part of the production build. */

/* ── Mobile Cart Bottom Sheet ───────────────────────────────────────────── */
/* On small screens the cart column becomes a slide-up bottom sheet.         */
/* Collapsed: ~60px (drag handle + cart header visible only).                */
/* Expanded: 80vh (full cart visible, scrollable).                           */
@media (max-width: 767px) {
  #pos-cart-col {
    overflow: hidden;
    transition: height 300ms ease-in-out;
    height: 56px; /* collapsed — just the drag handle + header row */
    flex-shrink: 0;
  }
  #pos-cart-col.cart-sheet-expanded {
    height: 80vh;
    overflow-y: auto;
  }
  /* Rotate chevron when expanded */
  #pos-cart-col.cart-sheet-expanded #cart-sheet-chevron {
    transform: rotate(180deg);
  }
}

* { font-family: Inter, 'Helvetica Neue', Arial, sans-serif; }
body { background: #0d0e12; }

/* scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a2b36; border-radius: 4px; }

/* nav links */
.nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  font-size: .875rem; font-weight: 500;
  border: 1px solid transparent;
  color: #6b7280; cursor: pointer;
  transition: background .15s, color .15s;
  text-decoration: none;
}
.nav-link:hover { color: #f9fafb; background: rgba(255,255,255,.04); }
.nav-link.active {
  color: #fff;
  background: rgba(5,150,105,.14);
  border-color: rgba(5,150,105,.3);
}

/* shared text-input */
.sb-input {
  width: 100%; background: #0d0e12;
  border: 1px solid #272830; border-radius: 10px;
  padding: 11px 14px; color: #f9fafb;
  font-size: .875rem; outline: none;
  transition: border-color .15s;
}
.sb-input::placeholder { color: #4b5563; }
.sb-input:focus { border-color: #059669; }

/* pos large input */
.pos-input {
  width: 100%; background: #13141a;
  border: 1px solid #272830; border-radius: 12px;
  padding: 16px 18px; color: #f9fafb;
  font-size: 1.5rem; font-weight: 700; outline: none;
  transition: border-color .15s;
}
.pos-input::placeholder { color: #374151; font-weight: 400; font-size: 1rem; }
.pos-input:focus { border-color: #059669; }

/* gateway role-select cards */
.gateway-card {
  background: #1a1b23;
  border: 1px solid #272830;
  border-radius: 20px;
  padding: 36px 28px;
  text-align: center;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  position: relative;
  overflow: hidden;
}
.gateway-card:hover { transform: translateY(-3px); }
.gateway-card.owner:hover  { border-color: rgba(5,150,105,.45); }
.gateway-card.cashier:hover { border-color: rgba(14,165,233,.4); }
.gateway-card:active { transform: translateY(-2px); }

/* pending spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #374151;
  border-top-color: #fbbf24;
  animation: spin .8s linear infinite;
  flex-shrink: 0;
}

/* modal */
#modal-overlay { transition: opacity .18s ease; }
#modal-overlay.hidden { pointer-events: none; }

/* light theme */
.light body, .light { background-color: #f4f6f8 !important; }
.light .bg-base    { background-color: #f4f6f8 !important; }
.light .bg-surface { background-color: #ffffff !important; }
.light .bg-card    { background-color: #ffffff !important; }
.light .bg-raised  { background-color: #f0f2f5 !important; }
.light .border-line { border-color: #e5e7eb !important; }
.light .nav-link   { color: #6b7280; }
.light .nav-link:hover { color: #111827; background: rgba(0,0,0,.05); }
.light .nav-link.active { color: #065f46; background: rgba(5,150,105,.08); border-color: rgba(5,150,105,.25); }
.light .sb-input   { background: #f0f2f5; border-color: #d1d5db; color: #111827; }
.light .pos-input  { background: #f0f2f5; border-color: #d1d5db; color: #111827; }
.light #modal-box  { background: #fff !important; border-color: #e5e7eb !important; }
/* Audit / Digital Receipt modal — override hardcoded dark inline styles in light mode */
.light #modal-audit-ledger > div { background: #ffffff !important; border-color: #e5e7eb !important; }
.light #modal-audit-ledger > div .border-b { border-color: #e5e7eb !important; }
.light #modal-audit-ledger > div [style*="background:#1a1b23"],
.light #modal-audit-ledger > div [style*="background:#13141a"],
.light #modal-audit-ledger > div [style*="background:#1f2029"],
.light #audit-ledger-body       [style*="background:#1a1b23"],
.light #audit-ledger-body       [style*="background:#16171e"],
.light #audit-ledger-body       [style*="background:#13141a"],
.light #audit-ledger-body       [style*="background:#1f2029"] { background: #f0f2f5 !important; }
.light #modal-audit-ledger > div [style*="border-color:#272830"],
.light #audit-ledger-body        [style*="border-color:#272830"],
.light #audit-ledger-body        [style*="border-color:#1f2029"] { border-color: #e5e7eb !important; }
.light #modal-audit-ledger > div [style*="background:#0f2d1f"],
.light #audit-ledger-body        [style*="background:#0f2d1f"] { background: rgba(5,150,105,.12) !important; }
/* High-contrast text inside the audit ledger in light mode */
.light #audit-ledger-body .text-white,
.light #modal-audit-ledger .text-white { color: #0f172a !important; }
.light #audit-ledger-body .text-gray-400,
.light #audit-ledger-body .text-gray-500,
.light #audit-ledger-body .text-gray-600,
.light #modal-audit-ledger .text-gray-400,
.light #modal-audit-ledger .text-gray-500,
.light #modal-audit-ledger .text-gray-600 { color: #374151 !important; }
.light #audit-ledger-body .font-mono,
.light #modal-audit-ledger .font-mono { color: #0f172a !important; }
/* Order Fulfilment Audit Log view in light mode */
.light #order-audit-log-container [style*="background:#1a1b23"],
.light #order-audit-log-container [style*="background:#16171e"],
.light #order-audit-log-container [style*="background:#13141a"],
.light #order-audit-log-container [style*="background:#1f2029"] { background: #f0f2f5 !important; }
.light #order-audit-log-container [style*="border-color:#272830"],
.light #order-audit-log-container [style*="border-color:#1f2029"] { border-color: #e5e7eb !important; }
.light #order-audit-log-container .text-white { color: #0f172a !important; }
.light #order-audit-log-container .text-gray-400,
.light #order-audit-log-container .text-gray-500,
.light #order-audit-log-container .text-gray-600 { color: #374151 !important; }
.light ::-webkit-scrollbar-thumb { background: #d1d5db; }
.light .gateway-card { background: #ffffff; border-color: #e5e7eb; }
.light .gateway-card.owner:hover  { border-color: rgba(5,150,105,.5);  }
.light .gateway-card.cashier:hover { border-color: rgba(14,165,233,.5); }

/* Text colors — most of the app assumes a dark background (text-white,
   text-gray-400/500/600 read fine on #0d0e12/#1a1b23). On a light
   background those same classes need darker equivalents for contrast,
   so we override them here — this catches every use across the app,
   including markup injected at runtime via innerHTML. */
.light .text-white    { color: #111827 !important; }
.light .text-gray-100 { color: #1f2937 !important; }
.light .text-gray-200 { color: #374151 !important; }
.light .text-gray-300 { color: #4b5563 !important; }
.light .text-gray-400 { color: #6b7280 !important; }
.light .text-gray-500 { color: #6b7280 !important; }
.light .text-gray-600 { color: #9ca3af !important; }
.light .text-gray-700 { color: #9ca3af !important; }
.light .hover\:text-white:hover  { color: #111827 !important; }
.light .hover\:text-gray-200:hover,
.light .hover\:text-gray-400:hover { color: #374151 !important; }
.light .hover\:bg-white\/\[\.02\]:hover { background: rgba(0,0,0,.03) !important; }

/* Transaction History tables (terminal My History, owner Transactions/Payments,
   cashier detail panel) — override hardcoded dark inline styles so all text
   is high-contrast on a light background. */
.light #terminal-history-view [style*="background:#1a1b23"],
.light #txn-table-wrapper    [style*="background:#1a1b23"],
.light #pay-table-wrapper    [style*="background:#1a1b23"],
.light #cd-txn-panel         [style*="background:#1a1b23"] { background: #ffffff !important; }

.light #terminal-history-view [style*="background:#16171e"],
.light #txn-table-wrapper    [style*="background:#16171e"],
.light #pay-table-wrapper    [style*="background:#16171e"],
.light #cd-txn-panel         [style*="background:#16171e"] { background: #f8fafc !important; }

.light #terminal-history-view [style*="background:#1f2029"],
.light #txn-table-wrapper    [style*="background:#1f2029"],
.light #pay-table-wrapper    [style*="background:#1f2029"],
.light #cd-txn-panel         [style*="background:#1f2029"] { background: #f0f2f5 !important; }

.light #terminal-history-view [style*="background:#13141a"],
.light #txn-table-wrapper    [style*="background:#13141a"],
.light #pay-table-wrapper    [style*="background:#13141a"],
.light #cd-txn-panel         [style*="background:#13141a"] { background: #f4f6f8 !important; }

.light #terminal-history-view [style*="border-color:#272830"],
.light #txn-table-wrapper    [style*="border-color:#272830"],
.light #pay-table-wrapper    [style*="border-color:#272830"],
.light #cd-txn-panel         [style*="border-color:#272830"] { border-color: #e5e7eb !important; }

.light #terminal-history-view [style*="border-color:#1f2029"],
.light #txn-table-wrapper    [style*="border-color:#1f2029"],
.light #pay-table-wrapper    [style*="border-color:#1f2029"],
.light #cd-txn-panel         [style*="border-color:#1f2029"] { border-color: #e5e7eb !important; }

/* Force high-contrast text inside transaction tables in light mode */
.light #terminal-history-view .text-white,
.light #txn-table-wrapper    .text-white,
.light #pay-table-wrapper    .text-white,
.light #cd-txn-panel         .text-white  { color: #0f172a !important; }

.light #terminal-history-view .text-gray-400,
.light #terminal-history-view .text-gray-500,
.light #terminal-history-view .text-gray-600,
.light #txn-table-wrapper    .text-gray-400,
.light #txn-table-wrapper    .text-gray-500,
.light #txn-table-wrapper    .text-gray-600,
.light #pay-table-wrapper    .text-gray-400,
.light #pay-table-wrapper    .text-gray-500,
.light #pay-table-wrapper    .text-gray-600,
.light #cd-txn-panel         .text-gray-400,
.light #cd-txn-panel         .text-gray-500,
.light #cd-txn-panel         .text-gray-600 { color: #374151 !important; }

/* Waiter Order Hub — the hub injects its form controls with dark inline
   styles for dark mode, so explicitly reset their text contrast in light
   mode. Keep this scoped so the POS and other screens retain their own
   light-theme treatments. */
.light #pos-subview-waiter-hub input {
  color: #111827 !important;
  background: #ffffff !important;
  border-color: #d1d5db !important;
  caret-color: #111827;
}
.light #pos-subview-waiter-hub input::placeholder {
  color: #6b7280 !important;
  opacity: 1;
}
.light #pos-subview-waiter-hub label,
.light #pos-subview-waiter-hub .text-gray-400,
.light #pos-subview-waiter-hub .text-gray-500,
.light #pos-subview-waiter-hub .text-gray-600,
.light #pos-subview-waiter-hub .text-gray-700 {
  color: #374151 !important;
}
.light #pos-subview-waiter-hub .text-white {
  color: #111827 !important;
}

/* ══════════════════════════════════════════
   LANDING PAGE — BiasharaGo design system
   Tokens: #011b33 canvas · #3bb75e CTA · #1a3d5d accent · #3676c8 link
══════════════════════════════════════════ */
#view-landing { background: #011b33; overflow-x: hidden; }

.lp-nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(1,27,51,.97);
  border-bottom: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.lp-nav.lp-nav--frosted {
  background: rgba(1,27,51,.55);
  border-bottom-color: rgba(255,255,255,.06);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 1px 32px rgba(0,0,0,.35);
}
.lp-billing-btn { color: rgba(148,163,184,1); cursor: pointer; background: transparent; border: none; }
.lp-billing-active { background: #3bb75e !important; color: #fff !important; }
.lp-nav-link {
  font-size: .6875rem; font-weight: 600; color: rgba(255,255,255,.55);
  transition: color .1s; text-decoration: none;
  letter-spacing: .08em; text-transform: uppercase;
}
.lp-nav-link:hover { color: #ffffff; }

.lp-hero {
  position: relative; overflow: hidden;
  background-image: url('/hero-bg.png');
  background-size: cover; background-position: center;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
/* Semi-transparent navy overlay — lets the green polygon image show through */
.lp-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(160deg,
    rgba(1,27,51,.62) 0%,
    rgba(1,27,51,.50) 50%,
    rgba(1,27,51,.70) 100%);
  pointer-events: none; z-index: 0;
}

/* Status badges — strict 5px radius (no pill shapes) */
.lp-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 14px; border-radius: 5px;
  font-size: .625rem; font-weight: 700;
  color: #ffffff; letter-spacing: .08em; text-transform: uppercase;
  background: #1a3d5d; border: 1px solid rgba(255,255,255,.15);
  white-space: nowrap;
}
.lp-badge.lp-badge-teal {
  background: #1a3d5d; color: #7dd3fc; border-color: rgba(125,211,252,.25);
}
.lp-badge.lp-badge-green {
  background: #1a3d5d; color: #86efac; border-color: rgba(134,239,172,.22);
}

/* Primary CTA — #3bb75e vivid green */
.lp-btn-primary {
  display: inline-flex; align-items: center; gap: 7px;
  background: #3bb75e; color: #ffffff; font-weight: 700; font-size: .8rem;
  padding: 10px 20px; border-radius: 5px;
  letter-spacing: .025em; transition: background .12s, box-shadow .12s;
  white-space: nowrap; box-shadow: 0 5px 6px 0 rgba(0,0,0,.1);
}
.lp-btn-primary:hover { background: #32a553; }

/* Ghost CTA — white border on dark bg */
.lp-btn-ghost {
  display: inline-flex; align-items: center; gap: 7px;
  color: rgba(255,255,255,.75); font-weight: 600; font-size: .8rem;
  padding: 10px 20px; border-radius: 5px;
  border: 1px solid rgba(255,255,255,.25);
  letter-spacing: .025em; transition: border-color .1s, color .1s;
  white-space: nowrap;
}
.lp-btn-ghost:hover { color: #ffffff; border-color: rgba(255,255,255,.5); }

/* Spec strip — horizontal list, no pills */
.lp-spec-strip {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 16px 6px 0;
  font-size: .625rem; color: rgba(255,255,255,.4);
  letter-spacing: .06em; text-transform: uppercase;
}
.lp-spec-strip + .lp-spec-strip {
  border-left: 1px solid rgba(255,255,255,.1); padding-left: 16px;
}

/* Scroll fade-up animation */
.lp-fade-up {
  opacity: 0; transform: translateY(16px);
  transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
}
.lp-fade-up.lp-visible { opacity: 1; transform: translateY(0); }

/* Features section — white card grid on #011b33 canvas */
#features { background: #011b33; }

/* 2×3 uniform card grid */
.lp-mosaic-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px)  { .lp-mosaic-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lp-mosaic-grid { grid-template-columns: repeat(3, 1fr); } }

/* White feature card — flat, 5px radius, hairline border */
.lp-feature-card {
  background: #ffffff;
  border: 1px solid #e7e7e7;
  border-radius: 5px;
  padding: 24px 22px;
  position: relative;
  transition: box-shadow .15s;
  box-shadow: 0 5px 6px 0 rgba(0,0,0,.05);
}
.lp-feature-card:hover { box-shadow: 0 8px 16px 0 rgba(0,0,0,.08); }
.lp-feature-card .lp-card-index {
  font-size: .5rem; color: #919191;
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 14px; display: block;
}
/* Override dark text classes inside white cards */
.lp-feature-card h3 { color: #011b33 !important; }
.lp-feature-card p  { color: #57584e !important; }
.lp-feature-card .lp-card-tag { color: #3676c8; font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; }

/* Step grid (How it works) */
.lp-step-grid {
  display: grid;
  grid-template-columns: 1fr;
  background: rgba(255,255,255,.06); gap: 1px;
  border: 1px solid rgba(255,255,255,.06); border-radius: 5px; overflow: hidden;
}
@media (min-width: 768px) {
  .lp-step-grid { grid-template-columns: repeat(3, 1fr); }
}
.lp-step-grid > div { background: rgba(1,27,51,.95); }

/* CTA band */
.lp-cta-band {
  background: #1a3d5d;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 5px;
  box-shadow: 0 5px 6px 0 rgba(0,0,0,.1);
}

/* Features / section dividers */
.lp-section-label {
  font-size: .6875rem; font-weight: 700; color: #3676c8;
  letter-spacing: .08em; text-transform: uppercase;
}

/* Footer */
.lp-footer {
  background: #011b33;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* ── Light theme ───────────────────────── */
/* NOTE: lp-nav and lp-nav-link are intentionally excluded from light-theme
   overrides — the homepage header is permanently dark (#011b33) regardless
   of the app's light/dark toggle. */
.light #view-landing  { background: #f0f2f5; }
.light .lp-hero::before {
  background: linear-gradient(160deg,
    rgba(1,27,51,.55) 0%, rgba(1,27,51,.42) 50%, rgba(1,27,51,.65) 100%);
}
.light .lp-btn-primary { background: #3bb75e; color: #ffffff; }
.light .lp-btn-primary:hover { background: #32a553; }
.light .lp-btn-ghost  { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.3); }
.light .lp-btn-ghost:hover { color: #ffffff; border-color: rgba(255,255,255,.6); }
.light .lp-badge      { background: #1a3d5d; color: #ffffff; border-color: rgba(255,255,255,.2); }
.light .lp-spec-strip { color: rgba(255,255,255,.45); }
.light .lp-spec-strip + .lp-spec-strip { border-left-color: rgba(255,255,255,.15); }
.light #features { background: #f0f2f5; }
.light .lp-feature-card { background: #ffffff; border-color: #e7e7e7; }
.light .lp-step-grid { background: #e7e7e7; border-color: #e7e7e7; }
.light .lp-step-grid > div { background: #ffffff; }
.light .lp-cta-band { background: #1a3d5d; border-color: rgba(255,255,255,.15); }
.light .lp-footer { background: #011b33; }

/* ══════════════════════════════════════════
   POS TERMINAL — MOBILE STACKED LAYOUT
   On viewports < 1024px, catalog and cart stack
   vertically. No tab-toggle needed.
══════════════════════════════════════════ */
@media (max-width: 1023px) {
  /* Both columns always visible, full width */
  #pos-inventory-col,
  #pos-cart-col { display: flex !important; flex-direction: column; }
  /* Product cards: minimum 140px, 2-column grid */
  #inventory-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)) !important; }
}

/* ══════════════════════════════════════════
   AUTH SPLIT-SCREEN — clamp right panel to viewport height
   so the auth card scrolls inside the panel on short screens
══════════════════════════════════════════ */
#view-signin > div:last-child,
#view-auth   > div:last-child {
  max-height: 100vh;
  overflow-y: auto;
}
@media (min-width: 1024px) {
  #view-signin, #view-auth { min-height: 100vh; }
  #view-signin > div:first-child,
  #view-auth   > div:first-child { position: sticky; top: 0; height: 100vh; }
}

/* ══════════════════════════════════════════
   SIDEBAR — RESPONSIVE BEHAVIOUR
   Mobile (<768px): fixed off-canvas panel that slides in from the left.
   Desktop (≥768px): in-flow panel that can collapse to an icon-only rail.
══════════════════════════════════════════ */

/* ── LIGHT MODE: Order status badge contrast ─────────────────
   The badge spans use dark-palette inline styles by default.
   In light mode we override to high-contrast text/bg combos. */
body:not(.dark) .order-status-badge {
  color: #0f172a !important;
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
}

/* Smooth slide + width transitions for both breakpoints */
#sidebar {
  transition: width 300ms ease-in-out, transform 300ms ease-in-out, box-shadow 300ms ease;
}

/* ── MOBILE ────────────────────────────── */
@media (max-width: 767px) {
  /* When not hidden (cashier mode keeps it display:none via .hidden) the
     sidebar sits off-canvas so the main content fills the viewport. */
  #sidebar:not(.hidden) {
    position: fixed !important;
    top: 0; left: 0;
    height: 100%;
    z-index: 60;
    width: 240px !important;
    transform: translateX(-100%);
  }
  #sidebar.mob-open {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0,0,0,.6);
  }
  /* Backdrop visible only on mobile */
  #sidebar-backdrop { display: block; }
}

/* ── DESKTOP ───────────────────────────── */
@media (min-width: 768px) {
  /* Backdrop not used on desktop */
  #sidebar-backdrop { display: none !important; }

  /* Smooth width morph */
  #sidebar { transition: width 0.2s ease; }

  /* Collapsed: shrink to 56 px icon-only rail */
  #sidebar.desk-collapsed {
    width: 56px;
    overflow: hidden;
  }
  #sidebar.desk-collapsed .sidebar-label  { display: none; }
  /* Center icons when collapsed */
  #sidebar.desk-collapsed .nav-link { justify-content: center; padding: 9px; }
  #sidebar.desk-collapsed #sidebar-user-pill { justify-content: center; }
  /* Hide collapse chevron text when collapsed */
  #sidebar.desk-collapsed #sidebar-collapse-label { display: none; }

  /* Sidebar header morphing ─────────────────────────────
     Expanded : logo-wrap + chevron button visible
     Collapsed: logo-wrap + chevron hidden; hamburger shown */
  #sidebar.desk-collapsed .sb-logo-wrap { display: none; }
  #sidebar.desk-collapsed #sidebar-collapse-btn { display: none !important; }
  #sidebar.desk-collapsed #sidebar-hamburger-btn { display: flex !important; }
  /* Center the lone hamburger inside the 56 px rail */
  #sidebar.desk-collapsed .sidebar-header {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
}