/* =====================================================================
   DFreshCatch UI
   Fresh Catch Market: the navy of the wordmark for type and navigation, one
   action green, and the four produce colours of the logo (greens, fish, poultry,
   meat) used only to tell jobs apart. IBM Plex Sans (tabular figures, so money
   lines up), Hind Siliguri for Bangla. Phones first: bottom bar + slide-in menu;
   computers: the same menu as a fixed side bar. There is no top bar.
   ===================================================================== */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Hind Siliguri"; font-weight: 400; font-display: swap; src: url("../fonts/hind-siliguri-bengali-400-normal.woff2") format("woff2"); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1; }
@font-face { font-family: "Hind Siliguri"; font-weight: 500; font-display: swap; src: url("../fonts/hind-siliguri-bengali-500-normal.woff2") format("woff2"); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+200C-200D, U+25CC; }
@font-face { font-family: "Hind Siliguri"; font-weight: 600; font-display: swap; src: url("../fonts/hind-siliguri-bengali-600-normal.woff2") format("woff2"); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+200C-200D, U+25CC; }
@font-face { font-family: "Hind Siliguri"; font-weight: 700; font-display: swap; src: url("../fonts/hind-siliguri-bengali-700-normal.woff2") format("woff2"); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+200C-200D, U+25CC; }

:root {
  --ink: #102c41;
  --ink-2: #4d6273;
  --ink-3: #8293a1;
  --paper: #f2f5f7;
  --surface: #ffffff;
  --surface-2: #f6f8fa;
  --line: #e2e8ed;
  --line-strong: #c9d3db;

  --navy: #124568;
  --navy-wash: #e8f0f6;
  --green: #0a8a4a;
  --green-ink: #076d3a;
  --green-deep: #124568;
  --green-wash: #e3f4eb;
  --red: #c0331a;
  --red-wash: #fdece8;
  --amber: #8f5400;
  --amber-wash: #fdf1dc;
  --blue: #1866a3;
  --blue-wash: #e6f2fb;
  --grey-wash: #edf1f4;

  /* The four tiles of the logo */
  --tile-greens: #12af5d;
  --tile-fish: #33a8e2;
  --tile-poultry: #f9a319;
  --tile-meat: #e54823;

  --font: "IBM Plex Sans", "Hind Siliguri", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --sidebar: 240px;
  --tabbar: 58px;
  --focus: 0 0 0 3px rgba(10, 138, 74, .25);
  --shadow-1: 0 1px 2px rgba(16, 44, 65, .05);
  --shadow-pop: 0 14px 36px rgba(16, 44, 65, .16);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

/* Moving between pages: the side menu and tab bar stay still and only the page content changes.
   Turned on in _Layout's <head>; browsers without page transitions simply load the page as before. */
.sidebar { view-transition-name: menu; }
.tabbar { view-transition-name: tabbar; }
::view-transition-group(*) { animation-duration: .14s; }
::view-transition-old(menu), ::view-transition-new(menu),
::view-transition-old(tabbar), ::view-transition-new(tabbar) { animation: none; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 600; }
h1 { font-size: 24px; letter-spacing: -.015em; }
h2 { font-size: 17px; letter-spacing: -.005em; }
h3 { font-size: 15px; }
p { margin: 0; }
small, .small { font-size: 13px; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.strong { font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }

.icon { width: 20px; height: 20px; flex: none; }
.icon--sm { width: 16px; height: 16px; }
.icon--lg { width: 24px; height: 24px; }

/* ---------- App shell: side menu (drawer on phones) + page ---------- */

.shell { min-height: 100vh; min-height: 100dvh; }
.main { position: relative; min-width: 0; }

.sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 70;
  display: flex; flex-direction: column;
  width: min(296px, 86vw); padding: calc(8px + var(--safe-top)) 10px calc(8px + var(--safe-bottom));
  background: var(--surface); border-right: 1px solid var(--line);
  transform: translateX(-102%); visibility: hidden;
  transition: transform .22s ease, visibility 0s linear .22s;
}
.sidebar.is-open { transform: none; visibility: visible; box-shadow: var(--shadow-pop); transition: transform .22s ease; }
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 65; background: rgba(16, 44, 65, .38);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.sidebar.is-open + .drawer-backdrop { opacity: 1; pointer-events: auto; }
body.has-drawer { overflow: hidden; }

/* Logo and name side by side */
.sidebar__head { display: flex; align-items: center; gap: 4px; min-height: 48px; padding: 2px 0 8px 6px; }
.sidebar__brand { display: flex; align-items: center; min-width: 0; flex: 1; border-radius: var(--r-md); padding: 4px 2px; }
.sidebar__brand:hover { text-decoration: none; }
.sidebar__logo { width: 158px; height: auto; }
.sidebar__mark { display: none; width: 34px; height: 34px; }
.sidebar .sidebar__fold { display: none; width: 36px; height: 36px; color: var(--ink-3); }

.sidebar__nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0 -10px; padding: 2px 10px 8px; overscroll-behavior: contain; scrollbar-width: thin; }
.sidebar__foot { padding-top: 6px; border-top: 1px solid var(--line); }

/* Menu groups fold by themselves: only the group of the current page is open. */
.nav-group + .nav-group { margin-top: 2px; }
.nav-group__title {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: none; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-3); text-align: left;
}
.nav-group__title:hover { color: var(--ink); background: var(--surface-2); }
.nav-group__title .icon { transition: transform .15s; }
.nav-group.is-open .nav-group__title .icon { transform: rotate(180deg); }
.nav-group__items { display: none; padding: 2px 0 6px; }
.nav-group.is-open .nav-group__items { display: block; }
.nav-link {
  position: relative; display: flex; align-items: center; gap: 11px;
  min-height: 36px; padding: 0 10px; border-radius: var(--r-sm);
  color: var(--ink-2); font-weight: 500; font-size: 14.5px; white-space: nowrap;
}
.nav-link + .nav-link { margin-top: 1px; }
.nav-link .icon { width: 18px; height: 18px; color: var(--ink-3); }
.nav-link:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.nav-link.is-active { background: var(--navy-wash); color: var(--navy); font-weight: 600; }
.nav-link.is-active .icon { color: var(--navy); }
.nav-link.is-active::before { content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--navy); }
.nav-link__text { overflow: hidden; text-overflow: ellipsis; }
button.nav-link { width: 100%; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }

/* Alerts: top right of the page, on every screen size */
.bell {
  position: absolute; top: calc(8px + var(--safe-top)); right: 10px; z-index: 20;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.bell:hover { color: var(--navy); border-color: var(--line-strong); text-decoration: none; }
.bell.is-active { color: var(--navy); background: var(--navy-wash); border-color: transparent; }
.bell__count {
  position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: var(--tile-meat); color: #fff; border: 2px solid var(--paper);
  font-size: 10.5px; font-weight: 700; line-height: 15px; text-align: center;
}

/* Bottom bar on phones */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: calc(var(--tabbar) + var(--safe-bottom)); padding-bottom: var(--safe-bottom);
  background: rgba(255, 255, 255, .97); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
}
.tabbar a, .tabbar button {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 0; background: none; font: inherit; font-size: 11px; font-weight: 500;
  color: var(--ink-3); cursor: pointer;
}
.tabbar a:hover { text-decoration: none; }
.tabbar .is-active { color: var(--navy); font-weight: 600; }
.tabbar .is-active::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--navy); }
.tabbar .is-active .icon { stroke-width: 2.4; }

.icon-btn {
  position: relative; display: inline-grid; place-items: center;
  width: 40px; height: 40px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink-2); cursor: pointer; flex: none;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }

.page {
  width: 100%; max-width: 1240px; margin: 0 auto; min-width: 0;
  padding: calc(12px + var(--safe-top)) 14px calc(var(--tabbar) + var(--safe-bottom) + 16px);
}
.page--narrow { max-width: 760px; }
/* The page title never runs under the Alerts button. */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-bottom: 14px; padding-right: 50px; }
.page-head__title { flex: 1 1 auto; min-width: 0; }
.page-head__title p { margin-top: 2px; color: var(--ink-2); font-size: 14.5px; }
.page-head__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.back-link { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 4px; min-height: 28px; font-size: 14px; color: var(--ink-2); }

@media (min-width: 1024px) {
  body { font-size: 14.5px; }
  h1 { font-size: 24px; }
  .shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); transition: grid-template-columns .18s ease; }
  .sidebar {
    position: sticky; height: 100vh; height: 100dvh; width: var(--sidebar); z-index: 30;
    padding: 10px 10px 8px; transform: none; visibility: visible; transition: none; box-shadow: none;
  }
  .sidebar__close, .drawer-backdrop, .tabbar { display: none; }
  .sidebar .sidebar__fold { display: inline-grid; }
  .bell { top: 14px; right: 20px; }
  .page { padding: 16px 28px 40px; }
  .page-head, .dash-head { padding-right: 56px; }

  /* Folded menu: icons only; it opens over the page while the pointer is on it. */
  .menu-folded .shell { grid-template-columns: 64px minmax(0, 1fr); }
  .menu-folded .sidebar { width: 64px; overflow: visible; transition: width .16s ease, box-shadow .16s; }
  .menu-folded .sidebar:not(:hover):not(:focus-within) .sidebar__logo,
  .menu-folded .sidebar:not(:hover):not(:focus-within) .sidebar__fold,
  .menu-folded .sidebar:not(:hover):not(:focus-within) .nav-group__title,
  .menu-folded .sidebar:not(:hover):not(:focus-within) .nav-link__text,
  .menu-folded .sidebar:not(:hover):not(:focus-within) .dd__text,
  .menu-folded .sidebar:not(:hover):not(:focus-within) .dd__chevron,
  .menu-folded .sidebar:not(:hover):not(:focus-within) .dd__lock,
  .menu-folded .sidebar:not(:hover):not(:focus-within) .me__text { display: none; }
  .menu-folded .sidebar:not(:hover):not(:focus-within) .sidebar__mark { display: block; margin: 0 auto; }
  .menu-folded .sidebar:not(:hover):not(:focus-within) .sidebar__head { padding-left: 0; justify-content: center; }
  .menu-folded .sidebar:not(:hover):not(:focus-within) .nav-group__items { display: block; }
  .menu-folded .sidebar:not(:hover):not(:focus-within) .nav-group + .nav-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
  .menu-folded .sidebar:not(:hover):not(:focus-within) .nav-link { justify-content: center; padding: 0; }
  .menu-folded .sidebar:not(:hover):not(:focus-within) .scope { padding: 4px; }
  .menu-folded .sidebar:not(:hover):not(:focus-within) .dd__btn { justify-content: center; padding: 4px; }
  .menu-folded .sidebar:not(:hover):not(:focus-within) .me { justify-content: center; padding: 6px 0; }
  .menu-folded .sidebar:hover, .menu-folded .sidebar:focus-within { width: var(--sidebar); box-shadow: var(--shadow-pop); transition-delay: .12s; }
  .menu-folded .sidebar__fold .icon { transform: scaleX(-1); }
}

