/**
 * Smartlabs – Refine (Apple-inspirierte Überarbeitung)
 *
 * Opt-in-Ebene: greift nur, wenn <html> die Klasse "ui-refine" trägt
 * (Umschalten via Theme-Menü oder ?ui=refine / ?ui=classic).
 *
 * Grundsätze
 * - Tokens zuerst: bestehende Variablen (--bg-*, --text-*, --shell-*) werden neu belegt,
 *   damit app.css / Module automatisch mitziehen.
 * - Selektoren mit :where(.ui-refine) → Spezifität bleibt gleich wie das Original.
 *   Seiten-spezifische Styles (@push('styles')) gewinnen weiterhin.
 * - Nur eine erhöhte Fläche pro Ebene: Karten sind Flächen, Seitenköpfe sind Typografie.
 * - Transparenz nur dort, wo Inhalt darunter scrollt (Topbar, Tab-Bar, Menüs).
 * - Bewegung: kurz, vom Auslöser her, immer unterbrechbar; reduzierte Bewegung respektiert.
 *
 * Marke bleibt: App-Blau #4a9eff, Smarty-Verlauf, Buchhaltungs-Teal.
 */

/* ────────────────────────────────────────────────────────────
   1. Tokens
   ──────────────────────────────────────────────────────────── */
html.ui-refine {
    /* Flächen (dunkel) – Tiefe über Helligkeit, nicht über Schatten */
    --r-canvas: #19191b;
    --r-sidebar: #121214;
    --r-surface: #212124;
    --r-raised: #2a2a2e;
    --r-fill: rgba(120, 120, 128, 0.20);        /* neutrale Bedienflächen */
    --r-fill-strong: rgba(120, 120, 128, 0.30);
    --r-hover: rgba(255, 255, 255, 0.055);
    --r-press: rgba(255, 255, 255, 0.10);
    --r-hairline: rgba(255, 255, 255, 0.09);
    --r-separator: rgba(255, 255, 255, 0.14);

    --r-text: #f3f3f5;
    --r-text-2: #b3b3ba;
    --r-text-3: #8d8d95;

    --r-accent: #4a9eff;                         /* Markenblau */
    --r-accent-fill: #2673d6;                    /* Füllung mit weissem Text (4.66:1; vorher #2d7fe8 = 3.95:1) */
    --r-accent-fill-hover: #2d7fe8;
    --r-accent-button: #2673d6;                  /* Primärknopf .r-btn--primary: Weiss darauf 4.66:1 */
    --r-accent-button-hover: #2d7fe8;
    --r-accent-text: #62adff;
    --r-accent-tint: rgba(74, 158, 255, 0.16);
    --r-accent-tint-strong: rgba(74, 158, 255, 0.26);
    --r-on-accent: #ffffff;

    --r-success: #32d15f;
    --r-warning: #ffae1a;
    --r-danger: #ff5c50;
    --r-info: #5ac8fa;

    --r-material: rgba(25, 25, 27, 0.74);        /* Topbar / schwebende Chrome */
    --r-menu: rgba(44, 44, 48, 0.94);
    --r-scrim: rgba(0, 0, 0, 0.48);

    --r-shadow-card: none;
    --r-shadow-menu: 0 0 0 0.5px rgba(0, 0, 0, 0.6), 0 12px 36px rgba(0, 0, 0, 0.45);
    --r-shadow-modal: 0 0 0 0.5px rgba(0, 0, 0, 0.6), 0 28px 80px rgba(0, 0, 0, 0.55);
    --r-shadow-seg: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 0.5px rgba(0, 0, 0, 0.2);

    /* Radien – verschachtelt: aussen grösser als innen */
    --r-radius-xs: 6px;
    --r-radius-sm: 8px;
    --r-radius: 10px;
    --r-radius-card: 14px;
    --r-radius-overlay: 16px;
    --r-radius-sheet: 20px;

    /* Abstände – 4pt-Raster */
    --r-1: 4px;
    --r-2: 8px;
    --r-3: 12px;
    --r-4: 16px;
    --r-5: 20px;
    --r-6: 24px;
    --r-8: 32px;

    /* Bewegung */
    --r-ease: cubic-bezier(0.2, 0.8, 0.2, 1);    /* kritisch gedämpft, ohne Überschwingen */
    --r-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --r-fast: 110ms;
    --r-base: 180ms;
    --r-slow: 260ms;

    /* Typografie: Skala der Bausteine (Phase 2), angelehnt an Apple.
       Nichts unter 11 px. Gilt für beide Themes. */
    --r-fs-caption2: 11px;
    --r-fs-caption: 12px;
    --r-fs-footnote: 13px;
    --r-fs-body: 15px;
    --r-fs-headline: 17px;
    --r-fs-title2: 22px;
    --r-fs-title1: 28px;

    /* Typografie */
    --r-font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* ── Bestehende App-Variablen neu belegen ── */
    --bg-primary: var(--r-canvas);
    --bg-secondary: #1f1f22;
    --bg-tertiary: #2a2a2e;
    --bg-card: var(--r-surface);
    --bg-hover: var(--r-hover);
    --bg-input: #1a1a1d;
    --bg-table-header: transparent;
    --bg-table-row: transparent;
    --bg-table-row-hover: var(--r-hover);

    --text-primary: var(--r-text);
    --text-secondary: var(--r-text-2);
    --text-muted: var(--r-text-3);
    --text-inverse: #19191b;

    --accent-primary: var(--r-accent);
    --accent-primary-hover: #6bb0ff;
    --accent-success: var(--r-success);
    --accent-warning: var(--r-warning);
    --accent-danger: var(--r-danger);
    --accent-info: var(--r-info);

    --border-color: var(--r-hairline);
    --border-light: rgba(255, 255, 255, 0.06);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg: var(--r-shadow-menu);

    --highlight-bg: rgba(74, 158, 255, 0.22);

    --glass-bg: var(--r-material);
    --glass-bg-soft: var(--r-fill);
    --glass-border: var(--r-hairline);
    --glass-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);

    --page-header-bg-top: transparent;
    --page-header-bg-bottom: transparent;
    --page-header-border: transparent;
    --page-header-shadow: none;

    --stream-line: var(--r-hairline);
    --stream-item-bg-top: var(--r-surface);
    --stream-item-bg-bottom: var(--r-surface);
    --stream-item-border: var(--r-hairline);
    --stream-item-shadow: none;
    --stream-dot-ring: var(--r-canvas);

    --shell-bg: var(--r-canvas);
    --shell-card: var(--r-surface);
    --shell-border: var(--r-hairline);
    --shell-shadow: none;
    --shell-radius: var(--r-radius-card);

    --module-accent: var(--r-accent);
    --module-radius: var(--r-radius-card);
    --module-radius-sm: var(--r-radius);
    --module-shadow: var(--r-shadow-card);

    --accounting-radius: var(--r-radius-card);
    --accounting-radius-sm: var(--r-radius);
    --accounting-shadow: none;

    --bs-body-font-family: var(--r-font);
    --bs-border-radius: var(--r-radius);
    --bs-breadcrumb-divider: "›";

    /* Bootstrap-Variablen an das Theme binden (sonst dunkel-auf-dunkel bei var(--bs-…)) */
    --bs-body-color: var(--r-text);
    --bs-body-color-rgb: 243, 243, 245;
    --bs-body-bg: var(--r-canvas);
    --bs-body-bg-rgb: 25, 25, 27;
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(235, 235, 245, 0.64);
    --bs-secondary-color-rgb: 235, 235, 245;
    --bs-secondary-bg: #2a2a2e;
    --bs-secondary-bg-rgb: 42, 42, 46;
    --bs-tertiary-color: rgba(235, 235, 245, 0.46);
    --bs-tertiary-color-rgb: 235, 235, 245;
    --bs-tertiary-bg: #212124;
    --bs-tertiary-bg-rgb: 33, 33, 36;
    --bs-border-color: var(--r-hairline);
    --bs-border-color-translucent: var(--r-hairline);
    --bs-heading-color: inherit;
    --bs-link-color: var(--r-accent-text);
    --bs-link-color-rgb: 98, 173, 255;
    --bs-link-hover-color: var(--r-accent-text);
    --bs-code-color: var(--r-text-2);
    --bs-highlight-bg: rgba(255, 214, 10, 0.28);
    --bs-highlight-color: var(--r-text);
    --bs-table-active-bg: var(--r-accent-tint);
    --bs-form-check-bg: var(--bg-input);
}

html.ui-refine[data-theme="light"] {
    --r-canvas: #f6f6f8;
    --r-sidebar: #ededf0;
    --r-surface: #ffffff;
    --r-raised: #ffffff;
    --r-fill: rgba(118, 118, 128, 0.12);
    --r-fill-strong: rgba(118, 118, 128, 0.20);
    --r-hover: rgba(0, 0, 0, 0.04);
    --r-press: rgba(0, 0, 0, 0.08);
    --r-hairline: rgba(0, 0, 0, 0.085);
    --r-separator: rgba(0, 0, 0, 0.13);

    --r-text: #1d1d1f;
    --r-text-2: #48484d;
    --r-text-3: #6e6e73;

    /* Gleicher Farbton wie #4a9eff, abgedunkelt für Kontrast auf Weiss (≥ 4.5:1) */
    --r-accent: #0a72e8;
    --r-accent-fill: #0a72e8;
    --r-accent-fill-hover: #0865d0;
    --r-accent-button: #0a72e8;                  /* Weiss darauf 4.58:1 */
    --r-accent-button-hover: #0865d0;
    --r-accent-text: #0a6cdc;
    --r-accent-tint: rgba(10, 114, 232, 0.10);
    --r-accent-tint-strong: rgba(10, 114, 232, 0.18);

    --r-success: #1f8a3a;
    --r-warning: #b25e00;
    --r-danger: #d7262e;
    --r-info: #0b7bab;

    --r-material: rgba(246, 246, 248, 0.78);
    --r-menu: rgba(255, 255, 255, 0.95);
    --r-scrim: rgba(0, 0, 0, 0.28);

    --r-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
    --r-shadow-menu: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 10px 32px rgba(0, 0, 0, 0.14);
    --r-shadow-modal: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 28px 80px rgba(0, 0, 0, 0.2);
    --r-shadow-seg: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.06);

    --bg-secondary: #ffffff;
    --bg-tertiary: #f0f0f3;
    --bg-input: #ffffff;
    --text-inverse: #ffffff;
    --accent-primary-hover: #0865d0;
    --border-light: rgba(0, 0, 0, 0.05);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08);

    --highlight-bg: rgba(10, 114, 232, 0.12);
    --glass-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);

    --bs-body-color-rgb: 29, 29, 31;
    --bs-body-bg-rgb: 246, 246, 248;
    --bs-emphasis-color: #000000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-secondary-color: rgba(60, 60, 67, 0.76);
    --bs-secondary-color-rgb: 60, 60, 67;
    --bs-secondary-bg: #f0f0f3;
    --bs-secondary-bg-rgb: 240, 240, 243;
    --bs-tertiary-color: rgba(60, 60, 67, 0.55);
    --bs-tertiary-color-rgb: 60, 60, 67;
    --bs-tertiary-bg: #fafafb;
    --bs-tertiary-bg-rgb: 250, 250, 251;
    --bs-link-color-rgb: 10, 108, 220;
    --bs-highlight-bg: rgba(255, 204, 0, 0.3);
}

/* ────────────────────────────────────────────────────────────
   2. Typografie
   Inter mit optischer Grösse; Laufweite pro Grösse, nicht global.
   ──────────────────────────────────────────────────────────── */
html.ui-refine,
html.ui-refine body {
    font-family: var(--r-font);
    word-spacing: normal;
    font-optical-sizing: auto;
}

:where(.ui-refine) body {
    font-size: 0.9375rem;              /* 15px – dichte, ruhige Arbeits-UI */
    line-height: 1.47;
    letter-spacing: -0.006em;
    background: var(--r-canvas) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Hell: app.css setzt einen Verlauf mit höherer Spezifität – auch der Kalender
   läuft jetzt im Designsystem, also gilt die Regel ohne Ausnahme. */
html:where(.ui-refine)[data-theme="light"] body {
    background: var(--r-canvas) !important;
}

:where(.ui-refine) h1,
:where(.ui-refine) .h1 {
    font-size: 1.75rem;
    line-height: 1.14;
    font-weight: 700;
    letter-spacing: -0.024em;
}

:where(.ui-refine) h2,
:where(.ui-refine) .h2 {
    font-size: 1.375rem;
    line-height: 1.2;
    font-weight: 650;
    letter-spacing: -0.019em;
}

:where(.ui-refine) h3,
:where(.ui-refine) .h3 {
    font-size: 1.1875rem;
    line-height: 1.26;
    font-weight: 650;
    letter-spacing: -0.015em;
}

:where(.ui-refine) h4,
:where(.ui-refine) .h4 {
    font-size: 1.0625rem;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.011em;
}

:where(.ui-refine) h5,
:where(.ui-refine) .h5 {
    font-size: 0.9375rem;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: -0.008em;
}

:where(.ui-refine) h6,
:where(.ui-refine) .h6 {
    font-size: 0.8125rem;
    line-height: 1.38;
    font-weight: 600;
    letter-spacing: 0;
}

:where(.ui-refine) small,
:where(.ui-refine) .small {
    font-size: 0.8125rem;
    letter-spacing: 0;
}

:where(.ui-refine) strong,
:where(.ui-refine) b {
    font-weight: 600;
}

/* Beträge: Ziffern tabellarisch, damit Spalten sauber fluchten.
   (Nicht auf ganze Tabellen – Inter setzt sonst auch Bindestriche in IDs breit.) */
:where(.ui-refine) .text-end,
:where(.ui-refine) .font-monospace,
:where(.ui-refine) [data-amount] {
    font-variant-numeric: tabular-nums;
}

/* Native Bedienelemente (Checkboxen, Scrollbars, Datumsfelder) im passenden Modus */
html.ui-refine[data-theme="dark"] {
    color-scheme: dark;
}

html.ui-refine[data-theme="light"] {
    color-scheme: light;
}

html.ui-refine input[type="checkbox"],
html.ui-refine input[type="radio"] {
    accent-color: var(--r-accent-fill);
}

:where(.ui-refine) .text-primary {
    color: var(--r-accent-text) !important;
}

:where(.ui-refine) ::selection {
    background: var(--r-accent-tint-strong);
}

/* ────────────────────────────────────────────────────────────
   3. Shell: Sidebar · Topbar · Inhalt
   ──────────────────────────────────────────────────────────── */

/* Sidebar = schwerere, ruhige Struktur-Fläche (kein Schatten, nur Haarlinie) */
:where(.ui-refine) .app-sidebar {
    background: var(--r-sidebar);
    border-right: 1px solid var(--r-hairline);
    box-shadow: none;
}

@media (min-width: 992px) {
    html:where(.ui-refine):not(.sidebar-collapsed) .app-sidebar {
        width: 256px;
    }
}

@media (min-width: 992px) and (max-width: 1440px) {
    html:where(.ui-refine):not(.sidebar-collapsed) .app-sidebar {
        width: 232px;
    }
}

:where(.ui-refine) .app-sidebar .offcanvas-body,
:where(.ui-refine) .app-sidebar .offcanvas-header {
    background: transparent !important;
}

:where(.ui-refine) .app-sidebar .offcanvas-header {
    border-bottom: 1px solid var(--r-hairline) !important;
}

:where(.ui-refine) .app-sidebar .brand {
    padding: var(--r-4) var(--r-4) var(--r-3);
    gap: var(--r-3);
}

:where(.ui-refine) .app-sidebar .brand-mark {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 15px;
    color: #fff;
    background: linear-gradient(180deg, #5aa8ff 0%, #2f86ee 100%);
    border: 0;
    box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
}

:where(.ui-refine) .app-sidebar .brand a {
    font-size: 0.9375rem;
    font-weight: 650;
    letter-spacing: -0.011em;
    color: var(--r-text) !important;
}

:where(.ui-refine) .app-sidebar .brand .small {
    font-size: 0.75rem;
    line-height: 1.3;
}

/* Abschnittstitel: Satzschreibung, klein, zurückhaltend */
:where(.ui-refine) .app-sidebar .section-title,
:where(.ui-refine) .app-sidebar .section-title.accounting-sidebar-section-label {
    padding: var(--r-4) 18px var(--r-1);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--r-text-3);
}

/* Navigationszeilen */
:where(.ui-refine) .app-sidebar .nav-link {
    position: relative;
    margin: 1px var(--r-2);
    padding: 6px 10px;
    min-height: 32px;
    gap: 10px;
    border: 0;
    border-radius: var(--r-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.006em;
    word-spacing: normal;
    color: var(--r-text) !important;
    background: transparent !important;
    transition: background-color var(--r-fast) ease, color var(--r-fast) ease;
}

@media (max-width: 991.98px) {
    :where(.ui-refine) .app-sidebar .nav-link {
        min-height: 44px;
        font-size: 0.9375rem;
    }
}

:where(.ui-refine) .app-sidebar .nav-link > i,
:where(.ui-refine) .app-sidebar .nav-link > span > i,
:where(.ui-refine) .app-sidebar .nav-link .beleg-scan-icon {
    width: 1.15rem;
    text-align: center;
    font-size: 1rem;
    color: var(--r-accent);
    opacity: 1;
    flex-shrink: 0;
}

:where(.ui-refine) .app-sidebar .nav-link .chev {
    color: var(--r-text-3);
    font-size: 0.75rem;
    width: auto;
}

:where(.ui-refine) .app-sidebar .nav-link:hover {
    background: var(--r-hover) !important;
}

/* Sofortiges Feedback beim Drücken – ohne Übergang */
:where(.ui-refine) .app-sidebar .nav-link:active {
    background: var(--r-press) !important;
    transition: none;
}

:where(.ui-refine) .app-sidebar .nav-link.active {
    background: var(--r-accent-tint) !important;
    border: 0;
    font-weight: 600;
}

:where(.ui-refine) .app-sidebar .nav-group-toggle.active {
    background: transparent !important;
}

:where(.ui-refine) .app-sidebar .nav-group {
    margin: 0 0 var(--r-2) 0;
    padding-left: 14px;
    border-left: 0;
}

:where(.ui-refine) .app-sidebar .nav-group .nav-link {
    margin: 1px var(--r-2);
}

/* Zähler: Mail = neutral (Info), PM-Badge = rot (Handlung nötig) */
:where(.ui-refine) .app-sidebar .nav-link .badge.text-bg-danger {
    background: transparent !important;
    color: var(--r-text-3) !important;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0;
    min-width: 0;
}

:where(.ui-refine) .app-sidebar .nav-link.active .badge.text-bg-danger {
    color: var(--r-text-2) !important;
}

:where(.ui-refine) .app-sidebar .nav-link .pm-nav-badge {
    background: var(--r-danger);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Mobile-Drawer: «eingeklappt» gilt nur für Desktop – Zähler bleiben rechts in der Zeile */
@media (max-width: 991.98px) {
    html.ui-refine.sidebar-collapsed .app-sidebar .nav-link .pm-nav-badge {
        position: static;
        margin-left: auto;
        min-width: 1.25rem;
        height: 1.25rem;
        padding: 0 0.35rem;
        font-size: 0.6875rem;
        line-height: 1.25rem;
    }
}

:where(.ui-refine) .app-sidebar .sidebar-footer {
    padding: var(--r-3) var(--r-3) var(--r-4);
    border-top: 1px solid var(--r-hairline);
}

/* Eingeklappte Leiste: Fussknöpfe nur als Symbol (Text ragte abgeschnitten heraus); Name bleibt über title/aria-label */
@media (min-width: 992px) {
    html.ui-refine.sidebar-collapsed .app-sidebar .sidebar-footer .btn > span {
        display: none !important;
    }
    html.ui-refine.sidebar-collapsed .app-sidebar .sidebar-footer .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 36px;
        padding: 0;
    }
}

/* Buchhaltung: Teal-Rail bleibt Identität, aber ohne Leuchten */
:where(.ui-refine) .app-shell--accounting .app-sidebar .nav-link.active {
    background: color-mix(in srgb, var(--accounting-accent) 14%, transparent) !important;
}

:where(.ui-refine) .app-shell--accounting .app-sidebar .nav-link.active::before {
    left: 3px;
    top: 9px;
    bottom: 9px;
    box-shadow: none;
}

:where(.ui-refine) .app-shell--accounting .app-sidebar .nav-link > i {
    color: var(--accounting-accent);
}

/* Topbar: Material über scrollendem Inhalt. Haarlinie erst beim Scrollen. */
:where(.ui-refine) .app-topbar {
    background: var(--r-material);
    border-bottom: 1px solid transparent;
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    transition: border-color var(--r-base) ease, background-color var(--r-base) ease;
}

html:where(.ui-refine).is-scrolled .app-topbar {
    border-bottom-color: var(--r-hairline);
}

:where(.ui-refine) .app-topbar-inner {
    min-height: 52px;
    padding: var(--r-2) var(--r-4);
    gap: var(--r-2);
}

/* Werkzeug-Knöpfe in der Topbar: randlos, Fläche erst bei Hover */
:where(.ui-refine) .app-topbar .btn-outline-secondary {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--r-text-2) !important;
    min-height: 32px;
    padding: 5px 9px;
    border-radius: var(--r-radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
}

:where(.ui-refine) .app-topbar .btn-outline-secondary:hover {
    background: var(--r-hover) !important;
    color: var(--r-text) !important;
}

:where(.ui-refine) .app-topbar .btn-outline-secondary:active,
:where(.ui-refine) .app-topbar .btn-outline-secondary.show {
    background: var(--r-press) !important;
    color: var(--r-text) !important;
}

:where(.ui-refine) .app-topbar .btn-outline-secondary .bi {
    font-size: 1rem;
}

:where(.ui-refine) .app-topbar #appCmdkBtn .text-muted {
    font-size: 0.75rem;
    padding: 1px 5px;
    border-radius: 5px;
    background: var(--r-fill);
    color: var(--r-text-3) !important;
}

/* Beleg-Scan: wichtig, aber ohne Leuchtrahmen */
:where(.ui-refine) .mobile-scan-topbar-btn {
    border: 0;
    border-radius: 12px;
    background: var(--r-accent-tint);
    color: var(--r-accent) !important;
    box-shadow: none;
    transition: background-color var(--r-fast) ease, transform 90ms ease-out;
}

:where(.ui-refine) .mobile-scan-topbar-btn:hover,
:where(.ui-refine) .mobile-scan-topbar-btn:focus-visible {
    background: var(--r-accent-tint-strong);
    color: var(--r-accent) !important;
}

:where(.ui-refine) .mobile-scan-topbar-btn:active {
    transform: scale(0.94);
}

:where(.ui-refine) .app-topbar-avatar-btn {
    border: 0 !important;
    background: transparent !important;
}

/* Grosser Titel → kompakter Titel in der Topbar, sobald er aus dem Blick scrollt */
@media (min-width: 992px) {
    :where(.ui-refine) .app-topbar-pagetitle {
        display: block;
        min-width: 0;
        max-width: 40vw;
        margin-left: var(--r-2);
        font-size: 0.9375rem;
        font-weight: 600;
        letter-spacing: -0.011em;
        color: var(--r-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        pointer-events: none;
    }
}

/* iOS-Prinzip «Large Title»: Solange der grosse Seitentitel sichtbar ist, bleibt die Topbar ohne Titel.
   Scrollt er weg, erscheint er klein in der Topbar (Klassen setzt das Layout-Skript). */
:where(.ui-refine) .app-topbar-pagetitle {
    transition: opacity var(--r-base) var(--r-ease), translate var(--r-base) var(--r-ease);
}

html:where(.ui-refine).has-large-title:not(.is-title-condensed) .app-topbar-pagetitle {
    opacity: 0;
    translate: 0 4px;
}

@media (max-width: 991.98px) {
    :where(.ui-refine) .app-topbar-pagetitle {
        font-size: 1.0625rem;
        font-weight: 600;
        letter-spacing: -0.015em;
        word-spacing: normal;
    }

    :where(.ui-refine) .app-topbar-inner {
        padding: var(--r-1) 10px;
    }

    :where(.ui-refine) .app-topbar .app-topbar-icon-btn,
    :where(.ui-refine) .app-topbar .app-topbar-avatar-btn {
        padding: 0;
        border-radius: 12px;
    }

    :where(.ui-refine) .app-topbar .app-topbar-icon-btn .bi {
        font-size: 1.375rem;
        color: var(--r-accent);
    }
}

:where(.ui-refine) .app-content {
    padding: var(--r-5) var(--r-6) var(--r-8);
}

@media (max-width: 1440px) {
    :where(.ui-refine) .app-content {
        padding-left: var(--r-4);
        padding-right: var(--r-4);
    }
}

@media (max-width: 991.98px) {
    :where(.ui-refine) .app-content {
        padding: var(--r-3) var(--r-3) calc(132px + env(safe-area-inset-bottom, 0px));
    }
}

/* Mobile Tab-Bar */
:where(.ui-refine) .app-mobile-bottomnav {
    background: var(--r-material);
    border-top: 1px solid var(--r-hairline);
    box-shadow: none;
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
}

:where(.ui-refine) .app-mobile-bottomnav a,
:where(.ui-refine) .app-mobile-bottomnav button {
    color: var(--r-text-3) !important;
    transition: transform 90ms ease-out, color var(--r-fast) ease;
}

:where(.ui-refine) .app-mobile-bottomnav i {
    font-size: 1.3125rem;
}

:where(.ui-refine) .app-mobile-bottomnav .label {
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    word-spacing: normal;
    color: inherit;
}

:where(.ui-refine) .app-mobile-bottomnav .active,
:where(.ui-refine) .app-mobile-bottomnav .active i,
:where(.ui-refine) .app-mobile-bottomnav .active .label {
    color: var(--r-accent) !important;
}

/* ────────────────────────────────────────────────────────────
   4. Seitenkopf · Tabs · mobile Kopfzeile
   Seitenkopf ist Typografie auf dem Grund – keine Box.
   ──────────────────────────────────────────────────────────── */
:where(.ui-refine) .page-header {
    gap: var(--r-4);
    padding: var(--r-1) 2px var(--r-4);
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

:where(.ui-refine) .page-header h1,
:where(.ui-refine) .page-header .h1,
:where(.ui-refine) .page-header .h2,
:where(.ui-refine) .page-header .h3,
:where(.ui-refine) .page-header .h4 {
    font-size: 1.75rem;
    line-height: 1.14;
    font-weight: 700;
    letter-spacing: -0.024em;
}

@media (max-width: 1280px) {
    :where(.ui-refine) .page-header h1,
    :where(.ui-refine) .page-header .h1,
    :where(.ui-refine) .page-header .h2,
    :where(.ui-refine) .page-header .h3,
    :where(.ui-refine) .page-header .h4 {
        font-size: 1.5rem;
    }
}

:where(.ui-refine) .page-header-subtitle {
    margin-top: var(--r-1);
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--r-text-2);
}

:where(.ui-refine) .page-header .breadcrumb {
    margin-bottom: 2px;
    font-size: 0.8125rem;
    font-weight: 500;
}

:where(.ui-refine) .breadcrumb-item + .breadcrumb-item::before {
    color: var(--r-text-3);
    padding-right: 0.4rem;
}

:where(.ui-refine) .breadcrumb-item + .breadcrumb-item {
    padding-left: 0.4rem;
}

:where(.ui-refine) .page-header .breadcrumb a {
    color: var(--r-text-3) !important;
}

:where(.ui-refine) .page-header .breadcrumb a:hover {
    color: var(--r-text) !important;
    opacity: 1;
}

:where(.ui-refine) .page-header .breadcrumb .active {
    color: var(--r-text-3) !important;
}

@media (min-width: 1281px) {
    :where(.ui-refine) .page-header {
        align-items: center;
    }
}

/* Schmal: Titel oben, Aktionen darunter als Zeile (nicht zu vollbreiten Balken gestreckt) */
@media (max-width: 1280px) {
    :where(.ui-refine) .page-header {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    :where(.ui-refine) .page-header > :first-child {
        flex: 1 1 100%;
    }

    :where(.ui-refine) .page-header h1.d-flex {
        flex-wrap: wrap;
        column-gap: 0.5rem;
    }
}

@media (max-width: 576px) {
    :where(.ui-refine) .page-header--detail h1,
    :where(.ui-refine) .page-header--detail .page-header-title,
    :where(.ui-refine) .page-header h1.d-flex {
        font-size: 1.5rem;
    }
}

/* Ältere Seitenköpfe ohne .page-header (d-flex + h1): gleiche Ordnung – Titel zuerst, Aktionen umbrechen */
:where(.ui-refine) .app-content h1 {
    margin-bottom: 0.25rem;
}

:where(.ui-refine) .app-content .d-flex.justify-content-between:has(> div > h1, > h1) {
    flex-wrap: wrap;
    column-gap: var(--r-4);
    row-gap: var(--r-3);
}

:where(.ui-refine) .app-content .d-flex.justify-content-between:has(> div > h1, > h1) > :first-child {
    flex: 1 1 auto;
    min-width: min(100%, 18rem);
}

:where(.ui-refine) .app-content .d-flex.justify-content-between:has(> div > h1, > h1) > :not(:first-child) {
    flex-wrap: wrap;
}

@media (max-width: 576px) {
    :where(.ui-refine) .app-content .d-flex.justify-content-between > div > h1 {
        font-size: 1.5rem;
        overflow-wrap: anywhere;
    }
}

/* Seitenkopf bricht immer sauber um: Titel behält Mindestbreite, Aktionen rutschen darunter */
:where(.ui-refine) .page-header {
    flex-wrap: wrap;
}

:where(.ui-refine) .page-header > .page-header-main,
:where(.ui-refine) .page-header > .min-w-0,
:where(.ui-refine) .page-header > div:first-child {
    flex: 1 1 22rem;
    min-width: min(100%, 22rem);
}

:where(.ui-refine) .page-header > .page-header-actions,
:where(.ui-refine) .page-header > .d-flex.gap-2.flex-wrap.justify-content-end {
    flex: 0 1 auto;
    max-width: 100%;
}

/* Detailseiten: Aktionen unter dem Titel beginnen links (keine verwaisten Knöpfe rechts) */
:where(.ui-refine) .page-header--detail > .d-flex.gap-2.flex-wrap.justify-content-end,
:where(.ui-refine) .page-header--detail .page-header-actions {
    justify-content: flex-start !important;
}

/* Segmentierte Steuerung statt leuchtender Pillen */
:where(.ui-refine) .page-tabs {
    width: fit-content;
    max-width: 100%;
    gap: 2px;
    padding: 3px;
    border: 0;
    border-radius: var(--r-radius);
    background: var(--r-fill);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

:where(.ui-refine) .page-tabs .nav-link {
    min-height: 30px;
    padding: 5px 12px !important;
    border: 0;
    border-radius: 7px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--r-text-2) !important;
    transition: background-color var(--r-fast) ease, color var(--r-fast) ease, box-shadow var(--r-fast) ease;
}

:where(.ui-refine) .page-tabs .nav-link:hover {
    background: var(--r-hover) !important;
    color: var(--r-text) !important;
}

:where(.ui-refine) .page-tabs .nav-link.active {
    background: var(--r-raised) !important;
    color: var(--r-text) !important;
    font-weight: 600;
    box-shadow: var(--r-shadow-seg);
}

html:where(.ui-refine)[data-theme="dark"] .page-tabs .nav-link.active {
    background: rgba(255, 255, 255, 0.16) !important;
}

/* Mobile Kopfzeile = Werkzeugleiste unter der Topbar (keine zweite schwebende Box).
   Doppelten Titel (identisch mit Topbar) blendet das Layout-Skript aus → .is-dup-title */
:where(.ui-refine) .page-mobile-topbar {
    position: relative;
    top: auto;
    gap: var(--r-2);
    min-height: 44px;
    padding: 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

:where(.ui-refine) .page-mobile-title .page-mobile-title-main {
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.18;
    letter-spacing: -0.02em;
    word-spacing: normal;
}

:where(.ui-refine) .page-mobile-title .page-mobile-title-sub {
    font-size: 0.8125rem;
    letter-spacing: 0;
    word-spacing: normal;
    color: var(--r-text-3);
}

/* Mobile grosser Titel – Titel immer zuerst, Werkzeuge rechts */
:where(.ui-refine) .page-mobile-topbar .page-mobile-title {
    order: -1;
}

/* Mobile grosser Titel */
:where(.ui-refine) .page-mobile-topbar.is-large-title {
    align-items: flex-end;
    padding-top: var(--r-1);
}

:where(.ui-refine) .page-mobile-topbar.is-large-title .page-mobile-title-main {
    font-size: 1.75rem;
    line-height: 1.12;
    letter-spacing: -0.024em;
}

@media (max-width: 991.98px) {
    :where(.ui-refine) .page-header h1,
    :where(.ui-refine) .page-header .h1,
    :where(.ui-refine) .page-header .h2,
    :where(.ui-refine) .page-header .h3,
    :where(.ui-refine) .page-header .h4 {
        font-size: 1.75rem;
    }
}

/* Icon-Knöpfe in mobilen Leisten: 40px Trefferfläche, ruhige Füllung */
:where(.ui-refine) .page-mobile-topbar .btn-icon,
:where(.ui-refine) .pwa-icon-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    font-size: 1.0625rem;
}

:where(.ui-refine) .pwa-icon-btn {
    background: var(--r-fill);
    color: var(--r-text) !important;
    transition: background-color var(--r-fast) ease, transform 90ms ease-out;
}

:where(.ui-refine) .pwa-icon-btn--primary {
    background: var(--r-accent-fill);
    color: #fff !important;
}

:where(.ui-refine) .pwa-icon-btn:active {
    transform: scale(0.94);
}

:where(.ui-refine) .page-mobile-topbar .btn-group > .btn-icon {
    border-radius: 0;
}

:where(.ui-refine) .page-mobile-topbar .btn-group > .btn-icon:first-child {
    border-radius: 12px 0 0 12px;
}

:where(.ui-refine) .page-mobile-topbar .btn-group > .btn-icon:last-child {
    border-radius: 0 12px 12px 0;
}

:where(.ui-refine) .page-mobile-topbar .btn-group > .dropdown-toggle-split {
    width: 28px;
    min-width: 28px;
}

/* Tickets-/PWA-Kopf: Kicker in Satzschreibung */
:where(.ui-refine) .pwa-page-kicker {
    font-size: 0.8125rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    word-spacing: normal;
    color: var(--r-text-3);
}

:where(.ui-refine) .pwa-page-count {
    font-size: 1.375rem;
    letter-spacing: -0.02em;
    word-spacing: normal;
}

/* Standard-Bootstrap-Navs */
:where(.ui-refine) .nav-tabs {
    border-bottom: 1px solid var(--r-hairline);
    gap: var(--r-1);
}

:where(.ui-refine) .nav-tabs .nav-link {
    border: 0;
    border-radius: 0;
    margin-bottom: -1px;
    padding: var(--r-2) var(--r-3) !important;
    font-weight: 500;
    background: transparent !important;
    box-shadow: inset 0 -2px 0 transparent;
    transition: color var(--r-fast) ease, box-shadow var(--r-fast) ease;
}

:where(.ui-refine) .nav-tabs .nav-link.active {
    color: var(--r-text) !important;
    box-shadow: inset 0 -2px 0 var(--r-accent);
}

:where(.ui-refine) .nav-pills .nav-link {
    border-radius: var(--r-radius-sm);
    font-weight: 500;
}

:where(.ui-refine) .nav-pills .nav-link.active {
    background: var(--r-accent-tint) !important;
    color: var(--r-accent-text) !important;
}

/* ────────────────────────────────────────────────────────────
   5. Buttons – flach, klare Rollen, Feedback beim Drücken
   ──────────────────────────────────────────────────────────── */
:where(.ui-refine) .btn {
    border-radius: var(--r-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: -0.006em;
    line-height: 1.3;
    box-shadow: none;
    filter: none;
    transition:
        background-color var(--r-fast) ease,
        border-color var(--r-fast) ease,
        color var(--r-fast) ease,
        box-shadow var(--r-fast) ease,
        opacity var(--r-fast) ease,
        transform 90ms ease-out;
}

:where(.ui-refine) .btn:hover {
    filter: none;
}

:where(.ui-refine) .btn:active:not(:disabled):not(.disabled) {
    transform: scale(0.97);
    transition-duration: 0ms, 0ms, 0ms, 0ms, 0ms, 60ms;
}

:where(.ui-refine) .btn:disabled,
:where(.ui-refine) .btn.disabled {
    opacity: 0.42;
}

:where(.ui-refine) .btn-sm {
    border-radius: 7px;
    font-size: 0.8125rem;
}

:where(.ui-refine) .btn-lg {
    border-radius: var(--r-radius);
    font-size: 1rem;
}

@media (max-width: 576px) {
    :where(.ui-refine) .btn {
        font-size: 0.9375rem;
    }

    :where(.ui-refine) .btn-sm {
        font-size: 0.8125rem;
    }
}

/* Primär */
:where(.ui-refine) .btn-primary {
    background: var(--r-accent-fill) !important;
    border-color: var(--r-accent-fill) !important;
    color: var(--r-on-accent) !important;
    font-weight: 600;
    box-shadow: none;
}

:where(.ui-refine) .btn-primary:hover {
    background: var(--r-accent-fill-hover) !important;
    border-color: var(--r-accent-fill-hover) !important;
}

/* Sekundär (gefüllt) */
:where(.ui-refine) .btn-secondary {
    background: var(--r-fill-strong) !important;
    border-color: transparent !important;
    color: var(--r-text) !important;
}

:where(.ui-refine) .btn-secondary:hover {
    background: color-mix(in srgb, var(--r-fill-strong) 100%, var(--r-text) 6%) !important;
}

/* Outline-Sekundär → graue Fläche, kein Rahmen (grösster Beruhigungseffekt) */
:where(.ui-refine) .btn-outline-secondary,
:where(.ui-refine) .btn-light {
    background: var(--r-fill) !important;
    border-color: transparent !important;
    color: var(--r-text) !important;
}

:where(.ui-refine) .btn-outline-secondary:hover,
:where(.ui-refine) .btn-light:hover {
    background: var(--r-fill-strong) !important;
    color: var(--r-text) !important;
}

:where(.ui-refine) .btn-outline-secondary.active,
:where(.ui-refine) .btn-outline-secondary.show,
:where(.ui-refine) .btn-check:checked + .btn-outline-secondary {
    background: var(--r-accent-tint) !important;
    color: var(--r-accent-text) !important;
}

/* Outline-Primär → getönte Fläche */
:where(.ui-refine) .btn-outline-primary {
    background: var(--r-accent-tint) !important;
    border-color: transparent !important;
    color: var(--r-accent-text) !important;
}

:where(.ui-refine) .btn-outline-primary:hover,
:where(.ui-refine) .btn-outline-primary.active,
:where(.ui-refine) .btn-check:checked + .btn-outline-primary {
    background: var(--r-accent-tint-strong) !important;
    color: var(--r-accent-text) !important;
}

/* Destruktiv / Erfolg */
:where(.ui-refine) .btn-danger {
    background: var(--r-danger) !important;
    border-color: var(--r-danger) !important;
    color: #fff !important;
}

:where(.ui-refine) .btn-success {
    background: var(--r-success) !important;
    border-color: var(--r-success) !important;
    color: #fff !important;
}

html:where(.ui-refine)[data-theme="dark"] .btn-success {
    color: #06210f !important;
}

:where(.ui-refine) .btn-outline-danger {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--r-danger) !important;
}

:where(.ui-refine) .btn-outline-danger:hover {
    background: color-mix(in srgb, var(--r-danger) 12%, transparent) !important;
    color: var(--r-danger) !important;
}

:where(.ui-refine) .btn-outline-success {
    background: color-mix(in srgb, var(--r-success) 12%, transparent) !important;
    border-color: transparent !important;
    color: var(--r-success) !important;
}

:where(.ui-refine) .btn-outline-success:hover {
    background: color-mix(in srgb, var(--r-success) 20%, transparent) !important;
}

:where(.ui-refine) .btn-outline-info,
:where(.ui-refine) .btn-outline-warning,
:where(.ui-refine) .btn-outline-dark,
:where(.ui-refine) .btn-outline-light {
    background: var(--r-fill) !important;
    border-color: transparent !important;
    color: var(--r-text) !important;
}

:where(.ui-refine) .btn-outline-info:hover,
:where(.ui-refine) .btn-outline-warning:hover,
:where(.ui-refine) .btn-outline-dark:hover,
:where(.ui-refine) .btn-outline-light:hover {
    background: var(--r-fill-strong) !important;
    color: var(--r-text) !important;
}

/* Semantik bleibt im Symbol, nicht in der ganzen Fläche */
:where(.ui-refine) .btn-outline-info > .bi { color: var(--r-info); }
:where(.ui-refine) .btn-outline-warning > .bi { color: var(--r-warning); }
:where(.ui-refine) .btn-outline-success > .bi { color: var(--r-success); }

/* btn-dark dient in Views meist als «ausgewählt» → wie Auswahl darstellen */
:where(.ui-refine) .btn-dark {
    background: var(--r-accent-tint-strong) !important;
    border-color: transparent !important;
    color: var(--r-accent-text) !important;
    font-weight: 600;
}

:where(.ui-refine) .btn-dark:hover {
    background: color-mix(in srgb, var(--r-accent) 32%, transparent) !important;
}

:where(.ui-refine) .btn-info,
:where(.ui-refine) .btn-warning {
    background: var(--r-fill-strong) !important;
    border-color: transparent !important;
    color: var(--r-text) !important;
}

:where(.ui-refine) .btn-link {
    color: var(--r-accent-text) !important;
    text-decoration: none;
}

:where(.ui-refine) .btn-link:hover {
    opacity: 0.8;
}

/* Gruppen: verbundene Segmente mit 1px Luft */
:where(.ui-refine) .btn-group > .btn-outline-secondary + .btn-outline-secondary,
:where(.ui-refine) .btn-group > .btn-secondary + .btn-outline-secondary,
:where(.ui-refine) .btn-group > .btn-outline-secondary + .btn-secondary {
    margin-left: 1px;
}

:where(.ui-refine) .btn-close {
    border-radius: 999px;
    opacity: 0.55;
    transition: opacity var(--r-fast) ease, background-color var(--r-fast) ease;
}

:where(.ui-refine) .btn-close:hover {
    opacity: 0.9;
    background-color: var(--r-hover);
}

/* ────────────────────────────────────────────────────────────
   6. Formulare
   ──────────────────────────────────────────────────────────── */
:where(.ui-refine) .form-label {
    margin-bottom: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--r-text-2) !important;
}

:where(.ui-refine) .form-control,
:where(.ui-refine) .form-select,
:where(.ui-refine) .app-content .form-control,
:where(.ui-refine) .app-content .form-select {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--r-separator) !important;
    border-radius: var(--r-radius-sm);
    color: var(--r-text) !important;
    font-size: 0.9375rem;
    letter-spacing: -0.006em;
    transition: border-color var(--r-fast) ease, box-shadow var(--r-fast) ease, background-color var(--r-fast) ease;
}

html:where(.ui-refine)[data-theme="dark"] .app-content .form-control,
html:where(.ui-refine)[data-theme="dark"] .app-content .form-select,
html:where(.ui-refine)[data-theme="dark"] .app-content .input-group-text {
    background-color: var(--bg-input) !important;
    color: var(--r-text) !important;
}

:where(.ui-refine) .form-control-sm,
:where(.ui-refine) .form-select-sm {
    font-size: 0.8125rem;
    border-radius: 7px;
}

:where(.ui-refine) .form-control:hover:not(:focus):not(:disabled),
:where(.ui-refine) .form-select:hover:not(:focus):not(:disabled) {
    border-color: color-mix(in srgb, var(--r-text) 26%, transparent) !important;
}

:where(.ui-refine) .form-control:focus,
:where(.ui-refine) .form-select:focus {
    border-color: var(--r-accent) !important;
    box-shadow: 0 0 0 3.5px var(--r-accent-tint-strong) !important;
    outline: none;
}

:where(.ui-refine) .form-control:focus-visible,
:where(.ui-refine) .form-select:focus-visible {
    outline: none;
    border-radius: var(--r-radius-sm);
}

:where(.ui-refine) .form-control::placeholder {
    color: var(--r-text-3) !important;
    opacity: 1;
}

:where(.ui-refine) .form-control:disabled,
:where(.ui-refine) .form-select:disabled,
:where(.ui-refine) .form-control[readonly] {
    background-color: var(--r-fill) !important;
    color: var(--r-text-2) !important;
}

:where(.ui-refine) .input-group-text {
    background: var(--r-fill) !important;
    border: 1px solid var(--r-separator) !important;
    color: var(--r-text-2) !important;
    font-size: 0.875rem;
}

:where(.ui-refine) .is-invalid,
:where(.ui-refine) .was-validated .form-control:invalid {
    border-color: var(--r-danger) !important;
}

:where(.ui-refine) .is-invalid:focus {
    box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--r-danger) 24%, transparent) !important;
}

