:root {
  color-scheme: light dark;
  --bg: #f4f5f8;
  --card: #ffffff;
  --text: #1c1f26;
  --muted: #596272;
  --line: #e2e5ea;
  --primary: #1f5fbf;
  --primary-dark: #17498f;
  --danger: #c62828;
  --danger-bg: #fdecec;
  --ok: #1b7f3b;
  --ok-bg: #e7f6ec;
  --warn-bg: #fff4d6;
  --warn: #6f4700;
  --mine: #e3edff;
  --surface-2: #f7f8fa;
  --surface-3: #fafbfc;
  --surface-4: #f3f4f7;
  --grey-bg: #eef0f3;
  --hover-bg: #eef3fb;
  --today-bg-soft: #fbfdff;
  --today-bg: #e8f0ff;
  --danger-line: #f3c2c2;
  --ok-line: #bfe5cb;
  --warn-line: #f0dca3;
  --mine-line: #c7d8f7;
  --morning-bg: #fff3cf;
  --morning-fg: #7a5200;
  --evening-bg: #e4e7ff;
  --evening-fg: #2f3a8f;
  --count-bg: rgba(0, 0, 0, 0.08);
  --time-fg: #3a3f4b;
  --warn-chip: #f3dc9a;
  --role-manager-bg: #ffe8a8; --role-manager-fg: #6b4700;
  --role-cashier-bg: #d8e8ff; --role-cashier-fg: #164a9a;
  --role-buffeter-bg: #f0dcff; --role-buffeter-fg: #5f2596;
  --role-usher-bg: #d6f3e0; --role-usher-fg: #17612f;
  --toast-bg: #222;
  --ok-hover: #d9f0e0;
  --danger-hover: #a92222;
  --line-strong: #c9ced6;
  --line-dashed: #d9dde3;
  --unavail-bg: #f7c9c9;
  --unavail-line: #e39a9a;
  --unavail-fg: #8a1c1c;
  --radius: 10px;
}

/* ערכת צבעים כהה, לפי הגדרת המכשיר */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #121418;
    --card: #1c1f26;
    --text: #e6e8ee;
    --muted: #9aa3b2;
    --line: #2e333d;
    --primary: #7aa7ff;
    --primary-dark: #a9c4ff;
    --danger: #ff7b7b;
    --danger-bg: #3a1f1f;
    --ok: #6fd69a;
    --ok-bg: #17301f;
    --warn-bg: #3a2f12;
    --warn: #f0c766;
    --mine: #1e2b45;
    --surface-2: #232730;
    --surface-3: #1f232b;
    --surface-4: #262a33;
    --grey-bg: #2a2e37;
    --hover-bg: #26304a;
    --today-bg-soft: #1a2030;
    --today-bg: #1e2b45;
    --danger-line: #6a2f2f;
    --ok-line: #2f5a3c;
    --warn-line: #6a5520;
    --mine-line: #3a5390;
    --morning-bg: #3a3012;
    --morning-fg: #f5d47a;
    --evening-bg: #23284a;
    --evening-fg: #b9c2ff;
    --count-bg: rgba(255, 255, 255, 0.12);
    --time-fg: #c9cfdb;
    --warn-chip: #574518;
    --role-manager-bg: #4a3a10; --role-manager-fg: #ffd97a;
    --role-cashier-bg: #1d3358; --role-cashier-fg: #a9c8ff;
    --role-buffeter-bg: #3a2450; --role-buffeter-fg: #dcbbff;
    --role-usher-bg: #1c3b28; --role-usher-fg: #9fe2b6;
    --toast-bg: #3a3f4b;
    --ok-hover: #1f3f2a;
    --danger-hover: #c94444;
    --line-strong: #3d4350;
    --line-dashed: #343946;
    --unavail-bg: #4a2323;
    --unavail-line: #7a3a3a;
    --unavail-fg: #ffb3b3;
  }
  button { color: #0f1218; }
  button:hover { background: var(--primary-dark); }
  button.secondary, button.link { color: var(--primary); }
  button.danger { color: var(--danger); }
  button.secondary:hover, button.danger:hover, button.link:hover { background: var(--hover-bg); }
  .slot-toggle[aria-pressed="true"] { color: #1a0a0a; }
  .toast { color: #fff; }
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  font-family: system-ui, "Segoe UI", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
}

body.center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

h1, h2, h3 { margin: 0 0 12px; font-weight: 600; }
h1 { font-size: 1.8rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }

p { margin: 0 0 10px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}

.card.narrow { width: 100%; max-width: 380px; }

.container { max-width: 1200px; margin: 0 auto; padding: 20px 16px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  gap: 12px;
}

.brand { font-weight: 700; font-size: 1.2rem; color: var(--primary); }

label { display: block; margin-bottom: 12px; font-size: 0.95rem; }

input, select, textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  background: var(--card);
  color: var(--text);
}

textarea { resize: vertical; }

input:focus, select:focus, textarea:focus { outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary); }

