* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", "Heebo", Arial,
        sans-serif;
}

:root {
    --color-primary: #2f4f7f;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
    --color-info: #0ea5e9;
    --color-muted: #64748b;
    /* Brand colors — set dynamically by branding.js only when custom branding is saved.
       These are NOT applied by default — original design stays intact. */
    --brand-primary:    #2563eb;
    --brand-secondary:  #1d4ed8;
    --brand-primary-10: #2563eb1a;
    --brand-primary-20: #2563eb33;

    /* ── אינטראקציה על כרטיס לחיץ ──
       ריחוף = המסגרת בלבד נצבעת בכחול עדין. בלי הרמה, בלי צל, ובלי צביעת
       פנים הכרטיס: התוכן שם הוא מספרים כספיים והוא חייב להישאר על לבן.
       branding.js דורס את --card-accent* כשארגון שמר צבע מותג, ולכן הקו
       נצבע בגוון של הארגון שנמצאים בו.
       כרטיס שיש לו מסגרת משלו משנה border-color בלבד. כרטיס בלי מסגרת
       (למשל stat-card) מקבל את אותו קו דרך --card-accent-hover. */
    --card-accent:      #2f4f7f;
    --card-accent-soft: rgba(47, 79, 127, 0.45);
    --card-accent-hover: 0 0 0 1px var(--card-accent-soft);
    --card-accent-transition: border-color .18s ease, box-shadow .18s ease;
}

/* ── Scrollbars עדינים (Webkit) ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100,116,139,.28); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.5); }
* { scrollbar-width: thin; scrollbar-color: rgba(100,116,139,.28) transparent; }

/* ── טבלת נתונים משותפת (.data-table) — כותרת דביקה, hover, מיון לכל עמודה,
      יישור מספרים. שומר על המראה הקיים; מיון גנרי דרך sortDataTable(). ── */
.dt-wrap { overflow: auto; max-height: 60vh; border-radius: 8px; }
.dt-count { font-size: 12px; color: #64748b; margin-top: 9px; }
table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table thead th {
    position: sticky; top: 0; z-index: 2; background: #f8fafc;
    text-align: start; padding: 9px 11px; border-bottom: 1px solid #e2e8f0;
    font-weight: 600; color: #475569; white-space: nowrap;
}
.data-table tbody td { padding: 9px 11px; border-bottom: 1px solid #f1f5f9; color: #334155; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: #f8fafc; }
.data-table td.num, .data-table th.num { font-variant-numeric: tabular-nums; text-align: start; }
/* בידוד bidi — מספרים/₪/תאריכים בתא משלהם לא "קופצים" בהקשר עברי. */
.num, td.num, .dt-num { unicode-bidi: isolate; }
/* שדות מספריים — הקלדה משמאל-לימין (טבעי למספרים) בטופס RTL. */
input[type="number"], input[type="tel"], input.ltr-num { direction: ltr; }
/* חיצי ה-spinner יורדים בכל המערכת, ולא פר-שדה. ההזנה כאן היא הקלדה, ולחיצים
   נלווית התנהגות הגלגלת: סיבוב גלגל מעל שדה ממוקד משנה את הערך, כלומר סכום
   שמשתנה בזמן שהמשתמש רק גולל בטופס. חסימת הגלגלת עצמה יושבת ב-
   number-input-guard.js — ה-CSS מסתיר את הפקד, ה-JS מנטרל את המחווה. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.data-table th.sortable { cursor: pointer; user-select: none; }
/* צבע הריחוף חייב להיות שונה מרקע העמוד. הוא היה #eef2f7, שהוא בדיוק
   הרקע שב-body מתחת, ולכן כותרת ממוינת בטבלה שיושבת על כרטיס לבן נראתה
   בריחוף כמו חור שנחתך בכרטיס ולא כמו תא מודגש. */
.data-table th.sortable:hover { background: #e2e8f0; }
.data-table th.sortable:focus-visible { outline: 2px solid var(--color-primary, #2f4f7f); outline-offset: -2px; }
.data-table th.sortable .ind { opacity: .35; margin-inline-start: 5px; font-size: 10px; }
.data-table th.sortable .ind::before { content: "\2195"; }
.data-table th.sortable[aria-sort="ascending"] .ind,
.data-table th.sortable[aria-sort="descending"] .ind { opacity: 1; color: var(--color-primary, #2f4f7f); }
.data-table th.sortable[aria-sort="ascending"] .ind::before { content: "\25B2"; }
.data-table th.sortable[aria-sort="descending"] .ind::before { content: "\25BC"; }

body {
    background: #eef2f7;
    min-height: 100vh;
    overflow-x: hidden;
}