/* Deploy UI — komponenty a rozloženie dashboardu nad deploy-ui-zaklad.css.
   Základ nesie vzhľad tried .dui-*; tu sú doménové prvky
   a rozmiestnenie stránky, všetko na tokenoch základu. */

html { min-height: 100%; }
/* 5 px od kraja aj medzi boxami — rovnako na mobile aj na desktope (Boss) */
body { min-height: 100vh; margin: 0; padding: 5px; overflow-wrap: anywhere; }
/* Tmavá téma: úplne čierne pozadie; karty si nechávajú --surface-raise (Boss). */
html:not([data-theme="light"]):not([data-theme="blue"]):not(.doc-html),
html:not([data-theme="light"]):not([data-theme="blue"]):not(.doc-html) body { background-color: #000; }

.app-shell { display: flex; flex-direction: column; gap: 5px; width: 100%; }

/* ── Topbar ─────────────────────────────────────────────────────────── */

.topbar .dui-card-header { min-height: 54px; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* Okrúhly refresh — vedomá odchýlka od hranatých tlačidiel kitu (Boss). */
.btn-round { border-radius: 50%; }
.btn-round.is-busy svg { animation: refresh-spin 1s linear infinite; }
@keyframes refresh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn-round.is-busy svg { animation: none; }
}

/* ── Prehľad: responzívna mriežka zarovnaná s topbarom ──────────────── */

.overview {
  display: grid;
  grid-template-columns: repeat(var(--stlpce, 1), minmax(0, 1fr));
  gap: 5px;
  align-items: stretch;
}
/* stĺpce skladá layoutColumns() v app.js — karta má výšku podľa obsahu (Boss) */
.overview-col { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
/* kratší stĺpec sa dorovná: voľné miesto sa rozdelí rovnomerne medzi jeho karty, spodky sedia (Boss) */
.overview-col > .node-card { flex: 1 1 auto; }
.overview.is-skladam { align-items: start; }
.overview.is-skladam .overview-col > .node-card { flex: none; }

.loading { max-width: none; margin-bottom: 5px; }

/* ── Úvodný loader — prevzatý z Object Studia (Boss), vždy tmavý ─────── */

#appLoader{position:fixed;inset:0;z-index:2147483647;display:flex;align-items:center;justify-content:center;padding:0 16px;background:#000;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;transition:opacity .55s ease,visibility .55s ease}
#appLoader.hide{opacity:0;visibility:hidden}
#appLoader .ldr-stars{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#appLoader .ldr-stars::before,#appLoader .ldr-stars::after{content:'';position:absolute;inset:-10%;background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 72% 18%,#cfe3ff,transparent),radial-gradient(1px 1px at 41% 68%,#fff,transparent),radial-gradient(1.6px 1.6px at 86% 60%,#fff,transparent),radial-gradient(1px 1px at 56% 44%,#ffdbe4,transparent),radial-gradient(1px 1px at 14% 82%,#fff,transparent),radial-gradient(1.5px 1.5px at 91% 86%,#cfe3ff,transparent),radial-gradient(1px 1px at 32% 12%,#fff,transparent),radial-gradient(1px 1px at 64% 78%,#fff,transparent);animation:ldrTwinkle 3.4s ease-in-out infinite}
#appLoader .ldr-stars::after{animation-delay:1.7s;opacity:.5;transform:scale(1.35)}
@keyframes ldrTwinkle{0%,100%{opacity:.35}50%{opacity:.95}}
#appLoader .ldr-core{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;width:min(320px,100%)}
#appLoader .ldr-stage{position:relative;width:264px;height:264px;display:flex;align-items:center;justify-content:center}
#appLoader .ldr-orbit{position:absolute;inset:32px;border-radius:50%;border:1px solid rgba(255,255,255,.22);animation:ldrSpin 5s linear infinite}
#appLoader .ldr-orbit::after{content:'';position:absolute;top:-4px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#fff}
@keyframes ldrSpin{to{transform:rotate(360deg)}}
#appLoader .ldr-art{width:196px;height:196px;transition:opacity .15s ease}
#appLoader .ldr-art .lp{opacity:.14;transition:opacity .35s ease}
#appLoader .ldr-art .lp.on{opacity:1}
#appLoader .ldr-brand{color:#fff;font-weight:800;letter-spacing:.24em;font-size:14px}
#appLoader .ldr-credits{margin-top:-8px;text-align:center;color:#7f8698;font-size:10.5px;line-height:1.5}
#appLoader .ldr-credits b{color:#aab0c0;font-weight:500}
#appLoader .ldr-credits .tools{margin-top:4px;color:#5f6678}
#appLoader .ldr-prog{display:flex;align-items:center;gap:10px;width:100%}
#appLoader .ldr-bar{position:relative;flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.10);overflow:hidden}
#appLoader .ldr-bar i{position:absolute;left:0;top:0;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,#5fd4a4,#f5c6d0);box-shadow:0 0 10px rgba(245,198,208,.4);transition:width .35s ease}
#appLoader .ldr-pct{min-width:44px;text-align:right;color:#e6e6ee;font-size:12px;font-variant-numeric:tabular-nums}
#appLoader .ldr-log{width:100%;height:54px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;line-height:1.55;color:#7f8698}
#appLoader .ldr-log div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.5;animation:ldrLogIn .25s ease}
#appLoader .ldr-log div:last-child{opacity:1;color:#aab0c0}
@keyframes ldrLogIn{from{opacity:0;transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){ #appLoader *{animation:none!important} }

/* Pruhy RAM / Disk / limity pomaly narastú od nuly po načítaní (Boss). */
.resource .dui-progress > i { transition: width 2.4s cubic-bezier(.22,.61,.36,1); }
/* Jemný pocitový gradient v zelených pruhoch: sýtejšia mint vľavo, svetlejšia vpravo (Boss). */
.resource .dui-progress:not(.is-error) > i { background-image: linear-gradient(90deg, color-mix(in oklab, var(--surface-accent-inverse) 78%, #000) 0%, var(--surface-accent-inverse) 55%, color-mix(in oklab, var(--surface-accent-inverse) 72%, #fff) 100%); }
@media (prefers-reduced-motion: reduce) { .resource .dui-progress > i { transition: none; } }

/* ── Mapa: ilustrácia v linkách, farby len mint + krémovo ružová + čb (Boss) ── */

/* Krémovo ružová nahrádza žltú všade (Boss). Vo svetlej téme tmavší odtieň na text. */
:root { --dd-pink: #f5c6d0; --dd-pink-ink: #f5c6d0; }
[data-theme="light"] { --dd-pink-ink: #b5657b; }

.map-card { margin-bottom: 5px; --map-ok: var(--content-accent); --map-warn: var(--dd-pink-ink); }
/* zbaľovanie mapy: celý nadpis je tlačidlo so šípkou (Boss) */
.map-toggle {
  display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer;
}
.map-toggle svg { width: 14px; height: 14px; flex: 0 0 auto; }
.map-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.map-toggle:hover, .map-toggle:focus-visible { color: var(--content-accent); outline: none; }
.map-wrap[hidden] { display: none; }
.map-card.is-collapsed .dui-card-header { border-bottom: 0; }
.map-legend { display: flex; gap: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--content-tertiary); }
.map-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.map-key { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid; }
.map-key--ok { border-color: var(--map-ok); background: var(--map-ok); }
.map-key--warn { border-color: var(--map-warn); }

/* Boxíky ležia na mape vľavo dole — nad južným Pacifikom, kde nič nezakrývajú. */
.map-wrap { position: relative; min-width: 0; padding: 0; }   /* mapa a sieť až po hranu karty (Boss) */
.map-svg { display: block; width: 100%; height: auto; overflow: hidden; }

.map-grat { fill: none; stroke: var(--content-raise); stroke-opacity: .06; stroke-width: 1px; vector-effect: non-scaling-stroke; }   /* sieť: plná 1 px čiara, len pocitovo (Boss) */
.map-eq { fill: none; stroke: var(--content-raise); stroke-opacity: .16; stroke-width: .6; stroke-dasharray: 6 4; }
.map-land { fill: none; stroke: var(--content-raise); stroke-opacity: .55; stroke-width: .8; stroke-linejoin: round; }
.map-border { fill: none; stroke: var(--content-raise); stroke-opacity: .22; stroke-width: .6; stroke-dasharray: 2 3; }

/* Pin = blikajúca gulička + názov v kitovom badge, rovnakom ako „ONLINE" (Boss).
   Piny sú HTML vrstva nad SVG, pozícia v % z viewBoxu. Gulička bliká
   biela (Boss: všetky blikajúce guličky biele). */
.map-stage { position: relative; }
.map-pins { position: absolute; inset: 0; pointer-events: none; }
.map-pin {
  position: absolute; display: inline-flex; align-items: center; gap: 6px;
  transform: translate(-4px, -50%); pointer-events: auto; text-decoration: none; white-space: nowrap;
}
.map-pin.is-left { flex-direction: row-reverse; transform: translate(calc(-100% + 4px), -50%); }
/* edge platformy bez regiónu: štítok vľavo dole (Tichý oceán), nie pin na meste */
.map-global { position: absolute; left: 3%; bottom: 6%; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.map-global .map-pin { position: static; transform: none; }
.map-pin .pin-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--content-raise); animation: pin-blik 0.9s ease-in-out infinite; }
.map-pin:hover .dui-badge, .map-pin:focus-visible .dui-badge { text-decoration: underline; text-underline-offset: 2px; }
.map-pin .dui-badge { font-size: 9px; line-height: 14px; height: 14px; padding-inline: 4px; }   /* menšie písmo na mape (Boss) */
.map-pin .dui-badge.badge-notice { background-color: color-mix(in oklab, var(--dd-pink) 16%, transparent); color: var(--dd-pink-ink); }
@keyframes pin-blik { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .15; transform: scale(.15); } }
@media (prefers-reduced-motion: reduce) { .map-pin .pin-dot { animation: none; } }

.map-list {
  --card-content-size: 11px; list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  position: absolute; right: 24px; top: 24px; width: clamp(220px, 20%, 250px);
}
.map-row { padding: 8px 10px; border: 1px solid var(--stroke-secondary); background: var(--surface-secondary); }
.map-row-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.map-row-head a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.map-row-head .dui-card-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }   /* názov sa nikdy nezalomí uprostred slova (Boss) */
.map-row-head .dui-badge { flex: 0 0 auto; }
.map-row-head a:hover, .map-row-head a:focus-visible { color: var(--content-accent); }
.map-row .provider-logo { width: 22px; height: 22px; }
.map-row .provider-logo img { width: 13px; height: 13px; }
.map-row .deploy-detail { margin-top: 4px; line-height: 1.4; }
/* Malé odznaky (Status Box): BEŽÍ na mape, stav aplikácie aj FREE / ONLINE v hlavičke karty — jedna veľkosť (Boss). */
.map-row .dui-badge, .node-actions .dui-badge { font-size: 9px; line-height: 1.2; padding: 4px 6px 2px; }

/* ── Karta uzla (server / cloud platforma) ──────────────────────────── */

.node-card { display: flex; flex-direction: column; min-width: 0; }
.node-card--problem { border-color: var(--stroke-error); }

.node-head { gap: 14px; }
.node-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.node-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; flex: 0 0 auto; }
.node-head { flex-wrap: nowrap; }   /* stav ostáva vpravo, nezalomí sa pod názov (Boss) */

/* Logo poskytovateľa — kit brand logá nemá, doménový prvok. */
.provider-logo {
  width: 38px; height: 38px; flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #fff;
}
.provider-logo img, .provider-logo svg { width: 22px; height: 22px; object-fit: contain; filter: none; }
.provider-fallback { font-family: var(--font-mono); font-size: 12px; color: #000; }
/* Svetlá téma: inverzia — čierny krúžok, biela ikonka. */
[data-theme="light"] .provider-logo { background: #000; border-color: #000; }
/* Jemný gradient v krúžkoch (logo + poskytovatelia) — svetlá: čierna → tmavá mint, tmavá: jemne sivá → biela (Boss). */
.provider-logo { background: linear-gradient(145deg, #d4d4d8 0%, #fff 100%); }
[data-theme="light"] .provider-logo { background: linear-gradient(145deg, #000 0%, #154d38 100%); }
[data-theme="light"] .provider-logo img { filter: invert(1); }
[data-theme="light"] .provider-logo svg { stroke: #fff; }
[data-theme="light"] .provider-fallback { color: #fff; }

.node-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.node-sidebar {
  display: flex; flex-direction: column; gap: 16px;
  padding: 16px; border-bottom: 1px solid var(--stroke-secondary);
}
.kv-server-name { text-transform: uppercase; }   /* názov servera kapitálkami všade (Boss) */
.server-info-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

.resource-list { display: grid; gap: 14px; }
.resource-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.resource-head strong {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--content-tertiary);
}
.resource-head span {
  font-family: var(--font-mono); font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--content-secondary); text-align: right;
}
.resource-critical .resource-head span { color: var(--content-error); }

.node-error { margin: 0; }
.console-action { width: 100%; text-decoration: none; }

/* ── Aplikácie na uzle ──────────────────────────────────────────────── */

.deployments { min-width: 0; padding: 16px; flex: 1 1 auto; }
.deployments-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }

/* Pravidlo UI (Boss): v boxe aplikácie sú presne tri veľkosti písma —
   titul (dui-card-title), obsah (--card-content-size) a status badge
   (--card-status-size). Nič štvrté. */
.service-list { --card-content-size: 11px; --card-status-size: 9px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.service-item {
  min-width: 0; padding: 12px;
  border: 1px solid var(--stroke-secondary);
  background: var(--surface-secondary);
}
.service-item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.service-item-head strong { min-width: 0; overflow-wrap: anywhere; }
.service-name strong { min-width: 0; }
/* Status Box (Bossov názov pre rámik s badge Beží/Offline). */
.service-state .dui-badge { font-size: var(--card-status-size); line-height: 1.2; padding: 4px 6px 2px; }
.service-state { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.service-name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.lock-icon {
  background: #fff; color: #000;
}
.lock-icon.is-locked { background: #f5c400; }   /* zamknutý zámok v žltom krúžku (Boss) */
.service-list > .service-item:only-child { grid-column: 1 / -1; }

/* ── Krúžky s ikonou — globálna definícia (Boss) ─────────────────────
   Jedna veľkosť a jedno umiestnenie ikony pre všetky krúžky v appke:
   16 px krúžok, 10 px ikona presne v strede (odsadenie 3 px = celé pixely).
   Farba sa rieši len modifikátorom (zámok žltý, ostatné sa vyberajú). */
:root { --dd-kruzok: 16px; --dd-kruzok-ikona: 10px; }
.dd-kruzok {
  box-sizing: border-box; width: var(--dd-kruzok); height: var(--dd-kruzok); flex: 0 0 auto;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
}
.dd-kruzok svg { display: block; width: var(--dd-kruzok-ikona); height: var(--dd-kruzok-ikona); }


/* Otáznik a GitHub dole v boxe, zvislo pod zámkom; slabo sivé (variant 1, Boss).
   Presne 16 px ako zámok; obrys musí byť viditeľný, inak kruh opticky zmenší. */
.service-item { display: flex; flex-direction: column; }
.service-item-body { flex: 1 1 auto; }
.app-links { display: flex; align-items: center; gap: 6px; margin-top: auto; }
a.app-help { text-decoration: none; }

.app-help {
  background: #2c2f35; color: #9aa0a8;   /* variant 1 — slabo sivý (Boss) */
  cursor: help;
}
.app-help:hover, .app-help:focus-visible { color: var(--content-accent); outline: none; }

/* Spoločný tooltip celej appky — ukáže sa hneď, bez animácie (Boss). */
.dd-tip {
  position: fixed; z-index: 1000; max-width: min(280px, calc(100vw - 16px));
  padding: 6px 9px; border: 1px solid var(--stroke-primary);
  background: var(--surface-raise, var(--surface-primary)); box-shadow: var(--shadow-tooltip);
  color: var(--content-secondary); font-size: 11px; line-height: 1.45; pointer-events: none;
}

.service-item-body { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.deploy-url { margin: 0; font-size: var(--card-content-size); font-weight: 400; line-height: 1.5; color: var(--content-quaternary); }
.deploy-url a { color: inherit; font-weight: 400; text-decoration: underline; text-underline-offset: 2px; }
.deploy-url a:hover, .deploy-url a:focus-visible { color: var(--content-accent); }
.deploy-detail { margin: 0; font-size: var(--card-content-size); line-height: 1.55; color: var(--content-tertiary); }

.empty-apps {
  padding: 24px 14px; text-align: center;
  border: 1px dashed var(--stroke-secondary);
}

/* ── Päta ───────────────────────────────────────────────────────────── */

/* Pätička: box ako topbar; credits vľavo, nástroje vpravo — tmavosivý malý mono (Boss). */
.page-foot {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .02em;
  color: var(--content-quaternary);
}
.page-foot .dui-card-header { min-height: 63px; flex-wrap: wrap; gap: 8px 24px; }   /* rovnaká výška ako topbar */
.page-foot p { margin: 0; }
.foot-sep { margin: 0 8px; opacity: .6; }
.page-foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.page-foot a:hover, .page-foot a:focus-visible { color: var(--content-accent); }

/* ── Responzivita ───────────────────────────────────────────────────── */

@media (max-width: 640px) {
  /* mobil: boxíky na mape úplne preč, inak ostávajú vpravo hore (Boss) */
  .map-list { display: none; }
}

@media (max-width: 900px) {
  .service-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .map-legend { display: none; }   /* ustupuje popis; farbu vysvetľujú badge v zozname */
}

@media (max-width: 640px) {
  .page-foot .dui-card-header { flex-direction: column; align-items: flex-start; justify-content: center; }
}

/* ── Globálne (mobil aj desktop) ────────────────────────────────────── */

/* svetlá téma: pozadie sivé ako lišta prehliadača, boxy biele (Boss) */
html[data-theme="light"]:not(.doc-html), html[data-theme="light"]:not(.doc-html) body { background-color: #f5f5f5; }
[data-theme="light"] .dui-card { background-color: #fff; }
/* topbar a pätička majú len hlavičku: jej spodná linka + rámik karty = 2 px, necháme 1 px (Boss) */
.topbar .dui-card-header, .page-foot .dui-card-header { border-bottom-width: 0; }
/* malé badge (9 px): padding 4/2 posúval verzálky o ~0,3 px nižšie — vyrovnané 3,75/2,25, bodka ide s textom (Boss) */
.map-row .dui-badge, .node-actions .dui-badge, .service-state .dui-badge { padding-top: 3.75px; padding-bottom: 2.25px; --dd-dot-shift: -0.75px; }
/* optické centrovanie: nápis orezaný na výšku verzálok (bez mäkčeňov/dĺžňov) a vycentrovaný v boxíku (Boss) */
/* Napevno: 5 px nad verzálkami, 5 px pod nimi (na mape 4/4), výška podľa obsahu (Boss).
   Mäkčene/dĺžne sa nerátajú. JetBrains Mono: ascent 1020, descent 300, verzálky 730 (z 1000),
   rovnaké v hhea/typo/win — riadok vysoký 0.73em je presne výška verzálok v každom prehliadači.
   text-box to v nových prehliadačoch potvrdí orezaním podľa metrík písma. */
.dui-badge.dui-badge:has(> span) { height: auto; padding-block: 5px; --dd-dot-shift: 0px; }   /* zdvojená trieda prebije .node-actions .dui-badge */
.map-pin .dui-badge.dui-badge:has(> span) { padding-block: 4px; }
.dui-badge > span { display: block; line-height: 0.73em; }
@supports (text-box: trim-both cap alphabetic) {
  .dui-badge > span { text-box: trim-both cap alphabetic; }
}
/* Safari / iPhone (WebKit) kreslí verzálky o ~0.2 px vyššie — podľa Bossovho screenshotu z mobilu, dorovnávame */
@supports (font: -apple-system-body) and (text-box: trim-both cap alphabetic) {
  .dui-badge > span { position: relative; top: 0.025em; }
}
/* staršie prehliadače (bez text-box): zaokrúhlenie metrík písma na celé px dvíha nápis o ~0.06em — vraciame ho */
@supports not (text-box: trim-both cap alphabetic) {
  .dui-badge > span { position: relative; top: 0.06em; }
}

/* ── Online gulička v badge — vedomá odchýlka od kitu (Boss) ────────── */

.dui-badge .dui-dot {
  margin-right: 6px;
  background-color: #fff;
  animation: dd-pulz 0.9s ease-in-out infinite;
}
/* gulicka sa zmensi skoro do stratena a zase narastie — vyraznejsie a rychlejsie (Boss) */
@keyframes dd-pulz {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .15; transform: scale(.15); }
}
@media (prefers-reduced-motion: reduce) {
  .dui-badge .dui-dot { animation: none; }
}
/* Horná lišta: Preveriť znova · Téma · Odhlásiť — rovnaké okrúhle ikonky (Boss). */
.top-actions { display: flex; align-items: center; gap: 8px; }
.top-actions form { display: contents; }   /* logout form nesmie lámať rad tlačidiel */

/* Bodka v badge presne na vertikálnom strede boxíka (Boss). Badge má kvôli
   účiarí mono písma padding 4 px hore / 2 px dole, takže obsahový box je
   o 1 px nižšie — bodku vraciame späť. */
.dui-badge:has(.dui-dot) { display: inline-flex; align-items: center; }
.dui-badge .dui-dot { flex: 0 0 auto; position: relative; top: var(--dd-dot-shift, -1px); }

/* Badge: letter-spacing pridáva medzeru aj za posledné písmeno — vraciame ju,
   aby bol nápis vľavo aj vpravo rovnako ďaleko od okraja (Boss, globálne). */
.dui-badge > span { margin-inline-end: -0.04rem; }

/* názov aplikácie sa láme len medzi slovami, nikdy uprostred slova (Boss) */
.service-item-head .service-name strong { min-width: auto; overflow-wrap: normal; word-break: normal; }

/* úzky box: status + otáznik sa zalomia pod názov, nevytečú z boxu */
.service-item-head { flex-wrap: wrap; }


/* ── Modrá téma: takmer čierna modrá + koralová (Boss) ──────────────────
   Boxy takmer čierna modrá, pozadie stránky biele. Text tmavšia sivá. Doplnková farba koralová namiesto mint, boxík stavu biely.
   Všetko sú len prepísané tokeny základu, komponenty ostávajú nedotknuté. */

html[data-theme="blue"]:not(.doc-html), html[data-theme="blue"]:not(.doc-html) body { background-color: #26262a; }

[data-theme="blue"] {
  /* plochy — boxy tmavšie než pozadie stránky (návrh č. 1, Boss) */
  --surface-raise: oklch(0.135 0.075 268);        /* karty */
  --surface-default: oklch(0.150 0.078 268);
  --surface-secondary: oklch(0.118 0.066 268);    /* box v karte */
  --surface-hover: oklch(0.205 0.090 268);
  --surface-tertiary: oklch(0.240 0.095 268);
  --surface-disabled: oklch(0.165 0.070 268);

  /* linky — o stupeň svetlejšie než plochy, stále tiché */
  --stroke-secondary: oklch(0.285 0.075 268);
  --stroke-tertiary: oklch(0.235 0.070 268);
  --stroke-default: oklch(0.360 0.075 268);
  --stroke-raise: oklch(0.430 0.070 268);

  /* text — tmavšia sivá s modrým nádychom; kontrast na karte v zátvorke (Boss) */
  --content-raise: #b1b6c2;        /* 9.9 */
  --content-default: #a0a5b3;      /* 8.2 */
  --content-secondary: #8f95a4;    /* 6.7 */
  --content-tertiary: #7e8496;     /* 5.4 */
  --content-quaternary: #757b8e;   /* 4.7 */
  --content-disabled: #5c6379;     /* 3.4 — len vypnuté prvky */

  /* doplnková farba: koralová namiesto mint (celá škála kitu, Boss) */
  --theme-accent-200: #3b1313;
  --theme-accent-300: #521a1a;
  --theme-accent-400: #742424;
  --theme-accent-500: #9a2f2f;
  --theme-accent-600: #c03a3a;
  --theme-accent-700: #e34343;
  --theme-accent-800: #ff4b4b;
  --theme-accent-900: #ff6b6b;
  --theme-accent-1000: #ff8f8f;
  --theme-accent-1100: #ffb5b5;
  --theme-accent-1200: #ffd9d9;
}

/* Boxík stavu v modrej téme je biely s takmer čiernym modrým písmom (Boss) —
   vedomá odchýlka od kitu, ktorý dáva tmavý podklad a farebné písmo.
   Gulička v ňom musí ísť tiež do tmava, na bielej by biela zmizla. */
[data-theme="blue"] .dui-badge.badge-default,
[data-theme="blue"] .dui-badge.variant-solid.badge-default {
  background-color: #fff; color: #04061c;
}
[data-theme="blue"] .dui-badge.badge-default .dui-dot,
[data-theme="blue"] .dui-badge.variant-solid.badge-default .dui-dot {
  background-color: #04061c;
}
[data-theme="blue"] .dui-badge.variant-solid.badge-neutral {
  background-color: oklch(0.800 0.020 268); color: oklch(0.240 0.050 268);
}

/* Krúžky v modrej téme (Boss): veľké kruhy s logom sú rovnaké ako v tmavej
   téme — jemne sivá do bielej — takže nepotrebujú žiadny prepis.
   Zámok je oranžový, otáznik a GitHub sú tiché ultramarínové kruhy. */
[data-theme="blue"] .lock-icon { background: #fff; color: oklch(0.180 0.080 268); }
[data-theme="blue"] .lock-icon.is-locked { background: oklch(0.745 0.165 55); color: oklch(0.260 0.070 55); }
/* otáznik a GitHub: kruh o stupeň svetlejší než karta, na hover sa sfarbia do koralovej */
[data-theme="blue"] .app-help { background: oklch(0.270 0.070 268); color: oklch(0.800 0.020 268); }