/* ==========================================================================
   Baby-Buddy-Theme "Mitternacht" — Gestaltungsschicht über Bootstrap 5.3
   Wird per nginx sub_filter NACH app.css eingehängt und überschreibt nur.
   Aufbau:
     1 Schrift          5 Karten            9 Formulare
     2 Tokens           6 Bottom-Bar/Sheet  10 Tabellen
     3 Grundlagen       7 Stillen-Karte     11 Desktop
     4 Kopfleiste       8 Listen/Verlauf    12 Bewegung
   ========================================================================== */

/* ---------------------------------------------------------------- 1 Schrift */
@font-face {
    font-family: "Manrope var";
    src: url("/theme/fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Manrope var";
    src: url("/theme/fonts/manrope-latin-ext-wght-normal.woff2") format("woff2-variations");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
        U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------- 2 Tokens */
:root,
[data-bs-theme="dark"] {
    color-scheme: dark;

    /* Palette: warmes Mitternacht statt Bootstrap-Grau */
    --bb-bg: #0f0e13;
    --bb-bg-elev: #141320;
    --bb-surface: #17161d;
    --bb-surface-2: #1e1d27;
    --bb-surface-3: #262530;
    --bb-line: #2b2a36;
    --bb-line-soft: rgba(255, 255, 255, 0.06);
    --bb-ink: #f3f2f8;
    --bb-muted: #a09db6;
    --bb-faint: #7d7a92;

    /* Aktionen */
    --bb-accent: #f0a05a;
    --bb-accent-hi: #ffb877;
    --bb-accent-ink: #2a1503;
    --bb-accent-soft: rgba(240, 160, 90, 0.14);

    /* Aktivitaeten */
    --bb-feeding: #f0a05a;
    --bb-sleep: #8d8bf2;
    --bb-diaper: #59cfae;
    --bb-tummy: #f27a9b;
    --bb-pump: #7cc0f2;
    --bb-med: #c58cf0;
    --bb-danger: #f2797f;

    --bb-r-sm: 10px;
    --bb-r: 16px;
    --bb-r-lg: 22px;
    --bb-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.8);
    --bb-tap: 46px;

    /* Bootstrap 5.3 umbiegen */
    --bs-body-bg: var(--bb-bg);
    --bs-body-color: var(--bb-ink);
    --bs-body-font-family: "Manrope var", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-body-font-size: 1rem;
    --bs-body-line-height: 1.5;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: var(--bb-muted);
    --bs-tertiary-color: var(--bb-faint);
    --bs-secondary-bg: var(--bb-surface-2);
    --bs-tertiary-bg: var(--bb-surface);
    --bs-border-color: var(--bb-line);
    --bs-border-color-translucent: var(--bb-line-soft);
    --bs-heading-color: var(--bb-ink);

    --bs-primary: var(--bb-accent);
    --bs-primary-rgb: 240, 160, 90;
    --bs-primary-text-emphasis: var(--bb-accent-hi);
    --bs-primary-bg-subtle: var(--bb-accent-soft);
    --bs-primary-border-subtle: rgba(240, 160, 90, 0.4);
    --bs-link-color: var(--bb-accent);
    --bs-link-color-rgb: 240, 160, 90;
    --bs-link-hover-color: var(--bb-accent-hi);
    --bs-link-hover-color-rgb: 255, 184, 119;

    --bs-success: var(--bb-diaper);
    --bs-success-rgb: 89, 207, 174;
    --bs-success-text-emphasis: #8ce4c9;
    --bs-success-bg-subtle: rgba(89, 207, 174, 0.12);
    --bs-success-border-subtle: rgba(89, 207, 174, 0.35);
    --bs-info: var(--bb-pump);
    --bs-info-rgb: 124, 192, 242;
    --bs-warning: var(--bb-accent);
    --bs-warning-rgb: 240, 160, 90;
    --bs-danger: var(--bb-danger);
    --bs-danger-rgb: 242, 121, 127;
    --bs-danger-text-emphasis: #ff9aa0;
    --bs-danger-bg-subtle: rgba(242, 121, 127, 0.12);
    --bs-danger-border-subtle: rgba(242, 121, 127, 0.35);

    --bs-border-radius: var(--bb-r-sm);
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: var(--bb-r);
    --bs-border-radius-xl: var(--bb-r-lg);
    --bs-box-shadow: var(--bb-shadow);
    --bs-box-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bs-focus-ring-color: rgba(240, 160, 90, 0.4);

    --bs-card-bg: var(--bb-surface);
    --bs-card-border-color: var(--bb-line);
    --bs-card-cap-bg: transparent;
    --bs-card-inner-border-radius: var(--bb-r-sm);
    --bs-list-group-bg: transparent;
    --bs-list-group-color: var(--bb-ink);
    --bs-list-group-border-color: var(--bb-line-soft);
    --bs-list-group-action-hover-bg: var(--bb-surface-2);
    --bs-list-group-action-active-bg: var(--bb-surface-3);
    --bs-dropdown-bg: var(--bb-surface-2);
    --bs-dropdown-border-color: var(--bb-line);
    --bs-dropdown-link-hover-bg: var(--bb-surface-3);
    --bs-dropdown-link-active-bg: var(--bb-accent-soft);
    --bs-modal-bg: var(--bb-surface);
    --bs-offcanvas-bg: var(--bb-surface);
    --bs-table-bg: transparent;
    --bs-table-color: var(--bb-ink);
    --bs-table-border-color: var(--bb-line-soft);
    --bs-navbar-bg: transparent;
    --bs-navbar-color: var(--bb-muted);
    --bs-navbar-active-color: var(--bb-ink);
    --bs-form-control-bg: var(--bb-surface-2);
    --bs-form-control-color: var(--bb-ink);
}

/* ------------------------------------------------------------- 3 Grundlagen */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--bb-bg);
    color: var(--bb-ink);
    font-family: var(--bs-body-font-family);
    letter-spacing: -0.005em;
    padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px));
    /* Kein overflow-x auf body: das macht den Body selbst zum Scroll-Container
       und bricht window.scrollY, Sticky-Verhalten und das Scrollen am Handy. */
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

