:root { color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; font: 13px/1.35 "Segoe UI", system-ui, sans-serif; background: #f6f7f9; color: #1f2733; }

/* atrybut hidden ma zawsze wygrywać z display:flex/flexbox – inaczej panele nie znikają */
[hidden] { display: none !important; }

/* logowanie */
#login-view { display: flex; min-height: 100vh; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #12324f, #1c4365 60%, #2f6da8); }
#login-form { background: #fff; padding: 30px 34px; border-radius: 14px; box-shadow: 0 18px 60px rgba(0,0,0,.35);
  display: flex; flex-direction: column; gap: 10px; min-width: 320px; }
#login-form h1 { margin: 0 0 6px; font-size: 19px; color: #12324f; }
#login-form label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; color: #3c4c5e; }
#login-form input { padding: 9px 10px; border: 1px solid #b7c2cd; border-radius: 8px; font: inherit; }
#login-form button { padding: 10px; border: none; border-radius: 8px; background: #12324f; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
#login-form button:hover { background: #1c4365; }
#login-form small { color: #6b7c8e; }

/* nagłówek */
header { display: flex; align-items: center; gap: 14px; padding: 8px 14px; background: #12324f; color: #fff;
  position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
header h1 { font-size: 15px; margin: 0; font-weight: 600; }
header small { opacity: .6; font-weight: 400; }
nav { display: flex; gap: 6px; flex-wrap: wrap; }
nav button { padding: 6px 11px; border: 1px solid #3b5b78; border-radius: 6px; background: #1c4365; color: #fff; cursor: pointer; font: inherit; }
nav button.active { background: #2f6da8; border-color: #5d8db8; }
#month-nav { margin-left: auto; display: flex; gap: 6px; align-items: center; }
#month-nav button { padding: 5px 10px; border: 1px solid #3b5b78; border-radius: 6px; background: #1c4365; color: #fff; cursor: pointer; }
#ym-label { min-width: 120px; text-align: center; font-weight: 600; text-transform: capitalize; }
#whoami { display: flex; gap: 8px; align-items: center; font-size: 12px; }
#whoami button { padding: 5px 10px; border: 1px solid #3b5b78; border-radius: 6px; background: #1c4365; color: #fff; cursor: pointer; }

/* role */
body.is-user .admin-only { display: none !important; }

main { padding: 10px 14px; }
.toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.toolbar button, .toolbar select, .toolbar input { padding: 6px 10px; border: 1px solid #b7c2cd; border-radius: 6px; background: #fff; font: inherit; cursor: pointer; }
.toolbar button { background: #1c4365; border-color: #1c4365; color: #fff; font-weight: 600; }
.toolbar .hint { color: #5c6d7f; }
label.inline { display: flex; gap: 6px; align-items: center; font-weight: 600; color: #3c4c5e; }
#legend i, #legend2 i { font-style: normal; margin-left: 8px; padding: 2px 8px; border-radius: 4px; border: 1px solid #c9d2dc; background: #fff; }

/* siatki */
.grid-wrap { overflow: auto; max-height: calc(100vh - 150px); border: 1px solid #d5dce4; border-radius: 8px; background: #fff; }
table.grid { border-collapse: collapse; background: #fff; }
table.grid th, table.grid td { border: 1px solid #e3e8ee; padding: 3px 2px; text-align: center; min-width: 38px; white-space: nowrap; font-size: 11.5px; }
table.grid th { background: #eef2f6; font-size: 12px; padding: 3px 8px; }
table.grid th small { color: #7b8a99; font-weight: 400; }
/* nagłówki kolumn (osoby) przyklejone do góry */
table.grid thead th { position: sticky; top: 0; z-index: 3; background: #dbe4ee; }
/* pierwsza kolumna (dzień) przyklejona z lewej */
table.grid th:first-child { position: sticky; left: 0; z-index: 4; background: #eef2f6; min-width: 52px; }
table.grid td { position: static; }
/* nagłówki kategorii (office/run/infra/other) */
table.grid th.cat-hd { background: #c3d3e3; font-weight: 700; color: #12324f; }
table.grid th.emp-hd { background: #e6edf4; }
table.grid td[data-click] { cursor: pointer; }
table.grid td.wknd { background: #f2f4f7; }
table.grid td.sum { cursor: default; background: #eef2f6; font-weight: 700; }
table.grid td.s-work { background: #e3f2fd; }
table.grid td.s-abs { background: #fdeaea; }
table.grid td.s-empty { color: #b6c0ca; }
table.grid td.s-morning { background: #fff9c4; }     /* rano 6:00 - jasny żółty */
table.grid td.s-afternoon { background: #ffe0b2; }   /* popołudnie 13:00 - jasny pomarańczowy */
table.grid td.s-night { background: #bbdefb; }       /* noc 20/21:00 - jasny niebieski */
table.grid td.s-9to17 { background: #f1f8e9; }      /* 09:00-17:00 - jaśniejszy, zielonawy */
#run-summary-wrap { margin-top: 12px; }
#run-summary-wrap h4 { margin: 6px 0; color: #12324f; }
#run-summary-wrap table.grid th:first-child { min-width: 52px; }
#run-summary-wrap table.grid td { min-width: 60px; font-weight: 600; }
select.role-sel { padding: 4px 6px; border: 1px solid #b7c2cd; border-radius: 5px; font: inherit; }
table.grid td.ok { background: #e8f5e9; }
table.grid td.diff { background: #fff3e0; font-weight: 700; }
table.grid td.missing { background: #fff8d6; }
table.grid td.plan { color: #8595a6; }

/* payroll */
#payroll { margin-top: 8px; border: 1px solid #d5dce4; border-radius: 8px; overflow: hidden; border-collapse: collapse; background: #fff; }
#payroll th, #payroll td { border: 1px solid #e3e8ee; padding: 5px 9px; text-align: center; }
#payroll th { background: #eef2f6; }
#payroll caption { caption-side: top; text-align: left; font-weight: 700; padding: 8px; background: #fff; }
#payroll td.ok { background: #e8f5e9; } #payroll td.diff { background: #ffe9e5; font-weight: 700; }

/* tabele admin (użytkownicy/pracownicy) */
#users-table, #emp-table { border-collapse: collapse; background: #fff; border: 1px solid #d5dce4; border-radius: 8px; margin-top: 10px; width: auto; }
#users-table th, #users-table td, #emp-table th, #emp-table td { border: 1px solid #e3e8ee; padding: 6px 10px; text-align: left; }
#users-table th, #emp-table th { background: #eef2f6; }
#users-table button, #emp-table button { padding: 3px 8px; margin-right: 4px; border: 1px solid #b7c2cd; border-radius: 5px; background: #fff; cursor: pointer; font: inherit; font-size: 11.5px; }
.row-off td { color: #98a5b3; text-decoration: line-through; }
.user-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; background: #fff; padding: 10px;
  border: 1px solid #d5dce4; border-radius: 8px; }
.user-form input, .user-form select { padding: 7px 9px; border: 1px solid #b7c2cd; border-radius: 6px; font: inherit; min-width: 150px; }
.user-form button { padding: 7px 14px; border: none; border-radius: 6px; background: #1c7430; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.err { color: #b3261e; font-size: 12px; }

/* dialogi */
dialog { border: none; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.25); padding: 18px; min-width: 360px; }
dialog::backdrop { background: rgba(10,25,40,.45); }
dialog h3 { margin: 0 0 4px; }
dialog p { margin: 0 0 10px; color: #4a5a6c; }
dialog label { display: block; margin: 8px 0; font-weight: 600; color: #3c4c5e; }
dialog select, dialog textarea, dialog input { width: 100%; padding: 6px; font: inherit; border: 1px solid #b7c2cd; border-radius: 6px; }
dialog menu { display: flex; gap: 8px; padding: 0; margin: 12px 0 0; }
dialog menu button { padding: 7px 14px; border-radius: 6px; border: 1px solid #b7c2cd; background: #fff; cursor: pointer; font: inherit; }
dialog menu button#dlg-save, dialog menu button#pw-save { background: #1c7430; border-color: #1c7430; color: #fff; font-weight: 700; }

/* ---------- obecnosci: kolumna komentarzy + przycisk potwierdzenia ---------- */
table.grid th.cm-hd { background:#dbe4ee; }
table.grid td.cm-col { text-align:left; white-space:normal; min-width:230px; max-width:360px; font-size:11px; color:#44566a; vertical-align:top; line-height:1.5; }
table.grid td.cm-col b { color:#12324f; }
table.grid th.conf-hd { background:#e6edf4; padding:1px 2px; }
button.confirm-emp { border:1px solid #1c7430; background:#e8f5e9; color:#1c7430; border-radius:4px; font-weight:700; cursor:pointer; padding:0 8px; font-size:12px; line-height:18px; }
button.confirm-emp:hover { background:#1c7430; color:#fff; }

/* ---------- rozliczenie kwartalne ---------- */
#quarter { border-collapse:collapse; background:#fff; }
#quarter caption { caption-side:top; text-align:left; font-weight:700; padding:8px; color:#12324f; }
#quarter th, #quarter td { border:1px solid #cdd6e0; padding:4px 8px; text-align:center; font-size:12px; }
#quarter th { background:#dbe4ee; }
#quarter th.q-hd { background:#c3d3e3; font-weight:700; color:#12324f; }
#quarter th.q-osoba { background:#eef2f6; text-align:left; min-width:170px; }
#quarter .q-start { border-left:2.5px solid #12324f; }
#quarter td { font-variant-numeric:tabular-nums; }
#quarter tr:nth-child(odd) td:not(.diff):not(.q-empty):not(.q-sum) { background:#f7f9fb; }
#quarter td.diff { background:#ffe9e5; font-weight:700; }
#quarter td.q-empty { color:#9aa7b4; background:#fbfcfd; }
#quarter td.q-sum { background:#eef2f6; font-weight:700; }
#quarter small { color:#7b8a99; font-weight:400; }

/* ---------- obecnosci: potwierdzanie dzien po dniu + plan wyszarzony ---------- */
table.grid th.conf-day-hd { background:#dbe4ee; }
table.grid td.conf-day { padding:1px 2px; background:#fbfcfd; }
button.confirm-day { border:1px solid #2f6da8; background:#e3f2fd; color:#12324f; border-radius:4px; font-weight:700; cursor:pointer; padding:0 7px; font-size:12px; line-height:18px; }
button.confirm-day:hover { background:#2f6da8; color:#fff; }
/* niepotwierdzone (żółte) — plan wyszarzony */
table.grid td.plan-ghost { color:#9aa7b4; font-weight:400; }