/*
 * Dairy PWA Styling — Modern, Vivid, High-Visibility UI with Themes
 */

/* ---- Themes & Colors ---- */
:root, [data-theme="green"] {
  --g-900: #0E4D25;
  --g-700: #177A38;
  --g-600: #1E8E42;
  --g-100: #E8F4EC;
  --g-50: #F3F9F5;
  --ink: #1A1F1C;
  --ink-2: #5A6B60;
  --line: #DDE6E0;
  --paper: #FFFFFF;
  --bg: #F2F5F3;
  --red: #C0392B;
  --amber: #B7791F;
  --header-bg: #177A38;
  --header-text: #FFFFFF;
  --shadow: 0 4px 14px rgba(23, 122, 56, 0.12);
}

[data-theme="blue"] {
  --g-900: #0D47A1;
  --g-700: #1565C0;
  --g-600: #1E88E5;
  --g-100: #E3F2FD;
  --g-50: #F0F7FF;
  --ink: #101F33;
  --ink-2: #4A607A;
  --line: #D0E1F5;
  --paper: #FFFFFF;
  --bg: #F0F4F9;
  --red: #D32F2F;
  --amber: #F57C00;
  --header-bg: #1565C0;
  --header-text: #FFFFFF;
  --shadow: 0 4px 14px rgba(21, 101, 192, 0.14);
}

[data-theme="purple"] {
  --g-900: #4A148C;
  --g-700: #6A1B9A;
  --g-600: #8E24AA;
  --g-100: #F3E5F5;
  --g-50: #FBF5FC;
  --ink: #21102B;
  --ink-2: #654D75;
  --line: #E6D5EC;
  --paper: #FFFFFF;
  --bg: #F8F2FA;
  --red: #C2185B;
  --amber: #E65100;
  --header-bg: #6A1B9A;
  --header-text: #FFFFFF;
  --shadow: 0 4px 14px rgba(106, 27, 154, 0.14);
}

[data-theme="orange"] {
  --g-900: #BF360C;
  --g-700: #D84315;
  --g-600: #F4511E;
  --g-100: #FBE9E7;
  --g-50: #FFF5F2;
  --ink: #2B1610;
  --ink-2: #755248;
  --line: #ECD9D3;
  --paper: #FFFFFF;
  --bg: #FAF3F0;
  --red: #D32F2F;
  --amber: #FF8F00;
  --header-bg: #D84315;
  --header-text: #FFFFFF;
  --shadow: 0 4px 14px rgba(216, 67, 21, 0.14);
}

[data-theme="dark"] {
  --g-900: #4CAF50;
  --g-700: #1E293B;
  --g-600: #2E7D32;
  --g-100: #263345;
  --g-50: #192231;
  --ink: #F1F5F9;
  --ink-2: #94A3B8;
  --line: #334155;
  --paper: #1E293B;
  --bg: #0F172A;
  --red: #EF5350;
  --amber: #FFB74D;
  --header-bg: #1E293B;
  --header-text: #F8FAFC;
  --shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

:root {
  --tap: 48px;
  --r: 14px;
  /* Everything that decides how much of the app fits on a phone screen is a
     variable, so the size setting can change all of it at once instead of
     this being scattered through the file. */
  --fs: 16px;
  --pad-card: 16px 14px;
  --gap-card: 12px;
  --pad-input: 12px;
  --pad-btn: 14px;
  --gap-label: 11px;
  --pad-seg: 11px 4px;
}

/* Compact exists for one reason the operator gave: at 5am they were having to
   scroll the entry screen to reach Save. Nothing is hidden — the same fields
   are there, with the air between them taken out. */
:root[data-size="compact"] {
  --tap: 38px;
  --r: 11px;
  --fs: 15px;
  --pad-card: 9px 10px;
  --gap-card: 8px;
  --pad-input: 7px 10px;
  --pad-btn: 10px;
  --gap-label: 6px;
  --pad-seg: 7px 4px;
}
:root[data-size="large"] {
  --tap: 56px;
  --fs: 18px;
  --pad-card: 18px 16px;
  --pad-input: 15px;
  --pad-btn: 17px;
  --gap-label: 13px;
  --pad-seg: 14px 4px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", "Nirmala UI", "Noto Sans Devanagari", sans-serif;
  font-size: var(--fs);
  line-height: 1.45;
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
  transition: background 0.25s, color 0.25s;
}
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.wrap { max-width: 480px; margin: 0 auto; padding: 0 12px; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
button, input, select { font: inherit; }

/* ---- Header ---- */
header {
  background: var(--header-bg);
  color: var(--header-text);
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 3px 12px rgba(0,0,0,0.12);
  transition: background 0.25s, color 0.25s;
}
header .bar {
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  min-height: 56px;
}
header h1 {
  font-size: 19px;
  font-weight: 700;
  flex: 1;
  text-align: center;
  letter-spacing: -0.01em;
}
.iconbtn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  display: grid;
  place-items: center;
  transition: transform 0.15s, background 0.15s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.iconbtn:active {
  transform: scale(0.94);
  background: rgba(255, 255, 255, 0.35);
}

/* ---- Date Range & Shift Bar ---- */
.range {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  padding: 12px 10px;
  margin: 12px 0;
  display: grid;
  /* minmax(0, …) lets the two halves shrink below a date box's natural
     width. With plain 1fr the boxes forced the row 48px wider than a phone,
     the page went sideways-scrollable, and the fixed tab bar drifted off the
     bottom on Records, Reports and the dashboard. */
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  box-shadow: 0 3px 10px rgba(0,0,0,0.04);
}
.range > div { min-width: 0; }
/* On a 360px phone a full date only fits if the box gives up some padding
   and the picker icon gives up its gap. */
@media (max-width: 400px) {
  .range { padding: 10px 8px; gap: 6px; }
  .range input[type=date] { font-size: 14px; padding: 9px 2px; }
  .range input[type=date]::-webkit-calendar-picker-indicator { margin: 0; padding: 0; width: 14px; }
}
.range .arrow { text-align: center; color: var(--ink-2); font-weight: 700; }
.range input[type=date] {
  width: 100%;
  min-width: 0;
  padding: 9px 4px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--g-50);
  text-align: center;
  min-height: 42px;
  font-weight: 650;
  color: var(--ink);
}
.shift {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
}
.shift button {
  padding: 8px 4px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--g-50);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  min-height: 36px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.shift button[aria-pressed=true] {
  background: var(--g-600);
  color: #ffffff;
  border-color: var(--g-600);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* ---- Cards & Data Rows ---- */
.card {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  padding: var(--pad-card);
  margin-bottom: var(--gap-card);
  box-shadow: 0 3px 12px rgba(0,0,0,0.04);
}
.card h3 {
  font-size: 14px;
  color: var(--g-700);
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}
.lead {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--g-700);
}
.grid3 {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 4px;
  font-size: 14px;
}
.grid3 .h { color: var(--g-700); font-weight: 700; font-size: 12px; text-align: right; }
.grid3 .h:first-child { text-align: left; }
.grid3 .c { text-align: right; padding: 8px 0; border-bottom: 1px solid var(--line); }
.grid3 .c:nth-child(4n+1) { text-align: left; font-weight: 650; }
.grid3 .sub { font-size: 11px; color: var(--ink-2); display: block; }
.row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: 0; }
.row .k { color: var(--ink-2); font-size: 14.5px; font-weight: 500; }
.row .v { font-weight: 700; }
.v.red { color: var(--red); }
.v.green { color: var(--g-600); }

