@charset "UTF-8";

/* ===========================================================================
   נועם מתלי כביסה — מערכת העיצוב
   ---------------------------------------------------------------------------
   נכתב מאפס לפי עקרונות Human Interface Guidelines.

   שלוש החלטות שמסבירות כמעט כל שורה בקובץ:

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

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


/* ===========================================================================
   1 · יסודות
   =========================================================================== */

:root {
    /* --- אקסנט ---------------------------------------------------------
       נגזר מהגוון של הלוגו (196°) והוכהה עד שהוא עובד בשני התפקידים:
       טקסט לבן עליו 4.98:1, והוא עצמו כטקסט על רקע העמוד 4.58:1.
       התכלת של הלוגו עצמה (#B4E3F4) לא יכולה לשמש לכך — הבהירות שלה 0.71,
       כלומר לכל היותר 1.38:1 מול לבן. היא נשארת ללוגו ולמשטחים רכים. */
    --accent:          #0078A3;
    --accent-pressed:  #006185;
    --accent-tint:     #EFF8FB;   /* מילוי רך לכפתור משני ולמצב נבחר */
    --accent-tint-2:   #D3E9F2;
    --accent-on:       #FFFFFF;

    /* --- טקסט ----------------------------------------------------------
       שלוש דרגות ותו לא. יותר מזה, והעין מפסיקה להבחין ביניהן. */
    --label:      #16202A;
    --label-2:    #5A6672;   /* 5.1:1 על רקע העמוד */
    --label-3:    #8A939C;   /* טקסט עזר בלבד, לעולם לא מידע קריטי */

    /* --- משטחים --------------------------------------------------------
       רקע העמוד כהה מעט מהכרטיסים, כך שהכרטיס עולה בלי צל כבד. */
    --bg:         #F2F5F7;
    --surface:    #FFFFFF;
    --surface-2:  #F7F9FA;
    --fill:       rgba(120, 132, 144, .10);
    --fill-strong:rgba(120, 132, 144, .16);

    /* --- קווים ---------------------------------------------------------
       קו מפריד אינו גבול: הוא רמז. שקוף, כדי שיישב נכון על כל משטח. */
    --separator:  rgba(60, 70, 80, .14);
    --border:     rgba(60, 70, 80, .20);

    /* --- צבעים סמנטיים -------------------------------------------------- */
    --green:   #1D7F4C;
    --green-on:        #FFFFFF;   /* טקסט על מילוי ירוק מלא */
    --green-tint: #EDF8F1;
    --orange:  #9A5B00;
    --orange-tint: #FDF1E1;
    --red:     #B3261E;
    --red-on:          #FFFFFF;   /* טקסט על מילוי אדום מלא */
    --red-tint: #FCEDEC;
    --gray-tint: #EEF1F3;

    /* --- טיפוגרפיה ------------------------------------------------------
       סולם של עשר דרגות עם הבחנה אמיתית בין שכנות. שמות לפי תפקיד,
       לא לפי גודל — כך אי אפשר "לבחור 14px כי זה נראה נכון". */
    --font: 'Rubik', -apple-system, 'Segoe UI', system-ui, sans-serif;

    --t-large-title: 1.87rem;
    --t-title-1:     1.53rem;
    --t-title-2:     1.27rem;
    --t-title-3:     1.13rem;
    --t-headline:    1rem;
    --t-body:        1rem;
    --t-callout:     0.93rem;
    --t-subhead:     0.87rem;
    --t-footnote:    0.8rem;
    --t-caption:     0.73rem;

    /* --- ריווח ---------------------------------------------------------- */
    --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
    --s-5: 1.25rem; --s-6: 1.5rem;  --s-8: 2rem;    --s-10: 2.5rem;

    /* --- פינות ---------------------------------------------------------- */
    --r-sm: 8px;  --r-md: 11px;  --r-lg: 14px;  --r-xl: 18px;  --r-pill: 999px;

    /* --- הצללה ---------------------------------------------------------
       צל אחד, עדין. כרטיס לא צריך להיראות מרחף. */
    --shadow:    0 1px 2px rgba(20, 30, 40, .05), 0 6px 18px rgba(20, 30, 40, .05);
    --shadow-lg: 0 8px 20px rgba(20, 30, 40, .10), 0 24px 60px rgba(20, 30, 40, .12);

    /* --- מבנה ----------------------------------------------------------- */
    --topbar-h:  3.6rem;
    --sidebar-w: 16.5rem;
    --content-max: 78rem;
}

/* --- מצב כהה -----------------------------------------------------------
   "ודא שכל הצבעים עובדים בבהיר, בכהה ובניגודיות מוגברת". נגזר מהגדרת
   המערכת ולא מפקד בממשק — אין כאן כפתור להתלבט לגביו. */
@media (prefers-color-scheme: dark) {
    :root {
        --accent:         #4CC5F0;
        --accent-pressed: #7FD6F5;
        --accent-tint:    rgba(76, 197, 240, .16);
        --accent-tint-2:  rgba(76, 197, 240, .26);
        --accent-on:      #04222D;

        --label:   #F2F5F7;
        --label-2: #9AA6B2;
        --label-3: #6E7A86;

        --bg:        #14181C;
        --surface:   #1E242A;
        --surface-2: #242B32;
        --fill:        rgba(150, 165, 180, .14);
        --fill-strong: rgba(150, 165, 180, .22);

        --separator: rgba(160, 175, 190, .18);
        --border:    rgba(160, 175, 190, .26);

        --green: #4ED07F;  --green-tint: rgba(78, 208, 127, .16);
        --green-on: #052A18;
        --orange:#F0A93B;  --orange-tint: rgba(240, 169, 59, .16);
        --red:   #FF6B61;  --red-tint: rgba(255, 107, 97, .13);
        /* לבן על האדום הבהיר של המצב הכהה הוא 2.8:1 — כאן הדיו כהה. */
        --red-on: #2A0F0C;
        --gray-tint: rgba(150, 165, 180, .14);

        --shadow:    0 1px 2px rgba(0, 0, 0, .40), 0 6px 18px rgba(0, 0, 0, .30);
        --shadow-lg: 0 8px 20px rgba(0, 0, 0, .45), 0 24px 60px rgba(0, 0, 0, .40);
    }
}

/* --- ניגודיות מוגברת --------------------------------------------------- */
@media (prefers-contrast: more) {
    :root {
        --label-2: #3B4652;
        --label-3: #5A6672;
        --separator: rgba(40, 50, 60, .38);
        --border: rgba(40, 50, 60, .55);
    }
}


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

:root {
    --line: var(--separator);      --kq-line: var(--separator);
    --muted: var(--label-2);       --kq-muted: var(--label-2);
    --card: var(--surface);        --kq-surface: var(--surface);
    --kq-ink: var(--label);        --kq-bg: var(--bg);
    --radius: var(--r-lg);         --kq-radius: var(--r-lg);
    --kq-radius-sm: var(--r-md);

    --fs-base: var(--t-body);  --fs-sm: var(--t-subhead);  --fs-xs: var(--t-footnote);

    --primary: var(--accent-tint);   --primary-ink: var(--accent);
    --primary-hover: var(--accent-tint-2);  --primary-edge: var(--accent);
    --danger-ink: var(--red);  --danger-soft: var(--red-tint);
    --empty: var(--label-3);

    --avatar-bg: var(--accent-tint);  --avatar-ink: var(--accent);
    --ink: var(--label);  --warn: var(--orange);  --fs-3xl: var(--t-title-1);

    --brand-50: var(--accent-tint);   --brand-100: var(--accent-tint);
    --brand-200: var(--accent-tint-2);--brand-300: var(--accent);
    --brand-500: var(--accent);       --brand-700: var(--accent);
    --brand-800: var(--accent-pressed); --brand-900: var(--accent-pressed);
    --kq-blue: var(--accent);  --kq-cyan: var(--accent);  --kq-indigo: var(--accent-pressed);

    /* Bootstrap מצייר חלק מהפקדים מהמשתנים שלו. מפנים אותם לאקסנט
       כדי שלא ידלוף הכחול המקורי שלו (#0d6efd) בתיבות סימון ובקישורים. */
    --bs-primary: #0078A3;
    --bs-primary-rgb: 0, 120, 163;
    --bs-link-color: #0078A3;
    --bs-link-hover-color: #006185;
    --bs-body-color: var(--label);
    /* צבע קבוע וכהה של בוטסטרפ. במצב כהה הוא נעלם על הכרטיס,
       ולכן הטקסט המשני של המערכת הוא שקובע. */
    --bs-secondary-color: var(--label-2);
    --bs-border-color: var(--border);
    --bs-focus-ring-color: rgba(0, 120, 163, .25);
}


