* { box-sizing: border-box; }

/* Motyw domyślny (zieleń). Motywy zmieniają tylko te 4 zmienne. */
:root { --c-primary:#2c6e49; --c-dark:#1d4d33; --c-bg:#f4f6f8; --c-soft:#eef5f0; }
body.motyw-morski    { --c-primary:#0f766e; --c-dark:#0b5650; --c-bg:#eef6f5; --c-soft:#e1efed; }
body.motyw-amber     { --c-primary:#b45617; --c-dark:#8a4011; --c-bg:#faf5ec; --c-soft:#f5ece0; }
body.motyw-granat    { --c-primary:#243b53; --c-dark:#172838; --c-bg:#f2f5f8; --c-soft:#e6edf3; }
body.motyw-fiolet    { --c-primary:#5b4b9e; --c-dark:#423676; --c-bg:#f5f4fb; --c-soft:#ebe8f6; }
body.motyw-burgund   { --c-primary:#8a2d4a; --c-dark:#6a2038; --c-bg:#fbf3f6; --c-soft:#f3e4ea; }
body.motyw-grafit    { --c-primary:#3f4a55; --c-dark:#2b333b; --c-bg:#f4f5f7; --c-soft:#e8ebee; }
body.motyw-blekit    { --c-primary:#1f6fb2; --c-dark:#155488; --c-bg:#eff5fb; --c-soft:#e0edf8; }
body.motyw-oliwka    { --c-primary:#5b6e2a; --c-dark:#43511e; --c-bg:#f6f7ee; --c-soft:#ecf0dd; }
body.motyw-czekolada { --c-primary:#6b4423; --c-dark:#4f3119; --c-bg:#f8f4ef; --c-soft:#eee4d8; }

body { font-family: 'Segoe UI', Arial, sans-serif; margin: 0; background: var(--c-bg); color: #222; font-size: 16px; }
header { background: var(--c-primary); color: #fff; padding: 14px 24px; }
header h1 { margin: 0 0 10px; font-size: 1.5em; }
nav a { color: #fff; text-decoration: none; margin-right: 6px; padding: 8px 14px; border-radius: 6px; display: inline-block; }
nav a:hover { background: var(--c-dark); }
main { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
h2 { color: var(--c-primary); }
table { width: 100%; border-collapse: collapse; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.1); margin-bottom: 24px; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #e3e7ea; }
th { background: var(--c-primary); color: #fff; }
tr:hover td { background: var(--c-soft); }
td.liczba, th.liczba { text-align: right; }
form.panel, .panel { background: #fff; padding: 18px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.1); margin-bottom: 24px; }
label { display: block; margin: 10px 0 4px; font-weight: 600; }
input, select, textarea { width: 100%; max-width: 420px; padding: 9px; border: 1px solid #bbb; border-radius: 6px; font-size: 16px; }
button, .przycisk { background: var(--c-primary); color: #fff; border: none; padding: 11px 22px; border-radius: 6px; font-size: 16px; cursor: pointer; margin-top: 14px; text-decoration: none; display: inline-block; }
button:hover, .przycisk:hover { background: var(--c-dark); }
.przycisk-maly { padding: 5px 10px; font-size: 14px; margin: 0; }
.przycisk-czerwony { background: #b02e2e; }
.przycisk-szary { background: #8a949c; }
.przycisk-szary:hover { background: #6d767d; }
.przycisk-czerwony:hover { background: #8a2222; }
.komunikat { padding: 12px 16px; border-radius: 6px; margin-bottom: 18px; }
.komunikat.ok { background: #d8f0e0; color: #1d4d33; }
.komunikat.blad { background: #f8d7d7; color: #8a2222; }
.kafelki { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 24px; }
.kafelek { background: #fff; padding: 18px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.kafelek .etykieta { color: #666; font-size: .9em; }
.kafelek .wartosc { font-size: 1.7em; font-weight: 700; color: var(--c-primary); margin-top: 4px; }
.wiersz-pozycji { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 8px; }
.wiersz-pozycji > div { flex: 1; min-width: 130px; }
footer { text-align: center; color: #888; padding: 24px; font-size: .85em; }
.malo { color: #b02e2e; font-weight: 700; }

/* Układ z panelem bocznym (menu po lewej) */
body.uklad-side { display: flex; align-items: stretch; min-height: 100vh; }
body.uklad-side header { width: 210px; flex: none; padding: 16px 14px; }
body.uklad-side header h1 { font-size: 1.25em; margin-bottom: 16px; }
body.uklad-side nav a { display: block; margin: 2px 0; }
body.uklad-side main { flex: 1; max-width: none; margin: 20px; padding: 0; }
body.uklad-side footer { display: none; }