/* YOU'RE SET. web module — mobile-first CSS (ADR-018, #133)
   Extracted from the click-dummy design (#247).
   Breakpoints: --bp-tablet: 768px; --bp-desktop: 1024px;
   min-width media queries only (per #133).

   ── Z-Index Stack ────────────────────────────────────────────────
     2    Camera uploading overlay (within camera full-screen)
    10    Inline popovers / dropdowns (Sachkonto edit form)
   100    Fixed app header (phone) — same tier as the fixed bottom nav, the two never overlap
   100    Fixed bottom nav bar
   101    Cookie consent banner (above nav)
   110    FAB – Belege add button (above nav, below modals)
   150    Modal backdrop / camera full-screen overlay
   151    Bottom sheet (account correction)
          Native <dialog> modals (add receipt, confirmations) use the top layer
   200    Auto-logout warning banner (top, highest priority)
   ─────────────────────────────────────────────────────────────── */

:root {
    --color-bg: var(--color-light-gray);
    --color-text: #18233b;
    --color-navy: #0F2D3D;
    /* Tiefes Petrol replaces teal: white on it reaches 9.2:1 (hover 11.6:1) and
       it works as text, link, border and focus ring on light grounds (>= 3:1).
       The light accent --color-primary-on-dark is for dark grounds only (logo
       tile, focus rings, marks without text). Guarded in brand_tokens_test.go. */
    --color-primary: #134E5E;
    --color-primary-fill: #134E5E;
    --color-primary-fill-hover: #0E3E4B;
    --color-on-primary: #FFFFFF;
    --color-primary-text: #134E5E;
    --color-primary-on-dark: #6BB0C0;
    --color-mint: #E2ECEF;
    --color-light-gray: #F7FAFB;
    --color-sand: #FDEED9;
    --color-secondary-hover: #F1F6F8;
    --color-brand-gradient-end: #132C39;
    --button-height: 48px;
    --card-padding: 16px;
    --card-radius: 16px;
    --button-radius: 10px;
    --color-amber: #F59E0B;
    --color-success: #2e7d32;
    --color-success-bg: var(--color-mint);
    --color-warning: #e65100;
    --color-warning-bg: var(--color-sand);
    /* Text on amber/sand/white: --color-warning (#e65100) is only ~3.7:1 there;
       this darker amber-brown clears 4.5:1 (guarded in brand_tokens_test.go). */
    --color-warning-text: #92400e;
    --color-error: #c62828;
    --color-error-bg: #ffcdd2;
    --color-muted: #6b7280;
    --color-muted-fill: #f1f5f9;
    --color-border: #e5e7eb;
    --color-surface: #ffffff;
    /* Amber is distinct from the existing warning/orange pair (#e65100):
       the cockpit's "needs attention, not yet a problem" banner and badges
       use the true amber (#F59E0B) already sanctioned above as
       --color-amber, so these two are its bg/border companions. */
    --color-amber-bg: #fffbeb;
    --color-amber-border: #fde68a;
    /* Info — the clarification cockpit's "handed over, adviser reviewing"
       state (#348 screen 4): distinct from success (already resolved) and
       amber (needs client action) — neither party owes an action right now. */
    --color-info: #1565c0;
    --color-info-bg: #e3f2fd;
    --color-info-border: #90caf9;
    /* Violet — the clarification cockpit's "private / unternehmensfremd"
       case type: the only one of its six categories with no honest match
       among error/warning/amber/info/primary (it isn't wrong, overdue, or
       procedural — it's a different classification question). Row/badge
       backgrounds are derived from these with color-mix(), not new tokens. */
    --color-violet: #6d28d9;
    --color-teal: #0F766E;
    /* Danger — the destructive-action red trio shared with .btn--danger;
       distinct from --color-error (#c62828), which paints form errors. */
    --color-danger: #dc2626;
    --color-danger-bg: #fef2f2;
    --color-danger-border: #fca5a5;
    --bp-tablet: 768px;
    --bp-desktop: 1024px;
    --font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
}

@media (min-width: 768px) {
    :root {
        --button-height: 56px;
        --card-padding: 32px;
    }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: contain;
}

body {
    font-family: var(--font-family);
    background-color: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.app__content {
    flex: 1;
    padding: 1rem;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

@media (min-width: 768px) {
    .app__content {
        max-width: 800px;
        padding: 2rem;
    }
}

@media (min-width: 1024px) {
    .app__content {
        max-width: 1040px;
    }
}

/* --- Error page family (#588): standalone pages (login error, CSRF
   session-expired) render without the nav — center the alert and its
   action instead. --- */
.app__content--centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
}

.login-error__text {
    color: var(--color-error);
    font-weight: 600;
}

/* --- Navigation (#130) — one component, responsive via CSS only (#133) ---
   Mobile (<768px): bottom bar, one row, swipes sideways when items overflow.
   Tablet/desktop (≥768px): left sidebar, min-width 220px.
   #778: both surfaces take the petrol navigation ground (--color-nav-bg); the
   current item sits on the Deep Petrol fill (white text 9.2 : 1). Pairings
   are guarded in brand_tokens_test.go. */

:root {
    --nav-border: 1px;
    --nav-padding-top: 4px;
    --nav-link-height: 52px;
    --nav-safe-bottom: max(8px, env(safe-area-inset-bottom));
    --mobile-nav-height: calc(var(--nav-border) + var(--nav-padding-top) + var(--nav-link-height) + var(--nav-safe-bottom));
    --mobile-header-height: 56px;
    --color-nav-bg: #1C5966;
    --color-nav-text: #FFFFFF;
    --color-nav-muted: #D6E6EA;
    --color-nav-hover: #16495A;
    --color-nav-border: #2F7886;
}

.nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--color-nav-bg);
    border-top: var(--nav-border) solid var(--color-nav-border);
    z-index: 100;
}

.nav__list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 2px;
    list-style: none;
    padding: var(--nav-padding-top) max(8px, env(safe-area-inset-right)) var(--nav-safe-bottom) max(8px, env(safe-area-inset-left));
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.nav__list::-webkit-scrollbar {
    display: none;
}

.nav__item {
    flex: 0 0 auto;
}

.nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: var(--nav-link-height);
    padding: 4px 8px;
    text-decoration: none;
    font-size: 0.7rem;
    gap: 2px;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    position: relative; /* needed for ::before */
    color: var(--color-nav-muted);
}

.nav__link--active {
    background: var(--color-primary-fill);
    color: var(--color-on-primary);
    font-weight: 600;
}

/* The current item is told apart by more than its fill (1.2 : 1 on the bar):
   a 3 px on-dark marker on top of the phone item, at the left edge of the
   sidebar item from 768 px. */
.nav__link--active::before {
    content: '';
    position: absolute;
    top: 0; left: 12px; right: 12px;
    height: 3px;
    background: var(--color-primary-on-dark);
    border-radius: 0 0 2px 2px;
}

.nav__link:hover:not(.nav__link--active) {
    background: var(--color-nav-hover);
    color: var(--color-nav-text);
}

.nav__link:focus-visible {
    outline: 2px solid var(--color-primary-on-dark);
    outline-offset: -2px;
}

.nav__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.nav__label {
    line-height: 1.2;
}

/* Nav badge — short pill (e.g. "Neu" on Nachhaltigkeit): on the icon corner on the
   phone bar, beside the label from 768px. */
.nav__badge {
    display: inline-block;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    background: var(--color-primary-on-dark);
    color: var(--color-navy);
    vertical-align: middle;
    line-height: 1.5;
    /* Phone bar: the pill sits on the icon's top-right corner, never on the
       label text; the sidebar (>= 768px) puts it back beside the label. */
    position: absolute;
    top: 0;
    left: calc(50% + 6px);
    margin-left: 0;
}

/* Logout dialog — FE-1.3 bottom sheet: same <dialog> mechanics as the
   field sheet (#419); showModal keeps native backdrop, focus and Esc. */
.logout-dialog {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    margin: 0 auto;
    border: none;
    border-radius: 16px 16px 0 0;
    padding: 1.25rem 1.25rem max(1.5rem, env(safe-area-inset-bottom));
    max-width: 480px;
    width: 100%;
    background: var(--color-surface);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
    max-height: 80vh;
    overflow-y: auto;
}

.logout-dialog::backdrop {
    background: rgba(0,0,0,0.35);
}

.logout-dialog__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-text);
}

.logout-dialog__form {
    display: flex;
    gap: 0.75rem;
}

/* Space for the fixed bottom nav so content isn't hidden behind it. */
.app__content {
    padding-bottom: var(--mobile-nav-height);
}

/* --- Mobile app header (#842): fixed petrol top bar with the brand and,
   on detail pages, the back arrow. Phone only — ≥768 px keeps the
   sidebar layout unchanged. --- */
.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 4px;
    height: calc(var(--mobile-header-height) + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 8px 0;
    background: var(--color-nav-bg);
}

.app-header__back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    color: var(--color-surface);
}

.app-header__back:focus-visible,
.app-header__brand:focus-visible {
    outline: 2px solid var(--color-primary-on-dark);
    outline-offset: 2px;
}

.app-header__brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
    color: var(--color-surface);
}

.app-header__wordmark {
    color: var(--color-surface);
    font-weight: 700;
    letter-spacing: 0.04em;
}

@media (min-width: 768px) {
    .app-header {
        display: none;
    }
}

@media (max-width: 767.98px) {
    /* The header arrow is the one way back on the phone — the page's own
       inline link and breadcrumb hide only where the header carries the arrow. */
    .app__content--back-in-header .page-back,
    .app__content--back-in-header .page-breadcrumb,
    .app__content--back-in-header .cockpit__back-link {
        display: none;
    }
}

/* Standalone pages (login error, CSRF failure) render no header, so the
   offset is scoped to header layouts. */
@media (max-width: 767.98px) {
    .app--with-header .app__content {
        padding-top: calc(var(--mobile-header-height) + env(safe-area-inset-top));
    }
}

@media (min-width: 768px) {
    .app {
        flex-direction: row;
    }

    .nav {
        position: static;
        width: 220px;
        min-width: 220px;
        height: 100vh;
        border-top: none;
        border-right: 1px solid var(--color-nav-border);
        display: flex;
        flex-direction: column;
    }

    .nav__list {
        flex-direction: column;
        padding: 1rem 0;
        gap: 4px;
        overflow-x: visible;
    }

    .nav__link {
        flex-direction: row;
        justify-content: flex-start;
        padding: 10px 16px;
        font-size: 0.9rem;
        gap: 12px;
        /* Mobile base styles size the link for the single-row swipeable
           bar (white-space: nowrap, min-width: 64px); left as-is, a long
           label like "Benachrichtigungen" forces the sidebar wider than
           its fixed 220px column instead of wrapping within it. */
        white-space: normal;
        min-width: 0;
    }

    .nav__badge {
        position: static;
        margin-left: 5px;
    }

    .nav__link--active::before {
        top: 0; bottom: 0; left: 0; right: auto;
        width: 3px; height: auto;
        border-radius: 0 2px 2px 0;
    }

    /* Desktop: no bottom nav, so content doesn't need extra padding. */
    .app__content {
        padding-bottom: 2rem;
    }
}

/* --- Cookie consent banner (#132) ---
   Fixed bottom, above the bottom nav on mobile. */

.consent-banner {
    position: fixed;
    bottom: var(--mobile-nav-height); /* above the bottom nav */
    left: 0;
    right: 0;
    background-color: var(--color-text);
    color: #ffffff;
    padding: 12px 16px;
    z-index: 101; /* above nav */
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.consent-banner[hidden] {
    display: none !important;
}

.consent-banner--hiding {
    opacity: 0;
    transform: translateY(8px);
}

.consent-banner__text {
    font-size: 0.85rem;
    line-height: 1.4;
}

.consent-banner__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.consent-banner__form {
    display: inline;
}

.consent-banner__link {
    color: #a5b4fc;
    font-size: 0.85rem;
    text-decoration: underline;
}

@media (min-width: 768px) {
    .consent-banner {
        bottom: 0; /* no bottom nav on desktop */
        left: 220px; /* after the sidebar */
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }

    .consent-banner__text {
        flex: 1;
    }

    .consent-banner__actions {
        flex-shrink: 0;
    }
}

/* --- Buttons --- */

.btn {
    display: inline-block;
    padding: 8px 16px;
    min-height: var(--button-height);
    border: 1px solid var(--color-border);
    border-radius: var(--button-radius);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.4;
    -webkit-tap-highlight-color: transparent;
}

.btn--primary {
    background-color: var(--color-primary-fill);
    border-color: var(--color-primary-fill);
    color: var(--color-on-primary);
    font-weight: 700;
}

.btn--primary:hover {
    background-color: var(--color-primary-fill-hover);
    border-color: var(--color-primary-fill-hover);
}

.btn:focus-visible {
    outline: 3px solid var(--color-navy);
    outline-offset: 2px;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Logout confirmation dialog (#130) --- */

.logout-confirm {
    text-align: center;
    padding: 2rem 1rem;
}

.logout-confirm__title {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.logout-confirm__form {
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* --- Home greeting --- */

.home__greeting {
    font-size: 1.2rem;
    padding: 1rem 0;
}

/* --- Home module tiles (FE-2.2) --- */

.home__tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 1.25rem;
}

.home__tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
    text-decoration: none;
    color: var(--color-text);
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.15s;
    /* Grid/flex items default to min-width: auto (their content's
       min-content), so a long unbreakable word pushes the whole
       .home__tiles grid past the viewport instead of wrapping. */
    min-width: 0;
}

.home__tile:hover,
.home__tile:focus-visible {
    border-color: var(--color-primary);
    outline: none;
}

.home__tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    border-radius: 12px;
    color: var(--color-primary-text);
    flex-shrink: 0;
}

.home__tile-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-navy);
    min-width: 0;
}

.home__tile-desc {
    font-size: 0.8rem;
    color: var(--color-muted);
    line-height: 1.35;
    min-width: 0;
    overflow-wrap: break-word;
}

