/* Salon by Flowbit — komponenty, které se opakují napříč skupinami obrazovek.
   Pravidlo: žádná hodnota natvrdo, vše z tokens.css. Kdo chce změnit poloměr
   štítků, mění --r-badge nebo .fb-badge — na jednom místě.
   Načítá se v <helmet> každé stránky, takže je k dispozici dřív, než doteče obsah. */

/* ---------- tlačítka ---------- */
.fb-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:var(--row-h);padding:0 14px;
  background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:var(--r-field);
  font-size:var(--fs-cap);font-weight:500;line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap}
.fb-btn:hover{background:var(--surface-sunken);color:var(--ink);text-decoration:none}
.fb-btn--primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.fb-btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-ink)}
.fb-btn--quiet{background:none;border-color:transparent;color:var(--ink-2)}
.fb-btn--quiet:hover{background:var(--surface-sunken)}
.fb-btn--danger{color:var(--danger)}
.fb-btn--danger:hover{background:var(--danger-bg)}
.fb-btn--icon{width:var(--row-h);padding:0;color:var(--ink-2)}
.fb-btn--touch{min-height:var(--touch)}
/* menší tlačítko v řádku seznamu / hlavičce karty — jedna velikost pro celý prototyp */
.fb-btn--sm{min-height:32px;padding:0 10px;font-size:12.5px}
.fb-btn--icon.fb-btn--sm{width:32px;padding:0}
/* textový proklik (drobečky) — vypadá jako odkaz, chová se jako tlačítko */
.fb-btn--link{min-height:24px;padding:0 4px;color:var(--muted);font-size:12.5px;font-weight:400;border-color:transparent;background:none}
.fb-btn--link:hover{color:var(--ink);background:none;text-decoration:underline}
.fb-btn[disabled]{background:var(--surface-sunken);color:var(--muted);border-color:var(--line);cursor:not-allowed}

/* ---------- hlavička stránky ---------- */
.fb-page{padding:var(--s-4) var(--s-4) 0}
.fb-page-head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s-3)}
.fb-page-head__text{min-width:0;flex:1}
.fb-page-head h1{margin:0;font-size:var(--fs-h1);font-weight:600;letter-spacing:-.02em}
.fb-page-head p{margin:2px 0 0;font-size:var(--fs-cap);color:var(--muted)}
.fb-page-head__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
.fb-page-link{color:var(--muted);text-decoration:underline;text-decoration-color:var(--line-strong)}

