/* =============================================================================
   DokTime – BP (Backend Pacient) – bp_style.css
   Soubor cíl v produkci: frontend/static/css/bp_style.css
   =============================================================================
   Vztah k bl_style.css:
   - Sdílí ZÁKLADNÍ barevné proměnné (--green, --green-lt, --border, --text...)
     se zbytkem DokTime, aby pacientský portál vizuálně navazoval na veřejný
     frontend (index.html) a nepůsobil jako cizí systém.
   - NEDĖDÍ tabulkové/BL-specifické třídy (.bl-table, .pt-row...) – BP je
     navržen kartičkově (mobile-first), BL je navržen tabulkově (desktop
     recepce). Different UX job, different layout primitives.
   - Třídy mají prefix `bp-` aby nikdy nekolidovaly s `bl-` třídami, pokud by
     se obě CSS někdy načetly na stejné stránce (např. budoucí admin náhled).
   ============================================================================= */

:root {
  /* Stejná paleta jako BL/frontend – viz BL-STYLE.md sekce 2.1 */
  --bp-green:      #1D9E75;
  --bp-green-dk:   #0F6E56;
  --bp-green-darker:#085041;
  --bp-green-lt:   #E1F5EE;
  --bp-green-mid:  #9FE1CB;
  --bp-blue-lt:    #E6F1FB;
  --bp-blue-dk:    #185FA5;
  --bp-text:       #1a2e26;
  --bp-muted:      #4f6b60;
  --bp-hint:       #547062;
  --bp-white:      #ffffff;
  --bp-bg:         #f0f4f2;
  --bp-surface2:   #f9fdfb;
  --bp-border:     #d4e3dc;
  --bp-shadow:     rgba(0,0,0,.07);

  /* Stavové barvy rezervací pacienta — BP-specifické, sémanticky odpovídají
     BL stavům (TP/PP/PN/Zrušeno) ale s pacientským pojmenováním */
  --bp-status-pending-bg:   #FAEEDA; --bp-status-pending-text:#854F0B;
  --bp-status-confirmed-bg: #E1F5EE; --bp-status-confirmed-text:#085041;
  --bp-status-done-bg:      #F1EFE8; --bp-status-done-text:#5F5E5A;
  --bp-status-cancelled-bg: #FCEBEB; --bp-status-cancelled-text:#791F1F;

  --bp-radius-md: 8px;
  --bp-radius-lg: 12px;
  --bp-font-base: 15px;  /* o stupeň větší než BL (13px) – pacient ≠ power user */
}

body.bp-dark {
  --bp-text:     #e8e8e8;
  --bp-muted:    #a0a0a0;
  --bp-hint:     #636363;
  --bp-white:    #1a1a1a;
  --bp-bg:       #0e0e0e;
  --bp-surface2: #222222;
  --bp-border:   #2d2d2d;
  --bp-shadow:   rgba(0,0,0,.7);
  --bp-green-lt: #0d2218;
  --bp-green-mid:#1e4530;
  --bp-blue-lt:  #0f2235;
}

/* CH-16 OPRAVA (bod 3): chybějící CSS reset — bez tohohle prohlížeč
   aplikuje svůj výchozí margin na <body> (typicky ~8px ze všech stran),
   což přesně způsobuje nahlášený bug: stránka nezačíná úplně nahoře a
   objeví se zbytečný scrollbar i na obsahu, co by se jinak celý vešel
   do výšky okna. style.css (veřejný FD web) tenhle reset má, bp_style.css
   ho dosud nikdy neměl — BP a FD se donedávna vizuálně nesrovnávaly 1:1. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}

/* ============================== ZÁKLAD ============================== */

.bp-app {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--bp-font-base);
  color: var(--bp-text);
  background: var(--bp-bg);
  min-height: 100vh;
}

/* ============================== TOPBAR (mobil + desktop) ============================== */

.bp-topbar {
  background: var(--bp-white);
  border-bottom: 1px solid var(--bp-border);
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.bp-topbar-logo { font-size: 16px; font-weight: 400; color: var(--bp-text); display: flex; align-items: center; gap: 7px; text-decoration: none; }
.bp-topbar-logo strong { font-weight: 700; }
.bp-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.bp-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bp-green-lt); color: var(--bp-green-darker);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}

