/*
 * STYLES.CSS - Immo64
 *
 * Table of Contents:
 * 1. Variables
 * 2. Base / Typography
 * 3. Messages (error, success, info)
 * 4. Navigation
 * 5. Buttons
 * 6. Forms & Inputs
 * 7. Tables
 * 8. Layout (grids, containers)
 * 9. Components
 *    - Stat cards
 *    - Property cards
 *    - Warning cards
 *    - Badges
 *    - Detail pages
 * 10. Utilities
 * 11. Responsive (@media queries)
 */

/* ==========================================================================
   1. VARIABLES
   ========================================================================== */

:root {
    /* Colors */
    --i64-primary: #1976d2;
    --i64-primary-dark: #1565c0;
    --i64-danger: #dc3545;
    --i64-danger-dark: #c82333;
    --i64-warning: #fd7e14;
    --i64-warning-dark: #e66900;
    --i64-success: #28a745;
    --i64-success-dark: #218838;
    /* Cost-category accents — used only as thin accents (stripe/swatch/text);
       soft pastel fills are derived via color-mix at the use site. Deliberately
       muted and decoupled from the status palette so a category never reads as
       success/warning. */
    --i64-cat-nk: #2f9e52;
    --i64-cat-firma: #c9781a;
    --i64-cat-miete: #2a74c0;
    --i64-cat-neutral: #667085;
    --i64-brand: #ff6100;
    --i64-brand-dark: #e25600;
    --i64-on-color: #fff;

    /* Grays */
    --i64-gray-50: #fafbfd;
    --i64-gray-100: #f8f9fa;
    --i64-gray-200: #f0f0f0;
    --i64-gray-300: #e0e0e0;
    --i64-gray-400: #aaa;
    --i64-gray-500: #666;
    --i64-gray-600: #555;
    --i64-gray-700: #444;
    --i64-gray-800: #333;
    --i64-muted: var(--i64-gray-400);

    /* Semantic surfaces derive from the canonical status colors. */
    --i64-error-fg: var(--i64-danger-dark);
    --i64-error-bg: color-mix(in srgb, var(--i64-danger) 10%, var(--pico-background-color));
    --i64-success-fg: var(--i64-success-dark);
    --i64-success-surface: color-mix(in srgb, var(--i64-success) 10%, var(--pico-background-color));
    --i64-success-bg: color-mix(in srgb, var(--i64-success) 8%, transparent);
    --i64-info-fg: var(--i64-primary-dark);
    --i64-info-bg: color-mix(in srgb, var(--i64-primary) 10%, var(--pico-background-color));
    --i64-warning-fg: var(--i64-warning-dark);
    --i64-warning-bg: color-mix(in srgb, var(--i64-warning) 10%, var(--pico-background-color));

    /* Reusable overlays and highlights. */
    --i64-overlay: rgb(0 0 0 / 45%);
    --i64-overlay-strong: rgb(0 0 0 / 60%);
    /* Fullscreen media viewer chrome (dark, theme-independent). */
    --i64-lightbox-bg: rgb(0 0 0 / 92%);
    --i64-lightbox-fg: rgb(255 255 255 / 100%);
    --i64-lightbox-paper: rgb(255 255 255 / 100%);
    /* Dark pills (not translucent white) so the white glyphs stay legible over
       a white document page as well as the dark backdrop. */
    --i64-lightbox-ctrl: rgb(0 0 0 / 55%);
    --i64-lightbox-ctrl-hover: rgb(0 0 0 / 78%);
    --i64-table-stripe: rgb(0 0 0 / 5%);
    --i64-table-stripe-strong: rgb(0 0 0 / 10%);
    --i64-highlight: color-mix(in srgb, var(--i64-warning) 25%, transparent);
    --i64-highlight-strong: color-mix(in srgb, var(--i64-warning) 55%, transparent);

    /* Shadows */
    --i64-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --i64-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --i64-shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.14);
}

/* Dark-mode: invert the i64-gray scale so borders, muted backgrounds,
 * subtle dividers, and muted text adapt with Pico's dark theme.
 * The high-numbered grays (700/800) used as dark text become light,
 * and the low-numbered ones (100/200/300) used as light card/border
 * surfaces become dark. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --i64-gray-50: #24272b;
        --i64-gray-100: #2a2d31;
        --i64-gray-200: #353940;
        --i64-gray-300: #474c54;
        --i64-gray-400: #7a8290;
        --i64-gray-500: #9ca3af;
        --i64-gray-600: #b8bec7;
        --i64-gray-700: #d1d5db;
        --i64-gray-800: #e5e7eb;

        /* Stronger shadows so cards still read as elevated against the
         * darker surface. */
        --i64-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
        --i64-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
        --i64-shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.5);

        --i64-error-fg: color-mix(in srgb, var(--i64-danger) 45%, var(--i64-on-color));
        --i64-error-bg: color-mix(in srgb, var(--i64-danger) 18%, var(--pico-background-color));
        --i64-success-fg: color-mix(in srgb, var(--i64-success) 45%, var(--i64-on-color));
        --i64-success-surface: color-mix(in srgb, var(--i64-success) 18%, var(--pico-background-color));
        --i64-success-bg: color-mix(in srgb, var(--i64-success) 18%, transparent);
        --i64-info-fg: color-mix(in srgb, var(--i64-primary) 45%, var(--i64-on-color));
        --i64-info-bg: color-mix(in srgb, var(--i64-primary) 18%, var(--pico-background-color));
        --i64-warning-fg: color-mix(in srgb, var(--i64-warning) 45%, var(--i64-on-color));
        --i64-warning-bg: color-mix(in srgb, var(--i64-warning) 18%, var(--pico-background-color));
        --i64-table-stripe: rgb(255 255 255 / 4%);
        --i64-table-stripe-strong: rgb(255 255 255 / 8%);
    }
}

[data-theme="dark"] {
    --i64-gray-50: #24272b;
    --i64-gray-100: #2a2d31;
    --i64-gray-200: #353940;
    --i64-gray-300: #474c54;
    --i64-gray-400: #7a8290;
    --i64-gray-500: #9ca3af;
    --i64-gray-600: #b8bec7;
    --i64-gray-700: #d1d5db;
    --i64-gray-800: #e5e7eb;
    --i64-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
    --i64-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --i64-shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.5);
    --i64-error-fg: color-mix(in srgb, var(--i64-danger) 45%, var(--i64-on-color));
    --i64-error-bg: color-mix(in srgb, var(--i64-danger) 18%, var(--pico-background-color));
    --i64-success-fg: color-mix(in srgb, var(--i64-success) 45%, var(--i64-on-color));
    --i64-success-surface: color-mix(in srgb, var(--i64-success) 18%, var(--pico-background-color));
    --i64-success-bg: color-mix(in srgb, var(--i64-success) 18%, transparent);
    --i64-info-fg: color-mix(in srgb, var(--i64-primary) 45%, var(--i64-on-color));
    --i64-info-bg: color-mix(in srgb, var(--i64-primary) 18%, var(--pico-background-color));
    --i64-warning-fg: color-mix(in srgb, var(--i64-warning) 45%, var(--i64-on-color));
    --i64-warning-bg: color-mix(in srgb, var(--i64-warning) 18%, var(--pico-background-color));
    --i64-table-stripe: rgb(255 255 255 / 4%);
    --i64-table-stripe-strong: rgb(255 255 255 / 8%);
}

/* ==========================================================================
   2. BASE / TYPOGRAPHY
   ========================================================================== */

a { text-decoration: none; }
a:hover { text-decoration: none; }

input::placeholder,
textarea::placeholder {
    color: var(--i64-gray-400) !important;
    opacity: 1;
}

a.material-icons, a.material-icons-outlined {
    color: inherit;
}

.material-icons, .material-icons-outlined {
    vertical-align: middle;
}

/* ==========================================================================
   3. MESSAGES
   ========================================================================== */

/* Message box base. Legacy aliases remain while older routes are migrated. */
.message-box,
.error-box,
.success-box,
.info-box,
.warning-box {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    margin: 10px 0;
    border-radius: 4px;
    border-left: 6px solid;
    box-shadow: var(--i64-shadow-sm);
    font-size: 0.9rem;
    border-color: var(--v-border, var(--i64-gray-300));
    color: var(--v-fg, inherit);
    background: var(--v-bg, var(--i64-gray-100));
}

.message-box.v-error,
.error-box {
    --v-border: var(--i64-danger);
    --v-fg: var(--i64-error-fg);
    --v-bg: var(--i64-error-bg);
}

.message-box.v-success,
.success-box {
    --v-border: var(--i64-success);
    --v-fg: var(--i64-success-fg);
    --v-bg: var(--i64-success-surface);
}

.message-box.v-info,
.info-box {
    --v-border: var(--i64-primary);
    --v-fg: var(--i64-info-fg);
    --v-bg: var(--i64-info-bg);
}

.message-box.v-warning,
.warning-box {
    --v-border: var(--i64-warning);
    --v-fg: var(--i64-warning-fg);
    --v-bg: var(--i64-warning-bg);
}

.message-box p,
.error-box p,
.success-box p,
.info-box p,
.warning-box p {
    margin: 0;
}

.error-message {
    margin: 0;
}

.field-error {
    color: var(--i64-danger);
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
}

/* HTMX table refresh feedback */
.htmx-request #table-container,
#table-container.htmx-request {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.16s ease;
}

/* ==========================================================================
   4. NAVIGATION
   ========================================================================== */

.nav-bar {
    background-color: var(--pico-card-background-color);
    padding: 10px 20px;
    display: flex;
    gap: 12px;
    border-bottom: 2px solid var(--i64-gray-300);
    align-items: center;
    box-shadow: var(--i64-shadow-sm);
    position: relative;
    z-index: 2000;
    margin-bottom: 1rem;
}

.nav-bar > a,
.nav-bar > .nav-dropdown > a {
    color: var(--i64-gray-800);
    font-weight: bold;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.nav-bar > a:hover,
.nav-bar > .nav-dropdown > a:hover {
    background-color: var(--i64-primary);
    color: var(--i64-on-color);
}

.nav-bar > a:hover .material-icons,
.nav-bar > a:hover .material-icons-outlined,
.nav-bar > .nav-dropdown > a:hover .material-icons,
.nav-bar > .nav-dropdown > a:hover .material-icons-outlined {
    color: var(--i64-on-color);
}

.nav-bar .material-icons,
.nav-bar .material-icons-outlined {
    font-size: 1.2rem;
    color: var(--i64-gray-700);
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 0.5rem;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.logo-link:hover {
    background-color: var(--i64-primary) !important;
    color: var(--i64-on-color) !important;
}

.logo-link:hover .nav-title {
    color: var(--i64-on-color) !important;
}

.nav-logo {
    height: 64px;
    width: auto;
}

.nav-title {
    font-weight: bold;
    color: var(--i64-gray-800);
}

/* Sortable table headers */
th.sort-asc::after { content: " \25B2"; font-size: 0.7em; opacity: 0.6; }
th.sort-desc::after { content: " \25BC"; font-size: 0.7em; opacity: 0.6; }

.instance-badge {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--i64-brand);
    color: var(--i64-on-color);
    padding: 2px 7px;
    border-radius: 4px;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}

.co-tenant-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.25rem;
}
.co-tenant-row .icon-btn { padding: 0 2px; margin: 0; }

.welcome-card {
    background: var(--pico-card-background-color);
    border: 1px solid var(--pico-muted-border-color);
    border-left: 4px solid var(--i64-brand);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.welcome-card h1, .welcome-card h2, .welcome-card h3 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.welcome-card p:last-child { margin-bottom: 0; }
.welcome-card ul, .welcome-card ol { margin-bottom: 0.5rem; }

.user-section {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--i64-gray-600);
}

.logout-link {
    font-size: 0.85rem;
}

.admin-links {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

/* User quick-actions: profile left, admin stack in middle, logout right. */
.user-section .nav-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.95rem;
    height: 1.95rem;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0.35rem;
    background: var(--pico-card-background-color);
    box-shadow: var(--i64-shadow-sm);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.user-section .nav-action-btn .material-icons,
.user-section .nav-action-btn .material-icons-outlined {
    font-size: 1.05rem;
    color: var(--i64-gray-700);
}

.user-section .nav-action-btn:hover {
    background: var(--i64-gray-100);
    transform: translateY(-1px);
}

.user-section .nav-action-btn:hover .material-icons,
.user-section .nav-action-btn:hover .material-icons-outlined {
    color: var(--i64-primary);
}

/* Hamburger menu */
.hamburger-menu {
    display: none;
    position: fixed;
    top: calc(0.5rem + env(safe-area-inset-top, 0px));
    right: calc(0.5rem + env(safe-area-inset-right, 0px));
    z-index: 2001;
    background: var(--i64-primary);
    color: var(--i64-on-color);
    border: none;
    padding: 0.5rem;
    border-radius: var(--pico-border-radius);
    cursor: pointer;
    margin: 0;
    touch-action: manipulation;
}

/* Active nav link */
.nav-bar > a.active,
.nav-bar > .nav-dropdown > a.active {
    background-color: var(--i64-primary);
    color: var(--i64-on-color);
}

.nav-bar > a.active .material-icons,
.nav-bar > a.active .material-icons-outlined,
.nav-bar > .nav-dropdown > a.active .material-icons,
.nav-bar > .nav-dropdown > a.active .material-icons-outlined {
    color: var(--i64-on-color);
}

/* Nav dropdown ("Mehr" menu) */
.nav-dropdown {
    position: relative;
}

/* Hover bridge so moving into submenu doesn't close on tiny gaps. */
.nav-dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 0.8rem;
}

.nav-dropdown-toggle {
    cursor: pointer;
}

.nav-dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% - 2px);
    left: 0;
    background: var(--pico-card-background-color);
    border: 1px solid var(--i64-gray-300);
    border-radius: 8px;
    box-shadow: var(--i64-shadow-lg);
    padding: 0;
    margin: 0;
    min-width: 200px;
    z-index: 3000;
    overflow: hidden;
}

.nav-dropdown.open .nav-dropdown-content {
    display: block;
}

.nav-dropdown:hover .nav-dropdown-content {
    display: block;
}

.nav-dropdown-content > a {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0;
    white-space: nowrap;
    line-height: 1.3;
    min-height: 2.25rem;
    color: var(--i64-gray-800);
}

.nav-dropdown-content > a:hover {
    background-color: var(--i64-primary);
    color: var(--i64-on-color);
}

.nav-dropdown-content > a:focus,
.nav-dropdown-content > a:focus-visible {
    background-color: var(--i64-primary);
    color: var(--i64-on-color);
    outline: none;
}

.nav-dropdown-content > a:focus .material-icons,
.nav-dropdown-content > a:focus .material-icons-outlined,
.nav-dropdown-content > a:focus-visible .material-icons,
.nav-dropdown-content > a:focus-visible .material-icons-outlined {
    color: var(--i64-on-color);
}

/* Mobile: hide dropdown, show flat secondary links */
.nav-mobile-secondary {
    display: none;
}

.nav-mobile-group {
    display: none;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--i64-gray-600);
    padding: 0.55rem 0.5rem 0.2rem;
    font-weight: 700;
}

.nav-divider {
    display: none;
    border: none;
    border-top: 1px solid var(--i64-gray-300);
    margin: 0.5rem 0;
    width: 100%;
}

/* HTMX navigation spinner for finance matcher next/prev buttons */
a.htmx-loading-link.htmx-request {
    opacity: 0.75;
    pointer-events: none;
    position: relative;
    padding-right: 1.6rem;
}

a.htmx-loading-link.htmx-request::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    top: 50%;
    width: 0.72rem;
    height: 0.72rem;
    margin-top: -0.36rem;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--i64-on-color) 45%, transparent);
    border-top-color: var(--i64-on-color);
    animation: i64-spin 0.8s linear infinite;
}

@keyframes i64-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

/* Danger (Red) — outline style: red text on white */
button.danger,
a.danger[role="button"] {
    background-color: transparent !important;
    color: var(--i64-danger) !important;
    border: 1px solid var(--i64-danger) !important;
}

button.danger:hover,
a.danger[role="button"]:hover {
    background-color: var(--i64-danger) !important;
    color: var(--i64-on-color) !important;
    border-color: var(--i64-danger-dark) !important;
}

/* Warning (Orange) */
button.warning,
a.warning[role="button"] {
    background-color: var(--i64-warning) !important;
    color: var(--i64-on-color) !important;
    border: 1px solid var(--i64-warning) !important;
}

button.warning:hover,
a.warning[role="button"]:hover {
    background-color: var(--i64-warning-dark) !important;
    border-color: var(--i64-warning-dark) !important;
}

/* Success (Green) */
button.success,
a.success[role="button"] {
    background-color: var(--i64-success) !important;
    color: var(--i64-on-color) !important;
    border: 1px solid var(--i64-success) !important;
}

button.success:hover,
a.success[role="button"]:hover {
    background-color: var(--i64-success-dark) !important;
    border-color: var(--i64-success-dark) !important;
}

/* Small buttons */
button.small, .small[role="button"] {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    /* Pico stretches <button> to width:100% inside forms/cells; small action
     * buttons (e.g. per-row „Verknüpfen") should shrink to their content. */
    width: auto;
}

/* Material Icons inside small buttons default to 24px and would push the
 * button taller than its text-only siblings (e.g. the 'Als Verlust'
 * button vs. its adjacent inputs in finance-inline-form). Scale the icon
 * with the surrounding text instead. */
button.small .material-icons,
button.small .material-icons-outlined,
.small[role="button"] .material-icons,
.small[role="button"] .material-icons-outlined {
    font-size: 1.1em;
    line-height: 1;
}

/* Inline form used for loss-marking rows on /finance/expected: amount
 * input + reason input + 'Als Verlust' submit button. Default Pico form
 * styling stacks them; flex with align-items: stretch makes the button
 * exactly match the inputs' height regardless of icon vs. text content. */
.finance-inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
    margin-bottom: 0;
}
.finance-inline-form > input,
.finance-inline-form > button {
    margin: 0;
}
.finance-inline-amount {
    width: 8rem;
    flex: 0 0 auto;
}
.finance-inline-reason {
    min-width: 12rem;
    flex: 1 1 12rem;
}

