/* ---------------------------------------------------------------------
   עיצוב המערכת. קובץ אחד, בלי מסגרות ובלי משיכה מהאינטרנט.

   הגופן: מחסנית גופני מערכת שקיימת בכל Windows ובכל טלפון.
   כשנגיע לעיצוב סופי נשקול להביא גופן עברי לתיקייה המקומית,
   כמו fonts/ ב-TrailerLog.

   הכל נבנה על סולם אחד של גדלים ומרווחים, המוגדר למטה. אין בקובץ
   הזה מספר שנבחר לבדו: כל ריווח הוא --s, כל גודל כתב הוא --t. זה
   מה שנותן לעמוד תחושה מסודרת - לא הקישוט, אלא החזרה על אותם ערכים.
   --------------------------------------------------------------------- */

:root {
    /* צבע */
    --ink:      #1b2a21;
    --ink-soft: #3f5147;
    --muted:    #71807a;
    --line:     #e0e6e3;
    --line-soft:#eef2f0;
    --paper:    #ffffff;
    --bg:       #f2f5f4;
    --tile:     #f7faf9;
    --green:    #2e7d5b;
    --green-bg: #e9f4ef;

    /* **הקובייה המוארת בלבד, ולא --green-bg.** אותו ירוק בהיר
       משמש בעשרה מקומות אחרים - הודעת הצלחה, תגית "סגור", לשונית
       נבחרת - ושם הוא נכון. כאן הוא היה חלש מדי, ולכן שלושה
       שמות משלו.

       3.9.2026, מפיו: *"הירוק העדין בו אתה משתמש לא בולט מספיק.
       ואני מקבל בקשות להוסיף V או חיווי אחר לביצוע."*

       **ונמדד:** המילוי הישן היה בניגודיות 1.13 מול לבן ו-1.03
       מול רקע העמוד - שלושה אחוזים הבדל. הסף שבו משטח נחשב
       נראה לעין הוא 3.0. על מסך טוב העין משלימה; על מסך זול,
       בזווית, אין שם דבר. **המשתמשים אבחנו נכון.** */
    --green-lit:      #cfe8db;   /* 1.29 מול לבן, מול 1.13 */
    --green-lit-line: #7fbfa0;   /* 2.00 מול לבן */
    --green-lit-ink:  #1f6045;

    --amber:    #8a6116;
    --amber-bg: #fdf4e3;
    --red:      #a3322b;
    /* הפתק המחיק. אדום וסגול, בקשתו 3.9.2026. */
    --fuchsia:  #a81f8f;

    /* **תיאור הנגרר - פוקסיה, מ-13.10.2026.** בקשתה של אלונה
       דרכו: *"הכיתוב בעמודה האמצעית (תיאור הנגרר) יהיה בצבע
       'פוקסיה' כמו הכיתוב בלוח שבתיקי הלקוחות."*

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

       `--fuchsia` הוא צבע מערכת, לא בחירה אישית של משתמש, ולכן
       ההפניה אינה סותרת את הכלל מ-7.10.2026 שמתועד למטה. **צבע
       מערכת נגזר מצבע מערכת; מצבע אישי - לעולם לא.**

       **נמדד: 6.45 מול לבן**, 6.14 מול שורה בריחוף, 5.88 מול
       רקע העמוד. קריא יותר מהירוק שיצא (5.60).

       ------------------------------------------------------------
       **ומה שהיה כאן עד אותו יום, כי ההיסטוריה מסבירה את הכלל:**

       30.9.2026, בקשתה של אלונה דרכו: *"תוכנו של שדה 'תיאור
       הנגרר' יופיע בירוק... בכל מקום בו הוא מופיע."* ומפיו:
       *"אינו ניתן לשינוי. זהו צבע מערכת."* **"בכל מקום" עדיין
       עומד** - כותרת התיק והרשימות צבועות מאותו משתנה אחד,
       ולכן הן זזו יחד גם עכשיו.

       **ולא ירוק הפעולה.** `--green` כבר אומר "לחץ כאן" - כפתור,
       קישור, מסגרת בפוקוס, הסדר הדלוק. תיאור אינו פעולה, וצבע
       שאומר שני דברים מפסיק לומר את שניהם. **אותו שיקול עצמו
       חל על הפוקסיה:** היא אומרת "פתק מהלוח המחיק", ועכשיו גם
       "תיאור הנגרר". שניהם סימן ולא פעולה, ושניהם באו מאלונה.

       7.10.2026 נבחר `#11782d`, גוון 136°, אחרי ארבעה סבבים:
       ריבוע הצבע שצירף היה `#bbf450` ומדידתו מול לבן 1.30 - צבע
       של מרקר ולא של כתב; הגוון תוקן מליים (81°) לעלה (136°)
       מפיו: *"הירוק לא ירוק מספיק."*

       **והכלל שנולד שם, והוא שנשאר אחרי שהירוק הלך:** מפיו,
       *"אלונה בודאות תשנה בזמן זה או אחר את גוון הסרגל העליון.
       זה לא אמור להשפיע על הירוק שבחרנו... הוא נשאר מה שהוא
       בלי קשר לסרגל העליון."* הסרגל היה **ההסבר** לאיזה צבע
       הוא מתכוון, לא **המקור** שממנו הצבע נגזר. **אין קשר בקוד
       בין צבע מערכת לצבע אישי, ואין בבדיקות.**

       **והשם השתנה פעמיים:** `--olive` תיאר זית, `--trailer-green`
       תיאר ירוק, והיום אין כאן לא זית ולא ירוק. השם האחרון אומר
       **מה זה** ולא **באיזה צבע** - ולכן הוא ישרוד את החלפת
       הצבע הבאה. */
    --trailer-desc: var(--fuchsia);
    --red-bg:   #fbeceb;

    /* ריווח */
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 18px;
    --s5: 26px;

    /* כתב */
    --t-xs: 12px;
    --t-sm: 13px;
    --t-md: 15px;
    --t-lg: 17px;
    --t-xl: 22px;
    --t-xxl: 34px;   /* שלושת מספרי העבודה, ותו לא */

    --r:   10px;   /* עיגול פינות */
    --r-s: 6px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: "Segoe UI", "Arial", sans-serif;
    font-size: var(--t-md);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 600; margin: 0; }
h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-sm); }

a { color: var(--green); }
p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

.muted { color: var(--muted); font-size: var(--t-sm); }
.tiny  { font-size: var(--t-xs); color: var(--muted); }

/* מספרים בכל המערכת מיושרים לרוחב אחיד. תאריכים וסכומים שאינם
   מיושרים הם המקור הכי שכיח לתחושה של עמוד לא מסודר. */
.num { font-variant-numeric: tabular-nums; }

button { font: inherit; cursor: pointer; }

button.link {
    background: none;
    border: none;
    color: var(--green);
    padding: 0;
    font-size: var(--t-sm);
    text-decoration: underline;
}

button.primary {
    background: var(--green);
    color: #fff;
    border: none;
    border-radius: var(--r-s);
    padding: var(--s3) var(--s5);
    font-weight: 600;
}

button.primary:hover { background: #26694b; }

/* הכפתור היחיד במערכת שאין ממנו חזרה, ולכן הוא נראה אחרת מכולם. */
button.danger {
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: var(--r-s);
    padding: var(--s3) var(--s5);
    font-weight: 600;
}

button.danger:hover { background: #82271f; }

button.ghost {
    padding: 7px 13px;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: var(--paper);
    color: var(--ink-soft);
    font-size: var(--t-sm);
    font-weight: 600;
    white-space: nowrap;
}

button.ghost:hover { border-color: var(--green); color: var(--green); background: var(--green-bg); }

input[type="text"] {
    font: inherit;
    font-size: var(--t-sm);
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: var(--paper);
    color: inherit;
    min-width: 0;
}

input[type="text"]:focus { outline: none; border-color: var(--green); }

/* ---------- סרגל עליון ---------- */
/* **הסרגל, ובו הצבע היחיד שאפשר לשנות.** 30.9.2026, בקשתה של
   אלונה דרכו: *"לאפשר לה לבחור את צבע הסרגל העליון ואת צבע
   הכיתוב בו."*

   **שני משתנים עם נפילה אחורה**, ולכן מי שלא בחר מקבל בדיוק את
   מה שהיה - ואין כאן שני מסלולים שיכולים להיפרד.

   **ומה שאינו משתנה: כל צבע שאומר משהו.** סימן ההודעה נשאר אדום
   גם על סרגל אדום, כי אדום שם פירושו "ממתין לך". צבע שמקשט -
   של מי שמסתכל בו; צבע שנושא מידע - של המערכת. */
.top {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: var(--s3) var(--s5);
    background: var(--bar-bg, var(--paper));
    border-bottom: 1px solid var(--line);
}

/* **רק כשנבחר צבע.** מחלקה ולא רק משתנים: המספרים והכפתורים
   שבתוך הסרגל צבועים בעצמם, וצריך לוותר על הצבע שלהם דווקא
   כאן - ולא בכל מסך של כל אדם. */
.top-tinted,
.top-tinted .brand,
.top-tinted .navlink,
.top-tinted .who-name,
.top-tinted button.link { color: var(--bar-ink, var(--ink)); }

.top-tinted button.link { opacity: .85; }
.top-tinted button.link:hover { opacity: 1; }

/* המונה שליד "תיקים פתוחים": שקוף, ובצבע הכיתוב. רקע תכלת קבוע
   על סרגל כהה נראה כמו כתם. */
.top-tinted .count {
    background: transparent;
    border-color: currentColor;
    color: inherit;
}

/* תיבת החיפוש נשארת לבנה. היא שדה שכותבים בו, ושדה שאינו נראה
   כמו שדה אינו נלחץ. */
.top-tinted .searchbox input { background: var(--paper); color: var(--ink); }

.brand { font-size: var(--t-lg); font-weight: 600; text-decoration: none; color: var(--ink); }
.nav { display: flex; gap: var(--s4); }

/* ---------- מגרש הצבעים ---------- */

/* **הסרגל נדבק לראש המסך, במסך הצבעים בלבד.** 30.9.2026, מפיו:
   *"כדי לבחור את צבע הכיתוב יש צורך לגלול מעט למטה ואז לא רואים
   את הסרגל העליון משנה צבע. זה מאוד לא נוח... הסרגל העליון חייב
   להיות זמין לצפייה בעת בחירת צבעים."*

   התצוגה המקדימה היא הסרגל האמיתי, ותצוגה מקדימה שאינה על המסך
   אינה תצוגה מקדימה. **רק כאן**, דרך מחלקה על ה-body: סרגל דביק
   בכל המסכים הוא שינוי שלא ביקש, והוא גונב גובה מכל עמוד. */
.colourplay .top { position: sticky; top: 0; z-index: 30; }

/* ובאותה נשימה: המסך הזה רחב מטופס רגיל, כדי ששתי הלוחות ישבו
   זו לצד זו ולא תהיה גלילה בכלל. */
.formpage-wide { max-width: 780px; }

.paints { display: flex; flex-wrap: wrap; gap: var(--s5); }
.paintbox { display: flex; flex-direction: column; gap: var(--s2); }

/* הלוח. **גוון בכל עמודה, שמונה דרגות בהירות מלמעלה למטה** -
   ולכן `grid-auto-flow: column`, שממלא עמודה ואז עובר לשכנה.
   הסדר הזה הוא מה שהופך מאה ארבעה ריבועים לקשת שאפשר לקרוא במבט
   אחד, במקום לערימה.

   30.9.2026, מפיו: *"היצע הצבעים צריך להיות רחב ביותר... אפשר
   קשת צבעים רחבה ככל שניתן."* */
.palette {
    display: grid;
    grid-template-rows: repeat(8, 22px);
    grid-auto-flow: column;
    grid-auto-columns: 22px;
    gap: 3px;
    justify-content: start;
    overflow-x: auto;
    padding: 2px;
}

.chip {
    border: 0;
    padding: 0;
    border-radius: 3px;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10);
}
.chip:hover { outline: 2px solid var(--ink-soft); outline-offset: 1px; }

/* מה שנבחר עכשיו. **בלי זה הלוח שוכח** - היא רואה את הסרגל
   משתנה, אבל לא מאיפה בקשת הוא בא, ולא איך לחזור צעד אחד. */
.chip-on { outline: 3px solid var(--ink); outline-offset: 1px; }

.mixrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }
.mix { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); }
.mix input[type="color"] {
    width: 54px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: none;
    cursor: pointer;
}

/* הפסק על הצירוף, תוך כדי בחירה.

   **"reads" ולא "verdict".** `.verdict-ok` כבר קיים כאן, בירוק,
   ושם שתפוס אינו נכשל - הוא משתלט. בדיקת הכפילות תפסה את זה
   ברגע הראשון, וזו בדיוק הסיבה שהיא קיימת. */
.reads { font-size: var(--t-sm); font-weight: 600; }
.reads-good { color: var(--green); }
.reads-ok   { color: var(--amber); }
.reads-bad  { color: var(--red); }

/* ---------- מה נפתח בכל יום ----------

   טבלה שנועדה לנייר. 6.10.2026, מפיו: *"בכל תאריך יהיה רשום
   כמה תיקים נפתחו באותו יום, שם הרוכש ומספר ההזמנה."*

   **שורת כותרת לכל יום, וטבלה קטנה מתחתיה** - ולא טבלה אחת
   ארוכה עם עמודת תאריך שחוזרת על עצמה. העין סופרת ימים, לא
   שורות. */

.printonly { display: none; }
.printhead { font-weight: 600; margin-bottom: var(--s4); }

.dayblock { margin-bottom: var(--s5); }

