/* style.css - všetky vzhľadové pravidlá panelu. Farby vždy cez var(--...) z colors.css. */

/* WeatherIconsEmbed - rovnaky font ako v eink.html (SIL OFL 1.1 licencia,
   Erik Flowers / Lukas Bischoff), teraz ako samostatny .ttf subor namiesto
   base64 embed - kratsi/citatelnejsi style.css, font sa navyse cachuje
   nezavisle od CSS. */
@font-face {
    font-family: "WeatherIconsEmbed";
    src: url("weathericons.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}


* { box-sizing: border-box; }
body { margin:0; background:var(--bg-body); color:var(--text-primary); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
a { color:var(--color-link); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ---------- prihlasovacia stránka ---------- */
.login-body { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:16px; gap:18px; }
.login-box { background:var(--bg-panel); padding:36px; border-radius:10px; width:280px; max-width:100%; box-shadow:0 8px 30px rgba(0,0,0,.4); }

/* Zamykacia dlaždica (vzhľad ako .public-dom-item, cez šírku celého 4-stĺpcového
   gridu) - kliknutím sa plynulo "roztiahne" a odkryje prihlasovací formulár
   vo vnútri (crossfade + výška cez max-height trik, keďže presnú výšku
   formulára vopred nepoznáme). */
.lock-box {
    width:320px; max-width:100%; margin:0 auto;
    background:var(--bg-panel); border:1px solid var(--border-default); border-radius:8px;
    cursor:pointer; overflow:hidden;
    transition: border-radius .35s ease, box-shadow .35s ease;
}
.lock-box.open { cursor:default; border-radius:10px; box-shadow:0 8px 30px rgba(0,0,0,.4); }

.lock-face {
    height:42px; display:flex; align-items:center; justify-content:center;
    font-size:28px; color:var(--text-primary);
    transition: opacity .25s ease, height .35s ease, transform .35s ease;
}
.lock-box.open .lock-face { opacity:0; height:0; transform:scale(.7); pointer-events:none; }

.login-box-inner {
    max-height:0; opacity:0; overflow:hidden; padding:0 36px;
    transition: max-height .4s ease, opacity .3s ease .1s, padding .4s ease;
}
.lock-box.open .login-box-inner { max-height:600px; opacity:1; padding:30px 36px 36px; }
.field-group { margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.captcha-img { border-radius:6px; display:block; }

/* Captcha priamo ako pozadie input poľa namiesto samostatného obrázku vedľa
   neho - rozmery 200x50 zodpovedajú captcha_render_image() v includes.php.
   text-shadow drží zadávaný text čitateľný aj nad zašumeným pozadím. */
.captcha-input-bg {
    width:200px; height:50px; max-width:100%;
    background-color:#181a20; background-size:cover; background-position:center; background-repeat:no-repeat;
    border:1px solid var(--border-default); border-radius:6px;
    color:var(--color-error); font-weight:700; font-size:22px; text-align:center;
    text-shadow:0 0 4px #000, 0 0 4px #000, 0 0 2px #000;
}
.captcha-input-bg::placeholder { color:rgba(255,255,255,.55); text-shadow:none; }
.hp-field { position:absolute; left:-9999px; }

/* statický verejný súhrn DOM modulu nad prihlasovacím formulárom - iba
   ikony + čísla, žiadne popisky/jednotky (viď dom_public_snapshot()) */
/* auto-fit + minmax namiesto pevného repeat(4,1fr) - na úzkom displeji (napr.
   4" mobil) sa "1fr" stĺpce nezmenšia pod prirodzenú min. šírku obsahu (SVG
   gauge má pevných 30px) a grid pretečie mimo obrazovku. minmax(0, 1fr) v
   kombinácii s auto-fit necháva prehliadač sám zvoliť 1-4 stĺpce podľa
   dostupnej šírky, min. 68px na stĺpec. */
.public-dom-strip { display:grid; grid-template-columns:repeat(auto-fit, minmax(68px, 1fr)); gap:8px; width:100%; max-width:320px; }
.public-dom-strip .public-dom-item { justify-content:center; min-width:0; }
.public-dom-item {
    display:flex; align-items:center; gap:6px; background:var(--bg-panel);
    border:1px solid var(--border-default); border-radius:8px; padding:6px 10px;
    font-size:14px; color:var(--text-primary);
}
.public-dom-icon { font-size:16px; line-height:1; }
.public-dom-value { font-variant-numeric:tabular-nums; }
.public-dom-item.pv-color { color:var(--chart-pv); }
.public-dom-item.boiler-on-color { color:var(--boiler-on); }
.public-dom-item.well-on-color { color:var(--well-on); }
.public-dom-item.climate-color { color:var(--chart-climate); }
.public-dom-item.is-off { opacity:var(--opacity-badge-off); }
/* Dáta staršie než 60s (viď dom_live_compute() statusState) - stlmené/sivé,
   shine animácia sa vôbec negeneruje (viď dom_render_tile_items_html() a JS
   render funkcie), gauge prstenec zostáva viditeľný ale bez pohybu. */
.public-dom-item.is-stale { opacity:.4; filter:grayscale(1); }

/* Gauge (spotreba/slnko/batéria) ako SVG prstenec namiesto vertikálnej lišty -
   spoľahlivejšie a presnejšie než CSS conic-gradient/mask trik (ten sa
   správal ako obyčajný kruh naprieč prehliadačmi a nedal sa obmedziť len na
   vyplnený úsek). pathLength="100" na oboch kruhoch nech vieme
   stroke-dasharray/dashoffset počítať priamo v percentách bez ohľadu na
   skutočný polomer. */
.public-dom-item.has-gauge { border-color:transparent; padding-left:4px; }
.dom-gauge-ring-wrap { position:relative; width:30px; height:30px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.dom-gauge-ring { position:absolute; inset:0; transform:rotate(-90deg); overflow:visible; }
.dom-gauge-ring .ring-track { fill:none; stroke:var(--border-default); stroke-width:3.5; }
.dom-gauge-ring .ring-fill {
    fill:none; stroke:currentColor; stroke-width:3.5; stroke-linecap:round;
    stroke-dasharray: var(--gauge-pct, 0) 999;
}
/* Shine - krátky jasný úsek pohybujúci sa v rozsahu [0, gaugePct]. Animácia
   je zámerne natívna SVG SMIL (<animate> priamo v markupe, viď index.php),
   NIE CSS @keyframes/@property - to sa vo Firefoxe správalo nespoľahlivo
   (stroke-dashoffset sa neinterpoloval plynule, len "blikalo"), zatiaľ čo
   SMIL funguje rovnako naprieč Firefoxom, Chrome/Operou aj Safari. from/to
   hodnoty aj dĺžku úseku (stroke-dasharray) preto počíta priamo PHP/JS a
   vkladá ako hotové čísla do <animate>/dasharray atribútov. */
.dom-gauge-ring .ring-shine { fill:none; stroke:#fff; stroke-opacity:.9; stroke-width:3.5; stroke-linecap:round; }

/* ---------- predpoveď počasia (rovnaká štruktúra ako eink.html, tmavá téma) ---------- */
.dom-weather-row { display:flex; flex-wrap:wrap; justify-content:center; gap:0; margin-top:4px; }
.dom-weather-group { display:inline-flex; flex-direction:column; align-items:center; padding:0 10px; }
.dom-weather-group-border { border-right:1px solid var(--border-default); }
.dom-weather-day-header {
    font-size:10px; font-weight:700; color:var(--text-primary);
    border-bottom:1px solid var(--border-default); margin-bottom:4px; padding-bottom:3px;
    white-space:nowrap; text-align:center;
}
.dom-weather-slots { display:flex; white-space:nowrap; }
.dom-weather-slot { display:inline-flex; flex-direction:column; align-items:center; width:44px; margin:0 2px; }
.dom-weather-slot-label { font-size:11px; color:var(--text-secondary); margin-bottom:2px; }
.dom-weather-slot-temp { font-size:13px; font-weight:700; color:var(--text-primary); margin-bottom:2px; }
.dom-weather-scenario { display:flex; flex-direction:column; align-items:center; line-height:1.1; }
.dom-weather-hours { font-size:11px; font-weight:700; color:var(--text-primary); }
.dom-weather-icon { font-family:"WeatherIconsEmbed"; font-size:22px; line-height:1; color:var(--text-primary); }
.dom-weather-icon-sm { font-size:12px; }
.dom-weather-alert-slot { width:auto; min-width:44px; max-width:52px; }
.dom-weather-alert-icon { font-size:18px; line-height:1; }
.dom-weather-alert-event { font-size:10px; font-weight:700; line-height:1.15; text-align:center; white-space:normal; word-break:break-word; }
.dom-weather-alert-time { font-size:11px; }
.meteoalarm-yellow { color:var(--color-warn); }
.meteoalarm-orange { color:#ff9800; }
.meteoalarm-red { color:var(--color-error); }

/* ---------- formulárové prvky ---------- */
input[type=text],input[type=password],input[type=number],input[type=date],textarea,select {
    background:var(--bg-input); border:1px solid var(--border-default); color:var(--text-primary);
    padding:8px 10px; border-radius:6px; font-size:14px; width:100%;
}
button { background:var(--color-primary); color:#fff; border:none; padding:8px 14px; border-radius:6px; cursor:pointer; font-size:14px; }
button:hover { background:var(--color-primary-hover); }
.error { color:var(--color-error); }
.ok { color:var(--color-ok); }

/* ---------- topbar + navigácia ---------- */
.topbar { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; background:var(--bg-panel); border-bottom:1px solid var(--border-default); gap:12px; }
.topbar-left { display:flex; align-items:center; gap:18px; min-width:0; }
.topbar-right { display:flex; align-items:center; gap:16px; flex-shrink:0; }
.topbar-tiles { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.topbar-tiles .public-dom-item { padding:3px 7px; font-size:12px; }
.topbar-tiles .public-dom-icon { font-size:13px; }
.topbar-tiles .dom-gauge-ring-wrap { width:22px; height:22px; }
.topbar-tiles .dom-gauge-ring { width:22px; height:22px; }
.topbar a { color:var(--text-primary); text-decoration:none; }
.topbar .logout { color:var(--color-error); }
.main-nav { display:flex; gap:4px; }
.main-nav a { padding:6px 12px; border-radius:6px; font-size:14px; white-space:nowrap; }
.main-nav a:hover { background:var(--bg-panel-hover); }
.main-nav a.active { background:var(--color-primary); color:#fff; }

.hamburger-btn { display:none; background:none; border:1px solid var(--border-default); color:var(--text-primary); padding:6px 10px; border-radius:6px; font-size:18px; line-height:1; cursor:pointer; }
.hamburger-btn:hover { background:var(--bg-panel-hover); }

/* mobil / úzke okno: menu sa schová do hamburgeru */
@media (max-width: 780px) {
    .main-nav { display:none; position:absolute; top:56px; left:0; right:0; flex-direction:column; background:var(--bg-panel); border-bottom:1px solid var(--border-default); padding:8px; gap:2px; z-index:50; }
    .main-nav.open { display:flex; }
    .main-nav a { padding:10px 12px; }
    .hamburger-btn { display:inline-block; }
    .topbar { position:relative; padding:12px 14px; }
    .topbar-tiles { display:none; }
}

/* ---------- dashboard (hlavná stránka) ---------- */
.dashboard-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; gap:12px; }
.dashboard-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:18px; }
.dashboard-widget { background:var(--bg-panel); border-radius:12px; padding:18px 20px; min-width:0; }
.dashboard-widget-wide { grid-column:1 / -1; }
.dashboard-widget h3 { margin:0 0 12px 0; font-size:15px; }
.dashboard-widget-empty { color:var(--text-muted); font-size:13px; }
.gear-btn { background:none; border:1px solid var(--border-default); color:var(--text-primary); font-size:18px; padding:6px 10px; border-radius:6px; cursor:pointer; }
.gear-btn:hover { background:var(--bg-panel-hover); }
.settings-panel { background:var(--bg-panel); border:1px solid var(--border-default); border-radius:10px; padding:16px 20px; margin-bottom:18px; }
.settings-panel h3 { margin-top:0; }
.settings-panel-options { display:flex; flex-wrap:wrap; gap:14px; margin:10px 0 16px; }
.settings-panel-options label { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-primary); }
.settings-panel-options input { width:auto; }
.settings-block { border-top:1px solid var(--border-default); padding:12px 0; }
.settings-block:first-of-type { border-top:none; padding-top:4px; }
.settings-subrow { margin:8px 0 4px 24px; font-size:13px; color:var(--text-secondary); display:flex; align-items:center; gap:8px; }
.settings-subrow select { width:auto; }
.settings-item-list { flex-wrap:wrap; gap:4px 16px; }
.settings-item-list .checkbox-row { color:var(--text-secondary); }

.shortcut-list { display:flex; flex-direction:column; gap:6px; }
.shortcut-list a { color:var(--text-primary); text-decoration:none; padding:8px 10px; border-radius:6px; background:var(--bg-panel-hover); font-size:13px; }
.shortcut-list a:hover { opacity:var(--opacity-dim); }

.dashboard-tiles { display:flex; gap:20px; padding:6px 0; flex-wrap:wrap; }
.tile { background:var(--bg-panel); padding:40px 60px; border-radius:10px; text-decoration:none; color:var(--text-primary); font-size:18px; }
.tile:hover { background:var(--bg-panel-hover); }

.cam-mini-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:8px; }
.cam-mini { display:block; border-radius:8px; overflow:hidden; background:var(--bg-chart); aspect-ratio:16/9; }
.cam-mini img { width:100%; height:100%; object-fit:cover; display:block; }

.logs-mini-table { display:block; width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-collapse:collapse; font-size:12px; }
.logs-mini-table th { position:sticky; top:0; background:var(--bg-panel); z-index:2; box-shadow:0 1px 0 var(--border-default); }
.logs-mini-table td { padding:4px 6px; border-bottom:1px solid var(--border-default); color:var(--text-secondary); }

/* ---------- všeobecný layout ---------- */
main { padding:24px; }
@media (max-width: 780px) { main { padding:14px; } }

.toolbar { display:flex; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.toolbar a.active { color:var(--color-primary); font-weight:600; }
.toolbar-center { align-items:center; }
.toolbar-tight { margin-bottom:20px; }
.toolbar-gap-sm { margin-bottom:12px; }
.toolbar-gap-top { margin-top:12px; align-items:center; }

.kv { background:var(--bg-panel); padding:8px 14px; border-radius:6px; }
.kv-primary { padding:14px 22px; }
.kv-primary code { font-size:28px; font-weight:600; }
.kv label { display:block; font-size:11px; color:var(--text-secondary); margin-bottom:2px; }
.kv code { background:none; padding:0; font-size:15px; }
.kv-boiler { border-left:3px solid var(--chart-boiler); }
.kv-phone { border-left:3px solid var(--chart-soc); }
.kv-phone .phone-line1 { font-size:15px; }
.kv-phone .phone-line2 { margin-top:2px; letter-spacing:2px; }
.kv-dim { opacity:var(--opacity-dim); }

.inline-form { display:inline-flex; gap:6px; align-items:center; }
.file-table { display:block; width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-collapse:collapse; }
.file-table th,.file-table td { padding:6px 10px; border-bottom:1px solid var(--border-default); text-align:left; font-size:14px; }
.file-table th { position:sticky; top:0; background:var(--bg-panel); z-index:2; box-shadow:0 1px 0 var(--border-default); }
.file-table a { color:var(--color-link); text-decoration:none; }
/* Keď je tabuľka vnorená v .table-scroll, ten už sám rieši scroll (oba smery) -
   vlastné overflow-x na .file-table by vytvorilo druhý, bližší scroll kontext
   a position:sticky na th by sa vzťahovalo naň namiesto na .table-scroll
   (hlavička by prestala byť fixná pri zvislom rolovaní). */
.table-scroll .file-table, .table-scroll .logs-mini-table {
    display:table; overflow-x:visible; width:max-content; min-width:100%;
}
.actions form { margin-right:4px; }

/* Databázový modul - výber stĺpcov pre vyhľadávanie (details/summary dropdown) */
.db-search-cols { position:relative; display:inline-block; }
.db-search-cols summary {
    cursor:pointer; padding:6px 10px; border:1px solid var(--border-default);
    border-radius:6px; background:var(--bg-input); font-size:14px; list-style:none;
    color:var(--text-primary); user-select:none;
}
.db-search-cols summary::-webkit-details-marker { display:none; }
.db-search-cols-menu {
    position:absolute; top:calc(100% + 4px); left:0; z-index:10; min-width:180px; max-height:260px;
    overflow-y:auto; background:var(--bg-panel); border:1px solid var(--border-default);
    border-radius:6px; padding:8px; box-shadow:0 8px 30px rgba(0,0,0,.4);
}
.db-search-cols-menu label { display:block; padding:3px 4px; font-size:13px; white-space:nowrap; cursor:pointer; }
.db-search-cols-menu label:hover { background:var(--bg-panel-hover); border-radius:4px; }
.db-search-cols-menu label:first-child { border-bottom:1px solid var(--border-default); margin-bottom:4px; padding-bottom:6px; font-weight:700; }

/* Reťazenie vyhľadávania v databázovom module - 🔗 (definovaný vzťah, priamy
   skok) / 🔎 (voľné reťazenie cez carry) pri hodnotách vo výsledkoch. Jemné
   defaultne, výraznejšie pri hoveri, nech nepôsobia rušivo v hustej tabuľke. */
.db-chain-link { margin-left:4px; text-decoration:none; opacity:.45; font-size:12px; }
.db-chain-link:hover { opacity:1; }
.db-chain-link-generic { opacity:.3; }
.db-chain-link-generic:hover { opacity:1; }
.db-chain-expand td { background:var(--bg-input); padding:12px; }
.db-chain-result .table-scroll { max-height:260px; margin-bottom:8px; }

.editor textarea { width:100%; font-family:monospace; }
.diag-textarea { width:100%; min-height:420px; font-family:monospace; font-size:12px; background:var(--bg-input); color:var(--text-primary); border:1px solid var(--border-default); border-radius:6px; padding:10px; white-space:pre; }

.db-layout { display:flex; gap:20px; }
.table-list { min-width:180px; display:flex; flex-direction:column; gap:4px; }
.table-list a { color:var(--text-primary); text-decoration:none; padding:6px 10px; border-radius:6px; }
.table-list a.active,.table-list a:hover { background:var(--bg-panel-hover); }
.table-list hr { border-color:var(--border-default); width:100%; }
.db-content { flex:1; min-width:0; }
@media (max-width: 780px) {
    .db-layout { flex-direction:column; }
    .table-list { flex-direction:row; flex-wrap:wrap; min-width:0; }
}

.db-picker-grid { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.db-picker-btn { background:var(--bg-panel); border:1px solid var(--border-default); color:var(--text-primary); padding:14px 20px; border-radius:10px; font-size:15px; text-decoration:none; cursor:pointer; }
.db-picker-btn:hover { background:var(--bg-panel-hover); }
.db-picker-btn.active { border-color:var(--color-primary); color:var(--color-primary); }

.table-scroll { overflow-x:auto; max-height:400px; overflow-y:auto; margin-bottom:20px; -webkit-overflow-scrolling:touch; }
.text-muted { color:var(--text-muted); }
.text-muted-13 { color:var(--text-muted); font-size:13px; }
.text-muted-12 { color:var(--text-muted); font-size:12px; }
.text-muted-11 { color:var(--text-muted); font-size:11px; }
.text-secondary-13 { color:var(--text-secondary); font-size:13px; }
.truncate-cell { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.truncate-cell-sm { max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:var(--text-muted); }
.no-margin { margin:0; }
.mt-28 { margin-top:28px; }
.mb-14 { margin-bottom:14px; }
.mt-24 { margin-top:24px; }
.hidden { display:none; }
.w-auto { width:auto; }
.checkbox-row { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-primary); }
.form-checkbox-group { margin:6px 0 12px; }
.divider-full { border-color:var(--border-default); width:100%; }
.text-secondary { color:var(--text-secondary); }
.text-secondary-12 { color:var(--text-secondary); font-size:12px; }
.text-green { color:var(--color-green); }

/* ---------- kamery ---------- */
.cam-card { background:var(--bg-cam-card); border:1px solid var(--border-cam); border-radius:10px; overflow:hidden; width:var(--cam-w, 320px); }
.cam-size-toggle { display:inline-flex; gap:4px; margin-bottom:10px; }
.cam-size-toggle button { background:var(--bg-panel); border:1px solid var(--border-default); color:var(--text-secondary); padding:5px 12px; border-radius:6px; font-size:12px; cursor:pointer; }
.cam-size-toggle button.active { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.cam-thumb { width:100%; aspect-ratio:16/9; background:var(--bg-chart); overflow:hidden; position:relative; cursor:pointer; }
.cam-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.cam-thumb-empty { display:flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:12px; text-align:center; padding:8px; }
.cam-label { padding:6px 10px; font-size:12px; color:#ccc; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.cam-age { font-size:10px; color:var(--text-muted); white-space:nowrap; }
.cam-age.stale { color:var(--color-error); }
.cam-err-badge { position:absolute; top:6px; right:6px; background:#c0392b; color:#fff; font-size:10px; padding:2px 6px; border-radius:6px; display:none; }
.cam-card.error .cam-err-badge { display:block; }
.cam-timeline { display:none; background:var(--bg-cam-timeline); border:1px solid var(--border-cam); border-radius:10px; padding:10px 14px; margin-bottom:12px; }
.cam-toolbar { flex-wrap:wrap; align-items:flex-start; }

/* ---------- stavové bodky ---------- */
.status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex-shrink:0; }
.status-dot.ok { background:var(--color-green); animation: blink-dot 2s ease-in-out infinite; }
.status-dot.warn { background:var(--color-warn); animation: blink-dot 2s ease-in-out infinite; }
.status-dot.err { background:var(--color-error); }
@keyframes blink-dot { 0%,100% { opacity:1; } 50% { opacity:var(--opacity-blink); } }

/* ---------- zariadenia (bojler/studňa) ---------- */
.device-badge { display:inline-flex; align-items:center; gap:10px; padding:8px 16px; border-radius:10px; background:var(--bg-device-badge); border:1px solid var(--device-off-border); transition:opacity .3s; }
.device-badge.off { opacity:var(--opacity-badge-off); }
.device-badge .device-power, .device-badge .device-energy { font-size:18px; font-weight:600; }
.device-badge-small { padding:5px 10px; gap:6px; }
.device-badge-small .device-power, .device-badge-small .device-energy { font-size:13px; }
.device-badge-icon { font-size:20px; }
.device-badge-icon-small { font-size:15px; }
.device-badge-label-small { font-size:11px; color:var(--text-secondary); }
.device-badge.on.boiler { border-color:var(--boiler-border); }
.device-badge.on.well { border-color:var(--well-border); }
.device-badge.on.climate { border-color:#4a9fe0; }
.device-badge-icon.boiler-on { color:var(--boiler-on); }
.device-badge-icon.well-on { color:var(--well-on); }
.device-badge-icon.climate-on { color:#4a9fe0; }
.device-badge-icon.off { color:var(--device-off-icon); }
.energy-hidden { display:none; }

/* ---------- DOM panely (živé hodnoty) ---------- */
.dom-panels { position:relative; display:flex; gap:14px; margin-bottom:22px; flex-wrap:wrap; }
.dom-panels-status { position:absolute; top:-6px; right:2px; }
.dom-panel { background:var(--bg-device-badge); border-radius:14px; padding:16px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex:1; min-width:180px; }
.dom-panel-center { flex:1.6; min-width:220px; }
.dom-panel-label { font-size:12px; color:var(--text-secondary); display:flex; align-items:center; gap:6px; margin-bottom:2px; }
.dom-panel-value { font-size:38px; font-weight:700; line-height:1.1; }
.dom-panel-value-huge { font-size:58px; }
.dom-panel-value.pv-color { color:var(--chart-pv); }
.dom-panel-unit { font-size:14px; color:var(--text-muted); margin-left:4px; font-weight:400; }
.dom-panel-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.dom-panel-daystats { display:flex; flex-direction:column; gap:2px; margin-top:8px; font-size:12px; color:var(--text-muted); }
.dom-panel-phone { margin-top:10px; background:var(--bg-panel); }
.dom-gauge { width:20px; height:96px; border:2px solid #fff; border-radius:11px; overflow:hidden; display:flex; align-items:flex-end; background:#000; flex-shrink:0; }
.dom-gauge-fill { width:100%; transition:height .5s ease; }
@media (max-width: 780px) {
    .dom-panels { flex-direction:column; }
    .dom-panel { min-width:0; }
}

/* farebné triedy pre hodnoty spotreby/batérie (nahrádzajú inline style farby) */
.cons-vlow { color:var(--cons-vlow); } .cons-vlow-bg { background:var(--cons-vlow); }
.cons-low { color:var(--cons-low); } .cons-low-bg { background:var(--cons-low); }
.cons-mid { color:var(--cons-mid); } .cons-mid-bg { background:var(--cons-mid); }
.cons-high { color:var(--cons-high); } .cons-high-bg { background:var(--cons-high); }
.cons-vhigh { color:var(--cons-vhigh); } .cons-vhigh-bg { background:var(--cons-vhigh); }
.soc-good { color:var(--soc-good); } .soc-good-bg { background:var(--soc-good); }
.soc-mid { color:var(--soc-mid); } .soc-mid-bg { background:var(--soc-mid); }
.soc-low { color:var(--soc-low); } .soc-low-bg { background:var(--soc-low); }

/* ---------- graf DOM (SVG) ---------- */
.dom-chart-wrap { position:relative; }
.dom-chart-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:6px; flex-wrap:wrap; }
.dom-chart-period { font-size:12px; color:var(--text-secondary); font-variant-numeric:tabular-nums; }
.dom-chart-live { background:var(--bg-panel-hover); color:var(--text-primary); border:1px solid var(--border-default); padding:4px 10px; border-radius:6px; font-size:12px; cursor:pointer; }
.dom-chart-live:hover { background:var(--border-default); }
.dom-chart-svg { width:100%; height:auto; display:block; background:var(--bg-chart); border-radius:6px; cursor:ew-resize; touch-action:none; user-select:none; }
.dom-history-banner { background:var(--bg-panel-hover); border-left:3px solid var(--color-warn); padding:8px 14px; border-radius:6px; font-size:13px; color:var(--text-secondary); margin-bottom:14px; }
.chart-grid-line { stroke:var(--border-grid); stroke-width:1; }
.chart-axis-line { stroke:var(--border-chart-axis); }
.chart-tick-line { stroke:var(--border-chart-axis); }
.chart-axis-text { fill:var(--text-axis); font-size:10px; }
.chart-axis-text-x { fill:var(--text-axis); font-size:9px; }
.chart-soc-text { fill:var(--color-green); font-size:10px; }
.chart-boiler-text { fill:var(--chart-boiler); font-size:10px; }
.chart-line-ac { fill:none; stroke:var(--chart-ac); stroke-width:2; }
.chart-line-pv { fill:none; stroke:var(--chart-pv); stroke-width:2; }
.chart-line-soc { fill:none; stroke:var(--chart-soc); stroke-width:2; }
.chart-line-boiler { fill:none; stroke:var(--chart-boiler); stroke-width:2; }
.chart-legend { display:flex; gap:18px; flex-wrap:wrap; margin-top:8px; font-size:12px; color:var(--text-secondary); }
.chart-legend-swatch { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; }
.chart-legend-swatch.ac { background:var(--chart-ac); }
.chart-legend-swatch.pv { background:var(--chart-pv); }
.chart-legend-swatch.soc { background:var(--chart-soc); }
.chart-legend-swatch.boiler { background:var(--chart-boiler); }
.chart-legend-swatch.well { background:var(--well-on); }
.chart-legend-swatch.climate { background:var(--chart-climate); }
.chart-legend-swatch.climate-cool { background:var(--chart-climate-cool); }
.chart-legend-swatch.climate-heat { background:var(--chart-climate-heat); }

.chart-daymax-pv { stroke:var(--chart-pv); stroke-width:1; stroke-dasharray:4,3; opacity:.85; }
.chart-daymax-ac { stroke:var(--chart-ac); stroke-width:1; stroke-dasharray:4,3; opacity:.85; }
.chart-daymax-pv-text { fill:var(--chart-pv); font-size:9px; }
.chart-daymax-ac-text { fill:var(--chart-ac); font-size:9px; }

.chart-kwh-text { fill:var(--text-axis); font-size:9px; opacity:.8; }
.chart-kwh-axis-line { opacity:.6; }
.chart-daykwh-pv { stroke:var(--chart-pv); stroke-width:1; stroke-dasharray:1.5,2.5; opacity:.65; }
.chart-daykwh-ac { stroke:var(--chart-ac); stroke-width:1; stroke-dasharray:1.5,2.5; opacity:.65; }
.chart-daykwh-boiler { stroke:var(--chart-boiler); stroke-width:1; stroke-dasharray:1.5,2.5; opacity:.65; }
.chart-daykwh-pv-text { fill:var(--chart-pv); font-size:9px; opacity:.85; }
.chart-daykwh-ac-text { fill:var(--chart-ac); font-size:9px; opacity:.85; }
.chart-daykwh-boiler-text { fill:var(--chart-boiler); font-size:9px; opacity:.85; }

.chart-hover-line { stroke:var(--border-chart-axis); stroke-width:1; stroke-dasharray:2,2; pointer-events:none; }
.dom-chart-tooltip { position:absolute; background:var(--bg-panel); border:1px solid var(--border-default); border-radius:6px; padding:6px 10px; font-size:12px; color:var(--text-primary); line-height:1.5; pointer-events:none; z-index:20; white-space:nowrap; box-shadow:0 2px 8px rgba(0,0,0,.4); }

.dom-chart-daytable { margin-top:14px; }

/* Ikona v strede navrchu grafu - po ťuknutí/kliknutí rozbalí dáta v tabuľkovej
   forme (hodí sa všade, nielen na mobile, kde je hover ťažkopádny). */
.dom-chart-with-table { position:relative; }
.dom-chart-table-toggle { display:block; }
.dom-chart-table-toggle summary {
    position:absolute; top:8px; left:50%; transform:translateX(-50%);
    z-index:5; list-style:none; cursor:pointer; user-select:none;
    font-size:22px; line-height:1; opacity:.5;
}
.dom-chart-table-toggle summary::-webkit-details-marker { display:none; }
.dom-chart-table-toggle summary:hover,
.dom-chart-table-toggle[open] summary { opacity:.85; }
.dom-chart-table-toggle .table-scroll { margin-top:10px; }

.dom-payback-bar {
    position:relative; height:28px; border-radius:14px; overflow:hidden;
    background:var(--bg-input); border:1px solid var(--border-default); margin-top:8px;
}
.dom-payback-bar-fill {
    height:100%; background:linear-gradient(90deg, var(--chart-pv), var(--color-green));
    transition:width .4s ease;
}
.dom-payback-bar-label {
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:600; color:var(--text-primary); text-shadow:0 1px 2px rgba(0,0,0,.6);
}

.bar-pv { fill:var(--chart-pv); }
.bar-ac { fill:var(--chart-ac); }
.bar-ac-other { fill:var(--chart-ac); }
.bar-ac-boiler { fill:var(--chart-boiler); }
.bar-ac-well { fill:var(--well-on); }
.bar-ac-climate-cool { fill:var(--chart-climate-cool); }
.bar-ac-climate-heat { fill:var(--chart-climate-heat); }
.bar-hit { fill:transparent; cursor:pointer; }
.dom-monthly-wrap { position:relative; }

/* ---------- session countdown ---------- */
#sessionCountdown.warn { color:var(--color-error); }
#sessionCountdown { color:var(--text-secondary); }

/* ---------- prechod pri miznutí hlásení ---------- */
.fade-out { transition:opacity .4s; opacity:var(--opacity-fade-out); }

/* ---------- navigačný dropdown (Moje aplikácie) ---------- */
.nav-group { position:relative; }
.nav-group-label { padding:6px 12px; border-radius:6px; font-size:14px; cursor:default; display:inline-flex; align-items:center; gap:4px; color:var(--text-primary); }
.nav-group-label.active { background:var(--color-primary); color:#fff; }
.nav-group:hover .nav-group-label:not(.active) { background:var(--bg-panel-hover); }
.nav-caret { font-size:10px; opacity:var(--opacity-dim); }
.nav-group-menu { display:none; position:absolute; top:100%; left:0; background:var(--bg-panel); border:1px solid var(--border-default); border-radius:6px; padding:6px; min-width:190px; z-index:60; flex-direction:column; gap:2px; box-shadow:0 8px 20px rgba(0,0,0,.4); }
.nav-group:hover .nav-group-menu { display:flex; }
.nav-group-menu a { padding:6px 10px; border-radius:6px; font-size:14px; white-space:nowrap; color:var(--text-primary); text-decoration:none; }
.nav-group-menu a:hover { background:var(--bg-panel-hover); }
.nav-group-menu a.active { background:var(--color-primary); color:#fff; }
.nav-error-badge { display:inline-block; background:var(--color-error); color:#fff; border-radius:10px; padding:1px 7px; font-size:10px; font-weight:bold; vertical-align:middle; }
@media (max-width: 780px) {
    .nav-group-menu { display:flex; position:static; border:none; box-shadow:none; padding:0 0 0 16px; background:none; }
}

/* ---------- RRD editor modul ---------- */
.rrd-sec { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin:22px 0 10px; display:flex; align-items:center; gap:8px; }
.rrd-sec::after { content:''; flex:1; height:1px; background:var(--border-default); }
.rrd-sec:first-of-type { margin-top:0; }

.rrd-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px; margin-bottom:6px; }
.rrd-stat { background:var(--rrd-bg3); border:1px solid var(--rrd-border); border-radius:8px; padding:14px 18px; text-align:center; }
.rrd-stat-n { font-size:28px; font-weight:bold; line-height:1; color:var(--rrd-accent); }
.rrd-stat-l { font-size:9px; color:var(--text-muted); text-transform:uppercase; margin-top:5px; letter-spacing:.05em; }

.rrd-hosts-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:8px; }
.rrd-host-card { background:var(--rrd-bg3); border:1px solid var(--rrd-border); border-radius:6px; padding:10px 14px; display:flex; align-items:center; gap:10px; text-decoration:none; }
.rrd-host-card:hover { border-color:var(--rrd-accent); }
.rrd-host-card.active { border-color:var(--rrd-accent); background:rgba(0,212,255,.06); }
.rrd-host-icon { font-size:18px; flex-shrink:0; }
.rrd-host-name { font-size:12px; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rrd-host-cnt { font-size:10px; color:var(--text-muted); margin-top:2px; }

.rrd-fbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.rrd-fbar label { font-size:10px; color:var(--text-muted); }
.rrd-fbar input { width:150px; padding:5px 10px; font-size:11px; }
.rrd-fbar-purge { display:flex; gap:6px; align-items:center; margin-left:auto; }
.rrd-btn-sm { padding:4px 12px; border-radius:4px; cursor:pointer; font-size:11px; font-weight:bold; border:1px solid var(--rrd-border); background:var(--rrd-bg3); color:var(--text-secondary); text-decoration:none; display:inline-block; }
.rrd-btn-sm:hover { border-color:var(--rrd-accent); color:var(--rrd-accent); }
.rrd-btn-sm.active { border-color:var(--rrd-accent); color:var(--rrd-accent); background:rgba(0,212,255,.07); }
.rrd-btn-red { border-color:var(--color-error); color:var(--color-error); background:rgba(255,23,68,.05); }
.rrd-btn-red:hover { background:rgba(255,23,68,.12); }

.rrd-badge { display:inline-block; padding:2px 7px; border-radius:3px; font-size:9px; font-weight:bold; text-transform:uppercase; letter-spacing:.04em; }
.rrd-badge-ok { background:rgba(0,230,118,.12); color:var(--rrd-green); }
.rrd-badge-warn { background:rgba(255,214,0,.12); color:var(--rrd-yellow); }

.rrd-pager { display:flex; gap:6px; align-items:center; justify-content:center; margin:16px 0; }
.rrd-pager a, .rrd-pager span, .rrd-pager-cur { padding:4px 10px; border-radius:4px; font-size:11px; border:1px solid var(--rrd-border); color:var(--text-muted); text-decoration:none; }
.rrd-pager a:hover { border-color:var(--rrd-accent); color:var(--rrd-accent); }
.rrd-pager-cur { background:var(--rrd-accent); color:#000; border-color:var(--rrd-accent); font-weight:bold; }

/* ---------- FiberSplice modul ---------- */
.fiber-stats { display:flex; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.fiber-stat { background:var(--rrd-bg3); border:1px solid var(--rrd-border); border-radius:8px; padding:14px 20px; text-align:center; min-width:90px; }
.fiber-stat-n { font-size:26px; font-weight:bold; color:var(--text-secondary); }
.fiber-stat-l { font-size:9px; color:var(--text-muted); text-transform:uppercase; margin-top:3px; }
.fiber-stat-active .fiber-stat-n { color:var(--color-ok); }
.fiber-stat-pending .fiber-stat-n { color:var(--rrd-yellow); }
.fiber-stat-revoked .fiber-stat-n { color:var(--fiber-orange); }
.fiber-stat-banned .fiber-stat-n { color:var(--color-error); }

.fiber-fbar { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; align-items:center; }
.fiber-btn-sm { padding:3px 10px; border-radius:4px; font-size:10px; text-decoration:none; border:1px solid var(--rrd-border); color:var(--text-muted); background:var(--rrd-bg3); cursor:pointer; font-family:inherit; }
.fiber-btn-sm:hover, .fiber-btn-sm.active { border-color:var(--rrd-accent); color:var(--rrd-accent); }
.fiber-btn-green { background:rgba(0,230,118,.12); color:var(--color-ok); border-color:var(--color-ok); }
.fiber-btn-yellow { background:rgba(255,214,0,.1); color:var(--rrd-yellow); border-color:var(--rrd-yellow); }
.fiber-btn-red { background:rgba(255,23,68,.1); color:var(--color-error); border-color:var(--color-error); }

.fiber-badge { display:inline-block; padding:2px 7px; border-radius:3px; font-size:10px; font-weight:bold; text-transform:uppercase; }
.fiber-badge-active { background:rgba(0,230,118,.15); color:var(--color-ok); }
.fiber-badge-unknown { background:rgba(120,153,192,.1); color:var(--text-secondary); }
.fiber-badge-pending { background:rgba(255,214,0,.15); color:var(--rrd-yellow); }
.fiber-badge-revoked { background:rgba(255,107,53,.15); color:var(--fiber-orange); }
.fiber-badge-banned { background:rgba(255,23,68,.15); color:var(--color-error); }

.fiber-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.7); z-index:100; align-items:center; justify-content:center; }
.fiber-modal-overlay.open { display:flex; }
.fiber-modal { background:var(--rrd-bg3); border:1px solid var(--rrd-border); border-radius:10px; padding:22px; width:460px; max-width:95vw; }
.fiber-modal h3 { color:var(--rrd-accent); font-size:14px; margin-bottom:14px; }
.fiber-modal label { display:block; font-size:10px; color:var(--text-muted); text-transform:uppercase; margin:12px 0 4px; }
.fiber-readonly { opacity:.5; font-size:11px; }
.fiber-modal-footer { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }

/* ---------- HellRide modul ---------- */
.hellride-module .page-title, .studujes-module .page-title { font-size:20px; font-weight:700; margin-bottom:18px; color:var(--hellride-accent); }
.hellride-module .stats-grid, .studujes-module .stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px,1fr)); gap:14px; margin-bottom:22px; }
.hellride-module .stats-grid-tight, .studujes-module .stats-grid-tight { margin-bottom:18px; }
.hellride-module .stat-card, .studujes-module .stat-card { background:var(--bg-panel); border:1px solid var(--border-default); border-radius:8px; padding:16px; text-align:center; }
.hellride-module .stat-card-link, .studujes-module .stat-card-link { text-decoration:none; display:block; }
.hellride-module .stat-num, .studujes-module .stat-num { font-size:30px; font-weight:800; font-family:monospace; color:var(--hellride-accent); }
.hellride-module .stat-num-sm, .studujes-module .stat-num-sm { font-size:22px; }
.hellride-module .stat-num-ok, .studujes-module .stat-num-ok { color:var(--color-ok); }
.hellride-module .stat-label, .studujes-module .stat-label { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-top:4px; }
.hellride-module .stat-card.warn .stat-num, .studujes-module .stat-card.warn .stat-num { color:var(--color-warn); }
.hellride-module .stat-card.danger .stat-num, .studujes-module .stat-card.danger .stat-num { color:var(--color-error); }
.hellride-module .section-card, .studujes-module .section-card { background:var(--bg-panel); border:1px solid var(--border-default); border-radius:8px; overflow:hidden; margin-bottom:20px; }
.hellride-module .section-card-head, .studujes-module .section-card-head { padding:10px 16px; border-bottom:1px solid var(--border-default); font-size:12px; font-weight:700; color:var(--hellride-accent); text-transform:uppercase; letter-spacing:.05em; }
.hellride-module table, .studujes-module table { display:block; width:100%; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-collapse:collapse; font-size:13px; }
.hellride-module table th, .studujes-module table th { position:sticky; top:0; background:var(--bg-panel); z-index:2; box-shadow:0 1px 0 var(--border-default); }
.hellride-module th, .studujes-module th { text-align:left; padding:8px 12px; background:var(--bg-panel); color:var(--text-muted); font-size:10px; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--border-default); }
.hellride-module td, .studujes-module td { padding:8px 12px; border-bottom:1px solid var(--border-grid); color:var(--text-secondary); vertical-align:middle; }
.hellride-module tr:hover td, .studujes-module tr:hover td { background:var(--bg-panel-hover); }
.hellride-module .text-center, .studujes-module .text-center { text-align:center; }
.hellride-module .actions, .studujes-module .actions { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.hellride-module .badge, .studujes-module .badge { display:inline-block; padding:2px 7px; border-radius:3px; font-size:10px; font-weight:700; font-family:monospace; }
.hellride-module .badge-red, .studujes-module .badge-red { background:rgba(255,23,68,.12); color:var(--color-error); }
.hellride-module .badge-green, .studujes-module .badge-green { background:rgba(0,230,118,.12); color:var(--color-ok); }
.hellride-module .badge-blue, .studujes-module .badge-blue { background:rgba(0,150,255,.12); color:var(--color-link); }
.hellride-module .badge-yellow, .studujes-module .badge-yellow { background:rgba(255,214,0,.12); color:var(--color-warn); }
.hellride-module .btn-sm { padding:4px 10px; border-radius:4px; border:none; cursor:pointer; font-size:11px; font-weight:700; font-family:inherit; }
.hellride-module .btn-danger { background:var(--hellride-brand-red); color:#fff; }
.hellride-module .btn-danger:hover { opacity:.85; }
.hellride-module .btn-warn { background:var(--color-warn); color:#1a1a2e; }
.hellride-module .btn-success { background:var(--color-ok); color:#1a1a2e; }
.hellride-module .btn-blue { background:var(--color-primary); color:#fff; text-decoration:none; display:inline-block; }
.hellride-module .msg-ok { background:rgba(0,230,118,.08); border:1px solid var(--color-ok); border-radius:4px; padding:10px 14px; font-size:13px; color:var(--color-ok); margin-bottom:16px; }
.hellride-module .hellride-fbar, .studujes-module .hellride-fbar { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.hellride-module .hellride-btn-sm, .studujes-module .hellride-btn-sm { padding:4px 12px; border-radius:4px; font-size:11px; text-decoration:none; background:var(--bg-panel); color:var(--text-secondary); font-weight:600; }
.hellride-module .hellride-btn-sm.active, .studujes-module .hellride-btn-sm.active { background:var(--hellride-accent); color:#0d0d14; }
.hellride-module .hellride-btn-green, .studujes-module .hellride-btn-green { background:rgba(0,230,118,.12); color:var(--color-ok); }
.hellride-module .hellride-btn-red, .studujes-module .hellride-btn-red { background:rgba(255,23,68,.12); color:var(--color-error); }
.hellride-module .hellride-pager, .studujes-module .hellride-pager { display:flex; gap:10px; align-items:center; font-size:13px; margin-bottom:14px; }
.hellride-module .hellride-pager a, .studujes-module .hellride-pager a { color:var(--color-link); }
.hellride-module .hellride-mail-toggle { color:var(--hellride-accent); cursor:pointer; }
.hellride-module .hellride-mail-detail-row { display:none; }
.hellride-module .hellride-mail-detail { background:var(--bg-chart); padding:16px 20px; }
.hellride-module .hellride-mail-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; font-size:12px; }
.hellride-module .hellride-mail-detail-label { color:var(--text-muted); font-size:11px; text-transform:uppercase; letter-spacing:.05em; margin-bottom:5px; }
.hellride-module .hellride-mail-detail-subject { background:#000; padding:8px 10px; border-radius:3px; font-family:monospace; color:var(--hellride-accent); margin-bottom:14px; word-break:break-word; }
.hellride-module .hellride-mail-detail-pre { background:#000; padding:10px 12px; border-radius:3px; font-family:monospace; color:#ccc; white-space:pre-wrap; word-break:break-word; font-size:11px; max-height:300px; overflow:auto; margin:0 0 14px; }
.hellride-module .hellride-mail-detail-pre-json { color:#80a0ff; max-height:140px; }
.hellride-module .hellride-mail-detail-pre-err { color:var(--color-error); max-height:140px; }
.hellride-module .hellride-mail-detail-meta { font-size:11px; color:var(--text-muted); margin-top:14px; }
.hellride-module .hellride-feedback-head { display:flex; justify-content:space-between; align-items:center; }
.hellride-module .hellride-feedback-date { color:var(--text-muted); font-weight:400; font-size:11px; }
.hellride-module .hellride-feedback-body { padding:12px 16px; display:flex; gap:12px; align-items:flex-start; }
.hellride-module .hellride-feedback-text { flex:1; min-width:0; }
.hellride-module .hellride-feedback-url { font-size:11px; color:var(--text-muted); margin-bottom:6px; word-break:break-all; }
.hellride-module .hellride-feedback-p { font-size:14px; white-space:pre-wrap; margin-bottom:8px; }
.hellride-module .hellride-feedback-ua { font-size:11px; color:var(--text-muted); }
.hellride-module .hellride-feedback-thumb { width:80px; height:80px; flex-shrink:0; border:1px solid var(--border-default); border-radius:4px; cursor:zoom-in; object-fit:cover; }
.hellride-module .hellride-feedback-noshot { font-size:11px; color:var(--text-muted); flex-shrink:0; }
.hellride-lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,.85); z-index:9999; align-items:center; justify-content:center; cursor:zoom-out; }
.hellride-lightbox img { max-width:90vw; max-height:90vh; border-radius:4px; box-shadow:0 0 40px rgba(0,0,0,.8); }

/* ---------- Studujes modul ---------- */
.studujes-module .studujes-tabs { flex-wrap:wrap; }
.studujes-module .stat-num, .studujes-module .page-title, .studujes-module .section-card-head { color:var(--studujes-accent); }
.studujes-module .hellride-btn-sm.active { background:var(--studujes-accent); color:#fff; }
.studujes-module .studujes-search input[type=text] { width:220px; }
.studujes-module .studujes-status-row { padding:5px 16px; border-bottom:1px solid var(--border-default); font-size:13px; color:var(--text-secondary); }
.studujes-module .studujes-status-row:last-child { border-bottom:none; }
.studujes-module .studujes-row-active { outline:1px solid var(--studujes-accent); }
.studujes-module .studujes-detail { padding:14px 16px; }
.studujes-module .studujes-detail-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:8px; margin-bottom:16px; font-size:13px; color:var(--text-secondary); }
.studujes-module .studujes-topic { border-top:1px solid var(--border-default); padding:10px 0; font-size:13px; }
.studujes-module .studujes-topic-preview { color:var(--text-muted); margin:4px 0; }
.studujes-module .studujes-attachment { font-size:12px; color:var(--text-secondary); margin-left:12px; }
.studujes-module .studujes-fin-form { display:flex; gap:10px; flex-wrap:wrap; align-items:end; }
.studujes-module .studujes-fin-form label { font-size:11px; color:var(--text-muted); display:flex; flex-direction:column; gap:3px; }
.studujes-module .studujes-fin-form input, .studujes-module .studujes-fin-form select { width:auto; }
.studujes-module .studujes-graph { padding:14px 16px; }
.studujes-module .studujes-editable-name { cursor:pointer; border-bottom:1px dashed var(--studujes-accent); }
.studujes-module .studujes-editable-name:hover { color:var(--studujes-accent); }
.studujes-module .studujes-vis-badge { display:inline-block; margin-right:3px; text-decoration:none; filter:grayscale(1); opacity:.35; }
.studujes-module .studujes-vis-badge:hover { opacity:.8; }
.studujes-module .studujes-vis-active { filter:none; opacity:1; }