/* =========================================================================
   MCBC console — customer portal + operations.

   Deliberately plain and dense. This is a tool people use on a phone in a
   kitchen at 6am, not a landing page: the brand teal marks actions, and
   everything else gets out of the way.
   ========================================================================= */

:root {
  --teal: #0090AD;
  --teal-dark: #006B82;
  --teal-pale: #E6F6F9;
  --ink: #131A1C;
  --ink-2: #3D4548;
  --ink-3: #6B7679;
  --line: #E2E6E7;
  --bg: #F7F8F8;
  --card: #FFFFFF;
  --ok: #1F8A54;
  --warn: #B7791F;
  --err: #C5372C;
  --radius: 10px;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--sans); background: var(--bg); color: var(--ink);
  line-height: 1.5; font-size: 15px; -webkit-font-smoothing: antialiased;
}
a { color: var(--teal-dark); }
ul { list-style: none; }

/* ------------------------------------------------------------------ shell -- */
/* Fixed dark sidebar + offset content, the same shape as the SproutBox admin.
   Bootstrap is loaded first and owns the grid, forms and utilities; everything
   below either fills a gap or deliberately overrules it. */

:root { --sidebar-w: 244px; }

.sidebar {
  width: var(--sidebar-w); background: var(--ink);
  /* height, not min-height. With min-height the element grows past the
     viewport and the menu below the fold cannot be reached: the rail is
     position:fixed, so the page scrolling does nothing to it. On a 1100px-tall
     window that hid the whole Setup group — Data Health, Devices, Users,
     Master Data, Blockers, API Access — behind no scrollbar at all. It showed
     up the moment the Documents group gained two items. */
  height: 100vh;
  position: fixed; top: 0; left: 0; z-index: 1040;
  display: flex; flex-direction: column;
  transition: transform 0.3s;
}

/* The menu takes the slack and scrolls; the brand above and the signed-in
   person below stay put. min-height:0 is what lets a flex item shrink below
   its content — without it the nav refuses to and the overflow is clipped
   instead of scrolled, which is what was happening. */
