/* ---------- tokens: monochrome, off-white, charcoal ink ---------- */
/*
  Contrast pass (WCAG 2.1): --ink-soft and --ink-faint below are chosen so every
  text use in this file clears AA (4.5:1) at the sizes they're actually used at —
  measured against --paper, the lightest/darkest background text sits on.
  Light: --ink-soft #55524B ≈ 7.5:1, --ink-faint #726F66 ≈ 4.8:1 (was 5.2:1 / 2.5:1 — the
  faint tone was failing outright). Dark mirrors the same ratios against --paper.
  Font-weight matters as much as hex contrast for perceived legibility (thin strokes
  read as "weak" even at passing ratios) — body copy moved from 300 to 400, light
  weights now reserved for large display type only (≥~28px).
*/
:root{
  --paper:#FAFAF8;
  --surface:#FFFFFF;
  --surface-2:#F4F3F0;
  --ink:#201F1C;
  --ink-soft:#55524B;
  --ink-faint:#726F66;
  --line:#E4E2DC;
  --line-soft:#EFEEE9;
  --ink-invert:#FFFFFF;
  --radius:2px;
  --ease: cubic-bezier(.16,.84,.44,1);
  --danger:#C0453B; --danger-bg:#FBEAE8;
  --tight:#C98A2B; --tight-bg:#FBF3E2;
  --ok-color:#2F8F5B; --ok-bg:#E8F3ED;
  --info-color:#3B7DC4; --info-bg:#E9F1FA;
  --accent-color:#7B61C7; --accent-bg:#F1EDFA;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#181815;
    --surface:#201F1C;
    --surface-2:#262521;
    --ink:#EFEEE9;
    --ink-soft:#A9A79F;
    --ink-faint:#8A877D;
    --line:#37352F;
    --line-soft:#2B2A26;
    --ink-invert:#181815;
    --danger:#E38686; --danger-bg:#3A211F;
    --tight:#E0B562; --tight-bg:#3A2E17;
    --ok-color:#5CBB92; --ok-bg:#1F332A;
    --info-color:#7BAAD6; --info-bg:#20293A;
    --accent-color:#B39DDB; --accent-bg:#2C2740;
  }
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  direction:rtl;
  background:var(--paper);
  color:var(--ink);
  font-family:"Heebo","Segoe UI","Arial Hebrew",system-ui,-apple-system,sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  letter-spacing:.005em;
  padding-bottom:86px;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
h1,h2,h3,h4{ font-weight:350; letter-spacing:.01em; text-wrap:balance; }
/* direction:ltr keeps digit/comma order correct, but it also flips text-align:start
   to mean left — which pulled every number away from its right-aligned header.
   text-align is set explicitly here so numeric cells line up with the rest of the row. */
.num{ font-family:"Rubik", "Heebo", system-ui, monospace; font-variant-numeric: tabular-nums; direction:ltr; unicode-bidi:isolate; font-weight:400; text-align:right; }
.soft{ color:var(--ink-soft); }
.eyebrow{ margin:0 0 10px; font-size:.72rem; color:var(--ink-faint); font-weight:500; letter-spacing:.14em; text-transform:none; }
.bad{ color:var(--ink) !important; font-weight:600; }
.warn{ color:var(--ink) !important; font-weight:500; }
.good{ color:var(--ink-soft) !important; }

@media (prefers-reduced-motion: no-preference){
  .page{ animation: reveal .8s var(--ease) both; }
  .panel, .stat-card{ animation: reveal .7s var(--ease) both; }
  .stat-row .stat-card:nth-child(1){ animation-delay:.02s; }
  .stat-row .stat-card:nth-child(2){ animation-delay:.08s; }
  .stat-row .stat-card:nth-child(3){ animation-delay:.14s; }
  .stat-row .stat-card:nth-child(4){ animation-delay:.2s; }
}
@keyframes reveal{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ---------- top bar ---------- */
.topbar{ background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; }
.topbar-inner{ max-width:1180px; margin:0 auto; padding:0 28px; height:56px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:28px; }
.user-menu-wrap{ justify-self:start; position:relative; }
.user-btn{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:var(--surface);
  color:var(--ink-soft); cursor:pointer; padding:0; transition:color .3s var(--ease), border-color .3s var(--ease);
}
.user-btn:hover{ color:var(--ink); border-color:var(--ink-faint); }
.user-menu{
  position:absolute; top:calc(100% + 8px); inset-inline-start:0; z-index:30; min-width:190px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px;
}
@media (prefers-reduced-motion: no-preference){
  .user-menu{ animation: menuIn .3s var(--ease) both; }
}
@keyframes menuIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } }
.user-menu-email{ font-size:.78rem; margin:0 0 10px; padding-bottom:10px; border-bottom:1px solid var(--line); word-break:break-all; }
.user-menu .btn-sm{ width:100%; }