h1, .h1 { font-size: 1.6rem; }
.h2, h2 { font-size: 1.35rem; }

small, .small { font-size: 0.8125rem; }
.text-secondary, .text-body-secondary { color: var(--bb-muted) !important; }
.text-muted { color: var(--bb-muted) !important; }
hr { border-color: var(--bb-line); opacity: 1; }

a { text-decoration-thickness: 1px; text-underline-offset: 2px; }

:focus-visible {
    outline: 2px solid var(--bb-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

.container-fluid {
    padding-left: 16px;
    padding-right: 16px;
    max-width: 760px;
    margin: 0 auto;
}

/* Kopfzeilentitel der Unterseiten (h1 direkt in der Seite) */
#view-coren\:feeding-add > .row > div > h1,
.page-title-h1 { margin-top: 4px; margin-bottom: 14px; }

/* ------------------------------------------------------------ 4 Kopfleiste */
nav.navbar {
    background: var(--bb-bg) !important;
    border-bottom: 1px solid var(--bb-line);
    padding: 6px 12px;
    min-height: 58px;
    box-shadow: 0 6px 18px -14px rgba(0, 0, 0, 0.9);
}

nav.navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 0;
    padding: 0;
}

nav.navbar .navbar-brand img {
    width: 30px;
    height: 30px;
    border-radius: 9px;
}

/* Titel in der Leiste wird von theme.js eingesetzt */
.bb-topbar-title {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 45vw;
    color: var(--bb-ink);
}

.bb-topbar-sub {
    display: block;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--bb-muted);
    margin-top: -2px;
}

/* Die alten Icon-Kurzwege verschwinden: die uebernimmt die Bottom-Bar */
nav.navbar .d-lg-none,
nav.navbar .d-md-none,
nav.navbar .navbar-brand + .d-lg-none { display: none !important; }

