/* app.css — מסלול יומי, "Modernist" visual system (Nick's approved mock, 10.08.2026).
   Flat architectural light theme: ink on ground, one red accent, 2px rules, zero radius,
   Heebo (self-hosted, variable weight). Mobile-first RTL. */

/* ranges copied verbatim from Google's Heebo css2 — ₪ (U+20AA) lives in the HEBREW
   file, so it must be declared there or every shekel sign falls back to Segoe UI */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/static/heebo-hebrew.woff2?v=d4fff2c07563) format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/static/heebo-latin.woff2?v=d4fff2c07563) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Modernist tokens */
  --bg: #f3f2f2;          /* ground */
  --ink: #201e1d;         /* text */
  --accent: #ec3013;      /* the one red */
  --accent-press: #dd2b0f;
  --deep: #ae1800;        /* money / hot text (accent-700) */
  --muted: #605d5d;
  --faint: #7d7979;
  --line: #d7d3d3;        /* light divider */
  --rule: rgba(32, 30, 29, 0.4);   /* strong 2px rule */
  --tint: #ffe0d9;        /* hover tint */
  --red-bg: #fff2ef;      /* light accent fill */
  --gray-bg: #eae7e7;
  --white: #ffffff;
  /* legacy names still consumed by the print/admin blocks below */
  --card: #ffffff;
  --txt: #201e1d;
  --dim: #605d5d;
  --red: #ae1800;
  --green: #1a7f37;
  --green-bg: #e9f7ee;
  --blue: #1f5bd8;
  --blue-bg: #e8f0fb;
  --purple: #6d3fc0;
  --purple-bg: #f1eafc;
  --amber: #9a6700;
  --amber-bg: #fdf3e0;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #dedcdb;
  color: var(--ink);
  font-family: 'Heebo', 'Segoe UI', -apple-system, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
}
#app {
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--bg);
  border-inline: 2px solid rgba(32, 30, 29, 0.35);
  display: flex;
  flex-direction: column;
  position: relative;
}
@media (max-width: 500px) { #app { border-inline: none; } }
.loading { padding: 40px 16px; text-align: center; color: var(--faint); }

/* numbers / phones / dates always LTR inside RTL text */
.num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }

button { font-family: inherit; }
a { color: var(--deep); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* on accent-filled surfaces the accent ring is invisible — switch to ink (mock rule) */
.byes:focus-visible, .visitbtn:focus-visible, .sendbtn:focus-visible,
.rh-btn.on:focus-visible, .badgebar button:focus-visible {
  outline-color: var(--ink);
}
[hidden] { display: none !important; }
.mb8 { margin-bottom: 8px; }
@keyframes upIn { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* ---- banners (top of route screen) ---- */
.banner {
  padding: 10px 18px; font-size: 14px; font-weight: 500;
  border-bottom: 2px solid var(--rule);
}
.banner.stale { background: var(--red-bg); color: var(--deep); font-weight: 700; }
.banner.sat { background: var(--gray-bg); }
.banner.first { background: var(--amber-bg); color: var(--amber); }
.banner.offline { background: var(--amber-bg); color: var(--amber); }
.banner.nudge { background: var(--gray-bg); color: var(--muted); }
.banner.nudge button {
  float: left; background: none; border: none; color: inherit;
  font-size: 16px; padding: 0 6px; cursor: pointer;
}

/* =========================== route screen =========================== */
.scr { display: flex; flex-direction: column; flex: 1; }
.rhead { padding: 18px 18px 0; border-bottom: 2px solid var(--rule); background: var(--bg); }
.rh-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rh-date { font-size: 12px; font-weight: 700; color: var(--faint); }
.rhead h1 { margin: 2px 0 0; font-size: 27px; font-weight: 800; line-height: 1.1; }
.rh-btn {
  display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px;
  border: 2px solid var(--ink); background: var(--white); color: var(--ink);
  font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.rh-btn:active { background: var(--tint); }
.rh-btn.on { border-color: var(--accent); background: var(--accent); color: #fff; }
.rh-btn.on:active { background: var(--accent-press); }

.stats { display: grid; grid-template-columns: 1fr 1.2fr 1fr; margin-top: 14px; border-top: 2px solid var(--rule); }
.stat { padding: 10px 0 12px; }
.stat.mid { padding: 10px 14px 12px; border-inline: 2px solid var(--rule); }
.stat.last { padding: 10px 14px 12px; }
.stat-l { font-size: 11px; font-weight: 700; color: var(--faint); }
.stat-v { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-v .acc { color: var(--accent); }
.stat-v.deep { color: var(--deep); }
.stat-v .ils { font-size: 14px; }

.rowstop {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px;
  border-bottom: 1px solid var(--line); cursor: pointer; background: var(--bg);
  -webkit-tap-highlight-color: var(--tint);
}
.rowstop:active { background: var(--tint); }
.sq {
  width: 40px; height: 40px; flex: none; display: flex; align-items: center;
  justify-content: center; font-size: 17px; font-weight: 800;
}
.sq.next { background: var(--accent); color: #fff; }
.sq.pend { border: 2px solid var(--ink); }
.sq.done { background: var(--ink); color: #fff; font-size: 20px; }
.sq.skip { background: var(--line); color: var(--muted); font-size: 18px; }
.r-main { flex: 1; min-width: 0; }
.r-line1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.r-name { font-size: 16.5px; font-weight: 800; line-height: 1.2; }
.nextbadge { font-size: 10.5px; font-weight: 800; color: var(--accent); letter-spacing: 0.04em; }
.donebadge { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.r-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.r-info { font-size: 14px; line-height: 1.35; margin-top: 5px; font-weight: 500; }
.hot { color: var(--deep); font-weight: 800; }
.r-chev { flex: none; margin-top: 12px; color: #9b9797; font-size: 18px; }
.arrcol { display: flex; flex-direction: column; gap: 4px; flex: none; }
.arr {
  width: 44px; height: 44px; border: 2px solid var(--ink); background: var(--white);
  cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.arr:active { background: var(--tint); }
.r-foot { padding: 14px 18px 28px; font-size: 11.5px; color: var(--faint); line-height: 1.5; }

/* =========================== client screen =========================== */
.chead {
  position: sticky; top: 0; z-index: 20; background: var(--bg);
  border-bottom: 2px solid var(--rule);
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
}
.backbtn {
  width: 44px; height: 44px; flex: none; border: 2px solid var(--ink); background: var(--white);
  cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.backbtn:active { background: var(--tint); }
.ch-name {
  font-size: 17px; font-weight: 800; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ch-sub { font-size: 11.5px; color: var(--muted); }
.ch-txt { min-width: 0; }
.cbody { flex: 1; padding-bottom: 8px; }

.skipbar {
  margin: 14px 18px 0; border: 2px solid var(--ink); background: var(--gray-bg);
  padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 13.5px; font-weight: 700;
}
.skipbar button {
  min-height: 40px; padding: 6px 12px; border: 2px solid var(--ink); background: var(--white);
  font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.skipbar button:active { background: var(--tint); }

.whybox { margin: 14px 18px 0; border: 2px solid var(--accent); background: var(--red-bg); padding: 12px 14px 13px; }
.shead { display: flex; align-items: center; gap: 7px; }
.shead .dot { width: 9px; height: 9px; background: var(--accent); flex: none; }
.shead .dot.ink { background: var(--ink); }
.shead .lbl { font-size: 11.5px; font-weight: 800; letter-spacing: 0.03em; }
.whybox .shead { margin-bottom: 7px; }
.why-line { font-size: 15px; line-height: 1.45; font-weight: 500; padding: 2px 0; }

.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 18px 0; }
.abtn {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 12px;
  border: 2px solid var(--ink); background: var(--white); color: var(--ink);
  text-decoration: none; font-size: 14px; font-weight: 700; min-width: 0; overflow: hidden;
}
.abtn:active { background: var(--tint); }
.abtn.off { opacity: 0.4; pointer-events: none; }
.abtn .ph-num {
  font-size: 12px; color: var(--muted); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.irows { margin: 12px 18px 0; border-top: 1px solid var(--line); }
.irow {
  display: flex; justify-content: space-between; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.irow .k { color: var(--muted); font-weight: 500; }
.irow .v { font-weight: 700; text-align: left; }
.irow .v .closed { color: var(--deep); }

.csec { margin: 18px 18px 0; }
.csec > .shead { padding-bottom: 8px; border-bottom: 2px solid var(--rule); }
.collect-line { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 0 4px; }
.collect-line .k { font-size: 13.5px; font-weight: 700; color: var(--muted); }
.collect-line .v { font-size: 30px; font-weight: 800; color: var(--deep); font-variant-numeric: tabular-nums; }
.collect-line .v .ils { font-size: 16px; }
.gotchip {
  display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #fff;
  font-size: 12.5px; font-weight: 700; padding: 5px 10px; margin-bottom: 8px;
}
.gotchip button {
  background: none; border: 1px solid rgba(255, 255, 255, 0.5); color: #fff;
  font-size: 11px; padding: 1px 8px; cursor: pointer;
}
.aging { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); border-inline-end: none; }
.aging .cell { padding: 7px 6px 8px; border-inline-end: 1px solid var(--line); }
.aging .al { font-size: 10.5px; color: var(--faint); font-weight: 700; }
.aging .av { font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.aging .av.hotv { color: var(--deep); }
.smallnote { font-size: 10.5px; color: var(--faint); margin-top: 5px; }

.buy3 { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.buy3 > div { padding: 10px 0; }
.buy3 > div.mid { padding: 10px 12px; border-inline: 1px solid var(--line); }
.buy3 > div.last3 { padding: 10px 12px; }
.b-l { font-size: 11px; color: var(--faint); font-weight: 700; }
.b-v { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.b-s { font-size: 11px; color: var(--muted); }

/* stopped-buying: framed accent box with solid header bar */
.stopbox { margin: 14px 18px 0; border: 2px solid var(--accent); }
.stopbox .bar {
  display: flex; align-items: center; gap: 7px; padding: 10px 14px;
  background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: 0.03em;
}
.stopbox .witem { padding: 11px 14px; border-bottom: 1px solid #ffc4b8; background: var(--white); }
.stopbox .witem:last-child { border-bottom: none; }
.witem, .ritem { min-width: 0; }
.w-name { font-size: 14px; font-weight: 700; line-height: 1.3; }
.w-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.w-sub .moved { color: var(--deep); font-weight: 700; }
/* Nick 05/10/2026: "make them smaller and put them on the left, ordered on top, not ordered below,
   not taking over the whole screen" - the product text keeps the right column, the two answers
   stack in a narrow column on the left (RTL: grid column 2) */
.witem, .ritem { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; }
.witem > *, .ritem > * { grid-column: 1; }
.witem > .w-btns, .ritem > .w-btns, .witem > .bst, .ritem > .bst {
  grid-column: 2; grid-row: 1 / span 6; align-self: center;
}
.w-btns { display: flex; flex-direction: column; gap: 5px; margin-top: 0; }
.byes {
  display: flex; align-items: center; justify-content: center; gap: 4px; width: 92px;
  min-height: 34px; padding: 4px 8px; border: 2px solid var(--accent);
  background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 800; cursor: pointer;
}
.byes:active { background: var(--accent-press); }
.bno {
  display: flex; align-items: center; justify-content: center; gap: 4px; width: 92px;
  min-height: 34px; padding: 4px 8px; border: 2px solid var(--ink);
  background: var(--white); color: var(--ink); font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.byes svg, .bno svg { width: 14px; height: 14px; flex: none; }
.bno:active { background: var(--gray-bg); }
.bst {
  margin-top: 0; min-height: 34px; max-width: 110px; padding: 4px 8px; font-size: 12px; cursor: pointer;
}
.bst.yes { border: 2px solid var(--accent); background: var(--red-bg); color: var(--deep); font-weight: 800; }
.bst.no { border: 2px solid var(--line); background: var(--gray-bg); color: var(--muted); font-weight: 700; }

.ritem { padding: 11px 0; border-bottom: 1px solid var(--line); }
.ritem:last-child { border-bottom: none; }
.r-why { font-size: 12px; color: var(--deep); font-weight: 700; margin-top: 2px; }

/* on-sale + strategic-brand boxes (Nick 10.08.26) */
.csec.promobox, .csec.brandbox {
  border: 2px solid var(--ink); padding: 0 12px 10px; margin-inline: 18px;
}
.csec.promobox { border-color: var(--accent); background: var(--red-bg); }
.csec.brandbox { background: var(--gray-bg); }
.csec.promobox > .shead, .csec.brandbox > .shead {
  margin-inline: -12px; padding: 9px 12px; border-bottom: 2px solid var(--rule);
  background: var(--ink); color: #fff;
}
.csec.promobox > .shead { background: var(--accent); }
.csec.promobox > .shead .dot, .csec.brandbox > .shead .dot { display: none; }
/* never-transacted client — an explicit state, not an empty card */
.csec.newbox {
  border: 2px dashed var(--ink); padding: 0 12px 10px; margin-inline: 18px;
}
.csec.newbox > .shead { margin-inline: -12px; padding: 9px 12px; border-bottom: 2px solid var(--rule); }
.csec.newbox .w-sub { padding-top: 8px; }
.tagp, .tagb, .tago {
  display: inline-block; font-size: 10.5px; font-weight: 800; padding: 1px 6px;
  vertical-align: middle; white-space: nowrap;
}
.tagp { background: var(--accent); color: #fff; }
.tagb { background: var(--ink); color: #fff; }
.tago { background: var(--gray-bg); color: var(--muted); border: 1px solid var(--line); }
.w-sub.low { color: var(--deep); font-weight: 700; }
.b-s.late { color: var(--deep); font-weight: 800; }

/* the full basket can be 60 products — scroll it instead of truncating */
.uscroll { max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }
.stopbox.dropbox { border-color: var(--ink); }
.stopbox.dropbox .bar { background: var(--ink); }
.stopbox.dropbox .witem { border-bottom-color: var(--line); }
.uitem { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.uitem:last-child { border-bottom: none; }
.u-name { flex: 1; font-size: 13.5px; font-weight: 500; line-height: 1.3; min-width: 0; }
.u-meta { font-size: 13px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.u-date { font-size: 11.5px; color: var(--faint); width: 42px; text-align: start; font-variant-numeric: tabular-nums; }
.u-ret { color: var(--amber); font-size: 11.5px; font-weight: 700; }

.nrow { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.4; }
.nrow .who { color: var(--faint); font-weight: 700; flex: none; }
.noterow { display: flex; gap: 8px; margin-top: 10px; }
.noterow input {
  flex: 1; min-width: 0; border: 2px solid var(--ink); background: var(--white); color: var(--ink);
  padding: 10px 12px; font-family: inherit; font-size: 16px; border-radius: 0;
}
.noterow button {
  min-height: 48px; padding: 8px 16px; border: 2px solid var(--ink); background: var(--white);
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.noterow button:active { background: var(--tint); }

/* sticky action footer */
.cfoot {
  position: sticky; bottom: 0; z-index: 20; background: var(--bg);
  border-top: 2px solid var(--rule);
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 8px;
}
.notesec { padding-bottom: 8px; }
.visitbtn {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 16px;
  border: 2px solid var(--accent); background: var(--accent); color: #fff;
  font-size: 16.5px; font-weight: 800; cursor: pointer;
}
.visitbtn:active { background: var(--accent-press); }
.visitbtn.done { border-color: var(--ink); background: var(--ink); }
.foot3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.fbtn {
  display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px;
  padding: 8px 10px; border: 2px solid var(--ink); background: var(--white); color: var(--ink);
  font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.fbtn:active { background: var(--tint); }
.fbtn.ghost { border-color: transparent; background: var(--gray-bg); color: #444141; }
.fbtn.ghost:active { background: var(--line); }
.fbtn.sent { background: var(--gray-bg); font-weight: 800; }

/* =========================== order screen =========================== */
.oline { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-bottom: 1px solid var(--line); }
.o-main { flex: 1; min-width: 0; }
.o-tag {
  display: inline-block; background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 800; padding: 2px 6px; margin-bottom: 3px;
}
.o-name { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.o-unit { font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.stepper { display: flex; align-items: center; border: 2px solid var(--ink); background: var(--white); flex: none; }
.stepper button {
  width: 42px; height: 42px; border: none; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 700;
}
.stepper button:active { background: var(--tint); }
.stepper .q { width: 34px; text-align: center; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.o-total { width: 64px; flex: none; text-align: start; font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.o-foot-note { padding: 12px 18px 24px; font-size: 11.5px; color: var(--faint); }
.ofoot {
  position: sticky; bottom: 0; z-index: 20; background: var(--bg);
  border-top: 2px solid var(--rule);
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
}
.ofoot .sumline { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 8px; }
.ofoot .sumline .k { font-size: 13px; font-weight: 700; color: var(--muted); }
.ofoot .sumline .v { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ofoot .sumline .v .ils { font-size: 15px; }
.sendbtn {
  width: 100%; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 16px;
  border: 2px solid var(--accent); background: var(--accent); color: #fff;
  font-size: 16.5px; font-weight: 800; cursor: pointer;
}
.sendbtn:active { background: var(--accent-press); }

/* =========================== sheets + toast =========================== */
.veil { position: fixed; inset: 0; background: rgba(32, 30, 29, 0.55); z-index: 40; animation: fadeIn 0.15s; }
.sheet {
  position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto; max-width: 480px;
  background: var(--white); border-top: 4px solid var(--accent); z-index: 41;
  padding: 16px 18px calc(24px + env(safe-area-inset-bottom, 0px));
  animation: upIn 0.18s ease-out;
}
.sheet h3 { margin: 0 0 12px; font-size: 16px; font-weight: 800; }
.sheet .subt { font-size: 12.5px; color: var(--muted); margin: -8px 0 12px; }
.sheet .opts { display: flex; flex-direction: column; gap: 8px; }
.shopt {
  display: flex; align-items: center; min-height: 48px; padding: 8px 14px;
  border: 2px solid var(--ink); background: var(--white); color: var(--ink);
  font-size: 15px; font-weight: 700; cursor: pointer; text-align: start;
}
.shopt:active { background: var(--tint); }
.shopt.soft { border-color: var(--ink); background: var(--gray-bg); font-size: 14px; min-height: 44px; }
.shopt.cancel { border-color: transparent; background: var(--gray-bg); color: #444141; font-size: 14px; min-height: 44px; }
.moneyrow { display: flex; gap: 8px; }
.moneyrow input {
  flex: 1; min-width: 0; border: 2px solid var(--ink); background: var(--white); color: var(--ink);
  padding: 12px; font-family: inherit; font-size: 20px; font-weight: 800; text-align: center; border-radius: 0;
}
.moneyrow input.bad { border-color: var(--accent); background: var(--red-bg); }
.moneyrow button {
  min-height: 52px; padding: 8px 20px; border: 2px solid var(--accent); background: var(--accent);
  color: #fff; font-size: 15px; font-weight: 800; cursor: pointer;
}
.moneyrow button:active { background: var(--accent-press); }

.toastbar { position: fixed; top: 14px; left: 0; right: 0; display: flex; justify-content: center; z-index: 60; pointer-events: none; }
.toastbar .t {
  background: var(--ink); color: #fff; padding: 10px 18px; font-size: 14px; font-weight: 700;
  animation: upIn 0.18s ease-out; box-shadow: 0 3px 10px rgba(45, 43, 43, 0.3);
}

/* offline queue badge */
.badgebar {
  position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto; max-width: 480px; z-index: 30;
  background: var(--ink); color: #fff; border-top: 2px solid var(--accent);
  display: flex; align-items: center; gap: 10px; font-size: 13.5px;
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px));
}
.badgebar button {
  min-height: 40px; border: 2px solid #fff; background: transparent; color: #fff;
  padding: 4px 14px; font-size: 13.5px; font-weight: 700; cursor: pointer;
}

/* footer */
footer {
  padding: 16px 18px 26px; color: var(--faint); font-size: 11.5px;
  display: flex; flex-direction: column; gap: 4px; border-top: 2px solid var(--rule); margin-top: 8px;
}
footer .total { font-size: 15px; color: var(--ink); font-weight: 800; }
footer a { color: var(--deep); text-decoration: none; font-weight: 700; }

/* ---- print page (/a/<token>/print) + @media print ---- */
body.print { background: #fff; color: #000; padding: 12px 16px; font-size: 13px; display: block; }
body.print h1 { font-size: 17px; }
body.print .p-stop { border: 1px solid #999; padding: 6px 10px; margin-bottom: 8px; }
body.print .p-head { font-size: 14px; margin-bottom: 2px; }
body.print .p-line { margin: 1px 0; }
body.print .chip { border: 1px solid #777; background: none; color: #000; font-weight: 400; padding: 1px 8px; font-size: 12px; }
@media print {
  .rhead, .badgebar, footer button { display: none !important; }
  body { background: #fff; color: #000; }
  .p-stop { break-inside: avoid; }
}

/* =====================================================================
   מסלול · ניהול — Nick's BI dashboard (body.ctl). Desktop-first RTL,
   same Modernist tokens: flat, 2px rules, zero radius, one red accent.
   ===================================================================== */
body.ctl { background: var(--bg); }
body.ctl #dash { max-width: 1560px; margin: 0 auto; }
body.ctl .cwrap { max-width: 1560px; margin: 0 auto; padding: 0 22px; }
body.ctl .loading { padding: 60px 20px; text-align: center; color: var(--faint); font-size: 15px; }
body.ctl .loading a { color: var(--deep); }
.ctl .num { font-variant-numeric: tabular-nums; }
.ctl .mut { color: var(--faint); font-weight: 600; }
.ctl .sm { font-size: 11.5px; }
.ctl .hot { color: var(--deep); }
.ctl .amber { color: var(--amber); }
.ctl .b { font-weight: 800; }
.ctl .n { font-variant-numeric: tabular-nums; }

/* header */
.chead2 { border-bottom: 2px solid var(--ink); background: var(--bg); position: sticky; top: 0; z-index: 30; }
.chead-in { display: flex; align-items: stretch; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.brand .mark { width: 24px; height: 24px; background: var(--accent); flex: none; }
.brand .b1 { font-size: 16px; font-weight: 800; line-height: 1.1; }
.brand .b2 { font-size: 11px; color: var(--faint); font-weight: 600; }
/* Eleven tabs are wider than a phone. The strip scrolls sideways inside itself rather than
   dragging the whole page with it (measured 22.09.2026: the page was 854px wide on an 820px
   screen and every tab scrolled sideways). A tab name never breaks onto two lines. */
.tabs { display: flex; overflow-x: auto; min-width: 0; max-width: 100%; scrollbar-width: thin; }
.tab {
  border: none; border-bottom: 4px solid transparent; background: none;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--muted);
  padding: 0 16px; cursor: pointer; white-space: nowrap; flex: none;
}
.tab:hover { color: var(--ink); border-bottom-color: var(--line); }
.tab.on { border-bottom-color: var(--accent); color: var(--ink); font-weight: 800; }
/* flex-wrap: the row carries up to seven facts and, since 03.10.2026, the sign-out link; on a
   400px phone it was 12px wider than the screen and every tab scrolled sideways
   (check_admin_layout.py caught it). Wrapped, it takes three short lines instead. */
.hmeta { display: flex; align-items: center; gap: 10px; row-gap: 4px; flex-wrap: wrap; padding: 12px 0;
  font-size: 11.5px; color: var(--faint); font-weight: 600; }
.hmeta .vr { width: 1px; height: 18px; background: var(--line); }
.hmeta .co { font-weight: 800; color: var(--ink); }
.hmeta .warn { color: var(--deep); font-weight: 800; }
.hmeta .hout { color: var(--deep); font-weight: 800; text-decoration: none; white-space: nowrap; }
.hmeta .hout:hover { text-decoration: underline; }

/* filter bar */
.fbar { border-bottom: 2px solid var(--rule); background: var(--gray-bg); position: sticky; top: 55px; z-index: 29; }
.fbar-in { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 9px 22px; }
.fgrp { display: flex; align-items: center; gap: 8px; }
/* The group that takes the rest of the row (the agent chips, the planner's day strip). It needs a
   REAL basis: `flex: 1` is `1 1 0%`, and a zero basis counts as fitting on the current line at any
   leftover width, so on a wide screen every other control stayed on the first line and the chips
   got what was left - 9px measured on a 1707px screen on 22.09.2026, ten names stacked 410px tall
   over the next label, on every tab. With 520px the group drops to its own line when the room left
   is smaller than that, and grows to fill the line when it is not. */
.fgrow { flex: 1 1 520px; min-width: 0; }
.flbl { font-size: 10.5px; font-weight: 800; color: var(--faint); letter-spacing: 0.04em; }
.seg { display: flex; border: 2px solid var(--ink); background: var(--white); }
.seg button {
  border: none; background: none; font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; cursor: pointer; color: #444141;
}
.seg button:hover { background: var(--tint); }
.seg button.on { background: var(--ink); color: #fff; font-weight: 800; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  border: 2px solid var(--ink); background: var(--white); font: inherit; font-size: 12.5px;
  font-weight: 600; padding: 4px 10px; cursor: pointer; color: var(--ink);
  white-space: nowrap;   /* "ירון ספיבק" is one name to the eye: never broken inside its chip */
}
.chip:hover { background: var(--tint); }
.chip.on { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 800; }
.wlbl { font-size: 11.5px; font-weight: 700; color: #444141; }

.ctl .body { padding-bottom: 50px; }

/* KPI row */
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 2px solid var(--rule); }
.kpis.k4 { grid-template-columns: repeat(4, 1fr); }
.kpi { padding: 18px 18px 20px; border-inline-start: 1px solid var(--line); }
.kpi:first-child { border-inline-start: none; }
.kl { font-size: 11px; font-weight: 800; color: var(--faint); letter-spacing: 0.04em; margin-bottom: 7px; }
.kv { font-size: clamp(22px, 2vw, 31px); font-weight: 800; line-height: 1; }
.kv.hot { color: var(--deep); }
.ku { font-size: 16px; font-weight: 700; }
.kd { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.dgood { font-size: 13px; font-weight: 800; }
.dbad { font-size: 13px; font-weight: 800; color: var(--accent); }
.ks { font-size: 11.5px; color: var(--faint); font-weight: 600; }

/* panels */
.panel { padding: 20px 22px 22px; border-inline-start: 1px solid var(--line); border-bottom: 2px solid var(--rule); }
.two { display: grid; grid-template-columns: 1fr 1fr; }
/* A grid column's minimum is its content's, so a seven-column table widened its panel past the
   screen and the table's own .tscroll never got to scroll (the debt tab was 550px wide on a
   400px phone, 22.09.2026). Letting the columns shrink hands the overflow to .tscroll. */
.two > *, .fgrid > *, .lcards > * { min-width: 0; }
.two.chartrow { grid-template-columns: 1.55fr 1fr; }
.ptop { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 16px; flex-wrap: wrap; }
.kick { font-size: 11px; font-weight: 800; color: var(--faint); letter-spacing: 0.04em; }
.ptitle { font-size: 19px; font-weight: 800; margin-top: 3px; }
.ctl .foot { font-size: 11px; color: var(--faint); margin-top: 12px; line-height: 1.5; }
.ctl .foot b { color: var(--deep); }

/* bar chart */
.bars { display: flex; align-items: flex-end; gap: 4px; height: 180px; border-bottom: 2px solid var(--ink); }
.bcol { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.bv { font-size: 9px; font-weight: 800; color: var(--faint); text-align: center; padding-bottom: 3px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar { height: var(--h, 4%); transform-origin: bottom; animation: gr 0.45s ease-out; }
.bar.cur { background: var(--accent); }
.bar.cmp { background: var(--ink); }
.bar.off { background: var(--line); }
@keyframes gr { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.blabels { display: flex; gap: 4px; margin-top: 6px; }
.bl { flex: 1; text-align: center; font-size: 9.5px; font-weight: 700; color: #9b9797;
  font-variant-numeric: tabular-nums; min-width: 0; }
.legend { display: flex; gap: 22px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  flex-wrap: wrap; font-size: 12px; font-weight: 700; }
.legend .lg { display: flex; align-items: center; gap: 7px; }
.legend .lg.bad b { color: var(--accent); }
.sw { width: 11px; height: 11px; flex: none; display: inline-block; }
.sw.cur, .sw.c2 { background: var(--accent); }
.sw.cmp { background: var(--ink); }
.sw.c1 { background: var(--deep); }
.sw.c3 { background: #ff8a75; }
.sw.c4 { background: var(--ink); }
.sw.out { border: 2px solid var(--ink); }

/* loss panel */
.lrow { display: flex; align-items: baseline; gap: 10px; margin-top: 3px; }
.lbig { font-size: 25px; font-weight: 800; color: var(--deep); font-variant-numeric: tabular-nums; }
.lstack { display: flex; height: 32px; margin: 14px 0 12px; border: 2px solid var(--ink); }
.lseg { width: var(--w, 0%); }
.lseg.c1 { background: var(--deep); }
.lseg.c2 { background: var(--accent); }
.lseg.c3 { background: #ff8a75; }
.lline {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border: none; border-bottom: 1px solid var(--line); background: none; font: inherit;
  cursor: pointer; text-align: start;
}
.lline:hover { background: var(--gray-bg); }
.lline.plain { cursor: default; border-bottom: none; padding-top: 12px; }
.lline .ll { flex: 1; font-size: 13.5px; font-weight: 700; }
.lline .lm { font-size: 11.5px; color: var(--faint); font-weight: 600; }
.lline .lv { font-size: 15px; font-weight: 800; width: 96px; text-align: start;
  font-variant-numeric: tabular-nums; }

/* focus cards */
.fgrid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--ink); }
.fcard { padding: 13px 15px 15px; border-inline-start: 1px solid var(--line); }
.fcard:first-child { border-inline-start: none; }
.tag { display: inline-block; color: #fff; font-size: 9.5px; font-weight: 800; padding: 3px 7px; margin-bottom: 7px; }
.tag.c1 { background: var(--deep); }
.tag.c2 { background: var(--accent); }
.tag.c4 { background: var(--ink); }
.fname { font-size: 14.5px; font-weight: 800; line-height: 1.25; min-height: 36px; }
.fnote { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 4px; line-height: 1.4; }
.fval { font-size: 20px; font-weight: 800; color: var(--deep); margin-top: 8px; font-variant-numeric: tabular-nums; }
.fag { font-size: 10.5px; color: var(--faint); font-weight: 700; }

/* loss tab cards */
.lcards { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 2px solid var(--rule); }
.lcard {
  text-align: start; padding: 18px; border: none; border-inline-start: 1px solid var(--line);
  border-bottom: 4px solid transparent; background: none; font: inherit; cursor: pointer;
}
.lcard:first-child { border-inline-start: none; }
.lcard:hover { background: var(--gray-bg); }
.lcard.on { border-bottom-color: var(--accent); background: var(--red-bg); }
.lcard.on .kl, .lcard.on .kv { color: var(--deep); }
.grpbar { display: flex; justify-content: flex-end; margin: -6px 0 12px; }

/* data tables */
.tscroll { overflow-x: auto; }
table.dtbl { border-collapse: collapse; width: 100%; font-size: 13px; }
table.dtbl th {
  background: var(--gray-bg); color: var(--muted); text-align: start; padding: 8px 11px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em; white-space: nowrap;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
}
table.dtbl th button {
  border: none; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0;
}
table.dtbl th button.on { color: var(--deep); }
table.dtbl td { padding: 10px 11px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.dtbl td.n { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.dtbl td.hot { color: var(--deep); font-weight: 800; }
table.dtbl td a { color: var(--deep); text-decoration: underline; }
table.dtbl td.b { font-weight: 800; }
table.dtbl td.mut { color: var(--faint); }
table.dtbl tbody tr:hover { background: var(--gray-bg); }
table.dtbl tr.clk { cursor: pointer; }
table.dtbl td .sub { font-size: 10.5px; color: var(--faint); font-weight: 600; }
table.dtbl tfoot td { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  font-weight: 800; background: var(--bg); font-variant-numeric: tabular-nums; }

/* horizontal bar rows */
.brow { margin-bottom: 12px; }
.btop { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px;
  font-size: 12.5px; font-weight: 700; gap: 10px; }
.btrack { height: 14px; background: var(--gray-bg); position: relative; display: flex; }
.bfill { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: var(--w, 0%); background: var(--accent); }
.bfill.a1 { background: var(--ink); }
.bfill.a2 { background: #6d6a6a; }
.bfill.a3 { background: #ff8a75; }
.bfill.a4 { background: var(--accent); }
.bfill.a5 { background: var(--deep); }
.bmark { position: absolute; inset-inline-start: 0; top: -4px; bottom: -4px; width: var(--w, 0%);
  border-inline-end: 2px solid var(--ink); }
.btrack.split .s1 { width: var(--w, 0%); background: var(--deep); }
.btrack.split .s2 { width: var(--w, 0%); background: var(--accent); }
.btrack.split .s3 { width: var(--w, 0%); background: #ff8a75; }
.lgrow { display: flex; gap: 16px; font-size: 11px; font-weight: 700; color: var(--muted); padding-top: 6px; }
.lgrow .lg { display: flex; align-items: center; gap: 6px; }

/* promo management page */
.savebar { background: var(--ink); color: #fff; padding: 8px 12px; font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.addbox { border: 2px solid var(--ink); padding: 14px; margin-bottom: 18px; background: var(--white); }
.addrow { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pin {
  flex: 1; min-width: 180px; border: 2px solid var(--ink); background: var(--white);
  color: var(--ink); padding: 9px 11px; font-family: inherit; font-size: 14px; border-radius: 0;
}
.pin.narrow { flex: 0 0 190px; min-width: 150px; }
.hits { margin-top: 10px; border-top: 1px solid var(--line); }
.hit {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 4px;
  border: none; border-bottom: 1px solid var(--line); background: none; font: inherit;
  cursor: pointer; text-align: start;
}
.hit:hover { background: var(--tint); }
.hit .hn { flex: 1; font-size: 13.5px; font-weight: 700; }
.hit .hc { font-size: 11.5px; color: var(--faint); }
.hit .hav { font-size: 11.5px; font-weight: 700; }
.hit .hoos { font-size: 11.5px; font-weight: 800; color: var(--deep); }
.hit .hadd { font-size: 12px; font-weight: 800; color: #fff; background: var(--accent); padding: 3px 9px; }
.hit .hin { font-size: 11.5px; font-weight: 700; color: var(--faint); }
.ctl .kick.mt { margin-top: 24px; }
.ctl .pad { padding: 6px 0 10px; }
table.dtbl td.tagp2 { font-weight: 800; color: var(--deep); white-space: nowrap; }
table.dtbl td .mini {
  border: 2px solid var(--ink); background: var(--white); font: inherit; font-size: 12px;
  font-weight: 700; padding: 4px 10px; cursor: pointer;
}
table.dtbl td .mini:hover { background: var(--tint); }

.dfoot { padding: 18px 22px 30px; font-size: 11px; color: var(--faint); line-height: 1.6; }
.dfoot a { color: var(--deep); font-weight: 700; }

@media (max-width: 1100px) {
  .kpis, .kpis.k4 { grid-template-columns: repeat(2, 1fr); }
  .two, .two.chartrow, .fgrid, .lcards { grid-template-columns: 1fr; }
  .fcard, .lcard, .kpi { border-inline-start: none; border-top: 1px solid var(--line); }
  .fbar { position: static; }
  .chead2 { position: static; }
}

/* ---- admin ops page (English, LTR) ---- */
body.admin { direction: ltr; padding: 14px 18px; max-width: 1100px; margin-inline: auto; background: var(--bg); display: block; }
body.admin h1 { font-size: 20px; }
body.admin h2 { font-size: 15px; margin: 20px 0 6px; color: var(--dim); }
body.admin .a-nav a { color: var(--deep); text-decoration: none; font-weight: 700; }
body.admin .warn { color: var(--deep); }
table.a-tbl {
  border-collapse: collapse; width: 100%; font-size: 13px; background: var(--card);
  border: 1px solid var(--line); margin-bottom: 8px;
}
table.a-tbl th {
  background: var(--bg); color: var(--dim); text-align: left; padding: 6px 9px; font-weight: 700;
  border-bottom: 2px solid var(--rule);
}
table.a-tbl td { padding: 5px 9px; border-top: 1px solid var(--line); }
table.a-tbl td.good { color: var(--green); font-weight: 700; }
body.admin details { margin: 6px 0; }
body.admin summary { cursor: pointer; color: var(--deep); font-weight: 700; }

/* Recording a payment is a secondary act inside the debt section, not one of the three
   primary actions. Collecting is not the field agent's job (12.08.26). */
.quietbtn {
  width: 100%; margin-top: 10px; padding: 10px; background: transparent;
  border: 1px solid var(--line); color: var(--muted); font: inherit; font-size: 13px;
  font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.quietbtn:hover { background: var(--gray-bg); color: var(--ink); }
.stat-s { font-size: 11px; color: var(--muted); font-weight: 700; margin-top: 2px; }

/* An office-assigned check pickup: the loudest thing on the card, because somebody in
   collection asked for this one specifically and the note carries the address, the time
   window and who to call first. */
.csec.checkbox { border: 2px solid var(--accent); background: var(--red-bg); padding: 0 12px 10px; margin-inline: 18px; }
.csec.checkbox > .shead { margin-inline: -12px; padding: 9px 12px; background: var(--accent); color: #fff; border-bottom: 2px solid var(--rule); }
.csec.checkbox > .shead .dot { display: none; }
.chknote { padding-top: 8px; font-size: 15px; font-weight: 700; line-height: 1.4; }

/* office check list: close a row when the check is in hand */
.minibtn {
  padding: 4px 10px; border: 1px solid var(--line); background: var(--white);
  font: inherit; font-size: 12px; font-weight: 700; color: var(--ink); cursor: pointer;
}
.minibtn:hover { background: var(--tint); border-color: var(--accent); color: var(--deep); }
.dtbl td.small { font-size: 12px; color: var(--muted); max-width: 330px; }
.dtbl td.ok { color: var(--green); font-weight: 700; }
.dtbl td.mut { color: var(--muted); }

/* ---- sign-in (09.09.2026) — replaces the magic link that WAS the credential ---- */
body.login { display: flex; align-items: center; justify-content: center;
  min-height: 100vh; margin: 0; background: var(--bg, #f3f2f2); }
.lbox { width: min(92vw, 360px); background: #fff; border: 1px solid var(--line, #e0dedb);
  border-radius: 14px; padding: 26px 22px 20px; box-shadow: 0 2px 14px rgba(0,0,0,.06); }
.lbox h1 { margin: 0 0 18px; font-size: 21px; font-weight: 800; color: var(--deep, #1c1b1a);
  text-align: center; letter-spacing: -.02em; }
.lbox label { display: block; margin: 12px 0 5px; font-size: 13px; font-weight: 700;
  color: var(--muted, #6f6a66); }
.lbox input { width: 100%; box-sizing: border-box; padding: 13px 12px; font: inherit;
  font-size: 17px; border: 1px solid var(--line, #e0dedb); border-radius: 9px;
  background: #fcfcfb; color: var(--ink, #2b2926); }
.lbox input:focus { outline: none; border-color: var(--accent, #b23c2e);
  background: #fff; }
.lbox button { width: 100%; margin-top: 20px; padding: 14px; font: inherit; font-size: 16px;
  font-weight: 800; color: #fff; background: var(--accent, #b23c2e); border: 0;
  border-radius: 9px; cursor: pointer; }
.lbox button:active { transform: translateY(1px); }
.lerr { margin: 0 0 6px; padding: 10px 12px; border-radius: 8px; font-size: 14px;
  font-weight: 700; color: #8a2b20; background: #fbe9e7; border: 1px solid #f2cdc8; }
.lhint { margin: 16px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted, #6f6a66);
  text-align: center; }

/* ---- agent settings: his own starting address (09.09.2026) ---- */
.rh-btn.gear { margin-inline-start: 8px; padding: 8px 11px; font-size: 17px; line-height: 1; }
.setbox { padding: 18px 16px 28px; }
.setbox label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700;
  color: var(--deep, #1c1b1a); }
.setbox input { width: 100%; box-sizing: border-box; padding: 14px 12px; font: inherit;
  font-size: 17px; border: 1px solid var(--line, #e0dedb); border-radius: 10px;
  background: #fff; color: var(--ink, #2b2926); }
.setbox input:focus { outline: none; border-color: var(--accent, #b23c2e); }
.sethint { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted, #6f6a66); }
.rh-btn.wide { display: block; width: 100%; margin-top: 22px; padding: 15px; font-size: 16px; }

/* ================================================================================
   MAP-FIRST (11.09.2026) — map screen, mini-card, my route, trend, returns.
   Everything here is a CLASS: CSP style-src 'self' blocks style="" attributes, and
   the map markers are L.divIcon elements whose only styling hook is className.
   ================================================================================ */

/* ---- the map canvas: a SIBLING of #app, so app.innerHTML never destroys it ---- */
#map {
  position: fixed; inset-inline: 0; top: 158px; bottom: 0;
  z-index: 1; background: var(--gray-bg);
}
#map[hidden] { display: none !important; }
.leaflet-container { font: inherit; background: var(--gray-bg); }
/* RTL: Leaflet asks for topleft, which the RTL page renders under the left thumb */
.leaflet-control-attribution { font-size: 10px; direction: ltr; }
.leaflet-control-zoom a { color: var(--ink); }

/* ---- map chrome (renders into #app, above the canvas) ---- */
.mapscr {
  position: fixed; inset-inline: 0; top: 0; z-index: 3;
  background: var(--bg); border-bottom: 2px solid var(--rule);
}
.mhead { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px; }
.mtitle { font-size: 15px; font-weight: 800; }
.msearch { height: 40px; padding: 0 12px 4px; }
.msearch input {
  width: 100%; height: 34px; padding: 0 10px; font: inherit; font-size: 15px;
  border: 1px solid var(--line); background: var(--white); color: var(--ink);
}
.mchips { display: flex; gap: 6px; height: 38px; padding: 0 12px; overflow-x: auto; }
.mchip {
  flex: none; padding: 5px 11px; font: inherit; font-size: 13px; font-weight: 700;
  border: 1px solid var(--line); background: var(--white); color: var(--muted);
  cursor: pointer;
}
.mchip.on { background: var(--ink); border-color: var(--ink); color: var(--white); }
.mchip.nogeo { border-style: dashed; }
.mcounts { display: flex; gap: 12px; height: 34px; padding: 6px 12px 0;
  font-size: 12px; font-weight: 700; color: var(--muted); }
.banner.mapmsg { position: fixed; top: 158px; inset-inline: 0; z-index: 4;
  background: var(--amber-bg); color: var(--amber); }

/* ---- the list: the fallback when the canvas cannot paint, and the off-map chip body ---- */
.maplist { position: fixed; inset-inline: 0; top: 158px; bottom: 56px; z-index: 2;
  overflow-y: auto; background: var(--bg); }
.mrow { display: flex; align-items: stretch; border-bottom: 1px solid var(--line);
  background: var(--white); }
.mrow-main { flex: 1; display: block; padding: 10px 12px; font: inherit; text-align: start;
  background: none; border: 0; border-inline-start: 5px solid var(--c, var(--line));
  color: var(--ink); cursor: pointer; }
.mrow-name { display: block; font-size: 15px; font-weight: 700; }
.mrow-sub { display: block; font-size: 12px; color: var(--muted); }
.mrow-why { display: block; font-size: 12px; color: var(--deep); margin-top: 2px; }
.mrow-pick { flex: none; width: 52px; font: inherit; font-size: 20px; font-weight: 800;
  background: none; border: 0; border-inline-start: 1px solid var(--line);
  color: var(--muted); cursor: pointer; }
.mrow-pick.on { background: var(--ink); color: var(--white); }

/* ---- locate + follow + the bottom bar ---- */
.mloc { position: fixed; inset-inline-start: 12px; bottom: 68px; z-index: 5;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.mloc button { padding: 9px 12px; font: inherit; font-size: 13px; font-weight: 700;
  background: var(--white); border: 2px solid var(--rule); color: var(--ink); cursor: pointer; }
.mloc .followbtn.on { background: var(--ink); color: var(--white); }
.mlocmsg { position: fixed; inset-inline: 12px; bottom: 62px; z-index: 5;
  padding: 7px 10px; font-size: 12px; font-weight: 700;
  background: var(--amber-bg); color: var(--amber); }
.mbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 6; height: 56px;
  display: flex; align-items: center; gap: 8px; padding: 0 12px;
  background: var(--ink); color: var(--white); }
.mbar.zero { height: 30px; font-size: 12px; background: var(--gray-bg); color: var(--muted); }
.mbar .mbar-n { font-weight: 800; }
.mbar button { margin-inline-start: auto; padding: 9px 14px; font: inherit; font-size: 14px;
  font-weight: 800; background: var(--accent); color: var(--white); border: 0; cursor: pointer; }
.mbar button.ghost { margin-inline-start: 0; background: none; border: 1px solid var(--white); }

/* ---- dots: three independent channels — colour, shape, decoration ---- */
.nadot, .medot { position: relative; box-sizing: border-box; border-radius: 50%; }
.nadot {
  width: 22px; height: 22px; background: var(--c, #9b9797);
  border: 2px solid var(--white); box-shadow: 0 0 0 1px rgba(32, 30, 29, .45);
}
.k-red { --c: #ec3013; }
.k-yellow { --c: #d99100; }
.k-green { --c: #1a7f37; }
.k-visited { --c: #5a6b7d; }
.k-ordered { --c: #3f5a86; }
.k-grey { --c: #9b9797; }
.k-head { --c: #1f5bd8; }
.nadot.q-street { background: var(--white); border: 4px solid var(--c); }
.nadot.q-centroid { background: var(--white); border: 3px dashed var(--c); }
.nadot.ring { box-shadow: 0 0 0 3px var(--ink); }
.nadot.lg { outline: 2px solid var(--ink); outline-offset: 2px; }
/* 07/10/2026 (Nick: "mark clients with ready check"): a ₪ badge on the dot, big enough to see */
.nadot.chq::after {
  content: "₪"; position: absolute; inset-inline-end: -8px; top: -8px;
  width: 15px; height: 15px; line-height: 15px; text-align: center; font-size: 10px; font-weight: 900;
  color: var(--white); background: #c62828; border: 1.5px solid var(--white); border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.mc-chq, .chqtop { background: #c62828; color: var(--white); font-weight: 800; padding: 8px 10px;
  margin: 6px 0 8px; border-radius: 8px; font-size: 15px; }
.chqtop { display: flex; flex-direction: column; gap: 2px; margin: 0 0 10px; }
.chqtop-n { font-weight: 600; font-size: 13px; opacity: .95; }
.nadot.pick { box-shadow: 0 0 0 4px var(--accent); }
.medot { width: 18px; height: 18px; background: #1f5bd8; border: 3px solid var(--white);
  box-shadow: 0 0 0 1px rgba(32, 30, 29, .45); }
.meacc { fill: #1f5bd8; fill-opacity: .10; stroke: #1f5bd8; stroke-opacity: .5; stroke-width: 1; }

/* ---- map mini-card (bottom sheet) ---- */
.sheet.mini { max-height: 45vh; overflow-y: auto; }
.sheet.list { max-height: 60vh; overflow-y: auto; }
.mc-name { font-size: 17px; font-weight: 800; }
.mc-addr { font-size: 13px; color: var(--muted); margin-top: 2px; }
.mc-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mb { padding: 2px 7px; font-size: 11px; font-weight: 800; background: var(--gray-bg); }
.mb.lg { background: var(--ink); color: var(--white); }
.mb.chq { background: var(--red-bg); color: var(--deep); }
.mb.today { background: var(--accent); color: var(--white); }
.mb.head { background: var(--blue-bg); color: var(--blue); }
.mb.wait { background: var(--amber-bg); color: var(--amber); }
.mb.ok { background: var(--green-bg); color: var(--green); }
.mb.skip { background: var(--gray-bg); color: var(--muted); }
.mc-why { margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--deep); }
.mc-open { display: block; width: 100%; min-height: 50px; margin-top: 10px; font: inherit; font-size: 17px;
  font-weight: 800; background: var(--ink); color: var(--white); border: 0; cursor: pointer; }
.mc-open:active { background: #444141; }
.g2.mc-links { margin: 10px 0 0; }
.mc-acts { display: flex; gap: 6px; margin-top: 10px; }
.mca { flex: 1; min-height: 44px; font: inherit; font-size: 14px; font-weight: 800;
  background: var(--white); border: 2px solid var(--rule); color: var(--ink); cursor: pointer; }
.mca.on { background: var(--ink); color: var(--white); }
.mc-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.posnotice { position: relative; margin-top: 10px; padding: 8px 26px 8px 10px;
  font-size: 12px; background: var(--gray-bg); color: var(--muted); }
.posnotice button { position: absolute; inset-inline-end: 4px; top: 4px;
  font: inherit; background: none; border: 0; color: var(--muted); cursor: pointer; }

/* ---- the order-taken row + the 3x warning ---- */
.ordrow { display: flex; align-items: center; gap: 8px; padding: 10px 0; }
.ordrow .ordq { font-size: 14px; font-weight: 700; }
.ordyes, .ordno { min-width: 62px; min-height: 44px; font: inherit; font-size: 15px;
  font-weight: 800; border: 2px solid var(--rule); background: var(--white);
  color: var(--ink); cursor: pointer; }
.ordyes { border-color: var(--accent); color: var(--deep); }
.ordrow.done { color: var(--green); font-weight: 800; }
.warnbox { margin: 10px 0; padding: 10px; font-size: 14px; font-weight: 700;
  background: var(--amber-bg); color: var(--amber); }

/* ---- today's list: the band mark and the products line ---- */
.bandchip { margin-inline-start: 8px; padding: 1px 7px; font-size: 11px; font-weight: 800; }
.band-ok { background: var(--green-bg); color: var(--green); }
.band-watch { background: var(--amber-bg); color: var(--amber); }
.band-risk { background: var(--red-bg); color: var(--deep); }
.r-prod { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.r-foot.empty { font-weight: 700; color: var(--ink); }
.emptyact { padding: 0 16px 16px; }

/* ---- the 12-month sparkline ---- */
.trendsec .spark { display: block; width: 100%; height: 56px; margin-top: 10px; }
.spark .sb { fill: var(--faint); }
.spark .sb.n { fill: var(--ink); }
.spark .sb.z { fill: var(--line); }
.spark .sb.neg { fill: var(--accent); }
.spark .sb.open { fill: none; stroke: var(--faint); stroke-width: 1; stroke-dasharray: 2 2; }
.spark .sb.clip { fill: var(--deep); }
.spark .sbase { stroke: var(--rule); stroke-width: 1; }
.sparkax { display: flex; justify-content: space-between; font-size: 10.5px;
  color: var(--faint); direction: ltr; }
.trendline { margin-top: 8px; font-size: 14px; font-weight: 700; }
.trendline.fall, .trendline.fall-big { color: var(--deep); }
.trendline.rise, .trendline.rise-big { color: var(--green); }
.trendsub { margin-top: 3px; font-size: 12px; color: var(--muted); }

/* ---- the returns box ---- */
.retbox .retsum { margin-top: 8px; font-size: 15px; font-weight: 800; color: var(--deep); }
.retbox .uitem { border-bottom-color: var(--line); }
.retreason { margin-top: 8px; font-size: 13px; font-weight: 700; }
.rethint { margin-top: 4px; padding: 8px 10px; font-size: 13px; line-height: 1.45;
  background: var(--gray-bg); color: var(--ink); }
.u-fall { margin-inline-start: 6px; padding: 1px 5px; font-size: 10.5px; font-weight: 800;
  background: var(--red-bg); color: var(--deep); }

/* ---- the visit state line ---- */
.vstate { padding: 10px 0 0; }
.vsline { font-size: 14px; font-weight: 800; }
.vstate.visited .vsline, .vstate.ordered .vsline { color: var(--amber); }
.vstate.confirmed .vsline { color: var(--green); }
.vstate.skipped .vsline, .vstate.expired .vsline { color: var(--muted); }

/* ---- my route ---- */
.mrhead { padding: 10px 18px; font-size: 13px; font-weight: 800; color: var(--muted); }
.mrrow { display: grid; grid-template-columns: 34px 1fr auto; gap: 4px 8px;
  padding: 11px 18px; border-bottom: 1px solid var(--line); background: var(--white);
  cursor: pointer; }
.mrrow .mr-seq { grid-row: span 2; font-size: 17px; font-weight: 800; color: var(--muted); }
.mrrow .mr-name { font-size: 15px; font-weight: 700; }
.mrrow .mr-sub { grid-column: 2; font-size: 12px; color: var(--muted); }
.mrrow.done { opacity: .55; }
.mrrow.gone { background: var(--gray-bg); }
.mr-gone { font-size: 11px; font-weight: 800; color: var(--muted); }
.mrgroup { padding: 12px 18px 6px; font-size: 12px; font-weight: 800; color: var(--muted);
  background: var(--gray-bg); }

/* ---- settings: the Waze / Google radio ---- */
.setlbl { display: block; margin: 26px 0 8px; font-size: 14px; font-weight: 700;
  color: var(--deep); }
.navradio { display: flex; align-items: center; gap: 8px; }
.navradio .navq { font-size: 13px; color: var(--muted); }
.navopt { padding: 11px 14px; font: inherit; font-size: 15px; font-weight: 800;
  border: 2px solid var(--rule); background: var(--white); color: var(--ink); cursor: pointer; }
.navopt.on { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* ---- admin: הצג על מפה — one agent's day on a read-only map (spec §7.8) ----
   The canvas (.amap) is a div admin.js owns and re-parents into .amap-slot after each
   render. Dots reuse the phone's .nadot / .k-* / .q-* / .ring classes above. */
.ptools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.minibtn.on, .minibtn.on:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.amap-box { margin: 0 0 16px; }
.amap-slot { border: 2px solid var(--ink); background: var(--gray-bg); }
.amap { width: 100%; height: 440px; }
@media (max-width: 1100px) { .amap { height: 340px; } }
/* the built route's sequence number, anchored above the customer dot */
.amnum {
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff; border: 1px solid #fff;
  font-size: 11px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}
/* the recorded phone position: a small cross. Leaflet positions the icon itself with a
   transform, so the rotation lives on the pseudo-elements only. */
.amx::before, .amx::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 16px; height: 3px; margin: -1.5px 0 0 -8px;
  background: var(--deep); box-shadow: 0 0 0 1px #fff;
  transform: rotate(45deg);
}
.amx::after { transform: rotate(-45deg); }
/* visit -> customer pin, drawn only for an exact address */
.amline { stroke: var(--ink); stroke-width: 2px; stroke-dasharray: 5 4; fill: none; }
.leaflet-tooltip.amtip { padding: 1px 5px; font-size: 11px; font-weight: 700; color: var(--muted); }

/* ---- viewer mode (13.09.2026): the test / admin sign-in looking at one field agent's app ----
   A calm purple no field agent ever sees. The bar GROWS with the phone's text size (a clipped
   "your taps do not count" is worse than a taller bar); app.js writes its real height into
   --vbh with a CSSOM write (CSP-safe), and everything that must sit below it reads that. */
.viewbar {
  position: sticky; top: 0; z-index: 25; flex: none;
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px;
  background: var(--purple-bg); color: var(--purple); border-bottom: 2px solid var(--purple);
}
.vb-txt { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.vb-pick { flex: none; display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; }
/* 16px: iOS zooms the whole page into any form control whose text is smaller */
.vb-pick select { max-width: 136px; min-height: 34px; padding: 0 6px; font: inherit; font-size: 16px;
  font-weight: 700; border: 2px solid var(--purple); border-radius: 0;
  background: var(--white); color: var(--ink); }
.vb-pick select:disabled { opacity: 0.6; }
#app.vmode .chead { top: var(--vbh, 44px); }     /* the card header sticks below the bar */
/* the map screen is all fixed-position: its chrome, list and canvas move down by the bar */
#app.vmap .viewbar { position: fixed; inset-inline: 0; }
#app.vmap .mapscr { top: var(--vbh, 44px); }
#app.vmap .maplist, #app.vmap .banner.mapmsg { top: calc(158px + var(--vbh, 44px)); }
#app.vmap ~ #map { top: calc(158px + var(--vbh, 44px)); }   /* #map is #app's next sibling */
/* the viewed agent's start address: readable, never editable */
.setbox input.ro { background: var(--gray-bg); color: var(--muted); }
/* viewer mode is read-only: an answer the agent gave is shown as a state, never as a control */
.bst.ro { display: inline-flex; align-items: center; cursor: default; }
.visitbtn.ro { cursor: default; }
.mbar.ro button.ghost { margin-inline-start: auto; }   /* the build button it sat next to is gone */
/* admin, agents tab: פתח את האפליקציה שלו under each name */
table.dtbl td .vwbtn { display: inline-block; margin-top: 6px; white-space: nowrap; }

/* ================================================================================
   CLIENT SEARCH · THE FULL CLIENT PAGE · צריכים הזמנה (14.09.2026)
   Classes only (CSP style-src 'self'). The full page is read-only for every role.
   ================================================================================ */

/* ---- the search row under the route header, and the results block ---- */
.rtools { display: flex; gap: 8px; align-items: center; padding: 10px 0 12px;
  border-top: 2px solid var(--rule); }
/* 16px: iOS zooms the page into a form control whose text is smaller */
.rtools input, .npick input {
  flex: 1; min-width: 0; height: 44px; padding: 0 12px; font: inherit; font-size: 16px;
  border: 2px solid var(--ink); border-radius: 0; background: var(--white); color: var(--ink);
}
.rtools .rh-btn { flex: none; }
.clres { background: var(--white); border-bottom: 2px solid var(--rule); }
.mapscr .clres { max-height: 42vh; overflow-y: auto; border-top: 2px solid var(--rule); }
/* while the map's results are open they own the space under the chrome: the fixed message
   banner would sit on top of them (the results carry their own status line) */
.mapscr.withres ~ .banner.mapmsg { display: none; }
.clr-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 18px;
  font-size: 12px; font-weight: 800; color: var(--muted); background: var(--gray-bg); }
.clr-note { flex: 1; min-width: 0; font-weight: 700; color: var(--amber); }
.clr-x { margin-inline-start: auto; min-width: 36px; min-height: 32px; font: inherit; font-size: 14px;
  background: none; border: 1px solid var(--line); color: var(--muted); cursor: pointer; }
.clrow { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.clr-main { flex: 1; min-width: 0; display: block; padding: 9px 18px; font: inherit; text-align: start;
  background: none; border: 0; color: var(--ink); cursor: pointer; }
.clr-main:active, .clr-side:active { background: var(--tint); }
.clr-name { display: block; font-size: 15px; font-weight: 800; line-height: 1.25; }
.clr-sub { display: block; font-size: 12px; color: var(--muted); }
.clr-due { display: block; font-size: 12px; font-weight: 800; color: var(--muted); }
.clr-due.late, .nx-due.late { color: var(--deep); }
.clr-side { flex: none; width: 52px; background: none; border: 0; border-inline-start: 1px solid var(--line);
  color: var(--ink); cursor: pointer; }
.clr-empty { padding: 12px 18px; font-size: 14px; font-weight: 700; color: var(--muted); }

/* ---- 'כרטיס מלא' on the day's card and on the mini-card ---- */
.chead .fullbtn { margin-inline-start: auto; flex: none; min-height: 40px; padding: 6px 10px; font-size: 12.5px; }
.mc-foot { flex-wrap: wrap; }
.mhead .rh-btn { margin-inline-start: auto; min-height: 34px; padding: 4px 10px; font-size: 12.5px; }

/* ---- the full client page ---- */
.fnote { position: static; }
.fstatus { display: flex; align-items: center; gap: 8px; margin: 14px 18px 0; padding: 10px 12px;
  border: 2px solid var(--c, var(--ink)); background: var(--white); font-size: 14px; font-weight: 700; }
.fstatus .fdot { width: 12px; height: 12px; flex: none; background: var(--c, var(--ink)); }
.fstatus b { color: var(--deep); font-weight: 800; }
.g2 .abtn.btnlike { font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-align: start; }
.fmoney { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid var(--line); }
.fmoney > div { padding: 10px 8px 10px 0; min-width: 0; }
.fmoney > div + div { padding-inline-start: 10px; border-inline-start: 1px solid var(--line); }
.fm-l { font-size: 11px; font-weight: 700; color: var(--faint); }
.fm-v { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fm-v.hot { color: var(--deep); }
.ftbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.ftbl th { text-align: start; font-size: 10.5px; font-weight: 800; color: var(--faint); padding: 6px 4px;
  border-bottom: 2px solid var(--rule); white-space: nowrap; }
.ftbl td { padding: 7px 4px; border-bottom: 1px solid var(--line); vertical-align: top;
  font-variant-numeric: tabular-nums; }
.ftbl td.late { color: var(--deep); font-weight: 800; }
.ftbl td.nm { width: 100%; }
.ftbl .code { display: block; font-size: 10.5px; color: var(--faint); }
.fscroll { max-height: 360px; overflow: auto; overscroll-behavior: contain; }
/* the week grid: how often he orders / is delivered / is invoiced on each weekday */
.wkgrid { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 8px; font-size: 12.5px; }
.wkgrid th, .wkgrid td { padding: 6px 0; text-align: center; border: 1px solid var(--line);
  font-variant-numeric: tabular-nums; }
.wkgrid th { font-size: 11px; font-weight: 800; color: var(--faint); background: var(--gray-bg); }
.wkgrid th.rl { width: 76px; text-align: start; padding-inline-start: 6px; }
.wkgrid td.z { color: var(--line); }
.wkgrid td.hi { background: var(--ink); color: var(--white); font-weight: 800; }
details.fdoc { border-bottom: 1px solid var(--line); }
details.fdoc > summary { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 9px 0; cursor: pointer;
  font-size: 13.5px; font-weight: 700; list-style: none; }
details.fdoc > summary::-webkit-details-marker { display: none; }
details.fdoc > summary::before { content: "+"; width: 14px; color: var(--faint); font-weight: 800; }
details.fdoc[open] > summary::before { content: "−"; }
.fdoc .fd-kind { color: var(--muted); }
.fdoc .fd-sum { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.fdoc .ftbl { margin-bottom: 8px; }
details.fmore > summary { padding: 9px 0; font-size: 13px; font-weight: 800; color: var(--deep); cursor: pointer; }
/* twelve monthly cells per product, oldest first in the markup: in the RTL page the newest then
   sits on the LEFT, as in the sales sparkline */
.pmon { display: flex; gap: 2px; margin-top: 3px; }
.pmon i { display: block; width: 9px; height: 9px; background: var(--gray-bg); }
.pmon i.l1 { background: #ffc4b8; }
.pmon i.l2 { background: #ff8a75; }
.pmon i.l3 { background: var(--accent); }
.pmon i.l4 { background: var(--deep); }
.flist .fl-row { padding: 8px 0; border-bottom: 1px solid var(--line); }
.flist .fl-row:last-child { border-bottom: none; }
.fvisit { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.fvisit .fv-day { flex: none; width: 44px; color: var(--faint); font-weight: 700; }
.fvisit .fv-act { flex: none; font-weight: 800; }
.frow-acts { display: flex; gap: 8px; margin: 12px 18px 0; }

/* ---- צריכים הזמנה ---- */
.nbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 18px 0; }
.nlbl { font-size: 11.5px; font-weight: 800; color: var(--faint); margin-inline-end: 4px; }
.nchip { min-height: 40px; padding: 6px 12px; font: inherit; font-size: 13.5px; font-weight: 700;
  border: 2px solid var(--ink); background: var(--white); color: var(--ink); cursor: pointer; }
.nchip.on { background: var(--ink); color: var(--white); }
.nchip:active { background: var(--tint); }
.nstat { padding: 10px 18px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.nstat.warn { color: var(--amber); }
.npick { margin: 10px 18px 0; padding: 10px; border: 2px solid var(--ink); background: var(--white); }
.npick .nplace { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; }
.npick .nopts { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.npick .nopt { min-height: 42px; padding: 6px 10px; font: inherit; font-size: 14px; font-weight: 700;
  text-align: start; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; }
.npick .nopt.off { color: var(--faint); cursor: default; }
.nrowx { display: flex; flex-wrap: wrap; gap: 8px 12px; padding: 12px 18px;
  border-bottom: 1px solid var(--line); background: var(--white); }
.nx-main { flex: 1 1 200px; min-width: 0; }
.nx-name { font-size: 15.5px; font-weight: 800; line-height: 1.25; }
.nx-sub { font-size: 12.5px; color: var(--muted); }
.nx-due { font-size: 13px; font-weight: 800; color: var(--muted); margin-top: 2px; }
.nx-why { font-size: 12px; color: var(--muted); margin-top: 2px; }
.nx-acts { display: flex; gap: 8px; flex: 1 1 100%; }
.nx-acts .abtn { flex: 1; justify-content: center; min-height: 44px; }
button.abtn { font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }

/* ---- תכנון ביקורים: the office plan screen (admin, 14.09.2026) ---- */
/* the save / day-length / conflict bars: a savebar that holds buttons and a second line */
.vpbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vpbar.hot { background: var(--accent); }
.vpbar a { color: #fff; }
.vpbar .vpsub { font-weight: 600; opacity: .78; }
/* the print-pack links are buttons to the eye and links to the browser: no JS, no popup block */
a.minibtn { display: inline-block; text-decoration: none; }
/* מלאה / מקוצרת + the page estimate: one block at the inline end of the panel head. The switch
   shares a row with the two links it decides, and the estimate sits under them — aligned to the
   inline START, so the Hebrew lines up under the "חבילת הדפסה" label instead of hanging off it. */
.vpexp { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 100%; }
.vpexp .fgrp { flex-wrap: wrap; }
.vphint { display: flex; flex-direction: column; gap: 2px; max-width: 460px; line-height: 1.45; }
.vphint .vpest { font-weight: 800; color: var(--ink); }
table.dtbl td.vpord { white-space: nowrap; }
table.dtbl td.vpord .minibtn + .minibtn { margin-inline-start: 4px; }

/* 04/10/2026: the location line - the agent sees when his route is being recorded */
.trackline { margin: 6px 12px 0; padding: 6px 10px; border-radius: 8px; background: #eef4ee; color: #2f5d34; font-size: 13px; }
.trackline.off { background: #fff4e5; color: #7a4b00; line-height: 1.6; }
.locbtn { margin-inline-start: 4px; padding: 3px 12px; border: 2px solid var(--accent); background: var(--accent);
  color: #fff; font-weight: 800; font-size: 13px; border-radius: 6px; cursor: pointer; }

/* 06/10/2026: /app — the Android app's install page (a plain document page) */
body.doc .docbox { max-width: 640px; margin: 0 auto; padding: 18px 16px 40px; line-height: 1.6; }
.docbox a.dlbtn { display: inline-block; margin: 6px 0 2px; padding: 14px 26px; border-radius: 10px;
  background: var(--accent); color: #fff; font-size: 17px; font-weight: 800; text-decoration: none; }
.docbox .dlmeta { color: var(--muted); font-size: 13px; margin-top: 0; }
.docbox ol.dlsteps li { margin-bottom: 8px; }

/* ---- מוצרים לפי סוכן (admin, 06.10.2026) ---- */
/* One agent's products, month by month. The grid scrolls inside its own box, both ways, so the page
   never scrolls sideways (check_admin_layout.py) — and while it scrolls, the month row and the
   product column stay in view. A sticky cell needs an opaque background and the separate border
   model: a collapsed border stays behind when its sticky cell moves. */
.pvctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 14px; }
.pvctl .pin { flex: 1 1 220px; max-width: 360px; }
.pvcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px;
  font-size: 13px; font-weight: 700; }
.pvbox { max-height: 70vh; overflow: auto; overscroll-behavior: contain; border-bottom: 2px solid var(--ink); }
table.dtbl.pvgrid { border-collapse: separate; border-spacing: 0; }
table.pvgrid thead th { position: sticky; top: 0; z-index: 2; }
table.pvgrid .pvname { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--bg);
  border-inline-end: 2px solid var(--line); }
table.pvgrid thead th.pvname { z-index: 3; background: var(--gray-bg); }
table.pvgrid tbody tr:not(.pvtot):hover td.pvname { background: var(--gray-bg); }
/* a table cell ignores min/max-width, so the name's own lines set the column: wrapped, never a sliver */
table.pvgrid td.pvname > div { min-width: 170px; max-width: 300px; }
/* the % change under each amount: plain when up, the house red when down */
table.pvgrid .pvp { font-size: 10.5px; font-weight: 700; color: var(--muted); }
table.pvgrid .pvp.hot { color: var(--deep); }
/* the month so far: greyed, set apart, never compared */
table.pvgrid .pvpart { color: var(--faint); border-inline-start: 2px dashed var(--line); }
/* the agent's own total — the number the dashboard shows */
table.pvgrid tr.pvtot td { font-weight: 800; background: var(--white); border-bottom: 2px solid var(--ink); }
.pvtie { font-size: 12px; font-weight: 800; color: var(--muted); margin-inline-start: 6px; }
.pvtie.hot { color: var(--deep); }
.pvmore { margin-top: 10px; }
@media (max-width: 600px) {
  table.pvgrid td.pvname > div { min-width: 120px; max-width: 150px; }
}