/* ===== BASE ===== */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

:root {
  --primary: #12C48B;
  --primary-dark: #0EA575;
  --primary-d: #0EA575;
  --primary-soft: #DBF4EA;
  --secondary: #FF8A73;
  --coral: #FF8A73;
  --sky: #38BDF8;
  --sunny: #FBBF24;
  --lilac: #B39DFF;
  --success: #16A34A;
  --warning: #F59E0B;
  --warn: #F59E0B;
  --danger: #FF6B6B;
  --ok: #12C48B;
  --dark: #0F1A16;
  --dark2: #16241E;
  --dark3: #123128;
  --card-bg: #ffffff;
  --surface: #ffffff;
  --text: #173229;
  /* ===== הטקסט המשני, בניגודיות שעוברת =====
     #6E857C נתן 3.96:1 על לבן ו-3.74:1 על המשטח המנטה (--soft2) —
     מתחת לרף 4.5 לטקסט גוף. זה הצבע של כל תווית משנית באפליקציה:
     תוויות הטבעת, שורות המטא בכרטיסים, תוויות השדות בכניסה.
     #5C7469 נותן 5.05 ו-4.78 בהתאמה. (#647C72 עומד בדיוק על 4.5 על
     לבן אבל נופל ל-4.26 על המנטה, ולכן לא נבחר.) */
  --text-muted: #5C7469;
  --muted: #5C7469;
  --border: #E2EDE7;
  --line: #E2EDE7;
  /* מסך העובד חי באותו עולם ירוק של האפליקציה — לא כחול נפרד */
  --worker-primary: #12C48B;
  --worker-dark: #0EA575;
  --radius: 22px;
  --r-sm: 15px;
  --shadow: 0 16px 40px -20px rgba(16,90,66,0.35);
  --shadow-lg: 0 16px 40px -18px rgba(16,90,66,0.28);
  --soft: #E7F3EC;
  --soft2: #F4FAF7;
  --shadow-sm: 0 6px 20px -12px rgba(16,90,66,0.28);
  --font: "Baloo 2","Varela Round","Rubik",system-ui,"Segoe UI",sans-serif;
  --ease: cubic-bezier(.34,1.15,.4,1);
  /* `--ease` נושאת bounce קל (1.15) והיא נכונה ללחיצה — האצבע יורדת
     והכפתור קופץ בחזרה. לכניסת תוכן היא לא מתאימה: טקסט שמתנדנד נקרא
     כמו תקלה. `--ease-out` נעצרת נקי, ו-`--ease-io` לתנועה על המסך. */
  --ease-out: cubic-bezier(.23,1,.32,1);
  --ease-io: cubic-bezier(.77,0,.175,1);
  --bg: #EDF6F1;
}

