/* ============================================================================
   PANEL PACJENTA

   Ten sam język wizualny co strona: ciepła biel, złoto z monogramu, IBM Plex
   do nagłówków, Inter do czytania. Panel ma wyglądać jak dalszy ciąg gabinetu,
   a nie jak doklejony system obcej firmy.

   Wszystkie wartości pochodzą z `tokens.css`. Ani jednego surowego koloru.
   ============================================================================ */

.panel-body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
}

/* --- pasek górny ---------------------------------------------------------- */

.panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-dark);
  color: var(--c-on-dark);
}

.panel-top__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: inherit;
  text-decoration: none;
}

.panel-top__mark {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--c-gold);
}

.panel-top__name {
  display: grid;
  line-height: 1.2;
  font-size: var(--t-sm);
}

.panel-top__name span {
  font-family: var(--f-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-on-dark-muted);
}

.panel-top__right {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.panel-top__who {
  font-size: var(--t-sm);
  color: var(--c-on-dark-muted);
  /* Długie imię ma się uciąć, a nie wypchnąć przycisku „Wyloguj" poza ekran.
     `min-width: 0` jest tu konieczne: element flex domyślnie nie kurczy się
     poniżej swojej treści, więc bez tego `ellipsis` nigdy nie zadziała. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Marka też musi umieć się skurczyć — inaczej to ona wypycha resztę. */
.panel-top__brand { min-width: 0; }
.panel-top__name { min-width: 0; overflow: hidden; }
.panel-top__right { min-width: 0; flex-shrink: 0; }

/* Przycisk „Wyloguj" leży na CIEMNYM pasku, a `.btn--ghost` jest pomyślany
   pod jasne tło: daje białe wypełnienie i ciemny napis.

   NADPISUJEMY ZMIENNE (`--btn-*`), NIE GOTOWE WŁAŚCIWOŚCI. `components.css`
   buduje przycisk z `background: var(--btn-bg)` i `color: var(--btn-fg)`,
   więc ustawienie samego `color` zmienia napis, ale zostawia BIAŁE TŁO —
   i wychodzi jasny napis na białym, czyli przycisk-widmo. Dokładnie to się
   tu wydarzyło przy pierwszym podejściu; wychwycone dopiero pomiarem
   kontrastu, bo na zrzucie wyglądało po prostu na „bladawe".

   Na ciemnym tle firmowe złoto ma kontrast 5,66:1, więc może wystąpić
   w oryginalnym odcieniu — bez przyciemniania, którego wymaga biała strona. */
.panel-top .btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-on-dark);
  --btn-br: var(--s-line-dark);
}
.panel-top .btn--ghost:hover {
  --btn-br: var(--c-gold);
  --btn-fg: var(--c-gold-bright);
  background: rgba(240, 236, 228, 0.08);
}

.btn--small {
  padding: 0.35rem 0.8rem;
  font-size: var(--t-sm);
  min-height: auto;
}

/* --- układ ---------------------------------------------------------------- */

.panel-main {
  flex: 1;
  width: 100%;
  max-width: 56rem;
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-8);
  display: grid;
  gap: var(--sp-5);
  align-content: start;
}

.panel-view[hidden] { display: none; }

.panel-view {
  display: grid;
  gap: var(--sp-5);
  align-content: start;
}

.panel-card {
  background: var(--c-surface);
  border: 1px solid var(--s-line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: grid;
  gap: var(--sp-4);
  align-content: start;
}

.panel-card--narrow {
  max-width: 26rem;
  width: 100%;
  margin: var(--sp-6) auto 0;
}

.panel-card--uwaga { border-color: var(--c-error); }

/* Konto, które na coś czeka. Nie czerwone — nic złego się nie stało,
   trwa krok, który ma trwać. Złoto marki mówi „to jest ważne", a nie „błąd". */
.panel-card--czeka {
  border-color: var(--c-accent-line);
  background: var(--c-gold-tint);
}

.panel-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.panel-title {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
  color: var(--c-ink);
}

.panel-h2 {
  font-family: var(--f-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  color: var(--c-ink);
}

.panel-lede {
  margin: 0;
  color: var(--c-muted);
  line-height: var(--lh-normal);
}

.panel-note {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--c-accent-line);
  background: var(--c-surface-alt);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--c-ink-soft);
  font-size: var(--t-sm);
  line-height: var(--lh-normal);
}