/* ===========================================================================
   3 · בסיס
   =========================================================================== */

html {
    /* גודל הבסיס של הממשק. כל המידות בגיליון נגזרות ממנו ב-rem. */
    font-size: 15px;
    position: relative;
    min-height: 100%;
}

body {
    font-family: var(--font);
    font-size: var(--t-body);
    line-height: 1.5;
    color: var(--label);
    background: var(--bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { line-height: 1.25; letter-spacing: -.01em; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

hr { border-color: var(--separator); opacity: 1; }

::selection { background: var(--accent-tint-2); color: var(--label); }

/* מיקוד מקלדת אחיד. :where שומר על משקל אפס כדי שלא יגבר על כלום. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* "הקטן אנימציות אוטומטיות וחוזרות כשההעדפה דלוקה". משך זעיר ולא אפס,
   כדי שאירועי transitionend עדיין ייורו ולוגיקה שתלויה בהם לא תיתקע. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* "אל תהפוך את סדר הספרות בתוך מספר". טלפון או תאריך שנוגע בפיסוק עברי
   עלול להסתדר מחדש; הבידוד מונע את זה. tabular-nums מיישר בין שורות. */
.lead-phone, .lead-stamp, .lead-last-when, .kq-timeline-time, .usub, .ld-fact dd {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
}


/* ===========================================================================
   4 · שלד
   =========================================================================== */

/* --- הסרגל העליון ------------------------------------------------------
   "הבדל בין פקדים לתוכן". הסרגל הוא חומר שהתוכן נראה מבעדו, לא לוח אטום. */
.kq-topbar {
    position: sticky;
    top: 0;
    z-index: 1050;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 1px 0 var(--separator);
}

/* אחרי שהחשבון ירד לתפריט, בסרגל נשארו רק הבורגר והלוגו — והם שייכים
   זה לזה ויושבים יחד בתחילת השורה, לא נדחפים לשני קצוות. */
.kq-topbar-inner {
    height: var(--topbar-h);
    padding: 0 var(--s-5);
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

.kq-brand { display: inline-flex; align-items: center; }
.kq-logo { height: 2.5rem; width: auto; display: block; }

.kq-burger {
    width: 2.2rem; height: 2.2rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--r-sm);
    background: transparent; color: var(--label-2);
    transition: background .15s ease, color .15s ease;
}
.kq-burger:hover { background: var(--fill); color: var(--label); }
.kq-burger svg { width: 1.35em; height: 1.35em; }

/* --- החשבון בסרגל ------------------------------------------------------ */
.kq-account { display: flex; align-items: center; gap: var(--s-1); flex: 0 0 auto; }
.kq-account form { display: contents; }

/* בלי גלולה ובלי רקע משלו. הקבוצה כולה כבר יושבת על משטח משלה, ומסגרת
   נוספת סביב השם הייתה תיבה בתוך תיבה. */
.kq-user {
    display: flex; align-items: center; gap: var(--s-2);
    flex: 1 1 auto; min-width: 0;
    cursor: default;
}
.kq-user-name {
    font-size: var(--t-subhead); font-weight: 600; color: var(--label);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* אימוג'י במקום עיגול עם אות פתיחה. הוא כבר צבעוני וברור בכל גודל,
   ולכן אין צורך בעיגול צבע סביבו — שתי הדגשות על אותו דבר. */
.kq-user-emoji { font-size: 1.15rem; line-height: 1; flex: 0 0 auto; }

/* העיגול עדיין בשימוש ברשימת המשתמשים, שם הוא מבדיל בין שורות. */
.kq-avatar {
    width: 1.85rem; height: 1.85rem; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--accent-tint-2); color: var(--accent);
    font-size: var(--t-footnote); font-weight: 600;
}
.kq-avatar-fallback { line-height: 1; }

.kq-icon-btn {
    width: 2.2rem; height: 2.2rem; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--r-sm);
    background: transparent; color: var(--label-2);
    transition: background .15s ease, color .15s ease;
}
.kq-icon-btn:hover { background: var(--fill); color: var(--label); }
.kq-icon-btn svg { width: 1.15em; height: 1.15em; }
.kq-icon-btn-sm { width: 2rem; height: 2rem; }
.kq-icon-btn-sm svg { width: 1.05em; height: 1.05em; }
.kq-icon-btn--out:hover, .kq-icon-btn--out:focus-visible {
    background: var(--red-tint); color: var(--red);
}

/* --- סרגל הצד ----------------------------------------------------------
   שקוף ויושב על רקע העמוד. לוח לבן שני ליד תוכן לבן יצר שתי מדרגות
   שמתחרות על אותה תשומת לב. */
/* הסרגל הוא משטח, בדיוק כמו הכרטיסים.
   קודם הוא היה שקוף: פריטי הניווט ריחפו על רקע העמוד בזמן שכל שאר התוכן
   ישב על לוחות לבנים. זו הייתה שפה חזותית אחת שהסרגל לבדו לא דיבר בה,
   והוא גם נגע בשפת החלון בעוד התוכן שמר מרווח. */
.kq-sidebar {
    position: fixed;
    top: calc(var(--topbar-h) + var(--s-4));
    inset-inline-start: var(--s-4);      /* ב-RTL זהו הקצה הימני */
    bottom: var(--s-4);
    width: var(--sidebar-w);
    z-index: 1045;
    display: flex; flex-direction: column;
    background: var(--surface);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform .22s ease;
}
html:not(.kq-nav-open) .kq-sidebar {
    transform: translateX(calc(100% + var(--s-4)));
}

/* הניווט לוקח את כל הגובה הפנוי ונגלל לבד, ולכן החשבון נשאר מוצמד
   לתחתית גם כשיש הרבה פריטי תפריט. */
.kq-sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden auto;
    padding: var(--s-3);
}

/* --- החשבון בתחתית התפריט ---------------------------------------------- */
.kq-sidebar-foot {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    border-top: 1px solid var(--separator);
}

/* התפריט מחולק לקבוצות. הכותרת היא תווית ולא פריט — היא לא נלחצת.
   קו שיער מפריד בין הקבוצות; הראשונה אינה צריכה אותו כי אין מה להפריד ממנו. */
.kq-nav-group {
    margin: var(--s-5) 0 var(--s-2);
    padding: var(--s-4) var(--s-3) 0;
    border-top: 1px solid var(--separator);
    font-size: var(--t-caption); font-weight: 600;
    letter-spacing: .04em;
    color: var(--label-3);
}
.kq-nav-group:first-child {
    margin-top: 0;
    padding-top: var(--s-1);
    border-top: 0;
}

.kq-nav-link {
    display: flex; align-items: center; gap: var(--s-3);
    padding: .6rem var(--s-3);
    margin-bottom: 2px;
    border-radius: var(--r-md);
    color: var(--label); font-size: var(--t-body); font-weight: 500;
    transition: background .15s ease, color .15s ease;
}
.kq-nav-link:hover { background: var(--fill); text-decoration: none; }
.kq-nav-link.active { background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.kq-nav-ico { display: inline-flex; color: var(--label-3); }
.kq-nav-ico svg { width: 1.2em; height: 1.2em; }
.kq-nav-link.active .kq-nav-ico { color: var(--accent); }

/* הרקע החוסם קיים בכל עמוד אבל מוצג רק כשהתפריט מכסה את התוכן — כלומר
   במסך צר בלבד. במסך רחב התפריט דוחף את התוכן ואין מה לחסום. */
.kq-nav-backdrop {
    display: none;
    position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 1040;
    background: rgba(10, 15, 20, .35);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    overscroll-behavior: none; touch-action: none;
}

/* --- אזור התוכן -------------------------------------------------------- */
.kq-content {
    transition: margin .22s ease;
    min-height: calc(100vh - var(--topbar-h));
    display: flex; flex-direction: column;
}
html.kq-nav-open .kq-content { margin-inline-start: calc(var(--sidebar-w) + var(--s-4) * 2); }

.kq-main {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding: var(--s-8) var(--s-6) var(--s-10);
    flex: 1 0 auto;
}

/* --- כותרת עמוד --------------------------------------------------------
   "מקם פריטים לפי חשיבותם". הכותרת גדולה כי היא הדבר הראשון שקוראים. */
.kq-page-head, .page-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--s-4); flex-wrap: wrap;
    margin-bottom: var(--s-8);
}
.kq-page-title, .page-title {
    margin: 0;
    font-size: var(--t-large-title);
    font-weight: 700;
    letter-spacing: -.02em;
}
.kq-page-sub, .page-subtitle {
    margin: var(--s-1) 0 0;
    font-size: var(--t-callout);
    color: var(--label-2);
}