.login-gate{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; max-width:320px; }
.login-card .brand-mark{ color:var(--ink); margin-bottom:4px; }
.login-card h1{ font-weight:400; font-size:25px; letter-spacing:.02em; margin:0; }
.login-card p.soft{ margin:0 0 18px; }
.login-google-btn{ display:flex; align-items:center; gap:10px; justify-content:center; }
.brand{ justify-self:center; display:flex; align-items:flex-start; gap:11px; text-decoration:none; font-weight:400; font-size:25px; letter-spacing:.02em; color:var(--ink); }
/* המשקל של הסימן (עובי קו 1.9 ב-SVG) וצבע ink מלא (לא ink-soft) — כדי שהוא יתאזן מול "בוני" הכבד
   לצידו, ולא ייראה עדין/דהוי לעומת האותיות המלאות. */
/* top:8.5px נמדד באופן אמפירי (baseline אמיתי של "בּוֹנִי" מול top:flex-start של ה-svg) —
   כדי שקצה הגג יתיישר בדיוק עם הניקוד של ה-ו (חולם) וקו הבסיס של הבית עם הניקוד של ה-נ (חיריק). */
.brand-mark{ display:flex; color:var(--ink); position:relative; top:8.5px; }
.global-search{ justify-self:end; position:relative; flex:0 1 200px; min-width:110px; display:flex; align-items:center; }
.global-search .input{ padding:7px 12px 7px 12px; padding-inline-start:30px; font-size:.82rem; }
/* דפדפנים (בעיקר Safari/iOS) מוסיפים לשדה type="search" עיטור מערכת גנרי — רקע/הדגשה תכלת ברירת מחדל
   וכפתור "נקה" (X) כחול — ששוברים את הפלטה המונוכרומטית של האתר. appearance:none מבטל את זה,
   ומעצבים מחדש את כפתור ה-X ביד כדי שישאר שימושי אבל בגוון האתר. */
.global-search .input[type="search"]{ -webkit-appearance:none; appearance:none; }
.global-search .input[type="search"]::-webkit-search-decoration,
.global-search .input[type="search"]::-webkit-search-results-button,
.global-search .input[type="search"]::-webkit-search-results-decoration{ display:none; }
.global-search .input[type="search"]::-webkit-search-cancel-button{
  -webkit-appearance:none; appearance:none; width:14px; height:14px; cursor:pointer;
  background-color:var(--ink-faint);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3 L13 13 M13 3 L3 13' stroke='black' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3 L13 13 M13 3 L3 13' stroke='black' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
}
.global-search .input[type="search"]::-webkit-search-cancel-button:hover{ background-color:var(--ink); }
.global-search-icon{
  position:absolute; inset-inline-start:10px; top:50%; transform:translateY(-50%);
  color:var(--ink-faint); display:flex; pointer-events:none;
}
.top-nav{
  display:flex; gap:4px; max-width:1180px; margin:0 auto; padding:0 28px;
  background:var(--paper); position:sticky; top:56px; z-index:19;
}
.top-nav a{
  text-decoration:none; color:var(--ink-soft); font-size:.82rem; font-weight:400; letter-spacing:.06em;
  padding:10px 16px; position:relative;
}
.top-nav a::after{
  content:""; position:absolute; right:16px; left:16px; bottom:0; height:2px;
  background:var(--ink); transform:scaleX(0); transition:transform .45s var(--ease);
  transform-origin:center;
}
.top-nav a.active{ color:var(--ink); }
.top-nav a.active::after{ transform:scaleX(1); }
@media (max-width:720px){ .top-nav{ display:none; } }

/* ---------- bottom tab bar (mobile) ---------- */
.bottom-nav{ display:none; }
@media (max-width:720px){
  .bottom-nav{
    display:flex; position:fixed; inset-inline:0; bottom:0; z-index:30;
    background:var(--surface); border-top:1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom-nav a{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
    text-decoration:none; color:var(--ink-soft); font-size:.64rem; font-weight:500; letter-spacing:.03em; padding:12px 4px 12px;
  }
  .bottom-nav a.active{ color:var(--ink); }
  .bn-icon{ font-size:1.05rem; line-height:1; font-weight:300; }
  .bn-primary{ color:var(--ink); font-weight:500; }
}

/* ---------- page layout ---------- */
.page{ max-width:1180px; margin:0 auto; padding:24px 28px 36px; }
.page-narrow{ max-width:600px; }
.page-head{ margin-bottom:18px; }
.page-head h1{ margin:0 0 4px; font-size:1.6rem; font-weight:300; }
.item-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.item-name-edit{
  font-size:1.6rem; font-weight:300; font-family:inherit; color:var(--ink); background:transparent;
  border:1px solid transparent; border-radius:var(--radius); padding:2px 6px; margin:0 0 4px -7px; width:auto; min-width:260px;
}
.item-name-edit:hover{ border-color:var(--line); }
.item-name-edit:focus{ outline:none; border-color:var(--ink); background:var(--surface); }
.status-select{ width:auto; }
.back-link{ display:inline-block; margin-bottom:14px; font-size:.8rem; letter-spacing:.04em; color:var(--ink-faint); text-decoration:none; transition:color .3s var(--ease); }
.back-link:hover{ color:var(--ink); }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.grid-2 > .panel{ border:none; margin:0; background:var(--surface); }
@media (max-width:880px){ .grid-2{ grid-template-columns:1fr; } }

/* ---------- stat cards ---------- */
.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1px; margin-bottom:20px; background:var(--line); border:1px solid var(--line); }
@media (max-width:720px){ .stat-row{ grid-template-columns:repeat(2, 1fr); } }
.stat-card{ background:var(--surface); padding:14px 18px; display:flex; flex-direction:column; }
.stat-label{ font-size:.7rem; color:var(--ink-faint); font-weight:500; letter-spacing:.08em; margin-bottom:6px; min-height:1.7em; }
.stat-value{ font-size:1.3rem; font-weight:350; }
.stat-sub{ font-size:.72rem; margin-top:3px; color:var(--ink-soft); letter-spacing:.02em; }
.stat-progress{ position:relative; height:14px; margin-top:4px; border-radius:7px; overflow:hidden; background:var(--ink-faint); }
.stat-progress-fill{ position:absolute; inset-inline-start:0; top:0; bottom:0; background:var(--ink); transition:width .4s var(--ease); }
.stat-progress-label{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:.64rem; font-weight:600; letter-spacing:.02em; color:var(--ink-invert);
  font-variant-numeric:tabular-nums;
}
.stat-card.clickable{ cursor:pointer; transition:background-color .3s var(--ease); }
.stat-card.clickable:hover{ background:var(--surface-2); }
.stat-card.selected{ background:var(--surface-2); box-shadow:inset 0 -2px 0 var(--ink); }
.stat-card.static{ cursor:default; }