/* Icon links (edit, delete, view) */
.icon-link {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem;
    color: var(--i64-primary);
    cursor: pointer;
}

.icon-link:hover {
    opacity: 0.7;
}

.icon-link.danger {
    color: var(--i64-danger);
}

/* ==========================================================================
   6. FORMS & INPUTS
   ========================================================================== */

.form-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
    margin-top: 1rem;
}

.form-actions button,
.form-actions a[role="button"] {
    width: auto;
    margin-bottom: 0;
}

/* Sits tight to the input below it. Without this, Picos default <p>-Margin
 * macht den Abstand Label → Input fast doppelt so groß wie zwischen
 * den Feld-Blöcken, sodass das Label optisch zum Eingabefeld *darüber*
 * gehört statt zum Input darunter. */
p.form-label {
    margin-bottom: 0.25rem;
    margin-top: 0;
    font-weight: 500;
    font-size: 0.95rem;
}

/* Klassifizier-Modal: vertikaler Block-Abstand für die einzelnen Felder.
 * Eng am Label/Input-Verbund, klar zwischen den Feldern. */
.classify-form > div + div {
    margin-top: 0.85rem;
}

/* Buchungs-Kontext oben im Klassifizier-Modal: Datum + Betrag, dann der
 * Verwendungszweck — immer sichtbar, auch im Kaution-Modus. */
.classify-tx-context {
    background: var(--i64-gray-50);
    border: 1px solid var(--i64-gray-100);
    border-radius: 6px;
    padding: 0.6rem 0.75rem;
    margin-bottom: 1rem;
}
.classify-tx-context .classify-tx-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--i64-gray-500);
}
.classify-tx-context .classify-tx-amount {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.classify-tx-context .form-label {
    margin: 0.4rem 0 0.1rem;
}
.classify-tx-context .classify-tx-purpose {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.classify-mode-radios .classify-mode-option {
    display: block;
    margin-top: 0.35rem;
}

.classify-mode-radios .classify-mode-option:first-child {
    margin-top: 0;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

/* Mobile: zweispaltige Form-Rows fallen auf einspaltig zurück, sonst
 * werden Inputs auf Phones zu schmal (z.B. Datumsfelder unter 200px
 * brechen visuell). Greift unter dem Pico-sm-Breakpoint. */
@media (max-width: 640px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

/* Tom Select overrides (match PicoCSS form style) */
.ts-wrapper.single .ts-control {
    border: 1px solid var(--pico-form-element-border-color);
    border-radius: var(--pico-border-radius);
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    background-color: var(--pico-form-element-background-color);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* Lange Item-Labels (z.B. Beleg-Dateinamen wie
     * 'Löhergraben5_20250506_Rechnung111001059226_VK200000244439-2.pdf')
     * dürfen mehrzeilig umbrechen statt aus dem Rahmen zu laufen.
     * Vorher: flex-wrap: nowrap + overflow: hidden + text-overflow:
     * ellipsis — bei langem Dateinamen plus knappem Container war der
     * Select rechts raus. */
}

.ts-wrapper.single .ts-control .item {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    flex: 1 1 auto;
    min-width: 0;
}

/* Tom Select muss in flex-/grid-Children mit min-width: 0 stehen,
 * damit es sich bei knappem Container schrumpfen lässt — sonst bleibt
 * die Min-Content-Width des Items dominanter Faktor. */
.ts-wrapper {
    min-width: 0;
}

.ts-wrapper.single.has-items .ts-control input {
    min-width: 1ch;
    flex: 0 0 1ch;
}

.ts-wrapper.single:not(.has-items) .ts-control input {
    min-width: 10ch;
    flex: 1 1 10ch;
}

/* While the dropdown is open, the typing input takes over the whole
   control — hide the selected tag so the search box fills the visible
   area. As soon as the user picks an option, Tom-Select closes the
   dropdown and removes `dropdown-active`; the new selection becomes
   visible immediately even if the wrapper still has `focus`.

   We intentionally key on `dropdown-active` only (not `focus`), because
   the dropdown closes after pick while focus can linger — keying on
   focus would keep the new item hidden until the user tabs/clicks
   away, which felt buggy. */
.ts-wrapper.single.has-items.dropdown-active .ts-control input {
    flex: 1 1 100%;
    min-width: 0;
}
.ts-wrapper.single.has-items.dropdown-active .ts-control .item {
    display: none;
}

.ts-wrapper .ts-dropdown {
    border: 1px solid var(--pico-form-element-border-color);
    border-radius: var(--pico-border-radius);
    box-shadow: var(--i64-shadow-md);
}

.ts-wrapper .ts-dropdown .active {
    background-color: var(--i64-primary);
    color: var(--i64-on-color);
}

/* clear_button plugin: Tom-Select renders <div class="clear-button">×</div>
   without setting a color, so the glyph inherits from the cascade and ends
   up invisible (white on white). Pico's [role="button"] styles also paint
   a thick blue focus ring around it. Result: a mysterious blue box on the
   right of every populated single-select. Restyle as an unobtrusive ×. */
.ts-wrapper .clear-button {
    color: var(--pico-muted-color);
    background: transparent;
    border: none;
    padding: 0 0.4rem;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
.ts-wrapper .clear-button:hover {
    color: var(--pico-color);
}
.ts-wrapper .clear-button:focus,
.ts-wrapper .clear-button:focus-visible {
    outline: none;
    color: var(--pico-color);
}

/* ==========================================================================
   7. TABLES
   ========================================================================== */

.overflow-auto {
    overflow-x: auto;
}

.overflow-auto table {
    min-width: 100%;
    border-collapse: collapse;
}

.overflow-auto td, .overflow-auto th {
    padding: 6px 8px;
    white-space: nowrap;
}

.overflow-auto td.cell-wrap,
.overflow-auto th.cell-wrap,
.data-table-sticky td.cell-wrap,
.data-table-sticky th.cell-wrap {
    white-space: normal;
    word-break: break-word;
}

/* Kautionen-Report: Einheit-Liste kann lang werden (z.B. Hammeley mit 7
 * Stellplätzen). Breite deckeln, damit die Liste umbricht statt die Tabelle
 * zu sprengen. break-word kommt von .cell-wrap. */
.deposit-units-cell {
    max-width: 14rem;
    min-width: 6rem;
}

/* Kautionen-Report "Zahlung"-Spalte: bezahlt-ohne-Tx vs. offen unterscheidbar. */
.deposit-paid-untracked {
    color: var(--i64-success-dark);
    font-style: italic;
}
.deposit-open {
    color: var(--i64-warning-dark);
}

/* Kleiner Link auf die verknüpfte Bank-Tx in der Kautions-Tabelle (Lease-Detail). */
.deposit-tx-link {
    font-size: 0.8em;
    white-space: nowrap;
}

/* "Tx"-Pill statt "Tx #<id>" (Lease-Detail). */
.deposit-tx-pill {
    display: inline-block;
    padding: 0.05em 0.45em;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 1em;
    line-height: 1.4;
    text-decoration: none;
    color: var(--i64-muted);
}
.deposit-tx-pill:hover {
    border-color: var(--pico-primary);
    color: var(--pico-primary);
}

/* Aktion-Spalte der Kautionen-Tabelle: Abrechnung / Bearbeiten / Löschen /
 * Zusammenführen nebeneinander, mit Umbruch auf schmalen Spalten. */
.deposit-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}
.deposit-action-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}
/* A real <button> picks up Pico's default margin-bottom (unlike the sibling
 * <a role="button"> controls), which shifts the trash icon up within the flex
 * row. Zero it so all three action buttons line up. */
.deposit-action-form .deposit-delete-btn {
    margin: 0;
}
/* Compact icon-only buttons (Kautionen-Aktion-Spalte + /finance/deposits). */
.icon-only {
    padding: 0.3rem 0.45rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}

/* Kautionsabrechnung-Seite: gepolsterte Karten (das nackte .detail-card hat
 * bewusst kein Innen-Padding und braucht sonst einen Banner-Body). */
.kaution-statement-card {
    border: 1px solid var(--i64-gray-200);
    border-radius: 8px;
    box-shadow: var(--i64-shadow-md);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}
.kaution-statement-card > :first-child { margin-top: 0; }
.kaution-statement-card > :last-child { margin-bottom: 0; }

/* Kautions-Notizen (Lease-Detail): mehrzeilig rendern (\n als Umbruch) und
 * umbrechen statt die Tabelle zu sprengen. Höhere Spezifität als die globale
 * '.overflow-auto td { white-space: nowrap }'-Regel, daher td.<class>. */
.overflow-auto td.deposit-notes-cell,
.data-table-sticky td.deposit-notes-cell {
    white-space: pre-line;
    overflow-wrap: anywhere;
    max-width: 22rem;
    min-width: 12rem;
}

/* Beschreibungs-/Freitext-Zellen in Berichtstabellen: umbrechen statt die
 * Tabelle horizontal zu sprengen — sonst scrollt der (wichtige) Betrag rechts
 * aus dem Bild. Höhere Spezifität als '.overflow-auto td { white-space: nowrap }'. */
.overflow-auto td.wrap-cell,
.data-table-sticky td.wrap-cell {
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 28rem;
}

.actions {
    white-space: nowrap;
    display: flex;
    gap: 0.25rem;
}

/* Sortable table headers */
th.sortable a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
    cursor: pointer;
}

th.sortable a:hover {
    color: var(--i64-primary);
}

.sort-icon {
    font-size: 0.9rem !important;
}

/* Table filters (search + dropdown in one row) */
.table-filters {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

/* NK-Vergleich: Auffälligkeiten-Liste (Fehlt/Abweichung/ohne Beleg) */
.nk-compare-issues {
    list-style: none;
    padding-left: 0;
}
.nk-compare-issues li {
    margin-bottom: 0.35rem;
}

/* Pflichtdokumente: Objekt- + Regel-Dropdown nebeneinander in einer Form. */
.compliance-filters-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
}
.compliance-filters-form select {
    margin: 0;
}

.table-filters input[type="search"] {
    margin: 0;
    max-width: 300px;
    flex: 1;
}

.table-filters .search-field {
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

.table-filters select {
    margin: 0;
    max-width: 220px;
}

/* Finance bookings: narrower month + unmatched filters */
.table-filters select.bookings-filter-month {
    max-width: 132px; /* 60% of default 220px */
}

.table-filters select.bookings-filter-unmatched {
    max-width: 176px; /* 80% of default 220px */
}

/* Meter readings filter row (lease detail) */
.meter-filter-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.meter-filter-row select {
    margin: 0;
    max-width: 220px;
}

/* Table group header rows (e.g. year grouping in billing periods) */
.table-group-header td {
    background: var(--pico-card-background-color);
    border-bottom: 2px solid var(--pico-muted-border-color);
    padding-top: 1.25rem;
    padding-bottom: 0.25rem;
}
.table-group-header td h3 {
    margin: 0;
    font-size: 1.1rem;
}
.table-total-row td {
    border-top: 2px solid var(--pico-muted-border-color);
    font-weight: bold;
}
td.num, th.num { text-align: right; }

/* Clear filters link */
.clear-filters {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.95rem;
    height: 1.95rem;
    padding: 0;
    border: 1px solid var(--i64-gray-300);
    border-radius: 999px;
    box-shadow: var(--i64-shadow-sm);
    background: var(--pico-card-background-color);
    font-size: 0.85rem;
    color: var(--i64-danger);
    white-space: nowrap;
    cursor: pointer;
}

.clear-filters:hover {
    border-color: var(--i64-danger);
    color: var(--i64-danger);
    box-shadow: var(--i64-shadow-md);
}

.clear-filters .material-icons-outlined {
    font-size: 1rem;
}

/* Search field (standalone) */
.search-field {
    margin-bottom: 1rem;
    max-width: 400px;
}

.search-field input {
    margin: 0;
}

/* Right-aligned cells */
.text-right {
    text-align: right;
}
.text-danger {
    color: var(--i64-danger);
}

/* Semantic text utilities (P11). */
.text-success {
    color: var(--i64-success);
}
.text-muted {
    color: var(--pico-muted-color);
}
.text-warning {
    color: var(--i64-warning-dark);
}

.missing-period-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

/* Quoted Verwendungszweck block: warning-tinted callout with monospace text. */
.purpose-callout {
    font-family: monospace;
    font-size: 0.9rem;
    word-break: break-all;
    padding: 0.6rem 0.8rem;
    background: color-mix(in srgb, var(--i64-warning) 12%, transparent);
    border-left: 3px solid var(--i64-warning);
    border-radius: 4px;
    margin: 0;
}

/* Visibility utility (P11). */
.hidden {
    display: none;
}

/* Owner logo thumbnail used on detail headers and owner table (P11). */
.owner-logo-img {
    max-height: 40px;
    max-width: 200px;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.pagination-nav {
    display: inline-flex;
    align-items: center;
    background: var(--i64-gray-100);
    border-radius: 6px;
    box-shadow: var(--i64-shadow-sm);
    overflow: hidden;
}

.pagination-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    color: var(--i64-primary);
    border-right: 1px solid var(--i64-gray-300);
    transition: background-color 0.15s ease;
}

.pagination-nav a:last-of-type {
    border-right: none;
}

.pagination-nav a:hover {
    background-color: var(--i64-gray-200);
}

.pagination-nav .current-page {
    padding: 0.5rem 1rem;
    font-weight: 600;
    color: var(--i64-gray-700);
    background: var(--pico-card-background-color);
    border-right: 1px solid var(--i64-gray-300);
}

.pagination-pagesize {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pagination-pagesize select {
    max-width: 5rem;
    padding: 0.4rem 0.5rem;
    margin: 0;
}

/* ==========================================================================
   8. LAYOUT
   ========================================================================== */

/* Login form */
.mw-480 {
    max-width: 480px;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Page header with title + action button */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.page-header h2, .page-header h3 {
    margin: 0;
}

.page-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-left: auto;
}

/* ==========================================================================
   9. COMPONENTS
   ========================================================================== */

/* --- Color variant system (shared by badges, pills, message boxes) --- */

.v-success  { --v-bg: var(--i64-success); --v-fg: var(--i64-on-color); }
.v-warning  { --v-bg: var(--i64-warning); --v-fg: var(--i64-on-color); }
.v-danger   { --v-bg: var(--i64-danger); --v-fg: var(--i64-on-color); }
.v-primary  { --v-bg: var(--i64-primary); --v-fg: var(--i64-on-color); }
.v-muted    { --v-bg: var(--i64-gray-400); --v-fg: var(--i64-on-color); }
.v-default  { --v-bg: var(--i64-gray-200); --v-fg: var(--i64-gray-600); }

/* Cost-category tags: soft pastel fill + coloured text (NOT the success/warning
   status colours). Same tokens drive the document-page stripes. */
.cat-nk      { --v-bg: color-mix(in srgb, var(--i64-cat-nk) 16%, transparent);      --v-fg: var(--i64-cat-nk); }
.cat-firma   { --v-bg: color-mix(in srgb, var(--i64-cat-firma) 18%, transparent);   --v-fg: var(--i64-cat-firma); }
.cat-miete   { --v-bg: color-mix(in srgb, var(--i64-cat-miete) 16%, transparent);   --v-fg: var(--i64-cat-miete); }
.cat-kaution { --v-bg: color-mix(in srgb, var(--i64-cat-neutral) 16%, transparent); --v-fg: var(--i64-cat-neutral); }

/* --- Badges --- */

.badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
    background: var(--v-bg, var(--i64-gray-200));
    color: var(--v-fg, var(--i64-gray-600));
    cursor: default;
}

/* --- Stat cards --- */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    align-items: stretch;
}

.stat-card {
    margin: 0;
    padding: 0.75rem;
    text-align: center;
    box-shadow: var(--i64-shadow-sm);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-card-link {
    color: inherit;
    display: block;
    height: 100%;
    cursor: pointer;
}

.stat-card-link .stat-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    cursor: pointer;
}

.stat-card-link:hover .stat-card {
    border-color: var(--i64-primary);
    box-shadow: var(--i64-shadow-md);
    transform: translateY(-1px);
}

.stat-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: var(--i64-gray-500);
}

.stat-value {
    font-size: 1.5rem;
    margin: 0.25rem 0;
}

.stat-icon {
    font-size: 1rem;
}

/* --- Property cards --- */

.property-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.property-card {
    margin: 0;
    box-shadow: var(--i64-shadow-sm);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.property-card .card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.property-card .card-header h3 {
    margin: 0;
}

.property-card .card-icon {
    font-size: 1.5rem;
    color: var(--i64-primary);
}

.property-card .card-address {
    color: var(--i64-gray-500);
    font-size: 0.9rem;
}

.card-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.card-metric {
    display: inline-block;
}

.clickable {
    cursor: pointer;
}

.clickable:hover {
    border-color: var(--i64-primary);
    box-shadow: var(--i64-shadow-md);
}

/* --- Warning cards --- */

.warning-card {
    border-left: 6px solid var(--i64-warning);
    margin: 1rem 0;
    box-shadow: var(--i64-shadow-sm);
}

.warning-card .card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.warning-card .card-header h3 {
    margin: 0;
    white-space: nowrap;
}

.warning-card .card-icon.warning {
    color: var(--i64-warning);
}

.warning-item {
    font-size: 0.9rem;
    margin: 0.25rem 0;
    padding-left: 0.5rem;
    border-left: 2px solid var(--i64-gray-300);
}

/* --- Dashboard quick actions --- */

.dashboard-quick-actions {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.dashboard-quick-action {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    flex: 1 1 auto;
    justify-content: flex-start;
    min-width: 12rem;
    border: 1px solid var(--i64-gray-200);
    border-radius: 10px;
    box-shadow: var(--i64-shadow-sm);
    background: var(--pico-card-background-color);
    color: var(--i64-gray-800);
    font-weight: 600;
    font-size: 1rem;
    transition: box-shadow 0.2s, border-color 0.2s;
    cursor: pointer;
}

.dashboard-quick-action:hover {
    border-color: var(--i64-primary);
    box-shadow: var(--i64-shadow-md);
    color: var(--i64-primary);
}

.dashboard-quick-action .material-icons-outlined {
    font-size: 1.5rem;
    color: var(--i64-primary);
}

.dashboard-quick-count {
    margin-left: auto;
    min-width: 1.9rem;
    text-align: center;
}

/* --- Dashboard widgets --- */

.dashboard-widget-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0.4rem 0 1rem;
}

.dashboard-widget-card {
    color: inherit;
    border: 1px solid var(--i64-gray-200);
    border-radius: 10px;
    background: var(--pico-card-background-color);
    box-shadow: var(--i64-shadow-sm);
    padding: 0.75rem 0.85rem;
    display: block;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.dashboard-widget-card:hover {
    border-color: var(--i64-primary);
    box-shadow: var(--i64-shadow-md);
    transform: translateY(-1px);
}

.dashboard-widget-head {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--i64-gray-700);
}

.dashboard-widget-count {
    margin: 0.35rem 0 0.2rem;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
}

.dashboard-widget-subtitle {
    margin: 0;
    color: var(--i64-gray-600);
    font-size: 0.9rem;
}

.dashboard-widget-action {
    margin: 0.45rem 0 0;
    color: var(--i64-primary);
    font-size: 0.85rem;
    font-weight: 600;
}

.dashboard-widget-editor {
    border: 1px solid var(--i64-gray-200);
    border-radius: 10px;
    padding: 0.75rem 0.85rem;
    background: var(--pico-card-background-color);
    box-shadow: var(--i64-shadow-sm);
    margin-bottom: 1rem;
}

.dashboard-widget-config {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.dashboard-widget-config-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--i64-gray-200);
    border-radius: 8px;
    padding: 0.5rem 0.6rem;
}

.dashboard-widget-config-title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
}

