/* ============================================================
   Vereinsbuchhaltung – Komplettes Custom Dark Theme
   (kein Bootstrap data-bs-theme, alles eigenständig)
   ============================================================ */

:root {
    --accent:        #FFC107;
    --accent-dim:    rgba(255,193,7,.12);
    --accent-border: rgba(255,193,7,.40);
    --bg:            #0a0a0a;
    --bg2:           #111111;
    --bg3:           #161616;
    --card-bg:       #1a1a1a;
    --card-hover:    #202020;
    --text:          #f0f0f0;
    --muted:         rgba(240,240,240,.60);
    --muted2:        rgba(240,240,240,.38);
    --border:        rgba(255,255,255,.10);
    --border2:       rgba(255,255,255,.16);
    --shadow:        0 4px 24px rgba(0,0,0,.50);
    --radius:        12px;
    --radius-sm:     8px;
    --radius-lg:     16px;
    --font-body:     system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --font-heading:  Impact,Haettenschweiler,"Arial Narrow Bold","Franklin Gothic Medium",system-ui,sans-serif;
}

/* ── RESET & BASE ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: #fff; }

/* ── LAYOUT ───────────────────────────────────────────────── */
.container-fluid {
    max-width: 1440px;
    padding: 0 20px;
    flex: 1;
}

/* Seiteninhalt hat genug Luft nach oben (da Navbar sticky, kein fixer Offset nötig) */
.container-fluid.py-3 {
    padding-top: 24px !important;
    padding-bottom: 32px !important;
}

/* ── NAVBAR ───────────────────────────────────────────────── */
.navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 2000 !important;
    background: #0a0a0a !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 0 !important;
    min-height: 68px;
    isolation: isolate;
}

.navbar .container-fluid {
    padding: 0 24px;
    min-height: 68px;
}

.navbar-brand {
    color: #fff !important;
    font-family: var(--font-heading);
    font-size: 1.15rem !important;
    letter-spacing: .18em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 !important;
    margin-right: 20px;
}
.navbar-brand i { color: var(--accent); font-size: 1.2rem; }
.navbar-brand:hover { color: var(--accent) !important; }

.navbar-collapse {
    /* Auf kleinen Screens: erscheint ÜBER dem Seiteninhalt */
    position: relative;
    z-index: 2001;
}

/* Aufgeklappte Dropdown-Menüs immer über dem Seiteninhalt */
.navbar .dropdown-menu {
    z-index: 2002 !important;
}

/* Mobile: aufgeklapptes Menü über dem Content */
@media (max-width: 991.98px) {
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        position: absolute;
        top: 68px;
        left: 0;
        right: 0;
        background: rgba(10,10,10,.98);
        border-bottom: 1px solid var(--border);
        padding: 12px 16px;
        z-index: 2001;
    }
    .navbar-nav { flex-direction: column; align-items: flex-start; width: 100%; }
    .nav-link { padding: 10px 8px !important; width: 100%; }
    .nav-link.active::after { display: none; }
    .dropdown-menu { position: relative !important; border: none !important; background: rgba(255,255,255,.04) !important; box-shadow: none !important; margin: 0 0 4px 12px !important; }
}

.navbar-nav { align-items: center; gap: 2px; }
.navbar-nav .nav-item { display: flex; align-items: stretch; }

.nav-link {
    color: rgba(255,255,255,.65) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
    padding: 0 12px !important;
    height: 68px;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap;
    transition: color .15s !important;
    border-radius: 0 !important;
    position: relative;
}
.nav-link:hover,
.nav-link.active,
.nav-link.show { color: var(--accent) !important; }

.nav-link.active::after {
    content: "";
    position: absolute;
    bottom: 0; left: 8px; right: 8px;
    height: 3px;
    background: var(--accent);
    border-radius: 3px 3px 0 0;
}

