/* ============================================================
   ONYX — warstwa BAZOWA (chrome współdzielony). Wymaga
   fonts/tokens/components.css. Style per-widok żyją w app/css/*.css.
   Komponenty bazowe (przyciski/pola/karty) = components.css (handoff).
   Tokeny wizualne = tokens.css (jedyne miejsce wartości kolorów).
   ============================================================ */
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-width:var(--layout-min)}
#app{min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
button{font-family:var(--font-ui)}
input,textarea,select{font-family:var(--font-ui);color:var(--text-primary)}
input.field,textarea.field{width:100%}
textarea.field{resize:vertical;min-height:52px;line-height:1.6}
select.field{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2357606E' stroke-width='1.3' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;padding-right:28px}
.mono{font-family:var(--font-mono)}
.muted{color:var(--text-secondary)}
.faint{color:var(--text-faint)}
.hidden{display:none !important}

/* --- top bar --- */
.top-bar{background:var(--surface-0)}
.top-bar .nav-item{user-select:none}
.queue-ind{display:inline-flex;align-items:center;gap:8px;font:400 var(--font-size-sm) var(--font-mono);color:var(--accent-soft);background:none;border:none;cursor:pointer;padding:3px 6px;border-radius:var(--radius-2)}
.queue-ind:hover{background:var(--surface-1);color:var(--accent)}
.budget-strip{display:flex;align-items:center;gap:9px;padding:9px 36px;border-bottom:1px solid var(--border);background:var(--danger-wash);font-size:var(--font-size-base);color:var(--text-secondary)}
.budget-strip:empty{display:none}
.budget-strip .budget-strip-pct{color:var(--danger);font-weight:600}
.budget-strip .budget-strip-link{font-size:var(--font-size-base);margin-left:6px}
.budget-strip .budget-strip-mute{background:none;border:none;padding:0;font:400 var(--font-size-sm) var(--font-ui);color:var(--text-secondary);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.budget-strip .budget-strip-mute:hover{color:var(--text-primary)}
.brand-wrap{position:relative}
.brand-menu{position:absolute;top:44px;right:0;width:252px;z-index:60}
.brand-menu .menu-foot{border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:8px 12px;font:400 var(--font-size-xs) var(--font-mono);color:var(--text-tertiary)}
.brand-logo{width:46px;height:15px;object-fit:contain;flex:none}
.brand-logo-ph{width:46px;height:15px;border:1px dashed var(--border-field-hover);border-radius:3px;display:flex;align-items:center;justify-content:center;font:500 7px var(--font-mono);color:var(--text-tertiary);flex:none;letter-spacing:.05em}

/* --- notyfikacje (badge przy koncie + dropdown) --- */
.notif-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:transparent;border:none;border-radius:var(--radius-pill);color:var(--text-secondary);cursor:pointer}
.notif-btn:hover{background:var(--surface-1);color:var(--text-primary)}
.notif-badge{position:absolute;top:-3px;right:-4px;min-width:14px;height:14px;padding:0 3px;border-radius:var(--radius-pill);background:var(--accent);color:var(--on-accent);font:700 var(--font-size-2xs)/14px var(--font-mono);text-align:center}
.notif-item{align-items:flex-start}
.notif-item .dot{margin-top:5px}

/* --- ramy widoku --- */
.view-head{display:flex;align-items:center;gap:18px;padding:14px 36px;border-bottom:1px solid var(--border)}
.view-title{font-size:var(--font-size-lg);font-weight:600}
.view-body{padding:28px 36px 44px;max-width:1560px}
.crumbs{display:flex;align-items:center;gap:10px;font-size:var(--font-size-base);color:var(--text-secondary)}
.crumbs .sep{color:var(--text-disabled)}
.crumbs b{font:600 var(--font-size-base) var(--font-mono);color:var(--text-primary)}

/* --- tabele (raporty + admin współdzielą) --- */
.tbl{width:100%;border-collapse:collapse;font-size:var(--font-size-base)}
.tbl th{font:600 var(--font-size-xs) var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary);text-align:left;padding:8px 12px 8px 0;border-bottom:1px solid var(--border)}
.tbl td{padding:9px 12px 9px 0;border-bottom:1px solid var(--border-hairline);vertical-align:baseline}
.tbl td.num{font-family:var(--font-mono)}

/* --- toasty / modale --- */
.toast-stack{position:fixed;right:24px;bottom:24px;display:flex;flex-direction:column;gap:10px;z-index:120}
.modal-wrap{position:fixed;inset:0;z-index:110;display:flex;align-items:center;justify-content:center}
.modal .m-title{display:flex;align-items:center;gap:10px;font-size:var(--font-size-lg);font-weight:600}
.modal .m-body{font-size:var(--font-size-base);color:var(--text-secondary);margin-top:12px;line-height:1.55}
.modal .m-actions{display:flex;gap:14px;margin-top:18px;align-items:center}

/* degradacja 1024–1280 (nav w barze ciaśniej; sidebaru brak) */
@media (max-width:1279px){
  .top-bar{gap:16px;padding:0 20px}
  .nav{gap:14px}
}