* { box-sizing: border-box; }

:root {
  --accent: #4f6bf0;
  --accent-dark: #3b52c4;
  --text: #1a1d29;
  --muted: #6b7280;
  --border: #e5e7eb;
  --danger-bg: #fde8e8;
  --danger-text: #9b1c1c;
  --success: #1c7c1c;
}

body {
  font-family: 'Segoe UI', -apple-system, Roboto, Arial, sans-serif;
  margin: 0;
  padding: 0;
  color: var(--text);
  min-height: 100vh;
  background: linear-gradient(135deg, #eef1fd 0%, #f7f8fc 45%, #eef6f4 100%);
}

.page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.card {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: 16px;
  padding: 36px 34px;
  box-shadow: 0 10px 40px rgba(30, 41, 90, .12), 0 2px 8px rgba(30, 41, 90, .06);
  border: 1px solid rgba(255,255,255,.6);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.brand-badge {
  font-size: 26px;
  line-height: 1;
}
h1 { font-size: 21px; margin: 0; letter-spacing: -.2px; }
h2 { font-size: 16px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; margin: 24px 0 10px; }

.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], select {
  width: 100%;
  padding: 12px 14px;
  margin-top: 6px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 15px;
  background: #fafbfe;
  transition: border-color .12s ease, background .12s ease;
}
input[type=text]:focus, input[type=password]:focus, input[type=date]:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  background: #fff;
}

button, .btn {
  display: inline-block;
  margin-top: 22px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  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;
  box-shadow: 0 4px 14px rgba(79, 107, 240, .35);
  transition: transform .1s ease, box-shadow .1s ease;
}
button:hover, .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(79, 107, 240, .4); }
button:disabled { opacity: .7; 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 { text-align: right; font-size: 14px; margin: -8px 0 4px; }
.topright a { color: var(--muted); text-decoration: none; }
.topright a:hover { color: var(--accent); text-decoration: underline; }

.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 { font-size: 34px; }
.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: 14px; }
.payslip-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f3f5ff, #eef7f3);
  border: 1.5px solid var(--border);
  transition: transform .12s ease, box-shadow .12s ease;
}
.payslip-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(30,41,90,.1); }
.payslip-tile-info { display: flex; align-items: center; gap: 14px; }
.payslip-tile-icon { font-size: 30px; line-height: 1; }
.payslip-tile-month { font-size: 19px; font-weight: 700; }
.payslip-tile-year { font-size: 13px; color: var(--muted); }
.payslip-tile .btn { margin-top: 0; width: auto; padding: 12px 22px; font-size: 14.5px; white-space: nowrap; }

.btn-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 26px;
  padding: 12px 18px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.btn-logout:hover { border-color: #d1476b; color: #d1476b; background: #fff5f7; }

/* Panel admina - prostszy, funkcjonalny wyglad */
.admin-card { max-width: 1150px; 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; }

.admin-nav-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin: 4px 0 26px;
}
.admin-nav-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 26px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f3f5ff, #eef7f3);
  border: 1.5px solid var(--border);
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.admin-nav-tile .admin-nav-tile-icon { font-size: 32px; line-height: 1; }
.admin-nav-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(30,41,90,.14); }
.admin-nav-tile.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(79,107,240,.25) inset; }

.birth-date-fields { display: flex; gap: 10px; margin-top: 6px; }
.birth-date-fields select { margin-top: 0; }

.summary-box { display: flex; gap: 16px; flex-wrap: wrap; margin: 14px 0 22px; }
.summary-tile { background: #f3f5ff; 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: linear-gradient(135deg, #171a26 0%, #12141c 50%, #14181a 100%); color: #e8e9ee; }
  .card { background: #1e2130; border-color: rgba(255,255,255,.06); }
  h2 { color: #9096ab; }
  label { color: #9096ab; }
  input[type=text], input[type=password], input[type=date], select { background: #262a3d; border-color: #363b52; color: #e8e9ee; }
  input:focus { background: #2c3047; }
  th { background: #252838; color: #9096ab; }
  td, th { border-color: #363b52; }
  .hint, .topright a { color: #9096ab; }
  .payslip-tile { background: linear-gradient(135deg, #262a42, #212a2a); border-color: #363b52; }
  .payslip-tile-year { color: #9096ab; }
  .btn-logout { background: #1e2130; border-color: #363b52; color: #9096ab; }
  .btn-logout:hover { border-color: #e2718f; color: #e2718f; background: #2a2030; }
  .summary-tile { background: #262a3d; border-color: #363b52; }
  .admin-nav-tile { background: linear-gradient(135deg, #262a42, #212a2a); border-color: #363b52; color: #e8e9ee; }
}