.nav-cta {
    color: var(--accent) !important;
    border: 1px solid var(--accent-border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 7px 16px !important;
    height: auto !important;
    margin-left: 8px;
    font-size: 13px !important;
    align-self: center;
}
.nav-cta:hover {
    background: var(--accent-dim) !important;
    color: #fff !important;
}
.nav-cta::after { display: none !important; }

.navbar-toggler {
    border-color: var(--accent-border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px 12px !important;
}
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2C193%2C7%2C0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    width: 22px; height: 22px;
}

/* Dropdown Menü */
.dropdown-menu {
    background: #1c1c1c !important;
    border: 1px solid var(--border2) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow) !important;
    padding: 4px !important;
    min-width: 200px;
}
.dropdown-item {
    color: var(--muted) !important;
    font-size: 14px !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    transition: .12s !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
    background: rgba(255,255,255,.07) !important;
    color: #fff !important;
}
.dropdown-item i { color: var(--accent); width: 16px; }
.dropdown-divider { border-color: var(--border) !important; margin: 4px 0 !important; }

/* ── CARDS ────────────────────────────────────────────────── */
.card {
    background: var(--card-bg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    color: var(--text) !important;
    margin-bottom: 0;
}
.card-header {
    background: rgba(255,255,255,.03) !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text) !important;
    font-size: 15px;
    padding: 12px 16px !important;
}
.card-body {
    color: var(--text) !important;
    padding: 16px !important;
}
.card-footer {
    background: rgba(255,255,255,.02) !important;
    border-top: 1px solid var(--border) !important;
    padding: 10px 16px !important;
}

/* ── STAT CARDS ───────────────────────────────────────────── */
.stat-card { transition: border-color .15s; }
.stat-card:hover { border-color: var(--border2) !important; }
.stat-card .card-body { padding: 16px !important; }
.stat-value {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 900;
    letter-spacing: .02em;
    line-height: 1.1;
    margin-bottom: 2px;
}