.dayhead {
    display: flex;
    align-items: baseline;
    gap: var(--s3);
    font-size: var(--t-md);
    margin: 0 0 var(--s2);
    padding-bottom: var(--s1);
    border-bottom: 1px solid var(--line);
}
.dayname { font-weight: 600; }
.daydate { color: var(--ink-soft); }
.daycount { margin-inline-start: auto; color: var(--ink-soft); font-size: var(--t-sm); }

.daytable { width: 100%; border-collapse: collapse; }
.daytable td { padding: 3px 0; vertical-align: baseline; }
.daynumber { width: 5.5em; font-weight: 600; }
.daystate { width: 9em; text-align: start; color: var(--ink-soft); font-size: var(--t-sm); }

/* הכתובת שמחזירה, אם הסרגל נצבע עד שאינו נראה. **מודפסת גדול
   ולא בתוך משפט** - היא נועדה להיות מועתקת ביד לשורת הכתובת. */
.theway {
    font-size: var(--t-lg);
    font-weight: 600;
    direction: ltr;
    text-align: start;
    background: var(--tile);
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    padding: var(--s3) var(--s4);
    margin: var(--s3) 0;
}

.who { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s3); }
.who-name { font-weight: 600; font-size: var(--t-sm); }

/* ---------- סימן ההודעה ----------

   3.9.2026. עיגול אדום עם מספר, ליד השם, בכל מסך. מתחיל מוסתר
   ומתמלא מהשרת - כדי שדף לא יקפוץ בכל טעינה.

   **מהבהב על ההגעה בלבד**, חצי דקה, ואחר כך אדום מלא כל עוד יש
   משהו. הכרעתו, אחרי שמדדתי כעשר התראות ביום בגיבוי: סימן
   שמהבהב כל היום הוא רקע, ורקע איש אינו רואה. */
.bell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--red);
    color: #fff;
    font-size: var(--t-xs);
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
}

.bell:hover { filter: brightness(1.1); }

@keyframes bellpulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(163, 50, 43, .55); }
    50%      { transform: scale(1.18); box-shadow: 0 0 0 7px rgba(163, 50, 43, 0); }
}

.bell-new { animation: bellpulse 1s ease-in-out infinite; }

/* מי שהתנועה מפריעה לו מקבל את אותו מידע בלי שהמסך יזוז. */
@media (prefers-reduced-motion: reduce) {
    .bell-new { animation: none; outline: 2px solid var(--red); outline-offset: 2px; }
}

/* ---------- "בשבילך" ----------

   מסירה בין שני אנשים, ולכן מעל הכול: זה הדבר היחיד בדף שאדם
   אחר ממתין לו. שורה יורדת מכאן אצל כולם ברגע שהסימון נעשה,
   ואין כפתור "ראיתי" - התראה שאפשר לסגור בלי לעשות דבר היא
   התראה שנסגרת. */
.mine { border-color: var(--fuchsia); margin-bottom: var(--s4); }

.minelist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }

.minerow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s2) var(--s3);
    padding: var(--s2) var(--s3);
    background: var(--tile);
    border-radius: var(--r-s);
}

.minewhat { color: var(--ink); text-decoration: none; font-size: var(--t-sm); }
.minewhat:hover { text-decoration: underline; }
.minewhat strong { color: var(--fuchsia); }

.minewho { color: var(--muted); font-size: var(--t-xs); }

/* הכפתור נדחף לקצה, כדי ששורה ארוכה ושורה קצרה ייראו אותו דבר. */
.minerow .btnlike { margin-inline-start: auto; }

/* ---------- שורת משבצת בניהול ---------- */
.slotrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s2) var(--s3);
    padding: var(--s3) 0;
    border-bottom: 1px solid var(--line-soft);
}

.slotrow .formhead { margin: 0; min-width: 16ch; }
.slotstep { color: var(--muted); font-size: var(--t-xs); }

/* ---------- הודעות ---------- */
.flashes { max-width: 1100px; margin: var(--s4) auto 0; padding: 0 var(--s5); }

.flash {
    padding: var(--s3) var(--s4);
    border-radius: var(--r-s);
    margin-bottom: var(--s2);
    font-size: var(--t-sm);
    border: 1px solid transparent;
}

.flash-ok    { background: var(--green-bg); color: var(--green); border-color: #cfe6da; }
.flash-warn  { background: var(--amber-bg); color: var(--amber); border-color: #f0dcb4; }
.flash-error { background: var(--red-bg);   color: var(--red);   border-color: #f0cbc8; }

/* ---------- גוף הדף ---------- */
.page { max-width: 1100px; margin: 0 auto; padding: var(--s5); }

.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: var(--s4);
    margin-bottom: var(--s4);
}

/* כל כרטיס במערכת נפתח באותה כותרת בדיוק. זו החזרה שיוצרת סדר. */
.cardhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding-bottom: var(--s3);
    margin-bottom: var(--s4);
    border-bottom: 1px solid var(--line);
}

.count {
    background: var(--tile);
    border: 1px solid var(--line);
    color: var(--muted);
    border-radius: 20px;
    padding: 1px 10px;
    font-size: var(--t-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ---------- לשוניות ----------

   מסך הניהול התארך, וגלילה ארוכה מסתירה חלקים שלמים. כל לשונית היא
   קישור רגיל, והשרת מגיש חלק אחד - ולכן אין כאן מצב נסתר ואין
   JavaScript. הלשונית הפעילה מסומנת בקו תחתון מלא ובכתב כהה, ולא
   בצבע בלבד. */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
    margin-bottom: var(--s4);
    border-bottom: 1px solid var(--line);
}

.tab {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s3) var(--s4);
    text-decoration: none;
    color: var(--muted);
    font-size: var(--t-sm);
    font-weight: 600;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    border-radius: var(--r-s) var(--r-s) 0 0;
}

.tab:hover { background: var(--tile); color: var(--ink-soft); }

.tab.on {
    color: var(--ink);
    border-bottom-color: var(--green);
    background: var(--paper);
}

.tab.on .count { background: var(--green-bg); color: var(--green); }

/* ---------- מבט על ----------

   28.8.2026. אריחים ומספרים, בלי גרף ובלי צבע מרצד. כל אריח הוא
   קישור רגיל שהשרת עונה עליו ברשימה - אין כאן מצב נסתר ואין
   JavaScript, כמו בלשוניות הניהול.

   **האריח שיש בו אפס נשאר ונחלש.** מפה שמשנה צורה בכל רענון היא
   מפה שאי אפשר ללמוד, ואלונה צריכה למצוא את "אצל הבוחן" באותו
   מקום גם ביום שבו אין שם איש.

   כאן ישבו קודם פסים אופקיים של המערכת הישנה, שנמחקה במפנה. הם
   נשארו בגיליון בלי שאיש קרא להם, ושני עיצובים לאותו דבר בקובץ
   אחד הם בדיוק מה שמבלבל את מי שיקרא כאן בעוד חודש. */
.overview .cardhead { margin-bottom: var(--s3); }

/* ===== מבט על: העבודה גדולה, השלבים שקטים =====

   28.8. שתי צורות נוסו ונדחו - אריחים בגודל אחיד ("עץ עמודים של
   אתר") ופס שרוחבו הכמות ("ממש לא"). מה שנשאר הוא ההבחנה עצמה:
   **שלוש קבוצות העבודה הן מה שדורש ממנה משהו, ולכן הן גדולות.
   אחד עשר השלבים הם אינדקס, ולכן הם שורת טקסט.**

   שורה של מספרים אינה נלחמת על תשומת הלב, ובכל זאת עונה על
   "כמה יש בכל שלב" - וזו הייתה הבקשה המקורית. */

.statrow-work .stat { padding: var(--s5) var(--s3); }
.statrow-work .stat-num { font-size: var(--t-xxl); line-height: 1; }
.statrow-work .stat-label { font-size: var(--t-md); }

/* ---------- מבט על: תרשים הזרימה ----------

   קוביות וחיצים בשורה אחת. הכיוון בא מ-direction: rtl של העמוד -
   הראשונה יושבת מימין, והחץ מצביע שמאלה כי לשם זורם התהליך.

   **המספר גדול והשם קטן, אבל לא גדול כמו למעלה.** 34px שמורים
   לשלושת מספרי העבודה בלבד; ברגע ששתי שורות מספרים באותו גודל,
   שתיהן מפסיקות להיות הכותרת.

   29.8.2026. קודם עמדו כאן ארבע שורות לפי מי מעכב. מפיו:
   *"תרשים זרימה מימין לשמאל. קוביות וחיצים. הכי פשוט שיש."* */
.flowmap {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--s1);
    list-style: none;
    margin: var(--s3) 0 0;
    padding: var(--s3) 0 0;
    border-top: 1px solid var(--line-soft);
}

.flowmap-cell {
    display: flex;
    align-items: stretch;
    gap: var(--s1);
}

.fbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 112px;
    padding: var(--s2) var(--s1);
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    text-decoration: none;
    color: var(--ink-soft);
    text-align: center;
}

.fbox-num {
    font-size: var(--t-lg);
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
}

/* השם הוא `short_he` - **מצב ולא פעולה**, שתיים-שלוש מילים.
   הוא נשבר לשתי שורות בתוך הקובייה ואינו נחתך. */
.fbox-label { font-size: var(--t-xs); line-height: 1.25; }
.fbox:hover { background: var(--tile); }

/* אפס אינו נעלם - הוא נשאר במקומו וחיוור. תרשים שמשנה צורה בכל
   רענון הוא תרשים שאי אפשר ללמוד. */
.fbox.zero,
.fbox.zero .fbox-num { color: var(--muted); font-weight: 400; }

.fbox.on {
    background: var(--green-bg);
    border-color: var(--green);
    color: var(--ink);
}

.farrow {
    align-self: center;
    color: var(--line);
    font-size: var(--t-md);
    line-height: 1;
}

.statgroup { margin-top: var(--s3); }

.stattitle {
    font-size: var(--t-xs);
    color: var(--muted);
    font-weight: 600;
    margin-bottom: var(--s1);
}

.statrow {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
}

/* שורת העבודה מופרדת מהשלבים בקו, ולא ברווח בלבד: אלה שני סוגים
   של מידע - מה לעשות מול איפה הכל עומד. */
.statrow-work {
    padding-bottom: var(--s3);
    border-bottom: 1px solid var(--line);
}

.stat {
    flex: 1 1 108px;
    max-width: 190px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: var(--s2) var(--s3);
    background: var(--tile);
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    text-decoration: none;
    color: var(--ink);
}

.stat:hover { border-color: var(--green); background: var(--paper); }