/* ---- Form Inputs & Visible Buttons ---- */
label { display: block; margin: var(--gap-label) 0 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
input, select, textarea {
  width: 100%;
  padding: var(--pad-input);
  border: 1.5px solid var(--line);
  border-radius: 11px;
  background: var(--paper);
  color: var(--ink);
  min-height: var(--tap);
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, select:focus {
  outline: none;
  border-color: var(--g-600);
  box-shadow: 0 0 0 3px rgba(30, 142, 66, 0.15);
}
input[inputmode] { font-variant-numeric: tabular-nums; font-size: 18px; font-weight: 700; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }

/* ---- Buttons ---- */
.btn {
  width: 100%;
  padding: var(--pad-btn);
  border: 0;
  border-radius: var(--r);
  background: var(--g-600);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 14px;
  min-height: var(--tap);
  box-shadow: 0 4px 14px rgba(0,0,0,0.14);
  transition: transform 0.12s, box-shadow 0.12s, background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.btn.ghost {
  background: var(--paper);
  color: var(--g-700);
  border: 2px solid var(--g-600);
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.btn.grey {
  background: var(--paper);
  color: var(--ink);
  border: 1.5px solid var(--line);
  font-weight: 650;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---- Segmented Controls & Chips ---- */
.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  border: 2px solid var(--g-600);
  border-radius: 12px;
  overflow: hidden;
  margin: 10px 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.seg button {
  padding: var(--pad-seg);
  border: 0;
  background: var(--paper);
  color: var(--g-700);
  font-weight: 700;
  cursor: pointer;
  min-height: var(--tap);
  transition: background 0.2s, color 0.2s;
}
.seg button[aria-pressed=true] {
  background: var(--g-600);
  color: #ffffff;
}
.seg button+button {
  border-left: 2px solid var(--g-600);
}
.chips {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  margin: 8px 0;
}
.chips button {
  padding: 10px 4px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink-2);
  font-weight: 650;
  cursor: pointer;
  min-height: 44px;
  transition: all 0.18s;
}
.chips button[aria-pressed=true] {
  background: var(--g-100);
  border-color: var(--g-600);
  color: var(--g-900);
  font-weight: 750;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

/* ---- List Rows & Items ---- */
.item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
.badge {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--g-100);
  color: var(--g-900);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 750;
  flex: none;
}
.item .nm { font-weight: 700; line-height: 1.25; }
.item .meta { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.item .amt { margin-left: auto; font-weight: 750; white-space: nowrap; }
.item .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.item.stack { display: block; }
.mini {
  padding: 8px;
  border-radius: 9px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  min-height: 38px;
  transition: all 0.15s;
}
.mini.go {
  background: var(--g-600);
  color: #ffffff;
  border-color: var(--g-600);
  font-weight: 700;
}

/* The rate mechanism in force for the party being entered against. It sits
   directly above the fat and rate boxes because it explains them: on a fixed
   party the fat box is hidden and the rate is a flat figure, on a fat party
   the rate is derived and fat is required. */
.ratebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--g-50);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 8px 8px 8px 12px;
  margin: 10px 0 2px;
  font-size: 13px;
  font-weight: 650;
  color: var(--ink-2);
}
.ratebar b { color: var(--ink); }
.ratebar .mini { min-height: 32px; padding: 6px 10px; flex-shrink: 0; }

/* Edit and delete on each member row, matching the record rows. */
.item .acts button {
  padding: 8px;
  border-radius: 9px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  min-height: 36px;
}
.item .acts button.del { color: var(--red); border-color: #F0C8C3; background: #FDF3F2; }
/* The row's main action (the bill list's "View bill"). The row-button rule
   above out-ranks `.mini.go` and painted its background white while the text
   stayed white, so the button showed as an empty box. */
.item .acts button.go { background: var(--g-600); border-color: var(--g-600); color: #ffffff; }
.item .acts button:active { transform: scale(0.97); }

/* ---- Month stepper on the bills screen ---- */
.monthbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 8px;
}
.monthbar #b_month {
  flex: 1;
  text-align: center;
  font-weight: 750;
  font-size: 16px;
}
.monthbar button {
  width: 42px;
  min-height: 40px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  color: var(--g-700);
  cursor: pointer;
}
.monthbar button:active { transform: scale(0.96); }

/* ---- The bill, laid out on screen ---- */
.bill-head {
  background: var(--g-50);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.bill-head .who { font-weight: 800; font-size: 17px; }
.bill-head .per { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }

.bill-sec {
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--g-700);
  margin: 16px 0 6px;
}

/* One line per shift. The buttons stay small and to the right so the row still
   reads as a bill line rather than as a form. */
.bline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
}
.bline .d { width: 76px; flex-shrink: 0; font-size: 12.5px; color: var(--ink-2); }
.bline .m { flex: 1; min-width: 0; font-size: 13px; }
.bline .m .sub { display: block; font-size: 11.5px; color: var(--ink-2); margin-top: 1px; }
.bline .a { font-weight: 700; white-space: nowrap; font-size: 13.5px; }
.bline .bact { display: flex; gap: 4px; flex-shrink: 0; }
.bline .bact button {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  padding: 0;
}
.bline .bact button svg { width: 15px; height: 15px; }
.bline .bact button.del { color: var(--red); border-color: #F0C8C3; background: #FDF3F2; }
.bline .bact button:active { transform: scale(0.94); }

/* A row the phone is still holding. It has to look different from a saved one,
   or an operator on a village round cannot tell what has actually gone in. */
.pendtag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
  background: #FFF4E0;
  color: #A65E00;
  border: 1px solid #F0D9A8;
  vertical-align: middle;
  margin-left: 4px;
}
.rec._pending, .item._pending { opacity: 0.85; }

.bill-tot { margin-top: 14px; border-top: 2px solid var(--line); padding-top: 10px; }
.bill-tot .row { display: flex; justify-content: space-between; padding: 5px 2px; font-size: 14px; }
.bill-tot .row.net {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 2px solid var(--g-600);
  font-size: 17px;
  font-weight: 800;
}

/* ---- Navigation Bar & Floating Action Button ---- */
nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--paper);
  border-top: 1.5px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 40;
  box-shadow: 0 -3px 12px rgba(0,0,0,0.06);
  transition: background 0.25s, border-color 0.25s;
}
nav .inner {
  max-width: 480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
}
nav button {
  background: transparent;
  border: 0;
  padding: 8px 2px 10px;
  font-size: 11px;
  color: var(--ink-2);
  cursor: pointer;
  border-top: 3px solid transparent;
  min-height: 58px;
  display: grid;
  gap: 2px;
  justify-items: center;
  transition: color 0.18s, border-color 0.18s;
}
nav button .ic { width: 22px; height: 22px; }
nav button[aria-current=page] {
  color: var(--g-700);
  font-weight: 700;
  border-top-color: var(--g-600);
}

