/**
 * @file finanzen.css
 * @description Styles for the overhauled Finanzen page - clean, functional, minimal
 * @last_updated 2025-12-22 - Added review detail modal styles for e-Rechnung display
 *
 * LAYOUT PHILOSOPHY:
 * - Single padding layer at .finanzen-container level
 * - Glass cards inside use minimal/zero padding (content controls its own spacing)
 * - Full width utilization with intelligent max-width constraints
 * - Responsive: padding decreases, content fills available space
 */

/* ========================================
   PAGE LAYOUT
   ======================================== */

body[data-page="finanzen"] {

    min-height: 100vh;
    margin: 0;
}



/* Main content layout */
body[data-page="finanzen"] .main-content {

    min-height: 100vh;
    padding-left: 2em;
    padding-right: 2em;
}




/*
 * FINANZEN CONTAINER - The ONLY padding layer
 * Minimal padding - let content use full available width
 */
body[data-page="finanzen"] .finanzen-container {

    /* Balanced horizontal padding for visual centering */
    padding: 1em 2em;

    /* Full width, no max constraint (table needs horizontal space) */
    max-width: none;
    width: 100%;

    /* Smooth transitions when sidebar toggles */
    transition: padding 0.3s ease;
}




/*
 * GLASS CARDS inside finanzen - minimal padding
 * Content controls its own internal spacing
 */
body[data-page="finanzen"] .finanzen-container > .glass-card,
body[data-page="finanzen"] .tab-content .glass-card {

    padding: 0.75rem;
}



/* Tab panels need no extra padding */
body[data-page="finanzen"] .tab-panel {

    padding: 0;
}



/* Summary cards - compact padding */
body[data-page="finanzen"] .summary-card.glass-card {

    padding: 0.625rem 0.75rem;
}



/* Table containers - no padding, table handles it */
body[data-page="finanzen"] .nebenkosten-table-container.glass-card {

    padding: 0;
}



/* Content sections inside glass cards */
body[data-page="finanzen"] .glass-card .review-list,
body[data-page="finanzen"] .glass-card .transactions-content,
body[data-page="finanzen"] .glass-card .reconciliation-content {

    padding: 0.5rem;
}



/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 64em) {

    body[data-page="finanzen"] .finanzen-container {

        padding: 0.75em 1em;
    }


}


@media (max-width: 48em) {

    /* On mobile, no left margin needed */
    body[data-page="finanzen"] .main-content {

        margin-left: 0;
    }



    body[data-page="finanzen"] .finanzen-container {

        padding: 0.5em 0.75em;
    }



    body[data-page="finanzen"] .finanzen-container > .glass-card,
body[data-page="finanzen"] .tab-content .glass-card {

        padding: 0.5rem;
    }


}


/* ========================================
   PAGE HEADER
   ======================================== */

body[data-page="finanzen"] .finanzen-header {

    margin-bottom: 1.5rem;
}



/* ========================================
   NAVIGATION TABS
   ======================================== */

body[data-page="finanzen"] .finanzen-nav {

    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.25rem;
    background: var(--glass-secondary, rgba(255,255,255,0.06));
    border-radius: 0.75rem;
    overflow-x: auto;
}



body[data-page="finanzen"] .finanzen-nav-tab {

    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-secondary, rgba(255,255,255,0.6));
    cursor: pointer;
    border-radius: 0.5rem;
    transition: all 0.2s;
    white-space: nowrap;
    font-family: var(--font-sans);
    font-size: 0.875rem;
}



body[data-page="finanzen"] .finanzen-nav-tab:hover {

    background: var(--glass-hover, rgba(255,255,255,0.08));
    color: var(--text-primary, rgba(255,255,255,0.9));
}



body[data-page="finanzen"] .finanzen-nav-tab.active {

    background: var(--glass-hover, rgba(255,255,255,0.12));
    color: var(--text-primary, rgba(255,255,255,0.95));
}



body[data-page="finanzen"] .finanzen-nav-tab .nav-icon {

    display: flex;
    opacity: 0.7;
}



body[data-page="finanzen"] .finanzen-nav-tab.active .nav-icon {

    opacity: 1;
}



body[data-page="finanzen"] .finanzen-nav-tab .nav-badge {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    background: var(--ios-system-orange, #FF9500);
    color: var(--text-primary);
    border-radius: 999px;
}



body[data-page="finanzen"] .finanzen-nav-tab .nav-badge:empty,
body[data-page="finanzen"] .finanzen-nav-tab .nav-badge[data-count="0"] {

    display: none;
}



@media (max-width: 640px) {

    body[data-page="finanzen"] .finanzen-nav-tab .nav-label {

        display: none;
    }


    body[data-page="finanzen"] .finanzen-nav-tab {

        padding: 0.75rem;
    }


}

/* Nav tabs - Light themes (dark text for contrast) */
[data-theme="light"] body[data-page="finanzen"] .finanzen-nav-tab,
body[data-theme="light"][data-page="finanzen"] .finanzen-nav-tab,
[data-theme="lightmodern"] body[data-page="finanzen"] .finanzen-nav-tab,
body[data-theme="lightmodern"][data-page="finanzen"] .finanzen-nav-tab {
    color: rgba(0, 0, 0, 0.55);
}

[data-theme="light"] body[data-page="finanzen"] .finanzen-nav-tab:hover,
body[data-theme="light"][data-page="finanzen"] .finanzen-nav-tab:hover,
[data-theme="lightmodern"] body[data-page="finanzen"] .finanzen-nav-tab:hover,
body[data-theme="lightmodern"][data-page="finanzen"] .finanzen-nav-tab:hover {
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.8);
}

[data-theme="light"] body[data-page="finanzen"] .finanzen-nav-tab.active,
body[data-theme="light"][data-page="finanzen"] .finanzen-nav-tab.active,
[data-theme="lightmodern"] body[data-page="finanzen"] .finanzen-nav-tab.active,
body[data-theme="lightmodern"][data-page="finanzen"] .finanzen-nav-tab.active {
    background: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.9);
}

[data-theme="light"] body[data-page="finanzen"] .finanzen-nav-tab .nav-badge,
body[data-theme="light"][data-page="finanzen"] .finanzen-nav-tab .nav-badge,
[data-theme="lightmodern"] body[data-page="finanzen"] .finanzen-nav-tab .nav-badge,
body[data-theme="lightmodern"][data-page="finanzen"] .finanzen-nav-tab .nav-badge {
    color: var(--button-text-on-color);
}

/* ========================================
   TAB CONTENT
   ======================================== */

body[data-page="finanzen"] .finanzen-tab-content {

    display: none;
}



body[data-page="finanzen"] .finanzen-tab-content.active {

    display: block;
}



/* ========================================
   REVIEW QUEUE TAB
   ======================================== */

body[data-page="finanzen"] .review-header {

    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.08));
}



body[data-page="finanzen"] .review-queue {

    min-height: 200px;
}



body[data-page="finanzen"] .review-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(52, 199, 89, 0.03) 100%);
    border-radius: 1rem;
    margin: 1rem;
}

body[data-page="finanzen"] .review-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg,
        rgba(52, 199, 89, 0.15) 0%,
        rgba(48, 209, 88, 0.1) 100%);
    border: 2px solid rgba(52, 199, 89, 0.2);
}

body[data-page="finanzen"] .review-empty-icon svg {
    width: 28px;
    height: 28px;
    color: var(--ios-system-green, #34C759);
}

body[data-page="finanzen"] .review-empty-icon .animate-spin {
    animation: spin 1.5s linear infinite;
    color: var(--ios-system-orange);
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

body[data-page="finanzen"] .review-empty p {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary, rgba(255, 255, 255, 0.9));
    margin-bottom: 0.5rem;
}



/* Review Items */
body[data-page="finanzen"] .review-item {

    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.05));
    cursor: pointer;
    transition: background 0.15s;
}



body[data-page="finanzen"] .review-item:hover {

    background: var(--glass-hover, rgba(255,255,255,0.06));
}



body[data-page="finanzen"] .review-item:last-child {

    border-bottom: none;
}



body[data-page="finanzen"] .review-item-icon {

    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: var(--glass-secondary, rgba(255,255,255,0.08));
    flex-shrink: 0;
}



body[data-page="finanzen"] .review-item-icon.expense {

    background: rgba(255, 59, 48, 0.15);
    color: var(--ios-system-red, #FF3B30);
}



body[data-page="finanzen"] .review-item-icon.income {

    background: rgba(52, 199, 89, 0.15);
    color: var(--ios-system-green, #34C759);
}



body[data-page="finanzen"] .review-item-content {

    flex: 1;
    min-width: 0;
}



/* Depreciation section scroll anchor + toggle button */
body[data-page="finanzen"] #depreciationSection {
    scroll-margin-top: 2em;
}

body[data-page="finanzen"] .depreciation-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: calc(0.875em * var(--font-scale, 1));
}

body[data-page="finanzen"] .review-item-title {
    font-size: calc(0.9375em * var(--font-scale, 1));
    color: var(--text-primary);
    word-break: break-word;
    overflow-wrap: break-word;
}

body[data-page="finanzen"] .review-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    font-size: calc(0.75em * var(--font-scale, 1));
    color: var(--text-tertiary);
    margin-top: 0.25em;
}



body[data-page="finanzen"] .review-item-amount {

    font-size: 0.9375rem;
    font-weight: 500;
    white-space: nowrap;
}



body[data-page="finanzen"] .review-item-amount.expense {

    color: var(--ios-system-red, #FF3B30);
}



body[data-page="finanzen"] .review-item-amount.income {

    color: var(--ios-system-green, #34C759);
}



body[data-page="finanzen"] .review-item-confidence {

    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--glass-secondary, rgba(255,255,255,0.08));
    color: var(--text-secondary);
}



body[data-page="finanzen"] .review-item-confidence.high {

    background: rgba(52, 199, 89, 0.15);
    color: var(--ios-system-green, #34C759);
}



body[data-page="finanzen"] .review-item-confidence.medium {

    background: rgba(255, 149, 0, 0.15);
    color: var(--ios-system-orange, #FF9500);
}



body[data-page="finanzen"] .review-item-confidence.low {

    background: rgba(255, 59, 48, 0.15);
    color: var(--ios-system-red, #FF3B30);
}



/* ========================================
   TRANSACTIONS TAB
   ======================================== */

body[data-page="finanzen"] .finanzen-summary {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}



@media (max-width: 640px) {

    body[data-page="finanzen"] .finanzen-summary {

        grid-template-columns: 1fr;
    }


}


body[data-page="finanzen"] .summary-card {

    padding: 1.25rem;
}



body[data-page="finanzen"] .summary-label {

    font-size: 0.75rem;
    color: var(--text-secondary, rgba(255,255,255,0.6));
    margin-bottom: 0.25rem;
    font-family: var(--font-sans);
}



body[data-page="finanzen"] .summary-value {

    font-size: 1.5rem;
    font-weight: 600;
}



body[data-page="finanzen"] .summary-value.positive {

    color: var(--ios-system-green, #34C759);
}



body[data-page="finanzen"] .summary-value.negative {

    color: var(--ios-system-red, #FF3B30);
}



/* Transactions Header */
body[data-page="finanzen"] .transactions-header {

    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.08));
}



body[data-page="finanzen"] .transactions-filters {

    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}



body[data-page="finanzen"] .filter-tabs {

    display: flex;
    padding: 0.125rem;
    border-radius: 0.375rem;
    background: var(--glass-secondary, rgba(255,255,255,0.06));
}



body[data-page="finanzen"] .filter-tab {

    padding: 0.375rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--text-secondary, rgba(255,255,255,0.6));
    cursor: pointer;
    font-size: 0.8125rem;
    font-family: var(--font-sans);
    border-radius: 0.25rem;
    transition: all 0.15s;
}



body[data-page="finanzen"] .filter-tab:hover {

    color: var(--text-primary, rgba(255,255,255,0.9));
}



body[data-page="finanzen"] .filter-tab.active {

    background: var(--glass-hover, rgba(255,255,255,0.12));
    color: var(--text-primary, rgba(255,255,255,0.95));
}



body[data-page="finanzen"] .period-select {

    padding: 0.375rem 0.75rem;
    border: none;
    background: var(--glass-secondary, rgba(255,255,255,0.06));
    color: var(--text-primary, rgba(255,255,255,0.95));
    font-size: 0.8125rem;
    border-radius: 0.375rem;
    cursor: pointer;
}



body[data-page="finanzen"] .btn-export {

    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: none;
    background: var(--glass-secondary, rgba(255,255,255,0.06));
    color: var(--text-secondary, rgba(255,255,255,0.7));
    font-size: 0.8125rem;
    font-family: var(--font-sans);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s;
}



body[data-page="finanzen"] .btn-export:hover {

    background: var(--glass-hover, rgba(255,255,255,0.1));
    color: var(--text-primary);
}



/* Transactions Table */
body[data-page="finanzen"] .transactions-table {
    overflow-x: auto;
    border-radius: 0.75rem;
    background: var(--glass-primary, rgba(255,255,255,0.02));
}

/* ================================================
   BUCHUNGEN TABLE - Desktop (6 columns)
   DATUM | BESCHREIBUNG | KATEGORIE | KONTO | GEGENKONTO | BETRAG
   Click entire row to edit
   ================================================ */
body[data-page="finanzen"] .table-header {
    display: grid;
    grid-template-columns:
        minmax(5.5rem, 7rem)        /* DATUM */
        minmax(12rem, 1fr)          /* BESCHREIBUNG - flexible */
        minmax(7rem, 9rem)          /* KATEGORIE */
        minmax(8rem, 11rem)         /* KONTO */
        minmax(7rem, 10rem)         /* GEGENKONTO */
        minmax(6rem, 8rem);         /* BETRAG */
    gap: 1rem;
    padding: 0.875rem 1.5rem;
    background: var(--glass-secondary, rgba(255,255,255,0.05));
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.08));
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--text-tertiary, rgba(255,255,255,0.5));
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-family: var(--font-sans);
    position: sticky;
    top: 0;
    z-index: 1;
}

body[data-page="finanzen"] .table-header .col-amount {
    text-align: right;
}

body[data-page="finanzen"] .table-body {
    max-height: 450px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--glass-border) transparent;
}

body[data-page="finanzen"] .table-body::-webkit-scrollbar {
    width: 6px;
}

body[data-page="finanzen"] .table-body::-webkit-scrollbar-track {
    background: transparent;
}

body[data-page="finanzen"] .table-body::-webkit-scrollbar-thumb {
    background: var(--glass-border, rgba(255,255,255,0.1));
    border-radius: 3px;
}

body[data-page="finanzen"] .table-row {
    display: grid;
    grid-template-columns:
        minmax(5.5rem, 7rem)        /* DATUM */
        minmax(12rem, 1fr)          /* BESCHREIBUNG */
        minmax(7rem, 9rem)          /* KATEGORIE */
        minmax(8rem, 11rem)         /* KONTO */
        minmax(7rem, 10rem)         /* GEGENKONTO */
        minmax(6rem, 8rem);         /* BETRAG */
    gap: 1rem;
    padding: 0.875rem 1.5rem;
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.04));
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    align-items: center;
}

body[data-page="finanzen"] .table-row:hover {
    background: var(--glass-hover, rgba(255,255,255,0.06));
}

body[data-page="finanzen"] .table-row:active {
    transform: scale(0.995);
}

/* Date Column */
body[data-page="finanzen"] .table-row .col-date {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary, rgba(255,255,255,0.65));
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Description Column */
body[data-page="finanzen"] .table-row .col-desc {
    font-size: 0.875rem;
    font-weight: 450;
    color: var(--text-primary, rgba(255,255,255,0.95));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

/* Category Column */
body[data-page="finanzen"] .table-row .col-category {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-tertiary, rgba(255,255,255,0.45));
    text-transform: lowercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Amount Column */
body[data-page="finanzen"] .table-row .col-amount {
    font-size: 0.875rem;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

body[data-page="finanzen"] .table-row .col-amount.positive {
    color: var(--ios-system-green, #34C759);
}

body[data-page="finanzen"] .table-row .col-amount.negative {
    color: var(--ios-system-red, #FF3B30);
}

/* Konto Column */
body[data-page="finanzen"] .table-header .col-konto,
body[data-page="finanzen"] .table-row .col-konto {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary, rgba(255,255,255,0.6));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Gegenkonto Column */
body[data-page="finanzen"] .table-header .col-gegenkonto,
body[data-page="finanzen"] .table-row .col-gegenkonto {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-tertiary, rgba(255,255,255,0.45));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* MWST Column */
body[data-page="finanzen"] .table-header .col-mwst,
body[data-page="finanzen"] .table-row .col-mwst {
    width: 3rem;
    min-width: 3rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* MWST Badge Styles */
body[data-page="finanzen"] .mwst-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

body[data-page="finanzen"] .mwst-badge:hover {
    transform: scale(1.1);
}

body[data-page="finanzen"] .mwst-badge.mwst-booked {
    background: var(--ios-system-green-bg, rgba(52, 199, 89, 0.15));
    color: var(--ios-system-green, #34C759);
    border: 1px solid var(--ios-system-green, #34C759);
}

body[data-page="finanzen"] .mwst-badge.mwst-pending {
    background: var(--ios-system-orange-bg, rgba(255, 149, 0, 0.15));
    color: var(--ios-system-orange, #FF9500);
    border: 1px solid var(--ios-system-orange, #FF9500);
}

body[data-page="finanzen"] .mwst-badge.mwst-none {
    background: transparent;
    color: var(--text-quaternary);
    border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
}

/* ================================================
   RESPONSIVE: iPad Mini / Tablet (768px - 1024px)
   Compact 5 columns: hide KATEGORIE
   ================================================ */
@media (max-width: 1024px) and (min-width: 641px) {
    body[data-page="finanzen"] .table-header,
    body[data-page="finanzen"] .table-row {
        grid-template-columns:
            5.5rem                      /* DATUM */
            minmax(10rem, 1fr)          /* BESCHREIBUNG */
            minmax(6rem, 8rem)          /* KONTO */
            minmax(5.5rem, 7rem)        /* GEGENKONTO */
            6rem;                       /* BETRAG */
        gap: 0.75rem;
        padding: 0.75rem 1rem;
    }

    body[data-page="finanzen"] .table-header .col-category,
    body[data-page="finanzen"] .table-row .col-category {
        display: none;
    }

    body[data-page="finanzen"] .table-header {
        font-size: 0.625rem;
    }

    body[data-page="finanzen"] .table-row .col-date {
        font-size: 0.75rem;
    }

    body[data-page="finanzen"] .table-row .col-desc {
        font-size: 0.8125rem;
    }

    body[data-page="finanzen"] .table-row .col-konto,
    body[data-page="finanzen"] .table-row .col-gegenkonto {
        font-size: 0.6875rem;
    }

    body[data-page="finanzen"] .table-row .col-amount {
        font-size: 0.8125rem;
    }
}

/* ================================================
   RESPONSIVE: Mobile (< 640px)
   Card-style layout, stacked content
   ================================================ */
@media (max-width: 640px) {
    body[data-page="finanzen"] .table-header {
        display: none;
    }

    body[data-page="finanzen"] .table-row {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto auto;
        gap: 0.25rem 0.75rem;
        padding: 1rem;
    }

    body[data-page="finanzen"] .table-row .col-date {
        grid-column: 1;
        grid-row: 1;
        font-size: 0.6875rem;
        color: var(--text-tertiary);
        font-weight: 500;
    }

    body[data-page="finanzen"] .table-row .col-desc {
        grid-column: 1;
        grid-row: 2;
        font-size: 0.875rem;
        white-space: normal;
        line-height: 1.3;
    }

    body[data-page="finanzen"] .table-row .col-konto {
        grid-column: 1;
        grid-row: 3;
        font-size: 0.6875rem;
        color: var(--text-tertiary);
        padding-top: 0.25rem;
    }

    body[data-page="finanzen"] .table-row .col-amount {
        grid-column: 2;
        grid-row: 1 / 4;
        align-self: center;
        font-size: 0.9375rem;
    }

    body[data-page="finanzen"] .table-row .col-category,
    body[data-page="finanzen"] .table-row .col-gegenkonto {
        display: none;
    }
}


/* Pagination */
body[data-page="finanzen"] .transactions-pagination {

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--glass-border, rgba(255,255,255,0.08));
}



body[data-page="finanzen"] .page-info {

    font-size: 0.8125rem;
    color: var(--text-secondary, rgba(255,255,255,0.6));
}



body[data-page="finanzen"] .page-buttons {

    display: flex;
    gap: 0.25rem;
}



body[data-page="finanzen"] .btn-page {

    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: var(--glass-secondary, rgba(255,255,255,0.06));
    color: var(--text-secondary, rgba(255,255,255,0.7));
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s;
}



body[data-page="finanzen"] .btn-page:hover:not(:disabled) {

    background: var(--glass-hover, rgba(255,255,255,0.1));
    color: var(--text-primary);
}



body[data-page="finanzen"] .btn-page:disabled {

    opacity: 0.4;
    cursor: not-allowed;
}



/* ========================================
   MANUAL ENTRY TAB
   ======================================== */

body[data-page="finanzen"] .manual-header {

    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.08));
}



body[data-page="finanzen"] .manual-form {

    padding: 1.25rem;
}



body[data-page="finanzen"] .form-row {

    margin-bottom: 1rem;
}



body[data-page="finanzen"] .form-row-2 {

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

body[data-page="finanzen"] .form-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 768px) {
    body[data-page="finanzen"] .form-row-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {

    body[data-page="finanzen"] .form-row-2 {

        grid-template-columns: 1fr;
    }

    body[data-page="finanzen"] .form-row-3 {
        grid-template-columns: 1fr;
    }
}

/* ================================================
   MANUAL ENTRY - KONTO PICKERS & MWST DISPLAY
   ================================================ */

/* Konto Picker Container */
body[data-page="finanzen"] .konto-picker-container {
    width: 100%;
}

body[data-page="finanzen"] .konto-picker-container .searchable-select-trigger {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12));
    border-radius: 0.75rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.28) 100%);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: var(--font-sans);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-page="finanzen"] .konto-picker-container .searchable-select-trigger:hover {
    border-color: var(--text-quaternary);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.32) 100%);
}

body[data-page="finanzen"] .konto-picker-container .searchable-select-trigger:focus {
    outline: none;
    border-color: var(--ios-system-orange, #FF9500);
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.2);
}

body[data-page="finanzen"] .konto-picker-container .searchable-select-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-page="finanzen"] .konto-picker-container .searchable-select-arrow {
    flex-shrink: 0;
    margin-left: 0.5rem;
    color: var(--text-tertiary);
    transition: transform 0.2s ease;
}

/* MWST Calculated Display */
body[data-page="finanzen"] .mwst-display-field {
    position: relative;
}

body[data-page="finanzen"] .mwst-calculated-display {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.08) 0%, rgba(255, 94, 58, 0.06) 100%);
    border: 1px solid rgba(255, 149, 0, 0.2);
    border-radius: 0.75rem;
    min-height: 2.75rem;
}

body[data-page="finanzen"] #mwstCalculatedAmount {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font-sans);
}

