/* ============================================================
   App-Shell — Desktop-Sidebar + Mobile-Tabbar.
   Ergänzt app.css (Tokens/Komponenten). Light-only, mobile-first.
   ============================================================ */

.app-shell { display: flex; min-height: 100vh; }

/* ---------- Sidebar (Desktop) ---------- */
.side {
  width: 248px; flex: none; background: var(--surface);
  border-right: 1px solid var(--line); padding: var(--s5) var(--s4);
  display: flex; flex-direction: column; gap: var(--s2);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.side__brand { display: flex; align-items: center; gap: 9px; padding: var(--s2) var(--s2) var(--s4); color: var(--accent); }
.side__brand .nm { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.side__brand .nm span { color: var(--accent); }
.side__cta { margin-bottom: var(--s3); }
.side__nav { display: flex; flex-direction: column; gap: 2px; }
.navitem {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  border-radius: var(--r-md); color: var(--text-2); text-decoration: none;
  font-size: var(--fs-base); font-weight: 600; min-height: 46px;
  transition: background .12s, color .12s; position: relative;
}
.navitem svg { width: 21px; height: 21px; flex: none; }
.navitem:hover { background: var(--n100); color: var(--text); }
.navitem.is-active { background: var(--accent-tint); color: var(--accent-ink); }
.navitem__badge {
  margin-left: auto; background: var(--st-over); color: #fff; font-size: 11px;
  font-weight: 700; min-width: 20px; height: 20px; border-radius: 99px;
  padding: 0 6px; display: grid; place-items: center;
}
/* hidden-Attribut muss display:grid schlagen, sonst klebt der Punkt dauerhaft (BUG-009). */
.navitem__badge[hidden], .tabbar__badge[hidden] { display: none; }
.side__foot { margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--line); }
.side__user { display: flex; align-items: center; gap: 10px; padding: 8px; }
.side__user .nm { font-size: var(--fs-sm); font-weight: 600; }
.side__user .rl { font-size: var(--fs-xs); color: var(--text-2); }

/* ---------- Main + Topbar ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s6); background: rgba(246,247,247,.88);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.topbar__titles { min-width: 0; }
.topbar__title { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.02em; }
.topbar__sub { font-size: var(--fs-sm); color: var(--text-2); }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
.content { padding: var(--s6); max-width: 1180px; width: 100%; }

/* ---------- Mobile Tabbar ---------- */
.tabbar { display: none; }

/* ---------- Grids / helpers ---------- */
.grid { display: grid; gap: var(--s4); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.page-actions { display: flex; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s5); }

/* 2-Spalten-Splits (Detail/Editor/Kundendetail) + Karten-Grids — Desktop, mobil gestapelt */
.split { display: grid; gap: var(--s5); align-items: start; }
.kpi-grid { display: grid; gap: var(--s4); }
.cust-grid { display: grid; gap: var(--s4); }
@media (min-width: 901px) {
  .split--right { grid-template-columns: 1fr 320px; }
  .split--left { grid-template-columns: 320px 1fr; }
  .split--editor { grid-template-columns: 1fr 340px; }
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
  .kpi-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .cust-grid { grid-template-columns: repeat(2, 1fr); }
}
.stat { padding: var(--s5); }
.stat__label { font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; }
.stat__value { font-size: var(--fs-3xl); font-weight: 800; letter-spacing: -.02em; margin-top: 4px; }

/* Segment auch als Link-Variante (GET-Filter) */
.segment a {
  display: inline-flex; align-items: center; justify-content: center; flex: 1;
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2);
  padding: 9px 16px; border-radius: 9px; min-height: 40px; text-decoration: none;
  white-space: nowrap; transition: all .14s;
}
.segment a.is-active { background: var(--surface); color: var(--accent-ink); box-shadow: var(--shadow-sm); }

/* ---------- Dual-Layout: Desktop-Tabelle vs. Mobile-Karten ---------- */
.only-mobile { display: none; }
/* .only-desktop sichtbar >900px, .only-mobile sichtbar ≤900px (Toggle im 900er-Block unten) */

/* Desktop-Datentabelle (aus Design „03 Screens Desktop") */
.dt-th {
  display: grid; gap: 14px; align-items: center; padding: 12px 20px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-3); border-bottom: 1px solid var(--line);
}
.dt-tr {
  display: grid; gap: 14px; align-items: center; padding: 15px 20px;
  border-bottom: 1px solid var(--line); cursor: pointer; transition: background .12s;
  font-size: var(--fs-sm); color: inherit; text-decoration: none;
}
.dt-tr:last-child { border-bottom: none; }
.dt-tr:hover { background: var(--surface-2); }
.dt-cell--r { text-align: right; }

/* KPI-Karte (Dashboard / Steuerberater) */
.kpi { padding: var(--s5); }
.kpi__head { display: flex; align-items: center; gap: 12px; }
.kpi__label { font-size: var(--fs-sm); color: var(--text-2); font-weight: 600; }
.kpi__value { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.01em; margin-top: 12px; font-variant-numeric: tabular-nums; }

/* Floating Action Button — NUR Mobil.
   Der Kommentar behauptete das schon immer, die Media-Query fehlte: auf dem Desktop schwebte
   der Knopf 80 px über dem Rand, wo gar keine Tabbar ist, über der er hätte ausweichen müssen.
   Fiel nicht auf, solange ihn niemand benutzte. Am großen Bildschirm gehört die Aktion nach
   oben in die Seite (Design: DTAusgaben hat sie in der Topbar), nicht schwebend an den Rand. */
