/* ==========================================================================
   מערכת מעקב יציאות - עיצוב מרכזי
   RTL מלא, גופני מערכת בלבד (ה-CSP חוסם מקורות חיצוניים)

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

   שלושה מצבים ולא שניים: בחירה מפורשת מסמנת data-theme על
   שורש המסמך, וברירת המחדל "לפי המערכת" לא מסמנת כלום -
   ואז רק prefers-color-scheme קובע. לכן הכהה מוגדר פעמיים:
   פעם מאחורי המדיה (עם שלילת בחירה בהירה מפורשת, כדי
   שבחירה של המשתמש תנצח מערכת הפעלה כהה), ופעם מאחורי
   הסימון עצמו.

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

   שמונת גווני הכיתות זהים בשני המצבים. הם נבדקו ועוברים
   WCAG AA, והתגית עצמה היא ממילא "כדור" בהיר עם דיו כהה -
   שנקרא היטב גם על משטח כהה.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* ---------- המצב הבהיר (פעיל כברירת מחדל) ---------- */
  --bg:            #f1f5f9;
  --surface:       #ffffff;
  --surface-2:     #f8fafc;
  --border:        #e2e8f0;
  --border-strong: #cbd5e1;

  --text:          #0f172a;
  --text-soft:     #475569;
  --text-faint:    #94a3b8;

  --brand:         #4f46e5;
  --brand-dark:    #4338ca;
  --brand-soft:    #eef2ff;
  --on-brand:      #ffffff;

  --ok:            #16a34a;
  --ok-soft:       #dcfce7;
  --ok-hover:      #15803d;
  --warn:          #d97706;
  --warn-soft:     #fef3c7;
  --warn-hover:    #b45309;
  --danger:        #dc2626;
  --danger-soft:   #fee2e2;
  --danger-hover:  #b91c1c;
  --info-soft:     #dbeafe;

  /* טקסט בתוך תיבות ההודעה - כהה מספיק כדי להיקרא על הרקע הרך */
  --alert-info-tx:  #1e40af;
  --alert-ok-tx:    #14532d;
  --alert-warn-tx:  #78350f;
  --alert-error-tx: #7f1d1d;

  /* הודעות צפות - תמיד ניגודיות הפוכה לרקע העמוד */
  --toast-bg:    #0f172a;
  --toast-tx:    #ffffff;
  --toast-ok:    #15803d;
  --toast-error: #b91c1c;
  --toast-warn:  #b45309;

  --over-row-hover: #fecaca;
  --login-glow:     #0ea5e9;

  --radius:        12px;
  --radius-sm:     8px;
  --shadow:        0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-lg:     0 10px 30px rgba(15, 23, 42, .16);
  --header-h:      60px;

  /* --- שמונה גווני כיתות: מילוי / רקע רך / טקסט כהה --- */
  --c1: #2a78d6;  --c1-bg: #eaf2fd;  --c1-tx: #1a5cad;   /* כחול   */
  --c2: #eb6834;  --c2-bg: #fdefe8;  --c2-tx: #b8481c;   /* כתום   */
  --c3: #1baf7a;  --c3-bg: #e7f7f1;  --c3-tx: #0f7d56;   /* טורקיז */
  --c4: #eda100;  --c4-bg: #fdf5e3;  --c4-tx: #8a5d0a;   /* ענבר   */
  --c5: #e87ba4;  --c5-bg: #fdeef4;  --c5-tx: #b03567;   /* ורוד   */
  --c6: #008300;  --c6-bg: #e9f5e9;  --c6-tx: #1b6b1b;   /* ירוק   */
  --c7: #4a3aa7;  --c7-bg: #efedfa;  --c7-tx: #3d3090;   /* סגול   */
  --c8: #e34948;  --c8-bg: #fdecec;  --c8-tx: #b5322f;   /* אדום   */

  /* המספר באריח יושב על המשטח עצמו ולא על רקע רך, ולכן הוא
     צריך גוון משלו ולא את הדיו של התגית. */
  --tile-1: var(--c1-tx);  --tile-2: var(--c2-tx);
  --tile-3: var(--c3-tx);  --tile-4: var(--c4-tx);
  --tile-5: var(--c5-tx);  --tile-6: var(--c6-tx);
  --tile-7: var(--c7-tx);  --tile-8: var(--c8-tx);

  /* שני כפתורי סוג היציאה.
     ------------------------------------------------------------
     יש להם גוונים משלהם ולא של המותג, כי במצב הכהה צבע המותג
     הוא פליז - וכפתור "לינה" בפליז יצא כמעט זהה לכפתור
     "צהריים" הענברי. זו הבחירה הכי נלחצת במערכת, ושתי
     אפשרויות שנראות אותו דבר הן טעות שמחכה לקרות. */
  --type-lunch:       #d97706;
  --type-lunch-hover: #b45309;
  --type-night:       #4f46e5;
  --type-night-hover: #4338ca;
  --type-block:       #dc2626;
  --type-block-hover: #b91c1c;
  --type-ink:         #ffffff;

  /* גרפים. Chart.js מצייר בקנבס ולא קורא CSS, ולכן dashboard.js
     קורא את הערכים האלה בזמן הציור ומצייר מחדש בהחלפת מצב. */
  --chart-series:     #2a78d6;
  --chart-critical:   #d03b3b;
  --chart-tooltip-bg: #22303c;

  /* סולם רציף למפת החום בדשבורד */
  --heat-0:   #eef2f6;
  --heat-1:   #f6ecd9;
  --heat-2:   #ecd6ab;
  --heat-3:   #dcb771;
  --heat-4:   #be9450;
  --heat-ink: #2e230c;

  /* ======================================================================
     מקור הערכים הכהים. מוגדרים תמיד, מופעלים רק דרך המיפוי שלמטה.
     ====================================================================== */
  --d-bg:            #0e141c;
  --d-surface:       #161e29;
  --d-surface-2:     #1d2735;
  --d-border:        #26313f;
  --d-border-strong: #36445a;

  --d-text:          #e9eef6;
  --d-text-soft:     #8c9bb0;
  --d-text-faint:    #63728a;

  --d-brand:         #be9450;
  --d-brand-dark:    #d2a75e;
  --d-brand-soft:    #2a2317;
  --d-on-brand:      #12181f;

  --d-ok:            #56b98a;
  --d-ok-soft:       #16281f;
  --d-ok-hover:      #6ec99b;
  --d-warn:          #d8a93f;
  --d-warn-soft:     #2b2313;
  --d-warn-hover:    #e5bb5c;
  --d-danger:        #e0605a;
  --d-danger-soft:   #2c1817;
  --d-danger-hover:  #c94f49;
  --d-info-soft:     #14202e;

  --d-alert-info-tx:  #bfd8ff;
  --d-alert-ok-tx:    #b6e8cd;
  --d-alert-warn-tx:  #f0d79a;
  --d-alert-error-tx: #f5c2bf;

  --d-toast-bg:    #1d2735;
  --d-toast-tx:    #e9eef6;
  --d-toast-ok:    #2f7a57;
  --d-toast-error: #a33f3a;
  --d-toast-warn:  #8a6a25;

  --d-over-row-hover: #3a1e1c;
  --d-login-glow:     #4a7fa8;

  --d-shadow:    0 1px 2px rgba(0, 0, 0, .4);
  --d-shadow-lg: 0 12px 34px rgba(0, 0, 0, .55);

  /* גווני האריחים מוארים למצב כהה - אותה משפחה, בהירות שנקראת */
  --d-tile-1: #6fa8dc;  --d-tile-2: #f08a5c;
  --d-tile-3: #4bc79a;  --d-tile-4: #e8bb52;
  --d-tile-5: #f0a0bf;  --d-tile-6: #56b98a;
  --d-tile-7: #9b8ee0;  --d-tile-8: #e0605a;

  /* ענבר עמוק מול כחול עמוק - נבדלים גם בגוון וגם בבהירות,
     ושניהם נושאים טקסט לבן בבירור. */
  --d-type-lunch:       #a8741a;
  --d-type-lunch-hover: #c08a28;
  --d-type-night:       #2f5f96;
  --d-type-night-hover: #3a72b0;
  --d-type-block:       #a83a33;
  --d-type-block-hover: #c04a42;
  --d-type-ink:         #ffffff;

  --d-chart-series:     #6fa8dc;
  --d-chart-critical:   #e0605a;
  --d-chart-tooltip-bg: #0e141c;

  --d-heat-0:   #121a24;
  --d-heat-1:   rgba(190, 148, 80, .22);
  --d-heat-2:   rgba(190, 148, 80, .40);
  --d-heat-3:   rgba(190, 148, 80, .62);
  --d-heat-4:   #be9450;
  --d-heat-ink: #1a1206;
}

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

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--d-bg);                     --surface: var(--d-surface);
    --surface-2: var(--d-surface-2);       --border: var(--d-border);
    --border-strong: var(--d-border-strong);
    --text: var(--d-text);                 --text-soft: var(--d-text-soft);
    --text-faint: var(--d-text-faint);
    --brand: var(--d-brand);               --brand-dark: var(--d-brand-dark);
    --brand-soft: var(--d-brand-soft);     --on-brand: var(--d-on-brand);
    --ok: var(--d-ok);                     --ok-soft: var(--d-ok-soft);
    --ok-hover: var(--d-ok-hover);
    --warn: var(--d-warn);                 --warn-soft: var(--d-warn-soft);
    --warn-hover: var(--d-warn-hover);
    --danger: var(--d-danger);             --danger-soft: var(--d-danger-soft);
    --danger-hover: var(--d-danger-hover); --info-soft: var(--d-info-soft);
    --alert-info-tx: var(--d-alert-info-tx);
    --alert-ok-tx: var(--d-alert-ok-tx);
    --alert-warn-tx: var(--d-alert-warn-tx);
    --alert-error-tx: var(--d-alert-error-tx);
    --toast-bg: var(--d-toast-bg);         --toast-tx: var(--d-toast-tx);
    --toast-ok: var(--d-toast-ok);         --toast-error: var(--d-toast-error);
    --toast-warn: var(--d-toast-warn);
    --over-row-hover: var(--d-over-row-hover);
    --login-glow: var(--d-login-glow);
    --shadow: var(--d-shadow);             --shadow-lg: var(--d-shadow-lg);
    --tile-1: var(--d-tile-1);  --tile-2: var(--d-tile-2);
    --tile-3: var(--d-tile-3);  --tile-4: var(--d-tile-4);
    --tile-5: var(--d-tile-5);  --tile-6: var(--d-tile-6);
    --tile-7: var(--d-tile-7);  --tile-8: var(--d-tile-8);
    --type-lunch: var(--d-type-lunch);
    --type-lunch-hover: var(--d-type-lunch-hover);
    --type-night: var(--d-type-night);
    --type-night-hover: var(--d-type-night-hover);
    --type-block: var(--d-type-block);
    --type-block-hover: var(--d-type-block-hover);
    --type-ink: var(--d-type-ink);
    --chart-series: var(--d-chart-series);
    --chart-critical: var(--d-chart-critical);
    --chart-tooltip-bg: var(--d-chart-tooltip-bg);
    --heat-0: var(--d-heat-0);  --heat-1: var(--d-heat-1);
    --heat-2: var(--d-heat-2);  --heat-3: var(--d-heat-3);
    --heat-4: var(--d-heat-4);  --heat-ink: var(--d-heat-ink);
  }
}