.sidebar > .nav {
  /* flex-wrap:nowrap is the important one. Bootstrap sets .nav to
     flex-wrap:wrap, and a wrapping flex COLUMN with a bounded height does not
     scroll — it starts a second column, sideways, outside the rail's 244px.
     That is why the Documents and Setup groups were simply absent rather than
     below a scrollbar: they were laid out to the right of the sidebar, under
     the page. */
  flex: 1 1 auto; min-height: 0; flex-wrap: nowrap;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.22) transparent;
}
.sidebar > .nav::-webkit-scrollbar { width: 6px; }
.sidebar > .nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.22); border-radius: 3px;
}
.sidebar > .nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-brand {
  padding: 1.1rem 1.25rem; display: flex; align-items: center; gap: 0.6rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
/* No white plate: the mark is an outline that sits on the dark sidebar on its
   own. The plate was there because the full lockup could not. */
.sidebar-brand img { height: 32px; width: 32px; }
.sidebar-brand span { color: #fff; font-weight: 700; letter-spacing: 0.04em; }
.sidebar-brand small {
  display: block; font-weight: 400; font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.45);
}
.sidebar .nav-link {
  color: rgba(255,255,255,0.7); padding: 0.6rem 1.25rem; font-size: 0.88rem;
  border-left: 3px solid transparent; transition: all 0.15s; display: flex; align-items: center;
}
.sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,0.06); }
.sidebar .nav-link.active { color: #fff; background: rgba(255,255,255,0.1); border-left-color: var(--teal); }
.sidebar .nav-link i { width: 22px; text-align: center; margin-right: 0.55rem; font-size: 1rem; }
/* The menu search. Sits under the brand and does not scroll with the menu. */
.nav-search {
  position: relative; margin: 0.7rem 0.9rem 0.2rem;
}
.nav-search i {
  position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%);
  color: rgba(255,255,255,0.45); font-size: 0.8rem; pointer-events: none;
}
.nav-search input {
  width: 100%; padding: 0.42rem 1.8rem 0.42rem 1.8rem; font-size: 0.82rem;
  color: #fff; background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 6px; outline: none;
}
.nav-search input::placeholder { color: rgba(255,255,255,0.45); }
.nav-search input:focus { border-color: var(--teal); background: rgba(255,255,255,0.12); }
.nav-search kbd {
  position: absolute; right: 0.45rem; top: 50%; transform: translateY(-50%);
  font-size: 0.66rem; padding: 0.05rem 0.35rem; background: transparent;
  color: rgba(255,255,255,0.45); border: 1px solid rgba(255,255,255,0.2);
}
.nav-where {
  display: block; font-size: 0.66rem; color: rgba(255,255,255,0.42);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.sidebar .nav-link.nav-hit { background: rgba(255,255,255,0.06); }
.nav-none { padding: 0.6rem 1.25rem; font-size: 0.8rem; color: rgba(255,255,255,0.5); }
/* The divider between "where to go" and "who to look at" in the rail search.
   People are listed under their own heading rather than ranked in with the
   menu, so one letter does not put a colleague above the Dashboard. */
.nav-heading { text-transform: uppercase; letter-spacing: .06em; font-size: .7rem;
  font-weight: 700; color: rgba(255,255,255,0.4); padding-top: .8rem; }
body.rail-collapsed .nav-search { display: none; }

.sidebar-heading {
  padding: 1.1rem 1.25rem 0.35rem; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.32);
}
.sidebar-foot {
  margin-top: auto; padding: 1rem 1.1rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.sidebar-who { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.sidebar-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--teal); color: #fff; font-size: 0.72rem; font-weight: 700;
}
.sidebar-name { color: #fff; font-size: 0.82rem; font-weight: 600; line-height: 1.2; }
.sidebar-role {
  color: rgba(255,255,255,0.45); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.1em;
}

.main-content { margin-left: var(--sidebar-w); min-height: 100vh; }

.mobilebar {
  position: sticky; top: 0; z-index: 1030;
  background: var(--ink); color: #fff;
  padding: 0.55rem 0.8rem; display: flex; align-items: center; gap: 0.7rem;
}
.mobilebar__title { font-weight: 600; font-size: 0.92rem; }

.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1039; }

/* ---------------------------------------------------- collapsing the rail --
   Collapsed the sidebar keeps its icons and drops its words, rather than
   disappearing. A console people use all day is navigated by shape as much as
   by reading, and a rail you can still aim at is worth 180px of screen — the
   dispatch and calendar tables are the widest things here and they want it.
   The choice is remembered per browser; it is a preference, not state. */
:root { --sidebar-rail: 62px; }
body.rail-collapsed .sidebar { width: var(--sidebar-rail); }
body.rail-collapsed .main-content { margin-left: var(--sidebar-rail); }
body.rail-collapsed .sidebar .nav-link span,
body.rail-collapsed .sidebar-heading,
body.rail-collapsed .sidebar-brand span,
body.rail-collapsed .sidebar-who div,
body.rail-collapsed .sidebar-foot form { display: none; }

body.rail-collapsed .sidebar .nav-link { justify-content: center; padding-left: 0; padding-right: 0; }
body.rail-collapsed .sidebar .nav-link i { margin-right: 0; }
body.rail-collapsed .sidebar-brand { justify-content: center; padding-left: 0; padding-right: 0; }
body.rail-collapsed .sidebar-who { justify-content: center; }
/* Collapsing is a desktop affordance; on mobile the sidebar already slides
   away entirely and a rail would be in the way of the content it uncovered. */