button {
  font: inherit;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--primary);
  background: var(--primary);
  color: #fff;
  cursor: pointer;
}

button:hover { background: var(--primary-dark); }
button:disabled { opacity: 0.55; cursor: not-allowed; }

button.secondary { background: var(--card); color: var(--primary); }
button.secondary:hover { background: var(--hover-bg); }
button.danger { background: var(--card); color: var(--danger); border-color: var(--danger); }
button.danger:hover { background: var(--danger-bg); }
button.link { background: none; border: none; color: var(--primary); padding: 4px 6px; text-decoration: underline; }
button.link:hover { background: none; color: var(--primary-dark); }
button.small { padding: 4px 10px; font-size: 0.85rem; }
button.icon { padding: 2px 8px; font-size: 1rem; line-height: 1; }

.error { color: var(--danger); min-height: 1.2em; }

.nav-link { color: var(--primary); margin-inline-end: 8px; }

.temp-password { display: flex; align-items: center; gap: 10px; }
.temp-password code {
  font-size: 1.4rem;
  letter-spacing: 2px;
  background: var(--surface-4);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 12px;
  direction: ltr;
  user-select: all;
}

fieldset.perms { border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px 8px; margin: 0 0 12px; min-width: 220px; }
fieldset.perms legend { font-size: 0.9rem; padding: 0 4px; }
label.check { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
label.check input { width: 18px; height: 18px; margin: 0; }
.status { color: var(--ok); margin-inline-start: 10px; }
.hint { color: var(--muted); font-size: 0.9rem; }
.muted { color: var(--muted); }

.table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.table th, .table td { border: 1px solid var(--line); padding: 8px; text-align: start; vertical-align: top; }
.table th { background: var(--surface-2); font-weight: 600; }
.table td.center, .table th.center { text-align: center; }
.table input[type="checkbox"] { width: 20px; height: 20px; margin: 0; }
.table tr.today td { background: var(--today-bg-soft); }

.badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.8rem;
  border: 1px solid transparent;
  margin: 1px;
  white-space: nowrap;
}
.badge.red { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.badge.green { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line); }
.badge.grey { background: var(--grey-bg); color: var(--muted); }
.badge.yellow { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.badge.blue { background: var(--mine); color: var(--primary-dark); border-color: var(--mine-line); }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.toolbar .spacer { flex: 1; }
.week-title { font-size: 1.1rem; font-weight: 600; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.tabs button {
  background: none; border: none; border-bottom: 3px solid transparent; border-radius: 0;
  color: var(--muted); padding: 10px 16px; font-size: 1rem;
}
.tabs button.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.tabs button:hover { background: none; color: var(--primary-dark); }

.days-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 10px; }
/* במסך רחב: תמיד שבעה ימים בשורה אחת */
@media (min-width: 1000px) { .days-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.day {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
  min-width: 0;
  background: var(--surface-3);
  min-height: 120px;
}
.day.today { border-color: var(--primary); }
.day-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.day-head strong { font-size: 0.95rem; }
.day-head .date { color: var(--muted); font-size: 0.85rem; margin-inline-start: 6px; }

/* לוח שבועי: 7 עמודות, 3 שורות (כותרת, בוקר, ערב); השורות מיושרות בין הימים */
/* תמיד: שבעה ימים לרוחב, בוקר מעל ערב. במסך צר הלוח נגלל לרוחב בתוך עצמו */
.week-board {
  display: grid;
  grid-template-columns: repeat(7, minmax(150px, 1fr));
  grid-template-rows: auto auto auto;
  grid-auto-flow: column;
  column-gap: 8px;
  row-gap: 0;
  overflow-x: auto;
  padding-bottom: 4px;
}
.day-head-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--surface-4);
  min-width: 0;
}
.day-head-cell strong { font-size: 0.95rem; }
.day-head-cell .date { color: var(--muted); font-size: 0.85rem; margin-inline-start: 6px; }
.slot-cell {
  padding: 6px;
  border: 1px solid var(--line);
  border-top: none;
  background: var(--surface-3);
  min-width: 0;
}
.slot-cell.evening { border-radius: 0 0 var(--radius) var(--radius); }
.slot-cell .empty { display: block; text-align: center; font-size: 0.85rem; padding: 4px 0; }
.day-head-cell.today { border-color: var(--primary); background: var(--today-bg); }
.slot-cell.today { border-color: var(--primary); }