.dashboard-widget-config-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.dashboard-widget-config-actions form {
    margin: 0;
}

@media (max-width: 900px) {
    .dashboard-widget-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-widget-config-row {
        flex-direction: column;
        align-items: flex-start;
    }

}

/* --- Finance rent check --- */

.finance-month-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.finance-kpi-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.5rem 0 0.9rem;
}

.finance-match-form {
    /* Compact, predictable footprint. Flex-with-explicit-widths instead
     * of grid because grid items expand to fill their column tracks,
     * which (with hidden inputs in the form and Tom-Select's internal
     * sizing) was producing wildly inconsistent widths for Suchen vs.
     * Teilbetrag. flex-wrap: nowrap keeps the three controls on the
     * same row at any reasonable viewport width (~30rem total). */
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    align-items: end;
    margin-bottom: 1rem;
    max-width: 36rem;
}

.finance-match-form > .ts-wrapper {
    flex: 1 1 18rem;
    max-width: 18rem;
}
.finance-match-form > input {
    flex: 0 0 9rem;
    width: 9rem;
}
/* Pico styles <button> with width: 100% inside forms; override that so
 * 'Zuordnen' shrinks to its content rather than stretching across the
 * remaining flex space. */
.finance-match-form > button {
    flex: 0 0 auto;
    width: auto !important;
}

/* All three visible controls share the same low-profile height
 * regardless of whether they are Tom-Select wrappers, plain inputs or
 * the submit button. */
.finance-match-form > .ts-wrapper.single .ts-control,
.finance-match-form > input,
.finance-match-form > button {
    margin-bottom: 0;
    box-sizing: border-box;
    height: 2.4rem;
    min-height: 2.4rem;
}
.finance-match-form > .ts-wrapper.single .ts-control,
.finance-match-form > input {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

/* Inline match-hit highlight: tenant name when the matcher found a
 * name-based reason, candidate amount when it's an exact match. Replaces
 * the explicit ✓ checkmark which read as decorative noise rather than
 * a clear signal. */
.match-hit {
    color: var(--i64-success);
    font-weight: 600;
}

.finance-manual-expected-form {
    grid-template-columns: minmax(18rem, 1.6fr) minmax(8rem, 1fr) minmax(10rem, 1fr) auto;
}

.finance-manual-expected-form .ts-wrapper {
    max-width: none;
}

.finance-manual-expected-form .ts-wrapper.single .ts-control {
    min-height: 2.45rem;
}

.finance-manual-expected-form .ts-wrapper.single .ts-control,
.finance-manual-expected-form input[type="number"],
.finance-manual-expected-form input[type="date"],
.finance-manual-expected-form input[type="text"] {
    margin-bottom: 0;
}

.finance-expected-filters {
    margin-top: 0.55rem;
}

.table-filters select.expected-filter-property {
    max-width: 230px;
}

.finance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.finance-panel {
    border: 1px solid var(--i64-gray-200);
    border-radius: 10px;
    padding: 0.7rem 0.8rem;
    box-shadow: var(--i64-shadow-sm);
    background: var(--pico-card-background-color);
}

.finance-panel h3 {
    margin: 0 0 0.55rem;
}

.finance-auto-match-summary {
    margin-bottom: 0.85rem;
}

.finance-tx-nav {
    display: flex;
    gap: 0.5rem;
    margin: 0.15rem 0 0.55rem;
}

.finance-tx-focus {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--i64-gray-200);
    border-radius: 8px;
    background: var(--i64-gray-50);
    margin-bottom: 0.7rem;
}

.finance-tx-focus p {
    margin: 0.2rem 0;
}

.finance-tx-counter {
    margin: 0.1rem 0;
}

/* Focus card: prominent 'this is the booking you are matching' display.
 * Replaces the old (kpi-row pill + plain text-block) split that buried
 * the actual booking details. */
.finance-focus-card {
    padding: 1rem 1.25rem;
    border: 1px solid var(--pico-muted-border-color);
    border-left: 4px solid var(--i64-primary);
    border-radius: 8px;
    background: var(--pico-card-background-color);
    margin-bottom: 0.75rem;
}
.finance-focus-card > p {
    margin: 0.2rem 0;
}
.finance-focus-title {
    font-size: 1.1rem;
    font-weight: 600;
}
.finance-focus-purpose {
    font-size: 0.95rem;
}
.finance-focus-iban {
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--i64-gray-500);
    margin-bottom: 0.5rem !important;
}
.finance-focus-line {
    font-size: 0.92rem;
}
.finance-focus-amount {
    font-size: 1rem;
}
.finance-focus-amount-value {
    font-weight: 700;
}
.finance-focus-amount-value.income {
    color: var(--i64-success);
}
.finance-focus-amount-value.expense {
    color: var(--i64-danger);
}
.finance-focus-available {
    color: var(--i64-warning);
    font-weight: 600;
}
.finance-focus-available-value {
    font-weight: 700;
}
.finance-focus-label {
    color: var(--i64-gray-500);
    font-weight: 400;
    margin-right: 0.3rem;
}

/* Combined pager: ← Zurück  ·  Counter  ·  Weiter →. Replaces the
 * separate transaction-counter pill + finance-tx-nav strip. */
.finance-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0.4rem 0 0.9rem;
    padding: 0.45rem 0;
    border-top: 1px solid var(--pico-muted-border-color);
    border-bottom: 1px solid var(--pico-muted-border-color);
}
.finance-pager > a {
    flex: 0 0 auto;
}
.finance-pager-counter {
    flex: 1;
    text-align: center;
    color: var(--i64-gray-600);
    font-size: 0.9rem;
}
.finance-pager-month {
    color: var(--i64-primary);
    font-weight: 600;
}
.finance-pager-spacer {
    flex: 0 0 6rem;
    visibility: hidden;
}

/* Highlight a candidate row when the match is strong (currently exact
 * amount). The whole row gets a soft success tint, not just the green
 * 'Exakt zuordnen' button — drawing the eye to the no-brainer choice. */
tr.finance-strong-match > td {
    background-color: var(--i64-success-bg);
}

/* Zebra-striping on the matcher tables — the rows pack a lot of dense
 * info (Buchung, Treffergründe, Zuordnung) and pure white made it hard
 * to follow a row across columns. The strong-match green tint wins over
 * the zebra so that signal isn't lost. var(--i64-gray-100) is
 * theme-aware, so this works in both
 * modes without a media query. */
table.finance-matcher tbody > tr:nth-child(even):not(.finance-strong-match) > td {
    background-color: var(--i64-gray-100);
}
/* Auto-match table now renders ONE tr per pair (date+name+purpose
 * stacked in the first cell), so simple every-other-row striping
 * works again. */
table.auto-match-table tbody > tr:nth-child(even) > td {
    background-color: var(--i64-gray-100);
}

/* Stack the primary tenant + co-tenant names in a single Soll/Mieter
 * cell. Primary stays a normal link; co-tenants render as muted small
 * text below. flex-column so each name takes a row. */
.finance-tenant-stack {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}
.finance-tenant-stack .small-muted {
    font-size: 0.85rem;
}

/* Quick-jump month picker next to the month tabs. <details> renders
 * a tiny trigger; expanding shows the native month input + Go submit
 * inline so the user can leap several years back in one step.
 *
 * NB: <details>/<summary> is positioned absolutely below the trigger
 * via a popover-style trick so the page layout doesn't shift when the
 * picker opens. */
.finance-month-jump {
    display: inline-block;
    position: relative;
    margin-left: 0.25rem;
}
.finance-month-jump-toggle {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    font-size: 0.85rem;
    background: var(--i64-gray-50);
    border: 1px solid var(--i64-gray-300);
    border-radius: 0.35rem;
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.finance-month-jump-toggle::-webkit-details-marker { display: none; }
.finance-month-jump[open] .finance-month-jump-toggle {
    background: var(--i64-gray-100);
}
.finance-month-jump-form {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    display: flex;
    gap: 0.35rem;
    align-items: center;
    margin-top: 0.25rem;
    padding: 0.5rem;
    background: var(--pico-background-color);
    border: 1px solid var(--i64-gray-300);
    border-radius: 0.5rem;
    box-shadow: var(--i64-shadow-sm);
    white-space: nowrap;
}
.finance-month-jump-form input[type="month"] {
    padding: 0.25rem 0.4rem;
    margin: 0;
}
.finance-month-jump-form button {
    margin: 0;
}

/* --- Generic Modal (reusable: Match-Dialog, Verlust-Dialog, ...) --- */
.finance-review-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
}
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--i64-overlay);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 4vh;
    /* Above nav (2000), nav-dropdowns (3000), mobile-nav (4000) and any
       other overlay (9999). */
    z-index: 10000;
}
.modal-panel {
    background: var(--pico-card-background-color);
    border-radius: 0.5rem;
    box-shadow: var(--i64-shadow-lg);
    width: min(900px, 92vw);
    max-height: 88vh;
    overflow-y: auto;
    padding: 1rem 1.25rem 1.25rem;
}
.modal-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--i64-gray-200);
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
}
.modal-panel-title { margin: 0; font-size: 1.05rem; }
.modal-panel-close {
    color: var(--pico-muted-color);
    text-decoration: none;
    font-size: 1.25rem;
    line-height: 1;
}
.modal-panel-close:hover { color: var(--i64-danger); }

.match-section { margin-top: 1rem; }
.match-section-heading { font-size: 0.95rem; margin: 0 0 0.15rem; }
.match-candidates-table {
    width: 100%;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    border-collapse: collapse;
    /* `fixed` ist Pflicht, damit overflow-wrap in der Meta-Spalte
       überhaupt greift — bei `auto` (default) misst der Browser
       Spaltenbreite am Inhalt und ignoriert unsere Wrap-Hints. Die
       fixen Spalten kriegen explizite Breiten via :nth-child unten,
       Gegenseite/Zweck nimmt den Rest. */
    table-layout: fixed;
}
.match-candidates-table th,
.match-candidates-table td {
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid var(--i64-gray-100);
    vertical-align: top;
    /* Override `.overflow-auto td { white-space: nowrap }` (line 772):
       data_table() wraps the table in .overflow-auto, dessen Nowrap
       sonst sowohl den „mögliche Teilzahlung"-Small als auch den
       Counterpart-Namen + Verwendungszweck am Wrappen hindert und
       die Aktions-Spalte aus dem modal_panel rausdrückt. */
    white-space: normal;
}
/* Spaltenbreiten: Datum + Betrag + Aktion fest, Gegenseite nimmt
   den Rest und wrappt darin. */
/* Datum nie mitten in der Zahl umbrechen ('03.06.202⏎6'); die Spalte
   erbt sonst das white-space:normal von oben. nowrap + etwas Breite. */