/* ---------- karta a sekce ---------- */
.fb-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.fb-card__head{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-3) 14px;border-bottom:1px solid var(--line)}
.fb-card__head h2{margin:0;font-size:var(--fs-h2);font-weight:600}
.fb-card__body{padding:var(--s-3) 14px}
.fb-card > *:last-child{border-bottom:none}
.fb-label{font-size:var(--fs-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ---------- tabulka / seznam ---------- */
.fb-table{width:100%;border-collapse:collapse;font-size:var(--fs-table)}
.fb-table th{height:var(--row-h);padding:0 var(--s-3);background:var(--surface-sunken);border-bottom:1px solid var(--line);
  text-align:left;font-size:var(--fs-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.fb-table td{height:var(--row-h);padding:0 var(--s-3);border-bottom:1px solid var(--line);vertical-align:middle}
.fb-table tbody tr:hover{background:var(--surface-sunken)}
.fb-num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.fb-row{display:flex;align-items:center;gap:var(--s-3);min-height:var(--touch);padding:var(--s-2) var(--s-3);
  border-bottom:1px solid var(--line);background:var(--surface)}
.fb-row:hover{background:var(--surface-sunken)}

/* ---------- stavový štítek ---------- */
.fb-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 6px;border-radius:var(--r-badge);
  background:var(--surface-sunken);color:var(--muted);
  font-size:var(--fs-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.fb-badge--ok{background:var(--ok-bg);color:var(--ok)}
.fb-badge--wait{background:var(--wait-bg);color:var(--wait)}
.fb-badge--danger{background:var(--danger-bg);color:var(--danger)}
.fb-badge--info{background:var(--info-bg);color:var(--info)}
.fb-badge--accent{background:var(--accent-soft);color:var(--accent)}
.fb-count{min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:9px;background:var(--accent);color:var(--accent-ink);font-family:var(--mono);font-size:var(--fs-label);font-weight:600}

/* ---------- formulářové pole ---------- */
.fb-field{display:flex;flex-direction:column;gap:5px;margin-bottom:var(--s-4)}
.fb-field > label{font-size:var(--fs-cap);font-weight:500;color:var(--ink-2)}
.fb-field__hint{font-size:var(--fs-cap);color:var(--muted)}
.fb-field__err{font-size:var(--fs-cap);color:var(--danger)}
.fb-input{min-height:var(--touch);padding:0 var(--s-3);background:var(--surface);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--r-field);font-size:var(--fs-body);width:100%}
.fb-input:hover{border-color:var(--muted)}
.fb-input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.fb-input--err{border-color:var(--danger)}
.fb-input--num{font-family:var(--mono);text-align:right}
textarea.fb-input{min-height:88px;padding:var(--s-2) var(--s-3);line-height:1.5;resize:vertical}
/* viditelná dráha 38×22 px, klikací plocha 44×44 px (recepce ovládá tabletem) */
.fb-switch{position:relative;flex:0 0 auto;width:var(--touch);height:var(--touch);padding:11px 3px;border:none;
  background:var(--line-strong);background-clip:content-box;border-radius:11px;cursor:pointer;transition:background 160ms ease}
.fb-switch__knob{position:absolute;top:14px;left:6px;width:16px;height:16px;border-radius:50%;
  background:var(--surface);box-shadow:var(--shadow-card);transition:left 160ms ease}
.fb-switch[aria-checked="true"]{background:var(--accent);background-clip:content-box}
.fb-switch[aria-checked="true"] .fb-switch__knob{left:22px}

/* ---------- rozbalovací sekce „Pokročilé" ---------- */
.fb-adv{border-top:1px solid var(--line)}
.fb-adv__btn{width:100%;min-height:var(--touch);display:flex;align-items:center;gap:var(--s-2);padding:0 14px;
  background:none;border:none;cursor:pointer;text-align:left;font-size:var(--fs-cap);font-weight:500;color:var(--ink-2)}
.fb-adv__btn:hover{background:var(--surface-sunken)}
.fb-adv__chev{transform:rotate(-90deg);transition:transform 160ms ease}
.fb-adv__btn[aria-expanded="true"] .fb-adv__chev{transform:rotate(0deg)}
.fb-adv__body{padding:0 14px var(--s-3)}

/* ---------- prázdný a chybový stav ---------- */
.fb-empty{max-width:440px;margin:0 auto;padding:var(--s-6) var(--s-5);text-align:center}
.fb-empty h2{margin:0 0 6px;font-size:var(--fs-h2);font-weight:600}
.fb-empty p{margin:0 auto var(--s-4);font-size:var(--fs-cap);color:var(--ink-2);max-width:48ch}
.fb-empty__actions{display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:center}
.fb-empty__icon{width:40px;height:40px;margin:0 auto var(--s-3);display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-field);background:var(--surface-sunken);color:var(--muted)}
.fb-empty__icon--danger{background:var(--danger-bg);color:var(--danger)}

/* ---------- kostra načítání ---------- */
.fb-skel{background:var(--skeleton);border-radius:var(--r-badge);animation:fb-pulse 1.4s ease-in-out infinite}
.fb-skel--card{border-radius:var(--r-card)}
.fb-skel--text{height:10px;border-radius:3px}

/* ---------- boční panel ---------- */
.fb-panel{position:fixed;top:0;right:0;bottom:0;z-index:45;width:480px;max-width:100%;display:flex;flex-direction:column;
  background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--shadow-float);animation:fb-in 160ms ease-out}
.fb-panel--wide{width:720px}
.fb-scrim{position:fixed;inset:0;z-index:44;background:var(--scrim)}
.fb-panel__head{flex:0 0 auto;display:flex;align-items:flex-start;gap:var(--s-3);padding:14px var(--s-4);border-bottom:1px solid var(--line)}
.fb-panel__body{flex:1;min-height:0;overflow-y:auto;padding:var(--s-4)}
.fb-panel__foot{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:var(--s-2);padding:var(--s-3) var(--s-4);border-top:1px solid var(--line)}
@media (max-width:767px){
  .fb-panel,.fb-panel--wide{top:18%;left:0;width:100%;border-left:none;
    border-top-left-radius:var(--r-modal);border-top-right-radius:var(--r-modal)}
}

/* ---------- modál a potvrzovací dialog ---------- */
.fb-modal-wrap{position:fixed;inset:0;z-index:48;display:flex;align-items:flex-start;justify-content:center;
  padding:64px var(--s-4) var(--s-4);background:var(--scrim)}
.fb-modal{width:min(520px,100%);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-modal);
  box-shadow:var(--shadow-float);overflow:hidden;animation:fb-in 140ms ease-out}
.fb-modal__body{padding:var(--s-5)}
.fb-modal__body h2{margin:0 0 6px;font-size:var(--fs-h2);font-weight:600}
.fb-modal__body p{margin:0;font-size:var(--fs-cap);color:var(--ink-2);max-width:56ch}
.fb-modal__foot{display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:flex-end;padding:var(--s-3) var(--s-5);
  border-top:1px solid var(--line);background:var(--surface-sunken)}

/* ---------- drobnosti ---------- */
.fb-chip{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;background:var(--surface);
  color:var(--ink-2);border:1px solid var(--line-strong);border-radius:var(--r-field);font-size:12.5px;cursor:pointer}
.fb-chip--on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.fb-tabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line)}
.fb-tab{flex:0 0 auto;min-height:var(--row-h);padding:0 var(--s-3);background:none;border:none;border-bottom:2px solid transparent;
  color:var(--muted);font-size:var(--fs-cap);cursor:pointer}
.fb-tab:hover{color:var(--ink)}
.fb-tab--on{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)}
.fb-toast{position:fixed;left:50%;bottom:72px;transform:translateX(-50%);z-index:55;display:flex;align-items:center;gap:9px;
  max-width:90%;padding:10px 14px;background:var(--ink);color:var(--bg);border-radius:var(--r-field);
  box-shadow:var(--shadow-float);font-size:var(--fs-cap);animation:fb-in 160ms ease-out}
.fb-avatar{flex:0 0 auto;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--surface-sunken);color:var(--ink-2);font-size:11.5px;font-weight:600}
.fb-avatar--accent{background:var(--accent-soft);color:var(--accent)}
.fb-divider{height:1px;background:var(--line);border:none;margin:var(--s-2) 0}
.fb-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}