*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue:    #2563eb;
  --blue-d:  #1d4ed8;
  --blue-l:  #eff6ff;
  --navy:    #0f172a;
  --slate:   #1e293b;
  --green:   #059669;
  --green-l: #ecfdf5;
  --amber:   #d97706;
  --amber-l: #fffbeb;
  --red:     #dc2626;
  --muted:   #64748b;
  --border:  #e2e8f0;
  --bg:      #f1f5f9;
  --card:    #ffffff;
  --text:    #0f172a;
  --r:       6px;
  --shadow:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow2: 0 4px 16px rgba(0,0,0,.10);
}

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

.hidden { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ── LOGIN ─────────────────────────────────────────────────────────── */

#page-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--slate) 0%, #1e3a5f 55%, #1a4a8a 100%);
}

.login-card {
  background: var(--card);
  border-radius: 12px;
  padding: 44px 40px 40px;
  width: 380px;
  box-shadow: 0 24px 64px rgba(0,0,0,.35);
}

.login-logo {
  text-align: center;
  margin-bottom: 32px;
}
.login-logo .ico { font-size: 44px; display: block; margin-bottom: 10px; }
.login-logo h1  { font-size: 24px; font-weight: 700; color: var(--navy); letter-spacing: -.3px; }
.login-logo p   { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ── HEADER ────────────────────────────────────────────────────────── */

/* ── Sticky nav wrapper ─────────────────────────────────────────── */
#nav-wrapper {
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

.app-header {
  background: var(--slate);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  height: 54px;
}

.header-brand {
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: -.2px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--r);
  transition: background .15s;
}
.header-brand:hover { background: rgba(255,255,255,.1); }
.header-brand span { opacity: .7; font-size: 18px; }

.location-tabs {
  display: flex;
  gap: 2px;
  flex: 1;
  justify-content: center;
}

.tab {
  background: transparent;
  border: none;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  padding: 6px 18px;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.tab:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.9); }
.tab.active { background: var(--blue); color: #fff; }

.header-user {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.user-name { font-size: 13px; color: rgba(255,255,255,.75); }

/* ── SUB-NAV ───────────────────────────────────────────────────────── */

.subnav {
  background: var(--navy);
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Density controls */
.density-ctrl {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.density-label {
  font-size: 11px;
  color: rgba(255,255,255,.4);
  margin-right: 4px;
  white-space: nowrap;
}
.density-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.5);
  cursor: pointer;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  transition: background .15s, color .15s, border-color .15s;
  line-height: 1.4;
}
.density-btn:hover  { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.4); }
.density-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.subnav-btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,.55);
  cursor: pointer;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 500;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
  margin-bottom: -1px;
}
.subnav-btn:hover { color: rgba(255,255,255,.9); }
.subnav-btn.active { color: #fff; border-bottom-color: var(--blue); }

/* ── CALENDAR TOGGLE BUTTON ────────────────────────────────────────── */

#btn-cal-toggle {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--navy);
  border-radius: var(--r);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
  margin-bottom: 0;
}
#btn-cal-toggle:hover { background: var(--blue-l); border-color: var(--blue); color: var(--blue); }
#btn-cal-toggle.active { background: var(--blue); color: #fff; border-color: var(--blue); }

/* ── MONTH NAV ─────────────────────────────────────────────────────── */

.month-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 18px 20px 14px;
  flex-wrap: wrap;
}
.mnav-month {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mnav-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Sticky pasek nawigacji miesięcznej w Grafiku */
#view-schedule .month-nav {
  position: sticky;
  top: 89px;   /* header (54px) + subnav (~35px) */
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0,0,0,.07);
  padding: 10px 20px;
  margin: 0;
}
body.mini #view-schedule .month-nav { top: 81px; } /* mini header 46px */
.month-label {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  min-width: 210px;
  text-align: center;
  letter-spacing: -.3px;
}
.btn-nav {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  width: 34px; height: 34px;
  cursor: pointer;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  transition: background .15s;
}
.btn-nav:hover { background: var(--bg); }

/* ── SCHEDULE TABLE ────────────────────────────────────────────────── */

.schedule-wrap {
  padding: 0 20px 60px;
}

#view-schedule .schedule-wrap {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.schedule-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow2);
  border: 1px solid var(--border);
}

