@charset "UTF-8";

/* ===========================================================================
   נועם מתלי כביסה — מערכת העיצוב
   ---------------------------------------------------------------------------
   "אורורה" (בר, 05.10.2026): דף לבן ומואר, נגיעות אור עדינות בפינות
   מהתכלת של הלוגו, לילך ומנטה; לוחות זכוכית חלבית; דיו כחול־לילה; וכחול
   קובלט אחד לפעולה הראשית. הגופן Assistant — ישר, ברור, עם משקלים אמיתיים.

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

   1. צבע אחד לפעולה.  הקובלט מסמן רק את מה שלוחצים עליו ראשון ואת
      הפריט הנבחר בתפריט. כל השאר בדיו כהה על זכוכית.
   2. זכוכית על אור.  כל משטח הוא לוח חלבי שקוף למחצה מעל רקע מואר, עם
      קו לבן עליון וצל ארוך ורך. זה כל הקישוט — אין מסגרות צבעוניות.
   3. גדול וברור.  טקסט גוף 17px ושום טקסט מתחת ל־15px; שדות וכפתורים
      גבוהים; לכל סטטוס מילה, צבע ואייקון משלו.

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


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

:root {
    color-scheme: light;

    /* --- אקסנט — קובלט ------------------------------------------------ */
    --accent:          #2D46D6;   /* לבן עליו 6.6:1 */
    --accent-pressed:  #2239BE;
    --accent-ink:      #1F33A8;   /* קישור בריחוף */
    --accent-tint:     #EEF0FD;
    --accent-tint-2:   #E0E5FB;
    --accent-on:       #FFFFFF;

    /* --- דיו ------------------------------------------------------------ */
    --heading:    #0F1534;
    --label:      #0F1534;   /* 17.6:1 על לבן */
    --label-2:    #475071;   /* 8.3:1 */
    --label-3:    #5B6487;   /* 6.0:1 — אייקונים, טקסט מקום */
    --label-soft: #2A3254;

    /* --- משטחים ---------------------------------------------------------
       הזכוכית שקופה למחצה; מה שמאחוריה הוא הלבן והאור של הרקע. */
    --bg:            #FFFFFF;
    --surface:       #FFFFFF;
    --glass:         rgba(255, 255, 255, .66);
    --glass-strong:  rgba(255, 255, 255, .86);
    --glass-field:   rgba(255, 255, 255, .92);
    --glass-edge:    rgba(255, 255, 255, .9);
    --glass-blur:    blur(18px) saturate(150%);
    --surface-2:     rgba(229, 232, 245, .66);   /* "באר" — תיבה פנימית */
    --fill:          rgba(15, 21, 52, .05);
    --fill-strong:   rgba(15, 21, 52, .09);

    /* --- קווים ---------------------------------------------------------- */
    --separator:  rgba(15, 21, 52, .08);
    --border:     rgba(15, 21, 52, .16);
    --field-edge: #8A90AA;
    --field-edge-hover: #475071;
    --focus-ring: 0 0 0 3px rgba(45, 70, 214, .28);

    /* --- צבעים סמנטיים ---------------------------------------------------
       כל תווית: מילוי רך, קו דק בגוון שלה, טקסט כהה מאותו גוון. */
    --violet:      #5B33C7;  --violet-tint: #EFEAFF;
    --amber:       #8A5300;  --amber-tint:  #FFF1D6;
    --green:       #0B6B4A;  --green-tint:  #DDF5EC;
    --rose:        #A3204A;  --rose-tint:   #FDE8EE;
    --slate:       #3A4262;  --slate-tint:  #E9EBF2;
    --clay:        #9A4310;  --clay-tint:   #FCEBDD;
    --green-on:    #FFFFFF;
    --green-edge:  rgba(11, 107, 74, .22);
    --orange:      #8A5300;  --orange-tint: #FFF1D6;  --orange-edge: rgba(138, 83, 0, .22);
    --red:         #B4234F;  --red-on: #FFFFFF;  --red-tint: #FDEEF2;  --red-edge: rgba(180, 35, 79, .32);
    --gray-tint:   #E9EBF2;  --gray-edge: rgba(58, 66, 98, .2);

    /* --- טיפוגרפיה ------------------------------------------------------ */
    --font: 'Assistant', 'Segoe UI', system-ui, sans-serif;

    --t-large-title: 2.5rem;     /* 40 */
    --t-title-1:     1.75rem;    /* 28 */
    --t-title-2:     1.4375rem;  /* 23 */
    --t-title-3:     1.25rem;    /* 20 */
    --t-headline:    1.125rem;   /* 18 */
    --t-body:        1rem;       /* 16 */
    --t-callout:     .9375rem;   /* 15 */
    --t-subhead:     .9375rem;   /* 15 */
    --t-footnote:    .9375rem;   /* 15 — לא פחות: ללקוח קשה לקרוא טקסט קטן */
    --t-caption:     .9375rem;   /* 15 */

    /* --- ריווח ---------------------------------------------------------- */
    --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: 10px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 24px;  --r-2xl: 28px;  --r-pill: 999px;

    /* --- הצללה ---------------------------------------------------------- */
    --shadow:     inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px rgba(15, 21, 52, .06),
                  0 1px 2px rgba(15, 21, 52, .04), 0 18px 38px -24px rgba(15, 21, 52, .3);
    --shadow-panel: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px rgba(15, 21, 52, .06),
                  0 1px 2px rgba(15, 21, 52, .04), 0 22px 48px -28px rgba(15, 21, 52, .3);
    --shadow-lg:  0 0 0 1px rgba(15, 21, 52, .08), 0 24px 48px -20px rgba(15, 21, 52, .35);
    --shadow-btn: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(15, 21, 52, .2),
                  0 14px 26px -14px rgba(45, 70, 214, .9);
    --shadow-ghost: 0 1px 2px rgba(15, 21, 52, .06);

    /* --- מבנה ----------------------------------------------------------- */
    --topbar-h:  4rem;
    --dock-w:    13.5rem;  /* 216 — אייקון ושם באותה שורה, ולוגו גדול */
    --content-max: 100rem;
}

/* ניגודיות מוגברת: הזכוכית נעשית אטומה והקווים כהים */
@media (prefers-contrast: more) {
    :root {
        --glass: rgba(255, 255, 255, .97);
        --glass-strong: #FFFFFF;
        --label-2: #2E3657;
        --label-3: #3E4668;
        --separator: rgba(15, 21, 52, .3);
        --border: rgba(15, 21, 52, .5);
        --field-edge: #475071;
    }
}


/* ===========================================================================
   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: #2D46D6;
    --bs-primary-rgb: 45, 70, 214;
    --bs-link-color: #2D46D6;
    --bs-link-color-rgb: 45, 70, 214;
    --bs-link-hover-color: #1F33A8;
    --bs-link-hover-color-rgb: 31, 51, 168;
    --bs-body-color: var(--label);
    --bs-body-font-family: var(--font);
    --bs-secondary-color: var(--label-2);
    --bs-border-color: var(--border);
    --bs-focus-ring-color: rgba(45, 70, 214, .28);
}


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

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

/* האור בפינות: לילך ותכלת למעלה משמאל, מנטה ותכלת למטה מימין. קבוע
   למסך ולא לדף, כך שהוא נשאר בפינות גם כשגוללים. */
body {
    font-family: var(--font);
    font-size: var(--t-body);
    line-height: 1.5;
    color: var(--label);
    background-color: var(--bg);
    background-image:
        radial-gradient(720px 520px at 0% 0%, rgba(220, 214, 255, .72), rgba(220, 214, 255, 0) 65%),
        radial-gradient(560px 420px at 18% -8%, rgba(180, 227, 244, .55), rgba(180, 227, 244, 0) 66%),
        radial-gradient(700px 520px at 100% 100%, rgba(211, 244, 230, .85), rgba(211, 244, 230, 0) 64%),
        radial-gradient(520px 380px at 84% 106%, rgba(180, 227, 244, .5), rgba(180, 227, 244, 0) 66%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--heading);
}
b, strong { font-weight: 700; }

a { color: var(--accent); text-decoration: none; }
/* בלי קו תחתון בשום מקום — גם לא בריחוף. הצבע הוא שמסמן קישור. */
a, a:hover, a:focus { text-decoration: none; }
a:hover { color: var(--accent-ink); }

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

::selection { background: #D9DEFA; color: var(--heading); }

/* מיקוד מקלדת אחיד ובולט. :where שומר על משקל אפס כדי שלא יגבר על כלום. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    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;
}

/* לוח זכוכית — המשטח היחיד במערכת. הטשטוש עצמו רק על המשטחים הגדולים
   והקבועים: על עשרות כרטיסים בלוח הוא היה מאט את הגלילה במחשב חלש, ומאחורי
   כרטיס יש ממילא לבן. */
.kq-card, .page-card, .lead-card, .users-list--card, .ar-row {
    background: var(--glass);
}
.glass, .kq-band, .kq-dock {
    background: var(--glass);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}


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

/* --- הסרגל העליון — רק במסך צר ---------------------------------------- */
.kq-topbar {
    display: none;
    position: sticky;
    top: 0;
    z-index: 1050;
    background: var(--glass-strong);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: 0 1px 0 var(--separator), 0 10px 30px -24px rgba(15, 21, 52, .4);
}
.kq-topbar-inner {
    height: var(--topbar-h);
    padding: 0 var(--s-4);
    display: flex;
    align-items: center;
    gap: var(--s-3);
}

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

.kq-burger {
    width: 3rem; height: 3rem;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--glass-field); color: var(--label);
    box-shadow: var(--shadow-ghost);
    transition: background .16s ease, border-color .16s ease;
}
.kq-burger:hover { background: #FFFFFF; border-color: var(--label); }
.kq-burger svg { width: 1.5rem; height: 1.5rem; }

/* --- פס הניווט ---------------------------------------------------------
   פס רחב בצד ימין: הלוגו, ומתחתיו שורות של אייקון ושם. אותן שורות גם
   במגירה בטלפון (ראו "התאמה"). */
.kq-dock {
    position: fixed;
    top: 0; bottom: 0;
    inset-inline-start: 0;      /* ב-RTL זהו הקצה הימני */
    width: var(--dock-w);
    z-index: 1045;
    box-sizing: border-box;
    display: flex; flex-direction: column; align-items: stretch;
    padding: 1.5rem .75rem 1rem;
    border-inline-end: 1px solid var(--separator);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .9), -18px 0 40px -34px rgba(15, 21, 52, .35);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    transition: transform .22s ease;
}
.kq-dock::-webkit-scrollbar { display: none; }

/* הלוגו לבדו — בלי מסגרת, בלי רקע ובלי צל — ובכל רוחב הפס, שיראו אותו. */
.kq-dock-logo {
    flex: none;
    box-sizing: border-box;
    width: 100%;
    display: flex; align-items: center; justify-content: center;
    padding: 0 .25rem;
    background: none;
    border-radius: var(--r-md);
    box-shadow: none;
}
.kq-dock-logo:hover { text-decoration: none; box-shadow: none; }
.kq-dock-logo img { display: block; width: 100%; height: auto; }

.kq-dock-nav {
    flex: none;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--separator);
}
.kq-dock-nav ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; align-items: stretch; gap: .125rem;
}

/* פריט: אייקון ולידו השם, לכל רוחב הפס */
.kq-nav-link {
    box-sizing: border-box;
    width: 100%; min-height: 2.75rem;
    display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
    gap: .75rem;
    padding: .5rem .875rem;
    border: 0; border-radius: var(--r-sm);
    background: transparent;
    color: var(--label-2);
    font-size: var(--t-body); font-weight: 600; line-height: 1.2;
    text-align: start;
    transition: background-color .16s ease, color .16s ease;
}
.kq-nav-link:hover { background: rgba(15, 21, 52, .06); color: var(--label); text-decoration: none; }
.kq-nav-ico { display: inline-flex; color: var(--label-3); transition: color .16s ease; }
.kq-nav-ico svg { width: 1.25rem; height: 1.25rem; }
.kq-nav-link:hover .kq-nav-ico { color: var(--label); }
.kq-nav-link.active {
    background: var(--accent); color: var(--accent-on);
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 18px -10px rgba(45, 70, 214, .9);
}
.kq-nav-link.active .kq-nav-ico { color: var(--accent-on); }
.kq-nav-link.active:hover { background: var(--accent-pressed); color: var(--accent-on); }

/* --- החשבון בתחתית הפס -------------------------------------------------- */
.kq-dock-foot {
    margin-top: auto;
    padding-top: 1.5rem;
    width: 100%;
    display: flex; flex-direction: column; align-items: stretch; gap: .375rem;
    text-align: start;
}
.kq-dock-rule { display: block; width: 100%; height: 1px; margin: 0 0 .625rem; background: var(--separator); }
.kq-user { line-height: 1.25; max-width: 100%; padding: 0 .875rem .25rem; }
.kq-user-name {
    display: block;
    font-size: 1rem; font-weight: 800; color: var(--label);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kq-user-role { display: block; font-size: var(--t-subhead); font-weight: 600; color: var(--label-2); }
.kq-account form { margin: 0; }
.kq-dock-foot .kq-nav-link { cursor: pointer; }

/* --- כפתור אייקון ------------------------------------------------------ */
.kq-avatar {
    width: 2.25rem; height: 2.25rem; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--accent-tint); color: var(--accent);
    font-size: var(--t-footnote); font-weight: 700;
}
.kq-avatar-fallback { line-height: 1; }

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

/* הרקע החוסם — רק כשהמגירה פתוחה במסך צר. */
.kq-nav-backdrop {
    display: none;
    position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 1040;
    background: rgba(15, 21, 52, .32);
    overscroll-behavior: none; touch-action: none;
}

/* --- אזור התוכן -------------------------------------------------------- */
.kq-content {
    margin-inline-start: var(--dock-w);
    min-height: 100vh;
    box-sizing: border-box;
    display: flex; flex-direction: column;
    padding: 2rem 2.5rem 4rem;
}

/* לוח הכותרת: שם העמוד, הפעולה הראשית שלו, ומתחת לקו — לשוניות וחיפוש. */
.kq-band {
    /* הזכוכית (backdrop-filter) סוגרת את הלוח בשכבה משלו, ובלי z-index הרשימה
       הנפתחת שבו (סינון הסטטוסים) נפתחה מתחת לכרטיסים, ולחיצה עליה פתחה ליד. */
    position: relative; z-index: 5;
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    box-sizing: border-box;
    border: 1px solid var(--glass-edge);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-panel);
}
/* רשימה שנפתחת מהלוח אל מעל הכרטיסים — אטומה, כי הטשטוש לא עובד בתוך זכוכית */
.kq-band .dropdown-menu { background: #FFFFFF; }
.kq-band-inner {
    padding: 1.75rem 2rem 1.5rem;
    display: flex; flex-direction: column; gap: 1.25rem;
}
.kq-band-inner > .kq-page-head:not(:last-child) {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--separator);
}

.kq-main {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-top: 1.5rem;
    flex: 1 0 auto;
}