/* ── TABLES ───────────────────────────────────────────────── */
.table {
    color: var(--text) !important;
    margin-bottom: 0;
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
    --bs-table-hover-bg: rgba(255,255,255,.03);
}
.table > :not(caption) > * > * {
    background-color: transparent !important;
    color: var(--text) !important;
    border-bottom-color: var(--border) !important;
    padding: 10px 14px !important;
}
.table thead th {
    color: var(--muted2) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
    border-bottom: 1px solid var(--border2) !important;
    padding-bottom: 8px !important;
}
.table-hover > tbody > tr:hover > * {
    background-color: rgba(255,255,255,.03) !important;
    color: var(--text) !important;
}
.table-light > * { background-color: rgba(255,255,255,.04) !important; color: var(--muted) !important; }
.table-secondary > * { background-color: rgba(255,255,255,.03) !important; color: var(--muted2) !important; }
.table-dark > * { background-color: rgba(255,193,7,.10) !important; color: #fff !important; }
.table-primary > * { background-color: rgba(255,193,7,.08) !important; color: #fff !important; }

/* ── FORMS ────────────────────────────────────────────────── */
.form-control,
.form-select,
textarea.form-control {
    background-color: rgba(255,255,255,.06) !important;
    border: 1px solid var(--border2) !important;
    color: var(--text) !important;
    border-radius: var(--radius-sm) !important;
    font-size: 15px !important;
    padding: 8px 12px !important;
    min-height: 38px;
    transition: border-color .15s, box-shadow .15s;
}
.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    background-color: rgba(255,255,255,.08) !important;
    border-color: rgba(255,193,7,.60) !important;
    box-shadow: 0 0 0 3px rgba(255,193,7,.12) !important;
    color: #fff !important;
    outline: none;
}
.form-control::placeholder,
textarea.form-control::placeholder { color: var(--muted2) !important; }
.form-control:disabled,
.form-select:disabled {
    background-color: rgba(255,255,255,.03) !important;
    color: var(--muted2) !important;
    cursor: not-allowed;
}
.form-select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255%2C255%2C255%2C0.5%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important; }
.form-select option { background: #1c1c1c; color: var(--text); }
.form-label { color: var(--muted); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px; display: block; }
.form-text { color: var(--muted2) !important; font-size: 13px; margin-top: 4px; }
.form-check-input { background-color: rgba(255,255,255,.1) !important; border-color: var(--border2) !important; }
.form-check-input:checked { background-color: var(--accent) !important; border-color: var(--accent) !important; }
.form-check-label { color: var(--text) !important; font-size: 15px; }
.input-group-text {
    background: rgba(255,255,255,.05) !important;
    border: 1px solid var(--border2) !important;
    color: var(--muted) !important;
    font-size: 15px !important;
}
.form-control-sm, .form-select-sm { font-size: 14px !important; padding: 5px 10px !important; min-height: 32px; }

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn {
    font-size: 14px;
    font-weight: 700;
    border-radius: var(--radius-sm) !important;
    padding: 8px 16px;
    transition: .15s;
    text-transform: uppercase;
    letter-spacing: .08em;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.btn-sm { font-size: 13px !important; padding: 5px 10px !important; }
.btn-lg { font-size: 15px !important; padding: 10px 20px !important; }

.btn-primary { background: var(--accent) !important; border-color: var(--accent) !important; color: #000 !important; }
.btn-primary:hover, .btn-primary:focus { background: #fff !important; border-color: #fff !important; color: #000 !important; }

.btn-warning { background: var(--accent) !important; border-color: var(--accent) !important; color: #000 !important; }
.btn-warning.text-dark { color: #000 !important; }
.btn-warning:hover { background: #fff !important; border-color: #fff !important; color: #000 !important; }

.btn-secondary { background: rgba(255,255,255,.10) !important; border-color: var(--border2) !important; color: var(--text) !important; }
.btn-secondary:hover { background: rgba(255,255,255,.16) !important; color: #fff !important; }

.btn-outline-secondary { background: transparent !important; border-color: var(--border2) !important; color: var(--muted) !important; }
.btn-outline-secondary:hover { background: rgba(255,255,255,.07) !important; color: #fff !important; border-color: var(--border2) !important; }

.btn-outline-danger { background: transparent !important; border-color: rgba(220,53,69,.5) !important; color: #f87171 !important; }
.btn-outline-danger:hover { background: rgba(220,53,69,.15) !important; color: #ff8080 !important; }

.btn-outline-success { background: transparent !important; border-color: rgba(74,222,128,.4) !important; color: #4ade80 !important; }
.btn-outline-success:hover { background: rgba(74,222,128,.12) !important; color: #6ee7a0 !important; }

.btn-outline-primary { background: transparent !important; border-color: var(--accent-border) !important; color: var(--accent) !important; }
.btn-outline-primary:hover { background: var(--accent-dim) !important; color: #fff !important; }

.btn-outline-warning { background: transparent !important; border-color: var(--accent-border) !important; color: var(--accent) !important; }
.btn-outline-warning:hover { background: var(--accent-dim) !important; color: #fff !important; }

.btn-danger { background: rgba(220,53,69,.8) !important; border-color: transparent !important; color: #fff !important; }
.btn-danger:hover { background: #dc3545 !important; }

.btn-success { background: rgba(25,135,84,.8) !important; border-color: transparent !important; color: #fff !important; }
.btn-success:hover { background: #198754 !important; }

.btn-close { filter: invert(1) brightness(2) !important; opacity: .6; }
.btn-close:hover { opacity: 1; }

/* ── ALERTS ───────────────────────────────────────────────── */
.alert {
    border-radius: var(--radius-sm) !important;
    font-size: 15px;
    border-width: 1px !important;
    padding: 12px 16px;
}
.alert-success  { background: rgba(74,222,128,.10) !important;  border-color: rgba(74,222,128,.25) !important;  color: #86efac !important; }
.alert-danger   { background: rgba(248,113,113,.10) !important; border-color: rgba(248,113,113,.25) !important; color: #fca5a5 !important; }
.alert-warning  { background: rgba(255,193,7,.10) !important;   border-color: rgba(255,193,7,.30) !important;   color: #fde68a !important; }
.alert-info     { background: rgba(56,189,248,.09) !important;  border-color: rgba(56,189,248,.22) !important;  color: #7dd3fc !important; }
.alert-primary  { background: rgba(255,193,7,.10) !important;   border-color: rgba(255,193,7,.28) !important;   color: #fde68a !important; }
.alert-secondary{ background: rgba(255,255,255,.04) !important; border-color: var(--border) !important;         color: var(--muted) !important; }
.alert-link { text-decoration: underline; color: inherit !important; font-weight: 700; }

/* ── BADGES ───────────────────────────────────────────────── */
.badge { font-size: 12px !important; font-weight: 700; border-radius: 5px; padding: 3px 7px; letter-spacing: .04em; }
.bg-success  { background: rgba(74,222,128,.18) !important;  color: #86efac !important;  border: 1px solid rgba(74,222,128,.3); }
.bg-danger   { background: rgba(248,113,113,.18) !important; color: #fca5a5 !important;  border: 1px solid rgba(248,113,113,.3); }
.bg-warning  { background: rgba(255,193,7,.18) !important;   color: #fde68a !important;  border: 1px solid var(--accent-border); }
.bg-primary  { background: rgba(255,193,7,.15) !important;   color: var(--accent) !important; border: 1px solid var(--accent-border); }
.bg-secondary{ background: rgba(255,255,255,.08) !important; color: var(--muted) !important;  border: 1px solid var(--border); }
.bg-info     { background: rgba(56,189,248,.14) !important;  color: #7dd3fc !important;  border: 1px solid rgba(56,189,248,.25); }
.text-dark   { color: #000 !important; }
.text-bg-warning { color: #000 !important; }

/* ── TRANSACTION BADGES ───────────────────────────────────── */
.badge-income {
    background: rgba(74,222,128,.15);
    color: #86efac;
    border: 1px solid rgba(74,222,128,.28);
    padding: 3px 8px; border-radius: 5px;
    font-size: 12px; font-weight: 700;
}
.badge-expense {
    background: rgba(248,113,113,.14);
    color: #fca5a5;
    border: 1px solid rgba(248,113,113,.25);
    padding: 3px 8px; border-radius: 5px;
    font-size: 12px; font-weight: 700;
}
.badge-transfer {
    background: rgba(56,189,248,.12);
    color: #7dd3fc;
    border: 1px solid rgba(56,189,248,.22);
    padding: 3px 8px; border-radius: 5px;
    font-size: 12px; font-weight: 700;
}

/* ── AMOUNT COLORS ────────────────────────────────────────── */
.amount-income  { color: #86efac !important; font-weight: 700; }
.amount-expense { color: #fca5a5 !important; font-weight: 700; }
.text-success   { color: #86efac !important; }
.text-danger    { color: #fca5a5 !important; }
.text-primary   { color: var(--accent) !important; }
.text-warning   { color: #fde68a !important; }
.text-muted     { color: var(--muted2) !important; }
.text-white     { color: #fff !important; }

/* ── PAGINATION ───────────────────────────────────────────── */
.page-link { background: var(--card-bg) !important; border-color: var(--border) !important; color: var(--muted) !important; }
.page-link:hover { background: var(--card-hover) !important; color: #fff !important; }
.page-item.active .page-link { background: var(--accent) !important; border-color: var(--accent) !important; color: #000 !important; font-weight: 700; }
.page-item.disabled .page-link { background: var(--card-bg) !important; color: var(--muted2) !important; }

/* ── MODALS ───────────────────────────────────────────────── */
.modal-content { background: #1c1c1c !important; border: 1px solid var(--border2) !important; border-radius: var(--radius) !important; color: var(--text) !important; }
.modal-header { border-bottom-color: var(--border) !important; padding: 16px 20px !important; }
.modal-footer { border-top-color: var(--border) !important; padding: 12px 20px !important; }
.modal-title { color: var(--text) !important; font-size: 16px; font-weight: 700; }
.modal-backdrop { background-color: #000 !important; }

/* ── ACCORDION ────────────────────────────────────────────── */
.accordion-item { background: var(--card-bg) !important; border-color: var(--border) !important; }
.accordion-button { background: rgba(255,255,255,.02) !important; color: var(--text) !important; font-size: 15px; box-shadow: none !important; }
.accordion-button:not(.collapsed) { background: var(--accent-dim) !important; color: var(--accent) !important; }
.accordion-button::after { filter: invert(1) brightness(1.5); }
.accordion-body { background: transparent !important; color: var(--muted) !important; font-size: 15px; }

/* ── LIST GROUP ───────────────────────────────────────────── */
.list-group-item {
    background: transparent !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
    padding: 10px 16px !important;
}
.list-group-item-action:hover { background: rgba(255,255,255,.04) !important; color: #fff !important; }
.list-group-item-success { background: rgba(74,222,128,.08) !important; border-color: rgba(74,222,128,.2) !important; color: #86efac !important; }
.list-group-item-danger  { background: rgba(248,113,113,.08) !important; border-color: rgba(248,113,113,.2) !important; color: #fca5a5 !important; }

/* ── COLLAPSE / MISC ──────────────────────────────────────── */
.collapse:not(.show) { display: none; }
code { background: rgba(255,193,7,.10); color: var(--accent); border: 1px solid var(--accent-border); border-radius: 4px; padding: 1px 5px; font-size: .85em; }
pre  { background: rgba(0,0,0,.4); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; color: var(--muted); font-size: 13px; overflow-x: auto; }
hr   { border-color: var(--border) !important; opacity: 1; }

/* ── SECTION LABEL (Buchungsmaske) ───────────────────────── */
.section-label {
    font-size: 12px; font-weight: 900; text-transform: uppercase;
    letter-spacing: .14em; color: var(--accent);
    margin: 20px 0 10px; padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,193,7,.18);
}

/* ── VEREINSBEREICH KARTEN ────────────────────────────────── */
.vb-card {
    display: block; padding: 12px 14px; border-radius: 10px;
    cursor: pointer; border: 1px solid var(--border);
    background: rgba(255,255,255,.03); transition: .15s;
}
.vb-card:hover { border-color: var(--accent-border); background: var(--accent-dim); }
.vb-card input { display: none; }
.vb-card.vb-active { border-color: var(--accent); background: rgba(255,193,7,.10); }
.vb-name { font-weight: 700; font-size: 14px; margin-bottom: 3px; color: #fff; }
.vb-hint { font-size: 13px; color: var(--muted2); line-height: 1.4; }

/* ── RECEIPT / DOC ICON ───────────────────────────────────── */
.receipt-icon { font-size: 1.1rem; color: var(--accent); }

/* ── LOGIN PAGE ───────────────────────────────────────────── */
.login-card {
    background: var(--card-bg);
    border: 1px solid var(--border2);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.login-logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: #fff;
}
.login-logo i { color: var(--accent); }

/* ── PAGE HEADINGS ────────────────────────────────────────── */
h4.mb-0, h4.mb-3 {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 1.2rem;
    color: #fff;
}
h4.mb-0 i, h4.mb-3 i { color: var(--accent); }

/* ── FOOTER ───────────────────────────────────────────────── */
footer.footer {
    background: var(--bg) !important;
    border-top: 1px solid var(--border);
    color: var(--muted2) !important;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .16em;
    padding: 10px 0 !important;
    margin-top: auto;
}
footer.footer a { color: var(--muted) !important; }
footer.footer a:hover { color: #fff !important; }

/* ── BORDER HELPERS ───────────────────────────────────────── */
.border-success { border-color: rgba(74,222,128,.40) !important; }
.border-danger  { border-color: rgba(248,113,113,.40) !important; }
.border-warning { border-color: rgba(255,193,7,.40) !important; }

/* ── SCROLLBAR ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); }

/* ── TRANSITIONS FÜR HOVER-KARTEN ────────────────────────── */
a.card:hover { border-color: var(--accent-border) !important; transform: translateY(-1px); transition: .15s; box-shadow: 0 6px 20px rgba(0,0,0,.3) !important; }
a.card { transition: .15s; }

/* ── PRINT ────────────────────────────────────────────────── */
@media print {
    body        { background: #fff !important; color: #000 !important; }
    .navbar, .no-print, footer, .btn, .alert, .accordion, nav { display: none !important; }
    .card       { background: #fff !important; border: 1px solid #ccc !important; color: #000 !important; box-shadow: none !important; }
    .card-header{ background: #f5f5f5 !important; color: #000 !important; border-bottom: 1px solid #ccc !important; }
    .table      { color: #000 !important; }
    .table > :not(caption) > * > * { color: #000 !important; background: transparent !important; border-bottom-color: #ddd !important; }
    .table thead th { color: #555 !important; border-bottom-color: #ccc !important; }
    .amount-income  { color: #166534 !important; }
    .amount-expense { color: #991b1b !important; }
    .text-muted     { color: #666 !important; }
    a { color: #000 !important; text-decoration: none !important; }
    .badge { border: 1px solid #999 !important; color: #000 !important; background: #eee !important; }
    .container-fluid { max-width: 100% !important; padding: 0 !important; }
}