:root {
  color-scheme: light;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #1e293b;
  --muted: #64748b;
  --line: #dbe2ea;
  --head: #0f766e;
  --head-dark: #115e59;
  --ok: #15803d;
  --ok-bg: #dcfce7;
  --warn: #a16207;
  --warn-bg: #fef3c7;
  --bad: #b91c1c;
  --bad-bg: #fee2e2;
  --table-line: #cbd5e1;
  --table-row-alt: #f8fafc;
  --table-row-hover: #edf7f5;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 14px;
}

header {
  background: var(--head-dark);
  color: #ffffff;
  padding: 18px 28px;
}

h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0;
}

main {
  padding: 22px 28px 40px;
}

.app-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 0 28px;
  padding: 14px 0 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.creator-credit strong {
  color: var(--head-dark);
  font-weight: 650;
}

.footer-product {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}

.footer-product > strong {
  color: var(--ink);
  font-weight: 600;
}

.app-version {
  color: var(--muted);
  white-space: nowrap;
}

section {
  margin-bottom: 22px;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 0 4px;
}

/* Dwa moduły w jednym programie (1.4.0): Premie i Grafiki. Przełącznik nad
   menu; każdy moduł ma swoje pozycje i swój pasek kontekstu (miesiąc dla
   premii, kwartał dla grafików). */
.menu-moduly {
  display: flex;
  gap: 6px;
  margin-right: auto;
  margin-left: 24px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.modul-button {
  border: 0;
  border-radius: 999px;
  padding: 7px 20px;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
}

.modul-button:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.modul-button.active {
  background: #fff;
  color: var(--head-dark);
}

/* Pasek miesiąca dotyczy tylko premii; w grafikach planuje się kwartałami. */
body[data-modul="grafiki"] #loadedContext {
  display: none;
}

/* Menu dwupoziomowe (1.4.0): pasek sześciu pozycji głównych, pod nim ekrany
   wybranej grupy. Jeden ekran w grupie = pasek ekranów się nie pokazuje. */
.menu-glowne {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 16px 0 0;
  padding: 4px;
  border-radius: 10px;
  background: var(--bg-alt, #eef2f5);
}

.grupa-button {
  border: 0;
  border-radius: 8px;
  padding: 9px 18px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.grupa-button:hover {
  background: rgba(15, 118, 110, 0.08);
  color: var(--head-dark);
}

.grupa-button.active {
  background: var(--head);
  color: #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
}

.grupa-button.active .tab-licznik {
  background: #fff;
  color: var(--head-dark);
}

.menu-ekrany {
  margin: 0 0 18px;
}

/* Rozliczenie w trzech krokach (1.7.0): etykiety kroków w pasku ekranów. */
.tabs-kroki {
  align-items: center;
}

.krok-etykieta {
  margin: 0 4px 0 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.krok-etykieta:first-child {
  margin-left: 0;
}

.kontrola-sekcja {
  margin-bottom: 16px;
}

.kontrola-sekcja h3 {
  margin: 0 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--head-dark);
}

.kontrola-lista {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  font-size: 14px;
}

/* Wartości z automatu i wyjątki ręczne (1.7.0). */
.wartosc-automatu {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  justify-content: flex-end;
}

.wartosc-automatu .znak-wyjatku {
  color: var(--warn);
  font-weight: 700;
}

.wartosc-wyjatek {
  color: var(--warn);
  font-weight: 600;
}

.wyjatek-przycisk {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
}

td:hover .wyjatek-przycisk,
.wyjatek-przycisk:focus-visible {
  opacity: 1;
}

.wyjatek-przycisk:hover {
  border-color: var(--head);
  color: var(--head-dark);
}

body.rola-ksiegowa .wyjatek-przycisk {
  display: none;
}

/* Grafiki 1.5.0: stan grafiku, kontrola w trzech grupach, wskazanie komórki
   i wydruk arkusza na miesiąc. */
.schedule-stan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: 8px;
  background: var(--panel);
}

.schedule-stan[data-stan="do_kontroli"] { border-left-color: var(--warn); }
.schedule-stan[data-stan="zatwierdzony"] { border-left-color: var(--ok); }
.schedule-stan[data-stan="wydany"] { border-left-color: var(--head); }

.schedule-stan-glowa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.schedule-stan-etykieta {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.schedule-stan-glowa strong {
  font-size: 17px;
}

.schedule-stan-opis {
  font-size: 13px;
  color: var(--muted);
}

.schedule-stan-akcje {
  display: flex;
  align-items: center;
  gap: 8px;
}

.schedule-stan-uwaga {
  font-size: 12px;
  color: var(--warn);
}

.kontrola-grupa {
  margin-top: 12px;
}

.kontrola-grupa h3 {
  margin: 0 0 6px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kontrola-grupa.bledy h3 { color: var(--bad); }
.kontrola-grupa.decyzje h3 { color: var(--warn); }
.kontrola-grupa.ostrzezenia h3 { color: var(--muted); }

.kontrola-grupa ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.kontrola-grupa li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  border-left: 3px solid transparent;
  border-radius: 4px;
  background: var(--bg);
  font-size: 13px;
}

.kontrola-grupa li.bad { border-left-color: var(--bad); }
.kontrola-grupa li.warn { border-left-color: var(--warn); }

.kontrola-idz {
  flex: none;
  padding: 2px 10px;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--head-dark);
  cursor: pointer;
}

.kontrola-idz:hover {
  background: var(--head);
  color: #fff;
  border-color: var(--head);
}

.schedule-cell-wskazana {
  outline: 3px solid var(--warn);
  outline-offset: 1px;
  background: var(--warn-bg);
}

.schedule-wydruk-naglowek {
  display: none;
}

/* Wydruk grafiku (1.14.0): osobny kontener #scheduleWydruk budowany przy
   drukowaniu, jeden salon na stronie, kolumna na podpis i suma godzin. */
.schedule-wydruk {
  display: none;
}

/* Wydruk grafiku: od 1.19.0 wspólny kontener #wydruk (blok "Wydruki" na końcu pliku). */
@media print {
  @page {
    margin: 10mm;
  }
}

/* Zestawy dni tygodnia w regułach salonu (1.14.0). */
.schedule-weekday-set {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 0;
  padding: 6px 10px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
}

.schedule-weekday-set legend {
  padding: 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.schedule-weekday-set label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.schedule-check-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  align-self: end;
  padding-bottom: 8px;
}

/* Wybór miesiąca w pasku kontekstu (1.4.0): dostępny z każdego ekranu. */
.context-month-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.context-month-picker select {
  font: inherit;
  font-size: 18px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  cursor: pointer;
}

.context-month-picker select:hover,
.context-month-picker select:focus-visible {
  border-color: var(--head);
}

.tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 10px 0 18px;
  border-bottom: 1px solid var(--line);
}

/* Pasek ekranów pokazuje tylko wybrana grupa; grupa z jednym ekranem nie
   potrzebuje drugiego paska (atrybut hidden musi wygrać z display: flex). */
.tabs[hidden],
.tabs:has(.tab-button:only-child) {
  display: none !important;
}

.schedule-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--line);
  padding: 4px 0 16px;
}

.schedule-view-header[hidden] {
  display: none;
}

.schedule-view-header span {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 12px;
}

.schedule-view-header h2 {
  margin: 0;
  font-size: 20px;
}

.command-link {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 12px;
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
}

.command-link:hover {
  border-color: var(--head);
}

body.schedule-only .toolbar,
body.schedule-only #messages,
body.schedule-only #loadedContext,
body.schedule-only .tabs {
  display: none;
}

body.schedule-only main {
  padding-top: 18px;
}

.tab-button {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-color: transparent;
  border-bottom: 0;
  background: transparent;
  color: var(--muted);
}

.tab-button.active {
  background: var(--panel);
  border-color: var(--line);
  color: var(--head-dark);
  font-weight: 650;
  position: relative;
  top: 1px;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

button,
.file-label {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 6px;
  font: inherit;
  cursor: pointer;
}

button.primary {
  background: var(--head);
  color: #ffffff;
  border-color: var(--head);
}

button:hover,
.file-label:hover {
  border-color: var(--head);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

button:disabled:hover {
  border-color: var(--line);
}

input[type="file"] {
  display: none;
}

input[type="file"].visible-file-input {
  display: block;
  min-height: 42px;
  padding: 5px;
}

input[type="file"].visible-file-input::file-selector-button {
  min-height: 30px;
  margin-right: 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 5px 10px;
  background: #f8fafc;
  color: var(--ink);
  cursor: pointer;
}

input,
select {
  width: 100%;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 9px;
  color: var(--ink);
  background: #ffffff;
  font: inherit;
}

input[type="search"] {
  padding-right: 28px;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(15, 118, 110, 0.2);
  border-color: var(--head);
}

input[type="checkbox"] {
  width: 16px;
  min-height: 16px;
  accent-color: var(--head);
}

input[readonly] {
  background: #f1f5f9;
  color: var(--muted);
}

/* Komunikaty: poziomy info / ok / uwaga / blad, tło wg poziomu, przycisk zamknięcia. */
#messages {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 24px;
  margin-top: 6px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  background: #eef2f7;
}

#messages:empty,
#messages[data-type=""] {
  padding: 0;
  margin-top: 0;
  border: 0;
  background: transparent;
}