.home__tile--alert {
    border-color: var(--color-warning, #F59E0B);
    background-color: color-mix(in srgb, var(--color-warning, #F59E0B) 6%, var(--color-surface));
}

.home__tile--alert .home__tile-icon {
    background: color-mix(in srgb, var(--color-warning, #F59E0B) 15%, transparent);
    color: var(--color-warning-text);
}

/* Sustainability tile: full-width, light mint ground with a petrol chip and a
   "Neu" badge - fresh instead of the dark petrol fill of the navigation. */
.home__tile--sustainability {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    background: var(--color-mint);
    border-color: var(--color-primary);
    color: var(--color-primary-text);
    padding: 20px;
    position: relative;
}

.home__tile--sustainability:hover,
.home__tile--sustainability:focus-visible {
    border-color: var(--color-primary-fill-hover);
    background: color-mix(in srgb, var(--color-mint) 80%, var(--color-primary-fill));
}

.home__tile--sustainability .home__tile-icon {
    background: var(--color-primary-fill);
    color: var(--color-on-primary);
    flex-shrink: 0;
}

/* Title above description, always: as two flex-row siblings they shared one
   line and the text overflowed into each other on phones (375-560 px). */
.home__tile-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
    padding-right: 36px; /* clear of the absolutely placed "Neu" badge */
}

.home__tile--sustainability .home__tile-title {
    color: var(--color-primary-text);
    font-size: 1.05rem;
}

.home__tile--sustainability .home__tile-desc {
    color: var(--color-primary-text);
}

.home__tile-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--color-primary-fill);
    color: var(--color-on-primary);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 2px 7px;
    border-radius: 4px;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .home__tiles {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* --- Handover readiness (#89) --- */

.home__handover {
    margin-top: 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.home__handover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.home__handover-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-navy);
    margin: 0;
}

.home__handover-score {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-primary-text);
    font-variant-numeric: tabular-nums;
}

.home__handover-progress {
    font-size: 0.85rem;
    color: var(--color-text);
    margin: 0;
}

.home__handover-breakdown {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 0.8rem;
    color: var(--color-muted);
}

.home__handover-months {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.home__handover-month-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    padding: 4px 0;
}

.home__handover-month-label {
    flex: 1;
    font-size: 0.875rem;
}

.home__handover-month-score {
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-muted);
}

.home__handover-month--complete .home__handover-month-score {
    color: var(--color-success, #16a34a);
}

.home__handover-month--partial .home__handover-month-score {
    color: var(--color-amber);
}

.home__handover-month--open .home__handover-month-score {
    color: var(--color-warning-text);
}

.home__handover-month-open {
    font-size: 0.75rem;
    color: var(--color-warning-text);
}

.home__handover-btn {
    align-self: flex-start;
    margin-top: 4px;
}

.home__handover-casetypes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.home__handover-type a {
    font-size: 0.8rem;
    text-decoration: none;
    color: var(--color-primary-text);
}

.home__handover-type--review a {
    color: var(--color-warning-text);
}

.home__handover-type--missing a {
    color: var(--color-amber);
}

/* --- Sync banner (CP-1.4) --- */

.sync-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    margin: 0.5rem 0 1rem;
    border-radius: 8px;
    font-size: 0.95rem;
    line-height: 1.3;
}

.sync-banner__icon {
    font-size: 1.1rem;
    line-height: 1;
}

.sync-banner__text {
    flex: 1 1 auto;
}

.sync-banner__meta {
    flex: 0 0 auto;
    font-size: 0.8rem;
    opacity: 0.8;
}

.sync-banner__action {
    flex: 0 0 auto;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.sync-banner--ok {
    background: #e6f4ea;
    color: #1e6b37;
}

.sync-banner--problem {
    background: #fff4e0;
    color: #8a5a00;
}

.sync-banner--problem .sync-banner__action {
    color: #8a5a00;
    text-decoration: underline;
}

.sync-banner--empty {
    background: #eef0f2;
    color: #555;
}

.sync-banner--unavailable {
    background: #eef0f2;
    color: #555;
    font-style: italic;
}

/* --- Datenquellen list (CP-1.5 / #161) ---
   Mobile-first: rows stack as cards; table layout from 768 px up. */

/* Syncing pulse animation */
@keyframes source-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}

/* Mobile (default): block layout — each row is a card */
.source-table,
.source-table tbody { display: block; }

.source-row {
    display: block;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
}

.source-table td {
    display: block;
    padding: 3px 0;
    border-bottom: none;
    vertical-align: top;
}

.source-row--error   { background: #fff0f0; }
.source-row--warning { background: #fff8ec; }
.source-row--syncing { animation: source-pulse 1.4s ease-in-out infinite; }

.source-row__name    { width: auto; }
.source-row__label   { font-weight: 600; margin-right: 6px; }
.source-row__last-sync { display: block; font-size: 0.85rem; color: #555; }
.source-row__guidance  { display: block; font-size: 0.85rem; color: #8a5a00; margin-top: 2px; }
.source-row__actions   { padding-top: 8px; }
.source-row__actions .btn--sm { margin-left: 0; margin-right: 4px; }
.source-row__loading { font-style: italic; color: #555; }
.source-row__error   { font-style: italic; color: #a11a1a; }
.source-row--done    { background: var(--color-mint); }
.source-row__done    { display: block; font-size: 0.9rem; font-weight: 600; color: var(--color-navy); }
.source-row__failure { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; border-left: 4px solid var(--color-danger); padding-left: 0.75rem; }
.source-row__failure-text { flex: 1 1 20rem; min-width: 0; margin: 0; font-size: 0.9rem; }
.source-row__failure-text strong { color: var(--color-danger); }
.source-row__failure-actions { display: flex; gap: 0.5rem; }

/* The disconnect dialog (#948, an fl-dialog) sits inside the actions cell: the
   cell's right alignment and no-wrap must not leak into its text. */
.source-row__actions .fl-dialog { white-space: normal; text-align: left; }

.source-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.source-badge--ok           { background: #e6f4ea; color: #1e6b37; }
.source-badge--warning      { background: #fff4e0; color: #8a5a00; }
.source-badge--error        { background: #fde2e2; color: #9b1c1c; }
.source-badge--disconnected { background: #f3f4f6; color: #6b7280; }

/* Tablet+ (≥ 768 px): revert to standard table layout */
@media (min-width: 768px) {
    .source-table         { display: table; width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
    .source-table tbody   { display: table-row-group; }
    .source-row           { display: table-row; border: none; border-radius: 0; margin-bottom: 0; padding: 0; }
    .source-table td      { display: table-cell; padding: 10px 6px; border-bottom: 1px solid #e5e7eb; }
    .source-row__name     { width: 32%; }
    .source-row__actions  { text-align: right; white-space: nowrap; padding-top: 0; }
    .source-row__actions .btn--sm { margin-left: 4px; margin-right: 0; }
}


.datasources__empty       { padding: 1rem 0; }
.datasources__empty p     { color: #555; margin: 0 0 0.25rem; }
.datasources__empty-hint  { font-size: 0.85rem; }
.datasources__actions     { padding: 0.75rem 0; }
.datasources__connect-label { font-size: 0.875rem; font-weight: 600; color: var(--color-muted); margin: 1.25rem 0 0.5rem; }

/* ── Datenquellen sections (redesign) ── */
.ds-section {
    margin-bottom: 2rem;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
}
.ds-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--color-surface-subtle, #f9fafb);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.ds-section__title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}
.ds-section__coming-soon {
    font-size: 0.78rem;
    color: var(--color-muted, #6b7280);
    font-style: italic;
}
.ds-section__empty {
    padding: 1rem;
    font-size: 0.875rem;
    color: var(--color-muted, #6b7280);
    margin: 0;
}
.ds-section .source-table,
.ds-section .source-row {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
}
.ds-section .source-table { margin-top: 0; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ds-section__header { background: rgba(255,255,255,0.04); }
}
:root[data-theme="dark"] .ds-section__header { background: rgba(255,255,255,0.04); }

/* ── E-Mail-Belege (#71): personal inbound address, one-tap copy ── */
.ds-email__active {
    font-size: 0.72rem;
    font-weight: 600;
    color: #15803d;
    background: #dcfce7;
    border-radius: 999px;
    padding: 0.125rem 0.5rem;
}
.ds-email__inactive {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-muted);
    background: color-mix(in srgb, var(--color-muted) 15%, transparent);
    border-radius: 999px;
    padding: 0.125rem 0.5rem;
}
.ds-email__hint {
    margin: 0.75rem 1rem 0;
    font-size: 0.85rem;
    color: var(--color-muted, #6b7280);
}
.ds-email__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem 0;
    flex-wrap: wrap;
}
.email-receipts__address {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.875rem;
    background: var(--color-surface-subtle, #f9fafb);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    word-break: break-all;
}
.ds-email__copy--done {
    color: #15803d;
    border-color: #15803d;
}
.ds-email__copy--done::before { content: "✓ "; }
.ds-email__toast {
    margin: 0.5rem 1rem 0;
    font-size: 0.8rem;
    color: #15803d;
}
.ds-email__guide-title {
    margin: 1rem 1rem 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
}
.ds-email__guide {
    margin: 0 1rem 0.75rem;
    padding-left: 1.25rem;
    font-size: 0.85rem;
    color: var(--color-muted, #6b7280);
    display: grid;
    gap: 0.25rem;
}
.ds-email__guide + .ds-section__coming-soon {
    display: block;
    padding: 0 1rem 0.75rem;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ds-email__active { background: rgba(21,128,61,0.25); }
    :root:not([data-theme="light"]) .email-receipts__address { background: rgba(255,255,255,0.04); }
}
:root[data-theme="dark"] .ds-email__active { background: rgba(21,128,61,0.25); }
:root[data-theme="dark"] .email-receipts__address { background: rgba(255,255,255,0.04); }

/* ── Hint box (info-level notice) ── */
.hint-box {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 0.875rem 1rem;
    margin: 1rem 0;
}
.hint-box p { margin: 0; font-size: 0.875rem; color: #166534; line-height: 1.5; }
.hint-box__title { font-weight: 700; margin-bottom: 0.2rem !important; }
.hint-box__icon { flex-shrink: 0; margin-top: 2px; color: #16a34a; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hint-box { background: #052e16; border-color: #166534; }
    :root:not([data-theme="light"]) .hint-box p { color: #86efac; }
    :root:not([data-theme="light"]) .hint-box__icon { color: #4ade80; }
}
:root[data-theme="dark"] .hint-box { background: #052e16; border-color: #166534; }
:root[data-theme="dark"] .hint-box p { color: #86efac; }
:root[data-theme="dark"] .hint-box__icon { color: #4ade80; }

.einstellungen { max-width: 640px; }

.settings__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.settings-section {
    margin-bottom: 1.75rem;
}

.settings-section__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-muted);
    padding: 0 0 0.4rem;
    margin-bottom: 0;
}

.settings-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
}

.settings-list li + li {
    border-top: 1px solid var(--color-border);
}

.settings-retention__form {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.settings-retention__toggle {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer;
}

.settings-retention__toggle input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.1rem;
    accent-color: var(--color-primary, #2563eb);
    flex-shrink: 0;
}

/* The days input only matters while the checkbox is on — pure CSS reveal. */
.settings-retention__days { display: none; }
.settings-retention__form:has(input[name="purge_enabled"]:checked) .settings-retention__days { display: block; }

.settings-retention__days-input { max-width: 8rem; }

.settings-retention__saved { margin: 0; font-size: 0.85rem; color: #15803d; }
.settings-retention__error { margin: 0; font-size: 0.85rem; color: #9b1c1c; }
.settings-retention__save-failed { margin: 0; font-size: 0.85rem; color: #9b1c1c; }

.settings-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    text-decoration: none;
    color: inherit;
    min-height: 64px;
}

.settings-row:active { background: var(--color-bg); }

.settings-row--disabled {
    opacity: 0.5;
    pointer-events: none;
}

.settings-row__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

.settings-row__icon--sources    { background: var(--color-primary-fill); color: var(--color-on-primary); }
.settings-row__icon--users      { background: var(--color-teal); }
.settings-row__icon--profile    { background: #6366f1; }
.settings-row__icon--security   { background: #f59e0b; }
.settings-row__icon--notifications { background: #3b82f6; }
.settings-row__icon--billing    { background: #16a34a; }

.settings-row__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.settings-row__title {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-text);
}

.settings-row__sub {
    font-size: 0.8125rem;
    color: var(--color-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-row__sub--active {
    color: var(--color-success, #2e7d32);
}

.settings-chevron { color: #9ca3af; flex-shrink: 0; }

.settings-status {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.85rem; color: #555;
}
.settings-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #1e6b37; display: inline-block;
}

/* --- Sub-page back navigation --- */
.page-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-primary-text);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    min-height: 44px;
    margin-bottom: 0.5rem;
}

.page-back::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    flex-shrink: 0;
}

.page-back:hover { opacity: 0.75; }

/* Multi-level breadcrumb — used where the current screen is 3 levels deep (#426) */
.page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
}
.page-breadcrumb__item {
    color: var(--color-primary-text);
    text-decoration: none;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.page-breadcrumb__item:hover { opacity: 0.75; }
.page-breadcrumb__sep {
    color: var(--color-muted);
    font-weight: 400;
    user-select: none;
}

.connect { max-width: 600px; }
.connect__choose { color: #555; margin-bottom: 0.75rem; }
.connect__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }

/* Provider card: icon | name + desc | action */
.connect__item {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: center;
    padding: 0.875rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

/* Logo: spans both rows in col 1 */
.connect__logo { grid-column: 1; grid-row: 1 / span 2; align-self: center; }

/* Drive folder picker (#73 PR-2): the radio takes the 72px logo slot,
   sized and centered instead of browser-default rendering */
.connect__drive-radio {
    grid-column: 1;
    grid-row: 1 / span 2;
    justify-self: center;
    align-self: center;
    width: 20px;
    height: 20px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* Name: row 1, col 2 */
.connect__label { grid-column: 2; grid-row: 1; font-weight: 600; font-size: 0.95rem; }

/* Description: row 2, col 2 */
.connect__desc { grid-column: 2; grid-row: 2; color: #6b7280; font-size: 0.82rem; }

/* Action button / unavailable: spans both rows in col 3 */
.connect__item > .btn,
.connect__unavailable { grid-column: 3; grid-row: 1 / span 2; align-self: center; white-space: nowrap; }

.connect__item > .btn {
    padding: 6px 14px;
    min-height: 36px;
    font-size: 0.85rem;
}

.connect__unavailable { color: #9ca3af; font-size: 0.82rem; }
.connect__soon { color: #777; font-size: 0.85rem; }
.connect__provider { margin-bottom: 0.25rem; }
.connect__scope { color: #555; }
.connect__error {
    background: #fde2e2; color: #9b1c1c; padding: 0.5rem 0.75rem;
    border-radius: 6px;
}
.connect__form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 22rem; margin: 1rem 0; }
.connect__field { display: flex; flex-direction: column; gap: 0.25rem; }
.connect__field input { padding: 0.5rem; border: 1px solid #ccc; border-radius: 6px; }
.connect__cancel { margin-top: 0.5rem; }

/* FE-5.7: OAuth connect flow additions */
.connect__logo { flex-shrink: 0; color: #1f2937; }
.connect__unavailable { color: #777; font-size: 0.85rem; }
.connect__scope-code {
    background: #f3f4f6; padding: 0.1rem 0.35rem; border-radius: 4px;
    font-size: 0.8rem;
}
.connect__redirect-note { color: #555; max-width: 32rem; }
.connect__success-text { font-size: 1.05rem; }
.connect__sync-note { color: #1e6b37; }
.connect__cancelled-text { color: #555; max-width: 32rem; }
.connect__result-title { margin-bottom: 0.35rem; }

/* #428: Connect-Screen Redesign — detail view */
.connect--detail { max-width: 860px; }

.connect__heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 1rem 0 1.5rem;
}
.connect__heading-verb { font-weight: 400; color: var(--color-text-muted, #6b7280); }

/* wordmark logos (Stripe, Mollie) are wider than icon logos */
.connect__logo--stripe,
.connect__logo--mollie { height: 28px; width: auto; }
.connect__logo--paypal { height: 32px; width: auto; }

/* two-column layout: permissions card | form */
.connect__detail-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 600px) {
    .connect__detail-layout { grid-template-columns: 1fr; }
}

/* permissions card */
.connect__permissions {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 1rem 1.125rem;
}
.connect__permissions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.connect__permissions-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted, #6b7280); }
.connect__permissions-text { font-size: 0.875rem; color: var(--color-text, #1f2937); margin: 0; }

/* info tooltip trigger + popup */
.connect__info-tip { position: relative; display: inline-flex; }
.connect__info-btn {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--color-text-muted, #6b7280);
    display: inline-flex;
    align-items: center;
    border-radius: 50%;
    transition: color 0.15s;
}
.connect__info-btn:hover { color: var(--color-text, #1f2937); }
.connect__info-popup {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 260px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--color-text, #1f2937);
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    z-index: 10;
}
.connect__info-tip--left .connect__info-popup { right: auto; left: 0; }
.connect__info-tip--open .connect__info-popup { display: block; }

/* credential form */
.connect__cred-form { display: flex; flex-direction: column; gap: 1rem; }
.connect__form-field { display: flex; flex-direction: column; gap: 0.35rem; }
.connect__form-label { font-size: 0.875rem; font-weight: 600; }
.connect__field-hint-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.connect__field-hint { font-size: 0.75rem; color: var(--color-text-muted, #6b7280); }

/* input with eye toggle */
.connect__input-wrap { position: relative; display: flex; }
.connect__input {
    flex: 1 1 auto;
    padding: 0.5rem 2.25rem 0.5rem 0.6rem;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: monospace;
    background: var(--color-surface);
    color: var(--color-text, #1f2937);
    width: 100%;
    box-sizing: border-box;
}
.connect__input--error { border-color: #dc2626; }
.connect__input:focus { outline: 2px solid #3b82f6; outline-offset: 1px; border-color: transparent; }
.connect__eye {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--color-text-muted, #6b7280);
    display: flex;
    align-items: center;
    border-radius: 4px;
}
.connect__eye:hover { color: var(--color-text, #1f2937); }

/* error alert */
.connect__alert {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
}
.connect__alert--error { background: #fde2e2; color: #9b1c1c; }
.connect__alert-icon { flex-shrink: 0; margin-top: 1px; }

/* button row */
.connect__btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding-top: 0.25rem; }

/* oauth panel */
.connect__oauth-panel { display: flex; flex-direction: column; gap: 1rem; }

/* FE-5.6 (#220): bank connect flow */
.bank-connect { max-width: 34rem; }
.bank-connect__title { margin-bottom: 0.5rem; }
.bank-connect__title--error { color: #9b1c1c; }
.bank-connect__hint { color: #555; margin-bottom: 1rem; }
.bank-connect__search { display: flex; gap: 0.5rem; align-items: flex-end; margin-bottom: 1rem; }
.bank-connect__search .connect__field { flex: 1 1 auto; }
.bank-connect__results { list-style: none; padding: 0; margin: 0; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
.bank-connect__result + .bank-connect__result { border-top: 1px solid #eee; }
.bank-connect__result-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.75rem; text-decoration: none; color: inherit; }
.bank-connect__result-link:hover, .bank-connect__result-link:focus-visible { background: #f5f8ff; }
.bank-connect__result-name { font-weight: 600; flex: 1 1 auto; }
.bank-connect__bank-code { color: #555; font-size: 0.85rem; white-space: nowrap; }
.bank-connect__logo { width: 28px; height: 28px; border-radius: 4px; object-fit: contain; }
.bank-connect__logo--fallback { display: inline-flex; align-items: center; justify-content: center; background: #eef2f7; color: #33517a; }
.bank-connect__no-results, .bank-connect__search-error { color: #555; padding: 0.5rem 0; }
.bank-connect__search-error { color: #9b1c1c; }
.bank-connect__bank { display: flex; align-items: center; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.bank-connect__explain { margin-bottom: 0.5rem; }
.bank-connect__security { display: flex; gap: 0.5rem; align-items: flex-start; background: #f0f7f1; border: 1px solid #cfe3d2; border-radius: 8px; padding: 0.6rem 0.75rem; margin: 0.75rem 0; }
.bank-connect__security-icon { flex: 0 0 auto; margin-top: 2px; color: #1e6b37; }
.bank-connect__form { margin: 1rem 0 0.25rem; }
.bank-connect__cancel { margin-top: 0.5rem; }
.bank-connect__bank-name { font-size: 1.1rem; font-weight: 600; margin: 0.25rem 0 1rem; }
.bank-connect__accounts-title { font-size: 1rem; margin-bottom: 0.5rem; }
.bank-connect__accounts { list-style: none; padding: 0; margin: 0 0 1rem; border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
.bank-connect__account { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.75rem; }
.bank-connect__account + .bank-connect__account { border-top: 1px solid #eee; }
.bank-connect__account-icon { color: #33517a; }
.bank-connect__iban { font-variant-numeric: tabular-nums; flex: 1 1 auto; }
.bank-connect__currency { color: #555; font-size: 0.85rem; }
.bank-connect__sync-note { color: #1e6b37; margin-bottom: 1rem; }
.bank-connect__error-text { margin: 0.5rem 0 1rem; }
.source-row__bank-code { color: #555; font-size: 0.8rem; margin-right: 6px; }

/* --- Login screen — split-screen redesign (design-handoff 2026-09-15) --- */

.login {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #fff;
}

/* Top navigation */
.login__topnav { border-bottom: 1px solid #eceff3; flex-shrink: 0; }

.login__topnav-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 24px;
    flex-wrap: wrap;
}

.login__topnav-logo {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-decoration: none;
}


.login__topnav-links { display: flex; gap: 20px; flex-wrap: wrap; }

.login__topnav-links a {
    font-size: 0.88rem;
    font-weight: 600;
    color: #3b4a5a;
    text-decoration: none;
}

.login__topnav-links a:hover { color: var(--color-primary-text); }

/* Split layout */
.login__split { flex: 1; display: flex; flex-wrap: wrap; }

/* Brand panel (dark, left) */
.login__brand {
    box-sizing: border-box;
    flex: 1 1 420px;
    min-width: 340px;
    min-height: 320px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--color-brand-gradient-end), var(--color-navy));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
}

.login__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    pointer-events: none;
}

.login__blob--1 {
    width: 340px; height: 340px;
    background: var(--color-primary-on-dark);
    opacity: 0.35;
    top: -60px; left: -60px;
    animation: loginBlob1 14s ease-in-out infinite;
}

.login__blob--2 {
    width: 260px; height: 260px;
    background: var(--color-amber);
    opacity: 0.22;
    bottom: -40px; right: -20px;
    animation: loginBlob2 18s ease-in-out infinite;
}

.login__blob--3 {
    width: 180px; height: 180px;
    background: var(--color-primary-on-dark);
    opacity: 0.18;
    bottom: 20%; left: 10%;
    animation: loginBlob3 11s ease-in-out infinite;
}

@keyframes loginBlob1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(24px, -18px) scale(1.08); }
}
@keyframes loginBlob2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-20px, 22px) scale(1.05); }
}
@keyframes loginBlob3 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(14px, 14px); }
}

@media (prefers-reduced-motion: reduce) {
    .login__blob { animation: none; }
}

.login__brand-content {
    position: relative;
    z-index: 1;
    max-width: 400px;
    width: 100%;
}

.login__brand-logo {
    font-size: 1.7rem;
    font-weight: 800;
    margin-bottom: 18px;
    letter-spacing: -0.01em;
    color: #fff;
}


.login__brand-copy {
    font-size: 1.02rem;
    line-height: 1.6;
    color: #dbe6ec;
    margin-bottom: 28px;
}

.login__brand-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.login__brand-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #c6d5dd;
}

.login__brand-features li::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary-on-dark);
    flex-shrink: 0;
}

/* Form panel (light, right) */
.login__form-panel {
    box-sizing: border-box;
    flex: 1 1 380px;
    min-width: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}

.login__form-card {
    width: 100%;
    max-width: 380px;
}

.login__eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary-text);
    margin-bottom: 8px;
}

.login__headline {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 26px;
    letter-spacing: -0.01em;
    color: var(--color-navy);
}

/* Form fields */
.login__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login__field { display: flex; flex-direction: column; }

.login__label {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--color-navy);
}

.login__input {
    width: 100%;
    box-sizing: border-box;
    min-height: 46px;
    padding: 11px 14px;
    border: 1px solid #dfe3ea;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--color-navy);
    background: #fff;
}

.login__input:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
    border-color: var(--color-primary);
}

.login__input[aria-invalid="true"] { border-color: var(--color-error); }

.login__password { position: relative; display: flex; }

.login__input--password { flex: 1; padding-right: 5.2rem; }

.login__toggle {
    position: absolute;
    top: 6px; right: 6px; bottom: 6px;
    border: none;
    background: transparent;
    color: var(--color-muted);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0 10px;
}

.login__error {
    color: var(--color-error);
    font-size: 0.85rem;
    margin-top: 0.3rem;
}

.login__error:empty { display: none; }
.login__error--general { margin: 0; }

/* Security-logout notice after an automatic logout — amber bg/border pair
   from the sanctioned warning palette (FE-1.3c wireframe). */
.login__notice {
    background: var(--color-amber-bg);
    border: 1px solid var(--color-amber-border);
    color: var(--color-warning-text);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0 0 1rem;
}

.login__submit {
    position: relative;
    width: 100%;
    margin-top: 6px;
    min-height: var(--button-height);
    font-size: 0.98rem;
    font-weight: 700;
    border-radius: var(--button-radius);
    justify-content: center;
}

.login__spinner {
    display: none;
    width: 1rem;
    height: 1rem;
    margin-left: 0.5rem;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: loginSpin 0.7s linear infinite;
}

.login__submit--loading .login__spinner { display: inline-block; }

@keyframes loginSpin { to { transform: rotate(360deg); } }

.login__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 32px;
    font-size: 0.72rem;
    color: #9aa5b1;
}

.login__footer a {
    font-size: 0.72rem;
    color: #9aa5b1;
    text-decoration: underline;
}

/* On very small screens, collapse brand panel */
@media (max-width: 480px) {
    .login__brand { min-height: 180px; padding: 28px 20px; }
    .login__brand-copy,
    .login__brand-features { display: none; }
}

/* --- Erstanmeldung placeholder (FE-1.2 will replace this screen) --- */

.erstanmeldung__title {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
    text-align: center;
}

.erstanmeldung__text {
    color: var(--color-muted);
    text-align: center;
}

/* Live password requirements checklist (#644): one entry per rule, the
   state word is carried as text for screen readers and clipped visually. */
.erstanmeldung__rules {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.erstanmeldung__rule {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--color-muted);
}

.erstanmeldung__rule--met {
    color: var(--color-success);
}

.erstanmeldung__rule-icon {
    display: inline-block;
    width: 1rem;
    text-align: center;
}

.erstanmeldung__rule--met .erstanmeldung__rule-icon::before {
    content: "✓";
}

.erstanmeldung__rule--unmet .erstanmeldung__rule-icon::before {
    content: "✗";
}

.erstanmeldung__rule-state {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Strength meter (#644): bar fill width and level word come from JS per
   keystroke; the checklist region already announces state, so the meter
   stays a visual aid (bar aria-hidden, label plain text). */
.erstanmeldung__strength {
    margin-top: 0.75rem;
}

.erstanmeldung__strength-bar {
    height: 0.375rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg);
    overflow: hidden;
}

.erstanmeldung__strength-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: var(--color-danger);
}

.erstanmeldung__strength--medium .erstanmeldung__strength-fill {
    background: var(--color-warning);
}

.erstanmeldung__strength--strong .erstanmeldung__strength-fill {
    background: var(--color-success);
}

.erstanmeldung__strength-label {
    display: flex;
    flex-wrap: wrap;
    margin: 0.375rem 0 0;
    font-size: 0.85rem;
    color: var(--color-muted);
}

.erstanmeldung__strength-hint {
    color: var(--color-muted);
}

/* --- Konto & Sicherheit (#162) --- */

/* ── Account page layout (Option B: 2/3 + 1/3 split) ─────────────────── */
.account { max-width: 1100px; }

.account__layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.25rem;
    align-items: start;
}

.account__main { display: flex; flex-direction: column; gap: 1.25rem; }
.account__side { display: flex; flex-direction: column; gap: 1.25rem; }

@media (max-width: 700px) {
    .account__layout { grid-template-columns: 1fr; }
}

.account-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
}

.account-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

/* Security status rows in the side panel */
.account-security-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}
.account-security-row:last-child { border-bottom: none; padding-bottom: 0; }
.account-security-row:first-child { padding-top: 0; }

.account-security-row__info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}
.account-security-row__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
}
.account-security-row__desc {
    font-size: 0.78rem;
    color: var(--color-muted);
}

.account-security-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 700;
    vertical-align: middle;
    margin-left: 5px;
}
.account-security-badge--ok   { background: #dcfce7; color: #166534; }
.account-security-badge--warn { background: #fef3c7; color: var(--color-warning-text); }

/* MFA setup flow inside side panel */
.account-mfa-setup {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 0;
}
.account-mfa-setup:first-child { padding-top: 0; }

/* Small button variant for side panel */
.btn--sm {
    padding: 6px 12px;
    font-size: 0.8rem;
    min-height: 32px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Kept for backwards compat (MFA active banner uses it) */
.account-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-border);
}
.account-section:last-child { border-bottom: none; }

.account-section__title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--color-navy);
}

.account-section__current {
    font-size: 0.9rem;
    color: var(--color-muted);
    margin-bottom: 0.75rem;
}

/* Form shared with login-style inputs */
.account-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* 2-column row for New Password + Confirm (Option B layout) */
.account-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 500px) { .account-form__row { grid-template-columns: 1fr; } }

/* Buttons inside account-form must not stretch full width */
.account-form > .btn { align-self: flex-start; }

.account-form__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.account-form__label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
}

.account-form__input {
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 1rem;
    min-height: 44px;
    background: var(--color-surface);
    color: var(--color-text);
}

.account-form__input:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
    border-color: transparent;
}

.account-form__input[aria-invalid="true"] {
    border-color: #dc2626;
}

.account-form__input--code {
    max-width: 120px;
    letter-spacing: 0.2em;
    font-size: 1.15rem;
    text-align: center;
}

.account-form__hint {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0;
}

.account-form__error {
    font-size: 0.85rem;
    color: #dc2626;
    margin: 0;
}

.account-form__success {
    font-size: 0.85rem;
    color: #1e6b37;
    background: #e6f4ea;
    padding: 8px 12px;
    border-radius: 6px;
    margin: 0;
}

.account-form__warning {
    font-size: 0.85rem;
    color: var(--color-warning-text);
    background: #fef3c7;
    padding: 8px 12px;
    border-radius: 6px;
    margin: 0;
}

/* MFA states */
.account-mfa--active {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.account-mfa__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #1e6b37;
}

.account-mfa__status::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1e6b37;
}

.account-mfa__description { color: #555; margin-bottom: 1rem; font-size: 0.9rem; }
.account-mfa__instruction { color: #555; margin-bottom: 0.75rem; font-size: 0.9rem; }

.account-mfa__qr {
    margin: 1rem 0;
    display: inline-block;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fff;
}

.account-mfa__manual {
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 1rem;
}

.account-mfa__secret {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    letter-spacing: 0.05em;
    user-select: all;
}

.btn--secondary {
    background: transparent;
    border-color: var(--color-navy);
    color: var(--color-navy);
    font-weight: 700;
}

.btn--secondary:hover {
    background: var(--color-secondary-hover);
}

.btn--danger-outline {
    background: transparent;
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* ── Chart of accounts ─────────────────────────────────────────────────── */
.chart-of-accounts { max-width: 640px; }

.chart-of-accounts__search-wrap { margin: 1rem 0 0.75rem; display: flex; gap: 0.5rem; }
.chart-of-accounts__search {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.875rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--color-surface);
    color: var(--color-text);
}
.chart-of-accounts__search:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }

.chart-of-accounts__import {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.chart-of-accounts__add-wrap { margin-bottom: 1.25rem; }
.chart-of-accounts__add-wrap summary { display: inline-flex; cursor: pointer; list-style: none; }
.chart-of-accounts__add-wrap summary::-webkit-details-marker { display: none; }
.chart-of-accounts__add-form {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 0.75rem;
    background: var(--color-surface);
}
.chart-of-accounts__add-fields { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.chart-of-accounts__add-fields .account-form__field { flex: 1; min-width: 120px; }
.chart-of-accounts__input--number { max-width: 120px; }

.chart-of-accounts__flash { padding: 0.6rem 0.875rem; border-radius: 6px; margin: 0.5rem 0 1rem; font-size: 0.9rem; }
.chart-of-accounts__flash--success { background: #ecfdf5; color: #065f46; }
.chart-of-accounts__flash--error { background: #fef2f2; color: #991b1b; }

.chart-of-accounts__list { list-style: none; padding: 0; margin: 0; }
.chart-of-accounts__row {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
}
.chart-of-accounts__row--inactive { opacity: 0.55; }
.chart-of-accounts__number { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--color-text); }
.chart-of-accounts__name { color: var(--color-text); }
.chart-of-accounts__badge {
    font-size: 0.75rem;
    color: #6b7280;
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 99px;
    white-space: nowrap;
}
.chart-of-accounts__actions { display: flex; gap: 0.375rem; align-items: center; }

.chart-of-accounts__edit-wrap { position: relative; }
.chart-of-accounts__edit-wrap summary { display: inline-flex; cursor: pointer; list-style: none; }
.chart-of-accounts__edit-wrap summary::-webkit-details-marker { display: none; }
.chart-of-accounts__edit-form {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 10;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.875rem;
    min-width: 220px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.btn--ghost { background: transparent; border-color: var(--color-border); color: var(--color-text); }
.btn--danger { border-color: var(--color-danger-border); color: var(--color-danger); }
.btn--danger:hover { background: var(--color-danger-bg); }

.chart-of-accounts__empty { padding: 2rem 0; color: #6b7280; text-align: center; }

/* #956: prev/next pagination below the bounded chart list. */
.chart-of-accounts__pagination { display: flex; gap: 0.75rem; align-items: center; justify-content: center; flex-wrap: wrap; margin: 1rem 0; }
.chart-of-accounts__page-status { color: var(--color-muted); font-size: 0.9rem; }

@media (min-width: 768px) {
    .chart-of-accounts__row { grid-template-columns: 80px 1fr auto; }
}

/* ── Logout dialog — two-option layout (#216) ───────────────────── */
.logout-dialog__sub {
    font-size: 0.875rem;
    color: var(--color-muted);
    margin: 0.25rem 0 1.25rem;
}
.logout-dialog__options {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
}
.logout-dialog__opt-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 14px 12px;
    text-align: left;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    cursor: pointer;
    font: inherit;
}
.logout-dialog__opt-btn--danger {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-border);
}
.logout-dialog__opt-btn--danger .logout-dialog__opt-label { color: var(--color-danger); }
.logout-dialog__opt-icon {
    display: flex;
    align-items: center;
    flex: none;
    color: var(--color-text);
}
.logout-dialog__opt-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}
.logout-dialog__opt-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
}
.logout-dialog__opt-sub {
    font-size: 0.75rem;
    color: var(--color-muted);
    margin-top: 1px;
}
.logout-dialog__cancel {
    width: 100%;
    text-align: center;
}

/* ── Auto-logout warning banner (#216) ──────────────────────────── */
.autologout-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--color-amber);
    color: #1a1a1a;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: calc(0.625rem + env(safe-area-inset-top)) 1rem 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    display: none;
}
.autologout-banner:not([hidden]) {
    display: flex;
}
.autologout-banner__text { flex: 1; }

/* Sidebar offset on desktop */
@media (min-width: 768px) {
    .autologout-banner { left: 220px; }
}

/* account-section__hint helper */
.account-section__hint {
    font-size: 0.875rem;
    color: var(--color-muted);
    margin-bottom: 0.875rem;
}

/* ── Sync status bar (#323) ─────────────────────────────────────── */
.sync-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 0 6px;
    font-size: 0.8rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.5rem;
}
.sync-bar__dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.sync-bar__msg  { flex: 1; }
.sync-bar__link { text-decoration: underline; white-space: nowrap; font-weight: 600; }
.sync-bar--ok    { color: #065f46; }
.sync-bar--ok    .sync-bar__dot { background: #059669; }
.sync-bar--warn  { color: #b45309; }
.sync-bar--warn  .sync-bar__dot { background: #F59E0B; }
.sync-bar--error { color: #991b1b; }
.sync-bar--error .sync-bar__dot { background: #dc2626; }
.sync-bar--ok   .sync-bar__link { color: #065f46; }
.sync-bar--warn .sync-bar__link { color: #b45309; }
.sync-bar--error .sync-bar__link { color: #991b1b; }

/* ── Receipts overview (#323) ─────────────────────────────────────── */
.receipts { max-width: 640px; }
@media (min-width: 768px) {
    .receipts { max-width: 900px; }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.receipts__currency-note {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-muted);
}

.receipts__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.receipts__add-button { display: none; }
@media (min-width: 768px) {
    .receipts__add-button { display: inline-flex; align-items: center; font-weight: 600; }
}

.receipts__search-wrap { margin: 0.75rem 0 0.5rem; }
.receipts__search {
    width: 100%;
    padding: 0.55rem 0.875rem 0.55rem 2.25rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    min-height: 44px;
    font-size: 1rem;
    font-family: inherit;
    background: var(--color-surface);
    color: var(--color-text);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
}
.receipts__search:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.receipts__search::placeholder { color: var(--color-muted); }

.receipts__filters {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin-bottom: 0.75rem;
}
.receipts__filters::-webkit-scrollbar { display: none; }
.receipts__chip {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 4px 14px;
    min-height: 44px;
    border-radius: 99px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-muted);
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
    font-family: inherit;
}
.receipts__chip--active {
    background: var(--color-primary-fill);
    border-color: var(--color-primary-fill);
    color: var(--color-on-primary);
}

.receipts__list { list-style: none; padding: 0; margin: 0; }
.receipts__item { border-bottom: 1px solid var(--color-border); }
.receipts__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "main right" "actions actions";
    column-gap: 10px;
    align-items: start;
    padding: 10px 0;
}
.receipts__item-inner {
    grid-area: main;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    text-decoration: none;
    color: var(--color-text);
}

.receipts__thumb {
    width: 44px;
    height: 56px;
    border-radius: 5px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    color: var(--color-muted);
}
.receipts__thumb--img img { width: 100%; height: 100%; object-fit: cover; }

.receipts__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.receipts__vendor { font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.receipts__date   { font-size: 0.78rem; color: var(--color-muted); }

.receipts__right  { grid-area: right; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.receipts__booking { font-size: 0.78rem; color: var(--color-success); }
.receipts__amount { font-size: 0.9rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.receipts__badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 99px;
    white-space: nowrap;
    border: 1px solid transparent;
}
.receipts__badge--processing { background: color-mix(in srgb, var(--color-muted) 12%, var(--color-surface)); color: var(--color-muted); }
.receipts__badge--review     { background: var(--color-amber-bg); color: var(--color-warning-text); }
.receipts__badge--missing_payment { background: var(--color-amber-bg); color: var(--color-warning-text); }
.receipts__badge--amount_mismatch { background: var(--color-amber-bg); color: var(--color-warning-text); }
.receipts__badge--linked     { background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface)); color: var(--color-success); }
.receipts__badge--no_match   { background: var(--color-danger-bg); color: var(--color-danger); }
.receipts__badge--failed     { background: var(--color-surface); border-color: var(--color-danger-border); color: var(--color-danger); }
.receipts__badge--rejected   { background: var(--color-surface); border-color: var(--color-border); color: var(--color-muted); }
/* Plain-language reason on failed/rejected rows: never a raw reason code. */
.receipts__error-message { font-size: 0.78rem; color: var(--color-danger); }

/* The one next step of a row, as a text link (button-styled when it posts). */
.receipts__action {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary-text);
    text-decoration: underline;
    background: none;
    border: 0;
    cursor: pointer;
}
.receipts__retry-form { display: inline-flex; }

.receipts__actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-left: 54px;
}
@media (min-width: 768px) {
    .receipts__row {
        grid-template-columns: minmax(0, 1fr) auto 200px;
        grid-template-areas: "main right actions";
        align-items: center;
    }
    .receipts__actions { justify-content: flex-end; margin-left: 0; }
}

/* Per-row menu: a native <details>, reachable without script. */
.receipts__menu { position: relative; margin-left: auto; }
.receipts__menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    font-size: 1.25rem;
    color: var(--color-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
    list-style: none;
}
.receipts__menu-toggle::-webkit-details-marker { display: none; }
.receipts__menu[open] .receipts__menu-toggle {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
}
.receipts__menu-panel {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 10;
    width: min(280px, calc(100vw - 2rem));
    margin-top: 4px;
    padding: 6px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--color-text) 14%, transparent);
}
.receipts__menu-form { display: block; }
.receipts__menu-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 0.875rem;
    text-align: left;
    color: var(--color-text);
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}
.receipts__menu-item:hover { background: var(--color-bg); }
.receipts__menu-item--danger { color: var(--color-danger); }
.receipts__menu-item--disabled { color: var(--color-muted); cursor: default; }
.receipts__menu-item--disabled:hover { background: none; }
.receipts__menu-reason { font-size: 0.75rem; color: var(--color-muted); }

.receipts__no-results { color: var(--color-muted); text-align: center; padding: 2rem 0; font-size: 0.9rem; }
.receipts__no-results[hidden] { display: none; }
.receipts__no-results .receipts__empty-text { margin: 0.25rem auto 0.5rem; }

/* Empty state */
.receipts__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1rem 2rem;
    gap: 0.75rem;
}
.receipts__empty-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary-text);
    display: flex; align-items: center; justify-content: center;
}
.receipts__empty-title { font-size: 1rem; font-weight: 700; }
.receipts__empty-text  { font-size: 0.875rem; color: var(--color-muted); max-width: 280px; line-height: 1.5; }
.receipts__empty-divider {
    display: flex; align-items: center; gap: 10px; width: 100%; max-width: 260px;
}
.receipts__empty-divider::before,
.receipts__empty-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--color-border);
}
.receipts__empty-divider span { font-size: 0.72rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.06em; }
/* FAB */
.receipts__fab {
    position: fixed;
    bottom: calc(var(--mobile-nav-height) + 1.25rem);
    right: 1.25rem;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--color-primary-fill);
    color: var(--color-on-primary);
    border: none;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary-fill) 40%, transparent);
    cursor: pointer;
    z-index: 110;
}
@media (min-width: 768px) {
    .receipts__fab { right: 2rem; bottom: 2rem; display: none; }
}

/* Add-receipt dialog: a native <dialog> in the top layer, so it sits above the
   fixed nav, cookie banner and FAB without a z-index of its own. */
.receipts__add-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    margin-bottom: 0.25rem;
    cursor: grab;
    touch-action: none;
}
.receipts__add-handle::before {
    content: '';
    width: 36px; height: 4px; border-radius: 99px;
    background: var(--color-border);
}
.receipts__add-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.receipts__add-header .fl-dialog__title { margin: 0; font-size: 1.0625rem; }
.receipts__add-close {
    min-width: 44px; min-height: 44px;
    margin-right: -0.5rem;
    display: flex; align-items: center; justify-content: center;
    background: none;
    border: none;
    border-radius: 10px;
    color: var(--color-muted);
    cursor: pointer;
}
.receipts__add-close:hover { color: var(--color-text); }
.receipts__add-rows { display: flex; flex-direction: column; gap: 8px; }
.receipts__add-row {
    display: flex; align-items: center; gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.receipts__add-row:first-child {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}
.receipts__add-row:hover { border-color: var(--color-primary); }
.receipts__add-icon {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary-text);
    display: flex; align-items: center; justify-content: center;
}
.receipts__add-label { display: block; font-size: 0.9375rem; font-weight: 700; }
.receipts__add-sub { display: block; font-size: 0.8125rem; color: var(--color-muted); margin-top: 1px; }
.receipts__add-sub--desktop { display: none; }
.receipts__add-input { display: none; }
.receipts__add-status {
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    color: var(--color-muted);
    text-align: center;
}
.receipts__add-error {
    margin: 0.75rem 0 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-danger);
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger-border);
    border-radius: 6px;
}
.receipts__add-cancel { display: flex; margin: 0.5rem auto 0; min-height: 44px; }
.receipts__add-dialog--busy .receipts__add-rows { opacity: 0.6; pointer-events: none; }
.receipts__add-dialog--over {
    outline: 2px dashed var(--color-primary);
    outline-offset: -8px;
}
@media (min-width: 768px) {
    .receipts__add-handle { display: none; }
    .receipts__add-header { margin-bottom: 1rem; }
    .receipts__add-header .fl-dialog__title { font-size: 1.125rem; }
    .receipts__add-row { gap: 14px; min-height: 64px; padding: 10px 14px; }
    .receipts__add-icon { width: 40px; height: 40px; }
    .receipts__add-rows { gap: 10px; }
    .receipts__add-sub--phone { display: none; }
    .receipts__add-sub--desktop { display: block; }
}

/* ── File upload screen (#157) ──────────────────────────────────── */
.upload { max-width: 640px; }
.upload h1 { margin-bottom: 1.5rem; }

.upload__transaction {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary-text);
    font-size: 0.875rem;
    margin: 0 0 1.25rem;
}

.upload__form { display: flex; flex-direction: column; gap: 1.25rem; }

.upload__zone {
    border: 2px dashed var(--color-border);
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: var(--color-surface);
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.upload__zone:hover,
.upload__zone:focus-within { border-color: var(--color-primary); }
.upload__zone--over {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}
.upload__zone:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    border: 0;
}

.upload__zone-idle { display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.upload__zone-idle[hidden] { display: none; }
.upload__cloud { color: var(--color-muted); }
.upload__zone-label { font-size: 0.95rem; font-weight: 600; color: var(--color-text); }
.upload__zone-hint  { font-size: 0.8rem; color: var(--color-muted); }

.upload__zone-preview {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 0.5rem;
    color: var(--color-text);
    font-size: 0.875rem;
    pointer-events: none;
}
.upload__zone-preview:not([hidden]) { display: flex; }
.upload__filename { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload__remove {
    pointer-events: all;
    background: none; border: none;
    font-size: 1.2rem; cursor: pointer;
    color: var(--color-muted);
    line-height: 1;
    padding: 4px;
    border-radius: 4px;
}
.upload__remove:hover { color: #dc2626; }

.upload__zone-progress { display: none; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 240px; }
.upload__zone-progress:not([hidden]) { display: flex; }
.upload__bar { width: 100%; height: 6px; background: var(--color-border); border-radius: 99px; overflow: hidden; }
.upload__bar-fill { height: 100%; background: var(--color-primary); border-radius: 99px; width: 0; transition: width 0.2s; }
.upload__progress-text { font-size: 0.8rem; color: var(--color-muted); }

.upload__error {
    font-size: 0.875rem;
    color: #dc2626;
    background: #fef2f2;
    border-radius: 6px;
    padding: 8px 12px;
}
.upload__error--top {
    margin-bottom: 0.75rem;
}

.upload__divider {
    display: flex; align-items: center; gap: 10px;
}
.upload__divider::before,
.upload__divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }
.upload__divider span { font-size: 0.75rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.06em; }

.upload__camera-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    text-decoration: none;
    color: var(--color-text);
    font-size: 0.9rem;
    font-weight: 500;
}
.upload__camera-btn:hover { border-color: var(--color-primary); color: var(--color-primary-text); }
.upload__camera-chevron { margin-left: auto; color: var(--color-muted); }

/* ── Camera capture screen (FE-4.1 #156; full-screen overlay rework,
   UI reference #359) ────────────────────────── */
.camera {
    position: fixed;
    inset: 0;
    z-index: 150; /* above the fixed nav (100) and consent banner (101), below the auto-logout banner (200) */
    background: #000;
    color: #fff;
    display: flex;
    flex-direction: column;
    padding-top: env(safe-area-inset-top);
}

.camera__topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
}

.camera__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    color: #fff;
    text-decoration: none;
    border: none;
    flex-shrink: 0;
}

/* Heading stays in the a11y tree without claiming overlay space. */
.camera__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.camera__stage {
    position: relative;
    flex: 1;
    min-height: 0;
    background: #000;
    overflow: hidden;
}

.camera__stage video,
.camera__stage canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Viewfinder fills the screen edge to edge; the captured preview must show
   the whole photo, letterboxed. */
.camera__stage video { object-fit: cover; }
.camera__stage canvas { object-fit: contain; }

.camera__error {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: var(--color-error-bg);
    color: var(--color-error);
    border-radius: 8px;
    font-size: 0.875rem;
}

.camera__error[hidden] { display: none; }

.camera__error-link {
    color: var(--color-error);
    font-weight: 600;
}

.camera__controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
}

.camera__controls[hidden] { display: none; }

.camera__shutter {
    width: 64px;
    height: 64px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.camera__shutter-ring {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 4px solid var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.camera__shutter:active .camera__shutter-ring { transform: scale(0.92); }

.camera__switch {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.camera__switch:hover { border-color: var(--color-primary); color: var(--color-primary-text); }

.camera__tx-chip {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(255,255,255,0.18);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 500;
}

.camera__uploading {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 3rem;
    background: rgba(0,0,0,0.8);
}

.camera__uploading[hidden] { display: none; }

.camera__upload-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--color-border);
    overflow: hidden;
}

.camera__upload-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: var(--color-primary);
    transition: width 0.2s;
}

.camera__upload-text {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-muted);
}

/* ── App footer (#186) ───────────────────────────────────────── */
.app-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 12px;
    padding: 10px 12px 8px;
    border-top: 1px solid var(--color-border);
}

/* The legal footer must not enlarge the fixed bottom nav on phones: the
   sidebar copy is hidden below the tablet breakpoint and an inline copy
   scrolls with the content instead, keeping the bar one tab row tall
   (FAB, bottom sheet and content padding are sized against that bar). */
.app-footer--inline { display: none; margin-top: 2.5rem; }
@media (max-width: 767.98px) {
    .app-footer--sidebar { display: none; }
    /* Short pages: the footer sits at the foot of the screen, above the nav,
       instead of right under the last card. margin-top:auto in a column. */
    .app__content { display: flex; flex-direction: column; }
    .app__content > * { width: 100%; box-sizing: border-box; }
    .app-footer--inline { display: flex; margin-top: auto; }
    .app__content > :nth-last-child(2):not(.app-footer--inline) { margin-bottom: 2.5rem; }
}

.app-footer__link {
    font-size: 0.72rem;
    color: var(--color-muted);
    text-decoration: none;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 2px;
}

.app-footer__link:hover { color: var(--color-primary-text); text-decoration: underline; }

/* The sidebar copy sits inside the dark nav (#778): light text, and the
   light-ground link hover (#0B6E65, 2.4:1 on navy) swaps to the on-dark
   accent. The inline copy stays on the light page ground, untouched. */
.app-footer--sidebar {
    border-top-color: var(--color-nav-border);
}

.app-footer--sidebar .app-footer__link {
    color: var(--color-nav-muted);
}

.app-footer--sidebar .app-footer__link:hover {
    color: var(--color-nav-text);
}

.app-footer--sidebar .app-footer__link:focus-visible {
    outline: 2px solid var(--color-primary-on-dark);
    outline-offset: -2px;
}

@media (min-width: 768px) {
    .app-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 12px 16px 16px;
        margin-top: auto;
    }

    .app-footer__link {
        min-height: 32px;
        font-size: 0.75rem;
    }
}

/* ── Static pages: Impressum, Datenschutz, Barrierefreiheit (#186) ── */
.static-page { max-width: 640px; }
.static-page h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: 1rem; }
.static-page__placeholder { color: var(--color-muted); font-style: italic; }

/* ── Transaction detail (#154 / FE-3.3) ── */
.txdetail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
  padding: var(--space-4, 1rem);
}

.txdetail__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 0.5rem);
}

.txdetail__status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.txdetail__status-badge--missing_receipt,
.txdetail__status-badge--clarification {
  background: #fff3cd;
  color: #856404;
}

.txdetail__status-badge--likely_correct {
  background: #d1ecf1;
  color: #0c5460;
}

.txdetail__status-badge--complete {
  background: #d4edda;
  color: #155724;
}

.txdetail__section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--space-3, 0.75rem);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-md, 0.5rem);
}

/* Account assignment (#432): badge states reuse the status-badge palette
   language; every badge carries its text — colour is never the only signal. */
.txdetail__account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.txdetail__account-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.txdetail__account-badge--auto         { background: #eff6ff; color: #2563eb; }
/* Marked variant of the auto family (ADR-031 amendment): the AI's
   agreement flagged the proposal — dashed border marks the machine note. */
.txdetail__account-badge--auto-flagged { background: #eff6ff; color: #2563eb; box-shadow: inset 0 0 0 1px #2563eb; }
.txdetail__account-badge--review       { background: #fffbeb; color: #b45309; }
.txdetail__account-badge--missing      { background: #fef2f2; color: #dc2626; }
.txdetail__account-badge--confirmed    { background: #ecfdf5; color: #059669; }

.txdetail__reason {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-muted, #6b7280);
}

.txdetail__account-explanation {
  margin-top: 0.25rem;
}

.txdetail__account-explanation summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: 0.85rem;
  color: var(--color-primary-text);
}

.txdetail__account-explanation summary::-webkit-details-marker {
  display: none;
}

.txdetail__account-explanation summary::after {
  content: ' \25be';
}

.txdetail__account-explanation[open] summary::after {
  content: ' \25b4';
}

.txdetail__account-explanation-text {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--color-muted, #6b7280);
  line-height: 1.5;
}

.txdetail__account-explanation-note {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--color-amber, #f59e0b);
  line-height: 1.5;
}

.txdetail__account-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* Account correction sheet — z 150 backdrop / 151 sheet, above nav and
   consent banner. */
.txdetail__sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 150;
}

.txdetail__sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-surface, #fff);
  border-radius: 16px 16px 0 0;
  padding: 12px 1.25rem max(2rem, env(safe-area-inset-bottom));
  z-index: 151;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  max-width: 640px;
  margin: 0 auto;
  max-height: 80vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.25s ease;
}

.txdetail__sheet--open {
  transform: translateY(0);
}

.txdetail__sheet-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  margin-bottom: 0.5rem;
}

.txdetail__sheet-handle::before {
  content: '';
  width: 36px;
  height: 4px;
  border-radius: 99px;
  background: var(--color-border, #e5e7eb);
}

.txdetail__sheet-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
}

.txdetail__sheet-error {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: #dc2626;
}

.txdetail__error {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: #dc2626;
}

.txdetail__sheet-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 12px;
  min-height: 56px;
  border-radius: 10px;
  border: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-bg, #f9fafb);
  text-align: left;
  margin-bottom: 8px;
  cursor: pointer;
}

.txdetail__sheet-number {
  font-weight: 700;
  min-width: 3.5rem;
}

.txdetail__sheet-name {
  color: var(--color-text, #111827);
}

.txdetail__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted, #6b7280);
}

.txdetail__amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text, #111827);
  font-variant-numeric: tabular-nums;
}

.txdetail__amount--debit {
  color: #dc2626;
}

.txdetail__meta {
  font-size: 0.875rem;
  color: var(--color-text, #111827);
}

.txdetail__iban {
  font-size: 0.8rem;
  color: var(--color-muted, #6b7280);
  font-variant-numeric: tabular-nums;
}

.txdetail__value {
  font-size: 1rem;
  color: var(--color-text, #111827);
}

.txdetail__no-receipt {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-warning-text);
}

.txdetail__no-receipt-hint {
  font-size: 0.8rem;
  color: var(--color-muted, #6b7280);
}

.txdetail__section--audit {
  background: transparent;
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}

.txdetail__audit {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.txdetail__audit-entry {
  display: flex;
  gap: 0.75rem;
  font-size: 0.8rem;
}

.txdetail__audit-time {
  color: var(--color-muted, #6b7280);
  flex-shrink: 0;
}


/* Verlauf of a business transaction (#367): newest first, time left (above
   the text on a phone), one mark per entry telling the system from a person
   and automatic from manual. */
.txdetail__history { display: block; }
.txdetail__history-title { margin: 0 0 .75rem; font-size: 1.05rem; color: var(--color-navy); }
.txdetail__history-legend { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .5rem; padding: 0; list-style: none; }
.txdetail__history-mark {
  display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .7rem; font-weight: 600; white-space: nowrap;
  background: var(--color-light-gray); color: var(--color-muted);
}
.txdetail__history-mark--usr { background: var(--color-mint); color: var(--color-primary-text); }
.txdetail__history-mark--note { background: var(--color-amber-bg); color: var(--color-warning-text); }
.txdetail__history-list { list-style: none; margin: 0; padding: 0; }
.txdetail__history-entry {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 1rem; padding: .6rem 0;
  border-top: 1px solid var(--color-border);
}
.txdetail__history-entry--decision { background: var(--color-mint); border-radius: 6px; padding-inline: .625rem; margin-inline: -.625rem; }
.txdetail__history-time { font-size: .76rem; color: var(--color-muted); line-height: 1.35; font-variant-numeric: tabular-nums; }
.txdetail__history-body { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; min-width: 0; }
.txdetail__history-text { font-size: .88rem; font-weight: 600; overflow-wrap: anywhere; }
.txdetail__history-detail { flex-basis: 100%; font-size: .78rem; color: var(--color-muted); overflow-wrap: anywhere; }
.txdetail__history-error, .txdetail__history-truncated { margin: .5rem 0 0; font-size: .8rem; color: var(--color-muted); }
.txdetail__history-error { color: var(--color-error); }
@media (max-width: 767.98px) {
  .txdetail__history-entry { grid-template-columns: minmax(0, 1fr); row-gap: .15rem; }
}

.txdetail__receipt-thumb {
  display: block;
}

.txdetail__receipt-img {
  max-height: 120px;
  border-radius: var(--radius-sm, 0.25rem);
  object-fit: cover;
}

.txdetail__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
  padding-top: var(--space-2, 0.5rem);
}

.txdetail__confirm-btn {
  width: 100%;
  text-align: center;
  min-height: 44px;
}

@media (min-width: 768px) {
  .txdetail {
    max-width: 640px;
  }

  .txdetail__actions {
    flex-direction: row;
  }

  .txdetail__confirm-btn {
    width: auto;
  }
}

/* ── OCR review screen (#158) ────────────────────────────────── */
.review {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 32px;
}

/* Reading and could-not-read states: one card in the details column. The
   failed state's retry re-reads the stored file — the user never re-uploads. */
.review__processing, .review__failed {
    display: flex; flex-direction: column; gap: .5rem; box-sizing: border-box; padding: 1.375rem 1.25rem;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px;
}
.review__processing { align-items: center; text-align: center; }
.review__failed { border-color: var(--color-danger-border); }

.review__spinner {
    width: 36px;
    height: 36px;
    margin-bottom: .25rem;
    border: 4px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-surface));
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: review-spin 0.8s linear infinite;
}

@keyframes review-spin { to { transform: rotate(360deg); } }

.review__processing-title, .review__failed-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--color-navy); }
.review__processing-text { margin: 0; font-size: .8125rem; line-height: 1.5; color: var(--color-muted); }
.review__failed-text { margin: 0 0 .5rem; font-size: .8125rem; line-height: 1.5; color: var(--color-text); }
.review__failed-actions { display: flex; flex-direction: column; gap: .625rem; }
.review__failed-actions > .review__retry { display: flex; }
.review__retry > .review__btn { flex: 1; }

.review__thumb {
    border-radius: 10px;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    max-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.review__thumb-img {
    width: 100%;
    object-fit: contain;
    max-height: 180px;
    display: block;
}

/* Confirmed receipt (#720): values as text and the linked booking card. */
.review__facts {
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
}

.review__fact {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
}

.review__fact:last-child {
    border-bottom: none;
}

.review__fact-value {
    margin: 0;
    font-size: 1rem;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.review__booking {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 12px 0;
    padding: 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
}

.review__booking-title {
    margin: 0;
    font-size: 0.95rem;
}

.review__booking-hint,
.review__booking-counterpart,
.review__booking-date {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text);
}

.review__booking-date {
    color: var(--color-muted);
}

/* The confirmed receipt's Angaben card (#726): heading, edit entry, lock
   hint and value-change history share the card around the facts list. */
.review__values {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 12px 0;
}

.review__values-title {
    margin: 0;
    font-size: 0.95rem;
}

.review__locked-hint {
    margin: 0;
    padding: 14px;
    border-radius: 12px;
    background: var(--color-mint);
    font-size: 0.85rem;
    color: var(--color-text);
}

.review__edit-error {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-error);
}

.review__history-truncated {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-muted);
}

/* The booking card's date/account/amount rows reuse .review__fact without
   the facts list's own box — the card is already the box. */
.review__booking-facts {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.review__fields {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
}

.review__field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
}

.review__field:last-child { border-bottom: none; }

.review__label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.review__input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text);
    font-family: inherit;
    width: 100%;
    padding: 0;
    min-height: 28px;
}

.review__input:focus { color: var(--color-primary-text); }

/* Sachkonto suggestion row value (#667) — read-only, sits beside the
   txdetail__account-badge pill reused from #432. */
.review__value {
    flex: 1;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text);
}

.review__hint {
    font-size: 0.75rem;
    color: #d97706;
    margin: 0;
}

.review__submit {
    width: 100%;
}

/* Review screen frame: heading with status mark and menu, preview beside
   the details, one filled action. Preview on top on a phone, left from 768px
   where it stays while the details scroll. */
.review__head { display: flex; flex-direction: column; gap: 2px; }
.review__title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.review__title-row > h1 { margin: 0; min-width: 0; font-size: 1.3rem; font-weight: 700; color: var(--color-navy); }
.review__meta { margin: 0; font-size: .875rem; color: var(--color-muted); overflow-wrap: anywhere; }

.review__status {
    padding: 2px 10px; border-radius: 10px; border: 1px solid transparent;
    font-size: .75rem; font-weight: 700; white-space: nowrap;
}
.review__status--review {
    background: var(--color-amber-bg); border-color: var(--color-amber-border);
    color: color-mix(in srgb, var(--color-amber) 40%, black);
}
.review__status--processing { background: var(--color-info-bg); border-color: var(--color-info-border); color: var(--color-info); }
.review__status--failed,
.review__status--rejected { background: var(--color-danger-bg); border-color: var(--color-danger-border); color: var(--color-danger); }
.review__status--confirmed {
    background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-success) 40%, var(--color-surface));
    color: var(--color-success);
}

.review__menu { position: relative; margin-left: auto; }
.review__menu-toggle {
    display: flex; align-items: center; justify-content: center; box-sizing: border-box;
    min-width: 44px; min-height: 44px; list-style: none; cursor: pointer;
    border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface);
    font-size: 1.25rem; line-height: 1; color: var(--color-muted);
}
.review__menu-toggle::-webkit-details-marker { display: none; }
.review__menu[open] > .review__menu-toggle { border-color: var(--color-primary); color: var(--color-primary-text); }
.review__menu-list {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 10; box-sizing: border-box;
    min-width: 15rem; max-width: calc(100vw - 2rem); margin: 0; padding: 4px; list-style: none;
    background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--color-navy) 18%, transparent);
}
.review__menu-item {
    display: flex; align-items: center; box-sizing: border-box; width: 100%; min-height: 44px; padding: 0 12px;
    border: 0; border-radius: 6px; background: none; text-align: left; text-decoration: none;
    font: inherit; font-size: .9rem; color: var(--color-text); cursor: pointer;
}
.review__menu-item:hover { background: var(--color-bg); }
.review__menu-item--danger { color: var(--color-danger); }
.review__menu-item--disabled, .review__menu-item--disabled:hover { color: var(--color-muted); background: none; cursor: not-allowed; }
.review__menu-reason { margin: 0; padding: 0 12px 8px; font-size: .75rem; color: var(--color-muted); }

.review__layout { display: flex; flex-direction: column; gap: 1rem; }
.review__preview { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.review__preview-links { display: flex; align-items: center; flex-wrap: wrap; gap: 0 1.25rem; }
.review__main { min-width: 0; }

/* Review fields: every value is an input with its label above it, in the
   shared field style. Yellow marks a value the reading was unsure about, red
   an empty mandatory field with its reason; one banner counts both. The
   rarely needed fields sit in a <details>, so they work without a script. */
.review__form { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.review__banner {
    display: flex; align-items: center; gap: .5rem; box-sizing: border-box; padding: .625rem .875rem;
    background: var(--color-amber-bg); border: 1px solid var(--color-amber-border); border-radius: 8px;
    font-size: .8125rem; color: color-mix(in srgb, var(--color-amber) 40%, black);
}
.review__banner[hidden] { display: none; }
.review__banner-icon { flex-shrink: 0; }
.review__banner-text { font-weight: 600; }
.review__account-body { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.review__entries { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 1.25rem; }
.review__entry { display: flex; flex-direction: column; min-width: 0; }
.review__entry-label { display: block; margin-bottom: .3rem; font-size: .8125rem; font-weight: 600; color: var(--color-text); }
.review__entry-flag { font-weight: 400; }
.review__entry-input {
    display: block; box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 .75rem;
    background: var(--color-bg); border: 1px solid color-mix(in srgb, var(--color-muted) 60%, var(--color-surface));
    border-radius: 6px; font: inherit; font-size: .875rem; color: var(--color-text);
}
.review__entry-note { margin: .25rem 0 0; font-size: .75rem; color: var(--color-muted); }
.review__entry--warn .review__entry-input { background: var(--color-amber-bg); border-color: var(--color-amber); }
.review__entry--warn .review__entry-flag, .review__entry--warn .review__entry-note { color: color-mix(in srgb, var(--color-amber) 40%, black); }
.review__entry--missing .review__entry-input { background: var(--color-danger-bg); border: 1.5px solid var(--color-danger); padding: 0 calc(.75rem - .5px); }
.review__entry--missing .review__entry-flag, .review__entry--missing .review__entry-note { color: var(--color-danger); }
.review__entry-input:focus { background: var(--color-surface); border: 2px solid var(--color-primary); padding: 0 calc(.75rem - 1px); outline: none; }
.review__more-toggle, .review__note-toggle, .review__history-toggle {
    display: inline-flex; align-items: center; box-sizing: border-box; min-height: 44px; list-style: none; cursor: pointer;
    color: var(--color-primary-text); font-size: .8125rem; font-weight: 600; text-decoration: underline;
}
.review__more-toggle::-webkit-details-marker, .review__note-toggle::-webkit-details-marker, .review__history-toggle::-webkit-details-marker { display: none; }
.review__more[open] .review__more-show, .review__more:not([open]) .review__more-hide { display: none; }
.review__more[open] > .review__entries { margin-top: .5rem; }

/* Notes on a receipt: the collapsed add-note row inside the confirm form
   and the confirmed view's notes section — both reuse the page's
   details/summary idiom and its toggle styling. */
.review__note-add { margin-top: .5rem; }
.review__note-body { display: flex; flex-direction: column; gap: .35rem; margin-top: .35rem; }
.review__note-input {
    box-sizing: border-box; width: 100%; min-height: 88px; padding: .5rem .75rem;
    border: 1.5px solid var(--color-border); border-radius: 6px; background: var(--color-surface);
    font: inherit; font-size: .875rem; color: var(--color-text); resize: vertical;
    overflow-wrap: break-word;
}
.review__note-input:focus { border-color: var(--color-primary); outline: none; }
.review__note-error { margin: .25rem 0 0; font-size: .75rem; color: var(--color-error); }
.review__notes { margin-top: 1rem; }
.review__notes-list { display: flex; flex-direction: column; gap: .75rem; margin-top: .5rem; }
.review__notes-empty { margin: 0; font-size: .875rem; color: var(--color-muted); }
.review__notes-entry {
    border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); padding: .5rem .75rem;
}
.review__notes-text { margin: 0; font-size: .875rem; color: var(--color-text); white-space: pre-wrap; overflow-wrap: break-word; }
.review__notes-meta { margin: .25rem 0 0; font-size: .75rem; color: var(--color-muted); }
.review__note-form { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; margin-top: .75rem; }
.review__note-form .review__note-input { align-self: stretch; }

/* Verlauf on the confirmed receipt (#724): the notes section's
   details/summary idiom; below the 768 px breakpoint the summary swaps
   to the count variant — CSS only, no JS. */
.review__history { margin-top: 1rem; }
.review__history-list { display: flex; flex-direction: column; gap: .75rem; margin-top: .5rem; }
.review__history-entry {
    border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); padding: .5rem .75rem;
}
.review__history-line { margin: 0; font-size: .875rem; color: var(--color-text); overflow-wrap: break-word; }
.review__history-error { margin: .25rem 0 0; font-size: .75rem; color: var(--color-error); }
.review__history-truncated { margin: .25rem 0 0; font-size: .85rem; color: var(--color-muted); }
.review__history-summary-desktop { display: none; }
.review__history-summary-phone { display: inline; }
@media (min-width: 768px) {
    .review__history-summary-desktop { display: inline; }
    .review__history-summary-phone { display: none; }
}

.review__btn {
    display: flex; align-items: center; justify-content: center; box-sizing: border-box;
    min-height: var(--button-height); padding: 0 1.625rem; border: 1.5px solid var(--color-primary-fill); border-radius: var(--button-radius);
    font: inherit; font-size: .9rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.review__btn--first { background: var(--color-primary-fill); color: var(--color-on-primary); }
.review__btn--first:hover { background: var(--color-primary-fill-hover); border-color: var(--color-primary-fill-hover); }
.review__btn--second { background: transparent; color: var(--color-navy); border-color: var(--color-navy); }
.review__btn--second:hover { background: var(--color-secondary-hover); }
.review__link {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 .5rem;
    color: var(--color-primary-text); font-size: .875rem; font-weight: 600; text-decoration: underline;
}
.review__link:hover { color: color-mix(in srgb, var(--color-primary-text) 75%, var(--color-navy)); }
.review__link--plain { align-self: flex-start; padding: 0; border: 0; background: none; font-family: inherit; color: var(--color-text); cursor: pointer; }
.review__btn:focus-visible, .review__link:focus-visible, .review__menu-toggle:focus-visible, .review__menu-item:focus-visible,
.review__more-toggle:focus-visible, .review__note-toggle:focus-visible, .review__history-toggle:focus-visible {
    outline: 3px solid var(--color-navy); outline-offset: 2px;
}

/* Phone: the main action stays at the lower edge, above the bottom nav. */
.review__actions {
    position: sticky; bottom: var(--mobile-nav-height); z-index: 10;
    display: flex; flex-direction: column; margin: 12px -1rem 0; padding: 10px 1rem 4px;
    background: var(--color-surface); border-top: 1px solid var(--color-border);
}

@media (min-width: 768px) {
    .review__failed-actions { flex-direction: row; flex-wrap: wrap; }
    .review__title-row > h1 { font-size: 1.6rem; }
    .review__layout { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 1.75rem; align-items: start; }
    .review__layout--single { grid-template-columns: minmax(0, 1fr); }
    .review__preview { position: sticky; top: 1rem; }
    .review__preview .review__thumb { max-height: none; }
    .review__preview .review__thumb-img { max-height: 70vh; }
    .review__form {
        padding: 1.375rem 1.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px;
    }
    .review__actions {
        position: static; flex-direction: row; align-items: center; gap: 1.125rem; margin: 12px 0 0;
        padding: 16px 0 0; background: none; border-top: 1px solid var(--color-border);
    }
    .review__submit { width: auto; }
}

@media (min-width: 1024px) {
    .review__layout { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); }
    .review__entries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Receipt lightbox (#499): full-viewport modal dialog, image centered in a
   white frame; Esc and focus return come from the native dialog. */
.lightbox {
    border: none;
    padding: 0;
    background: none;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
}

.lightbox[open] { display: flex; }

.lightbox::backdrop {
    background: rgba(0, 0, 0, 0.55);
}

.lightbox__frame {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: auto;
    padding: 14px;
    background: var(--color-surface);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.24), 0 2px 8px rgba(0, 0, 0, 0.12);
    max-width: min(92vw, 960px);
}

.lightbox__img {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    height: auto;
    border-radius: 6px;
}

/* display set below would beat the UA's [hidden] rule otherwise */
.lightbox__img[hidden],
.lightbox__doc[hidden] { display: none; }

/* Embedded document preview (#665): the original PDF renders in the
   browser's own viewer — full document, scrollable, fitted to the frame. */
.lightbox__doc {
    display: block;
    width: min(86vw, 900px);
    height: 78vh;
    border: 0;
    border-radius: 6px;
    background: var(--color-surface);
}

.lightbox__fallback {
    max-width: 86vw;
    padding: 32px 24px;
    text-align: center;
}

.lightbox__fallback p {
    margin: 0;
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.5;
}

.lightbox__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24);
}

.lightbox__close:hover { background: #ffffff; }

.lightbox__download {
    font-size: 0.85rem;
    color: var(--color-muted);
}

/* Receipt deletion (#451) refusal banner: same one-shot banner block, warn
   tone — the base block has no styling of its own. */
.review-confirmation--warning .review-confirmation__text { color: #b45309; }
.review-confirmation__link { text-decoration: underline; white-space: nowrap; font-weight: 600; }

.txnew__header { margin-bottom: 10px; }
.txnew__title { font-size: 1.1rem; margin: 8px 0 14px; }

.txnew__wait {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #f9fafb;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
}
.txnew__wait-icon { color: var(--color-muted); flex-shrink: 0; margin-top: 2px; }
.txnew__wait-label { display: block; font-size: 0.85rem; font-weight: 600; }
.txnew__wait-text { display: block; font-size: 0.78rem; color: var(--color-muted); margin-top: 2px; }

.txnew__field { margin-bottom: 12px; }
.txnew__label { display: block; font-size: 0.8rem; color: var(--color-muted); margin-bottom: 4px; }
.txnew__input {
    width: 100%;
    min-height: 38px;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--color-text);
}
.txnew__submit { width: 100%; margin-top: 6px; }
.txnew__error { background: #fef2f2; color: #dc2626; border-radius: 6px; padding: 10px 14px; font-size: 0.85rem; margin-bottom: 12px; }

/* Match review (#78): grouped booking↔receipt proposals with confirm,
   reject and manual-pairing actions. */
.match-review__title { font-size: 1.1rem; margin: 8px 0 14px; }
.match-review__group { margin-bottom: 22px; }
.match-review__group-title { font-size: 0.95rem; margin: 0 0 8px; }
.match-review__none { color: var(--color-muted); font-size: 0.85rem; margin: 0 0 8px; }
.match-review__list { list-style: none; margin: 0 0 10px; padding: 0; }
.match-review__item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.match-review__item--proposal { display: block; }
.match-review__item-label { font-weight: 600; }
.match-review__item-amount { font-variant-numeric: tabular-nums; }
.match-review__item-date { color: var(--color-muted); font-size: 0.85rem; }
.match-review__method { margin-left: auto; }
.match-review__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.match-review__score { margin-left: auto; font-weight: 600; }
.match-review__criteria {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 10px;
    font-size: 0.82rem;
    color: var(--color-muted);
}
.match-review__criterion { display: flex; gap: 4px; margin: 0; }
.match-review__criterion dd { margin: 0; font-weight: 600; color: var(--color-text); }
.match-review__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 8px;
    margin-bottom: 8px;
}
.match-review__select-label {
    display: block;
    font-size: 0.8rem;
    color: var(--color-muted);
    margin-bottom: 2px;
    flex-basis: 100%;
}
.match-review__select {
    min-height: 38px;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--color-text);
    max-width: 100%;
}
.match-review__reason {
    min-height: 38px;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--color-text);
    flex: 1 1 160px;
}
.match-review__manual-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 8px;
}
.match-review__pair-label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex: 1;
    cursor: pointer;
}
.match-review__radio { accent-color: var(--color-primary); }

/* ============================================
   Monate overview (FE-3.1 #135)
   ============================================ */
.months { padding: 0 1rem; }
.months h1 { font-size: 1.3rem; margin: 1rem 0; }

.months__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.months__item {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    background: var(--color-surface); border: 1px solid var(--color-border, #e5e7eb); border-radius: 12px;
    padding: 0.85rem 1rem;
}
.months__row {
    display: flex; justify-content: space-between; align-items: center; gap: 0.75rem;
    flex: 1 1 18rem; min-width: 0; text-decoration: none; color: inherit;
}
.months__row:focus-visible { outline: 2px solid var(--color-primary, #2563eb); outline-offset: 2px; }
.months__name { font-weight: 600; white-space: nowrap; }
.months__meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.months__score { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.months__open  { font-size: 0.78rem; font-weight: 600; color: var(--color-primary-text); white-space: nowrap; text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }
.months__open:focus-visible { outline: 2px solid var(--color-primary, #2563eb); outline-offset: 2px; }
.months__badge { font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.months__badge--complete { background: #ecfdf5; color: #059669; }
.months__badge--partial  { background: #fffbeb; color: #b45309; }
.months__badge--open     { background: #fef2f2; color: #dc2626; }

/* Month lifecycle status badge — one badge family, the #678 wire value as the modifier,
   shared by the overview and the month page; only the released value carries a check mark */
.months__lifecycle-badge { font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.months__lifecycle-badge--in_progress            { background: color-mix(in srgb, var(--color-muted) 12%, white); color: var(--color-muted); }
.months__lifecycle-badge--ready_for_handover     { background: var(--color-mint); color: var(--color-primary-text); }
.months__lifecycle-badge--handed_over            { background: var(--color-info-bg); color: var(--color-info); }
.months__lifecycle-badge--under_review           { background: var(--color-info-bg); color: var(--color-info); }
.months__lifecycle-badge--clarification_required { background: var(--color-amber-bg); color: var(--color-navy); }
.months__lifecycle-badge--released_for_datev     { background: var(--color-success-bg); color: var(--color-success); }

/* Sustainability reporting-lifecycle status badge (#389) — same badge family
   as the months lifecycle badge; the lifecycle wire value is the modifier */
.sustainability__status-badge                     { font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.sustainability__status-badge--new                    { background: color-mix(in srgb, var(--color-muted) 12%, white); color: var(--color-muted); }
.sustainability__status-badge--data_collection        { background: var(--color-info-bg); color: var(--color-info); }
.sustainability__status-badge--clarification_required { background: var(--color-amber-bg); color: var(--color-navy); }
.sustainability__status-badge--review                 { background: var(--color-info-bg); color: var(--color-info); }
.sustainability__status-badge--approved               { background: var(--color-success-bg); color: var(--color-success); }
.sustainability__status-badge--report_created         { background: var(--color-mint); color: var(--color-primary-text); }

/* Project list row (#389) — the months__row tap-target convention:
   one dense flex line per project, the name and period truncate first */
.sustainability__projects { display: flex; flex-direction: column; gap: 0.5rem; }
.sustainability__project-row {
    display: flex; align-items: center; gap: 0.5rem;
    min-height: 44px; min-width: 0; text-decoration: none; color: inherit;
}
.sustainability__project-row:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.sustainability__project-name   { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sustainability__project-year   { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sustainability__project-period { font-size: 0.78rem; color: var(--color-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Project form (#389) — the components.html demo's column form; --color-muted
   replaces the demo's --muted, which app.css never defines */
.sustainability__form { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.sustainability__field { display: flex; flex-direction: column; gap: 4px; }
.sustainability__field label { font-size: .85rem; font-weight: 600; color: var(--color-text); }
.sustainability__field input,
.sustainability__field select { min-height: 48px; padding: .5rem .75rem; border: 1px solid var(--color-border); border-radius: var(--button-radius); background: var(--color-surface); color: var(--color-text); font: inherit; }
.sustainability__period-hint { font-size: .78rem; color: var(--color-muted); margin: 0; }
.sustainability__submit { width: 100%; }

/* Project stepper (#389) — one plain horizontal label row: no done/active
   states exist yet, every step renders alike, connectors join neighbours and
   the row wraps instead of overflowing narrow phones */
.s-stepper            { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; row-gap: 0.25rem; margin-bottom: 1rem; }
.s-stepper__step      { display: flex; align-items: center; gap: 0.375rem; min-width: 0; }
.s-stepper__dot       { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); flex: none; }
.s-stepper__label     { font-size: 0.78rem; color: var(--color-muted); white-space: nowrap; }
.s-stepper__connector { flex: 1; height: 1px; background: var(--color-border); min-width: 0.75rem; }

/* Project header meta (#389) — the period/standard line beside the title,
   small muted text like the list row's period */
.sustainability__project-meta { font-size: 0.78rem; color: var(--color-muted); }

/* Coverage dashboard (#407) — card grid like the statement import cards,
   sections table spans the full row so all VSME sections read at a glance */
.sustainability__dashboard            { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.sustainability__card                 { min-width: 0; padding: 0.75rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--card-radius); }
.sustainability__card--sections       { grid-column: 1 / -1; }
.sustainability__card-title           { font-size: 0.8rem; font-weight: 600; color: var(--color-muted); margin: 0 0 0.5rem; }
.sustainability__coverage             { display: flex; align-items: baseline; gap: 0.2rem; margin: 0; }
.sustainability__coverage-percent     { font-size: 1.75rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--color-navy); }
.sustainability__coverage-unit        { font-weight: 700; color: var(--color-navy); }
.sustainability__coverage-caption     { margin-left: 0.35rem; font-size: 0.78rem; color: var(--color-muted); }
.sustainability__coverage-bar         { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--color-muted) 15%, white); margin-top: 0.5rem; overflow: hidden; }
.sustainability__coverage-bar-fill    { height: 100%; border-radius: 99px; background: var(--color-primary-fill); }
.sustainability__origin,
.sustainability__quality              { margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.sustainability__origin-row,
.sustainability__quality-row          { display: flex; justify-content: space-between; gap: 0.5rem; }
.sustainability__origin-label,
.sustainability__quality-label        { font-size: 0.82rem; color: var(--color-text); min-width: 0; }
.sustainability__origin-count,
.sustainability__quality-count        { font-weight: 700; font-variant-numeric: tabular-nums; margin: 0; white-space: nowrap; }
.sustainability__evidence-link        { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.5rem; font-size: 0.82rem; color: var(--color-primary-text); }
.sustainability__sections-table       { width: 100%; border-collapse: collapse; }
.sustainability__sections-table th,
.sustainability__sections-table td    { padding: 0.25rem; font-size: 0.82rem; border-top: 1px solid var(--color-border); }
.sustainability__sections-table tr:first-child th,
.sustainability__sections-table tr:first-child td { border-top: none; }
.sustainability__section-code         { text-align: left; font-weight: 700; width: 2.5rem; }
.sustainability__section-percent      { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sustainability__section-percent-value { font-weight: 700; }
.sustainability__section-percent-unit { color: var(--color-muted); }
.sustainability__section-cell         { text-align: right; }
.sustainability__section-status       { font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.sustainability__section-status--complete { background: var(--color-success-bg); color: var(--color-success); }
.sustainability__section-status--partial  { background: var(--color-amber-bg); color: var(--color-navy); }
.sustainability__section-status--open     { background: color-mix(in srgb, var(--color-muted) 12%, var(--color-surface)); color: var(--color-muted); }
/* Section point list (#1047): the dashboard section row's code link opens
   the section's page; every point renders with its indicator state. */
.sustainability__section-link             { display: block; padding: 4px 6px; margin: -4px -6px; color: inherit; text-decoration: none; border-radius: 4px; }
.sustainability__section-link:hover       { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.sustainability__section-counts           { max-width: 30rem; }
.sustainability__section-total            { margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--color-muted); }
.sustainability__section-total .sustainability__section-percent-value { color: var(--color-navy); }
.sustainability__section-points           { margin: 1rem 0; padding: 0; list-style: none; }
.sustainability__section-point-row        { border-top: 1px solid var(--color-border); font-size: 0.85rem; }
.sustainability__section-point-row:first-child { border-top: none; }
.sustainability__section-point-link       { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; padding: 0.45rem 0.25rem; color: inherit; text-decoration: none; }
.sustainability__section-point-link:hover { background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.sustainability__section-point-body       { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; padding: 0.45rem 0.25rem; }
.sustainability__section-point-code       { font-size: 0.72rem; color: var(--color-muted); overflow-wrap: anywhere; }
.sustainability__section-point-label      { flex: 1; min-width: 12rem; }
.sustainability__section-point-status     { font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.sustainability__section-point-reason     { color: var(--color-muted); font-size: 0.78rem; }
@media (max-width: 480px) {
.sustainability__section-link             { display: flex; align-items: center; min-height: 44px; }
.sustainability__section-point-link       { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.sustainability__section-point-label      { min-width: 0; }
}

/* Gaps list (#417) — the points without a usable value, full width like
   the sections table so long labels keep their row */
.sustainability__card--gaps           { grid-column: 1 / -1; }
.sustainability__gaps-list            { margin: 0; padding: 0; list-style: none; }
.sustainability__gap-row              { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.3rem 0; border-top: 1px solid var(--color-border); font-size: 0.82rem; }
.sustainability__gap-row:first-child  { border-top: none; }
.sustainability__gap-section          { font-weight: 700; white-space: nowrap; }
.sustainability__gap-label            { flex: 1; min-width: 0; }
.sustainability__gap-reason           { color: var(--color-muted); text-align: right; }

/* Review cockpit (#403) — the adviser's working list of open and uncertain
   points; amber marks the review-flagged rows, red the missing ones. */
.sustainability__review-counts         { display: flex; align-items: baseline; gap: 0.4rem; margin: 0 0 0.75rem; font-size: 0.85rem; }
.sustainability__review-count          { font-weight: 700; }
.sustainability__review-count--open    { color: var(--color-danger); }
.sustainability__review-count--review  { color: var(--color-warning-text); }
.sustainability__review-count-label    { color: var(--color-muted); margin-right: 0.6rem; }
.sustainability__review-filters        { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: end; margin-bottom: 1rem; }
.sustainability__review-filter         { display: flex; flex-direction: column; gap: 0.2rem; }
.sustainability__review-filter select    { min-height: 48px; }
.sustainability__review-filter-label   { font-size: 0.72rem; font-weight: 600; color: var(--color-muted); }
.sustainability__review-list           { margin: 0; padding: 0; list-style: none; }
.sustainability__review-row            { border-top: 1px solid var(--color-border); font-size: 0.85rem; }
.sustainability__review-row:first-child { border-top: none; }
.sustainability__review-link           { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; padding: 0.45rem 0.25rem; color: inherit; text-decoration: none; }
.sustainability__review-link:hover     { background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.sustainability__review-row--document  { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; padding: 0.45rem 0.25rem; }
.sustainability__review-section        { font-weight: 700; white-space: nowrap; }
.sustainability__review-code           { font-size: 0.72rem; color: var(--color-muted); overflow-wrap: anywhere; }
.sustainability__review-dimension      { font-size: 0.72rem; color: var(--color-muted); overflow-wrap: anywhere; }
.sustainability__review-label          { flex: 1; min-width: 12rem; }
.sustainability__review-value          { white-space: nowrap; }
.sustainability__review-status         { font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
/* Quality indicator (#402): one modifier family names the state colour on
   every surface — the data-point chip and the review cockpit rows derive
   the same class from the same state, so the colours agree across the
   report. */
.sustainability__indicator                        { font-size: 0.68rem; font-weight: 600; }
.sustainability__indicator > summary              { list-style: none; cursor: pointer; padding: 2px 8px; border-radius: 99px; }
.sustainability__indicator > summary::-webkit-details-marker { display: none; }
.sustainability__indicator--complete       { background: var(--color-success-bg); color: var(--color-success); }
.sustainability__indicator--review         { background: var(--color-amber-bg); color: var(--color-warning-text); }
.sustainability__indicator--missing        { background: var(--color-danger-bg); color: var(--color-danger); }
.sustainability__indicator--not_applicable { background: color-mix(in srgb, var(--color-muted) 12%, var(--color-surface)); color: var(--color-muted); }
.sustainability__indicator-reason          { margin: 0.35rem 0 0; font-size: 0.78rem; font-weight: 400; white-space: normal; }
.sustainability__review-reason         { color: var(--color-muted); }
.sustainability__review-method         { font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--color-info) 12%, var(--color-surface)); color: var(--color-info); white-space: nowrap; }
.sustainability__review-empty          { color: var(--color-muted); }
@media (max-width: 480px) {
.sustainability__review-link           { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.sustainability__review-label          { min-width: 0; }
.sustainability__review-filters        { flex-direction: column; align-items: stretch; }
}

/* GDPdU export section (#1046): the upload form, the self-polling run
   fragment and the per-file list. Rows wrap instead of shrinking below the
   phone breakpoint — no max-width queries. */
.sustainability__export                { margin: 1rem 0; }
.sustainability__export-form           { display: flex; flex-direction: column; gap: 12px; max-width: 420px; margin-bottom: 0.75rem; }
.sustainability__export-label          { font-size: 0.85rem; font-weight: 600; color: var(--color-text); }
.sustainability__export-empty          { color: var(--color-muted); font-size: 0.85rem; }
.sustainability__run                   { font-size: 0.85rem; }
.sustainability__run-state             { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 0.5rem; }
.sustainability__run-state-label       { font-weight: 600; }
.sustainability__run-counts            { color: var(--color-muted); }
.sustainability__run-failure           { color: var(--color-danger); }
.sustainability__export-list           { list-style: none; margin: 0; padding: 0; }
.sustainability__export-row            { display: flex; align-items: baseline; gap: 0.5rem; row-gap: 0.15rem; flex-wrap: wrap; padding: 0.3rem 0; border-top: 1px solid var(--color-border); font-size: 0.82rem; min-width: 0; }
.sustainability__export-row:first-child { border-top: none; }
.sustainability__export-kind           { font-size: 0.68rem; color: var(--color-muted); white-space: nowrap; }
.sustainability__export-label          { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.sustainability__export-reason         { color: var(--color-muted); }
.sustainability__export-topic          { font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--color-info) 12%, var(--color-surface)); color: var(--color-info); white-space: nowrap; }
.sustainability__export-confidence     { font-variant-numeric: tabular-nums; color: var(--color-muted); }
.sustainability__export-period         { font-variant-numeric: tabular-nums; color: var(--color-muted); }
.sustainability__export-verdict        { font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--color-amber-bg); color: var(--color-warning-text); white-space: nowrap; }
.sustainability__export-totals         { color: var(--color-muted); }
.sustainability__export-duplicate      { color: var(--color-muted); }
.sustainability__export-duplicate-link { color: var(--color-info); overflow-wrap: anywhere; }

/* Documents section: the upload form and the self-polling document list. */
.sustainability__documents           { margin: 1rem 0; }
.sustainability__docs-title          { font-size: 1rem; font-weight: 700; color: var(--color-navy); margin: 0 0 0.5rem; }
.sustainability__docs-list           { list-style: none; margin: 0; padding: 0; }
.sustainability__doc-row             { display: flex; align-items: baseline; gap: 0.5rem; row-gap: 0.15rem; flex-wrap: wrap; padding: 0.3rem 0; border-top: 1px solid var(--color-border); font-size: 0.82rem; min-width: 0; }
.sustainability__doc-row:first-child { border-top: none; }
.sustainability__doc-name            { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.sustainability__doc-status          { color: var(--color-muted); overflow-wrap: anywhere; }
.sustainability__docs-empty          { color: var(--color-muted); font-size: 0.85rem; }
.sustainability__upload-form         { display: flex; flex-direction: column; gap: 12px; max-width: 420px; margin-top: 0.75rem; }
.sustainability__upload-label        { font-size: 0.85rem; font-weight: 600; color: var(--color-text); }
.sustainability__upload-error        { color: var(--color-danger); font-size: 0.82rem; margin: 0; overflow-wrap: anywhere; }
.sustainability__upload-submit       { width: 100%; }

/* Data-point view (#401): effective value with the retained original next
   to the correction, the override popover and the chain history. */
.sustainability__datapoint-header { margin-bottom: 1rem; }
.sustainability__datapoint-section { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 0.25rem; }
.sustainability__datapoint-title { font-size: 1.25rem; font-weight: 700; color: var(--color-navy); margin: 0; }
.sustainability__value-card { position: relative; }
.sustainability__value-effective { font-size: 2rem; font-weight: 700; color: var(--color-navy); font-variant-numeric: tabular-nums; margin: 0.5rem 0 0.25rem; }
.sustainability__value-method { display: inline-block; font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--color-muted) 12%, var(--color-surface)); color: var(--color-muted); margin-bottom: 0.75rem; }
.sustainability__override-badge { display: inline-block; background: var(--color-amber-bg); color: var(--color-navy); border: 1px solid var(--color-amber); font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; }
.sustainability__value-original { color: var(--color-muted); font-size: 0.875rem; font-variant-numeric: tabular-nums; margin: 0 0 1rem; text-decoration: line-through; }
.sustainability__value-original-label { font-weight: 600; }
.sustainability__override-open { margin-top: 0.25rem; }
.sustainability__override-field { margin-bottom: 0.875rem; }
.sustainability__override-field label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--color-navy); margin-bottom: 0.25rem; }
.sustainability__override-field input { width: 100%; box-sizing: border-box; padding: 0.5rem 0.625rem; border: 1px solid color-mix(in srgb, var(--color-muted) 35%, var(--color-surface)); border-radius: 8px; font: inherit; }
.sustainability__history-list { list-style: none; margin: 0; padding: 0; }
.sustainability__history-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; padding: 0.625rem 0; border-bottom: 1px solid color-mix(in srgb, var(--color-muted) 15%, var(--color-surface)); }
.sustainability__history-row:last-child { border-bottom: none; }
.sustainability__history-value { font-weight: 700; color: var(--color-navy); font-variant-numeric: tabular-nums; }
.sustainability__history-method { font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--color-muted) 12%, var(--color-surface)); color: var(--color-muted); }
.sustainability__history-meta { font-size: 0.75rem; color: var(--color-muted); }
.sustainability__history-reason { flex-basis: 100%; font-size: 0.8125rem; color: var(--color-navy); }
.sustainability__datapoint-missing { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--card-radius); }
.sustainability__missing-reason    { margin: 0; font-size: 0.82rem; color: var(--color-muted); }
.sustainability__sources-list { list-style: none; margin: 0; padding: 0; }
.sustainability__source-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; padding: 0.625rem 0; border-bottom: 1px solid color-mix(in srgb, var(--color-muted) 15%, var(--color-surface)); }
.sustainability__source-row:last-child { border-bottom: none; }
.sustainability__source-month { font-weight: 700; color: var(--color-navy); font-variant-numeric: tabular-nums; }
.sustainability__source-value { color: var(--color-navy); font-variant-numeric: tabular-nums; }
.sustainability__source-method { font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--color-muted) 12%, var(--color-surface)); color: var(--color-muted); }
.sustainability__source-role { font-size: 0.8125rem; font-weight: 600; color: var(--color-navy); }
.sustainability__source-locator { font-size: 0.75rem; color: var(--color-muted); word-break: break-all; }
.sustainability__source-doc { font-size: 0.8125rem; color: var(--color-primary); }
.sustainability__sources-toggle { cursor: pointer; color: var(--color-primary); }
.sustainability__sources-toggle::after { content: ' \25be'; }
.sustainability__sources-disclosure[open] .sustainability__sources-toggle::after { content: ' \25b4'; }

/* ── Payroll permission (#928): gated rows + the client's grant section ── */
.sustainability__payroll-source { margin: 0 0 0.75rem; font-weight: 700; color: var(--color-navy); font-variant-numeric: tabular-nums; }
.sustainability__payroll-not-released { margin: 0; font-size: 0.875rem; color: var(--color-muted); }
.sustainability__payroll-open summary { cursor: pointer; color: var(--color-primary); }
.sustainability__payroll-open summary::after { content: ' \25be'; }
.sustainability__payroll-open[open] summary::after { content: ' \25b4'; }
.sustainability__payroll-scroll { overflow-x: auto; }
.sustainability__payroll-table { width: 100%; border-collapse: collapse; margin-top: 0.75rem; }
.sustainability__payroll-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); padding: 0.375rem 0.5rem; border-bottom: 2px solid var(--color-border); }
.sustainability__payroll-table td { padding: 0.375rem 0.5rem; font-size: 0.8125rem; color: var(--color-navy); border-bottom: 1px solid color-mix(in srgb, var(--color-muted) 15%, var(--color-surface)); font-variant-numeric: tabular-nums; }
.sustainability__payroll-permission { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.sustainability__payroll-permission-hint { margin: 0; font-size: 0.875rem; color: var(--color-muted); }
.sustainability__payroll-users { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sustainability__payroll-user { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.625rem 0; border-bottom: 1px solid color-mix(in srgb, var(--color-muted) 15%, var(--color-surface)); }
.sustainability__payroll-user:last-child { border-bottom: none; }
.sustainability__payroll-email { font-weight: 600; color: var(--color-navy); overflow-wrap: anywhere; }
.sustainability__payroll-state { font-size: 0.68rem; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--color-muted) 12%, var(--color-surface)); color: var(--color-muted); }
.sustainability__payroll-state--on { background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)); color: var(--color-primary); }
.sustainability__payroll-form { margin-left: auto; }
.sustainability__payroll-log { margin-top: 0.5rem; }
.sustainability__payroll-log-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.sustainability__payroll-log-entry { font-size: 0.8125rem; color: var(--color-muted); overflow-wrap: anywhere; }

.month__header-meta { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }

@media (min-width: 768px) {
    .months { max-width: 40rem; margin: 0 auto; }
}

/* ── Monthly detail (FE-3.2 #136) ────────────────────────────────── */
.month { display: flex; flex-direction: column; gap: 16px; padding: 16px; max-width: 720px; margin: 0 auto; }
.month__title { font-size: 1.25rem; margin: 0; }
.month__filters { display: flex; gap: 8px; flex-wrap: wrap; }
.month__empty { color: var(--color-muted); }
.month__section {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
}
.month__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    min-height: 56px;
    box-sizing: border-box;
    cursor: pointer;
    font-weight: 600;
}
.month__count { color: var(--color-muted); font-weight: 400; }
.month__list { list-style: none; margin: 0; padding: 0 8px 8px; }
.month__row { display: flex; align-items: stretch; border-top: 1px solid var(--color-border); }
.month__row[hidden] { display: none; }
.month__row-inner {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 12px;
    min-height: 56px;
    box-sizing: border-box;
    color: inherit;
}
.month__row-inner--link { text-decoration: none; }
.month__row-inner--link:hover { background: var(--color-row-hover, rgba(0,0,0,.04)); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .month__row-inner--link:hover { background: var(--color-row-hover, rgba(255,255,255,.06)); }
}
:root[data-theme="dark"] .month__row-inner--link:hover { background: var(--color-row-hover, rgba(255,255,255,.06)); }
.month__row-main { display: flex; flex-direction: column; min-width: 0; }
.month__row-counterparty { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.month__row-date { font-size: 0.8rem; color: var(--color-muted); }
.month__row-side { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.month__row-amount { font-variant-numeric: tabular-nums; }
.month__status-icon { flex-shrink: 0; }
.month__action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    flex-shrink: 0;
    color: var(--color-muted);
}
.month__action:hover { color: var(--color-text); }

/* --- Marketing homepage (GET /marketing) --- */

.hp {
    font-family: var(--font-family);
    color: var(--color-navy);
    background: #fff;
    overflow-x: hidden;
}

/* Header */
.hp__header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid #eceff3;
}

.hp__header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 24px;
}

.hp__logo {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-decoration: none;
    flex-shrink: 0;
}

.hp__nav {
    display: flex;
    gap: 22px;
    flex: 1;
    flex-wrap: wrap;
}
.hp__nav a {
    font-size: 0.9rem;
    font-weight: 600;
    color: #3b4a5a;
    text-decoration: none;
}
.hp__nav a:hover { color: var(--color-primary-text); }

.hp__header-ctas {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}
.hp__login-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary-text);
    text-decoration: none;
}
.hp__cta-btn {
    padding: 10px 18px;
    min-height: 40px;
    font-size: 0.88rem;
    border-radius: 7px;
    white-space: nowrap;
}

.hp__hamburger {
    display: none;
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: var(--color-navy);
    min-height: 44px;
    min-width: 44px;
    align-items: center;
    justify-content: center;
}

.hp__mobile-menu[hidden] { display: none; }
.hp__mobile-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 20px 18px;
    border-top: 1px solid #eceff3;
}
.hp__mobile-menu a {
    font-size: 0.95rem;
    font-weight: 600;
    color: #3b4a5a;
    text-decoration: none;
    padding: 10px 4px;
    min-height: 44px;
    display: flex;
    align-items: center;
}
.hp__mobile-login { color: var(--color-primary-text) !important; }
.hp__mobile-cta {
    margin-top: 6px;
    padding: 12px;
    min-height: 46px;
    border-radius: 7px;
    font-size: 0.92rem;
    justify-content: center;
}

@media (max-width: 860px) {
    .hp__nav,
    .hp__header-ctas { display: none; }
    .hp__hamburger { display: flex; }
}

/* Hero */
.hp__hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #F4F8F7, #EAF2F1);
    padding: 72px 24px 80px;
    text-align: center;
}
.hp__hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
}
.hp__hero-blob--1 {
    width: 360px; height: 360px;
    background: var(--color-primary-on-dark);
    opacity: 0.25;
    top: -100px; left: -80px;
    animation: hpBlob1 16s ease-in-out infinite;
}
.hp__hero-blob--2 {
    width: 300px; height: 300px;
    background: var(--color-amber);
    opacity: 0.16;
    bottom: -100px; right: -60px;
    animation: hpBlob2 19s ease-in-out infinite;
}
@keyframes hpBlob1 {
    0%, 100% { transform: translate(0,0) scale(1); }
    50% { transform: translate(20px,-16px) scale(1.06); }
}
@keyframes hpBlob2 {
    0%, 100% { transform: translate(0,0) scale(1); }
    50% { transform: translate(-18px,18px) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
    .hp__hero-blob { animation: none; }
}

.hp__hero-inner {
    position: relative;
    z-index: 1;
    max-width: 680px;
    margin: 0 auto;
}
.hp__hero-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary-text);
    margin-bottom: 14px;
}
.hp__hero-title {
    font-size: clamp(1.9rem, 4.4vw, 3rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.01em;
    margin-bottom: 18px;
    text-wrap: balance;
}
.hp__hero-sub {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #4b5c68;
    margin-bottom: 30px;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}
.hp__hero-ctas {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.hp__cta-btn-lg {
    padding: 14px 26px;
    min-height: var(--button-height);
    font-size: 1rem;
    border-radius: var(--button-radius);
}
.hp__hero-secondary {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-navy);
    text-decoration: none;
}
.hp__hero-secondary:hover { color: var(--color-primary-text); }

/* Sections */
.hp__section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 72px 24px;
}
.hp__section--alt {
    max-width: none;
    background: #f7f9fb;
    padding: 72px 24px;
    margin: 0;
}
.hp__section-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.hp__section-title {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
.hp__section-sub {
    font-size: 1rem;
    color: #5b6b76;
    text-align: center;
    margin-bottom: 42px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* Features */
.hp__feature-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}
.hp__feature-card {
    flex: 1 1 260px;
    max-width: calc(33.333% - 14px);
    background: #fff;
    border: 1px solid #eceff3;
    border-radius: 14px;
    padding: 24px;
}
.hp__feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    color: var(--color-primary-text);
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.hp__feature-title {
    font-size: 1.02rem;
    font-weight: 700;
    margin-bottom: 6px;
}
.hp__feature-desc {
    font-size: 0.88rem;
    color: #5b6b76;
    line-height: 1.5;
}

/* Pricing */
.hp__pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
    max-width: 1000px;
    margin: 0 auto;
    align-items: start;
}
.hp__plan-card {
    position: relative;
    background: #fff;
    border: 1px solid #eceff3;
    border-radius: 16px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
}
.hp__plan-card--highlight {
    border-color: var(--color-primary);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--color-primary) 16%, transparent);
    transform: translateY(-6px);
}
.hp__plan-badge {
    position: absolute;
    top: -12px;
    left: 24px;
    background: var(--color-primary-fill);
    color: var(--color-on-primary);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 99px;
}
.hp__plan-name {
    font-size: 1rem;
    font-weight: 700;
    color: #5b6b76;
    margin-bottom: 8px;
}
.hp__plan-price {
    font-size: 2.1rem;
    font-weight: 800;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}