.match-candidates-table th:nth-child(1),
.match-candidates-table td:nth-child(1) { width: 5.75rem; white-space: nowrap; }
.match-candidates-table th:nth-child(2),
.match-candidates-table td:nth-child(2) { width: 7rem; }
.match-candidates-table th:nth-child(4),
.match-candidates-table td:nth-child(4) { width: 11rem; }
.match-candidates-table th {
    font-weight: 600;
    text-align: left;
    color: var(--pico-muted-color);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.match-candidate-row:hover { background: var(--i64-gray-50); }
.match-candidate-date { white-space: nowrap; }
.match-candidate-counterpart {
    font-weight: 500;
    overflow-wrap: anywhere;
}
.match-candidate-purpose {
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}
/* Soft-wrap target: lange IBANs / Verwendungszweck-Refs ohne Spaces
   müssen brechen, sonst sprengt der Gegenseite-Block die Tabelle
   nach rechts raus. */
.match-candidate-meta {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.match-candidate-action button { white-space: nowrap; }
.match-candidate-action form { margin: 0; }
.match-exact { color: var(--i64-success); font-weight: 600; }
.match-near { color: var(--i64-primary); }
/* Same-day pair partner: highlighted in the "Andere unmatched Tx"
   section when this tx + another tx on the same day + account sum
   exactly to the open EP amount. Same success-green as .match-exact
   so „Σ passt" reads at a glance — the hint line below the amount
   distinguishes the pair case from the single-tx full match. */
.match-pair { color: var(--i64-success); font-weight: 600; }

/* Small caption below the amount cell explaining the match level
   ("= Soll" for full match, "mögliche Teilzahlung" for pair).
   Green + semibold so it actually catches the eye — this is the cue
   that promoted the row to the top of the list. */
.match-amount-hint {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--i64-success);
    margin-top: 0.15rem;
}

/* Soll-Aufschlüsselung (Kalt · NK-VZ · Möbel = Gesamt) oben im
   Match-Dialog. Rein informativ: das Matching selbst bleibt
   betragsbasiert, aber der Nutzer sieht, woraus das Soll besteht —
   nötig für "nur Kaltmiete"-Sammelzahlungen. */
.match-soll-breakdown {
    margin: 0 0 0.75rem;
    padding: 0.4rem 0.6rem;
    background: var(--i64-gray-50);
    border-radius: var(--pico-border-radius, 6px);
}
.match-soll-label { font-weight: 600; }
.match-soll-total { font-weight: 600; color: var(--pico-color); }

/* Editierbares Betrags-Feld pro Kandidatenzeile. Der Default ist der
   vorgeschlagene Vollbetrag (min(Rest-Tx, offen)); der Nutzer kann ihn
   vor dem Zuordnen überschreiben — z. B. auf die reine Kaltmiete. */
.match-amount-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.match-amount-prefix { color: var(--pico-muted-color); font-size: 0.85rem; }
.match-amount-input {
    width: 5rem;
    text-align: right;
    padding: 0.15rem 0.35rem;
    margin: 0;
    font-size: 0.85rem;
    height: auto;
}
.match-amount-row button { flex: 0 0 auto; }

/* Quick-Fill-Chips für gängige Teilbeträge über dem Betrags-Feld.
   Der Hinweis stellt klar, dass die Chips nur eine Eingabehilfe für eine
   Mieter-Widmung sind (§ 366 I BGB) — keine „Kalt-vor-NK"-Regel. */
.match-chip-group { margin-bottom: 0.3rem; }
.match-chip-hint {
    display: block;
    font-size: 0.68rem;
    color: var(--pico-muted-color);
    margin-bottom: 0.12rem;
}
.match-amount-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.match-amount-chip {
    padding: 0.05rem 0.4rem;
    font-size: 0.72rem;
    line-height: 1.4;
    background: transparent;
    color: var(--i64-primary);
    border: 1px solid var(--i64-primary);
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    width: auto;
    margin: 0;
}
.match-amount-chip:hover {
    background: var(--i64-primary);
    color: var(--i64-on-color);
}

/* Match-action cell on the matcher candidate rows. Stack the primary
 * 'Zuordnen' submit and the optional '+ X € abschreiben' submit
 * vertically, narrow width, so the column doesn't blow up when the
 * second button shows up. */
form.finance-match-actions {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: max-content;
    margin: 0;
}
form.finance-match-actions > button {
    width: 100%;
    white-space: nowrap;
}

/* Treffergründe (column 3 in both matcher views) can grow long after
 * we raised the reasons cap to 6 and prepend learned-rule reasons.
 * Wrap inside the cell instead of stretching the table off-screen. */
table.finance-matcher td:nth-child(3) {
    max-width: 22rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

.finance-mode-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.finance-mode-tab {
    display: inline-block;
    padding: 0.38rem 0.72rem;
    border: 1px solid var(--i64-gray-300);
    border-bottom: 2px solid var(--i64-gray-300);
    border-radius: 0.5rem 0.5rem 0 0;
    background: var(--i64-gray-50);
    color: var(--i64-gray-700);
    font-size: 0.92rem;
}

.finance-mode-tab:hover {
    background: var(--i64-gray-100);
    border-color: var(--i64-gray-400);
}

.finance-mode-tab.active {
    background: var(--pico-card-background-color);
    color: var(--i64-primary);
    border-color: var(--i64-primary);
    border-bottom-color: var(--pico-card-background-color);
    font-weight: 600;
    box-shadow: 0 -1px 0 var(--i64-primary) inset;
}

.finance-bulk-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.55rem;
}

.finance-bulk-actions button,
.finance-bulk-actions a[role="button"] {
    width: auto !important;
    flex: 0 0 auto;
    margin-bottom: 0;
}

button.match-exact,
button.match-exact:hover {
    background: var(--i64-success);
    border-color: var(--i64-success);
    color: var(--i64-on-color);
}

button.match-exact:hover {
    background: var(--i64-success-dark);
    border-color: var(--i64-success-dark);
}

.auto-match-table td:nth-child(2),
.auto-match-table td:nth-child(2) * {
    max-width: 16rem;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* 'Soll' (tenant + co-tenants + unit line): without this it inherits the
 * global nowrap and the long unit line ('Wohnung Nr. 3, Stellplatz …')
 * holds the column open, squeezing 'Buchung'. Let it wrap like the others. */
.auto-match-table td:nth-child(4),
.auto-match-table td:nth-child(4) * {
    max-width: 16rem;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.auto-match-table td:nth-child(5),
.auto-match-table td:nth-child(5) * {
    max-width: 18rem;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Narrow viewports (<=900px catches phone landscape / split-screen
 * tablet too): in the auto-match exact-100 view 'Verfügbar' is
 * redundant with 'Zuordnung' (every pair is a 100% match by
 * definition), so hide it to recover horizontal real estate. Force
 * table-layout: fixed + 100% width so cells respect the viewport and
 * Treffergründe wraps at the right edge instead of overflowing. */
@media (max-width: 900px) {
    table.auto-match-table {
        table-layout: fixed;
        width: 100%;
    }
    table.auto-match-table th:nth-child(3),
    table.auto-match-table td:nth-child(3) {
        display: none;
    }
    table.auto-match-table th:first-child,
    table.auto-match-table td:first-child {
        width: 1.6rem;
        padding-left: 0.1rem;
        padding-right: 0.1rem;
    }
    /* Aggressive wrap on Buchung + Treffergründe + nested children
     * (Span/Small with inline styles), so nothing pokes past the
     * cell edge — anywhere lets us break inside long tokens like
     * 'Sammelzahlung' / 'Verwendungszweck' / 'IBAN-Regel'. */
    .auto-match-table td:nth-child(2),
    .auto-match-table td:nth-child(4),
    .auto-match-table td:nth-child(5),
    .auto-match-table td:nth-child(2) *,
    .auto-match-table td:nth-child(4) *,
    .auto-match-table td:nth-child(5) * {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
        font-size: 0.85rem;
    }
}

.finance-review-item {
    border-bottom: 1px solid var(--i64-gray-200);
    /* Kein Top-Padding: der erste Eintrag soll mit den anderen Spalten
       der Zeile (Datum, Name, Betrag, …) auf einer Höhe starten. Unten
       0.3rem als Abstand zum nächsten Item bzw. zum Border. */
    padding: 0 0 0.3rem 0;
    margin-top: 0;
    /* Label + Lösen-Button (✕) auf einer Zeile: der Button stand sonst
       eine Zeile drunter mit unnötig viel Abstand. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.finance-review-item + .finance-review-item {
    padding-top: 0.3rem;
}

.finance-review-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.finance-review-item p {
    /* Inline-Row: kein vertikaler Abstand, Text nimmt den freien Platz,
       der ✕-Button sitzt rechts daneben. */
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.finance-review-item form {
    margin: 0;
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
}

.finance-review-item form button,
.finance-review-item form a[role="button"],
.finance-review-item a[role="button"] {
    width: auto !important;
    margin-bottom: 0;
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Aktion-Spalte: Zuordnen/Ignorieren bzw. Lösen übereinander gestapelt */
.booking-action-stack {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: stretch;
}

.booking-action-stack form {
    margin: 0;
}

/* Offen-Spalte: Restbetrag einer teilweise zugeordneten Buchung */
.amount-open {
    color: var(--i64-warning-dark);
    font-weight: 600;
}

/* Typ-Pills (Miete/NK/Firma/Kaution) + Beleg-Icon in der Zuordnungs-Spalte */
.finance-review-item .badge {
    flex: 0 0 auto;
    white-space: nowrap;
}

.doc-icon-link {
    text-decoration: none;
    vertical-align: middle;
}

.doc-icon-link .doc-inline-icon {
    font-size: 1.1rem;
    vertical-align: text-bottom;
    color: var(--i64-gray-600);
}

.doc-icon-link:hover .doc-inline-icon {
    color: var(--i64-primary);
}

/* Beleg-Block-Kopfzeile: ein Beleg-Link je Block (ggf. mit Teilzahlungs-
   Hinweis, wenn die Buchung nur einen Teil der Beleg-Summe deckt) */
.review-doc-header,
.review-doc-header .doc-inline-icon {
    color: var(--i64-gray-600);
}

.review-doc-header p {
    font-size: 0.85em;
    font-style: italic;
}

.review-doc-header .doc-inline-icon {
    font-size: 1rem;
    vertical-align: text-bottom;
}

/* Posten unterhalb einer Beleg-Kopfzeile: eingerückt — sichtbar, dass alle
   aus demselben Beleg stammen */
.finance-review-item.review-doc-posting {
    margin-left: 1.15rem;
}

/* Beleg an der Tx, aber noch keine AC/BE am Beleg → To-do, rot */
.doc-unbooked-link,
.doc-unbooked-link .doc-inline-icon {
    color: var(--i64-danger);
}

.doc-unbooked-link {
    text-decoration: none;
    font-weight: 600;
}

.doc-unbooked-link:hover {
    text-decoration: underline;
}

.doc-unbooked-link .doc-inline-icon {
    font-size: 1.1rem;
    vertical-align: text-bottom;
}

table.table-fixed {
    table-layout: fixed;
    width: 100%;
}

.overflow-auto table.table-fixed td,
.overflow-auto table.table-fixed th {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

.overflow-auto td.finance-purpose-cell,
.overflow-auto td.finance-counterpart-cell,
.overflow-auto td.finance-review-cell,
.overflow-auto td.finance-tenant-cell,
.overflow-auto td.finance-buchung-cell,
.documents-filename-cell,
.documents-vendor-cell {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.overflow-auto td.finance-purpose-cell {
    max-width: 26rem;
}

.overflow-auto td.finance-counterpart-cell {
    max-width: 14rem;
}

td.amount-positive { color: var(--i64-success); }
td.amount-negative { color: var(--i64-danger); }

/* Top-align cell content in data tables — many cells wrap (counterpart
 * names, document descriptions, review/buchung lists), and middle-
 * vertical-alignment makes mixed-height rows look ragged because each
 * cell sits at a different baseline. Top-aligned reads cleaner. */
.overflow-auto table > tbody > tr > td,
.data-table-sticky table > tbody > tr > td,
table.mobile-card-table > tbody > tr > td {
    vertical-align: top;
}

.documents-filename-cell {
    max-width: 28rem;
}

.documents-vendor-cell {
    max-width: 14rem;
}

.documents-vendor-link {
    font-size: 0.78em;
    color: var(--pico-muted-color);
    margin-top: 0.15rem;
}


tr.tx-ignored td { color: var(--i64-muted); font-style: italic; }
tr.tx-ignored td.amount-positive,
tr.tx-ignored td.amount-negative { color: var(--i64-muted) !important; }

/* Zebra stripes for finance tables — keep tx-ignored visually distinct */
.overflow-auto table tbody > tr:nth-child(even):not(.tx-ignored) > td {
    background-color: var(--i64-table-stripe);
}
.overflow-auto table tbody > tr.tx-ignored > td {
    background-color: var(--i64-table-stripe-strong);
}

.overflow-auto td.finance-review-cell {
    max-width: 18rem;
}

.overflow-auto td.finance-tenant-cell {
    max-width: 14rem;
}
.overflow-auto td.finance-tenant-cell .finance-co-tenants {
    display: inline-block;
    font-size: 0.85em;
    line-height: 1.2;
}
.overflow-auto td.finance-buchung-cell {
    max-width: 18rem;
}


.finance-account-filter {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.finance-account-filter select {
    margin-bottom: 0;
    max-width: 220px;
}

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

@media (max-width: 900px) {
    .finance-match-form {
        grid-template-columns: 1fr;
    }
}

/* Incoming documents page: desktop keeps the table inside its container by
   letting the filename column wrap; mobile collapses into card layout. */
.incoming-page .overflow-auto {
    overflow-x: auto;
}

.incoming-page .overflow-auto table {
    min-width: 760px;
}

.incoming-page .overflow-auto .incoming-documents-mobile-card-table td:nth-child(2) {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 28rem;
}

@media (max-width: 900px) {
    .incoming-page {
        margin-bottom: 1rem;
    }

    .incoming-page .overflow-auto {
        overflow-x: visible;
    }

    .incoming-page .overflow-auto table {
        min-width: 0;
        width: 100%;
    }

    .incoming-page .doc-upload-row select {
        width: 100%;
        min-width: 0;
    }
}

/* --- Fancy Detail Card --- */

.detail-card {
    border: 1px solid var(--i64-gray-200);
    border-radius: 8px;
    box-shadow: var(--i64-shadow-md);
    overflow: hidden;
    margin-bottom: 1rem;
}

.detail-card-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--i64-primary), var(--i64-primary-dark));
    color: var(--i64-on-color);
    padding: 0.75rem 1.25rem;
}

.detail-card-banner-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.detail-card-icon {
    font-size: 1.5rem !important;
}

.owner-logo-thumb {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: contain;
    background: var(--pico-card-background-color);
    border: 1px solid var(--i64-gray-300);
    padding: 3px;
}

.owner-logo-placeholder {
    color: var(--i64-gray-500);
}

.owner-sticky-header-top {
    min-height: 2.25rem;
}

.owner-sticky-header-top h2 {
    margin: 0.1rem 0 0.2rem;
}

/* Modifier for detail-sticky-header when owner logo is positioned right */
.detail-sticky-header--with-logo {
    position: relative;
    padding-right: 11.2rem;
}

.owner-sticky-logo {
    height: calc(100% - 1rem);
    aspect-ratio: 1 / 1;
    width: auto;
    border-radius: 12px;
    background: var(--pico-card-background-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--i64-gray-300);
    box-shadow: var(--i64-shadow-sm);
    flex-shrink: 0;
    position: absolute;
    right: 0.6rem;
    top: 0.5rem;
    bottom: 0.5rem;
    overflow: hidden;
}

.owner-sticky-logo .material-icons-outlined {
    color: var(--i64-gray-500);
    font-size: 1.5rem;
}

.owner-sticky-logo-img {
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    object-fit: contain;
}

.detail-card-titles {
    line-height: 1.3;
}

.detail-card-title {
    font-size: 1.15rem;
    font-weight: 600;
}

.detail-card-subtitle {
    opacity: 0.85;
    font-size: 0.85rem;
}

.detail-card-banner-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.detail-card-banner-amount {
    font-size: 1.15rem;
    font-weight: 700;
}

.detail-card-banner-right .detail-pill {
    font-size: 0.8rem;
    padding: 0.2rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--i64-on-color) 45%, transparent);
}

.detail-card-body {
    padding: 0.75rem 1.25rem;
}

.detail-card-pills {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.detail-card-description {
    color: var(--i64-gray-700);
    margin-bottom: 1rem;
    font-style: italic;
    padding: 0.75rem;
    background: var(--i64-gray-100);
    border-radius: 6px;
}

.detail-card-description .hero-saldo {
    margin-top: 0.4rem;
    font-style: normal;
    font-weight: 600;
}

.detail-card-description .hero-saldo-ok {
    color: var(--i64-success-dark);
}

.detail-card-description .hero-saldo-pending {
    color: var(--i64-warning-dark);
}

.detail-card-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.15rem 0.75rem;
}

.detail-card-links {
    margin-top: 0.75rem;
}

.detail-field {
    padding: 0.25rem 0;
}

.detail-field-label {
    font-size: 0.75rem;
    color: var(--i64-gray-500);
    margin-bottom: 0.1rem;
}

.detail-field-value {
    font-size: 0.9rem;
}

.detail-pill {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    background: var(--v-bg, var(--i64-primary));
    color: var(--v-fg, var(--i64-on-color));
}

/* --- Detail pages --- */

.detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.detail-actions,
.page-actions {
    display: flex;
    gap: 0.5rem;
}

.section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0.75rem 0 1rem;
}

.detail-sticky-header,
.lease-sticky-header {
    position: sticky;
    top: 0.5rem;
    z-index: 900;
    background: var(--i64-gray-50);
    border: 1px solid var(--i64-gray-200);
    border-radius: 10px;
    box-shadow: var(--i64-shadow-sm);
    padding: 0.6rem 0.8rem 0.2rem;
    margin-bottom: 1rem;
}

/* Offset ALL scroll targets so the sticky header doesn't cover them.
   Deliberately universal: an id-prefix allowlist here kept going stale
   (e.g. #gallery-section was hidden behind the header). */
[id] {
    scroll-margin-top: 11rem;
}

.detail-sticky-header .detail-header,
.lease-sticky-header .detail-header {
    margin-bottom: 0.45rem;
}

.detail-sticky-header h2 {
    margin-bottom: 0.15rem;
}

/* Nav context embedded in sticky header: strip standalone styling */
.detail-sticky-header .nav-context,
.lease-sticky-header .nav-context {
    border: none;
    background: none;
    padding: 0;
    margin: 0 0 0.3rem;
    box-shadow: none;
    border-radius: 0;
}

.detail-section-nav,
.lease-section-nav {
    margin: 0 0 0.35rem;
}

.section-nav a {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--i64-gray-300);
    background: var(--pico-card-background-color);
    color: var(--i64-gray-700);
    font-size: 0.86rem;
    font-weight: 600;
}

.section-nav a:hover {
    border-color: var(--i64-primary);
    color: var(--i64-primary);
}

.detail-action-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--i64-gray-200);
}
.detail-action-bar form {
    margin-bottom: 0;
    display: inline;
}
.detail-action-bar form button {
    margin-bottom: 0;
}

.billing-report-actions {
    margin-top: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.billing-report-actions a[role="button"] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--i64-on-color) !important;
}

.billing-report-actions a[role="button"] .material-icons-outlined {
    color: var(--i64-on-color) !important;
    font-size: 1rem;
}

.billing-report-actions form {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.28rem 0.55rem;
    border: 1px solid var(--i64-gray-200);
    border-radius: 999px;
    background: var(--pico-card-background-color);
}

.billing-report-actions form label {
    margin: 0;
    font-size: 0.82rem;
    color: var(--i64-gray-700);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.billing-report-actions form input[type="checkbox"] {
    margin: 0;
}

/* Hauptzähler edit form: note row belongs to the meter row above it */
.meter-note-cell {
    border-top: none;
    padding-top: 0;
}

.meter-note-cell input {
    margin-bottom: 0.25rem;
}

/* Meter CSV import box (bottom of /meter-readings) */
.meter-import-box {
    margin-top: 2rem;
    border: 1px solid var(--i64-gray-300);
    border-radius: 10px;
    padding: 1.25rem 1.5rem 1rem;
    background: var(--i64-gray-50);
}

.meter-import-box h3 {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
}

.meter-import-dropzone-wrap {
    margin-bottom: 0.75rem;
}

.meter-import-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.meter-import-type-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--i64-gray-700);
}

.meter-import-select {
    width: auto;
    min-width: 160px;
    padding: 0.3rem 0.5rem;
    margin: 0;
    font-size: 0.85rem;
}

.meter-import-actions button {
    margin: 0 0 0 auto;
    white-space: nowrap;
}

.billing-period-row {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}

.billing-period-row form {
    flex: 1;
}

.billing-period-row > a[role="button"] {
    margin-bottom: var(--pico-spacing);
    white-space: nowrap;
}

.billing-calc-progress {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.35rem 0 0.75rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--i64-gray-300);
    border-radius: 999px;
    background: var(--pico-card-background-color);
    color: var(--i64-gray-700);
    font-size: 0.85rem;
}

/* Muss .billing-calc-progress (display:inline-flex) schlagen — .hidden allein
 * steht früher im Stylesheet und verliert bei gleicher Spezifität. */
.billing-calc-progress.hidden {
    display: none;
}

.billing-lease-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    margin: 0.5rem 0 1.25rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--i64-gray-300);
    border-radius: 6px;
    background: var(--pico-card-background-color);
}

.billing-calc-progress .material-icons-outlined {
    font-size: 1rem;
    animation: i64-spin 1s linear infinite;
}

.section-block-flat {
    margin-top: 2rem;
    margin-bottom: 1.5rem;
}

.section-block-flat > h3,
.section-block-flat > .page-header > h3 {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

/* Greyed-out table rows (e.g. retired meters in the meter/unit tables). */
.row-muted {
    opacity: 0.55;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.settings-card {
    display: block;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.settings-card:hover {
    border-color: var(--pico-primary);
    box-shadow: var(--i64-shadow-sm);
}
.settings-card-body { display: flex; align-items: flex-start; gap: 0.75rem; }
.settings-card-icon .material-icons-outlined { font-size: 2rem; color: var(--pico-muted-color); }
.settings-card-title { margin: 0; color: var(--pico-primary); }
.settings-card-desc {
    margin: 0.2rem 0 0;
    color: var(--pico-muted-color);
    /* Guard: overlong descriptions must not blow up the whole card grid. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

.inline-form-details { display: inline-block; margin-top: 0.75rem; }
.inline-form-details summary { width: auto; }
/* When the add-form lives on a section title row, keep the button aligned with
   the heading; on open, wrap to its own full-width line so the panel isn't
   squeezed against the right edge. */
.page-header > .inline-form-details { margin-top: 0; }
.page-header > .inline-form-details[open] { flex-basis: 100%; margin-top: 0.5rem; }
.inline-form-panel {
    max-width: 480px;
    margin-top: 0.75rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 6px;
    background: var(--pico-card-background-color);
}

/* Building section (flat, non-collapsible) */
.building-section-flat {
    margin-bottom: 1.5rem;
    border: 1px solid var(--i64-gray-200);
    border-radius: 10px;
    box-shadow: var(--i64-shadow-sm);
}

.building-section-flat:last-child {
    margin-bottom: 0;
}

.building-section-flat > .overflow-auto {
    padding: 0 1.25rem 1rem;
    overflow: visible;  /* override to allow sticky thead to work */
}

/* Sticky table header variant — the wrap must NOT be a scroll container,
   otherwise `position: sticky` on <th> sticks to the wrap (which doesn't
   scroll) instead of the page and never engages. */
.data-table-sticky {
    overflow: visible;
}

.data-table-sticky table {
    min-width: 100%;
    border-collapse: collapse;
}

.data-table-sticky td,
.data-table-sticky th {
    padding: 6px 8px;
    white-space: nowrap;
}

.data-table-sticky thead th {
    position: sticky;
    top: var(--data-table-sticky-top, 0);
    z-index: 20;
    background: var(--pico-card-background-color);
    box-shadow: inset 0 -1px 0 var(--i64-gray-200);
}

.building-section-flat td {
    vertical-align: middle;
}

/* Sticky table header inside building sections — stacks below sticky banner */
.building-section-flat thead th {
    position: sticky;
    top: 13rem;      /* banner top (7rem) + banner height (~6rem with photo) */
    z-index: 40;
    background: var(--pico-background-color);
    box-shadow: 0 1px 0 var(--i64-gray-200);
}

/* Building gradient banner — sticky within section */
.building-banner {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--i64-primary), var(--i64-primary-dark));
    color: var(--i64-on-color);
    padding: 0.75rem 1.25rem;
    gap: 1rem;
    position: sticky;
    top: 7rem;       /* below detail-sticky-header */
    z-index: 50;
    border-radius: 10px 10px 0 0;
}

.building-banner-left {
    flex: 1;
    min-width: 0;
}

.building-banner-title {
    font-size: 1.05rem;
    font-weight: 600;
}

.building-banner-subtitle {
    opacity: 0.8;
    font-size: 0.8rem;
}

.building-banner-stats {
    font-size: 0.8rem;
    opacity: 0.75;
    margin-top: 0.15rem;
}

.building-banner-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-shrink: 0;
}

.building-banner-actions .icon-link {
    color: var(--i64-on-color);
    opacity: 0.85;
}

.building-banner-actions .icon-link:hover {
    opacity: 1;
}

.building-banner-actions .icon-link.danger {
    color: color-mix(in srgb, var(--i64-danger) 45%, var(--i64-on-color));
}

.building-banner-btn {
    border-color: color-mix(in srgb, var(--i64-on-color) 50%, transparent) !important;
    color: var(--i64-on-color) !important;
}

.building-banner-btn:hover {
    border-color: var(--i64-on-color) !important;
    background: color-mix(in srgb, var(--i64-on-color) 15%, transparent) !important;
}

/* Building notes */
.building-notes {
    padding: 0.5rem 1.25rem;
}

.building-notes p {
    margin: 0;
}

/* Tenant + lease icon alignment in building unit rows */
.unit-tenant-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.unit-tenant-inline .icon-link {
    padding: 0;
    line-height: 1;
}

/* --- Footer --- */

footer {
    margin-top: 2rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--i64-gray-500);
    padding: 1rem 0;
}