/* ===========================================================================
   5 · רכיבים
   =========================================================================== */

/* --- כרטיס -------------------------------------------------------------
   בלי מסגרת. מסגרת בעובי פיקסל *וגם* צל הן שתי דרכים לומר את אותו דבר. */
.kq-card, .page-card {
    background: var(--surface);
    border: 0;
    border-radius: var(--r-xl);
    box-shadow: var(--shadow);
}
.kq-card-body, .page-card-body { padding: var(--s-6); }
/* חלק מהמסכים שמים תוכן ישירות בכרטיס ולא בגוף שלו, ולכן הריפוד חוזר
   אל הכרטיס עצמו — אך לא כשיש לו כותרת או גוף משלו. */
.page-card { padding: var(--s-6); }
.page-card:has(> .page-card-header), .page-card:has(> .page-card-body) { padding: 0; }

/* כשיש כותרת, הכותרת נושאת ריפוד משלה והכרטיס מאבד את שלו — ולכן כל מה
   שבא אחריה חייב ריפוד משלו. בלי זה הטופס נצמד לשפת הכרטיס ונראה חורג. */
.page-card:has(> .page-card-header) > :not(.page-card-header):not(.page-card-body) {
    padding: var(--s-6);
}
.page-card-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-4); flex-wrap: wrap;
    padding: var(--s-5) var(--s-6);
    border-bottom: 1px solid var(--separator);
}
.page-card-header h2, .page-card-header .h6 {
    margin: 0; font-size: var(--t-title-3); font-weight: 600;
}
.page-card + .page-card, .kq-card + .kq-card { margin-top: var(--s-5); }

/* --- כפתורים -----------------------------------------------------------
   שלוש דרגות: מלא לפעולה הראשית, גוון רך למשנית, טקסט בלבד לשלישית.
   כשכל הכפתורים ממוסגרים באותה מידה, שום דבר לא מוביל. */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--s-2);
    border: 0; border-radius: var(--r-md);
    padding: .5rem var(--s-4);
    font-size: var(--t-callout); font-weight: 600; line-height: 1.4;
    transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.btn:active { transform: translateY(.5px); }
.btn > svg { width: 1.05em; height: 1.05em; flex: 0 0 auto; }

.btn-brand, .btn-kq {
    background: var(--accent); color: var(--accent-on);
}
.btn-brand:hover, .btn-kq:hover { background: var(--accent-pressed); color: var(--accent-on); }

.btn-soft, .btn-outline-secondary {
    background: var(--fill); color: var(--label);
}
.btn-soft:hover, .btn-outline-secondary:hover { background: var(--fill-strong); color: var(--label); }

.btn-link { background: none; color: var(--accent); padding-inline: var(--s-2); }
.btn-link:hover { color: var(--accent-pressed); text-decoration: none; background: var(--fill); }

/* ירוק לפעולה שמסמנת שהעבודה בוצעה. אותה משפחה כמו .btn-danger —
   מילוי מלא ושקיפות קלה בריחוף, בלי גוון נוסף שצריך לתחזק. */
.btn-green { background: var(--green); color: var(--green-on); }
.btn-green:hover { background: var(--green); color: var(--green-on); opacity: .88; }

.btn-danger { background: var(--red); color: var(--red-on); }
.btn-danger:hover { background: var(--red); color: var(--red-on); opacity: .88; }
.btn-outline-danger { background: var(--red-tint); color: var(--red); }
.btn-outline-danger:hover { background: var(--red-tint); color: var(--red); opacity: .82; }

.btn-sm { padding: .35rem var(--s-3); font-size: var(--t-subhead); border-radius: var(--r-sm); }

/* --- שדות --------------------------------------------------------------
   גבוהים ורכים, על משטח נקי. תווית מעל השדה תמיד — "שמור על היררכיה
   עקבית בכל גודל טקסט"; תווית לצד שדה נשברת בהגדלה. */
.form-label {
    display: block;
    margin-bottom: var(--s-1);
    font-size: var(--t-subhead); font-weight: 600; color: var(--label);
}
.form-control, .form-select, .input-group-text, textarea.form-control {
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--label);
    padding: .55rem var(--s-3);
    font-size: var(--t-body);
}
.form-control::placeholder { color: var(--label-3); }
.form-control:focus, .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3.5px var(--accent-tint);
    background: var(--surface);
    color: var(--label);
}
/* כפתור בחירת הקובץ צבוע בבוטסטרפ בצבע רקע קבוע ובהיר שאינו
   מתהפך במצב כהה — טקסט בהיר על רקע בהיר, והכפתור לא נקרא.
   הצבעים מוחלפים לשל המערכת; המידות נשארות של בוטסטרפ. */
.form-control[type="file"]::file-selector-button {
    background: var(--fill); color: var(--label);
    border-color: var(--border);
}
.form-control[type="file"]:hover:not(:disabled):not([readonly])::file-selector-button {
    background: var(--fill-strong); color: var(--label);
}

.form-text { color: var(--label-2); font-size: var(--t-footnote); }
/* רשת הטופס.
   הסימון כתוב עם .row ו-.col-* של בוטסטראפ. display:contents מוציא את
   העטיפות האלה מהזרימה, כך שהשדות עצמם הופכים לתאים ברשת אחת שמגיבה
   למכל — ולכן היא מסתדרת מחדש גם כשהתפריט נפתח, בלי שאף שאילתת מדיה
   תשתנה. שדות ארוכים (טקסט חופשי, כותרות, הודעות) תופסים שורה מלאה. */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    gap: 0 var(--s-5);
    align-items: start;
}
.form-grid > .row { display: contents; }
.form-grid > .row > [class*="col-"] {
    width: auto; max-width: none; flex: initial; padding-inline: 0;
}
.form-grid > h2, .form-grid > h3, .form-grid > h4, .form-grid > .h6,
.form-grid > hr, .form-grid > p, .form-grid > .form-text, .form-grid > .alert,
.form-grid > dl, .form-grid > fieldset, .form-grid > .d-flex, .form-grid > .form-wide,
.form-grid > .mb-3:has(textarea), .form-grid > .mb-4:has(textarea) { grid-column: 1 / -1; }

/* כותרת מקטע בתוך טופס: מפרידה בין קבוצות שדות בלי קו ובלי תיבה. */
.form-grid > h2, .form-grid > h3, .form-grid > .h6 {
    font-size: var(--t-title-3);
    font-weight: 600;
    color: var(--label);
    margin: var(--s-5) 0 var(--s-3);
}
.form-grid > :is(h2, h3, .h6):first-child { margin-top: 0; }
.form-check-input { border-color: var(--border); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-label { font-size: var(--t-callout); }
.kq-subform-title { font-size: var(--t-title-3); font-weight: 600; margin: 0 0 var(--s-4); }

/* --- תפריט נפתח --------------------------------------------------------
   רכיב אחד לכל הבחירות במערכת. תפריט תמיד ברוחב השדה. */
.field-select { position: relative; }
.field-select__label {
    display: block; margin-bottom: var(--s-1);
    font-size: var(--t-subhead); font-weight: 600;
}
.field-select__toggle {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
    width: 100%;
    padding: .55rem var(--s-3);
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); color: var(--label);
    font-size: var(--t-body); text-align: start;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field-select__toggle:hover { border-color: var(--label-3); }
.field-select__toggle[aria-expanded="true"] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3.5px var(--accent-tint);
}
.field-select__chevron { width: 1.05em; height: 1.05em; color: var(--label-3); flex: 0 0 auto; }

