* { box-sizing: border-box; }

:root {
  --accent: #3d5af1;
  --accent-dark: #2c42c9;
  --text: #14161f;
  --muted: #6b7280;
  --border: #e7e8ee;
  --surface: #f4f5f9;
  --danger-bg: #fdeceb;
  --danger-text: #b3261e;
  --danger: #d33f3f;
  --success: #1a8a4a;
  --page-bg: #f6f7fb;
  --card-bg: #ffffff;
}

body {
  font-family: 'Inter', 'Segoe UI', -apple-system, Roboto, Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: var(--text);
  min-height: 100vh;
  background: var(--page-bg);
}

.page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
/* Strony panelu admina maja zmienna wysokosc (raz krotka tabela, raz dluga) -
   centrowanie w pionie powodowaloby "skakanie" ekranu przy przejsciu miedzy
   stronami, wiec te przypinamy do gory. */
.page:has(.admin-card) {
  align-items: flex-start;
  justify-content: stretch;
  padding: 24px 32px;
}

.card {
  width: 100%;
  max-width: 440px;
  background: var(--card-bg);
  border-radius: 14px;
  padding: 36px 34px;
  box-shadow: 0 1px 2px rgba(20, 22, 31, .04), 0 8px 24px rgba(20, 22, 31, .06);
  border: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.brand-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--accent);
  flex-shrink: 0;
}
.brand-badge svg { width: 22px; height: 22px; }
h1 { display: flex; align-items: center; line-height: 1; gap: 10px; font-size: 21px; margin: 0; letter-spacing: -.2px; }
h1 svg { display: block; width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }
.admin-card h1 { margin-bottom: 4px; }
h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -.1px;
  margin: 26px 0 12px;
}
h2 svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }

.lang-switch {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 22px;
}
.flag-btn {
  display: block;
  width: 40px;
  height: 28px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  transition: transform .12s ease, border-color .12s ease;
  line-height: 0;
}
.flag-btn svg { width: 100%; height: 100%; display: block; }
.flag-btn:hover { transform: translateY(-2px); }
.flag-btn.active { border-color: var(--accent); transform: translateY(-2px); }

label { display: block; margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--muted); }
input[type=text], input[type=password], input[type=date], input[type=email], select, textarea {
  width: 100%;
  padding: 12px 14px;
  margin-top: 6px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  background: #fafbfe;
  font-family: inherit;
  transition: border-color .12s ease, background .12s ease;
}
input[type=text]:focus, input[type=password]:focus, input[type=date]:focus, input[type=email]:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
}

input[type=file] {
  width: 100%;
  margin-top: 6px;
  padding: 4px;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-size: 13.5px;
  color: var(--muted);
}
input[type=file]::file-selector-button {
  margin-right: 12px;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  transition: background .12s ease;
}
input[type=file]::file-selector-button:hover { background: var(--accent-dark); }

button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 22px;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  width: 100%;
  text-align: center;
  transition: background .12s ease, transform .1s ease;
}
button:hover, .btn:hover { background: var(--accent-dark); transform: translateY(-1px); }
button:disabled { opacity: .6; cursor: default; transform: none; }

.alert {
  background: var(--danger-bg);
  color: var(--danger-text);
  padding: 12px 14px;
  border-radius: 10px;
  margin-top: 14px;
  font-size: 14px;
  border: 1px solid rgba(155, 28, 28, .15);
}

.hint { font-size: 12.5px; color: var(--muted); margin-top: 22px; text-align: center; line-height: 1.5; }
.topright {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  font-size: 14px;
  margin: -8px 0 4px;
}
.topright .btn-logout-small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--danger);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: background .12s ease;
}
.topright .btn-logout-small svg { width: 15px; height: 15px; }
.topright .btn-logout-small:hover { background: #b53333; }

.card.wide-card { max-width: 560px; }

/* Okno logowania - wieksze elementy, latwiejsze dla starszych osob */
.card.login-card {
  max-width: 660px;
  padding: 44px 48px;
}
.login-card .brand-badge { width: 52px; height: 52px; }
.login-card .brand-badge svg { width: 28px; height: 28px; }
.login-card h1 { font-size: 26px; }
.login-card .flag-btn { width: 52px; height: 36px; }
.login-card label { font-size: 16px; margin-top: 20px; }
.login-card input[type=text] {
  padding: 16px 18px;
  font-size: 19px;
  border-radius: 12px;
  margin-top: 8px;
}
.login-card button {
  margin-top: 30px;
  padding: 17px 22px;
  font-size: 19px;
  border-radius: 12px;
}
.login-card .hint { font-size: 14.5px; margin-top: 26px; }
.login-card .alert { font-size: 15.5px; padding: 14px 16px; }

.payslip-tiles { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.payslip-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color .12s ease;
}
.payslip-tile:hover { border-color: var(--accent); }
.payslip-tile-info { display: flex; align-items: center; gap: 14px; }
.payslip-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fff;
  color: var(--accent);
  flex-shrink: 0;
}
.payslip-tile-icon svg { width: 20px; height: 20px; }
.payslip-tile-month { font-size: 17px; font-weight: 700; }
.payslip-tile-year { font-size: 13px; color: var(--muted); }
.payslip-tile .btn { margin-top: 0; width: auto; padding: 10px 20px; font-size: 14px; white-space: nowrap; }

