/* Welín 2 — vrstva nad návrhem: stavy načítání, hlášky, „nevím", odezva na
   dotyk. Návrh sám (v7 „Živý dům") je v base.css a tenhle soubor ho jen
   doplňuje o to, co prototyp s ukázkovými daty nepotřeboval. Barvy tmavého
   režimu jsou z návrhu (base.css), tady se nepřepisují. */

/* Barvy se přepínají plynule, ať to v noci nepráskne do očí. */
:root[data-theme="dark"] body,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .tile,
:root[data-theme="dark"] .panel{transition:background-color .35s ease,color .35s ease,border-color .35s ease}

/* Stav spojení. Obyčejně neviditelný — objeví se, teprve když je co říct. */
.linkstate{
  display:none;align-items:center;gap:7px;padding:3px 9px;border-radius:999px;
  font-size:11.5px;font-weight:650;letter-spacing:.01em;margin-top:3px;
}
.linkstate.show{display:inline-flex}
.linkstate.warn{background:var(--warn-wash);color:var(--warn)}
.linkstate.crit{background:var(--crit-wash);color:var(--crit)}
.linkstate.busy{background:var(--surface-2);color:var(--ink-3)}
.linkstate i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.tools button.busy{opacity:.55;pointer-events:none}

/* Nápověda při uspořádávání karet (šipky ↑↓ jsou v hlavičce každé karty). */
.arrange-note{
  display:none;margin:0 0 14px;padding:10px 14px;border-radius:var(--r);
  background:var(--volt-wash);color:var(--volt-ink);font-size:13.5px;line-height:1.5;
}
.arrange .arrange-note{display:block}

/* ------------------------------------------------------------- načítání
   Nikdy prázdná obrazovka bez vysvětlení: dokud data nejsou, je vidět proč. */
.boot{
  min-height:60vh;display:grid;place-content:center;justify-items:center;gap:14px;
  text-align:center;color:var(--ink-2);padding:40px 20px;
}
.boot h2{font-size:19px;color:var(--ink)}
.boot p{max-width:42ch;font-size:14px;line-height:1.6;margin:0}
.boot .btn{margin-top:4px}
.spinner{
  width:26px;height:26px;border-radius:50%;
  border:2.5px solid var(--line);border-top-color:var(--heat);
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}

/* Údaj, který EC nemá nebo je starý. Radši poctivé „nevím" než vymyšlené číslo. */
.unknown{color:var(--ink-3);font-weight:600}
.lastknown{color:var(--ink-3);font-size:11.5px;font-weight:600;letter-spacing:.02em}

/* Karta, kterou EC zatím neumí naplnit — ať je poznat, že to není chyba spojení. */
.notyet{
  padding:16px;border:1px dashed var(--line);border-radius:var(--r);
  color:var(--ink-3);font-size:13.5px;line-height:1.55;background:var(--surface-2);
}
.panel-body .notyet{margin-top:4px}

/* Pavouk: v návrhu je .flow přímo na SVG, takže obal má vlastní třídu. */
.flow-wrap{display:block}
.flow-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;font-size:12.5px;color:var(--ink-3)}
.flow-legend span{display:inline-flex;align-items:center;gap:6px}
.flow-legend i{width:16px;height:3px;border-radius:2px;display:inline-block}

/* Dlouhý popis se nesmí lámat přes tři řádky — dlaždice by nabobtnala. */
.tile .sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Pole pro datum a čas v panelech. */
.field{width:100%;padding:11px;border:1px solid var(--line);border-radius:11px;font:inherit;background:var(--surface);color:var(--ink)}

/* ------------------------------------------------------- odezva na dotyk
   Na tabletu musí být cítit, že klepnutí „sedlo": krátké přitlačení dolů
   a zpět. Jen transform, aby to bylo plynulé i na slabém procesoru. */
.tile,.btn,.qa,.tools button,.homeseg button,.arrival,.bigact,.arrange-btn,.seg button,.stepper button,.mv button,.tabs button,.tabbar button,.ahead .acts button{
  transition:transform .12s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.tile:active,.btn:active:not(:disabled),.qa:active:not(:disabled),.tools button:active,
.homeseg button:active,.arrival:active,.bigact:active,.arrange-btn:active,.seg button:active:not(:disabled),
.stepper button:active,.mv button:active:not(:disabled),.ahead .acts button:active{transform:scale(.97)}
.tabs button:active,.tabbar button:active{transform:scale(.92)}
@media (prefers-reduced-motion:reduce){
  .tile,.btn,.qa,.tools button,.homeseg button,.arrival,.bigact,.arrange-btn,.seg button,.stepper button,.mv button,.tabs button,.tabbar button{transition:none}
}

/* Tlačítko, které zrovna posílá povel — je poznat, že se něco děje. */
.btn.busy{position:relative;color:transparent;pointer-events:none}
.btn.busy::after{
  content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--line);border-top-color:currentColor;color:var(--ink-2);
  animation:spin .8s linear infinite;
}

/* --------------------------------------------------------------- hlášky
   Místo alert(): nezastaví stránku, zmizí samy, klepnutím dřív. */
.toasts{
  position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);
  display:flex;flex-direction:column;gap:8px;z-index:90;width:min(560px,calc(100vw - 32px));pointer-events:none;
}
@media (max-width:760px){.toasts{bottom:calc(76px + env(safe-area-inset-bottom))}}
.toast{
  display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-radius:13px;
  background:var(--ink);color:var(--ground);font-size:14px;line-height:1.45;box-shadow:var(--shadow-panel);
  opacity:0;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease;pointer-events:auto;cursor:pointer;
}
.toast.show{opacity:1;transform:none}
.toast i{width:9px;height:9px;border-radius:50%;flex:0 0 auto;margin-top:6px;background:var(--ok)}
.toast.warn i{background:var(--heat)}
.toast.crit i{background:var(--crit)}
:root[data-theme="dark"] .toast{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}

/* Podrobnosti od EC k rozbalení — technický zbytek dlouhé věty. */
details.ec-more summary{cursor:pointer;color:var(--ink-3);font-size:12.5px;font-weight:650;padding:6px 0}
details.ec-more ul{margin:6px 0 0;padding-left:18px;color:var(--ink-3);font-size:12.5px;line-height:1.6}