.field-select__menu {
    width: 100%; min-width: 100%; max-width: 100%;
    --bs-dropdown-min-width: 100%;
    padding: var(--s-1);
    border: 0; border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}
.dropdown-menu {
    border: 0; border-radius: var(--r-md);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    padding: var(--s-1);
}
.dropdown-item {
    border-radius: var(--r-sm);
    padding: .45rem var(--s-3);
    font-size: var(--t-callout);
    color: var(--label);
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--fill); color: var(--label); }
.dropdown-item.is-selected { background: var(--accent-tint); color: var(--accent); font-weight: 600; }

/* --- לוח הלידים / ההזמנות ---------------------------------------------- */
.leads-page { display: flex; flex-direction: column; gap: var(--s-5); }

/* שורת הכלים היא רשת של שתי שורות ולא שורת flex שנשברת:
   בשורה העליונה החיפוש והסינון בצד אחד וכפתור היצירה בקצה השני,
   ומתחתיהן תיבת "הצג את הכל". הכפתור מעוגן לעמודה שלו, ולכן הוא
   אינו זז כשהתיבה נוספת או כשהסינון נשבר לשורה נוספת. */
.leads-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-3);
}
.leads-filter {
    grid-column: 1; grid-row: 1;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    min-width: 0;
}

/* הכפתור יושב בקצה השורה העליונה. ב-RTL זהו הצד השמאלי. */
.leads-new { grid-column: 2; grid-row: 1; justify-self: end; }

/* כל מה שיושב בשורת הכלים חולק גובה אחד. הכפתור היה נמוך מהשדות בשישה
   פיקסלים, וזה מספיק כדי שהשורה תיראה לא מיושרת. */
.leads-head .btn,
.leads-search__input,
.leads-head .field-select__toggle { min-height: 2.75rem; }

/* רוחב קבוע ומוגדר. קודם השדה נמתח על כל הרוחב הפנוי, ולכן הוא נראה
   שונה בכל מסך ובכל מצב של התפריט. */
.leads-search { position: relative; flex: 0 1 24rem; min-width: 0; }
.leads-search__icon {
    position: absolute; inset-inline-start: var(--s-3); top: 50%;
    transform: translateY(-50%);
    width: 1.15em; height: 1.15em;
    color: var(--label-2); pointer-events: none;
}
.leads-search__input {
    width: 100%;
    padding: .55rem var(--s-3);
    padding-inline-start: 2.6rem;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--surface); color: var(--label);
    font-size: var(--t-body);
}
.leads-search__input::placeholder { color: var(--label-3); }
.leads-search__input:focus {
    outline: 0; border-color: var(--accent);
    box-shadow: 0 0 0 3.5px var(--accent-tint);
}
.leads-status { flex: 0 0 12rem; max-width: 100%; }

/* הרשת מגיבה למכל ולא לחלון, ולכן היא מסתדרת מחדש גם כשהתפריט נפתח
   ונסגר — בלי שאף שאילתת מדיה תשתנה. */
.leads-grid, .auto-grid, .kq-lead-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--col, 17rem), 100%), 1fr));
    grid-auto-rows: 1fr;
    gap: var(--s-4);
}

/* --- כרטיס ליד --------------------------------------------------------- */
.lead-card {
    /* חובה. הקישור שבתוך הכרטיס הוא .stretched-link, שנמתח אל האב הממוקם
       הקרוב אליו. בלי זה הוא נמתח אל body — כלומר לחיצה בכל מקום בעמוד
       פותחת את הליד האחרון, והכרטיס עצמו כמעט לא נלחץ. */
    position: relative;
    display: flex; flex-direction: column;
    height: 100%;
    padding: var(--s-4);
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
    color: inherit;
    transition: box-shadow .15s ease, transform .15s ease;
}
.lead-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-1px);
    text-decoration: none;
}
.lead-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--s-2); flex-wrap: wrap;
    margin-bottom: var(--s-2);
}
.lead-name { font-size: var(--t-title-3); font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.lead-city, .lead-product { font-size: var(--t-subhead); color: var(--label-2); }
.lead-phone {
    display: inline-flex; align-items: center; gap: var(--s-1);
    font-size: var(--t-subhead); color: var(--label-2);
}
.lead-phone svg { width: 1em; height: 1em; flex: 0 0 auto; }
.lead-note {
    margin: var(--s-3) 0 0;
    font-size: var(--t-subhead); color: var(--label-2);
    overflow-wrap: anywhere;
}

/* התיעוד האחרון על הכרטיס. הקו בצד קושר את מי שכתב לְמה שכתב, בלי מסגרת
   נוספת שתתחרה בכרטיס עצמו. */
.lead-last {
    margin-top: var(--s-3);
    padding-inline-start: var(--s-3);
    border-inline-start: 2px solid var(--separator);
}
.lead-last-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s-2); flex-wrap: wrap;
}
.lead-last-who { font-size: var(--t-caption); font-weight: 600; color: var(--label-2); }
.lead-last-when { font-size: var(--t-caption); color: var(--label-3); white-space: nowrap; }
.lead-last-note {
    margin: 1px 0 0;
    font-size: var(--t-subhead); color: var(--label-2);
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.lead-pills { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.lead-bottom { margin-top: auto; padding-top: var(--s-3); }
.lead-foot {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s-2);
    font-size: var(--t-footnote); color: var(--label-3);
}
.lead-stamp { white-space: nowrap; }
.lead-install {
    display: inline-flex; align-items: center; gap: var(--s-1);
    font-size: var(--t-footnote); color: var(--label-2);
}
.lead-install svg { width: 1em; height: 1em; flex: 0 0 auto; }

/* --- תווית מצב ---------------------------------------------------------
   "אל תסתמך על צבע בלבד". כל תווית נושאת מילה, והצבע רק מחזק אותה. */
.kq-status, .lead-pill {
    display: inline-block;
    padding: .15rem var(--s-2);
    border-radius: var(--r-pill);
    background: var(--gray-tint); color: var(--label-2);
    font-size: var(--t-caption); font-weight: 600; white-space: nowrap;
}
.kq-status--new,       .lead-pill--new       { background: var(--accent-tint); color: var(--accent); }
.kq-status--progress,  .lead-pill--progress  { background: var(--orange-tint); color: var(--orange); }
.kq-status--ok,        .lead-pill--ok        { background: var(--green-tint); color: var(--green); }
.kq-status--bad,       .lead-pill--bad       { background: var(--red-tint); color: var(--red); }

/* השמות שהקוד באמת פולט (StatusPillClass / PaymentPillClass). בלעדיהם כל
   תווית סטטוס במערכת נפלה לאפור של הבסיס — וזה מה שקרה עד עכשיו. */
.lead-pill-new       { background: var(--accent-tint); color: var(--accent); }
/* שלבי ההזמנה. הצבע אומר מה נדרש עכשיו: כחול (lead-pill-new, משותף עם
   ליד חדש) = לתאם, אפור = ממתין למועד, כתום = לגבות תשלום, ירוק = נגמר. */
.lead-pill-coordinated { background: var(--gray-tint);   color: var(--label-2); }
.lead-pill-installed   { background: var(--orange-tint); color: var(--orange); }
.lead-pill-completed   { background: var(--green-tint);  color: var(--green); }
/* שלבי הליד. אותו היגיון כמו בהזמנה — הצבע אומר מה נדרש עכשיו:
   כחול = ליצור קשר, כתום = בעבודה, אפור = ממתין, אדום = נסגר. */
.lead-pill-inprogress { background: var(--orange-tint); color: var(--orange); }
.lead-pill-waiting    { background: var(--gray-tint);   color: var(--label-2); }
.lead-pill-lost       { background: var(--red-tint);    color: var(--red); }
.lead-pill-unpaid    { background: var(--gray-tint);   color: var(--label-2); }
.lead-pill-paid      { background: var(--green-tint);  color: var(--green); }

.badge-role, .badge-state-on, .badge-state-off, .badge-locked {
    display: inline-block;
    padding: .1rem var(--s-2);
    border-radius: var(--r-pill);
    font-size: var(--t-caption); font-weight: 600;
}
.badge-role      { background: var(--fill); color: var(--label-2); }
.badge-state-on  { background: var(--green-tint); color: var(--green); }
.badge-state-off { background: var(--gray-tint); color: var(--label-2); }
.badge-locked    { background: var(--red-tint); color: var(--red); }

/* --- כרטיס ליד / הזמנה -------------------------------------------------
   שתי עמודות: הפרטים ברצועה צרה בצד ההתחלה, והעבודה השוטפת — תיעוד
   והיסטוריה — בעמודה הרחבה. השאילתה היא על המכל ולא על החלון, אחרת
   פתיחת התפריט הצדדי לא הייתה משנה את הפריסה. */
.ld-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
    margin-bottom: var(--s-5);
}
.ld-toolbar form { margin: 0; }