nav.navbar .navbar-toggler {
    border: 1px solid var(--bb-line);
    border-radius: 12px;
    width: var(--bb-tap);
    height: var(--bb-tap);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bb-surface-2);
}
nav.navbar .navbar-toggler:focus { box-shadow: none; }
nav.navbar .navbar-toggler-icon {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f3f2f8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
}

/* Aufgeklapptes Menue: saubere Liste statt enger Bootstrap-Nav */
nav.navbar .navbar-collapse {
    background: var(--bb-surface);
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r);
    margin-top: 10px;
    padding: 8px;
    max-height: 72vh;
    overflow-y: auto;
}
nav.navbar .navbar-nav .nav-link {
    border-radius: var(--bb-r-sm);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: var(--bb-ink);
}
nav.navbar .navbar-nav .nav-link:active,
nav.navbar .navbar-nav .nav-link:hover { background: var(--bb-surface-2); }
nav.navbar .navbar-nav .nav-link.active { background: var(--bb-accent-soft); color: var(--bb-accent-hi); }
nav.navbar .navbar-nav .nav-link i,
nav.navbar .nav-link i { font-size: 1.15rem; width: 22px; text-align: center; color: var(--bb-muted); }
nav.navbar .navbar-nav .nav-link.active i { color: var(--bb-accent); }
nav.navbar .dropdown-menu { border-radius: var(--bb-r-sm); }
nav.navbar .dropdown-item { border-radius: var(--bb-r-sm); padding: 10px 12px; }

/* Breadcrumbs: mobil Ballast, am Desktop dezent */
.breadcrumb {
    background: none;
    padding: 0;
    margin: 14px 0 10px;
    font-size: 0.8125rem;
}
.breadcrumb-item a { color: var(--bb-muted); text-decoration: none; }
.breadcrumb-item.fw-bold { color: var(--bb-ink); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--bb-faint); }
@media (max-width: 767.98px) { .breadcrumb { display: none; } }

/* ---------------------------------------------------------------- 5 Karten */
.card {
    background: var(--bb-surface);
    border: 1px solid var(--bb-line);
    border-radius: var(--bb-r);
    box-shadow: none;
    overflow: hidden;
}

/* Die bunten Rahmen der App abschalten — Farbe transportiert jetzt die Marke */
.card-feeding, .card-diaperchange, .card-medication, .card-sleep,
.card-tummytime, .card-pumping, .card-timer, .card-dashboard {
    border-color: var(--bb-line) !important;
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--bb-line-soft);
    padding: 14px 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.card-header a { color: var(--bb-ink); text-decoration: none; }
.card-body { padding: 16px; }
.card-footer { background: transparent; border-top: 1px solid var(--bb-line-soft); }

/* Farbklammer je Aktivitaet: kleiner Punkt ueber dem Kartentitel */
.card-feeding::before, .card-diaperchange::before, .card-sleep::before,
.card-tummytime::before, .card-pumping::before, .card-medication::before {
    content: "";
    display: block;
    height: 3px;
    background: var(--bb-card-accent, var(--bb-accent));
}
.card-feeding { --bb-card-accent: var(--bb-feeding); }
.card-diaperchange { --bb-card-accent: var(--bb-diaper); }
.card-sleep { --bb-card-accent: var(--bb-sleep); }
.card-tummytime { --bb-card-accent: var(--bb-tummy); }
.card-pumping { --bb-card-accent: var(--bb-pump); }
.card-medication { --bb-card-accent: var(--bb-med); }

.card-dashboard .card-header,
.card-dashboard .card-body .card-title {
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: none;
}
.card-dashboard .card-body .card-title { font-size: 1.05rem; }
.card-dashboard .list-group .list-group-item { color: var(--bb-ink); }

.last-feeding-method {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--bb-feeding);
    line-height: 1.1;
}

/* Die App faerbt Kartenkoepfe vollflaechig (blau/rot/hell) — das war der
   altbackene Look. Hier auf das Theme ziehen und die Farbe auf das Symbol
   reduzieren, damit die Zuordnung bleibt, ohne zu schreien. */
