/* ============================================================
   Staff app — global brand-green skin over vanilla Bootstrap 5.
   Loaded after bootstrap.min.css on every staff page.

   Two layers:
   1. Shared chrome (top bar + bottom tab bar) is themed app-wide.
      The KDS/kitchen page reclaims its own dark chrome via its
      scoped <style> block, which loads after this file.
   2. Content components (.card, .btn, badges, forms, lists) are
      themed only under body.staff-skin, a class the layout adds to
      every staff page EXCEPT kitchen — so the KDS grid is untouched.

   Palette tokens live here (single source of truth) and are read by
   the per-page scoped <style> blocks that still exist (order-styles,
   history, printer, delivery-off, kitchen).
   ============================================================ */

:root {
  --green: #1a7a4c;
  --green-light: #e8f5ee;
  --green-tint: #f3f8f5;
  --green-dark: #155e3a;
  --green-darkest: #0d3d24;
  --red: #dc3545;
  --orange: #fd7e14;
  --grey: #6c757d;
  --border: #dee2e6;
  --radius: 12px;
  --shadow: 0 2px 8px rgba(0, 0, 0, .08);
  --shadow-lg: 0 10px 30px rgba(13, 61, 36, .14);

  /* Point Bootstrap's "primary" + link colours at brand green so shared
     chrome (tabs, dropdowns, focus rings) is green everywhere. */
  --bs-primary: #1a7a4c;
  --bs-primary-rgb: 26, 122, 76;
  --bs-link-color: #1a7a4c;
  --bs-link-color-rgb: 26, 122, 76;
  --bs-link-hover-color: #155e3a;
  --bs-link-hover-color-rgb: 21, 94, 58;
}

/* ============================================================
   Shared chrome — top bar
   ============================================================ */
.staff-topbar {
  background: linear-gradient(135deg, var(--green-dark) 0%, var(--green) 100%) !important;
  box-shadow: 0 2px 12px rgba(13, 61, 36, .20);
}
.staff-topbar .brand {
  font-size: 1.02rem;
  letter-spacing: -.2px;
}
/* Keep long restaurant names on one line on narrow phones */
.staff-topbar .brand,
.staff-topbar .restaurant-name {
  max-width: 64vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.staff-menu-btn {
  font-size: 1.25rem;
  line-height: 1;
}

/* Account / language dropdown */
.staff-menu-dropdown { border-radius: 12px; }
.staff-menu-dropdown .dropdown-item.active,
.staff-menu-dropdown .dropdown-item:active {
  background: var(--green);
  color: #fff;
}
.staff-menu-dropdown .dropdown-item:hover {
  background: var(--green-light);
}
.staff-menu-dropdown .staff-menu-signout:hover {
  background: #fbeaea;
}

/* ============================================================
   Shared chrome — bottom tab bar
   ============================================================ */
/* The wrap is the fixed-bottom positioned shell that holds the bar's
   background, border, shadow and the edge-fade indicators. The inner
   .staff-tabs is the horizontally-scrolling row of tab pills. Splitting
   them lets the fades stay pinned to the bar's edges while the row
   inside scrolls. --staff-tabs-fade-rgb is the bar bg as an "r, g, b"
   tuple so the gradient can fade to its own colour at alpha 0 (no gray
   streak); kitchen.blade overrides the tuple for the dark theme. */
.staff-tabs-wrap {
  --staff-tabs-fade-rgb: 255, 255, 255;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .06);
  overflow: hidden;
}
.staff-tabs-wrap::before,
.staff-tabs-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .2s;
}
.staff-tabs-wrap::before {
  left: 0;
  background: linear-gradient(to right, rgb(var(--staff-tabs-fade-rgb)), rgba(var(--staff-tabs-fade-rgb), 0));
}
.staff-tabs-wrap::after {
  right: 0;
  background: linear-gradient(to left, rgb(var(--staff-tabs-fade-rgb)), rgba(var(--staff-tabs-fade-rgb), 0));
}
.staff-tabs-wrap.scroll-left::before  { opacity: 1; }
.staff-tabs-wrap.scroll-right::after  { opacity: 1; }
.staff-tabs {
  /* Keep every tab on a single row. With 6 tabs the nav-fill row used to wrap
     to two lines on a phone; instead let the bar scroll sideways. */
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.staff-tabs::-webkit-scrollbar { display: none; }
.staff-tabs.nav-pills {
  --bs-nav-pills-border-radius: 0;
}
.staff-tabs .staff-tab {
  color: var(--grey);
  font-weight: 600;
  border-radius: 0;
  transition: color .15s ease, background-color .15s ease;
  /* Default (overflow mode): every tab uses the same fixed width picked by JS
    from the widest natural label, with a touch-friendly minimum floor. */
  flex: 0 0 var(--staff-tab-min-width, 96px) !important;
  min-width: var(--staff-tab-min-width, 96px);
}
/* When all tabs fit in the viewport, switch to equal flexible columns so the
  row fills the bar edge-to-edge without awkward empty trailing space. */
.staff-tabs.staff-tabs--fit .staff-tab {
  flex: 1 1 0 !important;
  min-width: 0;
}
.staff-tabs .staff-tab .tab-icon {
  font-size: 1.3rem;
  line-height: 1.1;
}
.staff-tabs .staff-tab.active,
.staff-tabs.nav-pills .nav-link.active {
  color: var(--green) !important;
  background-color: var(--green-light) !important;
  box-shadow: inset 0 3px 0 var(--green);
  font-weight: 700;
}
.staff-tabs .staff-tab:hover { color: var(--green-dark); }

/* ============================================================
   Content skin — applies to every staff page except kitchen.
   ============================================================ */

/* Soft green-tinted page background ties the theme together */
body.staff-skin { background: var(--green-tint) !important; }

/* Comfortable reading width on tablets / desktop; phones stay full-bleed */
@media (min-width: 992px) {
  body.staff-skin .staff-content { max-width: 1080px; margin-inline: auto; }
}

/* Guarantee the bottom tab bar never covers the last card's action buttons.
   This !important rule is the authoritative gutter: it overrides the layout's
   inline padding-bottom AND the JS in layout.blade (which sets a non-important
   inline style, so it can't win against this). The safe-area inset is capped
   so Firefox on Android — which reports a large env(safe-area-inset-bottom)
   under viewport-fit=cover (its collapsing toolbar) and changes it across
   reloads — can't inflate this into a giant, growing empty strip. 34px still
   clears a real iPhone home indicator / Android gesture bar. */
.staff-content {
  padding-bottom: calc(130px + min(env(safe-area-inset-bottom), 34px)) !important;
}

/* ============================================================
   Browser app-shell — plain web browsers only (never the native app; the
   body class is gated on !StaffApp::isRequest in layout.blade).

   The bug: a position:fixed bottom nav drifts up and down while Firefox on
   Android animates its dynamic URL toolbar in/out. That toolbar only toggles
   in response to scrolling the ROOT document, so we stop the root from
   scrolling: the body is a fixed-height flex column that never overflows and
   .staff-content becomes the sole scroll container. With no root scroll the
   toolbar stays put and the fixed nav stays pinned to the bottom.

   Trade-off (browser only): the URL toolbar no longer auto-hides and native
   pull-to-refresh is disabled — both acceptable for an app-like portal and
   both irrelevant in the native WebView, which is excluded from the shell.
   ============================================================ */
body.staff-web-shell {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Kill whole-page overscroll (pull-to-refresh / toolbar reveal). */
  overscroll-behavior: none;
}
body.staff-web-shell .staff-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Don't let an overscroll at the top/bottom of the content chain up to the
     browser and animate Firefox-Android's URL toolbar (which was jerking the
     nav). */
  overscroll-behavior: contain;
  /* The nav is a normal flex row below (not position:fixed) in the shell, so
     the content no longer reserves space for an overlaying bar. Overrides the
     authoritative !important gutter above and the JS-set inline padding. */
  padding-bottom: 0 !important;
}
/* In the shell the bottom nav is the last flex row rather than position:fixed.
   Glued to the non-scrolling shell, it can't be dragged up and down by
   Firefox-Android animating its toolbar. Content (flex:1) pushes it to the
   bottom. Only browsers get this; the native app keeps the fixed nav. */