/* --- כותרת עמוד -------------------------------------------------------- */
.kq-page-head, .page-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem 1.5rem; flex-wrap: wrap;
}
.page-head { margin-bottom: var(--s-6); }
.kq-page-title, .page-title {
    margin: 0;
    font-size: var(--t-large-title);
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.015em;
    color: var(--heading);
}
.kq-page-sub, .page-subtitle {
    margin: .5rem 0 0;
    font-size: 1rem; font-weight: 600;
    color: var(--label-2);
}
.kq-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.kq-page-actions .btn { min-height: 3rem; padding: 0 1.375rem; font-size: 1rem; }
.kq-page-actions .btn > svg { width: 1.25rem; height: 1.25rem; }
/* מי שאין לו הרשאת כתיבה מקבל את אותו עמוד בלי הכפתור — ואז אין תיבה ריקה */
.kq-page-actions:not(:has(*)) { display: none; }

/* קישור החזרה שמעל הכותרת בכרטיסים */
.kq-back {
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 2.75rem;
    font-size: var(--t-callout); font-weight: 700;
    color: var(--accent);
}
.kq-back svg { width: 1.25rem; height: 1.25rem; }
.kq-back:hover { color: var(--accent-ink); }


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

/* --- כרטיס -------------------------------------------------------------
   לוח זכוכית: קו לבן דק מבפנים, טבעת דיו כמעט שקופה, וצל ארוך ורך. */
.kq-card, .page-card {
    border: 1px solid var(--glass-edge);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-panel);
}
.kq-card-body, .page-card-body { padding: 1.75rem 2rem; }
/* חלק מהמסכים שמים תוכן ישירות בכרטיס ולא בגוף שלו, ולכן הריפוד חוזר
   אל הכרטיס עצמו — אך לא כשיש לו כותרת או גוף משלו. */
.page-card { padding: 1.75rem 2rem; }
.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: 1.75rem 2rem;
}
.page-card-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-4); flex-wrap: wrap;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--separator);
}
.page-card-header h2, .page-card-header .h6 {
    margin: 0; font-size: var(--t-title-2); font-weight: 800; color: var(--heading);
}
.page-card + .page-card, .kq-card + .kq-card { margin-top: var(--s-5); }

/* --- כפתורים -----------------------------------------------------------
   שלוש דרגות: קובלט מלא לפעולה הראשית, זכוכית עם קו דק למשנית, טקסט
   בלבד לשלישית. כשכל הכפתורים נראים אותו דבר, שום דבר לא מוביל. */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .5625rem;
    min-height: 2.75rem;
    border: 1px solid transparent; border-radius: var(--r-md);
    padding: .375rem 1.125rem;
    font-size: var(--t-body); font-weight: 700; line-height: 1.2;
    transition: background-color .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.btn:active { transform: translateY(.5px); }
.btn > svg { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }

.btn-brand, .btn-kq, .btn-primary {
    background: var(--accent); color: var(--accent-on); border-color: var(--accent);
    box-shadow: var(--shadow-btn);
}
.btn-brand:hover, .btn-kq:hover, .btn-primary:hover,
.btn-brand:focus-visible, .btn-kq:focus-visible {
    background: var(--accent-pressed); border-color: var(--accent-pressed); color: var(--accent-on);
}

.btn-soft, .btn-outline-secondary, .btn-secondary {
    background: var(--glass-strong); color: var(--label); border-color: var(--border);
    box-shadow: var(--shadow-ghost);
}
.btn-soft:hover, .btn-outline-secondary:hover, .btn-secondary:hover {
    background: #FFFFFF; color: var(--label); border-color: var(--label);
}

.btn-link { background: none; color: var(--accent); padding-inline: var(--s-2); border-color: transparent; text-decoration: none; }
.btn-link:hover { color: var(--accent-ink); text-decoration: none; background: var(--accent-tint); }

/* "סיום העבודה" (הותקן, שולם) — מסגרת דיו מלאה, ובריחוף מתמלאת. חזקה
   מכפתור משני ושקטה מהפעולה הראשית. */
.btn-green {
    background: var(--glass-field); color: var(--label); border: 1.5px solid var(--label);
}
.btn-green:hover { background: var(--label); color: #FFFFFF; border-color: var(--label); }

.btn-danger { background: var(--red); color: var(--red-on); border-color: var(--red); }
.btn-danger:hover { background: #941C41; border-color: #941C41; color: var(--red-on); }
.btn-outline-danger { background: var(--glass-strong); color: var(--red); border-color: var(--red-edge); box-shadow: var(--shadow-ghost); }
.btn-outline-danger:hover { background: var(--red-tint); color: var(--red); border-color: var(--red); }

.btn:disabled, .btn.disabled { opacity: .5; box-shadow: none; }

/* Bootstrap מצייר את מצבי הלחיצה, המיקוד והנטרול מהמשתנים שלו, ובכללים
   חזקים משלנו. בלי המשתנים האלה כפתור נלחץ הופך לרגע שקוף. */
.btn-brand, .btn-kq, .btn-primary {
    --bs-btn-color: var(--accent-on); --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color: var(--accent-on); --bs-btn-hover-bg: var(--accent-pressed); --bs-btn-hover-border-color: var(--accent-pressed);
    --bs-btn-active-color: var(--accent-on); --bs-btn-active-bg: var(--accent-pressed); --bs-btn-active-border-color: var(--accent-pressed);
    --bs-btn-disabled-color: var(--accent-on); --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent);
}
.btn-soft, .btn-outline-secondary, .btn-secondary {
    --bs-btn-color: var(--label); --bs-btn-bg: var(--glass-strong); --bs-btn-border-color: var(--border);
    --bs-btn-hover-color: var(--label); --bs-btn-hover-bg: #FFFFFF; --bs-btn-hover-border-color: var(--label);
    --bs-btn-active-color: var(--label); --bs-btn-active-bg: #F1F2F7; --bs-btn-active-border-color: var(--label);
    --bs-btn-disabled-color: var(--label); --bs-btn-disabled-bg: var(--glass-strong); --bs-btn-disabled-border-color: var(--border);
}
.btn-link {
    --bs-btn-color: var(--accent); --bs-btn-bg: transparent; --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--accent-ink); --bs-btn-hover-bg: var(--accent-tint); --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--accent-ink); --bs-btn-active-bg: var(--accent-tint-2); --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--accent); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: transparent;
}
.btn-green {
    --bs-btn-color: var(--label); --bs-btn-bg: var(--glass-field); --bs-btn-border-color: var(--label);
    --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: var(--label); --bs-btn-hover-border-color: var(--label);
    --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: #050817; --bs-btn-active-border-color: #050817;
    --bs-btn-disabled-color: var(--label); --bs-btn-disabled-bg: var(--glass-field); --bs-btn-disabled-border-color: var(--label);
}
.btn-danger {
    --bs-btn-color: var(--red-on); --bs-btn-bg: var(--red); --bs-btn-border-color: var(--red);
    --bs-btn-hover-color: var(--red-on); --bs-btn-hover-bg: #941C41; --bs-btn-hover-border-color: #941C41;
    --bs-btn-active-color: var(--red-on); --bs-btn-active-bg: #7E1737; --bs-btn-active-border-color: #7E1737;
    --bs-btn-disabled-color: var(--red-on); --bs-btn-disabled-bg: var(--red); --bs-btn-disabled-border-color: var(--red);
}
.btn-outline-danger {
    --bs-btn-color: var(--red); --bs-btn-bg: var(--glass-strong); --bs-btn-border-color: var(--red-edge);
    --bs-btn-hover-color: var(--red); --bs-btn-hover-bg: var(--red-tint); --bs-btn-hover-border-color: var(--red);
    --bs-btn-active-color: var(--red); --bs-btn-active-bg: #FBE0E8; --bs-btn-active-border-color: var(--red);
    --bs-btn-disabled-color: var(--red); --bs-btn-disabled-bg: var(--glass-strong); --bs-btn-disabled-border-color: var(--red-edge);
}
/* Bootstrap מוחק את קו המיקוד של כפתור ושם במקומו צל שלא מוגדר אצלנו. */
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* קישור שנראה ככפתור אינו מקבל קו תחתון בריחוף, כמו כל כפתור אחר. */
a.btn:hover, a.btn:focus-visible { text-decoration: none; }

.btn-sm {
    min-height: 2.5rem;
    padding: .25rem .875rem;
    font-size: var(--t-callout);
    border-radius: 12px;
}
.btn-sm > svg { width: 1.125rem; height: 1.125rem; }

/* --- שדות --------------------------------------------------------------
   גבוהים, עם קו שרואים, על לבן כמעט אטום. תווית מעל השדה תמיד. */
.form-label {
    display: block;
    margin-bottom: .5rem;
    font-size: var(--t-body); font-weight: 700; color: var(--label);
}
.form-control, .form-select, .input-group-text, textarea.form-control {
    min-height: 3rem;
    border-radius: var(--r-md);
    border: 1px solid var(--field-edge);
    background-color: var(--glass-field);
    color: var(--label);
    padding: .5rem 1rem;
    font-size: var(--t-body);
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.form-control:hover, .form-select:hover { border-color: var(--field-edge-hover); }
.form-control::placeholder { color: var(--label-3); opacity: 1; }
.form-control:focus, .form-select:focus {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
    background-color: #FFFFFF;
    color: var(--label);
}
.form-control:disabled, .form-control[readonly] { background-color: var(--surface-2); border-color: var(--border); }
.form-control-sm, .form-select-sm { min-height: 2.75rem; font-size: var(--t-callout); padding: .25rem .75rem; }
/* תפריט בחירה מקורי — החץ בצד השמאלי (סוף השורה ב-RTL). */
.form-select { padding-inline-end: 2.75rem; background-position: left 1rem center; }

.form-control[type="file"] { padding: .3125rem .375rem; overflow: hidden; cursor: pointer; }
.form-control[type="file"]::file-selector-button {
    min-height: 2.5rem;
    margin: 0; margin-inline-end: .875rem;
    padding: 0 1rem;
    background: rgba(15, 21, 52, .07); color: var(--label);
    border: 0; border-radius: var(--r-sm);
    font: inherit; font-size: var(--t-callout); font-weight: 700;
}
.form-control[type="file"]:hover:not(:disabled):not([readonly])::file-selector-button {
    background: rgba(15, 21, 52, .12); color: var(--label);
}

.form-text { color: var(--label-2); font-size: var(--t-footnote); }
.text-danger { color: var(--red) !important; }
.text-muted, .text-secondary { color: var(--label-2) !important; }
/* רשת הטופס.
   הסימון כתוב עם .row ו-.col-* של בוטסטראפ. display:contents מוציא את
   העטיפות האלה מהזרימה, כך שהשדות עצמם הופכים לתאים ברשת אחת שמגיבה
   למכל — ולכן היא מסתדרת מחדש גם כשהתפריט נפתח, בלי שאף שאילתת מדיה
   תשתנה. שדות ארוכים (טקסט חופשי, כותרות, הודעות) תופסים שורה מלאה. */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    gap: 0 var(--s-6);
    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: 800;
    color: var(--heading);
    margin: var(--s-6) 0 var(--s-3);
}
.form-grid > :is(h2, h3, .h6):first-child { margin-top: 0; }
.form-check { display: flex; align-items: center; gap: .625rem; min-height: 2.75rem; padding-inline-start: 0; }
.form-check .form-check-input { float: none; margin: 0; }
.form-check-input {
    flex: none;
    width: 1.375rem; height: 1.375rem;
    border: 1.5px solid var(--field-edge);
    border-radius: 6px;
    cursor: pointer;
}
.form-check-input[type="radio"] { border-radius: 50%; }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.form-check-label { font-size: var(--t-body); font-weight: 600; cursor: pointer; }
.form-switch .form-check-input { width: 2.75rem; border-radius: var(--r-pill); }
.kq-subform-title { font-size: var(--t-title-3); font-weight: 800; color: var(--heading); margin: 0 0 var(--s-4); }

/* --- תפריט נפתח --------------------------------------------------------
   רכיב אחד לכל הבחירות במערכת. נראה כמו שדה; התפריט תמיד ברוחב השדה. */
.field-select { position: relative; }
.field-select__label {
    display: block; margin-bottom: .5rem;
    font-size: var(--t-body); font-weight: 700;
}
/* בתוך הכפתור התווית היא הערך שנבחר, לא כותרת מעליו */
.field-select__toggle .field-select__label { display: inline; margin: 0; font-size: inherit; font-weight: inherit; }
.field-select__toggle {
    display: flex; align-items: center; justify-content: space-between; gap: .625rem;
    width: 100%;
    min-height: 3rem;
    padding: .5rem 1rem;
    border: 1px solid var(--field-edge); border-radius: var(--r-md);
    background: var(--glass-field); color: var(--label);
    font-size: var(--t-body); font-weight: 700; text-align: start;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.field-select__toggle:hover { border-color: var(--field-edge-hover); background: #FFFFFF; }
.field-select__toggle[aria-expanded="true"] {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
    background: #FFFFFF;
}
.field-select__chevron { width: 1.125rem; height: 1.125rem; color: var(--label-2); flex: 0 0 auto; }

.field-select__menu {
    width: 100%; min-width: 100%; max-width: 100%;
    --bs-dropdown-min-width: 100%;
}
.dropdown-menu {
    border: 1px solid var(--glass-edge); border-radius: 16px;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    box-shadow: var(--shadow-lg);
    padding: .5rem;
}
.dropdown-item {
    border-radius: var(--r-sm);
    padding: .625rem .875rem;
    font-size: var(--t-body); font-weight: 600;
    color: var(--label);
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--fill); color: var(--label); }
.dropdown-item.is-selected { background: rgba(15, 21, 52, .05); color: var(--label); font-weight: 700; }

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

/* שורת הכלים יושבת בלוח הכותרת: החיפוש מתמתח, הסינון ותיבת "הצג את
   הכל" אחריו באותה שורה, וכשאין מקום — שורה נוספת. */
.leads-head {
    display: flex; flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
}
.leads-filter {
    display: flex;
    align-items: center;
    gap: .75rem 1rem;
    flex-wrap: wrap;
    flex: 0 1 auto;
    min-width: 0;
}

/* כפתור יצירה שעוד יושב בשורת הכלים (עמוד בלי לוח פעולות) — בקצה. */
.leads-new { margin-inline-start: auto; }

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

.leads-search { position: relative; flex: 0 1 32.5rem; width: 32.5rem; min-width: 0; max-width: 100%; }
.leads-search__icon {
    position: absolute; inset-inline-start: 1rem; top: 50%;
    transform: translateY(-50%);
    width: 1.375rem; height: 1.375rem;
    color: var(--label-2); pointer-events: none;
}
.leads-search__input {
    width: 100%;
    padding: .5rem 1rem;
    padding-inline-start: 3.125rem;
    border: 1px solid var(--field-edge); border-radius: var(--r-md);
    background: var(--glass-field); color: var(--label);
    font-size: var(--t-body);
    -webkit-appearance: none; appearance: none;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.leads-search__input:hover { border-color: var(--field-edge-hover); }
.leads-search__input::placeholder { color: var(--label-3); opacity: 1; }
.leads-search__input:focus {
    outline: 0; border-color: var(--accent); background: #FFFFFF;
    box-shadow: var(--focus-ring);
}
.leads-search__input::-webkit-search-cancel-button { cursor: pointer; }
.leads-status { flex: 0 0 auto; min-width: 15rem; max-width: 100%; }

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

/* --- כרטיס ליד ---------------------------------------------------------
   למעלה המצב ומתי נוצר; השם בגדול; המוצר; קו; טלפון ועיר; ובתחתית —
   בבאר פנימית — מי כתב אחרון, מתי ומה. הכרטיס כולו נלחץ. */
.lead-card {
    /* חובה. הקישור שבתוך הכרטיס הוא .stretched-link, שנמתח אל האב הממוקם
       הקרוב אליו. בלי זה הוא נמתח אל body — כלומר לחיצה בכל מקום בעמוד
       פותחת את הליד האחרון, והכרטיס עצמו כמעט לא נלחץ. */
    position: relative;
    display: flex; flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    padding: 1.25rem;
    border: 1px solid var(--glass-edge);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease;
}
.lead-card:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px rgba(15, 21, 52, .1),
                0 2px 4px rgba(15, 21, 52, .05), 0 28px 52px -26px rgba(15, 21, 52, .36);
    text-decoration: none;
}
.lead-card:hover .lead-name a { color: var(--accent); }
.lead-card:focus-within { box-shadow: 0 0 0 3px var(--accent), var(--shadow); }
.lead-card :focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .lead-card, .lead-card:hover { transition: none; transform: none; } }

