@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   Panda Payroll — Design System (ADHD-First · Hebrew/RTL)
   מקור-אמת יחיד לצבע, טיפוגרפיה, צורות ומרווחים.
   נטען אחרי ה-<style> המקומי של כל עמוד — ולכן גובר עליו.

   חוק-ברזל: ZERO RED.
   ענבר  = דורש תשומת-לב / חריגה / מקסימום
   טורקיז = בעבודה / בתהליך
   ירוק  = תקין / הושלם
   אדום  = שגיאת-מערכת קריטית בלבד (.is-system-error)
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     סולם-הצבע. לכל תפקיד ארבע דרגות, ותמיד באותו סדר:
       <תפקיד>        — הצבע המלא (פס, מילוי, אייקון)
       <תפקיד>-soft   — רקע-צ'יפ
       <תפקיד>-wash   — רקע-אזור, הבהיר ביותר
       <תפקיד>-line   — גבול
       <תפקיד>-ink    — טקסט קריא על ה-soft/wash (ניגודיות ≥4.5:1)
     ------------------------------------------------------------------ */

  /* --- רקע ומשטח ---
     26/08 · מיפוי CalmFlow (פיילוט): הניטרלים הוחלפו לניטרלי-CalmFlow
     (רקע-עמוד #F8FAFC). surface-2/-3 נשארים כמעט-זהים לרקע — בדיוק כמו
     במקור — כדי לשמר הבחנה עדינה על משטח לבן, בלי לצבוע hover בטורקיז
     במאות מקומות שלא נבדקו חזותית בסבב הזה. */
  --pd-bg:            #F8FAFC;
  --pd-surface:       #FFFFFF;
  --pd-surface-2:     #F8FAFC;
  --pd-surface-3:     #F8FAFC;

  /* --- טקסט --- */
  --pd-text:          #475569;   /* CalmFlow טקסט-ריצה */
  --pd-muted:         #64748B;   /* CalmFlow טקסט-משני — 4.55:1 על הרקע, נמדד */
  --pd-on-accent:     #FFFFFF;

  /* --- גבולות --- */
  --pd-border:        #E2E8F0;   /* CalmFlow קו/הפרדה */
  --pd-border-strong: #C6D0DC;   /* CalmFlow גבול-אזור מוגדר */

  /* --- מבטאים ---
     26/08 · מיפוי CalmFlow (פיילוט): --pd-accent/--pd-work עברו לגוון-הדיו
     של ספקטרום-הטורקיז (`tq-ink` #447271 במדריך-CalmFlow) ולא לגוון-הליבה
     (`tq-core` #68B0AE) — הליבה נותנת רק 2.50:1 עם תווית לבנה, מתחת
     לרצפה; הדיו נותן 5.40:1. **אותו הצבע** משמש גם כ-fill (רקע+לבן) וגם
     כ-ink (טקסט על soft/לבן) — זה בדיוק הגוון שהמדריך מגדיר לתפקיד הטקסט
     של הספקטרום, ולכן אין כאן שני ערכים ממציאים את עצמם. */
  --pd-accent:        #447271;   /* CalmFlow tq-ink · לבן עליו: 5.40:1 (היה 4.51:1) */
  --pd-accent-hover:  #3E6868;   /* אותו גוון, מוכהה מעט ל-hover — 6.20:1 */
  --pd-accent-soft:   #F3F9F9;   /* CalmFlow tq-95 */
  --pd-accent-ink:    #447271;   /* = --pd-accent — גוון-הדיו של CalmFlow משרת את שני התפקידים */
  /* גם הוא נושא תווית לבנה (כפתורים ב-used-vacation · closure-missing ·
     payslip-upload, וקצה-הבאנר). היה 3.53:1. אותה הכהיה מינימלית:
     H 207.7°→207.4°, S 0.396→0.395, L 0.539→0.467. */
  --pd-accent-2:       #487BA6;  /* לבן עליו: 4.51:1 (היה 3.53:1) */
  --pd-accent-2-soft:  #EAF1F7;
  --pd-accent-2-hover: #3F6B93;
  --pd-accent-2-ink:   #2F5E85;

  /* --- סטטוס סמנטי (ZERO RED) --- */
  /* 03/09 · מיפוי CalmFlow: ירוק-ים (gr) הרשמי. ה-core הרשמי (#2F9E7B) נכשל
     בניגודיות עם תווית-לבנה על כפתורים (3.33:1) — נבדק בפועל ע"י tools/build.js.
     אותו פתרון כמו ל-accent (26/08): --pd-ok/--pd-ok-ink חולקים את גוון-הדיו
     הרשמי (gr-ink #227259, לבן עליו 5.80:1) במקום ה-core הבהיר-יותר. */
  --pd-ok:            #227259;   /* CalmFlow gr-ink · לבן עליו: 5.80:1 (היה 4.55:1) */
  --pd-ok-soft:       #D1EAE2;   /* CalmFlow gr-85 */
  --pd-ok-wash:       #EEF7F4;   /* CalmFlow gr-95 */
  --pd-ok-line:       #97CFBD;   /* CalmFlow gr-60 */
  --pd-ok-ink:        #227259;   /* = --pd-ok — גוון-הדיו של CalmFlow משרת את שני התפקידים */
  --pd-work:          #447271;   /* חולק את גוון-המבטא (CalmFlow tq-ink), ולכן גם את ההכהיה */
  --pd-work-soft:     #F3F9F9;   /* CalmFlow tq-95 */
  --pd-work-line:     #B4D8D7;   /* CalmFlow tq-60 */
  --pd-work-ink:      #447271;   /* אותה דרגה כמו accent-ink — "בעבודה" חולק את גוון-המבטא */
  --pd-attn:          #F59E0B;
  --pd-attn-soft:     #FEF3DC;
  --pd-attn-wash:     #FFFBEB;
  --pd-attn-line:     #F3D28A;
  /* דיו-הענבר — מקור אחד. אוחד 14.08.2026 (הכרעת-הרכז, פריט 6) משלושה
     גוונים שנוצרו כי המסכים נכתבו בזמנים שונים:
       #7A4E06 (נבחר) · #6B4405 (-strong) · #B45309 (-warm)
     למה דווקא #7A4E06: הוא כבר היה הדרגה המוצהרת בסולם-התפקידים
     (<תפקיד>-ink), כלומר האיחוד מאמץ את הקיים ולא ממציא ערך רביעי.
     שלושתם עברו את הרצפה, ולכן זה אינו שינוי-נגישות אלא הסרת
     מקור-אמת שלישי — אך הוא כן משפר: כטקסט 6.53–7.19:1 על הרקעים
     הבהירים, וכמילוי עם תווית לבנה 7.19:1 במקום 5.02:1 של -warm. */
  --pd-attn-ink:      #7A4E06;   /* ענבר קריא על רקע בהיר — ניגודיות ≥4.5:1 */
  --pd-neutral:       #5B6B75;
  --pd-neutral-soft:  #EEF1F2;
  --pd-danger:        #DC2626;   /* שגיאת-מערכת קריטית בלבד */
  --pd-danger-soft:   #FDECEC;
  --pd-danger-line:   #F3C2C2;
  --pd-danger-ink:    #9B1C1C;

  /* --- באנר-כותרת ---
     הבאנר נושא את **כותרת-העמוד בלבן**, ולכן הוא אינו קישוט אלא רקע-טקסט.
     בגרדיאנט **הקצה הגרוע קובע**, ושני הקצוות היו מתחת לרצפה (3.74:1
     ו-3.53:1). שניהם הוכהו לערך המינימלי שעובר, כל אחד בגוון שלו —
     ולכן זהו אותו גרדיאנט, כהה במעט, ולא גרדיאנט אחר. */
  /* 26/08 · מיפוי CalmFlow: הקצה הראשון עוקב אחרי --pd-accent (טורקיז-דיו, 5.40:1).
     הקצה השני = --pd-accent-2 — צבע ה"ממתין"/מידע הכחול — לא שונה: לנה ביקשה במפורש שיישאר. */
  --pd-banner: linear-gradient(90deg, #447271 0%, #487BA6 100%);   /* לבן: 5.40:1 / 4.51:1 בקצוות */

  /* --- צורות --- */
  --pd-r-sm: 8px;
  --pd-r:    12px;
  --pd-r-lg: 16px;
  --pd-r-pill: 999px;

  /* --- מרווחים — סולם של 4px. אין ערכי-ביניים; "בערך 13px" הוא
         בדיוק מה שגורם לשתי כרטיסיות זהות להיראות לא-מיושרות. --- */
  --pd-s-1:  4px;
  --pd-s-2:  8px;
  --pd-s-3: 12px;
  --pd-s-4: 16px;
  --pd-s-5: 24px;
  --pd-s-6: 32px;
  --pd-s-7: 48px;

  /* --- סולם-טיפוגרפיה. רצפת-הקריאוּת היא --pd-t-sm (≈14px ב-18px
         בסיס); מתחתיה עברית כבר לא נסרקת בלי מאמץ. --- */
  --pd-t-xs:  0.80rem;
  --pd-t-sm:  0.92rem;
  --pd-t:     1rem;
  --pd-t-md:  1.15rem;
  --pd-t-lg:  1.4rem;
  --pd-t-xl:  1.75rem;
  --pd-t-2xl: 2.2rem;

  /* --- צל --- */
  --pd-shadow-1: 0 1px 2px rgba(30,42,50,0.05), 0 1px 3px rgba(30,42,50,0.04);
  --pd-shadow-2: 0 4px 14px rgba(30,42,50,0.08);

  /* --- ניווט --- */
  --pd-nav-w: 272px;
  --pd-nav-w-mini: 68px;

  /* --- טיפוגרפיה --- */
  --pd-font: 'Heebo', 'Assistant', 'Segoe UI', Arial, sans-serif;
}