/* ---------- Panels, lists, tables ---------- */

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.panel + .panel, .panel + .section, .section + .panel, .section + .section { margin-top: 12px; }
.panel__head { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.panel__head h2 { flex: 1; }
.panel__body { padding: 14px; }
.panel__foot { padding: 12px 16px; border-top: 1px solid var(--line); }
.section-title { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 10px; }
.section-title h2 { flex: 1; }

.dt { width: 100%; border-collapse: collapse; }
.dt th {
  padding: 8px 14px; text-align: left; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; color: var(--ink-3);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.dt td { padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dt tbody tr:last-child td { border-bottom: 0; }
.dt tfoot td { padding: 10px 14px; border-top: 2px solid var(--line-strong); font-weight: 600; background: var(--surface-2); }
.dt .r, .dt th.r { text-align: right; }
.dt .c { text-align: center; }
.dt tr[data-href] { cursor: pointer; }
.dt tbody tr[data-href]:hover td { background: #f7fafc; }
.dt .row-title { font-weight: 600; color: var(--ink); }
.dt .row-sub { display: block; font-size: 13px; color: var(--ink-2); }
.dt .muted-row td { color: var(--ink-3); }
.table-wrap { overflow-x: auto; }

/* Phone: table rows become two-line list rows (title + amount, then details). */
@media (max-width: 719px) {
  .dt--stack thead { display: none; }
  .dt--stack tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .dt--stack tbody tr:last-child { border-bottom: 0; }
  .dt--stack tbody td { padding: 0; border: 0; }
  .dt--stack td.c-main { flex: 1 1 55%; min-width: 0; }
  .dt--stack td.c-end { margin-left: auto; text-align: right; }
  .dt--stack td.c-sub { order: 5; font-size: 13px; color: var(--ink-2); }
  .dt--stack td.c-sub:empty { display: none; }
  .dt--stack td.c-sub[data-label]::before { content: attr(data-label) " "; color: var(--ink-3); }
  .dt--stack td.c-hide { display: none; }
  .dt--stack td.c-input { order: 6; flex-basis: 100%; margin-top: 8px; }
  .dt--stack tfoot { display: block; }
  .dt--stack tfoot tr { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding: 12px 16px; background: var(--surface-2); border-top: 2px solid var(--line-strong); }
  .dt--stack tfoot td { border: 0; padding: 0; background: none; }
  .dt--stack tfoot td:empty, .dt--stack tfoot td.c-hide { display: none; }
}

.empty { padding: 40px 20px; text-align: center; color: var(--ink-2); }
.empty .icon { width: 36px; height: 36px; margin: 0 auto 10px; color: var(--ink-3); stroke-width: 1.6; }
.empty h3 { color: var(--ink); margin-bottom: 4px; }
.empty .btn { margin-top: 14px; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.pager__links { display: flex; gap: 6px; }

/* ---------- Toolbar: search + filters ---------- */

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.toolbar .search { flex: 1 1 240px; }
.search { position: relative; }
.search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.search input { padding-left: 40px; }

.tabs { display: flex; gap: 6px; margin: 0 -16px 14px; padding: 0 16px 2px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 34px; padding: 0 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-2); font-size: 14px; font-weight: 500; white-space: nowrap;
}
.tab:hover { text-decoration: none; border-color: var(--line-strong); color: var(--ink); }
.tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.tab__count { font-size: 12px; font-weight: 600; opacity: .75; }
@media (min-width: 1024px) { .tabs { margin: 0 0 14px; padding: 0 0 2px; flex-wrap: wrap; } }

/* ---------- Forms ---------- */

.form { display: grid; gap: 14px; }
.form-grid { display: grid; gap: 14px; align-items: start; }
@media (min-width: 720px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } .form-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.field { display: grid; gap: 6px; min-width: 0; }
.field > label, .label { font-size: 14px; font-weight: 500; color: var(--ink); }
.field .hint { font-size: 13px; color: var(--ink-2); }
.input, .select, .textarea {
  width: 100%; min-height: 44px; padding: 9px 12px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 16px;
  transition: border-color .12s, box-shadow .12s;
}
.textarea { min-height: 88px; resize: vertical; }
.select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%234a5a63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--green); box-shadow: var(--focus); }
.input--num, .weigh__input .input, .pay-row__amount { text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.input--sm { min-height: 40px; padding: 6px 10px; font-size: 15px; }
.input:disabled, .input[readonly] { background: var(--surface-2); color: var(--ink-2); }
.toolbar .input, .toolbar .select { min-height: 40px; }
.toolbar .input--date { flex: 1 1 140px; max-width: 200px; min-width: 0; }
@media (max-width: 719px) {
  .toolbar .input--date { max-width: none; }
  .toolbar > .btn { flex: 1 1 auto; }
  .toolbar > .select { flex: 1 1 100% !important; }
}

.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 15px; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--green); flex: none; }
.check small { display: block; color: var(--ink-2); }

.form-error {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--r-md);
  background: var(--red-wash); color: var(--red); font-weight: 500;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 14px; border-radius: var(--r-md);
  border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, transform .06s;
}
.btn:hover { text-decoration: none; border-color: var(--ink-3); background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn--primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-ink); border-color: var(--green-ink); }
.btn--danger { color: var(--red); border-color: #e7b4ae; }
.btn--danger:hover { background: var(--red-wash); border-color: var(--red); }
.btn--warn { color: var(--amber); border-color: #e6c58f; }
.btn--warn:hover { background: var(--amber-wash); border-color: var(--amber); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--surface-2); border-color: transparent; color: var(--ink); }
.btn--lg { min-height: 50px; padding: 0 20px; font-size: 16px; border-radius: 12px; }
.btn--sm { min-height: 34px; padding: 0 11px; font-size: 13.5px; }
.btn--block { width: 100%; }

/* Main action pinned above the tab bar on phones (store entry, payment, bill form). */
.action-bar {
  position: sticky; bottom: calc(var(--tabbar) + var(--safe-bottom)); z-index: 20;
  display: flex; gap: 10px; align-items: center;
  margin: 16px -16px 0; padding: 12px 16px;
  background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px);
  border-top: 1px solid var(--line);
}
.action-bar__total { flex: 1; min-width: 0; line-height: 1.25; }
.action-bar__total small { display: block; color: var(--ink-2); }
.action-bar form { margin: 0; }
.action-bar__total strong { font-size: 19px; font-variant-numeric: tabular-nums; }
/* Narrow phones: secondary buttons in the pinned bar show only their icon (the text stays for screen readers). */
@media (max-width: 479px) {
  .action-bar { gap: 8px; }
  .action-bar .btn:not(.btn--primary) { font-size: 0; gap: 0; padding: 0 14px; }
  .action-bar .btn--primary { padding: 0 16px; }
  .hide-narrow { display: none; }
}
@media (min-width: 1024px) {
  .only-mobile { display: none !important; }
  .action-bar { bottom: 0; margin: 20px 0 0; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 18px; }
}

/* ---------- Badges, balance, status track ---------- */

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--draft { background: var(--grey-wash); color: var(--ink-2); }
.badge--store { background: var(--blue-wash); color: var(--blue); }
.badge--review { background: var(--amber-wash); color: var(--amber); }
.badge--returned { background: var(--red-wash); color: var(--red); }
.badge--approved { background: var(--green-wash); color: var(--green-ink); }
.badge--cancelled { background: var(--grey-wash); color: var(--ink-3); text-decoration: line-through; }
.badge--plain::before { display: none; }