.lead-top {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: .5rem .75rem;
}
.lead-pills { display: flex; flex-wrap: wrap; gap: .375rem; }
.lead-created { font-size: var(--t-subhead); font-weight: 600; color: var(--label-2); white-space: nowrap; }
.lead-name {
    margin: .75rem 0 0;
    font-size: var(--t-title-3); line-height: 1.2; font-weight: 800;
    overflow-wrap: anywhere;
}
.lead-name a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--heading); }
.lead-product { margin: 0; font-size: var(--t-body); font-weight: 600; color: var(--label-soft); }
.lead-divider { height: 1px; margin: .875rem 0 .75rem; background: var(--separator); }

/* טלפון, עיר, מועד ההתקנה והמתקין — בשורה אחת שנשברת, אייקון לכל אחד. */
.lead-facts {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; align-items: center; gap: .375rem 1.125rem;
    font-size: var(--t-callout); line-height: 1.35; font-weight: 600; color: var(--label);
}
.lead-facts li { display: inline-flex; align-items: center; gap: .4375rem; min-width: 0; overflow-wrap: anywhere; }
.lead-facts svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--label-3); }
.lead-phone, .lead-stamp { white-space: nowrap; }
.lead-install.is-due, .lead-install.is-due svg { color: var(--red); }
.lead-note {
    margin: .625rem 0 0;
    display: flex; align-items: flex-start; gap: .4375rem;
    font-size: var(--t-callout); line-height: 1.45; color: var(--label-soft);
    overflow-wrap: anywhere;
}
.lead-note svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: .125rem; color: var(--label-3); }

/* התיעוד האחרון — בבאר פנימית בתחתית הכרטיס: מי כתב, מתי, ומה. */
.lead-bottom { margin-top: auto; padding-top: 1rem; }
.lead-last {
    padding: .75rem .875rem .8125rem;
    background: var(--surface-2);
    border: 1px solid rgba(15, 21, 52, .05);
    border-radius: var(--r-md);
    box-shadow: inset 0 1px 3px rgba(15, 21, 52, .08);
}
.lead-last-head {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: .125rem .5rem;
    font-size: var(--t-subhead); line-height: 1.4; color: var(--label-2);
}
.lead-last-who { display: inline-flex; align-items: center; gap: .375rem; font-weight: 800; color: var(--label); }
.lead-last-who svg { width: 1rem; height: 1rem; flex: none; }
.lead-last-who--agent svg { color: var(--violet); }
.lead-last-who--followup svg { color: var(--green); }
.lead-last-who--payment svg { color: var(--accent); }
.lead-last-when { font-weight: 600; white-space: nowrap; direction: ltr; }
.lead-last-note {
    margin: .375rem 0 0;
    font-size: var(--t-callout); line-height: 1.45; color: var(--label);
    white-space: pre-wrap; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}

/* --- תווית מצב ---------------------------------------------------------
   "אל תסתמך על צבע בלבד". כל תווית נושאת מילה ואייקון, והצבע רק מחזק
   אותם. מילוי רך, טבעת דקה בגוון שלה, וטקסט כהה מאותו גוון. */