.stat-num {
    font-size: var(--t-xl);
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

/* **שורת ההסבר בתוך הקובייה**, 29.8.2026, מפיו: *"הוסף שורת הסבר
   בתוך כל קובייה."* "תקוע", "להיום" ו"לא זז" הן קיצורים שנולדו
   כאן, ותווית שצריך לזכור מה פירושה היא תווית שקוראים בה לא נכון. */
.stat-hint {
    display: block;
    margin-top: 3px;
    font-size: var(--t-xs);
    font-weight: 400;
    line-height: 1.3;
    color: var(--muted);
}

.stat-label {
    font-size: var(--t-xs);
    color: var(--ink-soft);
    line-height: 1.25;
}

/* הנבחר מסומן בקו מלא ובכתב כהה, ולא בצבע בלבד. */
.stat.on {
    background: var(--green-bg);
    border-color: var(--green);
    box-shadow: inset 0 -3px 0 var(--green);
}

.stat.zero .stat-num,
.stat.zero .stat-label { color: var(--muted); font-weight: 400; }

.stat-stuck .stat-num { color: var(--red); }
.stat-today .stat-num { color: var(--amber); }
.stat-quiet .stat-num { color: var(--ink-soft); }
.stat-stuck.zero .stat-num,
.stat-today.zero .stat-num { color: var(--muted); }

.overfoot { margin: var(--s4) 0 0; }

/* שביל החזרה. הוא קיים רק כשבאמת סוננה רשימה, ולכן הוא אינו
   רעש קבוע במסך. */
.crumb {
    margin: calc(var(--s4) * -1 + var(--s2)) 0 var(--s4);
    font-size: var(--t-sm);
    color: var(--muted);
}

.crumb strong { color: var(--ink); }
.crumb a { margin-inline-start: var(--s3); }

.task-wait.late { color: var(--amber); font-weight: 600; }

/* מסך ריק הוא מידע, לא תקלה - לכן הוא נראה מכוון ולא נטוש */
.empty { text-align: center; padding: 48px var(--s5); }
.empty h1 { margin-bottom: var(--s2); }
.empty p  { margin: 0; color: var(--muted); }

/* ---------- רשימת התיקים הפתוחים ---------- */
.orderlist { list-style: none; margin: 0; padding: 0; }
.orderlist li + li { border-top: 1px solid var(--line-soft); }

.orderrow {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: var(--s3) var(--s2);
    text-decoration: none;
    color: inherit;
    border-radius: var(--r-s);
}

.orderrow:hover { background: var(--tile); }

.order-who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.order-name { font-weight: 600; }
.order-num { color: var(--muted); font-size: var(--t-xs); }
.order-stage { color: var(--muted); font-size: var(--t-sm); }

.pill {
    display: inline-block;
    padding: 2px 11px;
    border-radius: 20px;
    font-size: var(--t-xs);
    font-weight: 600;
    white-space: nowrap;
}

.pill-open { background: var(--amber-bg); color: var(--amber); }
.pill-done { background: var(--green-bg); color: var(--green); }

/* נוכח/מרחוק, ליד פרטי/תאגיד. **שקט מהראשון בכוונה** - סוג
   הבעלים קובע אילו טפסים יוצאים, ומצב הפתיחה רק אילו צעדים יש
   בניירת. שני תגים באותה עוצמה היו מתחרים על אותה עין. */
.pill-mode { background: var(--tile); color: var(--ink-soft); }

.legend { margin: calc(-1 * var(--s2)) 0 var(--s4); }

/* ---------- דף הבית: קבוצות הדחיפות ---------- */
.taskcard { border-inline-start: 4px solid var(--line); }
.tone-urgent { border-inline-start-color: var(--red); }
.tone-today  { border-inline-start-color: var(--amber); }
.tone-print  { border-inline-start-color: var(--muted); }

.tone-urgent .cardhead h2 { color: var(--red); }
.tone-today  .cardhead h2 { color: var(--amber); }

.tasklist { list-style: none; margin: 0; padding: 0; }
.tasklist li + li { border-top: 1px solid var(--line-soft); }

.taskrow {
    display: flex;
    align-items: baseline;
    gap: var(--s4);
    padding: var(--s3) var(--s2);
    text-decoration: none;
    color: inherit;
    border-radius: var(--r-s);
}

.taskrow:hover { background: var(--tile); }

.task-who { display: flex; flex-direction: column; min-width: 180px; }
.task-name { font-weight: 600; }
.task-num { color: var(--muted); font-size: var(--t-xs); }
.task-text { flex: 1; font-size: var(--t-sm); }
/* הטלפון הוא קישור לצ'אט, ולכן הוא נראה כמו קישור בריחוף
   ולא כמו טקסט מת. בלי קו תמידי: שורה עמוסה בקווים תחתונים
   קשה לסריקה. */
a.task-phone { text-decoration: none; }
a.task-phone:hover { color: var(--green); text-decoration: underline; }
.task-phone { color: var(--muted); font-size: var(--t-sm); white-space: nowrap; }

.tone-urgent .task-text { color: var(--red); font-weight: 600; }

.allquiet {
    text-align: center;
    color: var(--green);
    font-size: var(--t-sm);
    font-weight: 600;
    margin: 0 0 var(--s4);
}

/* עובדה בפינה, לא התראה */
.backupline { color: var(--muted); font-size: var(--t-xs); text-align: center; margin: var(--s4) 0 0; }

/* ---------- טופס פתיחת הזמנה ---------- */
.formpage { max-width: 620px; margin: 0 auto; }

.openform { display: grid; gap: var(--s4); }

.formrow { display: grid; gap: var(--s1); }
.formrow label, .rowlabel { font-size: var(--t-sm); font-weight: 600; }
.formrow input[type="text"] { width: 100%; }

/* נוסח ההודעה הוא פסקאות, ולכן תיבה. אותו מראה כמו שדה טקסט,
   ובלי שינוי גודל לרוחב - רוחב משתנה שובר את הטופס. */
.formrow textarea {
    font: inherit;
    font-size: var(--t-sm);
    width: 100%;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: var(--paper);
    color: inherit;
    resize: vertical;
    line-height: 1.5;
}

.formrow textarea:focus { outline: none; border-color: var(--green); }

.hint { font-size: var(--t-xs); color: var(--muted); margin: 2px 0 0; }

/* כותרת ביניים בטופס. מפרידה בין הקצב לבין סף השתיקה - שתי שאלות
   שונות, ולא רשימה אחת ארוכה שקוראים עד הסוף. */
.formhead {
    font-size: var(--t-sm);
    margin: var(--s2) 0 0;
    padding-bottom: var(--s1);
    border-bottom: 1px solid var(--line);
}

/* תיבת מספר ימים. תיבה ברוחב מלא היא הבטחה שאפשר להקליד בה משהו
   ארוך, ומספר ימים אינו כזה. */
.formrow input[type="number"] { width: 6rem; }

.choices { display: flex; gap: var(--s2); }

.choice {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s3);
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: var(--tile);
    cursor: pointer;
    font-size: var(--t-sm);
}

.choice:hover { border-color: var(--green); }
.choice:has(input:checked) { border-color: var(--green); background: var(--green-bg); font-weight: 600; }
.choice input { accent-color: var(--green); }

.moneyrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.moneybox { display: grid; gap: var(--s1); }
.moneybox span { font-size: var(--t-xs); color: var(--muted); }
.moneybox input { width: 100%; }

/* היתרה אינה תיבה אלא תוצאה, ולכן היא נראית אחרת מהשתיים שלידה */
.moneyout {
    display: block;
    padding: 7px 11px;
    border: 1px dashed var(--line);
    border-radius: var(--r-s);
    background: var(--tile);
    color: var(--ink-soft);
    font-weight: 600;
    font-size: var(--t-sm);
}

/* שם הבעלים ותיבת "שכפל" לצדו */
.withcopy { display: flex; align-items: center; gap: var(--s3); }
.withcopy input[type="text"] { flex: 1; }
.copybox {
    display: flex;
    align-items: center;
    gap: var(--s1);
    font-size: var(--t-sm);
    color: var(--ink-soft);
    white-space: nowrap;
    cursor: pointer;
}
.copybox input { accent-color: var(--green); }

/* הדרך חזרה לפרטי ההזמנה, מתוך התיק */
.editline { margin: var(--s3) 0 0; font-size: var(--t-xs); }

/* מה שנקבע בפתיחה ואינו נערך: עובדה, לא תיבה ריקה */
.fixedfacts {
    margin: 0;
    display: flex;
    gap: var(--s2);
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--ink-soft);
}

.formfoot { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s2); }

.navlink { text-decoration: none; font-size: var(--t-sm); font-weight: 600; }

/* ---------- בחירת משתמש ---------- */
.login { max-width: 440px; margin: 48px auto; text-align: center; }
.people { display: grid; gap: var(--s2); margin-top: var(--s4); }

.person {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--s3) var(--s4);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    text-align: start;
}

.person:hover { border-color: var(--green); background: var(--green-bg); }
.person-name { font-size: var(--t-lg); font-weight: 600; }
.person-role { color: var(--muted); font-size: var(--t-sm); }


/* =====================================================================
   מסך תיק לקוח — שלוש עמודות

   הלקוח מימין, היומן באמצע, המסמכים משמאל. שורת מסמך היא תצוגה
   בלבד; כל פעולה נעשית בחלון שנפתח בלחיצה עליה, ושם גם התצוגה
   המקדימה. היומן גולל בתוך עצמו, כי הוא היחיד שגדל בלי גבול - וכך
   העמוד עצמו אינו זז.
   ===================================================================== */

.page-wide, .flashes-wide { max-width: 1560px; }

.filepage {
    display: grid;
    grid-template-columns: minmax(250px, 310px) minmax(0, 1fr) minmax(330px, 410px);
    gap: var(--s4);
    align-items: start;
}

/* מיקום מפורש לכל עמודה, בכל רוחב מסך.

   בלי זה הדפדפן משבץ לפי סדר הופעה בקובץ, ואז מספיק לשנות את הסדר
   כדי שעמודה תיפול לשורה משלה ותשאיר חלל ריק לצידה - בלי שדבר
   בקובץ ייראה שגוי. זה בדיוק מה שקרה. */
.col-details { grid-column: 1; grid-row: 1; }
.col-log     { grid-column: 2; grid-row: 1; }
.col-docs    { grid-column: 3; grid-row: 1; }

.col-details, .col-log { position: sticky; top: var(--s4); }
.col > .card:last-child { margin-bottom: 0; }

/* ---------- עמודת הלקוח ---------- */
.who-name-big { font-size: var(--t-xl); font-weight: 600; line-height: 1.25; }
.who-sub { color: var(--muted); font-size: var(--t-sm); margin-top: 2px; }

.stagebox {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    align-items: center;
    margin-top: var(--s3);
}

.badge {
    padding: 3px 11px;
    border-radius: 20px;
    font-size: var(--t-xs);
    font-weight: 600;
}

.badge-closed { background: var(--green-bg); color: var(--green); }
.badge-stage  { background: #e9edeb; color: var(--ink-soft); }

/* משבצות: כל עובדה בתיבה משלה, שתיים בשורה, כולן באותו גובה ובאותה
   צורה. זה מה שהופך רשימת פרטים למשהו שנראה ערוך ולא נשפך. */
/* השדות זה מתחת לזה: תווית מימין, ערך משמאל, כולם על אותו קו.
   שורת הכסף נשארת שלוש משבצות זו לצד זו. */
.fields {
    display: grid;
    gap: var(--s1);
    /* רוחב קריאה, לא רוחב העמודה. שורה שנמתחת על כל הרוחב מרחיקה
       את הערך מהתווית שלו. */
    max-width: 46ch;
}

.field {
    display: grid;
    grid-template-columns: 10ch minmax(0, 1fr);
    align-items: baseline;
    gap: var(--s3);
    padding: var(--s2) var(--s3);
    background: var(--tile);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-s);
    min-width: 0;
}

.field-label { font-size: var(--t-xs); color: var(--muted); white-space: nowrap; }

.field-value {
    font-size: var(--t-sm);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: start;
}

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

   עכשיו: המספר הוא זה שמתקצר אם צריך, **והכפתור לעולם לא**. */
/* **טור ולא שורה**, מאז 10.9.2026: בתיק אפשר שיהיו כמה מספרים,
   ושניים באותה שורה נקראים כמספר אחד ארוך. */
.field-phone {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s2);
    overflow: visible;
}

.field-phone .phonenum { overflow: hidden; text-overflow: ellipsis; }
.field-phone .walink { flex: 0 0 auto; }

/* ---------- כמה מספרי טלפון ----------

   10.9.2026, בקשה מאלונה. **בעמודת הפרטים כל המספרים גלויים**,
   ולכן לכל אחד יש כאן הסימן שלו ואין מה לבחור. במקומות האחרים -
   ייפוי כוח, מסמך מהמדף, "הנגרר מוכן", ושורת "מה היום" - יש סימן
   אחד, ושם נפתח מסך הבחירה.

   שורה לכל מספר ולא רצף אחד. */
.phoneline {
    display: flex;
    align-items: center;
    gap: var(--s2);
    min-width: 0;
}

/* הכינוי: "הבן", "המשרד". קטן ושקט - הוא עוזר לזהות, ואינו
   המידע עצמו. */
.phonetag {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--muted);
    font-size: var(--t-xs);
    font-weight: 400;
}

/* ---------- שדות הטלפון בטופס ---------- */
.phonerow { display: flex; align-items: center; gap: var(--s2); }
.phonerow input[type="text"] { flex: 1 1 auto; min-width: 0; }
.phonelabel { flex: 0 1 130px; }

.phonemore {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    margin-top: var(--s2);
}

/* **ריבוע ולא תו בשורה.** הוא צריך להיראות כמו משהו שלוחצים
   עליו, ולהיות גדול מספיק כדי לפגוע בו בלי לכוון. */
.phoneplus {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: var(--tile);
    color: var(--ink);
    font-size: var(--t-lg);
    line-height: 1;
    cursor: pointer;
}

.phoneplus:hover { border-color: var(--green); color: var(--green); }

/* ---------- מסך "לאיזה מספר?" ----------

   נפתח רק כשיש יותר ממספר אחד, וברגע שבו באמת צריך להחליט.
   **מטרות גדולות**: זה מסך של החלטה אחת, ולחיצה על המספר הלא
   נכון כאן פירושה הודעה ללקוח הלא נכון. */
.picklist { list-style: none; display: grid; gap: var(--s2); }

.pickone {
    display: flex;
    align-items: baseline;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: var(--tile);
    text-decoration: none;
    color: var(--ink);
}

.pickone:hover { border-color: var(--green); background: var(--paper); }

.picknum { font-size: var(--t-lg); font-weight: 600; }
.picklabel { color: var(--muted); font-size: var(--t-sm); }
.pickback { margin-top: var(--s4); }

.tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s2);
    margin-top: var(--s4);
}

.tiles-three { grid-template-columns: repeat(3, 1fr); }

.tile {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: var(--s2) var(--s3);
    background: var(--tile);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-s);
    min-width: 0;
}

.tile-wide { grid-column: 1 / -1; }
.tile-label { font-size: var(--t-xs); color: var(--muted); }

.tile-value {
    font-size: var(--t-sm);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- עמודת היומן ---------- */
.logcard {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 118px);
}

.noteform { display: flex; gap: var(--s2); margin-bottom: var(--s3); }
.noteform input { flex: 1; }

/* היומן הוא היחיד בתיק שגדל בלי גבול - תיק גמור צובר עשרות רישומים.
   לכן הוא זה שגולל, ולא העמוד. */
.events {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* חותמת הזמן בעמודה קבועה: כל השורות מתחילות באותו מקום */
.event {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: var(--s3);
    padding: var(--s2) var(--s1);
    border-bottom: 1px solid var(--line-soft);
    font-size: var(--t-sm);
}

.event:last-child { border-bottom: none; }
/* הספרות רצות משמאל לימין, אבל היישור הוא לימין - כמו שכותבים בעברית */
.event-when { color: var(--muted); font-size: var(--t-xs); white-space: nowrap; direction: ltr; text-align: right; }
.event-body { min-width: 0; }
.event-what { display: block; }
.event-detail { color: var(--muted); font-size: var(--t-xs); }
.event-who { color: var(--muted); font-size: var(--t-xs); margin-inline-start: var(--s2); }
.event-override .event-what { color: var(--amber); font-weight: 600; }

.pad { padding: var(--s3) var(--s1); }

/* ---------- עמודת המסמכים ---------- */
.bar {
    height: 6px;
    background: var(--line-soft);
    border-radius: 3px;
    overflow: hidden;
}

.bar span { display: block; height: 100%; background: var(--green); }

.tally { font-size: var(--t-sm); margin: var(--s2) 0 var(--s4); }
.tally-open { color: var(--amber); font-weight: 600; }
.tally-done { color: var(--green); font-weight: 600; }

/* שורת מסמך ושורת הכותרות חולקות בדיוק את אותה רשת. בלי זה
   החיוויים לא יושבים מתחת לשמות שלהם, וזה נראה שבור. */
.dochead, .docrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 46px 62px 46px;
    align-items: center;
    gap: var(--s2);
}