footer a {
    color: var(--i64-gray-500);
}

footer a:hover {
    color: var(--i64-primary);
}

/* ==========================================================================
   10. UTILITIES
   ========================================================================== */

.subtitle {
    color: var(--i64-gray-500);
}

.muted {
    color: var(--i64-gray-500);
}
tr.muted td {
    color: var(--i64-gray-500);
}

/* Icon button (borderless, for inline actions like toggle-active) */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0.15rem 0.4rem !important;
    min-width: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: var(--i64-gray-600);
    border-radius: 4px;
    margin: 0;
    vertical-align: middle;
}

.icon-btn:hover {
    background: var(--i64-gray-200);
    color: var(--i64-gray-800);
}

.icon-btn.danger {
    color: var(--i64-danger);
}

.icon-btn.danger:hover {
    background: var(--i64-danger);
    color: var(--i64-on-color);
}

/* Monospace text (generated passwords, codes) */
.mono {
    font-family: 'Courier New', Courier, monospace;
}

.consistency-issue-title {
    margin: 0 0 0.2rem;
}

.small-muted, .muted-sm {
    color: var(--i64-gray-500);
    font-size: 0.9rem;
}

.wrap-cell {
    max-width: 14rem;
    word-wrap: break-word;
}

/* Shrink a table column to its content's natural width. The 1% trick
   exploits how browsers distribute remaining table width: a column
   declared at 1% takes only what its content needs, while the rest
   absorbs the slack. Use on icon-only / count / status columns. */
.col-shrink {
    width: 1%;
    white-space: nowrap;
}

/* Font-weight utilities. */
.fw-bold    { font-weight: 700; }
.fw-medium  { font-weight: 500; }

.dist-row {
    font-size: 0.85rem;
    white-space: nowrap;
}

button.compact, [role="button"].compact {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
}

/* Warning message text */
.warning-message {
    color: var(--i64-warning);
    font-weight: 500;
}

.tenant-quick-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0.75rem 0 1rem;
}

.tenant-section-panel {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 8px;
    box-shadow: var(--i64-shadow-sm);
    background: var(--pico-card-background-color);
}

.tenant-section-panel h3 {
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.tenant-section-panel h3 .material-icons-outlined {
    font-size: 1.15rem;
    color: var(--i64-primary);
}

.tenant-meter-actions {
    display: flex;
    justify-content: flex-end;
    margin: 0.35rem 0 0.75rem;
}

.nav-context {
    border: 1px solid var(--i64-gray-300);
    border-radius: 8px;
    background: var(--pico-card-background-color);
    padding: 0.45rem 0.75rem;
    margin-bottom: 0.9rem;
    box-shadow: var(--i64-shadow-sm);
}

.nav-context-breadcrumbs,
.nav-context-related {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    line-height: 1.35;
}

.nav-context-breadcrumbs a {
    font-weight: 600;
}

.nav-context-current {
    color: var(--i64-gray-700);
    font-weight: 700;
}

.nav-context-related {
    margin-top: 0.25rem;
    color: var(--i64-gray-700);
}

.nav-context-related a {
    color: var(--i64-primary);
}

.nav-context-inline-links {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.footer-shortcuts-hint {
    color: var(--i64-gray-600);
    font-size: 0.85rem;
}

.nav-context-sep {
    color: var(--i64-gray-500);
}

.global-search-overlay {
    position: fixed;
    inset: 0;
    background: var(--i64-overlay);
    z-index: 4000;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 7vh;
}

.global-search-overlay.open {
    display: flex;
}

.global-search-modal {
    width: min(880px, 92vw);
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--pico-card-background-color);
    border-radius: 12px;
    border: 1px solid var(--i64-gray-300);
    box-shadow: var(--i64-shadow-lg);
    padding: 0.9rem;
}

.global-search-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.global-search-head input {
    margin: 0;
}

.global-search-results {
    margin-top: 0.75rem;
    min-width: 0;
    overflow-x: hidden;
}

.global-search-results-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 0.8rem;
    min-width: 0;
}

.global-search-section {
    border: 1px solid var(--i64-gray-300);
    border-radius: 8px;
    padding: 0.45rem 0.65rem;
    min-width: 0;
    overflow-x: hidden;
}

.global-search-section h3 {
    margin: 0 0 0.3rem;
    font-size: 0.95rem;
}

.global-search-section ul {
    margin: 0;
    padding-left: 1.15rem;
}

.global-search-section li {
    margin: 0.1rem 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.global-search-result-link,
.global-search-result-link:hover,
.global-search-result-link:focus,
.global-search-result-link:focus-visible {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
    vertical-align: top;
}

.global-search-result-link.is-active {
    background: var(--i64-primary);
    color: var(--i64-on-color);
    border-radius: 4px;
    padding: 0.05rem 0.2rem;
}

.selfservice-meter-form {
    display: grid;
    gap: 0.75rem;
}

.selfservice-instructions {
    border: 1px solid var(--i64-gray-300);
    background: var(--i64-gray-100);
    border-radius: 8px;
    padding: 0.75rem 0.9rem 0.6rem;
}

.selfservice-instructions p {
    margin: 0 0 0.35rem;
}

.selfservice-instructions ul {
    margin: 0;
    padding-left: 1.1rem;
}

.selfservice-photo-upload {
    border: 2px dashed var(--i64-primary);
    border-radius: 8px;
    padding: 0.8rem;
    background: var(--pico-card-background-color);
}

.selfservice-photo-upload p {
    margin-bottom: 0.15rem;
}

.selfservice-photo-upload small {
    display: block;
    margin-bottom: 0.45rem;
}

.selfservice-photo-input {
    width: 100%;
}

/* Document Generator Widget */
.docgen-widget {
    max-width: 600px;
}
.docgen-row {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.75rem;
}
.docgen-row select {
    flex: 1;
    margin-bottom: 0;
}
.docgen-row a[role="button"] {
    white-space: nowrap;
}
.docgen-info {
    font-size: 0.875rem;
    color: var(--pico-muted-color);
    line-height: 1.5;
}
.docgen-info small {
    display: block;
}
.docgen-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    color: var(--i64-warning-fg);
    background: var(--i64-warning-bg);
    border: 1px solid var(--i64-warning);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}
.docgen-warning .material-icons-outlined {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.docgen-prompt-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 6px;
    background: var(--pico-card-background-color);
}
.docgen-prompt-form .docgen-prompt-field,
.docgen-prompt-form .docgen-prompt-check {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.875rem;
    margin-bottom: 0;
}
.docgen-prompt-form .docgen-prompt-check {
    flex-direction: row;
    align-items: center;
    grid-column: 1 / -1;
}
.docgen-prompt-form .docgen-prompt-check input {
    margin: 0;
}
.docgen-prompt-form .docgen-prompt-field > span {
    font-weight: 600;
    color: var(--color, inherit);
}
.docgen-prompt-form input,
.docgen-prompt-form select,
.docgen-prompt-form textarea {
    margin-bottom: 0;
}
.docgen-prompt-form textarea {
    grid-column: 1 / -1;
    min-height: 3rem;
}
.docgen-prompt-form button[type="submit"] {
    grid-column: 1 / -1;
    justify-self: end;
    margin: 0;
}

.admin-templates-table td:nth-child(6) {
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 28ch;
}

/* ==========================================================================
   11. RESPONSIVE (@media queries)
   ========================================================================== */

