/* =============================================================
   FIREB — KOMPONENTY
   ============================================================= */

/* -------------------------------------------------------------
   TLAČÍTKO
   Varianty podle role, ne podle barvy:
     .btn--primary  hlavní akce na stránce (černá)
     .btn--accent   akce značky, bronz (max. jedna vedle primary)
     .btn--ghost    vedlejší akce (bílá s rámečkem)
     .btn--quiet    terciární, jen text se šipkou
   ------------------------------------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  padding:14px 26px;
  border-radius:var(--r-pill);
  font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);
  line-height:1.2;
  white-space:nowrap;
  border:1px solid transparent;
  transition:background var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),
             transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn[aria-disabled="true"],.btn:disabled{
  opacity:.45;pointer-events:none;transform:none;
}

.btn--primary{
  background:var(--text);
  color:var(--c-white);
  box-shadow:var(--shadow-ink);
}
.btn--primary:hover{background:var(--c-ink-900)}

.btn--accent{
  background:var(--accent);
  color:var(--c-white);
  box-shadow:var(--shadow-accent);
}
.btn--accent:hover{background:var(--accent-strong)}

.btn--ghost{
  background:var(--c-white);
  color:var(--text);
  border-color:var(--border);
  box-shadow:var(--shadow-xs);
}
.btn--ghost:hover{border-color:var(--text);background:var(--c-white)}

.btn--quiet{
  padding-inline:var(--space-2);
  color:var(--text-2);
  box-shadow:none;
}
.btn--quiet:hover{color:var(--text-accent);transform:none}

/* Na tmavém povrchu se role obrací — bílá je nejsilnější */
.surface-dark .btn--primary,.btn--on-dark{
  background:var(--c-white);
  color:var(--text);
  box-shadow:none;
}
.surface-dark .btn--primary:hover,.btn--on-dark:hover{background:var(--c-ink-50)}
.surface-dark .btn--ghost{
  background:transparent;
  color:var(--c-white);
  border-color:var(--c-panel-line-2);
}
.surface-dark .btn--ghost:hover{border-color:var(--c-white)}

/* Velikosti */
.btn--sm{padding:10px 18px;font-size:var(--fs-xs)}
.btn--lg{padding:17px 32px;font-size:var(--fs-body)}
.btn--block{display:flex;width:100%}

/* Zpětná kompatibilita s fireb-web-8.html — role odpovídají
   tomu, jak se tam nakonec vykreslovaly (btn-gold = černá). */
.btn-gold{background:var(--text);color:var(--c-white);box-shadow:var(--shadow-ink)}
.btn-gold:hover{background:var(--c-ink-900)}
.btn-primary{background:var(--accent);color:var(--c-white);box-shadow:var(--shadow-accent)}
.btn-primary:hover{background:var(--accent-strong)}
.btn-ghost{background:var(--c-white);color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--text)}
.btn-light{background:var(--c-white);color:var(--text)}

/* -------------------------------------------------------------
   ODKAZ SE ŠIPKOU — „Všechny funkce SCALIXu →“
   ------------------------------------------------------------- */

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);
  color:var(--text-accent);
}
.link-arrow::after{
  content:"→";
  transition:transform var(--dur) var(--ease);
}
.link-arrow:hover::after{transform:translateX(4px)}

/* -------------------------------------------------------------
   NADŘAZENÝ ŠTÍTEK NAD NADPISEM (eyebrow)
   Pilulka s bronzovou tečkou.
   ------------------------------------------------------------- */

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  padding:6px 14px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--c-white);
  box-shadow:var(--shadow-xs);
  font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);
  color:var(--text);
  letter-spacing:0;
  line-height:1.4;
}
.eyebrow::before{
  content:"";
  flex:none;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--accent);
}
.eyebrow--live::before{
  background:var(--c-live);
  animation:pulse-live 2s var(--ease-out) infinite;
}
@keyframes pulse-live{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}
  70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}
.surface-dark .eyebrow{
  background:rgba(255,255,255,.06);
  border-color:var(--border-on-dark);
  color:var(--c-white);
  box-shadow:none;
}

/* -------------------------------------------------------------
   ŠTÍTKY PROCESŮ — AUTO / HLÍDÁM / AI
   Slovník z přípravy. Vždy verzálkami v mono.
   ------------------------------------------------------------- */

