/* ═══════════════════ tokens ═══════════════════ */
:root{
  --navy:#1A3A8C; --navy-deep:#0D2257; --navy-soft:#EAF0FB;
  --navtile-bg:#FFFFFF;          /* שערי לוח הבקרה: לבן כמו כרטיס, שייראו ככפתורים */
  /* טקסט משני בבהיר: היה 4.8:1 (muted) ו-2.9:1 (faint) על לבן — הרמזים
     נבלעו. עכשיו 7.5:1 ו-4.6:1, ועדיין שלוש מדרגות ברורות מול ה-ink. */
  --ink:#141B2E; --muted:#4B5470; --faint:#626C8C;
  --paper:#F1F4FB; --paper-top:#E4EAF7; --surface:#FFFFFF; --raised:#FFFFFF;
  --line:#E1E6F2; --line-strong:#C9D2E6;
  --savory:#C8861E; --savory-bg:#FBF3E4;
  --sweet:#8B3A62; --sweet-bg:#F9EDF3;
  --good:#1B7A57; --good-bg:#E7F4EF;
  /* משלוח הוא ישות נפרדת ולכן יש לו צבע משלו — טורקיז, שנקרא מיד
     לעומת הנייבי של האירוע ואינו נקרא כאדום באף ערכה. */
  --delivery:#0E6E78; --delivery-bg:#E2F1F3; --delivery-2:#3C8A93;
  --violet:#6A4BC8; --violet-bg:#EDE8FA;
  /* "שולם" בכחול ולא בירוק: ירוק בהיר יצא כמעט זהה ל"אושרה". כחול
     נקרא כ"סגור ומשולם" ונבדל ממנו במבט. */
  --paid:#1F63C8; --paid-bg:#E6EEFB;
  --accent-soft:#FBF1DE;
  --cross-bg:#FBF1DE;            /* שורת עובד חוצה-סניפים בטבלאות השכר */
  /* פאנל בתוך כרטיס. בבהיר הוא שוקע ביחס ללבן, ובכהה הוא מתרומם ביחס
     לכרטיס — אחרת צ׳יפ בתוך כרטיס נראה כמו חור שנחתך בו. */
  --inset:#F1F4FB; --inset-line:#E1E6F2;
  /* כפתורי הפעולה ("צור", "הצעה חדשה"). במצב בהיר הענבר קרא כחרדל על
     הרקע הבז׳, ולכן שם הם כחול רויאל עם כיתוב לבן; במצב כהה הענבר על
     הנייבי עובד, והוא נשאר. זה הטוקן היחיד שמבדיל ביניהם. */
  --btn-accent:#1A3A8C; --btn-accent-hover:#16327A;
  --on-btn-accent:#FFFFFF; --btn-accent-glow:26,58,140;
  --warn:#B0741A; --warn-bg:#FBF1E0;
  --bad:#AE3B3B; --bad-bg:#FAEBEB;
  --shadow:0 1px 2px rgba(20,27,46,.05), 0 8px 24px -12px rgba(20,27,46,.14);
  --shadow-lift:0 2px 6px rgba(20,27,46,.08), 0 18px 40px -16px rgba(20,27,46,.22);
  --r:12px; --r-lg:16px;
  --on-navy:#FFFFFF;
  --tabbar-h:70px;               /* גובה סרגל הניווט התחתון במובייל */
  /* האייפון מוסיף לסרגל ריפוד באזור הבטוח, ולכן הגובה האמיתי גדול
     מ---tabbar-h. app.js מודד את הסרגל ודורך על הערך הזה; זה כאן
     בשביל הציור הראשון, לפני שה-JS הספיק למדוד. */
  --tabbar-total:calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  --safe-probe:env(safe-area-inset-bottom, 0px);   /* לשכבת האבחון בלבד */
  --bars-shift:0px;              /* היסט הסרגלים לתחתית הנראית — app.js */
  --navy-hover:#14306F;          /* hover של כפתור ראשי — כהה יותר במעט */
  --btn-hover-bg:#EEF2FA;        /* רקע hover לכפתור משני */
  --accent:#C8861E;              /* ענבר — צבע המלוח, לפעולות יצירה */
  --accent-strong:#A96E12;
  --on-accent:#FFFFFF;
  --accent-glow:200,134,30;
  --go:#1B7A57; --go-strong:#146147; --on-go:#FFFFFF; --go-glow:27,122,87;
  --he:'Assistant',-apple-system,'Segoe UI',sans-serif;
  --display:'Rubik','Assistant',-apple-system,sans-serif;
  --en:'Archivo','Helvetica Neue',Arial,sans-serif;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --on-navy:#0A1024;
  --navy-hover:#BCCCFF;          /* בכהה ה-hover מבהיר, לא מכהה */
  --btn-hover-bg:#2A3670;
  --accent:#F0BB66;
  --accent-strong:#FBD489;
  --on-accent:#2A1C06;
  --accent-glow:240,187,102;
  --go:#57D3A2; --go-strong:#7BE3BA; --on-go:#062419; --go-glow:87,211,162;
  /* אינדיגו רווי במקום אפור-כחול — פחות "עצוב", יותר עומק */
  --navy:#94AEFF; --navy-deep:#121C46; --navy-soft:#26336E;
  --navtile-bg:var(--navy-soft);
  --ink:#EEF2FF; --muted:#AAB7E2; --faint:#8492C4;
  --paper:#0A0F26; --paper-top:#1C2B68; --surface:#161F47; --raised:#212C5C;
  --line:#2C3A72; --line-strong:#4A59A0;
  --savory:#F0BB66; --savory-bg:#3D2F17;
  --sweet:#E895C0; --sweet-bg:#3E2135;
  --good:#57D3A2; --good-bg:#0F3527;
  --delivery:#6FD6E0; --delivery-bg:#10323A; --delivery-2:#4FAEBA;
  --violet:#AE94FF; --violet-bg:#241D4C;
  --paid:#8AB6FF; --paid-bg:#17265C;
  --accent-soft:#3A2D14;
  --cross-bg:var(--inset);       /* בכהה: משטח מוגבה מהתמה + פס ענבר, לא חום */
  --inset:#212C5C; --inset-line:#3A4886;
  --btn-accent:var(--accent); --btn-accent-hover:var(--accent-strong);
  --on-btn-accent:var(--on-accent); --btn-accent-glow:var(--accent-glow);
  --warn:#F0B85C; --warn-bg:#3C2C13;
  --bad:#F59191; --bad-bg:#3E1F22;
  --shadow:0 1px 2px rgba(0,0,0,.28), 0 8px 22px -12px rgba(0,0,0,.45);
  --shadow-lift:0 2px 6px rgba(0,0,0,.3), 0 18px 38px -16px rgba(0,0,0,.55);
}}
:root[data-theme="dark"]{
  --on-navy:#0A1024;
  --navy-hover:#BCCCFF;          /* בכהה ה-hover מבהיר, לא מכהה */
  --btn-hover-bg:#2A3670;
  --accent:#F0BB66;
  --accent-strong:#FBD489;
  --on-accent:#2A1C06;
  --accent-glow:240,187,102;
  --go:#57D3A2; --go-strong:#7BE3BA; --on-go:#062419; --go-glow:87,211,162;
  /* אינדיגו רווי במקום אפור-כחול — פחות "עצוב", יותר עומק */
  --navy:#94AEFF; --navy-deep:#121C46; --navy-soft:#26336E;
  --navtile-bg:var(--navy-soft);
  --ink:#EEF2FF; --muted:#AAB7E2; --faint:#8492C4;
  --paper:#0A0F26; --paper-top:#1C2B68; --surface:#161F47; --raised:#212C5C;
  --line:#2C3A72; --line-strong:#4A59A0;
  --savory:#F0BB66; --savory-bg:#3D2F17;
  --sweet:#E895C0; --sweet-bg:#3E2135;
  --good:#57D3A2; --good-bg:#0F3527;
  --delivery:#6FD6E0; --delivery-bg:#10323A; --delivery-2:#4FAEBA;
  --violet:#AE94FF; --violet-bg:#241D4C;
  --paid:#8AB6FF; --paid-bg:#17265C;
  --accent-soft:#3A2D14;
  --cross-bg:var(--inset);       /* בכהה: משטח מוגבה מהתמה + פס ענבר, לא חום */
  --inset:#212C5C; --inset-line:#3A4886;
  --btn-accent:var(--accent); --btn-accent-hover:var(--accent-strong);
  --on-btn-accent:var(--on-accent); --btn-accent-glow:var(--accent-glow);
  --warn:#F0B85C; --warn-bg:#3C2C13;
  --bad:#F59191; --bad-bg:#3E1F22;
  --shadow:0 1px 2px rgba(0,0,0,.28), 0 8px 22px -12px rgba(0,0,0,.45);
  --shadow-lift:0 2px 6px rgba(0,0,0,.3), 0 18px 38px -16px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
/* הרקע ממשיך את הנייבי של ההדר ודוהה למטה — במקום משטח אפור שטוח,
   הדף נראה מואר מלמעלה וקשור לסרגל העליון. */
body{ margin:0; color:var(--ink);
  background:var(--paper);
  background-image:linear-gradient(180deg, var(--paper-top) 0, var(--paper) 520px);
  background-attachment:fixed;
  font-family:var(--he); font-size:15px; line-height:1.5;
  /* הכיווניות באה מ-<html dir> ולא מכאן — אחרת מעבר לאנגלית לא מהפך
     את הפריסה. שורות 337+ שומרות RTL על המסמכים, שנשארים בעברית. */
  -webkit-text-size-adjust:100%; }
h1,h2,h3,h4{margin:0; font-family:var(--display); font-weight:700; line-height:1.25; text-wrap:balance}
p{margin:0}
button,input,select,textarea{font:inherit; color:inherit}
a{color:var(--navy)}
:focus-visible{outline:2px solid var(--navy); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }

/* ═══════════════════ shell ═══════════════════ */
.topbar{ position:sticky; top:0; z-index:40;
  background:linear-gradient(180deg,#0D2257,#132C6B); color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.08), 0 6px 20px -8px rgba(13,34,87,.5); }
.topbar-in{ max-width:1140px; margin:0 auto; padding:13px 18px;
  display:flex; align-items:center; gap:16px; }
/* הלוגו הוא הדרך לחזור ללוח — מתבקש, ולכן הוא כפתור ולא תמונה */
.homebtn{ background:none; border:0; padding:0; margin:0; cursor:pointer;
  display:block; border-radius:8px; line-height:0;
  transition:opacity .15s, transform .08s }
.homebtn:hover{ opacity:.82 }
.homebtn:active{ transform:translateY(1px) }
.homebtn:focus-visible{ outline:2px solid rgba(255,255,255,.7); outline-offset:3px }
.topbar img{ height:42px; width:auto; display:block }
/* שם המערכת ליד הלוגו: לבן מלא ומודגש, ממורכז לגובה הלוגו (align-self:stretch
   מותח גם את הקו המפריד לכל הגובה). */
.topbar .wordmark{ font-family:var(--display); font-size:15px; font-weight:700; letter-spacing:.06em;
  color:#fff; align-self:stretch; display:flex; align-items:center; white-space:nowrap;
  border-inline-start:1px solid rgba(255,255,255,.22); padding-inline-start:16px; }
.topbar .spacer{flex:1}
.dbdot{ display:flex; align-items:center; gap:7px; font-size:12px; opacity:.75;
  font-variant-numeric:tabular-nums }
.dbdot i{ width:7px; height:7px; border-radius:50%; background:#5AD1A0; display:block }
.dbdot.off i{ background:#E0A64B }
.dbdot.bad i{ background:#EF9595 }
.themebtn{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:#fff; border-radius:9px; width:32px; height:32px; cursor:pointer; font-size:15px;
  display:grid; place-items:center; padding:0; line-height:1 }
.themebtn:hover{ background:rgba(255,255,255,.2) }

/* הסרגל גולל עם העמוד (רמי: אין טעם שיירד עם הגלילה) — רק הכותרת העליונה נצמדת */
nav.rail{ background:var(--surface); border-bottom:1px solid var(--line); z-index:30 }
/* הסרגל עם חיצים בקצוות — ראו syncRailArrows ב-app.js. החיצים יושבים ליד
   הסרגל ולא מעליו (רמי: "דורסים קצת את הטקסט"), ותופסים מקום רק כשהם מופיעים.
   ב-RTL הסרגל מתחיל מימין, ולכן order מציב כל חץ בצד הפיזי שלו. */
.rail-box{ display:flex; align-items:stretch; max-width:1140px; margin:0 auto }
.rail-box .rail-in{ flex:1; min-width:0 }
.rail-arrow{ flex:none; width:30px; border:0; padding:0; cursor:pointer; background:none;
  display:flex; align-items:center; justify-content:center; color:var(--accent-strong) }
.rail-arrow[hidden]{ display:none }
.rail-arrow svg{ width:22px; height:22px; padding:4px; border-radius:50%; background:var(--accent-soft);
  box-shadow:0 0 0 1px var(--accent); transition:transform .15s }
.rail-arrow:hover svg{ transform:scale(1.1) }
html[dir="rtl"] .rail-left{ order:3 }
html[dir="rtl"] .rail-right{ order:-1 }
.rail-in{ margin:0 auto; padding:0 12px; display:flex; gap:2px;
  overflow-x:auto; scrollbar-width:none }
.rail-in::-webkit-scrollbar{display:none}
.rail-in button{ background:none; border:0; padding:13px 14px; cursor:pointer;
  color:var(--muted); font-weight:600; font-size:14px; white-space:nowrap;
  border-bottom:2.5px solid transparent; transition:color .15s }
.rail-in button:hover{color:var(--ink)}
.rail-in button[aria-current="page"]{ color:var(--navy); border-bottom-color:var(--navy) }
.rail-in button .n{ display:inline-block; margin-inline-start:6px; font-size:11px;
  background:var(--navy-soft); color:var(--navy); border-radius:20px; padding:1px 6px;
  font-variant-numeric:tabular-nums; font-family:var(--en) }

main{ max-width:1140px; margin:0 auto; padding:22px 18px 90px }
/* כותרת עמוד ממורכזת, כמו בכותרת של אפליקציה: שם העמוד, שורת משנה, וקו
   ענבר קצר מתחת שעוטף אותם. פעולות (הצעה חדשה, רשימה חדשה) יורדות לשורה
   משלהן מתחת — לא נאבקות עם הכותרת על אותו קו. */
.page-head{ display:flex; flex-direction:column; align-items:center; gap:14px;
  text-align:center; margin-bottom:20px }
.page-head > div:not(.btn-row){ display:flex; flex-direction:column; align-items:center; min-width:0; max-width:100% }
.page-head h1{ font-size:26px; line-height:1.2 }
.page-head h1::after{ content:''; display:block; width:100%; height:3px; border-radius:3px;
  background:var(--accent); margin:8px auto 0 }
.page-head .sub{ color:var(--muted); font-size:14px; margin-top:8px; max-width:60ch }
.page-head .spacer{ display:none }
.page-head .btn-row{ justify-content:center }
/* כפתור חזרה של זרימה (חזרה לעריכה / לכרטיס) — קטן, מעל הכותרת */
/* לא לשורת הפעולות — שם הכפתור הראשון היה מקבל margin וקופץ 5px למעלה */
.page-head > div:not(.btn-row) > .btn:first-child{ margin-bottom:10px }
.page-head h1[style*="margin-top"]{ margin-top:0!important }

/* ═══════════════════ atoms ═══════════════════ */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:10px 16px; border-radius:10px; border:1px solid var(--line-strong);
  background:var(--raised); color:var(--ink); font-weight:700; font-size:14px;
  cursor:pointer; transition:background .15s,border-color .15s,color .15s,transform .06s }
.btn:hover{ background:var(--btn-hover-bg); border-color:var(--navy); color:var(--navy);
  box-shadow:0 2px 8px -4px rgba(20,27,46,.25) }
.btn:active{ transform:translateY(1px) }
.btn-primary{ background:var(--navy); border-color:var(--navy); color:var(--on-navy) }
.btn-primary:hover{ background:var(--navy-hover); border-color:var(--navy-hover);
  color:var(--on-navy); filter:none; transform:translateY(-1px);
  box-shadow:0 5px 14px -5px rgba(26,58,140,.55) }
.btn-sm{ padding:7px 11px; font-size:13px; border-radius:8px }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--muted) }
.btn-ghost:hover{ background:var(--navy-soft); color:var(--ink); border-color:var(--line-strong) }
.btn-danger:hover{ border-color:var(--bad); color:var(--bad) }
.btn[disabled]{ opacity:.45; cursor:not-allowed }
.btn-row{ display:flex; gap:9px; flex-wrap:wrap; align-items:center }
/* פעולות עמוד המסמך: שלושה כפתורים בשורה אחת גם בטלפון. flex-wrap נשאר,
   כך שאם יש יותר משלושה הם נשברים בהגינות ולא נחתכים. */
.doc-actions .t-short, .btn-row.tight .t-short{ display:none }
@media (max-width:620px){
  /* flex-wrap:wrap ולא nowrap: עם nowrap ארבעה כפתורים נדחסים לשורה אחת
     והטקסט — שהוא white-space:nowrap — גולש אחד על השני. עם wrap הם
     נשברים בהגינות, וכל שורה נמתחת לרוחב המלא. */
  .doc-actions, .btn-row.tight{ gap:7px; width:100%; flex-wrap:wrap }
  .doc-actions .btn, .btn-row.tight .btn{ flex:1 1 auto; min-width:0; white-space:nowrap;
    padding-inline:10px; font-size:13px }
  .doc-actions .t-long, .btn-row.tight .t-long{ display:none }
  .doc-actions .t-short, .btn-row.tight .t-short{ display:inline }
}

/* ═══════════════════ בחירת סטטוס ═══════════════════
   רשת שכל תא בה שווה ברוחב, כך שכל שורה מתמלאת והכפתורים מיושרים. כל
   סטטוס בגוון משלו, רקע רך — צבע שמסייע לזיהוי ולא צועק. הבחירה מסומנת
   במסגרת בצבע הסטטוס ובטקסט מודגש.
   ─────────────────────────────────────────────────── */
/* flex ולא grid: ב-grid השורה האחרונה משאירה תא ריק, וכאן כל שורה
   מתמלאת — שלושה כפתורים בשורה הראשונה ושניים רחבים יותר בשנייה.
   הגובה קבוע, כך ש"ממתינה לאישור" שנשבר לשתי שורות לא מגביה את השורה. */
.status-grid{ display:flex; flex-wrap:wrap; gap:8px }
.st-btn{
  --c:var(--muted); --bg:var(--paper);
  flex:1 1 92px; height:52px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:6px 8px; border-radius:10px;
  border:1.5px solid transparent; background:var(--bg); color:var(--c);
  font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; line-height:1.3;
  transition:border-color .14s, transform .06s, box-shadow .14s;
}
.st-btn:hover{ border-color:var(--c) }
.st-btn:active{ transform:translateY(1px) }
/* הנבחר מסומן במסגרת בצבע שלו — בלי טבעת נוספת ובלי הדגשת הטקסט */
.st-btn.on{ border-color:var(--c) }
.st-pending{ --c:var(--warn); --bg:var(--warn-bg) }
.st-approved{ --c:var(--good); --bg:var(--good-bg) }
.st-paid{ --c:var(--paid); --bg:var(--paid-bg) }
.st-done{ --c:var(--faint); --bg:var(--paper) }
.st-cancelled{ --c:var(--bad); --bg:var(--bad-bg) }
.st-lead, .st-quoted{ --c:var(--faint); --bg:var(--paper) }

/* שם הרשומה והסטטוס שלה באותה שורה */
.title-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:8px }
.title-row h1{ margin:0 }
/* תחתית עמוד המסמך — הערות ומחיקה, רחוק מהפעולות היומיומיות */
.doc-foot{ display:flex; justify-content:center; gap:9px; flex-wrap:wrap;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line) }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow) }
.card-pad{ padding:18px }
.card-head{ padding:15px 18px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px }
.card-head h2{ font-family:var(--display); font-size:16.5px; font-weight:600;
  letter-spacing:.01em }
.card-head .spacer{flex:1}

.pill{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:20px;
  font-size:12px; font-weight:700; white-space:nowrap }
.pill-neutral{ background:var(--navy-soft); color:var(--navy) }
.pill-info{ background:var(--navy-soft); color:var(--navy) }
.pill-good{ background:var(--good-bg); color:var(--good) }
.pill-done{ background:var(--paper); color:var(--muted); box-shadow:inset 0 0 0 1px var(--line) }
.pill-bad{ background:var(--bad-bg); color:var(--bad) }
.pill-warn{ background:var(--warn-bg); color:var(--warn) }
.pill-paid{ background:var(--paid-bg); color:var(--paid) }
.pill-violet{ background:var(--violet-bg); color:var(--violet) }
.pill-savory{ background:var(--savory-bg); color:var(--savory) }
.pill-sweet{ background:var(--sweet-bg); color:var(--sweet) }

/* כותרת-מיני מעל שדה או כרטיס. הייתה 11px באפור הדהוי ובקושי נקראה
   במובייל (רמי, 2026-09-20) — 12.5px, מרווח אותיות קטן יותר וצבע מוגבר. */
.lbl{ font-size:12.5px; font-weight:700; letter-spacing:.05em; color:var(--muted);
  text-transform:uppercase; font-family:var(--en) }
.num{ font-variant-numeric:tabular-nums; font-family:var(--en) }
.empty{ text-align:center; padding:38px 20px; color:var(--muted) }
.empty h3{ font-size:17px; margin-bottom:6px; color:var(--ink) }
.crown{ width:26px; height:auto; opacity:.4; margin:0 auto 12px; display:block }

/* ═══════════════════ forms ═══════════════════ */
.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }
.form-grid .full{ grid-column:1/-1 }
/* 1fr הוא minmax(auto,1fr), והמינימום שלו הוא min-content. בספארי
   רוחב ה-min-content של <select> הוא האופציה הארוכה ביותר — וזה מנפח
   את העמודה מעבר לרוחב המסך ומאפשר גרירה הצידה. minmax(0,1fr) פותר. */