:root[data-theme="dark"] {
  --bg: var(--d-bg);                     --surface: var(--d-surface);
  --surface-2: var(--d-surface-2);       --border: var(--d-border);
  --border-strong: var(--d-border-strong);
  --text: var(--d-text);                 --text-soft: var(--d-text-soft);
  --text-faint: var(--d-text-faint);
  --brand: var(--d-brand);               --brand-dark: var(--d-brand-dark);
  --brand-soft: var(--d-brand-soft);     --on-brand: var(--d-on-brand);
  --ok: var(--d-ok);                     --ok-soft: var(--d-ok-soft);
  --ok-hover: var(--d-ok-hover);
  --warn: var(--d-warn);                 --warn-soft: var(--d-warn-soft);
  --warn-hover: var(--d-warn-hover);
  --danger: var(--d-danger);             --danger-soft: var(--d-danger-soft);
  --danger-hover: var(--d-danger-hover); --info-soft: var(--d-info-soft);
  --alert-info-tx: var(--d-alert-info-tx);
  --alert-ok-tx: var(--d-alert-ok-tx);
  --alert-warn-tx: var(--d-alert-warn-tx);
  --alert-error-tx: var(--d-alert-error-tx);
  --toast-bg: var(--d-toast-bg);         --toast-tx: var(--d-toast-tx);
  --toast-ok: var(--d-toast-ok);         --toast-error: var(--d-toast-error);
  --toast-warn: var(--d-toast-warn);
  --over-row-hover: var(--d-over-row-hover);
  --login-glow: var(--d-login-glow);
  --shadow: var(--d-shadow);             --shadow-lg: var(--d-shadow-lg);
  --tile-1: var(--d-tile-1);  --tile-2: var(--d-tile-2);
  --tile-3: var(--d-tile-3);  --tile-4: var(--d-tile-4);
  --tile-5: var(--d-tile-5);  --tile-6: var(--d-tile-6);
  --tile-7: var(--d-tile-7);  --tile-8: var(--d-tile-8);
  --type-lunch: var(--d-type-lunch);
  --type-lunch-hover: var(--d-type-lunch-hover);
  --type-night: var(--d-type-night);
  --type-night-hover: var(--d-type-night-hover);
  --type-block: var(--d-type-block);
  --type-block-hover: var(--d-type-block-hover);
  --type-ink: var(--d-type-ink);
  --chart-series: var(--d-chart-series);
  --chart-critical: var(--d-chart-critical);
  --chart-tooltip-bg: var(--d-chart-tooltip-bg);
  --heat-0: var(--d-heat-0);  --heat-1: var(--d-heat-1);
  --heat-2: var(--d-heat-2);  --heat-3: var(--d-heat-3);
  --heat-4: var(--d-heat-4);  --heat-ink: var(--d-heat-ink);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; min-height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "Noto Sans Hebrew", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

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

h1, h2, h3 { margin: 0 0 12px; line-height: 1.35; font-weight: 700; }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }

/* ==========================================================================
   סרגל עליון
   ========================================================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 11px 20px 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.topbar h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  width: 100%;
}

.topbar h1 .sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 3px 11px;
  border-radius: 999px;
}

nav.tabs {
  display: flex;
  gap: 4px;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: none;
  margin: 0;
}
nav.tabs::-webkit-scrollbar { display: none; }

nav.tabs a {
  padding: 9px 15px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--text-soft);
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
nav.tabs a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
nav.tabs a.active {
  background: var(--brand-soft);
  color: var(--brand-dark);
  border-bottom-color: var(--brand);
}

/* ---------- המשתמש המחובר ---------- */
.userbox {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 5px 4px 11px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 13px;
  white-space: nowrap;
}
.userbox .who { display: flex; align-items: center; gap: 7px; }
.userbox .role {
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 9px;
  background: var(--brand-soft);
  color: var(--brand-dark);
}
.userbox .role-approver { background: var(--ok-soft); color: var(--ok); }
.userbox .role-viewer   { background: var(--surface); color: var(--text-soft); border: 1px solid var(--border); }
.userbox .logout {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  padding: 5px 12px;
  font-size: 13px;
  box-shadow: none;
  border-radius: var(--radius-sm);
}
.userbox .logout:hover { background: var(--surface-2); }