.fab-btn .ic {
  width: 22px;
  height: 22px;
}
.fab-btn:active {
  transform: translateY(-10px) scale(0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ---- Screens & Notes ---- */
.screen { display: none; padding-top: 10px; }
.screen.on { display: block; }
.note {
  background: var(--g-50);
  border: 1px solid var(--line);
  border-left: 4px solid var(--g-600);
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 13.5px;
  margin: 10px 0;
  color: var(--ink-2);
}
.note.err { border-left-color: var(--red); color: var(--red); background: #FDF3F2; }
.empty { text-align: center; color: var(--ink-2); padding: 34px 16px; font-size: 14.5px; }

#netbar {
  display: none;
  background: var(--red);
  color: #ffffff;
  text-align: center;
  padding: 6px;
  font-size: 13px;
  font-weight: 650;
}
#netbar.on { display: block; }
#netbar.sync { background: var(--amber); }

#toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 92px;
  background: var(--ink);
  color: #ffffff;
  padding: 11px 18px;
  border-radius: 11px;
  font-size: 14.5px;
  font-weight: 600;
  z-index: 60;
  max-width: 90vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
#toast.on { opacity: 1; }

#installBtn { display: none; }
#installBtn.on { display: block; }

/* ---- Icons ---- */
.ic { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; }
.ic-sm { width: 17px; height: 17px; }
nav button .ic { width: 22px; height: 22px; }
.iconbtn .ic { width: 20px; height: 20px; }
.card h3 .ic, .sec .ic { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; }

/* ---- Record Cards ---- */
.rec {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
.rec-top { display: flex; align-items: center; gap: 10px; }
.rec .who { font-weight: 700; line-height: 1.2; }
.rec .det { font-size: 12.5px; color: var(--ink-2); margin-top: 1px; }
.rec .amt { margin-left: auto; text-align: right; }
.rec .amt b { font-size: 16px; }
.rec .tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  margin-right: 5px;
  vertical-align: 1px;
}
.tag.buy { background: var(--g-100); color: var(--g-900); }
.tag.sell { background: #FFF3E0; color: #8A5A00; }
.rec-acts { display: flex; gap: 6px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.rec-acts button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 4px;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  min-height: 38px;
  transition: all 0.15s;
}
.rec-acts button.wa { color: #128C7E; border-color: #A8DCD1; background: #F0FDFB; }
.rec-acts button.del { color: var(--red); border-color: #F0C8C3; background: #FDF3F2; }
.rec-acts button:active { transform: scale(0.97); }

/* ---- Day Grouping ---- */
.dayhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 16px 0 8px;
  padding-bottom: 5px;
  border-bottom: 2px solid var(--g-600);
}
.dayhead .d { font-weight: 750; font-size: 14px; }
.dayhead .s { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }

/* ---- Entry screen: running total of the shift being worked ----
 * The milk figure leads because that is what gets checked against the cans
 * on the floor; the money sits beside it. The other shift and the whole day
 * are a quiet line underneath, there when wanted and not competing. */
.shifthead {
  margin: 16px 0 8px;
  padding: 10px 12px 9px;
  background: var(--g-50);
  border: 1px solid var(--line);
  border-left: 4px solid var(--g-600);
  border-radius: 10px;
}
.shifthead .sh-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.shifthead .sh-title { font-weight: 750; font-size: 14px; color: var(--g-900); }
.shifthead .sh-count { font-size: 12.5px; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.shifthead .sh-figs { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 2px; }
.shifthead .sh-milk { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.shifthead .sh-amt { font-size: 18px; font-weight: 750; color: var(--g-700); }
.shifthead .sh-other { font-size: 12px; color: var(--ink-2); margin-top: 3px;
  display: flex; flex-wrap: wrap; gap: 0 12px; }
.shifthead .sh-other > span { white-space: nowrap; }
.shifthead .sh-other:empty { display: none; }
[data-theme="dark"] .shifthead .sh-title,
[data-theme="dark"] .shifthead .sh-amt { color: var(--g-900); }
/* Entries of the other shift, listed under their own small heading so a
   second can moved to the other shift does not look like it vanished. */
.subhead {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 14px 0 6px; padding-bottom: 3px;
  border-bottom: 1px dashed var(--line);
  font-size: 12.5px; color: var(--ink-2); font-weight: 650;
}
:root[data-size="compact"] .shifthead { margin: 10px 0 6px; padding: 7px 10px 6px; }
:root[data-size="compact"] .shifthead .sh-milk { font-size: 19px; }
:root[data-size="compact"] .shifthead .sh-amt { font-size: 16px; }

/* ---- Reports: shift filter and tables ---- */
#repShift { margin-top: 8px; }
.reptable { width: 100%; font-size: 12.5px; border-collapse: collapse; }
.reptable th { text-align: left; padding: 6px 4px; color: var(--ink-2); font-weight: 650;
  border-bottom: 1px solid var(--line); white-space: nowrap; }
.reptable td { padding: 6px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.reptable .r { text-align: right; }
.reptable tfoot td { font-weight: 750; border-bottom: 0; border-top: 2px solid var(--g-600); }
.reptable tr.newday td { border-top: 2px solid var(--line); }
.shtag { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 6px;
  border-radius: 6px; white-space: nowrap; }
.shtag.m { background: #FFF6DB; color: #7A5600; }
.shtag.e { background: #E6EEFF; color: #23408E; }
[data-theme="dark"] .shtag.m { background: #4A3B12; color: #FFE08A; }
[data-theme="dark"] .shtag.e { background: #1F2E55; color: #B9CBFF; }
.shiftsplit { font-size: 11.5px; color: var(--ink-2); margin-top: 3px;
  display: flex; flex-wrap: wrap; gap: 2px 10px; }
.shiftsplit > span { white-space: nowrap; }
.reprow .badge { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.duo .v { display: block; line-height: 1.25; }
.duo .v small { display: block; font-size: 13px; font-weight: 650; color: var(--ink-2); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.duo > div { background: var(--g-50); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.duo .k { font-size: 12px; color: var(--ink-2); }
.duo .v { font-weight: 750; }

/* ---- Send to everyone: one tap per person ---- */
.sqprog { height: 8px; border-radius: 6px; background: var(--g-50); border: 1px solid var(--line);
  overflow: hidden; margin: 10px 0 4px; }
.sqprog > div { height: 100%; width: 0; background: var(--g-600); transition: width 0.25s; }
.sqcount { font-size: 12.5px; color: var(--ink-2); font-weight: 650; margin-bottom: 4px; }
#sq_next { font-size: 16px; }
.sqlist { max-height: 42vh; overflow-y: auto; margin: 6px 0 4px;
  border: 1px solid var(--line); border-radius: 10px; }
.sqrow { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px;
  padding: 7px 10px; border-bottom: 1px solid var(--line); cursor: pointer; margin: 0; }
.sqrow input[type=checkbox] { width: 22px; height: 22px; margin: 0; accent-color: var(--g-600); }
.sqrow .sqprev { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.sqgroup { display: flex; justify-content: space-between; padding: 6px 10px; font-size: 12px;
  font-weight: 750; color: var(--g-900); background: var(--g-50); border-bottom: 1px solid var(--line); }
.sqalready { font-size: 12.5px; }
.sqrow:last-child { border-bottom: 0; }
.sqrow .sqmark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 750; background: var(--g-50); color: var(--ink-2); }
.sqrow.done .sqmark, .sqrow.open .sqmark { background: var(--g-600); color: #fff; }
.sqrow.done .sqname { color: var(--ink-2); }
.sqrow.open { background: var(--g-50); }
.sqrow .sqname { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sqrow .mini { min-height: 32px; padding: 4px 12px; }
.sqrow .mini.go { color: #fff; }

/* ---- Contact picker: a contact with several numbers ---- */
.cnums { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 2px; font-size: 12.5px; }
.cnums:empty { display: none; }
.cnums > span { color: var(--ink-2); font-weight: 650; }
.cnums .chip { padding: 5px 10px; border-radius: 16px; border: 1.5px solid var(--line);
  background: var(--paper); font-weight: 650; font-size: 13px; }
.cnums .chip[aria-pressed="true"] { border-color: var(--g-600); background: var(--g-50); color: var(--g-900); }
#p_contact, #mContact { margin: 6px 0 2px; }

/* ---- Settings: app version, and the update banner ---- */
.appver { text-align: center; font-size: 12px; color: var(--ink-2); margin: 14px 0 6px; }
.sdday { margin: 8px 0 2px; }
.sdday input[type=date] { width: 100%; }

/* ---- Send screen ---- */
.daynav { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; align-items: center; margin: 4px 0 6px; }
.daynav .iconbtn { width: 44px; height: 44px; font-size: 24px; font-weight: 700; color: var(--g-900);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; }
.daynav input[type=date] { width: 100%; min-width: 0; text-align: center; font-weight: 700; }
#sx_filter button { font-size: 14px; }
#sx_go { font-size: 16px; }
.sxrow { background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px;
  padding: 10px 12px; margin: 8px 0; }
.sxrow.sent { border-color: var(--g-600); }
.sxrow.open { background: var(--g-50); border-color: var(--g-600); }
.sxrow.changed { border-color: #E3A008; }
.sxtop { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.sxtop input[type=checkbox] { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--g-600); }
.sxname { font-weight: 750; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sxname .badge { width: 26px; height: 26px; font-size: 12px; }
.sxfig { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.sxamt { font-weight: 800; white-space: nowrap; }
.sxstatus { font-size: 12.5px; margin: 6px 0 0 40px; color: var(--ink-2); font-weight: 650; }
.sxrow.sent .sxstatus { color: var(--g-700); }
.sxrow.changed .sxstatus { color: #9A6700; }
.sxbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 0 40px; }
.sxbtns button { min-height: 40px; border-radius: 10px; font-weight: 700; font-size: 13.5px;
  border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); }
.sxbtns button { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 8px; line-height: 1.2; }
.sxbtns button svg { width: 16px; height: 16px; flex: none; }
.sxbtns button.wa { color: #0E7A6D; border-color: #A8DCD1; background: #F0FDFB; }
.sxbtns button.sms { color: #23408E; border-color: #C7D4F5; background: #F3F6FF; }
.sxbtns button.used { box-shadow: inset 0 0 0 2px currentColor; }
.sxnone { margin: 8px 0 0 40px; font-size: 12.5px; color: var(--red); display: flex; gap: 8px; align-items: center; }
.sxnone button { padding: 5px 10px; border-radius: 8px; border: 1.5px solid var(--line); background: var(--paper); font-weight: 650; }
.sxidle { text-align: center; font-size: 12.5px; margin: 10px 0 20px; }
[data-theme="dark"] .sxbtns button.wa { background: #10302C; color: #7FE0CF; border-color: #1F5C53; }
[data-theme="dark"] .sxbtns button.sms { background: #1A2440; color: #B9CBFF; border-color: #2E3E6B; }

/* ---- Trash ---- */
.trall { margin: 8px 0 2px; }
.trrow { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.trrow.on { border-color: var(--g-600); background: var(--g-50); }
.trrow input[type=checkbox] { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--g-600); }
.trname { font-weight: 750; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.trname .badge { width: 26px; height: 26px; font-size: 12px; }
.trmeta { font-size: 12px; color: var(--ink-2); margin-top: 2px; }
.trwarn { font-size: 12px; color: #9A6700; margin-top: 2px; font-weight: 650; }
.tracts { display: flex; flex-direction: column; gap: 6px; }
.tracts button { min-height: 34px; padding: 4px 10px; border-radius: 9px; font-size: 12.5px; font-weight: 700;
  border: 1.5px solid var(--line); background: var(--paper); white-space: nowrap; }
.tracts button.rs { color: var(--g-900); border-color: var(--g-600); }
.tracts button.rm { color: var(--red); border-color: #F0C8C3; background: #FDF3F2; }
.trbar { position: sticky; bottom: 70px; display: none; grid-template-columns: 1fr 1fr; gap: 8px;
  padding: 8px; margin: 8px -4px 0; background: var(--bg); border-top: 1px solid var(--line); z-index: 5; }
.trbar.on { display: grid; }
.trbar .btn { margin: 0; }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.dangerline { color: var(--red); border-color: #F0C8C3; margin-top: 14px; }

/* ---- Payment date, and a payment opened from a bill ---- */
#pay_datebox input[type=date] { width: 100%; }
.note.warn { border-left-color: #E3A008; background: #FFF8E6; color: #7A5600; }
[data-theme="dark"] .note.warn { background: #3A2F12; color: #FFE08A; }
.paycycle { line-height: 1.5; }
.paycycle .pcline { display: block; }
.paycycle .pcout { color: #9A6700; font-weight: 650; }
.paycycle button { margin-top: 6px; padding: 6px 12px; border-radius: 9px; border: 1.5px solid var(--g-600);
  background: var(--paper); color: var(--g-900); font-weight: 700; }
#b_pay { background: var(--g-700); border-color: var(--g-700); }

/* ---- Send screen: what the message says is owed ---- */
.sxopts { background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; padding: 4px 12px 8px; margin: 6px 0 8px; }
.sxopts .switch { margin: 6px 0; }
#sx_billwrap { padding-left: 4px; }
#sx_billwrap input[type=date] { width: 100%; margin: 2px 0 4px; }
#sx_duenote { margin: 6px 0 0; font-size: 12.5px; }
.sxdue { font-size: 12.5px; margin-top: 3px; color: var(--ink); }
.sxdue b { font-weight: 800; }
.sxpeek { margin: 8px 0 0 40px; padding: 4px 10px; border-radius: 8px; border: 1.5px solid var(--line);
  background: var(--paper); font-size: 12px; font-weight: 650; color: var(--ink-2); }
.sxbody { margin: 6px 0 0 40px; padding: 8px 10px; border-radius: 8px; background: var(--g-50);
  border: 1px solid var(--line); font-size: 12px; white-space: pre-wrap; word-break: break-word; font-family: inherit; }

/* ---- Bills: with or without the earlier due ---- */
.bprev { margin: 6px 0 2px; }
#b_prevnote { font-size: 12.5px; margin: 4px 0 8px; }
.bill-tot .row.off span { color: var(--ink-2); font-size: 12.5px; }

/* ---- Products ---- */
.pehint { font-size: 12.5px; color: var(--ink-2); margin: 4px 0 2px; min-height: 1px; }
.pehint .up { color: var(--g-700); font-weight: 700; }
.pehint .down { color: var(--red); font-weight: 700; }
.prodrow { background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.prodrow .top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.prodrow .nm { font-weight: 750; }
.prodrow .prices { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
.prodrow .month { font-size: 12.5px; margin-top: 3px; }
.prodrow .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.prodrow .acts button { min-height: 36px; border-radius: 9px; border: 1.5px solid var(--line); background: var(--paper); font-weight: 700; font-size: 13px; }
.prodrow .acts button.del { color: var(--red); border-color: #F0C8C3; background: #FDF3F2; }
.prodrow .acts button { display: flex; align-items: center; justify-content: center; gap: 6px; }
.prodrow .acts button svg { width: 16px; height: 16px; flex: none; }

/* ---- Goods on bills, goods report ---- */
.bline.goods .m .sub { display: block; }
.bline .a.minus { color: var(--red); }
#repTabs { grid-template-columns: repeat(5, 1fr); }
#repTabs button { font-size: 12.5px; padding-left: 2px; padding-right: 2px; }

/* ---- Modal ---- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 25, 20, 0.55);
  z-index: 100;
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.modal.on { display: flex; }
.sheet {
  background: var(--paper);
  width: 100%;
  max-width: 480px;
  border-radius: 20px 20px 0 0;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  max-height: 88vh;
  overflow: auto;
  box-shadow: 0 -6px 24px rgba(0,0,0,0.18);
}
.sheet .grab { width: 38px; height: 4px; background: var(--line); border-radius: 4px; margin: 0 auto 14px; }
.sheet h3 { font-size: 17px; margin-bottom: 4px; display: flex; align-items: center; gap: 7px; color: var(--ink); }
.sheet .msg { color: var(--ink-2); font-size: 14px; margin-bottom: 12px; }
.sheet .existing {
  background: var(--g-50);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 13.5px;
}
.sheet .existing div { display: flex; justify-content: space-between; padding: 3px 0; }
.sheet .btns { display: grid; gap: 8px; margin-top: 6px; }
@media (min-width: 420px) { .sheet .btns { grid-template-columns: 1fr 1fr; } }
.sheet .btns .btn { margin-top: 0; }

/* ---- Action Tiles Grid ---- */
.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}
.tile {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 14px 12px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  min-height: 58px;
  text-align: left;
  box-shadow: 0 3px 10px rgba(0,0,0,0.04);
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.2s;
}
.tile .ic { width: 22px; height: 22px; flex: none; }
.tile.buy { border-color: var(--g-600); color: var(--g-700); background: var(--g-50); }
.tile.sell { border-color: #E0A32E; color: #8A5A00; background: #FFFBF5; }
.tile.wa { border-color: #A8DCD1; color: #128C7E; background: #F0FDFB; }
.tile:active { transform: translateY(2px) scale(0.98); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }

/* ---- Theme Selection Grid ---- */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.theme-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: all 0.18s;
}
.theme-option .dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex: none;
  border: 1px solid rgba(0,0,0,0.15);
}
.theme-option.active {
  border-color: var(--g-600);
  background: var(--g-50);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Hint under the member code box: the last code used and the next free one.
   Deliberately quiet — it is a reference while typing, not an instruction. */
.codehint{font-size:12.5px;color:var(--ink-2);margin:-4px 0 2px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.codehint b{color:var(--ink);font-variant-numeric:tabular-nums}
.codehint button{border:1px solid var(--g-600);background:var(--paper);color:var(--g-700);
  border-radius:14px;padding:3px 10px;font-size:12px;font-weight:650;cursor:pointer;min-height:28px}

/* Copy-from-last-time list. Three columns that line up with the header, so a
   column of quantities can be read down the page rather than hunted for. */
.bulkhead{display:grid;grid-template-columns:1fr 84px 66px;gap:8px;
  padding:10px 12px 6px;font-size:11.5px;font-weight:650;color:var(--g-700)}
.bulkhead span:not(:first-child){text-align:center}
.bulkrow{display:grid;grid-template-columns:1fr 84px 66px;gap:8px;align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:8px 10px;margin-bottom:6px}
.bulkrow.done{border-color:var(--g-600);background:var(--g-50)}
.bulkrow.off{opacity:.55}
.bulkrow .who{min-width:0}
.bulkrow .nm{font-weight:600;font-size:14px;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bulkrow .sub{font-size:11px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.bulkrow input{min-height:40px;padding:7px 6px;text-align:center;font-size:16px;
  font-weight:650;font-variant-numeric:tabular-nums}
.bulkrow .badge{width:24px;height:24px;font-size:11px;border-radius:7px;flex:none}
.bulkrow .top{display:flex;align-items:center;gap:7px}
.bulkbar{position:sticky;bottom:calc(68px + env(safe-area-inset-bottom));
  display:flex;justify-content:space-between;gap:12px;
  background:var(--g-900);color:#fff;border-radius:12px;padding:11px 14px;margin-top:10px}
.bulkbar .k{font-size:11.5px;opacity:.75;display:block}
.bulkbar .v{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}

/* Checkbox row in Settings. The whole row is the target — a bare 16px
   checkbox is a poor thing to hit with a thumb. */
.switch{display:flex;align-items:center;gap:10px;margin:14px 0 4px;
  cursor:pointer;min-height:44px;font-size:14.5px;font-weight:600;color:var(--ink)}
.switch input{width:22px;height:22px;min-height:22px;flex:none;accent-color:var(--g-600);margin:0}

/* ---------------- rate by milk type ---------------- */

/* The square .badge is sized for a member's code. A word like "भैंस" needs to
   set its own width, so the tag variant drops the fixed box. */
.badge.tag,
.badge.milk {
  width: auto;
  height: auto;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
}
.badge.milk { background: var(--g-100); color: var(--g-900); }

/* One block per kind of milk, boxed so two prices for one member cannot be
   read as one. */
.mrline {
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  margin-top: 10px;
}
.mrhead {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}
.mrline .seg { margin: 8px 0 0; }
.mrline .seg button { padding: 8px 2px; font-size: 13px; min-height: 40px; }
.mrline .mrval,
.mrline .mrchart { margin-top: 8px; }

/* Per-milk defaults in Settings: a label and three money boxes per row. */
.permilk { margin-top: 12px; }
.permilk > summary {
  cursor: pointer;
  font-weight: 700;
  padding: 10px 2px;
  min-height: var(--tap);
  display: flex;
  align-items: center;
}
.mrgrid {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}
.mrgrid > label,
.mrgrid > .mrcol {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  margin: 0;
  text-align: center;
}
.mrgrid > label { text-align: left; padding-right: 4px; }
.mrgrid > input {
  padding: 8px 6px;
  font-size: 14px;
  text-align: center;
  margin: 0;
}

/* A rate line per kind of milk, on the member's card in the rates screen. */
.crline {
  display: grid;
  grid-template-columns: 74px 1fr 92px;
  gap: 6px;
  align-items: center;
  padding: 5px 0;
  border-top: 1px solid var(--line);
}
.crline .crname {
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.crline .crname .badge.tag { font-size: 9px; padding: 1px 5px; }
.crline .seg { margin: 0; border-width: 1.5px; border-radius: 9px; }
.crline .seg button { padding: 6px 2px; font-size: 12px; min-height: 36px; }
.crline .crval {
  margin: 0;
  padding: 6px;
  font-size: 14px;
  text-align: center;
}
/* A chart line has no boxes to fill, so it spans where they would be. */
.crline .crchart {
  grid-column: 2 / -1;
  font-size: 12px;
  color: var(--ink-2);
}

/* `.btn` paints white text for a green button; `.mini` repaints the
   background paper-white but left the text white too, so every small button
   that was not `.go` or `.ghost` rendered as an empty box. The Save button on
   the rates screen was invisible because of this. */
.btn.mini { color: var(--ink); }
.btn.mini.go { color: #ffffff; }
.btn.ghost.mini { color: var(--g-700); }

/* The kind of milk being entered right now, when the rate editor is opened
   from the entry screen. Marked so the operator's figure lands where they
   expect without them having to find the line first. */
.mrline.here {
  border-color: var(--g-600);
  background: var(--g-50, rgba(22, 125, 62, 0.05));
}
.badge.tag.now {
  background: var(--g-600);
  color: #ffffff;
}

/* Google renders its own button in here; it has fixed dimensions of its own,
   so the slot only centres it and gives it the same breathing room as the
   buttons above. Empty when Google sign-in is off, and collapses to nothing. */
.gbtn {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}
.gbtn:empty { display: none; }

/* ---------------- the dairy's logo ---------------- */

/* In the header bar. Sized under the bar's own min-height so turning a logo
   on never makes the header taller and pushes the screen down. */
.hdrlogo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  object-fit: contain;
  background: rgba(255,255,255,0.92);
  padding: 2px;
  flex: none;
}
.logorow { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.logoprev {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: contain;
  border: 1.5px solid var(--line);
  background: var(--paper);
  padding: 3px;
  flex: none;
}
.logobtns { display: grid; gap: 6px; flex: 1; }
/* A <label> standing in for the file input, so it matches the other buttons. */
.logopick { display: grid; place-items: center; cursor: pointer; margin: 0; }

/* ---------------- settings, in sections ---------------- */

/* The settings screen outgrew one long scroll. Each group is a card that
   opens on its own, so the operator sees five headings instead of forty
   fields and goes straight to the one they came for. */
.sect { padding: 0; }
.sect > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--g-700);
  min-height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sect > summary::-webkit-details-marker { display: none; }
/* A chevron that turns, so it is obvious the row opens rather than navigates. */
.sect > summary::after {
  content: "";
  width: 9px; height: 9px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg);
  margin-left: 8px;
  flex: none;
  transition: transform 0.2s;
}
.sect[open] > summary::after { transform: rotate(-135deg); }
.sect[open] > summary { border-bottom: 1.5px solid var(--line); }
.sect > *:not(summary) { padding: 0 14px; }
.sect > *:not(summary):last-child { padding-bottom: 14px; }
.sect h4 {
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  text-transform: none;
}

/* ---------------- compact, on the entry screen ----------------
 *
 * The variables above shrink the whole app evenly, which is not quite enough
 * on a 640px-tall phone: the operator still had to scroll to reach Save
 * mid-round. These trim the entry screen specifically — the three stacked
 * ways of picking a member, the rate bar and the running total — because
 * that screen is used a hundred times a morning and every other screen is
 * read rather than filled in.
 *
 * Nothing is hidden. The search box, the quick chips and the dropdown are
 * all still there; they simply sit closer together.
 */
:root[data-size="compact"] #s-entry > .seg,
:root[data-size="compact"] #s-entry > .chips { margin: 6px 0; }
:root[data-size="compact"] #s-entry .chips button { padding: 6px 4px; }
:root[data-size="compact"] #e_sameaslast { margin-top: 6px !important; padding: 7px; }
:root[data-size="compact"] #e_party_search { margin-bottom: 4px !important; }
:root[data-size="compact"] #e_party_cards { padding: 2px 0 4px !important; margin-bottom: 4px !important; }
:root[data-size="compact"] #s-entry .row { padding: 5px 0; }
:root[data-size="compact"] .ratebar { padding: 6px 8px; }
:root[data-size="compact"] #s-entry > div[style*="margin-top"] { margin-top: 6px !important; }
:root[data-size="compact"] #s-entry .three input { padding: 6px 8px; }
:root[data-size="compact"] #s-entry > .two { margin-bottom: 0; }
/* The total moves onto the Save button in compact (see recalcTotal). */
:root[data-size="compact"] #s-entry .row { display: none; }
:root[data-size="compact"] #s-entry label { font-size: 11.5px; margin: 3px 0 2px; }
:root[data-size="compact"] #e_ratebar { padding: 5px 8px; }
:root[data-size="compact"] #s-entry > .seg button { padding: 6px 4px; }
:root[data-size="compact"] #e_party_cards button { padding: 5px 9px; }
:root[data-size="compact"] #doEntry { margin-top: 6px; }
:root[data-size="compact"] #s-entry > .chips { margin: 4px 0; }
/* A licence certificate is a wide document, so its preview is wider than the
   square logo rather than squeezed into the same box. */
.logoprev.wide { width: 96px; }