.hp__plan-period {
    font-size: 0.9rem;
    font-weight: 500;
    color: #9aa5b1;
}
.hp__plan-desc {
    font-size: 0.85rem;
    color: #5b6b76;
    margin-bottom: 18px;
    line-height: 1.5;
}
.hp__plan-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
    flex: 1;
}
.hp__plan-features li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 0.86rem;
    color: #3b4a5a;
}
.hp__plan-features li::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230D9488' stroke-width='2.5'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat center;
    flex-shrink: 0;
    margin-top: 1px;
}
.hp__plan-btn {
    padding: 12px;
    min-height: 46px;
    border-radius: 8px;
    font-size: 0.92rem;
    justify-content: center;
    text-decoration: none;
    display: flex;
    align-items: center;
}
.hp__plan-btn--outline {
    border: 1px solid var(--color-primary);
    background: #fff;
    color: var(--color-primary-text);
    font-weight: 700;
}
.hp__plan-btn--outline:hover {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}
.hp__plan-annual {
    font-size: 0.82rem;
    color: #6b7280;
    margin-top: -4px;
    margin-bottom: 8px;
}
.hp__plan-tagline {
    font-size: 0.88rem;
    color: var(--color-navy);
    font-style: italic;
    margin-bottom: 12px;
    line-height: 1.4;
}