.schedule-table thead th {
  background: var(--slate);
  color: rgba(255,255,255,.8);
  padding: 10px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.schedule-table thead th:first-child { width: 88px; }

.day-row {
  border-top: 1px solid var(--border);
}
.day-row:hover .day-cell { background: #f8fafc; }
.day-row.weekend .day-cell { background: var(--blue-l); }
.day-row.weekend:hover .day-cell { background: #dbeafe; }
.day-row.today .day-cell .day-num { color: var(--blue); }

.day-cell {
  padding: 12px 16px;
  vertical-align: top;
  white-space: nowrap;
  background: #fafbfc;
  border-right: 1px solid var(--border);
  transition: background .1s;
}
.day-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.day-name {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}
.day-row.weekend .day-name { color: var(--blue); }
.day-row.weekend .day-num  { color: #1d4ed8; }

.shifts-cell {
  padding: 10px 14px;
  vertical-align: top;
}
.shifts-list { display: flex; flex-direction: column; gap: 5px; }

/* Shift row */
.shift-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--r);
  font-size: 13px;
  border: 1px solid transparent;
}
.shift-item.ps1 { background: var(--green-l); border-color: #a7f3d0; }
.shift-item.ps2 { background: var(--amber-l); border-color: #fde68a; }
.shift-item.oth { background: #e0f2fe; border-color: #7dd3fc; }
.shift-item.otk { background: #f0fdf4; border-color: #86efac; }
.shift-ot-comment { font-size: 11px; color: var(--muted); font-style: italic; }

.ps-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ps1 .ps-tag { background: var(--green); color: #fff; }
.ps2 .ps-tag { background: var(--amber); color: #fff; }
.ot-tag.oth  { background: #0284c7; color: #fff; }
.ot-tag.otk  { background: #16a34a; color: #fff; }

.shift-person { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.shift-time   { color: var(--muted); font-size: 12px; white-space: nowrap; }
.shift-hours  { color: var(--muted); font-size: 11px; background: rgba(0,0,0,.06); padding: 1px 6px; border-radius: 99px; white-space: nowrap; }

.shift-actions { display: flex; gap: 2px; margin-left: 4px; }
.btn-icon {
  background: none; border: none; cursor: pointer;
  padding: 3px 6px; border-radius: 4px;
  font-size: 12px; color: var(--muted);
  transition: background .1s, color .1s;
  white-space: nowrap;
}
.btn-icon:hover         { background: rgba(0,0,0,.07); color: var(--text); }
.btn-icon.del:hover     { background: #fee2e2; color: var(--red); }

.btn-add {
  display: flex; align-items: center; gap: 6px;
  background: none;
  border: 1.5px dashed var(--border);
  border-radius: var(--r);
  color: var(--blue);
  cursor: pointer;
  font-size: 12px; font-weight: 500;
  padding: 5px 12px;
  margin-top: 4px;
  transition: background .15s, border-color .15s;
  width: fit-content;
}
.btn-add:hover { background: var(--blue-l); border-color: var(--blue); }

.no-shifts { color: #cbd5e1; font-size: 12px; font-style: italic; padding: 4px 2px; }

/* ── DATA TABLES (people / users) ──────────────────────────────────── */

.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 14px;
}
.view-header h2 { font-size: 18px; font-weight: 700; color: var(--navy); }

.data-table {
  width: calc(100% - 40px);
  margin: 0 20px;
  min-width: 480px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow2);
  border: 1px solid var(--border);
}
.data-table thead th {
  background: var(--slate);
  color: rgba(255,255,255,.8);
  padding: 10px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.data-table tbody tr { border-top: 1px solid var(--border); }
.data-table tbody tr:hover td { background: var(--bg); }
.data-table tbody td { padding: 11px 16px; vertical-align: middle; }

.badge {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 99px;
}
.badge.admin  { background: #fef3c7; color: #92400e; }
.badge.zarzad { background: #fde8d8; color: #9a3412; }
.badge.moderator { background: #f0fdf4; color: #166534; }
.badge.ksiegowa  { background: #f5f3ff; color: #6d28d9; }
.badge.user   { background: #e0f2fe; color: #075985; }
.badge.oth    { background: #e0f2fe; color: #0284c7; font-weight: 700; }
.badge.otk    { background: #f0fdf4; color: #16a34a; font-weight: 700; }
.badge.muted  { background: var(--bg); color: var(--muted); }
tr.ot-row td  { background: #f0fdf4 !important; }
.badge.loc-k  { background: var(--green-l); color: var(--green); }
.badge.loc-g  { background: var(--blue-l);  color: var(--blue); }
.badge.loc-z  { background: #fae8ff; color: #86198f; }

/* ── FORMS & FIELDS ─────────────────────────────────────────────────── */

.field {
  display: flex; flex-direction: column; gap: 5px; flex: 1;
}
.field.sm { flex: 0 0 100px; }
.field.md { flex: 0 0 155px; }

.field label {
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px;
}
.field input, .field select {
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  font-size: 14px; font-family: inherit;
  outline: none; background: #fff; width: 100%;
  transition: border-color .15s, box-shadow .15s;
  color: var(--text);
}
.field input:focus, .field select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.field input::placeholder { color: #94a3b8; }

.form-row { display: flex; gap: 12px; }
.form-actions { display: flex; gap: 8px; margin-top: 4px; }

/* ── BUTTONS ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; border-radius: var(--r);
  padding: 8px 18px; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background .15s, box-shadow .15s;
  font-family: inherit;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--blue-d); }
.btn-secondary { background: var(--card); border: 1.5px solid var(--blue); color: var(--blue); }
.btn-secondary:hover:not(:disabled) { background: var(--blue); color: #fff; }
.btn-ghost {
  background: transparent; border: 1.5px solid var(--border);
  color: var(--text); padding: 7px 16px;
}
.btn-ghost:hover { background: var(--bg); }
.btn-ghost.light { border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.8); }
.btn-ghost.light:hover { background: rgba(255,255,255,.1); }
.btn-full { width: 100%; justify-content: center; padding: 10px; font-size: 15px; }
.btn-pdf {
  background: var(--card); border: 1.5px solid var(--border);
  color: var(--text); padding: 6px 14px; font-size: 13px; font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
}
.btn-pdf:hover { background: var(--bg); }

.btn-csv {
  background: var(--card); border: 1.5px solid #a7f3d0;
  color: var(--green); padding: 6px 14px; font-size: 13px; font-weight: 600;
  white-space: nowrap; flex-shrink: 0; border-radius: var(--r); cursor: pointer;
}
.btn-csv:hover { background: var(--green-l); }

/* ── MODAL ──────────────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; padding: 20px;
  backdrop-filter: blur(2px);
  /* Scroll wewnątrz overlaya — nie propaguje do body */
  overscroll-behavior: contain;
}
.modal {
  background: var(--card);
  border-radius: 12px;
  width: 100%; max-width: 540px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,.25);
}
.modal.sm { max-width: 400px; }

.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-size: 16px; font-weight: 700; color: var(--navy); }
.btn-close {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: 20px; line-height: 1;
  padding: 2px 6px; border-radius: 4px;
  transition: background .1s, color .1s;
}
.btn-close:hover { background: var(--bg); color: var(--text); }

.modal-body {
  padding: 20px;
  display: flex; flex-direction: column; gap: 16px;
}
.modal-section-title {
  font-size: 11px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .6px;
}
.modal-sep { border: none; border-top: 1px solid var(--border); }

/* Shift items inside modal */
.mshift {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; border-radius: var(--r); font-size: 13px;
  border: 1px solid transparent;
}
.mshift.ps1 { background: var(--green-l); border-color: #a7f3d0; }
.mshift.ps2 { background: var(--amber-l); border-color: #fde68a; }
.mshift.oth { background: #e0f2fe; border-color: #7dd3fc; }
.mshift.otk { background: #f0fdf4; border-color: #86efac; }
.mshift .shift-person { flex: 1; font-weight: 600; min-width: 120px; }
.mshift .shift-time   { color: var(--muted); font-size: 12px; white-space: nowrap; }
.mshift .shift-actions { margin-left: auto; }

/* ── ALERTS ─────────────────────────────────────────────────────────── */

.alert {
  border-radius: var(--r); padding: 10px 14px; font-size: 13px;
  border: 1px solid;
}
.alert.error   { background: #fef2f2; border-color: #fca5a5; color: #b91c1c; }
.alert.success { background: #f0fdf4; border-color: #86efac; color: #166534; }

.login-link { font-size: 13px; color: var(--blue); text-decoration: none; }
.login-link:hover { text-decoration: underline; }
.login-hint { font-size: 13px; color: var(--muted); margin: 0 0 4px; line-height: 1.5; }
.settings-label { font-size: 13px; font-weight: 600; color: var(--text); }

.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: var(--navy); color: #fff;
  padding: 10px 22px; border-radius: 8px;
  font-size: 13px; font-weight: 500;
  z-index: 300; box-shadow: var(--shadow2);
  animation: fadeUp .2s ease;
  pointer-events: none;
}
.toast.err { background: var(--red); }
@keyframes fadeUp {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── MISC ────────────────────────────────────────────────────────────── */

code {
  font-family: 'Consolas', monospace;
  font-size: 12px; color: var(--muted);
  background: var(--bg); padding: 1px 6px;
  border-radius: 4px;
}
.empty-state {
  text-align: center; padding: 40px 20px;
  color: var(--muted); font-size: 14px;
}

/* ── SUMMARY VIEW ───────────────────────────────────────────────────── */

.summary-toolbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 20px 12px;
  flex-wrap: wrap;
}
.summary-person-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.summary-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
}
.summary-person-wrap select {
  padding: 7px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  min-width: 220px;
  cursor: pointer;
}
.summary-person-wrap select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* ── SUMMARY STATS — bloki ──────────────────────────────────────── */

.sum-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 20px 12px;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* Blok — kontener jednego obszaru tematycznego */
.sum-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  flex: 1;
  min-width: 130px;
}
.sum-block-lbl {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--muted);
  margin-bottom: 4px;
  white-space: nowrap;
}
.sum-block-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

/* Neutral — dyżury / czas */
.sum-block-neutral { background: var(--card); }
.sum-block-neutral .sum-stat-val { color: var(--navy); }

/* Hormon — PS1 + prace Hormon */
.sum-block-hormon { background: #fffbeb; border-color: #fcd34d; }
.sum-block-hormon .sum-block-lbl { color: #92400e; }
.sum-block-hormon .sum-stat-val  { color: #78350f; }

/* KSI — PS2 + prace KSI */
.sum-block-ksi { background: #f0fdf4; border-color: #86efac; }
.sum-block-ksi .sum-block-lbl { color: #166534; }
.sum-block-ksi .sum-stat-val  { color: #16a34a; }

/* Łącznie */
.sum-block-total { background: var(--card); }
.sum-block-total .sum-block-lbl { color: var(--muted); }
.sum-block-total .sum-stat-val  { color: #065f46; font-size: 24px; }

/* Stat wewnątrz bloku — bez własnego tła */
.sum-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r);
  background: transparent;
}
.sum-block .sum-stat { background: transparent; }
.sum-stat-val  { font-size: 21px; font-weight: 700; line-height: 1.1; }
.sum-stat-lbl  { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; white-space: nowrap; }

/* summary table rows */
#sum-table tbody tr td { padding: 8px 14px; border-top: 1px solid #e8ecf0; }
#sum-table thead th:last-child,
#sum-table tbody tr td:last-child { text-align: center; }
#sum-table tbody tr:nth-child(even):not(.weekend) { background: #f6f8fa; }
#sum-table tbody tr.weekend { background: var(--blue-l); }
#sum-table tbody tr.weekend td:first-child { color: #1d4ed8; font-weight: 600; }
.schedule-table .sum-row td .loc-badge {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 99px;
}

/* ── DENSITY: COMPACT ───────────────────────────────────────────────── */

body.compact { font-size: 13px; }

body.compact .day-cell        { padding: 7px 12px; }
body.compact .day-num         { font-size: 17px; }
body.compact .day-name        { font-size: 9px; }
body.compact .shifts-cell     { padding: 6px 10px; }
body.compact .shift-item      { padding: 3px 7px; font-size: 12px; gap: 6px; }
body.compact .ps-tag          { font-size: 9px; padding: 1px 5px; }
body.compact .shift-hours     { font-size: 10px; padding: 1px 5px; }
body.compact .btn-add         { padding: 3px 8px; font-size: 11px; margin-top: 2px; }
body.compact .shifts-list     { gap: 3px; }
body.compact .btn-icon        { padding: 2px 5px; font-size: 11px; }
body.compact .schedule-table thead th { padding: 7px 12px; }
body.compact .month-nav       { padding: 10px 20px 8px; }
body.compact .month-label     { font-size: 17px; }
body.compact .sum-totals   { gap: 8px; }
body.compact .sum-block    { padding: 7px 10px; }
body.compact .sum-stat-val { font-size: 18px; }

/* ── DENSITY: MINI ──────────────────────────────────────────────────── */

body.mini { font-size: 11px; }

body.mini .day-cell        { padding: 4px 10px; }
body.mini .day-num         { font-size: 14px; }
body.mini .day-name        { font-size: 8px; margin-top: 1px; }
body.mini .shifts-cell     { padding: 3px 8px; }
body.mini .shift-item      { padding: 2px 6px; font-size: 11px; gap: 5px; border-width: 1px; }
body.mini .ps-tag          { font-size: 8px; padding: 1px 4px; }
body.mini .shift-hours     { font-size: 9px; padding: 1px 4px; }
body.mini .shift-time      { font-size: 10px; }
body.mini .shift-person    { font-size: 11px; }
body.mini .btn-add         { padding: 2px 6px; font-size: 10px; margin-top: 1px; }
body.mini .shifts-list     { gap: 2px; }
body.mini .btn-icon        { padding: 1px 4px; font-size: 10px; }
body.mini .schedule-table thead th { padding: 5px 10px; font-size: 10px; }
body.mini .month-nav       { padding: 7px 20px 5px; }
body.mini .month-label     { font-size: 15px; min-width: 170px; }
body.mini .subnav-btn      { padding: 6px 12px; font-size: 12px; }
body.mini .app-header      { height: 46px; }
body.mini .schedule-table .sum-row td { padding: 4px 10px; }

/* ── SUMMARY: wyróżnienie Zarobki w bloku ───────────────────────── */

/* stat "zarobki" — nieco większy font, lekkie podkreślenie */
.sum-stat.is-earn .sum-stat-val { font-size: 20px; font-weight: 800; }
.sum-block-hormon .sum-stat.is-earn .sum-stat-val { color: #92400e; }
.sum-block-ksi    .sum-stat.is-earn .sum-stat-val { color: #14532d; }
.sum-block-total  .sum-stat.is-earn .sum-stat-val { color: #065f46; font-size: 23px; }

/* ── DAY OVERRIDE BAR ───────────────────────────────────────────── */
.day-override-active {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #f5f3ff; border: 1px solid #c4b5fd; border-radius: 7px;
  padding: 6px 10px; font-size: 12px; color: #5b21b6;
}
.day-override-form {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 7px; padding: 8px 10px; margin-top: 4px;
}
body.dark .day-override-active { background: #2e1065; border-color: #7c3aed; color: #c4b5fd; }
.day-override-closed { background: #fef2f2; border-color: #fca5a5; color: #991b1b; }
body.dark .day-override-closed { background: #450a0a; border-color: #dc2626; color: #fca5a5; }

/* ── OT ACTIVITIES TABLE (w panelu ustawień) ────────────────────── */
.ot-act-list { display: flex; flex-direction: column; gap: 6px; }
.ot-act-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--bg);
}
.ot-act-item.ot-inactive { opacity: .55; }
.ot-act-row1 {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 4px;
}
.ot-act-name { font-weight: 600; font-size: 14px; color: var(--text); }
.ot-act-item.ot-inactive .ot-act-name { text-decoration: line-through; }
.ot-act-row2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ot-act-rate { font-size: 13px; color: var(--muted); }
.ot-act-actions { display: flex; gap: 4px; }
/* Klikalne nagłówki sortowania */
.sortable-th { cursor: pointer; user-select: none; white-space: nowrap; }
.sortable-th:hover { background: #2d4a6e; }
/* Odznaki PS1/PS2 w tabeli Prowadzący */
.badge.ps1-badge { background: #d1fae5; color: #065f46; font-weight: 700; }
.badge.ps2-badge { background: #fef3c7; color: #92400e; font-weight: 700; }
body.dark .badge.ps1-badge { background: #064e3b; color: #6ee7b7; }
body.dark .badge.ps2-badge { background: #451a03; color: #fcd34d; }
/* Kolumny OTH/OTK w tabeli Zestawienie */
.cell-oth { color: #0284c7; }
.cell-otk { color: #16a34a; }
body.dark .cell-oth { color: #7dd3fc; }
body.dark .cell-otk { color: #86efac; }

/* ── SUMMARY BLOCK ROWS (Hormon / KSI wierszowy layout) ─────────── */
.sum-block-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 4px;
}
.sum-row {
  display: grid;
  grid-template-columns: 44px 1fr 1fr;
  align-items: baseline;
  gap: 6px;
  padding: 5px 0;
  border-top: 1px solid rgba(0,0,0,.06);
}
.sum-row:first-child { border-top: none; }
.sum-row-lbl  { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.sum-row-val  { font-size: 15px; font-weight: 700; color: var(--text); text-align: right; }
.sum-row-earn { font-size: 15px; font-weight: 700; color: var(--text); text-align: right; }
.sum-row-ot   .sum-row-lbl  { color: #0369a1; }
.sum-row-extra .sum-row-lbl { color: #7c3aed; font-style: italic; }
.sum-row-total { border-top: 1.5px solid rgba(0,0,0,.15) !important; margin-top: 2px; padding-top: 6px; }
.sum-row-total .sum-row-lbl  { color: var(--text); font-weight: 800; font-size: 11px; }
.sum-row-total .sum-row-val  { font-size: 16px; font-weight: 800; }
.sum-row-total .sum-row-earn { font-size: 16px; font-weight: 800; }
.sum-block-hormon .sum-row-total .sum-row-earn { color: #92400e; }
.sum-block-hormon .sum-row-total .sum-row-val  { color: #78350f; }
.sum-block-ksi    .sum-row-total .sum-row-earn { color: #14532d; }
.sum-block-ksi    .sum-row-total .sum-row-val  { color: #16a34a; }
/* dark mode */
body.dark .sum-row { border-top-color: rgba(255,255,255,.07); }
body.dark .sum-row-total { border-top-color: rgba(255,255,255,.2) !important; }
body.dark .sum-block-hormon .sum-row-total .sum-row-earn { color: #fb923c; }
body.dark .sum-block-hormon .sum-row-total .sum-row-val  { color: #fdba74; }
body.dark .sum-block-ksi    .sum-row-total .sum-row-earn { color: #86efac; }
body.dark .sum-block-ksi    .sum-row-total .sum-row-val  { color: #4ade80; }

/* ── CALENDAR GRID VIEW ─────────────────────────────────────────── */

#cal-grid { padding: 12px 16px 32px; }

.cal-grid-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
  background: var(--card);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow2);
}
.cal-grid-table thead th {
  background: var(--slate);
  color: rgba(255,255,255,.85);
  text-align: center;
  padding: 7px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.cal-cell {
  border: 1px solid #dde3ea;
  vertical-align: top;
  padding: 5px 5px 20px;
  height: 88px;
  position: relative;
  background: #fff;
}
.cal-cell.cal-empty { background: #f6f8fa; }
.cal-cell.weekend   { background: #f0f4ff; }
.cal-cell.today     { outline: 2px solid var(--blue); outline-offset: -2px; }
.cg-day-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 4px;
}
.cal-cell.weekend .cg-day-num { color: #1d4ed8; }
.cg-shift {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-size: 10px;
  line-height: 1.35;
  padding: 1px 4px;
  border-radius: 3px;
  margin-bottom: 2px;
  overflow: hidden;
}
.cg-shift.ps1 { background: #dcfce7; }
.cg-shift.ps2 { background: #fef9c3; }
.cg-shift.oth { background: #e0f2fe; }
.cg-shift.otk { background: #f0fdf4; }
.cg-ps   { font-weight: 700; font-size: 9px; color: #555; white-space: nowrap; }
.cg-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.cg-time { color: var(--muted); font-size: 9px; white-space: nowrap; }
.cg-add {
  position: absolute;
  bottom: 3px; right: 4px;
  background: none; border: none;
  color: var(--blue); font-size: 15px;
  cursor: pointer; padding: 0; line-height: 1;
  opacity: 0; transition: opacity .15s;
}
.cal-cell:hover .cg-add { opacity: 1; }

/* ── PRINT ──────────────────────────────────────────────────────── */

@media print {
  .app-header, .subnav, .month-nav, .app-footer,
  #sched-list-wrap, .cg-add { display: none !important; }
  #cal-grid-wrap { display: block !important; }
  #cal-grid { padding: 0; }
  body { background: #fff; }
  .cal-grid-table { box-shadow: none; font-size: 10px; }
  .cal-cell { height: 70px; padding: 3px 3px 3px; }
  .cg-day-num { font-size: 11px; }
  .cg-shift { font-size: 9px; padding: 1px 3px; }
}

/* ── BREAKDOWN TABLE ────────────────────────────────────────────── */

.bd-table { margin-bottom: 40px; min-width: 720px; }
.bd-table thead .cell-ps1  { color: var(--green); }
.bd-table thead .cell-ps2  { color: var(--amber); }
.bd-table thead .cell-total { color: #fff; }
.bd-table thead .cell-earn  { color: #93c5fd; }

.bd-table tbody .cell-ps1  { color: var(--green);  font-weight: 600; }
.bd-table tbody .cell-ps2  { color: var(--amber);  font-weight: 600; }
.bd-table tbody .cell-total { font-weight: 700; color: var(--navy); }
.bd-table tbody .cell-earn  { font-weight: 700; color: var(--blue); }
.bd-table tbody .cell-ratio { font-size: 12px; color: var(--muted); }

.bd-table tfoot td {
  background: var(--slate);
  color: #fff;
  font-weight: 700;
  padding: 10px 16px;
  font-size: 13px;
  border-top: 2px solid rgba(255,255,255,.15);
}
.bd-table tfoot .cell-ps1  { color: #6ee7b7; }
.bd-table tfoot .cell-ps2  { color: #fcd34d; }
.bd-table tfoot .cell-earn { color: #93c5fd; }

/* ── SETTINGS CARD ──────────────────────────────────────────────── */

.settings-card {
  max-width: 420px;
  margin: 0 20px;
  background: var(--card);
  border-radius: 10px;
  padding: 28px 24px;
  box-shadow: var(--shadow2);
  border: 1px solid var(--border);
}

#view-profile .settings-card + .settings-card { margin-top: 16px; }

.profile-info-grid { display: flex; flex-direction: column; gap: 10px; }

.profile-info-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.profile-info-label {
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
  min-width: 150px;
}

.profile-info-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  word-break: break-all;
}

/* ── CHECKBOX ROW ────────────────────────────────────────────────── */

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  user-select: none;
}
.check-row input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--blue);
  cursor: pointer;
  flex-shrink: 0;
}
.check-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}

/* ── HOURS SETTINGS ─────────────────────────────────────────────── */

.hours-card {
  max-width: 480px;
  margin-top: 20px;
}

.hours-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--border);
}

.hours-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  font-family: inherit;
  transition: color .15s, border-color .15s;
}
.hours-tab:hover  { color: var(--text); }
.hours-tab.active { color: var(--blue); border-bottom-color: var(--blue); }

.hours-table {
  width: 100%;
  border-collapse: collapse;
}
.hours-table tr { border-bottom: 1px solid var(--border); }
.hours-table tr:last-child { border-bottom: none; }
.hours-table td { padding: 7px 4px 7px 0; vertical-align: middle; }
.hours-day {
  font-size: 13px;
  color: var(--text);
  width: 130px;
  font-weight: 500;
  padding-right: 8px !important;
}
.hours-sep {
  text-align: center;
  color: var(--muted);
  width: 20px;
  padding: 0 2px !important;
}
.hours-table select {
  padding: 5px 6px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  cursor: pointer;
  min-width: 90px;
  transition: border-color .15s;
}
.hours-table select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.hours-table select:disabled {
  background: var(--bg);
  color: var(--muted);
  cursor: not-allowed;
  opacity: .7;
}

/* ── FOOTER ──────────────────────────────────────────────────────── */

.app-footer {
  text-align: center;
  padding: 18px 20px;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .3px;
}

/* ── SCROLL WRAPPER (tabele na mobile) ──────────────────────────── */

.table-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 20px;
  border-radius: 10px;
  box-shadow: var(--shadow2);
  border: 1px solid var(--border);
}
.table-scroll-wrap .data-table {
  width: 100%;
  margin: 0;
  box-shadow: none;
  border: none;
  border-radius: 0;
}

/* ── DARK MODE ───────────────────────────────────────────────────── */

body.dark {
  --bg:      #0f172a;
  --card:    #1e293b;
  --text:    #e2e8f0;
  --navy:    #e2e8f0;
  --border:  #334155;

  --muted:   #94a3b8;
  --blue-l:  #172554;
  --green-l: #052e16;
  --amber-l: #431407;
  --slate:   #0f172a;
  --shadow:  0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --shadow2: 0 4px 16px rgba(0,0,0,.5);
}

/* Elementy z hardkodowanymi jasnymi kolorami */
body.dark .day-cell                       { background: #1a2540; }
body.dark .day-row:hover .day-cell        { background: #1e2d4a; }
body.dark .day-row.weekend .day-cell      { background: #172554; }
body.dark .day-row.weekend:hover .day-cell{ background: #1e3361; }
body.dark .day-row.weekend .day-num       { color: #93c5fd; }
body.dark .day-row.weekend .day-name      { color: #93c5fd; }

body.dark .shift-item.ps1  { background: #052e16; border-color: #166534; }
body.dark .shift-item.ps2  { background: #431407; border-color: #92400e; }
body.dark .shift-item.oth  { background: #0c2a3e; border-color: #0369a1; }
body.dark .shift-item.otk  { background: #052e16; border-color: #15803d; }
body.dark .mshift.ps1      { background: #052e16; border-color: #166534; }
body.dark .mshift.ps2      { background: #431407; border-color: #92400e; }
body.dark .mshift.oth      { background: #0c2a3e; border-color: #0369a1; }
body.dark .mshift.otk      { background: #052e16; border-color: #15803d; }
body.dark .shift-hours      { background: rgba(255,255,255,.09); color: #94a3b8; }

body.dark .btn-icon:hover      { background: rgba(255,255,255,.07); }
body.dark .btn-icon.del:hover  { background: #450a0a; color: #fca5a5; }
body.dark .btn-close:hover     { background: #334155; }

body.dark .field input,
body.dark .field select,
body.dark .summary-person-wrap select { background: #0f172a; color: var(--text); }
body.dark .field input::placeholder { color: #475569; }

body.dark .badge.admin    { background: #422006; color: #fbbf24; }
body.dark .badge.zarzad   { background: #431407; color: #fb923c; }
body.dark .badge.moderator{ background: #052e16; color: #4ade80; }
body.dark .badge.ksiegowa { background: #2e1065; color: #c084fc; }
body.dark .badge.user     { background: #0c2240; color: #38bdf8; }
body.dark .badge.loc-z { background: #3b0764; color: #d946ef; }

body.dark .alert.error   { background: #450a0a; border-color: #991b1b; color: #fca5a5; }
body.dark .alert.success { background: #052e16; border-color: #166534; color: #86efac; }
body.dark .no-shifts { color: #334155; }

body.dark .sum-block-neutral,
body.dark .sum-block-total  { background: var(--card); border-color: var(--border); }
body.dark .sum-block-neutral .sum-stat-val { color: #e2e8f0; }
body.dark .sum-block-total   .sum-stat-val { color: #86efac; }
body.dark .sum-block-total  .sum-stat.is-earn .sum-stat-val { color: #86efac; }

body.dark .sum-block-hormon { background: #3b1208; border-color: #b45309; }
body.dark .sum-block-hormon .sum-block-lbl { color: #fdba74; }
body.dark .sum-block-hormon .sum-stat-val  { color: #fb923c; }
body.dark .sum-block-hormon .sum-stat.is-earn .sum-stat-val { color: #f97316; }

body.dark .sum-block-ksi { background: #052e16; border-color: #22c55e; }
body.dark .sum-block-ksi .sum-block-lbl { color: #86efac; }
body.dark .sum-block-ksi .sum-stat-val  { color: #4ade80; }
body.dark .sum-block-ksi .sum-stat.is-earn .sum-stat-val { color: #86efac; }

body.dark #sum-table tbody tr td                      { border-top-color: #2d3f55; }
body.dark #sum-table tbody tr:nth-child(even):not(.weekend) { background: #162032; }
body.dark #sum-table tbody tr.weekend                 { background: #172554; }
body.dark #sum-table tbody tr.weekend td:first-child  { color: #93c5fd; }

body.dark .cal-cell              { background: #1e293b; border-color: #334155; }
body.dark .cal-cell.cal-empty    { background: #162032; }
body.dark .cal-cell.weekend      { background: #172554; }
body.dark .cal-cell.weekend .cg-day-num { color: #93c5fd; }
body.dark .cg-shift.ps1          { background: #052e16; }
body.dark .cg-shift.ps2          { background: #431407; }
body.dark .cg-ps                 { color: #94a3b8; }

body.dark .hours-table tr td     { background: #1e293b; }
body.dark .hours-table select    { background: #0f172a; color: var(--text); border-color: var(--border); }

body.dark #btn-cal-toggle {
  background: #1e293b;
  border-color: #334155;
  color: #e2e8f0;
}
body.dark #btn-cal-toggle:hover { background: #172554; border-color: var(--blue); color: #93c5fd; }

body.dark .subnav { background: #0d1526; border-bottom-color: rgba(255,255,255,.04); }
body.dark .login-card { background: #1e293b; }
body.dark .table-scroll-wrap { border-color: var(--border); }

/* Przycisk dark mode w headerze */
.btn-dark {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: var(--r);
  transition: background .15s;
  color: rgba(255,255,255,.7);
}
.btn-dark:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ── RESPONSIVE — TABLET (≤ 900px) ─────────────────────────────── */

@media (max-width: 900px) {
  .subnav-btn { padding: 9px 12px; font-size: 12px; }
  .location-tabs { gap: 1px; }
  .tab { padding: 6px 12px; font-size: 12px; }
  .user-name { display: none; }
}

/* ── RESPONSIVE — MOBILE (≤ 600px) ─────────────────────────────── */

@media (max-width: 600px) {

  /* Karta logowania */
  .login-card {
    width: calc(100vw - 32px);
    padding: 32px 20px 28px;
  }

  /* Header — 3 rzędy na mobile */
  .app-header {
    height: auto;
    flex-wrap: wrap;
    padding: 6px 12px;
    gap: 4px;
    row-gap: 0;
  }
  /* Rząd 1: brand (lewo) + user controls (prawo) */
  .header-brand { font-size: 14px; order: 1; padding: 4px 4px; }
  .header-user  { margin-left: auto; order: 2; gap: 6px; }
  .user-name    { display: none; }   /* za mało miejsca na mobile */

  /* Rząd 2: zakładki lokalizacji — pełna szerokość */
  .location-tabs {
    order: 10;
    width: 100%;
    justify-content: stretch;
    gap: 4px;
    padding: 4px 0;
  }
  .location-tabs .tab {
    flex: 1;
    text-align: center;
    padding: 5px 4px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* Rząd 3: subnav — przewijany poziomo */
  .subnav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding: 0 8px;
    scrollbar-width: none;
  }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav-btn {
    white-space: nowrap;
    padding: 8px 10px;
    font-size: 12px;
  }
  .density-ctrl { display: none; }

  /* Nawigacja miesiąca — mobile: 2 wiersze */
  .month-nav {
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px 8px;
  }
  .mnav-month {
    width: 100%;
    justify-content: center;
  }
  .mnav-controls {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
  .month-label { font-size: 16px; min-width: 0; }

  /* Tabela grafiku */
  .schedule-wrap { padding: 0 8px 40px; }
  .schedule-table thead th { padding: 8px 10px; font-size: 10px; }
  .schedule-table thead th:first-child { width: 62px; }

  .day-cell { padding: 8px 8px; }
  .day-num  { font-size: 18px; }
  .day-name { font-size: 9px; }

  .shifts-cell { padding: 7px 8px; }
  .shifts-list { gap: 4px; }

  /* Shift item — składa się na 2 linie */
  .shift-item {
    flex-wrap: wrap;
    padding: 5px 8px;
    font-size: 12px;
    gap: 4px;
  }
  .shift-person { flex: 1 1 100px; }
  .shift-time   { font-size: 11px; }
  .shift-hours  { font-size: 10px; }
  .shift-actions {
    width: 100%;
    justify-content: flex-end;
    margin-left: 0;
    margin-top: 2px;
  }
  .btn-add { font-size: 11px; padding: 4px 8px; }

  /* Summary */
  .summary-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 12px 8px;
    gap: 10px;
  }
  .summary-person-wrap { flex-direction: column; align-items: stretch; }
  .summary-person-wrap select { width: 100%; min-width: unset; }
  .summary-toolbar .month-nav { padding: 0; justify-content: flex-start; }

  .sum-totals { margin: 0 8px 10px; gap: 8px; }
  .sum-block  { min-width: 120px; padding: 8px 10px; flex: 1 1 calc(50% - 4px); }
  .sum-stat-val { font-size: 17px; }

  /* Tabele danych — wrapper już obsługuje scroll */
  .table-scroll-wrap { margin: 0 8px; }
  .view-header { padding: 14px 12px 10px; flex-wrap: wrap; gap: 8px; }
  .view-header h2 { font-size: 16px; }

  /* Breakdown month nav */
  #view-breakdown .month-nav { padding: 10px 12px 8px; }

  /* Settings card */
  .settings-card { margin: 0 12px; padding: 20px 16px; }
  .hours-card    { margin: 16px 12px 0; }
  .hours-day     { width: 90px; font-size: 12px; }
  .hours-tab     { padding: 6px 12px; font-size: 12px; }
  .hours-table select { min-width: 74px; font-size: 12px; }
  .form-row { flex-direction: column; }
  .field.sm { flex: 1; }

  /* Modale — wyjeżdżają od dołu */
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal {
    border-radius: 16px 16px 0 0;
    max-width: 100%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
  }
  .modal.sm {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
  }
  .modal-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
  }
  .modal-header { padding: 14px 16px 12px; flex-shrink: 0; }

  /* Przyciski w formularzu */
  .form-actions { flex-direction: column; }
  .form-actions .btn { justify-content: center; }
}

/* ── AUDIT LOG ──────────────────────────────────────────────────── */

.audit-ts {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  white-space: nowrap;
  color: var(--muted);
}
.audit-details {
  font-size: 12px;
  word-break: break-word;
}
tr.audit-danger td { background: #fff5f5; }
tr.audit-warn   td { background: #fffbeb; }
body.dark tr.audit-danger td { background: #3b0a0a; }
body.dark tr.audit-warn   td { background: #3b2800; }

/* nagłówek zakładek z tabelą (Prowadzący, Użytkownicy) */
.stab-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.stab-table-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}

/* desktop: karta historii na pełną szerokość */
#stab-historia .settings-card {
  padding: 16px;
  max-width: none;
  margin: 0;
}
#stab-historia .table-scroll-wrap { overflow-x: auto; }
#stab-historia .data-table { width: 100%; table-layout: auto; }

/* mobile: 2-liniowe karty zamiast tabeli */
@media (max-width: 640px) {
  #stab-historia .table-scroll-wrap { overflow: visible; }
  #stab-historia .data-table,
  #stab-historia .data-table tbody { display: block; }
  #stab-historia .data-table thead { display: none; }
  #stab-historia .data-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 8px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--border);
  }
  /* wymuszony łamanie wiersza między linią 1 a linią 2 */
  #stab-historia .data-table tr::after {
    content: '';
    flex: 0 0 100%;
    order: 3;
    height: 2px;
  }
  #stab-historia .data-table td { border: none; padding: 0; }
  /* linia 1: użytkownik */
  #stab-historia .data-table td:nth-child(2) {
    order: 1; flex: 0 0 auto; font-size: 13px; font-weight: 600;
  }
  /* linia 1: zdarzenie */
  #stab-historia .data-table td:nth-child(3) {
    order: 2; flex: 1 1 auto; font-size: 13px;
  }
  /* linia 2: timestamp */
  #stab-historia .data-table td.audit-ts {
    order: 4; flex: 0 0 auto;
    font-size: 11px; color: var(--muted);
  }
  /* linia 2: szczegóły */
  #stab-historia .data-table td.audit-details {
    order: 5; flex: 1 1 auto;
    font-size: 11px; color: var(--muted); max-width: none;
  }
  /* kolory wierszy na tr (bo td tracą tło przy flex) */
  #stab-historia tr.audit-danger { background: #fff5f5; }
  #stab-historia tr.audit-warn   { background: #fffbeb; }
  body.dark #stab-historia tr.audit-danger { background: #3b0a0a; }
  body.dark #stab-historia tr.audit-warn   { background: #3b2800; }
}

/* ── Color picker (prowadzący) ──────────────────────────────────── */

.color-picker-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.pc-swatch {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .1s, border-color .1s;
  flex-shrink: 0;
}
.pc-swatch:hover { transform: scale(1.18); border-color: rgba(0,0,0,.3); }
.pc-swatch.pc-active { border-color: #000; transform: scale(1.15); box-shadow: 0 0 0 2px #fff inset; }
.pc-none {
  background: var(--bg) !important;
  border: 2px dashed var(--border) !important;
  color: var(--muted);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pc-swatch { position: relative; margin-bottom: 14px; }

.pc-count {
  position: absolute;
  bottom: -13px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  color: var(--text);
  letter-spacing: .02em;
}

.person-color-chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  vertical-align: middle;
  margin-left: 4px;
}

.shift-person {
  transition: background .2s, color .2s;
}

/* ── Shift slot buttons ─────────────────────────────────────────── */

.slot-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.slot-btn {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.slot-btn:hover { background: var(--blue-l); border-color: var(--blue); }
.slot-btn.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  font-weight: 700;
}
body.dark .slot-btn { background: #1e293b; border-color: #334155; }
body.dark .slot-btn:hover { background: #1e3a5f; border-color: var(--blue); }
body.dark .slot-btn.active { background: var(--blue); color: #fff; }

/* Łączenie wizualne kolejnych dyżurów */
.mshift.chain-top    { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: none; margin-bottom: 0; }
.mshift.chain-bottom { border-top-left-radius: 0; border-top-right-radius: 0; margin-top: 0; }

/* ── TODAY Dashboard ────────────────────────────────────────────── */

.today-header {
  padding: 18px 20px 6px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.today-header h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
}

.today-day-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.day-toggle-btn {
  padding: 5px 18px;
  font-size: 0.85rem;
  font-weight: 500;
  border: none;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.day-toggle-btn:hover { background: var(--blue-l); color: var(--blue); }
.day-toggle-btn.active { background: var(--blue); color: #fff; font-weight: 700; }
body.dark .day-toggle-btn { background: #1e293b; color: rgba(255,255,255,.5); }
body.dark .day-toggle-btn.active { background: var(--blue); color: #fff; }

.today-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 12px 20px 24px;
}
@media (max-width: 760px) {
  .today-grid { grid-template-columns: 1fr; }
}

.today-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.today-box-closed {
  opacity: 0.55;
  background: var(--bg);
}

.today-box-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--blue);
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
  margin-bottom: 2px;
}

.today-hours {
  font-size: 0.88rem;
  color: var(--muted);
  font-weight: 500;
}
.today-closed {
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
}

.today-shifts { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }

.today-shift-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  background: var(--bg);
  border-radius: 6px;
  padding: 5px 8px;
  border: 1px solid var(--border);
}
.today-shift-item.ps1 { background: var(--green-l); border-color: #a7f3d0; }
.today-shift-item.ps2 { background: var(--amber-l); border-color: #fde68a; }
.today-shift-item.oth { background: #e0f2fe; border-color: #7dd3fc; }
.today-shift-item.otk { background: #f0fdf4; border-color: #86efac; }
.today-shift-item.oth .today-shift-ps { background: #0284c7; }
.today-shift-item.otk .today-shift-ps { background: #16a34a; }

.today-shift-ps {
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 5px;
  letter-spacing: .03em;
  color: #fff;
  background: var(--blue);
}
.today-shift-item.ps1 .today-shift-ps { background: var(--green); }
.today-shift-item.ps2 .today-shift-ps { background: var(--amber); }

.today-shift-name { font-weight: 600; flex: 1; }
.today-shift-time {
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
  margin-left: auto;
}

body.dark .today-shift-item.ps1 { background: #052e16; border-color: #166534; }
body.dark .today-shift-item.ps2 { background: #431407; border-color: #92400e; }
body.dark .today-shift-item.oth { background: #0c2a3e; border-color: #0369a1; }
body.dark .today-shift-item.otk { background: #052e16; border-color: #15803d; }

.today-no-shifts {
  font-size: 0.83rem;
  color: var(--muted);
  font-style: italic;
  padding: 4px 0;
}

/* ── PRINT: Siatka osobista ─────────────────────────────────────── */

#print-calendar { display: none; }

@media print {
  body > *:not(#print-calendar) { display: none !important; }
  #print-calendar {
    display: block !important;
    padding: 12mm 14mm;
    font-family: 'Segoe UI', Arial, sans-serif;
  }
  #print-calendar h2 {
    margin: 0 0 10px;
    font-size: 14pt;
    font-weight: 700;
  }
  #print-calendar table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9pt;
  }
  #print-calendar th,
  #print-calendar td {
    border: 1px solid #000;
    padding: 3px 6px;
    text-align: left;
    vertical-align: middle;
  }
  #print-calendar th {
    background: #dde3ec;
    font-weight: 700;
  }
  #print-calendar tr:nth-child(even) td { background: #f5f7fa; }
}

/* ── Schedule filter dropdown ────────────────────────────────────────────── */

.sched-filter-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  max-width: 280px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow2);
  z-index: 200;
  padding: 4px 0;
}

.sf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

.sf-clear {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 12px;
  cursor: pointer;
  color: var(--muted);
  transition: color .15s, border-color .15s;
}
.sf-clear:hover { color: var(--red); border-color: var(--red); }

.sf-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: 13px;
  transition: background .1s;
}
.sf-row:hover { background: var(--bg); }
.sf-row input[type=checkbox] { cursor: pointer; accent-color: var(--blue); }

.sf-empty {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
}

#btn-sched-filter.filter-active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.filter-warning {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  border-radius: var(--r);
  padding: 7px 14px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  margin: 6px 0 2px;
  text-align: center;
}

/* dark mode */
body.dark .sched-filter-panel {
  background: var(--slate);
  border-color: #334155;
}
body.dark .sf-header { border-color: #334155; }
body.dark .sf-row:hover { background: #0f172a; }
body.dark .sf-clear { color: #94a3b8; border-color: #475569; }
body.dark .sf-clear:hover { color: #f87171; border-color: #f87171; }
body.dark .filter-warning {
  background: #451a03;
  color: #fcd34d;
  border-color: #78350f;
}

/* ── Closed day ──────────────────────────────────────────────────────────── */

.day-row.day-closed .day-cell,
.day-row.day-closed .shifts-cell {
  opacity: .55;
}
.cal-cell.day-closed {
  opacity: .5;
}

.btn-closed {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 3px 10px;
  font-size: 12px;
  background: none;
  border: 1px dashed #94a3b8;
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.btn-closed:hover { color: var(--blue); border-color: var(--blue); }

.cg-add.cg-closed {
  font-size: 10px;
  color: var(--muted);
  border: 1px dashed #94a3b8;
  background: none;
  opacity: .7;
}
.cg-add.cg-closed:hover { color: var(--blue); border-color: var(--blue); opacity: 1; }

.closed-label { color: var(--muted); font-style: italic; }

body.dark .btn-closed  { border-color: #475569; color: #64748b; }
body.dark .btn-closed:hover { color: #93c5fd; border-color: #93c5fd; }
body.dark .cg-add.cg-closed { border-color: #475569; color: #64748b; }
body.dark .cg-add.cg-closed:hover { color: #93c5fd; border-color: #93c5fd; }

/* ── Modal day nav buttons (inside form-actions) ──────────────────── */

.modal-day-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 6px;
}

/* Środkowe przyciski Zapisz/Anuluj wypełniają dostępną przestrzeń */
.modal-day-actions .btn-primary,
.modal-day-actions .btn-ghost {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  white-space: nowrap;
}

/* Chip nawigacyjny z datą */
.btn-nav-day {
  flex-shrink: 0;
  padding: 6px 10px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-nav-day:hover:not(:disabled) {
  background: var(--blue-l);
  border-color: var(--blue);
  color: var(--blue);
}
.btn-nav-day:disabled { opacity: .25; cursor: not-allowed; }

body.dark .btn-nav-day { background: #1e293b; border-color: #334155; color: #64748b; }
body.dark .btn-nav-day:hover:not(:disabled) { background: #1e3a5f; border-color: var(--blue); color: #93c5fd; }

/* ── Hours: shift rows ─────────────────────────────────────────────── */

.hours-table input[type="time"].hrs-from,
.hours-table input[type="time"].hrs-to {
  padding: 5px 6px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  width: 90px;
  cursor: pointer;
  transition: border-color .15s;
}
.hours-table input[type="time"]:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* Hours: opening row (index 0 — the master time range) */
.hours-opening-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.hours-opening-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  margin-right: 2px;
  letter-spacing: .01em;
}

/* Hours: closed state */
.hours-closed-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hours-closed-label {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

/* Hours: sub-shifts section (below opening row) */
.hours-subshifts {
  padding-left: 10px;
  border-left: 2px solid var(--border);
  margin-top: 5px;
}

.hours-shifts-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}

.hours-shift-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-add-slot {
  background: none;
  border: 1px dashed var(--border);
  border-radius: var(--r);
  color: var(--muted);
  font-size: 12px;
  padding: 3px 10px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  margin-top: 2px;
}
.btn-add-slot:hover { color: var(--blue); border-color: var(--blue); }

/* Hours: location name editing */

.hours-loc-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.hours-loc-name-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}

.hours-loc-name-edit {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.hours-loc-name-input {
  padding: 5px 8px;
  border: 1.5px solid var(--blue);
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 600;
  width: 180px;
  background: var(--card);
  color: var(--text);
}
.hours-loc-name-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}

body.dark .hours-loc-name-val           { color: #e2e8f0; }
body.dark .hours-table input[type="time"] { background: #0f172a; color: var(--text); border-color: var(--border); }
body.dark .btn-add-slot                 { border-color: #334155; color: #64748b; }
body.dark .btn-add-slot:hover           { color: #93c5fd; border-color: #93c5fd; }
body.dark .hours-opening-label         { color: #cbd5e1; }
body.dark .hours-subshifts             { border-color: #334155; }

/* ── Minimalna obsada ───────────────────────────────────────────── */

.ms-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}
.ms-rows { margin-bottom: 4px; }
.ms-ps {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  min-width: 54px;
}
.ms-allday {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  white-space: nowrap;
}
.ms-row input[type="time"] {
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--text);
  width: 88px;
}
.ms-empty {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  display: block;
  padding: 2px 0 4px;
}
body.dark .ms-ps,
body.dark .ms-row input[type="time"] { background: #0f172a; color: var(--text); border-color: var(--border); }

/* ── Braki w obsadzie ───────────────────────────────────────────── */

/* Lista — czerwona obwódka + ikona ostrzeżenia */
.day-row.day-gap > td:first-child {
  border-left: 3px solid #ef4444;
  background: #fff5f5;
}
.day-gap-icon {
  font-size: 11px;
  color: #ef4444;
  line-height: 1;
  margin-top: 2px;
}

/* Siatka — czerwona ramka */
.cal-cell.day-gap {
  outline: 2px solid #ef4444;
  outline-offset: -2px;
}
.cg-gap-icon {
  font-size: 10px;
  color: #ef4444;
  margin-left: 3px;
}

/* Profil sezonowy — siatka miesięcy */
.season-months-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px 8px;
}
.season-month-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  transition: background .15s;
}
.season-month-label:hover { background: var(--bg-hover, #f1f5f9); }
.season-month-label input { cursor: pointer; }
body.dark .season-month-label { background: #1e293b; }
body.dark .season-month-label:hover { background: #334155; }

/* Przycisk ⚠ Braki */
.gaps-btn { color: #dc2626 !important; border-color: #fca5a5 !important; }
.gaps-btn:hover { background: #fef2f2 !important; }

/* Panel z listą braków */
.gaps-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 200;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow2);
  min-width: 280px;
  max-width: 380px;
  max-height: 420px;
  overflow-y: auto;
}
.gap-item {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
}
.gap-item:last-child { border-bottom: none; }
.gap-item-link {
  cursor: pointer;
  transition: background .15s;
}
.gap-item-link:hover { background: #fef2f2; }
.gap-date { font-weight: 700; font-size: 13px; color: var(--navy); margin-bottom: 3px; }
.gap-arrow { font-size: 11px; opacity: .55; margin-left: 4px; }
.gap-req  { font-size: 12px; color: #dc2626; padding-left: 4px; }

/* Flash po kliknięciu w brak */
@keyframes dayFlash {
  0%   { background: #fee2e2; }
  60%  { background: #fecaca; }
  100% { background: transparent; }
}
.day-jump-flash { animation: dayFlash 1.5s ease-out forwards; }

/* Dark mode */
body.dark .day-row.day-gap > td:first-child { background: #2d1515; border-left-color: #f87171; }
body.dark .day-gap-icon  { color: #f87171; }
body.dark .cal-cell.day-gap { outline-color: #f87171; }
body.dark .cg-gap-icon   { color: #f87171; }
body.dark .gaps-btn { color: #f87171 !important; border-color: #7f1d1d !important; }
body.dark .gap-date { color: #e2e8f0; }
body.dark .gap-req  { color: #f87171; }
body.dark .gap-item-link:hover { background: #2d1515; }
body.dark .day-jump-flash { animation: none; background: #3b1212 !important; transition: background 1.5s ease-out; }

/* ── Wybór motywu (Profil → Wygląd) ────────────────────────── */
.theme-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: 10px;
  min-width: 130px;
  transition: border-color .15s, background .15s;
  background: var(--bg-card);
}
.theme-option:has(input:checked) {
  border-color: var(--blue);
  background: #eff6ff;
}
body.dark .theme-option:has(input:checked) { background: #1e3a5f; }
.theme-option input[type="radio"] { display: none; }
.theme-preview {
  display: flex;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
}
.theme-swatch {
  width: 18px;
  height: 18px;
  border-radius: 4px;
}
.theme-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* ── Zakładki Ustawień ─────────────────────────────────────── */

.settings-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--border);
  flex-wrap: wrap;
}
.settings-tab {
  padding: 8px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
  border-radius: 4px 4px 0 0;
}
.settings-tab:hover { color: var(--text); }
.settings-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
body.dark .settings-tab.active { color: #93c5fd; border-bottom-color: #93c5fd; }
@media (max-width: 480px) {
  .settings-tab { padding: 7px 11px; font-size: 12px; }
}

/* ── Motyw monochromatyczny (body.mono) ─────────────────────── */

/* Dyżury — lista */
body.mono .shift-item.ps1,
body.mono .shift-item.ps2 {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
body.mono .ps1 .ps-tag,
body.mono .ps2 .ps-tag {
  background: #64748b !important;
  color: #fff !important;
}
/* Dyżury — modal */
body.mono .mshift.ps1,
body.mono .mshift.ps2 {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
/* Dyżury — siatka */
body.mono .cg-shift.ps1,
body.mono .cg-shift.ps2 {
  background: var(--bg) !important;
}
/* Dzisiaj */
body.mono .today-shift-item.ps1,
body.mono .today-shift-item.ps2 {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
body.mono .today-shift-item.ps1 .today-shift-ps,
body.mono .today-shift-item.ps2 .today-shift-ps {
  background: #64748b !important;
}
/* Kolory prowadzących (inline style override) */
body.mono .cg-name {
  color: var(--text) !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
body.mono .shift-person {
  color: var(--text) !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 1px 0 !important;
}
body.mono .person-color-chip {
  background: #e2e8f0 !important;
  color: #334155 !important;
}
body.dark.mono .person-color-chip {
  background: #334155 !important;
  color: #e2e8f0 !important;
}
/* Bloki podsumowania */
body.mono .sum-block-hormon {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
body.mono .sum-block-hormon .sum-block-lbl { color: var(--muted) !important; }
body.mono .sum-block-ksi {
  background: var(--card) !important;
  border-color: var(--border) !important;
}
body.mono .sum-block-ksi .sum-block-lbl { color: var(--muted) !important; }
/* Tabela BD — kolumny PS */
body.mono .bd-table .cell-ps1,
body.mono .bd-table .cell-ps2,
body.mono .bd-table tfoot .cell-ps1,
body.mono .bd-table tfoot .cell-ps2 {
  color: var(--text) !important;
}
/* Kolor dzisiaj w liście — zostawiamy lekkie tło, tylko bez zieleni/bursztynu */
body.mono .day-row.today > td { background: #f8fafc; }
body.dark.mono .day-row.today > td { background: #1e293b; }

/* ── Extra Work (Prace dodatkowe) ──────────────────────────── */

.ew-filter-bar {
  display: flex;
  gap: 4px;
  margin: 0 0 4px;
  padding: 8px 20px 12px;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .ew-filter-bar { padding: 8px 12px 12px; }
}
.ew-tab {
  padding: 6px 14px;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  background: var(--bg);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
}
.ew-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.ew-tab:hover:not(.active) { border-color: var(--blue); color: var(--blue); }

.ew-table td, .ew-table th { font-size: 13px; }
.ew-td-date { white-space: nowrap; min-width: 90px; }
.ew-td-desc { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ew-td-actions { white-space: nowrap; }
.ew-td-person { font-weight: 600; white-space: nowrap; }
.ew-row-approved { opacity: .65; }

/* Sekcja prac dodatkowych w Podsumowaniu */
#sum-ew-section { margin-top: 28px; }
#sum-ew-section .sum-ew-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sum-ew-heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border);
}
.sum-ew-table td small { display: block; color: var(--muted); font-size: 11px; line-height: 1.4; }

/* ── Zestawienie ──────────────────────────────────────────────────────── */
.zest-table { width: 100%; }
.zest-table td.center { text-align: center; }
.zest-table .zest-total { background: var(--bg-alt); }
.zest-sum-row td {
  background: var(--bg-alt);
  border-top: 2px solid var(--border);
  padding: 10px 16px;
  font-size: 13px;
}
body.dark .zest-sum-row td { background: #1e293b; }
body.dark .zest-table .zest-total { background: #1e293b; }
.ew-total-row td { font-size: 13px; border-top: 2px solid var(--border) !important; }

.ew-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  white-space: nowrap;
}
.ew-badge.approved { background: #dcfce7; color: #166534; }
.ew-badge.pending  { background: #fef9c3; color: #854d0e; }

.ew-type-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}
.ew-type-badge.type-zawody   { background: #dbeafe; border-color: #93c5fd; color: #1e40af; }
.ew-type-badge.type-szkolenie{ background: #dcfce7; border-color: #86efac; color: #166534; }
.ew-type-badge.type-event    { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
.ew-type-badge.type-grupa    { background: #f3e8ff; border-color: #c084fc; color: #6b21a8; }
.ew-type-badge.type-inne     { background: #f3f4f6; border-color: #d1d5db; color: #4b5563; }
body.dark .ew-type-badge.type-zawody   { background: #1e3a5f; border-color: #2563eb; color: #93c5fd; }
body.dark .ew-type-badge.type-szkolenie{ background: #14532d; border-color: #16a34a; color: #86efac; }
body.dark .ew-type-badge.type-event    { background: #451a03; border-color: #d97706; color: #fcd34d; }
body.dark .ew-type-badge.type-grupa    { background: #3b0764; border-color: #9333ea; color: #e9d5ff; }
body.dark .ew-type-badge.type-inne     { background: #1e293b; border-color: #475569; color: #94a3b8; }

.ew-payer { font-size: 12px; font-weight: 700; }
.ew-payer.ksi     { color: #1d4ed8; }
.ew-payer.hormon  { color: #7e22ce; }
.ew-payer.empty   { color: var(--muted); font-weight: 400; }

.ew-collision-warn {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: var(--r);
  color: #92400e;
  padding: 8px 12px;
  font-size: 13px;
  margin-bottom: 12px;
}

.btn-icon.ok {
  color: #16a34a;
}
.btn-icon.ok:hover { color: #166534; }

.info-banner {
  background: var(--blue-l);
  border: 1px solid var(--blue);
  border-radius: var(--r);
  color: var(--blue);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}

body.dark .ew-badge.approved { background: #14532d; color: #86efac; }
body.dark .ew-badge.pending  { background: #422006; color: #fde68a; }
body.dark .ew-type-badge     { background: #1e293b; border-color: #334155; }
body.dark .ew-collision-warn { background: #422006; border-color: #b45309; color: #fde68a; }
body.dark .info-banner       { background: #1e3a5f; border-color: #3b82f6; color: #93c5fd; }

/* ── Retroactive lock icon ──────────────────────────────────── */
.shift-retro-lock {
  font-size: 12px;
  opacity: .5;
  cursor: default;
  margin-left: 4px;
}

/* ── Settings: access toggles ───────────────────────────────── */
.toggle-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  padding: 8px 0;
}
.toggle-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--blue); }
.toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.toggle-hint {
  font-size: 12px;
  color: var(--muted);
  padding-left: 24px;
}