.budget-range-edit{ display:flex; align-items:flex-start; gap:6px; }
.budget-range-edit .input{ text-align:left; }
.vat-field{ display:flex; flex-direction:column; gap:5px; flex:1; min-width:0; }
.vat-field .input, .stat-card > .vat-field .input{ padding:7px 8px; font-size:1rem; }
.vat-check{ display:flex; align-items:center; gap:4px; font-size:.66rem; color:var(--ink-faint); font-weight:400; cursor:pointer; white-space:nowrap; }
.vat-check input{ width:13px; height:13px; margin:0; flex-shrink:0; accent-color:var(--ink); }
.vat-check span{ line-height:1; }
.budget-range-edit > span{ margin-top:8px; }

/* אייקון סטטוס מול טווח התקציב — הצבע היחיד שנשבר ממונוכרום, בכוונה: אזהרה חייבת להיקרא מיידית */
.range-status-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-inline-start:7px; vertical-align:middle; flex-shrink:0; }
.range-status-dot.over{ background:var(--danger); }
.range-status-dot.within{ background:var(--ok-color); }
.range-status-dot.under{ background:var(--info-color); }

/* ---------- alerts ---------- */
.alerts{ display:flex; flex-direction:column; margin-bottom:48px; border-top:1px solid var(--line); }
.alert{
  display:flex; align-items:baseline; gap:12px; text-decoration:none; color:var(--ink);
  font-size:.86rem; padding:14px 2px; border-bottom:1px solid var(--line);
  transition:padding-right .35s var(--ease); font-weight:400;
}
.alert:hover{ padding-right:10px; }
.alert-dot{ width:5px; height:5px; border-radius:99px; background:var(--ink-faint); flex-shrink:0; align-self:center; }
.alert-bad strong{ font-weight:600; }
.alert-bad .alert-dot{ background:var(--ink); }
.alert-warn strong{ font-weight:500; }