/* BP-TOP — avatar dropdown menu (jméno / profil / odhlásit), analogie
   BL .bl-usr-wrap/.bl-usr-dropdown v base_lekari.html */
.bp-usr-wrap { position: relative; }
.bp-usr-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 180px;
  background: var(--bp-white); border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-md); box-shadow: 0 4px 16px rgba(0,0,0,.12);
  z-index: 9999; display: none; overflow: hidden;
}
.bp-usr-dropdown.open { display: block; }
.bp-usr-dd-name {
  padding: 10px 14px 8px; font-size: 13px; font-weight: 700;
  color: var(--bp-text); border-bottom: 1px solid var(--bp-border);
}
.bp-usr-dd-item {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  font-size: 13px; color: var(--bp-text); text-decoration: none; cursor: pointer;
}
.bp-usr-dd-item:hover { background: var(--bp-surface2); text-decoration: none; }
.bp-usr-dd-item.danger { color: var(--bp-status-cancelled-text); }
.bp-usr-dd-item.danger:hover { background: var(--bp-status-cancelled-bg); }

/* ============================== BOTTOM NAV (mobil) ============================== */
/* BP-NAV-MOBILE — primární navigace na mobilu, nahrazuje sidebar BL */

.bp-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--bp-white);
  border-top: 1px solid var(--bp-border);
  display: flex;
  justify-content: space-around;
  padding: 6px 0 max(6px, env(safe-area-inset-bottom));
  z-index: 50;
}
.bp-bottom-nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--bp-muted); font-size: 11px; text-decoration: none;
  padding: 4px 10px; border-radius: var(--bp-radius-md);
  flex: 1; max-width: 90px;
}
.bp-bottom-nav-item i { font-size: 21px; }
.bp-bottom-nav-item.active { color: var(--bp-green-dk); font-weight: 600; }

/* ============================== SIDEBAR (desktop only) ============================== */

.bp-sidebar {
  width: 220px; background: var(--bp-white); border-right: 1px solid var(--bp-border);
  display: none; flex-direction: column; padding: 16px 0; flex-shrink: 0;
}
@media (min-width: 900px) { .bp-sidebar { display: flex; } .bp-bottom-nav { display: none; } }

.bp-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 20px;
  font-size: 14px; color: var(--bp-muted); text-decoration: none; cursor: pointer;
}
.bp-nav-item i { font-size: 19px; }
.bp-nav-item.active { background: var(--bp-green-lt); color: var(--bp-green-darker); font-weight: 600; border-right: 3px solid var(--bp-green-dk); }

/* ============================== KARTY ============================== */

.bp-card {
  background: var(--bp-white);
  border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-lg);
  padding: 16px;
  margin-bottom: 12px;
}
.bp-card-title { font-size: 15px; font-weight: 700; color: var(--bp-text); margin-bottom: 4px; }
.bp-card-sub { font-size: 13px; color: var(--bp-muted); }

/* CTA karta (odkaz) — "Najít lékaře a objednat se" a podobné. Tmavší zelená
   na hover, aby bylo vidět, že je to klikací akce, ne jen informační karta. */
.bp-card--cta { background: var(--bp-green-dk); color: var(--bp-green-lt); transition: background .15s; }
.bp-card--cta:hover { background: var(--bp-green-darker); }
.bp-card--cta-light { transition: background .15s; }
.bp-card--cta-light:hover { background: var(--bp-green-lt); }