.kq-status, .lead-pill {
    display: inline-flex; align-items: center; gap: .375rem;
    min-height: 1.875rem; box-sizing: border-box;
    padding: .1875rem .625rem .1875rem .6875rem;
    border: 0;
    border-radius: 8px;
    background: var(--slate-tint); color: var(--slate);
    box-shadow: inset 0 0 0 1px rgba(58, 66, 98, .2);
    font-size: var(--t-subhead); font-weight: 700; line-height: 1.2; white-space: nowrap;
}
.kq-status--new,       .lead-pill--new       { background: var(--heading); color: #FFFFFF; box-shadow: 0 4px 10px -6px rgba(15, 21, 52, .6); }
.kq-status--progress,  .lead-pill--progress  { background: var(--amber-tint); color: var(--amber); box-shadow: inset 0 0 0 1px rgba(138, 83, 0, .2); }
.kq-status--ok,        .lead-pill--ok        { background: var(--green-tint); color: var(--green); box-shadow: inset 0 0 0 1px rgba(11, 107, 74, .2); }
.kq-status--bad,       .lead-pill--bad       { background: var(--rose-tint); color: var(--rose); box-shadow: inset 0 0 0 1px rgba(163, 32, 74, .18); }

/* השמות שהקוד באמת פולט (StatusPillClass / PaymentPillClass).
   ליד: חדש = דיו מלא (מה שצריך לטפל בו עכשיו), בטיפול = סגול,
   צריך לחשוב = ענבר, כניסה עתידית = ירוק, המחיר לא מתאים = ורוד־יין,
   לא מעוניין = אפור, לא מגיעים לעיר = חימר, אין מענה = קו מקווקו. */
.lead-pill-new         { background: var(--heading); color: #FFFFFF; box-shadow: 0 4px 10px -6px rgba(15, 21, 52, .6); }
.lead-pill-inprogress  { background: var(--violet-tint); color: var(--violet); box-shadow: inset 0 0 0 1px rgba(91, 51, 199, .18); }
.lead-pill-waiting     { background: var(--amber-tint);  color: var(--amber);  box-shadow: inset 0 0 0 1px rgba(138, 83, 0, .2); }
.lead-pill-future      { background: var(--green-tint);  color: var(--green);  box-shadow: inset 0 0 0 1px rgba(11, 107, 74, .2); }
.lead-pill-price       { background: var(--rose-tint);   color: var(--rose);   box-shadow: inset 0 0 0 1px rgba(163, 32, 74, .18); }
.lead-pill-lost        { background: var(--slate-tint);  color: var(--slate);  box-shadow: inset 0 0 0 1px rgba(58, 66, 98, .2); }
.lead-pill-outofarea   { background: var(--clay-tint);   color: var(--clay);   box-shadow: inset 0 0 0 1px rgba(154, 67, 16, .2); }
.lead-pill-noanswer    { background: #FFFFFF; color: #34405E; box-shadow: inset 0 0 0 1.5px #6B7392; }
/* הזמנה: חדש = דיו (לתאם), תואם התקנה = סגול (ממתין למועד), הותקן =
   ענבר (לגבות), הושלמה = ירוק. תשלום: לא שולם = ענבר, שולם = ירוק. */
.lead-pill-coordinated { background: var(--violet-tint); color: var(--violet); box-shadow: inset 0 0 0 1px rgba(91, 51, 199, .18); }
.lead-pill-installed   { background: var(--amber-tint);  color: var(--amber);  box-shadow: inset 0 0 0 1px rgba(138, 83, 0, .2); }
.lead-pill-completed   { background: var(--green-tint);  color: var(--green);  box-shadow: inset 0 0 0 1px rgba(11, 107, 74, .2); }
.lead-pill-unpaid      { background: var(--amber-tint);  color: var(--amber);  box-shadow: inset 0 0 0 1px rgba(138, 83, 0, .2); }
.lead-pill-paid        { background: var(--green-tint);  color: var(--green);  box-shadow: inset 0 0 0 1px rgba(11, 107, 74, .2); }

/* אייקון בכל תווית — מצויר במסכה, ולכן הוא בצבע הטקסט. */
.lead-pill[class*="lead-pill-"]::before {
    content: ""; flex: none;
    width: 1rem; height: 1rem;
    background: currentColor;
    -webkit-mask: var(--pill-ico) center / contain no-repeat;
    mask: var(--pill-ico) center / contain no-repeat;
}

/* האייקון של כל מצב */
.lead-pill-new { --pill-ico: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='3.2' fill='%23000' stroke='none'/%3E%3C/svg%3E"); }
.lead-pill-inprogress { --pill-ico: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-2.64-6.36'/%3E%3Cpath d='M21 3v6h-6'/%3E%3C/svg%3E"); }
.lead-pill-waiting { --pill-ico: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2.5h12M6 21.5h12'/%3E%3Cpath d='M7.5 2.5c0 4.5 4.5 6 4.5 9.5s-4.5 5-4.5 9.5M16.5 2.5c0 4.5-4.5 6-4.5 9.5s4.5 5 4.5 9.5'/%3E%3C/svg%3E"); }
.lead-pill-future { --pill-ico: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='17' rx='2.5'/%3E%3Cpath d='M8 2.5v4M16 2.5v4M3 10h18'/%3E%3C/svg%3E"); }
.lead-pill-price { --pill-ico: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.6 2.6A2 2 0 0 0 11.2 2H4a2 2 0 0 0-2 2v7.2a2 2 0 0 0 .6 1.4l8.7 8.7a2.4 2.4 0 0 0 3.4 0l6.6-6.6a2.4 2.4 0 0 0 0-3.4z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E"); }
.lead-pill-lost { --pill-ico: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15 9-6 6M9 9l6 6'/%3E%3C/svg%3E"); }
.lead-pill-outofarea { --pill-ico: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 1.6-.6 3.3-1.5 4.8M6 4.6A8 8 0 0 1 20 10M4.3 7.2A8 8 0 0 0 4 10c0 6 8 12 8 12s2-1.5 4.2-3.8'/%3E%3Cpath d='m3 3 18 18'/%3E%3C/svg%3E"); }
.lead-pill-noanswer { --pill-ico: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3Cpath d='m16 2 6 6M22 2l-6 6'/%3E%3C/svg%3E"); }
.lead-pill-coordinated { --pill-ico: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='17' rx='2.5'/%3E%3Cpath d='M8 2.5v4M16 2.5v4M3 10h18'/%3E%3Cpath d='m9 15.5 2 2 4-4'/%3E%3C/svg%3E"); }
.lead-pill-installed { --pill-ico: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.8-3.8a6 6 0 0 1-7.9 7.9l-6.9 6.9a2.1 2.1 0 0 1-3-3l6.9-6.9a6 6 0 0 1 7.9-7.9l-3.8 3.8z'/%3E%3C/svg%3E"); }
.lead-pill-completed { --pill-ico: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }
.lead-pill-unpaid { --pill-ico: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.lead-pill-paid { --pill-ico: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }

.badge-role, .badge-state-on, .badge-state-off, .badge-locked {
    display: inline-flex; align-items: center;
    min-height: 1.875rem; box-sizing: border-box;
    padding: .1875rem .6875rem;
    border-radius: 8px;
    font-size: var(--t-subhead); font-weight: 700; line-height: 1.2;
}
.badge-role      { background: rgba(15, 21, 52, .06); color: var(--label); box-shadow: inset 0 0 0 1px rgba(15, 21, 52, .12); }
.badge-state-on  { background: var(--green-tint); color: var(--green); box-shadow: inset 0 0 0 1px rgba(11, 107, 74, .2); }
.badge-state-off { background: var(--slate-tint); color: var(--slate); box-shadow: inset 0 0 0 1px rgba(58, 66, 98, .2); }
.badge-locked    { background: var(--red-tint); color: var(--red); box-shadow: inset 0 0 0 1px var(--red-edge); }

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

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

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

@container (min-width: 56rem) {
    .ld-side { flex: 7 1 0; }
    .ld-work { flex: 5 1 0; }
    .ld-work > .kq-card:last-child { flex: 1 1 auto; }
}

.ld-card-title { font-size: var(--t-title-2); font-weight: 800; color: var(--heading); margin: 0 0 1.25rem; }

/* לשוניות משנה בתוך מסך ("שיחות" / "רשימת הסרה", "פולואפים פעילים" / "הגדרות").
   מתג מקטעים: מסילה עמומה, והלשונית הנבחרת לבנה ובולטת. */
.kq-subtabs {
    display: inline-flex; align-self: flex-start; flex-wrap: wrap; gap: .25rem;
    max-width: 100%; box-sizing: border-box;
    padding: .25rem;
    background: rgba(15, 21, 52, .05);
    border-radius: 16px;
}
.kq-subtab {
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 2.75rem;
    padding: 0 1.125rem; text-decoration: none;
    color: var(--label-2); font-size: var(--t-body); font-weight: 700;
    border-radius: 12px;
    transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.kq-subtab svg { width: 1.25rem; height: 1.25rem; flex: none; }
.kq-subtab:hover { color: var(--label); background: rgba(255, 255, 255, .6); text-decoration: none; }
.kq-subtab.active {
    background: #FFFFFF; color: var(--label);
    box-shadow: 0 0 0 1px rgba(15, 21, 52, .08), 0 6px 14px -10px rgba(15, 21, 52, .5);
}
/* לשוניות שנשארו בתוך גוף העמוד ולא בלוח הכותרת */
.kq-main > .kq-subtabs { margin-bottom: var(--s-5); }

/* רשימת הפרטים: שני טורים, התווית מעל הערך, קו שיער מעל כל זוג. ערך
   ארוך נשבר בתוך הטור שלו. במכל צר — טור אחד. */
.ld-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    column-gap: 2rem;
    margin: 0;
}
.ld-fact {
    display: block;
    min-width: 0; margin: 0;
    padding: .875rem 0 1rem;
    border-top: 1px solid var(--separator);
}
.ld-fact dt { font-size: var(--t-subhead); font-weight: 600; color: var(--label-2); }
.ld-fact dd {
    min-width: 0; margin: .125rem 0 0;
    font-size: 1.0625rem; font-weight: 700; line-height: 1.35; color: var(--label);
    overflow-wrap: anywhere;
}
.ld-fact dd .lead-pill { margin-top: .25rem; }
.ld-fact--empty dd { color: var(--label-3); font-weight: 600; }
/* פולואפ: המצב בתווית, ולצידו השלב — "סבב 3 מתוך 6 · יוצא מחר ב־09:00". */
.ld-followup__detail { display: block; margin-top: .25rem; font-size: var(--t-callout); font-weight: 600; color: var(--label-2); }

/* נספחים: שורה לקובץ, תמונה מקדימה למי שהוא תמונה. השורה כולה
   פותחת את הקובץ, ולכן אין צורך בקישור נפרד ליד כל שם. */
.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 { color: var(--accent); }

/* סרטון שהלקוח שלח — מתנגן בכרטיס, בלי לצאת ממנו. */
.ld-file--video { align-items: flex-start; }
.ld-file--video .ld-file__main { align-items: flex-start; flex-wrap: wrap; }
.ld-file__video {
    width: min(20rem, 100%);
    aspect-ratio: 16 / 10;
    border-radius: var(--r-sm);
    background: #000;
    border: 1px solid var(--separator);
}

.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 { grid-column: 1 / -1; }
.ld-fact--block dd { font-size: var(--t-headline); font-weight: 500; line-height: 1.5; white-space: pre-wrap; }

/* שני הטפסים של ההזמנה חולקים כרטיס אחד ומופרדים בקו, לא במסגרת נוספת */
.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: 24rem; margin-bottom: var(--s-2); }

/* --- חלון מודאלי -------------------------------------------------------
   פעולה שדורשת קלט נפתחת מעל הכרטיס ולא לוקחת את המשתמש לעמוד אחר.
   dialog נותן מלכודת מיקוד, סגירה ב-Esc ורקע חוסם — בלי שום ספרייה.
   המשטח יושב על הפאנל הפנימי ולא על dialog עצמו, כדי שלחיצה על הרקע
   (שמדווחת על dialog כיעד) תיפול מחוץ לתוכן ותסגור. */
.kq-modal {
    padding: 0; border: 0; background: transparent;
    width: min(32rem, calc(100vw - var(--s-8)));
    max-height: calc(100vh - var(--s-8));
    color: var(--label);
}
.kq-modal::backdrop {
    background: rgba(15, 21, 52, .34);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.kq-modal-panel {
    display: flex; flex-direction: column;
    max-height: calc(100vh - var(--s-8));
    background: rgba(255, 255, 255, .97);
    border: 1px solid var(--glass-edge);
    border-radius: var(--r-2xl);
    box-shadow: 0 0 0 1px rgba(15, 21, 52, .08), 0 40px 80px -32px rgba(15, 21, 52, .45);
    overflow: hidden;
}
.kq-modal-head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
    padding: 1.5rem 1.75rem .75rem;
}
.kq-modal-title { margin: 0; font-size: var(--t-title-2); font-weight: 800; color: var(--heading); }
.kq-modal-body { flex: 1 1 auto; min-height: 0; overflow: hidden auto; padding: .75rem 1.75rem 1.5rem; }
.kq-modal-foot {
    flex: 0 0 auto;
    display: flex; flex-wrap: wrap; gap: .75rem;
    padding: 1.125rem 1.75rem 1.5rem;
    border-top: 1px solid var(--separator);
    background: rgba(246, 247, 251, .9);
}

@media (prefers-reduced-motion: no-preference) {
    .kq-modal[open] { animation: kq-modal-in .2s cubic-bezier(.2, .8, .2, 1); }
    @keyframes kq-modal-in { from { opacity: 0; transform: translateY(.75rem) scale(.985); } }
}

/* --- מחירון המוצר ------------------------------------------------------
   טבלה ולא רשימה: כל שורה היא אזור, וההשוואה בין המחירים היא בדיוק מה
   שקוראים כאן — ולכן העמודות חייבות להיות מיושרות זו מתחת לזו. */
.pl-scroll { overflow-x: auto; }
.pl-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-callout);
}
.pl-table th, .pl-table td {
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--separator);
    text-align: start;
    vertical-align: top;
}
.pl-table thead th {
    background: rgba(15, 21, 52, .03);
    font-size: var(--t-subhead); font-weight: 700;
    color: var(--label-2);
    white-space: nowrap;
}
.pl-table tbody tr:last-child th, .pl-table tbody tr:last-child td { border-bottom: 0; }
.pl-table tbody tr:hover { background: rgba(15, 21, 52, .025); }

/* עמודת כסף. הספרות הן רצף לועזי, ולכן הן מבודדות מכיוון העמוד —
   אחרת "1,750 ₪" מתהפך. tabular-nums מיישר בין שורות. */
.pl-table .pl-num {
    direction: ltr; unicode-bidi: isolate;
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}

.pl-table th[scope="row"] { font-weight: 600; }

/* העטיפה ולא התא עצמו: תא שהופך ל-flex יוצא מפריסת העמודות של הטבלה,
   והכותרת של העמודה מפסיקה לשבת מעל הערכים שלה. */
.pl-stack { display: flex; flex-direction: column; gap: var(--s-1); }
.pl-area { font-weight: 800; color: var(--label); }
.pl-cities { font-size: var(--t-subhead); color: var(--label-2); max-width: 32rem; }
.pl-muted { color: var(--label-2); font-weight: 600; }

.pl-table .pl-acts { text-align: end; white-space: nowrap; }
.pl-actions { display: inline-flex; gap: var(--s-1); }
.pl-actions form { margin: 0; }

/* שלושת המחירים בשורה אחת בתוך החלון — הם נקראים יחד. */
.pl-prices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}

.pl-check {
    display: flex; align-items: center; gap: .625rem;
    min-height: 2.75rem;
    font-size: var(--t-body); font-weight: 600;
    cursor: pointer;
}
.pl-check input { width: 1.375rem; height: 1.375rem; accent-color: var(--accent); flex: none; margin: 0; }

/* הרחבת האחריות יושבת בשורה משלה, מתחת לשלושת המחירים — היא אינה חלק
   ממה שהלקוח משלם על ההתקנה, והתיבה שלה מתייחסת רק אליה. */
.pl-warranty {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr;
    align-items: end; gap: var(--s-3) var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--separator);
}
.pl-warranty .pl-check { padding-bottom: .25rem; }
@media (max-width: 30rem) { .pl-warranty { grid-template-columns: 1fr; } .pl-warranty .pl-check { padding-bottom: 0; } }

/* שני כפתורים בקצה שורת הכלים של רשימת המוצרים. */
.pl-head-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: flex-end; }

/* --- אזורים וערים -------------------------------------------------------
   רשימה אחת לכל המוצרים. כל אזור הוא לוח: השם, כמה ערים, והערים עצמן
   בשורה נקראת — כדי שאפשר יהיה לראות במבט אחד איזו עיר נמצאת איפה. */
.ar-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: var(--s-4);
}
.ar-row {
    border: 1px solid var(--glass-edge);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: 1.25rem 1.5rem;
    display: flex; flex-direction: column; gap: var(--s-2);
}
.ar-row--off { background: rgba(233, 235, 242, .6); }
.ar-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.ar-name { margin: 0; font-size: var(--t-title-3); font-weight: 800; color: var(--heading); }
.ar-count { font-size: var(--t-subhead); font-weight: 600; color: var(--label-2); font-variant-numeric: tabular-nums; }
.ar-actions { margin-inline-start: auto; }
.ar-cities { margin: 0; font-size: var(--t-callout); color: var(--label); line-height: 1.8; }
.ar-sep { color: var(--label-3); }
/* השמות הנוספים של עיר מוצגים לידה ובשקט — הם עוזרים לזהות אותה, אבל
   הם לא עוד עיר ברשימה. */
.ar-aliases { color: var(--label-2); font-size: var(--t-subhead); }

/* --- תמונות המוצר -------------------------------------------------------
   רשת של תצוגות מקדימות. אלה התמונות שנשלחות ללקוח בוואטסאפ, ולכן הן
   מוצגות כתמונות ולא כשורות של שמות קבצים. */
.pi-grid {
    list-style: none; margin: 0;
    padding: 1.5rem 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr));
    gap: var(--s-4);
}
.pi-tile {
    position: relative;
    aspect-ratio: 1;
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface-2);
    box-shadow: 0 0 0 1px rgba(15, 21, 52, .08), 0 12px 24px -18px rgba(15, 21, 52, .4);
}
.pi-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pi-tile form { position: absolute; inset-block-start: var(--s-2); inset-inline-end: var(--s-2); margin: 0; }

/* הכפתור יושב על התמונה, ולכן הוא נושא רקע משלו ואינו נשען על המשטח שמאחוריו. */
.pi-tile .kq-icon-btn {
    background: rgba(255, 255, 255, .94);
    color: var(--label);
    box-shadow: 0 2px 8px rgba(15, 21, 52, .3);
}
.pi-tile .kq-icon-btn:hover, .pi-tile .kq-icon-btn:focus-visible {
    background: var(--red); color: var(--red-on);
}

/* התמונה או הסרטון הראשי — יוצאים ללקוח עם ההמלצה. הכוכב מסמן אחר במקומם. */
.pi-tile form.pi-star { inset-inline-end: auto; inset-inline-start: var(--s-2); }
.pi-tile .pi-star .kq-icon-btn:hover, .pi-tile .pi-star .kq-icon-btn:focus-visible {
    background: var(--accent); color: var(--accent-on);
}
.pi-main {
    position: absolute; inset-block-start: var(--s-2); inset-inline-start: var(--s-2);
    padding: .1875rem .625rem;
    border-radius: 8px;
    background: var(--heading); color: #FFFFFF;
    font-size: var(--t-footnote); font-weight: 700;
    pointer-events: none;
}

/* סרטון — רחב מתמונה, והנגן שלו צריך את כל המשטח. */
.pi-grid--video { grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); }
.pi-tile--video { aspect-ratio: 16 / 10; background: #000; }
.pi-tile--video video { width: 100%; height: 100%; object-fit: contain; display: block; }

/* חלון רחב יותר — טופס האזור מחזיק שלושה מחירים בשורה. */
.kq-modal--wide { width: min(40rem, calc(100vw - var(--s-8))); }

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

/* "הצג את הכל" — באותה שורה עם החיפוש. התיבה עצמה גדולה וברורה. */
.leads-showall {
    display: inline-flex; align-items: center; gap: .625rem;
    min-height: 3rem;
    padding: 0 .25rem;
    font-size: var(--t-body); font-weight: 600;
    color: var(--label);
    cursor: pointer;
    user-select: none;
}
.leads-showall:hover { color: var(--accent); }

/* תיבת הסימון של מערכת ההפעלה אינה מקבלת את צבעי הממשק ואת הפינות
   שלו, ולכן היא מצוירת כאן — והוויו נחתך מתוך ריבוע בצבע הטקסט. */
.leads-showall input {
    appearance: none; -webkit-appearance: none;
    flex: none; margin: 0;
    width: 1.375rem; height: 1.375rem;
    display: grid; place-content: center;
    border: 1.5px solid var(--field-edge); border-radius: 6px;
    background: #FFFFFF;
    transition: background-color .15s ease, border-color .15s ease;
}
.leads-showall input::before {
    content: ""; width: .85rem; height: .85rem;
    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: 3px solid var(--accent); outline-offset: 3px;
    border-color: var(--accent);
}

/* --- בורר עם חיפוש ------------------------------------------------------
   נראה כמו שדה רגיל; התוצאות נפתחות מתחתיו ומוגבלות בכמות. */
.kq-picker { position: relative; }
.kq-picker__list {
    position: absolute; z-index: 20;
    inset-inline: 0; top: 100%;
    margin: .5rem 0 0; padding: .5rem;
    max-height: 18rem; overflow: auto;
    list-style: none;
    background: rgba(255, 255, 255, .98);
    border: 1px solid var(--glass-edge);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
}
.kq-picker__item {
    display: flex; flex-direction: column; gap: 1px;
    padding: .5rem .75rem;
    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-body); font-weight: 700; }
.kq-picker__sub {
    font-size: var(--t-footnote); font-weight: 600; color: var(--label-2);
    unicode-bidi: isolate; font-variant-numeric: tabular-nums;
}
.kq-picker__note {
    padding: .5rem .75rem;
    font-size: var(--t-footnote); color: var(--label-2);
}

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

/* רשימה שאינה יושבת בתוך כרטיס. בלי המודיפייר הזה היא נעטפת ב-page-card,
   והריפוד שלו דוחף אותה נמוך מהמקום שבו מתחילות הכרטיסיות בשאר הלוחות. */
.users-list--card {
    box-shadow: var(--shadow-panel);
}
.urow {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .5rem 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--separator);
    transition: background-color .16s ease;
}
.urow:last-child { border-bottom: 0; }
.urow:hover { background: rgba(255, 255, 255, .7); }

/* אריח האות הראשונה — לבן עם טבעת דקה, כמו אריחי ההיסטוריה. */
.uav {
    width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem;
    display: grid; place-items: center;
    border-radius: 12px;
    background: #FFFFFF; color: var(--label);
    box-shadow: 0 0 0 1px rgba(15, 21, 52, .1), 0 6px 14px -10px rgba(15, 21, 52, .5);
    font-size: 1.125rem; font-weight: 800;
}

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

.utags { display: flex; flex-wrap: wrap; gap: .375rem; flex: none; }
.utags-none { color: var(--label-2); }
.uacts { display: flex; flex-wrap: wrap; gap: .5rem; flex: none; }

/* --- ציר הזמן ----------------------------------------------------------
   לכל רישום אריח קטן עם אייקון של מי שכתב — אדם, הסוכן, פולואפ, תשלום —
   וקו דק שמחבר אותם לרצף. בלי אריח, נקודה על הקו. */
.kq-timeline { list-style: none; margin: 0; padding: 0; }
.kq-timeline-item {
    position: relative;
    padding: 0 0 1.375rem;
    padding-inline-start: 3.375rem;
    min-height: 2.5rem;
}
.kq-timeline-item:last-child { padding-bottom: 0; }
/* הקו בין האריחים */
.kq-timeline-item::after {
    content: ""; position: absolute;
    inset-inline-start: 1.1875rem; top: 2.875rem; bottom: .375rem;
    width: 2px; border-radius: 2px;
    background: rgba(15, 21, 52, .1);
}
.kq-timeline-item:last-child::after { display: none; }
/* בלי אריח: נקודה במקומו */
.kq-timeline-item:not(:has(.kq-timeline-ico))::before {
    content: ""; position: absolute;
    inset-inline-start: .875rem; top: .375rem;
    width: 12px; height: 12px; border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 0 0 2.5px var(--accent);
}
.kq-timeline-ico {
    position: absolute; inset-inline-start: 0; top: 0;
    width: 2.5rem; height: 2.5rem; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, .92); color: var(--label);
    box-shadow: 0 0 0 1px rgba(15, 21, 52, .1), 0 6px 14px -10px rgba(15, 21, 52, .5);
}
.kq-timeline-ico svg { width: 1.25rem; height: 1.25rem; }
.kq-timeline-ico--agent { color: var(--violet); }
.kq-timeline-ico--followup { color: var(--green); }
.kq-timeline-ico--payment {
    background: var(--heading); color: #FFFFFF;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 20px -12px rgba(15, 21, 52, .8);
}
.kq-timeline-head {
    display: flex; align-items: baseline; flex-wrap: wrap;
    gap: .125rem .5rem;
    font-size: var(--t-subhead); line-height: 1.4; color: var(--label-2);
    padding-top: .0625rem;
}
.kq-timeline-user { font-size: 1rem; font-weight: 800; color: var(--label); }
.kq-timeline-time { font-weight: 600; white-space: nowrap; }
.kq-timeline-status {
    display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem;
    margin: .5rem 0 0;
    font-size: var(--t-callout); color: var(--label);
}
/* התיעוד נכתב ביד ולעתים בכמה שורות — שורה חדשה היא חלק מהתוכן */
.kq-timeline-note { margin: .375rem 0 0; font-size: var(--t-callout); line-height: 1.5; color: var(--label);
                    white-space: pre-wrap; overflow-wrap: anywhere; }

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

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

