/* theme.css — zdieľaný štýl pre všetky taby status dashboardu (index/robert/claude). Jedna sada komponentov (karty/panely/tabuľky/nav/footer/banner), dve témy prepínané cez [data-theme] na (nastavuje inline script v + theme.js na klik footer tlačidla). Farby idú cez CSS custom properties — komponentová vrstva je theme-agnostická, len token bloky nižšie (CYBER / CLASSIC) menia hodnoty + pár štrukturálnych detailov (neon glow, clip-path rohy, animovné pozadie vs. plochý GitHub-dark vzhľad). Pridané 2026-07-19 (zjednotenie classic ⇄ cyber view). */ *{box-sizing:border-box;} html,body{margin:0;height:100%;} body{ background:var(--bg); color:var(--txt); font-family:var(--font-body); overflow-x:hidden; position:relative; min-height:100vh; } /* ── layout ── */ .wrap{position:relative; z-index:10; max-width:1180px; margin:0 auto; padding:26px 22px 50px;} header{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:26px;} h1{font-family:var(--font-head); font-weight:900; font-size:30px; margin:0; letter-spacing:2px; color:var(--txt);} h1 .host{color:var(--accent);} .sub{color:var(--muted); font-size:13px; letter-spacing:1px;} #updated{color:var(--accent);} .blink{animation:blink 1.4s step-start infinite;} @keyframes blink{50%{opacity:.25;}} /* ── nav ── */ nav.tabs{display:flex; gap:8px; margin:0 0 24px; flex-wrap:wrap;} nav.tabs a{color:var(--muted); text-decoration:none; border:1px solid var(--line); padding:7px 16px; border-radius:3px; font-size:13px; letter-spacing:1.5px; background:var(--panel);} nav.tabs a.active{color:var(--accent); border-color:var(--accent);} nav.tabs a:hover{color:var(--txt);} /* robert tab/page dostáva vlastný akcent (amber), aby sa vizuálne odlíšil od hab5 (cyan) */ body.page-robert h1 .host{color:var(--amber);} body.page-robert nav.tabs a.active{color:var(--amber); border-color:var(--amber);} /* ── karty ── */ .cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:26px;} .card{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px;} .card .label{color:var(--muted); font-size:11px; letter-spacing:2px; text-transform:uppercase;} .card .value{font-family:var(--font-head); font-size:34px; font-weight:700; margin-top:8px; font-variant-numeric:tabular-nums; line-height:1;} .card .value .unit{font-size:14px; opacity:.7; margin-left:3px; font-family:var(--font-body);} .card .meta{color:var(--muted); font-size:12px; margin-top:7px; letter-spacing:.5px;} .bar{height:7px; background:rgba(127,127,127,.12); border:1px solid var(--line); border-radius:2px; margin-top:11px; overflow:hidden;} .bar>span{display:block; height:100%; transition:width .5s;} /* ── panely ── */ .panel{position:relative; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin-bottom:26px;} .panel h2{font-family:var(--font-head); font-size:14px; margin:0 0 16px; font-weight:700; letter-spacing:3px; color:var(--accent); text-transform:uppercase;} .panel h2 .tick{color:var(--mag);} .chart-wrap{position:relative; height:290px;} /* ── tabuľky ── */ table{width:100%; border-collapse:collapse;} th,td{text-align:left; padding:10px 10px; border-bottom:1px solid var(--line); font-size:14px;} th{color:var(--muted); font-size:11px; letter-spacing:2px; text-transform:uppercase;} td.num{text-align:right; font-variant-numeric:tabular-nums;} th.num{text-align:right;} td .nm{font-family:var(--font-head); font-weight:500; letter-spacing:.5px;} .tbl-scroll{overflow-x:auto;} .agent-dir{color:var(--muted); font-size:12px;} .note{color:var(--muted); font-size:12px; margin-top:10px; line-height:1.5;} /* ── stavové indikátory (spoločné pre agentov aj CLAUDE MAX ledger) ── */ .led{display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:8px; vertical-align:middle;} .led.alive{background:var(--grn);} .led.down{background:var(--red);} .st-alive,.ok{color:var(--grn);} .st-down,.bad{color:var(--red);} .warn{color:var(--amber);} .host-badge{font-family:var(--font-head); font-size:10px; font-weight:700; letter-spacing:1.5px; padding:2px 7px; border-radius:2px; text-transform:uppercase; border:1px solid;} .host-hab5{color:var(--cyan); border-color:var(--cyan);} .host-hab3{color:var(--mag); border-color:var(--mag);} .host-robert{color:var(--amber); border-color:var(--amber);} /* transport badge pri diskoch (nvme/usb/sata) — rovnaký vzhľad ako host-badge */ .tran-badge{font-family:var(--font-head); font-size:10px; font-weight:700; letter-spacing:1.5px; padding:2px 7px; border-radius:2px; text-transform:uppercase; border:1px solid;} .tran-nvme{color:var(--cyan); border-color:var(--cyan);} .tran-usb{color:var(--amber); border-color:var(--amber);} .tran-sata{color:var(--grn); border-color:var(--grn);} .tran-disk{color:var(--muted); border-color:var(--muted);} :root[data-theme="cyber"] .tran-badge{text-shadow:0 0 6px currentColor;} :root[data-theme="classic"] .tran-badge{text-transform:none; font-weight:600; letter-spacing:0;} /* fill bar vnútri tabuľkovej bunky (disky) — min šírka aby bol čitateľný aj na mobile */ td .bar{min-width:110px; margin-top:0;} /* ── alert banner ── */ #banner{display:none; border:1px solid var(--red); background:rgba(248,81,73,.12); color:var(--txt); padding:14px 18px; border-radius:4px; margin-bottom:22px; letter-spacing:.5px;} #banner b{font-family:var(--font-head); font-weight:700; color:var(--red);} #banner .sub2{display:block; font-weight:400; font-size:13px; opacity:.85; margin-top:5px;} /* ── footer + téma toggle ── */ footer{text-align:center; color:var(--muted); font-size:12px; letter-spacing:1px; margin-top:14px; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;} footer a{color:var(--accent); text-decoration:none;} #themeToggle{cursor:pointer; background:var(--panel); color:var(--accent); border:1px solid var(--line); border-radius:3px; padding:5px 14px; font-size:12px; letter-spacing:1px; font-family:var(--font-body);} #themeToggle:hover{color:var(--txt); border-color:var(--accent);} /* decoratívne pozadie (mriežka/hviezdy/partikle/scanline) — v prítomné vždy, viditeľné len v cyber téme; v classic sú display:none (nastavené v CYBER bloku nižšie) */ #grid,#stars,#fx,#scan,#sweep{display:none; pointer-events:none;} #grid{position:fixed; inset:0; z-index:0; overflow:hidden; perspective:340px;} #grid::before{ content:""; position:absolute; left:-50%; right:-50%; top:48%; height:160%; background-image: linear-gradient(rgba(0,240,255,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(255,43,214,.28) 1px, transparent 1px); background-size:46px 46px; transform:rotateX(74deg); transform-origin:top center; animation:grid-move 5.5s linear infinite; mask-image:linear-gradient(to bottom, transparent, #000 40%, #000); } @keyframes grid-move{from{background-position:0 0;}to{background-position:0 46px;}} #stars{position:fixed; inset:0; z-index:0; background:radial-gradient(circle at 50% -10%, rgba(255,43,214,.16), transparent 55%), radial-gradient(circle at 80% 0%, rgba(0,240,255,.12), transparent 45%);} #fx{position:fixed; inset:0; z-index:1;} #scan{position:fixed; inset:0; z-index:50; background:repeating-linear-gradient(transparent 0 2px, rgba(0,0,0,.18) 2px 4px); mix-blend-mode:multiply; animation:flick 6s infinite;} #sweep{position:fixed; left:0; right:0; height:140px; z-index:51; background:linear-gradient(transparent, rgba(0,240,255,.07), transparent); animation:sweep 7s linear infinite;} @keyframes sweep{from{top:-140px;}to{top:100%;}} @keyframes flick{0%,97%,100%{opacity:1;}98%{opacity:.82;}99%{opacity:.93;}} /* ========================================================================= CYBER — synthwave neon (pôvodná téma) ========================================================================= */ :root[data-theme="cyber"]{ --bg:#05060d; --cyan:#00f0ff; --mag:#ff2bd6; --grn:#39ff14; --amber:#ffb000; --red:#ff2a3a; --txt:#cfeffd; --muted:#5c7a92; --panel:rgba(10,16,30,.62); --line:rgba(0,240,255,.22); --accent:var(--cyan); --radius:4px; --font-body:"Share Tech Mono",ui-monospace,monospace; --font-head:"Orbitron",sans-serif; } :root[data-theme="cyber"] body{ background-image:radial-gradient(circle at 50% -10%, rgba(255,43,214,.14), transparent 55%), radial-gradient(circle at 80% 0%, rgba(0,240,255,.10), transparent 45%); } :root[data-theme="cyber"] #grid, :root[data-theme="cyber"] #stars, :root[data-theme="cyber"] #fx, :root[data-theme="cyber"] #scan, :root[data-theme="cyber"] #sweep{display:block;} :root[data-theme="cyber"] h1{color:#eafcff; text-shadow:0 0 8px var(--cyan), 0 0 22px rgba(0,240,255,.55);} :root[data-theme="cyber"] h1 .host{text-shadow:0 0 8px currentColor, 0 0 24px rgba(0,240,255,.6);} :root[data-theme="cyber"] body.page-robert h1 .host{text-shadow:0 0 8px var(--amber), 0 0 24px rgba(255,176,0,.6);} :root[data-theme="cyber"] #updated{text-shadow:0 0 6px rgba(0,240,255,.5);} :root[data-theme="cyber"] .glitch{position:relative; animation:glitch 4.2s infinite;} @keyframes glitch{0%,92%,100%{transform:none; opacity:1;} 93%{transform:translate(-2px,1px); text-shadow:2px 0 var(--mag), -2px 0 var(--cyan);} 95%{transform:translate(2px,-1px); text-shadow:-2px 0 var(--mag), 2px 0 var(--cyan);} 97%{transform:translate(-1px,0);}} :root[data-theme="cyber"] nav.tabs a.active{box-shadow:0 0 12px rgba(0,240,255,.35), inset 0 0 12px rgba(0,240,255,.08);} :root[data-theme="cyber"] body.page-robert nav.tabs a.active{box-shadow:0 0 12px rgba(255,176,0,.35), inset 0 0 12px rgba(255,176,0,.08);} :root[data-theme="cyber"] .card{backdrop-filter:blur(4px); box-shadow:inset 0 0 22px rgba(0,240,255,.05), 0 0 14px rgba(0,0,0,.5); clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));} :root[data-theme="cyber"] .card::after{content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--cyan), transparent); opacity:.7; animation:edge 3.5s linear infinite;} @keyframes edge{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}} :root[data-theme="cyber"] .card .value{text-shadow:0 0 12px currentColor;} :root[data-theme="cyber"] .bar>span{background:repeating-linear-gradient(90deg, currentColor 0 7px, rgba(0,0,0,.25) 7px 10px); box-shadow:0 0 10px currentColor;} :root[data-theme="cyber"] .panel{backdrop-filter:blur(4px); box-shadow:inset 0 0 30px rgba(0,240,255,.04);} :root[data-theme="cyber"] .panel h2{text-shadow:0 0 8px rgba(0,240,255,.5);} :root[data-theme="cyber"] .led.alive{box-shadow:0 0 8px var(--grn), 0 0 14px var(--grn); animation:blink 1.6s step-start infinite;} :root[data-theme="cyber"] .led.down{box-shadow:0 0 8px var(--red);} :root[data-theme="cyber"] .st-alive{text-shadow:0 0 6px rgba(57,255,20,.5);} :root[data-theme="cyber"] .st-down{text-shadow:0 0 6px rgba(255,42,58,.5);} :root[data-theme="cyber"] .host-badge{text-shadow:0 0 6px currentColor;} :root[data-theme="cyber"] #banner{color:#ffd7db; box-shadow:0 0 18px rgba(255,42,58,.5), inset 0 0 22px rgba(255,42,58,.12); animation:alertpulse 1.1s ease-in-out infinite;} :root[data-theme="cyber"] #banner b{text-shadow:0 0 10px var(--red);} @keyframes alertpulse{0%,100%{box-shadow:0 0 14px rgba(255,42,58,.4), inset 0 0 18px rgba(255,42,58,.1);} 50%{box-shadow:0 0 30px rgba(255,42,58,.85), inset 0 0 26px rgba(255,42,58,.2);}} :root[data-theme="cyber"] ::selection{background:var(--mag); color:#000;} /* ========================================================================= CLASSIC — plochý GitHub-dark vzhľad (bez neónu/animácií, čitateľnejší) ========================================================================= */ :root[data-theme="classic"]{ --bg:#0d1117; --cyan:#58a6ff; --mag:#58a6ff; --grn:#3fb950; --amber:#d29922; --red:#f85149; --txt:#e6edf3; --muted:#8b949e; --panel:#161b22; --line:#283041; --accent:var(--cyan); --radius:12px; --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-head:var(--font-body); } :root[data-theme="classic"] h1{font-weight:600; font-size:22px; letter-spacing:0;} :root[data-theme="classic"] .card .value{font-size:30px;} :root[data-theme="classic"] .card .label{letter-spacing:.04em;} :root[data-theme="classic"] .panel h2{letter-spacing:.04em; text-transform:none; font-size:15px;} :root[data-theme="classic"] .bar>span{background:currentColor;} :root[data-theme="classic"] .host-badge{text-transform:none; font-weight:600; letter-spacing:0;} :root[data-theme="classic"] #banner{background:var(--red); color:#fff; border-color:var(--red);} :root[data-theme="classic"] #banner b{color:#fff;}