#messages[data-type="info"] {
  color: var(--ink);
  border-color: var(--line);
}

#messages[data-type="ok"] {
  color: var(--ok);
  border-color: #86d39b;
  background: var(--ok-bg);
}

#messages[data-type="uwaga"] {
  color: var(--warn);
  border-color: #facc15;
  background: var(--warn-bg);
  font-weight: 600;
}

#messages[data-type="blad"] {
  color: var(--bad);
  border-color: #fca5a5;
  background: var(--bad-bg);
  font-weight: 600;
}

#messages .message-text {
  flex: 1 1 auto;
}

#messages .message-secondary {
  flex: 1 1 100%;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

#messages .message-action {
  min-height: 28px;
  border-color: currentColor;
  color: inherit;
  background: #ffffff;
  font-weight: 700;
}

#messages .message-close {
  min-height: 24px;
  min-width: 24px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  opacity: 0.7;
}

#messages .message-close:hover {
  opacity: 1;
}

/* Usuwanie drugim kliknięciem: uzbrojony przycisk. */
button.armed,
button.danger.armed {
  border-color: var(--bad);
  background: var(--bad-bg);
  color: var(--bad);
  font-weight: 700;
}

.context-discard-button {
  min-height: 26px;
  border-color: var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  background: #ffffff;
  color: var(--bad);
  font-size: 12px;
  font-weight: 650;
}

.context-discard-button:hover:not(:disabled) {
  border-color: var(--bad);
  background: var(--bad-bg);
}

.month-integrity {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.month-integrity.ok {
  color: var(--ok);
}

.month-integrity.bad {
  color: var(--bad);
  text-transform: uppercase;
}

/* Wersja serwerowa: relikty biurkowe ukryte. */
body.server-mode [data-tab="aktualizacje"],
body.server-mode [data-tab-panel="aktualizacje"],
body.server-mode [data-tab="json"],
body.server-mode [data-tab-panel="json"],
body.server-mode .toolbar .file-label,
body.server-mode #exportJson,
body.server-mode [data-help-desktop-only] {
  display: none !important;
}

.loaded-context {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  gap: 6px;
  margin: 8px 0 16px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--head);
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.loaded-context[data-state="dirty"] {
  border-left-color: var(--warn);
}

.loaded-context[data-state="ok"] {
  border-left-color: var(--ok);
  background: #f8fff9;
}

.loaded-context[data-state="warn"],
.loaded-context[data-state="bad"] {
  border-left-color: var(--bad);
}

.loaded-context-main {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}

.loaded-context-main span {
  color: var(--muted);
  font-size: 12px;
}

.loaded-context-main strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 700;
}

.loaded-context-details {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
}

.context-pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  background: #f8fafc;
}

.context-pill.warn {
  border-color: #facc15;
  background: var(--warn-bg);
  color: var(--warn);
  font-weight: 650;
}

.context-pill.ok {
  border-color: #86d39b;
  background: var(--ok-bg);
  color: var(--ok);
  font-weight: 650;
}

.context-save-button {
  min-height: 26px;
  border-color: #eab308;
  border-radius: 999px;
  padding: 3px 10px;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 12px;
  font-weight: 700;
}

.context-save-button:hover:not(:disabled) {
  border-color: var(--warn);
  background: #fde68a;
}

.context-save-button:focus-visible {
  outline: 2px solid rgba(161, 98, 7, 0.28);
  outline-offset: 2px;
}

.loaded-context-warning {
  color: var(--bad);
  font-size: 13px;
  font-weight: 650;
}

.summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.result-layout {
  display: grid;
  gap: 18px;
}

.config-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(360px, 1fr));
  gap: 18px;
}

.config-panel {
  align-self: start;
}

.config-panel h2 {
  display: flex;
  align-items: center;
  min-height: 43px;
}

.directory-layout {
  display: grid;
  gap: 14px;
  max-width: 1180px;
}

.directory-overview {
  width: 100%;
}

.directory-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
}

.directory-status {
  border-left: 4px solid #94a3b8;
  padding: 10px 12px;
  background: #f8fafc;
  color: #475569;
}

.directory-status[data-state="ready"] {
  border-left-color: var(--ok);
  background: var(--ok-bg);
  color: var(--ok);
}

.directory-status[data-state="working"] {
  border-left-color: var(--head);
  background: #e6f3f1;
  color: var(--head-dark);
}

.directory-status[data-state="bad"] {
  border-left-color: var(--bad);
  background: var(--bad-bg);
  color: var(--bad);
}

.directory-view-tabs {
  display: inline-flex;
  justify-self: start;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
}

.directory-view-tabs button {
  min-width: 130px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: #ffffff;
  color: var(--muted);
}

.directory-view-tabs button:last-child {
  border-right: 0;
}

.directory-view-tabs button.active {
  background: var(--head);
  color: #ffffff;
}

.directory-list-panel[hidden] {
  display: none;
}

.directory-table table {
  min-width: 620px;
}

.directory-table th:last-child,
.directory-table td:last-child {
  width: 170px;
}

.directory-table strong,
.directory-id {
  display: block;
}

.directory-id {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}

.directory-state {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 650;
}

.directory-state.active {
  background: var(--ok-bg);
  color: var(--ok);
}

.directory-state.inactive {
  background: #e2e8f0;
  color: #475569;
}

.directory-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}

.directory-toggle input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--head);
}

.pagination {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 0;
  padding: 0 14px;
}

.pagination:not(:empty) {
  min-height: 56px;
  border-top: 1px solid var(--line);
}

.pagination button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
}

.pagination button.active {
  border-color: var(--head);
  background: var(--head);
  color: #ffffff;
}

.pagination span {
  margin-left: 5px;
  color: var(--muted);
  font-size: 12px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 12px;
  padding: 14px;
}

.form-grid.compact {
  grid-template-columns: repeat(3, minmax(120px, 1fr)) auto;
  align-items: end;
}

.form-grid label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.form-grid label.wide {
  grid-column: 1 / -1;
}

.form-grid button {
  align-self: end;
}

.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.update-panel {
  max-width: 760px;
}

.help-panel {
  max-width: 1120px;
}

