:root {
  color-scheme: light;
  --bg: #f7f7f4;
  --ink: #202124;
  --muted: #5e625f;
  --line: #cfd4d0;
  --panel: #ffffff;
  --accent: #16697a;
  --accent-dark: #0c4652;
  --warn: #8a5a00;
  --ok-bg: #eef7f1;
  --mark-bg: #fff5d6;
  --vacation-bg: #e8f6e9;
  --vacation-line: #3f7d45;
  --holiday-bg: #e8f3fb;
  --holiday-line: #2f6f9f;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
}
a { color: inherit; }
.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--line);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 2;
}
.brand { font-weight: 750; text-decoration: none; }
.topbar nav { display: flex; gap: .75rem; flex: 1; }
.topbar nav a { text-decoration: none; padding: .6rem .4rem; }
.page { max-width: 1180px; margin: 0 auto; padding: 1rem; }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(1.35rem, 2vw, 2rem); margin-bottom: .2rem; }
h2 { font-size: 1.05rem; }
button, .button, input, select {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .55rem .75rem;
  font: inherit;
}
button, .button {
  background: var(--accent);
  color: white;
  border-color: var(--accent-dark);
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}
.button-disabled {
  background: #d9dedb;
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}
.button-muted {
  background: #eef0ee;
  border-color: var(--line);
  color: var(--ink);
}
.icon-button { min-width: 44px; padding: .3rem; }
input, select { width: 100%; background: #fff; }
input[type="checkbox"] {
  width: auto;
  min-height: auto;
}
input.field-invalid {
  border-color: #b42318 !important;
  outline: 2px solid #b42318;
  outline-offset: 1px;
  background: #fff1f0;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, .16);
}
label { display: grid; gap: .25rem; color: var(--muted); font-weight: 650; }
label input, label select { color: var(--ink); font-weight: 400; }
.stack { display: grid; gap: .85rem; }
.login-panel, .panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
}
.login-panel { max-width: 420px; margin: 8vh auto; }
.error { color: #9b1c1c; font-weight: 700; }
.success { color: #166534; font-weight: 700; }
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 1rem;
  margin-bottom: 1rem;
}
.actions, .inline { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.checkbox-label {
  display: flex;
  grid-template-columns: none;
  flex-direction: row;
  align-items: center;
}
.selector { margin-bottom: 1rem; max-width: 360px; }
.summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin: 1rem 0;
}
.summary div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .9rem;
  background: #fff;
}
.summary span { display: block; color: var(--muted); font-size: .9rem; }
.summary strong { font-size: 1.35rem; }
.week-form { display: grid; gap: .9rem; }
.week-list { display: grid; gap: .8rem; }
.day-row {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 7px solid var(--line);
  border-radius: 8px;
  padding: .85rem;
}
.day-head {
  display: flex;
  gap: .6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.tag {
  border: 1px solid var(--warn);
  color: var(--warn);
  padding: .15rem .45rem;
  border-radius: 999px;
  font-weight: 700;
}
.muted-tag {
  border-color: var(--line);
  color: var(--muted);
}
.entry-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr)) minmax(190px, 1fr);
  gap: .7rem;
  align-items: end;
}
.time24 {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.totals {
  display: grid;
  gap: .15rem;
  font-weight: 750;
}
.save-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  padding: .75rem 0 0;
  background: linear-gradient(180deg, rgba(247,247,244,0), var(--bg) 35%);
}
.save-bar button { min-width: 220px; }
.status-sick { background: var(--mark-bg); border-left-color: var(--warn); }
.status-holiday { background: var(--holiday-bg); border-left-color: var(--holiday-line); }
.status-vacation_full, .status-vacation_half { background: var(--vacation-bg); border-left-color: var(--vacation-line); }
.status-work { border-left-color: var(--accent); }
.status-locked, .day-locked {
  background: #eef0ee;
  border-left-color: #9aa19c;
  color: var(--muted);
}
.day-locked input,
.day-locked select {
  background: #e4e7e4;
  color: var(--muted);
}
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.hint { color: var(--muted); font-weight: 700; margin-bottom: 0; }
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.month-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.month-table th, .month-table td { padding: .55rem; border-bottom: 1px solid var(--line); text-align: left; }
.month-table th { background: #e8ece9; }
.admin-users {
  min-width: 0;
  table-layout: fixed;
}
.admin-users th,
.admin-users td {
  padding: .45rem;
  vertical-align: middle;
}
.admin-user-email {
  width: auto;
  overflow-wrap: anywhere;
}
.admin-user-role {
  width: 76px;
  text-align: center;
}
.admin-user-password {
  width: 92px;
  text-align: center;
}
.admin-users .icon-button {
  width: 44px;
  min-width: 44px;
}
.admin-inline-form input[type="password"] { min-width: 180px; width: auto; }
.password-dialog {
  width: min(420px, calc(100vw - 2rem));
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
}
.password-dialog::backdrop {
  background: rgba(0, 0, 0, .35);
}
.month-table .status-sick td { background: var(--mark-bg); }
.month-table .status-holiday td { background: var(--holiday-bg); }
.month-table .status-vacation_full td,
.month-table .status-vacation_half td { background: var(--vacation-bg); }

.pdf-page { background: white; font-size: 11px; }
.pdf-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 10px; }
.pdf-header h1 { font-size: 18px; }
.print { min-width: 0; font-size: 10px; }
.print th, .print td { padding: 3px 4px; }
.pdf-footer { position: fixed; right: 0; bottom: 0; font-size: 9px; }

@page {
  size: A4;
  margin: 12mm;
}

@media (max-width: 780px) {
  .topbar, .toolbar { align-items: stretch; flex-direction: column; }
  .topbar nav { width: 100%; justify-content: space-between; }
  .summary { grid-template-columns: 1fr; }
  .entry-grid { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .actions, .inline { width: 100%; }
  .actions > *, .inline > * { flex: 1; }
  .save-bar button { width: 100%; }
  .admin-users { min-width: 420px; }
}