/* רישום — dual theme. DARK (default) = the navy dashboard ported from the 575live backoffice (/admin). LIGHT = the previous light/green financial design, kept verbatim. Dark is the default so it lives on plain :root and the common case paints with no flash; light is a [data-theme="light"] override, applied by a tiny script in index.html before the stylesheet paints. Every component rule below reads tokens only — no rule hard-codes a surface colour — so the two themes stay in step by construction. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Assistant:wght@300;400;500;600;700&family=Heebo:wght@400;500;600;700;800&display=swap'); /* ============================ DARK (default) ============================ */ :root { --paper: #0D1B2A; --card: #152238; --card-alt: #1B2D47; --bg-input: #1B2D47; --input-bg: #1B2D47; --readonly-bg:#16253C; --hover: #223A5C; --zebra: rgba(27,45,71,.45); --row-hover: #1B2D47; --placeholder:#5C6F87; --bar: #0F1F36; --ink: #E4E9F0; --ink-strong: #FFFFFF; --ink-muted: #7A8DA6; --muted: #7A8DA6; /* alias — app.js writes var(--muted) inline in three places */ --line: #1E3A5F; --line-strong:#2A4A75; --brand: #1A90FF; --brand-hov: #1478D4; /* ק rows in סיכום הנהלה — capital, never profit, so they read blue wherever they appear. Deliberately NOT --brand: that is blue on dark but GREEN on light (#06564D), so the capital rows changed colour with the theme and stopped reading as one thing. */ --capital: #1A90FF; --btn-bg: linear-gradient(135deg, #1A90FF, #1478D4); --btn-bg-hov: linear-gradient(135deg, #1478D4, #0F5DB3); --btn-ink: #FFFFFF; --accent: #00C853; --accent-ink: #042E17; --accent-hov: #00B24A; --danger: #FF1744; --danger-hov: #E00034; --danger-bg: rgba(255,23,68,.12); --danger-line:rgba(255,23,68,.38); --danger-ink: #FF6B85; --success: #00C853; --success-bg: rgba(0,200,83,.12); --success-ink:#4ADE80; --warn: #FFAB00; --warn-bg: rgba(255,171,0,.13); --warn-bg-hov: rgba(255,171,0,.22); /* מורווח — light purple. A giveback is neither a warning nor an approval, so it takes a colour of its own rather than borrowing one that already means something else. Light-on-both: a pale purple chip reads the same against the dark card and the white one. */ --violet-bg: #DDD6FE; --violet-ink: #4C1D95; --violet-hov: #C4B5FD; /* דחה חשבון — brown. Pushing a bill to another day is not destructive and not an approval. */ --defer-bg: #FFAB00; --defer-ink: #3D2600; --defer-hov: #E09600; --warn-ink: #FFC24D; --info-bg: rgba(26,144,255,.12); --info-ink: #6BB8FF; --info-line: rgba(26,144,255,.32); --partial-bg: rgba(255,171,0,.20); --partial-ink:#FFD27A; --partial-line:rgba(255,171,0,.45); --closed-bg: #223A5C; --closed-ink: #A8B8CC; --rollover-ink:#042E17; /* baby blue — בקשות פתוחות, identical in both themes: it is the one button meant to stand out */ --focus: #1A90FF; --focus-ring: rgba(26,144,255,.20); /* שלח (PDF export) — its own token so the light theme can carry a light blue without touching --brand, which drives the menu numerals and every primary button. */ --send-bg: #1A90FF; --send-ink: #FFFFFF; --selection: rgba(26,144,255,.35); --scroll-thumb: #2A4A75; --scroll-thumb-hov: #35608F; --date-filter: invert(1) opacity(.65); --shadow-sm: 0 1px 2px rgba(0,0,0,.35); --shadow-md: 0 6px 20px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25); --shadow-btn: 0 1px 2px rgba(0,0,0,.30); --radius: 16px; --radius-sm: 10px; --radius-lg: 22px; --thead-bg: #0F2844; --thead-ink: #FFFFFF; } /* ============================ LIGHT ============================ */ :root[data-theme="light"] { --paper: #F1F4F6; --card: #FFFFFF; --card-alt: #F7F9FA; --bg-input: #FFFFFF; --input-bg: #FFFFFF; --readonly-bg:#F1F3F5; --hover: #EDF1F3; --zebra: #FBFCFD; --row-hover: #EEF4F3; --placeholder:#9AA6B2; --bar: transparent; --ink: #16191D; --ink-strong: #0A0C0F; --ink-muted: #67717E; --muted: #67717E; --line: #E3E8EC; --line-strong:#CBD3DA; --brand: #06564D; --brand-hov: #04443D; --capital: #1565C0; --btn-bg: #06564D; --btn-bg-hov: #04443D; --btn-ink: #FFFFFF; --accent: #25D366; --accent-ink: #05372F; --accent-hov: #1FC55D; --danger: #B91C1C; --danger-hov: #991919; --danger-bg: #FEE2E2; --danger-line:#FECACA; --danger-ink: #991B1B; --success: #065F46; --success-bg: #D1FAE5; --success-ink:#065F46; --warn: #B45309; --warn-bg: #FEF3C7; --warn-bg-hov: #FDE68A; --violet-bg: #DDD6FE; --violet-ink: #4C1D95; --violet-hov: #C4B5FD; /* Brown proper on the light theme, with cream ink: --warn is already dark here, so the dark brown ink the dark theme uses would sit on it with almost no contrast. */ --defer-bg: #B45309; --defer-ink: #FFF7ED; --defer-hov: #92400E; --warn-ink: #92400E; --info-bg: #DBEAFE; --info-ink: #1E40AF; --info-line: #BFDBFE; --partial-bg: #FDE68A; --partial-ink:#7C2D12; --partial-line:#FCD34D; --closed-bg: #E5E7EB; --closed-ink: #374151; --rollover-ink:#FFFFFF; --focus: #0E8F7E; --focus-ring: rgba(14,143,126,.16); --send-bg: #A8D8F0; /* light blue */ --send-ink: #0B3B52; --selection: rgba(37,211,102,.28); --scroll-thumb: #CBD3DA; --scroll-thumb-hov: #A9B4BF; --date-filter: none; --shadow-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.04); --shadow-md: 0 6px 18px rgba(16,24,40,.07), 0 2px 6px rgba(16,24,40,.04); --shadow-btn: 0 1px 2px rgba(16,24,40,.08); --radius: 16px; --radius-sm: 10px; --radius-lg: 22px; --thead-bg: #F7F9FA; --thead-ink: #67717E; } /* ======================= SHARED METRICS (both themes) ======================= Sizing, weights and typefaces are identical in light and dark — the two themes differ in COLOUR only. Declared once here, after both token blocks and covering both selectors, so a value cannot be changed for one theme and forgotten in the other. These previously diverged, which is what made dark mode look differently proportioned: it used a 10px button radius against light's 12px, uppercase table headers at a lighter weight, a 1px hover lift, and Inter in front of Assistant. Inter and Assistant have different metrics, so the same 14.5px text rendered at visibly different sizes between the themes. */ :root, :root[data-theme="light"] { --radius-btn: 12px; --btn-lift: 0px; --thead-transform: none; --thead-spacing: 0.04em; --thead-weight: 700; --font-serif: "Heebo", "Assistant", -apple-system, "Segoe UI", Arial, sans-serif; --font-sans: "Assistant", "Heebo", -apple-system, "Segoe UI", Arial, sans-serif; } * { box-sizing: border-box; } html, body { height: 100%; } html { -webkit-text-size-adjust: 100%; } /* Nothing is allowed to scroll the PAGE sideways. The tables below are made to fit rather than to overflow, so this is a backstop for one long word or a stray wide element — not the fix itself. Both elements need it: on iOS, overflow-x on body alone still lets html scroll. */ html, body { overflow-x: hidden; max-width: 100%; } /* A long name, note or URL must wrap instead of widening its container. */ body { overflow-wrap: break-word; } /* Removes the ~300ms tap delay and the grey flash on tap. */ button, .btn, .vbox, a, select, input[type="checkbox"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } body { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.55; color: var(--ink); background: var(--paper); direction: rtl; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; transition: background 200ms, color 200ms; } /* Typography */ h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--ink-strong); font-weight: 700; letter-spacing: -0.02em; margin: 0; } h2 { font-size: 24px; line-height: 1.25; margin-bottom: 20px; font-weight: 700; } h3 { font-size: 16px; line-height: 1.35; margin: 22px 0 10px; color: var(--ink); font-weight: 600; letter-spacing: -0.005em; } p { margin: 0 0 12px; } /* Layout shell */ #app { max-width: 760px; margin: 0 auto; padding: 24px 20px 48px; } /* Header */ header.top { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: var(--bar); border-bottom: 1px solid var(--line); margin: 0 -20px 24px; padding-inline: 24px; } header.top .brandwrap { display: flex; align-items: center; gap: 10px; min-width: 0; } header.top .title { font-family: var(--font-serif); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--brand); } header.top .who { color: var(--ink-muted); font-size: 13px; } header.top button { background: var(--card-alt); color: var(--ink); border: 1px solid var(--line); padding: 7px 14px; border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; font-family: var(--font-sans); transition: background 150ms, border-color 150ms; } header.top button:hover { background: var(--hover); border-color: var(--line-strong); } /* Theme switch — sits beside the רישום headline */ header.top button.theme-toggle { padding: 0; width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; border-radius: 999px; } header.top button.theme-toggle:hover { border-color: var(--brand); } /* Card container */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin-bottom: 16px; box-shadow: var(--shadow-md); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 16px; border-radius: var(--radius-btn); border: 1px solid transparent; cursor: pointer; font: inherit; font-family: var(--font-sans); font-weight: 600; font-size: 13.5px; letter-spacing: -0.002em; /* Vertical breathing room. margin-inline-start below only separates buttons that land on the SAME line — the moment an action row wraps, the lines would otherwise sit edge to edge. */ margin-block: 4px; background: var(--btn-bg); color: var(--btn-ink); box-shadow: var(--shadow-btn); transition: background 200ms, border-color 200ms, color 200ms, box-shadow 200ms, transform 120ms; } .btn:hover { background: var(--btn-bg-hov); transform: translateY(var(--btn-lift)); } .btn:active { transform: translateY(1px); box-shadow: none; } .btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .btn:disabled { opacity: .40; cursor: not-allowed; box-shadow: none; transform: none; } .btn.block { display: block; width: 100%; } .btn.ghost { background: var(--card-alt); color: var(--ink); border-color: var(--line); } .btn.ghost:hover { background: var(--hover); border-color: var(--line-strong); } /* red — destructive actions, and בקשות פתוחות on the menu. Sets its own border-color for the same reason .accent does: mkAction builds every menu button as `btn block ghost `, so without it .ghost's --line edge stays drawn around the red. On a solid red background a transparent border and a red one paint identically, so no existing danger button changes. */ .btn.danger { background: var(--danger); color: #FFFFFF; border-color: var(--danger); } .btn.danger:hover { background: var(--danger-hov); border-color: var(--danger-hov); } /* green — the אישור button, and בקשות סגורות on the menu. Sits AFTER .ghost for the same reason .warn does: mkAction builds every menu button as `btn block ghost `, so both classes land on one element at equal specificity (0,2,0) and source order decides. Declared above .ghost it lost, and the button came out grey. It also has to set its own border-color, or .ghost's --line edge stays visible around it. Nothing combined .accent with .ghost before this move, so no existing button changed. */ .btn.accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .btn.accent:hover { background: var(--accent-hov); border-color: var(--accent-hov); } /* טבלה — the PDF-of-this-screen button. Reuses the לא התקבל badge's pair rather than inventing a colour, so the app still has one yellow. */ .btn.warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-bg); } .btn.warn:hover { background: var(--warn-bg-hov); border-color: var(--warn-bg-hov); } /* מורווח */ .btn.violet { background: var(--violet-bg); color: var(--violet-ink); border-color: var(--violet-bg); } .btn.violet:hover { background: var(--violet-hov); border-color: var(--violet-hov); } /* דחה חשבון / שנה דחייה */ .btn.defer { background: var(--defer-bg); color: var(--defer-ink); border-color: var(--defer-bg); } .btn.defer:hover { background: var(--defer-hov); border-color: var(--defer-hov); } /* ---------- סיכום יוזרים — the category totals under the table ---------- A block rather than a wider totals row: ה splits into ק and ע, which is two figures in one column, and a phone has no room for eight columns of sums anyway. Plain flex rows, so this reads the same on a phone as on a desktop and needs no card-layout fallback. */ .totals-box { margin-top: 14px; padding: 4px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-alt); } .totals-box .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; font-variant-numeric: tabular-nums lining-nums; } .totals-box .row + .row { border-top: 1px solid var(--line); } .totals-box .row .lbl { color: var(--ink-muted); font-weight: 600; } .totals-box .row .val { font-weight: 600; color: var(--ink); } /* ק is capital, not profit — the same blue it reads in סיכום הנהלה, and --capital rather than --brand for the same reason: --brand is green on the light theme. */ .totals-box .row.capital .lbl, .totals-box .row.capital .val { color: var(--capital); } /* יתרה קודמת — the לא התקבל yellow, because it is the same thing: money expected that did not arrive. The negative inline margin lets the tint reach the box's edges, which the box's own 16px padding would otherwise inset it from. */ .totals-box .row.warn { background: var(--warn-bg); margin-inline: -16px; padding-inline: 16px; } .totals-box .row.warn .lbl, .totals-box .row.warn .val { color: var(--warn-ink); } .totals-box .row.grand { border-top: 2px solid var(--line-strong); margin-top: 2px; padding-top: 12px; font-size: 16px; } .totals-box .row.grand .lbl, .totals-box .row.grand .val { color: var(--ink-strong); font-weight: 700; } .btn + .btn { margin-inline-start: 8px; } /* Rows built as flex containers already space their children with `gap`; the inline margin would double up on those, so it is cancelled where a gap is doing the work. */ [style*="display:flex"] > .btn + .btn { margin-inline-start: 0; } /* Menu (section headers ה / ב / ג / פ / יוזרים) */ .menu button { display: flex; align-items: center; width: 100%; padding: 14px 18px; margin-bottom: 8px; background: var(--card-alt); border: 1px solid var(--line); border-radius: var(--radius-btn); font: inherit; font-family: var(--font-sans); font-size: 15px; font-weight: 500; color: var(--ink); text-align: start; cursor: pointer; transition: background 150ms, border-color 150ms; } .menu button:hover { background: var(--hover); border-color: var(--brand); } .menu .num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: var(--brand); color: #FFFFFF; margin-inline-end: 12px; font-family: var(--font-serif); font-weight: 700; font-size: 12.5px; letter-spacing: -0.02em; } /* Form controls */ label { display: block; font-size: 13px; font-weight: 500; color: var(--ink-muted); margin-top: 16px; margin-bottom: 8px; letter-spacing: 0.01em; text-transform: none; } input, select, textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--input-bg); font: inherit; font-family: var(--font-sans); font-size: 15px; font-variant-numeric: tabular-nums lining-nums; color: var(--ink); transition: border-color 200ms, box-shadow 200ms; } input::placeholder, textarea::placeholder { color: var(--placeholder); } /* color-scheme is what keeps the native date picker, dropdown arrow and autofill legible on a dark field. It is applied to the CONTROLS rather than to :root, because at root level it also nudges how the UA lays out form elements — and a styled