.help-search-row {
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.help-intro {
  max-width: 850px;
  margin: 0 0 12px;
  color: #334155;
  line-height: 1.5;
}

.help-search-row input {
  max-width: 440px;
}

.help-search-hint {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.help-topics {
  padding: 0 14px 10px;
}

.help-topic {
  border-bottom: 1px solid var(--line);
}

.help-topic:last-child {
  border-bottom: 0;
}

.help-topic summary {
  cursor: pointer;
  padding: 15px 4px;
  color: var(--ink);
  font-weight: 650;
}

.help-topic summary:hover {
  color: var(--head-dark);
}

.help-topic summary:focus-visible {
  outline: 2px solid rgba(15, 118, 110, 0.24);
  outline-offset: 3px;
}

.help-topic-content {
  max-width: 960px;
  padding: 0 4px 16px 22px;
  overflow-x: auto;
  color: #475569;
  line-height: 1.55;
}

.help-topic-content p {
  margin: 0 0 9px;
}

.help-topic-content ol,
.help-topic-content ul {
  margin: 0;
  padding-left: 20px;
}

.help-topic-content li + li {
  margin-top: 5px;
}

.help-topic-content h3 {
  margin: 14px 0 6px;
  color: #1e293b;
  font-size: 14px;
  letter-spacing: 0;
}

.help-callout,
.help-formula {
  margin: 12px 0 0;
  border-left: 4px solid #0f766e;
  padding: 9px 12px;
  background: #f0fdfa;
  color: #134e4a;
}

.help-formula {
  border-left-color: #2563eb;
  background: #eff6ff;
  color: #1e3a8a;
  font-variant-numeric: tabular-nums;
}

.help-data-table {
  width: 100%;
  min-width: 640px;
  margin: 8px 0 12px;
  border-collapse: collapse;
  background: #ffffff;
  font-size: 12px;
}

.help-data-table th,
.help-data-table td {
  border: 1px solid #cbd5e1;
  padding: 8px 9px;
  text-align: left;
  vertical-align: top;
}

.help-data-table th {
  position: static;
  background: #e2e8f0;
  color: #1e293b;
}

.help-data-table tbody tr:nth-child(even) {
  background: #f8fafc;
}

.help-no-results {
  margin: 0 14px 14px;
  padding: 14px;
  border-left: 4px solid var(--warn);
  background: var(--warn-bg);
  color: var(--warn);
}

.import-layout {
  grid-template-columns: minmax(360px, 0.8fr) minmax(520px, 1.2fr);
}

.import-status {
  margin: 0 14px 14px;
  border-left: 4px solid #94a3b8;
  padding: 10px 12px;
  background: #f8fafc;
}

.import-status[data-state="ready"] {
  border-left-color: var(--ok);
  background: var(--ok-bg);
  color: var(--ok);
}

.import-status[data-state="working"] {
  border-left-color: var(--head);
  background: #e6f3f1;
  color: var(--head-dark);
}

.import-status[data-state="warn"] {
  border-left-color: var(--warn);
  background: var(--warn-bg);
  color: var(--warn);
}

.import-status[data-state="bad"] {
  border-left-color: var(--bad);
  background: var(--bad-bg);
  color: var(--bad);
}

.import-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 8px;
  padding: 12px 14px;
}

.import-summary:empty,
.import-warnings:empty,
.import-preview:empty {
  display: none;
}

.import-summary .metric {
  padding: 9px 10px;
}

.import-summary .metric strong {
  font-size: 17px;
}

.import-warnings {
  display: grid;
  gap: 4px;
  border-top: 1px solid #facc15;
  border-bottom: 1px solid #facc15;
  padding: 10px 14px;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 12px;
}

.import-warnings span {
  display: block;
}

.import-preview {
  max-height: 340px;
  overflow: auto;
}

.import-preview table {
  min-width: 520px;
}

.update-content {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.update-status {
  border-left: 4px solid #94a3b8;
  padding: 10px 12px;
  background: #f8fafc;
  font-weight: 650;
}

.update-status[data-state="ok"] {
  border-left-color: var(--ok);
  background: var(--ok-bg);
  color: var(--ok);
}

.update-status[data-state="available"],
.update-status[data-state="working"] {
  border-left-color: var(--head);
  background: #e6f3f1;
  color: var(--head-dark);
}

.update-status[data-state="warn"] {
  border-left-color: var(--warn);
  background: var(--warn-bg);
  color: var(--warn);
}

.update-status[data-state="bad"] {
  border-left-color: var(--bad);
  background: var(--bad-bg);
  color: var(--bad);
}

.update-details {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
}

.update-details strong {
  color: var(--ink);
}

.local-data-note {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  color: var(--muted);
  font-size: 12px;
}

.check-row {
  display: flex !important;
  grid-auto-flow: column;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 8px !important;
  color: var(--ink) !important;
  font-size: 13px !important;
}

.config-list {
  border-top: 1px solid var(--line);
  max-height: 260px;
  overflow: auto;
}

.config-list.paginated-list {
  max-height: none;
  overflow: visible;
}

.list-count {
  display: inline-block;
  margin-left: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.month-lock-state {
  display: inline-block;
  margin-left: 6px;
  color: var(--bad);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.search-row {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.search-row input {
  max-width: 420px;
}

.employee-results-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.employee-results-toolbar > input {
  flex: 1 1 280px;
}

.employee-copy-progress {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.employee-copy-progress strong {
  color: var(--head-dark);
  font-size: 12px;
  white-space: nowrap;
}

.config-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}

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

.config-item strong {
  display: block;
  font-weight: 650;
}

.config-item span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.config-empty {
  padding: 12px 14px;
  color: var(--muted);
}

.danger {
  color: var(--bad);
}

button.small {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 12px;
}

.metric {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid #94a3b8;
  border-radius: 8px;
  padding: 12px 14px;
}

.metric span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.metric strong {
  font-size: 20px;
  font-weight: 650;
}

.metric.main {
  border-left-color: var(--head);
}

.metric.ok {
  border-left-color: var(--ok);
}

.metric.warn {
  border-left-color: var(--warn);
}

.grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(480px, 1.6fr);
  gap: 18px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.panel h2 {
  margin: 0;
  padding: 12px 14px;
  background: #edf2f7;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}

textarea {
  width: 100%;
  min-height: 620px;
  resize: vertical;
  border: 0;
  padding: 14px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.45;
  color: #0f172a;
}

textarea.import-paste {
  min-height: 120px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px;
  font-size: 12px;
}

.table-wrap {
  overflow-x: auto;
}

.table-number-input {
  width: 112px;
  min-width: 96px;
  min-height: 32px;
  padding: 5px 7px;
  border: 1px solid #94a3b8;
  border-radius: 4px;
  background: #ffffff;
  color: var(--ink);
  font: inherit;
  text-align: right;
}

.table-number-input:hover {
  border-color: #64748b;
}

.table-number-input:focus {
  border-color: var(--head);
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.2);
  outline: none;
}

td.editable-cell {
  padding: 5px 6px;
  background: #f1f5f9;
}

tbody tr:nth-child(even) td.editable-cell,
tbody tr:hover td.editable-cell {
  background: #e8eef3;
}

#storeTable th:first-child,
#storeTable td:first-child {
  position: sticky;
  left: 0;
}

#storeTable th:first-child {
  z-index: 3;
}

#storeTable td:first-child {
  z-index: 2;
  min-width: 160px;
  background: var(--panel);
  font-weight: 650;
}

#storeTable tbody tr:nth-child(even) td:first-child {
  background: var(--table-row-alt);
}

#storeTable tbody tr:hover td:first-child {
  background: var(--table-row-hover);
}

#employeeTable input[data-employee-field="fte"] {
  width: 76px;
  min-width: 68px;
}

#employeeTable input[data-employee-field="workedHours"],
#employeeTable input[data-employee-field="bonusBasisHours"] {
  width: 92px;
  min-width: 84px;
}

#employeeTable input[data-employee-field="baseBonusOverride"] {
  width: 104px;
  min-width: 92px;
}

#employeeTable th:first-child,
#employeeTable td:first-child,
#employeeTable th:nth-child(2),
#employeeTable td:nth-child(2) {
  position: sticky;
}

#employeeTable th:first-child,
#employeeTable td:first-child {
  left: 0;
}

#employeeTable th:nth-child(2),
#employeeTable td:nth-child(2) {
  left: 148px;
}

#employeeTable th:first-child,
#employeeTable th:nth-child(2) {
  z-index: 3;
}

#employeeTable td:first-child {
  z-index: 2;
  width: 148px;
  min-width: 148px;
  background: var(--panel);
}

#employeeTable td:nth-child(2) {
  z-index: 2;
  min-width: 190px;
  background: var(--panel);
  font-weight: 650;
}

#employeeTable tbody tr:nth-child(even) td:first-child,
#employeeTable tbody tr:nth-child(even) td:nth-child(2) {
  background: var(--table-row-alt);
}

#employeeTable tbody tr:hover td:first-child,
#employeeTable tbody tr:hover td:nth-child(2) {
  background: var(--table-row-hover);
}

.employee-copy-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.employee-copy-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
}

.employee-copy-check input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--ok);
}

.copy-bonus-button {
  border-color: #86bca6;
  color: var(--head-dark);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 980px;
  background: var(--panel);
}

th,
td {
  border-right: 1px solid var(--table-line);
  border-bottom: 1px solid var(--table-line);
  padding: 8px 9px;
  vertical-align: top;
  text-align: left;
  white-space: nowrap;
}

th {
  background: #e6f3f1;
  color: #134e4a;
  font-weight: 650;
  position: sticky;
  top: 0;
  z-index: 1;
  border-top: 1px solid var(--table-line);
  box-shadow: inset 0 -1px 0 #b7c8c5;
}

th:first-child,
td:first-child {
  border-left: 1px solid var(--table-line);
}

tbody tr:nth-child(even) td {
  background: var(--table-row-alt);
}

tbody tr:hover td {
  background: var(--table-row-hover);
}

#employeeTable tbody tr.copy-complete td {
  background: #ecfdf5;
}

#employeeTable tbody tr.copy-complete:hover td {
  background: #dcfce7;
}

#employeeTable tbody tr.copy-complete .employee-copy-check {
  color: var(--ok);
}

td.num,
th.num {
  text-align: right;
}

td.strong {
  font-weight: 650;
}

td.good {
  color: var(--ok);
}