.dochead {
    padding: 0 var(--s2) var(--s2);
    border-bottom: 1px solid var(--line);
    font-size: var(--t-xs);
    color: var(--muted);
    font-weight: 600;
}

.dh-files, .dh-mark { text-align: center; }

.doclist { list-style: none; margin: 0; padding: 0; }

.docrow {
    padding: var(--s2);
    border-bottom: 1px solid var(--line-soft);
    border-radius: var(--r-s);
    cursor: pointer;
}

.docrow:last-child { border-bottom: none; }
.docrow:hover { background: var(--tile); }
.docrow:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }

.dc-name { min-width: 0; display: flex; flex-direction: column; }
.doc-name { font-size: var(--t-sm); font-weight: 600; line-height: 1.35; }
.doc-state { font-size: var(--t-xs); color: var(--muted); }

.dc-files { text-align: center; font-size: var(--t-xs); color: var(--muted); }
.dc-mark { text-align: center; }

.tone-done   .doc-state { color: var(--green); }
.tone-warn   .doc-state { color: var(--amber); font-weight: 600; }
.tone-waived .doc-name  { color: var(--muted); text-decoration: line-through; }

.foot { margin-top: var(--s3); font-size: var(--t-xs); }

/* שני הסימונים - הדבר היחיד שהעין צריכה לתפוס בסריקה מהירה.
   הכותרות שמעליהם הן שאומרות מי מהם הנייר ומי הדיגיטלי. */
.mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: var(--t-sm);
    font-weight: 700;
}

.mark-on  { background: var(--green-bg); color: var(--green); }
.mark-off { background: #eef1ef;        color: #b8c1bc; }

/* ---------- סגירה ---------- */
.missing { list-style: none; margin: 0; padding: 0; font-size: var(--t-sm); }

.missing li {
    display: flex;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s1) 0;
    border-bottom: 1px solid var(--line-soft);
}

.missing li:last-child { border-bottom: none; }

/* ---------- חלון הטיפול ---------- */
body.panel-open { overflow: hidden; }

.panel {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s5);
}

.panel[hidden] { display: none; }
.panel-back { position: absolute; inset: 0; background: rgba(18, 32, 25, .45); }

.panel-box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(620px, 100%);
    max-height: min(88vh, 820px);
    background: var(--paper);
    border-radius: var(--r);
    box-shadow: 0 20px 56px rgba(0, 0, 0, .24);
}

.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--s3);
    padding: var(--s4) var(--s5) var(--s3);
    border-bottom: 1px solid var(--line);
}

.panel-head h3 { margin-bottom: 2px; }

.panel-x {
    background: none;
    border: none;
    font-size: var(--t-lg);
    color: var(--muted);
    padding: 0 var(--s2);
    border-radius: var(--r-s);
    line-height: 1.4;
}

.panel-x:hover { background: var(--tile); color: var(--ink); }

.panel-body { padding: var(--s4) var(--s5) var(--s5); overflow-y: auto; }

.fileshead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    margin-top: var(--s5);
}

.fileshead h4 { margin: 0; border: none; padding: 0; }

.panel-body h4 {
    color: var(--muted);
    margin: var(--s5) 0 var(--s3);
    padding-bottom: var(--s2);
    border-bottom: 1px solid var(--line-soft);
}

.panel-marks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }

.pm {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s2);
    padding: var(--s3);
    background: var(--tile);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-s);
}

.pm-label { font-size: var(--t-sm); font-weight: 600; }
.pm-note  { font-size: var(--t-xs); color: var(--muted); }

/* תצוגה מקדימה: רואים את המסמך, לא את שם הקובץ שלו */
.preview { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }

.pv {
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    overflow: hidden;
    background: var(--tile);
}

.pv-open { display: block; height: 132px; background: #eef1ef; }
.pv-open img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pv-doc {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: var(--t-lg);
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 1px;
}

.pv-foot {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    background: var(--paper);
    border-top: 1px solid var(--line-soft);
    font-size: var(--t-xs);
}

.pv-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.paneldocs { list-style: none; margin: 0; padding: 0; }

.paneldocs li {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: var(--t-sm);
}

.paneldocs li:last-child { border-bottom: none; }
.paneldocs a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.panelactions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.panelactions form { display: flex; gap: var(--s2); }

.reason { width: 160px; }

.history { margin-top: var(--s5); font-size: var(--t-sm); }
.history summary { cursor: pointer; color: var(--muted); }

.doc-warn {
    margin: var(--s4) 0;
    padding: var(--s3);
    background: var(--amber-bg);
    color: var(--amber);
    border-radius: var(--r-s);
    font-size: var(--t-sm);
}

.doc-warn form { display: flex; gap: var(--s2); margin-top: var(--s2); }

/* ---------- אזור הגרירה שבחלון ---------- */
.dropform { margin: 0 0 var(--s2); }

.drop {
    display: block;
    padding: var(--s4) var(--s3);
    border: 1.5px dashed var(--line);
    border-radius: var(--r-s);
    text-align: center;
    color: var(--muted);
    font-size: var(--t-sm);
    cursor: pointer;
    background: var(--tile);
}

.drop:hover, .drop.drop-over { border-color: var(--green); background: var(--green-bg); color: var(--green); }
.drop.drop-busy { opacity: .6; cursor: progress; }
.drop.drop-refused { border-color: var(--red); background: var(--red-bg); color: var(--red); }

/* החלפה נראית אחרת מהוספה: היא מורידה את כל הקיים מהתוקף */
.drop-replace { border-color: #eedfc2; background: #fffdf8; color: var(--amber); }
.drop-replace:hover, .drop-replace.drop-over { border-color: var(--amber); background: var(--amber-bg); color: var(--amber); }

/* ---------- הודעה על גבי המסך ----------
   נחוצה כי גרירה מווטסאפ אינה מביאה קובץ, ובלעדיה היא פשוט לא עושה
   כלום - וזה נראה כמו מערכת תקועה. */
.toast {
    position: fixed;
    inset-block-end: var(--s5);
    inset-inline-start: var(--s5);
    z-index: 80;
    max-width: 420px;
    padding: var(--s3) var(--s4);
    background: var(--ink);
    color: #fff;
    border-radius: var(--r-s);
    font-size: var(--t-sm);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .26);
}

.toast[hidden] { display: none; }

/* ---------- מסכים צרים יותר ----------
   במשרד יושבים על 1920 ושלוש העמודות נכנסות בנוחות. מתחת לזה היומן
   יורד למטה, ובטלפון הכל נערם - הבוחן עשוי לפתוח תיק משם. */
/* הסף נמוך דיו כדי ששלוש העמודות ישרדו מסך 1920 שמוגדר ב-Windows
   על 125% או 150%. בהגדרות כאלה הרוחב שהדפדפן רואה הוא 1536 או 1280,
   ולא 1920 - וסף גבוה מדי היה מקפל את הפריסה בלי סיבה נראית לעין. */
@media (max-width: 1150px) {
    .filepage { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); }
    .col-details { grid-column: 1; grid-row: 1; }
    .col-docs    { grid-column: 2; grid-row: 1; }
    .col-log     { grid-column: 1 / -1; grid-row: 2; position: static; }
    .logcard { max-height: 460px; }
}

@media (max-width: 860px) {
    .filepage { grid-template-columns: 1fr; }
    .col-details { grid-column: 1; grid-row: 1; }
    .col-docs    { grid-column: 1; grid-row: 2; }
    .col-log     { grid-column: 1; grid-row: 3; position: static; }
}

@media (max-width: 720px) {
    .page, .flashes { padding: var(--s4); }
    .card { padding: var(--s3); }
    .top { padding: var(--s2) var(--s4); gap: var(--s3); }

    .tiles { grid-template-columns: 1fr; }
    .event { grid-template-columns: 1fr; gap: var(--s1); }
    .preview { grid-template-columns: 1fr; }
    .panel-marks { grid-template-columns: 1fr; }

    .panel { padding: 0; align-items: flex-end; }
    .panel-box { width: 100%; max-height: 92vh; border-radius: var(--r) var(--r) 0 0; }
    .panel-head, .panel-body { padding-inline: var(--s4); }

    .toast { inset-inline: var(--s3); max-width: none; }

    .orderrow { flex-wrap: wrap; gap: var(--s2) var(--s3); }
    .order-who { flex-basis: 100%; }
}

/* ההדפסה שלפני המסירה, בכרטיס הסגירה */
.printbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding: var(--s3);
    margin-bottom: var(--s4);
    background: var(--amber-bg);
    border: 1px solid #f0dcb4;
    border-radius: var(--r-s);
    font-size: var(--t-sm);
}

.printbox .muted { font-size: var(--t-xs); }

/* ---------- מסך הגיבוי והשחזור ---------- */

.backupcard { max-width: 720px; margin: 0 auto; }

/* שורת העובדה בדף הבית היא גם הדרך למסך הגיבוי */
.backupline a { color: inherit; text-decoration: none; }
.backupline a:hover { color: var(--green); text-decoration: underline; }

.backup-last { margin: 0 0 var(--s4); font-size: var(--t-sm); }

.steps {
    margin: 0 0 var(--s5);
    padding-inline-start: var(--s5);
    font-size: var(--t-sm);
    color: var(--ink-soft);
}
.steps li { margin-bottom: var(--s2); }

.drivelist { list-style: none; margin: 0 0 var(--s4); padding: 0; }

.driverow {
    display: flex;
    align-items: center;
    gap: var(--s4);
    padding: var(--s3);
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: var(--tile);
    margin-bottom: var(--s3);
}

.drive-who { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.drive-name { font-weight: 600; }
.drive-info { color: var(--muted); font-size: var(--t-xs); }

/* ההודעה שמחליפה את הכפתורים בזמן שהגיבוי רץ */
/* **הכפתור הגדול, שהוא כל המסך.** כבוי הוא ממתין לדיסק, מואר הוא
   מבקש לחיצה. גודלו אינו קישוט: הוא הדבר היחיד שעושים כאן. */
.bigwrap {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    margin: 0 0 var(--s4);
}

.bigbutton {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    align-items: center;
    padding: var(--s5) var(--s4);
    border: none;
    border-radius: var(--r);
    background: var(--green);
    color: #fff;
    text-align: center;
}

.bigbutton:hover { background: #26694b; }

.bigbutton-off {
    background: var(--line-soft);
    color: var(--muted);
    border: 1px dashed var(--line);
    cursor: default;
}

.bigbutton-off:hover { background: var(--line-soft); }

.bigbutton-do  { font-size: var(--t-xl); font-weight: 600; }
.bigbutton-who { font-size: var(--t-sm); opacity: 0.85; }

/* פנקס הדיסקים המסומנים. שורה אינה נמחקת לעולם, ולכן מושבת נשאר
   כאן - חיוור, עם התאריך והשם. */
.diskhead {
    margin: var(--s5) 0 var(--s2);
    padding-top: var(--s4);
    border-top: 1px solid var(--line);
}

.diskbook { list-style: none; margin: 0; padding: 0; }

.diskrow {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--line-soft);
}

.diskrow:last-child { border-bottom: none; }
.diskrow-off { opacity: 0.6; }

.disk-serial {
    color: var(--muted);
    font-weight: 400;
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums;
}

.busy { text-align: center; padding: var(--s5); }
.busy h2 { margin-bottom: var(--s2); color: var(--amber); }
.busy p { margin: 0 auto; max-width: 460px; color: var(--ink-soft); font-size: var(--t-sm); }

.backup-note { margin: var(--s4) 0 0; color: var(--muted); font-size: var(--t-xs); }

/* דיווח הגיבוי */
.verdict-ok { color: var(--green); }
.verdict-fail { color: var(--red); }

.reportlist {
    list-style: none;
    margin: 0 0 var(--s4);
    padding: 0;
    font-size: var(--t-sm);
}
.reportlist li { padding: var(--s2) 0; border-bottom: 1px solid var(--line-soft); }
.reportlist li:last-child { border-bottom: none; }
.report-meta { color: var(--muted); font-size: var(--t-xs); }
.report-done { color: var(--green); font-weight: 600; }
.report-error { color: var(--red); font-weight: 600; }

/* ---------- שליחה ללקוח, בחלון המסמך ---------- */

.sendblock {
    padding: var(--s3);
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: var(--tile);
    margin-bottom: var(--s4);
}

/* הצעד הבא של התיק, בראש עמודת המסמכים. ענבר כמו כל דבר שממתין
   לאדם - אינו שגיאה, אבל אסור שיישכח. */
.sendcard {
    border-inline-start: 4px solid var(--amber);
    background: var(--amber-bg);
}

.sendcard .cardhead h2 { color: var(--amber); }
.sendcard-what { margin: 0 0 var(--s1); font-size: var(--t-sm); font-weight: 600; }
.sendcard-state { margin: 0 0 var(--s1); color: var(--ink-soft); font-size: var(--t-xs); }
.sendcard-again { margin: 0 0 var(--s3); font-size: var(--t-xs); color: var(--muted); }

.sendrow { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.sendrow button:disabled { opacity: 0.5; cursor: default; }

.sendforms { margin: 0 0 var(--s3); font-size: var(--t-sm); }
.sendhint { margin: var(--s3) 0 0; color: var(--muted); font-size: var(--t-xs); }

/* ---------- מסך הניהול ---------- */

.adminintro p { margin: 0; font-size: var(--t-sm); }

.typerow {
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    padding: var(--s3);
    margin-bottom: var(--s2);
    background: var(--tile);
}

.typerow > summary {
    display: flex;
    align-items: baseline;
    gap: var(--s3);
    cursor: pointer;
    font-size: var(--t-sm);
}

.typerow[open] > summary { margin-bottom: var(--s3); }
.type-name { font-weight: 600; }
.retired .type-name { color: var(--muted); text-decoration: line-through; }

.typeform {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--s3);
    margin-bottom: var(--s3);
}

.typeform label { display: flex; flex-direction: column; gap: var(--s1); }
.typeform label > span { font-size: var(--t-xs); color: var(--muted); }
.typeform input, .typeform select { width: 100%; }

.typeactions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--s3);
}

