:root {
  /* Apple-style palette — system blue accent, neutral grays. */
  --brand: #0071e3;
  --brand-600: #0077ed;
  --brand-700: #0058b0;
  --brand-050: #eaf3fe;
  --bg: #f5f5f7;
  --surface: #ffffff;
  --line: #e5e5ea;
  --line-strong: #d2d2d7;
  --head-bg: #f5f5f7;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --danger: #e0392e;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --ring: 0 0 0 3px rgba(0,113,227,.35);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans Hebrew", "Arial Hebrew", sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* A base size, so nothing falls through to the BROWSER's size. Without this, any
   element that did not name a size of its own rendered at the browser's 16px while the
   app around it sits at 13-14 - which is how the collections screen came out a quarter
   larger than the children list beside it, and why the next thing added would have
   done the same. Anything with its own font-size still wins; this only catches what
   nobody sized. */
body { display: block; font-size: 14px; }

/* Form controls do NOT inherit the page's font - a browser gives them its own, so
   every <button>, <input>, <select> and <textarea> that did not say otherwise was
   drawn in a different typeface from the text beside it. About twenty rules had
   noticed this one at a time and patched themselves; the tab strip, the gan switcher
   at the top of every screen, and every .btn in the product had not. One rule here
   instead of twenty scattered ones - and anything added later is right by default.

   `font: inherit` (not just the family) so size, weight and line-height come from the
   page too. It sits near the top on purpose: every component rule below still sets
   its own size and wins. */
button, input, select, textarea { font: inherit; }
/* THE size of the dashboard. One number, and the only one.
   --------------------------------------------------------------------------
   This used to be computed in JavaScript from the height of the visible rows, so
   the number of rows a gan happened to have decided how big its text was: a gan
   with 95 rows drew at ~0.87 and one with 5 rows at ~1.1, and the same screen
   looked a quarter bigger in one gan than in the other. Every guard around it -
   a minimum row count, zoom ceilings, stored seeds, repeated re-measuring - was
   there to tame that. It is now a constant: identical in every gan, on every tab,
   with rows and without.

   To make everything bigger or smaller, change THIS ONE NUMBER. Anyone who wants
   their own size uses the browser's zoom (Cmd +/-), which composes with this
   predictably now that nothing is fighting it from underneath.

   The height divides by the scale because `zoom` shrinks the box it is on too:
   without it the page would end short of the bottom of the window by exactly the
   scale. (Modals and menus are appended to <body>, OUTSIDE this wrapper, so they
   are drawn at 100% - as they always have been.) */
#appScale {
  --app-scale: 0.87;
  zoom: var(--app-scale);
  display: flex; flex-direction: column;
  height: calc(100vh / var(--app-scale));
  /* A phone's 100vh is the screen with its browser bars hidden: taller than what shows
     while they are out (Safari on an iPhone by 40px, Chrome by more), so the whole page
     scrolled - the header slid away and the list ran on under the bars. dvh is the part
     that shows. (100vh stays as the fallback for a browser without dvh.) */
  height: calc(100dvh / var(--app-scale));
  overflow: hidden;
}
.spacer { flex: 1; }

/* ---- Top bar ---- */
.topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 22px;
  background: rgba(251,251,253,.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: var(--text);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.01em;
}
.brand-logo {
  height: 38px;
  width: 38px;
  object-fit: cover;
  border-radius: 10px;
  background: #fff;
  padding: 2px;
  box-shadow: 0 1px 4px rgba(0,0,0,.10);
}
.topbar .user { font-size: 14px; font-weight: 500; color: var(--muted); }
/* The top-bar actions row: inline on desktop, behind the ☰ on a phone (see the media
   query near the bottom). Keeping them in one wrapper lets the whole set collapse. */
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.topbar-menu-btn { display: none; }
.btn-link {
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 980px;
  background: var(--surface);
  transition: background .15s, border-color .15s;
}
.btn-link:hover { background: var(--head-bg); border-color: var(--muted); }
.btn-danger-link { color: var(--danger); background: rgba(224,57,46,.06); border-color: rgba(224,57,46,.35); cursor: pointer; font-family: inherit; }

/* The superuser's own controls, set apart at the end of the top bar. Fenced rather
   than merely placed: two of them reach past a single gan, and mixed in among the
   ordinary buttons they read as ordinary. The whole group renders only for a
   superuser, so nobody else's row moves by a pixel. */
/* One compact "משתמש על ▾" button that opens a small menu - the super tools grew past what
   an inline fenced row could hold cleanly. Scales as more are added. */