@media (max-width: 768px) {
    html,
    body {
        overflow-y: auto;
    }

    .hamburger-menu {
        display: block;
    }

    .nav-bar {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2000;
        flex-direction: column;
        justify-content: flex-start;
        padding: 1rem;
        gap: 0.25rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background: var(--pico-card-background-color);
        border-bottom: none;
    }

    .nav-bar.show {
        display: flex;
    }

    .nav-bar a {
        display: flex;
        justify-content: flex-start;
        text-align: left;
        font-size: 1.1rem;
        line-height: 1.35;
        padding: 0.82rem 0.6rem;
        min-height: 3rem;
    }

    .user-section {
        margin-left: 0;
        margin-top: 0;
        margin-bottom: 0.55rem;
        order: -1;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding-bottom: 0.6rem;
        border-bottom: 1px solid var(--i64-gray-300);
        width: 100%;
    }

    .admin-links {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }

    .user-section .nav-action-btn {
        width: 2.45rem;
        height: 2.45rem;
    }

    .logo-link {
        margin-right: 0;
    }

    /* Mobile: hide dropdown, show flat secondary links */
    .nav-dropdown {
        display: none;
    }

    .nav-mobile-secondary {
        display: block;
        width: 100%;
    }

    .nav-mobile-secondary a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
    }

    .nav-mobile-group {
        display: block;
        text-align: left;
        width: 100%;
        padding: 0.82rem 0.6rem 0.26rem;
    }

    .nav-divider {
        display: block;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .property-grid {
        grid-template-columns: 1fr;
    }

    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .detail-card-fields {
        grid-template-columns: 1fr;
    }

    .selfservice-meter-form {
        gap: 0.6rem;
    }

    .selfservice-photo-upload {
        padding: 0.7rem;
    }

    .global-search-modal {
        width: 94vw;
        max-height: 86vh;
        padding: 0.7rem;
    }

    .global-search-results-body {
        grid-template-columns: 1fr;
    }

    .mobile-card-table {
        width: 100%;
    }

    .mobile-card-table thead {
        display: none;
    }

    .mobile-card-table tbody {
        display: grid;
        gap: 0.55rem;
    }

    .mobile-card-table tr {
        display: block;
        border: 1px solid var(--i64-gray-300);
        border-radius: 8px;
        padding: 0.5rem 0.6rem;
        background: var(--pico-card-background-color);
    }

    .mobile-card-table td,
    .mobile-card-table td * {
        /* Reset the global '.overflow-auto td { white-space: nowrap }'
         * (line 719) AND propagate into nested Span/Small/Div children
         * (some have their own inline styles or are inside flex
         * containers that prevent inheritance from kicking in cleanly).
         * Without this, nested unit-info lines like 'Stellplatz GA09,
         * Wohnung WE07 · Loehergraben 5/7' stay on a single line and
         * overflow the card. */
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .mobile-card-table td {
        display: block;
        border: 0;
        padding: 0.12rem 0;
    }

    /* /mentions: the desktop "shrink to fit" width:1% on the actions cell
       collapses to ~3px once td becomes display:block on mobile, which —
       together with the word-break above — stacks the pill text vertically
       (o/f/f/e/n). Give the cell its natural width back and keep the
       status pill on a single line. */
    .mobile-card-table td.mention-actions-cell { width: auto; }
    .mobile-card-table td .mention-status { white-space: nowrap; }

    /* Render header label before each cell on mobile (only if data-label set and non-empty) */
.mobile-card-table td[data-label]:not([data-label=""])::before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: var(--i64-gray-600);
        margin-right: 0.4rem;
    }

    /* Mobile-card Globals (gelten für jede Tabelle mit data_table(...,
       mobile_cards=True)).
       text-right ist auf Desktop Spaltenausrichtung, in der Card-Form
       schubst es den Wert ans Karten-Ende und erzeugt großen Whitespace
       hinter dem "Label: "-Prefix — links flowen lassen.
       Zebra-Streifen (von finance-table, finance-matcher, auto-match-
       table) machen jede 2. Karte einheitlich grau, was die Trennung
       per Border + Padding zerstört — überall innerhalb von Mobile-
       Cards bg neutralisieren. */
    .mobile-card-table td.text-right { text-align: left; }
    /* Zebra-Streifen (von .overflow-auto, finance-matcher, auto-match-table)
       gewinnen sonst per Spezifität und malen graue Blöcke quer durch die
       Karte. In der Karten-Ansicht gibt es keine Streifen — Karten trennen
       sich über Border + Padding. !important schlägt alle Streifen-Quellen. */
    .mobile-card-table tbody > tr > td { background-color: transparent !important; }

    /* Hide empty cells on mobile to avoid blank "Label: " rows */
    .mobile-card-table td:empty {
        display: none;
    }

    .mobile-card-table td.actions,
    .mobile-card-table td:last-child {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
        padding-top: 0.35rem;
    }

    /* Actions cell: no label prefix */
    .mobile-card-table td.actions::before,
    .mobile-card-table td:last-child::before {
        content: none;
    }

    /* Owners: 2-column data grid inside each card */
    .owners-card-table tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 0.75rem;
        row-gap: 0.15rem;
        align-items: start;
    }
    /* Logo, Name, Actions span full width */
    .owners-card-table td:nth-child(1),
    .owners-card-table td:nth-child(2),
    .owners-card-table td:last-child {
        grid-column: 1 / -1;
    }
    .owners-card-table td:nth-child(2) {
        font-size: 1.05rem;
        font-weight: 600;
        margin-bottom: 0.2rem;
    }
    .owners-card-table td:nth-child(2)::before { content: none; }
    .owners-card-table td:nth-child(1) { text-align: left; }
    /* Cancel right-alignment in card view */
    .owners-card-table td.text-right { text-align: left; }

    /* Document cards in property detail: hide per-row icon actions on mobile */
    .document-panel .mobile-card-table td:last-child {
        display: none;
    }

    .document-panel .mobile-card-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "file file"
            "type size"
            "date date";
        column-gap: 0.6rem;
        row-gap: 0.1rem;
    }

    .document-panel .mobile-card-table td:nth-child(1) {
        grid-area: file;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .document-panel .mobile-card-table td:nth-child(2) {
        grid-area: type;
        white-space: normal;
    }

    .document-panel .mobile-card-table td:nth-child(3) {
        grid-area: size;
        justify-self: end;
        text-align: right;
        white-space: nowrap;
    }

    .document-panel .mobile-card-table td:nth-child(4) {
        grid-area: date;
        white-space: normal;
    }

    /* Documents list/incoming: use compact document card layout on mobile */
    .documents-mobile-card-table td:last-child {
        display: none;
    }

    .documents-mobile-card-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "file file"
            "type size"
            "date date";
        column-gap: 0.6rem;
        row-gap: 0.1rem;
        min-width: 0;
    }

    .documents-mobile-card-table td {
        padding: 0;
        min-width: 0;
    }

    .documents-mobile-card-table td:nth-child(1) {
        grid-area: file;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .documents-mobile-card-table td:nth-child(1) a,
    .documents-mobile-card-table td:nth-child(1) .doc-filename-link {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .documents-mobile-card-table td:nth-child(2) {
        grid-area: type;
        white-space: normal;
    }

    .documents-mobile-card-table td:nth-child(6) {
        grid-area: size;
        justify-self: end;
        text-align: right;
        white-space: nowrap;
    }

    .documents-mobile-card-table td:nth-child(5) {
        grid-area: date;
        white-space: normal;
    }

    .documents-mobile-card-table td:nth-child(3),
    .documents-mobile-card-table td:nth-child(4) {
        display: none;
    }

    /* Incoming docs have preview in column 1; hide it and map fields accordingly. */
    .incoming-documents-mobile-card-table td:nth-child(1),
    .incoming-documents-mobile-card-table td:nth-child(4),
    .incoming-documents-mobile-card-table td:nth-child(7) {
        display: none;
    }

    .incoming-documents-mobile-card-table td:nth-child(2) {
        grid-area: file;
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .incoming-documents-mobile-card-table td:nth-child(2) a {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .incoming-documents-mobile-card-table td:nth-child(3) {
        grid-area: type;
        display: block;
    }

    .incoming-documents-mobile-card-table td:nth-child(6) {
        grid-area: size;
    }

    .incoming-documents-mobile-card-table td:nth-child(5) {
        grid-area: date;
    }

    /* Compact 2-column mobile cards for unit rows in property/building detail */
    .building-unit-card-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "num type"
            "floor area"
            "tenant rooms"
            "desc desc";
        column-gap: 0.75rem;
        row-gap: 0.12rem;
    }

    .building-unit-card-table td {
        padding: 0;
    }

    .building-unit-card-table td:nth-child(1) {
        grid-area: num;
        font-weight: 600;
    }

    .building-unit-card-table td:nth-child(2) {
        grid-area: type;
        justify-self: end;
        text-align: right;
    }

    .building-unit-card-table td:nth-child(3) {
        grid-area: floor;
    }

    .building-unit-card-table td:nth-child(4) {
        grid-area: area;
        justify-self: end;
        text-align: right;
    }

    .building-unit-card-table td:nth-child(6) {
        grid-area: tenant;
    }

    .building-unit-card-table td:nth-child(5) {
        grid-area: rooms;
        justify-self: end;
        text-align: right;
    }

    .building-unit-card-table td:nth-child(7) {
        grid-area: desc;
        margin-top: 0.15rem;
        color: var(--i64-gray-600);
        font-size: 0.9rem;
    }

    .building-unit-card-table td:last-child {
        display: none;
    }

    .building-unit-card-table .unit-tenant-inline {
        flex-wrap: wrap;
    }

    .admin-templates-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "name status"
            "category version"
            "uploaded uploaded"
            "notes notes"
            "actions actions";
        column-gap: 0.75rem;
        row-gap: 0.2rem;
    }

    .admin-templates-table td {
        padding: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .admin-templates-table td:nth-child(1) {
        grid-area: name;
        font-weight: 600;
    }

    .admin-templates-table td:nth-child(2) {
        grid-area: category;
        color: var(--i64-gray-600);
    }

    .admin-templates-table td:nth-child(3) {
        grid-area: version;
        justify-self: end;
        color: var(--i64-gray-600);
    }

    .admin-templates-table td:nth-child(4) {
        grid-area: status;
        justify-self: end;
    }

    .admin-templates-table td:nth-child(5) {
        grid-area: uploaded;
        color: var(--i64-gray-600);
        font-size: 0.9rem;
    }

    .admin-templates-table td:nth-child(6) {
        grid-area: notes;
        color: var(--i64-gray-600);
        font-size: 0.9rem;
    }

    .admin-templates-table td:last-child {
        grid-area: actions;
        justify-self: start;
        padding-top: 0.35rem;
    }

    .detail-sticky-header,
.lease-sticky-header {
        position: static;
        border: 0;
        box-shadow: none;
        padding: 0;
        margin-bottom: 0.75rem;
    }

    .owner-sticky-logo {
        width: 84px;
        height: 84px;
        position: static;
    }

    .owner-sticky-logo-img {
        width: 76px;
        height: 76px;
    }

    .owner-sticky-header-top {
        min-height: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .detail-sticky-header--with-logo {
        padding-right: 0;
    }

    .footer-shortcuts-hint {
        display: none;
    }
}

/* ===================================================================
 * 14. Building Photos & Map Section
 * =================================================================== */

.building-header {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.file-input-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.file-input-row input[type="file"] {
    font-size: 0.85rem;
    margin-bottom: 0;
    padding: 0.25rem;
}

.file-input-row button {
    display: none; /* auto-submit via onchange, button hidden */
}

.map-section {
    margin-bottom: 1.5rem;
}

.map-embed-container {
    position: relative;
    pointer-events: none;
    margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
    .building-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        position: static; /* disable sticky on mobile — too much vertical space */
    }

    .building-banner-left {
        width: 100%;
    }

    .building-banner-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .building-section-flat thead th {
        position: static;
        box-shadow: none;
    }
}

/* ==========================================================================
   DOCUMENT PANEL
   ========================================================================== */

.document-panel {
    margin-top: 0.5rem;
}

.document-panel h4 {
    margin: 0 0 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.document-panel .doc-filename-link {
    color: var(--i64-primary);
}

.document-panel .doc-filename-link:hover {
    color: var(--i64-primary-dark);
}

.document-panel .actions a.icon-btn {
    color: var(--i64-gray-600);
}

.document-panel .actions a.icon-btn:hover {
    color: var(--i64-gray-800);
}

.doc-upload-wrap {
    margin-top: 0.75rem;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
}

.doc-drop-zone {
    /* Soft neutral card with a standard-blue outline so it reads clearly as a
       drop target; flat grey fill (no gradient). Hover/drag switch the border
       to dashed and add only a faint tint (kept light for text legibility). */
    border: 1px solid var(--i64-primary);
    border-radius: 10px;
    background: var(--i64-gray-100);
    /* Doubled height for an easier drop target; content vertically centred. */
    min-height: 3.4rem;
    padding: 0.9rem 0.8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    margin-bottom: 0;
}

.doc-drop-zone:hover,
.doc-drop-zone:focus-visible {
    /* Just a thicker blue outline on hover — keep the grey fill (the zone is a
       role="button", so this also defeats Pico's dark hover background that
       would otherwise hide the text). No fill change = text stays legible. */
    border-color: var(--i64-primary);
    background: var(--i64-gray-100);
    box-shadow: 0 0 0 2px var(--i64-primary);
    outline: none;
}

.doc-drop-zone.drag-over {
    border-color: var(--i64-primary);
    background: var(--i64-gray-100);
    box-shadow: 0 0 0 3px var(--i64-primary);
}

.doc-drop-input {
    display: none !important;
}

.doc-drop-zone-content {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--i64-gray-700);
}

.doc-drop-zone-content .material-icons-outlined {
    font-size: 1.1rem;
    color: var(--i64-primary);
}

.doc-drop-title,
.doc-drop-hint {
    margin: 0;
}

.doc-drop-title {
    font-size: 0.88rem;
    color: var(--i64-gray-800);
}

.doc-drop-hint {
    font-size: 0.74rem;
    color: var(--i64-gray-500);
}

.doc-drop-selected {
    display: none;
    font-size: 0.74rem;
    color: var(--i64-primary-dark);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-drop-zone.has-file .doc-drop-selected {
    display: block;
}

.doc-upload-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    margin-top: 0;
}

.doc-upload-row select {
    margin-bottom: 0;
    width: 170px;
    min-width: 170px;
}

.doc-upload-row button {
    margin-bottom: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
}

.bookings-import-form {
    display: grid;
    grid-template-columns: minmax(170px, 220px);
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.bookings-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.bookings-export-btn {
    white-space: nowrap;
    margin: 0;
}

.bookings-filter-amount {
    width: auto;
    min-width: 240px;
    max-width: 320px;
    margin: 0;
}
.bookings-filter-amount.invalid {
    border-color: var(--i64-danger);
}

/* Highlight für eine Tx-Zeile, wenn man via tx_highlight=<id> landet
   (z.B. Sprung von der Doc-Detail-Seite über den AC/BE-Tx-Chip). */
tr.tx-highlighted > td {
    background: var(--i64-highlight) !important;
    animation: tx-highlight-flash 1.4s ease-out 1;
}
@keyframes tx-highlight-flash {
    0%   { background: var(--i64-highlight-strong) !important; }
    100% { background: var(--i64-highlight) !important; }
}

/* Highlight für eine @Mention-Zeile beim Deep-Link (mention_highlight=<id>),
   z.B. Sprung aus der täglichen Digest-Mail. Reuse der Tx-Flash-Animation. */
tr.mention-highlighted > td {
    background: var(--i64-highlight) !important;
    animation: tx-highlight-flash 1.4s ease-out 1;
}

.bookings-import-dropzone {
    min-height: 3.4rem;
    padding: 0.45rem 0.65rem;
    border-style: solid;
    border-color: var(--i64-primary);
    background: var(--pico-card-background-color);
}

.bookings-import-dropzone .doc-drop-zone-content {
    min-width: 0;
}

.bookings-import-note {
    grid-column: 1 / -1;
    margin: -0.25rem 0 0;
    color: var(--i64-gray-500);
    font-size: 0.72rem;
    line-height: 1.15;
}

[data-theme="dark"] .bookings-import-dropzone {
    background: var(--i64-gray-100);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .bookings-import-dropzone {
        background: var(--i64-gray-100);
    }
}

.bank-import-upload-form {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0 1.25rem;
}

.bank-import-dropzone {
    min-height: 5.5rem;
    display: flex;
    align-items: center;
    padding: 1rem 1.1rem;
    border-style: solid;
    border-color: var(--i64-primary);
    background: var(--pico-card-background-color);
}

.bank-import-dropzone .doc-drop-zone-content .material-icons-outlined {
    font-size: 1.5rem;
}

.bank-import-dropzone .doc-drop-title {
    font-size: 1rem;
}

.bank-import-upload-actions {
    display: grid;
    gap: 0.35rem;
    justify-items: end;
}

.bank-import-upload-actions button {
    margin: 0;
    border-color: var(--i64-primary);
    color: var(--i64-primary);
    background: var(--pico-card-background-color);
}

.bank-import-upload-actions button:hover,
.bank-import-upload-actions button:focus-visible {
    border-color: var(--i64-primary-dark);
    color: var(--i64-primary-dark);
    background: color-mix(in srgb, var(--i64-primary) 9%, var(--pico-background-color));
}

.bank-import-note {
    margin: 0;
    color: var(--i64-gray-500);
    font-size: 0.78rem;
    text-align: right;
    max-width: 16rem;
}

[data-theme="dark"] .bank-import-dropzone,
[data-theme="dark"] .bank-import-upload-actions button {
    background: var(--i64-gray-100);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .bank-import-dropzone,
    :root:not([data-theme="light"]) .bank-import-upload-actions button {
        background: var(--i64-gray-100);
    }
}

@media (max-width: 900px) {
    .doc-upload-wrap {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .doc-upload-row {
        flex-wrap: wrap;
    }

    .bank-import-upload-form {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .bank-import-upload-actions {
        justify-items: start;
    }

    .bank-import-note {
        text-align: left;
        max-width: none;
    }
}


/* ===================================================================
 * 16. Icon-only Buttons
 * =================================================================== */

/* Icon-only buttons with role="button" that are purely icon (material-icons-outlined as direct class) */
a[role="button"].material-icons-outlined {
    padding: 0.5rem !important;
    min-width: 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: 1.25rem;
    line-height: 1;
}

/* ===================================================================
 * 16b. CopyBox (WTB pattern)
 * =================================================================== */

.copy-box {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    margin: 10px 0;
    border-radius: 4px;
    border-left: 6px solid var(--pico-primary);
    background-color: var(--pico-card-background-color);
    box-shadow: var(--i64-shadow-sm);
    max-width: 50%;
}

.copy-box input {
    flex-grow: 1;
    background: none;
    border: none;
    padding: 4px;
    margin-bottom: 0;
    font-size: 0.9rem;
    color: var(--pico-color);
}

.copy-box .copy-btn {
    cursor: pointer;
    color: var(--pico-primary);
    font-size: 1.25rem;
    padding: 0.25rem;
}

.copy-box .copy-btn:hover {
    color: var(--pico-primary-hover);
}

.copy-box .checkmark {
    color: var(--i64-success);
    font-size: 1.25rem;
    margin-left: 0.25rem;
}

/* ===================================================================
 * 17. Document Detail Grid
 * =================================================================== */

.doc-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 768px) {
    .doc-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* Document detail: right side panel (preview / OCR text toggle) */
.doc-side-panel {
    position: sticky;
    top: 6rem;
}

.doc-side-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.doc-side-tab {
    padding: 0.3rem 0.75rem;
    border-radius: var(--pico-border-radius);
    font-size: 0.82rem;
    font-weight: 500;
    background: var(--pico-secondary-background);
    color: var(--pico-secondary-inverse);
    transition: background 0.15s;
}

.doc-side-tab:hover {
    background: var(--pico-primary-background);
    color: var(--pico-primary-inverse);
}

.doc-side-tab.active {
    background: var(--pico-primary-background);
    color: var(--pico-primary-inverse);
}
.doc-side-copy,
.doc-side-rotate {
    margin-left: auto;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.3rem 0.4rem;
    color: var(--pico-muted-color);
    align-self: center;
}

.doc-side-copy:hover,
.doc-side-rotate:hover {
    color: var(--pico-primary);
}

/* Document classifier suggestions */
.suggestion-hint {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0;
    font-size: 0.9rem;
}
.suggestion-hint .material-icons-outlined {
    font-size: 1.1rem;
    color: var(--pico-muted-color);
}

/* Document preview: pending spinner (table thumbnail) */
.preview-pending,
.preview-pending-large {
    color: var(--pico-muted-color);
    animation: i64-spin 2s linear infinite;
}

.preview-pending {
    font-size: 1.3rem;
}

/* Document preview: pending spinner (detail panel) */
.preview-pending-large {
    font-size: 2.5rem;
}

.preview-page-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.preview-nav-btn {
    cursor: pointer;
    user-select: none;
}

.preview-page-info {
    color: var(--pico-muted-color);
}

/* When both icons present, rotate already has the auto-margin pushing the
   group right — copy must sit next to it with no extra spacing. */
.doc-side-rotate + .doc-side-copy {
    margin-left: 0;
}

.preview-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    background: var(--pico-code-background-color);
    border-radius: var(--pico-border-radius);
    color: var(--pico-muted-color);
}

/* Document preview: MIME type label (table thumbnail) */
.preview-mime-label {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--pico-muted-color);
    background: var(--pico-code-background-color);
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    text-transform: uppercase;
    max-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Document preview: Material Icon stand-in for formats without a renderer
   (Excel, Word, plain text) — same footprint as .preview-pending, no spin. */
.preview-mime-icon {
    font-size: 1.8rem;
    color: var(--pico-muted-color);
}

/* Buildings & Units section spacing */
.buildings-units-section {
    margin-top: 3rem;
}

/* Notizen-Spalte in der Miethistorie: bis 2 Zeilen anzeigen, dann ellipsis.
   Voller Text als native Tooltip via title-Attribut. */
.rent-history-notes {
    max-width: 24rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    cursor: help;
}

/* Economic-data calculators */
.vpi-page {
    max-width: 680px;
}

.ester-page {
    max-width: 880px;
}

.vpi-page .page-header,
.ester-page .page-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.vpi-calculator,
.ester-calculator {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: var(--pico-border-radius);
    background: var(--pico-card-background-color);
}

.vpi-calc-row,
.ester-calc-row {
    display: flex;
    gap: 1rem;
    align-items: end;
    flex-wrap: wrap;
}

.vpi-calc-field,
.ester-calc-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.vpi-calc-field label,
.ester-calc-field label {
    font-size: 0.85rem;
    margin-bottom: 0;
}

.vpi-calc-field input,
.ester-calc-field input {
    margin-bottom: 0;
}

.vpi-calc-submit,
.ester-calc-submit {
    justify-content: end;
}

.vpi-calc-result,
.ester-calc-result {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vpi-result-summary,
.ester-result-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
}

.ester-result-summary {
    flex-wrap: wrap;
}

.vpi-result-example,
.ester-result-spread {
    font-size: 0.95rem;
    color: var(--pico-muted-color);
}

@media (max-width: 768px) {
    .vpi-calc-row,
    .ester-calc-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* -- Unified cost creation source summary -- */
.source-summary {
    font-size: 0.9rem;
    color: var(--pico-muted-color);
    margin-bottom: 0.5rem;
}
.source-summary .material-icons-outlined {
    font-size: 1rem;
    vertical-align: middle;
}

/* --- AI Assistant Modal --- */
.ai-modal {
    position: fixed;
    inset: 0;
    background: var(--i64-overlay);
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 1rem;
}
.ai-modal.hidden { display: none; }
.ai-modal-box {
    width: 100%;
    max-width: 520px;
    height: min(640px, 90vh);
    background: var(--pico-card-background-color);
    border-radius: 10px;
    box-shadow: var(--i64-shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ai-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.9rem;
    background: var(--i64-brand);
    color: var(--i64-on-color);
    font-weight: 600;
}
.ai-modal-actions button {
    background: transparent;
    color: var(--i64-on-color);
    border: 0;
    padding: 0.2rem 0.4rem;
    cursor: pointer;
    margin: 0;
    line-height: 1;
}
.ai-modal-actions button:hover { opacity: 0.8; }
.ai-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    background: var(--pico-background-color);
    font-size: 0.92rem;
}
.ai-chat-welcome { color: var(--i64-gray-600); font-size: 0.9rem; }
.ai-examples { padding-left: 1rem; margin: 0.3rem 0 0 0; }
.ai-examples li { margin: 0.15rem 0; }
.ai-msg {
    margin-bottom: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    max-width: 92%;
    line-height: 1.4;
    word-wrap: break-word;
}
.ai-msg-user {
    background: var(--i64-info-bg);
    margin-left: auto;
    text-align: right;
}
.ai-msg-assistant {
    background: var(--pico-card-background-color);
    border: 1px solid var(--i64-gray-200);
}
.ai-msg-assistant table { font-size: 0.85rem; margin: 0.4rem 0; border-collapse: collapse; }
.ai-msg-assistant th, .ai-msg-assistant td { border: 1px solid var(--i64-gray-300); padding: 0.2rem 0.4rem; text-align: left; }
.ai-msg-assistant th { background: var(--i64-gray-100); }
.ai-msg-assistant code { background: var(--i64-gray-200); padding: 0.1rem 0.25rem; border-radius: 3px; font-size: 0.88em; }
.ai-msg-assistant pre { background: var(--i64-gray-200); padding: 0.5rem; border-radius: 4px; overflow-x: auto; font-size: 0.85em; }
.ai-msg-thinking { opacity: 0.7; }
.ai-msg-time {
    font-size: 0.68rem;
    color: var(--i64-gray-400);
    margin-top: 0.25rem;
    text-align: right;
}

.prefill-banner {
    background: var(--i64-warning-bg);
    border: 1px solid var(--i64-brand);
    border-left: 4px solid var(--i64-brand);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    margin: 0.5rem 0 1rem 0;
    display: flex;
    align-items: center;
    font-size: 0.92rem;
}
.prefill-banner .material-icons-outlined { color: var(--i64-brand); }
.ai-modal-form {
    display: flex !important;
    flex-direction: row !important;
    gap: 0.4rem;
    padding: 0.5rem;
    border-top: 1px solid var(--i64-gray-200);
    background: var(--pico-card-background-color);
    margin: 0;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
}
#ai-chat-input {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    resize: none;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--i64-gray-300);
    border-radius: 6px;
    font-size: 16px;  /* prevent iOS auto-zoom on focus */
    font-family: inherit;
    margin: 0;
    box-sizing: border-box;
}
.ai-btn-send {
    flex: 0 0 auto !important;
    width: 3rem !important;
    min-width: 3rem !important;
    background: var(--i64-brand) !important;
    color: var(--i64-on-color) !important;
    border: 0 !important;
    border-radius: 6px !important;
    padding: 0 !important;
    cursor: pointer;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ai-btn-send:hover { background: var(--i64-brand-dark); }
.ai-modal-footer {
    padding: 0.3rem 0.8rem;
    color: var(--i64-muted);
    font-size: 0.72rem;
    text-align: center;
    border-top: 1px solid var(--i64-gray-200);
    background: var(--pico-background-color);
}
@media (max-width: 600px) {
    .ai-modal {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
    }
    .ai-modal-box {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh;       /* fallback for older browsers */
        height: 100dvh;      /* accounts for mobile URL bar */
        max-height: 100dvh;
        border-radius: 0;
    }
}

/* Consistency-check dashboard */
.consistency-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.consistency-error   { background: var(--i64-danger);  color: var(--i64-on-color); }
.consistency-warning { background: var(--i64-warning); color: var(--i64-on-color); }
.consistency-issues td { vertical-align: top; }
.consistency-issues td:first-child { width: 90px; white-space: nowrap; }
.consistency-check-fail {
    color: var(--i64-danger);
    margin-top: 1rem;
}
.consistency-check-ok {
    color: var(--i64-success);
    margin: 0.15rem 0;
    font-size: 0.85rem;
}
.consistency-check-running {
    color: var(--pico-muted-color);
    margin: 0.15rem 0;
    font-size: 0.85rem;
    font-style: italic;
}
.consistency-check-running-icon {
    display: inline-block;
    animation: consistency-spin 1.2s linear infinite;
}
@keyframes consistency-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- Reports overview + parameter form --- */

.report-group-heading {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Parameter form: compact responsive grid; fields collapse to 1 column on
   narrow screens. The form-actions row is outside the grid so it always
   stretches full-width below the inputs. */
.report-param-form {
    margin-top: 0.75rem;
}

.report-param-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem 1rem;
    align-items: end;
    margin-bottom: 1rem;
}

/* PicoCSS gives labels a generous bottom margin; flatten inside the grid
   since gap already handles vertical spacing. */
.report-param-grid > label {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .report-param-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   Document detail view: extracted from inline styles
   (hv/routes/documents_detail_views.py — Phase 5.1)
   ===================================================================== */

/* Suggestions hint box shown above the edit form when AI heuristics
   detected entity / vendor candidates. */
.suggestion-hints-box {
    background: var(--pico-code-background-color);
    padding: 0.75rem 1rem;
    border-radius: var(--pico-border-radius);
    margin-bottom: 1rem;
}

.suggestion-hints-header {
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
}

/* Document picker (compliance "Zuordnen" modal): visible search input
   above a vertical list of buttons, one per candidate document. Each
   button is a full row that submits the assign form on click. No
   external library — the search filter runs as native JS oninput. */
.picker { display: flex; flex-direction: column; gap: 0.5rem; }
.picker-filter {
    width: 100%;
    font-size: 0.95rem;
    padding: 0.45rem 0.7rem;
}
.picker-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 4px;
}
.picker-item { margin: 0; padding: 0; }
.picker-item + .picker-item { border-top: 1px solid var(--pico-muted-border-color); }
.picker-item-form { margin: 0; }
.picker-item-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.55rem 0.8rem;
    background: transparent;
    color: inherit;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font: inherit;
    line-height: 1.3;
}
.picker-item-btn:hover,
.picker-item-btn:focus {
    background-color: var(--pico-secondary-background);
}
.picker-item-title {
    font-weight: 500;
    overflow-wrap: anywhere;
}
.picker-item-meta {
    color: var(--pico-muted-color);
    font-size: 0.82rem;
    display: block;
    margin-top: 0.15rem;
}
.picker-empty { padding: 1rem; text-align: center; }

/* Compliance report: collapsible master-data hint box above the table.
   Uses <details>, so no JS — lists buildings with missing heating/
   hot-water type that the deadline rules need. */
.compliance-stammdaten-hint {
    background-color: var(--i64-warning-bg);
    border-left: 4px solid var(--i64-warning);
    color: var(--i64-warning-fg);
    border-radius: 4px;
    padding: 0.6rem 1rem;
    margin: 0.6rem 0 1rem;
    font-size: 0.9rem;
}
.compliance-stammdaten-hint > summary {
    cursor: pointer;
    font-weight: 600;
    color: inherit;
}
.compliance-stammdaten-hint > summary .icon { vertical-align: text-bottom; }
.compliance-stammdaten-hint ul { margin: 0.4rem 0 0 1.2rem; padding: 0; }
.compliance-stammdaten-hint li { margin: 0.15rem 0; }
/* Top-of-page red banner for ClamAV-flagged documents. */
.malware-banner {
    background: var(--pico-del-color);
    color: var(--i64-on-color);
    padding: 0.75rem 1rem;
    border-radius: var(--pico-border-radius);
    margin-bottom: 1rem;
    font-weight: 600;
}

/* Yellow info box shown when a doc has AC/BE attached but doc.amount is
   NULL (orphan-warning, see _document_cost_section). */
.orphan-warning-box {
    background: var(--pico-mark-background-color);
    padding: 0.5rem 0.75rem;
    border-radius: var(--pico-border-radius);
    margin: 0 0 0.6rem;
}

/* Σ / Rest status colors for AC / BE blocks. */
.cost-status-ok    { color: var(--i64-success); font-weight: 600; }
.cost-status-warn  { color: var(--i64-warning); font-weight: 600; }
.cost-status-over  { color: var(--i64-danger);  font-weight: 600; }
.cost-status-muted { color: var(--pico-muted-color); }

/* H2 inside the AC / BE / suggestion sub-blocks (block-flat sections). */
.cost-section-h2 {
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
}
.cost-section-h2--spaced {
    font-size: 1.1rem;
    margin: 1rem 0 0.6rem;
}

/* Spacing for the summary line ("Σ AC: x · Doc-Betrag: y · Rest …"). */
.cost-section-summary {
    margin: 0.4rem 0;
}

/* Italic note shown when Σ AC/BE exceeds doc amount. */
.cost-overcommit-note {
    margin: 0.4rem 0 0;
    font-style: italic;
}

/* Spacing wrapper for the cost section container + its inner AC/BE blocks. */
.doc-cost-section { margin-top: 1.5rem; }
.doc-cost-block   { margin-top: 1rem; }

/* Cost-type colour coding: the three short tables on the document detail page
   look alike but mean very different things. A left stripe + subtle tint tells
   them apart at a glance — green = umlegbare NK (comes back from tenants),
   orange = Firma/Unternehmenskosten (owner bears it), grey = Bankbewegung
   (neutral cashflow fact). */
.doc-cost-block--nk,
.doc-cost-block--firma,
.doc-cost-block--bank {
    border-left: 4px solid var(--cost-stripe, var(--i64-gray-400));
    padding: 0.5rem 0.75rem 0.6rem 0.9rem;
    background: var(--cost-tint, transparent);
    border-radius: 0 4px 4px 0;
}
/* Same category tokens as the booking type-pills, so a cost reads identically
   here and in the Bankbuchungstabelle: NK, Firma, neutral Bankbewegung — soft
   accents, never a status colour. */
.doc-cost-block--nk    { --cost-stripe: var(--i64-cat-nk);      --cost-tint: color-mix(in srgb, var(--i64-cat-nk) 7%, transparent); }
.doc-cost-block--firma { --cost-stripe: var(--i64-cat-firma);   --cost-tint: color-mix(in srgb, var(--i64-cat-firma) 8%, transparent); }
.doc-cost-block--bank  { --cost-stripe: var(--i64-cat-neutral); --cost-tint: color-mix(in srgb, var(--i64-cat-neutral) 7%, transparent); }
/* Matching heading swatch: a small square in the stripe colour. */
.doc-cost-block--nk    > .cost-section-h2::before,
.doc-cost-block--firma > .cost-section-h2::before,
.doc-cost-block--bank  > .cost-section-h2::before {
    content: "";
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 2px;
    margin-right: 0.45rem;
    vertical-align: baseline;
    background: var(--cost-stripe);
}

/* Cost-sum pills that replace the plain "Kosten" section tab: identical size to
   the sibling tabs (they inherit .section-nav a), only tinted per category. */
.section-nav a.cost-nav-pill {
    border-color: color-mix(in srgb, var(--cnp) 40%, transparent);
    background: color-mix(in srgb, var(--cnp) 12%, transparent);
    color: var(--cnp);
}
.section-nav a.cost-nav-pill:hover {
    border-color: var(--cnp);
    color: var(--cnp);
}
.cost-nav-pill--nk    { --cnp: var(--i64-cat-nk); }
.cost-nav-pill--firma { --cnp: var(--i64-cat-firma); }

/* Cashflow status tint on the 'Buchung' tab — pure colour signal (details live
   in the section below): green complete / orange partial / red missing/over. */
.section-nav a.buchung-tab {
    border-color: color-mix(in srgb, var(--bt) 45%, transparent);
    background: color-mix(in srgb, var(--bt) 12%, transparent);
    color: var(--bt);
}
.section-nav a.buchung-tab:hover { border-color: var(--bt); color: var(--bt); }
.buchung-tab--ok      { --bt: var(--i64-success); }
.buchung-tab--partial { --bt: var(--i64-warning); }
.buchung-tab--over,
.buchung-tab--missing { --bt: var(--i64-danger); }

/* Match-reason tags in the "Ähnliche Kostenpositionen" table. */
.similar-match-tags { display: flex; gap: 0.3rem; flex-wrap: wrap; }

/* Collapsible "Ähnliche Kostenpositionen" — summary styled like the H3 it
   replaced; collapsed by default so it doesn't crowd the detail page. */
#actual-cost-similar > .similar-costs-summary {
    cursor: pointer;
    font-size: 1.17em;
    font-weight: 600;
    margin-bottom: 0;
}
#actual-cost-similar[open] > .similar-costs-summary { margin-bottom: 0.75rem; }

/* AC detail: hero card (left) + Beleg preview (right), stacking on narrow. */
.ac-detail-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}
@media (max-width: 900px) {
    .ac-detail-cols { grid-template-columns: 1fr; }
}
.ac-detail-side { min-width: 0; }
/* Hero card scrolls along with the (taller) Beleg preview instead of leaving
   white space beside it. Sticky top clears the sticky breadcrumb header above
   (cf. [id] scroll-margin-top). Two-column only — pointless when stacked. */
@media (min-width: 901px) {
    .ac-detail-main {
        position: sticky;
        top: 11rem;
        align-self: start;
    }
}
.ac-beleg-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.ac-beleg-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
    word-break: break-all;
}

/* Action buttons at the bottom of a cost block sit bottom-right. */
.doc-cost-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

/* Right panel: preview thumbnail image. */
.doc-preview-img {
    max-width: 100%;
    border-radius: var(--pico-border-radius);
    box-shadow: var(--i64-shadow-sm);
    cursor: zoom-in;
}

/* Fullscreen PDF preview viewer (zoom + pan) */
.doc-lightbox {
    position: fixed;
    inset: 0;
    /* Above nav-bar (2000) and nav-dropdown-content (3000); below global-search
       (4000) and AI modal (9999) so those still trump it if opened. */
    z-index: 3100;
    background: var(--i64-lightbox-bg);
    display: none;
}
.doc-lightbox.open { display: block; }
body.doc-lightbox-lock { overflow: hidden; }
.doc-lightbox-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* Own stacking context below the controls (z-index >= 2): however far the
       image is zoomed/panned, it can never paint over the toolbar or nav. */
    z-index: 1;
}
/* Reserve the left gutter for the thumbnail strip when the doc is multi-page. */
.doc-lightbox.has-thumbs .doc-lightbox-stage { left: 132px; }
.doc-lightbox.has-thumbs .doc-lb-prev { left: 146px; }
#doc-lightbox-img {
    /* Fixed box + contain: low-res and HD render at the *same* displayed size
       (same aspect ratio), so the HD swap is a sharpness change with no size
       jump — even on large screens where the low-res natural size is smaller
       than the viewport. */
    width: 94vw;
    height: 92vh;
    object-fit: contain;
    transform-origin: center center;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
}
#doc-lightbox-img:active { cursor: grabbing; }
.doc-lightbox-bar {
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 2;
    display: flex;
    gap: 8px;
}
/* Scoped under .doc-lightbox so it wins over a.material-icons-outlined
   { color: inherit } — otherwise the download <a> icon renders dark. */