:where(.ui-refine) .invalid-feedback {
    font-size: 0.8125rem;
    color: var(--r-danger) !important;
}

:where(.ui-refine) .form-text {
    font-size: 0.8125rem;
    color: var(--r-text-3);
}

/* Checkbox / Radio / Switch */
:where(.ui-refine) .form-check-input {
    border: 1px solid var(--r-separator) !important;
    background-color: var(--bg-input) !important;
    transition: background-color var(--r-fast) ease, border-color var(--r-fast) ease, box-shadow var(--r-fast) ease;
}

:where(.ui-refine) .form-check-input[type="checkbox"] {
    border-radius: 5px;
}

:where(.ui-refine) .form-check-input:checked {
    background-color: var(--r-accent-fill) !important;
    border-color: var(--r-accent-fill) !important;
}

:where(.ui-refine) .form-check-input:focus {
    box-shadow: 0 0 0 3.5px var(--r-accent-tint-strong) !important;
    border-color: var(--r-accent) !important;
}

:where(.ui-refine) .form-switch .form-check-input {
    width: 2.25em;
    height: 1.3em;
    margin-top: 0.1em;
    border: 0 !important;
    background-color: var(--r-fill-strong) !important;
}

:where(.ui-refine) .form-switch .form-check-input:checked {
    background-color: var(--r-success) !important;
}

/* ────────────────────────────────────────────────────────────
   7. Karten · Listen
   ──────────────────────────────────────────────────────────── */
:where(.ui-refine) .card {
    border-radius: var(--r-radius-card);
    box-shadow: var(--r-shadow-card);
}

/* Nicht klickbare Karten heben sich nicht an */
:where(.ui-refine) .card:hover {
    box-shadow: var(--r-shadow-card);
}

:where(.ui-refine) .card-header {
    padding: 14px 18px;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.011em;
}

:where(.ui-refine) .card-body {
    padding: 18px;
}

/* Farbige Kartenköpfe (bg-primary …) wirken wie Warnbalken → ruhiger Kopf, Farbe nur im Symbol */
html:where(.ui-refine)[data-theme] .card-header:is(.bg-primary, .bg-info, .bg-success, .bg-secondary, .bg-dark) {
    background: transparent !important;
    color: var(--r-text) !important;
}

html:where(.ui-refine)[data-theme] .card-header:is(.bg-primary, .bg-info, .bg-success, .bg-secondary, .bg-dark) :is(.text-white, h5, h6, .card-title) {
    color: var(--r-text) !important;
}

html:where(.ui-refine)[data-theme] .card-header.bg-primary .bi { color: var(--r-accent); }
html:where(.ui-refine)[data-theme] .card-header.bg-info .bi { color: var(--r-info); }
html:where(.ui-refine)[data-theme] .card-header.bg-success .bi { color: var(--r-success); }

html:where(.ui-refine)[data-theme] .card-header:is(.bg-warning, .bg-danger) {
    color: var(--r-text) !important;
}

html:where(.ui-refine)[data-theme] .card-header.bg-warning {
    background: color-mix(in srgb, var(--r-warning) 14%, transparent) !important;
}

html:where(.ui-refine)[data-theme] .card-header.bg-danger {
    background: color-mix(in srgb, var(--r-danger) 14%, transparent) !important;
}

:where(.ui-refine) .card-footer {
    padding: 12px 18px;
    background: transparent;
    border-top: 1px solid var(--r-hairline);
}

:where(.ui-refine) .card-title {
    font-weight: 600;
    letter-spacing: -0.011em;
}

@media (max-width: 576px) {
    :where(.ui-refine) .card-header {
        padding: 12px 14px;
        font-size: 0.9375rem;
    }

    :where(.ui-refine) .card-body {
        padding: 14px;
    }
}

:where(.ui-refine) .list-group {
    background: transparent !important;
    border-radius: var(--r-radius-card);
}

:where(.ui-refine) .list-group-item {
    padding: 11px 16px;
    transition: background-color var(--r-fast) ease;
}

:where(.ui-refine) .list-group-item:hover {
    border-color: var(--r-hairline) !important;
}

:where(.ui-refine) .card > .list-group > .list-group-item,
:where(.ui-refine) .card-body > .list-group > .list-group-item,
:where(.ui-refine) .card > .list-group-flush > .list-group-item {
    border-left: 0 !important;
    border-right: 0 !important;
}

:where(.ui-refine) .card > .list-group:last-child > .list-group-item:last-child {
    border-bottom: 0 !important;
}

:where(.ui-refine) .list-group-item-action:hover,
:where(.ui-refine) .list-group-item-action:focus {
    background: var(--r-hover) !important;
}

:where(.ui-refine) .list-group-item-action:active {
    background: var(--r-press) !important;
    transition: none;
}

:where(.ui-refine) .list-group-item.active {
    background: var(--r-accent-tint) !important;
    color: var(--r-text) !important;
    border-color: var(--r-hairline) !important;
}

/* Schwebende Such-/Picker-Listen: Fläche und Auswahl müssen deckend sein.
   In-page-List-Groups bleiben transparent; nur Overlays (absolute / Typeahead). */
html.ui-refine .list-group[class*="search-suggest"],
html.ui-refine .list-group.position-absolute,
html.ui-refine [data-search-select-results],
html.ui-refine .email-picker__results,
html.ui-refine #supplier-dropdown,
html.ui-refine #attach-contact-results {
    background: var(--r-raised) !important;
    color: var(--r-text);
    border: 1px solid var(--r-hairline);
    box-shadow: var(--r-shadow-menu);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    isolation: isolate;
    pointer-events: auto;
    z-index: 1080;
}

html.ui-refine .list-group[class*="search-suggest"] > .list-group-item,
html.ui-refine .list-group.position-absolute > .list-group-item,
html.ui-refine [data-search-select-results] > .list-group-item,
html.ui-refine .email-picker__results > .list-group-item,
html.ui-refine #supplier-dropdown > .list-group-item,
html.ui-refine #attach-contact-results > .dropdown-item,
html.ui-refine #attach-contact-results > .dropdown-item-text {
    background: var(--r-raised) !important;
    color: var(--r-text) !important;
}

html.ui-refine .list-group[class*="search-suggest"] > .list-group-item-action:hover,
html.ui-refine .list-group[class*="search-suggest"] > .list-group-item-action:focus,
html.ui-refine .list-group.position-absolute > .list-group-item-action:hover,
html.ui-refine .list-group.position-absolute > .list-group-item-action:focus,
html.ui-refine [data-search-select-results] > .list-group-item-action:hover,
html.ui-refine [data-search-select-results] > .list-group-item-action:focus,
html.ui-refine .email-picker__results > .list-group-item-action:hover,
html.ui-refine .email-picker__results > .list-group-item-action:focus,
html.ui-refine #supplier-dropdown > .list-group-item-action:hover,
html.ui-refine #supplier-dropdown > .list-group-item-action:focus,
html.ui-refine #attach-contact-results > .dropdown-item:hover,
html.ui-refine #attach-contact-results > .dropdown-item:focus {
    background: color-mix(in srgb, var(--r-raised) 86%, var(--r-text) 14%) !important;
    color: var(--r-text) !important;
}

html.ui-refine .list-group[class*="search-suggest"] > .list-group-item.active,
html.ui-refine .list-group[class*="search-suggest"] > .list-group-item-action:active,
html.ui-refine .list-group.position-absolute > .list-group-item.active,
html.ui-refine .list-group.position-absolute > .list-group-item-action:active,
html.ui-refine [data-search-select-results] > .list-group-item.active,
html.ui-refine [data-search-select-results] > .list-group-item-action:active,
html.ui-refine .email-picker__results > .list-group-item.active,
html.ui-refine #attach-contact-results > .dropdown-item.active {
    background: color-mix(in srgb, var(--r-raised) 82%, var(--r-accent) 18%) !important;
    color: var(--r-text) !important;
}

:where(.ui-refine) .accordion-item {
    background: var(--r-surface);
    border-color: var(--r-hairline);
}

:where(.ui-refine) .accordion-button {
    font-weight: 600;
    letter-spacing: -0.011em;
}

:where(.ui-refine) .app-content .accordion-button:not(.collapsed) {
    background: transparent;
    color: var(--r-text);
}

:where(.ui-refine) hr {
    border-color: var(--r-hairline);
    opacity: 1;
}

/* ────────────────────────────────────────────────────────────
   8. Tabellen – Ruhe durch Haarlinien, Ziffern in Reih und Glied
   ──────────────────────────────────────────────────────────── */
:where(.ui-refine) .table {
    background: transparent !important;
    font-size: 0.875rem;
}

:where(.ui-refine) .table thead th,
:where(.ui-refine) .app-content .table thead th {
    padding: 9px 12px;
    background: transparent !important;
    border-bottom: 1px solid var(--r-hairline) !important;
    color: var(--r-text-3) !important;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

:where(.ui-refine) .table td {
    padding: 10px 12px;
}

:where(.ui-refine) .table > :not(caption) > * > * {
    border-bottom-color: var(--r-hairline);
}

:where(.ui-refine) .table tbody tr {
    border-bottom: 0 !important;
    transition: background-color var(--r-fast) ease;
}

/* Tabellen mit kürzbarer Textspalte passen in ihren Container:
   app-compact.css erzwingt sonst width:max-content + nowrap → Beträge/Aktionen werden überdeckt. */
@media (min-width: 992px) {
    html.ui-refine .table-responsive > table:has(td > .text-truncate, td > div > .text-truncate) {
        width: 100%;
        min-width: 0;
    }

    html.ui-refine .table-responsive > table :is(td, th):has(> .text-truncate, > div > .text-truncate) {
        width: 100%;
        max-width: 1px;
        white-space: normal;
    }

    html.ui-refine .table-responsive > table td > :is(.text-truncate, div > .text-truncate) {
        max-width: 100% !important;
    }
}

:where(.ui-refine) .card .table > tbody > tr:last-child > * {
    border-bottom-width: 0;
}

:where(.ui-refine) .table-responsive,
:where(.ui-refine) .table-responsive .table,
:where(.ui-refine) tbody,
:where(.ui-refine) thead,
:where(.ui-refine) tfoot {
    background: transparent !important;
}

:where(.ui-refine) .table tbody tr[data-href]:active,
:where(.ui-refine) .table tbody tr.row-clickable:active {
    background: var(--r-press) !important;
    transition: none;
}

:where(.ui-refine) .table tfoot td,
:where(.ui-refine) .table tfoot th {
    font-weight: 600;
    border-top: 1px solid var(--r-separator);
}

/* ────────────────────────────────────────────────────────────
   9. Badges · Alerts · Leerzustände
   Status als getönte Pillen: lesbar, aber leise.
   ──────────────────────────────────────────────────────────── */
:where(.ui-refine) .badge {
    padding: 0.3em 0.6em;
    border-radius: 6px;
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.005em;
    line-height: 1.2;
}

:where(.ui-refine) .badge.rounded-pill {
    border-radius: 999px;
}

html:where(.ui-refine)[data-theme] .badge.bg-primary,
html:where(.ui-refine)[data-theme] .badge.text-bg-primary {
    background: var(--r-accent-tint-strong) !important;
    color: var(--r-accent-text) !important;
}

html:where(.ui-refine)[data-theme] .badge.bg-success,
html:where(.ui-refine)[data-theme] .badge.text-bg-success {
    background: color-mix(in srgb, var(--r-success) 18%, transparent) !important;
    color: var(--r-success) !important;
}

html:where(.ui-refine)[data-theme] .badge.bg-warning,
html:where(.ui-refine)[data-theme] .badge.text-bg-warning {
    background: color-mix(in srgb, var(--r-warning) 20%, transparent) !important;
    color: var(--r-warning) !important;
}

html:where(.ui-refine)[data-theme] .badge.bg-danger,
html:where(.ui-refine)[data-theme] .badge.text-bg-danger {
    background: color-mix(in srgb, var(--r-danger) 17%, transparent) !important;
    color: var(--r-danger) !important;
}

html:where(.ui-refine)[data-theme] .badge.bg-info,
html:where(.ui-refine)[data-theme] .badge.text-bg-info {
    background: color-mix(in srgb, var(--r-info) 18%, transparent) !important;
    color: var(--r-info) !important;
}

html:where(.ui-refine)[data-theme] .badge.bg-secondary,
html:where(.ui-refine)[data-theme] .badge.text-bg-secondary,
html:where(.ui-refine)[data-theme] .badge.bg-light,
html:where(.ui-refine)[data-theme] .badge.text-bg-light,
html:where(.ui-refine)[data-theme] .badge.bg-dark,
html:where(.ui-refine)[data-theme] .badge.text-bg-dark {
    background: var(--r-fill) !important;
    color: var(--r-text-2) !important;
}


/* Bootstrap-«subtle»-Hilfsklassen an das Theme binden (sonst hellgraue Pillen im Dunkeln) */
html:where(.ui-refine)[data-theme] .bg-primary-subtle { background-color: var(--r-accent-tint) !important; }
html:where(.ui-refine)[data-theme] .bg-secondary-subtle,
:where(.ui-refine) .bg-light-subtle,
:where(.ui-refine) .bg-dark-subtle { background-color: var(--r-fill) !important; }
html:where(.ui-refine)[data-theme] .bg-success-subtle { background-color: color-mix(in srgb, var(--r-success) 15%, transparent) !important; }
html:where(.ui-refine)[data-theme] .bg-warning-subtle { background-color: color-mix(in srgb, var(--r-warning) 16%, transparent) !important; }
html:where(.ui-refine)[data-theme] .bg-danger-subtle { background-color: color-mix(in srgb, var(--r-danger) 15%, transparent) !important; }
html:where(.ui-refine)[data-theme] .bg-info-subtle { background-color: color-mix(in srgb, var(--r-info) 15%, transparent) !important; }

html:where(.ui-refine)[data-theme] .text-primary-emphasis { color: var(--r-accent-text) !important; }
html:where(.ui-refine)[data-theme] .text-secondary-emphasis,
:where(.ui-refine) .text-light-emphasis,
:where(.ui-refine) .text-dark-emphasis { color: var(--r-text-2) !important; }
html:where(.ui-refine)[data-theme] .text-success-emphasis,
:where(.ui-refine) .text-success { color: var(--r-success) !important; }
html:where(.ui-refine)[data-theme] .text-warning-emphasis,
:where(.ui-refine) .text-warning { color: var(--r-warning) !important; }
html:where(.ui-refine)[data-theme] .text-danger-emphasis,
:where(.ui-refine) .text-danger { color: var(--r-danger) !important; }
html:where(.ui-refine)[data-theme] .text-info-emphasis,
:where(.ui-refine) .text-info { color: var(--r-info) !important; }

:where(.ui-refine) .badge[class*="-subtle"],
:where(.ui-refine) .badge.border {
    border: 0 !important;
}

:where(.ui-refine) .border-primary-subtle,
:where(.ui-refine) .border-secondary-subtle,
:where(.ui-refine) .border-success-subtle,
:where(.ui-refine) .border-warning-subtle,
:where(.ui-refine) .border-danger-subtle,
:where(.ui-refine) .border-info-subtle {
    border-color: var(--r-hairline) !important;
}

:where(.ui-refine) .alert {
    padding: 12px 16px;
    border: 0 !important;
    border-radius: var(--r-radius);
    font-size: 0.875rem;
    color: var(--r-text) !important;
}

:where(.ui-refine) .alert-info,
:where(.ui-refine) .alert-primary {
    background: var(--r-accent-tint) !important;
    box-shadow: inset 3px 0 0 var(--r-accent);
}

:where(.ui-refine) .alert-success {
    background: color-mix(in srgb, var(--r-success) 13%, transparent) !important;
    box-shadow: inset 3px 0 0 var(--r-success);
}

:where(.ui-refine) .alert-warning {
    background: color-mix(in srgb, var(--r-warning) 14%, transparent) !important;
    box-shadow: inset 3px 0 0 var(--r-warning);
}

:where(.ui-refine) .alert-danger {
    background: color-mix(in srgb, var(--r-danger) 13%, transparent) !important;
    box-shadow: inset 3px 0 0 var(--r-danger);
}

:where(.ui-refine) .alert-secondary,
:where(.ui-refine) .alert-light {
    background: var(--r-fill) !important;
}

:where(.ui-refine) .empty-state {
    padding: 48px 24px;
}

:where(.ui-refine) .empty-state .empty-state-icon {
    font-size: 2rem;
    color: var(--r-text-3);
    opacity: 0.8;
}

:where(.ui-refine) .empty-state .empty-state-title {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.011em;
    color: var(--r-text);
}

:where(.ui-refine) .pagination .page-link {
    border: 0 !important;
    border-radius: 7px !important;
    margin: 0 1px;
    background: transparent !important;
    color: var(--r-text-2) !important;
    font-variant-numeric: tabular-nums;
}

:where(.ui-refine) .pagination .page-link:hover {
    background: var(--r-hover) !important;
    color: var(--r-text) !important;
}

:where(.ui-refine) .pagination .page-item.active .page-link {
    background: var(--r-accent-tint) !important;
    color: var(--r-accent-text) !important;
    font-weight: 600;
}

/* ────────────────────────────────────────────────────────────
   10. Menüs · Modals · Offcanvas · Toasts
   ──────────────────────────────────────────────────────────── */
:where(.ui-refine) .dropdown-menu,
:where(.ui-refine) .app-content .dropdown-menu {
    padding: 5px;
    min-width: 12rem;
    background: var(--r-menu) !important;
    border: 0 !important;
    border-radius: 12px;
    box-shadow: var(--r-shadow-menu);
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    font-size: 0.875rem;
    transform-origin: top left;
    animation: refineMenuIn 150ms var(--r-ease);
}

:where(.ui-refine) .dropdown-menu-end,
:where(.ui-refine) .dropdown-menu[data-popper-placement$="end"] {
    transform-origin: top right;
}

:where(.ui-refine) .dropdown-menu[data-popper-placement^="top"] {
    transform-origin: bottom left;
}

/* Popper positioniert per transform → Animation über scale/translate (unabhängige Eigenschaften) */
@keyframes refineMenuIn {
    from {
        opacity: 0;
        scale: 0.97;
    }
    to {
        opacity: 1;
        scale: 1;
    }
}

:where(.ui-refine) .dropdown-item {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    border-radius: 7px;
    color: var(--r-text) !important;
    line-height: 1.3;
    transition: none;
}

:where(.ui-refine) .dropdown-item .bi {
    color: var(--r-text-2);
}

/* Menü-Hervorhebung wie macOS: Akzentfläche, weisse Schrift */
:where(.ui-refine) .dropdown-item:hover,
:where(.ui-refine) .dropdown-item:focus,
:where(.ui-refine) .dropdown-item.active {
    background: var(--r-accent-fill) !important;
    color: #fff !important;
}

:where(.ui-refine) .dropdown-item:hover .bi,
:where(.ui-refine) .dropdown-item:focus .bi,
:where(.ui-refine) .dropdown-item.active .bi,
:where(.ui-refine) .dropdown-item:hover .text-muted,
:where(.ui-refine) .dropdown-item:focus .text-muted {
    color: rgba(255, 255, 255, 0.9) !important;
}

:where(.ui-refine) .dropdown-item.text-danger:hover,
:where(.ui-refine) .dropdown-item.text-danger:focus {
    background: var(--r-danger) !important;
}

:where(.ui-refine) .dropdown-item:disabled,
:where(.ui-refine) .dropdown-item.disabled {
    color: var(--r-text-3) !important;
    background: transparent !important;
}

:where(.ui-refine) .dropdown-divider {
    margin: 4px 6px;
    border-top-color: var(--r-hairline);
    opacity: 1;
}

:where(.ui-refine) .dropdown-header {
    padding: 6px 10px 2px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--r-text-3);
}

/* Modals: abdunkeln, um zu fokussieren; aus der Mitte heraus erscheinen */
:where(.ui-refine) .modal-backdrop.show {
    opacity: 1;
    background: var(--r-scrim);
}

:where(.ui-refine) .modal-backdrop {
    background: var(--r-scrim);
}

:where(.ui-refine) .modal.fade .modal-dialog {
    transform: scale(0.965);
    transition: transform var(--r-slow) var(--r-ease), opacity var(--r-slow) var(--r-ease);
    opacity: 0;
}

:where(.ui-refine) .modal.show .modal-dialog {
    transform: none;
    opacity: 1;
}

:where(.ui-refine) .modal-content,
:where(.ui-refine) .app-content .modal-content {
    background: var(--r-raised) !important;
    border: 0 !important;
    border-radius: var(--r-radius-sheet);
    box-shadow: var(--r-shadow-modal);
    overflow: hidden;
}

html:where(.ui-refine)[data-theme="dark"] .modal-content {
    background: #262629 !important;
}

:where(.ui-refine) .modal-header {
    padding: 18px 20px 12px;
    background: transparent !important;
    border-bottom: 0 !important;
}

:where(.ui-refine) .modal-title {
    font-size: 1.0625rem;
    font-weight: 650;
    letter-spacing: -0.015em;
}

:where(.ui-refine) .modal-body {
    padding: 8px 20px 20px;
    background: transparent !important;
}

:where(.ui-refine) .modal-footer {
    padding: 12px 20px 18px;
    gap: var(--r-2);
    background: transparent !important;
    border-top: 1px solid var(--r-hairline) !important;
}

:where(.ui-refine) .modal-footer > * {
    margin: 0;
}

:where(.ui-refine) .modal-fullscreen .modal-content,
:where(.ui-refine) .copilot-modal .modal-content {
    border-radius: 0;
}

:where(.ui-refine) .offcanvas {
    background: var(--r-surface) !important;
    border-color: var(--r-hairline) !important;
    box-shadow: var(--r-shadow-modal);
}

:where(.ui-refine) .offcanvas-header,
:where(.ui-refine) .offcanvas-body {
    background: transparent !important;
}

:where(.ui-refine) .offcanvas-header {
    border-bottom: 1px solid var(--r-hairline) !important;
}

:where(.ui-refine) .offcanvas-title {
    font-weight: 650;
    letter-spacing: -0.015em;
}

:where(.ui-refine) .offcanvas.offcanvas-bottom {
    border-top-left-radius: var(--r-radius-sheet);
    border-top-right-radius: var(--r-radius-sheet);
}

:where(.ui-refine) .offcanvas-backdrop.show {
    opacity: 1;
    background: var(--r-scrim);
}

:where(.ui-refine) .offcanvas-backdrop {
    background: var(--r-scrim);
}

/* Toasts: ein Material, Status über Symbolfarbe */
:where(.ui-refine) .toast {
    min-width: 280px;
    border: 0 !important;
    border-radius: var(--r-radius-card);
    background: var(--r-menu) !important;
    color: var(--r-text) !important;
    box-shadow: var(--r-shadow-menu);
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    font-size: 0.875rem;
}

:where(.ui-refine) .toast .toast-body,
:where(.ui-refine) .toast .toast-body.text-dark {
    padding: 12px 14px;
    color: var(--r-text) !important;
}

:where(.ui-refine) .toast.text-bg-success .toast-body > .bi {
    color: var(--r-success);
}

:where(.ui-refine) .toast.text-bg-warning .toast-body > .bi {
    color: var(--r-warning);
}

:where(.ui-refine) .toast.text-bg-danger .toast-body > .bi {
    color: var(--r-danger);
}

html:where(.ui-refine)[data-theme="light"] .toast .btn-close-white {
    filter: none;
}

html:where(.ui-refine)[data-theme="light"] .btn-close {
    filter: none;
}

:where(.ui-refine) .toast.showing,
:where(.ui-refine) .toast.show {
    animation: refineToastIn var(--r-slow) var(--r-ease);
}

@keyframes refineToastIn {
    from {
        opacity: 0;
        translate: 0 -8px;
        scale: 0.98;
    }
    to {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }
}

:where(.ui-refine) .pwa-banner {
    border: 0;
    border-radius: var(--r-radius-card);
    background: var(--r-menu);
    color: var(--r-text);
    box-shadow: var(--r-shadow-menu);
    backdrop-filter: blur(24px) saturate(1.8);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
}

:where(.ui-refine) .tooltip-inner {
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* ────────────────────────────────────────────────────────────
   11. Fokus – sichtbar, rund, ohne Radien zu verbiegen
   ──────────────────────────────────────────────────────────── */
:where(.ui-refine) :focus-visible {
    outline: 2px solid var(--r-accent);
    outline-offset: 2px;
}

:where(.ui-refine) .btn:focus-visible {
    border-radius: var(--r-radius-sm);
    box-shadow: none !important;
}

:where(.ui-refine) .btn-sm:focus-visible {
    border-radius: 7px;
}

:where(.ui-refine) .nav-link:focus-visible,
:where(.ui-refine) .dropdown-item:focus-visible,
:where(.ui-refine) .list-group-item:focus-visible {
    outline-offset: -2px;
    border-radius: var(--r-radius-sm);
}

:where(.ui-refine) .btn:focus:not(:focus-visible) {
    box-shadow: none !important;
}

/* ────────────────────────────────────────────────────────────
   12. Gemeinsame Listen-Partials (_list_cool)
   Die Partials werden nach dieser Datei geladen → gezielt höhere Spezifität.
   ──────────────────────────────────────────────────────────── */
html.ui-refine [class*="-page--index"] .card {
    border-radius: var(--r-radius-card);
    box-shadow: var(--r-shadow-card);
}

html.ui-refine [class*="-page--index"] .card > .card-header {
    background: transparent;
}

html.ui-refine [class*="-page--index"] .card-header .badge {
    background: var(--r-fill) !important;
    color: var(--r-text-2) !important;
    font-weight: 600;
    letter-spacing: 0;
    padding: 0.25em 0.6em;
}

html.ui-refine [class*="-page--index"] h1 {
    letter-spacing: -0.024em;
}

html.ui-refine [class*="-page--index"] .table thead th {
    text-transform: none;
    font-size: 0.75rem;
    letter-spacing: 0;
    color: var(--r-text-3);
}

html.ui-refine [class*="-page--index"] .table tbody td {
    border-top: 0;
}

/* Benutzerliste: viele Spalten → automatisches Tabellenlayout statt überlappender Zellen
   (kein overflow:hidden auf Zellen – das würde Zeilen-Dropdowns abschneiden) */
html.ui-refine .user-page--index .table {
    table-layout: auto;
}

html.ui-refine [class*="-page--index"] .table tbody tr:hover {
    background: var(--r-hover);
    box-shadow: none;
}

html.ui-refine [class*="-page--index"] .list-item-card {
    border-radius: 12px;
    box-shadow: none;
    transition: background-color var(--r-fast) ease, transform 90ms ease-out;
}

html.ui-refine [class*="-page--index"] .list-item-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--r-hairline);
    background: color-mix(in srgb, var(--r-surface) 100%, var(--r-text) 3%);
}

html.ui-refine [class*="-page--index"] .list-item-card:active {
    transform: scale(0.985);
    transition-duration: 60ms;
}