/* פלטה כהה — זמינה דרך html[data-theme="dark"] */
html[data-theme="dark"] {
  --pd-bg:        #0E1618;
  --pd-surface:   #162326;
  --pd-surface-2: #1B2C30;
  --pd-text:      #E8EDEE;
  --pd-muted:     #9FB0B6;
  --pd-border:    #24383C;
  --pd-border-strong: #31494E;
}

/* ==========================================================================
   1. בסיס
   ========================================================================== */

/* גודל-הבסיס של כל המערכת. כל מידה ב-rem נגזרת מכאן, ולכן שינוי כאן
   מגדיל את הכל פרופורציונלית — טקסט, ריפוד וגבהים. */
html {
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--pd-font) !important;
  background: var(--pd-bg);
  color: var(--pd-text);
  font-size: 1rem;
  font-weight: 500;                 /* 400 יוצא דק ומרוח בעברית — 500 חד יותר */
  line-height: 1.5;
  letter-spacing: normal;           /* אף פעם letter-spacing על עברית */
  text-align: start;
  /* בלי antialiased — הוא מכבה subpixel-rendering והעברית יוצאת דקה ומטושטשת.
     subpixel-antialiased = הרינדור הרגיל של המערכת, הכי חד. */
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  /* סינתזת-משקל מותרת — וזה **לא** ויתור על "בלי bold מזויף".
     הדפדפן מסנתז רק כשלמשקל המבוקש אין פרצוף אמיתי. ל-Heebo יש
     400/500/600/700/800 — בדיוק המשקלים שהמערכת משתמשת בהם — ולכן
     כשהוא נטען הסינתזה לעולם אינה נכנסת לפעולה.
     נמדד (Chromium 141, חמשת הפרצופים טעונים מקומית, צילום מבודד לכל
     משקל): none מול auto יוצא **זהה בייט-לבייט** ב-400/500/600/700/800.
     הביקורת שמוכיחה שהמדידה אינה עיוורת: משפחה עם פרצוף 400 בלבד
     נותנת none≠auto ב-600/700/800.
     הרווח הוא במצב-הכשל: אם Heebo אינו נטען ומשפחת-הנפילה נושאת
     פרצוף יחיד (למשל 'Assistant' מותקן מקומית), `none` היה משאיר את
     הטקסט **דק** — הכיוון ההפוך מ"אני מתקשה לראות".
     סייג שנמדד ביושר: בנפילה ל-Arial דווקא אין הבדל כלל, כי 600+
     נתפס ל-Arial Bold ו-500 אינו מסונתז ממילא. */
  font-synthesis-weight: auto;
}