body {
  font-family: var(--font);
  background: var(--bg, #EDF6F1);
  color: var(--text);
  direction: rtl;
  overflow-x: hidden;
  /* 100vh בספארי מודד את המסך *כולל* השטח שמאחורי שורת הכתובת, ולכן
     תחתית האפליקציה נחתכת. dvh מודד את מה שבאמת גלוי. */
  height: 100vh;
  height: 100dvh;
  overflow-y: hidden;
  background-image: radial-gradient(75% 55% at 88% -8%, rgba(18,196,139,.12), transparent 60%),
                    radial-gradient(65% 45% at -8% 102%, rgba(56,189,248,.10), transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

/* ===== SPLASH ===== */
.splash {
  position: fixed; inset: 0;
  background: linear-gradient(135deg, var(--dark) 0%, var(--dark3) 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 9999;
}
.splash-logo { text-align: center; color: white; }
.splash-logo i { font-size: 64px; color: var(--primary); margin-bottom: 16px; }
.splash-logo h1 { font-size: 36px; font-weight: 700; margin-bottom: 8px; }
.splash-logo p { font-size: 16px; opacity: 0.7; margin-bottom: 40px; }
.splash-loader {
  width: 48px; height: 48px;
  border: 4px solid rgba(255,255,255,0.2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ===== SCREENS ===== */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
.hidden { display: none !important; }

/* ===== TOPBAR ===== */
.topbar {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px;
  box-shadow: 0 6px 20px -8px rgba(18,196,139,0.45);
  position: relative; z-index: 10;
  flex-shrink: 0;
}
.topbar h2 { font-size: 18px; font-weight: 600; }

/* ===== BADGE ===== */
.badge {
  position: absolute; top: -2px; right: -2px;
  background: var(--secondary); color: white;
  font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px;
  border-radius: 9px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
}

/* ===== MANAGER PAGES ===== */
/* אין topbar במסך המנהל — הדף מתחיל מלמעלה, עם ריפוד לאזור הבטוח של המכשיר */
.manager-page {
  flex: 1; overflow-y: auto;
  padding: calc(14px + env(safe-area-inset-top)) 16px 80px;
}

.greeting-text {
  font-size: 20px;
  font-weight: 400;
  color: rgba(255,255,255,0.8);
  white-space: nowrap;
}
.greeting-name {
  font-size: 20px;
  font-weight: 700;
  color: white;
  white-space: nowrap;
}


/* ===== SECTION TITLE ===== */
.section-title {
  display: flex; align-items: center; justify-content: space-between;
  margin: 16px 0 10px;
  font-size: 15px; font-weight: 600; color: var(--text);
}

/* ===== MAP ===== */
.map-container { margin-bottom: 16px; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }

/* ===== CARD LIST ===== */
.card-list { display: flex; flex-direction: column; gap: 12px; }

/* ===== TASK CONNECTOR ARROW =====
   מקשר בין משימה למשימה ברשימה של העובד — סדר המסלול */
.task-connector {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  margin: -6px 0;
  pointer-events: none;
}
.task-connector svg { overflow: visible; }
.task-connector polyline { stroke: var(--primary); opacity: 0.45; }

/* ===== TASK CARD ===== */
.task-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 0.2s;
  position: relative;
  overflow: hidden;
}
.task-card:active { transform: scale(0.98); }
/* שלושת הכללים שצבעו את הפס לפי דחיפות ירדו יחד עם הדחיפות עצמה.
   הפס שנראה בפועל הוא `border-inline-start` שנקבע לפי **סטטוס** בבלוק
   מאוחר יותר בגיליון, ושם גם `display:none` על ה-`::before` הזה — הוא
   נשאר כאן כי `status-done`/`status-active` עדיין מפנים אליו. */
.task-card::before {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 4px; height: 100%;
}
.task-card.status-done { opacity: 0.7; }
.task-card.status-done::before { background: var(--success); }
.task-card.status-active::before { background: var(--warning); animation: pulse-border 1.5s infinite; }

/* אנימציית כניסה למשימה חדשה */
@keyframes taskSlideIn {
  from { opacity: 0; transform: translateX(40px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0)   scale(1);    }
}
@keyframes taskGlow {
  0%   { box-shadow: 0 0 0 0   rgba(18,196,139,0.5); }
  50%  { box-shadow: 0 0 0 8px rgba(18,196,139,0.15); }
  100% { box-shadow: var(--shadow); }
}
.task-card.task-new {
  animation: taskSlideIn 0.45s cubic-bezier(0.22,1,0.36,1),
             taskGlow    1.2s ease-out 0.3s;
}

/* אנימציית שינוי סטטוס - מנהל */
@keyframes flashActive {
  0%   { box-shadow: var(--shadow); background: var(--card-bg); }
  30%  { box-shadow: 0 0 0 7px rgba(251,146,60,0.35); background: #fff7ed; }
  100% { box-shadow: var(--shadow); background: var(--card-bg); }
}
@keyframes flashDone {
  0%   { box-shadow: var(--shadow); background: var(--card-bg); }
  30%  { box-shadow: 0 0 0 7px rgba(74,222,128,0.35); background: #f0fdf4; }
  100% { box-shadow: var(--shadow); background: var(--card-bg); }
}
@keyframes flashPending {
  0%   { box-shadow: var(--shadow); background: var(--card-bg); }
  30%  { box-shadow: 0 0 0 7px rgba(99,102,241,0.3); background: #eef2ff; }
  100% { box-shadow: var(--shadow); background: var(--card-bg); }
}
.status-flash-active  { animation: flashActive  1.4s ease-out; }
.status-flash-done    { animation: flashDone    1.4s ease-out; }
.status-flash-pending { animation: flashPending 1.4s ease-out; }

.task-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
.task-title { font-size: 15px; font-weight: 600; flex: 1; }
.task-status { font-size: 11px; padding: 3px 8px; border-radius: 20px; font-weight: 600; flex-shrink: 0; }
.status-pending { background: #e0e7ff; color: #4338ca; }
.status-active { background: #fff7ed; color: #c2410c; }
.status-done { background: #dcfce7; color: #15803d; }

.task-meta { display: flex; flex-direction: column; gap: 4px; }
.task-meta-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.task-meta-item i { width: 14px; }


/* ===== WORKER CARD ===== */
.worker-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  transition: transform 0.2s;
}
.worker-card:active { transform: scale(0.98); }
.worker-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 20px; font-weight: 700;
  flex-shrink: 0;
}
.worker-info { flex: 1; }
.worker-name { font-size: 15px; font-weight: 600; }
.worker-detail { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.worker-status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
}
.online { background: var(--success); box-shadow: 0 0 0 3px rgba(74,222,128,0.3); }
.offline { background: #94a3b8; }


/* ===== INCIDENT CARD ===== */
.incident-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  border-right: 4px solid var(--danger);
}
.incident-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.incident-header i { color: var(--danger); }
.incident-desc { font-size: 14px; color: var(--text-muted); }
.incident-photo { width: 100%; border-radius: 8px; margin-top: 10px; cursor: pointer; }
.incident-photo-badge {
  display: flex; align-items: center; gap: 8px;
  background: #eff6ff; border: 1px solid #bfdbfe;
  border-radius: 10px; padding: 10px 14px;
  margin-top: 10px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: #1d4ed8;
  transition: background 0.2s;
}
.incident-photo-badge:active { background: #dbeafe; }
.incident-photo-badge i:first-child { font-size: 16px; }
body.dark-mode .incident-photo-badge {
  background: #1e2a3a; border-color: #2a4a6a; color: #60a5fa;
}

body.dark-mode .activity-item.activity-clickable:active { background: #1e2533; }

/* ===== WORKER TASKS SECTION DIVIDER ===== */
.tasks-section-divider {
  display: flex; align-items: center; gap: 8px;
  margin: 20px 0 10px;
  color: var(--text-muted);
  font-size: 13px; font-weight: 600;
}
.tasks-section-divider::before,
.tasks-section-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ===== WORKER PAGES ===== */
/* אין topbar — הדף מתחיל מלמעלה, כמו במסך המנהל */
.worker-page {
  flex: 1; overflow-y: auto;
  padding: calc(14px + env(safe-area-inset-top)) 16px 80px;
}

/* שורת GPS — רק אינדיקציה, לא כרטיס */
.w-gps {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--text-muted);
  margin: 0 2px 14px;
}
.w-gps.on { color: var(--primary-d); }
.w-gps.on i { color: var(--primary); }

/* תמונות שממתינות להעלאה. ענבר כשהן בדרך, אדום כשהן נתקעו — עובד
   שרואה אדום יודע שיש ראיית ביצוע חסרה ולא רק עיכוב. */
.w-upq {
  display: flex; align-items: center; gap: 9px;
  margin: 0 2px 12px; padding: 11px 13px;
  border-radius: 14px; font-size: 13px; font-weight: 600;
  background: rgba(245,158,11,0.12); color: #9a6206;
}
.w-upq > i { flex-shrink: 0; }
.w-upq > span { flex: 1; min-width: 0; }
.w-upq.stuck { background: rgba(229,72,77,0.12); color: #b3261e; }
.w-upq-retry {
  flex-shrink: 0; border: none; background: rgba(255,255,255,0.65);
  color: inherit; font-family: var(--font); font-weight: 800; font-size: 12.5px;
  padding: 8px 14px; min-height: 44px; border-radius: 22px; cursor: pointer;
  transition: transform 0.12s var(--ease);
}
.w-upq-retry:active { transform: scale(0.95); }
body.dark-mode .w-upq { background: rgba(245,158,11,0.18); color: #FBBF24; }
body.dark-mode .w-upq.stuck { background: rgba(229,72,77,0.18); color: #FF9A9E; }
body.dark-mode .w-upq-retry { background: rgba(255,255,255,0.12); }

/* ===== TASK DETAIL ===== */
.detail-badge {
  padding: 4px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 700;
  background: var(--soft); color: var(--text-muted);
}

/* ===== MANAGER TASK DETAIL VIEW ===== */
.task-detail-view { padding-bottom: 80px; }
.task-detail-hero {
  padding: 20px 16px 16px;
  border-radius: var(--radius);
  margin-bottom: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-right: 4px solid var(--primary);
}
.task-detail-hero-title { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.detail-section {
  background: var(--card-bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.detail-section-title {
  font-size: 13px; font-weight: 600;
  color: var(--text-muted); margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
}
.detail-row {
  display: flex; align-items: center;
  gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px; color: var(--text);
  flex-wrap: wrap;
}

/* ===== INLINE EDITING ===== */
.empty-photos-hint {
  color: #94a3b8; font-size: 13px; padding: 4px 0;
}
.photo-add-tile {
  width: 80px; height: 80px; border-radius: 8px;
  border: 2px dashed #cbd5e1;
  display: flex; align-items: center; justify-content: center;
  color: #94a3b8; font-size: 22px; cursor: pointer;
  transition: border-color 0.2s, color 0.2s; flex-shrink: 0;
}
.photo-add-tile:hover { border-color: var(--primary); color: var(--primary); }
/* ===== העיפרון =====
   שני דברים נמדדו כאן ותוקנו יחד.
   **צבע:** `#cbd5e1` נותן 1.6:1 על לבן, ו-`#94a3b8` במובייל נותן 2.85 —
   מתחת ל-3:1 שנדרש לאייקון. זו הפעולה המרכזית בדף המשימה של הקבלן,
   והיא הייתה כמעט בלתי נראית.
   **יעד מגע:** אזור הלחיצה נמדד 48×37 — קצר ב-7 פיקסל בגובה. ההרחבה
   ב-`::after` היא אותו דפוס בדיוק של `.mcd-x`: הציור לא זז, רק אזור
   המגע גדל. */
.pencil-btn {
  position: relative;
  background: none; border: none;
  color: var(--text-muted); font-size: 11px;
  padding: 5px 7px; border-radius: 6px;
  cursor: pointer; flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
  line-height: 1;
}
/* ההרחבה לצדדים עובדת; לגובה היא לא — השורות השכנות ב-`info-card`
   מצוירות מעליה ובולעות את הלחיצה. לכן הגובה נקבע על הכפתור עצמו. */
.pencil-btn { min-height: 44px; display: grid; place-items: center; }
.pencil-btn::after {
  content: ''; position: absolute;
  inset-block: 0; inset-inline: -8px;
}
.pencil-btn:hover { color: var(--primary); background: var(--soft2); }
.pencil-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* תמיד גלוי במובייל */
/* הדריסה למובייל ירדה — היא החזירה את הצבע החלש בדיוק במסך שבו
   האצבע צריכה למצוא את הכפתור. */

.inline-edit-area { width: 100%; margin-top: 4px; }
.inline-input {
  width: 100%; padding: 9px 12px;
  border: 2px solid var(--primary); border-radius: 10px;
  font-family: Rubik, sans-serif; font-size: 16px;
  direction: rtl; outline: none; background: white;
  box-sizing: border-box; color: var(--text);
}
.inline-textarea { resize: vertical; min-height: 80px; }
select.inline-input { appearance: none; -webkit-appearance: none; }

.inline-save-cancel {
  display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end;
}
.inline-ok {
  background: #22c55e; color: white; border: none;
  border-radius: 8px; padding: 8px 18px;
  cursor: pointer; font-size: 14px; transition: opacity 0.15s;
}
.inline-ok:disabled { opacity: 0.6; }
.inline-x {
  background: #f1f5f9; color: #64748b; border: none;
  border-radius: 8px; padding: 8px 18px;
  cursor: pointer; font-size: 14px;
}
.detail-row:last-child { border-bottom: none; }
.detail-row i { color: var(--primary); width: 16px; flex-shrink: 0; margin-top: 2px; }
.detail-notes span { white-space: pre-wrap; line-height: 1.5; }
.detail-photos-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.detail-photo-thumb {
  width: 80px; height: 80px; object-fit: cover;
  border-radius: 8px; cursor: pointer;
  border: 2px solid var(--border);
  transition: opacity 0.2s;
}
.detail-photo-thumb:hover { opacity: 0.85; }
.detail-photo-full {
  width: 100%; border-radius: 10px;
  cursor: pointer; border: 1px solid var(--border);
}
.detail-actions .btn { flex: 1; }

.info-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  margin-bottom: 12px;
}
.info-card h4 { font-size: 14px; color: var(--text-muted); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.info-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.info-item:last-child { border-bottom: none; }
.info-item i { color: var(--primary); width: 16px; flex-shrink: 0; margin-top: 2px; }
.info-item span { font-size: 14px; }

/* ===== WORKER COMMENTS ===== */
.worker-comments-section {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  border: none;
  margin-bottom: 12px;
}
.worker-comments-title {
  font-size: 13px; font-weight: 800;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px;
}
.worker-comment-item {
  background: var(--soft);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.worker-comment-text { font-size: 14px; line-height: 1.5; color: var(--text); white-space: pre-wrap; }
.worker-comment-time { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.worker-comment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.worker-comment-author { font-size: 12px; font-weight: 700; color: var(--worker-primary); }
body.dark-mode .worker-comment-item { background: #0f2030; }

/* Note input card (above finish button) */
.worker-note-input-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  border: none;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.worker-note-input-label {
  font-size: 13px; font-weight: 800;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px;
}
.worker-note-input-card textarea {
  width: 100%; box-sizing: border-box;
  border: none;
  border-radius: 12px;
  padding: 11px 13px;
  font-family: var(--font);
  font-size: 16px; line-height: 1.6;
  resize: none;
  background: var(--soft);
  color: var(--text);
  transition: box-shadow 0.15s;
}
.worker-note-input-card textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary);
}
body.dark-mode .worker-note-input-card textarea { background: var(--soft2); color: var(--text); }
body.dark-mode .worker-comment-item { background: var(--soft2); }

/* ===== TIMER ===== */
.timer-section {
  background: var(--soft);
  border-radius: 14px;
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  border: none;
  margin-bottom: 12px;
}
.timer-display {
  font-size: 22px; font-weight: 800;
  color: var(--text); letter-spacing: 1px;
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
}
.timer-display.running { color: var(--primary-d); }
.timer-label { font-size: 13px; color: var(--text-muted); font-weight: 700; }

/* ===== PHOTO CAPTURE ===== */
.photo-section {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
  border: none;
  margin-bottom: 12px;
}
.photo-section h4 { font-size: 13px; font-weight: 800; color: var(--text-muted); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.photo-capture {
  width: 100%; height: 124px;
  background: var(--soft2);
  border: 2px dashed var(--line);
  border-radius: 14px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer; gap: 8px;
  overflow: hidden; position: relative;
  transition: border-color 0.2s;
}
.photo-capture:active { border-color: var(--primary); }
.photo-capture i { font-size: 32px; color: var(--text-muted); }
.photo-capture span { font-size: 14px; color: var(--text-muted); }
.photo-capture img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }


/* ===== BUTTONS ===== */
.btn {
  border: none; border-radius: 14px;
  padding: 13px 20px;
  font-size: 14px; font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  /* מעבר ספציפי ולא all — all מנפיש גם מאפייני פריסה ויוצר קפיצות */
  transition: background 0.18s, color 0.18s, box-shadow 0.2s, transform 0.12s var(--ease), opacity 0.18s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  /* אין user-scalable=no ב-viewport (בכוונה, זו נגישות), ולכן ספארי עדיין
     בוחן כל נגיעה כמועמדת ל-double-tap-zoom: היא ממתינה, וזזה של שתי
     פיקסלים הופכת אותה לגלילה שנבלעת. על כפתור אין מה להגדיל. */
  touch-action: manipulation;
}
.btn:active { transform: scale(0.97); }
/* כפתור מושבת חייב להיראות מושבת. בלי זה כפתור שנשאר נעול בטעות נראה
   רגיל לגמרי, והמשתמש לוחץ עליו שוב ושוב בלי שום רמז — בדיוק מה שקרה
   עם "המשך" ולקח ארבעה סבבים לתפוס. */
.btn:disabled { opacity: 0.5; cursor: default; }
.btn:disabled:active { transform: none; }
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-success { background: #16a34a; color: white; }
.btn-success:hover { background: #15803d; }
.btn-danger { background: var(--danger); color: white; }
.btn-danger:hover { background: #ef4444; }
.btn-warning { background: var(--warning); color: white; }
.btn-outline {
  background: transparent;
  border: 2px solid var(--border);
  color: var(--text);
}
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-full { width: 100%; }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; }
/* 36×36 מצויר, 44×44 ללחיצה. אותו דפוס של `.mcd-x`: ההרחבה ב-`::after`
   כדי שהפריסה לא תזוז. */
.btn-icon { position: relative; width: 36px; height: 36px; padding: 0; border-radius: 10px; }
.btn-icon::after { content: ''; position: absolute; inset: -4px; }
/* התחלה וסיום של משימה הן שתיהן פעולות חיוביות — אדום כאן קורא כמו "מחיקה" */
.btn-start {
  background: linear-gradient(120deg, var(--primary), #20D6A2); color: #fff;
  font-size: 17px; padding: 18px; border-radius: 16px;
  box-shadow: 0 14px 28px -14px rgba(18,196,139,0.85);
}
.btn-stop {
  background: linear-gradient(120deg, var(--primary-dark), var(--primary)); color: #fff;
  font-size: 17px; padding: 18px; border-radius: 16px;
  box-shadow: 0 14px 28px -14px rgba(18,196,139,0.85);
}

/* ===== BOTTOM NAV ===== */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--card-bg);
  display: flex; border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
  z-index: 10;
}
.nav-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 10px 4px;
  background: none; border: none;
  color: var(--text-muted); font-size: 10px;
  font-family: var(--font);
  cursor: pointer; gap: 4px; transition: color 0.2s;
}
.nav-item i { font-size: 20px; }
.nav-item.active { color: var(--primary); }
.bottom-nav-worker .nav-item.active { color: var(--worker-primary); }

/* ===== FAB ===== */
.fab-container {
  position: fixed;
  bottom: 80px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 100;
}
.fab {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--primary); color: white;
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; box-shadow: var(--shadow-lg);
  transition: transform 0.2s;
}
.fab:active { transform: scale(0.93); }

/* Extended FAB — pill with label */
.fab.fab-extended {
  width: auto;
  height: 52px;
  border-radius: 26px;
  padding: 0 22px;
  gap: 10px;
  font-size: 18px;
  background: linear-gradient(135deg, #12C48B 0%, #3FE0AE 100%);
  box-shadow: 0 4px 20px rgba(108, 99, 255, 0.45);
  transition: transform 0.2s, box-shadow 0.2s;
}
.fab.fab-extended span {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.fab.fab-extended:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 28px rgba(108, 99, 255, 0.55);
}
.fab.fab-extended:active {
  transform: scale(0.96);
  box-shadow: 0 2px 12px rgba(108, 99, 255, 0.4);
}

/* ===== SEARCH BAR ===== */
.search-bar {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 0 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  margin-bottom: 14px;
}
.search-bar i { color: var(--text-muted); }
.search-bar input {
  flex: 1; padding: 13px 4px;
  border: none; background: none;
  font-size: 16px; font-family: var(--font);
  direction: rtl; outline: none;
}


/* ===== TASK PHOTOS ===== */
.task-photos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.task-photo-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
}
.task-photo-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; cursor: pointer;
}
.task-photo-remove {
  position: absolute; top: 4px; left: 4px;
  width: 22px; height: 22px;
  background: rgba(0,0,0,0.6); color: white;
  border: none; border-radius: 50%;
  font-size: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
/* ===== אותו רוחב בשורה מעורבת =====
   `.task-photo-thumb` נבנתה בשביל `.task-photos-grid`, שהיא רשת ולכן
   נותנת לה רוחב. מצב עריכת התמונות במסך המשימה מרנדר אותה בתוך
   `.detail-photos-row` שהיא flex — בלי רוחב היא קורסת לגודל
   האינטרינזי של התמונה. עכשיו יושבות שם לידה גם התמונות של העירייה
   ב-`.detail-photo-thumb`, ושתי הצורות חייבות לצאת באותו גודל. */
.detail-photos-row .task-photo-thumb { width: 80px; flex-shrink: 0; }
.btn-add-photo {
  width: 100%; padding: 10px;
  background: #f8fafc; border: 2px dashed var(--border);
  border-radius: 10px; color: var(--text-muted);
  font-size: 13px; font-weight: 600;
  font-family: var(--font);
  cursor: pointer; display: flex;
  align-items: center; justify-content: center; gap: 8px;
  transition: border-color 0.2s, color 0.2s;
}
.btn-add-photo:hover { border-color: var(--primary); color: var(--primary); }
body.dark-mode .btn-add-photo { background: #1e1e1e; }

/* ===== SIGN CARDS ===== */
.sign-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  margin-bottom: 12px;
  overflow: hidden;
  display: flex;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.sign-card:active { transform: scale(0.99); }

/* Sign detail page */
.sign-detail-hero {
  width: 100%; border-radius: var(--radius);
  overflow: hidden; margin-bottom: 12px;
  background: #f1f5f9;
  min-height: 180px;
  display: flex; align-items: center; justify-content: center;
}
.sign-detail-hero img {
  width: 100%; max-height: 260px; object-fit: cover; display: block;
  cursor: pointer;
}
/* הכפתור ממלא את כל הבמה — יעד מגע בגודל הכרטיס, לא אייקון של 48px */
.sign-detail-hero { position: relative; }
.sign-detail-hero .sign-no-photo {
  width: 100%; min-height: 180px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: none; background: transparent; cursor: pointer;
  font-size: 15px; font-weight: 600; color: #64748b;
  font-family: inherit;
}
.sign-detail-hero .sign-no-photo i { font-size: 40px; color: #94a3b8; }
.sign-detail-hero .sign-no-photo:active { background: #e9eef5; }

.sign-photo-edit {
  position: absolute; inset-inline-end: 10px; bottom: 10px;
  width: 40px; height: 40px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(15, 23, 42, .62); color: #fff; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
}
.sign-photo-edit:active { background: rgba(15, 23, 42, .8); }

/* רקע ה-Hero ב-dark-mode מוגדר במקום אחד (‎.sign-card-photo השכן, בהמשך
   הקובץ). כאן נשארים רק כללי ה"אין תמונה". */
body.dark-mode .sign-detail-hero .sign-no-photo { color: #94a3b8; }
body.dark-mode .sign-detail-hero .sign-no-photo:active { background: #273449; }

.sign-history-item {
  display: flex; gap: 12px;
  padding-bottom: 18px;
  position: relative;
}
/* vertical connector line between items */
.sign-history-item:not(:last-child) .sign-history-dot::after {
  content: '';
  position: absolute;
  top: 20px; right: 7px;
  width: 2px;
  bottom: 0;
  background: var(--border);
}
.sign-history-dot {
  position: relative;
  flex-shrink: 0;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid var(--card-bg);
  box-shadow: 0 0 0 2px var(--primary);
  margin-top: 3px;
}
.sign-history-content {
  flex: 1; min-width: 0;
  background: #f8fafc;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
}
.sign-history-header {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 8px;
  margin-bottom: 4px;
}
.sign-history-title {
  font-size: 14px; font-weight: 600;
  color: var(--text); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sign-history-date {
  font-size: 11px; color: var(--text-muted);
  flex-shrink: 0; white-space: nowrap;
}
.sign-history-meta {
  font-size: 12px; color: var(--text-muted);
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 4px;
}
.sign-history-meta span {
  display: inline-flex; align-items: center; gap: 3px;
}
.sign-history-comment {
  font-size: 13px; color: var(--text);
  background: white; border-radius: 8px;
  padding: 6px 10px; margin-top: 6px;
  border-right: 3px solid var(--primary);
  font-style: italic;
}
img.sign-history-photo {
  display: block;
  width: 80px; height: 80px;
  object-fit: cover; border-radius: 10px;
  cursor: pointer; border: 2px solid var(--border);
  transition: opacity 0.15s;
  margin-top: 8px;
}
img.sign-history-photo:active { opacity: 0.8; }

/* dark mode history */
body.dark-mode .sign-history-content {
  background: #1e2533; border-color: #2d3748;
}
body.dark-mode .sign-history-comment {
  background: #16213e;
}
body.dark-mode .sign-history-item:not(:last-child) .sign-history-dot::after {
  background: #2d3748;
}
body.dark-mode .sign-history-dot {
  border-color: #1a1a2e;
}
body.dark-mode img.sign-history-photo {
  border-color: #2d3748;
}

/* Sign map picker in add modal */
.sign-map-container {
  width: 100%;
  height: 210px;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  background: #e8f0e9;
}
body.dark-mode .sign-map-container { border-color: #2d3748; }


body.dark-mode .sign-thumb-placeholder { background: #1e2533; }
.task-card-footer {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; flex-wrap: wrap;
}

/* Task photos viewer — adaptive layout */
.task-photos-viewer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.task-photos-viewer img {
  width: 100%; aspect-ratio: 1;
  object-fit: cover; border-radius: 10px;
  cursor: pointer;
}
/* 2 photos: side by side, square crop */
.task-photos-2 {
  grid-template-columns: 1fr 1fr;
}
/* ===== תמונה אחת מקבלת את הרוחב =====
   הרשת היא שלוש עמודות תמיד, ולכן תמונה בודדת ישבה בשליש רוחב וקוצצה
   לריבוע. זו התמונה היחידה שיש — מי שצירף אותה צירף אותה כדי להראות
   משהו מסוים, וחיתוך מרובע של צילום שלט לרוחב מוריד בדיוק את זה.
   `contain` ולא `cover`: עדיף שוליים מאשר לחתוך את מה שבאו להראות. */
.task-photos-1 { grid-template-columns: 1fr; }
.task-photos-1 img {
  aspect-ratio: auto; max-height: 340px;
  object-fit: contain; background: var(--soft2);
}

/* ===== FILTER TABS ===== */
.filter-tabs {
  display: flex; gap: 8px; margin-bottom: 14px;
  overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none;
}
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab {
  /* השבב יצא 38px. min-height בלבד — flex-direction: column היה מסדר
     את המונה מתחת לתווית במקום לידה. */
  min-height: 40px; display: inline-flex;
  align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border-radius: 20px;
  border: none; background: var(--card-bg);
  color: var(--text-muted); font-size: 13px; font-weight: 500;
  font-family: var(--font);
  cursor: pointer; white-space: nowrap;
  box-shadow: var(--shadow);
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.12s var(--ease);
}
.filter-tab.active { background: var(--primary); color: white; }

/* ===== MODAL ===== */
.modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; }
/* אישור שנפתח מתוך מודל אחר חייב לשבת מעליו, אחרת הוא מצויר מאחוריו.
   שאלה קצרה לא צריכה גיליון שעולה מהתחתית — היא לוח קטן שנוחת במרכז. */
#modal-confirm-delete { z-index: 1100; align-items: center; justify-content: center; }
#modal-confirm-delete .modal-card {
  width: auto; max-width: 440px; margin: 20px;
  border-radius: var(--radius); padding: 22px 22px 18px;
  text-align: start;
  animation: confirmIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.55);
}
#modal-confirm-delete.closing .modal-card { animation: confirmOut 0.16s cubic-bezier(0.4, 0, 1, 1) both; }
@keyframes confirmIn  { from { opacity: 0; transform: translateY(14px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes confirmOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(0.97); } }

/* שורה אופקית: אייקון, ואז השאלה וההסבר לידו */
.confirm-row { display: flex; align-items: flex-start; gap: 14px; }
#modal-confirm-delete .modal-icon {
  width: 46px; height: 46px; margin: 0; flex-shrink: 0; font-size: 19px; border-radius: 14px;
}
.confirm-copy { flex: 1; min-width: 0; }
#modal-confirm-delete h3 { font-size: 17px; margin: 0 0 5px; line-height: 1.3; }
#modal-confirm-delete .modal-text {
  text-align: start; margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-muted);
}
#modal-confirm-delete .modal-actions { margin-top: 18px; gap: 10px; }
#modal-confirm-delete .modal-actions .btn { font-size: 13.5px; padding: 13px 10px; }
.modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); animation: overlayIn 0.25s ease-out both; }

/* יציאה במראה של הכניסה — מה שעלה מלמטה יורד למטה, ומה שגדל מתכווץ */
.modal.closing { pointer-events: none; }
.modal.closing .modal-overlay { animation: overlayOut 0.18s ease-in both; }
.modal.closing .modal-card { animation: sheetOut 0.2s cubic-bezier(0.4, 0, 1, 1) both; }
.modal.closing .import-wizard-card { animation: cardOut 0.18s cubic-bezier(0.4, 0, 1, 1) both; }
@keyframes overlayIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes overlayOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes sheetOut   { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100%); opacity: 0.6; } }
@keyframes cardOut    { from { transform: scale(1); opacity: 1; } to { transform: scale(0.96); opacity: 0; } }
.modal-card {
  position: relative; background: var(--card-bg);
  border-radius: 24px 24px 0 0;
  padding: 24px 20px;
  width: 100%; max-height: 90vh;
  overflow-y: auto;
  /* `forwards` נועל את מצב הסיום (translateY(0)). בלעדיו, אנימציה שלא
     התקדמה השאירה את הכרטיס מוזז מטה בגובה שלו — כלומר שורת הכפתורים
     מצוירת מתחת לתחתית המסך, והמשתמש רואה כרטיס ולוחץ על כלום. */
  animation: slideUp 0.3s ease forwards;
}
/* המצב הסופי, אחרי שהכניסה הסתיימה. `Modal.open` מוסיף את זה גם אם
   האנימציה נחנקה באמצע — וזו הסיבה ל-`!important`: אנימציה שרצה גוברת
   על סגנון רגיל ועל inline, ובלי זה אין דרך להוריד כרטיס שנתקע מוזז. */
.modal-card.settled { animation: none !important; transform: none !important; }

/* ===== פס הסביבה =====
   מופיע רק בסטייג'ינג. בלעדיו שתי הסביבות נראות זהות לחלוטין, וזו הדרך
   המהירה ביותר להראות ללקוח נתוני בדיקה — או לחשוב שאתה בודק ולמחוק
   לו משימות אמיתיות. יושב מעל הכל וחוסם לחיצות דרכו. */
#env-badge {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 99999;
  pointer-events: none;
  background: repeating-linear-gradient(135deg, #d97706 0 12px, #b45309 12px 24px);
  color: #fff; font-family: var(--font); font-size: 11px; font-weight: 800;
  text-align: center; letter-spacing: .02em;
  padding: calc(3px + env(safe-area-inset-top)) 8px 3px;
}
/* דוחפים את התוכן למטה כדי שהפס לא יכסה את הכותרת */
body.is-staging { padding-block-start: 20px; }

/* Tall modal — flex column with sticky header + footer, scrollable body */
.modal-tall {
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: hidden; /* prevent card itself from scrolling; body scrolls */
}
.modal-tall > h3 {
  padding: 20px 20px 14px;
  margin-bottom: 0;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.modal-scroll-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}
/* ===== למה שורת הכפתורים מקבלת שכבה משלה =====
   "לא מצליח ללחוץ על המשך" חזר שלוש פעמים, תמיד באותו מבנה: כרטיס גבוה,
   אזור גלילה, ומתחתיו שורת כפתורים. בדפדפן שולחני זה עובד תמיד — הבדיקה
   של הפעולה, של המיקום ושל elementFromPoint כולן נקיות — ולכן זה אף פעם
   לא נתפס אצלי. אזור גלילה בספארי מקבל שכבת קומפוזיטינג משלו, והשכבה
   הזו בולעת מגע על אחים שמצוירים אחריה. הכפתור נראה, נצבע, ולא מקבל את
   האצבע. `z-index` מפורש מוציא את השורה מהוויכוח הזה. */
.modal-tall > .modal-actions {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  /* `manipulation` מבטל רק זום-בנגיעה-כפולה; גלילה הוא עדיין מתיר,
     ולכן ספארי ממשיך לבחון כל נגיעה כאן כתחילת גרירה. `none` אומר
     שמהשורה הזו לא מתחילה שום מחווה — היא ממילא לא נגללת. */
  touch-action: none;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  margin-top: 0;
  border-top: 1px solid var(--line);
  background: var(--card-bg);
  border-radius: 0; /* flat inside the card */
}

.modal-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 20px; }
.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal-actions .btn { flex: 1; }
.modal-icon { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.modal-icon.warning { background: #fff7ed; color: var(--warning); }
.modal-icon.danger { background: #fee2e2; color: var(--danger); }
.modal-text { text-align: center; color: var(--text-muted); margin-bottom: 16px; font-size: 15px; }

/* ===== CHECKLIST ===== */
.checklist { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.check-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; cursor: pointer; padding: 10px;
  border-radius: 10px; border: 1px solid var(--border);
}
.check-item input[type="checkbox"] {
  width: 20px; height: 20px; accent-color: var(--success);
}

/* ===== SIGNATURE PAD ===== */
.signature-section {
  margin: 16px 0 8px;
  text-align: right;
}
.signature-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px; font-size: 14px; font-weight: 600;
}
.signature-header .sig-optional {
  color: var(--text-muted); font-weight: 400; font-size: 12px;
}
.signature-header .btn-clear-sig {
  margin-right: auto; background: none;
  border: 1px solid var(--border); border-radius: 6px;
  padding: 2px 10px; font-size: 12px; cursor: pointer;
  color: var(--text-muted); font-family: inherit;
}
.signature-pad {
  width: 100%; height: 130px; display: block;
  border: 2px dashed var(--border); border-radius: 12px;
  background: #fff; cursor: crosshair;
  touch-action: none;
}
.dark-mode .signature-pad { background: #1e293b; }
.signature-hint {
  text-align: center; font-size: 11px;
  color: var(--text-muted); margin-top: 5px;
}
.sig-status {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; font-size: 12px; margin-top: 4px;
  color: var(--success); font-weight: 500;
}
.signature-display-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px; margin-top: 12px;
}
.signature-display-card h4 {
  font-size: 13px; color: var(--text-muted); margin-bottom: 8px;
}
.signature-display-img {
  width: 100%; max-height: 90px; object-fit: contain;
  border-radius: 8px; border: 1px solid var(--border);
  background: #fff; cursor: pointer;
}

/* ===== FORM ===== */
/* form-group מיושר לשפה של as-field. היו שני סגנונות טפסים באפליקציה
   אחת — ממולא ורך במסכים החדשים, ממוסגר וחד בישנים. אותם ערכים בדיוק,
   בלי לשכתב 20 בלוקים של מרקאפ. */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block; font-size: 12px; font-weight: 800;
  color: var(--text-muted); margin-bottom: 7px;
}
/* ===== 16px בשדות קלט — לא בחירה עיצובית =====
   ספארי באייפון מזמזם את כל הדף כשמתמקדים בשדה שהגופן שלו קטן מ-16px,
   והזום נשאר. זה קרה בכל שדה באפליקציה, החל ממסך הכניסה. */
.form-group input, .form-group select, .form-group textarea {
  width: 100%; padding: 13px;
  border: 1.5px solid transparent; border-radius: 14px;
  font-size: 16px; font-family: var(--font);
  direction: rtl; outline: none;
  background: var(--soft); color: var(--text);
  transition: border-color 0.16s, background 0.16s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--primary); background: var(--card-bg);
}
.form-group textarea { resize: none; }

/* ===== LOGIN ===== */
/* מסך הכניסה — אותה שפה בהירה של שאר האפליקציה. הרקע הכהה שהיה כאן
   נראה כמו מוצר אחר לגמרי ברגע שנכנסת פנימה. */
.login-bg {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 24px calc(24px + env(safe-area-inset-right)) 24px calc(24px + env(safe-area-inset-left));
  background: var(--bg);
}
.login-card {
  background: var(--card-bg);
  border-radius: 26px; padding: 30px 24px 22px;
  width: 100%; max-width: 380px;
  box-shadow: 0 26px 60px -30px rgba(15,42,32,0.4);
  animation: rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.login-logo { text-align: center; margin-bottom: 22px; }
.login-ill { width: 96px; height: 84px; display: block; margin: 0 auto 8px; }
.login-logo h1 { font-size: 30px; font-weight: 800; margin: 0 0 4px; letter-spacing: -0.02em; }
.login-logo p { color: var(--text-muted); font-size: 13px; line-height: 1.5; }

.login-pass { position: relative; display: block; }
.login-pass input { padding-inline-end: 46px; }
.login-eye {
  position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%);
  /* 44px — זה הכפתור שנלחץ דווקא כשמשהו משתבש, באצבע רטובה בשמש */
  width: 44px; height: 44px; border: none; background: none; cursor: pointer;
  color: var(--text-muted); font-size: 15px; border-radius: 12px;
  display: grid; place-items: center;
  transition: color 0.15s;
}
.login-eye:hover { color: var(--text); }
.login-submit { margin-top: 20px; font-size: 15px; padding: 15px; border-radius: 15px; }
.login-forgot {
  display: block; width: 100%; margin-top: 12px;
  border: none; background: none; cursor: pointer;
  color: var(--text-muted); font-family: var(--font); font-weight: 700; font-size: 12.5px;
  padding: 13px 8px; min-height: 44px; border-radius: 12px;
  transition: color 0.15s;
}
.login-forgot:hover { color: var(--primary-d); }
@media (prefers-reduced-motion: reduce) { .login-card { animation: none; } }

/* ===== OFFLINE BANNER ===== */
.offline-banner {
  position: fixed; top: 0; left: 0; right: 0;
  background: #f59e0b; color: #1a1a2e;
  text-align: center; font-size: 13px; font-weight: 600;
  padding: 8px 16px; z-index: 10000;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  animation: slideDown 0.3s ease;
}
.offline-banner.hidden { display: none; }
@keyframes slideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

/* ===== TOAST ===== */
.toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
  background: var(--dark); color: white;
  padding: 12px 20px; border-radius: 100px;
  font-size: 14px; z-index: 9999;
  box-shadow: var(--shadow-lg);
  animation: fadeInOut 3s forwards;
  white-space: nowrap;
}

/* ===== INBOX ===== */
/* מסך ההודעות המאוחד. שני מקטעים, לא שתי מערכות. */

/* בורר המקטעים — גלולה עם אינדיקטור מחליק. RTL, ולכן ברירת המחדל
   נמצאת מימין וההזזה שלילית. */
.inbox-seg {
  position: relative;
  display: flex; gap: 2px;
  margin: 0 16px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 13px; padding: 4px;
  box-shadow: var(--shadow);
}
.inbox-seg-ind {
  position: absolute; z-index: 0;
  inset-block: 4px; inset-inline-start: 4px;
  width: calc(50% - 4px);
  background: var(--primary);
  border-radius: 10px;
  transition: transform .34s cubic-bezier(.32,.72,0,1);
}
.inbox-seg-btn {
  position: relative; z-index: 1;
  flex: 1; padding: 9px 4px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; background: transparent;
  font-family: var(--font); font-size: 13.5px; font-weight: 600;
  color: var(--text-muted); cursor: pointer;
  transition: color .22s;
}
.inbox-seg-btn.active { color: #fff; }
.inbox-seg-btn:active { transform: scale(.97); }
.inbox-seg-n {
  min-width: 17px; height: 17px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; font-size: 10.5px; font-weight: 800;
  background: var(--secondary); color: #fff;
}
.inbox-seg-btn.active .inbox-seg-n { background: rgba(255,255,255,.28); }
.inbox-seg-n.hidden { display: none; }

/* רשימת העדכונים */
.inbox-updates {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 0 16px 90px;
}
.inbox-updates.hidden { display: none; }

.inbox-readall {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; margin-bottom: 2px;
  background: transparent; border: 1px solid var(--border);
  border-radius: 20px; color: var(--text-muted);
  font-family: var(--font); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: color .2s, border-color .2s, transform .12s var(--ease);
}
.inbox-readall:active { transform: scale(.96); }

.inbox-row {
  width: 100%; text-align: start;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  font-family: var(--font); cursor: default;
  transition: transform .12s var(--ease), border-color .2s, background .2s;
}
.inbox-row.tappable { cursor: pointer; }
.inbox-row.tappable:active { transform: scale(.985); }
/* לא-נקרא מסומן בנקודה ובטקסט כהה יותר. פס צבעוני בצד השורה היה
   סימן שני לאותו מצב, והנקודה לבדה מספיקה. */
.inbox-row.unread .inbox-row-text { font-weight: 600; }

.inbox-row-ic {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.inbox-row-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.inbox-row-top { display: flex; align-items: center; gap: 6px; }
.inbox-row-kind { font-size: 11px; font-weight: 800; letter-spacing: .2px; }
.inbox-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--secondary); }
.inbox-row-text {
  font-size: 14px; font-weight: 500; color: var(--text);
  line-height: 1.45; word-break: break-word;
}
.inbox-row-meta { font-size: 11.5px; color: var(--text-muted); }
.inbox-row-go { align-self: center; font-size: 11px; color: var(--text-muted); flex-shrink: 0; }

/* כפתור השידור — צף מעל הרשימה כדי שלא ייעלם בגלילה */
.inbox-compose {
  position: absolute; inset-inline: 16px; bottom: 18px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px;
  border: none; border-radius: 14px;
  background: var(--primary); color: #fff;
  font-family: var(--font); font-size: 14.5px; font-weight: 700;
  box-shadow: 0 8px 22px rgba(18,196,139,.34);
  cursor: pointer;
  transition: transform .14s var(--ease), box-shadow .2s;
}
.inbox-compose:active { transform: scale(.975); }
.inbox-compose.hidden { display: none; }

@media (prefers-reduced-motion: reduce) {
  .inbox-seg-ind { transition: none; }
  .inbox-row:active, .inbox-compose:active, .inbox-seg-btn:active { transform: none; }
}

/* ===== WORKER DETAIL ===== */
.worker-detail-header {
  background: linear-gradient(135deg, var(--dark), var(--dark3));
  color: white; border-radius: var(--radius);
  padding: 24px; text-align: center; margin-bottom: 16px;
}
.worker-detail-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
  margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700;
}
.worker-detail-name { font-size: 22px; font-weight: 700; }
.worker-detail-sub { font-size: 14px; opacity: 0.8; margin-top: 4px; }

/* ===== EMPTY STATE ===== */
.empty-state {
  text-align: center; padding: 40px 20px;
  color: var(--text-muted);
}
.empty-state i { font-size: 40px; margin-bottom: 12px; display: block; }
.empty-state p { font-size: 14px; }


/* ===== LOADING SPINNER ===== */
.loading {
  display: flex; align-items: center; justify-content: center;
  padding: 40px; color: var(--text-muted);
}
.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-left: 10px;
}

/* ===== PRIORITY BADGE ===== */

/* ===== SETTINGS ENTRANCE ANIMATION ===== */
/* ===== כאן ישבה אנימציית הכניסה להגדרות, והיא נמחקה =====
   `.settings-section` ו-`.settings-item` נשאו `opacity: 0` כמצב התחלה של
   `settingsFadeIn`. אנימציית CSS לא מתחילה על אלמנט שאינו מרונדר, ומסכי
   ההגדרות מוסתרים בדיוק ברגע שהיא אמורה להתחיל — ולכן הם היו שקופים
   **תמיד**, גם אצל העירייה וגם אצל הקבלן. אף אחד לא שם לב כי כמעט אף
   אחד לא נכנס לשם. אותה מלכודת הפילה גם את שורת "דוח מצב וייצוא" בבית,
   שהופיעה רק לפעמים.

   ניסיתי שתי דרכים לתקן בלי לוותר על האנימציה. `fill-mode: backwards`
   מחמיר — הוא מחיל את מצב ההתחלה עוד לפני שהיא רצה. בלי fill-mode בכלל
   שני שלישים מהמקטעים עדיין יצאו שקופים, עם `getAnimations()` ריק
   ו-`animationPlayState: running` באותה נשימה. אימתתי את שניהם ב-DOM.

   אז היא נמחקה. הכניסה למסך כבר נושאת `playPageIn`, וההבדל היחיד הוא
   שהמקטעים לא נכנסים בהשהיה מדורגת. מסך בלתי נראה הוא באג; fade הוא
   נחמדות. */

/* ===== SETTINGS ===== */
.settings-section {
  background: var(--card-bg);
  border-radius: var(--radius);
  margin-bottom: 14px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  overflow: hidden;
}
.settings-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 12px 16px 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--border);
}
.settings-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}
.settings-item:last-child { border-bottom: none; }
.settings-item:active { background: #f8fafc; }
.settings-item-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.settings-item-info {
  flex: 1;
  display: flex; flex-direction: column; gap: 2px;
}
.settings-item-label { font-size: 14px; font-weight: 500; }
.settings-item-sub { font-size: 12px; color: var(--text-muted); }
.settings-arrow { color: var(--text-muted); font-size: 12px; }

/* ===== TOGGLE SWITCH ===== */
.toggle-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: #cbd5e1; border-radius: 26px;
  cursor: pointer; transition: 0.3s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  right: 3px; bottom: 3px;
  background: white; border-radius: 50%;
  transition: 0.3s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--primary); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(-20px); }

/* ===== ANIMATIONS ===== */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadeInOut { 0%,100% { opacity: 0; } 10%,80% { opacity: 1; } }
@keyframes pulse-border { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ===== DARK MODE TRANSITION ===== */
body, body * {
  transition: background-color 0.4s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ===== DARK MODE ===== */
body.dark-mode {
  --card-bg: #16241E;
  --surface: #16241E;
  --primary-soft: #153529;
  --text: #E9F4EF;
  --text-muted: #8AA398;
  --muted: #8AA398;
  --border: #243A31;
  --line: #243A31;
  --soft: #1B2B24;
  --soft2: #182620;
  --bg: #0E1A15;
  --shadow: 0 16px 40px -20px rgba(0,0,0,.65);
  --shadow-sm: 0 6px 20px -12px rgba(0,0,0,.55);
  background: #0E1A15;
}
body.dark-mode .topbar { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); }
body.dark-mode .bottom-nav { background: #16241E; border-color: #243A31; }
body.dark-mode .stat-card,
body.dark-mode .task-card,
body.dark-mode .worker-card,
body.dark-mode .city-card,
body.dark-mode .sign-card,
body.dark-mode .info-card,
body.dark-mode .activity-item,
body.dark-mode .inbox-row,
body.dark-mode .incident-card,
body.dark-mode .settings-section,
body.dark-mode .worker-status-bar { background: #16241E; border-color: #243A31; }
body.dark-mode .sign-card-photo { background: #1e2533; }
body.dark-mode .sign-detail-hero { background: #1e2533; }
body.dark-mode .sign-preview-small { background: #0c1a28; border-color: #1e3a5a; }
body.dark-mode .photo-capture { background: #1e1e1e; border-color: #383838; }
body.dark-mode .search-bar { background: #242424; border-color: #383838; }
body.dark-mode .search-bar input { color: #e8e8e8; }
body.dark-mode .filter-tab { background: #242424; color: #a0a0a0; }
body.dark-mode .filter-tab.active { background: var(--primary); color: white; }
body.dark-mode .modal-card { background: var(--card-bg); }
body.dark-mode .modal-tall > .modal-actions { background: var(--card-bg); border-top-color: var(--line); }
body.dark-mode .modal-tall > h3 { border-bottom-color: var(--line); }
body.dark-mode input, body.dark-mode select, body.dark-mode textarea {
  background: var(--soft2); border-color: var(--line); color: var(--text);
}
body.dark-mode .form-card { background: var(--card-bg); }
body.dark-mode .settings-item:active { background: #1e1e1e; }
body.dark-mode .inbox-seg { background: var(--card-bg); }
body.dark-mode .timer-section { background: #242424; border-color: #383838; }
body.dark-mode .photo-section { background: #242424; border-color: #383838; }
body.dark-mode .greeting-card { background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); }
body.dark-mode .task-detail-header { background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); }
body.dark-mode .worker-detail-header { background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%); }
body.dark-mode .splash { background: linear-gradient(135deg, #161616 0%, #1e1e1e 100%); }
body.dark-mode .danger-zone { background: #2a1a1a; border-color: #5a2a2a; }

/* Dark mode - icons & iMission white */
body.dark-mode .splash-logo i,
body.dark-mode .splash-logo h1,
body.dark-mode .login-logo h1 { color: #ffffff; }
body.dark-mode .greeting-brand { color: #ffffff; }
body.dark-mode .nav-item { color: #64748b; }
body.dark-mode .nav-item.active { color: #ffffff; }
body.dark-mode .nav-item i { color: inherit; }
body.dark-mode .stat-card i { color: #ffffff; }
body.dark-mode .city-card i { color: #ffffff; }
body.dark-mode .section-title { color: #f1f5f9; }
body.dark-mode .settings-section-title { color: var(--text-muted); }
body.dark-mode .icon-btn { background: rgba(255,255,255,0.1); }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }


.btn-daily-import {
  width: 100%; margin-bottom: 16px; padding: 16px 18px; border: none; cursor: pointer;
  border-radius: var(--radius); color: #fff; font-family: var(--font); font-weight: 600;
  font-size: 15px; display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 8px 22px -8px rgba(18,196,139,0.5); transition: transform 0.15s;
}
.btn-daily-import:active { transform: scale(0.98); }
.btn-daily-import > span { flex: 1; text-align: start; }
.btn-daily-import i:first-child { font-size: 18px; }
.btn-daily-import i:last-child { font-size: 13px; opacity: 0.8; }

/* "דווח על שלט" — אותה גיאומטריה, משקל אחר.
   שני כפתורים מלאים זה על זה היו נאבקים על אותו מבט, ושניהם באמת ראשיים
   בשביל הפקח: לדווח הוא עושה כמה פעמים ביום, להעלות קובץ פעם אחת. הצורה
   הממולאת נשארת אצל ההעלאה כי מכונת המצבים שלה (`is-reading` / `is-sent`)
   בנויה על הגרדיאנט ועל הצל הירוק. הדיווח מקבל את אותו כפתור בגרסה רכה. */
.btn-report-sign {
  background: var(--primary-soft);
  color: var(--primary-d);
  box-shadow: none;
  margin-bottom: 10px;
}

/* ==========================================================================
   הכפתור שאומר בעצמו מה קרה
   ==========================================================================
   קודם ההצלחה נכתבה בשורת טקסט מתחת לכפתור: "הקובץ נשלח לקבלן ✓".
   שורה שנשארת על המסך לנצח מפסיקה להיות חדשות ומתחילה להיות רעש —
   ומחר, כשהיא עדיין שם, היא אפילו משקרת.

   הרגע הזה שייך לכפתור, כי הכפתור הוא הפעולה. גל בצבע כהה יותר שוטף
   אותו מקצה ההתחלה (ימין ב-RTL) הוא הקובץ שעוזב, האייקון הופך לוי,
   והכל חוזר לעצמו אחרי שתי שניות — כי המצב הקבוע של המסך הזה הוא
   "אפשר להעלות קובץ", לא "שלחת פעם".

   רק transform ו-opacity, ופסאודו-אלמנט אחד תחום. */
.btn-daily-import { position: relative; overflow: hidden; }
.btn-daily-import::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(120deg, var(--primary-dark), #0f9e72);
  transform: scaleX(0); transform-origin: right center;
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-daily-import > * { position: relative; z-index: 1; }
.btn-daily-import.is-sent::after { transform: scaleX(1); }
.btn-daily-import.is-sent { box-shadow: 0 10px 26px -8px rgba(15,158,114,0.55); }

/* קריאת הקובץ: הכפתור מפסיק להיות לחיץ ואומר במה הוא עסוק */
.btn-daily-import:disabled { cursor: default; opacity: 1; }
.btn-daily-import.is-reading .bdi-ic { animation: spin 0.9s linear infinite; }
.btn-daily-import.is-reading .bdi-go, .btn-daily-import.is-sent .bdi-go { opacity: 0; }

/* התווית והאייקון מתחלפים בהצלבה קצרה — 180ms, בדיוק מספיק כדי
   שהעין תראה החלפה ולא קפיצה */
.bdi-label, .bdi-ic { transition: opacity 0.18s ease; }
.btn-daily-import.is-swap .bdi-label, .btn-daily-import.is-swap .bdi-ic { opacity: 0; }

.muni-upload-err {
  text-align: center; margin: 0 0 12px; font-size: 13px;
  font-weight: 700; color: #B3261E; line-height: 1.5;
}
.muni-upload-err:empty { margin: 0; }
body.dark-mode .muni-upload-err { color: #FF9A9E; }

@media (prefers-reduced-motion: reduce) {
  .btn-daily-import::after { transition: none; }
  .btn-daily-import.is-reading .bdi-ic { animation: none; }
}

.sign-type-tag {
  font-size: 11px; font-weight: 700; background: var(--primary-soft); color: var(--primary-d);
  padding: 1px 8px; border-radius: 6px;
}
.sign-side-badge {
  font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 6px;
  border: 1px solid transparent; white-space: nowrap;
}
.sign-side-badge.side-A { background: rgba(56,189,248,0.16); color: #1f9fcc; }
.sign-side-badge.side-B { background: rgba(251,191,36,0.2); color: #c9871a; }
/* פאות C/D — קיימות רק בקוביית פרסום (4 פאות) */
.side-count {
  font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 20px;
  background: var(--soft); color: var(--text-muted); margin-inline-start: 5px;
}
.sign-side-badge.side-C { background: rgba(167,139,250,0.2); color: #7c5cd6; }
.sign-side-badge.side-D { background: rgba(255,138,115,0.2); color: #d6603f; }
/* צד שקיים בשלט אבל לא ביקשו עליו טיפול בקובץ הזה */
.sign-side-badge.side-idle { background: var(--soft); color: #9aa4ad; }
/* האם העירייה ביקשה טיפול בצד הזה */

body.dark-mode .sign-type-tag { background: #2a2550; color: #a5b4fc; }
body.dark-mode .btn-import-signs { background: rgba(18,196,139,0.14); }
body.dark-mode .sign-side-badge.side-A { background: #1e3a5f; color: #93c5fd; }
body.dark-mode .sign-side-badge.side-B { background: #3f2d12; color: #fcd34d; }
body.dark-mode .sign-side-badge.side-C { background: #2f2450; color: #c4b5fd; }
body.dark-mode .sign-side-badge.side-D { background: #4a2418; color: #fca5a5; }

/* ===== RICH SIGN SIDE CARDS ===== */
.side-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .sign-flip-panel { transition: none !important; } }
.side-card { border: 1px solid var(--border); border-radius: 14px; padding: 12px; background: rgba(0,0,0,0.02); }
/* שתי שורות ולא אחת: זהות הצד למעלה, המצב מתחת. חמישה תגים וכפתור על
   שורה אחת נשברו במסך של אייפון — תג ארוך התפצל לשתי שורות וגרר את
   כל השורה איתו. הפרדה עולה 6px של גובה ומחזירה קריאוּת. */
.side-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.side-card-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 2px; }
.side-card-tags > * { white-space: nowrap; }
.side-edit-btn { margin-inline-start: auto; font-size: 11px; }


.side-defects { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.side-defect { font-size: 12px; color: #ef4444; background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.18); border-radius: 8px; padding: 6px 9px; }

.side-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.side-foot-stat { font-size: 11px; color: var(--text-muted); }
.side-card-foot .btn { margin-inline-start: auto; }

/* דיווח של העירייה נערך מכאן — זו הדרך לסגור אחד כזה, ולכן הטקסט
   יושב בשדה פתוח ולא בתווית. 16px כדי שאייפון לא יזום בפוקוס. */
.edit-defect-chip.city { background: rgba(99,102,241,.08); border-color: rgba(99,102,241,.22); }
.edit-defect-chip.city i.fa-building-columns { color: #6366f1; }
.edit-defect-chip.city input {
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 4px 0;
  font-family: var(--font); font-size: 16px; color: var(--text); border-radius: 0;
  border-bottom: 1px dashed rgba(99,102,241,.4);
}
.edit-defect-chip.city input:focus { outline: none; border-bottom-style: solid; border-bottom-color: #6366f1; }
.edit-defect-chip i.fa-triangle-exclamation { color: #ef4444; }

body.dark-mode .side-card { background: rgba(255,255,255,0.03); }
body.dark-mode .lb-unknown { background: #1e2533; }

/* `.muni-hero` ירד: כותרת של 110px שהסבירה את הכפתור שמתחתיה. */

.muni-batch { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 10px; box-shadow: var(--shadow-sm, 0 4px 16px -8px rgba(0,0,0,.12)); }
.muni-batch-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.muni-batch-date { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.muni-batch-date i { color: #16a34a; }
.muni-batch-meta { font-size: 12.5px; color: var(--text-muted); }
.muni-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
.muni-badge.pending { background: rgba(245,158,11,.15); color: #d97706; }
.muni-badge.done { background: rgba(22,163,74,.15); color: #16a34a; }
.muni-progress { height: 8px; background: var(--border); border-radius: 5px; overflow: hidden; margin: 10px 0 5px; }
.muni-progress-bar { height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-dark)); transition: width 0.4s; }
.muni-progress-label { font-size: 11.5px; color: var(--text-muted); }

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

.work-order-card {
  display: flex; align-items: center; gap: 12px; background: var(--card-bg);
  border: 1.5px solid var(--primary); border-radius: 14px; padding: 13px; margin-bottom: 10px;
  cursor: pointer; box-shadow: 0 6px 20px -10px rgba(18,196,139,0.35); transition: transform 0.15s;
}
.work-order-card:active { transform: scale(0.99); }
.wo-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(22,163,74,.14); color: #16a34a; display: grid; place-items: center; font-size: 20px; flex-shrink: 0; }
.wo-body { flex: 1; min-width: 0; }
.wo-title { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.wo-new { font-size: 10px; font-weight: 700; background: var(--primary); color: #fff; padding: 1px 8px; border-radius: 20px; }
.wo-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.wo-action { color: var(--primary); font-size: 14px; }

.muni-badge.review { background: rgba(18,196,139,.15); color: var(--primary); }
.muni-badge.cancelled { background: rgba(148,163,184,.2); color: #64748b; }
.muni-cancelled { opacity: 0.6; }
.wo-review-tag { font-size: 10px; font-weight: 700; background: rgba(18,196,139,.15); color: var(--primary); padding: 1px 8px; border-radius: 20px; }
.muni-batch.can-arm { cursor: pointer; }
.muni-batch-x {
  display: none; width: 26px; height: 26px; border-radius: 50%; border: none;
  background: #ef4444; color: #fff; cursor: pointer; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0; box-shadow: 0 2px 8px -2px rgba(239,68,68,.5);
  animation: popX 0.15s ease;
}
@keyframes popX { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.work-order-card.wo-urgent { border-color: #ef4444; box-shadow: 0 6px 20px -10px rgba(239,68,68,0.4); }

.muni-period button.on { background: var(--card-bg); color: var(--primary); box-shadow: var(--shadow-sm, 0 4px 12px -6px rgba(0,0,0,.15)); }
/* שני כפתורי הייצוא בתחתית עמוד הדוח. הם מסיימים את העמוד ולא נאבקים
   על המבט בראשו, ולכן `btn-outline` ולא `btn-primary` — הפעולה הראשית
   כאן היא לקרוא את הדוח, לא להוריד אותו. */
.muni-report-actions { display: flex; gap: 10px; margin-top: 20px; }
.muni-report-actions .btn { flex: 1; min-height: 44px; }

/* "בתהליך" הוא לא הישג. הוא נצבע בירוק ההצלחה של המערכת, ולכן 266
   משימות פתוחות נראו כמו חדשות טובות. */
/* על איזו תקופה המספר מדבר. בלי זה "הושלמו 7" ליד "בתהליך 266" נקראו
   כאילו הם מאותו סרגל, כשאחד מסונן לתקופה והשני הוא תמונת מצב. */
/* `.muni-completion` נשאר בשימוש דף ההגשה בלבד, ושם האחוז אמיתי:
   הושלמו חלקי מה שנשלח באותה פקודה. שלוש מחלקות הצבע לפי סף ירדו איתו
   מדוח המצב — שם האחוז לא היה אחוז ביצוע, ובדף ההגשה הן לא בשימוש. */
.muni-completion-top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; margin-bottom: 7px; }
.muni-completion-pct { font-size: 16px; font-weight: 700; }

body.dark-mode .muni-badge.pending { background: rgba(245,158,11,.2); }
body.dark-mode .muni-badge.done, body.dark-mode .wo-icon { background: rgba(22,163,74,.2); }
body.dark-mode .muni-badge.cancelled { background: rgba(148,163,184,.15); }
body.dark-mode .muni-period { background: #1e2533; }

/* יעד מגע: קודם הכפתור היה בגובה ~20px. אצבע על מסך צריכה 44. */
.muni-archive-link { border: none; background: transparent; color: var(--primary); font-family: var(--font); font-weight: 600; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 5px; padding: 4px 6px; min-height: 44px; }
.muni-archive-link i { font-size: 12px; }
.muni-arch-group { margin-bottom: 16px; }
.muni-arch-group:last-child { margin-bottom: 0; }
.muni-arch-date { font-size: 12px; font-weight: 700; color: var(--primary); margin-bottom: 8px; padding-bottom: 5px; border-bottom: 1px solid var(--border); }
.muni-arch-group .muni-batch { margin-bottom: 8px; }

/* Municipality pages / nav */
.muni-page { flex: 1; overflow-y: auto; padding: 16px 16px 90px; }
/* מסך המפה: שומר מקום לסרגל התחתון כדי שהמפה לא תכסה אותו */
#muni-map-page { position: relative; display: flex; flex-direction: column; padding: 0 0 calc(60px + env(safe-area-inset-bottom)); overflow: hidden; }
#muni-map-page.hidden { display: none; }
/* ===== קפיצה לשלט מהמפה =====
   השורה מרחפת בראש המפה. הניסיון הראשון מיקם אותה מול `#muni-map-page`,
   שכולל גם את הכותרת — ואז היא ישבה עליה והקצה שלה יצא מהמסך. העוטף
   `.muni-map-wrap` מכיל את המפה בלבד, וזה מה שהופך את המדידה לנכונה.

   `pointer-events: none` על העוטף המרחף: בלעדיו המלבן השקוף שסביב
   השורה בולע גרירה של המפה מתחתיו, והמפה מפסיקה לזוז ברוב השטח העליון. */
.muni-map-wrap { position: relative; flex: 1; min-height: 260px; display: flex; }
/* ממורכזת בראש המפה, עם 56px פנויים בכל צד. הצד השמאלי הוא כפתורי
   הזום (34 ועוד שוליים) — קודם השורה נמתחה על כל הרוחב וישבה עליהם,
   כלומר אי אפשר היה לזום בלי לסגור אותה. אותו מרווח חוזר בימין כי
   שורה ממורכזת עם שוליים שונים נראית סתם לא מיושרת.

   `inset-inline` ולא `left/right`: בעמוד RTL הכיווניות הלוגית מתהפכת
   מול הפיזית, וזה מה שהוציא אותה לצד ההפוך בניסיון קודם. עם שני הקצוות
   שווים ו-`margin-inline: auto` השאלה הזו לא קיימת בכלל. */
.muni-map-search {
  position: absolute; top: 10px; z-index: 1000;
  inset-inline: 56px; max-width: 300px; margin-inline: auto;
  pointer-events: none;
}
.muni-map-search > * { pointer-events: auto; }
.muni-map-search .search-bar { margin-bottom: 0; padding-inline-end: 6px; }
.muni-map-search .search-bar i { font-size: 14px; }
.muni-map-search .search-bar input { min-width: 0; }
.msr-x {
  border: none; background: none; padding: 6px 8px; cursor: pointer;
  color: var(--text-muted); font-size: 14px; line-height: 1;
}
.msr-x:active { color: var(--text); }

.msr-list {
  position: absolute; top: 100%; inset-inline: 0; margin-top: 6px;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow); overflow: hidden;
}
.msr-row {
  display: flex; align-items: center; gap: 9px; width: 100%;
  min-height: 46px; padding: 8px 12px; border: none; background: none;
  border-bottom: 1px solid var(--line); font-family: var(--font);
  text-align: start; cursor: pointer;
  transition: background .15s;
}
.msr-row:last-child { border-bottom: none; }
.msr-row:active { background: var(--soft); }
/* שלט בלי מיקום מוצג ולא מוסתר — הוא קיים, פשוט אי אפשר לעוף אליו.
   להעלים אותו היה נראה כאילו החיפוש לא מצא. */
.msr-row.off { opacity: .6; }
.msr-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.msr-num { font-size: 14px; font-weight: 800; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.msr-addr { flex: 1; min-width: 0; font-size: 12px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msr-go { color: var(--primary); font-size: 12px; flex-shrink: 0; }
.msr-off { font-size: 10.5px; color: var(--text-muted); background: var(--soft);
  border-radius: 20px; padding: 2px 8px; flex-shrink: 0; }
.msr-none { padding: 14px; font-size: 13px; color: var(--text-muted); text-align: center; }

.muni-map { flex: 1; min-height: 0; }
/* הסרגל של העירייה מעל שכבות ה-Leaflet */
#screen-municipality .bottom-nav { z-index: 1001; }
.muni-map-legend { display: flex; gap: 16px; justify-content: center; padding: 12px; font-size: 12px; color: var(--text-muted); background: var(--card-bg); border-bottom: 1px solid var(--border); }
.muni-map-legend span { display: flex; align-items: center; gap: 6px; }
.muni-map-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
/* המספר נושא את המשקל, התווית מסבירה אותו. */
.muni-map-legend b { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
/* הצבעים מגיעים מ-MAP_COLORS דרך _renderMapLegend, לא מכללי CSS נפרדים
   שהיו מתפצלים מהמפה. */
.muni-map-legend { flex-wrap: wrap; }
/* שורה משלה, כי זה לא מפתח צבע אלא ההסבר למה הסכום כאן קטן מהטבעת בבית. */
.muni-map-legend .mp-legend-off { flex-basis: 100%; justify-content: center; font-size: 11.5px; opacity: .85; }

/* עוטף ולא נדחס. שלושת השבבים הקבועים הם flex:1 בלי nowrap, ולכן כשנוסף
   השבב הזמני — flex:0 0 auto, לא מוותר על רוחב — הם נשברו לשתי שורות בתוך
   עצמם, וב-360pt גלשו החוצה מעמוד שגולל אנכית בלבד. */
.muni-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
/* `nowrap` הוא חצי מהתיקון: בלעדיו המינימום האוטומטי של השבב הוא רוחב
   המילה הארוכה, כלומר "תקלות פתוחות" נשבר לשתי שורות בתוך העיגול במקום
   לדחוף את השבב הבא לשורה חדשה. */
.muni-filters button { flex: 1; white-space: nowrap; border: 1px solid var(--border); background: var(--card-bg); color: var(--text-muted); font-family: var(--font); font-weight: 600; font-size: 12.5px; padding: 9px; border-radius: 20px; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.12s var(--ease); }
.muni-filters button.on { background: var(--primary); color: #fff; border-color: var(--primary); }
/* השבב הזמני של סינון-לפי-מצב, מלחיצה על פלח בטבעת. הוא לא אחד מארבעת
   הקבועים ולכן הוא לא נלחם איתם על הרוחב: תופס בדיוק את הטקסט שלו,
   ונושא ✕ כי הוא הדבר היחיד בשורה שאפשר לבטל. */
.muni-filters button.muni-filter-temp { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding-inline: 12px; }
.muni-filter-temp i { font-size: 11px; opacity: .85; }

/* כאן ישבו `.muni-sign-card` ומשפחתה — כרטיס שנשא את כל תיק השלט ויצא
   185 עד 330 פיקסל. הרשימה עברה למבנה של הקבלן (`.p-scard`), והפירוט
   לדף שלט משלו. `.muni-status.*` ירדה איתם: היא הייתה טבלת צבעים
   מקבילה ל-`.st-*`, ושתי טבלאות לאותם שישה מצבים מתפצלות ביום שמישהו
   נוגע באחת מהן. */

/* מונה תווים. `maxlength` חוסם בשקט — הפקח מקליד, הטלפון מפסיק להגיב,
   ואין לו שום דרך לדעת למה. */
.note-count.near { color: #d97706; font-weight: 700; }

/* ===== ACTIVITY CALENDAR =====
   כאן ישב לוח חודשי מלא: 42 תאים, שלוש נקודות סוג ומונה בכל תא, ניווט
   חודשים. הוא תפס את רוב המסך כדי לענות על שאלה אחת — מה קרה ביום
   מסוים — ורוב התאים בו היו ריקים.

   היומן עבר למבנה של דוח המצב אצל העירייה: `.muni-days` עם שבעה ימים
   וחצים, ומתחת `.mrt-strip` ו-`.mrt-list`. אין כאן CSS משלו, וזו
   הנקודה — שני מסכים שעושים את אותו דבר בשתי מערכות עיצוב מתפצלים
   ביום שמישהו נוגע באחת מהן. */
.activity-calendar { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 12px 14px; box-shadow: var(--shadow); }
.activity-day-detail { margin-top: 12px; }

/* ===== DATE-GROUPED LISTS (history + activity) ===== */
.history-day { margin-bottom: 14px; }
.history-day:last-child { margin-bottom: 0; }
.history-day-label {
  font-size: 12px; font-weight: 700; color: var(--primary);
  display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
  padding-bottom: 5px; border-bottom: 1px solid var(--border);
}
.history-day-label i { font-size: 11px; }

/* ===== IMPORT WIZARD =====
   ממורכז במסך (שאר המודלים הם bottom-sheet). אותה שפה של האפליקציה:
   בלי מסגרות, צל רך, טיפוגרפיה 800, ומעט מאוד אלמנטים על המסך בכל רגע. */
#modal-import-wizard { align-items: center; justify-content: center; }
.import-wizard-card {
  width: 100%; max-width: 520px; margin: 16px;
  border-radius: var(--radius);
  animation: fadeInScale 0.22s var(--ease);
}
@keyframes fadeInScale { from { opacity: 0; transform: scale(0.97) translateY(6px); } to { opacity: 1; transform: none; } }

.iw-header { flex-shrink: 0; padding: 18px 20px 0; }
.iw-head-row { display: flex; align-items: flex-start; gap: 12px; }
.iw-head-txt { flex: 1; min-width: 0; }
.modal-card .iw-header h3 { font-size: 19px; font-weight: 800; margin: 0; }
.iw-stage { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.iw-close {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px;
  border: none; background: var(--soft); color: var(--text-muted);
  cursor: pointer; font-size: 14px; display: grid; place-items: center;
  transition: transform 0.12s var(--ease), color 0.15s;
}
.iw-close:hover { color: var(--text); }
.iw-close:active { transform: scale(0.92); }
/* פס התקדמות דק במקום סרגל 5 שלבים */
.iw-track { height: 3px; background: var(--soft); border-radius: 3px; margin-top: 14px; overflow: hidden; }
.iw-track-bar { height: 100%; background: var(--primary); border-radius: 3px; transition: width 0.4s var(--ease); }

/* --- שלב 1: בחירת קובץ --- */

/* --- שלב 2: מה יש בקובץ --- */
.iw-lede { margin-bottom: 14px; }
.iw-lede-num { font-size: 22px; font-weight: 800; line-height: 1.25; }
.iw-lede-sub { font-size: 13px; color: var(--text-muted); margin-top: 3px; }

.iw-note {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 12.5px; line-height: 1.5; padding: 11px 13px;
  border-radius: 14px; margin: 10px 0;
  background: var(--soft); color: var(--text);
}
.iw-note i { margin-top: 2px; color: var(--text-muted); flex-shrink: 0; }
.iw-note.warn { background: rgba(245,158,11,0.14); color: #8a5a08; }
.iw-note.warn i { color: #c9871a; }
.iw-hint-line { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 10px 2px; }

.iw-fields { display: flex; gap: 10px; margin: 16px 0 4px; }
.iw-field { flex: 1; min-width: 0; display: block; }
.iw-field-lbl { display: block; font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 6px; }
.iw-field input {
  width: 100%; border: none; background: var(--soft); color: var(--text);
  border-radius: 14px; padding: 12px 13px; font-size: 16px; font-family: var(--font);
  outline: none; transition: box-shadow 0.15s;
}
.iw-field input:focus-visible { box-shadow: 0 0 0 2px var(--primary); }

/* רשימת השלטים מקופלת — אף אחד לא סורק 40 שורות במודל */
.iw-peek { margin-top: 16px; }
.iw-peek > summary {
  list-style: none; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--primary-d);
  padding: 4px 2px; display: flex; align-items: center; gap: 7px;
  min-height: 40px;   /* יעד מגע — טקסט של 13px לבד יצא 21px */
}
.iw-peek > summary::-webkit-details-marker { display: none; }
.iw-peek > summary::before { content: '\f107'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 12px; transition: transform 0.2s var(--ease); }
.iw-peek[open] > summary::before { transform: rotate(180deg); }
.iw-preview-list {
  margin-top: 8px; border-radius: 14px; overflow: hidden;
  background: var(--soft2); max-height: 260px; overflow-y: auto;
}
.iw-preview-row {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; font-size: 12.5px;
  border-bottom: 1px solid var(--line);
}
.iw-preview-row:last-child { border-bottom: none; }
.iw-pr-num { font-weight: 800; min-width: 44px; }
.iw-pr-sides { display: flex; gap: 3px; }
.iw-pr-addr { flex: 1; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iw-pr-tag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; background: var(--primary-soft); color: var(--primary-d); }
/* שלט שהעירייה כבר דיווחה עליו משהו פתוח. אייקון בלבד — השורה צרה. */
.iw-pr-city { background: rgba(99,102,241,.14); color: #4338ca; }
/* כפתור תיקון בתוך התראה — התראה שאומרת מה חסר בלי דרך לתקן היא שורה מתה */
.iw-note-fix {
  margin-inline-start: auto; flex-shrink: 0; min-height: 32px; padding: 0 12px;
  border: 0; border-radius: 10px; cursor: pointer;
  background: var(--card-bg); color: var(--text); box-shadow: var(--shadow-sm);
  font-family: var(--font); font-weight: 800; font-size: 11.5px;
}
.iw-note-fix:active { transform: scale(0.95); }
.iw-more { text-align: center; font-size: 12px; color: var(--text-muted); padding: 10px; }

/* --- מסכי המתנה (איתור / כתיבה) --- */
.iw-wait { text-align: center; padding: 26px 8px; }
.iw-wait-ic {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 18px;
  display: grid; place-items: center; font-size: 22px;
  background: var(--primary-soft); color: var(--primary-d);
}
.iw-wait-title { font-weight: 800; font-size: 16px; margin-bottom: 16px; }
.iw-progress { height: 8px; background: var(--soft); border-radius: 5px; overflow: hidden; }
.iw-progress-bar { height: 100%; background: var(--primary); border-radius: 5px; transition: width 0.35s var(--ease); }
.iw-wait-count { font-size: 14px; font-weight: 800; margin-top: 10px; font-variant-numeric: tabular-nums; }
.iw-wait-line { font-size: 12px; color: var(--text-muted); margin-top: 3px; min-height: 18px; }
.iw-wait-note { font-size: 12px; color: var(--text-muted); margin-top: 14px; }

/* --- מסכי סיום --- */
.iw-done { text-align: center; padding: 22px 4px 8px; }
.iw-done-ic {
  width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; font-size: 24px;
  background: var(--primary); color: #fff;
  box-shadow: 0 12px 26px -12px rgba(18,196,139,0.8);
  animation: doneIn 0.4s var(--ease) both;
}
@keyframes doneIn { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }
.iw-done-title { font-size: 19px; font-weight: 800; line-height: 1.3; }
.iw-done-sub { font-size: 13px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.iw-done .iw-note { text-align: start; margin-top: 16px; }

/* --- שלב 4: חלוקה --- */
.iw-map { height: 220px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.iw-map-pin div {
  width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.iw-worker-list { display: flex; flex-direction: column; gap: 8px; }
.iw-worker-group { border-radius: 16px; padding: 12px 13px; background: var(--soft2); }
.iw-worker-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.iw-worker-dot { width: 11px; height: 11px; border-radius: 4px; flex-shrink: 0; }
.iw-worker-name { font-weight: 800; font-size: 14px; }
.iw-worker-meta { font-size: 11.5px; color: var(--text-muted); margin-inline-start: auto; }
.iw-worker-signs { display: flex; flex-wrap: wrap; gap: 6px; }
/* הצ'יפ עצמו הוא הפקד — ה-select שקוף ופרוס עליו, בלי חץ ובלי סמלים נוספים */
.iw-sign-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  background: var(--card-bg); border-radius: 10px; box-shadow: var(--shadow-sm);
  padding-block: 5px; padding-inline-start: 5px; padding-inline-end: 10px;
  font-size: 12.5px; font-weight: 700;
  transition: transform 0.12s var(--ease);
}
.iw-sign-chip:active { transform: scale(0.95); }
.iw-chip-order {
  color: #fff; border-radius: 7px; width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800; flex-shrink: 0;
}
.iw-reassign {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; border: none; cursor: pointer; appearance: none;
}
.iw-empty-sm { font-size: 12px; color: var(--text-muted); }

/* --- אישור אינליין בפוטר --- */
.iw-confirm { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.iw-confirm-msg {
  font-size: 13px; text-align: center; line-height: 1.5;
  background: var(--primary-soft); color: var(--primary-d);
  padding: 11px; border-radius: 12px; font-weight: 700;
}
.iw-confirm-msg.warn { background: rgba(245,158,11,0.14); color: #8a5a08; }
.iw-confirm-btns { display: flex; gap: 10px; }
.iw-confirm-btns .btn { flex: 1; }

body.dark-mode .iw-note.warn { background: rgba(245,158,11,0.16); color: #fcd34d; }
body.dark-mode .iw-confirm-msg.warn { background: rgba(245,158,11,0.16); color: #fcd34d; }
body.dark-mode .iw-worker-group, body.dark-mode .iw-preview-list { background: var(--soft2); }

/* ==========================================================================
   מסך העובד — אותה שפה של האפליקציה, מותאם לשימוש ביד אחת בשמש
   ========================================================================== */
/* כרטיס המשימה של העובד — אותה שפה של הכרטיס אצל המנהל, אבל פרוס תמיד.
   בלי חץ ובלי קיפול: כתובת, תאריך וניווט נראים במבט אחד. */
.w-tcard .task-meta { padding-top: 8px; }
.w-tcard .task-card-footer { margin-top: 4px; padding-top: 10px; }
/* שורת הפרטים האחרונה מציירת קו תחתון, ושורת הניווט קו עליון משלה —
   שני קווים במרחק 4 פיקסל. הקו של שורת הפרטים מיותר. */
.w-tcard .task-meta-item:has(+ .task-card-footer) { border-bottom: none; }
/* תג הדחיפות יושב בכותרת מימין לתג הסטטוס. שניהם לא נדחסים כשהכותרת ארוכה. */
.w-tcard.status-done { opacity: 0.72; }

/* מרחק + ניווט — שורת פעולה, לא תגיות קטנות */
.task-card-footer {
  display: flex; align-items: center; gap: 10px;
  margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line);
}
.w-dist {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--text-muted);
}
.btn-waze {
  margin-inline-start: auto;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--primary-soft); color: var(--primary-d);
  border: none; border-radius: 12px;
  /* 44px גובה מינימלי — נלחץ ביד אחת מתוך רכב */
  padding: 11px 16px; min-height: 44px; font-size: 13.5px; font-weight: 800;
  cursor: pointer; font-family: var(--font); flex-shrink: 0;
  transition: transform 0.12s var(--ease);
}
.btn-waze:active { transform: scale(0.96); }

.w-today { margin-bottom: 14px; }
/* גרדיאנט משלו — #ringg יושב ב-SVG של המנהל שמוסתר, ולכן לא נצבע */
.w-today .ring-p { stroke: url(#wringg); }

.tasks-section-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 22px 2px 12px;
  color: var(--text-muted); font-size: 12.5px; font-weight: 800;
}
.tasks-section-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.tasks-section-divider::before { content: none; }
.tasks-section-divider:first-child { margin-top: 4px; }
/* "עכשיו" — הכותרת של מה שבעבודה נושאת את המשקל של המסך */
.tasks-section-divider.now { color: var(--primary-d); }
.tasks-section-divider.now::after { background: var(--primary-soft); height: 2px; }

.task-card.status-done { opacity: 0.72; }
/* המשימה שבעבודה היא הדבר היחיד שחשוב עכשיו — היא מקבלת נפח */
.task-card.status-active { box-shadow: 0 18px 38px -22px rgba(18,196,139,0.75); }
.task-card.status-active .task-title { font-size: 16px; font-weight: 800; }
.task-card.status-active .btn-waze {
  background: linear-gradient(120deg, var(--primary), #20D6A2); color: #fff;
  padding: 11px 20px; font-size: 14px;
  box-shadow: 0 12px 24px -14px rgba(18,196,139,0.85);
}
.w-near {
  font-weight: 800; font-size: 10.5px; color: var(--primary-d);
  background: var(--primary-soft); border-radius: 20px; padding: 2px 8px;
  margin-inline-start: 7px;
}

/* סוף היום */
.w-eod { text-align: center; padding: 30px 12px 8px; }
.w-eod-ic {
  width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; font-size: 26px;
  background: var(--primary); color: #fff;
  box-shadow: 0 14px 30px -14px rgba(18,196,139,0.85);
  animation: doneIn 0.45s var(--ease) both;
}
.w-eod-title { font-size: 22px; font-weight: 800; }
.w-eod-sub { font-size: 13.5px; color: var(--text-muted); margin-top: 5px; }

/* ===== כרטיס השלט במסך המשימה של העובד ===== */
.w-sign {
  background: var(--card-bg); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 14px 15px; margin-bottom: 12px;
}
/* ראש הכרטיס: איזה שלט, איפה, מתי, ואיך מגיעים. `align-items: flex-start`
   ולא `center` — שלוש שורות טקסט מול כפתור אחד, ומרכוז היה מוריד את
   הכפתור לאמצע במקום ליישר אותו עם השורה הראשונה. */
/* הכותרת היא עמודה אחת ברוחב מלא. הכפתור היה עמודה שנייה שלקחה 88
   מתוך 310 פיקסלים, ומדדתי את שלוש התוצאות: שבב "באיחור" שנדחף לקצה
   של 222 ולא של הכרטיס, 62 פיקסל חלל מת מתחתיו, ותיאור שנשבר לשתי
   שורות רק בגלל הצרות. */
.w-sign-head {
  display: block;
  margin-bottom: 13px; padding-bottom: 13px; border-bottom: 1px solid var(--line);
}
/* הניווט ברוחב מלא, מתחת לזהות. זה גם סדר הקריאה: מה, איפה, איך
   מגיעים — ואז נוסעים. ויעד מגע גדול בהרבה מ-76 פיקסל, על מסך שנוגעים
   בו ביד אחת בשמש.

   **ומשני ולא ראשי.** ברוחב מלא הוא קיבל את אותו משקל של "התחל משימה"
   שיושב מתחתיו — שני כפתורים ירוקים מלאים שצועקים "אני הפעולה" באותו
   מסך. הפעולה האמיתית היא להתחיל; הניווט הוא מה שעושים לפניה. אותו
   ירוק, אותו יעד מגע, בלי המילוי והצל. */
.w-sign-head + .w-nav-btn {
  flex-direction: row; width: 100%; min-height: 50px;
  gap: 8px; font-size: 14px; margin-bottom: 13px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  box-shadow: none;
  border: 1.5px solid rgba(18,196,139,.35);
}
.w-sign-head + .w-nav-btn i { font-size: 16px; }
body.dark-mode .w-sign-head + .w-nav-btn {
  background: rgba(18,196,139,.14); color: #6ee7b7;
  border-color: rgba(18,196,139,.3);
}
.w-sign-meta { flex: 1; min-width: 0; }
/* שורת הזהות. `nowrap` ולא `wrap`: התגים נדחפים לקצה ב-`margin-inline-
   start:auto`, ובגלישה הם היו יורדים לשורה משלהם ומאבדים בדיוק את
   ההצמדה הזו. מספר השלט מתכווץ ראשון כי הוא הדבר היחיד שאפשר לקצר. */
.w-sign-num {
  font-size: 16px; font-weight: 800;
  display: flex; align-items: center; gap: 7px;
  min-width: 0;
}
.w-sign-n { white-space: nowrap; }
/* התגים אל הקצה הנגדי. `auto` ולא `space-between` — בלי תגים המספר
   והסוג נשארים צמודים זה לזה במקום להתפזר על כל הרוחב. */
.w-sign-urg {
  margin-inline-start: auto;
  display: flex; align-items: center; gap: 5px; flex: 0 0 auto;
}
/* הכתובת חולקת את המבנה של שורות ההערה — אייקון בעמודה קבועה ואז
   טקסט. בלי האייקון היא הייתה השורה היחידה בלי אחד, ושלוש השורות
   התחילו בשלושה מקומות שונים. אותו אייקון בדיוק שמסמן כתובת אצל
   הקבלן ואצל העירייה. */
.w-sign-addr { margin-top: 5px; }
/* היא עדיין מובילה: האייקון שלה במלוא העוצמה, של ההערות ב-.75. */
.w-sign-addr i { opacity: 1; }

/* ===== מה שהעירייה יודעת על המקום =====
   ממשיך את הכתובת ולכן באותה טיפוגרפיה — אותו גודל, אותו צבע. הוא
   ישב בקופסה נפרדת עם מסגרת, וזה היה גבול שהפריד בין הכתובת לבין
   ההסבר איך להגיע אליה.
   האייקון בעמודה קבועה כדי ששתי השורות יתחילו באותו מקום גם כשהאחת
   נשברת לשתי שורות. */
.w-sign-note {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 12.5px; color: var(--text-muted); line-height: 1.45;
  margin-top: 4px;
}
.w-sign-note i {
  flex: 0 0 13px; text-align: center; margin-top: 3px;
  font-size: 11px; opacity: .75;
}
.w-sign-note span { min-width: 0; white-space: pre-wrap; }
/* שורת המועד: מה שהיה `.w-detail-when` בכרטיס שנמחק. תגי הדחיפות
   והמועד יושבים בתוכה ולכן היא נמדדת לפי הגובה שלהם. */
.w-sign-when {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  font-size: 12.5px; color: var(--text-muted); margin-top: 6px;
}

.w-side-block { background: var(--soft2); border-radius: 16px; padding: 12px 13px; }
.w-side-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; }
.w-side-mine {
  margin-inline-start: auto; font-size: 10.5px; font-weight: 800;
  background: var(--primary-soft); color: var(--primary-d);
  border-radius: 20px; padding: 2px 9px;
}
.w-brief-row {
  display: flex; align-items: center; gap: 9px;
  font-size: 13.5px; line-height: 1.5; padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.w-brief-row:last-child { border-bottom: none; }
.w-brief-row i { color: var(--text-muted); flex-shrink: 0; width: 15px; text-align: center; }
.w-brief-row .k { color: var(--text-muted); }
.w-brief-row .v { margin-inline-start: auto; font-weight: 700; }
.w-brief-row.bad .v { color: #e5484d; }
.w-brief-row.bad i { color: #e5484d; }

.w-defects { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.w-defect {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; font-weight: 700; line-height: 1.45;
  color: #e5484d; background: rgba(255,107,107,0.12);
  border-radius: 10px; padding: 8px 10px;
}
.w-side-notes {
  margin-top: 10px; font-size: 13px; line-height: 1.5;
  color: var(--text-muted); background: var(--soft);
  border-radius: 10px; padding: 8px 10px;
}

.w-other {
  display: flex; align-items: center; gap: 9px;
  margin-top: 10px; padding: 10px 12px;
  background: var(--soft); border-radius: 12px;
  font-size: 13px; color: var(--text-muted);
}
.w-other-state { margin-inline-start: auto; font-weight: 800; color: var(--primary-d); }
.w-other.bad .w-other-state { color: #c9871a; }

/* "עוד על השלט הזה" — המשימות הפתוחות של שאר הפאות.
   קריאה בלבד ולא כפתורים: משימה שמשובצת לעובד אחר היא מידע, לא פעולה
   שהוא יכול לקחת. לכן אין כאן `cursor: pointer` ואין מצב :active. */
.w-sib { margin-top: 12px; background: var(--soft); border-radius: 12px; padding: 4px 12px 8px; }
.w-sib-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 800; color: var(--text-muted);
  padding: 9px 0 5px;
}
.w-sib-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0; border-top: 1px solid var(--line);
}
/* "כל השלט" הוא מצב ולא אות, ולכן הוא לא מתחזה לתג פאה — אותה הבחנה
   שנעשתה אצל העירייה ובאשף. */
.w-sib-nos { width: auto; padding: 0 8px; font-size: 10.5px; border-radius: 20px; }
.w-sib-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.w-sib-t { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-sib-m { font-size: 11.5px; color: var(--text-muted); }
body.dark-mode .w-sib { background: var(--soft2); }

.w-hist { margin-top: 12px; }
.w-hist > summary {
  list-style: none; cursor: pointer;
  font-size: 12.5px; font-weight: 800; color: var(--primary-d);
  display: flex; align-items: center; gap: 7px; padding: 4px 2px;
  min-height: 40px;
}
.w-hist > summary::-webkit-details-marker { display: none; }
.w-hist > summary::before { content: '\f107'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 12px; transition: transform 0.2s var(--ease); }
.w-hist[open] > summary::before { transform: rotate(180deg); }
.w-hist-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; padding: 8px 2px;
  border-bottom: 1px solid var(--line);
}
.w-hist-row:last-child { border-bottom: none; }
.w-hist-when { margin-inline-start: auto; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }

body.dark-mode .w-side-block { background: var(--soft2); }

/* ===== סידור ידני של סדר הנסיעה ===== */
.w-reorder-btn {
  margin-inline-start: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: var(--soft); color: var(--primary-d);
  font-family: var(--font); font-weight: 800; font-size: 12px;
  padding: 7px 14px; min-height: 44px; border-radius: 22px; cursor: pointer;
  transition: transform 0.12s var(--ease), background 0.15s;
}
.w-reorder-btn:active { transform: scale(0.94); }
.tasks-section-divider:has(.w-reorder-btn)::after { display: none; }
.w-reorder-hint {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--primary-d); font-weight: 700;
  background: var(--primary-soft); border-radius: 12px;
  padding: 10px 12px; margin: 0 0 10px;
}

.w-reorder-list { display: flex; flex-direction: column; gap: 8px; }
.w-rrow {
  display: flex; align-items: center; gap: 11px;
  background: var(--card-bg); border-radius: 14px;
  box-shadow: var(--shadow-sm); padding: 12px 13px;
  font-size: 14px;
  user-select: none; -webkit-user-select: none;
  /* ה-transform הזה הוא הנסיעה של השורות שמפנות מקום (FLIP) */
  transition: box-shadow 0.15s, transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.w-rrow.dragging {
  z-index: 5; position: relative;
  box-shadow: 0 20px 40px -18px rgba(16,90,66,0.55);
  transition: box-shadow 0.15s;     /* בזמן גרירה בלי השהיה על ה-transform */
}
/* ידית הגרירה — רק היא תופסת את המגע, כדי שהרשימה תישאר ניתנת לגלילה */
.w-grip {
  margin-inline-start: auto; flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 12px;
  border: none; padding: 0; cursor: grab;
  background: var(--primary-soft); color: var(--primary-d); font-size: 17px;
  display: grid; place-items: center;
  touch-action: none;               /* רק כאן — אחרת אי אפשר לגלול את הרשימה */
  transition: background 0.15s, transform 0.12s var(--ease);
}
.w-grip:active { transform: scale(0.92); }
.w-rrow.dragging .w-grip { background: var(--primary); color: #fff; cursor: grabbing; }
.w-rrow-num {
  font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--soft); border-radius: 8px; padding: 3px 9px; flex-shrink: 0;
}
.w-rrow-title { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.w-reset-order {
  margin-top: 12px; width: 100%; border: none; cursor: pointer;
  background: var(--soft); color: var(--text-muted);
  font-family: var(--font); font-weight: 700; font-size: 13px;
  padding: 12px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}

body.dark-mode .w-rrow { background: var(--soft2); }

/* ===== חותמת "בוצע" — הרגע המאושר של מסך העובד ===== */
.w-stamp {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center; cursor: pointer;
  background: rgba(14, 26, 21, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: stampBgIn 0.22s ease-out both;
}
.w-stamp.out { animation: stampBgOut 0.18s ease-in both; }
.w-stamp-mark {
  width: 108px; height: 108px; border-radius: 50%;
  display: grid; place-items: center; font-size: 46px; color: #fff;
  background: var(--primary);
  box-shadow: 0 0 0 0 rgba(18,196,139,0.55), 0 20px 50px -18px rgba(0,0,0,0.6);
  animation: stampIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both,
             stampRipple 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both;
}
.w-stamp-mark i { animation: stampTick 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both; }
.w-stamp-title { color: #fff; font-size: 22px; font-weight: 800; margin-top: 20px; animation: stampText 0.45s cubic-bezier(0.16,1,0.3,1) 0.2s both; }
.w-stamp-sub { color: rgba(255,255,255,0.8); font-size: 14px; animation: stampText 0.45s cubic-bezier(0.16,1,0.3,1) 0.28s both; }

@keyframes stampBgIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes stampBgOut { from { opacity: 1; } to { opacity: 0; } }
/* החותמת "נוחתת" — נכנסת גדולה ומתייצבת, בלי קפיצה אלסטית */
@keyframes stampIn { from { opacity: 0; transform: scale(1.6); } to { opacity: 1; transform: scale(1); } }
@keyframes stampRipple { from { box-shadow: 0 0 0 0 rgba(18,196,139,0.5), 0 20px 50px -18px rgba(0,0,0,0.6); }
                         to   { box-shadow: 0 0 0 34px rgba(18,196,139,0), 0 20px 50px -18px rgba(0,0,0,0.6); } }
@keyframes stampTick { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes stampText { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .manager-page:not(.hidden), .worker-page:not(.hidden), .muni-page:not(.hidden) { animation: none; }
  .w-stamp, .w-stamp-mark, .w-stamp-mark i, .w-stamp-title, .w-stamp-sub { animation: none !important; }
  .w-stamp { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ==========================================================================
   תגובה למגע — כל דבר שאפשר ללחוץ עליו מגיב ברגע הנגיעה, לא בשחרור.
   בלי זה הממשק מרגיש מת גם אם הכל עובד. חל על שלושת החשבונות.
   ========================================================================== */
.crew-worker, .att-item, .inbox-row, .inbox-seg-btn, .filter-tab,
.muni-batch, .muni-archive-link, .muni-period button,
.wo-archive summary, .set-item, .settings-item, .dash-mapcard,
.today-card, .w-sign, .iw-peek > summary, .w-hist > summary,
.sign-history-item, .empty-mini {
  transition: transform 0.1s cubic-bezier(0.16, 1, 0.3, 1), background 0.12s, opacity 0.12s;
}
.crew-worker:active, .att-item:active, .inbox-row:active,
.muni-batch:active, .sign-history-item:active,
.today-card:active, .dash-mapcard:active {
  transform: scale(0.985);
}
.inbox-seg-btn:active, .filter-tab:active, .muni-period button:active,
.muni-archive-link:active, .wo-archive summary:active,
.iw-peek > summary:active, .w-hist > summary:active { transform: scale(0.95); }
.settings-item:active, .set-item:active { background: var(--soft); }

/* הניווט התחתון הוא הדבר הכי נלחץ באפליקציה ולא נתן שום משוב */
.nav-item { transition: color 0.15s, transform 0.1s cubic-bezier(0.16, 1, 0.3, 1); }
.nav-item:active { transform: scale(0.9); }
.nav-item i { transition: background 0.18s cubic-bezier(0.16, 1, 0.3, 1); }

/* ==========================================================================
   חומר — הניווט התחתון צף מעל התוכן במקום לחתוך אותו
   ========================================================================== */
.bottom-nav {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
}
body.dark-mode .bottom-nav {
  background: rgba(22, 36, 30, 0.72);
  border-top-color: rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   טיפוגרפיה — מרווח אותיות תלוי גודל. טקסט גדול מתרחב ונראה מפוזר,
   אז מהדקים אותו. טקסט גוף נשאר כמו שהוא.
   ========================================================================== */
.ptitle-h, .dg-hi, .w-eod-title, .w-stamp-title, .iw-done-title,
.iw-lede-num, .worker-detail-name, .splash-logo h1,
.login-logo h1, .ring-pct, .muni-kpi-n {
  letter-spacing: -0.02em;
}
.modal-card h3, .task-detail-hero-title, .w-sign-num { letter-spacing: -0.01em; }

/* ==========================================================================
   סולם הטיפוגרפיה של הפרוטוטייפ — כותרת דף 21, כותרת סקשן 15,
   כותרת בתוך כרטיס 13 מודגשת ומעומעמת, גוף 13.5, מטא 12.
   ========================================================================== */
.modal-card h3 { font-size: 19px; }
.info-card h4 { font-size: 13px; color: var(--text-muted); margin-bottom: 11px; }
.detail-section-title { font-size: 13px; }
.form-group label { font-size: 12px; margin-bottom: 7px; }
.detail-row, .info-item { font-size: 13.5px; }
.empty-state p { font-size: 13.5px; line-height: 1.6; }
.empty-state i { font-size: 34px; }
.settings-item-sub, .muni-batch-meta { font-size: 12px; }
.btn { font-size: 14px; }
.btn-sm { font-size: 12.5px; }

/* שתי שורות בברכה: השם, ומתחתיו הברכה והתאריך */
.dg-hi { font-size: 22px; line-height: 1.25; }
.dg-date { font-size: 13px; margin-top: 3px; }

/* ==========================================================================
   העדפות נגישות — שקיפות וניגודיות, לא רק תנועה
   ========================================================================== */
@media (prefers-reduced-transparency: reduce) {
  .bottom-nav { background: var(--card-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .w-stamp { background: rgba(14, 26, 21, 0.92); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .bottom-nav { background: var(--card-bg); backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 2px solid var(--text); }
  .task-card, .p-scard, .w-rrow, .dash-card, .settings-section { border: 1px solid var(--text-muted); }
  .p-stag, .task-status, .muni-badge { outline: 1px solid currentColor; }
}

/* ==========================================================================
   כותרות — משקל אחיד בכל שלושת החשבונות (מנהל, עירייה, עובד).
   800 לכותרת שמתחילה משהו: מסך, כרטיס, סקשן, מודל. טקסט גוף ומטא לא נוגעים.
   ========================================================================== */

/* כותרות מסך ומודל */
.splash-logo h1,
.login-logo h1,
.topbar h2,
.modal-card h3,
.worker-detail-name,
.task-detail-hero-title { font-weight: 800; }

/* כותרות סקשן בתוך כרטיס */
.info-card h4,
.detail-section-title,
.signature-header,
.muni-arch-date { font-weight: 800; }

/* כותרת של כרטיס — השם או המספר שמזהים אותו */
.task-title,
.worker-name,
.city-name,
.muni-batch-date,

/* מדדים גדולים */
.muni-kpi-n,
.muni-completion-pct { font-weight: 800; }

/* תוויות טופס — לא כותרת, אבל צריכות להיקרא בשמש */
.form-group label,
.muni-completion-top { font-weight: 700; }

/* שורת היסטוריה היא פריט ברשימה, לא כותרת — נשארת 700 */
.sign-history-title { font-weight: 700; }

/* --- פרטי משימה --- */
/* הפעולה הראשונה בשטח: לנווט. יעד מגע גדול, קריא בשמש */
.w-nav-btn {
  flex-shrink: 0; display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  min-width: 76px; padding: 11px 12px; border: none; border-radius: 16px;
  background: linear-gradient(120deg, var(--primary), #20D6A2); color: #fff;
  font-family: var(--font); font-weight: 800; font-size: 12px; cursor: pointer;
  box-shadow: 0 12px 24px -14px rgba(18,196,139,0.8);
  transition: transform 0.12s var(--ease);
}
.w-nav-btn i { font-size: 19px; }
.w-nav-btn:active { transform: scale(0.95); }

.w-hero {
  width: 100%; max-height: 190px; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  display: block; margin-bottom: 12px; cursor: pointer;
}

body.dark-mode .btn-waze { background: var(--primary-soft); color: #4ade9f; }

/* בדארק הצללים לא נראים — הצ'יפ צריך משטח בהיר יותר כדי להיפרד מהקבוצה */
body.dark-mode .iw-sign-chip { background: #21332B; }
body.dark-mode .iw-close { background: var(--soft); }

/* ===== NEW MANAGER DASHBOARD (prototype look) ===== */
/* בלוק הברכה — אותם מידות בדיוק כמו במוקאפ (.greet / .greet-hi / .greet-date) */
.dash-greet { display: flex; align-items: center; gap: 12px; margin: 6px 2px 16px; }
.dg-txt { flex: 1; min-width: 0; }
/* שם ארוך גלש מהכותרת והסיט את אייקוני ההודעות והפרופיל. החוק מתיר
   שם עד 60 תווים, וזה מספיק כדי לשבור את השורה. */
.dg-hi {
  font-weight: 800; font-size: 21px; line-height: 1.15; letter-spacing: -0.012em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dg-date { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.4; }
/* הברכה עצמה לא אמורה להיבלע באפור של התאריך */
.dg-greet { color: var(--text); font-weight: 700; }

/* קיצור דרך להגדרות בראש מסך הבית.
   שקט בכוונה — הוא לא הפעולה הראשית במסך, וגרדיאנט ירוק פה מתחרה
   בטבעת ובכרטיס של העירייה. אותה שפה של חץ החזרה וכפתור הסגירה. */

.dash-card { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px; }
.today-card { display: flex; gap: 16px; align-items: center; cursor: pointer; margin-bottom: 4px; }
.ring { position: relative; width: 118px; height: 118px; flex-shrink: 0; }
.ring svg { transform: rotate(-90deg); }
.ring-c { fill: none; stroke: var(--soft); stroke-width: 11; }
.ring-p { fill: none; stroke: url(#ringg); stroke-width: 11; stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.34,1.1,.4,1); }
.ring-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring-pct { font-size: 30px; font-weight: 800; line-height: 1; }
.ring-lbl { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.today-stats { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.tstat { display: flex; align-items: center; gap: 10px; }
/* אצל המנהל השורה היא כפתור לרשימה המסוננת. הריפוד מגדיל את שטח הנגיעה
   ומרווח שלילי מבטל אותו, כך שהכרטיס נראה בדיוק כמו קודם.
   אצל העובד השורות נשארות div — הרשימה שלו יושבת ישר מתחת ואין מה לסנן. */
button.tstat {
  width: 100%; padding: 6px 8px;
  margin-block: -6px; margin-inline: -8px 0;   /* לוגי, שיעבוד ב-RTL */
  border: none; background: transparent; border-radius: 10px;
  font-family: var(--font); text-align: start; color: inherit; cursor: pointer;
  transition: background 0.15s, transform 0.1s cubic-bezier(0.16, 1, 0.3, 1);
}
button.tstat:active { background: var(--soft); transform: scale(0.97); }
button.tstat:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* כרטיסים לחיצים שקיבלו tabindex מהמנגנון ב-app.js. בלי טבעת מיקוד
   אפשר לנווט אליהם אבל אי אפשר לדעת איפה אתה. */
[role="button"][tabindex="0"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 12px;
}
.tstat .tdot { width: 11px; height: 11px; border-radius: 4px; flex-shrink: 0; }
.tstat .n { font-weight: 800; font-size: 18px; min-width: 26px; font-variant-numeric: tabular-nums; }
.tstat .l { font-size: 13px; color: var(--text-muted); }

/* שבב הצמצום ליום מעל רשימת המשימות */
.tasks-scope { padding: 0 16px 10px; }
.scope-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 20px; border: none;
  background: var(--soft); color: var(--text);
  font-family: var(--font); font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.scope-chip:active { transform: scale(0.95); }
.scope-chip .scope-x { font-size: 12px; color: var(--text-muted); }

.crew { display: flex; flex-direction: column; gap: 10px; }
.cw-av .live { position: absolute; bottom: -1px; inset-inline-start: -1px; width: 13px; height: 13px; border-radius: 50%; border: 2.5px solid var(--card-bg); }
.cw-b .cur { font-size: 12px; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-b .cur .sn { color: var(--primary); font-weight: 700; }

.att-item { display: flex; align-items: center; gap: 12px; background: var(--card-bg); border-radius: 15px; box-shadow: var(--shadow-sm); padding: 11px 13px; margin-bottom: 9px; cursor: pointer; }
.att-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 16px; flex-shrink: 0; }
.att-body { flex: 1; min-width: 0; }
/* טקסט חופשי שפקח הקליד יושב כאן בלי מגבלת אורך. בלי חיתוך, שורה אחת
   יכולה לתפוס חמש שורות ולדחוף את שאר הרשימה מהמסך. */
.att-body b {
  font-weight: 700; font-size: 13.5px; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.att-body .s {
  font-size: 12px; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* התגים בשורת הכותרת, ליד מספר השלט. כשהמקום נגמר **הכותרת** מתקצרת
   ולא התגים — מספר שלט חתוך עדיין קריא, ותג "באיחור" חתוך הוא רעש. */
.att-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.att-head b { min-width: 0; flex: 0 1 auto; }
.att-head .mcd-side, .att-head .due-chip { flex-shrink: 0; }
/* `.mcd-side` רקעו `--card-bg` כי אצל העירייה הוא על שורה ב-`--soft2`;
   כאן הכרטיס עצמו לבן, ולבן על לבן נעלם. הצורה והמשקל זהים. */
.att-head .mcd-side { background: var(--soft); }

.att-arrow { color: var(--text-muted); font-size: 13px; }

/* ===== צבעי האייקון =====
   קודם הם הוזרקו inline מתוך ה-JS, ולכן מצב כהה לא יכול היה לגעת בהם:
   שישה ריבועי פסטל זוהרים על כרטיס כהה, וההבחנה הקריטית בין דיווח
   מהעירייה לתקלה נמחקה. */
.att-ic-city     { background: #E0E7FF; color: #4f46e5; }
.att-ic-urgent   { background: #FEE2E2; color: #ef4444; }
.att-ic-broken   { background: #FEE2E2; color: #ef4444; }
.att-ic-incident { background: #FEF3C7; color: #d97706; }
.att-ic-needs    { background: #FEF3C7; color: #d97706; }
.att-ic-nogps    { background: #E0F2FE; color: #0284c7; }
body.dark-mode .att-ic-city     { background: rgba(99,102,241,.20);  color: #a5b4fc; }
body.dark-mode .att-ic-urgent,
body.dark-mode .att-ic-broken   { background: rgba(239,68,68,.20);   color: #fca5a5; }
body.dark-mode .att-ic-incident,
body.dark-mode .att-ic-needs    { background: rgba(245,158,11,.20);  color: #fcd34d; }
body.dark-mode .att-ic-await    { background: rgba(18,196,139,.20);  color: #6ee7b7; }
body.dark-mode .att-ic-nogps    { background: rgba(2,132,199,.20);   color: #7dd3fc; }

/* פעולה ישירה מהשורה. לקחת דיווח של העירייה ולהפוך אותו למשימה זה כל
   התפקיד של הקבלן, וזה היה ארבע נגיעות וגלילה. */
.att-act {
  flex-shrink: 0; min-height: 40px; padding: 0 12px; border: 0; border-radius: 11px;
  background: var(--primary-soft); color: var(--primary-d);
  font-family: var(--font); font-weight: 800; font-size: 11.5px; cursor: pointer;
}
.att-act:active { transform: scale(0.95); }

/* מונה ליד כותרת סקשן */
.sec-n {
  font-size: 11.5px; font-weight: 800; margin-inline-start: auto;
  background: var(--soft); color: var(--text-muted);
  border-radius: 20px; padding: 2px 9px;
}
.sec-n:empty { display: none; }


.dash-mapcard { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--card-bg); }
.dash-mapcard #map { border-radius: var(--radius); }

.empty-mini { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 18px; background: var(--card-bg); border-radius: 15px; box-shadow: var(--shadow-sm); color: var(--text-muted); font-size: 13.5px; }
.empty-mini i { color: var(--text-muted); }

/* ==========================================================================
   PROTOTYPE DESIGN SYSTEM
   כל מה שמתחת מיישר את האפליקציה לפרוטוטייפ המנהל: כרטיסים בלי מסגרת עם
   צל רך, פינות 22, טיפוגרפיה 800, אנימציות rise/fade, וצבעי סטטוס אחידים.
   ========================================================================== */

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes sheen { 0%, 55% { transform: translateX(-120%); } 82%, 100% { transform: translateX(120%); } }

/* מעבר בין דפים — ניווט צריך להיקרא כתנועה, לא כהחלפה. האטה אקספוננציאלית.
   החלפת טאב היא מעבר ניטרלי (למעלה), וכניסה/יציאה ממשימה נעה על ציר אחד:
   RTL, אז "פנימה" מגיע משמאל ו"חזרה" מגיע מימין. */
@keyframes pageIn   { from { opacity: 0; transform: translateY(10px); }    to { opacity: 1; transform: none; } }
@keyframes pageFwd  { from { opacity: 0; transform: translateX(-26px); }   to { opacity: 1; transform: none; } }
@keyframes pageBack { from { opacity: 0; transform: translateX(26px); }    to { opacity: 1; transform: none; } }
/* ===== למה `forwards` ולא `both` =====
   שלוש האנימציות האלה מתחילות ב-`opacity: 0`, והן חלות על **כל דף**
   שמוצג. `both` כולל מילוי לאחור, כלומר כל עוד האנימציה לא התחילה
   בפועל הדפדפן מצייר את פריים 0 — דף שקוף לגמרי. אם המנוע מעכב אותה
   (ספארי, מקלדת שנפתחת, מסך שנכבה) המסך פשוט ריק.
   `to` הוא ממילא המצב הטבעי (opacity 1, בלי הזזה), ולכן מילוי לאחור
   לא קונה כאן כלום — ובלעדיו כישלון האנימציה משאיר את הדף גלוי.
   זה בדיוק מה שגרם ל"לא מצליח ללחוץ על המשך": השלב הבא נכנס שקוף. */
.manager-page:not(.hidden), .worker-page:not(.hidden), .muni-page:not(.hidden) {
  animation: pageIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.manager-page.page-fwd:not(.hidden), .worker-page.page-fwd:not(.hidden) {
  animation: pageFwd 0.34s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.manager-page.page-back:not(.hidden), .worker-page.page-back:not(.hidden) {
  animation: pageBack 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* פליטת סטטוס על כרטיס משימה חייבת לגבור על אנימציית הכניסה של הרשימה */
.card-list > *.status-flash-active  { animation: flashActive  1.4s ease-out; }
.card-list > *.status-flash-done    { animation: flashDone    1.4s ease-out; }
.card-list > *.status-flash-pending { animation: flashPending 1.4s ease-out; }
.card-list > *.task-new {
  animation: taskSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1),
             taskGlow    1.2s ease-out 0.35s;
}

/* טיפוגרפיה גלובלית — כל הפקדים על הפונט של הפרוטוטייפ */
input, select, textarea, button { font-family: var(--font); }

/* ===== כותרת דף (ptitle) — מחליפה את הטופבר במסך המנהל ===== */
.ptitle { display: flex; align-items: center; gap: 10px; margin: 2px 2px 16px; }
/* בלוק הכותרת תופס את הרוחב — כך כל כפתור אחר בשורה נדחף לקצה השני
   בלי להסתמך על :first-of-type (שנתפס ע"י חץ החזרה ולא ע"י האייקון) */
.ptitle > div { flex: 1; min-width: 0; }
/* חץ החזרה בלי ריבוע, כמו שאר אייקוני הכותרת — אחרת שורה אחת
   מערבבת כפתור מורם ואייקונים חשופים */
.ptitle-back {
  border: none; background: none; color: var(--text);
  /* חץ החזרה הוא הכפתור הכי נלחץ באפליקציה והיה 34x36. שטח הלחיצה
     גדל ל-44 והמיקום נשמר במרווח השלילי. */
  width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0;
  margin-inline-start: -11px; padding: 0;
  cursor: pointer; font-size: 18px;
  display: grid; place-items: center;
  transition: transform 0.12s var(--ease), color 0.15s;
}
.ptitle-back:active { transform: scale(0.88); }
.ptitle-h { font-weight: 800; font-size: 21px; margin: 0; line-height: 1.2; }
/* שורה אחת עם שלוש נקודות, לא גלישה לשתיים. מאז שתגית המצב נכנסה
   לכותרת יש פחות רוחב, וכתובת ארוכה הייתה שוברת את הכותרת לגובה כפול
   — בדיוק בראש הדף שהמשתמש קורא ראשון. הכותרת עצמה מקבלת את אותו יחס:
   מספר שלט ארוך נחתך ולא דוחף את התגית. */
.ptitle-h, .ptitle-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptitle-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

/* כפתור פעולה בצד השני של הכותרת (הוסף שלט / הוסף משימה) */
.ptitle-action {
  margin-inline-start: auto; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 7px;
  border: none; cursor: pointer;
  background: linear-gradient(120deg, var(--primary), #20D6A2);
  color: #fff; font-family: var(--font); font-weight: 800; font-size: 13px;
  padding: 10px 14px; border-radius: 14px;
  box-shadow: 0 12px 26px -14px rgba(18,196,139,0.7);
  position: relative; overflow: hidden;
  transition: transform 0.12s var(--ease);
}
.ptitle-action i { font-size: 12px; }
.ptitle-action:active { transform: scale(0.96); }
/* אותו נצנוץ שיש לכרטיס "קובץ חדש מהעירייה" */
.ptitle-action::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.28), transparent 65%);
  transform: translateX(-120%);
  animation: sheen 3.6s var(--ease) infinite;
}
@media (max-width: 360px) {
  .ptitle-action span { display: none; }
  .ptitle-action { padding: 11px; }
}

/* אייקוני כותרת — האייקון עצמו בלבד, בלי ריבוע מסביב */
.ptitle-icon {
  position: relative; flex-shrink: 0;
  /* הריבוע הנראה נשאר 36 — שטח הלחיצה גדל ל-44 בלי לשנות את הפריסה,
     כי הכותרת ממילא גבוהה מזה. */
  width: 44px; height: 44px; padding: 0;
  border: none; background: none; cursor: pointer;
  color: var(--text-muted); font-size: 19px;
  display: grid; place-items: center;
  transition: color 0.15s, transform 0.12s var(--ease);
}
.ptitle-icon:first-of-type { margin-inline-start: auto; }
.ptitle-icon:hover { color: var(--text); }
.ptitle-icon:active { transform: scale(0.88); }
/* הפח יושב בקצה השמאלי ובאפור — מחיקה היא לא הפעולה הראשית במסך,
   הוא מסמן אדום רק כשנוגעים בו */
.ptitle-icon.danger { color: #9aa4ad; margin-inline-end: -6px; }
.ptitle-icon.danger:hover { color: #e5484d; }
.ptitle-icon.danger:active { color: #c81e25; }
.ptitle-icon-badge {
  position: absolute; top: -1px; inset-inline-end: -2px;
  background: var(--danger); color: #fff;
  font-size: 9.5px; font-weight: 800; line-height: 1;
  min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px;
  display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--bg);
}
/* כשיש גם כפתור הוספה, הוא נדחף לקצה והאייקונים אחריו */
.ptitle-action { margin-inline-start: auto; }
.ptitle-action ~ .ptitle-icon:first-of-type { margin-inline-start: 6px; }

/* אותם אייקונים בראש מסכי הבית — רק שם, לא בשאר הטאבים */
.dash-icons { display: flex; align-items: center; gap: 2px; flex-shrink: 0; margin-inline-start: auto; }
.ptitle-icon.logout { color: #c98a86; }
.ptitle-icon.logout:hover { color: #e5484d; }

/* ===== כרטיס פרופיל בראש ההגדרות ===== */
.profile-card {
  background: var(--card-bg); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 16px; margin-bottom: 6px;
  animation: rise 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.profile-head { display: flex; align-items: center; gap: 13px; }
.profile-av {
  width: 54px; height: 54px; border-radius: 18px; flex-shrink: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary), #38E0AE); color: #fff;
  font-weight: 800; font-size: 20px; letter-spacing: -0.02em;
  box-shadow: 0 10px 22px -10px rgba(18,196,139,0.7);
  animation: avatarIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes avatarIn { from { opacity: 0; transform: scale(0.72); } to { opacity: 1; transform: none; } }
.profile-id { flex: 1; min-width: 0; }
.profile-name { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.profile-role { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.profile-edit {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 12px;
  border: none; cursor: pointer; background: var(--soft); color: var(--text-muted);
  display: grid; place-items: center; font-size: 14px;
  transition: transform 0.12s var(--ease), color 0.15s, background 0.15s;
}
.profile-edit:hover { color: var(--primary-d); background: var(--primary-soft); }
.profile-edit:active { transform: scale(0.9); }

.profile-rows { margin-top: 14px; padding-top: 4px; border-top: 1px solid var(--line); }
.profile-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; padding: 9px 0;
  border-bottom: 1px solid var(--line);
  animation: rise 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.profile-row:last-child { border-bottom: none; }
.profile-row i { width: 16px; text-align: center; color: var(--text-muted); font-size: 13px; }
.profile-row .k { color: var(--text-muted); }
.profile-row .v { margin-inline-start: auto; font-weight: 800; direction: ltr; }
@media (prefers-reduced-motion: reduce) {
  .profile-card, .profile-av, .profile-row { animation: none; }
}


/* כותרת סקשן */
.section-title { font-weight: 800; font-size: 15px; margin: 20px 2px 11px; }
.section-title .link-more {
  font-size: 12px; font-weight: 700; color: var(--primary-d); cursor: pointer;
  border: none; background: none; font-family: var(--font);
  /* אותו סיפור: טקסט של 12px בלי ריפוד הוא יעד מגע של 15px */
  min-height: 44px; display: inline-flex; align-items: center; gap: 4px; padding: 0 6px;
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 2px;
  transition: transform 0.12s var(--ease);
}
.section-title .link-more i { font-size: 10px; }
.section-title .link-more:active { transform: scale(0.94); }

/* ===== מסילת הצוות במסך הבית =====
   כל העובדים, לא רק המחוברים — זו הדרך המהירה מהבית לדף של עובד. */
.crew-rail {
  display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 6px;
  scroll-snap-type: x proximity;  scrollbar-width: none;
}
.crew-rail::-webkit-scrollbar { display: none; }
.crew-card, .crew-add {
  flex: 0 0 auto; width: 84px; scroll-snap-align: start;
  background: var(--card-bg); border: none; border-radius: 18px;
  box-shadow: var(--shadow-sm); cursor: pointer;
  padding: 12px 8px 11px; font-family: var(--font); color: var(--text);
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  transition: transform 0.14s var(--ease), box-shadow 0.2s;
  animation: rise 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.crew-card:active, .crew-add:active { transform: scale(0.95); }
.cr-ring {
  position: relative; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
}
.cr-av {
  width: 43px; height: 43px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 18px;
  box-shadow: 0 0 0 3px var(--card-bg);
}
.cr-live {
  position: absolute; bottom: 1px; inset-inline-end: 1px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--primary); border: 2.5px solid var(--card-bg);
}
.cr-name {
  font-weight: 800; font-size: 12.5px; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cr-sub { font-size: 10.5px; font-weight: 700; line-height: 1.2; }
.cr-sub.cr-now  { color: var(--sky); }
.cr-sub.cr-open { color: #c9871a; }
.cr-sub.cr-free { color: var(--text-muted); }
.crew-add { color: var(--text-muted); justify-content: center; }
.ca-plus {
  width: 43px; height: 43px; border-radius: 50%;
  display: grid; place-items: center; margin-top: 4px;
  background: var(--primary-soft); color: var(--primary-d); font-size: 16px;
}
.ca-lbl { font-size: 11px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .crew-card, .crew-add { animation: none; } }

/* כרטיסים כלליים — בלי מסגרת, צל רך */
.worker-card, .city-card, .incident-card, .inbox-row, .info-card,
.sign-card, .settings-section, .activity-calendar, .task-card {
  border: none;
  box-shadow: var(--shadow-sm);
}

/* כניסה מדורגת לרשימות */
.card-list > *, #crew-now > *, #attention-list > *, #workers-list > * {
  animation: rise 0.45s var(--ease) both;
}
.card-list > *:nth-child(1) { animation-delay: 0ms; }
.card-list > *:nth-child(2) { animation-delay: 55ms; }
.card-list > *:nth-child(3) { animation-delay: 110ms; }
.card-list > *:nth-child(4) { animation-delay: 165ms; }
.card-list > *:nth-child(5) { animation-delay: 220ms; }
.card-list > *:nth-child(6) { animation-delay: 275ms; }
.card-list > *:nth-child(7) { animation-delay: 330ms; }
.card-list > *:nth-child(n+8) { animation-delay: 385ms; }
#crew-now > *:nth-child(2), #attention-list > *:nth-child(2) { animation-delay: 70ms; }
#crew-now > *:nth-child(3), #attention-list > *:nth-child(3) { animation-delay: 140ms; }
#crew-now > *:nth-child(n+4), #attention-list > *:nth-child(n+4) { animation-delay: 210ms; }

/* ===== כרטיס שלט =====
   התמונה עברה לצד ימין. לוחית הזהב ירדה — היא רק חזרה על "שלט 1013"
   שכתוב מיד לידה. חץ בקצה כדי שיהיה ברור שהכרטיס נכנס פנימה. */
.p-scard {
  display: flex; gap: 12px; align-items: center;
  background: var(--card-bg); border-radius: var(--radius);
  padding: 12px; box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.12s var(--ease), box-shadow 0.15s;
}
.p-scard:active { transform: scale(0.98); box-shadow: var(--shadow); }

/* ===== סימון כמה שלטים =====
   עבר לכאן מהקבלן. אותה שפה ויזואלית בדיוק — מי שהכיר את זה שם מזהה
   אותו כאן — רק על שלטים ועם שתי פעולות במקום ארבע. */
.tasks-select-btn {
  flex-shrink: 0; width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--line); background: var(--card-bg); color: var(--text-muted);
  border-radius: 13px; cursor: pointer; font-size: 15px;
  display: grid; place-items: center;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.12s var(--ease);
}
/* 34×35 מצויר — אזור הלחיצה מורחב ל-44. */
.tasks-select-btn { position: relative; }
.tasks-select-btn::after { content: ''; position: absolute; inset: -5px; }
.tasks-select-btn:active { transform: scale(0.92); }
.tasks-select-btn.on { background: var(--primary); border-color: var(--primary); color: #fff; }
/* בקצה שורת החיפוש, כדי ששורת השבבים תקבל את כל הרוחב. */
.search-bar .tasks-select-btn { width: 34px; height: 34px; font-size: 14px; margin-inline-start: 2px; }

.select-mode .p-scard { position: relative; padding-inline-end: 46px; }
/* החץ אומר "היכנס לשלט", ובמצב סימון לחיצה מסמנת ולא נכנסת. הוא גם
   יושב בדיוק במקום של עיגול הסימון. */
.select-mode .p-scard .p-go { display: none; }
.sc-check {
  position: absolute; inset-inline-end: 13px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--line); background: var(--card-bg); color: transparent;
  display: grid; place-items: center; font-size: 11px;
  transition: background 0.18s var(--ease), border-color 0.18s, color 0.14s;
}
.sc-picked .sc-check { background: var(--primary); border-color: var(--primary); color: #fff; }
.sc-picked { box-shadow: 0 0 0 2px var(--primary) inset, var(--shadow-sm); }

/* שורת הפעולות — בזרימה מתחת לשבבים, לא חלונית צפה שמסתירה שלטים. */
.selrow {
  display: flex; align-items: center; gap: 8px;
  background: var(--card-bg); border-radius: 15px; box-shadow: var(--shadow-sm);
  padding: 7px 10px; margin: 0 2px 10px;
  animation: selRowIn 0.22s var(--ease-out) both;
}
.selrow.hidden { display: none; }
@keyframes selRowIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.selrow-all {
  flex-shrink: 0; border: 0; background: var(--soft); color: var(--primary-d);
  font-family: var(--font); font-weight: 800; font-size: 12px;
  padding: 7px 11px; border-radius: 10px; cursor: pointer;
}
.selrow-all:active { transform: scale(0.96); }
.selrow-count {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.selrow.has-sel .selrow-count { color: var(--text); }
.selrow-acts { display: flex; gap: 2px; flex-shrink: 0; }
.selrow-act {
  width: 36px; height: 36px; border: 0; background: none; color: var(--text-muted);
  border-radius: 10px; cursor: pointer; font-size: 15px;
  display: grid; place-items: center;
  transition: color 0.15s, transform 0.12s var(--ease);
}
.selrow-act:active { transform: scale(0.9); }
/* בלי בחירה אין על מה לפעול — מונמך ולא לחיץ, במקום להיעלם ולהקפיץ את השורה. */
.selrow:not(.has-sel) .selrow-acts { opacity: 0.35; pointer-events: none; }
.selrow-x {
  flex-shrink: 0; width: 32px; height: 32px; border: 0; background: none;
  color: var(--text-muted); border-radius: 10px; cursor: pointer; font-size: 14px;
  display: grid; place-items: center;
  transition: transform 0.12s var(--ease);
}
.selrow-x:active { transform: scale(0.9); }
.p-thumb {
  position: relative; flex-shrink: 0;
  width: 58px; height: 58px; border-radius: 15px;
  display: grid; place-items: center; overflow: visible;
  color: #fff; font-size: 10px; font-weight: 800; text-align: center;
  padding: 4px; line-height: 1.15;
  background-clip: padding-box;
}
/* נקודת מצב על התמונה — מזהים אותה בלי לקרוא */
.p-dot {
  position: absolute; bottom: -3px; inset-inline-start: -3px;
  width: 15px; height: 15px; border-radius: 50%;
  border: 3px solid var(--card-bg);
}
.p-dot.st-ok { background: var(--primary); }
.p-dot.st-warn { background: var(--warning); }
.p-dot.st-bad { background: var(--danger); }
.p-go { color: var(--line); font-size: 15px; flex-shrink: 0; }
.p-type {
  font-size: 10.5px; font-weight: 700; color: var(--text-muted);
  background: var(--soft); border-radius: 20px; padding: 2px 8px;
}
.p-sb { flex: 1; min-width: 0; }
.p-srow { display: flex; align-items: center; gap: 7px; }
.p-snum { font-weight: 800; font-size: 15px; }
.p-stag { font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 20px; white-space: nowrap; }
.st-ok { background: var(--primary-soft); color: var(--primary-d); }
.st-warn { background: rgba(245,158,11,0.16); color: #c9871a; }
.st-bad { background: rgba(255,107,107,0.15); color: #e5484d; }
/* "בוצע · לאישורך" — נבדל גם מ"תקין" וגם מ"דורש טיפול", כי הוא לא אף
   אחד מהם: העבודה נעשתה, והשלט מחכה לחתימה של הקבלן. */
/* "בטיפול" — יש עובד בשטח. לא תקלה פתוחה ולא סגור. */
.st-prog { background: rgba(99,102,241,0.14); color: #4f46e5; }
.p-dot.st-prog { background: #6366f1; }
.p-dot.st-wait { background: #0891b2; }
.p-saddr { font-size: 12px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-sides { display: flex; align-items: center; gap: 5px; margin-top: 6px; }
.p-sd { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 6px; background: var(--soft); color: var(--text-muted); }
.p-sd.A { background: rgba(56,189,248,0.16); color: #1f9fcc; }
.p-sd.B { background: rgba(251,191,36,0.2); color: #c9871a; }
.p-sd.C { background: rgba(167,139,250,0.2); color: #7c5cd6; }
.p-sd.D { background: rgba(255,138,115,0.2); color: #d6603f; }

/* ===== כרטיס משימה ===== */
.task-card { padding: 13px; border-inline-start: 4px solid var(--line); overflow: visible; }
.task-card::before { display: none; }
/* .status-* הן מחלקות משותפות לתג הסטטוס ולכרטיס — מנטרלים את הרקע על הכרטיס */
.task-card.status-pending, .task-card.status-active, .task-card.status-done { background: var(--card-bg); color: var(--text); }
.task-card.status-pending { border-inline-start-color: var(--warn); }
.task-card.status-active  { border-inline-start-color: var(--sky); }
.task-card.status-done    { border-inline-start-color: var(--primary); opacity: 1; }
.task-header { align-items: center; margin-bottom: 0; gap: 8px; }
.task-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; min-width: 0; flex: 1; }
/* הכלל המלא יושב בסוף הגיליון — שתי שורות במקום חיתוך. */

/* הכרטיס מקופל כברירת מחדל — רק מספר, כותרת וסטטוס.
   החץ פורס, לחיצה על הכרטיס נכנסת למשימה. */
/* 30×30 נראה נכון בכרטיס, ו-30 פיקסל זה קטן מדי לאצבע. אזור המגע
   מורחב ב-`::after` בלי לשנות את הציור — אותו דפוס בדיוק כמו `.mcd-x`.
   ההרחבה א-סימטרית: החוצה ולמעלה/למטה בנדיבות, ופנימה כמעט בכלל לא,
   כדי שלא תבלע את הכרטיס עצמו — לחיצה על הכרטיס פותחת את המשימה,
   ולחיצה על החץ רק מרחיבה אותו. `position: relative` הוא מה שמקבע את
   ה-`::after` לכפתור. */
.tc-toggle {
  position: relative;
  flex-shrink: 0; width: 30px; height: 30px; padding: 0; margin-inline-end: -4px;
  border: none; background: none; cursor: pointer;
  color: #9aa4ad; font-size: 13px;
  display: grid; place-items: center; border-radius: 9px;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), color 0.15s, background 0.15s;
}
.tc-toggle::after {
  content: ''; position: absolute;
  inset-block: -8px; inset-inline-end: -10px; inset-inline-start: -4px;
}
.tc-toggle:hover { color: var(--text); background: var(--soft); }
.tc-open .tc-toggle { transform: rotate(180deg); color: var(--primary-d); }
.tc-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.tc-open .tc-body { grid-template-rows: 1fr; }
/* **כל** הילדים, לא רק `.task-meta`. הגריד מגדיר שורה אחת, ולכן ילד שני
   (כפתור האישור) נפל לשורה משתמעת `auto` והוצג במלוא גובהו גם בכרטיס
   סגור — כפתור ירוק מלא-רוחב על כרטיס שלא מציג עובד, תאריך או תמונת
   סיום. אישור בנגיעה אחת בלי שום ראיה, בדיוק מול הלקוח. */
.tc-body > * { min-height: 0; overflow: hidden; }

/* ===== שורת הסיכום, מחוץ לקיפול =====
   עובד, יום ואיחור היו קבורים בתוך `.tc-body` המקופל, וכרטיס סגור הראה
   רק מספר וכותרת. "ללא עובד" ו"ללא תאריך" הן בדיוק המשימות שצריך לתפוס
   בסריקה, והן היו בלתי נראות עד שפותחים כל כרטיס בנפרד. */
.tc-sum {
  display: flex; align-items: center; flex-wrap: wrap; gap: 5px;
  font-size: 12px; color: var(--text-muted); margin-top: 5px;
}
.tc-sep { opacity: .45; }
.tc-warn { color: #b45309; font-weight: 700; }

/* ===== כרטיס מקובץ: אותה עבודה, כמה פאות =====
   החלפת דף בקוביה היא נסיעה אחת, ולכן היא כרטיס אחד. הפאות עצמן
   יושבות בפנים — לכל אחת יש תמונת סיום, משך והיסטוריה משלה, וזו גם
   יחידת החיוב מול העירייה. */
.tc-late-tag {
  font-size: 10.5px; font-weight: 800; border-radius: 20px; padding: 2px 8px;
  background: rgba(239,68,68,.14); color: #dc2626;
}
/* פס אדום בקצה: משימה באיחור נראית מהסריקה ולא רק מהקריאה */
.task-card.tc-late { border-inline-start: 3px solid #ef4444; }
body.dark-mode .tc-warn { color: #fcd34d; }
body.dark-mode .tc-late-tag { background: rgba(239,68,68,.22); color: #fca5a5; }
/* ===== דדליין של דיווח =====
   אותו מתכון של `.tc-late-tag` בדיוק — לא מציגים שני אדומים שונים על
   אותו מסך. הכתום הוא השלב שלפני: עוד לא עבר, אבל כדאי להסתכל. */
/* השדה משתמש בטיפוגרפיה ובמשטח של שאר הטופס. 16px הוא לא בחירה
   עיצובית — פחות מזה גורם ל-iOS לזום על פוקוס. */
/* ב"אחר" השדה הוא הדיווח עצמו ולא תוספת, ולכן הוא נראה כמו שדה שממתין
   לתשובה ולא כמו הערה אופציונלית. */
#muni-note-text.is-required { border: 1.5px solid var(--primary); background: var(--card-bg); }

/* קישור לתמונת העזר. טקסט ואייקון ולא תמונה ממוזערת: שורת דיווח היא
   שורה, וממוזערת בתוכה מכפילה את גובהה בשביל משהו שרוב הדיווחים בכלל
   לא נושאים. */
/* אייקון ולא פיל: המילה "תמונה" לא הוסיפה מידע על אייקון של תמונה,
   והיא עלתה שורה שלמה בשורה שכבר לא הספיקה. */
.mcd-pic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary-d);
  cursor: pointer; flex-shrink: 0;
  transition: transform .12s var(--ease);
}
/* נמדד 21×21 באזור הלחיצה — הקטן ביותר באפליקציה. העיגול נשאר 20,
   ואזור המגע גדל סביבו. */
.mcd-pic { position: relative; }
.mcd-pic::after { content: ''; position: absolute; inset: -12px; }
.mcd-pic i { font-size: 10px; }
.mcd-pic:active { transform: scale(0.9); }

.muni-note-due { margin-top: 18px; }
.muni-due-input {
  width: 100%; border: 1.5px solid transparent; background: var(--soft);
  color: var(--text); border-radius: 14px; padding: 13px;
  font-size: 16px; font-family: var(--font); outline: none;
  transition: border-color 0.16s, background 0.16s;
  /* `min-width: 0` ו-`appearance: none` הם מה שמונע את הגלישה. לפקד
     `datetime-local` יש ב-Safari רוחב מינימלי פנימי לפי הטקסט המפורמט
     ("1 Sep 2026 at 23:59"), והוא גובר על `width: 100%` — השדה יצא רחב
     מהמודל וגלש מעבר לשתי הפינות. `box-sizing` גלובלי לא עוזר כאן,
     כי הבעיה היא הרוחב המינימלי ולא הריפוד.
     `text-align: start` כי iOS ממרכז ערך בשדות תאריך, וזה יצא לא מיושר
     מול כל שאר הטופס. */
  min-width: 0; max-width: 100%;
  -webkit-appearance: none; appearance: none;
  text-align: start;
}
.muni-due-input:focus { border-color: var(--primary); background: var(--card-bg); }

.due-chip {
  font-size: 10.5px; font-weight: 800; border-radius: 20px; padding: 2px 8px;
  background: var(--soft); color: var(--text-muted); white-space: nowrap;
}
.due-chip.is-late { background: rgba(239,68,68,.14); color: #dc2626; }
body.dark-mode .due-chip.is-late { background: rgba(239,68,68,.22); color: #fca5a5; }

/* תג "באיחור" בכרטיס שלט. מרונדר תמיד כשיש דדליין פתוח ומוסתר עד שהוא
   נכון — ככה פעימת הדקה חושפת אותו בלי לבנות מחדש את הרשימה ולאבד
   גלילה. */
.due-pill { display: none; }
.due-pill.is-late { display: inline-block; }
.p-stag.st-late { background: rgba(239,68,68,.14); color: #dc2626; }
body.dark-mode .p-stag.st-late { background: rgba(239,68,68,.22); color: #fca5a5; }

.tab-late.active { background: rgba(239,68,68,.14); color: #dc2626; }
.tnum { font-weight: 800; font-size: 13px; background: var(--soft); color: var(--text); padding: 2px 8px; border-radius: 7px; }
.task-status { font-size: 10.5px; font-weight: 700; padding: 2px 9px; border-radius: 20px; }
.task-status.status-pending { background: rgba(245,158,11,0.16); color: #c9871a; }
.task-status.status-active  { background: rgba(56,189,248,0.16); color: #1f9fcc; }
.task-status.status-done    { background: var(--primary-soft); color: var(--primary-d); }
/* פרט אחד בשורה, עם קו מפריד — במקום ערימה דחוסה של אייקונים וטקסטים */
/* padding ולא margin — בתוך grid מקופל margin לא נחתך נקי */
.task-meta { flex-direction: column; gap: 0; margin-top: 0; padding-top: 8px; }
.task-meta-item {
  font-size: 12.5px; gap: 9px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.task-meta-item:last-child { border-bottom: none; padding-bottom: 2px; }
.task-meta-item i { width: 15px; text-align: center; font-size: 12px; color: #9aa4ad; flex-shrink: 0; }
.task-meta-item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* הפעולות רוכבות על שורת התאריך, בגובה שלה */
.tmi-acts { margin-inline-start: auto; display: flex; align-items: center; gap: 1px; flex-shrink: 0; }
.task-meta-item:has(.tmi-acts) { padding-top: 3px; padding-bottom: 3px; }

.task-actions .btn-sm { padding: 5px 10px; font-size: 11.5px; border-radius: 9px; }
/* הפח בכרטיס — אפור ושקט, אדום רק במגע. אותה שפה כמו הפח שבכותרת השלט */
.btn-icon-ghost {
  border: none; background: none; cursor: pointer; padding: 6px 8px;
  color: #9aa4ad; font-size: 14px; border-radius: 9px;
  transition: color 0.15s, background 0.15s, transform 0.12s var(--ease);
}
.btn-icon-ghost:hover { color: #e5484d; background: rgba(229,72,77,0.10); }
.btn-icon-ghost:active { transform: scale(0.9); }


/* ===== בורר אפשרויות ===== */
.choose-head { margin-bottom: 12px; }
.choose-head h3 { margin: 0; font-size: 17px; font-weight: 800; }
.choose-headsub { font-size: 12.5px; color: var(--text-muted); }
.choose-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; max-height: 46vh; overflow-y: auto; }
.choose-item {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); background: var(--card-bg); cursor: pointer;
  border-radius: 15px; padding: 12px 13px; width: 100%;
  font-family: var(--font); color: var(--text); text-align: start;
  transition: transform 0.12s var(--ease), border-color 0.18s, background 0.18s;
  animation: rise 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}
/* ==========================================================================
   מה יש בקובץ — סקירת קובץ השלטים של העירייה
   ==========================================================================
   חלון ולא גיליון שעולה מהתחתית: זו לא פעולה מהירה אלא בדיקה ועריכה
   של רשימה שנשלחת ללקוח, והחלון הממורכז אומר "עצור ותסתכל" במקום
   "המשך לגלול". הכותרות במרכז מאותה סיבה — הן מכריזות, לא מתייגות. */
#modal-muni-review { align-items: center; justify-content: center; }
.mr-card {
  /* `width:auto` בתוך flex עם justify-content:center מכווץ את הכרטיס
     לרוחב התוכן, והוא יצא צר בטלפון עם שוליים ענקיים משני הצדדים.
     רוחב מפורש פחות שוליים הוא מה שממלא את המסך כמו שצריך. */
  width: calc(100% - 24px); max-width: 560px; margin: 0;
  border-radius: var(--radius);
  /* עומק אמיתי: היסט ורכות, לא הילה סביב */
  box-shadow: 0 32px 64px -28px rgba(6, 34, 24, 0.45);
  animation: confirmIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
#modal-muni-review.closing .mr-card { animation: confirmOut 0.16s cubic-bezier(0.4, 0, 1, 1) forwards; }

.mr-header {
  position: relative; flex-shrink: 0;
  padding: 22px 52px 16px; text-align: center;
  border-bottom: 1px solid var(--line);
}
.mr-header h3 { font-size: 19px; font-weight: 800; margin: 0; }
.mr-count { font-size: 15px; font-weight: 800; color: var(--primary-d); margin-top: 8px; }
.mr-sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; min-height: 1em; }
.mr-x { position: absolute; inset-block-start: 16px; inset-inline-start: 16px; }

.mr-body { padding: 14px 16px 18px; }
.mr-list { display: flex; flex-direction: column; gap: 8px; }

/* ---------- שורת שלט, מצב סגור ---------- */
.mr-item { border-radius: 14px; }
.mr-main {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--card-bg);
  font-family: var(--font); text-align: start; color: var(--text);
  transition: border-color 0.16s, background 0.16s, transform 0.12s var(--ease);
}
.mr-main:hover { border-color: var(--primary); background: var(--primary-soft); }
.mr-main:active { transform: scale(0.99); }
.mr-num {
  flex-shrink: 0; min-width: 54px; text-align: center;
  font-weight: 800; font-size: 14px; padding: 6px 8px; border-radius: 10px;
  background: var(--soft); font-variant-numeric: tabular-nums;
}
/* min-width:0 — בלי זה כתובת ארוכה דוחפת את התגיות מחוץ לשורה */
.mr-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mr-addr {
  font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* חסר, לא כתובת. בלי זה "ללא כתובת" נקרא כמו שם רחוב ושורת האזהרה
   שלמעלה נראית כאילו היא מדברת על שלט אחר. */
.mr-addr.mr-miss { color: var(--warning); font-weight: 700; }
.mr-note {
  font-size: 11.5px; color: var(--text-muted);
  display: flex; align-items: center; gap: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mr-sides { flex-shrink: 0; display: flex; gap: 3px; }
.mr-noside { font-size: 11px; color: var(--warning); font-weight: 700; }
.mr-tag {
  flex-shrink: 0; font-size: 10.5px; font-weight: 800;
  color: var(--primary-d); background: var(--primary-soft);
  padding: 3px 7px; border-radius: 7px;
}
/* שלט שהמספר שלו לא נמצא במאגר — העירייה לא מקימה שלטים, ולכן זו
   כמעט תמיד טעות הקלדה בקובץ ולא שלט חדש. */
.mr-tag-warn { color: #92400e; background: #fef3c7; }
.mr-main.mr-unknown { border-color: var(--warning); }
body.dark-mode .mr-tag-warn { color: #fde68a; background: #4a3407; }
.mr-pen { flex-shrink: 0; font-size: 11px; color: var(--text-muted); }

/* ---------- שורת שלט, מצב עריכה ---------- */
.mr-open {
  border: 1.5px solid var(--primary); background: var(--soft2);
  border-radius: 16px; padding: 13px;
  display: flex; flex-direction: column; gap: 12px;
}
/* המספר והכתובת לקריאה בלבד — הם מזהים של שלט קיים, לא שדות של
   הפקודה. מה שנערך כאן הוא רק מה שבאמת של העירייה להחליט. */
.mr-open-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 0; border: none; background: none; cursor: pointer;
  font-family: var(--font); color: var(--text); text-align: start;
}
.mr-open-addr {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mr-collapse { flex-shrink: 0; font-size: 11px; color: var(--text-muted); }
.mr-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mr-field > span, .mr-field-lbl {
  font-size: 11.5px; font-weight: 800; color: var(--text-muted);
}
/* "לא חובה" הוא סייג, לא חלק מהשם — הוא חייב להיקרא כשכבה שנייה */
.mr-opt {
  font-weight: 700; font-size: 10px; color: var(--text-muted);
  background: var(--soft); border-radius: 6px; padding: 2px 6px;
  margin-inline-start: 5px;
}
.mr-field input, .mr-field textarea {
  width: 100%; font-family: var(--font);
  /* 16px ולא פחות: ספארי מזום פנימה על שדה ממוקד מתחת לזה, והחלון קופץ */
  font-size: 16px; padding: 10px 11px; border-radius: 11px;
  border: 1.5px solid var(--line); background: var(--card-bg); color: var(--text);
  resize: vertical;
}
.mr-field input:focus, .mr-field textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.mr-sides-pick { display: flex; flex-direction: column; gap: 6px; }
.mr-sides-row { display: flex; gap: 7px; }
.mr-side {
  flex: 1; padding: 9px 0; border-radius: 11px; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--card-bg);
  font-family: var(--font); font-weight: 800; font-size: 14px; color: var(--text-muted);
  transition: border-color 0.16s, background 0.16s, color 0.16s;
}
.mr-side.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-d); }
/* "סיום" ירד — כל שינוי כבר שמור, וכפתור אישור על משהו ששמור מבטיח
   פעולה שכבר קרתה. נשארת רק ההסרה, מופרדת בקו כדי שלא תיראה כמו
   הפעולה הראשית של הכרטיס. */
.mr-item-actions {
  display: flex; justify-content: flex-start;
  border-top: 1px solid var(--line); padding-top: 4px; margin-top: 2px;
}
.mr-del {
  border: none; cursor: pointer; font-family: var(--font); font-weight: 800;
  font-size: 12.5px; padding: 8px 6px; border-radius: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  background: none; color: var(--danger);
}
.mr-del:hover { background: rgba(229, 72, 77, 0.08); }

/* ---------- הוספה, ומצב ריק ---------- */
.mr-add {
  width: 100%; margin-top: 12px; padding: 12px; cursor: pointer;
  border: 1.5px dashed var(--line); border-radius: 14px;
  background: none; color: var(--primary-d);
  font-family: var(--font); font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: border-color 0.16s, background 0.16s;
}
.mr-add:hover { border-color: var(--primary); background: var(--primary-soft); }
.mr-empty { text-align: center; padding: 26px 12px 6px; color: var(--text-muted); }
.mr-empty i { font-size: 30px; color: var(--line); }
.mr-empty p { font-size: 13px; margin-top: 10px; line-height: 1.6; }

/* הערת העירייה, בתצוגה המקדימה של הקבלן */

body.dark-mode .mr-open { background: #1f1f1f; }
body.dark-mode .mr-num { background: var(--soft2); }

.choose-search { margin-bottom: 10px; }
/* מפריד קבוצות ברשימה אחת — "השלטים שלך" מול "שאר השלטים בעיר".
   בלעדיו רשימה של עיר שלמה נראית כמו ערימה, והשלטים שהעובד באמת
   עומד מולם היום נבלעים בתוכה. */
.choose-divider {
  font-size: 11.5px; font-weight: 800; color: var(--text-muted);
  padding: 8px 4px 2px; letter-spacing: .01em;
}
.choose-divider.hidden, .choose-item.hidden { display: none; }
.choose-empty { font-size: 13px; color: var(--text-muted); text-align: center; padding: 18px 4px; }
.choose-empty.hidden { display: none; }
.choose-item:hover { border-color: var(--primary); background: var(--primary-soft); }
.choose-item:active { transform: scale(0.98); }
.choose-ic { width: 26px; font-size: 15px; display: grid; place-items: center; flex-shrink: 0; }
.choose-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.choose-label { font-weight: 700; font-size: 14px; }
.choose-sublabel { font-size: 11.5px; color: var(--text-muted); }
.choose-go { color: var(--text-muted); font-size: 12px; flex-shrink: 0; }


@media (prefers-reduced-transparency: reduce) {
}
@media (prefers-reduced-motion: reduce) {
  .selrow, .choose-item { animation: none; }
}

/* ===== פורטל העירייה ===== */
/* כרטיס הגשה נלחץ ומוביל לפירוט מלא */
.muni-batch-tap { cursor: pointer; transition: transform 0.12s var(--ease), box-shadow 0.2s; }
.muni-batch-tap:active { transform: scale(0.99); }
.muni-batch-go {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line);
  font-size: 12px; font-weight: 700; color: var(--primary-d);
}
.muni-batch-go i { font-size: 11px; }

/* --- דף פירוט הגשה --- */
.mb-status { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.mb-status-txt { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.mb-kpis { display: flex; gap: 8px; margin-bottom: 14px; }
.mb-kpi {
  flex: 1; text-align: center; background: var(--soft2); border-radius: 14px; padding: 12px 6px;
}
.mb-kpi b { display: block; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mb-kpi span { font-size: 11px; color: var(--text-muted); font-weight: 700; }
.mb-facts { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; }
.mb-fact { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-muted); }
.mb-fact i { width: 15px; text-align: center; font-size: 11px; color: var(--primary-d); flex-shrink: 0; }

.mb-worker { margin-bottom: 12px; }
.mb-worker:last-child { margin-bottom: 0; }
.mb-worker-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; }
.mb-worker-name { font-weight: 700; font-size: 13.5px; }
.mb-worker-n { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ===== השלטים בהגשה =====
   שלושת הקיבוצים לפי סטטוס (`.mb-group-*`, `.mb-task-*`) ירדו: הם הציגו
   משימות, ולכן הגשה שהקבלן עוד לא חילק הופיעה ריקה לגמרי. הרשימה עכשיו
   בנויה על השלטים ששלחו, והמשימות תלויות עליהם. */
.mb-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--line); }
.mb-active .mb-dot { background: var(--sky); }
.mb-pending .mb-dot { background: var(--warn); }
.mb-done .mb-dot { background: var(--primary); }

.mbs-list { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.mbs-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.mbs-row:last-child { border-bottom: none; padding-bottom: 0; }
.mbs-head { display: flex; align-items: center; gap: 8px; }
.mbs-num { font-size: 13.5px; font-weight: 700; }
/* אותיות הפאות. `.sign-side-badge` היא שבב לפאה אחת, וכאן זו רשימה. */
.mbs-sides { font-size: 11px; font-weight: 700; color: var(--text-muted);
  background: var(--soft); border-radius: 20px; padding: 1px 8px; letter-spacing: .06em; }
.mbs-tag { margin-inline-start: auto; font-size: 11px; font-weight: 800;
  padding: 2px 9px; border-radius: 20px; flex-shrink: 0; }
.mbs-tag-unassigned { background: var(--soft); color: var(--text-muted); }
.mbs-tag-pending { background: rgba(245,158,11,0.16); color: #c9871a; }
.mbs-tag-active { background: rgba(56,189,248,0.16); color: #1f9fcc; }
.mbs-tag-done { background: var(--primary-soft); color: var(--primary-d); }
.mbs-addr { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.mbs-task { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.mbs-task-t { font-size: 12.5px; font-weight: 600; flex-shrink: 0; }
.mbs-who { font-size: 11.5px; color: var(--text-muted); margin-inline-start: auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbs-none { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; font-style: normal; opacity: .85; }

/* ===== הוספת שלט — שלושה שלבים ===== */
.add-sign-card .modal-scroll-body { padding-top: 16px; }
.as-step { display: flex; flex-direction: column; }
.as-step.hidden { display: none; }
/* השלב נכנס מהצד שממנו הגענו — קדימה משמאל, אחורה מימין (RTL) */
/* `forwards` ולא `both` — ראה ההערה אצל pageIn. זה השלב שנכנס שקוף
   כשהאנימציה נתקעת, וזה מה שנראה כמו "המשך לא עושה כלום". */
.as-in-fwd  { animation: asInFwd  0.34s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.as-in-back { animation: asInBack 0.34s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes asInFwd  { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes asInBack { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }

.as-lbl { font-size: 12px; font-weight: 800; color: var(--text-muted); margin: 4px 2px 9px; }
.as-lbl:not(:first-child) { margin-top: 18px; }
.as-opt { font-weight: 600; color: var(--text-muted); opacity: 0.8; }

.as-types { display: flex; flex-direction: column; gap: 8px; }
.as-type {
  display: flex; align-items: center; gap: 12px; width: 100%;
  border: 1.5px solid var(--line); background: var(--card-bg); color: var(--text);
  border-radius: 16px; padding: 12px 13px; cursor: pointer;
  font-family: var(--font); text-align: start;
  transition: border-color 0.18s, background 0.18s, transform 0.12s var(--ease);
  animation: rise 0.36s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.as-type:active { transform: scale(0.98); }
.as-type.on { border-color: var(--primary); background: var(--primary-soft); }
.as-type-ic {
  width: 40px; height: 40px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 16px;
  background: var(--soft); color: var(--text-muted);
  transition: background 0.18s, color 0.18s;
}
.as-type.on .as-type-ic { background: var(--primary); color: #fff; }
.as-type-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.as-type-name { font-weight: 800; font-size: 14px; }
.as-type-hint { font-size: 11.5px; color: var(--text-muted); }
.as-type-sides {
  flex-shrink: 0; font-size: 11px; font-weight: 800; letter-spacing: 0.02em;
  background: var(--soft); color: var(--text-muted);
  padding: 4px 9px; border-radius: 20px;
}
.as-type.on .as-type-sides { background: rgba(255,255,255,0.75); color: var(--primary-d); }

.as-sides-box { margin-top: 16px; background: var(--soft2); border-radius: 16px; padding: 12px; }
.as-sides-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.as-sides-title { font-size: 12.5px; font-weight: 800; }
.as-sides-hint { font-size: 11px; color: var(--text-muted); }
.as-sides-all.hidden { display: none; }
.as-sides { display: flex; gap: 8px; }
/* ארבע פאות בשורה אחת נדחסות — לקוביה עוברים לשתי עמודות */
.as-sides.as-sides-quad { display: grid; grid-template-columns: 1fr 1fr; }
.as-side {
  flex: 1; display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--line); background: var(--card-bg); color: var(--text-muted);
  border-radius: 13px; padding: 10px 11px; cursor: pointer; font-family: var(--font);
  transition: border-color 0.18s, background 0.18s, color 0.18s, transform 0.12s var(--ease);
}
.as-side:active { transform: scale(0.96); }
.as-side.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-d); }
/* `flex:1` ישב על `.as-side-l` — התווית "קדמי/אחורי" — והיא זו שדחפה את
   הוי לקצה הכפתור. התוויות ירדו (הפאה היא האות), ולכן המרווח עבר לאות. */
.as-side-k { flex: 1; font-weight: 800; font-size: 15px; }
.as-side i { font-size: 14px; opacity: 0.5; }
.as-side.on i { opacity: 1; }

.as-field { display: block; margin-top: 16px; }
.as-field-lbl { display: block; font-size: 12px; font-weight: 800; color: var(--text-muted); margin-bottom: 7px; }
.as-field input, .as-field select, .as-field textarea {
  width: 100%; border: 1.5px solid transparent; background: var(--soft); color: var(--text);
  border-radius: 14px; padding: 13px; font-size: 16px; font-family: var(--font);
  outline: none; resize: none;
  transition: border-color 0.16s, background 0.16s;
}
.as-field input:focus, .as-field select:focus, .as-field textarea:focus {
  border-color: var(--primary); background: var(--card-bg);
}

.as-searchrow { display: flex; gap: 8px; margin-bottom: 9px; }
.as-searchrow input {
  flex: 1; min-width: 0; border: 1.5px solid transparent; background: var(--soft); color: var(--text);
  border-radius: 14px; padding: 12px 13px; font-size: 16px; font-family: var(--font); outline: none;
  transition: border-color 0.16s;
}
.as-searchrow input:focus { border-color: var(--primary); }
.as-searchrow button {
  flex-shrink: 0; width: 46px; border: none; cursor: pointer;
  background: var(--primary); color: #fff; border-radius: 14px; font-size: 15px;
  transition: transform 0.12s var(--ease);
}
.as-searchrow button:active { transform: scale(0.94); }
.as-gps {
  width: 100%; margin-top: 9px; border: 1.5px solid var(--line); cursor: pointer;
  background: var(--card-bg); color: var(--text);
  font-family: var(--font); font-weight: 700; font-size: 13px;
  padding: 12px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: border-color 0.18s, background 0.18s, transform 0.12s var(--ease);
}
.as-gps:active { transform: scale(0.98); }
.as-gps:disabled { opacity: 0.65; }
.as-coords { font-size: 11.5px; color: var(--text-muted); text-align: center; margin-top: 7px; }

/* הפעולה לשלט בלי מיקום, בתוך כרטיס פרטי השלט. שורה מלאה ולא כפתור
   קטן בקצה: בטלפון "GPS לא הוגדר" והכפתור נדחסו לאותה שורה ונשברו. */
.sign-loc-fix { width: 100%; margin-top: 10px; }

.as-err {
  /* ההודעה היחידה שמסבירה למה הכניסה נכשלה הייתה הכי חלשה על המסך:
     3.4:1 בהיר ו-3.1:1 כהה, מתחת ל-AA. */
  margin-top: 12px; font-size: 12.5px; font-weight: 700; color: #B3261E;
  background: rgba(229,72,77,0.10); border-radius: 12px; padding: 10px 12px;
}
body.dark-mode .as-err { color: #FF9A9E; }
.as-err.hidden { display: none; }
.as-shake { animation: asShake 0.34s ease; }
@keyframes asShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}

.as-summary { margin-top: 20px; background: var(--soft2); border-radius: 16px; padding: 13px; }
.as-sum-title { font-size: 12px; font-weight: 800; color: var(--text-muted); margin-bottom: 9px; }
.as-sum-row { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 5px 0; }
.as-sum-row i { width: 16px; text-align: center; color: var(--primary-d); font-size: 12px; flex-shrink: 0; }
.as-sum-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.as-sum-warn { color: #8a5a08; }
.as-sum-warn i { color: #c9871a; }

@media (prefers-reduced-motion: reduce) {
  .as-in-fwd, .as-in-back, .as-type, .as-shake { animation: none; }
}

/* ===== משימה חדשה =====
   בורר השלטים ובורר הפאות ירדו יחד עם שלב 1: משימה נפתחת מדיווח, והוא
   מביא את השלט ואת הפאות. מה שנשאר מהבלוק הזה הוא כרטיסי העובדים —
   `.at-sign-tick` נשאר איתם, זה הוי שלהם.
   `.as-side*` ו-`.as-sides*` **לא** נגעו: אשף הוספת השלט של העירייה
   משתמש באותם שמות, והוא לא השתנה. */
.at-workers { display: flex; flex-direction: column; gap: 7px; max-height: 46vh; overflow-y: auto; }
.at-worker {
  display: flex; align-items: center; gap: 11px; width: 100%;
  border: 1.5px solid var(--line); background: var(--card-bg); color: var(--text);
  border-radius: 15px; padding: 11px 12px; cursor: pointer;
  font-family: var(--font); text-align: start;
  transition: border-color 0.18s, background 0.18s, transform 0.12s var(--ease);
  animation: rise 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.at-worker:active { transform: scale(0.98); }
.at-worker.on { border-color: var(--primary); background: var(--primary-soft); }
.at-w-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.at-w-name { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-w-load { font-size: 11.5px; color: var(--text-muted); }
.at-sign-tick { flex-shrink: 0; font-size: 15px; color: var(--line); transition: color 0.18s; }
.at-worker.on .at-sign-tick { color: var(--primary); }
.at-w-av {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 16px;
}

.at-chip.on { border-color: var(--primary); background: var(--primary); color: #fff; }

.at-prios { display: flex; gap: 8px; }
.at-prio {
  flex: 1; border: 1.5px solid var(--line); background: var(--card-bg); color: var(--text-muted);
  font-family: var(--font); font-weight: 700; font-size: 12.5px;
  padding: 11px 6px; border-radius: 14px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: border-color 0.18s, background 0.18s, color 0.18s, transform 0.12s var(--ease);
}
.at-prio i { font-size: 13px; }
.at-prio:active { transform: scale(0.96); }
.at-prio.on { color: #fff; }
.at-p-normal.on { background: var(--primary); border-color: var(--primary); }
.at-p-high.on   { background: #d97706; border-color: #d97706; }
.at-p-urgent.on { background: #e5484d; border-color: #e5484d; }


@media (prefers-reduced-motion: reduce) { .at-sign, .at-worker { animation: none; } }

/* ===== משימות בתוך מסך השלט ===== */
.sign-tasks-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sign-add-task { margin-inline-start: 0; padding: 8px 12px; font-size: 12px; border-radius: 12px; }
.sign-add-task i { font-size: 11px; }
.sign-task-list { display: flex; flex-direction: column; }
/* פתיחה/סגירה בלי למדוד גובה ב-JS: grid עם שורה 0fr→1fr */
.sign-task-more {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.sign-task-more.collapsed { grid-template-rows: 0fr; }
.sign-task-more > .sign-task-list { min-height: 0; overflow: hidden; }
.sign-task-row {
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  padding: 11px 2px; border-bottom: 1px solid var(--line);
  transition: background 0.15s, transform 0.12s var(--ease);
}
.sign-task-row:last-child { border-bottom: none; }
.sign-task-row:active { transform: scale(0.99); }
.str-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--line); }
/* str-* ולא status-* — יש כלל גלובלי ‎.status-pending‎ לתגי סטטוס שצובע רקע */
.sign-task-row.str-pending .str-dot { background: var(--warn); }
.sign-task-row.str-active  .str-dot { background: var(--sky); }
.str-body { flex: 1; min-width: 0; }
.str-title { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.str-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.sign-more-btn {
  width: 100%; margin-top: 10px; border: none; cursor: pointer;
  background: var(--soft); color: var(--text-muted);
  font-family: var(--font); font-weight: 700; font-size: 12.5px;
  padding: 9px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: background 0.18s, color 0.18s;
}
.sign-more-btn:active { transform: scale(0.985); }
.sign-more-btn i { transition: transform 0.28s var(--ease); font-size: 11px; }
.sign-more-btn.open i { transform: rotate(180deg); }

/* ===== פקודה חדשה מהעירייה (order) ===== */
.work-order-card {
  background: linear-gradient(120deg, var(--primary), #20D6A2);
  color: #fff; border: none; border-radius: var(--radius);
  padding: 15px 16px; gap: 13px;
  box-shadow: 0 14px 30px -14px rgba(18,196,139,0.7);
  position: relative; overflow: hidden;
}
.work-order-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.22), transparent 65%);
  transform: translateX(-120%);
  animation: sheen 3.6s var(--ease) infinite;
}
.work-order-card.wo-urgent { box-shadow: 0 14px 30px -14px rgba(239,68,68,0.6); }
.wo-icon { width: 44px; height: 44px; border-radius: 13px; background: rgba(255,255,255,0.22); color: #fff; }
.wo-title { font-weight: 800; font-size: 15px; }
.wo-meta { color: rgba(255,255,255,0.92); font-size: 12.5px; }
.wo-action { color: #fff; font-weight: 800; }
.wo-new, .wo-review-tag, .wo-urgent-tag { background: rgba(255,255,255,0.25); color: #fff; }

/* ===== יומן פעילות =====
   דריסות `.cal-*` ירדו עם הלוח החודשי שהן עיצבו. */
.activity-calendar { padding: 14px; }
/* דריסות הלוח החודשי ושורות הפעילות ירדו יחד איתו. מה שהחליף אותן:
   `.mrt-strip` שהיא גם המסננת (לחיצה על "הושלמו 3" מציגה רק אותם),
   ו-`.mrt-list` לשורות. `.act-chips` הנפרדת ירדה כי היא הציגה את אותם
   מספרים בדיוק, בשורה שנייה מתחת. */
.mrt-s-btn {
  border: none; background: none; font-family: var(--font); cursor: pointer;
  border-radius: 10px; padding: 2px 0; transition: background .15s, color .15s;
}
.mrt-s-btn.on { background: var(--primary-soft); }
.mrt-s-btn.on b { color: var(--primary-d); }
.mrt-s-btn:active { transform: scale(0.96); }

/* ===== הגדרות ===== */
.settings-section-title {
  font-size: 13px; font-weight: 800; color: var(--text-muted);
  text-transform: none; letter-spacing: 0;
  padding: 0; margin: 18px 4px 8px; border-bottom: none;
}
.settings-section { margin-bottom: 0; }
.settings-item { gap: 13px; padding: 14px 15px; border-bottom: 1px solid var(--line); }
/* התנתקות — סעיף לעצמו בתחתית ההגדרות, מסומן בלי לצעוק */
.settings-logout .settings-item-icon { background: rgba(229,72,77,0.12); }
.settings-logout .settings-item-icon i { color: #e5484d; }
.settings-logout .settings-item-label { color: #e5484d; }
.settings-item-icon { width: 38px; height: 38px; border-radius: 11px; }
.settings-item-label { font-size: 14px; font-weight: 700; }
.settings-item-sub { font-size: 12px; }
.settings-arrow { color: var(--text-muted); }

/* מתג */
.toggle-switch { width: 44px; height: 26px; }
.toggle-slider { background: var(--line); border-radius: 20px; }
.toggle-slider::before { width: 20px; height: 20px; right: 3px; bottom: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(-18px); }

/* ===== כפתורים ===== */
.btn { font-family: var(--font); font-weight: 800; border-radius: 14px; transition: transform 0.12s var(--ease); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: linear-gradient(120deg, var(--primary), #20D6A2); box-shadow: 0 12px 26px -14px rgba(18,196,139,0.7); }
.btn-primary:hover { background: linear-gradient(120deg, var(--primary-dark), #12C48B); }
.btn-outline { background: var(--card-bg); color: var(--text); border: none; box-shadow: var(--shadow-sm); }
.btn-outline:hover { color: var(--primary); }
/* יעד מגע מינימלי. 6px ריפוד על טקסט של 12px יצא כפתור בגובה 31px. */
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* ===== צ'יפים / חיפוש ===== */
.filter-tab {
  border: 1px solid var(--line); background: var(--card-bg);
  color: var(--text-muted); font-family: var(--font);
  font-weight: 700; font-size: 12.5px; padding: 8px 14px;
  border-radius: 20px; box-shadow: none;
}
.filter-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.search-bar { border: none; border-radius: 14px; box-shadow: var(--shadow-sm); }

/* שורת הכלים של המשימות: כפתור ההוספה בצד ימין, הצ'יפים גוללים לצידו */
/* שורת הסינון: הצ'יפים צמודים לימין, כפתור הבחירה בקצה שמאל.
   "משימה חדשה" עלה לשורת הכותרת, ממול ל"משימות". */
.tasks-toolbar { display: flex; align-items: center; margin-bottom: 14px; }
.tasks-toolbar .filter-tabs { margin-bottom: 0; flex: 1; min-width: 0; justify-content: flex-start; }

/* סרגל הסינון של מאגר השלטים — קומפקטי, נגלל, עם מונה לכל קטגוריה */
.sign-filters { margin-bottom: 14px; }
.sign-filters .filter-tab { display: inline-flex; align-items: center; gap: 6px; }
.ft-n {
  font-size: 10.5px; font-weight: 800; line-height: 1;
  padding: 3px 6px; border-radius: 20px;
  background: var(--soft); color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  transition: background 0.18s, color 0.18s;
}
.filter-tab.active .ft-n { background: rgba(255,255,255,0.28); color: #fff; }
/* קטגוריה ריקה נשארת נראית אבל לא מזמינה לחיצה */
.filter-tab.ft-empty { opacity: 0.45; }

/* ארבעת שבבי המשימות חייבים להיכנס למסך ביחד — הם הניווט הראשי של
   המסך, ו"הושלם" שנחתך באמצע המילה נראה שבור ולא כמו רמז לגלול.
   הצמצום כאן בלבד; במאגר השלטים יש שמונה שבבים והם גוללים בכוונה. */
#m-tasks .filter-tabs { gap: 6px; }
#m-tasks .filter-tabs .filter-tab { padding-inline: 10px; font-size: 12px; }
#m-tasks .filter-tabs .ft-n { padding: 2px 5px; }
.search-bar input { font-family: var(--font); font-size: 16px; }

/* ===== ניווט תחתון ===== */
.nav-item { font-family: var(--font); font-weight: 700; font-size: 10.5px; gap: 3px; padding: 8px 4px calc(8px + env(safe-area-inset-bottom)); }
.nav-item i { font-size: 16px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 9px; }
.nav-item.active i { background: var(--primary-soft); }
.bottom-nav-worker .nav-item.active i { background: rgba(14,165,233,0.15); }
.bottom-nav { box-shadow: none; border-top: 1px solid var(--line); }

/* ===== דארק — התאמות לעיצוב החדש ===== */
body.dark-mode .p-scard,
body.dark-mode .work-order-card { border-color: transparent; }
body.dark-mode .filter-tab { background: var(--card-bg); color: var(--text-muted); border-color: var(--line); }
body.dark-mode .search-bar { background: var(--card-bg); border-color: transparent; }
body.dark-mode .search-bar input { color: var(--text); }
body.dark-mode .settings-item:active { background: var(--soft); }
body.dark-mode .tnum { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .card-list > *, #crew-now > *, #attention-list > *, #workers-list > *,
  .p-scard, .task-card, .activity-day-detail { animation: none !important; }
  .work-order-card::after, .ptitle-action::after { animation: none; opacity: 0; }
}

/* ===== צ'אט ===== */
#screen-inbox { display: flex; flex-direction: column; }
.chat-page { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.chat-page.hidden { display: none; }
#inbox-listpage { padding: calc(14px + env(safe-area-inset-top)) 0 0; }
#inbox-listpage > .ptitle { padding-inline: 16px; }
#chat-thread { padding: calc(14px + env(safe-area-inset-top)) 0 0; }
.chat-thread-head { padding: 0 16px; margin-bottom: 10px; }

.chat-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 0 16px 90px; }
.chat-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  border: none; background: var(--card-bg); box-shadow: var(--shadow-sm);
  border-radius: 17px; padding: 12px 13px; cursor: pointer;
  font-family: var(--font); color: var(--text); text-align: start;
  transition: transform 0.12s var(--ease);
  animation: rise 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.chat-row:active { transform: scale(0.985); }
.chat-av {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 19px;
}
.chat-row-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-row-top, .chat-row-bot { display: flex; align-items: center; gap: 8px; }
.chat-name { font-weight: 800; font-size: 14.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-when { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.chat-prev { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-prev-empty { font-style: italic; opacity: 0.7; }
.chat-row.has-unread .chat-prev { color: var(--text); font-weight: 700; }
.chat-badge {
  flex-shrink: 0; min-width: 20px; height: 20px; border-radius: 10px; padding: 0 6px;
  background: var(--primary); color: #fff; font-size: 11px; font-weight: 800;
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
}
.chat-role { font-size: 10.5px; color: var(--text-muted); font-weight: 700; }

.chat-messages {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 4px 16px 12px; display: flex; flex-direction: column; gap: 3px;
}
.chat-loading { text-align: center; padding: 30px; color: var(--text-muted); }
.chat-empty { margin: auto; text-align: center; color: var(--text-muted); padding: 30px; }
.chat-empty i { font-size: 34px; opacity: 0.35; display: block; margin-bottom: 12px; }
.chat-empty p { font-weight: 700; font-size: 14px; }
.chat-empty span { font-size: 12.5px; }
.chat-day {
  align-self: center; margin: 12px 0 8px;
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  background: var(--soft); padding: 4px 12px; border-radius: 20px;
}
.chat-msg { display: flex; max-width: 82%; animation: rise 0.26s cubic-bezier(0.16, 1, 0.3, 1) both; }
/* ב-RTL ההודעות שלי בצד שמאל והנכנסות בימין, כמו בוואטסאפ בעברית */
.chat-msg.mine { align-self: flex-end; }
.chat-msg.theirs { align-self: flex-start; }
.chat-bubble { padding: 9px 13px 6px; border-radius: 18px; box-shadow: var(--shadow-sm); }
.chat-msg.mine .chat-bubble { background: var(--primary); color: #fff; border-end-end-radius: 6px; }
.chat-msg.theirs .chat-bubble { background: var(--card-bg); color: var(--text); border-end-start-radius: 6px; }
.chat-text { font-size: 14px; line-height: 1.5; word-break: break-word; }
.chat-meta {
  display: flex; align-items: center; gap: 5px; justify-content: flex-end;
  font-size: 10px; margin-top: 3px; opacity: 0.75;
}
.chat-msg.mine .chat-meta { color: rgba(255,255,255,0.9); }
.chat-msg.theirs .chat-meta { color: var(--text-muted); }

.chat-composer {
  flex-shrink: 0; display: flex; align-items: flex-end; gap: 9px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--line);
}
.chat-composer textarea {
  flex: 1; min-width: 0; resize: none; max-height: 120px;
  border: 1.5px solid transparent; background: var(--soft); color: var(--text);
  border-radius: 20px; padding: 11px 15px; font-size: 16px; font-family: var(--font);
  outline: none; line-height: 1.4;
  transition: border-color 0.16s, background 0.16s;
}
.chat-composer textarea:focus { border-color: var(--primary); background: var(--card-bg); }
.chat-send {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  border: none; cursor: pointer; background: var(--primary); color: #fff; font-size: 16px;
  display: grid; place-items: center;
  transition: transform 0.12s var(--ease);
}
.chat-send:active { transform: scale(0.9); }

body.dark-mode .chat-composer { background: rgba(22,36,30,0.88); }
@media (prefers-reduced-transparency: reduce) {
  .chat-composer { background: var(--card-bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) { .chat-row, .chat-msg { animation: none; } }

/* ===== דיווח מהשטח ===== */
.inc-form { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px; }
.inc-cats { display: flex; flex-wrap: wrap; gap: 7px; }
.inc-cat {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid var(--line); background: var(--card-bg); color: var(--text-muted);
  font-family: var(--font); font-weight: 700; font-size: 12.5px;
  padding: 9px 13px; min-height: 44px; border-radius: 22px; cursor: pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s, transform 0.12s var(--ease);
}
.inc-cat i { font-size: 12px; }
.inc-cat:active { transform: scale(0.95); }
.inc-cat.on { border-color: var(--primary); background: var(--primary); color: #fff; }

.inc-sign {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 1.5px solid var(--line); background: var(--soft); color: var(--text);
  border-radius: 14px; padding: 12px 13px; cursor: pointer;
  font-family: var(--font); font-size: 13.5px; font-weight: 700; text-align: start;
  transition: border-color 0.18s, transform 0.12s var(--ease);
}
.inc-sign:active { transform: scale(0.98); }
.inc-sign > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inc-sign i:last-child { color: var(--text-muted); font-size: 12px; }

.inc-row {
  display: flex; align-items: center; gap: 11px;
  background: var(--card-bg); border-radius: 15px; box-shadow: var(--shadow-sm);
  padding: 11px 12px;
  animation: rise 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.inc-row-ic {
  width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 14px;
  background: var(--soft); color: var(--text-muted);
}
.inc-row-ic.sev-urgent { background: rgba(229,72,77,0.14); color: #e5484d; }
.inc-row-ic.sev-normal { background: rgba(245,158,11,0.16); color: #c9871a; }
.inc-row-b { flex: 1; min-width: 0; }
.inc-row-t { font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inc-row-m { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inc-status {
  flex-shrink: 0; font-size: 10.5px; font-weight: 800;
  padding: 3px 9px; border-radius: 20px;
}
.inc-st-open        { background: rgba(245,158,11,0.16); color: #c9871a; }
.inc-st-in_progress { background: rgba(56,189,248,0.16); color: #1f9fcc; }
.inc-st-resolved    { background: var(--primary-soft); color: var(--primary-d); }
@media (prefers-reduced-motion: reduce) { .inc-row { animation: none; } }

/* ===== פירוט דיווח אצל המנהל ===== */
.inc-head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.inc-head-b { flex: 1; min-width: 0; }
.inc-head-t { font-weight: 800; font-size: 15px; }
.inc-head-m { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.inc-desc {
  background: var(--soft2); border-radius: 13px; padding: 12px 13px;
  font-size: 13.5px; line-height: 1.55; margin-bottom: 10px; white-space: pre-wrap;
}
.inc-photo {
  width: 100%; border-radius: 14px; margin-top: 10px; cursor: pointer;
  max-height: 260px; object-fit: cover; display: block;
}
.inc-link { cursor: pointer; transition: transform 0.12s var(--ease); }
.inc-link:active { transform: scale(0.99); }
.inc-card { border-inline-start: 3px solid #e5484d; }
.at-prio.inc-sbtn-open.on        { background: #d97706; border-color: #d97706; }
.at-prio.inc-sbtn-in_progress.on { background: var(--sky); border-color: var(--sky); }
.at-prio.inc-sbtn-resolved.on    { background: var(--primary); border-color: var(--primary); }

/* דיווחים מהשטח בכרטיס השלט של העירייה */
.muni-inc { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.muni-inc-row {
  display: flex; align-items: center; gap: 8px;
  background: rgba(229,72,77,0.08); border-radius: 11px; padding: 7px 10px;
  font-size: 12px;
}
.muni-inc-st {
  flex-shrink: 0; font-size: 10px; font-weight: 800;
  background: rgba(229,72,77,0.16); color: #c81e25; padding: 2px 8px; border-radius: 20px;
}

/* אייקון Waze בכרטיס פרטי השלט/המשימה — אייקון בצבע האפליקציה, בלי טקסט */
.waze-btn { color: var(--primary); }
.waze-btn:hover { color: var(--primary-dark); }
/* חץ "פתח משימה" בשורת דיווח שכבר יש עליה משימת קבלן */
.mcd-go { color: var(--text-muted); font-size: 13px; flex-shrink: 0; margin-inline-start: 2px; }

.muni-work-row.open > i { color: var(--warning); }

/* ===== ONBOARDING ===== */
.onb {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px calc(20px + env(safe-area-inset-right)) 20px calc(20px + env(safe-area-inset-left));
  background: rgba(14, 26, 21, 0.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: fade 0.25s ease both;
}
.onb.hidden { display: none; }
.onb-card {
  position: relative;
  background: var(--card-bg); border-radius: 26px;
  width: 100%; max-width: 400px; padding: 26px 22px 20px;
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.55);
  animation: rise 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
  max-height: 88vh; display: flex; flex-direction: column;
}
.onb-skip {
  position: absolute; top: 14px; inset-inline-end: 16px;
  border: none; background: none; cursor: pointer;
  color: var(--text-muted); font-family: var(--font); font-weight: 700; font-size: 12.5px;
  padding: 6px 8px; border-radius: 9px;
}
.onb-skip.hidden { display: none; }
.onb-body { flex: 1; min-height: 0; overflow-y: auto; }
.onb-in { animation: asInFwd 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.onb-hero { text-align: center; margin: 6px 0 14px; }
.onb-ill { width: 110px; height: 96px; }
.onb-check {
  width: 72px; height: 72px; margin: 10px auto; border-radius: 50%;
  background: var(--primary); color: #fff; font-size: 30px;
  display: grid; place-items: center;
  animation: stampIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.onb-title { font-size: 22px; font-weight: 800; text-align: center; margin: 0 0 8px; letter-spacing: -0.015em; }
.onb-text { font-size: 13.5px; color: var(--text-muted); text-align: center; line-height: 1.6; margin-bottom: 16px; }
.onb-note { font-size: 12px; color: var(--text-muted); text-align: center; margin-top: 10px; min-height: 18px; }

.onb-list { display: flex; flex-direction: column; gap: 8px; }
.onb-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--soft2); border-radius: 15px; padding: 12px 13px;
}
.onb-item-ic {
  width: 38px; height: 38px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 15px;
  background: var(--card-bg); color: var(--text-muted); box-shadow: var(--shadow-sm);
}
.onb-item.ok .onb-item-ic { background: var(--primary); color: #fff; }
.onb-item-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.onb-item-t { font-weight: 800; font-size: 13.5px; }
.onb-item-s { font-size: 11.5px; color: var(--text-muted); }

.onb-dots { display: flex; justify-content: center; gap: 6px; margin: 16px 0 14px; }
.onb-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--line);
  transition: width 0.28s var(--ease), background 0.28s;
}
.onb-dot.on { width: 20px; border-radius: 4px; background: var(--primary); }
.onb-actions { display: flex; gap: 10px; }
.onb-actions .btn { flex: 1; padding: 14px; border-radius: 14px; font-size: 14.5px; }
.onb-actions .btn.hidden { display: none; }

@media (prefers-reduced-transparency: reduce) {
  .onb { background: rgba(14,26,21,0.85); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .onb, .onb-card, .onb-in, .onb-check { animation: none; }
}

/* ===== יומן פעולות ===== */
.aud-row {
  display: flex; align-items: center; gap: 11px;
  background: var(--card-bg); border-radius: 14px; box-shadow: var(--shadow-sm);
  padding: 10px 12px;
  animation: rise 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.aud-ic {
  width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 13px;
  background: var(--soft); color: var(--text-muted);
}
.aud-task     { background: var(--primary-soft); color: var(--primary-d); }
.aud-sign     { background: rgba(56,189,248,0.16); color: #1f9fcc; }
.aud-incident { background: rgba(229,72,77,0.12); color: #e5484d; }
.aud-batch    { background: rgba(22,163,74,0.14); color: #16a34a; }
.aud-chat     { background: rgba(167,139,250,0.18); color: #7c5cd6; }
.aud-auth     { background: rgba(148,163,184,0.2); color: #64748b; }
.aud-data     { background: rgba(245,158,11,0.16); color: #c9871a; }
.aud-b { flex: 1; min-width: 0; }
.aud-t { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aud-m { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#audit-filters { margin-bottom: 12px; }
@media (prefers-reduced-motion: reduce) { .aud-row { animation: none; } }

/* הודעה שלא הגיעה לשרת. קודם היא נראתה זהה לחלוטין להודעה שנשלחה,
   עם וי ליד הזמן — והשולח היה בטוח שהיא התקבלה. */
.chat-msg.failed .chat-bubble {
  border: 1.5px solid #ef4444;
  background: rgba(239, 68, 68, .08);
  cursor: pointer;
}
.chat-failed {
  color: #ef4444; font-weight: 600; font-size: 11px;
  display: inline-flex; align-items: center; gap: 4px;
}
.chat-msg.failed:active .chat-bubble { transform: scale(0.985); }
body.dark-mode .chat-msg.failed .chat-bubble { background: rgba(239, 68, 68, .14); }

/* בורר הפאה בדיווח מהשטח. הפאה קובעת אם ייפתחו משימה אחת או שתיים. */
.inc-sides { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.inc-sides .as-lbl { width: 100%; margin: 0 0 2px; }
.inc-side {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 8px 14px; border-radius: 12px;
  border: 1.5px solid var(--border); background: var(--card-bg);
  font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s var(--ease);
}
.inc-side.on { border-color: var(--primary); background: rgba(18,196,139,.10); color: var(--primary-d); }
.inc-side:active { transform: scale(0.97); }
/* הוי. בלי הכלל הזה הוא יורש את `color: var(--text)` של השבב ומצייר
   עיגול כמעט שחור ב-14px — הדבר הכי רועש בטופס, ונקרא כתבליט ולא
   כתיבת סימון. אצל אשף המשימה זה לא קרה רק כי שם צבע השבב מעומעם. */
.inc-side i { font-size: 12px; color: var(--text-muted); opacity: .45; }
.inc-side.on i { color: var(--primary); opacity: 1; }
/* "כל השלט" הוא ברירת המחדל ופעולת הניקוי, לא אות חמישית — שורה משלו.
   האותיות מתחלקות בשורה שאחריה במקום ש-D תיפול לבד לשורה שלישית. */
.inc-side-all { width: 100%; justify-content: center; }
.inc-sides .inc-side:not(.inc-side-all) { flex: 1 1 0; min-width: 62px; justify-content: center; }

/* ===== כרטיס הצד: הפגם, המשימה שנפתחה בשבילו, והסטטוס =====
   קודם הכרטיס הציג מונה ("משימה אחת פעילה") וכרטיס נפרד בתחתית הדף חזר
   על אותו מידע. עכשיו העבודה יושבת ליד הפגם שהיא סוגרת. */
/* רק מה שפתוח יושב כאן. מה שנסגר ירד מהכרטיס לגמרי — הוא היה נשאר עם
   קו חוצה מעליו ותופס מקום על משהו שאין מה לעשות איתו. לכן אין יותר
   מצב `.fixed` בשורה, ואיתו ירדו גם `.sd-done` ו-`.sd-city-done`. */
.side-defect { display: flex; align-items: center; gap: 7px; }
.side-defect .sd-text { flex: 1; min-width: 0; }

/* ===== דיווח של העירייה, בתוך כרטיס הצד =====
   הוא לא קטגוריה נפרדת אלא עוד דבר שפתוח על הצד, ולכן הוא באותה
   רשימה כמו הפגמים. מה שמבדיל אותו זה מי אמר אותו: אייקון מוסד ופס
   אינדיגו דק. פס ולא רקע מלא — שורה צבועה בתוך רשימה קוראת כמו שגיאה. */
/* `.side-defect` הוא אדום — ככה נראה פגם שהקבלן מצא. בקשה מהלקוח אינה
   תקלה ואסור שתצעק אותו דבר; אינדיגו אומר "מישהו מבחוץ מחכה לתשובה". */
.side-defect.city {
  color: #4338ca;
  background: rgba(99,102,241,.07);
  border: 1px solid rgba(99,102,241,.20);
  border-inline-start: 3px solid #6366f1;
  align-items: flex-start;
  padding: 9px 10px;
}
.side-defect.city > i { color: #6366f1; margin-top: 2px; }
/* הטקסט של הלקוח בשורה משלו, ומי אמר ומתי מתחת בשקט. הכל על שורה
   אחת יצא דחוס בטלפון, והמילים הן הדבר היחיד שבאמת צריך לקרוא. */
.side-defect .sd-body { flex: 1; min-width: 0; }
.side-defect .sd-body .sd-text { font-size: 12.5px; font-weight: 700; line-height: 1.4; }
.side-defect.city .sd-tag { margin-top: 1px; }

/* מי עובד על זה עכשיו, בתוך שורת הדיווח עצמה. קודם זו הייתה שורת משימה
   נפרדת מתחת ובה אותה כותרת בדיוק — הדיווח "לדים שרופים" ומתחתיו משימה
   בשם "לדים שרופים". תקלה אחת, שני כרטיסים. */
/* השורה פותחת את המשימה בנגיעה. זו הפעולה היחידה ששורת המשימה נתנה
   ושורת הדיווח לא, ובלעדיה הקיפול היה סוגר את הדרך אליה. */
.side-defect.sd-link { width: 100%; font-family: var(--font); font-size: 12px;
  text-align: start; cursor: pointer; transition: transform .12s var(--ease); }
.side-defect.sd-link:active { transform: scale(0.985); }


/* אותו דבר במסך העובד. הוא זה שנוסע לשלט — הוא חייב לדעת מה הלקוח
   ביקש, ולא רק מה שהקבלן רשם לעצמו. */
.w-defect.w-city { color: #4338ca; background: rgba(99,102,241,.09);
  border-inline-start: 3px solid #6366f1; }
.w-defect.w-city i { color: #6366f1; }

.side-tasks { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.side-task-row {
  display: flex; align-items: center; gap: 9px; width: 100%;
  min-height: 44px; padding: 8px 10px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--card-bg);
  font-family: var(--font); text-align: start; cursor: pointer;
  transition: border-color 0.15s, transform 0.12s var(--ease);
}
.side-task-row:active { transform: scale(0.985); }
.side-task-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.side-task-t { font-size: 13px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-task-m { font-size: 11.5px; color: var(--text-muted); }

.side-ok-btn { font-size: 11.5px; }

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

/* ===== הדיווחים אצל העירייה =====
   כאן זה הפוך: הדיווח הוא של מי שמסתכל, והתשובה של הקבלן היא החדשות.
   לכן התשובה מקבלת את הבלוק המודגש והדיווח נשאר שורה. */
.muni-city-defects { margin-top: 9px; display: flex; flex-direction: column; gap: 7px; }
/* ===== שורה אחת, ובאמת אחת =====
   ב-375px יש לשורה 282px. האייקון, תגי הצד, "באיחור", תג המצב והחץ
   לקחו 221 מהם, והטקסט של העירייה נדחס ל-61 — אז הוא נשבר לשורה שנייה,
   "כל השלט" נשבר באמצע לשלישית, ובועת "תמונה" הוסיפה רביעית.
   מה שירד: תג "כל השלט" (ברירת מחדל), התאריך בתוך תג המצב, והמילה
   "תמונה". מה שנשאר סוגר את השורה, וכותרת ארוכה נחתכת ב-… . */
.mcd-row { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  background: var(--soft2); border-radius: 12px; padding: 9px 11px; }
.mcd-row > i { color: #d97706; flex-shrink: 0; }
.mcd-row.mcd-done > i { color: var(--primary); }
.mcd-body { flex: 1; min-width: 0; }
.mcd-text { display: flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 13px; font-weight: 700; color: var(--text); }
/* הכותרת היא היחידה שמוותרת על מקום — כל השאר ברוחב קבוע. */
.mcd-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcd-side { font-size: 10.5px; font-weight: 700; color: var(--text-muted);
  background: var(--card-bg); border-radius: 20px; padding: 1px 7px;
  white-space: nowrap; flex-shrink: 0; }
/* "כל השלט" הוא מצב ולא אות, ולכן הוא לא מתחזה לתג צד. */
.mcd-side-all { background: var(--soft); }
.mcd-reply { font-size: 12px; color: var(--text); background: var(--card-bg);
  border-radius: 9px; padding: 6px 9px; margin-top: 6px; }
.mcd-reply i { color: var(--primary); margin-inline-end: 4px; }
.mcd-tag { font-size: 10.5px; font-weight: 700; border-radius: 20px; padding: 2px 8px;
  flex-shrink: 0; background: var(--card-bg); color: var(--text-muted); }
.mcd-open .mcd-tag { background: rgba(245,158,11,.16); color: #b45309; }
/* האיחור מחליף את "נרשם · תאריך" — **רק אותו**.
   "נרשם" הוא חותמת זמן, והאיחור אומר עליה את מה שחשוב. "בטיפול" הוא
   מצב: דיווח יכול להיות גם בטיפול וגם באיחור, ואלה שתי עובדות נפרדות
   שהעירייה צריכה לראות יחד — הקבלן לקח את זה, והוא מאחר. לכן ההסתרה
   תחומה ל-`.mcd-open` בלבד.

   שני התגים ב-HTML תמיד; האיחור מוסתר עד ש-`is-late` נכון, ואז הוא
   מסתיר את חברו דרך `~`. בורר אחים ולא `:has()` — תוצאה זהה, תמיכה
   רחבה יותר.

   ה-`.mcd-row` בבורר הצבע הוא בשביל המשקל: בלעדיו `.mcd-open .mcd-tag`
   שווה לו בספציפיות, והכתום היה מנצח לפי סדר הקובץ. */
.mcd-tag-late { display: none; }
.mcd-row .mcd-tag-late.is-late { display: inline-block;
  background: rgba(239,68,68,.14); color: #dc2626; }
.mcd-open .mcd-tag-late.is-late ~ .mcd-tag-idle { display: none; }
body.dark-mode .mcd-row .mcd-tag-late.is-late { background: rgba(239,68,68,.22); color: #fca5a5; }
.mcd-in_work .mcd-tag { background: rgba(56,189,248,.16); color: #0369a1; }
.mcd-done .mcd-tag { background: rgba(18,196,139,.14); color: var(--primary-d); }
/* הכפתור תופס את המקום של חץ `.mcd-go`, ויעד המגע יושב מסביבו.
   קודם הוא היה קופסה של 44×44 והאייקון צף במרכזה — 18 פיקסל אוויר מכל
   צד, בזמן שהחץ בשורת "בטיפול" הוא 8 פיקסל. שתי השורות נראו כאילו הן
   מיושרות אחרת, ושורת "נרשם" גם יצאה גבוהה יותר בגלל גובה הקופסה.

   ההרחבה א-סימטרית בכוונה: החוצה ולמעלה/למטה בנדיבות, ולכיוון תג
   הסטטוס כמעט בכלל לא. זה בדיוק הבאג שההערה הקודמת כאן תיעדה — אזור
   מגע שגלש לתוך התג, ולחיצה על "נרשם" מחקה את הדיווח. */
.mcd-x { position: relative; width: 13px; height: 13px; flex-shrink: 0;
  margin-inline-start: 2px; padding: 0;
  display: grid; place-items: center;
  border: 0; background: none; color: var(--text-muted); cursor: pointer;
  font-size: 13px; line-height: 1; }
/* נמדד 27 פיקסל רוחב לאזור הלחיצה — פחות מ-44 על פעולה שאין ממנה
   חזרה. ההרחבה גדלה החוצה (לכיוון קצה המסך) ובזהירות פנימה: 7 פיקסל
   נשארים בתוך ה-`gap` של השורה ולא נוגעים בתג הסטטוס — זה בדיוק הבאג
   שההערה למעלה מתעדת. */
.mcd-x::after { content: ''; position: absolute;
  inset-block: -14px; inset-inline-end: -24px; inset-inline-start: -7px; }
.mcd-x:active { transform: scale(0.92); }

/* אישור מתוך רשימת המשימות. מלא-רוחב כדי שיהיה יעד מגע ברור בסוף
   הכרטיס, ולא כפתור קטן שמתחרה בחץ הפתיחה. */

/* בקשה פתוחה מהעירייה. נבדלת ויזואלית מפגם שהקבלן רשם לעצמו — זה
   הלקוח שמדבר, וזו הסיבה שהשלט מופיע ברשימת הטיפול. */
.req-card { border-inline-start: 3px solid #6366f1; }
.req-text { font-size: 14px; font-weight: 600; color: var(--text); margin: 2px 0 10px; }
.req-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.req-when { font-size: 12px; color: var(--text-muted); }

/* ===== מסך העירייה: מצב המאגר, זמן תגובה, צוות ומוזנחים =====
   הטבעת היא SVG ידני ולא ספריית גרפים — טבעת אחת שצריכה להתנהג ב-RTL
   ובמצב כהה לא מצדיקה 200KB על סלולר. */
.inv-card h4 { margin-bottom: 12px; }
.inv-body { display: flex; align-items: center; gap: 16px; }
.inv-ring-wrap { position: relative; width: 128px; height: 128px; flex-shrink: 0; }
.inv-ring { width: 128px; height: 128px; transform: rotate(-90deg); }
.inv-arc { transition: stroke-dasharray 0.5s var(--ease); }
.inv-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none;
}
.inv-center b { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.inv-center span { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

.inv-legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inv-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  /* 34 העלה את אזור המגע ל-38 בפועל — מתחת ל-44. הטבעת שלצידן ממילא
     גבוהה מהן, ולכן ההגבהה לא מזיזה את הפריסה. */
  min-height: 44px; padding: 4px 6px; border: none; background: none;
  border-radius: 9px; cursor: pointer; font-family: var(--font);
  transition: background 0.15s;
}
.inv-row:active { background: var(--soft, var(--border)); }
.inv-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.inv-label { flex: 1; min-width: 0; font-size: 13px; color: var(--text); text-align: start;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-num { font-size: 14px; font-weight: 800; }
.inv-go { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }

.inv-foot {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
  font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 6px;
}
.inv-foot.warn { color: #c9871a; }
.inv-foot.ok { color: var(--primary-d); }

/* זמן תגובה */
/* כאן ישבו `.rt-row`, `.rt-total`, `.rt-lbl` ו-`.rt-val` — שלוש שורות
   של "תווית מימין, מספר משמאל" בשפה של המערכת. אוריון קרא אותן ואמר
   שהוא לא מבין מה הן אומרות, וצדק: "עד פתיחת משימה" מניח שהקורא יודע
   מה זו משימה אצל הקבלן. במקומן מספר אחד ומשפט. */
.rt-foot { margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.rt-empty { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

/* ===== ניווט שבועות בזמן התגובה =====
   מדד שנמדד ליום בודד הוא כמעט תמיד ריק, וגם כשלא — מספר בודד לא אומר
   כלום בלי מה שהיה לפניו. השבוע הוא היחידה הקטנה ביותר שאפשר להשוות בה,
   וההשוואה היא הערך: לא "ארבע שעות" אלא "ארבע, ושבוע שעבר זה לקח שש". */
.rt-nav { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; }
.rt-title { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 800; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* הכרטיס צר יותר מ-`.info-card` הרגיל: העמוד לא נגלל, וכל 4px כאן
   יוצאים מהרשימה שמעליו. */
.rt-card { padding: 12px 14px; }
/* מספר אחד גדול שעונה על השאלה, ומתחתיו המשפט שמפרק אותו.
   שלוש קופסאות שוות ערך גרמו לקרוא אותן כשלוש מדידות שמשווים ביניהן,
   בזמן שהשתיים הקטנות הן פשוט ההסבר לגדולה. */
.rt-big {
  font-size: 30px; font-weight: 800; color: var(--primary-d);
  line-height: 1.1; text-align: center; margin-top: 2px;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.rt-cap { font-size: 12.5px; color: var(--text-muted); text-align: center; margin-top: 2px; }
.rt-cap.rt-open { color: var(--text); font-weight: 600; padding: 6px 0; }
.rt-parts {
  font-size: 11.5px; color: var(--text-muted); text-align: center;
  margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line);
}
/* המגמה במילים ולא באחוזים: "23%" מחייב לחשב אחורה מה היה. */
.rt-trend {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin-top: 5px; font-size: 11.5px; font-weight: 700;
}
.rt-trend i { font-size: 9px; }
.rt-trend.rt-better { color: var(--primary-d); }
.rt-trend.rt-worse { color: #dc2626; }
.rt-card .rt-foot { margin-top: 5px; font-size: 11px; text-align: center; }
/* תווית ולא פקד: היא מסבירה למה המספר שמתחתיה שבועי בזמן שהיום נבחר
   בסרגל. `min-width` ירד איתו החצים שהוא קיזז. */
.rt-week { font-size: 11.5px; font-weight: 700; color: var(--text-muted);
  white-space: nowrap; flex-shrink: 0; }
/* `.rt-arrow` ירדה. שני חצים בתוך הכרטיס היו בקר זמן שני, שהתחרה בסרגל
   הימים שמעליו — היה אפשר לבחור 13.8 למעלה ולראות כאן שבוע אחר לגמרי. */
/* `.rt-delta` ו-`.rt-same` ירדו יחד עם שלושת התאים. המגמה היום היא
   שורת מילים אחת (`.rt-trend`) ולא שבב אחוזים ליד כל מספר. */

/* ===== סרגל הימים =====
   החליף את "היום / החודש / השנה". שלושת הכפתורים ענו על שאלה כללית מדי:
   הפקח רוצה לדעת מה קרה ביום מסוים. הנקודה מתחת לכל יום היא כבר הדוח —
   ירוקה אם נסגרה בו עבודה, כתומה אם היה בו מה לעשות ולא נסגר. */
/* שבוע אחד, בלי גלילה. שבעה ימים מתחלקים ברוחב שנשאר אחרי החצים, ולכן
   הם נכנסים בכל טלפון בלי שאף יום ייצא מהמסך. הגלילה האופקית שהייתה כאן
   ירדה: היא תנועה שקל לפספס, והיום הנבחר היה יכול לשבת מחוצה לה. */
.muni-days {
  display: flex; align-items: stretch; gap: 4px;
  padding: 2px 0 8px; margin-bottom: 10px;
}
/* בלי רקע ובלי מסגרת: החצים הם פקד ניווט ולא יום, ומסגרת זהה לזו של
   הימים הפכה אותם לשני כרטיסים ריקים בקצוות השורה. */
/* 22 פיקסל רוחב, בקצה המסך, ששם האגודל הכי פחות מדויק. הציור נשאר
   צר כדי לא לגזול מתאי הימים; אזור המגע מורחב הצידה. */
.mday-nav {
  position: relative;
  flex: 0 0 22px; border: none; background: none; padding: 0;
  color: var(--text-muted); font-size: 13px;
  cursor: pointer; display: grid; place-items: center;
  transition: color .15s, opacity .15s;
}
.mday-nav::after { content: ''; position: absolute; inset-block: 0; inset-inline: -11px; }
.mday-nav:active { color: var(--primary); }
.mday-nav:disabled { opacity: .25; cursor: default; }

/* מעבר שבוע: הימים נכנסים מהצד שלחצו עליו. בלי זה השבוע מתחלף במקום
   והכיוון אבד — התאריכים משתנים ואי אפשר לדעת אם הלכת אחורה או קדימה.
   רק הימים זזים, לא החצים: פקד שקופץ יחד עם התוכן שלו מרגיש רופף.
   14px, כי התנועה כאן היא סימן כיוון ולא מסע. */
@keyframes wkFromEnd   { from { transform: translateX(14px); }  to { transform: none; } }
@keyframes wkFromStart { from { transform: translateX(-14px); } to { transform: none; } }
.muni-days.wk-back .mday { animation: wkFromEnd 200ms var(--ease-out); }
.muni-days.wk-fwd  .mday { animation: wkFromStart 200ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .muni-days.wk-back .mday, .muni-days.wk-fwd .mday { animation: none; }
}
.mday {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 0 6px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--card-bg); font-family: var(--font); cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .12s var(--ease);
}
.mday-dow { font-size: 10px; font-weight: 700; color: var(--text-muted);
  white-space: nowrap; max-width: 100%; overflow: hidden; }
.mday-num { font-size: 15px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; }
/* הנקודה היא הדבר היחיד בסרגל שנושא מידע ולא רק תאריך, ולכן היא
   נכנסת בקנה מידה ולא מופיעה משום מקום. */
.mday-dot { width: 5px; height: 5px; border-radius: 50%; background: transparent;
  transition: background .2s, transform .2s var(--ease); }
.mday-dot.has, .mday-dot.open { animation: dotPop 240ms var(--ease); }
@keyframes dotPop { from { transform: scale(0.4); } to { transform: none; } }
.mday-dot.has { background: var(--primary); }
.mday-dot.open { background: var(--warn); }
/* לחיצה על יום. `--ease` ולא `--ease-out`: כאן ה-bounce הקל נכון, הוא
   מה שגורם לכפתור להרגיש שהוא נלחץ וחזר. */
.mday:active { transform: scale(0.96); }
.mday.on { background: var(--primary); border-color: var(--primary); }
.mday.on .mday-dow, .mday.on .mday-num { color: #fff; }
.mday.on .mday-dot.has, .mday.on .mday-dot.open { background: rgba(255,255,255,.9); }

/* ===== עמוד שלא נגלל =====
   החלטה של אוריון, והיא זו שקובעת את כל הגדלים בעמוד הדוח: מה שלא נכנס
   במסך אחד לא נכנס בכלל. הגוף מתכווץ, הסרגל והכפתורים מקובעים. */
.muni-noscroll { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 78px; }
.muni-noscroll .muni-days { flex-shrink: 0; }
.muni-report-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 10px; }
.muni-report-body > div:empty { display: none; }
.muni-noscroll .muni-report-actions { flex-shrink: 0; margin-top: 12px; }

/* ===== דף השלט של העירייה =====
   בנוי על המחלקות של הכרטיס אצל הקבלן (`.p-stag`, `.sign-side-badge`)
   כדי ששני המסכים יישארו באותה שפה. מה שייחודי כאן הוא מה שאין: אין
   בורר תאורה, אין עריכת פאות, אין "פתח משימה". העירייה קוראת ומדווחת.

   הסדר הוא סדר הקריאה: מה השלט הזה, מה אני ביקשתי, מה ראו בשטח, מה
   נעשה בפועל, ומה אני יכולה לעשות עכשיו. הפעולה בסוף כי מדווחים אחרי
   שקוראים, לא לפני. */
.msp-head .p-stag { margin-inline-start: auto; }

/* הכתובת והניווט על שורה אחת. הם אותו דבר — איפה השלט — ושתי שורות
   נפרדות הפכו את הניווט לפעולה שמתחרה בדיווח. */

.msp-side.bad { background: rgba(239,68,68,.09); color: var(--danger); }
.msp-side.bad i { font-size: 11px; }


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

/* ===== פעולות עריכת שלט (בעלות העירייה) =====
   שורת הפעולה מתחת לכרטיסים: כפתור "דווח על השלט" ברוחב מלא. המחיקה
   עברה לאייקון הפח שבכותרת (ptitle), כמו אצל הקבלן. */
.msp-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 12px 0 4px;
}
.msp-actions .btn { flex: 1 1 auto; }

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

   `animation` ולא `transition`, כי ה-DOM נבנה מחדש בכל בחירה ואין ממה
   לעבור. זה גם מה שמייתר את שאלת ההפרעה: כל לחיצה יוצרת אלמנט חדש
   שמתחיל מאפס, ולא מפריעה לתנועה שרצה.

   8px ולא 20: התוכן זז מספיק כדי שהעין תתפוס שמשהו התחלף, ולא מספיק
   כדי שיצטרכו לחכות לו. */
/* **`transform` בלבד, בלי `opacity`.** זו לא העדפה, זו רשת ביטחון.
   הדפדפן מקפיא אנימציות בכל דף שאינו נראה — אימתתי: `visibilityState:
   hidden` ואז `requestAnimationFrame` לא רץ והאנימציה נתקעת בפריים
   הראשון שלה. באייפון זה קורה בכל מעבר לאפליקציה אחרת וחזרה.

   אנימציה שמתחילה מ-`opacity: 0` ונתקעת משאירה אלמנט בלתי נראה. אנימציה
   שמתחילה מ-`translateY` ונתקעת משאירה אותו במקום קצת אחר — נראה, קריא,
   ומיישר את עצמו ברגע שהדף חוזר. אותה תנועה בדיוק, בלי מצב שבו התוכן
   פשוט לא שם. */
@keyframes dayIn {
  from { transform: translateY(8px); }
  to   { transform: none; }
}
/* **בלי `fill-mode`, ובלי stagger.** ניסיתי `both` והוא החזיר בדיוק את
   הבאג שהפיל את מסכי ההגדרות היום: `both` כולל `backwards`, שמחיל את
   מצב ה-`from` לפני שהאנימציה רצה — וכל אלמנט שהאנימציה שלו לא התחילה
   נשאר שקוף. תפסתי עשרה כאלה תקועים על 0 אחרי שישה מעברי שבוע.

   ה-stagger נפל איתו, כי הוא דורש `backwards` בהגדרה: בלעדיו האלמנט
   גלוי בזמן ההשהיה ואז קופץ לשקוף כשהתור שלו מגיע, וזה הבזק שרואים.
   רצף של 28ms הוא נחמדות; שורה בלתי נראית היא באג. */
.mrt-list, .mrt-empty, .mrt-strip { animation: dayIn 180ms var(--ease-out); }
.mrt-row { animation: dayIn 200ms var(--ease-out); }

/* המספרים בשורה העליונה סופרים במקום לקפוץ. `countUp` כבר קיים ועושה
   את זה במסכי הקבלן, וזה אותו רגע בדיוק. */
.mrt-s b { transition: color .2s; }

@media (prefers-reduced-motion: reduce) {
  .mrt-list, .mrt-empty, .mrt-strip, .mrt-row { animation: none; }
}

/* ===== רשימת היום =====
   שלושת המספרים הגדולים ענו על "כמה" בזמן שהשאלה היא "אילו". הם נשארו
   בשורה אחת דקה, והרשימה של השלטים עצמם תפסה את המקום שהם גזלו.
   היא זו שגוללת בתוך עצמה — העמוד לא זז. */
/* ===== שורת מעבר בבית =====
   "דוח מצב וייצוא" השתמשה ב-`.settings-item`, ושם `opacity: 0` הוא מצב
   ההתחלה של אנימציה. בבית האנימציה לא רצה כי המסך מוסתר בזמן שהיא
   אמורה להתחיל, והשורה פשוט לא הופיעה — לפעמים כן, לפי מה שקרה קודם.
   מחלקה משלה, בלי אנימציה, בלי תלות במסך אחר. */
.muni-link {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 62px; padding: 12px 16px; margin-bottom: 14px;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  font-family: var(--font); text-align: start; cursor: pointer;
  transition: transform .12s var(--ease);
}
.muni-link:active { transform: scale(0.99); }
.muni-link-ic {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 16px;
  background: var(--primary-soft); color: var(--primary-d);
}
.muni-link-b { flex: 1; min-width: 0; }
.muni-link-t { display: block; font-size: 14.5px; font-weight: 700; color: var(--text); }
.muni-link-s { display: block; font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.muni-link-go { color: var(--text-muted); font-size: 13px; flex-shrink: 0; }

.mrt-strip {
  display: flex; gap: 8px; padding: 8px 12px; margin-bottom: 8px;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
}
.mrt-s { flex: 1; text-align: center; font-size: 11.5px; color: var(--text-muted); }
.mrt-s b { display: block; font-size: 18px; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums; line-height: 1.15; }
.mrt-s:first-child b { color: var(--primary-d); }

.mrt-list {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 4px 10px;
}
.mrt-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  min-height: 44px; padding: 6px 2px; border: none; background: none;
  border-bottom: 1px solid var(--line); font-family: var(--font);
  text-align: start; cursor: pointer;
}
.mrt-row:last-child { border-bottom: none; }
.mrt-row:active { background: var(--soft); }
.mrt-num { font-size: 13px; font-weight: 800; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.mrt-t { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrt-who { font-size: 11px; color: var(--text-muted); flex-shrink: 0;
  max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrt-tag { font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 20px; flex-shrink: 0; }
.mrt-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; color: var(--text-muted); background: var(--card-bg);
  border: 1px solid var(--border); border-radius: 12px; padding: 20px;
}
.mrt-empty i { font-size: 26px; color: var(--primary); opacity: .5; }
.mrt-empty p { margin: 0; font-size: 14px; font-weight: 700; color: var(--text); }
.mrt-empty span { font-size: 12px; }

/* הדוח תופס את מה שנשאר, זמן התגובה בגובה התוכן שלו. */
#muni-report { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#muni-response { flex-shrink: 0; }


/* מוזנחים */
.neg-count { font-size: 11.5px; font-weight: 800; background: rgba(245,158,11,0.16);
  color: #c9871a; border-radius: 20px; padding: 2px 9px; margin-inline-start: 6px; }
.neg-row {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px;
  padding: 6px 4px; border: none; background: none; cursor: pointer;
  font-family: var(--font); text-align: start; border-bottom: 1px solid var(--border);
}
.neg-row:last-of-type { border-bottom: none; }
.neg-row:active { background: var(--soft, var(--border)); }
.neg-num { font-size: 13.5px; font-weight: 700; flex-shrink: 0; }
.neg-addr { flex: 1; min-width: 0; font-size: 12px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.neg-when { font-size: 11.5px; color: #c9871a; font-weight: 600; flex-shrink: 0; }
.neg-more { font-size: 12px; color: var(--text-muted); padding-top: 8px; }

/* כאן ישב כלל שהפיל את הטבעת מעל המקרא מתחת ל-400px, כלומר בכל אייפון.
   הוא עלה 144px בבלוק הראשון של המסך, ולא היה צריך אותו: ברוחב 390 נשארים
   326 אחרי הריפוד של הדף והכרטיס, פחות טבעת 128 ורווח 16 — 182 למקרא,
   ואחרי נקודה, מספר, חץ וריפוד נשארים לתווית כ-106. "בבדיקת הקבלן",
   התווית הארוכה ביותר, היא כ-78 ב-13px. נכנס בשורה. */

/* ===== פופאפ שלט על מפת העירייה =====
   נקודה על מפה היא הדרך הכי טבעית להגיע לשלט. הפופאפ נבנה בשפה של
   שאר הכרטיסים במערכת ולא בסגנונות inline, ומראה שורת מצב אחת בכל
   רגע — לא את כל האפשרויות ביחד. */
.leaflet-popup-content-wrapper {
  border-radius: 14px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.35);
  background: var(--card-bg); color: var(--text);
}
/* `direction: rtl` לבד לא מספיק: ה-CSS של Leaflet קובע `text-align: left`
   על העטיפה, וכל שורת טקסט בפופאפ נצמדה לשמאל בתוך קופסה שזורמת ימינה —
   הכותרת (flex) ימין, הכתובת והמצב שמאל. נמדד 4.9.2026 בפופאפ של השלט
   ושל העובד. `start` הולך עם הכיוון, כאן ובכל שפה. */
.leaflet-popup-content { margin: 12px 14px; font-family: var(--font); direction: rtl; text-align: start; }
.leaflet-popup-content-wrapper { text-align: start; }
.leaflet-popup-tip { background: var(--card-bg); }
/* Leaflet מקבע את ה-X ל-right:0. בפופאפ RTL זה בדיוק המקום שבו מתחיל
   "שלט 104", והכפתור רכב על המספר. מעבירים אותו לצד השני. */
.leaflet-container a.leaflet-popup-close-button {
  color: var(--text-muted); font-size: 20px;
  right: auto; left: 0; padding: 6px 0 0 8px;
}
/* אריחי OSM לבנים בוהקים מתחת לכרטיסייה כהה — פקח בשטח בלילה מקבל
   פנס מול הפנים. היפוך CSS, בלי ספק שירות נוסף. */
body.dark-mode .leaflet-tile { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9); }

.mp-head { display: flex; align-items: center; gap: 7px; padding-inline-end: 18px; }
.mp-num { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.mp-type { font-size: 10.5px; font-weight: 700; color: var(--text-muted);
  background: var(--soft, var(--border)); border-radius: 20px; padding: 2px 8px; }
.mp-addr { font-size: 12px; color: var(--text-muted); margin-top: 3px; line-height: 1.4; }
.mp-state { display: flex; align-items: center; gap: 6px; margin-top: 7px;
  font-size: 12.5px; font-weight: 700; }
.mp-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* שורת ההסבר — רק אחת, לפי סדר הדחיפות */
.mp-note {
  display: flex; align-items: flex-start; gap: 6px; margin-top: 8px;
  padding: 7px 9px; border-radius: 10px; font-size: 12px; line-height: 1.45;
}
.mp-note i { margin-top: 2px; flex-shrink: 0; }
.mp-req  { background: rgba(99,102,241,.12);  color: #4338ca; }
.mp-work { background: rgba(56,189,248,.14);  color: #0369a1; }
.mp-wait { background: rgba(8,145,178,.12);   color: #0e7490; }

.mp-last { font-size: 11.5px; color: var(--text-muted); margin-top: 8px; }

.mp-acts { display: flex; gap: 7px; margin-top: 10px; }
.mp-btn {
  flex: 1; min-height: 40px; display: inline-flex; align-items: center;
  justify-content: center; gap: 5px; cursor: pointer;
  border: 1px solid var(--border); background: var(--card-bg); color: var(--text);
  border-radius: 10px; font-family: var(--font); font-size: 12.5px; font-weight: 700;
  transition: transform 0.12s var(--ease), filter 0.15s;
}
.mp-btn:active { transform: scale(0.97); }
.mp-primary { border: none; background: var(--primary); color: #fff; }
.mp-primary:active { filter: brightness(0.95); }

body.dark-mode .leaflet-popup-content-wrapper,
body.dark-mode .leaflet-popup-tip { background: #1e293b; color: #e2e8f0; }
/* ===== משימה חדשה: "מה ביקשו" ו"עוד הגדרות" =====

   שני הבלוקים שהחליפו את שני השלבים הראשונים של האשף. הראשון הוא
   ההקשר להחלטה — על מה המשימה, על אילו פאות, מה כתבה העירייה ועד מתי.
   הוא **קריאה בלבד** ולכן הוא נראה כמו ציטוט ולא כמו טופס: אין מסגרת
   של שדה, אין מצב פוקוס, ואין שום דבר שנראה לחיץ. */
.at-brief {
  background: var(--soft2); border-radius: 14px;
  padding: 11px 12px; margin-bottom: 16px;
  border-inline-start: 3px solid var(--primary);
}
.at-brief.hidden { display: none; }
.at-brief .atb-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 14px;
}
.at-brief .atb-head b { font-weight: 800; }
.atb-side {
  font-size: 10.5px; font-weight: 700; color: var(--text-muted);
  background: var(--card-bg); border-radius: 20px; padding: 1px 7px;
}
/* "כל השלט" הוא מצב ולא אות, ולכן הוא לא מתחזה לתג פאה — אותה הבחנה
   בדיוק כמו ב-`.mcd-side-all` אצל העירייה. */
.atb-side-all { background: var(--soft); }
.atb-addr { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.atb-reports { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
/* קו שיער ולא רק רקע: ב-mode כהה `--card-bg` כמעט זהה ל-`--soft2` של
   הבלוק שמסביב, והשורה נבלעה בו. */
.atb-report {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 12.5px; color: var(--text);
  background: var(--card-bg); border: 1px solid var(--line);
  border-radius: 9px; padding: 6px 9px;
}
.atb-report i { color: var(--indigo, #6366f1); font-size: 11px; margin-top: 2px; flex-shrink: 0; }


/* משימה על שלט שהעירייה מחקה. אזהרה ולא כרטיס: אין מה להציג עליו, וכל
   מה שצריך לומר הוא שלא כדאי לנסוע לפני שמבררים. */
/* יושבת בתוך `.w-sign`, ולכן היא בלוק ולא כרטיס משלה. */
.w-sign-gone {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.3);
  border-radius: 12px; padding: 11px 12px;
}
.w-sign-gone > i { color: #b45309; font-size: 16px; margin-top: 2px; flex-shrink: 0; }
.w-gone-t { font-size: 14px; font-weight: 800; color: var(--text); }
.w-gone-s { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
body.dark-mode .w-sign-gone { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.28); }
body.dark-mode .w-sign-gone > i { color: #fbbf24; }

/* תגית המצב בכותרת דף השלט. `.ptitle > div` תופס `flex: 1`, ולכן היא
   נוחתת מעצמה בקצה לצד אייקון המחיקה — בלי מרווח אוטומטי משלה.
   `flex-shrink: 0` כי הכותרת מתכווצת לפניה: מספר שלט ארוך יחתוך את עצמו
   ולא יבלע את המצב. */
.ptitle-stag { flex-shrink: 0; font-size: 11.5px; }

/* ===== דף השלט של הקבלן: דיווחים ופאות =====

   שני הכרטיסים שהחליפו את הקלף המתהפך.

   שורות הדיווח עצמן הן `.mcd-*` — אותן שורות שהעירייה רואה. אין כאן
   שפה חדשה בכוונה: הקבלן פוגש את הצורה הזאת בכל מקום אחר באפליקציה,
   והיא כבר עברה סבב עיצוב. */
.sign-reports-foot { margin-top: 12px; }
.sign-open-task { width: 100%; }

/* פאות השלט: שורה לכל פאה, כולן גלויות. הפאה היא הקשר ולא יחידת עבודה,
   ולכן אין כאן כפתורים ואין מצב :active — שורה שנראית לחיצה ואינה כזו
   גרועה יותר משורה שנראית כמו טקסט. */
.sf-list { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.sf-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 11px; background: var(--soft2);
  font-size: 13px;
}
/* פאה שיש עליה משהו מקבלת רקע חם, ולא מסגרת צבעונית: בשורה קצרה
   מסגרת מושכת יותר תשומת לב מהטקסט עצמו. */
.sf-open { background: rgba(245,158,11,.10); }
.sf-txt { flex: 1; min-width: 0; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-open .sf-txt { color: var(--text); font-weight: 700; }
/* `.p-dot` מגיע מכרטיס השלט עם `position: absolute` — כאן הוא בזרימה. */
.sf-row .p-dot { position: static; flex-shrink: 0; width: 10px; height: 10px; border-width: 0; }
body.dark-mode .sf-open { background: rgba(245,158,11,.14); }

/* קבוצת עבודה בכרטיס הדיווחים. אין כאן כרטיס בתוך כרטיס: קו מפריד
   ומרווח מפרידים בין הקבוצות, וזה מספיק. הכותרת מופיעה רק כשיש יותר
   מסוג עבודה אחד — אחרת היא חוזרת על השורה היחידה שמתחתיה. */
.sr-group + .sr-group { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.sr-head { font-size: 12.5px; font-weight: 800; color: var(--text-muted); margin: 2px 2px 8px; }

/* ===== "מה ביקשו" בתדריך העובד =====
   הדיווח הוא של השלט, לא של הפאה. קודם הוא רונדר בתוך כל פאה שהוא נוגע
   לה, ולכן דיווח על "כל השלט" בקוביה הופיע ארבע פעמים מילה במילה. כאן
   הוא מופיע פעם אחת, עם תגי הפאות שהעירייה סימנה. */
.w-city-ask {
  background: rgba(99,102,241,.08); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 12px;
}
.w-ask-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 800; color: #4f46e5; margin-bottom: 7px;
}
.w-ask-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 13.5px; font-weight: 700; padding: 5px 0;
}
.w-ask-row + .w-ask-row { border-top: 1px solid rgba(99,102,241,.16); }
.w-ask-t { flex: 1; min-width: 0; }
/* "כל השלט" הוא מצב ולא אות, ולכן הוא לא מתחזה לתג פאה. */
.w-ask-all { width: auto; padding: 1px 8px; font-size: 10.5px; }
body.dark-mode .w-city-ask { background: rgba(99,102,241,.16); }
body.dark-mode .w-ask-head { color: #a5b4fc; }

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

   למה לא אמבר, כמו שהיה: באפליקציה הזאת אמבר כבר אומר "דורש תשומת לב"
   (`.sf-open`, `.w-sign-gone`). הנחיה שגרתית לבושה בצבע אזהרה מכרסמת
   בדיוק במשמעות הזו, ואחרי כמה משימות מפסיקים להאמין לצבע.

   הרקע הוא שקיפות ולא צבע אטום: אותו בלוק מופיע גם על כרטיס לבן אצל
   העובד וגם על רקע המסך של העירייה. `--soft2` אטום היה נעלם על השני. */
.note-from {
  background: rgba(18,196,139,.09); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 12px;
}
/* לא `--primary-d`: הירוק של המותג על משטח בהיר נותן יחס ניגודיות 3.0,
   וזו כותרת של 12.5px — כלומר מתחת לרף גם של טקסט גדול. הכהייה מביאה
   ל-5.1 ולא משנה את הזהות. הכחול של העירייה עומד ב-5.9 כמו שהוא. */
.note-from-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 800; color: #0B7A57; margin-bottom: 7px;
}
.note-from-body {
  font-size: 13.5px; font-weight: 600; line-height: 1.55;
  color: var(--text); white-space: pre-wrap;
}
/* במשימה על שלט שנמחק ההנחיות הן הבלוק היחיד בגוף, והמרווח התחתון
   הופך לרווח מת מתחת לכרטיס. */
.note-from:last-child { margin-bottom: 0; }
body.dark-mode .note-from { background: rgba(18,196,139,.13); }
body.dark-mode .note-from-head { color: #6ee7b7; }
body.dark-mode .note-from-body { color: #e6f2ec; }

/* ===== משימה שנעולה =====
   כל עוד יש משימה פתוחה, שאר הכרטיסים לא נפתחים. הכרטיס עומם ומפסיק
   להגיב למגע — כרטיס שנראה רגיל ולא עושה כלום כשלוחצים עליו נקרא
   כתקלה, ולכן הוא חייב להיראות כבוי. */
.w-tcard-locked {
  /* `opacity` לבד לא הספיקה: כרטיס לבן בשקיפות 45% על רקע ירקרק-בהיר
     נשאר כמעט לבן, והכרטיס הנעול נראה בדיוק כמו הפעיל. `grayscale`
     היא זו שעושה את העבודה — היא מכבה את פס הצבע בצד, את תג הסטטוס
     ואת אותיות הפאות, וזה מה שהעין קוראת כ"לא פעיל". */
  filter: grayscale(1);
  opacity: .5;
  pointer-events: none;
  box-shadow: none;
}

/* ===================================================================
   דיווח על שלט — הגיליון של העירייה
   ===================================================================
   הבעיה שזה מחליף: כל התוכן ישב ב-`.modal-card` אחד עם `overflow-y:auto`,
   731 פיקסל בתוך מסך של 812. כפתור "שלח" היה מתחת לקיפול לפני שהמקלדת
   נפתחה, וכל סקשן נראה בדיוק כמו שכנו — "מה קרה", ההחלטה היחידה שחייבים,
   קיבל אותו משקל ויזואלי כמו "תמונה לקבלן, לא חובה".
   ------------------------------------------------------------------- */

#modal-muni-note .mn-sheet {
  display: flex;
  flex-direction: column;
  /* גובה קבוע ולא `max-height` בלבד: כשהמקלדת עולה הדפדפן מקטין את
     ה-viewport, והגיליון מתכווץ איתו במקום להידחף מחוץ למסך. */
  max-height: min(88vh, 760px);
  padding: 0;
  overflow: hidden;
}

/* ---------- זהות השלט ---------- */
#modal-muni-note .mn-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
#modal-muni-note .mn-thumb {
  width: 48px; height: 48px; flex: 0 0 48px;
  border-radius: 14px;
  background: var(--soft) center/cover no-repeat;
  display: grid; place-items: center;
  color: #fff; font-size: 18px;
  box-shadow: inset 0 0 0 1px rgba(23,50,41,.06);
}
#modal-muni-note .mn-id { min-width: 0; }
#modal-muni-note .mn-head h3 {
  margin: 0; font-size: 19px; font-weight: 700;
  color: var(--text); letter-spacing: -.01em;
}
#modal-muni-note .mn-where {
  margin: 2px 0 0; font-size: 13px; color: var(--text-muted);
  /* כתובת ארוכה נחתכת ולא שוברת את הכותרת לשתי שורות. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- הגוף, החלק היחיד שנגלל ---------- */
#modal-muni-note .mn-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* הריפוד התחתון הוא מה שמפריד את הסקשן האחרון מהתחתית הנעוצה. בלעדיו
     "אילו צדדים" נגמר בדיוק על הקו ונראה חתוך במקום נגלל. */
  padding: 16px 20px 26px;
  display: flex; flex-direction: column; gap: 18px;
}
#modal-muni-note .mn-block { display: flex; flex-direction: column; gap: 8px; }
#modal-muni-note .mn-lbl {
  font-size: 13px; font-weight: 700; color: var(--text);
  margin: 0; letter-spacing: -.005em;
}
/* רשות נראה כמו רשות. חובה נראה כמו חובה. */
#modal-muni-note .mn-opt-lbl { font-weight: 600; color: var(--text-muted); font-size: 12px; }
#modal-muni-note .mn-primary .mn-lbl { font-size: 15px; }

/* ---------- הקטגוריות: רשת אחידה ---------- */
#modal-muni-note .mn-cats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
#modal-muni-note .mn-cats .inc-cat {
  display: flex; align-items: center; gap: 8px;
  width: 100%; margin: 0;
  min-height: 48px;              /* יעד מגע אמיתי, לא 38 */
  padding: 10px 12px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font: inherit; font-size: 14px; font-weight: 600;
  text-align: start;
  transition: background .18s var(--ease-out), border-color .18s var(--ease-out),
              color .18s var(--ease-out), transform .12s var(--ease);
}
#modal-muni-note .mn-cats .inc-cat i {
  font-size: 15px; color: var(--text-muted); flex: 0 0 auto;
  transition: color .18s var(--ease-out);
}
#modal-muni-note .mn-cats .inc-cat span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#modal-muni-note .mn-cats .inc-cat:active { transform: scale(.97); }
#modal-muni-note .mn-cats .inc-cat.on {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-dark);
}
#modal-muni-note .mn-cats .inc-cat.on i { color: var(--primary-dark); }
/* "אחר" תופס את השורה האחרונה במלואה במקום להישאר לבד בחצי ריק. */
#modal-muni-note .mn-cats .inc-cat:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---------- טקסט ---------- */
#modal-muni-note .mn-body textarea {
  width: 100%; resize: none;
  padding: 12px 14px;
  border: 1.5px solid var(--border); border-radius: 14px;
  background: var(--soft2); color: var(--text);
  font: inherit; font-size: 15px; line-height: 1.45;
  transition: border-color .18s var(--ease-out), background .18s var(--ease-out);
}
#modal-muni-note .mn-body textarea::placeholder { color: var(--text-muted); }
#modal-muni-note .mn-body textarea:focus {
  outline: none; border-color: var(--primary); background: var(--surface);
}

/* ---------- תמונה ומועד, זה לצד זה ---------- */
#modal-muni-note .mn-row { display: flex; gap: 12px; align-items: flex-start; }
#modal-muni-note .mn-half { flex: 1 1 0; min-width: 0; }
#modal-muni-note .mn-photo {
  /* היה 230 פיקסל של קווקו ריק — האלמנט הגדול ביותר במסך, לשדה הכי
     פחות חשוב. רצועה נמוכה אומרת "אפשר להוסיף" בלי לתבוע את המסך,
     והיא גדלה רק כשיש תמונה אמיתית להציג. */
  height: 56px; margin: 0;
  border-radius: 14px;
  display: grid; place-items: center;
  transition: height .22s var(--ease-out);
}
#modal-muni-note .mn-photo:has(img:not(.hidden)) { height: 132px; }
#modal-muni-note .mn-photo #muni-note-photo-placeholder {
  display: flex; align-items: center; gap: 8px;
  color: var(--text-muted); font-size: 13px; font-weight: 600;
}
#modal-muni-note .mn-photo #muni-note-photo-placeholder i { font-size: 15px; }
#modal-muni-note .mn-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
#modal-muni-note .muni-due-input {
  /* רוחב מלא, ובלי `direction: ltr` כפוי. בחצי רוחב Chrome ויתר על
     ה-AM/PM והציג 23:59 כ-"11:59" — שעה שאי אפשר לקרוא. פקד נייטיב
     מקבל את המקום שהוא צריך ומצייר את הפורמט של המכשיר. */
  width: 100%; box-sizing: border-box;
  min-height: 52px;
  padding: 12px 14px;
  border: 1.5px solid var(--border); border-radius: 14px;
  background: var(--soft2); color: var(--text);
  font: inherit; font-size: 15px; font-weight: 600;
}
#modal-muni-note .muni-due-input:focus { outline: none; border-color: var(--primary); background: var(--surface); }

/* ---------- הצדדים ---------- */
#modal-muni-note .mn-sides { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

/* ---------- התחתית הנעוצה ---------- */
#modal-muni-note .mn-foot {
  flex: 0 0 auto;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  background: var(--surface);
  /* צל כלפי מעלה: אומר שיש עוד תוכן מתחת לקו, בלי קו נוסף. */
  box-shadow: 0 -10px 24px -22px rgba(16,90,66,.5);
}
#modal-muni-note .mn-outcome {
  margin: 0 0 10px; font-size: 12.5px; line-height: 1.4;
  color: var(--text-muted); text-align: start;
}
#modal-muni-note .mn-actions { display: flex; gap: 10px; margin: 0; }
#modal-muni-note .mn-actions .btn { flex: 1 1 auto; min-height: 48px; }
#modal-muni-note .mn-actions .btn-outline { flex: 0 0 34%; }

/* מסך נמוך מאוד — הגיליון עדיין נושם, והתחתית עדיין נעוצה. */
@media (max-height: 680px) {
  #modal-muni-note .mn-sheet { max-height: 94vh; }
  #modal-muni-note .mn-body { gap: 14px; padding-top: 12px; }
  #modal-muni-note .mn-photo { height: 52px; }
  #modal-muni-note .muni-due-input { min-height: 46px; }
}


/* מועד היעד על כרטיס המשימה של העובד — נשען על אותם צבעים של due-chip */
.w-due { color: var(--text-secondary, #6b7280); }
.w-due-late { color: #dc2626; font-weight: 600; }
body.dark-mode .w-due-late { color: #fca5a5; }

/* ההנחיות בדף המשימה של הקבלן הן אותו בלוק שהעירייה רואה, רק שאצלו
   הוא ניתן לעריכה — ולכן הכותרת מחזיקה גם את העיפרון. */
.note-from-edit .note-from-head { justify-content: space-between; }
.note-from-edit .note-from-head > span { display: flex; align-items: center; gap: 7px; }
.note-from-edit .pencil-btn { flex-shrink: 0; }


/* כפתור עריכת פרטי השלט בכותרת הכרטיס. הסגנון היה מוטבע ב-JS, ולכן
   לא היה איפה להרחיב את אזור הלחיצה — הוא נמדד 29 פיקסל רוחב. */
.sign-edit-btn {
  position: relative;
  font-size: 11px; padding: 4px 9px; flex-shrink: 0;
}
.sign-edit-btn::after { content: ''; position: absolute; inset-block: -6px; inset-inline: -8px; }


/* שורת `info-item` שיש עליה `onclick` היא יעד לחיצה לכל דבר — שורת
   השלט בדף המשימה נמדדה 35 פיקסל גובה. */
.info-item[onclick] { min-height: 44px; }

/* כותרת המשימה בכרטיס נחתכה על שורה אחת ("להחליף פרסומת אחת לאחרת").
   זה המסך שהקבלן עובד ממנו, והכותרת היא מה שמזהה את העבודה. שתי שורות
   מוסיפות שורה אחת לגובה ומחזירות את המשמעות. */
.tc-name {
  min-width: 0; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== מסך הבית של העירייה =====
   לפי הסקיצה: מד חצי-טבעת עם המספר הכולל, מקרא לפי מצב, ושני מסלולי
   כרטיסים אופקיים. נבנה בסטייג'ינג 5.9.2026 והועבר לפרודקשן. ראש המסך
   הוא `.dash-greet` של האפליקציה וסרגל הניווט הוא הרגיל, שלושה טאבים.

   הצבעים הם של המערכת: `MAP_COLORS` לפלחים, למקרא ולתגים, אותם
   צבעים שבמפה ובמאגר. אין כאן צבע שלא קיים במסך אחר. */

.mh-chip:focus-visible, .mh-card:focus-visible {
  outline: 2px solid var(--primary-d); outline-offset: 2px;
}

/* --- המד: קשת אחת, פלח לכל מצב, כל קצה מעוגל, המספר יושב בתוך הקשת.
   האורכים ביחידות המשתמש של ה-SVG (הקשת היא π·88 ≈ 276). הפלחים נכנסים
   בסריקה מימין לשמאל (transition על dasharray עם השהיה לפי המיקום),
   פעם אחת, בכניסה. --- */
/* רוחב מקסימלי: על טאבלט המד לא צף במרכז כרטיס של 736px עם צ'יפ ברוחב מלא */
.mh-gauge-card { padding: 18px 16px 14px; margin: 0 auto 20px; max-width: 480px; }
.mh-gauge-wrap { position: relative; width: min(100%, 236px); margin: 0 auto; }
.mh-gauge { width: 100%; height: auto; display: block; overflow: visible; }
/* בלי מסלול רקע מאחורי הפלחים (אוריון, 5.9): הקשת היא רק הפלחים. */
/* הסריקה בכניסה רצה ב-Web Animations מ-`_sweepGauge`; בלי JS הפלחים
   פשוט מלאים. */
.mh-gauge-center {
  position: absolute; inset-inline: 0; bottom: 2px; text-align: center; line-height: 1;
  pointer-events: none;
}
.mh-gauge-num {
  font-size: 42px; font-weight: 800; letter-spacing: -0.025em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mh-gauge-cap { font-size: 12.5px; font-weight: 700; color: var(--text-muted); margin-top: 5px; }

/* המקרא: רשת שנשברת לשורות ולא מסלול שמסתיר. על 375px שניים בשורה,
   כל אחד יעד מגע של 44. בלי כרטיס מאחורי הטקסט (אוריון, 5.9): נקודה,
   מספר, תווית. הלחיצה עדיין פותחת את הרשימה. */
/* שתי עמודות קבועות, ממורכזות כגוש. flex-wrap נתן שלושה בשורה ואחד
   יתום מתחת במסך רחב יותר (האייפון של אוריון). */
.mh-chips {
  display: grid; grid-template-columns: repeat(2, max-content);
  justify-content: center; column-gap: 32px; margin-top: 14px;
}
.mh-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px;
  border-radius: 10px; border: none; background: none;
  font-family: var(--font); font-size: 13px; color: var(--text); cursor: pointer;
  text-align: start; transition: transform 0.12s var(--ease), background 0.15s;
}
.mh-chip:active { transform: scale(0.96); background: var(--soft); }
.mh-chip .inv-dot { width: 9px; height: 9px; flex-shrink: 0; }
.mh-chip b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; flex-shrink: 0; }
/* התווית נשברת לשתי שורות ולא נחתכת: "בבדיקת הקבלן" לא נכנס בעמודה של
   150px ליד המספר והאחוז, ו"בבדיקת ה…" לא אומר כלום. */
.mh-chip span:not(.inv-dot) { line-height: 1.15; padding: 6px 0; white-space: nowrap; }



/* --- כותרת מקטע --- */
.mh-sec { margin-top: 4px; }
/* הברכה בשורה אחת ובגודל אחד; שם ארוך נשבר לשתי שורות ולא נחתך */
#muni-home .mh-hi { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: clip; }
/* אם נשבר, נשבר אחרי הפסיק ולא באמצע שם העיר */
#muni-greet-name { white-space: nowrap; }

/* --- מסלול כרטיסים: זולג עד קצה המסך (הריפוד של הדף הוא 16),
   כרטיס אחד מלא ועוד חצי מציצים, כדי שיהיה ברור שאפשר לגלול. --- */
.mh-rail {
  display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px 18px;
  padding: 4px 16px 10px; scroll-padding-inline: 16px;
  scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.mh-rail::-webkit-scrollbar { display: none; }
.mh-card {
  flex: 0 0 auto; width: 156px; height: 178px; scroll-snap-align: start;
  position: relative; overflow: hidden; border: none; padding: 0; cursor: pointer;
  border-radius: var(--r-sm); background: var(--soft) center / cover no-repeat;
  box-shadow: var(--shadow-sm); font-family: var(--font); color: #fff; text-align: start;
  transition: transform 0.12s var(--ease), box-shadow 0.15s;
}
.mh-card:active { transform: scale(0.96); }
.mh-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,30,22,.86) 0%, rgba(12,30,22,.42) 38%, rgba(12,30,22,0) 64%);
}
/* בלי תמונה: אותו גרדיאנט לפי מספר כמו במאגר (`_adGradient`), ואייקון שלט */
.mh-card.mh-card-noimg > i {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 40px; color: rgba(255,255,255,.55);
}
.mh-card-head {
  position: absolute; top: 8px; inset-inline: 8px; z-index: 1;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 4px;
}
.mh-card-num, .mh-card-tag {
  font-size: 11px; font-weight: 800; line-height: 1; padding: 6px 8px; border-radius: 9px;
  background: rgba(255,255,255,.94); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 2px 8px -3px rgba(0,0,0,.35);
}
.mh-card-num { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.mh-card-tag { flex: 0 1 auto; min-width: 0; font-weight: 700; }
/* תג המצב על הכרטיס הוא הבועה של מאגר השלטים (`.p-stag.st-*`), אותו
   גופן, אותו ריפוד, אותם צבעים (אוריון, 5.9). רק הרקע אטום: הגוון
   השקוף של הבועה מחושב על לבן, כי מאחורי הכרטיס יש תמונה ולא כרטיס. */
.mh-card-head .p-stag { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 8px -3px rgba(0,0,0,.35); }
.mh-card-head .p-stag.st-warn { background: #FDEFD8; }
.mh-card-head .p-stag.st-prog { background: #E9EAFD; }
.mh-card-head .p-stag.st-wait { background: #DCF0F4; }
.mh-card-head .p-stag.st-bad  { background: #FEE7E7; }
body.dark-mode .mh-card-head .p-stag.st-warn { background: #3E2F10; }
body.dark-mode .mh-card-head .p-stag.st-prog { background: #2A2A55; }
body.dark-mode .mh-card-head .p-stag.st-wait { background: #123A44; }
body.dark-mode .mh-card-head .p-stag.st-bad  { background: #4A1F1F; }

.mh-card-foot {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 1; padding: 10px 10px 9px;
  font-size: 12.5px; font-weight: 700; line-height: 1.3; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mh-card-foot small {
  display: block; font-size: 11px; font-weight: 600; margin-top: 2px;
  color: rgba(255,255,255,.82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mh-card-foot small b { font-weight: 800; color: #fff; }

/* מצב ריק במסלול: כרטיס אחד ברוחב מלא, בגובה שלא מקפיץ את המסך.
   בתקלות זו החדשה הטובה ונאמרת בשקט, בלי סימני קריאה. */
/* במרכז, אייקון מעל הטקסט: מצב ריק הוא משפט, לא שורת טבלה. */
.mh-empty {
  flex: 1 0 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; min-height: 96px; padding: 18px 16px;
  /* בלי כרטיס מאחורי הטקסט (אוריון, 5.9): משפט על הרקע, לא מלבן. */
  color: var(--text-muted); font-size: 13px; line-height: 1.4;
}
.mh-empty i { font-size: 20px; flex-shrink: 0; color: var(--text-muted); opacity: .8; }
.mh-empty b { display: block; font-size: 15.5px; font-weight: 800; color: var(--text); }
.mh-empty.ok i { color: var(--primary); opacity: 1; }
.mh-empty.ok b { color: var(--primary-d); }

/* שלד עד הסנאפשוט הראשון: המסך לא מכריז "אין שלטים" בזמן שהם בדרך. */
.mh-skel { position: relative; overflow: hidden; background: var(--soft); border-radius: 12px; }
.mh-skel::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: sheen 1.4s ease-in-out infinite;
}
.mh-skel-gauge { height: 118px; width: min(100%, 236px); margin: 0 auto; border-radius: 118px 118px 12px 12px; }
.mh-skel-card { flex: 0 0 auto; width: 156px; height: 178px; border-radius: var(--r-sm); }


body.dark-mode .mh-card-num, body.dark-mode .mh-card-tag { background: rgba(22,36,30,.94); color: #fff; }

body.dark-mode .mh-skel::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }
@media (prefers-reduced-motion: reduce) {
  .mh-skel::after { animation: none; }
}