html.ui-refine [class*="-page--index"] .list-item-card::before {
    display: none;
}

html.ui-refine [class*="-page--index"] .list-item-card.pm-row-new::before,
html.ui-refine [class*="-page--index"] .ticket-list-item.pm-row-new .list-item-card::before {
    display: block;
    background: var(--r-danger);
}

html.ui-refine [class*="-page--index"] .btn-primary {
    background: var(--r-accent-fill) !important;
    box-shadow: none;
}

/* ────────────────────────────────────────────────────────────
   12b. Module: Mail · Buchhaltung · Datei-Upload
   Seiten-Styles werden nach dieser Datei geladen → gezielt höhere Spezifität.
   ──────────────────────────────────────────────────────────── */

/* Code/Schlüssel: neutral statt Bootstrap-Pink */
:where(.ui-refine) code {
    color: var(--r-text-2);
    font-size: 0.8125em;
}

/* Tabellen-Zustände: getönt statt heller Flächen */
html:where(.ui-refine)[data-theme] .table > tbody > tr.table-active > *,
html:where(.ui-refine)[data-theme] .table > tbody > tr.table-active {
    background: var(--r-accent-tint) !important;
    box-shadow: none;
    color: var(--r-text) !important;
}

html:where(.ui-refine)[data-theme] .table > tbody > tr.table-warning > *,
html:where(.ui-refine)[data-theme] .table > tbody > tr.table-warning {
    background: color-mix(in srgb, var(--r-warning) 12%, transparent) !important;
    box-shadow: none;
    color: var(--r-text) !important;
}

html:where(.ui-refine)[data-theme] .table > tbody > tr.table-active.table-warning > * {
    background: var(--r-accent-tint-strong) !important;
}

html:where(.ui-refine)[data-theme] .table > tbody > tr.table-success > *,
html:where(.ui-refine)[data-theme] .table > tbody > tr.table-danger > *,
html:where(.ui-refine)[data-theme] .table > tbody > tr.table-info > * {
    box-shadow: none;
    color: var(--r-text) !important;
}

html:where(.ui-refine)[data-theme] .table > tbody > tr.table-success > * { background: color-mix(in srgb, var(--r-success) 12%, transparent) !important; }
html:where(.ui-refine)[data-theme] .table > tbody > tr.table-danger > * { background: color-mix(in srgb, var(--r-danger) 12%, transparent) !important; }
html:where(.ui-refine)[data-theme] .table > tbody > tr.table-info > * { background: color-mix(in srgb, var(--r-info) 12%, transparent) !important; }

/* table-light fehlte als einzige Tönung: Bootstrap setzt dafür #f8f9fa mit
   schwarzem Text – im Dunkelmodus eine weisse Zeile mitten in der Tabelle
   (z.B. der vorgeschlagene Termin in einer Umfrage). */
html:where(.ui-refine)[data-theme] .table > tbody > tr.table-light > *,
html:where(.ui-refine)[data-theme] .table > tbody > tr.table-light {
    background: var(--r-fill) !important;
    box-shadow: none;
    color: var(--r-text) !important;
}

/* Fortschrittsbalken: die Spur war Bootstrap-Hellgrau und leuchtete im
   Dunkeln aus der Tabelle heraus. */
:where(.ui-refine) .progress,
:where(.ui-refine) .progress-stacked {
    background: var(--r-fill) !important;
    border-radius: 999px;
}

:where(.ui-refine) .progress-bar {
    background: var(--r-accent-fill);
}

/* Buchhaltung: Versal-Labels (Firmenwahl, Tabellenköpfe, Kicker) in Satzschreibung */
html.ui-refine :is(.accounting-company-switcher--compact .form-label, .accounting-page .table thead th, .cc-settle-card__kicker) {
    text-transform: none;
    letter-spacing: 0;
}

html.ui-refine .accounting-page .table thead th {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--r-text-3) !important;
}

/* Filterkarten mit Formularfeldern brauchen Innenabstand (Listenkarten bleiben randlos) */
html.ui-refine .accounting-page .accounting-filter-card > .card-body:has(.form-control, .form-select) {
    padding: 16px 18px;
}

html.ui-refine .inbox-chip--warn {
    color: var(--r-warning);
    border-color: transparent;
    background: color-mix(in srgb, var(--r-warning) 14%, transparent);
}

/* ── Buchhaltung: ein Seitenrahmen für alle Seiten ─────────────
   Views legen Breiten uneinheitlich fest (col-lg-8/10/11/12). Im Buchhaltungs-Rahmen
   füllt die Hauptspalte immer die volle Breite, begrenzt auf eine lesbare Maximalbreite. */
html.ui-refine .app-content--accounting-frame > .container-fluid {
    width: 100%;
    max-width: 1560px;
    margin-inline: 0;
}

html.ui-refine .app-content--accounting-frame > .container-fluid > .row > [class*="col-lg-"]:only-child,
html.ui-refine .app-content--accounting-frame > .container-fluid > .row > [class*="col-xl-"]:only-child,
html.ui-refine .app-content--accounting-frame > .container-fluid > .row > [class*="col-md-"]:only-child {
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0;
}

html.ui-refine .app-content--accounting-frame > .container-fluid > .row > .offset-lg-1,
html.ui-refine .app-content--accounting-frame > .container-fluid > .row > .mx-auto {
    margin-left: 0 !important;
}

/* Firmenwahl gibt es genau einmal: in der Topbar (Desktop) bzw. Seitenleiste (Mobile).
   Die zusätzliche «Interne Firma»-Auswahl auf den Seiten entfällt im Buchhaltungs-Rahmen. */
html.ui-refine .app-content--accounting-frame .accounting-company-switcher {
    display: none !important;
}

/* Heute: Panel ohne zusätzlichen Kartenrahmen – Vorschau und Buchen sind die Karten.
   Unterabschnitte im Formular als ruhige, gefüllte Gruppen statt Rahmen-in-Rahmen. */
html.ui-refine .process-detail-sticky > .card.h-100 {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html.ui-refine .process-detail-sticky > .card.h-100 > .card-body#process-panel {
    padding: 0;
}

html.ui-refine #process-panel .card-body .border.rounded,
html.ui-refine #process-panel form.border.rounded {
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--r-fill);
}

html.ui-refine #process-panel .bg-white {
    background: var(--r-surface) !important;
}

html.ui-refine #process-panel .card-header {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--r-surface) !important;
}

/* Knöpfe brechen nie mitten im Wort um; Kartenköpfe dürfen stattdessen umbrechen */
html.ui-refine .app-content--accounting .btn {
    white-space: nowrap;
}

html.ui-refine .app-content--accounting .card-header.d-flex {
    flex-wrap: wrap;
    row-gap: 0.5rem;
}

html.ui-refine .app-content--accounting .card-header.d-flex > .d-flex {
    flex-wrap: wrap;
}

/* Liste links: Filter als ruhige Segmente */
html.ui-refine .process-list-col .btn.btn-outline-secondary.active {
    background: var(--r-accent-tint) !important;
    color: var(--r-accent-text) !important;
    font-weight: 600;
}

/* Kennzahl-Karten: Werte in Textfarbe (nicht Linkblau), Verlust rot, «keine Überfälligkeit» neutral */
html.ui-refine a.accounting-stat-card .accounting-stat-card__value,
html.ui-refine .accounting-stat-card__value {
    color: var(--r-text) !important;
    letter-spacing: -0.022em;
}

html.ui-refine .accounting-stat-card--danger .accounting-stat-card__value {
    color: var(--r-danger) !important;
}

html.ui-refine .accounting-stat-card__hint.text-success {
    color: var(--r-text-3) !important;
}

/* Buchhaltungs-Stepper: getönte Pillen im Theme */
html.ui-refine .accounting-stepper .step {
    background: var(--r-fill);
    color: var(--r-text-2);
    font-weight: 500;
}

html.ui-refine .accounting-stepper .step.is-done {
    background: color-mix(in srgb, var(--r-success) 16%, transparent);
    color: var(--r-success);
}

html.ui-refine .accounting-stepper .step.is-current {
    background: color-mix(in srgb, var(--accounting-accent) 18%, transparent);
    color: var(--accounting-accent);
    font-weight: 600;
}

/* Dokument-Ablagezone */
html.ui-refine .docs-panel-drop-hint {
    border: 1.5px dashed var(--r-separator);
    color: var(--r-text-3);
}

/* Mail-Postfächer wie in Apple Mail: Text neutral, Symbol in Akzentfarbe */
html.ui-refine .mailbox-link {
    padding: 6px 10px;
    border-radius: var(--r-radius-sm);
    color: var(--r-text) !important;
    font-size: 0.875rem;
    text-decoration: none !important;
}

html.ui-refine .mailbox-link .bi {
    color: var(--r-accent);
}

html.ui-refine .mailbox-link.active {
    background: var(--r-accent-tint);
    box-shadow: none;
}

html.ui-refine .mailbox-link:hover:not(.active) {
    background: var(--r-hover);
}

/* Keine Versal-Labels: Satzschreibung, klein, zurückhaltend (Apple-Sidebars/Listen) */
html.ui-refine :is(.mailbox-toggle, .mail-group-label, .pwa-page-kicker),
html.ui-refine .app-content :is(h6, .h6, small, .small, label, .text-muted, .fw-semibold).text-uppercase {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-weight: 600;
}

html.ui-refine .app-content :is(h6, .h6, small, .small, label, .text-muted).text-uppercase {
    font-size: 0.75rem;
    color: var(--r-text-3) !important;
}

html.ui-refine .mailbox-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--r-text-3);
}

/* Spam/Löschen bleiben sichtbar, aber ohne Signalflächen – Farbe nur im Symbol */
@media (min-width: 769px) {
    html.ui-refine[data-theme] .mail-row-actions .btn.mail-action-spam,
    html.ui-refine[data-theme] .mail-row-actions .btn.mail-action-delete {
        background-color: var(--r-fill) !important;
        border: 0 !important;
        box-shadow: none;
        border-radius: 8px;
    }

    html.ui-refine[data-theme] .mail-row-actions .btn.mail-action-spam {
        color: var(--r-warning) !important;
    }

    html.ui-refine[data-theme] .mail-row-actions .btn.mail-action-delete {
        color: var(--r-danger) !important;
    }

    html.ui-refine[data-theme] .mail-row-actions .btn.mail-action-spam:hover {
        background-color: color-mix(in srgb, var(--r-warning) 22%, transparent) !important;
    }

    html.ui-refine[data-theme] .mail-row-actions .btn.mail-action-delete:hover {
        background-color: color-mix(in srgb, var(--r-danger) 22%, transparent) !important;
    }
}

/* Buchhaltung: Kopf der Seitenleiste in Satzschreibung, ohne Rahmenkasten */
html.ui-refine .app-shell--accounting .accounting-sidebar-header {
    margin: var(--r-1) var(--r-2) var(--r-2);
    padding: 10px 12px;
    border: 0;
    border-radius: var(--r-radius);
    background: color-mix(in srgb, var(--accounting-accent) 10%, transparent);
}

html.ui-refine .accounting-sidebar-header-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--r-text-3);
}

html.ui-refine .accounting-sidebar-company-name {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.011em;
}

/* Datei-Auswahl im Theme statt weissem System-Knopf */
:where(.ui-refine) .form-control::file-selector-button {
    margin-right: 10px;
    padding: 0.375rem 0.75rem;
    border: 0;
    border-radius: 6px;
    background: var(--r-fill-strong);
    color: var(--r-text);
    font-weight: 500;
}

:where(.ui-refine) .form-control:hover:not(:disabled)::file-selector-button {
    background: var(--r-fill-strong);
}

/* ────────────────────────────────────────────────────────────
   13. Barrierefreiheit
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    :where(.ui-refine) .modal.fade .modal-dialog {
        transform: none;
        transition: opacity 150ms ease;
    }

    :where(.ui-refine) .dropdown-menu,
    :where(.ui-refine) .toast.show,
    :where(.ui-refine) .toast.showing {
        animation: none;
    }

    :where(.ui-refine) .btn:active:not(:disabled),
    html.ui-refine [class*="-page--index"] .list-item-card:active {
        transform: none;
    }

    :where(.ui-refine) .app-topbar-pagetitle {
        translate: none !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    :where(.ui-refine) .app-topbar,
    :where(.ui-refine) .app-mobile-bottomnav,
    :where(.ui-refine) .page-mobile-topbar,
    :where(.ui-refine) .dropdown-menu,
    :where(.ui-refine) .toast,
    :where(.ui-refine) .pwa-banner,
    html.ui-refine .list-group[class*="search-suggest"],
    html.ui-refine [data-search-select-results],
    html.ui-refine .email-picker__results {
        background: var(--r-raised) !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    :where(.ui-refine) .app-topbar {
        background: var(--r-canvas) !important;
        border-bottom-color: var(--r-hairline);
    }
}

@media (prefers-contrast: more) {
    html.ui-refine {
        --r-hairline: rgba(255, 255, 255, 0.28);
        --r-separator: rgba(255, 255, 255, 0.4);
        --r-text-2: #d4d4da;
        --r-text-3: #b0b0b8;
    }

    html.ui-refine[data-theme="light"] {
        --r-hairline: rgba(0, 0, 0, 0.28);
        --r-separator: rgba(0, 0, 0, 0.42);
        --r-text-2: #2c2c30;
        --r-text-3: #4a4a4f;
    }
}

/* Druck: keine Materialien, keine Schatten */
@media print {
    html.ui-refine .app-topbar,
    html.ui-refine .app-sidebar,
    html.ui-refine .app-mobile-bottomnav {
        display: none !important;
    }

    html.ui-refine .card {
        box-shadow: none;
    }
}

/* Belegscanner: Kamera-Overlay ist immer dunkel → helle Knöpfe bleiben hell */
html.ui-refine .receipt-scanner-page .btn-light {
    background: #ffffff !important;
    color: #1d1d1f !important;
}

/* Heute: Panel ohne Kartenrand – Zeilen-Gutter nicht über den Rand hinaus */
html.ui-refine .process-detail-sticky #process-panel > .row {
    margin-inline: 0;
}

/* ════════════════════════════════════════════════════════════
   Mail – ruhige Apple-Mail-Ordnung
   ════════════════════════════════════════════════════════════ */

/* Seitenkopf kompakt: Mail ist ein Werkzeug, kein Dokument */
html.ui-refine .mail-page-header {
    padding-bottom: var(--r-3);
    margin-bottom: var(--r-2) !important;
}

html.ui-refine .mail-page-header .breadcrumb {
    display: none;
}

html.ui-refine .mail-page-header h1 {
    font-size: 1.5rem;
}

/* Spalten: schmale Postfächer, Liste mittel, Lesebereich bekommt den Rest */
@media (min-width: 993px) {
    html.ui-refine .mail-grid {
        grid-template-columns: 204px minmax(330px, 0.85fr) minmax(0, 1.5fr);
        gap: 10px;
    }

    html.ui-refine .mail-apple.sidebar-collapsed .mail-grid {
        grid-template-columns: minmax(300px, 0.75fr) minmax(0, 1.5fr);
    }
}

@media (min-width: 993px) and (max-width: 1400px) {
    html.ui-refine .mail-grid {
        grid-template-columns: 184px minmax(300px, 0.85fr) minmax(0, 1.35fr);
    }
}

/* Randlose Symbolknöpfe (Werkzeugleiste, Nachrichtenkopf) */
html.ui-refine .mail-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0 !important;
    border-radius: 8px;
    background: transparent !important;
    color: var(--r-text-2) !important;
    font-size: 1rem;
}

html.ui-refine .mail-icon-btn:hover,
html.ui-refine .mail-icon-btn[aria-expanded="true"] {
    background: var(--r-hover) !important;
    color: var(--r-text) !important;
}

html.ui-refine .mail-icon-btn:active {
    background: var(--r-press) !important;
}

html.ui-refine .mail-icon-btn--static {
    cursor: default;
}

html.ui-refine .mail-icon-btn.dropdown-toggle::after {
    display: none;
}

/* Werkzeugleiste des Verlaufs */
html.ui-refine .mail-thread-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--r-2);
    margin: calc(var(--r-1) * -1) 0 var(--r-3);
    padding-bottom: var(--r-3);
    border-bottom: 1px solid var(--r-hairline);
}

html.ui-refine .mail-thread-toolbar__group {
    display: flex;
    align-items: center;
    gap: 4px;
}

html.ui-refine .mail-thread-toolbar__group form {
    margin: 0;
}

html.ui-refine .mail-thread-toolbar__group--end {
    margin-left: auto;
}

html.ui-refine .mail-move-menu {
    max-height: 60vh;
    overflow-y: auto;
}

html.ui-refine .mail-message-menu .dropdown-item,
html.ui-refine .mail-move-menu .dropdown-item {
    gap: 0;
}

/* Zuordnen-Leiste statt Knopfreihe */
html.ui-refine .mail-assign-bar {
    display: flex;
    align-items: center;
    gap: var(--r-3);
    padding: 8px 8px 8px 14px;
    border-radius: var(--r-radius-card);
    background: var(--r-surface);
    border: 1px solid var(--r-hairline);
    font-size: 0.875rem;
}

html.ui-refine .mail-assign-bar__label {
    color: var(--r-text-3);
}

/* KI-Zusammenfassung */
html.ui-refine #mailAiCard .card-header {
    padding: 10px 12px 10px 16px;
}

html.ui-refine #mailAiCard .card-header h5 {
    font-size: 0.9375rem;
    font-weight: 600;
}

html.ui-refine .mail-ai__icon {
    color: #8b7cff;
}

html.ui-refine #mailAiCard .card-body {
    padding: 14px 16px 12px;
    font-size: 0.9375rem;
}

html.ui-refine .mail-ai__summary ul {
    margin: 0;
    padding-left: 1.1rem;
}

html.ui-refine .mail-ai__summary li {
    margin-bottom: 0.3rem;
    line-height: 1.45;
}

html.ui-refine .mail-ai__summary li::marker {
    color: var(--r-text-3);
}

html.ui-refine .mail-ai__summary p {
    margin: 0;
    line-height: 1.5;
}

html.ui-refine .mail-ai__meta-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 10px;
    font-size: 0.8125rem;
}

html.ui-refine .mail-ai__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--r-warning) 16%, transparent);
    color: var(--r-warning);
    font-weight: 600;
}

html.ui-refine .mail-ai__disclosure > summary,
html.ui-refine .mail-ai__footer > summary {
    cursor: pointer;
    color: var(--r-text-3);
    list-style: none;
}

html.ui-refine .mail-ai__disclosure > summary::-webkit-details-marker,
html.ui-refine .mail-ai__footer > summary::-webkit-details-marker {
    display: none;
}

html.ui-refine .mail-ai__disclosure > summary::before,
html.ui-refine .mail-ai__footer > summary::after {
    content: "\F285";
    font-family: bootstrap-icons;
    display: inline-block;
    font-size: 0.65rem;
    transition: transform 0.15s ease;
}

html.ui-refine .mail-ai__disclosure > summary::before {
    margin-right: 5px;
}

html.ui-refine .mail-ai__footer > summary::after {
    margin-left: 6px;
}

html.ui-refine .mail-ai__disclosure[open] > summary::before,
html.ui-refine .mail-ai__footer[open] > summary::after {
    transform: rotate(90deg);
}

html.ui-refine .mail-ai__disclosure[open] {
    flex-basis: 100%;
}

html.ui-refine .mail-ai__disclosure p {
    margin: 6px 0 0;
    color: var(--r-text-2);
    line-height: 1.45;
}

html.ui-refine .mail-ai__section-title {
    margin: 16px 0 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--r-text-3);
}

html.ui-refine .mail-ai__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    border-radius: 10px;
    background: var(--r-fill);
    overflow: hidden;
}

html.ui-refine .mail-ai__step {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px 9px 12px;
}

html.ui-refine .mail-ai__step + .mail-ai__step {
    box-shadow: inset 0 1px 0 var(--r-hairline);
}

html.ui-refine .mail-ai__step-dot {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 1.5px solid var(--r-separator);
}

html.ui-refine .mail-ai__step-body {
    flex: 1 1 auto;
    min-width: 0;
}

html.ui-refine .mail-ai__step-title {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.3;
}

html.ui-refine .mail-ai__step-meta {
    margin-top: 2px;
    font-size: 0.8125rem;
    color: var(--r-text-3);
    line-height: 1.35;
}

html.ui-refine .mail-ai__step-due {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 6px;
    white-space: nowrap;
}

html.ui-refine .mail-ai__step .ms-auto {
    flex-shrink: 0;
}

html.ui-refine .mail-ai__step .btn {
    white-space: nowrap;
}

html.ui-refine .mail-ai__step .btn-outline-primary {
    background: var(--r-surface) !important;
}

html.ui-refine .mail-ai__questions,
html.ui-refine .mail-ai__docs {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.875rem;
    color: var(--r-text-2);
}

html.ui-refine .mail-ai__alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 8px 10px 8px 12px;
    border-radius: 10px;
    font-size: 0.875rem;
}

html.ui-refine .mail-ai__alert--danger {
    background: color-mix(in srgb, var(--r-danger) 13%, transparent);
}

html.ui-refine .mail-ai__alert--danger > .bi {
    color: var(--r-danger);
    font-size: 1.1rem;
}

html.ui-refine .mail-ai__footer {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--r-hairline);
    font-size: 0.75rem;
}

html.ui-refine .mail-ai__footer-body {
    padding-top: 6px;
    font-size: 0.8125rem;
    color: var(--r-text-2);
}

html.ui-refine .mail-ai__footer-body ul {
    margin: 0;
    padding-left: 1.1rem;
}

/* Mail-Liste: Spam/Löschen erst bei Hover oder Auswahl – nicht dauerhaft präsent */
@media (min-width: 769px) and (hover: hover) {
    html.ui-refine .mail-row-actions {
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.12s ease !important;
    }

    html.ui-refine .mail-row-wrap:hover .mail-row-actions,
    html.ui-refine .mail-row-wrap:focus-within .mail-row-actions,
    html.ui-refine #mailThreadList.mail-select-mode .mail-row-actions {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    html.ui-refine .mail-row-content {
        padding-right: 0 !important;
    }

    html.ui-refine .mail-row-wrap:hover .mail-row-content {
        padding-right: 52px !important;
    }
}

/* Destruktive Menüeinträge bleiben rot (bis zur Hervorhebung) */
html.ui-refine .dropdown-menu .dropdown-item.text-danger:not(:hover):not(:focus),
html.ui-refine .dropdown-menu .dropdown-item.text-danger:not(:hover):not(:focus) .bi {
    color: var(--r-danger) !important;
}

/* ────────────────────────────────────────────────────────────
   Mail – kompakte Anhang-Vorschauen
   Kleine Kacheln unter dem Mailtext. Nur erkannte Belege
   tragen Badge und eine Buchhaltungs-Aktion, nicht jedes PDF.
   ──────────────────────────────────────────────────────────── */
html.ui-refine .mail-attachment-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--r-3);
}

html.ui-refine .mail-attachment-strip__action {
    padding-bottom: 6px;
}

html.ui-refine .mail-beleg-previews {
    display: flex;
    flex-wrap: wrap;
    gap: var(--r-3);
    width: auto;
    margin-top: 0;
}

html.ui-refine .mail-beleg-preview {
    display: flex;
    flex-direction: column;
    width: 112px;
    padding: 0;
    border: 1px solid var(--r-hairline) !important;
    border-radius: 10px;
    background: var(--r-surface) !important;
    color: var(--r-text) !important;
    overflow: hidden;
    text-align: left;
    appearance: none;
    cursor: pointer;
    position: relative;
}

html.ui-refine .mail-beleg-preview:hover,
html.ui-refine .mail-beleg-preview:focus-visible {
    border-color: color-mix(in srgb, var(--r-accent) 50%, transparent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--r-accent) 18%, transparent);
    outline: none;
}

html.ui-refine .mail-beleg-preview.is-beleg {
    border-color: color-mix(in srgb, var(--r-warning) 55%, transparent) !important;
}

html.ui-refine .mail-beleg-preview.is-beleg:hover,
html.ui-refine .mail-beleg-preview.is-beleg:focus-visible {
    border-color: color-mix(in srgb, var(--r-warning) 70%, transparent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--r-warning) 22%, transparent);
}

html.ui-refine .mail-beleg-preview-frame {
    width: 100%;
    height: 88px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

html.ui-refine .mail-beleg-preview-frame i {
    font-size: 1.75rem;
}

html.ui-refine .mail-beleg-preview-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

html.ui-refine .mail-beleg-preview-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: color-mix(in srgb, var(--r-warning) 88%, #fff);
    color: #3a2a00;
}

html.ui-refine .mail-beleg-preview-name {
    padding: 6px 8px 0;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.ui-refine .mail-beleg-preview-hint {
    padding: 0 8px 8px;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--r-text-2) !important;
}

html.ui-refine .mail-beleg-preview.is-beleg .mail-beleg-preview-hint {
    color: var(--r-warning) !important;
}

/* ────────────────────────────────────────────────────────────
   Kalender – «Wo soll dieser Termin stehen?»
   Kompakt (Okt. 2026): je eine Zeile «Kalender» und «iCloud»,
   Titel links, Chips rechts. Die früheren Erklärtexte stehen als
   Tooltip am Zeilentitel – sie kosteten mehr Platz als die Wahl.
   ──────────────────────────────────────────────────────────── */
html.ui-refine .cal-picker {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

html.ui-refine .cal-picker__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

html.ui-refine .cal-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 4px 10px;
    border: 1px solid var(--r-hairline);
    border-radius: 999px;
    background: var(--r-surface);
    color: var(--r-text-2);
    font-size: 0.8125rem;
    line-height: 1.25;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

html.ui-refine .cal-chip:hover {
    background: var(--r-hover);
}

/* Die Auswahl steckt im Chip selbst – das Kästchen wäre nur Doppelung */
html.ui-refine .cal-chip__box {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

html.ui-refine .cal-chip:has(.cal-chip__box:checked) {
    background: var(--r-accent-tint);
    border-color: color-mix(in srgb, var(--r-accent) 45%, transparent);
    color: var(--r-text);
    font-weight: 500;
}

html.ui-refine .cal-chip:has(.cal-chip__box:focus-visible) {
    outline: 2px solid var(--r-accent);
    outline-offset: 2px;
}

html.ui-refine .cal-chip:has(.cal-chip__box:disabled) {
    opacity: 0.5;
    cursor: default;
}

html.ui-refine .cal-chip__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cal-chip-color, var(--r-accent));
    flex: 0 0 auto;
}

html.ui-refine .cal-chip__primary {
    padding: 0 6px;
    border-radius: 999px;
    background: var(--r-accent-fill);
    color: var(--r-on-accent);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.01em;
}

html.ui-refine .cal-picker__warn {
    margin: 6px 0 0;
    font-size: 0.8125rem;
    color: var(--r-warning);
}

html.ui-refine .cal-picker__primary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--r-2);
    margin: 6px 0 2px;
}

html.ui-refine .cal-picker__primary-label {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--r-text-2);
}

html.ui-refine .cal-picker__primary select {
    width: auto;
    min-width: 9rem;
}

html.ui-refine .cal-picker__locked {
    margin: 6px 0 0;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--r-text-3);
}

html.ui-refine .cal-picker__locked-link {
    color: var(--r-accent-text);
}

/* Roter Punkt am Mehr-Knopf, wenn Konflikte offen sind */
html.ui-refine .calendar-page .apple-cal-mobile-actions-inline .dropdown {
    position: relative;
}

html.ui-refine .cal-mobile-more-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--r-danger);
}

/* Projekt-Tool: kompakte Umschaltleiste Auftrag/Task/Ticket/Meilenstein auf den Erfassen-Seiten */
html.ui-refine .create-kind-switch__seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 2px;
    border-radius: var(--r-radius-sm, 8px);
    background: var(--r-fill);
    max-width: 100%;
}

html.ui-refine .create-kind-switch__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: calc(var(--r-radius-sm, 8px) - 2px);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--r-text-2);
    text-decoration: none;
    white-space: nowrap;
}

html.ui-refine a.create-kind-switch__item:hover {
    color: var(--r-text);
    background: var(--r-hover);
}

html.ui-refine .create-kind-switch__item.is-active {
    color: var(--r-text);
    background: var(--r-raised);
    box-shadow: var(--r-shadow-seg);
}

html.ui-refine .create-kind-switch__hint {
    margin-top: 6px;
    font-size: 0.8125rem;
    color: var(--r-text-3);
}

@media (max-width: 575.98px) {
    html.ui-refine .create-kind-switch__seg {
        display: flex;
        flex-wrap: nowrap;
    }

    html.ui-refine .create-kind-switch__item {
        flex: 1 1 0;
        justify-content: center;
        padding: 6px 4px;
        font-size: 0.8125rem;
    }

    html.ui-refine .create-kind-switch__item .bi {
        display: none;
    }
}

/* Mail-Liste: wer zuletzt schrieb und ob etwas offen ist (App\Support\MailListStatus) */
html.ui-refine .mail-row-you {
    color: var(--r-text-2);
    font-weight: 600;
}

html.ui-refine .mail-status-chip {
    display: inline-block;
    margin-right: 6px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.55;
    white-space: nowrap;
    vertical-align: 1px;
    background: var(--r-fill);
    color: var(--r-text-2);
}

html.ui-refine .mail-status-chip.mail-status-followup {
    background: color-mix(in srgb, var(--r-warning) 18%, transparent);
    color: var(--r-warning);
}

html.ui-refine .mail-status-chip.mail-status-open {
    background: color-mix(in srgb, var(--r-accent) 16%, transparent);
    color: var(--r-accent-text, var(--r-accent));
}

/* Firmen-Ordner: Anzahl Gespräche neben dem Namen */
html.ui-refine .mailbox-link .mailbox-count {
    margin-left: auto;
    padding-left: 8px;
    font-size: 0.75rem;
    color: var(--r-text-3);
    font-variant-numeric: tabular-nums;
}

/* Mail-Liste: Auswahl-Checkboxen über der Zeile. Beide hatten z-index 2, die Zeile kommt später
   im HTML und deckte die Checkbox mit ihrem Hintergrund zu (unsichtbar trotz Auswahlmodus). */
#mailThreadList.mail-select-mode .mail-thread-checkbox {
    z-index: 5 !important;
}

/* Mail-Liste: Auswahl-Checkboxen deutlich sichtbar (Trennlinien-Rand war auf Dunkel unsichtbar) */
html.ui-refine #mailThreadList .mail-thread-checkbox,
html.ui-refine .mail-select-all .form-check-input,
html.ui-refine #mailSelectAll {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--r-text-3) !important;
    background-color: transparent !important;
}

html.ui-refine #mailThreadList .mail-thread-checkbox:checked,
html.ui-refine .mail-select-all .form-check-input:checked,
html.ui-refine #mailSelectAll:checked {
    background-color: var(--r-accent-fill) !important;
    border-color: var(--r-accent-fill) !important;
}

/* Touch/schmal: Auswahl-Checkboxen in Mail- und Rechnungsliste mit grosser Tap-Fläche.
   Ein transparenter Rand (--cb-hit) vergrössert die Trefferfläche, negative Margins halten
   das Layout gleich; die sichtbare Box zeichnet ein inset-Schatten im Innenbereich. */
@media (pointer: coarse), (max-width: 991.98px) {
    html.ui-refine #mailThreadList .mail-thread-checkbox.form-check-input,
    html.ui-refine .mail-select-all #mailSelectAll.form-check-input {
        --cb-hit: 10px;
        box-sizing: content-box;
        border: var(--cb-hit) solid transparent !important;
        border-radius: calc(var(--cb-hit) + 5px);
        background-clip: padding-box;
        box-shadow: inset 0 0 0 1.5px var(--r-text-3) !important;
        margin: calc(0.25em - var(--cb-hit)) calc(0px - var(--cb-hit)) calc(0px - var(--cb-hit));
    }

    html.ui-refine .mail-select-all #mailSelectAll.form-check-input {
        margin: calc(0px - var(--cb-hit)) calc(0px - var(--cb-hit)) calc(0px - var(--cb-hit)) calc(-1.5em - var(--cb-hit));
    }

    html.ui-refine #mailThreadList .mail-thread-checkbox.form-check-input:checked,
    html.ui-refine .mail-select-all #mailSelectAll.form-check-input:checked,
    html.ui-refine .mail-select-all #mailSelectAll.form-check-input:indeterminate {
        border-color: transparent !important;
        background-color: var(--r-accent-fill) !important;
        box-shadow: none !important;
    }

    html.ui-refine #mailThreadList .mail-thread-checkbox.form-check-input:focus-visible,
    html.ui-refine .mail-select-all #mailSelectAll.form-check-input:focus-visible {
        box-shadow: inset 0 0 0 2px var(--r-accent) !important;
    }
}

/* Mail aufräumen (/app/mail/aufraeumen) */
html.ui-refine .mail-cleanup {
    max-width: 980px;
}

html.ui-refine .mail-cleanup-intro,
html.ui-refine .mail-cleanup-empty {
    padding: 12px 14px;
    border-radius: var(--r-radius);
    background: var(--r-surface);
    color: var(--r-text);
}

html.ui-refine .mail-cleanup-muted {
    color: var(--r-text-3);
}

html.ui-refine .mail-cleanup-search {
    max-width: 260px;
}

html.ui-refine .mail-cleanup-bar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--r-radius);
    background: var(--r-surface);
    border: 1px solid var(--r-separator);
}

html.ui-refine .mail-cleanup-progress {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: var(--r-radius-sm);
    background: var(--r-fill);
    color: var(--r-text);
    font-size: 0.85rem;
}

html.ui-refine .mail-cleanup-progress.is-done {
    background: color-mix(in srgb, var(--r-success) 16%, transparent);
}

html.ui-refine .mail-cleanup-progress.is-error {
    background: color-mix(in srgb, var(--r-danger) 16%, transparent);
}

html.ui-refine .mail-cleanup-list {
    margin-top: 10px;
    border-radius: var(--r-radius);
    background: var(--r-surface);
    overflow: hidden;
}

html.ui-refine .mail-cleanup-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--r-separator);
    color: var(--r-text);
}

html.ui-refine .mail-cleanup-row:last-child {
    border-bottom: 0;
}

html.ui-refine .mail-cleanup-row.is-locked {
    opacity: 0.6;
}

html.ui-refine .mail-cleanup-row > .form-check-input {
    margin-top: 3px;
    flex: 0 0 auto;
}

html.ui-refine .mail-cleanup-main {
    flex: 1 1 auto;
    min-width: 0;
}

html.ui-refine .mail-cleanup-sender {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    overflow-wrap: anywhere;
}

html.ui-refine .mail-cleanup-tag {
    padding: 0 7px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.55;
    background: var(--r-fill);
    color: var(--r-text-2);
}