/* ==========================================================================
   פריסה
   ========================================================================== */

.wrap { max-width: 1240px; margin: 0 auto; padding: 22px 20px 60px; }
.wrap.narrow { max-width: 760px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}
.card > h2:first-child { margin-top: 0; }

.card h2 {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}
.card h2 .count {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-dark);
  background: var(--brand-soft);
  border-radius: 999px;
  padding: 2px 10px;
}

.muted { color: var(--text-soft); }
.small { font-size: 13px; }
.empty { text-align: center; color: var(--text-soft); padding: 44px 20px; }

/* ==========================================================================
   טפסים
   ========================================================================== */

.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }

label {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
}

input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="search"], input[type="tel"],
input[type="date"], select, textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;          /* 15px ומעלה מונע זום אוטומטי באייפון */
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
input:disabled, select:disabled { background: var(--surface-2); color: var(--text-faint); cursor: not-allowed; }
input::placeholder { color: var(--text-faint); }

.search-big {
  font-size: 18px !important;
  padding: 13px 15px !important;
}

.field .hint, .hint { margin: 5px 0 0; font-size: 12px; color: var(--text-faint); line-height: 1.6; }

.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 12px;
  align-items: end;
}

/* קוד מספרי - ספרות גדולות ומרווחות */
.pin-input {
  font-family: "Cascadia Mono", Consolas, monospace !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  letter-spacing: 12px !important;
  text-align: center !important;
  direction: ltr !important;
  padding: 14px 12px !important;
}

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

