/*
 * Bennows Hub admin styles.
 * Siehe docs/style-guide.md — Tokens und Page-Layout sind hier verbindlich.
 * Nichts hinzufügen, das nicht im Style-Guide steht.
 */

/* ----------------------------------------------------------------------
 * View Transitions (MPA cross-document).
 *
 * Browser, die das unterstützen (Chrome 126+, Edge, Opera), blenden den
 * gesamten Page-Wechsel weich über — die Bottom-Nav wechselt damit ihre
 * Aktiv-Markierung als sanfter Crossfade statt mit einem harten Reload-
 * Flackern. Firefox / ältere Safari ignorieren die Regel ohne Schaden:
 * der Link wird ganz normal verfolgt.
 *
 * Pro-Element-Morph (z.B. Todo-Row → Detail-Wrap) läuft über
 * `view-transition-name: bnws-todo-{id}`, das im PHP-Template direkt am
 * Element gesetzt wird. Der Browser nimmt vor und nach der Navigation ein
 * Snapshot mit demselben Namen auf und animiert FLIP-Style zwischen den
 * beiden Bounding-Boxen — das gibt den „Todo zoomt auf"-Effekt ohne JS.
 * ---------------------------------------------------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 240ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Todo → Detail-Zoom: das aufzoomende Todo soll länger laufen als der
 * Root-Crossfade, damit es nicht in der Hälfte abrupt verschwindet.
 * `*`-Selector trifft jeden benannten Snapshot (also auch `bnws-todo-42`,
 * `bnws-todo-43`, …), Root wird oben überschrieben. */
::view-transition-old(*),
::view-transition-new(*) {
    animation-duration: 360ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reduced-Motion: kein FLIP-Morph, nur ein dezenter Crossfade. Wir
 * behalten den Crossfade absichtlich — komplettes Deaktivieren via
 * `view-transition-name: none` würde wieder ein hartes Page-Flash
 * geben, was für motion-sensitive User schlechter ist als ein ruhiger
 * 120ms-Fade. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation-duration: 120ms;
        animation-timing-function: linear;
    }
}

/* ----------------------------------------------------------------------
 * Outfit (self-hosted). Datei optional unter
 *   public/assets/fonts/outfit-variable.woff2
 * ablegen (Download: https://fonts.google.com/specimen/Outfit). Erst dann
 * den @font-face-Block reaktivieren — sonst feuert der Browser pro Pageview
 * einen 404. Bis dahin nutzt der System-Stack unten die Default-Schrift.
 * ---------------------------------------------------------------------- */

:root {
    color-scheme: light;
    /* Hub-Tokens (Single-Source-of-Truth, siehe docs/style-guide.md §0) */
    /* Brand-Blau „bennows hub" — Akzent = hub-Wortmarke, Text = navy bennows. */
    --bnws-accent: #037BFC;
    --bnws-accent-dark: #0162D6;
    --bnws-bg: #F4F7FC;
    --bnws-card: #FFFFFF;
    --bnws-surface: #FFFFFF;
    --bnws-text: #0D2349;
    --bnws-muted: #5B6B86;
    --bnws-border: #E2E8F2;

    /*
     * Boows-Theme-Mapping: Boows-Komponenten greifen auf eigene CSS-Custom-Props
     * zurück. Wir mappen sie 1:1 auf unsere Hub-Tokens, damit Tabelle/Popup/
     * Action-Buttons im Bennows-Design erscheinen. Vorgehen beim Tweak siehe
     * docs/style-guide.md §0.
     */
    --boows-col-primary:      var(--bnws-accent);
    --boows-col-primary-rgb:  3, 123, 252;
    --boows-col-primary-80:   #3595FC;
    --boows-col-primary-60:   #68B0FD;
    --boows-col-primary-40:   #9ACAFE;
    --boows-col-primary-30:   #B3D7FE;
    --boows-col-primary-20:   #CDE5FE;
    --boows-col-primary-10:   #E6F2FE;
    --boows-col-primary-5:    #F2F8FF;

    --boows-col-secondary:    var(--bnws-accent-dark);
    --boows-col-accent:       var(--bnws-accent);

    --boows-col-text:         var(--bnws-text);
    --boows-col-text-rgb:     13, 35, 73;
    --boows-col-text-80:      #3D4F6D;
    --boows-col-text-60:      var(--bnws-muted);
    --boows-col-text-40:      #9EA7B6;
    --boows-col-text-20:      var(--bnws-border);
    --boows-col-text-10:      var(--bnws-border);
    --boows-col-text-5:       var(--bnws-bg);

    --boows-surface:          var(--bnws-card);
    --boows-col-bg-light:     var(--bnws-bg);

    /* Inputs folgen dem Hub-Theme (Boows-Default ist #fff → im Dark-Mode hell).
     * var() wird beim Gebrauch aufgelöst → Dark erbt automatisch via --bnws-*. */
    --boows-input-bg:         var(--bnws-card);
    --boows-input-border:     var(--bnws-border);

    --boows-col-error:        #c83636;
    --boows-col-error-20:     #f4d7d7;
    --boows-col-error-rgb:    200, 54, 54;
    --boows-col-success:      #2DBB5D;
    --boows-col-success-20:   #D5F0DE;
    --boows-col-success-rgb:  45, 187, 93;

    --boows-radius:           8px;
    --boows-radius-sm:        6px;
    --boows-radius-card:      8px;
    --boows-radius-input:     6px;
    --boows-input-radius:     6px;
    --boows-radius-button:    6px;
    --boows-button-radius:    6px;
    --boows-select-radius:    6px;
    --boows-radius-dropdown:  6px;
    --boows-radius-tag:       4px;
    --boows-radius-checkbox:  4px;
    --boows-default-border-container: 8px;
    --boows-default-border-input:     6px;
    --boows-default-border-pill:      999px;
    --boows-default-border-circle:    50%;
    --boows-border-width:    1px;

    --boows-transition:      150ms ease;
    --boows-font:            'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Höhe der mobilen Top-Bar — als Var, damit Drawer/Backdrop/Main-Padding synchron bleiben. */
    --bnws-mobile-header-h:  60px;
    --bnws-bottom-nav-h:     64px;
}

/* ----------------------------------------------------------------------
 * DARK MODE
 * Single-Source-of-Truth bleiben die --bnws-* Tokens. Wir überschreiben sie
 * (und das Boows-Mapping) für zwei Trigger:
 *   1. [data-theme="dark"]            → manueller Toggle (Header-Button).
 *   2. prefers-color-scheme: dark     → System-Default, sofern NICHT per
 *                                       [data-theme="light"] explizit hell.
 * Die Token-Werte stehen in beiden Selektoren identisch (CSS erlaubt keine
 * Media-/Attribut-Selektoren in einer Regel). Tweak immer in BEIDEN Blöcken.
 * ---------------------------------------------------------------------- */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bnws-accent: #3B95FF;
    --bnws-accent-dark: #5BA8FF;
    --bnws-bg: #0A0F1C;
    --bnws-card: #121A2B;
    --bnws-surface: #162033;
    --bnws-text: #E8EDF6;
    --bnws-muted: #94A2BC;
    --bnws-border: #243049;

    --boows-col-primary-rgb:  59, 149, 255;
    --boows-col-primary-80:   #5BA8FF;
    --boows-col-primary-60:   #357FD6;
    --boows-col-primary-40:   #244C7A;
    --boows-col-primary-30:   #1E3D66;
    --boows-col-primary-20:   #193458;
    --boows-col-primary-10:   #15294A;
    --boows-col-primary-5:    #11203A;

    --boows-col-text-rgb:     232, 237, 246;
    --boows-col-text-80:      #C3CDDD;
    --boows-col-text-60:      var(--bnws-muted);
    --boows-col-text-40:      #6B7A95;
    --boows-col-text-20:      var(--bnws-border);
    --boows-col-text-10:      var(--bnws-border);
    --boows-col-text-5:       #182236;

    --boows-surface:          var(--bnws-card);
    --boows-col-bg-light:     var(--bnws-bg);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bnws-accent: #3B95FF;
        --bnws-accent-dark: #5BA8FF;
        --bnws-bg: #0A0F1C;
        --bnws-card: #121A2B;
        --bnws-surface: #162033;
        --bnws-text: #E8EDF6;
        --bnws-muted: #94A2BC;
        --bnws-border: #243049;

        --boows-col-primary-rgb:  59, 149, 255;
        --boows-col-primary-80:   #5BA8FF;
        --boows-col-primary-60:   #357FD6;
        --boows-col-primary-40:   #244C7A;
        --boows-col-primary-30:   #1E3D66;
        --boows-col-primary-20:   #193458;
        --boows-col-primary-10:   #15294A;
        --boows-col-primary-5:    #11203A;

        --boows-col-text-rgb:     232, 237, 246;
        --boows-col-text-80:      #C3CDDD;
        --boows-col-text-60:      var(--bnws-muted);
        --boows-col-text-40:      #6B7A95;
        --boows-col-text-20:      var(--bnws-border);
        --boows-col-text-10:      var(--bnws-border);
        --boows-col-text-5:       #182236;

        --boows-surface:          var(--bnws-card);
        --boows-col-bg-light:     var(--bnws-bg);
    }
}

/* ----------------------------------------------------------------------
 * Brand-Logo-Swap + Dark-Mode-Toggle-Icon
 * Light = navy-Lockup + Mond-Icon (Angebot: zu dunkel wechseln).
 * Dark  = weißes Lockup + Sonnen-Icon. Beide Trigger (data-theme + System).
 * ---------------------------------------------------------------------- */
/* Doppelte Klasse (Spezifität 0,2,0) → schlägt das spätere
 * `.bnws-brand__logo { display:block }` (0,1,0); sonst zeigt der Light-Mode
 * BEIDE Logos (das spätere base-display:block überschreibt das display:none). */
.bnws-brand__logo.bnws-brand__logo--dark   { display: none; }
.bnws-brand__logo.bnws-brand__logo--light  { display: block; }
.bnws-theme-toggle__icon--light     { display: none; }
.bnws-theme-toggle__icon--dark      { display: inline-flex; }

:root[data-theme="dark"] .bnws-brand__logo--light         { display: none; }
:root[data-theme="dark"] .bnws-brand__logo--dark          { display: block; }
:root[data-theme="dark"] .bnws-theme-toggle__icon--dark   { display: none; }
:root[data-theme="dark"] .bnws-theme-toggle__icon--light  { display: inline-flex; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .bnws-brand__logo--light         { display: none; }
    :root:not([data-theme="light"]) .bnws-brand__logo--dark          { display: block; }
    :root:not([data-theme="light"]) .bnws-theme-toggle__icon--dark   { display: none; }
    :root:not([data-theme="light"]) .bnws-theme-toggle__icon--light  { display: inline-flex; }
}

* { box-sizing: border-box; }
html, body { overflow-x: hidden; }
html { -webkit-text-size-adjust: 100%; }

.bnws-body {
    margin: 0;
    background: var(--bnws-bg);
    color: var(--bnws-text);
    font: 14px/1.45 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.bnws-body--centered {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.bnws-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
}
/*
 * Grid-Tracks defaulten zu `min-content` — ohne `min-width: 0` an den direkten
 * Grid-Kindern pusht ein einzelner langer Inhalt (z. B. Boows-Table-Header,
 * Input-Placeholder, sticky-Sidebar-Width) die ganze Spalte breiter als das
 * Viewport. Siehe docs/style-guide.md §6.
 */
.bnws-shell > .bnws-sidebar,
.bnws-shell > .bnws-main { min-width: 0; }

/* Mobile-Back-Header ist nur auf Mobile sichtbar (Replacement für Logo).
 * Auf Desktop wäre er redundant zur Breadcrumbs/Page-Header. */
.bnws-mobile-back { display: none; }
/* Mobile-Title ersetzt das Logo im Header auf Index-Pages — die Body-H1
 * wird dann via Media-Query unten ausgeblendet, um vertikalen Platz zu sparen. */
.bnws-mobile-title { display: none; }

.bnws-sidebar {
    background: var(--bnws-card);
    color: var(--bnws-text);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    position: sticky; top: 0; align-self: start; height: 100vh;
    border-right: 1px solid var(--bnws-border);
}
.bnws-sidebar__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 4px 14px;
    border-bottom: 1px solid var(--bnws-border);
    flex-shrink: 0;
}
.bnws-drawer {
    display: flex; flex-direction: column;
    gap: 18px;
    flex: 1; min-height: 0;
}
.bnws-burger { display: none; }     /* desktop hidden */
.bnws-backdrop { display: none; }   /* desktop hidden */

.bnws-brand {
    display: flex; align-items: center;
    color: var(--bnws-text); text-decoration: none;
    line-height: 0;
}
.bnws-brand__logo {
    display: block;
    width: auto;
    height: 20px;
    max-width: 100%;
    object-fit: contain;   /* nie verzerren, falls ein Container Breite erzwingt */
}

/* ----------------------------------------------------------------------
 * Header-Tools: Bell + Avatar-Dropdown.
 * Sitzen rechts neben dem Brand im `.bnws-sidebar__head`. Auf Mobile vor
 * dem Burger, auf Desktop direkt rechts (Burger ist dort hidden).
 * ---------------------------------------------------------------------- */
.bnws-headtools {
    display: flex; align-items: center; gap: 8px;
    margin-left: auto;
}
.bnws-notif { position: relative; }
.bnws-bell {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    padding: 0;
    border: 0; background: transparent;
    border-radius: 8px;
    color: var(--bnws-muted);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}
.bnws-bell:hover { background: var(--bnws-bg); color: var(--bnws-text); }
.bnws-bell:focus-visible {
    outline: 2px solid var(--bnws-accent);
    outline-offset: 2px;
}
.bnws-bell .material-icons { font-size: 22px; }
.bnws-bell--has { color: var(--bnws-accent); }
.bnws-bell__badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px;
    background: var(--boows-col-error, #c83636);
    color: #fff;
    font-size: 10px; font-weight: 700; line-height: 16px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--bnws-card);
}
.bnws-bell__badge[hidden] { display: none; }

/* ----------------------------------------------------------------------
 * Notification-Dropdown.
 * Rechts-bündig unter der Bell. Auf sehr schmalen Viewports (< 380px)
 * lassen wir das Panel über die rechte Seite hinausragen, damit nicht
 * der Burger oder die User-Avatar dahinter durchscheinen.
 * ---------------------------------------------------------------------- */
.bnws-notif__panel {
    position: absolute; top: calc(100% + 6px); right: 0;
    width: min(92vw, 380px);
    background: var(--bnws-card);
    border: 1px solid var(--bnws-border);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
    z-index: 60;
    overflow: hidden;
    display: flex; flex-direction: column;
    max-height: min(70vh, 540px);
}
.bnws-notif__panel[hidden] { display: none; }
/*
 * Mobile: Bell sitzt nicht ganz rechts (Avatar dahinter) — `right: 0`
 * gegenüber `.bnws-notif` würde den Panel-rechten-Rand neben den Avatar
 * legen, und 92vw Breite ragt dann links aus dem Viewport heraus.
 * Fix: Panel via `position: fixed` an die Viewport-Kanten kleben.
 */
@media (max-width: 540px) {
    .bnws-notif__panel {
        position: fixed;
        top: calc(var(--bnws-mobile-header-h) + 6px);
        left: 8px; right: 8px;
        width: auto;
        max-height: min(75vh, 540px);
    }
}
.bnws-notif__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--bnws-border);
    background: var(--bnws-bg);
}
.bnws-notif__head strong {
    font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase;
    color: var(--bnws-muted);
}
.bnws-notif__mark-all {
    appearance: none;
    background: transparent;
    border: 0; padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px; font-weight: 600; color: var(--bnws-accent);
    cursor: pointer;
}
.bnws-notif__mark-all:hover  { background: var(--boows-col-primary-10); }
.bnws-notif__mark-all[hidden] { display: none; }