html.ui-refine .mail-cleanup-samples {
    margin-top: 2px;
    color: var(--r-text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html.ui-refine .mail-cleanup-one {
    flex: 0 0 auto;
    white-space: nowrap;
}

html.ui-refine .mail-cleanup .mail-cleanup-check {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--r-text-3) !important;
    background-color: transparent !important;
}

html.ui-refine .mail-cleanup .mail-cleanup-check:checked {
    background-color: var(--r-accent-fill) !important;
    border-color: var(--r-accent-fill) !important;
}

/* Mail senden: Fehler bleibt neben «Senden» stehen */
.mail-send-error {
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--r-danger, #d33);
    background: color-mix(in srgb, var(--r-danger, #d33) 14%, transparent);
}

/* App-Symbol als Markenzeichen in der Seitenleiste (public/icon.svg ist schon abgerundet) */
:where(.ui-refine) .app-sidebar .brand-mark--icon {
    display: block;
    flex-shrink: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    border-radius: 7px;
}

/* Wortmarke «360 smartlabs»: Zahl kräftig, Name leiser */
:where(.ui-refine) .app-sidebar .brand-word {
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--r-text-2);
    text-decoration: none;
}

:where(.ui-refine) .app-sidebar .brand-word b {
    font-weight: 800;
    color: var(--r-text);
}

/* ────────────────────────────────────────────────────────────
   Safe-Area (Notch, Dynamic Island, Home-Indicator)
   Das Layout setzt viewport-fit=cover: Die Seite reicht bis unter Statusleiste und
   Home-Indicator. Alles, was am Bildschirmrand klebt, hält hier Abstand.
   Ausserhalb von iPhone/iPad sind die Werte 0, dort ändert sich nichts.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    /* Menü «Mehr» (offcanvas-lg) und alle Seitenblätter */
    :where(.ui-refine) .offcanvas-lg.offcanvas-start,
    :where(.ui-refine) .offcanvas-lg.offcanvas-end,
    :where(.ui-refine) .offcanvas.offcanvas-start,
    :where(.ui-refine) .offcanvas.offcanvas-end {
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    :where(.ui-refine) .offcanvas-lg.offcanvas-start,
    :where(.ui-refine) .offcanvas.offcanvas-start {
        padding-left: env(safe-area-inset-left, 0px);
    }
    :where(.ui-refine) .offcanvas-lg.offcanvas-end,
    :where(.ui-refine) .offcanvas.offcanvas-end {
        padding-right: env(safe-area-inset-right, 0px);
    }
    :where(.ui-refine) .offcanvas.offcanvas-top {
        padding-top: env(safe-area-inset-top, 0px);
    }
    :where(.ui-refine) .offcanvas.offcanvas-bottom {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* Topbar und Tab-Leiste quer: Notch links/rechts */
    :where(.ui-refine) .app-topbar-inner {
        padding-left: max(10px, env(safe-area-inset-left, 0px));
        padding-right: max(10px, env(safe-area-inset-right, 0px));
    }
    :where(.ui-refine) .app-mobile-bottomnav {
        padding-left: max(6px, env(safe-area-inset-left, 0px));
        padding-right: max(6px, env(safe-area-inset-right, 0px));
    }
}

/* Dialoge: auch Vollbild-Dialoge beginnen unter der Statusleiste und enden über dem
   Home-Indicator. Bootstrap setzt rechts eigenes Padding (Scrollbar), daher nur oben/unten. */
:where(.ui-refine) .modal {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ────────────────────────────────────────────────────────────
   App-Gefühl auf iPhone/iPad (Home-Bildschirm-Modus)
   ──────────────────────────────────────────────────────────── */
html:where(.ui-refine) {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* Kein 300-ms-Warten auf einen Doppeltipp; Zwei-Finger-Zoom bleibt möglich */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* iOS zoomt beim Antippen jedes Feldes unter 16 px in die Seite und bleibt dort.
   Nur auf Touch-Geräten; am Desktop bleiben die kompakten Grössen. */
@media (hover: none) and (pointer: coarse) {
    :where(.ui-refine) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),
    :where(.ui-refine) select,
    :where(.ui-refine) textarea,
    :where(.ui-refine) [contenteditable="true"],
    :where(.ui-refine) .ql-editor {
        font-size: 16px !important;
    }
}

/* Bedien-Leisten: kein Markieren, keine Link-Vorschau beim langen Drücken */
:where(.ui-refine) .app-topbar,
:where(.ui-refine) .app-mobile-bottomnav,
:where(.ui-refine) .app-sidebar .nav-link,
:where(.ui-refine) .app-sidebar .brand {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Ladebalken beim Seitenwechsel (im App-Modus zeigt iOS keinen) – public/js/pwa-shell.js */
.app-nav-progress {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 0;
    z-index: 2100;
    height: 2.5px;
    width: 0;
    background: var(--r-accent, #4a9eff);
    box-shadow: 0 0 6px color-mix(in srgb, var(--r-accent, #4a9eff) 60%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: width 8s cubic-bezier(0.1, 0.7, 0.2, 1), opacity 0.2s ease;
}
.app-nav-progress.is-active {
    width: 88%;
    opacity: 1;
}

/* Ziehen zum Aktualisieren (nur Home-Bildschirm-Modus) – public/js/pwa-shell.js */
.app-ptr {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 6px);
    left: 50%;
    z-index: 2090;
    width: 36px;
    height: 36px;
    margin-left: -18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--r-raised, #2a2a2e);
    color: var(--r-accent, #4a9eff);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(-48px);
    pointer-events: none;
}
.app-ptr .bi { font-size: 1.1rem; transition: transform 0.15s ease; }
.app-ptr.is-ready .bi { transform: rotate(180deg); }
.app-ptr.is-loading .bi { animation: app-ptr-spin 0.8s linear infinite; }
@keyframes app-ptr-spin { to { transform: rotate(360deg); } }

/* Weiche Seitenwechsel (Safari 18.2+, Chrome 126+): Topbar und Tab-Leiste bleiben stehen */
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    :where(.ui-refine) .app-topbar { view-transition-name: app-topbar; }
    :where(.ui-refine) .app-mobile-bottomnav { view-transition-name: app-tabbar; }
    ::view-transition-old(root),
    ::view-transition-new(root) { animation-duration: 0.18s; }
}

/* Stream-Texte (Auftrag, Task, Ticket, Portal, öffentliche Seiten): Der Editor speichert
   jede Zeile als eigenes <p>. Ohne Absatzabstand erscheint der Text wie beim Schreiben;
   Leerzeilen bleiben als <p><br></p> erhalten. */
html.ui-refine .stream-rich {
    line-height: 1.5;
}

html.ui-refine .stream-rich p {
    margin: 0;
}

html.ui-refine .stream-rich :is(ul, ol) {
    margin: 0.25rem 0;
    padding-left: 1.25rem;
}

html.ui-refine .stream-rich blockquote {
    margin: 0.35rem 0;
}

/* Navigation: inaktiv Linie, aktiv gefüllt (Phosphor, wie iOS-Tab-Leisten).
   Die Schrift-Zuordnung steht in public/css/icons-phosphor.css. */
:where(.ui-refine) .app-sidebar .nav-link.active > .bi::before,
:where(.ui-refine) .app-mobile-bottomnav a.active .bi::before,
:where(.ui-refine) .app-mobile-bottomnav button.active .bi::before {
    font-family: "Phosphor-Fill" !important;
}

/* ==========================================================================
   Tabellen mit Umbruch
   app-compact.css setzt in .table-responsive jede Zelle auf nowrap und die
   Tabelle auf max-content. Für Tabellen mit Fliesstext oder Formularen in
   Zellen (Bank-Transaktionen) gilt .is-wrapping: volle Breite, Text bricht um.
   ========================================================================== */
:where(.ui-refine) .table-responsive > table.is-wrapping {
    width: 100%;
}
:where(.ui-refine) .table-responsive > table.is-wrapping th,
:where(.ui-refine) .table-responsive > table.is-wrapping td {
    white-space: normal;
    overflow-wrap: anywhere;
}
:where(.ui-refine) .table-responsive > table.is-wrapping td { vertical-align: top; }
:where(.ui-refine) .table-responsive > table.is-wrapping .text-nowrap {
    white-space: nowrap !important;
    overflow-wrap: normal;
}

/* Mail: Statuszeile (Live-Verbindung, Tastenkürzel) nur am Desktop.
   Mobil lag sie unter der Tab-Leiste im Bereich des Home-Indikators. */
@media (max-width: 991.98px) {
    html.ui-refine .mail-status-bar {
        display: none !important;
    }
}

/* Belegscanner am Desktop: Karte in voller Inhaltsbreite (schrumpfte auf 2 px),
   Kameramodus bleibt in der Karte statt fix über Seitenleiste und Topbar. */
@media (min-width: 992px) {
    html.ui-refine .receipt-scanner {
        width: 100%;
    }
    html.ui-refine body.scan-scanning .rs-stage {
        position: relative;
        inset: auto;
    }
    html.ui-refine body.scan-scanning .rs-bottombar {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
    }
}

/* Buchhaltungs-Leiste eingeklappt: gilt auch auf Seiten ohne app-accounting.css
   (z. B. Belegscanner), sonst ragt «Buchhaltung · Firma» abgeschnitten heraus. */
@media (min-width: 992px) {
    html.ui-refine.sidebar-collapsed .app-sidebar .accounting-sidebar-header,
    html.ui-refine.sidebar-collapsed .app-sidebar .accounting-sidebar-section-label {
        display: none;
    }
    html.ui-refine.sidebar-collapsed .app-sidebar .accounting-sidebar-back {
        justify-content: center;
    }
}

/* ==========================================================================
   BAUSTEINE (Phase 2 Design-Durchgang, 21.10.2026)
   Gemeinsame Bausteine mit Präfix .r- – Doku: .claude/skills/smartlabs-ui/references/bausteine.md
   Nur Tokens, keine festen Farben. Bestehende Seiten werden erst in Phase 3
   bereichsweise umgestellt; bis dahin wirken diese Klassen nur dort, wo sie stehen.
   ========================================================================== */

/* ── Typo-Skala ─────────────────────────────────────────────────────────── */
:where(.ui-refine) .r-t-title1   { font-size: var(--r-fs-title1);   line-height: 1.18; font-weight: 700; letter-spacing: -0.022em; }
:where(.ui-refine) .r-t-title2   { font-size: var(--r-fs-title2);   line-height: 1.22; font-weight: 700; letter-spacing: -0.019em; }
:where(.ui-refine) .r-t-headline { font-size: var(--r-fs-headline); line-height: 1.3;  font-weight: 600; letter-spacing: -0.011em; }
:where(.ui-refine) .r-t-body     { font-size: var(--r-fs-body);     line-height: 1.45; font-weight: 400; }
:where(.ui-refine) .r-t-footnote { font-size: var(--r-fs-footnote); line-height: 1.38; }
:where(.ui-refine) .r-t-caption  { font-size: var(--r-fs-caption);  line-height: 1.33; }
:where(.ui-refine) .r-t-caption2 { font-size: var(--r-fs-caption2); line-height: 1.27; }
:where(.ui-refine) .r-t-2 { color: var(--r-text-2); }
:where(.ui-refine) .r-t-3 { color: var(--r-text-3); }
:where(.ui-refine) .r-num { font-variant-numeric: tabular-nums; }

/* ── Knöpfe: Primär, Sekundär, Ghost, Destruktiv ───────────────────────── */
:where(.ui-refine) .r-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--r-radius-sm);
    font: 500 var(--r-fs-footnote)/1 var(--r-font);
    letter-spacing: -0.006em;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    background: var(--r-fill);
    color: var(--r-text);
    transition: background-color var(--r-fast) var(--r-ease), color var(--r-fast) var(--r-ease);
}
:where(.ui-refine) .r-btn > .bi { font-size: 15px; line-height: 1; }
:where(.ui-refine) .r-btn:hover { background: var(--r-fill-strong); color: var(--r-text); }
:where(.ui-refine) .r-btn:active { background: var(--r-press); }
:where(.ui-refine) .r-btn:disabled,
:where(.ui-refine) .r-btn.is-disabled { opacity: 0.4; pointer-events: none; }
:where(.ui-refine) .r-btn--primary { background: var(--r-accent-button); color: var(--r-on-accent); font-weight: 600; }
:where(.ui-refine) .r-btn--primary:hover { background: var(--r-accent-button-hover); color: var(--r-on-accent); }
:where(.ui-refine) .r-btn--ghost { background: transparent; color: var(--r-accent-text); }
:where(.ui-refine) .r-btn--ghost:hover { background: var(--r-hover); color: var(--r-accent-text); }
:where(.ui-refine) .r-btn--danger { background: transparent; color: var(--r-danger); }
:where(.ui-refine) .r-btn--danger:hover { background: color-mix(in srgb, var(--r-danger) 12%, transparent); color: var(--r-danger); }
:where(.ui-refine) .r-btn--icon { width: 32px; padding: 0; }
:where(.ui-refine) .r-btn--sm { height: 28px; padding: 0 10px; font-size: var(--r-fs-caption); }
:where(.ui-refine) .r-btn--sm.r-btn--icon { width: 28px; padding: 0; }
:where(.ui-refine) .r-btn-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Destruktive Einträge im Menü «⋯» */
:where(.ui-refine) .dropdown-item.r-danger,
:where(.ui-refine) .dropdown-item.r-danger .bi { color: var(--r-danger) !important; }
:where(.ui-refine) .dropdown-item.r-danger:hover { background: color-mix(in srgb, var(--r-danger) 12%, transparent) !important; }

/* ── Status-Chip: fünf Töne, Punkt plus Text ────────────────────────────── */
:where(.ui-refine) .r-status {
    --tone: var(--r-text-2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 9px;
    border-radius: 11px;
    font: 600 var(--r-fs-caption)/1 var(--r-font);
    white-space: nowrap;
    background: color-mix(in srgb, var(--tone) 14%, transparent);
    color: color-mix(in srgb, var(--tone) 75%, var(--r-text));
}
:where(.ui-refine) .r-status::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tone);
}
:where(.ui-refine) .r-status--plain::before { display: none; }
:where(.ui-refine) .r-status--info    { --tone: var(--r-accent); }
:where(.ui-refine) .r-status--success { --tone: var(--r-success); }
:where(.ui-refine) .r-status--warning { --tone: var(--r-warning); }
:where(.ui-refine) .r-status--danger  { --tone: var(--r-danger); }

/* ── Seitenkopf ─────────────────────────────────────────────────────────── */
:where(.ui-refine) .r-header { display: grid; gap: 6px; margin-bottom: var(--r-6); }
:where(.ui-refine) .r-header__crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin: 0; padding: 0; list-style: none;
    font-size: var(--r-fs-footnote); color: var(--r-text-3);
}
:where(.ui-refine) .r-header__crumbs a { color: var(--r-text-2); text-decoration: none; }
:where(.ui-refine) .r-header__crumbs a:hover { color: var(--r-accent-text); }
:where(.ui-refine) .r-header__crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--r-text-3); }
:where(.ui-refine) .r-header__row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
:where(.ui-refine) .r-header__title {
    margin: 0; min-width: 0;
    font-size: var(--r-fs-title1); line-height: 1.18; font-weight: 700; letter-spacing: -0.022em;
    color: var(--r-text); text-wrap: balance; overflow-wrap: anywhere;
}
:where(.ui-refine) .r-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
:where(.ui-refine) .r-header__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--r-fs-footnote); color: var(--r-text-2); }
:where(.ui-refine) .r-header__meta a { color: var(--r-text-2); }
@media (max-width: 575.98px) {
    :where(.ui-refine) .r-header__title { font-size: var(--r-fs-title2); }
    /* Mobil zeigen Kopfaktionen nur das Symbol; der Text bleibt für Screenreader */
    :where(.ui-refine) .r-header__actions .r-btn:not(.r-btn--keep-label) .r-btn__label {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    :where(.ui-refine) .r-header__actions .r-btn:not(.r-btn--keep-label) { width: 44px; padding: 0; }
}

/* ── Karten und gruppierte Listen ───────────────────────────────────────── */
:where(.ui-refine) .r-card {
    background: var(--r-surface);
    border: 1px solid var(--r-hairline);
    border-radius: var(--r-radius-card);
    box-shadow: var(--r-shadow-card);
    min-width: 0;
}
:where(.ui-refine) .r-card__head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px 0;
}
:where(.ui-refine) .r-card__title { margin: 0; font-size: var(--r-fs-body); font-weight: 600; color: var(--r-text); }
:where(.ui-refine) .r-card__body { padding: 16px; }

:where(.ui-refine) .r-group { display: grid; gap: 6px; }
:where(.ui-refine) .r-group + .r-group { margin-top: var(--r-6); }
:where(.ui-refine) .r-group__label { margin: 0; padding: 0 16px; font-size: var(--r-fs-footnote); font-weight: 600; color: var(--r-text-3); }
:where(.ui-refine) .r-group__note { padding: 0 16px; font-size: var(--r-fs-caption); color: var(--r-text-3); }

:where(.ui-refine) .r-list {
    margin: 0; padding: 0; list-style: none;
    background: var(--r-surface);
    border: 1px solid var(--r-hairline);
    border-radius: var(--r-radius-card);
    overflow: hidden;
}
:where(.ui-refine) .r-list__row {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    min-height: 44px;
    padding: 10px 16px;
    color: var(--r-text);
    text-decoration: none;
}
:where(.ui-refine) .r-list__row + .r-list__row,
:where(.ui-refine) .r-list > li + li > .r-list__row { box-shadow: inset 0 1px 0 var(--r-hairline); }
:where(.ui-refine) a.r-list__row:hover,
:where(.ui-refine) .r-list__row.is-link:hover { background: var(--r-hover); color: var(--r-text); }
:where(.ui-refine) .r-list__lead { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; background: var(--r-fill); color: var(--r-text-2); }
:where(.ui-refine) .r-list__main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
:where(.ui-refine) .r-list__title { font-size: var(--r-fs-body); font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.ui-refine) .r-list__sub { font-size: var(--r-fs-footnote); color: var(--r-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.ui-refine) .r-list__meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: var(--r-fs-caption); color: var(--r-text-3); }
:where(.ui-refine) .r-list__chevron { flex: 0 0 auto; color: var(--r-text-3); font-size: 13px; }

/* ── Tabelle: Zeile klickbar, Aktionen über «⋯» ────────────────────────── */
:where(.ui-refine) .r-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
:where(.ui-refine) .r-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--r-fs-footnote); color: var(--r-text); }
:where(.ui-refine) .r-table th {
    padding: 8px 12px;
    font-size: var(--r-fs-caption); font-weight: 600; color: var(--r-text-3);
    text-align: left; white-space: nowrap;
    border-bottom: 1px solid var(--r-separator);
}
:where(.ui-refine) .r-table td { padding: 10px 12px; vertical-align: middle; border-bottom: 1px solid var(--r-hairline); }
:where(.ui-refine) .r-table tbody tr:last-child td { border-bottom: 0; }
:where(.ui-refine) .r-table .r-col-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
:where(.ui-refine) .r-table .r-col-nowrap { white-space: nowrap; }
:where(.ui-refine) .r-table .r-col-actions { width: 1%; text-align: right; white-space: nowrap; }
:where(.ui-refine) .r-table tr.r-row-link { position: relative; cursor: pointer; }
:where(.ui-refine) .r-table tr.r-row-link:hover td { background: var(--r-hover); }
:where(.ui-refine) .r-table .r-row-link__a { color: var(--r-text); font-weight: 600; text-decoration: none; }
:where(.ui-refine) .r-table .r-row-link__a::after { content: ""; position: absolute; inset: 0; }
/* Safari/WebKit ignoriert position:relative auf <tr>: das Overlay der letzten Zeile deckte die ganze
   Tabelle ab, jeder Klick öffnete denselben Datensatz. Zeilen mit data-href klickt das globale Skript
   (layouts/app) – dort kein Overlay; ohne data-href bleibt es auf die erste Zelle begrenzt. */
:where(.ui-refine) .r-table tr[data-href] .r-row-link__a::after { content: none; }
:where(.ui-refine) .r-table tr.r-row-link > td:first-child { position: relative; }
:where(.ui-refine) .r-table .r-row-link__a:focus-visible { outline: none; }
:where(.ui-refine) .r-table tr.r-row-link:has(.r-row-link__a:focus-visible) td { box-shadow: inset 0 0 0 2px var(--r-accent); }
:where(.ui-refine) .r-table .r-col-actions > * { position: relative; z-index: 1; }
:where(.ui-refine) .r-table .r-cell-sub { display: block; margin-top: 2px; font-size: var(--r-fs-caption); color: var(--r-text-3); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
:where(.ui-refine) .r-table .r-cell-id { color: var(--r-text-3); font-weight: 500; margin-right: 6px; font-variant-numeric: tabular-nums; }

/* ── Filterleiste, Segment, Chips, Auswahlleiste ───────────────────────── */
:where(.ui-refine) .r-filterbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: var(--r-4); }
:where(.ui-refine) .r-filterbar__search { flex: 1 1 220px; max-width: 360px; }
:where(.ui-refine) .r-seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: 9px; background: var(--r-fill); }
:where(.ui-refine) .r-seg > a,
:where(.ui-refine) .r-seg > button {
    display: inline-flex; align-items: center; gap: 6px;
    height: 28px; padding: 0 12px; border: 0; border-radius: 7px;
    background: transparent; color: var(--r-text-2);
    font: 500 var(--r-fs-footnote)/1 var(--r-font); text-decoration: none; white-space: nowrap; cursor: pointer;
}
:where(.ui-refine) .r-seg > .is-active,
:where(.ui-refine) .r-seg > [aria-current="page"],
:where(.ui-refine) .r-seg > [aria-pressed="true"] { background: var(--r-raised); color: var(--r-text); box-shadow: var(--r-shadow-seg); }
:where(.ui-refine) .r-chips { display: flex; flex-wrap: wrap; gap: 6px; }
:where(.ui-refine) .r-chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 12px; border: 0; border-radius: 15px;
    background: var(--r-fill); color: var(--r-text-2);
    font: 500 var(--r-fs-footnote)/1 var(--r-font); text-decoration: none; white-space: nowrap; cursor: pointer;
}
:where(.ui-refine) .r-chip:hover { background: var(--r-fill-strong); color: var(--r-text); }
:where(.ui-refine) .r-chip.is-active,
:where(.ui-refine) .r-chip[aria-pressed="true"],
:where(.ui-refine) .r-chip[aria-current="page"] { background: var(--r-accent-tint); color: var(--r-accent-text); }
:where(.ui-refine) .r-chip__count { font-variant-numeric: tabular-nums; color: inherit; opacity: 0.75; }
:where(.ui-refine) .r-selectionbar {
    position: sticky; bottom: calc(var(--r-3) + env(safe-area-inset-bottom, 0px)); z-index: 20;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 8px 8px 8px 16px; margin-top: var(--r-3);
    border-radius: var(--r-radius-overlay);
    background: var(--r-menu); box-shadow: var(--r-shadow-menu);
    -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
    font-size: var(--r-fs-footnote); color: var(--r-text);
}
:where(.ui-refine) .r-selectionbar[hidden] { display: none !important; }

/* ── Formularfeld ───────────────────────────────────────────────────────── */
:where(.ui-refine) .r-field { display: grid; gap: 6px; min-width: 0; }
:where(.ui-refine) .r-field > label,
:where(.ui-refine) .r-field__label { font-size: var(--r-fs-footnote); font-weight: 600; color: var(--r-text-2); }
:where(.ui-refine) .r-field__hint { font-size: var(--r-fs-caption); color: var(--r-text-3); }
:where(.ui-refine) .r-field__error { display: flex; gap: 6px; align-items: flex-start; font-size: var(--r-fs-caption); color: var(--r-danger); }
:where(.ui-refine) .r-field .form-control,
:where(.ui-refine) .r-field .form-select { min-height: 36px; }
:where(.ui-refine) .r-fields { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

/* ── Dialog und Sheet ───────────────────────────────────────────────────── */
:where(.ui-refine) .modal.r-modal .modal-dialog { max-width: 520px; }
:where(.ui-refine) .modal.r-modal--lg .modal-dialog { max-width: 880px; }
@media (max-width: 575.98px) {
    /* iPhone: Dialoge als Blatt von unten, mit Griff */
    :where(.ui-refine) .modal.r-modal .modal-dialog {
        display: flex; align-items: flex-end;
        min-height: 100%; margin: 0; max-width: none;
    }
    :where(.ui-refine) .modal.r-modal .modal-content {
        width: 100%;
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 12px);
        border-radius: var(--r-radius-sheet) var(--r-radius-sheet) 0 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    :where(.ui-refine) .modal.r-modal .modal-content::before {
        content: ""; display: block; width: 36px; height: 5px; margin: 6px auto 0;
        border-radius: 3px; background: var(--r-fill-strong);
    }
    :where(.ui-refine) .modal.r-modal.fade .modal-dialog { transform: translateY(24px); }
    :where(.ui-refine) .modal.r-modal.show .modal-dialog { transform: none; }
}

/* ── Leer- und Ladezustand ──────────────────────────────────────────────── */
:where(.ui-refine) .r-empty {
    display: grid; justify-items: center; gap: 8px;
    padding: 40px 16px; text-align: center;
}
:where(.ui-refine) .r-empty__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; margin-bottom: 4px; border-radius: 50%;
    background: var(--r-fill); color: var(--r-text-3); font-size: 26px;
}
:where(.ui-refine) .r-empty__title { margin: 0; font-size: var(--r-fs-headline); font-weight: 600; color: var(--r-text); }
:where(.ui-refine) .r-empty__text { margin: 0; max-width: 44ch; font-size: var(--r-fs-footnote); color: var(--r-text-2); }
:where(.ui-refine) .r-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
:where(.ui-refine) .r-empty--inline { padding: 20px 16px; }

:where(.ui-refine) .r-skeleton {
    display: block; height: 12px; border-radius: 6px;
    background: linear-gradient(90deg, var(--r-fill) 0%, var(--r-fill-strong) 50%, var(--r-fill) 100%);
    background-size: 200% 100%;
    animation: r-skeleton 1.3s ease-in-out infinite;
}
:where(.ui-refine) .r-skeleton--title { height: 15px; width: 60%; }
:where(.ui-refine) .r-skeleton-row { display: grid; gap: 8px; padding: 12px 16px; }
:where(.ui-refine) .r-skeleton-row + .r-skeleton-row { box-shadow: inset 0 1px 0 var(--r-hairline); }
@keyframes r-skeleton { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
    :where(.ui-refine) .r-skeleton { animation: none; }
}

/* ── Touch: Ziele mindestens 44 px ──────────────────────────────────────── */
@media (pointer: coarse) {
    :where(.ui-refine) .r-btn { height: 44px; padding: 0 16px; font-size: var(--r-fs-body); }
    :where(.ui-refine) .r-btn--icon,
    :where(.ui-refine) .r-btn--sm.r-btn--icon { width: 44px; padding: 0; }
    :where(.ui-refine) .r-btn--sm { height: 36px; font-size: var(--r-fs-footnote); }
    :where(.ui-refine) .r-chip { height: 36px; padding: 0 14px; }
    :where(.ui-refine) .r-seg > a,
    :where(.ui-refine) .r-seg > button { height: 36px; }
    :where(.ui-refine) .r-field .form-control,
    :where(.ui-refine) .r-field .form-select { min-height: 44px; }
}

/* Bausteine als Link: app.css färbt jedes <a> mit !important in Akzentblau.
   Jeder Baustein legt seine Textfarbe in --r-c ab, Links übernehmen sie mit Vorrang. */
:where(.ui-refine) .r-btn { --r-c: var(--r-text); }
:where(.ui-refine) .r-btn--primary { --r-c: var(--r-on-accent); }
:where(.ui-refine) .r-btn--ghost { --r-c: var(--r-accent-text); }
:where(.ui-refine) .r-btn--danger { --r-c: var(--r-danger); }
:where(.ui-refine) .r-chip { --r-c: var(--r-text-2); }
:where(.ui-refine) .r-chip:hover { --r-c: var(--r-text); }
:where(.ui-refine) .r-chip.is-active,
:where(.ui-refine) .r-chip[aria-current="page"] { --r-c: var(--r-accent-text); }
:where(.ui-refine) .r-seg > a { --r-c: var(--r-text-2); }
:where(.ui-refine) .r-seg > a.is-active,
:where(.ui-refine) .r-seg > a[aria-current="page"] { --r-c: var(--r-text); }
:where(.ui-refine) .r-list__row,
:where(.ui-refine) .r-row-link__a { --r-c: var(--r-text); }
:where(.ui-refine) .r-header__crumbs a,
:where(.ui-refine) .r-header__meta a { --r-c: var(--r-text-2); }
:where(.ui-refine) .r-header__crumbs a:hover { --r-c: var(--r-accent-text); }
:where(.ui-refine) a:is(.r-btn, .r-chip, .r-list__row, .r-row-link__a),
:where(.ui-refine) .r-seg > a,
:where(.ui-refine) .r-header__crumbs a,
:where(.ui-refine) .r-header__meta a {
    color: var(--r-c) !important;
    text-decoration: none;
}

/* ==========================================================================
   SHELL: Landmarks und Tastatur (Phase 3, 21.10.2026)
   ========================================================================== */
/* «Zum Inhalt springen»: unsichtbar, bis die Tastatur ihn erreicht */
:where(.ui-refine) .r-skip-link {
    position: fixed;
    top: -200px;
    left: 8px;
    z-index: 2000;
    padding: 10px 16px;
    border-radius: var(--r-radius-sm);
    background: var(--r-accent-button);
    color: var(--r-on-accent) !important;
    font: 600 var(--r-fs-footnote)/1 var(--r-font);
    text-decoration: none;
}
:where(.ui-refine) .r-skip-link:focus,
:where(.ui-refine) .r-skip-link:focus-visible {
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    outline: 2px solid var(--r-text);
    outline-offset: 2px;
}
/* Sprungziel: kein Ring um den ganzen Inhalt */
:where(.ui-refine) #main-content:focus { outline: none; }

/* Mobiler Seitentitel ist jetzt <h1>: Browser-Abstände zurücksetzen */
:where(.ui-refine) h1.page-mobile-title-main { margin: 0; }

/* ==========================================================================
   BUCHHALTUNG (Phase 3, 21.10.2026)
   ========================================================================== */
/* Bank-Transaktionen: Abgleich-Werkzeuge pro Zeile hinter «Abgleichen …» */
:where(.ui-refine) .bank-tx-tools > summary { list-style: none; width: max-content; }
:where(.ui-refine) .bank-tx-tools > summary::-webkit-details-marker { display: none; }
:where(.ui-refine) .bank-tx-tools[open] > summary { background: var(--r-fill-strong); }
:where(.ui-refine) .bank-tx-tools__body { display: grid; gap: 4px; margin-top: 8px; }
/* Buchhaltungs-Kopf (page-shell) nutzt den Baustein-Kopf: kein Extra-Abstand der alten Kopfzeile */
:where(.ui-refine) .accounting-page > .r-header { margin-bottom: var(--r-5); }

/* Tabelle auf dem iPhone gestapelt (.r-table--stack): Titelzelle oben, Betrag rechts, «⋯» oben rechts */
@media (max-width: 767.98px) {
    :where(.ui-refine) .r-table--stack thead { display: none; }
    :where(.ui-refine) .r-table--stack,
    :where(.ui-refine) .r-table--stack tbody { display: block; }
    :where(.ui-refine) .r-table--stack tr {
        position: relative;
        display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
        padding: 12px 52px 12px 12px;
        border-bottom: 1px solid var(--r-hairline);
    }
    :where(.ui-refine) .r-table--stack tbody tr:last-child { border-bottom: 0; }
    :where(.ui-refine) .r-table--stack td { display: block; padding: 0; border: 0 !important; font-size: var(--r-fs-footnote); color: var(--r-text-2); }
    :where(.ui-refine) .r-table--stack td.r-cell-title { order: -1; flex: 1 0 100%; font-size: var(--r-fs-body); font-weight: 600; color: var(--r-text); }
    :where(.ui-refine) .r-table--stack td.r-col-num { margin-left: auto; color: var(--r-text); }
    :where(.ui-refine) .r-table--stack td.r-col-actions { position: absolute; top: 6px; right: 4px; width: auto; }
    :where(.ui-refine) .r-table--stack tr.d-none { display: none !important; }
}

/* Bank-Transaktionen auf dem iPhone: Zeilen untereinander statt 5 Spalten */
@media (max-width: 767.98px) {
    :where(.ui-refine) .table-responsive > table.is-wrapping thead { display: none; }
    :where(.ui-refine) .table-responsive > table.is-wrapping,
    :where(.ui-refine) .table-responsive > table.is-wrapping tbody,
    :where(.ui-refine) .table-responsive > table.is-wrapping tr { display: block; width: 100%; }
    :where(.ui-refine) .table-responsive > table.is-wrapping tr {
        display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center;
        padding: 12px 0; border-bottom: 1px solid var(--r-hairline);
    }
    :where(.ui-refine) .table-responsive > table.is-wrapping td {
        display: block; padding: 0; border: 0 !important;
        min-width: 0 !important; width: auto !important;
    }
    :where(.ui-refine) .table-responsive > table.is-wrapping td:nth-child(2) { order: -1; flex: 1 0 100%; }
    :where(.ui-refine) .table-responsive > table.is-wrapping td:last-child { flex: 1 0 100%; }
}

/* ==========================================================================
   BEREICH .r-scope: Bootstrap-Knöpfe und -Badges im Baustein-Stil
   Für dichte Bereiche mit vielen JS-Haken (Buchhaltung): Markup bleibt, die Optik
   folgt den Bausteinen. Primär = --r-accent-button, keine grünen/gelben/blauen
   Füllknöpfe, Destruktiv = roter Text, Badges = .r-status-Töne.
   ========================================================================== */
:where(.ui-refine) .r-scope .btn-primary {
    background: var(--r-accent-button) !important;
    border-color: transparent !important;
}
:where(.ui-refine) .r-scope .btn-primary:hover { background: var(--r-accent-button-hover) !important; }
:where(.ui-refine) .r-scope :is(.btn-outline-primary, .btn-outline-success, .btn-success, .btn-outline-info, .btn-outline-warning, .btn-info, .btn-warning) {
    background: var(--r-fill) !important;
    border-color: transparent !important;
    color: var(--r-text) !important;
    font-weight: 500;
}
:where(.ui-refine) .r-scope :is(.btn-outline-primary, .btn-outline-success, .btn-success, .btn-outline-info, .btn-outline-warning, .btn-info, .btn-warning):hover {
    background: var(--r-fill-strong) !important;
    color: var(--r-text) !important;
}
:where(.ui-refine) .r-scope :is(.btn-outline-primary, .btn-outline-success, .btn-outline-secondary).active,
:where(.ui-refine) .r-scope .btn-check:checked + :is(.btn-outline-primary, .btn-outline-success, .btn-outline-secondary) {
    background: var(--r-accent-tint) !important;
    color: var(--r-accent-text) !important;
}
:where(.ui-refine) .r-scope :is(.btn-outline-success, .btn-success, .btn-outline-info, .btn-outline-warning) > .bi { color: inherit; }
/* Dunkel: die ältere Regel `[data-theme=dark] .btn-success { color: #06210f }` ist spezifischer und färbte
   den Text dieser neutralen Knöpfe fast schwarz auf grauer Fläche (z. B. Telefon-Knopf im Kontaktkopf). */
html:where(.ui-refine)[data-theme="dark"] .r-scope :is(.btn-outline-primary, .btn-outline-success, .btn-success, .btn-outline-info, .btn-outline-warning, .btn-info, .btn-warning),
html:where(.ui-refine)[data-theme="dark"] .r-scope :is(.btn-outline-primary, .btn-outline-success, .btn-success, .btn-outline-info, .btn-outline-warning, .btn-info, .btn-warning):hover {
    color: var(--r-text) !important;
}
:where(.ui-refine) .r-scope .btn-danger {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--r-danger) !important;
}
:where(.ui-refine) .r-scope .btn-danger:hover { background: color-mix(in srgb, var(--r-danger) 12%, transparent) !important; }