/* ---------- settings tabs ---------- */
.settings-tabs{ display:flex; gap:4px; margin-bottom:18px; }
.settings-tab{
  padding:10px 16px; font-size:.85rem; color:var(--ink-faint); text-decoration:none;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.settings-tab:hover{ color:var(--ink-soft); }
.settings-tab.active{ color:var(--ink); border-color:var(--ink); }

/* ---------- panels ---------- */
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin-bottom:1px; }
.panel h2{ margin:0 0 10px; font-size:.98rem; font-weight:500; letter-spacing:.03em; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.panel-head h2{ margin:0; }

/* ---------- category bars ---------- */
.cat-bars{ display:flex; flex-direction:column; gap:12px; }
.cat-bar-row{ cursor:pointer; padding:4px 6px; margin:-4px -6px; border-radius:var(--radius); transition:background-color .3s var(--ease); }
.cat-bar-row:hover{ background:var(--surface-2); }
.cat-bar-head{ display:flex; justify-content:space-between; font-size:.85rem; margin-bottom:6px; font-weight:400; }
.cat-bar-track{ height:2px; background:var(--line); overflow:visible; position:relative; }
.cat-bar-fill{ height:2px; background:var(--ink); position:relative; top:0; }
.cat-bar-fill.over{
  background-image: repeating-linear-gradient(-45deg, var(--ink), var(--ink) 3px, transparent 3px, transparent 6px);
}

/* ---------- tables ---------- */
.twrap{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; font-size:.86rem; }
.data-table thead th{ text-align:right; font-size:.68rem; letter-spacing:.08em; color:var(--ink-faint); font-weight:500; border-bottom:1px solid var(--ink); padding:0 12px 8px; }
.data-table td{ padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle; font-weight:400; }
.data-table tbody tr:last-child td{ border-bottom:none; }
.data-table tbody tr[onclick]{ cursor:pointer; transition:background-color .3s var(--ease); }
.data-table tbody tr[onclick]:hover{ background:var(--surface-2); }
.item-name{ font-weight:500; }
a.item-name{ text-decoration:none; display:block; }
a.item-name:hover{ text-decoration:underline; }
.row-selected{ background:var(--surface-2); }
.row-rejected{ opacity:.4; }
.mini-table td{ padding:8px 4px; border-bottom:1px solid var(--line); font-size:.85rem; font-weight:400; }
.mini-table tr:last-child td{ border-bottom:none; }

/* עמודה ראשונה/אחרונה צמודות לשוליים של הפאנל, כדי שיתיישרו עם הכותרת (h2) מעליהן */
.data-table th:first-child, .data-table td:first-child{ padding-inline-start:0; }
/* טבלת הצעות המחיר: השורות עצמן לחיצות עם רקע מלא (hover/נבחר/נדחה) — צריך ריווח אמיתי מקצה
   הפאנל כדי שהטקסט לא ייצמד לגבול, בניגוד לטבלאות רגילות שבהן הכותרת (h2) מיישרת קו איתן. */
.quotes-table th:first-child, .quotes-table td:first-child{ padding-inline-start:10px; }
.quotes-table th:last-child, .quotes-table td:last-child{ padding-inline-end:10px; }
/* padding-left פיזי (לא padding-inline-end) בכוונה: תאי .num הופכים דיירקשן ל-ltr (לספרות), מה שהופך
   את המיפוי הלוגי (end→right במקום left) ומייצר פדינג לא נכון בעמודה האחרונה כשהיא גם .num. */
.data-table th:last-child, .data-table td:last-child{ padding-left:0; }

/* טבלת פריטים: רוחב עמודות קבוע (colgroup) כדי שהריווח לא "יקפוץ" כשמסננים משנים את אורך התוכן בכל שורה. */
.items-table{ table-layout:fixed; min-width:1030px; }
.items-table td, .items-table th{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.items-table td.editable-cell{ overflow:visible; white-space:nowrap; padding-top:6px; padding-bottom:6px; }
.th-sortable{ cursor:pointer; user-select:none; }
/* עלות משוערת/בפועל בטבלת הפריטים: אותם גוונים בדיוק כמו שאר האתר (נקודות טווח, pill-ים) — לא צבעים חדשים,
   ובלי משקל מודגש (רק הצבע מסמן חריגה, לא צריך גם בולד — נשאר קריא ולא "צועק"). .input.cost-in-range
   (לא רק .cost-in-range) כדי לנצח את .input{color:var(--ink)} — אותה סגוליות בדיוק, אז בלי זה סדר
   ההופעה בקובץ הוא שהיה קובע ותמיד היה מפסיד. */
.input.cost-in-range{ color:var(--ok-color); }
.input.cost-out-range{ color:var(--danger); }

/* תאי בחירה בטבלת הפריטים (קטגוריה/סטטוס): בלי שברון קבוע ובלי מסגרת/רקע — נראה כטקסט/pill רגיל,
   בדיוק כמו עמודות המספר. ה-select עצמו מנוטרל (pointer-events:none) כברירת מחדל ומופעל רק
   בדאבל-קליק (App.openInlineSelect, גם פותח showPicker() באותו רגע של ה-gesture האמיתי). בלי padding
   נוסף על ה-wrap או על ה-select הפשוט (.inline-select) — כדי שתחילת הטקסט תתיישר בדיוק עם הכותרת,
   באותו 12px שה-TD כבר נותן לכל תא בטבלה (בלי "פדינג כפול"). */
.inline-select-cell{ display:inline-block; vertical-align:middle; max-width:100%; }
.inline-select-cell select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none; pointer-events:none;
  border:none; background:transparent; margin:0; padding:0; font:inherit; white-space:nowrap;
}
.inline-select-cell select.inline-select{ color:var(--ink-soft); }
/* pill הסטטוס: בלי overflow/ellipsis ובלי max-width — הרוחב גדל לפי הטקסט הארוך ביותר ("טרם התחיל")
   כדי שלעולם לא ייחתך, עם טקסט ממורכז בתוכו. פדינג סימטרי (לא כמו קודם) — עכשיו שאין יותר שברון,
   אין סיבה לפדינג לא-שווה בין הצדדים; תחילת ה-pill עדיין מיושרת לכותרת כי זה עניין של מיקום ה-wrap
   ביחס לתא (inline-block שנצמד לקצה ההתחלה), לא של הפדינג הפנימי. */
.inline-select-cell select.inline-select-pill{
  padding:2px 9px; border-radius:99px; font-size:.68rem; font-weight:500; letter-spacing:.02em; text-align:center;
}
.inline-select-cell select.inline-select-pill.tone-faint{ color:var(--ink-faint); background:transparent; border:1px dashed var(--line); }
.inline-select-cell select.inline-select-pill.tone-warn{ color:var(--tight); background:var(--tight-bg); }
.inline-select-cell select.inline-select-pill.tone-info{ color:var(--info-color); background:var(--info-bg); }
.inline-select-cell select.inline-select-pill.tone-accent{ color:var(--accent-color); background:var(--accent-bg); }
.inline-select-cell select.inline-select-pill.tone-good{ color:var(--ok-color); background:var(--ok-bg); }

/* עמודות מספר בטבלת הפריטים: readonly = נראה כמו טקסט רגיל (בלי מסגרת/רקע); דאבל-קליק (App.enableInlineEdit)
   חושף שדה עריכה אמיתי עם מסגרת. padding:0 בכוונה (במקום padding ברירת המחדל של .input) — אחרת
   נוצר "פדינג כפול" (TD + input גם) שמזיז את המספר ימינה יותר מהכותרת שמעליו. */
.items-table .editable-cell input{ padding:6px 0; }
.items-table .editable-cell input[readonly]{ border-color:transparent; background:transparent; cursor:default; }
.items-table .editable-cell input:not([readonly]){ cursor:text; }
.th-sortable:hover{ color:var(--ink-soft); }
.th-sortable .sort-icon{ font-size:.68rem; margin-inline-start:2px; opacity:.5; }
.th-sortable.sort-active .sort-icon{ opacity:1; color:var(--ink); }
.items-total-row td{ font-weight:500; border-top:1px solid var(--ink); border-bottom:none; padding-top:12px; }
.items-total-row td:first-child{ color:var(--ink-soft); font-weight:400; overflow:visible; text-overflow:clip; white-space:normal; }
.mini-table td:first-child{ padding-inline-start:0; }
.mini-table td:last-child{ padding-inline-end:0; }

/* ---------- pills / status — צבע לפי סטטוס, כדי שהמצב יזוהה מיידית ברשימת הסעיפים ---------- */
.pill{
  display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:99px;
  font-size:.68rem; font-weight:500; letter-spacing:.02em; white-space:nowrap; border:none;
  color:var(--ink-soft); background:var(--line);
}
.tone-faint{ color:var(--ink-faint); background:transparent; border:1px dashed var(--line); }
.tone-warn{ color:var(--tight); background:var(--tight-bg); }
.tone-info{ color:var(--info-color); background:var(--info-bg); }
.tone-accent{ color:var(--accent-color); background:var(--accent-bg); }
.tone-good{ color:var(--ok-color); background:var(--ok-bg); }
.tone-bad{ color:var(--danger); background:var(--danger-bg); }

/* ---------- filters / inputs / buttons ---------- */
.filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.filters .input, .filters .select-wrap{ flex:1; min-width:150px; }
.input{
  width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); color:var(--ink); font-size:.88rem; font-family:inherit; font-weight:400;
  transition:border-color .3s var(--ease);
}
.input::placeholder{ color:var(--ink-faint); }
.input:focus{ outline:none; border-color:var(--ink); }
textarea.input{ resize:vertical; }