/* Karta rezervace */
.bp-appt-card { display: flex; gap: 12px; align-items: flex-start; }
.bp-appt-date-time { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
.bp-appt-date-box {
  background: var(--bp-green-lt); color: var(--bp-green-darker);
  border-radius: var(--bp-radius-md); padding: 8px 10px; text-align: center;
  min-width: 56px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.bp-appt-date-box .day { font-size: 16px; font-weight: 700; line-height: 1; white-space: nowrap; }
.bp-appt-date-box .mon { font-size: 11px; text-transform: uppercase; }
.bp-appt-time-box {
  background: var(--bp-blue-lt); color: var(--bp-blue-dk);
  border-radius: var(--bp-radius-md); padding: 5px 10px; text-align: center;
  min-width: 56px; font-size: 13px; font-weight: 700; white-space: nowrap;
}
.bp-appt-status { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.bp-appt-status.pending   { background: var(--bp-status-pending-bg);   color: var(--bp-status-pending-text); }
.bp-appt-status.confirmed { background: var(--bp-status-confirmed-bg); color: var(--bp-status-confirmed-text); }
.bp-appt-status.done      { background: var(--bp-status-done-bg);      color: var(--bp-status-done-text); }
.bp-appt-status.cancelled { background: var(--bp-status-cancelled-bg); color: var(--bp-status-cancelled-text); }

/* FD-PAC-OBJ — bohatá karta objednávky v2 (BP-BODY-3 i BP-BODY-4, sdíleno
   přes _bp_appt_card.html). Struktura:
     __top (flex řádek)
       __main (datumbox + název + ordinace/čas)  ← roste, zabírá zbylý prostor
       __right (status badge + tlačítka, POD SEBOU, zarovnané vpravo)
     __detail (skrytý panel, rozbalí se tlačítkem Detail)

   Na žádost: status a tlačítka musí být VPRAVO, hned vedle hlavního obsahu —
   ne na vlastním řádku pod celou kartou jako v předchozí verzi. Tlačítka
   používají inline SVG ikony (ne Tabler Icons font), protože font se
   v produkci spolehlivě nenačítá (CDN), což dřív vedlo k zobrazení
   placeholder číslic ("1 1") místo ikon kontaktů v detailu. */
.bp-appt-card-v2 {
  background: var(--bp-white); border: 1px solid var(--bp-border);
  border-radius: var(--bp-radius-lg); padding: 16px; margin-bottom: 12px;
}
.bp-appt-card-v2__top { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; }
.bp-appt-card-v2__main { display: flex; gap: 12px; align-items: flex-start; flex: 1; min-width: 0; }
.bp-appt-card-v2__title { font-weight: 700; font-size: 15px; color: var(--bp-text); }
.bp-appt-card-v2__sub { font-size: 13px; color: var(--bp-muted); margin-top: 1px; }

.bp-appt-card-v2__right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  flex-shrink: 0;
}
.bp-appt-card-v2__actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.bp-appt-action-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; padding: 6px 11px;
  border-radius: 99px; border: 1px solid var(--bp-border);
  background: var(--bp-white); color: var(--bp-muted); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.bp-appt-action-btn svg { flex-shrink: 0; }
.bp-appt-action-btn:hover { background: var(--bp-bg); }
.bp-appt-action-btn--active { background: var(--bp-green-lt); color: var(--bp-green-darker); border-color: var(--bp-green-mid); }
.bp-appt-action-btn--danger { color: var(--bp-status-cancelled-text); border-color: var(--bp-status-cancelled-text); }
.bp-appt-action-btn--danger:hover { background: var(--bp-status-cancelled-bg); }

.bp-appt-detail {
  border-top: 1px solid var(--bp-border); padding-top: 14px; margin-top: 14px;
}
.bp-appt-detail__grid { display: flex; flex-direction: column; gap: 14px; }
.bp-appt-detail__info { display: flex; flex-direction: column; gap: 10px; }
.bp-appt-detail__row {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13.5px; color: var(--bp-text); line-height: 1.4;
}
.bp-appt-detail__icon { width: 17px; height: 17px; color: var(--bp-green-dk); flex-shrink: 0; margin-top: 1px; }
.bp-appt-detail__row a { color: var(--bp-green-dk); text-decoration: none; }
.bp-appt-detail__row a:hover { text-decoration: underline; }
.bp-appt-detail__notes { color: var(--bp-muted); font-style: italic; }
.bp-appt-detail__empty { font-size: 13px; color: var(--bp-muted); font-style: italic; }
.bp-appt-detail__map {
  border-radius: var(--bp-radius-md); overflow: hidden;
  min-height: 180px; border: 1px solid var(--bp-border);
}

/* Mobil (<640px): hlavní obsah a status/akce se zalomí pod sebe, ale
   pořadí v DOM zůstává stejné (status+akce jsou "vpravo" jen na desktopu,
   na mobilu logicky pod hlavním obsahem — šířka displeje to vyžaduje). */
@media (max-width: 639px) {
  .bp-appt-card-v2__top { flex-direction: column; gap: 12px; }
  .bp-appt-card-v2__right { align-items: stretch; width: 100%; }
  .bp-appt-card-v2__actions { justify-content: flex-start; }
}

/* Desktop (≥640px): info a mapa vedle sebe pro lepší využití šířky karty —
   karta na PC je výrazně bohatší a širší než na mobilu, jak bylo žádáno. */
@media (min-width: 640px) {
  .bp-appt-detail__grid { flex-direction: row; align-items: flex-start; }
  .bp-appt-detail__info { flex: 1; min-width: 0; }
  .bp-appt-detail__map { flex: 0 0 280px; }
}

/* ============================== TLAČÍTKA ============================== */

.bp-btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  padding: 11px 20px; border-radius: var(--bp-radius-md);
  font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid var(--bp-border);
  background: var(--bp-white); color: var(--bp-text); text-decoration: none;
  min-height: 44px; /* dotykový cíl ≥44px, mobile-first */
}
.bp-btn-primary { background: var(--bp-green-dk); border-color: var(--bp-green-dk); color: var(--bp-green-lt); }
.bp-btn-primary:hover { background: var(--bp-green-darker); }
.bp-btn-block { width: 100%; }
.bp-btn-ghost { background: transparent; border-color: transparent; color: var(--bp-muted); }

/* CH-6: OAuth tlačítka (Google/Facebook) — plná šířka, značkové barvy,
   dost prostoru pro ikonu+text (dřív byla v cols-2 na půl šířky, ikona+delší
   text se tam nevešly a přesahovaly za okraj tlačítka). */
.bp-btn-oauth {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; box-sizing: border-box;
  padding: 12px 16px; border-radius: var(--bp-radius-md);
  font-size: 14px; font-weight: 600; text-decoration: none;
  min-height: 46px; border: none; cursor: pointer;
  white-space: nowrap;
}
.bp-btn-oauth--google { background: #000; color: #fff; }
.bp-btn-oauth--google:hover { background: #1a1a1a; }
.bp-btn-oauth--facebook { background: #1877F2; color: #fff; }
.bp-btn-oauth--facebook:hover { background: #1666d8; }

/* ============================== FORMULÁŘE ============================== */

.bp-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.bp-field label { font-size: 13px; font-weight: 600; color: var(--bp-muted); }
.bp-field input, .bp-field select, .bp-field textarea {
  padding: 11px 12px; border-radius: var(--bp-radius-md); border: 1px solid var(--bp-border);
  font-size: 15px; background: var(--bp-white); color: var(--bp-text); min-height: 44px;
  width: 100%; box-sizing: border-box;
}
.bp-field input:focus, .bp-field select:focus, .bp-field textarea:focus {
  outline: none; border-color: var(--bp-green); box-shadow: 0 0 0 3px var(--bp-green-lt);
}
.bp-field-row { display: grid; gap: 12px; }
.bp-field-row.cols-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .bp-field-row.cols-2 { grid-template-columns: 1fr; } }

/* BP-WI-LOGIN — ikona vlevo v poli (obálka pro e-mail, zámek pro heslo),
   stejný vzor jako BL .input-wrap/.input-icon v lekari/login.html. Input
   uvnitř dostává padding-left inline (různá pole mají různou potřebu —
   heslo má navíc tlačítko oka vpravo), tady jen umístění ikony samotné. */
.bp-input-icon-wrap { position: relative; }
.bp-input-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--bp-hint); pointer-events: none; display: flex;
}

/* Desktop ≥900px — KOMPAKTNÍ rozměry POUZE pro stránku profilu
   (#bp-profile-form). Profil má hodně polí na jedné stránce, takže menší
   padding/font tam dává smysl. Login, R1, R2 a další stránky musí zachovat
   plné mobile-first rozměry (44px výška) i na desktopu — mají tam být
   shodné s tlačítky (Google/Facebook na R1, Pokračovat na R2, Přihlásit
   se na loginu). Dřívější verze tohoto pravidla platila univerzálně na
   VŠECHNA pole v celém BP, což omylem zmenšilo i R1/R2/login. */
#bp-profile-form .bp-field input,
#bp-profile-form .bp-field select,
#bp-profile-form .bp-field textarea {
  max-width: 280px;
}
@media (min-width: 900px) {
  #bp-profile-form .bp-field input,
  #bp-profile-form .bp-field select,
  #bp-profile-form .bp-field textarea {
    padding: 7px 10px; font-size: 13px; min-height: 34px;
  }
  #bp-profile-form .bp-field label { font-size: 12px; }
  #bp-profile-form .bp-field { gap: 4px; margin-bottom: 12px; }
}
@media (max-width: 560px) {
  /* Bez tohoto by mezera MEZI dvěma poli ve stejném zalomeném řádku
     (margin-bottom z .bp-field + grid gap) byla větší než mezera MEZI
     samostatnými řádky (jen margin-bottom) — viditelně nekonzistentní
     rozestupy na mobilu. Gap na 0 = všechny mezery pochází jednotně
     jen z margin-bottom na .bp-field. */
  .bp-field-row { gap: 0; }
}