/* Pricing comparison table */
.hp__comparison-wrap {
    margin-top: 40px;
}
.hp__comparison-toggle {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}
.hp__comparison-toggle > summary {
    padding: 14px 20px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-navy);
    background: #f8fafc;
    list-style: none;
    user-select: none;
}
.hp__comparison-toggle > summary::-webkit-details-marker { display: none; }
.hp__comparison-toggle > summary::after {
    content: ' ▾';
    font-size: 0.8rem;
    color: var(--color-primary-text);
}
.hp__comparison-toggle[open] > summary::after { content: ' ▴'; }
.hp__comparison-scroll {
    overflow-x: auto;
}
.hp__comparison {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.hp__comparison th,
.hp__comparison td {
    padding: 9px 16px;
    text-align: center;
    border-bottom: 1px solid #f0f4f8;
}
.hp__comparison th:first-child,
.hp__comparison td:first-child {
    text-align: left;
    color: #374151;
    font-weight: 500;
}
.hp__comparison thead th {
    font-weight: 700;
    font-size: 0.9rem;
    background: #f8fafc;
    color: var(--color-navy);
    position: sticky;
    top: 0;
}
.hp__compare-group td {
    background: #f0fdf4;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary-text);
    padding-top: 12px;
}
.hp__col-highlight {
    background: color-mix(in srgb, var(--color-primary) 5%, transparent);
    font-weight: 600;
    color: var(--color-primary-text);
}
.hp__comparison thead .hp__col-highlight {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary-text);
}
.hp__comparison-note {
    font-size: 0.78rem;
    color: #9ca3af;
    padding: 10px 16px;
}