.msgbody {
    font: inherit;
    font-size: var(--t-sm);
    width: 100%;
    padding: var(--s3);
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: var(--paper);
    line-height: 1.6;
    resize: vertical;
    margin-bottom: var(--s3);
}

.msgpreview {
    font: inherit;
    font-size: var(--t-sm);
    white-space: pre-wrap;
    background: var(--tile);
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    padding: var(--s4);
    margin: 0 0 var(--s3);
    line-height: 1.7;
}

.fieldlist { margin: 0 0 var(--s2); padding-inline-start: var(--s4); font-size: var(--t-xs); }
.fieldlist code { background: var(--paper); padding: 1px 4px; border-radius: 3px; }

.userlist { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.userrow {
    display: flex;
    align-items: baseline;
    gap: var(--s3);
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: var(--t-sm);
}
.user-name { font-weight: 600; min-width: 120px; }
.retired .user-name { color: var(--muted); text-decoration: line-through; }

.inlineform { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }

/* טפסים לשליחה ללקוח.
   ארבע עמודות קבועות ולא שורת flex: שם הקובץ משתנה באורכו, וב-flex
   הוא היה דוחף כל שורה למקום אחר - ואז אין שתי שורות שמתחילות
   באותו מקום, והעין אינה מוצאת את הכפתור פעמיים באותו מקום. */
.formlist { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.blankform {
    display: grid;
    grid-template-columns: minmax(140px, 1.1fr) minmax(130px, 1fr) auto auto;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: var(--t-sm);
}
.form-name { font-weight: 600; }
.retired .form-name { color: var(--muted); text-decoration: line-through; }
.form-have { min-width: 0; }
.form-have .num { overflow-wrap: anywhere; }
.form-pick { display: flex; align-items: center; gap: var(--s2); }
.form-drop { justify-self: end; }

/* תיבת הקובץ היא רכיב של הדפדפן. אין לנו שליטה על הטקסט שבתוכה,
   אבל אפשר להנמיך אותו ולתת לכפתור שלה את אותה חזות ככל הכפתורים. */
.form-pick input[type="file"] {
    max-width: 180px;
    font-size: var(--t-xs);
    color: var(--muted);
}
.form-pick input[type="file"]::file-selector-button {
    font: inherit;
    font-weight: 600;
    margin-inline-end: var(--s2);
    padding: 6px 11px;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: var(--paper);
    color: var(--ink-soft);
}
.form-pick input[type="file"]::file-selector-button:hover {
    border-color: var(--green);
    color: var(--green);
    background: var(--green-bg);
}

@media (max-width: 760px) {
    .blankform { grid-template-columns: 1fr; gap: var(--s2); }
    .form-drop { justify-self: start; }
}

/* ניהול: ארבעה מסכים קטנים במקום אחד ארוך */
.subnav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    margin: 0 0 var(--s4);
}

.subnavlink {
    font-size: var(--t-sm);
    padding: var(--s2) var(--s3);
    border-radius: var(--r-s);
    border: 1px solid var(--line);
    text-decoration: none;
    color: var(--muted);
}

.subnavlink.here { border-color: var(--green); color: var(--green); }

/* משתמשים. אין כאן מחיקה - השם מחובר לכל שורת יומן. */
.peoplelist { list-style: none; margin: 0; padding: 0; }

.personrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s3);
    padding: var(--s3) 0;
    border-bottom: 1px solid var(--line-soft);
}

.personname { display: flex; align-items: center; gap: var(--s2); }
.personacts { margin-inline-start: auto; }
.personrow.retired .personname input { color: var(--muted); }

/* נוסחים: כל צעד הוא גוש, כדי ששתי השורות שלו יישארו יחד */
.wordblock {
    display: grid;
    gap: var(--s2);
    padding: var(--s3);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-s);
}

.wordhead { font-size: var(--t-sm); margin: 0; color: var(--muted); }

/* **לאיזה מצב פתיחה הצעד שייך**, ורק כשהוא אינו של שניהם. בלי
   התווית הזו שתי שורות עוקבות נראות כמו כפילות: "הניירת חזרה
   מהלקוח" ו"חתימת המסמכים במקום" יושבות באותו מקום בתהליך, וכל
   תיק רואה רק אחת מהן. */
.wordmode {
    font-size: var(--t-xs);
    font-weight: 400;
    color: var(--ink-soft);
    white-space: nowrap;
}

/* מה שנשאר מתיק שנמחק. השורות האלה אינן נמחקות. */
.deletedlist { list-style: none; margin: 0; padding: 0; }

.deletedrow {
    padding: var(--s3) 0;
    border-bottom: 1px solid var(--line-soft);
}

.deletedhead { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: baseline; }
.deletedwhy { margin: var(--s2) 0 0; }
.deletedmore { margin-top: var(--s2); font-size: var(--t-sm); }

.snapshot {
    margin: var(--s2) 0 0;
    padding: var(--s3);
    background: var(--line-soft);
    border-radius: var(--r-s);
    font-family: inherit;
    font-size: var(--t-xs);
    white-space: pre-wrap;
}

/* אזהרה שנאמרת לפני פעולה, ולא אחריה */
.warnline {
    margin: var(--s2) 0 0;
    padding: var(--s2) var(--s3);
    background: var(--red-bg);
    border-radius: var(--r-s);
    font-size: var(--t-xs);
}

/* קישור שנראה ככפתור. "לבדוק עכשיו" אינו טופס, אבל הוא הפעולה
   הראשית במסך. */
.btnlike {
    display: inline-block;
    padding: var(--s2) var(--s4);
    background: var(--ink);
    color: #fff;
    border-radius: var(--r-s);
    text-decoration: none;
    font-size: var(--t-sm);
}
.btnlike:hover { opacity: .9; }

/* עצירה לשאלה - ולא סירוב */
.warn { border-inline-start: 4px solid var(--amber); }
.warn .cardhead h2 { color: var(--amber); }

/* מחיקה - הדבר היחיד במערכת שאין ממנו חזרה */
.danger { border-inline-start: 4px solid var(--red); }
.danger .cardhead h2 { color: var(--red); }
.removepage { max-width: 620px; margin: 0 auto; }
.removewhat { font-size: var(--t-sm); margin: 0 0 var(--s3); }
.removeform { display: grid; gap: var(--s3); }
.removeform label { display: flex; flex-direction: column; gap: var(--s1); }
.removeform label > span { font-size: var(--t-xs); color: var(--muted); }

.adminlog { list-style: none; margin: 0; padding: 0; font-size: var(--t-sm); }
.adminlog li {
    display: flex;
    gap: var(--s3);
    align-items: baseline;
    padding: var(--s2) 0;
    border-bottom: 1px solid var(--line-soft);
}
.adminlog li:last-child { border-bottom: none; }
.adminlog .event-what { flex: 1; display: flex; flex-direction: column; gap: 2px; }

/* התיקון החריג, בחלון המסמך */
.correction { margin-top: var(--s3); }
.correction > summary { cursor: pointer; font-size: var(--t-xs); color: var(--muted); }
.correction[open] > summary { margin-bottom: var(--s2); }

/* ---------- "הערות", בראש הארכיון ----------

   בקשתה של אלונה, 9.9.2026: כפתור שמצמצם את הארכיון לתיקים
   שאורכבו עם הערה. *"צבעו של הכפתור יהיה כמובן 'פוקסיה' כמו
   צבע ההערות עצמן."*

   **מסגרת מלאה גם כשהוא כבוי.** כפתור שנראה כמו קישור נשכח,
   וזה כפתור שמחפשים אותו.

   **ודלוק = מלא, לא גוון.** כשהטבלה מצומצמת חייב להיות ברור
   מהמסך למה חסרים בה תיקים, אחרת נראה שהארכיון התרוקן.

   נמדד: ‎#a81f8f מול לבן 6.45:1 - עומד גם ככתב על לבן וגם
   כלבן על מילוי. */
.notesonly {
    text-decoration: none;
    white-space: nowrap;
    font-size: var(--t-sm);
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--fuchsia);
    color: var(--fuchsia);
    background: var(--paper);
}