body.staff-web-shell .staff-tabs-wrap {
  position: static !important;
  flex: 0 0 auto;
}

/* ---- Cards: one consistent shell ---- */
body.staff-skin .card {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
/* Pages that opt into .border-0 keep a hairline so cards read as panels */
body.staff-skin .card.border-0 {
  border: 1px solid rgba(13, 61, 36, .06) !important;
}
body.staff-skin .card-header {
  background: var(--green-light);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  color: var(--green-darkest);
}

/* Subtle lift on clickable cards / rows */
body.staff-skin .card a.card-body,
body.staff-skin a.card,
body.staff-skin .list-group-item-action {
  transition: background-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
body.staff-skin .list-group-item-action:hover {
  background-color: var(--green-light);
}

/* ---- Buttons ---- */
body.staff-skin .btn { font-weight: 600; }
body.staff-skin .btn-primary,
body.staff-skin .btn-success {
  --bs-btn-bg: var(--green);
  --bs-btn-border-color: var(--green);
  --bs-btn-hover-bg: var(--green-dark);
  --bs-btn-hover-border-color: var(--green-dark);
  --bs-btn-active-bg: var(--green-dark);
  --bs-btn-active-border-color: var(--green-dark);
  --bs-btn-disabled-bg: var(--green);
  --bs-btn-disabled-border-color: var(--green);
}
body.staff-skin .btn-outline-primary,
body.staff-skin .btn-outline-success {
  --bs-btn-color: var(--green);
  --bs-btn-border-color: var(--green);
  --bs-btn-hover-bg: var(--green);
  --bs-btn-hover-border-color: var(--green);
  --bs-btn-active-bg: var(--green);
  --bs-btn-active-border-color: var(--green);
}
body.staff-skin .btn-link {
  --bs-btn-color: var(--green);
  --bs-btn-hover-color: var(--green-dark);
}

/* ---- Brand-green semantic utilities (replace Bootstrap's green) ---- */
body.staff-skin .bg-success { background-color: var(--green) !important; }
body.staff-skin .text-bg-success {
  background-color: var(--green) !important;
  color: #fff !important;
}
body.staff-skin .text-success { color: var(--green) !important; }
body.staff-skin .border-success { border-color: var(--green) !important; }
body.staff-skin .alert-success {
  --bs-alert-color: var(--green-darkest);
  --bs-alert-bg: var(--green-light);
  --bs-alert-border-color: #bfe3cd;
}

/* ---- Forms ---- */
body.staff-skin .form-control:focus,
body.staff-skin .form-select:focus,
body.staff-skin .form-check-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 .2rem rgba(26, 122, 76, .15);
}
body.staff-skin .form-check-input:checked {
  background-color: var(--green);
  border-color: var(--green);
}
body.staff-skin .input-group-text {
  background: var(--green-light);
  border-color: var(--border);
  color: var(--green-dark);
  font-weight: 600;
}

/* Plain links pick up brand green via --bs-link-color (set in :root);
   Bootstrap text utilities (.text-muted/.text-danger/...) still win, so
   no blanket anchor rule is needed here.

   ---- Headings ---- */
body.staff-skin h1, body.staff-skin h2 { color: #14241c; }