/* ============================================================
   Business Navigator — Komponenten-Blueprint
   Quelle: Aktives Designmanifest v1.0 (9468def5)
   Regel: ausschliesslich var(--bn-*) aus tokens.css. Keine
   literalen Designwerte. Jede Komponente = Manifest-Kennung.
   ============================================================ */

/* --- Reset / Basis ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

body {
  font-family: var(--bn-font-ui);
  font-size: var(--bn-type-body-size);
  font-weight: var(--bn-type-body-weight);
  line-height: var(--bn-type-body-lh);
  color: var(--bn-color-ink);
  background: var(--bn-color-canvas);
  -webkit-font-smoothing: antialiased;
}

/* --- Textrollen --------------------------------------------- */
.bn-h1 { font-size: var(--bn-type-h1-size); font-weight: var(--bn-type-h1-weight); line-height: var(--bn-type-h1-lh); letter-spacing: var(--bn-type-h1-track); color: var(--bn-color-ink); margin: 0; }
.bn-h2 { font-size: var(--bn-type-h2-size); font-weight: var(--bn-type-h2-weight); line-height: var(--bn-type-h2-lh); color: var(--bn-color-ink); margin: 0; }
.bn-eyebrow { font-size: var(--bn-type-eyebrow-size); font-weight: var(--bn-type-eyebrow-weight); letter-spacing: var(--bn-type-eyebrow-track); text-transform: uppercase; color: var(--bn-color-gold-deep); }
.bn-meta { font-size: var(--bn-type-meta-size); font-weight: var(--bn-type-meta-weight); color: var(--bn-color-ink-3); }
.bn-wordmark { font-family: var(--bn-font-marketing); font-size: var(--bn-type-wordmark-size); font-weight: var(--bn-type-wordmark-weight); }

