*, *::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;
}
.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;
}

.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; }

.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; }

.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.user   { background: #e0f2fe; color: #075985; }
.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 90px; }

.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-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);
}
.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;
  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 .shift-person { flex: 1; font-weight: 600; }
.mshift .shift-time   { color: var(--muted); font-size: 12px; }

/* ── 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);
}

.sum-totals {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 20px 12px;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.sum-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 90px;
  padding: 6px 14px;
  border-radius: var(--r);
  background: var(--bg);
}
.sum-stat-val  { font-size: 22px; font-weight: 700; color: var(--navy); line-height: 1.1; }
.sum-stat-lbl  { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; }
.sum-stat.green { background: var(--green-l); }
.sum-stat.green .sum-stat-val { color: var(--green); }
.sum-stat.blue  { background: var(--blue-l); }
.sum-stat.blue  .sum-stat-val { color: var(--blue); }

/* 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      { padding: 8px 12px; gap: 8px; }
body.compact .sum-stat        { min-width: 70px; padding: 4px 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: PS karty ──────────────────────────────────────────── */

.sum-stat.ps1-card { background: var(--green-l); }
.sum-stat.ps1-card .sum-stat-val { color: var(--green); }
.sum-stat.ps2-card { background: var(--amber-l); }
.sum-stat.ps2-card .sum-stat-val { color: var(--amber); }
.sum-stat.earn-card { background: #f0fdf4; }
.sum-stat.earn-card .sum-stat-val { color: #166534; font-size: 18px; }

/* ── 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-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 .mshift.ps1      { background: #052e16; border-color: #166534; }
body.dark .mshift.ps2      { background: #431407; border-color: #92400e; }
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.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-stat.earn-card { background: #052e16; }
body.dark .sum-stat.earn-card .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 */
  .month-nav { padding: 10px 12px 8px; gap: 10px; }
  .month-label { font-size: 16px; min-width: 160px; }

  /* 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; padding: 10px 10px; gap: 8px; }
  .sum-stat { min-width: 78px; padding: 5px 10px; }
  .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;
  }
  .modal.sm {
    max-width: 100%;
    border-radius: 16px 16px 0 0;
  }
  .modal-body { padding: 16px; }
  .modal-header { padding: 14px 16px 12px; }

  /* 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;
  max-width: 420px;
  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; }

#view-audit .view-header { flex-wrap: wrap; gap: 10px; }
#view-audit .view-header select {
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--card);
  color: var(--text);
  font-size: 13px;
}

/* ── 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; }

.pc-count {
  position: absolute;
  bottom: 1px;
  right: 2px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 0 2px rgba(0,0,0,.5);
}

.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-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; }

.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; }