/* NB — стилі поверх Bootstrap 6 alpha.
   v6: токени без префікса в source, PostCSS додає префікс у dist — тому задаємо обидва варіанти. */
:root, :host {
  --nb: #007fff; --nb-hover: #006ad6; --nb-dark: #0a1f3c; --nb-soft: #e8f3ff; --nb-muted: #6b7c93; --nb-line: #e6ecf3;
  --primary-base: #007fff; --bs-primary-base: #007fff;
  --body-font-size: .92rem; --bs-body-font-size: .92rem;
  --font-sans-serif: 'Manrope', system-ui, sans-serif; --bs-font-sans-serif: 'Manrope', system-ui, sans-serif;
  accent-color: #007fff;
}
body { font-family: 'Manrope', system-ui, sans-serif; font-size: .92rem; background: #f4f7fb; }

/* Гарантуємо фірмовий колір для theme-primary незалежно від назв токенів у alpha */
.theme-primary { --theme-bg: #007fff; --theme-border: #007fff; --theme-contrast: #fff; --theme-fg: #0058b3;
  --bs-theme-bg: #007fff; --bs-theme-border: #007fff; --bs-theme-contrast: #fff; --bs-theme-fg: #0058b3; }
.btn-solid.theme-primary:hover { --theme-bg: var(--nb-hover); --bs-theme-bg: var(--nb-hover); }
.fg-primary { color: var(--nb) !important; }
a { color: var(--nb); }

/* ---------- Layout ---------- */
.app { display: flex; min-height: 100dvh; }
.sidebar { width: 250px; background: var(--nb-dark); color: #cfe0f5; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100dvh; flex-shrink: 0; z-index: 30; }
.sb-backdrop { display: none; }
@media (width < 1024px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: none; }
  .sb-backdrop.open { display: block; position: fixed; inset: 0; background: rgb(10 31 60 / .45); z-index: 25; }
}
.sb-brand { padding: 1.4rem 1.4rem 1rem; }
.sb-brand a { font-size: 2.3rem; font-weight: 800; color: #fff; text-decoration: none; letter-spacing: -1px; line-height: 1; }
.sb-brand a span { color: var(--nb); }
.sb-brand small { display: block; text-transform: uppercase; letter-spacing: .15em; font-size: .65rem; color: #5aa9ff; margin-top: .3rem; }
.sb-nav { padding: .4rem .75rem; overflow-y: auto; flex: 1; }
.sb-nav a { display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem; border-radius: .6rem; color: #cfe0f5; text-decoration: none; margin-bottom: 2px; font-weight: 500; }
.sb-nav a:hover { background: rgb(255 255 255 / .06); color: #fff; }
.sb-nav a.active { background: #fff; color: var(--nb-dark); font-weight: 700; }
.sb-nav a.active i { color: var(--nb); }
.sb-nav i { font-size: 1.05rem; width: 1.2rem; }
.badge-dot { margin-left: auto; background: var(--nb); color: #fff; border-radius: 99px; font-size: .7rem; padding: .1rem .5rem; }
.sb-credit { margin: .75rem; padding: .9rem 1rem; background: rgb(255 255 255 / .06); border-radius: .8rem; }
.sb-credit small { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: #8fb4dd; }
.sb-credit .v { font-size: 1.35rem; font-weight: 800; color: #fff; margin: .15rem 0 .5rem; }
.sb-credit .nb-progress { background: rgb(255 255 255 / .12); }
.sb-user { padding: .5rem 1.4rem 1.2rem; color: #fff; }
.sb-user .small { color: #5aa9ff; text-decoration: none; }
.sb-link { display: block; color: #cfe0f5 !important; text-decoration: none; margin-top: .6rem; }
.sb-link:hover { color: #fff !important; }

.content { flex: 1; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 1rem; padding: .8rem 2rem; background: #fff; border-bottom: 1px solid var(--nb-line); position: sticky; top: 0; z-index: 10; }
.top-search { position: relative; max-width: 420px; flex: 1; }
.top-search i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: #8a9bb0; }
.top-search input { padding-left: 2.2rem; background: #f4f7fb; border-color: transparent; }
.page { padding: 1.5rem 2rem 3rem; }
@media (width < 576px) { .page, .topbar { padding-inline: 1rem; } }
.demo-note { font-size: .78rem; color: var(--nb-muted); margin-bottom: 1rem; }
h1.h-page { font-size: 1.6rem; font-weight: 800; margin: 0; }
.sub { color: var(--nb-muted); }

/* ---------- Bits ---------- */
.card { border: 1px solid var(--nb-line); border-radius: 1rem; box-shadow: 0 1px 2px rgb(10 31 60 / .03); background: #fff; }
.card-title { font-weight: 700; font-size: 1rem; }
.lbl { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: #8a9bb0; font-weight: 600; display: block; }
.kpi .v { font-size: 1.5rem; font-weight: 800; }
.table { margin: 0; }
.table th { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #8a9bb0; font-weight: 600; white-space: nowrap; }
.table td { vertical-align: middle; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82em; }
.pos { color: #0a9a5a; } .neg { color: #d63c4b; }
.thumb { width: 48px; height: 48px; border-radius: .6rem; background: var(--nb-soft); color: var(--nb); display: grid; place-items: center; font-size: 1.4rem; flex-shrink: 0; }
.thumb.lg { width: 100%; height: 260px; font-size: 6rem; border-radius: 1rem; }
.choice { border: 1.5px solid #e1e8f0; border-radius: .8rem; padding: .8rem 1rem; cursor: pointer; display: block; height: 100%; background: #fafcfe; }
.choice.on { border-color: var(--nb); background: var(--nb-soft); }
.choice b { display: block; } .choice small { color: var(--nb-muted); }
.step { width: 26px; height: 26px; border-radius: 50%; background: #eef3f9; display: inline-grid; place-items: center; font-size: .8rem; font-weight: 700; margin-right: .5rem; }
.chip { display: inline-block; padding: .15rem .6rem; border-radius: 99px; font-size: .72rem; background: var(--nb-soft); color: #0058b3; margin: 0 .2rem .2rem 0; }
.chip.muted { background: #fff; color: inherit; border: 1px solid var(--nb-line); }
.nb-progress { height: 6px; border-radius: 99px; background: #eef3f9; overflow: hidden; }
.nb-progress > div { height: 100%; background: var(--nb); border-radius: 99px; }
.bar-split { display: flex; height: 10px; border-radius: 99px; overflow: hidden; background: #eef3f9; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .35rem; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 1rem 1.4rem; border-left: 2px solid var(--nb-line); margin-left: .4rem; }
.timeline li::before { content: ''; position: absolute; left: -6px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--nb); }
.bars { display: flex; align-items: flex-end; gap: 12px; height: 180px; }
.bars div { flex: 1; text-align: center; font-size: .72rem; color: var(--nb-muted); }
.bars span { display: block; background: var(--nb); border-radius: .4rem .4rem 0 0; margin-bottom: .3rem; }
pre.code { background: var(--nb-dark); color: #d8e7ff; padding: 1rem; border-radius: .8rem; font-size: .8rem; margin: 0; white-space: pre-wrap; }
.border-dashed { border: 1.5px dashed #c9d6e6 !important; background: transparent; }
.notif { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #d63c4b; color: #fff; font-size: .68rem; font-weight: 700; display: grid; place-items: center; }
.nb-toast { position: fixed; right: 1.2rem; bottom: 1.2rem; background: var(--nb-dark); color: #fff; padding: .75rem 1rem; border-radius: .7rem; font-size: .85rem;
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s; z-index: 100; }
.nb-toast.show { opacity: 1; transform: none; }