/* --- BN-CMP-BUTTON ------------------------------------------ */
.bn-btn {
  display: inline-flex; align-items: center; gap: var(--bn-space-2);
  height: 40px; padding: 11px 20px;
  border: 1px solid transparent; border-radius: var(--bn-radius-pill);
  font-size: 13.5px; font-weight: 600; line-height: 1;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.bn-btn--s { height: 32px; padding: 8px 14px; }
.bn-btn .bn-btn__icon { width: 17px; height: 17px; }
.bn-btn:focus-visible { outline: none; box-shadow: var(--bn-ring-focus); }
.bn-btn:disabled, .bn-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.bn-btn--primary { background: var(--bn-color-gold); color: var(--bn-color-navy-deep); box-shadow: var(--bn-shadow-primary); }
.bn-btn--primary:hover { background: var(--bn-color-gold-deep); }
.bn-btn--secondary { background: var(--bn-color-white); color: var(--bn-color-ink); border-color: var(--bn-color-line); }
.bn-btn--secondary:hover { border-color: var(--bn-color-ink-3); }
.bn-btn--ghost { background: transparent; color: var(--bn-color-ink-2); }
.bn-btn--ghost:hover { background: var(--bn-color-line-soft); }
.bn-btn--icon { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 9px; border: 1px solid var(--bn-color-line); background: var(--bn-color-white); }

/* --- BN-CMP-CARD -------------------------------------------- */
.bn-card { background: var(--bn-color-white); border: 1px solid var(--bn-color-line); border-radius: var(--bn-radius-card); box-shadow: var(--bn-shadow-card); padding: var(--bn-space-5); }
.bn-card__head { display: flex; align-items: center; justify-content: space-between; padding: var(--bn-space-4) var(--bn-space-5); margin: calc(-1 * var(--bn-space-5)) calc(-1 * var(--bn-space-5)) var(--bn-space-5); border-bottom: 1px solid var(--bn-color-line); }
.bn-card__foot { display: flex; justify-content: flex-end; gap: var(--bn-space-2); padding: 14px var(--bn-space-5); margin: var(--bn-space-5) calc(-1 * var(--bn-space-5)) calc(-1 * var(--bn-space-5)); border-top: 1px solid var(--bn-color-line); }
.bn-card__title { font-size: var(--bn-type-card-title-size); font-weight: var(--bn-type-card-title-weight); line-height: var(--bn-type-card-title-lh); color: var(--bn-color-ink); }

/* --- BN-CMP-KPI-LIST · KPI-Kachel --------------------------- */
.bn-kpi { display: flex; flex-direction: column; gap: var(--bn-space-3); background: var(--bn-color-white); border: 1px solid var(--bn-color-line); border-radius: var(--bn-radius-card); box-shadow: var(--bn-shadow-card); padding: 18px; }
.bn-kpi__chip { width: 46px; height: 46px; border-radius: var(--bn-radius-pill); background: var(--bn-color-gold-tint); color: var(--bn-color-gold-deep); display: flex; align-items: center; justify-content: center; }
.bn-kpi__value { font-size: var(--bn-type-metric-size); font-weight: var(--bn-type-metric-weight); line-height: var(--bn-type-metric-lh); color: var(--bn-color-ink); }
.bn-kpi__label { font-size: 12.5px; font-weight: 500; color: var(--bn-color-ink-2); }

/* --- BN-CMP-KPI-LIST · Listenzeile -------------------------- */
.bn-list { display: flex; flex-direction: column; }
.bn-list__row { display: flex; align-items: center; gap: var(--bn-space-3); padding: 13px 18px; border-bottom: 1px solid var(--bn-color-line-soft); }
.bn-list__row:last-child { border-bottom: 0; }
.bn-avatar { width: 38px; height: 38px; border-radius: var(--bn-radius-pill); background: var(--bn-color-gold-tint); color: var(--bn-color-gold-deep); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.bn-list__title { font-size: 13.5px; font-weight: 600; color: var(--bn-color-ink); }
.bn-list__sub { font-size: 11.5px; color: var(--bn-color-ink-3); }

/* --- BN-CMP-TABLE ------------------------------------------- */
.bn-table-wrap { border-radius: var(--bn-radius-card); box-shadow: var(--bn-shadow-card); overflow: hidden; border: 1px solid var(--bn-color-line); }
.bn-table { width: 100%; border-collapse: collapse; background: var(--bn-color-white); }
.bn-table thead th { background: var(--bn-color-canvas); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bn-color-ink-2); text-align: left; padding: 14px 18px; }
.bn-table tbody td { padding: 14px 18px; border-top: 1px solid var(--bn-color-line-soft); font-size: 13.5px; color: var(--bn-color-ink); }

/* --- BN-CMP-FORM -------------------------------------------- */
.bn-field { display: flex; flex-direction: column; gap: var(--bn-space-2); }
.bn-label { font-size: 12.5px; font-weight: 600; color: var(--bn-color-ink); }
.bn-input { height: 40px; padding: 11px 14px; border: 1px solid var(--bn-color-line); border-radius: var(--bn-radius-field); background: var(--bn-color-white); color: var(--bn-color-ink); font: inherit; }
.bn-input:focus-visible { outline: none; box-shadow: var(--bn-ring-focus); border-color: var(--bn-color-info); }
.bn-help { font-size: 11.5px; color: var(--bn-color-ink-3); }
.bn-checkbox { width: 20px; height: 20px; border-radius: var(--bn-radius-select); border: 1px solid var(--bn-color-line); accent-color: var(--bn-color-gold); }
.bn-toggle { width: 40px; height: 22px; border-radius: var(--bn-radius-pill); background: var(--bn-color-line); position: relative; }
.bn-toggle[aria-checked="true"] { background: var(--bn-color-gold); }

/* --- BN-CMP-CHIP-BADGE -------------------------------------- */
.bn-chip { display: inline-flex; align-items: center; gap: var(--bn-space-2); height: 24px; padding: 0 12px; border-radius: var(--bn-radius-pill); font-size: 12px; font-weight: 600; background: var(--bn-color-line-soft); color: var(--bn-color-ink-2); }
.bn-status { display: inline-flex; align-items: center; gap: var(--bn-space-2); height: 24px; padding: 0 12px; border-radius: var(--bn-radius-pill); font-size: 12px; font-weight: 600; }
.bn-status::before { content: ""; width: 7px; height: 7px; border-radius: var(--bn-radius-pill); background: currentColor; }
.bn-status--success { color: var(--bn-color-success); background: rgba(46, 125, 88, .12); }
.bn-status--info    { color: var(--bn-color-info);    background: rgba(47, 111, 237, .12); }
.bn-status--danger  { color: var(--bn-color-danger);  background: rgba(194, 80, 60, .12); }
.bn-badge-pro { background: var(--bn-color-gold-tint); color: var(--bn-color-gold-deep); }
.bn-badge-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--bn-radius-pill); background: var(--bn-color-gold); color: var(--bn-color-navy-deep); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* --- BN-CMP-TABS-EMPTY -------------------------------------- */
.bn-tabs { display: flex; gap: var(--bn-space-5); border-bottom: 1px solid var(--bn-color-line); }
.bn-tab { padding: var(--bn-space-3) 0; font-size: 13.5px; font-weight: 600; color: var(--bn-color-ink-2); border-bottom: 2px solid transparent; }
.bn-tab[aria-selected="true"] { color: var(--bn-color-navy); border-bottom-color: var(--bn-color-gold); }
.bn-empty { display: flex; flex-direction: column; align-items: center; gap: var(--bn-space-4); padding: var(--bn-space-12) var(--bn-space-6); text-align: center; color: var(--bn-color-ink-2); }

