/* =====================================================================
   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 { 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); }

/* ---------- 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; }
@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; }
}