td.bad {
  color: var(--bad);
}

.schedule-layout {
  display: grid;
  gap: 18px;
}

.schedule-toolbar,
.schedule-settings,
.schedule-actions {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px;
}

.schedule-toolbar label,
.schedule-settings label,
.schedule-actions label {
  display: grid;
  gap: 5px;
  min-width: 135px;
  color: var(--muted);
  font-size: 12px;
}

.schedule-toolbar label:first-child {
  min-width: 240px;
}

.schedule-settings {
  border-bottom: 1px solid var(--line);
}

.schedule-settings label:first-child {
  min-width: 220px;
}

.schedule-settings input {
  min-width: 128px;
}

.schedule-config-section {
  border-top: 1px solid var(--line);
}

.schedule-config-section > summary {
  cursor: pointer;
  padding: 12px 14px;
  background: #f8fafc;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
}

.schedule-rule-grid,
.schedule-absence-form,
.schedule-delegation-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  align-items: end;
  gap: 10px;
  padding: 14px;
}

.schedule-rule-grid label,
.schedule-absence-form label,
.schedule-delegation-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
}

.schedule-rule-grid .schedule-wide-field {
  grid-column: span 2;
}

/* Audyt 15.09.2026 (ekspert UX): "Okres rozliczeniowy normy" i "Zmiany
   wydłużone dozwolone" leżą wizualnie wśród pól per-salon, a dotyczą całego
   grafiku (kwartału) - dopisek zawsze widoczny, nie tylko w tooltipie. */
.schedule-field-note {
  display: block;
  font-weight: 400;
  font-size: 11px;
  color: var(--muted);
}

.schedule-absence-form {
  grid-template-columns: minmax(180px, 1.2fr) repeat(3, minmax(135px, 0.7fr)) minmax(220px, 1.5fr) auto;
}

.schedule-absence-list {
  border-top: 1px solid var(--line);
}

.schedule-delegation-form {
  grid-template-columns: repeat(3, minmax(160px, 1fr)) repeat(2, minmax(135px, 0.7fr)) minmax(160px, 0.8fr);
}

.schedule-delegation-form output {
  display: flex;
  min-height: 38px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 8px 10px;
  background: #f8fafc;
  color: var(--ink);
}

.schedule-delegation-note {
  grid-column: span 2;
}

.schedule-delegation-search {
  border-top: 1px solid var(--line);
  padding: 10px 14px;
}

.schedule-delegation-search label {
  width: min(100%, 420px);
}

.schedule-delegation-list {
  border-top: 1px solid var(--line);
}

.schedule-delegation-row {
  display: grid;
  grid-template-columns: 105px minmax(180px, 1.2fr) minmax(260px, 1.5fr) minmax(190px, 1fr) 120px minmax(180px, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.schedule-delegation-row:nth-child(even) {
  background: var(--table-row-alt);
}

.schedule-delegation-row.disabled {
  color: var(--muted);
  opacity: 0.72;
}

.schedule-delegation-toggle {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 6px !important;
  color: var(--ink) !important;
}

.schedule-delegation-toggle input {
  width: 18px;
  height: 18px;
}

.schedule-sync-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
}

.schedule-sync-context {
  margin: 0;
  border-left: 4px solid #94a3b8;
  padding: 9px 11px;
  background: #f8fafc;
  color: var(--muted);
}

.schedule-sync-context[data-state="ok"] {
  border-left-color: var(--ok);
  background: var(--ok-bg);
  color: var(--ok);
}

.schedule-sync-context[data-state="warn"] {
  border-left-color: var(--warn);
  background: var(--warn-bg);
  color: var(--warn);
}

.schedule-absence-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) minmax(180px, 1fr) 50px minmax(180px, 1.5fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.schedule-absence-row:nth-child(even) {
  background: var(--table-row-alt);
}

.schedule-actions {
  padding-top: 12px;
  padding-bottom: 12px;
}

.schedule-actions label {
  min-width: 250px;
  margin-left: auto;
}

.schedule-status {
  margin: 0 14px 14px;
  border-left: 4px solid #94a3b8;
  padding: 10px 12px;
  background: #f8fafc;
  color: #475569;
}

.schedule-status[data-state="ready"],
.schedule-status[data-state="ok"] {
  border-left-color: var(--ok);
  background: var(--ok-bg);
  color: var(--ok);
}

.schedule-status[data-state="dirty"],
.schedule-status[data-state="warn"] {
  border-left-color: var(--warn);
  background: var(--warn-bg);
  color: var(--warn);
}

.schedule-status[data-state="bad"] {
  border-left-color: var(--bad);
  background: var(--bad-bg);
  color: var(--bad);
}

.schedule-month-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}

.schedule-month-tabs button {
  flex: 1 1 160px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
}

.schedule-month-tabs button:last-child {
  border-right: 0;
}

.schedule-month-tabs button.active {
  background: var(--head);
  color: #ffffff;
  font-weight: 650;
}

.schedule-summary {
  display: grid;
  grid-template-columns: repeat(8, minmax(105px, 1fr));
  gap: 1px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--line);
}

.schedule-summary .metric {
  min-height: 70px;
  border: 0;
  border-radius: 0;
  padding: 10px 12px;
  background: #ffffff;
}

.schedule-summary .metric strong {
  display: block;
  margin-top: 4px;
  font-size: 18px;
}

.schedule-summary .metric.warn strong {
  color: var(--warn);
}

.schedule-summary .metric.bad strong {
  color: var(--bad);
}

.schedule-summary .metric.good strong {
  color: var(--ok);
}

.schedule-compliance {
  border-bottom: 1px solid var(--line);
}

.schedule-compliance-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-left: 4px solid var(--ok);
  background: var(--ok-bg);
  color: var(--ok);
}

.schedule-compliance-heading.warn {
  border-left-color: var(--warn);
  background: var(--warn-bg);
  color: var(--warn);
}

.schedule-compliance-heading.bad {
  border-left-color: var(--bad);
  background: var(--bad-bg);
  color: var(--bad);
}

.schedule-compliance-content {
  display: grid;
  grid-template-columns: minmax(420px, 1.1fr) minmax(320px, 0.9fr);
  gap: 14px;
  padding: 12px 14px;
  overflow-x: auto;
}

.schedule-compliance-content table {
  min-width: 0;
}

.schedule-compliance-content ul,
.schedule-compliance-content p {
  margin: 0;
}

.schedule-compliance-content li {
  margin-bottom: 5px;
}

.schedule-compliance-content li.bad {
  color: var(--bad);
}

.schedule-compliance-content li.warn {
  color: var(--warn);
}

.schedule-compliance-ok {
  color: var(--ok);
  font-weight: 650;
}

.schedule-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding: 10px 14px;
  color: var(--muted);
  font-size: 12px;
}

.schedule-grid {
  max-height: 660px;
  border-top: 1px solid var(--table-line);
}

.schedule-table {
  width: max-content;
  min-width: 100%;
  table-layout: fixed;
}

.schedule-table th,
.schedule-table td {
  height: 48px;
  padding: 5px;
  text-align: center;
  vertical-align: middle;
}

.schedule-table .schedule-employee-column {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 210px;
  min-width: 210px;
  max-width: 210px;
  text-align: left;
  background: #ffffff;
}

.schedule-table th.schedule-employee-column {
  z-index: 4;
  background: #e6f3f1;
}

.schedule-table tbody tr:nth-child(even) .schedule-employee-column {
  background: var(--table-row-alt);
}

.schedule-table tbody tr:hover .schedule-employee-column {
  background: var(--table-row-hover);
}

.schedule-table .schedule-fte-column {
  position: sticky;
  left: 210px;
  z-index: 2;
  width: 54px;
  min-width: 54px;
  max-width: 54px;
  background: #ffffff;
}

.schedule-table th.schedule-fte-column {
  z-index: 4;
  background: #e6f3f1;
}

.schedule-table tbody tr:nth-child(even) .schedule-fte-column {
  background: var(--table-row-alt);
}

.schedule-table tbody tr:hover .schedule-fte-column {
  background: var(--table-row-hover);
}

.schedule-table .schedule-day-column {
  width: 70px;
  min-width: 70px;
  max-width: 70px;
}

.schedule-table .schedule-total-column {
  width: 75px;
  min-width: 75px;
  max-width: 75px;
  font-variant-numeric: tabular-nums;
}

.schedule-table .schedule-weekend {
  background: #fff7ed;
}

.schedule-table tbody tr:nth-child(even) .schedule-weekend {
  background: #ffedd5;
}

.schedule-table .schedule-holiday {
  background: #e2e8f0;
  color: #475569;
}