/* --- BN-CMP-NOTIFICATION ------------------------------------ */
.bn-note { display: flex; align-items: center; gap: var(--bn-space-3); padding: 13px 18px; border-left: 3px solid transparent; }
.bn-note--unread { border-left-color: var(--bn-color-gold); }
.bn-note__chip { width: 40px; height: 40px; border-radius: var(--bn-radius-pill); background: var(--bn-color-gold-tint); color: var(--bn-color-gold-deep); display: flex; align-items: center; justify-content: center; }
.bn-note__title { font-size: 13.5px; font-weight: 600; color: var(--bn-color-ink); }
.bn-toast { background: var(--bn-color-navy); color: var(--bn-color-white); border-radius: var(--bn-radius-chip); box-shadow: var(--bn-shadow-lift); padding: var(--bn-space-3) var(--bn-space-4); }

/* --- BN-CMP-PAGE-HEADER ------------------------------------- */
.bn-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--bn-space-4); margin-bottom: var(--bn-layout-section-gap); }
.bn-page-header__sub { font-size: 14px; font-weight: 500; color: var(--bn-color-ink-2); margin-top: var(--bn-space-2); }
.bn-page-header__actions { display: flex; gap: var(--bn-space-2); }

/* --- BN-SHELL-APP ------------------------------------------- */
/* Fixe Navigation: Topbar/Sidebar/Footer bleiben, nur .bn-main scrollt. */
.bn-shell { display: grid; grid-template-columns: var(--bn-layout-sidebar-w) 1fr; grid-template-rows: var(--bn-layout-topbar-h) 1fr var(--bn-layout-footer-h); grid-template-areas: "topbar topbar" "sidebar main" "footer footer"; height: 100vh; height: 100dvh; overflow: hidden; }
.bn-topbar { grid-area: topbar; background: var(--bn-color-navy); color: var(--bn-color-white); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--bn-space-5); gap: var(--bn-space-4); z-index: var(--bn-z-topbar); }
.bn-topbar__left { display: flex; align-items: center; gap: var(--bn-space-3); }
.bn-logo { display: flex; align-items: center; gap: var(--bn-space-3); color: var(--bn-color-ink); }
.bn-logo__mark { width: 32px; height: 32px; flex: none; border-radius: var(--bn-radius-select); background: var(--bn-color-gold); color: var(--bn-color-navy); font-family: var(--bn-font-marketing); font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.bn-logo__name { display: flex; flex-direction: column; line-height: 1.1; }
.bn-logo__sub { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--bn-color-ink-3); }
/* Navy-Kontext (Topbar): helle Schrift */
.bn-topbar .bn-logo { color: var(--bn-color-white); }
.bn-topbar .bn-logo__sub { color: rgba(255, 255, 255, .45); }

/* Topbar-Aktionen auf Navy: transluzentes Weiss statt deckend (Alt-Stand-Stil) */
.bn-topbar .bn-btn--icon { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .85); }
.bn-topbar .bn-btn--icon:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .28); color: var(--bn-color-white); }