.slot-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 5px;
}
.slot-cell.morning .slot-head { background: var(--morning-bg); color: var(--morning-fg); }
.slot-cell.evening .slot-head { background: var(--evening-bg); color: var(--evening-fg); }
.slot-head .count { background: var(--count-bg); border-radius: 999px; padding: 0 8px; font-weight: 600; font-size: 0.8rem; }

/* כרטיס משמרת קומפקטי */
.shift {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 8px;
  margin-bottom: 5px;
  font-size: 0.85rem;
  cursor: pointer;
}
.shift:hover { border-color: var(--primary); }
.shift.mine { background: var(--mine); border-color: var(--mine-line); box-shadow: inset 3px 0 0 var(--primary); }
.shift.static { cursor: default; }
.shift.static:hover { border-color: var(--line); }
.shift.static.mine:hover { border-color: var(--mine-line); }
.shift-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
.shift .who { font-weight: 600; font-size: 0.95rem; line-height: 1.25; overflow-wrap: anywhere; }
.shift-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 2px 6px; margin-top: 2px; }
.shift .time { font-variant-numeric: tabular-nums; color: var(--time-fg); unicode-bidi: isolate; white-space: nowrap; }
.shift.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.shift .warn-icon {
  background: var(--warn-chip);
  color: var(--warn);
  border-radius: 999px;
  padding: 0 7px;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: help;
}

/* תגי תפקיד */
.role-badge { display: inline-block; font-size: 0.72rem; padding: 0 7px; border-radius: 999px; white-space: nowrap; font-weight: 600; line-height: 1.5; }
.role-manager { background: var(--role-manager-bg); color: var(--role-manager-fg); }
.role-cashier { background: var(--role-cashier-bg); color: var(--role-cashier-fg); }
.role-buffeter { background: var(--role-buffeter-bg); color: var(--role-buffeter-fg); }
.role-usher { background: var(--role-usher-bg); color: var(--role-usher-fg); }
.role-legend .role-badge { font-size: 0.85rem; margin-inline-start: 4px; }

.warnings {
  background: var(--warn-bg);
  color: var(--warn);
  border: 1px solid var(--warn-line);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 0.9rem;
}
.warnings ul { margin: 0; padding-inline-start: 18px; }

dialog {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  width: 100%;
  max-width: 420px;
  color: var(--text);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
.dialog-actions { display: flex; gap: 8px; justify-content: flex-start; margin-top: 8px; }
.dialog-actions .spacer { flex: 1; }

.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > label { flex: 1; min-width: 140px; }

.toast {
  position: fixed;
  bottom: 20px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  background: var(--toast-bg);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  z-index: 100;
}
.toast.show { opacity: 1; }
.toast.error { background: var(--danger); }

.scroll-x { overflow-x: auto; }

/* בחירת אילוצים: כפתורים גדולים וברורים */
.instructions { font-size: 1.05rem; }
.legend-item { display: inline-block; padding: 2px 10px; border-radius: 999px; margin-inline-start: 6px; font-weight: 600; }
.legend-item.avail { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-line); }
.legend-item.unavail { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-line); }

.days-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.day-row {
  display: grid;
  grid-template-columns: 150px 1fr 1fr;
  gap: 10px;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--surface-3);
}
.day-row.today { border-color: var(--primary); }
.day-row .day-label { display: flex; flex-direction: column; justify-content: center; }
.day-row .day-label strong { font-size: 1.2rem; }
.day-row .day-label span { color: var(--muted); font-size: 1rem; }

