: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;
}
body { display: block; }
/* The whole dashboard is inside #appScale so JS can apply a Chrome-like zoom
(to keep ~10 grid rows visible) without breaking body-level modals/menus,
which are appended to OUTSIDE this wrapper. */
#appScale { display: flex; flex-direction: column; height: 100vh; 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); }
.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; }
.btn-danger-link:hover { background: rgba(224,57,46,.12); border-color: var(--danger); }
/* Kindergarten switcher */
.kg-switch { display: flex; align-items: center; gap: 8px; }
.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;
}
/* ---- 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); }
.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); }
/* 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;
}
.tab-picker-row:hover { background: var(--head-bg); }
.tab-picker-row input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
/* ---- 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;
}
.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); }
.btn-secondary { background: var(--brand-050); color: var(--brand-700); box-shadow: none; }
.btn-secondary:hover { background: #dbeafd; }
/* "מחיקת תקציב" — 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,") 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; }
.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 ; 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); }
.grid thead th.rownum, .grid tbody td.rownum {
width: 46px;
text-align: center;
color: var(--muted);
background: var(--head-bg);
position: sticky;
right: 0;
z-index: 1;
font-variant-numeric: tabular-nums;
border-left: 1px solid var(--line);
}
.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); }
/* 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; }
/* 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: one-line preview, expands (multi-line) while focused. */
.cell-text-preview { height: 38px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-text-preview:focus { white-space: pre-wrap; overflow: auto; position: relative; z-index: 3; }
/* Read-only / derived long text: show the full wrapped content. */
.cell-text-full { white-space: pre-wrap; overflow: hidden; }
.cell-input { text-overflow: ellipsis; }
.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: 12.5px; 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. */
.grid th.col-text, .grid td.col-text { min-width: 170px; }
/* 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); }
/* 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: #f2f7f2; } /* approved group: calm green-grey */
.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: 13.5px; }
.gh-count { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.group-header.approved .gh-name { color: #4a7a52; }
.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; }
/* 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); }
/* "➕ הוסף שורה לקבוצה" 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: 11.5px; 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;
}
/* 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: 320px; overflow-y: auto; }
/* 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;
}
.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;
}
.photo-menu-item:hover { background: var(--brand-050); }
.photo-menu-item.danger { color: var(--danger); }
.photo-menu-item.danger:hover { background: #fdecec; }
.photo-menu-item .pm-ic { font-size: 15px; }
/* 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;
}
.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; }
/* 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: 15px;
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); }
/* --- 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 (גבייה ותשלומים) ----------------------- */
.pay-wrap { padding: 4px 2px 24px; }
.pay-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.pay-head h2 { margin: 0; font-size: 20px; color: var(--brand-700); }
.pay-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.pay-table { border-collapse: collapse; width: 100%; }
.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: 600; white-space: nowrap;
position: sticky; inset-inline-start: 0; background: var(--surface); z-index: 1;
}
.pay-table thead .pay-name-col { background: var(--head-bg); }
.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: var(--brand-700); }
.pay-coll-date { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pay-coll-amt { font-size: 12px; color: var(--text); margin-top: 2px; font-weight: 600; }
.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: 8px; }
.pay-check { width: 20px; height: 20px; cursor: pointer; accent-color: var(--brand); }
.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 {
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 input:focus { outline: none; box-shadow: var(--ring); border-color: var(--brand); }
.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; }
/* 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; white-space: nowrap; }
/* 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; }
.gd-title { font-weight: 700; color: var(--brand-700); font-size: 15px; margin-bottom: 12px; }
.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-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-row { display: grid; grid-template-columns: 1.1fr 0.7fr 1.3fr auto auto; gap: 8px; align-items: center; }
.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); }
.reimb-summary { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-weight: 700; font-size: 14px; }
.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; }
/* 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: 15px; 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; }
/* 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: 15px; }
.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: 12.5px; }
.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); }
/* 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; }
.sched-tip {
position: fixed; z-index: 1300; display: none;
background: #171a1f; color: #fff;
border-radius: var(--radius-sm); padding: 8px 11px;
font-size: 12.5px; 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: 15px; 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 {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0 0 14px;
}
.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-label { color: var(--muted); font-size: 11.5px; font-weight: 600; margin-bottom: 3px; }
.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; }
.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); }
/* Staff-count card hover breakdown */
.bsum-staff { position: relative; cursor: default; }
.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;
}
.bsum-staff:hover .bsum-tip { display: block; }
.bsum-tip-table { width: 100%; border-collapse: collapse; }
.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 */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; 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 { gap: 6px; margin: 0 0 8px; }
.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; }
}
.upload-msg { text-align: center; color: var(--muted); line-height: 1.7; font-size: 15px; margin-top: 6px; }
.login-card .hint { color: var(--muted); font-weight: 500; font-size: 12px; }
.login-card input[type="file"] {
padding: 10px;
border: 1px dashed var(--line-strong);
border-radius: 10px;
background: #fafbfc;
font-size: 13px;
}
/* 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; }
/* 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; }
/* 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;
padding: 14px 20px; background: #fff; border-bottom: 1px solid var(--line);
position: sticky; top: 0; z-index: 5;
}
.btn-link-dark { color: var(--brand-700); text-decoration: none; font-weight: 600; font-size: 14px; }
.btn-link-dark:hover { text-decoration: underline; }
.cs-stage { padding: 20px; display: flex; justify-content: center; }
.cs-sheet {
width: 1040px; /* A4-landscape printable width @96dpi */
min-height: 735px; /* one page */
box-sizing: border-box;
position: relative; /* anchor the top-corner logo */
display: flex; flex-direction: column; /* lets the phones footer sit at the bottom */
background: linear-gradient(180deg, #eaf3fb 0%, #f6eef6 100%);
padding: 16px 20px; /* 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; }
/* 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). */
.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-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; }
.cs-header { display: flex; align-items: center; justify-content: center; margin: 0 0 12px; }
.cs-logo { position: absolute; bottom: 16px; right: 20px; height: 42px; width: 42px; object-fit: cover; border-radius: 11px; }
.cs-titles { text-align: center; }
.cs-header h1 { font-size: 28px; font-weight: 900; color: var(--brand-700); margin: 0; letter-spacing: .5px; }
.cs-subtitle { font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 2px; }
/* Flex + center so an incomplete last row is centered horizontally */
.cs-grid { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; 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 */
.cs-name { font-weight: 800; font-size: 11px; margin-top: 4px; color: var(--text); }
.cs-birth { font-size: 9px; color: var(--muted); margin-top: 1px; }
.cs-parents { margin-top: 4px; }
.cs-parent { font-size: 8px; 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: " "; }
/* 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 {
margin-top: auto; padding-top: 8px; border-top: 1.5px solid var(--brand-200, #cfe3fb);
display: flex; flex-wrap: wrap; align-items: baseline;
justify-content: center; gap: 4px 46px;
}
.cs-phone-item { font-size: 11px; 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 */
@page { size: A4 landscape; margin: 6mm; }
@media print {
.no-print { display: none !important; }
.cs-page { background: #fff; }
.cs-stage { padding: 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 */
.cs-phones { break-inside: avoid; page-break-inside: avoid; } /* never split the phones off */
* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* ---- 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; }
.legal-links { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); text-align: center; }
.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: 12.5px; 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); }
/* ---- Login ---- */
.login-page {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand) 100%);
}
.login-card {
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 {
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 { cursor: pointer; }
.login-card input:focus, .login-card select:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.login-btn { margin-top: 20px; padding: 12px; font-size: 15px; border-radius: 11px; }
/* 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: 12.5px; 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; }
/* 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; }
.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: 12.5px; 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; }