/* Profil-Pill (Avatar + Name) -> /profil; Gold-Tint bei Hover/aktiv */
.bn-profile-pill { display: inline-flex; align-items: center; gap: var(--bn-space-2); padding: 5px 12px 5px 5px; border-radius: var(--bn-radius-pill); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); color: var(--bn-color-white); font-size: 13px; font-weight: 600; line-height: 1; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.bn-profile-pill:hover, .bn-profile-pill.is-active { background: var(--bn-color-gold-tint); border-color: var(--bn-color-gold); color: var(--bn-color-navy); }
.bn-profile-pill .bn-avatar { width: 28px; height: 28px; font-size: 11px; }
.bn-profile-pill:hover .bn-avatar, .bn-profile-pill.is-active .bn-avatar { background: var(--bn-color-navy); color: var(--bn-color-white); }
.bn-profile-pill__name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-hamburger { display: none; }  /* nur mobil sichtbar (siehe Media-Query) */
.bn-topbar__brand { display: flex; align-items: center; gap: var(--bn-space-3); color: var(--bn-color-white); }
.bn-bell { position: relative; }
.bn-bell .bn-badge-count { position: absolute; top: -6px; right: -6px; }

.bn-sidebar { grid-area: sidebar; background: var(--bn-color-sidebar); border-right: 1px solid var(--bn-color-line); padding: var(--bn-space-4); overflow-y: auto; }
.bn-nav-group-label { font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--bn-color-ink-3); padding: var(--bn-space-4) var(--bn-space-3) var(--bn-space-2); }
.bn-nav-item { display: flex; align-items: center; gap: 11px; padding: 8px 11px; border-radius: var(--bn-radius-field); color: var(--bn-color-ink-2); border-left: 3px solid transparent; }
.bn-nav-item:hover { background: var(--bn-color-line-soft); }
.bn-nav-item--active { background: var(--bn-color-gold-tint); color: var(--bn-color-navy); border-left-color: var(--bn-color-gold); font-weight: 600; }

.bn-main { grid-area: main; padding: var(--bn-layout-content-pad-y) var(--bn-layout-content-pad-x); overflow-y: auto; }
.bn-footer { grid-area: footer; background: var(--bn-color-navy-deep); color: var(--bn-color-ink-3); display: flex; align-items: center; gap: var(--bn-space-5); padding: 0 var(--bn-space-5); font-size: 12px; }
.bn-footer a { color: var(--bn-color-gold-soft); }

/* --- BN-LAY-GRID Helfer ------------------------------------- */
.bn-grid-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bn-grid-gap); }
.bn-grid-two { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--bn-grid-gap); }
.bn-grid-tool { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--bn-grid-gap); }
.bn-section { margin-bottom: var(--bn-layout-section-gap); }

/* --- Mobile-Drawer-Backdrop -------------------------------- */
.bn-backdrop { position: fixed; inset: 0; background: rgba(22, 32, 59, .45); z-index: var(--bn-z-overlay); opacity: 0; visibility: hidden; transition: opacity var(--bn-motion, 200ms) ease; }
body.bn-nav-open .bn-backdrop { opacity: 1; visibility: visible; }

/* --- Responsive (Mobile-Strong) ---------------------------- */
@media (max-width: 768px) {
  .bn-shell { grid-template-columns: 1fr; grid-template-areas: "topbar topbar" "main main" "footer footer"; }
  .bn-hamburger { display: inline-flex; }
  /* Sidebar als Off-Canvas-Drawer */
  .bn-sidebar {
    position: fixed; top: var(--bn-layout-topbar-h); left: 0; bottom: 0;
    width: var(--bn-layout-sidebar-w); z-index: var(--bn-z-drawer);
    transform: translateX(-100%); transition: transform 200ms ease;
    box-shadow: var(--bn-shadow-lift);
  }
  body.bn-nav-open .bn-sidebar { transform: translateX(0); }
  .bn-grid-kpi { grid-template-columns: repeat(2, 1fr); }
  .bn-grid-two { grid-template-columns: 1fr; }
  .bn-grid-tool { grid-template-columns: repeat(2, 1fr); }
  /* Topbar kompakt: Sub-Zeile + Profil-Name ausblenden */
  .bn-logo__sub { display: none; }
  .bn-profile-pill__name { display: none; }
  .bn-profile-pill { padding: 5px; }
}

/* Desktop: kein Backdrop, Sidebar immer sichtbar */
@media (min-width: 769px) {
  .bn-backdrop { display: none; }
}