/* Gahez Merchant - layout and theme.
   Built mobile-first: phones get a bottom tab bar, tablets and POS screens get
   a persistent sidebar. Touch targets stay >=44px throughout because this runs
   on POS machines operated with a finger, not a mouse. */

:root{
  --brand:#f5821f;
  --brand-dark:#d2650a;
  --brand-soft:#fff3e7;
  --ink:#241a14;
  --muted:#6f6259;
  --line:#e8e0d8;
  --bg:#f6f4f1;
  --surface:#ffffff;
  --ok:#1f9d55;
  --warn:#e0a800;
  --danger:#d64545;
  --radius:14px;
  --nav-h:60px;
  --shadow:0 2px 10px rgba(36,26,20,.07);
}

@media (prefers-color-scheme: dark){
  :root{
    --brand:#f5821f; --brand-dark:#ffa24d; --brand-soft:#2a1d12;
    --ink:#f0ebe6; --muted:#a89b90; --line:#332920;
    --bg:#141010; --surface:#1e1815;
    --shadow:0 2px 12px rgba(0,0,0,.45);
  }
}

*{ -webkit-tap-highlight-color: transparent; }
html,body{ height:100%; }
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));
}
@media (min-width:992px){ body{ padding-bottom:0; } }

a{ color:var(--brand-dark); }
.text-muted{ color:var(--muted) !important; }