.fab {
  position: fixed; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 25;
  border-radius: var(--r-pill); height: 54px; padding: 0 24px 0 20px; box-shadow: var(--shadow-lg);
}
@media (min-width: 901px) { .fab { display: none; } }

/* Mini-Bar-Chart (Finanzübersicht) */
.barchart { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
.barchart__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.barchart__bar { width: 100%; background: var(--accent-200); border-radius: 8px 8px 4px 4px; }
.barchart__bar.is-current { background: var(--accent); }
.barchart__lbl { font-size: 11px; color: var(--text-3); font-weight: 600; }

/* Verlauf-Timeline (Beleg-Detail) */
.timeline { display: flex; flex-direction: column; }
.timeline__row { display: flex; gap: 12px; }
.timeline__rail { display: flex; flex-direction: column; align-items: center; }
.timeline__dot { width: 30px; height: 30px; border-radius: 8px; background: var(--accent-tint); color: var(--accent-ink); display: grid; place-items: center; flex: none; }
.timeline__line { width: 2px; flex: 1; background: var(--line); margin-top: 4px; }
.timeline__body { padding: 4px 0 16px; }

/* ---------- Editor: Positions-Felder + Summen ---------- */
.pos-fields { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 8px; margin-top: 8px; align-items: end; }
.pos-fields__total { text-align: right; font-weight: 700; align-self: center; }
.sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); margin-top: var(--s5); align-items: start; }
.pick-select { max-width: 340px; }
.filter-year { min-width: 150px; min-height: 40px; }

/* ---------- Responsive: mobile-first tab bar < 900px ---------- */
@media (max-width: 900px) {
  .side { display: none; }
  .only-desktop { display: none !important; }
  .only-mobile { display: block !important; }
  /* Container, die zugleich .stack sind, behalten Flex (sonst greift der gap nicht). */
  .only-mobile.stack { display: flex !important; flex-direction: column; }
  .content { padding: var(--s4); padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
  .topbar { padding: var(--s4); }
  .topbar__title { font-size: var(--fs-xl); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .tabbar {
    display: flex; justify-content: space-around; position: fixed;
    bottom: 0; left: 0; right: 0; z-index: 30; background: var(--surface);
    border-top: 1px solid var(--line); padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 14px rgba(16,24,40,.04);
  }
  .tabbar__item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: none; border: none; cursor: pointer; text-decoration: none;
    color: var(--text-3); font-size: 11px; font-weight: 600; padding: 4px; position: relative;
  }
  .tabbar__item svg { width: 24px; height: 24px; }
  .tabbar__item.is-active { color: var(--accent-ink); font-weight: 700; }
  .tabbar__badge {
    position: absolute; top: -2px; right: 50%; margin-right: -22px; background: var(--st-over);
    color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px;
    border-radius: 99px; padding: 0 5px; display: grid; place-items: center;
  }
}

/* ---------- Responsive: Phone < 600px ---------- */
@media (max-width: 600px) {
  /* Editor: Positions-Felder gestapelt (volle Breite, atmen statt stauchen), Total volle Breite */
  .pos-fields { grid-template-columns: 1fr !important; gap: var(--s2); }
  .pos-fields > .pos-fields__total { grid-column: 1 / -1; text-align: right; padding-bottom: 0; }
  /* Editor: Rabatt+Summen 2→1 Spalte */
  .sum-grid { grid-template-columns: 1fr !important; }
  /* Editor: Artikel-Select volle Breite */
  .pick-select { max-width: none !important; flex: 1 1 100%; }
  /* Filter-/Eingabe-Leisten: Felder 2-spaltig, Inline-max-width neutralisieren */
  .filter-bar .field { max-width: none !important; flex: 1 1 calc(50% - 6px); }
  .filter-bar .field--wide { flex-basis: 100%; }
  .filter-bar > .select { max-width: none !important; flex: 1 1 calc(50% - 6px); }
  .filter-bar .btn { flex: 1 1 100%; }
  /* Suchleiste in page-actions volle Breite */
  .page-actions .search { max-width: none !important; flex: 1 1 100%; }
  /* Belege-Jahr-Filter auf Mobil volle Breite (nicht abgeschnitten) */
  .filter-year { flex: 1 1 100%; }
  /* Total-Block nicht breiter als Viewport */
  .total-block--row { width: 100%; }
  .total-block--row .total-block { min-width: 0 !important; width: 100%; }
}

/* ---------- Auth pages ---------- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: var(--s5); background: var(--bg); }
.auth-card { width: 100%; max-width: 420px; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--accent); margin-bottom: var(--s5); }
.auth-brand .nm { font-size: var(--fs-xl); font-weight: 800; color: var(--text); }
.auth-brand .nm span { color: var(--accent); }
.form-stack { display: flex; flex-direction: column; gap: var(--s4); }
.totp-qr { display: grid; place-items: center; padding: var(--s4); background: var(--surface-2); border-radius: var(--r-lg); border: 1px solid var(--line); }
.totp-qr img { width: 200px; height: 200px; }
.totp-secret { font-family: ui-monospace, monospace; font-size: var(--fs-sm); text-align: center; letter-spacing: .04em; color: var(--text-2); word-break: break-all; }