button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--on-brand);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, opacity .15s, transform .05s;
}
button:hover, .btn:hover { background: var(--brand-dark); }
button:active, .btn:active { transform: translateY(1px); }
button:disabled, .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

button.ghost, .btn.ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
button.ghost:hover, .btn.ghost:hover { background: var(--surface-2); }

button.danger, .btn.danger { background: var(--danger); color: var(--on-brand); }
button.danger:hover { background: var(--danger-hover); }

button.success, .btn.ok { background: var(--ok); color: var(--on-brand); }
button.success:hover { background: var(--ok-hover); }

button.tiny, .btn.small { padding: 6px 11px; font-size: 13px; }

.btn-row { display: flex; gap: 9px; flex-wrap: wrap; }

/* ==========================================================================
   תגיות והודעות
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--text-soft);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.badge.soft   { background: var(--surface-2); color: var(--text-soft); font-weight: 600; }
.badge.warn   { background: var(--warn-soft);   color: var(--warn);   border-color: transparent; }
.badge.over   { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.badge.locked { background: var(--danger);      color: var(--on-brand); border-color: transparent; }

.alert-box {
  display: block;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 16px;
  border: 1px solid transparent;
}
.alert-box.info    { background: var(--info-soft);   color: var(--alert-info-tx); }
.alert-box.ok      { background: var(--ok-soft);     color: var(--alert-ok-tx); }
.alert-box.warning { background: var(--warn-soft);   color: var(--alert-warn-tx); }
.alert-box.error   { background: var(--danger-soft); color: var(--alert-error-tx); }
.alert-box.danger-zone {
  background: var(--danger-soft);
  color: var(--alert-error-tx);
  border-color: color-mix(in srgb, var(--danger) 30%, transparent);
}
.alert-box a { color: inherit; font-weight: 700; }

/* ==========================================================================
   הודעות צפות
   ========================================================================== */

#toast-host {
  position: fixed;
  bottom: 20px;
  inset-inline-start: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 9px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  max-width: 420px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--toast-bg);
  color: var(--toast-tx);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  animation: toast-in .2s ease-out;
}
.toast.ok    { background: var(--toast-ok); }
.toast.error { background: var(--toast-error); }
.toast.warn  { background: var(--toast-warn); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* ==========================================================================
   טבלאות
   ========================================================================== */

.table-scroll { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
th {
  text-align: right;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  background: none;
}
td {
  text-align: right;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
tbody tr:hover { background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }
tr.over-threshold { background: var(--danger-soft); }
tr.over-threshold:hover { background: var(--over-row-hover); }
tr.inactive-row { opacity: .55; }

/* ==========================================================================
   אריחי מדדים
   ========================================================================== */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.tile {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.tile .value { font-size: 26px; font-weight: 800; line-height: 1.2; }
.tile .label { font-size: 13px; color: var(--text-soft); margin-top: 2px; }

/* הגוון צובע את המספר בלבד; הרקע נשאר לבן כמו בכספת */
.tile-1 .value { color: var(--tile-1); }
.tile-2 .value { color: var(--tile-2); }
.tile-3 .value { color: var(--tile-3); }
.tile-4 .value { color: var(--tile-4); }
.tile-5 .value { color: var(--tile-5); }
.tile-6 .value { color: var(--tile-6); }
.tile-7 .value { color: var(--tile-7); }
.tile-8 .value { color: var(--tile-8); }

.tile.clickable { cursor: pointer; }
.tile.clickable:hover { border-color: var(--brand); box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.tile.clickable:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tile .tile-hint { font-size: 11px; margin-top: 6px; color: var(--text-faint); font-weight: 600; }

/* ==========================================================================
   רשימת תוצאות חיפוש
   ========================================================================== */

.results { display: flex; flex-direction: column; gap: 10px; }

.student-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: right;
  padding: 14px 15px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.student-row:hover {
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: var(--shadow-lg);
  transform: translateY(-1px);
}
.student-row .grow { flex: 1; min-width: 0; }
.student-row .name {
  display: block;
  font-weight: 700;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.student-row .meta { display: block; font-size: 13px; color: var(--text-soft); margin-top: 3px; }

.student-row.locked { opacity: .65; cursor: not-allowed; border-color: var(--border); }
.student-row.locked:hover {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger) 35%, transparent);
  box-shadow: var(--shadow);
  transform: none;
}
.student-row.locked .name { text-decoration: line-through; text-decoration-color: var(--text-faint); }

/* תג צבע לכל כיתה - נקבע לפי שם הכיתה ולא לפי מיקום ברשימה */
.cls {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}
.cls-1 { background: var(--c1-bg); color: var(--c1-tx); }
.cls-2 { background: var(--c2-bg); color: var(--c2-tx); }
.cls-3 { background: var(--c3-bg); color: var(--c3-tx); }
.cls-4 { background: var(--c4-bg); color: var(--c4-tx); }
.cls-5 { background: var(--c5-bg); color: var(--c5-tx); }
.cls-6 { background: var(--c6-bg); color: var(--c6-tx); }
.cls-7 { background: var(--c7-bg); color: var(--c7-tx); }
.cls-8 { background: var(--c8-bg); color: var(--c8-tx); }
.cls-0 { background: var(--surface-2); color: var(--text-soft); }

.counts { display: flex; flex-direction: column; gap: 5px; align-items: stretch; text-align: center; }

.quota {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--warn);
  background: var(--warn-soft);
  border-radius: 999px;
  padding: 2px 9px;
  margin-top: 4px;
}

/* ==========================================================================
   שורות "בחוץ עכשיו" ו"יציאות היום"
   ========================================================================== */

.out-list { display: flex; flex-direction: column; gap: 10px; }

.out-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  background: var(--warn-soft);
  border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent);
  border-radius: var(--radius);
}
.out-row .grow { flex: 1; min-width: 0; }
.out-row .name { font-weight: 700; }
.out-row.calm { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow); }
.out-row.soon { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }

.out-row .stamp {
  font-family: "Cascadia Mono", Consolas, monospace;
  font-weight: 700;
  font-size: 14px;
  color: var(--brand-dark);
  background: var(--brand-soft);
  border-radius: var(--radius-sm);
  padding: 5px 11px;
  white-space: nowrap;
}
.out-row .stamp.back {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.35;
  font-size: 13px;
}
.out-row .countdown { font-size: 11px; opacity: .8; }

.type-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 9px;
  margin-inline-end: 5px;
}
.type-tag.lunch      { background: var(--warn-soft);   color: var(--warn); }
.type-tag.overnight  { background: var(--brand-soft);  color: var(--brand-dark); }
.type-tag.override   { background: var(--danger-soft); color: var(--danger); }
.type-tag.back-early { background: var(--ok-soft);     color: var(--ok); }

/* מי שחרר את התלמיד. גוון נייטרלי ולא סטטוס: זו עובדה על
   הרישום, לא אזהרה - ואסור לו להתחרות בתגית סוג היציאה. */
.type-tag.by {
  background: var(--surface-2);
  color: var(--text-soft);
  border: 1px solid var(--border);
  font-weight: 600;
}

.cancel-x {
  background: transparent !important;
  color: var(--text-faint) !important;
  border: 1px solid transparent !important;
  font-size: 18px;
  line-height: 1;
  padding: 4px 10px !important;
  font-weight: 700;
}
.cancel-x:hover {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border-color: transparent !important;
}

/* ==========================================================================
   בחירת סוג יציאה
   ========================================================================== */

.type-picker {
  padding: 17px;
  background: var(--surface);
  border: 2px solid var(--brand);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.type-picker.locked { border-color: var(--danger); }
.type-picker .picked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 15px;
  margin-bottom: 14px;
}

.override-note {
  font-size: 13px;
  color: var(--alert-error-tx);
  background: var(--danger-soft);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  margin-bottom: 13px;
  line-height: 1.65;
}

.type-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .type-buttons { grid-template-columns: 1fr; } }