.slot-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 2px solid var(--ok-line);
  background: var(--ok-bg);
  color: var(--ok);
  font-size: 1.05rem;
}
.slot-toggle:hover { background: var(--ok-hover); }
.slot-toggle .slot-name { font-weight: 700; font-size: 1.15rem; }
.slot-toggle .slot-state { font-size: 1rem; }
.slot-toggle[aria-pressed="true"] { background: var(--danger); border-color: var(--danger); color: #fff; }
.slot-toggle[aria-pressed="true"]:hover { background: var(--danger-hover); }
.slot-toggle:disabled { opacity: 0.6; cursor: not-allowed; }
.slot-toggle:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }

#save-btn { font-size: 1.1rem; padding: 12px 24px; }

@media (max-width: 520px) {
  .day-row { grid-template-columns: 1fr 1fr; }
  .day-row .day-label { grid-column: 1 / -1; flex-direction: row; gap: 8px; align-items: baseline; }
}

/* טבלת האילוצים: הכותרת בטבלה נפרדת שנצמדת מתחת לסרגל הכותרת; הגוף נגלל לרוחב באופן טבעי
   והכותרת עוקבת אחריו (הסנכרון בסקריפט). עמודת השמות צמודה לצד ימין בשתי הטבלאות. */
.cons-head-wrap { position: sticky; top: var(--topbar-h, 0px); z-index: 5; overflow: hidden; background: var(--surface-2); }
.cons-head-wrap .table { margin: 0; table-layout: fixed; }
.table-wrap { overflow-x: auto; }
.table-wrap .table { margin-bottom: 0; }
.table.cons th { background: var(--surface-2); }
.table.cons .name-col { position: sticky; inset-inline-start: 0; z-index: 2; background: var(--card); min-width: 140px; }
.table.cons thead .name-col { background: var(--surface-2); text-align: center; vertical-align: middle; }
/* בטבלת הכותרת תא השמות מוחזר למקומו בסקריפט, ולכן אינו צריך הצמדה */
.cons-head-wrap .table .name-col { position: relative; }


.note-cell { font-size: 0.85rem; color: var(--muted); white-space: pre-wrap; min-width: 160px; max-width: 260px; overflow-wrap: anywhere; }
.table.cons th.notes-col { min-width: 160px; }

@media (max-width: 640px) {
  .card { padding: 14px; }
  .topbar { padding: 10px 14px; }
  .table th, .table td { padding: 6px; font-size: 0.92rem; }
}

/* הודעת "אין חיבור לאינטרנט" */
.offline-notice {
  background: var(--warn-bg);
  color: var(--warn);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 1.05rem;
}

/* טבלת אילוצים: תא לכל משמרת, צבוע לפי זמינות */
.table th.day-col { border-inline-start: 2px solid var(--line-strong); }
.table th.sub { font-weight: 500; font-size: 0.8rem; color: var(--muted); padding: 3px 4px; }
.table td.cons-cell { text-align: center; vertical-align: middle; font-weight: 700; padding: 6px 4px; min-width: 34px; }
.table td.cons-cell.avail { background: var(--ok-bg); color: var(--ok); }
.table td.cons-cell.unavail { background: var(--unavail-bg); color: var(--unavail-fg); }
.table td.cons-cell.none { background: var(--grey-bg); color: var(--muted); font-weight: 400; }
.table td.cons-cell.avail { font-weight: 500; }
.table th.sub:not(.last), .table td.cons-cell:not(.last) { border-inline-end: 1px dashed var(--line-dashed); }
.table th.sub.last, .table td.cons-cell.last { border-inline-end: 2px solid var(--line-strong); }

/* בחירת עובד/ת בחלון המשמרת: צבע לפי זמינות */
select.sel-avail { background: var(--ok-bg); border-color: var(--ok-line); }
select.sel-unavail { background: var(--unavail-bg); border-color: var(--unavail-line); }
select.sel-none { background: var(--grey-bg); }
optgroup.opt-avail, option.opt-avail { background: var(--ok-bg); color: var(--ok); }
optgroup.opt-unavail, option.opt-unavail { background: var(--unavail-bg); color: var(--unavail-fg); }
optgroup.opt-none, option.opt-none { background: var(--grey-bg); color: var(--muted); }
option { color: var(--text); }

/* במסך צר עמודת השמות צרה יותר */
@media (max-width: 999px) {
  .table.cons .name-col { min-width: 112px; }
  .table.cons td.name-col strong { display: block; font-size: 0.9rem; line-height: 1.2; }
}