/* ---- top bar ---------------------------------------------------------- */
.topbar{
  position:sticky; top:0; z-index:1030;
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:8px 12px; display:flex; align-items:center; gap:10px;
  padding-top:calc(8px + env(safe-area-inset-top));
}
.topbar .brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.topbar .brand img{ width:38px; height:38px; border-radius:10px; object-fit:cover; flex:0 0 auto; }
.topbar .brand .name{ font-weight:700; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar .brand .sub{ font-size:11.5px; color:var(--muted); white-space:nowrap; }

/* ---- availability pill ------------------------------------------------ */
.status-pill{
  display:inline-flex; align-items:center; gap:7px;
  border-radius:999px; padding:7px 14px; font-weight:700; font-size:13px;
  border:1px solid transparent; cursor:pointer; min-height:38px;
}
.status-open{ background:rgba(31,157,85,.12); color:var(--ok); border-color:rgba(31,157,85,.35); }
.status-busy{ background:rgba(224,168,0,.15); color:#9a7500; border-color:rgba(224,168,0,.4); }
.status-closed{ background:rgba(214,69,69,.12); color:var(--danger); border-color:rgba(214,69,69,.35); }
.status-dot{ width:9px; height:9px; border-radius:50%; background:currentColor; }

/* ---- shell ------------------------------------------------------------ */
.shell{ display:flex; min-height:calc(100vh - 56px); }
.sidebar{ display:none; }
@media (min-width:992px){
  .sidebar{
    display:block; width:236px; flex:0 0 236px;
    background:var(--surface); border-right:1px solid var(--line); padding:14px 10px;
    position:sticky; top:56px; height:calc(100vh - 56px); overflow-y:auto;
  }
  .sidebar a{
    display:flex; align-items:center; gap:11px;
    padding:11px 13px; border-radius:10px; color:var(--ink);
    text-decoration:none; font-weight:600; margin-bottom:3px;
  }
  .sidebar a i{ width:20px; text-align:center; color:var(--muted); }
  .sidebar a:hover{ background:var(--brand-soft); }
  .sidebar a.active{ background:var(--brand); color:#fff; }
  .sidebar a.active i{ color:#fff; }
}
.content{ flex:1 1 auto; min-width:0; padding:14px; }
@media (min-width:768px){ .content{ padding:20px 24px; } }

/* ---- bottom nav (phones + small POS) ---------------------------------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:1040;
  background:var(--surface); border-top:1px solid var(--line);
  display:flex; height:var(--nav-h);
  padding-bottom:env(safe-area-inset-bottom);
}
@media (min-width:992px){ .tabbar{ display:none; } }
.tabbar a{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px; text-decoration:none;
  color:var(--muted); font-size:11px; font-weight:600; min-width:0;
}
.tabbar a i{ font-size:18px; }
.tabbar a.active{ color:var(--brand); }
.tabbar a span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- cards and tables ------------------------------------------------- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.card-header{ background:transparent; border-bottom:1px solid var(--line); font-weight:700; }
.page-title{ font-size:20px; font-weight:800; margin:0 0 14px; }

.stat{ padding:14px; }
.stat .value{ font-size:26px; font-weight:800; line-height:1.1; }
.stat .label{ font-size:12px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.4px; }

/* Wide tables scroll inside their card instead of breaking the page. */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table{ margin:0; color:var(--ink); }
.table > :not(caption) > * > *{ background:transparent; border-color:var(--line); }
.table thead th{ font-size:12px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); white-space:nowrap; }

/* ---- buttons ---------------------------------------------------------- */
.btn{ border-radius:10px; font-weight:650; min-height:44px; }
.btn-brand{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-brand:hover,.btn-brand:focus{ background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; }
.btn-outline-brand{ border:1.5px solid var(--line); color:var(--ink); background:var(--surface); }
.btn-outline-brand:hover{ background:var(--brand-soft); color:var(--ink); }
.btn-lg-touch{ min-height:52px; font-size:16px; }

.form-control,.form-select{
  min-height:46px; border-radius:10px; border-color:var(--line);
  background:var(--surface); color:var(--ink);
}
.form-control:focus,.form-select:focus{ border-color:var(--brand); box-shadow:0 0 0 .18rem rgba(245,130,31,.18); }
.modal-content{ background:var(--surface); color:var(--ink); border-radius:var(--radius); }

/* ---- order status chips ------------------------------------------------ */
.chip{
  display:inline-flex; align-items:center; gap:6px; border-radius:8px;
  padding:4px 10px; font-size:12px; font-weight:700; white-space:nowrap;
}
.chip-pending{ background:rgba(224,168,0,.16); color:#9a7500; }
.chip-confirmed{ background:rgba(36,112,220,.14); color:#1d5fbf; }
.chip-preparing{ background:rgba(245,130,31,.16); color:var(--brand-dark); }
.chip-ready{ background:rgba(31,157,85,.14); color:var(--ok); }
.chip-picked_up,.chip-delivering{ background:rgba(120,80,200,.14); color:#6b46c1; }
.chip-delivered{ background:rgba(31,157,85,.16); color:var(--ok); }
.chip-cancelled,.chip-refunded{ background:rgba(214,69,69,.14); color:var(--danger); }

/* ---- live order board -------------------------------------------------- */
.order-card{ border-left:4px solid var(--line); }
.order-card.is-pending{ border-left-color:var(--warn); }
.order-card.is-confirmed{ border-left-color:#2470dc; }
.order-card.is-preparing{ border-left-color:var(--brand); }
.order-card.is-ready_for_pickup{ border-left-color:var(--ok); }
.order-card .order-no{ font-size:19px; font-weight:800; }
.order-card .age{ font-size:12px; color:var(--muted); }
.order-card .age.late{ color:var(--danger); font-weight:700; }
.order-items{ list-style:none; margin:8px 0 0; padding:0; font-size:14px; }
.order-items li{ display:flex; gap:8px; padding:2px 0; }
.order-items .qty{ font-weight:800; color:var(--brand-dark); min-width:26px; }

.empty{ text-align:center; padding:48px 20px; color:var(--muted); }
.empty i{ font-size:44px; color:var(--brand); opacity:.5; margin-bottom:12px; display:block; }

/* Never let the page scroll sideways on a narrow POS screen. */
html,body{ max-width:100%; overflow-x:hidden; }


/* ---- dark-mode legibility ---------------------------------------------
   Several chips and the "busy" pill use deliberately dark ink so they read on
   a white card. On a dark surface those same colours are close to invisible,
   so each one is lightened here rather than dimmed globally. */
@media (prefers-color-scheme: dark){
  .status-busy{ color:#f0b429; }
  .chip-confirmed{ color:#7fb0ff; background:rgba(36,112,220,.22); }
  .chip-pending{ color:#f0b429; background:rgba(224,168,0,.22); }
  .chip-picked_up,.chip-delivering{ color:#b79bff; background:rgba(120,80,200,.24); }
  .chip-ready,.chip-delivered{ color:#57c98a; background:rgba(31,157,85,.22); }
  .chip-cancelled,.chip-refunded{ color:#ff8b8b; background:rgba(214,69,69,.22); }
  .order-card .qty,.order-items .qty{ color:var(--brand-dark); }

  /* Bootstrap paints these from its own palette; keep them on our surfaces. */
  .card,.modal-content,.form-control,.form-select{ color:var(--ink); }
  .btn-outline-brand{ background:var(--surface); color:var(--ink); border-color:var(--line); }
  .btn-outline-brand:hover{ background:var(--brand-soft); color:var(--ink); }
  .table{ --bs-table-color:var(--ink); --bs-table-bg:transparent; }
  .alert{ border-color:var(--line); }
}

/* Anything Bootstrap themes itself should follow the same surfaces. */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content{ background:var(--surface); color:var(--ink); }
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select{ background:var(--surface); color:var(--ink); border-color:var(--line); }
[data-bs-theme="dark"] .table{ --bs-table-color:var(--ink); }