:where(.ui-refine) .r-scope .badge {
    --tone: var(--r-text-2);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 20px;
    padding: 0 8px;
    border: 0 !important;
    border-radius: 10px;
    font: 600 var(--r-fs-caption)/1 var(--r-font);
    letter-spacing: 0;
    background: color-mix(in srgb, var(--tone) 14%, transparent) !important;
    color: color-mix(in srgb, var(--tone) 75%, var(--r-text)) !important;
}
:where(.ui-refine) .r-scope .badge:is(.bg-success, .text-bg-success, .bg-success-subtle) { --tone: var(--r-success); }
:where(.ui-refine) .r-scope .badge:is(.bg-warning, .text-bg-warning, .bg-warning-subtle) { --tone: var(--r-warning); }
:where(.ui-refine) .r-scope .badge:is(.bg-danger, .text-bg-danger, .bg-danger-subtle) { --tone: var(--r-danger); }
:where(.ui-refine) .r-scope .badge:is(.bg-info, .text-bg-info, .bg-primary, .text-bg-primary, .bg-info-subtle, .bg-primary-subtle) { --tone: var(--r-accent); }
:where(.ui-refine) .r-scope .badge:is(.bg-secondary, .text-bg-secondary, .bg-light, .text-bg-light, .bg-dark, .text-bg-dark, .bg-secondary-subtle) { --tone: var(--r-text-2); }
/* Kreditkarten: Kartenwahl im Kopf neben «Abrechnung hochladen» */
:where(.ui-refine) .cc-upload-pick { min-width: 14rem; }
@media (max-width: 575.98px) {
    :where(.ui-refine) .cc-upload-pick { flex: 1 1 100%; min-width: 0; }
}
/* Segment, das bei Platzmangel seitlich scrollt statt umzubrechen (Prozess-Panel: Bereich) */
:where(.ui-refine) .r-seg--scroll { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
:where(.ui-refine) .r-seg--scroll::-webkit-scrollbar { display: none; }
:where(.ui-refine) .r-seg--scroll > a { flex: 0 0 auto; }
:where(.ui-refine) .r-seg .r-chip__count { font-variant-numeric: tabular-nums; opacity: 0.7; }
:where(.ui-refine) .process-search { flex: 1 1 140px; max-width: 240px; }
/* Prozess-Panel: farbige Signal-Chips (inbox-chip) im Stil der Status-Töne */
:where(.ui-refine) .r-scope .inbox-chip {
    --tone: var(--r-text-2);
    display: inline-flex; align-items: center; gap: 5px;
    min-height: 20px; padding: 0 8px; border: 0 !important; border-radius: 10px;
    font: 600 var(--r-fs-caption)/1 var(--r-font);
    background: color-mix(in srgb, var(--tone) 14%, transparent) !important;
    color: color-mix(in srgb, var(--tone) 75%, var(--r-text)) !important;
}
:where(.ui-refine) .r-scope .inbox-chip--ok { --tone: var(--r-success); }
:where(.ui-refine) .r-scope .inbox-chip--warn { --tone: var(--r-warning); }
:where(.ui-refine) .r-scope .inbox-chip--info { --tone: var(--r-accent); }
:where(.ui-refine) .r-scope .inbox-chip--danger { --tone: var(--r-danger); }
:where(.ui-refine) .r-scope .inbox-chip--muted { --tone: var(--r-text-3); }

/* ==========================================================================
   MAIL (Phase 3, 21.10.2026)
   ========================================================================== */
/* Sammelaktionen erst zeigen, wenn etwas ausgewählt ist (Auswahlleiste statt grauer Knöpfe) */
html.ui-refine #mailBulkDelete:disabled,
html.ui-refine #mailBulkSpam:disabled { display: none; }

/* Listen-Status als Status-Chip: «Du bist dran» und «Nachfassen?» = Warnung, «Du wartest» = neutral */
html.ui-refine .mail-status-chip {
    --tone: var(--r-text-2);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 6px;
    padding: 0 8px;
    min-height: 20px;
    border-radius: 10px;
    font: 600 var(--r-fs-caption2)/1 var(--r-font);
    vertical-align: 1px;
    background: color-mix(in srgb, var(--tone) 14%, transparent);
    color: color-mix(in srgb, var(--tone) 75%, var(--r-text));
}
html.ui-refine .mail-status-chip::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tone);
}
html.ui-refine .mail-status-chip.mail-status-open,
html.ui-refine .mail-status-chip.mail-status-followup { --tone: var(--r-warning); background: color-mix(in srgb, var(--tone) 14%, transparent); color: color-mix(in srgb, var(--tone) 75%, var(--r-text)); }
/* Firmen-Postfach (SharedMailbox): zugewiesen = Akzent, in Bearbeitung = Warnung, erledigt = Erfolg */
html.ui-refine .mail-status-chip.mail-status-shared-assigned { --tone: var(--r-accent); background: color-mix(in srgb, var(--tone) 14%, transparent); color: color-mix(in srgb, var(--tone) 75%, var(--r-text)); }
html.ui-refine .mail-status-chip.mail-status-shared-working { --tone: var(--r-warning); background: color-mix(in srgb, var(--tone) 14%, transparent); color: color-mix(in srgb, var(--tone) 75%, var(--r-text)); }
html.ui-refine .mail-status-chip.mail-status-shared-done { --tone: var(--r-success); background: color-mix(in srgb, var(--tone) 14%, transparent); color: color-mix(in srgb, var(--tone) 75%, var(--r-text)); }
/* Firmen-Postfach: Leiste über dem Thread (_shared-bar) und «Beantwortet von» je Mail */
html.ui-refine .mail-shared-bar {
    display: flex; flex-direction: column; gap: 8px;
    margin: 0 0 12px; padding: 10px 12px;
    border: 1px solid var(--r-separator); border-radius: var(--r-radius-md, 12px);
    background: color-mix(in srgb, var(--r-accent) 6%, var(--r-surface, transparent));
}
html.ui-refine .mail-shared-bar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
html.ui-refine .mail-shared-bar__box { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font: 600 var(--r-fs-footnote, .82rem)/1.3 var(--r-font); color: var(--r-text); }
html.ui-refine .mail-shared-bar__box .bi { color: var(--r-accent); }
html.ui-refine .mail-shared-bar__status { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
html.ui-refine .mail-shared-bar__status .mail-status-chip { margin-right: 0; }
html.ui-refine .mail-shared-bar__assign { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
html.ui-refine .mail-shared-bar__assign .form-select { width: auto; max-width: 14rem; }
html.ui-refine .mail-shared-bar__label { font-size: var(--r-fs-footnote, .82rem); color: var(--r-text-2); margin: 0; }
html.ui-refine .mail-shared-bar__note { display: flex; gap: 6px; align-items: baseline; font-size: var(--r-fs-footnote, .82rem); color: var(--r-text-2); }
html.ui-refine .mail-shared-bar__note--warn { color: color-mix(in srgb, var(--r-warning) 80%, var(--r-text)); font-weight: 600; }
html.ui-refine .mail-shared-bar__history summary { cursor: pointer; font-size: var(--r-fs-footnote, .82rem); color: var(--r-text-2); }
html.ui-refine .mail-shared-bar__history ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; font-size: var(--r-fs-footnote, .82rem); color: var(--r-text); }
html.ui-refine .mail-shared-bar__when { display: inline-block; min-width: 6.5em; color: var(--r-text-2); font-variant-numeric: tabular-nums; }
/* Seitenleiste: lange Postfach-Adressen kürzen statt die Ungelesen-Zahl zu überdecken */
html.ui-refine .mailbox-link.mailbox-shared { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
html.ui-refine .mailbox-link.mailbox-shared > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui-refine .mailbox-link.mailbox-shared > span:first-child .small { overflow: hidden; text-overflow: ellipsis; }
html.ui-refine .mailbox-link.mailbox-shared .mailbox-count { flex-shrink: 0; }
html.ui-refine .mail-shared-sent { display: inline-flex; align-items: center; gap: 4px; font-size: var(--r-fs-caption1, .75rem); font-weight: 600; color: var(--r-accent); }
@media (max-width: 576px) {
    html.ui-refine .mail-shared-bar__status { margin-left: 0; }
    html.ui-refine .mail-shared-bar__actions { flex-wrap: nowrap; }
    html.ui-refine .mail-shared-bar__actions .btn-text { display: none; }
    html.ui-refine .mail-shared-bar__assign { flex: 1 1 0; }
    html.ui-refine .mail-shared-bar__assign .form-select { width: 100%; max-width: none; min-width: 0; }
}

/* Hohe Priorität: das «H»-Chip reicht – keine rote Zeilenfläche und kein roter Rand */
html.ui-refine .mail-row.urgent .mail-row-content {
    border-left: 0;
    background: transparent;
}
html.ui-refine .mail-row.urgent.active .mail-row-content { background: var(--r-accent-tint); }
/* Empfängerfeld (An/Cc/Bcc) sieht aus wie jedes andere Feld – vorher grau wie deaktiviert */
html.ui-refine .email-picker__box {
    background: var(--bg-input);
    border: 1px solid var(--r-separator);
    border-radius: var(--r-radius-sm);
}
html.ui-refine .email-picker__box:focus-within {
    border-color: var(--r-accent);
    box-shadow: 0 0 0 3px var(--r-accent-tint-strong);
}
html.ui-refine .email-picker__chip {
    background: var(--r-accent-tint);
    color: var(--r-text);
}
/* Blatt auf dem iPhone reicht bis zum unteren Rand; der Home-Indicator-Abstand liegt im Blatt selbst */
@media (max-width: 575.98px) {
    :where(.ui-refine) .modal.r-modal { padding-bottom: 0; }
}

/* ==========================================================================
   KALENDER (Phase 3, 21.10.2026) – calendar-apple.css bleibt das Modul-Design,
   hier nur die Angleichung an die Bausteine
   ========================================================================== */
/* Primär: gleiche Fläche wie .r-btn--primary (Weiss darauf ≥ 4.5:1; vorher --r-accent, dunkel 2.8:1) */
html.ui-refine .calendar-page .apple-btn-primary,
html.ui-refine .apple-event-modal .apple-btn-primary {
    background: var(--r-accent-button);
    color: var(--r-on-accent);
}
html.ui-refine .calendar-page .apple-btn-primary:hover,
html.ui-refine .apple-event-modal .apple-btn-primary:hover { background: var(--r-accent-button-hover); }

/* iPhone: grosser Titel links, «+» rechts (vorher mittig zusammengeschoben) */
@media (max-width: 991.98px) {
    html.ui-refine .calendar-page .apple-cal-mobile-top,
    html.ui-refine .calendar-page .apple-cal-mobile-controls { align-self: stretch; }
    html.ui-refine .calendar-page .apple-cal-mobile-top { align-items: center; }
    html.ui-refine .calendar-page .apple-cal-mobile-top > .min-w-0 { flex: 1 1 auto; text-align: left; }
    html.ui-refine .calendar-page .apple-cal-title--mobile {
        font-size: var(--r-fs-title1);
        letter-spacing: -0.022em;
        word-spacing: normal;
        margin: 0;
    }
    html.ui-refine .calendar-page .apple-cal-subtitle { text-align: left; }
    html.ui-refine .calendar-page .apple-btn-primary--round { width: 44px; height: 44px; flex: 0 0 auto; }
}

/* Touch: Symbolknöpfe des Kalenders mindestens 44 px */
@media (pointer: coarse) {
    html.ui-refine .calendar-page .apple-icon-btn { width: 44px; height: 44px; }
    html.ui-refine .calendar-page .apple-nav-btn { min-height: 40px; }
}

/* Kalenderliste: «⋯» pro Kalender als ruhiger Ghost-Knopf */
html.ui-refine .calendar-page .cal-list .r-btn--ghost,
html.ui-refine .calendar-page .r-btn--ghost.r-btn--icon { --r-c: var(--r-text-2); }

/* ==========================================================================
   PROJEKTE (Phase 3, 21.10.2026): Aufträge, Tasks, Tickets, Meilensteine
   .r-scope kommt aus dem Layout (Routen app.tasks.*, app.tickets.*, app.orders.* …)
   ========================================================================== */
/* iPhone: keine Karten in der Karte – die Listenkarte wird zur Fläche, die Einträge bleiben Karten */
@media (max-width: 991.98px) {
    html.ui-refine .r-scope .card:has(.list-item-card),
    html.ui-refine .r-scope .card:has(> .card-body > .d-lg-none > .card),
    html.ui-refine .r-scope .card:has(> .card-body > .mobile-card-view) {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    html.ui-refine .r-scope .card:has(.list-item-card) > .card-body,
    html.ui-refine .r-scope .card:has(> .card-body > .d-lg-none > .card) > .card-body,
    html.ui-refine .r-scope .card:has(> .card-body > .mobile-card-view) > .card-body { padding: 0 !important; }
}
/* Zeilenmenü «⋯» in Listen: ruhig, erst beim Überfahren deutlich */
@media (hover: hover) {
    html.ui-refine .r-scope .pm-col-actions .r-btn--icon { opacity: 0.55; }
    html.ui-refine .r-scope tr:hover .pm-col-actions .r-btn--icon,
    html.ui-refine .r-scope .pm-col-actions .r-btn--icon:focus-visible,
    html.ui-refine .r-scope .pm-col-actions .r-btn--icon[aria-expanded="true"] { opacity: 1; }
}

/* ==========================================================================
   FIRMEN UND KONTAKTE (Phase 3, 21.10.2026)
   ========================================================================== */
/* Kontaktkarte: ruhige Fläche statt Farbverlauf im Kopf */
html.ui-refine .ccard .ccard-hero {
    background: var(--r-surface);
    border-color: var(--r-hairline);
    box-shadow: var(--r-shadow-card);
}

/* ==========================================================================
   DOKUMENTE, OFFERTEN, RECHNUNGEN (Phase 3, 21.10.2026)
   ========================================================================== */
/* Zurück-Wege (Auftrag, Herkunft, Liste) als ruhige Links statt Knopf-Pillen */
:where(.ui-refine) .r-backlinks { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--r-fs-footnote); }
:where(.ui-refine) .r-backlink {
    display: inline-flex; align-items: center; gap: 4px; min-height: 28px;
    color: var(--r-text-2) !important; text-decoration: none;
}
:where(.ui-refine) .r-backlink:hover { color: var(--r-accent-text) !important; }
:where(.ui-refine) .r-backlink .bi { font-size: 12px; }

/* Mehrfachaktionen nur, wenn etwas ausgewählt ist (vorher am Desktop immer sichtbar) */
html.ui-refine .bulk-action-card.is-idle { display: none; }

/* Dokumente auf dem iPhone: zuerst die Dokumente, der Ordnerbaum danach */
@media (max-width: 991.98px) {
    html.ui-refine #documentsFolderCol { order: 2; }
}

/* ==========================================================================
   TYPOGRAFIE-SYSTEM (21.10.2026): eine Skala für alle Bereiche
   Seitentitel 28/700 · Abschnitt 22/700 · Kartenkopf 15/600 · Label 12/600 · nichts unter 11 px
   ========================================================================== */
html.ui-refine .app-content :is(h1.r-header__title, .page-header h1, .page-header-title) {
    font-size: var(--r-fs-title1);
    font-weight: 700;
    letter-spacing: -0.022em;
}
@media (max-width: 575.98px) {
    html.ui-refine .app-content :is(h1.r-header__title, .page-header h1, .page-header-title) { font-size: var(--r-fs-title2); }
}
html.ui-refine .app-content .ccard-hero h1 { font-size: var(--r-fs-title1); font-weight: 700; letter-spacing: -0.022em; }
html.ui-refine .app-content :is(.card-header h5, .card-header .fw-semibold, .r-card__title) {
    font-size: var(--r-fs-body);
    font-weight: 600;
    letter-spacing: -0.011em;
}
/* h6 ist meist Kartenkopf oder Zeilentitel (≈ 60 Stellen) → wie Kartenkopf; nur als Label markierte h6 werden klein */
html.ui-refine .app-content h6 {
    font-size: var(--r-fs-body);
    font-weight: 600;
    letter-spacing: -0.011em;
}
html.ui-refine .app-content h6:is(.small, .text-muted, .dropdown-header, .card-subtitle) {
    font-size: var(--r-fs-caption);
    letter-spacing: 0.01em;
}
/* Untergrenze 11 px für kleine Marken */
html.ui-refine :is(.accounting-neu-chip, .acct-kbd, .fc .fc-daygrid-week-number) { font-size: var(--r-fs-caption2) !important; }

/* ==========================================================================
   EINSTELLUNGEN, PROFIL, TELEFONIE (21.10.2026)
   ========================================================================== */
:where(.ui-refine) .settings-push-actions { padding: 0 16px 12px 56px; }
:where(.ui-refine) .r-group__label { font-size: var(--r-fs-footnote); font-weight: 600; color: var(--r-text-3); margin: 0; }
:where(.ui-refine) .r-header.d-none.d-lg-grid { display: none; }
@media (min-width: 992px) { :where(.ui-refine) .r-header.d-none.d-lg-grid { display: grid !important; } }
/* Untergrenze 11 px auch für Tab-Leiste, Zähler und Kalender-Wochentage */
html.ui-refine .app-mobile-bottomnav .label { font-size: var(--r-fs-caption2) !important; }
html.ui-refine :is(.app-mobile-bottomnav, .app-sidebar) .badge.rounded-pill,
html.ui-refine .accounting-neu-count,
html.ui-refine .calendar-page .fc .apple-day-header { font-size: var(--r-fs-caption2) !important; }
/* Tab-Leiste: alle Symbole gleich hoch, damit die Beschriftungen auf einer Linie liegen
   (der Mail-Tab hat einen Behälter für den Zähler und sass 5 px höher) */
html.ui-refine .app-mobile-bottomnav .bar > * > i,
html.ui-refine .app-mobile-bottomnav .app-mobile-navicon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
}

/* ────────────────────────────────────────────────────────────
   Safe-Area in Vollbild-Detailansichten (iPhone, Home-Bildschirm-Modus)
   Diese Bereiche liegen fixiert über der ganzen Seite; ihre Kopfzeile
   (Zurück, Titel) rutschte unter Statusleiste/Notch (Mail, 21.10.2026).
   ──────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    /* Mail: geöffnete Nachricht – Kopfzeile mit «Zurück» */
    html.ui-refine .mail-apple .mail-mobile-bar {
        padding-top: calc(10px + env(safe-area-inset-top, 0px));
    }
    /* Mail: Ordner-Seitenleiste */
    html.ui-refine .mail-apple .mail-sidebar {
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    /* Smarty: Seitenbereich als Vollbild */
    html.ui-refine .smarty-side-panel {
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    /* Untere Aktionsleisten der Buchhaltung über dem Home-Indicator */
    html.ui-refine .accounting-mobile-primary {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/* ==========================================================================
   iPad QUER (Home-Bildschirm, 22.10.2026)
   Ab 992 px gilt das Desktop-Layout, auch auf dem iPad quer. Mit viewport-fit=cover und
   transparenter Statusleiste lagen Kopfleiste und Seitenleiste darunter (Uhrzeit über Suche und Logo).
   Ausserhalb des Home-Bildschirm-Modus sind die Werte 0, am Mac und im Browser ändert sich nichts.
   ========================================================================== */
@media (min-width: 992px) {
    html.ui-refine .app-topbar {
        padding-top: env(safe-area-inset-top, 0px);
    }
    html.ui-refine .app-sidebar {
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-left: env(safe-area-inset-left, 0px);
    }
    html.ui-refine .app-topbar-inner {
        padding-right: max(14px, env(safe-area-inset-right, 0px));
    }
}
@media (min-width: 993px) {
    /* Mail-Raster rechnet mit fester Kopfhöhe: den Statusleisten-Abstand mit abziehen */
    html.ui-refine .mail-grid {
        height: calc(100vh - 160px - var(--mail-status-h, 0px) - env(safe-area-inset-top, 0px));
    }
}

/* E-Mail-Adressen in /app (x-mail-link): Link öffnet 360-Mail, Pfeil zeigt weitere Optionen */
.mail-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    vertical-align: baseline;
}

.mail-link > a[data-mail-link]:not(.btn) {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.mail-link-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    min-height: 22px;
    padding: 0 3px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--r-text-3, currentColor);
    font-size: 0.7em;
    line-height: 1;
    cursor: pointer;
}

.mail-link-toggle:hover,
.mail-link-toggle[aria-expanded="true"] {
    background: var(--r-fill, transparent);
    color: var(--r-text, currentColor);
}

/* ==========================================================================
   STREAM-DOCK (22.10.2026) – Eingabefeld der Streams unten am Fenster
   Skript: resources/views/partials/_stream-dock.blade.php (Karte mit data-stream-composer).
   Eingeklappt: einzeilige Leiste, klebt unten (iPhone über der Tab-Leiste).
   Offen: bestehender Editor; Desktop klebt er unten mit eigener Scrollfläche, iPhone als Blatt von unten.
   ========================================================================== */
.stream-dock-bar { display: none; }
.stream-dock-spot { height: 0; }
/* Eingeklappt: Karte bleibt als kleiner Platzhalter im Fluss, die Leiste steht fest unten über der Stream-Spalte */
html.ui-refine .stream-dock {
    scroll-margin-bottom: 24px;
}
html.ui-refine .stream-dock.is-collapsed {
    min-height: 56px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: var(--r-3);
}
html.ui-refine .stream-dock.is-collapsed > :not(.stream-dock-bar) { display: none !important; }
html.ui-refine .stream-dock.is-offstage > .stream-dock-bar { display: none !important; }
/* Platz am Seitenende, damit die feste Leiste nichts verdeckt */
html.ui-refine.has-stream-dock #main-content { padding-bottom: 104px; }
@media (max-width: 991.98px) {
    html.ui-refine.has-stream-dock #main-content { padding-bottom: calc(196px + env(safe-area-inset-bottom, 0px)); }
}
html.ui-refine .stream-dock.is-collapsed > .stream-dock-bar {
    position: fixed;
    left: var(--sd-left, 16px);
    width: var(--sd-width, calc(100% - 32px));
    bottom: calc(var(--stream-dock-bottom, 0px) + 12px + env(safe-area-inset-bottom, 0px));
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 0 8px 0 8px;
    border: 1.5px solid color-mix(in srgb, var(--r-accent) 55%, var(--r-hairline));
    border-radius: 16px;
    background: var(--r-raised);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18), 0 0 0 4px color-mix(in srgb, var(--r-accent) 10%, transparent);
    color: var(--r-text);
    font: inherit;
    font-size: var(--r-fs-body, 15px);
    font-weight: 500;
    text-align: left;
    cursor: text;
    transition: border-color var(--r-fast, .15s) ease, box-shadow var(--r-fast, .15s) ease, transform var(--r-fast, .15s) ease;
}
html.ui-refine .stream-dock-bar:hover {
    border-color: var(--r-accent);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .22), 0 0 0 4px color-mix(in srgb, var(--r-accent) 18%, transparent);
}
html.ui-refine .stream-dock-bar:active { transform: scale(.995); }
html.ui-refine .stream-dock-bar:focus-visible { outline: 2px solid var(--r-accent); outline-offset: 3px; }
html.ui-refine .stream-dock-bar__icon {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 12px;
    background: var(--r-accent-tint, color-mix(in srgb, var(--r-accent) 14%, transparent));
    color: var(--r-accent);
    font-size: 18px;
}
html.ui-refine .stream-dock-bar__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui-refine .stream-dock-bar.has-draft .stream-dock-bar__text { font-style: italic; }
html.ui-refine .stream-dock-bar .sd-short { display: none; }
@media (max-width: 575.98px) {
    html.ui-refine .stream-dock-bar .sd-long { display: none; }
    html.ui-refine .stream-dock-bar .sd-short { display: inline; }
    html.ui-refine .stream-dock-bar__cta { padding: 0 14px; }
}
html.ui-refine .stream-dock-bar__cta {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 6px;
    height: 40px; padding: 0 16px; border-radius: 12px;
    background: var(--r-accent-button, var(--r-accent-fill));
    color: #fff;
    font-weight: 600;
}
html.ui-refine .stream-dock-bar:hover .stream-dock-bar__cta { background: var(--r-accent-button-hover, var(--r-accent-fill-hover)); }
html.ui-refine .stream-dock-bar__cta .stream-dock-kbd {
    border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .16); color: #fff;
}
/* Erster Besuch: zweimal sanft aufleuchten */
html.ui-refine .stream-dock-bar.is-intro { animation: stream-dock-intro 1.4s ease-in-out 2; }
@keyframes stream-dock-intro {
    0%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, .18), 0 0 0 4px color-mix(in srgb, var(--r-accent) 10%, transparent); }
    50% { box-shadow: 0 10px 30px rgba(0, 0, 0, .18), 0 0 0 10px color-mix(in srgb, var(--r-accent) 28%, transparent); }
}
@media (prefers-reduced-motion: reduce) { html.ui-refine .stream-dock-bar.is-intro { animation: none; } }
html.ui-refine .stream-dock-kbd {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 5px; margin-left: 6px;
    border: 1px solid var(--r-hairline); border-radius: 5px;
    background: var(--r-fill); color: var(--r-text-3);
    font: 600 var(--r-fs-caption2, 11px)/1 var(--r-font, inherit);
    box-shadow: none;
}
@media (hover: none), (max-width: 991.98px) { html.ui-refine .stream-dock-kbd { display: none; } }

/* Offen am Desktop: klebt unten, eigene Scrollfläche, damit der Verlauf sichtbar bleibt */
html.ui-refine .stream-dock.is-open {
    position: fixed;
    left: var(--sd-left, 16px);
    width: var(--sd-width, calc(100% - 32px));
    bottom: calc(var(--stream-dock-bottom, 0px) + 12px + env(safe-area-inset-bottom, 0px));
    z-index: 1020;
    margin: 0 !important;
    max-height: min(78vh, 820px);
    /* !important: app.css setzt .ticket-composer-card/.stream-composer-card auf overflow: visible !important –
       das offene Feld lief dann unten aus dem Fenster, «Senden» war auf dem iPhone unerreichbar (Meldungen #25/#26). */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-shadow: var(--r-shadow-modal) !important;
}
html.ui-refine .stream-dock.is-open > .stream-dock-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    /* wie das Blatt selbst; der Kopf war durchsichtig (card-header transparent), Text schien beim Scrollen durch */
    background-color: inherit !important;
}
html.ui-refine .stream-dock-head > .stream-dock-collapse { margin-left: auto; order: 99; }
html.ui-refine .stream-dock:not(.is-open) .stream-dock-collapse { display: none; }

/* iPhone/iPad hochkant: offen als Blatt von unten, über der Tab-Leiste */
.stream-dock-backdrop { display: none; }
@media (max-width: 991.98px) {
    html.ui-refine .stream-dock.is-collapsed > .stream-dock-bar { bottom: calc(var(--stream-dock-bottom, 0px) + 8px); }
    html.ui-refine .stream-dock.is-open.is-sheet {
        position: fixed;
        left: 0;
        right: 0;
        width: auto;
        bottom: 0;
        z-index: 1050;
        max-height: 88dvh;
        margin: 0 !important;
        border-radius: var(--r-radius-sheet, 20px) var(--r-radius-sheet, 20px) 0 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        animation: stream-dock-sheet-in var(--r-base, .25s) var(--r-ease, ease-out);
    }
    html.ui-refine .stream-dock-backdrop:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1045;
        background: var(--r-scrim, rgba(0, 0, 0, .35));
    }
    html.stream-dock-sheet-open { overflow: hidden; }
}
@keyframes stream-dock-sheet-in { from { transform: translateY(40px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html.ui-refine .stream-dock.is-open.is-sheet { animation: none; } }
html.ui-refine .stream-dock-open .stream-dock-kbd { margin-left: 4px; }

/* Anruf-Auswahl für erkannte Nummern (partials/_softphone_dial): Softphone / Telefon / Kopieren */
.phone-pick-menu {
    position: fixed;
    z-index: 2100;
    min-width: 220px;
    padding: 6px;
    border-radius: 12px;
    background: var(--r-raised, var(--r-surface, #2a2a2e));
    color: var(--r-text, inherit);
    box-shadow: var(--r-shadow-menu, 0 10px 30px rgba(0, 0, 0, 0.35));
    border: 1px solid var(--r-separator, transparent);
    /* wie die übrigen Menüs: Hintergrund verwischen, sonst scheint Mail-Text durch */
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
}

.phone-pick-menu__head {
    padding: 6px 10px 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--r-text-2, inherit);
    font-variant-numeric: tabular-nums;
}

.phone-pick-menu__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}

.phone-pick-menu__item:hover,
.phone-pick-menu__item:focus-visible {
    background: var(--r-hover, var(--r-fill, rgba(127, 127, 127, 0.15)));
    outline: none;
}

/* ==========================================================================
   MERKLISTE (22.10.2026) – /app/merkliste, Lesezeichen in der Topbar,
   Erfassen-Blatt (Taste M), Merkpunkte im Kalender. Vorbild Apple Erinnerungen.
   Listenfarben sind Mitteltöne (weisses Symbol lesbar in beiden Themes).
   ========================================================================== */
html.ui-refine {
    --ml-blue: var(--r-accent-button, var(--r-accent));
    --ml-red: var(--r-danger);
    --ml-orange: #f08c00;
    --ml-green: #2f9e5a;
    --ml-purple: #9b5de5;
    --ml-teal: #1f9fb5;
    --ml-pink: #d6457f;
    --ml-gray: #8a8a90;
}
html.ui-refine .ml-c-blue { --ml-c: var(--ml-blue); }
html.ui-refine .ml-c-red { --ml-c: var(--ml-red); }
html.ui-refine .ml-c-orange { --ml-c: var(--ml-orange); }
html.ui-refine .ml-c-green { --ml-c: var(--ml-green); }
html.ui-refine .ml-c-purple { --ml-c: var(--ml-purple); }
html.ui-refine .ml-c-teal { --ml-c: var(--ml-teal); }
html.ui-refine .ml-c-pink { --ml-c: var(--ml-pink); }
html.ui-refine .ml-c-gray { --ml-c: var(--ml-gray); }
html.ui-refine .ml-t-blue { color: var(--r-accent); }
html.ui-refine .ml-t-red { color: var(--r-danger); }
html.ui-refine .ml-t-orange { color: var(--ml-orange); }
html.ui-refine .ml-t-green { color: var(--ml-green); }
html.ui-refine .ml-t-purple { color: var(--ml-purple); }
html.ui-refine .ml-t-teal { color: var(--ml-teal); }
html.ui-refine .ml-t-pink { color: var(--ml-pink); }
html.ui-refine .ml-t-gray { color: var(--r-text); }

/* Gerüst: Seitenleiste | Liste | Detail */
html.ui-refine .ml {
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    gap: 0;
    min-height: calc(100vh - 120px);
    margin: calc(-1 * var(--r-4, 16px)) calc(-1 * var(--r-4, 16px)) 0;
}
html.ui-refine .ml.has-detail { grid-template-columns: 252px minmax(0, 1fr) 360px; }
html.ui-refine .ml-side {
    border-right: 1px solid var(--r-hairline);
    padding: var(--r-5, 20px) var(--r-3, 12px);
    display: flex;
    flex-direction: column;
    gap: var(--r-5, 20px);
    min-width: 0;
}
html.ui-refine .ml-side__title { font-size: var(--r-fs-title1); font-weight: 700; margin: 0; padding: 0 4px; }
html.ui-refine .ml-main { padding: var(--r-5, 20px) var(--r-6, 24px) 96px; min-width: 0; position: relative; }
html.ui-refine .ml-detail {
    border-left: 1px solid var(--r-hairline);
    background: var(--r-surface);
    min-width: 0;
    position: sticky;
    top: var(--app-topbar-h, 0px);
    align-self: start;
    max-height: calc(100vh - var(--app-topbar-h, 0px));
    overflow-y: auto;
}

/* Kacheln */
html.ui-refine .ml-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html.ui-refine .ml-tile {
    --r-c: var(--r-text);
    display: flex; flex-direction: column; gap: 6px;
    padding: 9px 10px 8px;
    border-radius: 11px;
    background: var(--r-raised);
    border: 1px solid var(--r-hairline);
    color: var(--r-c) !important;
    text-decoration: none !important;
    transition: background var(--r-fast, .15s) ease;
}
html.ui-refine .ml-tile:hover { background: var(--r-hover); }
html.ui-refine .ml-tile.is-active { outline: 2px solid var(--r-accent); outline-offset: -2px; }
html.ui-refine .ml-tile__top { display: flex; align-items: center; justify-content: space-between; }
html.ui-refine .ml-tile__count { font-size: var(--r-fs-title2); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
html.ui-refine .ml-tile__label { font-size: var(--r-fs-footnote); font-weight: 600; color: var(--r-text-2); }
html.ui-refine .ml-ic, html.ui-refine .ml-dot {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--ml-c, var(--ml-gray));
    color: #fff; display: inline-grid; place-items: center; flex: none;
    font-size: 13px;
}
html.ui-refine .ml-dot { width: 24px; height: 24px; font-size: 12px; }

/* Listen in der Seitenleiste */
html.ui-refine .ml-side__label { font-size: var(--r-fs-caption); font-weight: 600; color: var(--r-text-3); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 6px; padding: 0 8px; }
html.ui-refine .ml-listnav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
html.ui-refine .ml-listnav__row {
    --r-c: var(--r-text);
    display: flex; align-items: center; gap: 10px;
    padding: 7px 8px; border-radius: 8px;
    color: var(--r-c) !important; text-decoration: none !important;
    font-size: var(--r-fs-body);
    transition: background var(--r-fast, .15s) ease;
}
html.ui-refine .ml-listnav__row:hover { background: var(--r-hover); }
html.ui-refine .ml-listnav__row.is-active { background: var(--r-fill-strong, var(--r-fill)); }
html.ui-refine .ml-listnav__row.is-drop { background: var(--r-accent-tint); outline: 2px dashed var(--r-accent); outline-offset: -2px; }
html.ui-refine .ml-listnav__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui-refine .ml-listnav__count { color: var(--r-text-3); font-size: var(--r-fs-footnote); font-variant-numeric: tabular-nums; }
html.ui-refine .ml-listnav__shared { color: var(--r-text-3); font-size: 13px; }
html.ui-refine .ml-listnav__chev { color: var(--r-text-3); font-size: 12px; }
html.ui-refine .ml-addlist {
    margin-top: 6px; border: 0; background: transparent; color: var(--r-accent);
    font-size: var(--r-fs-footnote); font-weight: 600; padding: 8px; border-radius: 8px; display: inline-flex; gap: 6px; align-items: center;
}
html.ui-refine .ml-addlist:hover { background: var(--r-hover); }
html.ui-refine .ml-siri { --r-c: var(--r-text-3); display: flex; gap: 6px; align-items: center; margin-top: 14px; padding: 0 8px; font-size: var(--r-fs-caption); color: var(--r-c) !important; text-decoration: none !important; }
html.ui-refine .ml-siri:hover { --r-c: var(--r-accent); }

/* Kopf der Liste */
html.ui-refine .ml-head { margin-bottom: var(--r-4, 16px); }
html.ui-refine .ml-head__row { display: flex; align-items: baseline; gap: 12px; }
html.ui-refine .ml-head__title { font-size: var(--r-fs-title1); font-weight: 700; margin: 0; letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html.ui-refine .ml-head__count { font-size: var(--r-fs-title1); font-weight: 700; font-variant-numeric: tabular-nums; margin-left: auto; }
html.ui-refine .ml-head__actions { display: flex; gap: 6px; align-items: center; align-self: center; }
html.ui-refine .ml-head__shared { color: var(--r-text-2); font-size: var(--r-fs-footnote); }
html.ui-refine .ml-back {
    --r-c: var(--r-accent);
    color: var(--r-c) !important; text-decoration: none !important;
    display: inline-flex; align-items: center; gap: 2px; min-height: 44px; font-size: var(--r-fs-headline);
}

/* Schnellerfassung */
html.ui-refine .ml-capture {
    background: var(--r-raised);
    border: 1px solid var(--r-hairline);
    border-radius: 12px;
    padding: 8px 12px;
    margin-bottom: var(--r-4, 16px);
    display: flex; flex-direction: column; gap: 6px;
    transition: border-color var(--r-fast, .15s) ease, box-shadow var(--r-fast, .15s) ease;
}
html.ui-refine .ml-capture:focus-within { border-color: var(--r-accent); box-shadow: 0 0 0 3px var(--r-accent-tint); }
html.ui-refine .ml-capture__row { display: flex; align-items: center; gap: 10px; }
html.ui-refine .ml-capture__plus {
    width: 22px; height: 22px; border-radius: 50%; border: 1.6px solid var(--r-text-3);
    display: grid; place-items: center; color: var(--r-text-3); font-size: 12px; flex: none;
}
html.ui-refine .ml-capture__input {
    flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--r-text);
    font-size: var(--r-fs-headline); padding: 4px 0;
}
html.ui-refine .ml-capture__input::placeholder { color: var(--r-text-3); }
html.ui-refine .ml-kbd {
    font: 600 11px/1 var(--r-font); color: var(--r-text-3); background: transparent;
    border: 1px solid var(--r-hairline); border-radius: 5px; padding: 3px 6px;
}

/* Chips der Text-Erkennung */
html.ui-refine .ml-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 24px; align-items: center; }
html.ui-refine .ml-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--r-fs-caption); font-weight: 600;
    padding: 3px 9px; border-radius: 999px;
    border: 0; background: var(--r-fill); color: var(--r-text-2);
}
html.ui-refine button.ml-chip { cursor: pointer; }
html.ui-refine .ml-chip__x { opacity: .55; margin-left: 1px; }
html.ui-refine button.ml-chip:hover .ml-chip__x { opacity: 1; }
html.ui-refine .ml-chip--hint { background: transparent; padding-left: 0; font-weight: 500; color: var(--r-text-3); }
html.ui-refine .ml-chip--date { background: var(--r-accent-tint); color: var(--r-accent); }
html.ui-refine .ml-chip--list { background: color-mix(in srgb, var(--ml-teal) 16%, transparent); color: var(--ml-teal); }
html.ui-refine .ml-chip--user { background: color-mix(in srgb, var(--ml-purple) 16%, transparent); color: var(--ml-purple); }
html.ui-refine .ml-chip--flag { background: color-mix(in srgb, var(--ml-orange) 18%, transparent); color: var(--ml-orange); }

