/* ============================================================
   אתר שיבוצים מדא רמת גן — Stylesheet
   Aesthetic: refined editorial / emergency-medical utilitarian
   Warm paper ground, professional blue accent, Frank Ruhl Libre display.
   Fully RTL. Light + dark mode via [data-theme].
   ============================================================ */

:root {
  --paper:        #f3efe6;
  --paper-2:      #eae3d6;
  --surface:      #fffdf8;
  --surface-2:    #faf6ed;
  --ink:          #211c19;
  --ink-soft:     #5c5349;
  --ink-faint:    #908779;
  --line:         #e2dac9;
  --line-strong:  #d2c8b2;
  --menu-text:    var(--ink);
  --menu-muted:   var(--ink-soft);
  --menu-divider: var(--line);
  --menu-active-text: #fffdf8;

  /* Primary brand accent — professional blue (royal/indigo). */
  --brand:        #1d4ed8;
  --brand-deep:   #1b3aa0;
  --brand-soft:   #e2e8fb;
  --brand-rgb:    29,78,216;

  /* Danger / "cannot" — kept red. Used for destructive actions, lock
     warnings and the "לא יכול" availability status. NOT brand. */
  --danger:       #a8132b;
  --danger-deep:  #7d0e20;
  --danger-soft:  #f7e3e2;
  --danger-rgb:   168,19,43;

  --gold:         #b88a3e;
  --gold-soft:    #f3e9d4;
  --teal:         #2c6b62;

  --ok:           #2c6b3f;
  --ok-soft:      #e2efe2;

  /* Form-control surface — flips to a dark inset in dark mode. */
  --field-bg:     #fff;

  --shadow-sm: 0 1px 2px rgba(33,28,25,.06), 0 2px 8px rgba(33,28,25,.05);
  --shadow-md: 0 6px 24px rgba(33,28,25,.10), 0 2px 6px rgba(33,28,25,.06);
  --shadow-lg: 0 24px 60px rgba(45,20,18,.20);

  --radius:    14px;
  --radius-sm: 9px;
  --display: "Frank Ruhl Libre", Georgia, serif;
  --body: "Rubik", "Segoe UI", system-ui, sans-serif;
}

/* ---------- Dark mode ----------
   Charcoal grounds (not pitch black), soft-grey/white ink, subtle borders.
   Brand blue brightens slightly for pop; pastel status chips stay light so
   they keep their meaning and contrast on dark surfaces. */
html[data-theme="dark"] {
  --paper:        #14171c;
  --paper-2:      #0f1216;
  --surface:      #1d222a;
  --surface-2:    #181d24;
  --ink:          #e9ebee;
  --ink-soft:     #b3b9c2;
  --ink-faint:    #828994;
  --line:         #2c333d;
  --line-strong:  #3b424e;

  --brand:        #3b82f6;
  --brand-deep:   #2563eb;
  --brand-rgb:    59,130,246;

  --field-bg:     #11151a;
  --menu-active-text: #f8fafc;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.40), 0 2px 8px rgba(0,0,0,.30);
  --shadow-md: 0 6px 24px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
}

/* Smooth, fluid mode switching across the structural surfaces. */
body, .topbar, .login-view, .login-card, .calendar-wrap, .day-cell, .day-detail,
.shift-card, .shift-card-head, .table-card, .users-table th, .station-form-card,
.lock-config-card, .avail-card, .avail-row, .avail-opt, .nav-tab,
.field input, .slot select, .slot input, .station-form input, .station-form select,
.lock-form input, .lock-form select, .users-table select, .btn-xs, .theme-toggle,
.users-table td, .users-acct-table td, .users-acct-table th,
.matrix-table thead th, .mx-col-date,
.schedule-grid-table th, .schedule-grid-table td,
.missing-crew-table th, .missing-crew-table td,
.stations-table th, .stations-table td,
.roster-table th, .roster-table td,
.regular-requests-table th, .regular-requests-table td,
.status-badge, .quota-badge, .role-badge, .shift-classification-badge {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

* { box-sizing: border-box; }

html, body {
  min-height: 100%;
  height: auto;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: radial-gradient(circle at 20% 20%, #e0e7ff 0%, #f1f5f9 50%, #e2e8f0 100%) fixed;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[data-theme="dark"] body {
  background: radial-gradient(circle at 20% 20%, #1e1b4b 0%, #0f172a 50%, #020617 100%) fixed;
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; margin: 0; }

button { font-family: inherit; cursor: pointer; }

/* ---------- Buttons ---------- */
.btn {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(165deg, var(--brand), var(--brand-deep));
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { box-shadow: 0 8px 22px rgba(var(--brand-rgb),.30); }
.btn-block { width: 100%; padding: 13px; font-size: 15px; }
.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink-soft);
}
.btn-ghost:hover { background: var(--surface); color: var(--ink); }
.btn-circle {
  width: 38px; height: 38px; padding: 0;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--brand);
  font-size: 22px; line-height: 1;
  display: grid; place-items: center;
}
.btn-circle:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Theme (dark mode) toggle ---------- */
.theme-toggle {
  width: 38px; height: 38px; padding: 0; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--brand);
  box-shadow: var(--shadow-sm);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
}
.theme-toggle:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.theme-toggle:active { transform: translateY(1px); }
.theme-toggle svg { display: block; }
.login-theme-toggle {
  position: absolute; top: 16px; inset-inline-start: 16px; z-index: 2;
}

/* ---------- Notification center (bell + dropdown) ---------- */
.notif { position: relative; flex: none; }
.notif-bell {
  position: relative;
  width: 38px; height: 38px; padding: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--brand);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
}
.notif-bell:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.notif-bell:active { transform: translateY(1px); }
.notif-bell svg { display: block; }
.notif.is-open .notif-bell { background: var(--brand); color: #fff; border-color: var(--brand); }
/* Unread count badge — pinned to the bell's outer top corner. */
.notif-badge {
  position: absolute; top: -3px; inset-inline-end: -3px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px;
  background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--paper);
}
.notif-panel {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0;
  width: min(360px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 60;
  overflow: hidden;
  animation: notif-pop .14s ease;
}
@media (max-width: 767px) {
  .notif { position: static; }
  .notif-panel {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 128px);
    inset-inline: 10px;
    width: auto;
    max-width: none;
    max-height: calc(100dvh - (env(safe-area-inset-top, 0px) + 210px));
    z-index: 980;
  }
  .notif-list { max-height: min(52dvh, 430px); }
}
@keyframes notif-pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.notif-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.notif-title { font-weight: 800; font-size: 15px; }
.notif-markall {
  border: none; background: none; cursor: pointer;
  color: var(--brand); font-size: 12.5px; font-weight: 700; padding: 4px 6px; border-radius: 7px;
}
.notif-markall:hover { background: var(--brand-soft); }
.notif-broadcast { padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.notif-broadcast-input {
  width: 100%; resize: vertical; box-sizing: border-box;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--field-bg); color: var(--ink);
  padding: 8px 10px; font: inherit; font-size: 13px; margin-bottom: 8px;
}
.notif-broadcast-send { font-size: 13px; padding: 8px 12px; }
.notif-list { max-height: 380px; overflow-y: auto; }
.notif-item {
  display: block; width: 100%; text-align: start;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
  border-inline-start: 3px solid transparent;
}
.notif-item:last-child { border-bottom: none; }
.notif-item.is-unread { background: var(--brand-soft); border-inline-start-color: var(--brand); }
[data-theme="dark"] .notif-item.is-unread { background: rgba(var(--brand-rgb), .16); }
.notif-item.is-acknowledged { background: rgba(34, 197, 94, .08); border-inline-start-color: rgba(34, 197, 94, .4); }
.notif-item-title { font-weight: 700; font-size: 13.5px; margin: 0 0 3px; }
/* Publication notifications carry a multi-line shift list ("המשמרות שלך לשבוע
   הקרוב") built with \n separators, so preserve the line breaks. */
.notif-item-msg { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin: 0; white-space: pre-line; }
.notif-item-time { font-size: 11px; color: var(--ink-faint); margin-top: 4px; display: block; }
.notif-ack { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.notif-ack-label { font-size: 12px; color: var(--ink-soft); }
.notif-ack-label.is-acknowledged { color: #15803d; }
.notif-ack-btn {
  width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--brand);
  background: var(--paper); color: var(--brand); font: inherit; font-size: 18px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.notif-ack-btn:hover:not(:disabled) { background: var(--brand); color: #fff; }
.notif-ack-btn.is-acknowledged,
.notif-ack-btn:disabled {
  border-color: rgba(21, 128, 61, .35);
  background: rgba(34, 197, 94, .12);
  color: #15803d;
  opacity: .65;
  cursor: default;
}
.notif-empty { padding: 26px 14px; text-align: center; color: var(--ink-faint); font-size: 13px; }

.admin-notifications-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.admin-notifications-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-notifications-search {
  min-width: min(100%, 320px);
  flex: 1 1 280px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  color: var(--ink);
  padding: 10px 12px;
  font: inherit;
}
.admin-notifications-row { cursor: pointer; }
.admin-notifications-row:hover td { background: var(--brand-soft); }
.admin-notifications-title { font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.admin-notifications-meta { color: var(--ink-soft); font-size: 12px; line-height: 1.45; white-space: pre-line; }
.admin-notifications-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}
.admin-notifications-modal {
  width: min(500px, 90vw);
  max-width: 500px;
  max-height: 90vh;
}
.admin-notifications-modal-body { display: flex; flex-direction: column; gap: 12px; }
.admin-notifications-detail-row,
.admin-notifications-detail-block { display: flex; flex-direction: column; gap: 4px; }
.admin-notifications-detail-row strong,
.admin-notifications-detail-block strong { font-size: 13px; }
.admin-notifications-detail-row span,
.admin-notifications-detail-text { color: var(--ink-soft); white-space: pre-line; line-height: 1.5; }
.admin-notifications-modal .modal-x {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.admin-notifications-modal .modal-x:hover { background: var(--surface-2); color: var(--ink); }
.admin-notifications-rules {
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  overflow: hidden;
}
.admin-notifications-rules-summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  font-weight: 700;
}
.admin-notifications-rules-summary::-webkit-details-marker { display: none; }
.admin-notifications-rules-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 14px 14px;
}
.admin-notifications-rule-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.admin-notifications-rule-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-notifications-rule-text strong { font-size: 13px; }
.admin-notifications-rule-text span { color: var(--ink-soft); font-size: 12px; }
@media (max-width: 768px) {
  #tab-admin-notifications .table-card {
    overflow: visible !important;
  }
  .admin-notifications-cards {
    display: grid;
    gap: 10px;
  }
  .admin-notifications-mobile-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .admin-notifications-mobile-title {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--ink);
  }
  .admin-notifications-mobile-meta {
    display: grid;
    gap: 4px;
    color: var(--ink-soft);
    font-size: 12.5px;
  }
  .admin-notifications-mobile-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--ink-soft);
  }
  .admin-notifications-mobile-view {
    align-self: flex-start;
    min-height: 40px;
    padding-inline: 14px;
  }
  .volunteer-request-table-wrap {
    overflow: visible !important;
  }
  .regular-requests-table {
    min-width: 0;
    width: 100%;
  }
  .regular-requests-table thead {
    display: none;
  }
  .regular-requests-table,
  .regular-requests-table tbody,
  .regular-requests-table tr,
  .regular-requests-table td {
    display: block;
    width: 100%;
  }
  .regular-requests-table tbody {
    display: grid;
    gap: 10px;
    padding: 10px;
  }
  .regular-requests-table tr {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    padding: 12px;
    box-shadow: var(--shadow-sm);
  }
  .regular-requests-table td {
    border: 0 !important;
    padding: 0;
  }
  .regular-requests-table td + td {
    margin-top: 10px;
  }
  .regular-requests-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-soft);
  }
  .regular-requests-actions {
    flex-direction: column;
    gap: 10px;
    margin-top: 2px;
  }
  .regular-requests-actions .btn,
  .regular-requests-actions .btn-trash,
  .vol-req-actions .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
  }
}

/* ============================================================
   LOGIN
   ============================================================ */
/* Session boot gate: while a stored token is being verified the whole auth
   shell (login card, pending landing, forced reset) stays out of the layout and
   only the neutral loader below is painted — see the inline script in index.html. */
.session-boot { display: none; }
html.session-booting .login-view,
html.session-booting .forced-reset-view,
html.session-booting .app-view { display: none !important; }
html.session-booting .session-boot {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 9999;
}
.session-boot__spinner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--brand);
  animation: session-boot-spin .8s linear infinite;
}
@keyframes session-boot-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .session-boot__spinner { animation-duration: 2.4s; }
}
.login-view {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
}
.forced-reset-view {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
}
.forced-reset-view[hidden] { display: none; }
.forced-reset-card { max-width: 480px; }
.forced-reset-kicker {
  margin: 0 0 8px;
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}
.forced-reset-logout { margin-inline: auto; }
.login-aurora {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(620px 420px at 78% 22%, rgba(var(--brand-rgb),.16), transparent 62%),
    radial-gradient(560px 460px at 18% 84%, rgba(184,138,62,.18), transparent 60%);
  animation: drift 18s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate3d(-18px, 14px, 0) scale(1.04); } }

.login-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 430px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 36px 34px 30px;
  box-shadow: var(--shadow-lg);
  animation: rise .6s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.login-cross {
  flex: none;
  width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--brand), var(--brand-deep));
  color: #fff;
  box-shadow: 0 10px 24px rgba(var(--brand-rgb),.32);
}
.login-brand h1 { font-size: 23px; line-height: 1.15; }
.login-brand p { margin: 3px 0 0; color: var(--ink-faint); font-size: 13.5px; }

.login-form { display: grid; gap: 15px; animation: authfade .28s ease both; }
/* A hidden auth form must stay fully removed — the display:grid above would
   otherwise override the user-agent [hidden] rule and show both forms at once. */
.login-form[hidden] { display: none; }
@keyframes authfade { from { opacity: 0; transform: translateY(6px); } }
.field { display: grid; gap: 6px; }
/* The display:grid above would otherwise override the user-agent [hidden] rule
   and keep conditionally-hidden fields (e.g. the specific-trainee picker) visible. */
.field[hidden] { display: none; }
.field > span { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.field input {
  font-family: var(--body);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field input:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--field-bg);
  box-shadow: 0 0 0 4px var(--brand-soft);
}
/* Time (HH:MM) and date inputs are inherently left-to-right. Without this the RTL
   page direction cascades in and the browser reverses the hour/minute segments, so a
   "12:30" start renders as "30:12" (and dates read wrong too). Force LTR so the value
   reads correctly while the label stays right-aligned with the rest of the RTL form. */
.field input[type="time"], .field input[type="date"] { direction: ltr; text-align: start; }
.login-error {
  margin: 0; padding: 10px 12px;
  background: var(--danger-soft); color: var(--danger-deep);
  border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500;
}
.login-notice {
  margin: 0; padding: 10px 12px;
  background: var(--ok-soft); color: var(--ok);
  border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600;
}
.login-switch { margin: 2px 0 0; text-align: center; font-size: 13.5px; color: var(--ink-faint); }
.link-btn {
  background: none; border: none; padding: 0;
  font-family: inherit; font-size: 13.5px; font-weight: 700;
  color: var(--brand); cursor: pointer; text-decoration: underline;
}
.link-btn:hover { color: var(--brand-deep); }

/* Forgot-password link sits under the login fields, end-aligned (RTL-aware). */
.login-forgot { margin: -6px 0 0; text-align: start; }
.login-forgot .link-btn { font-size: 13px; font-weight: 600; }
.login-remember { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.login-remember input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); }
.login-remember span { font-size: 13px; color: var(--ink-soft); }

/* Intro header for the forgot / reset / verify auth panels. */
.login-form-intro { display: grid; gap: 4px; margin-bottom: 4px; }
.login-form-title { font-size: 19px; line-height: 1.2; }
.login-form-sub { margin: 0; color: var(--ink-faint); font-size: 13.5px; line-height: 1.55; }
.login-form-sub.is-ok { color: var(--ok); font-weight: 600; }
.login-form-sub.is-err { color: var(--danger-deep); font-weight: 600; }
.login-verify { gap: 18px; }

/* Email-verification status pill in the user-management tables. */
.u-email-addr { display: inline-block; }
.verify-pill {
  display: inline-block; margin-inline-start: 8px;
  padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
  vertical-align: middle;
}
.verify-pill.is-verified { background: var(--ok-soft); color: var(--ok); }
.verify-pill.is-unverified { background: var(--gold-soft); color: var(--gold); }

/* ============================================================
   APP SHELL
   ============================================================ */
.app-view { min-height: 100%; display: flex; flex-direction: column; min-width: 0; }
/* When logged out the app shell (topbar, nav, panels) must stay fully removed.
   The display:flex above would otherwise override the user-agent [hidden] rule
   and leave the navigation bar visible behind the login screen. */
.app-view[hidden] { display: none; }

.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  padding: 12px 26px;
  background: rgba(255,253,248,.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
/* Admin "view as" banner — pinned to the very top, sits above the topbar.
   The whole bar is a clickable button that exits impersonation. */
.impersonation-banner {
  position: sticky; top: 0; z-index: 60;
  display: block; width: 100%;
  border: 0; border-bottom: 1px solid rgba(0,0,0,.15);
  padding: 11px 26px;
  font-family: var(--body); font-size: 14px; font-weight: 700;
  text-align: center; line-height: 1.35;
  color: #fff; cursor: pointer;
  background: linear-gradient(180deg, var(--brand), var(--brand-deep));
  box-shadow: var(--shadow-sm);
  transition: filter .15s ease;
}
.impersonation-banner:hover { filter: brightness(1.07); }
.impersonation-banner[hidden] { display: none; }
/* While impersonating, drop the sticky topbar below the banner so both stay
   visible when scrolling. */
body.imp-active .topbar { top: 44px; }
.topbar-brand { display: flex; align-items: center; gap: 10px; flex: none; margin-inline-end: 16px; }
.topbar-cross {
  display: grid; place-items: center;
  background: transparent;
}
.topbar-logo { display: block; }
.topbar-title { font-family: var(--display); font-weight: 700; font-size: 18px; }

/* The middle tabs are the only elastic section: they may shrink and scroll
   horizontally so the brand and the left action cluster are never clipped. */
.main-nav {
  display: flex; gap: 6px; flex: 1 1 auto;
  min-width: 0; overflow-x: auto;
  scrollbar-width: none;
}
.main-nav::-webkit-scrollbar { display: none; }
.nav-tab {
  border: none; background: transparent; flex: none;
  padding: 9px 16px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; color: var(--ink-soft);
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.nav-tab:hover { background: var(--surface-2); color: var(--ink); }
.nav-tab.is-active { background: var(--brand); color: #fff; }

/* Floating dropdown menus (Groups B–D). The toggle button sits inline in the bar
   like a tab; its item list is a `.nav-menu-panel` appended to <body> and shown
   with position:fixed, so opening a menu NEVER grows or reflows the header. */
.nav-menu { position: relative; flex: none; display: inline-flex; }
.nav-menu-btn {
  display: inline-flex; align-items: center; gap: 5px;
  border: none; background: transparent;
  padding: 9px 16px; border-radius: 999px;
  font-family: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink-soft);
  white-space: nowrap; cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.nav-menu-btn:hover { background: var(--surface-2); color: var(--ink); }
/* Highlight the parent when the open view lives inside this menu, or while open. */
.nav-menu-btn.has-active { background: var(--brand); color: #fff; }
.nav-menu-btn.is-open { background: var(--surface-2); color: var(--ink); }
.nav-menu-btn.has-active.is-open { background: var(--brand); color: #fff; }
.nav-menu-caret { font-size: 10px; line-height: 1; transition: transform .18s ease; }
.nav-menu-btn.is-open .nav-menu-caret { transform: rotate(180deg); }

.nav-menu-panel {
  position: fixed; z-index: 80;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 210px; max-width: min(320px, 90vw); padding: 8px;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg, 0 18px 40px rgba(0,0,0,.18));
  overflow: visible;
}
.nav-menu-panel[hidden] { display: none; }
.nav-menu-panel .nav-menu-item {
  display: block; width: 100%; text-align: start;
  padding: 10px 14px; border-radius: 10px; font-size: 14.5px;
  color: var(--menu-text);
}
.nav-menu-panel .nav-menu-item:hover { background: var(--surface-2); color: var(--menu-text); }
.nav-menu-panel .nav-menu-item.is-active { background: var(--brand); color: var(--menu-active-text); }

.nav-submenu-row { position: relative; }
.nav-submenu-row::before {
  content: "";
  position: absolute;
  inset-block: -8px;
  left: 100%;
  width: 14px;
}
.nav-submenu-trigger {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--menu-text);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: start;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.nav-submenu-row:hover > .nav-submenu-trigger,
.nav-submenu-row.is-open > .nav-submenu-trigger { background: var(--surface-2); }
.nav-submenu-chevron { font-size: 12px; color: var(--menu-muted); flex-shrink: 0; }
.nav-submenu-flyout {
  position: absolute;
  inset-block-start: -6px;
  inset-inline-start: calc(100% - 3px);
  min-width: 220px;
  max-width: min(320px, 90vw);
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg, 0 18px 40px rgba(0,0,0,.18));
  z-index: 90;
}
.nav-submenu-row:hover > .nav-submenu-flyout,
.nav-submenu-row.is-open > .nav-submenu-flyout { display: flex; }
.nav-submenu-red > .nav-submenu-trigger { color: var(--menu-text); }
.nav-submenu-green > .nav-submenu-trigger { color: var(--menu-text); }
.nav-submenu-yellow > .nav-submenu-trigger { color: var(--menu-text); }

/* Mobile navigation dropdown — hidden on desktop, revealed under 768px where the
   wide tab strip is suppressed (see the media query at the end of this file). */
.nav-mobile-select { display: none; }

.topbar-user { display: flex; align-items: center; gap: 14px; flex: none; flex-shrink: 0; }
.topbar-user-info,
.topbar-user-actions { display: flex; align-items: center; }
.topbar-user-info { gap: 10px; min-width: 0; }
.topbar-user-actions { gap: 10px; flex: none; flex-shrink: 0; }
.user-meta { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; min-width: 0; }
.user-name { font-weight: 600; font-size: 14px; }
.role-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 9px; border-radius: 999px; margin-top: 2px;
}
.role-badge.admin { background: var(--brand-soft); color: var(--brand-deep); }
.role-badge.viewer { background: var(--gold-soft); color: #7a5a20; }
/* Dark mode: brand-deep lightens to #2563eb which falls below 4.5:1 against
   the unchanged brand-soft (#e2e8fb) background — pin to a darker navy. */
html[data-theme="dark"] .role-badge.admin { color: #1e3a8a; }

/* Full-width fluid layout: the main page container spans the entire screen so
   grids, tables and dashboards use the full desktop width. Clean responsive
   padding (≈px-4 / sm:px-6 / lg:px-8) keeps content off the edges. */
.tab-panel { flex: 1; width: 100%; max-width: 100%; min-width: 0; margin: 0; padding: 30px clamp(16px, 3vw, 32px) 60px; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.page-title { font-size: 28px; font-weight: 900; }
.page-sub { margin: 4px 0 0; color: var(--ink-faint); font-size: 14px; }

.month-nav { display: flex; align-items: center; gap: 14px; }
.month-label { font-family: var(--display); font-weight: 700; font-size: 20px; min-width: 150px; text-align: center; }

/* Trainee-view month navigation: arrows + a month/year picker + a jump back to the
   current month, so past and upcoming schedules are one click away. */
.trainee-view-month-nav { flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.trainee-view-month-input {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
@media (max-width: 640px) {
  .trainee-view-month-nav { justify-content: center; }
  .trainee-view-month-nav .month-label { min-width: 0; flex: 1 1 auto; }
}

/* ---------- Calendar ---------- */
.calendar-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}
.calendar-weekdays, .calendar-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
}
.calendar-weekdays { margin-bottom: 8px; }
.calendar-weekdays span {
  text-align: center; font-size: 12.5px; font-weight: 700;
  color: var(--ink-faint); padding: 4px 0; letter-spacing: .03em;
}

.day-cell {
  position: relative;
  height: 96px;
  min-height: 96px;
  max-height: 96px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  text-align: start;
  font-family: var(--body);
  color: var(--ink);
  overflow: hidden;
  transition: transform .12s ease, border-color .15s ease, box-shadow .18s ease, background .15s ease;
}
.day-cell:hover { transform: translateY(-2px); border-color: var(--brand); box-shadow: var(--shadow-md); background: var(--surface); }
.day-cell.is-empty { background: transparent; border-color: transparent; pointer-events: none; }
.day-cell.is-today { border-color: var(--gold); }
.day-cell.is-today .day-num { color: var(--gold); }
.day-cell.is-selected { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-md); }
.day-cell.is-selected .day-num { color: #fff; }
.day-num { font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1; }
.day-flag {
  position: absolute; inset-inline-end: 9px; bottom: 8px;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 600; color: var(--brand);
}
.day-cell.is-selected .day-flag { color: var(--gold-soft); }
.day-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.day-cell.is-selected .day-dot { background: var(--gold); }

/* ---------- Locked day (trainee, outside the published week) ---------- */
.day-cell.is-locked {
  cursor: not-allowed;
  background: repeating-linear-gradient(
    -45deg,
    var(--surface-2),
    var(--surface-2) 7px,
    var(--line) 7px,
    var(--line) 8px
  );
  border-style: dashed;
  border-color: var(--line);
  color: var(--ink-faint);
}
.day-cell.is-locked:hover { transform: none; box-shadow: none; border-color: var(--line); }
.day-cell.is-locked .day-num { color: var(--ink-faint); opacity: .7; }
.day-locked-note {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-faint);
}

/* ---------- Day-cell shift preview (assigned names) ---------- */
.day-preview {
  margin-top: 7px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  max-width: 100%;
  max-height: 62px;
  overflow: hidden;
}
.day-shift {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0; /* allow the names label to shrink + ellipsis */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.day-shift-cross-board-marker {
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(245, 158, 11, .18);
  box-shadow: inset 3px 0 0 rgba(217, 119, 6, .92);
}
.day-security-coverage-marker {
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(99, 102, 241, .20);
  box-shadow: inset 3px 0 0 rgba(79, 70, 229, .92);
}
.day-shift-band {
  flex: none;
  width: 4px;
  height: 12px;
  border-radius: 2px;
  background: var(--ink-faint);
}
.day-shift.night .day-shift-band { background: #3b3a6b; }
.day-shift.morning .day-shift-band { background: var(--gold); }
.day-shift.evening .day-shift-band { background: var(--teal); }
.day-shift.other .day-shift-band { background: var(--ink-faint); }
.day-shift-names {
  display: block;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendar-event,
.shift-badge {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.day-cell.is-selected .day-shift-names { color: rgba(255, 255, 255, .92); }
.day-cell.is-selected .day-shift-cross-board-marker {
  background: rgba(245, 158, 11, .24);
  box-shadow: inset 3px 0 0 rgba(253, 224, 71, .95);
}
.day-cell.is-selected .day-security-coverage-marker {
  background: rgba(99, 102, 241, .26);
  box-shadow: inset 3px 0 0 rgba(165, 180, 252, .95);
}

/* Shift-note flag — a small red indicator shown wherever a shift carries admin
   guidance (calendar preview, day-detail card head, and the "My Shifts" table).
   Its title/aria-label carries the note text so hovering or focusing reveals it. */
.shift-note-flag {
  flex: none;
  font-size: 11px;
  line-height: 1;
  cursor: help;
  filter: drop-shadow(0 0 1px rgba(200, 30, 30, .35));
}
.shift-card-head .shift-note-flag {
  font-size: 13px;
  margin-inline-start: 4px;
  vertical-align: middle;
}
.shift-note-flag:focus-visible {
  outline: 2px solid var(--teal, #2aa);
  outline-offset: 2px;
  border-radius: 3px;
}
.day-cell.is-selected .day-shift.night .day-shift-band,
.day-cell.is-selected .day-shift.morning .day-shift-band,
.day-cell.is-selected .day-shift.evening .day-shift-band,
.day-cell.is-selected .day-shift.other .day-shift-band { background: var(--gold-soft); }

/* ---------- Day detail / shift tables ---------- */
.day-detail {
  margin-top: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  /* overflow stays visible so the blue day header below can pin itself to the
     viewport (position: sticky) while the shift cards scroll under it; an
     overflow-clipping ancestor would trap the sticky header inside this card. */
  overflow: visible;
  animation: rise .35s ease both;
}
.detail-head {
  /* The active-day action bar: pinned just beneath the sticky topbar so the
     full date and its controls stay put — and never drift horizontally — while
     the day's shifts scroll. --stuck-top is published from JS as the live
     topbar (+ impersonation banner) height. */
  position: sticky;
  top: var(--stuck-top, 64px);
  z-index: 30;
  border-start-start-radius: var(--radius);
  border-start-end-radius: var(--radius);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px;
  background: linear-gradient(120deg, var(--brand-deep), var(--brand));
  color: #fff; flex-wrap: wrap;
}
.detail-head h3 { font-size: 21px; color: #fff; }
.detail-head .detail-sub { font-size: 13px; opacity: .85; margin-top: 2px; }
.detail-head .detail-last-updated { font-size: 12px; opacity: .65; margin-top: 2px; }
.detail-actions { display: flex; align-items: center; gap: 12px; }
/* Auto-save status pill — sits in the day-board header (light text on the brand
   gradient) and reports the live save state in place of the old manual button. */
.autosave-status {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; line-height: 1;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.autosave-status[hidden] { display: none; }
.autosave-status.is-saved {
  background: var(--ok-soft); border-color: transparent; color: var(--ok);
}
.autosave-status.is-error {
  background: #fdecec; border-color: transparent; color: #b22; font-weight: 700;
}
.autosave-status svg { flex: 0 0 auto; }
.autosave-spinner {
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.45);
  border-top-color: #fff;
  animation: autosave-spin .7s linear infinite;
}
@keyframes autosave-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .autosave-spinner { animation-duration: 2.4s; }
}
.btn-close-detail {
  background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.3);
}
.btn-close-detail:hover { background: rgba(255,255,255,.28); }

.shifts { padding: 20px 22px 26px; display: grid; gap: 18px; }
.shift-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
}
.shift-card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.shift-band { width: 6px; height: 22px; border-radius: 3px; }
.shift-band.morning { background: var(--gold); }
.shift-band.evening { background: var(--teal); }
.shift-band.night { background: #3b3a6b; }
.shift-band.other { background: var(--ink-faint); }
.shift-name { font-family: var(--display); font-weight: 700; font-size: 16px; }
.shift-time { color: var(--ink-faint); font-size: 12.5px; direction: ltr; }

/* ---------- Day-detail shift accordion (mobile-first, light) ----------
   Tapping a day no longer dumps the whole crew matrix. Instead the day opens as
   three wide, clean trigger buttons — Night → Morning → Evening — each of which
   expands only its own shifts. Light surfaces + the branded burgundy accents
   keep it readable on a phone. */
.shift-acc {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.shift-acc.is-open {
  border-color: rgba(var(--danger-rgb), .45);
  box-shadow: var(--shadow-md);
}
.shift-acc-trigger {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  background: var(--surface);
  border: none; cursor: pointer; text-align: start;
  font-family: var(--body);
  color: var(--ink);
  transition: background .15s ease;
}
.shift-acc-trigger:hover { background: rgba(var(--danger-rgb), .05); }
.shift-acc-trigger:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(var(--danger-rgb), .45);
}
/* Leading colour band marks which time-of-day the button opens. */
.shift-acc-band { width: 6px; height: 30px; border-radius: 3px; flex: none; }
.shift-acc-band.morning { background: var(--gold); }
.shift-acc-band.evening { background: var(--teal); }
.shift-acc-band.night   { background: #3b3a6b; }
.shift-acc-band.other   { background: var(--ink-faint); }
.shift-acc-title {
  font-family: var(--display); font-weight: 700; font-size: 18px;
  color: var(--ink);
}
/* Count pill in the branded burgundy so the button reads as a system control. */
.shift-acc-count {
  font-size: 12.5px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  background: var(--danger-soft); color: var(--danger);
  white-space: nowrap;
}
.shift-acc-chevron {
  margin-inline-start: auto; flex: none;
  color: var(--danger);
  transition: transform .25s ease;
}
.shift-acc.is-open .shift-acc-chevron { transform: rotate(180deg); }

/* Smooth open/close that works for any content height (no fixed max-height). */
.shift-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
  border-top: 1px solid transparent;
}
.shift-acc.is-open .shift-acc-body {
  grid-template-rows: 1fr;
  border-top-color: var(--line);
}
.shift-acc-inner { overflow: hidden; min-height: 0; }
.shift-acc-inner { display: grid; gap: 14px; padding: 14px; background: var(--surface-2); }
/* Inside a section every card is already scoped to one time-of-day. Sit the cards
   on white against the cream section body so crew names read cleanly on mobile. */
.shift-acc-inner .shift-card { box-shadow: none; background: var(--surface); }
.shift-acc-inner .shift-card-head { background: var(--surface-2); }
@media (prefers-reduced-motion: reduce) {
  .shift-acc-body, .shift-acc-chevron { transition: none; }
}

/* Per-day shift removal (admin): delete button on the card header + the
   restore panel listing whatever was removed from this specific day. */
.btn-shift-del {
  margin-inline-start: auto; /* push to the header's end edge */
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; font-family: var(--body); font-size: 12.5px; font-weight: 600;
  border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background: var(--field-bg); color: var(--danger); cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-shift-del:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-shift-del svg { flex: none; }

/* "הוסף ליומן גוגל" export control — full (icon + label) in the "המשמרות שלי"
   table, and an icon-only compact variant inside the board grid cells. */
.gcal-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--field-bg);
  color: var(--brand); cursor: pointer; text-decoration: none;
  font-family: var(--body); font-size: 12.5px; font-weight: 600;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gcal-link:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.gcal-link svg { flex: none; }
.gcal-link-compact {
  padding: 4px; border-radius: 999px; margin-inline-start: 4px;
  align-self: center; line-height: 0;
}
.forms-cal { white-space: nowrap; }

.hidden-shifts {
  margin-top: 16px; padding: 14px 16px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface);
}
.hidden-shifts-head { font-size: 13px; font-weight: 700; color: var(--ink-soft); margin-bottom: 10px; }
.hidden-shifts-list { display: flex; flex-wrap: wrap; gap: 10px; }
.hidden-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface-2);
}
.hidden-chip .shift-band { height: 16px; }
.hidden-chip-label { font-size: 13px; color: var(--ink); }
.btn-restore-shift {
  font-family: var(--body); font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--brand); background: transparent; color: var(--brand);
  transition: background .15s ease, color .15s ease;
}
.btn-restore-shift:hover { background: var(--brand); color: #fff; }

/* Per-day custom shift: a one-off station added from the day view. A tinted
   header band + small tag set it apart from the permanent stations. */
.shift-card.is-custom { border-style: dashed; border-color: var(--line-strong); }
.shift-card.is-custom .shift-card-head { background: rgba(var(--brand-rgb), .10); }
.shift-custom-tag {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  color: var(--brand); background: var(--surface);
  border: 1px solid var(--brand);
}

/* Social-activity events (פעילות חברתית) — a warm, inviting amber/gold theme that
   clearly sets community gatherings and team-building apart from the blue medical
   shifts, so volunteers can spot and sign up for them at a glance. */
.shift-card.is-social {
  border-color: var(--gold);
  box-shadow: 0 6px 22px rgba(184, 138, 62, .16);
  background:
    linear-gradient(180deg, rgba(184, 138, 62, .07), transparent 120px),
    var(--surface);
}
.shift-card.is-social .shift-card-head {
  background: linear-gradient(90deg, var(--gold-soft), rgba(184, 138, 62, .06));
}
.shift-card.is-social .shift-band {
  background: linear-gradient(180deg, var(--gold), #d8a94e) !important;
}
.task-type-badge.is-social {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--gold-soft); color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(184, 138, 62, .35);
}
.task-type-badge .social-icon { flex: none; }

/* Dark-mode refinement for social events: keep the header warm without the bright
   cream fill, and give the badge a translucent amber wash that reads well on dark. */
html[data-theme="dark"] .shift-card.is-social {
  box-shadow: 0 6px 22px rgba(216, 169, 78, .12);
  background:
    linear-gradient(180deg, rgba(216, 169, 78, .12), transparent 120px),
    var(--surface);
}
html[data-theme="dark"] .shift-card.is-social .shift-card-head {
  background: linear-gradient(90deg, rgba(216, 169, 78, .18), rgba(216, 169, 78, .05));
}
html[data-theme="dark"] .task-type-badge.is-social {
  background: rgba(216, 169, 78, .16); color: #e6c274;
  box-shadow: inset 0 0 0 1px rgba(216, 169, 78, .4);
}


.add-shift-card {
  margin-top: 18px; padding: 16px 18px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface);
}
.add-shift-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.add-shift-head h4 { font-family: var(--display); font-size: 16px; font-weight: 700; margin: 0; }
.add-shift-sub { font-size: 12.5px; color: var(--ink-soft); }
.add-shift-form {
  display: grid; gap: 14px; align-items: end;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
}
.add-shift-field { display: grid; gap: 6px; }
.add-shift-field label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.add-shift-field input, .add-shift-field select {
  font-family: var(--body); font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--field-bg); color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
  width: 100%;
}
.add-shift-field input:focus, .add-shift-field select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft);
}
/* Time fields are inherently left-to-right (HH:MM). Without this the RTL page
   direction cascades in and the browser reverses the hour/minute segments, so a
   "22:00" start renders as "00:22". Force LTR so the value reads correctly while
   the label stays right-aligned with the rest of the RTL form. */
.add-shift-field input[type="time"] { direction: ltr; text-align: start; }
.add-shift-foot { display: flex; }
.add-shift-foot .btn { white-space: nowrap; }
@media (max-width: 560px) {
  .add-shift-form { grid-template-columns: 1fr; }
}


.slot-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; padding: 16px;
}
.slot { display: grid; gap: 6px; }
.slot > label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.slot-role-dot { width: 8px; height: 8px; border-radius: 50%; }
.slot-role-dot.driver { background: var(--teal); }
.slot-role-dot.medic { background: var(--danger); }
.slot-role-dot.intern { background: var(--gold); }

.slot select, .slot input {
  font-family: var(--body); font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--field-bg); color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
  width: 100%;
}
.slot select:focus, .slot input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft);
}
/* read-only / disabled state — visually distinct, clearly non-interactive */
.slot select:disabled, .slot input:disabled,
.users-table select:disabled {
  background: var(--surface-2);
  color: var(--ink-soft);
  cursor: not-allowed;
  border-style: dashed;
  opacity: 1;
}
.slot-split-tag {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  font-variant-numeric: tabular-nums;
}
.slot-split-lines {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.slot-split-line {
  font-size: 12px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ---------- "תקן מתנדב" — manual volunteer-standard seat tag ----------
   Edit mode gets a compact checkbox beneath the seat's name field (one per half of a
   split seat); every other reader gets the subtle badge below, and only when the tag
   is actually set. */
.vol-standard-toggle {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  margin-top: 6px; padding: 5px 8px; border-radius: 8px;
  font-size: 11.5px; font-weight: 600; line-height: 1.3; color: var(--ink-soft);
  background: var(--paper-2, #faf6ec); border: 1px dashed var(--line, #e2dac9);
}
.vol-standard-toggle input { width: 15px; height: 15px; accent-color: var(--gold); cursor: pointer; flex: 0 0 auto; }
.vol-standard-toggle input:disabled { cursor: default; }
.slot-split-line .vol-standard-toggle { margin-top: 0; }
/* The same tag inside a monthly generic-crew seat ("עריכת צוות גנרי"), where it is an ICON
   rather than a labelled checkbox: a grid cell is narrow, and a control with a caption took
   room the name needs — the seat's whole point. It matches the quick-clear "×" it sits beside,
   so the row reads as two small seat actions and its height does not change with the state.
   Off: a faint outline that stays out of the way while a month is scanned. On: the solid
   volunteer green, the same colour the "תקן מתנדב" badge and the "דוח תקן" report use.
   Editing surface only — the read-only board keeps the badge. */
.mx-vol-standard {
  flex: 0 0 auto; width: 20px; height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--field-bg); color: var(--ink-faint); opacity: .55;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease, opacity .12s ease;
}
.mx-vol-standard svg { width: 12px; height: 12px; }
.mx-vol-standard:hover { opacity: 1; border-color: var(--line-strong); background: var(--surface-2); }
.mx-vol-standard.is-on {
  opacity: 1; color: #fff; background: var(--ok); border-color: var(--ok);
}
.mx-vol-standard.is-on:hover { background: var(--ok); border-color: var(--ok); }
.mx-vol-standard:focus-visible { outline: 2px solid var(--ok); outline-offset: 1px; }
/* "הצג סטטיסטיקות עובדים" — reveals the salaried rows of the dashboard "דוח תקן",
   which shows only the volunteer-standard metrics by default. */
.standards-reports-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--surface-2, rgba(127, 127, 127, .05));
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
}
.standards-presets-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}
.standards-preset-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.standards-control-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
}
.standards-preset-buttons {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.standards-preset-btn {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid var(--line-strong);
  background: var(--field-bg);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .15s ease;
}
.standards-preset-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.standards-preset-btn.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 700;
}
.standards-months-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.standards-month-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.standards-month-pill {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--field-bg);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .15s ease;
}
.standards-month-pill:hover {
  border-color: var(--gold);
  color: var(--ink);
}
.standards-month-pill.is-selected {
  background: var(--gold-soft, #fef3c7);
  border-color: var(--gold, #d97706);
  color: var(--gold-dark, #92400e);
  font-weight: 700;
}
html[data-theme="dark"] .standards-month-pill.is-selected {
  background: rgba(217, 119, 6, .25);
  border-color: var(--gold);
  color: #fbbf24;
}
.standards-employee-toggle {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  margin-bottom: 0; font-size: 13px; font-weight: 600; color: var(--ink-soft);
}
.standards-employee-toggle input { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; }
.vol-standard-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1.5;
  color: var(--ink-soft); background: var(--paper-2, #faf6ec);
  border: 1px solid var(--line, #e2dac9);
}

/* ---------- Read-only crew hierarchy (day-detail bottom sheet) ----------
   Viewers see the crew as a scannable list: the driver as a prominent header
   with a distinctive icon, the escorts (מלווים) as a bulleted list beneath. */
.crew-summary { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.crew-driver {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--surface-2, rgba(127, 127, 127, .08));
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--teal);
  border-radius: var(--radius-sm);
}
.crew-driver-icon {
  flex: none; display: inline-flex; color: var(--teal);
}
/* Paramedic leader row (ATAN): same container as the driver, gold accent so the
   two crew leaders read as distinct-but-equal anchors. */
.crew-medic { border-inline-start-color: var(--gold); }
.crew-medic .crew-driver-icon { color: var(--gold); }
.crew-driver-name {
  font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink);
}
.crew-driver-name.crew-driver-name-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.crew-driver-main {
  font-weight: 700;
  color: var(--ink);
}
.crew-driver-sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.crew-driver-name.is-empty { font-weight: 600; font-style: italic; color: var(--ink-faint); }
.crew-driver-name.is-crew-masked { font-weight: 600; font-style: italic; color: var(--ink-faint); }
.crew-driver-role {
  margin-inline-start: auto; flex: none;
  font-size: 11.5px; font-weight: 600; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 10px;
}
.crew-split-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 0;
  padding: 0 14px 0 38px;
  color: var(--ink-soft);
  font-size: 12px;
}
.crew-split-role { font-weight: 700; }
.crew-split-name { font-weight: 600; color: var(--ink); }
.crew-split-hours {
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 1px 8px;
}
.crew-escorts {
  list-style: none; margin: 0; padding: 0 6px;
  display: flex; flex-direction: column; gap: 8px;
}
.crew-escort {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding-inline-start: 20px;
  font-size: 14px; color: var(--ink);
}
.crew-escort::before {
  content: ""; position: absolute; inset-inline-start: 4px; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: var(--gold);
}
.crew-escort.is-empty { color: var(--ink-faint); font-style: italic; }
.crew-escort.is-empty::before { background: var(--ink-faint); }
.crew-escort.is-crew-masked .crew-escort-name { font-style: italic; color: var(--ink-faint); }
.crew-escort-name { font-weight: 600; }
.crew-escort-role {
  margin-inline-start: auto; flex: none;
  font-size: 11px; color: var(--ink-soft);
}

/* ---------- Users table ---------- */
.table-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
}
.table-responsive {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.users-table { width: 100%; border-collapse: collapse; }
.users-table th, .users-table td {
  text-align: start; padding: 14px 20px; font-size: 14.5px;
  border-bottom: 1px solid var(--line);
}
.users-table th { background: var(--surface-2); font-weight: 700; color: var(--ink-soft); font-size: 13px; letter-spacing: .02em; }
.users-table tr:last-child td { border-bottom: none; }
.users-table tr:hover td { background: var(--surface-2); }
.users-table .u-email { direction: ltr; text-align: start; color: var(--ink-soft); }
.users-table select {
  font-family: var(--body); font-size: 13.5px; font-weight: 600;
  padding: 8px 12px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--field-bg); color: var(--ink);
}
.users-table select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.you-tag { font-size: 11px; font-weight: 700; color: var(--gold); margin-inline-start: 8px; }

/* ---------- Manager-notifications cards ("התראות מנהלים") ----------
   The table view has been retired: a single responsive card grid (mirroring
   Tailwind's "grid-cols-1 md:grid-cols-2 lg:grid-cols-3") is now the only
   rendering, on every screen size — no separate desktop table, so there is
   nothing that can duplicate or squeeze into broken vertical text. */
.schedule-alert-cards {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 768px) {
  .schedule-alert-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (min-width: 1024px) {
  .schedule-alert-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.schedule-alert-card-item {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(15, 23, 42, .55);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
  padding: 14px 16px;
  height: 100%;
}
.schedule-alert-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(148, 163, 184, .16);
}
.schedule-alert-card-name { font-weight: 700; font-size: 15px; color: var(--ink); }
.schedule-alert-card-role {
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 10px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand);
}
.schedule-alert-card-email {
  flex-basis: 100%;
  font-size: 13px;
  direction: ltr;
  text-align: end;
  color: var(--ink-soft);
}
.schedule-alert-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.schedule-alert-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 4px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  border-bottom: 1px solid rgba(148, 163, 184, .1);
}
.schedule-alert-toggle-row:last-child { border-bottom: none; }
/* Checked: bright blue fill + border, with a proper centered white checkmark
   glyph (not a chevron/arrow). Unchecked: dark translucent fill with a subtle
   border and a completely empty interior. */
.schedule-alert-toggle-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1.5px solid #475569;
  border-radius: 7px;
  background: rgba(30, 41, 59, .6);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.schedule-alert-toggle-row input[type="checkbox"]:hover {
  border-color: #64748b;
}
.schedule-alert-toggle-row input[type="checkbox"]:checked {
  background: #2563eb;
  border-color: #2563eb;
}
.schedule-alert-toggle-row input[type="checkbox"]:checked::after {
  content: "\2713"; /* proper checkmark glyph (✓), not a chevron/arrow */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}
.schedule-alert-toggle-row input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-soft);
}
/* Keep "שמור הגדרות" reachable without scrolling back up. */
#schedule-email-recipients-form .publish-actions {
  position: sticky;
  bottom: 0;
  padding: 12px 0;
  margin-top: 4px;
  background: linear-gradient(to top, var(--bg, var(--surface)) 65%, transparent);
  z-index: 2;
}

/* ---------- Access status + row actions ---------- */
.status-badge {
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 10px; border-radius: 999px; display: inline-block;
}
.status-badge.approved { background: var(--ok-soft); color: var(--ok); }
.status-badge.pending { background: var(--gold-soft); color: var(--gold); }
.status-badge.neutral { background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line); }
.users-table td .muted { color: var(--ink-faint); }

/* ---------- Per-trainee shift target (admin) ---------- */
/* Compact numeric input in the users table for each trainee's personal target. */
.target-input {
  width: 72px;
  padding: 6px 8px;
  font: inherit;
  font-weight: 600;
  text-align: center;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.target-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft, rgba(44,107,63,.18));
}

/* Live shift counter badge: "current / target משמרות", colour-coded per trainee. */
.quota-badge {
  display: inline-block; white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 11px; border-radius: 999px;
}
.quota-badge.ok      { background: var(--ok-soft); color: var(--ok); }       /* met / exceeded */
.quota-badge.low     { background: var(--gold-soft); color: var(--gold); }   /* below target */
.quota-badge.neutral { background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line); }
.empty-row { text-align: center; color: var(--ink-faint); font-style: italic; padding: 22px; }

.row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn-xs {
  font-family: var(--body); font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--field-bg); color: var(--ink-soft);
  transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn-xs:disabled { opacity: .4; cursor: not-allowed; }
.btn-approve { border-color: var(--ok); color: var(--ok); }
.btn-approve:not(:disabled):hover { background: var(--ok); color: #fff; }
.btn-block-user { border-color: var(--danger); color: var(--danger); }
.btn-block-user:not(:disabled):hover { background: var(--danger); color: #fff; }
.btn-edit-name { border-color: var(--brand); color: var(--brand); }
.btn-edit-name:not(:disabled):hover { background: var(--brand); color: #fff; }
.btn-impersonate { border-color: var(--brand-deep); color: var(--brand-deep); }
.btn-impersonate:not(:disabled):hover { background: var(--brand-deep); color: #fff; }
.btn-whatsapp-reminder,
.btn-whatsapp-action {
  display: inline-flex; align-items: center; gap: 6px;
  border-color: var(--brand); color: var(--brand);
}
.btn-whatsapp-reminder:not(:disabled):hover,
.btn-whatsapp-action:not(:disabled):hover { background: var(--brand); color: #fff; }
/* WhatsApp quick-link on shift cards: use official WhatsApp green */
.btn-whatsapp-action { border-color: #25D366; color: #25D366; }
.btn-whatsapp-action:not(:disabled):hover { background: #25D366; border-color: #25D366; color: #fff; }
.btn-whatsapp-reminder.is-sent,
.btn-whatsapp-action.is-sent {
  border-color: var(--ok); color: var(--ok); background: var(--ok-soft);
}
.btn-whatsapp-action .whatsapp-ic,
.btn-whatsapp-reminder .whatsapp-ic { display: inline-flex; }
.btn-whatsapp-action.is-sending,
.btn-whatsapp-reminder.is-sending { opacity: .6; cursor: progress; }

/* User-row actions dropdown — a single compact trigger that opens a floating
   menu. The menu is body-appended and fixed-positioned (see openActionsMenu),
   so it layers above rows without expanding the row height or being clipped. */
.actions-menu-wrap { display: inline-flex; align-items: center; gap: 6px; }

.publish-channel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.publish-channel { display: flex; flex-direction: column; gap: 8px; }
.publish-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

@media (max-width: 760px) {
  .publish-channel-grid { grid-template-columns: 1fr; }
}

/* "שליחה מחדש" — resend activation email, shown inline on pending rows. Brand-
   coloured by default; flips green while confirming a successful send. */
.resend-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border-color: var(--brand); color: var(--brand); white-space: nowrap;
}
.resend-btn:not(:disabled):hover { background: var(--brand); color: #fff; }
.resend-btn .resend-ic { display: inline-flex; }
.resend-btn.is-sending { opacity: .6; cursor: progress; }
.resend-btn.is-sent {
  border-color: var(--ok); color: var(--ok); background: transparent; opacity: 1;
}
.actions-menu-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border-color: var(--line-strong); color: var(--ink-soft);
}
.actions-menu-btn:not(:disabled):hover { background: var(--surface-2); border-color: var(--brand); color: var(--brand); }
.actions-menu-chev { display: inline-flex; transition: transform .15s ease; }
.actions-menu-btn[aria-expanded="true"] {
  background: var(--surface-2); border-color: var(--brand); color: var(--brand);
}
.actions-menu-btn[aria-expanded="true"] .actions-menu-chev { transform: rotate(180deg); }

.actions-menu {
  position: fixed; z-index: 1200; min-width: 190px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.actions-menu-item {
  display: block; width: 100%; text-align: start;
  font-family: var(--body); font-size: 13px; font-weight: 600;
  padding: 8px 12px; border-radius: 8px;
  border: 0; background: transparent; color: var(--ink-soft); cursor: pointer;
  transition: background .13s ease, color .13s ease;
}
.actions-menu-item.has-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.actions-menu-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.actions-menu-item-label { min-width: 0; }
.actions-menu-item:hover { background: var(--surface-2); color: var(--ink); }
.actions-menu-item:disabled { opacity: .4; cursor: not-allowed; }
.actions-menu-item.is-ok { color: var(--ok); }
.actions-menu-item.is-ok:not(:disabled):hover { background: var(--ok-soft); }
.actions-menu-item.is-brand { color: var(--brand); }
.actions-menu-item.is-brand:not(:disabled):hover { background: var(--brand-soft); }
.actions-menu-item.is-danger { color: var(--danger); }
.actions-menu-item.is-danger:not(:disabled):hover { background: var(--danger-soft); }
.shift-card-actions-btn {
  margin-inline-start: auto;
  min-inline-size: 34px;
  min-block-size: 34px;
  padding: 0 10px;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}
.shift-audit-modal {
  inline-size: min(760px, 100%);
  max-block-size: min(88vh, 900px);
  display: flex;
  flex-direction: column;
}
.shift-audit-modal-body {
  min-block-size: 140px;
  overflow: auto;
  margin-block: 8px 0;
  padding-inline-end: 2px;
}
.shift-audit-loading {
  min-block-size: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ink-soft);
  font-weight: 600;
}
.shift-audit-empty {
  margin: 0;
  padding: 18px 4px;
}
.shift-audit-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.shift-audit-entry {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shift-audit-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.shift-audit-entry-actor {
  font-weight: 700;
  color: var(--ink);
}
.shift-audit-entry-meta,
.shift-audit-entry-desc {
  color: var(--ink-soft);
  line-height: 1.5;
}
.shift-audit-entry-escort {
  color: var(--brand-deep);
  font-weight: 700;
}
.shift-audit-snapshot {
  background: var(--surface-2);
  border-radius: 12px;
  padding: 10px;
}
.shift-audit-snapshot-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-block-end: 8px;
}
.shift-audit-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.shift-audit-snapshot-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.shift-audit-snapshot-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-faint);
}
.shift-audit-snapshot-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.escort-swap-modal { inline-size: min(560px, 100%); }
.escort-swap-select { inline-size: 100%; }
.escort-swap-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.escort-swap-preview {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.escort-swap-preview-title { font-weight: 700; }
.escort-swap-preview-shift { font-size: 12.5px; color: var(--ink-soft); }
.escort-swap-preview-list { display: flex; flex-direction: column; gap: 6px; }
.escort-swap-preview-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}
.escort-swap-preview-label { color: var(--ink-soft); }
.escort-swap-preview-value { font-weight: 600; text-align: start; }
.escort-swap-preview-empty { font-size: 13px; color: var(--ink-soft); }
@media (max-width: 760px) {
  .escort-swap-preview-grid { grid-template-columns: 1fr; }
}

.btn-trash {
  width: 36px; height: 36px; padding: 0; display: grid; place-items: center;
  border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background: var(--field-bg); color: var(--danger);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-trash:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* Quick-Pick roster phone action: a compact icon button whose colour signals
   whether a number is on file. has-phone → brand-tinted "filled" state; no-phone
   → muted/hollow wireframe. Clicking it opens the phone popup. */
.btn-phone {
  width: 36px; height: 36px; padding: 0; display: grid; place-items: center;
  border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background: var(--field-bg); cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn-phone.has-phone { color: var(--ok, #16a34a); border-color: var(--ok, #16a34a); }
.btn-phone.has-phone:hover { background: var(--ok, #16a34a); color: #fff; }
.btn-phone.no-phone { color: var(--muted, #9aa3af); opacity: .7; }
.btn-phone.no-phone:hover { color: var(--brand); border-color: var(--brand); opacity: 1; }

/* Stations table row actions: pencil (edit) + trash, and the save (✓) shown
   while a row is in inline-edit mode. Match the trash button's box so the row
   stays aligned. */
.station-actions { display: inline-flex; gap: 8px; align-items: center; }
.btn-edit-station, .btn-save-station, .btn-restore-station {
  width: 36px; height: 36px; padding: 0; display: grid; place-items: center;
  border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background: var(--field-bg); cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-edit-station { color: var(--brand); }
.btn-edit-station:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn-save-station { color: var(--ok); }
.btn-save-station:hover { background: var(--ok); color: #fff; border-color: var(--ok); }
.btn-restore-station { color: var(--ok); }
.btn-restore-station:hover { background: var(--ok); color: #fff; border-color: var(--ok); }
.btn-edit-station:disabled, .btn-save-station:disabled, .btn-restore-station:disabled { opacity: .4; cursor: not-allowed; }
.station-edit-input {
  width: 100%; box-sizing: border-box; padding: 7px 9px; font: inherit;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--field-bg); color: inherit;
}
.station-edit-input:focus { outline: none; border-color: var(--brand); }
.station-edit-input:read-only { opacity: .6; cursor: not-allowed; }

.shift-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.shift-pill .dot { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.shift-pill .dot.morning { background: var(--gold); }
.shift-pill .dot.evening { background: var(--teal); }
.shift-pill .dot.night { background: #3b3a6b; }
.shift-pill .dot.other { background: var(--ink-faint); }

/* Shift classification badge (אט״ן / לבן) in the stations table. */
.shift-type-pill {
  display: inline-block; font-size: 12.5px; font-weight: 700;
  padding: 2px 10px; border-radius: 999px; line-height: 1.6;
  border: 1px solid transparent;
}
.shift-type-pill.is-atan { background: rgba(59, 58, 107, 0.12); color: #3b3a6b; border-color: rgba(59, 58, 107, 0.25); }
.shift-type-pill.is-regular { background: rgba(20, 20, 20, 0.05); color: #444; border-color: rgba(20, 20, 20, 0.18); }
.station-status-pill {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 999px;
  line-height: 1.6;
  border: 1px solid transparent;
}
.station-status-pill.is-active {
  background: rgba(22, 163, 74, 0.12);
  color: #166534;
  border-color: rgba(22, 163, 74, 0.24);
}
.station-status-pill.is-archived {
  background: rgba(120, 113, 108, 0.12);
  color: #57534e;
  border-color: rgba(120, 113, 108, 0.24);
}

.stations-toolbar { display: flex; justify-content: flex-start; margin: 0 0 12px; }
.show-deleted-toggle { width: fit-content; }
.stations-table tr.is-deleted-template { opacity: .52; background: var(--surface-2); }
.stations-table tr.is-deleted-template td { text-decoration-color: var(--ink-faint); }
.station-days-cell { min-width: 250px; }
.station-vehicle-code-cell { direction: ltr; text-align: start; font-variant-numeric: tabular-nums; }
.active-days-selector { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Flat rounded toggle buttons — no outer glow/shadow, no hover lift. Reads clean
   and professional in both light and dark themes (state is shown by a solid fill,
   not a halo). */
.active-day-badge {
  min-width: 34px; height: 32px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink-soft);
  font: 600 12px/1 var(--body); cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.active-day-badge:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }
.active-day-badge.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.active-day-badge:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.active-day-badge:disabled { cursor: default; opacity: .6; }

/* Youth-mentoring ("חניכת נוער") form-required chip. Shown on a REGULAR shift card
   whose crew includes a youth trainee (חניך). Kept visually distinct from the ALS
   paramedic-form controls so the two decoupled systems never read as one. */
.mentoring-form-chip {
  display: inline-block; margin-inline-start: 8px;
  font-size: 12px; font-weight: 700; line-height: 1.6;
  padding: 2px 10px; border-radius: 999px;
  background: rgba(16, 122, 87, 0.12); color: #0f7a57;
  border: 1px solid rgba(16, 122, 87, 0.28);
}

/* ---------- Volunteer shift-request management ---------- */
.regular-requests-viewtoggle {
  display: inline-flex; gap: 6px; margin-bottom: 16px;
  padding: 4px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line);
}
.regular-requests-viewtab {
  border: 0; cursor: pointer; font: inherit; font-weight: 600;
  padding: 8px 18px; border-radius: 999px;
  color: var(--ink-soft); background: transparent;
  transition: background 0.15s, color 0.15s;
}
.regular-requests-viewtab:hover { color: var(--ink); }
.regular-requests-viewtab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.regular-requests-viewtab.is-active {
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-sm);
}
html[data-theme="dark"] .regular-requests-viewtoggle { background: #20262f; border-color: #343c47; }
html[data-theme="dark"] .regular-requests-viewtab.is-active { background: #2b333e; }
.volunteer-request-accordions { display: grid; gap: 14px; }
.volunteer-request-accordion {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.volunteer-request-accordion-head {
  width: 100%; min-height: 76px; padding: 16px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  border: 0; color: var(--ink); background: var(--surface-2); text-align: start;
  transition: background .2s ease, color .2s ease;
}
.volunteer-request-accordion-head:hover { background: var(--paper); }
.volunteer-request-accordion-head:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; }
.volunteer-request-accordion-copy { display: grid; gap: 3px; min-width: 0; }
.volunteer-request-accordion-copy strong { font-size: 17px; }
.volunteer-request-accordion-copy small { color: var(--ink-soft); font-size: 12.5px; font-weight: 400; }
.volunteer-request-accordion-meta { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.volunteer-request-count {
  min-width: 31px; height: 31px; padding: 0 9px; display: grid; place-items: center;
  border-radius: 999px; background: rgba(var(--brand-rgb),.14); color: var(--brand); font-weight: 800;
}
.volunteer-request-arrow { display: inline-flex; color: var(--ink-soft); transition: transform .2s ease; }
.volunteer-request-accordion.is-open .volunteer-request-arrow { transform: rotate(180deg); }
.volunteer-request-accordion-body { border-top: 1px solid var(--line); background: var(--surface); }
.volunteer-request-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.volunteer-request-empty { margin: 0; padding: 24px 18px; color: var(--ink-soft); }
.regular-requests-table { margin: 0; min-width: 760px; }
.regular-requests-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.escort-shortage-grid {
  padding: 8px 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px;
}
.escort-shortage-grid .escort-shortage-card { min-width: 0; }
.escort-shortage-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  padding: 7px 8px;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 4px;
}
.escort-shortage-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.escort-shortage-date {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
}
.escort-shortage-band {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
}
.escort-shortage-band.is-morning { background: var(--gold); }
.escort-shortage-band.is-evening { background: var(--teal); }
.escort-shortage-band.is-night { background: #3b3a6b; }
.escort-shortage-band.is-other { background: var(--ink-faint); }
.escort-shortage-station {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}
.escort-shortage-driver {
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.25;
}
.escort-shortage-status {
  justify-self: start;
  font-size: 11.5px;
  padding: 2px 8px;
}
.escort-shortage-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.escort-shortage-assign {
  justify-self: start;
  padding-inline: 10px;
  min-height: 30px;
  font-size: 12px;
}
.escort-shortage-days {
  display: grid;
  gap: 8px;
  padding: 8px;
}
.escort-shortage-day-accordion {
  border-radius: 10px;
  box-shadow: none;
}
.escort-shortage-day-head {
  min-height: 0;
  padding: 8px 12px;
  gap: 10px;
}
.escort-shortage-day-head .volunteer-request-accordion-copy strong {
  font-size: 15px;
  line-height: 1.25;
}
.escort-shortage-day-head .volunteer-request-count {
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  font-size: 12px;
}
.escort-assign-modal {
  width: min(460px, calc(100vw - 24px));
}
.escort-assign-fields {
  display: grid;
  gap: 8px;
  padding: 10px 12px 6px;
}
.escort-assign-row {
  display: grid;
  gap: 5px;
}
.escort-assign-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
}
.escort-assign-combo {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.escort-assign-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.escort-assign-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-soft);
}
.escort-assign-caret {
  width: 34px;
}
.escort-assign-modal .swap-modal-actions {
  padding: 8px 12px 12px;
}
.escort-shortage-card.is-morning {
  background: color-mix(in srgb, var(--gold) 8%, var(--surface-2));
}
.escort-shortage-card.is-evening {
  background: color-mix(in srgb, var(--teal) 10%, var(--surface-2));
}
.escort-shortage-card.is-night {
  background: color-mix(in srgb, #3b3a6b 12%, var(--surface-2));
}
.req-status {
  display: inline-block; font-size: 12.5px; font-weight: 700;
  padding: 2px 10px; border-radius: 999px; line-height: 1.6;
  border: 1px solid transparent;
}
.req-status-pending { background: rgba(210, 150, 20, 0.14); color: #8a5a00; border-color: rgba(210, 150, 20, 0.3); }
.req-status-approved { background: rgba(30, 140, 70, 0.14); color: #1e7a45; border-color: rgba(30, 140, 70, 0.3); }
.req-status-rejected { background: rgba(200, 50, 50, 0.12); color: #b33; border-color: rgba(200, 50, 50, 0.28); }

/* Per-request vehicle-type badge inside each request row: makes it explicit
   whether the volunteer applied for the white ambulance (לבן) or ATAN (אט״ן). */
.request-vehicle-badge {
  display: inline-block; margin-top: 6px;
  font-size: 12.5px; font-weight: 700; line-height: 1.5;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid transparent;
}
.request-vehicle-badge-white {
  background: rgba(40, 110, 200, 0.12); color: #1f5fae; border-color: rgba(40, 110, 200, 0.3);
}
.request-vehicle-badge-atan {
  background: rgba(190, 60, 30, 0.12); color: #b3401f; border-color: rgba(190, 60, 30, 0.3);
}

html[data-theme="dark"] .volunteer-request-accordion {
  background: #1b2027;
  border-color: #343c47;
  box-shadow: 0 14px 34px rgba(0,0,0,.24);
}
html[data-theme="dark"] .volunteer-request-accordion-head { background: #20262f; }
html[data-theme="dark"] .volunteer-request-accordion-head:hover { background: #252c36; }
html[data-theme="dark"] .volunteer-request-accordion-body { background: #1b2027; border-color: #343c47; }

@media (max-width: 700px) {
  .volunteer-request-accordion-head { min-height: 68px; padding: 14px; gap: 10px; }
  .volunteer-request-accordion-copy small { font-size: 11.5px; }
  .escort-shortage-day-head { padding: 8px 10px; gap: 8px; }
  .escort-shortage-day-head .volunteer-request-accordion-copy strong { font-size: 14px; }
  .escort-shortage-grid { padding: 6px 8px; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .escort-assign-modal { width: min(460px, calc(100vw - 16px)); }
  .escort-assign-fields { padding-inline: 10px; }
}

@media (min-width: 1120px) {
  .escort-shortage-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

/* Volunteer: pending-request marker on a calendar day + the status/cancel modal. */
.day-cell.has-pending-request { border-color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand-soft); }
.day-request-mark {
  display: block; margin-top: 2px; font-size: 10.5px; font-weight: 700;
  color: var(--brand-deep); background: var(--brand-soft);
  border-radius: 6px; padding: 1px 5px; line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Chanich calendar prompt: a mentor-available regular shift on this day. */
.day-cell.has-mentor-shift { border-color: #1e7a45; box-shadow: inset 0 0 0 1.5px rgba(30,122,69,.18); }
.day-mentor-mark {
  display: block; margin-top: 2px; font-size: 10px; font-weight: 700;
  color: #1e7a45; background: rgba(30,122,69,.12);
  border-radius: 6px; padding: 1px 5px; line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
/* Mentorship-forms portal + admin gallery. */
.mentorship-upload-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 16px 18px; margin-bottom: 18px; }
.mentorship-upload-title { margin: 0 0 12px; font-size: 16px; }
.mentorship-upload-form { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; }
.mentorship-upload-form .field { min-width: 170px; }
/* Coverage crew editor ("עריכת צוות אבטחה") — structured per-vehicle assignment blocks
   generated from the event's fleet. Each vehicle spans the full form width and its
   crew fields wrap cleanly on any viewport. */
.coverage-crew-form { flex-direction: column; align-items: stretch; }
.coverage-vehicle-block {
  flex-basis: 100%;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2, var(--paper));
  padding: 12px 14px;
}
.coverage-vehicle-title { font-size: 14px; font-weight: 700; color: var(--ink-soft); margin-bottom: 10px; }
.coverage-vehicle-fields { display: flex; flex-wrap: wrap; gap: 14px; }
.coverage-vehicle-fields .field { min-width: 200px; flex: 1 1 200px; }
.coverage-crew-empty { flex-basis: 100%; width: 100%; }
/* Pending-requests badge on the "אבטחות — ניהול" event rows: a small burgundy count
   pill that flags events with escort requests awaiting approval. */
.coverage-pending-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--danger-soft);
  color: var(--danger-deep);
  vertical-align: middle;
}
/* Digital evaluation document ("טופס משמרת לחניכ/ה") — on-screen form. */
.eval-doc .eval-bsd { text-align: center; font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.eval-doc-title { text-align: center; font-size: 20px; margin: 0 0 8px; }
.eval-intro { font-size: 12.5px; color: var(--ink-soft); text-align: center; margin: 0 0 14px; line-height: 1.5; }
.eval-form { display: block; }
.eval-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.eval-admin-field { min-width: 0; }
.eval-admin-field > span { display: block; font-size: 12.5px; color: var(--ink-soft); margin-bottom: 4px; }
.eval-trainee-locked { font-weight: 600; background: var(--paper-soft, #f3f4f6); color: var(--ink); cursor: default; }
.eval-trainee-locked:focus { outline: none; box-shadow: none; }
.eval-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.eval-seg-opt { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; font-size: 13px; }
.eval-seg-opt input { margin: 0; }
.eval-group-title { margin: 18px 0 8px; font-size: 15px; border-inline-start: 4px solid var(--brand); padding-inline-start: 10px; }
.eval-matrix { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.eval-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: var(--paper); }
.eval-row-label { font-size: 13.5px; font-weight: 600; flex: 1 1 200px; }
.eval-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.eval-opt { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 6px; padding: 4px 9px; cursor: pointer; font-size: 13px; }
.eval-opt input { margin: 0; }
.eval-opt-na { color: var(--ink-soft); }
.eval-note-area, .eval-self-field textarea { width: 100%; resize: vertical; }
.eval-self-title { margin-top: 22px; border-top: 2px solid var(--line); padding-top: 12px; }
.eval-self-note { font-size: 12.5px; color: var(--ink-soft); font-style: italic; margin: 0 0 10px; }
.eval-self-field { display: block; margin-bottom: 12px; }
.eval-self-field > span { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 4px; }
/* Trainee "המשמרות שלי" self-feedback gate message shown under the disabled
   "צפייה במשוב" button until the trainee submits their own משוב עצמי. */
.eval-gate-msg { font-size: 11px; color: var(--ink-soft); margin-top: 4px; max-width: 220px; line-height: 1.4; }
.eval-card-status { font-size: 11.5px; font-weight: 700; margin-top: 6px; }
.eval-card-status.is-done { color: #167a3c; }
.eval-card-status.is-waiting { color: #b06a00; }
.eval-card-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.eval-card-actions .btn-trash { width: 30px; height: 30px; margin-inline-start: auto; }
.mentorship-group { margin-bottom: 22px; }
.mentorship-group-title { margin: 0 0 10px; font-size: 15px; border-inline-start: 4px solid var(--brand); padding-inline-start: 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mentorship-graduate-btn { margin-inline-start: auto; flex: 0 0 auto; }
.mentorship-shift-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.mentorship-filter-btn {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  padding: 7px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.mentorship-filter-btn.is-active {
  background: color-mix(in srgb, var(--brand) 12%, var(--paper));
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
  color: var(--brand-700, var(--brand));
}
.mentorship-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.mentorship-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 10px; }
.mentorship-card-meta { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.mentorship-shift-card { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.mentorship-shift-head { display: flex; align-items: start; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mentorship-shift-row { display: flex; gap: 8px; color: var(--ink-soft); font-size: 13px; }
.mentorship-shift-row strong { color: var(--ink); font-size: 12.5px; }
.mentorship-shift-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 800;
}
.mentorship-shift-status.is-pending { background: #fff2df; color: #b06a00; }
.mentorship-shift-status.is-done { background: #e8f7ee; color: #167a3c; }
.mentorship-thumb { display: block; inline-size: 100%; block-size: 150px; object-fit: cover; border-radius: 8px; background: var(--line-faint); }
.mentorship-card-uploader { font-size: 11.5px; color: var(--ink-soft); margin-top: 6px; }
.request-status-msg { font-weight: 700; color: var(--ink); }
.request-status-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-top: 1px solid var(--line);
}
.request-status-shift { font-weight: 600; }
.btn-cancel-request {
  appearance: none; border: 0; cursor: pointer; background: none;
  color: #c0392b; font-weight: 700; font-size: 14px; text-decoration: underline;
  padding: 4px 2px;
}
.btn-cancel-request:hover { color: #922b21; }
.btn-cancel-request:disabled { opacity: .5; cursor: default; }

/* Admin daily roster: pending volunteer requests, strictly separated by category. */
.vol-req-panel { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 14px 16px; }
.vol-req-head { font-weight: 800; font-size: 15px; margin-bottom: 10px; }
.vol-req-empty { color: var(--ink-soft); font-size: 13px; margin: 0; }
.vol-req-section { margin-bottom: 12px; border-inline-start: 4px solid var(--line-strong); padding-inline-start: 10px; }
.vol-req-trainee { border-inline-start-color: #2563eb; }
.vol-req-youth { border-inline-start-color: #b7791f; }
.vol-req-adult { border-inline-start-color: #1e7a45; }
.vol-req-section-title { font-weight: 700; font-size: 13.5px; margin-bottom: 6px; }
.vol-req-section-empty { color: var(--ink-faint); font-size: 13px; }
.vol-req-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 5px 0; }
.vol-req-name { font-weight: 600; }
.vol-req-shift { font-size: 12.5px; color: var(--ink-soft); }
.vol-req-actions { display: inline-flex; gap: 6px; margin-inline-start: auto; }

/* Mentorship-coordinator self-request row inside each shift card. */
.mentor-selfreq { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.mentor-selfreq-status { font-size: 12.5px; color: var(--ink-soft); }

/* ---------- Team placement drawer ("בחירת צוות") ---------- */
.team-drawer-overlay { padding: 0; align-items: stretch; justify-content: flex-start; }
.team-drawer {
  margin-inline-start: auto; inline-size: min(460px, 100%); block-size: 100%;
  overflow-y: auto; display: flex; flex-direction: column; gap: 14px;
  background: var(--paper); box-shadow: var(--shadow-md); padding: 20px 22px;
  transform: translateX(24px); opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
}
.team-drawer.is-open { transform: translateX(0); opacity: 1; }
.team-drawer-head { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.team-drawer-title { margin: 0 0 4px; font-size: 18px; }
.team-drawer-sub { margin: 0; font-size: 13px; color: var(--ink-soft); }
.team-drawer-body { display: flex; flex-direction: column; gap: 14px; flex: 1 1 auto; }
.team-drawer-empty { color: var(--ink-soft); font-size: 14px; }
.team-station { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.team-station-name { font-weight: 800; margin-bottom: 8px; }
.team-station-requested {
  margin-inline-start: 8px; vertical-align: middle;
  font-size: 11.5px; font-weight: 700; line-height: 1.6;
  padding: 2px 9px; border-radius: 999px;
  background: rgba(16, 122, 87, 0.12); color: #0f7a57;
  border: 1px solid rgba(16, 122, 87, 0.28);
}
.team-slot {
  display: flex; align-items: center; gap: 10px; padding: 8px 6px;
  border-radius: 8px; cursor: pointer; border: 1px solid transparent;
}
.team-slot:hover { background: var(--line-faint); }
.team-slot input { accent-color: var(--brand); }
.team-slot-label { font-weight: 700; min-inline-size: 70px; }
.team-slot-who { font-size: 12.5px; color: var(--ink-soft); }
.team-slot.is-open .team-slot-who { color: #1e7a45; }
.team-slot.is-filled .team-slot-who { color: #b7791f; }
.team-drawer-actions { display: flex; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }


/* ---------- Forms checklist tab ---------- */
.forms-toolbar {
  display: flex; flex-wrap: wrap; align-items: end; gap: 14px;
  margin-bottom: 18px;
}
.forms-toolbar .field { min-width: 170px; }
.forms-toolbar .forms-search { flex: 1 1 280px; }
.whatsapp-filter-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.whatsapp-filter-btn {
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink);
  padding: 8px 13px; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.whatsapp-filter-btn:hover {
  border-color: var(--brand); color: var(--brand-deep);
}
.whatsapp-filter-btn.is-active {
  background: var(--brand); color: #fff; border-color: var(--brand);
}

/* Schedule audit log ("צפייה בעריכות הסידור") */
.audit-toolbar .field { min-width: 150px; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.audit-table { width: 100%; }
.audit-table td { vertical-align: top; }
.audit-editor-name { font-weight: 600; color: var(--ink); }
.audit-editor-email { font-size: 12px; color: var(--ink-soft); direction: ltr; text-align: start; }
.audit-time { white-space: nowrap; font-variant-numeric: tabular-nums; direction: ltr; text-align: start; }
.audit-station { font-size: 12px; color: var(--ink-soft); }
.audit-badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.audit-badge.is-create { background: var(--ok-soft); color: var(--ok); }
.audit-badge.is-update { background: var(--surface); color: var(--ink-soft); border: 1px solid var(--line, #d9d9d9); }
.audit-badge.is-delete { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }

.forms-trainee-field { min-width: 190px; }
.forms-table .forms-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.forms-table tr.is-done td { background: var(--ok-soft); }
.forms-table tr.is-done:hover td { background: var(--ok-soft); }

/* Past-shifts accordion placed below the "המשמרות שלי" upcoming table. */
.my-shifts-past-accordion { margin-block-start: 16px; }

.form-check {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft); cursor: pointer;
}
.form-check input { width: 18px; height: 18px; accent-color: var(--ok); cursor: pointer; }
.form-check .form-check-text { user-select: none; }
.form-check.is-locked { cursor: not-allowed; color: var(--ink-faint); }
.form-check.is-locked input { cursor: not-allowed; }
.forms-table tr.is-done .form-check .form-check-text { color: var(--ok); }

/* Secondary "לא נדרש טופס" toggle stacked under the completion checkbox in the
   forms checklist (managers only). Muted accent so it reads as a side action. */
.form-check-nr {
  display: flex; margin-block-start: 7px; font-size: 12.5px; font-weight: 500;
  color: var(--ink-faint);
}
.form-check-nr input { accent-color: var(--ink-soft); }

/* Static "לא נדרש" label shown in place of the completion toggle when a row
   needs no evaluation form (an event, or a slot flagged not-required). */
.form-check-na {
  font-size: 13.5px; font-weight: 600; color: var(--ink-faint); user-select: none;
}
.forms-table .forms-paramedic { white-space: nowrap; min-width: 140px; }
.forms-table .forms-paramedic.is-locked { color: var(--ink-faint); }

/* Admin-only pending-form notice under a still-"טרם בוצע" row: days elapsed since
   the shift and the paramedic who staffed it, so a manager can gauge staleness and
   know whom to chase. Small, muted, stacked chips. */
.forms-pending-note {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  margin-block-start: 7px; font-size: 12px; font-weight: 500;
  color: var(--ink-faint);
}
.forms-pending-note .forms-pending-elapsed { font-weight: 600; color: var(--gold); }
.forms-pending-note .forms-pending-medic { color: var(--ink-soft); }

/* Missing-forms report section ("דוח טפסים חסרים"). */
.missing-forms-section { margin-block-end: 1.5rem; }

/* Submitted-forms register (manager view): completed trainee forms with an
   inline per-record editor. */
.submitted-forms-section { margin-block-start: 1.75rem; }
.submitted-forms-table .form-status-badge {
  display: inline-block; font-size: 12px; font-weight: 700;
  padding: 2px 10px; border-radius: 999px;
  color: var(--ok); background: var(--ok-soft);
}
.submitted-actions-cell { white-space: nowrap; }
.btn-edit-form.is-active { background: var(--brand-soft); color: var(--brand-deep); }
.submitted-editor {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  margin-block-start: 8px; padding: 8px 10px;
  background: var(--surface-2); border-radius: 10px;
}
.submitted-editor .form-check { margin: 0; }

/* Form Tracking dashboard accordion (manager view). */
.tracking-accordion-card { margin-bottom: 12px; }
.tracking-accordion-head {
  width: 100%;
  border: 0;
  background: var(--surface-2);
  color: var(--ink);
  display: block;
  padding: 12px 14px;
  text-align: start;
  font-family: var(--body);
  border-radius: 10px;
}
.tracking-accordion-head:hover { background: var(--paper-2); }
.tracking-accordion-head:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.tracking-accordion-title {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  min-width: 0;
}
.tracking-accordion-text {
  min-width: 0;
  white-space: normal;
  line-height: 1.45;
  color: var(--ink-soft);
}
.tracking-accordion-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  transition: transform .18s ease;
}
.tracking-accordion-arrow.is-open { transform: rotate(180deg); }
.tracking-accordion-body { border-top: 1px solid var(--line); }

@media (max-width: 700px) {
  .forms-toolbar { flex-direction: column; align-items: stretch; }
  .forms-toolbar .field, .forms-toolbar .forms-search { min-width: 0; width: 100%; }
}

/* ---------- Station configuration form ---------- */
.station-form-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm);
  margin-bottom: 22px;
}
.station-form {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto; gap: 14px; align-items: end;
}
.station-active-days-field { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; }
.station-active-days-field legend { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.roster-form { grid-template-columns: minmax(0, 1fr) minmax(220px, .9fr) auto; }
.roster-phone-input {
  width: 100%;
  direction: ltr;
  text-align: left;
}
.roster-phone-input.is-invalid {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px rgba(var(--danger-rgb), .14);
}
.roster-phone-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.bg-slate-800\/60 { background: rgba(30, 41, 59, 0.6) !important; }
.border { border-style: solid; border-width: 1px; }
.border-slate-700\/60 { border-color: rgba(51, 65, 85, 0.6) !important; }
.text-slate-100 { color: #f1f5f9 !important; }
.rounded-lg { border-radius: 12px !important; }
.px-3 { padding-inline: 12px !important; }
.py-1\.5 { padding-block: 6px !important; }
.focus\:outline-none:focus { outline: none !important; }
.focus\:border-indigo-500:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18);
}
.placeholder-slate-500::placeholder { color: #64748b !important; }
.roster-dark-input {
  width: 100%;
  min-width: 0;
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.4;
}
.roster-dark-input:disabled {
  opacity: .72;
  cursor: not-allowed;
}
.roster-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}
.roster-main-layout {
  display: grid;
  gap: 14px;
}
.roster-mode-toggle.is-active {
  background: var(--brand-soft);
  color: var(--brand-deep);
  border-color: rgba(var(--brand-rgb), .22);
}
.roster-groups-layout {
  display: grid;
  gap: 12px;
}
.roster-bucket .user-group-body {
  min-height: 96px;
}
.roster-drop-zone {
  transition: background-color .18s ease, box-shadow .18s ease;
}
.roster-drop-zone.is-drag-over {
  background: rgba(var(--brand-rgb), .08);
  box-shadow: inset 0 0 0 2px rgba(var(--brand-rgb), .24);
}
.roster-row.is-draggable {
  cursor: grab;
}
.roster-row.is-draggable td {
  transition: opacity .18s ease, background-color .18s ease;
}
.roster-row.is-dragging td {
  opacity: .56;
}
.roster-readonly-badge,
.roster-readonly-text {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-size: 13px;
  line-height: 1.2;
}
.roster-readonly-badge {
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(15, 23, 42, .48);
  color: #cbd5e1;
  font-weight: 600;
  white-space: nowrap;
}
.roster-readonly-badge.is-on.is-ok {
  background: rgba(34, 197, 94, .16);
  border-color: rgba(34, 197, 94, .28);
  color: #86efac;
}
.roster-readonly-badge.is-on.is-brand {
  background: rgba(99, 102, 241, .14);
  border-color: rgba(99, 102, 241, .26);
  color: #c7d2fe;
}
.roster-readonly-badge.is-on.is-driver {
  background: rgba(14, 165, 233, .14);
  border-color: rgba(14, 165, 233, .26);
  color: #bae6fd;
}
.roster-readonly-badge.is-off {
  background: rgba(51, 65, 85, .38);
  border-color: rgba(100, 116, 139, .18);
  color: #94a3b8;
}
.roster-readonly-text {
  color: var(--ink-soft);
}
.roster-readonly-text.is-empty {
  color: var(--ink-faint);
}
.roster-name-text {
  font-weight: 600;
  color: var(--ink);
}
.roster-bucket .users-empty {
  margin: 0;
  padding: 10px 4px 4px;
}
.alias-manager-card {
  margin-top: 8px;
}
.alias-manager-head {
  align-items: flex-start;
}
.alias-manager-table th,
.alias-manager-table td {
  vertical-align: middle;
}
.alias-manager-raw {
  font-weight: 700;
  color: var(--ink);
}
.alias-manager-assign {
  display: flex;
  gap: 8px;
  align-items: center;
}
.alias-manager-input {
  min-width: 220px;
  width: 100%;
  font-family: var(--body);
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
}
.alias-manager-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.station-form .field { display: grid; gap: 6px; }
.station-form .field > span { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.station-form input, .station-form select {
  font-family: var(--body); font-size: 14px; padding: 11px 13px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink); width: 100%;
}
.station-form input:focus, .station-form select:focus {
  outline: none; border-color: var(--brand); background: var(--field-bg);
  box-shadow: 0 0 0 4px var(--brand-soft);
}
.shifts-empty {
  margin: 0; padding: 22px; text-align: center;
  color: var(--ink-faint); font-size: 14px;
}
@media (max-width: 700px) {
  .station-form { grid-template-columns: 1fr; }
  .station-form .btn-primary { width: 100%; }
  .alias-manager-assign {
    flex-direction: column;
    align-items: stretch;
  }
  .alias-manager-input {
    min-width: 0;
  }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; inset-block-end: 26px; inset-inline-start: 50%;
  transform: translate(-50%, 14px);
  z-index: 100;
  background: var(--ink); color: var(--surface);
  width: min(560px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  margin-inline: 12px;
  padding: 13px 18px;
  border-radius: 999px;
  font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; gap: 10px;
  justify-content: center;
  text-align: center;
  line-height: 1.45;
  white-space: normal;
  word-break: break-word;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.ok { background: var(--ok); }
@media (max-width: 767px) {
  .toast {
    inset-block-end: calc(80px + env(safe-area-inset-bottom, 0px));
    width: min(100%, calc(100vw - 20px));
    max-width: calc(100vw - 20px);
    padding: 12px 14px;
    border-radius: 16px;
    gap: 8px;
  }
}
.toast-mark {
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,.22); display: grid; place-items: center; font-size: 12px;
}

/* ---------- Availability lock configuration (admin) ---------- */
.lock-config-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm);
  margin-bottom: 22px;
}
.bulk-users-card { margin-bottom: 18px; }
.bulk-users-form {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
  gap: 14px 18px;
  align-items: end;
  margin-top: 16px;
}
.bulk-users-form .field { display: grid; gap: 7px; }
.bulk-users-form .field > span { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.bulk-users-type-field { grid-column: 1 / -1; }
.bulk-users-form textarea,
.bulk-users-form select,
.bulk-users-form input {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  padding: 11px 13px;
}
.bulk-users-form textarea { resize: vertical; min-height: 150px; direction: rtl; }
.bulk-users-form textarea:focus,
.bulk-users-form select:focus,
.bulk-users-form input:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--field-bg);
  box-shadow: 0 0 0 4px var(--brand-soft);
}
.bulk-users-form small { color: var(--ink-faint); line-height: 1.5; }
.bulk-users-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bulk-users-result { margin: 0; font-size: 13px; font-weight: 700; }
.bulk-users-result.is-error { color: var(--danger); }
.bulk-users-result.is-success { color: var(--ok); }
.bulk-users-review { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.bulk-review-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px; border: 1px solid var(--line, #d9dee6); border-radius: 10px; background: var(--panel, #fff); }
.bulk-review-row.is-bad { border-color: var(--danger); }
.bulk-review-info { font-size: 13px; }
.bulk-review-meta { color: var(--muted, #6b7280); font-weight: 600; }
.bulk-review-badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.bulk-review-badge.is-youth { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.bulk-review-badge.is-adult { background: color-mix(in srgb, var(--brand, #2563eb) 16%, transparent); color: var(--brand, #2563eb); }
.bulk-review-prompt { font-size: 13px; font-weight: 700; color: var(--warn, #b45309); flex: 1 1 auto; }
.bulk-review-choices { display: flex; gap: 8px; }
.bulk-review-choice.is-selected { background: var(--brand, #2563eb); color: #fff; border-color: var(--brand, #2563eb); }
@media (max-width: 760px) {
  .bulk-users-form { grid-template-columns: 1fr; }
  .bulk-users-actions { grid-column: auto; }
}
.lock-config-head h3 { font-size: 18px; }
.lock-config-head .page-sub { margin-top: 4px; max-width: 70ch; }
.lock-form {
  display: grid; grid-template-columns: auto 1fr 1fr auto; gap: 14px; align-items: end;
  margin-top: 16px;
}
.lock-form .field { display: grid; gap: 6px; }
/* Keep conditionally-hidden lock-form fields (e.g. the specific-trainee picker)
   hidden — the display:grid above sits later in the source than the general
   .field[hidden] rule and would otherwise win and re-show them. */
.lock-form .field[hidden] { display: none; }
.lock-form .field > span { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.lock-form input, .lock-form select {
  font-family: var(--body); font-size: 14px; padding: 11px 13px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink); width: 100%;
}
.lock-form input:focus, .lock-form select:focus {
  outline: none; border-color: var(--brand); background: var(--field-bg);
  box-shadow: 0 0 0 4px var(--brand-soft);
}
.lock-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  padding-bottom: 11px; white-space: nowrap;
}
.lock-toggle input { width: 17px; height: 17px; accent-color: var(--brand); }
.holidays-collapse { margin-bottom: 22px; }
.holidays-collapse .user-group-head { background: var(--surface); }
.holidays-collapse .user-group-head:hover { background: var(--surface-2); }
.holidays-collapse .user-group-sub { color: var(--ink-soft); }
.holidays-collapse.is-open > .user-group-body { overflow: visible; }
.holidays-count-badge {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand-deep);
  background: var(--brand-soft);
  white-space: nowrap;
}
.holidays-toolbar { margin-top: 14px; align-items: center; }
.show-past-toggle { padding-bottom: 0; font-size: 12.5px; }
.holidays-table-scroll {
  max-height: 220px;
  overflow-y: auto;
}
.holidays-table-scroll .stations-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
}
@media (max-width: 700px) {
  .lock-form { grid-template-columns: 1fr; }
  .lock-form .btn-primary { width: 100%; }
  .holidays-count-badge { font-size: 11.5px; padding: 3px 8px; }
}

/* Per-stage shift-target form on the admin dashboard: four number fields plus a
   save button, laid out as a responsive grid and styled like the lock forms. */
.stage-targets-form {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end;
  margin-top: 16px;
}
.stage-targets-form .field { display: grid; gap: 6px; }
.stage-targets-form .field > span { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.stage-targets-form input {
  font-family: var(--body); font-size: 14px; padding: 11px 13px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink); width: 100%;
}
.stage-targets-form input:focus {
  outline: none; border-color: var(--brand); background: var(--field-bg);
  box-shadow: 0 0 0 4px var(--brand-soft);
}
.stage-targets-form .btn-primary { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 700px) {
  .stage-targets-form { grid-template-columns: 1fr 1fr; }
  .stage-targets-form .btn-primary { width: 100%; }
}

/* ---------- Published-weeks list (trainee schedule visibility) ---------- */
/* The publish form is a single week picker + a "publish" button. */
.publish-config-card .lock-form {
  grid-template-columns: 1fr auto;
}
.published-weeks-accordion {
  margin-block-start: 18px; border: 1px solid var(--line);
  border-radius: var(--radius-md); overflow: hidden; background: var(--surface-2);
}
.published-weeks-toggle,
.published-week-head {
  inline-size: 100%; border: 0; color: var(--ink); cursor: pointer;
  display: flex; align-items: center; gap: 10px; text-align: start;
  font-family: var(--body); background: transparent;
}
.published-weeks-toggle { padding: 14px 16px; font-weight: 700; }
.published-weeks-toggle:hover,
.published-week-head:hover { background: var(--surface-3); }
.published-weeks-toggle-title { flex: 1; font-size: 15px; }
.published-weeks-count {
  min-inline-size: 28px; block-size: 24px; padding-inline: 8px; border-radius: 999px;
  display: inline-grid; place-items: center; background: var(--brand-soft); color: var(--brand);
  font-size: 12px; font-weight: 700;
}
.published-weeks-chevron,
.published-week-chevron { display: inline-grid; place-items: center; transition: transform .18s ease; }
.published-weeks-toggle[aria-expanded="true"] .published-weeks-chevron,
.published-week-head[aria-expanded="true"] .published-week-chevron { transform: rotate(90deg); }
.published-weeks-body { border-block-start: 1px solid var(--line); }
.published-weeks-list {
  list-style: none; margin: 0; padding: 10px;
  display: grid; gap: 8px;
}
.published-week-item {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--field-bg); overflow: hidden;
}
.published-week-head { padding: 11px 13px; justify-content: space-between; }
.published-week-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.published-week-item > .published-week-body {
  padding: 10px 13px; border-block-start: 1px solid var(--line);
  background: var(--surface-2); text-align: end;
}
.published-empty { padding: 12px; font-size: 13.5px; color: var(--ink-soft); }
.btn-sm { padding: 7px 12px; font-size: 13px; }
@media (max-width: 700px) {
  .publish-config-card .lock-form { grid-template-columns: 1fr; }
}

/* ---------- Availability submission + matrix ---------- */
.avail-card {
  margin: 0; padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.avail-card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.avail-card-head h4 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 17px; }
.avail-hint { font-size: 12.5px; color: var(--ink-faint); font-weight: 600; }
.lock-pill {
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 10px; border-radius: 999px;
  background: var(--danger-soft); color: var(--danger-deep);
}
.lock-banner {
  margin: 0 0 14px; padding: 11px 14px;
  background: var(--danger-soft); color: var(--danger-deep);
  border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600;
}
.avail-rows { display: grid; gap: 10px; }
.avail-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 14px;
}
.avail-shift-name {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 14px; color: var(--ink);
}
.avail-options { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.avail-opt {
  font-family: var(--body); font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--field-bg); color: var(--ink-soft);
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.avail-opt:not(:disabled):hover { border-color: var(--ink-faint); }
.avail-opt:disabled { opacity: .55; cursor: not-allowed; }
/* Night-shift restriction ("לא זמין למשמרות לילה"): the blocked availability row /
   weekly cell is dimmed and captioned so the trainee sees why nights are off. */
.avail-row.is-blocked .avail-options { opacity: .5; }
.weekly-cell.is-blocked .weekly-opts { opacity: .5; }
.avail-blocked-note { margin-inline-start: 8px; font-size: 12px; font-weight: 600; color: var(--danger); }
.avail-opt.prefer.is-active { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); box-shadow: 0 0 0 3px rgba(44,107,63,.12); }
.avail-opt.avoid.is-active  { background: var(--gold-soft); border-color: var(--gold); color: var(--gold); box-shadow: 0 0 0 3px rgba(184,138,62,.14); }
.avail-opt.cannot.is-active { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-deep); box-shadow: 0 0 0 3px rgba(var(--danger-rgb),.12); }
.avail-foot { margin-top: 16px; display: flex; justify-content: flex-end; }

.avail-empty { margin: 0; color: var(--ink-faint); font-size: 13.5px; font-style: italic; }
.avail-matrix-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.avail-matrix { width: 100%; border-collapse: collapse; background: var(--surface); }
.avail-matrix th, .avail-matrix td {
  text-align: start; padding: 10px 14px; font-size: 13.5px;
  border-bottom: 1px solid var(--line);
}
.avail-matrix th { background: var(--surface-2); font-weight: 700; color: var(--ink-soft); font-size: 12.5px; }
.avail-matrix tr:last-child td { border-bottom: none; }
.avail-matrix-name { font-weight: 600; }

/* Collapsible "אילוצי החניכים — תצוגה חיה" accordion. Wraps the live constraints
   matrix so it stays folded away by default and expands on demand. Dark-mode aware
   (see the html[data-theme="dark"] overrides below). */
.constraints-accordion.avail-matrix-card { padding: 0; overflow: hidden; }
.constraints-accordion-head {
  width: 100%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; text-align: start;
  background: var(--surface-2); color: var(--ink);
  font-family: var(--body);
}
.constraints-accordion-head:hover { background: var(--paper-2); }
.constraints-accordion-head:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; }
.constraints-accordion-copy { display: grid; gap: 3px; min-width: 0; }
.constraints-accordion-copy strong { font-family: var(--display); font-size: 16px; font-weight: 700; }
.constraints-accordion-copy small { font-size: 12px; color: var(--ink-faint); font-weight: 600; }
.constraints-accordion-arrow {
  flex: 0 0 auto; color: var(--ink-faint); font-size: 14px;
  transition: transform .18s ease;
}
.constraints-accordion.is-open .constraints-accordion-arrow { transform: rotate(180deg); }
.constraints-accordion-body { padding: 14px 16px 16px; border-top: 1px solid var(--line); }
html[data-theme="dark"] .constraints-accordion-head { background: #20262f; }
html[data-theme="dark"] .constraints-accordion-head:hover { background: #252c36; }
html[data-theme="dark"] .constraints-accordion-body { background: #1b2027; border-color: #343c47; }
.avail-cell {
  display: inline-block; font-size: 12px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
}
.avail-cell.prefer { background: var(--ok-soft); color: var(--ok); }
.avail-cell.avoid  { background: var(--gold-soft); color: var(--gold); }
.avail-cell.cannot { background: var(--danger-soft); color: var(--danger-deep); }
.avail-cell-empty { color: var(--ink-faint); }

/* ---------- Weekly availability grid (trainees) ---------- */
.weekly-view { width: 100%; }
.weekly-week-pick { margin-block-end: 16px; max-width: 340px; }
.weekly-week-pick .field { margin: 0; }
.weekly-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.weekly-loading { color: var(--ink-faint); font-size: 14px; padding: 8px 2px; }
.weekly-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 14px; }
.weekly-legend-item {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
}
.weekly-legend-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.weekly-legend-item.prefer .weekly-legend-dot { background: var(--ok); }
.weekly-legend-item.avoid  .weekly-legend-dot { background: var(--gold); }
.weekly-legend-item.cannot .weekly-legend-dot { background: var(--danger); }

.weekly-grid-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.weekly-grid { width: 100%; border-collapse: collapse; background: var(--surface); }
.weekly-grid th, .weekly-grid td {
  text-align: center; padding: 10px 12px; border-bottom: 1px solid var(--line);
  border-inline-end: 1px solid var(--line);
}
.weekly-grid th:last-child, .weekly-grid td:last-child { border-inline-end: none; }
.weekly-grid tr:last-child td { border-bottom: none; }
.weekly-grid thead th {
  background: var(--surface-2); font-weight: 700; color: var(--ink-soft); font-size: 13px;
  position: sticky; top: 0;
}
.weekly-grid thead th .shift-band { display: inline-block; vertical-align: middle; margin-inline-end: 7px; }
.weekly-corner { text-align: start; }
.weekly-day {
  text-align: start; white-space: nowrap; background: var(--surface-2);
  font-weight: 700; min-width: 92px;
}
.weekly-day-name { display: block; font-size: 14px; color: var(--ink); }
.weekly-day-date { display: block; font-size: 12px; color: var(--ink-faint); font-weight: 600; }
.weekly-cell { vertical-align: middle; }
.weekly-opts { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.weekly-opts .avail-opt { padding: 6px 12px; }
.weekly-foot { margin-top: 16px; }

/* ---------- Smart trainee assignment (admin) ---------- */
/* The slot's input shares its row with the "שבץ חניך" trigger. */
.combo { display: flex; align-items: stretch; gap: 6px; }
.combo .combo-input { flex: 1 1 auto; min-width: 0; }
/* Time-released crew masking: the placeholder shown to trainees/viewers before
   the reveal window reads as a muted, non-name hint rather than an assignment. */
.combo-input.is-crew-masked {
  font-style: italic;
  color: var(--ink-faint);
  background: var(--surface-2, rgba(127, 127, 127, .08));
  text-align: start;
}
/* Driver-lock (מניעת דריסת נהג): an assigned White-Ambulance driver seat that only
   a high-level admin may change. The name stays fully legible so riders can read
   it; a faint lock tint marks it as protected/read-only. */
.combo-input.is-driver-locked {
  background: var(--surface-2, rgba(127, 127, 127, .08));
  cursor: not-allowed;
}
/* Youth-volunteer ("נוער") shift team line on "המשמרות שלי": the revealed crew, or
   the pre-window placeholder (italic/faint, matching the masked-crew treatment). */
.youth-team {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.youth-team-locked {
  font-style: italic;
  color: var(--ink-faint);
}

/* "שיבוץ צוותי" badge — displayed next to the station name on "המשמרות שלי" rows
   that originate from the generic driver/paramedic fields on a coverage event
   (as opposed to an explicit individual assignment). */
.generic-team-badge {
  display: inline-block;
  margin-inline-start: 4px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  color: var(--brand-deep);
  vertical-align: middle;
  white-space: nowrap;
}
.btn-assign {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; white-space: nowrap;
  padding: 0 12px;
  font-family: var(--body); font-size: 12.5px; font-weight: 600;
  color: var(--brand-deep); background: var(--brand-soft);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.btn-assign:hover { background: var(--brand); color: #fff; }
.btn-assign:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--brand-soft); }

/* Assignment popover — a screen-centered modal. It lives on <body> because both
   the daily shift cards and the monthly matrix clip their own overflow, and it
   stays dead-center regardless of how far the sheet has been scrolled, so the
   coordinator never has to chase it to the top or bottom of a long page. See
   positionAssignPop() in app.js and the .assign-backdrop dimmer below. */
.assign-pop {
  position: fixed; z-index: 1200;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 290px; max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 28px);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: assignPop .14s ease;
}
@keyframes assignPop {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* Dark, lightly-blurred backdrop dropped behind the popover so the board beneath
   is dimmed and click-blocked while an assignment is being made. Sits just under
   the popover's z-index; a click on it closes the picker (handled in app.js). */
.assign-backdrop {
  position: fixed; inset: 0; z-index: 1190;
  background: rgba(15, 18, 30, .5);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: assignBackdropIn .14s ease;
}
@keyframes assignBackdropIn { from { opacity: 0; } to { opacity: 1; } }
.assign-pop-head {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 12px 14px;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.assign-pop-titles { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.assign-pop-title { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13.5px; }
.assign-pop-title .shift-band { height: 16px; }
.assign-pop-sub { color: var(--ink-faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assign-pop-x {
  flex: 0 0 auto; border: none; background: transparent; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--ink-faint); padding: 0 2px;
}
.assign-pop-x:hover { color: var(--ink); }
.assign-pop-body { flex: 1 1 auto; min-height: 0; max-height: 60vh; overflow-y: auto; padding: 8px; }

/* "No form required" toggle. The base style is shared by the per-escort toggle
   under each ambulance escort field on a daily shift card and by the editable
   toggle inside the monthly matrix assignment picker. */
.noform-toggle {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  padding: 8px 10px; border-radius: 9px;
  background: var(--paper-2, #faf6ec); border: 1px dashed var(--line, #e2dac9);
}
.noform-toggle input { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; flex: 0 0 auto; }
.noform-toggle input:disabled { cursor: default; }

/* Compact variant sitting directly beneath an escort (מלווה) field. */
.noform-toggle-slot {
  margin-top: 6px; padding: 6px 8px;
  font-size: 11.5px; font-weight: 600; line-height: 1.3;
}

/* ---------- Task type (סוג המשימה) + trainee (משתלמים) list ---------- */
/* The task-type selector sits at the top of a shift card, between its head and
   the crew grid / trainee list it governs. */
.task-type-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px 0;
}
.task-type-row > label {
  font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
}
.task-type-select {
  font-family: var(--body); font-size: 14px; font-weight: 600;
  padding: 8px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--field-bg); color: var(--ink);
  min-width: 190px;
}
.task-type-select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.task-type-select:disabled { background: var(--surface-2); color: var(--ink-soft); cursor: not-allowed; border-style: dashed; }
/* The same bar carries the card-level "אט״ן" opt-in, immediately after the dropdown (see the
   .atan-toggle block below). On an editable card with no dropdown — a mentorship
   coordinator's, who edits the crew but not the task type — the opt-in gets the bar to
   itself, so the control keeps its position. */
.task-type-row.is-atan-only { padding-top: 10px; }

/* Read-only badge shown to viewers on an event task, in place of the dropdown. */
.task-type-badge {
  display: inline-block; margin: 12px 16px 0;
  padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  background: var(--brand-soft, rgba(0,0,0,.06)); color: var(--brand, var(--ink));
}

/* Free-form, stackable participants list shown on an event task type. */
.trainee-grid { padding: 14px 16px 4px; display: grid; gap: 10px; }
.trainee-grid-label { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.trainee-list { display: grid; gap: 8px; }
.trainee-row { display: flex; align-items: stretch; gap: 8px; }
.trainee-row .trainee-input {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--body); font-size: 14px; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--field-bg); color: var(--ink);
}
.trainee-row .trainee-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.trainee-row .trainee-input:disabled { background: var(--surface-2); color: var(--ink-soft); cursor: not-allowed; border-style: dashed; }
/* The editable trainee combobox: a text field plus an explicit dropdown caret,
   matching the crew selectors. The field free-types; the caret opens .name-menu. */
.trainee-combo { flex: 1 1 auto; min-width: 0; }
.combo-caret {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft);
  cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.combo-caret:hover { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }
.combo-caret svg { flex: none; }
/* Body-anchored searchable dropdown for a trainee combobox (fixed-positioned
   because the shift card clips overflow). */
.name-menu {
  position: fixed; z-index: 60; box-sizing: border-box;
  max-height: 264px; overflow-y: auto; padding: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
}
.name-menu-opt {
  display: block; width: 100%; text-align: start;
  padding: 8px 10px; border: none; border-radius: 8px; background: transparent;
  font-family: var(--body); font-size: 14px; color: var(--ink); cursor: pointer;
}
.name-menu-opt:hover, .name-menu-opt:focus { background: var(--brand-soft); outline: none; }
.name-menu-opt.is-current { font-weight: 700; color: var(--brand); }
/* The "שם בסידור / כינוי" that answered the search, next to the full name it belongs to.
   A caption on the option, not part of the value: the board stores the full name. */
.name-menu-alias {
  margin-inline-start: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--ink-faint);
}
.name-menu-empty { padding: 8px 10px; font-size: 12.5px; color: var(--ink-faint); }
/* Footer line stating that the option list was capped — shown on a field that searches the
   whole user directory, where an empty query can match hundreds of accounts. */
.name-menu-note {
  margin-block-start: 2px; padding: 7px 10px 3px;
  border-block-start: 1px solid var(--line);
  font-size: 11.5px; color: var(--ink-faint);
}
/* Group heading inside .name-menu — "מתוייגים כנהג" / "כל הסגל" on a נהג or פראמדיק
   seat. A caption, not an option: it is not focusable and never intercepts a click.
   Sticky so the heading stays readable while a long staff list scrolls under it. */
.name-menu-group {
  position: sticky; top: -6px;
  padding: 7px 10px 3px;
  background: var(--surface);
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  color: var(--ink-faint);
  pointer-events: none;
}
.name-menu-group + .name-menu-opt { margin-block-start: 1px; }
.btn-trainee-del {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft);
  cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-trainee-del:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-trainee-add {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--radius-sm);
  border: 1px dashed var(--line-strong); background: transparent; color: var(--brand, var(--ink));
  font-family: var(--body); font-size: 13px; font-weight: 700; cursor: pointer;
}
.btn-trainee-add:hover { background: var(--brand-soft, rgba(0,0,0,.05)); }
.btn-trainee-add svg { flex: none; }
.trainee-empty { font-size: 13px; color: var(--ink-soft); font-style: italic; }

/* When the crew grid is replaced by the trainee list, the note keeps its own row
   with the normal grid padding but no top padding from a preceding grid. */
.slot-grid.note-only { padding-top: 4px; }

/* Editable toggle inside the monthly matrix picker. */
.matrix-noform-toggle { margin: 6px 8px 8px; font-size: 12px; line-height: 1.35; }

.assign-group + .assign-group { margin-top: 6px; }
.assign-group-title {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px 4px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: var(--ink-soft);
}
.assign-group-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.assign-group-title.prefer::before { background: var(--ok); }
.assign-group-title.avoid::before  { background: var(--gold); }
.assign-group-title.none::before   { background: var(--ink-faint); }
.assign-group-title.cannot::before { background: var(--danger); }
/* Qualification grouping in the generic-crew picker: the staff-directory ticks for this
   seat ("מתוייגים כנהג" / "מתוייגים כפראמדיק") above everyone else ("כל הסגל"). */
.assign-group-title.qualified::before { background: var(--brand); }
.assign-group-title.everyone::before  { background: var(--ink-faint); }

.assign-item {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; margin-top: 2px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--field-bg); color: var(--ink);
  font-family: var(--body); font-size: 13.5px; text-align: start;
  cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.assign-item:hover { background: var(--surface-2); border-color: var(--line-strong); }
.assign-item.prefer { border-color: rgba(44,107,63,.4); }
.assign-item-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
/* Personal monthly progress shown right next to the name in the smart picker. */
.assign-item-quota {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.assign-item-quota.ok      { background: var(--ok-soft); color: var(--ok); }
.assign-item-quota.low     { background: var(--gold-soft); color: var(--gold); }
.assign-item-quota.neutral { background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line); }
.assign-item-busy { flex: 0 0 auto; font-size: 11px; color: var(--ink-faint); }
.assign-item-tag { flex: 0 0 auto; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.assign-item.prefer .assign-item-tag { background: var(--ok-soft); color: var(--ok); }
.assign-item.avoid  .assign-item-tag { background: var(--gold-soft); color: var(--gold); }
.assign-item.cannot .assign-item-tag { background: var(--danger-soft); color: var(--danger-deep); }
.assign-item.cannot {
  cursor: not-allowed; opacity: .6;
  background: var(--surface-2); border-style: dashed;
}
.assign-item.cannot:hover { background: var(--surface-2); border-color: var(--line); }
.assign-empty { padding: 18px 14px; text-align: center; color: var(--ink-faint); font-size: 13px; }

/* ---------- Monthly matrix (admin "שיבוץ חודשי") ----------
   A spreadsheet-style ledger: one row per day, one column per station grouped
   under its shift. Header rows and the date/day columns stay pinned while the
   grid scrolls in both directions. */

/* Automated trainee ("מלווה") assignment toolbar above the matrix grid. */
.auto-assign-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 4px 0 14px;
}
.auto-assign-select { position: relative; }
/* Week-to-schedule picker: a labelled native date input plus a resolved
   Sunday–Saturday range readout, scoping the engine run to one week. */
.auto-assign-week {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.aa-week-label { font-size: 13px; font-weight: 600; color: var(--ink-faint); }
.aa-week-input {
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  color-scheme: light;
}
.aa-week-input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.aa-week-range { font-size: 13px; font-weight: 600; color: var(--brand); white-space: nowrap; }
.aa-count { font-weight: 500; opacity: .85; margin-inline-start: 4px; }
.auto-assign-panel {
  position: absolute;
  z-index: 40;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  min-width: 230px;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.aa-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  cursor: pointer;
}
.aa-opt:hover { background: var(--surface-2); }
.aa-opt input { width: 16px; height: 16px; accent-color: var(--brand); }
.aa-all {
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  margin-bottom: 4px;
}
.aa-empty { padding: 10px 8px; color: var(--ink-faint); font-size: 13.5px; }
.auto-assign-hint {
  flex: 1 1 260px;
  min-width: 220px;
  margin: 0;
  color: var(--ink-faint);
  font-size: 12.5px;
  line-height: 1.5;
}

/* ---- Bulk schedule import ("ייבוא סידור ממד״א") ---- */
.import-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 22px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.import-head { flex: 1 1 260px; min-width: 240px; }
.import-title {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: 18px;
  color: var(--ink);
}
.import-hint {
  margin: 0;
  color: var(--ink-faint);
  font-size: 12.5px;
  line-height: 1.55;
}
.import-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 240px;
  min-width: 220px;
  min-height: 104px;
  padding: 16px;
  text-align: center;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.import-dropzone:hover { border-color: var(--brand); color: var(--brand); }
.import-dropzone.is-drag {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-deep);
}
.import-dropzone-icon { color: var(--brand); }
.import-dropzone-text { font-size: 13.5px; font-weight: 500; }
.import-file-name {
  font-size: 12.5px;
  color: var(--ink-faint);
  word-break: break-all;
}

/* ---- Daily roster text ingestion (collapsible, under the MDA import) ---- */
.daily-import {
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.daily-import-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 16px 18px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: start;
  font-family: var(--body);
  color: var(--ink);
}
.daily-import-head:hover { background: var(--surface-2); }
.daily-import-caret {
  display: inline-block;
  color: var(--brand);
  font-size: 18px;
  transform: rotate(0deg);
  transition: transform .15s;
}
.daily-import-head[aria-expanded="true"] .daily-import-caret { transform: rotate(90deg); }
.daily-import-title {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
}
.daily-import-summary {
  margin-inline-start: auto;
  font-size: 12.5px;
  color: var(--ink-faint);
}
.daily-import-panel {
  padding: 4px 18px 20px;
  border-top: 1px solid var(--line);
}
.daily-import-hint {
  margin: 12px 0 12px;
  color: var(--ink-faint);
  font-size: 12.5px;
  line-height: 1.6;
}
.daily-import-dropzone {
  width: 100%;
  box-sizing: border-box;
  min-height: 150px;
}
.daily-import-dropzone .import-dropzone-text { font-size: 15px; font-weight: 600; }
.import-dropzone-sub { font-size: 12px; color: var(--ink-faint); }
.daily-import-dropzone.is-loading {
  pointer-events: none;
  opacity: .6;
  border-style: solid;
}
.daily-import-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}
.daily-import-day {
  font-size: 12.5px;
  color: var(--ink-faint);
}
.daily-import-actions > .btn { margin-inline-start: auto; }
@media (max-width: 640px) {
  .daily-import-summary { display: none; }
  .daily-import-actions { flex-direction: column; align-items: stretch; }
  .daily-import-actions > .btn { min-height: 48px; }
}

/* ---- Image-based schedule import ("ייבוא סידור חודשי") ----
   A short guide block, then the month + fallback-shift controls above the
   dropzone, then the staged screenshots with their per-image parse outcome
   ("בוקר · 42 שיבוצים · 3 לאימות"). */
.image-import-guide {
  margin: 14px 0 18px;
  padding: 16px 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--brand);
  border-radius: var(--radius-sm);
}
.image-import-guide-lead {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}
.image-import-guide-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}
.image-import-guide-list > li {
  position: relative;
  padding-inline-start: 16px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.7;
}
.image-import-guide-list > li::before {
  content: "•";
  position: absolute;
  inset-inline-start: 0;
  color: var(--brand);
  font-weight: 700;
}
.image-import-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}
.image-import-controls .field {
  flex: 1 1 240px;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
}
.image-import-controls .field > span { font-weight: 600; }
.image-import-controls .field > small { color: var(--ink-faint); font-size: 11.5px; line-height: 1.5; }
.image-import-controls input[type="month"],
.image-import-controls input[type="number"],
.image-import-controls select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
/* Any control in the panel that a pick elsewhere has taken out of play. */
.image-import-controls select:disabled {
  background: var(--surface-2, rgba(0, 0, 0, 0.04));
  color: var(--ink-faint);
  cursor: not-allowed;
}
/* The import target ("יעד ייבוא") is the widest of the four controls — its options name a
   station, an interval and a vehicle — so it gets a row of its own on a narrow panel. */
.image-import-target-field { flex: 1 1 320px; }
/* Its hint turns from a footnote into an active instruction once a target is chosen: from
   that point on it describes what the upload will actually do. */
.image-import-controls .field > small.is-active {
  color: var(--ink);
  font-weight: 600;
}
/* The "showing only <band>" note under the target list. It appears only while the shift-type
   pick has narrowed the list, so a shortened list never reads as options gone missing. */
.image-import-controls .field > small.image-import-target-filter {
  color: var(--brand);
  font-weight: 600;
}
/* The custom day-range pair, revealed only when "טווח מותאם" is picked. */
.image-import-day-range {
  display: flex;
  gap: 8px;
  margin-block-start: 2px;
}
.image-import-day-range > label {
  flex: 1 1 0;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.image-import-day-range > label > span { color: var(--ink-faint); font-size: 11.5px; }
.image-import-day-range input[type="number"] { inline-size: 100%; }
.image-import-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.image-import-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}
.image-import-item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
  flex: 1 1 auto;
}
/* Preview of the staged screenshot. Carries most of the weight for clipboard pastes,
   whose filenames are generated and say nothing about which board was copied. */
.image-import-item-thumb {
  inline-size: 46px;
  block-size: 46px;
  flex: 0 0 auto;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.image-import-item-name {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.image-import-item-meta { font-size: 11.5px; color: var(--ink-faint); }
/* Images are parsed strictly one at a time, so the ones still waiting their turn are
   dimmed while the active one is highlighted — the queue order is readable at a glance. */
.image-import-item.is-queued { opacity: 0.6; }
.image-import-item.is-parsing { border-color: var(--brand); }
.image-import-item.is-parsing .image-import-item-meta { color: var(--brand); }
.image-import-item.is-done { border-color: var(--ok, #2e7d32); }
.image-import-item.is-error { border-color: var(--danger, #c0392b); }
.image-import-item.is-error .image-import-item-meta { color: var(--danger, #c0392b); }
/* A screenshot whose header band the parser could not read: its rows are kept in the
   draft and the admin labels the shift type inline, from this row of the file list. */
.image-import-item.is-needs-band { border-color: var(--warn, #b8860b); }
.image-import-item.is-needs-band .image-import-item-meta { color: var(--warn, #b8860b); }
.image-import-item-band {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-block-start: 5px;
  font-size: 11.5px;
  color: var(--ink-faint);
}
.image-import-item-band-select {
  font-size: 12px;
  padding: 3px 6px;
  max-inline-size: 210px;
}
@media (max-width: 640px) {
  .image-import-guide { padding: 14px; }
  .image-import-guide-lead { font-size: 13.5px; }
  .image-import-controls { flex-direction: column; }
  .image-import-item-band { flex-wrap: wrap; }
  .image-import-item-band-select { max-inline-size: 100%; }
}

/* ---- Manual fallback upload under "ניהול אבטחות" (coverages tab) ---- */
.coverage-upload {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.coverage-upload-btn { cursor: pointer; }
.coverage-upload-btn.is-loading { pointer-events: none; opacity: .6; }

/* Parser diagnostics shown in the security-import preview modal — names the exact
   column/row that could not be mapped or parsed. */
.security-preview-warnings {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--warn, #d98b00);
  border-radius: 8px;
  background: rgba(217, 139, 0, .08);
}
.security-preview-warnings-list {
  margin: 6px 0 0;
  padding-inline-start: 18px;
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.6;
}

/* ---- Daily raw-text import (paste מנו״ף/מרחבי export) ---- */
.daily-text-import {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
}
.daily-text-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
}
.daily-text-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 190px;
  resize: vertical;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre;
}
.daily-text-actions { align-items: flex-end; }
.daily-text-date-field { max-width: 200px; }
@media (max-width: 640px) {
  .daily-text-actions { align-items: stretch; }
  .daily-text-date-field { max-width: none; }
}

/* ---- Automated scheduling engine: post-run summary report ---- */
.engine-report { margin-top: 6px; }
.engine-loading,
.engine-empty {
  padding: 18px;
  color: var(--ink-faint);
  font-size: 14px;
}
.engine-report-head {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.engine-report-title {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
}
.engine-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.engine-stat {
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.engine-stat-num { font-size: 24px; font-weight: 800; color: var(--brand); }
.engine-stat-cap { font-size: 12.5px; color: var(--ink-faint); }
.engine-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.engine-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 14px;
  margin-bottom: 10px;
}
.engine-card-name { font-size: 15.5px; font-weight: 700; }
.engine-card-tally { font-size: 13px; color: var(--ink-faint); }
.engine-card-tally.is-met { color: var(--ok, #2e7d32); font-weight: 600; }
.engine-card-empty { margin: 0; font-size: 13px; color: var(--ink-faint); }
.engine-log {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.engine-log th,
.engine-log td {
  text-align: start;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
}
.engine-log th {
  font-weight: 600;
  color: var(--ink-faint);
  font-size: 12.5px;
}
.engine-log tbody tr:last-child td { border-bottom: 0; }
.engine-log .pref-prefer { color: var(--ok, #2e7d32); font-weight: 600; }
.engine-log .pref-avoid { color: var(--warn, #c77700); font-weight: 600; }

.matrix-wrap {
  margin-top: 4px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
/* The single scroll viewport for the grid — pans both axes. The heavy table is
   kept far wider than any phone screen (min-width below), so it swipes sideways
   like a desktop spreadsheet instead of collapsing columns into each other. */
.matrix-scroll {
  width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* Keep horizontal swipes inside the grid so a sideways pan never chains out
     to the document and jerks the whole page sideways. */
  overscroll-behavior-x: contain;
  max-height: calc(100vh - 260px);
}
/* Wrapper kept around the grid; with `zoom`-based scaling (see applyMatrixZoom)
   the layout box reflows on its own, so no explicit footprint sizing is needed. */
.matrix-zoomer { position: relative; }
.matrix-loading, .matrix-empty {
  padding: 44px 22px; text-align: center; color: var(--ink-faint); font-size: 14px;
}

/* Monthly-matrix toolbar: the edit-mode pencil, the global undo button and a
   short usage hint, above the grid and sticky-free so it never scrolls under
   the pinned header. */
.matrix-toolbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--surface);
}
.matrix-toolbar-hint { font-size: 12.5px; color: var(--ink-faint); }

/* "הצג משמרות הפוכות" — the DAILY board's cross-reference toggle: opens a
   read-only parallel list of the opposite classification's day shifts. A labelled
   checkbox in the day's actions bar, styled to read as one control. */
.detail-reverse-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  cursor: pointer; user-select: none;
}
.detail-reverse-toggle:hover { border-color: var(--brand); }
.detail-reverse-toggle:has(input:checked) {
  border-color: var(--brand);
  background: rgba(49, 123, 112, .10);
  color: #246b63;
}
.detail-reverse-toggle input { accent-color: var(--brand); margin: 0; cursor: pointer; }

/* The parallel ("תצוגה מקבילה") section itself, below the day's shift accordions. */
.day-reverse {
  margin-top: 18px;
  padding: 14px 14px 0;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.day-reverse-atan { background: linear-gradient(135deg, rgba(66, 91, 132, .06), transparent 60%); }
.day-reverse-regular { background: linear-gradient(135deg, rgba(49, 123, 112, .06), transparent 60%); }
.day-reverse-title {
  margin: 0 0 10px;
  font-size: 14px; font-weight: 800; color: var(--ink);
}
.day-reverse-empty { margin: 4px 0; font-size: 12.5px; color: var(--ink-faint); }
/* The parallel shifts sit inside the same accordion machinery as the main board;
   let the accordions fill the section edge-to-edge so it reads as one board. */
.day-reverse .day-reverse-shifts { margin: 0 -14px; gap: 0; }
.day-reverse .day-reverse-shifts .shift-acc { border: 0; border-radius: 0; box-shadow: none; border-top: 1px solid var(--line); }
.day-reverse .day-reverse-shifts .shift-acc.is-open { border-color: var(--line); box-shadow: none; }
.day-reverse-crew { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 6px 2px 2px; }
.day-reverse-seat { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; }
.day-reverse-seat-role { color: var(--ink-faint); font-weight: 700; }
.day-reverse-seat-name.is-crew-masked { color: var(--ink-faint); font-style: italic; }

/* ATAN / REGULAR platform switch — two prominent segmented buttons pinned above
   the monthly grid. The grid renders one platform at a time; switching fades the
   fresh grid in for a smooth transition. */
.schedule-type-switch {
  display: flex; gap: 0; margin: 12px 14px 4px;
  border: 1.5px solid var(--brand); border-radius: 10px; overflow: hidden;
  inline-size: fit-content;
}
.sched-type-btn {
  appearance: none; border: 0; cursor: pointer;
  padding: 10px 20px; font-size: 14px; font-weight: 700;
  background: var(--surface); color: var(--brand);
  transition: background .18s ease, color .18s ease;
}
.sched-type-btn + .sched-type-btn { border-inline-start: 1.5px solid var(--brand); }
.sched-type-btn:hover { background: var(--brand-soft); }
.sched-type-btn.is-active { background: var(--brand); color: #fff; }
.matrix-wrap .matrix-table { animation: schedTypeFade .22s ease; }
@keyframes schedTypeFade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }


/* Board view-mode switch: "הכנסת בקשות" (the default) / "צפייה בסידור". Pinned above
   the board on both the daily calendar and the two monthly grids, and rendered only
   for volunteers holding "צפייה בצוותים אחרים" — the host collapses when empty, so
   every other account's layout is untouched. */
.board-mode-host:empty { display: none; }
.board-mode-switch { margin: 0 0 18px; }
.board-mode-group {
  display: flex; gap: 0;
  border: 1.5px solid var(--brand); border-radius: 12px; overflow: hidden;
  inline-size: fit-content; max-inline-size: 100%;
  box-shadow: var(--shadow-sm);
}
.board-mode-btn {
  appearance: none; border: 0; cursor: pointer;
  padding: 11px 22px; font: inherit; font-size: 14.5px; font-weight: 700;
  background: var(--surface); color: var(--brand);
  transition: background .18s ease, color .18s ease;
}
.board-mode-btn + .board-mode-btn { border-inline-start: 1.5px solid var(--brand); }
.board-mode-btn:hover { background: var(--brand-soft); }
.board-mode-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--brand-soft); }
.board-mode-btn.is-active { background: var(--brand); color: #fff; }
.board-mode-btn.is-active:hover { background: var(--brand-deep); }
.board-mode-hint { margin: 8px 2px 0; font-size: 12.5px; color: var(--ink-faint); }
/* The monthly grid mounts the switch inside the scrolling wrap, above its toolbar. */
.matrix-wrap .board-mode-switch { margin: 12px 14px 10px; }
@media (max-width: 640px) {
  .board-mode-group { inline-size: 100%; }
  .board-mode-btn { flex: 1; padding: 11px 10px; }
}

/* Mode swap: the repainted board fades in briefly so switching reads as a smooth
   transition rather than a flash. Re-triggered by removing and re-adding the class. */
.is-board-mode-swap { animation: boardModeSwap .22s ease; }
@keyframes boardModeSwap { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }


/* Zoom stepper: two tiny +/- buttons flanking a live percentage readout.
   Pushed to the toolbar's trailing edge so it never crowds the pencil/undo. */
.matrix-zoom {
  display: inline-flex; align-items: center; gap: 6px;
  margin-inline-start: auto;
}
.matrix-zoom-btn {
  min-width: 26px; padding: 2px 8px;
  font-size: 15px; font-weight: 700; line-height: 1.1;
}
.matrix-zoom-label {
  min-width: 42px; text-align: center;
  font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ink-faint);
}

/* Top-of-page edit-mode indicator: bold, clean red, shown only while Edit Mode
   is active (the element carries [hidden] otherwise). */
.matrix-edit-banner {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: #dc2626;
}
.matrix-edit-banner[hidden] { display: none; }


/* Pencil edit-mode trigger — replaces the old view/edit switch on both the daily
   board header and the monthly-grid toolbar. A round icon button that inherits
   the surrounding text color (white on the day header's gradient, dark on the
   grid toolbar). It fills with the brand color while edit mode is active. */
.edit-pencil-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid currentColor; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer; opacity: .85;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s, opacity .15s;
}
.edit-pencil-btn:hover { opacity: 1; background: rgba(127, 127, 127, .16); }
.edit-pencil-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--brand-soft); }
.edit-pencil-btn.is-active {
  background: var(--brand); border-color: var(--brand); color: #fff; opacity: 1;
  box-shadow: 0 2px 10px rgba(var(--brand-rgb), .35);
}

/* Global "ביטול פעולה אחרונה" (undo) button — reverts the last scheduling change
   from either tab. Sits beside the pencil; disabled and muted when the shared
   history stack is empty. Inherits the local text color like the pencil. */
.undo-action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid currentColor; background: transparent; color: inherit;
  font-size: 12.5px; font-weight: 600; cursor: pointer; opacity: .9;
  transition: background .15s, opacity .15s, box-shadow .15s;
}
.undo-action-btn:hover:not(:disabled) { opacity: 1; background: rgba(127, 127, 127, .16); }
.undo-action-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--brand-soft); }
.undo-action-btn:disabled { opacity: .4; cursor: default; }
.undo-action-btn svg { flex: none; }

/* Global "עריכת צוות גנרי" (generic-crew edit) toggle — sits directly beside the
   undo button in the monthly toolbar. Same pill shape as undo; fills with the brand
   color while the generic-crew slots are showing across the grid. */
.matrix-crew-mode-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid currentColor; background: transparent; color: inherit;
  font-size: 12.5px; font-weight: 600; cursor: pointer; opacity: .9;
  transition: background .15s, color .15s, border-color .15s, opacity .15s, box-shadow .15s;
}
.matrix-crew-mode-btn:hover { opacity: 1; background: rgba(127, 127, 127, .16); }
.matrix-crew-mode-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--brand-soft); }
.matrix-crew-mode-btn svg { flex: none; }
.matrix-crew-mode-btn.is-active {
  background: var(--brand); border-color: var(--brand); color: #fff; opacity: 1;
  box-shadow: 0 2px 10px rgba(var(--brand-rgb), .35);
}

/* Week-focus banner: shown when the grid is scoped to one staffed week after an
   engine run, with a control to drop back to the full month. */
.matrix-focus-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 14px;
  background: rgba(var(--brand-rgb), .08);
  border-bottom: 1px solid var(--line-strong);
}
.matrix-focus-label { font-size: 13.5px; font-weight: 600; color: var(--brand); }
.matrix-table tbody tr.is-focus-week td { background: rgba(var(--brand-rgb), .05); }
.matrix-table {
  border-collapse: separate; border-spacing: 0;
  width: max-content; min-width: 1200px;
  font-family: var(--body); font-size: 12.5px; color: var(--ink);
}
.matrix-table th, .matrix-table td {
  border-inline-end: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

/* Two sticky header rows: shift groups (top) then station sub-columns. */
.matrix-table thead th {
  position: sticky; z-index: 21;
  background: var(--surface-2);
  font-weight: 700; text-align: center; white-space: nowrap;
  padding: 0 10px;
}
.mx-shift-group {
  top: 0; height: 34px;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--display); font-size: 14px;
}
.mx-shift-group .shift-band { display: inline-block; vertical-align: middle; height: 14px; margin-inline-end: 8px; }
.mx-shift-group.night   { box-shadow: inset 0 3px 0 #3b3a6b; }
.mx-shift-group.morning { box-shadow: inset 0 3px 0 var(--gold); }
.mx-shift-group.evening { box-shadow: inset 0 3px 0 var(--teal); }
.mx-shift-group.other   { box-shadow: inset 0 3px 0 var(--ink-faint); }
.mx-station {
  top: 34px; height: 38px;
  min-width: 124px; max-width: 168px;
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis;
}

/* Pinned date+day merged column. A solid, slightly darker background fully
   hides shift cells scrolling underneath, a raised z-index keeps the frozen
   column strictly on top of the moving cells, and a stronger inner-edge border
   visually separates the frozen column from the rest of the sheet. */
.mx-col-date {
  position: sticky; z-index: 20;
  background: var(--surface-2);
  text-align: center; white-space: nowrap;
  font-weight: 600; padding: 6px 8px;
  border-inline-end: 2px solid var(--line-strong);
}
/* Keep the frozen column opaque even on row states that recolor their cells,
   so scrolling content never bleeds through the translucent overlays. */
.matrix-table tbody tr.is-weekend td.mx-col-date,
.matrix-table tbody tr.is-today td.mx-col-date,
.matrix-table tbody tr:hover td.mx-col-date {
  background: var(--surface-2);
}
.mx-col-date { inset-inline-start: 0; width: 72px; min-width: 72px; font-variant-numeric: tabular-nums; }
/* Two-line layout inside the merged cell */
.mx-date-num { display: block; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mx-date-day { display: block; font-size: 11px; font-weight: 400; color: var(--ink-soft); margin-top: 1px; }
/* Corner cells are pinned on both axes and ride above the rest. */
.mx-corner { z-index: 22; top: 0; }

/* Row states. */
.matrix-table tbody tr.is-weekend td { background: var(--surface-2); }
.matrix-table tbody tr.is-today td { background: rgba(var(--brand-rgb), .12); }
.matrix-table tbody tr.is-today td.mx-col-date { box-shadow: inset 3px 0 0 var(--brand); }
.matrix-table tbody tr:hover td { background: var(--surface-2); }

/* Cells. */
.mx-cell { padding: 5px; vertical-align: top; min-width: 124px; }
.mx-cell-shift-meta {
  margin-bottom: 5px;
  font-size: 10.5px;
  line-height: 1.2;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mx-cell.is-disabled {
  text-align: center; color: var(--ink-faint);
  background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 6px, var(--surface-2) 6px, var(--surface-2) 12px);
}
.mx-cell-off { color: var(--ink-faint); }
/* Shift-type tint per cell. A subtle, semi-transparent wash keyed to the same
   theme accents as the header shift bands (night → indigo/purple-blue,
   morning → amber, evening → teal/green), kept light enough to stay readable.
   Scoped tightly so it wins over the row-state tints (weekend/today/hover) while
   never touching the striped .is-disabled cells or the frozen date/day columns. */
.matrix-table tbody td.mx-cell.night:not(.is-disabled)   { background-color: rgba(59, 58, 107, 0.14); }
.matrix-table tbody td.mx-cell.morning:not(.is-disabled) { background-color: rgba(184, 138, 62, 0.16); }
.matrix-table tbody td.mx-cell.evening:not(.is-disabled) { background-color: rgba(44, 107, 98, 0.14); }
.matrix-table tbody td.mx-cell.other:not(.is-disabled)   { background-color: rgba(107, 114, 128, 0.08); }
.mx-cell-crew {
  margin-top: 4px; padding-top: 3px; border-top: 1px dashed var(--line);
  font-size: 10.5px; color: var(--ink-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Interactive intern slots inside a cell. */
.mx-slot { display: flex; align-items: center; gap: 3px; }
.mx-slot + .mx-slot { margin-top: 4px; }

/* Read-only rendering of an intern slot (default, edit mode off): a plain line
   rather than a button. When a cell carries both escorts (מלווה א׳ / מלווה ב׳)
   a very thin divider separates the two names for a clean, organised look
   instead of loosely stacked text. */
.mx-slot-view {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 2px 2px; font-size: 12px; color: var(--ink);
}
.mx-slot-view .slot-role-dot { flex: 0 0 auto; }
/* A crew seat withheld by the "צפייה בצוותים אחרים" permission. Reads as a faint,
   italic note so it is visibly a permission boundary rather than an empty seat. */
.mx-slot-view.is-crew-masked .mx-slot-name,
.mx-cell-crew.is-crew-masked { font-style: italic; color: var(--ink-faint); }
.mx-slot.is-readonly.is-empty .mx-slot-view { color: var(--ink-faint); }
.mx-slot.is-readonly + .mx-slot.is-readonly {
  margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line);
}
.mx-slot-pick {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--field-bg);
  color: var(--ink); font-family: var(--body); font-size: 12px; text-align: start;
  cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.mx-slot-pick:hover { background: var(--surface-2); border-color: var(--line-strong); }
.mx-slot.is-empty .mx-slot-pick { border-style: dashed; }
.mx-slot-pick .slot-role-dot { flex: 0 0 auto; }
.mx-slot-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.mx-slot-name.is-placeholder { font-weight: 500; color: var(--ink-faint); }
.mx-slot-clear {
  flex: 0 0 auto; width: 24px; height: 28px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--field-bg); color: var(--ink-faint);
  font-size: 15px; line-height: 1; cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.mx-slot-clear:hover { color: var(--danger-deep); border-color: var(--danger); background: var(--danger-soft); }

/* Matrix picker: search box + clear-row + highlight of the current pick. */
.matrix-pop-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.matrix-pop-search-input {
  flex: 1 1 auto; width: 100%; padding: 7px 10px; font-family: var(--body); font-size: 13px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--field-bg); color: var(--ink);
}
.matrix-clear-item { border-color: var(--danger); color: var(--danger-deep); }
.matrix-clear-item:hover { background: var(--danger-soft); border-color: var(--danger-deep); }
.matrix-clear-tag { background: var(--danger-soft); color: var(--danger-deep); }
.assign-item.is-current { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }

/* ---------- Dark mode: component overrides ----------
   A few surfaces use literal light values (frosted topbar, the dark toast).
   Re-tint them so dark mode reads cleanly. */
html[data-theme="dark"] .topbar { background: rgba(20,23,28,.85); }
html[data-theme="dark"] .toast { background: #2a2f37; color: #f1f3f5; }
html[data-theme="dark"] .toast.ok { background: var(--ok); }
html[data-theme="dark"] .day-cell.is-today { border-color: var(--gold); }

/* ---------- Responsive ---------- */
/* Medium screens: tighten the topbar so the nav tabs need less room before
   the action cluster is forced to scroll them. */
@media (max-width: 1080px) {
  .topbar { gap: 14px; padding: 12px 18px; }
  .nav-tab { padding: 8px 12px; }
}
@media (max-width: 860px) {
  .topbar { flex-wrap: wrap; gap: 12px 18px; padding: 12px 18px; }
  .main-nav { order: 3; flex-basis: 100%; }
  .nav-tab { flex: 1; text-align: center; }
  .topbar-user { margin-inline-start: auto; }
  .tab-panel { padding: 22px 16px 50px; }
  .page-title { font-size: 23px; }
}
@media (max-width: 620px) {
  .calendar-wrap { padding: 10px; }
  .calendar-weekdays, .calendar-grid { gap: 5px; }
  .day-cell { height: 66px; min-height: 66px; max-height: 66px; padding: 6px; }
  .day-num { font-size: 15px; }
  .day-flag span { display: none; }
  .day-preview { margin-top: 5px; gap: 2px; }
  .day-shift { gap: 4px; }
  .day-shift-band { height: 10px; }
  .day-shift-names { font-size: 9.5px; }
  .slot-grid { grid-template-columns: 1fr 1fr; }
  .users-table th, .users-table td { padding: 11px 12px; font-size: 13px; }
  .weekly-grid th, .weekly-grid td { padding: 8px 7px; }
  .weekly-opts .avail-opt { padding: 5px 9px; font-size: 12px; }
  .weekly-day { min-width: 64px; }
}
@media (max-width: 420px) {
  .slot-grid { grid-template-columns: 1fr; }
}

/* WhatsApp export toolbar — sits directly under the day's shift cards. Holds
   one button per shift type present, each copying that single shift's roster. */
.wa-export {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}
.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25d366;
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-wa:hover { background: #1ebe5b; box-shadow: 0 8px 22px rgba(37,211,102,.30); }
.btn-wa svg { flex: none; }
@media (max-width: 560px) {
  .wa-export { justify-content: stretch; }
  .btn-wa { width: 100%; justify-content: center; }
}

/* ---------------- Role & permissions management (dynamic RBAC) ---------------- */
/* An intermediate "editor" badge tier between admin (manager) and viewer. */
.role-badge.editor { background: var(--ok-soft); color: var(--ok); }

.roles-panel { margin-top: 22px; }

/* ---------- Course catalog management ---------- */
.courses-panel { margin-top: 22px; }
/* Stack the add-course form (name → button) vertically like the role form. */
.course-form { grid-template-columns: 1fr; align-items: stretch; }
.courses-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.courses-empty { color: var(--ink-soft); font-size: 13.5px; }
.course-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--field-bg);
}
.course-item-name { flex: 1 1 auto; font-weight: 600; font-size: 14.5px; }
.course-item-actions { display: inline-flex; gap: 8px; flex: none; }
.btn-icon {
  width: 36px; height: 36px; padding: 0; display: grid; place-items: center;
  border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  background: var(--field-bg); color: var(--ink-soft); cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.course-edit:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.course-delete { color: var(--danger); }

/* Stack the add-role form (name → permission checkboxes → button) vertically,
   overriding the 4-column .lock-form grid it reuses. */
.role-form { grid-template-columns: 1fr; align-items: stretch; }
.perm-check {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer;
}
.perm-check input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }

/* Collapsible permission categories in the "add role" form. Sections default to
   collapsed; opening one toggles .is-open (the inputs stay in the DOM while
   hidden so the form can still be submitted from any open/closed combination). */
.perm-accordion { display: flex; flex-direction: column; gap: 8px; }
.perm-group { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.perm-group-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 12px; background: var(--surface-2); border: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ink);
  text-align: start;
}
.perm-group-head:hover { background: var(--line); }
.perm-group-caret {
  font-size: 16px; line-height: 1; color: var(--ink-soft);
  transition: transform .15s ease;
}
.perm-group.is-open .perm-group-caret { transform: rotate(90deg); }
.perm-group-title { flex: 1; }
.perm-group-count {
  font-size: 11px; font-weight: 700; color: var(--brand-deep);
  background: var(--brand-soft); padding: 1px 8px; border-radius: 999px;
}
.perm-group-body { display: none; flex-wrap: wrap; gap: 10px 18px; padding: 12px; }
.perm-group.is-open .perm-group-body { display: flex; }

.roles-matrix-card { margin-top: 18px; }
.roles-matrix th, .roles-matrix td { text-align: center; vertical-align: middle; }
.roles-matrix th:first-child, .roles-matrix td:first-child { text-align: start; }
.roles-matrix .perm-cell input { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; }

/* Category column headers in the matrix double as expand/collapse toggles. */
.roles-matrix .perm-cat-head { padding: 0; background: var(--surface-2); }
.roles-matrix .cat-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 8px 10px; background: transparent; border: 0; cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink);
}
.roles-matrix .cat-toggle:hover { color: var(--brand-deep); }
.roles-matrix .cat-caret {
  font-size: 14px; line-height: 1; color: var(--ink-soft);
  transition: transform .15s ease;
}
.roles-matrix .perm-cat-head.is-open .cat-caret { transform: rotate(90deg); }
.roles-matrix .cat-count {
  font-size: 10.5px; font-weight: 700; color: var(--brand-deep);
  background: var(--brand-soft); padding: 0 6px; border-radius: 999px;
}
.roles-matrix .perm-sub-head { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.roles-matrix .perm-sub-collapsed { padding: 4px; }
.perm-count-pill {
  display: inline-block; min-width: 36px; font-size: 11px; font-weight: 700;
  color: var(--ink-soft); background: var(--surface-2);
  padding: 2px 8px; border-radius: 999px;
}
.perm-count-pill.has { color: var(--brand-deep); background: var(--brand-soft); }
.role-system-tag {
  font-size: 11px; font-weight: 700; color: var(--brand-deep);
  background: var(--brand-soft); padding: 1px 7px; border-radius: 999px;
  margin-inline-start: 6px;
}

/* Menu / navigation visibility matrix: nav-tab rows × role columns, grouped
   under per-category heading rows with indented item names. */
.menu-visibility-panel { margin-top: 22px; }
.menu-visibility-matrix .menu-vis-cell input { width: 17px; height: 17px; accent-color: var(--brand); cursor: pointer; }
.menu-visibility-matrix .menu-vis-role-head { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.menu-visibility-matrix .menu-vis-item-head { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.menu-visibility-matrix .menu-vis-group-row th.menu-vis-group-head {
  text-align: start; background: var(--surface-2);
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
  color: var(--brand-deep); padding: 8px 12px;
  border-top: 2px solid var(--brand-soft);
}
.menu-visibility-matrix .menu-vis-item-name {
  padding-inline-start: 22px; font-weight: 600; color: var(--ink);
}
.menu-visibility-matrix .menu-vis-cell input:disabled { cursor: not-allowed; opacity: .8; }

/* ============================================================
   Mobile optimization (≤768px) for the admin engine, bulk MDA
   import, and roles/permissions views. Layered on top of the
   860px topbar rules above — these refine the phone experience:
   stacked controls, scrollable tables/nav, and 44px tap targets.
   ============================================================ */
@media (max-width: 768px) {
  /* ---- Admin tab nav: swipeable horizontal strip, never wraps ---- */
  .main-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 2px;
  }
  .main-nav::-webkit-scrollbar { display: none; }
  .nav-tab { flex: 0 0 auto; white-space: nowrap; min-height: 44px; }

  /* Page header + month controls go full width, centered */
  .page-head { align-items: stretch; }
  .month-nav { justify-content: center; width: 100%; }

  /* ---- Automated scheduling engine: controls stack vertically ---- */
  .auto-assign-bar { flex-direction: column; align-items: stretch; gap: 12px; }
  .auto-assign-bar > .btn,
  .auto-assign-select,
  .auto-assign-week,
  .auto-assign-select > .btn { width: 100%; }
  .aa-week-input { width: 100%; min-height: 44px; }
  .auto-assign-bar > .btn,
  .auto-assign-select > .btn { min-height: 44px; }
  /* Keep the trainee picker dropdown inside the viewport */
  .auto-assign-panel {
    inset-inline: 0;
    min-width: 0;
    width: 100%;
    max-height: 60vh;
  }
  .aa-opt { min-height: 44px; }
  .aa-opt input { width: 20px; height: 20px; }
  .auto-assign-hint { flex-basis: auto; }

  /* Summary stats two-up; the per-trainee report table scrolls
     sideways so names / shift types / "4/5" tallies never clip. */
  .engine-stat { flex: 1 1 calc(50% - 6px); }
  .engine-card {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .engine-log { min-width: 460px; }
  .engine-log th, .engine-log td,
  .engine-card-name, .engine-card-tally { white-space: nowrap; }

  /* ---- Bulk MDA import: dropzone + button stack full width ---- */
  .import-bar { flex-direction: column !important; align-items: stretch; }
  .import-head,
  .import-dropzone,
  .import-bar > .btn {
    width: 100% !important;
    min-width: 0;
    flex-basis: auto;
    margin-bottom: 12px;
  }
  .import-dropzone { min-height: 120px; }
  .import-bar > .btn { min-height: 48px; margin-bottom: 0; }

  /* ---- Roles & permissions: full-width accordion, big tap targets ---- */
  .role-form { grid-template-columns: 1fr; }
  .perm-accordion, .perm-group { width: 100%; }
  .perm-group-head { min-height: 48px; padding: 16px !important; }
  /* Stack the permission checkboxes one per row inside each
     collapsible sub-category, each a full-width 44px tap target. */
  .perm-group-body { flex-direction: column; gap: 4px; }
  .perm-check {
    width: 100%;
    min-height: 44px;
    padding: 8px 6px;
    font-size: 14px;
  }
  .perm-check input { width: 22px; height: 22px; }

  /* The roles × permissions matrix is too wide for a phone, so flip it
     from a 2D grid into a stack of per-role cards: every cell becomes a
     "label : control" row, with the column header injected via the cell's
     data-label so each checkbox stays self-explanatory. */
  .roles-matrix-card { overflow-x: visible; }
  .roles-matrix,
  .roles-matrix thead,
  .roles-matrix tbody,
  .roles-matrix th,
  .roles-matrix td,
  .roles-matrix tr {
    display: block !important;
  }
  .roles-matrix thead { display: none !important; }
  .roles-matrix { min-width: 0 !important; }
  .roles-matrix tbody tr {
    margin-bottom: 14px;
    padding: 6px 12px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 12px;
  }
  .roles-matrix tbody td {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 2px;
    border-bottom: 1px solid var(--line);
    white-space: normal;
  }
  .roles-matrix tbody td:last-child { border-bottom: 0; }
  .roles-matrix tbody td:before {
    content: attr(data-label);
    flex: 1 1 auto;
    text-align: start;
    font-weight: 600;
    color: var(--ink-soft);
  }
  .roles-matrix tbody td.perm-cell-name {
    font-size: 16px;
    font-weight: 700;
  }
  .roles-matrix .perm-cell input { width: 24px; height: 24px; }
  .roles-matrix .cat-toggle { min-height: 48px; padding: 16px !important; }

  /* The user-management accounts table has 7 columns and overflows a phone,
     so on narrow screens it collapses into a stack of per-user cards: each row
     is its own card, name + email span the full width, and the status / role /
     target / monthly-count / actions cells stack beneath, every cell prefixed
     with its column label via data-label. Scoped to #tab-users' own accounts
     table only — the roles matrix, forms, stations and roster tables (which
     share the .users-table base class) keep their existing layouts. */
  #tab-users > .table-card { overflow-x: visible; }
  #tab-users > .table-card > .users-table,
  #tab-users > .table-card > .users-table thead,
  #tab-users > .table-card > .users-table tbody,
  #tab-users > .table-card > .users-table tr,
  #tab-users > .table-card > .users-table td {
    display: block !important;
  }
  #tab-users > .table-card > .users-table thead { display: none !important; }
  #tab-users > .table-card > .users-table { min-width: 0 !important; }
  #tab-users > .table-card > .users-table tbody tr {
    margin-bottom: 14px;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 12px;
  }
  #tab-users > .table-card > .users-table tbody tr:hover td { background: transparent; }
  #tab-users > .table-card > .users-table tbody td {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 2px;
    border-bottom: 1px solid var(--line);
    text-align: end;
    white-space: normal;
    word-break: break-word;
  }
  #tab-users > .table-card > .users-table tbody td:last-child { border-bottom: 0; }
  #tab-users > .table-card > .users-table tbody td:before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--ink-soft);
    text-align: start;
  }
  /* Name cell reads as the card title; email wraps long strings full width. */
  #tab-users > .table-card > .users-table tbody td[data-label="שם"] {
    font-size: 16px;
    font-weight: 700;
  }
  #tab-users > .table-card > .users-table tbody td.u-email { word-break: break-all; }
  /* The role <select> and target <input> take the remaining row width. */
  #tab-users > .table-card > .users-table tbody td select,
  #tab-users > .table-card > .users-table tbody td .target-input {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* Action buttons drop onto their own line, wrap, and follow the RTL flow. */
  #tab-users > .table-card > .users-table tbody td .row-actions {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  /* Badges and role/status tags never wrap or clip inside their card row. */
  #tab-users .status-badge,
  #tab-users .quota-badge,
  #tab-users .role-badge {
    white-space: nowrap;
    max-width: max-content;
  }
}

/* ---------- Weekly availability submission tracking (engine tab) ---------- */
.submission-status {
  margin-top: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.submission-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 16px 18px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: start;
  font-family: var(--body);
  color: var(--ink);
}
.submission-head:hover { background: var(--surface-2); }
.submission-caret {
  display: inline-block;
  color: var(--brand);
  font-size: 18px;
  transform: rotate(0deg);
  transition: transform .15s;
}
.submission-head[aria-expanded="true"] .submission-caret { transform: rotate(90deg); }
.submission-title {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
}
.submission-summary {
  margin-inline-start: auto;
  font-size: 12.5px;
  color: var(--ink-faint);
  white-space: nowrap;
}
.submission-panel {
  padding: 4px 18px 20px;
  border-top: 1px solid var(--line);
}
.submission-weeknav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 0 18px;
}
.submission-week-label {
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  min-width: 120px;
  text-align: center;
  direction: ltr;
}
.submission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.submission-col {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px;
}
.submission-col.is-submitted { border-top: 3px solid var(--ok); }
.submission-col.is-pending { border-top: 3px solid var(--gold); }
.submission-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.submission-col-title {
  margin: 0 0 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.submission-col-head .submission-col-title { margin: 0; }
.submission-count { color: var(--ink-faint); font-weight: 500; font-size: 13px; }
.submission-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}
.submission-item {
  display: flex;
  align-items: center;
  padding: 7px 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--ink);
}
.submission-col.is-submitted .submission-item { border-inline-start: 3px solid var(--ok); }
.submission-col.is-pending .submission-item { border-inline-start: 3px solid var(--gold); }
.submission-empty {
  padding: 10px;
  color: var(--ink-faint);
  font-size: 13px;
  text-align: center;
}
.btn-copy { border-color: var(--brand); color: var(--brand); white-space: nowrap; }
.btn-copy:not(:disabled):hover { background: var(--brand); color: #fff; }
/* Per-role default weekly quota input in the roles matrix. */
.perm-cell-quota { text-align: center; }
.role-quota-input { width: 64px; text-align: center; }

/* Per-role certification-stage targets: four small numbered inputs (stage 1→4)
   sitting beside the weekly quota in the roles matrix. */
.perm-cell-stages { text-align: center; }
.role-stage-inputs {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}
.role-stage-input {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.role-stage-tag {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1;
}
.role-stage-target { width: 52px; text-align: center; }

/* Per-user custom stage ladder in the trainee management table. Laid out as a
   compact horizontal row — the "מותאם" switch followed by the four numbered
   stage inputs — so the cell keeps a normal row height instead of growing into a
   tall stack. The switch unlocks the inputs; while locked they dim to read-only. */
.custom-stage-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 12px;
}
.custom-stage-toggle { justify-content: center; flex: 0 0 auto; }
.custom-stage-cell .role-stage-inputs { flex-wrap: nowrap; gap: 8px; }
.role-stage-inputs.is-locked { opacity: 0.5; }
.role-stage-inputs.is-locked .role-stage-target { cursor: not-allowed; }

/* Keep the "יעדי שלבים (1-4)" column header on one clean line so the trailing
   "(1-4)" never breaks mid-parenthesis across two rows. */
.users-table th.th-stage-target,
.custom-stage-cell { white-space: nowrap; }

/* Medical-qualification ("הכשרה רפואית") dropdown — a plain select sized to fit its
   Hebrew labels without stretching the row. */
.medical-qual-select { max-width: 170px; }

/* Schedule alias ("שם בסידור / כינוי") free-text input. Holds the short names and
   acronyms used on the printed מד״א boards, consumed only by the image importer's
   name matching — never rendered on a schedule card. */
.schedule-alias-input {
  width: 100%;
  max-width: 260px;
  padding: 6px 10px;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.schedule-alias-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft, rgba(44,107,63,.18));
}

/* Driver ("נהג") trigger cell: the switch plus a conditionally-revealed sub-select.
   The sub-select is always in the DOM but collapsed (max-height 0) so ticking the
   trigger slides it open smoothly; unticking slides it shut. */
.driver-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.driver-subselect {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);
  transition: max-height 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}
.driver-subselect.is-open {
  max-height: 60px;
  opacity: 1;
  transform: translateY(0);
}
.driver-type-select { max-width: 140px; }


/* Stage-goals management tab: each stage target sits centered in its own cell. */
.stage-goals-table th,
.stage-goals-table td.perm-cell-stage-goal { text-align: center; }
.stage-goals-table td.perm-cell-name { text-align: start; font-weight: 600; }

@media (max-width: 720px) {
  .submission-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   User management — collapsible category groups
   (pending / trainees-by-course / volunteers / staff)
   ============================================================ */
.users-sections { display: flex; flex-direction: column; gap: 14px; }
.users-push-bar { display: flex; justify-content: flex-end; padding: 4px 0; }

.user-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.user-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
  background: var(--surface-2);
  border: 0;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  text-align: start;
}
.user-group-head:hover { background: var(--line); }
.user-group-caret {
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-faint);
  transition: transform .18s ease;
}
.user-group.is-open > .user-group-head .user-group-caret { transform: rotate(90deg); }
.user-group-titles { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.user-group-title { font-weight: 700; font-size: 15.5px; }
.user-group-sub { font-size: 12.5px; color: var(--ink-faint); font-weight: 400; }
.user-group-count {
  flex: 0 0 auto;
  min-width: 26px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: 12.5px;
  font-weight: 700;
  text-align: center;
}
.user-group-body { display: none; padding: 14px 16px; }
.user-group.is-open > .user-group-body { display: block; }
/* Wide account tables (the trainee roster carries up to 11 columns) can exceed
   the card width; scroll them horizontally inside the section instead of
   overflowing/clipping against the group's rounded, overflow:hidden frame. */
.user-group.is-open > .user-group-body { overflow-x: auto; }

/* Quick-select list accordion: render the body always (collapsed via a
   0fr→1fr grid row) so open/close animates smoothly instead of snapping. */
.roster-collapse > .user-group-body {
  display: grid;
  grid-template-rows: 0fr;
  padding-block: 0;
  transition: grid-template-rows .26s ease, padding-block .26s ease;
}
.roster-collapse.is-open > .user-group-body {
  grid-template-rows: 1fr;
  padding-block: 14px;
}
.roster-collapse > .user-group-body > .acc-inner { min-height: 0; overflow: hidden; }

/* Pending section draws the eye — it flags new registrations. */
.user-group.is-pending { border-color: var(--gold); }
.user-group.is-pending .user-group-count { background: var(--gold-soft); color: var(--gold); }
.user-group.is-pending-category { border-color: var(--brand); }
.user-group.is-pending-category .user-group-count { background: var(--brand-soft); color: var(--brand-deep); }

/* Per-course sub-sections nested inside the active-trainees group. */
.user-subgroup { background: var(--surface-2); margin-bottom: 10px; border-color: var(--line); }
.user-subgroup:last-child { margin-bottom: 0; }
.user-subgroup > .user-group-head { background: var(--surface); padding: 12px 14px; }
.user-subgroup > .user-group-head:hover { background: var(--line); }
.user-subgroup .user-group-title { font-size: 14px; }
.user-subgroup .user-group-count { background: var(--ok-soft); color: var(--ok); }
.user-subgroup > .user-group-body { padding: 0; }

/* Youth vs. adult volunteer split inside the "מתנדבים" section: two distinct
   sub-tables under the shared chip bar, each with a coloured leading accent so the
   two populations read as separate blocks at a glance. */
.user-subgroup.is-youth-vol { border-inline-start: 3px solid var(--brand); }
.user-subgroup.is-adult-vol { border-inline-start: 3px solid var(--gold); }
.user-subgroup.is-saral-vol { border-inline-start: 3px solid #b45309; }
.user-subgroup.is-youth-vol .user-group-count { background: var(--brand-soft); color: var(--brand-deep); }
.user-subgroup.is-adult-vol .user-group-count { background: var(--gold-soft); color: var(--gold); }
.user-subgroup.is-saral-vol .user-group-count { background: color-mix(in srgb, #f59e0b 22%, transparent); color: #92400e; }
.is-volunteers .youth-filter-chips { margin-bottom: 12px; }

/* Account tables rendered inside a (sub-)section. */
.users-acct-table { width: 100%; border-collapse: collapse; }
.users-acct-table th,
.users-acct-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: start;
  vertical-align: middle;
  font-size: 13.5px;
  /* Keep every cell on its natural width instead of letting the browser crush
     20 columns into the card width (which overflows inputs into neighbours).
     The wide table then exceeds the card and scrolls inside .user-group-body,
     which owns the horizontal scroll. */
  white-space: nowrap;
}
.users-acct-table th {
  background: var(--surface-2);
  font-weight: 700;
  color: var(--ink-soft);
  font-size: 12.5px;
  letter-spacing: .02em;
}
.users-acct-table tr:last-child td { border-bottom: none; }
.users-acct-table tbody tr:hover td { background: var(--surface-2); }
.users-acct-table .u-email { direction: ltr; text-align: start; color: var(--ink-soft); }
/* Stack the address over its verification pill so the email column reads cleanly
   with consistent spacing (both are inline spans in the same table-cell). */
.users-acct-table td.u-email .u-email-addr { display: block; }
.users-acct-table td.u-email .verify-pill { margin-top: 5px; }
.users-acct-table td .muted { color: var(--ink-faint); }
.users-acct-table select {
  width: 100%;
  max-width: 220px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.users-acct-table select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }

/* Approved-tutors picker: a compact disclosure of tutor checkboxes inside a
   trainee/volunteer row, plus the engine-report flag for a mentorship pairing. */
.tutors-picker { max-width: 220px; }
.tutors-picker > summary {
  cursor: pointer;
  list-style: none;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  white-space: nowrap;
}
.tutors-picker > summary::-webkit-details-marker { display: none; }
.tutors-picker[open] > summary { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.tutors-options {
  margin-top: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  max-height: 180px;
  overflow-y: auto;
}
.tutors-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
}
.tutors-option:hover { background: var(--surface); }
.tutors-option input { flex: none; }
.tutors-hint { font-size: 12.5px; }
.engine-log tr.is-mentor td { background: var(--brand-soft); }
.users-acct-table .target-input {
  width: 72px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
/* Graduated / released trainee row is dimmed but still fully actionable. */
.users-acct-table tr.is-inactive td { opacity: .6; }
.users-acct-table tr.is-inactive td .row-actions,
.users-acct-table tr.is-inactive td .switch { opacity: 1; }

.users-empty {
  margin: 0;
  padding: 18px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 13.5px;
}

/* Boolean flag control — used by the "משתלם פעיל", login-access and staff-flag
   fields. Per the UI guideline these render as standard checkboxes (previously a
   sliding on/off switch). The underlying <input type="checkbox"> carries all state
   and bindings; only the presentation changed. The retired .switch-track node is
   hidden so any residual markup renders nothing. */
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; flex-wrap: nowrap; white-space: nowrap; }
.switch input {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--ok);
  cursor: pointer;
}
.switch input:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--brand-soft); border-radius: 4px; }
.switch input:disabled { opacity: .5; cursor: not-allowed; }
.switch-track { display: none !important; }
.switch-text { font-size: 12.5px; font-weight: 600; white-space: nowrap; min-width: 3.25em; }
.switch-text.is-on { color: var(--ok); }
.switch-text.is-off { color: var(--ink-faint); }

/* Narrow screens: collapse each account table into a stack of per-user cards. */
@media (max-width: 768px) {
  .user-group-head { padding: 14px; }
  .user-group-body { padding: 12px; }
  .user-subgroup > .user-group-body { padding: 0; }

  .users-acct-table,
  .users-acct-table thead,
  .users-acct-table tbody,
  .users-acct-table tr,
  .users-acct-table td { display: block; }
  .users-acct-table thead { display: none; }
  .users-acct-table tbody tr {
    margin: 0 0 12px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
  }
  .users-acct-table tbody tr:hover td { background: transparent; }
  .users-acct-table tbody td {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--line);
    text-align: end;
    white-space: normal;
    word-break: break-word;
  }
  .users-acct-table tbody td:last-child { border-bottom: 0; }
  .users-acct-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-weight: 600;
    color: var(--ink-soft);
    text-align: start;
  }
  .users-acct-table tbody td[data-label="שם"] { font-size: 16px; font-weight: 700; }
  .users-acct-table tbody td.u-email { word-break: break-all; }
  .users-acct-table tbody td select,
  .users-acct-table tbody td .target-input { flex: 1 1 auto; min-width: 0; max-width: none; }
  .users-acct-table tbody td .row-actions { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; }
}

/* ============================================================
   Global mobile pass (≤768px)
   Final responsive layer covering the components not already
   collapsed to cards: the remaining tabular tables (forms,
   stations, roster, tutors) scroll horizontally instead of being
   clipped, every form control is sized to avoid iOS focus-zoom,
   and typography / spacing tighten on small phones. Layered after
   all earlier rules so it wins on narrow viewports.
   ============================================================ */
@media (max-width: 768px) {
  /* ---- Wide tables that stay tabular ----
     .table-card clips overflow (overflow: hidden) so a table wider than the
     phone would be cut off. These tabular tables have no card-collapse rules
     (unlike the users-accounts and roles-permissions tables), so let their
     card scroll sideways and give each a min-width that keeps columns legible
     and touch-scrollable rather than crushed. */
  #tab-forms .table-card,
  #tab-stations .table-card,
  #tab-roster .table-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Scroll wrapper for "המשמרות שלי": unlock horizontal scroll and give touch
     devices a proper panning context. The overflow-x: clip on html/body already
     prevents page-level horizontal drifting; these rules open only the inner
     scroll container for the forms / my-shifts table. */
  #tab-forms .table-card {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    width: 100% !important;
    max-width: 100vw !important;
    display: block !important;
  }
  #tab-forms .table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    width: 100% !important;
    max-width: 100vw !important;
    display: block !important;
  }
  #tab-forms .forms-table,
  #tab-forms .missing-forms-table {
    min-width: 650px !important;
  }
  #tab-forms .forms-table th,
  #tab-forms .forms-table td,
  #tab-forms .missing-forms-table th,
  #tab-forms .missing-forms-table td {
    white-space: nowrap !important;
  }
  #tab-stations .stations-table { min-width: 980px; }
  /* The roster table carries a seventh column now ("פראמדיק", beside "טיוטור מאושר"
     and the נהג pair), so it needs a little more room before the card starts scrolling
     horizontally. */
  #tab-roster .roster-table { min-width: 680px; }
  .roster-toolbar { justify-content: stretch; }
  .roster-toolbar .btn { width: 100%; }

  /* ---- Form controls ----
     Bump every text field / dropdown to 16px on touch screens. Below 16px
     mobile Safari force-zooms the whole page on focus, which is exactly the
     "desktop zooming" the layout should avoid; 16px keeps controls readable
     and stops the zoom. */
  .field input, .field select,
  .slot select, .slot input,
  .station-form input, .station-form select,
  .lock-form input, .lock-form select,
  .add-shift-field input, .add-shift-field select,
  .forms-toolbar input, .forms-toolbar select,
  .users-table select, .users-acct-table select,
  .combo-input, .target-input, .role-quota-input,
  .aa-week-input {
    font-size: 16px;
  }
}

/* ---- Fine typography + spacing for small phones (≤560px) ---- */
@media (max-width: 560px) {
  body { font-size: 14.5px; }
  .topbar { padding: 10px 14px; gap: 10px 14px; }
  .topbar-title { font-size: 16px; }
  .tab-panel { padding: 18px 13px 46px; }
  .page-title { font-size: 21px; }
  .page-sub { font-size: 13px; }
  .month-label { font-size: 17px; min-width: 0; }
  .btn { padding: 10px 14px; font-size: 13.5px; }
  .nav-tab { padding: 9px 14px; font-size: 14px; }
  .detail-head { padding: 14px 16px; }
  .detail-head h3 { font-size: 18px; }
  .shifts { padding: 16px 14px 20px; }
  .shift-acc-trigger { padding: 14px 15px; }
  .shift-acc-title { font-size: 16px; }
  .shift-acc-inner { padding: 12px; gap: 12px; }
  .login-card { padding: 26px 20px 24px; }
  .login-brand { gap: 12px; margin-bottom: 20px; }
  .login-brand h1 { font-size: 20px; }
  .login-cross { width: 48px; height: 48px; }
}

/* ============================================================
   Final upgrade block — trainee stages, swap marketplace,
   monthly preferences calendar, and the admin analytics dashboard.
   ============================================================ */

/* --- Trainee certification-stage dropdown (users table) --- */
.stage-select {
  min-width: 172px;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--field-bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 13px;
}

/* --- Admin analytics dashboard --- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.kpi-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.kpi-value {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  color: var(--brand);
}
.kpi-label { font-size: 14px; color: var(--ink-soft); }

.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.dash-card {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.dash-card-title {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 17px;
  color: var(--ink);
}
.dash-card-sub {
  margin: -6px 0 16px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}
/* "דוחות בקרה" — dynamic threshold controls + inactivity export. */
.control-reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.control-field { display: flex; flex-direction: column; gap: 6px; }
.control-field > span { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.control-field > input {
  font-family: var(--body); font-size: 15px; font-weight: 600;
  padding: 9px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--field-bg); color: var(--ink);
}
.control-field > input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.control-reports-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.control-reports-hint { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-soft); min-height: 1em; }
.leaderboard { list-style: none; margin: 0; padding: 0; counter-reset: lb; }
.leaderboard li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
}
.leaderboard li:last-child { border-bottom: 0; }
.leaderboard li::before {
  counter-increment: lb;
  content: counter(lb);
  flex: 0 0 auto;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: 12px; font-weight: 700;
}
.leaderboard .lb-name { flex: 1 1 auto; color: var(--ink); }
.leaderboard .lb-count {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.leaderboard-empty { color: var(--ink-faint); padding: 10px 4px; }
.leaderboard-empty::before { content: none; }

/* --- Swap marketplace --- */
.swap-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.dash-swaps .swap-list { margin-top: 4px; }
.swap-empty { color: var(--ink-faint); padding: 8px 2px; }
.swap-card {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.swap-card.swap-open      { border-inline-start-color: var(--brand); }
.swap-card.swap-pending   { border-inline-start-color: var(--gold); }
.swap-card.swap-approved  { border-inline-start-color: var(--ok); }
.swap-card.swap-cancelled,
.swap-card.swap-rejected  { border-inline-start-color: var(--danger); }
.swap-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.swap-when { font-weight: 700; color: var(--ink); }
.swap-badge {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.swap-badge.swap-open      { background: var(--brand-soft); color: var(--brand-deep); }
.swap-badge.swap-pending   { background: var(--gold-soft);  color: var(--gold); }
.swap-badge.swap-approved  { background: var(--ok-soft);    color: var(--ok); }
.swap-badge.swap-cancelled,
.swap-badge.swap-rejected  { background: var(--danger-soft); color: var(--danger-deep); }
.swap-badge.swap-direct     { background: var(--paper-2); color: var(--ink-soft); }
.swap-badge.swap-direct-you { background: var(--brand-deep); color: #fff; }
.swap-card-body { display: flex; flex-direction: column; gap: 4px; }
.swap-place { font-weight: 600; color: var(--ink); }
.swap-people { font-size: 13px; color: var(--ink-soft); }
.swap-approvals { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.swap-approval {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  padding: 2px 8px;
  border-radius: 6px;
}
.swap-approval-label { color: var(--ink-soft); }
.swap-approval-state { font-weight: 700; }
.swap-approval.is-approved { background: var(--ok-soft); }
.swap-approval.is-approved .swap-approval-state { color: var(--ok); }
.swap-approval.is-pending { background: var(--gold-soft); }
.swap-approval.is-pending .swap-approval-state { color: var(--gold); }
.swap-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.forms-swap { white-space: nowrap; }

/* Placement / regional deployment notes tab. */
.placement-admin { margin-bottom: 20px; }
.placement-admin .placement-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 12px;
}
.placement-admin textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  resize: vertical;
  margin-bottom: 12px;
}
.placement-admin textarea:focus { outline: none; border-color: var(--brand); }
.placement-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.placement-card {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--brand);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.placement-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.placement-who { font-weight: 700; color: var(--ink); }
.placement-week {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-deep);
}
.placement-text { color: var(--ink); line-height: 1.5; }
.placement-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Inline targeted-deployment banner inside the day-detail schedule view. */
.placement-day-banner {
  margin: 4px 0 14px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--brand);
  border-radius: var(--radius);
  background: var(--brand-soft);
}
.placement-day-title {
  font-weight: 700;
  color: var(--brand-deep);
  margin-bottom: 6px;
}
.placement-day-note { color: var(--ink); line-height: 1.5; margin: 2px 0; }

/* "משוב על דיווח טפסים" compliance indicator — the trainee's shift-form status
   bridged into the placement view. Colour follows the state: submitted = green,
   pending = amber, volunteer/no-form = neutral, none = muted. */
.placement-form-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.placement-form-label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.placement-form-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  vertical-align: middle;
}
.placement-day-note .placement-form-badge { margin-inline-start: 8px; }
.placement-form-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-soft);
  flex: none;
}
.placement-form-badge.is-submitted {
  background: var(--ok-soft); color: var(--ok); border-color: var(--ok);
}
.placement-form-badge.is-submitted .placement-form-dot { background: var(--ok); }
.placement-form-badge.is-pending {
  background: #fdf0d5; color: #a86a00; border-color: #e0b25a;
}
.placement-form-badge.is-pending .placement-form-dot { background: #d98a00; }
.placement-form-badge.is-volunteer {
  background: var(--brand-soft); color: var(--brand-deep); border-color: var(--brand);
}
.placement-form-badge.is-volunteer .placement-form-dot { background: var(--brand); }
[data-theme="dark"] .placement-form-badge.is-pending {
  background: rgba(217,138,0,.16); color: #f0c063; border-color: rgba(217,138,0,.5);
}

/* Inline Head-to-Head picker inside the "My Shifts" swap cell. */
.swap-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  min-inline-size: 200px;
}
.swap-picker-select {
  inline-size: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  background: var(--paper);
  color: var(--ink);
}
.swap-picker-actions { display: flex; gap: 8px; }
.swap-picker-loading { margin: 0; font-size: 13px; color: var(--ink-soft); }

/* --- Swap-request modal (opened from "המשמרות שלי") --- */
.swap-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.45);
}
.swap-modal {
  inline-size: min(420px, 100%);
  max-block-size: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-md, 0 12px 40px rgba(0, 0, 0, 0.25));
}
.swap-modal-title { margin: 0; font-size: 17px; }
.swap-modal-sub { margin: 0; font-size: 13px; color: var(--ink-soft); }
.autocomplete-field { position: relative; }
.autocomplete-dropdown {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 4px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  margin: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: var(--shadow-sm, 0 8px 24px rgba(0, 0, 0, 0.14));
  max-block-size: 220px;
  overflow-y: auto;
}
.autocomplete-dropdown-item {
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
  background: transparent;
}
.autocomplete-dropdown-item:hover,
.autocomplete-dropdown-item:focus {
  background: var(--surface-2, rgba(15, 23, 42, 0.06));
}

/* Security-events import ("ייבוא אבטחות") preview modal — wide, horizontally
   scrollable table of the detected Ramat Gan events. */
.security-preview-modal { inline-size: min(920px, 100%); }
.security-preview-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.security-preview-table { min-inline-size: 720px; font-size: 12.5px; }
.security-preview-table th,
.security-preview-table td { white-space: nowrap; }
.security-preview-table td { max-inline-size: 220px; overflow: hidden; text-overflow: ellipsis; }
.security-preview-nodate { opacity: 0.6; }
/* Canceled ("בוטל") rows: not imported, and any matching board event is purged. */
.security-preview-canceled { opacity: 0.65; text-decoration: line-through; color: var(--danger, #c0392b); }
.security-preview-canceled td { text-decoration: line-through; }
.security-import-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* "אימות שמות לא מזוהים" — one card per unmatched spelling: the raw cell text, the
   occurrences it came from (Date · Shift · Station · Vehicle · Role) and a searchable
   dropdown to assign a user or register a guest. */
.name-review-modal { inline-size: min(760px, 100%); }
.name-review-scroll {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-block-size: 56vh;
  overflow-y: auto;
  padding: 2px;
}
.name-review-item {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.name-review-item.is-split-import {
  background-color: rgba(239, 68, 68, 0.2);
  border-inline-start: 4px solid #ef4444;
}
.name-review-item.is-split-import-critical {
  background-color: rgba(239, 68, 68, 0.2);
  border: 2px solid #ef4444;
}
.name-review-item.is-assigned { border-color: var(--ok, #2e7d32); }
.name-review-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.name-review-raw { font-size: 15px; }
.name-review-count { font-size: 11.5px; color: var(--ink-faint); }
.name-review-context {
  list-style: none;
  margin: 8px 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--ink-soft);
}
.name-review-context-more { color: var(--ink-faint); font-style: italic; }
.name-review-picker { display: flex; flex-direction: column; gap: 8px; }
.name-review-search,
.name-review-select,
.name-review-guest-input {
  inline-size: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
.name-review-alias {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.5;
  cursor: pointer;
}
.name-review-alias > span { font-weight: 600; color: var(--ink); }
/* The raw spelling being taught, on its own line under the checkbox label. */
.name-review-alias-hint {
  flex: 1 0 100%;
  padding-inline-start: 24px;
  color: var(--ink-faint);
  font-size: 11px;
}
.name-review-alias input { margin-block-start: 2px; }

/* ---------------- Monthly grid preview of an imported schedule ----------------
   The single review step after an OCR parse: the whole month laid out the way the
   monthly board lays it out (dates down, stations across, grouped by shift band), with
   every seat a colour-coded, clickable chip. It borrows the board's own .matrix-table /
   .mx-* skeleton so the preview and the destination read as the same object; only the
   chips inside the cells and this modal's chrome are new. */
.image-import-grid-modal {
  /* Nearly the full viewport: a month of stations is only reviewable at a glance if the
     grid gets the width, and the modal shell is otherwise capped at 420px. */
  inline-size: min(1440px, 100%);
  max-block-size: 94vh;
}
/* The grid scrolls inside its own box, so the sticky date/station headers pin to it and
   not to the modal — but the modal keeps the shell's own overflow so a long parse-warning
   list can never push the publish button off the bottom. */
.image-import-grid-modal > .security-preview-warnings { max-block-size: 22vh; overflow-y: auto; }

/* Colour key doubling as the live tally of the three states, recomputed after every
   in-line edit. */
.import-grid-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.import-grid-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.import-grid-legend-dot {
  flex: 0 0 auto;
  inline-size: 11px;
  block-size: 11px;
  border-radius: 3px;
  border: 1px solid var(--line-strong);
}
.import-grid-legend-count { color: var(--ink); font-variant-numeric: tabular-nums; }
.import-grid-legend-item.is-matched .import-grid-legend-dot {
  background: var(--ok-soft); border-color: var(--ok);
}
.import-grid-legend-item.is-unresolved .import-grid-legend-dot {
  background: color-mix(in srgb, var(--danger, #dc2626) 14%, var(--surface));
  border-color: var(--danger, #dc2626);
}
.import-grid-legend-item.is-approx .import-grid-legend-dot {
  background: var(--gold-soft); border-color: var(--gold);
}
.import-grid-legend-item.is-vacant .import-grid-legend-dot {
  background: var(--surface-2); border-color: var(--line-strong);
}
/* The two "this overwrites something" tallies. Amber, matching the cells themselves. */
.import-grid-legend-item.is-conflict .import-grid-legend-dot {
  background: color-mix(in srgb, var(--warn, #b45309) 16%, var(--surface));
  border-color: var(--warn, #b45309);
}
.import-grid-legend-item.is-clearing .import-grid-legend-dot {
  background: var(--surface);
  border: 1px dashed var(--warn, #b45309);
}
/* ...and the tally of the cells deliberately held on what the board already has. */
.import-grid-legend-item.is-kept .import-grid-legend-dot {
  background: var(--ok-soft); border-color: var(--ok);
}

/* Two answers for the whole month, next to the key that counts them: take every new reading,
   or hold every conflict on what the board already has. Each carries the number of cells it
   would move and goes flat-disabled when that number is zero. */
.import-grid-bulk { display: flex; flex-wrap: wrap; gap: 8px; }
.import-grid-bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-block: 7px;
  font-size: 12.5px;
}
.import-grid-bulk-btn.is-accept { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.import-grid-bulk-btn.is-keep { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.import-grid-bulk-count:empty { display: none; }
.import-grid-bulk-count {
  min-inline-size: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--paper-2, var(--surface-2));
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.import-grid-bulk-btn.is-accept .import-grid-bulk-count { background: var(--brand-soft); color: var(--brand-deep); }
.import-grid-bulk-btn.is-keep .import-grid-bulk-count { background: var(--ok-soft); color: var(--ok); }
.import-grid-bulk-btn.is-quick {
  border-color: color-mix(in srgb, var(--gold) 48%, var(--line));
}
.import-grid-bulk-btn:disabled { opacity: .45; cursor: default; }
.import-grid-quick-counter {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--brand) 40%, var(--line));
  color: var(--ink-faint);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.import-grid-scroll {
  flex: 1 1 auto;
  min-block-size: 0;
  /* Taller than the board's own cap: this modal has no page chrome to leave room for,
     only its title, legend and action row. */
  max-block-size: min(62vh, 720px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.import-grid-table { font-size: 12.5px; }
/* A station column has to fit up to four seat chips stacked; the board's 124px minimum
   would squeeze the names to one word each. */
.import-grid-cell { min-inline-size: 152px; padding: 4px; }
/* The shift-band tint belongs to this grid's HEADER, not behind a column of chips: a tinted cell
   under a tinted chip is what turned every seat into a dark block. Here the cells are the clean
   paper the seat cards sit on — the band is still read off the sticky header above them. Cells
   for a standard that does not run keep their striped .is-disabled treatment. */
.import-grid-table tbody td.import-grid-cell.mx-cell:not(.is-disabled) {
  background-color: var(--surface);
}
.import-grid-cell.is-empty {
  color: var(--ink-faint);
  text-align: center;
  vertical-align: middle;
}

/* One seat. Full-width inside its cell so a column of chips reads as a crew list, and
   a button (not a div) so the whole grid is keyboard-reachable. */
.import-grid-chip {
  display: flex;
  align-items: center;
  /* Wraps into a fixed two-line block: the parsed name (plus seat and badge) on the first row,
     and the muted "קיים / היה" line on the second. Both rows truncate rather than grow, so a
     chip's height never depends on how long a name is. */
  flex-wrap: wrap;
  gap: 1px 6px;
  inline-size: 100%;
  box-sizing: border-box;
  margin-block-end: 3px;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
  /* The card ground, never --paper: that is the darkest surface in the dark theme and made
     each seat look like a black box inside an already tinted cell. */
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  text-align: start;
  cursor: pointer;
  transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease;
}
.import-grid-chip.is-split-import {
  background-color: rgba(239, 68, 68, 0.2);
  border-inline-start: 4px solid #ef4444;
}
.import-grid-chip.is-split-import-critical {
  background-color: rgba(239, 68, 68, 0.2);
  border: 2px solid #ef4444;
}
.import-grid-chip:last-child { margin-block-end: 0; }
.import-grid-chip:hover { border-color: var(--brand); box-shadow: 0 2px 8px rgba(var(--brand-rgb), .18); }
.import-grid-chip:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}
.import-grid-chip.is-quick-active {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 26%, transparent), 0 3px 9px rgba(var(--brand-rgb), .24);
}
.import-grid-chip.is-quick-active.is-quick-no-pick {
  border-style: dashed;
}
.import-grid-chip.is-quick-active .import-grid-chip-seat {
  color: var(--brand);
}
.import-grid-chip-seat {
  flex: 0 0 auto;
  color: var(--ink-faint);
  font-size: 10.5px;
  font-weight: 700;
}
.import-grid-chip-name {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.import-grid-chip-badge {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.import-grid-chip-badge.is-guest { background: var(--brand-soft); color: var(--brand); }
.import-grid-chip-badge.is-unresolved {
  background: color-mix(in srgb, var(--danger, #dc2626) 14%, var(--surface));
  color: var(--danger, #dc2626);
}

/* The three states. Colour is carried by the border and a WASH over the card surface rather
   than by a filled block, so a month of chips reads as a table instead of a mosaic — and the
   ground is --surface (the lifted card colour), never --paper, which is the darkest ground in
   the dark theme and made every cell look like a black box. */
.import-grid-chip.is-matched {
  border-color: color-mix(in srgb, var(--ok) 45%, var(--line));
  background: color-mix(in srgb, var(--ok) 7%, var(--surface));
}
.import-grid-chip.is-unresolved {
  border-color: color-mix(in srgb, var(--danger, #dc2626) 62%, var(--line));
  background: color-mix(in srgb, var(--danger, #dc2626) 10%, var(--surface));
  box-shadow: inset 3px 0 0 var(--danger, #dc2626);
}
.import-grid-chip.is-approx {
  border-color: color-mix(in srgb, var(--gold) 55%, var(--line));
  background: color-mix(in srgb, var(--gold) 9%, var(--surface));
  box-shadow: inset 3px 0 0 var(--gold);
}
.import-grid-chip.is-vacant {
  border-style: dashed;
  border-color: var(--line-strong);
  background: var(--surface);
}
.import-grid-chip.is-vacant .import-grid-chip-name { color: var(--ink-faint); font-weight: 500; }
/* An empty seat prints no caption at all — a light dashed rule says "nothing here" without
   spending a line of text on it, and keeps every chip the same height. */
.import-grid-chip-name.is-empty-slot {
  min-block-size: 15px;
  border-block-end: 1px dashed var(--line-strong);
  opacity: .8;
}
/* A standard of the board the reading never produced a cell for: the same grey vacancy, with
   a faint inner outline so "the image showed this seat open" and "nobody has filled this seat
   yet" are distinguishable across a month-wide grid without adding a fourth colour. */
.import-grid-chip.is-board-open {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-strong) 55%, transparent);
  background: transparent;
}
.import-grid-chip.is-board-open .import-grid-chip-seat { opacity: .75; }

/* ---- A cell held on the shift the board already has ----
   "נשאר קודם" (chosen) and an untouched standard over a staffed seat (implicit) both end with
   the stored crew member still in place, so both print that person as the chip's primary name.
   Green, because nothing is being overwritten — and solid, because the seat is not empty. */
.import-grid-chip.is-board-stays {
  border-style: solid;
  border-color: color-mix(in srgb, var(--ok) 50%, var(--line));
  background: color-mix(in srgb, var(--ok) 7%, var(--surface));
  box-shadow: none;
}
.import-grid-chip.is-board-stays .import-grid-chip-name { color: var(--ink); font-weight: 600; }
.import-grid-chip.is-board-kept { border-color: var(--ok); }
.import-grid-chip-badge.is-kept { background: var(--ok-soft); color: var(--ok); }
.import-grid-chip-badge.is-onboard {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-faint);
  font-weight: 600;
}

/* ---- The reading, under the seat label of an unmatched cell ----
   A vacancy the importer left because the printed text matched no staff member exactly still
   holds the evidence for that decision, and it belongs on the grid rather than only in the
   cell's editor: "נהג" over "נקרא: יחזף" is a board cell an admin can act on, while "נהג" over
   nothing looks like a seat the board printed empty.
   Deliberately NOT styled like a name — one step smaller, muted, italic and prefixed — so no
   reading can be mistaken for an assignment; and pointer-events: none so the line can never
   become the event target of the click that opens the cell's editor. */
.import-grid-chip-read {
  flex: 1 0 100%;
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-inline-size: 0;
  font-size: 10.5px;
  line-height: 1.35;
  font-style: italic;
  color: var(--ink-faint);
  pointer-events: none;
}
.import-grid-chip-read-label {
  flex: 0 0 auto;
  font-style: normal;
  font-weight: 600;
  opacity: .75;
}
/* Truncates instead of wrapping: a chip's height must not depend on how much text OCR
   returned for it, or a single long cell would set the height of its whole month row. */
.import-grid-chip-read-text {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* A vacancy over a staffed seat can carry both extra lines — the reading, then the stored name
   it would clear. One pixel between them so they read as two facts and not as one wrapped one. */
.import-grid-chip-read + .import-grid-chip-board { margin-block-start: 1px; }
/* Same gap when the recommendation sits between the two: three stacked facts about one seat —
   what was read, who it probably is, whose assignment it would replace. */
.import-grid-chip-suggest + .import-grid-chip-board { margin-block-start: 1px; }

/* ---- The system's recommendation, printed under the reading it explains ----
   "נקרא: בירנשטיין" answers WHAT the board said; this line answers WHO it probably was. It has to
   be legible at a glance across a month-wide grid and it must never be mistaken for the
   assignment it is not, so it gets its own register: a muted blue accent — not the italic grey of
   the reading above it, not the ink of a real name, and nowhere near the amber that means "this
   overwrites somebody". A tinted rail on the leading edge ties it to the reading it belongs to.
   pointer-events: none for the same reason as the line above: the click has to reach the chip. */
.import-grid-chip-suggest {
  flex: 1 0 100%;
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-inline-size: 0;
  margin-block-start: 1px;
  padding-inline-start: 5px;
  border-inline-start: 2px solid color-mix(in srgb, var(--brand, #2563eb) 40%, transparent);
  font-size: 10.5px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--brand, #2563eb) 78%, var(--ink-soft));
  pointer-events: none;
}
.import-grid-chip-suggest-label {
  flex: 0 0 auto;
  font-weight: 600;
  opacity: .8;
}
/* The name truncates and the percentage never does: a cut-off "(85%)" is worse than useless, and
   the percentage is the part that says how much to trust the name beside it. */
.import-grid-chip-suggest-name {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.import-grid-chip-suggest-pct {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  opacity: .85;
}

/* ---- The conflict tag, line 2 of the chip ----
   Only the two cases that rewrite a stored name get a second line, and it is a single tag: the
   crew member being replaced, or the one being removed. Small, muted, and truncating — the amber
   signal itself lives on the chip's border, which is also the only marker that survives a
   truncated name. Every other cell is one line. */
.import-grid-chip-board {
  flex: 1 0 100%;
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-inline-size: 0;
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--ink-faint);
}
.import-grid-chip-board-label {
  flex: 0 0 auto;
  font-weight: 600;
  opacity: .8;
}
.import-grid-chip-board-name {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Emptied seat: the name is struck through, so "this person is leaving the seat" reads without
   a word of explanation. Only the name — striking the label too would just look broken. */
.import-grid-chip-board.is-clear .import-grid-chip-board-name { text-decoration: line-through; }
.import-grid-chip.is-board-change {
  border-color: var(--warn, #b45309);
}
/* A chip carrying a second line gets a hair more room under it, and the name that is taking
   the seat over is set a step bolder so the eye lands on the NEW name first. */
.import-grid-chip.has-board-name { padding-block-end: 3px; }
.import-grid-chip.is-board-replace .import-grid-chip-name { font-weight: 700; }
/* A parsed vacancy over a staffed seat empties it — a real change, so the dashed vacancy
   border becomes solid amber rather than reading as "nothing here". */
.import-grid-chip.is-board-clear { border-style: solid; }

/* The in-line cell editor. Sits on the shared .assign-pop shell (fixed, centred, above
   the modal overlay); only its width and the two extra text rows are local. */
.import-grid-pop { inline-size: min(380px, calc(100vw - 32px)); }
.import-grid-pop-raw {
  margin: 0;
  padding: 7px 12px;
  border-block-end: 1px solid var(--line);
  background: color-mix(in srgb, var(--warn, #b7791f) 8%, transparent);
  color: var(--ink-soft);
  font-size: 11.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.import-grid-pop-heading {
  margin: 8px 2px 4px;
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 700;
}
.import-grid-pop-heading:first-child { margin-block-start: 2px; }

/* ---- "הצעות התאמה": the top staff matches for an unmatched cell, one click each ----
   The primary action of this popover on an unmatched cell, so it sits in the header band above
   the search box and is styled as a panel rather than as list rows: a tinted blue field that
   reads as "the system suggests" and cannot be confused with the amber band above it (what the
   image read) or the green/amber decision buttons (what happens to the board). */
.import-grid-pop-recs {
  padding: 8px 12px 10px;
  border-block-end: 1px solid var(--line);
  background: color-mix(in srgb, var(--brand, #2563eb) 7%, transparent);
}
.import-grid-pop-recs-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 6px;
  color: color-mix(in srgb, var(--brand, #2563eb) 80%, var(--ink));
  font-size: 11.5px;
  font-weight: 700;
}
/* Which text these percentages were scored against, and that a click commits — the two things
   that stop a percentage from looking like a verdict. */
.import-grid-pop-recs-note {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}
.import-grid-pop-recs-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Each recommendation is a full-width chip rather than a wrapped inline pill: the names are
   Hebrew full names of unpredictable length, and a ragged two-column wrap makes a ranked list
   impossible to read down. Ranked top to bottom, so descending score reads as descending. */
.import-grid-pop-rec {
  display: flex;
  align-items: baseline;
  gap: 6px;
  inline-size: 100%;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--brand, #2563eb) 28%, transparent);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  text-align: start;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.import-grid-pop-rec:hover,
.import-grid-pop-rec:focus-visible {
  border-color: var(--brand, #2563eb);
  background: color-mix(in srgb, var(--brand, #2563eb) 10%, var(--surface));
}
.import-grid-pop-rec.is-quick-default,
.import-grid-pop-choice.is-quick-default,
.import-grid-pop .assign-item.is-quick-default {
  outline: 2px solid color-mix(in srgb, var(--brand, #2563eb) 56%, transparent);
  outline-offset: 1px;
}
.import-grid-pop-rec-name {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.import-grid-pop-rec-pct {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--brand, #2563eb) 75%, var(--ink-soft));
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* The leading candidate — the same name the grid chip prints under the reading — carries the
   accent so the popover and the grid agree at a glance about which one is the proposal. */
.import-grid-pop-rec.is-top {
  border-color: var(--brand, #2563eb);
  background: color-mix(in srgb, var(--brand, #2563eb) 12%, var(--surface));
}
/* Already the name in this seat: nothing to do, so it stops competing for the click. */
.import-grid-pop-rec.is-current {
  border-style: dashed;
  opacity: .75;
}
/* Offered, but the staff directory ticks this person for the OTHER crew seat. Assigning them is
   the admin's call and is never blocked — it is simply never an accident. */
.import-grid-pop-rec.is-unqualified {
  border-color: color-mix(in srgb, var(--warn, #b45309) 45%, transparent);
}
.import-grid-pop-rec-warn {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--gold-soft, color-mix(in srgb, var(--warn, #b45309) 16%, transparent));
  color: var(--warn, #b45309);
  font-size: 10px;
  font-weight: 700;
}

/* The seat's context line: which qualification it asks for, and whether it is a standard of
   the board the reading never produced. Same placement as the OCR text row above it. */
.import-grid-pop-qual {
  margin: 0;
  padding: 6px 12px;
  border-block-end: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 11.5px;
  line-height: 1.45;
}
/* Who is saved in this seat right now, and what the pick about to be made does to them. */
.import-grid-pop-board {
  margin: 0;
  padding: 6px 12px;
  border-block-end: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 11.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.import-grid-pop-board.is-replace,
.import-grid-pop-board.is-clear {
  background: color-mix(in srgb, var(--warn, #b45309) 12%, transparent);
  color: var(--warn, #b45309);
  font-weight: 600;
}
.import-grid-pop-board.is-kept,
.import-grid-pop-board.is-keep {
  background: color-mix(in srgb, var(--ok) 10%, transparent);
  color: var(--ok);
  font-weight: 600;
}

/* ---- The cell's three-way decision ----
   A seat that already holds somebody has exactly three outcomes — the new reading, the stored
   assignment, or an empty standard — so they are offered as three buttons above the search list
   instead of being inferred from what does or does not get typed. The one in force is marked
   (aria-pressed + is-active), which makes the drawer a state display as much as a control. */
.import-grid-pop-choices {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 12px;
  border-block-end: 1px solid var(--line);
  background: var(--surface-2);
}
.import-grid-pop-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  inline-size: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  text-align: start;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.import-grid-pop-choice:hover { border-color: var(--brand); }
.import-grid-pop-choice-label {
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.import-grid-pop-choice-tag {
  flex: 0 0 auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--paper-2, var(--surface-2));
  color: var(--ink-faint);
  font-size: 10.5px;
  font-weight: 700;
}
/* Each outcome keeps the colour it has in the grid, so the drawer and the cell agree: the new
   reading is brand blue, keeping the board is green, emptying the seat is amber and dashed. */
.import-grid-pop-choice.is-new.is-active {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-deep);
}
.import-grid-pop-choice.is-keep.is-active {
  border-color: var(--ok);
  background: var(--ok-soft);
  color: var(--ok);
}
.import-grid-pop-choice.is-clear { border-style: dashed; }
.import-grid-pop-choice.is-clear.is-active {
  border-style: solid;
  border-color: var(--warn, #b45309);
  background: color-mix(in srgb, var(--warn, #b45309) 12%, var(--surface));
  color: var(--warn, #b45309);
}
.import-grid-pop-choice.is-active .import-grid-pop-choice-tag {
  background: color-mix(in srgb, currentColor 14%, transparent);
  color: inherit;
}
/* A candidate who holds the OPPOSITE qualification to the one this seat asks for. The pick is
   still allowed — a hand assignment is the admin's call — so the warning is on the label
   rather than on the button's availability. */
.import-grid-pop .assign-item.is-unqualified .assign-item-tag {
  background: var(--gold-soft);
  color: var(--gold);
}
/* The leading staff candidate — what Enter commits and what the eye should land on first.
   `--brand-soft` is a pale tint that is NOT re-declared for the dark theme, so the text colour
   is pinned to a dark blue here instead of inheriting `--ink` — which goes near-white in dark
   mode and would vanish on it. */
.import-grid-pop .assign-item.is-preferred {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-deep);
}
/* The "publish exactly what I typed, linked to nobody" option. It is the LAST resort in the
   resolution order, so it is drawn as the secondary override it is — a dashed, unfilled row —
   and no longer wears the brand tint that made it look like the cell's default answer. */
.import-grid-pop .assign-item.is-typed {
  border-style: dashed;
  border-color: var(--line-strong);
  background: transparent;
  color: var(--ink-soft);
}

.import-grid-actions { align-items: center; }
/* The one action the whole screen exists for, sized so it reads as the end of the flow. */
.import-grid-publish { padding-inline: 22px; font-size: 15px; font-weight: 700; }

@media (max-width: 700px) {
  .image-import-grid-modal { padding: 16px 12px; }
  .import-grid-scroll { max-block-size: 56vh; }
  .import-grid-cell { min-inline-size: 132px; }
  .import-grid-actions > .btn { flex: 1 1 auto; }
}

/* "משמרות שטרם שובץ צוות גנרי" — the report of board shifts still missing a mandatory
   generic-crew position. Reuses the collapsible .daily-import shell; only the range
   controls and the result table are new. */
.missing-crew-actions { flex-wrap: wrap; align-items: flex-end; gap: 10px; }
/* The refresh button belongs beside the two date pickers it acts on, so the shared
   "push the button to the far edge" rule is undone here; the live status takes the
   far edge instead. */
.missing-crew-actions > .btn { margin-inline-start: 0; }
.missing-crew-actions > .daily-import-day { margin-inline-start: auto; }
.missing-crew-field { display: grid; gap: 3px; }
.missing-crew-field-label { font-size: 11.5px; color: var(--ink-soft); }
.missing-crew-date {
  padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: 12.5px;
}
.missing-crew-date:focus { outline: 2px solid color-mix(in srgb, var(--brand) 30%, transparent); border-color: var(--brand); }
.missing-crew-results { margin-top: 10px; }
.missing-crew-empty { margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.missing-crew-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.missing-crew-table { inline-size: 100%; border-collapse: collapse; font-size: 12.5px; }
.missing-crew-table th {
  padding: 7px 9px; text-align: start; white-space: nowrap;
  background: var(--surface); color: var(--ink-soft);
  font-size: 11.5px; font-weight: 600; border-block-end: 1px solid var(--line);
}
.missing-crew-table td { padding: 6px 9px; border-block-end: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.missing-crew-table tbody tr:last-child td { border-block-end: 0; }
.missing-crew-table tbody tr:hover { background: color-mix(in srgb, var(--brand) 5%, transparent); }
/* Hairline marking where a new date starts, so the list reads day by day. */
.missing-crew-table tbody tr.is-day-start td { border-block-start: 1px solid var(--line); }
.missing-crew-table tbody tr.is-day-start:first-child td { border-block-start: 0; }
.missing-crew-gaps { white-space: nowrap; }
.missing-crew-tag {
  display: inline-block; margin-inline-end: 4px; padding: 2px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.missing-crew-open { color: var(--ink-soft); font-style: italic; }
.missing-crew-na { color: var(--ink-soft); }
.missing-crew-go { padding: 3px 10px; font-size: 11.5px; white-space: nowrap; }

/* Quick-assignment modal opened by "השלמת שיבוץ" — fills an open generic-crew seat
   in place, so the report row can be closed without leaving the imports tab. */
.missing-crew-modal { inline-size: min(440px, 100%); }
.missing-crew-modal-details {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 4%, transparent);
  font-size: 12.5px;
}
.missing-crew-modal-details dt { color: var(--ink-soft); }
.missing-crew-modal-details dd { margin: 0; font-weight: 600; }
.missing-crew-modal-fields { display: flex; flex-direction: column; gap: 10px; }
/* Searchable dropdown for one open seat. A native <select> cannot be typed into and the
   list is the whole staff directory, so the field is a combobox: a text input that
   filters a compact scrolling panel live. The panel is in the flow rather than floating
   because the modal scrolls its own content and would clip an absolute one. */
.missing-crew-combo { display: grid; gap: 6px; }
.missing-crew-combo-field { position: relative; }
.missing-crew-combo .missing-crew-combo-input {
  inline-size: 100%;
  box-sizing: border-box;
  padding-inline-end: 62px;   /* room for the clear + caret buttons */
  font-size: 14px;
}
.missing-crew-combo-btns {
  position: absolute;
  inset-inline-end: 7px;
  inset-block-start: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 2px;
}
.missing-crew-combo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 26px;
  block-size: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.missing-crew-combo-btn:hover { background: var(--brand-soft); color: var(--brand); }
.missing-crew-combo-btn[hidden] { display: none; }
.missing-crew-combo-list {
  max-block-size: 200px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.missing-crew-combo-list[hidden] { display: none; }
/* "מסומנים כנהג/ת" / "פראמדיקים" above the rest of the quick-selection list — the grouping
   survives filtering, and a group with no match for the current query drops out header and
   all. */
.missing-crew-combo-group + .missing-crew-combo-group { margin-block-start: 4px; }
.missing-crew-combo-group-label {
  padding: 6px 8px 3px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-faint);
}
.missing-crew-combo-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 7px;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
}
.missing-crew-combo-opt:hover { background: var(--brand-soft); }
.missing-crew-combo-opt.is-active { background: var(--brand-soft); color: var(--brand); }
.missing-crew-combo-opt.is-current { font-weight: 700; }
/* The creatable "use the name I typed" row: tinted and tagged, so a free-text assignment
   never reads as an existing quick-selection entry. */
.missing-crew-combo-opt.is-typed { background: var(--brand-soft); }
.missing-crew-combo-opt-tag {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-deep);
}
/* The "שם בסידור / כינוי" that answered the search, in brackets right after the full name
   — "אבי כץ (כץ)" — so it is clear both WHY the row is on screen and that the pick is a
   linked staff member rather than a new name. */
.missing-crew-combo-opt-alias {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
}
.missing-crew-combo-empty { padding: 8px 9px; font-size: 12.5px; color: var(--ink-faint); }
.missing-crew-modal-hint { margin: 0; font-size: 11.5px; color: var(--ink-soft); line-height: 1.45; }

/* Role Assignment Approval modal (user management). */
.approval-modal-hint { margin: 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
.approval-roles { display: flex; flex-direction: column; gap: 6px; margin: 4px 0; }
.approval-role-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px;
  font-size: 14.5px; font-weight: 600; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.approval-role-row:hover { background: var(--surface-2); border-color: var(--line-strong); }
.approval-role-row input { inline-size: 18px; block-size: 18px; accent-color: var(--brand); flex: none; }

/* Categorized single-select role picker inside the approval modal: each of the
   three parent categories (משתלמים / מתנדבים / בעלי תפקיד) is a labeled sub-group. */
.approval-roles-grouped { gap: 14px; }
.approval-role-group { display: flex; flex-direction: column; gap: 6px; }
.approval-role-group-title {
  margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .02em;
  text-transform: none; color: var(--ink-soft);
  padding-block-end: 2px; border-block-end: 1px solid var(--line);
}

/* "מורשה אט״ן" authorization cell — the switch plus a short explanatory hint. */
.atan-auth-cell { display: flex; flex-direction: column; gap: 6px; }
.atan-auth-hint { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }

/* Youth-mentorship auto-trigger popup — wider so the pre-filled evaluation form
   fits comfortably. Its card chrome comes from .mentorship-upload-card. */
.mentor-eval-modal { inline-size: min(560px, 100%); }
.mentor-eval-modal .mentorship-upload-card { border: none; padding: 0; box-shadow: none; background: transparent; }
.swap-modal-modes { display: flex; flex-direction: column; gap: 8px; }
.swap-modal-mode {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.swap-modal-mode input { margin: 0; }
.swap-modal-direct { display: flex; flex-direction: column; gap: 8px; }
/* The author `display: flex` above overrides the UA `[hidden] { display: none }`,
   so `hidden` alone would NOT hide the direct-swap dropdowns in public-board mode.
   Restore the intended behaviour explicitly. */
.swap-modal-direct[hidden] { display: none; }
.swap-modal-field-label { font-size: 13px; color: var(--ink-soft); }
.swap-modal-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }

/* --- Trainee certification-progress tracker (schedule tab) --- */
.trainee-progress {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
  margin-bottom: 24px;
}
.trainee-progress-head { margin-bottom: 16px; }
.trainee-progress-title {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
}
.trainee-progress-sub { font-size: 13px; color: var(--ink-soft); margin: 0; }

.progress-bar {
  position: relative;
  block-size: 8px;
  border-radius: 999px;
  background: var(--paper-2);
  overflow: hidden;
  margin-bottom: 18px;
}
/* Bar + explicit percentage label sit on one row so the number reads beside the
   fill. The bar keeps its own bottom margin, so zero it here to align them. */
.progress-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.progress-bar-row .progress-bar { flex: 1; margin-bottom: 0; }
.progress-bar-pct {
  flex: none;
  font-size: 14px;
  font-weight: 800;
  color: var(--brand-deep);
  min-inline-size: 3ch;
  text-align: end;
}
.progress-bar-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-deep), var(--brand));
  transition: inline-size .35s ease;
}

.progress-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.progress-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.progress-step-dot {
  flex: 0 0 auto;
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  background: var(--paper-2);
  color: var(--ink-faint);
  border: 1px solid var(--line-strong);
}
.progress-step-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.progress-step-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.progress-step-desc { font-size: 12px; color: var(--ink-soft); }
.progress-step-count { font-size: 12px; font-weight: 600; color: var(--brand-deep); margin-block-start: 2px; }
.progress-step.is-done .progress-step-count { color: var(--ok); }
.progress-step.is-upcoming .progress-step-count { color: var(--ink-soft); font-weight: 500; }

.progress-step.is-done { border-color: var(--ok); background: var(--ok-soft); }
.progress-step.is-done .progress-step-dot { background: var(--ok); color: #fff; border-color: var(--ok); }
.progress-step.is-current { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 2px rgba(var(--brand-rgb), .18); }
.progress-step.is-current .progress-step-dot { background: var(--brand); color: #fff; border-color: var(--brand); }
.progress-step.is-current .progress-step-name { color: var(--brand-deep); }
.progress-step.is-upcoming { opacity: .78; }

@media (max-width: 720px) {
  .progress-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .progress-steps { grid-template-columns: 1fr; }
}

/* --- Crew-type pill (משתלם / מתנדב נוער / מתנדב בוגר / חיצוני) ---
   Shown beside an assigned name on the scheduling boards. One shape, colour-coded
   per kind so schedulers can tell registered trainees, youth and adult volunteers,
   and free-typed external covers apart at a glance. */
.crew-kind-badge {
  flex: 0 0 auto;
  margin-inline-start: 4px;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 9999px;
  white-space: nowrap;
  border: 1px solid transparent;
}
.crew-kind-badge.is-external { background: var(--gold-soft); color: var(--gold); border-color: var(--gold); }
.crew-kind-badge.is-saral   { background: rgb(254, 226, 226); color: #7f1d1d !important; border-color: rgb(252, 165, 165); font-weight: 700; }
.crew-kind-badge.is-trainee  { background: var(--brand-soft); color: var(--brand-deep); border-color: color-mix(in srgb, var(--brand, #2563eb) 45%, transparent); }
.crew-kind-badge.is-youth    { background: var(--ok-soft); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.crew-kind-badge.is-adult    { background: color-mix(in srgb, #7c3aed 16%, transparent); color: #6d28d9; border-color: color-mix(in srgb, #7c3aed 45%, transparent); }
.crew-kind-badge.is-role-custom { font-weight: 700; }
html[data-theme="dark"] .crew-kind-badge.is-adult { color: #c4b5fd; }
html[data-theme="dark"] .crew-kind-badge.is-saral { color: #7f1d1d !important; }
.mx-slot.is-external .mx-slot-pick {
  border-color: var(--gold);
  background: var(--gold-soft);
}
.mx-slot.is-external .mx-slot-name { color: var(--gold); }
.matrix-create-item { border-style: dashed; border-color: var(--gold); color: var(--gold); }
.matrix-create-item:hover { background: var(--gold-soft); border-color: var(--gold); }
.assign-item-tag.matrix-ext-tag { background: var(--gold-soft); color: var(--gold); }

/* ==========================================================================
   Mobile responsive hardening patch
   Fixes horizontal-overflow zoom-out, cramped topbar, clipped calendar, and
   the off-canvas monthly matrix / scheduling tables on phones. This block is
   intentionally last so it wins the cascade over earlier mobile rules.
   ========================================================================== */

/* Root-cause guard: any single element wider than the viewport makes the
   browser shrink the whole page to fit (the "zoomed-out desktop" symptom).
   Clip stray horizontal overflow at the document level; wide tables keep their
   own inner scroll containers, so nothing scrollable is lost. Scoped to <html>
   (not <body>) so it stays the scroll container and the sticky topbar keeps
   sticking. */
html { overflow-x: hidden; }
body { max-width: 100%; }

@media (max-width: 768px) {
  /* ---- 1. Header & navigation ---- */
  .app-header,
  header,
  .top-navbar,
  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px 14px;
  }
  .topbar-brand { margin-inline-end: 0; justify-content: center; align-self: center; }
  .mobile-header,
  .topbar-user {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 8px 16px !important;
    gap: 12px;
    flex-wrap: nowrap;
  }
  .user-info-group,
  .user-pill,
  .header-user,
  .topbar-user-info {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    margin-inline-end: auto !important;
    order: 1 !important;
    flex: 0 1 auto;
    justify-content: flex-end;
    width: auto !important;
    max-width: none !important;
  }
  .header-actions,
  .top-actions-group,
  .header-buttons,
  .topbar-user-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    margin-inline-start: auto !important;
    margin-inline-end: 0 !important;
    order: 2 !important;
    width: auto !important;
    max-width: none !important;
    flex-wrap: nowrap;
  }
  .topbar-user-actions > #pwa-setup-btn,
  .topbar-user-actions > #help-btn {
    display: none !important;
  }
  .topbar-user-actions > #logout-btn { padding: 8px 12px; }
  .user-name {
    max-width: min(42vw, 180px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Tabs become a clean, swipeable horizontal strip that never wraps. */
  .main-nav {
    order: 3;
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .nav-tab { flex: 0 0 auto; white-space: nowrap; }

  /* ---- 2. Calendar grid ---- */
  .calendar-wrap {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    padding: 10px;
    /* Smooth momentum scrolling on iOS when the parent is scrollable */
    -webkit-overflow-scrolling: touch;
  }
  /* Day boxes shrink to stay fully inside the 7-column track. */
  .calendar-weekdays, .calendar-grid { gap: 4px; }
  /* Prevent day cells from overflowing and triggering horizontal scroll.
     touch-action: manipulation removes 300 ms tap delay and lets cells
     respond instantly without accidentally triggering parent scroll. */
  .day-cell {
    min-height: 52px;
    padding: 5px;
    overflow: hidden;
    touch-action: manipulation;
    /* Suppress hover lift on touch devices to avoid layout jitter. */
    transform: none !important;
  }
  .day-cell:hover { transform: none; }
  .day-num { font-size: 14px; }
  /* Preview cards inside day cells: clip text, never stretch the cell. */
  .day-shift-names { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 9.5px; }
  .day-shift { flex-shrink: 0; }

  /* ---- 3. Scheduling table / monthly matrix ---- */
  /* Google-Sheets-style: the table is wider than the screen and the scroll
     container provides horizontal swipe — nothing is compressed to fit. */
  .matrix-wrap {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  .matrix-scroll {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    display: block !important;
    max-height: calc(100vh - 200px);
  }
  /* Full natural width so station columns never get crushed. */
  .matrix-table {
    font-size: 11px !important;
    min-width: 0 !important;
    width: max-content !important;
  }
  .matrix-table th,
  .matrix-table td {
    padding: 3px 5px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
    height: auto !important;
  }
  /* Station header columns: wide enough to show full names without clipping. */
  .mx-station {
    min-width: 150px !important;
    max-width: 180px !important;
    font-size: 10px !important;
    white-space: normal !important;
    word-break: break-word !important;
  }
  /* Keep the pinned date+day merged column compact on mobile too.
     On RTL layouts the sticky edge is the right (inline-end) side. */
  .mx-col-date {
    position: sticky !important;
    inset-inline-start: unset !important;
    right: 0 !important;
    inset-inline-end: 0 !important;
    padding: 3px 6px !important;
    background: var(--surface-2) !important;
    z-index: 20 !important;
    text-align: center !important;
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    border-inline-start: 2px solid var(--line-strong) !important;
    border-inline-end: none !important;
  }
  /* Keep the frozen column opaque on row states (weekend/today/hover). */
  .matrix-table tbody tr.is-weekend td.mx-col-date,
  .matrix-table tbody tr.is-today   td.mx-col-date,
  .matrix-table tbody tr:hover       td.mx-col-date {
    background: var(--surface-2) !important;
  }
  /* Station cells: allow names to wrap naturally so nothing is clipped. */
  .mx-cell {
    min-width: 150px !important;
    max-width: 180px !important;
    padding: 3px 5px !important;
    vertical-align: top !important;
  }
  .mx-cell-shift-meta, .mx-cell-crew { font-size: 10px !important; }
  .mx-slot-view  { font-size: 11px !important; }
  /* Slot names wrap instead of clipping with ellipsis. */
  .mx-slot-name {
    font-size: 11px !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
  /* Compact status badges (משתלם / מתנדב חיצוני etc.). */
  .crew-kind-badge {
    font-size: 9px !important;
    padding: 1px 4px !important;
    border-radius: 4px !important;
  }

  /* ---- Monthly-matrix toolbar (edit pencil, undo, crew toggle, zoom) ----
     On phones the toolbar action buttons wrap gracefully into a compact,
     touch-friendly cluster instead of overflowing the viewport or overlapping.
     Tighter gaps/padding and a full-width hint keep every control reachable. */
  .matrix-toolbar {
    gap: 8px 10px;
    padding: 10px 12px;
  }
  .matrix-toolbar .btn,
  .matrix-toolbar .edit-pencil-btn {
    flex: 0 0 auto;
  }
  /* Keep the zoom stepper on the trailing edge but let it drop to its own line
     when the leading buttons already fill the row, rather than crushing them. */
  .matrix-zoom { margin-inline-start: auto; }
  /* The read-only hint takes the full width beneath the buttons so it never
     competes with them for horizontal space. */
  .matrix-toolbar-hint { flex: 1 0 100%; }

  /* Focus bar (week filter) mirrors the toolbar: wrap instead of overflow. */
  .matrix-focus-bar { padding: 10px 12px; gap: 8px 10px; }

  /* Card-wrapped tables (forms, stations, roster) scroll sideways instead of
     clipping columns. The #tab-users accounts table and the roles matrix are
     unaffected: they reflow into stacked cards (display:block; min-width:0),
     so overflow-x:auto simply produces no scrollbar for them. */
  .table-card {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Keep table inputs on a single line so the swipeable row height stays sane. */
  .matrix-wrap input,
  .table-card table input,
  .table-card table select {
    box-sizing: border-box;
    line-height: normal;
  }
}

/* Extra-narrow phones: squeeze the toolbar/nav a little more so nothing
   overflows on ~360px screens, and give the matrix zoom stepper slightly
   larger tap targets since it is the primary way to fit the grid on-screen. */
@media (max-width: 480px) {
  .matrix-toolbar { padding: 8px 10px; gap: 6px 8px; }
  .matrix-zoom-btn { min-width: 32px; padding: 4px 8px; }
  .matrix-zoom-label { min-width: 40px; }
  .matrix-toolbar .edit-pencil-btn { width: 34px; height: 34px; }
  .nav-tab { padding: 8px 12px; font-size: 13.5px; }
}

/* ---- Trainee Schedule View ---- */
.trainee-view-container {
  padding: 20px;
  max-width: 100%;
  margin: 0;
  min-width: 0;
}

.trainees-view-container,
.trainee-tracking-container,
.users-table-container,
.table-responsive,
.trainee-view-container,
.trainee-schedule-table,
.trainee-table-shell,
.trainees-management-table,
#tab-trainee-view {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  float: none !important;
}

.trainee-view-toolbar-host {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-inline-start: auto;
}

.trainee-selector-wrap {
  margin-bottom: 24px;
  max-width: 320px;
}

.trainee-selector-field {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.trainee-selector-field > .field {
  flex: 1 1 auto;
}

.trainee-view-edit-toggle {
  flex: 0 0 auto;
  padding-block-end: 2px;
}

.trainee-track-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  direction: ltr;
}

.trainee-track-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  direction: rtl;
  justify-content: flex-start;
}

.trainee-alltime-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 24px !important;
}

.trainee-kpi-card {
  background: linear-gradient(170deg, rgba(15, 23, 42, .72), rgba(15, 23, 42, .52));
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 14px 34px rgba(2, 6, 23, .35);
  backdrop-filter: blur(10px);
}

.trainee-kpi-card.is-date-card .kpi-value {
  font-size: 28px;
}

.trainee-kpi-card .kpi-sub {
  margin-top: 6px;
  font-size: 12.5px;
  color: rgba(226, 232, 240, .78);
}

.trainee-table-shell {
  margin-top: 16px;
  width: 100% !important;
  display: block;
  max-width: 100%;
  min-width: 0;
  position: relative;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(15, 23, 42, .84), rgba(2, 6, 23, .72));
  box-shadow: 0 24px 56px rgba(2, 6, 23, .42);
  backdrop-filter: blur(12px);
  padding: 8px 10px 12px;
}

.trainee-table-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  display: block;
}

.trainee-table-scroll::-webkit-scrollbar {
  height: 8px;
}

.trainee-table-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.3);
  border-radius: 4px;
}

.trainee-tracking-table {
  width: 100% !important;
  margin: 0 !important;
  display: table !important;
  min-width: 1400px;
  table-layout: auto !important;
  direction: rtl;
  border-collapse: separate;
  border-spacing: 0;
}

.trainee-tracking-table thead {
  display: table-header-group !important;
}

.trainee-tracking-table tbody {
  display: table-row-group !important;
}

.trainee-tracking-table tr {
  display: table-row !important;
}

.trainee-tracking-table th,
.trainee-tracking-table td {
  box-sizing: border-box;
  white-space: nowrap !important;
  padding: 14px 18px !important;
  vertical-align: middle;
}

.trainee-tracking-table th {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(226, 232, 240, .78);
  text-align: right;
  background: transparent;
  border: 0 !important;
  white-space: nowrap;
}

.trainee-tracking-table td {
  vertical-align: middle;
  text-align: right;
  border: 0 !important;
  background: transparent;
  color: rgba(248, 250, 252, .92);
}

.trainee-tracking-table th:nth-child(11),
.trainee-tracking-table td:nth-child(11) {
  min-width: 140px;
}

.trainee-tracking-table th:nth-child(14),
.trainee-tracking-table td:nth-child(14) {
  min-width: 110px;
}

.trainee-tracking-table tbody tr {
  position: relative;
  z-index: 1;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(255, 255, 255, 0.02) !important;
  border: 0;
  border-radius: 10px;
  margin-bottom: 6px;
}

.trainee-tracking-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(2, 6, 23, .36);
}

.trainee-tracking-table tbody tr:hover td {
  background: transparent;
}

.trainee-tracking-table td {
  overflow: visible;
}

.trainee-tracking-table tbody tr.is-dragging td {
  opacity: .55;
}

.trainee-tracking-table tbody td:first-child {
  border-inline-start: 1px solid rgba(255, 255, 255, 0.06);
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.trainee-tracking-table tbody td:last-child {
  border-inline-end: 1px solid rgba(255, 255, 255, 0.06);
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.trainee-tracking-table tbody td {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.trainee-name-cell {
  min-width: 220px;
}

.trainees-management-table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 1 1 auto;
}

.trainee-name-stack {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.trainee-name-text {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: rgba(248, 250, 252, .96);
}

.trainee-row-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.trainee-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: rgba(248, 250, 252, .88);
}

.trainee-status-pill.is-course {
  color: rgba(226, 232, 240, .9);
}

.trainee-status-pill.is-certified {
  background: rgba(16, 185, 129, .14);
  color: #86efac;
  border-color: rgba(16, 185, 129, .36);
}

.missing-forms-badge,
.missing-forms-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .02em;
  border: 1px solid rgba(248, 113, 113, .4);
  background: linear-gradient(160deg, rgba(239, 68, 68, .22), rgba(190, 24, 93, .2));
  color: #fee2e2;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(248, 113, 113, 0);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.missing-forms-badge:hover,
.missing-forms-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(252, 165, 165, .64);
  box-shadow: 0 0 0 4px rgba(248, 113, 113, .14);
}

.trainee-actions-cell {
  white-space: nowrap;
}

.trainee-actions-cell .btn {
  margin-inline-start: 6px;
}

.trainee-actions-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.trainee-action-btn {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, .34);
  background: rgba(15, 23, 42, .78);
  color: #f8fafc;
  border-radius: 999px;
  min-width: 34px;
  min-height: 34px;
  padding: 6px 10px;
  line-height: 1;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.trainee-action-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(96, 165, 250, .64);
  background: rgba(30, 41, 59, .95);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, .14);
}

.trainee-action-btn.is-cert:hover {
  border-color: rgba(16, 185, 129, .6);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .16);
}

.trainee-action-btn.is-save {
  min-width: 62px;
  font-size: 12.5px;
}

.trainee-course-pill.is-course-kapam {
  border-color: rgba(16, 185, 129, .42);
  background: rgba(16, 185, 129, .14);
  color: #6ee7b7;
}

.trainee-course-pill.is-course-kapatz {
  border-color: rgba(168, 85, 247, .42);
  background: rgba(168, 85, 247, .16);
  color: #d8b4fe;
}

.trainee-course-pill.is-course-paramedics {
  border-color: rgba(59, 130, 246, .42);
  background: rgba(59, 130, 246, .16);
  color: #93c5fd;
}

.trainee-stage-pill {
  border-color: rgba(148, 163, 184, .34);
  background: rgba(71, 85, 105, .28);
  color: rgba(226, 232, 240, .94);
}

.trainee-id-badge {
  font-family: "Rubik", "Segoe UI", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.trainee-tracking-table td.is-empty-value {
  color: rgba(255, 255, 255, 0.2) !important;
}


.trainee-row.is-editing input,
.trainee-row.is-editing select,
input.table-edit-input,
select.table-edit-input {
  min-width: 90px !important;
  min-height: 38px !important;
  padding: 6px 10px !important;
  font-size: 0.875rem !important;
  width: 100% !important;
}

.trainee-inline-input,
.trainee-inline-select,
.trainee-emergency-stack .input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.trainee-inline-select {
  padding-inline-end: 28px;
}

.trainee-emergency-stack {
  display: grid;
  gap: 8px;
}

.trainee-stage3-days-cell {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.trainee-missing-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, .58);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 120;
}

.trainee-missing-modal {
  width: min(680px, 94vw);
  max-height: 84vh;
  overflow: auto;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--line-strong, #cbd5e1) 58%, transparent);
  background: color-mix(in srgb, var(--surface) 96%, #0f172a 4%);
  box-shadow: 0 28px 70px rgba(15, 23, 42, .35);
  padding: 18px;
}

.trainee-missing-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.trainee-missing-modal-head h3 {
  margin: 0;
}

.trainee-missing-modal-body {
  display: grid;
  gap: 10px;
}

.trainee-missing-item {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--line-strong, #cbd5e1) 46%, transparent);
  background: rgba(255, 255, 255, .03);
}

.trainee-missing-item-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.mark-form-done-btn {
  appearance: none;
  border: 1px solid rgba(16, 185, 129, .48);
  background: rgba(16, 185, 129, .16);
  color: #bbf7d0;
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}

.mark-form-done-btn:hover {
  background: rgba(16, 185, 129, .24);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .14);
  transform: translateY(-1px);
}

.mark-form-done-btn:disabled {
  opacity: .6;
  cursor: wait;
  transform: none;
  box-shadow: none;
}

.trainee-missing-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.trainee-drag-handle {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-faint);
  cursor: grab;
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px 0 0;
}

.trainee-drag-handle:active {
  cursor: grabbing;
}


.trainee-certified-section {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(15, 23, 42, .84), rgba(2, 6, 23, .72));
  box-shadow: 0 24px 56px rgba(2, 6, 23, .42);
  backdrop-filter: blur(12px);
}

.trainee-certified-accordion {
  padding: 0;
  overflow: hidden;
}

.trainee-certified-quarter-summary {
  margin-top: 0;
  margin-bottom: 16px !important;
}

.trainee-certified-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.trainee-certified-accordion-head {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(15, 23, 42, .72);
  color: var(--ink);
  text-align: inherit;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02);
}

.trainee-certified-accordion-head:hover {
  background: rgba(15, 23, 42, .82);
  border-color: rgba(148, 163, 184, .38);
}

.trainee-certified-accordion-head:focus-visible {
  outline: 2px solid rgba(45, 212, 191, .45);
  outline-offset: 2px;
}

.trainee-certified-accordion-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin-inline-start: auto;
}

.trainee-certified-accordion-copy h3 {
  font-size: 18px;
  line-height: 1.2;
  color: #f8fafc;
  white-space: nowrap;
}

.trainee-certified-accordion-badge {
  background: linear-gradient(135deg, rgba(16, 185, 129, .18), rgba(20, 184, 166, .18));
  border: 1px solid rgba(45, 212, 191, .25);
  color: #a7f3d0;
  box-shadow: none;
}

.trainee-certified-accordion-arrow {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(148, 163, 184, .10);
  border: 1px solid rgba(148, 163, 184, .18);
  transition: transform .22s ease, background-color .2s ease, border-color .2s ease;
}

.trainee-certified-accordion-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: #cbd5e1;
}

.trainee-certified-accordion-arrow.is-open {
  transform: rotate(180deg);
  background: rgba(16, 185, 129, .16);
  border-color: rgba(45, 212, 191, .25);
}

.trainee-certified-accordion-arrow.is-open svg {
  color: #34d399;
}

.trainee-certified-accordion-body {
  padding: 14px 16px 16px;
}

.trainee-certified-accordion-body[hidden] {
  display: none;
}

.trainee-certified-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trainee-certified-year {
  min-width: 132px;
}

.trainee-certified-section .matrix-empty {
  padding: 28px 16px;
  text-align: center;
  color: rgba(226, 232, 240, .78);
  font-weight: 600;
}

.trainee-certified-table-shell {
  margin-top: 12px;
  width: 100% !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: block;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(15, 23, 42, .84), rgba(2, 6, 23, .72));
  box-shadow: 0 20px 40px rgba(2, 6, 23, .3);
  backdrop-filter: blur(10px);
  padding: 8px 10px 12px;
}

.trainee-certified-table {
  width: 100% !important;
  margin: 0 !important;
  display: table !important;
  min-width: 640px;
  table-layout: auto !important;
  direction: rtl;
  border-collapse: separate;
  border-spacing: 0 6px;
}

.trainee-certified-table th,
.trainee-certified-table td {
  box-sizing: border-box;
  white-space: nowrap !important;
  padding: 14px 18px !important;
  vertical-align: middle;
}

.trainee-certified-table th {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(226, 232, 240, .78);
  text-align: right;
  background: transparent;
  border: 0 !important;
}

.trainee-certified-table td {
  vertical-align: middle;
  text-align: right;
  border: 0 !important;
  background: transparent;
  color: rgba(248, 250, 252, .92);
}

.trainee-certified-table tbody tr {
  background: rgba(255, 255, 255, 0.02) !important;
  border-radius: 10px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.trainee-certified-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(2, 6, 23, .36);
}

.trainee-certified-table tbody td:first-child {
  border-inline-start: 1px solid rgba(255, 255, 255, 0.06);
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.trainee-certified-table tbody td:last-child {
  border-inline-end: 1px solid rgba(255, 255, 255, 0.06);
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}

.trainee-certified-table tbody td {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.trainee-view-select {
  width: 100%;
}

.trainee-schedule-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 20px;
}

@media (max-width: 980px) {
  .trainee-alltime-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trainee-certified-accordion-head {
    padding: 13px 14px;
  }

  .trainee-certified-accordion-copy {
    margin-inline-start: 0;
  }
}

@media (max-width: 640px) {
  .trainee-alltime-summary {
    grid-template-columns: 1fr;
  }

  .trainee-track-actions {
    align-items: stretch;
  }
}

.trainee-schedule-grid {
  min-width: 100%;
  display: inline-block;
}

.schedule-grid-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.schedule-grid-table thead {
  background: var(--paper-2);
  font-weight: 700;
  text-align: right;
  direction: rtl;
}

.schedule-grid-table th {
  padding: 12px 14px;
  border-bottom: 2px solid var(--line-strong);
  font-size: 14px;
  color: var(--ink);
  font-weight: 700;
  text-align: right;
}

.schedule-grid-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  font-size: 14px;
}

.schedule-grid-table tbody tr:last-child td {
  border-bottom: none;
}

.schedule-grid-table .col-date {
  min-width: 100px;
  text-align: right;
}

.schedule-grid-table .col-weekday {
  min-width: 80px;
  text-align: right;
}

.schedule-grid-table .col-shift {
  min-width: 170px;
  font-size: 13px;
}

.schedule-grid-table td.col-shift {
  padding: 0;
}

.schedule-grid-table .shift-cell-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  direction: rtl;
  min-height: 44px;
}

.schedule-grid-table .shift-cell-split > .shift-cell-part {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 8px;
  text-align: center;
}

.schedule-grid-table .shift-cell-split.divide-x > .shift-cell-part + .shift-cell-part {
  border-inline-start: 1px solid var(--line-strong);
}

.schedule-grid-table .shift-request-part {
  color: var(--ink-soft);
  font-size: 12px;
}

.schedule-grid-table .col-night .shift-request-part {
  background-color: #f0f4f8;
}

.schedule-grid-table .col-morning .shift-request-part {
  background-color: #fffbf0;
}

.schedule-grid-table .col-evening .shift-request-part {
  background-color: #fef5f5;
}

/* Default background colors for shift columns (RTL-aware) */
.schedule-grid-table .col-night .shift-assignment-part {
  background-color: #d8e9f5;
}

.schedule-grid-table .col-morning .shift-assignment-part {
  background-color: #fff9e6;
}

.schedule-grid-table .col-evening .shift-assignment-part {
  background-color: #fde3e3;
}

.schedule-grid-table td.shift-assigned .shift-assignment-part {
  background-color: #4ade80;
  color: #fff;
  font-weight: 600;
}

/* Delete-assignment button shown inside assigned cells when edit mode is active */
.schedule-grid-table .shift-assignment-part {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
}
.schedule-grid-table .trainee-assign-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.schedule-grid-table .trainee-unassign-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: none;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  opacity: 0.65;
  cursor: pointer;
  line-height: 1;
}
.schedule-grid-table .trainee-unassign-btn:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.15);
}

.schedule-grid-table td.is-editable {
  cursor: pointer;
}

.schedule-grid-table td.is-editable:hover {
  box-shadow: inset 0 0 0 2px rgba(34, 197, 94, 0.45);
}

html[data-theme="dark"] .schedule-grid-table .shift-request-part {
  color: var(--ink-soft);
}

html[data-theme="dark"] .schedule-grid-table .col-night .shift-request-part {
  background-color: #1a2530;
}

html[data-theme="dark"] .schedule-grid-table .col-morning .shift-request-part {
  background-color: #2a2820;
}

html[data-theme="dark"] .schedule-grid-table .col-evening .shift-request-part {
  background-color: #2a1a1a;
}

html[data-theme="dark"] .schedule-grid-table .col-night .shift-assignment-part {
  background-color: #1e3a5f;
}

html[data-theme="dark"] .schedule-grid-table .col-morning .shift-assignment-part {
  background-color: #3d3a1a;
}

html[data-theme="dark"] .schedule-grid-table .col-evening .shift-assignment-part {
  background-color: #4a1f1f;
}

html[data-theme="dark"] .schedule-grid-table td.shift-assigned .shift-assignment-part {
  background-color: #22c55e;
  color: #fff;
}

.trainee-schedule-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--ink-soft);
  font-size: 16px;
}

/* ---- Mobile layout for trainee view ---- */
@media (max-width: 640px) {
  .trainee-schedule-grid {
    font-size: 12px;
  }

  .schedule-grid-table th,
  .schedule-grid-table td {
    padding: 8px 10px;
  }

  .schedule-grid-table .col-date {
    min-width: 85px;
  }

  .schedule-grid-table .col-weekday {
    min-width: 70px;
  }

  .schedule-grid-table .col-shift {
    min-width: 130px;
  }
}

/* ---- Mobile navigation ----
   Strict 1:1 parity with desktop: the horizontal tab strip is KEPT on narrow
   viewports (no hamburger / side-drawer / <select> replacement). When it exceeds
   the screen width it simply scrolls sideways with hidden scrollbars. Placed last
   so it overrides the earlier 768px .main-nav rules and the legacy select swap. */
@media (max-width: 768px) {
  .main-nav {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .main-nav::-webkit-scrollbar { display: none; }

  /* The legacy replacement dropdown is retired — never render it. */
  .nav-mobile-select { display: none !important; }
}


/* ==========================================================================
   View Requests Submissions ("צפייה בהגשת בקשות") + Forms-Tracking requests
   panel + shared availability pills. Appended block — self-contained.
   ========================================================================== */

/* Shared availability pill (prefer / avoid / cannot) reused by the requests
   screen and the tracking reference panel. */
.avail-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink-soft);
}
.avail-pill.sm { font-size: 11.5px; padding: 2px 7px; }
.avail-pill.prefer { background: var(--ok-soft);     color: var(--ok);          border-color: var(--ok); }
.avail-pill.avoid  { background: var(--gold-soft);   color: var(--gold);        border-color: var(--gold); }
.avail-pill.cannot { background: var(--danger-soft); color: var(--danger-deep); border-color: var(--danger); }

/* Danger button variant (bulk purge). */
.btn-danger {
  background: var(--danger);
  color: #fff;
  border: 1px solid var(--danger-deep);
}
.btn-danger:hover { background: var(--danger-deep); }

/* ---- Requests toolbar (week nav + purge) ---- */
.requests-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.requests-week-nav { display: flex; align-items: center; gap: 10px; }
.requests-week-label { font-weight: 700; font-size: 15px; color: var(--ink); min-width: 150px; text-align: center; }
.requests-empty, .requests-loading { color: var(--ink-faint); padding: 18px 4px; }

/* ---- Trainee request cards ---- */
.requests-list { display: flex; flex-direction: column; gap: 10px; }
.request-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.request-card.is-editing { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.request-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  flex-wrap: wrap;
}
.request-card-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  background: none;
  border: none;
  cursor: pointer;
  text-align: start;
  font: inherit;
  color: var(--ink);
  min-width: 0;
}
.request-caret { transition: transform .18s ease; color: var(--ink-faint); }
.request-card.is-open .request-caret { transform: rotate(180deg); }
.request-name { font-weight: 700; font-size: 15px; }
.request-status {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
}
.request-status.is-submitted { background: var(--ok-soft); color: var(--ok); }
.request-status.is-pending { background: var(--danger-soft); color: var(--danger-deep); }
.request-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.request-edit-toggle.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }

.request-card-body {
  padding: 4px 14px 16px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.request-sub-title { font-size: 13px; font-weight: 700; color: var(--ink-soft); margin: 12px 0 8px; }

.request-avail-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.request-avail-table th, .request-avail-table td {
  border: 1px solid var(--line);
  padding: 6px 8px;
  text-align: center;
}
.request-avail-table thead th { background: var(--surface-2); font-weight: 700; }
.request-day { text-align: start; white-space: nowrap; font-weight: 600; background: var(--surface-2); }
.request-cell-empty { color: var(--ink-faint); }
.request-avail-select {
  font: inherit;
  font-size: 12.5px;
  padding: 4px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--field-bg);
  color: var(--ink);
}
.request-save { margin-top: 12px; align-self: flex-start; }

.request-notes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.request-notes-list li { font-size: 13px; line-height: 1.5; }
.request-note-meta { font-weight: 700; color: var(--ink-soft); }
.request-note-text { color: var(--ink); }
.request-notes-empty { color: var(--ink-faint); font-size: 13px; margin: 0; }

/* ---- Collapsible trainee-requests panel in Forms Tracking ---- */
.tracking-requests-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
  overflow: hidden;
}
.tracking-req-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: var(--surface-2);
  border: none;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  text-align: start;
}
.tracking-req-caret { transition: transform .18s ease; color: var(--ink-faint); }
.tracking-req-head.is-open .tracking-req-caret { transform: rotate(180deg); }
.tracking-req-title { font-weight: 700; font-size: 15px; }
.tracking-req-hint { color: var(--ink-faint); font-size: 12.5px; margin-inline-start: auto; }
.tracking-req-body { padding: 12px 14px; border-top: 1px solid var(--line); }
.tracking-req-week { font-weight: 700; color: var(--ink-soft); margin-bottom: 10px; }
.tracking-req-empty, .tracking-req-loading, .tracking-req-muted { color: var(--ink-faint); font-size: 13px; }
.tracking-req-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tracking-req-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 9px;
  border-bottom: 1px dashed var(--line);
}
.tracking-req-item:last-child { border-bottom: none; padding-bottom: 0; }
.tracking-req-name { font-weight: 700; font-size: 14px; }
.tracking-req-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.tracking-req-notes { font-size: 12.5px; color: var(--ink-soft); }

/* ---- Forms-tracking time-bucket accordion ("מעקב ביצוע טפסים") ----
   Four collapsible sections grouped by how long the shift has been outstanding.
   Sections are collapsed by default; the body is toggled via the `.hidden` class
   (scoped here so it does not leak to the rest of the app). */
.tracking-groups { display: flex; flex-direction: column; gap: 12px; }
.tracking-group-card { padding: 0; overflow: hidden; }
.tracking-group-card .lock-config-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  transition: background .15s ease;
}
.tracking-group-card .lock-config-head:hover { background: var(--surface-2); }
.tracking-group-card .lock-config-head:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}
.tracking-group-title-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tracking-group-title-wrap h3 { font-size: 15px; font-weight: 700; margin: 0; }
.tracking-group-arrow {
  display: inline-flex;
  color: var(--ink-faint);
  transition: transform .2s ease;
}
.tracking-group-arrow.rotate-180 { transform: rotate(180deg); }
.tracking-group-card .user-group-count { margin-inline-start: auto; }
.tracking-group-body { border-top: 1px solid var(--line); }
.tracking-group-body.hidden { display: none; }
.forms-paramedic { color: var(--ink-soft); }
.forms-reminder-cell { white-space: nowrap; }

/* Auto-hide on completion: a checked row slides + fades out before it is removed
   from the accordion entirely, so it is never left visible or accessible there. */
.forms-table tr.is-removing { pointer-events: none; }
.forms-table tr.is-removing td {
  transition: opacity .26s ease, transform .26s ease;
  opacity: 0;
  transform: translateX(-28px);
}

/* ---- Monthly board: generic-crew ("הצוות הגנרי") edit slots + picker ---- */
.mx-cell-crew-edit {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed var(--line);
}
.mx-crew-label { font-size: 10.5px; font-weight: 700; color: var(--ink-faint); }
.mx-crew-slot { min-height: 0; }
.mx-crew-pick .slot-role-dot.driver { background: var(--teal); }
.mx-crew-pick .slot-role-dot.medic { background: var(--danger); }
.matrix-crew-pop .assign-pop-body { max-height: 260px; overflow-y: auto; }
.matrix-pop-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  text-align: start;
}
.matrix-pop-opt:hover { background: var(--surface-2); }
.matrix-pop-opt.is-typed { background: var(--brand-soft); }
.matrix-pop-opt-name { font-weight: 600; }
.matrix-pop-opt-tag {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-deep);
}
/* The same slot used for a caption rather than an action: the "שם בסידור / כינוי" a
   search matched, muted so it never reads as "שם חדש". */
.matrix-pop-opt-tag.is-alias { font-weight: 600; color: var(--ink-faint); }
/* The staff member an exact nickname names: what Enter commits, so it is the row the eye
   should land on. Same treatment as the import popover's own preferred candidate. */
.matrix-pop-opt.is-preferred {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-weight: 700;
}
.matrix-pop-empty { color: var(--ink-faint); font-size: 13px; padding: 10px; }

/* ==========================================================================
   Global mobile responsive refinements (requested pass)
   Ensures tables, filter/action bars, and tracking controls remain usable on
   iOS/Android at <=768px.
   ========================================================================== */
@media (max-width: 768px) {
  .table-card,
  .table-responsive,
  .tracking-group-body,
  .submitted-forms-wrap,
  .trainee-schedule-table {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .users-table th,
  .users-table td {
    padding: 12px 14px;
    font-size: 13px;
  }

  #tab-tracking .forms-table {
    min-width: 760px;
  }
  #tab-tracking .forms-table th,
  #tab-tracking .forms-table td {
    white-space: nowrap;
  }
  #tab-tracking .forms-table th:nth-child(4),
  #tab-tracking .forms-table th:nth-child(5),
  #tab-tracking .forms-table td:nth-child(4),
  #tab-tracking .forms-table td:nth-child(5) {
    min-width: 130px;
  }
  #tab-tracking .forms-reminder-cell {
    min-width: 210px;
    text-align: start;
  }
  #tab-tracking .btn-whatsapp-reminder {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 12px;
    align-items: center;
  }
  #tab-tracking .form-check {
    min-height: 44px;
    align-items: center;
  }
  #tab-tracking .form-check input {
    width: 20px;
    height: 20px;
  }

  .page-head,
  .forms-toolbar,
  .requests-toolbar,
  .requests-week-nav,
  .matrix-toolbar,
  .matrix-focus-bar,
  .roster-phone-actions,
  .tracking-req-head {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .month-nav {
    width: 100%;
  }
  .forms-toolbar > *,
  .requests-toolbar > *,
  .requests-week-nav > * {
    width: 100%;
    min-width: 0;
  }
  .station-form,
  .roster-form {
    grid-template-columns: 1fr;
  }
  .station-form .btn-primary {
    width: 100%;
  }

  .btn,
  .btn-xs,
  .btn-circle,
  .btn-trash,
  .request-card-toggle,
  .tracking-group-head {
    min-height: 44px;
  }
  .btn-circle,
  .btn-trash {
    min-width: 44px;
    width: 44px;
    height: 44px;
  }
}

/* ---------------------------------------------------------------------------
   Youth-trainee (חניך) open-mentor-shift counter badges. A prominent, RTL notice
   shown at the top of the schedule view telling a trainee how many published
   morning / evening shifts still have a mentor (חונך) and an open seat to book.
   --------------------------------------------------------------------------- */
.mentor-shift-alerts {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--brand-soft);
  border-inline-start: 4px solid var(--brand);
  border-radius: var(--radius);
  background: rgba(var(--brand-rgb), .06);
  box-shadow: var(--shadow-sm);
}
.mentor-alerts-head {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--brand-deep);
  margin-bottom: 10px;
}
.mentor-alert-badge,
.mentor-alert-empty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  margin-inline-end: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
}
.mentor-alert-badge {
  color: #fff;
  background: var(--brand);
  box-shadow: var(--shadow-sm);
}
.mentor-alert-empty {
  color: var(--muted, #6b675f);
  background: var(--brand-soft);
  font-weight: 500;
}

/* ---------- My Statistics ("הסטטיסטיקות שלי") ---------- */
.my-stats-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 12px;
}
.my-stats-toolbar .field { min-width: 180px; }
.my-stats-range-label {
  margin: 0 0 16px;
  font-weight: 500;
}
.my-stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.my-stat-card {
  padding: 22px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--brand);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.my-stat-num {
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--brand-deep);
}
.my-stat-label {
  margin-top: 6px;
  font-weight: 600;
  color: var(--ink-soft);
}
@media (max-width: 600px) {
  .my-stats-toolbar { flex-direction: column; align-items: stretch; }
}

/* ---------- Youth-mentor ("חונך") badge ----------
   A small gold pill appended after a youth-mentor's name wherever they appear on
   the scheduling board (crew slots, read-only crew list, placement drawer). Warm
   gold reads as a distinct designation without clashing with brand-blue actions. */
.chonech-badge {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold);
  border: 1px solid var(--gold);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
}
.crew-escort .chonech-badge,
.crew-driver .chonech-badge { margin-inline-end: 4px; }

/* "חניך" pill — the trainee counterpart of the mentor badge, shown beside a youth
   trainee's name in the "בקשות חניכים" queue. Uses the brand palette to read as a
   distinct, softer tag next to the gold mentor pill. */
.chanich-badge {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  border: 1px solid var(--brand);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: middle;
  white-space: nowrap;
}

/* Mentor-assignment panel inside the trainee placement drawer: the חונך dropdown and
   the seat picker that appear beneath the station/seat cards. */
.mentor-assign {
  margin-top: 14px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.mentor-assign-title {
  font-weight: 700;
  font-size: 13.5px;
  margin-bottom: 8px;
}
.mentor-assign-select {
  width: 100%;
  font: inherit;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
}
.mentor-assign-slot {
  display: block;
  margin-top: 10px;
}
.mentor-assign-slot-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.mentor-assign-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}
/* Driver seat inside the trainee drawer is offered to the mentor only, so it reads
   as informational rather than a selectable trainee target. */
.team-slot.is-driver { opacity: 0.85; }

/* ---------- Volunteer request note ----------
   The optional free-text comment a youth volunteer attaches to a shift request,
   shown under their name in the candidates list and in the placement drawer. */
.request-comment {
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: normal;
  line-height: 1.4;
}
.request-comment::before {
  content: "“";
}
.request-comment::after {
  content: "”";
}
.team-drawer-note {
  margin: 6px 0 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
}
.request-comment-input {
  width: 100%;
  resize: vertical;
  min-height: 64px;
  font: inherit;
}

/* ============================================================
   Volunteer & Profile Management — avatars, youth category filter
   chips, and the registration profile-photo field.
   ============================================================ */

/* Round profile avatar with an initials fallback. */
.u-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid var(--line);
  vertical-align: middle;
}
.u-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.u-avatar.u-avatar-sm { width: 26px; height: 26px; font-size: 10px; }
.u-avatar.u-avatar-lg { width: 120px; height: 120px; font-size: 34px; }
.u-avatar.is-initials { text-transform: uppercase; }

/* Navbar profile avatar: sits to the right of the user's name in the topbar. A
   slightly stronger border keeps the round photo/initials legible against the
   dark topbar background. The whole thing is a button — clicking it lets the user
   replace their own picture — with a hover cue and a pencil overlay. */
.topbar-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  line-height: 0;
  -webkit-appearance: none;
  appearance: none;
}
.topbar-avatar-slot { display: inline-flex; line-height: 0; }
.topbar-avatar .u-avatar-nav { transition: opacity .15s ease, filter .15s ease; }
.topbar-avatar:hover .u-avatar-nav,
.topbar-avatar:focus-visible .u-avatar-nav { opacity: .85; filter: brightness(.9); }
.topbar-avatar:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Pencil badge on the corner, revealed on hover/focus to signal editability. */
.topbar-avatar-edit {
  position: absolute;
  inset-block-end: -2px;
  inset-inline-end: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  border: 1.5px solid var(--surface);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}
.topbar-avatar:hover .topbar-avatar-edit,
.topbar-avatar:focus-visible .topbar-avatar-edit { opacity: 1; transform: scale(1); }
/* While the upload is in flight, dim and block re-entry. */
.topbar-avatar.is-busy { pointer-events: none; }
.topbar-avatar.is-busy .u-avatar-nav { opacity: .5; }
.u-avatar.u-avatar-nav {
  width: 36px;
  height: 36px;
  font-size: 13px;
  border: 2px solid var(--line-strong);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
}

/* Profile-picture edit modal: center the large preview and its (hidden by
   default) inline validation error. */
.photo-edit-preview { display: flex; margin: 4px auto 10px; }
.photo-edit-error { color: var(--danger, #c0392b); margin: 0 0 6px; text-align: center; }

/* Name cell now leads with the avatar. Keep it a real table-cell so its column
   stays locked under the "שם" header — setting display:flex on the <td> would
   drop it out of the table's column model and shift every following column out
   of alignment. Lay the avatar + name out inline instead. */
.u-name-cell { white-space: nowrap; }
.u-name-cell .u-avatar { margin-inline-end: 8px; }
.u-name-cell .u-name-text { font-weight: 600; vertical-align: middle; }
.u-name-cell .you-tag { margin-inline-start: 6px; vertical-align: middle; }

/* Crew avatars on the scheduling board sit snug against the name. */
.crew-driver .u-avatar,
.crew-escort .u-avatar,
.mx-slot-pick .u-avatar,
.mx-slot-view .u-avatar { margin-inline-end: 6px; }

/* Youth quick-filter tag bar. */
.youth-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 4px 14px;
}
.youth-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.youth-chip:hover { border-color: var(--brand); color: var(--brand-deep); }
.youth-chip.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.youth-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(var(--brand-rgb), .12);
  color: inherit;
  font-size: 11px;
  font-weight: 700;
}
.youth-chip.is-active .youth-chip-count { background: rgba(255, 255, 255, .25); }

/* Read-only auto-derived "שיוך נוער" category badge (mapped from the row's checkboxes). */
.youth-category-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(var(--brand-rgb), .10);
  color: var(--brand-deep);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.youth-category-badge.is-empty {
  background: transparent;
  color: var(--ink-faint);
  font-weight: 400;
}

/* Registration: profile-photo required/optional hint + preview. */
.field-required { color: var(--danger); font-weight: 700; }
.field-optional { color: var(--ink-faint); font-weight: 400; }
.field-hint { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-faint); }
.register-photo-preview { margin: 6px 0 4px; }
.register-photo-preview img {
  width: 84px;
  height: 84px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--line);
}

/* Grouped role access workspace: three operational categories, then role-level controls. */
.role-access-groups {
  display: grid;
  gap: 16px;
  margin-top: 22px;
}
.role-access-group {
  --role-group-accent: #28786f;
  overflow: clip;
  border: 1px solid color-mix(in srgb, var(--role-group-accent) 24%, var(--line));
  border-radius: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--role-group-accent) 8%, var(--surface)) 0%, var(--surface) 46%);
  box-shadow: 0 16px 40px rgba(25, 48, 58, .08);
}
.role-access-group-volunteers { --role-group-accent: #b16d28; }
.role-access-group-management { --role-group-accent: #4a648e; }
.role-access-group-certified_paramedics { --role-group-accent: #6366f1; }
.role-access-group > summary,
.role-access-card > summary {
  list-style: none;
  cursor: pointer;
}
.role-access-group > summary::-webkit-details-marker,
.role-access-card > summary::-webkit-details-marker { display: none; }
.role-access-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 86px;
  padding: 20px 24px;
  border-inline-start: 5px solid var(--role-group-accent);
}
.role-access-group > summary:focus-visible,
.role-access-card > summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--role-group-accent) 34%, transparent);
  outline-offset: -3px;
}
.role-access-group-copy,
.role-access-identity {
  display: grid;
  gap: 4px;
}
.role-access-group-copy strong { font-size: 21px; color: var(--ink); }
.role-access-group-copy small,
.role-access-identity small { color: var(--ink-faint); font-size: 13px; }
.role-access-group-count {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  padding-inline: 10px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--role-group-accent) 13%, var(--surface));
  color: var(--role-group-accent);
  font-weight: 800;
}
.role-access-cards {
  display: grid;
  gap: 10px;
  padding: 0 18px 18px;
}
.role-access-card {
  overflow: clip;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 94%, var(--role-group-accent));
}
.role-access-card-missing {
  display: flex;
  align-items: center;
  min-height: 68px;
  padding: 14px 18px;
  border-style: dashed;
  opacity: .68;
}
.role-access-card > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
  padding: 14px 18px;
  transition: background .18s ease, transform .18s ease;
}
.role-access-card > summary:hover { background: color-mix(in srgb, var(--role-group-accent) 6%, var(--surface)); }
.role-access-identity strong { color: var(--ink); font-size: 16px; }
.role-access-caret {
  color: var(--role-group-accent);
  font-size: 26px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform .2s ease;
}
.role-access-card[open] .role-access-caret { transform: rotate(-90deg); }
.role-access-card-body {
  display: grid;
  gap: 22px;
  padding: 4px 18px 20px;
  border-top: 1px solid var(--line);
}
.role-access-card-body > h5,
.role-access-section h5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
}
/* Live "granted / registered routes" tally next to each category heading, computed
   from the navigation registry so it always reflects the real route count. */
.role-access-section-count {
  flex: 0 0 auto;
  padding: 2px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--role-group-accent) 14%, var(--surface));
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.role-access-section-hint {
  margin: 0;
  color: var(--ink-faint);
  font-size: 11.5px;
  line-height: 1.5;
}
.role-access-registry-note {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
}
/* Administrator-only routes are listed for a complete inventory but carry no role
   flag, so their switch is inert rather than absent. */
.role-access-switch.is-locked { cursor: not-allowed; opacity: .62; }
.role-access-switch.is-locked:hover { border-color: var(--line); box-shadow: none; transform: none; }
.uc-override-group-head {
  margin: 16px 0 0;
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .02em;
}
.role-board-access-grid,
.role-access-switch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.role-access-switch {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.role-access-switch:hover {
  border-color: color-mix(in srgb, var(--role-group-accent) 45%, var(--line));
  box-shadow: 0 8px 18px rgba(25, 48, 58, .06);
  transform: translateY(-1px);
}
.role-access-switch-copy { display: grid; gap: 3px; }
.role-access-switch-copy strong { color: var(--ink); font-size: 14px; }
.role-access-switch-copy small { color: var(--ink-faint); font-size: 11px; line-height: 1.45; }
.role-access-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.role-access-switch-track {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--line-strong);
  transition: background .18s ease;
}
.role-access-switch-track::after {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 7px rgba(22, 35, 45, .22);
  transition: transform .18s ease;
}
.role-access-switch input:checked + .role-access-switch-track { background: var(--role-group-accent); }
.role-access-switch input:checked + .role-access-switch-track::after { transform: translateX(-18px); }
.role-access-switch input:focus-visible + .role-access-switch-track { outline: 3px solid color-mix(in srgb, var(--role-group-accent) 28%, transparent); outline-offset: 3px; }
.role-access-section { display: grid; gap: 10px; }
.role-access-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.role-access-footer label { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 13px; font-weight: 700; }
.monthly-board-page .page-head {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(49, 123, 112, .08), transparent 54%);
}
#tab-monthly-atan .page-head { background: linear-gradient(135deg, rgba(66, 91, 132, .10), transparent 54%); }
.monthly-board-kicker {
  display: inline-flex;
  margin-bottom: 7px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(49, 123, 112, .12);
  color: #246b63;
  font-size: 12px;
  font-weight: 800;
}
.monthly-board-kicker.is-atan { background: rgba(66, 91, 132, .12); color: #425b84; }
.monthly-board-kicker.is-unified { background: linear-gradient(90deg, rgba(49, 123, 112, .14), rgba(66, 91, 132, .14)); color: #2f5d6e; }

/* ---- "עריכת צוות גנרי חודשי" ----
   An accordion row in the imports tab, so it reuses the .daily-import shell whole and
   adds nothing to the head or panel chrome. Only the month stepper row, the band
   switch and the grid's own single-header geometry are described here. */

/* The month stepper is the panel's only action, so it sits alone on its row rather
   than stretching across it like the multi-field import forms above. */
.generic-crew-monthbar { justify-content: flex-start; }

/* The grid sits deeper down the page than a monthly board does — accordion head, hint
   paragraph and stepper row all precede it — so the shared viewport cap is loosened
   and given a floor, or a tall month would end up with a few visible rows on a laptop. */
.generic-crew-grid .matrix-scroll {
  max-height: calc(100vh - 200px);
  min-height: 300px;
}

/* ---- The band switch above the grid ----
   The switch itself is the shared .seg-toggle radiogroup (active option = brand blue,
   inactive = muted), so nothing about its look is redefined here — only the row that
   holds it. It is the first band inside the grid card, above the toolbar, and needs no
   sticky treatment: .matrix-scroll caps the table's height and scrolls it internally,
   so the switch never leaves the viewport while a month is being filled. */
.generic-crew-bands {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--surface);
}
.generic-crew-bands-label {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink-soft);
}
/* Three or four short Hebrew words: the switch has no reason to stretch the full
   width the way the vertical filter toggles do. */
.seg-toggle-bands { flex: 0 1 auto; max-width: 420px; }
.seg-toggle-bands .seg-option { padding: 7px 18px; }

/* The grid: one band's stations, so the columns are few and can breathe. */
.generic-crew-table .mx-cell { vertical-align: middle; }
/* One header row here, not the boards' two (group row + station row): the band is
   already fixed by the switch above, so there is nothing to group under. The station
   header therefore pins at the very top instead of below a 34px group row, and it
   carries the band's colour bar itself so the interval stays identifiable while
   scrolling a long month. */
.generic-crew-table .mx-station {
  top: 0;
  border-bottom: 1px solid var(--line-strong);
}
.generic-crew-table .mx-station.night   { box-shadow: inset 0 3px 0 #3b3a6b; }
.generic-crew-table .mx-station.morning { box-shadow: inset 0 3px 0 var(--gold); }
.generic-crew-table .mx-station.evening { box-shadow: inset 0 3px 0 var(--teal); }
.generic-crew-table .mx-station.other   { box-shadow: inset 0 3px 0 var(--ink-faint); }
/* No escort list above them here, so the crew block needs no separating rule. */
.gc-cell .mx-cell-crew-edit {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.gc-cell.is-off,
.gc-cell.is-hidden-shift { text-align: center; }

@media (max-width: 760px) {
  .generic-crew-bands { flex-direction: column; align-items: stretch; gap: 6px; }
  .seg-toggle-bands { max-width: none; }
}

@media (max-width: 760px) {
  .role-access-group > summary { min-height: 76px; padding: 17px 16px; }
  .role-access-cards { padding: 0 10px 10px; }
  .role-access-card-body { padding-inline: 12px; }
  .role-board-access-grid,
  .role-access-switch-grid { grid-template-columns: 1fr; }
  .role-access-footer { align-items: stretch; flex-direction: column; }
  .monthly-board-page .page-head { padding: 14px; }
}

/* ============================================================
   Role Management (ניהול תפקידים) + Specific-user config
   (ניהול משתמש ספציפי). The role directory reuses the three
   category accents from the access panel; the config screen lays
   the reused per-user controls out as labeled field cards.
   ============================================================ */
.roles-manager-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.roles-manager-head > div { flex: 1 1 320px; }
.roles-manager { display: grid; gap: 16px; margin-top: 22px; }
.role-mgr-group {
  --role-group-accent: #28786f;
  overflow: clip;
  border: 1px solid color-mix(in srgb, var(--role-group-accent) 24%, var(--line));
  border-radius: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--role-group-accent) 8%, var(--surface)) 0%, var(--surface) 46%);
  box-shadow: 0 16px 40px rgba(25, 48, 58, .08);
}
.role-mgr-group.role-access-group-volunteers { --role-group-accent: #b16d28; }
.role-mgr-group.role-access-group-management { --role-group-accent: #4a648e; }
.role-mgr-group.role-access-group-certified_paramedics { --role-group-accent: #8b5cf6; }
.role-mgr-group > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 78px;
  padding: 18px 22px;
  border-inline-start: 5px solid var(--role-group-accent);
}
.role-mgr-group > summary::-webkit-details-marker { display: none; }
.role-mgr-group > summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--role-group-accent) 34%, transparent);
  outline-offset: -3px;
}
.role-mgr-list {
  display: grid; gap: 10px; padding: 0 18px 18px;
  width: 100%;
  /* Safety net so wide rows (long role names + the group <select> + שינוי שם /
     מחיקה actions) are never clipped on narrow screens: the list scrolls sideways
     smoothly with a hidden scrollbar instead of cutting content off the edge. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.role-mgr-list::-webkit-scrollbar { display: none; }
.role-mgr-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 94%, var(--role-group-accent));
}
.role-mgr-ident { display: flex; align-items: center; gap: 10px; min-width: 0; }
.role-mgr-ident strong { font-size: 16px; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.role-mgr-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--ink-soft);
  background: var(--surface-2);
}
.role-mgr-tag.is-system { color: var(--brand-deep); border-color: var(--brand-soft); background: var(--brand-soft); }
.role-mgr-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.role-mgr-group-select {
  min-height: 34px;
  max-width: 100%;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.role-mgr-controls .btn-xs[disabled] { opacity: .45; cursor: not-allowed; }
/* Role-level shift-visibility baseline: a full-width sub-row beneath the role's
   identity/controls, holding its caption and the three-way segmented control. */
.role-mgr-vis {
  flex: 1 1 100%;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.role-mgr-vis-label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.role-mgr-badge {
  flex: 1 1 100%;
  display: grid;
  gap: 8px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.role-mgr-badge-label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.role-mgr-badge-controls { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.role-mgr-badge-text {
  min-height: 34px;
  min-width: 180px;
  padding: 4px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.role-mgr-badge-color-field { display: inline-flex; align-items: center; gap: 6px; }
.role-mgr-badge-color-label { font-size: 12px; color: var(--ink-soft); }
.role-mgr-badge-swatches { display: inline-flex; gap: 4px; }
.role-mgr-badge-swatch {
  width: 18px;
  height: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  cursor: pointer;
}
.role-mgr-badge-color {
  width: 34px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
}
.role-mgr-badge-preview { display: inline-flex; align-items: center; gap: 8px; }
.role-mgr-badge-preview-label { font-size: 12px; color: var(--ink-soft); }
.seg-toggle-vis { flex-wrap: wrap; }
/* Per-user shift-visibility override hint (inherited default vs active override). */
.uc-vis-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-soft); line-height: 1.4; }
.seg-option-inherit .seg-label { font-style: italic; }

/* Specific-user configuration screen */
.user-config-card { display: grid; gap: 18px; }
.user-config-picker-field { max-width: 520px; }
.user-config-picker-field select {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.user-config-body { display: grid; gap: 16px; }
.uc-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface-2);
}
.u-avatar.uc-avatar { width: 54px; height: 54px; font-size: 18px; }
.uc-header-id { display: grid; gap: 3px; min-width: 0; }
.uc-header-id strong { font-size: 18px; color: var(--ink); }
.uc-header-email { font-size: 13px; color: var(--ink-faint); }
.uc-pending-note {
  margin: 0;
  padding: 12px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 13px;
}
.uc-section {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  padding: 16px 18px;
}
.uc-section-title {
  margin: 0 0 14px;
  font-size: 15px;
  color: var(--ink);
  padding-inline-start: 10px;
  border-inline-start: 4px solid var(--brand);
}
.uc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 20px;
}
.uc-field { display: grid; gap: 6px; align-content: start; }
.uc-field-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.uc-field-control { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* Hierarchical menu-access overrides inside "ניהול משתמש ספציפי". The switches reuse
   the role-access-switch look; --role-group-accent (undefined outside a role group)
   is pinned to the brand so a checked toggle keeps its colour here too. */
.uc-menu-overrides { --role-group-accent: var(--brand); }
.uc-menu-overrides-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.uc-menu-overrides-head .uc-section-title { margin: 0; }
.uc-reset-all {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.uc-reset-all:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.uc-menu-overrides-intro { margin: 0 0 4px; font-size: 12.5px; line-height: 1.5; color: var(--ink-faint); }
.uc-menu-overrides-note {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
  background: var(--brand-soft);
  border-radius: 10px;
  padding: 8px 12px;
}
.uc-override-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 14px;
}
/* A switch carrying an explicit user-specific override is visually flagged so an
   admin can tell at a glance which flags diverge from the inherited role defaults. */
.uc-override-switch.is-overridden {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
  box-shadow: inset 3px 0 0 var(--brand);
}
.uc-override-reset {
  justify-self: start;
  margin-top: 2px;
  border: none;
  background: none;
  padding: 0;
  color: var(--brand);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}
.uc-override-reset:hover { color: var(--brand-deep); }

/* ---------------- Segmented single-select toggle ("אילוצי משמרות") ----------------
   A strict radio group styled as a modern segmented control. Real <input type=radio>
   nodes drive the state (single-select enforced by the browser); the container is a
   glassy inset pill and the checked option lifts onto the brand accent. Themed purely
   through the CSS variables so it blends into both the light "paper" and dark modes. */
.seg-toggle {
  display: flex;
  width: 100%;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  box-shadow: inset 0 1px 2px rgba(var(--brand-rgb), .05);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.seg-option {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 10px;
  border-radius: calc(var(--radius-sm) - 3px);
  cursor: pointer;
  color: var(--ink-soft);
  transition: background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
  user-select: none;
}
.seg-option:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); color: var(--ink); }
.seg-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}
.seg-label { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.seg-option.is-active {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--brand-rgb), .35);
}
.seg-option.is-active:hover { background: var(--brand-deep); color: #fff; }
/* Keyboard focus ring driven by the underlying radio's focus state. */
.seg-input:focus-visible + .seg-label { outline: none; }
.seg-option:has(.seg-input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 40%, transparent); }
.seg-option:has(.seg-input:disabled) { opacity: .5; cursor: not-allowed; }

@media (max-width: 720px) {
  .seg-toggle { flex-direction: column; }
}


@media (max-width: 720px) {
  .roles-manager-head { flex-direction: column; }
  .role-mgr-row { flex-direction: column; align-items: stretch; }
  .role-mgr-controls { justify-content: flex-start; }
  .uc-grid { grid-template-columns: 1fr; }
}

/* ---------- Topbar help button + guided tour ("הדרכה לשימוש באתר") ----------
   The help control is a round icon button in the same 38px family as .notif-bell and
   .theme-toggle, which sit immediately beside it: same surface, same strong border, same
   brand-fill hover. Together the three read as one row of circles instead of a wide
   labelled button crowding the topbar. The wording is carried by title/aria-label only.

   The tour itself is a spotlight layer over the real app: one ring lights the element being
   explained and a small callout is pinned beside it. Nothing here is authored per screen —
   the script scans the live DOM of whatever page it navigated to and anchors this layer onto
   what it found, so these rules only describe the chrome: the ring, the click blocker, the
   callout card, its arrow and its footer.

   Ring, card and arrow are positioned with physical top/left rather than the logical
   properties used everywhere else in this RTL file. That is deliberate:
   getBoundingClientRect reports physical viewport coordinates even under dir="rtl", so
   inset-inline-* would mirror the spotlight off its target. */
.help-btn {
  width: 38px; height: 38px; padding: 0; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  color: var(--brand);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
}
.help-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.help-btn:active { transform: translateY(1px); }
.help-btn svg { display: block; }

/* Above every popover in the app (the highest in use is 1200) so no floating panel can
   cover the thing being pointed at. */
.tour-block {
  position: fixed; inset: 0;
  z-index: 1400;
  cursor: default;
}
/* The whole dim + spotlight effect is ONE element. The brand ring and its halo are listed
   before the 9999px black spread on purpose: earlier shadows paint on top, so reversing
   them would bury the ring under the dimmer. Click-through, because .tour-block absorbs
   clicks. The halo is white-translucent rather than a brand tint so it reads against the
   dimmed page in both themes, where --brand itself changes value. */
.tour-ring {
  position: fixed;
  z-index: 1401;
  border-radius: 10px;
  pointer-events: none;
  box-shadow: 0 0 0 3px var(--brand), 0 0 0 7px rgba(255, 255, 255, .3),
              0 0 0 9999px rgba(0, 0, 0, .7);
  transition: top .22s ease, left .22s ease, width .22s ease, height .22s ease;
}
/* Fallback when a screen rendered nothing to point at: dim everything, centre the card. */
.tour-ring.is-empty { box-shadow: 0 0 0 9999px rgba(0, 0, 0, .7); }

.tour-card {
  position: fixed;
  z-index: 1402;
  inline-size: min(340px, calc(100vw - 24px));
  box-sizing: border-box;
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px 15px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
  transition: top .22s ease, left .22s ease;
}
/* The two borders are PHYSICAL (left/top, right/bottom) for the same reason the offsets
   are: the arrow is placed from getBoundingClientRect coordinates, and a logical border
   would flip to the wrong two edges under dir="rtl". Default points up, at a card sitting
   below the lit element; .is-down points down, at a card above it. */
.tour-arrow {
  position: fixed;
  z-index: 1402;
  width: 12px; height: 12px;
  background: var(--surface);
  border-left: 1px solid var(--line-strong);
  border-top: 1px solid var(--line-strong);
  transform: rotate(45deg);
  transition: top .22s ease, left .22s ease;
}
.tour-arrow.is-down {
  border-left: none;
  border-top: none;
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.tour-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Two counters, because the tour discovers each screen's contents only once it is there:
   the screen number is known from the start, the point number as soon as it arrives. */
.tour-count {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 11px; font-weight: 700; line-height: 1.7;
  white-space: nowrap;
}
/* What the scanner decided the element is (search field / filter / table / primary action). */
.tour-kind {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: 11px; font-weight: 800; line-height: 1.7;
  white-space: nowrap;
}
.tour-title {
  margin: 0;
  font-family: var(--display);
  font-size: 15.5px; line-height: 1.35;
}
.tour-lines {
  margin: 0;
  padding-inline-start: 17px;
  font-size: 12.5px; line-height: 1.6;
  color: var(--ink-soft);
}
.tour-lines li + li { margin-block-start: 5px; }
.tour-lines li::marker { color: var(--brand); }

.tour-foot {
  display: flex; align-items: center; gap: 6px;
  padding-block-start: 8px;
  border-block-start: 1px solid var(--line);
}
.tour-foot .btn { padding: 6px 12px; font-size: 12.5px; }
.tour-foot .tour-skip { margin-inline-end: auto; }

@media (prefers-reduced-motion: reduce) {
  .tour-ring, .tour-card, .tour-arrow { transition: none; }
}

@media (max-width: 560px) {
  /* Too little room to sit beside anything: the card spans the width and the script pins
     it to the bottom, so the lit element stays visible above it. */
  .tour-card { inline-size: calc(100vw - 16px); }
  .tour-arrow { display: none; }
  .tour-foot { flex-wrap: wrap; }
  .tour-foot .tour-skip { margin-inline-end: 0; }
  .tour-foot .btn { flex: 1 1 auto; }
}


/* ============================================================
   Switchable (רגיל ➔ אט"ן) shift standards — one standard,
   two appearances.

   EVERY natively-regular standard runs as a white BLS car by
   default and is upgraded to an ALS / MICU (אט"ן) car on the dates
   a פראמדיק rides it, drawn on the אט"ן board under its own name
   plus "(במקום רגיל)". Nothing about the template changes; only
   the DATE's classification does, so the card and the monthly-grid
   cell carry the palette of the board they are currently drawn on:

     paramedic seated  → the אט"ן indigo treatment
     no paramedic      → the plain white (לבן) treatment

   Natively-אט"ן standards are never styled by this section: the
   conversion is one-way, so an אט"ן card has no second appearance
   to switch to and keeps the ordinary ALS look.

   The classes are applied per date (renderDayDetail / fillMatrixCell,
   plus refreshDynamicStdSkins for the live flip while typing), so no
   other card's appearance is affected. Placed at the end of the sheet
   so the per-cell board tint wins over the equally-specific per-band
   tint it has to override.
   ============================================================ */

/* ---------- Day board: the shift card ---------- */
.shift-card.is-dynamic-std {
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.shift-card.is-dynamic-std.is-atan-std {
  border-color: rgba(59, 58, 107, .55);
  box-shadow: 0 6px 22px rgba(59, 58, 107, .16);
  background:
    linear-gradient(180deg, rgba(59, 58, 107, .08), transparent 120px),
    var(--surface);
}
.shift-card.is-dynamic-std.is-atan-std .shift-card-head {
  background: linear-gradient(90deg, rgba(59, 58, 107, .16), rgba(59, 58, 107, .04));
  border-bottom-color: rgba(59, 58, 107, .35);
}
/* The white side is deliberately plain: it is the ordinary לבן look every other
   Regular-board card already has, so a driver-only date reads as unremarkable. */
.shift-card.is-dynamic-std.is-regular-std {
  border-color: var(--line-strong);
  box-shadow: 0 4px 16px rgba(20, 20, 20, .06);
  background: var(--surface);
}
.shift-card.is-dynamic-std.is-regular-std .shift-card-head {
  background: var(--surface);
  border-bottom-color: var(--line-strong);
}
.shift-card.is-personal-cross-board {
  border-color: rgba(var(--brand-rgb), .78);
  box-shadow: 0 8px 24px rgba(var(--brand-rgb), .16);
}
.shift-card.is-personal-cross-board .shift-card-head {
  background: linear-gradient(90deg, rgba(var(--brand-rgb), .16), rgba(var(--brand-rgb), .05));
  border-bottom-color: rgba(var(--brand-rgb), .40);
}
.personal-opposite-highlight,
.shift-card.personal-opposite-highlight {
  background: linear-gradient(180deg, rgba(245, 158, 11, .18), rgba(245, 158, 11, .06) 110px), var(--surface);
  box-shadow: 0 10px 28px rgba(180, 83, 9, .14);
  position: relative;
}
.personal-opposite-highlight::before,
.shift-card.personal-opposite-highlight::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(180deg, #f59e0b, #d97706);
}
.personal-security-highlight,
.shift-card.personal-security-highlight {
  background: linear-gradient(180deg, rgba(99, 102, 241, .20), rgba(99, 102, 241, .06) 110px), var(--surface);
  box-shadow: 0 10px 28px rgba(67, 56, 202, .14);
  position: relative;
}
.personal-security-highlight::before,
.shift-card.personal-security-highlight::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(180deg, #6366f1, #4f46e5);
}
html[data-theme="dark"] .shift-card.is-dynamic-std.is-atan-std {
  border-color: rgba(129, 127, 205, .5);
  box-shadow: 0 6px 22px rgba(129, 127, 205, .12);
  background:
    linear-gradient(180deg, rgba(129, 127, 205, .14), transparent 120px),
    var(--surface);
}
html[data-theme="dark"] .shift-card.is-dynamic-std.is-atan-std .shift-card-head {
  background: linear-gradient(90deg, rgba(129, 127, 205, .2), rgba(129, 127, 205, .05));
  border-bottom-color: rgba(129, 127, 205, .35);
}
html[data-theme="dark"] .shift-card.is-dynamic-std.is-regular-std {
  box-shadow: none;
}
html[data-theme="dark"] .shift-card.is-personal-cross-board {
  border-color: rgba(170, 170, 255, .55);
  box-shadow: 0 8px 24px rgba(170, 170, 255, .10);
}
html[data-theme="dark"] .shift-card.is-personal-cross-board .shift-card-head {
  background: linear-gradient(90deg, rgba(170, 170, 255, .18), rgba(170, 170, 255, .06));
  border-bottom-color: rgba(170, 170, 255, .32);
}
html[data-theme="dark"] .day-shift-cross-board-marker {
  background: rgba(245, 158, 11, .16);
  box-shadow: inset 3px 0 0 rgba(251, 191, 36, .92);
}
html[data-theme="dark"] .day-security-coverage-marker {
  background: rgba(99, 102, 241, .22);
  box-shadow: inset 3px 0 0 rgba(129, 140, 248, .90);
}
html[data-theme="dark"] .personal-opposite-highlight,
html[data-theme="dark"] .shift-card.personal-opposite-highlight {
  background: linear-gradient(180deg, rgba(245, 158, 11, .14), rgba(245, 158, 11, .05) 120px), var(--surface);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .26);
}
html[data-theme="dark"] .personal-opposite-highlight::before,
html[data-theme="dark"] .shift-card.personal-opposite-highlight::before {
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
}
html[data-theme="dark"] .personal-security-highlight,
html[data-theme="dark"] .shift-card.personal-security-highlight {
  background: linear-gradient(180deg, rgba(99, 102, 241, .22), rgba(99, 102, 241, .06) 120px), var(--surface);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .26);
}
html[data-theme="dark"] .personal-security-highlight::before,
html[data-theme="dark"] .shift-card.personal-security-highlight::before {
  background: linear-gradient(180deg, #818cf8, #6366f1);
}

.security-coverage-card-note {
  padding: 10px 16px 12px;
  color: var(--ink-soft);
  font-size: 13px;
}
.shift-card.is-personal-security-coverage .shift-name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The chip in the card head naming the board this date sits on, so the automatic
   conversion is legible rather than something the scheduler has to infer. */
.shift-class-chip {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .01em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.shift-class-chip.is-atan {
  background: rgba(59, 58, 107, .12); color: #3b3a6b;
  border-color: rgba(59, 58, 107, .3);
}
.shift-class-chip.is-regular {
  background: var(--surface); color: #444;
  border-color: var(--line-strong);
}
html[data-theme="dark"] .shift-class-chip.is-atan {
  background: rgba(129, 127, 205, .18); color: #b3b1e8;
  border-color: rgba(129, 127, 205, .4);
}
html[data-theme="dark"] .shift-class-chip.is-regular { color: var(--ink-soft); }

/* ---------- Monthly grid: the unified column's cells ---------- */
/* Equal specificity to the per-band tint (.matrix-table tbody td.mx-cell.morning),
   so this section's position at the end of the sheet is what makes it win. */
.matrix-table tbody td.mx-cell.is-dyn-atan:not(.is-disabled) {
  background-color: rgba(59, 58, 107, .16);
  box-shadow: inset 0 0 0 1px rgba(59, 58, 107, .28);
}
.matrix-table tbody td.mx-cell.is-dyn-regular:not(.is-disabled) {
  background-color: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
html[data-theme="dark"] .matrix-table tbody td.mx-cell.is-dyn-atan:not(.is-disabled) {
  background-color: rgba(129, 127, 205, .18);
  box-shadow: inset 0 0 0 1px rgba(129, 127, 205, .32);
}
.mx-cell-class {
  display: inline-flex; align-items: center;
  margin-bottom: 5px; padding: 1px 7px;
  border-radius: 999px;
  font-size: 9.5px; font-weight: 800; line-height: 1.6;
  white-space: nowrap;
  border: 1px solid transparent;
}
.mx-cell-class.is-atan {
  background: rgba(59, 58, 107, .16); color: #3b3a6b;
  border-color: rgba(59, 58, 107, .32);
}
.mx-cell-class.is-regular {
  background: var(--surface); color: var(--ink-soft);
  border-color: var(--line-strong);
}
html[data-theme="dark"] .mx-cell-class.is-atan {
  background: rgba(129, 127, 205, .2); color: #b3b1e8;
  border-color: rgba(129, 127, 205, .4);
}

/* ---------- Day board: the "אט״ן" checkbox and the seat it opens ----------
   The checkbox is DISCLOSURE, not classification — ticking it only opens the
   פראמדיק/ית field — so it is styled as a quiet, dashed opt-in that firms up into the
   אט״ן indigo once it is on. It rides in the card's top action bar beside the
   "סוג המשימה" dropdown, sized and weighted to sit level with that control, because what
   it governs is the shape of the whole crew form rather than one seat. The seat it opens
   is a full .slot cell of the card's ordinary slot grid, so it inherits every label/field
   style already defined above and only needs its closed state and its accent. */
.atan-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-family: var(--body); font-size: 13px; font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.atan-toggle:hover { border-color: rgba(59, 58, 107, .45); color: var(--ink); }
/* The ticked state, keyed to the same indigo the אט״ן board and its chips use. */
.atan-toggle:has(input:checked) {
  border-style: solid; border-color: rgba(59, 58, 107, .45);
  background: rgba(59, 58, 107, .1);
  color: #3b3a6b;
}
.atan-toggle:has(input:disabled) { cursor: not-allowed; opacity: .7; }
/* A checkbox, not a field — kept off the full-width input sizing used elsewhere. */
.atan-toggle input {
  width: 16px; height: 16px; flex: 0 0 auto;
  margin: 0; padding: 0;
  accent-color: #3b3a6b;
  cursor: inherit;
}
.atan-toggle-text { letter-spacing: .01em; }
html[data-theme="dark"] .atan-toggle:hover { border-color: rgba(129, 127, 205, .45); }
html[data-theme="dark"] .atan-toggle:has(input:checked) {
  border-color: rgba(129, 127, 205, .45);
  background: rgba(129, 127, 205, .14);
  color: #b3b1e8;
}
html[data-theme="dark"] .atan-toggle input { accent-color: #817fcd; }
/* Unticked: the seat is off the card entirely — its opt-in lives in the action bar now, so
   the cell has nothing left to show and the grid falls back to the plain white layout
   (נהג + מלווה א׳, then מלווה ב׳ + מלווה ג׳). Ticking removes the class in the same gesture.
   מלווה ג׳ is only ever HIDDEN by the upgrade, never cleared, so it comes back exactly as it
   was. */
.slot-atan-upgrade.is-collapsed { display: none; }
.slot-atan-upgrade .slot-seat-label { color: #3b3a6b; }
html[data-theme="dark"] .slot-atan-upgrade .slot-seat-label { color: #b3b1e8; }

/* ---------- Day board: the native אט״ן layout of an upgraded white card ----------
   Ticked, the white card IS an ALS car and is laid out as one: נהג/ת + פראמדיק/ית on the
   first row, מלווה א׳ + מלווה ב׳ on the second, מלווה ג׳ off the card. The transform is
   `order` on the cells the card already built — never a re-render — so a name being typed
   keeps its value, its cursor and its open suggestion list, and the hidden מלווה ג׳ keeps
   its stored value for the trip back to the white layout. The catch-all order keeps
   anything else the grid may hold behind the four crew seats. */
.slot-grid.is-atan-upgraded > * { order: 4; }
.slot-grid.is-atan-upgraded > .slot[data-seat="driver"] { order: 0; }
.slot-grid.is-atan-upgraded > .slot-atan-upgrade { order: 1; }
.slot-grid.is-atan-upgraded > .slot[data-seat="intern1"] { order: 2; }
.slot-grid.is-atan-upgraded > .slot[data-seat="intern2"] { order: 3; }
.slot-grid.is-atan-upgraded > .slot[data-seat="medic"] { display: none; }

/* ---------- Monthly אט״ן grid: the consolidated "במקום משמרות רגיל" column ----------
   One column collecting every white standard whose date carries a paramedic. It is not a
   station, so its header shows no hours and its cells stack one block per switched shift
   instead of holding a single crew. */
.mx-shift-group.als-instead { box-shadow: inset 0 3px 0 #3b3a6b; }
.shift-band.als-instead { background: #3b3a6b; }
html[data-theme="dark"] .mx-shift-group.als-instead { box-shadow: inset 0 3px 0 #817fcd; }
html[data-theme="dark"] .shift-band.als-instead { background: #817fcd; }
.mx-station-als-instead {
  white-space: normal; line-height: 1.25;
  font-weight: 700; color: #3b3a6b;
}
html[data-theme="dark"] .mx-station-als-instead { color: #b3b1e8; }
.matrix-table tbody td.mx-cell.als-instead:not(.is-disabled) {
  min-width: 176px;
  background-color: rgba(59, 58, 107, .1);
  box-shadow: inset 1px 0 0 rgba(59, 58, 107, .28);
}
html[data-theme="dark"] .matrix-table tbody td.mx-cell.als-instead:not(.is-disabled) {
  background-color: rgba(129, 127, 205, .12);
  box-shadow: inset 1px 0 0 rgba(129, 127, 205, .3);
}
/* Most dates hold nothing here — that emptiness should look intentional, not broken. */
.matrix-table tbody td.mx-cell.als-instead.is-empty-day { text-align: center; color: var(--ink-faint); }

/* One switched shift. Bordered so several on one date stay separable. */
.mx-als-entry {
  padding: 6px;
  border: 1px solid rgba(59, 58, 107, .22);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.mx-als-entry + .mx-als-entry { margin-top: 7px; }
html[data-theme="dark"] .mx-als-entry { border-color: rgba(129, 127, 205, .26); }
.mx-als-entry-head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 5px;
}
.mx-als-entry-head .shift-band { height: 14px; flex: 0 0 auto; }
.mx-als-entry-name {
  font-size: 10.5px; font-weight: 800; line-height: 1.25;
  color: #3b3a6b;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[data-theme="dark"] .mx-als-entry-name { color: #b3b1e8; }

/* ---------- Monthly רגיל grid: the switched-away cell ----------
   The other half of the mutual exclusion. The date keeps its cell so the sheet stays
   rectangular and the scheduler can see WHERE the shift went, but it carries no crew and
   no controls — it is the same striped, non-interactive treatment as an inactive date. */
.matrix-table tbody td.mx-cell.is-moved-atan { text-align: center; }
.mx-cell-moved {
  display: inline-block;
  font-size: 10px; font-weight: 800; line-height: 1.3;
  color: #3b3a6b;
  cursor: help;
}
html[data-theme="dark"] .mx-cell-moved { color: #b3b1e8; }


/* ==========================================================================
   Escort Shortage Widget ("חסרים במלווים")
   ========================================================================== */
.escort-shortage-widget {
  margin-top: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 18px 20px;
}
.escort-shortage-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px;
}
.escort-shortage-none {
  color: var(--ink-faint);
  font-size: 13.5px;
  margin: 0;
}
.escort-shortage-table {
  width: 100%;
}
.escort-shortage-missing {
  color: var(--danger, #c0392b);
  font-weight: 700;
}
@media (max-width: 768px) {
  .escort-shortage-widget { padding: 12px 10px; }
}

/* ---- PWA setup modal ---- */
.pwa-modal { max-width: 420px; width: 100%; padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.pwa-section { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--border); padding-top: 14px; }
.pwa-section:first-of-type { border-top: none; padding-top: 0; }
.pwa-section-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.pwa-install-btn { width: 100%; }
.pwa-push-btn { width: 100%; }
.pwa-note { margin: 0; font-size: 13px; color: var(--ink-soft); }
.pwa-note-ok { color: var(--success, #16a34a); }
.pwa-note-warn { color: var(--warn, #b45309); }
.pwa-ios-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.pwa-ios-step { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.pwa-ios-step-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
/* Push notification preference panel */
.pwa-prefs-container { display: flex; flex-direction: column; gap: 8px; }
.pwa-prefs-title { margin: 6px 0 2px; font-size: 13px; font-weight: 600; color: var(--ink); }
.pwa-notif-group { display: flex; flex-direction: column; gap: 6px; }
.pwa-notif-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); }
.pwa-notif-row.pwa-notif-mandatory { opacity: 0.75; }
.pwa-notif-label { flex: 1; }
.pwa-shift-reminder-hours { display: inline-flex; align-items: center; gap: 6px; }
.pwa-shift-reminder-hours-label { font-size: 12px; white-space: nowrap; }
.pwa-shift-reminder-hours-select { min-width: 68px; padding: 4px 6px; font-size: 12px; }
.pwa-notif-mandatory-badge { font-size: 11px; font-weight: 600; color: var(--warn, #b45309); white-space: nowrap; background: color-mix(in srgb, var(--warn, #b45309) 10%, transparent); padding: 1px 5px; border-radius: 4px; }
.pwa-notif-toggle { flex-shrink: 0; accent-color: var(--primary, #1d4ed8); cursor: pointer; }
.pwa-notif-toggle:disabled { cursor: not-allowed; }
.swap-modal-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* ---------- Personal Area (#tab-my-stats refactor) ---------- */
.personal-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.personal-section-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.personal-gate-note {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.personal-ios-steps {
  margin: 0;
  padding-inline-start: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--ink-soft);
}
.personal-ios-steps li { line-height: 1.6; }
.personal-install-btn,
.personal-enable-push-btn { width: 100%; }
.personal-test-push-btn { align-self: flex-start; }
.personal-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.personal-status-ok { color: var(--success, #16a34a); }
.personal-push-feedback {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--success, #16a34a);
}
.personal-help-accordion {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.personal-help-accordion summary {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  color: var(--ink-soft);
  list-style: none;
}
.personal-help-accordion summary::-webkit-details-marker { display: none; }
.personal-help-accordion[open] summary { border-bottom: 1px solid var(--line); }
.personal-help-body {
  margin: 0;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
}
.personal-guide-btn { align-self: flex-start; }
/* Bug / Technical Issue Report Card */
.bug-report-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.bug-report-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 200px;
}
.bug-report-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.bug-report-desc {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.bug-report-tip {
  margin: 0;
  font-size: 12px;
  color: var(--ink-soft);
}
.bug-report-action { flex-shrink: 0; }
.bug-report-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25d366;
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s;
}
.bug-report-wa-btn:hover { background: #1ebe5d; }
@media (max-width: 480px) {
  .bug-report-inner { flex-direction: column; align-items: stretch; }
  .bug-report-wa-btn { justify-content: center; width: 100%; }
}

/* ---- Bug-report header popover ---- */
.bugreport-wrap { position: relative; flex: none; }
.bugreport-wrap.is-open > .help-btn { background: var(--brand); color: #fff; border-color: var(--brand); }
.bugreport-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bugreport-panel {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  width: min(300px, calc(100vw - 32px));
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 980;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: notif-pop .14s ease;
}
.bugreport-panel[hidden] { display: none; }
.bugreport-panel.is-modal {
  position: fixed;
  inset: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, .75);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 16px;
  box-sizing: border-box;
  overflow-y: auto;
  transform: none;
}
.bugreport-panel.is-modal .bugreport-card {
  width: 100%;
  height: auto;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 16px;
}
.bugreport-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bugreport-panel-close {
  flex: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-soft);
  padding: 2px 4px;
  border-radius: 4px;
  line-height: 1;
  font-size: 16px;
  transition: background .12s, color .12s;
}
.bugreport-panel-close:hover { background: var(--line); color: var(--ink); }
.bugreport-panel-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.bugreport-panel-desc {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.bugreport-panel-tip {
  margin: 0;
  font-size: 12px;
  color: var(--ink-soft);
}
.bugreport-wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #25d366;
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s;
  width: 100%;
}
.bugreport-wa-btn:hover { background: #1ebe5d; }
@media (max-width: 767px) {
  .bugreport-wrap { position: static; }
  .bugreport-panel {
    position: fixed;
    inset: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, .75);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 16px;
    box-sizing: border-box;
    overflow-y: auto;
    transform: none;
  }
  .bugreport-card {
    width: 100%;
    height: auto;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 16px;
  }
}
.personal-pending-loading,
.personal-pending-empty {
  margin: 0;
  font-size: 13px;
  color: var(--ink-faint);
}
.personal-pending-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.personal-pending-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13.5px;
}
.personal-pending-info { flex: 1; color: var(--ink); }
.personal-pending-actions { display: flex; gap: 8px; flex-shrink: 0; }
.personal-footer {
  padding: 12px 0 4px;
  text-align: center;
}
/* Privacy Policy modal */
.privacy-modal { max-width: 520px; width: 100%; padding: 22px; display: flex; flex-direction: column; gap: 14px; max-height: 85vh; overflow-y: auto; }
.privacy-body { display: flex; flex-direction: column; gap: 10px; }
.privacy-heading { margin: 8px 0 2px; font-size: 14px; font-weight: 700; color: var(--ink); }
.privacy-text { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.7; }

/* ============================================================
   Mobile Bottom Navigation Bar (< 768 px)
   Four fixed items RTL: תפריט | המשמרות שלי | מידע ונהלים | אזור אישי
   ============================================================ */
.mobile-bottom-nav {
  display: none; /* hidden on desktop; shown by the media query below */
}

@media (max-width: 767px) {
  /* Hide desktop nav tabs — all navigation on mobile goes through Bottom Nav or Hamburger Drawer */
  .main-nav { display: none !important; }
  .nav-tab  { display: none !important; }

  /* Push the page content up so it is not obscured by the bar */
  .app-view > .tab-panel {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    z-index: 900;
    background: var(--topbar-bg, var(--surface));
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    flex-direction: row; /* RTL direction is set on <html dir="rtl">; no reversal needed */
  }

  .mobile-bottom-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: none;
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 4px 4px;
    transition: color 0.15s;
    position: relative;
  }

  .mobile-bottom-item.is-active {
    color: var(--accent, #e63946);
  }

  .mobile-bottom-item.is-active svg {
    stroke: var(--accent, #e63946);
  }

  .mobile-bottom-item svg {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    transition: stroke 0.15s;
  }

  /* Avatar inside the "אזור אישי" bottom-nav item */
  .mbnav-avatar-slot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft, rgba(230,57,70,.15));
    font-size: 10px;
    font-weight: 700;
    color: var(--accent, #e63946);
    flex-shrink: 0;
  }
  .mbnav-avatar-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Hamburger button that opens the side drawer */
  .hamburger-btn {
    display: flex;
    position: fixed;
    top: 10px;
    inset-inline-start: 10px;
    z-index: 920;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--radius, 8px);
    background: var(--surface, #fff);
    box-shadow: 0 1px 6px rgba(0,0,0,.14);
    color: var(--ink);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
  }

  /* Hamburger is visible; the legacy mobile <select> is hidden */
  .nav-mobile-select { display: none !important; }
}

/* Desktop: never show the bottom nav or hamburger */
@media (min-width: 768px) {
  .mobile-bottom-nav { display: none !important; }
  .hamburger-btn      { display: none !important; }
  .hamburger-overlay  { display: none !important; }
  .hamburger-drawer   { display: none !important; }
}

/* ============================================================
   Slide-over Hamburger Drawer
   ============================================================ */
.hamburger-overlay {
  position: fixed;
  inset: 0;
  z-index: 940;
  background: rgba(0,0,0,.45);
}
.hamburger-overlay[hidden] { display: none !important; }

.hamburger-drawer {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  bottom: 0;
  z-index: 950;
  width: min(360px, 100vw);
  max-width: 100vw;
  background: var(--surface, #fff);
  color: var(--menu-text);
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,.18);
  overflow: hidden;
  direction: rtl;
}
.hamburger-drawer[hidden] { display: none !important; }

.hamburger-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.hamburger-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}

.hamburger-close {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
}

.hamburger-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: auto;
  padding: 8px 0 calc(16px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}

/* Accordion groups inside the drawer */
.hd-group { border-bottom: 1px solid var(--menu-divider); }

.hd-group-btn {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--menu-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  text-align: inherit;
  gap: 8px;
  min-height: 44px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.hd-group-btn:hover { background: var(--surface-2, rgba(0,0,0,.04)); }

.hd-group-caret {
  font-size: 12px;
  color: var(--menu-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.hd-group.is-open .hd-group-caret { transform: rotate(180deg); }

.hd-group-items {
  display: none;
  flex-direction: column;
  padding: 0 0 8px;
}

.hd-group.is-open .hd-group-items { display: flex; }

.hd-subgroup {
  margin: 4px 0 2px;
  border-bottom: 1px dashed var(--menu-divider);
}
.hd-subgroup-btn {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--menu-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 16px 9px 22px;
  cursor: pointer;
  text-align: inherit;
}
.hd-subgroup-caret {
  font-size: 11px;
  color: var(--menu-muted);
  transition: transform .2s;
}
.hd-subgroup-items { display: none; flex-direction: column; padding: 0 0 6px; }
.hd-subgroup.is-open .hd-subgroup-items { display: flex; }
.hd-subgroup.is-open .hd-subgroup-caret { transform: rotate(180deg); }
.hd-subgroup-red > .hd-subgroup-btn { color: var(--menu-text); }
.hd-subgroup-green > .hd-subgroup-btn { color: var(--menu-text); }
.hd-subgroup-yellow > .hd-subgroup-btn { color: var(--menu-text); }

.hd-item-btn {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  color: var(--menu-text);
  padding: 9px 16px 9px 24px;
  text-align: inherit;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.12s, color 0.12s;
  min-height: 44px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.hd-item-btn:hover {
  background: var(--accent-soft, rgba(230,57,70,.08));
  color: var(--menu-text);
}
.hd-item-btn.is-active {
  background: var(--brand);
  color: var(--menu-active-text);
}

.hd-subitem-btn { padding-inline-start: 30px; }

/* Flat (non-dropdown) item in the drawer */
.hd-flat-btn {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--menu-text);
  padding: 12px 16px;
  text-align: inherit;
  cursor: pointer;
  border-bottom: 1px solid var(--menu-divider);
  transition: background 0.12s, color 0.12s;
  min-height: 44px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.hd-flat-btn:hover {
  background: var(--accent-soft, rgba(230,57,70,.08));
  color: var(--menu-text);
}
.hd-flat-btn.is-active {
  background: var(--brand);
  color: var(--menu-active-text);
}

.hd-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hd-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--menu-muted);
}

.hd-action-label {
  flex: 1 1 auto;
  min-width: 0;
}

/* ============================================================
   מידע ונהלים (Info Policy) Tab
   ============================================================ */
#tab-info-policy {
  padding-top: 22px;
  background: transparent;
}

.info-policy-section {
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: var(--radius, 8px);
  margin-bottom: 16px;
  overflow: hidden;
}

.info-policy-section-head {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.info-policy-section-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.info-policy-section-body {
  padding: 14px 18px;
}

.info-policy-section-subtext {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.info-policy-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.info-policy-list li {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.6;
  padding-inline-start: 14px;
  position: relative;
}

.info-policy-list li::before {
  content: "•";
  position: absolute;
  inset-inline-start: 0;
  color: var(--accent, #e63946);
  font-size: 16px;
  line-height: 1.4;
}

.info-policy-role-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

.info-policy-role-details {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info-policy-contact-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.2);
}

.info-policy-contact-link:hover {
  text-decoration-color: var(--accent, #e63946);
}

.info-policy-wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin-inline-start: auto;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #1fa855;
  color: #0d7f3b;
  background: #e7f8ee;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.info-policy-wa-btn:hover {
  background: #d8f2e4;
}

.info-policy-editor {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.info-policy-editor-section {
  border: 1px solid rgba(100, 116, 139, 0.45);
  border-radius: 14px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(16, 24, 39, 0.96) 0%, rgba(13, 20, 35, 0.96) 100%);
  box-shadow: 0 10px 26px rgba(2, 6, 23, 0.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-policy-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.info-policy-editor-head strong {
  color: #f8fafc;
  font-size: 15px;
  letter-spacing: 0.01em;
}

.info-policy-editor-head-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  color: #dbeafe;
  background: rgba(37, 99, 235, 0.2);
  font-size: 11.5px;
  font-weight: 700;
}

.info-policy-editor-field > span {
  color: #e2e8f0;
  font-weight: 700;
  margin-bottom: 4px;
}

.info-policy-editor-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-policy-editor-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(71, 85, 105, 0.55);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.78);
}

.info-policy-editor-item-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.info-policy-editor-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
  align-self: flex-start;
}

.info-policy-editor-mini-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-policy-editor-mini-field span {
  font-size: 12px;
  color: #cbd5e1;
  font-weight: 700;
}

.info-policy-editor-mini-field-full {
  grid-column: 1 / -1;
}

.info-policy-editor-item .swap-note-input {
  width: 100%;
  background: rgba(2, 6, 23, 0.58);
  border: 1px solid rgba(148, 163, 184, 0.38);
  color: #f8fafc;
}

.info-policy-editor-item .swap-note-input::placeholder {
  color: #94a3b8;
}

.info-policy-editor-item-grid-single {
  grid-template-columns: 1fr;
}

.info-policy-editor-item .btn {
  align-self: auto;
}

.info-policy-editor-item-actions .btn {
  min-width: 34px;
  padding-inline: 10px;
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(148, 163, 184, 0.45);
  color: #e2e8f0;
}

.info-policy-editor-item-actions .btn:hover:not(:disabled) {
  background: rgba(37, 99, 235, 0.22);
}

.info-policy-editor-item-actions .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.info-policy-editor-add {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

@media (max-width: 760px) {
  .info-policy-editor-item-grid {
    grid-template-columns: 1fr;
  }
}

/* Editable textarea for admin inline editing */
.info-policy-edit-area {
  width: 100%;
  min-height: 90px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--surface-2, var(--surface));
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  resize: vertical;
  box-sizing: border-box;
  direction: rtl;
}

.info-policy-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  justify-content: flex-end;
}

/* PWA badge in users table */
.pwa-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #d1fae5;
  color: #065f46;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}
[data-theme="dark"] .pwa-badge {
  background: rgba(16,185,129,.2);
  color: #6ee7b7;
}



/* ---- PWA Top Install Banner (mobile only) ---- */
@media (max-width: 767px) {
  .pwa-install-banner {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--primary, #d62828);
    color: #fff;
    direction: rtl;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
  }
  .pwa-install-banner[hidden] { display: none; }
  .pwa-install-banner__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
    object-fit: contain;
    background: #fff;
    padding: 2px;
  }
  .pwa-install-banner__text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
  }
  .pwa-install-banner__title {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pwa-install-banner__desc {
    font-size: 11px;
    opacity: .88;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pwa-install-banner__install-btn {
    flex-shrink: 0;
    padding: 5px 14px;
    border: 2px solid #fff;
    border-radius: 20px;
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
  }
  .pwa-install-banner__install-btn:active { background: rgba(255,255,255,.15); }
  .pwa-install-banner__close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
    opacity: .8;
  }
  .pwa-install-banner__close:hover { opacity: 1; }
  /* iOS tooltip shown below the banner */
  .pwa-ios-tooltip {
    position: fixed;
    top: 60px;
    inset-inline-start: 10px;
    inset-inline-end: 10px;
    z-index: 2001;
    background: #1a1a2e;
    color: #fff;
    border-radius: 10px;
    padding: 12px 14px 12px 36px;
    font-size: 13px;
    line-height: 1.5;
    direction: rtl;
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
  }
  .pwa-ios-tooltip[hidden] { display: none; }
  .pwa-ios-tooltip__close {
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
    background: none;
    border: none;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: .7;
  }
  .pwa-ios-tooltip__close:hover { opacity: 1; }
}

/* ---- Admin Push tab ---- */
.admin-push-body {
  max-width: 520px;
  display: grid;
  gap: 14px;
  padding: 8px 0;
}
.admin-push-body .field { gap: 6px; }
.admin-push-body textarea { resize: vertical; }

/* ============================================================
   GLASSMORPHISM LAYER
   Full glass-morphism overrides — light + dark mode.
   All backdrop-filter effects sit on top of the new
   radial-gradient body background defined above.
   ============================================================ */

/* ---- Shared glass mixin (light mode default) ---- */
.login-card,
.calendar-wrap,
.day-detail,
.shift-card,
.shift-acc,
.table-card,
.station-form-card,
.lock-config-card,
.avail-card,
.add-shift-card,
.hidden-shifts,
.nav-menu-panel,
.nav-submenu-flyout,
.notif-panel,
.actions-menu,
.swap-modal,
.autocomplete-dropdown,
.volunteer-request-accordion,
.vol-req-panel,
.team-drawer,
.publish-config-card,
.tab-stats-grid > *,
.dash-card,
.info-panel,
.coverage-vehicle-block,
.mentorship-upload-card,
.mentorship-card,
.forced-reset-card {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.08) !important;
}

/* ---- Topbar + bottom navigation (light mode) ---- */
.topbar {
  background: rgba(248, 250, 252, 0.75) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 2px 16px rgba(31, 38, 135, 0.06) !important;
}

/* ---- Notification panel sub-elements (light mode) ---- */
.notif-panel .notif-head,
.notif-panel .notif-broadcast {
  background: rgba(255, 255, 255, 0.45) !important;
}

/* ---- Shift card head (light mode) ---- */
.shift-card-head {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ---- Accordion inner body (light mode) ---- */
.shift-acc-inner,
.shift-acc-body,
.volunteer-request-accordion-body {
  background: rgba(248, 250, 252, 0.5) !important;
}

/* ---- Accordion trigger (light mode) ---- */
.shift-acc-trigger,
.volunteer-request-accordion-head {
  background: rgba(255, 255, 255, 0.45) !important;
}

/* ---- Table headers (light mode) ---- */
.users-table th,
.regular-requests-table th {
  background: rgba(241, 245, 249, 0.6) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ---- Table row hover (light mode) ---- */
.users-table tr:hover td {
  background: rgba(241, 245, 249, 0.45) !important;
}

/* ---- Input / select fields (light mode) ---- */
.field input,
.slot select,
.slot input,
.station-form input,
.station-form select,
.lock-form input,
.lock-form select,
.users-table select,
.add-shift-field input,
.add-shift-field select,
.autocomplete-field input,
.escort-assign-input,
.bulk-users-form input,
.bulk-users-form select,
.bulk-users-form textarea,
.swap-note-input,
.notif-broadcast-input,
.info-policy-edit-area,
.trainee-view-month-input,
.station-edit-input {
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}
.field input:focus,
.slot select:focus,
.slot input:focus,
.station-form input:focus,
.station-form select:focus,
.lock-form input:focus,
.lock-form select:focus,
.users-table select:focus,
.add-shift-field input:focus,
.add-shift-field select:focus,
.autocomplete-field input:focus,
.escort-assign-input:focus,
.bulk-users-form input:focus,
.bulk-users-form select:focus,
.bulk-users-form textarea:focus,
.info-policy-edit-area:focus {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb), 0.15) !important;
}

/* ---- Disabled/read-only inputs (light mode) ---- */
.slot select:disabled,
.slot input:disabled,
.users-table select:disabled {
  background: rgba(241, 245, 249, 0.40) !important;
}

/* ---- Button variants — small secondary (light mode) ---- */
.btn-xs,
.btn-ghost,
.btn-circle,
.theme-toggle,
.notif-bell {
  background: rgba(255, 255, 255, 0.60) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}

/* ---- Impersonation banner stays opaque ---- */
.impersonation-banner {
  backdrop-filter: none !important;
}

/* ---- Day cells (light mode) ---- */
.day-cell {
  background: rgba(255, 255, 255, 0.50) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.day-cell:hover {
  background: rgba(255, 255, 255, 0.75) !important;
  border-color: var(--brand) !important;
  box-shadow: var(--shadow-md) !important;
}
.day-cell.is-selected {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  backdrop-filter: none !important;
}
.day-cell.is-empty {
  background: transparent !important;
  border-color: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
.day-cell.is-locked {
  background: rgba(241, 245, 249, 0.40) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* ---- Nav menu panels (light mode) ---- */
.nav-menu-panel .nav-menu-item:hover,
.nav-submenu-flyout .nav-menu-item:hover {
  background: rgba(241, 245, 249, 0.65) !important;
}
.nav-menu-panel .nav-menu-item.is-active,
.nav-submenu-flyout .nav-menu-item.is-active {
  background: var(--brand) !important;
  color: var(--menu-active-text) !important;
}

/* ---- Regular requests view-toggle (light mode) ---- */
.regular-requests-viewtoggle {
  background: rgba(255, 255, 255, 0.50) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ============================================================
   DARK MODE GLASSMORPHISM OVERRIDES
   ============================================================ */

/* ---- Shared glass (dark mode) ---- */
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .calendar-wrap,
html[data-theme="dark"] .day-detail,
html[data-theme="dark"] .shift-card,
html[data-theme="dark"] .shift-acc,
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .station-form-card,
html[data-theme="dark"] .lock-config-card,
html[data-theme="dark"] .avail-card,
html[data-theme="dark"] .add-shift-card,
html[data-theme="dark"] .hidden-shifts,
html[data-theme="dark"] .nav-menu-panel,
html[data-theme="dark"] .nav-submenu-flyout,
html[data-theme="dark"] .notif-panel,
html[data-theme="dark"] .actions-menu,
html[data-theme="dark"] .swap-modal,
html[data-theme="dark"] .autocomplete-dropdown,
html[data-theme="dark"] .volunteer-request-accordion,
html[data-theme="dark"] .vol-req-panel,
html[data-theme="dark"] .team-drawer,
html[data-theme="dark"] .publish-config-card,
html[data-theme="dark"] .tab-stats-grid > *,
html[data-theme="dark"] .dash-card,
html[data-theme="dark"] .info-panel,
html[data-theme="dark"] .coverage-vehicle-block,
html[data-theme="dark"] .mentorship-upload-card,
html[data-theme="dark"] .mentorship-card,
html[data-theme="dark"] .forced-reset-card {
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
}

/* ---- Topbar (dark mode) ---- */
html[data-theme="dark"] .topbar {
  background: rgba(2, 6, 23, 0.75) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.30) !important;
}

/* ---- Notification panel sub-elements (dark mode) ---- */
html[data-theme="dark"] .notif-panel .notif-head,
html[data-theme="dark"] .notif-panel .notif-broadcast {
  background: rgba(2, 6, 23, 0.45) !important;
}

/* ---- Shift card head (dark mode) ---- */
html[data-theme="dark"] .shift-card-head {
  background: rgba(15, 23, 42, 0.55) !important;
}

/* ---- Accordion inner body (dark mode) ---- */
html[data-theme="dark"] .shift-acc-inner,
html[data-theme="dark"] .shift-acc-body,
html[data-theme="dark"] .volunteer-request-accordion-body {
  background: rgba(2, 6, 23, 0.45) !important;
}

/* ---- Accordion trigger (dark mode) ---- */
html[data-theme="dark"] .shift-acc-trigger,
html[data-theme="dark"] .volunteer-request-accordion-head {
  background: rgba(15, 23, 42, 0.55) !important;
}

/* ---- Table headers (dark mode) ---- */
html[data-theme="dark"] .users-table th,
html[data-theme="dark"] .regular-requests-table th {
  background: rgba(2, 6, 23, 0.50) !important;
}

/* ---- Table row hover (dark mode) ---- */
html[data-theme="dark"] .users-table tr:hover td {
  background: rgba(15, 23, 42, 0.45) !important;
}

/* ---- Input / select fields (dark mode) ---- */
html[data-theme="dark"] .field input,
html[data-theme="dark"] .slot select,
html[data-theme="dark"] .slot input,
html[data-theme="dark"] .station-form input,
html[data-theme="dark"] .station-form select,
html[data-theme="dark"] .lock-form input,
html[data-theme="dark"] .lock-form select,
html[data-theme="dark"] .users-table select,
html[data-theme="dark"] .add-shift-field input,
html[data-theme="dark"] .add-shift-field select,
html[data-theme="dark"] .autocomplete-field input,
html[data-theme="dark"] .escort-assign-input,
html[data-theme="dark"] .bulk-users-form input,
html[data-theme="dark"] .bulk-users-form select,
html[data-theme="dark"] .bulk-users-form textarea,
html[data-theme="dark"] .swap-note-input,
html[data-theme="dark"] .notif-broadcast-input,
html[data-theme="dark"] .info-policy-edit-area,
html[data-theme="dark"] .trainee-view-month-input,
html[data-theme="dark"] .station-edit-input {
  background: rgba(2, 6, 23, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .field input:focus,
html[data-theme="dark"] .slot select:focus,
html[data-theme="dark"] .slot input:focus,
html[data-theme="dark"] .station-form input:focus,
html[data-theme="dark"] .station-form select:focus,
html[data-theme="dark"] .lock-form input:focus,
html[data-theme="dark"] .lock-form select:focus,
html[data-theme="dark"] .users-table select:focus,
html[data-theme="dark"] .add-shift-field input:focus,
html[data-theme="dark"] .add-shift-field select:focus,
html[data-theme="dark"] .autocomplete-field input:focus,
html[data-theme="dark"] .escort-assign-input:focus,
html[data-theme="dark"] .bulk-users-form input:focus,
html[data-theme="dark"] .bulk-users-form select:focus,
html[data-theme="dark"] .bulk-users-form textarea:focus,
html[data-theme="dark"] .info-policy-edit-area:focus {
  background: rgba(15, 23, 42, 0.75) !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.18) !important;
}

/* ---- Disabled inputs (dark mode) ---- */
html[data-theme="dark"] .slot select:disabled,
html[data-theme="dark"] .slot input:disabled,
html[data-theme="dark"] .users-table select:disabled {
  background: rgba(2, 6, 23, 0.35) !important;
  border-style: dashed !important;
}

/* ---- Button variants (dark mode) ---- */
html[data-theme="dark"] .btn-xs,
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .btn-circle,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .notif-bell {
  background: rgba(15, 23, 42, 0.65) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

/* ---- Day cells (dark mode) ---- */
html[data-theme="dark"] .day-cell {
  background: rgba(15, 23, 42, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
html[data-theme="dark"] .day-cell:hover {
  background: rgba(15, 23, 42, 0.80) !important;
  border-color: var(--brand) !important;
}
html[data-theme="dark"] .day-cell.is-selected {
  background: var(--brand) !important;
  border-color: var(--brand) !important;
  backdrop-filter: none !important;
}
html[data-theme="dark"] .day-cell.is-empty {
  background: transparent !important;
  border-color: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .day-cell.is-locked {
  background: rgba(2, 6, 23, 0.45) !important;
}

/* ---- Nav menu panels (dark mode) ---- */
html[data-theme="dark"] .nav-menu-panel .nav-menu-item:hover,
html[data-theme="dark"] .nav-submenu-flyout .nav-menu-item:hover {
  background: rgba(15, 23, 42, 0.65) !important;
}

/* ---- Regular requests view-toggle (dark mode) ---- */
html[data-theme="dark"] .regular-requests-viewtoggle {
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
html[data-theme="dark"] .regular-requests-viewtab.is-active {
  background: rgba(30, 41, 59, 0.75) !important;
}

/* ---- Volunteer-request accordion (dark mode) ---- */
html[data-theme="dark"] .volunteer-request-accordion-head:hover {
  background: rgba(15, 23, 42, 0.70) !important;
}
/* ============================================================
   GLASSMORPHISM — TABLES, GRIDS & SCHEDULE VIEWS
   Applied after all other rules so specificity wins cleanly.
   ============================================================ */

/* ---- 1. Table wrappers / containers (light mode) ---- */
.table-card,
.table-responsive,
.matrix-wrap,
.volunteer-request-table-wrap,
.missing-crew-table-wrap,
.trainee-schedule-table,
.users-table-container {
  background: rgba(255, 255, 255, 0.60) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* ---- 2. Table headers — th (light mode) ---- */
.users-table th,
.users-acct-table th,
.regular-requests-table th,
.matrix-table thead th,
.schedule-grid-table th,
.missing-crew-table th,
.stations-table th,
.roster-table th {
  background: rgba(241, 245, 249, 0.85) !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* ---- 3a. Table cells / zebra striping (light mode) ---- */
.users-table td,
.users-acct-table td,
.regular-requests-table td,
.matrix-table td,
.schedule-grid-table td,
.missing-crew-table td,
.stations-table td,
.roster-table td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  color: #1e293b !important;
}

.users-table tbody tr:nth-child(even),
.users-acct-table tbody tr:nth-child(even),
.regular-requests-table tbody tr:nth-child(even),
.matrix-table tbody tr:nth-child(even) td:not(.mx-col-date),
.schedule-grid-table tbody tr:nth-child(even),
.missing-crew-table tbody tr:nth-child(even),
.stations-table tbody tr:nth-child(even),
.roster-table tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.02);
}

/* ---- 3b. Row hover (light mode) ---- */
.users-table tbody tr:hover td,
.users-acct-table tbody tr:hover td,
.regular-requests-table tbody tr:hover td,
.schedule-grid-table tbody tr:hover td,
.missing-crew-table tbody tr:hover td,
.stations-table tbody tr:hover td,
.roster-table tbody tr:hover td {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #1e293b !important;
}
.matrix-table tbody tr:hover td:not(.mx-col-date) {
  background: rgba(0, 0, 0, 0.04) !important;
}

/* ---- 4. Sticky columns / rows (light mode) ---- */
.matrix-table thead th,
.mx-col-date,
.mx-corner {
  background: rgba(248, 250, 252, 0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
/* Keep sticky cells opaque on row-state overrides in light mode */
.matrix-table tbody tr.is-weekend td.mx-col-date,
.matrix-table tbody tr.is-today td.mx-col-date,
.matrix-table tbody tr:hover td.mx-col-date {
  background: rgba(248, 250, 252, 0.92) !important;
}

/* ---- 5. Badge contrast (light mode) ---- */
.status-badge,
.quota-badge,
.role-badge,
.shift-classification-badge {
  -webkit-font-smoothing: antialiased;
  text-shadow: none !important;
}
.status-badge.approved { background: var(--ok-soft) !important; color: var(--ok) !important; }
.status-badge.pending  { background: var(--gold-soft) !important; color: var(--gold) !important; }
.quota-badge.ok        { background: var(--ok-soft) !important; color: var(--ok) !important; }
.quota-badge.low       { background: var(--gold-soft) !important; color: var(--gold) !important; }
.quota-badge.neutral   { background: var(--surface-2) !important; color: var(--ink-soft) !important; border: 1px solid var(--line) !important; }

/* ============================================================
   DARK MODE OVERRIDES — TABLES, GRIDS & SCHEDULE VIEWS
   ============================================================ */

/* ---- 1. Table wrappers / containers (dark mode) ---- */
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .table-responsive,
html[data-theme="dark"] .matrix-wrap,
html[data-theme="dark"] .volunteer-request-table-wrap,
html[data-theme="dark"] .missing-crew-table-wrap,
html[data-theme="dark"] .trainee-schedule-table,
html[data-theme="dark"] .users-table-container {
  background: rgba(15, 23, 42, 0.60) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* ---- 2. Table headers — th (dark mode) ---- */
html[data-theme="dark"] .users-table th,
html[data-theme="dark"] .users-acct-table th,
html[data-theme="dark"] .regular-requests-table th,
html[data-theme="dark"] .matrix-table thead th,
html[data-theme="dark"] .schedule-grid-table th,
html[data-theme="dark"] .missing-crew-table th,
html[data-theme="dark"] .stations-table th,
html[data-theme="dark"] .roster-table th {
  background: rgba(10, 15, 29, 0.85) !important;
  color: #f8fafc !important;
  font-weight: 700 !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* ---- 3a. Table cells / zebra striping (dark mode) ---- */
html[data-theme="dark"] .users-table td,
html[data-theme="dark"] .users-acct-table td,
html[data-theme="dark"] .regular-requests-table td,
html[data-theme="dark"] .matrix-table td,
html[data-theme="dark"] .schedule-grid-table td,
html[data-theme="dark"] .missing-crew-table td,
html[data-theme="dark"] .stations-table td,
html[data-theme="dark"] .roster-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: #f1f5f9 !important;
}

html[data-theme="dark"] .users-table tbody tr:nth-child(even),
html[data-theme="dark"] .users-acct-table tbody tr:nth-child(even),
html[data-theme="dark"] .regular-requests-table tbody tr:nth-child(even),
html[data-theme="dark"] .matrix-table tbody tr:nth-child(even) td:not(.mx-col-date),
html[data-theme="dark"] .schedule-grid-table tbody tr:nth-child(even),
html[data-theme="dark"] .missing-crew-table tbody tr:nth-child(even),
html[data-theme="dark"] .stations-table tbody tr:nth-child(even),
html[data-theme="dark"] .roster-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

/* ---- 3b. Row hover (dark mode) ---- */
html[data-theme="dark"] .users-table tbody tr:hover td,
html[data-theme="dark"] .users-acct-table tbody tr:hover td,
html[data-theme="dark"] .regular-requests-table tbody tr:hover td,
html[data-theme="dark"] .schedule-grid-table tbody tr:hover td,
html[data-theme="dark"] .missing-crew-table tbody tr:hover td,
html[data-theme="dark"] .stations-table tbody tr:hover td,
html[data-theme="dark"] .roster-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #f1f5f9 !important;
}
html[data-theme="dark"] .matrix-table tbody tr:hover td:not(.mx-col-date) {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* ---- 4. Sticky columns / rows (dark mode) ---- */
html[data-theme="dark"] .matrix-table thead th,
html[data-theme="dark"] .mx-col-date,
html[data-theme="dark"] .mx-corner {
  background: rgba(15, 23, 42, 0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}
/* Keep sticky cells opaque on row-state overrides in dark mode */
html[data-theme="dark"] .matrix-table tbody tr.is-weekend td.mx-col-date,
html[data-theme="dark"] .matrix-table tbody tr.is-today td.mx-col-date,
html[data-theme="dark"] .matrix-table tbody tr:hover td.mx-col-date {
  background: rgba(15, 23, 42, 0.92) !important;
}

/* ---- 5. Badge contrast (dark mode) ---- */
html[data-theme="dark"] .status-badge,
html[data-theme="dark"] .quota-badge,
html[data-theme="dark"] .role-badge,
html[data-theme="dark"] .shift-classification-badge {
  -webkit-font-smoothing: antialiased;
  text-shadow: none !important;
}
html[data-theme="dark"] .status-badge.approved { background: rgba(34,197,94,0.18) !important; color: #4ade80 !important; }
html[data-theme="dark"] .status-badge.pending  { background: rgba(234,179,8,0.18) !important; color: #facc15 !important; }
html[data-theme="dark"] .quota-badge.ok        { background: rgba(34,197,94,0.18) !important; color: #4ade80 !important; }
html[data-theme="dark"] .quota-badge.low       { background: rgba(234,179,8,0.18) !important; color: #facc15 !important; }
html[data-theme="dark"] .quota-badge.neutral   { background: rgba(255,255,255,0.07) !important; color: #94a3b8 !important; border: 1px solid rgba(255,255,255,0.12) !important; }
html[data-theme="dark"] .role-badge.admin      { background: rgba(59,130,246,0.18) !important; color: #93c5fd !important; }
html[data-theme="dark"] .role-badge.viewer     { background: rgba(234,179,8,0.15) !important; color: #fde047 !important; }

/* כפיית טקסט לבן על תגיות השיבוץ בכל המצבים */
.crew-kind-badge,
.crew-kind-badge.is-role-custom,
.mentor-alert-badge,
.quota-badge,
.status-badge {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

/* END GLASSMORPHISM LAYER */

/* ============================================================
   MOBILE TOUCH SCROLLING (iOS / Android / Samsung Internet)
   Allow both horizontal and vertical native panning for all
   table scroll wrappers.  The html/body pan-y guard stays in
   place for the page itself; these wrappers explicitly opt-in
   to 2-D panning so wide tables are horizontally scrollable.
   ============================================================ */

/* Tab panels keep vertical-only panning (page scroll). */
.tab-panel {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior-y: contain;
}

/* All table / scroll wrappers: permit both axes. */
.table-responsive,
.table-card,
.table-scroll-wrap,
.shifts-table-container,
.my-shifts-table-wrap,
.users-table-container,
.trainees-view-container,
.trainee-view-container,
.trainee-tracking-container {
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
  overscroll-behavior-x: contain;
  max-width: 100% !important;
}

.table-scroll-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Wide tables inside wrappers must be at least as wide as their
   natural content so horizontal scrolling actually activates. */
.table-responsive table,
.table-card table,
.my-shifts-table-wrap table {
  min-width: 100%;
  width: max-content;
  touch-action: pan-x pan-y !important;
}

/* Descendant override: prevent any inherited pan-y from a parent
   element overriding the 2-D setting on child elements. */
.table-responsive *,
.table-card *,
.my-shifts-table-wrap * {
  touch-action: pan-x pan-y !important;
}

/* ============================================================
   MOBILE HORIZONTAL SCROLL — force tables to overflow
   (max-width: 768px)

   Root cause: table cells shrink-to-fit the screen width, so
   the table never becomes wider than the viewport and there is
   nothing to scroll.  Fix:
   1. Prevent cell text from wrapping (nowrap keeps columns at
      their natural width).
   2. Give every data table a hard minimum width so it is
      physically wider than a phone screen.
   3. Make every wrapper a scrollable block container.
   ============================================================ */
@media (max-width: 768px) {

  /* 1. Prevent column collapse */
  .table-responsive th,
  .table-responsive td,
  .table-card th,
  .table-card td,
  .table-scroll-wrap th,
  .table-scroll-wrap td,
  .shifts-table-container th,
  .shifts-table-container td,
  .my-shifts-table-wrap th,
  .my-shifts-table-wrap td,
  .users-table-container th,
  .users-table-container td,
  .trainees-view-container th,
  .trainees-view-container td,
  .trainee-view-container th,
  .trainee-view-container td,
  .trainee-tracking-container th,
  .trainee-tracking-container td {
    white-space: nowrap !important;
  }

  /* 2. Force tables to be physically wider than the screen */
  .table-responsive table,
  .table-card table,
  .table-scroll-wrap table,
  .shifts-table-container table,
  .my-shifts-table-wrap table,
  .users-table-container table,
  .trainees-view-container table,
  .trainee-view-container table,
  .trainee-tracking-container table {
    min-width: 620px !important;
    width: max-content !important;
    touch-action: pan-x pan-y !important;
  }

  /* 3. Wrappers must be scrollable block containers.
        div:has(> table) is a CSS-native fallback that catches any
        wrapper div not explicitly listed above. */
  .table-responsive,
  .table-card,
  .table-scroll-wrap,
  .shifts-table-container,
  .my-shifts-table-wrap,
  .users-table-container,
  .trainees-view-container,
  .trainee-view-container,
  .trainee-tracking-container,
  div:has(> table) {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    max-width: 100% !important;
  }

  /* 4. Parent view containers must not clip horizontal overflow */
  .tab-panel,
  .tab-content,
  .view-container,
  .page-content,
  [id^="tab-"] {
    overflow-x: visible !important;
  }

  .mobile-card-table {
    min-width: 100% !important;
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
  }
  .mobile-card-table thead { display: none !important; }
  .mobile-card-table,
  .mobile-card-table tbody,
  .mobile-card-table tr,
  .mobile-card-table td {
    display: block !important;
    width: 100% !important;
  }
  .mobile-card-table tbody {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
  }
  .mobile-card-table tr {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 8px 10px;
    background: var(--surface, #fff);
  }
  .mobile-card-table td {
    white-space: normal !important;
    padding: 6px 0 !important;
    border: 0 !important;
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    text-align: start;
  }
  .mobile-card-table td::before {
    content: attr(data-col-label);
    font-weight: 700;
    color: var(--ink);
    flex: 0 0 42%;
  }

  .btn,
  .nav-tab,
  .nav-menu-btn,
  .hd-group-btn,
  .hd-subgroup-btn,
  .hd-item-btn,
  .hd-flat-btn,
  .modal .btn,
  .modal button,
  .swap-modal .btn,
  .swap-modal button {
    min-height: 44px;
  }
}

/* ── Bulk calendar export button ("המשמרות שלי") ─────────────────────────── */
.forms-bulk-cal-wrap { padding: 0 0 12px; }
.bulk-cal-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--brand);
  background: transparent;
  color: var(--brand);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bulk-cal-btn:hover { background: var(--brand); color: #fff; }
.bulk-cal-btn svg { flex: none; }

/* ── Bulk calendar modal ─────────────────────────────────────────────────── */
.bulk-cal-modal {
  max-width: 480px;
  width: 100%;
}

/* explanatory note */
.bulk-cal-note {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 6px 0 12px;
  line-height: 1.5;
}

/* "פתח בטאבים בגוגל" button — same ghost styling, sits between cancel and primary */
.bulk-cal-tabs-btn { white-space: nowrap; }

/* "בחר הכל" row */
.bulk-cal-select-all {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0 8px;
  user-select: none;
}

/* divider between select-all and list */
.bulk-cal-sep {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0 0 10px;
}

/* scrollable shift list */
.bulk-cal-modal-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 20px;
  padding-inline-end: 2px; /* leave room for scrollbar */
}

/* each shift row — card-style */
.bulk-cal-modal-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  font-size: 13px;
  transition: border-color 0.12s, background 0.12s;
}
.bulk-cal-modal-item:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.bulk-cal-modal-item input[type="checkbox"] {
  flex: none;
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--brand);
}

/* info column: date / type / station */
.bulk-cal-modal-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  text-align: start;
}
.bulk-cal-modal-date {
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
}
.bulk-cal-modal-type {
  font-size: 12px;
  color: var(--ink-soft);
}
.bulk-cal-modal-station {
  font-size: 12px;
  color: var(--ink-faint);
}

/* footer actions — right-aligned, no overlap */
.bulk-cal-modal .swap-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 4px;
  border-top: 1px solid var(--line);
  margin-top: 2px;
}

/* cancel button */
.bulk-cal-modal .swap-modal-actions .btn-secondary {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.bulk-cal-modal .swap-modal-actions .btn-secondary:hover {
  background: var(--surface);
  color: var(--ink);
}

/* confirm (add to calendar) button */
.bulk-cal-modal .swap-modal-actions .btn-primary {
  background: linear-gradient(165deg, var(--brand), var(--brand-deep));
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s, opacity 0.15s;
  white-space: nowrap;
}
.bulk-cal-modal .swap-modal-actions .btn-primary:hover:not(:disabled) {
  box-shadow: 0 8px 22px rgba(var(--brand-rgb), .30);
}
.bulk-cal-modal .swap-modal-actions .btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* The day board's "אבטחות" section. The cards themselves are plain shift cards and
   their crew seats are plain .slot-grid seats, so everything here is only the section's
   own identity colour: blue on the band and the card edges, telling a security detail
   apart from the gold/teal/indigo shift bands at a glance without giving it a different
   card shape. The section's counter badge is deliberately NOT recoloured — it is the
   same red badge every period header wears. */
.shift-acc-coverages .shift-acc-band.other,
.shift-card.is-security-coverage .shift-band.other,
.shift-card.is-personal-security-coverage .shift-band.other {
  background: #2563eb;
}
.shift-card.is-security-coverage,
.shift-card.is-personal-security-coverage {
  border-color: rgba(37, 99, 235, .35);
}
.shift-card.is-security-coverage .shift-card-head,
.shift-card.is-personal-security-coverage .shift-card-head {
  border-bottom-color: rgba(37, 99, 235, .28);
  box-shadow: inset 0 2px 0 #2563eb;
}
html[data-theme="dark"] .shift-acc-coverages .shift-acc-band.other,
html[data-theme="dark"] .shift-card.is-security-coverage .shift-band.other,
html[data-theme="dark"] .shift-card.is-personal-security-coverage .shift-band.other {
  background: #3b82f6;
}
html[data-theme="dark"] .shift-card.is-security-coverage,
html[data-theme="dark"] .shift-card.is-personal-security-coverage {
  border-color: rgba(59, 130, 246, .40);
}
html[data-theme="dark"] .shift-card.is-security-coverage .shift-card-head,
html[data-theme="dark"] .shift-card.is-personal-security-coverage .shift-card-head {
  border-bottom-color: rgba(59, 130, 246, .32);
  box-shadow: inset 0 2px 0 #3b82f6;
}
/* Same action bar the shift cards use for their in-card buttons, pinned to the card's
   end edge so "שמירת צוות" sits where the other card actions sit. */
.coverage-day-actions { justify-content: flex-end; padding-block-end: 14px; }