/* ============================== REGISTRACE — progress ============================== */

.bp-reg-steps { display: flex; gap: 8px; margin-bottom: 24px; }
.bp-reg-step { flex: 1; height: 4px; border-radius: 2px; background: var(--bp-border); }
.bp-reg-step.done   { background: var(--bp-green); }
.bp-reg-step.active { background: var(--bp-green-dk); }

/* ============================== VERIFIKAČNÍ KÓD ============================== */

.bp-code-row { display: flex; gap: 8px; justify-content: center; }
.bp-code-box {
  width: 44px; height: 44px; text-align: center; font-size: 20px; font-weight: 700;
  border: 1px solid var(--bp-border); border-radius: var(--bp-radius-md);
  background: var(--bp-white); color: var(--bp-text);
}
.bp-code-box:focus { outline: none; border-color: var(--bp-green); }
@media (min-width: 900px) {
  .bp-code-box { height: 34px; font-size: 16px; }
}

/* ============================== DÁRCOVSTVÍ – progress bar (BP-L4) ============================== */

.bp-donor-progress-track { height: 10px; border-radius: 5px; background: var(--bp-border); overflow: hidden; }
.bp-donor-progress-fill { height: 100%; background: var(--bp-green); border-radius: 5px; }
.bp-donor-goal-card { display: flex; align-items: center; gap: 12px; }
.bp-donor-goal-icon { font-size: 28px; }