/* Testimonials */
.hp__testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}
.hp__testimonial-card {
    background: #fff;
    border: 1px solid #eceff3;
    border-radius: 14px;
    padding: 24px;
}
.hp__testimonial-quote {
    font-size: 0.92rem;
    line-height: 1.6;
    color: #3b4a5a;
    margin-bottom: 16px;
}
.hp__testimonial-author {
    font-size: 0.88rem;
    font-weight: 700;
}
.hp__testimonial-role {
    font-size: 0.78rem;
    color: #9aa5b1;
    margin-top: 2px;
}

/* Trust / Sicherheit */
.hp__trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    max-width: 1000px;
    margin: 0 auto;
}
.hp__trust-card {
    background: #fff;
    border: 1px solid #eceff3;
    border-radius: 12px;
    padding: 20px;
}
.hp__trust-label {
    font-size: 0.92rem;
    font-weight: 700;
    margin-bottom: 6px;
}
.hp__trust-desc {
    font-size: 0.83rem;
    color: #5b6b76;
    line-height: 1.5;
}

/* FAQ */
.hp__faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 720px;
    margin: 0 auto;
}
.hp__faq-item {
    border: 1px solid #eceff3;
    border-radius: 10px;
    overflow: hidden;
}
.hp__faq-header { background: #fff; }
.hp__faq-header--open { background: #f7f9fb; }
.hp__faq-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: transparent;
    border: none;
    text-align: left;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: inherit;
    color: var(--color-navy);
    cursor: pointer;
    min-height: 44px;
}
.hp__faq-icon {
    font-size: 1.3rem;
    color: var(--color-primary-text);
    flex-shrink: 0;
    transition: transform 0.15s;
}
.hp__faq-answer {
    padding: 0 18px 18px;
    font-size: 0.88rem;
    color: #5b6b76;
    line-height: 1.6;
}

/* Footer */
.hp__footer {
    background: var(--color-navy);
    color: #c6d5dd;
    padding: 40px 24px;
}
.hp__footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}
.hp__footer-logo {
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
}
.hp__footer-links {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
}
.hp__footer-links a {
    font-size: 0.82rem;
    color: #c6d5dd;
    text-decoration: none;
}
.hp__footer-links a:hover { color: #fff; }
.hp__footer-copy {
    font-size: 0.75rem;
    color: #8ba0ab;
}

/* ── Confirm dialogs: fl-dialog (info + danger variants) ───────────── */
/* Used wherever a browser confirm() was replaced with a native <dialog>
   to match the app's visual language. Two variants:
     .fl-dialog--info   — non-destructive action (petrol accent)
     .fl-dialog--danger — destructive action     (red accent)      */

.fl-dialog {
    border: none;
    border-radius: 14px;
    padding: 1.75rem 1.5rem 1.5rem;
    max-width: 360px;
    width: calc(100% - 2rem);
    box-shadow: 0 12px 40px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.08);
    background: var(--color-surface);
    color: var(--color-text);
    margin: auto;
}