.card-feeding .card-header, .card-feeding .card-header a,
.card-pumping .card-header, .card-pumping .card-header a,
.card-diaperchange .card-header, .card-diaperchange .card-header a,
.card-medication .card-header, .card-medication .card-header a,
.card-medication-status .card-header, .card-medication-status .card-header a,
.card-sleep .card-header, .card-sleep .card-header a,
.card-tummytime .card-header, .card-tummytime .card-header a,
.card-statistics .card-header, .card-statistics .card-header a,
.card-timer .card-header, .card-timer .card-header a {
    background-color: transparent !important;
    color: var(--bb-ink) !important;
}
.card-header i { color: var(--bb-muted); margin-right: 8px; }
.card-feeding .card-header i, .card-pumping .card-header i { color: var(--bb-feeding); }
.card-sleep .card-header i { color: var(--bb-sleep); }
.card-diaperchange .card-header i { color: var(--bb-diaper); }
.card-tummytime .card-header i { color: var(--bb-tummy); }
.card-medication .card-header i { color: var(--bb-med); }

/* Kind-Karte: Identitaet statt Riesenplatzhalter */
.card > a:has(> .child-photo) {
    float: left;
    margin: 16px 0 16px 16px;
}
.card > a:has(> .child-photo) .child-photo {
    display: block;
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 18px;
    background: var(--bb-surface-2);
}
.card:has(.child-photo) > .card-body {
    text-align: left !important;
    padding: 18px 16px 18px 104px;
    min-height: 108px;
}
.card:has(.child-photo) > .card-body .card-title {
    font-size: 1.3rem;
    margin-bottom: 4px;
}
.card:has(.child-photo) > .card-body .card-text p {
    margin-bottom: 2px;
    font-size: 0.875rem;
}
.child-actions {
    border: 0 !important;
    background: transparent !important;
    margin-top: 10px;
    gap: 8px;
    display: flex;
}
.child-actions .btn {
    flex: 1;
    background: var(--bb-surface-2);
    border: 1px solid var(--bb-line);
    color: var(--bb-muted);
    border-radius: var(--bb-r-sm) !important;
}
.child-photo { max-height: 72px; }

/* Dashboard dichter: die App setzt mb-4 (24px) auf jede Karte, das kostet
   auf dem Handy unnoetig Scrollweg */
#view-dashboard\:dashboard .row > [class*="col-"],
.row > [class*="col-"] { margin-bottom: 12px !important; }
#view-dashboard\:dashboard .row { margin-bottom: -12px; }

/* Leere Dashboard-Karten ("0 timers", "None") ausblenden — sie zeigen nichts
   und nehmen den halben Bildschirm. Vom Skript markiert. */
.card-dashboard.is-empty { display: none; }

/* Kind-Karte kompakter */
.card:has(.child-photo) > .card-body { padding: 16px 16px 16px 96px; min-height: 96px; }
.card > a:has(> .child-photo) { margin: 16px 0 16px 16px; }
.card > a:has(> .child-photo) .child-photo { width: 64px; height: 64px; border-radius: 16px; }
.child-photo { max-height: 64px; }
.child-actions .btn { gap: 6px; font-size: 0.75rem; min-height: 40px; }
.child-actions .btn i { font-size: 1rem; }

/* Fortschrittsbalken */
.progress {
    background: var(--bb-surface-3);
    border-radius: 99px;
    height: 6px;
}

/* Abzeichen/Chips */
.badge {
    border-radius: 99px;
    font-weight: 600;
    letter-spacing: 0;
    padding: 0.35em 0.7em;
}
.badge.bg-primary { background: var(--bb-accent) !important; color: var(--bb-accent-ink); }
.text-bg-primary { background: var(--bb-accent) !important; color: var(--bb-accent-ink) !important; }
.text-bg-success, .badge.bg-success { background: rgba(89, 207, 174, 0.18) !important; color: #8ce4c9 !important; }

/* ------------------------------------------------ 6 Bottom-Bar + Schnellsheet */
.bb-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    display: none;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    gap: 2px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--bb-bg-elev);
    border-top: 1px solid var(--bb-line);
}
.bb-tabbar.is-ready { display: grid; }

