/* FarmLedger officer app. Built for a phone held in one hand, outdoors:
   big touch targets (at least 48px), high contrast, nothing small that matters. */

/* Fonts are stored inside FarmLedger (fonts/), never loaded from Google: the officer app has to
   open with no signal. Both are free under the SIL Open Font License. Characters they lack
   (the rupee sign, Nepali script) fall back to the phone's own font. */
@font-face {
  font-family: "Inter"; src: url("fonts/inter.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo"; src: url("fonts/archivo.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}

/* The mint look. Text on mint is always forest (about 8:1); white on mint (1.6:1) is never used.
   tests/test_pages.py checks every text/background pair is at least 4.5:1. */
:root {
  --mint: #70e4ac;
  --forest: #0e3b2e;
  --soft: #dff7eb;
  --green: var(--forest);        /* older names, still used by the team, bank and farmer pages */
  --green-dark: var(--forest);
  --green-tint: var(--soft);
  --ink: var(--forest);
  --muted: #566b62;
  --line: #dbe7e0;
  --bg: #f1f7f3;
  --card: #ffffff;
  --warn: #8a5a00;
  --warn-tint: #fdf3dc;
  --bad: #a3261d;
  --bad-tint: #fcebe9;
  --radius: 20px;
}

* { box-sizing: border-box; }
html, body { margin: 0; touch-action: manipulation; }   /* no double-tap zoom */
body {
  font: 17px/1.45 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
[hidden] { display: none !important; }
h1 { font: 900 40px/.95 Archivo, Inter, sans-serif; font-stretch: 68%; text-transform: uppercase; margin: 8px 0; }
h2 { font-size: 18px; margin: 0; }
.muted { color: var(--muted); font-size: 15px; }
.error { color: var(--bad); background: var(--bad-tint); padding: 10px 12px; border-radius: 8px; margin: 10px 0 0; }

/* Top bar */
.bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--mint); color: var(--forest);
}
.bar-org { font-weight: 600; font-size: 16px; }
.bar-officer { font-size: 14px; opacity: .85; }
.bar-status { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pill { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--forest); color: var(--mint); white-space: nowrap; }
.pill.offline { background: var(--bad); color: #fff; }
.pill-warn { background: var(--warn-tint); color: var(--warn); }

/* Screens and cards */
.screen { max-width: 560px; margin: 0 auto; padding: 12px; }
.card { background: var(--card); border: 0; border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }

/* Form controls */
label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 15px; margin-top: 12px; }
input, select, textarea {
  font: inherit; font-size: 16px; color: inherit; width: 100%; min-height: 48px; padding: 10px 12px;
  border: 1.5px solid var(--line); border-radius: 14px; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 3px solid var(--green-tint); border-color: var(--green); }
.btn {
  font: inherit; font-weight: 700; min-height: 48px; padding: 10px 18px; border-radius: 999px;
  border: 0; background: var(--soft); color: var(--forest); cursor: pointer;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--forest); color: var(--mint); }
.btn-primary:active { background: #082a20; }
.btn-big { min-height: 56px; font-size: 17px; }
.btn[disabled] { opacity: .5; }
.link { font: inherit; font-size: 15px; background: none; border: 0; color: var(--green); font-weight: 600; padding: 8px 0; cursor: pointer; }

/* Login */
.login { max-width: 380px; margin: 10vh auto 0; padding: 0 8px; text-align: center; }
.login form { text-align: left; }
.login-logo { width: 72px; height: 72px; }

/* Search and results */
.search-label { margin-top: 0; }
.search { font-size: 18px; min-height: 56px; border-radius: 999px; padding: 10px 20px; }
.results { list-style: none; margin: 8px 0 0; padding: 0; }
.results li button {
  width: 100%; text-align: left; font: inherit; color: inherit; background: none; cursor: pointer;
  border: 0; border-top: 1px solid var(--line); padding: 12px 4px; min-height: 56px;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.results li:first-child button { border-top: 0; }
.results .name { font-weight: 600; }
.badge { font-size: 13px; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.badge-warn { background: var(--warn-tint); color: var(--warn); }
.badge-ok { background: var(--green-tint); color: var(--green-dark); }
.badge-bad { background: var(--bad-tint); color: var(--bad); }

/* Not sure who this is */
.identity { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.identity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.identity-list li { border: 1.5px solid var(--line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.identity-list ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--muted); }

/* Delivery entry */
.hero-back { color: var(--forest); padding: 0 0 10px; }
#screen-record { padding-bottom: 24px; }
.entry-who { display: flex; justify-content: space-between; align-items: flex-start; }
.entry-name { font-size: 22px; font-weight: 700; }
.qty { display: flex; align-items: center; gap: 10px; }
.qty input { font: 800 48px/1 Archivo, Inter, sans-serif; font-stretch: 75%; min-height: 76px; }
.qty span { font-size: 20px; font-weight: 600; min-width: 28px; }
.amount { margin: 16px 0; min-height: 44px; }
.amount-total { font: 800 48px/1 Archivo, Inter, sans-serif; font-stretch: 75%; font-variant-numeric: tabular-nums;
                overflow-wrap: anywhere; }
.amount-per { font: 700 26px/1.1 Archivo, Inter, sans-serif; font-stretch: 85%; font-variant-numeric: tabular-nums; }
.amount-note { font-size: 15px; color: var(--muted); margin-top: 4px; }
.amount-note.warn { color: var(--warn); background: var(--warn-tint); padding: 8px 12px; border-radius: 12px; }
.pay-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pay-buttons [data-pay=""] { grid-column: 1 / -1; order: 1; }   /* "pay later" below the two "paid" buttons */
.upi { margin-top: 4px; display: flex; flex-direction: column; gap: 10px; }

/* Today's list */
.today { list-style: none; margin: 0; padding: 0; }
.today li { border-top: 1px solid var(--line); padding: 10px 2px; display: flex; justify-content: space-between; gap: 10px; }
.today li:first-child { border-top: 0; }
.today .what { font-size: 15px; color: var(--muted); }
.today .money { font-weight: 700; text-align: right; white-space: nowrap; }

/* Import and consent */
.problems { margin: 10px 0 0; padding-left: 20px; color: var(--bad); font-size: 15px; }
.summary { margin-top: 12px; padding: 12px; border-radius: 10px; background: var(--green-tint); }
.consent { border-top: 2px solid var(--green); margin-top: 12px; padding-top: 12px; }
.notice { background: var(--warn-tint); color: var(--warn); padding: 10px 12px; border-radius: 8px; font-size: 15px; }

/* Bottom tabs */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
.tabs button { font: inherit; font-weight: 600; min-height: 60px; background: none; border: 0; color: var(--muted); cursor: pointer; }
.tabs button.active { color: var(--forest); box-shadow: inset 0 3px 0 var(--mint); }

/* Toast */
.toast {
  position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 10;
  max-width: 536px; margin: 0 auto; background: var(--ink); color: #fff; padding: 14px 16px; border-radius: 10px;
}

/* UPI photo */
.photo-pick input { padding: 10px; }
.photo-preview { width: 100%; max-height: 280px; object-fit: contain; border: 1px solid var(--line); border-radius: 10px; background: #fff; margin-top: 10px; }
.owed { font-size: 22px; font-weight: 700; }
.photo-link { font: inherit; font-size: 14px; color: var(--green); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.cancel-box { display: flex; flex-direction: column; gap: 10px; width: 100%; }

/* Scanning and showing farmers' QR cards */
.scan-button { width: 100%; margin-bottom: 10px; }
.overlay { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, .55);
           display: flex; align-items: center; justify-content: center; padding: 16px; }
.overlay[hidden] { display: none; }
.overlay-box { background: #fff; border-radius: var(--radius); padding: 18px; width: 100%; max-width: 420px;
               max-height: 100%; overflow: auto; }
.overlay-box h2 { margin: 0; }
.scan-video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: #111; }
.farmer-card { text-align: center; }
.card-brand { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--green); }
.card-qr { width: 100%; max-width: 260px; margin: 6px auto; display: block; image-rendering: pixelated; }
.card-hint { font-size: 14px; }
@media print {
  body > *:not(#card-view) { display: none !important; }
  #card-view { position: static; background: none; padding: 0; }
  #card-view .overlay-box { border: 1px solid #000; max-width: 85mm; }
  .no-print { display: none !important; }
}

/* Mint look: shared building blocks */
.display { font-family: Archivo, Inter, sans-serif; font-weight: 900; font-stretch: 68%;
           text-transform: uppercase; line-height: .9; letter-spacing: -.005em; }
.hero { background: var(--mint); color: var(--forest); padding: 18px 16px 22px; border-radius: 0 0 var(--radius) var(--radius);
        margin: -12px -12px 12px; }
.hero-title { font-family: Archivo, Inter, sans-serif; font-weight: 900; font-stretch: 68%; text-transform: uppercase;
              line-height: .92; font-size: 40px; margin: 0; overflow-wrap: anywhere; }
.hero-sub { margin-top: 8px; font-size: 15px; font-weight: 500; }
.big-number { font-family: Archivo, Inter, sans-serif; font-weight: 800; font-stretch: 75%; font-size: 48px;
              line-height: 1; font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip { font: inherit; font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 999px; border: 0;
        background: rgba(255, 255, 255, .6); color: var(--forest); }
button.chip { cursor: pointer; min-height: 36px; }
.chip-warn { background: var(--warn-tint); color: var(--warn); }
.sheet { align-items: flex-end; padding: 0; }
.sheet .overlay-box { max-width: 560px; border-radius: var(--radius) var(--radius) 0 0;
                      padding-bottom: calc(18px + env(safe-area-inset-bottom)); }

/* Setup code on the login screen, and the big code an admin reads out */
.code-input { font: 700 22px/1 Archivo, Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.setup-code-box { background: var(--soft); }
.setup-code-big { font: 800 52px/1 Archivo, Inter, sans-serif; font-stretch: 75%; letter-spacing: .08em;
                  font-variant-numeric: tabular-nums; margin: 12px 0; overflow-wrap: anywhere; }

/* My team and Maximum prices */
.people { list-style: none; margin: 0 0 8px; padding: 0; }
.people > li { border-top: 1px solid var(--line); padding: 12px 2px; }
.people > li:first-child { border-top: 0; }
.person-main { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.person-main > div:first-child { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.person-main > input { flex: 1; }
.person-flags { margin-top: 6px; }
.person-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding: 12px;
                  background: var(--bg); border-radius: 14px; }
.people .what { font-size: 15px; color: var(--muted); }
.limit { flex-wrap: wrap; }
.limit-edit { display: flex; align-items: center; gap: 8px; width: 100%; }
.limit-edit span { font-weight: 700; }
.limit-edit .btn { min-width: 84px; }
#team-banner { margin: 0 0 12px; font-weight: 600; }
#point-list .results li button, #point-list button { flex-direction: column; align-items: flex-start; gap: 2px; }

/* UPI payouts: the Pay sheet, the UPI card, approvals and the day's payments */
#balance-banner { margin: 0 0 12px; font-weight: 600; }
.pay-amount { font: 800 56px/1 Archivo, Inter, sans-serif; font-stretch: 75%; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pay-status { font-weight: 700; font-size: 18px; min-height: 0; }
.pay-status:empty { display: none; }
#pay-pin { font: 800 32px/1 Archivo, Inter, sans-serif; letter-spacing: .3em; text-align: center; min-height: 64px; }
label.check { flex-direction: row; align-items: center; gap: 10px; font-weight: 600; }
label.check input { width: 26px; min-height: 26px; flex: none; }
.approval-edit { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.daily-point { margin: 18px 0 4px; }
.daily-officer { margin-top: 12px; font-weight: 700; color: var(--muted); font-size: 15px; }
.error-text { color: var(--bad); font-size: 15px; }
#ledger-upi-current { overflow-wrap: anywhere; }