/* דרופ-דאון מודרני: מסתיר את חץ הדפדפן הישן, מחליף בשברון עדין שמותאם לפלטת האתר במקום החץ המובנה המיושן. */
.select-wrap{ position:relative; }
select.input.select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none; cursor:pointer; padding-inline-end:34px;
}
.select-wrap::after{
  content:""; position:absolute; top:50%; left:14px; width:7px; height:7px;
  transform:translateY(-50%) rotate(45deg); border-right:1.5px solid var(--ink-faint); border-bottom:1.5px solid var(--ink-faint);
  pointer-events:none;
}

/* אבחנה ויזואלית עקבית בכל האתר, גם בלי לרחף עם העכבר: פילטר (מסנן תצוגה, בתוך .filters) נשאר
   קופסה מלאה עם גבול מסביב — כמו בקרת טופס רגילה בסרגל כלים. שדה ערך (שייך לרשומה ספציפית, תמיד
   עם לייבל מעליו בתוך .field) הוא קו תחתון בלבד, בלי קופסה ובלי רקע — סגנון "עריכה מוטבעת בטקסט",
   שונה מיסודו מבחינה חזותית, לא רק גוון עדין שקל לפספס. */
.field .select-wrap select.input.select{
  background:transparent; border:none; border-bottom:1.5px solid var(--line); border-radius:0;
  padding-inline-start:0; padding-inline-end:20px;
}
.field .select-wrap select.input.select:hover{ border-bottom-color:var(--ink-soft); }
.field .select-wrap select.input.select:focus{ border-bottom-color:var(--ink); background:var(--surface-2); }
.field .select-wrap::after{ left:4px; border-color:var(--ink-soft); }

