/* Dashboard — jeden súbor, žiadny build pipeline (ADR A5). Farby sú tlmené zámerne: výrazná je len tá informácia, ktorá znamená problém, a režim behu. Keby svietilo všetko, nesvietilo by nič. Celá paleta je v premenných, aby svetlý režim menil len tento blok a nie pravidlá nižšie. Prepínač je v `theme.js`; trieda `light` sedí na ``, nie na `` — vtedy sa dá nastaviť ešte pred vykreslením stránky a farby neblikajú. */ :root { color-scheme: dark; --bg: #14161a; --panel: #1c1f26; --border: #2b303b; --text: #e6e8ec; --muted: #8b93a3; --ok: #4eab6d; --warn: #d9a441; --bad: #e0625e; --accent: #5aa9e6; /* Text na výplni farby `--accent` (tlačidlo prihlásenia). */ --on-accent: #0d1620; /* Odznak `live` má biely text, takže potrebuje tmavšiu červenú než `--bad`, ktorá musí byť naopak dosť svetlá na čítanie na tmavom pozadí. Preto vlastná premenná. */ --badge-live: #b3312d; --badge-dry-run: #223449; --badge-sandbox: #3a3320; --banner-info-bg: #1b2a3a; --banner-info-border: #2b4a63; --banner-warn-bg: #3a3320; --banner-warn-border: #5c4f2c; } /* Svetlý režim. Zelená, oranžová a červená sú tmavšie než v tmavom režime — na bielom pozadí by inak nemali dosť kontrastu a stav modulu je presne tá informácia, ktorá sa musí prečítať na prvý pohľad. */ :root.light { color-scheme: light; --bg: #f5f7fa; --panel: #ffffff; --border: #dde2ea; --text: #15181d; --muted: #5c6673; --ok: #157a3d; --warn: #8a6100; --bad: #c0271f; --accent: #0a66c2; --on-accent: #ffffff; --badge-live: #b3312d; --badge-dry-run: #dce8f7; --badge-sandbox: #f7edd2; --banner-info-bg: #eaf2fb; --banner-info-border: #c3d9f0; --banner-warn-bg: #fbf3df; --banner-warn-border: #e4d2a0; } * { box-sizing: border-box; } body { margin: 0; padding: 0 1.5rem 3rem; background: var(--bg); color: var(--text); font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; } code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; } .brand strong { font-size: 1.1rem; letter-spacing: 0.02em; } .brand .muted { margin-left: 0.5rem; } /* Režim musí byť rozoznateľný na prvý pohľad. Zámena dry-run a live je presne tá chyba, ktorej má vizuálny rozdiel zabrániť. */ .mode-badge { padding: 0.3rem 0.9rem; border-radius: 999px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; } .mode-badge-dry-run { background: var(--badge-dry-run); color: var(--accent); } .mode-badge-sandbox { background: var(--badge-sandbox); color: var(--warn); } .mode-badge-live { background: var(--badge-live); color: #fff; } body.mode-live { border-top: 4px solid var(--bad); } /* Prepínač svetlý/tmavý. Nenápadné tlačidlo — je to ovládanie vzhľadu, nie stavu systému. */ .topbar-right { display: flex; align-items: center; gap: 0.75rem; } .theme-toggle { background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.8rem; font: inherit; font-size: 0.75rem; cursor: pointer; } .theme-toggle:hover { color: var(--text); border-color: var(--muted); } .panel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.25rem; margin-bottom: 1rem; } .panel h2 { margin: 0 0 0.85rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 600; } .panel-warn { border-color: var(--warn); } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.75rem; } .tile { display: flex; flex-direction: column; gap: 0.2rem; } .tile .label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .tile .value { font-size: 1.15rem; font-weight: 600; } .tile .value.small { font-size: 0.9rem; font-weight: 500; } table { width: 100%; border-collapse: collapse; } th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border); } td { padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--border); vertical-align: top; } tr:last-child td { border-bottom: none; } td.detail { color: var(--muted); } .row-stale { opacity: 0.55; } .muted { color: var(--muted); } .small { font-size: 0.82rem; } /* Stavy modulov aj objednávok. Neznámy stav zostane bez farby — radšej nenápadný než zavádzajúci. */ .status-HEALTHY, .status-FILLED, .status-DRY_RUN_OK { color: var(--ok); font-weight: 600; } .status-DEGRADED, .status-STARTING, .status-PARTIALLY_FILLED, .status-SUBMITTING, .status-CANCEL_REQUESTED { color: var(--warn); font-weight: 600; } .status-FAILED, .status-SAFE_STOP, .status-MARKET_HALTED, .status-HALTED_TODAY, .status-REJECTED, .status-BROKEN, .status-ABANDONED { color: var(--bad); font-weight: 600; } .status-STOPPED, .status-OFF, .status-CANCELLED, .status-EXPIRED { color: var(--muted); } .status-LIVE_AT_BROKER, .status-PLANNED { color: var(--accent); font-weight: 600; } .banner { padding: 0.6rem 0.9rem; border-radius: 8px; margin: 0 0 1rem; font-size: 0.9rem; } .banner-info { background: var(--banner-info-bg); border: 1px solid var(--banner-info-border); } .banner-warn { background: var(--banner-warn-bg); border: 1px solid var(--banner-warn-border); } .events { list-style: none; margin: 0; padding: 0; } .events li { padding: 0.35rem 0; border-bottom: 1px solid var(--border); } .events li:last-child { border-bottom: none; } .level { display: inline-block; min-width: 68px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; } .level-INFO { color: var(--accent); } .level-WARNING { color: var(--warn); } .level-CRITICAL { color: var(--bad); } footer { margin-top: 1.5rem; font-size: 0.82rem; } /* --- Prihlásenie (ADR 0021) --------------------------------------------------------------- */ .login-page { display: grid; place-items: center; min-height: 100vh; padding: 1rem; } .login-page .theme-toggle { position: fixed; top: 1rem; right: 1rem; } .login-box { width: min(92vw, 380px); } .login-brand { margin: 0; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; } .login-title { margin: 0.2rem 0 0.6rem; font-size: 1.7rem; letter-spacing: -0.02em; } .login-label { display: block; margin: 1.2rem 0 0.5rem; font-size: 0.85rem; } .login-code { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 0.85rem 1rem; font: 600 1.6rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.3em; text-align: center; } .login-code:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .login-submit { width: 100%; margin-top: 1rem; padding: 0.75rem 1rem; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 0.95rem; cursor: pointer; } .login-error { color: var(--bad); margin: 0.8rem 0 0; font-size: 0.9rem; } .login-note { margin: 1rem 0 0; font-size: 0.8rem; }