/* Ebrew Cloud - doplnky webu desky v rezimu cloud (cloud.js). Tokeny (barvy) jsou v index.html desky
 * (:root svetly + tmavy blok); tady jen nove tokeny pro cile v grafu historie a styly prvku cloud.js. */
:root {
--chart-target: rgba(0,122,255,0.55);
--chart-target-p: rgba(199,99,0,0.6);
--chart-band: rgba(0,122,255,0.12);
}
@media (prefers-color-scheme: dark) {
:root {
--chart-target: rgba(10,132,255,0.6);
--chart-target-p: rgba(217,119,6,0.65);
--chart-band: rgba(10,132,255,0.2);
}
}

/* hlavicka: vyber zarizeni + odhlaseni */
.cl-mode .header { gap: 10px; }
.cl-mode .header-title { min-width: 0; flex: 1; overflow: hidden; }
.cl-dev1 { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-dev { max-width: 100%; font: inherit; font-weight: 700; font-size: 1.05rem; color: var(--text); background: var(--seg-bg); border: none; border-radius: 10px;
padding: 7px 28px 7px 10px; min-height: 36px; -webkit-appearance: none; appearance: none; cursor: pointer;
background-image: linear-gradient(45deg, transparent 50%, var(--text2) 50%), linear-gradient(135deg, var(--text2) 50%, transparent 50%);
background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.cl-dev:focus { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.cl-user { display: flex; align-items: center; gap: 4px; }
.cl-out { width: 36px; height: 36px; border: none; border-radius: 50%; background: var(--seg-bg); color: var(--text2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cl-adm { font-size: 0.75rem; font-weight: 600; color: var(--primary); text-decoration: none; padding: 6px 8px; }

/* radek se starim dat; varovani (mlci > 5 min) = .banner.banner-warning */
.cl-age { font-size: 0.8rem; color: var(--text2); padding: 10px 2px 0; overflow-wrap: anywhere; }
.cl-age.banner { padding: 12px 16px; margin-top: 12px; font-size: 0.85rem; }
.cl-local { margin: 0 0 10px; }

/* jen cteni */
.cl-ro.form-input, select.cl-ro { opacity: 0.6; }
.cl-ro.btn, .segmented button.cl-ro, .list-actions button.cl-ro { cursor: not-allowed; }

/* karta Historie */
.cl-hrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.cl-hrow select { flex: 1 1 160px; min-width: 0; width: auto; }
.cl-hrow .segmented { flex: 0 0 auto; }
.cl-hrow .segmented button { min-width: 52px; }
.cl-chart { height: 240px; }
.cl-tt, .cl-tp { fill: none; stroke-width: 1.5; stroke-linejoin: round; }
.cl-tt { stroke: var(--chart-target); stroke-dasharray: 2 3; }
.cl-tp { stroke: var(--chart-target-p); stroke-dasharray: 2 3; }
.cl-band { fill: var(--chart-band); stroke: none; }
.lk.cl-lkt { border-top: 2px dotted var(--chart-target); }
.lk.cl-lkp { border-top: 2px dotted var(--chart-target-p); }
.chart-legend { flex-wrap: wrap; }
.cl-hbtn { flex: 0 0 auto; }
#clHEv .badge { margin-right: 4px; }
@media (max-width: 640px) {
.cl-hrow .segmented { flex: 1 1 100%; }
.cl-chart { height: 240px; }
}
/* karta Chlazeni okruhu: STATUS nenese nastaveni okruhu -> v cloudu skryta */
.cl-mode #coolCard { display: none !important; }

/* ===== Brana (cloud.js): html.cl-gate = rozhoduje se (jen spinner), html.cl-onb = jen stranka pripojeni ===== */
html.cl-gate body > *, html.cl-onb body > *:not(#clOnb) { display: none !important; }
html.cl-gate body, html.cl-onb body { padding-bottom: 0; }
html.cl-gate body::before { content: ''; position: fixed; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px;
border: 3px solid var(--seg-bg); border-top-color: var(--primary); border-radius: 50%; animation: cl-spin 0.8s linear infinite; }
@keyframes cl-spin { to { transform: rotate(360deg); } }

/* stranka "Pripojte svoji hlavni desku" (#clOnb) */
.onb { min-height: 100vh; }
.onb-h { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--header-bg);
-webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 0.5px solid var(--header-border); }
/* Neonovy billboard "Cloud by codeandcircuite" (misto loga): tmava tabule s neonovym textem,
   stejna ve svetlem i tmavem rezimu. */
.neon { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 22px 10px; border-radius: 14px;
background: #0b0b14; border: 1px solid #1d1d2c; box-shadow: 0 0 0 1px #000 inset, 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 24px rgba(255, 60, 172, 0.18);
text-decoration: none; line-height: 1; user-select: none; }
.neon-main { font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif; font-weight: 800; font-size: 2.1rem; letter-spacing: 3px; text-transform: uppercase;
color: #fff; text-shadow: 0 0 2px #fff, 0 0 7px #ff3cac, 0 0 14px #ff3cac, 0 0 28px #ff3cac, 0 0 48px #b8128a; animation: neon-hum 3.2s ease-in-out infinite; }
.neon-sub { font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif; font-weight: 600; font-size: 0.8rem; letter-spacing: 2.5px; text-transform: uppercase;
color: #e8fdff; text-shadow: 0 0 2px #e8fdff, 0 0 6px #22e5ff, 0 0 12px #22e5ff, 0 0 24px #0aa8c4; }
.neon-sm { flex-direction: row; align-items: baseline; gap: 8px; padding: 6px 12px 5px; border-radius: 10px; }
.neon-sm .neon-main { font-size: 1.15rem; letter-spacing: 2px; }
.neon-sm .neon-sub { font-size: 0.6rem; letter-spacing: 1.5px; }
@keyframes neon-hum { 0%, 100% { opacity: 1; } 50% { opacity: 0.93; } 52% { opacity: 0.99; } 54% { opacity: 0.94; } }
@media (prefers-reduced-motion: reduce) { .neon-main { animation: none; } }
.onb-sp { flex: 1; }
.onb-who { font-size: 0.8rem; color: var(--text2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onb-lnk { font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--primary); background: none; border: none; cursor: pointer; text-decoration: none; padding: 8px 4px; white-space: nowrap; }
.onb-m { max-width: 640px; margin: 0 auto; padding: 20px 16px 48px; }
.onb-back { display: inline-block; color: var(--primary); text-decoration: none; font-weight: 600; font-size: 0.9rem; margin-bottom: 12px; }
.onb-t, .onb-card h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.4px; line-height: 1.2; margin-bottom: 6px; }
.onb-lead { color: var(--text2); margin-bottom: 18px; line-height: 1.4; }
.onb-steps { list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 10px; }
.onb-steps li { counter-increment: s; display: flex; gap: 14px; background: var(--card); border-radius: var(--radius); padding: 16px; line-height: 1.45; font-size: 0.95rem; }
.onb-steps li > div { flex: 1; min-width: 0; }
.onb-steps p { color: var(--text2); margin-top: 2px; }
.onb-steps p b { color: var(--text); }
.onb-ic { position: relative; flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; background: var(--primary-light); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.onb-steps .onb-ic::after { content: counter(s); position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--primary);
color: #fff; font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.onb-ic.big { width: 56px; height: 56px; margin-bottom: 12px; }
.onb-url { display: flex; gap: 6px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.onb-url code { flex: 1 1 200px; min-width: 0; font: 600 0.9rem ui-monospace, Menlo, Consolas, monospace; background: var(--input-bg); border-radius: 10px; padding: 10px 12px; overflow-wrap: anywhere; color: var(--text); }
.onb-copy { border: none; border-radius: 10px; background: var(--primary-light); color: var(--primary); font: inherit; font-size: 0.85rem; font-weight: 600; padding: 10px 14px; min-height: 40px; cursor: pointer; }
.onb-code { display: flex; gap: 8px; margin-top: 8px; }
.onb-code .form-input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 2px; font-size: 1.1rem; }
.onb-code .btn { flex-shrink: 0; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; }
.onb-err { color: var(--danger); font-size: 0.85rem; margin-top: 6px; }
.onb-note { margin: 12px 0 0; }
.onb-card { background: var(--card); border-radius: var(--radius); padding: 20px 18px; line-height: 1.45; }
.onb-card p { color: var(--text2); margin: 8px 0 14px; }
.onb-gone { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; padding: 16px; }
.onb-gone a { color: var(--primary); text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.onb-wait { text-align: center; margin-top: 16px; }
#clOnb a.btn { text-decoration: none; }
@media (max-width: 420px) { .onb-h .neon-sub { display: none; } }

/* ===== Faze 3 (cloud.js) ===== */
/* prikazy z cloudu: karta v zalozce Tanky, znacka nevyrizeneho prikazu v karte tanku */
.cl-cmdinfo { font-size: 0.8rem; margin: 2px 0 4px; }
.cl-cmdinfo:empty { display: none; }
.cl-cmd { gap: 10px; }
.cl-cmd > div { min-width: 0; }
.cl-cmd .list-name { overflow-wrap: anywhere; }
.cl-cmd .badge { flex-shrink: 0; }
.cl-pend { margin-right: 2px; }
/* pozorovatel: zadna akcni tlacitka (zakazane prvky s rezimem zustavaji jako informace) */
.cl-viewer .container .btn.cl-ro { display: none !important; }
.cl-viewer .node-card .cal-row:has(> .node-head > .btn.cl-ro), .cl-viewer .node-actions:empty { display: none; }
/* export historie */
.cl-exp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.cl-exp > .muted { font-size: 0.8rem; margin-right: 2px; }
.cl-exp a.btn { text-decoration: none; }
.cl-exp a.cl-dis { opacity: 0.45; pointer-events: none; }
.cl-xl { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; color: var(--text2); margin-left: 4px; cursor: pointer; }
/* hlavicka: zvonek (notifikace) */
a.cl-out { text-decoration: none; }

/* ===== Nastaveni notifikaci (#clSet, html.cl-page) ===== */
html.cl-page body > *:not(#clSet) { display: none !important; }
html.cl-page body { padding-bottom: 0; }
.cl-set .card { margin-bottom: 12px; }
.cl-set .form-group { margin-bottom: 10px; }
.cl-set .toggle-status { font-size: 0.8rem; color: var(--text2); margin-top: 2px; }
.cl-set .toggle-row > div:first-child { min-width: 0; padding-right: 12px; }
.ns-ten { margin: 0 0 12px; }
.ns-def { margin: 0 0 12px; }
.ns-push { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0 2px; font-size: 0.85rem; }
.ns-push .muted { flex: 1 1 200px; }
.ns-subs { font-size: 0.8rem; margin-top: 8px; overflow-wrap: anywhere; }
.ns-sub { margin: 4px 0 6px; }
.ns-chk { display: flex; align-items: flex-end; padding-bottom: 12px; }
.ns-chk label, .ns-chk1, .ns-evs label { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; }
.ns-evs { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 12px; border-bottom: 0.5px solid var(--border); }
.ns-evs input, .ns-chk input, .ns-chk1 input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--primary); }
.ns-q { padding-top: 10px; }
.ns-chk1 { margin-top: 4px; }
.cl-set .btn-group { flex-wrap: wrap; }
.cl-set .btn-group .btn { flex: 1 1 200px; }
.cl-set .status-bar { margin: 0 0 4px; }