.doc-lightbox .doc-lb-btn,
.doc-lightbox .doc-lb-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    color: var(--i64-lightbox-fg);
    background: var(--i64-lightbox-ctrl);
}
.doc-lightbox .doc-lb-btn:hover,
.doc-lightbox .doc-lb-page:hover { background: var(--i64-lightbox-ctrl-hover); }
.doc-lightbox .doc-lb-btn {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    font-size: 22px;
}
.doc-lightbox .doc-lb-page {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 48px;
    height: 68px;
    border-radius: 8px;
    font-size: 32px;
}
.doc-lb-prev { left: 14px; }
.doc-lb-next { right: 14px; }
.doc-lb-pageinfo {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    padding: 4px 14px;
    border-radius: 14px;
    background: var(--i64-overlay);
    color: var(--i64-lightbox-fg);
    font-size: 0.9rem;
}
.doc-lb-hd {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    padding: 4px 12px;
    border-radius: 12px;
    background: var(--i64-overlay);
    color: var(--i64-lightbox-fg);
    font-size: 0.8rem;
}
/* Left-hand vertical page-thumbnail strip (multi-page docs). */
.doc-lb-thumbs {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 132px;
    z-index: 2;
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 12px 10px;
    overflow-y: auto;
    background: var(--i64-overlay);
}
.doc-lightbox.has-thumbs .doc-lb-thumbs { display: flex; }
/* Keep each thumbnail its natural page height: in the fixed-height column flex
 * a default flex-shrink squeezes many pages into slivers ("just a line"), which
 * also drops every tile into the viewport so lazy-loading fires all previews at
 * once and saturates the single worker. flex:0 0 auto stops the squeeze; the
 * aspect-ratio reserves A4 height BEFORE the lazy image loads, so only the few
 * visible thumbnails are fetched. */
.doc-lb-thumb-item { flex: 0 0 auto; }
.doc-lb-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1.414;
    object-fit: contain;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    background: var(--i64-lightbox-paper);
}
.doc-lb-thumb:hover { border-color: var(--i64-lightbox-ctrl-hover); }
.doc-lb-thumb.active { border-color: var(--i64-primary); }
.doc-lb-thumb-num {
    text-align: center;
    color: var(--i64-lightbox-fg);
    font-size: 0.7rem;
    line-height: 1.4;
}

/* Caption under the spinner shown while a preview is being generated. */
.preview-pending-msg {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    opacity: 0.7;
}

/* OCR text block header + the <pre> that holds the extracted text. */
.ocr-text-header {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.ocr-text-pre {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.82em;
    max-height: 600px;
    overflow-y: auto;
    background: var(--pico-code-background-color);
    padding: 0.75rem;
    border-radius: var(--pico-border-radius);
    user-select: text;
    cursor: text;
}

/* Entity-assignment row at the bottom of the document edit form. */
.assignment-section-label {
    font-weight: 600;
    margin: 1.5rem 0 0.5rem 0;
    border-top: 1px solid var(--pico-muted-border-color);
    padding-top: 1rem;
}

.assignment-entity-select {
    margin-bottom: 0.5rem;
}

/* Inline warning shown directly under a form field — needs to overlap
   PicoCSS's default field bottom margin to look attached. */
.form-field-warning {
    margin-top: -0.75rem;
    margin-bottom: 1rem;
}

.normalize-filename-hint {
    display: block;
    margin-top: 0.25rem;
}

/* Classifier pills row above the edit form. */
.pills-row {
    margin-bottom: 1rem;
}

/* =====================================================================
   Document tx section: "Bankbewegungen zum Beleg"
   (hv/routes/documents_tx_section.py — Phase 5.2)
   ===================================================================== */

/* Sub-section headings (Candidates, Manual link) — smaller than the
   section H2 since they live inside the section card. */
.tx-subsection-h3 {
    font-size: 1rem;
    margin: 1rem 0 0.5rem;
}

/* Right-side icon-action cell (open in finance + unlink) — keeps the
   icons on one line so they don't wrap below each other. */
.tx-action-cell {
    white-space: nowrap;
}

/* Heuristic-candidate row checkbox: flush against the cell padding so
   it lines up with the other rows' cell content. */
.tx-candidate-checkbox-cell { width: 2rem; }
.tx-candidate-checkbox      { margin: 0; }

/* Top-match row (Tx amount equals doc amount): faint highlight to make
   the strongest match visible at a glance. Works in light + dark mode
   because var(--i64-success-bg) carries themed alpha. */
tr.tx-candidate-top-match {
    background: var(--i64-success-bg);
}
td.tx-amount-match {
    font-weight: 600;
}
.tx-match-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.75rem;
    color: var(--i64-success);
    vertical-align: middle;
}
.tx-match-badge .material-icons-outlined {
    font-size: 0.95rem;
}

/* Purpose preview shown under the counterpart name in the candidate
   table — forces its own line below the bold counterpart row. */
.tx-purpose-line { display: block; }

/* Manual link form: full-width search field on its own line, then a
   notes input + submit button on a flexible row below it. */
.tx-manual-search { width: 100%; }

.tx-manual-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.5rem;
}

.tx-manual-notes  { flex: 1 1 auto; min-width: 10rem; }
.tx-manual-submit { width: auto; flex: 0 0 auto; }

/* Foto → Galerie verschieben (document detail): target select, tag input
   and submit share one flexible row. */
.gallery-move-form {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}
.gallery-move-form select { flex: 2 1 16rem; margin-bottom: 0; }
.gallery-move-form input  { flex: 1 1 10rem; margin-bottom: 0; }
.gallery-move-form button { width: auto; flex: 0 0 auto; margin-bottom: 0; }

/* =====================================================================
   Finance — Storno-Finder (hv/routes/finance_storno.py — Phase 5.3)
   ===================================================================== */

/* Filter bar at the top of /finance/storno: account select + days input
   side-by-side, label+input stacked vertically inside each control. */