/* היציאה מהכרטיס צמודה לקצה שממנו מתחילים לקרוא; הפעולות נדחפות לקצה השני */
.ld-toolbar__back { margin-inline-end: auto; }

.ld-layout {
    container-type: inline-size;
    display: flex; flex-wrap: wrap; align-items: flex-start;
    gap: var(--s-5);
}
.ld-side, .ld-work { flex: 1 1 100%; min-width: 0; }
.ld-side > .kq-card + .kq-card, .ld-work > .kq-card + .kq-card { margin-top: var(--s-5); }

/* nowrap בתוך השאילתה בכוונה: אחרת שני מנגנונים היו מחליטים מתי עוברים
   לעמודה אחת — flex-wrap לפי סכום הבסיסים והשאילתה לפי המכל — והם היו
   נחתכים בטווח שבו הרצועה כבר נשברה אך עדיין הוגבלה ל-26rem. */
@container (min-width: 52rem) {
    .ld-layout { flex-wrap: nowrap; }
    .ld-side { flex: 0 0 auto; width: clamp(20rem, 34%, 26rem); }
    .ld-work { flex: 1 1 auto; }
}

.ld-card-title { font-size: var(--t-headline); font-weight: 600; margin: 0 0 var(--s-4); }

/* רשימת הפרטים: תווית בצד אחד, ערך בשני, קו שיער בין שורות. ערך ארוך
   נשבר לשורה שנייה ונשאר מיושר לימין כמו כל טקסט עברי — ולכן אין כאן
   text-align, ש-space-between לבדו כבר דוחף ערך קצר אל הקצה. */
.ld-facts { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.ld-fact {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s-4); margin: 0; padding: var(--s-3) 0;
}
.ld-fact + .ld-fact { border-top: 1px solid var(--separator); }
.ld-fact:first-child { padding-top: 0; }
.ld-fact:last-child { padding-bottom: 0; }
.ld-fact dt { flex: 0 0 auto; font-size: var(--t-subhead); font-weight: 400; color: var(--label-2); }
.ld-fact dd {
    min-width: 0; margin: 0;
    font-size: var(--t-callout); font-weight: 500; color: var(--label);
    overflow-wrap: anywhere;
}
.ld-fact--empty dd { color: var(--label-3); font-weight: 400; }

/* נספחים: שורה לקובץ, תמונה מקדימה למי שהוא תמונה. השורה כולה
   פותחת את הקובץ, ולכן אין צורך בקישור נפרד ליד כל שם. */
.ld-files { list-style: none; margin: 0; padding: 0; }
.ld-file {
    display: flex; align-items: center; gap: var(--s-2);
    padding: var(--s-2) 0;
}
.ld-file + .ld-file { border-top: 1px solid var(--separator); }
.ld-file:first-child { padding-top: 0; }
.ld-file:last-child { padding-bottom: 0; }

.ld-file__main {
    display: flex; align-items: center; gap: var(--s-3);
    flex: 1 1 auto; min-width: 0;
    color: inherit; text-decoration: none;
}
.ld-file__main:hover .ld-file__name { text-decoration: underline; }

.ld-file__thumb {
    width: 48px; height: 48px; flex: 0 0 48px;
    border-radius: var(--r-sm);
    object-fit: cover;
    background: var(--surface-2);
    border: 1px solid var(--separator);
}
.ld-file__thumb--doc {
    display: grid; place-items: center;
    color: var(--label-2);
}
.ld-file__thumb--doc svg { width: 22px; height: 22px; }

.ld-file__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.32; }
.ld-file__name {
    font-size: var(--t-callout); font-weight: 500; color: var(--label);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ld-file__meta { font-size: var(--t-caption); color: var(--label-2); }

.ld-file form { flex: none; }

/* טקסט חופשי לא נדחס לצד שורה — הוא מקבל את כל הרוחב מתחת לתווית */
.ld-fact--block { display: block; }
.ld-fact--block dt { margin-bottom: var(--s-1); }
.ld-fact--block dd { font-weight: 400; white-space: pre-wrap; }

/* ברוחב ביניים הרצועה נפרסת לכל הרוחב, ולכן הפרטים עוברים לשתי עמודות
   במקום להימתח לרוחב העמוד. */
@container (min-width: 34rem) and (max-width: 51.99rem) {
    .ld-facts { grid-template-columns: 1fr 1fr; column-gap: var(--s-8); }
    .ld-fact { border-top: 1px solid var(--separator); }
    .ld-fact:first-child, .ld-fact:nth-child(2) { border-top: 0; padding-top: 0; }
    .ld-fact--block { grid-column: 1 / -1; }
}

/* שני הטפסים של ההזמנה חולקים כרטיס אחד ומופרדים בקו, לא במסגרת נוספת */
.ld-form + .ld-form {
    margin-top: var(--s-5); padding-top: var(--s-5);
    border-top: 1px solid var(--separator);
}
/* ברצועה הצרה הפקד ממלא את הרוחב ממילא; התקרה נועדה למצב שבו הכרטיס
   נפרס לכל העמוד ושדה תאריך ברוחב 700 פיקסל נראה שבור. */
.ld-form .form-control, .ld-form .form-select { max-width: 22rem; margin-bottom: var(--s-2); }

/* --- חלון מודאלי -------------------------------------------------------
   פעולה שדורשת קלט נפתחת מעל הכרטיס ולא לוקחת את המשתמש לעמוד אחר.
   dialog נותן מלכודת מיקוד, סגירה ב-Esc ורקע חוסם — בלי שום ספרייה.
   המשטח יושב על הפאנל הפנימי ולא על dialog עצמו, כדי שלחיצה על הרקע
   (שמדווחת על dialog כיעד) תיפול מחוץ לתוכן ותסגור. */
.kq-modal {
    padding: 0; border: 0; background: transparent;
    width: min(30rem, calc(100vw - var(--s-8)));
    max-height: calc(100vh - var(--s-8));
    color: var(--label);
}
.kq-modal::backdrop { background: rgba(12, 18, 25, .45); }
.kq-modal-panel {
    display: flex; flex-direction: column;
    max-height: calc(100vh - var(--s-8));
    background: var(--surface);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.kq-modal-head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border-bottom: 1px solid var(--separator);
}
.kq-modal-title { margin: 0; font-size: var(--t-title-3); font-weight: 600; }
.kq-modal-body { flex: 1 1 auto; min-height: 0; overflow: hidden auto; padding: var(--s-5); }
.kq-modal-foot {
    flex: 0 0 auto;
    display: flex; flex-wrap: wrap; gap: var(--s-2);
    padding: var(--s-4) var(--s-5);
    border-top: 1px solid var(--separator);
}

@media (prefers-reduced-motion: no-preference) {
    .kq-modal[open] { animation: kq-modal-in .18s ease-out; }
    @keyframes kq-modal-in { from { opacity: 0; transform: translateY(.5rem); } }
}

/* --- סינון בבחירה מרובה ------------------------------------------------
   תיבות סימון בתוך התפריט, ותיבה נפרדת מתחת לשורת הכלים שעוקפת את הסינון
   כולו. היא יושבת מחוץ לתפריט בכוונה — היא לא עוד אפשרות בתוכו. */
.field-select__check {
    display: flex; align-items: center; gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-sm);
    font-size: var(--t-callout);
    cursor: pointer;
}
.field-select__check:hover { background: var(--fill); }
.field-select__check input { width: 1rem; height: 1rem; accent-color: var(--accent); flex: none; }