.schedule-table tbody tr:nth-child(even) .schedule-holiday {
  background: #d8e0e8;
}

.schedule-table .schedule-working-sunday {
  background: #fef3c7;
}

.schedule-table tbody tr:nth-child(even) .schedule-working-sunday {
  background: #fde68a;
}

.schedule-day-label {
  display: grid;
  gap: 1px;
  line-height: 1.05;
}

.schedule-day-label small {
  color: var(--muted);
  font-size: 10px;
}

.schedule-cell-input {
  width: 60px;
  min-height: 31px;
  padding: 4px;
  text-align: center;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.schedule-cell-input[data-source="auto"] {
  border-color: #5ba99e;
  background: #f0fdfa;
}

.schedule-cell-input[data-source="delegation"] {
  border-color: #2563eb;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 650;
}

.schedule-cell-input.invalid {
  border-color: var(--bad);
  background: var(--bad-bg);
  color: var(--bad);
}

.schedule-closed-marker,
.schedule-absence-marker {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #64748b;
  font-weight: 700;
}

.schedule-absence-marker {
  border: 1px solid #f59e0b;
  background: #fffbeb;
  color: #92400e;
}

.schedule-cross-store {
  display: block;
  max-width: 60px;
  overflow: hidden;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 650;
  text-overflow: ellipsis;
}

.schedule-employee-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.schedule-delegated-badge {
  display: inline-grid;
  min-width: 28px;
  height: 24px;
  place-items: center;
  border: 1px solid #93c5fd;
  border-radius: 4px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 750;
}

.schedule-remove-employee {
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  color: var(--bad);
  font-weight: 700;
}

.status {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 650;
}

.status.ok {
  background: var(--ok-bg);
  color: var(--ok);
}

.status.warn {
  background: var(--warn-bg);
  color: var(--warn);
}

.status.bad {
  background: var(--bad-bg);
  color: var(--bad);
}

.status.muted {
  background: #e2e8f0;
  color: #475569;
}

@media (max-width: 980px) {
  main {
    padding: 16px;
  }

  .app-footer {
    align-items: flex-start;
    flex-direction: column;
    margin: 0 16px;
    gap: 4px;
  }

  .footer-product {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .config-layout {
    grid-template-columns: 1fr;
  }

  .directory-content {
    align-items: stretch;
    flex-direction: column;
  }

  .schedule-summary {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }

  .schedule-rule-grid,
  .schedule-absence-form,
  .schedule-absence-row,
  .schedule-delegation-form,
  .schedule-delegation-row,
  .schedule-compliance-content {
    grid-template-columns: 1fr;
  }

  .schedule-rule-grid .schedule-wide-field {
    grid-column: auto;
  }

  .schedule-delegation-note {
    grid-column: auto;
  }

  .schedule-sync-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .schedule-compliance-content table {
    min-width: 520px;
  }

  .schedule-actions label {
    margin-left: 0;
  }

  .form-grid,
  .form-grid.compact {
    grid-template-columns: 1fr;
  }

  table {
    min-width: 860px;
  }
}

/* Pytania Asystenta AI (3 wrzesnia 2026) */
.pytania-asystenta{margin:12px 0;padding:14px 18px;border:1px solid #cfe0dc;border-left:4px solid #0f766e;border-radius:8px;background:#f2faf8;display:flex;flex-direction:column;gap:12px}
/* Atrybut hidden musi wygrywać z display:flex (przycisk „Później" i brak otwartych pytań). */
.pytania-asystenta[hidden]{display:none}
.pytania-asystenta{padding:10px 18px}
.pytania-asystenta .pa-pasek{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.pytania-asystenta .pa-pasek .pa-rozwin{margin-left:auto;min-height:30px;padding:4px 12px;border-radius:6px;border:1px solid #0f766e;background:#0f766e;color:#fff;font:inherit;font-weight:600;cursor:pointer}
.pytania-asystenta .pa-pasek .pa-pozniej{min-height:30px;padding:4px 12px;border-radius:6px;border:1px solid #cfd6d4;background:#fff;font:inherit;cursor:pointer}
.pytania-asystenta .pa-glowa{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.pytania-asystenta .pa-glowa .pa-pozniej{margin-left:auto}
.pytania-asystenta .pa-cicho{color:#4a5866;font-size:.9rem}
.pytania-asystenta .pa-pytanie{display:flex;flex-direction:column;gap:6px;padding:10px 12px;background:#fff;border:1px solid #dde4e2;border-radius:6px}
.pytania-asystenta .pa-temat{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:#0f766e;font-weight:600}
.pytania-asystenta .pa-tresc{max-width:80ch}
.pytania-asystenta textarea{font:inherit;padding:8px 10px;border:1px solid #cfd6d4;border-radius:6px;resize:vertical;min-height:72px}
.pytania-asystenta .pa-akcje{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pytania-asystenta .pa-akcje button,.pytania-asystenta .pa-glowa button{min-height:34px;padding:4px 12px;border-radius:6px;border:1px solid #cfd6d4;background:#fff;font:inherit;cursor:pointer}
.pytania-asystenta .pa-akcje button[type=submit]{background:#0f766e;color:#fff;border-color:#0f766e;font-weight:600}
.pytania-asystenta .pa-blad{color:#a8442e;font-size:.9rem}
.pytania-asystenta .pa-dziekuje{color:#2f7d4f;padding:8px 12px}

/* Ekran Start (faza 1, wrzesien 2026): kafle, do zrobienia, puls automatu, sprawy agenta, porownanie. */
.start-kafle {
  margin-bottom: 18px;
}

.metric.bad {
  border-left-color: var(--bad);
}

.metric small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

/* Ekran Start (1.4.0): pasek etapu na całą szerokość, pod nim dwie długie
   listy obok siebie (co zrobić i sprawy agenta), niżej puls i porównanie.
   Dzięki temu żadna kolumna nie stoi pusta. */
.start-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(360px, 1fr));
  gap: 18px;
  align-items: start;
}

.start-panel {
  align-self: start;
}

.start-panel-wide,
#startEtapPanel,
#startPulsPanel,
#startPorownaniePanel {
  grid-column: 1 / -1;
}

/* Pasek etapu: dwie akcje, więc niski, bez rozpychania ekranu. */
#startEtapPanel {
  padding-bottom: 6px;
}

#startEtapPanel h2 {
  margin-bottom: 4px;
}

#startEtapPanel .start-content {
  padding-top: 0;
}

#startBrakiPanel {
  grid-column: 1;
}

#startSprawyPanel {
  grid-column: 2;
}

.start-content {
  padding: 12px 14px;
  display: grid;
  gap: 10px;
}

.start-content p {
  margin: 0;
}

.start-muted {
  color: var(--muted);
  font-size: 13px;
}

.start-etap-head {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}

.start-etap-head strong {
  font-size: 17px;
}

.start-etap-history {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
  display: grid;
  gap: 3px;
}

.start-etap-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.start-etap-actions .etap-hint {
  color: var(--muted);
  font-size: 12px;
  flex-basis: 100%;
}

.start-list {
  display: grid;
  gap: 6px;
}

.start-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 6px;
  background: #fbfcfd;
}

.start-item[data-waga="blokuje"],
.start-item[data-waga="krytyczna"] {
  border-left-color: var(--bad);
}

.start-item[data-waga="uwaga"] {
  border-left-color: var(--warn);
}

.start-item[data-waga="info"] {
  border-left-color: #94a3b8;
}

.start-item .status {
  min-width: 68px;
  text-align: center;
  text-transform: none;
}

.start-item-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.start-item-body strong {
  font-weight: 650;
}

.start-item-body span,
.start-item-body p {
  color: var(--muted);
  font-size: 12px;
  margin: 0;
}

.start-item-body .sprawa-wyjasnienie {
  color: var(--ink);
  font-size: 13px;
  padding: 6px 8px;
  border-left: 3px solid var(--head);
  background: #f2faf8;
}

.start-item-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sprawa-form {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
}

.sprawa-form textarea {
  min-height: 64px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  resize: vertical;
}

.sprawa-form .form-actions {
  gap: 6px;
}

.start-liczniki {
  display: flex;
  gap: 6px 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
}

.start-puls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.start-puls .metric {
  padding: 9px 12px;
}

.start-puls .metric strong {
  font-size: 16px;
}

.start-porownanie table {
  width: 100%;
}

.start-porownanie td.num,
.start-porownanie th.num {
  text-align: right;
}

.start-porownanie .delta-plus {
  color: var(--ok);
  font-weight: 650;
}

.start-porownanie .delta-minus {
  color: var(--bad);
  font-weight: 650;
}

@media (max-width: 900px) {
  .start-layout {
    grid-template-columns: 1fr;
  }
  #startBrakiPanel,
  #startSprawyPanel {
    grid-column: 1;
  }
}

/* Budzety i online */
.budzety-hint {
  margin: 0;
  padding: 12px 14px 0;
  color: var(--muted);
  font-size: 13px;
  max-width: 90ch;
}

.budzety-table {
  padding: 12px 0 0;
}

.budzety-table td.num {
  text-align: right;
}

.budzety-table .budzet-zrodlo {
  color: var(--muted);
  font-size: 12px;
}

.budzety-table .budzet-potwierdzenie.ok {
  color: var(--ok);
  font-weight: 650;
}

.budzety-table .budzet-potwierdzenie.warn {
  color: var(--warn);
  font-weight: 650;
}

.budzety-table .budzet-potwierdzenie.muted {
  color: var(--muted);
}

.budzety-actions {
  padding: 12px 14px 14px;
  align-items: center;
}

.budzety-status {
  color: var(--muted);
  font-size: 13px;
}

.budzety-status[data-state="ok"] {
  color: var(--ok);
}

.budzety-status[data-state="warn"] {
  color: var(--warn);
}

.budzety-status[data-state="bad"] {
  color: var(--bad);
}

.field-hint {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

/* Slad naliczenia pracownika (explain) w zakladce Wyniki */
.explain-toggle {
  min-height: 24px;
  min-width: 24px;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.explain-toggle[aria-expanded="true"] {
  background: var(--head);
  color: #ffffff;
  border-color: var(--head);
}

.employee-name-cell {
  cursor: pointer;
}

tr.explain-row td {
  padding: 8px 12px 10px;
  background: #f2faf8;
  border-left: 4px solid var(--head);
}

tr.explain-row[hidden] {
  display: none;
}

.explain-steps {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 3px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.explain-title {
  display: block;
  margin-bottom: 4px;
  color: var(--head-dark);
  font-weight: 650;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Faza 2 (wrzesień 2026): login i rola w nagłówku, zakładka Więcej z podzakładkami,
   strefa administracyjna (audyt, zdrowie, ustalenia, konta), rola tylko do odczytu. */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.header-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.header-user[hidden] {
  display: none;
}

.header-user-login {
  font-weight: 600;
}

.header-user-role {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
}

.header-logout {
  margin: 0;
}

.header-logout-button {
  min-height: 32px;
  padding: 4px 12px;
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 6px;
  font-size: 13px;
}

.header-logout-button:hover {
  background: rgba(255, 255, 255, 0.14);
}

.subtabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}

.subtab-button {
  min-height: 34px;
  padding: 6px 14px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
}

.subtab-button.active {
  background: var(--head);
  border-color: var(--head);
  color: #ffffff;
}

.subtab-button[hidden] {
  display: none;
}

.subtab-panel {
  display: none;
}

.subtab-panel.active {
  display: block;
}

.subtab-panel[hidden] {
  display: none;
}

.admin-content {
  padding: 12px 14px;
  display: grid;
  gap: 12px;
}

.admin-content p {
  margin: 0;
}

.admin-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.admin-filters label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.admin-filters input {
  min-width: 150px;
}

.admin-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

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

.admin-table {
  font-size: 13px;
}

.admin-table td.admin-details {
  max-width: 480px;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--muted);
}

.admin-table tr[data-akcja="odmowa dostepu"] td {
  color: var(--bad);
}

.admin-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0;
}

.admin-dl dt {
  color: var(--muted);
  font-size: 12px;
}

.admin-dl dd {
  margin: 0;
}

.admin-list {
  display: grid;
  gap: 10px;
}

.admin-item {
  border: 1px solid var(--line);
  border-left: 4px solid var(--head);
  border-radius: 6px;
  padding: 10px 12px;
  background: #fbfcfd;
  display: grid;
  gap: 4px;
}

.admin-item[data-stan="otwarte"],
.admin-item[data-stan="propozycja"] {
  border-left-color: var(--warn);
}

/* Linia kalendarza na ekranie Start (1.4.0): dzień miesiąca i najbliższy termin. */
.start-kalendarz {
  margin: 0 0 12px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--head);
  border-radius: 6px;
  background: var(--panel);
  font-size: 14px;
  color: var(--ink);
}

.start-kalendarz[data-pilne="tak"] {
  border-left-color: var(--warn);
  background: var(--warn-bg, #fef3c7);
}

.admin-item-akcje {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

/* Mózg salonów: formularz nowego ustalenia (Więcej > Mózg). */
.mozg-form {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.mozg-form label {
  display: grid;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
}

.mozg-form input,
.mozg-form textarea {
  font: inherit;
  font-weight: 400;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  max-width: 720px;
}

.mozg-form textarea {
  /* Globalny textarea ma min-height 620px (edytor JSON); tu pole notatki. */
  min-height: 84px;
  resize: vertical;
}

.admin-item-temat {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--head);
  font-weight: 600;
}

.admin-item-meta {
  color: var(--muted);
  font-size: 12px;
}

.admin-item-odpowiedz {
  white-space: pre-wrap;
}

.admin-roles {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}

/* Rola tylko do odczytu (główna księgowa): przyciski zapisu, etapów, usuwania
   i importu ukryte; pola wyłączane skryptem (MutationObserver). */
/* Bez prowadzenia miesiąca (G17: klucz miesiac.prowadzenie): przyciski zapisu miesiąca, etapów,
   kartoteki miesiąca i spraw znikają. */
body.rola-ksiegowa #saveMonth,
body.rola-ksiegowa #newMonthFromCurrent,
body.rola-ksiegowa #saveBudzety,
body.rola-ksiegowa #applyImport,
body.rola-ksiegowa #importForm button,
body.rola-ksiegowa #settingsForm button,
body.rola-ksiegowa #thresholdForm button,
body.rola-ksiegowa #storeForm button,
body.rola-ksiegowa #employeeForm button,
body.rola-ksiegowa #delegationForm button,
body.rola-ksiegowa #clearEmployeeCopyMarks,
body.rola-ksiegowa [data-action="save-loaded-month"],
body.rola-ksiegowa [data-action="discard-draft"],
body.rola-ksiegowa [data-action="etap-do-kontroli"],
body.rola-ksiegowa [data-action="etap-uzupelniany"],
body.rola-ksiegowa [data-action="etap-zatwierdz"],
body.rola-ksiegowa [data-action="sprawa-wyjasnij"],
body.rola-ksiegowa [data-action="sprawa-zamknij"],
body.rola-ksiegowa [data-action="remove-threshold"],
body.rola-ksiegowa [data-action="edit-store"],
body.rola-ksiegowa [data-action="remove-store"],
body.rola-ksiegowa [data-action="edit-employee"],
body.rola-ksiegowa [data-action="remove-employee"],
body.rola-ksiegowa [data-action="remove-delegation"],
body.rola-ksiegowa #pytaniaAsystenta {
  display: none !important;
}

/* Odblokowanie i usunięcie miesiąca: klucz miesiac.odblokowanie; przycisk blokady zostaje,
   gdy konto ma choć jeden z kluczy (zamknięcie = prowadzenie, odblokowanie = odblokowanie). */
body.bez-odblokowania [data-action="delete-month"] {
  display: none !important;
}

/* Bez klucza grafiki.edycja: układanie i zapis grafików. */
body.bez-grafikow #createSchedule,
body.bez-grafikow #saveSchedule,
body.bez-grafikow #deleteSchedule,
body.bez-grafikow #generateSchedule,
body.bez-grafikow #generateQuarterSchedule,
body.bez-grafikow #syncScheduleMonth,
body.bez-grafikow #addScheduleEmployee,
body.bez-grafikow #addScheduleAbsence,
body.bez-grafikow #addScheduleDelegation,
body.bez-grafikow [data-toggle-schedule-delegation] {
  display: none !important;
}

/* Bez klucza kartoteka.edycja: zapis kartoteki. */
body.bez-kartoteki #saveDirectory,
body.bez-kartoteki #applyDirectory,
body.bez-kartoteki [data-directory-delete] {
  display: none !important;
}

/* Pasek narzędzi z wersji na jeden komputer znika w trybie serwerowym
   (1.4.0): przeliczanie dzieje się samo, listę płac pobiera się na ekranie
   Start po zatwierdzeniu, a kopie robi serwer. Elementy zostają w drzewie
   strony, bo kod trzyma do nich uchwyty. */
body.server-mode .toolbar {
  display: none !important;
}

/* Narzędzia z ery biurkowej poza rolą właściciela (1.4.0, panel ekspertów
   3 września): przy automacie ze Stoków mogą zepsuć więcej niż pomóc, bo
   nadpisują dane z ERP i kartotekę. Elementy zostają w drzewie strony (kod
   trzyma do nich uchwyty), po prostu ich nie widać. */
/* Technikalia (G17: klucz reguly.edycja, czyli Administrator): przeliczanie z pliku, JSON, CSV,
   wczytywanie pliku, nowy miesiąc z bieżącego. Dawne selektory po nazwie roli (data-rola) usunięte. */
body.bez-regul #calculate,
body.bez-regul #exportJson,
body.bez-regul #exportEmployees,
body.bez-regul #exportStores,
body.bez-regul #fileInput,
body.bez-regul #newMonthFromCurrent {
  display: none !important;
}

body.rola-ksiegowa .rola-odczyt-uwaga {
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--head);
  border-radius: 6px;
  background: #f1f7f6;
  font-size: 13px;
}

/* Tablica Info (wrzesien 2026): pytania i sugestie, pytania Asystenta, lista zmian. */
.tab-licznik {
  display: inline-block;
  min-width: 18px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  vertical-align: middle;
}

.tab-licznik[hidden] {
  display: none;
}

.info-panel + .info-panel {
  margin-top: 16px;
}

.info-form {
  display: grid;
  grid-template-columns: minmax(140px, 180px) 1fr auto;
  gap: 10px;
  align-items: end;
}

.info-form label {
  display: grid;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
}

.info-form select,
.info-form textarea {
  font: inherit;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
}

.info-form textarea {
  resize: vertical;
  min-height: 72px;
}

.info-form button {
  min-height: 38px;
}

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

.info-lista {
  display: grid;
  gap: 10px;
}

.info-wpis {
  border: 1px solid var(--line);
  border-left: 4px solid #94a3b8;
  border-radius: 6px;
  padding: 10px 12px;
  background: #fbfcfd;
  display: grid;
  gap: 6px;
}

.info-wpis[data-status="otwarte"] {
  border-left-color: var(--warn);
}

.info-wpis[data-status="rozpatrywana"] {
  border-left-color: var(--head);
}

.info-wpis[data-status="wdrozona"],
.info-wpis[data-status="odpowiedziano"] {
  border-left-color: var(--ok);
}

.info-wpis[data-status="odrzucona"] {
  border-left-color: var(--bad);
}

.info-wpis-glowa {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}

.info-wpis-glowa .info-rodzaj {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--head);
  font-weight: 600;
}

.info-wpis-glowa .status {
  margin-left: auto;
}

.status.rozpatrywana {
  background: #e0f2f1;
  color: var(--head-dark);
}

.status.odrzucona {
  background: var(--bad-bg);
  color: var(--bad);
}

.info-wpis-tresc,
.info-odpowiedz {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.info-odpowiedz {
  padding: 8px 10px;
  border-left: 3px solid var(--head);
  background: #f2faf8;
  display: grid;
  gap: 4px;
}

.info-odpowiedz .info-podpis {
  color: var(--muted);
  font-size: 12px;
}

.info-wlasciciel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
}

.info-wlasciciel textarea {
  font: inherit;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  resize: vertical;
  min-height: 56px;
  width: 100%;
  box-sizing: border-box;
}

.info-wlasciciel-akcje {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.info-wlasciciel-akcje select {
  font: inherit;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

.info-wlasciciel-akcje [data-info-usun] {
  margin-left: auto;
  color: var(--bad);
}

.info-wlasciciel-akcje [data-info-usun][data-potwierdz="1"] {
  background: var(--bad-bg);
  border-color: var(--bad);
}

.info-link {
  color: var(--head);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
}

.info-zmiany {
  display: grid;
  gap: 14px;
}

.info-wersja {
  display: grid;
  gap: 6px;
}

.info-wersja-glowa {
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
}

.info-wersja-glowa strong {
  font-size: 15px;
  color: var(--head-dark);
}

.info-wersja-glowa span {
  color: var(--muted);
  font-size: 12px;
}

.info-wersja ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 3px;
}

.info-wersja li {
  font-size: 13px;
}

/* Podsumowanie właściciela (1.8.0): dwie wąskie tabele, więc bez szerokiego
   minimum zwykłych tabel rozliczenia. */
.wlasciciel-tabela {
  min-width: 620px;
}

#tab-wlasciciel .start-content p:first-child {
  margin-top: 0;
}

#tab-wlasciciel .table-wrap {
  margin-top: 8px;
}

/* Nagłówek tabeli zostaje na wierzchu przy przewijaniu (sugestia Doroty Herman
   z 4 września 2026: „przewijam niżej i nie widzę, czego dotyczy pozycja").
   Duże tabele przewijają się we własnym oknie, więc wiersz nagłówka ma się
   do czego przykleić; w wydruku i przy niskim oknie ograniczenie znika. */
#storeTable,
#employeeTable,
#budzetyTable,
#directoryStoreTable,
#directoryEmployeeTable {
  max-height: calc(100vh - 260px);
  min-height: 240px;
  overflow: auto;
}

@media print {
  #storeTable,
  #employeeTable,
  #budzetyTable,
  #directoryStoreTable,
  #directoryEmployeeTable {
    max-height: none;
    overflow: visible;
  }
}

/* Premie kwartalne (1.10.0): dwie tabele i pasek wyboru kwartału. */
.kwartalne-tabela {
  min-width: 720px;
}

.kwartalne-pasek {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin-bottom: 10px;
}

.kwartalne-pasek label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 650;
}