/* ============================== UTILITY ============================== */

.bp-empty-state { text-align: center; padding: 40px 20px; color: var(--bp-muted); }
.bp-empty-state i { font-size: 40px; opacity: .4; margin-bottom: 10px; display: block; }
.bp-flash { padding: 12px 14px; border-radius: var(--bp-radius-md); font-size: 14px; margin-bottom: 12px; }
.bp-flash.success { background: var(--bp-green-lt); color: var(--bp-green-darker); }
.bp-flash.danger   { background: var(--bp-status-cancelled-bg); color: var(--bp-status-cancelled-text); }
.bp-flash.warning  { background: var(--bp-status-pending-bg); color: var(--bp-status-pending-text); }

/* Spodní odsazení obsahu na mobilu, ať bottom-nav nepřekrývá poslední kartu */
.bp-content { padding: 16px; padding-bottom: 84px; max-width: 720px; margin: 0 auto; }
@media (min-width: 900px) { .bp-content { padding-bottom: 24px; } }

/* CH-6 (2026-07-16): vývojářské referenční kódy (BP-BODY-6 apod.) na žádost
   uživatele schované pacientům - nikoho nezajímají a jen matou. Schováno
   JEN tady v bp_style.css (načítá se výhradně na BP stránkách), ne v
   hlavním style.css - třída .bl-topbar-code je sdílená s BL portálem, kde
   se kódy dál aktivně používají pro referenci při vývoji. */
.bl-topbar-code { display: none !important; }