@media (max-width: 991.98px) {
  body.rail-collapsed .sidebar { width: var(--sidebar-w); }
  body.rail-collapsed .main-content { margin-left: 0; }
  body.rail-collapsed .sidebar .nav-link span,
  body.rail-collapsed .sidebar-heading,
  body.rail-collapsed .sidebar-brand span,
  body.rail-collapsed .sidebar-who div,
  body.rail-collapsed .sidebar-foot form { display: revert; }
  .rail-btn { display: none; }
}
/* The last row of the sidebar, full width and left aligned. Anchored at the
   bottom so collapsing never moves anything above it. */
.rail-btn {
  background: none; border: 0; color: rgba(255,255,255,0.45);
  padding: 0.65rem 1.25rem; line-height: 1; width: 100%;
  align-items: center; gap: 0.55rem; font-size: 0.8rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.rail-btn i { width: 22px; text-align: center; font-size: 1rem; }
.rail-btn:hover { color: #fff; background: rgba(255,255,255,0.06); }
body.rail-collapsed .rail-btn { justify-content: center; padding-left: 0; padding-right: 0; }
body.rail-collapsed .rail-btn span { display: none; }
body.rail-collapsed .rail-btn i { margin: 0; }

@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.show { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .sidebar-backdrop.show { display: block; }
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.1rem 4rem; }
.wrap--narrow { max-width: 720px; }

h1 { font-size: 1.55rem; letter-spacing: -0.02em; margin-bottom: 0.25rem; }
h2 { font-size: 1.1rem; letter-spacing: -0.01em; margin-bottom: 0.6rem; }
h3 { font-size: 0.95rem; margin-bottom: 0.35rem; }
.sub { color: var(--ink-3); font-size: 0.9rem; margin-bottom: 1.4rem; }

/* ------------------------------------------------------------------- cards -- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem 1.2rem; margin-bottom: 1rem;
}
.card__head { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.card__head h2 { margin: 0; }
.grid { display: grid; gap: 1rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* ------------------------------------------------------------------- stats -- */
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1rem; }
.stat__num { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.stat__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); margin-top: 0.2rem; }

/* ------------------------------------------------------------------- pills -- */
.pill {
  display: inline-block; padding: 0.12rem 0.55rem; border-radius: 100px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--teal-pale); color: var(--teal-dark); white-space: nowrap;
}
.pill--ok       { background: #E4F4EB; color: var(--ok); }
.pill--warn     { background: #FBF1DF; color: var(--warn); }
.pill--err      { background: #FBE9E7; color: var(--err); }
.pill--muted    { background: #EDEFF0; color: var(--ink-3); }

/* ------------------------------------------------------------------ tables -- */
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); font-weight: 600; }
tr:last-child td { border-bottom: 0; }
.table-scroll { overflow-x: auto; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 0.82em; }

/* ------------------------------------------------------------------- forms -- */
label { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); margin-bottom: 0.25rem; font-weight: 600; }
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=date], input[type=number], select, textarea {
  width: 100%; padding: 0.55rem 0.65rem; font: inherit; font-size: 0.92rem;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--teal); outline-offset: -1px; border-color: var(--teal); }