/* אכיפת Heebo על כל האלמנטים — עמודים ישנים מגדירים 'Segoe UI' ראשון,
   והעברית מרונדרת בפונט פחות חד. חריגים: קוד ומספרי-מכונה. */
body *:not(code):not(pre):not(kbd):not(samp):not(.mono):not([class*="fa-"]) {
  font-family: var(--pd-font) !important;
}
code, pre, kbd, samp, .mono { font-family: 'Menlo', 'Consolas', monospace !important; }

body, p, li, td, th, label, small, span, div, a, button, input, select, textarea {
  letter-spacing: normal;
}

/* משקלים — עברית צריכה מעט יותר משקל כדי להיראות חדה */
b, strong, th { font-weight: 700; }
button, .btn, .pd-btn { font-weight: 600; }

h1, h2, h3, h4 { line-height: 1.35; font-weight: 700; }

p, li { line-height: 1.6; }

a { color: var(--pd-accent-ink); }        /* טקסט, ולכן דרגת-דיו — לא דרגת-המילוי (3.74:1) */
a:hover { color: var(--pd-accent-hover); }

/* טקסט קטן — רצפת קריאוּת 14px */
small, .sub, .hint, .note, .status-time, .muted { font-size: 0.92rem; font-weight: 500; }

/* מספרים ומזהים — תמיד LTR, ספרות בעלות רוחב אחיד */
.num, .ltr, [dir="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.num { text-align: end; }

/* תנועה — קצרה ותכליתית בלבד */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   2. צורות — radius ≥8px, כרטיסים 12px, כפתורים pill/12px
   ========================================================================== */

.card, .panel, .box, .section, .main-content,
.system-status, .quick-actions, .workflow-group,
details.module-card, .status-card {
  border-radius: var(--pd-r);
  background: var(--pd-surface);
  border: 1px solid var(--pd-border);
  box-shadow: var(--pd-shadow-1);
}

button, .btn, input[type="button"], input[type="submit"],
.btn-primary, .btn-secondary, .module-open-btn {
  border-radius: var(--pd-r);
  font-family: var(--pd-font);
  font-size: 0.97rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
select, textarea {
  font-family: var(--pd-font);
  font-size: 0.97rem;
  border-radius: var(--pd-r-sm);
  border: 1px solid var(--pd-border-strong);
  background: var(--pd-surface);
  color: var(--pd-text);
  padding: 8px 12px;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--pd-accent); width: 16px; height: 16px; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--pd-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   3. כפתורים
   ========================================================================== */

.pd-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--pd-r);
  font-weight: 700; font-size: 0.97rem;
  text-decoration: none; cursor: pointer;
  font-family: var(--pd-font);
}
.pd-btn--primary, .btn-primary {
  background: var(--pd-accent); color: var(--pd-on-accent); border-color: var(--pd-accent);
}
.pd-btn--primary:hover, .btn-primary:hover {
  background: var(--pd-accent-hover); border-color: var(--pd-accent-hover); color: var(--pd-on-accent);
}
.pd-btn--ghost, .btn-secondary {
  background: var(--pd-surface); color: var(--pd-accent-ink); border: 1px solid var(--pd-border-strong);
}
.pd-btn--ghost:hover, .btn-secondary:hover {
  background: var(--pd-accent-soft); border-color: var(--pd-accent); color: var(--pd-accent-hover);
}
.pd-btn--pill { border-radius: var(--pd-r-pill); }

