/* ══════════════════════════════════════════════════════════════
   APS CRM — wygląd

   Kolory wzięte wprost z logo Akademii (próbka pikseli):
     #061C4B  najciemniejszy granat
     #0A3488  granat dominujący
     #296AEA  niebieski — jedyny akcent w całej apce
     #6897F4  jasny niebieski
     #EAF5F9  mgła, najjaśniejszy błękit

   Zasady:
   1. Obudowa się chowa, nazwiska wychodzą na wierzch.
   2. Kolor znaczy „aktywne" albo „pilne". Nigdy nie zdobi.
   3. Włoskie linie zamiast cieni. Cień mają tylko rzeczy, które unoszą się nad treścią.
   4. Liczby w jednej szerokości, wyrównane do prawej — kwoty nie skaczą.
   5. Czerwień wyłącznie dla spraw po terminie.
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600&display=swap');

:root {
  color-scheme: only light;
  /* z logo */
  --granat-900: #061c4b;
  --granat-700: #0a3488;
  --niebieski: #296aea;
  --niebieski-jasny: #6897f4;
  --mgla: #eaf5f9;

  /* powierzchnie */
  --tlo: #f4f5f7;
  --panel: #ffffff;
  --panel-cichy: #fafbfc;
  --pasek-tlo: rgba(248, 249, 251, .78);

  /* tekst */
  --tekst: #16181d;
  --tekst-2: #585d67;
  --tekst-3: #6e7480;   /* najjaśniejszy, jaki przechodzi WCAG AA na białym */

  /* linie i stany */
  --linia: rgba(16, 24, 48, .09);
  --linia-mocna: rgba(16, 24, 48, .16);
  --najazd: rgba(41, 106, 234, .07);
  --wybrane: rgba(41, 106, 234, .12);

  --czerwony: #c22f2f;
  --czerwony-tlo: rgba(194, 47, 47, .09);
  --zielony: #157a4a;
  --zielony-tlo: rgba(21, 122, 74, .1);
  --bursztyn: #9a5b06;
  --bursztyn-tlo: rgba(154, 91, 6, .1);

  /* kształt */
  --r-pole: 10px;
  --r-karta: 14px;
  --r-okno: 20px;
  --cien-okno: 0 24px 64px rgba(6, 28, 75, .22), 0 2px 8px rgba(6, 28, 75, .1);
  --cien-unos: 0 6px 20px rgba(6, 28, 75, .14);

  --szyb: 180ms cubic-bezier(.32, .72, 0, 1);

  --tekst-font: -apple-system, "SF Pro Text", system-ui, "Segoe UI Variable Text",
                "Segoe UI", Roboto, sans-serif;
  --znak-font: "Cinzel", "Trajan Pro", Georgia, serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; height: 100%; }

body {
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--tekst-font);
  font-size: 15px;
  line-height: 1.47;
  letter-spacing: -.004em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.021em; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--niebieski);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ─────────── logowanie ─────────── */

.logowanie {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 600px at 50% -10%, rgba(41, 106, 234, .35), transparent 70%),
    linear-gradient(170deg, var(--granat-700) 0%, var(--granat-900) 100%);
}

.logowanie-box {
  background: var(--panel);
  width: 100%;
  max-width: 360px;
  padding: 40px 32px 32px;
  border-radius: var(--r-okno);
  box-shadow: var(--cien-okno);
}

.logowanie-box h1 {
  font-family: var(--znak-font);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--granat-700);
}

.logowanie-box h1 span { color: var(--niebieski); }

.logowanie-box p {
  margin: 8px 0 28px;
  color: var(--tekst-2);
  font-size: 14px;
}

.logowanie-box input { width: 100%; margin-bottom: 10px; }
.logowanie-box .btn { width: 100%; margin-top: 6px; }

/* ─────────── układ ─────────── */

.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }

.pasek {
  background: var(--pasek-tlo);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid var(--linia);
  display: flex;
  flex-direction: column;
  padding: 22px 12px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.pasek-logo {
  font-family: var(--znak-font);
  font-weight: 600;
  letter-spacing: .14em;
  font-size: 15px;
  color: var(--granat-700);
  padding: 0 12px 22px;
}

.pasek-logo span { color: var(--niebieski); }

.pasek nav { display: flex; flex-direction: column; gap: 1px; }

.pasek nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-pole);
  color: var(--tekst-2);
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background var(--szyb), color var(--szyb);
}