.bb-tab {
    position: relative;
    appearance: none;
    border: 0;
    background: none;
    color: var(--bb-faint);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    padding: 4px 2px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 12px;
}
.bb-tab i { font-size: 1.25rem; }
.bb-tab.is-active { color: var(--bb-ink); }
/* Aktiver Reiter: Punkt statt Farbflut, damit der Plus-Knopf der einzige
   laute Akzent in der Leiste bleibt */
.bb-tab.is-active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    transform: translateX(-50%);
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: var(--bb-accent);
}
.bb-tab:active { background: var(--bb-surface-2); }

.bb-fab {
    width: 56px;
    height: 56px;
    margin: 0 auto 4px;
    border-radius: 18px;
    background: var(--bb-accent);
    color: var(--bb-accent-ink);
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: 0 10px 24px -10px rgba(240, 160, 90, 0.75);
}
.bb-fab:active { transform: translateY(1px) scale(0.98); }

.bb-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(6, 5, 10, 0.62);
    z-index: 1050;
    opacity: 0;
    /* WICHTIG: geschlossen darf die Abdunklung keine Tipps abfangen, sonst ist
       die ganze Seite nicht mehr bedienbar (unsichtbar, aber im Weg). */
    pointer-events: none;
    transition: opacity 0.18s ease;
}
.bb-sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }

.bb-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1051;
    background: var(--bb-surface);
    border-top: 1px solid var(--bb-line);
    border-radius: var(--bb-r-lg) var(--bb-r-lg) 0 0;
    padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateY(102%);
    transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.2, 1);
    max-height: 84vh;
    overflow-y: auto;
    pointer-events: none;
}
.bb-sheet.is-open { transform: translateY(0); pointer-events: auto; }
.bb-sheet-handle {
    width: 40px;
    height: 4px;
    border-radius: 99px;
    background: var(--bb-surface-3);
    margin: 4px auto 14px;
}
.bb-sheet-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bb-faint);
    margin: 16px 2px 8px;
}
.bb-sheet-title:first-of-type { margin-top: 4px; }

.bb-sheet-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.bb-sheet-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: var(--bb-r-sm);
    background: var(--bb-surface-2);
    border: 1px solid var(--bb-line);
    color: var(--bb-ink);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    min-height: var(--bb-tap);
}
.bb-sheet-item i { color: var(--bb-accent); font-size: 1.2rem; }
.bb-sheet-item:active { background: var(--bb-surface-3); }

/* --------------------------------------------------------- 7 Stillen-Karte */
.bb-stillen {
    margin-bottom: 16px;
    border-radius: var(--bb-r);
    border: 1px solid var(--bb-line);
    background:
        radial-gradient(120% 100% at 100% 0%, rgba(240, 160, 90, 0.12) 0%, rgba(240, 160, 90, 0) 60%),
        var(--bb-surface);
    overflow: hidden;
}
.bb-stillen-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px 4px;
}
.bb-stillen-head h2 {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0;
}
.bb-stillen-head i { color: var(--bb-feeding); margin-right: 8px; }
.bb-stillen-last {
    font-size: 0.8125rem;
    color: var(--bb-muted);
    text-align: right;
    line-height: 1.3;
}
.bb-stillen-last b { color: var(--bb-ink); }

.bb-stillen-body { padding: 10px 16px 16px; }