/* מחלף התצוגות — אותו מתג מקטעים של הלשוניות */
.cal-views {
    display: inline-flex;
    padding: .25rem;
    border-radius: 16px;
    background: rgba(15, 21, 52, .05);
}
.cal-view {
    display: inline-flex; align-items: center;
    min-height: 2.75rem;
    padding: 0 1.125rem;
    border-radius: 12px;
    font-size: var(--t-body); font-weight: 700;
    color: var(--label-2); text-decoration: none;
    transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.cal-view:hover { color: var(--label); background: rgba(255, 255, 255, .6); text-decoration: none; }
.cal-view.is-on {
    background: #FFFFFF; color: var(--label);
    box-shadow: 0 0 0 1px rgba(15, 21, 52, .08), 0 6px 14px -10px rgba(15, 21, 52, .5);
}

.cal-count {
    display: inline-flex; align-items: center; justify-content: center;
    margin-inline-start: .5rem;
    min-width: 1.75rem; height: 1.75rem; box-sizing: border-box;
    padding: 0 .5rem; border-radius: 8px;
    background: var(--heading); color: #FFFFFF;
    font-size: var(--t-caption); font-weight: 800;
    font-variant-numeric: tabular-nums;
}

@container (min-width: 56rem) {
    .cal-pool.ld-side { flex: 0 0 auto; width: clamp(16rem, 24%, 21rem); }
}

/* צבע לכל טכנאי. הבלוק ממזג את הצבע אל תוך המשטח הנוכחי. */
[data-color="1"] { --cal-color: var(--accent); }
[data-color="2"] { --cal-color: var(--green); }
[data-color="3"] { --cal-color: var(--amber); }
[data-color="4"] { --cal-color: var(--violet); }
[data-color="5"] { --cal-color: var(--rose); }
[data-color="6"] { --cal-color: #0E7C86; }

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

/* --- הממתינות לתיאום --- */
.cal-queue { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }
.cal-queue__item {
    display: grid; gap: .125rem;
    padding: .875rem 1rem;
    border-radius: var(--r-md);
    background: rgba(255, 255, 255, .85);
    box-shadow: 0 0 0 1px rgba(15, 21, 52, .08), 0 8px 18px -14px rgba(15, 21, 52, .45);
    cursor: grab;
    line-height: 1.35;
    transition: box-shadow .16s ease, transform .16s ease;
}
.cal-queue__item:hover { box-shadow: 0 0 0 1px rgba(15, 21, 52, .16), 0 12px 24px -14px rgba(15, 21, 52, .5); }
.cal-queue__item:active { cursor: grabbing; }
.cal-queue__item.is-dragging { opacity: .4; }
.cal-queue__title {
    font-size: var(--t-body); font-weight: 800; color: var(--label);
    text-decoration: none; overflow-wrap: anywhere;
}
.cal-queue__title:hover { color: var(--accent); }
.cal-queue__sub { font-size: var(--t-subhead); font-weight: 600; color: var(--label-2); overflow-wrap: anywhere; }

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

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

.cal-grid__colhead {
    position: sticky; top: 0; z-index: 3;
    display: flex; flex-direction: column; align-items: center; gap: .125rem;
    padding: .625rem .5rem;
    background: #FBFBFE;
    border-bottom: 1px solid var(--separator);
    border-inline-start: 1px solid var(--separator);
}
.cal-grid__colhead.is-today { background: #F1F3FD; }
.cal-grid__colhead-title {
    display: flex; align-items: center; gap: .5rem;
    max-width: 100%;
    font-size: var(--t-callout); font-weight: 800; color: var(--label);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-grid__colhead-sub { font-size: var(--t-caption); font-weight: 600; 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: rgba(255, 255, 255, .55); }
.cal-grid__slot.is-droppable { pointer-events: auto; }

/* קו השעה הנוכחית */
.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: -4px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--red);
}
/* ביומן יומי הקו חוצה כמה עמודות — הנקודה רק בראשון, ליד ציר השעות */
.cal-grid__col ~ .cal-grid__col .cal-grid__now::before { display: none; }

/* --- בלוק של התקנה --- */
.cal-item {
    position: absolute; z-index: 5;
    display: flex; flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
    border-inline-start: 3px solid var(--cal-color, var(--accent));
    background: color-mix(in srgb, var(--cal-color, var(--accent)) 13%, #FFFFFF);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--cal-color, var(--accent)) 22%, transparent);
    line-height: 1.25;
    transition: box-shadow .16s ease;
}
.cal-item:hover { z-index: 6; box-shadow: 0 0 0 1px color-mix(in srgb, var(--cal-color, var(--accent)) 40%, transparent), 0 10px 22px -12px rgba(15, 21, 52, .5); }
.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: .0625rem;
    padding: .25rem .5rem;
    min-width: 0;
    color: var(--label); text-decoration: none;
}
.cal-item__link:hover { color: var(--label); text-decoration: none; }
/* שעת ההתחלה בלבד: אין במערכת שעת סיום. */
.cal-item__time {
    font-size: var(--t-caption); font-weight: 800; color: color-mix(in srgb, var(--cal-color, var(--accent)) 80%, #0F1534);
    font-variant-numeric: tabular-nums; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; text-align: start;
}
.cal-item__title {
    font-size: var(--t-subhead); font-weight: 800;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-item__sub {
    font-size: var(--t-caption); font-weight: 600; color: var(--label-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ביטול התיאום: מתגלה בריחוף ופותח חלון אישור. במגע הוא מוסתר. */
.cal-item__remove {
    position: absolute; top: 3px; inset-inline-end: 3px; z-index: 7;
    width: 1.5rem; height: 1.5rem; padding: 0;
    display: grid; place-items: center;
    border: 0; border-radius: 50%;
    background: #FFFFFF; color: var(--red);
    box-shadow: inset 0 0 0 1.5px var(--red-edge);
    font-size: var(--t-body); 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__link { padding: .125rem .5rem; }

/* פרטי ההזמנה בחלון התיאום — אותה רשימת עובדות שבכרטיסים,
   בתוך באר רכה שמפרידה בין "מה ידוע" לבין "מה צריך למלא". */
.cal-modal-facts {
    margin-bottom: var(--s-5);
    padding: .25rem 1rem;
    border-radius: var(--r-md);
    background: var(--surface-2);
    box-shadow: inset 0 1px 3px rgba(15, 21, 52, .08);
}
.cal-modal-facts .ld-fact { padding: .625rem 0; }
.cal-modal-facts .ld-fact dd { font-size: var(--t-body); }
.cal-modal-facts .ld-fact:first-child { border-top: 0; }

/* --- הודעות מצב --------------------------------------------------------
   "אשר שפעולה משמעותית הושלמה". הודעה אחת, קצרה, בראש התוכן. */
.status-alert, .alert {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: 1rem 1.25rem;
    margin-bottom: var(--s-5);
    border: 0; border-radius: 16px;
    background: var(--green-tint); color: #08553A;
    box-shadow: inset 0 0 0 1px rgba(11, 107, 74, .2);
    font-size: var(--t-body); font-weight: 600;
}
.status-alert > svg { width: 1.375rem; height: 1.375rem; flex: 0 0 auto; margin-top: .0625rem; }
.status-text { flex: 1 1 auto; min-width: 0; }
.alert-danger { background: var(--red-tint); color: #8E1B3E; box-shadow: inset 0 0 0 1px var(--red-edge); }
.alert-warning { background: var(--amber-tint); color: #6E4200; box-shadow: inset 0 0 0 1px rgba(138, 83, 0, .24); }
.alert-info { background: var(--accent-tint); color: var(--heading); box-shadow: inset 0 0 0 1px rgba(45, 70, 214, .2); }

/* --- סיכום שגיאות של הטופס ----------------------------------------------
   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: 800; text-decoration: none; }
.alert a:hover { color: inherit; opacity: .8; }

/* אייקון שנצבע בצבע ההודעה עצמה, ולכן הוא נכון בכל צבע — בלי להוסיף
   סימון לאף אחד מהמסכים שמציגים סיכום שגיאות. */
.alert::before {
    content: "";
    flex: 0 0 auto;
    width: 1.375rem; height: 1.375rem;
    margin-top: .0625rem;
    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: 3rem 1.5rem;
    text-align: center;
    color: var(--label-2);
    font-size: var(--t-headline); font-weight: 600;
}
.empty-state p { margin: 0; }

/* --- מסכי התחברות ------------------------------------------------------
   מסך יחיד, ממורכז, בלי ניווט: לוח זכוכית אחד מעל האור של הפינות. */
.auth-page {
    background-image:
        radial-gradient(1100px 820px at 0% 0%, rgba(220, 214, 255, .82), rgba(220, 214, 255, 0) 64%),
        radial-gradient(760px 560px at 20% -10%, rgba(180, 227, 244, .6), rgba(180, 227, 244, 0) 66%),
        radial-gradient(1100px 820px at 100% 100%, rgba(211, 244, 230, .9), rgba(211, 244, 230, 0) 64%),
        radial-gradient(720px 520px at 82% 110%, rgba(180, 227, 244, .56), rgba(180, 227, 244, 0) 66%);
}
.auth-shell {
    min-height: 100vh; min-height: 100dvh;
    box-sizing: border-box;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 3.5rem 1rem;
}
.auth-body { width: 100%; display: flex; justify-content: center; }
.auth-card {
    width: 100%; max-width: 29.5rem;
    box-sizing: border-box;
    padding: 2.5rem 2.5rem 2.25rem;
    background: var(--glass);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-edge);
    border-radius: var(--r-2xl);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px rgba(15, 21, 52, .06),
                0 2px 6px rgba(15, 21, 52, .04), 0 40px 80px -40px rgba(15, 21, 52, .38);
}
.auth-brand { display: flex; justify-content: center; }
/* הלוגו לבדו וגדול — בלי מסגרת, בלי רקע ובלי צל, כמו בתפריט */
.auth-logo { display: inline-flex; }
.auth-logo img { display: block; height: 4.5rem; width: auto; }
.auth-tagline {
    margin: 1rem 0 0;
    text-align: center;
    font-size: var(--t-callout); font-weight: 600; color: var(--label-2);
}
.auth-title {
    margin: 1.5rem 0 0;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--separator);
    font-size: 2.375rem; line-height: 1.05; font-weight: 800; letter-spacing: -.015em;
    text-align: center;
    color: var(--heading);
}
.auth-title + form, .auth-title + * { margin-top: 1.5rem; }
.auth-sub { font-size: var(--t-body); font-weight: 600; color: var(--label-2); text-align: center; margin: 0; }

/* במסך הכניסה הכל עוד קצת יותר גדול: יש בו רק שני שדות. */
.auth-card .form-label { font-size: 1rem; margin-bottom: .5rem; }
.auth-card .form-control { min-height: 3.25rem; padding: 0 1.125rem; font-size: 1.0625rem; }
.auth-card .form-control[type="tel"] { letter-spacing: .04em; text-align: right; font-variant-numeric: tabular-nums; }
.auth-card .mb-3 + .mb-3 { margin-top: 1.25rem; }
.auth-card .form-check { margin-top: .75rem; }
.auth-card .btn-brand.w-100 { min-height: 3.25rem; font-size: 1.0625rem; margin-top: .5rem; }

@media (max-width: 760px) {
    .auth-shell { padding: 1.75rem 1rem; justify-content: flex-start; }
    .auth-card { padding: 2rem 1.375rem 1.75rem; border-radius: 22px; }
    .auth-logo img { height: 3.75rem; }
    .auth-title { font-size: 2rem; margin-top: 1.25rem; }
}


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

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

/* מסך נמוך (מחשב נייד 768): הפס מתכווץ כדי שכל הפריטים ייכנסו. אם עדיין
   חסר מקום — הפס כולו נגלל. */
@media (min-width: 992px) and (max-height: 56rem) {
    .kq-dock { padding-block: 1rem .75rem; }
    .kq-dock-nav { margin-top: 1rem; padding-top: .75rem; }
    .kq-dock-nav ul { gap: 1px; }
    .kq-nav-link { min-height: 2.5rem; padding-block: .375rem; }
    .kq-dock-foot { padding-top: .75rem; gap: .25rem; }
    .kq-dock-rule, .kq-user-role { display: none; }
}

/* במסך צר הפס מסתתר, ונפתח כמגירה מהכפתור בסרגל העליון: אותן שורות כמו
   במחשב. הלוגו כבר בסרגל העליון, ולכן לא חוזר במגירה. */
@media (max-width: 991.98px) {
    .kq-topbar { display: block; }
    .kq-content { margin-inline-start: 0; min-height: calc(100vh - var(--topbar-h)); padding: 1.25rem 1.5rem 3rem; }
    html.kq-nav-open .kq-nav-backdrop { display: block; }
    .kq-dock {
        top: var(--topbar-h);
        width: min(18rem, 85vw);
        padding: 1rem .75rem;
        background: rgba(255, 255, 255, .94);
        box-shadow: var(--shadow-lg);
    }
    .kq-dock-logo { display: none; }
    .kq-dock-nav { margin-top: 0; padding-top: 0; border-top: 0; }
    .kq-nav-link { min-height: 3rem; }   /* נוח לאצבע */
    html:not(.kq-nav-open) .kq-dock { transform: translateX(100%); visibility: hidden; }
    .kq-dock { transition: transform .22s ease, visibility 0s linear .22s; }
    html.kq-nav-open .kq-dock { transition: transform .22s ease, visibility 0s; }
}

@media (max-width: 767.98px) {
    html { overflow-x: clip; }
    .kq-content { padding: 1rem 1rem 2.5rem; }
    .kq-band { border-radius: 20px; }
    .kq-band-inner { padding: 1.25rem 1.125rem 1.125rem; gap: 1rem; }
    .kq-band-inner > .kq-page-head:not(:last-child) { padding-bottom: 1rem; }
    .kq-main { padding-top: 1rem; }
    .kq-page-title, .page-title { font-size: 2.125rem; }
    .kq-card-body, .page-card-body { padding: 1.25rem 1.125rem; }
    .page-card { padding: 1.25rem 1.125rem; }
    .page-card-header { padding: 1.125rem; }
    .page-card:has(> .page-card-header) > :not(.page-card-header):not(.page-card-body) { padding: 1.25rem 1.125rem; }
    .kq-page-actions { width: 100%; }
    .kq-page-actions .btn { flex: 1 1 auto; }
    .leads-search, .leads-status, .leads-filter { flex: 1 1 100%; max-width: none; }
    .leads-new { margin-inline-start: 0; flex: 1 1 100%; }
    /* בטור אחד כל כרטיס בגובה שלו — שורות שוות היו משאירות חורים */
    .leads-grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
    /* פעולות הכרטיס בטלפון: כל כפתור ממלא את השורה שלו, נוח לאגודל */
    .kq-band .ld-toolbar > *, .kq-band .ld-toolbar form > .btn { flex: 1 1 auto; }
    .kq-band .ld-toolbar form { display: flex; }
    .kq-subtabs { display: flex; width: 100%; }
    .kq-subtab { flex: 1 1 auto; justify-content: center; }
    .urow { padding: 1rem 1.125rem; }
}


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

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

.wa-chat, .fu-preview {
    --wa-paper:     #EFEAE2;   /* הרקע הקרמי של חלון השיחה */
    --wa-in:        #FFFFFF;   /* בועה נכנסת */
    --wa-out:       #D9FDD3;   /* בועה יוצאת */
    --wa-bubble-on: #101B20;   /* טקסט על שתי הבועות */
    --wa-bubble-2:  #667781;   /* שעה מתחת להודעה */
    --wa-brand:     #1FA855;   /* ירוק וואטסאפ, לסמל בלבד */
}

/* --- תווית מצב הסוכן בראש השיחה ------------------------------------------ */
.wa-me__status {
    display: inline-flex; align-items: center; gap: var(--s-1);
    margin-inline-start: var(--s-2); padding: .1875rem .625rem;
    border-radius: 8px; font-size: var(--t-caption); font-weight: 700;
    vertical-align: middle;
}
.wa-me__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.wa-me__status.on { background: var(--green-tint); color: var(--green); }
.wa-me__status.on::before { background: var(--green); }
.wa-me__status.off { background: var(--orange-tint); color: var(--orange); }
.wa-me__status.off::before { background: var(--orange); }

/* --- אין הודעות ---------------------------------------------------------- */
.wa-none {
    display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
    padding: var(--s-10) var(--s-5); text-align: center;
}
.wa-none svg { width: 34px; height: 34px; color: var(--label-3); }

/* --- שני החלונות --------------------------------------------------------- */
.wa-chat {
    display: flex; padding: 0; overflow: hidden;
    height: 72vh; min-height: 470px;
}

/* --- רשימת השיחות (בצד ההתחלה — ימין) ----------------------------------- */
.wa-chat__list {
    flex: 0 0 320px; max-width: 44%;
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface);
    border-inline-end: 1px solid var(--separator);
}

.wa-search { position: relative; padding: var(--s-3); }
.wa-search__ico {
    position: absolute; inset-inline-start: calc(var(--s-3) + var(--s-3));
    top: 50%; transform: translateY(-50%);
    width: 17px; height: 17px; color: var(--label-3); pointer-events: none;
}
.wa-search__input {
    width: 100%; border: 0; border-radius: var(--r-pill);
    background: var(--fill); color: var(--label);
    padding: .45rem var(--s-3); padding-inline-start: calc(var(--s-8) + var(--s-1));
    /* 16px לפחות — מתחת לזה הטלפון מגדיל את העמוד כשנוגעים בשדה */
    font: inherit; font-size: var(--t-callout); min-height: 2.75rem;
}
.wa-search__input::placeholder { color: var(--label-3); }
.wa-search__input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.wa-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.wa-search__empty {
    padding: var(--s-5) var(--s-4);
    font-size: var(--t-subhead); color: var(--label-2); text-align: center;
}

.wa-chat__convo {
    position: relative; display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    color: var(--label); text-decoration: none;
    border-block-end: 1px solid var(--separator);
    transition: background-color .15s ease;
}
.wa-chat__convo:last-of-type { border-block-end: 0; }
.wa-chat__convo:hover { background: var(--surface-2); color: var(--label); }
.wa-chat__convo:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wa-chat__convo.active { background: var(--accent-tint); }
.wa-chat__convo.active .wa-chat__name { color: var(--accent); }
/* פס הבחירה יושב על שפת הרשימה, ולכן הוא בצד ההתחלה של השורה. */
.wa-chat__convo.active::before {
    content: ""; position: absolute; inset-block: 6px; inset-inline-start: 0;
    width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
}

.wa-chat__avatar {
    flex: none; width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    color: var(--surface); background: var(--label-3);
}
.wa-chat__avatar .wa-avatar-ico { width: 52%; height: 52%; }

.wa-chat__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.wa-chat__name {
    font-size: var(--t-callout); font-weight: 600; color: var(--label);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* מספר טלפון יושב מתחת לשם ומיושר כמוהו, אבל הספרות שלו נקראות משמאל
   לימין. קופסה שנצמדת לתוכן פותרת את שניהם: היא מתחילה בתחילת השורה
   (ימין), והכיוון שבתוכה הוא שלה. plaintext לבדו היה מיישר אותה לשמאל,
   כי מחרוזת ספרות נחשבת פסקה משמאל לימין. */
.wa-chat__phone {
    /* פריט בעמודת פלקס נמתח לכל הרוחב, ואז הכיוון שבתוכו דוחף את הספרות
       שמאלה. align-self מכווץ אותו לתוכן ומצמיד אותו לתחילת השורה — בדיוק
       מתחת לשם. */
    align-self: flex-start;
    display: inline-block; max-width: 100%;
    font-size: var(--t-footnote); color: var(--label-2);
    direction: ltr; unicode-bidi: isolate; white-space: nowrap;
}

.wa-chat__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-2); }
.wa-chat__time { font-size: var(--t-caption); color: var(--label-2); white-space: nowrap; unicode-bidi: plaintext; }

.wa-status { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.wa-status--on { background: var(--green); }
.wa-status--off { background: var(--fill-strong); }

/* --- השיחה עצמה (בצד הסיום — שמאל) -------------------------------------- */
.wa-chat__thread { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

.wa-thread__hint { margin: auto; padding: var(--s-5); text-align: center; }

.wa-thread__head {
    display: flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3) var(--s-5);
    background: var(--surface); border-block-end: 1px solid var(--separator);
    position: relative; z-index: 1;
}
.wa-thread__who { flex: 1 1 auto; min-width: 0; }
.wa-thread__name { font-size: var(--t-headline); font-weight: 600; color: var(--label); }
.wa-thread__phone {
    display: inline-block; max-width: 100%;
    font-size: var(--t-footnote); color: var(--label-2);
    direction: ltr; unicode-bidi: isolate;
}
.wa-thread__reason { font-size: var(--t-caption); color: var(--orange); }

/* הרקע: קרם עם ציור עדין, בדיוק כמו ברקע של וואטסאפ. הציור מוטבע ככתובת
   ולא כקובץ, כדי שלא יידרש משאב חיצוני. */
.wa-thread__body {
    flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
    padding: var(--s-5);
    display: flex; flex-direction: column; gap: 5px;
    background-color: var(--wa-paper);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23a1846a' stroke-opacity='.09' stroke-width='1.2'%3E%3Ccircle cx='11' cy='13' r='3.2'/%3E%3Ccircle cx='41' cy='35' r='4'/%3E%3Cpath d='M31 8q3.6 4 0 8'/%3E%3Cpath d='M6 41h6'/%3E%3Cpath d='M47 12v6'/%3E%3Cpath d='M22 46q3-3 6 0'/%3E%3C/g%3E%3Cg fill='%23a1846a' fill-opacity='.07'%3E%3Ccircle cx='25' cy='27' r='1.4'/%3E%3Ccircle cx='51' cy='49' r='1.4'/%3E%3Ccircle cx='16' cy='51' r='1.4'/%3E%3Ccircle cx='38' cy='6' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 56px 56px;
    box-shadow: inset 0 7px 12px -12px rgba(10, 20, 30, .28);
}

/* --- מפריד יום ----------------------------------------------------------- */
.wa-daysep { align-self: center; margin-block: var(--s-1); }
.wa-daysep span {
    display: inline-block; padding: .15rem var(--s-3); border-radius: var(--r-pill);
    background: var(--wa-in); color: var(--wa-bubble-2);
    font-size: var(--t-caption); unicode-bidi: plaintext;
    box-shadow: 0 1px 1px rgba(10, 20, 30, .10);
}

/* --- בועות --------------------------------------------------------------- */
.wa-msg {
    position: relative; align-self: flex-start;
    max-width: 74%; min-width: 52px; width: fit-content;
    background: var(--wa-in); color: var(--wa-bubble-on);
    border-radius: 8px; border-start-start-radius: 0;
    padding: .3rem .6rem .35rem .55rem;
    box-shadow: 0 1px 1px rgba(10, 20, 30, .10);
}
/* הזנב נצבע בצבע הבועה דרך מסכה, ולכן הוא מתחלף לבד במצב הכהה. */
.wa-msg::before {
    content: ""; position: absolute; inset-block-start: 0; inset-inline-start: -7px;
    width: 8px; height: 13px; background: var(--wa-in);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13'%3E%3Cpath d='M6.467 3.568L0 12.193V1H5.188C6.958 1 7.526 2.156 6.467 3.568z'/%3E%3C/svg%3E") 0 0 / 8px 13px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13'%3E%3Cpath d='M6.467 3.568L0 12.193V1H5.188C6.958 1 7.526 2.156 6.467 3.568z'/%3E%3C/svg%3E") 0 0 / 8px 13px no-repeat;
}

.wa-msg__text {
    white-space: pre-wrap; overflow-wrap: anywhere;
    font-size: var(--t-callout); line-height: 1.45; color: var(--wa-bubble-on);
}
.wa-msg__text strong { font-weight: 700; }
.wa-msg__text em { font-style: italic; }
.wa-msg__text del { text-decoration: line-through; }
.wa-msg__text code {
    font-family: ui-monospace, 'Cascadia Mono', Menlo, monospace;
    background: rgba(127, 140, 150, .18); padding: 1px 4px; border-radius: 4px;
}

.wa-msg__time {
    margin-block-start: 1px; text-align: end;
    font-size: var(--t-caption); color: var(--wa-bubble-2); unicode-bidi: plaintext;
}

/* --- כתיבת הודעה ללקוח ------------------------------------------------- */
.wa-compose {
    display: flex; align-items: flex-end; gap: var(--s-2);
    padding: var(--s-2) var(--s-4);
    background: var(--surface); border-block-start: 1px solid var(--separator);
}
.wa-compose__input {
    flex: 1 1 auto; resize: none; min-height: 44px; max-height: 160px;
    padding: .5rem .9rem; border: 1px solid var(--separator); border-radius: 20px;
    font: inherit; line-height: 1.4; color: var(--label); background: var(--surface);
}
.wa-compose__input:focus { outline: none; border-color: var(--wa-brand); }
.wa-compose__send {
    flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%;
    display: grid; place-items: center; background: var(--wa-brand); color: #fff;
}
.wa-compose__send:disabled { opacity: .5; }
/* החץ פונה לכיוון הקריאה, כמו בוואטסאפ בעברית. */
.wa-compose__send svg { width: 20px; height: 20px; transform: scaleX(-1); }
.wa-compose--off {
    align-items: center; justify-content: space-between; flex-wrap: wrap;
    font-size: var(--t-footnote); color: var(--label-2);
}

.wa-msg--out {
    align-self: flex-end; background: var(--wa-out);
    border-start-start-radius: 8px; border-start-end-radius: 0;
}
.wa-msg--out::before {
    inset-inline-start: auto; inset-inline-end: -7px; background: var(--wa-out);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13'%3E%3Cpath d='M1.533 3.568L8 12.193V1H2.812C1.042 1 .474 2.156 1.533 3.568z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13'%3E%3Cpath d='M1.533 3.568L8 12.193V1H2.812C1.042 1 .474 2.156 1.533 3.568z'/%3E%3C/svg%3E");
}

/* --- מסך צר: חלון אחד בכל פעם — הרשימה, או השיחה שנבחרה --------------- */
.wa-back { display: none; }

@media (max-width: 800px) {
    .wa-back { display: inline-flex; }
    .wa-chat { flex-direction: column; height: auto; min-height: 0; }
    .wa-chat[data-view="list"] .wa-chat__thread,
    .wa-chat[data-view="thread"] .wa-chat__list { display: none; }
    .wa-chat__list { flex-basis: auto; max-width: none; max-height: none; border-inline-end: 0; }
    /* השיחה ממלאת את המסך מתחת לסרגל העליון, ותיבת הכתיבה בתחתיתו */
    .wa-chat[data-view="thread"] {
        height: calc(100vh - var(--topbar-h) - 1rem);
        height: calc(100dvh - var(--topbar-h) - 1rem);
        min-height: 24rem;
        scroll-margin-top: calc(var(--topbar-h) + .5rem);
    }
    .wa-chat__thread { min-height: 0; }
    .wa-thread__head { flex-wrap: wrap; padding-inline: var(--s-3); }
    .wa-thread__head > .wa-chat__avatar { display: none; }
    .wa-msg { max-width: 86%; }
}

/* --- פולואפים -----------------------------------------------------------
   למעלה ההגדרות הכלליות בכרטיס אחד, ומתחת הסבבים — כל סבב עם הנוסח שלו
   בבועה של וואטסאפ, כמו שהלקוח יראה אותו. */
.fu-settings { display: flex; flex-direction: column; gap: var(--s-3); }
.fu-facts {
    margin: 0; display: grid; gap: var(--s-2) var(--s-6);
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.fu-facts dt { font-size: var(--t-subhead); font-weight: 600; color: var(--label-2); }
.fu-facts dd { margin: 0; font-size: var(--t-headline); font-weight: 700; color: var(--label); }
.fu-ltr { direction: ltr; unicode-bidi: isolate; }
.fu-ltr-input { text-align: left; }

.fu-toolbar { margin-top: var(--s-6); align-items: center; }
.fu-title { margin: 0; margin-inline-end: auto; font-size: var(--t-title-2); font-weight: 800; color: var(--heading); }

.fu-preview {
    display: flex; flex-direction: column;
    background: var(--wa-paper); border-radius: var(--r-lg);
    padding: var(--s-3) var(--s-4);
}
.fu-preview .wa-msg { max-width: min(26rem, 92%); }

.fu-template { margin: 0; font-size: var(--t-footnote); color: var(--label-2); }
.fu-template__none { color: var(--label-3); }
.fu-narrow { max-width: 10rem; }

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


/* ===========================================================================
   7 · שיפורי חוויית שימוש (05.10.2026) — כל אזור בבלוק משלו
   =========================================================================== */

/* === UX · לידים והזמנות === */

/* כל שורה בלוח בגובה הכרטיס הגבוה שבה, ולא בגובה הכרטיס הגבוה בלוח כולו */
.leads-grid { grid-auto-rows: auto; }

/* הערה מהפנייה: שתי שורות לכל היותר, עם שבירות השורה המקוריות */
.lead-note span {
    white-space: pre-line;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
}

/* "היום 09:35" נקרא מימין לשמאל כמו שאר השורה */
.lead-last-when { direction: inherit; }

/* טופס ליד והזמנה: שתי עמודות קבועות, ולא מספר עמודות שתלוי ברוחב המסך */
.page-card--form { max-width: 56rem; }

/* תפריט בחירה שעוד לא נבחר בו ערך: נראה כמו טקסט מקום ולא כמו ערך */
.field-select__toggle .field-select__label.is-placeholder { color: var(--label-3); font-weight: 600; }

/* מועד ההתקנה בפינת כרטיס ההזמנה. היום — בצבע הדיו; עבר המועד — באדום ובמילים */
.lead-when {
    font-size: var(--t-subhead); font-weight: 800; white-space: nowrap;
    unicode-bidi: isolate; font-variant-numeric: tabular-nums;
    color: var(--label);
}
.lead-when.is-today {
    padding: .125rem .625rem; border-radius: 8px;
    background: var(--heading); color: #FFFFFF;
}
.lead-when.is-due {
    padding: .125rem .625rem; border-radius: 8px;
    background: var(--red-tint); color: var(--red);
    box-shadow: inset 0 0 0 1px var(--red-edge);
}

/* === UX · לידים והזמנות · סוף === */

/* === UX · כרטיס ליד והזמנה === */

/* מצב הכרטיס בכותרת, ליד "כרטיס ליד" / "כרטיס הזמנה" */
.kq-page-sub--pills { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .625rem; }

/* איך הלקוח משלם — שורות בחירה גדולות, נוחות ללחיצה ביד אחת */
.kq-choice { border: 0; padding: 0; margin: 0; min-width: 0; }
.kq-choice legend { float: none; width: auto; margin-bottom: .625rem; }
.kq-choice__list { display: flex; flex-direction: column; gap: .625rem; }
.kq-choice__opt {
    display: flex; align-items: center; gap: .75rem;
    min-height: 3.5rem; padding: .75rem 1rem;
    border: 1px solid var(--field-edge); border-radius: var(--r-md);
    background: var(--glass-field);
    font-size: var(--t-body); font-weight: 700;
    cursor: pointer;
}
.kq-choice__opt .form-check-input { margin: 0; flex: none; }
.kq-choice__opt:has(input:checked) { border-color: var(--accent); background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--accent); }

/* נספחים: בחירת הקבצים שולחת אותם מיד */
input.visually-hidden:focus-visible + label.btn { outline: 3px solid var(--accent); outline-offset: 3px; }
form[data-submitting="1"] label.btn { opacity: .55; pointer-events: none; }

/* בטלפון כפתור ראשי שיושב בתוך טופס נמתח לרוחב כמו כל כפתור ראשי אחר */
@media (max-width: 767.98px) {
    .kq-page-actions > form { flex: 1 1 auto; display: flex; margin: 0; }
    .kq-page-actions > form > .btn { flex: 1 1 auto; }
}

/* === UX · כרטיס ליד והזמנה · סוף === */

/* === UX · יומן וטכנאים === */

/* שורת הכלים של היומן יושבת בתוך לוח הכותרת */
.kq-band .cal-toolbar { justify-content: space-between; }
@media (max-width: 767.98px) {
    .cal-toolbar { flex-direction: column; align-items: stretch; }
    .cal-views { display: flex; }
    .cal-view { flex: 1 1 0; justify-content: center; }
    .cal-nav { justify-content: space-between; }
    .cal-period { flex: 1 1 0; min-width: 0; line-height: 1.25; }
}
@media (pointer: coarse) {
    .cal-nav .btn { min-width: 44px; min-height: 44px; }
}

/* עמודת היום בתצוגת שבוע מודגשת לכל גובהה, לא רק בכותרת */
.cal-grid__col.is-today { background: rgba(241, 243, 253, .6); }

/* בזמן גרירה: רק החצי שעה שעליו הבלוק ינחת מסומן, עם השעה עצמה */
.cal-grid__slot.is-drop-over::before {
    content: attr(data-drop);
    position: absolute; inset-inline: 3px; top: 0; height: 50%;
    box-sizing: border-box;
    display: flex; align-items: center;
    padding-inline: .5rem;
    border: 2px dashed var(--accent); border-radius: 8px;
    background: var(--accent-tint); color: var(--accent);
    font-size: var(--t-caption); font-weight: 800; line-height: 1;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.cal-grid__slot.is-drop-half::before { top: 50%; }

/* יום בלי התקנות אצל הטכנאי: משפט בתוך הרשת ולא רק "פנוי" בכותרת */
.cal-grid__empty {
    position: absolute; inset-inline: 0;
    margin: 0; padding-inline: 1rem;
    text-align: center;
    font-size: var(--t-headline); font-weight: 600; color: var(--label-2);
    pointer-events: none;
}

/* מצב ההתקנה על הבלוק. גובה הבלוק לא משתנה. */
.cal-item.is-done { background: rgba(255, 255, 255, .9); border-inline-start-style: dashed; }
.cal-item.is-done :is(.cal-item__time, .cal-item__title) { color: var(--label-2); }
.cal-item.is-late { border-inline-start-color: var(--red); background: var(--red-tint); }
.cal-item.is-late .cal-item__time { color: var(--red); }

/* ביטול התיאום: מסגרת אדומה, ובריחוף רקע אדום רך. במגע הוא מוסתר —
   מבטלים מכרטיס ההזמנה, ושם יש אישור. */
.cal-item__remove:hover { background: var(--red-tint); box-shadow: inset 0 0 0 1.5px var(--red); }
@media (hover: none) {
    .cal-item__remove { display: none; }
}
/* שורת השעה מפנה מקום לכפתור הביטול, שיושב בקצה הבלוק (inline-end).
   הרווח קבוע ולא נוסף בריחוף, כדי שהטקסט לא יקפוץ כשהכפתור מתגלה. */
@media (hover: hover) {
    .cal-item:has(.cal-item__remove) .cal-item__time { padding-inline-end: 1.875rem; }
}

/* === UX · יומן וטכנאים · סוף === */

/* === UX · צ׳אטים, פולואפים ותשלומים === */

/* צ׳אטים במסך רחב: העמוד בגובה החלון, והשיחה ממלאת את מה שנשאר מתחת ללוח
   הכותרת — תיבת הכתיבה וההודעה האחרונה תמיד גלויות, וגוללים רק בתוך השיחה.
   דפדפן בלי :has נשאר בפריסה הקודמת. */
@media (min-width: 801px) {
    .kq-content:has(.wa-chat) { height: 100vh; height: 100dvh; min-height: 0; padding-bottom: 1.5rem; }
    .kq-main:has(> .wa-chat) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
    .kq-main:has(> .wa-chat) > .wa-chat { flex: 1 1 auto; height: auto; min-height: 20rem; }
}
@media (min-width: 801px) and (max-width: 991.98px) {
    .kq-content:has(.wa-chat) { height: calc(100vh - var(--topbar-h)); height: calc(100dvh - var(--topbar-h)); }
}

/* סוג ההודעה (תמונה, הודעה קולית…) — מודגש, כדי שלא ייקרא כחלק ממה שהלקוח כתב */
.wa-msg__kind { font-weight: 700; }

/* תמונה שהלקוח שלח: הבועה כולה נלחצת ופותחת את התמונה בחלון */
.wa-msg--image { cursor: pointer; transition: filter .16s ease; }
.wa-msg--image:hover { filter: brightness(.96); }
.wa-msg__open {
    padding: 0; border: 0; background: none;
    font: inherit; font-weight: 700; color: var(--accent);
    cursor: pointer;
}
.wa-msg__open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.wa-msg__open:focus-visible { outline: none; }
.wa-msg--image:has(.wa-msg__open:focus-visible) { box-shadow: 0 0 0 3px var(--accent); }
.wa-msg--image a { position: relative; z-index: 1; }   /* קישור בכיתוב נשאר לחיץ */

.wa-image { width: fit-content; max-width: calc(100vw - var(--s-8)); }
.wa-image__panel {
    position: relative;
    min-width: min(20rem, calc(100vw - var(--s-8))); min-height: 12rem;
    padding: .75rem;
    align-items: center; justify-content: center;
}
.wa-image__img {
    display: block;
    max-width: 100%; max-height: calc(100dvh - 5rem);
    border-radius: var(--r-lg);
    object-fit: contain;
}
.wa-image__close {
    position: absolute; z-index: 1;
    top: 1.25rem; inset-inline-start: 1.25rem;
    background: rgba(255, 255, 255, .92); color: var(--label);
    box-shadow: 0 0 0 1px rgba(15, 21, 52, .1), 0 4px 12px -4px rgba(15, 21, 52, .35);
}
.wa-image__state {
    display: flex; align-items: center; gap: .625rem;
    margin: 2rem 3rem;
    font-weight: 600; color: var(--label-2);
}
.wa-image__state[hidden] { display: none; }
.wa-image__spinner {
    width: 1.25rem; height: 1.25rem; flex: none;
    border: 2px solid var(--separator); border-top-color: var(--accent); border-radius: 50%;
    animation: kq-spin .75s linear infinite;
}

/* פולואפים: סבב שלא יישלח בלי תבנית */
.fu-warn {
    margin: 0; display: flex; align-items: center; gap: .5rem;
    font-size: var(--t-callout); font-weight: 700; color: var(--amber);
}
.fu-warn::before {
    content: ""; width: 1.25rem; height: 1.25rem; flex: none;
    background: currentColor;
    -webkit-mask: var(--alert-icon) center / contain no-repeat;
    mask: var(--alert-icon) center / contain no-repeat;
}

/* פולואפ כבוי — תווית ענבר, באותה צורה כמו שאר תוויות המצב */
.badge-state-warn {
    display: inline-flex; align-items: center;
    min-height: 1.875rem; box-sizing: border-box;
    padding: .1875rem .6875rem;
    border-radius: 8px;
    font-size: var(--t-subhead); font-weight: 700; line-height: 1.2;
    background: var(--amber-tint); color: var(--amber); box-shadow: inset 0 0 0 1px rgba(138, 83, 0, .2);
}

/* מתי הסבב יוצא — הפרט החשוב בשורה */
.fu-list .ar-count { font-size: var(--t-body); font-weight: 700; color: var(--label); }

/* כותרת קבוצה בטופס: Bootstrap מציף את legend לצד — כאן היא יושבת מעל השדות */
legend.form-label { float: none; }

/* תשלומים: מה שצריך טיפול, והסיבה */
.lead-pill-review {
    background: var(--amber-tint); color: var(--amber); box-shadow: inset 0 0 0 1px rgba(138, 83, 0, .2);
    --pill-ico: var(--alert-icon);
}
.pay-why { font-size: var(--t-callout); font-weight: 700; color: var(--amber); }

/* אמצעי התשלום בראש השורה: אשראי בכחול, מזומן בירוק */
.uav svg { width: 1.375rem; height: 1.375rem; }
.uav--card { background: var(--accent-tint); color: var(--accent); }
.uav--cash { background: var(--green-tint); color: var(--green); }

/* הסכום בעמודה משלו, מיושר, כדי שאפשר יהיה לסרוק את הרשימה לפי סכום */
.pay-amount {
    flex: none; min-width: 7.5rem; text-align: end;
    font-size: var(--t-title-3); font-weight: 800; color: var(--heading);
    font-variant-numeric: tabular-nums;
    direction: ltr; unicode-bidi: isolate; white-space: nowrap;
}
/* הפעולות ברוחב קבוע — אחרת כל סכום נדחק למקום אחר לפי הכפתורים שלידו */
@media (min-width: 768px) {
    .pay-amount + .uacts { flex: 0 0 15rem; justify-content: flex-end; }
}
.usub--quiet { font-size: var(--t-subhead); color: var(--label-3); }

/* חלון השיוך: מי שילם, מתי ומאיזה טלפון — מול זה בוחרים את ההזמנה */
.kq-modal-lead {
    margin: 0 0 1rem;
    font-size: var(--t-body); font-weight: 700; color: var(--label-2);
    unicode-bidi: plaintext;
}

/* === UX · צ׳אטים, פולואפים ותשלומים · סוף === */

/* === UX · מעטפת, טפסים, לקוחות, מוצרים ומשתמשים === */

/* --- טקסט קטן ושגיאות בשדות: לא פחות מ־15px, והשדה השגוי מסומן --------- */
.small, small { font-size: var(--t-footnote); }
.field-validation-error {
    display: block; margin-top: .375rem;
    font-size: var(--t-footnote); font-weight: 600; color: var(--red);
}
.form-control.input-validation-error, .form-select.input-validation-error { border-color: var(--red); background-color: #FFFFFF; }
.form-control.input-validation-error:focus, .form-select.input-validation-error:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(180, 35, 79, .22);
}

/* --- כפתור שנשלח: סמן טעינה במקום האייקון, ולא כפתור דהוי --------------- */
.btn[aria-busy="true"] { opacity: 1; cursor: progress; }
.btn[aria-busy="true"] > svg { display: none; }
.btn[aria-busy="true"]::before {
    content: ""; flex: none;
    width: 1.125rem; height: 1.125rem;
    border: 2px solid currentColor; border-inline-end-color: transparent;
    border-radius: 50%;
    animation: kq-spin .75s linear infinite;
}
@keyframes kq-spin { to { transform: rotate(360deg); } }

/* --- מחיקה: אדום גם בלי ריחוף, עם מסגרת דקה ------------------------------ */
.kq-icon-btn--out { color: var(--red); box-shadow: inset 0 0 0 1px var(--red-edge); }
/* ברשימה, כפתור עריכה לצד כפתור מחיקה: שניהם עם מסגרת, כדי שייראו זוג */
.ar-list .kq-icon-btn:not(.kq-icon-btn--out) { color: var(--label); box-shadow: inset 0 0 0 1px var(--border); }
.pi-tile .kq-icon-btn--out { color: var(--red); }

/* --- הודעות מצב: לפני לוח הכותרת, והטקסט לא נכנס מתחת ל־X --------------- */
.kq-content > .status-alert {
    width: 100%; max-width: var(--content-max);
    margin: 0 auto var(--s-4);
    box-sizing: border-box;
}
.status-alert.alert-dismissible { padding-inline-end: 3.5rem; }
.status-alert .btn-close { opacity: .7; --bs-btn-close-focus-shadow: var(--focus-ring); }
.status-alert .btn-close:hover, .status-alert .btn-close:focus-visible { opacity: 1; }

/* --- כפתור התפריט: X כשהמגירה פתוחה ------------------------------------- */
.kq-burger-x { display: none; }
html.kq-nav-open .kq-burger-x { display: block; }
html.kq-nav-open .kq-burger-bars { display: none; }

/* --- חלון מודאלי בטלפון: הגובה הנראה באמת, וכפתורים נוחים לאגודל -------- */
.kq-modal, .kq-modal-panel { max-height: calc(100dvh - var(--s-8)); }
@media (max-width: 767.98px) {
    .kq-modal-foot .btn { flex: 1 1 0; }
}
@media (max-width: 575.98px) {
    .kq-modal, .kq-modal--wide { width: calc(100vw - 1rem); }
    .kq-modal-head { padding: 1.125rem 1.125rem .5rem; }
    .kq-modal-body { padding: .5rem 1.125rem 1.125rem; }
    .kq-modal-foot { padding: 1rem 1.125rem calc(1rem + env(safe-area-inset-bottom)); }
}

/* --- רשימות: השם הוא הקישור, והשורה כולה נלחצת -------------------------- */
.urow { position: relative; }
.urow .uacts > *, .urow .utags { position: relative; z-index: 2; }
.urow:has(.stretched-link) { cursor: pointer; }
a.uname { text-decoration: none; }
.urow:hover a.uname { color: var(--accent); }
.urow .stretched-link:focus-visible { outline: none; }
.urow:has(.stretched-link:focus-visible) { box-shadow: inset 0 0 0 3px var(--accent); }

/* --- מחירון בטלפון: שורה לאזור, ובה ארבעת המחירים עם התווית שלהם -------- */
.pl-val { direction: ltr; unicode-bidi: isolate; }
@media (max-width: 767.98px) {
    .pl-scroll { overflow-x: visible; }
    .pl-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .pl-table, .pl-table tbody { display: block; }
    .pl-table tr {
        position: relative;
        display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem;
        padding: 1rem 0;
        border-bottom: 1px solid var(--separator);
    }
    .pl-table tbody tr:last-child { border-bottom: 0; }
    .pl-table th[scope="row"] { grid-column: 1 / -1; padding: 0; padding-inline-end: 3rem; border: 0; }
    .pl-table td { padding: 0; border: 0; }
    .pl-table td.pl-num { direction: rtl; text-align: start; display: flex; flex-direction: column; }
    .pl-table td.pl-num::before { content: attr(data-label); font-size: var(--t-subhead); font-weight: 600; color: var(--label-2); }
    /* הערך יושב מתחת לתווית שלו, ולא בקצה השני של התא */
    .pl-table td.pl-num .pl-val { align-self: flex-start; }
    .pl-table td.pl-acts { position: absolute; inset-block-start: .625rem; inset-inline-end: 0; }
}

/* === UX · מעטפת, טפסים, לקוחות, מוצרים ומשתמשים · סוף === */


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

:root {
    --pin-line: #B5B6B9;   /* אטום, כדי שקטעי החבל יתחברו בלי תפר */
    /* אטב עומד: עץ בהיר ונקודת תכלת (הקפיץ) */
    --pin-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 68'%3E%3Crect x='3' width='14' height='68' rx='1.5' fill='%23CBAC8C'/%3E%3Ccircle cx='10' cy='35' r='8' fill='%23B4E3F4'/%3E%3C/svg%3E");
    /* אותו אטב, נטוי שמאלה וימינה — לזוגות */
    --pin-art-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -2 32 72'%3E%3Cg transform='rotate(-6 10 14)'%3E%3Crect x='3' width='14' height='68' rx='1.5' fill='%23CBAC8C'/%3E%3Ccircle cx='10' cy='35' r='8' fill='%23B4E3F4'/%3E%3C/g%3E%3C/svg%3E");
    --pin-art-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 -2 32 72'%3E%3Cg transform='rotate(5 10 14)'%3E%3Crect x='3' width='14' height='68' rx='1.5' fill='%23CBAC8C'/%3E%3Ccircle cx='10' cy='35' r='8' fill='%23B4E3F4'/%3E%3C/g%3E%3C/svg%3E");
    /* קצה המוט, כמו בצדי הלוגו */
    --pin-cap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 14'%3E%3Cellipse cx='3' cy='7' rx='3' ry='7' fill='%23818387'/%3E%3C/svg%3E");
    --pin-shadow: drop-shadow(0 1px .5px rgba(15, 21, 52, .16)) drop-shadow(0 3px 3px rgba(15, 21, 52, .08));
}

/* --- לוח הכרטיסים ---------------------------------------------------- */
/* מקום בין השורות לחבל ולאטב */
.leads-grid { row-gap: 2.25rem; padding-top: .75rem; }

/* האטב: חציו מעל שפת הכרטיס, ננעץ בה */
.lead-card::before {
    content: "";
    position: absolute; z-index: 1;
    top: -22px; left: calc(50% - 5px);
    width: 10px; height: 34px;
    background: var(--pin-art) center / 100% 100% no-repeat;
    transform: rotate(var(--pin-tilt, -4deg));
    transform-origin: 50% 20%;
    filter: var(--pin-shadow);
    pointer-events: none;
}
.lead-card:nth-child(5n+2)::before { --pin-tilt: 3deg; }
.lead-card:nth-child(5n+3)::before { --pin-tilt: -2deg; }
.lead-card:nth-child(5n+4)::before { --pin-tilt: 6deg; }
.lead-card:nth-child(5n)::before   { --pin-tilt: -6deg; }

/* החבל: קטע לכל כרטיס עד חצי המרווח, וכך השורה כולה נראית כחבל אחד */
.lead-card::after {
    content: "";
    position: absolute; z-index: 0;
    top: -16px; height: 1.5px;
    inset-inline: calc(var(--s-5) / -2 - 1.5px);   /* חצי המרווח, ועוד המסגרת */
    background: var(--pin-line);
    pointer-events: none;
}
/* כשהכרטיס מתרומם בריחוף — האטב עולה איתו, והחבל נשאר במקומו */
@media (prefers-reduced-motion: no-preference) {
    .lead-card::after { transition: transform .18s ease; }
    .lead-card:hover::after { transform: translateY(2px); }
}

/* --- לוח הכותרת: חבל עם כביסה ------------------------------------- */
/* התוכן תמיד מעל הקישוט */
.kq-band-inner { position: relative; z-index: 1; }
/* קישור החזרה תופס רק את רוחבו, כדי שהכביסה לא תיתלה מעל שטח לחיץ */
.kq-band-inner > .kq-back { align-self: flex-start; }

/* החבל: קו אפור דק לכל רוחב הלוח, עם כיפה בכל קצה */
.kq-band::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2rem;
    z-index: 0;
    pointer-events: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='14' viewBox='0 0 6 14'%3E%3Cellipse cx='3' cy='7' rx='2.6' ry='6.2' fill='%23686870' fill-opacity='.62'/%3E%3C/svg%3E") left 17px top 9px / 6px 14px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='14' viewBox='0 0 6 14'%3E%3Cellipse cx='3' cy='7' rx='2.6' ry='6.2' fill='%23686870' fill-opacity='.62'/%3E%3C/svg%3E") right 17px top 9px / 6px 14px no-repeat,
        linear-gradient(rgba(104, 104, 112, .42), rgba(104, 104, 112, .42)) 20px 15px / calc(100% - 40px) 2px no-repeat;
}

/* הכביסה: בצד השמאלי, אחרי מקום הכפתור הראשי ולפני השם */
.kq-band::after {
    content: "";
    position: absolute;
    top: 0; left: 236px;
    width: 144px; height: 78px;
    z-index: 0;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='78' viewBox='0 0 144 78'%3E%3Cg transform='rotate(-1.5 19.5 24.5)'%3E%3Crect x='2.5' y='24.5' width='34' height='50' rx='3' fill='%23DDF1F9' stroke='%237F818B'/%3E%3Cpath d='M3 29.5h33' stroke='%237F818B' stroke-opacity='.3'/%3E%3Cpath d='M3 63.5h33' stroke='%23B0E0F0' stroke-width='3'/%3E%3Cpath d='M3 68.25h33' stroke='%23B0E0F0' stroke-width='1.25'/%3E%3C/g%3E%3Cpath d='M65.5 24.5H69Q76 32.5 83 24.5H86.5L103.5 34.5L98.5 44L92.5 40.5V74.5H59.5V40.5L53.5 44L48.5 34.5Z' fill='%23B0E0F0' stroke='%237F818B' stroke-linejoin='round'/%3E%3Cpath d='M71 25.5Q76 30.5 81 25.5' fill='none' stroke='%237F818B' stroke-opacity='.45'/%3E%3Cg transform='rotate(2 128.5 24.5)'%3E%3Cpath d='M115.5 24.5H141.5V30.5L142.5 74.5H130.5L128.5 45L126.5 74.5H114.5L115.5 30.5Z' fill='%23C7E9F5' stroke='%237F818B' stroke-linejoin='round'/%3E%3Cpath d='M116 25h25v5.5h-25z' fill='%23B0E0F0'/%3E%3Cpath d='M115.5 30.5H141.5' stroke='%237F818B' stroke-opacity='.45'/%3E%3C/g%3E%3Cg transform='translate(8 16) rotate(-5)'%3E%3Crect x='-2.3' y='-3.5' width='4.6' height='18.5' rx='0.9' fill='%23C8A888'/%3E%3Ccircle cx='0' cy='5' r='1.9' fill='%23B0E0F0'/%3E%3C/g%3E%3Cg transform='translate(31 16) rotate(4)'%3E%3Crect x='-2.3' y='-3.5' width='4.6' height='18.5' rx='0.9' fill='%23C8A888'/%3E%3Ccircle cx='0' cy='5' r='1.9' fill='%23B0E0F0'/%3E%3C/g%3E%3Cg transform='translate(67 16) rotate(-4)'%3E%3Crect x='-2.3' y='-3.5' width='4.6' height='18.5' rx='0.9' fill='%23C8A888'/%3E%3Ccircle cx='0' cy='5' r='1.9' fill='%23B0E0F0'/%3E%3C/g%3E%3Cg transform='translate(85 16) rotate(5)'%3E%3Crect x='-2.3' y='-3.5' width='4.6' height='18.5' rx='0.9' fill='%23C8A888'/%3E%3Ccircle cx='0' cy='5' r='1.9' fill='%23B0E0F0'/%3E%3C/g%3E%3Cg transform='translate(119.5 16) rotate(-3)'%3E%3Crect x='-2.3' y='-3.5' width='4.6' height='18.5' rx='0.9' fill='%23C8A888'/%3E%3Ccircle cx='0' cy='5' r='1.9' fill='%23B0E0F0'/%3E%3C/g%3E%3Cg transform='translate(137.5 16) rotate(5)'%3E%3Crect x='-2.3' y='-3.5' width='4.6' height='18.5' rx='0.9' fill='%23C8A888'/%3E%3Ccircle cx='0' cy='5' r='1.9' fill='%23B0E0F0'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 144px 78px no-repeat;
}

/* --- מסך הכניסה: הכרטיס תלוי על החבל -------------------------------- */
.auth-shell { overflow-x: clip; }
.auth-card { position: relative; }
.auth-card::before {
    content: "";
    position: absolute;
    top: -13px; left: -100vw; right: -100vw;
    height: 2px;
    pointer-events: none;
    background: rgba(104, 104, 112, .42);
}
.auth-card::after {
    content: "";
    position: absolute;
    top: -19px; left: 0; right: 0;
    height: 38px;
    pointer-events: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='38' viewBox='0 0 16 38'%3E%3Cg transform='translate(8 7) rotate(-6)'%3E%3Crect x='-3.5' y='-6' width='7' height='29' rx='0.9' fill='%23C8A888'/%3E%3Ccircle cx='0' cy='8' r='3' fill='%23B0E0F0'/%3E%3C/g%3E%3C/svg%3E") left 4.5rem top 0 / 16px 38px no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='38' viewBox='0 0 16 38'%3E%3Cg transform='translate(8 7) rotate(5)'%3E%3Crect x='-3.5' y='-6' width='7' height='29' rx='0.9' fill='%23C8A888'/%3E%3Ccircle cx='0' cy='8' r='3' fill='%23B0E0F0'/%3E%3C/g%3E%3C/svg%3E") right 4.5rem top 0 / 16px 38px no-repeat;
}
/* במסך רחב — גם כביסה על החבל, משמאל לכרטיס */
@media (min-width: 1100px) {
    .auth-body { position: relative; }
    .auth-body::before {
        content: "";
        position: absolute;
        top: -35px; right: calc(50% + 14.75rem + 4rem);
        width: 216px; height: 117px;
        pointer-events: none;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='78' viewBox='0 0 144 78'%3E%3Cg transform='rotate(-1.5 19.5 24.5)'%3E%3Crect x='2.5' y='24.5' width='34' height='50' rx='3' fill='%23DDF1F9' stroke='%237F818B'/%3E%3Cpath d='M3 29.5h33' stroke='%237F818B' stroke-opacity='.3'/%3E%3Cpath d='M3 63.5h33' stroke='%23B0E0F0' stroke-width='3'/%3E%3Cpath d='M3 68.25h33' stroke='%23B0E0F0' stroke-width='1.25'/%3E%3C/g%3E%3Cpath d='M65.5 24.5H69Q76 32.5 83 24.5H86.5L103.5 34.5L98.5 44L92.5 40.5V74.5H59.5V40.5L53.5 44L48.5 34.5Z' fill='%23B0E0F0' stroke='%237F818B' stroke-linejoin='round'/%3E%3Cpath d='M71 25.5Q76 30.5 81 25.5' fill='none' stroke='%237F818B' stroke-opacity='.45'/%3E%3Cg transform='rotate(2 128.5 24.5)'%3E%3Cpath d='M115.5 24.5H141.5V30.5L142.5 74.5H130.5L128.5 45L126.5 74.5H114.5L115.5 30.5Z' fill='%23C7E9F5' stroke='%237F818B' stroke-linejoin='round'/%3E%3Cpath d='M116 25h25v5.5h-25z' fill='%23B0E0F0'/%3E%3Cpath d='M115.5 30.5H141.5' stroke='%237F818B' stroke-opacity='.45'/%3E%3C/g%3E%3Cg transform='translate(8 16) rotate(-5)'%3E%3Crect x='-2.3' y='-3.5' width='4.6' height='18.5' rx='0.9' fill='%23C8A888'/%3E%3Ccircle cx='0' cy='5' r='1.9' fill='%23B0E0F0'/%3E%3C/g%3E%3Cg transform='translate(31 16) rotate(4)'%3E%3Crect x='-2.3' y='-3.5' width='4.6' height='18.5' rx='0.9' fill='%23C8A888'/%3E%3Ccircle cx='0' cy='5' r='1.9' fill='%23B0E0F0'/%3E%3C/g%3E%3Cg transform='translate(67 16) rotate(-4)'%3E%3Crect x='-2.3' y='-3.5' width='4.6' height='18.5' rx='0.9' fill='%23C8A888'/%3E%3Ccircle cx='0' cy='5' r='1.9' fill='%23B0E0F0'/%3E%3C/g%3E%3Cg transform='translate(85 16) rotate(5)'%3E%3Crect x='-2.3' y='-3.5' width='4.6' height='18.5' rx='0.9' fill='%23C8A888'/%3E%3Ccircle cx='0' cy='5' r='1.9' fill='%23B0E0F0'/%3E%3C/g%3E%3Cg transform='translate(119.5 16) rotate(-3)'%3E%3Crect x='-2.3' y='-3.5' width='4.6' height='18.5' rx='0.9' fill='%23C8A888'/%3E%3Ccircle cx='0' cy='5' r='1.9' fill='%23B0E0F0'/%3E%3C/g%3E%3Cg transform='translate(137.5 16) rotate(5)'%3E%3Crect x='-2.3' y='-3.5' width='4.6' height='18.5' rx='0.9' fill='%23C8A888'/%3E%3Ccircle cx='0' cy='5' r='1.9' fill='%23B0E0F0'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 216px 117px no-repeat;
    }
}

/* --- טלפון: הכל קטן יותר ---------------------------------------- */
@media (max-width: 767.98px) {
    .kq-band-inner { padding-top: 1.75rem; }
    .kq-band::before {
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='14' viewBox='0 0 6 14'%3E%3Cellipse cx='3' cy='7' rx='2.6' ry='6.2' fill='%23686870' fill-opacity='.62'/%3E%3C/svg%3E") left 9px top 4px / 6px 14px no-repeat,
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='14' viewBox='0 0 6 14'%3E%3Cellipse cx='3' cy='7' rx='2.6' ry='6.2' fill='%23686870' fill-opacity='.62'/%3E%3C/svg%3E") right 9px top 4px / 6px 14px no-repeat,
            linear-gradient(rgba(104, 104, 112, .42), rgba(104, 104, 112, .42)) 12px 10px / calc(100% - 24px) 2px no-repeat;
    }
    /* הכביסה קטנה יותר, משמאל לשם */
    .kq-band::after {
        top: 1px; left: 22px;
        width: 92px; height: 50px;
        background-size: 92px 50px;
    }
}
/* טלפון צר מאוד: רק אטבים שמחכים על החבל */
@media (max-width: 374.98px) {
    .kq-band::after {
        top: 3px; left: 18px;   /* רחוק מכותרת ארוכה כמו "החלפת סיסמה" */
        width: 46px; height: 26px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='26' viewBox='0 0 46 26'%3E%3Cg transform='translate(6 6) rotate(-6)'%3E%3Crect x='-2.1' y='-3' width='4.2' height='19' rx='0.9' fill='%23C8A888'/%3E%3Ccircle cx='0' cy='5' r='1.75' fill='%23B0E0F0'/%3E%3C/g%3E%3Cg transform='translate(22 6) rotate(4)'%3E%3Crect x='-2.1' y='-3' width='4.2' height='19' rx='0.9' fill='%23C8A888'/%3E%3Ccircle cx='0' cy='5' r='1.75' fill='%23B0E0F0'/%3E%3C/g%3E%3Cg transform='translate(38 6) rotate(-3)'%3E%3Crect x='-2.1' y='-3' width='4.2' height='19' rx='0.9' fill='%23C8A888'/%3E%3Ccircle cx='0' cy='5' r='1.75' fill='%23B0E0F0'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 46px 26px no-repeat;
    }
}
@media (max-width: 767.98px) {
    /* בטור אחד לכל כרטיס חבל משלו, קצר מעט מרוחב המסך */
    .leads-grid { padding-top: 1.25rem; }
    .lead-card::after { inset-inline: -.5rem; }
}

@media print {
    .lead-card::before, .lead-card::after,
    .kq-band::before, .kq-band::after,
    .auth-card::before, .auth-card::after, .auth-body::before { display: none; }
}