.pasek nav a svg { width: 17px; height: 17px; flex: none; opacity: .75; }

.pasek nav a:hover { background: var(--najazd); color: var(--tekst); }

.pasek nav a.wybrany {
  background: var(--wybrane);
  color: var(--granat-700);   /* na bladoniebieskiej pastylce sam niebieski nie wyrabia kontrastu */
  font-weight: 600;
}

.pasek nav a.wybrany svg { opacity: 1; }

.licznik {
  margin-left: auto;
  background: var(--niebieski);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-radius: 999px;
  min-width: 19px;
  text-align: center;
  padding: 1px 6px;
}

.pasek-stopka {
  margin-top: auto;
  padding: 14px 12px 0;
  border-top: 1px solid var(--linia);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.pasek-stopka strong {
  font-size: 14px;
  font-weight: 600;
  padding-bottom: 6px;
}

.pasek-stopka button {
  background: none;
  border: none;
  padding: 4px 0;
  color: var(--tekst-2);
  font-size: 13.5px;
  cursor: pointer;
  transition: color var(--szyb);
}

.pasek-stopka button:hover { color: var(--niebieski); }

.main { padding: 30px 34px 72px; max-width: 1180px; }

/* ─────────── nagłówek widoku ─────────── */

.naglowek {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.naglowek h2 { font-size: 28px; letter-spacing: -.026em; }

.naglowek .podtytul {
  color: var(--tekst-2);
  font-size: 14px;
  margin-top: 3px;
  max-width: 68ch;
}

/* ─────────── przyciski ─────────── */

.btn {
  background: var(--niebieski);
  color: #fff;
  border: 1px solid transparent;
  padding: 7px 15px;
  border-radius: var(--r-pole);
  cursor: pointer;
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: -.01em;
  transition: filter var(--szyb), background var(--szyb), transform var(--szyb);
}

.btn:hover { filter: brightness(1.07); }
.btn:active { transform: scale(.975); }

.btn.jasny {
  background: var(--panel);
  color: var(--tekst);
  border-color: var(--linia-mocna);
}

.btn.jasny:hover { background: var(--najazd); filter: none; }

/* dawny wariant „zloty" — dziś po prostu mocniejszy granat z logo */
.btn.zloty { background: var(--granat-700); }

.btn.maly { padding: 5px 11px; font-size: 13.5px; }

.btn.niebezpieczny {
  background: var(--panel);
  color: var(--czerwony);
  border-color: var(--linia-mocna);
}

.btn.niebezpieczny:hover { background: var(--czerwony-tlo); filter: none; }

.btn:disabled { opacity: .45; cursor: default; transform: none; }

/* ─────────── przełącznik zakładek ─────────── */

.okres {
  display: inline-flex;
  gap: 2px;
  margin-bottom: 20px;
  padding: 2px;
  background: var(--panel-cichy);
  border: 1px solid var(--linia);
  border-radius: 11px;
  flex-wrap: wrap;
}

.okres .btn {
  background: none;
  border: none;
  color: var(--tekst-2);
  font-weight: 500;
  padding: 5px 13px;
  border-radius: 9px;
  font-size: 13.5px;
}

.okres .btn:hover { background: var(--najazd); color: var(--tekst); filter: none; }

.okres .btn:not(.jasny) {
  background: var(--panel);
  color: var(--tekst);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(6, 28, 75, .1);
}

/* ─────────── pola ─────────── */

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], select, textarea {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--linia-mocna);
  border-radius: var(--r-pole);
  background: var(--panel);
  transition: border-color var(--szyb), box-shadow var(--szyb);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--niebieski);
  box-shadow: 0 0 0 3.5px var(--wybrane);
}

input::placeholder, textarea::placeholder { color: var(--tekst-3); }

textarea { resize: vertical; min-height: 76px; line-height: 1.5; }

label.pole { display: block; margin-bottom: 14px; }

label.pole span {
  display: block;
  font-size: 13px;
  color: var(--tekst-2);
  margin-bottom: 5px;
}

input[type=checkbox] { accent-color: var(--niebieski); }

/* ─────────── karty ─────────── */

.karta {
  background: var(--panel);
  border: 1px solid var(--linia);
  border-radius: var(--r-karta);
  margin-bottom: 18px;
  overflow: hidden;
}