.type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 20px 15px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  color: var(--type-ink);
  text-align: center;
  line-height: 1.4;
}
.type-btn .t { font-size: 20px; font-weight: 800; }
.type-btn .s { font-size: 13px; opacity: .95; font-weight: 600; }
.type-btn .n { font-size: 11px; opacity: .85; font-weight: 500; }
.type-btn.lunch     { background: var(--type-lunch); }
.type-btn.lunch:hover { background: var(--type-lunch-hover); }
.type-btn.overnight { background: var(--type-night); }
.type-btn.overnight:hover { background: var(--type-night-hover); }
.type-btn.needs-approval { background: var(--type-block); }
.type-btn.needs-approval:hover { background: var(--type-block-hover); }
.type-btn.needs-approval .n {
  background: rgba(255, 255, 255, .22);
  border-radius: 999px;
  padding: 1px 9px;
  opacity: 1;
  font-weight: 700;
}

/* ==========================================================================
   גרפים
   ========================================================================== */

.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 18px; }
.chart-box { position: relative; height: 300px; }

/* ==========================================================================
   מסך התחברות
   ========================================================================== */

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(900px 500px at 80% -10%, color-mix(in srgb, var(--brand) 22%, transparent), transparent),
    radial-gradient(700px 400px at 10% 110%, color-mix(in srgb, var(--login-glow) 18%, transparent), transparent),
    var(--bg);
}
.login-wrap { display: contents; }

.login-card {
  width: 100%;
  max-width: 430px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 32px 28px;
  text-align: center;
}
.login-card h1 { margin: 8px 0 4px; font-size: 21px; }
.login-card p { margin: 0; color: var(--text-soft); font-size: 14px; }
.login-logo { margin-bottom: 4px; }
.login-logo img { border-radius: 12px; }
.login-card .field { text-align: right; }
.login-help { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }

/* ==========================================================================
   שונות
   ========================================================================== */

.status-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-inline-end: 8px;
  vertical-align: middle;
  background: var(--border-strong);
}
.status-dot.ok  { background: var(--ok); }
.status-dot.bad { background: var(--danger); }

code {
  font-family: "Cascadia Mono", Consolas, monospace;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 13px;
  direction: ltr;
  display: inline-block;
}

.mono {
  font-family: "Cascadia Mono", Consolas, monospace;
  direction: ltr;
  text-align: left;
  letter-spacing: .3px;
}

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

/* ---------- כפתור בהיר/כהה ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  flex: none;
  background: var(--surface-2);
  color: var(--text-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
}
.theme-toggle:hover { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.theme-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.theme-toggle svg { width: 17px; height: 17px; display: block; }

/* הכפתור נכנס לכותרת לפני תיבת המשתמש (הוא נטען מוקדם יותר),
   ולכן הוא זה שמקבל את הדחיפה לקצה - והתיבה נצמדת אליו. */
.topbar h1 .theme-toggle { margin-inline-start: auto; }
.topbar h1 .theme-toggle + .userbox { margin-inline-start: 8px; }

.login-page .theme-toggle {
  position: fixed;
  top: 16px;
  inset-inline-end: 16px;
  z-index: 10;
  background: var(--surface);
  box-shadow: var(--shadow);
}

/* ---------- כותרת הדשבורד ---------- */
.board-head { padding: 4px 2px 20px; }
.board-head .kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--brand);
}
.board-head h2 {
  margin: 10px 0 7px;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.board-head p { margin: 0; max-width: 62ch; color: var(--text-soft); font-size: 14px; }

/* ---------- מפת החום ---------- */
.heat-scroll { overflow-x: auto; }
.heat-grid {
  --hours: 12;              /* נדרס ב-JS לפי טווח השעות בפועל */
  min-width: 560px;
  display: grid;
  grid-template-columns: 44px repeat(var(--hours), minmax(26px, 1fr));
  gap: 3px;
  align-items: center;
}
.heat-grid .day {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-soft);
  text-align: center;
}
.heat-grid .hour {
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-faint);
  text-align: center;
  padding-top: 7px;
}
.heat-grid .cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: 3px;
  background: var(--heat-0);
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.heat-grid .cell.h1 { background: var(--heat-1); }
.heat-grid .cell.h2 { background: var(--heat-2); }
.heat-grid .cell.h3 { background: var(--heat-3); }
.heat-grid .cell.h4 { background: var(--heat-4); color: var(--heat-ink); }
.heat-grid .cell.now { box-shadow: inset 0 0 0 2px var(--danger); }

.heat-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 15px;
  font-size: 12px;
  color: var(--text-faint);
}
.heat-legend i { width: 26px; height: 11px; border-radius: 2px; display: block; }
.heat-legend .peak { margin-inline-start: auto; }