.notesonly:hover { background: #f7dcee; }

.notesonly-on {
    background: var(--fuchsia);
    color: var(--paper);
}

.notesonly-on:hover { background: #8e1a79; }

/* ---------- החיפוש ---------- */
.searchbox { flex: 1; max-width: 380px; }
.searchbox input { width: 100%; }

/* למה השורה נמצאה. בלי זה תוצאה של חיפוש טלפון נראית אקראית. */
.why {
    color: var(--muted);
    font-size: var(--t-xs);
    white-space: nowrap;
}

/* הארכיון: כותרת שנה בין קבוצות התיקים */
.yearhead {
    color: var(--muted);
    font-size: var(--t-xs);
    font-weight: 600;
    padding: var(--s3) var(--s2) var(--s1);
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: var(--s1);
}

/* פתיחה מחדש של תיק סגור */
.reopen { margin-top: var(--s3); }
.reopen > summary { cursor: pointer; font-size: var(--t-xs); color: var(--muted); }
.reopen[open] > summary { margin-bottom: var(--s2); }

/* דף השחזור בנוי גם להדפסה */
.restorepage h3 { margin: var(--s4) 0 var(--s2); font-size: var(--t-md); }
.restorepage p { font-size: var(--t-sm); color: var(--ink-soft); margin: 0 0 var(--s3); }

@media print {
    .top, .noprint, .flashes { display: none !important; }
    .card { box-shadow: none; border: none; }
    body { background: #fff; }

    /* ---------- הטבלה לפי ימים, על נייר ----------

       6.10.2026: *"את הטבלה אוכל להדפיס."* שלושה דברים שנייר
       דורש ומסך אינו דורש. */

    /* אחד: הכותרת שאומרת מה זה ומתי הודפס. דף בלי טווח תאריכים
       ובלי יום הדפסה הוא דף חסר ערך בתיקייה. */
    .printonly { display: block !important; }

    /* שניים: יום שלם לא נחתך בין שני דפים. יום שחציו כאן וחציו
       בדף הבא נספר פעמיים בעין. */
    .dayblock { break-inside: avoid; page-break-inside: avoid; }

    /* שלושה: הכול בשחור. אפור בהיר על מסך הוא קריא; על נייר של
       מדפסת לייזר הוא נעלם. */
    .formpage-wide { max-width: none; }
    .daytable, .dayhead, .case-desc, .daystate { color: #000; }
    .subnav, .versionline { display: none; }
}


/* =====================================================================
   ═══ כלי המעקב ═══
   ===================================================================== */

/* ---------- תיק הלקוח: שלוש עמודות בשורה אחת ----------

   מימין לשמאל: פרטי הלקוח · מה עכשיו · סריקת ההזמנה. שלושתן
   מתחילות בראש העמוד, ושלושתן נראות בלי גלילה.

   הסריקה צרה וגבוהה, כמו הנייר עצמו. הרחבתה על חשבון הגובה לא
   עזרה לקריאה: דף בפורמט A4 עומד, ומה שחסר לו הוא גובה.

   היומן יושב מתחת לשתי הקוביות בלבד, ואינו גונב מהסריקה גובה.

   כל עמודה מוצהרת במפורש בעמודה **ובשורה**, בכל רוחב מסך.
   בכיוון ימין-לשמאל עמודה 1 היא הימנית.

   למה השורה חייבת להיות מוצהרת גם היא: הדפדפן משבץ לפי סדר הכתיבה
   ואינו חוזר אחורה, ולכן פריט שכתוב מאוחר ומבקש עמודה מוקדמת נופל
   לשורה חדשה. זה בדיוק מה שקרה במסך שנפתח ב-25 באוגוסט, ובדיוק
   מה שקרה בפריסה שלפניו.                                       */

.casepage {
    display: grid;
    grid-template-columns:
        /* **רחבה, 20.9.2026 ושוב ב-23.9.** מפיו: *"המטרה היא
           שכל הפרטים שבעמודה ימין ייראו. שלא תהיינה קטיעות. עם
           עמודה אמצעית צרה יותר אין בעיה להסתדר."*

           **בפעם הראשונה 330 ← 370, וזה לא נראה.** סנטימטר בדיוק
           כפי שביקש, אבל העמוד רחב כ-1,500 - ושלושה אחוזים הם
           מתחת לסף ההבחנה. מפיו, 23.9: *"אני לא רואה הבדל."*
           נבדק שהגרסה אכן מותקנת ושהשורה אכן שם; זה לא היה עדכון
           שלא הגיע.

           **430 ב-23.9, ו-470 ב-29.9.** בפעם השנייה הוא ראה,
           וביקש עוד: *"שמתי לב שבעמודה הימנית יש עדיין מס'
           טלפון קטועים בשל חוסר מקום... לאלונה יש עוד הרבה
           מקום על המסך."*

           **ולעמודה האמצעית יש עכשיו רצפה של 280.** בלעדיה
           ההרחבה נגרעת ממנה בלבד, ועל מסך צר מ-1,560 היא
           הייתה נמעכת עד שהכפתורים שבה מתערבבים. עם הרצפה,
           העמודה הימנית פשוט אינה מגיעה ל-470 כשאין מקום. */
        minmax(300px, 470px)      /* פרטי הלקוח - שלא ייקטע דבר */
        minmax(280px, 1fr)        /* מה עכשיו - מה שנשאר, ולא פחות */
        minmax(360px, 34%);       /* הסריקה - צרה וגבוהה */
    gap: var(--s4);
}

.case-facts { grid-column: 1; grid-row: 1; margin-bottom: 0; }

/* **תיאור הנגרר בכותרת התיק.** המילים של בעל הבית - "וילונות",
   "מדפים", "גלגלים שקועים". שקט יותר מהשם, כי הוא סימן זיהוי
   ולא שם של אדם. */
.trailerdesc { font-weight: 400; color: var(--trailer-desc); }
.case-now   { grid-column: 2; grid-row: 1; margin-bottom: 0; }

/* היומן מתחת לשתיהן, ולא מתחת לסריקה. */
.case-diary { grid-column: 1 / 3; grid-row: 2; margin-bottom: 0; }

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

   align-self: start - המסגרת בגובה ההזמנה בדיוק, ולא נמתחת אל
   תחתית מה שהיא פורשת עליו. */
.case-scan {
    grid-column: 3;
    grid-row: 1 / 3;
    align-self: start;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: var(--s3);
    min-height: 420px;
}

.scanhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
    margin-bottom: var(--s2);
}

.scanhead h3 { margin: 0; font-size: var(--t-md); }

/* הסריקה עצמה. רקע לבן כדי שדף סרוק ייראה כמו דף ולא ירחף. */
.scanview {
    display: block;
    width: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
}

/* **לא להרחיב, רק להאריך.** ההזמנה נפרשת ברוחב המסגרת ומקבלת
   את הגובה שמגיע לה לפי מידתה - לא גובה שנקבע מראש שהיא נדחסת
   לתוכו. תמונה יודעת את מידתה בעצמה; לצופה ה-PDF אין גודל טבעי,
   ולכן המסגרת שסביבו נושאת את יחס הדף שנמדד מהקובץ.

   1 / 1.414 הוא A4 עומד, וזו ברירת המחדל בלבד: המידה האמיתית
   מגיעה מהקובץ ודורסת אותה. */
.scanlink { display: block; }

img.scanview   { height: auto; }
.scanbox       { width: 100%; aspect-ratio: 1 / 1.414; }
embed.scanview { display: block; width: 100%; height: 100%; }

.scanreplace { margin-top: var(--s3); }

/* אזור הגרירה כשאין סריקה: תופס את המקום כולו, כי זה הדבר הראשון
   שצריך לקרות בתיק חדש. */
.dropbig, .dropmini {
    display: grid;
    justify-items: center;
    gap: var(--s1);
    text-align: center;
    border: 2px dashed var(--line);
    border-radius: var(--r);
    background: var(--paper);
    cursor: pointer;
}

.dropbig  { flex: 1; padding: var(--s5) var(--s3); min-height: 320px; align-content: center; }
.dropmini { padding: var(--s2); font-size: var(--t-xs); }

/* **משבצת שכבר יש בה מסמך.** בקשתה של אלונה, 7.9.2026, אחרי
   ששניים העלו ביטוח חובה לאותו תיק: *"נא לא להשתמש בצבעים. רק
   קווים אלכסוניים בצבע שחור רגיל. לא גס ולא חזק מדי. פשוט שיהיה
   ברור."*

   ולכן: שחור ב-14 אחוז, קו של פיקסל אחד כל שישה. נראה בבירור
   כשמסתכלים על השורה, ואינו נלחם עם השם שכתוב עליה.

   **חיווי בלבד.** אין כאן חסימה ואין שינוי התנהגות - המשבצת
   ממשיכה לקבל קבצים, וזה נאמר מפורשות בבקשה. */
.dropmini-full {
    background-image: repeating-linear-gradient(
        45deg,
        rgba(0, 0, 0, .14) 0, rgba(0, 0, 0, .14) 1px,
        transparent 1px, transparent 6px);
}

/* בריחוף ובגרירה הקווקוו יורד, כדי שהמשבצת תיראה כמו יעד פנוי
   ברגע שבאמת גוררים אליה. */
.dropmini-full:hover, .drop-over .dropmini-full { background-image: none; }

.dropbig:hover, .dropmini:hover,
.drop-over .dropbig, .drop-over .dropmini {
    border-color: var(--green);
    background: var(--green-bg);
}

.drop-title { font-size: var(--t-lg); font-weight: 600; }
.drop-text  { font-size: var(--t-sm); color: var(--muted); }

.scandrop { flex: 1; display: flex; flex-direction: column; }
.scandrop .muted { margin-top: var(--s3); }


/* ---------- קישורים ופעולות שחסרו בגיליון ---------- */

.link-plain {
    font-size: var(--t-sm);
    color: var(--green);
}

.ghostlink {
    display: inline-block;
    padding: var(--s1) var(--s3);
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    font-size: var(--t-sm);
    color: var(--ink-soft);
    text-decoration: none;
}

.ghostlink:hover { border-color: var(--green); color: var(--green); }

.formactions {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-top: var(--s4);
}


/* ---------- איפה זה עומד ---------- */

/* שם התיק יושב בכותרת כרטיס הפרטים, ולכן הוא h1 בתוך cardhead. */
.cardhead h1 { font-size: var(--t-lg); }

/* **שורת המצב בראש "מה עכשיו".**

   שלושת המצבים הראשונים הם התראה, ולכן צבועים. הרביעי - שעון
   שרץ בזמן - קיים כמעט תמיד, ולכן הוא אפור, בלי מילוי, וקורא
   ככיתוב. זו ההגנה על מה שנלמד ב-29.8: שורה שנמצאת תמיד
   ובולטת כמו אזעקה הופכת את האזעקה לטפט. */
.caseflag {
    margin: 0 0 var(--s3);
    padding: var(--s2) var(--s3);
    border-radius: var(--r-s);
    font-size: var(--t-sm);
    line-height: 1.4;
}

.flag-stuck { background: var(--red-bg);   color: var(--red); }
.flag-due   { background: var(--amber-bg); color: var(--amber); }
.flag-idle  { background: var(--tile);     color: var(--ink-soft); }

.flag-wait {
    background: none;
    color: var(--muted);
    padding-inline: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
}

.flag-wait strong { color: var(--ink-soft); }


/* ---------- הלוח המחיק ----------

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

.board {
    margin-top: var(--s4);
    border-top: 1px solid var(--line);
    padding-top: var(--s3);
}

.board h3 {
    margin: 0 0 var(--s2);
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--muted);
}

/* ---------- לוח שכתוב עליו ----------

   7.9.2026, מפיו: *"אני רוצה שמה שנכתב בלוח המחיק יהיה בעל
   נוכחות ברורה יותר... המטרה היא למשוך את עיניו של המשתמש
   שפותח את התיק אל הלוח המחיק. אם מישהו כתב שם אז זה ככל
   הנראה חשוב."*

   **ורק כשכתוב.** ריק - הלוח נשאר בדיוק כפי שהיה, לפי בקשתו.
   מעטפת שקיימת תמיד היא רקע, ורקע איש אינו רואה.

   **מה שנושא את הנוכחות הוא הקו ולא המילוי**, ואת זה למדתי
   ביוקר: הירוק של הקובייה עמד על 1.13 מול הדף, נראה בסדר גמור
   אצלי, ובמשרד לא נראה כלל. המילוי כאן הוא 1.28 מול הלבן -
   רמז ולא הכרזה - **והקו הוא 3.82**, כמעט פי שניים מהקו הירוק
   שנזקק לסימן ✓ כדי להיראות. ופס עבה בקצה הפנימי, שהעין תופסת
   עוד לפני שקראה מילה.

   הטקסט נשאר פוקסיה וקריא לגמרי על המעטפת: 5.04. */
.board-full {
    background: #f7dcee;
    border: 1px solid #c25fa8;
    border-inline-start: 4px solid #a81f8f;
    border-radius: var(--r-s);
    padding: var(--s3);
    /* הקו העליון של המסגרת מחליף את הקו המפריד שהיה כאן. */
    border-top: 1px solid #c25fa8;
}

.board-full h3 { color: var(--fuchsia); }

/* הפתקים לבנים על המעטפת, ולא אפורים: **פתק על לוח**, ולא כתם
   בתוך כתם. */
.board-full .boardnote { background: var(--paper); }

/* תיבת ההוספה על רקע לבן גם היא, כדי שהשורה שמזמינה לכתוב לא
   תיבלע במעטפת. */
.board-full .boardadd input { background: var(--paper); }

/* **גובה התיבה.** 7.9.2026, מפיו: *"הלוח המחיק צריך לגדול. הוא
   קטן מדי... יש מלא מקום."* היה 220 פיקסלים - כחמישה פתקים -
   ומעבר לזה צריך לגלול. 380 מחזיקים שמונה או תשעה, וזה עדיין
   אינו דוחף את היומן מתחתיו אל מחוץ למסך.

   הגבול נשאר, ובכוונה: תיבה שגדלה בלי סוף מזיזה את כל מה שמתחתיה
   בכל פתק שנוסף. */
.boardnotes {
    list-style: none;
    margin: 0 0 var(--s2);
    padding: 0;
    max-height: 380px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}

.boardnote {
    display: flex;
    align-items: flex-start;
    gap: var(--s2);
    padding: var(--s2);
    background: var(--tile);
    border-radius: var(--r-s);
    font-size: var(--t-sm);
    line-height: 1.45;
}

/* פתק נכתב במילים של אדם: שורה ארוכה נשברת, ומילה ארוכה מדי
   נשברת גם היא ולא בורחת מהעמודה. */
/* **פוקסיה, לבולטות.** בקשתו 3.9.2026, אחרי שאלונה ביקשה שהפתק
   יבלוט. נבחר #a81f8f ולא הפוקסיה הבהירה: 6.14 מול רקע הפתק
   במקום 4.94, וזה ההבדל בין בולט לבין בולט וקריא על מסך ישן. */
.boardtext {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--fuchsia);
    font-weight: 600;
}

.boardx {
    border: 0;
    background: none;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
}

.boardx:hover { color: var(--red); }

.boardadd { display: flex; align-items: center; gap: var(--s2); }

.boardadd input { flex: 1; min-width: 0; }

/* "תזכיר לי": שלוש לחיצות מהירות, והשאר פתוח למי שצריך אותו. */
.pushform { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }

.pushbtn {
    padding: var(--s1) var(--s3);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    color: var(--ink-soft);
    font: inherit;
    font-size: var(--t-xs);
    white-space: nowrap;
}

.pushbtn:hover { border-color: var(--green); color: var(--green); background: var(--green-bg); }

.pushmore { flex-basis: 100%; }

.pushmore summary { font-size: var(--t-xs); color: var(--muted); cursor: pointer; }

.pushmore-body {
    display: grid;
    gap: var(--s1);
    justify-items: start;
    padding-top: var(--s2);
}

.pushmore-body label { font-size: var(--t-xs); color: var(--muted); }

.pushmore-body input {
    width: 100%;
    padding: var(--s2);
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: var(--paper);
    font: inherit;
    font-size: var(--t-sm);
}


/* ---------- היומן ---------- */

.diary { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }

.diaryrow {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--s2);
    align-items: baseline;
    padding: var(--s1) 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--t-sm);
}

.diaryrow:last-child { border-bottom: 0; }

.diary-when { font-size: var(--t-xs); color: var(--muted); white-space: nowrap; }
.diary-who  { font-size: var(--t-xs); color: var(--muted); white-space: nowrap; }
.diary-detail { display: block; font-size: var(--t-xs); color: var(--muted); }


/* ---------- מה עכשיו ----------

   הפאנל היחיד שמזמין לפעולה, ולכן הוא היחיד שיש בו כפתור מלא.
   כל השאר במסך הוא מידע.                                        */

.nowblock {
    background: var(--tile);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: var(--s3);
    margin-bottom: var(--s4);
}

.nowtitle { margin: 0 0 var(--s2); font-weight: 600; }

.formbtns { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* הורדה, ולכן חץ ולא סימן וי. מה שקורה בלחיצה הוא שקובץ נוחת. */
.formbtn {
    display: inline-block;
    padding: var(--s2) var(--s3);
    background: var(--paper);
    border: 1px solid var(--green);
    border-radius: var(--r-s);
    color: var(--green);
    text-decoration: none;
    font-size: var(--t-sm);
}

.formbtn::before { content: "⬇ "; }
.formbtn:hover { background: var(--green-bg); }

/* ---------- הזרימה: קו אחד של קוביות ----------

   29.8.2026. קודם עמדו כאן שני טורים - ניירת ונגרר - כטבלה של
   שש שורות. מפיו: *"צריך מסלול אחד... אני מרגיש שהתנפחנו."*

   **כבויה היא <button> ומוארת היא <summary>**, ולכן שתיהן חייבות
   להיראות אותה קופסה בדיוק: .flowface נותן את הצורה, ו-.lit
   מוסיף את הצבע. אילו היו שתי צורות, הפס היה קופץ בכל סימון.

   הפס נשבר לשורות כשאין רוחב, ולכן **המספר יושב בתוך הקובייה**:
   הסדר נשאר קריא גם כששמונה קוביות יורדות לשלוש שורות. */
.flow {
    list-style: none;
    margin: 0 0 var(--s4);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
}

/* היחס לכאן: הלוח של הקובייה נפתח ביחס אליה, ולא ביחס לפס. */
.flowbox {
    position: relative;
    flex: 1 1 132px;
    min-width: 132px;
}

.flowface {
    display: grid;
    gap: 2px;
    width: 100%;
    min-height: 78px;
    padding: var(--s2);
    background: var(--tile);
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    color: var(--muted);
    font: inherit;
    font-size: var(--t-xs);
    text-align: right;
    cursor: pointer;
}

.flowtodo:hover { border-color: var(--green); background: var(--paper); }
.flowoff { cursor: default; }

/* **מוארת.** הצבע ממלא את הקובייה ואינו רק מסגרת - זו כל הנקודה
   של התרשים: מבט אחד אומר כמה נעשה וכמה נשאר.

   position: relative בשביל הסימן שיושב בפינה. הלוח שנפתח בלחיצה
   אינו יושב בתוך הפנים אלא לצדן, ולכן אינו מושפע. */
.lit > .flowopen > .flowface,
.lit > .flowface {
    position: relative;
    background: var(--green-lit);
    border-color: var(--green-lit-line);
    color: var(--ink);
}

/* **הסימן, ולא רק הצבע.** מילוי בהיר לעולם לא יגיע ל-3.0 - זו
   תכונה של מילויים בהירים, לא של הבחירה כאן. סימן נקרא בלי קשר
   לצבע, לזווית, לבהירות המסך, ואצל מי שאינו מבחין בין ירוק
   לאפור. הוא בפינה הנגדית למספר, ואינו נוגע בפריסה. */
.flow-tick {
    position: absolute;
    top: 5px;
    left: 8px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--green-lit-ink);
}