.su-tools { position: relative; display: flex; align-items: center; }
.su-caret { font-size: 10px; margin-inline-start: 2px; }
.su-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 190px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: var(--shadow-md); padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.su-menu[hidden] { display: none; }
.su-menu-item {
  display: block; width: 100%; box-sizing: border-box; text-align: right;
  font: inherit; font-size: 13px; font-weight: 500; padding: 9px 12px;
  border: 0; border-radius: 8px; background: none; color: var(--text);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.su-menu-item:hover { background: var(--head-bg); }
.su-menu-danger { color: var(--danger); }
.btn-danger-link:hover { background: rgba(224,57,46,.12); border-color: var(--danger); }

/* "Your page is out of date" - shown when the server refuses a save because the page
   was loaded before a deploy. Deliberately hard to miss and impossible to dismiss (no ✕):
   the only fix is a refresh, and until then nothing this page saves will land. Same
   floating-card shape as the update bar, and lifted off bottom:0 so it sits ABOVE the
   iPhone Safari bottom toolbar instead of being half-covered by it (the old full-width
   strip was). It is a WHITE card with red accents, not a solid-red one, on purpose:
   iOS Safari tints its bottom toolbar to the colour of the content behind it, so a
   solid-red card at the bottom bled red all over the toolbar (the very "looks old" look
   we are fixing). Red icon + red title + filled-red button carry the alarm; the white
   body keeps the toolbar clean and stays consistent with the update card. */
.stale-banner {
  position: fixed; z-index: 9999; inset-inline: 12px; bottom: calc(14px + env(safe-area-inset-bottom));
  max-width: 460px; margin: 0 auto; direction: rtl; box-sizing: border-box;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface, #fff); color: var(--text, #1d1d1f);
  border: 1px solid #f0b3ab; border-radius: 14px;
  padding: 10px 12px; box-shadow: 0 12px 32px rgba(122,33,24,.22);
  animation: toast-rise .24s ease-out;
}
.stale-banner .stale-ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: #fbe4e1; display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.stale-banner .stale-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.stale-banner .stale-txt b { font-size: 14px; font-weight: 600; color: #a3271b; }
.stale-banner .stale-txt small { font-size: 12px; color: var(--muted, #6e6e73); }
.stale-banner .stale-btn {
  flex: 0 0 auto; background: #a3271b; color: #fff; border: 0;
  border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.stale-banner .stale-btn:hover { background: #7a2118; }
@media (prefers-reduced-motion: reduce) { .stale-banner { animation: none; } }

/* "The system was updated" - the early warning, shown when the server reports a newer
   front-end than this page was loaded with. Nothing is broken yet and nothing was
   lost, so unlike the red bar above this one is calm and can be closed. */
/* "יש גרסה חדשה" - a floating card at the bottom, in the same language as the toasts,
   in place of the old full-width dark strip. */
.update-bar {
  position: fixed; z-index: 9998; inset-inline: 12px; bottom: calc(14px + env(safe-area-inset-bottom));
  max-width: 460px; margin: 0 auto; direction: rtl; box-sizing: border-box;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface, #fff); color: var(--text, #1d1d1f);
  border: 1px solid var(--line, #e5e5ea); border-radius: 14px;
  padding: 10px 12px; box-shadow: 0 12px 32px rgba(16,24,40,.20);
  animation: toast-rise .24s ease-out;
}
.update-bar .update-ic {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand-050, #eaf3fe); color: var(--brand, #0071e3);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.update-bar .update-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.update-bar .update-txt b { font-size: 14px; font-weight: 600; }
.update-bar .update-txt small { font-size: 12px; color: var(--muted, #6e6e73); }
.update-bar .update-btn {
  flex: 0 0 auto; background: var(--brand, #0071e3); color: #fff; border: 0;
  border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.update-bar .update-btn:hover { background: var(--brand-600, #0077ed); }
.update-bar .update-x {
  flex: 0 0 auto; background: none; border: 0; color: var(--muted, #6e6e73); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 4px 6px; font-family: inherit;
}
.update-bar .update-x:hover { color: var(--text, #1d1d1f); }
@media (prefers-reduced-motion: reduce) { .update-bar { animation: none; } }

/* Tab switch: the content pane slides in and fades up (animateSheet). */
@keyframes tab-switch { from { opacity: .3; transform: translateX(var(--tab-dir, 16px)); } to { opacity: 1; transform: none; } }
.sheet-area.tab-switch { animation: tab-switch .24s ease-out; }
@media (prefers-reduced-motion: reduce) { .sheet-area.tab-switch { animation: none; } }

/* The confetti burst for a milestone (celebrate) - a canvas over everything, no input. */
.confetti-cv { position: fixed; inset: 0; z-index: 3000; pointer-events: none; }

/* The run a search matched, marked in a card's name/summary so the eye lands on why it
   is in the results (hlText). A soft brand tint, not a jarring yellow. */
.search-hl {
  background: var(--brand-200, #cfe3fb); color: inherit;
  border-radius: 3px; padding: 0 1px; font-weight: 700;
}

/* A long press on a phone card opens this actions sheet (openCardMenu). It rises from the
   bottom on the same pay-sheet base, so it reads as one of the app's own sheets. */
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
.card-menu { animation: sheet-up .2s ease-out; }
.card-menu .pay-sheet-btn { text-align: center; }
.card-menu-del { color: var(--danger); }
@media (prefers-reduced-motion: reduce) { .card-menu { animation: none; } }
/* The card header is a press target, so the iPhone's text-selection callout must not
   fire on the hold. */
#grid.grid-cards tbody td.card-head { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* Kindergarten switcher */
.kg-switch { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kg-switch label { font-size: 13px; font-weight: 500; color: var(--muted); }
.kg-switch select {
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  /* The option labels carry the gan's whole identity (name · city · year), so this
     select would otherwise size itself to the longest one and, in a single-line top
     bar that never wraps, push the buttons at the far edge off the screen. Cap it and
     let flex shrink it; the full label is still there when the list is open. */
  max-width: 260px;
  min-width: 0;
  text-overflow: ellipsis;
}

/* ---- Tabs (scrollable pills) ---- */
.tabs {
  display: flex;
  gap: 7px;
  padding: 14px 22px 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.tabs::-webkit-scrollbar { height: 6px; }
.tabs::-webkit-scrollbar-thumb { background: #c7ccd3; border-radius: 3px; }
.tab {
  border: none;
  background: #ececf1;
  color: #3a3a3e;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .15s, color .15s, transform .05s;
}
.tab:hover { background: #e0e0e6; }
.tab.active { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.tab:active { transform: translateY(1px); }
.tab.dragging { opacity: .45; }
.tab.drop-target { box-shadow: inset 0 -3px 0 0 var(--brand); }
/* "חדש" chip on a newly-shipped tab - brand pill on an idle tab, inverted to white on
   the active (brand) one so it reads on either ground. Fades once the tab is opened. */
.tab.has-badge { display: inline-flex; align-items: center; gap: 6px; }
.tab-new {
  font-size: 10px; font-weight: 800; line-height: 1; letter-spacing: .02em;
  background: var(--brand); color: #fff; padding: 2px 6px; border-radius: 999px;
}
.tab.active .tab-new { background: #fff; color: var(--brand); }
.tab-add {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  padding: 7px 14px;
  background: transparent;
  color: var(--brand-700);
  border: 1px dashed var(--line-strong);
  flex: 0 0 auto;
}
.tab-add:hover { background: var(--brand-050); border-color: var(--brand); }
/* On a phone the pills overflow and scroll sideways. JS keeps the active pill centred
   (scrollActiveTabIntoView) and toggles .more-left / .more-right on the wrap when there
   is content past that edge; we then show a faded chevron there as a "scroll for more"
   hint. Desktop: the wrap is inert, the chevrons never show. */
.tabs-wrap { position: relative; }
@media (max-width: 560px) {
  .tabs { scroll-padding-inline: 26px; }
  .tabs::-webkit-scrollbar { height: 0; }
  .tabs-wrap::before, .tabs-wrap::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 36px; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 800; color: var(--brand-700); direction: ltr;
    pointer-events: none; opacity: 0; transition: opacity .15s;
  }
  .tabs-wrap::before { right: 0; background: linear-gradient(to left, var(--surface) 45%, transparent); content: "\203A"; }
  .tabs-wrap::after  { left: 0;  background: linear-gradient(to right, var(--surface) 45%, transparent); content: "\2039"; }
  .tabs-wrap.more-right::before { opacity: 1; }
  .tabs-wrap.more-left::after   { opacity: 1; }
}

/* Optional-tabs picker popover */
.tab-picker {
  position: fixed;
  z-index: 1200;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 8px;
  min-width: 180px;
}
.tab-picker-title { font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 8px 8px; }
.tab-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
/* Hover tints for a mouse only - a touch screen keeps :hover on the last row tapped, which
   in "הלשוניות שלי" lands on the row that just moved INTO the finger's place. */
@media (hover: hover) and (pointer: fine) {
  .tab-picker-row:hover { background: var(--head-bg); }
  .tp-mv:hover:not(:disabled) { background: var(--brand-050); border-color: var(--brand); }
}
.tab-picker-row input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
/* "הלשוניות שלי" (openTabPicker): each row is the show/hide checkbox + name, then ▲▼
   to move the tab one place. The name fills the row, so tapping it toggles the box. */
.tab-picker.tab-picker-order { min-width: 240px; }
.tab-picker-sub { font-size: 12px; font-weight: 600; color: var(--muted); padding: 0 8px 6px; margin-top: -4px; }
.tab-picker-order .tab-picker-row { cursor: default; padding-block: 4px; }
.tab-picker-lbl { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; cursor: pointer; padding-block: 3px; }
.tab-picker-move { display: flex; gap: 4px; flex: 0 0 auto; }
.tp-mv {
  width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--surface); color: var(--brand); font-size: 12px; line-height: 1; cursor: pointer;
}
.tp-mv:disabled { opacity: .35; cursor: default; }
.tp-mv:focus-visible { outline: none; box-shadow: var(--ring); }
/* The row that just moved flashes, so the eye follows it to its new place. */
.tab-picker-row.tp-moved { animation: tp-moved .7s ease-out; }
@keyframes tp-moved { from { background: var(--brand-050); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .tab-picker-row.tp-moved { animation: none; } }
/* The ☰ entry to it is phone-only (see the max-width:560px block): on desktop the "+"
   is always in view at the end of the tab strip. */
.topbar-phone-only { display: none; }

/* ---- Sheet area (card) ---- */
.sheet-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 14px 22px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  min-height: 0;
}
/* Committee stacks a card list + the permissions panel; scroll the whole sheet as
   one (grid-wrap sized to content) so there's no gap between them and no separate
   inner scroll. */
.sheet-area.sa-committee { overflow-y: auto; }
.sheet-area.sa-committee .grid-wrap { flex: 0 0 auto; overflow: visible; }
/* An empty list's tab (applyEmptyTab): no grid to scroll, so the sheet itself scrolls -
   on a phone the staff tab's open "פרטי הגן" panel pushed its "איך מתחילים?" out of reach. */
.sheet-area.sa-empty { overflow-y: auto; }
/* "יומן הגן" is a short settings-style screen, not a grid. The full-height white grid
   sheet left it adrift in empty white, so this tab drops the sheet chrome and lets its
   own cards sit on the page's grey background (like the live page), with room to scroll. */
.sheet-area.sa-calendar { background: transparent; border-color: transparent; box-shadow: none; overflow-y: auto; }
.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

/* Buttons */
.btn {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 980px;
  padding: 9px 18px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
  transition: background .15s, transform .05s;
}
.btn:hover { background: var(--brand-600); }
.btn:active { transform: translateY(1px); }
/* Shown-but-not-clickable: greyed, no hover lift, and NOT pointer-events:none so the
   title tooltip (why it is unavailable) still appears on hover. The click handler no-ops. */
.btn.is-disabled { opacity: .45; cursor: not-allowed; }
.btn.is-disabled:hover { background: var(--brand-050); }
.btn.is-disabled:active { transform: none; }
.btn-secondary { background: var(--brand-050); color: var(--brand-700); box-shadow: none; }
.btn-secondary:hover { background: #dbeafd; }
/* Prominent CTA — the button the user should press at this stage. Filled in the
   brand colour (like the primary button) so it clearly stands out. */
.btn-prominent { background: var(--brand); color: #fff; font-weight: 800;
  box-shadow: 0 3px 12px rgba(0,113,227,.35); }
.btn-prominent:hover { background: var(--brand-600); }
/* Compact icon-only button (text moved to a tooltip), e.g. the post-approval
   "בניית תקציב מחדש" / "מחיקת תקציב" buttons. */
.btn-icon { padding: 6px 9px; font-size: 15px; line-height: 1; }
/* "שיתוף ההורים" — WhatsApp-green with the logo + label inline. */
.btn-whatsapp { background: #25d366; color: #fff; display: inline-flex; align-items: center; gap: 6px; }
.btn-whatsapp:hover { background: #1eb85a; }
.btn-whatsapp svg { flex: none; }
/* "מחיקת תקציב" — same shape as the other toolbar buttons but a danger tint.
   The id wins the cascade over the base .btn blue defined just above. */
#deleteBudget, #deleteAllChildren { background: rgba(224,57,46,.07); color: var(--danger); border-color: rgba(224,57,46,.4); box-shadow: none; }
#deleteBudget:hover, #deleteAllChildren:hover { background: rgba(224,57,46,.14); border-color: var(--danger); }

.status { font-size: 13px; color: var(--muted); min-width: 96px; font-weight: 600; }
.status.saved { color: var(--brand); }
.status.error { color: var(--danger); }

.search {
  padding: 9px 38px 9px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font-size: 13px;
  min-width: 220px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat right 12px center;
  transition: box-shadow .12s, border-color .12s;
}
.search:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }

/* ---- Grid ---- */
.grid-wrap { flex: 1; overflow: auto; min-height: 0; overflow-anchor: none; }
/* Phone, the plan with its summary cards folded (updateBudgetCollapse): the list can
   always scroll at least a little. Folding makes the list's frame taller, and a short plan
   (5 rows) then fit it whole, snapped back to the top - and the top re-opens the cards:
   they flickered and the last row could not be reached. With this room it stays folded
   until scrolled back up to the top, like any longer list. */
.grid-wrap.bsum-fold-room > .grid-inner { min-height: calc(100% + 40px); }
/* max-content, and NOT min-width:100%. Forcing every table to fill the page stretched
   the narrow ones absurdly: the committee tab has two columns (name, role) and they
   were spread across the whole screen. A wide sheet - the children list, the annual
   plan - already exceeds the page on its own, so nothing there changes. */
.grid { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: max-content; min-width: 100%; font-size: 13px; }
/* Fixed layout → column widths come from the <colgroup>; cells clip cleanly. */
.grid tbody td { overflow: hidden; }
/* Before the budget is approved, hide "עלות בפועל" + "אחראי.ת" (post-approval columns). */
.grid.pre-approval col.col-post-approval { width: 0 !important; }
.grid.pre-approval th.col-post-approval,
.grid.pre-approval td.col-post-approval { display: none; }
.grid thead th {
  position: sticky;
  top: 0;
  background: var(--head-bg);
  border-bottom: 1px solid var(--line-strong);
  padding: 11px 12px;
  text-align: center;
  font-weight: 700;
  color: #434a52;
  white-space: nowrap;
  z-index: 2;
}
/* Column-resize grip on the (inline-end) left edge of each header cell. */
.grid thead th.col-resizable { position: sticky; }
.col-resize-grip {
  position: absolute; top: 0; bottom: 0; left: 0; width: 9px;
  cursor: col-resize; z-index: 3; touch-action: none;
}
.col-resize-grip::after {
  content: ""; position: absolute; top: 20%; bottom: 20%; left: 4px; width: 2px;
  background: transparent; border-radius: 2px; transition: background .12s;
}
.col-resize-grip:hover::after, .col-resize-grip.dragging::after { background: var(--brand); }
body.col-resizing { cursor: col-resize; user-select: none; }
/* Fixed-width columns clip their content so a narrow width truncates cleanly. */
.grid tbody td .cell-select, .grid tbody td .cell-input { text-overflow: ellipsis; }
.th-label.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.col-filter { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 5px; font-size: 11px; font-weight: 500; color: var(--muted); cursor: pointer; white-space: nowrap; }
.col-filter input { width: 13px; height: 13px; accent-color: var(--brand); cursor: pointer; margin: 0; }
.th-label.sortable:hover { color: var(--brand); }
/* A birthday header opens a sort menu (day+month vs age) - a small caret hints at it. */
.th-label.th-has-sortmenu::after { content: "⌄"; margin-inline-start: 3px; opacity: .55; font-size: .9em; }
/* Per-column filter funnel — sits next to the (centered) header label. */
.th-label { display: inline-block; vertical-align: middle; }
/* "have-photo / total" count on the children תמונה header (e.g. 5/24). */
.photo-count { display: inline-block; margin-inline-start: 6px; vertical-align: middle;
  font-size: 11px; font-weight: 700; color: var(--brand-700); background: var(--brand-050);
  border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.photo-count:empty { display: none; }
.col-filter-btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-inline-start: 6px; width: 23px; height: 23px; padding: 0;
  border: 1px solid var(--line); background: #fff; color: var(--brand-700); cursor: pointer;
  border-radius: 6px; vertical-align: middle; opacity: .85; transition: opacity .1s, color .1s, background .1s;
}
.col-filter-btn:hover { opacity: 1; color: #fff; background: var(--brand-700); border-color: var(--brand-700); }
.col-filter-btn.active { opacity: 1; color: #fff; background: var(--brand); border-color: var(--brand); }
/* Filter menu extras (built on .ms-picker). */
.colfilter-bar { display: flex; gap: 6px; padding: 0 2px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.colfilter-link { border: none; background: transparent; color: var(--brand-700); font-size: 12px; font-weight: 700; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.colfilter-link:hover { background: var(--head-bg); }
.colfilter-picker .tab-picker-row { justify-content: flex-start; }
.cf-val { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.cf-count { color: var(--muted); font-size: 12px; font-weight: 600; margin-inline-start: 8px; }
.grid thead th.rownum, .grid tbody td.rownum {
  width: 46px;
  text-align: center;
  color: var(--muted);
  background: var(--head-bg);
  position: sticky;
  right: 0;
  font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--line);
}

/* The "#" column is sticky sideways AND its header is sticky downwards, so the header
   cell is a CORNER: it overlaps the numbers scrolling underneath it. Both used to take
   z-index 1 from the rule above - and at equal z-index the browser paints whatever
   comes later in the document, which is always tbody. So the numbers were drawn over
   their own header.
   The corner therefore outranks both the body column and the rest of the header row
   (which is 2). This used to be set only under .has-freeze, a class that is added on
   the children and staff tabs and NOT on the annual plan - which is exactly why the
   header vanished there and nowhere else. It is not about freezing columns; a sticky
   corner is always on top. */
.grid tbody td.rownum { z-index: 1; }
.grid thead th.rownum { z-index: 7; }
.grid tbody td { border-bottom: 1px solid var(--line); padding: 0; vertical-align: middle; }
.grid tbody tr { transition: background .1s; }
.grid tbody tr:hover td { background: var(--brand-050); }
.grid tbody tr:hover td.rownum { background: var(--brand-050); }

/* Post-import warnings: a row that needs attention is soft yellow, the exact problem cell
   a stronger yellow (with the message as its title tooltip). The row number becomes a ✓
   "done" button on hover, which clears the row's marks. See applyImportWarnings. */
.grid tbody tr.row-warn td { background: #fff7d6; }
.grid tbody tr.row-warn:hover td { background: #fdf0b8; }
.grid tbody tr.row-warn td.cell-warn { background: #ffe27a; box-shadow: inset 0 0 0 1px #e8c34a; }
.grid tbody tr.row-warn:hover td.cell-warn { background: #ffdb5c; }
td.rownum .rownum-done {
  display: none; border: 0; cursor: pointer; font: inherit; line-height: 1;
  width: 22px; height: 22px; border-radius: 50%; background: var(--good, #3a9d5d);
  color: #fff; font-weight: 800;
}
tr.row-warn:hover td.rownum.rownum-warn .rownum-n { display: none; }
tr.row-warn:hover td.rownum.rownum-warn .rownum-done { display: inline-flex; align-items: center; justify-content: center; }
/* --- Frozen leading columns (staff / children) -----------------------------
   The row number, the actions (trash) column and the identity column (name /
   first name) stay pinned to the start (right) edge while the rest of the wide
   table scrolls underneath. The two offsets are set in buildHeader per tab. */
.grid.has-freeze tbody td:nth-child(2),
.grid.has-freeze thead th:nth-child(2) { position: sticky; right: var(--freeze-r2, 46px); }
.grid.has-freeze tbody td:nth-child(3),
.grid.has-freeze thead th:nth-child(3) {
  position: sticky; right: var(--freeze-r3);
  border-left: 1px solid var(--line-strong);                   /* the freeze boundary */
}
.grid.has-freeze tbody td:nth-child(2),
.grid.has-freeze tbody td:nth-child(3) { background: var(--surface); z-index: 3; }
.grid.has-freeze thead th:nth-child(2),
.grid.has-freeze thead th:nth-child(3) { z-index: 6; }
.grid.has-freeze tbody tr:hover td:nth-child(2),
.grid.has-freeze tbody tr:hover td:nth-child(3) { background: var(--brand-050); }
/* Staff: the alternating-day-off trio (יום חופש לסירוגין · שבוע · מחליף/ה) is one
   concept — a tinted band bracketed on both sides so it reads as a single group. */
.grid .col-altgroup { background: #fbf6ea; }
.grid thead th.col-altgroup { background: #f3e8cf; }
.grid .col-altgroup-start { border-right: 2px solid #e3cf9f; }
.grid .col-altgroup-end { border-left: 2px solid #e3cf9f; }

/* A light divider that opens a new column group (schema: sep). The tab reads right to
   left, so it sits on the group's right (leading) edge, like col-altgroup-start - but
   grey and subtle: it separates the groups, it does not tint them. */
.grid .col-group-sep { border-right: 2px solid #e6e8ec; }
.grid thead th.col-group-sep { border-right: 2px solid #d7dbe2; }

/* Cell controls — invisible until focused, then a soft inset ring */
.cell-input, .cell-select, .cell-text {
  width: 100%;
  border: none;
  background: transparent;
  padding: 10px 12px;
  font: inherit;
  color: inherit;
  text-align: center;
  border-radius: 8px;
  transition: box-shadow .12s, background .12s;
}
.cell-input:focus, .cell-select:focus, .cell-text:focus {
  outline: none;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--brand);
}
.cell-text { resize: none; min-height: 38px; line-height: 1.4; }
/* Editable long text: wraps and fits the row (up to the chosen number of lines - see
   sizeTextCells in app.js), expands to the whole text while focused. */
.cell-text-preview { height: 38px; white-space: pre-wrap; overflow: hidden; }
.cell-text-preview:focus { overflow: auto; position: relative; z-index: 3; }
/* Read-only / derived long text: the same fit, just never focusable. */
.cell-text-full { white-space: pre-wrap; overflow: hidden; }
/* More text than the row shows: fade the last line (and hide the top of the next one,
   which would otherwise peek into the bottom padding). Hover shows it all; click opens. */
.cell-text-preview.is-clipped:not(:focus), .cell-text-full.is-clipped {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent calc(100% - 9px));
          mask-image: linear-gradient(to bottom, #000 calc(100% - 20px), transparent calc(100% - 9px));
}
/* Row-height grip on the bottom edge of the "#" cell, and its live label while dragging. */
.row-grip { position: absolute; inset-inline: 0; bottom: 0; height: 6px; cursor: row-resize; z-index: 2; }
.row-grip:hover { background: var(--brand-200); }
body.row-resizing, body.row-resizing * { cursor: row-resize !important; user-select: none; }
.row-resize-tip {
  position: fixed; z-index: 1000; pointer-events: none;
  background: var(--brand-700); color: #fff; font-size: 12px; font-weight: 700;
  padding: 3px 9px; border-radius: 6px; white-space: nowrap;
}
/* The "#" and actions headers read as one corner cell - no divider between them. On a
   long-text tab the corner holds the row-height control (buildCornerCtl in app.js),
   inside the "#" header and centred across BOTH columns. It is a ZERO-width block: the
   table still counts cell contents when it sizes itself (even in fixed layout), so a
   block as wide as the two columns widened the "#" column instead of overlapping the
   actions one. Zero width adds nothing; relative positioning slides it to the middle of
   the pair without touching layout; its items overflow evenly around that centre line.
   Being in flow, it still sets the header row's height. */
.grid thead th.rownum { border-left-color: transparent; }
.grid thead th.rownum.has-corner { padding: 6px 0; }
.corner-ctl {
  width: 0;
  position: relative;
  inset-inline-start: calc(var(--corner-w, 176px) / 2);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.corner-cap { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .02em; white-space: nowrap; }
.row-lines {
  font: inherit; font-size: 12px; font-weight: 600; color: var(--text); background: #fff;
  border: 1px solid var(--line-strong); border-radius: 8px; padding: 3px 6px;
  max-width: calc(var(--corner-w, 176px) - 10px); cursor: pointer;
}
.row-lines:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--brand); }
.corner-ctl .col-filter-sel { max-width: calc(var(--corner-w, 176px) - 10px); }
@media (max-width: 560px) { .row-lines, .corner-cap, .row-grip { display: none !important; } }
.cell-input { text-overflow: ellipsis; }
/* The weekday line under a plan date (the choice itself stays a date picker). Hidden in card view,
   which renders dates its own way. */
.cell-dow { font-size: 11px; color: #8a94a2; text-align: center; line-height: 1; margin: -5px 0 5px; pointer-events: none; }
.grid-cards .cell-dow { display: none; }
.cell-num { text-align: center; direction: ltr; font-variant-numeric: tabular-nums; }
/* Recipe-driven (computed) cost cell: value + a small "מחושב" pill. */
.grid td.cell-computed { position: relative; }
.grid td.cell-computed .cell-input { background: var(--brand-050); border-color: var(--brand-200, #cfe3fb); }
.computed-badge {
  display: block; margin: 0 auto 3px; width: fit-content;
  font-size: 10px; font-weight: 700; line-height: 1.4;
  color: var(--brand-700); background: var(--brand-050);
  border: 1px solid var(--brand-200, #cfe3fb); border-radius: 999px;
  padding: 0 7px; cursor: help; direction: rtl;
}
.grid td.cell-computed { cursor: help; }
/* Immediate hover tooltip showing the cost breakdown of a "מחושב" cell. */
.calc-tooltip {
  position: fixed; display: none; z-index: 60;
  background: #1d1d1f; color: #fff; font-size: 12px; font-weight: 600;
  padding: 7px 11px; border-radius: 8px; white-space: nowrap; direction: rtl;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); pointer-events: none;
}
.calc-tooltip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #1d1d1f;
}
/* "+" add-row footer at the bottom of the grid */
.grid-addrow td { padding: 0; background: var(--head-bg); border-bottom: none; }
.grid-addrow-btn {
  width: 100%; border: none; background: none; cursor: pointer;
  padding: 10px; font: inherit; font-size: 13px; font-weight: 600; color: var(--brand-700);
  transition: background .12s;
}
.grid-addrow-btn:hover { background: var(--brand-050); }
/* Cost / number columns are short — keep them narrow, wrap the header. */
.grid th.col-num, .grid td.col-num { width: 84px; }
.grid th.col-num .th-label { white-space: normal; }
/* Text / long-text columns get the freed space so they're readable. */
/* Default width comes from the <colgroup> (170px); a low floor lets the manual
   resize grip drag a text column narrower (down to the 48px drag minimum). */
.grid th.col-text, .grid td.col-text { min-width: 56px; }
/* Allergies is a secondary column — keep it compact. */
.grid th.col-allergies, .grid td.col-allergies { width: 104px; min-width: 84px; }
td.readonly { background: var(--head-bg) !important; color: var(--muted); }
td.readonly .cell-input { color: var(--muted); }

/* Draft budget rows (pending approval) + the build banner */
.draft-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; background: #fff4e0; border-bottom: 1px solid #f0d9a8; }
.draft-banner-text { font-size: 13px; color: #8a5a0b; flex: 1; min-width: 200px; }
/* Line the "אשר הכל" button's start edge up with the per-row "✓ אשר" pills,
   which sit past the sticky row-number column (46px) + a small gap. */
#draftApproveAllBtn { margin-inline-start: 49px; }
/* A draft (unapproved) row: no background tint — just a calm slate-blue accent
   on the start edge, so the table stays clean while building. */
.row-draft td.rownum { box-shadow: inset 3px 0 0 0 #9db4cc; }
.draft-approve-btn {
  border: 1px solid #34a853; background: #eafaef; color: #1e7a3c; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; margin-inline-end: 4px; white-space: nowrap;
}
.draft-approve-btn:hover { background: #d7f3e0; }
.draft-revert-btn {
  border: 1px solid var(--danger); background: rgba(224,57,46,.06); color: var(--danger); cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; margin-inline-end: 4px; white-space: nowrap;
}
.draft-revert-btn:hover { background: rgba(224,57,46,.14); }

/* Each planned group is wrapped in a .grp-box. On desktop the box must be transparent so
   its rows stay ordinary table rows (display:contents); a phone turns it into a fence. */
#grid tbody .grp-box { display: contents; }

/* Annual budget: collapsible group (קבוצה) section headers (pre-approval) */
.group-header td {
  background: var(--brand-050, #eef4fb); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); padding: 0; position: sticky; z-index: 1;
}
.group-header.approved td { background: #dce6fe; }   /* approved group: soft indigo (distinct from the green "done" rows) */
.group-header td.gh-row-click { cursor: pointer; }   /* the whole header row toggles the group */
.gh-main {
  display: inline-flex; align-items: center; gap: 10px; width: auto;
  border: 0; background: transparent; cursor: pointer; font: inherit;
  padding: 9px 14px; text-align: start; color: var(--text);
}
.gh-caret {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: #fff; border: 1.5px solid var(--brand-200, #cfe3fb);
  color: var(--brand-700); font-size: 15px; line-height: 1;
  box-shadow: 0 1px 1.5px rgba(20,40,80,.06);
}
.gh-main:hover .gh-caret { background: var(--brand-050, #eef4fb); border-color: var(--brand, #2f6fd0); }
.gh-name { font-weight: 800; font-size: 13px; }
.gh-name::before { content: "\1F4C1  "; }   /* 📁 before every group name (desktop + phone) */
.gh-name.gh-name-ring::before { content: none; }   /* an approved group's progress ring takes the 📁's place */
.gh-ring { flex: none; display: inline-flex; align-items: center; line-height: 0; margin-inline-start: 2px; }
.gh-count { font-size: 11px; color: var(--muted); font-weight: 600; }
.group-header.approved .gh-name { color: #3949ab; }   /* indigo name to match the approved header */
.gh-approve {
  border: 1px solid #34a853; background: #eafaef; color: #1e7a3c; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; padding: 4px 12px;
  border-radius: 999px; margin-inline-start: 6px; white-space: nowrap;
}
.gh-approve:hover { background: #d7f3e0; }

/* Rename control on a gan's own group header */
.gh-edit {
  flex: none; border: none; background: none; cursor: pointer; font-size: 13px;
  padding: 2px 6px; margin-inline-start: 4px; opacity: .55; border-radius: 6px; line-height: 1;
}
.gh-edit:hover { opacity: 1; background: #eef4fb; }
.gh-rename {
  font: inherit; font-size: 13px; font-weight: 700; padding: 3px 8px;
  border: 1px solid var(--brand, #2f6fd0); border-radius: 7px; min-width: 160px;
}

/* Post-approval view switch: a vertical "לפי תאריך / לפי קבוצות" toggle, sitting at the
   far right of the summary band and stretching to the count cards' height. */
.bsum-viewtoggle {
  flex: 0 0 auto; align-self: stretch; display: flex; flex-direction: column;
  border: 1px solid #cfdae8; border-radius: var(--radius-sm); overflow: hidden; min-width: 82px;
}
.bsum-viewtoggle .pv-seg {
  flex: 1; border: none; background: var(--surface); color: #33475b;
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 6px 10px; white-space: nowrap; text-align: center;
}
.bsum-viewtoggle .pv-seg + .pv-seg { border-top: 1px solid #cfdae8; }
.bsum-viewtoggle .pv-seg:hover { background: #f4f8ff; }
.bsum-viewtoggle .pv-seg.on { background: #eaf2ff; color: #1b4b8a; }
/* The count cards (ילדים / צוות) are just a number - keep them compact next to the
   toggle instead of stretching to fill the row. */
.bsum-card.bsum-narrow { flex: 0 1 128px; min-width: 112px; }
/* The first row - the view switch (after approval) and the two count cards. On desktop
   the wrapper is not a box at all: its items flow with the other cards as before. A
   phone makes it a full-width row of its own (see the max-width:560px block). */
.bsum-toprow { display: contents; }


/* Compact assign / move-to-group control on each planned row (pre-approval) */
.grp-pick { font: inherit; font-size: 11px; border-radius: 7px; cursor: pointer; margin-inline-start: 4px; }
.grp-pick.ungrouped {
  border: 1px solid var(--brand-200, #cfe3fb); background: var(--brand-050, #eef4fb);
  color: var(--brand-700); font-weight: 600; padding: 2px 4px; max-width: 140px;
}
.grp-pick.grouped {
  border: 1px solid transparent; background: transparent; color: var(--muted);
  padding: 2px; width: 30px; opacity: .3; transition: opacity .12s;
}
tr:hover .grp-pick.grouped { opacity: 1; border-color: var(--line); }

/* The searchable group picker (planning): filter existing groups or add a new one. */
.grp-picker { min-width: 210px; max-width: 260px; }
.grp-picker .photo-menu-item.active { background: #eaf2ff; }   /* the Enter selection */
.grp-search {
  font: inherit; font-size: 14px; width: 100%; box-sizing: border-box;
  padding: 7px 10px; margin-bottom: 4px;
  border: 1px solid var(--line-strong); border-radius: 7px;
}
.grp-list { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; }
.grp-list .grp-add { color: var(--brand-700); font-weight: 600; }
.grp-empty { padding: 8px 10px; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* "➕ הוסף שורה לקבוצה" row inside a group section */
.group-addrow td { background: transparent; border: 0; padding: 2px 0 9px; }
.group-addrow-btn {
  border: 1px dashed var(--line); background: #fff; color: var(--brand-700);
  cursor: pointer; font: inherit; font-size: 11px; font-weight: 600;
  padding: 3px 12px; border-radius: 999px; margin-inline-start: 49px;
}
.group-addrow-btn:hover { background: var(--brand-050, #eef4fb); border-color: var(--brand-200); }

/* Cancelled (בוטל) planned row — struck through */
.row-cancelled { opacity: .7; }
.row-cancelled td { position: relative; color: var(--muted); }
.row-cancelled td::after {
  content: ""; position: absolute; left: 5px; right: 5px; top: 50%;
  height: 1.5px; background: var(--danger); opacity: .6; pointer-events: none;
}

/* A past cancelled/out-of-budget row, SETTLED into the done cluster (see isSettledCancelled):
   grey-green - greener than plain grey, greyer than the done green (#eff6ed) - with a grey ✓,
   because it was never actually carried out. It keeps .row-cancelled's strike, but recoloured
   grey (settled, not the red of a still-live cancellation), and drops the fade so it reads as
   present-but-closed, sitting calmly among the done rows. */
.row-done-cancelled { opacity: 1; }
.row-done-cancelled td { background: #edf1ec !important; color: var(--muted); }
.row-done-cancelled td::after { background: #aab0b7; opacity: .9; }   /* grey strike, not red */
.row-done-cancelled .cell-input, .row-done-cancelled .cell-select, .row-done-cancelled .cell-text,
.row-done-cancelled input, .row-done-cancelled select, .row-done-cancelled textarea { background: transparent !important; color: #6b7280; }
.grid tbody tr.row-done-cancelled:hover td.actions { background: #e4e9e3 !important; }
/* The ✓ toggle: grey, not green - it is settled, not done. */
.row-done-cancelled .done-btn { border-color: #9aa3ac; background: #9aa3ac; color: #fff; box-shadow: none; }
.row-done-cancelled .done-btn:hover { background: #868f99; border-color: #868f99; }

/* Time-range cell (שעות בגן) — clock selection via dropdowns */
.cell-timerange { display: flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 8px; }
.cell-timerange .tr-sel {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 5px 6px;
  font: inherit;
  font-size: 12px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.cell-timerange .tr-sel:focus { outline: none; box-shadow: var(--ring); border-color: var(--brand); }
.cell-timerange .tr-sel:disabled { background: var(--head-bg); color: var(--muted); }
.tr-sep { color: var(--muted); }

/* Multi-select cell (יום חופשי) — dropdown toggle showing chosen values */
.cell-multi-td { text-align: center; }
.ms-toggle {
  min-width: 110px;
  max-width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  padding: 7px 26px 7px 10px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 12px) 15px, calc(100% - 7px) 15px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.ms-toggle:hover { border-color: var(--brand); }
.ms-toggle:disabled { background: var(--head-bg); color: var(--muted); cursor: default; }
/* People list can be long — cap height and scroll. */
.ms-picker { max-height: 360px; display: flex; flex-direction: column; overflow: hidden; }
.ms-picker-search {
  width: 100%; box-sizing: border-box; margin-bottom: 6px; padding: 6px 8px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-size: 14px; font-family: inherit;
}
.ms-picker-list { overflow-y: auto; min-height: 0; }

/* Checkbox cell (never display:flex on a td — it breaks column alignment) */
.cell-check { text-align: center; padding: 8px; }
.cell-check input { width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; }

/* Image cell */
.cell-image { padding: 6px 10px; }
.photo-cell { display: inline-flex; align-items: center; gap: 6px; }
.thumb {
  height: 42px; width: 42px;
  object-fit: cover;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: zoom-in;
}
.photo-placeholder {
  height: 42px; width: 42px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  border-radius: 9px;
  border: 1px dashed var(--line-strong);
  background: var(--head-bg);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.photo-placeholder:hover { border-color: var(--brand); background: var(--brand-050); }
.photo-menu-btn {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 7px;
  background: #fff; color: var(--muted);
  font-size: 16px; line-height: 1; cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.photo-menu-btn:hover { border-color: var(--brand); color: var(--brand-700); background: var(--brand-050); }
.photo-menu {
  z-index: 1000;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 4px;
  min-width: 150px;
  display: flex; flex-direction: column;
}
/* A grey line between groups of items (the collection's פעולות menu). */
.photo-menu-sep { height: 1px; background: var(--line); margin: 4px 8px; flex: none; }
.photo-menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--text); text-align: start;
  border-radius: 7px; white-space: nowrap;
}
/* Hover tints for a mouse only: a tap leaves :hover on whatever lands under the finger -
   in a menu that opens under it, the item in that spot stayed lit as if chosen. */
@media (hover: hover) and (pointer: fine) {
  .photo-menu-item:hover { background: var(--brand-050); }
  .photo-menu-item.danger:hover { background: #fdecec; }
}
.photo-menu-item.danger { color: var(--danger); }
.photo-menu-item .pm-ic { font-size: 15px; }
/* A little red "LIVE" badge for the parent budget-transparency page - a page that updates
   in real time, so it wears the broadcast "live" mark instead of a flat icon. */
.live-badge { display: inline-flex; align-items: center; gap: 4px; color: #e0322d;
  font-weight: 800; font-size: 11px; letter-spacing: .5px; line-height: 1;
  vertical-align: middle; }
.live-badge .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #e0322d;
  animation: cs-live-pulse 1.6s ease-out infinite; }
@keyframes cs-live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(224, 50, 45, .55); }
  70% { box-shadow: 0 0 0 6px rgba(224, 50, 45, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 50, 45, 0); }
}
@media (prefers-reduced-motion: reduce) { .live-badge .live-dot { animation: none; } }

/* Full-image preview overlay */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  cursor: zoom-out;
  padding: 24px;
}
.lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0,0,0,.5);
}

/* ---- Modal (budget settings, etc.) ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16,24,40,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}
/* "התקן אפליקציה" guide (platform steps - shown when a one-tap native install is not available) */
.install-guide { position: relative; background: #fff; border-radius: 16px; padding: 22px 22px 20px; max-width: 360px; width: 100%; box-shadow: 0 20px 50px rgba(0,0,0,.25); text-align: right; }
.ig-x { position: absolute; top: 10px; left: 12px; font-size: 16px; color: #8a94a2; background: none; border: 0; cursor: pointer; padding: 4px; line-height: 1; }
.ig-head { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; color: #1d1d1f; }
.ig-ic { font-size: 24px; }
.ig-sub { font-size: 13px; color: #5a6472; margin: 6px 0 14px; line-height: 1.5; }
.ig-steps { margin: 0 0 16px; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 9px; font-size: 14px; color: #1d1d1f; line-height: 1.6; }
.ig-steps b { font-weight: 700; }
.ig-share { display: inline-block; padding: 0 3px; }
.ig-done { width: 100%; }
.modal-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  overflow: auto;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.modal-head h2 { font-size: 18px; margin: 0; color: var(--text); }
.modal-close {
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.modal-close:hover { background: var(--head-bg); color: var(--text); }
.modal-body { padding: 18px 20px; line-height: 1.7; color: var(--text); }
.modal-body p { margin: 0 0 10px; }
.modal-note { color: var(--muted); font-size: 13px; font-weight: 600; }

/* Share-an-expense-with-the-parents popup: pick a tone, tweak the wording, copy. Laid out
   as a single column so it reads top-to-bottom the same on desktop and phone. */
.share-modal .modal-body { display: flex; flex-direction: column; gap: 12px; }
.share-ctx { margin: 0; color: var(--muted); font-size: 14px; }
.share-ctx b { color: var(--text); }
.share-lbl { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: -4px; }
.share-tones { display: flex; gap: 8px; flex-wrap: wrap; }
.share-tone {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: 980px;
  padding: 7px 14px;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.share-tone:hover { border-color: var(--brand); }
.share-tone.on { background: var(--brand-050); border-color: var(--brand); color: var(--brand-700); font-weight: 700; }
.share-msg {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 15px;
  font-family: inherit;
  line-height: 1.6;
  color: var(--text);
  resize: vertical;
  min-height: 120px;
}
.share-msg:focus { outline: none; border-color: var(--brand); }
.share-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.share-amt { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text); cursor: pointer; }
.share-amt input { width: 16px; height: 16px; accent-color: var(--brand); }
/* "אל תציג לי יותר" on the post-done share offer (offerShareExpense) */
.share-mute { display: flex; align-items: center; gap: 8px; margin: 12px 2px 2px; font-size: 13px; color: #5a6472; cursor: pointer; }
.share-mute input { width: 16px; height: 16px; accent-color: var(--brand); }

/* "יומן הגן" tab - the two subscribe-able calendar cards (renderCalendar in app.js). */
.cal-wrap { max-width: 1180px; margin: 0 auto; padding: 8px 4px 24px; }
/* The לוח-הגן builder AND the יומנים-והתראות pane use the full width - three calendars across,
   aligned to the tab row; only בחירת-אירועים keeps the narrower, centred column. */
.cal-pane[data-pane="events"] { max-width: 720px; margin: 0 auto; }
.cal-cards { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .cal-cards { grid-template-columns: 1fr 1fr; align-items: start; } }
/* Two section tabs (mobile AND desktop): "שיתוף היומנים" (the add/share cards) and
   "בחירת אירועים" (the matrix). One pane at a time - the whole screen on one scroll was too
   much, especially on a phone. */
.cal-chips { display: flex; gap: 8px; position: sticky; top: 0; z-index: 30; background: var(--surface); padding: 8px 4px; margin: -8px -4px 12px; }
.cal-chip { flex: 1 1 0; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  white-space: nowrap; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--line-strong, #d7dbe0); background: var(--surface, #fff); color: #1d1d1f; }
.cal-chip.on { background: var(--brand, #0071e3); border-color: transparent; color: #fff; }
.cal-pane[hidden] { display: none; }
.cal-intro { margin: 4px 2px 14px; }
.cal-intro-t { font-size: 18px; font-weight: 800; color: #1d1d1f; }
.cal-intro-s { font-size: 13px; color: #5a6472; line-height: 1.6; margin-top: 3px; }
.cal-card { background: #fff; border: 1px solid #e6e9ef; border-radius: 14px; padding: 14px 16px; min-width: 0; overflow: hidden; }
/* A colour stripe across the top of each calendar card (full-bleed via negative margins, clipped by
   the card's overflow:hidden), with a faint matching border - the committee blue, the parents green,
   to echo the authority card's amber stripe. */
.cal-stripe { height: 5px; margin: -14px -16px 12px; }
.cal-stripe-vaad { background: #cacace; }
.cal-stripe-parents { background: #4484cb; }
.cal-card[data-which="vaad"] { border-color: #e4e4e7; }
.cal-card[data-which="parents"] { border-color: #cfe6d5; }
.cal-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.cal-ic { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; flex: none; }
.cal-ic-vaad { background: #f1f1f3; }
.cal-ic-parents { background: #e6f5ec; }
.cal-card-title { font-size: 15px; font-weight: 700; color: #1d1d1f; }
.cal-badge { font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 999px; margin-inline-start: auto; }
.cal-badge-gray { background: #eef1f5; color: #5a6472; }
.cal-badge-green { background: #e6f5ec; color: #2c7a3f; }
.cal-card-desc { font-size: 13px; color: #5a6472; line-height: 1.6; margin: 0 0 12px; }
.cal-add-label { font-size: 12px; font-weight: 700; color: #5a6472; margin: 0 0 7px; }
.cal-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-actions .btn { font-size: 13px; }
/* Two matched one-tap add buttons: the classic black Apple pill + a white Google pill. */
.cal-apple, .cal-google { flex: 1 1 0; min-width: 0; }
.cal-apple { background: #1d1d1f; color: #fff; border: 1px solid #1d1d1f; }
.cal-apple:hover { background: #000; border-color: #000; }
/* Own hover - without it the shared .btn:hover paints the bg brand-blue and the blue
   label vanishes (blue on blue). Keep the white pill, just a light-blue wash. */
.cal-google { background: #fff; color: #1a73e8; border: 1px solid #d7dbe0; font-weight: 700; }
.cal-google:hover { background: #eef3fc; border-color: #c5d6f2; }
.cal-share { width: 100%; margin-top: 8px; font-size: 13px; }
.cal-note { display: flex; gap: 7px; font-size: 12px; color: #8a94a2; line-height: 1.6; margin: 12px 2px 0; }
/* Phase 4 - the "דף ההורים" hero at the top of the share pane (the public parent page). */
.cal-pp { background: #f5f9ff; border: 1px solid #cfe0f7; border-radius: 14px; overflow: hidden; padding: 0 16px 14px; margin: 2px 0 4px; }
.cal-pp.is-on { border-color: #bcdac0; background: #f3fbf5; }
.cal-pp-stripe { height: 5px; margin: 0 -16px 12px; background: var(--brand); }
.cal-pp.is-on .cal-pp-stripe { background: #34a853; }
.cal-pp-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.cal-pp-ic { font-size: 22px; }
.cal-pp-title { font-size: 16px; font-weight: 800; color: #1d1d1f; flex: 1; min-width: 0; }
.cal-pp-chip { font-size: 11.5px; font-weight: 700; color: #6e6e73; background: #e9ecf1; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.cal-pp-chip.on { color: #1f7a39; background: #daf3e1; }
.cal-pp-desc { font-size: 13px; color: #4a5568; line-height: 1.6; margin: 0 0 13px; }
.cal-pp-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cal-pp-manage { font: inherit; font-size: 14px; font-weight: 700; color: #fff; background: var(--brand); border: 1px solid transparent; border-radius: 10px; padding: 10px 18px; cursor: pointer; }
.cal-pp-manage:hover { background: var(--brand-700); }
.cal-pp-view { font-size: 13px; font-weight: 700; color: var(--brand); text-decoration: none; white-space: nowrap; }
.cal-pp-view:hover { text-decoration: underline; }
/* The "להוספה ישירה ליומן" divider that demotes the subscribe cards below the hero. */
.cal-sub-sec { font-size: 13px; font-weight: 700; color: #5a6472; margin: 20px 2px 8px; }
.cal-sub-opt { font-weight: 400; color: #8a94a2; }
/* "מה מופיע ביומן" matrix - category × ועד/הורים toggles (the יומן-הגן tab). */
.cal-mx { max-width: 720px; margin: 22px auto 0; background: #fff; border: 1px solid #e6e9ef; border-radius: 14px; padding: 14px 16px; }
.cal-mx-t { font-size: 16px; font-weight: 700; color: #1d1d1f; }
.cal-mx-s { font-size: 12px; color: #8a94a2; line-height: 1.5; margin: 2px 0 12px; }
/* The matrix legend: one line per column (ועד / הורים), then a hint that "תפעולי" is per-event. */
.cal-mx-legend { background: #f7f9fc; border: 1px solid #e6ebf2; border-radius: 12px; padding: 10px 12px; margin: 8px 0 14px; }
.cal-leg-row { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.5; color: #44474d; padding: 3px 0; }
.cal-leg-ic { font-size: 16px; flex: none; }
.cal-leg-row b { font-weight: 800; color: #1d1d1f; }
.cal-leg-hint { font-size: 12px; color: #8a94a2; margin-top: 7px; padding-top: 7px; border-top: 1px dashed #dde3ec; line-height: 1.5; }
.cal-leg-hint b { font-weight: 800; color: #6e6e73; }
/* ---- לוח הגן builder (Direction D) ---- */
/* "מתקדם" demoted to a quiet link at the bottom of the calendar tab (not a top chip). */
.cal-adv-wrap { text-align: center; margin: 24px 0 4px; padding-top: 14px; border-top: 1px solid #eef1f5; }
.cal-adv-link { font: inherit; font-size: 12px; color: #8a94a2; background: none; border: 0; cursor: pointer; padding: 6px 12px; border-radius: 8px; }
.cal-adv-link:hover { background: #f1f4f8; color: #5a6472; }
.cal-adv-sub { color: #b8c0cc; }
.clb-msg { font-size: 13px; color: #8a94a2; padding: 14px 2px; text-align: center; }
.clb-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 10px; }
.clb-head-actions, .clb-card-actions { display: flex; align-items: center; gap: 8px; }
.clb-h-t { font-size: 15px; font-weight: 800; }
.clb-create { position: relative; }
.clb-create-btn { font-size: 13px; font-weight: 700; color: #fff; background: var(--brand); border: 0; border-radius: 9px; padding: 8px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.clb-create-caret { font-size: 10px; opacity: .85; }
.clb-create-menu { position: absolute; top: calc(100% + 6px); left: 0; background: #fff; border: 1px solid #e6e9ef; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px; min-width: 190px; z-index: 50; }
.clb-create-opt { display: flex; align-items: center; gap: 9px; width: 100%; text-align: right; background: none; border: 0; border-radius: 7px; padding: 10px 12px; font: inherit; font-size: 13px; font-weight: 600; color: #1d1d1f; cursor: pointer; }
.clb-create-opt:hover { background: #f1f4f8; }
.clb-create-ic { flex: 0 0 auto; font-size: 15px; }
/* The weekly grid is one board (like the food menu): 6 day columns + a label column on the LEFT,
   with a בוקר row and an אחה״צ row a small gap apart. */
.clb-wgrid { display: grid; grid-template-columns: auto repeat(6, 1fr); gap: 5px; background: #fff; border: 1px solid #e6e9ef; border-radius: 12px; padding: 10px; align-items: stretch; }
.clb-wdh { font-size: 13px; font-weight: 800; color: #5a6472; text-align: center; padding-bottom: 6px; border-bottom: 1px solid #eef1f5; }
.clb-wrl { font-size: 13px; font-weight: 800; color: #8a94a2; display: flex; align-items: center; justify-content: center; padding: 0 4px; white-space: nowrap; }
.clb-wdiv { grid-column: 1 / -1; height: 0; border-top: 1px solid #eceff3; }
.clb-day h4 { font-size: 12px; font-weight: 800; color: #5a6472; text-align: center; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid #eef1f5; }
.clb-day-empty { text-align: center; color: #cfd6df; font-size: 13px; }
.clb-chip { position: relative; display: block; width: 100%; text-align: right; border: 0; border-radius: 7px; padding: 6px 8px; font: inherit; font-size: 13px; font-weight: 700; margin-bottom: 5px; cursor: pointer; line-height: 1.3; background: #eef2f7; color: #44474d; }
/* The 👪 "there's parent info" flag sits in the chip's bottom-LEFT corner (opposite the time) so it
   catches the eye and never pushes the chip to a 3rd line. A reserved left gutter keeps it off the text. */
.clb-chip.has-pi { padding-left: 24px; }
.clb-chip.has-pi > .clb-chip-pi { position: absolute; left: 6px; bottom: 6px; font-size: 14px; line-height: 1; }
.clb-chip-routine { background: #e5efff; color: #1b4b8a; }
.clb-chip-activity { background: #fdeede; color: #9a5a0c; }
.clb-chip-bonding { background: #f1ecfb; color: #5b3a9a; }
.clb-chip-special { background: #fbe9f1; color: #99355a; }
.clb-chip-tm { display: block; font-weight: 600; font-size: 11.5px; opacity: .85; }
.clb-chip-pi { font-size: 10px; }
.clb-sec { font-size: 14px; font-weight: 800; color: #5a6472; margin: 18px 2px 8px; }
/* The list FILLS the side column (which stretches to the week-grid's height), scrolling internally;
   min-height keeps ~3 events even when the grid is short. The two columns end up the same height. */
.clb-up-list { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-height: 185px; overflow-y: auto; padding-inline-end: 6px; scrollbar-width: thin; scrollbar-color: #c3c9d2 transparent; }
/* Force a visible (not overlay) scrollbar so "there's more" reads at rest, not only on hover. */
.clb-up-list::-webkit-scrollbar { width: 8px; }
.clb-up-list::-webkit-scrollbar-thumb { background: #c3c9d2; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.clb-up-list::-webkit-scrollbar-track { background: transparent; }
/* "אירועים שנגמרו" is a quiet link in the section header (option B) - costs the list no vertical
   space, so the columns line up. The popup it opens reuses .clb-up-list but capped (not stretched). */
.clb-sec-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.clb-past-link { font: inherit; font-size: 11.5px; font-weight: 700; color: #6e6e73; background: #f1f3f6; border: 1px solid #e4e6ea; border-radius: 8px; padding: 3px 9px; cursor: pointer; white-space: nowrap; }
.clb-past-link:hover { background: #e7e9ed; color: #44464a; }
.clb-past-list { flex: none; min-height: 0; max-height: 60vh; }
/* Option A: week board (main) + a narrow upcoming rail (side); food menu runs full width below. */
.clb-row { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.clb-col-side { display: flex; flex-direction: column; min-height: 0; position: relative; }
/* A soft fade at the bottom of the events list when it has more rows than fit - so the scroll is
   visible at rest, not a surprise you only find by hovering. JS toggles .clb-has-more. */
.clb-col-side.clb-has-more::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; pointer-events: none;
  background: linear-gradient(to top, rgba(120, 128, 145, 0.18), rgba(120, 128, 145, 0));
}
.clb-col-side .clb-sec { margin-top: 2px; }
@media (max-width: 760px) {
  .clb-row { grid-template-columns: 1fr; }
  .clb-col-side { display: block; }                      /* stacked on a phone - no equal-height dance */
  .clb-col-side .clb-sec { margin-top: 18px; }
  .clb-up-list { flex: none; min-height: 0; max-height: 340px; }
}
.clb-up { display: flex; align-items: center; gap: 10px; width: 100%; text-align: right; background: #fff; border: 1px solid #e6e9ef; border-radius: 10px; padding: 10px 12px; cursor: pointer; font: inherit; }
.clb-up:hover { background: #f7f9fc; }
.clb-up-ic { font-size: 19px; flex: none; }
.clb-up-txt { flex: 1; min-width: 0; }
.clb-up-t { font-size: 14px; font-weight: 700; display: block; }
.clb-up-d { font-size: 13px; color: #8a94a2; }
/* The 👪 parent-info flag pinned BOTTOM-LEFT of the card - same spot as the week-grid chips and the
   🏛️ authority flag, so a card looks the same everywhere it appears. */
.clb-up.has-pi { position: relative; }
.clb-up.has-pi .clb-chip-pi { position: absolute; left: 8px; bottom: 6px; top: auto; font-size: 13px; }
/* Special-events RAIL (option B): a full-width horizontal strip of event cards below the board,
   with ‹ › arrows when it overflows. Scoped so the base .clb-up (used by the "שנגמרו" popup as a
   vertical list) is untouched. */
.clb-events { margin-top: 2px; }
.clb-rail-wrap { display: flex; align-items: center; gap: 6px; }
.clb-rail { display: flex; gap: 8px; overflow-x: auto; flex: 1 1 auto; min-width: 0; scroll-behavior: smooth; padding-bottom: 2px; scrollbar-width: thin; scrollbar-color: #c3c9d2 transparent; }
.clb-rail::-webkit-scrollbar { height: 8px; }
.clb-rail::-webkit-scrollbar-thumb { background: #c3c9d2; border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.clb-rail::-webkit-scrollbar-track { background: transparent; }
.clb-rail .clb-up { flex: 0 0 auto; width: 240px; max-width: 74vw; align-items: flex-start; }
.clb-rail-nav { flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid #d7dde6; background: #fff; color: #5a6472; font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; direction: ltr; }
.clb-rail-nav:hover { background: #f1f3f6; }
.clb-rail-nav[hidden] { display: none; }
/* לוח-הגן's vacations list + the "אירועים מיוחדים" sub-tab list: a tiling grid of event cards
   (the base .clb-up fills each cell). The sub-tab also has a free-text search above the list. */
.clb-vacs { margin-top: 2px; }
.clb-vac-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.clb-sp-search { margin: 10px 2px 12px; }
.clb-sp-search input { max-width: 420px; }
.clb-sp-past { margin-top: 12px; }
/* Consistent section cards for the שגרה/חופשות/תפריט tab (collapsible-ready headers). */
.clb-card { background: #fff; border: 1px solid #e6e9ef; border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.clb-card-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.clb-card-t { font-size: 15px; font-weight: 800; color: #1d1d1f; display: inline-flex; align-items: center; gap: 7px; }
/* A clean WHITE pill (not a bold blue button like אירועים-מיוחדים's יצירה) - feels like a button, stays quiet. */
.clb-card-add { font: inherit; font-size: 13px; font-weight: 600; color: var(--brand); background: #fff; border: 1px solid var(--line-strong, #d7dbe0); cursor: pointer; padding: 6px 14px; border-radius: 999px; white-space: nowrap; }
.clb-card-add:hover { background: #f7f9fc; border-color: #c3c9d2; }
/* Sticky side nav for jumping between the three sections (hidden on a phone). */
/* The content keeps the full cal-wrap width (like the sub-tab row); the nav sits in the right
   page-margin via a negative inline-start margin that widens the flex row into that margin. */
.clb-layout { display: flex; gap: 18px; align-items: stretch; margin-inline-start: calc(-1 * (165px + 18px)); }
.clb-layout > .clb { flex: 1; min-width: 0; }
.clb-nav-col { flex: 0 0 165px; }
.clb-nav { position: sticky; top: 58px; background: #fff; border: 1px solid #e6e9ef; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 3px; }
.clb-nav-item { font: inherit; font-size: 13px; text-align: right; padding: 8px 10px; border: 0; background: none; border-radius: 8px; color: #5a6472; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clb-nav-item:hover { background: #f1f3f6; }
.clb-nav-item.on { background: #eef1f6; color: var(--brand); font-weight: 700; }
#clbSecBoard, #clbSecVacs, #clbSecMenu { scroll-margin-top: 62px; }
@media (max-width: 1300px) { .clb-layout { display: block; margin-inline-start: 0; } .clb-nav-col { display: none; } }
.clb-card .clb-wgrid { border: 0; padding: 0; background: transparent; border-radius: 0; }   /* the card already frames it */
.clb-menu { margin-top: 0; }                                                                  /* the preceding card provides the gap */
.clb-menu-h { font-size: 15px; }
/* The authority (city) calendar = a compact toggle bar directly under the section header. The city's
   actual vacations/camps show as read-only cards merged into the grid below (marked 🏛️). */
.clb-muni-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #f7f9fc; border: 1px solid #eef1f4; border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; }
.clb-muni-ic { font-size: 17px; flex: 0 0 auto; }
.clb-muni-info { flex: 1; min-width: 120px; }
.clb-muni-name { font-size: 13px; font-weight: 600; color: #1d1d1f; }
.clb-muni-status { font-size: 12px; margin-top: 2px; }
.clb-muni-status.on { color: #1d9e75; }
.clb-muni-status.off { color: #8a94a2; }
.clb-muni-toggle { flex: 0 0 auto; width: 42px; height: 24px; border-radius: 999px; border: 0; background: #cdd3db; position: relative; cursor: pointer; padding: 0; transition: background .15s; }
.clb-muni-toggle.on { background: #1d9e75; }
.clb-muni-toggle::before { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.clb-muni-toggle.on::before { inset-inline-start: 20px; }
.clb-muni-links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.clb-muni-link { font: inherit; font-size: 12px; color: var(--brand); background: none; border: 0; cursor: pointer; padding: 0; white-space: nowrap; }
.clb-muni-link:hover { text-decoration: underline; }
.clb-muni-row .cal-muni-band-row { flex-basis: 100%; margin-top: 6px; }
/* Authority vacation cards (in the grid): same as the gan's, with a 🏛️ flag pinned bottom-left
   (like the 👪 operational flag), read-only (no click-to-edit). */
.clb-up.from-muni { position: relative; cursor: default; }
.clb-up.from-muni .clb-up-muni { position: absolute; left: 8px; bottom: 6px; font-size: 13px; line-height: 1; }
/* menu */
.clb-menu { background: #fff; border: 1px solid #e6e9ef; border-radius: 12px; padding: 12px 14px; margin-top: 18px; }
.clb-menu-h { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 800; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.clb-menu-opt { font-weight: 400; color: #8a94a2; font-size: 11px; }
.clb-menu-rec { font-size: 12px; color: #6e6e73; font-weight: 400; display: inline-flex; align-items: center; gap: 5px; }
.clb-rec { font-size: 12px; font-weight: 700; border: 1px solid #d7dde6; border-radius: 999px; padding: 4px 11px; color: #5a6472; background: #fff; cursor: pointer; }
.clb-rec.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.clb-m-pick { font-size: 12px; color: #6e6e73; display: flex; align-items: center; gap: 6px; margin: 2px 0 12px; flex-wrap: wrap; }
.clb-m-wk { font-size: 15px; font-weight: 800; color: #1d1d1f; margin: 22px 0 9px; padding-bottom: 6px; border-bottom: 2px solid #eceff3; }
.clb-m-wk.now { color: var(--brand); border-bottom-color: var(--brand); }
.clb-m-now { font-weight: 700; font-size: 12px; }
.clb-m-board { display: grid; grid-template-columns: auto repeat(5, 1fr); gap: 5px; align-items: stretch; }
.clb-m-dh { font-size: 12px; font-weight: 800; color: #5a6472; text-align: center; padding: 2px 0; }
.clb-m-rl { font-size: 12px; font-weight: 700; color: #8a94a2; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.clb-m-cell { background: #f7faf5; border: 1px solid #e4efd9; border-radius: 8px; padding: 6px 5px; text-align: center; min-height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.clb-m-f { font-size: 12.5px; color: #3b6d11; line-height: 1.35; width: 100%; }
.clb-m-add { color: #b8c0cc; font-size: 14px; }
.clb-m-input { width: 100%; box-sizing: border-box; border: 1px solid var(--brand); border-radius: 6px; padding: 4px; font: inherit; font-size: 12.5px; line-height: 1.35; text-align: center; resize: none; overflow: hidden; }

/* ---- מערכת שעות (school timetable) ---- */
.clb-tt-grid { display: grid; gap: 4px; align-items: stretch; }
.clb-tt-hd { background: #eef1f6 !important; }
.clb-tt-dh { background: #f3f5f8; border-radius: 8px; font-size: 13px; font-weight: 700; color: #2a2a2e; display: flex; align-items: center; justify-content: center; min-height: 36px; }
.clb-tt-cp { background: #f7f9fc; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4px 2px; min-height: 48px; }
.clb-tt-cp .n { font-weight: 800; font-size: 14px; color: #1d1d1f; }
.clb-tt-cp .t { font-size: 10.5px; color: #8a94a2; font-variant-numeric: tabular-nums; margin-top: 1px; }
.clb-tt-cell { background: #fafbfc; border: 1px solid #eceef1; border-radius: 8px; min-height: 48px; cursor: pointer; display: flex; align-items: center; justify-content: center; text-align: center; }
.clb-tt-cell:hover { background: #f2f6ff; }
.clb-tt-f { font-size: 12.5px; color: #2a2a2e; padding: 4px 3px; width: 100%; }
.clb-tt-input { width: 100%; box-sizing: border-box; border: 1px solid var(--brand); border-radius: 6px; padding: 4px; font: inherit; font-size: 12.5px; text-align: center; }
.clb-tt-empty { text-align: center; padding: 26px 16px; }
.clb-tt-empty-t { font-size: 15px; font-weight: 700; color: #1d1d1f; }
.clb-tt-empty-s { font-size: 13px; color: #6e6e73; margin: 6px 0 16px; line-height: 1.5; }
/* period-times setup popup */
.clb-tt-setup-box { max-width: 440px; }
.clb-tt-setup-sub { font-size: 12.5px; color: #6e6e73; line-height: 1.55; margin-bottom: 14px; }
.clb-tt-prow { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.clb-tt-prow .pn { width: 72px; font-weight: 700; font-size: 13px; color: #2a2a2e; }
.clb-tt-prow input[type=time] { width: 96px; border: 1px solid #d7dbe0; border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px; }
.clb-tt-prow .sep { color: #8a94a2; }
.clb-tt-prow .clb-tt-delp { background: none; border: 0; cursor: pointer; color: #c0c4cc; font-size: 14px; margin-inline-start: auto; }
.clb-tt-addp { margin-top: 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--brand); background: #fff; border: 1px dashed #cdd3db; border-radius: 999px; padding: 7px 14px; cursor: pointer; }
.clb-tt-err { margin-top: 10px; }
/* add-event popup */
.clb-f { margin-bottom: 12px; position: relative; }
.clb-f > span { display: block; font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.clb-f input[type="text"], .clb-f input[type="date"], .clb-f input[type="time"] { width: 100%; border: 1px solid #d7dde6; border-radius: 9px; padding: 9px 11px; font: inherit; font-size: 13px; }
/* The date field uses the app's own picker (HDP), a <button> - give it the same look as the inputs. */
.clb-f .hdp-trigger { width: 100%; box-sizing: border-box; border: 1px solid #d7dde6; border-radius: 9px; padding: 9px 11px; font: inherit; font-size: 13px; background: #fff; text-align: right; }
.clb-hint { font-size: 11px; color: #8a94a2; margin-top: 5px; line-height: 1.4; }
.clb-oneoff-link { font: inherit; color: var(--brand); background: none; border: 0; padding: 0; cursor: pointer; font-weight: 600; }
.clb-oneoff-link:hover { text-decoration: underline; }
.clb-tsgs, .clb-seg, .clb-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.clb-tsg, .clb-rsg, .clb-psg { font-size: 12px; font-weight: 700; border: 1px solid #d7dde6; border-radius: 999px; padding: 6px 12px; color: #5a6472; background: #fff; cursor: pointer; }
.clb-tsg.on, .clb-rsg.on, .clb-psg.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.clb-pseg { margin-bottom: 8px; }
.clb-tsg:disabled { opacity: .55; cursor: default; }
.clb-pill { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #d7dde6; font: inherit; font-size: 12px; font-weight: 700; color: #5a6472; background: #fff; cursor: pointer; }
.clb-pill.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.clb-times { display: flex; align-items: center; gap: 8px; }
.clb-times input[type="time"] { max-width: 120px; }
.clb-tsep { color: #8a94a2; } .clb-topt { font-size: 11px; color: #9aa3ad; }
.clb-ac { position: absolute; top: 100%; right: 0; left: 0; margin-top: 4px; background: #fff; border: 1px solid #d7dde6; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 5; overflow: hidden; }
.clb-ac-h { font-size: 11px; font-weight: 800; color: #8a94a2; padding: 8px 11px 4px; }
.clb-ac-row { display: flex; align-items: baseline; gap: 8px; padding: 9px 11px; font-size: 12px; cursor: pointer; }
.clb-ac-row:hover { background: #eef5ff; }
.clb-ac-t { font-weight: 600; white-space: nowrap; flex: 0 0 auto; }
.clb-ac-sub { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: #8a94a2; }
.clb-ac-d { color: #8a94a2; font-size: 11px; flex: 0 0 auto; white-space: nowrap; }
.clb-planref { background: #f6f6f4; border: 1px solid #e6e6e0; border-right: 3px solid #c9c9c0; border-radius: 9px; padding: 9px 12px; margin: -4px 0 12px; }
.clb-pr-h { font-size: 11px; font-weight: 800; color: #8a8a7e; }
.clb-pr-txt { font-size: 12px; color: #6a6a60; line-height: 1.5; margin-top: 4px; }
.clb-ps { background: #f3fbf5; border: 1px solid #cdebd5; border-radius: 11px; padding: 10px 12px; margin-bottom: 12px; }
.clb-ps-h { font-size: 12px; font-weight: 800; color: #1f6b38; } .clb-ps-opt { font-weight: 400; color: #5a9170; }
.clb-ps-sub { font-size: 11px; color: #5a9170; margin: 2px 0 9px; line-height: 1.5; }
.clb-ps input { width: 100%; border: 1px solid #cfe3d4; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 12px; margin-bottom: 6px; background: #fff; }
.clb-ps input:last-child { margin-bottom: 0; }
/* The arrival field is a tap-to-open <button> (HDP.attachTime) so iOS never zooms it - give it the
   exact look of the sibling inputs above/below it, not the bare default-button look. attachTime
   hard-codes dir="ltr" on the button (good for a "8:00" value); force RTL back so the placeholder
   "🕐 שעת הגעה מיוחדת?" reads icon-first like the sibling fields (a time value stays fine in RTL). */
.clb-ps .hdp-trigger { width: 100%; box-sizing: border-box; border: 1px solid #cfe3d4; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 12px; margin-bottom: 6px; background: #fff; text-align: right; direction: rtl; }
.cal-mx-head { display: grid; grid-template-columns: 1fr 58px 58px 58px; gap: 6px; padding: 0 2px 8px; }
.cal-mx-head span { font-size: 11px; font-weight: 700; color: #8a94a2; text-align: center; }
.cal-mx-head span:first-child { text-align: right; }
.cal-mx-row { display: grid; grid-template-columns: 1fr 58px 58px 58px; align-items: center; gap: 6px; padding: 11px 2px; border-top: 1px solid #f0f2f5; }
.cal-mx-lbl { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: #1d1d1f; min-width: 0; }
.cal-mx-ic { font-size: 18px; flex: none; }
.cal-mx-lbltxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-mx-hint { font-size: 11px; font-weight: 400; color: #8a94a2; line-height: 1.45; }
.cal-mx-sw { justify-self: center; width: 44px; height: 26px; border-radius: 999px; background: #d1d6de; border: 0; position: relative; cursor: pointer; transition: background .15s; }
.cal-mx-sw::after { content: ""; position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: all .15s; }
.cal-mx-sw.on { background: #34c759; }
.cal-mx-sw.on::after { right: auto; left: 3px; }
/* Phase 2: expand a category row to override a single event */
.cal-mx-lbl { cursor: pointer; }
.cal-mx-ch { display: inline-block; width: 13px; font-size: 11px; color: #8a94a2; flex: none; }
.cal-mx-sub { background: #f7f9fb; border-top: 1px solid #eef1f5; }
.cal-mx-item { display: grid; grid-template-columns: 1fr 50px 50px; align-items: center; gap: 6px; padding: 9px 2px; border-top: 1px solid #eef1f5; }
.cal-mx-item:first-child { border-top: 0; }
.cal-mx-item-lbl { padding-right: 25px; min-width: 0; }
.cal-mx-item-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.cal-mx-item-t { font-size: 13px; color: #1d1d1f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-mx-item-d { font-size: 11px; color: #8a94a2; font-variant-numeric: tabular-nums; flex: none; }
.cal-mx-reset { font: inherit; font-size: 11px; color: var(--brand); background: none; border: 0; padding: 2px 25px 0 0; cursor: pointer; text-decoration: underline; }
/* Direction D: the "מידע להורים" chip on a matrix event (its new home), tinted when it carries info. */
.cal-mx-pi { display: inline-block; font: inherit; font-size: 11px; font-weight: 600; color: var(--muted); background: #f1f3f6; border: 0; border-radius: 7px; padding: 3px 9px; margin-top: 5px; cursor: pointer; }
.cal-mx-pi:hover { background: #e6e9ee; color: var(--text); }
.cal-mx-pi.on { color: var(--brand-700); background: var(--brand-050); }
.cal-mx-pi.op { color: #fff; background: var(--brand); }
.cal-mx-isw { justify-self: center; width: 38px; height: 22px; border-radius: 999px; background: #d1d6de; border: 0; position: relative; cursor: pointer; transition: background .15s; }
.cal-mx-isw::after { content: ""; position: absolute; top: 3px; right: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: all .15s; }
.cal-mx-isw.on { background: #34c759; }
.cal-mx-isw.on::after { right: auto; left: 3px; }
.cal-mx-submsg { font-size: 12px; color: #8a94a2; padding: 10px 25px; }
/* Phase 3: matrix sections + the "לוח הגן" entry management (holidays / vacations / camp) */
.cal-mx-sec { font-size: 11px; font-weight: 700; color: #8a94a2; padding: 13px 2px 3px; }
.cal-sd { padding: 6px 25px 12px; }
.cal-sd-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #eef1f5; }
.cal-sd-item:first-child { border-top: 0; }
.cal-sd-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cal-sd-t { font-size: 13px; color: #1d1d1f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-sd-d { font-size: 11px; color: #8a94a2; font-variant-numeric: tabular-nums; margin-top: 1px; }
/* The 👪 parent-info chip on an event row: content-width (not stretched by the flex column). */
.cal-sd-pi { align-self: flex-start; margin-top: 6px; }
.cal-sd-edit, .cal-sd-del { border: 0; background: transparent; cursor: pointer; font-size: 14px; padding: 4px; border-radius: 6px; flex: none; }
.cal-sd-edit:hover, .cal-sd-del:hover { background: #eef1f5; }
.cal-sd-addbtn { margin-top: 10px; font: inherit; font-size: 13px; font-weight: 600; color: var(--brand); background: none; border: 1px dashed #c5d0dd; border-radius: 10px; padding: 9px 14px; width: 100%; cursor: pointer; }
.cal-sd-form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid #e6e9ef; border-radius: 10px; padding: 12px; }
.cal-sd-name, .cal-sd-kind, .cal-sd-fl input, .cal-sd-fl .hdp-trigger { font: inherit; font-size: 14px; border: 1px solid #d7dbe0; border-radius: 8px; padding: 8px 10px; width: 100%; box-sizing: border-box; background: #fff; color: #1d1d1f; }
.cal-sd-row2 { display: flex; gap: 8px; }
.cal-sd-fl { flex: 1; display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #8a94a2; min-width: 0; }
.cal-sd-formact { display: flex; gap: 8px; margin-top: 2px; }
.cal-sd-formact .btn { font-size: 13px; }
.cal-sd-err { font-size: 12px; color: var(--danger); }
/* Phase 4: weekly לו"ז entries - day chips + time */
.cal-sch-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #eef1f5; }
.cal-sch-item:first-child { border-top: 0; }
.cal-sch-daywrap { display: flex; align-items: center; gap: 10px; }
.cal-sch-daylbl { font-size: 11px; color: #8a94a2; flex: none; }
.cal-sch-days { display: flex; gap: 5px; flex-wrap: wrap; }
.cal-sch-day { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #d7dbe0; background: #fff; color: #5a6472; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 0; }
.cal-sch-day.on { background: var(--brand); border-color: transparent; color: #fff; }
.cal-sch-phlbl { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #8a94a2; }
.cal-sch-phase { font: inherit; font-size: 14px; border: 1px solid #d7dbe0; border-radius: 8px; padding: 8px 10px; width: 100%; box-sizing: border-box; background: #fff; color: #1d1d1f; }
/* Phase 5: staff sources read-only note */
.cal-staff-note { font-size: 11px; color: #8a94a2; line-height: 1.6; padding: 10px 2px 0; }
/* Phase 6 - רשות / עירייה panel + the super template editor + inherited rows */
.cal-muni { margin-top: 14px; padding: 14px; border: 1px solid #e3e7ec; border-radius: 12px; background: #fafbfc; display: flex; flex-direction: column; gap: 10px; }
.cal-muni-t { font-size: 15px; font-weight: 700; color: #1d1d1f; }
.cal-muni-s { font-size: 12px; color: #8a94a2; line-height: 1.5; margin-top: -4px; }
.cal-muni-fl { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #5a6472; }
.cal-muni-pick, .cal-muni-band { font: inherit; font-size: 14px; border: 1px solid #d7dbe0; border-radius: 8px; padding: 8px 10px; background: #fff; color: #1d1d1f; }
.cal-muni-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cal-muni-rl { font-size: 14px; color: #1d1d1f; font-weight: 600; }
.cal-muni-warn { font-size: 12px; color: #b4690e; background: #fff6e8; border-radius: 8px; padding: 7px 10px; }
.cal-muni-adminbtn { align-self: flex-start; font: inherit; font-size: 13px; font-weight: 600; color: var(--brand); background: none; border: 0; cursor: pointer; padding: 4px 0; }
.cal-muni-adminbtn.on { opacity: .65; }
.cal-muni-admin { border-top: 1px solid #eef1f5; padding-top: 10px; }
.cal-madm { display: flex; flex-direction: column; gap: 10px; }
.cal-madm-row { display: flex; gap: 6px; align-items: center; }
.cal-madm-city { flex: 1; min-width: 0; font: inherit; font-size: 14px; border: 1px solid #d7dbe0; border-radius: 8px; padding: 8px 10px; background: #fff; color: #1d1d1f; }
.cal-madm-new, .cal-madm-del { font: inherit; font-size: 13px; border: 1px solid #d7dbe0; border-radius: 8px; background: #fff; color: #5a6472; padding: 8px 10px; cursor: pointer; flex: none; }
.cal-madm-segs { display: flex; gap: 6px; flex-wrap: wrap; }
.cal-madm-segs:empty { display: none; }
.cal-madm-seg { font: inherit; font-size: 13px; border: 1px solid #d7dbe0; border-radius: 999px; background: #fff; color: #5a6472; padding: 6px 12px; cursor: pointer; }
.cal-madm-seg.on { background: var(--brand); border-color: transparent; color: #fff; }
.cal-madm-add { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.cal-madm-add button { font: inherit; font-size: 13px; border: 1px dashed #c3c9d2; border-radius: 8px; background: #fff; color: #5a6472; padding: 7px 12px; cursor: pointer; }
.cal-madm-f { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.cal-inh-badge { font-size: 10px; font-weight: 700; color: #6b4ea8; background: #efe9fb; border-radius: 6px; padding: 1px 6px; margin-inline-start: 4px; vertical-align: middle; }
.cal-inh.off { opacity: .5; }
.cal-muni-note { font-size: 12px; color: #2e7d32; background: #eef7ee; border-radius: 8px; padding: 8px 10px; line-height: 1.5; }
/* The authority's חופשות/קייטנות sits ABOVE the ועד/הורים cards: a FEATURED amber card when the city
   has a calendar, otherwise a quiet one-line prompt. Both keep a gap before the cards. */
.cal-muni-line { font-size: 13px; color: #5a6472; line-height: 1.7; margin-top: 12px; padding: 10px 12px; background: #f6f8fa; border-radius: 10px; }
.cal-muni-line + .cal-muni-line { margin-top: 6px; }
.cal-muni-line + .cal-cards, .cal-muni-card + .cal-cards { margin-top: 14px; }
.cal-muni-line b { color: #1d1d1f; }
.cal-muni-line a { color: var(--brand); font-weight: 600; }
.cal-muni-line a .wa-glyph { width: 15px; height: 15px; vertical-align: -3px; margin-inline-end: 2px; }
/* Featured authority card - amber stripe + sand accents set it apart from the two white cards. */
.cal-muni-card { border: 1px solid #e7ddcf; border-radius: 14px; overflow: hidden; background: #fff; margin-top: 12px; }
.cal-muni-stripe { height: 5px; background: #b58c63; }
.cal-muni-cbody { padding: 13px 14px 15px; }
.cal-muni-chead { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.cal-muni-cic { width: 38px; height: 38px; border-radius: 11px; background: #f4efe7; border: 1px solid #e7ddcf; display: flex; align-items: center; justify-content: center; font-size: 20px; flex: none; }
.cal-muni-ctitle { font-size: 15px; font-weight: 800; color: #1d1d1f; flex: 1; min-width: 0; }
.cal-muni-chip { font-size: 10.5px; font-weight: 700; background: #f4efe7; color: #7c5d3b; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.cal-muni-cdesc { font-size: 13px; color: #5a6472; line-height: 1.6; margin: 0 0 12px; }
.cal-muni-cdesc b { color: #1d1d1f; }
.cal-muni-band-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; font-size: 13px; }
.cal-muni-cta { width: 100%; font: inherit; font-size: 14px; font-weight: 700; color: #fff; background: #b4690e; border: 1px solid transparent; border-radius: 10px; padding: 10px; cursor: pointer; }
.cal-muni-cta:hover { background: #9a5a0c; }
/* A small, understated OUTLINED button (not help text) - it's a secondary "undo" action. */
.cal-muni-stop { display: block; width: fit-content; margin: 12px auto 0; font: inherit; font-size: 12px; font-weight: 600; color: #6e6e73; background: #fff; border: 1px solid #d7dbe2; border-radius: 8px; cursor: pointer; padding: 6px 14px; }
.cal-muni-stop:hover { color: #44464a; background: #f1f3f6; border-color: #c5ccd6; }
/* "יומנים והתראות": three calendars by purpose (authority / committee / parents). */
/* Three calendars across, filling the tab-row width; they stack on a phone. align-items:start so a
   tall card (the authority, with its adopt choice) doesn't stretch the short ones. */
.cal-byp { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
@media (min-width: 760px) { .cal-byp { grid-template-columns: repeat(3, 1fr); } }
.cal-byp > .cal-muni-card, .cal-byp > .cal-card { margin-top: 0; }
.cal-byp-parents { border-color: #d3e2f3; }
/* The parents stripe shares .cal-muni-stripe (tan) with the authority card; this higher-specificity
   rule is what actually makes it the soft blue - a bare .cal-stripe-parents ties and loses to the
   later .cal-muni-stripe. */
.cal-byp-parents .cal-muni-stripe { background: #5b93d1; }
.cal-byp-parents .cal-muni-cic { background: #e8f0fa; border-color: #d3e2f3; }
.cal-byp-parents .cal-muni-chip { background: #f0f0f2; color: #6e6e73; }               /* off = grey */
.cal-byp-parents .cal-muni-chip.cal-byp-on { background: #e8f0fa; color: #2f6bb0; }    /* active = the same soft blue */
/* A gentle attention pulse on the parents card when arriving from the "shared with parents" link. */
@keyframes calPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(91, 147, 209, 0); } 35% { box-shadow: 0 0 0 5px rgba(91, 147, 209, 0.45); } }
.cal-pulse { animation: calPulse 1s ease-out 3; }
@media (prefers-reduced-motion: reduce) { .cal-pulse { animation: none; } }
/* The "also shared with parents" note inside the authority subscribe popup. */
/* White calendar-subscribe buttons (apple/google) - quieter than the solid blue .btn, matching the
   white "add" pills, so the ONE thing that stands out here is the parents callout below. */
.cal-wbtn { font: inherit; font-size: 13px; font-weight: 600; color: var(--brand); background: #fff; border: 1px solid var(--line-strong, #d7dbe0); border-radius: 999px; padding: 9px 18px; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.cal-wbtn:hover { background: #f7f9fc; border-color: #c3c9d2; }
/* The "shared with parents - don't re-share" message, emphasized as a calm brand-tinted callout so
   the committee can't miss it (otherwise they re-send the link to parents by hand). */
.muni-sub-parents { margin-top: 16px; background: var(--brand-050, #eef4fb); border: 1px solid #cfe0f5; border-radius: 12px; padding: 12px 14px; font-size: 13px; color: #3a4a60; line-height: 1.6; }
.muni-sub-parents b { color: #243b57; }
.muni-sub-parents-link { display: inline-block; margin-top: 6px; font: inherit; font-size: 13px; color: var(--brand); background: none; border: 0; cursor: pointer; padding: 0; font-weight: 700; }
.muni-sub-parents-link:hover { text-decoration: underline; }

/* "👁 תצוגה מקדימה" open button on each calendar card - white pill, full width. */
.cal-pv-open { width: 100%; margin-top: 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--brand); background: #fff; border: 1px solid var(--line-strong, #d7dbe0); border-radius: 980px; padding: 9px 18px; cursor: pointer; }
.cal-pv-open:hover { background: #f7f9fc; border-color: #c3c9d2; }
/* The calendar preview popup (openCalPreview): a minimalist weekly agenda. */
.cal-pv-box { max-width: 460px; }
.pv-nav { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid #f1f3f6; }
/* direction:ltr so the ‹ / › glyphs are NOT bidi-mirrored in the RTL popup (same fix as HDP's
   .hdp-nav). Order stays RTL: the RIGHT arrow (›) goes BACK, the LEFT arrow (‹) goes forward. */
.pv-arr { width: 30px; height: 30px; border: 1px solid #e0e3e8; background: #fff; border-radius: 50%; cursor: pointer; font-size: 15px; color: #4a5568; display: flex; align-items: center; justify-content: center; direction: ltr; }
.pv-arr:hover { background: #f4f5f7; }
.pv-range { font-weight: 700; font-size: 14px; color: #1d1d1f; min-width: 150px; text-align: center; }
.pv-today { font-size: 12px; color: var(--brand); background: none; border: 0; cursor: pointer; font-weight: 600; }
.pv-body { padding: 2px 0 6px; max-height: 60vh; overflow: auto; }
/* "more below" cue: a fade + a bouncing ↓, shown only while the body can still scroll down
   (toggled via .cal-pv-box.pv-more in openCalPreview), so a cut-off week never looks like it just ends. */
.pv-body-wrap { position: relative; }
.pv-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; display: none;
  align-items: flex-end; justify-content: center; padding-bottom: 8px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--surface) 72%); }
.cal-pv-box.pv-more .pv-foot { display: flex; }
.pv-more { pointer-events: auto; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #e0e3e8;
  background: #fff; color: var(--brand); font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 7px rgba(0,0,0,.2);
  animation: pvMoreBounce 1.5s ease-in-out infinite; }
.pv-more:hover { background: #f4f5f7; }
@keyframes pvMoreBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .pv-more { animation: none; } }
.pv-day { padding: 9px 16px; border-bottom: 1px solid #f4f5f7; }
.pv-day:last-child { border-bottom: 0; }
.pv-day.is-today { background: #f3f8ff; }
.pv-dh { display: flex; align-items: baseline; gap: 7px; margin-bottom: 5px; }
.pv-dh .dn { font-weight: 700; font-size: 13px; color: #1d1d1f; }
.pv-dh .dd { font-size: 12px; color: #8a94a2; }
.pv-ev { display: flex; gap: 9px; align-items: baseline; padding: 3px 0; font-size: 13px; }
.pv-ev .tm, .pv-ev .al { color: #6e6e73; min-width: 46px; font-size: 12px; font-variant-numeric: tabular-nums; }
.pv-ev .tt { color: #2a2a2e; }
.pv-empty { font-size: 12px; color: #b8bec7; padding: 1px 0; }
.pv-evs { min-height: 16px; }
/* Loading: the date rows are drawn instantly; a shimmer skeleton fills each day until the events
   arrive (keeps the popup height stable - no collapse-and-grow on week navigation). */
.pv-skel { height: 15px; border-radius: 6px; background: #eef1f5; position: relative; overflow: hidden; }
.pv-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent); animation: pvSkel 1.2s ease-in-out infinite; }
@keyframes pvSkel { 100% { transform: translateX(100%); } }
.pv-bar { height: 2px; background: #eef1f5; opacity: 0; transition: opacity .15s; }
.pv-loading .pv-bar { opacity: 1; }
.pv-loading .pv-bar::before { content: ""; display: block; height: 100%; width: 35%; background: var(--brand); border-radius: 2px; animation: pvBar .9s ease-in-out infinite; }
@keyframes pvBar { 0% { transform: translateX(-120%); } 100% { transform: translateX(380%); } }
@media (prefers-reduced-motion: reduce) { .pv-skel::after, .pv-loading .pv-bar::before { animation: none; } }
.cal-muni-ask { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; color: #44464a; margin: 4px 0 8px; }
.cal-muni-viewlist { font: inherit; font-size: 12px; font-weight: 600; color: var(--brand); background: none; border: 0; cursor: pointer; padding: 2px 4px; white-space: nowrap; }
.cal-muni-viewlist:hover { text-decoration: underline; }
.cal-muni-choice { display: flex; gap: 8px; }
.cal-muni-pill { flex: 1; font: inherit; font-size: 13px; font-weight: 700; color: #5a6472; background: #fff; border: 1px solid #d7dde6; border-radius: 10px; padding: 8px; cursor: pointer; }
/* Quiet buttons in "יומנים והתראות" (Direction-3): only the stripes carry colour, so every
   add/share button is a calm outline. The one primary action per card (add-to-Apple / share the
   parent page) gets an ink border for a touch of hierarchy; the selected adopt pill goes ink, not
   brand-blue, so it doesn't fight the card's tan. Scoped to .cal-byp - the hero elsewhere is untouched. */
.cal-byp .cal-apple, .cal-byp .cal-google, .cal-byp .cal-share, .cal-byp .cal-pp-manage {
  background: #fff; color: #1d1d1f; border: 1px solid #d7dbe0; font-weight: 700; }
.cal-byp .cal-apple:hover, .cal-byp .cal-google:hover, .cal-byp .cal-share:hover, .cal-byp .cal-pp-manage:hover {
  background: #f4f5f7; border-color: #c5ccd6; }
.cal-byp .cal-apple, .cal-byp .cal-pp-manage { border-color: #1d1d1f; }
/* The WhatsApp share button is white here (not the green .btn-whatsapp), so its glyph would inherit
   the dark text via .btn-whatsapp .wa-glyph:currentColor. Restore the familiar WhatsApp green. */
.cal-byp .cal-share .wa-glyph { fill: #25d366; }
.cal-byp .cal-muni-pill.on { background: #3a3a3c; color: #fff; border-color: #3a3a3c; }
/* Parents card: the primary button full-width, the preview link its own centred line with air. */
.cal-byp .cal-pp-manage { display: block; width: 100%; }
.cal-byp .cal-pp-view { display: block; text-align: center; margin-top: 12px; }
.cal-al-note { font-size: 12px; color: #6e6e73; margin-bottom: 10px; line-height: 1.5; }
.cal-al-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; }
.cal-al-row { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px; background: #f7faf5; border: 1px solid #e4efd9; border-radius: 8px; font-size: 13px; }
.cal-al-ic { flex: 0 0 auto; }
.cal-al-t { flex: 1 1 auto; font-weight: 600; }
.cal-al-k { font-weight: 400; color: #8a94a2; font-size: 12px; }
.cal-al-d { flex: 0 0 auto; color: #5a6472; font-size: 12px; white-space: nowrap; }
.cal-share-hd { font-size: 16px; font-weight: 800; color: #1d1d1f; margin: 2px 0; }
.cal-share-sub { font-size: 13px; color: #6e6e73; margin-bottom: 14px; line-height: 1.5; }
/* gender split inside the "מספר הילדים" budget card (post-approval) */
.bsum-gender { display: flex; flex-wrap: nowrap; gap: 4px; justify-content: center; margin-top: 6px; }
/* direction:ltr keeps each chip's "♂ 5" in that order (symbol then count) regardless of the
   RTL card; the chips themselves still sit right-to-left in the row. */
.bg-chip { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 8px; white-space: nowrap; direction: ltr; }
.bg-b { background: #E6F1FB; color: #0C447C; }
.bg-g { background: #FBEAF0; color: #72243E; }
.bg-u { background: #f1f0ec; color: #87867e; }
.cal-muni-bandlbl { font-weight: 600; color: #1d1d1f; }
.cal-muni-warn2 { color: #b4690e; background: #fff6e8; font-size: 12px; padding: 3px 9px; border-radius: 7px; }
.cal-ic-muni { font-size: 20px; }
/* "load from city" button inside the vacations expand */
.cal-sd-loadbtn { font: inherit; font-size: 13px; font-weight: 600; color: var(--brand); background: var(--brand-050, #eef3ff); border: 1px dashed var(--brand); border-radius: 8px; padding: 9px 12px; cursor: pointer; width: 100%; box-sizing: border-box; }
/* ניהול ערים tab */
.cal-cities { display: flex; flex-direction: column; gap: 10px; }
.cal-madm-newrow { display: flex; gap: 6px; align-items: center; }
.cal-madm-newcity { flex: 1; min-width: 0; font: inherit; font-size: 14px; border: 1px solid #d7dbe0; border-radius: 8px; padding: 8px 10px; background: #fff; color: #1d1d1f; }
.cal-madm-newgo { font: inherit; font-size: 13px; border: 1px solid var(--brand); border-radius: 8px; background: var(--brand-050, #eef3ff); color: var(--brand); padding: 8px 12px; cursor: pointer; flex: none; }
.cal-madm-imp { font: inherit; font-size: 13px; border: 1px solid #d7dbe0; border-radius: 8px; background: #fff; color: #5a6472; padding: 7px 12px; cursor: pointer; }
.cal-madm-tmpl { font: inherit; font-size: 13px; color: var(--brand); text-decoration: none; padding: 7px 4px; align-self: center; }
/* standalone ניהול-ערים page: the transient status text in the toolbar */
.cities-status { font-size: 13px; color: #8a94a2; opacity: 0; transition: opacity .3s; }
.cities-status.saved { color: #2e7d32; }
.cities-status.error { color: #c0392b; }
#citiesView { margin-top: 12px; }
.share-tip {
  background: var(--brand-050);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--brand-700);
}
.share-actions { display: flex; gap: 10px; margin-top: 2px; }
.share-actions .btn { flex: 1; }
/* The WhatsApp glyph on the share affordances - green, so it reads as "send to the
   parents' WhatsApp group" at a glance. */
.wa-glyph { width: 18px; height: 18px; fill: #25d366; display: inline-block; }
/* The PayBox app-icon (blue square + white glyph, colours baked in - not CSS-tinted). */
.pb-glyph { width: 18px; height: 18px; display: inline-block; vertical-align: -4px; border-radius: 4px; }
.pay-coll-pb .pb-glyph { width: 15px; height: 15px; vertical-align: -3px; border-radius: 3.5px; }
.pm-ic .pb-glyph { width: 20px; height: 20px; vertical-align: -5px; }
/* Desktop: a small WhatsApp mark next to a done committee expense's total, to reopen the
   share popup. */
.cc-share-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  line-height: 0;
  padding: 4px 5px;
  margin-inline-start: 2px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
}
.cc-share-btn:hover { background: #e7f9ef; }
.cc-share-btn .wa-glyph { width: 17px; height: 17px; }
/* Phone card menu: the WhatsApp glyph sits before the label, inline with the text. */
.pay-sheet-share .wa-glyph { width: 19px; height: 19px; vertical-align: -4px; margin-inline-end: 4px; }

/* Import-help popup: an example of the expected table, then the file picker. The table
   is meant to fit the popup with no sideways scroll - a scrolled-off column gets missed -
   so it fills the width, headers may wrap, and the cells are tight. */
.imp-help { max-width: 680px; }
.imp-lead { font-size: 14px; }
.imp-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; margin: 4px 0 14px; }
.imp-table { border-collapse: collapse; width: 100%; table-layout: fixed; font-size: 13px; }
.imp-table th, .imp-table td { border: 1px solid var(--line); padding: 5px 6px; text-align: start; overflow-wrap: break-word; }
.imp-table th { background: var(--soft, #f4f7fb); font-weight: 800; color: var(--text); }
.imp-table td { color: var(--muted); direction: ltr; unicode-bidi: plaintext; }
.imp-subhead { font-size: 14px; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.imp-notes { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text); }
.imp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }

/* Phone: the 8-column example table is unreadable side-scrolled, so turn its first
   example row into a stacked card - one "column name → value" line each, so the
   recognised header names stay legible. One card is enough to show the shape. */
@media (max-width: 560px) {
  .imp-table-wrap { overflow-x: visible; border: 0; border-radius: 0; margin: 0 0 14px; }
  .imp-table { table-layout: auto; font-size: 14px; }
  .imp-table thead { display: none; }
  .imp-table, .imp-table tbody, .imp-table tr, .imp-table td { display: block; width: 100%; }
  .imp-table tbody tr + tr { display: none; }
  .imp-table tr { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
  .imp-table td { display: flex; justify-content: space-between; gap: 14px;
    border: 0; border-bottom: 1px solid var(--line); padding: 8px 12px;
    direction: rtl; unicode-bidi: plaintext; }
  .imp-table td:last-child { border-bottom: 0; }
  .imp-table td::before { content: attr(data-label); font-weight: 800; color: var(--text); }
}

/* Budget settings form */
.bs-field { margin-bottom: 16px; }
.bs-field > label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.bs-field input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
}
.bs-field input:focus { outline: none; box-shadow: var(--ring); border-color: var(--brand); }
.bs-field input:disabled {
  background: var(--head-bg);
  color: var(--muted);
  cursor: not-allowed;
}
.bs-hint { display: block; color: var(--muted); font-size: 12px; margin-top: 4px; font-weight: 600; }

.bs-extras { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px; }
.bs-extras-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.bs-extras-head h3 { margin: 0; font-size: 15px; }
.bs-extras-head .btn { padding: 7px 12px; font-size: 13px; }
.bs-extra-list { display: flex; flex-direction: column; gap: 8px; }
.bs-extra-row { display: grid; grid-template-columns: 1.1fr 0.9fr 1.4fr auto; gap: 8px; align-items: center; }
.bs-extra-row input {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
}
.bs-extra-row input:focus { outline: none; box-shadow: var(--ring); border-color: var(--brand); }
.bs-ex-del {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  padding: 6px;
  border-radius: var(--radius-sm);
  line-height: 1;
}
.bs-ex-del:hover { background: rgba(214,69,69,.12); }
.bs-total { margin-top: 14px; text-align: left; font-weight: 700; font-size: 15px; }
.bs-total b { color: var(--brand-700); }

.bs-section { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px; }
.bs-section h3 { margin: 0 0 10px; font-size: 15px; }
.bs-gifts { width: 100%; border-collapse: collapse; }
.bs-gifts th, .bs-gifts td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--line); }
.bs-gifts thead th { font-size: 12px; color: var(--muted); font-weight: 700; background: var(--head-bg); }
.bs-gifts tbody td { font-size: 14px; }
.bs-gift-role { font-weight: 600; }
.bs-gift-count { color: var(--muted); }
.bs-pct-wrap { display: flex; align-items: center; gap: 4px; max-width: 120px; }
.bs-gift-pct {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
}
.bs-gift-pct:focus { outline: none; box-shadow: var(--ring); border-color: var(--brand); }
.bs-gift-pct:disabled { background: var(--head-bg); color: var(--muted); cursor: not-allowed; }
.bs-pct-sign { color: var(--muted); font-weight: 700; }

/* Action cell (e.g. reimbursements button) */
.cell-action { text-align: center; }
.reimburse-btn { padding: 5px 10px; font-size: 12px; white-space: nowrap; }

/* Staff-gift breakdown */
.gift-cell-btn {
  width: 100%; border: 1px dashed var(--line-strong); background: var(--brand-050);
  color: var(--brand-700); border-radius: var(--radius-sm); padding: 7px 8px;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  direction: ltr; font-variant-numeric: tabular-nums;
}
.gift-cell-btn:hover { border-color: var(--brand); }
.sg-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.sg-row { display: flex; align-items: center; gap: 10px; padding: 6px 2px; border-bottom: 1px solid var(--line); }
.sg-name { font-weight: 600; flex: 0 0 34%; }
.sg-note { flex: 1 1 auto; min-width: 0; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit; font-size: 14px; }
.sg-note:focus { outline: none; box-shadow: var(--ring); border-color: var(--brand); }
.sg-role { color: var(--muted); font-weight: 600; font-size: 12px; }
.sg-amt-wrap { display: flex; align-items: center; gap: 4px; }
.sg-amt { width: 90px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit; font-size: 14px; text-align: center; }
.sg-amt:focus { outline: none; box-shadow: var(--ring); border-color: var(--brand); }
.sg-total { text-align: left; font-weight: 800; font-size: 15px; margin-top: 6px; }
.sg-total b { color: var(--brand-700); }
.sg-field { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 14px; }
.sg-field > span { font-size: 13px; color: var(--muted); font-weight: 600; }
.sg-field-input {
  padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font: inherit; font-size: 14px; width: 100%; box-sizing: border-box; background: var(--surface); color: var(--text);
}
.sg-field-input:focus { outline: none; box-shadow: var(--ring); border-color: var(--brand); }
.sg-del { flex: 0 0 auto; font-size: 14px; padding: 4px; }
.sg-add-wrap { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; flex-wrap: wrap; }
.sg-add-label { font-size: 13px; font-weight: 600; color: var(--brand-700); }
.sg-add-select { padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit; font-size: 14px; background: var(--surface); cursor: pointer; }
.sg-add-select:focus { outline: none; box-shadow: var(--ring); border-color: var(--brand); }
/* "החל על כולם": the offer that appears right under a row once its amount is set - copy
   that amount onto every staff member in one click. */
.sg-applyall { display: flex; align-items: center; gap: 10px; background: var(--brand-050, #eef5ff);
  border: 1px solid #cfe0f5; border-radius: 10px; padding: 7px 11px; margin: -2px 0 8px;
  font-size: 12.5px; color: var(--brand-700, #2f6bb0); }
.sg-applyall .sg-aa-ic { font-size: 14px; }
.sg-applyall b { font-weight: 800; }
.sg-aa-apply { margin-inline-start: auto; font: inherit; font-size: 12px; font-weight: 700;
  background: var(--brand); color: #fff; border: 0; border-radius: 7px; padding: 5px 12px;
  cursor: pointer; white-space: nowrap; }
.sg-aa-x { background: none; border: 0; color: #9bb2cf; cursor: pointer; font-size: 14px; line-height: 1; padding: 2px; }
/* The "סכום קבוע" alternative to the per-staff list. */
.sg-fixed-hint { font-size: 12px; color: var(--muted); margin: 8px 2px 0; line-height: 1.5; }

/* --- Children: parents as an expandable panel --------------------------- */
.parents-col-th .th-label { cursor: default; }
.parents-summary { padding: 4px 6px; }
.parents-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: var(--surface, #fff); border: 1px solid var(--line-strong); cursor: pointer;
  padding: 7px 10px; border-radius: 999px; font: inherit; text-align: start; color: inherit;
  transition: border-color .12s, background .12s;
}
.parents-toggle:hover { background: var(--brand-050); border-color: var(--brand); }
.parents-summary.open .parents-toggle { background: var(--brand-050); border-color: var(--brand); }
.parents-icon { flex: 0 0 auto; font-size: 15px; line-height: 1; }
.parents-chev { color: var(--brand-700); font-size: 12px; flex: 0 0 auto; margin-inline-start: auto; }
.parents-names { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parents-summary.empty .parents-names { color: var(--muted); font-weight: 500; }

.parents-detail-cell {
  background: var(--surface, #fff); border-top: 1px solid var(--line);
  padding: 10px 0;
}
.parents-panel { display: flex; flex-direction: column; gap: 8px; }
/* The panel has no horizontal padding, so its grid starts at the same left
   edge as the row's actions column. The last column mirrors that column
   (48px wide, trash centered) so the remove-parent trash lines up with the
   row-delete buttons above and below it. The first column (title) is padded
   on the right to match the row content. */
.parents-grid {
  display: grid; align-items: center; gap: 6px 12px; width: 100%;
  grid-template-columns:
    auto minmax(120px, 1.2fr) minmax(120px, 1fr) minmax(160px, 1.6fr) 48px;
}
.parents-grid-head { font-size: 11px; color: var(--muted); font-weight: 600; }
.parents-grid-title {
  font-weight: 800; color: var(--brand-700); font-size: 13px;
  white-space: nowrap; padding-inline: 14px 4px;
}
.parents-grid-act { display: flex; justify-content: center; }
.parents-grid .cell-input, .parents-grid .cell-select {
  padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font: inherit; font-size: 14px; width: 100%; box-sizing: border-box;
}
.parents-grid .cell-input:focus, .parents-grid .cell-select:focus {
  outline: none; box-shadow: var(--ring); border-color: var(--brand);
}
.parent-remove { flex: 0 0 auto; }
.parent-add {
  font: inherit; cursor: pointer; border-radius: var(--radius-sm); padding: 7px 12px;
  align-self: start; border: 1px dashed var(--brand); color: var(--brand-700);
  font-weight: 600; background: none;
}
.parent-add:hover { background: var(--brand-050, #eef4ff); }

/* --- Payments / collections tab (גבייה) -------------------------------- */
/* No page heading (the active tab already names the page), so the sheet itself gives the
   table its breathing room at the top. */
.pay-wrap { padding: 12px 2px 24px; }
/* The collections screen is the SAME table as the children list, so it is sized and
   spaced the same. It used to set no font-size at all, which meant it fell through to
   the browser's own 16px while the children grid sits at 13px - the collections screen
   rendered a quarter larger than every other tab, which is what made the product look
   like different people had built each screen.
   The WIDTH is deliberately not the grid's. The children list has a dozen columns and
   fills the page naturally; this one often has a single collection, and stretching it
   across the page gave that one column several hundred pixels of nothing. So the table
   takes its natural width and the border hugs it. */
/* Free-text child search above the payments table. */
.pay-search-wrap { margin: 2px 0 12px; }
.pay-search { max-width: 100%; }
.pay-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); width: fit-content; max-width: 100%; }
.pay-table { border-collapse: collapse; width: auto; font-size: 13px; }
.pay-table th, .pay-table td { border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pay-table th:last-child, .pay-table td:last-child { border-inline-end: none; }
.pay-name-col {
  text-align: start; padding: 10px 14px; font-weight: 400; white-space: nowrap;
  position: sticky; inset-inline-start: 0; background: var(--surface); z-index: 1;
}
.pay-table thead th { color: #434a52; padding: 11px 12px; font-weight: 700; }
.pay-table thead .pay-name-col { background: var(--head-bg); font-weight: 700; }
/* Separate the header block (title + two summary rows) from the body, like the grid. */
.pay-table thead tr:last-child th, .pay-table thead tr:last-child td { border-bottom: 1px solid var(--line-strong); }
.pay-coll {
  padding: 8px 12px; min-width: 140px; text-align: center; vertical-align: top;
  background: var(--head-bg); position: relative;
}
.pay-coll-title { font-weight: 700; color: #434a52; }
/* "✓ סמן הכל" - mark a whole collection paid in one click (column action). */
.pay-coll-all { margin-top: 5px; font-size: 11px; padding: 2px 8px; background: #fff;
  border: 1px solid var(--line-strong); border-radius: 6px; color: #1a8f4c; cursor: pointer; }
.pay-coll-all:hover { background: rgba(26,143,76,.08); border-color: #1a8f4c; }
/* Header "bubbles" per collection: how many paid (🧒) + how much collected (💰). */
.pay-pill { display: inline-flex; align-items: center; gap: 3px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 400; white-space: nowrap; }
.pay-pill b { font-weight: 700; font-variant-numeric: tabular-nums; }
.pay-pill-ic { font-size: 12px; }
.pay-pill-count { background: var(--brand-050); color: var(--brand-700); }
/* The third bubble: money this round is still waiting for. Amber, because it is the
   part of the budget that is not money yet. */
/* A round the committee stopped chasing. */
.pay-coll-closed { margin-top: 5px; font-size: 11px; font-weight: 700; color: var(--muted); }
.pay-coll-close { margin-top: 5px; margin-inline-start: 4px; font-size: 11px; padding: 2px 8px;
  background: #fff; border: 1px solid var(--line-strong); border-radius: 6px;
  color: var(--muted); cursor: pointer; }
.pay-coll-close:hover { background: var(--head-bg); color: var(--text); }
/* Inline cell editor: number input + green ✓ confirm. */
.pay-inline { display: inline-flex; align-items: center; gap: 3px; }
.pay-inp { width: 48px; height: 28px; border: 1px solid var(--brand); border-radius: 6px;
  background: #fff; text-align: center; font: inherit; font-size: 14px; font-weight: 700;
  color: var(--text); box-shadow: var(--ring); direction: ltr; }
.pay-inp:focus { outline: none; }
.pay-inp-of { font-size: 11px; color: var(--muted); }
.pay-ok { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px;
  padding: 0; border: none; border-radius: 6px; background: #1a8f4c; color: #fff; font-size: 15px;
  font-weight: 800; line-height: 1; cursor: pointer; }
.pay-ok:hover { background: #15753e; }
/* Empty placeholder columns - keep the column widths natural; no add action for now. */
.pay-coll-ghost { background: var(--head-bg); }
.pay-ghost-slot { min-width: 100px; min-height: 40px; border: 1px dashed var(--line); border-radius: 8px; }
.pay-coll-link { border: none; background: transparent; cursor: pointer; font-size: 14px; padding: 1px 3px; border-radius: 6px; vertical-align: middle; line-height: 1; }
.pay-coll-link:hover { background: var(--brand-050); }
.pay-coll-date { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* The amount each child owes and how many have paid it, on one line: two numbers that
   sit side by side get compared, and a column header is read while scanning across
   rounds rather than studied. */
.pay-coll-amt { display: flex; align-items: center; justify-content: center; gap: 6px;
                flex-wrap: wrap; font-size: 12px; color: var(--text); margin-top: 2px;
                font-weight: 600; }
/* A DRAWN facsimile of PayBox's three-dots menu - never a screenshot of one. A real
   screenshot of a real group carries a person's name, the gan's name and its amounts,
   and blurring is a promise that holds only until one corner is missed. This holds no
   data at all, stays sharp at any size, and follows this page's own theme and
   direction. Its only job is to point at ONE row out of eleven. */
.pbx-menu { margin: 4px 0 2px; padding: 6px; border: 1px solid var(--line, #e3e8ee);
            border-radius: 12px; background: var(--soft, #f4f7fb); max-width: 260px;
            font-size: 12px; }
.pbx-menu-top { text-align: start; padding: 0 6px 4px; }
.pbx-dots { font-size: 15px; letter-spacing: 1px; color: var(--muted, #6b7885); }
.pbx-menu-more { text-align: center; color: var(--muted, #6b7885); line-height: 1; padding: 2px 0; }
.pbx-menu-row { padding: 6px 9px; border-radius: 7px; background: #fff;
                color: var(--text); margin: 2px 0; }
.pbx-menu-on { background: var(--brand, #0071e3); color: #fff; font-weight: 700; }

/* The PayBox link button. Its whole job is to be answered once, so the two states are
   deliberately far apart: a filled invitation while it is missing, and a quiet outline
   once it is there. The label does not change between them - only the weight and the
   icon - so the header does not jump when somebody answers it. */
/* A row of its own, before the action buttons - asked for explicitly, and right: it is
   a question about this round, not another thing to do to it. */
.pay-coll-pbl-row { display: flex; justify-content: center; }
.pay-coll-pbl { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px;
                font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
                padding: 4px 11px; border-radius: 999px; border: 1px solid transparent;
                white-space: nowrap; }
.pbl-missing { background: #fff3d6; border-color: #e6b64c; color: #8a5a00; }
.pbl-missing:hover { background: #ffe9b3; }
.pbl-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.pay-coll-actions { position: absolute; inset-inline-start: 4px; top: 4px; display: flex; gap: 2px; }
.pay-coll-edit, .pay-coll-del {
  border: none; background: none; cursor: pointer; font-size: 12px; padding: 2px; border-radius: 6px; opacity: .55;
}
.pay-coll-edit:hover, .pay-coll-del:hover { opacity: 1; background: #ffffff; }
.pay-cell { text-align: center; padding: 4px; }
/* Four-state payment cell: untouched (faint +), partial (orange amount), full (green ✓),
   and settled-at-0 (struck-through grey zero = "will not pay"). The last two used to be
   the same thing on screen, which is why typing 0 did nothing visible. */
.pay-btn { display: inline-flex; align-items: center; justify-content: center; gap: 1px;
  width: 100%; min-width: 46px; min-height: 34px; padding: 5px 8px; box-sizing: border-box;
  border: none; background: transparent; border-radius: 8px; cursor: pointer; font: inherit; }
.pay-btn-ro { cursor: default; }
.pay-mark-full { color: #1a8f4c; font-size: 18px; font-weight: 800; line-height: 1; }
.pay-mark-partial { color: #b8690f; font-weight: 800; font-size: 14px; white-space: nowrap; line-height: 1; }
/* Paid MORE than the round asks. Red rather than the amber of a partial payment: a
   partial one is simply unfinished, this one means money is sitting somewhere it may not
   belong. Same shape as partial - the number over the expected one - because the
   question a reader has is identical: how much, against how much. */
.pay-mark-over { color: #b3261e; font-weight: 800; font-size: 14px; white-space: nowrap;
                 line-height: 1; }
.pay-of { color: var(--muted); font-weight: 600; font-size: 11px; }
.pay-mark-none { color: var(--line-strong); font-size: 17px; font-weight: 400; line-height: 1; }
/* Settled at 0 - "will not pay". It has to look like a DECISION, not like the empty
   cell it was indistinguishable from until now: a struck-through zero in a grey chip. */
.pay-mark-zero { color: #8a8f96; font-size: 13px; font-weight: 800; line-height: 1;
  text-decoration: line-through; text-decoration-thickness: 2px; }
.pay-cell-zero .pay-btn { background: rgba(0,0,0,.05); }
/* The two extra actions inside the open editor: "לא ישלם" and the way back, "נקה". */
.pay-acts { display: flex; gap: 4px; justify-content: center; margin-top: 4px; }
.pay-act { border: 1px solid var(--line); background: #fff; color: var(--muted);
  font: inherit; font-size: 10px; padding: 1px 6px; border-radius: 999px; cursor: pointer;
  white-space: nowrap; }
.pay-act:hover { background: var(--head-bg); color: var(--text); }
.pay-cell-full .pay-btn { background: rgba(26,143,76,.12); }
.pay-cell-partial .pay-btn { background: rgba(217,131,15,.14); }
.pay-cell-over .pay-btn { background: rgba(179,38,30,.10); }
/* The cells darken on hover with a mouse only. A touch screen keeps :hover on the last
   cell tapped, and here the tint IS the state (green paid, amber partial...) - a stuck
   hover read as a different state. */
@media (hover: hover) and (pointer: fine) {
  .pay-btn:hover { background: rgba(0,0,0,.05); }
  .pay-btn-ro:hover { background: transparent; }
  .pay-cell-zero .pay-btn:hover { background: rgba(0,0,0,.10); }
  .pay-cell-full .pay-btn:hover { background: rgba(26,143,76,.20); }
  .pay-cell-partial .pay-btn:hover { background: rgba(217,131,15,.24); }
  .pay-cell-over .pay-btn:hover { background: rgba(179,38,30,.18); }
}
/* Phone: the empty placeholder columns only keep a single collection from stretching
   across a desktop page - on a phone they just push the table into a sideways scroll. */
@media (max-width: 560px) { .pay-coll-ghost { display: none; } }
/* הוצאות on a phone (cards): the header's "הוחזר" status label, and the summary line above
   the cards. The in-card הוחזר checkbox is hidden there - the label IS the control. */
.reimb-pill {
  flex: 0 0 auto; font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; cursor: pointer;
}
.reimb-pill.is-open { background: #fff3d6; border-color: #e6b64c; color: #8a5a00; }
.reimb-pill.is-done { background: #e6f4ea; border-color: #9fd3ae; color: #1a7a3f; }
.reimb-pill.is-fund { background: var(--head-bg); border-color: var(--line); color: var(--muted); }
.reimb-pill:disabled { cursor: default; pointer-events: none; }   /* a tap opens the card instead */
.reimb-owed { display: none; }
@media (max-width: 560px) {
  .reimb-owed:not([hidden]) {
    display: block; margin: 10px 12px 6px; padding: 9px 12px; border-radius: 10px;
    font-size: 14px; font-weight: 700;
  }
  .reimb-owed.is-open { background: #fff3d6; color: #8a5a00; }
  .reimb-owed.is-done { background: #e6f4ea; color: #1a7a3f; }
  #grid.grid-cards.grid-reimb tbody td[data-col="reimbursed"] { display: none !important; }
  /* Nothing is deleted from here (the rows come from the plan), so the card has no
     footer; and "הוצאה" can't be changed here, so it reads as text, not a dropdown. */
  #grid.grid-cards.grid-reimb tbody td.actions { display: none !important; }
  #grid.grid-cards.grid-reimb tbody td select:disabled {
    -webkit-appearance: none; appearance: none; background-image: none;
  }
}
/* A short "ביטול" (undo) notice at the bottom of the screen (showUndoToast). */
/* The one floating notice for every action (showToast). Rises from the bottom, over
   everything, and clears itself; locked above the phone's address bar via safe-area. */
.app-toast {
  position: fixed; z-index: 1250; inset-inline: 12px; bottom: calc(14px + env(safe-area-inset-bottom));
  max-width: 520px; margin: 0 auto; direction: rtl; box-sizing: border-box;
  display: flex; align-items: center; gap: 10px;
  background: #1f2a37; color: #fff; border-radius: 12px; padding: 12px 14px;
  font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.app-toast[hidden] { display: none; }
.app-toast .toast-ic {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #fff;
}
.toast-ok .toast-ic { background: #1f9d57; }
.toast-error .toast-ic { background: var(--danger, #e0392e); }
.app-toast .toast-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-toast .toast-act {
  flex: 0 0 auto; font: inherit; font-size: 14px; font-weight: 800; color: #8cc4ff; cursor: pointer;
  background: none; border: 0; padding: 4px 6px; text-decoration: underline;
}
@keyframes toast-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.app-toast.toast-in { animation: toast-rise .24s ease-out; }
@media (prefers-reduced-motion: reduce) { .app-toast.toast-in { animation: none; } }

/* "חזרה לראש הדף" - a small, quiet disc in the bottom-LEFT corner (clear of the iPhone's
   right-edge back-swipe). It is absent at the top of the list and only fades in once you
   have scrolled down about a screen (app.js), and it steps aside for any bottom notice
   (toast / undo / update / stale) so the two never fight for the same corner. */
.to-top {
  position: fixed; z-index: 1200; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  width: 44px; height: 44px; border-radius: 50%; padding: 0; cursor: pointer;
  background: #fff; color: #5a6472; border: 0.5px solid #e2e7ee;
  box-shadow: 0 2px 10px rgba(16, 24, 40, .16);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.to-top.show { opacity: .95; visibility: visible; transform: none; pointer-events: auto; }
.to-top:active { transform: scale(.94); }
/* Never over a bottom notice - those are centred, this is in the corner, but on a phone a
   full-width toast would still reach it, so it hides while any notice is up. */
body.notice-up .to-top,
body:has(#appToast:not([hidden])) .to-top,
body:has(.update-bar) .to-top,
body:has(.stale-banner) .to-top { opacity: 0; visibility: hidden; pointer-events: none; }
@media (min-width: 561px) { .to-top { width: 46px; height: 46px; } }
@media (prefers-reduced-motion: reduce) { .to-top { transition: opacity .2s ease; transform: none; } .to-top.show { transform: none; } }

/* Pull to refresh: a small disc that follows the finger down from the top of a list and
   spins while the tab reloads (the gesture is wired in app.js). */
#ptr {
  position: fixed; z-index: 1240; top: -14px; inset-inline: 0; margin-inline: auto;
  width: 34px; height: 34px; border-radius: 50%; opacity: 0;
  transform: translateX(-50%) translateY(0); left: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface, #fff); color: var(--brand, #0071e3);
  box-shadow: 0 3px 12px rgba(16, 24, 40, .22); font-size: 18px; font-weight: 700;
}
#ptr .ptr-spin { display: block; line-height: 1; transition: transform .15s ease; }
#ptr.ptr-ready .ptr-spin { transform: rotate(180deg); }   /* past the threshold: let go to refresh */
#ptr.ptr-busy .ptr-spin { animation: ptr-turn .7s linear infinite; }
@keyframes ptr-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #ptr.ptr-busy .ptr-spin { animation: none; } }
/* Phone: the payment sheet a cell opens (openPaySheet) - it rises from the bottom over
   a dimmed page. Outside the page zoom, so these sizes are real pixels. */
.pay-sheet-overlay {
  position: fixed; inset: 0; z-index: 1300; background: rgba(20, 30, 50, .35);
  display: flex; align-items: flex-end; justify-content: center;
}
.pay-sheet {
  width: 100%; max-width: 560px; box-sizing: border-box; direction: rtl;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--surface); border-radius: 16px 16px 0 0;
  padding: 16px 16px calc(14px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .18);
}
.pay-sheet-who { font-size: 18px; font-weight: 800; color: var(--text); }
.pay-sheet-what { font-size: 14px; font-weight: 600; color: var(--muted); margin-top: -4px; }
.pay-sheet-now {
  align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--text);
  background: var(--head-bg); border-radius: 8px; padding: 5px 10px; margin-bottom: 2px;
}
.pay-sheet-btn {
  font: inherit; font-size: 16px; font-weight: 700; padding: 12px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--text);
}
.pay-sheet-full { background: #1a8f4c; border-color: transparent; color: #fff; }
.pay-sheet-zero { color: #6b7076; }
.pay-sheet-amt { display: flex; gap: 8px; }
.pay-sheet-amt[hidden] { display: none; }
.pay-sheet-amt .pay-sheet-btn { flex: 0 0 auto; }
.pay-sheet-inp {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: 17px; font-weight: 700; text-align: center;
  padding: 10px 12px; border: 1px solid var(--brand); border-radius: 12px; background: var(--surface); color: var(--text);
}
.pay-sheet-inp:focus { outline: none; box-shadow: var(--ring); }
.pay-sheet-cancel {
  font: inherit; font-size: 15px; font-weight: 600; padding: 8px; cursor: pointer;
  background: none; border: 0; color: var(--muted);
}
.pay-table tr.pay-row-editing td { background: var(--brand-050) !important; }
.pay-table tr.pay-row-editing .pay-name-col { font-weight: 700; color: var(--brand-700); }
/* Phone only (hidden on desktop): the collection chips and each header's "פעולות ▾". */
.pay-chips, .pay-coll-more { display: none; }
@media (max-width: 560px) {
  /* 2+ collections: one column at a time, picked by the chips above the table - no
     sideways scroll. renderPayments marks the other columns .pay-col-off. */
  .pay-col-off { display: none; }
  /* With a single column in view the table spans the screen - wider cells, bigger taps. */
  .pay-table-wrap { width: 100%; }
  .pay-table { width: 100%; }
  .pay-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
  .pay-chip {
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong);
    background: var(--surface); color: var(--text);
  }
  .pay-chip.on { background: var(--brand); border-color: transparent; color: #fff; }
  /* The header's actions fold into "פעולות ▾" (openCollActions) - title, date, amount,
     count and a closed round's status stay; a MISSING PayBox link stays too, loud. */
  .pay-coll-has-more .pay-coll-do, .pay-coll-has-more .pay-coll-all,
  .pay-coll-has-more .pay-coll-close, .pay-coll-has-more .pay-coll-actions { display: none; }
  .pay-coll-has-more .pay-coll-more {
    display: inline-flex; align-items: center; margin-top: 6px; cursor: pointer;
    font: inherit; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px;
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--brand-700);
  }
}
.pay-table tbody tr:nth-child(odd) td { background: #fafbfc; }
.pay-table tbody tr:nth-child(odd) .pay-name-col { background: #fafbfc; }
.pay-foot { text-align: center; padding: 10px; font-weight: 700; color: var(--brand-700); background: var(--head-bg); }
.pay-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.pay-field > span { font-size: 13px; color: var(--muted); font-weight: 600; }
.pay-field input, .pay-field .hdp-trigger {
  padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font: inherit; font-size: 14px; width: 100%; box-sizing: border-box;
}
.pay-field .hdp-trigger { text-align: right; background: var(--surface, #fff); cursor: pointer; }
.pay-field input:focus, .pay-field .hdp-trigger:focus { outline: none; box-shadow: var(--ring); border-color: var(--brand); }
/* Phone: the collection popup's fields at 16px - smaller text makes Safari zoom in on
   the field tapped (and stay zoomed); the date label (.date-field) matches its siblings. */
.pay-field .date-field-fmt { padding: 8px 10px; }
@media (max-width: 560px) {
  .pay-field input, .pay-field .date-field-fmt, .pay-field .hdp-trigger { font-size: 16px; }
}
.pay-empty { padding: 28px 18px; text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); }
.pay-field input:disabled { background: var(--head-bg); color: var(--muted); cursor: not-allowed; }
.pay-lock-note { font-size: 12px; color: var(--danger); margin-top: 4px; }
.pay-hint { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
/* A new collection: which PayBox group its parents pay into - the one the round before
   used (its link on show, so it is plain which) or a new group with a link of its own
   (openCollectionModal). */
.pb-choice .pb-opt {
  display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-size: 14px; line-height: 1.45;
}
.pb-choice .pb-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-050); }
.pb-choice .pb-opt input[type=radio] { width: auto; flex: none; margin: 3px 0 0; padding: 0; accent-color: var(--brand); }
.pb-choice .pb-opt > span { min-width: 0; }
.pb-opt-link {
  display: block; direction: ltr; text-align: left; font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pb-new:not([hidden]) { display: flex; flex-direction: column; margin-top: 2px; }
.pay-foot-sum { color: var(--brand-700); font-weight: 800; }
/* Per-child payment popup */
.pay-amount-box { max-width: 380px; }
.pay-amount-who { font-weight: 800; font-size: 16px; color: var(--brand-700); }
.pay-amount-of { font-size: 14px; color: var(--muted); margin: 4px 0 14px; }
/* The annual plan's add-a-row window (openPlannedRowDialog) and the ✓ window of a row
   that just happened (openFinishDialog). Built on the collection popup's .pay-field, so
   the fields look and size exactly like the popups beside it. */
.pr-modal { max-width: 460px; }
/* Whatever the window hides stays hidden: .pay-field's display: flex would otherwise win
   over [hidden], and "מי שילם?" showed on a plan that nobody has paid for yet. */
.pr-modal [hidden] { display: none; }
.pr-modal .modal-body { padding-top: 14px; }
.pr-modal .pay-field select, .pr-modal .pay-field textarea {
  padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font: inherit; font-size: 14px; width: 100%; box-sizing: border-box;
  background: var(--surface); color: var(--text);
}
.pr-modal .pay-field textarea { resize: vertical; line-height: 1.5; }
.pr-modal .pay-field select:focus, .pr-modal .pay-field textarea:focus {
  outline: none; box-shadow: var(--ring); border-color: var(--brand);
}
/* .pay-field sizes every input as a text box; its radios and checkboxes are not one. */
.pr-modal .pay-field input[type=radio], .pr-modal .pay-field input[type=checkbox] {
  width: auto; padding: 0; margin: 0; border: 0; flex: none; accent-color: var(--brand);
}
/* Which kind of row: two halves of one control, the chosen one filled. */
.pr-switch { display: flex; border: 1px solid var(--line-strong); border-radius: 999px;
             overflow: hidden; margin-bottom: 14px; }
.pr-switch label { flex: 1 1 0; position: relative; cursor: pointer; text-align: center; }
.pr-switch input { position: absolute; opacity: 0; pointer-events: none; }
.pr-switch span { display: block; padding: 8px 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.pr-switch input:checked + span { background: var(--brand); color: #fff; }
.pr-switch input:focus-visible + span { box-shadow: inset 0 0 0 3px rgba(0,113,227,.35); }
.pr-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.pr-payer { display: flex; gap: 8px; flex-wrap: wrap; }
.pr-payer label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
                  border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer;
                  font-size: 14px; }
.pr-payer label:has(input:checked) { border-color: var(--brand); background: var(--brand-050); }
.pr-person:not([hidden]) { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.pr-person select { flex: 1 1 160px; min-width: 0; width: auto; }
.pr-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; }
.pr-more { margin: 2px 0 12px; }
.pr-more > summary { cursor: pointer; color: var(--brand-700); font-size: 13px; font-weight: 600;
                     list-style: none; }
.pr-more > summary::-webkit-details-marker { display: none; }
.pr-more > summary::before { content: "+ "; }
.pr-more[open] > summary::before { content: "- "; }
.pr-more[open] > summary { margin-bottom: 10px; }
.pr-people { display: flex; flex-wrap: wrap; gap: 6px; max-height: 150px; overflow-y: auto; }
.pr-people label { display: inline-flex; align-items: center; gap: 5px; font-size: 13px;
                   padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.pr-people label:has(input:checked) { border-color: var(--brand); background: var(--brand-050); }
/* The ✓ window: which row, and what it was planned at. */
.pr-ctx { background: var(--head-bg); border-radius: var(--radius-sm); padding: 8px 10px;
          margin-bottom: 12px; font-size: 14px; line-height: 1.5; }
/* What the save does to the surplus - said before it is saved. Amber once it costs more
   than planned, or leaves the budget short. */
.pr-effect { margin: 4px 0 0; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px;
             line-height: 1.6; background: var(--brand-050); color: var(--brand-700); }
.pr-effect.pr-over { background: #fff6e5; color: #7a4f00; }
.pr-error { margin-top: 8px; font-size: 13px; color: var(--danger); }
.pr-note { margin-top: 8px; font-size: 13px; font-weight: 600; color: #1a7a3f; }
.pr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* The other tabs' add window (openAddDialog): the photo beside the name, and titled
   sections - a child's two parents. */
.af-top { display: flex; gap: 12px; align-items: flex-start; }
.af-top-fields { flex: 1 1 auto; min-width: 0; }
.af-pic { flex: none; width: 64px; height: 64px; margin-top: 20px; padding: 0; border-radius: 50%;
          border: 1px dashed var(--line-strong); background: var(--head-bg); color: var(--brand-700);
          font: inherit; font-size: 12px; font-weight: 600; line-height: 1.2; cursor: pointer;
          overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; }
.af-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.af-pic:focus-visible { outline: none; box-shadow: var(--ring); }
.af-sec { border-top: 1px solid var(--line); padding-top: 10px; }
.af-sec-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.af-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.af-time { display: flex; gap: 8px; align-items: center; }
.af-time select { flex: 1 1 0; min-width: 0; }
/* A phone number or an e-mail is typed left to right, but sits on the right like the
   fields around it. */
.pr-modal input[dir=ltr] { text-align: right; }
/* Phone: 16px, or Safari zooms into the field tapped - the same rule as .pay-field input. */
@media (max-width: 560px) {
  .pr-modal .pay-field select, .pr-modal .pay-field textarea { font-size: 16px; }
}
.pay-amount-quick { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.pay-amount-quick .btn { flex: 1 1 auto; }
.btn-light { background: var(--head-bg); color: var(--brand-700); box-shadow: none; border: 1px solid var(--line-strong); }
.btn-light:hover { background: #eef2f7; }
/* WhatsApp share popup (gan-wide upload link) */
.wa-share-lead { font-size: 15px; font-weight: 700; color: var(--text); margin: 2px 0 12px; text-align: center; }
.wa-share-box { background: #e7f6e1; border: 1px solid #cfe9c4; border-radius: 14px; padding: 14px 16px; font-size: 14px; line-height: 1.85; color: #1f2a20; word-break: break-word; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.wa-share-copied { color: #1e7a3c; font-size: 13px; font-weight: 700; }

/* Invite-members popup */
.invite-box { max-width: 480px; }
.invite-modes { display: flex; gap: 8px; margin-bottom: 14px; }
.invite-mode-btn { flex: 1; padding: 9px 10px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 10px; font: inherit; font-weight: 700; font-size: 13px; color: var(--muted); cursor: pointer; transition: border-color .1s, color .1s, background .1s; }
.invite-mode-btn.on { border-color: var(--brand); color: var(--brand); background: var(--brand-050); }
.invite-mode-btn:disabled { opacity: .45; cursor: not-allowed; }
.inv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.inv-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.inv-input { font: inherit; font-size: 14px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--text); min-width: 0; }
/* Phone: stack the invite fields one per row so they don't overflow the modal. */
@media (max-width: 560px) { .inv-grid { grid-template-columns: 1fr; } }
.inv-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-050); }
.inv-opt { font-weight: 500; color: var(--muted); }
.inv-roles { display: flex; align-items: center; gap: 16px; font-size: 13px; font-weight: 700; color: var(--text); margin: 6px 0 2px; }
.inv-roles label { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; cursor: pointer; }
.inv-roles input { accent-color: var(--brand); }
.inv-err { color: #c0392b; font-size: 12px; font-weight: 600; }

/* Google Calendar (ICS) feeds modal - a gan can connect several calendars */
.gcal-steps { margin: 8px 0 12px; padding-inline-start: 20px; font-size: 13px; color: var(--text); line-height: 1.7; }
.gcal-steps li { margin: 3px 0; }
#gcalUrl, #gcalLabel { display: block; width: 100%; box-sizing: border-box; margin: 4px 0 8px; }
.gcal-note-warn { font-size: 12px; color: var(--muted); background: var(--brand-050); border-radius: 8px; padding: 8px 10px; margin: 4px 0 10px; }
.gcal-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.gcal-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.gcal-row.gcal-busy { opacity: .55; }
.gcal-row-main { flex: 1; min-width: 0; }
.gcal-row-name { font-weight: 700; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcal-row-sub { font-size: 11px; color: var(--muted); }
.gcal-act { border: none; background: transparent; cursor: pointer; font-size: 15px;
  padding: 4px 7px; border-radius: 6px; line-height: 1; }
.gcal-act:hover { background: var(--head-bg); }
.gcal-act-del:hover { background: rgba(214,69,69,.12); }
.gcal-add { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 8px; }
.gcal-add-title { font-weight: 700; font-size: 13px; color: var(--text); margin-bottom: 4px; }

/* Kindergarten details panel (פרטי הגן) above the staff list */
.gan-details { padding: 14px 16px; border-bottom: 1px solid var(--line); background: var(--head-bg); }
/* "איך מתחילים?" onboarding box on the children tab (between toolbar and grid). */
.children-intro {
  background: var(--brand-050, #eef4fe); border: 1px solid var(--brand-200, #cfe3fb);
  border-radius: 10px; padding: 12px 16px; margin: 0 0 12px;
}
.ci-title { font-weight: 800; color: var(--brand-700); font-size: 14px; margin-bottom: 6px; }
.ci-steps { margin: 0 0 10px; padding-inline-start: 22px; font-size: 13px; line-height: 1.75; color: var(--text); }
.ci-steps li { margin-bottom: 2px; }
.ci-link { color: var(--brand-700); font-weight: 800; text-decoration: underline; cursor: pointer; }
.ci-link:hover { color: var(--brand); }
/* A mini look-alike of the "בניית תקציב" toolbar button, inline in the steps. */
.ci-btn-chip {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; white-space: nowrap;
  background: var(--brand-050); color: var(--brand-700); border: 1px solid var(--brand-200, #cfe3fb);
  border-radius: 8px; padding: 2px 8px; font-weight: 800; font-size: 12px;
}
.ci-line { font-size: 13px; line-height: 1.7; color: var(--text); margin: 0 0 10px; }
/* One-line "missing details?" nudge: title + line + copy button on a single row. */
.children-intro.ci-inline { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; }
.children-intro.ci-inline #ciText { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; flex: 1 1 auto; }
.children-intro.ci-inline .ci-title, .children-intro.ci-inline .ci-line { margin: 0; }
.children-intro.ci-inline #ganLinkCopy { flex: none; max-width: 100%; white-space: normal; }
/* Collapsible "missing details?" nudge. */
.ci-toggle { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; margin: 0; cursor: pointer; font-family: inherit; text-align: right; }
.ci-toggle .ci-title { margin: 0; }
.ci-chev { font-size: 11px; color: var(--brand-700); line-height: 1; }
.ci-collapse { margin-top: 8px; }
.ci-collapse[hidden] { display: none; }
/* Friday alternating-rotation strip (staff tab). */
.friday-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  padding: 9px 16px; border-bottom: 1px solid var(--line);
  background: var(--brand-050); font-size: 13px; color: var(--text);
}
.friday-strip .fr-title { font-weight: 800; color: var(--brand-700); }
.friday-strip .fr-item { white-space: nowrap; }
.friday-strip .fr-item b { color: var(--brand-700); font-weight: 700; }
/* The panel title doubles as a collapse toggle (button reset to look like the title). */
.gd-title { font-weight: 700; color: var(--brand-700); font-size: 15px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0;
  padding: 0; cursor: pointer; font-family: inherit; text-align: start; }
.gd-chev { color: var(--brand-700); font-size: 13px; }
/* Section heading above the list (so it isn't mistaken for part of the meta panel
   beside it). Same 16px side inset as the panel padding, so the titles line up. An
   optional sub-line explains the section. */
.section-title { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 14px 16px 10px; }
.section-title .st-title { font-weight: 700; color: var(--brand-700); font-size: 15px; }
.section-title .st-sub { font-weight: 500; color: var(--muted); font-size: 12px; line-height: 1.6; }
.section-title .st-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--brand-700); text-decoration: underline; }
#ganDetails.gd-collapsed .gd-title { margin-bottom: 0; }
#ganDetails.gd-collapsed .gd-field { display: none; }
.gd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; }
.gd-field { display: flex; flex-direction: column; gap: 5px; }
.gd-field > span { font-size: 12px; color: var(--muted); font-weight: 600; }
.gd-field input, .gd-field select {
  padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font: inherit; font-size: 14px; background: var(--surface); color: var(--text); width: 100%; box-sizing: border-box;
  text-align: center;
}
.gd-field > span { text-align: center; }
.gd-field input:focus, .gd-field select:focus { outline: none; box-shadow: var(--ring); border-color: var(--brand); }
.gd-field .gd-hint { font-size: 11px; font-weight: 500; color: var(--muted); opacity: .85; }
/* The gan phone is the highest-value field here (it lands on the parents' contact
   sheet), so an empty box invites filling with a bolder brand-coloured border - no
   fill, so it never reads as a button. The inset shadow thickens the border without
   shifting layout. Once a number is typed the box calms to the normal style. */
#gdPhone { transition: border-color .2s, box-shadow .2s; }
#gdPhone:placeholder-shown {
  border-color: var(--brand, #2f6fd0);
  box-shadow: inset 0 0 0 1px var(--brand, #2f6fd0);
}
.gd-range { display: flex; align-items: center; gap: 6px; }
.gd-range select { flex: 1; text-align: center; }

/* Budget prerequisites confirmation modal */
.prereq-counts { display: flex; gap: 12px; margin: 16px 0; }
.prereq-count { flex: 1; background: var(--head-bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 10px; text-align: center; }
.prereq-count.prereq-missing { background: rgba(224,57,46,.08); border-color: var(--danger); }
.prereq-num { display: block; font-size: 28px; font-weight: 800; color: var(--brand-700); line-height: 1.1; }
.prereq-count.prereq-missing .prereq-num { color: var(--danger); }
.prereq-lbl { font-size: 12px; color: var(--muted); font-weight: 600; }
.prereq-warn { color: var(--danger); font-weight: 600; font-size: 13px; margin: 4px 0 0; }
.prereq-links { display: flex; gap: 8px; margin: 14px 0 4px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* Light column separation: subtle shading on alternating columns (no gridlines). */
#grid.grid thead th:nth-child(even):not(.actions),
#grid.grid tbody tr:not(.parents-detail-row) td:nth-child(even):not(.actions) {
  background: #f6f8fb;
}

/* Reimbursements splitter modal */
.reimb-target { font-weight: 700; font-size: 14px; margin: 4px 0 12px; }
.reimb-target b { color: var(--brand-700); }
.reimb-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.reimb-ro-note { text-align: center; margin: 2px 0 10px; }   /* "👁️ קריאה בלבד" */
/* payer | person | amount | description | "הוחזר" | delete. Each element sits in
   an EXPLICIT track, so hiding the person/הוחזר cells on a fund-paid line leaves
   its track empty instead of shifting the row out of line with its neighbours. */
/* Each row is its OWN grid, so auto/fr tracks would size per row - hiding the
   person + "הוחזר" cells on a fund-paid line then resized that row's tracks and
   knocked it out of line with its neighbours. Fixed widths keep every row
   identical whatever is hidden. */
.reimb-row { display: grid; grid-template-columns: 116px minmax(0, 1.2fr) 74px minmax(0, 1.6fr) 72px 30px;
  gap: 8px; align-items: center; }
.reimb-payer { grid-column: 1; }
.reimb-person-wrap { grid-column: 2; min-width: 0; }
.reimb-amount { grid-column: 3; }
.reimb-desc { grid-column: 4; }
.reimb-paid { grid-column: 5; }
.reimb-del { grid-column: 6; }
.reimb-person-wrap select { width: 100%; }
/* .reimb-paid sets display:flex, which beats the UA [hidden] rule - so hiding it
   needs an explicit override, otherwise a fund-paid line still shows "הוחזר". */
.reimb-row [hidden] { display: none !important; }
.reimb-paid { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.reimb-paid input { width: auto; }
.reimb-row select, .reimb-row input {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
  box-sizing: border-box;
}
.reimb-row select:focus, .reimb-row input:focus { outline: none; box-shadow: var(--ring); border-color: var(--brand); }
.reimb-del { border: none; background: transparent; cursor: pointer; font-size: 16px; padding: 6px; border-radius: var(--radius-sm); line-height: 1; }
.reimb-del:hover { background: rgba(214,69,69,.12); }
@media (max-width: 560px) {
  /* Each expense is a small card that fits the phone: who paid (the fund, or a member -
     and which) on the first line, what it was for on the second, then the amount,
     "הוחזר" and 🗑. The desktop row is six fixed tracks, wider than a phone: the fields
     squeezed to nothing and "הוחזר" and 🗑 fell off the popup's (left) edge. Fields at
     16px - smaller text makes Safari zoom in on the field tapped. */
  /* The first track is the payer picker's own width (its longer option, "👤 חבר ועד", as
     the phone itself measures it) - at half the card it clipped "מהקופה" on a real phone;
     the member picker takes the rest. The amount field shares that track, and an input's
     built-in width is far wider than the picker, so it is kept out of the sizing
     (contain: inline-size) and just fills the track. */
  .reimb-row {
    grid-template-columns: auto minmax(0, 1fr) 36px;
    grid-template-areas: "payer person person" "desc desc desc" "amount paid del";
    padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--head-bg);
  }
  .reimb-payer { grid-area: payer; }
  .reimb-person-wrap { grid-area: person; }
  .reimb-desc { grid-area: desc; }
  .reimb-amount { grid-area: amount; contain: inline-size; }
  .reimb-paid { grid-area: paid; justify-self: start; font-size: 14px; }
  .reimb-paid input { width: 18px; height: 18px; }
  .reimb-del { grid-area: del; justify-self: center; font-size: 18px; }
  .reimb-row select, .reimb-row input:not([type="checkbox"]) { font-size: 16px; }
  .reimb-summary .reimb-warn { white-space: nowrap; }   /* the over-run moves as one piece */
}
/* The total, and at the END of the same row the green "שמירה". Everything here saves
   itself as it is typed; the button is what makes that visible - and it is the only
   thing that can tell you a save did NOT go through. */
.reimb-summary {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
  font-weight: 700; font-size: 14px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.reimb-summary-txt { flex: 1 1 auto; min-width: 0; }
.reimb-save {
  flex: 0 0 auto; margin-inline-start: auto;
  background: #1a8f4c; border-color: #1a8f4c; color: #fff;
  padding: 7px 22px; font-size: 14px;
}
.reimb-save:hover:not(:disabled) { background: #15753e; border-color: #15753e; }
.reimb-save:disabled { opacity: .65; cursor: default; }
.reimb-ok { color: var(--brand-700); }
.reimb-warn { color: var(--danger); }
.reimb-error { margin-top: 8px; color: var(--danger); font-weight: 700; font-size: 13px; background: rgba(214,69,69,.1); padding: 8px 10px; border-radius: var(--radius-sm); }

/* ---- Weekly schedule (לו"ז גן) ---- */
.schedule-view { padding: 4px 2px 20px; overflow: auto; }
.sched-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.sched-nav { display: flex; gap: 6px; }
.sched-nav .btn { padding: 7px 12px; font-size: 13px; }
.sched-range { font-weight: 800; font-size: 15px; color: var(--text); }

.sched-reminders { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.sched-reminder { border: 1px solid #e6c200; background: #fffbe6; border-radius: var(--radius-sm); padding: 12px 14px; }
.sched-reminder-head { font-weight: 800; color: #8a6d00; margin-bottom: 8px; }
.sched-reminder-text { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 10px; font: inherit; font-size: 13px; line-height: 1.6; background: #fff; resize: vertical; box-sizing: border-box; margin-bottom: 8px; }

/* Calendar grid */
.sched-cal { display: flex; min-width: 720px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.sched-gutter { position: relative; width: 52px; flex: 0 0 52px; border-left: 1px solid var(--line); }
.sched-corner { height: 44px; border-bottom: 1px solid var(--line); background: var(--head-bg); }
.sched-hour { position: absolute; right: 0; left: 0; text-align: center; font-size: 11px; color: var(--muted); transform: translateY(-6px); }
.sched-col { flex: 1 1 0; border-left: 1px solid var(--line); min-width: 0; }
.sched-col:last-child { border-left: none; }
.sched-colhead { height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--head-bg); border-bottom: 1px solid var(--line); font-weight: 700; font-size: 13px; }
.sched-colhead.sched-today { background: var(--brand-050); color: var(--brand-700); }
/* Holiday / eve shown under the date in the day header (kept out of the grid
   body so it never shifts the timed events). Head + gutter corner grow
   together so the hour lines stay aligned. */
.sched-cal.sched-has-hol .sched-colhead, .sched-cal.sched-has-hol .sched-corner { height: 66px; }
.sched-colhead { gap: 2px; }
.sched-colhol {
  display: inline-block; max-width: 100%; box-sizing: border-box;
  background: #fff4e0; color: #8a5a0b; border: 1px solid #f0d9a8;
  border-radius: 999px; padding: 1px 9px; font-size: 11px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sched-coldate { font-size: 11px; color: var(--muted); font-weight: 600; }
.sched-colbody { position: relative; }
.sched-line { position: absolute; right: 0; left: 0; border-top: 1px dashed var(--line); }
.sched-block {
  position: absolute; right: 3px; left: 3px;
  background: var(--brand); color: #fff;
  border-radius: 7px; padding: 3px 6px; overflow: hidden;
  box-shadow: var(--shadow-sm); cursor: pointer; font-size: 12px;
}
.sched-block:hover { filter: brightness(1.05); }
.sched-block-event { background: #e0a800; color: #3a2f00; }
.sched-block-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-block-time { font-size: 10px; opacity: .9; }

/* All-day band above the timed grid (e.g. a חופשה spanning several days). */
.sched-allday { min-height: 4px; padding: 2px 3px; display: flex; flex-direction: column; gap: 2px;
  background: var(--head-bg); border-bottom: 1px solid var(--line); }
.sched-allday-chip {
  background: #f2d9a0; color: #4a3a12; border: 1px solid #e0a800;
  border-radius: 5px; padding: 2px 5px; font-size: 10px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.sched-allday-chip:hover { filter: brightness(1.04); }
.sched-allday-chip.sched-block-ro { cursor: default; }
.sched-ev-allday { font-weight: 700; color: #8a6d1f; }

/* Special events list */
.sched-events { margin-top: 22px; }
.sched-events-title { font-size: 15px; font-weight: 700; color: var(--muted); margin: 0 0 10px; }
.sched-event-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 14px; }
.sched-ev-date { font-weight: 700; min-width: 110px; }
.sched-ev-time { color: var(--muted); direction: ltr; min-width: 90px; }
.sched-ev-title { flex: 1; }
.sched-ev-edit { border: none; background: transparent; cursor: pointer; font-size: 15px; color: var(--brand-700); padding: 4px 8px; border-radius: var(--radius-sm); }
.sched-ev-edit:hover { background: var(--head-bg); }

/* Schedule modal extras */
.sc-radio { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; margin-left: 16px; cursor: pointer; }
.bs-field input[type="radio"], .bs-field input[type="checkbox"] { width: auto; }
.bs-field select.bs-input, .bs-field textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit; font-size: 14px; background: var(--surface); color: var(--text); box-sizing: border-box; }
.sc-days { display: flex; flex-wrap: wrap; gap: 6px; }
.multi-chip {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.multi-chip:hover { border-color: var(--brand); }
.multi-chip.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.sched-modal-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
/* Approve-budget choices (approveBudgetConfirm): stacked full-width, in a clear
   hierarchy - solid prominent, then outlined, then flat. */
.ab-hint { color: var(--muted); font-size: 13px; }
.ab-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.ab-actions .btn, .ab-actions .ab-flat { width: 100%; padding: 11px 16px; font-size: 14px; }
.ab-actions .ab-outline {
  padding: 9.5px 16px;   /* the 1.5px border keeps it the primary's height */
  background: var(--surface); color: var(--brand-700); border: 1.5px solid var(--brand);
}
.ab-actions .ab-outline:hover { background: var(--brand-050); }
.ab-flat {
  background: transparent; border: 0; border-radius: 980px; cursor: pointer;
  font: inherit; color: var(--muted);
}
.ab-flat:hover { background: var(--brand-050); color: var(--text); }
.ab-flat:focus-visible { outline: none; box-shadow: var(--ring); }
/* Cost-recipe editor modal + the cost-cell trigger. */
.cr-title { font-weight: 800; color: var(--brand-700); margin-bottom: 12px; text-align: center; }
.cr-modes { display: flex; gap: 18px; justify-content: center; margin-bottom: 14px; }
.cr-mode { display: flex; align-items: center; gap: 6px; font-weight: 600; cursor: pointer; }
.cr-mode input { width: 16px; height: 16px; accent-color: var(--brand); }
.cr-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0; font-weight: 600; }
.cr-price { display: inline-flex; align-items: center; gap: 5px; }
.cr-price input { width: 110px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 8px; text-align: center; font-size: 14px; }
.cr-methods-label { font-weight: 700; margin: 14px 0 8px; color: #434a52; }
.cr-methods { display: flex; flex-direction: column; gap: 10px; }
.cr-method { display: flex; align-items: center; gap: 9px; cursor: pointer; }
.cr-method input { width: 17px; height: 17px; accent-color: var(--brand); }
.cr-cnt { color: var(--muted); font-size: 12px; }
.cr-preview { margin-top: 16px; padding: 11px 13px; background: var(--brand-050); border-radius: 9px; font-weight: 800; text-align: center; color: var(--brand-700); }
/* The fixed add-on field + its "חדש" badge (fades once the gan has used the add-on). */
.cr-addon-field { margin-top: 16px; }
.cr-new { font-size: 11px; font-weight: 800; background: var(--brand); color: #fff; padding: 1px 8px; border-radius: 999px; margin-inline-start: 6px; vertical-align: 1px; }
.cr-addon-hint { font-size: 12px; color: var(--muted); margin: 3px 2px 0; }
/* Parent-info editor (Direction D, super-only) - opened from the יומן-הגן matrix (cal-mx-pi). */
.pi-field { display: flex; flex-direction: column; gap: 5px; margin-top: 13px; font-size: 13px; font-weight: 700; color: var(--text); }
.pi-field input, .pi-field select { font: inherit; font-weight: 500; font-size: 15px; border: 1px solid var(--line-strong); border-radius: 9px; padding: 9px 11px; background: #fff; color: var(--text); }
.pi-field .hdp-trigger { width: 100%; font-weight: 500; font-size: 15px; border: 1px solid var(--line-strong); border-radius: 9px; padding: 9px 11px; }
.pi-hint { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 12px 2px 0; }
.pi-sub-hint { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 6px 2px 0; }
/* Event-type tiles (operational / regular) + reset to the category default. */
.pi-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 2px; }
.pi-tile { font: inherit; text-align: center; border: 1.5px solid var(--line-strong); border-radius: 13px; padding: 11px 10px; background: #fff; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.pi-tile-top { font-size: 15px; font-weight: 800; color: var(--text); }
.pi-tile-sub { font-size: 11.5px; font-weight: 500; color: var(--muted); line-height: 1.4; }
.pi-tile.on { border-color: var(--brand); background: var(--brand-050); box-shadow: inset 0 0 0 1px var(--brand); }
.pi-tile.on .pi-tile-top { color: var(--brand-700); }
.pi-reset { display: inline-block; margin: 6px 2px 0; font: inherit; font-size: 11px; font-weight: 500; color: var(--muted); background: none; border: 0; cursor: pointer; padding: 2px 0; white-space: nowrap; }
.pi-reset:hover { color: var(--brand); text-decoration: underline; }
/* "לשלוח להורים" queue (Direction D, Phase 2). */
.psq-lead { font-size: 13px; color: var(--soft); line-height: 1.6; margin: 0 0 12px; }
.psq-list { display: flex; flex-direction: column; gap: 9px; }
.psq-item { display: flex; align-items: center; gap: 11px; border: 1px solid var(--card-bd, #e6e9ef); border-radius: 12px; padding: 11px 13px; }
.psq-main { flex: 1; min-width: 0; }
.psq-t { font-size: 14px; font-weight: 700; color: var(--text); }
.psq-d { font-size: 12px; color: var(--muted); margin-top: 2px; }
.psq-send { flex: none; font-size: 13px; padding: 7px 14px; }
.psq-empty { font-size: 13px; color: var(--muted); text-align: center; padding: 18px 0; }
/* Post-import issue list. */
.import-issues-title { font-weight: 800; color: var(--danger, #c0392b); margin: 14px 0 6px; }
.import-issues { margin: 0; padding-inline-start: 20px; max-height: 300px; overflow-y: auto; font-size: 13px; line-height: 1.7; color: var(--text); }
.import-issues li { margin-bottom: 3px; }
/* Image-OCR import preview (editable table before saving) */
.import-preview-box { width: min(940px, 96vw); max-width: 96vw; }
.import-preview-scroll { max-height: 56vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; margin: 10px 0 4px; }
.import-preview-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.import-preview-table th, .import-preview-table td { border-bottom: 1px solid var(--line); padding: 5px 6px; text-align: right; }
.import-preview-table thead th { position: sticky; top: 0; background: var(--panel, #f4f6f8); font-weight: 800; color: var(--text); z-index: 1; }
.import-preview-table input { width: 100%; box-sizing: border-box; font: inherit; padding: 5px 7px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--card, #fff); color: var(--text); }
.import-preview-table input:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.import-preview-table td:last-child { text-align: center; width: 34px; }
.ip-del { background: none; border: none; cursor: pointer; font-size: 15px; line-height: 1; padding: 4px; border-radius: 6px; }
.ip-del:hover { background: rgba(192,57,43,.12); }
/* Image-OCR working overlay (spinner + rotating messages) */
.import-progress-box { width: auto; min-width: 300px; max-width: 92vw; }
.import-progress { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 30px; text-align: center; }
.spinner { width: 46px; height: 46px; border: 4px solid var(--line, #e3e6ea); border-top-color: var(--brand, #0071e3); border-radius: 50%; animation: ip-spin 0.8s linear infinite; }
@keyframes ip-spin { to { transform: rotate(360deg); } }
.import-progress-msg { font-size: 16px; font-weight: 700; color: var(--text); min-height: 1.2em; }
.import-progress-sub { font-size: 13px; color: var(--muted); }
.sched-tip {
  position: fixed; z-index: 1300; display: none;
  background: #171a1f; color: #fff;
  border-radius: var(--radius-sm); padding: 8px 11px;
  font-size: 12px; line-height: 1.6; box-shadow: var(--shadow-md);
  max-width: 220px; pointer-events: none;
}
.sched-tip-time { font-weight: 800; margin-bottom: 4px; color: #a7e0c0; }
.sched-tip-none { color: #cbd0d6; }
.btn-danger-solid { background: var(--danger); }
.btn-danger-solid:hover { background: #b83a3a; }

/* Category manager modal */
.cat-add { display: flex; gap: 8px; margin-bottom: 14px; }
.cat-add input {
  flex: 1; padding: 9px 11px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); font-size: 14px; background: var(--surface); color: var(--text);
}
.cat-add input:focus { outline: none; box-shadow: var(--ring); border-color: var(--brand); }
.cat-list { display: flex; flex-direction: column; }
.cat-row-manage { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.cat-mname { font-weight: 600; }
.cat-global { color: var(--muted); font-weight: 700; font-size: 12px; }
.cat-global-note { color: var(--muted); font-size: 12px; }
.cat-del { border: none; background: transparent; cursor: pointer; font-size: 15px; padding: 4px 8px; border-radius: var(--radius-sm); }
.cat-del:hover { background: rgba(214,69,69,.12); }

/* Budget builder — template chooser */
.tpl-list { display: flex; flex-direction: column; gap: 10px; }
.tpl-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: var(--surface);
}
.tpl-card:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.tpl-info { flex: 1; }
.tpl-name { font-weight: 800; font-size: 15px; margin-bottom: 3px; }
.tpl-desc { color: var(--muted); font-size: 13px; line-height: 1.55; white-space: pre-line; }
.tpl-meta { color: var(--brand-700); font-size: 12px; font-weight: 700; margin-top: 5px; }
.tpl-choose { flex-shrink: 0; }
.tpl-card-soon { opacity: .7; background: var(--head-bg); }
.tpl-card-soon:hover { border-color: var(--line); box-shadow: none; }

/* Allergies summary modal */
.alrg-text {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.7;
  background: var(--head-bg);
  color: var(--text);
  resize: vertical;
  box-sizing: border-box;
}
.alrg-text:focus { outline: none; box-shadow: var(--ring); border-color: var(--brand); }
.alrg-actions { margin-top: 12px; text-align: left; }

/* Budget summary panel (planned tab) */
.budget-summary { margin: 0 0 14px; }
/* The cards flex inside the collapsible wrapper (the wrapper lets the collapse animate);
   the bar is a sibling above it, shown only when collapsed. */
.bsum-cards-in { display: flex; flex-wrap: wrap; gap: 10px; }
.bsum-card {
  flex: 1 1 150px;
  min-width: 140px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 8px 14px;
}
/* .bsum-hidden marks a summary card not relevant in the current budget stage. It only
   hides on a phone (see the max-width:560px block) - desktop has room for every card. */
.bsum-label { color: var(--muted); font-size: 11px; font-weight: 600; margin-bottom: 3px; }
/* Collapsed "quick summary" bar - hidden by default; shown in place of the cards on a
   phone once the grid is scrolled (see the max-width:560px block). Two centred lines. */
.bsum-bar {
  display: none; width: 100%; cursor: pointer; text-align: center;
  flex-direction: column; align-items: center; gap: 2px;
  background: var(--brand-050, #eef4fb); border: 1px solid var(--brand-200, #cfe3fb);
  border-radius: 10px; padding: 7px 12px; font: inherit; color: var(--text);
}
.bsum-bar-title { font-size: 12px; font-weight: 800; }
.bsum-bar-l2 { font-size: 12px; color: var(--muted); }
.bsum-bar-pos { color: #1e7a3c; font-weight: 700; }
.bsum-bar-neg { color: var(--danger); font-weight: 700; }
.bsum-val { font-size: 18px; font-weight: 800; color: var(--text); }
.bsum-total { background: var(--brand-050); border-color: var(--brand); }
.bsum-total .bsum-val { color: var(--brand-700); }
.bsum-input-wrap { display: flex; align-items: center; }
.bsum-input {
  width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 18px;
  font-weight: 800;
  background: var(--surface);
  color: var(--text);
}
.bsum-input:focus { outline: none; box-shadow: var(--ring); border-color: var(--brand); }
.bsum-input:disabled { background: var(--head-bg); color: var(--text); cursor: not-allowed; }
/* Approved per-child amount: looks locked, but is click-to-edit until the גבייה
   starts. .bsum-input-hardlocked = truly fixed (someone already paid). */
.bsum-lock { display: inline-flex; vertical-align: -3px; color: var(--muted); }
/* Unlocked: brand-coloured so the open shackle reads as "editable now". */
.bsum-lock-open { color: var(--brand); }
.bsum-input-locked { background: var(--head-bg); color: var(--text); cursor: pointer; }
.bsum-input-locked.bsum-input-hardlocked { cursor: not-allowed; }
.bsum-input-editing {
  background: var(--surface); color: var(--text); cursor: text;
  border-color: var(--brand); box-shadow: var(--ring, 0 0 0 3px var(--brand-050));
}
.bsum-sub { margin-top: 6px; font-size: 12px; color: var(--muted); font-weight: 600; }
.bsum-note-sub { font-size: 11px; font-weight: 500; opacity: .8; }
.bsum-final { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer; }
.bsum-final input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }
/* Budget surplus / deficit card */
.bsum-deficit { background: rgba(214,69,69,.1); border-color: var(--danger); }
.bsum-deficit .bsum-val { color: var(--danger); }
.bsum-deficit .bsum-sub { color: var(--danger); }
.bsum-add-btn { margin-top: 10px; padding: 6px 12px; font-size: 12px; background: var(--danger); }
.bsum-add-btn:hover { background: #b83a3a; }
.bsum-sub b { color: var(--brand-700); }
/* The total carries a "how is this calculated" tooltip - hint that it's hoverable. */
.bsum-per-total { cursor: help; }

/* "בניית תקציב" popup: the pre-decided per-child amount, asked before the
   template list so committees who already set a price can say so up front. */
.bb-amount { background: var(--brand-050); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 14px; }
/* A warm note for schools: the ready-made budgets are still gan-shaped. */
.bb-school-note { background: var(--brand-050); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; font-size: 13px;
  line-height: 1.55; color: var(--text); }
.bb-school-note p { margin: 0 0 6px; }
.bb-school-note p:last-child { margin-bottom: 0; }
.bb-amount-q { font-weight: 800; font-size: 14px; color: var(--text); margin-bottom: 8px; }
.bb-opt { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text);
  cursor: pointer; padding: 4px 0; }
.bb-opt input[type="radio"] { accent-color: var(--brand); flex: none; }
.bb-amount-input { width: 82px; font: inherit; font-size: 13px; font-weight: 700;
  padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: 7px;
  background: var(--surface); color: var(--text); margin: 0 4px; }
.bb-amount-input:disabled { background: var(--head-bg); color: var(--muted); }
.bb-amount-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-050); }
.bb-amount-total { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--brand-700); }

/* Clickable summary cards (הכנסות נוספות → popup, מספר הילדים → children tab):
   cursor + a thin outline on hover - only where there is a real hover (a mouse). A
   touch screen turns a tap into :hover and keeps it until the next tap elsewhere. */
.bsum-clickable { cursor: pointer; transition: box-shadow .12s, border-color .12s; }
@media (hover: hover) and (pointer: fine) {
  .bsum-clickable:hover { border-color: var(--brand); box-shadow: var(--shadow-md, var(--shadow-sm)); }
}
.bsum-clickable:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--brand); }
.bsum-income .bsum-sub { color: var(--brand-700); }

/* Special-income management popup */
.income-modal .modal-body { display: flex; flex-direction: column; gap: 12px; }
.income-list { display: flex; flex-direction: column; gap: 8px; }
.inc-empty { color: var(--muted); font-size: 13px; font-weight: 600; padding: 6px 2px; }
.inc-row { display: grid; grid-template-columns: 110px 1fr 150px 34px; gap: 8px; align-items: center; }
.inc-row input {
  padding: 7px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
}
.inc-row input:focus { outline: none; box-shadow: var(--ring); border-color: var(--brand); }
.inc-amount { font-weight: 700; }
.inc-del {
  border: none; background: transparent; cursor: pointer;
  font-size: 16px; padding: 4px; border-radius: var(--radius-sm); line-height: 1;
}
.inc-del:hover { background: rgba(214,69,69,.12); }
.inc-add { align-self: flex-start; padding: 7px 14px; font-size: 13px; }
.income-total { font-size: 14px; font-weight: 600; color: var(--text); border-top: 1px solid var(--line); padding-top: 10px; }
.income-total b { color: var(--brand-700); font-weight: 800; }
/* the body is a flex column with a 12px gap - 6px more makes the staff-gifts popup's 18px */
.income-modal .sched-modal-actions { margin-top: 6px; }
.inc-err { color: var(--danger); font-size: 13px; font-weight: 600; }
/* A date field that reads DD/MM/YY on a phone - the income popup and the collection
   popup share it. iOS draws a date input in the device's locale ("Nov 2026 20" on an
   English phone), greyed and wider than the fields around it, and an empty one is left
   blank. On a phone our own label shows instead (DD/MM/YY, or "תאריך" in grey), with the
   native input invisible on top - still what you tap, so it opens the picker. Same idea
   as the plan's card date. */
.date-field { position: relative; display: block; min-width: 0; }
.date-field input[type="date"] { width: 100%; }
.date-field-fmt { display: none; }
@media (max-width: 560px) {
  .date-field input[type="date"] { position: absolute; inset: 0; opacity: 0; }
  .date-field-fmt {
    display: block; padding: 7px 9px; border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm); background: var(--surface);
    font-size: 14px; color: var(--text); text-align: right; direction: ltr;
  }
  .date-field-fmt.is-empty { color: var(--muted); direction: rtl; }
}
.inc-head { display: none; }       /* the phone's folded-card header - see below */
@media (max-width: 560px) {
  /* Each income is a small card: the reason on its own line, then amount | date | 🗑.
     minmax(0, 1fr), not 1fr: a plain 1fr column can't shrink below its field's natural
     width, and a text or date field is wider than half the popup - the row spilled
     past the popup's (left) edge and the 🗑 fell onto a line of its own. */
  .inc-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px;
    padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--head-bg);
  }
  .inc-row input { min-width: 0; width: 100%; }
  .inc-reason { grid-column: 1 / -1; order: -1; }
  .inc-del { justify-self: center; }
  /* Folded by default: just a header - the amount, then the reason (cut with "…" when
     it doesn't fit), a chevron at the far end. Tap opens it (one card at a time). */
  .inc-head {
    display: flex; align-items: center; gap: 8px; grid-column: 1 / -1; order: -2;
    width: 100%; min-width: 0; padding: 2px 0; border: 0; background: none;
    font: inherit; font-size: 14px; color: var(--text); text-align: right; cursor: pointer;
  }
  .inc-head-amt { flex: 0 0 auto; font-weight: 800; white-space: nowrap; }
  .inc-head-reason {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--muted); font-weight: 600;
  }
  .inc-head-chev { flex: 0 0 auto; color: var(--brand); font-size: 13px; }
  .inc-row:not(.inc-open) > :not(.inc-head) { display: none; }
}

/* Staff-count card hover breakdown */
.bsum-staff { position: relative; cursor: default; }
/* When the staff card is also a shortcut, the pointer must win over the
   cursor:default above (same specificity, so this rule comes later). */
.bsum-staff.bsum-clickable { cursor: pointer; }
.bsum-tip {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  z-index: 50;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 8px;
  min-width: 260px;
  max-width: 360px;
}
/* Same hover breakdown on the approved per-child card: the gan's collections.
   Both open on a real hover only (desktop) - see the media block below. */
.bsum-perchild { position: relative; }
/* After approval: the visible "✏️ שינוי" at the end of the label row, and a line under
   the total saying until when the amount can change (applyPerChildLockState). */
.bsum-perchild .bsum-label { display: flex; align-items: center; gap: 4px; }
.bsum-edit-btn {
  margin-inline-start: auto; flex: 0 0 auto; cursor: pointer;
  border: 0; border-radius: 999px; padding: 2px 10px;
  background: var(--brand-050); color: var(--brand-700);
  font: inherit; font-size: 12px; font-weight: 700;
}
.bsum-edit-btn:hover { background: #dbeafd; }
.bsum-edit-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.bsum-edit-btn[hidden] { display: none; }
.bsum-edit-hint { font-size: 11px; color: var(--muted); margin-top: 3px; }
.bsum-edit-hint:empty { display: none; }
.bsum-hint-link {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--brand-700); font-weight: 700;
}
/* The breakdowns open on hover - with a mouse only. On a phone a tap counts as a hover,
   so tapping the staff card (a shortcut to אנשי צוות) or the per-child card (its field,
   ✏️ שינוי) popped the table over the cards below. */
@media (hover: hover) and (pointer: fine) {
  .bsum-staff:hover .bsum-tip, .bsum-perchild:hover .bsum-tip { display: block; }
}
/* date | name - the 2nd column is the name, so don't centre/narrow it like the
   staff table's numeric 2nd column does. */
.bsum-tip-coll td:nth-child(2) { color: var(--text); text-align: right; width: auto; }
.bsum-tip-coll td:nth-child(1) { white-space: nowrap; color: var(--muted); width: 84px; }
.bsum-tip-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.bsum-tip-table th, .bsum-tip-table td { padding: 5px 8px; text-align: right; border-bottom: 1px solid var(--line); font-size: 13px; }
.bsum-tip-table th { color: var(--muted); font-weight: 700; font-size: 11px; }
.bsum-tip-table td:nth-child(2) { color: var(--muted); text-align: center; width: 36px; }
.bsum-tip-table tr:last-child td { border-bottom: none; }
.bsum-tip-empty { color: var(--muted); font-size: 13px; padding: 4px; }

/* Public upload page extras */
/* Honeypot: hidden by clipping, NOT by left:-9999px. These pages are dir="rtl",
   where overflow past the left edge is scrollable - an off-screen honeypot gave
   the page ~10000px of sideways scroll on a phone and pushed the card out of
   view. Keep it clipped (still a real, fillable field for bots) and never
   reintroduce an off-screen offset. */
.hp {
  position: absolute !important;
  inset: auto !important;                /* stay at its static position */
  width: 1px !important;                 /* !important: .details-form input
                                            (later + more specific) sets 100% */
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
}

/* On a short window, compact the whole top (header / tabs / toolbar / summary tiles
   / banner / intro) so the table (flex:1) keeps a usable share — safely, by shrinking
   sizes rather than collapsing anything. */
@media (max-height: 820px) {
  .topbar { padding: 6px 22px; }
  .tabs { padding: 7px 22px 0; }
  .sheet-area { margin: 8px 16px 12px; }
  .toolbar { padding: 8px 16px; }
  .budget-summary { margin: 0 0 8px; }
  .bsum-cards-in { gap: 6px; }
  .bsum-card { padding: 5px 12px; }
  .bsum-label { font-size: 11px; margin-bottom: 2px; }
  .bsum-val { font-size: 16px; }
  .bsum-input { padding: 4px 8px; font-size: 15px; }
  .bsum-sub { font-size: 11px; }
  .draft-banner { padding: 7px 16px; }
  .children-intro { padding: 8px 14px; margin-bottom: 8px; }
  .ci-steps { line-height: 1.5; }
}
@media (max-height: 620px) {
  .topbar { padding: 4px 22px; }
  .bsum-card { padding: 3px 10px; }
  .bsum-val { font-size: 15px; }
  .bsum-label { font-size: 10px; margin-bottom: 1px; }
}
/* On a narrow (mobile) screen the action buttons don't fit one row. Instead of the
   row overflowing and getting CLIPPED by .sheet-area (which could hide a button - e.g.
   the import button vanishing after the file dialog closed and the layout reflowed),
   let the toolbar scroll sideways with every button kept at full, tappable size. */
@media (max-width: 820px) {
  .toolbar { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
             scrollbar-width: none; }
  .toolbar::-webkit-scrollbar { display: none; }
  .toolbar > .btn { flex-shrink: 0; }        /* keep full width - never squeezed to a sliver */
}
/* Children on a phone: the toolbar collapses to [prominent button][עוד], so it no
   longer needs to scroll - let it wrap and drop the search onto its own line. */
@media (max-width: 560px) {
  .toolbar.tb-collapsed { overflow: visible; flex-wrap: wrap; gap: 8px; }
  .toolbar.tb-collapsed .btn { padding: 9px 14px; }
  /* Give the summary band the same breathing room above it as there is between the
     cards, so the first cards don't crowd the toolbar/search block above them. */
  .budget-summary { margin-top: 10px; }
  /* Collapse animates via max-height (JS-managed, see updateBudgetCollapse) so the grid
     below slides up gently instead of snapping. The bar shows in the cards' place.
     max-height transitions reliably on every engine (grid-template-rows did not). */
  /* Slow and soft (0.5s, an ease that starts and lands gently) so it reads as a glide, not
     a jolt. The bar GROWS IN while the cards shrink - it used to pop in at full height
     first, so everything below dropped a notch before sliding up. Now the band changes
     height in one continuous motion. Hidden, the bar takes no room and no taps. */
  .bsum-cards { overflow: hidden; transition: max-height .5s cubic-bezier(.4, 0, .2, 1); }
  .bsum-bar {
    display: flex; overflow: hidden; max-height: 0; opacity: 0; padding-block: 0; border-width: 0;
    visibility: hidden; pointer-events: none;
    transition: max-height .5s cubic-bezier(.4, 0, .2, 1), padding .5s cubic-bezier(.4, 0, .2, 1),
                border-width .5s cubic-bezier(.4, 0, .2, 1), opacity .35s ease, visibility .5s;
  }
  #budgetSummary.bsum-collapsed .bsum-bar {
    max-height: 70px; opacity: 1; padding-block: 7px; border-width: 1px;
    visibility: visible; pointer-events: auto;
  }
  #budgetSummary { transition: margin-bottom .5s cubic-bezier(.4, 0, .2, 1); }
  /* Phone only: drop the summary cards that aren't relevant in the current stage
     (e.g. collection figures before approval). Desktop keeps them - it has room. */
  .bsum-hidden { display: none !important; }
  /* The first row fills the width like the rows under it: the view switch keeps its
     size and the two count cards share the rest. Its own row, so no other card joins it. */
  .bsum-toprow { display: flex; flex: 1 1 100%; gap: inherit; min-width: 0; }
  .bsum-toprow > .bsum-card { flex: 1 1 0; min-width: 0; }
  /* "הכנסות נוספות" is a single number, so on a phone it is a one-line card: the label and
     the amount at the start, the add link (read-only: the effect note) at the end. Still a
     card among the cards, folding with them; desktop keeps the full card. Wraps rather
     than overflow if a narrow phone can't fit the note. */
  #bsumIncomeCard { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
  #bsumIncomeCard .bsum-label { margin-bottom: 0; }
  #bsumIncomeCard .bsum-val { font-size: 16px; }
  #bsumIncomeCard .bsum-sub { margin-top: 0; margin-inline-start: auto; }
  /* The draft banner on a phone: plain inline flow, not flex - as a stretched flex item
     that is itself a flex row, it shrink-wrapped and stranded the button mid-row. The
     approve button is a compact square ("אשר" over "הכל") sitting first (so it pins to
     the RTL right), and the note flows inline to its left, wrapping as little as it can. */
  /* The approve pill is absolutely pinned hard-right and vertically centred; the note
     fills the rest as a normal block, centred within it (a reserved right padding keeps
     it clear of the pill). Block layout fills the width reliably on every engine -
     display:table/flex here rendered differently on iOS Safari. Verified in the iOS
     Simulator. Desktop keeps its own layout. */
  .draft-banner { display: block; position: relative; padding: 8px 12px; }
  .draft-banner-text {
    display: block; text-align: center; padding-inline-start: 104px; font-size: 12px;
  }
  .draft-banner .btn, .draft-banner .gh-approve {
    position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%);
  }
  /* zero the desktop-only #draftApproveAllBtn 49px inline margin so the pill hugs the edge */
  .draft-banner #draftApproveAllBtn { margin: 0; }
  /* row 1: the buttons alone. row 2: the search next to the row-count. The .spacer
     is repurposed as a full-width line break (order between the buttons and the
     search) so the search always drops below the buttons - even on a tab with a
     single button, where it would otherwise sit beside it and orphan the count. */
  .toolbar.tb-collapsed .spacer { display: block; flex: 1 0 100%; height: 0; margin: -4px 0; order: 1; }
  .toolbar.tb-collapsed .search { flex: 1 1 auto; order: 2; }
  /* The "N שורות" row-count sits at the end of the search line (search shrinks to make
     room). The transient "נשמר ✓" / error feedback borrows the same slot and reverts
     to the count - so the slot keeps its width and the search never stays shrunk. */
  .toolbar.tb-collapsed .status {
    display: block; order: 3; flex: 0 0 auto; min-width: 0;
    white-space: nowrap; align-self: center;
  }
}
.upload-msg { text-align: center; color: var(--muted); line-height: 1.7; font-size: 15px; margin-top: 6px; }

/* Identity-verification popup on the public parent-upload pages: the parent proves a
   detail already on file (birth date / a parent's phone) before details are shown. */
.verify-overlay { position: fixed; inset: 0; background: rgba(20,30,50,.45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
/* When toggled off via the `hidden` attribute (its default state on the gan-wide
   page until a child with identifiers is picked), stay hidden - a bare
   `.verify-overlay{display:flex}` would otherwise override the attribute and the
   modal would trap the page on load. Specificity of the [hidden] variant wins. */
.verify-overlay[hidden] { display: none; }
.verify-box { background: var(--surface); border-radius: 16px; padding: 22px 22px 18px; max-width: 420px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.25); direction: rtl; }
.verify-title { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.verify-lead { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0 0 12px; }
/* Emphasise that only ONE field is needed. */
.verify-one { font-weight: 800; font-size: 1.22em; text-decoration: underline; text-underline-offset: 2px; color: var(--text); }
/* Confirm button looks disabled until a field is filled (stays clickable so an
   empty click still surfaces the "fill one" hint). */
.btn.verify-disabled, .btn.verify-disabled:hover { background: #c7ccd4; color: #fff; box-shadow: none; cursor: not-allowed; }
.verify-field { margin-bottom: 10px; }
.verify-field label { display: block; font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.verify-field input { width: 100%; box-sizing: border-box; font: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--text); }
.verify-field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-050); }
.verify-err { color: #c0392b; font-size: 13px; font-weight: 600; margin: 6px 0 4px; text-align: center; }
/* Secondary "pick another child" action under the primary verify button (gan-wide page only). */
.verify-back { display: block; margin: 12px auto 0; background: none; border: none; padding: 6px 8px; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); text-decoration: underline; cursor: pointer; }
.verify-back:hover { color: var(--text); }
/* `display: block` above beats the `hidden` attribute, so state it explicitly. Without
   this the button shows on the per-child page (which never wires it up) and whenever
   the gan-wide page has no roster to go back to. */
.verify-back[hidden] { display: none; }
/* The gan's name inside the verification box: the box hides the page's own subtitle,
   and a parent must be able to see which gan they are answering for. */
.verify-gan { text-align: center; font-size: 13px; font-weight: 700; color: var(--brand-700); margin: 2px 0 8px; }
.verify-gan:empty { display: none; }
.login-card .hint { color: var(--muted); font-weight: 500; font-size: 12px; }
/* A recommendation line sitting right under a field (e.g. hyphenate two surnames). */
.name-hint { display: block; margin: -4px 0 8px; line-height: 1.5; }
.login-card input[type="file"] {
  padding: 10px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  background: #fafbfc;
  font-size: 13px;
}
/* iOS Safari gives date inputs an intrinsic width they refuse to shrink below,
   so width:100% loses and the field spills past the card - to the LEFT here,
   because the page is RTL. appearance:none + min-width:0 drops that intrinsic
   size; the native picker still opens on tap. */
.login-card input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
  text-align: right;                     /* value at the RTL start, like the other fields */
}
.login-card input[type="date"]::-webkit-date-and-time-value { text-align: right; margin: 0; }
.login-card input[type="date"]::-webkit-calendar-picker-indicator { margin: 0; }
/* Browsers force tel inputs to LTR inside an RTL page, so "טלפון" hugged the
   left edge while every other field started at the right. Keep the value in
   LTR order (so a leading "+972" still reads correctly) but align it right,
   like the rest of the form. */
.login-card input[type="tel"] { direction: ltr; text-align: right; }
.login-card input[type="tel"]::placeholder { direction: rtl; }

/* Row actions (approve / delete) — pinned at the start, just after the row
   number, so they stay visible without scrolling to the end of the row. */
.grid thead th.actions, .grid tbody td.actions {
  position: sticky;
  right: 46px;
  z-index: 1;
  text-align: center;
  white-space: nowrap;
  background: #fff;
  border-left: 1px solid var(--line);
}
.grid thead th.actions { background: var(--head-bg); z-index: 2; }
.grid tbody tr:hover td.actions { background: var(--brand-050); }
.del-btn {
  border: none;
  background: transparent;
  color: #bcc1c9;
  cursor: pointer;
  font-size: 15px;
  padding: 8px;
  border-radius: 8px;
  transition: color .12s, background .12s;
}
.del-btn:hover { color: var(--danger); background: #fdecec; }
/* "שכפול שורה" - same quiet grey as the trash beside it, blue on hover: a copy is
   an ordinary act, not a dangerous one. */
.dup-btn {
  border: none; background: transparent; color: #bcc1c9; cursor: pointer;
  padding: 7px; border-radius: 8px; line-height: 0;
  transition: color .12s, background .12s;
}
.dup-btn:hover { color: var(--brand); background: var(--brand-050); }
/* Per-row 📅 "which calendars does this line appear on" - a quiet grey action icon,
   blue on hover like שכפול beside it. */
.cal-vis-btn { border: none; background: transparent; color: #bcc1c9; cursor: pointer;
  font-size: 15px; padding: 7px; border-radius: 8px; transition: color .12s, background .12s; }
.cal-vis-btn:hover { color: var(--brand); background: var(--brand-050); }
.calvis-intro { font-size: 13px; color: #5a6472; line-height: 1.6; margin: 0 0 6px; }
.calvis-row { display: flex; align-items: center; gap: 12px; padding: 14px 2px; border-top: 1px solid #eef1f5; }
.calvis-ic { font-size: 20px; flex: none; }
.calvis-txt { flex: 1; min-width: 0; }
.calvis-label { font-size: 15px; font-weight: 600; color: #1d1d1f; }
.calvis-hint { font-size: 12px; color: #8a94a2; margin-top: 2px; }
.calvis-reset { font: inherit; font-size: 12px; color: var(--brand); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.calvis-sw { flex: none; width: 46px; height: 28px; border-radius: 999px; border: 0; background: #d1d6de; position: relative; cursor: pointer; transition: background .15s; }
.calvis-sw::after { content: ""; position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.calvis-sw.on { background: #34c759; }
.calvis-sw.on::after { transform: translateX(-18px); }
/* Where it went: the copy is sorted in beside its original, which in a long plan can
   be well off the screen, so it says hello for a moment. */
@keyframes row-flash-fade {
  0%   { background: #fff3c4; }
  70%  { background: #fff3c4; }
  100% { background: transparent; }
}
.grid tbody tr.row-flash td { animation: row-flash-fade 2.2s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .grid tbody tr.row-flash td { animation: none; background: #fff3c4; }
}

/* ---- smooth loading: a skeleton while rows load, soft fades as they come and go ---- */
/* The grey placeholder of the table (showGridSkeleton). A slow shimmer travels across
   each bar so it reads as "loading", not as broken empty rows. */
@keyframes skel-shimmer { to { background-position: -200% 0; } }
.grid-skel tr.skel-row td { padding: 12px 10px; border-bottom: 1px solid var(--line); }
.skel-line { display: flex; gap: 12px; align-items: center; }
.skel-bar {
  height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, var(--line) 0%, #eef1f5 20%, var(--line) 40%) 0 0 / 200% 100%;
  animation: skel-shimmer 1.3s linear infinite;
}
/* The first paint of a tab's real rows fades up softly (gridFadeIn). */
@keyframes grid-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.grid tbody.grid-in { animation: grid-fade-in .32s ease-out; }
/* A freshly added row eases in rather than snapping into the list (flashRow). */
@keyframes row-enter { from { opacity: 0; } to { opacity: 1; } }
.grid tbody tr.row-enter td { animation: row-enter .4s ease-out; }
/* A deleted desktop table row fades where it stands before the list closes over it
   (deleteRow); the phone's card folds away with .card-leaving instead. */
.grid:not(.grid-cards) tbody tr.row-leaving td { opacity: 0; transition: opacity .18s ease; }
@media (prefers-reduced-motion: reduce) {
  .skel-bar { animation: none; }
  .grid tbody.grid-in, .grid tbody tr.row-enter td { animation: none; }
  .grid:not(.grid-cards) tbody tr.row-leaving td { transition: none; }
}
/* "בוצע" (done) toggle — a white ✓ in a green square — on approved planned rows. */
/* Not done = "hollow": white fill, green outline, green ✓. Done (.on) = solid
   green fill with a white ✓ (the same icon, filled in), so a marked row reads
   clearly as done. */
.done-btn { box-sizing: border-box; border: 2px solid #2e9e4f; background: #fff; color: #2e9e4f;
  cursor: pointer; font-size: 13px;
  font-weight: 800; line-height: 1; width: 24px; height: 24px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center; margin-inline-end: 3px;
  transition: background .12s, box-shadow .12s, color .12s, border-color .12s; }
.done-btn:hover { background: #eaf6ee; }
.done-btn.on { background: #2e9e4f; color: #fff; box-shadow: 0 0 0 2px rgba(46,158,79,.35); }
.done-btn.on:hover { background: #268043; border-color: #268043; }
/* A done row — greyed grey-green so the committee can ignore it. */
.row-done td { background: #eff6ed !important; }   /* softer green - calm next to the indigo group header */
.row-done .cell-input, .row-done .cell-select, .row-done .cell-text,
.row-done input[type="text"], .row-done input[type="number"], .row-done input[type="date"],
.row-done select, .row-done textarea { background: transparent !important; color: #55684f; }
.grid tbody tr.row-done:hover td.actions { background: #e4efe0 !important; }
/* Per-child "copy personal form link" button in the children actions column. */
.child-form-link {
  border: 1px solid var(--brand-200, #cfe3fb); background: var(--brand-050, #eef4fe);
  color: var(--brand-700); cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 700;
  padding: 4px 8px; border-radius: 7px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 3px; vertical-align: middle;
}
.child-form-link:hover { background: #dbeafd; border-color: var(--brand-400, #93c2f7); }
.child-form-link .cfl-ic { font-size: 12px; }

/* Empty / no-access state */
.empty { padding: 24px; color: var(--muted); text-align: center; }
.empty-state { padding: 64px 24px; text-align: center; color: var(--muted); }
.empty-state h2 { color: var(--text); font-weight: 800; margin-bottom: 8px; }
.empty-state a { color: var(--brand); font-weight: 700; text-decoration: none; }
.empty-state a:hover { text-decoration: underline; }

/* ---- "Parents may add a child who is not on the list" ---- */
/* The strip above the children list. Rendered ONLY while the permission is on: it is
   the off switch, and its date is what makes a permission left open for months
   visible. Turning it ON happens in the share popup. */
/* ---- "מי מחובר לגן": the permissions panel under the committee tab ---------- */
/* It sits BELOW the committee table on the same tab, so it has to read as a separate
   thing without shouting - a card, not a banner. */
.member-panel {
  margin: 14px 0 8px; padding: 14px 16px 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
}
.member-panel[hidden] { display: none; }
.member-panel .mp-head { display: flex; align-items: center; gap: 12px; }
.member-panel h3 { margin: 0; font-size: 15px; color: var(--brand-700); }
/* The panel title doubles as a collapse toggle (button reset to look like the h3). */
.member-panel .mp-toggle { display: flex; align-items: center; gap: 8px; margin: 0;
  flex: 1 1 auto;    /* fill the header row so the whole width is tappable, not just the text */
  font-size: 15px; font-weight: 700; color: var(--brand-700); background: none; border: 0;
  padding: 0; cursor: pointer; font-family: inherit; text-align: start; }
.member-panel .mp-chev { font-size: 13px; }
#memberPanel.mp-collapsed .mp-invite,
#memberPanel.mp-collapsed .mp-lead,
#memberPanel.mp-collapsed .mp-row,
#memberPanel.mp-collapsed .mp-sub,
#memberPanel.mp-collapsed .mp-note,
#memberPanel.mp-collapsed .mp-foot { display: none; }
.member-panel .mp-invite { margin-inline-start: auto; font-size: 13px; padding: 6px 14px; }
.member-panel .mp-lead { margin: 6px 0 12px; font-size: 12px; color: var(--muted); max-width: 70ch; }
.member-panel .mp-sub {
  margin: 16px 0 8px; font-size: 12px; font-weight: 700; color: var(--muted);
  border-top: 1px solid var(--line); padding-top: 12px;
}
.member-panel .mp-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.member-panel .mp-row:last-of-type { border-bottom: 0; }
.member-panel .mp-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.member-panel .mp-mail { font-size: 12px; color: var(--muted); }
.member-panel .mp-tag {
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--head-bg); color: var(--muted);
}
.member-panel .mp-tag-owner { background: #eef4ff; color: #2f5bb7; }
/* Permission STATUS, shown as a tinted pill (not a button): green = can edit,
   grey = view only. */
.member-panel .mp-role {
  font-size: 11px; font-weight: 700; white-space: nowrap;
  margin-inline-start: auto; padding: 3px 10px; border-radius: 999px;
}
.member-panel .mp-role-edit { background: #e7f6ec; color: #1f7a48; }
.member-panel .mp-role-view { background: var(--head-bg); color: var(--muted); }
.member-panel .mp-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.member-panel .mp-act {
  border: 1px solid var(--line-strong); background: #fff; color: var(--text);
  font-family: inherit; font-weight: 700; font-size: 12px;
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
}
.member-panel .mp-act:hover { background: var(--head-bg); }
.member-panel .mp-act-soft { font-weight: 500; color: var(--muted); }
.member-panel .mp-when { font-size: 12px; color: var(--muted); }
.member-panel .mp-note { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.member-panel .mp-note-you {
  background: #eef4ff; border: 1px solid #cfe0ff; color: #2f5bb7;
  border-radius: 10px; padding: 8px 12px; margin: 0 0 12px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.member-panel .mp-foot {
  margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
}
.member-panel .mp-load { font-size: 12px; color: var(--muted); }
.member-panel .mp-row-pending .mp-who b { font-weight: 600; }

.signup-strip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 8px 12px; border-radius: 10px;
  background: #fff7e6; border: 1px solid #f0d9a0; color: #7a5a12; font-size: 13px;
}
.signup-strip[hidden] { display: none; }
.signup-strip .ss-body { display: flex; align-items: center; gap: 6px; }
.signup-strip .ss-body b { color: #6b4e0a; }
.signup-strip svg { flex: 0 0 auto; }
.signup-strip .ss-link, .signup-strip .ss-off {
  border: 1px solid #d9b968; background: #fff; color: #7a5a12;
  font-weight: 700; font-size: 12px; padding: 4px 12px; border-radius: 999px; cursor: pointer;
}
.signup-strip .ss-link:hover, .signup-strip .ss-off:hover { background: #fdf3dc; }
.signup-strip .ss-off { margin-inline-start: auto; border-color: #c9705f; color: #a4402c; }
.signup-strip .ss-off:hover { background: #fdecea; }

/* The permission's checkbox + question fields inside the share popup. */
.signup-opt-box {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 10px;
  background: #f7f9fc; border: 1px solid var(--line);
}
.signup-opt { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; font-weight: 700; cursor: pointer; }
.signup-opt input { margin-top: 2px; flex: 0 0 auto; }
.signup-fields { margin-top: 10px; }
.signup-fields[hidden] { display: none; }
.signup-fields label { display: block; font-size: 12px; font-weight: 700; margin: 8px 0 3px; }
.signup-fields .hint { font-weight: 500; color: var(--muted); }
.signup-fields input { display: block; width: 100%; box-sizing: border-box; }
.signup-err { margin-top: 8px; font-size: 12px; font-weight: 700; color: var(--danger, #c0392b); }
.signup-err[hidden] { display: none; }

/* An open padlock on the "מספר הילדים" box while the permission is on. */
.bsum-signup-lock { display: inline-flex; vertical-align: middle; margin-inline-start: 5px; color: #b9822a; cursor: help; }

/* A child a parent registered: marked in the list so the committee can spot a
   duplicate of a child who was already there under another spelling. */
/* Where the row came from. A quiet icon, not a "חדש" badge: nothing here is waiting
   for approval, it is simply a fact about the record. It lives at the END of the
   row-actions cell, so RTL puts it to the left of the personal-form button, and is
   sized so the row height never grows - see the fitDashboardZoom contract. */
.added-mark {
  display: inline-flex; vertical-align: middle; align-items: center; justify-content: center;
  height: 20px; width: 14px; margin-inline-start: 5px;
  color: #94a3b3; cursor: help;
}
/* An empty placeholder of the same size, rendered on rows a parent did NOT add. It reserves
   the mark's slot so the "form link" button sits in the exact same place on every row (the
   mark no longer nudges the centred cell sideways). */
.added-mark-empty { visibility: hidden; cursor: default; }
.added-mark:hover { color: var(--brand-700); }

/* The "where did these children come from" picker, in that column's header. */
.col-filter-sel {
  display: block; margin: 2px auto 0; max-width: 100%;
  font: inherit; font-size: 10px; font-weight: 600; color: var(--muted);
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  padding: 1px 3px; cursor: pointer;
}
.col-filter-sel:hover { color: var(--brand-700); border-color: var(--brand); }

/* Public parent form: the "already on the list?" warning under the name fields. */
.signup-dup {
  margin: 6px 0 10px; padding: 8px 10px; border-radius: 9px;
  background: #fff8e6; border: 1px solid #f0d9a0; font-size: 13px; color: #7a5a12;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.signup-dup[hidden] { display: none; }
.signup-dup-hit {
  border: 1px solid #d9b968; background: #fff; color: var(--brand-700);
  font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
}
.signup-dup-hit:hover { background: #fdf3dc; }

/* Contact sheet — the on-screen view IS a scaled A4-landscape page, so screen
   and PDF are identical. The .cs-sheet box is fixed at A4-landscape px; the page
   script sets card widths (columns) and zooms the sheet to fit the viewport. */
.cs-page { min-height: 100vh; background: #e9edf1; color: var(--text); }
.cs-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 20px; background: #fff; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
}
/* Keep each control on one line (a pill), and let the row wrap on a phone instead
   of overflowing / stretching into tall ovals. */
.cs-toolbar .btn, .cs-toolbar .btn-link-dark { white-space: nowrap; }
@media (max-width: 560px) {
  .cs-toolbar { padding: 10px 14px; gap: 8px; }
  .cs-toolbar .btn { padding: 8px 12px; font-size: 13px; }
}
.btn-link-dark { color: var(--brand-700); text-decoration: none; font-weight: 600; font-size: 14px; }
.btn-link-dark:hover { text-decoration: underline; }

/* One sheet, or two when a big class is split over two pages. They stack, because
   they are two sheets of paper - side by side they would read as one wide thing, and
   the zoom that fits the stage would halve to squeeze both across. `align-items:
   center` keeps each page centred without stretching it; the sheet's own `flex: 0 0
   auto` already stops it being squashed. */
.cs-stage { padding: 20px; display: flex; flex-direction: column;
            align-items: center; gap: 26px; }
.cs-sheet {
  /* ONE font, everywhere, on purpose. The rest of the app inherits the device's own
     system stack - San Francisco on an iPhone, Roboto on Android, Segoe on Windows -
     and each of those measures Hebrew differently. The sheet's layout is CHOSEN by
     measuring (how many cards fit a row, how tall a card is), so a different font
     meant a different sheet on every device: the maker saw three layouts across her
     laptop and two phones. Assistant is loaded from Google Fonts on this page anyway
     (the font picker offers it), so pinning to it costs nothing and makes the page
     identical on screen, in print and in the exported image.
     The fallbacks matter only if the network is down; then the sheet is at least
     self-consistent, because the fitting runs again once the font arrives. */
  font-family: "Assistant", "Noto Sans Hebrew", Arial, sans-serif;
  /* Phones enlarge text on their own initiative, which is the other way a "fixed"
     A4 layout comes out different on a phone than on a laptop. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* A4 landscape edge to edge @96dpi (297x210mm). The @page margin is 0, so the
     background reaches the paper edge with no white border; the sheet's own padding
     is what keeps the CONTENT off the edge (a print "safe area"). The page's two edge
     lengths live in --pg-short / --pg-long (A4 by default; cs-size-a3 / -a5 swap them),
     and orientation/mode below picks which is the width and which the height. */
  --pg-short: 793px;             /* A4 210mm @96dpi (a hair under, so it never spills) */
  --pg-long: 1122px;             /* A4 297mm @96dpi */
  width: var(--pg-long);         /* default (cards) layout is landscape */
  min-height: var(--pg-short);
  /* Never let the screen squeeze the paper. The sheet is a flex item inside .cs-stage,
     and flex items shrink by default - so on a phone the 1122px box was being squashed
     to the width of the screen. The fitting code measures at zoom 1, so it was
     measuring that squashed box and choosing a layout for it: a different sheet on
     every screen width. The page is always A4; the on-screen zoom is what makes it
     FIT a small screen, and that is a matter of display, not of layout. */
  flex: 0 0 auto;
  box-sizing: border-box;
  position: relative;            /* anchor the top-corner logo */
  display: flex; flex-direction: column;   /* the phones footer sits at the bottom */
  background: linear-gradient(180deg, #eaf3fb 0%, #f6eef6 100%);
  padding: 16px 26px;            /* equal top & bottom, so the footer's gap to the
                                    page edge matches the header's gap at the top */
  box-shadow: var(--shadow-md);
  transform-origin: top center;
}
.cs-sheet.cs-has-bg { background: none; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; }
/* Mute any background (preset OR upload) with a white veil so the cards + text
   stay readable and the page never feels overloaded. */
.cs-sheet.cs-has-bg::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(255, 255, 255, 0.58);
  pointer-events: none; z-index: 0;
}
.cs-sheet.cs-has-bg > * { position: relative; z-index: 1; }
/* The logo must stay pinned bottom-right - the rule above (which lifts children
   above the background veil) would otherwise force it into normal flow at the
   top. Keep it absolutely positioned; it inherits z-index:1 from the rule above. */
.cs-sheet.cs-has-bg > .cs-logo { position: absolute; }

/* Contact-sheet background library picker (toolbar popover). */
.cs-bg-picker { position: relative; }
.cs-bg-panel {
  position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 20;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-md); padding: 12px; width: 320px;
}
.cs-bg-hint { font-size: 12px; color: var(--muted); margin-bottom: 8px; font-weight: 600; }
.cs-bg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cs-bg-tile {
  position: relative; aspect-ratio: 4 / 3; border-radius: 9px; cursor: pointer;
  border: 2px solid var(--line); background-size: cover; background-position: center;
  background-color: #eef4fb; padding: 0; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
}
.cs-bg-tile > span {
  width: 100%; text-align: center; font-size: 11px; font-weight: 800; color: #2c3742;
  background: rgba(255, 255, 255, 0.82); padding: 2px 0;
}
.cs-bg-tile:hover { border-color: var(--brand); }
.cs-bg-tile.selected { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-050); }
.cs-bg-upload, .cs-bg-none { background: #f4f7fa; align-items: center; }
.cs-bg-upload > span, .cs-bg-none > span { background: none; color: var(--brand-700); }

/* Useful-phones picker (toolbar popover with checkboxes). */
/* The save chooser. Same shape as the other toolbar dropdowns, but each row carries a
   line saying what that format costs - the difference between PDF and JPG here is
   whether the parents' phone numbers stay tappable, which is invisible until too late. */
.cs-save-picker { position: relative; }
.cs-save-panel {
  position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 20;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-md); padding: 8px; width: 330px;
}
.cs-save-opt {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 10px; border: 0; border-radius: 9px; background: transparent;
  text-align: start; cursor: pointer; font-family: inherit; color: var(--text);
}
.cs-save-opt:hover:not(:disabled) { background: var(--brand-050, #eaf3fe); }
.cs-save-opt:disabled { opacity: .55; cursor: default; }
.cs-save-ico { font-size: 19px; line-height: 1.2; flex: 0 0 auto; }
.cs-save-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-save-txt b { font-size: 13px; font-weight: 700; }
.cs-save-txt small { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.cs-save-status { font-size: 12px; color: var(--muted); padding: 4px 10px 6px; font-weight: 600; }
/* The step that is left to the committee: the file has been saved by the browser's own
   dialog, the message is on the clipboard, and WhatsApp opens from a click of its own
   (a tab opened right after a print dialog closes is not a gesture, and gets blocked). */
.cs-wa-step {
  display: block; margin-top: 4px; padding: 9px 10px; border-top: 1px solid var(--line);
}
.cs-wa-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cs-wa-head span { font-size: 12px; font-weight: 700; color: var(--ok, #12a150); }
.cs-wa-step .btn { padding: 5px 12px; font-size: 12px; }
/* The message itself, so it can also be selected by hand. pre-wrap keeps the blank
   line between the paragraphs, which is part of how it reads in the chat. */
.cs-wa-text {
  margin-top: 8px; padding: 8px 10px; max-height: 190px; overflow-y: auto;
  background: var(--head-bg); border: 1px solid var(--line); border-radius: 8px;
  font-size: 12px; line-height: 1.6; color: var(--text);
  white-space: pre-wrap; user-select: text;
}
/* `display: flex` above beats the browser's own [hidden] { display: none }, so without
   this the row was painted even with the attribute set - it greeted the committee with
   "ההודעה הועתקה ✓" before they had done anything. Any class that sets display has to
   say this for itself. */
.cs-wa-step[hidden] { display: none; }
.cs-save-note {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 9px 10px; margin-top: 4px; border-top: 1px solid var(--line);
  cursor: pointer;
}
.cs-save-note input { width: 14px; height: 14px; margin-top: 1px; flex: none; accent-color: var(--brand); }
/* Quieter than the option rows: those are the choice being made, this only trims what
   goes on the sheet. Same size and colour as the grey line under each option, so it
   reads as a detail of the menu and not as a fourth thing to choose. */
.cs-save-note .cs-save-txt b { font-size: 11.5px; font-weight: 600; color: var(--muted); }
/* The note is dropped from the sheet itself, not just from the file, so the page on
   screen is what the paper will be. The room reserved for it on the numbers row goes
   back to the numbers when it is not there. */
.cs-sheet.cs-no-hint .cs-wa-hint { display: none; }
.cs-sheet.cs-no-hint .cs-phone-row:not(.cs-phone-staff) { padding-left: 0; padding-right: 0; }
.cs-phones-picker { position: relative; }
.cs-phones-panel {
  position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 20;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-md); padding: 12px; width: 300px; max-height: 60vh; overflow-y: auto;
}
.cs-ph-group { font-size: 11.5px; font-weight: 800; color: var(--muted);
  margin: 8px 0 3px; padding-top: 6px; border-top: 1px solid var(--line, #eef1f5); }
.cs-ph-opt {
  display: flex; align-items: center; gap: 8px; padding: 5px 2px;
  font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer;
}
.cs-ph-opt input { width: 16px; height: 16px; accent-color: var(--brand); flex: none; }
.cs-ph-opt span { color: var(--muted); font-weight: 500; direction: ltr; unicode-bidi: embed; }
/* The title used to sit tight against the top edge while the rows of children floated
   in the middle of the page, because the grid took ALL the leftover height. Letting the
   header take a share of it too puts the title midway between the paper's edge and the
   first row - on every sheet, whatever the class size. Only free space is shared, so
   when the cards fill the page this does nothing at all. */
.cs-header { align-items: flex-start; }
.cs-titles { will-change: transform; }   /* shifted by centreTitle() - see the script */
.cs-header { display: flex; align-items: center; justify-content: center; margin: 0 0 12px; }
.cs-logo { position: absolute; bottom: 16px; right: 26px; height: 42px; width: 42px; object-fit: cover; border-radius: 11px; }
/* In the footer it mirrors the WhatsApp note: pinned to the top-right of the useful-numbers
   row (inside its reserved right gutter), smaller so it sits inside the row and the footer's
   top line never crosses it. */
.cs-foot-logo { top: 3px; bottom: auto; right: 2px; height: 32px; width: 32px; }
/* On the row of useful numbers, at its far left - positioned against the footer, so
   it follows that row wherever the row ends up (one line of numbers or two). Absolute
   so it stays out of the flow: the sheet has to stay exactly one page, and a note is
   not allowed to add to the footer's height or push its numbers onto another line.
   `top` matches the footer's own padding, which is where the first row begins. */
.cs-wa-hint {
  /* `left`, not `inset-inline-start`: the page is RTL, where the inline START edge is
     the RIGHT one - which put this in the opposite corner. Left here means left. */
  position: absolute; top: 8px; left: 0;
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; color: var(--muted);
  white-space: nowrap; pointer-events: none;
}
.cs-wa-hint svg { width: 13px; height: 13px; flex: none; fill: #25D366; }
.cs-titles { text-align: center; }
/* The title is bold in WHATEVER font the gan picks. 800 rather than 900 on purpose:
   no family in the picker ships a 900, and asking Google for one is answered 200 with
   the regular face alone (see contact_fonts.py), so a 900 here was drawn as a fake
   bold in every font including the default. At 800 the four families that have an 800
   use it, the seven that stop at 700 fall back to their real 700, and only the five
   single-weight families are synthesised - which font-synthesis keeps allowed. */
.cs-header h1 { font-family: var(--cs-font-title, inherit); font-size: calc(34px * var(--cs-size-title, 1)); font-weight: 800;
  font-synthesis: weight; -webkit-font-synthesis: weight;
  color: var(--brand-700); margin: 0; letter-spacing: .5px; }
.cs-subtitle { font-family: var(--cs-font-title, inherit); font-size: calc(14px * var(--cs-size-title, 1)); font-weight: 700; color: var(--muted); margin-top: 3px; }

/* A stack of ROWS, and the rows are real elements the script builds (see rowSizes in
   the page script) rather than cards left to wrap on their own. Wrapping can only ever
   fill each row to the brim, which is how a class of 33 came out 9-9-9-6; the shape is
   chosen now, so it has to be built.
   Each row centres its own cards, so a row that is deliberately one card shorter than
   the one above it sits in the middle instead of hanging off an edge. The rows as a
   block start at the top, and the height the cards do not need shows as more of the
   chosen background below them. */
.cs-grid { display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; }
.cs-row { display: flex; justify-content: center; gap: 8px; }
.cs-card {
  box-sizing: border-box;
  background: #fff; border: 1px solid #cfd6dd; border-radius: 8px;
  padding: 5px; text-align: center;
  /* width is set inline by the page script */
}
.cs-photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 7px; background: #eef1f5; display: block; }
.cs-photo-empty { display: flex; align-items: center; justify-content: center; color: #b9c2cc; }
.cs-silhouette { width: 62%; height: 62%; fill: currentColor; }   /* gender-neutral child placeholder */
/* The text scales with the card (--cs-fs, set by the sheet's fitting script): a
   bigger card should carry bigger names and phone numbers, not a bigger photo with
   the same tiny print under it. 1 = the sizes these were drawn at. */
/* Two tiers, deliberately. TOP (12px): the child's name, the birth date and, where the
   place keeps one, the child's own phone - all the SAME size, the name bold and the rest
   not. These are the facts you scan a card for. BELOW, two points smaller (10px): the
   parents, with each parent's NAME bold. All of it still rides on the auto-fit (--cs-fs)
   and the section's size (--cs-size-children), so a bigger card carries bigger print and
   the slider scales the whole block together. */
.cs-name { font-family: var(--cs-font-children, inherit); font-weight: 800; font-size: calc(12px * var(--cs-fs, 1) * var(--cs-size-children, 1)); margin-top: 4px; color: var(--text); }
.cs-birth { font-family: var(--cs-font-children, inherit); font-size: calc(12px * var(--cs-fs, 1) * var(--cs-size-children, 1)); color: var(--muted); margin-top: 1px; }
.cs-parents { margin-top: 4px; }
.cs-parent { font-family: var(--cs-font-children, inherit); font-size: calc(10px * var(--cs-fs, 1) * var(--cs-size-children, 1)); line-height: 1.45; white-space: nowrap; }
.cs-parent-name { font-weight: 700; }
.cs-parent-phone { color: var(--muted); direction: ltr; unicode-bidi: embed; }
.cs-parent-phone::before { content: " "; }
/* The child's own phone, on the sheet. Rendered only where the place keeps one, and
   shown only while the toggle is on - the class rides on the sheet, so hiding is a
   pure CSS switch with the numbers already in the DOM. */
.cs-student-phone { font-family: var(--cs-font-children, inherit); font-size: calc(12px * var(--cs-fs, 1) * var(--cs-size-children, 1)); line-height: 1.4; margin-top: 2px; white-space: nowrap; direction: ltr; unicode-bidi: embed; text-align: center; }
.cs-sheet:not(.cs-show-student) .cs-student-phone,
.cs-sheet:not(.cs-show-student) .cs-col-student { display: none; }
/* Birthdays follow the "🎂 הצגת ימי הולדת" toggle (ON by default). Hidden on the card and
   in both of the table's birthday cells when the class is off. */
.cs-sheet:not(.cs-show-birth) .cs-birth,
.cs-sheet:not(.cs-show-birth) .cs-th-birth,
.cs-sheet:not(.cs-show-birth) .cs-td-birth { display: none; }
/* The child's address, shown only when the committee turns addresses on. Same size as
   the parent details (the lower tier), not bold; rides on the auto-fit and the section
   size like the rest of the card. */
.cs-address { font-family: var(--cs-font-children, inherit); font-size: calc(10px * var(--cs-fs, 1) * var(--cs-size-children, 1)); line-height: 1.4; margin-top: 3px; color: var(--muted); }
.cs-sheet:not(.cs-show-address) .cs-address,
.cs-sheet:not(.cs-show-address) .cs-col-address { display: none; }
/* --- The staff section --------------------------------------------------------- */
/* In the panel: a sub-label and the greyed-out settings while the team is off. */
.cs-set-sub { font-size: 12px; font-weight: 700; color: var(--muted); margin: 12px 0 5px; }
.cs-staff-settings.cs-disabled { opacity: .45; pointer-events: none; }
/* On the sheet (photos mode): the team's photo cards. Hidden until the script shows them,
   then either a nowrap strip beside the title (inline) or a centred wrapped row below it. */
.cs-staff { display: none; gap: 8px; align-items: flex-start; }
.cs-staff.cs-show { display: flex; }
.cs-staff.cs-staff-row { flex-wrap: wrap; justify-content: center; margin-top: 10px; }
/* A white card like the children's, so the name/role/phone stay readable even when the
   committee sets a dark background and a card lands on a dark corner. */
.cs-staff-card { box-sizing: border-box; display: flex; flex-direction: column;
  align-items: center; text-align: center; width: 88px; flex: 0 0 auto;
  background: #fff; border: 1px solid #cfd6dd; border-radius: 8px; padding: 5px; }
.cs-staff-card[hidden] { display: none; }
.cs-staff-photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; background: #eef1f5; display: block; }
.cs-staff-photo.cs-photo-empty { display: flex; align-items: center; justify-content: center; color: #b9c2cc; }
.cs-staff-name { font-family: var(--cs-font-staff, inherit); font-size: calc(11px * var(--cs-size-staff, 1)); font-weight: 700; color: var(--text); margin-top: 3px; line-height: 1.2; }
.cs-staff-role { font-family: var(--cs-font-staff, inherit); font-size: calc(9px * var(--cs-size-staff, 1)); color: var(--muted); line-height: 1.2; }
/* The role under a staff name shows only when "הצגת תפקידי הצוות" is on (a class on the
   sheet), like addresses. Off by default. */
.cs-sheet:not(.cs-show-roles) .cs-staff-role { display: none; }
/* The phone under a staff card follows "הצגת טלפוני הצוות" (on by default). */
.cs-staff-cardphone { font-family: var(--cs-font-staff, inherit); font-size: calc(10px * var(--cs-size-staff, 1)); color: var(--muted); line-height: 1.3; margin-top: 1px; direction: ltr; unicode-bidi: embed; }
.cs-staff-cardphone a { color: inherit; text-decoration: none; }
.cs-sheet:not(.cs-show-staffphone) .cs-staff-cardphone { display: none; }
.cs-staff-birth { font-family: var(--cs-font-staff, inherit); font-size: calc(10px * var(--cs-size-staff, 1)); color: var(--muted); line-height: 1.3; margin-top: 1px; direction: ltr; unicode-bidi: embed; }
.cs-sheet:not(.cs-show-staffbirth) .cs-staff-birth { display: none; }
.cs-header.cs-head-inline { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
/* The title is centred in the space LEFT of the page edge and RIGHT of the staff strip -
   not the whole page, and not jammed to the edge. flex:1 makes the titles box that leftover
   space; text-align centres the title inside it. (applyHeader measures the title's NATURAL
   width for the fit test, not this grown box - see there.) */
.cs-header.cs-head-inline .cs-titles { text-align: center; flex: 1 1 auto; min-width: 0; }
.cs-header.cs-head-inline .cs-staff { flex-wrap: nowrap; }
/* On/off pill with an iOS-style switch drawn from two pseudo-elements: ::before is the
   track, ::after the sliding knob. Label at the start, switch at the end; grey off, blue
   on. The whole pill stays clickable - the switch is a picture of the button's state. */
.cs-student-btn { position: relative; display: flex; align-items: center; gap: 8px;
  font: inherit; font-weight: 600; cursor: pointer; color: var(--text);
  border: 1px solid var(--line-strong); background: var(--surface);
  border-radius: 999px; padding: 7px 14px; padding-inline-end: 60px;
  transition: border-color .16s, color .16s, background .16s; }
.cs-student-btn::before { content: ""; position: absolute; inset-inline-end: 12px; top: 50%;
  transform: translateY(-50%); width: 40px; height: 23px; border-radius: 999px;
  background: #ccd4dd; transition: background .18s; }
.cs-student-btn::after { content: ""; position: absolute; inset-inline-end: 32px; top: 50%;
  transform: translateY(-50%); width: 17px; height: 17px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .35); transition: inset-inline-end .18s; }
.cs-student-btn.on { border-color: var(--brand); color: var(--brand-700); background: var(--brand-050); }
.cs-student-btn.on::before { background: var(--brand); }
.cs-student-btn.on::after { inset-inline-end: 15px; }
/* The fonts accordion's icon: an alef in print and an alef in a handwriting face, so it
   reads as "fonts" without an emoji. Gveret Levin is already loaded for the sheet. */
.cs-fonticon { display: inline-flex; gap: 1px; align-items: baseline; line-height: 1; }
.cs-fonticon-print { font-family: "Frank Ruhl Libre", "David Libre", serif; font-weight: 700; }
.cs-fonticon-script { font-family: "Gveret Levin", "Amatic SC", cursive; font-size: 1.15em; }

/* Photos ⇄ table layout switch: each mode hides the other layout. */
.cs-mode-cards .cs-table-wrap { display: none; }
.cs-mode-table .cs-grid { display: none; }
/* The photo-less table prints A4 PORTRAIT - a taller, narrower sheet (the page
   script sets @page orientation + the fit-to-one-page zoom to match). The extra
   bottom padding reserves a clear zone for the corner logo (bottom:16px + 42px
   tall = ~58px) so a full-height table never runs under it. */
/* Paper SIZE (גודל הדף): swap the two edge lengths; width/height below read them. A4 is the
   default on .cs-sheet above. A3 = A4 x sqrt2, A5 = A4 / sqrt2 (@96dpi). */
.cs-sheet.cs-size-a3 { --pg-short: 1122px; --pg-long: 1587px; }   /* A3 297x420mm */
.cs-sheet.cs-size-a5 { --pg-short: 559px;  --pg-long: 793px; }    /* A5 148x210mm */
.cs-sheet.cs-mode-table { width: var(--pg-short); min-height: var(--pg-long); padding-bottom: 72px; }   /* portrait, edge to edge */
/* An explicit orientation (עיצוב הדף) overrides the layout's default orientation: forced
   portrait gets the tall sheet + the corner-logo safe zone even in CARDS mode; forced
   landscape gets the wide sheet even for the table. Listed AFTER .cs-mode-table so they
   win on equal specificity. The fit script keys off the same cs-orient-* classes. */
.cs-sheet.cs-orient-portrait { width: var(--pg-short); min-height: var(--pg-long); padding-bottom: 72px; }
.cs-sheet.cs-orient-landscape { width: var(--pg-long); min-height: var(--pg-short); padding-bottom: 16px; }

/* Toolbar segmented toggle (עם / בלי תמונות). */
/* Segmented pill: a soft blue track with the chosen side lifted as a rounded blue
   segment that slides - a modern two-way switch rather than two boxed buttons. */
.cs-mode-toggle { display: inline-flex; border: none; border-radius: 999px; background: var(--brand-050); padding: 3px; gap: 3px; }
.cs-mode-btn, .cs-pages-btn { border: none; background: transparent; padding: 7px 16px; font: inherit; font-size: 13px; font-weight: 700; color: var(--brand-700); cursor: pointer; border-radius: 999px; transition: background .16s, color .16s, box-shadow .16s; }
.cs-mode-btn:not(.on):hover, .cs-pages-btn:not(.on):hover { background: rgba(0, 113, 227, .10); }
.cs-mode-btn.on, .cs-pages-btn.on { background: var(--brand); color: #fff; box-shadow: 0 1px 3px rgba(0, 72, 176, .30); }

/* Designed, photo-less contact table. */
/* Takes its share of the page's spare height, the same way the card grid does - so
   the header cannot swallow all of it and leave the table pinned under the title. */
.cs-table-wrap { width: 100%; overflow: hidden; }
.cs-table {
  /* One size for the table, and the header row derives from it: same font as the
     children's details, bold, one point larger. The header is not a separate choice. */
  --cs-table-fs: 15px;
  width: 100%; border-collapse: collapse; font-size: calc(var(--cs-table-fs) * var(--cs-size-children, 1));
  background: rgba(255,255,255,.94); border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.cs-table thead th { font-family: var(--cs-font-children, inherit);
  background: var(--brand); color: #fff; font-weight: 800;
  font-size: calc((var(--cs-table-fs) + 1px) * var(--cs-size-children, 1));
  padding: 10px 12px; text-align: right; white-space: nowrap;
}
.cs-table tbody td { font-family: var(--cs-font-children, inherit);
  padding: 8px 12px; border-bottom: 1px solid #e6edf5; text-align: right;
  color: #1f2a20; vertical-align: middle;
}
.cs-table tbody tr:nth-child(even) td { background: rgba(0,113,227,.05); }
.cs-table tbody tr:last-child td { border-bottom: none; }
.cs-td-name { font-weight: 800; white-space: nowrap; }
.cs-td-birth { white-space: nowrap; color: #566; font-variant-numeric: tabular-nums; }
.cs-td-pname { font-weight: 600; white-space: nowrap; }
.cs-td-pphone { direction: ltr; unicode-bidi: embed; text-align: right; white-space: nowrap; }
.cs-td-pphone .cs-phone-link { color: var(--brand-700); }

/* "דף קשר" layout chooser (עם / בלי תמונות) popup. */
.cs-choose { display: flex; gap: 12px; margin-top: 6px; }
.cs-choose-opt {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 12px; border: 2px solid var(--line, #e3e8ee); border-radius: 14px;
  background: #fff; cursor: pointer; transition: border-color .12s, box-shadow .12s, background .12s;
}
.cs-choose-opt:hover { border-color: var(--brand); background: var(--brand-050); box-shadow: var(--shadow-sm); }
.cs-choose-emoji { font-size: 30px; line-height: 1; }
.cs-choose-t { font-weight: 800; font-size: 15px; color: var(--text); }
.cs-choose-s { font-size: 12px; color: var(--muted); text-align: center; }

/* "פרטים חסרים" panel sits BESIDE the sheet and pushes/shrinks it (in-flow, not
   an overlay). cs-main is the flex row; the stage takes the rest, the sheet
   re-fits into it. Never printed. */
.cs-main { display: flex; align-items: stretch; }
.cs-stage { flex: 1 1 auto; min-width: 0; }
.cs-gaps-btn { background: #fff4e5; color: #9a6400; border: 1px solid #f2d19a; }
.cs-gaps-btn:hover { background: #ffedd0; }
/* The font panel: the mirror of the "פרטים חסרים" panel, on the other side. Same
   width and behaviour, so opening either one narrows the stage and the sheet re-fits. */
.cs-fonts {
  flex: 0 0 300px; align-self: stretch;
  max-height: calc(100vh - 56px); overflow-y: auto;
  background: #fff; border-inline-end: 1px solid var(--line, #e3e8ee);
  box-shadow: 6px 0 18px rgba(0,0,0,.07);
}
.cs-fonts-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--line, #eef1f5);
  font-weight: 800; font-size: 14px; background: #f7f9fc;
}
.cs-fonts-body { padding: 12px 14px 16px; }
/* One section (כותרת הדף / פרטי הילדים / טלפונים) per slot, divided by a hairline so the
   three don't crowd into one another. */
.cs-font-slot { margin-bottom: 0; }
.cs-font-slot + .cs-font-slot { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line, #e3e8ee); }
.cs-font-slot > label { display: block; font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 6px; }
.cs-font-hint { font-size: 11.5px; color: var(--muted); margin: 1px 0 6px; line-height: 1.4; }
.cs-font-pick {
  width: 100%; padding: 7px 9px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--line, #e3e8ee); border-radius: 9px; background: #fff; color: var(--text);
}
/* The drawn font picker. A native <select> cannot do this: the popup is an OS control
   and macOS draws every row in the system font, so the fonts could not be seen. */
.cs-font-combo { position: relative; }
.cs-font-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; font-size: 13px; font-family: inherit; text-align: start; cursor: pointer;
  border: 1px solid var(--line, #e3e8ee); border-radius: 9px; background: #fff; color: var(--text);
}
.cs-font-btn:hover { border-color: var(--brand, #0071e3); }
.cs-font-btn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-font-caret { color: var(--muted); font-size: 11px; flex: 0 0 auto; }
.cs-font-list {
  position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 30;
  max-height: 320px; overflow-y: auto; padding: 4px;
  background: #fff; border: 1px solid var(--line, #e3e8ee); border-radius: 11px;
  box-shadow: 0 10px 28px rgba(20,40,70,.16);
}
.cs-font-opt {
  width: 100%; display: flex; align-items: baseline; gap: 8px; cursor: pointer;
  padding: 7px 9px; border: 0; border-radius: 8px; background: none; color: var(--text);
  text-align: start; font-size: 16px; line-height: 1.3;
}
.cs-font-opt:hover { background: var(--brand-050, #eaf3fe); }
.cs-font-opt.on { background: var(--brand-050, #eaf3fe); box-shadow: inset 0 0 0 1px var(--brand, #0071e3); }
.cs-font-opt-name { flex: 0 0 auto; font-weight: 700; }
/* The sample is what the row is FOR, so it gets the room; the name can be clipped. */
.cs-font-opt-sample { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.cs-font-slot[hidden] { display: none; }
/* Text-size slider: one per section, under that section's font picker. The middle is the
   system's own size (100%); left shrinks, right grows - and for the children's block the
   right end is set per-gan in the script, as far as the page can hold. The small and
   large aleph flag the two ends. */
.cs-size { margin-top: 8px; }
.cs-size-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cs-size-cap { font-size: 12px; font-weight: 700; color: var(--muted); }
.cs-size-val { font-size: 13px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.cs-size-track { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.cs-size-end { flex: 0 0 auto; color: var(--muted); font-weight: 800; line-height: 1; font-size: 12px; }
.cs-size-end-big { font-size: 20px; }
.cs-size-range { -webkit-appearance: none; appearance: none; flex: 1 1 auto; height: 22px;
  background: transparent; cursor: pointer; }
.cs-size-range::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: var(--line, #e3e8ee); }
.cs-size-range::-moz-range-track { height: 4px; border-radius: 999px; background: var(--line, #e3e8ee); }
.cs-size-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin-top: -6px; border-radius: 50%;
  background: var(--brand, #0071e3); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(20,40,70,.3); }
.cs-size-range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%;
  background: var(--brand, #0071e3); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(20,40,70,.3); }
.cs-size-range:focus-visible { outline: 2px solid var(--brand, #0071e3); outline-offset: 4px; border-radius: 999px; }
.cs-font-reset { width: 100%; margin-top: 4px; }
.cs-fonts-btn { background: #eef4ff; color: #1b4b8a; border: 1px solid #cfe0fb; }
/* The two grouped-panel openers look like a pair. */
.cs-content-btn { background: #eef4ff; color: #1b4b8a; border: 1px solid #cfe0fb; }
/* Collapsible sections inside the "עיצוב הדף" / "מה מופיע בדף" panels. The panel opens
   compact - a list of section headers - and the committee expands only what it wants;
   open/closed is remembered per browser. */
.cs-acc-note { font-size: 11.5px; color: var(--muted); margin: 0 0 6px; line-height: 1.4; }
.cs-acc { border-top: 1px solid var(--line, #e3e8ee); }
.cs-acc:last-of-type { border-bottom: 1px solid var(--line, #e3e8ee); }
.cs-acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 11px 2px; background: none; border: 0; cursor: pointer; font: inherit;
  font-size: 14px; font-weight: 800; color: var(--text); text-align: start; }
.cs-acc-head:hover { color: var(--brand-700, #1b4b8a); }
.cs-acc-caret { color: var(--brand-700, #0058b0); font-size: 20px; line-height: 1; flex: 0 0 auto; transition: transform .15s; }
.cs-acc.open .cs-acc-caret { transform: rotate(180deg); }
.cs-acc-body { display: none; padding: 0 2px 14px; }
.cs-acc.open .cs-acc-body { display: block; }
/* The view / page-count toggles stack in the panel, each filling the width so both
   halves of a segmented control are easy to hit. */
.cs-acc-body .cs-mode-toggle { display: flex; margin-bottom: 8px; width: 100%; }
.cs-acc-body .cs-mode-toggle:last-child { margin-bottom: 0; }
/* גודל הדף buttons: a page outline that grows A5 → A4 → A3 (ordered small→large), so the
   relative size reads at a glance. The stroke is non-scaling, so it stays crisp at every size. */
.cs-sizebtn { display: inline-flex; align-items: center; justify-content: center; }
.cs-pg { width: auto; flex: none; margin-inline-end: 6px; }
.cs-pg-a5 { height: 11px; }
.cs-pg-a4 { height: 15px; }
.cs-pg-a3 { height: 19px; }
.cs-acc-body .cs-mode-btn, .cs-acc-body .cs-student-btn { flex: 1 1 0; }
/* The page-count picker: a row of number buttons, the chosen one filled. */
.cs-pages-pick { display: flex; gap: 6px; margin-top: 8px; }
.cs-pagenum { flex: 1 1 0; height: 38px; border: 1px solid var(--line-strong, #c4ccd4);
  border-radius: 9px; background: #fff; color: var(--brand-700, #1b4b8a);
  font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.cs-pagenum:hover { border-color: var(--brand, #0071e3); }
.cs-pagenum.on { background: var(--brand); color: #fff; border-color: transparent; }
/* The icon is an aleph in print beside an aleph in handwriting - which is what the
   button does, said without words. Drawn with the real families the picker offers
   rather than as SVG paths, so it is the actual typefaces on show. The fallbacks
   matter: if Google is unreachable both letters still render, just less distinctly. */
.cs-fonts-ico { display: inline-flex; align-items: baseline; gap: 3px; line-height: 1; }
.cs-fonts-ico b { font-family: "Heebo", "Assistant", sans-serif; font-weight: 800; font-size: 15px; }
.cs-fonts-ico i { font-family: "Gveret Levin", cursive; font-style: normal; font-size: 17px; }
.cs-fonts-btn:hover { background: #e2edff; }

.cs-gaps {
  flex: 0 0 300px; align-self: stretch;
  max-height: calc(100vh - 56px); overflow-y: auto;
  background: #fff; border-inline-start: 1px solid var(--line, #e3e8ee);
  box-shadow: -6px 0 18px rgba(0,0,0,.07);
}
/* Phone: a config/warning panel is 300px beside the sheet on desktop, which shoves
   the A4 preview off-screen on a phone. Instead open it full-width ABOVE the sheet
   (order:1) and push the sheet down (order:2). Placed after the base panel rules so
   the full-width override wins. */
@media (max-width: 560px) {
  .cs-main { flex-wrap: wrap; }
  .cs-fonts, .cs-gaps {
    flex: 1 1 100%; order: 1; max-height: 68vh;
    box-shadow: none; border-inline: none;
    border-bottom: 1px solid var(--line, #e3e8ee);
  }
  .cs-stage { flex: 1 1 100%; order: 2; }
}
.cs-gaps-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--line, #e3e8ee);
  font-weight: 800; color: #9a6400; position: sticky; top: 0; background: #fff; z-index: 1;
}
.cs-gaps-close { border: none; background: transparent; font-size: 16px; cursor: pointer; color: var(--muted); padding: 2px 7px; border-radius: 6px; line-height: 1; }
.cs-gaps-close:hover { background: var(--head-bg, #eef1f5); }
.cs-gaps-body { padding: 10px 14px 14px; }
.cs-gaps-hint { font-size: 12px; color: var(--muted); margin: 0 0 10px; }
.cs-gaps-group { margin-bottom: 6px; border-bottom: 1px solid var(--line, #eef1f5); padding-bottom: 6px; }
/* The group heading is a collapse/expand toggle. */
.cs-gaps-title {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: transparent; border: none; cursor: pointer; text-align: start;
  font: inherit; font-weight: 700; font-size: 13px; color: var(--text); padding: 6px 0;
}
.cs-gaps-caret { display: inline-block; font-size: 10px; color: var(--muted); transition: transform .15s ease; }
.cs-gaps-group:not(.collapsed) .cs-gaps-caret { transform: rotate(90deg); }
.cs-gaps-group.collapsed ul { display: none; }
.cs-gaps-n { background: #fff4e5; color: #9a6400; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 7px; margin-inline-start: auto; }
.cs-gaps-group ul { list-style: none; margin: 2px 0 6px; padding: 0 20px 0 0; }
.cs-gaps-group li { margin: 3px 0; }
.cs-gap-item { color: var(--brand-700); font-size: 13px; font-weight: 600; cursor: default; padding: 1px 4px; border-radius: 4px; display: inline-block; }
.cs-gap-item:hover { background: rgba(0,113,227,.10); }
.cs-gaps-empty { text-align: center; color: var(--muted); font-weight: 600; padding: 10px; }

/* Hover-target outline: the child's card/row on the sheet, lit from the panel. */
.cs-card.cs-hit { outline: 3px solid #ff8f00; outline-offset: 2px; border-radius: 8px; position: relative; z-index: 2; }
/* Hovering a font picker outlines the text it governs, the same way hovering a name
   in the warnings panel outlines that child. */
.cs-titles.cs-hit, .cs-phones.cs-hit, .cs-table.cs-hit, .cs-staff.cs-hit {
  outline: 3px solid #ff8f00; outline-offset: 3px; border-radius: 8px;
  position: relative; z-index: 2;
}
.cs-table tbody tr.cs-hit { outline: 2px solid #ff8f00; }
.cs-table tbody tr.cs-hit > td { background: #ffeccb; }

/* Useful phone numbers printed at the bottom of the sheet — one centered row,
   items separated by generous ("tab"-like) spacing so it stays on the A4 page. */
.cs-phones { position: relative;   /* the contact note is placed against this row */
  font-family: var(--cs-font-phones, inherit);
  margin-top: auto; padding-top: 8px;    /* pinned to the bottom edge of the page */
  border-top: 1.5px solid var(--brand-200, #cfe3fb);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
/* The gan's number and the useful contacts on one row, the staff on a second. */
.cs-phone-row { display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: center; gap: 4px 46px; }
/* Room at the left for the contact note, and the same at the right so the numbers stay
   centred on the PAGE rather than shifted off it. Without this the note and the
   left-most number sat on top of each other once a gan had a few useful numbers. Only
   the useful row: the staff row is on its own line, below the note. */
.cs-phone-row:not(.cs-phone-staff) { padding-left: 168px; padding-right: 168px; }
.cs-phone-staff { gap: 4px 34px; font-size: .94em; }
/* The role before a staff number in the footer - shown only with "הצגת תפקידי הצוות" on
   (a class on the sheet). Off by default, so the row stays "name - number". */
.cs-staff-rolelabel { color: var(--muted); font-weight: 600; }
.cs-sheet:not(.cs-show-roles) .cs-staff-rolelabel { display: none; }
.cs-phone-item { font-size: calc(11px * var(--cs-size-phones, 1)); color: var(--text); white-space: nowrap; font-weight: 600; }
.cs-phone-item b { font-weight: 800; direction: rtl; }
.cs-phone-gan { color: var(--brand-700); font-weight: 700; }
.cs-phone-gan b { direction: ltr; unicode-bidi: embed; color: var(--brand-700); }

/* Phone numbers are clickable links — they stay tappable when the sheet is
   saved as a PDF and sent to parents — but render exactly like the surrounding
   text (no special colour), so the sheet looks unchanged. */
.cs-phone-link { color: inherit; text-decoration: none; }
.cs-phone-link:hover { text-decoration: underline; }
.cs-parent-phone.cs-phone-link { color: var(--muted); }   /* keep parent phones muted, as before */

/* No page margin: the sheet IS the whole page (the script switches the
   orientation for the photo-less table). */
@page { size: A4 landscape; margin: 0; }
@media print {
  .no-print { display: none !important; }
  /* min-height: 100vh is right on screen and WRONG on paper: it makes the page itself
     exactly one page tall, and Safari on iOS then adds its own margins and its address
     /date/page band on top of that - so the body outlived the paper by a few
     millimetres and printed a second, almost empty page carrying nothing but a strip
     of background. On paper the document should be as tall as the sheet and no taller. */
  .cs-page { background: #fff; min-height: 0; }
  html, body { margin: 0; padding: 0; height: auto; min-height: 0; }   /* @page margin is 0 - nothing may offset the sheet */
  .cs-stage { padding: 0; min-height: 0; }
  .cs-sheet { box-shadow: none; margin: 0; break-inside: avoid; page-break-inside: avoid; }   /* zoom is set by the page script to fit 1 page */
  /* A split class prints as two sheets of paper, so every page but the last ends in a
     break. `:not(:last-child)` rather than a break BEFORE each: a trailing break after
     the only sheet is how a one-page contact sheet comes out of the printer with a
     blank second page. */
  .cs-sheet:not(:last-child) { break-after: page; page-break-after: always; }
  /* The gap that separates the pages on screen is screen furniture; on paper the page
     break does that job, and the gap would push the second sheet down. */
  .cs-stage { gap: 0; }
  .cs-phones { break-inside: avoid; page-break-inside: avoid; }   /* never split the phones off */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---- Role notices (read-only members / a role that just changed) ---- */
/* The badge is a read-only member's permanent way back to the explanation - the
   one-time modal is not enough, the question returns days later. */
.ro-badge { color: #8a6d1f; background: #fff8e6; border: 1px solid #f0d9a0;
  border-radius: 999px; padding: 4px 12px; font-weight: 700; }
.ro-badge:hover { background: #fdf3dc; color: #6b5416; }
.role-notice-box { max-width: 460px; }
.role-notice-box .modal-body p { font-size: 14px; line-height: 1.7; margin: 0 0 10px; }
.role-notice-box .role-note { font-size: 13px; color: var(--muted); }
.role-notice-box .role-note a { color: var(--brand-700); font-weight: 700; }

/* ---- Overview (budget dashboard + birthdays) ---- */
.ov-page { min-height: 100vh; background: var(--bg); color: var(--text); }
.ov-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 22px; background: #fff; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
}
.ov-title { font-weight: 800; font-size: 18px; color: var(--brand-700); }
.ov-doc { padding: 22px; max-width: 1500px; width: 100%; box-sizing: border-box; margin: 0 auto; }
.ov-h2 { font-size: 20px; font-weight: 800; color: var(--text); margin: 6px 0 14px; }
.ov-h2-gap { margin-top: 34px; }
.ov-h3 { font-size: 15px; font-weight: 700; color: var(--muted); margin: 22px 0 10px; }
.ov-note { color: var(--muted); font-size: 13px; margin: 4px 0 0; }

/* Overview budget pie charts */
.ov-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.ov-chart-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 18px;
}
.ov-chart-card .ov-h3 { margin: 0 0 12px; text-align: center; }
.ov-chart { display: flex; justify-content: center; }
.ov-pie { width: 190px; height: 190px; }
.ov-legend { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.ov-leg-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.ov-leg-dot { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.ov-leg-label { flex: 1; }
.ov-leg-row b { color: var(--muted); font-weight: 700; direction: ltr; }

.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.kpi {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.kpi-label { font-size: 13px; color: var(--muted); font-weight: 600; }
.kpi-value { font-size: 24px; font-weight: 800; margin-top: 6px; direction: ltr; text-align: right; }
.kpi-pos .kpi-value { color: var(--brand); }
.kpi-neg .kpi-value { color: var(--danger); }
.kpi-warn { background: #fff8ec; border-color: #f0d9a8; }
.kpi-warn .kpi-value { color: #b7791f; }

.cat-bars { display: flex; flex-direction: column; gap: 8px; }
.cat-row { display: grid; grid-template-columns: 150px 1fr 90px; align-items: center; gap: 10px; }
.cat-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-track { background: #e9edf1; border-radius: 6px; height: 16px; overflow: hidden; }
.cat-fill { height: 100%; background: var(--brand); border-radius: 6px; min-width: 2px; }
.cat-amount { font-size: 13px; font-weight: 700; direction: ltr; text-align: left; }

.bday-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.bday-card {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; box-shadow: var(--shadow-sm);
}
.bday-today { background: var(--brand-050); border-color: var(--brand); }
.bday-icon { font-size: 26px; }
.bday-info { flex: 1; min-width: 0; }
.bday-name { font-weight: 700; font-size: 14px; }
.bday-kind { font-size: 11px; font-weight: 600; color: var(--muted); background: #eef1f5; padding: 1px 7px; border-radius: 999px; margin-inline-start: 4px; }
.bday-date { font-size: 12px; color: var(--muted); margin-top: 2px; }
.bday-when { font-size: 12px; font-weight: 700; color: var(--brand-700); white-space: nowrap; }

/* ---- Legal / compliance pages ---- */
.legal-page { min-height: 100vh; background: var(--bg); color: var(--text); }
.legal-topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 22px; background: #fff; border-bottom: 1px solid var(--line);
}
.legal-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--brand-700); }
.legal-logo { height: 32px; width: 32px; border-radius: 8px; object-fit: cover; }
.legal-doc {
  max-width: 780px; margin: 24px auto; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-sm); padding: 30px 34px; line-height: 1.75;
}
.legal-doc h1 { font-size: 26px; font-weight: 800; color: var(--brand-700); margin: 0 0 16px; }
.legal-doc h2 { font-size: 18px; font-weight: 700; margin: 24px 0 8px; }
.legal-doc ul { padding-inline-start: 22px; }
.legal-doc li { margin: 4px 0; }
.legal-updated { color: var(--muted); font-size: 13px; margin-top: 24px; }
/* Same line, but at the TOP of a document (where its own author put it). */
.legal-updated-top { margin-top: 0; margin-bottom: 18px; }
.legal-links { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); text-align: center; }
/* Contact-us page */
.contact-intro p { font-size: 15px; line-height: 1.75; margin: 0 0 14px; }
.contact-intro .contact-hi { font-size: 20px; font-weight: 800; color: var(--brand-700); margin-bottom: 8px; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 6px; }
.contact-wa { font-size: 16px; font-weight: 700; padding: 12px 22px; border-radius: 12px; text-decoration: none; }
.contact-wa svg { width: 22px; height: 22px; }
.contact-note { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
/* Greetings (ברכות) tab */
.greet-wrap { padding: 6px 4px 24px; max-width: 1000px; margin: 0 auto; }
.greet-head h2 { margin: 0 0 2px; font-size: 20px; color: var(--brand-700); }
.greet-sub { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.greet-controls { display: flex; flex-wrap: wrap; gap: 16px 26px; align-items: flex-start; margin-bottom: 14px; }
.greet-field { display: flex; flex-direction: column; gap: 8px; }
.greet-field > label { font-size: 12px; font-weight: 800; color: #434a52; }
.greet-shapes { display: flex; flex-wrap: wrap; gap: 8px; }
.greet-shape { display: flex; flex-direction: column; align-items: center; gap: 3px; background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 6px 8px 4px; cursor: pointer; font-size: 11px; color: var(--muted); transition: border-color .12s, box-shadow .12s; }
.greet-shape:hover { border-color: #9ecbff; }
.greet-shape.sel { border-color: var(--brand); box-shadow: var(--ring); color: var(--text); font-weight: 700; }
.greet-thumb { width: 52px; height: 52px; }
.greet-modes { display: flex; gap: 8px; }
.greet-mode { background: #fff; border: 2px solid var(--line); border-radius: 10px; padding: 9px 16px; cursor: pointer; font: inherit; font-size: 14px; color: var(--muted); }
.greet-mode:hover { border-color: #9ecbff; }
.greet-mode.sel { border-color: var(--brand); background: var(--brand-050); color: var(--text); font-weight: 700; }
.greet-actions { display: flex; gap: 10px; align-items: center; align-self: flex-end; }
.greet-note { flex-basis: 100%; font-size: 13px; color: var(--muted); min-height: 1em; }
.greet-stage { position: relative; display: flex; justify-content: center; margin-top: 4px; }
.greet-canvas { width: auto; max-width: min(460px, 100%); max-height: 64vh; height: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.greet-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 14px; pointer-events: none; }
/* Compact per-choice dropdown boxes (shape / mode / arrange) - one row on desktop,
   stacked on a phone. The shape box + menu show the shapes themselves. */
.greet-pickers { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 10px; }
.greet-picker { flex: 1 1 170px; min-width: 0; }
.greet-picker-btn { width: 100%; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line-strong); border-radius: 10px; padding: 7px 12px; min-height: 42px; cursor: pointer; font: inherit; }
.greet-picker-btn:hover { border-color: var(--brand); }
.greet-picker-val { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--text); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.greet-picker-lab { font-size: 11px; color: var(--muted); white-space: nowrap; }
.greet-picker-chev { margin-inline-start: auto; color: var(--muted); font-size: 12px; }
.greet-picker-thumb { width: 22px; height: 22px; }
.greet-menu { z-index: 1000; background: #fff; border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.16); padding: 6px; max-height: 60vh; overflow: auto; }
.greet-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: start; background: none; border: 0; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; white-space: nowrap; }
.greet-menu-item:hover { background: var(--brand-050); }
.greet-menu-item.sel { background: var(--brand-050); color: var(--brand-700); font-weight: 700; }
.greet-menu-thumb { width: 30px; height: 30px; }
.greet-menu-shapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.greet-menu-shapes .greet-menu-item { flex-direction: column; gap: 4px; font-size: 12px; text-align: center; white-space: normal; }
@media (max-width: 560px) {
  .greet-pickers { flex-direction: column; }
  .greet-picker { flex: 1 1 auto; }
}
.legal-links a { color: var(--brand-700); text-decoration: none; }
.legal-links a:hover { text-decoration: underline; }

/* Footer legal links on login / public pages (inside white cards) */
.footer-links { margin-top: 18px; text-align: center; font-size: 12px; color: var(--muted); }
.footer-links a { color: var(--brand-700); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.site-footer { padding: 12px 22px; text-align: center; font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); background: #fff; }
.site-footer a { color: var(--brand-700); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* Consent checkbox on upload pages */
.consent { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--text); margin-top: 14px; line-height: 1.5; text-align: right; }
.consent input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--brand); flex: none; }
.consent a { color: var(--brand-700); }
/* The login gate: the same consent row, given room to breathe on its own screen. */
.consent-gate { font-size: 14px; margin: 18px 0 6px; padding: 12px 14px; border-radius: 10px;
  background: #f7f9fc; border: 1px solid var(--line); }
.consent-gate a { font-weight: 700; text-decoration: underline; }
/* Dimmed until the box is ticked - it still submits (the server decides), it just
   should not look like the way forward before consent is given. */
.consent-submit-off { opacity: .55; }
/* A link, not a second button - the browser's default button chrome has to be undone
   explicitly (appearance/padding included) or it reads as the way forward. */
.consent-decline { display: block; margin: 6px auto 0; width: auto;
  -webkit-appearance: none; appearance: none;
  background: none; border: 0; box-shadow: none;
  padding: 14px 16px;                 /* a finger-sized target, not a 24px sliver */
  font: inherit; font-size: 13px; color: var(--muted); text-decoration: underline;
  cursor: pointer; }
.consent-decline:hover { color: var(--danger, #c0392b); }

/* ---- Login ---- */
.login-page {
  display: flex;
  /* Center via margin:auto on the card (below), NOT align/justify-content:center.
     A tall card (e.g. the registration form) overflows the viewport; with
     align-items:center the top is clipped and unscrollable, but auto margins
     collapse to 0 when space is negative, so the card sits at the top and the
     page scrolls to it. Do NOT reintroduce align-items/justify-content:center. */
  min-height: 100vh;
  padding: 24px 20px;
  background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand) 100%);
}
.login-card {
  margin: auto;
  background: #fff;
  padding: 36px 30px;
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,.30);
  width: 350px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}
.login-logo {
  display: block;
  width: 120px;
  max-width: 60%;
  height: auto;
  margin: 0 auto 14px;
  border-radius: 16px;
}
.login-brand { font-size: 23px; font-weight: 800; color: var(--brand-700); text-align: center; }
.login-sub { text-align: center; color: var(--muted); margin-bottom: 22px; font-size: 14px; }
.login-card label { font-size: 13px; font-weight: 700; margin: 12px 0 5px; color: #434a52; }
.login-card input, .login-card select, .login-card .hdp-trigger {
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font-size: 14px;
  background: #fff;
  transition: box-shadow .12s, border-color .12s;
}
.login-card select, .login-card .hdp-trigger { cursor: pointer; }
.login-card .hdp-trigger { text-align: right; width: 100%; box-sizing: border-box; }
.login-card input:focus, .login-card select:focus, .login-card .hdp-trigger:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
/* min-height: these screens are mostly reached from a phone, and 41px is under the
   ~44px a fingertip needs. */
.login-btn { margin-top: 20px; padding: 12px; font-size: 15px; border-radius: 11px;
  min-height: 46px; }
/* Secondary action on the login card (e.g. "בקש להירשם") — an outlined button. */
.login-btn-alt { margin-top: 10px; display: block; text-align: center; text-decoration: none;
  background: #fff; color: var(--brand-700); border: 1.5px solid var(--brand-050); box-shadow: none; }
.login-btn-alt:hover { background: var(--brand-050); }
/* Parent-details form (public upload page). */
.parent-block { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px 12px; margin-top: 12px; background: #fafbfc; }
.parent-block-title { font-size: 12px; font-weight: 800; color: var(--brand-700); margin-bottom: 6px; }
.parent-block input { margin-top: 8px; width: 100%; box-sizing: border-box; }
.parent-block input:first-of-type { margin-top: 0; }
.form-submit-center { display: flex; justify-content: center; }

/* The photo already on file, on the public parent forms: parents asked to SEE it, so
   they can tell that their upload arrived - or that the other parent already did it.
   Thumbnail + a line of text, sitting between the field label and the file input. */
.photo-current { display: flex; align-items: center; gap: 12px; margin: 6px 0 10px;
  padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfc; }
.photo-current[hidden] { display: none; }
.photo-current img { width: 74px; height: 74px; flex: 0 0 74px; border-radius: 10px;
  object-fit: cover; background: #eef1f5; border: 1px solid var(--line); }
.photo-current-txt { font-size: 13px; font-weight: 700; color: var(--brand-700); line-height: 1.5; }
.photo-current-txt .hint { display: block; font-weight: 500; margin-top: 2px; }
/* On the "thank you" screen it is a confirmation, not a field - so it is centered. */
.photo-current-done { justify-content: center; margin-top: 14px; border-style: dashed; }
.photo-current-done .photo-current-txt { font-size: 14px; }
/* Child-details form: each field on its own row — full-width block inputs so the
   label sits above its input (the consent checkbox stays inline). */
.details-form label { display: block; }
.details-form input:not([type="checkbox"]),
.details-form select { display: block; width: 100%; box-sizing: border-box; }
.details-form label.consent { display: flex; }
.form-submit-center .btn { width: auto; min-width: 220px; max-width: 100%; }

/* Searchable child picker (public gan-upload page) - a custom combobox over a
   visually-hidden native <select> (which stays the form value + option source). */
.combo { position: relative; }
/* Kept in the DOM (submits the value, feeds the option list) but out of sight.
   Scoped selector so it beats `.details-form select { display:block; width:100% }`. */
.combo .combo-native { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.combo-control { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; box-sizing: border-box; cursor: pointer; text-align: right;
  padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: 10px;
  background: #fff; font: inherit; font-size: 14px; color: var(--text); }
.combo-control[aria-expanded="true"] { border-color: var(--brand); box-shadow: var(--ring); }
.combo-value { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-value.is-placeholder { color: var(--muted); }
.combo-caret { flex: none; color: var(--muted); font-size: 11px; }
.combo-panel { position: absolute; z-index: 40; top: calc(100% + 4px); inset-inline: 0;
  background: #fff; border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(20,30,50,.16); padding: 8px; }
.combo-search { width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; font-size: 16px;
  border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; color: var(--text); margin-bottom: 6px; }
.combo-search:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.combo-list { list-style: none; margin: 0; padding: 0; max-height: 244px; overflow-y: auto; }
.combo-opt { padding: 12px; border-radius: 7px; cursor: pointer; font-size: 15px; color: var(--text); }
.combo-opt:hover, .combo-opt.active { background: var(--brand-050); }
.combo-empty { padding: 14px 12px 6px; text-align: center; color: var(--muted); font-size: 14px; }
/* "My child is not on the list" - an action, not a name, so it is separated from the
   names above it and never filtered away by the search (see applyFilter). */
.combo-opt-new {
  margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 7px 7px;
  color: var(--brand-700); font-weight: 700;
}

/* ---- Phones: the login / public upload cards ----
   The card is the whole page here, so on a narrow screen it should use the
   width it has instead of keeping desktop padding. Inputs go to 16px because
   iOS Safari auto-zooms into any field smaller than that on focus, and the
   zoomed-in page then scrolls sideways. */
@media (max-width: 560px) {
  .login-page { padding: 16px 12px; }
  .login-card { width: 100%; padding: 24px 18px; border-radius: 16px; }
  .login-logo { width: 96px; margin-bottom: 12px; }
  .login-brand { font-size: 20px; }
  .login-card input:not([type="checkbox"]), .login-card select, .login-card .hdp-trigger { font-size: 16px; padding: 12px; }
  .login-card input[type="file"] { font-size: 14px; }
  .combo-control { font-size: 16px; padding: 12px; }
  .form-submit-center .btn { width: 100%; min-width: 0; }
}
.login-error {
  background: #fdecec;
  color: var(--danger);
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 13px;
  margin-bottom: 6px;
  text-align: center;
  font-weight: 600;
}

/* --- 1:1 profile-photo cropper -------------------------------------------- */
.cropper-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 16px;
}
.cropper-card {
  background: #fff;
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  width: min(92vw, 380px);
  text-align: center;
}
.cropper-title { font-weight: 800; font-size: 17px; color: #1f2937; }
.cropper-hint { font-size: 12px; color: #6b7280; margin: 4px 0 12px; }
.cropper-stage {
  position: relative;
  width: min(78vw, 320px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: #111827;
  touch-action: none;              /* we handle pan/pinch ourselves */
  cursor: grab;
  user-select: none;
}
.cropper-stage:active { cursor: grabbing; }
.cropper-img {
  position: absolute;
  max-width: none;                 /* we size it explicitly in px */
  pointer-events: none;
  -webkit-user-drag: none;
}
/* A circular guide so the uploader sees the profile framing; the saved crop is
   still the full square. */
.cropper-ring {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.28);
  border-radius: 50%;
  outline: 2px solid rgba(255, 255, 255, 0.9);
}
.cropper-zoom { width: 82%; margin: 14px auto 4px; display: block; accent-color: var(--accent, #4f46e5); }
.cropper-actions { display: flex; gap: 10px; margin-top: 10px; }
.cropper-btn {
  flex: 1;
  padding: 11px 12px;
  border-radius: 10px;
  border: none;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.cropper-cancel { background: #eef0f4; color: #374151; }
.cropper-ok { background: var(--accent, #4f46e5); color: #fff; }


/* "עלות בפועל": the expenses control + the per-row balance, on ONE line so row
   height never changes (the dashboard is sized to a fixed height). */
.cell-actual { white-space: nowrap; }
/* .gift-cell-btn is width:100% elsewhere; here it shares the line with the
   balance, so it must size to its content. */
.cell-actual .gift-cell-btn { width: auto; padding: 5px 8px; }
.cell-actual .reimburse-btn { padding: 5px 8px; font-size: 12px; }
.cc-ic { font-size: 11px; }
/* Two tight lines (word / number). line-height is deliberately small so the pair
   stays shorter than the button beside it - that keeps the row height unchanged. */
.cost-bal { display: inline-block; vertical-align: middle; text-align: center;
  font-size: 10px; font-weight: 700; line-height: 1.05; white-space: nowrap;
  cursor: help; margin-inline-end: 6px; }
.cb-word, .cb-num { display: block; }
.cost-bal-ok { color: #1e7a3c; }
.cost-bal-over { color: #c0392b; }

/* ---- גבייה מפייבוקס: the panel that answers "why does it say that?" ------------
   Built to be read under pressure - a committee member is usually standing with a
   parent's message open on their phone - so the two things that settle an argument
   come first: how old the data is, and the payment they are looking for. */
.pb-modal { max-width: 860px; width: 94vw; }
.pb-body { display: flex; flex-direction: column; gap: 12px; }
/* The age of the data, which is the one fact that tells "they have not paid" apart
   from "we have not looked since Tuesday". */
.pb-age { background: var(--soft, #f4f7fb); border-radius: 10px; padding: 9px 12px;
          font-size: 13px; color: var(--muted); line-height: 1.6; }
.pb-age-old { background: #fff6e5; border: 1px solid #f2d19a; color: #8a5a00; }
.pb-upload { border: 1px solid var(--line, #e3e8ee); border-radius: 10px; padding: 10px 12px; }
.pb-upload summary { font-weight: 700; cursor: pointer; color: var(--brand-700); }
.pb-steps { margin: 10px 0 6px; padding-inline-start: 20px; font-size: 13px; line-height: 1.9; }
.pb-note { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.pb-upload input[type=password] {
  display: block; margin: 0; font: inherit; font-size: 13px; }
.pb-pick { margin-top: 4px; }
/* The password step: a field and the button that uses it, side by side, because they
   are one action. Appears only after the file has said it is locked. */
.pb-lock { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
/* Same trap as below - a rule that sets `display` would beat the `hidden` attribute. */
.pb-lock[hidden] { display: none; }
/* A rule that sets `display` beats the `hidden` attribute, so the password field was
   on screen before anybody asked for it. The same trap caught the contact sheet's
   WhatsApp step; anything given a display here needs this beside it. */
.pb-upload input[hidden] { display: none; }
.pb-upload input[type=password] { padding: 7px 10px; border: 1px solid var(--line, #e3e8ee);
  border-radius: 8px; width: 240px; }
.pb-status { margin-top: 8px; font-size: 13px; font-weight: 700; color: var(--brand-700); }
/* The last file's result, right above the list it filled (see lastResult). */
.pb-result { margin: 4px 0 10px; padding: 8px 12px; border-radius: 8px; font-size: 13px;
             font-weight: 700; line-height: 1.5; background: #e6f4ea; color: #1a7a3f; }
/* Phone: the panel's fields at 16px - smaller text makes Safari zoom in on the field
   tapped and stay zoomed (the password field did, and the file's result was then drawn
   out of sight). Same rule as the collection popup's fields. */
@media (max-width: 560px) {
  .pb-modal .pb-upload input[type=password], .pb-modal .pb-search, .pb-modal .pb-child-find { font-size: 16px; }
}
.pb-counts { display: flex; gap: 8px; flex-wrap: wrap; }
/* Each chip is a count AND the way back to what it counts, so it is a real button:
   it takes the pointer, the keyboard and a focus ring like one. */
.pb-chip { background: var(--soft, #f4f7fb); border-radius: 999px; padding: 4px 12px;
           font: inherit; font-size: 13px; border: 1px solid transparent; color: inherit;
           cursor: pointer; }
.pb-chip:hover { border-color: var(--line, #e3e8ee); }
.pb-chip-warn { background: #fff6e5; color: #8a5a00; font-weight: 700; }

/* The earlier-round banner. Same warm amber as every other "a person has to look at
   this" surface on the panel, so it reads as one of them rather than as an error. */
.pb-before { background: #fff6e5; border: 1px solid #f2d19a; border-radius: 10px;
  padding: 11px 13px; margin: 10px 0 4px; display: flex; flex-wrap: wrap;
  align-items: center; gap: 10px; color: #8a5a00; line-height: 1.5; }
.pb-before-txt { flex: 1 1 260px; min-width: 0; }
.pb-before .btn { flex: 0 0 auto; }
.pb-before-note { flex: 1 1 100%; font-size: .86em; opacity: .85; }
/* The selected one has to be obvious at a glance - which list am I looking at? */
.pb-chip-on { background: var(--brand, #0071e3); color: #fff; font-weight: 700;
              border-color: transparent; }
.pb-chip-on.pb-chip-warn { background: #8a5a00; color: #fff; }
/* Reminders: one child per row, collapsed, so a gan with thirty families is a list you
   can scan rather than a page you scroll. <details> does the work - it is keyboard
   accessible and searchable by the browser without any script of ours. */
.pb-rem { padding: 0; }
.pb-rem > .pb-row-head { display: flex; align-items: center; gap: 8px; cursor: pointer;
                         padding: 10px 12px; list-style: none; }
.pb-rem > .pb-row-head::-webkit-details-marker { display: none; }
/* Right to left, a closed row points the way the text runs (\25C2) and turns down open. */
.pb-rem > .pb-row-head::before { content: "\25C2"; font-size: 11px; opacity: .55;
                                 transition: transform .12s; }
.pb-rem[open] > .pb-row-head::before { transform: rotate(-90deg); }
.pb-rem[open] > .pb-row-head { border-block-end: 1px solid var(--line, #e3e8ee); }
.pb-rem > :not(.pb-row-head) { margin: 10px 12px; }
.pb-rem .pb-amt { margin-inline-start: auto; }
/* PayBox lines on a phone: one line each - who, how much, which day - opening on a tap
   (rowCard's `fold`). The same disclosure as the reminders, so it reads as one control. */
.pb-row.pb-fold { padding: 0; }   /* over .pb-row, which comes later */
.pb-fold > .pb-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
                          cursor: pointer; padding: 10px 12px; list-style: none; }
.pb-fold > .pb-row-head::-webkit-details-marker { display: none; }
.pb-fold > .pb-row-head::before { content: "\25C2"; font-size: 11px; opacity: .55;
                                  transition: transform .12s; }
.pb-fold[open] > .pb-row-head::before { transform: rotate(-90deg); }
.pb-fold[open] > .pb-row-head { border-block-end: 1px solid var(--line, #e3e8ee); }
/* A long name gives way, not the amount or the day: the line never wraps. It is cut at
   its OWN end - a PayBox name is often English, and cut the Hebrew way "Dana Hasid" lost
   its first letters ("...na Hasid") - and it still sits against the arrow. */
.pb-fold > .pb-row-head b { flex: 1 1 auto; min-width: 0; overflow: hidden;
                            text-overflow: ellipsis; white-space: nowrap;
                            unicode-bidi: plaintext; text-align: right; }
.pb-fold > .pb-row-head .pb-amt, .pb-fold > .pb-row-head .pb-when { flex: 0 0 auto; white-space: nowrap; }
.pb-fold > .pb-row-head .pb-when { margin-inline-start: 0; }
.pb-fold-body { padding: 4px 12px 10px; }
/* What is still waiting, in a list that holds every kind of line (הכל, a search). */
.pb-state { flex: 0 0 auto; font-size: 11px; font-weight: 700; white-space: nowrap;
            border-radius: 999px; padding: 1px 7px; background: #fff6e5; color: #8a5a00; }
/* ...and the list scrolls with the window on a phone: a scroll box inside a scrolling
   window is a thumb's width of list, and the lines are short enough now to not need it. */
@media (max-width: 560px) {
  .pb-modal .pb-list { max-height: none; overflow: visible; }
}
/* The people the message is for. Their own name is the link. */
.pb-parents { display: flex; flex-wrap: wrap; gap: 8px; }
.pb-wa { display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
         font-weight: 700; padding: 5px 11px; border-radius: 999px;
         background: #e8f7ee; color: #1b6b3a; text-decoration: none; }
.pb-wa:hover { background: #d6f0e1; }
.pb-wa-off { background: var(--soft, #f4f7fb); color: var(--muted, #6b7885);
             font-weight: 600; cursor: help; }
.pb-wa-off::before { content: "\1F6AB"; }
.pb-parents-none { font-size: 13px; color: var(--muted, #6b7885); }
/* The real WhatsApp brand mark on every send pill/button (reminders, personal link, ...)
   instead of the old 💬 glyph. Green on the light pills; white on the solid green buttons. */
.cs-wa-label { font-size: 12.5px; font-weight: 700; color: #5a6472; margin: 14px 0 7px; }
.pb-wa .wa-glyph { width: 15px; height: 15px; fill: #128c3e; vertical-align: -3px; }
.btn-whatsapp .wa-glyph { fill: currentColor; }

.pb-search { width: 100%; padding: 9px 12px; border: 1px solid var(--line, #e3e8ee);
             border-radius: 10px; font: inherit; font-size: 14px; }
.pb-list { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.pb-row { border: 1px solid var(--line, #e3e8ee); border-radius: 10px; padding: 10px 12px; }
/* A line already dealt with is quieter than one still waiting: the eye should land on
   what needs a person. */
.pb-done { background: var(--soft, #f8fafc); }
.pb-row-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.pb-amt { font-weight: 700; font-variant-numeric: tabular-nums; }
.pb-when { color: var(--muted); font-size: 13px; margin-inline-start: auto; }
.pb-said-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
/* The suggestion. Quiet: it is a lead, not a verdict, and the committee decides. */
/* The filter box beside the child list. Narrow, because it is a sieve and not a field
   anybody fills in - the answer still comes out of the select next to it. */
.pb-child-find { font: inherit; font-size: 13px; width: 110px; padding: 5px 9px;
                 border: 1px solid var(--line, #e3e8ee); border-radius: 8px; }
/* The question about a hand-typed amount, asked inside the row it is about. Amber:
   nothing is wrong, but the next press changes a number and only a person knows which
   way. */
.pb-ask { margin-top: 8px; padding: 9px 11px; border-radius: 9px; font-size: 13px;
          line-height: 1.7; background: #fff6e5; border: 1px solid #f2d19a; color: #7a4f00; }
.pb-ask-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.pb-ask .btn { font-size: 13px; padding: 6px 12px; }
/* Why this line is waiting. Stated plainly and without alarm: nothing has gone wrong,
   the system simply will not decide this one on its own. */
.pb-held { font-size: 13px; color: #7a4f00; background: #fff6e5; border-radius: 8px;
           padding: 6px 10px; margin-top: 6px; line-height: 1.6; }
.pb-hint { font-size: 13px; color: var(--brand-700, #0b5cab); background: var(--brand-050, #eaf3ff);
           border-radius: 8px; padding: 6px 10px; margin-top: 6px; line-height: 1.6; }
.pb-said { font-size: 13px; color: var(--muted); }
.pb-phone { direction: ltr; unicode-bidi: embed; }
.pb-where { margin-top: 6px; font-size: 13px; }
.pb-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.pb-actions select, .pb-actions button, .pb-undo-row, .pb-undo-import {
  font: inherit; font-size: 13px; padding: 6px 11px; border-radius: 8px;
  border: 1px solid var(--line, #e3e8ee); background: #fff; cursor: pointer; }
.pb-assign { background: var(--brand) !important; color: #fff; border-color: transparent !important; font-weight: 700; }
.pb-actions button:hover, .pb-undo-row:hover, .pb-undo-import:hover { filter: brightness(.97); }
.pb-undo-row { margin-top: 8px; }
.pb-empty { padding: 18px; text-align: center; color: var(--muted); font-size: 14px; }
.pb-last { font-size: 13px; color: var(--muted); display: flex; align-items: center;
           gap: 8px; flex-wrap: wrap; }
/* The two things you DO to a round, on a row of their own. Both carry words now: as
   bare 12px emoji beside the title, one of them had been found by exactly one person in
   twenty-five gans. The import is the flagship, so it gets the tinted fill; the reminder
   is an outline beside it, because it already draws the eye with its own count. Neither
   competes with the amber "no link yet" button below - that one is a question waiting to
   be answered once, and these are everyday work. */
.pay-coll-do { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center;
               margin-top: 6px; }
.pay-coll-pb, .pay-coll-remind {
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px; border: 1px solid transparent;
}
.pay-coll-pb { background: var(--brand-050, #eaf3ff); color: var(--brand-700, #0b5cab);
               border-color: var(--brand-050, #dbe9fb); }
.pay-coll-pb:hover { border-color: var(--brand); }
/* The two warnings under the money cards. Amber rather than red: nothing is broken -
   the number is true - but it is not the whole story, and the committee is about to
   make a decision on it. */
.bsum-warn { color: #8a5a00; font-weight: 700; }
/* Each round that still has somebody owing, on its own line under "נגבה בפועל", and each
   one is the way to write to them. The card already knew the number; it just did not lead
   anywhere. One line per round also answers "which round?" without ever asking. */
.bsum-remind, .bsum-line { display: block; width: 100%; text-align: start; font: inherit;
                           font-size: inherit; color: inherit; margin: 1px 0; }
.bsum-remind { background: none; border: 0; padding: 1px 0; cursor: pointer;
               border-radius: 6px; }
.bsum-remind:hover { color: var(--brand-700, var(--brand)); text-decoration: underline; }
.bsum-remind:focus-visible { outline: none; box-shadow: var(--ring); }
/* The WhatsApp mark leading each round's "הודעות גבייה להורים" line in the budget card. */
.bsum-parents .wa-glyph { width: 14px; height: 14px; fill: #25d366; vertical-align: -2px;
                          margin-inline-end: 3px; }
.pay-coll-remind { background: transparent; color: var(--muted, #6b7885);
                   border-color: var(--line, #e3e8ee); font-weight: 600; }
.pay-coll-remind:hover { border-color: var(--brand); color: var(--brand-700, var(--brand)); }
/* "להורים" - the single door to the parent messages for a round (general group note +
   private reminders). WhatsApp-green, since every message behind it goes to WhatsApp. */
.pay-coll-parents { display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
  padding: 4px 11px; border-radius: 999px;
  background: #eafaf0; color: #157a3c; border: 1px solid #bfe8cf; }
.pay-coll-parents:hover { border-color: #25d366; background: #dcf5e6; }
.pay-coll-parents .wa-glyph { width: 14px; height: 14px; fill: #25d366; }
/* The chooser popup behind "להורים": two option cards - the general group message, and the
   private per-parent reminders. */
.pm-msg-body { display: flex; flex-direction: column; gap: 11px; }
.pm-msg-modal .modal-head h2 { display: flex; align-items: center; gap: 7px; }
.pm-msg-modal .modal-head .wa-glyph { width: 18px; height: 18px; fill: #25d366; }
.pm-msg-opt { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: start;
  border: 1px solid var(--line-strong); border-radius: 13px; padding: 13px 14px;
  background: #fff; cursor: pointer; font: inherit; color: var(--text); }
.pm-msg-opt:hover { border-color: var(--brand); background: var(--brand-050); }
.pm-msg-opt:disabled { opacity: .55; cursor: default; }
.pm-msg-opt:disabled:hover { border-color: var(--line-strong); background: #fff; }
.pm-msg-general { background: #f1fbf5; border-color: #bfe8cf; }
.pm-msg-general:hover { background: #e7f8ee; border-color: #25d366; }
.pm-msg-ic { font-size: 22px; line-height: 1.1; flex: none; }
.pm-msg-tx { display: flex; flex-direction: column; gap: 2px; }
.pm-msg-ttl { font-size: 14px; font-weight: 800; }
.pm-msg-general .pm-msg-ttl { color: #157a3c; }
.pm-msg-sub { font-size: 12px; color: var(--muted); line-height: 1.5; }
.pm-msg-cnt { font-size: 11px; font-weight: 700; color: var(--brand-700); background: var(--brand-050);
  border-radius: 999px; padding: 1px 8px; margin-inline-start: 6px; }
.pm-msg-cnt-done { color: #157a3c; background: #eafaf0; }
.pm-msg-go { margin-inline-start: auto; align-self: center; color: #b6bdc7; font-size: 18px; }
.pb-msg { width: 100%; margin-top: 8px; font: inherit; font-size: 13px; line-height: 1.7;
          border: 1px solid var(--line, #e3e8ee); border-radius: 8px; padding: 8px 10px;
          resize: vertical; background: #fff; }
.pb-copy { margin-top: 6px; font: inherit; font-size: 13px; padding: 6px 12px;
           border-radius: 8px; border: 0; background: var(--brand); color: #fff;
           font-weight: 700; cursor: pointer; }
.pb-fix-first { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 8px;
                border: 1px solid #d9a441; background: #fff; cursor: pointer; font-weight: 700; }

/* ---- Gan settings ------------------------------------------------------------------
   Sections a committee opens one at a time. <details> does the work, so each heading is
   real: keyboard-reachable, and found by the browser's own page search - which a div
   pretending to be a heading is not. Each summary carries its own STATE ("פתוח כרגע"),
   because the answer to "how is my gan set up?" should be readable without opening
   anything. */
.gs-modal { max-width: 620px; }
.gs-body { display: flex; flex-direction: column; gap: 10px; }
.gs-sec { border: 1px solid var(--line, #e3e8ee); border-radius: 12px; overflow: hidden;
          background: var(--surface, #fff); }
.gs-sec > summary { display: flex; align-items: baseline; gap: 9px; cursor: pointer;
                    padding: 13px 15px; list-style: none; flex-wrap: wrap; }
.gs-sec > summary::-webkit-details-marker { display: none; }
.gs-sec > summary::after { content: "\25B8"; margin-inline-start: auto; font-size: 12px;
                           opacity: .5; transition: transform .14s; }
.gs-sec[open] > summary::after { transform: rotate(-90deg); }
.gs-sec[open] > summary { background: var(--soft, #f4f7fb);
                          border-block-end: 1px solid var(--line, #e3e8ee); }
.gs-sec > summary:hover { background: var(--soft, #f4f7fb); }
.gs-ic { font-size: 17px; }
.gs-title { font-size: 15px; font-weight: 700; color: var(--text); }
.gs-sub { font-size: 13px; color: var(--muted, #6b7885); }
.gs-inner { padding: 14px 15px; display: flex; flex-direction: column; gap: 11px; }
.gs-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.gs-field > span { font-weight: 700; color: var(--text); }
.gs-field input { font: inherit; font-size: 14px; padding: 8px 11px; border-radius: 9px;
                  border: 1px solid var(--line, #e3e8ee); }
.gs-field input:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--brand); }
.gs-field small { color: var(--muted, #6b7885); font-size: 12px; }
.gs-note { margin: 0; font-size: 13px; line-height: 1.7; color: var(--muted, #6b7885); }
.gs-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.gs-actions { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.gs-said { font-size: 13px; font-weight: 700; color: #15753e; }
.gs-said.gs-bad { color: var(--danger, #b3261e); font-weight: 600; }
@media (max-width: 620px) { .gs-sub { flex-basis: 100%; } }

/* "This is how your child will appear" - the preview step shown before a parent form is
   actually sent. The card inside reuses the shared .cs-card partial (same as the sheet). */
.cardprev-overlay {
  position: fixed; inset: 0; background: rgba(20,30,50,.55);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px;
}
.cardprev-box {
  background: #fff; border-radius: 16px; padding: 20px 20px 18px; max-width: 340px;
  width: 100%; box-shadow: 0 10px 40px rgba(0,0,0,.25); text-align: center;
}
.cardprev-lead { font-size: 14px; color: #5a6472; line-height: 1.5; margin-bottom: 14px; }
.cardprev-card-wrap { display: flex; justify-content: center; margin-bottom: 16px; }
.cardprev-card-wrap .cs-card { width: 190px; }
.cardprev-btns { display: flex; gap: 10px; }
.cardprev-btns .btn { flex: 1; margin-top: 0; }
.cardprev-btns .cardprev-back {   /* secondary: outlined, so the confirm stays the primary */
  background: #fff; color: var(--brand-700); border: 1.5px solid var(--brand-050); box-shadow: none;
}
.cardprev-btns .cardprev-back:hover { background: var(--brand-050); }

/* Parent transparency budget rows: one compact line per item (status · title · the amount
   that matters - actual once done, otherwise the plan) plus a small meta line (the date,
   and the PLAN only when it differed from what was actually spent). The old layout stacked
   every cell, so each item ran four lines and the phone page grew endless. */
.pt-list { display: flex; flex-direction: column; }
.pt-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 9px 2px; border-bottom: 1px solid #eef1f5; font-size: 13px;
}
.pt-row:last-child { border-bottom: 0; }
.pt-status { flex: none; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; line-height: 1.4; white-space: nowrap; }
.pt-status.pt-done { color: #2c7a3f; background: #e7f6ec; }
.pt-status.pt-soon { color: #8a5a00; background: #fff4d6; }
.pt-title { flex: 1 1 auto; min-width: 0; font-weight: 600; color: #1d1d1f; }
.pt-title .pt-cat { color: #8a94a2; font-weight: 400; }
.pt-main { flex: none; font-weight: 700; white-space: nowrap; }
.pt-main.pt-actual { color: #2c7a3f; }
.pt-main.pt-planned { color: #1b4b8a; }
.pt-main.pt-none { color: #c1c8d0; }
.pt-meta {
  flex-basis: 100%; box-sizing: border-box; padding-inline-start: 26px;
  font-size: 12px; color: #8a94a2; line-height: 1.4;
}
.pt-meta .pt-var { color: #a35b00; }

/* The two-line stacking (date/details wrapped under the name) is a phone-only measure.
   Desktop keeps every row on ONE line, with the date/details sitting right after the name
   as one "what · when" unit, and the amount pushed to the far end. */
@media (min-width: 561px) {
  .pt-row { flex-wrap: nowrap; }
  .pt-title { flex: 0 1 auto; }
  .pt-meta {
    order: 4; flex: 0 1 auto; min-width: 0;
    flex-basis: auto; padding-inline-start: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pt-meta::before { content: "·"; margin-inline-end: 4px; color: #c1c8d0; }
  .pt-main { order: 6; margin-inline-start: auto; }
}

/* Phone header: the long title and the row of action pills don't fit, so drop the title
   (the logo brands it) and collapse the actions behind a ☰ dropdown. */
@media (max-width: 560px) {
  .topbar { padding: 8px 14px; gap: 10px; position: relative; }
  .topbar .brand span { display: none; }
  .brand-logo { height: 32px; width: 32px; }
  .kg-switch label { display: none; }
  .topbar .spacer { display: none; }
  .topbar-menu-btn {
    display: inline-flex; align-items: center; justify-content: center; margin-inline-start: auto;
    font-size: 20px; line-height: 1; padding: 5px 11px; cursor: pointer; color: var(--text);
    background: none; border: 1px solid var(--line-strong); border-radius: 9px;
  }
  .topbar-actions {
    display: none; position: absolute; top: 100%; left: 8px; right: auto;
    flex-direction: column; align-items: stretch; gap: 2px; min-width: 214px; z-index: 40;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px;
    box-shadow: var(--shadow-md); padding: 8px;
  }
  .topbar-actions.open { display: flex; }
  .topbar-actions .btn-link, .topbar-actions .user { width: 100%; text-align: right; padding: 9px 10px; }
  .topbar-actions .topbar-phone-only { display: block; }
  .topbar-actions .su-tools { flex-direction: column; align-items: stretch; margin: 4px 0 0; gap: 2px; }
  .topbar-actions .su-menu-btn { display: none; }   /* on mobile the items show inline in the ☰ menu */
  .topbar-actions .su-menu { position: static; border: none; box-shadow: none; padding: 0; min-width: 0; }
  .topbar-actions .su-menu[hidden] { display: flex; }
}

/* Phone: bigger touch targets on the toolbar (~44px). */
@media (max-width: 560px) {
  .toolbar .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* The children-intro copy-link button sits on the brand-050 intro card, so a plain
   .btn-secondary (also brand-050) vanishes into it and reads as a link. Give it a white
   fill + border so it reads as a real button on that card. */
.children-intro #ganLinkCopy {
  background: #fff; border: 1px solid var(--brand-200, #cfe3fb); color: var(--brand-700);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.children-intro #ganLinkCopy:hover { background: var(--brand-050, #eef4fe); }

/* Phone: the children list is a full editable grid whose frozen columns (name +
   the big "personal form" button) swallow a phone screen, leaving the data columns
   off to the side. Below 560px each child row becomes a card - the same editable
   inputs, re-stacked as "field: value" lines, name as the title, actions in a
   footer. Desktop keeps the scrollable grid. Scoped to #grid.grid-cards so it
   beats the base grid rules (freeze, zebra) without touching other tabs. */
#grid td.card-head { display: none; }   /* the phone collapse header - hidden on desktop */
.date-fmt { display: none; }   /* the phone-card DD/MM/YY date overlay - shown only in card mode */
/* A panel that belongs to another tab (data-tabs in the markup; applyTabOwnership in
   app.js marks it on every tab switch). !important on purpose: it must win over any
   display a renderer sets inline, so no code path can put one tab's panel on another. */
.off-tab { display: none !important; }
/* Phone: the "הסתר מחוץ לתקציב / בוטל" line in the sticky band, under the summary and
   above the yellow banner (updateHideCancelledBar). Desktop keeps it under "סוג הוצאה". */
.hide-cancelled-bar { display: none; }
/* The band's fold is motion only - someone who asked for less motion gets it instantly. */
@media (prefers-reduced-motion: reduce) {
  #budgetSummary, #budgetSummary .bsum-cards, #budgetSummary .bsum-bar, .hide-cancelled-bar { transition: none !important; }
}
@media (max-width: 560px) {
  .hide-cancelled-bar:not([hidden]) {
    display: block; padding: 7px 14px; font-size: 12px; font-weight: 600; color: var(--text);
    background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    max-height: 48px; overflow: hidden;
    /* the fold's own curve and beat (.bsum-cards), so the line leaves with the cards */
    transition: max-height .5s cubic-bezier(.4, 0, .2, 1), padding .5s cubic-bezier(.4, 0, .2, 1),
                border-width .5s cubic-bezier(.4, 0, .2, 1), opacity .35s ease, visibility .5s;
  }
  .hide-cancelled-bar label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
  .hide-cancelled-bar input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
  /* Cards folded to the sticky bar: the line folds away WITH them and takes no room on the
     screen. To change it, the user opens the bar (which is why it defaults to showing
     everything - a hidden filter must never be hiding rows by surprise). */
  #budgetSummary.bsum-collapsed ~ .hide-cancelled-bar:not([hidden]) {
    max-height: 0; padding-block: 0; border-width: 0; opacity: 0; visibility: hidden;
  }
}

/* Toolbar overflow menu (phone): buttons JS marks .tb-hide fold into "עוד ▾". */
.toolbar .btn.tb-hide { display: none !important; }
.toolbar-more-menu {
  position: fixed; z-index: 1000; background: #fff;
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .16);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
  min-width: 210px; max-width: 82vw;
}
.tbm-item {
  text-align: right; background: none; border: 0; border-radius: 8px;
  padding: 12px 12px; font: inherit; font-size: 15px; color: var(--text);
  cursor: pointer; white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { .tbm-item:hover { background: var(--brand-050); } }   /* mouse only - see .photo-menu-item */
.tbm-item.tbm-danger { color: var(--danger); }
/* A locked toolbar button in the menu (openToolbarMore): greyed, with its reason written
   under it - on a phone there is no hover to show the button's title. */
.tbm-item.tbm-disabled { color: var(--muted); cursor: default; }
.tbm-item.tbm-disabled:hover { background: none; }
.tbm-item .tbm-label, .tbm-item .tbm-reason { display: block; }
.tbm-item .tbm-reason { font-size: 12px; font-weight: 500; margin-top: 2px; white-space: normal; }
.tbm-item .tbm-reason:empty { display: none; }
@media (max-width: 560px) {
  /* the children "missing details?" prompt: title + copy button are enough on a
     phone; the explanatory line is dropped to save vertical space. */
  .ci-hide-mobile { display: none; }
  #grid.grid-cards { width: 100% !important; table-layout: auto !important; display: block; }
  #grid.grid-cards colgroup { display: none; }
  #grid.grid-cards thead { display: none; }
  #grid.grid-cards tbody { display: block; }

  #grid.grid-cards tbody tr:not(.parents-detail-row):not(.group-header):not(.group-addrow):not(.grid-addrow):not(.done-fold) {
    display: flex; flex-direction: column;
    border: 1px solid var(--line); border-radius: 12px;
    margin: 0 0 12px; background: var(--surface, #fff); overflow: hidden;
  }
  #grid.grid-cards tbody tr.parents-detail-row { display: block; margin: -12px 0 12px; }
  /* Planned's add-row buttons stay plain full-width rows. */
  #grid.grid-cards tbody tr.group-addrow,
  #grid.grid-cards tbody tr.grid-addrow { display: block; border: 0; margin: 0 0 10px; background: transparent; }
  #grid.grid-cards tbody tr.group-addrow > td,
  #grid.grid-cards tbody tr.grid-addrow > td { display: block; width: 100%; border: 0; padding: 0; background: transparent; }
  /* The group header is a clear tinted SECTION BAR - bolder and more prominent than the
     white item cards inside it, so it reads as the thing that binds them, not a peer. */
  /* Each group is a .grp-box "fence": a thin-bordered rounded box holding the tinted
     header bar at the top and, indented inside it, the item cards - which look exactly
     like the children/staff cards. So a category visibly encloses its rows. */
  /* No overflow:hidden here: it would trap the sticky header (below) in a non-scrolling
     box so it never sticks. The child cards are inset by their own margin, so nothing
     reaches the corners anyway - only the header, whose own top corners are rounded. */
  #grid.grid-cards tbody .grp-box {
    display: block; border: 1px solid var(--brand-200, #cfe3fb);
    border-radius: 12px; margin: 6px 0 12px;
    background: var(--surface, #fff);
  }
  /* The group name sticks to the top while its rows scroll under it, so a committee always
     sees which category they are in. The <tr> is display:contents so the <td> itself is the
     sticky block, a direct child of the box - WebKit does not honour sticky on a
     block-ified <tr>, but it does on this plain block. It stays within its own box (sticky
     releases with the box), and z-index keeps it above the cards passing beneath. */
  #grid.grid-cards tbody .grp-box tr.group-header { display: contents; margin: 0; }
  #grid.grid-cards tbody .grp-box tr.group-header > td {
    display: block; width: 100%; padding: 0; border: 0; border-radius: 11px 11px 0 0;
    background: var(--brand-050, #eef4fb);
    /* !important to beat the blanket `td { position: relative !important }` that un-freezes
       the # column in card mode - without it the header cannot be sticky. */
    position: sticky !important; top: 0; z-index: 4;
  }
  /* A collapsed group is only its header, so it takes the box's full rounding. */
  #grid.grid-cards tbody .grp-box.grp-collapsed tr.group-header > td { border-radius: 11px; }
  #grid.grid-cards tbody .grp-box tr.group-header.approved > td { background: #dce6fe; }
  #grid.grid-cards tbody .grp-box:not(.grp-collapsed) tr.group-header > td { border-bottom: 1px solid var(--brand-200, #cfe3fb); }
  #grid.grid-cards tbody tr.group-header .gh-main { display: flex; align-items: center; width: 100%; padding: 12px 14px; }
  #grid.grid-cards tbody tr.group-header .gh-name { font-size: 15px; font-weight: 800; }
  #grid.grid-cards tbody tr.group-header .gh-count { margin-inline-start: auto; text-align: end; }
  /* item rows inside the box: the normal card look, inset from the box (the "indent") */
  #grid.grid-cards tbody tr.grp-child { margin: 8px 10px !important; }
  /* Pre-approval, the post-approval fields (אחראי.ת / עלות בפועל) are hidden in the
     desktop table - hide them in the phone card too (the id beats the card td rule). */
  #grid.grid-cards.pre-approval tbody td.col-post-approval { display: none; }
  /* Planned date: the native input renders in the device locale ("Mar 9" on an English
     phone). Lay it invisibly over the whole cell (still tappable → opens the picker) and
     show our own DD/MM/YY label in the flow, beside the "תאריך" heading. */
  #grid.grid-cards tbody td.td-datefmt .cell-input { position: absolute; inset: 0; opacity: 0; }
  /* Reads exactly like every other card value - "תיאור" included: hugs the start (right),
     the inputs' own 10px/12px padding (same inset, same row height) and their font size.
     direction:ltr only keeps the digits in order (05/01/27); text-align:right places it. */
  #grid.grid-cards tbody td.td-datefmt .date-fmt {
    display: block; flex: 1 1 auto; text-align: right; direction: ltr; padding: 10px 12px;
    color: var(--text); font-size: inherit;
  }

  /* position: relative, not static - it cancels the desktop freeze (sticky + a right
     offset) AND keeps every cell the anchor of what is drawn inside it: the cancelled
     row's strike line, the date field's invisible input. A static cell handed those to
     the whole screen - every struck row's line landed mid-screen and stayed there while
     the list scrolled, and the struck rows themselves showed none. */
  #grid.grid-cards tbody td {
    position: relative !important; right: auto !important;
    display: flex; align-items: center; justify-content: flex-start; gap: 10px;
    width: auto !important; min-width: 0; z-index: auto;
    border: 0; border-bottom: 1px solid var(--line);
    padding: 9px 12px; overflow: visible; background: var(--surface, #fff);
  }
  /* neutralise the id-level zebra so cells inside a card share one background */
  #grid.grid-cards tbody tr:not(.parents-detail-row) td:nth-child(even):not(.actions) { background: var(--surface, #fff); }

  /* A numeric cell (.cell-num) is LTR for its digits - but on a card it is also the
     "label: value" row, and an LTR row put the label on the LEFT (עלות משוערת / עלות
     בפועל did). The row stays RTL like every field; only the value keeps LTR digits. */
  #grid.grid-cards tbody td.cell-num { direction: rtl; }
  #grid.grid-cards tbody td.cell-num > * { direction: ltr; }
  #grid.grid-cards tbody td[data-label]::before {
    content: attr(data-label); flex: 0 0 auto;
    font-weight: 700; font-size: 13px; color: var(--text);
  }
  #grid.grid-cards tbody td .cell-input,
  #grid.grid-cards tbody td .cell-select,
  #grid.grid-cards tbody td textarea {
    flex: 1 1 auto; width: auto; min-width: 0; text-align: right; text-overflow: ellipsis;
  }
  /* Phone numbers read left-to-right (tel inputs, or any column named "phone"). */
  #grid.grid-cards tbody td input[type="tel"],
  #grid.grid-cards tbody td[data-col="phone"] .cell-input { text-align: left; direction: ltr; }

  #grid.grid-cards tbody td.rownum { display: none !important; }

  /* collapsible: a tappable name header fronts each card; the rest folds away.
     space-between puts the name at the RTL start (right) and the chevron far left. */
  #grid.grid-cards tbody td.card-head {
    display: flex; order: -5; align-items: center; justify-content: space-between; gap: 10px;
    cursor: pointer; padding: 13px 12px; background: var(--soft, #f4f7fb);
    font-size: 17px; font-weight: 800; color: var(--text); border-bottom: 0;
  }
  #grid.grid-cards tbody td.card-head::before { display: none; }
  #grid.grid-cards tbody td.card-head .card-head-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
  #grid.grid-cards tbody td.card-head .card-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #grid.grid-cards tbody td.card-head .card-head-photo {
    width: 42px; height: 42px; flex: 0 0 auto; object-fit: cover;
    border-radius: 9px; border: 1px solid var(--line); background: #fff;
  }
  #grid.grid-cards tbody td.card-head .card-chev { color: var(--brand, #2f6fd0); font-size: 14px; flex: 0 0 auto; }
  #grid.grid-cards tbody tr.card-open td.card-head { border-bottom: 1px solid var(--line); }

  /* Planned: a two-line header (title + cost, then a muted meta line) instead of one name. */
  #grid.grid-cards tbody td.card-head.card-head-2line { align-items: center; }
  #grid.grid-cards tbody td.card-head.card-head-2line .card-head-main {
    flex: 1 1 auto; flex-direction: column; align-items: stretch; gap: 3px;
  }
  #grid.grid-cards tbody td.card-head .card-line1 {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  }
  #grid.grid-cards tbody td.card-head.card-head-2line .card-name {
    font-size: 15px; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  #grid.grid-cards tbody td.card-head .card-cost {
    font-size: 14px; font-weight: 800; color: var(--brand, #2f6fd0); white-space: nowrap; flex: 0 0 auto;
  }
  #grid.grid-cards tbody td.card-head .card-sub {
    font-size: 12px; font-weight: 600; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* A cancelled row's header is two lines, so the cell's mid-height strike ran BETWEEN
     them, like an underline. Strike the text itself instead, in the desktop line's red. */
  #grid.grid-cards tbody tr.row-cancelled td.card-head::after { display: none; }
  #grid.grid-cards tbody tr.row-cancelled td.card-head .card-name,
  #grid.grid-cards tbody tr.row-cancelled td.card-head .card-cost,
  #grid.grid-cards tbody tr.row-cancelled td.card-head .card-sub {
    text-decoration: line-through; text-decoration-color: rgba(224, 57, 46, .6); text-decoration-thickness: 1.5px;
  }
  /* The plan card's meta line with the expenses shortcut at its end (buildCardExpenses). */
  #grid.grid-cards tbody td.card-head .card-line2 {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0;
  }
  #grid.grid-cards tbody td.card-head .card-line2 .card-sub { flex: 1 1 auto; min-width: 0; }
  .card-exp {
    flex: 0 0 auto; font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer;
    padding: 3px 9px; border-radius: 999px; border: 1px solid var(--brand-200, #cfe3fb);
    background: var(--brand-050); color: var(--brand-700);
  }
  .card-exp.has { background: var(--surface); border-color: var(--line-strong); color: var(--text); }
  /* Locked (a done row, a read-only member): information only - a tap on it goes through
     to the header and opens the card, like anywhere else on it. */
  .card-exp:disabled { cursor: default; pointer-events: none; }
  /* The approved plan's "בוצע" check at the start of the card header (buildDoneCircle);
     the footer's ✓ would repeat it, so it goes. */
  .card-done {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; padding: 0; cursor: pointer;
    border: 2px solid #2e9e4f; background: #fff; color: #fff;
    font: inherit; font-size: 16px; font-weight: 800; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .card-done.on { background: #2e9e4f; }
  .card-done:disabled { cursor: default; pointer-events: none; }   /* read-only: a tap opens the card */
  .card-done:disabled:not(.on) { border-color: var(--line-strong); }
  /* Settled past-cancelled card: a grey filled ✓ (not green), and a grey strike (not red). */
  .row-done-cancelled .card-done { border-color: #9aa3ac; background: #9aa3ac; color: #fff; }
  #grid.grid-cards tbody tr.row-done-cancelled td.card-head .card-name,
  #grid.grid-cards tbody tr.row-done-cancelled td.card-head .card-cost,
  #grid.grid-cards tbody tr.row-done-cancelled td.card-head .card-sub {
    text-decoration-color: rgba(120, 128, 138, .75);
  }
  #grid.grid-cards tbody td.actions .done-btn { display: none; }
  /* The done line (buildDoneFold): one tappable line in place of the done rows. */
  #grid.grid-cards tbody tr.done-fold { display: block; margin: 0 0 12px; }
  #grid.grid-cards tbody tr.done-fold > td { display: block; width: 100%; padding: 0; border: 0; background: transparent; }
  .done-fold-btn {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font: inherit; font-size: 15px; font-weight: 800; color: #1a7a3f; text-align: right; cursor: pointer;
    padding: 13px 14px; border-radius: 12px; border: 1px dashed #9fd3ae; background: #e6f4ea;
  }
  #grid.grid-cards:not(.done-fold-open) tbody tr.in-done-fold { display: none !important; }
  /* A card on its way out (to the done line, or back out of it): it folds away. */
  #grid.grid-cards tbody tr.card-leaving {
    overflow: hidden; opacity: 0; margin-bottom: 0; border-width: 0;
    transition: max-height .25s ease, opacity .2s ease, margin .25s ease, border-width .25s ease;
  }
  /* folded card = just the header row. The parents-detail row is a separate <tr> and
     must be exempt, or its cell would be hidden here even after the toggle opens it. */
  #grid.grid-cards tbody tr:not(.card-open):not(.parents-detail-row):not(.group-header):not(.group-addrow):not(.grid-addrow):not(.done-fold) td:not(.card-head) { display: none; }

  /* name fields lead once the card is opened (still editable inputs) */
  #grid.grid-cards tbody td[data-col="first_name"] { order: -2; }
  #grid.grid-cards tbody td[data-col="last_name"] { order: -1; }

  #grid.grid-cards tbody td.parents-summary { order: 50; }

  /* the inline parents panel opens between the summary (50) and the footer (90) */
  #grid.grid-cards tbody td.parents-inline {
    order: 60; display: block; width: 100%;
    border: 0; border-top: 1px solid var(--line);
    padding: 8px 12px 12px; background: var(--surface, #fff);
  }

  /* photo: keep the "תמונה" label on the right like the rest, but centre the thumbnail */
  #grid.grid-cards tbody td[data-col="photo"] > * { margin-inline: auto; }

  #grid.grid-cards tbody td.actions {
    order: 90; justify-content: center; flex-wrap: wrap; gap: 8px;
    border-bottom: 0; border-top: 1px solid var(--line);
    background: var(--soft, #f4f7fb); padding: 10px 12px;
  }
  #grid.grid-cards tbody td.actions::before { display: none; }

  #grid.grid-cards tbody tr.parents-detail-row td {
    display: block; border: 0; padding: 0 12px 12px; background: var(--surface, #fff);
  }
  /* The parents editor is a 5-column grid (~450px) - too wide for a phone. Stack it:
     one field per line, each parent under its own "הורה א׳/ב׳" heading. The shared
     column-head row and the alignment corners drop; the placeholders name the fields. */
  #grid.grid-cards .parents-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
  #grid.grid-cards .parents-grid-head,
  #grid.grid-cards .parents-grid-corner { display: none; }
  #grid.grid-cards .parents-grid-title { padding-inline: 0; margin-top: 6px; }
  #grid.grid-cards .parents-grid-act { justify-content: flex-start; }
}