.panel-links {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-size: var(--t-sm);
}
.panel-links a { color: var(--c-accent); }

/* --- zakładki ------------------------------------------------------------- */

.panel-tabs {
  display: flex;
  gap: var(--sp-1);
  overflow-x: auto;
  border-bottom: 1px solid var(--s-line);
  /* Pasek przewijania na telefonie nie ma się rzucać w oczy — zakładek jest
     pięć i przy wąskim ekranie i tak trzeba je przesunąć palcem. */
  scrollbar-width: none;
}
.panel-tabs::-webkit-scrollbar { display: none; }

.panel-tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: var(--sp-3) var(--sp-4);
  font: inherit;
  font-size: var(--t-sm);
  color: var(--c-muted);
  cursor: pointer;
  white-space: nowrap;
}

.panel-tab:hover { color: var(--c-ink); }

.panel-tab.is-active {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
  font-weight: 600;
}

.panel-tab:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: -2px;
  border-radius: var(--r-md);
}

.panel-pane {
  display: grid;
  gap: var(--sp-5);
  align-content: start;
}
.panel-pane[hidden] { display: none; }

/* --- kafle na pulpicie ---------------------------------------------------- */

.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp-4);
}

.kafel {
  background: var(--c-surface);
  border: 1px solid var(--s-line);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-2);
  align-content: start;
}

.kafel__tytul {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.kafel__tresc {
  margin: 0;
  color: var(--c-ink);
  line-height: var(--lh-normal);
}

.kafel__liczba {
  display: block;
  font-family: var(--f-mono);
  font-size: 1.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--c-accent);
}

.kafel__drobne {
  display: block;
  font-size: var(--t-sm);
  color: var(--c-muted);
}

.kafel__puste {
  font-size: var(--t-sm);
  color: var(--c-muted);
}
.kafel__puste a { color: var(--c-accent); }

/* --- odznaki -------------------------------------------------------------- */

.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: var(--r-md);
  background: var(--c-surface-sunken);
  color: var(--c-ink-soft);
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.badge--ok { background: var(--c-vital-tint); color: var(--c-vital); }
.badge--cicho { color: var(--c-faint); }

/* --- ćwiczenia ------------------------------------------------------------ */

.cwiczenia {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}

.cwiczenie {
  background: var(--c-surface);
  border: 1px solid var(--s-line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  display: grid;
  gap: var(--sp-3);
  align-content: start;
}

/* Zrobione ćwiczenie ma być rozpoznawalne, ale nie wygaszone do niewidoczności:
   pacjent nadal musi móc przeczytać instrukcję, którą przed chwilą wykonał. */
.cwiczenie.is-done {
  border-color: color-mix(in srgb, var(--c-vital) 40%, transparent);
  background: linear-gradient(var(--c-vital-tint), var(--c-vital-tint)) padding-box;
}

.cwiczenie__glowa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}

.cwiczenie__nazwa {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--c-ink);
}

.cwiczenie__parametry {
  margin: 0;
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}

.cwiczenie__opis,
.cwiczenie__instrukcja {
  margin: 0;
  color: var(--c-ink-soft);
  line-height: var(--lh-normal);
}

.cwiczenie__instrukcja {
  padding-left: var(--sp-4);
  border-left: 2px solid var(--s-line);
  color: var(--c-muted);
  font-size: var(--t-sm);
}

.cwiczenie__uwaga {
  margin: 0;
  padding: var(--sp-3);
  background: var(--c-gold-tint);
  border-radius: var(--r-md);
  color: var(--c-ink-soft);
  font-size: var(--t-sm);
  line-height: var(--lh-normal);
}

.cwiczenie__media {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--s-line);
}

.cwiczenie__media-link a { color: var(--c-accent); }