/* Gruppen und Zeilen */
html.ui-refine .ml-group + .ml-group { margin-top: var(--r-5, 20px); }
html.ui-refine .ml-group__label {
    font-size: var(--r-fs-footnote); font-weight: 700; color: var(--r-text-2);
    margin: 0 0 2px; display: flex; gap: 8px; align-items: baseline;
}
html.ui-refine .ml-group__label.is-late { color: var(--r-danger); }
html.ui-refine .ml-group__count { color: var(--r-text-3); font-weight: 500; font-variant-numeric: tabular-nums; }
html.ui-refine .ml-group__empty { color: var(--r-text-3); font-size: var(--r-fs-footnote); margin: 6px 0 0 34px; }
html.ui-refine .ml-items { list-style: none; margin: 0; padding: 0; }
html.ui-refine .ml-item {
    position: relative;
    border-bottom: 1px solid var(--r-separator, var(--r-hairline));
    outline: none;
    transition: opacity .35s ease, transform .35s ease;
    overflow: hidden;
}
html.ui-refine .ml-item:focus-visible .ml-item__front { box-shadow: inset 0 0 0 2px var(--r-accent); border-radius: 8px; }
html.ui-refine .ml-item__front {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; align-items: start;
    padding: 10px 4px 10px 0;
    background: var(--r-canvas);
    transition: transform .22s var(--r-ease, ease), background var(--r-fast, .15s) ease;
}
html.ui-refine .ml-item.is-selected .ml-item__front { background: var(--r-accent-tint); border-radius: 8px; }
html.ui-refine .ml-item.is-leaving { opacity: 0; transform: translateX(10px); }
html.ui-refine .ml-item.is-done .ml-item__title,
html.ui-refine .ml-item.is-checking .ml-item__title { color: var(--r-text-3); }
html.ui-refine .ml-item__body { min-width: 0; cursor: pointer; padding-top: 1px; }
html.ui-refine .ml-item__title { font-size: var(--r-fs-body); line-height: 1.35; overflow-wrap: anywhere; color: var(--r-text); }
html.ui-refine .ml-item__meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 2px; font-size: var(--r-fs-footnote); color: var(--r-text-2); align-items: center; }
html.ui-refine .ml-item__meta i { font-size: 12px; }
html.ui-refine .ml-due.is-late { color: var(--r-danger); }
html.ui-refine .ml-listtag { color: var(--ml-c, var(--r-text-2)); font-weight: 600; }
html.ui-refine .ml-subject { color: var(--r-accent); display: inline-flex; gap: 4px; align-items: center; min-width: 0; }
html.ui-refine .ml-from { color: var(--ml-purple); }
html.ui-refine .ml-item__end { display: flex; gap: 8px; align-items: center; color: var(--r-text-3); padding-top: 2px; }
html.ui-refine .ml-flag { color: var(--ml-orange); font-size: 14px; }
html.ui-refine .ml-avatar {
    width: 24px; height: 24px; border-radius: 50%; background: var(--ml-purple); color: #fff;
    font-size: 10.5px; font-weight: 700; display: inline-grid; place-items: center; letter-spacing: .02em;
}
html.ui-refine .ml-handle { cursor: grab; opacity: 0; transition: opacity var(--r-fast, .15s) ease; padding: 0 2px; }
html.ui-refine .ml-item:hover .ml-handle { opacity: .7; }
html.ui-refine .ml-item.is-ghost { opacity: .35; }
html.ui-refine .ml-item.is-chosen .ml-item__front { background: var(--r-raised); box-shadow: var(--r-shadow-menu); border-radius: 8px; }

/* Kreis zum Abhaken */
html.ui-refine .ml-check {
    width: 22px; height: 22px; padding: 0; margin: 1px 0 0 2px;
    border-radius: 50%; border: 1.7px solid var(--r-text-3); background: transparent;
    display: inline-grid; place-items: center; cursor: pointer; flex: none;
    transition: background .2s ease, border-color .2s ease, transform .12s ease;
    position: relative;
}
html.ui-refine .ml-check::before { content: ""; position: absolute; inset: -11px; } /* 44-px-Ziel */
html.ui-refine .ml-check:hover { border-color: var(--r-accent); }
html.ui-refine .ml-check:active { transform: scale(.9); }
html.ui-refine .ml-check.is-flagged { border-color: var(--ml-orange); }
html.ui-refine .ml-check.is-checked { background: var(--r-accent); border-color: var(--r-accent); }
html.ui-refine .ml-check.is-checked::after {
    content: ""; width: 10px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
}
html.ui-refine .ml-check:focus-visible { outline: 2px solid var(--r-accent); outline-offset: 2px; }
html.ui-refine .ml-check--sm { width: 18px; height: 18px; margin: 0; }
html.ui-refine .ml-check--sm.is-checked::after { width: 8px; height: 4px; }
html.ui-refine .ml-check--ghost { border-style: dashed; cursor: default; }

/* Wischen */
html.ui-refine .ml-item__actions { position: absolute; inset: 0; display: flex; align-items: stretch; }
html.ui-refine .ml-item__actions--start { justify-content: flex-start; background: var(--r-accent-button, var(--r-accent)); }
html.ui-refine .ml-item__actions--end { justify-content: flex-end; }
html.ui-refine .ml-item:not(.is-swiped):not(.is-swipe-done) .ml-item__actions--start { opacity: 0; }
html.ui-refine .ml-item.is-swiped .ml-item__actions--start { display: none; }
html.ui-refine .ml-swipe-act {
    border: 0; width: 72px; color: #fff; font-size: var(--r-fs-caption); font-weight: 600;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
html.ui-refine .ml-item__actions--start .ml-swipe-act { background: transparent; width: auto; padding: 0 18px; flex-direction: row; gap: 6px; }
html.ui-refine .ml-swipe-act--later { background: var(--ml-orange); }
html.ui-refine .ml-swipe-act--more { background: var(--ml-gray); }
@media (hover: hover) and (pointer: fine) {
    html.ui-refine .ml-item__actions { display: none; }
}

html.ui-refine .ml-donetoggle { margin-top: var(--r-4, 16px); }
html.ui-refine .ml-donetoggle a { --r-c: var(--r-accent); color: var(--r-c) !important; font-size: var(--r-fs-footnote); font-weight: 600; text-decoration: none !important; }

/* Rückmeldung */
html.ui-refine .ml-toast {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    z-index: 1070;
    display: flex; align-items: center; gap: 12px;
    max-width: min(92vw, 520px);
    padding: 8px 8px 8px 16px;
    border-radius: 999px;
    background: var(--r-raised); color: var(--r-text);
    border: 1px solid var(--r-hairline); box-shadow: var(--r-shadow-menu);
    font-size: var(--r-fs-footnote);
}
html.ui-refine .ml-toast > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
html.ui-refine .ml-toast[hidden] { display: none; }
html.ui-refine .ml-toast__btn {
    --r-c: var(--r-accent);
    border: 0; border-radius: 999px; padding: 6px 12px; min-height: 32px;
    background: var(--r-accent-tint); color: var(--r-c) !important; font-weight: 600; text-decoration: none !important; white-space: nowrap;
}
html.ui-refine .ml-toast__btn[hidden] { display: none; }

/* Detail */
html.ui-refine .ml-detail__inner { padding: 10px 18px 28px; display: flex; flex-direction: column; gap: 14px; }
html.ui-refine .ml-detail__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 -8px; }
html.ui-refine .ml-detail__bartitle { font-size: var(--r-fs-footnote); font-weight: 600; color: var(--r-text-3); }
html.ui-refine .ml-detail__head { display: flex; gap: 10px; align-items: flex-start; }
html.ui-refine .ml-detail__head .ml-check { margin-top: 5px; }
html.ui-refine .ml-detail__title {
    flex: 1; min-width: 0; resize: none; overflow: hidden; border: 0; outline: none;
    background: transparent; color: var(--r-text); font-size: var(--r-fs-title2); font-weight: 650; line-height: 1.25; padding: 0;
}
html.ui-refine .ml-detail__notes {
    width: 100%; resize: none; overflow: hidden; border: 1px solid transparent; border-radius: 10px;
    background: var(--r-fill); color: var(--r-text); font-size: var(--r-fs-body); padding: 9px 11px; outline: none;
}
html.ui-refine .ml-detail__notes:focus { border-color: var(--r-accent); }
html.ui-refine .ml-rows { display: flex; flex-direction: column; border: 1px solid var(--r-hairline); border-radius: 12px; overflow: hidden; background: var(--r-raised); }
html.ui-refine .ml-row {
    display: grid; grid-template-columns: 22px minmax(0, auto) minmax(0, 1fr); gap: 8px; align-items: center;
    padding: 8px 12px; border-bottom: 1px solid var(--r-hairline); font-size: var(--r-fs-body); min-height: 44px;
}
html.ui-refine .ml-row > i { color: var(--r-text-2); }
html.ui-refine .ml-row label, html.ui-refine .ml-row__label { margin: 0; white-space: nowrap; }
html.ui-refine .ml-row__ctl { display: flex; gap: 6px; justify-content: flex-end; align-items: center; min-width: 0; }
html.ui-refine .ml-row__ctl .form-control, html.ui-refine .ml-row__ctl .form-select { max-width: 180px; }
html.ui-refine .ml-row__ctl input[type="time"] { max-width: 104px; }
html.ui-refine .ml-row__ctl--link { gap: 2px; }
html.ui-refine .ml-subject-link {
    --r-c: var(--r-accent);
    color: var(--r-c) !important; text-decoration: none !important; font-weight: 600; font-size: var(--r-fs-footnote);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
html.ui-refine .ml-row--due { grid-template-columns: 22px minmax(0, 1fr); }
html.ui-refine .ml-row--due .ml-row__ctl { grid-column: 2; justify-content: flex-start; }
html.ui-refine .ml-row--due .ml-row__ctl .form-control { max-width: none; flex: 1 1 0; min-width: 0; }
html.ui-refine .ml-row--due .ml-row__ctl input[type="time"] { flex: 0 0 112px; }
html.ui-refine .ml-lists { margin-top: var(--r-5, 20px); }
html.ui-refine .ml-row__hint { margin: 0; padding: 6px 12px 8px 42px; font-size: var(--r-fs-caption); color: var(--r-text-3); border-bottom: 1px solid var(--r-hairline); }
html.ui-refine .ml-rows > :last-child { border-bottom: 0; }
html.ui-refine .ml-quickdates { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--r-hairline); }
html.ui-refine .ml-quickdates .r-chip.is-active { background: var(--r-accent-tint); color: var(--r-accent); border-color: transparent; }
html.ui-refine .ml-subs__label { font-size: var(--r-fs-caption); font-weight: 600; color: var(--r-text-3); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 4px; }
html.ui-refine .ml-subs__list { list-style: none; margin: 0; padding: 0; }
html.ui-refine .ml-sub { display: flex; gap: 10px; align-items: center; min-height: 40px; border-bottom: 1px solid var(--r-hairline); }
html.ui-refine .ml-sub__title { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--r-text); font-size: var(--r-fs-body); padding: 6px 0; }
html.ui-refine .ml-sub.is-done .ml-sub__title { color: var(--r-text-3); text-decoration: line-through; }
html.ui-refine .ml-sub--new { border-bottom: 0; }
html.ui-refine .ml-sub [data-ml-sub-delete] { color: var(--r-text-3); }
html.ui-refine .ml-sub--new .ml-sub__title::placeholder { color: var(--r-text-3); }
html.ui-refine .ml-detail__foot { margin: 0; font-size: var(--r-fs-caption); color: var(--r-text-3); }

/* Listen-Dialog */
html.ui-refine .ml-legend { font-size: var(--r-fs-caption); font-weight: 600; color: var(--r-text-2); margin-bottom: 6px; }
html.ui-refine .ml-swatches, html.ui-refine .ml-iconpick { display: flex; flex-wrap: wrap; gap: 8px; }
html.ui-refine .ml-swatch { width: 32px; height: 32px; border-radius: 50%; background: var(--ml-c); cursor: pointer; position: relative; }
html.ui-refine .ml-swatch input, html.ui-refine .ml-iconopt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
html.ui-refine .ml-swatch:has(input:checked) { box-shadow: 0 0 0 2px var(--r-surface), 0 0 0 4px var(--ml-c); }
html.ui-refine .ml-swatch:has(input:focus-visible), html.ui-refine .ml-iconopt:has(input:focus-visible) { outline: 2px solid var(--r-accent); outline-offset: 3px; }
html.ui-refine .ml-iconopt { width: 38px; height: 38px; border-radius: 50%; background: var(--r-fill); display: grid; place-items: center; position: relative; color: var(--r-text-2); cursor: pointer; }
html.ui-refine .ml-iconopt:has(input:checked) { background: var(--r-accent); color: #fff; }

/* Erfassen-Blatt (global) */
html.ui-refine .ml-capmodal .modal-dialog { max-width: 560px; }
html.ui-refine .ml-capmodal__head { display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
html.ui-refine .ml-capmodal__head .modal-title { font-size: var(--r-fs-headline); font-weight: 650; margin: 0; }
html.ui-refine .ml-capmodal__head > :last-child { justify-self: end; }
html.ui-refine .ml-capmodal__head > :first-child { justify-self: start; }
html.ui-refine .ml-cap__input {
    width: 100%; resize: none; border: 0; outline: none; background: transparent; color: var(--r-text);
    font-size: var(--r-fs-title2); font-weight: 500; line-height: 1.3; padding: 4px 0 8px;
}
html.ui-refine .ml-cap__input::placeholder { color: var(--r-text-3); }
html.ui-refine .ml-capmodal .ml-quickdates { padding: 10px 0 0; border: 0; }
html.ui-refine .ml-cap__subject {
    display: flex; align-items: center; gap: 6px; margin-top: 10px;
    font-size: var(--r-fs-footnote); color: var(--r-accent); background: var(--r-accent-tint);
    border-radius: 10px; padding: 4px 4px 4px 10px;
}
html.ui-refine .ml-cap__subject span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui-refine .ml-cap__subject[hidden] { display: none; }
html.ui-refine .ml-cap__hint { margin: 10px 0 0; font-size: var(--r-fs-caption); color: var(--r-text-3); }

/* Lesezeichen-Menü in der Topbar */
html.ui-refine .ml-pop { width: 340px; max-width: calc(100vw - 24px); padding: 12px !important; }
html.ui-refine .ml-pop__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
html.ui-refine .ml-pop__head a { --r-c: var(--r-accent); color: var(--r-c) !important; font-size: var(--r-fs-footnote); text-decoration: none !important; }
html.ui-refine .ml-pop__form {
    display: flex; gap: 8px; align-items: center; padding: 6px 10px; margin-bottom: 4px;
    border: 1px solid var(--r-hairline); border-radius: 10px; background: var(--r-fill); color: var(--r-text-3);
}
html.ui-refine .ml-pop__form:focus-within { border-color: var(--r-accent); }
html.ui-refine .ml-pop__form input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--r-text); font-size: var(--r-fs-body); }
html.ui-refine .ml-pop__empty { margin: 8px 2px 2px; font-size: var(--r-fs-footnote); color: var(--r-text-3); }
html.ui-refine .ml-pop__list { list-style: none; margin: 0; padding: 0; }
html.ui-refine .ml-pop__item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 2px; border-bottom: 1px solid var(--r-hairline); }
html.ui-refine .ml-pop__item:last-child { border-bottom: 0; }
html.ui-refine .ml-pop__item .ml-check { margin-top: 2px; }
html.ui-refine .ml-pop__text { --r-c: var(--r-text); color: var(--r-c) !important; text-decoration: none !important; display: flex; flex-direction: column; min-width: 0; flex: 1; }
html.ui-refine .ml-pop__title { font-size: var(--r-fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui-refine .ml-pop__text .ml-due { font-size: var(--r-fs-caption); color: var(--r-text-2); }
html.ui-refine .ml-pop__text .ml-due.is-late { color: var(--r-danger); }

/* Knopf «Auf Merkliste» in Datensätzen */
html.ui-refine .ml-addbtn.is-on, html.ui-refine .ml-addbtn.is-on i { color: var(--r-accent) !important; }

/* Merkpunkte im Kalender (source checklist_due) */
html.ui-refine .fc .checklist-due-event,
html.ui-refine .fc .checklist-due-event .fc-event-main { background: transparent !important; color: var(--r-text) !important; }
html.ui-refine .fc .checklist-due-event { border: 1px dashed color-mix(in srgb, var(--ml-orange) 70%, transparent) !important; border-radius: 6px; }
html.ui-refine .ml-cal-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ml-orange); display: inline-block; flex: none; margin-right: 5px; vertical-align: -1px; }

/* Desktop schmal: Detail als Blatt */
@media (max-width: 1279.98px) and (min-width: 992px) {
    html.ui-refine .ml.has-detail { grid-template-columns: 220px minmax(0, 1fr) 320px; }
}

/* iPhone / iPad hochkant */
@media (max-width: 991.98px) {
    html.ui-refine .ml, html.ui-refine .ml.has-detail { display: block; margin: 0; min-height: 0; }
    html.ui-refine .ml-side { border: 0; padding: 4px 0 24px; }
    html.ui-refine .ml-main { padding: 0 0 calc(120px + env(safe-area-inset-bottom, 0px)); }
    html.ui-refine .ml--home .ml-main { display: none; }
    html.ui-refine .ml:not(.ml--home) .ml-side { display: none; }
    html.ui-refine .ml-head__title { font-size: var(--r-fs-title1); }
    html.ui-refine .ml-tile { padding: 10px 12px; min-height: 76px; }
    html.ui-refine .ml--home .ml-tile.is-active { outline: none; }
    html.ui-refine .ml-listnav {
        background: var(--r-raised); border: 1px solid var(--r-hairline); border-radius: 12px; overflow: hidden; gap: 0;
    }
    html.ui-refine .ml-listnav li + li .ml-listnav__row { border-top: 1px solid var(--r-hairline); }
    html.ui-refine .ml-listnav__row { border-radius: 0; min-height: 48px; padding: 8px 12px; }
    html.ui-refine .ml-capture { display: none; }
    html.ui-refine .ml-item__front { padding: 12px 4px 12px 0; }
    html.ui-refine .ml-fab {
        position: fixed; left: max(16px, env(safe-area-inset-left, 0px));
        bottom: calc(66px + env(safe-area-inset-bottom, 0px));
        z-index: 1020;
        display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
        padding: 6px 16px 6px 10px; border-radius: 999px; border: 1px solid var(--r-hairline);
        background: var(--r-material, var(--r-raised)); color: var(--r-accent);
        -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
        font-size: var(--r-fs-headline); font-weight: 650; box-shadow: var(--r-shadow-menu);
    }
    html.ui-refine .ml-fab i { font-size: 22px; }
    html.ui-refine .ml-toast { bottom: calc(122px + env(safe-area-inset-bottom, 0px)); }
    html.ui-refine .ml-detail {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto;
        max-height: calc(100dvh - 48px - env(safe-area-inset-top, 0px));
        z-index: 1056; border: 0; border-radius: var(--r-radius-sheet) var(--r-radius-sheet) 0 0;
        background: var(--r-surface); box-shadow: var(--r-shadow-modal);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        overscroll-behavior: contain;
    }
    html.ui-refine .ml-detail[hidden] { display: none; }
    html.ui-refine .ml-detail-scrim { position: fixed; inset: 0; z-index: 1055; background: var(--r-scrim, rgba(0, 0, 0, .45)); }
    html.ui-refine .ml-detail-scrim[hidden] { display: none; }
    html.ui-refine.ml-sheet-open body { overflow: hidden; }
    html.ui-refine .ml-detail__inner::before {
        content: ""; width: 36px; height: 5px; border-radius: 3px; background: var(--r-hairline); align-self: center; margin-bottom: -4px;
    }
    html.ui-refine .ml-row__ctl .form-control, html.ui-refine .ml-row__ctl .form-select { max-width: 170px; }
}
@media (prefers-reduced-motion: reduce) {
    html.ui-refine .ml-item, html.ui-refine .ml-item__front, html.ui-refine .ml-check { transition: none; }
}

/* Mail-Einstellungen: Versand (SMTP) je Konto und iCloud-Hinweis */
.ms-smtp-block,
.ms-icloud-hint {
    padding: 10px 12px;
    border-radius: var(--r-radius-sm, 10px);
    background: var(--r-fill, rgba(127, 127, 127, 0.12));
    color: var(--r-text, inherit);
}

/* ────────────────────────────────────────────────────────────
   Stream-Seiten (Ticket, Task, Auftrag) auf dem iPhone: kompakter Kopf,
   mehr Inhalt pro Bildschirm (22.10.2026). Überschreibt die Inline-Styles
   der drei Seiten, die die Filter als 2×2-Raster grosser Pills zeigten und
   jedem Eintrag einen eigenen Chevron-Block und eine überlaufende Aktionszeile gaben.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    /* Titel und Status: schlanke Zeile, höchstens zwei Zeilen Titel */
    html.ui-refine .app-content:has(.stream-toolbar) .page-mobile-topbar {
        min-height: 40px;
        align-items: center;
        margin-bottom: var(--r-2) !important;
    }
    html.ui-refine .app-content:has(.stream-toolbar) .page-mobile-topbar .page-mobile-title-main {
        font-size: 1.0625rem;
        line-height: 1.25;
        letter-spacing: -0.012em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    html.ui-refine .app-content:has(.stream-toolbar) .page-mobile-topbar .page-mobile-title-sub {
        font-size: 0.75rem;
        margin-top: 1px;
    }
    html.ui-refine .app-content:has(.stream-toolbar) .page-mobile-topbar .btn-icon {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }

    /* Filter: eine Zeile, seitlich wischbar */
    html.ui-refine .task-stream-header {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 8px 12px !important;
    }
    html.ui-refine .task-stream-header > :first-child {
        flex-shrink: 0;
        line-height: 30px;
    }
    html.ui-refine .stream-toolbar {
        display: flex !important;
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0;
        flex-wrap: nowrap !important;
        justify-content: flex-start;
        gap: 6px !important;
        overflow-x: auto !important;
        overscroll-behavior-x: contain;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        scrollbar-width: none;
    }
    html.ui-refine .stream-toolbar::-webkit-scrollbar {
        display: none;
    }
    html.ui-refine .stream-toolbar .btn {
        flex: 0 0 auto !important;
        min-height: 30px !important;
        padding: 4px 12px !important;
        font-size: 0.8125rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        border-radius: 999px !important;
    }

    /* Einträge: weniger Rand */
    html.ui-refine .stream-item {
        padding: 0.65rem 0.75rem 0.7rem 0.85rem !important;
        border-radius: 12px !important;
        margin-bottom: 0.6rem !important;
    }

    /* Kopf eines Eintrags: Zeile 1 Chevron · Avatar · Name · Badge, Zeile 2 Datum und Aktionen */
    html.ui-refine .stream-item-header {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 4px 8px !important;
    }
    html.ui-refine .stream-item-header > .stream-collapse-toggle {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 6px !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--r-text-3) !important;
    }
    html.ui-refine .stream-item-header > .stream-collapse-toggle .bi {
        font-size: 0.85rem;
    }
    html.ui-refine .stream-item-header > .stream-item-actor {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        gap: 6px !important;
    }
    html.ui-refine .stream-item-header .stream-avatar {
        width: 22px !important;
        height: 22px !important;
        border-radius: 7px !important;
        flex-shrink: 0;
    }
    html.ui-refine .stream-item-header > .stream-item-actor strong {
        font-size: 0.875rem;
        min-width: 0;
    }
    html.ui-refine .stream-item-header > .stream-item-actor .badge {
        flex-shrink: 0;
        font-size: 0.6875rem;
    }
    html.ui-refine .stream-item-header > :last-child:not(.stream-item-actor) {
        flex: 1 1 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        min-width: 0;
    }
    html.ui-refine .stream-item-header .stream-item-meta {
        margin-right: auto;
        font-size: 0.75rem;
        white-space: nowrap;
    }
    html.ui-refine .stream-item-header .btn-icon {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        border-radius: 8px !important;
    }
    html.ui-refine .stream-item-header .stream-visibility-form .form-select {
        width: auto !important;
        min-width: 0 !important;
        max-width: 112px;
        height: 30px;
        padding: 2px 24px 2px 10px !important;
        font-size: 0.75rem !important;
        background-position: right 6px center !important;
    }
}

/* ────────────────────────────────────────────────────────────
   Stream auf dem iPhone, nativer (22.10.2026, zweite Runde): keine drei
   verschachtelten Rahmen mehr (Karte + Timeline + Eintragskarte), Einträge
   fast randlos wie in Messages/Mail, Kopf in EINER Zeile (Avatar · Name ·
   Sichtbarkeitspunkt · Zeit · «…»). Antworten, Sichtbarkeit, Löschen und
   Ein-/Ausklappen liegen im «…»-Action-Sheet (public/js/stream-mobile.js).
   Systemeinträge (.sm-system) werden zur kleinen Meta-Zeile.
   ──────────────────────────────────────────────────────────── */
.sm-more, .sm-time-short { display: none; }
@media (max-width: 991.98px) {
    .stream-item-meta .sm-time-long { display: none; }
    .stream-item-meta .sm-time-short { display: inline; }
}
@media (max-width: 991.98px) {
    /* äussere Stream-Karte: kein Rahmen, kein Innenabstand */
    html.ui-refine .card:has(> .stream-container) {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }
    html.ui-refine .card:has(> .stream-container) > .task-stream-header {
        padding: 6px 0 8px !important;
        background: transparent !important;
        border: 0 !important;
    }
    html.ui-refine .card:has(> .stream-container) > .stream-container {
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
    /* Timeline-Linie und -Punkte weg */
    html.ui-refine .stream-timeline { padding-left: 0 !important; }
    html.ui-refine .stream-timeline::before,
    html.ui-refine .stream-timeline > .stream-item::before { display: none !important; content: none !important; }

    /* Eintrag: flache Fläche, voller Platz für den Text */
    html.ui-refine .stream-timeline > .stream-item {
        padding: 10px 12px 12px !important;
        margin: 0 0 8px !important;
        border: 0 !important;
        border-radius: 14px !important;
        background: var(--r-surface) !important;
        box-shadow: none !important;
        transform: none !important;
    }
    html.ui-refine .stream-timeline > .stream-item:hover { transform: none !important; }

    /* Kopf: eine Zeile */
    html.ui-refine .stream-timeline > .stream-item > .stream-item-header {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        min-height: 28px;
    }
    html.ui-refine .stream-item-header > .stream-collapse-toggle { display: none !important; }
    html.ui-refine .stream-item-header > .stream-item-actor {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        gap: 8px !important;
    }
    html.ui-refine .stream-item-header .stream-avatar {
        width: 28px !important;
        height: 28px !important;
        border-radius: 999px !important;
        border: 0 !important;
        font-size: 0.8rem !important;
    }
    html.ui-refine .stream-item-header > .stream-item-actor strong {
        font-size: 0.9375rem !important;
        font-weight: 600;
        letter-spacing: -0.01em;
    }
    /* «Intern»-Badge → kleiner Punkt mit Schloss, spart die ganze Breite */
    html.ui-refine .stream-item-header > .stream-item-actor .badge {
        font-size: 0 !important;
        width: 18px;
        height: 18px;
        padding: 0 !important;
        border-radius: 999px !important;
        background: var(--r-fill) !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    html.ui-refine .stream-item-header > .stream-item-actor .badge::before {
        content: "\f47a"; /* bi-lock-fill */
        font-family: "bootstrap-icons";
        font-size: 10px;
        line-height: 1;
        color: var(--r-text-2);
    }
    /* Aktionszeile: nur die Zeit bleibt sichtbar, Rest im «…» */
    html.ui-refine .stream-timeline > .stream-item > .stream-item-header > :is(.stream-item-header-actions, div:not(.stream-item-actor)) {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
        min-width: 0;
    }
    html.ui-refine .stream-item-header :is(.btn-icon:not(.sm-more), .stream-visibility-form) { display: none !important; }
    html.ui-refine .stream-item-header .stream-item-meta {
        margin: 0 !important;
        font-size: 0.8125rem !important;
        color: var(--r-text-3) !important;
        white-space: nowrap;
    }
    html.ui-refine .stream-timeline > .stream-item > .stream-item-header > .sm-more {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 30px !important;
        width: 30px;
        height: 30px;
        margin: -2px -6px -2px -2px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--r-text-2);
        font-size: 1.05rem;
    }
    html.ui-refine .stream-item-header > .sm-more:active { background: var(--r-fill); }

    /* Text: iOS-Body, volle Breite */
    html.ui-refine .stream-timeline > .stream-item .stream-item-body,
    html.ui-refine .stream-timeline > .stream-item > .mt-2 {
        margin-top: 6px !important;
        font-size: 1rem;
        line-height: 1.42;
    }
    html.ui-refine .stream-timeline > .stream-item .stream-item-body :is(p, li) { font-size: inherit; }
    html.ui-refine .stream-timeline > .stream-item .alert {
        padding: 6px 10px !important;
        margin-bottom: 6px !important;
        border-radius: 10px !important;
        font-size: 0.8125rem;
    }

    /* Systemeinträge: kleine Meta-Zeile ohne Fläche */
    html.ui-refine .stream-timeline > .stream-item.sm-system {
        background: transparent !important;
        padding: 4px 4px 6px !important;
        margin-bottom: 2px !important;
        border-bottom: 1px solid var(--r-hairline) !important;
        border-radius: 0 !important;
    }
    html.ui-refine .stream-item.sm-system > .stream-item-header { min-height: 22px; gap: 6px !important; }
    html.ui-refine .stream-item.sm-system .stream-avatar {
        width: 18px !important;
        height: 18px !important;
        font-size: 0.6rem !important;
    }
    html.ui-refine .stream-item.sm-system > .stream-item-header > .stream-item-actor strong {
        font-size: 0.8125rem !important;
        font-weight: 500;
        color: var(--r-text-2);
    }
    html.ui-refine .stream-item.sm-system .stream-item-meta { font-size: 0.75rem !important; }
    html.ui-refine .stream-item.sm-system > .sm-more,
    html.ui-refine .stream-item.sm-system > .stream-item-header > .sm-more { width: 24px; height: 24px; font-size: 0.9rem; }
    html.ui-refine .stream-timeline > .stream-item.sm-system .stream-item-body,
    html.ui-refine .stream-timeline > .stream-item.sm-system > .mt-2 {
        margin-top: 2px !important;
        padding-left: 24px;
        font-size: 0.8125rem !important;
        padding-bottom: 0 !important;
        line-height: 1.35;
        color: var(--r-text-2);
    }
    html.ui-refine .stream-timeline > .stream-item.sm-system :is(.stream-item-body, .mt-2) :is(strong, b) { font-weight: 600; color: var(--r-text); }
    html.ui-refine .stream-item.sm-system .stream-item-preview { display: none !important; }
    html.ui-refine .stream-timeline > .stream-item > :last-child,
    html.ui-refine .stream-timeline > .stream-item .stream-item-body > :last-child,
    html.ui-refine .stream-timeline > .stream-item .stream-item-body > :last-child > :last-child { margin-bottom: 0 !important; }

    /* Action-Sheet */
    html.ui-refine .sm-sheet-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1098;
        background: var(--r-scrim, rgba(0, 0, 0, 0.4));
        animation: sm-fade .18s ease-out;
    }
    html.ui-refine .sm-sheet {
        position: fixed;
        left: 8px;
        right: 8px;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        z-index: 1099;
        display: flex;
        flex-direction: column;
        gap: 8px;
        animation: sm-up .24s cubic-bezier(.2, .8, .2, 1);
    }
    html.ui-refine .sm-sheet-group,
    html.ui-refine .sm-sheet-cancel {
        border-radius: 14px;
        background: var(--r-menu, var(--r-raised));
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        overflow: hidden;
    }
    html.ui-refine .sm-sheet-title,
    html.ui-refine .sm-sheet-empty {
        padding: 12px 16px;
        text-align: center;
        font-size: 0.8125rem;
        color: var(--r-text-3);
    }
    html.ui-refine .sm-sheet-action {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 56px;
        padding: 0 16px;
        border: 0;
        border-top: 1px solid var(--r-separator);
        background: transparent;
        color: var(--r-accent-text, var(--r-accent));
        font-size: 1.0625rem;
    }
    html.ui-refine .sm-sheet-action.is-danger { color: var(--r-danger); }
    html.ui-refine .sm-sheet-action:active,
    html.ui-refine .sm-sheet-cancel:active { background: var(--r-press, var(--r-fill)); }
    html.ui-refine .sm-sheet-cancel {
        min-height: 56px;
        border: 0;
        color: var(--r-accent-text, var(--r-accent));
        font-size: 1.0625rem;
        font-weight: 600;
    }
    html.sm-sheet-open { overflow: hidden; }
}
@keyframes sm-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sm-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html.ui-refine :is(.sm-sheet, .sm-sheet-backdrop) { animation: none; } }

/* Menüs der App-Leiste (Merkliste, Profil) auf dem Telefon: als Blatt unter der Leiste, über allem
   (pwa-shell.js hängt sie beim Öffnen an <body>). Inline-Position von Popper wird überstimmt. */
