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

:root{
  --bg:#EEF1F6;
  --surface:#FFFFFF;
  --surface-2:#F5F7FB;
  --ink:#16202E;
  --ink-muted:#5B6B82;
  --ink-faint:#93A1B5;
  --line:#DDE2EB;
  --line-strong:#C1C9D6;
  --accent:#1F3A5F;
  --accent-hover:#16283F;
  --accent-soft:#E4EAF3;
  --teal:#0B7285;
  --teal-soft:#DFF1F3;
  --blue:#2F6FB0;
  --blue-soft:#E3EDF8;
  --amber:#B3690A;
  --amber-soft:#F6E9D6;
  --danger:#C0392B;
  --danger-soft:#F8E1DE;
  --good:#1E8A5A;
  --good-soft:#DFF1E7;
  --brand:#D6455A;
  --shadow:0 1px 2px rgba(22,32,46,.06), 0 8px 24px -12px rgba(22,32,46,.18);
  --radius:14px;
  --font-display:"Rubik","Segoe UI",Arial,sans-serif;
  --font-body:"Assistant","Segoe UI",Arial,sans-serif;
  --font-mono:"JetBrains Mono","Consolas",monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#10151D; --surface:#1A212C; --surface-2:#212934;
    --ink:#ECEFF4; --ink-muted:#9DAAC0; --ink-faint:#67748A;
    --line:#2B3441; --line-strong:#3A4552;
    --accent:#7FA6D9; --accent-hover:#9BBBE6; --accent-soft:#233348;
    --teal:#4FC3D6; --teal-soft:#12303A;
    --blue:#7FADE0; --blue-soft:#182A3E;
    --amber:#E3A34B; --amber-soft:#382a12;
    --danger:#E5776A; --danger-soft:#3A1E1B;
    --good:#5FCB9B; --good-soft:#123625;
    --brand:#F17A8C;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  }
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); }
body{
  direction:rtl; font-family:var(--font-body); color:var(--ink);
  min-height:100vh; font-size:15px; line-height:1.5;
}
h1,h2,h3{ font-family:var(--font-display); margin:0; }
a{ color:var(--accent); }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ---------- shell: top bar + main ----------
   התפריט עבר מעמודה אנכית בצד הימני לרצועה אופקית קבועה בראש המסך
   (ר' core/base.html) - עיצוב מודרני יותר, ובעיקר מחזיר לתוכן הראשי את
   הרוחב שהתפריט הצדדי תפס. קבוצות התפריט (למשל "ניהול פיננסי וארגוני")
   נפתחות עכשיו כתפריטון (dropdown) מתחת לכותרת שלהן, במקום עמודה
   שנפתחת בתוך התפריט עצמו - ר' .tb-group/.tb-drop למטה. */
.shell{ display:flex; flex-direction:column; min-height:100vh; }
.topbar{
  display:flex; align-items:center; gap:16px; padding:0 20px; height:60px; flex:none;
  background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20;
}
.tb-brand{ display:flex; align-items:center; gap:9px; flex:none; }
.tb-brand .mark{ width:32px; height:32px; border-radius:50%; flex:none;
  object-fit:cover; background:#fff; border:1px solid var(--line); }
.tb-brand .txt{ display:flex; flex-direction:column; line-height:1.25; }
.tb-brand strong{ font-family:var(--font-display); font-size:13.5px; font-weight:700; }
.tb-brand span{ color:var(--ink-muted); font-size:11px; font-weight:600; }

.tb-nav{
  flex:1; min-width:0; display:flex; align-items:stretch; gap:1px; flex-wrap:nowrap;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; height:100%;
}
.tb-nav::-webkit-scrollbar{ height:5px; }
.tb-nav::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:999px; }
.tb-nav::-webkit-scrollbar-track{ background:transparent; }

.tb-item{
  all:unset; box-sizing:border-box; display:flex; align-items:center; gap:6px; cursor:pointer;
  padding:0 10px; height:100%; font-family:var(--font-body); font-size:12.8px; font-weight:600;
  color:var(--ink-muted); border-bottom:2.5px solid transparent; white-space:nowrap; flex:none;
  transition:color .12s ease, background .12s ease, border-color .12s ease;
}
a.tb-item{ text-decoration:none; }
.tb-item:hover{ background:var(--surface-2); color:var(--ink); }
.tb-item:focus{ outline:none; }
.tb-item:focus-visible{ box-shadow:inset 0 0 0 2px var(--accent-soft); }
.tb-item.active{ color:var(--brand); border-bottom-color:var(--brand); font-weight:700; }
.tb-item .chev{ width:11px; height:11px; color:var(--ink-faint); transition:transform .18s ease, color .15s ease; flex:none; }
.tb-group.has-active > .tb-item{ color:var(--brand); border-bottom-color:var(--brand); font-weight:700; }
.tb-group.has-active > .tb-item .chev{ color:var(--brand); }
.tb-group[data-open="true"] > .tb-item{ background:var(--surface-2); color:var(--ink); }
.tb-group[data-open="true"] > .tb-item .chev{ transform:rotate(180deg); }

.tb-badge{ display:inline-flex; align-items:center; justify-content:center; min-width:17px; height:17px;
  border-radius:999px; background:var(--danger); color:#fff; font-size:10px; font-weight:800; padding:0 5px; }

.tb-sep{ flex:none; width:1px; align-self:center; height:26px; background:var(--line); margin:0 6px; }

.tb-group{ position:relative; flex:none; }
.tb-drop{
  /* position:fixed (ולא absolute) כדי שהתפריטון לא ייחתך ע"י overflow-x:auto
     שיש ל-.tb-nav (נדרש כדי שכל פריטי התפריט יישארו בשורה אחת עם גלילה
     אופקית בעת הצורך) - עם position:absolute התפריטון נחתך/לא מוצג בכלל
     כי הוא "יוצא" מגבולות ה-overflow של ההורה. המיקום המדויק (top/left/
     right) מחושב ומוצב ב-JS לפי מיקום הכפתור בפועל בכל פתיחה, ר' הסקריפט
     בתחתית core/base.html. */
  position:fixed; min-width:220px; max-width:min(320px, calc(100vw - 16px));
  background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
  padding:6px; display:grid; grid-template-rows:0fr; transition:grid-template-rows .18s ease, opacity .18s ease;
  opacity:0; z-index:1000; visibility:hidden; pointer-events:none;
}
.tb-group[data-open="true"] .tb-drop{ grid-template-rows:1fr; opacity:1; visibility:visible; pointer-events:auto; }
.tb-user[data-open="true"] .tb-user-btn{ background:var(--surface-2); }
.tb-drop-inner{ overflow:hidden; min-height:0; display:flex; flex-direction:column; gap:1px; }
.tb-drop .dlink{
  all:unset; box-sizing:border-box; display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px;
  color:var(--ink-muted); font-weight:600; font-size:13px; cursor:pointer; width:100%;
  transition:background .1s ease, color .1s ease;
}
.tb-drop .dlink:hover{ background:var(--surface-2); color:var(--ink); }
.tb-drop .dlink.active{ background:var(--brand-soft, var(--accent-soft)); color:var(--brand); font-weight:700; }
.tb-drop form{ margin:0; }

.tb-user{ flex:none; display:flex; align-items:center; }
.tb-user-btn{
  all:unset; box-sizing:border-box; display:flex; align-items:center; gap:9px; cursor:pointer;
  padding:6px 8px; border-radius:10px;
}
.tb-user-btn:hover{ background:var(--surface-2); }
.tb-user .who{ text-align:end; line-height:1.25; }
.tb-user .who strong{ display:block; font-size:12px; font-weight:700; color:var(--ink); }
.tb-user .who span{ display:block; font-size:10.5px; color:var(--ink-muted); }
.tb-user .avatar{ width:30px; height:30px; border-radius:50%; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12.5px; flex:none; }
.tb-user .chev{ width:11px; height:11px; color:var(--ink-faint); transition:transform .18s ease; flex:none; }
.tb-user[data-open="true"] .chev{ transform:rotate(180deg); }

/* כפתור "מסך מלא" - מסתיר את שורת התפריט העליונה לגמרי כדי לפנות עוד
   מקום לתוכן (למשל טבלה ארוכה). מצב ההסתרה נשמר בדפדפן בלבד
   (localStorage, ר' core/base.html), אותו עיקרון בדיוק כמו קיפול התפריט
   הצדדי הישן. הכפתור עצמו קבוע (position:fixed) כדי שיישאר נגיש גם
   כשהתפריט מוסתר. */
.fs-toggle{
  position:fixed; top:12px; inset-inline-start:14px; width:28px; height:28px; border-radius:8px;
  background:var(--surface); border:1px solid var(--line-strong); box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:30; padding:0;
  color:var(--ink-muted); transition:color .12s ease, border-color .12s ease;
}
.fs-toggle:hover{ color:var(--accent); border-color:var(--accent); }
.fs-toggle svg{ width:14px; height:14px; }
body.topbar-hidden .topbar{ display:none; }

.nav-section{ margin:2px 0 0; }
.nav-section + .nav-section{ margin-top:2px; }
.nav-section-label{
  font-size:11px; font-weight:700; color:var(--ink-faint); text-transform:uppercase;
  letter-spacing:.03em; margin:14px 6px 4px; cursor:pointer; list-style:none;
  display:flex; align-items:center; gap:6px; user-select:none;
}
.nav-section-label::-webkit-details-marker{ display:none; }
.nav-section-label::before{ content:"◂"; font-size:9px; color:var(--ink-faint); transition:transform .15s ease; }
.nav-section[open] > .nav-section-label::before{ transform:rotate(-90deg); }
.nav-section-label:hover{ color:var(--ink); }
.nav-section-links{ display:flex; flex-direction:column; gap:4px; }

/* קבוצה פתוחה (משמש כרגע רק את "הודעות קודמות שאושרו" ב-notifications/
   inbox.html - התפריט העליון עצמו כבר לא משתמש ב-<details class="nav-
   section">, ר' core/base.html) - כותרת הקבוצה מודגשת באדום כשהיא
   פתוחה, חוזרת למצב הרגיל אוטומטית עם סגירת ה-<details> (התלוי
   ב-[open] בלבד, בלי JS נוסף). */
.nav-section[open] > .nav-section-label{ color:var(--danger); }
.nav-section[open] > .nav-section-label::before{ color:var(--danger); }
.main{ flex:1; min-width:0; padding:22px 26px 60px; }
.page-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.page-head h1{ font-size:21px; font-weight:700; }
.page-head .sub{ color:var(--ink-muted); font-size:13px; margin-top:3px; }

@media (max-width:640px){
  .tb-brand .txt span{ display:none; }
  .tb-user .who{ display:none; }
}

/* ---------- buttons ---------- */
.btn{
  font-weight:700; font-size:13px; border-radius:9px; padding:9px 14px;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  cursor:pointer; display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  transition:background .12s ease, border-color .12s ease, transform .05s ease;
}
.btn:hover{ background:var(--surface-2); }
.btn:active{ transform:translateY(1px); }
/* בלי הכלל הזה, button.hidden=true לא מסתיר בפועל - display:inline-flex
   למעלה גובר על ברירת המחדל [hidden]{display:none} של הדפדפן, ואז נראים
   שני כפתורים (למשל "אישור" ו"ביטול") גם כשה-JS ביקש להציג רק אחד
   (ר' showAlert בטפסי הנהג - modalCancel.hidden). */
.btn[hidden]{ display:none; }
.btn-primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-hover); }
.btn-ghost{ background:transparent; }
.btn-sm{ padding:6px 10px; font-size:12px; border-radius:8px; }
.btn-danger-ghost{ background:transparent; border-color:var(--danger); color:var(--danger); }
.btn-danger-solid{ background:var(--danger); border-color:var(--danger); color:#fff; }
.btn-danger-solid:hover{ filter:brightness(.92); }

/* ספינר קטן לכפתורי פעולה שלוקחים זמן (יבוא קובץ גדול וכו') - ר' למשל
   fleet/templates/fleet/call_import.html ו-customer_import.html: ה-JS שם
   מחליף את תוכן הכפתור בספינר הזה + טקסט "מעלה ומייבא..." מיד עם השליחה,
   כדי שיהיה ברור שהמערכת עובדת ולא "תקועה", ומנטרל לחיצה כפולה. */
@keyframes btn-spin{ to{ transform:rotate(360deg); } }
.spinner{
  display:inline-block; width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(255,255,255,.45); border-top-color:#fff;
  animation:btn-spin .7s linear infinite; flex:none; vertical-align:middle;
}
.btn:not(.btn-primary):not(.btn-danger-solid) .spinner{
  border-color:var(--line-strong); border-top-color:var(--accent);
}

/* ---------- cards / tables ---------- */
.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px 18px 20px; margin-bottom:16px; }
.card h2{ font-size:15px; font-weight:700; margin-bottom:12px; }
.card-alert{ border-color:var(--danger); border-width:1.5px; }
.card-alert h2{ color:var(--danger); }
.grid{ display:grid; gap:14px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:700px){ .grid-3,.grid-2{ grid-template-columns:1fr; } }