/* "הצג את הכל" — שורה שנייה בשורת הכלים. התווית נראית כמו גלולת
   סינון — שקופה כשהיא כבויה וצבועה באקצנט כשהיא דלוקה — כדי שיהיה
   ניכר ממבט אחד שהסינון מנוטרל. */
.leads-showall {
    grid-column: 1 / -1; grid-row: 2;
    justify-self: start;
    display: inline-flex; align-items: center; gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-pill);
    font-size: var(--t-subhead); font-weight: 500;
    color: var(--label-2);
    cursor: pointer;
    user-select: none;
    transition: background-color .15s ease, color .15s ease;
}
.leads-showall:hover { background: var(--fill); color: var(--label); }
.leads-showall:has(input:checked) { background: var(--accent-tint); color: var(--accent); }

/* תיבת הסימון של מערכת ההפעלה אינה מקבלת את צבעי הממשק ואת הפינות
   שלו, ולכן היא מצוירת כאן — והוויו נחתך מתוך ריבוע בצבע הטקסט. */
.leads-showall input {
    appearance: none; -webkit-appearance: none;
    flex: none; margin: 0;
    width: 1.15rem; height: 1.15rem;
    display: grid; place-content: center;
    /* גבול של פקד, ולכן הוא חזק מקו השיער שבין שורות — ריבוע של חצי
       נקודה צריך להיראות גם כשהוא ריק. */
    border: 1.5px solid var(--label-3); border-radius: 6px;
    background: var(--surface);
    transition: background-color .15s ease, border-color .15s ease;
}
.leads-showall input::before {
    content: ""; width: .72rem; height: .72rem;
    background: var(--accent-on);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    transform: scale(0);
    transition: transform .12s ease;
}
.leads-showall input:checked { background: var(--accent); border-color: var(--accent); }
.leads-showall input:checked::before { transform: scale(1); }
.leads-showall input:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3.5px var(--accent-tint);
}

/* --- בורר עם חיפוש ------------------------------------------------------
   נראה כמו שדה רגיל; התוצאות נפתחות מתחתיו ומוגבלות בכמות. */
.kq-picker { position: relative; }
.kq-picker__list {
    position: absolute; z-index: 20;
    inset-inline: 0; top: 100%;
    margin: var(--s-1) 0 0; padding: var(--s-1);
    max-height: 18rem; overflow: auto;
    list-style: none;
    background: var(--surface);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
}
.kq-picker__item {
    display: flex; flex-direction: column; gap: 1px;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-sm);
    cursor: pointer;
}
.kq-picker__item:hover, .kq-picker__item.is-active { background: var(--fill); }
.kq-picker__name { font-size: var(--t-callout); font-weight: 600; }
.kq-picker__sub {
    font-size: var(--t-footnote); color: var(--label-2);
    unicode-bidi: isolate; font-variant-numeric: tabular-nums;
}
.kq-picker__note {
    padding: var(--s-2) var(--s-3);
    font-size: var(--t-footnote); color: var(--label-3);
}

/* --- רשימת שורות -------------------------------------------------------
   שורה אחת לרשומה, בלי שורת כותרות. הזהות תופסת את המקום הפנוי, התגיות
   והפעולות אחריה, והשורה נשברת מעצמה כשאין רוחב. משותף למסך המשתמשים
   ולמסך הלקוחות — לכן הכללים כאן ולא בתוך אחד מהם. */
.users-list {
    list-style: none; margin: 0; padding: 0;
    border: 1px solid var(--separator);
    border-radius: var(--r-lg);
    overflow: hidden;
}

/* רשימה שאינה יושבת בתוך כרטיס. בלי המודיפייר הזה היא נעטפת ב-page-card,
   והריפוד שלו דוחף אותה נמוך מהמקום שבו מתחילות הכרטיסיות בשאר הלוחות. */
.users-list--card {
    border-color: transparent;
    background: var(--surface);
    box-shadow: var(--shadow);
}
.urow {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--s-2) var(--s-3);
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--separator);
}
.urow:last-child { border-bottom: 0; }
.urow:hover { background: var(--accent-tint); }

.uav {
    width: 40px; height: 40px; flex: 0 0 40px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--accent-tint); color: var(--accent);
    font-size: var(--t-body); font-weight: 700;
}

/* flex-basis הוא מה שמחליט מתי השורה נשברת: כל עוד יש 260px לזהות הכל
   נשאר בשורה אחת, ומתחת לזה התגיות והפעולות יורדות לשורה משלהן. */
.uid { display: flex; flex-direction: column; flex: 1 1 260px; min-width: 0; line-height: 1.32; }
.uname { font-weight: 600; overflow-wrap: anywhere; }
.usub {
    display: flex; align-items: center; gap: var(--s-1);
    min-width: 0; color: var(--label-2); font-size: var(--t-subhead);
}
/* ערכים בכיוון הפוך נסוגים לפני שהשורה נשברת, ולא גולשים החוצה */
.usub > span[dir="ltr"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usub-dot { flex: none; opacity: .6; }

.utags { display: flex; flex-wrap: wrap; gap: var(--s-1); flex: none; }
.utags-none { color: var(--label-2); }
.uacts { display: flex; flex-wrap: wrap; gap: var(--s-1); flex: none; }

/* --- ציר הזמן ----------------------------------------------------------
   הקו נמשך לאורך הפריטים והנקודה יושבת עליו, כך שהרצף נקרא כרצף. */
.kq-timeline { list-style: none; margin: 0; padding: 0; }
.kq-timeline-item {
    position: relative;
    padding: 0 var(--s-5) var(--s-5);
    border-inline-start: 2px solid var(--separator);
}
.kq-timeline-item:last-child { border-inline-start-color: transparent; padding-bottom: 0; }
.kq-timeline-item::before {
    content: ""; position: absolute;
    inset-inline-start: -5px; top: .4rem;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
}
.kq-timeline-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--s-3); flex-wrap: wrap;
}
.kq-timeline-user { font-weight: 600; font-size: var(--t-callout); }
.kq-timeline-time { font-size: var(--t-footnote); color: var(--label-3); white-space: nowrap; }
.kq-timeline-status { font-size: var(--t-footnote); color: var(--label-2); margin: var(--s-1) 0; }
/* התיעוד נכתב ביד ולעתים בכמה שורות — שורה חדשה היא חלק מהתוכן */
.kq-timeline-note { margin: var(--s-1) 0 0; font-size: var(--t-callout);
                    white-space: pre-wrap; overflow-wrap: anywhere; }

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

   RTL: הרשת נשארת בכיוון הטבעי של העמוד — הנתיבים הם טכנאים או ימים,
   ושניהם נקראים מימין לשמאל. רק ציר הזמן אנכי, ולכן אין מה לשקף. */
.cal-toolbar {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}
.cal-nav { display: flex; align-items: center; gap: var(--s-2); }
.cal-period {
    font-size: var(--t-callout); font-weight: 600; color: var(--label);
    font-variant-numeric: tabular-nums;
    min-width: 10.5rem; text-align: center;
}

/* מחלף התצוגות — שתי לשוניות צמודות במסגרת אחת */
.cal-views {
    display: inline-flex;
    padding: 2px;
    border-radius: var(--r-md);
    background: var(--fill);
}
.cal-view {
    padding: .32rem var(--s-4);
    border-radius: calc(var(--r-md) - 2px);
    font-size: var(--t-subhead); font-weight: 600;
    color: var(--label-2); text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}