.fl-dialog::backdrop {
    background: rgba(0,0,0,0.42);
    backdrop-filter: blur(2px);
}

.fl-dialog__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-bottom: 1rem;
}

.fl-dialog__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--color-text);
    line-height: 1.3;
}

.fl-dialog__body {
    font-size: 0.875rem;
    color: var(--color-muted);
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

.fl-dialog__error {
    font-size: 0.8125rem;
    color: var(--color-danger);
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger-border);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    margin: -0.75rem 0 1.25rem;
    line-height: 1.5;
}

.fl-dialog__actions {
    display: flex;
    gap: 0.625rem;
    justify-content: flex-end;
}

.fl-dialog__actions .btn {
    min-width: 96px;
}

/* A text-link action (Abbrechen) beside a first-level button: the link keeps
   its 44 px tap height and sits on the button's centre line. */
.fl-dialog__actions .review__link--plain {
    align-self: center;
}

/* Sheet variant — wide window in the centre on tablets and up, sheet rising
   from the bottom with space to the lower edge on phones. */
.fl-dialog--sheet {
    max-width: 480px;
    padding: 0.75rem 1rem 0.75rem;
    border-radius: 18px;
    margin: auto auto max(0.75rem, env(safe-area-inset-bottom));
    max-height: calc(100% - 1.5rem);
    overflow-y: auto;
}
@keyframes fl-sheet-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
.fl-dialog--sheet[open] { animation: fl-sheet-in 0.25s ease; }
@media (prefers-reduced-motion: reduce) {
    .fl-dialog--sheet[open] { animation: none; }
}
@media (min-width: 768px) {
    .fl-dialog--sheet { width: 100%; padding: 1.375rem 1.375rem 0.75rem; border-radius: 14px; margin: auto; }
    .fl-dialog--sheet[open] { animation: none; }
}

/* Info variant — petrol accent (ℹ icon) */
.fl-dialog--info .fl-dialog__icon {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary-text);
}

/* Danger variant — red accent (⚠ icon) */
.fl-dialog--danger .fl-dialog__icon {
    background: rgba(198,40,40,0.1);
    color: var(--color-error);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .fl-dialog {
        box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
    }
    :root:not([data-theme="light"]) .fl-dialog--info .fl-dialog__icon {
        background: color-mix(in srgb, var(--color-primary) 18%, transparent);
    }
    :root:not([data-theme="light"]) .fl-dialog--danger .fl-dialog__icon {
        background: rgba(198,40,40,0.18);
    }
}
:root[data-theme="dark"] .fl-dialog {
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
}
:root[data-theme="dark"] .fl-dialog--info .fl-dialog__icon {
    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
}
:root[data-theme="dark"] .fl-dialog--danger .fl-dialog__icon {
    background: rgba(198,40,40,0.18);
}

/* ── Brand logos (FE-5.x #349) ─────────────────────────────────────────────── */
/* White pill ensures logos are legible in both light and dark themes.          */
.connect__logo--brand {
    display: block;
    background: #fff;
    border-radius: 6px;
    padding: 4px 6px;
    max-width: 72px;
    max-height: 28px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* source-logo wraps the brand <img> or placeholder <svg> in the Datenquellen  */
/* table row. Aligns vertically with the provider name.                         */
.source-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-bottom: 0.25rem;
}