#tab-kwartalne .table-wrap {
  margin-top: 8px;
  max-height: calc(100vh - 320px);
  overflow: auto;
}

/* Wydruk premii miesięcznych: od 1.19.0 dokument w #wydruk (blok "Wydruki" na końcu pliku). */
.wyniki-pasek {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

/* Przegląd sieci (1.12.0): siatka salon x dzień, wąskie kolumny dni. */
.przeglad-tabela {
  width: auto;
  min-width: 0;
  table-layout: fixed;
}

.przeglad-tabela th:first-child,
.przeglad-tabela td:first-child {
  width: 190px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.przeglad-tabela th:last-child,
.przeglad-tabela td:last-child {
  width: 80px;
}

.przeglad-tabela th.przeglad-dzien {
  width: 26px;
  padding: 6px 2px;
  text-align: center;
  font-size: 11px;
}

.przeglad-komorka {
  padding: 5px 2px;
  text-align: center;
  font-size: 11px;
}

.przeglad-zamkniety {
  background: #f1f5f9;
}

.przeglad-brak {
  background: #fee2e2;
}

.przeglad-ponizej {
  background: #fef3c7;
}

#tab-przeglad .table-wrap {
  max-height: calc(100vh - 320px);
  overflow: auto;
}

/* Przycisk nad regułami salonu (1.13.0). */
.schedule-settings-akcje {
  display: flex;
  justify-content: flex-end;
  margin: 4px 0 6px;
}

/* Podpowiedź obsady sobotniej z obrotów (1.13.0). */
.schedule-obciazenie {
  margin: 0 0 6px;
  padding: 6px 10px;
  border-left: 3px solid #0f766e;
  background: #f0fdfa;
}

/* Logowanie w aplikacji (1.18.0, G17) */
body.niezalogowany > header,
body.niezalogowany > main,
body.niezalogowany > footer,
body.niezalogowany #pomocnikAI {
  display: none !important;
}