/* שתי עמודות גם בטלפון. שדה שצריך רוחב מלא מקבל .full, ושלושה שדות
   קצרים שהולכים יחד יושבים ב-.trio — כך הטופס לא נמתח לעשרים שורות. */
.form-grid .trio{ grid-column:1/-1; display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px }
@media (max-width:620px){
  .form-grid{ gap:11px }
  .form-grid .trio{ gap:9px }
  /* עיר וכתובת הן שדות עם השלמה אוטומטית ועם רמז מתחתיהן. בחצי שורה
     בטלפון הן נראות חנוקות, ולכן הן נפרסות על כל הרוחב — כמו בטופס
     יצירת האירוע. בשולחני יש מקום לשתי עמודות, ושם זה נשאר. */
  .form-grid .wide-m{ grid-column:1/-1 }
}
.field{ display:flex; flex-direction:column; gap:5px; min-width:0 }
.field > label{ font-family:var(--display); font-size:13.5px; font-weight:600;
  color:var(--ink); letter-spacing:.015em }
.field .hint{ font-size:12.5px; color:var(--faint); line-height:1.5 }
/* גובה זהה לכל סוגי השדות. ל-select יש גובה אינטרינזי משלו בכל דפדפן,
   ולכן קובעים אותו במפורש — אחרת הוא נראה נמוך מהשדות שלצידו. */
.field input, .field select, .field textarea{
  width:100%; padding:10px 12px; border:1.5px solid var(--line-strong); border-radius:9px;
  background:var(--raised); transition:border-color .15s;
  font-size:15px; line-height:1.4; box-sizing:border-box }
.field input:not([type="checkbox"]), .field select{ height:44px }
.field select{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  padding-inline-end:34px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  /* background-position הוא פיזי ו-padding-inline-end לוגי. בעברית ה-padding
     נשמר בשמאל, ולכן גם החץ חייב לשבת בשמאל — אחרת הוא נצבע על הספרה
     האחרונה של הטקסט (זה מה שנראה כמו "12:00" עם 0 כפול). */
  background-position:13px 19px, 18px 19px;
}
html[dir="ltr"] .field select{
  background-position:calc(100% - 18px) 19px, calc(100% - 13px) 19px;
}
.field textarea{ height:auto; min-height:76px }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--navy) }
/* שדה חובה שלא מולא (requireField) */
.field.bad > label{ color:var(--bad) }
.field.bad input, .field.bad input:focus{ border-color:var(--bad); box-shadow:0 0 0 3px var(--bad-bg) }
.field input[type=number]{ font-variant-numeric:tabular-nums; font-family:var(--en) }
.field textarea{ min-height:74px; resize:vertical }
/* ═══════════════════ כותרת מקטע בטופס ═══════════════════
   הנוסח הקלאסי: הכותרת ממורכזת וקו דק נמשך משני צדיה. בלי הבולט שהיה
   כאן קודם, ובאותו גופן כותרות כמו יתר המערכת — קו אחיד בכל העמודים.
   ──────────────────────────────────────────────────────── */
.sec-head{
  grid-column:1/-1; display:flex; align-items:center; justify-content:center;
  gap:14px; margin:22px 0 4px; padding:0; border:0;
  font-family:var(--display); font-size:14.5px; font-weight:600;
  color:var(--navy); letter-spacing:.055em; text-align:center;
}
.sec-head::before, .sec-head::after{
  content:''; flex:1; height:1px; background:var(--line); min-width:18px;
}
.form-grid > .sec-head:first-child{ margin-top:2px }
.seg{ display:flex; gap:0; border:1.5px solid var(--line-strong); border-radius:9px; overflow:hidden; width:fit-content; max-width:100% }
.seg button{ padding:9px 15px; border:0; background:var(--surface); cursor:pointer;
  font-weight:600; font-size:13.5px; color:var(--muted); white-space:nowrap }
.seg button + button{ border-inline-start:1.5px solid var(--line-strong) }
.seg button.on{ background:var(--navy); color:var(--on-navy) }
/* מסנן נבחר — בכל מקום שמסננים בו (לשוניות אירועים/משלוחים/הצעות, טווח
   בחיובים) — בצבע הפעולה: ענבר בכהה, כחול בבהיר. אותו כלל כמו הצ׳יפים
   והקוביות בפניות. פקדי seg בתוך טפסים (כשרות, אזור) אינם מסננים ונשארים. */
.toolbar .seg button.on{ background:var(--btn-accent); border-color:var(--btn-accent);
  color:var(--on-btn-accent) }
.checks{ display:flex; flex-wrap:wrap; gap:11px 20px }
/* ברירת המחדל של WebKit מציירת ריבוע שחור בערכה כהה. פקד משלנו — באותם
   טוקנים של יתר השדות, ובלי תלות בערכת הצבעים של המערכת. */
input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; margin:0;
  /* .field input נותן padding:10px 12px לכל שדה. על תיבת סימון זה מנפח
     אותה ל-27×23 ומעקם את הריבוע — ולכן מאפסים כאן במפורש. */
  padding:0;
  width:21px; height:21px; flex:0 0 21px; box-sizing:border-box;
  border:1.5px solid var(--line-strong); border-radius:6px;
  background:var(--raised); cursor:pointer;
  display:inline-grid; place-content:center;
  transition:background .14s, border-color .14s;
}
input[type="checkbox"]:hover{ border-color:var(--navy) }
input[type="checkbox"]:checked{ background:var(--navy); border-color:var(--navy) }
input[type="checkbox"]:checked::before{
  content:'✓'; font-size:13px; font-weight:800; line-height:1; color:var(--on-navy);
}
input[type="checkbox"]:focus-visible{ outline:2px solid var(--navy); outline-offset:2px }
input[type="checkbox"]:disabled{ opacity:.45; cursor:not-allowed }
.chk{ display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-size:14px; font-weight:600; color:var(--ink) }

/* ═══════════════════ live calc panel ═══════════════════ */
.calc{ background:linear-gradient(165deg,var(--navy-deep),#16307A); color:#fff;
  border-radius:var(--r-lg); padding:18px; box-shadow:var(--shadow-lift) }
.calc h3{ font-size:15px; color:#fff; opacity:.85; font-family:var(--he); font-weight:700;
  letter-spacing:.04em; margin-bottom:14px }
.calc-rows{ display:flex; flex-direction:column; gap:1px }
.calc-row{ display:flex; align-items:baseline; gap:10px; padding:6px 0; font-size:13.5px }
.calc-row span{ opacity:.78 }
.calc-row b{ margin-inline-start:auto; font-variant-numeric:tabular-nums; font-family:var(--en);
  font-weight:600 }
.calc-row.sub{ font-size:12.5px; opacity:.7; padding:3px 0 }
.calc-tot{ margin-top:12px; padding-top:13px; border-top:1px solid rgba(255,255,255,.2);
  display:flex; align-items:baseline; gap:10px }
.calc-tot span{ font-size:13px; opacity:.8 }
.calc-tot b{ margin-inline-start:auto; font-size:25px; font-family:var(--en); font-weight:700;
  font-variant-numeric:tabular-nums }
.calc-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px }
.calc-chips .c{ font-size:11.5px; font-weight:700; background:rgba(255,255,255,.14);
  padding:3px 9px; border-radius:20px }
.calc-chips .c.alert{ background:rgba(224,166,75,.28) }
.calc-note{ margin-top:11px; font-size:12px; opacity:.7; line-height:1.5 }

.split{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:18px; align-items:start }
@media (max-width:900px){
  .split{ grid-template-columns:1fr }
  /* בדסקטופ הבלון בצד; במובייל הוא יורד מתחת לטופס ולא חוסם את השדות */
  .split .side{ order:2 }
  .sticky-side{ position:static }
}
.sticky-side{ position:sticky; top:84px }

/* ═══════════════════ stats ═══════════════════ */
/* שמונה קוביות: שתי עמודות בטלפון (ארבע שורות) וארבע בשולחני (שתי
   שורות). ארבע ולא שלוש — בשלוש נשארת שורה אחרונה עם שתי קוביות
   ומקום ריק, וזה מה שנראה לא מסודר. */
.stats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px; margin-bottom:22px; align-items:stretch }
@media (min-width:860px){ .stats{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.stat{ position:relative; display:flex; flex-direction:column; text-align:start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 15px 13px; overflow:hidden; width:100%;
  font:inherit; color:inherit; cursor:pointer;
  transition:border-color .15s, transform .08s, box-shadow .15s }
.stat::before{ content:''; position:absolute; inset-block-start:0; inset-inline:0;
  height:3px; background:var(--tint, var(--navy)) }
.stat:hover{ border-color:var(--tint, var(--navy)); transform:translateY(-2px);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.35) }
.stat:active{ transform:translateY(0) }
.stat .v{ font-size:32px; font-weight:800; font-family:var(--en); line-height:1.05;
  font-variant-numeric:tabular-nums; color:var(--tint, var(--navy)); letter-spacing:-.01em }
/* התווית נעצרת ב-14px: ב-15px "משלוחים בשבוע הקרוב" נשבר לשתי שורות */
.stat .k{ font-size:14px; color:var(--ink); font-weight:700; margin-top:4px }
.stat .d{ font-size:12.5px; color:var(--faint); margin-top:4px; line-height:1.45 }
.stat .go{ position:absolute; inset-block-start:12px; inset-inline-start:12px;
  font-size:13px; color:var(--faint); opacity:0; transition:opacity .15s }
.stat:hover .go{ opacity:1 }
.stat-navy{ --tint:var(--navy) }
.stat-amber{ --tint:var(--accent) }
.stat-green{ --tint:var(--go) }
.stat-warn{ --tint:var(--warn) }
.stat-sweet{ --tint:var(--sweet) }
.stat-delivery{ --tint:var(--delivery) }
.stat-violet{ --tint:var(--violet) }
.stat-paid{ --tint:var(--paid) }

/* ═══════════════════ event rows ═══════════════════ */
.ev-list{ display:flex; flex-direction:column; gap:9px }
.ev{ display:flex; align-items:stretch; gap:0; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  cursor:pointer; text-align:start; padding:0; width:100%;
  transition:border-color .15s, box-shadow .15s, transform .08s }
.ev:hover{ border-color:var(--line-strong); box-shadow:var(--shadow); transform:translateY(-1px) }
.ev .stripe{ width:4px; flex:0 0 4px; background:var(--line-strong) }
.ev.s-approved .stripe{ background:var(--good) }
.ev.s-quoted .stripe{ background:var(--navy) }
.ev.s-lead .stripe{ background:var(--line-strong) }
.ev.s-done .stripe{ background:var(--faint) }
.ev.s-cancelled .stripe{ background:var(--bad) }
.ev .date{ flex:0 0 62px; padding:10px 4px; text-align:center; background:var(--navy-soft);
  border-inline-end:1px solid var(--line); display:flex; flex-direction:column;
  justify-content:center }
.ev .date .d{ font-size:22px; font-weight:700; font-family:var(--en); line-height:1;
  font-variant-numeric:tabular-nums }
.ev .date .m{ font-size:11px; color:var(--muted); font-weight:600; margin-top:2px }
.ev .date .w{ font-size:10px; color:var(--faint); margin-top:2px; white-space:nowrap }
.ev .body{ flex:1; min-width:0; padding:10px 13px; display:flex; flex-direction:column; gap:4px }
.ev .t{ font-weight:700; font-size:15px; display:flex; align-items:center; gap:7px; flex-wrap:wrap }
.ev .meta{ font-size:12.5px; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 10px }
/* "28 מתוק" נשאר יחידה אחת ולא נשבר באמצע */
.ev .meta .q{ white-space:nowrap }
.ev .meta .num{ font-weight:600; color:var(--ink) }
.ev .side{ flex:0 0 auto; padding:10px 13px; display:flex; flex-direction:column;
  align-items:flex-end; justify-content:center; gap:5px }
.ev .amt{ font-family:var(--en); font-weight:700; font-size:14px; font-variant-numeric:tabular-nums }
/* "היום" מסומן בפס בצד ובתג, ולא בטבעת סביב כל השורה — עדין יותר,
   ולא מתחרה בגבול של הכרטיס. סטטוס הרשומה ממשיך להופיע בתג שבצד. */
.ev.today{ border-color:var(--line-strong) }
.ev.today .stripe{ width:6px; flex:0 0 6px; background:var(--accent) }
.ev.today .date{ background:var(--accent-soft, var(--navy-soft)) }
.pill-today{ background:var(--accent); color:var(--on-accent) }
/* השבוע הקרוב: "בעוד X ימים" עולה מהמטא הקטן לתג בולט ליד השם */
.pill-soon{ background:var(--accent-soft, var(--warn-bg)); color:var(--accent); border:1px solid var(--accent);
  font-size:13px; font-weight:800; padding-block:3px }
.day-sep{ display:flex; align-items:center; gap:10px; margin:16px 0 8px; color:var(--faint) }
.day-sep::after{ content:''; flex:1; height:1px; background:var(--line) }

.detail-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:2px 14px }
.dv{ padding:9px 0; border-bottom:1px solid var(--line) }
.dv .k{ font-size:11px; color:var(--faint); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; font-family:var(--en) }
.dv .v{ font-size:14.5px; font-weight:600; margin-top:2px }

.tbl{ width:100%; border-collapse:collapse; font-size:14px }
.tbl th{ text-align:start; font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--faint); font-family:var(--en); padding:8px 10px; border-bottom:1px solid var(--line) }
.tbl td{ padding:9px 10px; border-bottom:1px solid var(--line) }
.tbl tr:last-child td{ border-bottom:0 }
.tbl .num{ text-align:start }
.scroll-x{ overflow-x:auto }

.items{ display:flex; flex-direction:column; gap:0 }
/* שורת קרפ בהצעת משלוח: כמות · שם+רכיבים · מחיר. הרכיבים היו span
   בשורה אחת עם השם, ולכן שורה ארוכה גלשה מעבר למסך בטלפון (והמחיר נמרח
   עליה). עכשיו השם והרכיבים בעמודה, הרכיבים מוגבלים לשתי שורות, והמחיר
   שומר לעצמו רוחב קבוע. */
.item-row{ display:flex; align-items:center; gap:10px; padding:8px 0;
  border-bottom:1px solid var(--line); min-width:0 }
.item-row:last-child{ border-bottom:0 }
.item-row .q{ flex:0 0 54px }
.item-row .q input{ width:100%; padding:6px 8px; border:1.5px solid var(--line-strong);
  border-radius:8px; text-align:center; font-family:var(--en); background:var(--raised); color:var(--ink) }
.item-row .nm{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:1px }
.item-row .nm b{ font-size:14px; font-weight:700; overflow-wrap:anywhere }
.item-row .nm .d{ font-size:12px; color:var(--muted); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; overflow-wrap:anywhere }
.item-row .pr{ flex:0 0 64px; text-align:end; font-family:var(--en); font-size:13px;
  color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap }
/* שורה בלי כמות דהויה — אבל לא בזמן שעומדים בשדה שלה. הלחיצה על
   המספר היא כבר הצהרה שהשורה נכנסת, ואם יוצאים ממנה ריקה היא חוזרת
   לדהות מאליה. (רמי, 2026-09-22) */
.item-row.zero{ opacity:.45; transition:opacity .12s }
.item-row.zero:has(input:focus){ opacity:1 }

/* ───── עורך רשימת הכנות (עריכה ידנית מעל החוקיות) ───── */
.pe-wrap{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 22px }
.pe-sec{ min-width:0 }
.pe-h{ font-weight:700; font-size:13.5px; margin-bottom:6px }
.pe-rows{ display:flex; flex-direction:column }
.pe-row{ display:grid; grid-template-columns:minmax(0,1fr) 108px 30px; gap:8px; align-items:center;
  padding:5px 0; border-bottom:1px solid var(--line); min-width:0 }
.pe-row:last-child{ border-bottom:0 }
.pe-name{ display:flex; flex-direction:column; min-width:0; font-family:var(--en); direction:ltr; text-align:right }
.pe-name b{ font-size:13.5px; font-weight:600; overflow-wrap:anywhere }
.pe-name small{ font-size:11px; color:var(--muted) }
.pe-qty{ width:100%; padding:5px 8px; border:1.5px solid var(--line-strong); border-radius:8px;
  font-family:var(--en); font-size:13px; direction:ltr; text-align:center; background:var(--raised); color:var(--ink) }
.pe-qty::placeholder{ color:var(--muted); opacity:1 }
.pe-row.man .pe-qty{ border-color:var(--accent); background:var(--accent-soft); font-weight:700 }
.pe-row.off .pe-name{ text-decoration:line-through; opacity:.45 }
.pe-row.off .pe-qty{ opacity:.35 }
.pe-x{ width:30px; height:30px; border:1px solid var(--line-strong); border-radius:8px; background:var(--raised);
  color:var(--muted); cursor:pointer; font-size:13px; line-height:1 }
.pe-x:hover{ color:var(--bad); border-color:var(--bad) }
.pe-row.off .pe-x:hover{ color:var(--good); border-color:var(--good) }
.pe-add{ margin-top:8px }
.pe-add select{ width:100%; padding:7px 10px; border:1.5px dashed var(--line-strong); border-radius:8px;
  background:var(--raised); color:var(--navy); font:inherit; font-weight:700; cursor:pointer }
.pe-free{ margin-top:8px; display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:6px; align-items:center }
.pe-free #pe-free-name{ grid-column:1/-1 }
.pe-free input{ padding:6px 8px; border:1.5px solid var(--line-strong); border-radius:8px; background:var(--raised); color:var(--ink); font:inherit; min-width:0 }
@media (max-width:620px){
  .pe-wrap{ grid-template-columns:1fr }
  .pe-row{ grid-template-columns:minmax(0,1fr) 92px 30px }
}

.toast{ position:fixed; inset-block-end:20px; inset-inline-start:50%; transform:translateX(50%);
  z-index:70;
  background:var(--navy-deep); color:#fff; padding:11px 20px; border-radius:30px;
  font-size:14px; font-weight:600; box-shadow:var(--shadow-lift); z-index:100;
  max-width:90vw; text-align:center }
.modal-bg{ position:fixed; inset:0; background:rgba(8,13,31,.55); z-index:90;
  display:flex; align-items:center; justify-content:center; padding:18px }
.modal{ background:var(--surface); border-radius:var(--r-lg); max-width:520px; width:100%;
  box-shadow:var(--shadow-lift); max-height:88vh; overflow:auto }