/* ==========================================================================
   4. באנר-כותרת + פוטר
   ========================================================================== */

.header, .header-hitech-balance, .pd-banner {
  background: var(--pd-banner);
  color: var(--pd-on-accent);
  border-radius: var(--pd-r);
  box-shadow: var(--pd-shadow-1);
}
.header h1, .header-hitech-balance h1, .pd-banner h1 { color: var(--pd-on-accent); letter-spacing: normal; }
/* האלפא כאן הורידה ניגודיות בלי שאף ערך-צבע ייראה חשוד — בדיוק כמו
   `opacity` בחץ-הקיפול. על הקצה הגרוע היא נתנה 3.25:1; לבן מלא נותן 4.51:1.
   כתובית-הבאנר היא טקסט-מידע ("מה המסך הזה עושה"), ולכן היא מקבלת את
   תקציב-הניגודיות המלא. */
.header .sub, .header-center-desc { color: var(--pd-on-accent); }

.footer-hitech-balance, .pd-footer {
  background: var(--pd-banner);
  color: var(--pd-on-accent);
  border-radius: var(--pd-r);
}

/* קישור-חזרה: לבן בתוך באנר, טורקיז-רפאים מחוצה לו (אחרת נבלע ברקע) */
.back-link {
  background: var(--pd-surface);
  color: var(--pd-accent-ink);
  border: 1px solid var(--pd-border-strong);
  border-radius: var(--pd-r-pill);
  padding: 6px 14px;
  text-decoration: none;
}
.back-link:hover { background: var(--pd-accent-soft); color: var(--pd-accent-hover); }
/* ציפוי-הגלולה על הבאנר הוא **כהה ולא בהיר**, וזה לא עניין של טעם:
   התווית כאן לבנה, ולכן ציפוי לבן מבהיר את הרקע ומוריד ניגודיות דווקא
   במקום שבו אין עודף — אחרי ההכהיה הבאנר עומד על 4.51:1 בדיוק.
   נמדד: rgba(255,255,255,0.18) הוריד את "← דף הבית" ל-3.26:1 ב-11
   מסכים, וה-hover ב-0.32 הוריד ל-2.58:1. אותו אלפא בכיוון הכהה נותן
   6.19:1 ו-8.00:1 — הגלולה נשמרת, רק כיוון-הציפוי מתהפך.
   זהו אותו דפוס שכבר צף חמש פעמים באפיון (חץ-הקיפול · שלוש אלפא
   הבאנר · עמעום-הכתובית · כאן): שכבה חצי-שקופה שמורידה ניגודיות בלי
   שאף ערך-צבע ייראה חשוד. */
.header .back-link, .header-hitech-balance .back-link, .pd-banner .back-link {
  background: rgba(0,0,0,0.18);
  color: var(--pd-on-accent);
  border-color: transparent;
}
.header .back-link:hover, .pd-banner .back-link:hover { background: rgba(0,0,0,0.32); color: var(--pd-on-accent); }

/* ==========================================================================
   5. סטטוס — צבע + אייקון + טקסט. לעולם לא צבע לבד.
   ========================================================================== */

.pd-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 12px;
  border-radius: var(--pd-r-pill);
  font-size: 0.875rem; font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pd-pill--ok    { background: var(--pd-ok-soft);      color: var(--pd-ok-ink);          border-color: var(--pd-ok-line); }
.pd-pill--work  { background: var(--pd-work-soft);    color: var(--pd-work-ink);     border-color: var(--pd-work-line); }
.pd-pill--attn  { background: var(--pd-attn-soft);    color: var(--pd-attn-ink);     border-color: var(--pd-attn-line); }
.pd-pill--idle  { background: var(--pd-neutral-soft); color: var(--pd-muted);        border-color: var(--pd-border); }
.pd-pill--error { background: var(--pd-danger-soft);  color: var(--pd-danger-ink);          border-color: var(--pd-danger-line); }