.bal { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bal--due { color: var(--red); }
.bal--advance { color: var(--green); }
.bal--settled { color: var(--ink-3); font-weight: 500; }
.amount-due { color: var(--red); }
.amount-ok { color: var(--green); }

/* The bill's journey: draft → store → approval → locked. A real sequence, so the steps are numbered. */
.track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.track li { counter-increment: step; display: grid; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.track li::before { content: ""; height: 5px; border-radius: 4px; background: var(--line); }
.track li span::before { content: counter(step) ". "; }
.track li.is-done { color: var(--ink-2); }
.track li.is-done::before { background: var(--green); }
.track li.is-current { color: var(--ink); font-weight: 600; }
.track li.is-current::before { background: var(--green); box-shadow: 0 0 0 3px var(--green-wash); }
.track li.is-returned { color: var(--red); font-weight: 600; }
.track li.is-returned::before { background: var(--red); }
.track--cancelled li::before { background: var(--line) !important; box-shadow: none !important; }

/* ---------- Home: one big button per job ---------- */

.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1200px) { .tiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }
.tile {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  min-height: 96px; padding: 12px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); box-shadow: var(--shadow-1);
}
.tile:hover { text-decoration: none; border-color: var(--line-strong); }
.tile:active { transform: translateY(1px); }
.tile__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--green-wash); color: var(--green); }
.tiles .tile:nth-child(4n+2) .tile__icon { background: #e3f3fb; color: #12709d; }
.tiles .tile:nth-child(4n+3) .tile__icon { background: #fef2da; color: #9a5b00; }
.tiles .tile:nth-child(4n+4) .tile__icon { background: #fde8e2; color: #b23a1b; }
.tile__icon .icon { width: 22px; height: 22px; }
.tile__text strong { display: block; font-size: 16px; font-weight: 600; line-height: 1.25; }
.tile__text small { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-2); line-height: 1.3; }
.tile__count { position: absolute; top: 12px; right: 12px; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--red); color: #fff; font-size: 13px; font-weight: 700; line-height: 26px; text-align: center; }
.tile--primary { background: var(--green); border-color: var(--green); color: #fff; }
.tile--primary:hover { background: var(--green-ink); }
.tile--primary .tile__icon { background: rgba(255, 255, 255, .16); color: #fff; }
.tile--primary .tile__text small { color: #cfe9de; }
@media (max-width: 719px) {
  .tile { min-height: 96px; gap: 10px; }
  /* The main job gets the whole first row, so the rest pair up evenly. */
  .tile--primary { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 76px; }
  .tile--primary .tile__text strong { font-size: 18px; }
}

/* ---------- Dates behind one button ---------- */

.date-filter { position: relative; flex: none; }
.date-filter > summary { list-style: none; }
.date-filter > summary::-webkit-details-marker { display: none; }
.date-filter__body .input { min-width: 0; width: 100%; padding-left: 10px; padding-right: 6px; }
.date-filter[open] > summary { border-color: var(--green); background: var(--green-wash); color: var(--green-ink); }
.date-filter__body {
  position: absolute; z-index: 30; top: calc(100% + 6px); right: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; width: min(380px, calc(100vw - 32px));
  padding: 14px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  box-shadow: 0 12px 28px rgba(16, 36, 29, .14);
}
@media (max-width: 719px) {
  .date-filter { order: 3; flex: 1 1 100%; }
  .date-filter > summary { width: 100%; }
  .date-filter__body { position: static; width: auto; margin-top: 8px; box-shadow: none; }
}

/* ---------- Push alert prompt ---------- */

.push-prompt { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--ink); color: #fff; }
.push-prompt .icon { flex: none; }
.push-prompt__text { flex: 1; font-size: 14.5px; line-height: 1.35; }
.push-prompt__text strong { display: block; font-size: 15.5px; }
.push-prompt .btn { border-color: #fff; }
.push-prompt .btn--ghost { color: #c9d4d0; border-color: transparent; padding: 0 8px; }

/* ---------- Key figures ---------- */

.figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-1); }
.figure { padding: 11px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.figure:nth-child(2n) { border-right: 0; }
.figure__label { font-size: 13px; color: var(--ink-2); }
.figure__value { margin-top: 2px; font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.figure__note { font-size: 12.5px; color: var(--ink-3); }
@media (min-width: 900px) {
  .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .figure { border-bottom: 0; }
  .figure:nth-child(2n) { border-right: 1px solid var(--line); }
  .figure:last-child { border-right: 0; }
  .figure__value { font-size: 24px; }
}

/* Work queues on the dashboard */
.queue-grid { display: grid; gap: 12px; margin-top: 12px; }
@media (min-width: 900px) { .queue-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.queue-grid > .panel { margin-top: 0; }
.queue-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--ink); }
.queue-item:last-child { border-bottom: 0; }
.queue-item:hover { background: var(--surface-2); text-decoration: none; }
.queue-item__main { flex: 1; min-width: 0; }
.queue-item__main strong { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.queue-item__main small { color: var(--ink-2); }

/* Description list for summaries */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 0; margin: 0; }
.kv dt { padding-right: 16px; }
.kv dt { color: var(--ink-2); font-size: 14px; }
.kv dd { margin: 0; text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.kv .kv-total { padding-top: 8px; border-top: 1px solid var(--line); font-weight: 600; color: var(--ink); font-size: 16px; }

/* Customer strip on bill and payment screens */
.customer-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 12px 16px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.customer-strip strong { font-size: 16px; }
.customer-strip .spacer { flex: 1; }
.customer-strip.is-over { background: var(--red-wash); border-color: #f0c2bb; }

.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md); font-size: 14.5px; }
.notice .icon { margin-top: 1px; }
.notice--warn { background: var(--amber-wash); color: #6c4100; }
.notice--danger { background: var(--red-wash); color: var(--red); }
.notice--info { background: var(--blue-wash); color: #164a84; }
.notice--ok { background: var(--green-wash); color: var(--green-ink); }

/* ---------- Bill lines editor ---------- */

.lines { display: grid; gap: 10px; }
.line-card { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.line-card__product { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px; }
.line-card__product .grow { flex: 1; min-width: 0; }
.line-card__name { font-weight: 600; }
.line-card__meta { font-size: 13px; color: var(--ink-2); }
.line-card__qty { display: flex; align-items: center; gap: 8px; }
.line-card__qty .input { width: 96px; text-align: center; }
.stepper {
  display: grid; place-items: center; flex: none; width: 44px; height: 48px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface-2);
  font: inherit; font-size: 22px; font-weight: 600; color: var(--ink); cursor: pointer;
}
.stepper:hover { border-color: var(--ink-3); }
.stepper:active { background: var(--green-wash); }
.line-card__total { align-self: center; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.line-card__note { grid-column: 1 / -1; }
.piece { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line-strong); font-size: 12px; font-weight: 600; color: var(--ink-2); vertical-align: middle; white-space: nowrap; }
.tag-weighed { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--blue); }
/* Open items: typed on the bill, not from the product list. */
.tag-open { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 99px; background: var(--amber-wash); color: #6c4100; font-size: 12px; font-weight: 600; white-space: nowrap; }
.line-card--open { border-style: dashed; }
.open-item-add { justify-self: start; margin-top: 2px; }
.open-item .modal__body { display: grid; gap: 12px; }
.open-item .modal__body h2, .open-item .modal__body p { margin: 0; }
.open-item__name { position: relative; }
.open-item__list { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; max-height: 240px; overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 10px 28px rgba(16, 44, 65, .14); }
.open-item__list button { display: grid; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--r-sm); background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.open-item__list button:hover, .open-item__list button:focus-visible { background: var(--surface-2); }
.open-item__list span { font-size: 12.5px; color: var(--ink-2); }

/* ---------- Store entry (cutting station) ---------- */

.weigh-list { display: grid; gap: 12px; }
.weigh {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center;
  padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1.5px solid var(--line);
}
.weigh.is-filled { border-color: #9bd0bb; background: #fbfefd; }
.weigh__name { font-size: 18px; font-weight: 600; line-height: 1.3; }
.weigh__ask { font-size: 14px; color: var(--ink-2); }
.weigh__note { grid-column: 1 / -1; padding: 8px 10px; border-radius: var(--r-sm); background: var(--amber-wash); color: #6c4100; font-size: 14.5px; font-weight: 500; }
.weigh__input { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.weigh__input .input { height: 64px; font-size: 28px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.weigh__unit { min-width: 52px; font-size: 18px; font-weight: 600; color: var(--ink-2); }
.weigh__same { grid-column: 1 / -1; justify-self: start; }
.weigh.is-filled .weigh__same { display: none; }
.weigh__amount { align-self: start; font-weight: 600; font-size: 15px; color: var(--ink-2); text-align: right; min-width: 72px; }
.weigh__quick { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.weigh.is-filled .weigh__quick { display: none; }
.weigh__by { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-3); }
.weigh.is-none { border-color: #f1c3bd; background: #fffafa; }
.weigh.is-none .weigh__amount { color: var(--red); }
.weigh__input .input:disabled { background: var(--surface-2); color: var(--ink); opacity: 1; }
/* Department items that are not weighed: shown with the asked quantity, only to load. */
.work-part { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 18px 2px 10px; font-size: 15px; font-weight: 600; color: var(--ink-2); }
.work-part:first-child, form > .load-list:first-child > .work-part { margin-top: 0; }
.work-part .count { font-size: 12px; padding: 1px 8px; border-radius: 99px; background: var(--surface-2); color: var(--ink-2); }
.work-part small { flex-basis: 100%; font-size: 13px; font-weight: 400; color: var(--ink-3); }
.load-list { display: grid; gap: 10px; }
.load {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center;
  padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); border: 1.5px solid var(--line);
}
.load__main { display: grid; gap: 6px; min-width: 0; }
.load__name { font-size: 17px; font-weight: 600; line-height: 1.3; }
.load__qty { display: flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: var(--r-sm); background: var(--surface-2); white-space: nowrap; }
.load__qty strong { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.load__qty span { font-size: 15px; font-weight: 600; color: var(--ink-2); }
/* One bill for a store person: their items by product category. */
.work-group + .work-group { margin-top: 6px; }
.work-group .work-part { margin: 18px 2px 10px; }
.work-group:first-child .work-part { margin-top: 0; }
.load__sub { font-size: 13px; color: var(--ink-3); }
.load.is-done { background: var(--surface-2); }
.work-dept { display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
@media (min-width: 720px) { .weigh__input { grid-column: auto; } .weigh__input .input { width: 200px; } }

/* ---------- Payment collection ---------- */

.pay-row { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.pay-row:last-child { border-bottom: 0; }
.pay-row input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--green); }
.pay-row__bill strong { display: block; }
.pay-row__bill small { color: var(--ink-2); }
.pay-row__amount { width: 128px; }
.pay-row.is-paid { background: #f7fcfa; }
.amount-input { font-size: 30px !important; font-weight: 600; height: 64px; }
.mode-switch { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--grey-wash); }
.mode-switch label { padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.mode-switch input { position: absolute; opacity: 0; pointer-events: none; }
.mode-switch input:checked + span { color: var(--ink); }
.mode-switch label:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.method-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.method-picker label { position: relative; }
.method-picker input { position: absolute; opacity: 0; }
.method-picker span { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line-strong); font-weight: 600; font-size: 14px; cursor: pointer; background: var(--surface); }
.method-picker input:checked + span { border-color: var(--green); background: var(--green-wash); color: var(--green-ink); }
.method-picker input:focus-visible + span { box-shadow: var(--focus); }

/* ---------- Combobox (search pickers) ---------- */

.combo { position: relative; }
.combo__list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50;
  max-height: 320px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  box-shadow: 0 12px 28px rgba(16, 36, 29, .14);
}
.combo__list[hidden] { display: none; }
.combo__option { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: 10px 12px; border-radius: var(--r-sm); cursor: pointer; }
.combo__option[aria-selected="true"], .combo__option:hover { background: var(--green-wash); }
.combo__option strong { font-weight: 600; }
.combo__option small { grid-column: 1; color: var(--ink-2); display: flex; gap: 12px; }
.combo__option .meta { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 13.5px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.combo__option .meta.due { color: var(--red); }
.combo__option .meta.advance { color: var(--green); }
.combo__empty { padding: 12px; color: var(--ink-2); font-size: 14px; }
.combo-picked { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 8px 8px 14px; border: 1.5px solid var(--green); border-radius: var(--r-md); background: var(--green-wash); }
.combo-picked strong { flex: 1; }

/* ---------- Timeline ---------- */

.timeline { margin: 0; padding: 0; list-style: none; }
.timeline li { position: relative; padding: 0 0 16px 22px; }
.timeline li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.timeline li::after { content: ""; position: absolute; left: 8px; top: 18px; bottom: 0; width: 1px; background: var(--line); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li:last-child::after { display: none; }
.timeline li.is-return::before { background: var(--red); }
.timeline li.is-approve::before { background: var(--green); }
.timeline__what { font-weight: 600; }
.timeline__when { font-size: 13px; color: var(--ink-2); }
.timeline__comment { margin-top: 6px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 14px; }
.timeline li.is-return .timeline__comment { background: var(--red-wash); color: #8a1c13; }

.change-up { color: var(--red); font-weight: 600; }
.change-down { color: var(--green); font-weight: 600; }
.rate-flag { display: inline-block; margin-top: 2px; padding: 1px 8px; border-radius: 999px; background: var(--amber-wash); color: var(--amber); font-size: 12px; font-weight: 600; }

/* ---------- Detail layout ---------- */

.split { display: grid; gap: 16px; }
@media (min-width: 1024px) { .split { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } .split__side { position: sticky; top: 16px; } }

/* ---------- Rights matrix ---------- */

.rights-group { padding: 6px 16px 10px; }
.rights-group + .rights-group { border-top: 1px solid var(--line); }
.rights-group h3 { padding: 10px 0 6px; font-size: 13.5px; color: var(--ink-2); font-weight: 600; }
.rights-group .check { padding: 8px 0; }
.rights-group .check.is-inherited { color: var(--ink-2); }

/* ---------- Dialog ---------- */

dialog.modal { width: min(480px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: var(--r-lg); box-shadow: 0 24px 60px rgba(10, 30, 22, .28); color: var(--ink); }
dialog.modal::backdrop { background: rgba(13, 26, 21, .45); }
.modal__body { padding: 20px; display: grid; gap: 14px; }
.modal__body h2 { font-size: 18px; }
.modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 18px; }

/* ---------- Toasts ---------- */

.toasts { position: fixed; left: 50%; top: 12px; z-index: 100; display: grid; gap: 8px; width: min(440px, calc(100vw - 24px)); transform: translateX(-50%); pointer-events: none; }
.toast {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 12px;
  background: var(--ink); color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
  pointer-events: auto; animation: toast-in .18s ease-out;
}
.toast--error { background: #8f1d14; }
.toast a { color: #b8f0d9; font-weight: 600; }
.toast__text { flex: 1; font-size: 14.5px; }
.toast__text strong { display: block; }
.toast button { border: 0; background: none; color: inherit; opacity: .7; cursor: pointer; padding: 0; }
@keyframes toast-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }

.live-bar { display: none; align-items: center; gap: 10px; margin-bottom: 12px; padding: 10px 14px; border-radius: var(--r-md); background: var(--blue-wash); color: #164a84; font-weight: 500; }
.live-bar.is-shown { display: flex; }
.live-bar button { margin-left: auto; }

/* ---------- Sign-in ---------- */

.auth {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px;
  background: var(--paper);
}
.auth__card { width: min(400px, 100%); padding: 28px 24px 24px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-pop); }
.auth__brand { display: grid; justify-items: center; gap: 10px; margin-bottom: 8px; text-align: center; }
.auth__brand img { width: 150px; height: auto; }
.auth__brand small { color: var(--ink-2); font-size: 14px; }
/* The logo's four produce colours as a thin band across the top of the card. */
.auth__card { position: relative; overflow: hidden; }
.auth__card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, var(--tile-greens) 0 25%, var(--tile-fish) 25% 50%, var(--tile-poultry) 50% 75%, var(--tile-meat) 75%);
}
.auth__card--wide { width: min(560px, 100%); }

/* ---------- Public cash memo (bill / receipt opened from a link) ---------- */

.memo-page { min-height: 100vh; padding: 20px 12px 40px; background: var(--paper); }
.memo { max-width: 640px; margin: 0 auto; background: var(--surface); border-radius: 4px 4px 0 0; filter: drop-shadow(0 6px 16px rgba(16, 36, 29, .10)); }
.memo::after {
  /* torn paper edge */
  content: ""; display: block; height: 14px;
  background: linear-gradient(-45deg, transparent 10px, var(--surface) 0) 0 0 / 20px 14px repeat-x,
              linear-gradient(45deg, transparent 10px, var(--surface) 0) 10px 0 / 20px 14px repeat-x;
}
.memo__band { padding: 18px 20px 16px; background: var(--navy); color: #fff; border-radius: 4px 4px 0 0; }
.memo__band h1 { font-size: 20px; }
.memo__band p { color: #c9dceb; font-size: 13.5px; }
.memo__title { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 16px 20px; border-bottom: 1px dashed var(--line-strong); }
.memo__title h2 { font-size: 22px; letter-spacing: .01em; }
.memo__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 20px; border-bottom: 1px dashed var(--line-strong); font-size: 14px; }
.memo__meta .label { font-size: 12.5px; color: var(--ink-2); font-weight: 500; display: block; }
.memo__section { padding: 14px 20px; }
.memo__section + .memo__section { border-top: 1px dashed var(--line-strong); }
.memo__group { margin: 10px 0 4px; font-size: 13px; font-weight: 600; color: var(--green-ink); }
.memo__line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 7px 0; border-bottom: 1px solid #eef2f0; }
.memo__line:last-child { border-bottom: 0; }
.memo__line small { color: var(--ink-2); }
.memo__line .num { align-self: center; font-weight: 600; }
.memo__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; font-size: 18px; font-weight: 700; }
.memo__summary { margin: 0; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-2); }
.memo__stamp { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border: 2px solid currentColor; border-radius: 6px; font-weight: 700; font-size: 13px; transform: rotate(-4deg); }
.memo__stamp--ok { color: var(--green); }
.memo__stamp--pending { color: var(--amber); }
.memo__foot { padding: 14px 20px 18px; font-size: 13px; color: var(--ink-2); text-align: center; }
.memo-actions { max-width: 640px; margin: 18px auto 0; display: flex; gap: 8px; justify-content: center; }

/* ---------- Print ---------- */

@media print {
  body { background: #fff; font-size: 12px; }
  .sidebar, .drawer-backdrop, .tabbar, .no-print, .action-bar, .toasts, .pager, .toolbar, .tabs, .page-head__actions, .memo-actions { display: none !important; }
  .shell { display: block; }
  .page { padding: 0; max-width: none; }
  .panel { border: 0; }
  .dt th, .dt td { padding: 6px 8px; }
  .memo-page { padding: 0; background: #fff; }
  .memo { filter: none; max-width: none; }
  .memo__band { background: #fff; color: #000; border-bottom: 2px solid #000; }
  .memo__band p { color: #333; }
  a { color: inherit; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Brand, company and branch ---------- */

.icon--xs { width: 12px; height: 12px; }


/* ---------- Product photos ---------- */

.with-thumb { display: flex; align-items: center; gap: 12px; min-width: 0; }
.with-thumb > div { min-width: 0; }
.thumb { width: 44px; height: 44px; flex: none; border-radius: 10px; object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); }
.thumb--empty { display: grid; place-items: center; color: var(--ink-3); }
.photo-panel { margin-top: 16px; display: grid; gap: 12px; }
.photo-panel__row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.photo-panel__img { width: 112px; height: 112px; border-radius: var(--r-lg); object-fit: cover; border: 1px solid var(--line); background: var(--surface-2); }
.photo-panel__img--empty { display: grid; place-items: center; color: var(--ink-3); }
.photo-panel__img--empty .icon { width: 32px; height: 32px; }
.photo-panel__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.photo-panel__actions .hint { flex-basis: 100%; }
.upload-form label.btn { cursor: pointer; }
.logo-preview { width: 112px; height: 112px; border-radius: var(--r-lg); object-fit: contain; border: 1px solid var(--line); background: #fff; padding: 8px; }

/* ---------- Choice lists (branch switcher) ---------- */

.choice-list { display: grid; gap: 8px; }
.choice {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.choice:hover { border-color: var(--green); }
.choice.is-current { border-color: var(--green); background: var(--green-wash); }
.choice__text { flex: 1; min-width: 0; }
.choice__text strong { display: block; }
.choice__text small { color: var(--ink-2); }

/* ---------- Public memo header with company logo ---------- */

.memo__brand { display: flex; align-items: center; gap: 12px; }
.memo__logo { width: 48px; height: 48px; flex: none; border-radius: 10px; object-fit: contain; background: #fff; padding: 4px; }

/* ---------- Error page reference ---------- */

.error-ref { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------- Grouped check boxes ---------- */

.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset legend { padding: 0; margin-bottom: 6px; font-weight: 500; font-size: 14px; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 12px; }
.check--compact { padding: 8px 10px; }
.form-section { font-size: 15px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }



/* ---------- Customer's account under a receipt, and the public statement ---------- */

.memo-ledger { max-width: 640px; margin: 20px auto 0; }
.memo-ledger__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.memo-ledger__head h2 { font-size: 17px; }
.memo-ledger .toolbar { margin-bottom: 10px; }
.memo-note { max-width: 640px; margin: 16px auto 0; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--ink-2); font-size: 13.5px; text-align: center; }

/* ---------- Company and branch (top of the side menu), account menu (foot) ---------- */

.scope { display: grid; gap: 2px; margin: 0 0 8px; padding: 4px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.scope.is-busy { opacity: .6; pointer-events: none; }
.scope > .dd { min-width: 0; }

.dd { position: relative; }
.dd > summary { list-style: none; }
.dd > summary::-webkit-details-marker { display: none; }
.dd__btn {
  display: flex; align-items: center; gap: 9px; min-width: 0; width: 100%;
  min-height: 40px; padding: 3px 8px 3px 4px; border-radius: var(--r-sm);
  background: transparent; border: 1px solid transparent; color: var(--ink);
  cursor: pointer; user-select: none;
}
.dd__btn:hover { background: var(--surface); border-color: var(--line); }
.dd[open] > .dd__btn, .dd__btn:focus-visible { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(18, 69, 104, .14); outline: 0; }
.dd--locked .dd__btn { cursor: default; background: transparent; border-color: transparent; }
.dd--locked .dd__btn:hover { border-color: transparent; }
.dd__mark {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px;
  background: var(--surface); color: var(--navy); border: 1px solid var(--line);
}
.dd__mark--logo { object-fit: contain; background: #fff; border: 1px solid var(--line); padding: 2px; }
.dd__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.dd__text small { font-size: 11.5px; color: var(--ink-3); }
.dd__text strong { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd__chevron { color: var(--ink-3); flex: none; margin-left: auto; transition: transform .15s; }
.dd[open] .dd__chevron { transform: rotate(180deg); }
.dd__lock { color: var(--ink-3); flex: none; margin-left: auto; opacity: .6; }

.dd__menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 80;
  max-height: min(420px, 60vh); overflow-y: auto;
  padding: 6px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
}
.dd--up .dd__menu { top: auto; bottom: calc(100% + 6px); }
.dd__search { display: flex; align-items: center; gap: 8px; margin: 2px 2px 6px; padding: 0 10px; height: 38px; border-radius: 10px; background: var(--surface-2); color: var(--ink-3); }
.dd__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ink); }
.dd__item {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px;
  border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer;
}
.dd__item:hover:not(:disabled) { background: var(--surface-2); text-decoration: none; }
.dd__item .icon { color: var(--ink-3); flex: none; }
.dd__item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dd__item-text small { color: var(--ink-3); font-size: 12px; }
.dd__item.is-current { background: var(--navy-wash); color: var(--navy); cursor: default; font-weight: 600; }
.dd__item.is-current .icon { color: var(--navy); }
.dd__tick { margin-left: auto; }
.dd__item--danger { color: var(--red); }
.dd__item--danger .icon { color: var(--red); }
.dd__menu form { margin: 0; }
.dd__head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.dd__head strong { display: block; font-size: 14.5px; }
.dd__head small { color: var(--ink-3); font-size: 12.5px; }

.me { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 4px 6px; border-radius: var(--r-md); cursor: pointer; }
.me:hover { background: var(--surface-2); }
.dd[open] > .me { background: var(--surface-2); }
.me__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.me__text strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me__text small { font-size: 12.5px; color: var(--ink-3); }
.avatar {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--navy); color: #fff; font-weight: 600; font-size: 13.5px; letter-spacing: .02em;
}
.avatar--lg { width: 42px; height: 42px; font-size: 15px; }

/* ---------- Departments: weighing progress on a bill ---------- */

.dept-list { list-style: none; margin: 0; padding: 0; }
.dept { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.dept:last-child { border-bottom: 0; }
.dept__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--blue-wash); color: var(--blue); }
.dept--approved .dept__icon { background: var(--green-wash); color: var(--green); }
.dept--review .dept__icon { background: var(--amber-wash); color: var(--amber); }
.dept--returned .dept__icon { background: var(--red-wash); color: var(--red); }
.dept__main { flex: 1; min-width: 0; }
.dept__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-weight: 600; }
.dept__meta { margin-top: 2px; font-size: 13px; color: var(--ink-2); }
.dept__note { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; padding: 6px 8px; border-radius: var(--r-sm); background: var(--red-wash); color: var(--red); font-size: 13.5px; }
.dept .btn { flex: none; align-self: center; }
.tag-manager {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--amber-wash); color: var(--amber); font-size: 11.5px; font-weight: 600; vertical-align: middle; white-space: nowrap;
}
.progress-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--blue); white-space: nowrap; }
.progress-pill.is-done { color: var(--green-ink); }
.line-card__dept { display: inline-block; margin-left: 6px; font-size: 12px; color: var(--ink-3); }

/* ---------- Department work queue ---------- */

.work-list { display: grid; gap: 10px; }
@media (min-width: 900px) { .work-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.work {
  display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--green);
  color: inherit; text-decoration: none; transition: box-shadow .15s, border-color .15s;
}
.work:hover { box-shadow: 0 4px 14px rgba(22, 36, 45, .08); }
.work:active { transform: scale(.995); }
.work--soon { border-left-color: #d99a2b; }
.work--late { border-left-color: var(--red); }
.work--back { border-left-color: var(--red); background: #fffafa; }
.work__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.work__customer { font-size: 17px; line-height: 1.3; }
.work__time { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.work--soon .work__time { color: var(--amber); }
.work--late .work__time { color: var(--red); }
.work__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13.5px; color: var(--ink-2); }
.work__dept { font-weight: 600; color: var(--ink); }
.work__note { display: flex; gap: 6px; align-items: flex-start; font-size: 13.5px; color: var(--red); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 500;
  text-decoration: none; cursor: pointer; font-family: inherit;
}
.chip:hover { border-color: var(--green); }
.chip.is-active { background: var(--green); border-color: var(--green); color: #fff; }
.chips--sm { margin: 8px 0 0; gap: 6px; }
.chips--sm .chip { min-height: 30px; padding: 0 10px; font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------- Discounts ---------- */

.discount-list { list-style: none; margin: 0; padding: 0; }
.discount { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.discount:last-child { border-bottom: 0; }
.discount__main { flex: 1 1 220px; min-width: 0; }
.discount__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.discount__title .num { color: var(--red); }
.discount__meta { margin-top: 2px; font-size: 13px; color: var(--ink-2); }
.discount__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.discount.is-cancelled { opacity: .7; }
.discount.is-cancelled .discount__title .num { text-decoration: line-through; color: var(--ink-3); }

.discount-lines { display: grid; }
.discount-line {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.discount-line:last-child { border-bottom: 0; }
.discount-line.is-picked { background: #fffaf5; }
.discount-line__item strong { display: block; }
.discount-line__item small { color: var(--ink-2); font-size: 13px; }
.discount-line__qty { grid-column: 1; display: flex; align-items: center; gap: 8px; }
.discount-line__qty .input { width: 120px; }
.discount-line__amount { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 600; color: var(--ink-2); text-align: right; min-width: 80px; }
@media (min-width: 720px) {
  .discount-line { grid-template-columns: 1fr auto 110px; }
  .discount-line__qty { grid-column: 2; }
  .discount-line__amount { grid-column: 3; grid-row: 1; }
}

.disclose { border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding: 10px 12px; margin: 12px 0; }
.disclose > summary { display: flex; align-items: center; gap: 6px; cursor: pointer; font-weight: 500; color: var(--green-ink); list-style: none; }
.disclose > summary::-webkit-details-marker { display: none; }

.figure__action { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-weight: 600; }

/* ---------- WhatsApp ---------- */

.btn--whatsapp { background: #1f8f4e; border-color: #1f8f4e; color: #fff; }
.btn--whatsapp:hover { background: #18773f; border-color: #18773f; color: #fff; }

.template-list { display: grid; gap: 16px; }
.template .panel__head h2 { display: flex; align-items: center; gap: 8px; }
.template__grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .template__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.template__grid > .field { align-content: start; }
.template__text { font-size: 14.5px; line-height: 1.5; }
.wa-preview { padding: 14px; border-radius: var(--r-lg); background: #e9e4dc; min-height: 120px; }
.wa-bubble {
  max-width: 100%; padding: 10px 12px; border-radius: 10px 10px 10px 2px; background: #dcf8c6;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08); white-space: pre-wrap; word-break: break-word; font-size: 14.5px; line-height: 1.45;
}
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Discount: amount or percent, with a suggestion from the bad items ---------- */
.field__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.field__row > label { margin: 0; }
.mode-switch--sm label { padding: 4px 12px; font-size: 13px; }
.hint--error { color: var(--red); font-weight: 600; }
.discount-suggest {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--line); background: var(--green-wash); font-size: 14px;
}

/* ---------- Audit log: the values sent with a change ---------- */
.kv--data { grid-template-columns: minmax(90px, max-content) minmax(0, 1fr); }
.kv--data dd { min-width: 0; text-align: left; font-weight: 400; overflow-wrap: anywhere; }
.split > * { min-width: 0; }
.kv--data .kv--data { padding: 6px 0 2px 10px; border-left: 2px solid var(--line); }
.dt--data th, .dt--data td { padding: 6px 10px; font-size: 13.5px; white-space: nowrap; }
.dt--data th { text-transform: none; letter-spacing: 0; }
.audit-data .table-wrap { border: 1px solid var(--line); border-radius: var(--r-md); }
.audit-path, .audit-raw { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; overflow-wrap: anywhere; }
.audit-raw { white-space: pre-wrap; margin: 0; }

/* Filter rows (sign-in history, audit log): dropdowns share the row with the search on wider screens. */
@media (min-width: 720px) { .toolbar--filters .select { flex: 0 1 220px; width: auto; min-width: 160px; } }
.dt .c-note { font-size: 13px; color: var(--ink-2); }
@media (max-width: 719px) { .dt--stack td.c-note { flex-basis: 100%; color: var(--red); } }

/* Super admin looking at every company or branch (reading only). */
.wide-note { margin-bottom: 12px; }
@media (max-width: 719px) { .wide-note { font-size: 13.5px; } }

/* ---------- Number boxes with ▲ ▼ (the mouse wheel never changes a number) ---------- */
.num-step { display: flex; align-items: stretch; min-width: 0; }
.num-step > .input { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.num-step__btns {
  display: grid; grid-template-rows: 1fr 1fr; flex: 0 0 34px;
  border: 1.5px solid var(--line-strong); border-left: 0; border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--surface-2); overflow: hidden;
}
.num-step__btns button {
  display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--ink-2);
  cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.num-step__btns button + button { border-top: 1px solid var(--line); }
.num-step__btns button:hover { background: var(--line); color: var(--ink); }
.num-step__btns button:active { background: var(--green-wash); color: var(--green-ink); }
.num-step__btns .icon { width: 15px; height: 15px; }
.num-step:focus-within > .input, .num-step:focus-within .num-step__btns { border-color: var(--green); }
.num-step:focus-within > .input { box-shadow: none; }
.num-step:focus-within { border-radius: var(--r-md); box-shadow: var(--focus); }
.num-step:has(> .input[readonly]) .num-step__btns, .num-step:has(> .input:disabled) .num-step__btns { opacity: .45; pointer-events: none; }
.num-step--sm .num-step__btns { flex-basis: 30px; }
@media (pointer: coarse) { .num-step__btns { flex-basis: 40px; } .num-step--sm .num-step__btns { flex-basis: 36px; } }

/* ---------- Tighter pages and forms (more on one screen) ---------- */
.page-head--tight { margin-bottom: 10px; }
.form--tight { gap: 10px; }
.panel__head--tight { padding: 8px 12px; }
.panel__head h2 .count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--grey-wash); color: var(--ink-2); font-size: 12.5px; font-weight: 600; vertical-align: 2px; }
.note-toggle > summary { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; color: var(--ink-2); font-size: 14px; font-weight: 500; cursor: pointer; list-style: none; }
.note-toggle > summary::-webkit-details-marker { display: none; }
.note-toggle[open] > summary { display: none; }

/* ---------- Collect payment ---------- */
.collect-pill { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--red); white-space: nowrap; }
.collect-who {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.collect-who__name { flex: 1; min-width: 0; line-height: 1.3; }
.collect-who__name strong { display: block; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.collect-who__name small, .collect-who__owed small { color: var(--ink-2); font-size: 13px; }
.collect-who__owed { text-align: right; line-height: 1.2; }
.collect-who__owed strong { display: block; font-size: 20px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.collect-pay { display: grid; gap: 10px; padding: 12px 14px; }
.collect-pay .amount-input { height: 56px; font-size: 28px !important; }
.quick-fill { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -2px; }
.quick-fill .chip { min-height: 32px; padding: 0 12px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.quick-fill .chip:active { background: var(--green-wash); }

.pay-row { grid-template-columns: auto minmax(0, 1fr) 150px; gap: 10px; padding: 9px 12px; }
.pay-row__bill { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; min-width: 0; }
.pay-row__no { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pay-row__no a { white-space: nowrap; }
.pay-row__no a { font-weight: 600; color: var(--ink); }
.pay-row__no small { color: var(--ink-2); font-size: 13px; }
.pay-row__due { font-weight: 600; color: var(--red); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pay-row__due small { color: var(--ink-3); font-weight: 400; font-size: 12.5px; }
.pay-row .num-step { width: 150px; }
.pay-row__amount { width: auto; }
.collect-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.collect-sum > div { padding: 9px 12px; line-height: 1.25; min-width: 0; }
.collect-sum > div + div { border-left: 1px solid var(--line); }
.collect-sum small { display: block; color: var(--ink-2); font-size: 12.5px; }
.collect-sum strong { font-variant-numeric: tabular-nums; font-size: 15px; }
.collect-sum .bal { font-size: 15px; white-space: normal; }
.collect-error { margin: 0; padding: 8px 12px; }
@media (max-width: 719px) {
  .collect-who { padding: 9px 8px 9px 12px; gap: 8px; }
  .collect-who__owed strong { font-size: 18px; }
  .pay-row { grid-template-columns: auto minmax(0, 1fr) 128px; gap: 8px; padding: 8px 10px; }
  .pay-row__bill { display: block; }
  .pay-row__no { flex-wrap: wrap; gap: 0 6px; }
  .pay-row__no a { white-space: nowrap; }
  .pay-row__no small { font-size: 12px; }
  .pay-row__due { display: block; font-size: 14.5px; }
  .collect-pay + .panel .panel__head h2 { font-size: 16px; white-space: nowrap; }
  .collect-pay + .panel .mode-switch label { padding: 5px 10px; font-size: 13px; }
  .collect-pay .method-picker span { height: 36px; padding: 0 12px; font-size: 13.5px; }
  .collect-pay .amount-input { height: 52px; font-size: 26px !important; }
  .pay-row .num-step { width: 128px; }
  .collect-sum > div { padding: 8px 9px; }
  .collect-sum small { font-size: 11.5px; }
  .collect-sum strong, .collect-sum .bal { font-size: 13.5px; }
}

/* ---------- Phones: a little less air everywhere, so more fits on one screen ---------- */
@media (max-width: 719px) {
  .page-head { margin-bottom: 10px; }
  .form { gap: 12px; }
  .panel__body { padding: 12px; }
  .panel__head { padding: 9px 12px; }
  .section-title { margin: 16px 0 8px; }
}

/* Date filter: quick ranges first, then any two dates. */
.date-filter > summary.is-set { border-color: var(--green); color: var(--green-ink); }
.date-filter__quick { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.date-filter__quick .chip { min-height: 32px; padding: 0 12px; font-size: 13.5px; }

/* ---------- My work stands out in green (where store and counter people do their job) ---------- */
.nav-link--work { color: var(--green-ink); font-weight: 600; }
.nav-link--work .icon { color: var(--green); }
.nav-link--work:hover { background: var(--green-wash); color: var(--green-ink); }
.nav-link--work.is-active { background: var(--green); color: #fff; }
.nav-link--work.is-active .icon { color: #fff; }
.nav-link--work.is-active::before { background: var(--green); }
.tabbar a.tab-work { color: var(--green-ink); }
.tabbar a.tab-work .icon { color: var(--green); }
.tabbar a.tab-work.is-active { color: var(--green-ink); }
.tabbar a.tab-work.is-active::before { background: var(--green); }
.page--work .page-head h1 { color: var(--green-ink); }
.approve-strip {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 10px 14px; border-radius: var(--r-md);
  background: var(--amber-wash); color: #6c4100; font-size: 14.5px; text-decoration: none;
}
.approve-strip span { flex: 1; }
.approve-strip:hover { text-decoration: none; filter: brightness(.98); }

/* ---------- Dashboard (super admin and admins) ---------- */

/* Title, where (company and branch), the dates, and the period picker */
.dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin-bottom: 14px; padding-right: 50px; }
.dash-head__title { flex: 1 1 auto; min-width: 0; }
.dash-head__title h1 { font-size: 24px; line-height: 1.2; letter-spacing: -.01em; }
.dash-head__title p { display: flex; flex-wrap: wrap; gap: 2px 0; margin-top: 3px; font-size: 13.5px; color: var(--ink-2); }
.dash-head__dates::before { content: "·"; margin: 0 7px; color: var(--ink-3); }

.period { position: relative; flex: none; }
.period > summary { list-style: none; }
.period > summary::-webkit-details-marker { display: none; }
.period__btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 13px; cursor: pointer; user-select: none;
  border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-1);
  font-size: 14.5px; font-weight: 600; color: var(--ink);
}
.period__btn .icon { width: 17px; height: 17px; color: var(--green); }
.period__btn .period__chev { width: 16px; height: 16px; color: var(--ink-3); transition: transform .15s; }
.period[open] > .period__btn { border-color: var(--green); box-shadow: var(--focus); }
.period[open] .period__chev { transform: rotate(180deg); }
.period__btn:focus-visible { outline: 0; border-color: var(--green); box-shadow: var(--focus); }
.period__menu {
  position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; width: 340px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
}
.period__item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--r-sm); color: var(--ink); font-size: 14.5px; }
.period__item:hover { background: var(--surface-2); text-decoration: none; }
.period__item small { margin-left: auto; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.period__item.is-current { background: var(--green-wash); color: var(--green-ink); font-weight: 600; }
.period__item.is-current small { color: var(--green-ink); }
.period__check { width: 16px; height: 16px; flex: none; }
.period__custom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 6px; padding: 10px 4px 4px; border-top: 1px solid var(--line); }
.period__custom-head { grid-column: 1 / -1; padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.period__custom .field { margin: 0; }
.period__custom .input { min-width: 0; width: 100%; padding-left: 10px; padding-right: 6px; }
.period__custom .btn { grid-column: 1 / -1; }

/* Shortcuts to the daily jobs: one row of buttons (on phones it scrolls sideways) */
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.action {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-1);
  color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap;
}
.action .icon { width: 17px; height: 17px; color: var(--green); }
.action:hover { border-color: var(--line-strong); text-decoration: none; }
.action--primary { background: var(--green); border-color: var(--green); color: #fff; }
.action--primary .icon { color: #fff; }
.action--primary:hover { background: var(--green-ink); border-color: var(--green-ink); }
.action__count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }

/* Key figures: label, value, change against the period before, and a footnote */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 1100px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px 13px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.kpi__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.kpi__label { font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.kpi__value { font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin-top: auto; padding-top: 4px; font-size: 12.5px; color: var(--ink-3); }
.kpi__foot a { font-weight: 500; }
.kpi__tag { padding: 1px 8px; border-radius: 999px; background: var(--navy-wash); color: var(--navy); font-size: 11.5px; font-weight: 600; }
.kpis__note { margin: 8px 2px 0; font-size: 12px; color: var(--ink-3); }

.delta { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.delta .icon { width: 13px; height: 13px; }
.delta--up { background: var(--green-wash); color: var(--green-ink); }
.delta--down { background: var(--red-wash); color: var(--red); }
.delta--flat, .delta--new { background: var(--grey-wash); color: var(--ink-2); }

/* Card grids */
.dash-grid { display: grid; gap: 12px; margin-top: 12px; }
.dash-grid > .panel { margin: 0; }
@media (min-width: 1100px) { .dash-grid--main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
@media (min-width: 760px) { .dash-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
@media (min-width: 1100px) { .dash-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 760px) and (max-width: 1099px) { .dash-grid--three > :last-child:nth-child(odd) { grid-column: 1 / -1; } }

.dash-card { display: flex; flex-direction: column; min-width: 0; }
.dash-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px 8px; }
.dash-card__head h2 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; line-height: 1.3; }
.dash-card__head p { margin-top: 2px; font-size: 12.5px; color: var(--ink-3); }
.dash-card__head .count { padding: 0 7px; border-radius: 999px; background: var(--grey-wash); color: var(--ink-2); font-size: 12px; font-weight: 600; line-height: 20px; }
.dash-card__link { display: inline-flex; align-items: center; gap: 3px; flex: none; padding-top: 1px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.dash-card__link .icon { width: 14px; height: 14px; }
.dash-card__total { display: flex; justify-content: space-between; gap: 12px; margin-top: auto; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.dash-card__total strong { color: var(--ink); font-weight: 600; }
.dash-card .queue-item:first-of-type { border-top: 1px solid var(--line); }
.dash-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; flex: 1; min-height: 120px; padding: 22px 16px 26px; text-align: center; font-size: 13.5px; color: var(--ink-3); }
.dash-empty .icon { width: 22px; height: 22px; color: var(--line-strong); }
.dash-section-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 22px 2px 0; }
.dash-section-title h2 { font-size: 16px; font-weight: 600; }
.dash-section-title span { font-size: 12.5px; color: var(--ink-3); }
.dash-foot { margin-top: 14px; font-size: 13.5px; color: var(--ink-2); }

/* Ranked bars: one series per card, one colour; values in text colour beside each name */
.rank { list-style: none; margin: 0; padding: 2px 0 10px; counter-reset: rank; }
.rank li { position: relative; padding: 7px 16px; counter-increment: rank; }
.rank li:has(> a) { padding: 0; }
.rank li > a { display: block; padding: 7px 16px; color: var(--ink); }
.rank li > a:hover { background: var(--surface-2); text-decoration: none; }
.rank--numbered li { padding-left: 46px; }
.rank--numbered li:has(> a) { padding-left: 0; }
.rank--numbered li > a { padding-left: 46px; }
.rank--numbered li::before {
  content: counter(rank); position: absolute; left: 16px; top: 9px; width: 20px; height: 20px; border-radius: 6px;
  background: var(--grey-wash); color: var(--ink-2); font-size: 11.5px; font-weight: 600; line-height: 20px; text-align: center;
}
.rank__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rank__name { min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.rank__name, .rank__name small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank__name small, .rank__val small { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: var(--ink-3); }
.rank__val { flex: none; font-size: 14px; font-weight: 600; line-height: 1.3; text-align: right; font-variant-numeric: tabular-nums; }
.rank__track { display: block; height: 6px; margin-top: 7px; border-radius: 3px; background: var(--grey-wash); overflow: hidden; }
.rank__bar { display: block; height: 100%; min-width: 2px; border-radius: 3px; background: var(--green); }

/* Columns: one series (net sales), one colour; the highest bar labelled; hover or focus shows the details. */
.colchart { --chart-h: 196px; padding: 14px 16px 14px 56px; }
.colchart__plot { position: relative; height: var(--chart-h); }
.colchart__grid span {
  position: absolute; left: -48px; width: calc(100% + 48px); transform: translateY(50%);
  display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.colchart__grid span::before { content: ""; order: 2; flex: 1; border-top: 1px solid var(--line); }
.colchart__grid span:last-child::before { border-top-color: var(--line-strong); }
.colchart__bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 4px; }
.colchart--dense .colchart__bars, .colchart--dense .colchart__x { gap: 2px; }
.colchart__col { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; outline: none; cursor: default; }
.colchart__bar { display: block; width: 100%; max-width: 24px; margin: 0 auto; border-radius: 4px 4px 0 0; background: var(--green); }
.colchart__bar[style="height:0%"] { display: none; }
.colchart__col:hover .colchart__bar, .colchart__col:focus-visible .colchart__bar { background: var(--green-ink); }
.colchart__col:hover::after, .colchart__col:focus-visible::after { content: ""; position: absolute; inset: 0 -1px; z-index: -1; border-radius: 4px; background: var(--surface-2); }
.colchart__label { position: absolute; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.colchart__col:hover .colchart__label, .colchart__col:focus-visible .colchart__label { visibility: hidden; }
.colchart__tip {
  position: absolute; z-index: 5; bottom: calc(100% + 8px); display: none; min-width: 168px; padding: 8px 11px;
  border-radius: 8px; background: var(--ink); color: #fff; font-size: 12.5px; line-height: 1.45; white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18); pointer-events: none;
}
.tip-right .colchart__tip { left: 0; }
.tip-left .colchart__tip { right: 0; }
.colchart__tip strong { display: block; margin-bottom: 3px; font-weight: 600; }
.colchart__tip .tip-row { display: flex; justify-content: space-between; gap: 16px; }
.colchart__tip .tip-row span { color: rgba(255, 255, 255, .72); }
.colchart__tip .tip-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.colchart__col:hover .colchart__tip, .colchart__col:focus-visible .colchart__tip { display: block; }
.colchart__x { display: flex; gap: 4px; margin-top: 7px; }
.colchart__x span { flex: 1; min-width: 0; text-align: center; font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: visible; }
.colchart__x span.is-off { visibility: hidden; }
.colchart__x span.is-today { color: var(--ink); font-weight: 600; }

@media (max-width: 719px) {
  .dash-head { padding-right: 46px; margin-bottom: 12px; }
  .dash-head__title h1 { font-size: 21px; }
  .period { flex: 1 1 100%; order: 3; margin-right: -46px; }
  .period__btn { width: 100%; }
  .period__btn .period__chev { margin-left: auto; }
  .period__menu { left: 0; right: 0; width: auto; }
  /* One row of shortcuts that scrolls sideways, edge to edge */
  .actions { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px 12px; padding: 0 14px 2px; scrollbar-width: none; }
  .actions::-webkit-scrollbar { display: none; }
  .action { flex: none; height: 38px; padding: 0 12px; font-size: 13.5px; }
  .kpis { gap: 8px; }
  .kpi { padding: 11px 12px; }
  .kpi__value { font-size: 21px; }
  .kpi__label { font-size: 12.5px; }
  .delta { padding: 1px 6px; font-size: 11.5px; }
  .delta .icon { display: none; }
  .kpi__foot { font-size: 12px; }
  .dash-card__head { padding: 12px 14px 6px; }
  .rank li, .rank li > a { padding-left: 14px; padding-right: 14px; }
  .rank--numbered li, .rank--numbered li > a { padding-left: 42px; }
  .rank--numbered li:has(> a) { padding-left: 0; }
  .rank--numbered li::before { left: 14px; }
  .colchart { --chart-h: 156px; padding: 10px 12px 12px 44px; }
  .colchart__grid span { left: -38px; width: calc(100% + 38px); font-size: 10.5px; gap: 6px; }
  .colchart__bars, .colchart__x { gap: 2px; }
  .colchart__x span { font-size: 10.5px; }
  .colchart__x span.is-off-sm { visibility: hidden; }
  .colchart__tip { min-width: 150px; }
}
@media (max-width: 380px) { .kpi__value { font-size: 19px; } }
.page--work .tab.is-active { background: var(--green); border-color: var(--green); }

/* ---------- Locations (Settings): add in one line; rename and delete open small forms on the row ---------- */
.loc-add { display: flex; align-items: flex-end; gap: 10px; }
.loc-add .field { flex: 1; margin: 0; }
.loc-list { list-style: none; margin: 0; padding: 0; }
.loc { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.loc:last-child { border-bottom: 0; }
.loc__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--green-wash); color: var(--green); }
.loc__icon .icon { width: 17px; height: 17px; }
.loc__main { flex: 1; min-width: 0; }
.loc__main strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loc__count { font-size: 13px; color: var(--ink-2); }
.loc__actions { display: flex; gap: 6px; flex: none; }
.loc__more { position: relative; }
.loc__more > summary { list-style: none; }
.loc__more > summary::-webkit-details-marker { display: none; }
.loc__pop {
  position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; display: grid; gap: 10px; width: 260px; padding: 12px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-pop);
}
.loc__pop .field { margin: 0; }
.loc__pop p { margin: 0; font-size: 14px; }
.loc__actions .btn[disabled] { opacity: .45; cursor: not-allowed; }
@media (max-width: 479px) {
  .loc { flex-wrap: wrap; }
  .loc__actions { width: 100%; padding-left: 46px; }
  .loc__pop { left: 0; right: auto; width: min(260px, calc(100vw - 40px)); }
  .loc-add { flex-wrap: wrap; } .loc-add .btn { width: 100%; }
}
/* Customer list: the location has its own column; on phones (column hidden) it follows the mobile number. */
.loc-inline { display: none; }
@media (max-width: 719px) { .dt--stack .loc-inline { display: inline; } }
.toolbar__select { flex: 0 1 220px; min-width: 0; }
.toolbar__select .select { width: 100%; }
/* Products sold in one big bag shared by several customers */
.tag-bulk { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--amber); white-space: nowrap; }
.tag-bulk--inline { margin-left: 8px; }
@media (min-width: 720px) { .tag-bulk--inline { display: none; } }

/* ---------- Deliveries ---------- */
.dlv-progress { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.dlv-progress__bar { position: relative; display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--grey-wash); overflow: hidden; }
.dlv-progress__bar > span { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--blue); }
.dlv-progress.is-done { color: var(--green-ink); font-weight: 600; }
.dlv-progress.is-done .dlv-progress__bar > span { background: var(--green); }
.dlv-progress .icon { width: 14px; height: 14px; margin-right: 3px; vertical-align: -2px; }
.dlv-progress--lg { flex: 1 1 200px; font-size: 14px; font-weight: 600; color: var(--ink); }
.dlv-progress--lg .dlv-progress__bar { flex: 1; width: auto; height: 10px; border-radius: 5px; }

.dlv-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.dlv-range__quick { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; }
.dlv-range__quick .chip { min-height: 32px; padding: 0 12px; font-size: 13.5px; }
.dlv-range__dates { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.dlv-range__dates .field { margin: 0; }
.dlv-new { margin-top: 12px; }
.dlv-new__fields { margin-bottom: 12px; }
/* New delivery: one list of bills (location on each row), filtered by date and by one or more locations */
.dlv-list { margin-top: 12px; overflow: hidden; }
.dlv-list input[type=checkbox] { width: 20px; height: 20px; flex: none; accent-color: var(--green); }
.dlv-list__head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13px; color: var(--ink-2); }
.dlv-list__title { flex: 1; font-weight: 600; color: var(--ink); font-size: 14.5px; }
.dlv-list__title .count { margin-left: 4px; padding: 0 7px; border-radius: 999px; background: var(--grey-wash); font-size: 12px; color: var(--ink-2); }
.dlv-list__col--loc { width: 170px; }
.dlv-list__col--amt { width: 96px; text-align: right; }
.dlv-pick__loc { display: inline-flex; align-items: center; gap: 5px; width: 170px; flex: none; font-size: 13.5px; color: var(--ink); }
.dlv-pick__loc .icon { color: var(--green); }
.dlv-pick__loc.is-none { color: var(--ink-3); }
.dlv-pick__loc.is-none .icon { color: var(--ink-3); }
.dlv-pick__amt { width: 96px; flex: none; text-align: right; }
@media (max-width: 719px) {
  .dlv-list__col { display: none; }
  .dlv-pick { flex-wrap: wrap; row-gap: 2px; }
  .dlv-pick__main { flex: 1 1 calc(100% - 140px); }
  .dlv-pick__amt { width: auto; }
  .dlv-pick__loc { order: 5; width: auto; margin-left: 32px; font-size: 12.5px; }
}
/* Multi-select filter: a button that opens a list of tick boxes */
.multi { position: relative; }
.multi > summary { list-style: none; }
.multi > summary::-webkit-details-marker { display: none; }
.multi__btn { display: inline-flex; align-items: center; gap: 8px; min-width: 200px; max-width: 280px; height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); cursor: pointer; font-size: 15px; }
.multi__btn span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi__btn .icon { color: var(--ink-3); }
.multi__btn.is-set { border-color: var(--green); background: var(--green-wash); color: var(--green-ink); font-weight: 600; }
.multi__btn.is-set .icon { color: var(--green); }
.multi[open] > .multi__btn { border-color: var(--green); box-shadow: var(--focus); }
.multi[open] .multi__chev { transform: rotate(180deg); }
.multi__menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 280px; max-height: 360px; overflow-y: auto; padding: 8px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); }
.multi__hint { margin: 2px 6px 6px; font-size: 12.5px; color: var(--ink-3); }
.multi__item { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: var(--r-sm); cursor: pointer; font-size: 14.5px; }
.multi__item:hover { background: var(--surface-2); }
.multi__item input { width: 18px; height: 18px; accent-color: var(--green); }
.multi__item--none { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); border-radius: 0; color: var(--ink-2); }
.multi__actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
@media (max-width: 719px) {
  .dlv-range__dates { width: 100%; }
  .dlv-range__dates .field { flex: 1 1 130px; min-width: 0; }
  .dlv-range__dates .field:has(.multi) { flex-basis: 100%; }
  .dlv-range__dates .input { width: 100%; min-width: 0; }
  .dlv-range__dates > .btn { flex: 1 1 100%; }
  .multi__btn { width: 100%; min-width: 0; max-width: none; }
  .multi__menu { width: min(300px, calc(100vw - 40px)); }
}
.dlv-pick { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.dlv-pick:last-child { border-bottom: 0; }
.dlv-pick:hover { background: var(--surface-2); }
.dlv-pick__main { flex: 1; min-width: 0; }
.dlv-pick__main strong { display: block; font-weight: 600; }
.dlv-pick__main small { font-size: 13px; color: var(--ink-2); }
.dlv-pick:has(input:not(:checked)) .dlv-pick__main, .dlv-pick:has(input:not(:checked)) .num { opacity: .5; }

.dlv-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-bottom: 12px; }
.dlv-summary__fig small { display: block; font-size: 12.5px; color: var(--ink-2); }
.dlv-summary__fig strong { font-size: 20px; font-weight: 600; }
.dlv-summary__fig strong span { font-size: 14px; font-weight: 400; color: var(--ink-2); }
.dlv-summary__all { margin-left: auto; }
.dlv-all-list { display: grid; gap: 6px; margin: 10px 0 12px; padding: 0; list-style: none; }
.dlv-all-list li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--surface-2); }
.dlv-all-list li span { flex: 1; font-weight: 500; }
.dlv-all-list li strong { font-weight: 600; }
.dlv-summary__note { flex: 1 1 100%; display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 14px; color: var(--ink-2); }
.dlv-loc { margin-top: 12px; }
.dlv-loc__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.dlv-loc__head h2 { display: flex; align-items: center; gap: 6px; font-size: 16px; }
.dlv-loc__head h2 .icon { color: var(--green); }
.dlv-loc__head small { font-size: 13px; color: var(--ink-2); }
.dlv-bill { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.dlv-bill:last-child { border-bottom: 0; }
.dlv-bill__main { flex: 1; min-width: 0; }
.dlv-bill__main a { color: var(--ink); }
.dlv-bill__main strong { font-weight: 600; }
.dlv-bill__main small { display: block; font-size: 13px; color: var(--ink-2); }
.dlv-bill__when { display: flex !important; align-items: center; gap: 4px; color: var(--green-ink) !important; }
.dlv-bill__when .icon { flex: none; width: 14px; height: 14px; }
.dlv-bill.is-done .dlv-bill__main strong { color: var(--ink-2); }
.dlv-bill__actions { display: flex; align-items: center; gap: 6px; flex: none; }
.btn--deliver { color: var(--green-ink); border-color: var(--green); background: var(--green-wash); font-weight: 600; }
.btn--deliver:hover { background: var(--green); color: #fff; }
.dlv-delete { position: relative; display: inline-block; margin-top: 16px; }
.dlv-delete > summary { list-style: none; }
.dlv-delete > summary::-webkit-details-marker { display: none; }
.dlv-delete .loc__pop { left: 0; right: auto; top: auto; bottom: calc(100% + 6px); }
.tag-delivery { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--blue); white-space: nowrap; }
.tag-delivery.is-done { color: var(--green-ink); }
.tag-delivery .icon { width: 14px; height: 14px; }
@media (max-width: 719px) {
  .dlv-summary { gap: 10px 20px; }
  .dlv-summary__all { flex: 1 1 100%; margin-left: 0; }
  .dlv-bill { flex-wrap: wrap; }
  .dlv-bill__actions { margin-left: auto; }
}

/* ---------- Delivery sheet: an A4 document. Page 1: summary, loading list, route; then one page per stop ---------- */
.sheet-tools { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.sheet-tools__info { flex: 1; font-size: 14px; color: var(--ink-2); }
/* Grey scale only, for black-and-white printers: black text and rules, light grey fills (little toner). */
.doc { --doc-ink: #111; --doc-muted: #555; --doc-line: #b5b5b5; --doc-fill: #f0f0f0; --doc-accent: #111; --doc-head: #dcdcdc;
  padding: 8px 0 24px; color: var(--doc-ink); font-variant-numeric: tabular-nums; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.doc-page { width: min(210mm, 100%); min-height: 287mm; margin: 16px auto; padding: 12mm 12mm 10mm; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 2px 10px rgba(16, 44, 65, .08); font-size: 12.5px; line-height: 1.4; }

/* Letterhead */
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 10px; border-bottom: 3px solid var(--doc-accent); }
.doc-head--compact { padding-bottom: 7px; border-bottom-width: 2px; }
.doc-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.doc-brand__logo { width: 52px; height: 52px; object-fit: contain; filter: grayscale(1); }
.doc-head--compact .doc-brand__logo { width: 34px; height: 34px; }
.doc-brand__name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.doc-head--compact .doc-brand__name { font-size: 13.5px; }
.doc-brand__line { font-size: 11.5px; color: var(--doc-muted); }
.doc-title { text-align: right; flex: none; }
.doc-title__kind { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--doc-accent); }
.doc-title__no { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.doc-head--compact .doc-title__no { font-size: 14px; }
.doc-title__flag { margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--doc-ink); text-decoration: underline; }

/* Summary block */
/* Delivery details: a bordered block of three rows, two label/value pairs per row, one line per cell. */
.doc-info { width: 100%; margin: 12px 0 0; border-collapse: collapse; table-layout: fixed; border: 2px solid var(--doc-ink); }
.doc-info .doc-info__k { width: 19%; }
.doc-info th, .doc-info td { padding: 6px 10px; border: 1px solid var(--doc-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.doc-info th { background: var(--doc-fill); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--doc-muted); }
.doc-info td { font-size: 13px; font-weight: 600; color: var(--doc-ink); font-variant-numeric: tabular-nums; }
.doc-note { margin: 8px 0 0; padding: 7px 10px; border-left: 3px solid var(--doc-accent); background: var(--doc-fill); font-size: 12.5px; }
.doc-section { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 7px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.doc-section span { font-size: 11.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--doc-muted); }
.doc-empty { margin: 8px 0 0; padding: 12px; border: 1px dashed var(--doc-line); border-radius: 4px; color: var(--doc-muted); }

/* Tables */
.doc-table { width: 100%; border-collapse: collapse; border: 1px solid var(--doc-line); }
.doc-table th, .doc-table td { padding: 6px 8px; border: 1px solid var(--doc-line); vertical-align: middle; }
.doc-table thead th { background: var(--doc-head); color: var(--doc-ink); font-size: 11px; font-weight: 700; letter-spacing: .03em; text-align: center; line-height: 1.25; border-color: #8c8c8c; border-bottom: 1.5px solid var(--doc-ink); }
.doc-table thead th small { display: block; font-weight: 400; opacity: .75; letter-spacing: 0; text-transform: none; }
.doc-table tbody tr:nth-child(even) td { background: #f6f6f6; }
.doc-table .l { text-align: left; }
.doc-table .q { text-align: center; }
.doc-table .n { width: 34px; text-align: center; }
.doc-table td.n, .doc-table td.unit { color: var(--doc-muted); }
.doc-table .unit { width: 56px; text-align: center; }
.doc-table td.l strong { display: block; font-size: 13px; }
.doc-table td.l small { display: block; font-size: 10.5px; color: var(--doc-muted); }
.doc-table td.q { font-size: 14px; font-weight: 600; }
.doc-table td.total { background: #e4e4e4 !important; font-weight: 700; }
.doc-table thead th.total { background: #c4c4c4; }
.doc-table .small-cell { font-size: 12px; }
.doc-table .time { width: 70px; }
.doc-table .bills { width: 86px; }
.doc-table td.bills { font-size: 11px; color: var(--doc-muted); }
.doc-table td.bills span { display: block; white-space: nowrap; }
.doc-table td.qty { font-size: 16px; font-weight: 700; }
.doc-table .tick { width: 66px; text-align: center; }
.tick-box { display: inline-block; width: 16px; height: 16px; border: 1.5px solid var(--doc-ink); border-radius: 3px; vertical-align: middle; }
.doc-table tfoot td { background: var(--doc-fill); font-weight: 700; border-top: 2px solid var(--doc-ink); }
.doc-table tfoot td.l { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

/* A stop */
.doc-stop { display: flex; justify-content: space-between; align-items: stretch; gap: 16px; margin: 14px 0 12px; }
.doc-stop__label, .doc-unload__label { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--doc-muted); }
.doc-stop__name { margin: 2px 0 0; font-size: 28px; line-height: 1.1; letter-spacing: -.02em; }
.doc-stop__sub { margin-top: 4px; font-size: 12.5px; color: var(--doc-muted); }
/* "Unload here": a small table of the bulk packs that come off the van at this stop. */
.doc-unload { width: 52%; flex: none; }
.doc-unload__label { margin-bottom: 4px; }
.doc-table--unload { border: 1.5px solid var(--doc-ink); }
.doc-table--unload th, .doc-table--unload td { padding: 4px 8px; }
.doc-table--unload td.l { font-size: 12px; font-weight: 600; }
.doc-table--unload td.qty { width: 54px; font-size: 15px; }
.doc-table--unload .unit { width: 46px; }
.doc-table td.is-none { color: var(--doc-muted); font-weight: 400; }

/* Signatures at the bottom of each page */
.doc-sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: auto; padding-top: 34px; }
.doc-sign div { font-size: 10.5px; color: var(--doc-muted); }
.doc-sign span { display: flex; align-items: flex-end; height: 24px; margin-bottom: 4px; padding-bottom: 2px; border-bottom: 1px solid var(--doc-ink); font-size: 12.5px; font-weight: 600; color: var(--doc-ink); }
.doc-printed { margin-top: 10px; font-size: 10px; color: var(--doc-muted); text-align: right; }

/* Phones only: on paper (A4 is narrower than 720px) the sheet keeps its print layout. */
@media screen and (max-width: 719px) {
  .doc-page { min-height: 0; margin: 10px 0; padding: 14px 10px; border-radius: 0; overflow-x: auto; }
  .doc-info .doc-info__k { width: 23%; }
  .doc-info th { font-size: 9px; letter-spacing: .03em; }
  .doc-info th, .doc-info td { padding: 6px 7px; white-space: normal; overflow-wrap: anywhere; }
  .doc-stop { flex-direction: column; }
  .doc-unload { width: 100%; }
  .doc-stop__name { font-size: 22px; }
}
@media print {
  @page { size: A4; margin: 10mm 10mm 12mm; @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 9px sans-serif; color: #555; } }
  .doc { padding: 0; }
  .doc-page { width: auto; min-height: 270mm; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; break-after: page; }
  .doc-page:last-child { break-after: auto; }
  .doc-table tr, .doc-unload, .doc-sign { break-inside: avoid; }
  .doc-table thead { display: table-header-group; }
}

/* ---------- Date picker: dd-MMM-yyyy text box with a calendar (site.js turns every date input into one) ---------- */
.datepick { position: relative; display: flex; align-items: center; min-width: 0; }
.datepick > .input { width: 100%; min-width: 0; padding-left: 10px; padding-right: 38px; font-variant-numeric: tabular-nums; }
.datepick__btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); cursor: pointer; }
.datepick__btn:hover { background: var(--surface-2); color: var(--green); }
.datepick__btn .icon { width: 18px; height: 18px; }
.toolbar .datepick:has(.input--date) { flex: 1 1 150px; max-width: 200px; }
.datepick__pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: 272px; padding: 10px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); }
.datepick__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.datepick__head strong { font-size: 15px; }
.datepick__head button { width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; font-size: 22px; line-height: 1; color: var(--ink-2); cursor: pointer; }
.datepick__head button:hover { background: var(--surface-2); color: var(--ink); }
.datepick__week, .datepick__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.datepick__week span { padding: 4px 0; font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.datepick__days button { height: 34px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums; }
.datepick__days button:hover { background: var(--green-wash); }
.datepick__days button.is-today { font-weight: 700; color: var(--green-ink); box-shadow: inset 0 0 0 1.5px var(--green); }
.datepick__days button.is-picked { background: var(--green); color: #fff; font-weight: 700; box-shadow: none; }
.datepick__days button:disabled { color: var(--line-strong); cursor: not-allowed; background: transparent; }
.datepick__days button:focus-visible, .datepick__head button:focus-visible, .datepick__foot button:focus-visible { outline: 0; box-shadow: var(--focus); }
.datepick__foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.datepick__foot button { padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--green-ink); cursor: pointer; }
.datepick__foot button:hover { background: var(--green-wash); }
/* Near the right edge of the screen the calendar opens to the left. */
.date-filter__body .datepick:last-child .datepick__pop, .period__custom .field:last-of-type .datepick__pop { left: auto; right: 0; }
@media (max-width: 380px) { .datepick__pop { width: 252px; } }
@media print { .datepick__btn { display: none; } .datepick > .input { padding-right: 0; border: 0; } }