.field { margin-bottom: 0.8rem; }
.field-row { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.check { display: flex; align-items: center; gap: 0.5rem; }
.check input { width: auto; }
.check label { margin: 0; text-transform: none; letter-spacing: 0; font-size: 0.9rem; color: var(--ink); }

.btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.95rem; border-radius: 8px; border: 1px solid var(--teal);
  background: var(--teal); color: #fff; font: inherit; font-size: 0.88rem; font-weight: 600;
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--teal-dark); border-color: var(--teal-dark); }
.btn--ghost { background: #fff; color: var(--teal-dark); }
.btn--ghost:hover { background: var(--teal-pale); }
.btn--quiet { background: #fff; color: var(--ink-2); border-color: var(--line); }
.btn--quiet:hover { background: #F1F3F3; }
.btn--danger { background: #fff; color: var(--err); border-color: #F0C8C3; }
.btn--danger:hover { background: #FBE9E7; }
.btn--sm { padding: 0.28rem 0.6rem; font-size: 0.78rem; }
.btn-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------------- flash -- */
.flash { padding: 0.7rem 0.95rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.9rem; border: 1px solid; }
.flash--ok   { background: #E4F4EB; border-color: #BFE4CE; color: #14603A; }
.flash--warn { background: #FBF1DF; border-color: #EBD8AE; color: #7A5410; }
.flash--error{ background: #FBE9E7; border-color: #F0C8C3; color: #8E2820; }

/* ------------------------------------------------------------- meal blocks -- */
.meal {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  padding: 0.65rem 0; border-bottom: 1px solid var(--line);
}
.meal:last-child { border-bottom: 0; }
.meal__date { font-weight: 600; min-width: 92px; }
.meal__slot { min-width: 82px; }
.meal__dish { flex: 1 1 200px; color: var(--ink-2); }
.meal__actions { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.meal__actions input[type=date] { width: auto; padding: 0.28rem 0.4rem; font-size: 0.8rem; }
.meal--skipped .meal__date, .meal--skipped .meal__dish { text-decoration: line-through; color: var(--ink-3); }

/* ----------------------------------------------------------------- timeline -- */
.timeline li { padding: 0.5rem 0; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.timeline li:last-child { border-bottom: 0; }
.timeline time { color: var(--ink-3); font-size: 0.78rem; font-family: var(--mono); }
.timeline .who { color: var(--ink-3); font-size: 0.78rem; }
.timeline .detail { color: var(--ink-3); font-size: 0.8rem; font-family: var(--mono); word-break: break-word; }

/* ------------------------------------------------------------------ login  -- */
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: var(--ink); }
.login-card { background: #fff; border-radius: 14px; padding: 2rem; width: min(420px, 100%); }
.login-card h1 { margin-bottom: 0.4rem; }
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.65rem;
  width: 100%; padding: 0.7rem 1rem; border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink); font: inherit; font-weight: 600; text-decoration: none;
}
.google-btn:hover { background: #F5F7F7; }
.muted { color: var(--ink-3); font-size: 0.85rem; }

/* -------------------------------------------------------- meal calendar -- */
/* Fourteen rows of six dropdowns is a lot of table. Smaller type and tighter
   cells put a whole rotation on one screen, which is the only way to see
   whether it repeats. */
.bx-cal-table { font-size: 0.82rem; }
.bx-cal-table th { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.4rem 0.5rem; }
.bx-cal-table td { padding: 0.25rem 0.5rem; }
.bx-cal-table select {
  font-size: 0.8rem; padding: 0.25rem 0.4rem; max-width: 15rem;
  border-radius: 6px; border: 1px solid var(--line); background: #fff;
}
.bx-cal-table select:not([data-set]) { border-color: var(--warn); background: #FEFBF4; }
.bx-cal-table td:first-child { font-variant-numeric: tabular-nums; color: var(--ink-3); }

/* ------------------------------------------------------------ menu list -- */
/* A dish is a row you scan, not a form you scroll past. The flags read as
   lights so a hundred dishes can be checked down a column — a lit letter is
   on, a faint one is off, and the title says which is which for anyone who
   cannot tell the two greys apart. */
.menu-list td { vertical-align: middle; }
.menu-list tr.is-off td { opacity: 0.55; }
.menu-list .dish-thumb {
  width: 30px; height: 30px; border-radius: 6px; object-fit: cover;
  vertical-align: middle; margin-right: 0.5rem;
}
.lights { display: inline-flex; gap: 3px; }
.lt {
  width: 22px; height: 20px; border-radius: 5px; display: inline-flex;
  align-items: center; justify-content: center; font-size: 0.62rem; font-weight: 700;
  background: #EDEFF0; color: #A9B2B4; letter-spacing: 0; cursor: default;
}
.lt--on  { background: var(--teal-pale); color: var(--teal-dark); }
.lt--veg { background: #E4F4EB; color: var(--ok); }
.lt--non { background: #FBE9E7; color: var(--err); }
.lt--good { background: #FBF1DF; color: var(--warn); }
/* A dish nobody has classified. Not an error — the backfill could not read the
   protein out of "Pathar Ke Kebab" — but it is work somebody still has to do. */
.lt--gap { background: #FFF; color: var(--ink-3); border: 1px dashed var(--line); }
.edit-row > td { background: #FBFCFC; border-top: 0; }
/* The open editor is the row the page was asked for, so bring it into view. */
.edit-row { scroll-margin-top: 1rem; }
[data-row].is-open { background: var(--teal-pale); color: var(--teal-dark); }

/* A flag that cannot apply to this dish. Greyed rather than hidden, so the
   option is visibly there and visibly unavailable — a checkbox that vanishes
   reads as a bug. */
.pill.is-off { opacity: 0.4; cursor: not-allowed; }
.pill.is-off input { cursor: not-allowed; }
/* The facts about a person that do not belong in a list of people. */
.staff-detail {
  display: flex; flex-wrap: wrap; gap: 0.4rem 2rem; padding: 0.2rem 0 0.8rem;
  border-bottom: 1px dashed var(--line); font-size: 0.88rem;
}
.staff-detail span { display: flex; flex-direction: column; }
.staff-detail b {
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700;
}

/* ---------------------------------------------------------------- printing -- */
@media print {
  .topbar, .no-print, .btn { display: none !important; }
  body { background: #fff; font-size: 12px; }
  .card { border: 0; padding: 0; }
  .wrap { padding: 0; max-width: none; }
  th, td { padding: 0.3rem 0.4rem; }
}

/* =========================================================================
   DISPATCH — grouped by customer
   A bag is one delivery to one person. The old slot-first tables listed the
   same customer three times and nobody could tell it was one bag.
   ========================================================================= */
.bag { border-left: 3px solid var(--line); }
.bag--scheduled  { border-left-color: var(--ink-3); }
.bag--dispatched { border-left-color: var(--warn); }
.bag--delivered  { border-left-color: var(--ok); }

.bag__head { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.bag__who { flex: 1 1 320px; min-width: 0; }
.bag__name-row { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.bag__name { font-size: 1.15rem; margin: 0; }
.bag__name a { color: inherit; text-decoration: none; }
.bag__name a:hover { color: var(--teal-dark); text-decoration: underline; }
.bag__meta { font-size: 0.85rem; color: var(--ink-3); margin-bottom: 0.35rem; }
.bag__addr { font-size: 0.9rem; line-height: 1.45; }
.bag__note {
  margin-top: 0.5rem; padding: 0.35rem 0.6rem; border-radius: 6px;
  background: #FBF1DF; color: #7A5410; font-size: 0.84rem; display: inline-block;
}
.bag__action { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.bag__callnote {
  margin-top: 0.8rem; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.86rem;
}
.bag__callnote.is-ok  { background: #E4F4EB; color: #14603A; }
.bag__callnote.is-err { background: #FBE9E7; color: #8E2820; }

/* The meals inside the bag. */
.bag__meals { margin-top: 0.9rem; border-top: 1px solid var(--line); }
.bagmeal {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  padding: 0.5rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem;
}
.bagmeal:last-child { border-bottom: 0; }
.bagmeal__slot {
  min-width: 78px; font-family: var(--mono); font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3);
}
.bagmeal__dish { flex: 1 1 200px; font-weight: 600; }
.bagmeal__macros { color: var(--ink-3); font-size: 0.78rem; }
.bagmeal__state { font-size: 0.8rem; color: var(--ink-3); }
.bagmeal--off .bagmeal__dish { text-decoration: line-through; color: var(--ink-3); font-weight: 400; }

/* ===== CALL BUTTON ===== */
.callbtn {
  width: 32px; height: 32px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--teal);
  background: var(--teal); color: #fff; cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.callbtn:hover { background: var(--teal-dark); transform: scale(1.06); }
.callbtn:disabled { opacity: 0.5; cursor: wait; }
.callbtn svg { width: 15px; height: 15px; }
/* No Exotel (or no staff number): a plain tel: link, visibly different. */
.callbtn--plain { background: #fff; color: var(--teal-dark); border-color: var(--line); }
.callbtn--plain:hover { background: var(--teal-pale); }
.callbtn--busy { animation: callpulse 1s ease-in-out infinite; }
@keyframes callpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ===== COUNTDOWN BUTTONS =====
   A status change is held for 15 seconds and can be tapped again to stop. */
.btn--counting {
  background: var(--warn); border-color: var(--warn); color: #fff;
  animation: countpulse 1s ease-in-out infinite;
}
.btn--counting:hover { background: #96620f; border-color: #96620f; }
@keyframes countpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.78; } }

/* ===== COOK LIST ===== */
.cook { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.85rem 1rem; }
.cook__slot {
  font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ink-3); margin-bottom: 0.5rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.cook__list li { padding: 0.25rem 0; font-size: 0.9rem; }
.cook__qty { font-family: var(--mono); font-weight: 600; color: var(--teal-dark); margin-right: 0.3rem; }

/* ===== SSO ===== */
.sso-divider {
  display: flex; align-items: center; gap: 0.8rem; margin: 1.2rem 0;
  color: var(--ink-3); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em;
}
.sso-divider::before, .sso-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sso-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  width: 100%; padding: 0.75rem 1rem; border-radius: 8px;
  background: var(--ink); color: #fff; font: inherit; font-weight: 600;
  text-decoration: none; border: 1px solid var(--ink);
}
.sso-btn:hover { background: #000; }

/* ===== TEAM DIRECTORY ===== */
.person {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--line);
}
.person:last-child { border-bottom: 0; }
.person__avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--teal-pale); color: var(--teal-dark);
  font-weight: 700; font-size: 0.85rem;
}
.person__body { flex: 1 1 200px; min-width: 0; }
.person__name { font-weight: 600; }
.person__meta { font-size: 0.82rem; color: var(--ink-3); }
.person__actions { display: flex; gap: 0.4rem; align-items: center; }

/* ===== BRAND TAG =====
   One kitchen cooks several Glisco brands, so a bag says which one it is. */
.brandtag {
  display: inline-block; padding: 0.1rem 0.5rem; border-radius: 100px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: color-mix(in srgb, var(--brand) 14%, white);
  color: var(--brand); border: 1px solid color-mix(in srgb, var(--brand) 30%, white);
}
.brandtag--lg { font-size: 0.75rem; padding: 0.2rem 0.7rem; }

/* A padlock next to a masked number, so it reads as deliberate rather than
   as missing data. */
.privacy { cursor: help; opacity: 0.55; font-size: 0.8em; }

/* ===== DISPATCH RUNS =====
   The three departures that actually leave the kitchen. A bag rides the run of
   its earliest meal, so a three-meal bag goes out on the breakfast run with its
   dinner already in it. */
.run { margin-bottom: 2.2rem; }
.run__head {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  padding: 0 0 0.7rem;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 1rem;
}
.run__title {
  font-size: 1.25rem; margin: 0; letter-spacing: -0.02em;
}
.run__hint { font-size: 0.8rem; }
.run__cook { background: var(--teal-pale); border-color: #C9E7EE; }
.run__cook h3 { margin: 0; }
.cook__list--wide {
  display: grid; gap: 0.3rem 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
@media print {
  .run__head { border-bottom-width: 1px; break-after: avoid; }
  .run { break-inside: avoid-page; }
}
.run__window {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 600;
  color: var(--teal-dark); background: var(--teal-pale);
  padding: 0.15rem 0.55rem; border-radius: 6px;
}

/* The per-dish reprint button sits inline with the meal row. */
.bagmeal form { display: inline; }
.bagmeal .btn--sm { min-width: 2rem; justify-content: center; }

/* ===== ONE TILE PER DAY =====
   A day's meals arrive in a single delivery, so the portal shows a day as one
   block rather than one row per meal. */
.day {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.8rem 0.95rem; margin-bottom: 0.7rem; background: var(--bg);
}
.day__head {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  padding-bottom: 0.5rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--line);
}
.day__date { font-weight: 700; }
.day__count { font-size: 0.78rem; }
.day__meal { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; padding: 0.22rem 0; }
.day__dish { flex: 1 1 180px; font-size: 0.92rem; }
.day__macros { font-size: 0.76rem; }

/* =========================================================================
   PHONE FIRST — the customer portal
   Nearly every customer opens this on a phone, standing up, one-handed. Tap
   targets get bigger, tables stop being tables, and nothing relies on hover.
   ========================================================================= */
@media (max-width: 640px) {
  body { font-size: 16px; }                 /* iOS zooms inputs under 16px */
  .wrap { padding: 1rem 0.85rem 3rem; }

  h1 { font-size: 1.35rem; }
  .sub { font-size: 0.88rem; margin-bottom: 1rem; }

  .card { padding: 0.95rem 0.9rem; border-radius: 12px; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }

  /* Stat tiles read as a strip rather than a stack of full-width boxes. */
  .grid--4 { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .stat { padding: 0.7rem 0.75rem; }
  .stat__num { font-size: 1.35rem; }
  .stat__label { font-size: 0.62rem; letter-spacing: 0.08em; }

  /* Thumb-sized actions. 44px is the smallest target that reliably works. */
  .btn { padding: 0.7rem 1rem; min-height: 44px; font-size: 0.92rem; }
  .btn--sm { padding: 0.5rem 0.8rem; min-height: 38px; }
  .btn-row { gap: 0.45rem; }
  .btn-row .btn { flex: 1 1 auto; justify-content: center; }

  input, select, textarea { font-size: 16px; padding: 0.7rem 0.7rem; }
  .field-row { grid-template-columns: 1fr; }

  /* A meal row becomes a block: date, then dish, then the action full-width. */
  .meal { flex-direction: column; align-items: stretch; gap: 0.35rem; padding: 0.8rem 0; }
  .meal__date { min-width: 0; }
  .meal__actions { margin-top: 0.35rem; }
  .meal__actions form, .meal__actions .btn { width: 100%; }
  .meal__actions .btn { justify-content: center; }

  .day__meal { gap: 0.4rem; }
  .day__macros { width: 100%; }

  .topbar { padding: 0.6rem 0.8rem; gap: 0.6rem; }
  .topbar nav { gap: 0.7rem; font-size: 0.8rem; }
  .topbar__brand small { display: none; }

  .timeline .detail { display: none; }      /* JSON is not phone reading */
}

/* Tables never fit a phone. Every one of ours can scroll sideways instead of
   squashing, and says so. */
@media (max-width: 640px) {
  .table-scroll { -webkit-overflow-scrolling: touch; }
  .table-scroll table { min-width: 34rem; }
}

/* Calling switched off at the server: the icon stays so the row doesn't
   reflow, but it reads as unavailable rather than as a broken button. */
.callbtn--off {
  background: #EDEFF0; color: var(--ink-3); border-color: var(--line);
  cursor: not-allowed;
}

/* The approval queue on the Team page. One row per person waiting, with the
   role decision right there — an approval that needs a second screen to finish
   is an approval somebody leaves half done. */
.pending-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  padding: 0.7rem 0; border-top: 1px solid rgba(0, 0, 0, 0.07);
}
.pending-row > div:first-child { flex: 1 1 16rem; min-width: 0; }
.pending-row select { padding: 0.4rem 0.6rem; }