/* Make the name cell flex so logo and text sit side by side.                   */
.source-row__name {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

/* ── Adviser review & approve screen (#254) ─────────────────────── */
.adviser { display: flex; flex-direction: column; gap: 16px; }
.adviser__client-ref { font-size: 0.85rem; color: var(--color-muted); margin: -8px 0 0; }
.adviser__clients, .adviser .month__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.adviser__clients .month__row { display: flex; align-items: center; justify-content: space-between; }
.adviser__client-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.adviser__client-header .month__title { margin: 0; overflow-wrap: anywhere; }
.adviser__gear { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); color: var(--color-primary-text); flex-shrink: 0; }
.adviser__month-badge { font-size: 0.75rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.adviser__month-badge--critical { background: color-mix(in srgb, var(--color-error) 12%, var(--color-surface)); color: var(--color-error); border: 1px solid color-mix(in srgb, var(--color-error) 40%, transparent); }
.adviser__month-badge--done { background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface)); color: var(--color-success); border: 1px solid color-mix(in srgb, var(--color-success) 40%, transparent); }
.adviser__client-blocked { font-weight: 600; }
.adviser__handover { border-radius: 8px; padding: 10px 12px; font-size: 0.9rem; margin: 0; }
.adviser__handover--pending { background: #fffbeb; color: var(--color-warning-text); }
.adviser__handover--done { background: #ecfdf5; color: #065f46; }
.month__handover { margin-top: -8px; }
.month__handover-blocked { margin: 0 0 8px; display: flex; flex-direction: column; gap: 8px; }
.month__handover-blocked-title { margin: 0; font-weight: 600; }
.month__handover-hint { margin: 6px 0 0; font-size: 0.8rem; color: var(--color-muted); text-align: center; }
.month__handover-section-label { margin: 12px 0 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-muted); }
.month__handover-blocked-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.month__handover-advisory-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.month__handover-case-list li { display: flex; gap: 10px; flex-wrap: wrap; border-left: 3px solid var(--color-error); padding-left: 8px; }
.month__handover-advisory-list li { border-left-color: var(--color-amber); }
.month__handover-case-list li > a { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; min-height: 44px; color: inherit; text-decoration: none; border-radius: 6px; }
.month__handover-case-list li > a:hover .month__handover-blocked-type { text-decoration: underline; }
.month__handover-case-list li span:nth-child(n+2) { color: var(--color-muted); }
.month__handover-blocked-chevron { align-self: center; color: var(--color-muted); flex-shrink: 0; }
.month__handover-blocked-type { font-weight: 600; }

.case-config__intro { font-size: 0.9rem; color: var(--color-muted); margin: 0 0 12px; }
.case-config__info { background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); border: 1px solid var(--color-border); border-radius: 8px; padding: 10px 12px; font-size: 0.85rem; margin: 0 0 12px; display: flex; flex-direction: column; gap: 4px; }
.case-config__info p { margin: 0; }
.case-config__list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.case-config__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--color-surface); border: 1px solid var(--color-border); border-left-width: 3px; border-radius: 8px; padding: 10px 12px; }
.case-config__row--critical { border-left-color: var(--color-error); }
.case-config__row--advisory { border-left-color: var(--color-amber); }
.case-config__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.case-config__label { font-weight: 600; font-size: 0.9rem; }
.case-config__hint { font-size: 0.78rem; color: var(--color-muted); }
.case-config__default { font-size: 0.75rem; color: var(--color-muted); border: 1px solid var(--color-border); border-radius: 999px; padding: 1px 8px; }
.case-config__seg { display: inline-flex; border: 1px solid var(--color-border); border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.case-config__seg-btn { display: flex; align-items: center; font-size: 0.8rem; font-weight: 600; color: var(--color-muted); background: var(--color-surface); cursor: pointer; }
.case-config__seg-btn + .case-config__seg-btn { border-left: 1px solid var(--color-border); }
.case-config__seg-btn input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.case-config__seg-btn span { padding: 5px 12px; }
.case-config__seg-btn--critical:has(input:checked) { background: var(--color-error); color: #fff; }
.case-config__seg-btn--advisory:has(input:checked) { background: var(--color-amber); color: #3a2205; }
.case-config__seg-btn:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.case-config__save-bar { position: sticky; bottom: var(--mobile-nav-height); /* above the bottom nav */ z-index: 101; /* above nav */ display: flex; align-items: center; gap: 12px; background: var(--color-surface); border-top: 1px solid var(--color-border); padding: 10px 2px; margin: 0 -2px; }
@media (min-width: 768px) { .case-config__save-bar { bottom: 57px; } }
.case-config__save-hint { font-size: 0.8rem; color: var(--color-muted); flex: 1; }
.adviser__count { font-size: 0.85rem; color: var(--color-muted); }
.adviser__row { flex-direction: column; align-items: stretch; gap: 8px; }
.adviser__match { font-size: 0.8rem; color: var(--color-muted); }
.adviser__payment-state { font-size: 0.8rem; color: var(--color-muted); }
.adviser__row .month__row-side { flex-shrink: 1; flex-wrap: wrap; min-width: 0; }
.adviser__receipts { display: flex; gap: 8px; flex-wrap: wrap; }
.adviser__receipt { font-size: 0.85rem; }
.adviser__reason { margin: 0; font-size: 0.85rem; color: #9b1c1c; background: #fef2f2; border-radius: 6px; padding: 6px 10px; }
.adviser__decision { display: flex; gap: 8px; align-items: center; }
.adviser__reason-input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px; font: inherit; }
.adviser__client-note { margin: 0; font-size: 0.85rem; color: var(--color-text); background: #f1f5f9; border-radius: 6px; padding: 6px 10px; }
.adviser__receipt-type-cases { display: flex; flex-direction: column; gap: 8px; }
.adviser__vat-cases { display: flex; flex-direction: column; gap: 8px; }
.adviser__flag { display: flex; flex-direction: column; gap: 6px; border: 1px solid #f59e0b; border-left-width: 4px; border-radius: 8px; padding: 10px 12px; background: #fffbeb; }
.adviser__flag-explanation { margin: 0; font-weight: 600; font-size: 0.9rem; }
.adviser__flag-dates { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.85rem; }
.adviser__flag-date-label { color: var(--color-muted); margin-right: 4px; }
.adviser__flag-origin { font-size: 0.75rem; color: var(--color-warning-text); background: #fde68a; border-radius: 999px; padding: 2px 10px; align-self: flex-start; }
.adviser__flag-suggestion { margin: 0; font-size: 0.85rem; color: var(--color-muted); }
.adviser__flag-resolve { display: flex; gap: 8px; align-items: center; }
.adviser__export { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.adviser__export-hint { margin: 0; font-size: 0.8rem; color: var(--color-muted); }
.adviser__export-summary { margin: 0; font-size: 0.8rem; color: var(--color-muted); }

/* ── Guided input step for type-specific receipt fields (#168) ─────── */
.guided { display: flex; flex-direction: column; gap: 12px; }
.guided__warning {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 10px 12px; border-radius: 8px;
    background: #fffbeb; color: var(--color-warning-text); font-size: 0.9rem;
}
.guided__basis { color: var(--color-muted); }
.guided__form { display: flex; flex-direction: column; gap: 12px; }
.guided__choose { display: flex; flex-direction: column; gap: 6px; }
.guided__choose-prompt { margin: 0; font-weight: 600; }
.guided__type-select {
    padding: 10px 12px; border: 1px solid var(--color-border);
    border-radius: 8px; font: inherit; background: inherit; color: inherit;
}
.guided__participants {
    border: 1px solid var(--color-border); border-radius: 8px;
    padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; margin: 0;
}
.guided__participant { display: flex; gap: 8px; }
.guided__participant-name { flex: 3; }
.guided__participant-company { flex: 2; }
.guided__add { align-self: flex-start; }
.guided__actions { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.guided__skip { color: var(--color-muted); text-decoration: underline; }
.txdetail__guided { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.txdetail__guided-row { display: flex; flex-direction: column; gap: 2px; }
.txdetail__guided-label { font-size: 0.8rem; color: var(--color-muted); }
.txdetail__guided-value { margin: 0; white-space: pre-line; }
.txdetail__case-explanation { margin: 0 0 8px; font-size: 0.9rem; color: #9b1c1c; }

/* Branchenprofil (#169): manual profile form + website suggestion. */
.company-profile { display: flex; flex-direction: column; gap: 14px; max-width: 34rem; }
.company-profile__intro { margin: 0; font-size: 0.9rem; color: var(--color-muted); }
.company-profile__analyze,
.company-profile__form,
.company-profile__delete { display: flex; flex-direction: column; gap: 8px; }
.company-profile__analyze { padding-bottom: 12px; border-bottom: 1px solid var(--color-border, #e5e7eb); }
.company-profile__label { font-size: 0.85rem; color: var(--color-muted); }
.company-profile__url,
.company-profile__select,
.company-profile__description {
    width: 100%; padding: 10px 12px; border: 1px solid var(--color-border, #d1d5db);
    border-radius: 10px; font: inherit; background: #fff; color: inherit;
}
.company-profile__description { resize: vertical; min-height: 6rem; }
.company-profile__actions { display: flex; gap: 8px; }
.company-profile__saved,
.company-profile__deleted,
.company-profile__suggested { margin: 0; font-size: 0.85rem; color: #15803d; }
.company-profile__analyze-failed,
.company-profile__error { margin: 0; font-size: 0.85rem; color: #9b1c1c; }

/* ── Clarification cockpit (#348) ──────────────────────────────────────
   Mobile-first: base rules are the single-column phone layout; the
   min-width breakpoint below promotes the grids to their desktop
   2-column form. Category colours (one per case type) are the five
   sanctioned semantic tokens plus --color-violet (app.css :root) for the
   one type none of them honestly fits; tinted row/badge backgrounds are
   derived from that single token with color-mix() instead of a second
   -bg token per category. */

.cockpit { max-width: 900px; margin: 0 auto; }
.cockpit__title { font-size: 1.5rem; font-weight: 700; color: var(--color-navy); margin-bottom: 1rem; }

/* Working context (client, month, status) and month picker. Status colours
   are tinted from the sanctioned tokens like the type badges; the picker is
   links in a details element, no script. Every step and row is a 44px target. */
.cockpit__context {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px;
  padding: .875rem 1.25rem; margin-bottom: 1.25rem;
}
.cockpit__context-facts { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin: 0; }
.cockpit__context-fact  { min-width: 0; }
.cockpit__context-label { font-size: .72rem; font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; }
.cockpit__context-value { margin: .15rem 0 0; font-weight: 600; color: var(--color-navy); display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; overflow-wrap: anywhere; }
.cockpit__month-label   { font-size: 1.1rem; }
.cockpit__status { font-size: .75rem; font-weight: 600; padding: .2rem .625rem; border-radius: 10px; white-space: nowrap; color: var(--color-navy); }
.cockpit__status--complete         { background: color-mix(in srgb, var(--color-success) 15%, white); }
.cockpit__status--partial          { background: color-mix(in srgb, var(--color-amber) 20%, white); }
.cockpit__status--open             { background: color-mix(in srgb, var(--color-error) 15%, white); }
.cockpit__datev--open        { background: color-mix(in srgb, var(--color-muted) 15%, white); }
.cockpit__datev--ready       { background: color-mix(in srgb, var(--color-primary) 15%, white); }
.cockpit__datev--transferred { background: color-mix(in srgb, var(--color-success) 15%, white); }

.cockpit__month-picker { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .875rem; align-items: start; }
.cockpit__month-menu   { grid-column: 1 / -1; order: -1; }
.cockpit__month-step, .cockpit__month-summary {
  box-sizing: border-box; min-height: 44px; display: flex; align-items: center; gap: .375rem;
  padding: .5rem .875rem; border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface); color: var(--color-primary);
  font-size: .9rem; font-weight: 600; text-decoration: none;
}
.cockpit__month-step--next { justify-content: flex-end; text-align: right; }
.cockpit__month-step:hover:not(.cockpit__month-step--off), .cockpit__month-summary:hover { background: var(--color-bg); }
.cockpit__month-step--off { color: var(--color-muted); background: var(--color-bg); }
.cockpit__month-summary { cursor: pointer; list-style: none; justify-content: space-between; color: var(--color-navy); }
.cockpit__month-summary::-webkit-details-marker { display: none; }
.cockpit__month-summary::after { content: "▾"; color: var(--color-muted); }
.cockpit__month-menu[open] > .cockpit__month-summary::after { content: "▴"; }
.cockpit__month-list { list-style: none; margin: .375rem 0 0; padding: 0; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.cockpit__month-option {
  min-height: 44px; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem;
  padding: .5rem .875rem; text-decoration: none; color: var(--color-navy);
  border-bottom: 1px solid var(--color-border);
}
.cockpit__month-list li:last-child .cockpit__month-option { border-bottom: 0; }
.cockpit__month-option:hover { background: var(--color-bg); }
.cockpit__month-option--current { background: color-mix(in srgb, var(--color-primary) 10%, white); font-weight: 700; }
.cockpit__month-option-status { font-size: .8rem; color: var(--color-muted); font-weight: 400; }
@media (min-width: 768px) {
  .cockpit__month-picker { grid-template-columns: 1fr minmax(12rem, auto) 1fr; }
  .cockpit__month-menu   { grid-column: auto; order: 0; }
}

.cockpit__banner {
  padding: .875rem 1.25rem; border-radius: 8px;
  margin-bottom: 1.25rem; font-size: .95rem; font-weight: 500;
  display: flex; flex-direction: column; gap: .25rem;
}
.cockpit__banner--success { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success); }
.cockpit__banner--amber   { background: var(--color-amber-bg); color: var(--color-navy); border: 1px solid var(--color-amber-border); }
.cockpit__banner--info    { background: var(--color-info-bg); color: var(--color-info); border: 1px solid var(--color-info-border); }
.cockpit__banner--teal    { background: var(--color-mint); color: var(--color-primary-text); border: 1px solid var(--color-primary-text); }
.cockpit__banner--action  { margin-bottom: 1rem; font-size: .9rem; }
.cockpit__banner-sub      { font-size: .85rem; opacity: .8; }
.cockpit__banner-title    { font-weight: 600; display: block; margin-bottom: .375rem; }
.cockpit__banner-note     { margin: 0; }
.cockpit__banner--split .cockpit__banner-title { margin-bottom: 0; }
.cockpit__banner--info .cockpit__banner-title::before {
  content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .6rem;
  border-radius: 50%; background: currentColor; vertical-align: middle;
}
.cockpit__blockers        { margin: 0; padding: 0 0 0 1.1rem; }
.cockpit__blocker         { margin-bottom: .2rem; }
.cockpit__blocker-link    { color: inherit; text-decoration: underline; }
.cockpit__blocker-link:hover { opacity: .8; }

.cockpit__approve-form { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.cockpit__approve-hint { margin: 0; flex: 1; font-size: .875rem; color: var(--color-muted); min-width: 200px; }

.cockpit__kpi-grid, .cockpit__kpi-small-grid {
  display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem;
}
.cockpit__kpi-large, .cockpit__kpi-small {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px;
}
.cockpit__kpi-large { padding: 1.125rem 1.25rem; }
/* KPI cards that lead into the work list (#369): a link card with a visible target line. */
.cockpit__kpi-link { display: block; text-decoration: none; color: inherit; box-sizing: border-box; width: 100%; }
.cockpit__kpi-small.cockpit__kpi-link { display: flex; flex-wrap: wrap; }
.cockpit__kpi-small .cockpit__kpi-cta { flex-basis: 100%; }
.cockpit__kpi-link:hover { background: var(--color-mint); }
.cockpit__kpi-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.cockpit__kpi-cta { display: block; margin-top: .35rem; font-size: .8rem; font-weight: 600; color: var(--color-primary-text); text-decoration: underline; }
.cockpit__kpi-name  { font-size: .8rem; font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .35rem; }
.cockpit__kpi-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--color-navy); margin-bottom: .5rem; }
.cockpit__kpi-value span { color: var(--color-muted); font-weight: 300; }
.cockpit__kpi-sub   { font-size: .8rem; color: var(--color-muted); }
.cockpit__progress-bar  { background: var(--color-border); border-radius: 4px; height: 6px; overflow: hidden; margin-bottom: .45rem; }
.cockpit__progress-fill { background: var(--color-primary); height: 100%; border-radius: 4px; transition: width .3s; }

/* KPI small — number beside the label, not stacked above it (#348 design). */
.cockpit__kpi-small {
  padding: 1rem 1.25rem; display: flex; align-items: baseline; gap: .75rem;
}
.cockpit__kpi-small-num   { font-size: 1.75rem; font-weight: 700; color: var(--color-navy); line-height: 1; flex-shrink: 0; }
.cockpit__kpi-small-label { font-size: .8rem; color: var(--color-muted); line-height: 1.3; }
.cockpit__kpi-small-label strong { display: block; color: var(--color-text); font-size: .85rem; }

.cockpit__type-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--card-radius);
  padding: var(--card-padding); margin-bottom: 1.25rem;
}
.cockpit__type-heading { font-size: .78rem; color: var(--color-muted); margin-bottom: .75rem; }
.cockpit__type-grid { display: grid; grid-template-columns: 1fr; }
.cockpit__type-row  {
  display: flex; justify-content: space-between; align-items: center;
  padding: .5rem 0; text-decoration: none;
  color: var(--color-navy); font-size: .9rem;
  border-bottom: 1px solid var(--color-border);
}
.cockpit__type-row:hover  { color: var(--color-primary-text); }
.cockpit__type-label      { font-weight: 500; }
.cockpit__type-count      { font-weight: 700; color: var(--color-navy); }

.cockpit__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.cockpit__bar .cockpit__chips { margin-bottom: 0; min-width: 0; }
.cockpit__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
/* Sort select (#368): label beside the select on a desktop, stacked at full width on a phone. */
.cockpit__sort { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--color-muted); }
.cockpit__sort-select {
  box-sizing: border-box; min-height: 44px; min-width: 14rem; padding: 0 .75rem;
  border: 1.5px solid var(--color-border); border-radius: 8px; background: var(--color-bg);
  color: var(--color-text); font: inherit; font-size: .85rem;
}
.cockpit__sort-select:focus { background: var(--color-surface); border-color: var(--color-primary); outline: none; }
.cockpit__sort-select:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-primary) 35%, transparent); outline-offset: 1px; }
@media (max-width: 767.98px) {
  .cockpit__sort { flex-direction: column; align-items: stretch; gap: .25rem; width: 100%; }
  .cockpit__sort-select { width: 100%; min-width: 0; font-size: 16px; }
}
.cockpit__chip  {
  padding: .375rem .875rem; border-radius: 20px; min-height: 32px; display: inline-flex; align-items: center;
  border: 1px solid var(--color-border); font-size: .8rem; text-decoration: none;
  color: var(--color-text); background: var(--color-surface); transition: background .15s;
}
.cockpit__chip--active { background: var(--color-primary-fill); color: var(--color-on-primary); border-color: transparent; }
.cockpit__chip:hover:not(.cockpit__chip--active) { background: var(--color-bg); }

.cockpit__worklist { display: flex; flex-direction: column; gap: .375rem; }
.cockpit__worklist-row {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .75rem 1rem; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: 8px;
  text-decoration: none; color: inherit; cursor: pointer; transition: background .15s;
  border-left: 4px solid transparent;
}
.cockpit__worklist-row:hover { background: var(--color-bg); }
.cockpit__worklist-row--match_proposal   { border-left-color: var(--color-error); }
.cockpit__worklist-row--unmatched        { border-left-color: var(--color-warning); }
.cockpit__worklist-row--missing_receipt  { border-left-color: var(--color-info); }
.cockpit__worklist-row--missing_payment  { border-left-color: var(--color-primary); }
.cockpit__worklist-row--private_purchase { border-left-color: var(--color-violet); }
.cockpit__worklist-row--supplementary_info { border-left-color: var(--color-amber); }
.cockpit__worklist-row--amount_mismatch { border-left-color: var(--color-error); }
.cockpit__worklist-supplier { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cockpit__worklist-date   { font-size: .8rem; color: var(--color-muted); white-space: nowrap; }
.cockpit__worklist-amount { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 80px; text-align: right; }
.cockpit__worklist-left  { flex: 1; min-width: 0; }
.cockpit__worklist-right { display: flex; align-items: center; gap: 1.25rem; }
.cockpit__worklist-detail { font-size: .8rem; color: var(--color-muted); margin-top: .2rem; }

.cockpit__badge { font-size: .68rem; font-weight: 600; padding: .2rem .5rem; border-radius: 10px; white-space: nowrap; color: var(--color-navy); }
.cockpit__badge--match_proposal   { background: color-mix(in srgb, var(--color-error) 15%, white); }
.cockpit__badge--unmatched        { background: color-mix(in srgb, var(--color-warning) 15%, white); }
.cockpit__badge--missing_receipt  { background: color-mix(in srgb, var(--color-info) 15%, white); }
.cockpit__badge--missing_payment  { background: color-mix(in srgb, var(--color-primary) 15%, white); }
.cockpit__badge--private_purchase { background: color-mix(in srgb, var(--color-violet) 15%, white); }
.cockpit__badge--receipt_type     { background: color-mix(in srgb, var(--color-amber) 20%, white); }
.cockpit__badge--supplementary_info { background: color-mix(in srgb, var(--color-amber) 20%, white); }
.cockpit__badge--amount_mismatch { background: color-mix(in srgb, var(--color-error) 15%, white); }
.cockpit__badge--duplicate       { background: color-mix(in srgb, var(--color-violet) 15%, white); }

.cockpit__duo { display: grid; gap: .75rem; margin: .5rem 0 .75rem; }
@media (min-width: 768px) {
  .cockpit__duo { grid-template-columns: 1fr 1fr; }
}
.cockpit__duo-side { border: 1px solid var(--color-border); border-radius: var(--card-radius); padding: .75rem; min-width: 0; }
.cockpit__duo-side--new { border-color: color-mix(in srgb, var(--color-violet) 35%, var(--color-border)); }
.cockpit__duo-side-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.cockpit__duo-role { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-navy); background: color-mix(in srgb, var(--color-info) 15%, white); padding: .2rem .5rem; border-radius: 10px; }
.cockpit__duo-side--new .cockpit__duo-role { background: color-mix(in srgb, var(--color-violet) 15%, white); }
.cockpit__duo-source { font-weight: 600; font-size: .85rem; color: var(--color-navy); }
.cockpit__duo-preview { display: inline-block; margin-bottom: .5rem; }
.cockpit__duo-preview .cockpit__preview-img { max-width: 10rem; max-height: 7rem; }
.cockpit__duo-reference { word-break: break-all; }
.cockpit__duo-diffs { margin: 0 0 .75rem; }
.cockpit__duo-diffs-title { font-size: .8rem; font-weight: 600; color: var(--color-navy); margin-bottom: .25rem; }
.cockpit__duo-diff-list { list-style: none; margin: 0; padding: 0; font-size: .85rem; color: var(--color-muted); }
.cockpit__duo-diff { margin-bottom: .15rem; }
.cockpit__candidates { margin: .25rem 0 .75rem; padding-left: 1.25rem; font-size: .85rem; color: var(--color-muted); }
.cockpit__candidates li { margin-bottom: .15rem; }

.cockpit__handover-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--card-radius);
  padding: var(--card-padding); margin-bottom: 1.25rem;
}
.cockpit__handover-title { font-weight: 600; font-size: 1rem; margin-bottom: .5rem; color: var(--color-navy); }
.cockpit__handover-desc  { font-size: .875rem; color: var(--color-muted); margin-bottom: 1rem; }
.cockpit__btn--handover  { margin-top: .25rem; }
#uebergabe { scroll-margin-top: calc(var(--mobile-header-height) + env(safe-area-inset-top) + 8px); }

.cockpit__handed-over {
  background: var(--color-surface); border: 1px solid var(--color-info-border); border-radius: 10px;
  padding: 1.5rem 1.25rem; margin-bottom: 1.25rem; text-align: center;
}
.cockpit__handed-over-icon {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; margin: 0 auto 1rem; border-radius: 50%;
  background: var(--color-info-bg); color: var(--color-info);
}
.cockpit__handed-over-title { font-weight: 700; font-size: 1.05rem; margin-bottom: .5rem; color: var(--color-navy); }
.cockpit__handed-over-text  { max-width: 34rem; margin: 0 auto 1.25rem; font-size: .9rem; color: var(--color-muted); }
.cockpit__handed-over-facts {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.5rem;
  margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--color-border);
}
.cockpit__handed-over-fact { min-width: 8rem; }
.cockpit__handed-over-fact-label { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.cockpit__handed-over-fact-value { margin: .2rem 0 0; font-weight: 600; color: var(--color-navy); }
.cockpit__handed-over-fact-value--info { color: var(--color-info); }

/* Note box of a clarification case's detail (#373). */
.cockpit__notes { display: grid; gap: .6rem; min-width: 0; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.cockpit__notes-title { margin: 0; font-size: .95rem; color: var(--color-navy); }
.cockpit__notes-saved {
  margin: 0; padding: .5rem .75rem; border-radius: 8px; font-size: .875rem; font-weight: 600;
  background: color-mix(in srgb, var(--color-success) 9%, var(--color-surface));
  color: color-mix(in srgb, var(--color-success) 70%, var(--color-navy));
}
.cockpit__notes-form { display: grid; gap: .4rem; min-width: 0; }
.cockpit__notes-label { font-weight: 600; font-size: .875rem; color: var(--color-navy); }
.cockpit__notes-field {
  box-sizing: border-box; width: 100%; min-height: 5.5rem; padding: .6rem .75rem; resize: vertical;
  border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface);
  color: var(--color-text); font: inherit; font-size: .9rem;
}
.cockpit__notes-field:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.cockpit__notes-field--error { border: 2px solid var(--color-error); }
.cockpit__notes-error { margin: 0; font-size: .875rem; font-weight: 600; color: var(--color-error); }
.cockpit__notes-help { margin: 0; display: flex; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--color-muted); }
.cockpit__notes-count { font-variant-numeric: tabular-nums; }
.cockpit__notes-count--over { color: var(--color-error); font-weight: 700; }
.cockpit__notes-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.cockpit__notes-actions .cockpit__btn[disabled] { opacity: .55; cursor: not-allowed; }
.cockpit__notes-actions button.cockpit__link { min-height: 44px; padding: 0 .5rem; background: none; border: 0; font: inherit; cursor: pointer; }
.cockpit__notes-actions [hidden] { display: none; }

/* Empty states (#375): one building block, neutral and positive (--ok). */
.empty-state {
  display: grid; justify-items: center; gap: .5rem; text-align: center; min-width: 0; box-sizing: border-box;
  padding: 1.75rem 1.25rem; margin-bottom: 1.25rem;
  background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: 12px;
}
.empty-state--small { padding: 1.1rem 1rem; border-style: solid; }
.empty-state__icon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-mint); color: var(--color-primary-text);
}
.empty-state--small .empty-state__icon { width: 36px; height: 36px; }
.empty-state__title { margin: 0; font-weight: 700; font-size: 1rem; color: var(--color-navy); text-wrap: balance; }
.empty-state__body { margin: 0; font-size: .875rem; color: var(--color-muted); max-width: 44ch; }
.empty-state__actions { display: flex; flex-wrap: wrap; gap: .25rem .9rem; justify-content: center; align-items: center; margin-top: .35rem; }
.empty-state__link {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: .9rem;
  color: var(--color-primary-text); text-decoration: underline;
}
.empty-state__actions .btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.empty-state--ok {
  border-style: solid;
  background: color-mix(in srgb, var(--color-success) 9%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-surface));
}
.empty-state--ok .empty-state__icon {
  background: var(--color-surface); border: 2px solid color-mix(in srgb, var(--color-success) 40%, var(--color-surface));
  color: color-mix(in srgb, var(--color-success) 70%, var(--color-navy));
}
.empty-state--ok .empty-state__title { color: color-mix(in srgb, var(--color-success) 70%, var(--color-navy)); }
.empty-state--ok .empty-state__body { color: color-mix(in srgb, var(--color-success) 40%, var(--color-navy)); }

@media (min-width: 768px) {
  .cockpit__kpi-grid, .cockpit__kpi-small-grid, .cockpit__type-grid { grid-template-columns: 1fr 1fr; }
  .cockpit__type-grid { column-gap: 2rem; }
  .cockpit__banner--split { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ── Cockpit detail page ── */
.cockpit--detail { max-width: 900px; margin: 0 auto; }

.cockpit__back-link {
  display: inline-block; margin-bottom: 1.25rem;
  color: var(--color-primary-text); text-decoration: none; font-size: .9rem; font-weight: 500;
}
.cockpit__back-link:hover { text-decoration: underline; }

.cockpit__detail-header { margin-bottom: 1.5rem; }
.cockpit__detail-title  { font-size: 1.4rem; font-weight: 700; margin: 0 0 .5rem; color: var(--color-navy); }
.cockpit__detail-meta   { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.cockpit__detail-amount { font-weight: 600; font-variant-numeric: tabular-nums; }
.cockpit__detail-date   { font-size: .85rem; color: var(--color-muted); }

.cockpit__detail-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
.cockpit__detail-preview { min-width: 0; }
.cockpit__preview-open {
  display: block; overflow: hidden; cursor: zoom-in;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px;
}
.cockpit__preview-open:hover { border-color: var(--color-primary); }
.cockpit__preview-img { display: block; width: 100%; max-height: 28rem; object-fit: contain; }
.cockpit__preview-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  min-height: 12rem; padding: 1.5rem 1rem; text-align: center;
  background: var(--color-surface); border: 2px dashed color-mix(in srgb, var(--color-muted) 35%, white); border-radius: 10px;
}
.cockpit__preview-label { color: var(--color-muted); font-size: .8rem; }
.cockpit__preview-empty-title { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--color-navy); }
.cockpit__preview-empty-body { margin: 0; font-size: .9rem; color: var(--color-muted); }
.cockpit__preview-empty-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .5rem;
  font-weight: 600; color: var(--color-primary-text); text-decoration: underline;
}
@media (min-width: 768px) {
  .cockpit__preview-img { max-height: 36rem; }
  .cockpit__preview-empty { aspect-ratio: 1 / 1; }
}

.cockpit__detail-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--card-radius);
  padding: var(--card-padding); border-left: 4px solid transparent;
}
.cockpit__detail-card--match_proposal   { border-left-color: var(--color-error); }
.cockpit__detail-card--unmatched        { border-left-color: var(--color-warning); }
.cockpit__detail-card--missing_receipt  { border-left-color: var(--color-info); }
.cockpit__detail-card--missing_payment  { border-left-color: var(--color-primary); }
.cockpit__detail-card--private_purchase { border-left-color: var(--color-violet); }