.btn-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 28px;
  padding: 14px 18px;
  border-radius: 10px;
  border: none;
  background: var(--danger);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: background .12s ease, transform .1s ease;
}
.btn-logout svg { width: 18px; height: 18px; }
.btn-logout:hover { background: #b53333; transform: translateY(-1px); }

/* Panel admina - prostszy, funkcjonalny wyglad, na pelna szerokosc ekranu */
.admin-card { max-width: none; width: 100%; border-radius: 12px; }
table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
th { background: #f7f8fc; font-weight: 600; color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .3px; }
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-top: 12px; }
.filters div { display: flex; flex-direction: column; }
.filters label { margin: 0 0 4px 0; font-size: 12px; }
.filters button, .filters .btn { margin-top: 0; width: auto; }
.status-SUCCESS { color: var(--success); font-weight: 600; }
.status-DENIED_PERIOD, .status-DENIED_MISMATCH, .status-DENIED_NOT_FOUND, .status-ERROR { color: var(--danger-text); font-weight: 600; }

/* Pasek z login/wyloguj + kafelki nawigacji "przyklejony" do gory karty admina -
   zostaje na miejscu przy przewijaniu dlugich tabel, zamiast znikac/skakac.
   Wyrozniony tlem/ramka jako osobny "header", odciety od tresci strony ponizej. */
.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  margin: 0 -34px 20px;
  padding: 14px 34px 16px;
  border-bottom: 1px solid var(--border);
}
.topright {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}

.admin-nav-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}
.admin-nav-tile {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #eef1fe;
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.admin-nav-tile .admin-nav-tile-icon { color: var(--accent); display: flex; }
.admin-nav-tile .admin-nav-tile-icon svg { width: 16px; height: 16px; }
.admin-nav-tile:hover { border-color: var(--accent); color: var(--accent); }
.admin-nav-tile.active { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 1px var(--accent) inset; color: var(--accent); }

/* Wizualne oznaczenie przyciskow dostepnych tylko dla roli ADMIN. */
.admin-only-label {
  margin: 2px 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--muted);
}
.admin-nav-tile--admin { border-style: dashed; background: var(--danger-bg); }
.admin-nav-tile--admin:hover { border-color: var(--danger); color: var(--danger-text); }
.admin-nav-tile--admin.active { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger) inset; color: var(--danger-text); }

.birth-date-fields { display: flex; gap: 10px; margin-top: 6px; }
.birth-date-field { flex: 1; min-width: 0; }
.birth-date-mini-label { display: block; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 4px; }
.birth-date-fields select { margin-top: 0; width: 100%; }

/* Na waskich ekranach dzien/miesiac/rok w osobnych liniach - w ciasnym rzedzie
   obok siebie znikala czytelnosc ktora kolumna to co (przed wyborem widac bylo
   tylko placeholder w selekcie, po wyborze - juz nic). Mini-etykieta nad kazdym
   polem rozwiazuje to na kazdej szerokosci, a stackowanie dodatkowo daje wiecej
   miejsca na maleńkich ekranach. */
@media (max-width: 480px) {
  .birth-date-fields { flex-direction: column; }
}

.summary-box { display: flex; gap: 16px; flex-wrap: wrap; margin: 14px 0 22px; }
.summary-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; min-width: 140px; }
.summary-tile .num { font-size: 22px; font-weight: 700; }
.summary-tile .num.warn { color: var(--danger-text); }
.summary-tile .label { font-size: 12px; color: var(--muted); }

@media (prefers-color-scheme: dark) {
  body { background: #12131c; color: #e8e9ee; }
  .card { background: #1a1c29; border-color: #2a2d3d; }
  .admin-topbar { background: #1a1c29; }
  h2 { color: #e8e9ee; }
  label { color: #9096ab; }
  .birth-date-mini-label { color: #9096ab; }
  input[type=text], input[type=password], input[type=date], input[type=email], select, textarea { background: #232535; border-color: #363b52; color: #e8e9ee; }
  input:focus, textarea:focus { background: #2c3047; }
  input[type=file] { background: #232535; border-color: #363b52; color: #9096ab; }
  th { background: #1f2130; color: #9096ab; }
  td, th { border-color: #2a2d3d; }
  .hint { color: #9096ab; }
  .topright span { color: #9096ab; }
  .brand-badge { background: #232535; }
  .payslip-tile { background: #1f2130; border-color: #2a2d3d; }
  .payslip-tile-icon { background: #1a1c29; }
  .payslip-tile-year { color: #9096ab; }
  .summary-tile { background: #1f2130; border-color: #2a2d3d; }
  .admin-nav-tile { background: #202847; border-color: #2e3a5e; color: #e8e9ee; }
  .admin-nav-tile.active { background: #232946; }
  .admin-nav-tile--admin { background: #2a1f24; border-color: #4a2b32; }
  .admin-nav-tile--admin.active { background: #3a232a; }
}