/* agentkeymaster - style domenowe (linkowane PO ui.css).
   Wspolne komponenty: NIE stylowac tutaj - zasada jednej poprawki (UI-GUIDE.md). */

:root { --accent: var(--acc-keymaster); }

/* agentKEYMASTER – nadpisania lokalne */
.page{display:none}
.page.active{display:block}

.key-mono{font-family:var(--font-mono);font-size:.75rem;color:var(--ink-soft)}

.ks-row{display:flex;align-items:center;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid var(--line);gap:.5rem}

.ks-row:last-child{border-bottom:none}

.kill-global{width:100%;padding:1rem;font-size:1rem;cursor:pointer;font-weight:700;transition:background .15s;border:none;font-family:var(--font-mono)}

.kill-global.armed{background:var(--crit);color:#fff}

.kill-global.safe{background:var(--ok);color:#fff}

.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;margin-bottom:1.5rem}

.new-key-banner{display:none;background:#edf9f2;border:1px solid #bfe9d2;padding:1rem;margin-bottom:1rem}

.new-key-banner b{color:#0c7d4e}

.new-key-banner .key-mono{color:#0c7d4e;font-size:.9rem}


/* ── Zużycie: panel kanałów + wykres ───────────────────────────────── */
.usage-backend-panel{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem;margin-bottom:1rem}

.usage-backend-kpi{background:var(--white);border:1px solid var(--line);padding:12px 14px;display:flex;flex-direction:column;gap:4px}

.usage-backend-kpi .ubk-head{display:flex;align-items:center;gap:.5rem;margin-bottom:4px}

.usage-backend-kpi .ubk-title{font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}

.usage-backend-kpi .ubk-row{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;color:var(--ink-soft)}

.usage-backend-kpi .ubk-row b{color:var(--ink);font-weight:600}


/* wykres kosztów */
.usage-chart-wrap{background:var(--white);border:1px solid var(--line);padding:14px 16px;margin-bottom:1rem}

.usage-chart-title{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:.75rem}

.usage-chart-svg{width:100%;display:block;overflow:visible}

.usage-chart-bar{fill:var(--accent);opacity:.75;transition:opacity .1s}

.usage-chart-bar:hover{opacity:1}

.usage-chart-tooltip{position:fixed;background:var(--ink);color:var(--paper);font-family:var(--font-mono);font-size:10px;padding:4px 8px;pointer-events:none;white-space:nowrap;z-index:50;display:none}


/* przełącznik Live */
.live-toggle{display:inline-flex;align-items:center;gap:.4rem;height:28px;padding:0 10px;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;border:1px solid var(--line);background:var(--white);color:var(--ink-mute);cursor:pointer;user-select:none;transition:background .1s,color .1s,border-color .1s}

.live-toggle.active{border-color:var(--ok);color:var(--ok);background:#edf9f2}

.live-toggle .live-dot{width:6px;height:6px;border-radius:50%;background:currentColor}

.live-toggle.active .live-dot{animation:live-pulse 1s ease-in-out infinite}

@keyframes live-pulse{0%,100%{opacity:1}50%{opacity:.3}}


/* ── Zużycie: selektor zakresu dni ─────────────────────────────────── */
.usage-range-btns{display:inline-flex;gap:0;margin-bottom:1rem}

.usage-range-btn{height:26px;padding:0 12px;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;border:1px solid var(--line);background:var(--white);color:var(--ink-mute);cursor:pointer;transition:background .1s,color .1s;margin-right:-1px}

.usage-range-btn:first-child{border-radius:2px 0 0 2px}

.usage-range-btn:last-child{border-radius:0 2px 2px 0;margin-right:0}

.usage-range-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);z-index:1;position:relative}


/* ── Zużycie: sekcja wyboru dnia ───────────────────────────────────── */
.usage-day-wrap{background:var(--white);border:1px solid var(--line);padding:14px 16px;margin-bottom:1rem}

.usage-day-controls{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem;flex-wrap:wrap}

.usage-day-title{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:.75rem}

.usage-day-nav{display:inline-flex;align-items:center;gap:.25rem}

.usage-day-nav button{height:26px;width:26px;border:1px solid var(--line);background:var(--white);color:var(--ink-mute);cursor:pointer;font-size:12px;padding:0;line-height:1}

.usage-day-date-input{height:26px;padding:0 6px;font-family:var(--font-mono);font-size:11px;border:1px solid var(--line);background:var(--white);color:var(--ink);outline:none}

.usage-day-empty{color:var(--ink-mute);font-size:.8rem;font-family:var(--font-mono);padding:.5rem 0}


/* ── Zużycie: tabela API vs sub per agent ──────────────────────────── */
.usage-agent-backend-wrap{background:var(--white);border:1px solid var(--line);padding:14px 16px;margin-bottom:1rem}

.usage-agent-backend-title{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:.75rem}

.usage-api-highlight{color:var(--accent);font-weight:600}

#login-overlay{position:fixed;inset:0;background:var(--paper);display:flex;align-items:center;justify-content:center;z-index:1000}

/* Bramka bezpieczeństwa: zawartość aplikacji ukryta do czasu zalogowania (anty-wyciek tła). */
body:not(.authed) .layout{display:none!important}

body.authed #login-overlay{display:none}

.err-msg{color:var(--crit);font-size:.8rem;margin-top:.5rem;text-align:center}