.summary-toggle{ margin-bottom:18px; }
.summary-toggle summary{ cursor:pointer; list-style:none; }
.summary-toggle summary::-webkit-details-marker{ display:none; }
.summary-toggle[open] summary{ margin-bottom:14px; }
.stat-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:18px; }
.stat-tile{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px 18px; }
.stat-tile .label{ font-size:12px; font-weight:700; color:var(--ink-muted); margin-bottom:6px; }
.stat-tile .value{ font-family:var(--font-mono); font-size:24px; font-weight:800; }
.stat-tile .value.danger{ color:var(--danger); }
.stat-tile .value.good{ color:var(--good); }
.stat-tile .value.amber{ color:var(--amber); }
.stat-tile .sub{ font-size:11.5px; color:var(--ink-faint); margin-top:4px; }

.table-scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:10px; }
table.list-table{ width:100%; border-collapse:collapse; min-width:560px; font-size:13.5px; background:var(--surface); }
table.list-table thead th{ background:var(--surface-2); color:var(--ink-muted); font-size:11px; font-weight:700;
  text-align:right; padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
table.list-table td{ padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
table.list-table tr:last-child td{ border-bottom:none; }
table.list-table tr:hover td{ background:var(--surface-2); }
table.list-table .num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
table.list-table tfoot td{ font-weight:800; background:var(--surface-2); border-top:2px solid var(--line-strong); border-bottom:none; }
/* מפריד חזותי בין "נתונים" (גולמי, כמו שנרשם במערכת) ל"חישובים" (מבוסס
   על הנתונים) בטבלה - ר' driver_hours/templates/driver_hours/report.html.
   .calc-start מקבל את הקו המפריד עצמו, ושתי הקבוצות מקבלות רקע שונה. */
table.list-table th.calc-col, table.list-table td.calc-col{ background:var(--surface-2); }
table.list-table th.calc-start, table.list-table td.calc-start{ border-inline-start:2px solid var(--line-strong); }
table.list-table tr:hover td.calc-col{ background:var(--accent-soft); }
/* חיצי מיון קטנים ליד כותרות עמודות ניתנות למיון (לדוגמה "תאריך"/"לקוח"
   בטבלת קריאות אמבולנס / עיון בקריאות) - ר' fleet/views.py:_call_sort_urls. */
.sort-arrows{ display:inline-flex; flex-direction:column; gap:1px; margin-inline-start:3px; vertical-align:middle; }
.sort-arrow{ font-size:8px; line-height:1; text-decoration:none; color:var(--ink-faint); }
.sort-arrow:hover{ color:var(--ink-muted); }
.sort-arrow.active{ color:var(--accent); }
/* נסיעת "חזור ליעד" בקריאות אמבולנס - כל השורה בגוון אדום, כדי להבדיל
   במבט חטוף בין נסיעת הלוך לנסיעת חזור (ר' call_list.html). */
table.list-table tr.row-return td{ background:var(--danger-soft); color:var(--danger); }
.row-actions{ display:flex; gap:6px; white-space:nowrap; }

.pill{ display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; border-radius:999px;
  padding:4px 11px; }
.pill-pending{ background:var(--blue-soft); color:var(--blue); }
.pill-cleared{ background:var(--good-soft); color:var(--good); }
.pill-completed{ background:var(--good-soft); color:var(--good); }
.pill-bounced{ background:var(--danger-soft); color:var(--danger); }
.pill-cancelled{ background:var(--surface-2); color:var(--ink-muted); }
.pill-open{ background:var(--blue-soft); color:var(--blue); }
.pill-scheduled-open{ background:var(--danger-soft); color:var(--danger); }
.pill-duplicate{ background:var(--accent-soft); color:var(--accent); margin-inline-start:5px; }
.pill-locked{ background:var(--surface-2); color:var(--ink-muted); border:1px solid var(--line-strong); }
.pill-urgent{ background:var(--danger-soft); color:var(--danger); }
.pill-reminder{ background:var(--amber-soft); color:var(--amber); }
.pill-normal{ background:var(--blue-soft); color:var(--blue); }

.empty-note{ font-size:13px; color:var(--ink-muted); background:var(--surface-2); border-radius:10px; padding:16px;
  text-align:center; }

.waiting-note{ font-size:16px; font-weight:700; color:var(--success, #1a7d3c);
  background:var(--success-soft, #e6f6ea); padding:28px 16px; }

/* ---------- forms ---------- */
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12px; font-weight:700; color:var(--ink-muted); margin-bottom:5px; }
.field input, .field select, .field textarea{
  width:100%; background:var(--surface-2); border:1px solid var(--line-strong); border-radius:8px;
  padding:9px 10px; color:var(--ink); font-size:14px; font-family:var(--font-body);
}
.field textarea{ resize:vertical; min-height:80px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.field .errorlist{ list-style:none; margin:5px 0 0; padding:0; color:var(--danger); font-size:12px; font-weight:600; }
.field-hint{ font-size:11px; color:var(--ink-faint); margin-top:4px; }
.field-check{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }

/* ---------- תיבת הצעות לשדות טקסט חופשי עם "אפשר גם להקליד ערך חדש"
   (למשל סוג טיפול) - כמו datalist רגיל של הדפדפן, אבל ברוחב השדה עצמו:
   לתיבת ה-datalist המובנית של הדפדפן אין דרך אמינה/עקבית לקבוע רוחב,
   ולכן משתמשים כאן בתיבת הצעות עצמאית שנשלטת לגמרי ב-CSS. ---------- */
.suggest-wrap{ position:relative; }
.suggest-list{
  display:none; position:absolute; top:calc(100% + 4px); inset-inline:0; z-index:20;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:8px;
  box-shadow:var(--shadow); max-height:220px; overflow-y:auto; padding:4px;
}
.suggest-list.open{ display:block; }
.suggest-list .opt{ padding:8px 10px; border-radius:6px; font-size:13.5px; cursor:pointer; }
.suggest-list .opt:hover, .suggest-list .opt.active{ background:var(--surface-2); }

/* ---------- "לקוח מזדמן" בפתיחת קריאה (fleet/call_form.html) ובבחירת
   לקוח ב"פתיחת קריאה לפי תאריך" - תיבת חיפוש חי + תוצאות, ר'
   views.customer_search_json. אותו רעיון בדיוק כמו .suggest-list
   למעלה, בשם נפרד כדי לא להתנגש בהתנהגות ה-JS השונה קצת. ---------- */
.customer-mode-toggle{ display:flex; gap:18px; align-items:center; font-size:13px; font-weight:600;
  color:var(--ink); margin-bottom:12px; }
.radio-inline{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-weight:600; }
.radio-inline input{ width:auto; }
.walkin-block{ background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:12px; position:relative; }
.walkin-clear-link{ display:inline-block; margin-inline-start:10px; font-size:11.5px; font-weight:700;
  color:var(--brand); cursor:pointer; }
.walkin-search-results{
  margin-top:4px; background:var(--surface); border:1px solid var(--line-strong); border-radius:8px;
  max-height:180px; overflow-y:auto;
}
.walkin-result-row{ padding:7px 10px; font-size:13px; cursor:pointer; border-bottom:1px solid var(--line); }
.walkin-result-row:last-child{ border-bottom:none; }
.walkin-result-row:hover{ background:var(--surface-2); }

/* ---------- קופסת "נסיעה מקושרת/נבחרת" - כתב התחייבות ידני (מחלקת
   חשבונות), מציגה תקציר קריא-בלבד של הנסיעה שאליה שייכת ההתחייבות. ---------- */
.linked-call-box{
  background:var(--surface-2); border:1px solid var(--line); border-radius:12px;
  padding:12px 16px; margin-bottom:18px; display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.linked-call-box .lc-title{ font-size:12px; font-weight:700; color:var(--ink-muted); margin-bottom:2px; }
.linked-call-box .lc-main{ font-size:15px; font-weight:800; }
.linked-call-box .lc-sub{ font-size:12.5px; color:var(--ink-muted); margin-top:2px; }

.time-row{ display:flex; gap:8px; align-items:stretch; }
.time-field .time-row input{ flex:1 1 50%; min-width:0; }
.time-row .now-btn{ flex:1 1 50%; white-space:nowrap; justify-content:center; font-size:13.5px; padding:9px 12px; }
.time-row .now-btn.is-done{ background:var(--good); border-color:var(--good); color:#fff; }
.time-row .now-btn.is-done:hover{ filter:brightness(.95); }
.time-row .now-btn.is-saving{ background:var(--amber-soft); border-color:var(--amber); color:var(--amber); }
.time-row .now-btn.is-error{ background:var(--danger-soft); border-color:var(--danger); color:var(--danger); }

.btn-block{ width:100%; justify-content:center; min-height:48px; font-size:15px; }
.field-check input{ width:18px; height:18px; }
.field-check label{ font-size:13.5px; font-weight:600; margin:0; }
.form-actions{ display:flex; gap:10px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }

/* "חשבוניות מס משויכות" - תיבת בחירה מרובה מגלילה, בתוך טופס חשבונית
   (ר' invoice_form.html) - רשימת חשבוניות מס לסימון עם checkbox לכל אחת. */
.invoice-picker-box{ max-height:220px; overflow-y:auto; border:1.5px solid var(--line-strong);
  border-radius:10px; padding:10px 14px; background:var(--surface); }
.invoice-picker-box .li-option{ margin-bottom:10px; }
.invoice-picker-box .li-option:last-child{ margin-bottom:0; }
.invoice-picker-box .empty-note{ padding:10px; margin:0; }
.invoice-picker-box .li-taken{ opacity:.65; }
.invoice-picker-box .li-taken label{ cursor:not-allowed; }
.invoice-picker-box .li-option input:disabled{ cursor:not-allowed; }

.filter-bar{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-bottom:16px; }
.filter-bar .field{ margin-bottom:0; min-width:160px; }

/* ---------- כפתור-מתג לסינון (למשל "לקוחות דיאליזה" ב-driver_customers.html) -
   checkbox אמיתי מוסתר בתוך label שמעוצב כפתור, כדי שיהיה נגיש
   (Tab/Enter/קורא מסך) אבל ייראה ויתנהג כמו כפתור לחיץ שמשנה צבע ומראה
   סימן ✓ כשהוא פעיל. ה-:has() נותן משוב מיידי גם לפני שהטופס מוגש
   מחדש; class="active" (מהשרת) הוא רשת ביטחון לדפדפן בלי תמיכה ב-:has(). ---------- */
.filter-toggle-btn{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; user-select:none;
  font-size:13px; font-weight:700; padding:8.5px 16px; border-radius:999px;
  border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink-muted);
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.filter-toggle-btn input{ position:absolute; width:0; height:0; opacity:0; pointer-events:none; }
.filter-toggle-btn:hover{ border-color:var(--brand); color:var(--ink); }
.filter-toggle-btn.active,
.filter-toggle-btn:has(input:checked){
  background:var(--brand); border-color:var(--brand); color:#fff;
}
.filter-toggle-check{ display:none; font-weight:800; }
.filter-toggle-btn.active .filter-toggle-check,
.filter-toggle-btn:has(input:checked) .filter-toggle-check{ display:inline; }

.row-actions-bar{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 16px; }
.row-actions-label{ font-size:12.5px; color:var(--ink-muted); font-weight:700; }
.row-select{ width:19px; height:19px; cursor:pointer; accent-color:var(--accent); }
#select-all-calls{ width:17px; height:17px; cursor:pointer; accent-color:var(--accent); }

/* ---------- messages ---------- */
.messages{ list-style:none; margin:0 0 16px; padding:0; display:flex; flex-direction:column; gap:8px; }
.messages li{ padding:11px 14px; border-radius:10px; font-size:13.5px; font-weight:600; }
.messages .success{ background:var(--good-soft); color:var(--good); }
.messages .error{ background:var(--danger-soft); color:var(--danger); }
.messages .warning{ background:var(--amber-soft); color:var(--amber); }
.messages .info{ background:var(--blue-soft); color:var(--blue); }

/* ---------- login page ---------- */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card{ width:100%; max-width:380px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:30px 26px; }
.login-card .brand-mark{ width:52px; height:52px; border-radius:50%; object-fit:cover;
  background:#fff; border:1px solid var(--line); margin-bottom:16px; }
.login-card h1{ font-size:18px; margin-bottom:4px; }
.login-card .sub{ color:var(--ink-muted); font-size:13px; margin-bottom:20px; }

/* ---------- מסך "הפעלת רישיון" (licensing/activate.html) ---------- */
.lock-mark{ width:52px; height:52px; border-radius:14px; background:var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:16px; }
.lock-mark.is-blocked{ background:var(--danger-soft); color:var(--danger); }
.fp-row{ background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; margin-bottom:20px; }
.fp-row .lbl{ font-size:11.5px; color:var(--ink-faint); font-weight:700; margin-bottom:5px; }
.fp-row .val{ font-family:var(--font-mono); font-size:14.5px; font-weight:700; letter-spacing:.03em; color:var(--ink); }
.code-input{ width:100%; border:1.5px solid var(--line-strong); border-radius:10px; padding:13px 14px;
  font-family:var(--font-mono); font-size:16px; letter-spacing:.08em; text-align:center; color:var(--ink);
  background:var(--surface); margin-bottom:16px; }
.code-input::placeholder{ color:var(--ink-faint); letter-spacing:.04em; }
.lock-foot{ font-size:12px; color:var(--ink-faint); text-align:center; line-height:1.6; margin-top:14px; }
.demo-key-warn{ display:flex; gap:8px; background:var(--danger-soft); color:var(--danger); border-radius:10px;
  padding:10px 12px; font-size:12px; font-weight:600; margin-bottom:18px; line-height:1.6; }

/* ---------- התרעת חידוש רישיון (banner בראש כל מסך, ר' base.html) ---------- */
.license-warn-banner{ display:flex; align-items:center; gap:10px; background:var(--amber-soft);
  border:1px solid var(--amber); color:var(--amber); border-radius:10px; padding:12px 16px;
  margin-bottom:16px; font-size:13.5px; font-weight:600; }
.license-warn-banner a{ color:var(--amber); text-decoration:underline; font-weight:800; }

.print-only{ display:none; }
@media print{
  .topbar, .fs-toggle, .driver-header, .page-head .actions, .no-print, .shift-topbar, .filter-bar, .row-actions-bar{ display:none !important; }
  .shell, .driver-shell{ display:block; }
  .main{ padding:0; }
  body, .card{ background:#fff !important; box-shadow:none !important; }
  .print-only{ display:block !important; margin-bottom:14px; }
}

/* ---------- suppliers ledger: badges, month groups, calc breakdown ---------- */
.badge{ display:inline-flex; align-items:center; font-size:11px; font-weight:700; border-radius:7px;
  padding:3px 9px; background:var(--surface-2); color:var(--ink-muted); border:1px solid var(--line); }
.badge-doc-tax{ background:var(--blue-soft); color:var(--blue); border-color:transparent; }
.badge-doc-receipt{ background:var(--teal-soft); color:var(--teal); border-color:transparent; }
.badge-doc-plain{ background:var(--amber-soft); color:var(--amber); border-color:transparent; }
.badge-credit{ background:var(--danger-soft); color:var(--danger); border-color:transparent; font-weight:800; }
.badge-expense{ background:var(--accent-soft); color:var(--accent); border-color:transparent; }

.details-toggle{ background:transparent; border:1px solid var(--line-strong); border-radius:6px; width:24px; height:24px;
  color:var(--ink-muted); font-size:11px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; }
.details-toggle:hover{ background:var(--surface-2); color:var(--ink); }
tr.calc-row[hidden]{ display:none; }

.month-group{ margin-bottom:18px; }
.month-group-head{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 4px; font-family:var(--font-display); font-weight:700; font-size:13.5px; color:var(--ink); }
.month-group-head .count{ font-weight:600; font-size:11.5px; color:var(--ink-muted); }

.calc-row td{ background:var(--surface-2); border-bottom:1px solid var(--line); padding:8px 12px 10px; }
.calc-bar{ display:flex; gap:16px; flex-wrap:wrap; font-size:11.5px; color:var(--ink-muted); }
.calc-bar b{ font-family:var(--font-mono); color:var(--ink); font-weight:700; }
.calc-bar .cb-deduct b{ color:var(--good); }
.calc-bar .cb-nondeduct b{ color:var(--danger); }

.subtotal-row td{ background:var(--accent-soft); border-bottom:2px solid var(--line-strong);
  font-weight:700; padding:9px 12px; }
.subtotal-row .calc-bar{ font-weight:600; }

.supplier-link{ font-weight:700; text-decoration:none; }
.supplier-link:hover{ text-decoration:underline; }

.vat-preview{ background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; margin:6px 0 16px; display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px 16px; }
.vat-preview .vp-item .vp-label{ font-size:11px; color:var(--ink-muted); font-weight:700; margin-bottom:3px; }
.vat-preview .vp-item .vp-value{ font-family:var(--font-mono); font-size:16px; font-weight:800; }
.vat-preview .vp-item.vp-deduct .vp-value{ color:var(--good); }
.vat-preview .vp-item.vp-nondeduct .vp-value{ color:var(--danger); }

.vat-preset-btns{ display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.vat-preset-btns button{ font-size:11.5px; font-weight:700; border-radius:7px; padding:5px 10px;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-muted); cursor:pointer; }
.vat-preset-btns button:hover{ background:var(--surface-2); color:var(--ink); }

/* ---------- modal (e.g. רישום טיפול לרכב) ---------- */
.modal-backdrop{ position:fixed; inset:0; background:rgba(15,20,28,.55); display:none; align-items:center;
  justify-content:center; padding:20px; z-index:100; }
.modal-backdrop.open{ display:flex; }
.modal{ background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px 22px 20px;
  max-width:520px; width:100%; max-height:90vh; overflow-y:auto; }
.modal h2{ font-size:16px; margin-bottom:4px; }
.modal .modal-sub{ font-size:12.5px; color:var(--ink-muted); margin-bottom:16px; }

/* ---------- מודאל אישור (confirm) - תחליף מעוצב ל-confirm() הנייטיבי של
   הדפדפן (למשל "סיום משמרת", "החלפת רכב") - ר' core/static/core/confirm-modal.js
   ו-core/templates/core/_confirm_modal.html. מופע יחיד בכל דף (מוזרק פעם
   אחת ב-base.html/base_driver.html), מוזן דינמית ע"י ה-JS לפי
   data-confirm-* על כל <form class="js-confirm-form">. ---------- */
.modal.modal-confirm{ max-width:360px; text-align:center; padding:28px 26px 22px; }
.modal-confirm .confirm-icon{
  width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:26px; margin:0 auto 16px; background:var(--danger-soft); color:var(--danger);
}
.modal-confirm.tone-primary .confirm-icon{ background:var(--accent-soft); color:var(--accent); }
.modal-confirm h2{ font-size:17px; margin-bottom:8px; }
.modal-confirm .modal-sub{ font-size:13.5px; line-height:1.6; margin-bottom:22px; white-space:pre-line; text-align:start; }
.modal-confirm .confirm-actions{ display:flex; flex-direction:column; gap:10px; }
.modal-confirm .confirm-actions .btn{ width:100%; justify-content:center; padding:12px; font-size:14.5px; }

/* ---------- שיוך רכב למשמרת (בחירת רכב, סרגל "הרכב שלך") ----------
   אלו המסכים שצוות השטח (נהגים) עובד איתם, ברוב המקרים על טאבלט - לכן
   כפתורים/כרטיסים גדולים יותר מהרגיל, נוחים ללחיצה באצבע. */
.vgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-bottom:18px; }
.vcard{ border:1.5px solid var(--line-strong); border-radius:14px; padding:18px 16px 16px; background:var(--surface); }
.vcard .plate{ font-family:var(--font-mono); font-weight:800; font-size:19px; margin-bottom:5px; }
.vcard .meta{ font-size:12.5px; color:var(--ink-muted); margin-bottom:14px; line-height:1.5; }
.vcard .pick-btn{ width:100%; justify-content:center; min-height:48px; font-size:15px; }
.vcard.occupied{ opacity:.6; background:var(--surface-2); }
.vcard .occ-note{ font-size:12.5px; color:var(--danger); font-weight:700; }

.shift-bar{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:var(--accent-soft); border:1.5px solid var(--accent); border-radius:14px; padding:16px 20px; margin-bottom:18px; }
.shift-bar .lead{ display:flex; align-items:center; gap:12px; }
.shift-bar .icon{ font-size:26px; }
.shift-bar .txt strong{ display:block; font-size:15.5px; color:var(--accent); }
.shift-bar .txt span{ font-size:12.5px; color:var(--ink-muted); }
.shift-bar .btn-sm{ min-height:44px; padding:11px 18px; }

/* ---------- סרגל עליון לצוות שטח - מופיע בראש כל מסך (לא רק בדף הבית) ----------
   שם נהג, רכב משויך, תאריך, כפתורי החלפת רכב/סיום משמרת. */
.shift-topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:var(--accent); color:#fff; border-radius:12px; padding:10px 18px; margin-bottom:18px; }
.shift-topbar .stb-info{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; flex-wrap:wrap; }
.shift-topbar .stb-icon{ font-size:18px; }
.shift-topbar .stb-sep{ opacity:.5; }
.shift-topbar .stb-plate{ font-family:var(--font-mono); }
.shift-topbar .stb-plate.stb-none{ opacity:.85; font-weight:600; }
.shift-topbar .stb-date{ font-family:var(--font-mono); opacity:.9; }
.shift-topbar .stb-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.shift-topbar .stb-actions form{ display:inline; }
.shift-topbar .btn{ min-height:42px; font-size:13px; }
.shift-topbar .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.05); }
.shift-topbar .btn-ghost:hover{ background:rgba(255,255,255,.15); }
.shift-topbar .btn-danger-ghost{ color:#fff; border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.08); }
.shift-topbar .btn-danger-ghost:hover{ background:rgba(255,255,255,.18); }
.shift-topbar .btn-primary{ background:#fff; color:var(--accent); border-color:#fff; }

/* ---------- טופסי צוות שטח (מודול תדלוק, בחירת רכב) - עבודה נוחה בטאבלט ---------- */
.tablet-form .field{ margin-bottom:18px; }
.tablet-form .field label{ font-size:13px; margin-bottom:6px; }
.tablet-form .field input, .tablet-form .field select{ min-height:50px; font-size:16px; padding:12px 14px; border-radius:10px; }
.tablet-form .field-check input{ width:24px; height:24px; }
.tablet-form .field-check label{ font-size:14.5px; }
.tablet-form .form-actions .btn{ min-height:48px; font-size:15px; padding:12px 20px; }

.calc-strip{ display:flex; gap:20px; flex-wrap:wrap; background:var(--surface-2); border:1px solid var(--line); border-radius:10px;
  padding:12px 16px; margin:4px 0 16px; font-size:12.5px; color:var(--ink-muted); }
.calc-strip b{ font-family:var(--font-mono); color:var(--ink); font-size:16px; }
.calc-strip .ratio b{ color:var(--good); }

/* ---------- מערכת נהג: כותרת עליונה קבועה, בלי תפריט צד ----------
   כל מסכי הנהג (בית/רישום נסיעה/תדלוק/ביקורת/בחירת רכב) עוברים דרך
   core/base_driver.html: לוגו החברה בשני קצות הכותרת, פרטי המשמרת
   באמצע, וכפתורי הפעולה (החלפת רכב / סיום משמרת / שינוי סיסמה /
   התנתקות) - כדי שהנהג לא יצטרך לגלוש בשום תפריט. */
.driver-shell{ min-height:100vh; display:flex; flex-direction:column; }
/* ממורכז כברירת מחדל (לא רק במסך צר) - כשהתוכן (לוגו/שם משמרת/כפתורי
   החלפת רכב/סיום משמרת/סיסמה/התנתקות) לא נכנס בשורה אחת ברוחב טאבלט,
   הוא עוטף לשורה נוספת וממורכז, במקום להידחס ולגלוש לצד אחד. */
.driver-header{ background:var(--accent); color:#fff; padding:14px 22px; display:flex;
  align-items:center; justify-content:center; gap:10px 24px; flex-wrap:wrap; box-shadow:var(--shadow); text-align:center; }
.dh-block{ display:flex; align-items:center; justify-content:center; gap:12px; flex:none; }
.dh-logo{ width:42px; height:42px; border-radius:50%; background:#fff; object-fit:cover;
  flex:none; }
.dh-brand strong{ display:block; font-family:var(--font-display); font-weight:700; font-size:14.5px; }
.dh-brand span{ display:block; font-size:11px; opacity:.85; font-weight:600; margin-top:1px; }
.dh-mid{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; font-size:13.5px; font-weight:700; }
.dh-mid .stb-icon{ font-size:16px; }
.dh-mid .stb-sep{ opacity:.5; }
.dh-mid .stb-plate{ font-family:var(--font-mono); }
.dh-mid .stb-plate.stb-none{ opacity:.85; font-weight:600; }
.dh-mid .stb-date{ font-family:var(--font-mono); opacity:.9; }
.dh-actions{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.dh-actions form{ display:inline; margin:0; }
.driver-header .btn{ min-height:40px; font-size:12.5px; }
.driver-header .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.55); background:rgba(255,255,255,.05); }
.driver-header .btn-ghost:hover{ background:rgba(255,255,255,.15); }
.driver-header .btn-danger-ghost{ color:#fff; border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.08); }
.driver-header .btn-danger-ghost:hover{ background:rgba(255,255,255,.18); }

/* page-head (כותרת + כפתורי פעולה כמו הדפסה/נעילה בטופס ביקורת) בכל
   מסכי מערכת הנהג - ממורכז ועוטף שורות, כדי שלא יגלוש שמאלה בטאבלטים
   ברוחב בינוני (לא משפיע על מסכי המשרד - שם page-head נשאר כמו שהיה). */
.driver-page .page-head{ flex-direction:column; align-items:center; text-align:center; }
.driver-page .page-head .actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; width:100%; }

/* כל תוכן מערכת הנהג (הטופס עצמו - ביקורת ציוד, נסיעה, תדלוק, בחירת
   רכב וכו') ממורכז בעמודה ברוחב נוח באמצע המסך, ולא נפרש על פני כל
   רוחב המסך (בלי תפריט צד, .main מקבל את כל רוחב המסך ובלעדי הכלל
   הזה התוכן "נדבק" לצד ההתחלה ולא נראה ממורכז). לא משפיע על מסכי
   המשרד - שם .main נשאר כמו שהיה, לצד תפריט הצד. */
.driver-page{ max-width:1080px; width:100%; margin:0 auto; }
.driver-page .card{ margin-inline:auto; }

/* ---------- מסך הבית של הנהג: כפתורים גדולים באמצע, כלום בצד ---------- */
.driver-menu-head{ text-align:center; margin:8px 0 22px; }
.driver-menu-head h1{ font-size:20px; font-weight:700; }
.driver-menu-head .sub{ color:var(--ink-muted); font-size:13.5px; margin-top:4px; }
.driver-menu-head .head-actions{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:12px; }

/* ---------- "קריאה מזדמנת" (צד נהג) - כיוון נסיעה כשתי כרטיסיות ---------- */
.dir-toggle{ display:flex; gap:8px; }
.dir-opt{ flex:1; display:flex; align-items:center; justify-content:center; text-align:center; padding:10px 8px;
  border-radius:10px; border:1.5px solid var(--line-strong); font-size:13px; font-weight:700; cursor:pointer;
  line-height:1.5; background:var(--surface); color:var(--ink); }
.dir-opt input{ display:none; }
.dir-opt small{ display:block; font-size:11px; font-weight:600; color:var(--ink-muted); }
.dir-opt.active{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.dir-opt.active small{ color:var(--accent); opacity:.8; }

/* ---------- "קריאה מזדמנת" (צד נהג) - קוביית מחיר נסיעה ---------- */
.price-tile{ background:var(--accent-soft); border:1.5px solid var(--accent); border-radius:12px; padding:12px 14px; margin-bottom:14px; }
.price-tile label{ font-weight:700; color:var(--ink); }
.price-tile-input{ display:flex; align-items:center; gap:8px; margin-top:6px; }
.price-tile-sign{ font-size:20px; font-weight:800; color:var(--accent); }
.price-tile-input input{ flex:1; font-size:20px; font-weight:800; text-align:center; padding:10px 8px; border-radius:10px; border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink); }
.driver-menu{ width:100%; max-width:640px; margin:0 auto; display:grid; gap:16px; }
.driver-tile{ position:relative; display:flex; align-items:center; gap:18px; background:var(--surface); border:1.5px solid var(--line-strong);
  border-radius:16px; box-shadow:var(--shadow); padding:22px 24px; text-decoration:none; color:var(--ink);
  min-height:88px; transition:background .12s ease, border-color .12s ease, transform .05s ease; }
.driver-tile:hover{ border-color:var(--accent); background:var(--accent-soft); }
.driver-tile:active{ transform:translateY(1px); }
.driver-tile .dt-icon{ font-size:32px; width:62px; height:62px; border-radius:14px; background:var(--accent-soft);
  display:grid; place-items:center; flex:none; }
.driver-tile .dt-txt strong{ display:block; font-size:17px; font-family:var(--font-display); font-weight:700; }
.driver-tile .dt-txt span{ display:block; font-size:12.5px; color:var(--ink-muted); margin-top:3px; }
.tile-badge{ position:absolute; top:-15px; inset-inline-end:-15px; min-width:42px; height:42px; border-radius:999px;
  background:var(--danger); color:#fff; font-size:21px; font-weight:900; display:flex; align-items:center;
  justify-content:center; padding:0 9px; box-shadow:0 0 0 3px var(--surface), var(--shadow); line-height:1; }
/* כשלריבוע "הודעות מערכת" יש הודעות ממתינות - גם הכותרת עצמה הופכת
   לאדום (לא רק התג בפינה), כדי שיהיה ברור לנהג במבט חטוף שיש הודעה
   חדשה - ר' core/templates/core/home_driver.html. */
.driver-tile.has-unread .dt-txt strong{ color:var(--danger); }

/* ---------- הודעות מערכת: כרטיסי הודעה (inbox) + פס התקדמות אישורים (admin) ---------- */
.notif-card{ border:1.5px solid var(--line-strong); border-radius:14px; padding:16px 18px; background:var(--surface); }
.notif-card + .notif-card{ margin-top:12px; }
.notif-card.is-urgent{ border-color:var(--danger); }
.ack-bar{ height:6px; width:100%; min-width:90px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.ack-bar-fill{ height:100%; background:var(--good); border-radius:999px; }
.recipient-list{ max-height:220px; overflow-y:auto; border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; background:var(--surface-2); display:flex; flex-direction:column; gap:8px; }
.recipient-list ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.recipient-list li{ display:flex; align-items:center; gap:8px; }
.recipient-list input{ width:18px; height:18px; flex:none; }
.recipient-list label{ font-size:13px; font-weight:600; margin:0; }
.section-title{ font-size:13.5px; font-weight:700; color:var(--ink-muted); margin:22px 0 10px; text-align:center; }
.section-title:first-child{ margin-top:0; }

/* כרטיסי "הלקוחות שלי - פתיחת נסיעה חדשה" - כרטיסים גדולים ונוחים
   ללחיצה במקום טבלה צפופה, כי בזמן עבודה בשטח נוח יותר לעבוד עם
   כפתורים גדולים וברורים (ר' driver_trip_list.html). */
.assignment-card{ flex-wrap:wrap; min-height:104px; padding:20px 22px; gap:16px; }
.assignment-card .dt-txt{ flex:1; min-width:160px; }
.assignment-badge{ display:inline-block; font-size:11px; font-weight:700; color:var(--accent);
  background:var(--accent-soft); border-radius:999px; padding:3px 10px; margin-inline-start:8px; vertical-align:middle; }
.assignment-card form{ flex:none; }
.btn-lg{ font-size:15px; padding:14px 22px; border-radius:12px; min-height:52px; }

/* ---------- "הלקוחות שלי" - תיבת רשימה נפתחת לבחירת לקוח, במקום כרטיס
   נפרד לכל לקוח משויך (ר' driver_trip_list.html) - כדי שרשימה של הרבה
   לקוחות משויכים לא תיצור עשרות כרטיסים שגולשים למטה. ---------- */
.picker-card{ width:100%; max-width:640px; margin:0 auto 18px; background:var(--surface);
  border:1.5px solid var(--line-strong); border-radius:16px; box-shadow:var(--shadow); padding:20px 20px 22px; }
.picker-count{ font-size:12px; font-weight:700; color:var(--ink-muted); text-align:center; margin-bottom:12px; }
.picker-count b{ color:var(--accent); font-family:var(--font-mono); }
/* תיבה נפתחת מותאמת אישית (במקום <select> רגיל) - כדי שאפשר יהיה לצבוע
   תגית "קריאה פתוחה" בתוך השורה עצמה (לא ניתן בתוך <option> רגיל של
   הדפדפן - אין אפשרות לעצב חלקים בתוך option). אושר בתצוגה מקדימה. */
.picker-toggle{ width:100%; text-align:right; background:var(--surface-2); border:1.5px solid var(--line-strong);
  border-radius:10px; padding:14px 16px; font-size:17px; font-weight:700; color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:var(--font-body); }
.picker-toggle:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.picker-toggle .placeholder{ color:var(--ink-faint); font-weight:600; }
.picker-toggle .caret{ color:var(--ink-faint); font-size:12px; transition:transform .15s ease; flex:none; }
.picker-toggle.open .caret{ transform:rotate(180deg); }
.picker-list{ display:none; margin-top:8px; border:1.5px solid var(--line-strong); border-radius:10px;
  background:var(--surface); max-height:320px; overflow-y:auto; box-shadow:var(--shadow); }
.picker-list.open{ display:block; }
.picker-option{ display:flex; align-items:center; gap:12px; padding:14px 16px; cursor:pointer;
  border-bottom:1px solid var(--line); font-size:16.5px; font-weight:700; }
.picker-option:last-child{ border-bottom:none; }
.picker-option:hover{ background:var(--surface-2); }
.picker-option .po-icon{ font-size:18px; font-weight:800; flex:none; }
.picker-option .po-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.picker-option .po-star{ color:var(--amber); }
.picker-open-tag{ flex:none; background:var(--danger); color:#fff; font-size:12px; font-weight:800;
  border-radius:7px; padding:4px 10px; margin-inline-start:auto; white-space:nowrap; }
.picker-detail{ margin-top:16px; border-top:1px dashed var(--line-strong); padding-top:16px; }
.picker-empty{ text-align:center; color:var(--ink-faint); font-size:13px; padding:10px 0 4px; }
.picker-row{ display:flex; align-items:center; gap:14px; }
.picker-icon{ font-size:26px; width:54px; height:54px; border-radius:13px; background:var(--accent-soft);
  display:grid; place-items:center; flex:none; }
/* כיוון נסיעה - הלוך (כחול, כברירת המחדל של accent-soft/accent למעלה)
   לעומת חזור (אדום) - לזיהוי מהיר ויזואלי בין השניים בכל מקום שבו
   מוצג חץ הכיוון במסך הנהג: תיבת הבחירה, פרטי הבחירה, וריבועי "נסיעות
   פתוחות" (ר' driver_trip_list.html). דורס את הרקע/צבע הכחול המוגדר
   למעלה כברירת מחדל ל-.picker-icon/.dt-icon. */
.po-icon.dir-return{ color:var(--danger); }
.po-icon.dir-outbound{ color:var(--accent); }
.picker-icon.dir-return, .driver-tile .dt-icon.dir-return{ background:var(--danger-soft); color:var(--danger); }
.po-name.dir-return, .dt-txt strong.dir-return, .picker-txt strong.dir-return{ color:var(--danger); }
.po-name.dir-outbound, .dt-txt strong.dir-outbound, .picker-txt strong.dir-outbound{ color:var(--accent); }
.picker-txt{ flex:1; min-width:0; }
.picker-txt strong{ display:block; font-size:16.5px; font-family:var(--font-display); font-weight:700; }
.picker-txt span{ display:block; font-size:12.5px; color:var(--ink-muted); margin-top:3px; }
.picker-badge{ display:inline-block; font-size:11px; font-weight:700; color:var(--accent); background:var(--accent-soft);
  border-radius:999px; padding:2px 9px; margin-inline-start:8px; vertical-align:middle; }
.picker-actions{ margin-top:16px; }
.picker-actions .btn{ width:100%; }

/* ---------- מסך "נסיעה שלי" - עיצוב חדש (3 חלקים) - ר' driver_call_detail.html
   body.trip-form-page מוגדר רק על ידי המסך הזה (ר' core/base_driver.html -
   {% block body_class %}) ולא משפיע על שאר מסכי הנהג.

   גרסה שנייה של העיצוב, אחרי שהגרסה הראשונה (חלון "נעול" לגובה המסך,
   height:100vh/100dvh + overflow:hidden, רק חלק 2 גולל בפנים) התבררה
   כשבורה בטלפון: מסך טלפון קטן מספיק שחלק 1 (פרטי החולה/יעד) וחלק 3
   (כפתורי הזמנים + סיום/ביטול) ביחד כבר לא נכנסים לגובה המסך גם כשחלק 2
   מצטמצם לגמרי - ומכיוון שגלילת העמוד הייתה חסומה, חלק 3 (כפתורי
   הזמנים! כפתור סיום קריאה!) פשוט לא היה נגיש בכלל בטלפון.

   העיצוב הנוכחי (מאושר מול המשרד):
     כותרת (driver-header) - קבועה תמיד למעלה (position:sticky).
     חלק 1 (tf-top) וחלק 3 (tf-footer) - בזרימה רגילה של העמוד; "הגלילה"
       שלהם היא גלילת העמוד הרגילה (למעלה/למטה) - תמיד אפשר להגיע אליהם.
     חלק 2 (tf-middle) - תיבה עם גובה מוגבל וגלילה פנימית משלה
       (overflow-y:auto) - גוללים בתוכו רק כשגוללים ממש בתוך התיבה הזו,
       בלי להשפיע על שאר העמוד. ---------- */
/* רוחב מסוכם מול המשרד: מותאם לטאבלט 8.7 אינץ' (כ-820px) - כדי שהטופס
   לא יימתח על פני כל רוחב המסך במכשירים/דפדפנים רחבים יותר. הרקע האפרפר
   מסביב (כמו בתצוגה המקדימה שאושרה) מסמן איפה נגמר "המסך" בפועל. */
body.trip-form-page{ background:#AEB9C9; }
/* min-height (לא height) - כדי שבמסך גבוה מספיק העמוד עדיין ימלא אותו
   כמו קודם, אבל אם התוכן בפועל גבוה יותר (טלפון קטן) - העמוד פשוט גדל
   וגולל כרגיל, בלי לחתוך שום דבר. 100dvh אחרי 100vh בכוונה - דפדפן ישן
   שלא מכיר dvh יתעלם מהשורה השנייה וימשיך עם 100vh הרגיל (נפילה רכה). */
body.trip-form-page .driver-shell{ min-height:100vh; min-height:100dvh; max-width:820px; margin:0 auto;
  box-shadow:0 0 0 1px var(--line-strong), 0 18px 44px -14px rgba(10,16,26,.35); }
/* הכותרת העליונה (לוגו/שם מערכת/כפתורי פעולה) נשארת קבועה למעלה תמיד -
   sticky ולא fixed, כדי שתישאר בתוך רוחב/תחום ה-driver-shell (ולא תימתח
   על פני כל רוחב המסך) בלי חישובי מיקום ידניים. */
body.trip-form-page .driver-header{ position:sticky; top:0; z-index:20; }
body.trip-form-page .main.driver-page{ padding:0; max-width:none; width:100%; margin:0; }
body.trip-form-page .messages{ margin:10px 22px 0; }

/* בקשת המשרד: "חזרה לנסיעות שלי" לבד בצד שמאל, "עיצוב קודם" ו"התנתקות"
   ביחד בצד ימין - לא כל הכפתורים ביחד באמצע כמו בשאר מסכי הנהג. flex-basis
   100% מכריח את שורת הכפתורים לתפוס שורה שלמה לבד (מתחת ללוגו/פרטי משמרת),
   כדי ש-space-between יפרוש אותה על פני כל הרוחב. */
body.trip-form-page .driver-header .dh-block.dh-end{ flex:1 1 100%; }
body.trip-form-page .dh-actions{ width:100%; justify-content:space-between; }
.dh-actions-group{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.tf-shell{ display:flex; flex-direction:column; margin:0; }

/* באנר "אין חיבור לאינטרנט" - ר' driver_call_detail.html - מוסתר
   כברירת מחדל (hidden), מוצג/מוסתר ב-JS לפי מצב החיבור בפועל. */
.tf-offline-banner{ flex:none; background:var(--amber-soft); color:var(--amber);
  border-bottom:2px solid var(--amber); padding:10px 22px; font-size:12.5px;
  font-weight:700; text-align:center; line-height:1.5; }
.tf-offline-banner[hidden]{ display:none; }

.tf-top{ flex:none; background:var(--surface); border-bottom:2px solid var(--line-strong);
  box-shadow:var(--shadow); padding:14px 22px 16px; }
.tf-nav{ display:flex; justify-content:flex-end; margin-bottom:8px; }
.tf-badge-open{ background:var(--amber-soft); color:var(--amber); border-color:transparent; }
.tf-header-row{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin-bottom:14px; }
.tf-patient strong{ display:block; font-family:var(--font-display); font-size:24px; font-weight:800; }
.tf-patient span{ display:block; font-size:12px; color:var(--ink-muted); font-weight:600; margin-top:3px; }
.tf-received{ flex:none; background:var(--accent-soft); border:1.5px solid var(--accent); border-radius:12px;
  padding:8px 16px; display:flex; align-items:center; gap:10px; }
.tf-received label{ font-size:11.5px; font-weight:700; color:var(--accent); margin:0; white-space:nowrap; display:block; }
.tf-received input{ font-family:var(--font-mono); font-size:17px; font-weight:800; color:var(--accent);
  background:transparent; border:none; padding:2px 0; width:auto; }
.tf-received input:focus{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
/* בקשת המשרד (טאבלט 8.7 אינץ', כ-800px): שם המטופל ו"קבלת קריאה" באותה
   שורה, ומיקום/יעד/סוג נסיעה בשורה אחת אחד ליד השני - כדי לחסוך גובה
   לטובת חלק 2 וחלק 3. רק בטלפון (מתחת ל-600px) הם יורדים אחד מתחת לשני. */
@media (min-width:600px){ .tf-header-row{ flex-wrap:nowrap; } }
.tf-top .grid-3{ grid-template-columns:repeat(3,1fr); gap:10px; }
/* בקשת המשרד: פונט גדול וברור יותר בחלק 1 (שם המטופל, קבלת קריאה,
   מיקום/יעד/סוג נסיעה) - לקריאה נוחה בטאבלט תוך כדי נסיעה. */
.tf-top .tf-patient strong{ font-size:27px; }
.tf-top .tf-patient span{ font-size:14px; }
.tf-top .tf-received label{ font-size:13.5px; }
.tf-top .tf-received input{ font-size:20px; }
.tf-top .grid-3 .field{ margin-bottom:6px; }
.tf-top .grid-3 .field label{ font-size:15px; color:var(--ink); margin-bottom:6px; }
.tf-top .grid-3 .field input, .tf-top .grid-3 .field select{ font-size:18px; font-weight:600;
  min-height:48px; padding:10px 12px; border-radius:10px; }
@media (max-width:599px){ .tf-header-row{ flex-direction:column; align-items:stretch; text-align:center; }
  .tf-patient{ text-align:center; } .tf-received{ justify-content:center; }
  .tf-top .grid-3{ grid-template-columns:1fr; } }

/* חלק 2 - תיבה עם גובה מוגבל וגלילה פנימית משלה (ולא "תמלא מה שנשאר
   במסך" כמו בעיצוב הקודם) - כדי שהגלילה בתוכה תהיה נפרדת לגמרי מגלילת
   העמוד הרגילה (שמעבירה בין חלק 1 לחלק 3). 46dvh אחרי 46vh בכוונה - ר'
   ההסבר למעלה על 100vh/100dvh. קו מפריד עדין + רקע קליל מסמנים שזו תיבה
   נפרדת שאפשר לגלול בה, לא המשך רגיל של הדף. */
.tf-middle{ flex:none; max-height:34vh; max-height:34dvh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:12px 22px 16px; background:var(--surface-2); border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); }
.tf-section-title{ font-size:13px; font-weight:800; color:var(--ink-muted); margin:0 0 10px; }
.tf-time-field.is-set input[type=time]{ border-color:var(--good); color:var(--good);
  background:var(--good-soft); font-weight:800; }

/* ---------- בורר שעה בעיצוב שעון עגול, במקום רשימת הגלילה של הדפדפן
   ל-input type=time - אושר בתצוגה מקדימה מול המשרד. ה-input המקורי נשאר
   בעמוד (מוסתר) לצורך שליחת הטופס/שמירה אוטומטית - ר' driver_call_detail.html. ---------- */
.tf-time-field input[type=time]{ display:none; }
.time-box{ position:relative; display:flex; align-items:center; gap:10px; background:var(--surface-2);
  border:1.5px solid var(--line-strong); border-radius:10px; padding:11px 14px; cursor:pointer;
  transition:border-color .15s ease, background .15s ease; }
.time-box:hover{ border-color:var(--accent); }
.time-box .clk-icon{ font-size:17px; flex:none; color:var(--ink-muted); }
.time-box .time-val{ font-family:var(--font-mono); font-size:19px; font-weight:700; flex:1; }
.time-box .time-val.empty{ color:var(--ink-faint); font-family:var(--font-body); font-size:14px; font-weight:600; }
.time-box.is-set{ background:var(--good-soft); border-color:var(--good); }
.time-box.is-set .time-val{ color:var(--good); }

.tp-overlay{ position:fixed; inset:0; background:rgba(15,22,32,.55); display:none;
  align-items:center; justify-content:center; z-index:80; padding:18px; }
.tp-overlay.open{ display:flex; }
.tp-dialog{ background:var(--surface); border-radius:20px; width:100%; max-width:320px;
  box-shadow:0 24px 60px -12px rgba(10,16,26,.5); overflow:hidden; }
.tp-head{ background:var(--accent); color:#fff; padding:18px 20px 14px; text-align:center; }
.tp-head .tp-label{ font-size:12px; font-weight:700; opacity:.8; letter-spacing:.03em; margin-bottom:8px; }
/* direction:ltr - כדי שהשעה תוצג לפי הסדר המקובל (שעות בצד שמאל, דקות
   בצד ימין) ולא הפוך בגלל כיוון הדף RTL הכללי (ר' בקשת הנהג). */
.tp-time-display{ display:flex; align-items:center; justify-content:center; gap:4px; direction:ltr;
  font-family:var(--font-mono); font-size:40px; font-weight:700; }
.tp-seg{ cursor:pointer; padding:2px 6px; border-radius:8px; opacity:.55; transition:opacity .15s ease, background .15s ease; }
.tp-seg.active{ opacity:1; background:rgba(255,255,255,.14); }
.tp-sep{ opacity:.6; }
.tp-body{ padding:20px 20px 4px; display:flex; justify-content:center; }
.tp-clock{ position:relative; width:230px; height:230px; border-radius:50%; background:var(--surface-2);
  touch-action:none; user-select:none; }
.tp-center-dot{ position:absolute; width:8px; height:8px; border-radius:50%; background:var(--accent);
  top:50%; left:50%; transform:translate(-50%,-50%); z-index:4; }
.tp-hand{ position:absolute; background:var(--accent); top:50%; left:50%; height:2px;
  transform-origin:0 50%; z-index:2; border-radius:2px; }
.tp-hand-end{ position:absolute; width:36px; height:36px; border-radius:50%; background:var(--accent);
  top:0; left:0; transform:translate(-50%,-50%); z-index:3; }
.tp-num{ position:absolute; width:32px; height:32px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:13.5px; color:var(--ink);
  transform:translate(-50%,-50%); z-index:1; pointer-events:none; }
.tp-num.tp-num-inner{ font-size:11.5px; color:var(--ink-faint); }
.tp-num.tp-active{ color:#fff; }
.tp-actions{ display:flex; gap:10px; padding:16px 20px 20px; }

/* חלק 3 - בקשת המשרד לטאבלט 8.7 אינץ': הכפתורים נחתכו בתחתית המסך. עכשיו
   החלק "נדבק" לתחתית המסך (sticky) כך שהוא תמיד גלוי, עם ריווח תחתון
   (כולל safe-area) כדי שסרגל הניווט של הטאבלט לא יסתיר אותו, וכפתורים
   גדולים יותר (74px, טקסט 15px) - 4 בשורה אחת. */
.tf-footer{ flex:none; position:sticky; bottom:0; z-index:15; background:var(--surface);
  border-top:2px solid var(--line-strong); box-shadow:0 -6px 18px -10px rgba(22,32,46,.25);
  padding:8px 14px 20px; padding-bottom:max(20px, calc(12px + env(safe-area-inset-bottom))); }
.tf-hint{ text-align:center; font-size:11px; color:var(--ink-faint); font-weight:600; margin:0 0 8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tf-time-btns{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width:420px){ .tf-time-btns{ grid-template-columns:repeat(2,1fr); } }
/* לפי בקשת הנהג: רק שני צבעים - צבע אחיד בהתחלה (בין אם הכפתור נעול
   ובין אם הוא כבר פתוח ללחיצה, בלי הבדל צבע ביניהם), וצבע שני (ירוק)
   רק על הכפתור שבאמת נלחץ. כפתור נעול רק דוהה קצת (opacity) כדי לסמן
   שאי אפשר ללחוץ עליו - בלי לשנות את הצבע עצמו. */
.tf-sq-btn{ position:relative; min-height:74px; border-radius:12px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  font-family:var(--font-body); font-weight:700; font-size:15px; line-height:1.15; text-align:center; padding:6px 4px;
  color:var(--ink); background:var(--surface-2); border:1.5px solid var(--line-strong);
  transition:background .15s ease, opacity .15s ease, transform .05s ease; }
.tf-sq-btn:active{ transform:translateY(1px); }
.tf-sq-btn .tf-sq-icon{ font-size:20px; line-height:1; }
.tf-sq-btn .tf-sq-time{ font-family:var(--font-mono); font-size:11.5px; font-weight:700; opacity:.95; }
.tf-sq-btn .tf-sq-time:empty{ display:none; }
.tf-sq-btn.is-done{ background:var(--good); border-color:var(--good); color:#fff; }
.tf-sq-btn.is-locked{ cursor:not-allowed; opacity:.55; }
/* ביטול/סיום קריאה - בקשת המשרד: כפתורים גדולים ורחבים יותר, כל אחד חצי
   מהשורה (flex:1 ב-HTML), טקסט במרכז. */
.tf-footer .form-actions{ margin-top:12px; padding-top:0; border-top:none; gap:12px; }
.tf-footer .form-actions .btn{ min-height:58px; font-size:17px; font-weight:800; border-width:2px;
  border-radius:12px; justify-content:center; }