/* צבעי-טקסט סמנטיים */
.pd-ok    { color: var(--pd-ok-ink); }
.pd-work  { color: var(--pd-work-ink); }
.pd-attn  { color: var(--pd-attn-ink); }
.pd-idle  { color: var(--pd-muted); }
.pd-error { color: var(--pd-danger-ink); }

/* אמוג'י-אייקון בתוך כותרת/תווית (.pd-icon) — מתקן baseline, לא line-height.
   line-height כבר אחיד (1.35 ל-h1-h4, שורה ~210 למעלה) — הבעיה שנשארת היא
   שגליף-האמוג'י יושב על baseline שונה מגליף-העברי הסמוך, ולכן נראה "לא-מיושר"
   גם כששני-הטקסטים הם אלמנט-טקסט יחיד (לא שני spans נפרדים כמו ב-PR 434). */
.pd-icon {
  display: inline-block;
  line-height: 1;
  vertical-align: -0.08em;
}

/* נקודת-סטטוס (.pd-dot) — הבסיס (עגול, ענבר כברירת-מחדל) מוגדר מקומית
   בכל עמוד שמשתמש בו (כרגע reserve/dashboard.html, salary/worksheet.html).
   המודיפיירים כאן מאפשרים דרגת-סטטוס אחרת מברירת-המחדל בלי hex-קשיח בעמוד עצמו. */
.pd-dot--work { background: var(--pd-work); }
.pd-dot--ok   { background: var(--pd-ok); }

/* פס-סטטוס בצד-ההתחלה של שורה/כרטיס */
.pd-edge-ok    { border-inline-start: 4px solid var(--pd-ok); }
.pd-edge-work  { border-inline-start: 4px solid var(--pd-work); }
.pd-edge-attn  { border-inline-start: 4px solid var(--pd-attn); }
.pd-edge-idle  { border-inline-start: 4px solid var(--pd-border-strong); }

/* תגיות-סטטוס מדור-קודם — מיושרות לפלטה */
.status-active      { background: var(--pd-ok-soft);      color: var(--pd-ok-ink); }
.status-foundational{ background: var(--pd-accent-2-soft);color: var(--pd-accent-2-ink); }
.status-development { background: var(--pd-attn-soft);    color: var(--pd-attn-ink); }

/* שורות-בדיקה (summary וכו') — "bad" הוא חריגה, לא שגיאת-מערכת → ענבר.
   `.check-row.bad` הוסר: ROW_CLASS ב-summary.html פולט רק ok/warn/missing/info,
   ולכן הכלל לא נבחר מעולם — והיה זהה בייט-לבייט ל-.warn שמעליו. */
.check-row.ok      { background: var(--pd-ok-soft);      border-inline-start: 4px solid var(--pd-ok); }
.check-row.warn    { background: var(--pd-attn-soft);    border-inline-start: 4px solid var(--pd-attn); }
.check-row.missing { background: var(--pd-neutral-soft); border-inline-start: 4px solid var(--pd-border-strong); }

/* אדום — רק כשמסומן במפורש כשגיאת-מערכת */
.is-system-error { color: var(--pd-danger-ink); }
.is-system-error-box {
  background: var(--pd-danger-soft);
  border: 1px solid var(--pd-danger-line);
  border-radius: var(--pd-r);
  color: var(--pd-danger-ink);
}

/* ==========================================================================
   5ב. פס-פעולות אחיד — אותו סדר בכל מסך
   הקשר (חודש) → פעולה ראשית אחת → משניות → יבוא/יצוא מקובצים בקצה
   ========================================================================== */

.pd-bar, .toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--pd-surface);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-r);
  padding: 12px 16px;
  margin-block-end: 14px;
}
/* בתוך כרטיס קיים — בלי מסגרת כפולה */
.card > .toolbar, .card > .pd-bar { border: 0; padding: 0; background: transparent; }

.pd-bar__ctx { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.pd-bar__sep { width: 1px; align-self: stretch; background: var(--pd-border); margin-inline: 4px; }

/* קבוצת יבוא/יצוא — תמיד בקצה, תמיד יחד, אף פעם באמצע שורת-טקסט.
   תקן-האייקונים במערכת:  📥 = נכנס למערכת (יבוא/קליטה/שחזור)
                          📤 = יוצא מהמערכת (יצוא/הורדה/גיבוי)
   לא להפוך אותם — זה המקור הכי נפוץ לבלבול "מה הכפתור הזה עושה". */
.pd-bar__io {
  margin-inline-start: auto;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-inline-start: 12px;
  border-inline-start: 1px solid var(--pd-border);
}
.pd-io {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--pd-r);
  font-weight: 700; font-size: 0.94rem; cursor: pointer;
  text-decoration: none; border: 1px solid var(--pd-border-strong);
  background: var(--pd-surface); color: var(--pd-accent-ink);
  font-family: var(--pd-font);
}
.pd-io:hover { background: var(--pd-accent-soft); border-color: var(--pd-accent); color: var(--pd-accent-hover); }
.pd-io--in { background: var(--pd-accent); border-color: var(--pd-accent); color: var(--pd-on-accent); }
.pd-io--in:hover { background: var(--pd-accent-hover); border-color: var(--pd-accent-hover); color: var(--pd-on-accent); }