/* ═══════════════════ document preview ═══════════════════ */
.doc-frame{ background:#C9CFDC; border-radius:var(--r-lg); padding:16px; overflow:hidden }
:root[data-theme="dark"] .doc-frame{ background:#0A0F1F }
/* zoom (ולא transform) — כך תיבת הפריסה מתכווצת יחד עם התצוגה,
   המסמך נשאר ממורכז, ואין גלילה אופקית שמבריחה אותו הצידה. */
.doc-scale{ margin:0 auto; width:fit-content; transform-origin:top center }
.doc{ direction:rtl }
.doc .sheet{ width:210mm; min-height:297mm; background:#fff; color:#000;
  box-shadow:0 4px 24px rgba(0,0,0,.28); margin:0 auto 14px; position:relative;
  display:flex; flex-direction:column }
.doc .sheet:last-child{ margin-bottom:0 }

/* — 1. הצעת אירוע — */
.doc-event .sheet{ padding:11mm 12mm 5mm; font-family:var(--he); font-size:11.5pt; color:#000 }
.eq-head{ text-align:center; margin-bottom:5mm }
.eq-logo{ height:22mm; width:auto }
.eq-date{ text-align:left; font-size:11pt; color:#666 }
.eq-to{ font-size:12pt; margin-top:1mm }
.eq-to b{ color:#0D2257 }
.doc .rule{ border:0; border-top:.75pt solid #1A3A8C; margin:2mm 0 }
.eq-title{ text-align:center; font-size:14pt; font-weight:700; color:#0D2257;
  margin:3mm 0 1.5mm; line-height:1.45; font-family:var(--display) }
.eq-sec{ font-size:13pt; font-weight:700; color:#0D2257; margin:4mm 0 1.8mm;
  font-family:var(--display) }
.eq-crepe{ display:flex; gap:3mm; align-items:flex-start; margin:0 0 1.1mm; padding-inline-start:6mm }
.eq-crepe-name{ font-weight:700; flex:0 0 auto; white-space:nowrap }
.eq-crepe-ing{ font-size:10pt; color:#808080; line-height:1.35 }
.eq-extras{ font-size:10pt; color:#808080; font-weight:700; margin:3mm 0 0; padding-inline-start:16mm }
.eq-list{ margin:0; padding-inline-start:9mm; list-style:none }
.eq-list li{ margin-bottom:1.1mm; position:relative; padding-inline-start:5mm }
.eq-list li::before{ content:'•'; position:absolute; inset-inline-start:0; color:#1A3A8C }
.eq-price{ width:100%; border-collapse:collapse; margin-top:2mm; color:#0D2257 }
.eq-price td{ padding:2mm 4mm; color:#0D2257; font-size:12pt }
.eq-price td:last-child{ text-align:left; font-family:var(--en); font-variant-numeric:tabular-nums }
.eq-price tr.hl td{ background:#D6E0F5; font-weight:700; font-size:13pt }
.eq-terms{ margin-top:3mm; font-weight:700; display:flex; flex-direction:column; gap:1.2mm }
.eq-sign{ margin-top:auto; padding-top:8mm; font-weight:700; font-size:11pt }
.eq-foot{ margin-top:3mm; text-align:center; font-size:10pt; color:#666;
  border-top:.5pt solid #ddd; padding-top:1.5mm }
.doc-event .sheet:first-child .eq-foot{ margin-top:auto }

/* — 2. הצעת משלוח — */
.doc-delivery .sheet{ padding:19mm 19mm 14mm; font-family:var(--he); color:#000 }
.dq-head{ text-align:center }
.dq-logo{ height:28mm; width:auto; margin:0 auto }
.dq-branches{ font-size:8.5pt; color:#707070; margin-top:1.5mm }
.dq-thick{ border:0; border-top:1.75pt solid #1A3A8C; margin:4mm 0 5mm }
.dq-meta{ display:flex; flex-direction:row-reverse; justify-content:space-between; align-items:baseline }
.dq-doc-date{ font-size:9.5pt; color:#707070 }
.dq-to{ font-size:11pt; font-weight:700; color:#0D2257 }
.dq-title{ text-align:center; font-size:15pt; font-weight:800; color:#1A3A8C; margin:7mm 0 2mm;
  font-family:var(--display) }
.dq-sub{ text-align:center; font-size:13pt; font-weight:700; color:#1A3A8C; margin-bottom:5mm;
  font-family:var(--display) }
.dq-sec{ font-size:12.5pt; font-weight:800; color:#1A3A8C; border-bottom:.75pt solid #1A3A8C;
  padding-bottom:1.5mm; margin:6mm 0 3mm }
.dq-line{ display:flex; gap:2mm; align-items:baseline; margin-bottom:1.7mm; padding-inline-end:2mm }
.dq-line .dq-n{ font-weight:800; color:#0D2257; font-family:var(--en); flex:0 0 7mm;
  font-size:10.5pt; font-variant-numeric:tabular-nums }
.dq-line .dq-name{ font-weight:700; color:#1A3A8C; font-size:10.5pt; flex:0 0 auto }
.dq-line .dq-sep{ color:#707070; font-size:10pt }
.dq-line .dq-desc{ font-size:10pt; color:#333; line-height:1.35 }
.dq-breakdown{ display:flex; gap:3mm; justify-content:center; font-size:10pt; color:#333;
  margin:5mm 0 2mm; flex-wrap:wrap }
.dq-breakdown .dq-pipe{ color:#C9D2E6 }
.dq-total{ display:flex; align-items:center; gap:4mm; background:#EAF0FB; border-radius:2mm;
  padding:4mm 6mm; margin-top:3mm; font-size:11.5pt; font-weight:700; color:#0D2257 }
.dq-total b{ margin-inline-start:auto; font-size:13pt; font-family:var(--en);
  font-variant-numeric:tabular-nums }
.dq-bottom{ margin-top:auto; padding-top:10mm }
.dq-hair{ border:0; border-top:.5pt solid #C9D2E6; margin:2.5mm 0 }
.dq-sign{ font-size:10pt; font-weight:600; color:#333; text-align:center }
.dq-foot{ text-align:center; font-size:8.5pt; color:#707070; margin-top:2mm }

/* — 3. רשימת הכנות — */
.doc-prep .sheet{ font-family:var(--en); color:#1a1a1a; padding:0 }
.pl-head{ background:#0D2257; color:#fff; padding:7mm 9mm 6mm }
.pl-head-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:6mm;
  direction:ltr }
.pl-brand{ font-size:9pt; letter-spacing:.4em; text-transform:uppercase; font-weight:400;
  opacity:.62 }
.pl-head h1{ font-size:20pt; font-weight:700; margin-top:2mm; font-family:var(--en) }
.pl-logo{ height:17mm; width:auto }
.pl-meta{ display:flex; border-top:1px solid rgba(255,255,255,.18); padding-top:4mm;
  margin-top:5mm; direction:ltr }
.pl-meta > div{ flex:1; border-right:1px solid rgba(255,255,255,.18); padding:0 4mm }
.pl-meta > div:first-child{ padding-left:0 }
.pl-meta > div:last-child{ border-right:0 }
.pl-meta span{ display:block; font-size:7.5pt; letter-spacing:.18em; text-transform:uppercase;
  opacity:.55 }
.pl-meta b{ display:block; font-size:10.5pt; font-weight:600; margin-top:1mm }
.pl-cols{ display:flex; gap:0; direction:ltr; flex:1 }
.pl-col{ flex:1; padding:5mm 7mm 3mm; min-width:0 }
.pl-col + .pl-col{ border-left:1px solid #E1E6F2 }
.pl-col-head{ display:flex; align-items:center; gap:3mm; margin-bottom:3mm }
.pl-col-head h2{ font-size:14pt; font-family:var(--en); font-weight:700 }
.pl-sav .pl-col-head h2{ color:#C8861E }
.pl-swt .pl-col-head h2{ color:#8B3A62 }
.pl-count{ font-size:8pt; font-weight:700; padding:1mm 2.5mm; border-radius:20px;
  letter-spacing:.04em }
.pl-sav .pl-count{ background:#FBF3E4; color:#C8861E }
.pl-swt .pl-count{ background:#F9EDF3; color:#8B3A62 }
.pl-menu{ display:flex; flex-wrap:wrap; gap:1.5mm; align-items:center; margin-bottom:4mm }
.pl-menu-l{ font-size:7pt; letter-spacing:.16em; text-transform:uppercase; color:#626C8C;
  margin-right:1mm }
.pl-chip{ font-size:7.5pt; font-weight:600; background:#F4F6FB; border:.5pt solid #E1E6F2;
  padding:.8mm 2mm; border-radius:20px; color:#141B2E }
.pl-table{ width:100%; border-collapse:collapse; color:#1a1a1a }
.pl-table td{ padding:1.2mm 0; border-bottom:.5pt solid #EEF1F7; font-size:9.5pt;
  vertical-align:middle }
.pl-item{ font-weight:600 }
/* הערת המרכיב יורדת לשורה משלה — קריא יותר ולא מרחיב את הטבלה */
.pl-note{ display:block; font-size:7.5pt; color:#626C8C; font-weight:400; margin-top:.4mm }
.pl-qty{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;
  font-weight:500; padding-left:3mm }
.pl-crepes{ display:flex; align-items:center; justify-content:space-between; margin-top:3mm;
  padding:2.5mm 3mm; border-radius:1.5mm; font-size:10pt; font-weight:700 }
.pl-sav .pl-crepes{ background:#FBF3E4; color:#8A5B10 }
.pl-swt .pl-crepes{ background:#F9EDF3; color:#6B2A4A }
.pl-crepes b{ font-size:13pt; font-family:var(--en) }
.pl-he{ direction:rtl; padding:0 8mm; font-family:var(--he) }
.pl-remember{ border:.75pt solid #C9D2E6; border-radius:2mm; padding:4mm 5mm }
.pl-remember h3{ font-size:11pt; color:#0D2257; margin-bottom:2.5mm; font-family:var(--display) }

/* שלוש עמודות — כמו במערכת המקורית. ששת הפריטים נכנסים לשתי שורות
   במקום שש, וזה מה שמחזיר את הרשימה לעמוד אחד. */
.pl-remember-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5mm 6mm }
.pl-rem-item{ display:flex; align-items:baseline; gap:2mm; font-size:9.5pt;
  border-bottom:.5pt dotted #D8DEEC; padding-bottom:1mm }
.pl-rem-k{ color:#1a1a1a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pl-rem-v{ margin-inline-start:auto; font-weight:700; font-family:var(--en);
  direction:rtl; unicode-bidi:isolate; white-space:nowrap; color:#0D2257 }
.pl-equip{ direction:rtl; background:#0D2257; color:#fff; margin:5mm 8mm 0; padding:4mm 5mm;
  border-radius:2mm; font-family:var(--he) }
.pl-equip h3{ font-size:10.5pt; margin-bottom:2mm; font-family:var(--display); opacity:.85 }
.pl-equip-chips{ display:flex; flex-wrap:wrap; gap:1.5mm }
.pl-equip-chips span{ font-size:8.5pt; font-weight:600; background:rgba(255,255,255,.12);
  border:.5pt solid rgba(255,255,255,.22); padding:1mm 2.5mm; border-radius:20px }

/* ═══════════════════ print ═══════════════════ */
@page{ size:A4; margin:0 }
@media print{
  /* כל מה שאינו המסמך — יורד. אלמנטים קבועים/דביקים חייבים לרדת במיוחד:
     בהדפסה הם חוזרים על עצמם בכל עמוד וזה מה שדחף את הפוטר לעמוד נוסף. */
  .topbar, nav.rail, .tabbar, .form-actions, .sheet-bg, .no-print{ display:none!important }
  html, body{ height:auto!important; overflow:visible!important; background:#fff }
  main{ max-width:none; padding:0; margin:0 }
  .doc-frame{ background:#fff; padding:0; border-radius:0; overflow:visible; height:auto!important }
  .doc-scale{ transform:none!important; zoom:1!important; width:auto; margin:0 }

  .doc .sheet{ box-shadow:none; margin:0; border-radius:0; width:210mm; box-sizing:border-box }

  /* הצעת אירוע: שני עמודים קבועים. גובה מדויק מונע גלישה של מילימטר
     בודד לעמוד שלישי — וזה מה שדחף קודם את הפוטר לעמוד נפרד. */
  .doc-event .sheet{
    height:297mm; min-height:0; max-height:297mm; overflow:hidden;
    break-inside:avoid; page-break-inside:avoid;
    break-after:page; page-break-after:always;
  }
  .doc-event .sheet:last-child{ break-after:auto; page-break-after:auto }

  /* הצעת משלוח ורשימת הכנות: עמוד אחד בגובה התוכן — בדיוק כמו במערכת
     המקורית, שהפיקה עמוד יחיד ארוך ולא A4. גובה העמוד עצמו נקבע
     דינמית ב-JS דרך @page (ראה setPageSize), ולכן min-height:0 כאן. */
  .doc-delivery .sheet, .doc-prep .sheet{
    height:auto; min-height:0; overflow:visible;
    break-inside:auto; page-break-inside:auto;
  }
  .pl-table tr, .pl-crepes, .pl-remember, .pl-equip, .pl-col-head,
  .dq-line, .dq-total, .dq-bottom, .eq-crepe{
    break-inside:avoid; page-break-inside:avoid;
  }
  .pl-head{ break-after:avoid }
  .print-hide{ display:none!important }
}

/* ═══════════════════ עמוד כניסה ═══════════════════ */
.signin-wrap{ min-height:calc(100vh - 160px); display:flex; align-items:center;
  justify-content:center; padding:8px 0 40px }
.signin{ width:100%; max-width:392px; text-align:center }
.signin-mark{ display:flex; justify-content:center; margin-bottom:26px }
/* הלוגו הלבן נועד לרקע הכחול של הכותרת; מסך הכניסה בבהיר הוא בהיר, ולכן
   שם הגרסה הכחולה. ברירת המחדל בהירה; הכהה גוברת בשני המסלולים
   (העדפת מערכת בלי בחירה ידנית, או בחירה ידנית של כהה). */
.signin-mark img{ height:82px; width:auto }
.signin-mark .logo-dark{ display:none; filter:drop-shadow(0 6px 18px rgba(0,0,0,.3)) }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .signin-mark .logo-light{ display:none }
  :root:not([data-theme="light"]) .signin-mark .logo-dark{ display:block } }
:root[data-theme="dark"] .signin-mark .logo-light{ display:none }
:root[data-theme="dark"] .signin-mark .logo-dark{ display:block }

.signin form{ background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:26px 22px 22px; box-shadow:var(--shadow-lift);
  position:relative; overflow:hidden }
.signin form::before{ content:''; position:absolute; inset-block-start:0; inset-inline:0;
  height:3px; background:linear-gradient(90deg,var(--accent),var(--navy)) }
.signin h1{ font-size:21px; margin-bottom:5px }
.signin-sub{ color:var(--muted); font-size:13px; margin-bottom:22px }
.signin-fields{ display:flex; flex-direction:column; gap:14px; text-align:start }
.signin .field input{ padding:13px 14px; font-size:15px }
.signin-go{ width:100%; margin-top:20px; padding:14px; font-size:15.5px }
.signin-reset{ width:100%; margin-top:9px; font-size:13px }
.signin-err{ margin-top:14px; background:var(--bad-bg); color:var(--bad);
  border:1px solid var(--bad); border-radius:9px; padding:10px 12px;
  font-size:13.5px; font-weight:600; text-align:start }
.signin-foot{ margin-top:18px; color:var(--faint); font-size:12.5px }

/* ═══════════════════ כפתורי ניווט בלוח הבקרה ═══════════════════
   קוביות קטנות שנראות כמו כפתורים — נפרדות מקוביות הנתונים הצבעוניות
   שמתחתן, כדי שיהיה ברור מה מנווט ומה מציג מידע.
   ───────────────────────────────────────────────────────────────── */
/* ═══════════════════ ארבעת השערים בלוח ═══════════════════
   כל שער בצבע הישות שלו: פס עליון, אייקון בעיגול צבוע, והמספר בצבע.
   החץ הקטן הוא האפשרות (affordance) שאומרת שזה נלחץ.
   ─────────────────────────────────────────────────────── */
/* שישה שערים: שלוש עמודות בשולחני ושתיים בטלפון — 3+3 ו-2+2+2, בלי
   שורה אחרונה חסרה. */
.navtiles{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;
  margin-bottom:12px }
/* רקע בגוון הישות, ולא פס עליון: כך ארבעת השערים הם להקה אחת שנבדלת
   מקוביות הנתונים שמתחתיהן, ולא עוד ארבעה כרטיסים זהים בשורה. */
/* בטעינה הראשונית העמוד מתרנדר כמה פעמים (מתחבר → חי → פרופיל). אם הסמן
   עומד על שער או כפתור, כל רינדור מחזיר את האלמנט למצב הרגיל ומריץ מחדש את
   מעבר ה-hover — ריצוד. עד שהנתונים הגיעו (html.preload) אין מעברים בכלל. */
html.preload *, html.preload *::before, html.preload *::after{ transition:none!important }
.navtile{
  --c:var(--navy);
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:10px;
  background:var(--navtile-bg); border:1px solid var(--line-strong);
  border-radius:var(--r); box-shadow:var(--shadow);
  padding:12px 13px; cursor:pointer; font:inherit; color:var(--ink);
  text-align:start;
  transition:border-color .15s, transform .08s, box-shadow .15s;
}
.navtile:hover{ transform:translateY(-2px); box-shadow:0 8px 22px -12px var(--c) }
.navtile:active{ transform:translateY(0) }
/* הסמל לבד, בלי מסגרת — גדול יותר ובצבע הישות. הריבוע שהיה מסביבו
   רק הקטין אותו ואמר "עוד כפתור". */
.navtile .nt-ico{
  flex:0 0 auto; width:26px; text-align:center;
  font-size:22px; line-height:1; color:var(--c);
}
.navtile .nt-k{ font-size:15px; font-weight:700; color:var(--ink); min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.navtile .nt-go{ margin-inline-start:auto; font-size:14px; color:var(--c);
  opacity:.5; transition:opacity .15s, transform .15s }
.navtile:hover .nt-go{ opacity:1; color:var(--c); transform:translateX(-3px) }

/* צבע אחיד לארבעתם. גוון לכל ישות יצר ארבעה בלוקים צועקים בראש העמוד
   ובלע את קוביות הנתונים שמתחתיהן — השערים הם ניווט, לא נתונים. */

@media (max-width:560px){
  .navtiles{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px }
  .navtile{ padding:10px 11px; gap:8px }
  .navtile .nt-ico{ width:24px; font-size:20px }
  .navtile .nt-k{ font-size:14.5px }
}

/* שני כפתורי ההצעה בראש הלוח — ענבר, אבל נמוכים ושקטים כדי שלא יתחרו
   בשערים ובקוביות. שורה אחת בכל רוחב, גם בטלפון. */
.quick-new{ display:flex; gap:10px; margin-bottom:16px }
.quick-new .btn{ flex:1 1 0; min-width:0; white-space:nowrap;
  padding:8px 12px; font-size:15px; border-radius:var(--r) }
@media (max-width:560px){
  .quick-new{ gap:9px; margin-bottom:14px }
  .quick-new .btn{ padding:8px 6px; font-size:14.5px }
}

.backbtn{ margin-bottom:2px }

/* ═══════════════════ סרגל פעולות דביק לטפסים ═══════════════════ */
/* אותו נייבי כמו הסרגל העליון — הדר ופוטר נראים כזוג */
.form-actions{
  position:sticky; inset-block-end:0; z-index:20;
  display:flex; gap:10px; justify-content:flex-end; align-items:center;
  margin:14px -18px -90px; padding:13px 18px;
  background:linear-gradient(0deg,#0D2257,#132C6B);
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 -6px 20px -8px rgba(13,34,87,.45);
}
.form-actions .btn{ min-width:112px }
.form-actions .btn-ghost{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.22);
  color:rgba(255,255,255,.88) }
.form-actions .btn-ghost:hover{ background:rgba(255,255,255,.2); color:#fff;
  border-color:rgba(255,255,255,.4) }
.form-actions .btn-primary{ background:#fff; border-color:#fff; color:#0D2257 }
.form-actions .btn-primary:hover{ background:#EAF0FB; border-color:#EAF0FB; color:#0D2257;
  filter:none }
@media (max-width:620px){
  .form-actions{ margin:14px -18px -90px; padding:12px 16px; gap:8px }
  /* שלושה כפתורים בשורה אחת: בלי גלישה לשתי שורות, שמגביהה את הסרגל
     ומזיזה אותו מעל סרגל הניווט */
  .form-actions .btn{ flex:1; min-width:0; white-space:nowrap;
    padding-inline:10px; font-size:13.5px }
}
.ev.s-pending .stripe{ background:var(--warn) }
.ev.s-paid .stripe{ background:var(--good) }

/* ═══════════════════ ניווט מובייל: סרגל תחתון קבוע ═══════════════════
   שש לשוניות לא נכנסות לרוחב טלפון, וסרגל נגלל אופקית מרגיש כמו דף
   שבורח הצידה. במובייל עוברים לסרגל תחתון קבוע — ארבע לשוניות ו"עוד".
   ──────────────────────────────────────────────────────────────────── */
/* overflow-x:hidden היה הופך את body למכל-גלילה ושובר position:sticky.
   clip חוסם גלישה אופקית בלי ליצור מכל גלילה — ולכן הסרגלים הדביקים עובדים. */
html, body{ overflow-x:clip; overscroll-behavior-x:none }

.tabbar{ display:none }
@media (max-width:760px){
  nav.rail{ display:none }
  main{ padding-bottom:calc(var(--tabbar-total) + 24px) }
  .tabbar{
    display:flex; position:fixed; inset-inline:0; inset-block-end:0; z-index:50;
    background:linear-gradient(0deg,#0D2257,#132C6B);
    border-top:1px solid rgba(255,255,255,.12);
    box-shadow:0 -6px 20px -8px rgba(13,34,87,.5);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .tabbar button{
    flex:1; min-width:0; background:none; border:0; cursor:pointer;
    padding:10px 2px 11px; color:rgba(255,255,255,.62); font-weight:700; font-size:11px;
    display:flex; flex-direction:column; align-items:center; gap:5px;
    border-top:2.5px solid transparent; margin-top:-1px;
  }
  .tabbar button .ico{ font-size:23px; line-height:1 }
  .tabbar button[aria-current="page"] .ico{ transform:scale(1.06) }
  .tabbar button[aria-current="page"]{ color:#fff; border-top-color:var(--accent) }
  .form-actions{ inset-block-end:var(--tabbar-total); margin-bottom:calc(-1 * var(--tabbar-total) - 24px) }
  /* iOS במצב standalone מקטין את חלון הפריסה כשהמקלדת עולה ולא תמיד מחזיר
     אותו — ואז bottom:0 מצביע על תחתית מוקטנת והסרגלים נתקעים באמצע המסך.
     ההיסט מחזיר אותם לתחתית שהמשתמש רואה (ראה syncBottomBars). */
  .tabbar, .form-actions{ transform:translateY(var(--bars-shift, 0px));
    transition:transform .18s ease, opacity .14s ease }
  /* מקלידים — הסרגלים יורדים מהמסך ומפנים את כל הגובה לטופס */
  :root[data-kb] .tabbar, :root[data-kb] .form-actions{
    transform:translateY(110%); opacity:0; pointer-events:none;
  }
  :root[data-kb] main{ padding-bottom:24px }
  @media (prefers-reduced-motion:reduce){
    .tabbar, .form-actions{ transition:none }
  }
  /* ההודעה עולה מעל סרגל הניווט ולא מתחתיו */
  .toast{ inset-block-end:calc(var(--tabbar-total) + 14px) }
  .page-head h1{ font-size:22px }
  @supports not (backdrop-filter: blur(4px)){ .tabbar{ background:var(--surface) } }
}

/* גיליון "עוד" */
.sheet-bg{ position:fixed; inset:0; background:rgba(8,13,31,.5); z-index:60;
  display:flex; align-items:flex-end }
.sheet-menu{ background:var(--surface); width:100%; border-radius:18px 18px 0 0;
  padding:10px 0 calc(14px + env(safe-area-inset-bottom));
  /* לא יותר משמונים אחוז מהמסך: לבעלים יש עשרה פריטים, ובלי הגבלה
     התפריט כיסה הכל ולא נשאר רקע ללחוץ עליו כדי לסגור */
  max-height:80vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  box-shadow:var(--shadow-lift) }
/* הידית היא כפתור סגירה — אזור מגע גדול מהפס עצמו */
.sheet-menu .grip{ width:40px; height:4px; border-radius:4px; background:var(--line-strong);
  margin:4px auto 12px; cursor:pointer; position:relative }
.sheet-menu .grip::after{ content:''; position:absolute; inset:-14px -40px }
.sheet-menu button{ width:100%; background:none; border:0; text-align:start;
  padding:14px 22px; font-size:15px; font-weight:600; color:var(--ink); cursor:pointer;
  display:flex; align-items:center; gap:12px }
.sheet-menu button:active{ background:var(--navy-soft) }
/* הסמל בעמודה משלו — גם כדי שהתוויות יתחילו באותו קו, וגם כי צומת
   הטקסט חייב להכיל את התווית לבדה כדי שהתרגום יזהה אותה. */
.sheet-menu .mi-ico{ flex:0 0 18px; display:inline-flex; align-items:center;
  justify-content:center; color:var(--muted); font-size:15px }
.sheet-menu hr{ border:0; border-top:1px solid var(--line); margin:6px 0 }

/* ═══════════════════ שדות תאריך ושעה ═══════════════════
   ב-RTL הדפדפן מיישר את תוכן שדה התאריך שמאלה ומשאיר רווח מוזר.
   direction:ltr שומר על סדר הספרות, text-align:right מצמיד לשדה.
   ──────────────────────────────────────────────────────── */
input[type="date"], input[type="time"]{
  direction:ltr; text-align:right; -webkit-appearance:none; appearance:none;
  min-height:44px; font-variant-numeric:tabular-nums; font-family:var(--en);
}
input[type="date"]::-webkit-date-and-time-value{ text-align:right }
input[type="date"]::-webkit-calendar-picker-indicator{ margin-inline-start:0; opacity:.55 }

/* ═══════════════════ שדה תאריך משלנו ═══════════════════
   הטקסט הוא שדה רגיל ב-dd/mm/yyyy (הדפדפן לא נותן לשלוט בפורמט שלו),
   והשדה המקורי יושב מאחורי הכפתור — נוכח בפריסה כדי ש-showPicker יעבוד,
   אבל שקוף. מי שמעדיף להקליד, מקליד.
   ────────────────────────────────────────────────────── */
.datewrap{ position:relative; display:flex; align-items:center }
/* השדה עצמו LTR כדי שסדר הספרות יישמר, והעוטף RTL. לכן כאן דווקא
   מיקום פיזי ולא לוגי: padding-inline-end של שדה LTR מצביע ימינה,
   ו-inset-inline-end של עוטף RTL מצביע שמאלה — והכפתור היה נדרס על
   התאריך. left לשניהם תמיד מסכים עם עצמו. */
.datewrap .datetext{ width:100%; padding-left:44px; padding-right:12px;
  font-family:var(--en); font-variant-numeric:tabular-nums; direction:ltr;
  text-align:right }
.datewrap .datetext.bad{ border-color:var(--bad); color:var(--bad) }
.datewrap .datebtn{
  position:absolute; left:6px; width:32px; height:32px;
  display:grid; place-content:center; border:0; border-radius:8px;
  background:var(--navy-soft); color:var(--navy);
  cursor:pointer; pointer-events:none;
}
.datewrap .datenative{
  position:absolute; left:6px; width:32px; height:32px;
  opacity:0; padding:0; margin:0; border:0; min-height:0;
  cursor:pointer; z-index:2;
}

/* שדה שאינו רלוונטי — אפור ולא ניתן לעריכה */
.field.off{ opacity:.45 }
.field.off input, .field.off select{ cursor:not-allowed; background:var(--paper) }

/* ═══════════════════ השלמה אוטומטית לעיר ═══════════════════ */
.combo{ position:relative }
.combo-list{ position:absolute; inset-inline:0; top:calc(100% + 4px); z-index:30;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:10px;
  box-shadow:var(--shadow-lift); max-height:230px; overflow-y:auto; padding:4px }
.combo-list[hidden]{ display:none }
.combo-list button{ width:100%; text-align:start; background:none; border:0;
  padding:9px 11px; border-radius:7px; font-size:14.5px; font-weight:600;
  color:var(--ink); cursor:pointer }
.combo-list button:hover, .combo-list button.on{ background:var(--navy-soft); color:var(--navy) }
.combo-list .none{ padding:10px 11px; font-size:13px; color:var(--faint) }

/* ═══════════════════ אירוע מול משלוח ═══════════════════ */
.pill-delivery{ background:var(--delivery-bg); color:var(--delivery) }
.ev .date .kind{ font-size:11px; opacity:.5; line-height:1; margin-bottom:2px }
.ev.k-delivery .date{ background:var(--delivery-bg) }
.ev.k-delivery .date .kind{ color:var(--delivery); opacity:.95 }
.ev.k-delivery .stripe{ background:var(--delivery-2) }
.ev.k-event .date .kind{ color:var(--navy); opacity:.75 }

/* ═══════════════════ כפתור מחיקה ═══════════════════ */
.btn-delete{ background:var(--bad-bg); border-color:var(--bad); color:var(--bad) }
.btn-delete:hover{ background:var(--bad); border-color:var(--bad); color:#fff }

/* ═══════════════════ כפתור המשתמש בסרגל העליון ═══════════════════ */
.topbtn{ display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2); color:#fff; border-radius:9px; cursor:pointer;
  padding:6px 11px; font-size:12.5px; font-weight:600 }
.topbtn:hover{ background:rgba(255,255,255,.2) }
.topbtn .who{ display:none }
.topbtn .who-full{ max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.topbtn .eject{ opacity:.85; display:inline-flex; align-items:center }
/* במובייל: שם פרטי בלבד — כתובת מלאה לא נכנסת, וסמל לבדו לא מובן */
@media (max-width:620px){
  .topbtn .who{ display:inline }
  .topbtn .who-full{ display:none }
  .topbar .wordmark{ display:none }
  .topbtn{ padding:6px 10px }
}

/* ═══════════════════ כרטיס רשימת הכנות באירוע ═══════════════════ */
.prep-card{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden }
.prep-nums{ display:grid; grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
  gap:1px; background:var(--line) }
.prep-nums > div{ background:var(--surface); padding:11px 12px; display:flex;
  flex-direction:column; gap:3px }
.prep-nums b{ font-size:19px; color:var(--navy) }
.prep-foot{ display:flex; align-items:center; gap:9px; padding:11px 12px;
  border-top:1px solid var(--line); flex-wrap:wrap }
.prep-foot .spacer{ flex:1 }
.card-head.wrap{ flex-wrap:wrap }


/* ═══════════════════ תצוגה מקדימה במובייל ═══════════════════
   במובייל התצוגה מקובעת לרוחב המסך ואינה אינטראקטיבית — הקשה עליה
   פותחת מסך מלא שאפשר לגלול ולהצמיד בו (pinch) כמו בתמונה.
   ──────────────────────────────────────────────────────────── */
.doc-tap{ display:none }
@media (max-width:760px){
  .doc-frame{ padding:10px; position:relative }
  .doc-frame .doc{ pointer-events:none }
  .doc-tap{
    display:flex; align-items:center; justify-content:center; gap:7px;
    position:absolute; inset-block-end:16px; inset-inline:50%; transform:translateX(50%);
    width:max-content; background:var(--navy-deep); color:#fff;
    border:0; border-radius:24px; padding:9px 18px; font-size:13px; font-weight:700;
    box-shadow:var(--shadow-lift); cursor:pointer; z-index:5;
  }
}
.doc-full{ position:fixed; inset:0; z-index:80; background:#4A5166; overflow:auto;
  -webkit-overflow-scrolling:touch; padding:44px 0 24px }
.doc-full .doc{ width:max-content; margin:0 auto; zoom:1 }
.doc-full .sheet{ box-shadow:0 6px 30px rgba(0,0,0,.4) }
.doc-full-close{ position:fixed; inset-block-start:8px; inset-inline-end:8px; z-index:81;
  background:rgba(0,0,0,.65); color:#fff; border:0; border-radius:22px;
  padding:9px 16px; font-size:14px; font-weight:700; cursor:pointer }

/* אזהרת גלישה מעמוד ההדפסה */
.warn-bar{ background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn);
  border-radius:10px; padding:10px 14px; font-size:13.5px; font-weight:600;
  margin-bottom:12px; line-height:1.5 }
.info-bar{ background:var(--navy-soft); color:var(--navy); border:1px solid var(--line-strong);
  border-radius:10px; padding:10px 14px; font-size:13.5px; font-weight:600;
  margin-bottom:12px; line-height:1.5 }

/* שני כרטיסים זה לצד זה — לדסקטופ. בטלפון נערמים */
.split-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }
@media (max-width:760px){ .split-2{ grid-template-columns:minmax(0,1fr) } }

/* ═══════════════════ סגירת קופה Z ═══════════════════ */
.z-card{ border-inline-start:4px solid var(--savory) }
.z-card .lbl{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.z-sum{ font-family:var(--en); font-size:30px; font-weight:800; line-height:1.1;
  color:var(--savory); font-variant-numeric:tabular-nums; margin-top:8px }
.z-meta{ font-size:12px; color:var(--faint); margin-top:2px }
.z-hint{ color:var(--muted); font-size:13px; margin-top:8px; line-height:1.5 }
.z-form{ display:flex; gap:9px; align-items:flex-end; margin-top:14px;
  padding-top:14px; border-top:1px solid var(--line) }
.z-form .field{ flex:1; min-width:0 }
.z-form .btn{ flex:0 0 auto; white-space:nowrap }

/* ═══════════════════ סכום החיובים ═══════════════════
   זה המספר שבאים לראות בעמוד, ולכן הוא הגדול במסך. הצבע נגזר מהקבוצה
   שסוננה — שולמו בירוק, ממתינים בכתום, לא שולמו באדום.
   ─────────────────────────────────────────────────── */
.bill-total{
  --bt:var(--navy);
  display:flex; flex-direction:column; gap:3px; margin-bottom:16px;
  padding:18px 20px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line);
  border-inline-start:5px solid var(--bt); box-shadow:var(--shadow);
}
.bill-total.t-paid{ --bt:var(--good) }
.bill-total.t-pending{ --bt:var(--warn) }
.bill-total.t-unpaid{ --bt:var(--bad) }
.bill-total .bt-k{ font-size:12.5px; font-weight:700; color:var(--muted);
  letter-spacing:.03em }
.bill-total .bt-v{ font-family:var(--en); font-size:40px; font-weight:800;
  line-height:1.05; color:var(--bt); font-variant-numeric:tabular-nums;
  letter-spacing:-.02em }
.bill-total .bt-v small{ font-size:22px; font-weight:700; opacity:.7 }
.bill-total .bt-n{ font-size:12.5px; color:var(--faint) }
@media (max-width:620px){
  .bill-total{ padding:15px 16px }
  .bill-total .bt-v{ font-size:34px }
  .bill-total .bt-v small{ font-size:19px }
}

/* ═══════════════════ ראש ותחתית מודאל ═══════════════════
   .card-head נשבר לעמודה במובייל (כדי שסרגלי לשוניות ייכנסו), ולכן הוא
   לא מתאים למודאל — כפתור יחיד היה נמתח לכל הרוחב.
   ──────────────────────────────────────────────────────── */
/* שורת בחירה במודל שיוך — כמו שורת אירוע, בלי הפס והתאריך */
.link-row{ display:flex; align-items:center; gap:12px; padding:10px 12px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); min-width:0 }
.link-row .body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px }
.link-row .t{ font-weight:700; font-size:14.5px; overflow-wrap:anywhere }
.link-row .meta{ font-size:12.5px; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 10px }
.link-row .meta .num{ font-weight:600; color:var(--ink) }
.link-row .btn{ flex:0 0 auto }
.modal-head{ padding:15px 18px; border-bottom:1px solid var(--line) }
.modal-head h2{ font-size:17px }
.modal-foot{ display:flex; gap:9px; justify-content:flex-end; flex-wrap:wrap;
  padding:14px 18px; border-top:1px solid var(--line) }
@media (max-width:520px){ .modal-foot .btn{ flex:1; min-width:0 } }

/* ═══════════════════ טעינת PDF ═══════════════════ */
.pdf-status{ margin-top:12px; border-radius:10px; padding:10px 13px; font-size:13.5px;
  font-weight:600; line-height:1.5; background:var(--navy-soft); color:var(--navy) }
.pdf-status.bad{ background:var(--bad-bg); color:var(--bad) }
.pdf-status[hidden]{ display:none }
.pdf-banner .pb-row{ margin-top:6px; font-weight:500; font-size:13px; color:var(--ink);
  display:flex; flex-wrap:wrap; align-items:center; gap:5px }
.pdf-banner .pb-f{ background:var(--raised); border:1px solid var(--line);
  border-radius:20px; padding:1px 9px; font-size:12px; font-weight:600 }
.pdf-banner .pb-k{ font-size:11px; font-weight:800; border-radius:20px;
  padding:1px 8px; background:var(--line-strong); color:var(--ink) }
.pdf-banner .pb-k.good{ background:var(--good); color:var(--on-go) }
.pdf-banner .pb-k.warn{ background:var(--warn); color:#fff }
.modal-head .sub{ color:var(--muted); font-size:12.5px; margin-top:3px; line-height:1.5 }
/* שדה קובץ — מתלבש כמו יתר השדות ולא כמו פקד ברירת המחדל של הדפדפן */
.field input[type="file"]{ padding:9px 12px; font-size:13.5px; cursor:pointer;
  background:var(--paper) }
.field input[type="file"]::file-selector-button{
  margin-inline-end:10px; border:1px solid var(--line-strong); border-radius:8px;
  background:var(--raised); color:var(--ink); font-weight:700; font-size:13px;
  padding:6px 11px; cursor:pointer; font-family:inherit }


/* ═══════════════════ כפתור יצירה ═══════════════════
   הענבר של המלוח (#C8861E) — צבע שכבר קיים במסמכים, ולכן הוא שובר את
   הנייבי בלי לצאת מהזהות. כל פעולת "הוסף" לובשת אותו.
   ──────────────────────────────────────────────────── */
.btn-accent, .btn-new{
  background:var(--btn-accent); border-color:var(--btn-accent); color:var(--on-btn-accent);
  letter-spacing:.01em;
  box-shadow:0 2px 10px -4px rgba(var(--btn-accent-glow),.55);
}
/* ה-+ רק לפעולות יצירה. "פתח והדפס" מקבל את הצבע בלי הסימן. */
.btn-new::before{
  content:'+'; font-size:17px; font-weight:800; line-height:0;
  margin-inline-end:3px; opacity:.95;
}
.btn-accent:hover, .btn-new:hover{
  background:var(--btn-accent-hover); border-color:var(--btn-accent-hover);
  color:var(--on-btn-accent); transform:translateY(-1px); filter:none;
  box-shadow:0 6px 18px -5px rgba(var(--btn-accent-glow),.7);
}
.btn-accent:active, .btn-new:active{ transform:translateY(0) }

/* גם בתוך הפוטר הנייבי — הענבר נשאר הענבר */
.form-actions .btn-accent, .form-actions .btn-new{ background:var(--btn-accent);
  border-color:var(--btn-accent); color:var(--on-btn-accent) }
.form-actions .btn-accent:hover, .form-actions .btn-new:hover{
  background:var(--btn-accent-hover); border-color:var(--btn-accent-hover) }

/* ═══════════════════ מסך פתיחה: היום ואחר כך עתידיים ═══════════════════ */
.sec-title{ display:flex; align-items:center; gap:12px; margin:22px 0 10px }
.sec-title:first-child{ margin-top:0 }
.sec-title h2{ font-family:var(--display); font-size:16px; font-weight:600;
  color:var(--ink); white-space:nowrap; letter-spacing:.02em }
.sec-title .rule{ flex:1; height:2px; background:var(--line); border-radius:2px }
.sec-title .count{ font-size:12px; font-weight:700; color:var(--navy);
  background:var(--navy-soft); border-radius:20px; padding:2px 9px;
  font-family:var(--en); font-variant-numeric:tabular-nums }
.sec-title.now h2{ color:var(--navy) }
.sec-title.now .rule{ background:var(--navy); opacity:.35 }

/* ═══════════════════ ראש כרטיס במובייל ═══════════════════
   שורה אחת עם סרגל לשוניות ושדה חיפוש לא נכנסת לרוחב טלפון — הלשוניות
   נחתכות והאחרונה נעלמת. במובייל: חיפוש ברוחב מלא למעלה, ומתחתיו
   הלשוניות כצ'יפים שנשברים לשורות. בלי גלילה אופקית ובלי חיתוך.
   ──────────────────────────────────────────────────────── */
@media (max-width:760px){
  .card-head{ flex-direction:column; align-items:stretch; gap:11px; padding:14px 15px }
  .card-head .spacer{ display:none }
  .card-head h2{ order:-2 }
  .card-head .field{ order:-1; max-width:none!important; flex:none!important }

  /* סרגל מחובר → צ'יפים נפרדים שנשברים לשורות */
  .card-head .seg{
    border:0; width:auto; display:flex; flex-wrap:wrap; gap:7px; overflow:visible;
  }
  .card-head .seg button{
    border:1.5px solid var(--line-strong); border-radius:20px;
    padding:8px 14px; font-size:13px; background:var(--raised);
  }
  .card-head .seg button + button{ border-inline-start:1.5px solid var(--line-strong) }
  .card-head .seg button.on{ background:var(--btn-accent); border-color:var(--btn-accent); color:var(--on-btn-accent) }
}

/* ═══════════════════ יומן שינויים ═══════════════════ */
.audit{ margin-top:18px; padding:14px 4px 0; border-top:1px solid var(--line) }
.audit .lbl{ display:block; margin-bottom:7px }
.audit-row{ font-size:12px; color:var(--muted); line-height:1.7;
  font-variant-numeric:tabular-nums }
.audit-row + .audit-row{ border-top:1px dotted var(--line) }
.audit details{ margin-top:4px }
.audit summary{ font-size:12px; color:var(--navy); cursor:pointer; font-weight:600;
  padding:4px 0; list-style:none }
.audit summary::-webkit-details-marker{ display:none }
.audit summary::before{ content:'▾ '; opacity:.7 }
.audit details[open] summary::before{ content:'▴ ' }

/* ═══════════════════ רצועת כלים ═══════════════════
   סרגל הסינון והחיפוש יושב ישר על הדף ולא בתוך כרטיס. כרטיס שעוטף
   רשימה של כרטיסים יוצר שלוש שכבות כהות בערכים דומים — וזה מה שנראה
   עכורׂ. עכשיו: רקע הדף → שורות. שתי שכבות, היררכיה ברורה.
   ─────────────────────────────────────────────────── */
.toolbar{ display:flex; align-items:center; gap:12px; margin:0 0 18px; flex-wrap:wrap }
.toolbar .toolbar-search{ flex:1 1 260px; min-width:0; max-width:420px }
.toolbar .seg{ margin-inline-start:auto }
/* סרגל עם פעולות (אירועים, משלוחים, הצעות): גריד של שתי עמודות. עמודה 1
   (ימין) = חיפוש מעל הסינון, ורוחבה נקבע מהרחב שבהם — כך החיפוש תמיד
   ברוחב הסינון בדיוק, גם כשהמונים בלשוניות משתנים או הגופן נטען מאוחר.
   עמודה 2 = כפתורי היצירה, בקצה השני. בלי מדידה ב-JS. */
.toolbar:has(.actions){ display:grid; grid-template-columns:max-content 1fr; align-items:center }
.toolbar:has(.actions) .toolbar-search{ grid-column:1; grid-row:1; width:100%; max-width:none }
.toolbar:has(.actions) .seg{ grid-column:1; grid-row:2; width:100%; margin:0 }
.toolbar:has(.actions) .actions{ grid-column:2; grid-row:1; justify-self:end; flex-wrap:nowrap }
@media (max-width:760px){
  .toolbar, .toolbar:has(.actions){ display:flex; flex-direction:column; align-items:stretch; gap:11px; margin-bottom:16px }
  .toolbar .toolbar-search{ max-width:none; flex:none; width:100% }
  /* בטלפון: קודם הפעולות (על כל הרוחב), אחר כך חיפוש, ואז הסינון */
  .toolbar .actions{ order:-1; margin:0; width:100% }
  .toolbar .actions .btn{ flex:1 1 0; min-width:0; padding-inline:8px }
  /* שורה אחת, בלי גלישה ובלי גלילה: התוויות מתקצרות והמונים מוסתרים */
  .toolbar .seg{
    margin-inline-start:0; border:0; width:100%;
    display:flex; flex-wrap:nowrap; gap:6px; overflow:visible;
  }
  .toolbar .seg button{
    flex:1 1 0; min-width:0;
    border:1.5px solid var(--line-strong); border-radius:18px;
    padding:9px 4px; font-size:12.5px; background:var(--raised);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .toolbar .seg .t-long, .card-head .seg .t-long{ display:none }
  .toolbar .seg .t-short, .card-head .seg .t-short{ display:inline }
  .toolbar .seg button + button{ border-inline-start:1.5px solid var(--line-strong) }
  .toolbar .seg button.on{ background:var(--btn-accent); border-color:var(--btn-accent); color:var(--on-btn-accent) }
}

/* כרטיס התראה — היחיד שנשאר עטוף, כי הוא באמת אובייקט נפרד */
.card-alert{ border-color:var(--warn); box-shadow:0 0 0 1px var(--warn-bg) }

/* סרגל בחירה גדול — לשדה הראשון בטופס, שצריך להיות חד וברור */
.seg-lg{ width:100% }
.seg-lg button{ flex:1; padding:13px 16px; font-size:15px; font-weight:700 }


/* ═══════════════════ פעולת אישור — ירוק ═══════════════════
   "צור אירוע מההצעה" הוא המעבר מהצעה לעסקה סגורה, ולכן ירוק ולא ענבר:
   ענבר = יצירת טיוטה, ירוק = אישור.
   ─────────────────────────────────────────────────────────── */
.btn-go, .btn-go.btn-new{
  background:var(--go); border-color:var(--go); color:var(--on-go);
  box-shadow:0 2px 10px -4px rgba(var(--go-glow),.55);
}
.btn-go:hover, .btn-go.btn-new:hover{
  background:var(--go-strong); border-color:var(--go-strong); color:var(--on-go);
  transform:translateY(-1px); filter:none;
  box-shadow:0 6px 18px -5px rgba(var(--go-glow),.7);
}
.btn-go::before{ content:'✓'; font-size:14px; font-weight:800; margin-inline-end:4px }

.seg .t-short{ display:none }
.seg .t-long{ display:inline }

/* ═══════════════════ חיובים ═══════════════════ */
.bill-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px; margin-bottom:20px }
.bill-card{ display:flex; flex-direction:column; gap:3px; text-align:start;
  background:var(--surface); border:1px solid var(--line); border-inline-start:4px solid;
  border-radius:var(--r); padding:13px 15px; cursor:pointer; font:inherit;
  transition:transform .08s, box-shadow .15s, border-color .15s }
.bill-card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -12px rgba(0,0,0,.35) }
/* הנבחר: מסגרת דקה בצבע הקבוצה עצמה — לא טבעת עבה כחולה */
.bill-card.on{ border-color:var(--bc); box-shadow:inset 0 0 0 1px var(--bc) }
.bill-card .bill-k{ font-size:12.5px; font-weight:700; color:var(--bc) }
.bill-card .bill-v{ font-size:23px; font-weight:800; font-family:var(--en);
  font-variant-numeric:tabular-nums; color:var(--ink) }
.bill-card .bill-n{ font-size:11.5px; color:var(--faint) }
.bill-paid{ --bc:var(--go); border-inline-start-color:var(--go) }
.bill-pending{ --bc:var(--warn); border-inline-start-color:var(--warn) }
.bill-unpaid{ --bc:var(--bad); border-inline-start-color:var(--bad) }

.bill-pick{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px; margin-bottom:18px }

.bill-list{ display:flex; flex-direction:column; gap:8px }
.bill-row{ display:flex; align-items:stretch; gap:8px; background:var(--surface);
  border:1px solid var(--line); border-inline-start:4px solid; border-radius:var(--r);
  overflow:hidden; padding-inline-end:9px }
.bill-row.bill-paid{ border-inline-start-color:var(--go) }
.bill-row.bill-pending{ border-inline-start-color:var(--warn) }
.bill-row.bill-unpaid{ border-inline-start-color:var(--bad) }
.bill-main{ flex:1; display:flex; align-items:center; gap:12px; min-width:0;
  background:none; border:0; font:inherit; color:inherit; cursor:pointer;
  padding:11px 13px; text-align:start }
.bill-main:hover{ background:var(--btn-hover-bg) }
.bill-date{ flex:0 0 auto; font-weight:700; font-size:14px; display:flex;
  flex-direction:column; line-height:1.15 }
.bill-date small{ font-size:10px; color:var(--faint); font-weight:600 }
.bill-title{ flex:1; min-width:0; font-weight:700; font-size:14.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  display:flex; align-items:center; gap:7px }
.bill-amount{ flex:0 0 auto; font-weight:800; font-size:14.5px }
.bill-row .btn{ align-self:center }
@media (max-width:620px){
  .bill-main{ flex-wrap:wrap; gap:6px 10px }
  .bill-title{ flex:1 1 100%; order:3 }
}
.linkish{ background:none; border:0; color:var(--navy); font:inherit; font-weight:700;
  cursor:pointer; padding:0; text-decoration:underline }

/* בראש כרטיס שנערם לעמודה — תגים לא נמתחים לרוחב */
@media (max-width:760px){
  .card-head .pill{ align-self:flex-start }
  .card-head h2{ align-self:flex-start }
}

/* ═══════════════════ החזרות ═══════════════════ */
.ret-rates{ display:flex; gap:22px; flex-wrap:wrap; margin-bottom:14px;
  padding-bottom:13px; border-bottom:1px solid var(--line) }
.ret-rates > div{ display:flex; flex-direction:column; gap:2px }
.ret-rates b{ font-size:22px; font-weight:800; color:var(--navy) }
.ret-rates b.hot, .tbl b.hot, .stat .v.hot{ color:var(--bad) }
.stat .v.cool{ color:var(--warn) }
.ret-more summary{ font-size:12.5px; color:var(--navy); cursor:pointer; font-weight:700;
  padding:9px 0 2px; list-style:none }
.ret-more summary::-webkit-details-marker{ display:none }
.ret-more summary::before{ content:'▾ '; opacity:.7 }
.ret-more[open] summary::before{ content:'▴ ' }
.ret-items{ max-height:320px; overflow-y:auto; padding-inline-end:4px }

/* ═══════════════════ תובנות ═══════════════════ */
.rec-list{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px }
.rec-list li{ position:relative; padding-inline-start:26px; font-size:14.5px; line-height:1.6 }
.rec-list li::before{ content:'◆'; position:absolute; inset-inline-start:0;
  color:var(--accent); font-size:12px; top:3px }
.bars{ display:flex; flex-direction:column; gap:11px }
.bar-row{ display:grid; grid-template-columns:minmax(90px,1.1fr) minmax(60px,2fr) auto auto;
  align-items:center; gap:10px; font-size:13.5px }
.bar-k{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.bar-track{ height:9px; background:var(--navy-soft); border-radius:6px; overflow:hidden }
.bar-fill{ display:block; height:100%; border-radius:6px;
  background:linear-gradient(90deg,var(--accent),var(--accent-strong)) }
.bar-v{ font-weight:700; white-space:nowrap }
.bar-d{ color:var(--faint); font-size:12px; white-space:nowrap }
@media (max-width:620px){
  /* ההערה יורדת לשורה משלה ולא נעלמת: היא מחזיקה את מספר האירועים
     שהנתון מבוסס עליו, וזה בדיוק מה שאסור להסתיר. */
  .bar-row{ grid-template-columns:1fr auto; gap:3px 10px }
  .bar-track{ grid-column:1/-1; order:3 }
  .bar-d{ grid-column:1/-1; order:4; white-space:normal; font-size:11.5px }
}

/* ═══════════════════ חיובים במובייל: שלוש בשורה ═══════════════════ */
@media (max-width:620px){
  .bill-cards{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px }
  .bill-card{ padding:11px 9px; border-inline-start-width:3px; min-width:0 }
  .bill-card .bill-k{ font-size:12.5px; white-space:nowrap }
  .bill-card .bill-v{ font-size:18px; letter-spacing:-.02em }
  .bill-card .bill-n{ font-size:11px }
  .bill-pick{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
}


/* ═══════════════════ חיסון גלישה אופקית ═══════════════════
   כל מכל שיכול לנפח את הפריסה מקבל min-width:0, וכל פקד תופס לכל היותר
   את רוחב המכל. בלי זה, פקד עם תוכן ארוך דוחף את הדף הצידה — בעיקר
   בספארי, שמחשב min-content אחרת מכרום.
   ─────────────────────────────────────────────────────────── */
.split, .split > *, .form-grid, .form-grid > *, .field, .card, .calc,
.checks, .items, .item-row, .item-row > *, .toolbar, .stats, .navtiles{ min-width:0 }
.field input, .field select, .field textarea{ max-width:100%; box-sizing:border-box }
select{ width:100%; max-width:100% }
.seg{ max-width:100% }
.calc-row, .calc-tot{ min-width:0 }
.calc-row span, .calc-tot span{ min-width:0; overflow-wrap:anywhere }

/* ספארי לפני 16 לא מכיר overflow:clip — שם נופלים ל-hidden, שמונע
   גרירה הצידה (במחיר סרגלים דביקים, וזה העדיף מבין השניים). */
@supports not (overflow: clip){
  html, body{ overflow-x:hidden }
}

/* ═══════════════════ מודאל אישור ═══════════════════ */
.saved-modal{ max-width:380px; text-align:center; padding:28px 24px 22px;
  animation:pop .18s ease-out }
@keyframes pop{ from{ transform:scale(.94); opacity:0 } to{ transform:scale(1); opacity:1 } }
@media (prefers-reduced-motion:reduce){ .saved-modal{ animation:none } }
.saved-mark{ width:56px; height:56px; margin:0 auto 16px; border-radius:50%;
  display:grid; place-items:center; font-size:29px; font-weight:800;
  background:var(--go); color:var(--on-go);
  box-shadow:0 6px 20px -6px rgba(var(--go-glow),.65) }
.saved-modal h2{ font-size:21px; margin-bottom:8px }
.saved-title{ font-size:15.5px; font-weight:700; color:var(--ink) }
.saved-when{ font-size:13px; color:var(--muted); margin-top:3px }
.saved-actions{ display:flex; flex-direction:column; gap:9px; margin-top:22px }
.saved-actions .btn{ width:100% }
/* וואטסאפ — הירוק שלו, כדי שהכפתור יזוהה במבט */
.btn-wa{ background:#1FA855; border-color:#1FA855; color:#fff }
.btn-wa:hover{ background:#178A45; border-color:#178A45; color:#fff;
  transform:translateY(-1px); box-shadow:0 5px 14px -5px rgba(31,168,85,.6) }
.btn-wa::before{ content:'✆'; font-size:15px; line-height:1; margin-inline-end:2px }

/* מתג השפה — אותו גודל כמו מתג הערכה, עם טקסט */
#langbtn{ width:auto; min-width:38px; padding:0 9px; font-size:12px; font-weight:800;
  letter-spacing:.03em; font-family:var(--en) }

/* ═══════════════════ פניות ═══════════════════
   מישור התיבה. הכרטיס נושא שדרת המתנה שמתמלאת עם הימים — זה מה שהופך
   "מחכה 5 ימים" למשהו שרואים במבט ולא קוראים.
   ────────────────────────────────────────────────────── */
.lstats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
  gap:10px; margin-bottom:14px }
/* הקוביות הן מסננים: לחיצה מסננת, והנבחרת מקבלת מסגרת בצבע הפעולה
   (ענבר בכהה, כחול בבהיר). הרקע הכתום של "ממתינות" ירד — הוא צעק. */
.lstat{ background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r);
  padding:11px 13px; display:flex; flex-direction:column; gap:1px;
  text-align:start; font:inherit; cursor:pointer; width:100%;
  transition:border-color .15s, box-shadow .15s }
.lstat:hover{ border-color:var(--line-strong) }
.lstat .n{ font-family:var(--display); font-size:23px; font-weight:800; color:var(--navy);
  line-height:1.1 }
.lstat .l{ font-size:12px; color:var(--muted) }
.lstat.on{ border-color:var(--btn-accent);
  box-shadow:0 0 0 1px var(--btn-accent), 0 6px 18px -10px rgba(var(--btn-accent-glow),.6) }
.lstat.on .n{ color:var(--btn-accent) }

.chiprow{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:9px }
.chiprow.t2{ margin-bottom:14px }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:7px 12px;
  border-radius:20px; border:1px solid var(--line); background:var(--surface);
  color:var(--muted); font-family:var(--display); font-size:13px; font-weight:600;
  cursor:pointer; transition:border-color .15s,color .15s,background .15s }
.chip:hover{ border-color:var(--line-strong); color:var(--ink) }
.chip .c{ font-size:11.5px; opacity:.75 }
.chip.on{ background:var(--btn-accent); border-color:var(--btn-accent); color:var(--on-btn-accent) }
.chip.on .c{ opacity:.85 }

.lead-list{ display:grid; gap:12px }
@media (min-width:760px){ .lead-list{ grid-template-columns:1fr 1fr } }
.lead{ position:relative; display:flex; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow) }
.lead.dirty{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft) }
/* שדרת ההמתנה: הגובה הוא הימים, הצבע הוא הדחיפות */
.lead-spine{ flex:0 0 5px; background:var(--line); display:flex; align-items:flex-start }
.lead-spine i{ display:block; width:100%; background:var(--good) }
.lead.w-fresh .lead-spine i{ background:var(--good) }
.lead.w-warm  .lead-spine i{ background:var(--accent) }
.lead.w-late  .lead-spine i{ background:var(--bad) }
.lead.w-done  .lead-spine i{ background:var(--line-strong) }
.lead-in{ flex:1; min-width:0; padding:14px 16px 15px;
  display:flex; flex-direction:column; gap:9px }
.lead-top{ display:flex; align-items:center; gap:8px }
.ltype{ display:inline-flex; align-items:center; gap:5px; font-family:var(--display);
  font-size:11.5px; font-weight:700; letter-spacing:.04em; padding:3px 9px;
  border-radius:6px; background:var(--navy-soft); color:var(--navy) }
.lead.t-contact .ltype{ background:var(--delivery-bg); color:var(--delivery) }
.lead.t-franchise .ltype{ background:var(--violet-bg); color:var(--violet) }
.lead-name{ font-family:var(--display); font-size:17.5px; font-weight:700;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px }
.lorg{ font-family:var(--body); font-size:13px; font-weight:500; color:var(--muted) }
.lead-facts{ display:flex; flex-wrap:wrap; gap:7px }
.lf{ font-size:13px; padding:4px 10px; border-radius:7px; background:var(--inset);
  border:1px solid var(--inset-line); color:var(--ink) }
.lf.k{ background:var(--good-bg); border-color:transparent; color:var(--good) }
.lf.nk{ background:var(--bad-bg); border-color:transparent; color:var(--bad) }
.lead-when{ display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12.5px; color:var(--faint) }
.lans{ color:var(--good); font-weight:600 }
.lead-msg{ font-size:14px; line-height:1.55; color:var(--ink); background:var(--inset);
  border:1px solid var(--inset-line);
  border-radius:10px; padding:10px 12px; margin:0; white-space:pre-wrap;
  max-height:7.2em; overflow-y:auto }

/* בחירת הפעולה. הענבר נשמר לכפתור המומלץ בלבד — לא לרקע, שם הוא
   נראה כמו כתם על הכרטיס הכחול. */
.lead-conv{ display:flex; flex-direction:column; gap:8px; padding:11px 12px;
  background:var(--inset); border:1px solid var(--inset-line); border-radius:10px }
.lconv-h{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  font-family:var(--display); font-size:12.5px; font-weight:700; color:var(--muted) }
.lwhy{ font-family:var(--body); font-weight:500; font-size:12.5px; color:var(--muted) }
.lwhy b{ color:var(--ink); font-weight:600 }
/* שני כפתורים באותו רוחב ובאותו גובה — זה מה שהופך את הבלוק לישר */
.lead-conv-btns{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.lead-conv-btns .btn{ width:100%; min-width:0 }
/* שורת הפעולות ממלאת את הרוחב תמיד, יהיו שתיים, שלוש או ארבע: flex עם
   grow, כך שאין תא ריק אחרי הכפתור האחרון. בטלפון שתיים בשורה, ואחרונה
   בודדת נמתחת לבד על כל הרוחב — זו התנהגות של flex-wrap, לא כלל נוסף. */
.lead-acts{ display:flex; flex-wrap:wrap; gap:8px }
.lead-acts .btn{ flex:1 1 calc(50% - 4px); min-width:0; text-decoration:none;
  gap:6px; white-space:nowrap }
.lead-acts .btn svg{ flex:0 0 auto }
@media (min-width:760px){ .lead-acts .btn{ flex:1 1 0 } }

.lead-edit{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px;
  padding-top:10px; border-top:1px solid var(--line) }
.lead-edit .full{ grid-column:1/-1 }
.lead-edit textarea{ min-height:52px; resize:vertical }
.lead-save{ display:grid; grid-template-columns:1fr 1fr; gap:8px }
.lead-save .btn{ width:100% }
/* היה btn-sm צמוד לשמאל ולא נראה כמו פעולה. עכשיו באותו גובה ורוחב
   כמו כל כפתור אחר בכרטיס, עם גוון הסכנה של המערכת. */
.lead-rm{ width:100%; border-color:var(--line-strong); color:var(--bad) }
.lead-rm:hover{ border-color:var(--bad); color:var(--bad); background:var(--bad-bg) }
.lead-rm.back{ color:var(--good) }
.lead-rm.back:hover{ border-color:var(--good); color:var(--good); background:var(--good-bg) }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap }

@media (max-width:620px){
  .lstats{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .lead-in{ padding:12px 13px 13px }
  /* תשע לשוניות סטטוס נשברו לשלוש שורות ודחפו את הפנייה הראשונה מתחת
     לקיפול. שורה אחת נגללת הצידה מחזירה 130 פיקסלים, וכל הצ׳יפים
     נשארים בהישג יד. */
  .chiprow{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; padding-bottom:2px }
  .chiprow::-webkit-scrollbar{ display:none }
  .chip{ flex:0 0 auto }
}

/* שורות פניות בלוח הבקרה */
.lead-mini{ display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:9px }
.lmini{ text-align:start; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:10px 12px; cursor:pointer;
  display:flex; flex-direction:column; gap:3px;
  border-inline-start:4px solid var(--line-strong) }
.lmini:hover{ border-color:var(--line-strong) }
.lmini.w-fresh{ border-inline-start-color:var(--good) }
.lmini.w-warm{ border-inline-start-color:var(--accent) }
.lmini.w-late{ border-inline-start-color:var(--bad) }
.lm-t{ font-family:var(--display); font-weight:700; font-size:14.5px; color:var(--ink);
  display:flex; align-items:center; gap:7px; flex-wrap:wrap }
.lm-m{ font-size:12.5px; color:var(--muted) }

/* משתמשים והרשאות בהגדרות */
.users-card{ margin-bottom:18px; display:flex; flex-direction:column; gap:12px }
.users-head{ display:flex; align-items:center; gap:10px }
.users-head h2{ font-family:var(--display); font-size:17px; font-weight:700; margin:0 }
.users-desc{ margin:0; font-size:13.5px; line-height:1.55; color:var(--muted); max-width:62ch }
.users-tbl td.who{ display:flex; flex-direction:column; gap:3px; min-width:170px }
.users-tbl .cell{ border:1px solid transparent; background:transparent; padding:3px 6px;
  border-radius:6px; font:inherit; font-weight:700; color:var(--ink); width:100% }
.users-tbl .cell.sub{ font-weight:500; font-size:13px; color:var(--muted) }
.users-tbl .cell:hover{ border-color:var(--line) }
.users-tbl .cell:focus{ border-color:var(--btn-accent); background:var(--raised); outline:0 }
.users-tbl .mail{ font-size:12px; color:var(--faint); padding-inline-start:6px }
.users-tbl td.c, .users-tbl th{ text-align:center }
.users-tbl td:first-child, .users-tbl th:first-child{ text-align:start; min-width:150px }
.users-tbl input[type="checkbox"]{ margin:0 auto }
.users-tbl tr.owner td{ background:var(--navy-soft) }
.users-tbl input:disabled{ opacity:.45 }
.passrow{ display:flex; gap:8px }
.passrow input{ flex:1; min-width:0; font-family:var(--en); letter-spacing:.04em }

/* שורת כפתורים שממלאת את הרוחב בטלפון — עמוד ההצעות: שני הכפתורים
   באותו גובה ורוחב במקום שניים קטנים שצפים ימינה */
@media (max-width:560px){
  .btn-row.fill{ display:flex; width:100% }
  .btn-row.fill .btn{ flex:1 1 0; min-width:0; justify-content:center }
}

/* ═══════════════════ פעולה בתהליך ═══════════════════
   ספינר בתוך הכפתור עצמו, בצבע הטקסט שלו, כדי שיעבוד גם על כפתור כחול
   וגם על לבן. הכפתור נעול בזמן הזה — זה מה שמונע שמירה כפולה.
   ────────────────────────────────────────────────────── */
@keyframes spin{ to{ transform:rotate(360deg) } }
.btn[aria-busy="true"], button[aria-busy="true"]{
  pointer-events:none; cursor:progress; opacity:.9 }
.btn[aria-busy="true"]::before, button[aria-busy="true"]::before{
  content:''; display:inline-block; box-sizing:border-box;
  width:14px; height:14px; border-radius:50%;
  border:2px solid currentColor; border-inline-start-color:transparent;
  margin-inline-end:6px; animation:spin .65s linear infinite;
  font-size:0; opacity:.85 }

/* ═══════════════════ שגיאה שנשארת ═══════════════════
   כשלון שמירה הוא לא הודעה חולפת: הוא יושב מעל סרגל הניווט עד שסוגרים
   אותו, עם מה שהשרת החזיר, כדי שיהיה מה למסור אם צריך לבדוק.
   ────────────────────────────────────────────────────── */
.errbar{ transition:opacity .6s ease, transform .6s ease }
.errbar.fading{ opacity:0 }
.errbar{ position:fixed; z-index:95;
  inset-inline:12px;
  inset-block-end:calc(var(--tabbar-total, 70px) + 12px + var(--over, 0px));
  transform:translateY(calc(-1 * var(--bars-shift, 0px)));
  display:flex; align-items:flex-start; gap:10px;
  padding:11px 12px; border-radius:13px;
  background:var(--bad-bg); border:1px solid var(--bad);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.55) }
.err-ico{ flex:0 0 22px; width:22px; height:22px; border-radius:50%;
  background:var(--bad); color:#fff; font-weight:800; font-size:14px;
  display:flex; align-items:center; justify-content:center; margin-top:1px }
.err-txt{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0 }
.err-txt b{ color:var(--bad); font-size:14px; font-weight:800 }
.err-d{ color:var(--ink); font-size:12.5px; word-break:break-word }
.err-hint{ color:var(--muted); font-size:12px }
.err-x{ flex:0 0 auto; background:transparent; border:0; cursor:pointer;
  color:var(--bad); font-size:15px; line-height:1; padding:4px 2px }
@media (min-width:860px){
  .errbar{ inset-inline:auto 18px; inset-block-end:18px; max-width:420px }
}

/* שדה מחיר בטבלת הקטלוג — היה בסגנון מוטבע, ולכן כלל 16px של מסך מגע
   לא תפס אותו והשדות האלה קירבו את הדף באייפון. */
.price-in{ width:84px; padding:5px 8px; border:1.5px solid var(--line-strong);
  border-radius:7px; background:var(--raised); color:var(--ink); font-size:14px }

/* ═══════════════════ מסך מגע: 16px לשדות ═══════════════════
   ספארי באייפון מקרב את הדף אוטומטית כשנכנסים לשדה שהגופן בו קטן מ-16px.
   אחרי הקירוב חלון התצוגה צר מהפריסה — ולכן הדף "משתחרר" וזז ימינה ושמאלה,
   וסרגלי position:fixed נראים באמצע המסך. 16px מבטל את הקירוב מהשורש,
   בלי לגזול מהמשתמש את אפשרות הזום הידני.

   הבלוק יושב בסוף הגיליון בכוונה: media query לא מוסיף ספציפיות, ולכן כלל
   מאוחר יותר (כמו .signin .field input) היה גובר עליו.
   ────────────────────────────────────────────────────────── */
@media (hover:none) and (pointer:coarse){
  .field input, .field select, .field textarea, .signin .field input,
  .toolbar input, input[type="date"], input[type="time"], .modal input, .modal textarea,
  .price-in, .users-tbl .cell, .users-tbl .cell.sub, .item-row input,
  .pay-in, .pay-tbl input, .pay-tbl input[type="time"], .pay-fix input, .pay-emp-tbl .cell{
    font-size:16px;
  }
  /* ברוחב 84px גופן 16 היה חונק את שלוש הספרות */
  .price-in{ width:92px }
}

/* שכבת האבחון (#debug) — לא חלק מהממשק */
#dbg{ position:fixed; inset-block-start:0; inset-inline-start:0; z-index:999;
  background:rgba(0,0,0,.82); color:#7CFFB2; padding:8px 10px; max-width:100%;
  font:11px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:pre; direction:ltr; text-align:left; pointer-events:none }


/* ═══════════════════ מודול השכר ═══════════════════ */
.pay-steps{ display:flex; flex-direction:column; gap:14px }
.pay-step .card-head h2{ display:flex; align-items:center; gap:10px; font-size:16px }
.pay-num{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
  border-radius:50%; background:var(--navy); color:var(--on-navy); font-size:13px; font-weight:700; font-family:var(--en) }
.pay-hint{ color:var(--muted); font-size:13.5px; line-height:1.55; margin-bottom:12px }
.pay-tbl th{ white-space:nowrap }
.pay-tbl td.num, .pay-tbl th.num{ font-variant-numeric:tabular-nums; font-family:var(--en); text-align:start }
.pay-tbl tr.chag td{ background:var(--accent-soft) }
/* עובד בכמה סניפים: גוון ענבר רך (הטוקן של התמה, לא ערבוב שנראה אפור
   בכהה) + פס ענבר בקצה השורה — מזוהה, אבל לא צועק כמו כפתור */
.pay-tbl tr.cross td{ background:var(--cross-bg) }
.pay-tbl tr.cross td:first-child{ border-inline-start:3px solid var(--accent) }
.pay-tbl tr.cross td.faint{ color:var(--accent) }
.pay-tbl tr.norate td:first-child .nm{ color:var(--bad) }
.pay-tbl td:first-child{ min-width:150px; max-width:220px }
.pay-unknown-acts{ display:flex; flex-direction:column; gap:4px; margin-top:6px; align-items:flex-start }
.pay-unknown-acts .btn{ white-space:nowrap }
.pay-settle-sum{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:10px; margin-top:12px }
.pay-settle-sum > div{ background:var(--inset); border:1px solid var(--line); border-radius:var(--r); padding:10px 12px; display:flex; flex-direction:column; gap:3px }
.pay-settle-sum span{ font-size:12.5px; color:var(--muted) }
.pay-settle-sum b{ font-size:18px; font-family:var(--en) }
.pay-settle-sum small{ font-size:12px; color:var(--faint) }
.pay-settle-sum .net{ border-color:var(--btn-accent) }
.pay-settle td.in .pay-in{ width:100px; border:1.5px solid var(--btn-accent) }
/* טבלה רחבה מהמסך — רמז גלילה, נעלם בסוף הגלילה */
/* כותרות טבלה שנצמדות למעלה בגלילה. sticky לא עובד בתוך מכל עם overflow —
   לכן טבלה שנכנסת ברוחב מקבלת overflow:visible ונצמדת לעמוד (מתחת לכותרת
   ולסרגל), וטבלה רחבה גוללת בתוך תיבה בגובה המסך, והכותרת נצמדת בתוכה. */
/* position:sticky לא נצמד לעמוד מתוך מכל גלילה (overflow-x של הטבלה,
   וגם הכרטיס שחותך פינות) — לכן הכותרת מוזזת ב-JS (translateY) לפי גלילת
   העמוד, מתחת לכותרת העליונה ולסרגל. ראה stickHeads ב-payroll-ui. */
.pay-tbl thead, .pay-emp-tbl thead, table.sticky-head thead{ position:relative; z-index:3; will-change:transform; background:var(--surface) }
/* z-index על thead לא תופס מול שדות קלט בשורות (מיקום על קבוצת-שורות אינו
   מוגדר בתקן) — לכן הסדר נקבע על התאים עצמם */
.card .pay-tbl thead th, .card .pay-emp-tbl thead th, .pay-tbl thead th, .pay-emp-tbl thead th,
table.sticky-head thead th{
  position:relative; z-index:4;
  background-color:var(--surface); box-shadow:0 1px 0 var(--line), 0 -1px 0 var(--surface) }
.scroll-x.fits{ overflow:visible }
.pay-scroll-hint{ text-align:left; font-size:12.5px; color:var(--accent); font-weight:600; margin:0 0 6px; direction:rtl }
.pay-scroll-hint[hidden]{ display:none }
/* בהתקזזות: שדה האחוז מימין, והרמז נכנס לאותה שורה משמאל */
.pay-settle-top{ margin-bottom:6px }
.pay-settle-top + .pay-scroll-hint{ margin-top:-34px; margin-bottom:12px; min-height:28px; display:flex; align-items:center; justify-content:flex-end; pointer-events:none }
.pay-settle-top + .pay-scroll-hint[hidden]{ display:none }
/* שורת פירוט לפי סניף (מתחת לעובד חוצה-סניפים) */
.pay-tbl tr.sub td{ background:var(--inset); font-size:13px; color:var(--muted); padding-top:5px; padding-bottom:5px }
.pay-tbl tr[data-act]{ cursor:pointer }
.pay-chev{ display:block; font-size:11.5px; color:var(--accent); font-weight:600; margin-top:2px }
.pay-tbl tr.total td{ background:var(--navy-soft); font-weight:700 }
.pay-tbl .nm{ font-weight:700; display:block }
.pay-tbl .alias{ display:block; font-size:12px; color:var(--faint) }
.pay-tbl input[type="time"]{ direction:ltr; height:38px; padding:4px 8px; border:1px solid var(--line-strong); border-radius:8px; background:var(--raised); color:var(--ink); font:inherit }
.pay-in{ width:88px; height:38px; padding:4px 8px; border:1px solid var(--line-strong); border-radius:8px;
  background:var(--raised); color:var(--ink); font:inherit; font-family:var(--en); font-variant-numeric:tabular-nums }
.pay-in:focus{ outline:0; border-color:var(--btn-accent) }
.pay-manual td{ padding:5px 6px }
.pay-manual .pay-in{ width:78px }
.pay-branches{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px }
.pay-branch{ display:flex; flex-direction:column; gap:6px; padding:12px 14px; border:1.5px dashed var(--line-strong);
  border-radius:var(--r); cursor:pointer; background:var(--inset) }
.pay-branch.done{ border-style:solid; border-color:var(--good) }
.pay-branch .rule-txt{ font-size:12px; color:var(--faint) }
.pay-branch .st{ font-size:13px; margin-top:2px }
.pay-branch .btn{ align-self:flex-start; margin-top:4px }
.pay-flag{ border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; margin-bottom:10px; background:var(--inset);
  border-inline-start:4px solid var(--warn) }
.pay-flag.resolved{ border-inline-start-color:var(--good) }
.pay-flag h4{ font-size:15px; margin-bottom:4px }
.pay-flag .meta{ font-size:13.5px; color:var(--ink) }
.pay-flag .peers{ font-size:12.5px; color:var(--muted); margin:4px 0 10px }
.pay-flag-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.pay-seg{ width:fit-content; max-width:100% }
.pay-fix{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted) }
.pay-fix input{ width:112px; height:38px; padding:4px 8px; direction:ltr; border:1.5px solid var(--btn-accent); border-radius:9px;
  background:var(--raised); color:var(--ink); font:inherit; font-family:var(--en) }
.pay-seg .seg-btn{ padding:8px 13px; border:0; background:var(--surface); cursor:pointer; font:inherit; font-weight:600; font-size:13px; color:var(--muted) }
.pay-seg .seg-btn + .seg-btn{ border-inline-start:1.5px solid var(--line-strong) }
.pay-seg .seg-btn.on{ background:var(--btn-accent); color:var(--on-btn-accent) }
.pay-gcard{ border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; margin-bottom:10px; background:var(--inset) }
.pay-gcard.under{ border-inline-start:4px solid var(--bad) }
.pay-gcard.ok{ border-inline-start:4px solid var(--good) }
.pay-gcard h4{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:15px; margin-bottom:10px; flex-wrap:wrap }
.pay-gcard .form-grid{ grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)) }
.pay-rate-lbl{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--muted) }
.pay-rate-lbl .pay-in{ width:70px }
.pay-shift-form{ display:grid; grid-template-columns:minmax(150px,1.3fr) 1fr 1fr 96px 96px auto 110px auto; gap:10px; align-items:end; margin-top:10px }
.pay-or{ align-self:end; padding-bottom:12px; color:var(--faint); font-size:13px; font-weight:600 }
.pay-shift-form input[type="time"], .pay-shift-form input[type="date"]{ direction:ltr }
.pay-mshifts{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 10px }
.pay-mshifts .chip{ display:inline-flex; align-items:center; gap:8px; background:var(--inset); border:1px solid var(--line); border-radius:20px; padding:6px 12px; font-size:13px }
.pay-mshifts .chip .x{ border:0; background:none; cursor:pointer; color:var(--muted); font-size:13px; padding:0 2px }
.pay-mshifts .chip .x:hover{ color:var(--bad) }
@media (max-width:760px){ .pay-shift-form{ grid-template-columns:1fr 1fr } .pay-shift-form .field:first-child, .pay-shift-form .field:last-child{ grid-column:1/-1 } .pay-or{ padding-bottom:0; align-self:center; text-align:center } }
.pay-rules{ padding-inline-start:18px; font-size:13.5px; color:var(--muted); line-height:1.6 }
.pay-emp-tbl .cell.num{ width:58px; font-family:var(--en); padding-inline:3px }
.pay-emp-tbl td, .pay-emp-tbl th{ padding-inline:5px }
.pay-emp-tbl td:first-child .cell{ min-width:118px }
.pay-emp-tbl td:nth-child(2) .cell{ min-width:140px }
/* שכר חודשי (17,000) צריך יותר מקום מתעריף שעתי (52) */
.pay-emp-tbl [data-f="salary"].cell.num{ width:76px }
.pay-emp-tbl tr.inactive td{ opacity:.5 }
.pay-emp-tbl select.cell{ width:auto }
.pay-row-acts{ white-space:nowrap }
.pay-row-acts .btn + .btn{ margin-inline-start:4px }
.warn-box{ background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn); border-radius:9px; padding:9px 12px; font-size:13.5px }
.ok{ color:var(--good) }
.bad-txt{ color:var(--bad) }
.warn-txt{ color:var(--warn) }
.scroll-x{ overflow-x:auto; -webkit-overflow-scrolling:touch }
@media (max-width:760px){
  .pay-branches{ grid-template-columns:1fr }
  .pay-manual .pay-in, .pay-in{ font-size:16px }
}

/* ═══════════════════ אילוצי משמרות (shifts) ═══════════════════ */
.sh-branches{ margin:0 auto 14px }
/* שורת השבוע: בדסקטופ הבורר מימין והכפתורים משמאל, המטא מתחת לשניהם.
   במובייל הכל בעמודה: בורר → מטא → כפתורים (רענון + הדפסה יחד). */
.sh-weekbar{ margin-bottom:14px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 12px; align-items:center }
.sh-weeknav{ display:flex; align-items:center; gap:8px; min-width:0 }
.sh-weekbtns{ display:flex; gap:8px; flex-wrap:wrap }
.sh-weekbar .sh-weekmeta{ grid-column:1/-1; margin-top:0 }
@media (max-width:620px){
  .sh-weekbar{ grid-template-columns:1fr }
  .sh-weekbtns{ order:3 }
  .sh-weekbtns .btn{ flex:1 }
  .sh-controls .checks{ flex-wrap:nowrap; gap:8px 12px }
  .sh-controls .chk{ font-size:13px; white-space:nowrap }
  .sh-controls .t-long{ display:none }
}
.sh-controls .t-short{ display:none }
@media (max-width:620px){ .sh-controls .t-short{ display:inline } }
.sh-weeknav select{ flex:1 1 220px; min-width:0; padding:8px 10px; border:1.5px solid var(--line-strong); border-radius:9px;
  background:var(--raised); color:var(--ink); font:inherit; font-weight:600 }
.sh-weekmeta{ margin-top:10px; font-size:13.5px; color:var(--muted) }
.sh-weekmeta strong{ color:var(--ink) }
.sh-controls{ margin-bottom:14px }
.sh-ctrl{ display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap }
.sh-ctrl .toolbar-search{ flex:1 1 220px; margin:0 }
.sh-chips-head{ display:flex; align-items:center; gap:10px; margin:12px 0 8px }
.sh-chips-head .lbl{ margin:0 }

/* תאי משמרת — אותו קוד צבע כמו במערכת הישנה: בוקר ענבר · ערב אינדיגו · פתוח ירוק · חופש דהוי */
.sh-cell{ display:inline-block; min-width:52px; padding:5px 8px; border-radius:8px; font-size:12.5px; font-weight:700; text-align:center;
  border:1px solid transparent; white-space:nowrap }
/* צבעי המשמרות: בבהיר מהטוקנים של המערכת; בכהה פלטת פסטל משלהם (ניסוי
   של רמי — אם יתקבל, יורחב לכל האתר). */
:root{ --sh-m:var(--savory); --sh-m-bg:var(--savory-bg); --sh-e:var(--paid); --sh-e-bg:var(--paid-bg);
  --sh-o:var(--good); --sh-o-bg:var(--good-bg); --sh-x:var(--faint); --sh-x-bg:var(--inset) }
/* בכהה: כמו אריחי החיובים — צבע בטקסט ובמסגרת, על משטח הכרטיס, בלי מילוי.
   ענבר · טורקיז · ירוק · אפור (הטוקנים של הסטטיסטיקות בלוח ובחיובים). */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --sh-m:var(--accent); --sh-m-bg:var(--raised); --sh-e:var(--paid); --sh-e-bg:var(--raised);
  --sh-o:var(--go); --sh-o-bg:var(--raised); --sh-x:var(--faint); --sh-x-bg:transparent }}
:root[data-theme="dark"]{
  --sh-m:var(--accent); --sh-m-bg:var(--raised); --sh-e:var(--paid); --sh-e-bg:var(--raised);
  --sh-o:var(--go); --sh-o-bg:var(--raised); --sh-x:var(--faint); --sh-x-bg:transparent }
.sh-morning{ background:var(--sh-m-bg); color:var(--sh-m); border-color:color-mix(in srgb, var(--sh-m) 55%, transparent) }
.sh-evening{ background:var(--sh-e-bg); color:var(--sh-e); border-color:color-mix(in srgb, var(--sh-e) 55%, transparent) }
.sh-open{ background:var(--sh-o-bg); color:var(--sh-o); border-color:color-mix(in srgb, var(--sh-o) 55%, transparent) }
/* חופש — לא מובלט: כמו "סגור", טקסט דהוי בלי קובייה */
.sh-off{ background:transparent; color:var(--faint); border-color:transparent; font-weight:500 }
.sh-none{ color:var(--faint); border-color:var(--line) }
.sh-closed{ color:var(--faint); font-weight:500; font-size:11.5px }
.sh-sw{ display:inline-block; width:14px; height:14px; border-radius:4px; vertical-align:-2px; margin-inline-end:4px }

.sh-tablecard{ margin-bottom:14px }
.sh-tbl th{ text-align:center; white-space:nowrap }
.sh-tbl th.sh-namecol, .sh-tbl td.sh-namecol{ text-align:start; min-width:150px; position:sticky; inset-inline-start:0; background:var(--surface); z-index:1 }
.sh-tbl thead th.sh-namecol{ z-index:2 }
.sh-tbl td{ text-align:center; vertical-align:top }
.sh-tbl td.sh-notecol{ text-align:start; min-width:180px; max-width:320px; font-size:13px; white-space:normal }
.sh-dnum{ display:block; font-weight:500; font-size:11px; color:var(--faint); letter-spacing:0; text-transform:none }
.sh-name{ background:none; border:0; padding:0; font:inherit; font-weight:700; font-size:14.5px; color:var(--navy); cursor:pointer; text-align:start }
.sh-name:hover{ text-decoration:underline }
.sh-unlinked{ border:0; cursor:pointer; font:inherit; font-size:11.5px; font-weight:700 }
.sh-unlinked:hover{ filter:brightness(.92) }
.sh-meta{ display:block; font-size:11.5px; color:var(--faint); margin-top:2px }
.sh-revised{ color:var(--warn); font-weight:700 }
mark{ background:var(--accent-soft); color:inherit; padding:0 3px; border-radius:4px; font-weight:700 }

.sh-cov{ display:flex; flex-direction:column; gap:3px; min-width:70px }
.sh-covrow{ display:flex; align-items:center; gap:5px; font-size:12px }
.sh-covrow b{ min-width:16px; text-align:end; font-family:var(--en) }
.sh-bar{ flex:1; height:6px; background:var(--inset); border-radius:4px; overflow:hidden }
.sh-bar i{ display:block; height:100%; border-radius:4px; background:var(--sh-m); border:0 }
.sh-bar i.sh-evening{ background:var(--sh-e) }

.sh-strip{ margin-bottom:12px }
.sh-covgrid{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:8px }
.sh-covday{ text-align:center }
.sh-dh{ font-size:11.5px; font-weight:700; color:var(--muted); line-height:1.2 }
.sh-dh span{ font-weight:500; opacity:.7 }
.sh-covn{ margin-top:4px; padding:4px 2px; border-radius:7px; font-size:12px; font-weight:700 }

.sh-cards{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); margin-bottom:14px }
.sh-empcard h3{ margin:0 0 8px; font-size:15px; display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.sh-daygrid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center }
.sh-daygrid .sh-cell{ display:block; min-width:0; padding:6px 2px; font-size:11.5px; margin-top:3px }
.sh-cardnote{ margin-top:8px; background:var(--inset); border-radius:8px; padding:7px 10px; font-size:13px }

.sh-legend{ display:flex; flex-wrap:wrap; gap:8px 18px; font-size:12.5px; color:var(--muted); margin:4px 2px 16px; align-items:center }
.sh-legend > span{ white-space:nowrap }
/* במובייל: כל פריט במקרא בשורה משלו — התיאורים הארוכים לא נשברים באמצע */
@media (max-width:620px){
  .sh-legend{ flex-direction:column; align-items:flex-start; gap:6px }
  .sh-legend > span{ white-space:normal }
}
.sh-rev{ color:var(--warn); font-weight:600 }
.sh-link .lbl, .sh-notice .lbl{ margin-bottom:8px }
.sh-notice{ margin-bottom:14px }
.sh-notice textarea{ width:100%; padding:9px 11px; border:1.5px solid var(--line-strong); border-radius:9px; background:var(--raised); color:var(--ink); font:inherit; resize:vertical; margin-bottom:8px }
.sh-link-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:6px }
.sh-link-row input, .sh-link-row select{ flex:1 1 220px; min-width:0; padding:8px 10px; border:1.5px solid var(--line-strong); border-radius:9px;
  background:var(--raised); color:var(--ink); font:inherit; direction:ltr; text-align:left }
.sh-link-row select{ direction:rtl; text-align:right }
.sh-linkbox{ background:var(--inset); border:1px solid var(--inset-line); border-radius:10px; padding:12px; margin-bottom:12px }
.sh-hist{ border-top:1px solid var(--line); padding:10px 0 }
.sh-hist:first-of-type{ border-top:0 }
.sh-hw{ font-size:12.5px; color:var(--muted); margin-bottom:6px; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.sh-del{ margin-inline-start:auto; color:var(--bad); padding:3px 9px; font-size:12px }

@media (max-width:620px){
  .sh-cards{ grid-template-columns:1fr }
  .sh-tbl th.sh-namecol, .sh-tbl td.sh-namecol{ min-width:120px }
}
@media print{
  .sh-controls, .sh-link, .sh-branches, .sh-weeknav{ display:none!important }
  .sh-tablecard, .card{ box-shadow:none; border-color:#ccc }
  .sh-tbl td.sh-namecol, .sh-tbl th.sh-namecol{ position:static }
}

/* ═══════════════════ מסך טעינה ופס פעילות ═══════════════════ */
.boot{ position:fixed; inset:0; z-index:300; background:linear-gradient(180deg,#1C2B68,#0D2257); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  transition:opacity .35s ease; }
.boot img{ height:64px; width:auto }
.boot-t{ font-size:14px; opacity:.8; letter-spacing:.02em }
.boot-spin{ width:26px; height:26px; border-radius:50%; border:3px solid rgba(255,255,255,.25);
  border-top-color:#F0BB66; animation:spin .8s linear infinite }
.boot.hide{ opacity:0; pointer-events:none }
html.preload .boot{ transition:opacity .35s ease!important }   /* היחיד שמותר לו מעבר בזמן הטעינה */

.loadbar{ position:fixed; top:env(safe-area-inset-top, 0px); inset-inline:0; height:3px; z-index:250;
  pointer-events:none; opacity:0; transition:opacity .2s; overflow:hidden }
.loadbar.on{ opacity:1 }
.loadbar::before{ content:''; position:absolute; top:0; bottom:0; width:38%; border-radius:3px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  animation:loadbar 1.1s ease-in-out infinite }
@keyframes loadbar{ from{ inset-inline-start:-40% } to{ inset-inline-start:100% } }
@media print{ .boot, .loadbar{ display:none!important } }

/* ═══════════════════ מצב כהה — תגים בסגנון האריחים ═══════════════════
   הניסוי באילוצים התקבל (רמי, 2026-09-19): במצב כהה תג צבעוני הוא צבע
   בטקסט ובמסגרת דקה על משטח הכרטיס, לא מילוי כהה-רווי. חל על כל התגים
   וכפתורי הסטטוס במערכת. הודעות אזהרה/שגיאה (פסים ותיבות) נשארות עם מילוי
   כי הן צריכות לבלוט. במצב בהיר אין שינוי. */
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) :is(
  .pill-good, .pill-bad, .pill-warn, .pill-paid, .pill-violet, .pill-savory, .pill-sweet, .pill-delivery,
  .pill-neutral, .pill-info, .pill-soon, .ltype, .lf.k, .lf.nk, .st-btn){
  background:var(--raised); box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 55%, transparent) }
  :root:not([data-theme="light"]) .st-btn{ box-shadow:none; border-color:color-mix(in srgb, var(--c) 55%, transparent) }
  :root:not([data-theme="light"]) .st-btn.on{ border-color:var(--c); box-shadow:inset 0 0 0 1px var(--c) }
  :root:not([data-theme="light"]) .pill-soon{ border-color:var(--accent) }
}
:root[data-theme="dark"] :is(
  .pill-good, .pill-bad, .pill-warn, .pill-paid, .pill-violet, .pill-savory, .pill-sweet, .pill-delivery,
  .pill-neutral, .pill-info, .pill-soon, .ltype, .lf.k, .lf.nk, .st-btn){
  background:var(--raised); box-shadow:inset 0 0 0 1px color-mix(in srgb, currentColor 55%, transparent) }
:root[data-theme="dark"] .st-btn{ box-shadow:none; border-color:color-mix(in srgb, var(--c) 55%, transparent) }
:root[data-theme="dark"] .st-btn.on{ border-color:var(--c); box-shadow:inset 0 0 0 1px var(--c) }
:root[data-theme="dark"] .pill-soon{ border-color:var(--accent) }

/* אילוצים: סינון סניפים בצבע כפתורי הפעולה (ענבר בכהה), צ׳יפים של עובדים בכחול הבהיר */
.sh-branches button.on{ background:var(--btn-accent); border-color:var(--btn-accent); color:var(--on-btn-accent) }
.sh-controls .chip.on{ background:var(--navy); border-color:var(--navy); color:var(--on-navy) }

/* הגדרות: "שמור" יושב בסוף העמודה הצדדית — בדסקטופ מתחת לקוביית הנתונים,
   במובייל אחרון בעמוד, אחרי כל המחירים שהוא שומר */
.settings-save{ margin-top:16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.settings-save .btn{ flex:1 1 auto }
.settings-save .hint{ flex:0 1 auto }

/* ═══════════════ מסמכי עובד ═══════════════ */
.emp-docs .doc-list{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px }
.doc-row{ display:grid; grid-template-columns:auto minmax(0,1fr) auto auto auto auto; gap:8px; align-items:center;
  background:var(--inset); border:1px solid var(--inset-line); border-radius:9px; padding:7px 10px }
.doc-k{ font-size:11.5px; font-weight:700; color:var(--navy); white-space:nowrap }
.doc-n{ font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.doc-m{ font-size:11.5px; color:var(--faint); white-space:nowrap }
.doc-up{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.doc-up select{ padding:7px 10px; border:1.5px solid var(--line-strong); border-radius:9px;
  background:var(--raised); color:var(--ink); font:inherit }
.doc-up .btn{ cursor:pointer }
.doc-up .hint{ flex:1 1 100% }
@media (max-width:620px){
  .doc-row{ grid-template-columns:minmax(0,1fr) auto auto auto; row-gap:4px }
  .doc-k{ grid-column:1/-1 } .doc-m{ grid-column:1/2 }
}

/* ברכה לפי שעה: בשולחני בסרגל העליון, בטלפון מעל לוח הבקרה — שם יש
   מקום, ובסרגל הצר של הטלפון אין. */
/* הסרגל העליון נשאר נייבי כהה גם בערכה הכהה, ולכן הטקסט שבו לבן קבוע
   ולא var(--on-navy) — שהוא כמעט שחור בכהה, כי הוא נועד לכפתור נייבי
   שמתבהר. (רמי, 2026-09-21) */
.tophello{ font-size:13.5px; font-weight:600; color:#fff; opacity:.9;
  margin-inline-start:14px; white-space:nowrap }
.dash-hello{ display:none }
@media (max-width:760px){
  .tophello{ display:none }
  /* גדולה מהשורה שמתחתיה: האימוג'י מצויר בגובה מלא של הפונט, ולכן
     ב-14px הוא גבר על המילים. הבורר חייב לכלול את .page-head — אחרת
     `.page-head .sub` (שתי מחלקות) גובר, ו-media query אינו מוסיף
     עדיפות. (רמי, 2026-09-21) */
  .page-head .sub.dash-hello{ display:block; font-weight:700; color:var(--ink);
    font-size:18px; margin-top:10px }
}

/* שני צירי סינון בעמוד העובדים — סוג העסקה וסניף — זה לצד זה בשורה
   אחת. כל רצועה ברוחב התוכן שלה: ברוחב מלא נשאר שוליים ריק עם מסגרת,
   שנראה כמו כפתור שבור. (רמי, 2026-09-21) */
.toolbar:has(.actions) .emp-filters{ grid-column:1/-1; grid-row:2;
  display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.toolbar:has(.actions) .emp-filters .seg{ width:auto; margin:0 }
@media (max-width:760px){
  .toolbar .emp-filters{ order:3; display:flex; flex-direction:column; gap:8px; width:100% }
  .toolbar:has(.actions) .emp-filters .seg{ width:100% }
}

/* מפריד "לא פעילים" בטבלת העובדים */
.tbl-sep td{ background:var(--inset); border-top:2px solid var(--line-strong);
  font-size:11.5px; font-weight:700; color:var(--faint); letter-spacing:.02em; padding:5px 10px }

/* עובד שנקלט מטופס 101 במייל וממתין לאישור אדם */
.pill-new{ background:var(--warn-bg); color:var(--warn) }
.emp-name-cell{ display:flex; align-items:center; gap:6px }
.emp-name-cell .cell{ flex:1 1 auto; min-width:0 }
.emp-pending{ margin-bottom:14px }
.emp-pending .btn-row{ gap:8px; flex-wrap:wrap }
.emp-same{ margin-top:6px; font-size:13px }
.emp-same-i{ white-space:nowrap }
.f101-list{ display:flex; flex-direction:column; gap:6px }
.f101-row{ display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; gap:10px; align-items:center;
  background:var(--inset); border:1px solid var(--inset-line); border-radius:9px; padding:8px 10px; cursor:pointer }
.f101-row.same{ opacity:.55; cursor:default }
.f101-k{ font-size:11.5px; font-weight:700; color:var(--navy); white-space:nowrap }
.f101-v{ font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.f101-old{ font-size:11.5px; color:var(--faint); white-space:nowrap }
@media (max-width:620px){
  .f101-row{ grid-template-columns:auto minmax(0,1fr); row-gap:2px }
  .f101-k{ grid-column:2/3 } .f101-v{ grid-column:2/3 } .f101-old{ grid-column:2/3 }
}


/* הסכם עבודה בתיק העובד */
.ct-block{ background:var(--inset); border:1px solid var(--inset-line); border-radius:10px; padding:10px 12px }
.ct-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.modal-wide{ max-width:840px }
.ct-view{ background:var(--paper); max-height:65vh; overflow:auto }
.ct-view .doc .sheet{ width:100%; min-height:0; box-shadow:none }

/* חתימות החברות בהגדרות */
.sig-grid{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom:8px }
.sig-store{ flex:1 1 240px; display:flex; flex-direction:column; gap:8px }
.sig-co{ font-size:12.5px; font-weight:700; color:var(--navy) }
.sig-shot{ height:80px; border:1.5px solid var(--line-strong); border-radius:10px;
  background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden }
.sig-shot img{ max-width:100%; max-height:100%; object-fit:contain }
.sig-store-acts{ display:flex; gap:8px; align-items:center }
.sig-store-acts .btn{ cursor:pointer }

/* ייבוא עובדים */
.imp-list{ display:flex; flex-direction:column; gap:4px; max-height:260px; overflow:auto }
.imp-row{ display:grid; grid-template-columns:minmax(0,1fr) auto auto 26px; gap:8px; align-items:center;
  background:var(--inset); border-radius:8px; padding:6px 10px; font-size:13px }
.imp-row.out{ opacity:.45 }
.imp-row.out .imp-n{ text-decoration:line-through }
.imp-x{ width:26px; height:26px; border:1px solid var(--line-strong); border-radius:7px; background:var(--raised);
  color:var(--muted); cursor:pointer; font-size:12px; line-height:1; padding:0 }
.imp-x:hover{ color:var(--bad); border-color:var(--bad) }
.imp-row.out .imp-x:hover{ color:var(--good); border-color:var(--good) }
.imp-n{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.imp-s{ color:var(--navy); font-weight:600; white-space:nowrap }
.imp-f{ color:var(--faint); font-size:11.5px; white-space:nowrap }

/* מקרא עמוד העובדים: מונח מודגש ברוחב קבוע, הסבר לצידו */
.emp-legend{ margin-top:16px }
.emp-legend dl{ margin:10px 0 0; display:flex; flex-direction:column; gap:7px }
.emp-legend dl > div{ display:grid; grid-template-columns:120px minmax(0,1fr); gap:12px; align-items:baseline }
.emp-legend dt{ font-weight:800; font-size:13.5px; color:var(--ink) }
.emp-legend dd{ margin:0; font-size:13px; color:var(--muted); line-height:1.5 }
@media (max-width:620px){
  .emp-legend dl > div{ grid-template-columns:1fr; gap:2px }
  .emp-legend dd{ padding-inline-start:0 }
}

/* סיכום עמוד העובדים: סך הכל בשורה משלו, והפילוח מתחתיו */
.emp-sum .emp-tot{ font-size:15.5px; color:var(--ink) }
.emp-sum .emp-tot b{ font-weight:800 }
.emp-sum .emp-by{ font-size:13px; color:var(--muted); margin-top:3px }
.emp-notes{ width:100%; padding:10px 12px; border:1.5px solid var(--line-strong); border-radius:10px;
  background:var(--raised); color:var(--ink); font:inherit; font-size:14px; resize:vertical; min-height:72px }

/* ═══════════════════ רכש ותמחור (kitchen-ui.js) ═══════════════════
   רשימה של שורות-כפתור במקום טבלה: שם ופירוט מימין, המחיר משמאל. אותה
   שורה עובדת בדסקטופ ובטלפון, ולחיצה עליה פותחת את החלון של הפריט. */
/* חיפוש וסינון מסתירים שורות ב-hidden. .kc-item ו-.kc-cat מגדירים display
   משלהם, וזה גובר על hidden של הדפדפן — השורות נשארו על המסך. (רמי, 2026-09-23) */
.kc-list [hidden]{ display:none !important }
.kc-tabs{ margin:0 auto 16px }
.kc-tabs .t-short{ display:none }
@media (max-width:560px){
  .kc-tabs{ width:100% }
  .kc-tabs button{ flex:1; padding-inline:6px }
  .kc-tabs .t-long{ display:none }
  .kc-tabs .t-short{ display:inline }
}
.kc-list{ overflow:hidden }
.kc-item{ display:flex; align-items:center; gap:14px; width:100%; padding:12px 18px; border:0;
  border-bottom:1px solid var(--line); background:transparent; color:var(--ink); font:inherit; text-align:start }
button.kc-item{ cursor:pointer }
button.kc-item:hover{ background:var(--btn-hover-bg) }
.kc-item:last-child{ border-bottom:0 }
.kc-item.off{ opacity:.6 }
.kc-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px }
.kc-name{ font-weight:700; font-size:15px; display:flex; align-items:center; gap:7px; flex-wrap:wrap }
.kc-name .pill{ font-size:11px; padding:1px 8px }
.kc-meta{ font-size:12.5px; color:var(--muted); line-height:1.5 }
.kc-warn{ color:var(--warn) }
.kc-num{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; white-space:nowrap; text-align:end }
.kc-num b{ font-family:var(--en); font-size:15.5px; font-variant-numeric:tabular-nums }
.kc-num > span{ font-size:12px; color:var(--faint) }
.kc-cat{ padding:9px 18px 7px; background:var(--inset); border-bottom:1px solid var(--line);
  font-family:var(--display); font-weight:600; font-size:13px; color:var(--navy) }
/* סרגל החיפוש: בדסקטופ החיפוש לוקח את כל הרוחב שנשאר, באותו רוחב בכל
   הלשוניות. הגריד של .toolbar:has(.actions) (אירועים) מצמיד את החיפוש לרוחב
   שורת הסינון שמתחתיו — וכאן בחומרי גלם אין כזו, אז הוא התכווץ ל-167px.
   בטלפון נשאר הסידור הכללי של .toolbar. (רמי, 2026-09-23) */
@media (min-width:761px){
  .toolbar.kc-toolbar{ display:flex; flex-wrap:nowrap }
  .toolbar.kc-toolbar .toolbar-search{ flex:1 1 auto; width:auto; max-width:none }
  .toolbar.kc-toolbar .chk{ white-space:nowrap }
  .toolbar.kc-toolbar .seg, .toolbar.kc-toolbar .actions{ margin:0; width:auto; flex:none }
}
.kc-chips{ margin-bottom:14px }
/* ממורכז רק כשהשורה נכנסת. בטלפון היא נגללת לרוחב (.chiprow), ושורה ממורכזת
   שגולשת חותכת את ההתחלה — "הכל" ו"גבינות" נעלמים בלי דרך לגלול אליהם */
@media (min-width:621px){ .kc-chips{ justify-content:center } }
.kc-cat-n{ font-family:var(--en); font-weight:500; font-size:11.5px; color:var(--faint); margin-inline-start:4px }
.kc-foot{ font-size:12.5px; color:var(--faint); margin:12px 4px 0; line-height:1.6; text-align:center }
.kc-loading, .kc-err{ text-align:center; color:var(--muted) }
.kc-err{ color:var(--bad) }
.kc-ent{ font-size:11px; font-weight:600; color:var(--faint) }
.kc-logrow .kc-num{ font-size:13.5px }

/* שינוי מחיר: ישן ← חדש, ואחוז. עלייה בעלות = אדום, ירידה = ירוק */
.kc-chg{ display:inline-flex; align-items:baseline; gap:6px; font-family:var(--en);
  font-variant-numeric:tabular-nums; white-space:nowrap }
.kc-old{ color:var(--faint); text-decoration:line-through; text-decoration-thickness:1px }
.kc-d{ direction:ltr; unicode-bidi:isolate; font-size:11.5px; font-weight:700; padding:1px 6px; border-radius:10px; background:var(--navy-soft); color:var(--navy) }
.kc-d.up{ background:var(--bad-bg); color:var(--bad) }
.kc-d.down{ background:var(--good-bg); color:var(--good) }

/* שדה עם יחידה צמודה (₪, %, ק"ג) */
.kc-in{ position:relative; display:block }
.kc-in input{ width:100%; padding-inline-end:34px }
.kc-in i{ position:absolute; inset-inline-end:12px; top:50%; transform:translateY(-50%);
  font-style:normal; font-size:13px; color:var(--faint); pointer-events:none }

/* חלונות */
.kc-modal .kc-form{ gap:14px }
.kc-vat{ font-size:13px; margin-top:2px }
.kc-why-row{ display:flex; gap:10px; align-items:center }
.kc-why-row input{ flex:1; min-width:0 }
.kc-kind{ margin:0 auto }
.kc-hint{ text-align:center; font-size:12.5px; color:var(--muted); margin:8px 0 14px }
.kc-cardbody .sec-head{ margin:4px 0 10px }
.kc-hint-sm{ margin:-4px 0 10px; font-size:12px; color:var(--faint) }
.kc-lines{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px }
.kc-lines > .btn{ align-self:flex-start }
.kc-line{ display:grid; grid-template-columns:minmax(0,1fr) 128px 92px 36px; gap:8px; align-items:center }
.kc-line select, .kc-line input{ height:40px; border:1.5px solid var(--line-strong); border-radius:9px;
  background:var(--raised); color:var(--ink); font:inherit; font-size:14px; padding:0 10px; min-width:0 }
.kc-line input{ font-family:var(--en); font-variant-numeric:tabular-nums }
.kc-line select:focus, .kc-line input:focus{ outline:none; border-color:var(--navy) }
.kc-line-cost{ font-family:var(--en); font-size:13.5px; font-variant-numeric:tabular-nums; color:var(--muted); text-align:end }
.kc-line .btn-delete{ width:36px; height:36px; padding:0 }
@media (max-width:560px){
  .kc-line{ grid-template-columns:minmax(0,1fr) 92px 36px; row-gap:4px }
  .kc-line select{ grid-column:1 / -1 }
  .kc-line .kc-qty{ grid-column:1 }
}

/* "הקבלה": הפירוק של המחיר, שורה לכל שלב בנוסחה */
.kc-receipt{ margin-top:18px; background:var(--inset); border:1px solid var(--inset-line); border-radius:var(--r);
  padding:12px 16px; display:flex; flex-direction:column; gap:6px }
.kc-r{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; color:var(--muted) }
.kc-r > span:last-child{ font-family:var(--en); font-variant-numeric:tabular-nums; white-space:nowrap }
.kc-total{ border-top:1px solid var(--inset-line); padding-top:8px; margin-top:2px; color:var(--ink); font-weight:700; font-size:15px }
.kc-total b{ font-size:16px }

/* "מה ישתנה" */
.kc-prev-box{ margin-top:12px; border:1px dashed var(--line-strong); border-radius:var(--r); padding:10px 14px;
  font-size:13.5px; display:flex; flex-direction:column; gap:6px }
.kc-prev-box.muted{ color:var(--faint); text-align:center }
.kc-prev-box.bad{ color:var(--bad); border-color:var(--bad); background:var(--bad-bg) }
.kc-prev-t{ font-weight:700; font-family:var(--display); color:var(--ink) }
.kc-prev-r{ display:flex; justify-content:space-between; gap:10px; align-items:baseline }
.kc-prev-box details{ display:flex; flex-direction:column; gap:6px }
.kc-prev-box details[open]{ display:flex }
.kc-prev-box details > .kc-prev-r{ margin-top:6px }
.kc-prev-box summary{ cursor:pointer; color:var(--navy); font-weight:600; font-size:13px; width:fit-content }
.kc-set .kc-prev-box{ max-width:620px }

/* פרמטרים */
.kc-set{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 16px; align-items:center;
  padding:14px 18px; border-bottom:1px solid var(--line) }
.kc-set:last-child{ border-bottom:0 }
.kc-set-l{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.kc-set-l label{ font-weight:700; font-size:14.5px }
.kc-set-r{ display:flex; gap:8px; align-items:center }
.kc-set-r .kc-in{ width:130px }
.kc-set-r .btn[hidden]{ display:none }   /* .btn מגדיר display ודורס את hidden */
.kc-set-r input{ height:40px; border:1.5px solid var(--line-strong); border-radius:9px; background:var(--raised);
  color:var(--ink); font-family:var(--en); font-size:15px; padding-inline-start:10px; font-variant-numeric:tabular-nums }
.kc-set-r input:focus{ outline:none; border-color:var(--navy) }
.kc-set .kc-preview{ grid-column:1 / -1 }
.kc-set .kc-preview:empty{ display:none }
@media (max-width:560px){
  .kc-why-row{ flex-direction:column; align-items:stretch }
  .kc-why-row .seg{ width:100% }
  .kc-why-row .seg button{ flex:1 }
  .kc-logrow{ flex-wrap:wrap; row-gap:6px }
  .kc-logrow .kc-main{ flex-basis:100% }
  .kc-logrow .kc-num{ align-items:flex-start }
  .kc-set{ grid-template-columns:1fr }
  .kc-set-r .kc-in{ flex:1; width:auto }
  .kc-item{ padding:11px 14px; gap:10px }
}

/* ═══════════════════ הזמנות סחורה (supply-ui.js) ═══════════════════ */
.sp-branches{ margin:0 auto 12px }
.sp-badge{ display:inline-grid; place-items:center; min-width:19px; height:19px; padding:0 5px; border-radius:10px;
  background:var(--warn); color:#fff; font-size:11px; font-weight:800; margin-inline-start:4px; font-family:var(--en) }
.sp-head{ display:flex; flex-direction:column; gap:14px; margin-bottom:14px }
.sp-days{ margin:0 }
.sp-other{ position:relative; overflow:hidden }
.sp-other input{ position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; border:0; padding:0 }
.sp-head textarea{ min-height:52px }
.sp-restored, .sp-editnote{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px;
  background:var(--accent-soft); border-color:var(--accent); font-size:14px }
.sp-editnote{ flex-direction:column; align-items:flex-start; gap:4px; background:var(--violet-bg); border-color:var(--violet) }
.sp-editnote span{ color:var(--muted); font-size:13px }
.sp-restored .btn{ margin-inline-start:auto }

/* שורת מוצר: שם ופירוט מימין, −/כמות/+ משמאל. שורה שהוזמנה — מודגשת */
.sp-row{ padding-block:9px }
.sp-row.on{ background:var(--navy-soft) }
.sp-row.on .kc-name{ color:var(--navy) }
.sp-was{ font-size:11.5px; font-weight:600; color:var(--violet); background:var(--violet-bg); padding:1px 7px; border-radius:10px }
.sp-step{ display:flex; align-items:center; gap:6px; flex:none }
.sp-step button{ width:40px; height:40px; border-radius:10px; border:1.5px solid var(--line-strong);
  background:var(--raised); color:var(--ink); font-size:20px; font-weight:700; line-height:1; cursor:pointer;
  font-family:var(--en); touch-action:manipulation }
.sp-step button:hover:not(:disabled){ border-color:var(--navy); color:var(--navy) }
.sp-step button:disabled{ opacity:.35; cursor:default }
.sp-row.on .sp-step button[data-act="sp-inc"]{ background:var(--navy); border-color:var(--navy); color:var(--on-navy) }
.sp-step input{ width:48px; height:40px; text-align:center; border:1.5px solid var(--line-strong); border-radius:10px;
  background:var(--raised); color:var(--ink); font-family:var(--en); font-size:16px; font-weight:700;
  font-variant-numeric:tabular-nums }
.sp-step input:focus{ outline:none; border-color:var(--navy) }

/* הסרגל התחתון: מספר הפריטים שנבחרו יושב על כפתור הסיכום */
.sp-n{ display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:11px;
  background:var(--accent); color:#fff; font-family:var(--en); font-size:12.5px; font-weight:800 }
.sp-n:empty{ display:none }
/* ימי האספקה נשברים לשורה שנייה ולא נגללים — אחרת "תאריך אחר" מוסתר */
.chiprow.sp-days{ flex-wrap:wrap; overflow:visible }

/* סיכום */
.sp-review{ display:flex; flex-direction:column; gap:4px }
.sp-rev-cat{ font-family:var(--display); font-weight:600; font-size:13px; color:var(--navy); margin-top:10px;
  padding-bottom:3px; border-bottom:1px solid var(--line) }
.sp-rev-r{ display:flex; justify-content:space-between; gap:10px; font-size:14.5px; padding:3px 0 }
.sp-rev-r b{ font-family:var(--en); font-size:15px }
.sp-notes-box{ background:var(--accent-soft); border-radius:10px; padding:9px 12px; font-size:14px; margin-bottom:6px;
  white-space:pre-wrap }
.sp-changes{ border:1px dashed var(--violet); background:var(--violet-bg); border-radius:var(--r); padding:10px 14px;
  display:flex; flex-direction:column; gap:6px; margin-bottom:8px; font-size:14px }
.sp-rm{ color:var(--bad) }
.sp-wa-text{ white-space:pre-wrap; font-family:var(--he); font-size:13.5px; line-height:1.55; margin:0;
  background:var(--inset); border:1px solid var(--inset-line); border-radius:var(--r); padding:12px 14px;
  max-height:40vh; overflow:auto }
.sp-wa-foot{ justify-content:space-between }

/* כרטיסי הזמנות */
.sp-orders{ display:flex; flex-direction:column; gap:10px }
.sp-order{ overflow:hidden }
.sp-order-head{ display:flex; align-items:center; gap:14px; width:100%; padding:13px 18px; border:0; background:transparent;
  color:var(--ink); font:inherit; text-align:start; cursor:pointer }
.sp-order-head:hover{ background:var(--btn-hover-bg) }
.sp-order.open .sp-order-head{ border-bottom:1px solid var(--line) }
.sp-order-body{ padding:12px 18px 16px; display:flex; flex-direction:column; gap:10px }
.sp-tbl td.n, .sp-tbl th.n{ text-align:end; font-family:var(--en); font-variant-numeric:tabular-nums; white-space:nowrap }
.sp-tbl .sp-notsent td{ color:var(--bad) }
.sp-req{ border:1px dashed var(--violet); background:var(--violet-bg); border-radius:var(--r); padding:10px 14px;
  display:flex; flex-direction:column; gap:6px; font-size:14px }
.sp-req .btn{ align-self:flex-start }
.sp-req-bad{ border-color:var(--bad); background:var(--bad-bg); color:var(--bad) }
.sp-order-acts{ justify-content:flex-start }
.sp-wa-foot a.btn{ text-decoration:none }
.sp-wa-foot .btn-go::before{ content:none }
.sp-req-cancel{ border-color:var(--bad); background:var(--bad-bg) }
.sp-cancel-p{ font-size:14px; color:var(--muted); margin:0 0 12px; line-height:1.55 }
.kc-sup-contacts{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; padding:12px 14px;
  background:var(--inset); border:1px solid var(--inset-line); border-radius:var(--r) }
.kc-sup-contact{ display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.kc-sup-contact > span{ font-weight:700; min-width:70px }
.kc-sup-contact a.btn{ text-decoration:none; direction:ltr }

/* ✕ בחלונות קופצים (app.js · addModalClose). פס בגובה 0 שנדבק לראש החלון,
   כך שה-✕ נשאר גלוי גם כשגוללים בתוך חלון ארוך. */
.modal-xbar{ position:sticky; top:0; height:0; z-index:5 }
.modal-x{ position:absolute; top:10px; inset-inline-end:10px; width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface); color:var(--muted); font-size:16px; line-height:1;
  display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow); touch-action:manipulation }
.modal-x:hover{ color:var(--ink); border-color:var(--line-strong) }
.modal-bg[data-close-modal] .modal-head{ padding-inline-end:56px }

/* ═══════════════════ מטבח מייצר (kitchen-orders-ui.js) ═══════════════════
   שורת אישור: פריט | הוזמן | נשלח בפועל (−/+) | ק״ג. שורה שנשלחה אחרת ממה
   שהוזמן — ענבר (כמו אצל מאיר); לא נשלח — מעומעמת; חסר משקל — אדום. */
.ko-fresh{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px;
  background:var(--accent-soft); border-color:var(--accent); font-weight:600 }
.ko-fresh[hidden]{ display:none }
.ko-grid-head, .ko-item{ display:grid; grid-template-columns:minmax(0,1fr) 54px 142px 96px; gap:10px; align-items:center }
.ko-grid-head{ font-size:11.5px; font-weight:700; color:var(--faint); padding:0 10px }
.ko-grid-head span:not(:first-child){ text-align:center }
.ko-items{ display:flex; flex-direction:column; gap:2px }
.ko-cat{ font-family:var(--display); font-weight:600; font-size:13px; color:var(--navy); margin:10px 0 4px;
  padding-bottom:3px; border-bottom:1px solid var(--line) }
.ko-item{ padding:7px 10px; border-radius:10px }
.ko-item.diff{ background:var(--warn-bg) }
.ko-item.zero .ko-name{ color:var(--faint); text-decoration:line-through }
.ko-item.bad{ background:var(--bad-bg); box-shadow:inset 0 0 0 1.5px var(--bad) }
.ko-name{ font-weight:700; font-size:14.5px; min-width:0 }
.ko-ord{ text-align:center; font-family:var(--en); font-weight:700; color:var(--muted) }
.ko-step{ justify-content:center }
.ko-w{ text-align:center }
.ko-w input{ width:100%; height:40px; text-align:center; border:1.5px solid var(--line-strong); border-radius:10px;
  background:var(--raised); color:var(--ink); font-family:var(--en); font-size:15px; font-variant-numeric:tabular-nums }
.ko-w input:disabled{ opacity:.4 }
.ko-w input:focus{ outline:none; border-color:var(--navy) }
.ko-item.bad .ko-w input{ border-color:var(--bad) }
.ko-extras{ display:flex; flex-direction:column; gap:8px; align-items:flex-start }
.ko-extra{ display:grid; grid-template-columns:minmax(0,1fr) 64px 80px auto auto; gap:8px; width:100%; align-items:center }
.ko-extra:not(:has(input[data-f="price"])){ grid-template-columns:minmax(0,1fr) 64px 80px auto }
.ko-extra input{ height:40px; border:1.5px solid var(--line-strong); border-radius:10px; background:var(--raised);
  color:var(--ink); font:inherit; font-size:14px; padding:0 10px; min-width:0 }
.ko-extra input:focus{ outline:none; border-color:var(--navy) }
.ko-extra .btn-delete{ width:36px; height:36px; padding:0 }
.ko-approver{ max-width:320px; margin-top:6px }
.ko-approve-row{ justify-content:flex-start }
.ko-req-reason input{ width:100%; height:40px; border:1.5px solid var(--line-strong); border-radius:10px;
  background:var(--raised); color:var(--ink); font:inherit; font-size:14px; padding:0 10px }
.ko-req-acts{ justify-content:flex-start; gap:8px }
@media (max-width:560px){
  /* בטלפון: שם הפריט בשורה משלו, ומתחתיו הוזמן · נשלח · משקל */
  .ko-grid-head{ display:none }
  .ko-item{ grid-template-columns:auto 1fr 88px; row-gap:6px }
  .ko-item .ko-name{ grid-column:1 / -1 }
  .ko-ord::before{ content:'הוזמן '; font-family:var(--he); font-weight:400; font-size:12px }
  .ko-step{ justify-content:flex-start }
  .ko-extra{ grid-template-columns:1fr 56px 70px auto }
  .ko-extra input[data-f="name"]{ grid-column:1 / -1 }
  .ko-extra:has(input[data-f="price"]){ grid-template-columns:1fr 56px 70px auto }
}
.ko-ord{ white-space:nowrap }
/* שורה שנבחרה בהזמנה: בבהיר — שם בנייבי; בכהה הנייבי הוא תכלת, ועל הרקע
   הכחול זה לא קריא. בכהה — לבן. (רמי, 2026-09-23) */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .sp-row.on .kc-name{ color:var(--ink) } }
:root[data-theme="dark"] .sp-row.on .kc-name{ color:var(--ink) }
/* חלון וואטסאפ בטלפון: הכפתור הראשי בשורה משלו, מעל העתקה/סגירה */
@media (max-width:520px){
  .sp-wa-foot{ flex-wrap:wrap }
  .sp-wa-foot .btn-go{ flex-basis:100%; order:-1 }
}

/* סרגל הכפתורים הדביק של ההזמנה יושב על השורות האחרונות: בגלילה עד הסוף
   הפריט האחרון נשאר מאחוריו, ומשיכה למעלה קופצת חזרה (רמי, 2026-09-23).
   מרווח בגובה הסרגל אחרי הרשימה — כך הפריט האחרון נעצר מעליו. */
.sp-list{ margin-bottom:84px }

/* ── 16px לכל שדה במגע — חייב להיות אחרון בקובץ ──
   ספארי באייפון מקרב כשנכנסים לשדה קטן מ-16px ולא מתרחק חזרה, והדף "זז ימינה
   ושמאלה". הבלוק הכללי (.field input, .modal input...) נדרס כאן על ידי כללים
   שנכתבו אחריו לשדות של המטבח ותמחור. ראו ios-mobile-form-pitfalls §5, §7. */
@media (hover:none) and (pointer:coarse){
  .kc-in input, .kc-line select, .kc-line input, .kc-set-r input, .kc-why-row input,
  .sp-step input, .sp-head textarea, .ko-w input, .ko-extra input, .ko-req-reason input,
  .toolbar-search input{
    font-size:16px;
  }
}

/* סימון אדום של שדה או שורה חסרים במסכי המטבח והתמחור — נדלק ודועך אחרי
   כמה שניות (רמי, 2026-09-23). ההודעה עצמה כבר נאמרה בטוסט. */
@keyframes bad-fade { 0%, 70% { } 100% { background:transparent; box-shadow:none; border-color:var(--line-strong); color:inherit } }
.ko-item.bad, .kc-modal .field.bad input, .kc-modal .field.bad > label,
.ko-approver.bad input, .ko-approver.bad > label{ animation:bad-fade 4s ease forwards }

/* ── מצב כהה במסכי המטבח וההזמנות: בלי מילוי חום-ענבר ("חרדל") ──
   הקו של המערכת (תגים, שורת עובד חוצה-סניפים): משטח מורם של התמה + פס ענבר
   דק בצד ההתחלה. שורה שנשלחה אחרת ממה שהוזמן, תיבת הערה, "נכנסו חדשות",
   "שוחזרה טיוטה". בבהיר — כמו שהיה. (רמי, 2026-09-23) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ko-item.diff{ background:var(--inset); border-inline-start:3px solid var(--warn); padding-inline-start:7px }
  :root:not([data-theme="light"]) .sp-notes-box{ background:var(--inset); border-inline-start:3px solid var(--accent) }
  :root:not([data-theme="light"]) .ko-fresh,
  :root:not([data-theme="light"]) .sp-restored{ background:var(--inset); border-color:var(--inset-line); border-inline-start:3px solid var(--accent) }
}
:root[data-theme="dark"] .ko-item.diff{ background:var(--inset); border-inline-start:3px solid var(--warn); padding-inline-start:7px }
:root[data-theme="dark"] .sp-notes-box{ background:var(--inset); border-inline-start:3px solid var(--accent) }
:root[data-theme="dark"] .ko-fresh,
:root[data-theme="dark"] .sp-restored{ background:var(--inset); border-color:var(--inset-line); border-inline-start:3px solid var(--accent) }
/* פריט שלא נשלח (0) — אדום במקום ענבר: בכהה הפס, בבהיר הרקע הבהיר */
.ko-item.diff.zero{ background:var(--bad-bg) }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ko-item.diff.zero{ background:var(--inset); border-inline-start-color:var(--bad) }
}
:root[data-theme="dark"] .ko-item.diff.zero{ background:var(--inset); border-inline-start-color:var(--bad) }
/* פריט ביחידות: במקום שדה המשקל — "בלון" באותה מידה, שקוע וכהה יותר, כדי
   שהעמודה תהיה אחידה וייראה ברור שאין מה ללחוץ (רמי, 2026-09-23) */
.ko-unit{ display:flex; align-items:center; justify-content:center; width:100%; height:40px; border-radius:10px;
  background:var(--paper); border:1.5px solid var(--line); color:var(--faint); font-size:13px; font-weight:600;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.08); cursor:default; user-select:none }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ko-unit{ background:rgba(0,0,0,.22); border-color:var(--line); box-shadow:inset 0 2px 5px rgba(0,0,0,.35) }
}
:root[data-theme="dark"] .ko-unit{ background:rgba(0,0,0,.22); border-color:var(--line); box-shadow:inset 0 2px 5px rgba(0,0,0,.35) }

/* ═══ השלמה / זיכוי: בחירה מפורשת למעלה, צבע לכל מצב ═══
   ירוק = השלמה (עוד סחורה לסניף), אדום = זיכוי (יורד מהחיוב). */
.ko-mode{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px }
.ko-mode-b{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:14px 10px; border-radius:var(--r);
  border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink); font:inherit; cursor:pointer }
.ko-mode-b b{ font-family:var(--display); font-size:17px }
.ko-mode-b span{ font-size:12.5px; color:var(--muted) }
.ko-mode-b.add.on{ border-color:var(--good); box-shadow:inset 0 0 0 1px var(--good); background:var(--good-bg) }
.ko-mode-b.add.on b{ color:var(--good) }
.ko-mode-b.credit.on{ border-color:var(--bad); box-shadow:inset 0 0 0 1px var(--bad); background:var(--bad-bg) }
.ko-mode-b.credit.on b{ color:var(--bad) }
.ko-rep-list.is-add .sp-row.on{ background:var(--good-bg) }
.ko-rep-list.is-credit .sp-row.on{ background:var(--bad-bg) }
.ko-rep-list .sp-row.on .kc-name{ color:var(--ink) }
.ko-rep-list.is-credit .sp-row.on .sp-step button[data-act="ko-rep-inc"]{ background:var(--bad); border-color:var(--bad); color:#fff }
.ko-rep-list.is-add .sp-row.on .sp-step button[data-act="ko-rep-inc"]{ background:var(--good); border-color:var(--good); color:#fff }
.ko-rhint{ color:var(--navy); font-weight:700 }
.ko-rep-list .sp-row.bad{ box-shadow:inset 0 0 0 1.5px var(--bad) }
.ko-rev-kind{ padding:9px 12px; border-radius:10px; font-weight:700; font-size:14px; margin-bottom:6px }
.ko-rev-kind.add{ background:var(--good-bg); color:var(--good) }
.ko-rev-kind.credit{ background:var(--bad-bg); color:var(--bad) }
/* בכהה — בלי מילוי רווי: משטח מורם ופס בצבע המצב (הקו של המערכת) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ko-mode-b.add.on, :root:not([data-theme="light"]) .ko-mode-b.credit.on{ background:var(--inset) }
  :root:not([data-theme="light"]) .ko-rep-list.is-add .sp-row.on{ background:var(--inset); box-shadow:inset -3px 0 0 var(--good) }
  :root:not([data-theme="light"]) .ko-rep-list.is-credit .sp-row.on{ background:var(--inset); box-shadow:inset -3px 0 0 var(--bad) }
  :root:not([data-theme="light"]) .ko-rev-kind.add, :root:not([data-theme="light"]) .ko-rev-kind.credit{ background:var(--inset) }
}
:root[data-theme="dark"] .ko-mode-b.add.on, :root[data-theme="dark"] .ko-mode-b.credit.on{ background:var(--inset) }
:root[data-theme="dark"] .ko-rep-list.is-add .sp-row.on{ background:var(--inset); box-shadow:inset -3px 0 0 var(--good) }
:root[data-theme="dark"] .ko-rep-list.is-credit .sp-row.on{ background:var(--inset); box-shadow:inset -3px 0 0 var(--bad) }
:root[data-theme="dark"] .ko-rev-kind.add, :root[data-theme="dark"] .ko-rev-kind.credit{ background:var(--inset) }
@media (hover:none) and (pointer:coarse){ .ko-rep-list .sp-step input, #ko-rep-notes, [data-ko-rsrc]{ font-size:16px } }

/* ═══════════════════ דוח לתשלום (kitchen-orders-ui.js) ═══════════════════ */
.rp-range{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px }
.rp-range label{ display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:600; color:var(--muted) }
.rp-range input{ height:40px; border:1.5px solid var(--line-strong); border-radius:10px; background:var(--raised); color:var(--ink); padding:0 10px; font:inherit }
.rp-bill{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; border-inline-start:3px solid var(--navy) }
.rp-bill.internal{ border-inline-start-color:var(--line-strong) }
.rp-bill-row{ display:flex; gap:10px; align-items:baseline; flex-wrap:wrap }
.rp-bill-row > span:first-child{ min-width:34px; color:var(--faint); font-size:13px }
.rp-bill-note{ font-size:13.5px; color:var(--muted); margin-top:4px }
.rp-bill-note b{ color:var(--ink) }
.rp-split{ margin-bottom:12px; overflow:hidden }
.rp-split td.n, .rp-split th.n{ text-align:end; font-family:var(--en); white-space:nowrap }
.rp-unpriced{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; border-color:var(--warn); background:var(--warn-bg) }
.rp-unpriced > b{ color:var(--warn) }
.rp-up{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; padding:6px 0; border-top:1px solid var(--line) }
.rp-up-in{ display:flex; gap:8px; align-items:center }
.rp-up-in .kc-in{ width:110px }
.rp-up-in input{ height:38px; border:1.5px solid var(--line-strong); border-radius:9px; background:var(--raised); color:var(--ink); font-family:var(--en); font-size:15px; padding-inline-start:10px }
.rp-stats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin-bottom:12px }
.rp-stat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px; display:flex; flex-direction:column; gap:2px }
.rp-stat b{ font-family:var(--en); font-size:20px; color:var(--ink); font-variant-numeric:tabular-nums }
.rp-stat span{ font-size:12.5px; color:var(--muted) }
.rp-stat.rp-total b{ color:var(--navy) }
.rp-actions{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px }
.rp-tbl td.n, .rp-tbl th.n{ text-align:end; font-family:var(--en); font-variant-numeric:tabular-nums; white-space:nowrap }
.rp-tbl tr.rp-cat td{ background:var(--inset); color:var(--navy); font-family:var(--display); font-weight:600 }
.rp-tbl tr.rp-sub td, .rp-order tr.rp-sub td{ font-weight:700; border-bottom:1.5px solid var(--line-strong) }
.rp-tbl tr.rp-credit td, .rp-order tr.rp-credit td{ color:var(--bad) }
.rp-totals{ display:flex; flex-direction:column; gap:0; margin:14px 18px 18px auto; max-width:360px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden }
.rp-totals > div{ display:flex; justify-content:space-between; padding:9px 14px; font-size:14px }
.rp-totals b{ font-family:var(--en); font-variant-numeric:tabular-nums }
.rp-totals .rp-grand{ background:var(--navy); color:var(--on-navy); font-weight:800 }
.rp-order-h{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px }
.rp-order td.n{ text-align:end; font-family:var(--en); white-space:nowrap }
.rp-order-grand{ display:flex; justify-content:space-between; font-weight:800; font-size:15px }
.rp-order-grand b{ font-family:var(--en) }
@media (max-width:620px){
  .rp-stats{ grid-template-columns:1fr 1fr }
  .rp-actions{ flex-direction:column; align-items:stretch }
  .rp-actions .seg{ width:100% }
  .rp-actions .seg button{ flex:1 }
  .rp-actions .btn-row .btn{ flex:1 }
  .rp-totals{ margin:12px }
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .rp-unpriced{ background:var(--inset); border-color:var(--inset-line); border-inline-start:3px solid var(--warn) } }
:root[data-theme="dark"] .rp-unpriced{ background:var(--inset); border-color:var(--inset-line); border-inline-start:3px solid var(--warn) }
@media (hover:none) and (pointer:coarse){ .rp-range input, .rp-up-in input{ font-size:16px } }
.rp-lock{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px;
  border-inline-start:3px solid var(--line-strong) }
.rp-lock.locked{ border-inline-start-color:var(--good) }
.rp-lock.locked b{ color:var(--good) }

/* ── סבב ליטוש (רמי, 2026-09-23 לילה) ── */
/* השלמה/זיכוי: עמודת המשקל ברוחב קבוע — "יח׳" התכווץ ודחף את הכפתורים הצידה */
.ko-rrow .ko-w{ flex:0 0 96px }
.ko-rrow .sp-step{ flex:none }
@media (max-width:560px){ .ko-rrow .ko-w{ flex-basis:80px } }
/* פריטים שלא ברשימה + שם המאשר: מרווחים, לא צמוד */
.ko-rep-more{ display:flex; flex-direction:column; gap:14px }
.ko-rep-more .ko-cat{ margin:0 }
.ko-rep-more .ko-extras{ gap:10px }
.ko-rep-more .ko-approver{ margin-top:4px; padding-top:14px; border-top:1px solid var(--line); max-width:none }
.ko-rep-more .ko-approver input{ max-width:320px }
.ko-extra{ align-items:center }
/* סיבת זיכוי: רווח בין הצ׳יפים לשדה */
.sp-head .chiprow + input{ margin-top:10px }
/* שורת "רענון" בתחתית רשימה: הטקסט בשורה, הכפתור מתחתיו ממורכז — בטלפון זה גלש */
.kc-foot .btn{ display:flex; margin:8px auto 0 }

/* ═══ חוסרים וחריגים ═══ */
.rp-views{ margin-bottom:12px }
.rp-stat.warn b{ color:var(--warn) }
.rp-sec{ margin-bottom:12px; overflow:hidden }
.rp-sec-h{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:14px 18px 8px }
.rp-sec-h h3{ font-family:var(--display); font-size:16px; margin:0 }
.rp-n{ font-family:var(--en); font-size:13px; color:var(--faint); font-weight:600 }
.rp-sec .scroll-x{ padding:0 8px 8px }
.rp-sec td.n, .rp-sec th.n{ text-align:end; font-family:var(--en); font-variant-numeric:tabular-nums; white-space:nowrap }
.rp-bad{ color:var(--bad); font-weight:700 }
.rp-none{ padding:0 18px 14px; margin:0; color:var(--faint); font-size:14px }
.rp-line{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:9px 18px; border-top:1px solid var(--line); font-size:14px }
.rp-line > span{ color:var(--muted) }
.ko-oref{ border:1px solid var(--line-strong); background:var(--surface); color:var(--navy); border-radius:8px; padding:3px 9px;
  font:inherit; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap }
.ko-oref:hover{ border-color:var(--navy) }
.rp-det{ border-top:1px solid var(--line) }
.rp-det summary{ padding:10px 18px; cursor:pointer; color:var(--navy); font-weight:600; font-size:14px }