.bnws-notif__body {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto;
}
.bnws-notif__loading,
.bnws-notif__empty {
    padding: 24px 14px;
    text-align: center;
    color: var(--bnws-muted);
    font-size: 13px;
}
.bnws-notif__list { list-style: none; margin: 0; padding: 4px 0; }
.bnws-notif-item + .bnws-notif-item {
    border-top: 1px solid var(--bnws-border);
}
.bnws-notif-item__link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--bnws-text);
}
.bnws-notif-item__link:hover { background: var(--bnws-bg); }
.bnws-notif-item.is-unread .bnws-notif-item__link {
    background: var(--boows-col-primary-10, rgba(3, 123, 252, 0.06));
}
.bnws-notif-item.is-unread .bnws-notif-item__title { font-weight: 600; }
.bnws-notif-item__body {
    display: flex; flex-direction: column;
    min-width: 0;
}
.bnws-notif-item__title {
    font-size: 13.5px; line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.bnws-notif-item__detail {
    font-size: 12px; color: var(--bnws-muted);
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bnws-notif-item__time {
    font-size: 11px; color: var(--bnws-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------
 * Chips für Notification-Typen.
 * Reines Color-Coding: Icon + Label, kompakt, ohne Border (Chip steht im
 * eigenen Hintergrund).
 * ---------------------------------------------------------------------- */
.bnws-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px 3px 6px;
    border-radius: 999px;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
}
.bnws-chip .material-icons { font-size: 14px; }
.bnws-chip--error    { background: rgba(200, 54, 54, 0.12); color: #a72727; }
.bnws-chip--uptime   { background: rgba(217, 119, 6, 0.14); color: #a36000; }
.bnws-chip--feedback { background: rgba(20, 140, 200, 0.14); color: #0a6e9c; }
.bnws-chip--support  { background: var(--boows-col-primary-10, rgba(3, 123, 252, 0.16)); color: var(--bnws-accent, #037BFC); }

.bnws-usermenu { position: relative; }
.bnws-usermenu__trigger {
    appearance: none;
    background: transparent; border: 0; padding: 0;
    cursor: pointer;
    border-radius: 50%;
    line-height: 0;
}
.bnws-usermenu__trigger:focus-visible {
    outline: 2px solid var(--bnws-accent);
    outline-offset: 2px;
}
/*
 * `.bnws-avatar--sm/--lg` müssen NACH `.bnws-avatar` greifen, sonst frisst
 * die spätere Basis-Definition (weiter unten im File für die Profilseite)
 * die hier gesetzten Maße — Header-Avatar wurde dadurch 128px statt 36px.
 * Die Selektoren `[class].bnws-avatar--sm` heben die Spezifität minimal an.
 */
[class].bnws-avatar--sm { width: 36px; height: 36px; }
[class].bnws-avatar__initials--sm { font-size: 14px; font-weight: 600; letter-spacing: 0; }

.bnws-usermenu__panel {
    position: absolute; top: calc(100% + 6px); right: 0;
    min-width: 220px;
    background: var(--bnws-card);
    border: 1px solid var(--bnws-border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    padding: 8px;
    z-index: 60;
    display: flex; flex-direction: column;
    gap: 2px;
}
.bnws-usermenu__panel[hidden] { display: none; }
.bnws-usermenu__head {
    padding: 8px 10px 10px;
    border-bottom: 1px solid var(--bnws-border);
    margin-bottom: 4px;
}
.bnws-usermenu__name { font-weight: 600; font-size: 14px; color: var(--bnws-text); }
.bnws-usermenu__sub  { font-size: 12px; color: var(--bnws-muted); margin-top: 2px; }
.bnws-usermenu__form { margin: 0; }
.bnws-usermenu__item {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 6px;
    background: transparent; border: 0;
    color: var(--bnws-text);
    text-align: left; font: inherit;
    text-decoration: none;
    cursor: pointer;
}
.bnws-usermenu__item:hover { background: var(--bnws-bg); }
.bnws-usermenu__item .material-icons { font-size: 18px; color: var(--bnws-muted); }
.bnws-usermenu__item--danger { color: var(--bnws-muted); }
.bnws-usermenu__item--danger:hover {
    background: rgba(200, 54, 54, 0.08);
    color: var(--boows-col-error, #c83636);
}
.bnws-usermenu__item--danger:hover .material-icons { color: var(--boows-col-error, #c83636); }

/* ----------------------------------------------------------------------
 * Bottom-Nav v2.0.0 — fixed unten, sichtbar nur ≤1023px.
 * Sidebar bleibt auf Desktop, Bottom-Nav ist hidden.
 * ---------------------------------------------------------------------- */
.bnws-bottomnav {
    display: none;
}
@media (max-width: 1023px) {
    .bnws-bottomnav {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0;
        height: calc(var(--bnws-bottom-nav-h) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--bnws-card);
        border-top: 1px solid var(--bnws-border);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
        z-index: 49;
    }
    .bnws-bottomnav__item {
        flex: 1 1 0;
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        gap: 2px;
        position: relative;
        padding: 8px 4px 6px;
        margin: 6px 4px;
        border-radius: 14px;
        background: transparent; border: 0;
        color: var(--bnws-muted);
        text-decoration: none;
        cursor: pointer;
        font: inherit;
        min-width: 0;
        /* Smoothe Wechsel-Animation: Background-/Color-Crossfade + leichter
         * Pop des Icons. Wirkt erst auf den Browser-Render der nächsten Page —
         * in Kombination mit `@view-transition: navigation: auto` (siehe unten)
         * blendet der Browser die ganze Bottom-Nav frame-perfect über. */
        transition: color 200ms ease, background-color 220ms ease, transform 180ms ease;
    }
    .bnws-bottomnav__item:active { transform: scale(0.96); }
    .bnws-bottomnav__item .material-icons {
        font-size: 22px; line-height: 1;
        transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .bnws-bottomnav__label {
        font-size: 11px; font-weight: 500;
        line-height: 1.2;
        max-width: 100%;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* Aktiv-Highlight: voller weicher Background des Items + Accent-Farbe.
     * Statt einer kleinen 2px-Linie obendrüber bekommt das aktive Item jetzt
     * die ganze Pill-Fläche eingefärbt — visuell deutlich klarer auf Mobile
     * (Daumen-Reichweite, kein Hover-State zur Orientierung). */
    .bnws-bottomnav__item.is-active {
        color: var(--bnws-accent);
        background: color-mix(in srgb, var(--bnws-accent) 12%, transparent);
    }
    .bnws-bottomnav__item.is-active::before {
        content: '';
        position: absolute; top: -6px; left: 50%;
        width: 28px; height: 3px;
        background: var(--bnws-accent);
        border-radius: 0 0 2px 2px;
        transform: translateX(-50%);
    }
    .bnws-bottomnav__item.is-active .material-icons { transform: translateY(-1px) scale(1.08); }
    .bnws-bottomnav__item.is-active .bnws-bottomnav__label { font-weight: 600; }
    @media (hover: hover) {
        .bnws-bottomnav__item:hover:not(.is-active) {
            color: var(--bnws-text);
            background: color-mix(in srgb, var(--bnws-text) 5%, transparent);
        }
    }
    /* User mit „reduzierte Bewegungen": Pops + Scales deaktivieren, aber
     * Background-Crossfade darf weiter passieren — der ist informativ, nicht
     * verspielt. */
    @media (prefers-reduced-motion: reduce) {
        .bnws-bottomnav__item,
        .bnws-bottomnav__item .material-icons { transition: color 120ms linear, background-color 120ms linear; transform: none !important; }
    }
    .bnws-bottomnav__badge {
        position: absolute;
        top: 4px; left: calc(50% + 6px);
        min-width: 16px; height: 16px; padding: 0 4px;
        border-radius: 999px;
        background: var(--boows-col-error, #c83636);
        color: #fff;
        font-size: 10px; font-weight: 700; line-height: 16px;
        text-align: center;
        box-shadow: 0 0 0 2px var(--bnws-card);
    }
}

/* ----------------------------------------------------------------------
 * Mehr-Sheet — Slide-up Bottom-Sheet, getriggert vom 5. Bottom-Nav-Slot.
 * Versteckt by default, animiert sich rein wenn `.is-open` gesetzt wird.
 * ---------------------------------------------------------------------- */
.bnws-sheet { display: none; }
.bnws-sheet[hidden] { display: none; }
@media (max-width: 1023px) {
    .bnws-sheet {
        display: block;
        position: fixed; inset: 0;
        z-index: 70;
        pointer-events: none;
    }
    .bnws-sheet[hidden] { display: none; }
    .bnws-sheet__backdrop {
        position: absolute; inset: 0;
        background: rgba(0, 0, 0, 0.4);
        opacity: 0;
        transition: opacity 200ms ease;
    }
    .bnws-sheet__panel {
        position: absolute; left: 0; right: 0; bottom: 0;
        background: var(--bnws-card);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.18);
        padding: 12px 12px calc(env(safe-area-inset-bottom) + 16px);
        max-height: 70vh;
        overflow-y: auto;
        transform: translateY(100%);
        transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
        pointer-events: auto;
    }
    .bnws-sheet.is-open                  { pointer-events: auto; }
    .bnws-sheet.is-open .bnws-sheet__backdrop { opacity: 1; pointer-events: auto; }
    .bnws-sheet.is-open .bnws-sheet__panel    { transform: translateY(0); }
    .bnws-sheet__handle {
        width: 40px; height: 4px;
        margin: 4px auto 12px;
        background: var(--bnws-border);
        border-radius: 999px;
    }
    .bnws-sheet__brand {
        display: flex; align-items: center; justify-content: center;
        padding: 2px 0 14px;
        margin-bottom: 6px;
        border-bottom: 1px solid var(--bnws-border);
    }
    .bnws-sheet__brand .bnws-brand__logo { height: 24px; width: auto; max-width: 70%; }
    .bnws-sheet__list {
        list-style: none; margin: 0; padding: 0;
        display: flex; flex-direction: column; gap: 2px;
    }
    .bnws-sheet__sep {
        height: 1px;
        background: var(--bnws-border);
        margin: 8px 4px;
    }
    .bnws-sheet__form { margin: 0; }
    .bnws-sheet__section {
        display: flex; align-items: center; gap: 10px;
        padding: 12px 12px 4px; margin-top: 4px;
        font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
        color: var(--bnws-muted);
    }
    .bnws-sheet__section .material-icons { font-size: 16px; color: var(--bnws-muted); }
    .bnws-sheet__item--sub { padding-left: 28px; }
    .bnws-sheet__item {
        display: flex; align-items: center; gap: 12px;
        width: 100%;
        padding: 14px 12px;
        border-radius: 8px;
        background: transparent; border: 0;
        color: var(--bnws-text);
        text-align: left; font: inherit; font-size: 15px;
        text-decoration: none;
        cursor: pointer;
    }
    .bnws-sheet__item:hover, .bnws-sheet__item:focus-visible { background: var(--bnws-bg); }
    .bnws-sheet__item .material-icons { font-size: 20px; color: var(--bnws-muted); }
    .bnws-sheet__item--danger { color: var(--bnws-muted); }
    .bnws-sheet__item--danger:hover {
        background: rgba(200, 54, 54, 0.08);
        color: var(--boows-col-error, #c83636);
    }
    .bnws-sheet__item--danger:hover .material-icons { color: var(--boows-col-error, #c83636); }
    .bnws-sheet__badge {
        margin-left: auto;
        min-width: 20px; padding: 1px 8px;
        border-radius: 999px;
        background: var(--boows-col-error, #c83636);
        color: #fff;
        font-size: 11px; font-weight: 700; line-height: 16px;
        text-align: center;
    }
    .bnws-sheet__foot {
        display: flex; justify-content: center;
        padding: 12px 4px 0;
    }
    body.bnws-sheet-open { overflow: hidden; }
}

/* Nav nimmt den verfügbaren Platz und scrollt bei Bedarf in sich selbst, damit
 * die Sidebar (position:sticky, height:100vh) als Ganzes stehen bleibt und der
 * Foot (Version/Tools) immer sichtbar unten klebt — auch bei langem Menü. */
.bnws-nav { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.bnws-nav-item {
    color: var(--bnws-text);
    text-decoration: none;
    padding: 9px 12px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    display: flex; align-items: center; gap: 8px;
    transition: background-color 150ms ease, color 150ms ease;
}
.bnws-nav-item__label { flex: 1 1 auto; min-width: 0; }
.bnws-nav-item__badge {
    flex: 0 0 auto;
    min-width: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--boows-col-error, #c83636);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}
.bnws-nav-item.is-active .bnws-nav-item__badge { background: var(--bnws-accent); color: #fff; }
.bnws-nav-item:hover { background: var(--bnws-bg); }
.bnws-nav-item.is-active {
    background: var(--boows-col-primary-10);
    color: var(--bnws-accent);
}
.bnws-nav-item--logout {
    color: var(--bnws-muted);
    background: none; border: none; width: 100%;
    text-align: left; font: inherit;
    cursor: pointer;
}
.bnws-nav-item--logout:hover { color: var(--boows-col-error); background: rgba(200, 54, 54, 0.06); }

/* Überpunkt „Infrastruktur": ausklappbare Nav-Gruppe via native <details>. */
.bnws-nav-group { display: flex; flex-direction: column; gap: 2px; }
.bnws-nav-group > summary {
    list-style: none;
    cursor: pointer;
}
.bnws-nav-group > summary::-webkit-details-marker { display: none; }
.bnws-nav-group > summary::marker { content: ""; }
.bnws-nav-group__chevron {
    flex: 0 0 auto;
    font-size: 20px;
    color: var(--bnws-muted);
    transition: transform 150ms ease;
}
.bnws-nav-group[open] > summary .bnws-nav-group__chevron { transform: rotate(180deg); }
.bnws-nav-sub {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 2px 10px;
    padding-left: 12px;
    border-left: 2px solid var(--bnws-border, #ececf3);
}
.bnws-nav-subitem { font-size: 13.5px; padding: 8px 12px; }

/* Version-Pill am Sidebar-Fuß — dezent, anklickbar wirkt nicht nötig. */
.bnws-sidebar-foot {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--bnws-border);
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
}
.bnws-sidebar-foot__version {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; width: 100%;
}
/* Item 8: Auf Desktop wandern die Headtools (Theme/Glocke/Avatar) per JS an
 * den Fuß. Dann Fuß als Spalte (Tools oben, Version unten) und Dropdowns nach
 * OBEN/RECHTS öffnen (sonst aus dem Viewport bzw. links aus der Sidebar). */
.bnws-sidebar-foot:has(.bnws-headtools) { flex-direction: column; align-items: stretch; gap: 12px; }
.bnws-sidebar-foot .bnws-headtools { margin-left: 0; justify-content: flex-start; gap: 6px; }
.bnws-sidebar-foot .bnws-usermenu__panel,
.bnws-sidebar-foot .bnws-notif__panel { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; }
.bnws-sidebar-foot__label {
    font-size: 10px; letter-spacing: .8px; text-transform: uppercase;
    color: var(--bnws-muted);
}
.bnws-version-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600;
    padding: 4px 8px; border-radius: 999px;
    background: var(--boows-col-primary-10);
    color: var(--bnws-accent);
    font-variant-numeric: tabular-nums;
}
.bnws-version-pill__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--boows-col-success);
}

.bnws-main { padding: 24px; }

.bnws-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
}
.bnws-page-title { font-size: 28px; font-weight: 600; margin: 0; }
.bnws-page-subtitle { color: var(--bnws-muted); margin: 4px 0 0; }

.bnws-card {
    background: var(--bnws-card);
    border: 1px solid var(--bnws-border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    padding: 24px;
    min-width: 0;
}
.bnws-card--login { width: 360px; }

.bnws-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 0;
}
.bnws-stat {
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px; row-gap: 2px;
    background: var(--bnws-card);
    border: 1px solid var(--bnws-border);
    border-radius: 16px;
    padding: 18px 20px;
    text-decoration: none; color: var(--bnws-text);
    position: relative; overflow: hidden;
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.bnws-stat::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--stat-accent, var(--bnws-accent));
}
.bnws-stat:hover {
    border-color: var(--stat-accent, var(--bnws-accent));
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}
.bnws-stat__icon {
    grid-row: 1 / 3;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: color-mix(in srgb, var(--stat-accent, var(--bnws-accent)) 14%, transparent);
    color: var(--stat-accent, var(--bnws-accent));
}
.bnws-stat__icon .material-icons { font-size: 26px; }
.bnws-stat__body { grid-column: 2; display: contents; }
.bnws-stat-value {
    font-size: 32px; font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--bnws-text);
}
.bnws-stat-label {
    color: var(--bnws-muted);
    font-size: 13px; font-weight: 500;
    letter-spacing: 0.2px;
}

/* Charts */
.bnws-chart-card {
    background: var(--bnws-card); border: 1px solid var(--bnws-border);
    border-radius: 16px; padding: 22px 24px 18px; margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(15,16,40,0.03), 0 8px 24px rgba(15,16,40,0.04);
}
.bnws-chart-card .bnws-section-title {
    margin: 0 0 12px;
    font-size: 15px;
    color: var(--bnws-text);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}
.bnws-chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 16px;
}
/*
 * Wide-Variante für Line-Charts (Aktivität + Audit-Verlauf nebeneinander).
 * Min-Spaltenbreite ist großzügiger als bei den Donuts, damit ein Line-Chart
 * mit Y-Achse + Legende nicht in eine zu schmale Spalte gequetscht wird —
 * unterhalb von ~860 px Viewport fällt es automatisch auf einspaltig zurück.
 * `min(420px, 100%)` verhindert horizontalen Overflow auf schmalen Viewports:
 * ohne den Wrap würde minmax(420px, 1fr) auf einem 360 px Phone-Screen ein
 * 420 px breites Grid-Item erzwingen und die Card über den Screen ragen.
 */
.bnws-chart-grid--wide {
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}

/*
 * App-Card-Grid (Top-Todos + Uptime) — Mobile: stacked; ab Desktop zwei
 * gleich breite Spalten, damit der obere Bereich des Dashboards nicht zwei
 * volle Block-Reihen kostet.
 */
.bnws-app-grid {
    display: grid; grid-template-columns: 1fr; gap: 16px;
    margin: 24px 0 16px;
}
@media (min-width: 1024px) {
    .bnws-app-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* SVG-Charts (inline, kein Chart.js) */
.bnws-chart-wrap { width: 100%; }
.bnws-chart {
    width: 100%; height: auto; display: block;
    /* Aspect 2:1 (viewBox 1000x500). Größere min-height (260) damit das Chart
     * auch auf schmalen Cards visuell präsent ist — App-Look à la Stripe. */
    min-height: 260px;
}

/*
 * Line-Charts in der wide-Grid (Aktivität + Audit-Verlauf): SVG behält Aspect
 * 2:1, wird aber per max-height gedeckelt, damit die Cards Side-by-Side nicht
 * unterschiedliche Höhen bekommen (preserveAspectRatio meet zentriert). Mobile
 * bleibt unverändert (full-bleed).
 */
@media (min-width: 860px) {
    .bnws-chart-grid--wide .bnws-chart {
        max-height: 280px;
        min-height: 200px;
    }
}
.bnws-chart-gridline {
    stroke: var(--bnws-border); stroke-width: 1; shape-rendering: crispEdges;
    opacity: 0.7;
}
.bnws-chart-axis {
    font: 600 16px var(--boows-font, sans-serif);
    fill: var(--bnws-muted);
}
.bnws-chart-legend {
    display: flex; flex-wrap: wrap; gap: 16px;
    margin-top: 12px; font-size: 13px; color: var(--bnws-muted);
}
.bnws-chart-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.bnws-chart-legend-dot {
    width: 12px; height: 12px; border-radius: 4px; display: inline-block;
}

/* Donut-Chart für Verteilungs-Cards. Default: SVG oben, Legende darunter —
 * passt in jede Spalten-Breite, auch wenn die Chart-Card-Grid auf Desktop
 * vier Donuts nebeneinander zeigt. Erst ab `min-width: 1280px` wechseln wir
 * auf das alte 2-Spalten-Layout (SVG | Legende) — bis dahin haben Labels wie
 * „Regression" / „In Arbeit" oft nicht genug Platz und werden abgeschnitten. */
.bnws-donut {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 14px;
    margin-top: 8px;
}
.bnws-donut__svg { width: 100%; max-width: 180px; height: auto; }
.bnws-donut-legend { width: 100%; max-width: 280px; }
@media (min-width: 1280px) {
    .bnws-donut {
        grid-template-columns: 160px 1fr;
        justify-items: stretch;
        align-items: center;
        gap: 18px;
    }
    .bnws-donut__svg { max-width: 160px; }
    .bnws-donut-legend { max-width: none; }
}
.bnws-donut__total {
    font: 700 26px var(--boows-font, sans-serif);
    fill: var(--bnws-text);
}
.bnws-donut__label {
    font: 600 7px var(--boows-font, sans-serif);
    fill: var(--bnws-muted);
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.bnws-donut-legend {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.bnws-donut-legend__row {
    display: grid;
    grid-template-columns: 12px 1fr auto auto;
    gap: 10px; align-items: center;
    font-size: 13px;
}
.bnws-donut-legend__dot {
    width: 12px; height: 12px; border-radius: 3px;
}
.bnws-donut-legend__label {
    color: var(--bnws-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bnws-donut-legend__count {
    font-variant-numeric: tabular-nums; font-weight: 600;
    min-width: 24px; text-align: right;
}
.bnws-donut-legend__pct {
    font-variant-numeric: tabular-nums; color: var(--bnws-muted);
    min-width: 40px; text-align: right; font-size: 12px;
}
@media (max-width: 540px) {
    .bnws-donut {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 16px;
    }
    .bnws-donut__svg { max-width: 200px; }
    .bnws-donut-legend { width: 100%; }
}

.bnws-form { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.bnws-field { display: flex; flex-direction: column; gap: 6px; }
.bnws-label { font-size: 13px; color: var(--bnws-muted); }
.bnws-input {
    border: 1px solid var(--bnws-border); border-radius: 6px;
    padding: 10px 12px; font: inherit; color: inherit; background: var(--bnws-card);
    /* In Flex-Containern (z. B. .bnws-filter-row) sonst min-content =
     * Placeholder-Breite → pusht den Container breiter als Viewport. */
    min-width: 0;
}
.bnws-input:focus { outline: 2px solid var(--bnws-accent); outline-offset: -1px; }

.bnws-btn {
    border: 0; border-radius: 6px; padding: 10px 16px;
    font-weight: 600; cursor: pointer; font: inherit;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px; line-height: 1.2;
}
.bnws-btn .material-icons { display: inline-flex; align-items: center; line-height: 1; }
.bnws-btn--primary { background: var(--bnws-accent); color: #fff; }
.bnws-btn--primary:hover { background: var(--bnws-accent-dark); }

.bnws-alert { padding: 10px 12px; border-radius: 6px; margin: 0; }
.bnws-alert--danger { background: #fde7e9; color: #8a1f2b; }
.bnws-alert--ok { background: #d5f0de; color: #1f6a3a; margin-bottom: 16px; }
.bnws-alert--info { background: var(--boows-col-primary-10); color: var(--bnws-accent); margin-bottom: 16px; }

.bnws-table {
    width: 100%; border-collapse: collapse; margin: 8px 0 16px;
}
.bnws-table th, .bnws-table td {
    text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--bnws-border);
}
.bnws-table th { color: var(--bnws-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.bnws-form--inline { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; margin: 16px 0 24px; }
.bnws-form--inline .bnws-btn { height: 40px; }

/* Tabellen-Scroll-Container — verhindert horizontalen Overflow auf schmalen Viewports. */
.bnws-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -8px;  /* erlaubt Volltext-Wrap im Card-Padding */
    padding: 0 8px;
}
.bnws-table-wrap .bnws-table { min-width: 480px; }

.bnws-filter-row {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px;
}
.bnws-filter-row .bnws-input { padding: 8px 10px; }
.bnws-btn--ghost {
    background: transparent; color: var(--bnws-muted); border: 1px solid var(--bnws-border);
    text-decoration: none; display: inline-flex; align-items: center;
}
.bnws-btn--ghost:hover { color: var(--bnws-text); border-color: var(--bnws-text); }

.bnws-empty {
    text-align: center; padding: 32px 16px; color: var(--bnws-muted);
}
.bnws-empty strong { display: block; color: var(--bnws-text); font-size: 16px; margin-bottom: 4px; }

.bnws-table-meta { margin-top: 12px; color: var(--bnws-muted); font-size: 13px; }

.bnws-kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; margin: 0 0 16px; }
.bnws-kv dt { color: var(--bnws-muted); }
.bnws-kv dd { margin: 0; }
.bnws-section-title { font-size: 14px; font-weight: 600; margin: 16px 0 8px; color: var(--bnws-muted); text-transform: uppercase; letter-spacing: .4px; }
.bnws-message {
    background: var(--bnws-bg); border: 1px solid var(--bnws-border);
    border-radius: 6px; padding: 12px; white-space: pre-wrap; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Freitext (Feedback-Nachricht): proportionale Schrift statt Monospace, Links umbrechen. */
.bnws-message--prose {
    font-family: inherit; font-size: 14px; line-height: 1.6; color: var(--bnws-text);
    word-break: break-word; overflow-wrap: anywhere;
}
.bnws-message--prose a { color: var(--bnws-accent); }
.bnws-back { color: var(--bnws-muted); text-decoration: none; }
.bnws-back:hover { color: var(--bnws-text); }

/* Feedback-Bilder: Thumbnail in der Liste + große Vorschau im Detail. */
.bnws-fb-excerpt { display: flex; align-items: center; gap: 10px; }
.bnws-fb-excerpt-text { min-width: 0; }
.bnws-fb-thumb {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 6px;
    object-fit: cover; border: 1px solid var(--bnws-border); background: var(--bnws-bg);
}
.bnws-fb-image-link { display: inline-block; max-width: 100%; }
.bnws-fb-image {
    max-width: 100%; max-height: 480px; border-radius: 8px;
    border: 1px solid var(--bnws-border); background: var(--bnws-bg);
}

.bnws-logout { margin: 0; }

.bnws-link-button {
    background: transparent; border: 0; padding: 4px 8px; cursor: pointer;
    color: var(--bnws-accent); font: inherit; border-radius: 4px;
}
.bnws-link-button:hover { background: rgba(3, 123, 252,0.08); }
.bnws-muted { color: var(--bnws-muted); }

.bnws-down-comments { list-style: none; padding: 0; margin: 0; }
.bnws-down-comments li {
    border-top: 1px solid var(--bnws-border);
    padding: 12px 0;
}
.bnws-down-comments li:first-child { border-top: 0; }
.bnws-down-comments time { color: var(--bnws-muted); font-size: 12px; }
.bnws-down-comments p { margin: 4px 0 0; white-space: pre-wrap; }

/*
 * Boows-Komponenten-Integration:
 * Boows kommt mit eigenem Layout-Padding und Schriftgrößen. Hier nur das, was
 * nötig ist, damit Tabelle/Popup im Hub-Card-Container nicht doppelt umrahmt
 * wirken. NICHT die Boows-internen Komponenten überschreiben — Tokens (oben)
 * sind der erlaubte Weg.
 */
.bnws-card .boows-table { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; }
.bnws-card .boows-table-data { color: var(--bnws-text); font-size: 14px; }
.bnws-card .boows-action-button { color: var(--bnws-accent); }
.bnws-card .boows-action-button:hover { color: var(--boows-col-primary-80); }
.bnws-card .adm-table-head { color: var(--bnws-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }

/*
 * Zeilen-Rundung: keine Rundung pro Eintrag — nur der letzte Eintrag bekommt
 * unten Radius, damit die Tabelle als ein zusammenhängender Block wirkt.
 */
.bnws-card .boows-table-row { border-radius: 0; }
.bnws-card .boows-table-data .boows-table-row:last-child {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
.bnws-card .boows-table-data .boows-table-row:last-child > .column:first-child  { border-bottom-left-radius: 6px; }
.bnws-card .boows-table-data .boows-table-row:last-child > .column:last-child   { border-bottom-right-radius: 6px; }

/*
 * Action-Spalten-Header: einheitlich nur das `more_horiz`-Icon, kein Text.
 * - Boows zeigt das Icon nur auf < 1024px via media-query, sonst den Spalten-
 *   Titel ("Aktion"). Wir promoten das Icon auf alle Viewports (Style-Guide §6).
 * - Zusätzlich fehlt in boows die `font-feature-settings: 'liga'` für die
 *   Material-Icons-Ligatur — ohne sie rendert das Glyph als Literal-Text.
 */
.boows-table header.adm-table-head .boows-col-actions,
.boows-table header.adm-table-head .scroll-table-action-column,
.boows-table header.adm-table-head .boows-actions-col {
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.boows-table header.adm-table-head .boows-col-actions::before,
.boows-table header.adm-table-head .scroll-table-action-column::before,
.boows-table header.adm-table-head .boows-actions-col::before {
    content: "more_horiz";
    font-family: "Material Icons";
    font-size: 20px;
    line-height: 1;
    color: var(--bnws-muted);
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Bug-Workaround — ohne 'liga' rendert die Font literalen Text. */
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-transform: none;
    direction: ltr;
}

/*
 * Sticky-Header für Boows-Tabellen — der gesamte Tabellen-Block scrollt mit
 * der Seite, nur der Spalten-Header bleibt fixiert. Filter/Suche und
 * Pagination scrollen wie normaler Inhalt mit weg (User-Wunsch).
 * - Boows setzt `header.adm-table-head { position: sticky; top: 0 }` bereits
 *   (table.css:214). Sobald die nächste scroll-Box der Viewport ist, klebt
 *   der Header relativ dazu.
 * - Mobile: Top-Offset für die fixe Mobile-Topbar (siehe Media-Query unten).
 * - Boows-eigene Höhen-Begrenzungen (`scroll-table .data-container { max-height }`)
 *   werden aufgehoben — sonst entstünde wieder ein innerer Scroll mit Filter
 *   und Pagination außerhalb davon.
 */
.bnws-card .boows-table {
    max-height: none;
    display: block;
}
.bnws-card .boows-table .scroll-container {
    overflow: visible;
}
.bnws-card .boows-table.scroll-table .data-container,
.bnws-card .boows-table .data-container {
    max-height: none;
    overflow: visible;
}
.bnws-card .boows-table header.adm-table-head {
    top: 0;
}

/* Skeleton (während Boows-JS lädt) sanft an unsere Farben anpassen */
.bnws-card .boows-table-skeleton { background: transparent; }
.bnws-card .boows-skel-cell,
.bnws-card .boows-skel-pill,
.bnws-card .boows-skel-search,
.bnws-card .boows-skel-page { background: var(--bnws-bg); border-color: var(--bnws-border); }

/* ----------------------------------------------------------------------
 * Boows hardcoded-#fff Dark-Fixes
 * Einige Boows-Komponenten setzen `background:#fff` LITERAL (nicht über eine
 * Variable) → im Dark-Mode weiße Flächen. Wir mappen sie auf das theme-aware
 * --bnws-card (Light = #FFFFFF = unverändert, Dark = dunkle Card). Greift in
 * BEIDEN Triggern, weil var() erst beim Gebrauch aufgelöst wird.
 * ---------------------------------------------------------------------- */
/* Tabellen-Toolbar-Buttons (Export / Spalten) — table.css: background-color:#fff.
 * `button.filter-column` (Spalten-Sichtbarkeit) teilt sich die #fff-Regel mit
 * .boows-table-action-icon, wurde aber bislang nicht gemappt → blieb im Dark weiß. */
.boows-table .search-table-box .table-btn-box .boows-table-action-icon,
.boows-table .search-table-box .table-btn-box button.filter-column {
    background-color: var(--bnws-card);
    border-color: var(--bnws-border);
    color: var(--bnws-muted);
}
.boows-table .search-table-box .table-btn-box .boows-table-action-icon:hover,
.boows-table .search-table-box .table-btn-box button.filter-column:hover {
    background-color: var(--bnws-bg);
    color: var(--bnws-text);
}
.boows-table .search-table-box .table-btn-box .boows-table-action-icon[disabled]:hover {
    background-color: var(--bnws-card);
    border-color: var(--bnws-border);
    color: var(--bnws-muted);
}
/* Tab-Inhaltskarte (Settings/Profil) — tabs.css: background:#fff */
.tab_item_content {
    background: var(--bnws-card);
    border-color: var(--bnws-border);
}
:root[data-theme="dark"] .tab_item_content { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .tab_item_content { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); }
}
/* Such-Eingabefeld der Tabelle: explizit aufs Hub-Theme (Boows-Input-Default). */
.boows-table .search-table-box input.search-table {
    background: var(--bnws-card);
    color: var(--bnws-text);
    border-color: var(--bnws-border);
}
/* Sticky-Action-Spalte beim horizontalen Scrollen — table.css ~607/613 backt
 * `rgba(255,255,255,.92)` (Body) bzw. einen hellen col-bg-Fallback (Header)
 * ein → im Dark-Mode bleibt die eingefrorene Spalte weiß. Body auf --bnws-card,
 * Header auf die Kopf-Farbe (col-text-20 = --bnws-border) mappen. */
.boows-table.boows-has-sticky-actions.boows-sticky-actions-active .scroll-table-action-column {
    background: var(--bnws-card);
}
.boows-table.boows-has-sticky-actions.boows-sticky-actions-active header.adm-table-head .scroll-table-action-column {
    background: var(--boows-col-text-20);
}
/* Tabbar primary-Variante (z. B. Einstellungen) — tabs.css ~305/310 fixiert die
 * aktive Pille auf #fff und die aktive Schrift auf col-text. Im Dark kippt
 * col-text auf hell → weiße Pille mit fast weißer Schrift (unlesbar). Auf
 * flippende Tokens mappen: hell = weiße Pille + Navy-Text (wie gehabt), dunkel
 * = Card-Pille + heller Text. */
.boows_tab_container.boows-tab-style-primary {
    --boows-tabbar-highlight-bg: var(--bnws-card);
    --boows-tabbar-active-color: var(--bnws-text);
}

/* Boows-Popup */
.boows-popup { background: var(--bnws-card); border-radius: 8px; }
.boows-popup-content { padding: 24px; }
.boows-popup h1, .boows-popup h2 { color: var(--bnws-text); margin-top: 0; }

/* Tabbar (Status-Filter, server-rendered) */
.bnws-tabbar {
    display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px;
    border-bottom: 1px solid var(--bnws-border); padding-bottom: 4px;
}
.bnws-tabbar-item {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 6px;
    color: var(--bnws-muted); text-decoration: none; font-weight: 500;
}
.bnws-tabbar-item:hover { color: var(--bnws-text); background: var(--bnws-bg); }
.bnws-tabbar-item.is-active { color: #fff; background: var(--bnws-accent); }
.bnws-tabbar-count {
    font-size: 12px; padding: 1px 7px; border-radius: 999px;
    background: rgba(0,0,0,0.08); color: inherit;
}
.bnws-tabbar-item.is-active .bnws-tabbar-count { background: rgba(255,255,255,0.25); }

/* Status-Badges */
.bnws-badge {
    display: inline-block; padding: 2px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600; letter-spacing: .2px;
}
.bnws-badge--open        { background: #FFE9D6; color: #8A4B1F; }
.bnws-badge--regressed   { background: #FDE7E9; color: #8A1F2B; }
.bnws-badge--in_progress { background: #DDE5FC; color: #1F3B8A; }
.bnws-badge--resolved    { background: #D5F0DE; color: #1F6A3A; }
.bnws-badge--closed      { background: var(--bnws-border); color: var(--bnws-muted); }
.bnws-badge--known       { background: #DDE5FC; color: #1F3B8A; }
.bnws-badge--muted       { background: var(--bnws-border); color: var(--bnws-muted); }
.bnws-badge--error       { background: #FDE7E9; color: #8A1F2B; }
.bnws-badge--warning     { background: #FFEFCD; color: #7A5400; }
.bnws-badge--fatal       { background: #4D0F18; color: #FFE0E5; }
.bnws-badge--info        { background: #DDE5FC; color: #1F3B8A; }
.bnws-badge--plugin      { background: #E7DEFF; color: #4A2A8A; }

/* Detail-Page Grid (Support nutzt's noch; Errors hat die Status-Bar oben statt Sidebar) */
.bnws-detail-grid {
    display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 24px;
    margin-bottom: 24px;
}
@media (max-width: 720px) {
    .bnws-detail-grid { grid-template-columns: minmax(0,1fr); }
}
.bnws-detail-main { min-width: 0; }
.bnws-detail-side { min-width: 0; }
.bnws-status-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.bnws-inline-form { margin: 0; }

/*
 * Mobile: 4 Status-Wechsel-Buttons müssen in EINE Zeile passen. Wir verteilen
 * den verfügbaren Platz gleichmäßig (flex:1) und reduzieren Padding/Font-Size.
 * Unter 480 px Viewport blenden wir das Icon aus, damit „Regression" als
 * längstes Label nicht zu „Regres…" abgeschnitten wird.
 */
@media (max-width: 720px) {
    .bnws-status-actions {
        flex-wrap: nowrap;
        gap: 6px;
    }
    .bnws-inline-form { flex: 1 1 0; min-width: 0; }
    .bnws-status-actions__btn {
        width: 100%;
        justify-content: center;
        padding: 6px 8px;
        gap: 4px;
        font-size: 12px;
        min-width: 0;
    }
    .bnws-status-actions__btn .material-icons { font-size: 16px; }
    .bnws-status-actions__btn > span:not(.material-icons) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
    }
}
@media (max-width: 480px) {
    .bnws-status-actions__btn { padding: 6px 4px; }
    .bnws-status-actions__btn .material-icons { display: none; }
}

/* Große Status-Pill mit Icon (Page-Header action-Slot) */
.bnws-badge--lg {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; padding: 6px 14px;
}
.bnws-badge--lg .material-icons { font-size: 18px; }

/*
 * Status-Wechsel-Button — trägt im Ruhezustand bereits den Farbakzent des
 * Ziel-Status (gleiche Palette wie die zugehörige Badge). Hover verstärkt
 * den Akzent über einen invertierten Look (gefüllt). So sieht der User
 * sofort, in welchen Zustand der Klick führt.
 */
.bnws-status-actions__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    font: inherit; font-weight: 600; font-size: 13px;
    cursor: pointer;
    background: var(--bnws-bg);
    color: var(--bnws-text);
    transition: filter .12s ease, transform .12s ease;
}
.bnws-status-actions__btn:hover { filter: brightness(0.96); }
.bnws-status-actions__btn:active { transform: translateY(1px); }
.bnws-status-actions__btn .material-icons { font-size: 18px; }

.bnws-status-actions__btn--open      { background: #FFE9D6; color: #8A4B1F; border-color: #F4D2B0; }
.bnws-status-actions__btn--regressed { background: #FDE7E9; color: #8A1F2B; border-color: #F4C7CC; }
.bnws-status-actions__btn--known     { background: #DDE5FC; color: #1F3B8A; border-color: #BFCBF2; }
.bnws-status-actions__btn--resolved  { background: #D5F0DE; color: #1F6A3A; border-color: #B6DFC4; }
.bnws-status-actions__btn--muted     { background: var(--bnws-border); color: var(--bnws-muted); border-color: var(--bnws-border); }
.bnws-status-actions__btn--closed    { background: var(--bnws-border); color: var(--bnws-muted); border-color: var(--bnws-border); }

/* Notes-Liste */
.bnws-notes { list-style: none; padding: 0; margin: 0 0 24px; }
.bnws-notes-item {
    border-left: 3px solid var(--bnws-accent);
    background: var(--bnws-bg);
    border-radius: 4px;
    padding: 10px 14px;
    margin-bottom: 8px;
}
.bnws-notes-item time { color: var(--bnws-muted); font-size: 12px; }
.bnws-notes-item p { margin: 4px 0 0; white-space: pre-wrap; }
.bnws-notes-item--system { border-left-color: var(--bnws-muted); background: transparent; padding-left: 14px; }
.bnws-notes-item--system p { color: var(--bnws-muted); font-style: italic; }
.bnws-notes-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.bnws-notes-actions {
    display: inline-flex; align-items: center; gap: 4px;
    opacity: 0; transition: opacity 120ms ease;
}
.bnws-notes-item:hover .bnws-notes-actions,
.bnws-notes-item:focus-within .bnws-notes-actions { opacity: 1; }
.bnws-notes-actions .bnws-inline-form { display: inline-flex; }
.bnws-link-button--danger { color: #c83636; }
.bnws-link-button--danger:hover { background: rgba(200,54,54,0.08); }
.bnws-form--edit { margin: 6px 0 0; gap: 8px; }
.bnws-form--edit .bnws-input { width: 100%; }
.bnws-form-actions { display: flex; gap: 8px; }

/* Inline-Tabbar (innerhalb einer Detail-Page) */
.bnws-tabbar--inline { border-bottom: 0; margin-bottom: 16px; }

/* Events-Liste — als Akkordeons (native <details>) */
.bnws-events {
    display: flex; flex-direction: column; gap: 8px;
    margin: 0; padding: 0; min-width: 0;
}
.bnws-events-item {
    background: var(--bnws-card);
    border: 1px solid var(--bnws-border);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 150ms ease, border-color 150ms ease;
}
.bnws-events-item[open] {
    border-color: var(--bnws-accent);
    box-shadow: 0 4px 14px rgba(20,20,50,0.06);
}
.bnws-events-summary {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    flex-wrap: wrap;
    min-width: 0;
}
.bnws-events-summary::-webkit-details-marker { display: none; }
.bnws-events-summary::marker { content: ""; }
.bnws-events-summary:hover { background: var(--bnws-bg); }
.bnws-events-summary__primary {
    display: inline-flex; align-items: center; gap: 10px;
    flex: 0 0 auto;
}
.bnws-events-summary__time {
    color: var(--bnws-text); font-weight: 500; font-size: 13px;
    white-space: nowrap;
}
.bnws-events-summary__site {
    flex: 1 1 200px; min-width: 0;
    font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bnws-events-summary__chevron {
    flex: 0 0 auto;
    color: var(--bnws-muted); font-size: 20px;
    transition: transform 200ms ease;
}
.bnws-events-item[open] .bnws-events-summary__chevron { transform: rotate(180deg); }
.bnws-events-body {
    padding: 0 14px 14px;
    border-top: 1px solid var(--bnws-border);
    margin-top: -1px;
    min-width: 0;
}
.bnws-events-body > * + * { margin-top: 10px; }
.bnws-events-body > :first-child { padding-top: 12px; }
.bnws-events-loc {
    margin: 0;
    font-size: 13px;
}
.bnws-events-loc code {
    background: var(--bnws-bg);
    border: 1px solid var(--bnws-border);
    border-radius: 4px;
    padding: 2px 6px;
    word-break: break-all;
    display: inline-block;
    max-width: 100%;
}
.bnws-events-body .bnws-message {
    overflow-x: auto;
    max-width: 100%;
    word-break: break-word;
}

/* Sites-Breakdown im Issue-Detail */
.bnws-site-list { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 4px; }
.bnws-site-list li {
    background: var(--bnws-bg); border: 1px solid var(--bnws-border);
    border-radius: 4px; padding: 6px 10px; font-size: 13px;
    display: flex; justify-content: space-between; align-items: baseline;
}

/* ----------------------------------------------------------------------
 * Block-Button + Gradient-Banner (Behance-inspirierter Akzent)
 * ---------------------------------------------------------------------- */
.bnws-btn--block { width: 100%; padding: 12px 16px; font-size: 15px; }

.bnws-banner {
    background: linear-gradient(135deg, var(--bnws-accent) 0%, var(--bnws-accent-dark) 100%);
    color: #fff; padding: 20px 24px; border-radius: 12px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-bottom: 24px; box-shadow: 0 8px 24px rgba(3, 123, 252,0.25);
}
.bnws-banner__copy { display: flex; flex-direction: column; gap: 4px; }
.bnws-banner__eyebrow {
    font-size: 12px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .6px; opacity: .85;
}
.bnws-banner__title { font-size: 16px; font-weight: 500; margin: 0; }
.bnws-banner__action {
    background: #fff; color: var(--bnws-accent); padding: 8px 16px;
    border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 13px;
    white-space: nowrap;
}
.bnws-banner__action:hover { background: #E7F1FF; }

/* ----------------------------------------------------------------------
 * Login (mobile-first): voll-violette Stage mit zentrierter weißer Card.
 * Auf Desktop ≥1024px wird die Bühne zur 2-Spalten-Ansicht — links das
 * Branding (Voll-Lila + Copy), rechts die Card auf weißem Grund.
 * Mobil bleibt der Brand-Aside ausgeblendet (Stage füllt das Viewport voll).
 * ---------------------------------------------------------------------- */
.bnws-login-body { min-height: 100vh; margin: 0; }
.bnws-login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
}
.bnws-login-brand { display: none; }

.bnws-login-stage {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--bnws-accent) 0%, var(--bnws-accent-dark) 100%);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 32px 16px; gap: 24px;
}
.bnws-login-logo {
    width: 200px; height: auto;
    display: block;
    filter: drop-shadow(0 6px 24px rgba(0,0,0,0.18));
}
.bnws-login-card {
    width: 100%; max-width: 420px;
    background: var(--bnws-card);
    border-radius: 12px;
    padding: 32px 28px;
    box-shadow: 0 18px 40px rgba(20, 20, 50, 0.12);
}
.bnws-login-title { font-size: 24px; font-weight: 700; margin: 0 0 4px; color: var(--bnws-text); }
.bnws-login-sub   { margin: 0 0 20px; font-size: 14px; }
.bnws-login-divider {
    display: flex; align-items: center; gap: 12px;
    color: var(--bnws-muted); font-size: 12px;
    margin: 16px 0;
}
.bnws-login-divider::before,
.bnws-login-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--bnws-border);
}
.bnws-login-recovery { margin-top: 14px; }
.bnws-login-recovery__form { margin-top: 10px; }
.bnws-login-recovery__hint { margin-top: 8px; }
.bnws-login-back { margin-top: 12px; }
.bnws-login-foot {
    color: rgba(255,255,255,0.7);
    font-size: 12px; letter-spacing: .3px;
    text-align: center;
}
@media (min-width: 480px) {
    .bnws-login-logo { width: 220px; }
}
@media (min-width: 768px) {
    .bnws-login-card  { padding: 40px 36px; }
    .bnws-login-title { font-size: 28px; }
    .bnws-login-stage { padding: 48px 24px; gap: 32px; }
}

/* Desktop split: links Brand-Aside (lila), rechts neutrale Stage mit Card. */
@media (min-width: 1024px) {
    .bnws-login-shell { grid-template-columns: minmax(360px, 1fr) minmax(0, 1fr); }
    .bnws-login-brand {
        display: flex; flex-direction: column;
        gap: 32px;
        padding: 56px 56px;
        background: linear-gradient(135deg, var(--bnws-accent) 0%, var(--bnws-accent-dark) 100%);
        color: #fff;
    }
    .bnws-login-brand__head {
        display: flex; align-items: center;
        text-decoration: none; color: #fff;
    }
    .bnws-login-brand__logo { width: 200px; height: auto; display: block; }
    .bnws-login-brand__copy { margin-top: auto; }
    .bnws-login-brand__title {
        font-size: clamp(28px, 3vw, 40px);
        font-weight: 700; line-height: 1.15;
        margin: 0 0 16px;
    }
    .bnws-login-brand__lead {
        margin: 0; max-width: 460px;
        font-size: 15px; line-height: 1.6;
        color: rgba(255,255,255,0.85);
    }
    .bnws-login-brand__foot {
        margin: 0; font-size: 12px; letter-spacing: .3px;
        color: rgba(255,255,255,0.7);
    }
    .bnws-login-stage {
        background: var(--bnws-bg);
        gap: 0;
    }
    .bnws-login-logo { display: none; }
    .bnws-login-card { box-shadow: none; background: transparent; padding: 40px 48px; max-width: 480px; }
    .bnws-login-foot { display: none; }
}

/* ----------------------------------------------------------------------
 * Mobile-Header + Drawer (Burger). Aktiv unter 768px.
 *
 * Desktop:    Sidebar links als vertikale Spalte (default, oben definiert).
 * Mobile:     Sidebar wird zur horizontalen Top-Bar mit Logo + Burger.
 *             Nav + Foot sind in `.bnws-drawer` und slidet von rechts rein,
 *             wenn `.bnws-sidebar.is-open` gesetzt wird.
 * ---------------------------------------------------------------------- */
@media (max-width: 1023px) {
    /*
     * Mobile + Tablet (v2.0.0): Shell als Block-Layout. Top-Bar bleibt für
     * Logo + Bell + Avatar; Bottom-Nav ersetzt den Burger-Drawer als
     * Hauptnavigation. Drawer-Markup bleibt im DOM (Sidebar trägt noch
     * Brand+Tools), Drawer-Inhalt wird aber per `.bnws-drawer { display:none }`
     * weggeblendet — Bottom-Nav + Mehr-Sheet sind die einzigen Routen.
     */
    .bnws-shell {
        display: block;
        grid-template-columns: none;
        grid-template-rows: none;
    }
    .bnws-sidebar {
        position: fixed; top: 0; left: 0; right: 0;
        height: auto;
        padding: 0; gap: 0;
        flex-direction: column;
        border-right: none;
        z-index: 50;
    }
    .bnws-sidebar__head {
        min-height: var(--bnws-mobile-header-h);
        padding: 10px 14px;
        border-bottom: 1px solid var(--bnws-border);
        background: var(--bnws-card);
    }
    .bnws-brand__logo { height: 22px; }

    /* Detail-Seiten: Logo durch Back-Chevron ersetzen — der Back-Link im Body
     * entfällt damit. Logo bleibt im DOM, wird nur visuell ausgeblendet, damit
     * die Markup-Struktur (Sidebar/Drawer) für JS-Toggle gleich bleibt. */
    .bnws-sidebar--has-back .bnws-brand { display: none; }
    .bnws-sidebar--has-back .bnws-mobile-back { display: inline-flex; }
    /* Index-Pages (kein Back-Link): Logo wandert raus, H1 rückt in den Header.
     * Body-H1 wird unten via Geschwister-Selektor verborgen, damit der Titel
     * nicht doppelt erscheint. */
    .bnws-sidebar:not(.bnws-sidebar--has-back) .bnws-brand { display: none; }
    .bnws-sidebar:not(.bnws-sidebar--has-back) .bnws-mobile-title {
        display: block;
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        line-height: 1.25;
        color: var(--bnws-text);
        max-width: calc(100vw - 160px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .bnws-sidebar:not(.bnws-sidebar--has-back) ~ .bnws-main .bnws-page-title { display: none; }
    /*
     * Mobile generell ohne Subtitle (User-Wunsch): der Mobile-Header zeigt
     * bereits den Titel, der Subtitle wäre nur eine doppelte Zeile darunter.
     * Body-Header wird damit auf Index-Pages komplett unsichtbar, sofern
     * keine `.bnws-page-action` Buttons im Header sitzen.
     */
    .bnws-page-subtitle { display: none; }
    .bnws-sidebar:not(.bnws-sidebar--has-back) ~ .bnws-main .bnws-page-header:not(:has(.bnws-page-action)) {
        display: none;
    }
    .bnws-mobile-back {
        align-items: center; gap: 4px;
        padding: 6px 10px 6px 4px;
        color: var(--bnws-text);
        text-decoration: none;
        font-weight: 600; font-size: 15px;
        border-radius: 10px;
        max-width: calc(100vw - 160px);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .bnws-mobile-back:hover { background: var(--bnws-bg); }
    .bnws-mobile-back .material-icons { font-size: 26px; color: var(--bnws-text); }
    .bnws-mobile-back__label {
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    .bnws-burger { display: none !important; }
    .bnws-drawer { display: none !important; }
    .bnws-backdrop { display: none !important; }

    /* Top-Padding kompensiert die fixed Top-Bar, Bottom-Padding die Tab-Bar. */
    .bnws-main {
        padding: calc(var(--bnws-mobile-header-h) + 16px) 16px
                 calc(var(--bnws-bottom-nav-h, 64px) + env(safe-area-inset-bottom) + 24px);
    }
    .bnws-page-title { font-size: 22px; }

    .bnws-banner {
        padding: 14px 16px;
        flex-direction: column; align-items: flex-start;
        gap: 12px;
    }
    .bnws-banner__action { width: 100%; text-align: center; }

    .bnws-card { padding: 16px; }
    /*
     * Mobile: Karten mit Boows-Tabelle drin verlieren ihre Hülle (Border,
     * Hintergrund, Padding, Radius), damit der knappe Viewport-Platz nicht
     * doppelt von Card- und Tabellen-Rahmen gefressen wird. Die innere
     * `.bnws-card .boows-table`-Optik (Tokens, Sticky-Header, Skeleton)
     * bleibt erhalten, da die Selektoren weiter greifen — nur die äußere
     * Card-Optik fällt weg.
     */
    .bnws-card:has(.boows-table) {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
    }
    .bnws-chart-card { padding: 16px; }
    /* Mobile KPI-Cards im App-Stil: Icon-Tile oben, Wert + Label darunter.
     * Verhindert dass Zahl bei „Support-Tickets"/„Error-Issues" abgeschnitten wird,
     * weil Icon-Spalte (56 px) auf 360-px-Viewports sonst zuviel frisst. */
    .bnws-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
    .bnws-stat {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        padding: 14px 14px 12px;
        row-gap: 8px;
        border-radius: 14px;
    }
    .bnws-stat__icon {
        grid-row: auto;
        width: 40px; height: 40px;
        border-radius: 12px;
    }
    .bnws-stat__icon .material-icons { font-size: 22px; }
    .bnws-stat__body { display: flex; flex-direction: column; gap: 2px; }
    .bnws-stat-value { font-size: 24px; line-height: 1; }
    .bnws-stat-label { font-size: 12px; }

    .bnws-detail-grid { grid-template-columns: minmax(0,1fr) !important; }

    /*
     * Filter-Row stackt komplett (Inputs + Buttons full-width). Auf < 360px-
     * Viewports passt sonst weder das „Code, Betreff, Email…"-Placeholder noch
     * das „Alle Sources"-Select nebeneinander.
     */
    .bnws-filter-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .bnws-filter-row > .bnws-input,
    .bnws-filter-row > .bnws-btn { width: 100%; }
    .bnws-filter-row > .bnws-btn { justify-content: center; text-align: center; }

    .bnws-tabbar {
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        /* `min-width: 0` verhindert, dass der Tabbar als Flex-Kind seinen
         * Eltern-Container (Card) breiter als das Viewport pusht. */
        min-width: 0;
    }
    .bnws-tabbar::-webkit-scrollbar { display: none; }
    .bnws-tabbar-item { white-space: nowrap; flex-shrink: 0; }

    /*
     * Boows-Table auf Mobile: Mobile behält das alte „Frozen-Pane"-Layout —
     * die Tabelle ist ein eigener Scroll-Container (max-height begrenzt),
     * Filter und Pagination bleiben sichtbar, der Spalten-Header bleibt
     * sticky innerhalb. Reason: Auf Mobile ist horizontaler Scroll am
     * `.data-container` aktiv, ein Page-übergreifender Sticky-Header zum
     * Viewport würde mit overflow-x kollidieren (Spec macht overflow-y dann
     * auch zu auto).
     */
    .bnws-card .boows-table {
        max-width: 100%;
        max-height: calc(98vh - var(--bnws-bottom-nav-h, 64px) - env(safe-area-inset-bottom));
        display: flex;
        flex-direction: column;
    }
    .bnws-card .boows-table .scroll-container {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .bnws-card .boows-table .data-container {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }
    .bnws-card .boows-table .data-container > .boows-table-data,
    .bnws-card .boows-table .data-container > header.adm-table-head { min-width: 560px; }
    .bnws-card .boows-table header.adm-table-head { top: 0; }

    /* Raw HTML-Tabellen (.bnws-table-wrap): bereits scrollbar; nur Margin
     * ausgleichen, damit der Card-Innenrand stimmt. */
    .bnws-table-wrap { margin: 0 -4px; padding: 0 4px; }

    .bnws-form--inline { grid-template-columns: 1fr; gap: 10px; }
    .bnws-form--inline .bnws-btn { width: 100%; }

    .bnws-kv { grid-template-columns: 1fr; gap: 4px 0; }
    .bnws-kv dt { font-weight: 600; margin-top: 8px; }

    .bnws-card code, .bnws-table code { word-break: break-all; }

    /*
     * Header bleibt auf Mobile Row: Status-Pill (action-Slot) sitzt rechts
     * neben dem Titel via margin-left:auto. Vorher stackte der Header in
     * eine Column und der Badge landete als zweite Zeile unter dem Titel.
     */
    .bnws-page-header {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }
    .bnws-page-action {
        margin-left: auto;
        width: auto;
    }
}

/* ----------------------------------------------------------------------
 * "Install as Web App"-Card (Settings) — beforeinstallprompt + iOS-Hinweis
 * ---------------------------------------------------------------------- */
.bnws-install-card {
    background: var(--bnws-card);
    color: var(--bnws-text);
    border: 1px solid var(--bnws-border);
    padding: 20px 24px; border-radius: 10px;
    display: grid; grid-template-columns: 1fr auto; gap: 16px;
    align-items: center; margin: 0 0 8px;
}
.bnws-install-card__title { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.bnws-install-card__desc  { font-size: 13px; margin: 0; color: var(--bnws-muted); line-height: 1.5; }
.bnws-install-card__actions {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 6px; min-width: 220px;
}
.bnws-install-card__hint  {
    font-size: 12px; color: var(--bnws-muted); text-align: right; line-height: 1.45;
}
.bnws-install-card .bnws-btn {
    background: var(--bnws-accent); color: #fff; border: none;
    padding: 10px 16px; font-weight: 600; border-radius: 8px;
    cursor: pointer;
}
.bnws-install-card .bnws-btn:hover { background: var(--bnws-accent-dark); }

@media (max-width: 768px) {
    .bnws-install-card { grid-template-columns: 1fr; padding: 16px 18px; }
    .bnws-install-card__actions { min-width: 0; }
    .bnws-install-card__hint { text-align: left; }
}

/* ----------------------------------------------------------------------
 * Settings → Push-Tab (Subscribe/Unsubscribe + Typen-Liste).
 * ---------------------------------------------------------------------- */
.bnws-push-tab { display: flex; flex-direction: column; gap: 14px; }
.bnws-push-state {
    background: var(--bnws-bg);
    border: 1px solid var(--bnws-border);
    border-radius: 8px; padding: 12px 14px;
    font-size: 14px;
}
.bnws-push-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bnws-push-types {
    display: grid; grid-template-columns: 1fr; gap: 6px;
    background: var(--bnws-bg);
    border: 1px solid var(--bnws-border);
    border-radius: 8px; padding: 12px 14px;
}
.bnws-push-type {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 4px;
    cursor: pointer;
    font-size: 14px;
}
.bnws-push-type input {
    width: 16px; height: 16px;
    accent-color: var(--bnws-accent);
}
@media (min-width: 720px) {
    .bnws-push-types { grid-template-columns: 1fr 1fr; }
}

/* Boows-Tabs Container: kein doppelter Außenrahmen über Card. */
.bnws-card .boows_tab_container { background: transparent; }

/* ----------------------------------------------------------------------
 * Toasts. Desktop: unten rechts. Mobile: oben, full-bleed, gleitet von oben
 * rein — sitzt nicht auf der Bottom-Nav. Akzentfarbe als linker Streifen,
 * Icon im farbigen Chip, Body neutral hell.
 * ---------------------------------------------------------------------- */
.bnws-toasts {
    position: fixed;
    bottom: 16px; right: 16px;
    z-index: 100;
    display: flex; flex-direction: column-reverse; gap: 10px;
    max-width: calc(100vw - 32px); width: 380px;
    pointer-events: none;
}
.bnws-toast {
    pointer-events: auto;
    position: relative;
    background: var(--bnws-card);
    color: var(--bnws-text);
    border: 1px solid var(--bnws-border);
    border-left: 4px solid var(--bnws-accent);
    border-radius: 12px;
    padding: 12px 14px 12px 12px;
    box-shadow: 0 10px 30px rgba(15,16,40,0.18);
    display: flex; align-items: center; gap: 12px;
    font-size: 14px; line-height: 1.35;
    opacity: 0; transform: translateY(8px);
    transition: opacity 220ms ease, transform 220ms ease;
}
.bnws-toast.is-visible { opacity: 1; transform: translateY(0); }
.bnws-toast__icon {
    flex: 0 0 32px;
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--bnws-accent) 12%, transparent);
    color: var(--bnws-accent);
    font-size: 20px;
}
.bnws-toast__msg    { flex: 1; min-width: 0; word-break: break-word; }
.bnws-toast__action {
    background: var(--bnws-accent); color: #fff;
    border: none; padding: 6px 10px; border-radius: 8px;
    font: inherit; font-weight: 600; cursor: pointer;
    flex: 0 0 auto;
}
.bnws-toast__action:hover { filter: brightness(1.08); }
.bnws-toast__close {
    background: transparent; color: var(--bnws-muted);
    border: none; font-size: 20px; line-height: 1;
    cursor: pointer; padding: 0 2px;
    flex: 0 0 auto;
}
.bnws-toast__close:hover { color: var(--bnws-text); }

.bnws-toast--ok    { border-left-color: #16A34A; }
.bnws-toast--ok    .bnws-toast__icon { background: rgba(22,163,74,0.12);  color: #16A34A; }
.bnws-toast--info  { border-left-color: #2563EB; }
.bnws-toast--info  .bnws-toast__icon { background: rgba(37,99,235,0.12);  color: #2563EB; }
.bnws-toast--warn  { border-left-color: #D97706; }
.bnws-toast--warn  .bnws-toast__icon { background: rgba(217,119,6,0.14);  color: #D97706; }
.bnws-toast--error { border-left-color: #DC2626; }
.bnws-toast--error .bnws-toast__icon { background: rgba(220,38,38,0.12);  color: #DC2626; }

/* Mobil: oben anzeigen, leicht safe-area-aware. Slide kommt von oben rein,
 * Stack-Richtung normal (oberste = neueste). */
@media (max-width: 768px) {
    .bnws-toasts {
        right: 10px; left: 10px;
        /* Sitzt unter der fixen Mobile-Topbar (--bnws-mobile-header-h), plus
         * etwas Luft + Safe-Area. So kein Überlapp mit Burger/Header. */
        top: calc(var(--bnws-mobile-header-h, 60px) + env(safe-area-inset-top, 0px) + 8px);
        bottom: auto;
        width: auto; max-width: none;
        flex-direction: column;
        z-index: 60;
    }
    .bnws-toast {
        transform: translateY(-12px);
        padding: 10px 12px;
        font-size: 13.5px;
    }
    .bnws-toast.is-visible { transform: translateY(0); }
}

/* ----------------------------------------------------------------------
 * Profilseite (Spec 50): Avatar + Tabs (Profil, Passwort, 2FA, Passkeys).
 * Card-Grid für Profil-Tab; einzelne form-cards für die anderen Tabs.
 * ---------------------------------------------------------------------- */
/*
 * Profile-Tabs liegen schon in `.tab_item_content` (= Card mit Border + Shadow).
 * Inhalte stapeln deshalb direkt, ohne weitere Card-Wrapper.
 */
.bnws-profile-stack {
    display: flex; flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.bnws-profile-stack--narrow { max-width: 480px; }

.bnws-profile-identity {
    display: flex; flex-direction: row;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.bnws-profile-identity__meta {
    display: flex; flex-direction: column;
    gap: 8px; flex: 1 1 260px; min-width: 0;
}
.bnws-profile-form {
    max-width: 520px;
}

.bnws-avatar {
    width: 128px; height: 128px;
    border-radius: 50%;
    background: var(--boows-col-primary-10);
    color: var(--bnws-accent);
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
    align-self: center;
    border: 1px solid var(--bnws-border);
}
.bnws-avatar--lg { width: 160px; height: 160px; }
.bnws-avatar__img { width: 100%; height: 100%; object-fit: cover; }
.bnws-avatar__initials { font-size: 48px; font-weight: 600; letter-spacing: 1px; }

.bnws-profile-avatar-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.bnws-muted--small { font-size: 12px; }
.bnws-requirements { padding-left: 18px; margin: 4px 0 4px; }
.bnws-requirements li { margin: 2px 0; }

.bnws-2fa-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
}
.bnws-2fa-setup {
    display: grid; grid-template-columns: 200px 1fr;
    gap: 20px; align-items: start;
}
.bnws-qr-placeholder {
    width: 180px; height: 180px;
    border: 2px dashed var(--bnws-border);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    text-align: center; color: var(--bnws-muted);
    font-size: 12px; line-height: 1.4;
}
.bnws-qr-placeholder span { color: var(--bnws-muted); font-size: 10px; }
.bnws-qr-svg svg {
    width: 200px; height: 200px;
    background: #fff;
    padding: 6px;
    border-radius: 6px;
    display: block;
}
.bnws-2fa-form { max-width: 320px; }
.bnws-recovery summary { cursor: pointer; color: var(--bnws-accent); font-weight: 600; }
.bnws-recovery__list {
    background: var(--bnws-bg); padding: 12px; border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px; white-space: pre-wrap;
}

@media (max-width: 768px) {
    .bnws-profile-identity { flex-direction: column; align-items: stretch; }
    .bnws-profile-identity .bnws-avatar { align-self: center; }
    .bnws-2fa-setup        { grid-template-columns: 1fr; justify-items: center; }
    .bnws-2fa-form         { width: 100%; }
}

/* Icon-only Action-Button in Tabellen (z. B. Passkeys löschen). */
.bnws-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    padding: 0; border: 1px solid var(--bnws-border);
    border-radius: 6px;
    background: var(--bnws-card);
    color: var(--bnws-muted);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.bnws-icon-btn .material-icons { font-size: 18px; line-height: 1; }
.bnws-icon-btn:hover { background: var(--bnws-bg); color: var(--bnws-text); }
.bnws-icon-btn--danger:hover {
    background: rgba(200, 54, 54, 0.08);
    color: var(--boows-col-error, #c83636);
    border-color: var(--boows-col-error, #c83636);
}

/* ----------------------------------------------------------------------
 * Modal-Backdrop + Cropper-Stage (Profilbild-Upload).
 * ---------------------------------------------------------------------- */
.bnws-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(31, 34, 64, 0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    z-index: 1000;
}
/* `display: flex` oben überschreibt sonst das HTML-`hidden`-Attribut, sodass
 * jedes Modal mit [hidden] trotzdem sichtbar wäre. Diese Regel ist explizit
 * für jeden Modal-Backdrop nötig (statt nur pro Modal-Variant). */
.bnws-modal-backdrop[hidden] { display: none !important; }
body.bnws-modal-open { overflow: hidden; }
.bnws-modal {
    background: var(--bnws-card);
    border-radius: 12px;
    width: min(92vw, 560px);
    max-height: 92vh;
    display: flex; flex-direction: column;
    box-shadow: 0 24px 60px rgba(0,0,0,0.25);
    overflow: hidden;
}
.bnws-modal__head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--bnws-border);
}
.bnws-modal__head h3 { margin: 0; font-size: 16px; }
.bnws-modal__body {
    padding: 18px;
    overflow: auto;
}
.bnws-modal__foot {
    padding: 12px 18px;
    border-top: 1px solid var(--bnws-border);
    display: flex; justify-content: flex-end; gap: 8px;
    background: var(--bnws-bg);
}
/* Confirm-Modal (window.BNWS.confirm) — Body etwas luftiger, gefüllter
 * Danger-Button (das generische .bnws-btn--danger ist nur Text). */
.bnws-confirm .bnws-modal__body { font-size: 14px; line-height: 1.5; color: var(--bnws-text); }
.bnws-confirm__ok--danger { background: var(--boows-col-error, #c83636); color: #fff; border-color: transparent; }
.bnws-confirm__ok--danger:hover { filter: brightness(1.08); }

.bnws-cropper {
    position: relative;
    background: #00000010;
    border-radius: 8px;
    overflow: hidden;
    display: inline-block;
    max-width: 100%;
    user-select: none;
    touch-action: none;
}
.bnws-cropper img {
    display: block;
    max-width: 100%;
    max-height: 60vh;
    pointer-events: none;
}
.bnws-cropper__box {
    position: absolute;
    border: 2px solid var(--bnws-accent);
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.45);
    cursor: grab;
    touch-action: none;
}
.bnws-cropper__box:active { cursor: grabbing; }
.bnws-cropper__handle {
    position: absolute;
    width: 14px; height: 14px;
    background: var(--bnws-accent);
    border: 2px solid #fff;
    border-radius: 50%;
    right: -8px; bottom: -8px;
    cursor: nwse-resize;
    touch-action: none;
}
.bnws-cropper__zoom { margin-top: 14px; max-width: 260px; }
.bnws-cropper__zoom input[type=range] { width: 100%; }

/* ----------------------------------------------------------------------
 * Button-Spinner: ein 14px-Kreis, rotiert.
 * ---------------------------------------------------------------------- */
.bnws-spinner {
    display: inline-block; width: 14px; height: 14px;
    border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; vertical-align: -2px; margin-right: 6px;
    animation: bnws-spin 700ms linear infinite;
}
@keyframes bnws-spin { to { transform: rotate(360deg); } }
button.is-loading, input.is-loading { cursor: progress; opacity: .85; }
.bnws-btn__label { vertical-align: middle; }

/* ----------------------------------------------------------------------
 * Todos (Spec: Google-Tasks-Style mit Listen, Sub-Tasks, Reminder via RRULE).
 * ---------------------------------------------------------------------- */
.bnws-todo-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.bnws-todo-shell > .bnws-todo-main { min-width: 0; }

/* ----------------------------------------------------------------------
 * Tab-Bar für eigene Listen (v2.1.9): ersetzt die alte Sidebar.
 * Plus-Icon am Ende öffnet das „Neue Liste/Vorlage"-Modal.
 * Auf Mobile horizontal scrollbar (bestehende .bnws-tabbar-Regeln greifen).
 * ---------------------------------------------------------------------- */
.bnws-todo-tabs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bnws-todo-tabbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    margin-bottom: 0;
}
.bnws-todo-tabbar::-webkit-scrollbar { display: none; }
.bnws-todo-tabbar__item {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap;
}
.bnws-todo-tabbar__item .material-icons {
    font-size: 18px;
    color: var(--bnws-muted);
}
.bnws-todo-tabbar__item.is-active .material-icons,
.bnws-todo-tabbar__item:hover .material-icons {
    color: inherit;
}
.bnws-todo-tabbar__item.has-color:not(.is-active) .material-icons { color: var(--list-color); }
.bnws-todo-tabbar__item.has-color.is-active {
    background: var(--list-color);
    border-color: var(--list-color);
    color: #fff;
}
.bnws-todo-tabbar__item.has-color.is-active .material-icons,
.bnws-todo-tabbar__item.has-color.is-active .bnws-tabbar-count { color: #fff; }
.bnws-todo-tabbar__label { line-height: 1.2; }
.bnws-todo-tabbar__add {
    flex-shrink: 0;
    appearance: none;
    background: transparent;
    border: 1px dashed var(--bnws-border);
    cursor: pointer;
    color: var(--bnws-accent);
}
.bnws-todo-tabbar__add:hover {
    background: var(--bnws-bg);
    border-color: var(--bnws-accent);
}
.bnws-todo-tabbar__add .material-icons { color: var(--bnws-accent); font-size: 20px; }
.bnws-todo-tabbar__settings {
    flex-shrink: 0;
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    color: var(--bnws-muted);
}
.bnws-todo-tabbar__settings:hover {
    background: var(--bnws-bg);
    color: var(--bnws-text);
}
.bnws-todo-tabbar__settings .material-icons { font-size: 20px; }

/* Smart-Listen als zweite, dezentere Chip-Reihe unter der Tab-Bar.
 * Horizontaler Scroll statt Umbruch — auf Mobile passen oft mehr Chips
 * als Bildschirmbreite, vertikales Umbrechen würde aber die Layout-Höhe
 * sprengen und den Titel nach unten drücken. */
.bnws-todo-smart-row {
    display: flex; flex-wrap: nowrap; gap: 6px;
    padding: 4px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.bnws-todo-smart-row::-webkit-scrollbar { display: none; }
.bnws-todo-smart-chip {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--bnws-bg);
    color: var(--bnws-muted);
    text-decoration: none;
    font-size: 13px; font-weight: 500;
    border: 1px solid transparent;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.bnws-todo-smart-chip:hover { color: var(--bnws-text); }
.bnws-todo-smart-chip .material-icons { font-size: 16px; }
.bnws-todo-smart-chip.is-active {
    background: var(--bnws-card);
    color: var(--bnws-accent);
    border-color: var(--bnws-accent);
}
.bnws-todo-side {
    position: sticky;
    top: 0;
    background: var(--bnws-surface);
    border: 1px solid var(--bnws-border);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
@media (max-width: 768px) {
    .bnws-todo-side { position: static; }
}
.bnws-todo-side__group { display: flex; flex-direction: column; gap: 4px; }
.bnws-todo-side__title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--bnws-muted);
    margin: 0 0 4px;
}
.bnws-todo-side__item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--bnws-text);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.2;
}
.bnws-todo-side__item .material-icons { font-size: 20px; color: var(--bnws-muted); }
.bnws-todo-side__item:hover { background: var(--bnws-bg); }
.bnws-todo-side__item.is-active {
    background: var(--bnws-accent);
    color: #fff;
}
.bnws-todo-side__item.is-active .material-icons { color: rgba(255,255,255,.85); }
/* Listen-Farbe: Icon färben, im Active-State als Hintergrund verwenden. */
.bnws-todo-side__item.has-color .material-icons { color: var(--list-color); }
.bnws-todo-side__item.has-color.is-active { background: var(--list-color); }
.bnws-todo-side__item.has-color.is-active .material-icons { color: rgba(255,255,255,.9); }
/* Aktive Liste mit Farbe: auch das More-Icon weiß rendern (Selektor-Spiegel zur Default-Regel oben). */
.bnws-todo-side__row .bnws-todo-side__item.has-color.is-active + .bnws-todo-side__more > summary { color: rgba(255,255,255,.85); }
/* Main-Header-Icon der aktiven Liste in der Farbe tönen. */
.bnws-todo-shell.has-color .bnws-todo-main__title-icon { color: var(--list-color); }
/* Globaler Akzentfarben-Override: Wenn die aktive Liste eine Listenfarbe hat,
 * dann übernimmt diese Farbe ALLE Akzent-Stellen in der Shell — Hinzufügen-
 * Button (bnws-btn--primary), add_task-Icon, Erledigt-Icon der Todos,
 * Title-Hover, sowie alle Komponenten, die `var(--bnws-accent)` lesen. So
 * fühlt sich die Liste „farbig" an, nicht nur der Tab oben.
 *   Wir überschreiben sowohl --bnws-accent als auch --bnws-accent-dark — Letzteres
 * nutzen Hover-States der Primärbuttons. Für den Dark-Wert nehmen wir die
 * gleiche Farbe (ohne Auto-Darken: würde extra Custom Property brauchen, und
 * der Hover-Unterschied ist visuell vernachlässigbar). */
.bnws-todo-shell.has-color {
    --bnws-accent: var(--list-color);
    --bnws-accent-dark: var(--list-color);
}
/* Auf der Detail-Seite (außerhalb der Shell) setzen wir --list-color auf
 * dem .bnws-todo-detail-wrap; der gleiche Override gilt dort. */
.bnws-todo-detail-wrap[style*="--list-color"] {
    --bnws-accent: var(--list-color);
    --bnws-accent-dark: var(--list-color);
}
.bnws-todo-side__item--accent { color: var(--bnws-accent); font-weight: 500; }
.bnws-todo-side__add { display: flex; gap: 6px; margin-top: 8px; }
.bnws-todo-side__add .bnws-input { flex: 1; }

.bnws-todo-main {
    display: flex; flex-direction: column; gap: 14px; min-width: 0;
    /* Horizontale Wischgesten gehören unserem JS (Listen-Wechsel), vertikal
     * lassen wir den nativen Scroll laufen. Ohne pan-y würde iOS Safari die
     * horizontale Geste teils als Edge-Back-Swipe abfangen, bevor unser
     * touchmove-Handler sie sieht. */
    touch-action: pan-y;
}
/* Header muss in einer Zeile bleiben: bei langen Listentiteln wie
 * "Sommerurlaub Packliste" landete das 3-Punkt-Menü sonst in der nächsten Zeile
 * (flex-wrap), wo es vom darunter liegenden Inline-Add-Feld überdeckt und
 * praktisch unklickbar wurde. Stattdessen schrumpft jetzt der Titel und kürzt
 * via Ellipsis, das Menü bleibt rechts. */
.bnws-todo-main__head {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    flex-wrap: nowrap; min-width: 0;
}
.bnws-todo-main__title {
    margin: 0; font-size: 22px;
    min-width: 0; flex: 1 1 auto;
    display: flex; align-items: center; gap: 8px;
}
.bnws-todo-main__title > span {
    min-width: 0; flex: 1 1 auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bnws-todo-main__title-icon { flex: 0 0 auto; }
.bnws-todo-main__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* More-Menü neben dem Listentitel (v2.1.9): Aktionen wie Rename/Farbe/Löschen.
 * Wandert von der alten Sidebar in den Main-Header. */
.bnws-todo-main__more {
    position: relative;
    flex-shrink: 0;
}
.bnws-todo-main__more > summary {
    list-style: none;
    cursor: pointer;
}
.bnws-todo-main__more > summary::-webkit-details-marker { display: none; }
.bnws-todo-main__more > summary::marker { display: none; }
.bnws-todo-main__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    /* Min-/Max-Breite so gewählt, dass der 6-spaltige Color-Swatcher (30 Farben +
     * Reset) ohne horizontalen Scroll hineinpasst und das Menü auf einem 360px-
     * Mobile-Viewport nicht über den Rand kippt. */
    min-width: 288px;
    max-width: min(320px, calc(100vw - 24px));
    background: var(--bnws-card);
    border: 1px solid var(--bnws-border);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    padding: 6px;
    display: flex; flex-direction: column; gap: 2px;
}

/* ----------------------------------------------------------------------
 * Modal „Neue Liste / Vorlage" (v2.1.9).
 * Wiederverwendet .bnws-modal-backdrop / .bnws-modal, ergänzt mit eigener
 * Section-Optik (zwei Sektionen: Neue Liste vs. Vorlage-Auswahl).
 * ---------------------------------------------------------------------- */
.bnws-newlist-modal[hidden] { display: none; }
.bnws-newlist-modal__close {
    margin-left: auto;
}
.bnws-newlist-modal .bnws-modal__head {
    display: flex; align-items: center; gap: 12px;
}
.bnws-newlist-modal__body {
    display: flex; flex-direction: column; gap: 20px;
}
.bnws-newlist-section { display: flex; flex-direction: column; gap: 10px; }
.bnws-newlist-section__title {
    margin: 0;
    font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .4px;
    color: var(--bnws-muted);
    display: inline-flex; align-items: center; gap: 6px;
}
.bnws-newlist-section__title .material-icons { font-size: 16px; }
.bnws-newlist-form { display: flex; gap: 8px; }
.bnws-newlist-form .bnws-input { flex: 1; }
.bnws-newlist-empty {
    margin: 0;
    color: var(--bnws-muted);
    font-size: 13px;
}
.bnws-newlist-templates {
    display: flex; flex-direction: column; gap: 6px;
    max-height: 320px;
    overflow-y: auto;
    padding: 2px;
    margin: 0 -2px;
}
.bnws-newlist-template { margin: 0; }
.bnws-newlist-template__btn {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background: var(--bnws-card);
    border: 1px solid var(--bnws-border);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    color: var(--bnws-text);
    transition: background 150ms ease, border-color 150ms ease;
}
.bnws-newlist-template__btn:hover {
    background: var(--bnws-bg);
    border-color: var(--bnws-accent);
}
.bnws-newlist-template__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    color: #fff;
    flex-shrink: 0;
}
.bnws-newlist-template__icon .material-icons { font-size: 20px; color: #fff; }
.bnws-newlist-template__body {
    display: flex; flex-direction: column; gap: 2px;
    flex: 1; min-width: 0;
}
.bnws-newlist-template__title { font-size: 14px; font-weight: 600; }
.bnws-newlist-template__desc {
    font-size: 12px; color: var(--bnws-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bnws-newlist-template__cta { color: var(--bnws-accent); font-size: 22px !important; }
.bnws-newlist-manage {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 4px;
    font-size: 13px; color: var(--bnws-muted);
    text-decoration: none;
}
.bnws-newlist-manage:hover { color: var(--bnws-accent); }
.bnws-newlist-manage .material-icons { font-size: 16px; }
.bnws-todo-inline-rename { display: flex; gap: 4px; }
.bnws-todo-inline-rename .bnws-input { max-width: 200px; }

.bnws-todo-add {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: var(--bnws-surface);
    border: 1px solid var(--bnws-border);
    border-radius: 10px;
}
.bnws-todo-add__icon { color: var(--bnws-accent); }
.bnws-todo-add .bnws-input { flex: 1; border: none; padding: 6px 0; background: transparent; }
.bnws-todo-add .bnws-input:focus { outline: none; }

.bnws-todo-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.bnws-todo {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 6px 12px;
    background: var(--bnws-surface);
    border: 1px solid var(--bnws-border);
    border-radius: 10px;
    transition: background 120ms ease;
}
.bnws-todo:hover { background: var(--bnws-bg); }
.bnws-todo.is-done .bnws-todo__title { text-decoration: line-through; color: var(--bnws-muted); }
.bnws-todo.is-starred .bnws-todo__star .material-icons { color: #F5C518; }
.bnws-todo__toggle-form { margin: 0; display: inline-flex; }
.bnws-todo__toggle {
    background: none; border: none; padding: 0; margin: 0;
    cursor: pointer; color: var(--bnws-muted);
    display: inline-flex; align-items: center;
}
.bnws-todo__toggle .material-icons { font-size: 24px; }
.bnws-todo.is-done .bnws-todo__toggle .material-icons { color: var(--bnws-accent); }
.bnws-todo__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; justify-content: center; }
.bnws-todo__title {
    color: var(--bnws-text); text-decoration: none; font-size: 15px;
    word-break: break-word;
}
.bnws-todo__title:hover { color: var(--bnws-accent); }
.bnws-todo__meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--bnws-muted); }
.bnws-todo__meta-item { display: inline-flex; align-items: center; gap: 4px; }
.bnws-todo__meta-item .material-icons { font-size: 14px; }
.bnws-todo__meta-item--details { font-style: italic; }
.bnws-todo__star-form { margin: 0; display: inline-flex; }
.bnws-todo__star {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--bnws-muted);
    display: inline-flex; align-items: center;
}
.bnws-todo__star:hover { color: #F5C518; }
.bnws-todo__star .material-icons { font-size: 22px; }

.bnws-todo-subs {
    list-style: none; padding: 0 0 0 36px; margin: 4px 0 8px;
    display: flex; flex-direction: column; gap: 4px;
}
.bnws-todo-subs .bnws-todo { background: var(--bnws-bg); }

.bnws-todo-subadd {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 12px 4px 50px;
}
.bnws-todo-subadd__icon { color: var(--bnws-muted); font-size: 18px; }
.bnws-todo-subadd .bnws-input { flex: 1; max-width: 360px; }

/* Template-Galerie */
.bnws-todo-tpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.bnws-todo-tpl-card {
    background: var(--bnws-surface);
    border: 1px solid var(--bnws-border);
    border-radius: 12px;
    padding: 16px;
    display: flex; flex-direction: column; gap: 8px;
}
.bnws-todo-tpl-card__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.bnws-todo-tpl-card__icon .material-icons { color: #fff; }
.bnws-todo-tpl-card__title { margin: 4px 0 0; font-size: 16px; }
.bnws-todo-tpl-card__desc { margin: 0; color: var(--bnws-muted); font-size: 13px; min-height: 36px; }
.bnws-todo-tpl-card__meta { font-size: 12px; color: var(--bnws-muted); }
.bnws-todo-tpl-card__form { margin-top: auto; }

/* Stats-Chips über der Todo-Liste */
.bnws-todo-stats {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin: 4px 0 6px;
}
.bnws-todo-stat {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bnws-bg);
    border: 1px solid var(--bnws-border);
    font-size: 12px; color: var(--bnws-muted);
}
.bnws-todo-stat .material-icons { font-size: 14px; color: var(--bnws-muted); }

/* Generische Chips für Todo-Meta (Frist, Wiederholung, Reminder) */
.bnws-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bnws-bg);
    border: 1px solid var(--bnws-border);
    font-size: 12px; color: var(--bnws-text);
    line-height: 1.5;
}
.bnws-chip .material-icons { font-size: 14px; }
.bnws-chip--due       { background: rgba(37,99,235,0.08);  color: #1D4ED8; border-color: rgba(37,99,235,0.25); }
.bnws-chip--due .material-icons { color: #1D4ED8; }
.bnws-chip--due.is-overdue { background: rgba(220,38,38,0.10); color: #B91C1C; border-color: rgba(220,38,38,0.30); }
.bnws-chip--due.is-overdue .material-icons { color: #B91C1C; }
.bnws-chip--rrule     { background: rgba(3, 123, 252,0.10); color: #0162D6; border-color: rgba(3, 123, 252,0.25); }
.bnws-chip--rrule .material-icons { color: #0162D6; }
.bnws-chip--rem       { background: rgba(22,163,74,0.10);  color: #15803D; border-color: rgba(22,163,74,0.25); }
.bnws-chip--rem .material-icons { color: #15803D; }
.bnws-chip--att       { background: rgba(99,102,241,0.10); color: #0162D6; border-color: rgba(99,102,241,0.25); }
.bnws-chip--att .material-icons { color: #0162D6; }

/* Main-Header bekommt ein Icon vor dem Titel.
 * Hinweis: display/flex-Verhalten ist oben (bnws-todo-main__head Block)
 * definiert, damit lange Titel via Ellipsis schrumpfen und das 3-Punkt-Menü
 * rechts in einer Zeile bleibt. Hier nur kosmetische Anpassungen. */
.bnws-todo-main__title { gap: 10px; }
.bnws-todo-main__title-icon { font-size: 24px; color: var(--bnws-accent); }

/* Smart-Listen Edit-Panel */
.bnws-smart-edit {
    background: var(--bnws-surface);
    border: 1px solid var(--bnws-border);
    border-radius: 12px;
    padding: 10px 14px 14px;
}
.bnws-smart-edit__sum {
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer; font-weight: 600; color: var(--bnws-text);
    padding: 4px 0;
    list-style: none;
}
.bnws-smart-edit__sum::-webkit-details-marker { display: none; }
.bnws-smart-edit__sum .material-icons { color: var(--bnws-accent); }
.bnws-smart-edit__form { margin-top: 10px; display: flex; flex-direction: column; gap: 12px; }
.bnws-smart-edit__actions {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
    margin-top: 4px;
}
.bnws-smart-edit__delete { margin: 0; }

.bnws-form-row {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
    min-width: 0;
}
.bnws-form-row > .bnws-field { flex: 1 1 200px; min-width: 0; }
.bnws-field--sm { flex: 1 1 140px; min-width: 0; max-width: 220px; }
.bnws-check--inline {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--bnws-border);
    border-radius: 8px;
    background: var(--bnws-bg);
    font-size: 13px;
    cursor: pointer;
}
.bnws-check--inline .material-icons { font-size: 16px; color: #F5C518; }
.bnws-check--inline:has(input:checked) {
    background: rgba(245,197,24,0.12);
    border-color: rgba(245,197,24,0.45);
    color: #92760B;
}

/* Todo-Detail: Cards */
.bnws-todo-detail-wrap { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.bnws-todo-detail-head { display: flex; gap: 8px; flex-wrap: wrap; }
.bnws-todo-detail-head__form { margin: 0; }

/* Quadratische Icon-Buttons (Quick-Actions ohne Beschriftung). */
.bnws-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 10px;
    border: 1px solid var(--bnws-border);
    background: var(--bnws-card);
    color: var(--bnws-text);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.bnws-icon-btn:hover { border-color: var(--bnws-text); }
.bnws-icon-btn .material-icons { font-size: 22px; line-height: 1; }
.bnws-icon-btn--primary {
    background: var(--bnws-accent); border-color: var(--bnws-accent); color: #fff;
}
.bnws-icon-btn--primary:hover { background: var(--bnws-accent-dark); border-color: var(--bnws-accent-dark); }
.bnws-icon-btn--danger { color: #ef4444; }
.bnws-icon-btn--danger:hover { color: #fff; background: #ef4444; border-color: #ef4444; }

.bnws-todo-card {
    background: var(--bnws-surface);
    border: 1px solid var(--bnws-border);
    border-radius: 12px;
    padding: 16px;
    display: flex; flex-direction: column; gap: 12px;
    margin: 0;
}
.bnws-todo-card__head {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 4px;
}
.bnws-todo-card__head h3 { margin: 0; font-size: 16px; }
.bnws-todo-card__head .material-icons { color: var(--bnws-accent); }
.bnws-todo-card__hint { margin: 0; color: var(--bnws-muted); font-size: 13px; }
.bnws-todo-card__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.bnws-todo-card--reminder .bnws-todo-card__head .material-icons { color: #15803D; }
.bnws-todo-card--attachments .bnws-todo-card__head .material-icons { color: #6366f1; }

/* Detail-Page Tabs: schaltet zwischen Inhalt/Erinnerung/Anhänge um. Tab-Bar
 * nutzt die generische `.bnws-tabbar` (mobile: horizontal scrollbar) und
 * überschreibt nur Layout-Details. Panels sind via [hidden] gesteuert. */
.bnws-todo-detail-tabs { display: flex; flex-direction: column; gap: 12px; }
.bnws-todo-detail-tabbar { margin-bottom: 0; }
.bnws-todo-detail-tabbar .bnws-tabbar-item {
    border: 0; cursor: pointer; font: inherit;
}
.bnws-todo-detail-tabbar .bnws-tabbar-item.is-active { color: #fff; background: var(--bnws-accent); }
.bnws-todo-detail-tabbar .bnws-tabbar-item .material-icons { font-size: 18px; }
.bnws-todo-detail-panel { display: flex; flex-direction: column; gap: 12px; }
.bnws-todo-detail-panel[hidden] { display: none; }

/* Anhänge-Liste: Thumbnail + Name + Meta + Lösch-Button */
.bnws-attachments {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bnws-attachment {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border: 1px solid var(--bnws-border);
    border-radius: 8px;
    background: var(--bnws-bg);
}
.bnws-attachment__thumb {
    flex: 0 0 64px;
    width: 64px; height: 64px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0,0,0,0.04);
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
}
.bnws-attachment__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.bnws-attachment__thumb--icon .material-icons {
    font-size: 32px;
    color: var(--bnws-muted);
}
.bnws-attachment__body {
    flex: 1 1 auto;
    min-width: 0;
}
.bnws-attachment__name {
    display: block;
    color: var(--bnws-text);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bnws-attachment__name:hover { text-decoration: underline; }
.bnws-attachment__meta {
    display: flex; gap: 8px;
    font-size: 12px;
    color: var(--bnws-muted);
    margin-top: 2px;
}
.bnws-attachment__delete { margin: 0; }
.bnws-attachment-upload .bnws-field { margin-bottom: 8px; }

/* Designer-Dropzone für Anhang-Uploads.
   Native File-Input wird versteckt — Klicks/Tastatur werden vom Wrapper
   forwarded, Drag&Drop setzt `input.files` direkt. */
.bnws-dropzone {
    position: relative;
    display: block;
    border: 1.5px dashed var(--bnws-border);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(0,0,0,0.015), rgba(0,0,0,0.04));
    padding: 20px 16px;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
    outline: none;
}
.bnws-dropzone:hover {
    border-color: var(--bnws-accent);
    background: linear-gradient(180deg, rgba(3, 123, 252,0.04), rgba(3, 123, 252,0.08));
}
.bnws-dropzone:focus-visible {
    border-color: var(--bnws-accent);
    box-shadow: 0 0 0 3px rgba(3, 123, 252,0.18);
}
.bnws-dropzone.is-dragover {
    border-color: var(--bnws-accent);
    background: rgba(3, 123, 252,0.12);
    transform: scale(1.005);
}
.bnws-dropzone.is-filled {
    border-style: solid;
    background: var(--bnws-bg);
}
.bnws-dropzone__input {
    /* Visuell versteckt — Klick/Tastatur wird vom Zone-Wrapper an
       `input.click()` forwarded, Drag&Drop setzt `input.files` direkt. So
       überdeckt der File-Input keine Buttons (z.B. den Reset). */
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
    margin: 0;
}
.bnws-dropzone__idle {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    text-align: center;
    pointer-events: none;
}
.bnws-dropzone__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(3, 123, 252,0.10);
    color: var(--bnws-accent);
}
.bnws-dropzone__icon .material-icons { font-size: 26px; }
.bnws-dropzone__title {
    font-size: 14px; font-weight: 500;
    color: var(--bnws-text);
}
.bnws-dropzone__or {
    color: var(--bnws-muted); font-weight: 400; margin: 0 2px;
}
.bnws-dropzone__cta {
    color: var(--bnws-accent); text-decoration: underline;
}
.bnws-dropzone__hint {
    font-size: 12px;
    color: var(--bnws-muted);
}
.bnws-dropzone__preview {
    display: flex; align-items: center; gap: 12px;
    pointer-events: none; /* damit Klick weiter durch die Zone fliesst */
}
.bnws-dropzone__preview > * { pointer-events: auto; }
.bnws-dropzone__thumb {
    flex: 0 0 56px;
    width: 56px; height: 56px;
    border-radius: 8px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.06);
    color: var(--bnws-muted);
}
.bnws-dropzone__thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.bnws-dropzone__thumb .material-icons { font-size: 28px; }
.bnws-dropzone__file {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.bnws-dropzone__filename {
    font-size: 14px; font-weight: 500; color: var(--bnws-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bnws-dropzone__filesize {
    font-size: 12px; color: var(--bnws-muted);
}
.bnws-icon-btn--ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--bnws-muted);
}
.bnws-icon-btn--ghost:hover {
    background: rgba(0,0,0,0.06);
    color: var(--bnws-text);
}
@media (prefers-color-scheme: dark) {
    .bnws-dropzone {
        background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.05));
    }
    .bnws-dropzone:hover {
        background: linear-gradient(180deg, rgba(3, 123, 252,0.10), rgba(3, 123, 252,0.16));
    }
    .bnws-dropzone.is-filled {
        background: rgba(255,255,255,0.03);
    }
    .bnws-dropzone__thumb { background: rgba(255,255,255,0.06); }
    .bnws-icon-btn--ghost:hover { background: rgba(255,255,255,0.08); }
}

.bnws-todo-card--danger {
    background: rgba(220,38,38,0.04);
    border-color: rgba(220,38,38,0.20);
    padding: 12px 16px;
}

/* Chip-Radio / Chip-Check für Frequenz + Wochentage */
.bnws-chipgroup { display: flex; gap: 6px; flex-wrap: wrap; }
.bnws-chip-radio,
.bnws-chip-check { position: relative; cursor: pointer; }
.bnws-chip-radio input,
.bnws-chip-check input {
    position: absolute; opacity: 0; pointer-events: none;
}
.bnws-chip-radio__face,
.bnws-chip-check__face {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--bnws-border);
    border-radius: 999px;
    background: var(--bnws-bg);
    color: var(--bnws-text);
    font-size: 13px; line-height: 1.2;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
    user-select: none;
}
.bnws-chip-radio__face .material-icons,
.bnws-chip-check__face .material-icons { font-size: 16px; color: var(--bnws-muted); }
.bnws-chip-radio input:focus-visible + .bnws-chip-radio__face,
.bnws-chip-check input:focus-visible + .bnws-chip-check__face {
    outline: 2px solid var(--bnws-accent); outline-offset: 2px;
}
.bnws-chip-radio input:checked + .bnws-chip-radio__face,
.bnws-chip-check input:checked + .bnws-chip-check__face {
    background: var(--bnws-accent);
    border-color: var(--bnws-accent);
    color: #fff;
}
.bnws-chip-radio input:checked + .bnws-chip-radio__face .material-icons,
.bnws-chip-check input:checked + .bnws-chip-check__face .material-icons { color: #fff; }
.bnws-chip-check__face { min-width: 42px; justify-content: center; }

/* Empty-State mit Icon */
.bnws-empty__icon {
    display: block; margin: 0 auto 8px;
    font-size: 40px; color: var(--bnws-muted);
}

/* Alt-Klassen aus früherer Detail-Form bleiben erhalten, falls noch genutzt */
.bnws-fieldset {
    border: 1px solid var(--bnws-border);
    border-radius: 10px;
    padding: 12px 14px;
    margin: 8px 0;
    display: flex; flex-direction: column; gap: 10px;
}
.bnws-fieldset legend { padding: 0 6px; font-size: 13px; color: var(--bnws-muted); }
.bnws-checkgroup { display: flex; gap: 12px; flex-wrap: wrap; }
.bnws-check { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }

.bnws-btn--sm { padding: 6px 10px; font-size: 13px; }
.bnws-input--sm { padding: 6px 8px; font-size: 13px; }
.bnws-btn--danger { color: #ef4444; }
.bnws-btn--danger:hover { color: #dc2626; }

/* ----------------------------------------------------------------------
 * Dashboard „App-Look": kompakte Karten im Mobile-First-Stil.
 * ---------------------------------------------------------------------- */

/* App-Card (Top-Todos / Uptime / weitere kompakte Module). Ersetzt das alte
 * inline-styled „bnws-chart-card" mit border-color-Schummel. */
.bnws-app-card {
    background: var(--bnws-card);
    border: 1px solid var(--bnws-border);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(15,16,40,0.03);
    display: flex; flex-direction: column; gap: 12px;
}
.bnws-app-card__head {
    display: flex; align-items: center; gap: 12px;
}
.bnws-app-card__icon {
    width: 40px; height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--accent, var(--bnws-accent)) 14%, transparent);
    color: var(--accent, var(--bnws-accent));
}
.bnws-app-card__icon .material-icons { font-size: 22px; }
.bnws-app-card__titlewrap {
    flex: 1; min-width: 0; display: flex; flex-direction: column;
}
.bnws-app-card__title { margin: 0; font-size: 16px; font-weight: 600; color: var(--bnws-text); }
.bnws-app-card__sub { font-size: 12px; color: var(--bnws-muted); }
.bnws-app-card__more {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 13px; font-weight: 600;
    color: var(--bnws-accent); text-decoration: none;
    padding: 6px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--bnws-accent) 10%, transparent);
}
.bnws-app-card__more:hover { background: color-mix(in srgb, var(--bnws-accent) 18%, transparent); }
.bnws-app-card__more .material-icons { font-size: 16px; }
.bnws-app-card__empty { margin: 0; color: var(--bnws-muted); font-size: 14px; }
.bnws-app-card__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.bnws-app-card__grid {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px;
}
.bnws-app-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--bnws-border);
    border-radius: 10px;
    background: var(--bnws-bg);
}
.bnws-app-row__leading { color: var(--bnws-muted); font-size: 20px; }
.bnws-app-row__leading[data-starred="1"] { color: #F59E0B; }
.bnws-app-row__title {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--bnws-text); text-decoration: none; font-size: 14px;
}
.bnws-app-row__title:hover { color: var(--bnws-accent); }
.bnws-app-row__rt { font-size: 12px; color: var(--bnws-muted); font-variant-numeric: tabular-nums; }
.bnws-app-badge {
    flex: 0 0 auto;
    font-size: 11px; font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
}
.bnws-app-badge--danger { background: rgba(220,38,38,0.12); color: #B91C1C; }
.bnws-app-badge--warn   { background: rgba(245,158,11,0.16); color: #B45309; }
.bnws-app-badge--muted  { background: var(--bnws-bg); color: var(--bnws-muted); border: 1px solid var(--bnws-border); }

/* Uptime-KPI-Zeile: kompakte Zahlen pro Status (grün/orange/rot). */
.bnws-uptime-kpis {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.bnws-uptime-kpi {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--bnws-border);
    border-radius: 12px;
    background: var(--bnws-bg);
}
.bnws-uptime-kpi__dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--bnws-muted);
    flex: 0 0 auto;
}
.bnws-uptime-kpi--up      .bnws-uptime-kpi__dot { background: #2DBB5D; }
.bnws-uptime-kpi--pending .bnws-uptime-kpi__dot { background: #FF8C42; }
.bnws-uptime-kpi--down    .bnws-uptime-kpi__dot { background: #E63946; }
.bnws-uptime-kpi__num { font-size: 18px; font-weight: 700; color: var(--bnws-text); font-variant-numeric: tabular-nums; }
.bnws-uptime-kpi__lbl { font-size: 12px; color: var(--bnws-muted); }

@media (max-width: 768px) {
    .bnws-app-card { padding: 14px; border-radius: 14px; }
    .bnws-app-card__icon { width: 36px; height: 36px; flex-basis: 36px; border-radius: 10px; }
    .bnws-app-card__icon .material-icons { font-size: 20px; }
    .bnws-app-card__title { font-size: 15px; }
    .bnws-app-card__more {
        /* Auf Mobile Label ausblenden, nur Pfeil — spart Platz im Header. */
        font-size: 0; padding: 6px;
    }
    .bnws-app-card__more .material-icons { font-size: 18px; }
    .bnws-app-card__grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------
 * Todos-Sidebar: More-Menü pro Liste (Umbenennen/Löschen) und mobile
 * Smart-Listen-Chip-Reihe. Beide Eingriffe sind additive Erweiterungen.
 * ---------------------------------------------------------------------- */

/* Listen-Eintrag wird zur 2-Zeile-Komposition: Link + More-Button.
 * Default-Liste hat keinen More-Button (PHP rendert ihn nicht). */
.bnws-todo-side__row {
    display: flex; align-items: stretch; gap: 2px;
    position: relative;
}
.bnws-todo-side__row .bnws-todo-side__item { flex: 1; min-width: 0; }
.bnws-todo-side__row .bnws-todo-side__item span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bnws-todo-side__more {
    position: relative;
}
.bnws-todo-side__more > summary {
    list-style: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    color: var(--bnws-muted);
    cursor: pointer;
    align-self: center;
}
.bnws-todo-side__more > summary::-webkit-details-marker { display: none; }
.bnws-todo-side__more > summary:hover {
    background: var(--bnws-bg);
    color: var(--bnws-text);
}
.bnws-todo-side__row .bnws-todo-side__item.is-active + .bnws-todo-side__more > summary { color: rgba(255,255,255,.85); }
.bnws-todo-side__row .bnws-todo-side__item.is-active + .bnws-todo-side__more > summary:hover {
    background: rgba(255,255,255,.18);
    color: #fff;
}
.bnws-todo-side__menu {
    position: absolute;
    right: 0; top: calc(100% + 4px);
    min-width: 180px;
    background: var(--bnws-card);
    border: 1px solid var(--bnws-border);
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(15,16,40,0.10);
    padding: 4px;
    z-index: 30;
    display: flex; flex-direction: column;
}
.bnws-todo-side__menu form { margin: 0; }
.bnws-todo-side__menu button,
.bnws-todo-side__menu .bnws-todo-side__menu-input {
    background: transparent;
    border: none;
    width: 100%;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    text-align: left;
    font: inherit; color: var(--bnws-text);
    cursor: pointer;
    border-radius: 6px;
}
.bnws-todo-side__menu button:hover { background: var(--bnws-bg); }
.bnws-todo-side__menu button .material-icons { font-size: 18px; color: var(--bnws-muted); }
.bnws-todo-side__menu .bnws-todo-side__menu-danger { color: #B91C1C; }
.bnws-todo-side__menu .bnws-todo-side__menu-danger .material-icons { color: #B91C1C; }
.bnws-todo-side__menu .bnws-todo-side__menu-rename {
    display: flex; gap: 4px; padding: 6px;
    border-bottom: 1px solid var(--bnws-border);
    margin-bottom: 4px;
}
.bnws-todo-side__menu .bnws-todo-side__menu-rename input {
    flex: 1; min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--bnws-border);
    border-radius: 6px;
    font-size: 13px;
}
.bnws-todo-side__menu .bnws-todo-side__menu-rename button {
    width: auto; padding: 6px 8px;
    background: var(--bnws-accent); color: #fff;
}
.bnws-todo-side__menu .bnws-todo-side__menu-rename button:hover { background: var(--bnws-accent-dark); }

/* Custom Color-Swatcher (ersetzt den nativen <input type=color>).
 * 30 kuratierte Farben + „keine Farbe" als Reset-Swatch. Jeder Swatch ist ein
 * eigener Submit-Button — ein Klick reicht, kein OS-Color-Picker. Auf Mobile
 * gut tippbar (min ~36px Touch-Target). */
.bnws-todo-side__menu .bnws-color-picker {
    display: flex; flex-direction: column; gap: 6px;
    padding: 8px 6px;
}
.bnws-color-picker__head {
    display: flex; align-items: center; gap: 8px;
    padding: 0 2px 2px;
    font-size: 13px; color: var(--bnws-muted);
}
.bnws-color-picker__head .material-icons { font-size: 18px; }
.bnws-todo-side__menu .bnws-color-swatcher {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}
/* Selektoren bewusst mit Menü-Scope, damit sie das generische
 * `.bnws-todo-side__menu button { width: 100%; padding: 8px 10px; … }` aus
 * Zeile 2504+ überschreiben (sonst werden die Swatches als breite Zeilen
 * gerendert statt als quadratische Kacheln). */
.bnws-todo-side__menu .bnws-color-swatch {
    appearance: none; -webkit-appearance: none;
    display: block;
    margin: 0; padding: 0; border: 2px solid transparent;
    background: var(--swatch, transparent);
    width: 100%; aspect-ratio: 1 / 1; min-height: 28px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.bnws-todo-side__menu .bnws-color-swatch:hover {
    transform: scale(1.08);
    background: var(--swatch, transparent); /* Hover-Default des Menüs neutralisieren. */
}
.bnws-todo-side__menu .bnws-color-swatch:focus-visible {
    outline: 2px solid var(--bnws-accent);
    outline-offset: 2px;
}
.bnws-todo-side__menu .bnws-color-swatch.is-selected {
    border-color: #ffffff;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.85), 0 2px 6px rgba(0, 0, 0, 0.18);
}
.bnws-todo-side__menu .bnws-color-swatch.is-selected::after {
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 7'/></svg>");
    background-size: 60% 60%;
    background-position: center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}
.bnws-todo-side__menu .bnws-color-swatch--clear {
    background: #ffffff;
    border-color: var(--bnws-border, #cbd5e1);
    overflow: hidden;
}
.bnws-todo-side__menu .bnws-color-swatch--clear:hover { background: #ffffff; }
.bnws-todo-side__menu .bnws-color-swatch--clear .bnws-color-swatch__none {
    position: absolute; inset: 2px;
    border-radius: 4px;
    background-image: linear-gradient(
        to top right,
        transparent 0%, transparent calc(50% - 1.2px),
        #ef4444 calc(50% - 1.2px), #ef4444 calc(50% + 1.2px),
        transparent calc(50% + 1.2px), transparent 100%
    );
}
/* Wenn „Keine Farbe" aktiv ist: kein weißer Check über dem roten X. */
.bnws-todo-side__menu .bnws-color-swatch--clear.is-selected { border-color: var(--bnws-accent); }
.bnws-todo-side__menu .bnws-color-swatch--clear.is-selected::after { display: none; }

/* Touch-Targets auf Mobile etwas größer: Daumen statt Mauszeiger. */
@media (max-width: 600px) {
    .bnws-todo-side__menu .bnws-color-swatcher { gap: 8px; }
    .bnws-todo-side__menu .bnws-color-swatch { min-height: 38px; border-radius: 10px; }
}

/* Desktop: Smart-Listen vertikal (gleiches Verhalten wie zuvor). */
.bnws-todo-side__group--smart .bnws-todo-side__chips {
    display: flex; flex-direction: column; gap: 4px;
}

/* Smart-Listen auf Mobile als horizontale Chip-Reihe — spart Vertikal-Platz. */
@media (max-width: 768px) {
    .bnws-todo-side__group--smart .bnws-todo-side__title { margin-bottom: 6px; }
    .bnws-todo-side__group--smart .bnws-todo-side__chips {
        flex-direction: row;
        gap: 6px;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .bnws-todo-side__group--smart .bnws-todo-side__chips::-webkit-scrollbar { display: none; }
    .bnws-todo-side__group--smart .bnws-todo-side__item {
        flex: 0 0 auto;
        padding: 6px 12px;
        border-radius: 999px;
        background: var(--bnws-bg);
        border: 1px solid var(--bnws-border);
        font-size: 13px;
        line-height: 1;
    }
    .bnws-todo-side__group--smart .bnws-todo-side__item .material-icons { font-size: 16px; }
    .bnws-todo-side__group--smart .bnws-todo-side__item.is-active {
        background: var(--bnws-accent);
        color: #fff;
        border-color: var(--bnws-accent);
    }
    .bnws-todo-side__group--smart .bnws-todo-side__add {
        flex: 0 0 auto;
        margin-top: 0;
        align-items: center;
    }
    .bnws-todo-side__group--smart .bnws-todo-side__add .bnws-input {
        width: 140px;
        border-radius: 999px;
        padding: 6px 10px;
        font-size: 13px;
    }
    .bnws-todo-side__group--smart .bnws-todo-side__add .bnws-btn {
        border-radius: 999px;
    }
}

/* ----------------------------------------------------------------------
 * Vorlagen-CRUD-Form: Inline-Editor pro Karte + Anlegen-Form.
 * Items werden als textarea mit eine Zeile-pro-Item eingegeben.
 * Mit „- " Prefix wird das Item zum Sub-Item des darüberliegenden.
 * ---------------------------------------------------------------------- */
.bnws-todo-tpl-card__actions {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-top: auto;
}
.bnws-todo-tpl-card__actions form { margin: 0; }
.bnws-todo-tpl-form {
    background: var(--bnws-surface);
    border: 1px solid var(--bnws-border);
    border-radius: 14px;
    padding: 0;
    margin-bottom: 16px;
    overflow: hidden;
}
.bnws-todo-tpl-form > summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 16px;
    display: flex; align-items: center; gap: 10px;
    user-select: none;
    background: var(--bnws-bg);
    border-bottom: 1px solid var(--bnws-border);
}
.bnws-todo-tpl-form > summary::-webkit-details-marker { display: none; }
.bnws-todo-tpl-form > summary::before {
    content: 'expand_more';
    font-family: 'Material Icons';
    font-size: 22px;
    color: var(--bnws-muted);
    transition: transform 150ms ease;
}
.bnws-todo-tpl-form[open] > summary::before { transform: rotate(180deg); }
.bnws-todo-tpl-form h3 { margin: 0; font-size: 16px; }
.bnws-todo-tpl-form > form {
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px;
}
.bnws-todo-tpl-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr 120px 100px;
    gap: 10px;
}
@media (max-width: 768px) {
    .bnws-todo-tpl-form__row { grid-template-columns: 1fr 1fr; }
}
.bnws-todo-tpl-form textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    min-height: 160px;
}
.bnws-todo-tpl-form__hint { font-size: 12px; color: var(--bnws-muted); margin: 0; }
.bnws-todo-tpl-form__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------------
 * Todos: Swipe-Gesten (archive/delete) + Drag-&-Drop-Sortierung
 *
 * - Swipe rechts→links: rot-orange Archive-Hintergrund, archiviert nach 5s
 * - Swipe links→rechts: rot Delete-Hintergrund, löscht nach 5s (Undo via Toast)
 * - DnD: Items werden per Touch-/Pointer-Long-Press sortierbar; das aktive
 *   Item bekommt is-dragging + Drop-Slot wird via ::before angedeutet.
 * ------------------------------------------------------------------ */
.bnws-todo {
    position: relative;
    touch-action: pan-y; /* erlaubt vertikales Scrollen, horizontale Swipes fangen wir ab */
    overflow: hidden;
    /* iOS-Safari zeigt sonst beim Long-Press auf dem Title-Link sein eigenes
     * Callout-Menü („URL kopieren …") an, das mit unserem armed-Modus
     * kollidiert. Außerdem verhindert user-select die Lupen-Selektion. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
.bnws-todo .bnws-todo__title {
    -webkit-touch-callout: none;
}
.bnws-todo__swipe-bg {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: flex-end;
    padding: 0 18px; color: #fff;
    font-weight: 600; font-size: 14px;
    opacity: 0; pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}
.bnws-todo__swipe-bg .material-icons { font-size: 22px; }
.bnws-todo[data-swipe-dir="left"] .bnws-todo__swipe-bg--archive {
    background: linear-gradient(90deg, transparent, #f59e0b 40%);
    justify-content: flex-end;
    opacity: 1;
}
.bnws-todo[data-swipe-dir="right"] .bnws-todo__swipe-bg--delete {
    background: linear-gradient(-90deg, transparent, #ef4444 40%);
    justify-content: flex-start;
    opacity: 1;
}
.bnws-todo__inner {
    display: flex; align-items: center; gap: 10px;
    position: relative; z-index: 1;
    background: inherit;
    transform: translateX(0);
    transition: transform 180ms ease;
    width: 100%;
}
/* Hat das Item Meta-Inhalte (Frist/Chips/Details)? Dann Items oben ausrichten,
 * damit der Title nicht mittig zu den Chips driftet. Sonst (häufiger Fall mit
 * nur Titel) bleibt das Inner vertikal zentriert — spart Höhe. */
.bnws-todo:has(.bnws-todo__meta) .bnws-todo__inner { align-items: flex-start; }
.bnws-todo.is-swiping .bnws-todo__inner { transition: none; }
.bnws-todo.is-pending-archive,
.bnws-todo.is-pending-delete {
    opacity: 0.45;
    pointer-events: none;
}
.bnws-todo.is-pending-archive .bnws-todo__inner { transform: translateX(-110%); }
.bnws-todo.is-pending-delete  .bnws-todo__inner { transform: translateX(110%); }

/* Insta-Hide-Animation: das Item kollabiert sofort beim Archive/Delete und
 * legt unten keinen Leerraum mehr. JS setzt max-height/opacity/padding/margin
 * inline auf 0 — CSS liefert nur die Transition + overflow:hidden, damit
 * Sliding und Collapse zusammenpassen. Die Web Animations API würde sich
 * hier auch anbieten; wir bleiben bei Transitions, weil sie billiger zu
 * reversen sind (einfach inline-Werte zurücksetzen → CSS-Transition läuft
 * automatisch rückwärts). Subtask-UL und Subtask-Add-Form fallen mit,
 * damit die Liste nicht „löchrig" wirkt. */
.bnws-todo.is-removing,
.bnws-todo-subs.is-removing,
.bnws-todo-subadd.is-removing {
    transition: max-height 220ms ease, opacity 200ms ease,
                padding-top 220ms ease, padding-bottom 220ms ease,
                margin-top 220ms ease, margin-bottom 220ms ease,
                border-top-width 220ms ease, border-bottom-width 220ms ease,
                transform 220ms ease;
    overflow: hidden;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .bnws-todo.is-removing,
    .bnws-todo-subs.is-removing,
    .bnws-todo-subadd.is-removing {
        transition: none;
    }
}

/* DnD-State */
.bnws-todo.is-dragging {
    opacity: 0.5;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}
.bnws-todo.is-drop-target {
    border-top: 2px solid var(--bnws-accent);
}
.bnws-todo-drag-handle {
    cursor: grab; user-select: none;
    color: var(--bnws-muted);
    padding: 0 4px;
    display: inline-flex; align-items: center;
}
.bnws-todo-drag-handle:active { cursor: grabbing; }

/* Smart-Liste im 3-Punkt-Menü: Edit-Form passt sich der schmaleren Menü-
 * Breite an (Felder untereinander statt nebeneinander). */
.bnws-smart-more__panel {
    min-width: 280px;
    max-width: 360px;
    padding: 12px;
    display: flex; flex-direction: column; gap: 10px;
}
.bnws-smart-more__panel .bnws-form-row {
    display: flex; flex-direction: column; gap: 10px;
}

/* Sub-Tasks im Detail-Panel: kompakter Layout-Style */
.bnws-todo-card--subtasks { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.bnws-todo-subs--detail {
    padding-left: 0; margin: 0;
    list-style: none;
    display: flex; flex-direction: column; gap: 6px;
}
.bnws-todo-subs--detail .bnws-todo { background: var(--bnws-bg); }
.bnws-todo-card--subtasks .bnws-todo-subadd { padding: 4px 0; }

/* Long-Press-Modus für Swipe: visuelles Feedback, dass die Geste „armed" ist
 * und nun horizontal über das gesamte Item gewischt werden kann. */
.bnws-todo.is-swipe-armed {
    box-shadow: 0 6px 16px rgba(3, 123, 252, 0.18);
    z-index: 2;
}
.bnws-todo.is-swipe-armed .bnws-todo__inner {
    transition: none;
}

/* Tab-Drag: aktives Tab wird leicht angehoben und folgt dem Finger. */
.bnws-todo-tabbar__item.is-dragging {
    opacity: 0.85;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    z-index: 3;
    cursor: grabbing;
}
/* Long-Press in Progress: dezenter Inset-Shadow gibt Feedback, dass das
 * Halten erkannt wird — bevor der Modal-Trigger nach 350ms feuert. */
.bnws-todo-tabbar__item.is-pressing {
    background: var(--bnws-bg);
    transition: background 200ms ease;
}

/* Smart-Edit-Modal: maximale Breite + scrollbare Body bei Bedarf. */
.bnws-smart-edit-modal .bnws-modal { max-width: 520px; }
.bnws-smart-edit-modal .bnws-form-row {
    display: flex; gap: 10px; flex-wrap: wrap;
}
.bnws-smart-edit-modal .bnws-form-row > .bnws-field { flex: 1 1 200px; min-width: 0; }
.bnws-smart-edit-modal .bnws-smart-edit__actions {
    display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px;
}

/* „Bearbeiten"-Button im 3-Punkt-Menü: gleicher Look wie die Form-Einträge
 * (rename/delete) — Display-Button statt Link, damit kein Navigieren passiert. */
.bnws-todo-side__menu-link {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    background: none; border: none;
    padding: 8px 12px;
    text-align: left;
    cursor: pointer;
    color: var(--bnws-text);
    font: inherit;
}
.bnws-todo-side__menu-link:hover { background: var(--bnws-bg); }
.bnws-todo-side__menu-link .material-icons { font-size: 18px; color: var(--bnws-muted); }

/* Reorder-Modal (Listen sortieren): vertikale Liste mit Drag-Handle und
 * Up/Down-Pfeilen — auf Mobile die robuste Alternative zu Inline-DnD
 * auf der horizontalen Tab-Bar. */
.bnws-reorder-modal .bnws-modal { max-width: 480px; }
.bnws-reorder-modal__hint { margin: 0 0 12px; font-size: 13px; }
.bnws-reorder-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 6px;
}
.bnws-reorder-row {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    background: var(--bnws-surface);
    border: 1px solid var(--bnws-border);
    border-radius: 10px;
    user-select: none;
    -webkit-user-select: none;
    /* touch-action absichtlich NICHT auf der ganzen Row — sonst kann der
     * User den Modal-Body nicht mehr vertikal scrollen, wenn die Listen
     * überlaufen. Suppression nur auf .bnws-reorder-row__handle, wo der
     * DnD startet (Codex-Review-Finding zu PR #43). */
}
.bnws-reorder-row.is-dragging {
    opacity: 0.6;
    box-shadow: 0 4px 14px rgba(0,0,0,0.16);
    z-index: 5;
}
.bnws-reorder-row__handle {
    background: none; border: none; padding: 4px;
    color: var(--bnws-muted); cursor: grab;
    display: inline-flex; align-items: center;
    touch-action: none;
}
.bnws-reorder-row__handle:active { cursor: grabbing; }
.bnws-reorder-row__icon .material-icons {
    color: var(--bnws-muted); font-size: 18px;
}
.bnws-reorder-row__title {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 500;
}
.bnws-reorder-row__up:disabled,
.bnws-reorder-row__down:disabled { opacity: 0.3; pointer-events: none; }

/* ------------------------------------------------------------------ */
/* Infra-Cockpit: Tabellen-Scroll auf Mobile.                          */
/* Gewünscht: die Tabelle bleibt komplett im Viewport und scrollt      */
/* INNERHALB beide Achsen (horizontal + vertikal), Header bleibt sticky.*/
/* Dafür den Scroll-Container auf Viewport-Höhe begrenzen + overflow    */
/* auf beiden Achsen auto (vorher overflow-y:hidden → kein V-Scroll).  */
/* Mobile-only (max-width:782px) → Desktop nutzt die boows-Defaults.    */
@media screen and (max-width: 782px) {
  .boows-table .scroll-container {
    max-height: 68vh !important;   /* Tabelle passt in den Viewport */
    overflow-x: auto !important;   /* horizontal scrollbar */
    overflow-y: auto !important;   /* vertikal scrollbar INNERHALB der Tabelle */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }
  /* der Scroll-Container begrenzt die Höhe; der innere Body voll hoch,
   * damit alle Zeilen per Scroll erreichbar sind. */
  .boows-table .data-container {
    max-height: none !important;
  }
  /* Sticky Header auch im internen Scroll sichtbar halten. */
  .boows-table .data-container header.adm-table-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bnws-card);
  }
}

/* ------------------------------------------------------------------ */
/* boows-Popups/Overlays/Selects: Dark-Mode-Override.                  */
/* boows nutzt für diese Container hartkodiertes #fff → im Dark-Mode    */
/* weiß. Auf die Hub-Tokens ziehen. In BEIDEN Dark-Kontexten (manuell + */
/* System-Preference), analog zum Token-Block oben. Höhere Spezifität   */
/* als die Vendor-Regeln, daher kein !important nötig.                 */
/* ------------------------------------------------------------------ */
:root[data-theme="dark"] .boows-table-overlay,
:root[data-theme="dark"] .boows-table .search-table-box .column-list,
:root[data-theme="dark"] .boows-select-list,
:root[data-theme="dark"] .boows-select.opened {
    background: var(--bnws-card);
    color: var(--bnws-text);
    border-color: var(--bnws-border);
}
/* boows-Popup (Modal/Bottom-Sheet) inkl. Mobile-Select-Popup: hartkodiert
 * weiß (#fff bzw. rgba(255,255,255,.95)). Im Dark-Mode auf Card-Token ziehen.
 * Höhere Spezifität (0,3,0) als die Vendor-Regel `.boows-select-mobile-popup
 * .boows-popup` (0,2,0). */
:root[data-theme="dark"] .boows-popup,
:root[data-theme="dark"] .boows-select-mobile-popup .boows-popup {
    background: var(--bnws-card);
    color: var(--bnws-text);
}
:root[data-theme="dark"] .boows-select-mobile-option,
:root[data-theme="dark"] .boows-select-mobile-option .item-text {
    color: var(--bnws-text);
}

/* Such-Zeile + Input innerhalb des Selects (boows nutzt #f6f8f9 / #fff). */
:root[data-theme="dark"] .boows-search-box,
:root[data-theme="dark"] .boows-search-field,
:root[data-theme="dark"] .boows-table-filter-box {
    background: var(--bnws-surface, var(--bnws-card));
    color: var(--bnws-text);
    border-color: var(--bnws-border);
}
:root[data-theme="dark"] .boows-table-overlay .column-item,
:root[data-theme="dark"] .boows-select-list .boows-select-option,
:root[data-theme="dark"] .boows-select-item,
:root[data-theme="dark"] .boows-not-found {
    color: var(--bnws-text);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .boows-table-overlay,
    :root:not([data-theme="light"]) .boows-table .search-table-box .column-list,
    :root:not([data-theme="light"]) .boows-select-list,
    :root:not([data-theme="light"]) .boows-select.opened {
        background: var(--bnws-card);
        color: var(--bnws-text);
        border-color: var(--bnws-border);
    }
    :root:not([data-theme="light"]) .boows-popup,
    :root:not([data-theme="light"]) .boows-select-mobile-popup .boows-popup {
        background: var(--bnws-card);
        color: var(--bnws-text);
    }
    :root:not([data-theme="light"]) .boows-select-mobile-option,
    :root:not([data-theme="light"]) .boows-select-mobile-option .item-text {
        color: var(--bnws-text);
    }
    :root:not([data-theme="light"]) .boows-search-box,
    :root:not([data-theme="light"]) .boows-search-field,
    :root:not([data-theme="light"]) .boows-table-filter-box {
        background: var(--bnws-surface, var(--bnws-card));
        color: var(--bnws-text);
        border-color: var(--bnws-border);
    }
    :root:not([data-theme="light"]) .boows-table-overlay .column-item,
    :root:not([data-theme="light"]) .boows-select-list .boows-select-option,
    :root:not([data-theme="light"]) .boows-select-item,
    :root:not([data-theme="light"]) .boows-not-found {
        color: var(--bnws-text);
    }
}