/* ==========================================================================
   5ג. טאבים — שורה אחת, פעיל אחד ברור
   ========================================================================== */

.pd-tabs, #mainTabs, .tabs {
  display: flex; align-items: flex-end; gap: 4px; flex-wrap: wrap;
  border-block-end: 2px solid var(--pd-border);
  margin-block-end: 16px;
}
.pd-tab, .main-tab, .tab {
  padding: 10px 18px;
  border: 0; background: transparent;
  color: var(--pd-muted);
  font-family: var(--pd-font); font-size: 0.95rem; font-weight: 700;
  cursor: pointer;
  border-radius: var(--pd-r-sm) var(--pd-r-sm) 0 0;
  border-block-end: 3px solid transparent;
  margin-block-end: -2px;
}
.pd-tab:hover, .main-tab:hover, .tab:hover { color: var(--pd-text); background: var(--pd-surface-2); }
.pd-tab.active, .main-tab.active, .tab.active {
  color: var(--pd-accent-ink);
  background: var(--pd-accent-soft);
  border-block-end-color: var(--pd-accent);
}

/* ==========================================================================
   5ד. צ'יפים — סינון וסטטיסטיקה
   ========================================================================== */

.filter-pill, .stat-pill, .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px;
  border-radius: var(--pd-r-pill);
  border: 1px solid var(--pd-border-strong);
  background: var(--pd-surface);
  color: var(--pd-text);
  font-size: 0.9rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.filter-pill:hover, .chip:hover { background: var(--pd-accent-soft); border-color: var(--pd-accent); color: var(--pd-accent-hover); }
.filter-pill.active, .chip.active {
  background: var(--pd-accent); border-color: var(--pd-accent); color: var(--pd-on-accent);
}
.stat-pill { cursor: default; background: var(--pd-surface-2); }
/* סיכום **לחיץ**. `cursor: default` למעלה הוא ברירת-המחדל הנכונה —
   רוב הסיכומים אינם מובילים לשום מקום — ולכן הלחיצוּת היא מודיפייר
   מפורש ולא היפוך של ברירת-המחדל: מי שמוסיף `is-link` מצהיר שיש יעד.
   UI-RULES §4: "מספר מצטבר שאי-אפשר לפרוט = מספר שאי-אפשר לאמת."
   הסימון אינו צבע-לבד (R5): יש גם מסגרת, גם `aria-pressed`, וגם
   שינוי-משקל במצב הפעיל. */
.stat-pill.is-link {
  cursor: pointer;
  border: 1px solid var(--pd-border-strong);
  transition: background 0.15s, border-color 0.15s;
}
.stat-pill.is-link:hover { background: var(--pd-accent-soft); border-color: var(--pd-accent); }
.stat-pill.is-link:focus-visible { outline: 2px solid var(--pd-accent); outline-offset: 2px; }
.stat-pill.is-link.active {
  background: var(--pd-accent-soft);
  border-color: var(--pd-accent);
  color: var(--pd-accent-ink);
  font-weight: 700;
}
.stats { display: flex; gap: 8px; flex-wrap: wrap; margin-block-end: 12px; }

/* קבוצת-סינון מקופלת — כשיש יותר מ-5 צ'יפים, הם לא יושבים גלויים בשורה */
.pd-filters { margin-block-end: 12px; }
.pd-filters > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: var(--pd-r-pill);
  border: 1px solid var(--pd-border-strong);
  background: var(--pd-surface); color: var(--pd-text);
  font-size: 0.92rem; font-weight: 700;
}
.pd-filters > summary::-webkit-details-marker { display: none; }
.pd-filters > summary:hover { background: var(--pd-accent-soft); color: var(--pd-accent-hover); }
.pd-filters__body {
  margin-block-start: 10px; padding: 12px 14px;
  border: 1px solid var(--pd-border); border-radius: var(--pd-r);
  background: var(--pd-surface-2);
  display: flex; gap: 8px; flex-wrap: wrap;
}

/* ==========================================================================
   6. טבלאות — סריקת-עמודה מהירה
   ========================================================================== */

