:root {
    --topbar-height: 3rem;
    --sidebar-collapsed: 40px;
    --sidebar-expanded:  220px;
    --transition:        width 220ms ease, opacity 180ms ease;

    /* Chrome (Sidebar, Dialoge auf Chrome-Ebene) — bewusst fix dunkel in beiden Modi */
    --chrome-bg-start: #2f2f2f;
    --chrome-bg-mid:   #3c3c3c;
    --chrome-bg-end:   #4a4a4a;
    --chrome-sidebar-start: rgb(5, 39, 103);
    --chrome-sidebar-end:   #3a0647;
    --chrome-text:     whitesmoke;
    --chrome-text-muted: rgba(255,255,255,.7);
    --chrome-border:   rgba(255,255,255,0.1);
    --chrome-navmenu-bg: rgba(33, 37, 41, 0.92);
    --chrome-topbar-bg: rgba(0, 0, 0, 0.4);


    --chrome-gradient-start: #e2e2e2;
    --chrome-gradient-mid:   #d2d2d2;
    --chrome-gradient-end:   #c2c2c2;

    --chrome-gradient-highlight: rgba(255,255,255,0.45);
    --chrome-gradient-highlight-stop: 60%;

    /* Content-Bereich (Cards, Tabellen, Filter) — wechselt mit dem Toggle */
    --color-bg:            #ffffff;
    --color-bg-secondary: #dcdbdb;
    --color-surface:       #c8c7c7;
    --color-surface-hover: #e3e1e1;
    --color-surface-hover-active: #f1efef;
    --color-text:          #1a1a1a;
    --color-text-secondary: #41454c;
    --color-text-muted:    #5a5a5a;
    --color-border:        #5a5a5a;
    --shadow-color:        rgba(0,0,0,0.25);
    --overlay-bg: rgba(255, 255, 255, 0.7);
    --collapse-icon:       #5a5a5a;

    /* Buttons — unverändert in beiden Modi */
    --btn-bank-bg:      #ffa500;
    --btn-bank-text:    #000;
    --btn-bank-selected-bg: #7718ff;
    --btn-bank-selected-border: #3e167c;
    --btn-primary-bg:   #de5b29;
    --btn-primary-hover: #ac3207;

    --table-footer-bg: rgba(245, 245, 245, 0.75);
}

[data-theme="dark"] {

    --chrome-gradient-start: #2f2f2f;
    --chrome-gradient-mid:   #3c3c3c;
    --chrome-gradient-end:   #4a4a4a;

    --chrome-gradient-highlight: rgba(255,255,255,0.05);
    --chrome-gradient-highlight-stop: 60%;
    
    --color-bg:            #1e1e1e;
    --color-bg-secondary:  #262626;
    --color-surface:       #2f2f2f;
    --color-surface-hover: #3a3a3a;
    --color-surface-hover-active: #444444;
    --color-text:          #e8e8e8;
    --color-text-secondary: #a1a1aa;
    --color-text-muted:    #a0a0a0;
    --color-border:        #4a4a4a;
    --shadow-color:        rgba(0,0,0,0.5);
    --overlay-bg: rgba(20, 20, 20, 0.75);
    --collapse-icon:       #a0a0a0;

    --table-footer-bg: rgba(40, 40, 40, 0.75);
}

/* ===== Layout-Utilities (Bootstrap-5-Äquivalente) ===== */

.pdfkonto-flex {
    display: flex;
}

.pdfkonto-flex-center {
    display: flex;
    align-items: center;
}

.pdfkonto-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

.pdfkonto-flex-grow {
    flex-grow: 1;
}

.pdfkonto-flex-wrap {
    flex-wrap: wrap;
}

.pdfkonto-justify-center {
    justify-content: center;
}

/* Gap-Werte, angelehnt an Bootstrap-5-Skala (0.25rem-Schritte) */
.pdfkonto-gap-1 { gap: 0.25rem; }
.pdfkonto-gap-2 { gap: 0.5rem; }
.pdfkonto-gap-3 { gap: 1rem; }
.pdfkonto-gap-4 { gap: 1.5rem; }

/* Grid-Äquivalente */
.pdfkonto-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.75rem;
}

.pdfkonto-col-auto {
    flex: 0 0 auto;
    width: auto;
    padding: 0 0.75rem;
}

.pdfkonto-col {
    flex: 1 1 0;
    padding: 0 0.75rem;
    min-width: 0;
}

/* Text-Utilities */
.pdfkonto-text-muted {
    color: var(--color-text-muted);
}

.pdfkonto-text-center {
    text-align: center;
}

.pdfkonto-small { font-size: 0.875em; }



/* Grid-Ergänzung */
.pdfkonto-col-8 {
    flex: 0 0 66.666%;
    max-width: 66.666%;
    padding: 0 0.75rem;
}

.pdfkonto-col-4 {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    padding: 0 0.75rem;
}

.pdfkonto-badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.375rem;
    background-color: var(--color-border);
    color: var(--color-text);
}

.pdfkonto-badge-primary {
    background-color: var(--btn-primary-bg);
    color: white;
}

.pdfkonto-badge-secondary {
    background-color: var(--color-border);
    color: white;
}

.pdfkonto-badge-success {
    background-color: #198754;
    color: white;
}

.pdfkonto-badge-danger {
    background-color: #dc3545;
    color: white;
}

.pdfkonto-badge-muted {
    background-color: var(--color-surface-hover);
    color: var(--color-text-muted);
}

.pdfkonto-table-wrapper {
    overflow-x: auto;
    width: 100%;
}

.pdfkonto-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--color-text);
}

.pdfkonto-table th,
.pdfkonto-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.pdfkonto-table thead th {
    border-bottom: 2px solid var(--color-border);
    color: var(--color-text-secondary);
    text-align: left;
    font-weight: 600;
}

/* striped table*/
.pdfkonto-table tbody tr:nth-of-type(odd) {
    background-color: var(--color-bg-secondary);
}

.pdfkonto-table tbody tr:nth-of-type(even) {
    background-color: var(--color-bg);
}

/* hover table*/
.pdfkonto-table tbody tr:hover {
    background-color: var(--color-surface-hover);
}


/* ===== Toast ===== */

/* Farbvarianten, Äquivalent zu text-bg-* */
.pdfkonto-toast-success {
    background-color: #198754;
    color: white;
}

.pdfkonto-toast-success .pdfkonto-toast-header {
    background-color: rgba(0, 0, 0, 0.15);
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.pdfkonto-toast-danger {
    background-color: #dc3545;
    color: white;
}

.pdfkonto-toast-danger .pdfkonto-toast-header {
    background-color: rgba(0, 0, 0, 0.15);
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

.pdfkonto-toast-warning {
    background-color: #ffc107;
    color: #000;
}

.pdfkonto-toast-warning .pdfkonto-toast-header {
    background-color: rgba(0, 0, 0, 0.1);
    border-bottom-color: rgba(0, 0, 0, 0.15);
}

.pdfkonto-toast-info {
    background-color: #0dcaf0;
    color: #000;
}

.pdfkonto-toast-info .pdfkonto-toast-header {
    background-color: rgba(0, 0, 0, 0.1);
    border-bottom-color: rgba(0, 0, 0, 0.15);
}