@media (max-width: 991.98px) {
    html.ui-refine body > .dropdown-menu.app-topbar-menu--sheet {
        position: fixed !important;
        inset: auto !important;
        top: calc(var(--app-topbar-h, 56px) + 6px) !important;
        left: max(10px, env(safe-area-inset-left, 0px)) !important;
        right: max(10px, env(safe-area-inset-right, 0px)) !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        max-height: calc(100dvh - var(--app-topbar-h, 56px) - 96px - env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 1095;
        margin: 0 !important;
    }
}


/* ────────────────────────────────────────────────────────────
   Mail-Detail auf dem iPhone, nativer (22.10.2026): vorher lagen bis zu
   76 px Rand links (Seite + Container + Panel + Karte + Nachricht + Body),
   die «Nächsten Schritte» brachen in eine 120-px-Spalte um (Wortbrüche,
   «Umsetzen» frass 40 % der Breite). Jetzt: Mail fast randlos wie Apple Mail,
   Schritte als Erinnerungen-Liste (Titel 2 Zeilen, Begründung 1 Zeile,
   antippen klappt auf), Aktionen als kleines «…».
   ──────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    html.ui-refine .container-fluid--mail:has(.mail-thread-panel) { padding-left: 4px !important; padding-right: 4px !important; }
    html.ui-refine .mail-thread-page.mail-thread-panel { padding-left: 0 !important; padding-right: 0 !important; }

    /* Nachrichtenkarte: kein Rahmen, kein Innenrand */
    html.ui-refine .mail-thread-panel .mail-thread-card {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    html.ui-refine .mail-thread-panel .mail-thread-card > .card-body { padding: 0 !important; }
    html.ui-refine .mail-thread-panel .mail-thread-message {
        padding: 12px 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    html.ui-refine .mail-thread-panel .mail-thread-message + .mail-thread-message { border-top: 1px solid var(--r-hairline) !important; }
    html.ui-refine .mail-thread-panel .mail-message-body { padding: 0 !important; }
    /* Lange Adressen (iCloud-Relay) auf eine Zeile kürzen, voller Text im Tooltip bzw. beim Antippen der Mail */
    html.ui-refine .mail-thread-panel .mail-message-meta { min-width: 0; }
    html.ui-refine .mail-thread-panel .mail-message-email > div {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    html.ui-refine .mail-thread-panel .mail-message-body iframe { border-radius: 10px; }

    /* Werkzeugleiste: kompakt, darf umbrechen. Kein overflow-x hier: das schnitt die Menüs
       (Verschieben, Textgrösse) ab, und der Ordner-Knopf lag ausserhalb des Bildschirms. */
    html.ui-refine .mail-thread-panel .mail-thread-toolbar {
        flex-wrap: wrap !important;
        gap: 4px 2px !important;
        margin: 0 0 4px !important;
        padding: 4px 0 8px !important;
    }
    html.ui-refine .mail-thread-panel .mail-thread-toolbar__group { gap: 2px !important; flex-wrap: wrap; }
    html.ui-refine .mail-thread-panel .mail-thread-toolbar__group--end { margin-left: auto !important; justify-content: flex-end; }

    /* KI-Karte: weniger Rand, gleiche Breite wie die Mail */
    html.ui-refine #mailAiCard { border-radius: 14px !important; }
    html.ui-refine #mailAiCard > .card-body { padding: 10px 12px 12px !important; }
    html.ui-refine #mailAiCard .card-header { padding: 8px 8px 8px 12px !important; }

    /* Nächste Schritte = Erinnerungen-Liste */
    html.ui-refine .mail-ai__steps { border-radius: 12px; }
    html.ui-refine .mail-ai__step {
        align-items: flex-start !important;
        gap: 10px !important;
        padding: 10px 6px 10px 12px !important;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    html.ui-refine .mail-ai__step-dot { width: 20px; height: 20px; margin-top: 1px; }
    html.ui-refine .mail-ai__step-title {
        font-size: 0.9375rem !important;
        font-weight: 500 !important;
        line-height: 1.3 !important;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: manual;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    html.ui-refine .mail-ai__step-meta {
        font-size: 0.8125rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    html.ui-refine .mail-ai__step.is-open .mail-ai__step-title { -webkit-line-clamp: unset; display: block; }
    html.ui-refine .mail-ai__step.is-open .mail-ai__step-meta { white-space: normal; }

    /* Aktionen rechts: klein */
    html.ui-refine .mail-ai__step > .ms-auto { flex: 0 0 auto; max-width: 42%; align-self: center; }
    html.ui-refine .mail-ai__step > .ms-auto .btn {
        min-height: 30px !important;
        padding: 4px 10px !important;
        font-size: 0.8125rem !important;
        border-radius: 999px !important;
        border: 0 !important;
        background: var(--r-accent-tint, var(--r-fill)) !important;
        color: var(--r-accent-text, var(--r-accent)) !important;
    }
    html.ui-refine .mail-ai__step > .ms-auto .btn .btn-text { display: none; }
    html.ui-refine .mail-ai__step > .ms-auto .btn:has(.btn-text) {
        width: 32px;
        height: 32px;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Sendung: Text «Verfolgen» bleibt sichtbar */
    html.ui-refine .mail-ai__step > .ms-auto .btn.mail-ai__track-btn { width: auto; padding: 0 12px !important; gap: 6px; }
    html.ui-refine .mail-ai__step > .ms-auto .btn.mail-ai__track-btn .btn-text { display: inline !important; }
    html.ui-refine .mail-ai__step > .ms-auto .d-flex { flex-wrap: nowrap !important; }
    /* «Umsetzen ▾» → «…» */
    html.ui-refine .mail-ai__step > .ms-auto .dropdown > .dropdown-toggle {
        width: 32px;
        height: 32px;
        padding: 0 !important;
        font-size: 0 !important;
        background: transparent !important;
        color: var(--r-text-2) !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    html.ui-refine .mail-ai__step > .ms-auto .dropdown > .dropdown-toggle::after { display: none; }
    html.ui-refine .mail-ai__step > .ms-auto .dropdown > .dropdown-toggle::before {
        content: "\f5d4"; /* bi-three-dots */
        font-family: "bootstrap-icons";
        font-size: 1.1rem;
        line-height: 1;
    }
    html.ui-refine .mail-ai__step > .ms-auto .dropdown > .dropdown-toggle:active { background: var(--r-fill) !important; }
}

/* Textgrösse der Mail («Aa», thread-panel) */
html.ui-refine .mail-zoom__menu.show {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 6px;
}
html.ui-refine .mail-zoom__btn,
html.ui-refine .mail-zoom__value {
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--r-text);
    min-height: 40px;
}
html.ui-refine .mail-zoom__btn { width: 48px; font-weight: 500; }
html.ui-refine .mail-zoom__btn--small { font-size: 0.8125rem; }
html.ui-refine .mail-zoom__btn--big { font-size: 1.25rem; }
html.ui-refine .mail-zoom__value { padding: 0 10px; font-size: 0.875rem; color: var(--r-text-2); font-variant-numeric: tabular-nums; }
html.ui-refine :is(.mail-zoom__btn, .mail-zoom__value):hover,
html.ui-refine :is(.mail-zoom__btn, .mail-zoom__value):active { background: var(--r-fill); }
@media (max-width: 991.98px) {
    html.ui-refine .mail-thread-panel .mail-thread-toolbar .mail-icon-btn { width: 36px !important; min-width: 36px !important; height: 36px !important; }
}

/* Mail-HTML im iframe färbt sich im Dunkelmodus selbst um (MailHtmlFrame::css). Die alte helle Fläche aus
   thread-panel/_styles («wie Apple Mail») ergab darum weisse Schrift auf Weiss auf /app/mail/threads/{id}. */
html.ui-refine[data-theme="dark"] .mail-message-body:has(iframe[data-mail-html-frame]) {
    background: transparent !important;
    padding: 0 !important;
}

/* Mail-KI: Sendung und vorgeschlagene Termine (22.10.2026) */
html.ui-refine .mail-ai__track-btn { display: inline-flex; align-items: center; gap: 6px; }
html.ui-refine .mail-ai__slots { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
html.ui-refine .mail-ai__slot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--r-surface);
}
html.ui-refine .mail-ai__slot-state {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--r-success);
}
html.ui-refine .mail-ai__slot.is-busy .mail-ai__slot-state { background: var(--r-warning); }
html.ui-refine .mail-ai__slot-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
html.ui-refine .mail-ai__slot-time { font-size: 0.8125rem; font-weight: 600; }
html.ui-refine .mail-ai__slot-info { font-size: 0.75rem; color: var(--r-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui-refine .mail-ai__slot.is-busy .mail-ai__slot-info { color: var(--r-warning); }
/* Termin steht schon im Kalender (Meldung #110) */
html.ui-refine .mail-ai__slot.is-match .mail-ai__slot-state { background: var(--r-accent); }
html.ui-refine .mail-ai__slot.is-match .mail-ai__slot-info { color: var(--r-success); }
html.ui-refine .mail-ai__slot.is-match .mail-ai__slot-info a { color: inherit !important; text-decoration: underline; }
html.ui-refine .mail-ai__slot-form { margin: 0; flex-shrink: 0; }
html.ui-refine .mail-ai__slot-form .btn { min-height: 28px; padding: 2px 10px; font-size: 0.75rem; border-radius: 999px; }

/* Mail-KI: Belege der Konversation je einzeln senden, Stand sichtbar (22.10.2026) */
html.ui-refine .mail-ai__step.is-done .mail-ai__step-dot {
    border-color: var(--r-success);
    background: var(--r-success);
    position: relative;
}
html.ui-refine .mail-ai__step.is-done .mail-ai__step-dot::after {
    content: "\f272"; /* bi-check2 */
    font-family: "bootstrap-icons";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #fff;
}
html.ui-refine .mail-ai__step.is-done .mail-ai__step-title { color: var(--r-text-2); }
html.ui-refine .mail-ai__slot.is-open .mail-ai__slot-state { background: var(--r-accent); }
html.ui-refine .mail-ai__beleg-name {
    border: 0;
    padding: 0;
    background: none;
    color: var(--r-accent-text, var(--r-accent));
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
html.ui-refine .mail-ai__beleg-open { min-height: 28px; padding: 2px 10px; font-size: 0.75rem; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
html.ui-refine .mail-ai__beleg-done { color: var(--r-success); flex-shrink: 0; padding: 0 6px; }
html.ui-refine .mail-beleg-preview-sent {
    position: absolute;
    right: 6px;
    bottom: 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--r-success);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
}
html.ui-refine .mail-ai__belegs { width: 100%; }
html.ui-refine .mail-ai__belegs .mail-ai__slot { min-width: 0; }
html.ui-refine .mail-ai__belegs .mail-ai__slot-text { overflow: hidden; }
html.ui-refine .mail-ai__beleg-name { display: block; }
html.ui-refine .mail-ai__belegs-all { margin: 8px 0 0; }
html.ui-refine .mail-ai__belegs-all .btn { border-radius: 999px; display: inline-flex; align-items: center; }

/* Nächste Schritte: ein Hauptknopf + «…» (23.10.2026) */
html.ui-refine .mail-ai__step-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
html.ui-refine .mail-ai__step-actions > form { margin: 0; }
html.ui-refine .mail-ai__more {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--r-text-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
html.ui-refine .mail-ai__more:hover, html.ui-refine .mail-ai__more[aria-expanded="true"] { background: var(--r-fill); color: var(--r-text); }
html.ui-refine .mail-ai__step-actions .btn .btn-text { margin-left: 4px; }
html.ui-refine .mail-ai__step-actions .btn.is-done { color: var(--r-success) !important; }
@media (max-width: 991.98px) {
    html.ui-refine .mail-ai__step > .ms-auto .btn.mail-ai__btn-labeled { width: auto; padding: 0 10px !important; gap: 4px; }
    html.ui-refine .mail-ai__step > .ms-auto .btn.mail-ai__btn-labeled .btn-text { display: inline !important; margin-left: 0; }
    html.ui-refine .mail-ai__step > .ms-auto { max-width: none; }
}
@media (max-width: 991.98px) {
    html.ui-refine .mail-ai__step > .ms-auto .btn.mail-ai__more { background: transparent !important; color: var(--r-text-2) !important; width: 32px; padding: 0 !important; }
}

/* Mail: aus dieser Mail eingetragene Termine (vor «In Kalender eintragen» sichtbar, 23.10.2026) */
html.ui-refine .mail-linked-events {
    align-items: flex-start;
    padding: 10px 14px;
}
html.ui-refine .mail-linked-events__icon {
    color: var(--r-success);
    font-size: 1rem;
    line-height: 1.4;
}
html.ui-refine .mail-linked-events__list {
    display: grid;
    gap: 4px;
    min-width: 0;
}
html.ui-refine .mail-linked-events__item {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    color: var(--r-text) !important;
    text-decoration: none;
}
html.ui-refine .mail-linked-events__item:hover .mail-linked-events__title {
    color: var(--r-accent-text);
}
html.ui-refine .mail-linked-events__title {
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}
html.ui-refine .mail-linked-events__when {
    color: var(--r-text-2);
    font-variant-numeric: tabular-nums;
}

/* Mail-Meldungen («Gesendet», «Archiviert» …). Vorher fest oben rechts im Inline-Style:
   in der Webapp lagen sie unter Statusleiste und Kopfleiste und waren kaum zu sehen. */
.mail-toast {
    position: fixed;
    z-index: 1100;
    top: calc(64px + env(safe-area-inset-top, 0px));
    right: 16px;
    max-width: 360px;
}
@media (max-width: 991.98px) {
    .mail-toast {
        top: auto;
        right: 16px;
        left: 16px;
        bottom: calc(96px + env(safe-area-inset-bottom, 0px));
        width: fit-content;
        max-width: calc(100vw - 32px);
        margin: 0 auto;
        justify-content: center;
        padding: 12px 18px !important;
        font-size: 1rem !important;
    }
    /* Allgemeine Meldungen der App ebenso unten über der Tab-Leiste statt oben rechts */
    #appToastContainer {
        top: auto !important;
        right: 0 !important;
        left: 0 !important;
        bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #appToastContainer .toast {
        max-width: calc(100vw - 32px);
    }
}

/* Mail-KI: nächste Schritte abhaken (Kreis ist ein Knopf). Erledigt: gedimmt, ohne Aktionen. */
html.ui-refine .mail-ai__step-toggle {
    padding: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
}
html.ui-refine .mail-ai__step-toggle::before {
    content: "";
    position: absolute;
    inset: -12px;
}
html.ui-refine .mail-ai__step-toggle:hover { border-color: var(--r-success); }
html.ui-refine .mail-ai__step-toggle:focus-visible { outline: 2px solid var(--r-accent); outline-offset: 2px; }
html.ui-refine .mail-ai__step.is-done:has(.mail-ai__step-toggle) .mail-ai__step-title { text-decoration: line-through; }
html.ui-refine .mail-ai__step.is-done:has(.mail-ai__step-toggle) .mail-ai__step-meta,
html.ui-refine .mail-ai__step.is-done:has(.mail-ai__step-toggle) .mail-ai__step-actions { display: none; }

/* Mail löschen: kleines Auswahlfenster statt grossem Dialog (23.10.2026) */
html.ui-refine .mail-delete-sheet .modal-dialog { max-width: 300px; }
html.ui-refine .mail-delete-sheet .modal-content {
    border-radius: 16px;
    overflow: hidden;
}
html.ui-refine .mail-delete-sheet .modal-body {
    padding: 20px 18px 14px;
    text-align: center;
}
html.ui-refine .mail-delete-sheet__title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--r-text);
}
html.ui-refine .mail-delete-sheet__hint {
    margin: 4px 0 0;
    font-size: 0.8125rem;
    color: var(--r-text-2);
}
html.ui-refine .mail-delete-sheet__hint--linked .bi { color: var(--r-warning); }
html.ui-refine .mail-delete-sheet__actions {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--r-hairline);
}
html.ui-refine .mail-delete-sheet__actions form { margin: 0; }
html.ui-refine .mail-delete-sheet__actions form.d-none { display: none !important; }
html.ui-refine .mail-delete-sheet__btn {
    display: block;
    width: 100%;
    min-height: 46px;
    padding: 10px 16px;
    border: 0;
    border-top: 1px solid var(--r-hairline);
    background: transparent;
    color: var(--r-danger);
    font-size: 1rem;
    text-align: center;
}
html.ui-refine .mail-delete-sheet__actions > form:first-child .mail-delete-sheet__btn,
html.ui-refine .mail-delete-sheet__actions > form.d-none + form .mail-delete-sheet__btn { border-top: 0; }
html.ui-refine .mail-delete-sheet__btn.is-strong { font-weight: 600; }
html.ui-refine .mail-delete-sheet__btn.is-cancel { color: var(--r-accent-text); }
html.ui-refine .mail-delete-sheet__btn:hover,
html.ui-refine .mail-delete-sheet__btn:focus-visible { background: var(--r-hover); outline: none; }

/* ── Stream: Sichtbarkeit klar, Aktionen im «⋯» (23.10.2026) ─────────────────────────────
   Intern = nur Team (Schloss, warme Tönung, Punkt in Warnfarbe); öffentlich = Kunde sieht es.
   Sichtbarkeit und Löschen stehen im Menü _stream_item_menu statt als breites Auswahlfeld. */
html.ui-refine .stream-vis-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.4;
    flex-shrink: 0;
}
html.ui-refine .stream-vis-badge.is-internal {
    background: color-mix(in srgb, var(--r-warning) 18%, transparent);
    color: var(--r-text);
}
html.ui-refine .stream-vis-badge.is-internal i { color: var(--r-warning); }
html.ui-refine .stream-vis-badge.is-public {
    background: var(--r-accent-tint);
    color: var(--r-accent-text);
    font-weight: 500;
}
html.ui-refine #stream .stream-item.internal,
html.ui-refine .stream-timeline > .stream-item.internal {
    --stream-accent: var(--r-warning);
    background: color-mix(in srgb, var(--r-warning) 6%, transparent);
    border-radius: var(--r-radius);
}
html.ui-refine .stream-item-menu .stream-item-menu-toggle { border-color: transparent; color: var(--r-text-2); }
html.ui-refine .stream-item-menu .stream-item-menu-toggle:hover,
html.ui-refine .stream-item-menu .stream-item-menu-toggle[aria-expanded="true"] { background: var(--r-hover); color: var(--r-text); }
html.ui-refine .stream-item-menu .dropdown-menu { min-width: 13rem; }

/* Gesendete Mail im Stream: Text der Mail lesbar, ohne Mail-Layout */
html.ui-refine .stream-email-sent-body {
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: var(--r-radius-sm);
    background: var(--r-fill);
    color: var(--r-text);
    white-space: pre-wrap;
    font-size: 0.875rem;
    line-height: 1.5;
    max-height: 22rem;
    overflow: auto;
}

/* Smarty-Zusammenfassung oben am Stream */
html.ui-refine .stream-smarty {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-radius: var(--r-radius-card);
    background: var(--r-accent-tint);
    color: var(--r-text);
}
html.ui-refine .stream-smarty__head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.875rem; }
html.ui-refine .stream-smarty__head .bi { color: var(--r-accent); }
html.ui-refine .stream-smarty__head .stream-smarty__refresh { margin-left: auto; }
html.ui-refine .stream-smarty__text { margin-top: 6px; font-size: 0.9rem; line-height: 1.5; white-space: pre-line; }
html.ui-refine .stream-smarty__muted { color: var(--r-text-3); font-size: 0.85rem; margin-top: 6px; }
html.ui-refine .stream-smarty__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
html.ui-refine .stream-smarty__action {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px; border: 1px solid var(--r-hairline);
    background: var(--r-raised, var(--r-fill)); color: var(--r-text); font-size: 0.8125rem;
}
html.ui-refine .stream-smarty__action:hover { background: var(--r-hover); }
html.ui-refine .stream-smarty__action[disabled] { opacity: .6; }

@media (max-width: 991.98px) {
    html.ui-refine .stream-item-header .stream-item-menu { display: none !important; }
    html.ui-refine .stream-item-header > .stream-item-actor .stream-vis-badge.is-public { display: none !important; }
    html.ui-refine .stream-item-header > .stream-item-actor .stream-vis-badge.is-internal::before { color: var(--r-warning); }
    html.ui-refine .stream-item-header > .stream-item-actor .stream-vis-badge.is-internal i { display: none; }
}

/* ── Auftrag: wiederkehrende Rechnung eingeklappt (seit 23.10.2026) ──
   Die Verwaltung liegt bei den Rechnungen (Reiter «Wiederkehrend»); im Auftrag nur eine Zeile. */
html.ui-refine .order-retainer-fold > .order-retainer-fold__summary {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px;
    min-height: 44px; padding: 10px var(--r-4, 16px);
    list-style: none; cursor: pointer; color: var(--r-text);
}
html.ui-refine .order-retainer-fold > .order-retainer-fold__summary::-webkit-details-marker { display: none; }
html.ui-refine .order-retainer-fold > .order-retainer-fold__summary:hover { background: var(--r-hover); }
html.ui-refine .order-retainer-fold__chevron {
    color: var(--r-text-3); font-size: var(--r-fs-caption, 12px);
    transition: transform var(--r-fast, .15s) var(--r-ease, ease);
}
html.ui-refine .order-retainer-fold[open] .order-retainer-fold__chevron { transform: rotate(90deg); }
html.ui-refine .order-retainer-fold__title { font-size: var(--r-fs-footnote, 13px); font-weight: 600; }
html.ui-refine .order-retainer-fold__meta { color: var(--r-text-2); font-size: var(--r-fs-footnote, 13px); }
html.ui-refine .order-retainer-fold__link {
    margin-left: auto; color: var(--r-accent-text); font-size: var(--r-fs-footnote, 13px);
    text-decoration: none; white-space: nowrap;
}
html.ui-refine .order-retainer-fold__link:hover { text-decoration: underline; }
html.ui-refine .order-retainer-fold__body {
    padding: var(--r-3, 12px) var(--r-4, 16px) var(--r-4, 16px);
    border-top: 1px solid var(--r-separator);
}
html.ui-refine .order-retainer-fold__facts {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    gap: var(--r-3, 12px); margin: 0 0 var(--r-3, 12px);
}
html.ui-refine .order-retainer-fold__facts dt {
    color: var(--r-text-3); font-size: var(--r-fs-caption, 12px); font-weight: 600; margin: 0;
}
html.ui-refine .order-retainer-fold__facts dd { color: var(--r-text); font-size: var(--r-fs-footnote, 13px); margin: 2px 0 0; }
html.ui-refine .order-retainer-create-link {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
    color: var(--r-text-2); font-size: var(--r-fs-footnote, 13px); text-decoration: none;
}
html.ui-refine .order-retainer-create-link:hover { color: var(--r-accent-text); }

/* Smarty-Lagebericht im Cockpit von Auftrag und Projekt (app.partials._smarty_situation_report, 23.10.2026) */
html.ui-refine .smarty-report__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
html.ui-refine .smarty-report__head > .bi { color: var(--r-accent); }
html.ui-refine .smarty-report__time { margin-top: 8px; color: var(--r-text-3); font-size: var(--r-fs-caption, 12px); }
html.ui-refine .smarty-report__refresh { margin-left: auto; color: var(--r-text-2); padding: 2px 6px; line-height: 1; }
html.ui-refine .smarty-report__refresh:hover { color: var(--r-accent-text); }
html.ui-refine .smarty-report__extra { margin-left: auto; color: var(--r-text-2); padding: 2px 6px; font-size: .8125rem; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
html.ui-refine .smarty-report__extra:hover { color: var(--r-accent-text); }
html.ui-refine .smarty-report__extra + .smarty-report__refresh { margin-left: 0; }
@media (max-width: 420px) { html.ui-refine .smarty-report__extra span { display: none; } html.ui-refine .smarty-report__extra { min-width: 44px; min-height: 44px; justify-content: center; } }
html.ui-refine .smarty-report__signals { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
html.ui-refine .smarty-report__signals .r-status { white-space: normal; max-width: 100%; height: auto; min-height: 22px; padding: 3px 9px; line-height: 1.3; }
html.ui-refine .smarty-report__muted { color: var(--r-text-3); font-size: var(--r-fs-footnote, 13px); }
html.ui-refine .smarty-report__text { color: var(--r-text); font-size: 0.9rem; line-height: 1.5; overflow-wrap: anywhere; }
html.ui-refine .smarty-report__text.is-stale { opacity: .6; }
html.ui-refine .smarty-report__text p { margin: 0 0 6px; }
html.ui-refine .smarty-report__text ul { margin: 0 0 8px; padding-left: 1.15rem; }
html.ui-refine .smarty-report__text li { margin: 2px 0; }
html.ui-refine .smarty-report__label {
    margin: 8px 0 2px; color: var(--r-text-2);
    font-size: var(--r-fs-caption, 12px); font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
}
html.ui-refine .smarty-report__label:first-child { margin-top: 0; }
html.ui-refine .smarty-report__text a { color: var(--r-accent-text); }
@media (pointer: coarse) {
    html.ui-refine .smarty-report__refresh { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* Scrollbare Dialoge mit <form> zwischen .modal-content und Kopf/Inhalt/Fuss (z. B. «E-Mail senden»
   im Ticket): Bootstrap erwartet die Teile als direkte Kinder – sonst scrollt der Inhalt auf dem
   iPhone nicht. Das Formular übernimmt hier die Spalte und die Höhenbegrenzung. */
:where(.ui-refine) .modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}
:where(.ui-refine) .modal-dialog-scrollable .modal-content > form > .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    min-height: 0;
}
@media (max-width: 767.98px) {
    /* 100vh zählt auf dem iPhone die Notch und die Home-Leiste mit – der Fuss (Senden) hing unten raus. */
    :where(.ui-refine) .modal-dialog-scrollable {
        height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 1rem);
    }
}

/* ── Stream-Anhänge (23.10.2026): Bild-Kacheln mit Aktionsleiste, Dateizeilen, Signaturbilder ── */
:where(.ui-refine) .stream-att-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 10px; margin: 10px 0 4px;
}
@media (max-width: 575.98px) { :where(.ui-refine) .stream-att-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
:where(.ui-refine) .stream-att-cell { margin: 0; min-width: 0; }
:where(.ui-refine) .stream-att-cell--wide { grid-column: 1 / -1; }
:where(.ui-refine) .stream-att-cell__cap {
    margin-top: 5px; font-size: 0.75rem; color: var(--r-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:where(.ui-refine) .stream-att-tile {
    position: relative; border-radius: 12px; overflow: hidden; background: var(--r-fill);
    box-shadow: 0 0 0 1px var(--r-hairline);
}
:where(.ui-refine) .stream-att-tile__img { display: block; aspect-ratio: 4 / 3; }
:where(.ui-refine) .stream-att-tile__img img {
    display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease;
}
:where(.ui-refine) .stream-att-tile:hover .stream-att-tile__img img { transform: scale(1.03); }
:where(.ui-refine) .stream-att-tile__bar {
    position: absolute; right: 6px; bottom: 6px; display: flex; gap: 4px; padding: 3px;
    border-radius: 999px; background: rgba(20, 20, 22, 0.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
:where(.ui-refine) .stream-att-tile__form { margin: 0; display: inline-flex; }
:where(.ui-refine) .stream-att-tile__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 30px; min-width: 30px; padding: 0 9px;
    border: 0; border-radius: 999px; background: transparent; color: #fff !important; font-size: 0.75rem; font-weight: 600;
    text-decoration: none; cursor: pointer;
}
:where(.ui-refine) .stream-att-tile__btn:hover { background: rgba(255, 255, 255, 0.16); }
:where(.ui-refine) .stream-att-tile__btn--danger:hover { background: rgba(255, 69, 58, 0.85); }
:where(.ui-refine) .stream-att-tile__btn .bi { font-size: 0.875rem; }
@media (hover: hover) and (min-width: 576px) {
    :where(.ui-refine) .stream-att-tile__bar { opacity: 0; transition: opacity .15s ease; }
    :where(.ui-refine) .stream-att-tile:hover .stream-att-tile__bar,
    :where(.ui-refine) .stream-att-tile:focus-within .stream-att-tile__bar { opacity: 1; }
}
@media (max-width: 575.98px) { :where(.ui-refine) .stream-att-tile__btn span { display: none; } }
:where(.ui-refine) .stream-att-media { display: block; width: 100%; max-height: 260px; border-radius: 12px; background: #000; }

/* Dateizeilen */
:where(.ui-refine) .stream-att-files { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
:where(.ui-refine) .stream-att-file {
    display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 12px;
    background: var(--r-fill); box-shadow: inset 0 0 0 1px var(--r-hairline); min-width: 0;
}
:where(.ui-refine) .stream-att-file .stream-att-tile__btn { color: var(--r-text-2) !important; }
:where(.ui-refine) .stream-att-file .stream-att-tile__btn:hover { background: var(--r-fill-strong); color: var(--r-text) !important; }
:where(.ui-refine) .stream-att-file .stream-att-tile__btn--danger:hover { background: rgba(255, 69, 58, 0.16); color: var(--r-danger) !important; }
:where(.ui-refine) .stream-att-file__icon {
    flex: 0 0 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem;
    background: color-mix(in srgb, var(--r-text-3) 16%, transparent); color: var(--r-text-2);
}
:where(.ui-refine) .stream-att-file__icon.is-pdf { background: color-mix(in srgb, #ff453a 18%, transparent); color: #ff6961; }
:where(.ui-refine) .stream-att-file__icon.is-doc { background: color-mix(in srgb, #0a84ff 18%, transparent); color: #409cff; }
:where(.ui-refine) .stream-att-file__icon.is-xls { background: color-mix(in srgb, #30d158 18%, transparent); color: #30d158; }
:where(.ui-refine) .stream-att-file__icon.is-ppt { background: color-mix(in srgb, #ff9f0a 18%, transparent); color: #ff9f0a; }
:where(.ui-refine) .stream-att-file__icon.is-zip { background: color-mix(in srgb, #bf5af2 18%, transparent); color: #bf5af2; }
:where(.ui-refine) .stream-att-file__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
:where(.ui-refine) .stream-att-file__name {
    font-size: 0.8125rem; font-weight: 600; color: var(--r-text) !important; text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:where(.ui-refine) a.stream-att-file__name:hover { text-decoration: underline; }
:where(.ui-refine) .stream-att-file__meta { font-size: 0.6875rem; color: var(--r-text-3); }
:where(.ui-refine) .stream-att-file.has-preview { cursor: pointer; transition: background .15s ease, border-color .15s ease; }
:where(.ui-refine) .stream-att-file.has-preview:hover { background: var(--r-fill-strong); }
:where(.ui-refine) .stream-att-file__hint { margin-left: 6px; color: var(--r-accent); font-weight: 500; white-space: nowrap; }
:where(.ui-refine) .stream-att-file__hint .bi { font-size: 0.75em; }

/* Signaturbilder aus Mails: klein und eingeklappt */
:where(.ui-refine) .stream-att-sig { margin-top: 8px; font-size: 0.75rem; color: var(--r-text-3); }
:where(.ui-refine) .stream-att-sig > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 5px; }
:where(.ui-refine) .stream-att-sig > summary::-webkit-details-marker { display: none; }
:where(.ui-refine) .stream-att-sig__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
:where(.ui-refine) .stream-att-sig__item {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 8px; background: #fff;
}
:where(.ui-refine) .stream-att-sig__item img { max-height: 28px; max-width: 140px; display: block; }
:where(.ui-refine) .stream-att-sig__item .stream-att-tile__btn { color: #6e6e73 !important; height: 24px; min-width: 24px; padding: 0 5px; }

/* ==========================================================================
   Webapp nativ (24.10.2026) – Gegenstück zu public/js/pwa-native.js
   Seitenwechsel mit Richtung, Zurück vom Rand, Wischen in Listen, Aktionsblatt,
   Dialoge als Blatt, Platzhalter, Offline-Stand, Segment-Tabs.
   ========================================================================== */

/* Seitenwechsel: Detail schiebt von rechts herein, Zurück hinaus, Tabs blenden nur kurz.
   Kurz halten: Solange die Übergangs-Animation läuft, nimmt der Browser keine Tipps an («zweimal tippen», 24.10.2026).
   html[data-nav] setzt das Kopf-Skript in layouts/app aus der Richtung, die pwa-native.js beim Tippen ablegt. */
@media (max-width: 991.98px) and (prefers-reduced-motion: no-preference) {
    html[data-nav]::view-transition-old(root),
    html[data-nav]::view-transition-new(root) {
        mix-blend-mode: normal;
    }
    /* Topbar und Tab-Leiste blenden nur über – nicht länger als die Seite selbst */
    html[data-nav]::view-transition-group(app-topbar),
    html[data-nav]::view-transition-group(app-tabbar),
    html[data-nav]::view-transition-old(app-topbar),
    html[data-nav]::view-transition-new(app-topbar),
    html[data-nav]::view-transition-old(app-tabbar),
    html[data-nav]::view-transition-new(app-tabbar) {
        animation-duration: 180ms;
    }
    html[data-nav="forward"]::view-transition-old(root) {
        animation: 240ms cubic-bezier(0.32, 0.72, 0, 1) both app-vt-out-left;
    }
    html[data-nav="forward"]::view-transition-new(root) {
        animation: 240ms cubic-bezier(0.32, 0.72, 0, 1) both app-vt-in-right;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.22);
    }
    html[data-nav="back"]::view-transition-old(root) {
        z-index: 2;
        animation: 220ms cubic-bezier(0.32, 0.72, 0, 1) both app-vt-out-right;
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.22);
    }
    html[data-nav="back"]::view-transition-new(root) {
        animation: 220ms cubic-bezier(0.32, 0.72, 0, 1) both app-vt-in-left;
    }
    html[data-nav="tab"]::view-transition-old(root),
    html[data-nav="tab"]::view-transition-new(root) {
        animation-duration: 110ms;
    }
    /* Vom Rand gewischt: die Seite ist schon hinausgeschoben, die neue steht sofort da */
    html[data-nav="swipe"]::view-transition-old(root) { animation: none; opacity: 0; }
    html[data-nav="swipe"]::view-transition-new(root) { animation: none; }
}
@keyframes app-vt-in-right { from { transform: translateX(100%); } }
@keyframes app-vt-out-left { to { transform: translateX(-28%); filter: brightness(0.8); } }
@keyframes app-vt-out-right { to { transform: translateX(100%); } }
@keyframes app-vt-in-left { from { transform: translateX(-28%); filter: brightness(0.8); } }

/* Zurück vom linken Rand */
html.ui-refine .app-content.is-edge-swiping {
    position: relative;
    z-index: 1;
    background: var(--r-canvas);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.28);
    will-change: transform;
}
html.ui-refine .is-edge-hidden { visibility: hidden !important; }
.app-edge-back {
    position: fixed;
    top: 50%;
    left: 6px;
    z-index: 1090;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--r-raised, #2a2a2e);
    color: var(--r-text-2, #b3b3ba);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, -50%, 0) scale(0.7);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.app-edge-back.is-ready { background: var(--r-accent, #4a9eff); color: #fff; }
.app-edge-back .bi { font-size: 1.1rem; }

/* Listenzeilen: lange drücken öffnet das Aktionsblatt (kein Text markieren, keine Link-Vorschau) */
@media (max-width: 991.98px) and (pointer: coarse) {
    html.ui-refine :is([data-pm-list-row], .mobile-card-view > .list-item-card) {
        /* Seitliches Wischen gehört der Zeile, senkrecht scrollt der Browser selbst (ohne Skript-Bremse) */
        touch-action: pan-y;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
}
html.ui-refine :is([data-pm-list-row], .mobile-card-view > .list-item-card).is-pressed {
    transform: scale(0.985);
    transition: transform 0.18s var(--r-ease);
}
/* Wischen: Zeile über der farbigen Aktion (.app-swipe-hint, z-index 1) */
html.ui-refine :is([data-pm-list-row], .mobile-card-view > .list-item-card).is-swiping {
    position: relative;
    z-index: 2;
    background-color: var(--r-surface);
    will-change: transform;
}
html.ui-refine :is([data-pm-list-row], .mobile-card-view > .list-item-card).is-swipe-done {
    opacity: 0.5;
    transition: opacity var(--r-base) var(--r-ease);
}
html.ui-refine :is([data-pm-list-row], .mobile-card-view > .list-item-card).is-swipe-done :is(.pm-list-title-text, .ticket-list-title, h6) {
    text-decoration: line-through;
}
.app-swipe-hint {
    position: fixed;
    z-index: 1;
    display: none;
    align-items: center;
    overflow: hidden;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}
.app-swipe-hint.is-visible { display: flex; }
.app-swipe-hint.is-done { background: var(--r-success, #32d15f); justify-content: flex-start; }
.app-swipe-hint.is-more { background: var(--r-text-3, #8d8d95); justify-content: flex-end; }
.app-swipe-hint > * { flex: none; }
.app-swipe-hint i { margin: 0 6px 0 18px; }
.app-swipe-hint.is-more i { order: 2; margin: 0 18px 0 6px; }
.app-swipe-hint .bi { font-size: 1.15rem; transition: transform 0.15s ease; }
.app-swipe-hint.is-armed .bi { transform: scale(1.18); }

/* Aktionsblatt wie in iOS: Gruppe mit Titel, darunter «Abbrechen» */
.app-sheet {
    position: fixed;
    inset: 0;
    z-index: 1100;
}
.app-sheet[hidden] { display: none; }
.app-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: var(--r-scrim, rgba(0, 0, 0, 0.45));
    opacity: 0;
    transition: opacity 0.24s ease;
}
.app-sheet__panel {
    position: absolute;
    left: max(8px, env(safe-area-inset-left, 0px));
    right: max(8px, env(safe-area-inset-right, 0px));
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    max-width: 480px;
    margin: 0 auto;
    display: grid;
    gap: 8px;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 24px);
    transform: translate3d(0, 110%, 0);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
.app-sheet.is-open .app-sheet__backdrop { opacity: 1; }
.app-sheet__panel:focus { outline: none; }
.app-sheet.is-open .app-sheet__panel { transform: none; }
.app-sheet__group,
.app-sheet__cancel {
    border-radius: 14px;
    background: var(--r-raised, #2a2a2e);
    box-shadow: var(--r-shadow-modal);
}
.app-sheet__group {
    overflow-y: auto;
    overscroll-behavior: contain;
}
.app-sheet__title {
    padding: 12px 16px 10px;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--r-text-3, #8d8d95);
    border-bottom: 0.5px solid var(--r-separator);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.app-sheet__item,
.app-sheet__cancel {
    width: 100%;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: var(--r-accent, #4a9eff);
    font-size: 1.0625rem;
    font-weight: 400;
    -webkit-tap-highlight-color: transparent;
}
.app-sheet__item + .app-sheet__item { border-top: 0.5px solid var(--r-separator); }
.app-sheet__item .bi { font-size: 1.15rem; width: 1.25rem; }
.app-sheet__item.is-danger { color: var(--r-danger, #ff5c50); }
.app-sheet__item:active,
.app-sheet__cancel:active { background: var(--r-fill); }
.app-sheet__cancel {
    font-weight: 600;
    background: var(--r-raised, #2a2a2e);
}

/* Kurze Meldung mit «Rückgängig» über der Tab-Leiste */
.app-undo-toast {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: calc(100vw - 32px);
    padding: 10px 10px 10px 16px;
    border-radius: 14px;
    background: var(--r-text, #f3f3f5);
    color: var(--r-canvas, #19191b);
    font-size: 0.875rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translate3d(-50%, 12px, 0);
    transition: opacity 0.22s ease, transform 0.22s var(--r-ease);
}
.app-undo-toast.is-shown { opacity: 1; transform: translate3d(-50%, 0, 0); }
.app-undo-toast span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-undo-toast button {
    flex: none;
    border: 0;
    border-radius: 9px;
    padding: 6px 10px;
    background: transparent;
    color: #0a72e8; /* Meldung ist invertiert: dunkel → helle Fläche */
    font-weight: 600;
}
html.ui-refine[data-theme="light"] .app-undo-toast button { color: #4a9eff; }
@media (min-width: 992px) {
    .app-undo-toast { bottom: 24px; }
}

/* Dialoge auf dem iPhone: Blatt von unten mit Griff; nach unten ziehen schliesst (pwa-native.js).
   Vollbild-Dialoge (modal-fullscreen*) und data-sheet="off" bleiben, wie sie sind. */
@media (max-width: 575.98px) {
    html.ui-refine .modal:not([data-sheet="off"]):has(> .modal-dialog:not([class*="modal-fullscreen"])) {
        padding-bottom: 0;
    }
    html.ui-refine .modal:not([data-sheet="off"]) > .modal-dialog:not([class*="modal-fullscreen"]) {
        display: flex;
        align-items: flex-end;
        width: 100%;
        max-width: none;
        min-height: 100%;
        height: auto;
        margin: 0;
    }
    html.ui-refine .modal:not([data-sheet="off"]) > .modal-dialog-scrollable:not([class*="modal-fullscreen"]) {
        height: 100%;
    }
    html.ui-refine .modal:not([data-sheet="off"]) > .modal-dialog:not([class*="modal-fullscreen"]) > .modal-content {
        width: 100%;
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 12px);
        border-radius: var(--r-radius-sheet) var(--r-radius-sheet) 0 0 !important;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    /* Ohne eigenen Scrollbereich scrollt das ganze Blatt – sonst wäre der Fuss (Speichern) abgeschnitten */
    html.ui-refine .modal:not([data-sheet="off"]) > .modal-dialog:not([class*="modal-fullscreen"]):not(.modal-dialog-scrollable) > .modal-content {
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    html.ui-refine .modal:not([data-sheet="off"]) > .modal-dialog:not([class*="modal-fullscreen"]) > .modal-content::before {
        content: "";
        display: block;
        flex: none;
        width: 36px;
        height: 5px;
        margin: 6px auto 0;
        border-radius: 3px;
        background: var(--r-fill-strong);
    }
    html.ui-refine .modal.fade:not([data-sheet="off"]) > .modal-dialog:not([class*="modal-fullscreen"]) {
        opacity: 1;
        transform: translate3d(0, 100%, 0);
        transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1);
    }
    html.ui-refine .modal.show:not([data-sheet="off"]) > .modal-dialog:not([class*="modal-fullscreen"]) {
        transform: none;
    }
}

/* Platzhalter, solange die nächste Seite lädt */
.app-nav-skeleton {
    position: fixed;
    bottom: 0;
    z-index: 1020;
    display: none;
    padding: 16px 16px 0;
    background: var(--r-canvas, #19191b);
    overflow: hidden;
    pointer-events: none;
}
html.is-nav-waiting .app-nav-skeleton { display: block; animation: app-skel-in 0.18s ease both; }
@keyframes app-skel-in { from { opacity: 0; } }
.app-nav-skeleton__title,
.app-nav-skeleton__chips span,
.app-nav-skeleton__dot,
.app-nav-skeleton__lines span {
    display: block;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--r-fill) 0%, var(--r-fill-strong) 50%, var(--r-fill) 100%);
    background-size: 200% 100%;
    animation: app-skel-shimmer 1.2s ease-in-out infinite;
}
.app-nav-skeleton__title { width: 55%; height: 28px; margin-bottom: 14px; }
.app-nav-skeleton__chips { display: flex; gap: 8px; margin-bottom: 16px; }
.app-nav-skeleton__chips span { width: 72px; height: 28px; border-radius: 999px; }
.app-nav-skeleton__row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 0.5px solid var(--r-hairline); }
.app-nav-skeleton__dot { flex: none; width: 36px; height: 36px; border-radius: 50%; }
.app-nav-skeleton__lines { flex: 1; display: grid; gap: 8px; }
.app-nav-skeleton__lines span { height: 12px; }
.app-nav-skeleton__lines span:first-child { width: 70%; }
.app-nav-skeleton__lines span:last-child { width: 45%; }
@keyframes app-skel-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
    .app-nav-skeleton__title, .app-nav-skeleton__chips span, .app-nav-skeleton__dot, .app-nav-skeleton__lines span { animation: none; }
}

/* Gespeicherter Stand ohne Netz (sw.js) */
.app-offline-copy {
    position: fixed;
    top: calc(var(--app-topbar-h, 56px) + 8px);
    left: 50%;
    z-index: 1060;
    display: flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: calc(100vw - 24px);
    padding: 8px 14px;
    border-radius: 12px;
    background: var(--r-raised, #2a2a2e);
    color: var(--r-text, #f3f3f5);
    font-size: 0.8125rem;
    line-height: 1.35;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22), inset 0 0 0 0.5px var(--r-separator);
    transform: translateX(-50%);
}
.app-offline-copy .bi { flex: none; color: var(--r-warning, #ffb340); font-size: 1rem; }

/* Tastatur offen: Tab-Leiste weg, sonst schwebt sie über der Tastatur */
html.kb-open .app-mobile-bottomnav { display: none !important; }

/* Tabs auf dem iPhone: bis vier Einträge als Segment-Leiste, mehr als wischbare Reihe */
@media (max-width: 575.98px) {
    html.ui-refine .app-content .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }
    html.ui-refine .app-content .nav-tabs::-webkit-scrollbar { display: none; }
    html.ui-refine .app-content .nav-tabs .nav-link { white-space: nowrap; }
    html.ui-refine .app-content .nav-tabs:not(:has(> :nth-child(5))) {
        gap: 2px;
        padding: 2px;
        border: 0;
        border-radius: 9px;
        background: var(--r-fill);
    }
    html.ui-refine .app-content .nav-tabs:not(:has(> :nth-child(5))) > * {
        flex: 1 0 auto;
        min-width: 0;
    }
    html.ui-refine .app-content .nav-tabs:not(:has(> :nth-child(5))) .nav-link {
        width: 100%;
        margin: 0;
        padding: 6px 10px !important;
        border-radius: 7px;
        text-align: center;
        font-size: 0.8125rem;
        box-shadow: none;
    }
    /* Gewähltes Segment: dunkel das iOS-Grau, hell weiss */
    html.ui-refine .app-content .nav-tabs:not(:has(> :nth-child(5))) .nav-link.active {
        background: #636366 !important;
        color: #fff !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
    }
    html.ui-refine[data-theme="light"] .app-content .nav-tabs:not(:has(> :nth-child(5))) .nav-link.active {
        background: #fff !important;
        color: var(--r-text) !important;
    }
}

/* ══ GESPRÄCHE (Telefonie, seit 24.10.2026) ═════════════════════════════════
   Seite app.phone.conversations: Kopfzahlen, Rückruf-Liste, Anrufe je Tag.
   Zeile = <details class="pc-call">; nur Tokens, gilt für Hell und Dunkel. */
:where(.ui-refine) .pc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 8px; margin-bottom: var(--r-4); }
:where(.ui-refine) .pc-stat {
    display: grid; gap: 2px; padding: 10px 14px;
    background: var(--r-surface); border: 1px solid var(--r-hairline); border-radius: var(--r-radius-card);
    color: var(--r-text); text-decoration: none;
}
:where(.ui-refine) a.pc-stat:hover { background: var(--r-hover); color: var(--r-text); }
:where(.ui-refine) .pc-stat__value { font-size: var(--r-fs-title2); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
:where(.ui-refine) .pc-stat__label { font-size: var(--r-fs-caption); color: var(--r-text-3); font-weight: 600; }
:where(.ui-refine) .pc-stat.is-warn .pc-stat__value { color: var(--r-warning); }
:where(.ui-refine) .pc-stat.is-danger .pc-stat__value { color: var(--r-danger); }

:where(.ui-refine) .pc-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: var(--r-4); }
:where(.ui-refine) .pc-filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
:where(.ui-refine) .pc-filters__search { display: flex; gap: 6px; flex: 1 1 240px; max-width: 420px; }
:where(.ui-refine) .pc-filters__search .form-control { width: 0; min-width: 0; flex: 1; }
:where(.ui-refine) .pc-filters__more { padding: 12px 14px; background: var(--r-surface); border: 1px solid var(--r-hairline); border-radius: var(--r-radius-card); }

:where(.ui-refine) .pc-section { margin-bottom: var(--r-6); }
:where(.ui-refine) .pc-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 4px 6px; }
:where(.ui-refine) .pc-section__title { margin: 0; font-size: var(--r-fs-headline); font-weight: 600; color: var(--r-text); }
:where(.ui-refine) .pc-section__note { font-size: var(--r-fs-caption); color: var(--r-text-3); }

:where(.ui-refine) .pc-list {
    margin: 0; padding: 0; list-style: none;
    background: var(--r-surface); border: 1px solid var(--r-hairline); border-radius: var(--r-radius-card);
}
:where(.ui-refine) .pc-list > li + li { box-shadow: inset 0 1px 0 var(--r-hairline); }
:where(.ui-refine) .pc-list > li:first-child > .pc-call > summary,
:where(.ui-refine) .pc-list > li:first-child > .pc-row { border-top-left-radius: var(--r-radius-card); border-top-right-radius: var(--r-radius-card); }
:where(.ui-refine) .pc-day { margin: var(--r-5) 0 6px; padding: 0 4px; font-size: var(--r-fs-footnote); font-weight: 600; color: var(--r-text-3); }
:where(.ui-refine) .pc-day:first-child { margin-top: 0; }

:where(.ui-refine) .pc-row,
:where(.ui-refine) .pc-call > summary {
    display: flex; align-items: center; gap: 12px;
    min-height: 56px; padding: 10px 16px;
    color: var(--r-text);
}
:where(.ui-refine) .pc-call > summary { list-style: none; cursor: pointer; }
:where(.ui-refine) .pc-call > summary::-webkit-details-marker { display: none; }
:where(.ui-refine) .pc-call > summary:hover { background: var(--r-hover); }
:where(.ui-refine) .pc-call > summary:focus-visible { outline: 2px solid var(--r-accent); outline-offset: -2px; }
:where(.ui-refine) .pc-call[open] > summary { background: var(--r-fill); }
:where(.ui-refine) .pc-call.is-target > summary { box-shadow: inset 3px 0 0 var(--r-accent); }

:where(.ui-refine) .pc-icon {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--r-fill); color: var(--r-text-2); font-size: 16px;
}
:where(.ui-refine) .pc-icon.is-missed { background: color-mix(in srgb, var(--r-danger) 16%, transparent); color: var(--r-danger); }
:where(.ui-refine) .pc-icon.is-out { color: var(--r-accent-text); background: var(--r-accent-tint); }
:where(.ui-refine) .pc-icon.is-internal { color: var(--r-text-3); }
:where(.ui-refine) .pc-icon.is-callback { background: color-mix(in srgb, var(--r-warning) 18%, transparent); color: var(--r-warning); }

:where(.ui-refine) .pc-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
:where(.ui-refine) .pc-title { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--r-fs-body); font-weight: 600; line-height: 1.3; }
:where(.ui-refine) .pc-title__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.ui-refine) .pc-title.is-missed .pc-title__text { color: var(--r-danger); }
:where(.ui-refine) .pc-sub { font-size: var(--r-fs-footnote); color: var(--r-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.ui-refine) .pc-snippet { font-size: var(--r-fs-footnote); color: var(--r-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(.ui-refine) .pc-meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: var(--r-fs-caption); color: var(--r-text-3); text-align: right; }
:where(.ui-refine) .pc-meta__time { font-size: var(--r-fs-footnote); color: var(--r-text-2); font-variant-numeric: tabular-nums; }
:where(.ui-refine) .pc-flags { display: inline-flex; gap: 6px; color: var(--r-text-3); font-size: 13px; }
:where(.ui-refine) .pc-dir-badge { font-size: var(--r-fs-caption2); font-weight: 600; color: var(--r-text-3); }

:where(.ui-refine) .pc-body { padding: 4px 16px 14px 62px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
:where(.ui-refine) .pc-note { font-size: var(--r-fs-footnote); color: var(--r-text); white-space: pre-line; }
:where(.ui-refine) .pc-note__label { color: var(--r-text-3); font-weight: 600; margin-right: 4px; }
:where(.ui-refine) .pc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
:where(.ui-refine) .pc-actions form { display: inline-flex; gap: 6px; margin: 0; }
:where(.ui-refine) .pc-actions .form-select { width: auto; max-width: 260px; }
:where(.ui-refine) .pc-assign { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

@media (max-width: 575.98px) {
    :where(.ui-refine) .pc-body { padding-left: 16px; }
    :where(.ui-refine) .pc-row, :where(.ui-refine) .pc-call > summary { gap: 10px; padding: 10px 12px; }
    :where(.ui-refine) .pc-row { flex-wrap: wrap; }
    :where(.ui-refine) .pc-row .pc-actions { width: 100%; padding-left: 44px; }
    :where(.ui-refine) .pc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Gespräche: Kennzahlen sind Links – app.css färbt jedes <a> blau (Regel «Links» der Bausteine). */
html.ui-refine a.pc-stat, html.ui-refine a.pc-stat:hover { color: var(--r-text) !important; }
html.ui-refine a.pc-stat .pc-stat__label { color: var(--r-text-3) !important; }
html.ui-refine a.pc-stat.is-warn .pc-stat__value { color: var(--r-warning) !important; }
html.ui-refine a.pc-stat.is-danger .pc-stat__value { color: var(--r-danger) !important; }
@media (max-width: 767.98px) {
    /* Telefon: rechts nur Zeit und Dauer, damit der Name Platz hat; Leitung und Person stehen im Detail. */
    :where(.ui-refine) .pc-meta__who { display: none; }
    :where(.ui-refine) .pc-meta { gap: 2px; }
    :where(.ui-refine) .pc-stat { padding: 8px 12px; }
    :where(.ui-refine) .pc-stat__value { font-size: var(--r-fs-headline); }
    :where(.ui-refine) .pc-title .r-status, :where(.ui-refine) .pc-title .badge { flex: 0 0 auto; }
}

/* Suchauswahl (x-search-select): eigenes Feld, kein Browser-Kreuz (type=search gegen Safari-AutoFill, 25.10.2026) */
.search-select-input::-webkit-search-cancel-button, .search-select-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.search-select-input { -webkit-appearance: none; appearance: none; }

/* Seitenleiste ohne seitliches Spiel (25.10.2026): auf dem iPad liess sich die Leiste horizontal verschieben, weil
   lange Einträge («Lieferantenrechnungen 5 neu») breiter als die Spalte waren. Text kürzt jetzt mit «…», Zähler bleiben sichtbar. */
html.ui-refine .app-sidebar { overflow-x: hidden; overscroll-behavior-x: none; }
html.ui-refine .app-sidebar .nav-link { min-width: 0; max-width: 100%; }
html.ui-refine .app-sidebar .nav-link > span:not(.accounting-neu-count):not(.badge):not([class*="count"]) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.ui-refine .app-sidebar .nav-link > .accounting-neu-count,
html.ui-refine .app-sidebar .nav-link > .badge { flex: 0 0 auto; }

/* Auswahl-Checkboxen in Tabellen (Rechnungen, Offerten …), 25.10.2026: app.css erzwang die native Box
   (appearance:auto, 20px, grauer 2px-Rand) und der Touch-Hack legte 10px transparenten Rand darüber →
   auf dem iPad schwarze 40px-Quadrate, Kopfzeile noch grösser. Jetzt eine Refine-Box; die ganze Zelle
   ist Tippfläche (ui-table-check.js bzw. Zellen-Klick). */
html.ui-refine .table th.col-check,
html.ui-refine .table td.col-check {
    width: 44px;
    padding-left: 10px !important;
    padding-right: 6px !important;
    text-align: center;
    cursor: pointer;
}
html.ui-refine .table th.col-check input[type="checkbox"],
html.ui-refine .table td.col-check input[type="checkbox"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    border: 1.5px solid var(--r-text-3) !important;
    border-radius: 6px !important;
    background-color: transparent !important;
    background-clip: border-box !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 14px 14px !important;
    box-shadow: none !important;
    vertical-align: middle !important;
    cursor: pointer;
}
html.ui-refine .table th.col-check input[type="checkbox"]:checked,
html.ui-refine .table td.col-check input[type="checkbox"]:checked {
    background-color: var(--r-accent-fill) !important;
    border-color: var(--r-accent-fill) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}
html.ui-refine .table th.col-check input[type="checkbox"]:indeterminate {
    background-color: var(--r-accent-fill) !important;
    border-color: var(--r-accent-fill) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e") !important;
}
html.ui-refine .table th.col-check input[type="checkbox"]:focus-visible,
html.ui-refine .table td.col-check input[type="checkbox"]:focus-visible {
    box-shadow: 0 0 0 3px var(--r-accent-tint-strong) !important;
}

/* ==========================================================================
   Smarty beim Verfassen (Neue Mail, Antworten, Ticket/Task) – 25.10.2026
   Partial app.mail.partials._compose-smarty, Script public/js/mail-compose-smarty.js
   ========================================================================== */
html.ui-refine .mail-smarty {
    margin: 0 0 8px;
}
html.ui-refine .mail-smarty__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
html.ui-refine .mail-smarty__brand {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 2px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--r-text-2);
}
html.ui-refine .mail-smarty__brand .bi { color: #8b7cff; }
html.ui-refine .mail-smarty__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 4px 11px;
    border: 0;
    border-radius: 999px;
    background: var(--r-fill);
    color: var(--r-text);
    font-size: 0.8125rem;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color var(--r-fast, .12s) ease;
}
html.ui-refine .mail-smarty__chip:hover,
html.ui-refine .mail-smarty__chip:focus-visible,
html.ui-refine .mail-smarty__chip[aria-expanded="true"] { background: var(--r-fill-strong); }
html.ui-refine .mail-smarty__chip.is-check { color: var(--r-accent-text); }
/* «Antwort schreiben» als Hauptaktion der Leiste (27.10.2026) */
html.ui-refine .mail-smarty__chip.is-primary { color: var(--r-accent-text); background: var(--r-accent-tint); font-weight: 600; }
html.ui-refine .mail-smarty__chip.is-primary:hover,
html.ui-refine .mail-smarty__chip.is-primary:focus-visible { background: var(--r-accent-tint-strong); }
html.ui-refine .mail-smarty__msg .spinner-border { width: 0.9rem; height: 0.9rem; border-width: 0.15em; color: #8b7cff; flex: 0 0 auto; }
html.ui-refine .mail-smarty__msg--done { align-items: flex-start; color: var(--r-text); }
html.ui-refine .mail-smarty__msg--done .bi { color: #8b7cff; margin-top: 2px; }
html.ui-refine .mail-smarty__chip:disabled { opacity: 0.55; }
html.ui-refine .mail-smarty.is-busy .mail-smarty__brand .bi { animation: mailSmartyPulse 1s ease-in-out infinite; }
@keyframes mailSmartyPulse { 50% { opacity: 0.35; } }
@media (pointer: coarse) {
    html.ui-refine .mail-smarty__chip { min-height: 36px; padding: 6px 13px; }
}

html.ui-refine .mail-smarty__notes {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 8px;
}
html.ui-refine .mail-smarty__notes[hidden],
html.ui-refine .mail-smarty__output[hidden] { display: none !important; }
html.ui-refine .mail-smarty__notes textarea { flex: 1 1 auto; resize: vertical; }

html.ui-refine .mail-smarty__output {
    margin-top: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--r-surface);
    border: 1px solid var(--r-hairline);
    box-shadow: inset 3px 0 0 #8b7cff;
}
html.ui-refine .mail-smarty__proposal-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--r-text-3);
}
html.ui-refine .mail-smarty__proposal-head .bi { color: #8b7cff; }
html.ui-refine .mail-smarty__proposal-text {
    margin: 6px 0 10px;
    white-space: pre-wrap;
    font-size: 0.9375rem;
    color: var(--r-text);
    max-height: 260px;
    overflow: auto;
}
html.ui-refine .mail-smarty__proposal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
html.ui-refine .mail-smarty__msg { display: flex; gap: 6px; align-items: center; font-size: 0.875rem; color: var(--r-text-2); }
html.ui-refine .mail-smarty__msg.is-error .bi { color: var(--r-danger); }

html.ui-refine .mail-smarty__findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
html.ui-refine .mail-smarty__finding { display: flex; align-items: flex-start; gap: 10px; }
html.ui-refine .mail-smarty__finding > .bi { font-size: 1rem; line-height: 1.35; color: var(--r-text-3); }
html.ui-refine .mail-smarty__finding.is-warn > .bi { color: var(--r-warning); }
html.ui-refine .mail-smarty__finding.is-tip > .bi { color: #8b7cff; }
html.ui-refine .mail-smarty__finding.is-ok > .bi { color: var(--r-success); }
html.ui-refine .mail-smarty__finding-body { flex: 1 1 auto; min-width: 0; }
html.ui-refine .mail-smarty__finding-title { font-size: 0.875rem; font-weight: 600; color: var(--r-text); }
html.ui-refine .mail-smarty__finding-text { font-size: 0.8125rem; color: var(--r-text-2); overflow-wrap: anywhere; }
html.ui-refine .mail-smarty__finding .btn { flex: 0 0 auto; }

/* «Mit Smarty erstellen» (Ticket, Task, Termin, Lead aus einer Mail) */
html.ui-refine .mail-create-btn { display: inline-flex; align-items: center; gap: 5px; }
html.ui-refine .mail-create-btn .bi { color: #8b7cff; }
html.ui-refine .mail-create__types {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
    padding: 2px;
    margin-bottom: 14px;
    border-radius: 10px;
    background: var(--r-fill);
}
html.ui-refine .mail-create__type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--r-text);
    font-size: 0.875rem;
}
html.ui-refine .mail-create__type[aria-selected="true"] {
    background: var(--r-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
    font-weight: 600;
}
html.ui-refine .mail-create__status { min-height: 20px; margin-bottom: 10px; font-size: 0.8125rem; color: var(--r-text-2); }
html.ui-refine .mail-create__status .bi { color: #8b7cff; }
html.ui-refine .mail-create__org { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 0.8125rem; color: var(--r-text-2); }

/* ==========================================================================
   Verfassen wie Apple Mail (25.10.2026): kompakter Kopf, grosses Textfeld,
   Anhang als Zeile, Antwortbox mit Schliessen. «Neue E-Mail» und Antwortbox.
   ========================================================================== */
html.ui-refine .mail-compose-fields {
    margin: 0 0 10px;
    border-top: 1px solid var(--r-hairline);
}
html.ui-refine .mail-compose-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    border-bottom: 1px solid var(--r-hairline);
}
html.ui-refine .mail-compose-row__label {
    flex: 0 0 auto;
    min-width: 52px;
    margin: 0;
    font-size: 0.875rem;
    color: var(--r-text-3);
}
html.ui-refine .mail-compose-row__input { flex: 1 1 auto; min-width: 0; }
html.ui-refine .mail-compose-row .form-control.mail-compose-row__input,
html.ui-refine .mail-compose-row .form-select.mail-compose-row__input,
html.ui-refine .mail-compose-row .email-picker__box,
html.ui-refine .mail-compose-row .email-picker__input {
    border: 0 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding-left: 0;
    min-height: 40px;
}
html.ui-refine .mail-compose-row .form-select.mail-compose-row__input { padding-right: 2rem; background-position: right 0 center; }
html.ui-refine .mail-compose-row__toggle {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--r-accent-text);
    font-size: 0.8125rem;
    padding: 6px 2px;
}
html.ui-refine .is-cc-collapsed [data-compose-cc-row] { display: none !important; }
html.ui-refine .mail-compose-row__note { padding: 6px 0; font-size: 0.8125rem; color: var(--r-text-2); border-bottom: 1px solid var(--r-hairline); }

/* Grosses Textfeld, wächst mit */
html.ui-refine #mailComposeModal .mail-compose-message .ql-container,
html.ui-refine #mailComposeModal .mail-compose-message .ql-editor { min-height: clamp(240px, 42vh, 620px); }
html.ui-refine #mailComposeModal #composeBodyFallback { min-height: clamp(240px, 42vh, 620px); }
html.ui-refine #mailReplyBox #replyEditor.ql-container,
html.ui-refine #mailReplyBox #replyEditor .ql-editor { min-height: clamp(220px, 34vh, 520px) !important; }
html.ui-refine #mailReplyBox #replyBodyFallback { min-height: clamp(220px, 34vh, 520px); }

/* Anhang als kleine Zeile statt Drop-Fläche; Drop geht aufs ganze Fenster */
html.ui-refine .mail-compose-attachments { margin-top: 6px; }
html.ui-refine .file-dropzone.mail-attach-line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 2px;
    border: 0;
    background: transparent;
    text-align: left;
}
html.ui-refine .file-dropzone.mail-attach-line .file-dropzone-content { font-size: 0.875rem; color: var(--r-accent-text); }
html.ui-refine .file-dropzone.mail-attach-line .file-dropzone-hint { margin: 0; font-size: 0.75rem; color: var(--r-text-3); }
html.ui-refine .file-dropzone.mail-attach-line.is-dragover .file-dropzone-content { text-decoration: underline; }
html.ui-refine #mailComposeModal .modal-content.is-file-over,
html.ui-refine #mailReplyBox.is-file-over {
    outline: 2px dashed var(--r-accent);
    outline-offset: -6px;
}
@media (pointer: coarse) {
    html.ui-refine .file-dropzone.mail-attach-line .file-dropzone-hint { display: none; }
}

/* Smarty-Leiste kompakter im Verfassen */
html.ui-refine .mail-compose-message .mail-smarty__chip,
html.ui-refine #mailReplyBox .mail-smarty__chip { min-height: 28px; padding: 3px 10px; font-size: 0.78rem; }
@media (pointer: coarse) {
    html.ui-refine .mail-compose-message .mail-smarty__chip,
    html.ui-refine #mailReplyBox .mail-smarty__chip { min-height: 34px; padding: 5px 11px; }
}

/* Antwortbox: Kopf mit Titel und Schliessen, Rückfrage */
html.ui-refine .mail-reply__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
html.ui-refine .mail-reply__title { font-size: 0.9375rem; font-weight: 600; color: var(--r-text); }
html.ui-refine .mail-reply__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: var(--r-fill);
    color: var(--r-text-2);
}
html.ui-refine .mail-reply__close:hover { background: var(--r-fill-strong); color: var(--r-text); }
@media (pointer: coarse) { html.ui-refine .mail-reply__close { width: 40px; height: 40px; } }
html.ui-refine .mail-reply__confirm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--r-surface);
    border: 1px solid var(--r-hairline);
    font-size: 0.875rem;
}
html.ui-refine .mail-reply__confirm[hidden] { display: none !important; }
html.ui-refine .mail-reply__confirm > span { flex: 1 1 100%; font-weight: 600; }
@media (min-width: 576px) { html.ui-refine .mail-reply__confirm > span { flex: 0 1 auto; margin-right: auto; } }
/* «Aus Dokumenten anhängen» als Link in derselben Zeile wie «Anhang hinzufügen» */
html.ui-refine .mail-compose-attachments > .mt-2 { display: inline-block; margin: 0 0 0 14px !important; vertical-align: middle; }
html.ui-refine .mail-compose-attachments > .mt-2 > .btn {
    padding: 6px 2px;
    border: 0;
    background: transparent;
    color: var(--r-accent-text);
    font-size: 0.875rem;
}
html.ui-refine .mail-compose-attachments [data-dms-selected-list]:empty { display: none; }

/* Navigation 25.10.2026: Abschnittstitel (klappbar, pro Benutzer gespeichert) in Haupt- und Buchhaltungsmenü */
html.ui-refine .app-sidebar .offcanvas-body { overflow-x: hidden; }
html.ui-refine .app-sidebar .section-title[data-nav-sec] {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    padding: 10px 18px 2px; margin: 0; cursor: pointer; user-select: none;
}
html.ui-refine .app-sidebar .section-title[data-nav-sec]:first-of-type { padding-top: 4px; }
html.ui-refine .app-sidebar .section-title[data-nav-sec] .chev { font-size: 10px; opacity: .5; transition: transform var(--r-fast, .15s) ease; }
html.ui-refine .app-sidebar .section-title[data-nav-sec].is-closed .chev { transform: rotate(-90deg); }
html.ui-refine .app-sidebar .section-title[data-nav-sec]:hover { color: var(--r-text-2); }
html.ui-refine .app-sidebar .nav-more { margin: 4px 0 0; }
html.ui-refine .app-sidebar .nav-more .nav-link { width: auto !important; display: flex; }
html.ui-refine .app-sidebar .nav-focus-edit { font-size: 12.5px; color: var(--r-text-3); text-decoration: none; }

/* Buchhaltung in Blau wie der Rest (25.10.2026); Grün nur noch für positive Beträge */
html.ui-refine, html.ui-refine[data-theme] {
    --accounting-accent: var(--r-accent-text);
    --accounting-accent-strong: var(--r-accent-fill);
    --accounting-rail: var(--r-accent);
    --accounting-pos: var(--r-success);
}
@media (min-width: 992px) {
    html.ui-refine.sidebar-collapsed .app-sidebar .nav-focus-edit { display: none !important; }
}

/* ==========================================================================
   Mobil robust (27.10.2026): grössere iPhone-Schrift/Zoom macht den Bildschirm in CSS-Pixeln
   schmaler (≈ 340 px). Nichts darf die Seite seitlich verbreitern – sonst wackelt die Seite
   beim Scrollen seitlich und Inhalte ragen über den Rand.
   ========================================================================== */
@media (max-width: 991.98px) {
    html.ui-refine, html.ui-refine body { overflow-x: clip; }
    /* Offener Dialog (Meldungen #141/#143): Bootstrap setzt am Body overflow:hidden (inline, noch vor .modal-open).
       Mit clip am html wirkt das nicht mehr auf das Fenster, sondern kappt den Body (height:100%) auf Bildschirmhöhe –
       die Seite springt nach oben und bleibt dort. Darum Body voll hoch und ohne eigenen Scroller lassen. */
    html.ui-refine body.modal-open,
    html.ui-refine body[style*="overflow: hidden"] { height: auto; overflow-x: clip !important; overflow-y: visible !important; }
    html.ui-refine .app-content { min-width: 0; max-width: 100vw; }
    /* Listenkarten: Textspalte darf schrumpfen, Knöpfe bleiben in der Karte */
    html.ui-refine .list-item-card .flex-grow-1,
    html.ui-refine .list-item-card .min-w-0 { min-width: 0; }
    html.ui-refine .list-item-card > .d-flex > :not(.flex-grow-1) { flex-shrink: 0; }
    html.ui-refine .list-item-card .badge { white-space: normal; text-align: left; }
    /* Lange Wörter (IBAN, Firmen, Referenzen) umbrechen statt hinausragen */
    html.ui-refine .app-content .card-body, html.ui-refine .app-content .list-item-card { overflow-wrap: anywhere; }
}

/* Belegvorschau auf dem iPhone/iPad hochkant: kein eigener Scroll-Bereich (der Finger auf dem
   Beleg scrollte nur das Bild, die Seite schien zu klemmen). Gezoomt scrollt der Beleg seitlich. */
@media (max-width: 991.98px) {
    [data-doc-preview]:not(:fullscreen) [data-doc-scroll] {
        height: auto !important;
        min-height: 0 !important;
        resize: none !important;
        overflow-y: visible !important;
        overflow-x: auto;
    }
    /* Ungezoomt gar kein Scroll-Container: iOS gibt die Geste sonst nicht zuverlässig an die Seite weiter */
    [data-doc-preview][data-zoom="1"]:not(:fullscreen) [data-doc-scroll] { overflow: visible !important; }
    [data-doc-preview] > .d-flex:first-child { flex-wrap: wrap; row-gap: 4px; }
    [data-doc-preview] [data-doc-pageinfo] { white-space: nowrap; }
}

/* Ticketliste: abgesetzte Gruppen «Warten auf Kunde», «Zurückgestellt», «Geschlossen» am Ende (Meldung #36) */
html.ui-refine .pm-list-table tr.pm-list-group > td,
html.ui-refine div.pm-list-group {
    padding: 16px 12px 6px; background: transparent !important; box-shadow: none !important;
    font-size: var(--r-fs-caption, 12px); font-weight: 600; letter-spacing: .02em; color: var(--r-text-3);
    border-bottom: 1px solid var(--r-separator);
}
html.ui-refine div.pm-list-group { padding: 14px 4px 6px; border-bottom: 0; }

/* ────────────────────────────────────────────────────────────
   iPad quer als Web-App (Meldung #188): Desktop-Layout ab 992 px hatte keinen Abstand zur Statusleiste – die
   verschwommene Topbar lag hinter Uhrzeit/Akku («unscharfer Bereich»). Jetzt beginnen Topbar und Seitenleiste
   unter der Statusleiste, der Streifen dahinter ist ruhig und deckend. Ausserhalb der Web-App sind die Werte 0.
   ──────────────────────────────────────────────────────────── */
@media (min-width: 992px) and (display-mode: standalone) {
    :where(.ui-refine) .app-topbar {
        padding-top: env(safe-area-inset-top, 0px);
        background: var(--r-canvas);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    :where(.ui-refine) .app-sidebar {
        padding-top: env(safe-area-inset-top, 0px);
    }
}