.bb-side-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.bb-side {
    position: relative;
    appearance: none;
    border: 1px solid var(--bb-line);
    background: var(--bb-surface-2);
    color: var(--bb-ink);
    border-radius: var(--bb-r-sm);
    padding: 16px 14px;
    min-height: 76px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-weight: 700;
    font-size: 1.0625rem;
}
.bb-side small {
    position: absolute;
    top: 7px;
    right: 9px;
    font-weight: 700;
    color: var(--bb-faint);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.bb-side i { font-size: 1.15rem; color: var(--bb-feeding); }
.bb-side svg { width: 20px; height: 20px; color: var(--bb-feeding); flex: none; }
.bb-side.is-next svg { color: rgba(42, 21, 3, 0.8); }
.bb-side.is-next {
    background: var(--bb-accent);
    border-color: var(--bb-accent);
    color: var(--bb-accent-ink);
}
.bb-side.is-next i { color: rgba(42, 21, 3, 0.8); }
.bb-side.is-next small { color: rgba(42, 21, 3, 0.7); }
.bb-side.is-last { border-color: rgba(240, 160, 90, 0.45); }
.bb-side:active { transform: translateY(1px); }
.bb-side:disabled { opacity: 0.6; }

.bb-tab svg { width: 22px; height: 22px; }
.bb-fab svg { width: 26px; height: 26px; }

.bb-timer {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bb-timer-clock {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    padding: 8px 0 2px;
}
.bb-timer-value {
    font-size: 3.1rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    line-height: 1;
}
.bb-timer-side {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 99px;
    background: var(--bb-accent-soft);
    color: var(--bb-accent-hi);
    font-weight: 700;
    font-size: 0.8125rem;
}
.bb-timer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.bb-pulse { animation: bb-pulse 2.4s ease-in-out infinite; }
@keyframes bb-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.bb-toast {
    position: fixed;
    left: 50%;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(8px);
    z-index: 1060;
    background: var(--bb-surface-3);
    color: var(--bb-ink);
    border: 1px solid var(--bb-line);
    border-radius: 99px;
    padding: 10px 18px;
    font-size: 0.875rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
    max-width: 90vw;
    text-align: center;
}
.bb-toast.is-open { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ------------------------------------------------------- 8 Listen / Verlauf */
.list-group-item {
    background: transparent;
    border-color: var(--bb-line-soft);
    padding: 14px 16px;
}
.list-group-item-action:hover { background: var(--bb-surface-2); }

/* Verlauf: Zeitstempel als eigene Spalte, kompaktere Karten */
#view-coren\:timeline .list-group-item,
.timeline-item { display: flex; gap: 12px; align-items: flex-start; }

dl.row dt { color: var(--bb-muted); font-weight: 600; }
dl.row dd { color: var(--bb-ink); }

/* ------------------------------------------------------------ 9 Formulare */
.form-label, label { font-weight: 600; font-size: 0.875rem; color: var(--bb-muted); }

.form-control, .form-select {
    background: var(--bb-surface-2);
    border: 1px solid var(--bb-line);
    color: var(--bb-ink);
    border-radius: var(--bb-r-sm);
    min-height: var(--bb-tap);
    padding: 10px 12px;
    font-size: 1rem;
}
.form-control:focus, .form-select:focus {
    background: var(--bb-surface-2);
    border-color: var(--bb-accent);
    box-shadow: 0 0 0 3px var(--bb-accent-soft);
    color: var(--bb-ink);
}
.form-control::placeholder { color: var(--bb-faint); }
input[type="datetime-local"], input[type="date"], input[type="time"] {
    color-scheme: dark;
}
.form-check-input {
    background-color: var(--bb-surface-2);
    border-color: var(--bb-line);
    width: 1.35em;
    height: 1.35em;
    margin-top: 0.15em;
}
.form-check-input:checked { background-color: var(--bb-accent); border-color: var(--bb-accent); }
.form-check-label { color: var(--bb-ink); font-weight: 500; }

/* Auswahlfelder der App: versteckte Radios (btn-check) + Label als Button.
   Genau hier wird links/rechts gewaehlt, also grosse Tippflaechen. */
.pill-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.pill-container label.btn,
.pill-container .btn,
.pill-container > label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--bb-tap);
    padding: 12px 10px;
    margin: 0;
    border-radius: var(--bb-r-sm) !important;
    background: var(--bb-surface-2) !important;
    border: 1px solid var(--bb-line) !important;
    color: var(--bb-ink) !important;
    font-weight: 600;
    font-size: 0.9375rem;
    text-align: center;
    opacity: 1;
}
.pill-container input:checked + label,
.pill-container input.btn-check:checked + label,
.pill-container input:checked + .btn {
    background: var(--bb-accent-soft) !important;
    border-color: var(--bb-accent) !important;
    color: var(--bb-accent-hi) !important;
}
.pill-container input.btn-check:focus + label,
.pill-container input:focus + label {
    box-shadow: 0 0 0 3px var(--bb-accent-soft);
}
.pill-container input.btn-check:checked + label::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bb-accent);
    flex: none;
}
.pill-container input, .radio-container input, ul.list-unstyled.radio-list input[type="radio"] {
    display: none;
}