.cockpit__card-title  { font-size: 1.15rem; font-weight: 700; color: var(--color-navy); margin: 0 0 .5rem; }
.cockpit__explanation { font-size: .875rem; color: var(--color-muted); margin: 0 0 .875rem; }
.cockpit__facts       { display: grid; grid-template-columns: 1fr; margin: 0 0 1.25rem; font-size: .9rem; }
.cockpit__facts dt    { color: var(--color-muted); }
.cockpit__facts dd    { margin-bottom: .5rem; overflow-wrap: anywhere; }
.cockpit__warning     { font-size: .875rem; color: var(--color-navy); background: var(--color-amber-bg); padding: .5rem .75rem; border-radius: 6px; margin: 0 0 .875rem; }
.cockpit__hint        { font-size: .8rem; color: var(--color-muted); margin: .5rem 0 0; width: 100%; }
.cockpit__question    { font-size: .85rem; font-weight: 600; color: var(--color-muted); margin: 0; width: 100%; }
.cockpit__actions     { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-start; }
.cockpit__inline-form { display: contents; }
.cockpit__label       { display: block; font-size: .8rem; margin-bottom: .25rem; color: var(--color-text); }

/* Missing-receipt card: three button levels. First level is the one filled
   button, second level is outlined, third level is an underlined text link.
   Dark petrol text and the light fills derive from --color-primary. */
.cockpit__steps { display: flex; flex-direction: column; gap: .5rem; }
.cockpit__step-row { display: flex; flex-direction: column; gap: .625rem; }
.cockpit__btn {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-height: var(--button-height); padding: 0 1.375rem; border: 1.5px solid var(--color-primary-fill); border-radius: var(--button-radius);
  font: inherit; font-size: .875rem; font-weight: 600; text-decoration: none; cursor: pointer;
}
.cockpit__btn--first  { background: var(--color-primary-fill); color: var(--color-on-primary); }
.cockpit__btn--first:hover  { background: var(--color-primary-fill-hover); border-color: var(--color-primary-fill-hover); }
.cockpit__btn--second {
  background: transparent; color: var(--color-navy); border-color: var(--color-navy);
}
.cockpit__btn--second:hover { background: var(--color-secondary-hover); }
.cockpit__link {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 .5rem;
  color: var(--color-primary-text); font-size: .875rem; font-weight: 600; text-decoration: underline;
}
.cockpit__link:hover { color: color-mix(in srgb, var(--color-primary-text) 75%, var(--color-navy)); }
.cockpit__more > summary { list-style: none; }
.cockpit__more > summary::-webkit-details-marker { display: none; }
.cockpit__more[open] > summary {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-primary) 80%, black);
}
.cockpit__more[open] > summary::after { content: "\00a0\25be"; }
.cockpit__group {
  box-sizing: border-box; margin-top: .625rem; padding: 1rem;
  background: color-mix(in srgb, var(--color-bg) 50%, var(--color-surface));
  border: 1px solid var(--color-border); border-radius: 8px;
}
.cockpit__group-text  { margin: 0 0 .75rem; font-size: .8rem; line-height: 1.5; color: var(--color-muted); }
.cockpit__group .cockpit__label { font-size: .8rem; font-weight: 600; margin-bottom: .375rem; }
.cockpit__field {
  display: block; box-sizing: border-box; width: 100%; min-height: 48px; margin-bottom: .75rem; padding: 0 .75rem;
  background: var(--color-bg); border: 1px solid color-mix(in srgb, var(--color-muted) 60%, var(--color-surface));
  border-radius: 6px; font: inherit; font-size: .875rem;
}
.cockpit__field:focus { background: var(--color-surface); border: 2px solid var(--color-primary); padding: 0 calc(.75rem - 1px); outline: none; }
.cockpit__group-actions { display: flex; flex-direction: column; gap: .25rem; }
.cockpit__btn:focus-visible, .cockpit__link:focus-visible {
  outline: 3px solid var(--color-navy); outline-offset: 2px;
}

/* Receipt selection of the missing-receipt card: one radio row per receipt,
   the fit hint on the right from 768px, below the receipt on a phone. */
.cockpit__choices { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.cockpit__choices-legend { padding: 0; margin-bottom: .5rem; font-size: .85rem; font-weight: 600; color: var(--color-muted); }
.cockpit__choice {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; box-sizing: border-box; min-height: 56px;
  padding: .625rem .875rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; cursor: pointer;
}
.cockpit__choice:has(input:checked) {
  border: 2px solid var(--color-primary); padding: calc(.625rem - 1px) calc(.875rem - 1px);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
}
.cockpit__choice:has(input:focus-visible) { outline: 3px solid var(--color-navy); outline-offset: 2px; }
.cockpit__choice input { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--color-primary); }
.cockpit__choice-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 10rem; font-size: .9rem; color: var(--color-navy); overflow-wrap: anywhere; }
.cockpit__choice-meta { font-size: .85rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.cockpit__choice-hint {
  flex: none; margin-left: calc(1.25rem + .75rem); padding: .125rem .625rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; color: color-mix(in srgb, var(--color-success) 70%, black);
  background: color-mix(in srgb, var(--color-success) 14%, var(--color-surface));
}
.cockpit__choice-hint--warn { color: var(--color-navy); background: var(--color-amber-bg); border: 1px solid var(--color-amber-border); }
@media (min-width: 768px) {
  .cockpit__choice-hint { margin-left: 0; }
}

/* Possible payments of the missing-payment card: a dashed box listing each
   payment with its fit hints; the hints reuse the receipt selection's chips. */
.cockpit__candidates { margin: 0 0 1.25rem; padding: .75rem .875rem; border: 1px dashed var(--color-border); border-radius: 8px; }
.cockpit__candidates-title { margin: 0 0 .375rem; font-size: .8rem; font-weight: 600; color: var(--color-muted); }
.cockpit__candidates-list { margin: 0; padding: 0; list-style: none; }
.cockpit__candidate { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; padding: .5rem 0; font-size: .9rem; }
.cockpit__candidate + .cockpit__candidate { border-top: 1px solid var(--color-border); }
.cockpit__candidate-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 10rem; color: var(--color-navy); overflow-wrap: anywhere; }
.cockpit__candidate-meta { font-size: .85rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.cockpit__choice-hints { display: flex; flex-wrap: wrap; gap: .375rem; margin-left: calc(1.25rem + .75rem); }
.cockpit__choice-hints .cockpit__choice-hint,
.cockpit__candidate .cockpit__choice-hints { margin-left: 0; }
@media (min-width: 768px) {
  .cockpit__choice-hints { margin-left: 0; }
}
@media (min-width: 768px) {
  .cockpit__step-row { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .cockpit__btn { display: inline-flex; }
  .cockpit__more[open] { flex-basis: 100%; }
  .cockpit__more[open] > summary { display: inline-flex; }
  .cockpit__group { max-width: 32rem; }
  .cockpit__group-actions { flex-direction: row; align-items: center; gap: .625rem; }
  .cockpit__steps > .cockpit__link { align-self: flex-start; }
}

@media (min-width: 768px) {
  .cockpit__detail-layout { grid-template-columns: 1fr 1.5fr; }
}
@media (min-width: 768px) {
  .cockpit__facts { grid-template-columns: max-content 1fr; column-gap: 1.5rem; }
}

/* Notification feed (#92): /benachrichtigungen page — badge lives in the nav.
   .notification-badge and .notification-nav__panel are structural HTMX swap
   hooks (badge poll target, feed panel) with no own styling: the pill is
   .nav__badge, the feed rows style via .notification-feed below. */
.notifications-page { display: flex; flex-direction: column; gap: 14px; max-width: 34rem; }
.notifications-page__title { font-size: 1.3rem; margin: 0; }
.notification-feed { list-style: none; margin: 0; padding: 0; }
.notification-feed__item { padding: 8px 0; border-bottom: 1px solid var(--color-border, #e5e7eb); font-size: 0.9rem; }
.notification-feed__item:last-child { border-bottom: none; }
.notification-feed__item a { color: var(--color-text, #18233b); text-decoration: none; }
.notification-feed__item a:hover { color: var(--color-primary-text); }
.notification-feed__empty { margin: 0; font-size: 0.9rem; color: var(--color-muted, #6b7280); }

/* Zusatzangaben card (#673): hospitality details, project reference, note.
   Banner and badge tones derive from the amber, danger and success tokens. */
.supp-banner {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    font-size: 0.85rem;
}

.supp-banner--warn {
    background: var(--color-amber-bg);
    border-color: var(--color-amber-border);
}

.supp-banner--success {
    background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-surface));
}

.supp-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.supp-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.supp-field__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.supp-field__label {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 600;
}

.supp-field__input {
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}

.supp-field__input--area {
    min-height: 4rem;
    resize: vertical;
}

.supp-field__input--invalid {
    border-color: var(--color-danger-border);
    background: var(--color-danger-bg);
}

.supp-field__hint {
    font-size: 0.75rem;
    color: var(--color-muted);
}

.supp-field__error {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-danger);
}

.supp-badge {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.supp-badge--required {
    background: var(--color-amber-bg);
    border-color: var(--color-amber-border);
    color: var(--color-warning-text);
}

.supp-badge--missing {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-border);
    color: var(--color-danger);
}

.supp-badge--ok {
    background: color-mix(in srgb, var(--color-success) 10%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-success) 35%, var(--color-surface));
    color: var(--color-success);
}

.supp-badge--optional {
    color: var(--color-muted);
}

.supp-group-label {
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
}

.supp-card__save {
    width: 100%;
}

/* Pflichtangaben card: one row per transaction field. Mandatory gaps
   carry a solid danger edge, optional gaps a dashed muted edge. */
.tx-completeness__rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tx-completeness__row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-border);
    border-radius: 0.5rem;
    background: var(--color-surface);
}

.tx-completeness__row--missing_mandatory {
    border-left-color: var(--color-danger);
}

.tx-completeness__row--missing_optional {
    border-left-style: dashed;
    border-left-color: var(--color-muted);
}

.tx-completeness__row--not_recognized {
    border-left-color: var(--color-amber);
}

.tx-completeness__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.tx-completeness__label {
    font-size: 0.9rem;
    font-weight: 600;
}

.tx-completeness__summary,
.tx-completeness__hint {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-muted);
}

.tx-completeness__case {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-amber-border);
    border-radius: 0.5rem;
    background: var(--color-amber-bg);
    font-size: 0.85rem;
    font-weight: 600;
}

.tx-completeness__form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tx-completeness__action {
    display: flex;
    width: 100%;
    min-height: 44px;
    justify-content: center;
    text-decoration: none;
}

.tx-completeness__drop { margin: 0; }
.tx-completeness__zone { min-height: 0; padding: 1rem; }
.tx-completeness__pending { margin-top: 0.5rem; }
.tx-completeness__row--pending { border-left-color: var(--color-primary); }
.tx-completeness__row--failed { border-left-color: var(--color-danger); }
.tx-completeness__row--refused { border-left-color: var(--color-amber); }

.adviser__supplementary {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 0.75rem;
    margin: 0;
    font-size: 0.85rem;
}

.adviser__supplementary dt {
    color: var(--color-muted);
}

.adviser__supplementary dd {
    margin: 0;
    font-weight: 600;
    white-space: pre-line;
}

.adviser__supplementary dd.adviser__supplementary-empty {
    font-style: italic;
    font-weight: 500;
    color: var(--color-muted);
}

.adviser__supplementary dd.adviser__supplementary-empty--required {
    color: var(--color-danger);
}

/* ── Brand logo (#777) ───────────────────────────────────────────── */
.nav__brand { display: none; }
.nav__wordmark {
    color: var(--color-surface);
    font-weight: 700;
    letter-spacing: 0.04em;
}
.brand-logo { display: block; max-width: 100%; height: auto; }
.login__logo img { display: block; max-width: 100%; height: auto; }
.login__topnav-logo img,
.hp__logo img { display: block; height: 40px; width: auto; }
.login__brand-logo { display: flex; align-items: center; gap: 12px; }
.login__brand-logo img { flex-shrink: 0; }
.hp__footer-logo { display: flex; align-items: center; gap: 10px; }

@media (min-width: 768px) {
    .nav__brand {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
        margin: 20px 16px 8px;
        text-decoration: none;
    }

    .nav__brand:focus-visible {
        outline: 2px solid var(--color-primary-on-dark);
        outline-offset: 2px;
    }

    .nav__brand::before {
        content: '';
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        background: url("/assets/img/logo-mark-dark.svg") center / contain no-repeat;
    }
}

/* #701: multi-part receipts — the preview stacks one named block per part,
   the focused field's part gets the mint highlight, and the amounts block
   shows each value with its source part. Tokens only; the blocks are
   block-level, so the mobile column layout stacks them unchanged. */
.review__part { border: 1px solid var(--color-light-gray); border-radius: .5rem; padding: .5rem; background: var(--color-surface); }
.review__part-label { margin: 0 0 .35rem; font-size: .8rem; font-weight: 600; color: var(--color-navy); }
.review__part--active { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-mint); }
.review__hospitality { border: 1px solid var(--color-light-gray); border-radius: .5rem; padding: .75rem; }
.review__hospitality-title { margin: 0 0 .5rem; font-size: 1rem; color: var(--color-navy); }
.review__amounts { display: flex; flex-direction: column; gap: .35rem; }
.review__amount-row { display: flex; justify-content: space-between; gap: .5rem; }
.review__amount-value { text-align: right; }
.review__amount-source, .review__amount-mark { color: var(--color-primary-text); font-size: .85rem; }

/* ── Bank statement import (#728) ──────────────────────────────────────── */
.stmt { max-width: 56rem; }
.stmt__lead { margin: 0 0 1.25rem; color: var(--color-muted); max-width: 46rem; }
.stmt__form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 36rem; }
.stmt__label { font-weight: 600; font-size: 0.9rem; margin-top: 0.75rem; }
.stmt__input { min-height: 48px; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--button-radius); background: var(--color-surface); color: var(--color-text); font: inherit; }
.stmt__input:focus-visible { outline: 3px solid var(--color-navy); outline-offset: 2px; }
.stmt__hint { margin: 0; font-size: 0.8125rem; color: var(--color-muted); }
.stmt__error { margin: 0 0 1rem; padding: 0.625rem 0.75rem; border: 1px solid var(--color-danger-border); border-radius: var(--button-radius); background: var(--color-danger-bg); color: var(--color-danger); font-size: 0.9rem; }
.stmt__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1rem; }
.stmt__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--color-primary-text); text-decoration: underline; }
.stmt__link[aria-current="true"] { color: var(--color-navy); text-decoration: none; }
.stmt__files { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.stmt__file { padding: 0.75rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--button-radius); }
.stmt__file--unreadable { border-color: var(--color-danger); }
.stmt__file-name { font-weight: 700; margin-right: 0.5rem; }
.stmt__file-ok { color: var(--color-success); font-size: 0.875rem; font-weight: 600; }
.stmt__file-reason { margin: 0.375rem 0 0; font-size: 0.875rem; }
.stmt__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.stmt__card { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; padding: 0.75rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--card-radius); }
.stmt__card--warn { background: var(--color-amber-bg); border-color: var(--color-amber-border); }
.stmt__card-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.stmt__card--warn .stmt__card-label, .stmt__card--warn .stmt__card-value { color: var(--color-warning-text); }
.stmt__card-value { font-size: 1.125rem; font-weight: 700; color: var(--color-navy); }
.stmt__card-value--small { font-size: 0.9375rem; }
.stmt__filters { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.stmt__rows { list-style: none; margin: 0.5rem 0 0; padding: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--card-radius); overflow: hidden; }
.stmt__row { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; gap: 0.25rem 1rem; align-items: center; padding: 0.625rem 1rem; border-top: 1px solid var(--color-border); font-size: 0.875rem; }
.stmt__row:first-child { border-top: 0; }
.stmt__row--duplicate { background: var(--color-amber-bg); }
.stmt__row-main { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.stmt__row-who { font-weight: 600; }
.stmt__row-ref { color: var(--color-muted); font-size: 0.8125rem; }
.stmt__row-amount { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.stmt__badge { grid-column: 2 / -1; justify-self: start; padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; }
.stmt__badge--import { background: var(--color-success-bg); color: var(--color-success); }
.stmt__badge--duplicate { background: var(--color-surface); border: 1px solid var(--color-amber-border); color: var(--color-warning-text); }
.stmt__badge--error { background: var(--color-surface); border: 1px solid var(--color-danger-border); color: var(--color-danger); }
.stmt__confirm { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); }
.stmt__input--short { max-width: 8rem; text-transform: uppercase; }
.stmt__run-title { margin: 0 0 0.75rem; font-size: 1.125rem; font-weight: 700; color: var(--color-navy); }
.stmt__bar { height: 0.5rem; margin-bottom: 0.5rem; background: var(--color-border); border-radius: 999px; overflow: hidden; }
.stmt__bar-fill { display: block; height: 100%; background: var(--color-primary-fill); border-radius: 999px; }
.stmt__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1rem; max-width: 36rem; }
.stmt__tile { display: flex; flex-direction: column; padding: 0.625rem 0.875rem; border-radius: var(--button-radius); font-size: 0.8125rem; }
.stmt__tile-num { font-size: 1.375rem; font-weight: 700; }
.stmt__tile--ok { background: var(--color-success-bg); color: var(--color-success); }
.stmt__tile--warn { background: var(--color-amber-bg); color: var(--color-warning-text); }
.stmt__tile--err { background: var(--color-danger-bg); color: var(--color-danger); }
.stmt__errors { margin: 0 0 1rem; padding-left: 1.25rem; font-size: 0.875rem; }
.stmt__field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.stmt__mapping { display: flex; flex-direction: column; gap: 0.5rem; max-width: 40rem; }
.stmt__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; }
.stmt__req { color: var(--color-danger); }
.stmt__subtitle { margin: 1rem 0 0.25rem; font-size: 1rem; font-weight: 700; color: var(--color-navy); }
@media (min-width: 720px) {
    .stmt__row { grid-template-columns: 7rem minmax(0, 1fr) 9rem 15rem; }
    .stmt__badge { grid-column: auto; }
    .stmt__row--sample { grid-template-columns: 7rem minmax(0, 1fr) auto; }
}

/* Offline page of the installed app (#974): one mark, one sentence, one button. */
.offline-body {
    min-height: 100dvh;
}

.offline {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: calc(1.5rem + env(safe-area-inset-top)) 1.5rem calc(1.5rem + env(safe-area-inset-bottom));
    text-align: center;
}

.offline__title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-navy);
}

.offline__text {
    max-width: 22rem;
    color: var(--color-text);
}

.offline__retry {
    min-width: 12rem;
}

/* ── Benutzerverwaltung (#1071) ─────────────────────────────────────── */
/* The user list renders card rows at every width — on a phone each row is
   its own card, and the same layout holds on wider screens. */
.users {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

.users-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.user-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.user-card__main {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.user-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary-fill);
    color: var(--color-on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 700;
    flex-shrink: 0;
}

.user-card__who {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.user-card__name {
    font-weight: 700;
    color: var(--color-text);
}

.user-card__email {
    font-size: 0.8125rem;
    color: var(--color-muted);
    overflow-wrap: anywhere;
}

.user-card__role {
    font-size: 0.8125rem;
    color: var(--color-muted);
}

.user-card__status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    align-self: flex-start;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.1875rem 0.625rem;
}

.user-card__sent {
    font-weight: 400;
}

.user-card__status--active      { background: var(--color-success-bg); color: var(--color-success); }
.user-card__status--invited     { background: var(--color-sand); color: var(--color-warning-text); }
.user-card__status--deactivated { background: var(--color-muted-fill); color: var(--color-muted); }

.user-card__reason {
    font-size: 0.8125rem;
    color: var(--color-muted);
    margin: 0;
}

.user-card__alert {
    font-size: 0.8125rem;
    color: var(--color-danger);
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger-border);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    margin: 0;
}

.user-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.users__invite {
    min-height: 44px;
}

.users-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0 0 1rem;
    border: none;
    padding: 0;
}

.users-form__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-muted);
}

.users-form__input {
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 1rem;
    min-height: 44px;
    background: var(--color-surface);
    color: var(--color-text);
}

.users-form__input:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
    border-color: transparent;
}

.users-form__error {
    font-size: 0.8125rem;
    color: var(--color-danger);
    margin: 0;
}

.users-form__roles {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.users-form__role {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0.625rem 0.75rem;
    cursor: pointer;
}

.users-form__role:has(input:checked) {
    border-color: var(--color-primary);
}

.users-form__role input[type="radio"] {
    width: 20px;
    height: 20px;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.users-form__role-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.users-form__role-label {
    font-weight: 600;
    color: var(--color-text);
}

.users-form__role-desc {
    font-size: 0.8125rem;
    color: var(--color-muted);
}

/* iPhone Safari zooms into any field whose text is under 16 px and stays
   zoomed after it loses focus (#974). On a phone every text field is 16 px;
   the :not() terms lift the selector above the single-class field rules. */
@media (max-width: 767px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select:not([hidden]),
    textarea:not([hidden]) {
        font-size: 16px;
    }
}