.cal-view:hover { color: var(--label); }
.cal-view.is-on { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-1, 0 1px 2px rgb(0 0 0 / .08)); }

.cal-count {
    display: inline-block; margin-inline-start: var(--s-2);
    padding: .05rem .5rem; border-radius: var(--r-pill);
    background: var(--accent-tint); color: var(--accent);
    font-size: var(--t-caption); font-weight: 600;
    font-variant-numeric: tabular-nums;
}

@container (min-width: 52rem) {
    .cal-pool.ld-side { width: clamp(15rem, 25%, 20rem); }
}

/* צבע לכל טכנאי. הבלוק ממזג את הצבע אל תוך המשטח הנוכחי,
   ולכן אותו כלל עובד גם על לבן וגם על כהה. */
[data-color="1"] { --cal-color: var(--accent); }
[data-color="2"] { --cal-color: var(--green); }
[data-color="3"] { --cal-color: var(--orange); }
[data-color="4"] { --cal-color: #7C5CD6; }
[data-color="5"] { --cal-color: #C2477F; }
[data-color="6"] { --cal-color: #0E8C8C; }

.cal-dot {
    display: inline-block; flex: none;
    width: .55rem; height: .55rem; border-radius: 50%;
    background: var(--cal-color, var(--accent));
}

/* --- הממתינות לתיאום --- */
.cal-queue { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.cal-queue__item {
    display: grid; gap: .1rem;
    padding: var(--s-3);
    border-radius: var(--r-md);
    background: var(--fill);
    cursor: grab;
    line-height: 1.32;
}
.cal-queue__item:hover { background: var(--fill-strong); }
.cal-queue__item:active { cursor: grabbing; }
.cal-queue__item.is-dragging { opacity: .4; }
.cal-queue__title {
    font-size: var(--t-callout); font-weight: 600; color: var(--label);
    text-decoration: none; overflow-wrap: anywhere;
}
.cal-queue__title:hover { color: var(--label); text-decoration: underline; }
.cal-queue__sub { font-size: var(--t-subhead); color: var(--label-2); overflow-wrap: anywhere; }

/* --- רשת השעות --- */
.cal-board { overflow: hidden; }
.cal-grid__scroll { overflow: auto; max-height: 70vh; }
.cal-grid__inner { display: grid; align-items: start; }

/* הפינה והסרגל נשארים במקום בזמן גלילה אופקית */
.cal-grid__corner {
    position: sticky; inset-inline-start: 0; top: 0; z-index: 4;
    background: var(--surface);
    border-bottom: 1px solid var(--separator);
}
.cal-grid__ruler {
    position: sticky; inset-inline-start: 0; z-index: 2;
    background: var(--surface);
}
.cal-grid__hour { position: relative; font-size: var(--t-caption); color: var(--label-2); }
.cal-grid__hour span {
    position: absolute; top: -.55em; inset-inline-end: var(--s-2);
    padding: 0 2px;
    background: var(--surface);
    font-variant-numeric: tabular-nums;
}

.cal-grid__colhead {
    position: sticky; top: 0; z-index: 3;
    display: flex; flex-direction: column; align-items: center; gap: .1rem;
    padding: var(--s-2) var(--s-2);
    background: var(--surface);
    border-bottom: 1px solid var(--separator);
    border-inline-start: 1px solid var(--separator);
}
.cal-grid__colhead.is-today { background: color-mix(in srgb, var(--accent-tint) 70%, var(--surface)); }
.cal-grid__colhead-title {
    display: flex; align-items: center; gap: var(--s-2);
    max-width: 100%;
    font-size: var(--t-subhead); font-weight: 600; color: var(--label);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-grid__colhead-sub { font-size: var(--t-caption); color: var(--label-2); font-variant-numeric: tabular-nums; }
.cal-grid__colhead.is-today .cal-grid__colhead-title { color: var(--accent); }

.cal-grid__col { position: relative; border-inline-start: 1px solid var(--separator); }

.cal-grid__slot {
    position: absolute; inset-inline: 0;
    border-top: 1px solid var(--separator);
    pointer-events: none;
}
/* שעת עבודה — מסומנת ברקע, כדי שתיאום מחוץ לשעות ייראה חריג */
.cal-grid__slot.is-working { background: color-mix(in srgb, var(--fill) 55%, transparent); }
.cal-grid__slot.is-droppable { pointer-events: auto; }
.cal-grid__slot.is-drop-over {
    background: var(--accent-tint);
    outline: 2px dashed var(--accent);
    outline-offset: -2px;
}

/* קו השעה הנוכחית */
.cal-grid__now {
    position: absolute; inset-inline: 0; height: 2px; z-index: 4;
    background: var(--red);
    pointer-events: none;
}
.cal-grid__now::before {
    content: ""; position: absolute; inset-inline-start: 0; top: -3px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--red);
}

/* --- בלוק של התקנה --- */
.cal-item {
    position: absolute; z-index: 5;
    display: flex; flex-direction: column;
    overflow: hidden;
    border-radius: var(--r-sm);
    border-inline-start: 3px solid var(--cal-color, var(--accent));
    background: color-mix(in srgb, var(--cal-color, var(--accent)) 16%, var(--surface));
    line-height: 1.25;
    transition: box-shadow .12s ease;
}
.cal-item:hover { z-index: 6; box-shadow: 0 2px 8px rgb(0 0 0 / .18); }
.cal-item.is-movable { cursor: grab; }
.cal-item.is-movable:active { cursor: grabbing; }
.cal-item.is-dragging { opacity: .4; }

/* בזמן גרירה הבלוקים מאבדים את יכולת הפגיעה: הם יושבים מעל
   המשבצות, ורק המשבצת מקבלת נפילה — אחרת שעה תפוסה לא היתה ניתנת לשיבוץ. */
.cal-grid--dragging .cal-item { pointer-events: none; }

.cal-item__link {
    display: flex; flex-direction: column; gap: .05rem;
    padding: .2rem var(--s-2);
    min-width: 0;
    color: var(--label); text-decoration: none;
}
.cal-item__link:hover { color: var(--label); }
/* טווח שעות נשאר בכיוון שלו: "09:00–10:30" ולא ההפך.
   isolate מונע ממנו להשפיע על סידור הטקסט העברי שלידו. */
.cal-item__time {
    font-size: var(--t-caption); font-weight: 700; color: var(--cal-color, var(--accent));
    font-variant-numeric: tabular-nums; white-space: nowrap;
    direction: ltr; unicode-bidi: isolate; text-align: start;
}
/* שורת השעה מפנה מקום לכפתור הביטול. הרווח קבוע ולא נוסף
   בריחוף, כדי שהטקסט לא יקפוץ כשהכפתור מתגלה.

   הצד: הכפתור יושב ב-inline-end של הבלוק, שהוא RTL — כלומר בשמאל.
   שורת השעה עצמה היא LTR (טווח מספרי אינו מתהפך), ולכן אותו צד
   הוא ה-inline-start שלה. ריפוד ב-inline-end היה נוסף בצד המנוגד. */
.cal-item.is-movable .cal-item__time { padding-inline-start: 1.35rem; }
.cal-item__title {
    font-size: var(--t-subhead); font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-item__sub {
    font-size: var(--t-caption); color: var(--label-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ביטול התיאום — מתגלה בריחוף על הבלוק, כדי שלא ירעיש ביומן
   שלוו. הלחיצה הראשונה רק מבקשת אישור, ואז הכפתור מתרחב ואומר זאת. */
.cal-item__remove {
    position: absolute; top: 2px; inset-inline-end: 2px; z-index: 7;
    width: 1.15rem; height: 1.15rem; padding: 0;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: var(--red); color: #fff;
    font-size: var(--t-subhead); line-height: 1;
    cursor: pointer; opacity: 0;
    transition: opacity .12s ease;
}
.cal-item:hover .cal-item__remove,
.cal-item__remove:focus-visible { opacity: 1; }

/* בתצוגת שבוע השעה נמוכה יותר, ולא כל שלוש השורות נכנסות */
.cal-grid--dense .cal-item__sub { display: none; }
.cal-grid--dense .cal-item__link { padding: .1rem var(--s-2); }

/* פרטי ההזמנה בחלון התיאום — אותה רשימת עובדות שבכרטיסים,
   בתוך מסגרת רכה שמפרידה בין "מה ידוע" לבין "מה צריך למלא". */
.cal-modal-facts {
    margin-bottom: var(--s-4);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-md);
    background: var(--fill);
}
.cal-modal-facts .ld-fact { padding: var(--s-2) 0; }
.cal-modal-facts .ld-fact:first-child { padding-top: 0; }
.cal-modal-facts .ld-fact:last-child { padding-bottom: 0; }

/* --- הודעות מצב --------------------------------------------------------
   "אשר שפעולה משמעותית הושלמה". הודעה אחת, קצרה, בראש התוכן. */
.status-alert, .alert {
    display: flex; align-items: flex-start; gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-5);
    border: 0; border-radius: var(--r-md);
    background: var(--green-tint); color: var(--green);
    font-size: var(--t-callout);
}
.status-alert > svg { width: 1.2em; height: 1.2em; flex: 0 0 auto; margin-top: .1rem; }
.status-text { flex: 1 1 auto; min-width: 0; }
.alert-danger { background: var(--red-tint); color: var(--red); }
.alert-warning { background: var(--orange-tint); color: var(--orange); }

/* --- סיכום שגיאות של הטופס ----------------------------------------------
   ASP.NET מייצר את ההודעה כפריט ברשימה: <ul><li>...</li></ul>. התוצאה
   הייתה נקודה שחורה לפני הטקסט, הזחה של 30px מצד אחד מול 15px מהצד השני,
   ומרווח תחתון של 15px שהותיר את הטקסט לא ממורכז בתיבה.
   כאן הרשימה חוזרת להיות טקסט: השגיאה היא משפט, לא רשימת תבליטים. */
.alert ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.alert li { list-style: none; }
.alert li + li { margin-top: var(--s-1); }

/* קישור בתוך הודעה — נושא את צבע ההודעה עצמה ולא את כחול הקישורים,
   שהיה נקרא גרוע על רקע אדום רך. הקו התחתון הוא שמסמן שאפשר ללחוץ. */
.alert a {
    color: inherit; font-weight: 600;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
}
.alert a:hover { color: inherit; text-decoration-thickness: 2px; }

/* אייקון שנצבע בצבע ההודעה עצמה, ולכן הוא נכון גם באדום, גם בכתום וגם
   במצב כהה — בלי להוסיף סימון לאף אחד מתשעת המסכים שמציגים סיכום שגיאות. */
.alert::before {
    content: "";
    flex: 0 0 auto;
    width: 1.2em; height: 1.2em;
    margin-top: .12em;
    background: currentColor;
    -webkit-mask: var(--alert-icon) center / contain no-repeat;
    mask: var(--alert-icon) center / contain no-repeat;
}
:root {
    --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5'/%3E%3Cpath d='M12 16.4h.01'/%3E%3C/svg%3E");
}
/* להודעת ההצלחה כבר יש אייקון משלה בסימון. */
.status-alert::before { content: none; }

/* ASP.NET מצייר את אותה תיבה גם כשאין שגיאה ברמת המודל — עם רשימה ריקה
   בפנים. בלי הכלל הזה היה נראה ריבוע אדום ריק עם סימן קריאה, בלי טקסט. */
.validation-summary-valid,
.alert:empty { display: none; }
.alert:has(> ul:empty) { display: none; }

/* --- מצב ריק -----------------------------------------------------------
   טקסט אחד, ממורכז, בלי איור ובלי הסבר על המערכת. */
.empty-state {
    padding: var(--s-10) var(--s-5);
    text-align: center;
    color: var(--label-2);
    font-size: var(--t-callout);
}
.empty-state p { margin: 0; }

/* --- מסכי התחברות ------------------------------------------------------
   מסך יחיד, ממורכז, בלי ניווט. הלוגו הוא ההקשר. */
.auth-page { background: var(--bg); }
.auth-shell {
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    gap: var(--s-6);
    padding: var(--s-6);
    /* מרכוז מלא היה דוחף את הלוגו נמוך יותר ככל שהמסך גבוה: על מסך של
       1080 פיקסלים המרווח העליון הגיע ל-300. כאן הוא נגזר מגובה המסך
       אבל חסום, ולכן הוא נשאר קטן ויציב בכל גודל. */
    padding-block-start: clamp(1.5rem, 7vh, 4rem);
}

/* הלוגו הוא ההקשר של המסך — הוא אומר לאיזו מערכת נכנסים, ולכן אין צורך
   בשורת טקסט שאומרת את אותו דבר במילים. */
.auth-hero { display: flex; justify-content: center; }
.auth-brand { display: flex; justify-content: center; }
.auth-logo { display: block; }
.auth-logo img {
    display: block;
    width: min(20rem, 70vw);
    height: auto;
}

.auth-body { width: 100%; display: flex; justify-content: center; }
.auth-card {
    width: 100%; max-width: 30rem;
    background: var(--surface);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--s-10) var(--s-8);
}
.auth-title {
    margin: 0 0 var(--s-6);
    font-size: var(--t-title-1);
    font-weight: 700;
    text-align: center;
    color: var(--label);
}
.auth-sub { font-size: var(--t-callout); color: var(--label-2); text-align: center; margin: 0; }

@media (max-width: 575.98px) {
    .auth-card { padding: var(--s-6) var(--s-5); }
    .auth-shell { gap: var(--s-5); }
}


/* ===========================================================================
   6 · התאמה
   =========================================================================== */

/* יעדי לחיצה במגע: 44 נקודות. בעכבר די בפחות, ולכן זה חל רק על מצביע גס. */
@media (pointer: coarse) {
    .btn, .kq-nav-link, .dropdown-item { min-height: 44px; }
    .kq-icon-btn, .kq-burger { min-width: 44px; min-height: 44px; }
}

@media (max-width: 991.98px) {
    /* הבורגר הוא הדרך היחידה לכל שאר המסכים, ולכן הוא גדל. */
    .kq-burger { width: 2.6rem; height: 2.6rem; }
    html.kq-nav-open .kq-content { margin-inline-start: 0; }
    html.kq-nav-open .kq-nav-backdrop { display: block; }
    .kq-sidebar {
        top: var(--topbar-h); bottom: 0; inset-inline-start: 0;
        border-radius: 0;
        box-shadow: var(--shadow-lg);
    }
    html:not(.kq-nav-open) .kq-sidebar { transform: translateX(100%); }
    .kq-nav-link { padding: .7rem var(--s-3); font-size: var(--t-body); }
}

@media (max-width: 767.98px) {
    html { overflow-x: clip; }
    :root { --topbar-h: 3.2rem; }
    .kq-logo { height: 2.1rem; }
    .kq-topbar-inner { padding: 0 var(--s-3); }
    .kq-main { padding: var(--s-5) var(--s-4) var(--s-8); }
    .kq-page-title, .page-title { font-size: var(--t-title-1); }
    .kq-card-body, .page-card-body { padding: var(--s-4); }
    .page-card-header { padding: var(--s-4); }
    /* במסך צר הכל נערך בעמודה אחת. השורות נקבעות לפי סדר
       הסימון ולא במספר קבוע, כדי שבמסך ללא כפתור לא תישאר שורה ריקה. */
    .leads-head { grid-template-columns: minmax(0, 1fr); }
    .leads-search, .leads-status { flex: 1 1 100%; }
    .leads-new { grid-column: 1; grid-row: auto; justify-self: stretch; }
    .leads-showall { grid-column: 1; grid-row: auto; }
}

@media print {
    .kq-topbar, .kq-sidebar, .kq-nav-backdrop, .ld-toolbar { display: none; }
    .kq-content { margin: 0; }
    .kq-card, .page-card, .lead-card { box-shadow: none; border: 1px solid var(--separator); }
}