.logowanie {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  background: var(--bg);
}

.logowanie[hidden] {
  display: none;
}

.logowanie-okno {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 32px;
  width: 420px;
  max-width: 94vw;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.logowanie-okno h1 {
  margin: 0 0 4px;
  font-size: 20px;
  color: var(--head);
  text-align: center;
}

.logowanie-wstep,
.logowanie-podpowiedz {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.logowanie-okno label,
.okno-hasla-karta label {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}

.logowanie-okno input,
.okno-hasla-karta input[type="password"] {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  width: 100%;
}

.logowanie-okno button.primary {
  margin-top: 8px;
  min-height: 44px;
}

.logowanie-blad {
  margin: 0;
  min-height: 1.2em;
  color: var(--bad);
  font-size: 13px;
}

.okno-hasla {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  padding: 16px;
}

.okno-hasla[hidden] {
  display: none;
}

.okno-hasla-karta {
  background: var(--panel);
  border-radius: 10px;
  padding: 24px 28px;
  width: 440px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.okno-hasla-karta h2 {
  margin: 0 0 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Konta i role (Więcej > Konta, Więcej > Role i uprawnienia) */
.konta-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.konta-kpi-karta {
  background: var(--table-row-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}

.konta-kpi-karta .naz {
  font-size: 12px;
  color: var(--muted);
}

.konta-kpi-karta .wart {
  font-size: 20px;
  font-weight: 600;
}

.konta-kpi-karta .wart small {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
}

.konta-tabela tr.wylaczone td {
  opacity: 0.6;
}

.konta-znaczek {
  display: inline-block;
  font-size: 11px;
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 6px;
  background: var(--table-row-alt);
  border: 1px solid var(--line);
  white-space: nowrap;
}

.konta-znaczek.ok {
  background: var(--ok-bg);
  color: var(--ok);
  border-color: transparent;
}

.konta-znaczek.warn {
  background: var(--warn-bg);
  color: var(--warn);
  border-color: transparent;
}

.konta-znaczek.bad {
  background: var(--bad-bg);
  color: var(--bad);
  border-color: transparent;
}

.konta-haslo {
  background: var(--ok-bg);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 10px 0;
  word-break: break-all;
}

.konta-haslo code {
  font-size: 15px;
  font-weight: 600;
}

.konta-formularz {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 14px;
}

.konta-pola {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.konta-pola label,
.konta-karta label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--muted);
}

.konta-pola input,
.konta-pola select,
.konta-karta input,
.konta-karta select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
}

.konta-role-opis {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.konta-karta {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
  gap: 16px;
  align-items: start;
}

@media (max-width: 900px) {
  .konta-karta {
    grid-template-columns: 1fr;
  }
}

.konta-blok {
  background: var(--table-row-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
}

.konta-blok h3 {
  margin: 0 0 10px;
  font-size: 15px;
}

.konta-akcja {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px dashed var(--line);
}

.konta-akcja small {
  display: block;
  color: var(--muted);
}

.konta-zdarzenia {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
}

.konta-zdarzenia li {
  padding: 4px 0;
  border-bottom: 1px dashed var(--line);
}

.role-matryca th,
.role-matryca td {
  vertical-align: top;
}

.role-matryca td.srodek {
  text-align: center;
}

.role-matryca input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.role-matryca .opis {
  font-size: 12px;
  color: var(--muted);
}

.role-narzedzia {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}

.role-narzedzia input,
.role-narzedzia select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
}

/* Nakładka logowania po wygaśnięciu sesji (G17): aplikacja zostaje pod spodem. */
.logowanie.nakladka {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(246, 247, 249, 0.97);
  min-height: 0;
  overflow: auto;
}

/* Wydruki (1.19.0, G18): jeden kontener #wydruk na końcu body, ekran chowany przez
   display:none (bez pustych stron), orientacja przez wstrzykiwany <style id="wydrukPage">. */
#wydruk {
  display: none;
}

@media print {
  body.drukuj > :not(#wydruk) {
    display: none !important;
  }

  body.drukuj {
    background: #fff;
  }

  body.drukuj #wydruk {
    display: block;
    background: #fff;
    color: #000;
    font-family: "Segoe UI", Arial, sans-serif;
  }

  /* Nagłówek wydruku: bez ciemnego paska z ekranu (toner), czarny tekst i kreska. */
  #wydruk header.wydruk-glowa {
    background: none;
    color: #000;
    padding: 0 0 4px;
    margin: 0 0 6px;
    border-bottom: 2px solid #000;
  }

  #wydruk .wydruk-strona {
    break-after: page;
    page-break-after: always;
  }

  #wydruk .wydruk-strona:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  #wydruk .wydruk-glowa h1 {
    margin: 0 0 2px;
    font-size: 16px;
  }

  #wydruk .wydruk-glowa p {
    margin: 0 0 4px;
    font-size: 10.5px;
  }

  #wydruk h2 {
    margin: 8px 0 4px;
    font-size: 12px;
  }

  #wydruk table {
    width: 100%;
    min-width: 0;
    max-width: none;
    border-collapse: collapse;
    table-layout: auto;
  }

  #wydruk th,
  #wydruk td {
    position: static;
    white-space: normal;
    font-size: inherit;
  }

  #wydruk .table-wrap,
  #wydruk .table-scroll {
    max-height: none;
    overflow: visible;
  }

  #wydruk thead {
    display: table-header-group;
  }

  #wydruk tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  #wydruk th,
  #wydruk td {
    border: 1px solid #333;
    padding: 2px 3px;
    vertical-align: middle;
  }

  #wydruk th {
    background: #e8eeec;
    font-weight: 700;
  }

  #wydruk .w-weekend {
    background: #ececec;
  }

  #wydruk .w-swieto {
    background: #d9d9d9;
  }

  #wydruk .wydruk-legenda,
  #wydruk .wydruk-stopka {
    margin: 6px 0 0;
    font-size: 9px;
  }

  #wydruk .wydruk-podpisy {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin: 16px 0 0;
    font-size: 10px;
  }

  /* Grafik salonu: poziomo, tabela na całą szerokość. */
  #wydruk .wydruk-tabela {
    table-layout: fixed;
    font-size: 9.5px;
  }

  #wydruk .wydruk-tabela th,
  #wydruk .wydruk-tabela td {
    padding: 1px 1px;
    text-align: center;
    height: 26px;
    overflow-wrap: break-word;
  }

  #wydruk .wydruk-salon.w-gesty .wydruk-tabela th,
  #wydruk .wydruk-salon.w-gesty .wydruk-tabela td {
    height: 20px;
    font-size: 8.5px;
  }

  #wydruk .wydruk-tabela th small {
    display: block;
    font-weight: 400;
    font-size: 8px;
  }

  #wydruk .wydruk-tabela .w-lp {
    width: 22px;
  }

  #wydruk .wydruk-tabela .w-nazwisko {
    width: 120px;
    text-align: left;
    padding-left: 3px;
  }

  #wydruk .wydruk-tabela .w-etat {
    width: 32px;
  }

  #wydruk .wydruk-tabela .w-suma {
    width: 56px;
    font-weight: 700;
    white-space: nowrap;
  }

  #wydruk .wydruk-tabela .w-podpis {
    width: 110px;
  }

  #wydruk .w-zmiana {
    display: block;
    font-size: 9px;
    line-height: 1.1;
  }

  #wydruk .w-godz {
    display: block;
    font-size: 8px;
    color: #333;
    line-height: 1.1;
  }

  #wydruk .w-inny {
    font-size: 7px;
  }

  /* Kartka pracownika: pionowo, 31 dni + podsumowanie + klauzula + podpisy na jednej stronie. */
  #wydruk .wydruk-kartka .k-osoba {
    font-size: 12px;
  }

  #wydruk .kartka-tabela {
    font-size: 9.5px;
  }

  #wydruk .kartka-tabela th,
  #wydruk .kartka-tabela td {
    height: 15px;
    padding: 0 4px;
    text-align: left;
  }

  #wydruk .kartka-tabela .k-data {
    width: 42px;
  }

  #wydruk .kartka-tabela .k-dzien {
    width: 78px;
  }

  #wydruk .kartka-tabela .k-godziny {
    width: 150px;
  }

  #wydruk .kartka-tabela .k-liczba {
    width: 58px;
    text-align: right;
  }

  #wydruk .kartka-podsumowanie {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px 12px;
    margin: 8px 0 0;
    font-size: 10px;
  }

  #wydruk .kartka-podsumowanie dt {
    color: #333;
  }

  #wydruk .kartka-podsumowanie dd {
    margin: 0;
    font-weight: 700;
  }

  #wydruk .kartka-klauzula {
    margin: 12px 0 0;
    font-size: 11px;
  }

  #wydruk .kartka-podpisy {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin: 28px 0 0;
    font-size: 9px;
  }

  #wydruk .kartka-podpisy > div {
    flex: 1 1 0;
    text-align: center;
  }

  #wydruk .kartka-podpisy .linia {
    display: block;
    border-bottom: 1px solid #000;
    height: 26px;
    margin-bottom: 3px;
  }

  /* Premie: poziomo, liczby wyrównane do prawej. */
  #wydruk .premie-tabela {
    font-size: 9px;
  }

  #wydruk .premie-tabela th,
  #wydruk .premie-tabela td {
    text-align: right;
    white-space: nowrap;
  }

  #wydruk .premie-tabela .p-tekst {
    text-align: left;
    white-space: normal;
  }

  #wydruk .premie-tabela .p-kwota {
    font-weight: 700;
  }

  #wydruk .premie-tabela tfoot td {
    font-weight: 700;
    background: #f2f2f2;
  }
}

.sygnet { vertical-align: -6px; margin-right: 10px; border-radius: 4px; }
body.drukuj .sygnet { display: none; }

button[data-tab="aktualizacje"], #tab-aktualizacje { display: none !important; }