.flow-num { font-weight: 600; color: var(--muted); }
.lit .flow-num { color: var(--green); }

.flow-name {
    font-size: var(--t-sm);
    font-weight: 600;
    line-height: 1.25;
    color: var(--ink-soft);
}
.lit .flow-name { color: var(--ink); }

/* השורה התחתונה בקובייה: בכבויה מה תפתח הלחיצה, במוארת מתי. */
.flow-starts { color: var(--muted); }
.flow-when   { font-weight: 600; color: var(--green); }
.flow-days   { color: var(--ink-soft); }

/* **מצב השעון על פני הקובייה, בלי לחיצה.** 29.8.2026 עברה
   התזכורת אל תוך הלוח שנפתח בלחיצה, ולכן המצב חייב להישאר
   בחוץ: מה שעבר זמנו ומחכה ללחיצה כדי להיראות הוא בדיוק הדרך
   שבה דברים נשכחים.

   **ולא רק צבע.** קובייה שעבר מועדה נצבעת בענבר וגם אומרת
   "המועד עבר" בכתב מודגש - מסך שנשען על צבע בלבד אינו מסך
   שאפשר לסמוך עליו. הכלל הזה ירד עם הרשימה הישנה, ועלה לכאן.

   הכלל בא **אחרי** .lit ולכן גובר עליו: אותה ספציפיות בדיוק,
   וסדר הכתיבה מכריע. */
.flow-clock { color: var(--muted); }
.due .flow-clock { color: var(--amber); }

.due > .flowopen > .flowface {
    background: var(--amber-bg);
    border-color: #f0dcb4;
}

/* המשולש של <details> יורד: הקובייה עצמה היא הכפתור. */
.flowopen > summary { list-style: none; }
.flowopen > summary::-webkit-details-marker { display: none; }

/* **הלוח נפתח מעל הפס ואינו דוחף אותו.** אחרת פתיחה של קובייה
   אחת הייתה מזיזה את שבע האחרות ממקומן. */
.flowpanel {
    position: absolute;
    z-index: 5;
    top: calc(100% + 4px);
    right: 0;
    width: min(320px, 86vw);
    display: grid;
    gap: var(--s2);
    padding: var(--s3);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    box-shadow: 0 6px 20px rgba(27, 42, 33, .14);
}

.flowpanel-what { margin: 0; font-size: var(--t-sm); font-weight: 600; }
.flowpanel-who,
.flowpanel-note,
.flowpanel-when,
.flowpanel-clock { margin: 0; font-size: var(--t-xs); color: var(--ink-soft); }
.flowpanel-clock strong { color: var(--green); }
.due .flowpanel-when strong { color: var(--amber); }

/* בתוך הלוח הצר הכפתורים יורדים לשורות, ולכן הם צמודים לשמאל
   ולא נמתחים. */
.flowpanel .pushform { margin: 0; }

.flowpanel .amendform { display: grid; gap: var(--s1); margin: 0; }
.flowpanel label { font-size: var(--t-xs); color: var(--muted); }
.flowpanel input {
    width: 100%;
    padding: 5px var(--s2);
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    font: inherit;
    font-size: var(--t-sm);
}
.flowpanel .hint { margin: 0; }
.flowundo { margin: 0; }


.undo {
    padding: 0;
    background: none;
    border: 0;
    color: var(--muted);
    font: inherit;
    font-size: var(--t-xs);
    text-decoration: underline;
    cursor: pointer;
}

.undo:hover { color: var(--red); }


/* ---------- רשימת התיקים ----------

   השורה כולה היא הקישור, ולא המספר בלבד. אדם שרואה שורה שלמה של
   תיק לוחץ על השם, על השלב, על כל מקום בה - ואם רק המספר מוביל
   פנימה, הלחיצה נופלת לרצפה בלי שדבר קורה ובלי הסבר.        */

.caselist { list-style: none; margin: 0; padding: 0; }

.caserow { border-bottom: 1px solid var(--line); }
.caserow:last-child { border-bottom: 0; }

.caselink {
    display: grid;
    grid-template-columns: 6ch 1fr auto auto;
    gap: var(--s3);
    align-items: baseline;
    padding: var(--s2);
    margin: 0 calc(var(--s2) * -1);
    border-radius: var(--r-s);
    color: inherit;
    text-decoration: none;
}

/* שהעכבר יראה שהשורה חיה, לפני שלוחצים. */
.caselink:hover, .caselink:focus-visible { background: var(--tile); }

/* **שורת הסדר, מעל הרשימה.** קישורים ולא כפתורים: זו תצוגה
   ולא פעולה, והכתובת נושאת אותה. אותו דפוס בדיוק כמו "הערות"
   שבארכיון. */
.sortbar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s2);
    margin: 0 0 var(--s3);
    font-size: var(--t-sm);
}

.sortlabel { color: var(--muted); font-size: var(--t-xs); }

.sortlink {
    padding: 3px 10px;
    border: 1px solid var(--line);
    border-radius: 20px;
    color: var(--muted);
    text-decoration: none;
}
.sortlink:hover { border-color: var(--green); color: var(--green); }

/* הדלוק צבוע, כדי שיהיה ברור לפי מה הרשימה מסודרת עכשיו. */
.sorton {
    border-color: var(--green);
    background: var(--green-bg);
    color: var(--green);
    font-weight: 600;
}

/* החץ אומר לאן. לחיצה על הדלוק הופכת אותו. */
.sortway { margin-inline-start: 4px; }

/* תיאור הנגרר בשורת הרשימה: המילים של בעל הבית, שקטות. */
.case-desc { font-weight: 400; color: var(--trailer-desc); }

.case-number { color: var(--muted); }
.case-name  { font-weight: 600; }
.case-who   { font-weight: 600; }
.case-stage { font-size: var(--t-sm); color: var(--muted); }

/* **שם הבעלים שבסוגריים: אותו צבע ואותה עוצמה כמו שם הרוכש.**
   8.10.2026, מפיו: *"בעמודה הימנית שם הבעלים... מופיע בסוגריים
   בהמשך לשם הרוכש בכתב חיוור. זה מקשה על העין. עשי כך שהכתב
   יהיה באותו צבע ועוצמה כמו שם הרוכש."*

   היה כאן `400` ו-`--muted`, מתוך מחשבה שהבעלים אינו הרוכש ואינו
   צריך למשוך את העין לפניו. **הסוגריים כבר אומרות את זה** - ושני
   סימנים לאותו דבר קונים את עצמם בקריאוּת. */
.case-owner { font-weight: inherit; color: inherit; }

/* **למה התיק הזה עלה בחיפוש.** ת.ז או מספר רכב, כשהם אלה
   שהתאימו. מסגרת ולא צבע חיוור: זה סימן, לא לחישה, ובאותו יום
   עצמו הוא ביקש שהכתב החיוור ייעלם. */
.case-why {
    font-weight: 400;
    font-size: var(--t-xs);
    padding: 1px 7px;
    border: 1px solid var(--line);
    border-radius: 20px;
    white-space: nowrap;
}

/* ---------- "תיקים פתוחים": שלוש עמודות נעולות ----------

   7.10.2026, מפיו, עם צילום מסך: *"נוצר אי סדר ויזואלי... יש
   לחלק את העמוד שלש עמודות."*

   **מה שיצר את אי הסדר:** `auto auto` בסוף הפריסה. רוחב השלב
   והטלפון נגזר מהתוכן של כל שורה בנפרד, ולכן כל שורה התחילה
   במקום אחר והעין לא מצאה עמודה.

   **הרוחב חושב מהנתונים שבמערכת היום**, 43 תיקים פתוחים: שם
   הרוכש והבעלים 28 תווים בממוצע, 44 ב-90% מהשורות, 55 במקסימום;
   תיאור הנגרר 10 בממוצע ו-27 במקסימום; השלב המקוצר 18 במקרה
   הארוך ביותר שקיים ("ממתין לרישיון זמני"); וטלפון עשר ספרות.
   השניים האחרונים קבועים כי הם סוף השורה - הם מה שחייב להתיישר -
   והשניים הראשונים חולקים את מה שנשאר ביחס 1.45:1.

   **מה שלא נכנס מסתיים בשלוש נקודות ונחשף בריחוף**, מפיו:
   *"מלל שבכל זאת לא ייכנס יסתיים בשלש נקודות. ריחוף עם העכבר
   יחשוף את התוכן המלא."* */
.openlist .caselink {
    grid-template-columns:
        6ch                   /* מספר ההזמנה - ארבע ספרות */
        calc(37% - 6ch)       /* הרוכש, והבעלים בסוגריים */
        minmax(0, 1fr)        /* תיאור הנגרר - מה שנשאר, 26% */
        130px                 /* השלב, מקוצר */
        calc(37% - 130px);    /* טלפון, צמוד לשמאל */
    column-gap: 0;
}

/* **האמצעית באמצע העמוד, ולא באמצע מה שנשאר.** 8.10.2026, מפיו,
   עם צילום מסך: *"העמודה האמצעית נמשכה לשמאל במקום להתמרכז
   לימין."*

   **מה שקרה:** הטקסט היה ממורכז - אבל בתוך עמודה שעמדה במקום
   הלא נכון. השמות קיבלו 1.45 חלקים והשלב והטלפון 225 פיקסלים
   בלבד, ולכן העמודה האמצעית ישבה משמאל לאמצע הדף ומירכוז בתוכה
   מירכז אותה שם.

   **התיקון:** העמודה הימנית והשמאלית רחבות בדיוק אותו דבר - 37%
   כל אחת - ולכן האמצעית יושבת באמצע מעצם הבנייה ולא בזכות
   ריפוד מדויק. ואין רווח בין המסילות (`column-gap: 0`): הרווח
   ניתן כריפוד בצד הקו, כדי ששני הקווים יעמדו על 37% ועל 63%
   בדיוק, סימטריים זה לזה. */

/* **`min-width: 0` הוא מה שמאפשר את שלוש הנקודות.** בלעדיו תא
   ברשת מסרב להתכווץ מתחת לתוכנו, הטקסט דוחף את העמודה, וכל
   הפריסה חוזרת להיות מה שהייתה. */
.openlist .caselink > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* **שני קווים, ולא ארבעה.** 7.10.2026, מפיו: *"בסך הכל צריך
   למרכז את העמודה המרכזית ולהפריד את שלש העמודות בשני קווים
   אנכיים לאורך העמוד."*

   **וזה אחרי שטעיתי פעמיים באותו תיקון.** שמתי קו בקצה כל תא -
   ארבעה קווים, כי בפנים יש חמש מסילות ולא שלוש. **העמודות
   שהעין רואה הן שלוש:** מספר ההזמנה יושב עם השמות, והשלב יושב
   עם הטלפון. הקווים הם רק בין השלוש.

   **והטעות השנייה הייתה גרועה יותר:** הוספתי ריפוד לכל התאים,
   והוא אכל את תא מספר ההזמנה - "6698" הפך ל-"...8". ריפוד
   נכנס רק לתא שיש בו קו, ורק בצד הקו.

   **הקו רץ לאורך העמוד ולא קטעים קטעים:** הריפוד האנכי עבר
   מהשורה אל התאים, ולכן הם מגיעים מקצה השורה עד קצה השורה
   והקווים נוגעים זה בזה בין שורה לשורה. */
.openlist .caselink { padding-block: 0; }
.openlist .caselink > span { padding-block: var(--s2); }

.openlist .case-who,
.openlist .case-desc {
    border-inline-end: 1px solid var(--line);
    padding-inline-end: var(--s3);
}

/* בלי רווח בין המסילות, הריפוד הוא שמרחיק: השם מהמספר, והשלב
   מהקו. והטלפון צמוד לקצה השמאלי, כמו שהיה. */
.openlist .case-who   { padding-inline-start: var(--s2); }
.openlist .case-stage { padding-inline-start: var(--s3); }
.openlist .case-phone { text-align: end; }

/* **ובלי קווים אופקיים.** 8.10.2026, מפיו: *"ועדיין ישנם קווים
   אופקיים בעמוד."* הוא ביקש שני קווים אנכיים, ורק אותם. השורה
   עדיין נצבעת בריחוף, כך שהעין לא מאבדת אותה. */
.openlist .caserow { border-bottom: 0; }