body[data-page="finanzen"] .mwst-rate-badge {
    padding: 0.25rem 0.5rem;
    background: linear-gradient(135deg, var(--ios-system-orange, #FF9500) 0%, #FF6B35 100%);
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--button-text-on-color);
    font-family: var(--font-sans);
    letter-spacing: 0.02em;
}

/* Type Selector */
body[data-page="finanzen"] .type-selector {

    display: flex;
    gap: 0.5rem;
}



body[data-page="finanzen"] .type-btn {

    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
    background: transparent;
    color: var(--text-secondary, rgba(255,255,255,0.6));
    font-size: 0.875rem;
    font-family: var(--font-sans);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s;
}



body[data-page="finanzen"] .type-btn:hover {

    background: var(--glass-hover, rgba(255,255,255,0.06));
    color: var(--text-primary);
}



body[data-page="finanzen"] .type-btn.active[data-type="ausgaben"] {

    background: rgba(255, 59, 48, 0.15);
    border-color: rgba(255, 59, 48, 0.3);
    color: var(--ios-system-red, #FF3B30);
}



body[data-page="finanzen"] .type-btn.active[data-type="einnahmen"] {

    background: rgba(52, 199, 89, 0.15);
    border-color: rgba(52, 199, 89, 0.3);
    color: var(--ios-system-green, #34C759);
}



/* Form Fields */
body[data-page="finanzen"] .form-field {

    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}



body[data-page="finanzen"] .form-field label {

    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary, rgba(255,255,255,0.6));
    font-family: var(--font-sans);
}



body[data-page="finanzen"] .form-field input,
body[data-page="finanzen"] .form-field select,
body[data-page="finanzen"] .form-field textarea {

    padding: 0.625rem 0.875rem;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
    background: var(--glass-secondary, rgba(255,255,255,0.04));
    color: var(--text-primary, rgba(255,255,255,0.95));
    font-size: 0.875rem;
    border-radius: 0.5rem;
    transition: all 0.15s;
}



body[data-page="finanzen"] .form-field input:focus,
body[data-page="finanzen"] .form-field select:focus,
body[data-page="finanzen"] .form-field textarea:focus {

    outline: none;
    border-color: var(--ios-system-orange, #FF9500);
    background: var(--glass-hover, rgba(255,255,255,0.08));
}



body[data-page="finanzen"] .form-field textarea {

    resize: vertical;
    min-height: 4rem;
}



/* Amount Input */
body[data-page="finanzen"] .amount-input {

    display: flex;
    gap: 0;
}



body[data-page="finanzen"] .currency-select {

    padding: 0.625rem 0.5rem;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
    border-right: none;
    background: var(--glass-secondary, rgba(255,255,255,0.06));
    color: var(--text-secondary);
    font-size: 0.8125rem;
    border-radius: 0.5rem 0 0 0.5rem;
    cursor: pointer;
}



body[data-page="finanzen"] .amount-input input {

    flex: 1;
    border-radius: 0 0.5rem 0.5rem 0;
}



/* AI Suggestion */
body[data-page="finanzen"] .ai-suggestion {

    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-top: 0.375rem;
    background: rgba(255, 149, 0, 0.1);
    border-radius: 0.375rem;
}



body[data-page="finanzen"] .ai-badge {

    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    background: var(--ios-system-orange, #FF9500);
    color: var(--text-primary);
    border-radius: 0.25rem;
}



body[data-page="finanzen"] .ai-text {

    flex: 1;
    font-size: 0.8125rem;
    color: var(--text-primary);
}



body[data-page="finanzen"] .ai-apply {

    padding: 0.25rem 0.5rem;
    border: none;
    background: var(--ios-system-orange, #FF9500);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-family: var(--font-sans);
    border-radius: 0.25rem;
    cursor: pointer;
}



/* ========================================
   HIERARCHICAL CATEGORY PICKER
   ======================================== */

body[data-page="finanzen"] .category-picker {

    display: flex;
    gap: 0.5rem;
}



body[data-page="finanzen"] .category-picker select {

    flex: 1;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
    background: var(--glass-primary, rgba(255,255,255,0.04));
    color: var(--text-primary);
    font-size: 0.875rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s;
}



body[data-page="finanzen"] .category-picker select:focus {

    outline: none;
    border-color: var(--ios-system-orange, #FF9500);
    background: var(--glass-hover, rgba(255,255,255,0.08));
}



body[data-page="finanzen"] .category-group-select {

    min-width: 10em;
    max-width: 12em;
}



body[data-page="finanzen"] .category-select {

    flex: 2;
}



/* Full-width category select (single dropdown with optgroups) */
body[data-page="finanzen"] .category-select-full {

    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
    background: var(--glass-primary, rgba(255,255,255,0.04));
    color: var(--text-primary);
    font-size: 0.875rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s;
}



body[data-page="finanzen"] .category-select-full:focus {

    outline: none;
    border-color: var(--ios-system-orange, #FF9500) !important;
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.2) !important;
    background: var(--glass-hover, rgba(255,255,255,0.08));
}



body[data-page="finanzen"] .category-select-full optgroup {

    font-weight: 600;
    color: var(--text-primary);
    background: var(--glass-primary, rgba(40, 40, 40, 0.95));
}



body[data-page="finanzen"] .category-select-full option {

    padding: 0.375rem 0.5rem;
    background: var(--glass-primary, rgba(40, 40, 40, 0.95));
}



/* Category Info Badge (shows umlagefähig status, SKR account, etc) */
body[data-page="finanzen"] .category-info-badge {

    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}



body[data-page="finanzen"] .category-info-badge.hidden {

    display: none;
}



body[data-page="finanzen"] .category-info-badge span {

    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    font-family: var(--font-sans);
    border-radius: 0.25rem;
    white-space: nowrap;
}



body[data-page="finanzen"] .badge-umlagefaehig {

    background: rgba(52, 199, 89, 0.15);
    color: var(--ios-system-green, #34C759);
}



body[data-page="finanzen"] .badge-umlagefaehig.nicht-umlagefaehig {

    background: rgba(255, 149, 0, 0.15);
    color: var(--ios-system-orange, #FF9500);
}



body[data-page="finanzen"] .badge-umlagefaehig.nicht-umlagefaehig svg {

    display: none;
}



body[data-page="finanzen"] .badge-konto {

    background: var(--glass-secondary, rgba(255,255,255,0.08));
    color: var(--text-secondary);
}



body[data-page="finanzen"] .badge-betrkv {

    background: rgba(255, 149, 0, 0.15);
    color: var(--ios-system-orange, #FF9500);
}



/* MWST-ID / UID Field */
body[data-page="finanzen"] .mwst-id-input {

    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}



body[data-page="finanzen"] .mwst-id-input input {

    padding: 0.625rem 0.75rem;
    background: var(--glass-secondary, rgba(255,255,255,0.08));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.15));
    border-radius: 0.5rem;
    color: var(--text-primary, #fff);
    font-size: 0.9375rem;
    font-family: var(--font-sans);
    letter-spacing: 0.02em;
}



body[data-page="finanzen"] .mwst-id-input input:focus {

    outline: none;
    border-color: var(--ios-system-orange, #FF9500);
    background: var(--glass-hover, rgba(255,255,255,0.1));
}



body[data-page="finanzen"] .mwst-id-input input::placeholder {

    color: var(--text-quaternary);
}



body[data-page="finanzen"] .mwst-id-hint {

    display: flex;
    align-items: center;
    gap: 0.25rem;
}



/* MWST-ID auto-detected badge (when OCR fills it) */
body[data-page="finanzen"] .mwst-id-input.auto-detected input {

    border-color: var(--ios-system-green, #34C759);
}



body[data-page="finanzen"] .mwst-id-input.auto-detected::after {

    content: 'OCR erkannt';
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.375rem;
    background: rgba(52, 199, 89, 0.15);
    color: var(--ios-system-green, #34C759);
    font-size: 0.6875rem;
    font-family: var(--font-sans);
    border-radius: 0.25rem;
    margin-top: 0.25rem;
}



/* Responsive: Stack on mobile */
@media (max-width: 36em) {

    body[data-page="finanzen"] .category-picker {

        flex-direction: column;
    }



    body[data-page="finanzen"] .category-group-select {

        max-width: 100%;
    }


}


/* ========================================
   NEBENKOSTEN TOGGLE
   ======================================== */

body[data-page="finanzen"] .nebenkosten-toggle-row {

    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--glass-secondary, rgba(255, 255, 255, 0.06));
    border-radius: 0.5rem;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
}



body[data-page="finanzen"] .toggle-label {

    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
}



/* Hide default checkbox */
body[data-page="finanzen"] .toggle-label input[type="checkbox"] {

    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}



/* Toggle switch track */
body[data-page="finanzen"] .toggle-switch {

    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    background: var(--glass-secondary, rgba(255, 255, 255, 0.15));
    border-radius: 1rem;
    transition: background 0.2s ease;
    flex-shrink: 0;
}



/* Toggle switch knob */
body[data-page="finanzen"] .toggle-switch::after {

    content: '';
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--text-tertiary);
    border-radius: 50%;
    transition: transform 0.2s ease, background 0.2s ease;
}



/* Checked state */
body[data-page="finanzen"] .toggle-label input:checked + .toggle-switch {

    background: var(--ios-system-green, #34C759);
}



body[data-page="finanzen"] .toggle-label input:checked + .toggle-switch::after {

    transform: translateX(1.25rem);
    background: #fff;
}



/* Focus state */
body[data-page="finanzen"] .toggle-label input:focus-visible + .toggle-switch {

    outline: 2px solid var(--ios-system-orange, #FF9500);
    outline-offset: 2px;
}



body[data-page="finanzen"] .toggle-text {

    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: var(--font-sans);
}



body[data-page="finanzen"] .toggle-hint {

    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.375rem;
    color: var(--text-tertiary);
    font-size: 0.75rem;
}



body[data-page="finanzen"] .toggle-hint svg {

    opacity: 0.7;
}



/* Hint state changes based on toggle */
body[data-page="finanzen"] .toggle-label input:not(:checked) ~ .toggle-hint span,
body[data-page="finanzen"] .nebenkosten-toggle-row:has(input:not(:checked)) .toggle-hint span {

    color: var(--ios-system-orange, #FF9500);
}



body[data-page="finanzen"] .nebenkosten-toggle-row:has(input:not(:checked)) .toggle-hint svg {

    stroke: var(--ios-system-orange, #FF9500);
}



/* Not umlagefähig warning style */
body[data-page="finanzen"] .nebenkosten-toggle-row.not-umlagefaehig {

    border-color: rgba(255, 149, 0, 0.3);
    background: rgba(255, 149, 0, 0.08);
}



/* Form Actions */
body[data-page="finanzen"] .form-actions {

    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--glass-border, rgba(255,255,255,0.08));
}



body[data-page="finanzen"] .btn-secondary,
body[data-page="finanzen"] .btn-primary {

    padding: 0.625rem 1.25rem;
    border: none;
    font-size: 0.875rem;
    font-family: var(--font-sans);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s;
}



body[data-page="finanzen"] .btn-secondary {

    background: var(--glass-secondary, rgba(255,255,255,0.08));
    color: var(--text-secondary);
}



body[data-page="finanzen"] .btn-secondary:hover {

    background: var(--glass-hover, rgba(255,255,255,0.12));
    color: var(--text-primary);
}



body[data-page="finanzen"] .btn-primary {

    background: var(--ios-system-orange, #FF9500);
    color: var(--text-primary);
}



body[data-page="finanzen"] .btn-primary:hover {

    background: #0056b3;
}



/* ========================================
   REPORTS TAB
   ======================================== */

body[data-page="finanzen"] .reports-grid {

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}



body[data-page="finanzen"] .report-card {

    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
}



body[data-page="finanzen"] .report-card:hover {

    background: var(--glass-hover, rgba(255,255,255,0.08));
    transform: translateY(-2px);
}



body[data-page="finanzen"] .report-icon {

    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1rem;
    border-radius: 0.75rem;
    background: var(--glass-secondary, rgba(255,255,255,0.08));
    color: var(--ios-system-orange, #FF9500);
}



body[data-page="finanzen"] .report-card h3 {

    margin-bottom: 0.25rem;
}

/* ========================================
   COMPLIANCE TAB
   ======================================== */

body[data-page="finanzen"] .compliance-grid {
    display: block;
}

body[data-page="finanzen"] .compliance-card {
    padding: 1.5rem;
}

body[data-page="finanzen"] .compliance-section-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

body[data-page="finanzen"] .compliance-section-header > div:first-child {
    flex-shrink: 0;
}

body[data-page="finanzen"] .compliance-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

body[data-page="finanzen"] .compliance-actions .glass-select,
body[data-page="finanzen"] .compliance-actions .glass-button {
    min-height: 2.25rem;
    font-size: 0.8rem;
}

body[data-page="finanzen"] .compliance-actions .glass-select {
    min-width: 7em;
    padding: 0.4rem 0.6rem;
}

body[data-page="finanzen"] .compliance-table {

    border: 1px solid var(--glass-border);
    border-radius: 0.75rem;
    overflow: auto;
    background: var(--glass-secondary, rgba(255,255,255,0.04));
}

body[data-page="finanzen"] .compliance-table .empty-state {

    padding: 1rem;
}

body[data-page="finanzen"] .periods-table {

    width: 100%;
    border-collapse: collapse;
    min-width: 640px;
}

body[data-page="finanzen"] .periods-table th,
body[data-page="finanzen"] .periods-table td {

    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--glass-border);
    text-align: left;
    font-size: 0.9rem;
}

body[data-page="finanzen"] .periods-table th {

    color: var(--text-secondary);
    font-weight: 600;
}

body[data-page="finanzen"] .periods-table tbody tr:hover {

    background: var(--glass-hover, rgba(255,255,255,0.06));
}

body[data-page="finanzen"] .period-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body[data-page="finanzen"] .period-status:hover {
    transform: scale(1.02);
}

/* Status chips - Default (works for dark theme) */
body[data-page="finanzen"] .period-status.open {
    background: rgba(52, 199, 89, 0.18);
    color: var(--ios-system-green, #34C759);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(52, 199, 89, 0.15);
}

body[data-page="finanzen"] .period-status.closed {
    background: rgba(255, 149, 0, 0.18);
    color: var(--ios-system-orange, #FF9500);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 149, 0, 0.15);
}

body[data-page="finanzen"] .period-status.locked {
    background: rgba(255, 59, 48, 0.18);
    color: var(--ios-system-red, #FF3B30);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 59, 48, 0.15);
}

/* Status chips - Light themes (solid backgrounds with white text for max contrast) */
[data-theme="light"] body[data-page="finanzen"] .period-status.open,
body[data-theme="light"][data-page="finanzen"] .period-status.open,
[data-theme="lightmodern"] body[data-page="finanzen"] .period-status.open,
body[data-theme="lightmodern"][data-page="finanzen"] .period-status.open {
    background: #34C759;
    color: var(--button-text-on-color);
    box-shadow: 0 1px 3px rgba(52, 199, 89, 0.4);
}

[data-theme="light"] body[data-page="finanzen"] .period-status.closed,
body[data-theme="light"][data-page="finanzen"] .period-status.closed,
[data-theme="lightmodern"] body[data-page="finanzen"] .period-status.closed,
body[data-theme="lightmodern"][data-page="finanzen"] .period-status.closed {
    background: #FF9500;
    color: var(--button-text-on-color);
    box-shadow: 0 1px 3px rgba(255, 149, 0, 0.4);
}

[data-theme="light"] body[data-page="finanzen"] .period-status.locked,
body[data-theme="light"][data-page="finanzen"] .period-status.locked,
[data-theme="lightmodern"] body[data-page="finanzen"] .period-status.locked,
body[data-theme="lightmodern"][data-page="finanzen"] .period-status.locked {
    background: #FF3B30;
    color: var(--button-text-on-color);
    box-shadow: 0 1px 3px rgba(255, 59, 48, 0.4);
}

body[data-page="finanzen"] .period-action-btn {

    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 0.5rem;
    border: 1px solid var(--glass-border);
    background: var(--glass-secondary, rgba(255,255,255,0.06));
    color: var(--text-primary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

body[data-page="finanzen"] .period-action-btn:hover {

    background: var(--glass-hover, rgba(255,255,255,0.12));
    transform: translateY(-1px);
}

body[data-page="finanzen"] .period-action-btn:disabled {

    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

body[data-page="finanzen"] .compliance-form .form-row {

    margin-bottom: 1rem;
}

body[data-page="finanzen"] .compliance-form label {

    display: block;
    margin-bottom: 0.35rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

body[data-page="finanzen"] .compliance-form input,
body[data-page="finanzen"] .compliance-form select,
body[data-page="finanzen"] .compliance-form textarea {

    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid var(--glass-border);
    background: var(--glass-secondary, rgba(255,255,255,0.06));
    color: var(--text-primary);
    padding: 0.55rem 0.75rem;
}

body[data-page="finanzen"] .compliance-form textarea {

    resize: vertical;
}

body[data-page="finanzen"] .compliance-form .form-actions {

    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

body[data-page="finanzen"] .compliance-result {

    margin-top: 0.5rem;
    min-height: 1.25rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

body[data-page="finanzen"] .compliance-divider {

    height: 1px;
    background: var(--glass-border);
    margin: 1.25rem 0;
}

/* ========================================
   PERIOD TYPE SUB-TABS
   Premium segmented control for period filtering
   ======================================== */

body[data-page="finanzen"] .period-type-tabs {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0.25rem;
    background: var(--glass-secondary, rgba(255, 255, 255, 0.06));
    border-radius: 0.625rem;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

body[data-page="finanzen"] .period-type-tab {
    position: relative;
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-secondary, rgba(255, 255, 255, 0.6));
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    min-width: 5rem;
    text-align: center;
}

body[data-page="finanzen"] .period-type-tab:hover:not(.active) {
    color: var(--text-primary, rgba(255, 255, 255, 0.85));
    background: var(--glass-hover, rgba(255, 255, 255, 0.08));
}

body[data-page="finanzen"] .period-type-tab.active {
    background: var(--ios-system-orange, #FF9500);
    color: var(--button-text-on-color);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(255, 149, 0, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: scale(1.02);
}

body[data-page="finanzen"] .period-type-tab.active::after {
    content: '';
    position: absolute;
    bottom: -0.25rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--ios-system-orange, #FF9500);
    opacity: 0;
}

/* Period type tabs in header - flex layout adjustment */
body[data-page="finanzen"] .compliance-section-header .period-type-tabs {
    flex-shrink: 0;
}

/* Responsive: stack tabs on mobile */
@media (max-width: 768px) {
    body[data-page="finanzen"] .period-type-tabs {
        width: 100%;
        justify-content: center;
    }

    body[data-page="finanzen"] .period-type-tab {
        flex: 1;
        min-width: auto;
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* ========================================
   TRANSACTION INFO BADGES
   Contextual info for period rows
   ======================================== */

body[data-page="finanzen"] .period-info-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
    white-space: nowrap;
}

body[data-page="finanzen"] .period-info-badge svg {
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0.7;
}

body[data-page="finanzen"] .period-info-badge.warning {
    color: var(--ios-system-orange, #FF9500);
    background: rgba(255, 149, 0, 0.12);
    padding: 0.2rem 0.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
}

body[data-page="finanzen"] .period-info-badge.empty {
    color: var(--text-quaternary);
    font-style: italic;
}

/* Info badge - Light themes (solid background with white text for max contrast) */
[data-theme="light"] body[data-page="finanzen"] .period-info-badge.warning,
body[data-theme="light"][data-page="finanzen"] .period-info-badge.warning,
[data-theme="lightmodern"] body[data-page="finanzen"] .period-info-badge.warning,
body[data-theme="lightmodern"][data-page="finanzen"] .period-info-badge.warning {
    background: #E08600;
    color: var(--button-text-on-color);
    box-shadow: 0 1px 2px rgba(255, 149, 0, 0.3);
}

[data-theme="light"] body[data-page="finanzen"] .period-info-badge.empty,
body[data-theme="light"][data-page="finanzen"] .period-info-badge.empty,
[data-theme="lightmodern"] body[data-page="finanzen"] .period-info-badge.empty,
body[data-theme="lightmodern"][data-page="finanzen"] .period-info-badge.empty {
    color: rgba(0, 0, 0, 0.45);
}

/* Info badge - Light themes: regular info (Buchungen count) */
[data-theme="light"] body[data-page="finanzen"] .period-info-badge:not(.warning):not(.empty),
body[data-theme="light"][data-page="finanzen"] .period-info-badge:not(.warning):not(.empty),
[data-theme="lightmodern"] body[data-page="finanzen"] .period-info-badge:not(.warning):not(.empty),
body[data-theme="lightmodern"][data-page="finanzen"] .period-info-badge:not(.warning):not(.empty) {
    color: rgba(0, 0, 0, 0.6);
}

/* ========================================
   ORANGE ACCENT STYLES FOR COMPLIANCE
   Replace blue with sunset orange
   ======================================== */

/* Select dropdowns in compliance tab - orange focus */
body[data-page="finanzen"] .compliance-card .glass-select:focus,
body[data-page="finanzen"] .compliance-actions .glass-select:focus {
    outline: none;
    border-color: var(--ios-system-orange, #FF9500);
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.2);
}

/* Custom chevron with orange color */
body[data-page="finanzen"] .compliance-card .glass-select,
body[data-page="finanzen"] .compliance-actions .glass-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FF9500' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 0.75rem;
    padding-right: 1.75rem;
}

/* Input focus in compliance forms - orange */
body[data-page="finanzen"] .compliance-form input:focus,
body[data-page="finanzen"] .compliance-form select:focus,
body[data-page="finanzen"] .compliance-form textarea:focus {
    outline: none;
    border-color: var(--ios-system-orange, #FF9500);
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.15);
}

/* Reload button hover - subtle orange */
body[data-page="finanzen"] #btnReloadPeriods:hover {
    border-color: var(--ios-system-orange, #FF9500);
    color: var(--ios-system-orange, #FF9500);
}

/* ========================================
   PERIOD VALIDATION WARNING MODAL
   Warm amber glow for authoritative warnings
   ======================================== */

body[data-page="finanzen"] .period-validation-modal .modal-container {
    max-width: 32rem;
    border: 1px solid rgba(255, 149, 0, 0.3);
    box-shadow: 0 0 40px rgba(255, 149, 0, 0.15),
                0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

body[data-page="finanzen"] .validation-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 1rem;
}

body[data-page="finanzen"] .validation-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.2), rgba(255, 107, 53, 0.2));
    border-radius: 0.625rem;
    color: var(--ios-system-orange, #FF9500);
}

body[data-page="finanzen"] .validation-header-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

body[data-page="finanzen"] .validation-header-text h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

body[data-page="finanzen"] .validation-header-text p {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0.25rem 0 0;
}

body[data-page="finanzen"] .validation-warnings {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

body[data-page="finanzen"] .validation-warning-item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    background: rgba(255, 149, 0, 0.08);
    border-radius: 0.5rem;
    border-left: 3px solid var(--ios-system-orange, #FF9500);
}

body[data-page="finanzen"] .validation-warning-item.info {
    background: rgba(255, 149, 0, 0.08);
    border-left-color: var(--ios-system-orange);
}

body[data-page="finanzen"] .validation-warning-item svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: var(--ios-system-orange, #FF9500);
}

body[data-page="finanzen"] .validation-warning-item.info svg {
    color: var(--ios-system-orange);
}

body[data-page="finanzen"] .validation-warning-item span {
    font-size: 0.875rem;
    color: var(--text-primary);
    line-height: 1.4;
}

body[data-page="finanzen"] .validation-reason-field {
    margin-bottom: 1.25rem;
}

body[data-page="finanzen"] .validation-reason-field label {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

body[data-page="finanzen"] .validation-reason-field textarea {
    width: 100%;
    min-height: 4rem;
    padding: 0.75rem;
    border: 1px solid var(--glass-border);
    border-radius: 0.5rem;
    background: var(--glass-secondary);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    resize: vertical;
}

body[data-page="finanzen"] .validation-reason-field textarea:focus {
    outline: none;
    border-color: var(--ios-system-orange, #FF9500);
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.15);
}

body[data-page="finanzen"] .validation-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

body[data-page="finanzen"] .validation-actions .btn-cancel {
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--glass-border);
    border-radius: 0.5rem;
    background: transparent;
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

body[data-page="finanzen"] .validation-actions .btn-cancel:hover {
    background: var(--glass-hover);
    color: var(--text-primary);
}

body[data-page="finanzen"] .validation-actions .btn-proceed {
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, var(--ios-system-orange, #FF9500), #FF6B35);
    color: var(--button-text-on-color);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(255, 149, 0, 0.3);
}

body[data-page="finanzen"] .validation-actions .btn-proceed:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 149, 0, 0.4);
}

/* ========================================
   MODALS
   ======================================== */

body[data-page="finanzen"] .modal-overlay {

    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1rem;
}



body[data-page="finanzen"] .modal-container {

    width: 100%;
    max-width: 32rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}



body[data-page="finanzen"] .modal-container.modal-lg {

    max-width: 48rem;
}



body[data-page="finanzen"] .modal-header {

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.08));
}



body[data-page="finanzen"] .btn-close {

    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 0.375rem;
    transition: all 0.15s;
}



body[data-page="finanzen"] .btn-close:hover {

    background: var(--glass-hover, rgba(255,255,255,0.1));
    color: var(--text-primary);
}



body[data-page="finanzen"] .modal-body {

    flex: 1;
    padding: 1.25rem;
    overflow-y: auto;
}



body[data-page="finanzen"] .modal-footer {

    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--glass-border, rgba(255,255,255,0.08));
}



body[data-page="finanzen"] .btn-reject,
body[data-page="finanzen"] .btn-approve {

    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1rem;
    border: none;
    font-size: 0.875rem;
    font-family: var(--font-sans);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s;
}



body[data-page="finanzen"] .btn-reject {

    background: rgba(255, 59, 48, 0.15);
    color: var(--ios-system-red, #FF3B30);
}



body[data-page="finanzen"] .btn-reject:hover {

    background: rgba(255, 59, 48, 0.25);
}



body[data-page="finanzen"] .btn-approve {

    background: var(--ios-system-green, #34C759);
    color: var(--text-primary);
}



body[data-page="finanzen"] .btn-approve:hover {

    background: #2fb350;
}



/* ========================================
   UTILITIES
   ======================================== */

body[data-page="finanzen"] .hidden {

    display: none !important;
}



@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

body[data-page="finanzen"] .animate-spin {

    animation: spin 1s linear infinite;
}



/* ========================================
   REVIEW TABLE (Excel-like)
   ======================================== */

body[data-page="finanzen"] .review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin: -1rem -1.25rem 1rem -1.25rem;
    background: linear-gradient(135deg,
        rgba(255, 149, 0, 0.08) 0%,
        rgba(88, 86, 214, 0.08) 50%,
        rgba(175, 82, 222, 0.08) 100%);
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 1rem 1rem 0 0;
}

body[data-page="finanzen"] .review-header-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

body[data-page="finanzen"] .review-header-left h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body[data-page="finanzen"] .review-header-left h2::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 1.25em;
    background: linear-gradient(180deg, var(--ios-system-orange) 0%, var(--ios-system-purple, #AF52DE) 100%);
    border-radius: 2px;
}



body[data-page="finanzen"] .batch-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem;
    background: var(--glass-secondary, rgba(255, 255, 255, 0.06));
    border-radius: 0.625rem;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
}

body[data-page="finanzen"] .batch-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    padding: 0.375rem 0.625rem;
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.2) 0%, rgba(255, 94, 58, 0.2) 100%);
    border-radius: 0.375rem;
    border: 1px solid rgba(255, 149, 0, 0.3);
    font-family: var(--font-sans);
}

body[data-page="finanzen"] .btn-batch {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border: none;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: var(--font-sans);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

body[data-page="finanzen"] .btn-batch svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

body[data-page="finanzen"] .btn-batch-approve {
    background: linear-gradient(135deg, rgba(52, 199, 89, 0.9) 0%, rgba(48, 209, 88, 0.9) 100%);
    color: var(--button-text-on-color);
    box-shadow: 0 2px 8px rgba(52, 199, 89, 0.3);
}

body[data-page="finanzen"] .btn-batch-approve:hover {
    background: linear-gradient(135deg, rgba(52, 199, 89, 1) 0%, rgba(48, 209, 88, 1) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.4);
}

body[data-page="finanzen"] .btn-batch-reject {
    background: rgba(255, 59, 48, 0.15);
    color: var(--ios-system-red, #FF3B30);
    border: 1px solid rgba(255, 59, 48, 0.25);
}

body[data-page="finanzen"] .btn-batch-reject:hover {
    background: rgba(255, 59, 48, 0.25);
    border-color: rgba(255, 59, 48, 0.4);
}



/* Review Table Container */
body[data-page="finanzen"] .review-table-container {
    overflow-x: auto;
    margin: 0;
    border-radius: 0.5rem;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.06));
}

body[data-page="finanzen"] .review-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

body[data-page="finanzen"] .review-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(180deg,
        rgba(30, 30, 40, 0.98) 0%,
        rgba(25, 25, 35, 0.95) 100%);
    backdrop-filter: blur(8px);
}

body[data-page="finanzen"] .review-table th {
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: var(--font-sans);
    border-bottom: 2px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    white-space: nowrap;
    user-select: none;
}



body[data-page="finanzen"] .review-table th.sortable {

    cursor: pointer;
    transition: background 0.15s;
}



body[data-page="finanzen"] .review-table th.sortable:hover {

    background: var(--glass-hover, rgba(255,255,255,0.06));
}



body[data-page="finanzen"] .review-table th.sortable .sort-icon::after {

    content: '⇅';
    margin-left: 0.25rem;
    opacity: 0.3;
}



body[data-page="finanzen"] .review-table th.sortable.sort-asc .sort-icon::after {

    content: '↑';
    opacity: 1;
}



body[data-page="finanzen"] .review-table th.sortable.sort-desc .sort-icon::after {

    content: '↓';
    opacity: 1;
}



body[data-page="finanzen"] .review-table td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.04));
    vertical-align: middle;
}

body[data-page="finanzen"] .review-table tbody tr {
    transition: all 0.2s ease;
}

body[data-page="finanzen"] .review-table tbody tr:hover {
    background: linear-gradient(90deg,
        rgba(255, 149, 0, 0.04) 0%,
        rgba(88, 86, 214, 0.04) 50%,
        rgba(255, 149, 0, 0.04) 100%);
}

body[data-page="finanzen"] .review-table tbody tr.selected {
    background: linear-gradient(90deg,
        rgba(255, 149, 0, 0.12) 0%,
        rgba(255, 94, 58, 0.08) 100%);
    border-left: 3px solid var(--ios-system-orange, #FF9500);
}

body[data-page="finanzen"] .review-table tbody tr:nth-child(even) {
    background: var(--glass-primary, rgba(255, 255, 255, 0.02));
}

body[data-page="finanzen"] .review-table tbody tr:nth-child(even):hover {
    background: linear-gradient(90deg,
        rgba(255, 149, 0, 0.06) 0%,
        rgba(88, 86, 214, 0.06) 50%,
        rgba(255, 149, 0, 0.06) 100%);
}



/* Column Widths */
body[data-page="finanzen"] .review-table .col-checkbox {

    width: 2.5rem;
    text-align: center;
}



body[data-page="finanzen"] .review-table .col-actions {

    width: 5rem;
}



body[data-page="finanzen"] .review-table .col-date {

    width: 6rem;
}



body[data-page="finanzen"] .review-table .col-type {

    width: 5rem;
}



body[data-page="finanzen"] .review-table .col-desc {

    min-width: 10rem;
}



body[data-page="finanzen"] .review-table .col-amount {

    width: 7rem;
    text-align: right;
}



body[data-page="finanzen"] .review-table .col-category {

    width: 9rem;
}

body[data-page="finanzen"] .review-table .col-konto,
body[data-page="finanzen"] .review-table .col-gegenkonto {

    width: 9.5rem;
}

body[data-page="finanzen"] .review-table .col-building {
    width: 8rem;
}

/* MWST Column */
body[data-page="finanzen"] .review-table .col-mwst {
    width: 6rem;
    text-align: center;
}

body[data-page="finanzen"] .mwst-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
}

body[data-page="finanzen"] .mwst-rate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    font-family: var(--font-sans);
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.15) 0%, rgba(88, 86, 214, 0.15) 100%);
    color: var(--ios-system-orange);
    border-radius: 0.25rem;
    border: 1px solid rgba(255, 149, 0, 0.2);
    letter-spacing: 0.02em;
}

body[data-page="finanzen"] .mwst-amount {
    font-size: 0.625rem;
    color: var(--text-tertiary, rgba(255, 255, 255, 0.5));
    font-family: var(--font-sans);
}

body[data-page="finanzen"] .mwst-status {
    font-size: 0.625rem;
    line-height: 1;
}

body[data-page="finanzen"] .mwst-status.mwst-booked {
    color: var(--ios-system-green, #34C759);
}

body[data-page="finanzen"] .mwst-status.mwst-pending {
    color: var(--ios-system-orange, #FF9500);
}

body[data-page="finanzen"] .mwst-indicator.mwst-none {
    color: var(--text-quaternary);
    font-size: 0.75rem;
}

/* Editable MWST Select in Review Table */
body[data-page="finanzen"] .mwst-select {
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.12) 0%, rgba(88, 86, 214, 0.12) 100%);
    border: 1px solid rgba(255, 149, 0, 0.25);
    border-radius: 0.375rem;
    color: var(--ios-system-orange);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 1.5rem 0.25rem 0.5rem;
    cursor: pointer;
    min-width: 4rem;
    text-align: center;
    transition: all 0.2s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23007AFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.375rem center;
    background-size: 0.75rem;
}

body[data-page="finanzen"] .mwst-select:hover {
    background-color: rgba(255, 149, 0, 0.18);
    border-color: rgba(255, 149, 0, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 149, 0, 0.2);
}

body[data-page="finanzen"] .mwst-select:focus {
    outline: none;
    border-color: var(--ios-system-orange);
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.2);
}

body[data-page="finanzen"] .mwst-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: rgba(255, 149, 0, 0.05);
}

body[data-page="finanzen"] .mwst-select option {
    background: var(--glass-primary, rgba(30, 30, 40, 0.95));
    color: var(--text-primary);
    padding: 0.5rem;
}

body[data-page="finanzen"] .review-table .col-confidence {
    width: 4rem;
    text-align: center;
}



body[data-page="finanzen"] .review-table .col-document {

    width: 8rem;
}



/* Checkbox styling */
body[data-page="finanzen"] .review-table input[type="checkbox"] {

    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--ios-system-orange, #FF9500);
}



/* Quick Action Buttons */
body[data-page="finanzen"] .quick-actions {
    display: flex;
    gap: 0.375rem;
}

body[data-page="finanzen"] .btn-quick {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.625rem;
    height: 1.625rem;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.7;
}

body[data-page="finanzen"] .review-table tbody tr:hover .btn-quick {
    opacity: 1;
}

body[data-page="finanzen"] .btn-quick svg {
    width: 12px;
    height: 12px;
}

body[data-page="finanzen"] .btn-quick-approve {
    background: rgba(52, 199, 89, 0.15);
    color: var(--ios-system-green, #34C759);
    border: 1px solid rgba(52, 199, 89, 0.2);
}

body[data-page="finanzen"] .btn-quick-approve:hover {
    background: var(--ios-system-green, #34C759);
    color: var(--button-text-on-color);
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(52, 199, 89, 0.4);
}

body[data-page="finanzen"] .btn-quick-reject {
    background: rgba(255, 59, 48, 0.12);
    color: var(--ios-system-red, #FF3B30);
    border: 1px solid rgba(255, 59, 48, 0.2);
}

body[data-page="finanzen"] .btn-quick-reject:hover {
    background: var(--ios-system-red, #FF3B30);
    color: var(--button-text-on-color);
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.4);
}

body[data-page="finanzen"] .btn-quick:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}



/* Type badges */
body[data-page="finanzen"] .type-badge {

    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 500;
    border-radius: 0.25rem;
    text-transform: uppercase;
}



body[data-page="finanzen"] .type-badge.expense {

    background: rgba(255, 59, 48, 0.15);
    color: var(--ios-system-red, #FF3B30);
}



body[data-page="finanzen"] .type-badge.income {

    background: rgba(52, 199, 89, 0.15);
    color: var(--ios-system-green, #34C759);
}


/* Clickable type badge button - allows users to toggle income/expense */
body[data-page="finanzen"] .type-badge-btn {
    display: inline-block;
    padding: 0.125em 0.5em;
    border-radius: 0.25em;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

body[data-page="finanzen"] .type-badge-btn.expense {
    background: rgba(255, 59, 48, 0.15);
    color: var(--ios-system-red, #FF3B30);
}

body[data-page="finanzen"] .type-badge-btn.income {
    background: rgba(52, 199, 89, 0.15);
    color: var(--ios-system-green, #34C759);
}

body[data-page="finanzen"] .type-badge-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

body[data-page="finanzen"] .type-badge-btn:active {
    transform: scale(0.95);
}

body[data-page="finanzen"] .type-badge-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

body[data-page="finanzen"] .type-badge-btn.loading {
    position: relative;
    color: transparent;
}

body[data-page="finanzen"] .type-badge-btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.75em;
    height: 0.75em;
    margin: -0.375em 0 0 -0.375em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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


/* Amount styling in table */
body[data-page="finanzen"] .amount-cell {

    font-weight: 500;
    font-variant-numeric: tabular-nums;
}



body[data-page="finanzen"] .amount-cell.expense {

    color: var(--ios-system-red, #FF3B30);
}



body[data-page="finanzen"] .amount-cell.income {

    color: var(--ios-system-green, #34C759);
}



/* Confidence badge */
body[data-page="finanzen"] .confidence-badge {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: 0.125rem 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 0.25rem;
}



body[data-page="finanzen"] .confidence-badge.high {

    background: rgba(52, 199, 89, 0.15);
    color: var(--ios-system-green, #34C759);
}



body[data-page="finanzen"] .confidence-badge.medium {

    background: rgba(255, 149, 0, 0.15);
    color: var(--ios-system-orange, #FF9500);
}



body[data-page="finanzen"] .confidence-badge.low {

    background: rgba(255, 59, 48, 0.15);
    color: var(--ios-system-red, #FF3B30);
}



/* Editable cells */
body[data-page="finanzen"] .editable-cell {

    padding: 0.25rem 0.375rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    transition: all 0.15s;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    color: inherit;
    font-size: inherit;
}



body[data-page="finanzen"] .editable-cell:hover {

    background: var(--glass-secondary, rgba(255,255,255,0.04));
    border-color: var(--glass-border, rgba(255,255,255,0.08));
}



body[data-page="finanzen"] .editable-cell:focus {

    outline: none;
    background: var(--glass-secondary, rgba(255,255,255,0.08));
    border-color: var(--ios-system-orange, #FF9500);
}



/* Building/Unit select in table */
body[data-page="finanzen"] .building-select {

    padding: 0.25rem 0.375rem;
    background: var(--glass-secondary, rgba(255,255,255,0.04));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
    border-radius: 0.25rem;
    color: var(--text-primary);
    font-size: 0.75rem;
    /* Fill the cell consistently — native selects otherwise size to their longest option
       (the "sometimes too small / too big" boxes). Truncate long Konto/Kategorie labels. */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
}



body[data-page="finanzen"] .building-select:focus {

    outline: none;
    border-color: var(--ios-system-orange, #FF9500);
}



/* Document link */
body[data-page="finanzen"] .doc-link {

    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--ios-system-orange, #FF9500);
    text-decoration: none;
    font-size: 0.75rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



body[data-page="finanzen"] .doc-link:hover {

    text-decoration: underline;
}



body[data-page="finanzen"] .doc-link svg {

    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
}



/* Responsive table */
@media (max-width: 1024px) {

    body[data-page="finanzen"] .review-table {

        font-size: 0.75rem;
    }



    body[data-page="finanzen"] .review-table th,
body[data-page="finanzen"] .review-table td {

        padding: 0.5rem;
    }



    body[data-page="finanzen"] .review-table .col-confidence,
body[data-page="finanzen"] .review-table .col-building,
body[data-page="finanzen"] .review-table .col-konto {

        display: none;
    }


}


@media (max-width: 768px) {

    body[data-page="finanzen"] .review-table .col-category,
body[data-page="finanzen"] .review-table .col-document {

        display: none;
    }



    body[data-page="finanzen"] .batch-actions {

        width: 100%;
        justify-content: flex-end;
    }


}


/* Review Modal Content */
body[data-page="finanzen"] .review-detail {

    display: flex;
    flex-direction: column;
    gap: 1rem;
}



body[data-page="finanzen"] .review-detail-row {

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.05));
}



body[data-page="finanzen"] .review-detail-row:last-child {

    border-bottom: none;
}



body[data-page="finanzen"] .review-detail-label {

    font-size: 0.8125rem;
    color: var(--text-secondary);
}



body[data-page="finanzen"] .review-detail-value {

    font-size: 0.875rem;
    color: var(--text-primary);
}



body[data-page="finanzen"] .review-detail-value.editable {

    padding: 0.375rem 0.625rem;
    background: var(--glass-secondary, rgba(255,255,255,0.06));
    border-radius: 0.375rem;
    cursor: text;
}



body[data-page="finanzen"] .review-doc-link {

    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--glass-secondary, rgba(255,255,255,0.06));
    border-radius: 0.5rem;
    margin-top: 0.5rem;
    cursor: pointer;
    transition: background 0.15s;
}



body[data-page="finanzen"] .review-doc-link:hover {

    background: var(--glass-hover, rgba(255,255,255,0.1));
}



body[data-page="finanzen"] .review-doc-link svg {

    color: var(--ios-system-orange, #FF9500);
}



body[data-page="finanzen"] .review-doc-link span {

    font-size: 0.8125rem;
    color: var(--ios-system-orange, #FF9500);
}



/* ========================================
   BANK RECONCILIATION TAB
   ======================================== */

body[data-page="finanzen"] .reconciliation-header {

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 1rem;
}



body[data-page="finanzen"] .reconciliation-header-left h2 {

    margin-bottom: 0.25rem;
}



body[data-page="finanzen"] .reconciliation-actions {

    display: flex;
    align-items: center;
    gap: 0.75rem;
}



body[data-page="finanzen"] .glass-select {

    padding: 0.5rem 0.75rem;
    border: none;
    background: var(--glass-secondary, rgba(255,255,255,0.06));
    color: var(--text-primary, rgba(255,255,255,0.95));
    font-size: 0.875rem;
    border-radius: 0.5rem;
    cursor: pointer;
    min-width: 8rem;
}



body[data-page="finanzen"] .btn-import {

    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: none;
    background: var(--ios-system-orange, #FF9500);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: var(--font-sans);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s;
}



body[data-page="finanzen"] .btn-import:hover {

    opacity: 0.9;
}



body[data-page="finanzen"] .btn-import svg {

    width: 1rem;
    height: 1rem;
}



/* Filters Row */
body[data-page="finanzen"] .reconciliation-filters {

    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.08));
}



body[data-page="finanzen"] .filter-group {

    display: flex;
    align-items: center;
    gap: 0.5rem;
}



body[data-page="finanzen"] .filter-label {

    font-size: 0.8125rem;
    color: var(--text-secondary, rgba(255,255,255,0.6));
}



/* Split View Layout */
body[data-page="finanzen"] .reconciliation-split-view {

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    min-height: 500px;
}



@media (max-width: 64em) {

    body[data-page="finanzen"] .reconciliation-split-view {

        grid-template-columns: 1fr;
    }


}


/* Bank Entries Panel */
body[data-page="finanzen"] .bank-entries-panel,
body[data-page="finanzen"] .matching-panel {

    display: flex;
    flex-direction: column;
    background: var(--glass-secondary, rgba(255,255,255,0.04));
    border-radius: 0.75rem;
    overflow: hidden;
}



body[data-page="finanzen"] .panel-header {

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1rem;
    background: var(--glass-secondary, rgba(255,255,255,0.04));
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.06));
}



body[data-page="finanzen"] .panel-header h3 {

    margin: 0;
}



body[data-page="finanzen"] .entry-count {

    font-size: 0.75rem;
    color: var(--text-tertiary, rgba(255,255,255,0.4));
}



/* Bank Entries List */
body[data-page="finanzen"] .bank-entries-list {

    flex: 1;
    overflow-y: auto;
    max-height: 450px;
}



body[data-page="finanzen"] .bank-entry-item {

    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.04));
    cursor: pointer;
    transition: background 0.15s;
}



body[data-page="finanzen"] .bank-entry-item:hover {

    background: var(--glass-hover, rgba(255,255,255,0.06));
}



body[data-page="finanzen"] .bank-entry-item.selected {

    background: var(--glass-hover, rgba(255,255,255,0.1));
    border-left: 3px solid var(--ios-system-orange, #FF9500);
}



body[data-page="finanzen"] .bank-entry-item.matched {

    opacity: 0.6;
}



body[data-page="finanzen"] .entry-main {

    display: flex;
    align-items: flex-start;
    gap: 1rem;
}



body[data-page="finanzen"] .entry-date {

    font-size: 0.75rem;
    color: var(--text-tertiary, rgba(255,255,255,0.5));
    min-width: 5rem;
}



body[data-page="finanzen"] .entry-details {

    flex: 1;
    min-width: 0;
}



body[data-page="finanzen"] .entry-counterparty {

    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary, rgba(255,255,255,0.95));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



body[data-page="finanzen"] .entry-description {

    font-size: 0.75rem;
    color: var(--text-secondary, rgba(255,255,255,0.6));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.125rem;
}



body[data-page="finanzen"] .entry-amount {

    font-size: 0.875rem;
    font-weight: 600;
    font-family: var(--font-sans);
    text-align: right;
    min-width: 6rem;
}



body[data-page="finanzen"] .entry-amount.expense {

    color: var(--ios-system-red, #FF3B30);
}



body[data-page="finanzen"] .entry-amount.income {

    color: var(--ios-system-green, #34C759);
}



body[data-page="finanzen"] .entry-status {

    margin-top: 0.5rem;
}



body[data-page="finanzen"] .status-badge {

    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-family: var(--font-sans);
}



body[data-page="finanzen"] .status-badge.matched {

    background: rgba(52, 199, 89, 0.15);
    color: var(--ios-system-green, #34C759);
}



body[data-page="finanzen"] .status-badge.unmatched {

    background: rgba(255, 149, 0, 0.15);
    color: var(--ios-system-orange, #FF9500);
}



/* Matching Panel */
body[data-page="finanzen"] .matching-content {

    flex: 1;
    padding: 1rem;
    overflow-y: auto;
}



body[data-page="finanzen"] .matching-placeholder,
body[data-page="finanzen"] .loading-state,
body[data-page="finanzen"] .empty-state,
body[data-page="finanzen"] .error-message {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    height: 100%;
    min-height: 200px;
    text-align: center;
}



body[data-page="finanzen"] .loading-state .spinner {

    width: 2rem;
    height: 2rem;
    border: 2px solid var(--glass-border, rgba(255,255,255,0.1));
    border-top-color: var(--ios-system-orange, #FF9500);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}



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

/* Selected Bank Entry Summary */
body[data-page="finanzen"] .selected-bank-entry {

    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.08));
}



body[data-page="finanzen"] .bank-entry-summary {

    background: var(--glass-secondary, rgba(255,255,255,0.04));
    border-radius: 0.5rem;
    padding: 0.875rem;
}



body[data-page="finanzen"] .bank-entry-summary .entry-row {

    display: flex;
    justify-content: space-between;
    padding: 0.375rem 0;
    font-size: 0.8125rem;
}



body[data-page="finanzen"] .bank-entry-summary .label {

    color: var(--text-secondary, rgba(255,255,255,0.6));
}



body[data-page="finanzen"] .bank-entry-summary .value {

    color: var(--text-primary, rgba(255,255,255,0.95));
    text-align: right;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
}



body[data-page="finanzen"] .bank-entry-summary .value.amount {

    font-weight: 600;
    font-family: var(--font-sans);
}



/* Matching Candidates */
body[data-page="finanzen"] .matching-candidates-section h4 {

    margin-bottom: 0.75rem;
}



body[data-page="finanzen"] .candidates-list {

    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}



body[data-page="finanzen"] .candidate-item {

    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--glass-secondary, rgba(255,255,255,0.04));
    border-radius: 0.5rem;
    transition: background 0.15s;
}



body[data-page="finanzen"] .candidate-item:hover {

    background: var(--glass-hover, rgba(255,255,255,0.08));
}



body[data-page="finanzen"] .candidate-score {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    font-family: var(--font-sans);
}



body[data-page="finanzen"] .candidate-score.high {

    background: rgba(52, 199, 89, 0.15);
    color: var(--ios-system-green, #34C759);
}



body[data-page="finanzen"] .candidate-score.medium {

    background: rgba(255, 149, 0, 0.15);
    color: var(--ios-system-orange, #FF9500);
}



body[data-page="finanzen"] .candidate-score.low {

    background: rgba(255, 59, 48, 0.15);
    color: var(--ios-system-red, #FF3B30);
}



body[data-page="finanzen"] .candidate-score .score-value {

    font-size: 0.875rem;
    font-weight: 600;
}



body[data-page="finanzen"] .candidate-score .score-label {

    font-size: 0.5625rem;
    text-transform: uppercase;
    opacity: 0.8;
}



body[data-page="finanzen"] .candidate-details {

    flex: 1;
    min-width: 0;
}



body[data-page="finanzen"] .candidate-desc {

    font-size: 0.8125rem;
    color: var(--text-primary, rgba(255,255,255,0.95));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



body[data-page="finanzen"] .candidate-meta {

    display: flex;
    gap: 0.75rem;
    font-size: 0.6875rem;
    color: var(--text-tertiary, rgba(255,255,255,0.5));
    margin-top: 0.25rem;
}



body[data-page="finanzen"] .candidate-current-cat {

    font-style: italic;
}



/* Category row below each candidate - for Nebenkosten assignment */
body[data-page="finanzen"] .candidate-category-row {

    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem 0.75rem 0.75rem;
    margin-top: -0.25rem;
    margin-bottom: 0.25rem;
    background: var(--glass-primary, rgba(255,255,255,0.02));
    border-radius: 0 0 0.5rem 0.5rem;
    border-top: 1px dashed var(--glass-border, rgba(255,255,255,0.08));
}



body[data-page="finanzen"] .candidate-category-row label {

    white-space: nowrap;
    flex-shrink: 0;
}



body[data-page="finanzen"] .match-category-select {

    flex: 1;
    max-width: 15em;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
    background: var(--glass-primary, rgba(255,255,255,0.04));
    color: var(--text-primary);
    font-size: 0.75rem;
    border-radius: 0.375rem;
    cursor: pointer;
}



body[data-page="finanzen"] .match-category-select:focus {

    outline: none;
    border-color: var(--ios-system-orange, #FF9500);
}



body[data-page="finanzen"] .match-umlagefaehig-badge {

    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.625rem;
    font-family: var(--font-sans);
    background: rgba(52, 199, 89, 0.15);
    color: var(--ios-system-green, #34C759);
    border-radius: 0.25rem;
    white-space: nowrap;
}



body[data-page="finanzen"] .match-umlagefaehig-badge.hidden {

    display: none;
}



body[data-page="finanzen"] .candidate-amount {

    font-size: 0.8125rem;
    font-weight: 600;
    font-family: var(--font-sans);
    min-width: 5rem;
    text-align: right;
}



/* Match toggle in candidate item */
body[data-page="finanzen"] .candidate-item .match-toggle {

    flex-shrink: 0;
    margin-left: auto;
}



body[data-page="finanzen"] .candidate-item .match-toggle .toggle-switch {

    width: 2.5rem;
    height: 1.375rem;
}



body[data-page="finanzen"] .candidate-item .match-toggle .toggle-switch::after {

    width: 1.125rem;
    height: 1.125rem;
}



body[data-page="finanzen"] .candidate-item .match-toggle input:checked + .toggle-switch::after {

    transform: translateX(1.125rem);
}



/* Legacy btn-match (kept for compatibility) */
body[data-page="finanzen"] .btn-match {

    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: var(--ios-system-green, #34C759);
    color: var(--text-primary);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s;
}



body[data-page="finanzen"] .btn-match:hover {

    opacity: 0.9;
    transform: scale(1.05);
}



body[data-page="finanzen"] .no-candidates {

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem 1rem;
    text-align: center;
}



body[data-page="finanzen"] .btn-secondary {

    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.15));
    background: transparent;
    color: var(--text-primary, rgba(255,255,255,0.9));
    font-size: 0.8125rem;
    font-family: var(--font-sans);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s;
}



body[data-page="finanzen"] .btn-secondary:hover {

    background: var(--glass-hover, rgba(255,255,255,0.08));
}



/* ========================================
   UPLOAD HERO SECTION (Erfassen Tab)
   ======================================== */

body[data-page="finanzen"] .upload-hero-section {
    margin-bottom: 1.5rem;
    padding: 2rem 1.5rem;
    border: 2px dashed var(--glass-border, rgba(255,255,255,0.2));
    border-radius: 1rem;
    background: linear-gradient(135deg,
        var(--glass-primary, rgba(255,255,255,0.05)) 0%,
        var(--glass-secondary, rgba(255,255,255,0.08)) 100%);
    text-align: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

body[data-page="finanzen"] .upload-hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%,
        rgba(255, 149, 0, 0.08) 0%,
        transparent 70%);
    pointer-events: none;
}

body[data-page="finanzen"] .upload-hero-section:hover {
    border-color: var(--ios-system-orange, #FF9500);
    background: linear-gradient(135deg,
        var(--glass-secondary, rgba(255,255,255,0.08)) 0%,
        var(--glass-hover, rgba(255,255,255,0.12)) 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(255, 149, 0, 0.15);
}

body[data-page="finanzen"] .upload-hero-content {
    position: relative;
    z-index: 1;
}

body[data-page="finanzen"] .upload-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: linear-gradient(135deg,
        rgba(255, 149, 0, 0.15) 0%,
        rgba(255, 149, 0, 0.08) 100%);
    color: var(--ios-system-orange, #FF9500);
}

body[data-page="finanzen"] .upload-hero-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

body[data-page="finanzen"] .upload-hero-subtitle {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

body[data-page="finanzen"] .upload-hero-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

body[data-page="finanzen"] .upload-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    border: none;
}

body[data-page="finanzen"] .upload-hero-btn.primary {
    background: linear-gradient(135deg,
        var(--ios-system-orange, #FF9500) 0%,
        #FF7B00 100%);
    color: var(--button-text-on-color);
    box-shadow: 0 4px 16px rgba(255, 149, 0, 0.3);
}

body[data-page="finanzen"] .upload-hero-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(255, 149, 0, 0.4);
}

body[data-page="finanzen"] .upload-hero-btn.secondary {
    background: var(--glass-secondary, rgba(255,255,255,0.08));
    color: var(--text-primary);
    border: 1px solid var(--glass-border, rgba(255,255,255,0.15));
}

body[data-page="finanzen"] .upload-hero-btn.secondary:hover {
    background: var(--glass-hover, rgba(255,255,255,0.12));
    border-color: var(--ios-system-orange, #FF9500);
    color: var(--ios-system-orange, #FF9500);
}

body[data-page="finanzen"] .upload-hero-formats {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Form Divider */
body[data-page="finanzen"] .form-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
}

body[data-page="finanzen"] .form-divider::before,
body[data-page="finanzen"] .form-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--glass-border, rgba(255,255,255,0.12));
}

body[data-page="finanzen"] .divider-text {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ========================================
   PROCESSING STATE (Document Upload)
   ======================================== */

body[data-page="finanzen"] .upload-processing-state {
    position: relative;
    z-index: 1;
    padding: 1rem 0;
}

body[data-page="finanzen"] .processing-animation {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
}

body[data-page="finanzen"] .processing-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--ios-system-orange, #FF9500);
    animation: spin 1.5s linear infinite;
}

body[data-page="finanzen"] .processing-ring:nth-child(2) {
    inset: 10px;
    border-top-color: var(--ios-system-orange);
    animation-duration: 2s;
    animation-direction: reverse;
}

body[data-page="finanzen"] .processing-ring:nth-child(3) {
    inset: 20px;
    border-top-color: var(--ios-system-green, #34C759);
    animation-duration: 2.5s;
}

body[data-page="finanzen"] .processing-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--ios-system-orange, #FF9500);
    animation: pulse 2s ease-in-out infinite;
}

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

@keyframes pulse {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

body[data-page="finanzen"] .processing-title {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

body[data-page="finanzen"] .processing-subtitle {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

body[data-page="finanzen"] .processing-timer {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--glass-primary, rgba(255,255,255,0.05));
    border-radius: 2rem;
    margin-bottom: 1.5rem;
}

body[data-page="finanzen"] .timer-text {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--ios-system-orange, #FF9500);
    font-weight: 500;
}

body[data-page="finanzen"] .processing-steps {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

body[data-page="finanzen"] .processing-steps .step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

body[data-page="finanzen"] .processing-steps .step.active {
    opacity: 1;
}

body[data-page="finanzen"] .processing-steps .step.completed {
    opacity: 0.7;
}

body[data-page="finanzen"] .step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-tertiary);
    transition: all 0.3s ease;
}

body[data-page="finanzen"] .step.active .step-dot {
    background: var(--ios-system-orange, #FF9500);
    box-shadow: 0 0 8px rgba(255, 149, 0, 0.5);
    animation: dotPulse 1s ease-in-out infinite;
}

body[data-page="finanzen"] .step.completed .step-dot {
    background: var(--ios-system-green, #34C759);
}

@keyframes dotPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

body[data-page="finanzen"] .step-text {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

body[data-page="finanzen"] .step.active .step-text {
    color: var(--text-primary);
    font-weight: 500;
}

/* ========================================
   COMPLETED STATE (Document Upload)
   ======================================== */

body[data-page="finanzen"] .upload-completed-state {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg,
        rgba(52, 199, 89, 0.1) 0%,
        rgba(52, 199, 89, 0.05) 100%);
    border-radius: 0.75rem;
}

body[data-page="finanzen"] .completed-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(52, 199, 89, 0.15);
    color: var(--ios-system-green, #34C759);
    flex-shrink: 0;
}

body[data-page="finanzen"] .completed-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}

body[data-page="finanzen"] .completed-filename {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

body[data-page="finanzen"] .completed-status {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--ios-system-green, #34C759);
}

body[data-page="finanzen"] .completed-change-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: var(--glass-primary, rgba(255,255,255,0.05));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.12));
    border-radius: 0.5rem;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

body[data-page="finanzen"] .completed-change-btn:hover {
    background: var(--glass-hover, rgba(255,255,255,0.1));
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

/* Responsive adjustments */
@media (max-width: 640px) {
    body[data-page="finanzen"] .upload-hero-section {
        padding: 1.5rem 1rem;
    }

    body[data-page="finanzen"] .upload-hero-icon {
        width: 64px;
        height: 64px;
    }

    body[data-page="finanzen"] .upload-hero-icon svg {
        width: 36px;
        height: 36px;
    }

    body[data-page="finanzen"] .upload-hero-title {
        font-size: 1.25rem;
    }

    body[data-page="finanzen"] .upload-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    body[data-page="finanzen"] .upload-hero-btn {
        justify-content: center;
    }

    body[data-page="finanzen"] .processing-steps {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    body[data-page="finanzen"] .upload-completed-state {
        flex-direction: column;
        text-align: center;
    }

    body[data-page="finanzen"] .completed-info {
        align-items: center;
    }
}

/* ========================================
   DOCUMENT ATTACHMENT AREA (Legacy - keeping for compatibility)
   ======================================== */

body[data-page="finanzen"] .document-attachment-area {

    padding: 1rem;
    border: 2px dashed var(--glass-border, rgba(255,255,255,0.15));
    border-radius: 0.75rem;
    background: var(--glass-primary, rgba(255,255,255,0.03));
    transition: all 0.2s;
}



body[data-page="finanzen"] .document-attachment-area:hover {

    border-color: var(--ios-system-orange, #FF9500);
    background: var(--glass-secondary, rgba(255,255,255,0.05));
}



body[data-page="finanzen"] .attachment-empty {

    text-align: center;
}



body[data-page="finanzen"] .attachment-actions {

    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}



body[data-page="finanzen"] .attachment-btn {

    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.15));
    background: var(--glass-primary, rgba(255,255,255,0.05));
    color: var(--text-primary, rgba(255,255,255,0.9));
    font-size: 0.875rem;
    font-family: var(--font-sans);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s;
}



body[data-page="finanzen"] .attachment-btn:hover {

    background: var(--glass-hover, rgba(255,255,255,0.1));
    border-color: var(--ios-system-orange, #FF9500);
    color: var(--ios-system-orange, #FF9500);
}



body[data-page="finanzen"] .attachment-btn svg {

    opacity: 0.8;
}



body[data-page="finanzen"] .attachment-hint {

    margin-top: 0.25rem;
    font-size: 0.75rem;
}



/* Attached document preview */
body[data-page="finanzen"] .attachment-preview {

    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem;
}



body[data-page="finanzen"] .attachment-preview .preview-icon {

    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--glass-secondary, rgba(255,255,255,0.08));
    border-radius: 0.5rem;
    color: var(--ios-system-orange, #FF9500);
}



body[data-page="finanzen"] .attachment-preview .preview-info {

    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}



body[data-page="finanzen"] .attachment-preview .preview-name {

    color: var(--text-primary, rgba(255,255,255,0.9));
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



body[data-page="finanzen"] .attachment-preview .preview-status {

    color: var(--ios-system-green, #34C759);
    font-size: 0.75rem;
}



body[data-page="finanzen"] .attachment-preview .preview-remove {

    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: var(--text-tertiary, rgba(255,255,255,0.5));
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s;
}



body[data-page="finanzen"] .attachment-preview .preview-remove:hover {

    background: var(--glass-hover, rgba(255,255,255,0.08));
    color: var(--ios-system-red, #FF3B30);
}



/* ========================================
   DOCUMENT CHOOSER MODAL
   ======================================== */

body[data-page="finanzen"] .modal-overlay {

    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}



body[data-page="finanzen"] .modal-overlay.hidden {

    display: none;
}



body[data-page="finanzen"] .document-chooser-modal {

    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}



body[data-page="finanzen"] .document-chooser-modal .modal-header {

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.1));
}



body[data-page="finanzen"] .document-chooser-modal .modal-close {

    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: var(--text-tertiary, rgba(255,255,255,0.5));
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s;
}



body[data-page="finanzen"] .document-chooser-modal .modal-close:hover {

    background: var(--glass-hover, rgba(255,255,255,0.08));
    color: var(--text-primary, rgba(255,255,255,0.9));
}



body[data-page="finanzen"] .document-chooser-modal .modal-body {

    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem;
    gap: 0.75rem;
}



/* Search bar */
body[data-page="finanzen"] .document-chooser-modal .search-bar {

    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: var(--glass-secondary, rgba(255,255,255,0.05));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
    border-radius: 0.5rem;
}



body[data-page="finanzen"] .document-chooser-modal .search-bar svg {

    color: var(--text-tertiary, rgba(255,255,255,0.5));
    flex-shrink: 0;
}



body[data-page="finanzen"] .document-chooser-modal .search-input {

    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary, rgba(255,255,255,0.9));
    font-size: 0.875rem;
}



body[data-page="finanzen"] .document-chooser-modal .search-input::placeholder {

    color: var(--text-quaternary);
}



/* Filter tabs */
body[data-page="finanzen"] .doc-filter-tabs {

    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}



body[data-page="finanzen"] .doc-filter-tab {

    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.15));
    color: var(--text-secondary, rgba(255,255,255,0.7));
    font-size: 0.75rem;
    font-family: var(--font-sans);
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.15s;
}



body[data-page="finanzen"] .doc-filter-tab:hover {

    background: var(--glass-hover, rgba(255,255,255,0.08));
}



body[data-page="finanzen"] .doc-filter-tab.active {

    background: var(--ios-system-orange, #FF9500);
    border-color: var(--ios-system-orange, #FF9500);
    color: var(--text-primary);
}



/* Document list */
body[data-page="finanzen"] .doc-chooser-list {

    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 200px;
}



body[data-page="finanzen"] .doc-chooser-item {

    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--glass-primary, rgba(255,255,255,0.03));
    border: 2px solid transparent;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s;
}



body[data-page="finanzen"] .doc-chooser-item:hover {

    background: var(--glass-secondary, rgba(255,255,255,0.06));
}



body[data-page="finanzen"] .doc-chooser-item.selected {

    border-color: var(--ios-system-orange, #FF9500);
    background: rgba(255, 149, 0, 0.1);
}



body[data-page="finanzen"] .doc-chooser-item .doc-icon {

    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--glass-secondary, rgba(255,255,255,0.08));
    border-radius: 0.375rem;
    color: var(--ios-system-orange, #FF9500);
    flex-shrink: 0;
}



body[data-page="finanzen"] .doc-chooser-item .doc-info {

    flex: 1;
    min-width: 0;
}



body[data-page="finanzen"] .doc-chooser-item .doc-name {

    color: var(--text-primary, rgba(255,255,255,0.9));
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



body[data-page="finanzen"] .doc-chooser-item .doc-meta {

    display: flex;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-tertiary, rgba(255,255,255,0.5));
}



body[data-page="finanzen"] .doc-chooser-item .doc-type-badge {

    padding: 0.125rem 0.5rem;
    background: var(--glass-secondary, rgba(255,255,255,0.08));
    border-radius: 0.25rem;
    font-size: 0.6875rem;
    text-transform: uppercase;
    color: var(--text-secondary, rgba(255,255,255,0.7));
}



/* Modal footer */
body[data-page="finanzen"] .document-chooser-modal .modal-footer {

    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--glass-border, rgba(255,255,255,0.1));
}



/* Loading state */
body[data-page="finanzen"] .doc-chooser-list .loading-state {

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: var(--text-tertiary, rgba(255,255,255,0.5));
    font-size: 0.875rem;
}



body[data-page="finanzen"] .loading-spinner {

    width: 20px;
    height: 20px;
    border: 2px solid var(--glass-border, rgba(255,255,255,0.2));
    border-top-color: var(--ios-system-orange, #FF9500);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}



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

/* Empty state */
body[data-page="finanzen"] .doc-chooser-list .empty-state {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    color: var(--text-tertiary, rgba(255,255,255,0.5));
    font-size: 0.875rem;
    text-align: center;
}



/* ========================================
   NEBENKOSTEN TAB
   ======================================== */

/* Header */
body[data-page="finanzen"] .nebenkosten-header {

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    gap: 1rem;
}



body[data-page="finanzen"] .nebenkosten-header h2 {

    margin: 0 0 0.25rem 0;
}



body[data-page="finanzen"] .nebenkosten-header p {

    margin: 0;
}



body[data-page="finanzen"] .btn-create-settlement {

    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}



/* Filters */
body[data-page="finanzen"] .nebenkosten-filters {

    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}



body[data-page="finanzen"] .nebenkosten-filters .filter-group {

    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 10em;
}



body[data-page="finanzen"] .nebenkosten-filters .filter-select {

    padding: 0.5rem 0.75rem;
    background: var(--glass-secondary, rgba(255,255,255,0.08));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.15));
    border-radius: 0.5rem;
    color: var(--text-primary, #fff);
    font-size: 0.875rem;
    font-family: var(--font-sans);
}



body[data-page="finanzen"] .nebenkosten-filters .filter-select:focus {

    outline: none;
    border-color: var(--ios-system-orange, #FF9500);
}



/* Settlements List */
body[data-page="finanzen"] .settlements-list {

    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}



/* Loading State */
body[data-page="finanzen"] .settlement-loading {

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: var(--text-secondary, rgba(255,255,255,0.7));
}



body[data-page="finanzen"] .settlement-loading .spinner {

    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--glass-border, rgba(255,255,255,0.2));
    border-top-color: var(--ios-system-orange, #FF9500);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}



/* Empty State */
body[data-page="finanzen"] .settlement-empty {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
}



body[data-page="finanzen"] .settlement-empty .empty-icon {

    margin-bottom: 1rem;
    color: var(--text-quaternary);
}



body[data-page="finanzen"] .settlement-empty h3 {

    margin: 0 0 0.5rem 0;
}



body[data-page="finanzen"] .settlement-empty p {

    margin: 0;
    max-width: 20em;
}



/* Settlement Card */
body[data-page="finanzen"] .settlement-card {

    padding: 1rem 1.25rem;
    background: var(--glass-secondary, rgba(255,255,255,0.08));
    border-radius: 0.75rem;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.12));
    transition: all 0.15s ease;
}



body[data-page="finanzen"] .settlement-card:hover {

    background: var(--glass-hover, rgba(255,255,255,0.12));
    border-color: var(--glass-border, rgba(255,255,255,0.18));
}



body[data-page="finanzen"] .settlement-card-header {

    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}



body[data-page="finanzen"] .settlement-building {

    font-weight: 600;
}



/* Status Badges */
body[data-page="finanzen"] .settlement-status {

    padding: 0.25rem 0.625rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-family: var(--font-sans);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}



body[data-page="finanzen"] .settlement-status.status-draft {

    background: rgba(255, 149, 0, 0.15);
    color: var(--ios-system-orange, #FF9500);
}



body[data-page="finanzen"] .settlement-status.status-calculated {

    background: rgba(255, 149, 0, 0.15);
    color: var(--ios-system-orange, #FF9500);
}



body[data-page="finanzen"] .settlement-status.status-approved {

    background: rgba(52, 199, 89, 0.15);
    color: var(--ios-system-green, #34C759);
}



body[data-page="finanzen"] .settlement-status.status-sent {

    background: rgba(88, 86, 214, 0.15);
    color: var(--ios-system-purple, #5856D6);
}



/* Period Row */
body[data-page="finanzen"] .settlement-period {

    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}



body[data-page="finanzen"] .settlement-period svg {

    flex-shrink: 0;
}



/* Totals Grid */
body[data-page="finanzen"] .settlement-totals {

    display: flex;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
}



body[data-page="finanzen"] .settlement-total {

    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}



body[data-page="finanzen"] .settlement-total .total-label {

    font-size: 0.75rem;
}



body[data-page="finanzen"] .settlement-total .total-value {

    font-weight: 500;
}



/* Actions Row */
body[data-page="finanzen"] .settlement-actions {

    display: flex;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--glass-border, rgba(255,255,255,0.1));
}



body[data-page="finanzen"] .btn-settlement-action {

    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--glass-primary, rgba(255,255,255,0.06));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.12));
    border-radius: 0.375rem;
    color: var(--text-primary, #fff);
    font-size: 0.8125rem;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.15s ease;
}



body[data-page="finanzen"] .btn-settlement-action:hover {

    background: var(--glass-hover, rgba(255,255,255,0.1));
}



body[data-page="finanzen"] .btn-settlement-action.btn-view {

    color: var(--ios-system-orange, #FF9500);
}



body[data-page="finanzen"] .btn-settlement-action.btn-calculate {

    color: var(--ios-system-orange, #FF9500);
}



body[data-page="finanzen"] .btn-settlement-action.btn-approve {

    color: var(--ios-system-green, #34C759);
}



/* Settlement Detail (in modal) */
body[data-page="finanzen"] .settlement-detail {

    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}



body[data-page="finanzen"] .settlement-detail .detail-section {

    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}



body[data-page="finanzen"] .settlement-detail .detail-section h4 {

    margin: 0 0 0.5rem 0;
}



body[data-page="finanzen"] .settlement-detail .detail-row {

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.1));
}



body[data-page="finanzen"] .settlement-detail .detail-row:last-child {

    border-bottom: none;
}



body[data-page="finanzen"] .settlement-detail .unit-result {

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.75rem;
    background: var(--glass-secondary, rgba(255,255,255,0.05));
    border-radius: 0.375rem;
    margin-bottom: 0.375rem;
}



body[data-page="finanzen"] .settlement-detail .unit-name {

    font-weight: 500;
}



body[data-page="finanzen"] .settlement-detail .unit-amount.positive {

    color: var(--ios-system-red, #FF3B30);
}



body[data-page="finanzen"] .settlement-detail .unit-amount.negative {

    color: var(--ios-system-green, #34C759);
}



/* Responsive */
@media (max-width: 48em) {

    body[data-page="finanzen"] .nebenkosten-header {

        flex-direction: column;
        align-items: stretch;
    }



    body[data-page="finanzen"] .nebenkosten-filters {

        flex-direction: column;
    }



    body[data-page="finanzen"] .nebenkosten-filters .filter-group {

        min-width: 100%;
    }



    body[data-page="finanzen"] .settlement-totals {

        flex-wrap: wrap;
    }



    body[data-page="finanzen"] .settlement-actions {

        flex-wrap: wrap;
    }



    body[data-page="finanzen"] .nebenkosten-summary {

        flex-direction: column;
        gap: 0.75rem;
    }



    body[data-page="finanzen"] .category-header {

        flex-direction: column;
        gap: 0.75rem;
    }



    body[data-page="finanzen"] .category-total-row {

        justify-content: space-between;
        width: 100%;
    }


}


/* =========================================================================
   NEBENKOSTEN CATEGORIES VIEW
   ========================================================================= */

body[data-page="finanzen"] .nebenkosten-summary {

    display: flex;
    gap: 2rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    background: var(--glass-primary, rgba(255,255,255,0.04));
    border-radius: 0.75rem;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
}



body[data-page="finanzen"] .summary-item {

    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}



body[data-page="finanzen"] .summary-label {

    text-transform: uppercase;
    letter-spacing: 0.05em;
}



body[data-page="finanzen"] .nebenkosten-categories {

    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}



body[data-page="finanzen"] .nebenkosten-loading,
body[data-page="finanzen"] .nebenkosten-empty {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    gap: 1rem;
}



body[data-page="finanzen"] .nebenkosten-empty .empty-icon {

    opacity: 0.4;
}



/* Category Cards */
body[data-page="finanzen"] .nebenkosten-category-card {

    background: var(--glass-secondary, rgba(255,255,255,0.04));
    border-radius: 0.75rem;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
    overflow: hidden;
    transition: all 0.2s;
}



body[data-page="finanzen"] .nebenkosten-category-card:hover {

    border-color: var(--glass-hover, rgba(255,255,255,0.15));
}



body[data-page="finanzen"] .category-header {

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: background 0.15s;
}



body[data-page="finanzen"] .category-header:hover {

    background: var(--glass-hover, rgba(255,255,255,0.06));
}



body[data-page="finanzen"] .category-info {

    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}



body[data-page="finanzen"] .category-meta {

    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}



body[data-page="finanzen"] .badge-umlagefaehig {

    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    font-size: 0.625rem;
    font-family: var(--font-sans);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(52, 199, 89, 0.15);
    color: var(--ios-system-green, #34C759);
    border-radius: 0.25rem;
}



body[data-page="finanzen"] .badge-skr,
body[data-page="finanzen"] .badge-betrkv {

    display: inline-flex;
    padding: 0.125rem 0.375rem;
    font-size: 0.625rem;
    font-family: var(--font-sans);
    background: var(--glass-primary, rgba(255,255,255,0.06));
    color: var(--text-tertiary);
    border-radius: 0.25rem;
}



body[data-page="finanzen"] .category-total-row {

    display: flex;
    align-items: center;
    gap: 1rem;
}



body[data-page="finanzen"] .expand-icon {

    transition: transform 0.2s;
    opacity: 0.5;
}



body[data-page="finanzen"] .expand-icon.expanded {

    transform: rotate(180deg);
}



/* Category Entries (Expandable) */
body[data-page="finanzen"] .category-entries {

    border-top: 1px solid var(--glass-border, rgba(255,255,255,0.06));
    background: var(--glass-primary, rgba(255,255,255,0.02));
}



body[data-page="finanzen"] .category-entries.hidden {

    display: none;
}



body[data-page="finanzen"] .nebenkosten-entry {

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.04));
    transition: background 0.15s;
}



body[data-page="finanzen"] .nebenkosten-entry:last-child {

    border-bottom: none;
}



body[data-page="finanzen"] .nebenkosten-entry:hover {

    background: var(--glass-hover, rgba(255,255,255,0.04));
}



body[data-page="finanzen"] .entry-info {

    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
    min-width: 0;
}



body[data-page="finanzen"] .entry-desc {

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



body[data-page="finanzen"] .entry-actions {

    display: flex;
    align-items: center;
    gap: 0.75rem;
}



body[data-page="finanzen"] .btn-doc-link {

    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 0.375rem;
    background: var(--glass-primary, rgba(255,255,255,0.06));
    color: var(--text-secondary);
    transition: all 0.15s;
}



body[data-page="finanzen"] .btn-doc-link:hover {

    background: var(--ios-system-orange, #FF9500);
    color: var(--text-primary);
}



body[data-page="finanzen"] .entry-amount {

    font-family: var(--font-sans);
    font-weight: 500;
    white-space: nowrap;
}



/* Create Abrechnung Button */
body[data-page="finanzen"] .btn-create-abrechnung {

    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}



/* ========================================
   DISTRIBUTION KEYS CONFIGURATION MODAL
   ======================================== */

/* Distribution Summary Grid */
body[data-page="finanzen"] .distribution-summary-grid {

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--glass-secondary, rgba(255,255,255,0.04));
    border-radius: 0.75rem;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
}



body[data-page="finanzen"] .distribution-summary-item {

    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: center;
}



body[data-page="finanzen"] .distribution-summary-item .summary-value {

    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    font-family: var(--font-sans);
}



body[data-page="finanzen"] .distribution-summary-item .summary-label {

    font-size: 0.75rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}



/* Legend Grid */
body[data-page="finanzen"] .legend-grid {

    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--glass-primary, rgba(255,255,255,0.02));
    border-radius: 0.5rem;
}



body[data-page="finanzen"] .legend-badge {

    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-family: var(--font-sans);
    border-radius: 0.25rem;
    background: var(--glass-secondary, rgba(255,255,255,0.08));
    color: var(--text-secondary);
}



body[data-page="finanzen"] .legend-badge.legend-area {

    background: rgba(255, 149, 0, 0.15);
    color: var(--ios-system-orange, #FF9500);
}



body[data-page="finanzen"] .legend-badge.legend-persons {

    background: rgba(52, 199, 89, 0.15);
    color: var(--ios-system-green, #34C759);
}



body[data-page="finanzen"] .legend-badge.legend-units {

    background: rgba(255, 149, 0, 0.15);
    color: var(--ios-system-orange, #FF9500);
}



body[data-page="finanzen"] .legend-badge.legend-mea {

    background: rgba(88, 86, 214, 0.15);
    color: var(--ios-system-purple, #5856D6);
}



body[data-page="finanzen"] .legend-badge.legend-consumption {

    background: rgba(175, 82, 222, 0.15);
    color: #AF52DE;
}



/* Distribution Keys Table */
body[data-page="finanzen"] .distribution-keys-table {

    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}



body[data-page="finanzen"] .distribution-keys-table thead {

    position: sticky;
    top: 0;
    background: var(--glass-secondary, rgba(30, 30, 40, 0.98));
    z-index: 5;
}



body[data-page="finanzen"] .distribution-keys-table th {

    padding: 0.625rem 0.75rem;
    text-align: left;
    font-weight: 500;
    color: var(--text-tertiary);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-sans);
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.12));
}



body[data-page="finanzen"] .distribution-keys-table th:last-child {

    text-align: center;
}



body[data-page="finanzen"] .distribution-keys-table td {

    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.06));
    vertical-align: middle;
}



body[data-page="finanzen"] .distribution-keys-table tbody tr:hover {

    background: var(--glass-hover, rgba(255,255,255,0.04));
}



body[data-page="finanzen"] .distribution-keys-table .category-name {

    font-weight: 500;
    color: var(--text-primary);
}



body[data-page="finanzen"] .distribution-keys-table .betrkv-ref {

    font-size: 0.6875rem;
    color: var(--text-quaternary);
    margin-top: 0.125rem;
}



/* Key Type Select */
body[data-page="finanzen"] .key-type-select {

    width: 100%;
    max-width: 10em;
    padding: 0.375rem 0.5rem;
    background: var(--glass-secondary, rgba(255,255,255,0.06));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.12));
    border-radius: 0.375rem;
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.15s;
}



body[data-page="finanzen"] .key-type-select:focus {

    outline: none;
    border-color: var(--ios-system-orange, #FF9500);
    background: var(--glass-hover, rgba(255,255,255,0.1));
}



/* Key Type Badge (display version) */
body[data-page="finanzen"] .key-type-badge {

    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    font-family: var(--font-sans);
    font-weight: 500;
    border-radius: 0.25rem;
    white-space: nowrap;
}



body[data-page="finanzen"] .key-type-badge.type-area {

    background: rgba(255, 149, 0, 0.15);
    color: var(--ios-system-orange, #FF9500);
}



body[data-page="finanzen"] .key-type-badge.type-persons {

    background: rgba(52, 199, 89, 0.15);
    color: var(--ios-system-green, #34C759);
}



body[data-page="finanzen"] .key-type-badge.type-units {

    background: rgba(255, 149, 0, 0.15);
    color: var(--ios-system-orange, #FF9500);
}



body[data-page="finanzen"] .key-type-badge.type-mea {

    background: rgba(88, 86, 214, 0.15);
    color: var(--ios-system-purple, #5856D6);
}



body[data-page="finanzen"] .key-type-badge.type-consumption {

    background: rgba(175, 82, 222, 0.15);
    color: #AF52DE;
}



/* MEA Validation Warning */
body[data-page="finanzen"] .mea-validation-warning {

    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    margin-top: 1rem;
    background: rgba(255, 149, 0, 0.1);
    border: 1px solid rgba(255, 149, 0, 0.25);
    border-radius: 0.5rem;
}



body[data-page="finanzen"] .mea-validation-warning svg {

    flex-shrink: 0;
    color: var(--ios-system-orange, #FF9500);
}



body[data-page="finanzen"] .mea-validation-warning .warning-text {

    font-size: 0.8125rem;
    color: var(--text-primary);
}



body[data-page="finanzen"] .mea-validation-warning .warning-text strong {

    color: var(--ios-system-orange, #FF9500);
}



body[data-page="finanzen"] .mea-validation-warning.mea-valid {

    background: rgba(52, 199, 89, 0.1);
    border-color: rgba(52, 199, 89, 0.25);
}



body[data-page="finanzen"] .mea-validation-warning.mea-valid svg {

    color: var(--ios-system-green, #34C759);
}



body[data-page="finanzen"] .mea-validation-warning.mea-valid .warning-text strong {

    color: var(--ios-system-green, #34C759);
}



/* Unit Abrechnung Actions */
body[data-page="finanzen"] .unit-abrechnung-actions {

    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--glass-border, rgba(255,255,255,0.08));
}



body[data-page="finanzen"] .btn-unit-abrechnung,
body[data-page="finanzen"] .btn-config-distribution-keys {

    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--glass-secondary, rgba(255,255,255,0.08));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.15));
    border-radius: 0.5rem;
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.15s;
}



body[data-page="finanzen"] .btn-unit-abrechnung:hover,
body[data-page="finanzen"] .btn-config-distribution-keys:hover {

    background: var(--glass-hover, rgba(255,255,255,0.12));
    border-color: var(--ios-system-orange, #FF9500);
    color: var(--ios-system-orange, #FF9500);
}



body[data-page="finanzen"] .btn-unit-abrechnung:disabled,
body[data-page="finanzen"] .btn-config-distribution-keys:disabled {

    opacity: 0.5;
    cursor: not-allowed;
}



body[data-page="finanzen"] .btn-unit-abrechnung:disabled:hover,
body[data-page="finanzen"] .btn-config-distribution-keys:disabled:hover {

    background: var(--glass-secondary, rgba(255,255,255,0.08));
    border-color: var(--glass-border, rgba(255,255,255,0.15));
    color: var(--text-primary);
}



body[data-page="finanzen"] .btn-config-distribution-keys {

    color: var(--text-secondary);
}



body[data-page="finanzen"] .btn-config-distribution-keys:hover {

    color: var(--ios-system-purple, #5856D6);
    border-color: var(--ios-system-purple, #5856D6);
}



/* Distribution Keys Modal - Large size */
body[data-page="finanzen"] #distributionKeysModal .modal-container {

    max-width: 56rem;
}



body[data-page="finanzen"] #distributionKeysModal .modal-body {

    max-height: 60vh;
    overflow-y: auto;
}



/* Responsive Distribution Keys */
@media (max-width: 48em) {

    body[data-page="finanzen"] .distribution-summary-grid {

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



    body[data-page="finanzen"] .legend-grid {

        justify-content: center;
    }



    body[data-page="finanzen"] .distribution-keys-table {

        font-size: 0.75rem;
    }



    body[data-page="finanzen"] .distribution-keys-table th,
body[data-page="finanzen"] .distribution-keys-table td {

        padding: 0.5rem;
    }



    body[data-page="finanzen"] .key-type-select {

        max-width: 8em;
        font-size: 0.75rem;
    }


}


/* ========================================
   NEBENKOSTEN EXCEL-LIKE TABLE VIEW
   ======================================== */

/* Table Container */
body[data-page="finanzen"] .nebenkosten-table-container {

    padding: 0;
    overflow: hidden;
}



body[data-page="finanzen"] .nebenkosten-table-wrapper {

    width: 100%;
    overflow-x: auto;
    max-height: 70vh;
    overflow-y: auto;
}



/* Excel-like Table */
body[data-page="finanzen"] .nebenkosten-excel-table {

    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    table-layout: fixed;
}



/* Table Header */
body[data-page="finanzen"] .nebenkosten-excel-table thead {

    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--glass-secondary, rgba(30, 30, 40, 0.98));
}



body[data-page="finanzen"] .nebenkosten-excel-table th {

    padding: 0.75rem 0.625rem;
    text-align: left;
    font-weight: 500;
    color: var(--text-tertiary);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-sans);
    border-bottom: 2px solid var(--glass-border, rgba(255,255,255,0.15));
    white-space: nowrap;
    user-select: none;
}



body[data-page="finanzen"] .nebenkosten-excel-table th.sortable {

    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}



body[data-page="finanzen"] .nebenkosten-excel-table th.sortable:hover {

    color: var(--text-primary);
    background: var(--glass-hover, rgba(255,255,255,0.04));
}



body[data-page="finanzen"] .nebenkosten-excel-table th .th-content {

    display: flex;
    align-items: center;
    gap: 0.375rem;
}



body[data-page="finanzen"] .nebenkosten-excel-table th .sort-icon {

    opacity: 0.3;
    transition: opacity 0.15s, transform 0.15s;
}



body[data-page="finanzen"] .nebenkosten-excel-table th.sortable:hover .sort-icon {

    opacity: 0.6;
}



body[data-page="finanzen"] .nebenkosten-excel-table th[data-sort-dir="asc"] .sort-icon,
body[data-page="finanzen"] .nebenkosten-excel-table th[data-sort-dir="desc"] .sort-icon {

    opacity: 1;
    color: var(--ios-system-orange, #FF9500);
}



body[data-page="finanzen"] .nebenkosten-excel-table th[data-sort-dir="desc"] .sort-icon {

    transform: rotate(180deg);
}



/* Column Widths - Optimized for space efficiency
 * Using colgroup for table-layout: fixed compatibility
 * Fixed widths to prevent excessive stretching
 */
body[data-page="finanzen"] .nebenkosten-excel-table col.col-expand {
 width: 2.5rem; }


body[data-page="finanzen"] .nebenkosten-excel-table col.col-kategorie {
 width: 16%; }


body[data-page="finanzen"] .nebenkosten-excel-table col.col-betrkv {
 width: 5rem; }


body[data-page="finanzen"] .nebenkosten-excel-table col.col-datum {
 width: 6rem; }


body[data-page="finanzen"] .nebenkosten-excel-table col.col-beschreibung {
 width: 22%; }


body[data-page="finanzen"] .nebenkosten-excel-table col.col-gebaeude {
 width: 14%; }


body[data-page="finanzen"] .nebenkosten-excel-table col.col-einheit {
 width: 6%; }


body[data-page="finanzen"] .nebenkosten-excel-table col.col-beleg {
 width: 3rem; }


body[data-page="finanzen"] .nebenkosten-excel-table col.col-betrag {
 width: 8rem; }



/* Cell alignment */
body[data-page="finanzen"] .nebenkosten-excel-table .col-expand,
body[data-page="finanzen"] .nebenkosten-excel-table th.col-expand,
body[data-page="finanzen"] .nebenkosten-excel-table td:first-child {
 text-align: center; }


body[data-page="finanzen"] .nebenkosten-excel-table .col-betrkv,
body[data-page="finanzen"] .nebenkosten-excel-table th.col-betrkv {
 text-align: center; }


body[data-page="finanzen"] .nebenkosten-excel-table .col-beleg,
body[data-page="finanzen"] .nebenkosten-excel-table th.col-beleg {
 text-align: center; }



/* Betrag column - right aligned with consistent padding */
body[data-page="finanzen"] .nebenkosten-excel-table th.col-betrag,
body[data-page="finanzen"] .nebenkosten-excel-table td.col-betrag,
body[data-page="finanzen"] .nebenkosten-excel-table td:last-child {

    text-align: right !important;
    padding-right: 1rem !important;
}



/* Ensure the header text aligns with content */
body[data-page="finanzen"] .nebenkosten-excel-table th.col-betrag .th-content {

    justify-content: flex-end;
}



/* Table Rows */
body[data-page="finanzen"] .nebenkosten-excel-table tbody tr {

    transition: background 0.1s;
}



body[data-page="finanzen"] .nebenkosten-excel-table tbody tr.hidden {

    display: none;
}



body[data-page="finanzen"] .nebenkosten-excel-table td {

    padding: 0.625rem 0.625rem;
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.06));
    vertical-align: middle;
    color: var(--text-primary);
}



/* Category Row (collapsible header) */
body[data-page="finanzen"] .nebenkosten-excel-table tr.category-row {

    background: var(--glass-secondary, rgba(255,255,255,0.04));
    cursor: pointer;
}



body[data-page="finanzen"] .nebenkosten-excel-table tr.category-row:hover {

    background: var(--glass-hover, rgba(255,255,255,0.08));
}



body[data-page="finanzen"] .nebenkosten-excel-table tr.category-row.expanded {

    background: var(--glass-hover, rgba(255,255,255,0.06));
}



body[data-page="finanzen"] .nebenkosten-excel-table tr.category-row td {

    font-weight: 500;
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.12));
}



/* Expand Button */
body[data-page="finanzen"] .expand-btn {

    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}



body[data-page="finanzen"] .expand-btn:hover {

    background: var(--glass-hover, rgba(255,255,255,0.1));
    color: var(--text-primary);
}



body[data-page="finanzen"] .expand-chevron {

    transition: transform 0.2s ease;
}



body[data-page="finanzen"] .expand-chevron.expanded {

    transform: rotate(90deg);
}



/* Category Cell */
body[data-page="finanzen"] .category-cell {

    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}



body[data-page="finanzen"] .category-cell .category-name {

    font-weight: 600;
    color: var(--text-primary);
}



body[data-page="finanzen"] .category-badges {

    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}



/* Entry Row */
body[data-page="finanzen"] .nebenkosten-excel-table tr.entry-row {

    background: transparent;
}



body[data-page="finanzen"] .nebenkosten-excel-table tr.entry-row:hover {

    background: var(--glass-primary, rgba(255,255,255,0.02));
}



body[data-page="finanzen"] .nebenkosten-excel-table tr.entry-row td {

    font-weight: 400;
    color: var(--text-secondary);
}



body[data-page="finanzen"] .entry-indent {

    padding-left: 2rem !important;
}



body[data-page="finanzen"] .entry-kategorie {

    font-size: 0.75rem;
    color: var(--text-quaternary);
}



body[data-page="finanzen"] .entry-beschreibung {

    display: block;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



body[data-page="finanzen"] .entry-count {

    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-style: italic;
}



/* Amount Columns */
body[data-page="finanzen"] .category-total {

    font-weight: 600;
    color: var(--text-primary) !important;
    font-family: var(--font-sans);
}



body[data-page="finanzen"] .entry-amount {

    font-family: var(--font-sans);
    text-align: right;
}



/* Document Link */
body[data-page="finanzen"] .doc-link {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--text-tertiary);
    border-radius: 4px;
    transition: background 0.15s, color 0.15s;
}



body[data-page="finanzen"] .doc-link:hover {

    background: var(--glass-hover, rgba(255,255,255,0.1));
    color: var(--ios-system-orange, #FF9500);
}



/* Badges in Table */
body[data-page="finanzen"] .nebenkosten-excel-table .badge {

    display: inline-block;
    padding: 0.125rem 0.375rem;
    font-size: 0.5625rem;
    font-weight: 600;
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 3px;
    white-space: nowrap;
}



body[data-page="finanzen"] .nebenkosten-excel-table .badge-umlagefaehig {

    background: rgba(52, 199, 89, 0.15);
    color: var(--ios-system-green, #34C759);
}



body[data-page="finanzen"] .nebenkosten-excel-table .badge-skr {

    background: var(--glass-secondary, rgba(255,255,255,0.08));
    color: var(--text-tertiary);
}



body[data-page="finanzen"] .nebenkosten-excel-table .badge-betrkv {

    background: rgba(255, 149, 0, 0.12);
    color: var(--ios-system-orange, #FF9500);
}



/* Responsive Table */
@media (max-width: 64em) {

    body[data-page="finanzen"] .nebenkosten-excel-table {

        font-size: 0.75rem;
    }



    body[data-page="finanzen"] .nebenkosten-excel-table th,
body[data-page="finanzen"] .nebenkosten-excel-table td {

        padding: 0.5rem 0.375rem;
    }



    body[data-page="finanzen"] .nebenkosten-excel-table .col-beschreibung {

        min-width: 120px;
    }



    body[data-page="finanzen"] .entry-beschreibung {

        max-width: 150px;
    }


}


@media (max-width: 48em) {

    body[data-page="finanzen"] .nebenkosten-table-wrapper {

        max-height: 60vh;
    }



    body[data-page="finanzen"] .nebenkosten-excel-table {

        font-size: 0.6875rem;
    }



    body[data-page="finanzen"] .nebenkosten-excel-table th,
body[data-page="finanzen"] .nebenkosten-excel-table td {

        padding: 0.375rem 0.25rem;
    }



    /* Hide less important columns on small screens */
    body[data-page="finanzen"] .nebenkosten-excel-table .col-betrkv,
body[data-page="finanzen"] .nebenkosten-excel-table .col-beleg {

        display: none;
    }



    body[data-page="finanzen"] .entry-beschreibung {

        max-width: 100px;
    }



    body[data-page="finanzen"] .category-badges {

        display: none;
    }


}


/* ========================================
   REVIEW DETAIL MODAL
   Styles for the e-Rechnung detail view
   Uses brand sunset orange gradient as accent
   ======================================== */

/* Modal container - wider and using dvh */
body[data-page="finanzen"] #reviewModal .modal-container {
    width: 90vw;
    max-width: 56rem;
    max-height: 85dvh;
}

/* Clickable row indicator */
body[data-page="finanzen"] .clickable-row {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

body[data-page="finanzen"] .clickable-row:hover {
    background-color: var(--glass-hover, rgba(255, 255, 255, 0.08));
}

/* Review modal content */
body[data-page="finanzen"] .review-detail-content {
    max-height: 65dvh;
    overflow-y: auto;
    padding-right: 0.5rem;
}

/* Review detail header - sunset orange gradient accent */
body[data-page="finanzen"] .review-detail-header {
    border-left: 3px solid transparent;
    border-image: linear-gradient(180deg, #FF9500 0%, #FF6B35 50%, #E94E1B 100%) 1;
}

body[data-page="finanzen"] .review-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

body[data-page="finanzen"] .review-header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Type badges in modal */
body[data-page="finanzen"] .review-detail-content .type-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body[data-page="finanzen"] .review-detail-content .type-badge.income {
    background-color: rgba(52, 199, 89, 0.15);
    color: var(--ios-system-green, #34C759);
}

body[data-page="finanzen"] .review-detail-content .type-badge.expense {
    background-color: rgba(255, 59, 48, 0.15);
    color: var(--ios-system-red, #FF3B30);
}

/* e-Invoice badge */
body[data-page="finanzen"] .e-invoice-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.625rem;
    font-weight: 600;
    font-family: var(--font-mono, monospace);
}

body[data-page="finanzen"] .e-invoice-badge.valid {
    background-color: rgba(52, 199, 89, 0.15);
    color: var(--ios-system-green, #34C759);
}

body[data-page="finanzen"] .e-invoice-badge.invalid {
    background-color: rgba(255, 149, 0, 0.15);
    color: var(--ios-system-orange, #FF9500);
}

/* Amounts grid */
body[data-page="finanzen"] .review-amounts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

body[data-page="finanzen"] .amount-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

body[data-page="finanzen"] .amount-item.amount-total {
    text-align: right;
}

body[data-page="finanzen"] .text-success {
    color: var(--ios-system-green, #34C759);
}

body[data-page="finanzen"] .text-expense {
    color: var(--ios-system-red, #FF3B30);
}

/* Parties grid (seller/buyer) */
body[data-page="finanzen"] .review-parties-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

body[data-page="finanzen"] .review-party {
    min-height: 8rem;
}

/* Payment details grid */
body[data-page="finanzen"] .payment-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem 1rem;
}

body[data-page="finanzen"] .payment-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

body[data-page="finanzen"] .payment-item-full {
    grid-column: 1 / -1;
}

body[data-page="finanzen"] .font-mono {
    font-family: var(--font-mono, 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace);
    font-size: 0.875em;
    word-break: break-all;
}

/* Line items table */
body[data-page="finanzen"] .line-items-table {
    width: 100%;
    border-collapse: collapse;
}

body[data-page="finanzen"] .line-items-table th,
body[data-page="finanzen"] .line-items-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
}

body[data-page="finanzen"] .line-items-table th {
    font-weight: 500;
}

body[data-page="finanzen"] .line-items-table .text-right {
    text-align: right;
}

body[data-page="finanzen"] .line-items-table tbody tr:last-child td {
    border-bottom: none;
}

/* Document link block - sunset orange accent */
body[data-page="finanzen"] .review-document {
    border-left: 3px solid transparent;
    border-image: linear-gradient(180deg, #FF9500 0%, #FF6B35 50%, #E94E1B 100%) 1;
}

body[data-page="finanzen"] .btn-view-doc {
    font-size: 0.8125rem;
    background: linear-gradient(135deg, #FF9500 0%, #FF6B35 50%, #E94E1B 100%);
    color: var(--button-text-on-color);
    border: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

body[data-page="finanzen"] .btn-view-doc:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* AI info block - sunset orange accent */
body[data-page="finanzen"] .review-ai-info {
    border-left: 3px solid transparent;
    border-image: linear-gradient(180deg, #FF9500 0%, #FF6B35 50%, #E94E1B 100%) 1;
}

body[data-page="finanzen"] .text-warning {
    color: var(--ios-system-orange, #FF9500);
}

/* Loading state */
body[data-page="finanzen"] .review-modal-loading {
    min-height: 200px;
}

body[data-page="finanzen"] .loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    border-top-color: #FF9500;
    border-right-color: #FF6B35;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Responsive adjustments for review modal */
@media (max-width: 48em) {
    body[data-page="finanzen"] #reviewModal .modal-container {
        width: 95vw;
        max-width: none;
        max-height: 90dvh;
    }

    body[data-page="finanzen"] .review-detail-content {
        max-height: 70dvh;
    }

    body[data-page="finanzen"] .review-amounts-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    body[data-page="finanzen"] .review-parties-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="finanzen"] .payment-details-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="finanzen"] .amount-item.amount-total {
        text-align: left;
        padding-top: 0.5rem;
        border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    }
}

/* ============================================================================
   PERIOD DETAIL MODAL
   ============================================================================ */

/* Extra large modal */
body[data-page="finanzen"] .modal-xl {
    max-width: 64rem;
    width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

/* Period detail header */
body[data-page="finanzen"] .period-detail-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

body[data-page="finanzen"] .period-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 999px;
    background: var(--glass-secondary);
    color: var(--text-secondary);
}

body[data-page="finanzen"] .period-status-badge.open {
    background: rgba(52, 199, 89, 0.15);
    color: var(--ios-system-green, #34C759);
}

body[data-page="finanzen"] .period-status-badge.closed {
    background: rgba(255, 149, 0, 0.15);
    color: var(--ios-system-orange, #FF9500);
}

body[data-page="finanzen"] .period-status-badge.locked {
    background: rgba(255, 59, 48, 0.15);
    color: var(--ios-system-red, #FF3B30);
}

/* Period detail tabs */
body[data-page="finanzen"] .period-detail-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
}

body[data-page="finanzen"] .period-tab {
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.2s;
}

body[data-page="finanzen"] .period-tab:hover {
    color: var(--text-primary);
}

body[data-page="finanzen"] .period-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--ios-system-orange);
}

/* Period detail body */
body[data-page="finanzen"] .period-detail-body {
    flex: 1;
    overflow-y: auto;
    min-height: 300px;
}

/* Tab content */
body[data-page="finanzen"] .period-tab-content {
    display: none;
    padding: 1.25rem;
}

body[data-page="finanzen"] .period-tab-content.active {
    display: block;
}

/* Loading state */
body[data-page="finanzen"] .period-loading {
    min-height: 200px;
}

/* Summary grid */
body[data-page="finanzen"] .period-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

body[data-page="finanzen"] .period-summary-card {
    padding: 1rem;
    text-align: center;
}

body[data-page="finanzen"] .period-summary-value {
    font-size: 1.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    margin: 0.5rem 0 0.25rem;
}

body[data-page="finanzen"] .period-summary-value.positive {
    color: var(--ios-system-green, #34C759);
}

body[data-page="finanzen"] .period-summary-value.negative {
    color: var(--ios-system-red, #FF3B30);
}

/* Status grid */
body[data-page="finanzen"] .period-status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 0.5rem;
}

body[data-page="finanzen"] .status-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    text-align: center;
}

/* Kontenblatt table */
body[data-page="finanzen"] .kontenblatt-table {
    width: 100%;
    border-collapse: collapse;
}

body[data-page="finanzen"] .kontenblatt-table th,
body[data-page="finanzen"] .kontenblatt-table td {
    padding: 0.625rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--glass-border);
}

body[data-page="finanzen"] .kontenblatt-table th {
    font-weight: 500;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

body[data-page="finanzen"] .kontenblatt-table .amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

body[data-page="finanzen"] .kontenblatt-table .account-row {
    cursor: pointer;
    transition: background 0.15s;
}

body[data-page="finanzen"] .kontenblatt-table .account-row:hover {
    background: var(--glass-hover);
}

/* Journal table */
body[data-page="finanzen"] .journal-table {
    width: 100%;
    border-collapse: collapse;
}

body[data-page="finanzen"] .journal-table th,
body[data-page="finanzen"] .journal-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--glass-border);
}

body[data-page="finanzen"] .journal-table th {
    font-weight: 500;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    text-transform: uppercase;
}

body[data-page="finanzen"] .journal-table .amount {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

body[data-page="finanzen"] .journal-table .type-badge {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 4px;
}

body[data-page="finanzen"] .journal-table .type-badge.income {
    background: rgba(52, 199, 89, 0.15);
    color: var(--ios-system-green, #34C759);
}

body[data-page="finanzen"] .journal-table .type-badge.expense {
    background: rgba(255, 59, 48, 0.15);
    color: var(--ios-system-red, #FF3B30);
}

/* Documents grid */
body[data-page="finanzen"] .period-documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

body[data-page="finanzen"] .period-document-card {
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: var(--glass-secondary);
    cursor: pointer;
    transition: background 0.15s;
}

body[data-page="finanzen"] .period-document-card:hover {
    background: var(--glass-hover);
}

body[data-page="finanzen"] .period-document-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background: var(--glass-primary);
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

/* Table scroll container */
body[data-page="finanzen"] .table-scroll {
    overflow-x: auto;
    margin: 0 -0.25rem;
    padding: 0 0.25rem;
}

/* Empty state */
body[data-page="finanzen"] .period-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-tertiary);
}

/* Summary bar */
body[data-page="finanzen"] .period-summary-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Pagination */
body[data-page="finanzen"] .period-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0 0;
    border-top: 1px solid var(--glass-border);
    margin-top: 1rem;
}

body[data-page="finanzen"] .period-pagination button {
    padding: 0.375rem 0.75rem;
    background: var(--glass-secondary);
    border: none;
    border-radius: 0.375rem;
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s;
}

body[data-page="finanzen"] .period-pagination button:hover:not(:disabled) {
    background: var(--glass-hover);
}

body[data-page="finanzen"] .period-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive adjustments */
@media (max-width: 48em) {
    body[data-page="finanzen"] .modal-xl {
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }

    body[data-page="finanzen"] .period-summary-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="finanzen"] .period-status-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="finanzen"] .period-detail-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    body[data-page="finanzen"] .period-tab {
        white-space: nowrap;
    }

    body[data-page="finanzen"] .period-documents-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   KONTENPLAN (Chart of Accounts) STYLES
   ============================================ */

/* Header */
body[data-page="finanzen"] .kontenplan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--glass-border);
}

body[data-page="finanzen"] .kontenplan-header-left {
    flex: 1;
    min-width: 12em;
}

body[data-page="finanzen"] .kontenplan-header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

body[data-page="finanzen"] .kontenplan-search {
    position: relative;
}

body[data-page="finanzen"] .kontenplan-search input {
    min-width: 14em;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: var(--glass-primary);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
}

body[data-page="finanzen"] .kontenplan-search input:focus {
    outline: none;
    border-color: var(--ios-system-orange);
}

/* Container */
body[data-page="finanzen"] .kontenplan-container {
    min-height: 20em;
}

body[data-page="finanzen"] .kontenplan-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 1rem;
}

/* Class Headers */
body[data-page="finanzen"] .kontenplan-class-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    background: var(--glass-secondary);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

body[data-page="finanzen"] .kontenplan-class-header:first-child {
    margin-top: 0;
}

body[data-page="finanzen"] .kontenplan-class-header:hover {
    background: var(--glass-hover);
}

body[data-page="finanzen"] .kontenplan-class-header .class-toggle {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

body[data-page="finanzen"] .kontenplan-class-header.collapsed .class-toggle {
    transform: rotate(-90deg);
}

body[data-page="finanzen"] .kontenplan-class-header .class-name {
    flex: 1;
    font-weight: 600;
}

body[data-page="finanzen"] .kontenplan-class-header .class-count {
    color: var(--text-tertiary);
}

/* Account Rows */
body[data-page="finanzen"] .kontenplan-accounts {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding-left: 1rem;
}

body[data-page="finanzen"] .kontenplan-accounts.collapsed {
    display: none;
}

body[data-page="finanzen"] .kontenplan-row {
    display: grid;
    grid-template-columns: 5rem 1fr auto auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.625rem 1rem;
    background: var(--glass-primary);
    border-radius: 0.375rem;
    transition: background-color 0.15s ease;
}

body[data-page="finanzen"] .kontenplan-row:hover {
    background: var(--glass-hover);
}

body[data-page="finanzen"] .kontenplan-row .konto-nummer {
    font-family: var(--font-sans);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

body[data-page="finanzen"] .kontenplan-row .konto-name {
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-page="finanzen"] .kontenplan-row .konto-type {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

body[data-page="finanzen"] .kontenplan-row .konto-type.type-aktiven {
    background: rgba(52, 199, 89, 0.15);
    color: var(--ios-system-green);
}

body[data-page="finanzen"] .kontenplan-row .konto-type.type-passiven {
    background: rgba(255, 149, 0, 0.15);
    color: var(--ios-system-orange);
}

body[data-page="finanzen"] .kontenplan-row .konto-type.type-ertrag {
    background: rgba(255, 149, 0, 0.15);
    color: var(--ios-system-orange);
}

body[data-page="finanzen"] .kontenplan-row .konto-type.type-aufwand {
    background: rgba(255, 59, 48, 0.15);
    color: var(--ios-system-red);
}

body[data-page="finanzen"] .kontenplan-row .konto-type.type-abschluss {
    background: rgba(175, 82, 222, 0.15);
    color: var(--ios-system-purple);
}

body[data-page="finanzen"] .kontenplan-row .konto-badges {
    display: flex;
    gap: 0.375rem;
}

body[data-page="finanzen"] .kontenplan-row .badge-mwst {
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.625rem;
    background: rgba(88, 86, 214, 0.15);
    color: var(--ios-system-indigo);
}

body[data-page="finanzen"] .kontenplan-row .badge-system {
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.625rem;
    background: var(--glass-secondary);
    color: var(--text-tertiary);
}

body[data-page="finanzen"] .kontenplan-row .konto-actions {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

body[data-page="finanzen"] .kontenplan-row:hover .konto-actions {
    opacity: 1;
}

body[data-page="finanzen"] .kontenplan-row .btn-edit {
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background: var(--glass-secondary);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

body[data-page="finanzen"] .kontenplan-row .btn-edit:hover {
    background: var(--glass-hover);
    color: var(--text-primary);
}

/* Empty State */
body[data-page="finanzen"] .kontenplan-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
}

body[data-page="finanzen"] .kontenplan-empty svg {
    width: 3rem;
    height: 3rem;
    color: var(--text-quaternary);
    margin-bottom: 1rem;
}

/* Modal form row */
body[data-page="finanzen"] .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Account selector in review panel */
body[data-page="finanzen"] .account-selector {
    margin: 1rem 0;
}

body[data-page="finanzen"] .account-selector label {
    display: block;
    margin-bottom: 0.375rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

body[data-page="finanzen"] .account-selector select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--glass-primary);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
}

body[data-page="finanzen"] .account-selector select:focus {
    outline: none;
    border-color: var(--ios-system-orange);
}

/* Account Suggestion Hint */
body[data-page="finanzen"] .account-suggestion {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--glass-secondary);
    border-radius: 0.5rem;
    border-left: 3px solid var(--ios-system-orange);
}

body[data-page="finanzen"] .account-suggestion .suggestion-icon {
    font-size: 1rem;
}

body[data-page="finanzen"] .account-suggestion span {
    color: var(--text-secondary);
}

/* ========================================
   ENHANCED BOOKING ACCOUNTS SECTION
   ======================================== */

/* Main booking section container */
body[data-page="finanzen"] .booking-accounts-section {
    background: var(--glass-secondary, rgba(255, 255, 255, 0.04));
    border-radius: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
}

/* Section header with icon */
body[data-page="finanzen"] .booking-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.06));
}

body[data-page="finanzen"] .booking-section-header .section-icon {
    font-size: 1.125rem;
}

/* AI Suggestion Banner */
body[data-page="finanzen"] .ai-suggestion-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.1) 0%, rgba(88, 86, 214, 0.1) 100%);
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 149, 0, 0.2);
}

body[data-page="finanzen"] .ai-suggestion-banner .suggestion-icon-wrapper {
    font-size: 1.25rem;
    line-height: 1;
}

body[data-page="finanzen"] .ai-suggestion-banner .suggestion-content {
    flex: 1;
}

body[data-page="finanzen"] .ai-suggestion-banner strong {
    color: var(--ios-system-orange);
}

/* Two-column accounts grid */
body[data-page="finanzen"] .accounts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 40em) {
    body[data-page="finanzen"] .accounts-grid {
        grid-template-columns: 1fr;
    }
}

/* Individual account select block */
body[data-page="finanzen"] .account-select-block {
    display: flex;
    flex-direction: column;
}

body[data-page="finanzen"] .account-select-block label {
    font-weight: 500;
    margin-bottom: 0.375rem;
}

body[data-page="finanzen"] .account-select-block .account-select {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--glass-primary, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.2s ease;
}

body[data-page="finanzen"] .account-select-block .account-select:hover {
    border-color: var(--glass-hover, rgba(255, 255, 255, 0.2));
}

body[data-page="finanzen"] .account-select-block .account-select:focus {
    outline: none;
    border-color: var(--ios-system-orange);
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.15);
}

body[data-page="finanzen"] .account-select-block .account-select option {
    background: var(--glass-secondary, #1a1a2e);
    color: var(--text-primary);
    padding: 0.5rem;
}

body[data-page="finanzen"] .account-select-block .account-select optgroup {
    background: var(--glass-primary, #12121a);
    color: var(--text-secondary);
    font-weight: 600;
}

/* ========================================
   ENHANCED MWST DISPLAY IN MODAL
   ======================================== */

/* MWST amount item with rate badge */
body[data-page="finanzen"] .mwst-amount-item {
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.08) 0%, rgba(88, 86, 214, 0.08) 100%);
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid rgba(255, 149, 0, 0.15);
}

body[data-page="finanzen"] .mwst-label-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

body[data-page="finanzen"] .mwst-rate-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    font-family: var(--font-sans);
    background: linear-gradient(135deg, var(--ios-system-orange) 0%, var(--ios-system-purple, #AF52DE) 100%);
    color: var(--button-text-on-color);
    border-radius: 1rem;
    letter-spacing: 0.02em;
}

body[data-page="finanzen"] .mwst-value {
    font-weight: 600;
    color: var(--ios-system-orange);
}

/* Editable MWST Select in Modal */
body[data-page="finanzen"] .mwst-modal-select {
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(135deg, var(--ios-system-orange) 0%, var(--ios-system-purple, #AF52DE) 100%);
    border: none;
    border-radius: 1rem;
    color: var(--button-text-on-color);
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.25rem 1.75rem 0.25rem 0.625rem;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: all 0.2s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 0.625rem;
    box-shadow: 0 2px 8px rgba(255, 149, 0, 0.3);
}

body[data-page="finanzen"] .mwst-modal-select:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 149, 0, 0.4);
}

body[data-page="finanzen"] .mwst-modal-select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.3), 0 4px 12px rgba(255, 149, 0, 0.4);
}

body[data-page="finanzen"] .mwst-modal-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

body[data-page="finanzen"] .mwst-modal-select option {
    background: var(--glass-primary, rgba(30, 30, 40, 0.98));
    color: var(--text-primary);
    padding: 0.5rem;
    font-weight: 500;
}

/* ========================================
   IMPROVED MODAL STYLING
   ======================================== */

/* Better modal header gradient */
body[data-page="finanzen"] .review-detail-header {
    background: linear-gradient(135deg,
        rgba(255, 149, 0, 0.08) 0%,
        rgba(255, 94, 58, 0.06) 50%,
        rgba(255, 59, 48, 0.04) 100%);
    border: 1px solid rgba(255, 149, 0, 0.15);
    border-left: 4px solid;
    border-left-color: transparent;
    border-image: linear-gradient(180deg, #FF9500 0%, #FF6B35 50%, #E94E1B 100%) 1;
    border-image-slice: 1;
}

/* Enhanced amounts grid */
body[data-page="finanzen"] .review-amounts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.75rem;
}

body[data-page="finanzen"] .amount-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 0;
}

body[data-page="finanzen"] .amount-item.amount-total {
    text-align: right;
    background: var(--glass-primary, rgba(255, 255, 255, 0.04));
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
}

/* Better party cards */
body[data-page="finanzen"] .review-party {
    min-height: auto;
    transition: all 0.2s ease;
}

body[data-page="finanzen"] .review-party:hover {
    background: var(--glass-hover, rgba(255, 255, 255, 0.06));
}

/* Responsive */
@media (max-width: 48em) {
    body[data-page="finanzen"] .kontenplan-header {
        flex-direction: column;
        align-items: stretch;
    }

    body[data-page="finanzen"] .kontenplan-header-right {
        flex-direction: column;
    }

    body[data-page="finanzen"] .kontenplan-search input {
        width: 100%;
    }

    body[data-page="finanzen"] .kontenplan-row {
        grid-template-columns: 4rem 1fr;
        gap: 0.5rem;
    }

    body[data-page="finanzen"] .kontenplan-row .konto-type,
    body[data-page="finanzen"] .kontenplan-row .konto-badges {
        display: none;
    }

    body[data-page="finanzen"] .kontenplan-row .konto-actions {
        opacity: 1;
    }

    body[data-page="finanzen"] .form-row {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Kontenplan Standard Badge
   ======================================== */

body[data-page="finanzen"] .kontenplan-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

body[data-page="finanzen"] .kontenplan-standard-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    background: var(--glass-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    white-space: nowrap;
}

/* ========================================
   Period Action Modal - Enhanced Styling
   ======================================== */

body[data-page="finanzen"] .period-action-modal {
    max-width: 28rem;
}

body[data-page="finanzen"] .period-action-modal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Toggle Row for Reopen Confirmation */
body[data-page="finanzen"] .period-action-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem;
    background: var(--glass-secondary);
    border-radius: 0.75rem;
    border: 1px solid var(--glass-border);
}

body[data-page="finanzen"] .period-action-toggle-row.hidden {
    display: none;
}

/* iOS-style Toggle Switch */
body[data-page="finanzen"] .toggle-switch {
    position: relative;
    display: inline-block;
    width: 3.125rem;
    height: 1.875rem;
    flex-shrink: 0;
}

body[data-page="finanzen"] .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

body[data-page="finanzen"] .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--glass-tertiary, rgba(128, 128, 128, 0.3));
    border-radius: 9999px;
    transition: background 0.3s ease;
}

body[data-page="finanzen"] .toggle-slider::before {
    position: absolute;
    content: "";
    height: 1.5rem;
    width: 1.5rem;
    left: 0.1875rem;
    bottom: 0.1875rem;
    background: var(--text-primary);
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

body[data-page="finanzen"] .toggle-switch input:checked + .toggle-slider {
    background: var(--ios-system-green, #34C759);
}

body[data-page="finanzen"] .toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(1.25rem);
}

body[data-page="finanzen"] .toggle-switch input:focus + .toggle-slider {
    box-shadow: 0 0 0 2px var(--ios-system-orange);
}

/* Toggle Label Group */
body[data-page="finanzen"] .toggle-label-group {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

/* Form Fields in Period Modal */
body[data-page="finanzen"] .period-action-modal .form-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

body[data-page="finanzen"] .period-action-modal .form-field label {
    font-weight: 500;
}

body[data-page="finanzen"] .period-action-modal textarea.glass-input,
body[data-page="finanzen"] .period-action-modal input[type="date"].glass-input {
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: var(--glass-primary);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
    font-size: 0.9375rem;
    resize: vertical;
}

body[data-page="finanzen"] .period-action-modal textarea.glass-input:focus,
body[data-page="finanzen"] .period-action-modal input[type="date"].glass-input:focus {
    outline: none;
    border-color: var(--ios-system-orange);
}

body[data-page="finanzen"] .period-action-modal textarea.glass-input::placeholder {
    color: var(--text-quaternary);
}

/* Modal Footer - Better Alignment */
body[data-page="finanzen"] .period-action-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--glass-border);
    margin-top: 0.5rem;
}

body[data-page="finanzen"] .period-action-modal .glass-button {
    padding: 0.625rem 1.25rem;
    font-weight: 500;
}

body[data-page="finanzen"] .period-action-modal .glass-button.primary {
    background: var(--ios-system-orange);
    color: var(--button-text-on-color);
}

body[data-page="finanzen"] .period-action-modal .glass-button.primary:hover {
    background: #0066D6;
}

/* ========================================
   Closed Period Section in Review Table
   ======================================== */

/* Closed Period Header Row */
body[data-page="finanzen"] .closed-period-header {
    background: var(--glass-secondary);
    border-top: 2px solid var(--ios-system-orange, #FF9500);
    cursor: pointer;
    user-select: none;
}

body[data-page="finanzen"] .closed-period-header:hover {
    background: var(--glass-hover);
}

body[data-page="finanzen"] .closed-period-header-cell {
    padding: 0.75rem 1rem !important;
}

body[data-page="finanzen"] .closed-period-header-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Toggle Button */
body[data-page="finanzen"] .closed-period-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

body[data-page="finanzen"] .closed-period-toggle:hover {
    background: var(--glass-primary);
    color: var(--text-primary);
}

body[data-page="finanzen"] .closed-period-toggle .chevron-icon {
    transition: transform 0.2s ease;
}

body[data-page="finanzen"] .closed-period-header.collapsed .closed-period-toggle .chevron-icon {
    transform: rotate(-90deg);
}

body[data-page="finanzen"] .closed-period-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: var(--ios-system-orange, #FF9500);
    border-radius: 0.375rem;
    color: var(--button-text-on-color);
}

body[data-page="finanzen"] .closed-period-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9375rem;
}

body[data-page="finanzen"] .closed-period-count {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    background: var(--glass-primary);
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
}

body[data-page="finanzen"] .btn-reopen-period {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    background: var(--ios-system-orange, #FF9500);
    color: var(--button-text-on-color);
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

body[data-page="finanzen"] .btn-reopen-period:hover {
    background: #E68600;
    transform: translateY(-1px);
}

/* Closed Period Row Styling */
body[data-page="finanzen"] .closed-period-row {
    background: var(--glass-tertiary, rgba(128, 128, 128, 0.08));
    opacity: 0.85;
    position: relative;
}

body[data-page="finanzen"] .closed-period-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--ios-system-orange, #FF9500);
}

/* Disabled elements in closed period rows */
body[data-page="finanzen"] .closed-period-row button[disabled],
body[data-page="finanzen"] .closed-period-row select[disabled],
body[data-page="finanzen"] .closed-period-row input[readonly] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: auto;
}

body[data-page="finanzen"] .closed-period-row .type-badge-btn[disabled] {
    background: var(--glass-tertiary);
    color: var(--text-tertiary);
}

body[data-page="finanzen"] .closed-period-row .btn-quick[disabled] {
    opacity: 0.4;
}

body[data-page="finanzen"] .closed-period-row .btn-quick[disabled]:hover {
    background: transparent;
    transform: none;
}

/* Hover effect on closed rows to indicate clickable */
body[data-page="finanzen"] .closed-period-row:hover {
    background: var(--glass-hover);
}

/* Collapsed rows - hidden */
body[data-page="finanzen"] .collapsed-row {
    display: none;
}

/* ========================================
   DEPRECIATION SECTION STYLES
   ======================================== */

/* Depreciation section container */
body[data-page="finanzen"] #depreciationSection {
    margin-top: 2rem;
}

/* Depreciation stats grid */
body[data-page="finanzen"] .depreciation-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 48em) {
    body[data-page="finanzen"] .depreciation-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 30em) {
    body[data-page="finanzen"] .depreciation-stats {
        grid-template-columns: 1fr;
    }
}

body[data-page="finanzen"] .depreciation-stat-card {
    padding: 1rem;
    background: var(--glass-primary);
    border-radius: var(--radius-md, 0.75rem);
    text-align: center;
}

body[data-page="finanzen"] .depreciation-stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    display: block;
}

body[data-page="finanzen"] .depreciation-stat-card .stat-label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 0.25rem;
}

/* Depreciation table */
body[data-page="finanzen"] .depreciation-table {
    width: 100%;
    border-collapse: collapse;
}

body[data-page="finanzen"] .depreciation-table th {
    text-align: left;
    padding: 0.75rem;
    border-bottom: 1px solid var(--glass-border);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
}

body[data-page="finanzen"] .depreciation-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--glass-border);
}

body[data-page="finanzen"] .depreciation-table tr:hover {
    background: var(--glass-hover);
}

/* Auto-depreciation toggle button */
body[data-page="finanzen"] .auto-depreciation-toggle {
    position: relative;
    width: 2.5rem;
    height: 1.375rem;
    background: var(--glass-secondary, rgba(128, 128, 128, 0.3));
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    transition: background 0.2s ease;
    padding: 0;
}

body[data-page="finanzen"] .auto-depreciation-toggle .toggle-indicator {
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.125rem;
    height: 1.125rem;
    background: var(--text-tertiary);
    border-radius: 50%;
    transition: transform 0.2s ease, background 0.2s ease;
}

body[data-page="finanzen"] .auto-depreciation-toggle.active {
    background: var(--ios-system-green, #34C759);
}

body[data-page="finanzen"] .auto-depreciation-toggle.active .toggle-indicator {
    transform: translateX(1.125rem);
    background: #fff;
}

body[data-page="finanzen"] .auto-depreciation-toggle:hover {
    opacity: 0.85;
}

body[data-page="finanzen"] .auto-depreciation-toggle:focus-visible {
    outline: 2px solid var(--ios-system-orange, #FF9500);
    outline-offset: 2px;
}

/* Auto-depreciation prompt */
body[data-page="finanzen"] #autoDepreciationPrompt {
    padding: 1rem;
    background: var(--glass-primary);
    border-radius: var(--radius-md, 0.75rem);
    border-left: 4px solid var(--ios-system-orange);
    margin-bottom: 1.5rem;
}

body[data-page="finanzen"] #autoDepreciationPrompt .prompt-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

body[data-page="finanzen"] #autoDepreciationPrompt .prompt-description {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

body[data-page="finanzen"] #autoDepreciationPrompt .prompt-actions {
    display: flex;
    gap: 0.75rem;
}

/* Depreciation empty state */
body[data-page="finanzen"] #depreciationEmpty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-tertiary);
}

body[data-page="finanzen"] #depreciationEmpty svg {
    width: 4rem;
    height: 4rem;
    opacity: 0.5;
    margin-bottom: 1rem;
}

/* Depreciation loading state */
body[data-page="finanzen"] #depreciationLoading {
    text-align: center;
    padding: 2rem;
    color: var(--text-tertiary);
}


/* ========================================
   BILANZ VIEW (Balance Sheet Accordion)
   ======================================== */

/* Kontenplan Header Controls */
body[data-page="finanzen"] .kontenplan-header-controls {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* Geschäftsjahr Selector */
body[data-page="finanzen"] .geschaeftsjahr-selector {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

body[data-page="finanzen"] .geschaeftsjahr-select-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body[data-page="finanzen"] .geschaeftsjahr-selector select {
    min-width: 8em;
    padding: 0.5rem 0.75rem;
    background: var(--glass-primary, rgba(255,255,255,0.05));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
    border-radius: 0.5rem;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.2s ease;
}

body[data-page="finanzen"] .geschaeftsjahr-selector select:hover {
    background: var(--glass-hover, rgba(255,255,255,0.08));
    border-color: var(--glass-border-hover, rgba(255,255,255,0.15));
}

body[data-page="finanzen"] .geschaeftsjahr-selector select:focus {
    outline: none;
    border-color: var(--ios-system-orange);
    box-shadow: 0 0 0 2px rgba(255, 149, 0, 0.2);
}

/* Small Icon Button */
body[data-page="finanzen"] .icon-btn-small {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-primary, rgba(255,255,255,0.05));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
    border-radius: 0.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

body[data-page="finanzen"] .icon-btn-small:hover {
    background: var(--glass-hover, rgba(255,255,255,0.08));
    color: var(--text-primary);
    border-color: var(--glass-border-hover, rgba(255,255,255,0.15));
}

body[data-page="finanzen"] .icon-btn-small i {
    font-size: 0.875rem;
}

/* Responsive: Stack on mobile */
@media (max-width: 640px) {
    body[data-page="finanzen"] .kontenplan-header-controls {
        flex-direction: column;
        align-items: stretch;
    }

    body[data-page="finanzen"] .geschaeftsjahr-selector {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    body[data-page="finanzen"] .bilanz-view-toggle {
        margin-bottom: 0;
    }
}

/* View Toggle Buttons */
body[data-page="finanzen"] .bilanz-view-toggle {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--glass-primary, rgba(255,255,255,0.05));
    border-radius: 0.625rem;
}

body[data-page="finanzen"] .bilanz-view-toggle button {
    flex: 1;
    padding: 0.625rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-family: var(--font-sans);
    font-weight: 500;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

body[data-page="finanzen"] .bilanz-view-toggle button:hover {
    color: var(--text-primary);
    background: var(--glass-hover, rgba(255,255,255,0.08));
}

body[data-page="finanzen"] .bilanz-view-toggle button.active {
    background: var(--glass-secondary, rgba(255,255,255,0.12));
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Bilanz Container */
body[data-page="finanzen"] .bilanz-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

body[data-page="finanzen"] .bilanz-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    color: var(--text-tertiary);
}

body[data-page="finanzen"] .bilanz-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-tertiary);
}

body[data-page="finanzen"] .bilanz-empty svg {
    width: 4rem;
    height: 4rem;
    opacity: 0.5;
    margin-bottom: 1rem;
}

/* Bilanz Class (Expandable Section) */
body[data-page="finanzen"] .bilanz-class {
    background: var(--glass-primary, rgba(255,255,255,0.05));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
    border-radius: 0.75rem;
    overflow: hidden;
}

body[data-page="finanzen"] .bilanz-class-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--glass-secondary, rgba(255,255,255,0.08));
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
}

body[data-page="finanzen"] .bilanz-class-header:hover {
    background: var(--glass-hover, rgba(255,255,255,0.12));
}

body[data-page="finanzen"] .bilanz-class-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
}

body[data-page="finanzen"] .bilanz-class-title svg,
body[data-page="finanzen"] .bilanz-class-title .radix-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--text-tertiary);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

body[data-page="finanzen"] .bilanz-class.expanded .bilanz-class-title svg,
body[data-page="finanzen"] .bilanz-class.expanded .bilanz-class-title .radix-icon {
    transform: rotate(180deg);
}

body[data-page="finanzen"] .bilanz-class-total {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

/* Bilanz Class Content (Account List) */
body[data-page="finanzen"] .bilanz-class-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

body[data-page="finanzen"] .bilanz-class.expanded .bilanz-class-content {
    max-height: 5000px;
    transition: max-height 0.5s ease-in;
}

body[data-page="finanzen"] .bilanz-accounts-list {
    padding: 0.5rem 0;
}

/* Account Row */
body[data-page="finanzen"] .bilanz-account {
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.05));
}

body[data-page="finanzen"] .bilanz-account:last-child {
    border-bottom: none;
}

body[data-page="finanzen"] .bilanz-account-row {
    display: grid;
    grid-template-columns: 1.5rem 5rem 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

body[data-page="finanzen"] .bilanz-account-row:hover {
    background: var(--glass-hover, rgba(255,255,255,0.06));
}

body[data-page="finanzen"] .bilanz-account-row .account-chevron {
    width: 1rem;
    height: 1rem;
    color: var(--text-quaternary);
    transition: transform 0.2s ease, color 0.15s ease;
    flex-shrink: 0;
}

body[data-page="finanzen"] .bilanz-account.expanded .bilanz-account-row .account-chevron {
    transform: rotate(90deg);
    color: var(--text-secondary);
}

body[data-page="finanzen"] .bilanz-account-row .konto-nummer {
    font-family: var(--font-mono, monospace);
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

body[data-page="finanzen"] .bilanz-account-row .konto-name {
    font-size: 0.9375rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-page="finanzen"] .bilanz-account-row .konto-balance {
    font-weight: 500;
    font-size: 0.9375rem;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

body[data-page="finanzen"] .bilanz-account-row .konto-balance.negative {
    color: var(--ios-system-red, #FF3B30);
}

/* Account Buchungen (Transactions) */
body[data-page="finanzen"] .bilanz-account-buchungen {
    max-height: 0;
    overflow: hidden;
    background: var(--glass-primary, rgba(0,0,0,0.1));
    transition: max-height 0.3s ease-out;
}

body[data-page="finanzen"] .bilanz-account.expanded .bilanz-account-buchungen {
    max-height: 2000px;
    transition: max-height 0.4s ease-in;
}

body[data-page="finanzen"] .buchungen-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    color: var(--text-tertiary);
    font-size: 0.875rem;
}

body[data-page="finanzen"] .buchungen-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.875rem;
}

body[data-page="finanzen"] .buchungen-list {
    padding: 0.5rem 0;
}

/* Buchung Row (Transaction) */
body[data-page="finanzen"] .buchung-row {
    display: grid;
    grid-template-columns: 6rem 1fr 6rem 6rem 2rem;
    gap: 0.75rem;
    align-items: center;
    padding: 0.625rem 1.25rem 0.625rem 3.5rem;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.03));
    transition: background 0.15s ease;
}

body[data-page="finanzen"] .buchung-row:last-child {
    border-bottom: none;
}

body[data-page="finanzen"] .buchung-row:hover {
    background: var(--glass-hover, rgba(255,255,255,0.04));
}

body[data-page="finanzen"] .buchung-row .buchung-date {
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

body[data-page="finanzen"] .buchung-row .buchung-desc {
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5em;
    min-width: 0;
}

body[data-page="finanzen"] .buchung-row .buchung-desc-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Source chip — which Beleg/Dokument this Buchung was derived from */
body[data-page="finanzen"] .buchung-row .buchung-source {
    flex: 0 0 auto;
    font-size: 0.6875em;
    font-weight: 600;
    padding: 0.1em 0.55em;
    border-radius: var(--radius-full, 9999px);
    background: var(--glass-secondary, rgba(127, 127, 127, 0.15));
    color: var(--text-tertiary);
    border: 1px solid var(--glass-border);
    white-space: nowrap;
}

body[data-page="finanzen"] .buchung-row .buchung-source.has-doc {
    color: var(--accent-primary, #FF9500);
    cursor: pointer;
}

body[data-page="finanzen"] .buchung-row .buchung-source.has-doc:hover {
    background: var(--glass-hover, rgba(255, 149, 0, 0.12));
    border-color: var(--accent-primary, #FF9500);
}

body[data-page="finanzen"] .buchung-row .buchung-debit,
body[data-page="finanzen"] .buchung-row .buchung-credit {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

body[data-page="finanzen"] .buchung-row .buchung-debit:not(:empty) {
    color: var(--ios-system-red, #FF3B30);
}

body[data-page="finanzen"] .buchung-row .buchung-credit:not(:empty) {
    color: var(--ios-system-green, #34C759);
}

body[data-page="finanzen"] .buchung-row .buchung-link {
    display: flex;
    justify-content: center;
    align-items: center;
}

body[data-page="finanzen"] .buchung-row .buchung-link a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--text-quaternary);
    transition: color 0.15s ease;
}

body[data-page="finanzen"] .buchung-row .buchung-link a:hover {
    color: var(--ios-system-orange);
}

body[data-page="finanzen"] .buchung-row .buchung-link svg {
    width: 1rem;
    height: 1rem;
}

/* Bilanz Footer / Summary */
body[data-page="finanzen"] .bilanz-footer {
    margin-top: 1rem;
    padding: 1.25rem;
    background: var(--glass-secondary, rgba(255,255,255,0.08));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
    border-radius: 0.75rem;
}

body[data-page="finanzen"] .bilanz-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 0.9375rem;
}

body[data-page="finanzen"] .bilanz-summary-row .summary-label {
    color: var(--text-secondary);
}

body[data-page="finanzen"] .bilanz-summary-row .summary-value {
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

body[data-page="finanzen"] .bilanz-summary-divider {
    height: 1px;
    background: var(--glass-border, rgba(255,255,255,0.1));
    margin: 0.75rem 0;
}

body[data-page="finanzen"] .bilanz-summary-row.total {
    padding-top: 0.75rem;
    font-size: 1rem;
}

body[data-page="finanzen"] .bilanz-summary-row.total .summary-label {
    font-weight: 600;
    color: var(--text-primary);
}

body[data-page="finanzen"] .bilanz-summary-row.total .summary-value {
    font-size: 1.125rem;
}

body[data-page="finanzen"] .bilanz-summary-row.total .summary-value.positive {
    color: var(--ios-system-green, #34C759);
}

body[data-page="finanzen"] .bilanz-summary-row.total .summary-value.negative {
    color: var(--ios-system-red, #FF3B30);
}

/* Responsive Styles for Bilanz */
@media (max-width: 48em) {
    body[data-page="finanzen"] .bilanz-view-toggle {
        flex-wrap: wrap;
    }

    body[data-page="finanzen"] .bilanz-view-toggle button {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
        font-size: 0.8125rem;
        padding: 0.5rem 0.75rem;
    }

    body[data-page="finanzen"] .bilanz-account-row {
        grid-template-columns: 1.25rem 4rem 1fr auto;
        gap: 0.5rem;
        padding: 0.625rem 1rem;
    }

    body[data-page="finanzen"] .bilanz-account-row .konto-nummer {
        font-size: 0.8125rem;
    }

    body[data-page="finanzen"] .bilanz-account-row .konto-name {
        font-size: 0.875rem;
    }

    body[data-page="finanzen"] .buchung-row {
        grid-template-columns: 5rem 1fr auto;
        gap: 0.5rem;
        padding-left: 2.5rem;
    }

    body[data-page="finanzen"] .buchung-row .buchung-debit,
    body[data-page="finanzen"] .buchung-row .buchung-credit {
        display: none;
    }

    body[data-page="finanzen"] .buchung-row .buchung-link {
        display: none;
    }
}


/* ========================================
   BUCHUNG KONTO EDIT
   ======================================== */

/* Buchung actions container */
body[data-page="finanzen"] .buchung-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* Edit button in buchung row */
body[data-page="finanzen"] .buchung-edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-quaternary);
    cursor: pointer;
    border-radius: 0.25rem;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

body[data-page="finanzen"] .buchung-row:hover .buchung-edit-btn {
    opacity: 1;
}

body[data-page="finanzen"] .buchung-edit-btn:hover {
    color: var(--ios-system-orange);
    background: var(--glass-hover, rgba(255,255,255,0.08));
}

body[data-page="finanzen"] .buchung-edit-btn svg,
body[data-page="finanzen"] .buchung-edit-btn .radix-icon {
    width: 0.875rem;
    height: 0.875rem;
}

/* Konto Edit Modal Overlay */
/* ================================================
   KONTO EDIT MODAL - Premium Refined Design
   ================================================ */
body[data-page="finanzen"] .konto-edit-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1.5rem;
    animation: modalOverlayFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalOverlayFadeIn {
    from { opacity: 0; backdrop-filter: blur(0); }
    to { opacity: 1; backdrop-filter: blur(16px); }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes sectionFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modal Container */
body[data-page="finanzen"] .konto-edit-modal {
    width: 100%;
    max-width: 36rem;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 1.5rem;
    background: linear-gradient(
        165deg,
        rgba(45, 45, 52, 0.97) 0%,
        rgba(28, 28, 34, 0.99) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 32px 64px -16px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 1px 0 rgba(255, 255, 255, 0.12) inset,
        0 -1px 0 rgba(0, 0, 0, 0.2) inset;
    animation: modalSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Modal Header */
body[data-page="finanzen"] .konto-edit-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.375rem 1.75rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-page="finanzen"] .konto-edit-modal-header h3 {
    font-size: 1.1875rem;
    font-weight: 650;
    letter-spacing: -0.025em;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body[data-page="finanzen"] .konto-edit-modal-header .modal-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: 0.625rem;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-page="finanzen"] .konto-edit-modal-header .modal-close-btn:hover {
    background: rgba(255, 90, 90, 0.12);
    border-color: rgba(255, 90, 90, 0.25);
    color: #ff7070;
    transform: scale(1.08);
}

body[data-page="finanzen"] .konto-edit-modal-header .modal-close-btn:active {
    transform: scale(0.95);
}

body[data-page="finanzen"] .konto-edit-modal-header .modal-close-btn svg,
body[data-page="finanzen"] .konto-edit-modal-header .modal-close-btn .radix-icon {
    width: 1rem;
    height: 1rem;
}

/* Modal Body */
body[data-page="finanzen"] .konto-edit-modal-body {
    flex: 1;
    padding: 1.75rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.1) 100%);
}

/* Account Section Cards - Enhanced */
body[data-page="finanzen"] .konto-section,
body[data-page="finanzen"] .gegenkonto-section {
    position: relative;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.045) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 1.375rem;
    padding-left: 4.5rem;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    animation: sectionFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

body[data-page="finanzen"] .konto-section {
    animation-delay: 0.1s;
}

body[data-page="finanzen"] .gegenkonto-section {
    animation-delay: 0.2s;
}

body[data-page="finanzen"] .konto-section:hover,
body[data-page="finanzen"] .gegenkonto-section:hover {
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.025) 100%
    );
    border-color: rgba(255, 255, 255, 0.15);
}

body[data-page="finanzen"] .konto-section:focus-within {
    border-color: rgba(255, 149, 0, 0.6);
    box-shadow:
        0 0 0 3px rgba(255, 149, 0, 0.12),
        0 8px 24px -8px rgba(255, 149, 0, 0.15);
}

body[data-page="finanzen"] .gegenkonto-section:focus-within {
    border-color: rgba(52, 199, 89, 0.6);
    box-shadow:
        0 0 0 3px rgba(52, 199, 89, 0.12),
        0 8px 24px -8px rgba(52, 199, 89, 0.15);
}

/* Section Icon Badge - Enhanced with Icons */
body[data-page="finanzen"] .konto-section::before,
body[data-page="finanzen"] .gegenkonto-section::before {
    content: '';
    position: absolute;
    left: 1.375rem;
    top: 1.375rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: linear-gradient(
        145deg,
        rgba(255, 149, 0, 0.3) 0%,
        rgba(255, 149, 0, 0.15) 100%
    );
    box-shadow:
        0 4px 12px -2px rgba(255, 149, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    /* Orange chart/expense icon via mask */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E");
    -webkit-mask-size: 55%;
    mask-size: 55%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

body[data-page="finanzen"] .gegenkonto-section::before {
    background: linear-gradient(
        145deg,
        rgba(52, 199, 89, 0.35) 0%,
        rgba(52, 199, 89, 0.18) 100%
    );
    box-shadow:
        0 4px 12px -2px rgba(52, 199, 89, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    /* Green wallet/bank icon via mask */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M12 4v4'/%3E%3Cpath d='M2 10h20'/%3E%3Ccircle cx='16' cy='15' r='2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M12 4v4'/%3E%3Cpath d='M2 10h20'/%3E%3Ccircle cx='16' cy='15' r='2'/%3E%3C/svg%3E");
    -webkit-mask-size: 55%;
    mask-size: 55%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Current Value Display - Enhanced */
body[data-page="finanzen"] .current-konto-info {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.625rem 0.875rem;
    margin-bottom: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0.625rem;
    border-left: 3px solid rgba(255, 149, 0, 0.5);
}

body[data-page="finanzen"] .gegenkonto-section .current-konto-info {
    border-left-color: rgba(52, 199, 89, 0.5);
}

body[data-page="finanzen"] .current-konto-info .ios-caption1 {
    font-size: 0.625rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 149, 0, 0.8);
}

body[data-page="finanzen"] .gegenkonto-section .current-konto-info .ios-caption1 {
    color: rgba(52, 199, 89, 0.8);
}

body[data-page="finanzen"] .current-konto-info .ios-body {
    font-size: 0.9375rem;
    font-weight: 550;
    color: var(--text-primary, rgba(255, 255, 255, 0.9));
    letter-spacing: -0.01em;
}

/* Section Label - Enhanced */
body[data-page="finanzen"] .konto-edit-modal-body label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary, rgba(255, 255, 255, 0.9));
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body[data-page="finanzen"] .konto-edit-modal-body label::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 149, 0, 0.6);
    flex-shrink: 0;
}

body[data-page="finanzen"] .gegenkonto-section label::before {
    background: rgba(52, 199, 89, 0.6);
}

/* Buchung Info Section - Header showing the transaction name/amount */
body[data-page="finanzen"] .buchung-info-section {
    border-radius: 0.75rem;
    animation: sectionFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

body[data-page="finanzen"] .buchung-info-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

body[data-page="finanzen"] .buchung-info-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* MwSt Section Styling */
body[data-page="finanzen"] .mwst-section {
    position: relative;
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.045) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 1.375rem;
    padding-left: 4.5rem;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    animation: sectionFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: 0.3s;
}

body[data-page="finanzen"] .mwst-section:hover {
    background: linear-gradient(
        145deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.025) 100%
    );
    border-color: rgba(255, 255, 255, 0.15);
}

body[data-page="finanzen"] .mwst-section:focus-within {
    border-color: rgba(94, 92, 230, 0.6);
    box-shadow:
        0 0 0 3px rgba(94, 92, 230, 0.12),
        0 8px 24px -8px rgba(94, 92, 230, 0.15);
}

/* MwSt Section Icon Badge */
body[data-page="finanzen"] .mwst-section::before {
    content: '';
    position: absolute;
    left: 1.375rem;
    top: 1.375rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: linear-gradient(
        145deg,
        rgba(94, 92, 230, 0.3) 0%,
        rgba(94, 92, 230, 0.15) 100%
    );
    box-shadow:
        0 4px 12px -2px rgba(94, 92, 230, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    /* Percent icon */
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='5' x2='5' y2='19'%3E%3C/line%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'%3E%3C/circle%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'%3E%3C/circle%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='5' x2='5' y2='19'%3E%3C/line%3E%3Ccircle cx='6.5' cy='6.5' r='2.5'%3E%3C/circle%3E%3Ccircle cx='17.5' cy='17.5' r='2.5'%3E%3C/circle%3E%3C/svg%3E");
    mask-size: 50%;
    -webkit-mask-size: 50%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
}

body[data-page="finanzen"] .mwst-section label::before {
    background: rgba(94, 92, 230, 0.6);
}

body[data-page="finanzen"] .mwst-section .current-konto-info .ios-caption1 {
    color: rgba(94, 92, 230, 0.8);
}

/* MwSt Select Styling */
body[data-page="finanzen"] .mwst-select {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.625rem;
    background: rgba(0, 0, 0, 0.25);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='rgba(255,255,255,0.6)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

body[data-page="finanzen"] .mwst-select:hover {
    border-color: var(--text-quaternary);
    background-color: rgba(0, 0, 0, 0.3);
}

body[data-page="finanzen"] .mwst-select:focus {
    outline: none;
    border-color: rgba(94, 92, 230, 0.6);
    box-shadow: 0 0 0 3px rgba(94, 92, 230, 0.15);
}

body[data-page="finanzen"] .mwst-select option {
    background: rgba(30, 30, 35, 0.98);
    color: var(--text-primary);
    padding: 0.5rem;
}

/* Konto Selector Dropdown */
body[data-page="finanzen"] .konto-edit-selector {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.625rem;
    background: rgba(0, 0, 0, 0.25);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

body[data-page="finanzen"] .konto-edit-selector:hover {
    border-color: var(--text-quaternary);
    background-color: rgba(0, 0, 0, 0.3);
}

body[data-page="finanzen"] .konto-edit-selector:focus {
    outline: none;
    border-color: var(--ios-system-orange, #FF9500);
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.15);
}

body[data-page="finanzen"] .konto-edit-selector option {
    background: #1a1a1e;
    color: var(--text-primary);
    padding: 0.5rem;
}

body[data-page="finanzen"] .konto-edit-selector optgroup {
    font-weight: 700;
    color: var(--text-secondary);
    background: #222226;
    padding: 0.5rem;
}

/* ================================================
   SEARCHABLE DROPDOWN COMPONENT - Premium
   ================================================ */
body[data-page="finanzen"] .searchable-select {
    position: relative;
    width: 100%;
}

body[data-page="finanzen"] .searchable-select-trigger {
    width: 100%;
    padding: 0.9375rem 1.125rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.75rem;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0.28) 100%
    );
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-page="finanzen"] .searchable-select-trigger:hover {
    border-color: var(--text-quaternary);
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0.32) 100%
    );
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body[data-page="finanzen"] .konto-section .searchable-select-trigger:focus {
    outline: none;
    border-color: rgba(255, 149, 0, 0.6);
    box-shadow:
        0 0 0 3px rgba(255, 149, 0, 0.12),
        0 4px 12px rgba(255, 149, 0, 0.1);
}

body[data-page="finanzen"] .gegenkonto-section .searchable-select-trigger:focus {
    outline: none;
    border-color: rgba(52, 199, 89, 0.6);
    box-shadow:
        0 0 0 3px rgba(52, 199, 89, 0.12),
        0 4px 12px rgba(52, 199, 89, 0.1);
}

body[data-page="finanzen"] .searchable-select-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

body[data-page="finanzen"] .searchable-select-arrow {
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0.5;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
    flex-shrink: 0;
    margin-left: 0.625rem;
}

body[data-page="finanzen"] .searchable-select-trigger:hover .searchable-select-arrow {
    opacity: 0.7;
}

body[data-page="finanzen"] .searchable-select.open .searchable-select-arrow {
    transform: rotate(180deg);
    opacity: 0.8;
}

body[data-page="finanzen"] .searchable-select-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background: #1a1a1e;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.75rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    max-height: 20rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body[data-page="finanzen"] .searchable-select.open .searchable-select-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

body[data-page="finanzen"] .searchable-select-search {
    padding: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: sticky;
    top: 0;
    background: #1a1a1e;
    z-index: 1;
}

body[data-page="finanzen"] .searchable-select-search input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-family: var(--font-sans);
    transition: all 0.2s ease;
}

body[data-page="finanzen"] .searchable-select-search input:focus {
    outline: none;
    border-color: var(--ios-system-orange, #FF9500);
    background: rgba(255, 255, 255, 0.08);
}

body[data-page="finanzen"] .searchable-select-search input::placeholder {
    color: var(--text-tertiary);
}

body[data-page="finanzen"] .searchable-select-search .search-icon {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0.4;
    pointer-events: none;
}

body[data-page="finanzen"] .searchable-select-options {
    overflow-y: auto;
    flex: 1;
    padding: 0.5rem;
}

body[data-page="finanzen"] .searchable-select-group {
    padding: 0.5rem 0.75rem;
    padding-top: 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 0.25rem;
}

body[data-page="finanzen"] .searchable-select-group:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 0.5rem;
}

body[data-page="finanzen"] .searchable-select-option {
    padding: 0.625rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body[data-page="finanzen"] .searchable-select-option:hover {
    background: rgba(255, 149, 0, 0.1);
}

body[data-page="finanzen"] .searchable-select-option.selected {
    background: rgba(255, 149, 0, 0.15);
    color: var(--ios-system-orange, #FF9500);
    font-weight: 500;
}

body[data-page="finanzen"] .searchable-select-option .check-icon {
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0;
    color: var(--ios-system-orange, #FF9500);
}

body[data-page="finanzen"] .searchable-select-option.selected .check-icon {
    opacity: 1;
}

body[data-page="finanzen"] .searchable-select-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.8125rem;
}

/* Modal Footer - Enhanced */
body[data-page="finanzen"] .konto-edit-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.875rem;
    padding: 1.375rem 1.75rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.2) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-page="finanzen"] .konto-edit-modal-footer .glass-button {
    padding: 0.8125rem 1.625rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.75rem;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    letter-spacing: -0.01em;
    position: relative;
    overflow: hidden;
}

body[data-page="finanzen"] .konto-edit-modal-footer .glass-button:not(.primary) {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

body[data-page="finanzen"] .konto-edit-modal-footer .glass-button:not(.primary):hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--text-quaternary);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

body[data-page="finanzen"] .konto-edit-modal-footer .glass-button:not(.primary):active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

body[data-page="finanzen"] .konto-edit-modal-footer .glass-button.primary {
    background: linear-gradient(145deg, #FF9F1C 0%, #FF8C00 50%, #E67700 100%);
    border: none;
    color: var(--button-text-on-color);
    box-shadow:
        0 4px 16px rgba(255, 149, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

body[data-page="finanzen"] .konto-edit-modal-footer .glass-button.primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

body[data-page="finanzen"] .konto-edit-modal-footer .glass-button.primary:hover {
    background: linear-gradient(145deg, #FFAB33 0%, #FF9F1C 50%, #FF8C00 100%);
    transform: translateY(-2px);
    box-shadow:
        0 8px 24px rgba(255, 149, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

body[data-page="finanzen"] .konto-edit-modal-footer .glass-button.primary:active {
    transform: translateY(0);
    box-shadow:
        0 2px 8px rgba(255, 149, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

/* Mobile Responsive */
@media (max-width: 480px) {
    body[data-page="finanzen"] .konto-edit-modal {
        max-width: 100%;
        max-height: 90vh;
        border-radius: 1rem 1rem 0 0;
        margin-top: auto;
    }

    body[data-page="finanzen"] .konto-edit-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    body[data-page="finanzen"] .konto-edit-modal-footer {
        flex-direction: column;
    }

    body[data-page="finanzen"] .konto-edit-modal-footer .glass-button {
        width: 100%;
        justify-content: center;
    }
}

/* ================================================
   KONTO PICKER MODAL - Tree Structure
   Secondary modal that opens above parent
   ================================================ */

/* Picker Overlay - Higher z-index than parent modal */
body[data-page="finanzen"] .konto-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 1rem;
    animation: pickerOverlayFadeIn 0.2s ease-out;
}

@keyframes pickerOverlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pickerSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-15px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Picker Modal Container */
body[data-page="finanzen"] .konto-picker-modal {
    width: 100%;
    max-width: 32rem;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 1.25rem;
    background: linear-gradient(
        165deg,
        rgba(38, 38, 45, 0.98) 0%,
        rgba(24, 24, 30, 0.99) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 32px 64px -16px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 1px 0 rgba(255, 255, 255, 0.15) inset;
    animation: pickerSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Picker Header */
body[data-page="finanzen"] .konto-picker-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-page="finanzen"] .konto-picker-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body[data-page="finanzen"] .konto-picker-header h4 {
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
}

body[data-page="finanzen"] .konto-picker-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

body[data-page="finanzen"] .konto-picker-close:hover {
    background: rgba(255, 90, 90, 0.12);
    border-color: rgba(255, 90, 90, 0.25);
    color: #ff7070;
}

/* Country Filter */
body[data-page="finanzen"] .konto-picker-filters {
    display: flex;
    gap: 0.5rem;
}

body[data-page="finanzen"] .konto-country-filter {
    display: flex;
    padding: 0.25rem;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 0.5rem;
    gap: 0.25rem;
}

body[data-page="finanzen"] .konto-country-btn {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

body[data-page="finanzen"] .konto-country-btn:hover {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
}

body[data-page="finanzen"] .konto-country-btn.active {
    background: rgba(255, 149, 0, 0.15);
    color: #FF9500;
}

body[data-page="finanzen"] .konto-country-btn .country-flag {
    font-size: 1rem;
    line-height: 1;
}

/* Search Input */
body[data-page="finanzen"] .konto-picker-search {
    position: relative;
}

body[data-page="finanzen"] .konto-picker-search input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.625rem;
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: var(--font-sans);
    transition: all 0.2s ease;
}

body[data-page="finanzen"] .konto-picker-search input:focus {
    outline: none;
    border-color: rgba(255, 149, 0, 0.5);
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.1);
}

body[data-page="finanzen"] .konto-picker-search input::placeholder {
    color: var(--text-quaternary);
}

body[data-page="finanzen"] .konto-picker-search-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: var(--text-tertiary);
    pointer-events: none;
}

/* Tree Container */
body[data-page="finanzen"] .konto-picker-tree {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
}

/* Tree Group (Klasse) */
body[data-page="finanzen"] .konto-tree-group {
    margin-bottom: 0.25rem;
}

body[data-page="finanzen"] .konto-tree-group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

body[data-page="finanzen"] .konto-tree-group-header:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
}

body[data-page="finanzen"] .konto-tree-toggle {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

body[data-page="finanzen"] .konto-tree-group.expanded .konto-tree-toggle {
    transform: rotate(90deg);
}

body[data-page="finanzen"] .konto-tree-group-icon {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Color coding for different Klassen */
body[data-page="finanzen"] .konto-tree-group[data-klasse="1"] .konto-tree-group-icon {
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.25) 0%, rgba(255, 149, 0, 0.1) 100%);
    color: #4da3ff;
}
body[data-page="finanzen"] .konto-tree-group[data-klasse="2"] .konto-tree-group-icon {
    background: linear-gradient(135deg, rgba(175, 82, 222, 0.25) 0%, rgba(175, 82, 222, 0.1) 100%);
    color: #c792ea;
}
body[data-page="finanzen"] .konto-tree-group[data-klasse="3"] .konto-tree-group-icon {
    background: linear-gradient(135deg, rgba(52, 199, 89, 0.25) 0%, rgba(52, 199, 89, 0.1) 100%);
    color: #5fd98c;
}
body[data-page="finanzen"] .konto-tree-group[data-klasse="4"] .konto-tree-group-icon,
body[data-page="finanzen"] .konto-tree-group[data-klasse="5"] .konto-tree-group-icon,
body[data-page="finanzen"] .konto-tree-group[data-klasse="6"] .konto-tree-group-icon {
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.25) 0%, rgba(255, 149, 0, 0.1) 100%);
    color: #ffb340;
}
body[data-page="finanzen"] .konto-tree-group[data-klasse="7"] .konto-tree-group-icon,
body[data-page="finanzen"] .konto-tree-group[data-klasse="8"] .konto-tree-group-icon {
    background: linear-gradient(135deg, rgba(255, 69, 58, 0.25) 0%, rgba(255, 69, 58, 0.1) 100%);
    color: #ff6b6b;
}
body[data-page="finanzen"] .konto-tree-group[data-klasse="9"] .konto-tree-group-icon {
    background: linear-gradient(135deg, rgba(99, 102, 106, 0.25) 0%, rgba(99, 102, 106, 0.1) 100%);
    color: #8e8e93;
}

body[data-page="finanzen"] .konto-tree-group-label {
    flex: 1;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

body[data-page="finanzen"] .konto-tree-group-count {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-quaternary);
    background: rgba(255, 255, 255, 0.06);
    padding: 0.1875rem 0.5rem;
    border-radius: 0.75rem;
}

/* Tree Items Container */
body[data-page="finanzen"] .konto-tree-items {
    display: none;
    padding-left: 1.75rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

body[data-page="finanzen"] .konto-tree-group.expanded .konto-tree-items {
    display: block;
    animation: treeItemsFadeIn 0.2s ease-out;
}

@keyframes treeItemsFadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tree Item (Individual Konto) */
body[data-page="finanzen"] .konto-tree-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    margin: 0.125rem 0;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

body[data-page="finanzen"] .konto-tree-item:hover {
    background: rgba(255, 149, 0, 0.08);
    border-color: rgba(255, 149, 0, 0.15);
}

body[data-page="finanzen"] .konto-tree-item.selected {
    background: rgba(255, 149, 0, 0.15);
    border-color: rgba(255, 149, 0, 0.3);
}

body[data-page="finanzen"] .konto-tree-item-number {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ios-system-orange, #FF9500);
    font-variant-numeric: tabular-nums;
    min-width: 3rem;
}

body[data-page="finanzen"] .konto-tree-item-name {
    flex: 1;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[data-page="finanzen"] .konto-tree-item.selected .konto-tree-item-name {
    color: var(--text-primary);
}

body[data-page="finanzen"] .konto-tree-item-check {
    width: 1rem;
    height: 1rem;
    color: var(--ios-system-orange, #FF9500);
    opacity: 0;
    transition: opacity 0.15s ease;
}

body[data-page="finanzen"] .konto-tree-item.selected .konto-tree-item-check {
    opacity: 1;
}

/* Empty State */
body[data-page="finanzen"] .konto-picker-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
}

body[data-page="finanzen"] .konto-picker-empty-icon {
    width: 3rem;
    height: 3rem;
    color: var(--text-quaternary);
    margin-bottom: 1rem;
}

body[data-page="finanzen"] .konto-picker-empty-text {
    font-size: 0.875rem;
    color: var(--text-tertiary);
}

/* Picker Footer */
body[data-page="finanzen"] .konto-picker-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body[data-page="finanzen"] .konto-picker-selection {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

body[data-page="finanzen"] .konto-picker-selection strong {
    color: var(--ios-system-orange, #FF9500);
    font-weight: 600;
}

body[data-page="finanzen"] .konto-picker-confirm {
    padding: 0.625rem 1.25rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border: none;
    border-radius: 0.5rem;
    background: linear-gradient(145deg, #FF9F1C 0%, #FF8C00 100%);
    color: var(--button-text-on-color);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(255, 149, 0, 0.3);
}

body[data-page="finanzen"] .konto-picker-confirm:hover {
    background: linear-gradient(145deg, #FFAB33 0%, #FF9F1C 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 149, 0, 0.4);
}

body[data-page="finanzen"] .konto-picker-confirm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Gegenkonto variant (green theme) */
body[data-page="finanzen"] .konto-picker-modal.gegenkonto .konto-picker-search input:focus {
    border-color: rgba(52, 199, 89, 0.5);
    box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.1);
}

body[data-page="finanzen"] .konto-picker-modal.gegenkonto .konto-tree-item:hover {
    background: rgba(52, 199, 89, 0.08);
    border-color: rgba(52, 199, 89, 0.15);
}

body[data-page="finanzen"] .konto-picker-modal.gegenkonto .konto-tree-item.selected {
    background: rgba(52, 199, 89, 0.15);
    border-color: rgba(52, 199, 89, 0.3);
}

body[data-page="finanzen"] .konto-picker-modal.gegenkonto .konto-tree-item-number {
    color: var(--ios-system-green, #34C759);
}

body[data-page="finanzen"] .konto-picker-modal.gegenkonto .konto-tree-item-check {
    color: var(--ios-system-green, #34C759);
}

body[data-page="finanzen"] .konto-picker-modal.gegenkonto .konto-picker-selection strong {
    color: var(--ios-system-green, #34C759);
}

body[data-page="finanzen"] .konto-picker-modal.gegenkonto .konto-picker-confirm {
    background: linear-gradient(145deg, #40D46E 0%, #34C759 100%);
    box-shadow: 0 2px 8px rgba(52, 199, 89, 0.3);
}

body[data-page="finanzen"] .konto-picker-modal.gegenkonto .konto-picker-confirm:hover {
    background: linear-gradient(145deg, #52E080 0%, #40D46E 100%);
    box-shadow: 0 4px 12px rgba(52, 199, 89, 0.4);
}

/* Mobile Responsive for Picker */
@media (max-width: 480px) {
    body[data-page="finanzen"] .konto-picker-modal {
        max-width: 100%;
        max-height: 85vh;
        border-radius: 1rem 1rem 0 0;
        margin-top: auto;
    }

    body[data-page="finanzen"] .konto-picker-overlay {
        align-items: flex-end;
        padding: 0;
    }
}

/* ========================================
   LINE ITEMS SECTION
   ======================================== */

body[data-page="finanzen"] .line-items-section {
    margin: 1.5rem 0;
    padding: 1.25rem;
    background: var(--glass-primary, rgba(255,255,255,0.05));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.12));
    border-radius: 0.75rem;
}

body[data-page="finanzen"] .line-items-section h4 {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
}

body[data-page="finanzen"] .line-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

body[data-page="finanzen"] .line-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--glass-secondary, rgba(255,255,255,0.08));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
    border-radius: 0.5rem;
    transition: all 0.15s ease;
}

body[data-page="finanzen"] .line-item:hover {
    background: var(--glass-hover, rgba(255,255,255,0.12));
    border-color: var(--ios-system-orange, #FF9500);
}

body[data-page="finanzen"] .line-item-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

body[data-page="finanzen"] .line-item-qty {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-tertiary);
    background: var(--glass-primary, rgba(255,255,255,0.05));
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    white-space: nowrap;
}

body[data-page="finanzen"] .line-item-desc {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--text-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body[data-page="finanzen"] .line-item-badge {
    font-family: var(--font-sans);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    white-space: nowrap;
}

body[data-page="finanzen"] .line-item-badge.inventory-badge {
    background: rgba(52, 199, 89, 0.15);
    color: var(--ios-system-green, #34C759);
    border: 1px solid rgba(52, 199, 89, 0.25);
}

body[data-page="finanzen"] .line-item-price {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ios-system-orange, #FF9500);
    white-space: nowrap;
    margin-left: 1rem;
}

body[data-page="finanzen"] .line-items-summary {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--glass-border, rgba(255,255,255,0.1));
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

body[data-page="finanzen"] .line-items-summary strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* ========================================
   INVENTORY FIELDS SECTION
   ======================================== */

body[data-page="finanzen"] .inventory-fields {
    margin: 1.5rem 0;
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(52, 199, 89, 0.08) 0%, rgba(52, 199, 89, 0.03) 100%);
    border: 1px solid rgba(52, 199, 89, 0.2);
    border-radius: 0.75rem;
}

body[data-page="finanzen"] .inventory-fields h4 {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--ios-system-green, #34C759);
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body[data-page="finanzen"] .inventory-fields h4::before {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--ios-system-green, #34C759);
    border-radius: 50%;
}

body[data-page="finanzen"] .depreciation-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body[data-page="finanzen"] .depreciation-input input {
    flex: 1;
    max-width: 5rem;
}

body[data-page="finanzen"] .depreciation-input span {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Toggle Label for Inventory */
body[data-page="finanzen"] .toggle-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--text-primary);
    user-select: none;
}

body[data-page="finanzen"] .toggle-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

body[data-page="finanzen"] .toggle-switch {
    position: relative;
    width: 3rem;
    height: 1.75rem;
    background: var(--glass-secondary, rgba(255,255,255,0.12));
    border-radius: 0.875rem;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

body[data-page="finanzen"] .toggle-switch::after {
    content: '';
    position: absolute;
    top: 0.125rem;
    left: 0.125rem;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--text-primary);
    border-radius: 50%;
    transition: all 0.25s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

body[data-page="finanzen"] .toggle-label input:checked + .toggle-switch {
    background: var(--ios-system-green, #34C759);
}

body[data-page="finanzen"] .toggle-label input:checked + .toggle-switch::after {
    transform: translateX(1.25rem);
    background: #fff;
}

/* Responsive for Line Items & Inventory */
@media (max-width: 640px) {
    body[data-page="finanzen"] .line-items-section,
    body[data-page="finanzen"] .inventory-fields {
        padding: 1rem;
    }

    body[data-page="finanzen"] .line-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    body[data-page="finanzen"] .line-item-price {
        margin-left: 0;
        align-self: flex-end;
    }

    body[data-page="finanzen"] .depreciation-input {
        width: 100%;
    }

    body[data-page="finanzen"] .depreciation-input input {
        flex: 1;
        max-width: none;
    }
}

/* ========================================
   AUTOFILL HIGHLIGHT ANIMATION
   Visual feedback when AI populates fields
   ======================================== */

@keyframes autofill-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.4);
        border-color: var(--ios-system-green, #34C759);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(52, 199, 89, 0.2);
        border-color: var(--ios-system-green, #34C759);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(52, 199, 89, 0);
        border-color: var(--glass-border, rgba(255,255,255,0.12));
    }
}

body[data-page="finanzen"] .field-autofilled {
    animation: autofill-pulse 2s ease-out forwards;
    border-color: var(--ios-system-green, #34C759);
    background: linear-gradient(
        135deg,
        rgba(52, 199, 89, 0.08) 0%,
        transparent 50%
    );
}

body[data-page="finanzen"] .field-autofilled option:checked {
    background: rgba(52, 199, 89, 0.15);
}

/* =========================================================================
   NEBENKOSTEN DASHBOARD
   Sub-tabs and dashboard view for Nebenkosten overview
   ========================================================================= */

/* Overview Filters */
body[data-page="finanzen"] .nk-overview-filters,
body[data-page="finanzen"] .nk-verlauf-filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

body[data-page="finanzen"] .nk-overview-filters .filter-group,
body[data-page="finanzen"] .nk-verlauf-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

body[data-page="finanzen"] .nk-overview-filters .filter-select,
body[data-page="finanzen"] .nk-verlauf-filters .filter-select {
    padding: 0.5rem 0.75rem;
    background: var(--glass-secondary, rgba(255,255,255,0.08));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.12));
    border-radius: 0.5rem;
    color: var(--text-primary);
    font-size: 0.875rem;
    min-width: 10rem;
}

body[data-page="finanzen"] .nk-overview-filters .filter-select:focus,
body[data-page="finanzen"] .nk-verlauf-filters .filter-select:focus {
    outline: none;
    border-color: var(--ios-system-orange, #FF9500);
}

/* Trend Section */
body[data-page="finanzen"] .nk-trend-section {
    margin-top: 1.5rem;
}

body[data-page="finanzen"] .nk-trend-section h3 {
    margin-bottom: 1rem;
}

/* Category Summary Section */
body[data-page="finanzen"] .nk-category-summary {
    margin-top: 1.5rem;
}

body[data-page="finanzen"] .nk-category-summary h3 {
    margin-bottom: 1rem;
}

/* Timeline for Verlauf */
body[data-page="finanzen"] .nk-timeline {
    min-height: 200px;
}

body[data-page="finanzen"] .nk-timeline-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem;
    text-align: center;
}

body[data-page="finanzen"] .nk-timeline-empty svg {
    opacity: 0.4;
}

/* Timeline Item */
body[data-page="finanzen"] .nk-timeline-item {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--glass-primary, rgba(255,255,255,0.04));
    border: 1px solid var(--glass-border, rgba(255,255,255,0.08));
    border-radius: 0.75rem;
    margin-bottom: 0.75rem;
    transition: all 0.2s ease;
}

body[data-page="finanzen"] .nk-timeline-item:hover {
    background: var(--glass-hover, rgba(255,255,255,0.08));
    border-color: var(--glass-hover, rgba(255,255,255,0.15));
}

body[data-page="finanzen"] .nk-timeline-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--glass-secondary, rgba(255,255,255,0.08));
    border-radius: 0.5rem;
    flex-shrink: 0;
}

body[data-page="finanzen"] .nk-timeline-icon.success {
    background: rgba(52, 199, 89, 0.15);
    color: var(--ios-system-green, #34C759);
}

body[data-page="finanzen"] .nk-timeline-icon.pending {
    background: rgba(255, 149, 0, 0.15);
    color: var(--ios-system-orange, #FF9500);
}

body[data-page="finanzen"] .nk-timeline-content {
    flex: 1;
}

body[data-page="finanzen"] .nk-timeline-title {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

body[data-page="finanzen"] .nk-timeline-subtitle {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

body[data-page="finanzen"] .nk-timeline-date {
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

body[data-page="finanzen"] .nk-timeline-amount {
    font-weight: 600;
    color: var(--text-primary);
    text-align: right;
}

/* Responsive */
@media (max-width: 48em) {
    body[data-page="finanzen"] .nk-overview-filters,
    body[data-page="finanzen"] .nk-verlauf-filters {
        flex-direction: column;
    }

    body[data-page="finanzen"] .nk-overview-filters .filter-select,
    body[data-page="finanzen"] .nk-verlauf-filters .filter-select {
        min-width: 100%;
    }

    body[data-page="finanzen"] .nk-timeline-item {
        flex-direction: column;
    }
}

/* ================================================
   LIGHT THEME OVERRIDES FOR BUCHUNG EDIT MODAL
   Makes modal readable in light/lightmodern themes
   ================================================ */

/* Light theme modal backgrounds */
[data-theme="light"] body[data-page="finanzen"] .konto-edit-modal,
[data-theme="lightmodern"] body[data-page="finanzen"] .konto-edit-modal,
body[data-theme="light"][data-page="finanzen"] .konto-edit-modal,
body[data-theme="lightmodern"][data-page="finanzen"] .konto-edit-modal {
    background: linear-gradient(
        165deg,
        rgba(255, 255, 255, 0.97) 0%,
        rgba(248, 250, 252, 0.99) 100%
    );
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow:
        0 32px 64px -16px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(0, 0, 0, 0.05) inset;
}

/* Light theme modal header */
[data-theme="light"] body[data-page="finanzen"] .konto-edit-modal-header,
[data-theme="lightmodern"] body[data-page="finanzen"] .konto-edit-modal-header,
body[data-theme="light"][data-page="finanzen"] .konto-edit-modal-header,
body[data-theme="lightmodern"][data-page="finanzen"] .konto-edit-modal-header {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.01) 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Light theme close button */
[data-theme="light"] body[data-page="finanzen"] .konto-edit-modal-header .modal-close-btn,
[data-theme="lightmodern"] body[data-page="finanzen"] .konto-edit-modal-header .modal-close-btn,
body[data-theme="light"][data-page="finanzen"] .konto-edit-modal-header .modal-close-btn,
body[data-theme="lightmodern"][data-page="finanzen"] .konto-edit-modal-header .modal-close-btn {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] body[data-page="finanzen"] .konto-edit-modal-header .modal-close-btn:hover,
[data-theme="lightmodern"] body[data-page="finanzen"] .konto-edit-modal-header .modal-close-btn:hover,
body[data-theme="light"][data-page="finanzen"] .konto-edit-modal-header .modal-close-btn:hover,
body[data-theme="lightmodern"][data-page="finanzen"] .konto-edit-modal-header .modal-close-btn:hover {
    background: rgba(255, 59, 48, 0.1);
    border-color: rgba(255, 59, 48, 0.3);
    color: #FF3B30;
}

/* Light theme modal body */
[data-theme="light"] body[data-page="finanzen"] .konto-edit-modal-body,
[data-theme="lightmodern"] body[data-page="finanzen"] .konto-edit-modal-body,
body[data-theme="light"][data-page="finanzen"] .konto-edit-modal-body,
body[data-theme="lightmodern"][data-page="finanzen"] .konto-edit-modal-body {
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.02) 100%);
}

/* Light theme section cards */
[data-theme="light"] body[data-page="finanzen"] .konto-section,
[data-theme="light"] body[data-page="finanzen"] .gegenkonto-section,
[data-theme="light"] body[data-page="finanzen"] .mwst-section,
[data-theme="lightmodern"] body[data-page="finanzen"] .konto-section,
[data-theme="lightmodern"] body[data-page="finanzen"] .gegenkonto-section,
[data-theme="lightmodern"] body[data-page="finanzen"] .mwst-section,
body[data-theme="light"][data-page="finanzen"] .konto-section,
body[data-theme="light"][data-page="finanzen"] .gegenkonto-section,
body[data-theme="light"][data-page="finanzen"] .mwst-section,
body[data-theme="lightmodern"][data-page="finanzen"] .konto-section,
body[data-theme="lightmodern"][data-page="finanzen"] .gegenkonto-section,
body[data-theme="lightmodern"][data-page="finanzen"] .mwst-section {
    background: linear-gradient(
        145deg,
        rgba(0, 0, 0, 0.03) 0%,
        rgba(0, 0, 0, 0.01) 100%
    );
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Light theme current info boxes */
[data-theme="light"] body[data-page="finanzen"] .current-konto-info,
[data-theme="lightmodern"] body[data-page="finanzen"] .current-konto-info,
body[data-theme="light"][data-page="finanzen"] .current-konto-info,
body[data-theme="lightmodern"][data-page="finanzen"] .current-konto-info {
    background: rgba(255, 149, 0, 0.08);
    border-left: 3px solid rgba(255, 149, 0, 0.6);
}

[data-theme="light"] body[data-page="finanzen"] .gegenkonto-section .current-konto-info,
[data-theme="lightmodern"] body[data-page="finanzen"] .gegenkonto-section .current-konto-info,
body[data-theme="light"][data-page="finanzen"] .gegenkonto-section .current-konto-info,
body[data-theme="lightmodern"][data-page="finanzen"] .gegenkonto-section .current-konto-info {
    background: rgba(52, 199, 89, 0.08);
    border-left-color: rgba(52, 199, 89, 0.6);
}

[data-theme="light"] body[data-page="finanzen"] .mwst-section .current-konto-info,
[data-theme="lightmodern"] body[data-page="finanzen"] .mwst-section .current-konto-info,
body[data-theme="light"][data-page="finanzen"] .mwst-section .current-konto-info,
body[data-theme="lightmodern"][data-page="finanzen"] .mwst-section .current-konto-info {
    background: rgba(94, 92, 230, 0.08);
    border-left-color: rgba(94, 92, 230, 0.6);
}

/* Light theme select/inputs */
[data-theme="light"] body[data-page="finanzen"] .konto-select,
[data-theme="light"] body[data-page="finanzen"] .mwst-select,
[data-theme="lightmodern"] body[data-page="finanzen"] .konto-select,
[data-theme="lightmodern"] body[data-page="finanzen"] .mwst-select,
body[data-theme="light"][data-page="finanzen"] .konto-select,
body[data-theme="light"][data-page="finanzen"] .mwst-select,
body[data-theme="lightmodern"][data-page="finanzen"] .konto-select,
body[data-theme="lightmodern"][data-page="finanzen"] .mwst-select {
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='rgba(0,0,0,0.5)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

[data-theme="light"] body[data-page="finanzen"] .konto-select:hover,
[data-theme="light"] body[data-page="finanzen"] .mwst-select:hover,
[data-theme="lightmodern"] body[data-page="finanzen"] .konto-select:hover,
[data-theme="lightmodern"] body[data-page="finanzen"] .mwst-select:hover,
body[data-theme="light"][data-page="finanzen"] .konto-select:hover,
body[data-theme="light"][data-page="finanzen"] .mwst-select:hover,
body[data-theme="lightmodern"][data-page="finanzen"] .konto-select:hover,
body[data-theme="lightmodern"][data-page="finanzen"] .mwst-select:hover {
    border-color: rgba(0, 0, 0, 0.2);
    background-color: var(--text-primary);
}

[data-theme="light"] body[data-page="finanzen"] .konto-select:focus,
[data-theme="light"] body[data-page="finanzen"] .mwst-select:focus,
[data-theme="lightmodern"] body[data-page="finanzen"] .konto-select:focus,
[data-theme="lightmodern"] body[data-page="finanzen"] .mwst-select:focus,
body[data-theme="light"][data-page="finanzen"] .konto-select:focus,
body[data-theme="light"][data-page="finanzen"] .mwst-select:focus,
body[data-theme="lightmodern"][data-page="finanzen"] .konto-select:focus,
body[data-theme="lightmodern"][data-page="finanzen"] .mwst-select:focus {
    border-color: var(--ios-system-orange);
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.15);
}

/* Light theme footer */
[data-theme="light"] body[data-page="finanzen"] .konto-edit-modal-footer,
[data-theme="lightmodern"] body[data-page="finanzen"] .konto-edit-modal-footer,
body[data-theme="light"][data-page="finanzen"] .konto-edit-modal-footer,
body[data-theme="lightmodern"][data-page="finanzen"] .konto-edit-modal-footer {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.04) 100%);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] body[data-page="finanzen"] .konto-edit-modal-footer .glass-button:not(.primary),
[data-theme="lightmodern"] body[data-page="finanzen"] .konto-edit-modal-footer .glass-button:not(.primary),
body[data-theme="light"][data-page="finanzen"] .konto-edit-modal-footer .glass-button:not(.primary),
body[data-theme="lightmodern"][data-page="finanzen"] .konto-edit-modal-footer .glass-button:not(.primary) {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: var(--text-primary);
}

[data-theme="light"] body[data-page="finanzen"] .konto-edit-modal-footer .glass-button:not(.primary):hover,
[data-theme="lightmodern"] body[data-page="finanzen"] .konto-edit-modal-footer .glass-button:not(.primary):hover,
body[data-theme="light"][data-page="finanzen"] .konto-edit-modal-footer .glass-button:not(.primary):hover,
body[data-theme="lightmodern"][data-page="finanzen"] .konto-edit-modal-footer .glass-button:not(.primary):hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.2);
}

/* Light theme Buchung info section */
[data-theme="light"] body[data-page="finanzen"] .buchung-info-section,
[data-theme="lightmodern"] body[data-page="finanzen"] .buchung-info-section,
body[data-theme="light"][data-page="finanzen"] .buchung-info-section,
body[data-theme="lightmodern"][data-page="finanzen"] .buchung-info-section {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Light theme Konto Picker Modal */
[data-theme="light"] body[data-page="finanzen"] .konto-picker-modal,
[data-theme="lightmodern"] body[data-page="finanzen"] .konto-picker-modal,
body[data-theme="light"][data-page="finanzen"] .konto-picker-modal,
body[data-theme="lightmodern"][data-page="finanzen"] .konto-picker-modal {
    background: linear-gradient(
        165deg,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(248, 250, 252, 0.99) 100%
    );
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow:
        0 32px 64px -16px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(0, 0, 0, 0.05) inset;
}

[data-theme="light"] body[data-page="finanzen"] .konto-picker-header,
[data-theme="lightmodern"] body[data-page="finanzen"] .konto-picker-header,
body[data-theme="light"][data-page="finanzen"] .konto-picker-header,
body[data-theme="lightmodern"][data-page="finanzen"] .konto-picker-header {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, transparent 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] body[data-page="finanzen"] .konto-picker-close,
[data-theme="lightmodern"] body[data-page="finanzen"] .konto-picker-close,
body[data-theme="light"][data-page="finanzen"] .konto-picker-close,
body[data-theme="lightmodern"][data-page="finanzen"] .konto-picker-close {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] body[data-page="finanzen"] .konto-country-filter,
[data-theme="lightmodern"] body[data-page="finanzen"] .konto-country-filter,
body[data-theme="light"][data-page="finanzen"] .konto-country-filter,
body[data-theme="lightmodern"][data-page="finanzen"] .konto-country-filter {
    background: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] body[data-page="finanzen"] .konto-country-btn,
[data-theme="lightmodern"] body[data-page="finanzen"] .konto-country-btn,
body[data-theme="light"][data-page="finanzen"] .konto-country-btn,
body[data-theme="lightmodern"][data-page="finanzen"] .konto-country-btn {
    background: transparent;
    color: var(--text-secondary);
}

[data-theme="light"] body[data-page="finanzen"] .konto-country-btn.active,
[data-theme="lightmodern"] body[data-page="finanzen"] .konto-country-btn.active,
body[data-theme="light"][data-page="finanzen"] .konto-country-btn.active,
body[data-theme="lightmodern"][data-page="finanzen"] .konto-country-btn.active {
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] body[data-page="finanzen"] .konto-picker-search input,
[data-theme="lightmodern"] body[data-page="finanzen"] .konto-picker-search input,
body[data-theme="light"][data-page="finanzen"] .konto-picker-search input,
body[data-theme="lightmodern"][data-page="finanzen"] .konto-picker-search input {
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}

[data-theme="light"] body[data-page="finanzen"] .konto-picker-search input:focus,
[data-theme="lightmodern"] body[data-page="finanzen"] .konto-picker-search input:focus,
body[data-theme="light"][data-page="finanzen"] .konto-picker-search input:focus,
body[data-theme="lightmodern"][data-page="finanzen"] .konto-picker-search input:focus {
    border-color: var(--ios-system-orange);
    background: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] body[data-page="finanzen"] .konto-picker-tree,
[data-theme="lightmodern"] body[data-page="finanzen"] .konto-picker-tree,
body[data-theme="light"][data-page="finanzen"] .konto-picker-tree,
body[data-theme="lightmodern"][data-page="finanzen"] .konto-picker-tree {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] body[data-page="finanzen"] .konto-class-header,
[data-theme="lightmodern"] body[data-page="finanzen"] .konto-class-header,
body[data-theme="light"][data-page="finanzen"] .konto-class-header,
body[data-theme="lightmodern"][data-page="finanzen"] .konto-class-header {
    background: rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] body[data-page="finanzen"] .konto-item:hover,
[data-theme="lightmodern"] body[data-page="finanzen"] .konto-item:hover,
body[data-theme="light"][data-page="finanzen"] .konto-item:hover,
body[data-theme="lightmodern"][data-page="finanzen"] .konto-item:hover {
    background: rgba(255, 149, 0, 0.08);
}

[data-theme="light"] body[data-page="finanzen"] .konto-item.selected,
[data-theme="lightmodern"] body[data-page="finanzen"] .konto-item.selected,
body[data-theme="light"][data-page="finanzen"] .konto-item.selected,
body[data-theme="lightmodern"][data-page="finanzen"] .konto-item.selected {
    background: rgba(255, 149, 0, 0.12);
    border-color: rgba(255, 149, 0, 0.3);
}

/* =========================================================================
   UNDO TOAST — 5s deferred-commit window with progress bar + Rückgängig
   Stacks bottom-right; one toast per single action, one per batch.
   ========================================================================= */
.undo-toast-container {
    position: fixed;
    right: 1.5em;
    bottom: 1.5em;
    z-index: var(--z-toast, 70);
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    align-items: flex-end;
    pointer-events: none;
}

.undo-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.75em;
    box-sizing: border-box;
    min-width: 18em;
    max-width: 26em;
    padding: 0.625em 0.75em 0.625em 1em;
    background: var(--glass-modal-bg, var(--glass-primary));
    backdrop-filter: blur(var(--glass-blur, 8px));
    -webkit-backdrop-filter: blur(var(--glass-blur, 8px));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md, 1em);
    box-shadow: var(--shadow-lg, 0 0.5em 1.5em rgba(0, 0, 0, 0.25));
    color: var(--text-primary);
    animation: undo-toast-in 0.2s ease;
}

.undo-toast-leaving {
    animation: undo-toast-out 0.2s ease forwards;
}

.undo-toast-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375em;
}

.undo-toast-label {
    font-size: 0.8125em;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.undo-toast-track {
    width: 100%;
    height: 0.3em;
    border-radius: var(--radius-full, 9999px);
    background: var(--glass-secondary, rgba(127, 127, 127, 0.2));
    overflow: hidden;
}

.undo-toast-bar {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: var(--accent-success, #34C759);
    animation: undo-fill 5s linear forwards;
}

.undo-toast-reject .undo-toast-bar {
    background: var(--accent-primary, #FF9500);
}

.undo-toast-btn {
    flex: 0 0 auto;
    padding: 0.4em 0.85em;
    font-size: 0.8125em;
    font-weight: 600;
    color: var(--accent-primary, #FF9500);
    background: transparent;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm, 0.5em);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.undo-toast-btn:hover {
    background: var(--glass-hover, rgba(127, 127, 127, 0.12));
    border-color: var(--accent-primary, #FF9500);
}

@keyframes undo-fill {
    from { width: 0%; }
    to { width: 100%; }
}

@keyframes undo-toast-in {
    from { opacity: 0; transform: translateY(0.5em); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes undo-toast-out {
    to { opacity: 0; transform: translateY(0.5em); }
}

/* The fill bar is a functional countdown indicator — keep it even with reduced motion */
@media (prefers-reduced-motion: reduce) {
    .undo-toast { animation: none; }
    .undo-toast-leaving { animation: none; }
}

/* =========================================================================
   Erfolgsrechnung Soll/Ist basis toggle
   ========================================================================= */
body[data-page="finanzen"] .er-basis-toggle {
    display: inline-flex;
    gap: 0.25em;
    padding: 0.25em;
    margin-bottom: 0.5em;
    background: var(--glass-secondary, rgba(127, 127, 127, 0.12));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full, 9999px);
}

body[data-page="finanzen"] .er-basis-btn {
    padding: 0.3em 1.1em;
    font-size: 0.8125em;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--radius-full, 9999px);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

body[data-page="finanzen"] .er-basis-btn:hover {
    color: var(--text-primary);
}

body[data-page="finanzen"] .er-basis-btn.active {
    color: var(--button-text-on-color, #ffffff);
    background: var(--accent-primary, #FF9500);
}

body[data-page="finanzen"] .er-basis-caption {
    font-size: 0.75em;
    color: var(--text-tertiary);
    margin: 0 0 1em 0;
}

body[data-page="finanzen"] .er-controls {
    display: flex;
    align-items: center;
    gap: 0.75em;
    flex-wrap: wrap;
    margin-bottom: 0.5em;
}

body[data-page="finanzen"] .er-year-select {
    padding: 0.35em 0.75em;
    font-size: 0.8125em;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--glass-secondary, rgba(127, 127, 127, 0.12));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full, 9999px);
    cursor: pointer;
}

body[data-page="finanzen"] .er-year-select:focus {
    outline: none;
    border-color: var(--accent-primary, #FF9500);
}