/* Recharge Hub by CONEMA — redesign 18. 10. 2026 (Laravel + Filament). Tmavý „energetický“ vzhled, akcent elektrická zelená.
   Filament dodává rozvržení a komponenty, tady jsou vlastní prvky (živá karta, dlaždice, pruhy osob, seznamy). Všechny barvy v tokenech. */
:root {
    --rh-bg: #0E1116; --rh-card: #161B22; --rh-card-2: #1C232C; --rh-line: rgba(255, 255, 255, .08); --rh-line-2: rgba(255, 255, 255, .14);
    --rh-text: #E6EDF3; --rh-mut: #8B949E; --rh-accent: #00E676; --rh-accent-ink: #04160C; --rh-accent-soft: rgba(0, 230, 118, .14);
    --rh-amber: #FFB84D; --rh-blue: #58A6FF; --rh-red: #FF6B6B; --rh-radius: 16px;
}
html:not(.dark) {
    --rh-card: #ffffff; --rh-card-2: #f6f8fa; --rh-line: rgba(15, 23, 42, .09); --rh-line-2: rgba(15, 23, 42, .16);
    --rh-text: #0f172a; --rh-mut: #64748b; --rh-accent: #00A653; --rh-accent-soft: rgba(0, 166, 83, .10);
}
.dark body, .dark .fi-body { background: var(--rh-bg); }

/* ---------- značka ---------- */
.rh-brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.rh-logo { width: 2.2rem; height: 2.2rem; border-radius: .65rem; background: linear-gradient(135deg, #00E676, #00C853); display: grid; place-items: center;
    box-shadow: 0 0 0 1px rgba(0, 230, 118, .35), 0 6px 18px -6px rgba(0, 230, 118, .55); flex: none; }
.rh-logo svg { width: 1.35rem; height: 1.35rem; }
.rh-wordmark { display: flex; flex-direction: column; line-height: 1.05; }
.rh-name { font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; color: var(--rh-text); }
.rh-name b { color: var(--rh-accent); font-weight: 800; }
.rh-sub { font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--rh-mut); margin-top: .1rem; }
.rh-footer { text-align: center; color: var(--rh-mut); font-size: .78rem; padding: 1.2rem 0 1.6rem; }
.rh-footer a { color: var(--rh-accent); }

/* ---------- obecné ---------- */
.rh-mut { color: var(--rh-mut); } .rh-small { font-size: .8rem; } .rh-accent { color: var(--rh-accent); }
.rh-stack { display: flex; flex-direction: column; gap: 1.25rem; }
.rh-card { background: var(--rh-card); border: 1px solid var(--rh-line); border-radius: var(--rh-radius); padding: 1.15rem 1.25rem; }
.rh-card-h { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .85rem; }
.rh-card-h h2, .rh-h { font-size: .95rem; font-weight: 700; color: var(--rh-text); margin: 0; }
.rh-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--rh-mut); font-weight: 600; }
.rh-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--rh-accent); box-shadow: 0 0 0 0 rgba(0, 230, 118, .6); animation: rh-pulse 2s infinite; vertical-align: middle; }
.rh-swatch { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; flex: none; }
@keyframes rh-pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 230, 118, .55); } 70% { box-shadow: 0 0 0 .55rem rgba(0, 230, 118, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0); } }
.rh-grid-2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.25rem; }
@media (max-width: 1023px) { .rh-grid-2 { grid-template-columns: 1fr; } }
.rh-est { display: inline-block; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #4a3300; background: var(--rh-amber); border-radius: 999px; padding: .08rem .45rem; vertical-align: middle; }
.rh-estv { color: var(--rh-amber); font-style: italic; }
.rh-btn { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--rh-line-2); background: var(--rh-card-2); color: var(--rh-text); border-radius: .7rem;
    padding: .5rem .9rem; font-size: .85rem; font-weight: 600; cursor: pointer; transition: transform .08s ease, background .15s; }