/* **תא ריק אינו קוטע את הקו.** התאים מיושרים לפי קו הכתב
   (`baseline`) ולא נמתחים לגובה השורה, ולכן תא בלי טקסט - תיק
   בלי תיאור נגרר - היה נמוך מחבריו והקו שלו נקטע בדיוק שם.
   רווח ברוחב אפס נותן לו שורת כתב, בלי להציג דבר. */
.openlist .caselink > span:empty::before { content: "\200b"; }

/* **והאמצעית ממורכזת.** 7.10.2026: *"העמודה האמצעית נמצאת
   שמאלה מדי... נראה שיש מספיק מקום כדי למרכז אותה."*

   מה שקרה שם: עמודת השם רחבה דייה גם לשם הארוך ביותר, ולכן
   בשורה עם שם קצר נפער חלל והתיאור התחיל רחוק ממנו. המרכוז
   סוגר את החלל בלי לגעת ברוחב - והרוחב הוא מה שמייצר את הסדר. */
.openlist .case-desc {
    text-align: center;
    padding-inline-start: var(--s3);
}

/* **פתק שנשאר על הלוח, בשורת הארכיון.** בקשתה של אלונה,
   9.9.2026: *"ההערה תופיע גם בטבלת התיקים שבארכיון ובאותו צבע
   'פוקסיה' בה צבועה ההערה בלוח המחיק."* אותו צבע בדיוק, ולא
   גוון שני שנראה כמו טעות.

   **ובאותה שורה, לא מתחתיה.** מפיו באותו יום, אחרי שראה:
   *"אין צורך לקפוץ שורה. זה משבש את הסדר בעין ומיותר."*

   השורה כולה היא ה-li: הקישור תופס שני שלישים קבועים ממנה,
   והפתקים את השאר. **החלק קבוע ולא נגזר מהתוכן** - אחרת עמודות
   התיק היו זזות מכל שורה לשורה לפי אורך הפתק, ואז אין שתי
   שורות שמתחילות באותו מקום.

   בלי מעטפת: כאן זו שורה ברשימה ולא לוח, ומסגרת לכל שורה הייתה
   הופכת את הארכיון לרצף של קופסאות. */
.archivelist .caserow {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s3);
}

.archivelist .caselink { flex: 1 1 62%; min-width: 0; }

.rownotes {
    flex: 1 1 30%;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s1) var(--s3);
}

.rownote { display: inline-flex; align-items: baseline; gap: var(--s1); }

.rownote-text {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--fuchsia);
    font-weight: 600;
    font-size: var(--t-sm);
}

.rownote-erase { margin: 0; }

/* ---------- התיבה שליד הלוח ----------

   9.9.2026: *"ליד תיבת הלוח המחיק בתיק החי תהיה משבצת קטנה
   לסימון (ארכיב)."*

   **ריבוע מצויר ולא תו.** תווי תיבה (☐ ☑) אינם קיימים בכל גופן,
   ועל מסך ישן במשרד הם יוצאים ריבוע ריק. הווי כבר בשימוש
   בקוביות ונבדק שם. */
.boardhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s2);
}

.boardhead h3 { margin-bottom: var(--s2); }

.keepform { margin: 0; }

.keepbox {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    border: 0;
    background: none;
    padding: 0;
    font-size: var(--t-xs);
    color: var(--muted);
    cursor: pointer;
}

.keepbox:hover { color: var(--fuchsia); }

.keeptick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--paper);
    font-size: 11px;
    line-height: 1;
    color: var(--fuchsia);
}
.case-phone { font-size: var(--t-sm); color: var(--muted); }


/* ---------- מסכים צרים ----------
   שלוש עמודות אינן נכנסות, והן נערמות. **מה עכשיו ראשון** - הוא
   מה שבאים לעשות - ואחריו הסריקה, שהיא המסמך שקוראים ממנו. */

@media (max-width: 1200px) {
    .casepage { grid-template-columns: 1fr; }
    .case-now   { grid-column: 1; grid-row: 1; }
    .case-scan  { grid-column: 1; grid-row: 2; min-height: 0; }
    .case-facts { grid-column: 1; grid-row: 3; }
    .case-diary { grid-column: 1; grid-row: 4; }

    /* טור אחד ורחב. המסגרת מאריכה לפי מידת הדף בדיוק כמו במסך
       רחב, אבל אינה נמתחת לרוחב כל העמוד - דף בגודל כזה נקרא
       פחות טוב, לא יותר. */
    .scanlink, .scanbox { max-width: 640px; }
}

@media (max-width: 640px) {
    .flowbox { flex-basis: 100%; }
    .caselink { grid-template-columns: 6ch 1fr; }
    .case-stage, .case-phone { grid-column: 2; }

    /* **וגם "תיקים פתוחים" חוזר לשתי עמודות.** חמש מסילות
       ברוחב קבוע על מסך צר הן גלילה לרוחב, והקווים שמפרידים
       ביניהן הופכים לרשת של קופסאות ריקות. הסדר נועד למסך
       המשרד; במסך צר עדיף פשוט לקרוא. */
    .openlist .caselink {
        grid-template-columns: 6ch 1fr;
        gap: var(--s2) var(--s3);
    }
    .openlist .case-desc { grid-column: 2; text-align: start; }
    .openlist .case-phone { text-align: start; }
    .openlist .caselink { padding-block: var(--s2); }
    .openlist .caselink > span {
        padding-block: 0;
        padding-inline: 0;
        border-inline-end: 0;
    }
    .diaryrow { grid-template-columns: 1fr auto; }
    .diary-when { grid-column: 1 / -1; }
}

/* ---------- דף הבית: ארבע הקבוצות ----------

   שורה אחת לכל דבר שדורש טיפול. ארבע עמודות קבועות ולא flex:
   שמות באורכים שונים היו דוחפים כל שורה למקום אחר, ואז העין
   אינה מוצאת את הכפתור פעמיים באותו מקום.

   הצבע בפס הצדדי בלבד, והכתב אומר את אותו דבר במילים - מסך
   שנשען על צבע בלבד אינו מסך שאפשר לסמוך עליו.            */

.tone-quiet { border-inline-start-color: var(--muted); }
.tone-quiet .cardhead h2 { color: var(--ink-soft); }

.tasklist .taskrow {
    display: grid;
    grid-template-columns: minmax(120px, 180px) minmax(0, 1fr) auto minmax(0, 320px);
    gap: var(--s3) var(--s4);
    align-items: start;
    padding: var(--s3) var(--s2);
}

/* **תיאור הנגרר, ברשימה שמתחת לקובייה.** 13.10.2026, בקשתה של
   אלונה דרכו: *"נא להוסיף לרשימה עמודה נוספת אחרי שם הלקוח.
   בעמודה החדשה יופיע תיאור הנגרר כפי שנכתב, אם נכתב."*

   **רק הרשימה הזאת מקבלת חמש עמודות.** שלוש קבוצות העבודה -
   תקוע, להיום, לא זז - חולקות את אותו `.taskrow`, והן נשארות
   בארבע. רשימה שמתארת מצב אחד יש בה מקום לסימן זיהוי; רשימת
   מטלות דחופות אין בה.

   **וארבע מסילות, כי ארבעה תאים.** 13.10.2026, מפיו, עם צילום
   מסך: *"את העמודה השמאלית לא הזזת שמאלה... והמילה 'המועד'
   בשורה של 'טוביה לוי' יורדת שורה. מדוע? הרי יש הרבה מקום?"*

   **הייתה כאן מסילה חמישית שאין בה תא.** העתקתי את צורת השורה
   מקבוצות העבודה - וליד הטלפון יש אצלן תא נוסף, `task-do`,
   הכפתורים. **ברשימה הזאת אין כפתורים בכוונה** ("תמונה ולא
   רשימת מטלות"), ולכן `minmax(0, 320px)` האחרון שמר 320 פיקסל
   לכלום, דחק את "ממתינים ל..." לשתי שורות, והשאיר חלל משמאל.

   **והרוחב נמדד מהנתונים שבמערכת היום, ולא נבחר בתחושה:** שם
   הרוכש עד 41 תווים (חציון 14), תיאור הנגרר עד 27 (חציון 15),
   ו"ממתין ל... · הגיע המועד" עד 42 תווים - הארוך מכולם, ולכן
   הוא מקבל את החלק הגדול. הטלפון הוא עשר ספרות תמיד, ולכן
   `auto`: הוא לוקח את מה שהוא צריך, והשאר נשאר לטקסט.

   העמודה מתכווצת לפני האחרות: התיאור הוא עזר לזיהוי, ולא סיבה
   לדחוק את מי שממתין. */
.withdesc .taskrow {
    grid-template-columns:
        minmax(120px, 180px)      /* שם הלקוח ומספר ההזמנה */
        minmax(0, 0.7fr)          /* תיאור הנגרר - 27 תווים לכל היותר */
        minmax(0, 1.3fr)          /* למה הוא ממתין - 42 תווים */
        auto;                     /* הטלפון - עשר ספרות, בדיוק */
}

.task-desc {
    font-weight: 400;
    font-size: var(--t-sm);
    color: var(--trailer-desc);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tasklist li + li { border-top: 1px solid var(--line-soft); }

.taskrow .task-who {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.task-who:hover .task-name { text-decoration: underline; }

.task-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.task-wait { font-size: var(--t-sm); font-weight: 600; }
.task-when { font-size: var(--t-xs); color: var(--muted); }
.task-note { font-size: var(--t-xs); }

/* **הפתק מהלוח המחיק, בשורת "להיום".** פוקסיה - בקשתו, 3.9.2026:
   *"ערבוב של אדום וסגול."* נמדד 6.14 מול רקע הפתק, ולכן קריא
   באמת ולא רק צבעוני. הוא אינו האדום של "תקוע" ואינו מתיימר
   להיות: אדום כאן היה גונב את המשמעות מהקבוצה שמעליו. */
.task-board {
    font-size: var(--t-xs);
    color: var(--fuchsia);
    font-weight: 600;
}

.tone-urgent .task-wait { color: var(--red); }
.tone-today  .task-wait { color: var(--amber); }

/* שתי הפעולות של השורה, זו מעל זו: הסימון קודם, והדחייה אחריו. */
.task-do { display: flex; flex-direction: column; gap: var(--s2); align-items: stretch; }
.task-do form { margin: 0; }

/* הכפתור נושא את נוסח הסימון ולא את המילה "הגיע" - מה שנרשם
   ביומן הוא מה שכתוב עליו. */
.taskmark {
    width: 100%;
    padding: var(--s2) var(--s3);
    background: var(--green);
    border: 0;
    border-radius: var(--r-s);
    color: #fff;
    font: inherit;
    font-size: var(--t-sm);
    font-weight: 600;
    text-align: center;
}

.taskmark::before { content: "¹3  "; }
.taskmark:hover { filter: brightness(1.08); }

/* הסימון שסוגר את התיק נראה אחרת, כי אין ממנו חזרה בלחיצה אחת. */
.taskmark-closes { background: var(--ink-soft); }
.taskmark-closes::before { content: "¹3  "; }

.taskrow .pushform { margin: 0; }

@media (max-width: 900px) {
    .tasklist .taskrow { grid-template-columns: 1fr auto; }
    .withdesc .taskrow { grid-template-columns: 1fr auto; }
    .task-desc { grid-column: 1 / -1; }
    .task-what { grid-column: 1 / -1; }
    .task-do   { grid-column: 1 / -1; }
}

/* קישור הכלי החדש בסרגל, בזמן הבנייה בלבד. מסומן כדי שיהיה ברור
   מה חדש ומה ישן כשהשניים חיים זה לצד זה. יורד עם המעבר. */
.navlink-new {
    border: 1px dashed var(--green);
    border-radius: var(--r-s);
    color: var(--green);
}

/* ---------- מדף המסמכים ----------

   יושב בצד השמאלי, במקום שבו סריקת ההזמנה יושבת, ונפתח בלחיצה
   על "מסמכים". **רשימה ולא רשת**: אלה שורות בודדות שקוראים
   בעין אחת, ולא אריחים שצריך לסרוק. */

.shelf {
    list-style: none;
    margin: 0 0 var(--s4);
    padding: 0;
    display: grid;
    gap: var(--s2);
}

.shelf-slot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s2) var(--s3);
    padding: var(--s2) var(--s3);
    background: var(--tile);
    border-radius: var(--r);
}

.shelf-name {
    font-weight: 600;
    color: var(--ink);
    min-width: 9rem;
}

.shelf-files {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s1);
}

.shelf-file {
    display: flex;
    align-items: baseline;
    gap: var(--s3);
    font-size: var(--t-sm);
}

/* **כל משבצת היא יעד גרירה בפני עצמה.** בחירה מרשימה ואז גרירה
   הייתה מתייקת קובץ תחת מה שבמקרה היה מסומן. */
.shelfadd {
    display: grid;
    gap: var(--s2);
    padding-top: var(--s3);
    border-top: 1px solid var(--line);
}

.shelfadd h4 {
    margin: 0;
    font-size: var(--t-sm);
    color: var(--muted);
    font-weight: 600;
}

.slotadd {
    display: flex;
    gap: var(--s2);
    margin-top: var(--s2);
}

.slotadd input { flex: 1; }

/* כפתור שנראה כמו קישור: "הסרה" אינו פעולה שמזמינים אליה. */
.linkbutton {
    border: 0;
    background: none;
    padding: 0;
    color: var(--muted);
    cursor: pointer;
    text-decoration: underline;
}

.linkbutton:hover { color: var(--red); }

/* ---------- שליחה בווטסאפ ----------

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

.walink {
    display: inline-block;
    padding: 1px 9px;
    border: 1px solid var(--green-bg);
    border-radius: 20px;
    background: var(--green-bg);
    color: var(--green);
    font-size: var(--t-xs);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.walink:hover { border-color: var(--green); }