.storno-filter-form {
    display: flex;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1rem;
}

.storno-filter-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* Tx pair table: two side-by-side columns (Tx A / Tx B), each rendering
   counterpart, amount, purpose, and badges stacked vertically. */
.storno-tx-cell      { max-width: 24rem; }
.storno-counterpart  { font-weight: 500; max-width: 18rem; }
.storno-purpose-row  { max-width: 24rem; margin-top: 0.2rem; }
.storno-badge-row    { margin-top: 0.25rem; }

/* Middle "↕" divider column between Tx A and Tx B. */
.storno-divider-col  { width: 80px; }
.storno-divider-cell { text-align: center; vertical-align: middle; }
.storno-divider-icon { font-size: 1.4rem; }
.storno-diff-days    { font-size: 0.75rem; }

/* Spaced form-actions row under the table for the ignore-button. */
.form-actions-spaced { margin-top: 1rem; }

/* "Hinweis" Small element forced onto its own line inside the muted
   paragraph above the filter bar. */
.storno-hint-line { display: block; }

/* =====================================================================
   Finance — Expense expected-template form
   (hv/routes/expenses_views.py — Phase 5.4)
   ===================================================================== */

/* "Quell-Buchung" card shown above the form when creating an expected
   expense template from an existing bank transaction. */
.expense-source-card {
    padding: 0.9rem 1rem;
    background: var(--pico-card-background-color);
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 6px;
    margin-bottom: 1rem;
}

.expense-source-header {
    margin: 0 0 0.5rem 0;
    font-weight: 600;
    font-size: 0.95rem;
}

.expense-source-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.5rem 1.25rem;
    margin-bottom: 0.75rem;
}

/* Field-label Small inside the source-card grid cells (and the
   purpose-hint Small below it) — block + tight bottom margin so the
   value sits directly under the label. */
.field-label-block {
    display: block;
    margin-bottom: 0.25rem;
}

/* IBAN display: monospace so digit groups line up. */
.iban-display {
    font-family: monospace;
    font-size: 0.9rem;
}

/* Auto-categorize Label that wraps an inline checkbox + hint Small —
   needs flex so checkbox and label text align on the same line. */
.expense-checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    cursor: pointer;
}

/* Match-history table: keep the tx cell narrow enough that the row
   doesn't grow too wide; the tx label/title is truncated inside. */
.expense-tx-cell { max-width: 18rem; }

/* @mention markup inside rendered notes: colored line + end-of-line toggle.
   - .notes-line-open: line text in warm orange (offene Aufgabe).
   - .notes-line-acked: line text in green (erledigt).
   - .mention-tag inherits the line color so "@Stefan" matches.
   - Toggle-Button am Zeilen-Ende ist eine tiny icon-pill. */
.notes-display { white-space: normal; }
.notes-line { min-height: 1.2em; }
.notes-line-open { color: var(--i64-warning-dark); }
.notes-line-acked { color: var(--i64-success-dark); }
.notes-line-removed {
    color: var(--pico-muted-color);
    text-decoration: line-through;
}
.notes-line-acked .mention-tag,
.notes-line-open .mention-tag { color: inherit; }
.mention-tag {
    color: var(--i64-primary);
    text-decoration: none;
    font-weight: 600;
}
.mention-tag:hover { text-decoration: underline; }
/* MD-light links inside notes (http(s) autolink + [label](url)). Break long
   URLs so they don't overflow narrow detail-card columns. */
.notes-link { word-break: break-word; }
.mention-status {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.05rem 0.5rem;
    border-radius: 1rem;
    border: none;
    cursor: pointer;
    line-height: 1.4;
    margin-left: 0.25rem;
    vertical-align: baseline;
}
.mention-status.mention-open {
    background: var(--i64-warning);
    color: var(--i64-on-color);
}
.mention-status.mention-acked {
    background: var(--i64-success);
    color: var(--i64-on-color);
}
.mention-status.mention-removed {
    background: var(--pico-muted-color);
    color: var(--i64-on-color);
    cursor: default;
}
.mention-status:hover { filter: brightness(1.1); }
.mention-status.mention-removed:hover { filter: none; }

/* Label-Zeile mit rechtsbündigem (i)-Icon: Text links, Icon rechts auf
   gleicher Höhe direkt über dem Widget — sodass der Hint klar dem
   darunterliegenden Input zugeordnet ist. */
.field-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

/* (i) Info-Icon: kleines Material-Icon, per Pico-`data-tooltip` als
   Hover-/Focus-Tooltip. Spart das lange ``Small``-Hinweis-Pattern.
   Pico setzt auf [data-tooltip] eine gepunktete Unterstreichung — die
   passt zu Inline-Text-Anchors, nicht zu einem freistehenden Icon.
   Spezifischere Selektoren überschreiben das pico-default-Verhalten. */
[data-tooltip].field-info-icon,
[data-tooltip].field-info-icon:focus,
[data-tooltip].field-info-icon:hover {
    display: inline-flex;
    vertical-align: middle;
    cursor: help;
    color: var(--pico-muted-color);
    outline: none;
    text-decoration: none;
    border-bottom: 0;
}
.field-info-icon .material-icons-outlined,
.field-info-icon .material-icons {
    font-size: 1.05em;
    line-height: 1;
}
[data-tooltip].field-info-icon:hover,
[data-tooltip].field-info-icon:focus { color: var(--pico-primary); }

/* Pico-Tooltip-Bubble auf mehrzeilig + sinnvolle Breite überschreiben.
   Default ist ``white-space: nowrap`` → lange Texte werden links aus
   dem Viewport geschoben. */
[data-tooltip].field-info-icon::before {
    white-space: pre-wrap;
    width: max-content;
    max-width: min(22rem, 80vw);
    text-align: left;
}

/* „×"-Button am Zeilenende: entfernt die acked Mention-Zeile aus
   dem Notes-Text. Optisch dezent (kein Vollton-Background), aber
   eindeutig als Aktion erkennbar. */
.mention-remove {
    display: inline-block;
    font-size: 0.8rem;
    line-height: 1;
    padding: 0.05rem 0.4rem;
    margin-left: 0.4rem;
    border: 1px solid var(--pico-muted-border-color);
    border-radius: 0.25rem;
    background: transparent;
    color: var(--i64-muted);
    cursor: pointer;
    vertical-align: baseline;
}
.mention-remove:hover {
    color: var(--i64-danger);
    border-color: var(--i64-danger);
    background: transparent;
}

/* Aktions-Zelle in /mentions/<tag>: Toggle + optionaler Remove-Button
   nebeneinander, kompakt. */
.mention-actions-cell {
    white-space: nowrap;
    width: 1%;
}
.mention-actions-cell .mention-remove {
    margin-left: 0.3rem;
}

/* Dashboard open-mentions card: top-3 tags inline, count rechts. */
.dashboard-widget-card-mentions .open-mentions-header {
    display: block;
    text-decoration: none;
    color: inherit;
}
.dashboard-widget-card-mentions .open-mentions-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0.15rem 0;
    text-decoration: none;
    color: inherit;
    padding: 0.1rem 0;
}
.dashboard-widget-card-mentions .open-mentions-row:hover .open-mentions-tag {
    text-decoration: underline;
}
.dashboard-widget-card-mentions .open-mentions-tag {
    color: var(--i64-primary-dark);
}
.dashboard-widget-card-mentions .open-mentions-count {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--i64-gray-700);
}
.dashboard-widget-card-mentions .open-mentions-more {
    margin: 0.15rem 0;
}

/* Shoulder-surfing guard: blur sensitive values until clicked.
 * Bewusst unauffällig — kein Cursor-Wechsel, kein eigener Block, kein
 * Hover-Hint. Wer den Wert kennt, klickt drauf; sonst fällt es kaum auf,
 * dass etwas versteckt ist. Kein Sicherheitsmechanismus.
 * JS toggles `.revealed` on click (see static/hv.js). */
.sensitive {
    filter: blur(6px);
    transition: filter 0.18s ease;
}
.sensitive.revealed {
    filter: none;
}

/* Profil-Seite: mehr Luft zwischen den Abschnitten (Passwort,
   Benachrichtigungen, Mobile-Upload). */
h2.profile-section {
    margin-top: 1.5rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--i64-gray-100);
}

/* ---- Image gallery ---- */
.gallery-tile { position: relative; }
.gallery-tile-link { display: block; }
.gallery-tile-actions {
  position: absolute; top: .25rem; right: .25rem; display: none; gap: .15rem;
  background: var(--i64-overlay); border-radius: .35rem; padding: .15rem;
}
.gallery-tile:hover .gallery-tile-actions { display: flex; }
.gallery-tile-actions .icon-btn,
.gallery-tile-actions form { color: var(--i64-on-color); }
.gallery-badge {
  position: absolute; bottom: .3rem; left: .3rem; font-size: .7rem;
  background: var(--i64-overlay-strong); color: var(--i64-on-color); padding: .1rem .4rem; border-radius: .3rem;
}
.gallery-badge--fav { left: auto; right: .3rem; color: gold; background: none; }
.gallery-play-overlay {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 3rem; color: var(--i64-on-color);
  text-shadow: 0 0 12px var(--i64-overlay-strong); pointer-events: none;
}
.gallery-filter-bar { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0; }
.gallery-chip {
  padding: .2rem .7rem; border: 1px solid var(--pico-muted-border-color);
  border-radius: 1rem; font-size: .85rem; cursor: pointer; text-decoration: none;
}
.gallery-chip.active { background: var(--pico-primary); color: var(--pico-primary-inverse); }
.gallery-upload-zone {
  border: 2px dashed var(--pico-muted-border-color); border-radius: .5rem;
  padding: 1.25rem; text-align: center; cursor: pointer; margin-bottom: .75rem;
}
.gallery-upload-zone.drag-over { border-color: var(--pico-primary); }
.gallery-upload-input { display: none; }
.gallery-upload-progress { display: none; width: 100%; margin: -.25rem 0 .75rem; }
.gallery-upload-progress.active { display: block; }
.gallery-empty { color: var(--pico-muted-color); padding: 1rem 0; }
.gallery-preview-strip { display: flex; gap: .4rem; flex-wrap: wrap; }
.gallery-preview-thumb img {
  width: 84px; height: 84px; object-fit: cover; border-radius: .35rem;
}
.section-header-row { display: flex; justify-content: space-between; align-items: baseline; }

/* Unit gallery — Exposé texts (ImmoScout copy&paste template) */
.expose-section {
  margin-top: 1.25rem; border: 1px solid var(--pico-muted-border-color);
  border-radius: 6px;
}
.expose-section > summary { cursor: pointer; padding: 0.55rem 0.85rem; }
.expose-section[open] > summary { border-bottom: 1px solid var(--pico-muted-border-color); }
.expose-summary-hint { margin-left: 0.6rem; font-size: 0.85em; color: var(--pico-muted-color); }
.expose-section > form { padding: 0.75rem 0.85rem 0.85rem; margin-bottom: 0; }
.expose-field { margin-bottom: 0.9rem; }
.expose-field textarea { margin-bottom: 0; font-size: 0.92em; }
.expose-field-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.25rem;
}
.expose-field-label { font-weight: 600; font-size: 0.92em; }
.expose-shared-hint {
  margin-right: auto; margin-left: 0.6rem; font-size: 0.8em;
  color: var(--pico-muted-color); display: inline-flex; align-items: center; gap: 0.15rem;
}
.expose-shared-hint i { font-size: 1.1em; }
.expose-field-actions { display: flex; gap: 0.3rem; align-items: center; }
.expose-field-actions .icon-btn span { font-size: 0.85em; margin-left: 0.15rem; }
.expose-ai-btn.htmx-request { opacity: 0.5; pointer-events: none; }
.expose-ai-suggestion {
  margin-top: 0.4rem; padding: 0.55rem 0.75rem; font-size: 0.92em;
  border: 1px solid var(--pico-muted-border-color);
  border-left: 3px solid var(--i64-primary); border-radius: 4px;
  background: var(--pico-card-sectioning-background-color);
}
.expose-ai-heading {
  font-size: 0.85em; font-weight: 600; color: var(--pico-muted-color);
  margin-bottom: 0.3rem;
}
.expose-ai-text { white-space: pre-wrap; }
.expose-ai-diff .diff-del {
  color: var(--i64-danger); text-decoration: line-through;
  background: color-mix(in srgb, var(--i64-danger) 12%, transparent);
  border-radius: 2px;
}
.expose-ai-diff .diff-ins {
  color: var(--i64-success-fg);
  background: color-mix(in srgb, var(--i64-success) 15%, transparent);
  border-radius: 2px;
}
.expose-ai-suggestion-actions { margin-top: 0.4rem; display: flex; gap: 0.5rem; }
.expose-ai-error { border-left-color: var(--i64-danger); color: var(--i64-danger); }
.expose-ai-error p { margin: 0; color: inherit; }
.expose-ai-notice { border-left-color: var(--i64-success); }
.expose-ai-notice p { margin: 0; color: var(--pico-muted-color); }
.expose-actions { display: flex; align-items: center; gap: 0.75rem; }
.expose-actions button { margin-bottom: 0; width: auto; }
.expose-saved { color: var(--i64-success); font-size: 0.9em; display: inline-flex; align-items: center; gap: 0.2rem; }

/* Lease detail — Betriebskostenabrechnungen (Ist) section */
.ub-details { display: block; margin-top: 0.5rem; border: 1px solid var(--pico-muted-border-color); border-radius: 6px; }
.ub-details > summary { cursor: pointer; padding: 0.55rem 0.85rem; }
.ub-details[open] > summary { border-bottom: 1px solid var(--pico-muted-border-color); }
.ub-summary > strong { display: inline-block; min-width: 3rem; }
.ub-summary > * + * { margin-left: 1.5rem; }
.ub-panel { padding: 0.5rem 0.85rem 0.85rem; }
.ub-beleg { margin: 0.4rem 0; }
.ub-orig { display: block; font-size: 0.8em; }

/* AllocationKey values editor (Umlageschlüssel-Werte) */
.values-autofill-bar {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.values-autofill-bar select { margin: 0; }
.cell-input {
  width: 100%; margin: 0; padding: 0.25rem 0.4rem;
  font-size: 0.9em; min-width: 6ch;
}
td .cell-input.num { text-align: right; }

/* AllocationKey values editor — bulk bar (Phase 2c) */
.values-bulk-bar {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 0.6rem 0.75rem; margin-bottom: 0.75rem;
  border: 1px solid var(--pico-muted-border-color); border-radius: 6px;
  background: var(--pico-card-sectioning-background-color);
}
.values-bulk-scope, .values-bulk-ops {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.values-bulk-scope select, .values-bulk-ops select { margin: 0; width: auto; }
.values-only-empty { display: inline-flex; align-items: center; gap: 0.25rem; }
.values-row-check { margin: 0; }

/* AllocationKey values editor — distribution preview (Phase 2d) */
.values-summary {
  display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: baseline;
  margin: 0.6rem 0 0.25rem; padding: 0.5rem 0.75rem;
  border-top: 2px solid var(--pico-muted-border-color);
}
.values-sum-total { font-weight: 600; white-space: nowrap; }
.values-sum-preview { color: var(--pico-muted-color); font-size: 0.9em; }

/* Session-lock overlay (session-guard.js): expired session, re-auth in place */
.session-lock-overlay {
    position: fixed;
    inset: 0;
    background: var(--i64-overlay);
    backdrop-filter: blur(3px);
    z-index: 10000;  /* above sticky headers (900) and search overlay (4000) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.session-lock-card {
    width: min(420px, 94vw);
    background: var(--pico-card-background-color);
    border: 1px solid var(--i64-gray-300);
    border-radius: 12px;
    box-shadow: var(--i64-shadow-lg);
    padding: 1.4rem 1.5rem 1rem;
}

.session-lock-card h2 {
    margin-bottom: 0.5rem;
}

.session-lock-card p {
    color: var(--pico-muted-color);
    font-size: 0.92em;
}

.session-lock-error {
    color: var(--i64-danger);
    font-size: 0.92em;
    margin-bottom: 0.75rem;
}

.session-lock-fallback {
    text-align: center;
    font-size: 0.85em;
    margin-bottom: 0;
}

/* OAuth re-login button (popup flow) below the password form. */
.session-lock-oauth {
    width: 100%;
    margin-bottom: 0.75rem;
}

/* ---- Tenant NK audit view (public, token-authorized receipt inspection) ---- */
.nk-audit-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}
.nk-audit-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 0.2rem;
    border-bottom: 1px solid var(--i64-gray-300);
    margin-bottom: 1.4rem;
}
.nk-audit-bar .nav-logo { height: 32px; }
.nk-audit-bar .nav-title { font-weight: 600; font-size: 1.1rem; }
.nk-audit-header { margin-bottom: 1.4rem; }
.nk-audit-header h3 { margin-bottom: 0.2rem; }
.nk-audit-subtitle { font-weight: 600; color: var(--i64-primary); margin: 0 0 0.4rem; }
.nk-audit-hint { color: var(--i64-gray-500); font-size: 0.92rem; margin: 0; }
/* Responsive receipt grid; large tap targets for kiosk use. */
.nk-audit-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.1rem;
}
.nk-audit-card { margin: 0; }
.nk-audit-thumb {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: contain;
    object-position: center top;
    background: var(--i64-on-color);
    border: 1px solid var(--i64-gray-300);
    border-radius: 6px;
    cursor: pointer;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.nk-audit-thumb:hover {
    border-color: var(--i64-primary);
    box-shadow: var(--i64-shadow-md);
}
.nk-audit-caption {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--i64-gray-600);
    text-align: center;
    word-break: break-word;
}
.nk-audit-footer { margin-top: 2.5rem; text-align: center; color: var(--i64-gray-400); font-size: 0.8rem; }

/* Admin: per-settlement audit-link control on the lease detail (layout only). */
.ub-audit-link { margin-top: 0.9rem; }
.ub-audit-url-row { display: flex; gap: 0.4rem; align-items: center; margin: 0.3rem 0; }
.ub-audit-url { flex: 1; font-family: monospace; font-size: 0.82rem; }
.ub-audit-url-row .secondary { flex: 0 0 auto; }
.ub-audit-revoke { --pico-font-size: 0.8rem; }