/* ---------- קו הרכס: יציאות לפי שעה ---------- */
.ridge { margin-top: 26px; }
.ridge svg { display: block; width: 100%; height: 108px; }
.ridge .ridge-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-faint);
}

.insight {
  margin-top: 16px;
  padding: 13px 16px;
  background: var(--surface-2);
  border-inline-start: 3px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-soft);
}
.insight b { color: var(--text); font-weight: 700; }
.insight .n {
  font-family: "Cascadia Mono", Consolas, monospace;
  font-weight: 700;
  color: var(--brand);
}

/* ---------- מי שחרר ---------- */
.releasers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.releaser {
  padding: 14px 16px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.releaser .who { font-size: 15px; font-weight: 700; }
.releaser .val { display: flex; align-items: baseline; gap: 8px; margin-top: 5px; }
.releaser .val .n {
  font-family: "Cascadia Mono", Consolas, monospace;
  font-size: 25px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brand);
}
.releaser .val .u { font-size: 12px; color: var(--text-soft); }
.releaser .meter { height: 4px; background: var(--bg); margin-top: 10px; border-radius: 2px; overflow: hidden; }
.releaser .meter i { display: block; height: 100%; background: var(--brand); }
.releaser .ovr { margin-top: 8px; font-size: 11px; color: var(--text-faint); }
.releaser .ovr b { color: var(--danger); font-weight: 700; }

/* ==========================================================================
   מסכים קטנים
   ========================================================================== */

@media (max-width: 720px) {
  .topbar { padding: 10px 12px 0; gap: 8px 12px; }
  .topbar h1 .sub { display: none; }
  .userbox { padding: 3px 4px 3px 9px; }
  .userbox .who b { display: none; }
  .wrap { padding: 16px 12px 50px; }
  .card { padding: 16px; }
  .table-scroll { margin: 0 -16px; padding: 0 16px; }
  .tile .value { font-size: 23px; }
  nav.tabs a { padding: 9px 12px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .student-row:hover, .tile.clickable:hover { transform: none; }
}

/* בהדפסה תמיד בהיר, גם כשהמסך כהה: דף כהה שורף טונר ויוצא
   אפור. הדריסה היא ברמת המשתנים, ולכן כל הרכיבים נגררים איתה. */
@media print {
  :root, :root[data-theme="dark"] {
    --bg: #ffffff;         --surface: #ffffff;    --surface-2: #ffffff;
    --border: #cbd5e1;     --border-strong: #94a3b8;
    --text: #000000;       --text-soft: #333333;  --text-faint: #666666;
    --shadow: none;        --shadow-lg: none;
    --heat-0: #f1f1f1;     --heat-1: #f6ecd9;     --heat-2: #ecd6ab;
    --heat-3: #dcb771;     --heat-4: #be9450;     --heat-ink: #2e230c;
  }
  .topbar, .filters, button, #toast-host { display: none !important; }
  .card { box-shadow: none; }
  body { background: #fff; }
}

/* ============================================================
   תזמון יציאה
   ------------------------------------------------------------
   מקופל כברירת מחדל. רוב הרישומים הם מיידיים, והשדות האלה
   היו מוסיפים רעש למסך שכל תכליתו לחיצה אחת מהירה.
   ============================================================ */
.sched { margin-top: 14px; border-top: 1px solid var(--border, #e2e8f0); padding-top: 10px; }
.sched > summary {
  cursor: pointer; font-size: .95rem; font-weight: 600;
  opacity: .8; padding: 4px 0; list-style: none;
}
.sched > summary::-webkit-details-marker { display: none; }
.sched > summary::before { content: '⏱ '; }
.sched[open] > summary { opacity: 1; }

.sched-body { padding: 10px 2px 4px; display: flex; flex-direction: column; gap: 12px; }
.sched-note { font-size: .88rem; opacity: .75; line-height: 1.5; margin: 0; }
.sched-row { display: flex; gap: 12px; flex-wrap: wrap; }
.sched-row label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 150px; }
.sched-row label > span { font-size: .82rem; opacity: .75; }
.sched-row input, .sched-row select {
  padding: 10px; border-radius: 10px;
  border: 1px solid var(--border, #cbd5e1);
  background: var(--card, #fff); color: inherit;
  font-size: 1rem; font-family: inherit;
}