.karta > h3 {
  padding: 13px 18px;
  font-size: 15px;
  font-weight: 600;
  border-bottom: 1px solid var(--linia);
  display: flex;
  align-items: center;
  gap: 9px;
}

.karta > h3 .ile {
  color: var(--tekst-3);
  font-size: 13.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.karta.pilna > h3 { color: var(--czerwony); background: var(--czerwony-tlo); border-bottom-color: transparent; }
.karta.pilna > h3 .ile { color: var(--czerwony); opacity: .8; }

.karta-tresc { padding: 18px; }

/* ─────────── wiersz z osobą / zadaniem ─────────── */

.wiersz {
  display: grid;
  grid-template-columns: minmax(170px, 1.3fr) auto minmax(150px, 1.5fr) 112px;
  gap: 16px;
  align-items: center;
  padding: 11px 18px;
  border-bottom: 1px solid var(--linia);
  cursor: pointer;
  transition: background var(--szyb);
}

.wiersz:last-child { border-bottom: none; }
.wiersz:hover { background: var(--najazd); }

.wiersz .kto { min-width: 0; }

.wiersz .imie {
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: -.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wiersz .kontakt {
  font-size: 13px;
  color: var(--tekst-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.wiersz .akcja { font-size: 14px; min-width: 0; color: var(--tekst-2); }
.wiersz .akcja .brak { color: var(--tekst-3); }

.wiersz .termin {
  text-align: right;
  font-size: 13px;
  color: var(--tekst-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.wiersz .termin.spoznione { color: var(--czerwony); font-weight: 600; }

/* ─────────── plakietki ─────────── */

.plakietki { display: flex; gap: 5px; flex-wrap: wrap; }

.plakietka {
  font-size: 12.5px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 7px;
  background: var(--panel-cichy);
  border: 1px solid var(--linia);
  color: var(--tekst-2);
  white-space: nowrap;
}

.plakietka.etap { background: var(--mgla); border-color: transparent; color: var(--granat-700); }
.plakietka.wysoki { background: var(--zielony-tlo); border-color: transparent; color: var(--zielony); }
.plakietka.sredni { background: var(--bursztyn-tlo); border-color: transparent; color: var(--bursztyn); }
.plakietka.out { color: var(--tekst-3); }
.plakietka.flaga { background: var(--czerwony-tlo); border-color: transparent; color: var(--czerwony); font-weight: 600; }
.plakietka.wynik { background: var(--wybrane); border-color: transparent; color: var(--granat-700); font-variant-numeric: tabular-nums; }

.pusto {
  padding: 30px 18px;
  text-align: center;
  color: var(--tekst-3);
  font-size: 14px;
}

/* ─────────── filtry ─────────── */

.filtry {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}

/* ─────────── tabele ─────────── */

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.tabela th {
  text-align: left;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tekst-3);
  padding: 10px 14px;
  border-bottom: 1px solid var(--linia);
  background: var(--panel-cichy);
  position: sticky;
  top: 0;
  white-space: nowrap;
}

.tabela td { padding: 10px 14px; border-bottom: 1px solid var(--linia); }
.tabela tbody tr { cursor: pointer; transition: background var(--szyb); }
.tabela tbody tr:hover { background: var(--najazd); }
.tabela td.liczba { text-align: right; white-space: nowrap; }
.tabela td.wazna { font-weight: 600; color: var(--tekst); }

.tabela input.wpis {
  width: 86px;
  padding: 3px 8px;
  text-align: right;
  font-size: 13px;
  border-radius: 7px;
  background: transparent;
  border-color: transparent;
}

.tabela input.wpis:hover { border-color: var(--linia-mocna); background: var(--panel); }
.tabela input.wpis:focus { background: var(--panel); }

.tabela tr.biezacy td { background: var(--mgla); }
.tabela tr.biezacy:hover td { background: var(--wybrane); }

.tabela tfoot td {
  font-weight: 600;
  background: var(--panel-cichy);
  border-top: 1px solid var(--linia-mocna);
  border-bottom: none;
}

/* ─────────── kafelki z liczbami ─────────── */

.kafelki {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.kafelek {
  background: var(--panel);
  border: 1px solid var(--linia);
  border-radius: var(--r-karta);
  padding: 15px 17px;
}

.kafelek .etykieta { font-size: 13px; color: var(--tekst-2); }

.kafelek .wartosc {
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -.028em;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

.kafelek.dobry .wartosc { color: var(--zielony); }
.kafelek.zly .wartosc { color: var(--czerwony); }

/* ─────────── karta osoby ─────────── */

.karta-osoby { display: grid; grid-template-columns: 372px 1fr; gap: 18px; align-items: start; }

.nastepny-krok { background: var(--mgla); border-color: transparent; }
.nastepny-krok > h3 { border-bottom-color: var(--linia); color: var(--granat-700); }

.os-czasu { list-style: none; margin: 0; padding: 0; }

.os-czasu li {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--linia);
}

.os-czasu li:last-child { border-bottom: none; }

.os-czasu .kiedy {
  font-size: 12.5px;
  color: var(--tekst-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.os-czasu .tresc { white-space: pre-wrap; word-break: break-word; font-size: 14.5px; }
.os-czasu .kto { font-size: 12.5px; color: var(--tekst-3); margin-top: 4px; }

.dwie { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ─────────── okienka ─────────── */

.zaslona {
  position: fixed;
  inset: 0;
  background: rgba(10, 18, 38, .4);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 50;
  animation: zaslonaWchodzi 160ms ease-out;
}

@keyframes zaslonaWchodzi { from { opacity: 0; } }

.okienko {
  background: var(--panel);
  border-radius: var(--r-okno);
  width: 100%;
  max-width: 540px;
  max-height: 88vh;
  overflow: auto;
  box-shadow: var(--cien-okno);
  animation: okienkoWchodzi 220ms cubic-bezier(.32, .72, 0, 1);
}

@keyframes okienkoWchodzi { from { opacity: 0; transform: translateY(10px) scale(.985); } }

.okienko h3 {
  padding: 18px 22px 14px;
  font-size: 18px;
  letter-spacing: -.02em;
}

.okienko-tresc { padding: 4px 22px 22px; }

.okienko-stopka {
  padding: 14px 22px;
  border-top: 1px solid var(--linia);
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  background: var(--panel-cichy);
  position: sticky;
  bottom: 0;
}

/* ─────────── komunikaty ─────────── */

.komunikat {
  padding: 10px 13px;
  border-radius: var(--r-pole);
  margin-bottom: 14px;
  font-size: 14px;
}

.komunikat.blad { background: var(--czerwony-tlo); color: var(--czerwony); }
.komunikat.ok { background: var(--zielony-tlo); color: var(--zielony); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  background: rgba(22, 24, 29, .92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: var(--cien-unos);
  z-index: 100;
  font-size: 14px;
  animation: toastWchodzi 220ms cubic-bezier(.32, .72, 0, 1);
}

@keyframes toastWchodzi { from { opacity: 0; transform: translate(-50%, 10px); } }

.ladowanie { padding: 46px; text-align: center; color: var(--tekst-3); }

/* ─────────── telefon i tablet ─────────── */

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }

  .pasek {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    overflow-x: auto;
    position: sticky;
    top: 0;
    height: auto;
    z-index: 20;
    border-right: none;
    border-bottom: 1px solid var(--linia);
  }

  .pasek-logo { padding: 0 8px 0 0; font-size: 13px; }
  .pasek nav { flex-direction: row; }
  .pasek nav a { padding: 6px 10px; white-space: nowrap; }
  .pasek nav a svg { display: none; }

  .pasek-stopka {
    margin: 0 0 0 auto;
    padding: 0 0 0 10px;
    border: none;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .pasek-stopka strong { display: none; }

  .main { padding: 20px 16px 56px; }
  .naglowek h2 { font-size: 24px; }
  .karta-osoby { grid-template-columns: 1fr; }
  .filtry { grid-template-columns: 1fr 1fr; }
  .wiersz { grid-template-columns: 1fr auto; row-gap: 7px; }
  .wiersz .akcja, .wiersz .termin { grid-column: 1 / -1; text-align: left; }
  .os-czasu li { grid-template-columns: 1fr; gap: 3px; }
  .dwie { grid-template-columns: 1fr; }
  .toast { left: 16px; right: 16px; bottom: 16px; transform: none; text-align: center; }
  @keyframes toastWchodzi { from { opacity: 0; transform: translateY(10px); } }
}