/* מספרים בלי חצי spinner — פשוט קלט טקסטואלי לעין, בלי הבקרות של הדפדפן */
input[type="number"]{ appearance:textfield; -moz-appearance:textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.btn{
  background:var(--ink); color:var(--ink-invert); border:1px solid var(--ink); border-radius:var(--radius);
  padding:10px 22px; font-size:.82rem; font-weight:400; letter-spacing:.06em; cursor:pointer; white-space:nowrap;
  transition:background-color .35s var(--ease), color .35s var(--ease);
}
.btn:hover{ background:transparent; color:var(--ink); }
.btn-sm{
  background:transparent; color:var(--ink-soft); border:1px solid var(--line); border-radius:var(--radius);
  padding:8px 16px; font-size:.74rem; letter-spacing:.04em; font-weight:400; cursor:pointer; white-space:nowrap;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.btn-sm:hover{ border-color:var(--ink); color:var(--ink); }

/* כפתור צף להוספה מהירה (למשל אבן דרך בעמוד התזרים) — נשאר קבוע בפינת המסך בזמן גלילה, כדי שלא יהיה צורך לגלול לסוף העמוד. */
.fab{
  position:fixed; bottom:24px; left:24px; z-index:20; width:52px; height:52px; border-radius:50%;
  background:var(--ink); color:var(--ink-invert); border:none; font-size:1.6rem; font-weight:300; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 3px 12px rgba(0,0,0,.22);
  transition:background-color .3s var(--ease), transform .2s var(--ease);
}
.fab:hover{ transform:scale(1.06); }
@media (max-width: 640px){
  .fab{ bottom:76px; } /* מעל הניווט התחתון במובייל */
}
.btn-sm:disabled{ opacity:.4; cursor:not-allowed; }
a.btn-sm{ text-decoration:none; display:inline-block; }

/* ---------- forms ---------- */
.form{ display:flex; flex-direction:column; gap:12px; }
.field{ display:flex; flex-direction:column; gap:4px; font-size:.78rem; font-weight:500; letter-spacing:.03em; color:var(--ink-soft); }
.field.checkbox{ flex-direction:row; align-items:center; gap:9px; }
.field.checkbox input{ width:15px; height:15px; margin:0; flex-shrink:0; accent-color:var(--ink); }
.field.checkbox span{ line-height:1; }
.vendor-file-list{ display:flex; flex-direction:column; gap:6px; }
.vendor-file-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.82rem; font-weight:400; }
.vendor-file-row a{ color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- settings: categories & subcategories ---------- */
.add-category-form{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.add-category-form .input{ flex:1 1 140px; min-width:0; }
.add-category-form .btn-sm{ flex:0 0 auto; }
.category-list{ display:flex; flex-direction:column; gap:16px; }
.category-block{ border-top:1px solid var(--line); padding-top:14px; }
.category-block:first-child{ border-top:none; padding-top:0; }
.category-head{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.category-head .input{ font-weight:500; }
.subcategory-rows{ display:flex; flex-direction:column; gap:6px; padding-inline-start:22px; }
.subcategory-rows form{ display:flex; gap:8px; }
.sub-row{ display:flex; gap:8px; align-items:center; }

/* ---------- capital page ---------- */
.callout-bad{
  background:var(--danger-bg); border:1px solid var(--danger); color:var(--ink);
  border-radius:var(--radius); padding:12px 14px; font-size:.85rem; margin:14px 0 0; line-height:1.6;
}
.source-card-list{ display:flex; flex-direction:column; gap:14px; }
.source-card{ border:1px solid var(--line); border-radius:var(--radius); padding:14px; background:var(--surface); }
.source-card.dragging{ opacity:.45; }
.source-card-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.source-name-wrap{ display:flex; flex-direction:column; gap:3px; flex:2 1 140px; min-width:0; }
.source-name{ min-width:0; }
.source-amount{ flex:1 1 90px; min-width:0; max-width:150px; }
.source-priority-order{
  width:22px; height:22px; margin-top:10px; border-radius:50%; border:1px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:.68rem; color:var(--ink-faint);
  font-family:"Rubik", "Heebo", monospace;
}
.drag-handle{
  display:flex; align-items:center; justify-content:center; width:30px; height:30px; margin-top:6px; flex-shrink:0;
  color:var(--ink-faint); font-size:1rem; cursor:grab; touch-action:none; user-select:none;
  border-radius:var(--radius); transition:color .3s var(--ease), background-color .3s var(--ease);
}
.drag-handle:hover{ color:var(--ink); background:var(--surface-2); }
.drag-handle:active{ cursor:grabbing; }
.source-card-actions{
  display:flex; align-items:center; gap:2px; flex-shrink:0; margin-inline-start:auto; margin-top:4px;
  padding-inline-start:8px; border-inline-start:1px solid var(--line);
}
.source-expand-toggle{
  flex-shrink:0; width:34px; height:34px; border:1px solid transparent; border-radius:50%;
  background:transparent; color:var(--ink-soft); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.source-expand-toggle svg{ transition:transform .25s var(--ease); }
.source-expand-toggle.is-open svg{ transform:rotate(180deg); }
.source-expand-toggle:hover{ background:var(--surface-2); color:var(--ink); }
.source-card-details{ margin-top:4px; }
.icon-btn{
  flex-shrink:0; width:34px; height:34px; border:1px solid transparent; border-radius:50%;
  background:transparent; color:var(--ink-faint); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background-color .3s var(--ease), color .3s var(--ease);
}
.icon-btn:hover{ background:var(--surface-2); color:var(--ink); }
.icon-btn-danger:hover{ background:var(--danger-bg); color:var(--danger); }

/* input[type=file] מוסתר ויזואלית (לא display:none) כדי שיישאר נגיש/פוקוסבילי — ה-label שעוטף
   אותו (עם אייקון) הוא מה שנראה ולוחצים עליו בפועל, בלי JS, בזכות הקישור הטבעי של label ל-input. */
.visually-hidden-file{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* פעולת ברירת המחדל של החלונית (למשל "שמור") — עיגול מלא בניגוד לשאר האייקונים השקופים, כדי שיהיה ברור מי הפעולה הראשית. */
.icon-btn-primary{ background:var(--ink); color:var(--ink-invert); border-color:var(--ink); }
.icon-btn-primary:hover{ background:var(--ink); color:var(--ink-invert); opacity:.85; }

.source-card-stats{
  display:flex; gap:18px; flex-wrap:wrap; margin:12px 0; padding:10px 0;
  border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
}
.source-card-stats > div{ display:flex; flex-direction:column; gap:3px; font-size:.72rem; }
.source-card-stats .num{ font-size:.92rem; }
.source-card-stats input[type="date"]{ width:auto; font-size:.8rem; padding:4px 6px; }

/* ---------- ציר תזרים אנכי: אבני דרך מימין, תשלומים משמאל, מפרידי חודש בין השניים ---------- */
.cf-timeline{ display:flex; flex-direction:column; }
.cf-month-block{ transition:background-color .15s var(--ease), box-shadow .15s var(--ease); border-radius:var(--radius); }
.cf-month-block.drop-target{ background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--ink-faint); }
/* המקום המקורי נשאר כ"חריץ ריק" (מקווקו + דהוי) כדי שיהיה ברור שהאלמנט "הורם" ממנו ועבר למקום אחר */
.cf-card-dragging{ opacity:.3; outline:1px dashed var(--ink-faint); outline-offset:-1px; border-radius:var(--radius); }
/* שיבוט חי של הכרטיס עצמו שנע עם הסמן — לא תווית טקסט גנרית — כדי שברור בדיוק מה נגרר */
.cf-drag-ghost{
  position:fixed; z-index:1000; pointer-events:none; margin:0;
  background:var(--surface); border:1px solid var(--ink); box-shadow:0 12px 28px rgba(0,0,0,.22);
  cursor:grabbing;
}
body.cf-dragging-active, body.cf-dragging-active *{ cursor:grabbing !important; }

.cf-month-divider{ position:relative; display:flex; align-items:center; justify-content:center; gap:10px; margin:26px 0 4px; }
.cf-month-divider:first-child{ margin-top:4px; }
.cf-month-divider::before{ content:""; position:absolute; top:50%; right:0; left:0; height:1px; background:var(--line); z-index:0; }
.cf-month-divider-label{
  position:relative; z-index:1; background:var(--surface); border:1px solid var(--line); border-radius:99px;
  padding:5px 16px; font-size:.8rem; font-weight:500; white-space:nowrap;
  display:inline-flex; align-items:center; gap:7px;
}
.cf-month-divider-label.current{ border-color:var(--ink); border-width:1px; box-shadow:inset 0 0 0 1px var(--ink); }
.cf-month-divider-label .num.problem{ color:var(--danger); }
.cf-month-divider-label .num.tight{ color:var(--tight); }
.cf-divider-sep{ color:var(--ink-faint); }
.cf-divider-stat{ display:inline-flex; align-items:center; gap:4px; line-height:1; }
.cf-divider-stat svg{ display:block; flex-shrink:0; color:var(--ink-faint); }

.cf-page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }

.cf-row{ display:grid; grid-template-columns:1fr 21px 1fr; align-items:stretch; }
.cf-side{ display:flex; align-items:center; min-width:0; }
.cf-side-left{ justify-content:flex-end; padding-inline-end:16px; }
.cf-side-right{ justify-content:flex-start; padding-inline-start:16px; }
.cf-spine{ position:relative; display:flex; justify-content:center; }
.cf-spine::before{ content:""; position:absolute; top:0; bottom:0; right:50%; width:1px; background:var(--line); transform:translateX(50%); }
/* צבעי הנקודות: אותו זוג "גוון עדין ברקע + הצבע המלא כאייקון" שכבר משמש את הפילים בסטטוסים
   בשאר האתר (tone-good/warn/info/accent) — כדי שהציר ידבר באותה שפת צבע, לא ינגן צבעים בוטים משלו. */
.cf-dot{
  position:relative; z-index:1; margin-top:12px; flex-shrink:0; width:21px; height:21px; border-radius:50%;
  background:var(--surface-2); color:var(--ink-faint); display:flex; align-items:center; justify-content:center;
}
.cf-dot.actual{ background:var(--ok-bg); color:var(--ok-color); }
.cf-dot.planned{ background:var(--tight-bg); color:var(--tight); }
.cf-dot.income{ background:var(--info-bg); color:var(--info-color); }
.cf-dot.milestone{ background:var(--accent-bg); color:var(--accent-color); }
.cf-dot.milestone.estimated{ background:transparent; border:1.5px dashed var(--accent-color); }
.cf-dot.planned.estimated{ background:transparent; border:1.5px dashed var(--tight); }

/* טוגל תאריך קבוע/משוער — מתג פשוט, לא מוצג מלל על ציר הזמן עצמו, רק בטופס ההוספה/עריכה. */
.toggle-switch{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:.82rem; color:var(--ink-soft); }
.toggle-switch input{ position:absolute; opacity:0; width:0; height:0; }
.toggle-track{
  position:relative; flex-shrink:0; width:34px; height:20px; border-radius:99px; background:var(--line);
  transition:background-color .3s var(--ease);
}
.toggle-track::after{
  content:""; position:absolute; top:2px; right:2px; width:16px; height:16px; border-radius:50%;
  background:var(--surface); box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .3s var(--ease);
}
.toggle-switch input:checked + .toggle-track{ background:var(--ink); }
.toggle-switch input:checked + .toggle-track::after{ transform:translateX(-14px); }

.cf-card{
  display:flex; align-items:center; gap:10px; padding:11px 10px; max-width:360px; width:100%;
  cursor:pointer; border-radius:var(--radius); transition:background-color .3s var(--ease);
}
.cf-card:hover{ background:var(--surface-2); }
.cf-card-draggable{ cursor:grab; }
.cf-card-date{ flex-shrink:0; width:66px; font-size:.76rem; }
.cf-card-name{ flex:1; min-width:0; font-size:.86rem; }
/* בכרטיס אבן דרך התאריך צריך להיות צמוד לציר (כמו אצל תשלומים), לא הטקסט המתמתח — אחרת ה-flex:1
   של השם משאיר שטח ריק צמוד לציר בעוד הטקסט עצמו "נדבק" לתאריך בצד הרחוק. */
.cf-card.milestone{ justify-content:flex-end; }
.cf-card.milestone .cf-card-date{ order:2; flex-shrink:0; }
.cf-card.milestone .cf-card-name{ order:1; flex:0 1 auto; font-weight:500; }
.cf-card.milestone.estimated .cf-card-date{ font-style:italic; }
.cf-card.planned.estimated .cf-card-name,
.cf-card.planned.estimated .cf-card-amount{ font-style:italic; color:var(--ink-soft); }
.cf-card-amount{ flex-shrink:0; font-size:.86rem; }

/* ---------- ציר תזרים במובייל: עמודה אחת, הספיריט (הקו+נקודות) בצד ימין — כרונולוגי מלמעלה למטה ---------- */
@media (max-width:720px){
  .cf-row{ grid-template-columns:24px 1fr; }
  .cf-side{ grid-column:2; justify-content:flex-start; padding-inline:0; }
  .cf-side:empty{ display:none; }
  .cf-spine{ grid-column:1; }
  .cf-card{ max-width:none; padding:11px 8px; }
  .cf-card-date{ width:58px; font-size:.72rem; }
  /* במובייל כל התוכן (גם אבן דרך וגם תשלום) יושב באותו טור, צמוד לציר מהצד ה"התחלתי" של הכרטיס —
     הפוך מהדסקטופ, ולכן צריך לבטל כאן את ה-justify-content/order שנועדו לדסקטופ בלבד. */
  .cf-card.milestone{ justify-content:flex-start; }
  .cf-card.milestone .cf-card-date{ order:initial; }
  .cf-card.milestone .cf-card-name{ order:initial; }
}

/* ---------- global search results ---------- */
.search-results{ display:flex; flex-direction:column; }
.search-result{
  display:block; padding:14px 2px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink);
  transition:padding-right .3s var(--ease);
}
.search-result:hover{ padding-right:8px; }
mark{ background:var(--tight-bg); color:var(--ink); border-radius:2px; padding:0 1px; }

/* ---------- decision / capture cards ---------- */
.decision-card{ border-top:1px solid var(--line); padding:12px 0; }
.decision-card:first-of-type{ border-top:none; padding-top:0; }
.decision-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; }
.capture-card{ border-top:1px solid var(--line); padding:12px 0; }
.capture-card:first-of-type{ border-top:none; padding-top:0; }
.capture-card p{ margin:6px 0 0; font-size:.88rem; font-weight:400; }
.capture-images{ display:flex; gap:10px; flex-wrap:wrap; }
.capture-images img{ width:88px; height:88px; object-fit:cover; border:1px solid var(--line); filter:grayscale(15%); }

/* ---------- modal ---------- */
#modal-root{ position:fixed; inset:0; z-index:50; display:none; }
#modal-root.open{ display:block; }
.modal-overlay{ position:fixed; inset:0; background:rgba(24,24,21,.42); display:flex; align-items:flex-end; justify-content:center; }
@media (min-width:640px){ .modal-overlay{ align-items:center; } }
.modal{
  background:var(--surface); width:100%; max-width:460px; max-height:90vh; overflow-y:auto;
  padding:22px 24px 26px; border-top:1px solid var(--line);
}
@media (prefers-reduced-motion: no-preference){
  .modal{ animation: modalIn .5s var(--ease) both; }
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
@media (min-width:640px){ .modal{ border:1px solid var(--line); } }
.modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.modal-head h3{ margin:0; font-size:1.05rem; font-weight:300; letter-spacing:.02em; }
.modal-close{ background:none; border:none; font-size:1rem; color:var(--ink-faint); cursor:pointer; padding:4px; transition:color .3s var(--ease); }
.modal-close:hover{ color:var(--ink); }

/* Viewer role: hide the main entry points for adding new expenses — server-side rules are the real
   enforcement (see Firestore security rules), this just keeps a read-only visitor from seeing dead-end buttons. */
body.viewer-mode .bottom-nav a[data-nav="quick-add"]{ display:none; }

/* Share modal — Google Docs-style list of people with access. */
.share-invite-form{ display:flex; gap:8px; margin-bottom:16px; }
.share-list{ display:flex; flex-direction:column; gap:10px; }
.share-row{ display:flex; align-items:center; gap:10px; }
.share-email{ flex:1; font-size:.88rem; }
.share-avatar{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:28px; height:28px; border-radius:50%; background:var(--ink-faint); color:var(--surface);
  font-size:.78rem; font-weight:500;
}