/* ============================================================
   ONYX — components.css (faza 1) · vanilla CSS, kebab-case
   Mapowanie wzorzec → widok: patrz README.md (kotwice mockupu).
   Wymaga tokens.css.
   ============================================================ */
body{margin:0;background:var(--surface-0);color:var(--text-primary);font:400 var(--font-size-md)/1.45 var(--font-ui)}
a{color:var(--accent-soft);text-decoration:none}
a:hover{color:#FDBA74}

/* --- top bar (wszystkie widoki) --- */
.top-bar{height:var(--top-bar-h);display:flex;align-items:center;gap:26px;padding:0 36px;border-bottom:1px solid var(--border)}
.top-bar-logo{width:18px;height:19px}
.nav{display:flex;gap:22px;font-size:var(--font-size-base)}
.nav-item{color:var(--text-secondary);cursor:pointer;position:relative}
.nav-item:hover{color:var(--text-primary)}
.nav-item.is-active{color:var(--text-primary);font-weight:500} /* bez podkreślenia — akcent w top barze WYJEBANY (ustalenie) */
.spacer{flex:1}
.session-cost{font:400 var(--font-size-sm) var(--font-mono);color:var(--text-secondary)}
.session-cost b{color:var(--text-primary);font-weight:600}
.avatar{width:26px;height:26px;border-radius:var(--radius-pill);background:#26303D;display:flex;align-items:center;justify-content:center;font:600 10px var(--font-ui);color:#C7D1DE}

/* --- brand chip (logo + nazwa pod spodem) --- */
.brand-chip{display:flex;align-items:center;gap:8px;background:transparent;border:none;border-radius:var(--radius-3);padding:3px 7px;cursor:pointer}
.brand-chip:hover{background:var(--surface-1)}
.brand-chip-stack{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.brand-chip-logo{width:46px;height:15px;object-fit:contain}
.brand-chip-name{font:400 9.5px var(--font-ui);color:var(--text-tertiary)}

/* --- przyciski --- */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--btn-primary-bg);border:1px solid var(--accent-border);box-shadow:var(--shadow-btn-primary);border-radius:var(--radius-4);padding:10px 18px;font:600 var(--font-size-base) var(--font-ui);color:var(--on-accent);cursor:pointer;white-space:nowrap}
.btn-primary:hover{background:var(--btn-primary-bg-hover)}
.btn-primary:disabled{background:#161C25;border:1px solid var(--border-field);box-shadow:none;color:var(--text-faint);cursor:not-allowed}
.btn-secondary{display:inline-flex;align-items:center;gap:7px;background:var(--surface-1);border:1px solid #273040;border-radius:var(--radius-2);padding:6px 13px;font:500 12px var(--font-ui);color:#C7D1DE;cursor:pointer}
.btn-secondary:hover{border-color:var(--border-field-hover)}
.link-action{background:none;border:none;padding:0;font:500 12px var(--font-ui);color:var(--text-secondary);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link-action:hover{color:var(--text-primary)}
.link-action.is-success{color:var(--success);font-weight:600}
.link-action.is-danger{color:var(--danger);font-weight:600}
.kbd{font:500 10px var(--font-mono);border:1px solid #273040;border-radius:var(--radius-1);padding:1px 5px;color:var(--text-secondary)}

/* --- pola formularzy (Kreator 3a, Admin, modale) --- */
.field{background:var(--surface-inset);border:1px solid var(--border-field);border-radius:var(--radius-2);padding:8px 11px;font-size:var(--font-size-base);color:var(--text-primary)}
.field:hover{border-color:var(--border-field-hover)}
.field:focus,.field.is-focus{border-color:var(--accent);box-shadow:var(--focus-ring);outline:none}
.field.is-invalid{border-color:var(--danger-dim-border)}
.field-label{font:400 var(--font-size-xs) var(--font-mono);color:var(--text-faint);margin-bottom:7px}
.select{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer} /* + .field */
.menu{background:var(--surface-1);border:1px solid #273040;border-radius:var(--radius-3);box-shadow:var(--shadow-menu);overflow:hidden}
.menu-item{display:flex;align-items:center;gap:11px;padding:9px 12px;color:var(--text-secondary);font-size:var(--font-size-base);cursor:pointer}
.menu-item:hover{background:var(--surface-hover);color:var(--text-primary)}
.menu-item.is-selected{background:#161D27;color:var(--text-primary);font-weight:500}

/* --- segmented / toggle / checkbox --- */
.segmented{display:inline-flex;background:var(--surface-inset);border:1px solid var(--border-field);border-radius:var(--radius-2);overflow:hidden}
.segmented-item{padding:5px 14px;font-size:12px;color:var(--text-secondary);cursor:pointer;border-left:1px solid #1B222C}
.segmented-item:first-child{border-left:none}
.segmented-item.is-active{background:var(--surface-active);color:var(--text-primary);font-weight:500}
.toggle{width:30px;height:17px;border-radius:var(--radius-pill);background:#273040;position:relative;cursor:pointer;border:none}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:var(--radius-pill);background:var(--text-secondary)}
.toggle.is-on{background:var(--accent)}
.toggle.is-on::after{left:auto;right:2px;background:var(--surface-0)}
.checkbox{width:14px;height:14px;border-radius:var(--radius-1);border:1px solid var(--text-disabled);display:inline-flex;align-items:center;justify-content:center;flex:none;cursor:pointer}
.checkbox.is-checked{border-color:var(--accent-dim-border);background:var(--accent-dim-bg);color:var(--accent-soft);font-size:10px;font-weight:700}

/* --- statusy (dzienniki, kolejka, biblioteka) --- */
.dot{width:6px;height:6px;border-radius:var(--radius-pill);display:inline-block}
.dot.is-success{background:var(--success)}
.dot.is-danger{background:var(--danger)}
.dot.is-progress{background:var(--accent);animation:pulse 1.6s infinite}
.dot.is-queued{background:transparent;border:1px solid var(--text-disabled)}
.status-tag{font:600 8.5px var(--font-mono);letter-spacing:.05em;border-radius:var(--radius-1);padding:1px 6px}
.status-tag.is-success{color:var(--success);background:var(--success-dim-bg);border:1px solid var(--success-dim-border)}
.status-tag.is-danger{color:var(--danger);background:var(--danger-dim-bg);border:1px solid var(--danger-dim-border)}
.status-tag.is-accent{color:var(--accent-soft);background:var(--accent-dim-bg);border:1px solid var(--accent-dim-border)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes orbit{to{transform:rotate(360deg)}}
.mini-loader{position:relative;width:18px;height:18px;display:inline-block}
.mini-loader::before{content:"";position:absolute;inset:2px;border:1px solid #273040;border-radius:var(--radius-pill)}
.mini-loader-dot{position:absolute;inset:0;animation:orbit 1.3s linear infinite}
.mini-loader-dot::after{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:4.5px;height:4.5px;border-radius:var(--radius-pill);background:var(--accent)}

/* --- sekcje i tabele --- */
.section-label{font:600 var(--font-size-xs) var(--font-ui);letter-spacing:.14em;color:var(--text-tertiary);text-transform:uppercase}
.row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border-hairline)}
.row-leader{flex:1;border-bottom:1px dotted var(--border-field)} /* kropkowany odnośnik */
.run-id{font:500 var(--font-size-sm) var(--font-mono);color:var(--text-primary)}
.price-actual{font:500 var(--font-size-sm) var(--font-mono);color:var(--text-primary)}   /* rzeczywisty = biały */
.price-est{font:500 var(--font-size-sm) var(--font-mono);color:var(--accent-soft)}       /* estymata = pomarańcz */
.progress{height:3px;background:#161C25;border-radius:var(--radius-pill);overflow:hidden}
.progress-fill{height:100%;background:var(--accent)}
.progress-fill.is-danger{background:var(--danger)}

/* --- konsola kosztów (prawa kolumna Kreatora / pickera) --- */
/* bez akcentowego paska border-top (ustalenie) — wash gradientowy od góry */
.console-card{background:linear-gradient(180deg,rgba(249,115,22,.08),rgba(249,115,22,0) 44%) var(--surface-inset);border:1px solid var(--border-field);border-radius:9px;padding:20px 22px;box-shadow:var(--shadow-console)}
.console-total{font:600 var(--font-size-num) var(--font-mono);color:var(--accent-soft);letter-spacing:-.02em}
.rail{background:var(--surface-rail);border-left:1px solid var(--border);display:flex;flex-direction:column}

/* --- modal / toast / tooltip --- */
.modal-backdrop{position:fixed;inset:0;background:rgba(4,6,9,.8)}
.modal{width:440px;background:linear-gradient(180deg,rgba(255,98,87,.09),rgba(255,98,87,0) 40%) var(--surface-2);border:1px solid #273040;border-radius:var(--radius-4);box-shadow:var(--shadow-modal);padding:24px 26px}
.modal.is-accent{background:linear-gradient(180deg,rgba(249,115,22,.08),rgba(249,115,22,0) 40%) var(--surface-2)}
.toast{display:inline-flex;align-items:center;gap:10px;background:var(--surface-1);border:1px solid var(--success-dim-border);border-radius:var(--radius-3);padding:10px 14px;box-shadow:var(--shadow-menu)}
.toast.is-danger{border-color:var(--danger-dim-border)}
.tooltip{background:#161D27;border:1px solid #273040;border-radius:var(--radius-2);padding:7px 10px;font:400 var(--font-size-xs) var(--font-mono);color:var(--text-secondary);box-shadow:var(--shadow-menu);white-space:nowrap}

/* --- miniatury / placeholdery --- */
.thumb{position:relative;border:1px solid var(--border-field);border-radius:var(--radius-3);background:repeating-linear-gradient(45deg,#141A23 0 10px,#101620 10px 20px)}
.thumb.is-selected{border:1.5px solid var(--accent);box-shadow:0 0 0 3px rgba(249,115,22,.1)}
.thumb.is-accepted{border:1.5px solid var(--success)}
.thumb.is-rejected{border-color:var(--danger-dim-border);opacity:.55}

/* --- szczegół runa: timeline (10a) --- */
.timeline{position:relative}
.timeline::before{content:"";position:absolute;left:5px;top:16px;bottom:16px;width:1px;background:var(--border-ghost)}
.timeline-node{width:11px;height:11px;border-radius:var(--radius-pill);border:1.5px solid var(--text-ghost);background:var(--surface-rail);flex:none;position:relative;z-index:1}
.timeline-node.is-done{border-color:var(--success);background:var(--success-dim-bg)}
.timeline-node.is-active{border-color:var(--accent)}
.retention-badge{display:inline-flex;align-items:center;gap:6px;font:400 var(--font-size-2xs) var(--font-mono);color:var(--accent-soft);border:1px solid rgba(249,115,22,.35);border-radius:var(--radius-1);padding:2px 8px}

/* --- degradacja 1024–1280 (sidebar → ikony); <1024 niewspierane --- */
@media (max-width:1279px){
  .sidebar{width:52px}
  .sidebar .nav-label{display:none}
}