.rh-btn:hover { background: var(--rh-line); } .rh-btn:active { transform: scale(.97); } .rh-btn:disabled { opacity: .5; cursor: default; }
.rh-btn.go { background: var(--rh-accent); border-color: var(--rh-accent); color: var(--rh-accent-ink); }
.rh-btn.stop { color: var(--rh-red); border-color: rgba(255, 107, 107, .4); }
.rh-select { background: var(--rh-card-2); color: var(--rh-text); border: 1px solid var(--rh-line-2); border-radius: .7rem; padding: .45rem .6rem; font-size: .85rem; }

/* ---------- živá karta ---------- */
.rh-live { position: relative; overflow: hidden; padding: 1.4rem 1.5rem; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(15rem, 20rem); gap: 1.5rem; align-items: center; }
.rh-live::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .9; transition: background .4s;
    background: radial-gradient(60rem 18rem at -10% -40%, var(--rh-glow, transparent), transparent 60%); }
.rh-live > * { position: relative; }
.rh-live.s-charging { --rh-glow: rgba(0, 230, 118, .22); --rh-ring: var(--rh-accent); }
.rh-live.s-connected { --rh-glow: rgba(255, 184, 77, .16); --rh-ring: var(--rh-amber); }
.rh-live.s-complete { --rh-glow: rgba(88, 166, 255, .16); --rh-ring: var(--rh-blue); }
.rh-live.s-error { --rh-glow: rgba(255, 107, 107, .2); --rh-ring: var(--rh-red); }
.rh-live.s-idle, .rh-live.s-unknown, .rh-live.s-off, .rh-live.s-loading { --rh-ring: #3a4250; }
.rh-ring { width: 8.5rem; height: 8.5rem; border-radius: 50%; display: grid; place-items: center; text-align: center;
    background: radial-gradient(circle at 50% 50%, var(--rh-card) 58%, transparent 59%), conic-gradient(var(--rh-ring) var(--rh-pct, 100%), rgba(255, 255, 255, .06) 0);
    box-shadow: 0 0 2.4rem -0.6rem var(--rh-ring); transition: box-shadow .4s; }
.s-charging .rh-ring { animation: rh-breathe 2.4s ease-in-out infinite; }
@keyframes rh-breathe { 50% { box-shadow: 0 0 3.4rem -0.2rem var(--rh-ring); } }
.rh-ring-in { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.rh-ring-icon { font-size: 1.6rem; line-height: 1; }
.rh-ring-state { font-size: .82rem; font-weight: 800; letter-spacing: .08em; color: var(--rh-ring); }
.rh-power { font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--rh-text); }
.rh-power small { font-size: .38em; font-weight: 700; color: var(--rh-mut); margin-left: .25rem; letter-spacing: 0; }
.rh-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; margin-top: 1rem; }
.rh-metric { background: var(--rh-card-2); border: 1px solid var(--rh-line); border-radius: .8rem; padding: .55rem .7rem; }
.rh-metric b { display: block; font-size: 1.05rem; font-weight: 700; color: var(--rh-text); margin-top: .1rem; }
.rh-metric b small { font-size: .7rem; color: var(--rh-mut); font-weight: 600; margin-left: .15rem; }
.rh-side { display: flex; flex-direction: column; gap: .9rem; border-left: 1px solid var(--rh-line); padding-left: 1.4rem; }
.rh-side-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.rh-msg { font-size: .8rem; min-height: 1.1rem; }
.rh-msg.ok { color: var(--rh-accent); } .rh-msg.err { color: var(--rh-red); }
@media (max-width: 1100px) { .rh-live { grid-template-columns: auto minmax(0, 1fr); } .rh-side { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--rh-line); padding-top: 1rem; } }
@media (max-width: 640px) { .rh-live { grid-template-columns: 1fr; justify-items: start; padding: 1.15rem; } .rh-ring { width: 6.5rem; height: 6.5rem; }
    .rh-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- KPI dlaždice ---------- */
.rh-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.rh-kpis.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) { .rh-kpis.six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .rh-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rh-kpi { background: var(--rh-card); border: 1px solid var(--rh-line); border-radius: var(--rh-radius); padding: 1rem 1.1rem; position: relative; overflow: hidden; }
.rh-kpi.hl { border-color: rgba(0, 230, 118, .35); background: linear-gradient(160deg, var(--rh-accent-soft), var(--rh-card) 55%); }
.rh-kpi-v { font-size: clamp(1.35rem, 2.6vw, 1.85rem); font-weight: 800; letter-spacing: -.03em; color: var(--rh-text); margin-top: .35rem; line-height: 1.1; }
.rh-kpi-v small { font-size: .5em; color: var(--rh-mut); font-weight: 700; margin-left: .2rem; letter-spacing: 0; }
.rh-kpi-s { font-size: .76rem; color: var(--rh-mut); margin-top: .3rem; }
.rh-kpi-s a { color: var(--rh-accent); }

/* ---------- přepínač měsíce ---------- */
.rh-monthbar { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.rh-month { display: inline-flex; align-items: center; border: 1px solid var(--rh-line-2); border-radius: 999px; overflow: hidden; background: var(--rh-card); }
.rh-month button, .rh-month a { padding: .45rem .8rem; color: var(--rh-mut); font-weight: 700; background: transparent; border: 0; cursor: pointer; }
.rh-month button:hover, .rh-month a:hover { color: var(--rh-text); background: var(--rh-line); }
.rh-month span { padding: .45rem .9rem; font-weight: 700; color: var(--rh-text); min-width: 9rem; text-align: center; text-transform: capitalize; border-inline: 1px solid var(--rh-line); }

/* ---------- osoby (pruhy) ---------- */
.rh-people { display: flex; flex-direction: column; gap: .8rem; }
.rh-person-top { display: flex; justify-content: space-between; gap: .6rem; font-size: .88rem; align-items: baseline; }
.rh-person-top span:first-child { display: inline-flex; gap: .45rem; align-items: center; font-weight: 600; color: var(--rh-text); }
.rh-bar { height: .45rem; border-radius: 999px; background: var(--rh-line); margin-top: .35rem; overflow: hidden; }
.rh-bar i { display: block; height: 100%; border-radius: 999px; }

/* ---------- seznam relací ---------- */
.rh-list { display: flex; flex-direction: column; }
.rh-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto auto; gap: .75rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--rh-line); font-size: .86rem; }
.rh-row:last-child { border-bottom: 0; }
.rh-row .rh-who { display: inline-flex; gap: .45rem; align-items: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--rh-text); }
.rh-row .rh-kwh { font-weight: 700; color: var(--rh-text); text-align: right; min-width: 4.5rem; }
.rh-empty { text-align: center; color: var(--rh-mut); padding: 1.6rem .5rem; font-size: .88rem; }
.rh-sync { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .8rem; color: var(--rh-mut); }
.rh-pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 700; border-radius: 999px; padding: .12rem .5rem; text-transform: uppercase; letter-spacing: .04em; }
.rh-pill.ok { background: var(--rh-accent-soft); color: var(--rh-accent); } .rh-pill.err { background: rgba(255, 107, 107, .15); color: var(--rh-red); } .rh-pill.run { background: var(--rh-line); color: var(--rh-mut); }