/* Speicherleiste: schwebt ueber der Bottom-Bar statt sie zu verdecken.
   Der grosse Schatten nach oben ist Absicht — er laesst den Inhalt darunter
   ausblenden, statt hart abgeschnitten zu wirken. */
.submit-primary {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    width: auto;
    border-radius: var(--bb-r-sm);
    padding: 15px;
    z-index: 1035;
    box-shadow: 0 -26px 28px -6px var(--bb-bg), 0 10px 26px -12px rgba(0, 0, 0, 0.9);
}
/* Genug Luft unter dem letzten Feld, damit es beim Scrollen sicher über der
   schwebenden Speicherleiste steht (die belegt 136 px am unteren Rand). */
form:has(.submit-primary) { padding-bottom: 200px; }

/* Bei nur einem Kind ist die Auswahl reine Wiederholung */
.row.bb-single-child { display: none; }

.btn {
    border-radius: var(--bb-r-sm);
    font-weight: 700;
    min-height: var(--bb-tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-width: 1px;
}
.btn-lg { min-height: 54px; font-size: 1.0625rem; }
.btn-sm { min-height: 38px; font-size: 0.875rem; }

.btn-primary,
.btn-outline-primary:hover {
    background: var(--bb-accent);
    border-color: var(--bb-accent);
    color: var(--bb-accent-ink);
}
.btn-primary:hover, .btn-primary:focus { background: var(--bb-accent-hi); border-color: var(--bb-accent-hi); color: var(--bb-accent-ink); }
.btn-outline-primary { color: var(--bb-accent); border-color: rgba(240, 160, 90, 0.5); }
.btn-success { background: var(--bb-diaper); border-color: var(--bb-diaper); color: #04241c; }
.btn-success:hover { background: #6fdcbc; border-color: #6fdcbc; color: #04241c; }
.btn-secondary { background: var(--bb-surface-3); border-color: var(--bb-line); color: var(--bb-ink); }
.btn-secondary:hover { background: #302f3c; border-color: var(--bb-line); color: #fff; }
.btn-outline-secondary { color: var(--bb-muted); border-color: var(--bb-line); }
.btn-danger { background: rgba(242, 121, 127, 0.16); border-color: rgba(242, 121, 127, 0.45); color: #ff9aa0; }
.btn-danger:hover { background: var(--bb-danger); border-color: var(--bb-danger); color: #2b0708; }
.btn-link { color: var(--bb-accent); }
.btn-group > .btn { border-radius: 0; }

/* ------------------------------------------------------------ 10 Tabellen */
.table { --bs-table-bg: transparent; color: var(--bb-ink); }
.table > :not(caption) > * > * { border-bottom-color: var(--bb-line-soft); padding: 12px 10px; }
.table thead th { color: var(--bb-muted); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* Charts/Legenden der App */
.ct-chart { background: transparent; }

/* -------------------------------------------------------------- 11 Desktop */
@media (min-width: 768px) {
    .container-fluid { padding-left: 24px; padding-right: 24px; }
    .bb-topbar-title { max-width: none; }
}
@media (min-width: 992px) {
    body { padding-bottom: 24px; }
    nav.navbar .navbar-brand .d-none { display: inline-block !important; }
    nav.navbar .navbar-collapse {
        background: transparent;
        border: 0;
        margin: 0;
        padding: 0;
        max-height: none;
    }
    nav.navbar .navbar-nav .nav-link { padding: 8px 12px; }
    .bb-tabbar { display: none !important; }
    .submit-primary {
        position: static;
        margin-top: 18px;
        box-shadow: none;
        padding: 14px;
    }
}

/* ------------------------------------------------------------- 12 Bewegung */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}