table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--pd-surface-2);
  color: var(--pd-muted);
  font-weight: 700;
  text-align: start;
  border-bottom: 1px solid var(--pd-border-strong);
  padding: 10px 12px;
}
tbody td { padding: 9px 12px; border-bottom: 1px solid var(--pd-border); }
tbody tr:hover { background: var(--pd-surface-2); }
td.num, th.num { text-align: end; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

.pd-scroll-x { overflow-x: auto; border-radius: var(--pd-r); }

/* ==========================================================================
   7. פריסת-על עם תפריט-צד (מוזרק ע"י panda-nav.js)
   ========================================================================== */

html.pd-nav-on body {
  padding-inline-start: var(--pd-nav-w);
  transition: padding-inline-start 0.15s ease;
}
html.pd-nav-on.pd-nav-mini body { padding-inline-start: var(--pd-nav-w-mini); }

/* מסך WIDE — לנצל את הרוחב, בלי לחנוק את התוכן במרכז */
html.pd-nav-on .container,
html.pd-nav-on .main-content {
  max-width: 100%;
  margin-inline: 0;
}
html.pd-nav-on .container { padding-inline: 24px; }

@media (max-width: 1024px) {
  html.pd-nav-on body { padding-inline-start: 0; }
}

/* ==========================================================================
   8. תפריט-הצד
   ========================================================================== */

.pd-nav {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--pd-nav-w);
  background: var(--pd-surface);
  border-inline-end: 1px solid var(--pd-border);
  display: flex; flex-direction: column;
  z-index: 900;
  font-family: var(--pd-font);
  overflow: hidden;
}
html.pd-nav-mini .pd-nav { width: var(--pd-nav-w-mini); }

.pd-nav__brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--pd-border);
  background: var(--pd-banner);
  color: var(--pd-on-accent);
}
.pd-nav__brand:hover { filter: brightness(1.08); }
.pd-nav__brand:hover .pd-nav__names { text-decoration: underline; }
.pd-nav__mark {
  width: 34px; height: 34px; flex: none;
  border-radius: var(--pd-r-sm);
  background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}
.pd-nav__names { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.pd-nav__product { font-size: 0.95rem; font-weight: 700; white-space: nowrap; }
/* אותו דפוס: opacity 0.9 הפיל את הכתובית ל-3.18:1 מבלי לשנות ערך-צבע. */
.pd-nav__tagline { font-size: 0.875rem; white-space: nowrap; }
html.pd-nav-mini .pd-nav__names { display: none; }

.pd-nav__scroll { flex: 1; overflow-y: auto; padding: 10px 8px 4px; }

.pd-nav__home {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 8px;
  border-radius: var(--pd-r-sm);
  color: var(--pd-text); text-decoration: none;
  font-weight: 700; font-size: 0.95rem;
  border: 1px solid var(--pd-border);
  background: var(--pd-surface-2);
}
.pd-nav__home:hover { background: var(--pd-accent-soft); color: var(--pd-accent-hover); }
.pd-nav__home.is-active { background: var(--pd-accent); color: var(--pd-on-accent); border-color: var(--pd-accent); }

.pd-nav__group { border: 0; margin-bottom: 4px; }

/* קבוצה בת פריט אחד — קישור ישיר, באותה שורה ובאותו משקל ככותרת-קבוצה */
.pd-nav__solo {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; margin-bottom: 4px;
  border-radius: var(--pd-r-sm);
  font-size: 0.9rem; font-weight: 700; color: var(--pd-muted);
  text-decoration: none;
}
.pd-nav__solo:hover { background: var(--pd-surface-2); color: var(--pd-text); }
.pd-nav__solo.is-active {
  background: var(--pd-accent-soft); color: var(--pd-accent-ink);
}
.pd-nav__solo.is-active .pd-nav__step { background: var(--pd-accent); color: var(--pd-on-accent); }
.pd-nav__group > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px;
  border-radius: var(--pd-r-sm);
  font-size: 0.9rem; font-weight: 700; color: var(--pd-muted);
  user-select: none;
}
.pd-nav__group > summary::-webkit-details-marker { display: none; }
.pd-nav__group > summary:hover { background: var(--pd-surface-2); color: var(--pd-text); }
.pd-nav__group[open] > summary { color: var(--pd-text); }
.pd-nav__step {
  flex: none;
  width: 22px; height: 22px;
  border-radius: var(--pd-r-pill);
  background: var(--pd-neutral-soft); color: var(--pd-muted);
  font-size: 0.875rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
.pd-nav__group.has-active > summary { background: var(--pd-accent-soft); color: var(--pd-accent-ink); }
.pd-nav__group.has-active .pd-nav__step { background: var(--pd-accent); color: var(--pd-on-accent); }
/* בלי opacity: ב-0.7 החץ נמדד 2.97:1 — מתחת אפילו לרצפת הלא-טקסט (3:1). */
.pd-nav__caret { margin-inline-start: auto; font-size: 0.875rem; transition: transform 0.15s ease; }
.pd-nav__group[open] .pd-nav__caret { transform: rotate(180deg); }
.pd-nav__gtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.pd-nav-mini .pd-nav__gtitle,
html.pd-nav-mini .pd-nav__caret { display: none; }

.pd-nav__items { padding: 2px 0 6px; }
.pd-nav__link {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 12px 8px 10px;
  margin-inline-start: 10px;
  border-radius: var(--pd-r-sm);
  color: var(--pd-text); text-decoration: none;
  font-size: 0.92rem;
  border-inline-start: 2px solid transparent;
}
.pd-nav__link:hover { background: var(--pd-surface-2); color: var(--pd-accent-hover); }
.pd-nav__link.is-active {
  background: var(--pd-accent-soft);
  color: var(--pd-accent-ink);
  font-weight: 700;
  border-inline-start-color: var(--pd-accent);
}
/* מודגש = משקל + פס-מבטא. רקע-מלא שמור אך ורק לפריט הפעיל,
   אחרת שני פריטים נראים "נבחרים" ואי-אפשר לדעת איפה אנחנו. */
.pd-nav__link.is-strong {
  font-weight: 700;
  /* דרגת-דיו ולא דרגת-ריחוף: כשהפריט גם `is-active` הרקע הוא accent-soft,
     ושם `-hover` נותן 4.31:1 — אותה נפילה שתוארה בפרק 4, בכלל אחר. */
  color: var(--pd-accent-ink);
  border-inline-start-color: var(--pd-accent);
}
.pd-nav__link.is-strong:hover { background: var(--pd-surface-2); }
.pd-nav__link.is-strong.is-active { background: var(--pd-accent-soft); }
.pd-nav__link .ico { flex: none; width: 20px; text-align: center; }

/* תת-תחום בתוך שלב (HR, "עוד") */
.pd-nav__sub { margin: 2px 0 2px 10px; margin-inline-start: 10px; }
.pd-nav__sub > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 9px;
  padding: 7px 12px;
  border-radius: var(--pd-r-sm);
  font-size: 0.88rem; font-weight: 600; color: var(--pd-muted);
  user-select: none;
}
.pd-nav__sub > summary::-webkit-details-marker { display: none; }
.pd-nav__sub > summary:hover { background: var(--pd-surface-2); color: var(--pd-text); }
.pd-nav__sub.has-active > summary { color: var(--pd-accent-hover); }
.pd-nav__sub[open] > .pd-nav__caret, .pd-nav__sub[open] > summary .pd-nav__caret { transform: rotate(180deg); }
.pd-nav__sub .pd-nav__link { margin-inline-start: 8px; font-size: 0.9rem; }
html.pd-nav-mini .pd-nav__sub { margin-inline-start: 0; }
.pd-nav__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-nav__link.is-star .ico { filter: none; }
html.pd-nav-mini .pd-nav__label { display: none; }
html.pd-nav-mini .pd-nav__link { margin-inline-start: 0; justify-content: center; }

