/* Shared page styles for every base.html page.
   This was a 16 KB inline <style> in base.html, re-parsed by the browser on
   every navigation because inline CSS cannot be cached. As a static file it is
   served with a one-year immutable cache and ?v= busting, so a warm kiosk
   reuses the compiled stylesheet across taps. The handful of rules that
   genuinely depend on per-install settings (custom theme colours, the
   background image and its opacity) stay inline in base.html. */
body { padding-top: 60px; }
.navbar-brand { font-weight: 700; letter-spacing: -0.5px; }
/* Brand mark (pink line-art raccoon). The pink reads on both dark and light
   navbars; height-capped so it never grows the fixed 60px bar. */
.brand-logo { height: 30px; width: auto; }
/* Two-level nav top row (FoodAssistant-gg33, -2e0f): keep every top-level
   label on a single line and let the row scroll sideways if the tabs
   overflow, at ALL widths (not just the narrow-panel breakpoint), so labels
   never wrap onto two lines or overlap on a desktop browser. Tight padding
   and a small icon gap keep the row compact. */
.navbar .nav-primary { min-width: 0; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
.navbar .nav-primary::-webkit-scrollbar { display: none; }
.navbar .nav-primary .nav-link { white-space: nowrap; padding-left: 0.55rem; padding-right: 0.55rem; }
.navbar .nav-primary .nav-link .bi { margin-right: 0.3rem; }
/* Tabs that do not fit the row are hidden by nav-overflow.js; the More menu
   lists every page, and a small dot on the More button says it holds tabs
   the row could not show. */
.navbar .nav-primary .nav-item.pr-nav-overflow { display: none; }
#moreMenu.pr-more-has-tabs { position: relative; }
#moreMenu.pr-more-has-tabs::before {
  content: ""; position: absolute; top: 0.45rem; right: 0.2rem;
  width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: var(--pr-pink-soft, #ff4d97);
}
.badge-days { font-size: 0.85em; }
.table th { white-space: nowrap; }
.btn-icon { padding: 0.2rem 0.45rem; font-size: 0.8rem; }
.urgency-expired { color: #ff6b6b; }
.urgency-today   { color: #ffa94d; }
.urgency-3d      { color: #ffd43b; }
.urgency-ok      { color: #69db7c; }
.flash { position: fixed; top: 70px; right: 1rem; z-index: 9999; min-width: 280px; }
/* When the navbar is collapsed (small/landscape panels like the 800x480
   Pi touchscreen), the open menu overlays the page. Cap its height to the
   viewport and let it scroll so a long tab list never runs off a short
   screen or hides behind page content. */
@media (max-width: 991.98px) {
  /* Keep the main menu visible on a phone instead of folding it behind the
     hamburger, WITHOUT growing the bar (a taller bar would cover the page,
     since the body only reserves 60px of top padding). The bar stays a
     single row: brand, then the primary nav which scrolls sideways if the
     tabs overflow, then the hamburger. The hamburger's utility controls open
     as an overlay panel below the bar rather than adding rows to it. */
  .navbar > .container-fluid { flex-wrap: nowrap; }
  .navbar-brand,
  .navbar-toggler { flex-shrink: 0; }
  .navbar .nav-primary {
    min-width: 0;
    flex: 1 1 auto;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .navbar .nav-primary::-webkit-scrollbar { display: none; }
  .navbar .nav-primary .nav-link { white-space: nowrap; }
  /* Utility menu (QR, kiosk, settings, overflow, sign out) overlays below the
     bar so opening it never changes the bar height. */
  .navbar-collapse {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1031;
    min-width: 14rem;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    padding: 0.5rem 0.75rem;
    background: var(--bs-tertiary-bg, #2b3035);
    border: 1px solid var(--bs-border-color, rgba(255, 255, 255, 0.15));
    border-top: 0;
    border-radius: 0 0 0 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
  }
}
/* In-header sub-page pill row (FoodAssistant-gg33, -2e0f): the active
   top-level's sub-pages as a compact group of pills, reading as a second
   row of the main menu. Same background as the navbar, and STICKY directly
   under the fixed 60px bar so it stays put instead of scrolling away. Pills
   are sized to their label and grouped together (not stretched full width);
   the group scrolls sideways only if it overflows a narrow panel. */
.subpill-bar {
  background: var(--bs-tertiary-bg, #2b3035);
  border-bottom: 1px solid var(--bs-border-color, rgba(255, 255, 255, 0.12));
  padding: 0.3rem 0.75rem;
  /* Sticky under the fixed navbar. The `top` inset is measured from the
     body's padding box, and body already reserves the navbar height via
     padding-top, so `top: 0` pins the pill flush at the navbar's bottom edge
     in both normal and kiosk modes. A non-zero value stacks ON TOP of that
     reserved padding and drops the pill a full navbar-height too low, which
     left a large empty gap on the kiosk (FoodAssistant-2e0f, Dan). */
  position: sticky;
  top: 0;
  z-index: 1020;
}
.subpill-inner {
  display: flex;
  gap: 0.35rem;
  width: 100%;
}
/* Full-width segments that fill the row (not compact round beads): each pill
   shares the width equally and reads as a solid, lightly filled tab, with
   the current page filled in the accent color (FoodAssistant-2e0f, Dan). */
.subpill-btn {
  flex: 1 1 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--bs-body-color);
  background: var(--bs-secondary-bg, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--bs-border-color, rgba(255, 255, 255, 0.15));
  padding: 0.4rem 0.6rem;
  border-radius: 0.4rem;
  font-size: 0.9rem;
  line-height: 1.45;
}
.subpill-btn:hover { border-color: var(--bs-primary); }
/* A clear keyboard focus ring on the sub-page pills and the nav links, which
   otherwise show no focus at all against the dark bar. */
.subpill-btn:focus-visible,
.navbar .nav-link:focus-visible,
.navbar .navbar-brand:focus-visible,
.navbar .dropdown-item:focus-visible,
.float-nav-link:focus-visible {
  outline: 2px solid var(--pr-pink-soft, #ff4d97);
  outline-offset: 2px;
  box-shadow: none;
}
/* Skip link: Bootstrap's visually-hidden-focusable keeps it off screen until
   it takes focus; then it shows above the fixed navbar. */
.pr-skip-link:focus {
  position: fixed !important;
  top: 0.5rem; left: 0.5rem;
  z-index: 2000;
  padding: 0.5rem 1rem;
  background: var(--bs-body-bg, #1a1d21);
  color: var(--bs-body-color, #fff);
  border: 2px solid var(--pr-pink-soft, #ff4d97);
  border-radius: 0.4rem;
}
#pageContent:focus { outline: none; }
.subpill-btn.active {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
  color: #fff;
  font-weight: 600;
}
/* Hide the top nav row on a phone browser too (FoodAssistant-gg33, Dan): it
   is unusable narrow. Navigation falls to the hamburger (which now lists
   every top-level page) plus the sub-pill. Desktop keeps the top row; the
   kiosk hide lives in kiosk.css. */
@media (max-width: 767.98px) {
  .navbar.fixed-top .nav-primary { display: none !important; }
  /* On a phone the equal-width segments squeeze every label down to an
     ellipsis, so the row scrolls sideways instead and each pill keeps its
     whole name. */
  .subpill-inner {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .subpill-inner::-webkit-scrollbar { display: none; }
  .subpill-btn { flex: 0 0 auto; overflow: visible; text-overflow: clip; }
}
/* Small-screen kiosk cluster (FoodAssistant-7j5b).
   q6ql: page simplification on a narrow panel (the 800x480 pi_remote/
   pi_hosted kiosk and similar). The top-level tabs are NOT folded away here:
   all of them stay in the primary nav, which scrolls sideways when they
   overflow (see the 991.98px block above), so every page is reachable from
   the bar itself rather than buried in the kebab.
   The ui_scale -> zoom mapping used by kiosk-display.js was audited and is
   correct (not inverted); nothing here changes those scale factors. */
@media (max-width: 820px) {
  /* Larger touch targets for the tabs on a narrow panel. */
  .navbar-nav .nav-link { padding: 0.6rem 0.85rem; }
  /* muwj: auto-simplify the page on a small viewport: tighter gutters,
     single-column rows, and trimmed non-critical chrome so content fits an
     800x480 panel without horizontal scroll. CSS-only and scoped to the
     breakpoint, so desktop/phone layout is unaffected. */
  #pageContent { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
  #pageContent .row:not(.pr-keep-cols) > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
  #pageContent .card { margin-bottom: 0.5rem; }
  /* Let content panels flow into the page so the whole page scrolls as one
     surface; a nested scroll box (e.g. the inventory list at 60vh) otherwise
     traps a finger flick and only a thin strip scrolls the page. */
  .panel-body { max-height: none !important; overflow: visible !important; }
  /* The floating nav is the best touch-navigation surface on a small panel
     (fixed, large targets, no hamburger), so it is NOT hidden here. It is
     auto-enabled in kiosk mode by floating-nav.js. */
}
/* High-zoom small-panel nav reclaim (FoodAssistant-fuuj).
   At large/xlarge UI scale on a small/kiosk panel (e.g. an 800x480 screen
   zoomed 1.2-1.4x, leaving a short effective CSS viewport) BOTH the top
   navbar and the bottom floating nav were showing, so navigation chrome ate
   ~half the screen. When the floating nav is the active nav surface
   (floating-nav.js sets data-floatnav-active on <html>), it already exposes
   every destination plus Settings, so the top navbar's redundant primary
   tab row and utility toggler are pure overhead here. Collapse the top bar
   to just the brand and slim its height, leaving the floating nav as the one
   navigation surface. Scoped to high scale + small viewport + active
   floating nav, so normal scale, phones, and desktop are untouched, and a
   panel WITHOUT the floating nav keeps its full top navbar. */
@media (max-width: 991.98px) {
  html[data-floatnav-active="1"][data-ui-scale^="1.2"] .navbar.fixed-top .nav-primary,
  html[data-floatnav-active="1"][data-ui-scale^="1.2"] .navbar.fixed-top .navbar-toggler,
  html[data-floatnav-active="1"][data-ui-scale^="1.2"] .navbar.fixed-top .navbar-collapse,
  html[data-floatnav-active="1"][data-ui-scale^="1.4"] .navbar.fixed-top .nav-primary,
  html[data-floatnav-active="1"][data-ui-scale^="1.4"] .navbar.fixed-top .navbar-toggler,
  html[data-floatnav-active="1"][data-ui-scale^="1.4"] .navbar.fixed-top .navbar-collapse {
    display: none !important;
  }
  /* Slim the now brand-only bar and shrink the body's top offset to match so
     the reclaimed row goes to content, not to empty padding. */
  html[data-floatnav-active="1"][data-ui-scale^="1.2"] .navbar.fixed-top,
  html[data-floatnav-active="1"][data-ui-scale^="1.4"] .navbar.fixed-top {
    min-height: 0;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
  }
  html[data-floatnav-active="1"][data-ui-scale^="1.2"] .navbar-brand,
  html[data-floatnav-active="1"][data-ui-scale^="1.4"] .navbar-brand {
    font-size: 0.95rem;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.4;
  }
  html[data-floatnav-active="1"][data-ui-scale^="1.2"] body,
  html[data-floatnav-active="1"][data-ui-scale^="1.4"] body {
    padding-top: 38px !important;
  }
}
/* On-screen navigation bar (FoodAssistant-bzuu, -i181). A FIXED bar docked
   to a screen edge. Unlike the old draggable overlay, it reserves layout
   space (floating-nav.js pads the body on the docked side), so it never sits
   on top of content. The handle is gone (it is fixed, not dragged). */
.float-nav {
  position: fixed;
  z-index: 1030;
  display: flex;
  gap: 0.4rem;
  padding: 0.4rem;
  background: var(--bs-tertiary-bg, rgba(33, 37, 41, 0.96));
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.4);
  user-select: none;
}
/* The grip handle from the draggable version is hidden in docked mode. */
.float-nav-handle { display: none; }
/* Bottom dock: a full-width horizontal bar. Icons wrap to extra rows when
   the screen is narrower than the row (a portrait kiosk panel); a centered
   flex row must never overflow, because the left half would hang past the
   screen edge with no way to scroll to it. floating-nav.js re-measures the
   bar height on resize, so the body padding tracks the wrapped rows. */
.float-nav-dock-bottom {
  left: 0; right: 0; bottom: 0;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border-top: 1px solid var(--bs-border-color, rgba(255, 255, 255, 0.15));
}
/* Left/right docks: a full-height vertical bar below the top navbar that
   scrolls if the icons exceed the screen height. */
.float-nav-dock-left, .float-nav-dock-right {
  top: 56px; bottom: 0;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
}
.float-nav-dock-left  { left: 0;  border-right: 1px solid var(--bs-border-color, rgba(255, 255, 255, 0.15)); }
.float-nav-dock-right { right: 0; border-left:  1px solid var(--bs-border-color, rgba(255, 255, 255, 0.15)); }
.float-nav-link {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.6rem;
  color: var(--bs-body-color, #dee2e6);
  font-size: 1.35rem;
  text-decoration: none;
}
.float-nav-link:hover { background: var(--bs-secondary-bg, rgba(255, 255, 255, 0.1)); }
.float-nav-link.active { background: var(--bs-primary, #0d6efd); color: #fff; }
/* Floating timer chips (FoodAssistant-kfda). One compact pill per running
   server-side timer, stacked bottom-right on every page; timer-chips.js
   shows them only while a timer is running. Style matches the .float-nav
   conventions above. */
.timer-chips {
  position: fixed;
  z-index: 1030;
  /* Offset clear of a docked nav bar (floating-nav.js publishes its size as
     these CSS vars) so the chips never sit on top of it. */
  bottom: calc(0.75rem + var(--float-nav-bottom, 0px));
  right: calc(0.75rem + var(--float-nav-right, 0px));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  max-width: 14rem;
  user-select: none;
}
.timer-chip {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  padding: 0.25rem 0.65rem;
  border-radius: 1rem;
  background: var(--bs-tertiary-bg, rgba(33, 37, 41, 0.92));
  border: 1px solid var(--bs-border-color, rgba(255, 255, 255, 0.15));
  box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.35);
  opacity: 0.95;
  color: var(--bs-body-color, #dee2e6);
  text-decoration: none;
}
.timer-chip:hover { border-color: var(--bs-primary, #0d6efd); color: var(--bs-body-color, #dee2e6); }
.timer-chip-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.85rem;
}
.timer-chip-clock {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
}
.timer-chip-expired, .timer-chip-expired .timer-chip-clock { color: #ff6b6b; }

/* Contrast hardening (FoodAssistant-tjlm). These load after any theme
   overlay, so they correct low-contrast spots the bundled themes leave on
   shared chrome. Higher specificity than the overlays' rules so they win
   even over an overlay's !important on .nav-link.active. */
/* Active side-menu / pill: the pill background is always a saturated
   primary, so several light/neon overlays that retint .nav-link.active to
   their accent made accent-on-blue (e.g. iOS Light). Force white text. */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.side-menu .nav-link.active { color: #fff !important; }
/* Accent badges (success/info/warning) are medium-to-bright in every bundled
   theme, where white text fails. Dark text reads on all of them; danger and
   primary stay white (their backgrounds are dark enough). */
.badge.bg-success, .badge.bg-info, .badge.bg-warning,
.badge.text-bg-success, .badge.text-bg-info, .badge.text-bg-warning {
  color: #000 !important;
}
/* Bootstrap's info cyan is unreadable as outline text on light surfaces and
   some dark themes retint it to a low-contrast hue. Pin the Save buttons'
   outline-info to a readable teal for the active colour mode. */
/* theme_mode is exactly 'light' or 'dark' (every entry in THEMES sets one),
   so the two branches that used to be a Jinja if/else are scoped on the
   data-bs-theme attribute base.html puts on <html>. */
[data-bs-theme="light"] .btn-outline-info { color: #0a6e80 !important; border-color: #0a6e80 !important; }
[data-bs-theme="light"] .btn-outline-info:hover { background-color: #0a6e80 !important; border-color: #0a6e80 !important; color: #fff !important; }
/* On a light theme the secondary grey varies by theme (pale in Flatly, mid
   in plain Light), and neither black nor white text clears 4.5:1 on all of
   them. Pin the fill to a darker grey that white text reads on everywhere.
   (Dark themes keep their own: their secondary is dark.) */
[data-bs-theme="light"] .badge.bg-secondary, [data-bs-theme="light"] .badge.text-bg-secondary {
  background-color: #5c636a !important; color: #fff !important;
}
[data-bs-theme="dark"] .btn-outline-info { color: #6ed5e8 !important; border-color: #6ed5e8 !important; }
[data-bs-theme="dark"] .btn-outline-info:hover { background-color: #6ed5e8 !important; border-color: #6ed5e8 !important; color: #06222a !important; }

/* Light themes: the status colours (expiry urgency, warning and info text)
   are tuned for a dark surface and wash out on white. Darker shades of the
   same hues keep them readable (all at least 4.5:1 on white). */
[data-bs-theme="light"] .urgency-expired { color: #c92a2a; }
[data-bs-theme="light"] .urgency-today   { color: #b35400; }
[data-bs-theme="light"] .urgency-3d      { color: #8a6100; }
[data-bs-theme="light"] .urgency-ok      { color: #237032; }
[data-bs-theme="light"] .text-warning { color: #8a6100 !important; }
[data-bs-theme="light"] .text-info    { color: #087990 !important; }

/* The grey outline button (Cancel, Edit, filters) is stock Bootstrap grey in
   most themes: about 3.5:1 on the page and worse on cards and panels, and
   Flatly, Darkly and Cyborg tint it fainter still. One readable grey per
   colour mode fixes every theme that leaves it alone; the neon overlays set
   their own cyan colour directly and keep it. Text clears 4.5:1 and the
   border 3:1 on the page, cards and tertiary panels of every bundled theme
   (tests/browser/test_outline_secondary_contrast.py). */
[data-bs-theme="light"] .btn-outline-secondary {
  --bs-btn-color: #5c636a; --bs-btn-border-color: #5c636a;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #5c636a; --bs-btn-hover-border-color: #5c636a;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #5c636a; --bs-btn-active-border-color: #5c636a;
}
[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: #b4bcc4; --bs-btn-border-color: #868e96;
}

/* The plain Dark theme is stock Bootstrap dark mode, whose grey, blue and
   green outline buttons and muted grey text sit near 3.3:1 on the page.
   Scoped to that one theme (data-pr-theme on <html>) so the brand theme and
   the other overlays keep their own tuned colours. */
[data-pr-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: #adb5bd; --bs-btn-border-color: #868e96;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #565e64; --bs-btn-hover-border-color: #6c757d;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #565e64; --bs-btn-active-border-color: #6c757d;
  --bs-btn-disabled-color: #8f979f;
}
[data-pr-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #6ea8fe; --bs-btn-border-color: #6ea8fe;
  --bs-btn-hover-color: #06152d; --bs-btn-hover-bg: #6ea8fe; --bs-btn-hover-border-color: #6ea8fe;
  --bs-btn-active-color: #06152d; --bs-btn-active-bg: #6ea8fe; --bs-btn-active-border-color: #6ea8fe;
}
[data-pr-theme="dark"] .btn-outline-success {
  --bs-btn-color: #75b798; --bs-btn-border-color: #75b798;
  --bs-btn-hover-color: #06110b; --bs-btn-hover-bg: #75b798; --bs-btn-hover-border-color: #75b798;
  --bs-btn-active-color: #06110b; --bs-btn-active-bg: #75b798; --bs-btn-active-border-color: #75b798;
}
[data-pr-theme="dark"] .text-secondary { color: #adb5bd !important; }
[data-pr-theme="dark"] .text-success { color: #75b798 !important; }

/* Touch screens (phones, tablets): every control gets at least a 44px hit
   area, the size a fingertip can land on without catching its neighbour.
   Padding rather than a bare min-height, so labels stay centred. The
   attached kiosk display has its own larger sizes in kiosk.css. */
@media (pointer: coarse) {
  .btn { --bs-btn-padding-y: 0.6rem; }
  .btn-sm { --bs-btn-padding-y: 0.7rem; }
  .btn-group-sm > .btn { --bs-btn-padding-y: 0.7rem; }
  .subpill-btn { padding-top: 0.65rem; padding-bottom: 0.65rem; }
  .navbar-toggler, .panel-header { min-height: 44px; }
  .nav-tabs .nav-link { padding-top: 0.65rem; padding-bottom: 0.65rem; }
  .btn-icon {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .form-control, .form-select { min-height: 44px; }
  .btn-close { padding: 0.9rem; }
  /* A bigger box, and vertical padding on its label: padding on an inline
     label widens what a tap can hit without moving the layout around it. */
  .form-check-input { width: 1.3em; height: 1.3em; margin-top: 0.1em; }
  .form-switch .form-check-input { width: 2.3em; }
  .form-check { padding-left: 1.9em; }
  .form-check .form-check-input { margin-left: -1.9em; }
  .form-switch { padding-left: 2.9em; }
  .form-switch .form-check-input { margin-left: -2.9em; }
  .form-check-label { padding: 0.6rem 0; }
}