.odhacz {
  appearance: none;
  border: 1px solid var(--s-line-strong);
  background: var(--c-surface);
  color: var(--c-ink-soft);
  border-radius: var(--r-md);
  padding: 0.4rem 0.9rem;
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
  white-space: nowrap;
}

.odhacz:hover { border-color: var(--c-accent); color: var(--c-accent); }

.odhacz[aria-pressed='true'] {
  background: var(--c-vital);
  border-color: var(--c-vital);
  /* Biały tekst na zieleni — jedyne miejsce, w którym potrzebny jest kolor
     spoza tokenów tła, bo `--c-vital` jest ciemna i nic z palety na niej
     nie czyta się lepiej. */
  color: #fff;
}

.odhacz:disabled { opacity: 0.6; cursor: default; }

/* --- listy ---------------------------------------------------------------- */

.lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-1);
}

.lista__wiersz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--s-line);
}
.lista__wiersz:last-child { border-bottom: 0; }

.lista__data {
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
  min-width: 9rem;
}

.lista__tresc { flex: 1; color: var(--c-ink); }

.lista-linkow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}
.lista-linkow a { color: var(--c-accent); }

/* --- słupki postępu ------------------------------------------------------- */

.slupki {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.slupek {
  display: grid;
  grid-template-columns: 9rem 1fr 2rem;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--t-sm);
}

.slupek__dzien {
  font-family: var(--f-mono);
  color: var(--c-muted);
  font-size: 0.78rem;
}

.slupek__pasek {
  display: block;
  height: 0.55rem;
  background: var(--c-surface-sunken);
  border-radius: 99px;
  overflow: hidden;
}

.slupek__pasek span {
  display: block;
  height: 100%;
  background: var(--c-accent);
  border-radius: 99px;
}

.slupek__ile {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  color: var(--c-ink);
  text-align: right;
}

/* --- dane konta ----------------------------------------------------------- */

.dane {
  margin: 0;
  display: grid;
  gap: var(--sp-3);
}

.dane > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  justify-content: space-between;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--s-line);
}
.dane > div:last-child { border-bottom: 0; padding-bottom: 0; }

.dane dt {
  font-family: var(--f-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.dane dd { margin: 0; color: var(--c-ink); }

/* --- stopka --------------------------------------------------------------- */

.panel-foot {
  padding: var(--sp-5);
  border-top: 1px solid var(--s-line);
  text-align: center;
  color: var(--c-muted);
  font-size: var(--t-sm);
  display: grid;
  gap: var(--sp-2);
}
.panel-foot p { margin: 0; max-width: 42rem; margin-inline: auto; }
.panel-foot a { color: var(--c-accent); }

/* --- telefon -------------------------------------------------------------- */

@media (max-width: 40rem) {
  .panel-main { padding: var(--sp-5) var(--sp-4) var(--sp-7); }
  .panel-top { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); }
  /* Na wąskim ekranie liczy się wyjście z konta, nie powitanie. */
  .panel-top__who { display: none; }
  .panel-top__name span { display: none; }
  .panel-card { padding: var(--sp-4); }
  .slupek { grid-template-columns: 7rem 1fr 1.6rem; }
  .lista__data { min-width: 100%; }
}

/* --- informacja o zasadach dostępu (przy zakładaniu konta) ---------------- */

.info-ochrona {
  border: 1px solid var(--c-accent-line);
  background: var(--c-gold-tint);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
  font-size: var(--t-sm);
  line-height: var(--lh-normal);
  color: var(--c-ink-soft);
}

.info-ochrona__tytul {
  margin: 0;
  font-family: var(--f-display);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--c-ink);
}

.info-ochrona p { margin: 0; }

.info-ochrona ul {
  margin: 0;
  padding-left: var(--sp-5);
  display: grid;
  gap: var(--sp-2);
}
.info-ochrona li::marker { color: var(--c-gold); }

.info-ochrona__drobne { color: var(--c-muted); font-size: 0.82rem; }
.info-ochrona a { color: var(--c-accent); }

.field__opcjonalne {
  font-weight: 400;
  color: var(--c-muted);
  font-size: 0.9em;
}