.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 9px;
  border-radius:var(--r-xs);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:var(--fw-semibold);
  letter-spacing:.1em;
  text-transform:uppercase;
  line-height:1.5;
  white-space:nowrap;
}
.tag--auto{background:var(--accent-soft);color:var(--accent-strong)}
.tag--watch{background:rgba(47,158,107,.12);color:var(--c-ok)}
.tag--ai{background:var(--c-info-soft);color:var(--c-info)}
.tag--warn{background:rgba(217,161,58,.14);color:#9a6f14}
.tag--neutral{background:var(--bg-soft);color:var(--text-2)}

.surface-dark .tag--auto{background:rgba(181,132,76,.2);color:var(--c-gold-300)}
.surface-dark .tag--watch{background:rgba(47,158,107,.2);color:#7ddcae}
.surface-dark .tag--ai{background:rgba(8,145,178,.2);color:#7fd6ea}

/* -------------------------------------------------------------
   KARTA
   ------------------------------------------------------------- */

.card{
  background:var(--c-white);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-md);
  padding:var(--space-7);
}
.card--flat{box-shadow:none}
.card--soft{background:var(--bg-soft);border-color:transparent;box-shadow:none}
.card--pad-sm{padding:var(--space-5)}
.card--pad-lg{padding:var(--space-8)}

/* Karta, na kterou se dá kliknout */
.card--link{
  display:block;
  transition:transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease),
             border-color var(--dur) var(--ease);
}
.card--link:hover{
  transform:translateY(-3px);
  border-color:var(--border-strong);
  box-shadow:var(--shadow-lg);
}

.card h3{margin-bottom:var(--space-3)}
.card p{color:var(--text-2);font-size:var(--fs-sm)}

.surface-dark .card{
  background:var(--c-panel-700);
  border-color:var(--c-panel-600);
  box-shadow:none;
}
.surface-dark .card p{color:var(--text-on-dark-2)}

/* Ikona v kroužku v hlavičce karty */
.card-icon{
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:var(--r-sm);
  background:var(--accent-soft);
  color:var(--accent-strong);
  margin-bottom:var(--space-5);
}
.card-icon svg{width:20px;height:20px}

/* Barevné varianty — oblast poznáte podle barvy dřív, než přečtete nadpis */
.card-icon--blue{background:var(--ic-blue-soft);color:var(--ic-blue)}
.card-icon--green{background:var(--ic-green-soft);color:var(--ic-green)}
.card-icon--orange{background:var(--ic-orange-soft);color:var(--ic-orange)}
.card-icon--purple{background:var(--ic-purple-soft);color:var(--ic-purple)}
.card-icon--teal{background:var(--ic-teal-soft);color:var(--ic-teal)}
.card-icon--rose{background:var(--ic-rose-soft);color:var(--ic-rose)}
.card-icon--amber{background:var(--ic-amber-soft);color:var(--ic-amber)}
.card-icon--bronze{background:var(--ic-bronze-soft);color:var(--ic-bronze)}
.card-icon--sm{width:36px;height:36px;border-radius:10px;margin-bottom:0}
.card-icon--sm svg{width:17px;height:17px}
.surface-dark .card-icon{filter:saturate(1.1)}

/* -------------------------------------------------------------
   ČÍSLO S POPISKEM — až 5× / −80 % / 99,8 %
   ------------------------------------------------------------- */

.stat{display:flex;flex-direction:column;gap:var(--space-1)}
.stat__value{
  font-family:var(--font-display);
  font-size:clamp(30px,3.4vw,44px);
  font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-heading);
  line-height:1;
  color:var(--text);
}
.stat__label{
  font-size:var(--fs-xs);
  color:var(--text-mute);
  line-height:1.45;
  max-width:24ch;
}
.stat--accent .stat__value{color:var(--text-accent)}
.surface-dark .stat__value{color:var(--c-white)}
.surface-dark .stat__label{color:var(--text-on-dark-mute)}

/* Pás čísel oddělený linkami */
.stat-band{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--space-8);
  padding-block:var(--space-8);
  border-block:1px solid var(--border);
}
@media (max-width:680px){
  .stat-band{gap:var(--space-6)}
}

/* -------------------------------------------------------------
   PÁS LOG KLIENTŮ
   ------------------------------------------------------------- */

.logo-strip{
  margin-top:var(--space-10);
  text-align:center;
  font-size:var(--fs-xs);
  color:var(--text-mute);
}
.logo-strip__row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-9);
  margin-top:var(--space-5);
  font-size:var(--fs-sm);
  font-weight:var(--fw-bold);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-faint);
}

/* -------------------------------------------------------------
   FORMULÁŘOVÉ PRVKY
   ------------------------------------------------------------- */

.field{display:flex;flex-direction:column;gap:var(--space-2)}

.label{
  font-size:var(--fs-xs);
  font-weight:var(--fw-semibold);
  color:var(--text-2);
}

.input,.select,.textarea{
  width:100%;
  padding:13px 16px;
  background:var(--c-white);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  font-size:var(--fs-sm);
  color:var(--text);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.input::placeholder,.textarea::placeholder{color:var(--text-faint)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--border-strong)}
.input:focus,.select:focus,.textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.textarea{min-height:120px;resize:vertical;line-height:var(--lh-body)}

.select{
  appearance:none;
  padding-right:var(--space-9);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238b8983' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  cursor:pointer;
}

.help{font-size:var(--fs-2xs);color:var(--text-mute)}

/* -------------------------------------------------------------
   ODDĚLOVAČ
   ------------------------------------------------------------- */

.rule{height:1px;background:var(--border);border:0}
.surface-dark .rule{background:var(--border-on-dark)}