/* ---------- grafy ---------- */
.rh-chart { position: relative; width: 100%; }
.rh-chart canvas { width: 100% !important; }
.rh-charts { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.25rem; }
.rh-charts > .c-8 { grid-column: span 8; } .rh-charts > .c-7 { grid-column: span 7; } .rh-charts > .c-5 { grid-column: span 5; } .rh-charts > .c-4 { grid-column: span 4; }
.rh-charts > .c-3 { grid-column: span 3; } .rh-charts > .c-12 { grid-column: span 12; }
@media (max-width: 1023px) { .rh-charts > * { grid-column: 1 / -1 !important; } }
.rh-presets { display: flex; flex-wrap: wrap; gap: .35rem; }
.rh-chip { border: 1px solid var(--rh-line-2); background: var(--rh-card-2); color: var(--rh-mut); border-radius: 999px; padding: .35rem .8rem; font-size: .8rem; font-weight: 600; cursor: pointer; }
.rh-chip.on { background: var(--rh-accent); border-color: var(--rh-accent); color: var(--rh-accent-ink); }
.rh-filters { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.rh-filters label { display: flex; flex-direction: column; gap: .3rem; }
.rh-input { background: var(--rh-card-2); color: var(--rh-text); border: 1px solid var(--rh-line-2); border-radius: .6rem; padding: .4rem .55rem; font-size: .85rem; color-scheme: dark; }

/* ---------- veřejný stav + přihlášení ---------- */
.rh-loginstav { display: flex; flex-direction: column; gap: .45rem; margin-bottom: .4rem; }
.rh-mini { display: flex; justify-content: space-between; gap: .6rem; align-items: center; border: 1px solid var(--rh-line); background: var(--rh-card-2); border-radius: .8rem; padding: .6rem .8rem; }
.rh-mini-name { font-weight: 600; color: var(--rh-text); font-size: .88rem; }
.rh-mini-state { font-weight: 800; font-size: .78rem; letter-spacing: .06em; color: var(--rh-mut); }
.rh-mini.s-charging .rh-mini-state { color: var(--rh-accent); } .rh-mini.s-connected .rh-mini-state { color: var(--rh-amber); }
.rh-mini.s-complete .rh-mini-state { color: var(--rh-blue); } .rh-mini.s-error .rh-mini-state { color: var(--rh-red); }
.rh-public { min-height: 100vh; background: radial-gradient(70rem 30rem at 50% -10%, rgba(0, 230, 118, .12), transparent 60%), #0E1116; color: #E6EDF3; font-family: Inter, system-ui, sans-serif;
    display: flex; flex-direction: column; align-items: center; padding: 2.2rem 1rem 1.5rem; margin: 0; }
.rh-public-wrap { width: 100%; max-width: 30rem; display: flex; flex-direction: column; gap: 1.2rem; }
.rh-public-card { border-radius: 1.4rem; border: 1px solid rgba(255, 255, 255, .08); background: #161B22; padding: 1.6rem 1.4rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.rh-public-card .rh-ring { width: 10rem; height: 10rem; }
.rh-public-card .rh-ring-state { font-size: 1rem; }
.rh-public-name { font-size: 1.05rem; font-weight: 700; }
.rh-public-pw { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; }
.rh-public-pw small { font-size: .45em; color: #8B949E; margin-left: .2rem; }
.rh-public a { color: #00E676; }
.rh-public .s-charging { --rh-ring: #00E676; } .rh-public .s-connected { --rh-ring: #FFB84D; } .rh-public .s-complete { --rh-ring: #58A6FF; } .rh-public .s-error { --rh-ring: #FF6B6B; }
.rh-public .s-idle, .rh-public .s-unknown, .rh-public .s-off, .rh-public .s-loading { --rh-ring: #3a4250; }
.rh-public .rh-ring { background: radial-gradient(circle at 50% 50%, #161B22 58%, transparent 59%), conic-gradient(var(--rh-ring) 100%, rgba(255, 255, 255, .06) 0); }
.rh-offtag { font-size: .65rem; font-weight: 700; color: #FF6B6B; border: 1px solid rgba(255, 107, 107, .4); border-radius: 999px; padding: .05rem .4rem; margin-left: .35rem; vertical-align: middle; }

/* ---------- Filament doladění ---------- */
.dark .fi-topbar, .dark .fi-topbar nav { background: rgba(14, 17, 22, .85); backdrop-filter: blur(10px); }
.dark .fi-section { background: var(--rh-card); }
.fi-ta-ctn { border-radius: var(--rh-radius); }