/* ---- Paleta ---- */
:root{
  --bg: #f7faff;          /* delikatne tło */
  --card: #ffffff;        /* białe panele */
  --ink: #0a1a2b;         /* główny kolor tekstu (granat) */
  --muted: #5f708a;       /* opisowy */
  --primary: #0b3d91;     /* granat */
  --primary-600:#1248a6;
  --primary-400:#1e73be;  /* średni niebieski */
  --primary-300:#4aa3ff;  /* jasny niebieski (akcent) */
  --line: #e5eef9;        /* linie */
  --focus: #4aa3ff55;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

/* ---- Layout ---- */
.header{
  position: sticky; top:0; z-index: 10;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-400) 100%);
  color:#fff;
  border-bottom: 1px solid #0b3d9133;
}
.header-inner{
  max-width: 1100px; margin:0 auto; padding: 10px 16px; display:flex; align-items:center; gap:14px;
}
.header img.logo{height:40px; width:auto; filter: drop-shadow(0 0 1px #0003);}
.brand{font-weight:700; letter-spacing:.3px}
.nav a{
  color:#eaf2ff; text-decoration:none; padding:8px 10px; border-radius:10px; display:inline-block; margin-right:6px;
}
.nav a:hover{ background:#ffffff22; color:#fff }

.main{max-width:1100px; margin:24px auto; padding:0 16px}
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow: 0 2px 8px #0b3d910f;}

/* ---- Typo ---- */
h1,h2,h3{margin:0 0 12px}
h1{font-size:28px}
h2{font-size:24px}
h3{font-size:18px; color:var(--primary)}

/* ---- Formularze ---- */
input[type="text"], input[type="email"], input[type="number"], input[type="date"], input[type="datetime-local"], select, textarea{
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; outline: none; background:#fff; color:var(--ink);
}
input:focus, select:focus, textarea:focus{ box-shadow: 0 0 0 4px var(--focus); border-color: var(--primary-400); }
button{
  background: var(--primary);
  color:#fff; border:0; padding:10px 16px; border-radius:12px; cursor:pointer; font-weight:600;
}
button:hover{ background: var(--primary-600); }

/* rozstaw formularza na listach */
form.inline>*{margin-right:8px; margin-bottom:8px}
form.inline>*:last-child{margin-right:0}

/* ---- Tabele ---- */
table{ width:100%; border-collapse: collapse; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
th, td{ padding:10px 12px; text-align:left; }
th{ background:#f1f6ff; color: var(--primary); font-weight:700; }
tr + tr td{ border-top:1px solid var(--line) }
tr:hover td{ background:#f9fbff }

/* ---- Linki treści ---- */
a{ color: var(--primary-400) }
a:hover{ color: var(--primary-300) }

/* ---- Utility ---- */
.mt-16{margin-top:16px}
.mb-16{margin-bottom:16px}

/* ====== AUTH ====== */
.auth-wrap{
  min-height: calc(100vh - 64px);
  display:flex; align-items:center; justify-content:center;
  padding: 32px;
}
.auth-card{
  width: 100%; max-width: 420px;
  background: var(--card);
  border:1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 8px 28px #0b3d9112;
  text-align: center;
}
.auth-logo{ height: 64px; width:auto; margin-bottom: 10px; }
.auth-sub{ color: var(--muted); margin-top: -6px; margin-bottom: 18px; }

.auth-form{ text-align: left; margin-top: 8px; }
.auth-form label{ display:block; margin-bottom: 12px; }
.auth-form label span{ display:block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.auth-form input{ width:100%; }

.btn-primary{
  width:100%;
  background: var(--primary);
  color:#fff; border:0;
  padding:12px 16px; border-radius:12px; font-weight:700;
}
.btn-primary:hover{ background: var(--primary-600); }

.alert{
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 14px;
}
.alert-error{ background:#ffefef; color:#a01414; border:1px solid #ffd0d0; }

.auth-note{ color: var(--muted); font-size: 13px; margin-top: 14px; }