.pd-nav__foot {
  border-top: 1px solid var(--pd-border);
  padding: 8px;
  display: flex; align-items: center; gap: 8px;
}
.pd-nav__toggle {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--pd-surface-2); border: 1px solid var(--pd-border);
  border-radius: var(--pd-r-sm); padding: 8px;
  color: var(--pd-muted); font-size: 0.875rem; font-weight: 600;
}
.pd-nav__toggle:hover { background: var(--pd-accent-soft); color: var(--pd-accent-hover); }

/* ידית שינוי-רוחב — על שפת התפריט. גרירה משנה, לחיצה כפולה מאפסת */
.pd-nav__grip {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 8px;
  cursor: col-resize;
  background: transparent;
  touch-action: none;
}
.pd-nav__grip::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 3px;
  width: 2px;
  background: transparent;
  transition: background 0.12s ease;
}
.pd-nav__grip:hover::before,
.pd-nav__grip:focus-visible::before,
html.pd-nav-resizing .pd-nav__grip::before { background: var(--pd-accent); }
.pd-nav__grip:focus-visible { outline: none; }
/* בזמן גרירה — בלי בחירת-טקסט ובלי אנימציית-רוחב שרודפת אחרי העכבר */
html.pd-nav-resizing { user-select: none; cursor: col-resize; }
html.pd-nav-resizing body, html.pd-nav-resizing .pd-nav { transition: none !important; }

/* פתיחה במסך צר */
.pd-nav__burger {
  position: fixed; inset-block-start: 12px; inset-inline-start: 12px; z-index: 950;
  display: none;
  background: var(--pd-surface); color: var(--pd-accent-ink);
  border: 1px solid var(--pd-border-strong); border-radius: var(--pd-r-sm);
  padding: 9px 13px; font-size: 1rem; font-weight: 700;
  box-shadow: var(--pd-shadow-2);
}
.pd-nav__veil {
  position: fixed; inset: 0; background: rgba(30,42,50,0.35);
  z-index: 890; display: none;
}

@media (max-width: 1024px) {
  .pd-nav { transform: translateX(100%); transition: transform 0.18s ease; }
  html[dir="rtl"] .pd-nav { transform: translateX(100%); }
  html.pd-nav-open .pd-nav { transform: translateX(0); }
  html.pd-nav-open .pd-nav__veil { display: block; }
  .pd-nav__burger { display: block; }
  html.pd-nav-mini .pd-nav { width: var(--pd-nav-w); }
}

/* ==========================================================================
   9. עזרי-פריסה
   ========================================================================== */

.pd-stack   { display: flex; flex-direction: column; gap: 12px; }
.pd-row     { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pd-push-end{ margin-inline-start: auto; }
.pd-mt      { margin-block-start: 16px; }
.pd-hide    { display: none !important; }