/* BFL86 — FC-Bayern-Farbschema (offizielle Vereinsfarben) */
:root {
    /* FC Bayern Primärfarben */
    --bfl-red:        #dc052d;   /* FC Bayern Hauptrot (offiziell) */
    --bfl-red-dark:   #a50027;   /* Dunkleres Rot für Hover/Verläufe */
    --bfl-red-deep:   #6e001a;   /* Sehr tiefes Rot für Schatten */

    /* FC Bayern Sekundärfarben (Wappen) */
    --bfl-blue:       #0066b2;   /* FC Bayern Wappenblau */
    --bfl-blue-dark:  #004a82;
    --bfl-blue-light: #4d94d6;

    /* Neutrale Akzente */
    --bfl-anthracite: #0a0a0f;   /* Schwarz/Anthrazit für Hintergründe */
    --bfl-charcoal:   #1c1c24;   /* Etwas helleres Anthrazit */

    /* Akzentfarbe (sparsam): warmes Gelb für Hervorhebungen wie Pending-Badge */
    --bfl-accent:     #fbbf24;
}

/* ── Seitenleiste ───────────────────────────────────────────────────────── */
aside {
    background: linear-gradient(180deg, var(--bfl-anthracite) 0%, var(--bfl-charcoal) 100%);
    border-right: 3px solid var(--bfl-red);
}
/* Inaktive Links: hellgrau (#e5e7eb auf #0a0a0f = 17:1, exzellent) */
aside nav a {
    color: #e5e7eb !important;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
/* Hover: heller Hintergrund + helles Weiß (Kontrast bleibt > 12:1) */
aside nav a:hover {
    background: rgba(220,5,45,0.30) !important;
    color: #ffffff !important;
}
/* Aktiv: kräftiges Bayern-Rot mit weißem Text (Kontrast 8:1 mit Dunkelrot-Mix). */
aside nav a.bg-gray-100,
aside nav a.font-semibold,
aside nav a.bfl-active,
aside nav a.bfl-nav-item.bfl-active {
    color: #ffffff !important;
    background: linear-gradient(90deg, rgba(220,5,45,0.55) 0%, rgba(220,5,45,0.20) 100%) !important;
    border-left: 4px solid var(--bfl-red) !important;
    padding-left: 8px !important;  /* kompensiert die 4px border-left */
    font-weight: 600 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
/* Sidebar-Gruppen-Trennlinie subtiler */
aside nav > div[class*="border-t"] {
    border-top-color: rgba(255,255,255,0.08) !important;
}
/* (User-Avatar-Style ist oben mit höherer Spezifität definiert) */

/* ── Top-Header ─────────────────────────────────────────────────────────── */
/* Verlauf bleibt links anthrazit, geht in dunkles Bordeaux über (Kontrast 8:1+ für weißen Text). */
header {
    background: linear-gradient(90deg,
        var(--bfl-anthracite) 0%,
        var(--bfl-red-deep) 35%,
        var(--bfl-red-dark) 100%) !important;
    border-bottom: 3px solid var(--bfl-red);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* Alle Texte im Header sind 100% weiß (nicht rgba), für maximale Lesbarkeit.
   Ausnahmen: Avatar (dunkel auf weißem BG), Org-Badge, Dropdown-Menu. */
header,
header > div .font-bold,
header > div [class*="text-lg"],
header > div .text-xs,
header > div .text-sm,
header > div span:not(.bfl-avatar):not(.bfl-org-badge),
header > div > a,
#user-menu-btn {
    color: #ffffff !important;
}
#user-menu-btn span:not(.bfl-avatar):not(.bfl-org-badge) {
    color: #ffffff !important;
}
/* Avatar-Initialen: dunkler Text auf weißem Kreis. Hohe Spezifität, um die
   `header > div span:not(.bfl-avatar)` Regel zu schlagen. */
header span.bfl-avatar,
header button#user-menu-btn span.bfl-avatar {
    color: #1c1c24 !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
/* Org-Badge im User-Menu-Trigger: farbiger Text auf hellem BG */
header span.bfl-org-badge,
header button#user-menu-btn span.bfl-org-badge {
    background: rgba(255,255,255,0.95) !important;
}
/* User-Dropdown-Menu: dunkler Text auf weißem BG (nicht vom header-white-Override betroffen) */
#user-menu, #user-menu * {
    color: #1f2937 !important;
}
#user-menu a {
    color: #1f2937 !important;
}
#user-menu a:hover {
    background: #f3f4f6 !important;
}
#user-menu .bfl-org-badge {
    color: #ffffff !important;
}
header [class*="text-lg"] {
    text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
/* Sekundäre Texte (Stand, Username) leicht eingedämpft, aber kontrastsicher (>7:1) */
header .text-xs {
    color: #f5dadf !important;  /* sehr helles Pink, fast weiß, hebt sich vom Bordeaux ab */
}
header a {
    transition: opacity 0.15s, background 0.15s;
}
header a:hover {
    opacity: 0.85;
}

/* Review-Badge im Header — heller, klarer Kontrast */
header a[href="review.php"] {
    background: rgba(255,255,255,0.18) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.55) !important;
    font-weight: 600;
    transition: background 0.15s;
}
header a[href="review.php"]:hover {
    background: rgba(255,255,255,0.30) !important;
    opacity: 1;
}
/* Pending-Counter Badge — Kontrast geprüft: dunkles Anthrazit auf gelb = 12:1+ */
header a[href="review.php"] span[class*="absolute"] {
    background: var(--bfl-accent) !important;
    color: var(--bfl-anthracite) !important;
    font-weight: 700;
}

/* ── Karten / Summary-Tiles ─────────────────────────────────────────────── */
/* Alle Karten dezenter Bayern-Rot Top-Border */
.bg-white.rounded.shadow {
    border-top: 3px solid var(--bfl-red);
}
/* Kategorie-spezifische Farben für die 4 KPI-Karten (in der grid-cols-4 oben) */
.grid > .bg-white.rounded.shadow:nth-child(1) { border-top-color: var(--bfl-red); }       /* Gesamt = Bayern-Rot (Hauptmetrik) */
.grid > .bg-white.rounded.shadow:nth-child(2) { border-top-color: var(--bfl-red-dark); }  /* Spenderlisten */
.grid > .bg-white.rounded.shadow:nth-child(3) { border-top-color: var(--bfl-blue); }      /* Einzelspenden = Wappenblau */
.grid > .bg-white.rounded.shadow:nth-child(4) { border-top-color: var(--bfl-anthracite); }/* Fanartikel = Anthrazit */

/* ── Tabs: aktiver Tab in Dunkelrot (Kontrast > 8:1 für weißen Text) ────── */
.tab-btn.bg-blue-600 {
    background-color: var(--bfl-red-dark) !important;
    border-color: var(--bfl-red-dark) !important;
    color: #ffffff !important;
}
.tab-btn.bg-blue-600:hover {
    background-color: var(--bfl-red-deep) !important;
}
/* Count-Badge im aktiven Tab muss klar lesbar sein (war gray-200, zu blass) */
.tab-btn.bg-blue-600 span {
    color: #ffffff !important;
    opacity: 0.85;
}

/* ── Tabelle: allgemein ─────────────────────────────────────────────────── */
.tabulator-row { cursor: pointer; }
.tabulator-row:hover .tabulator-cell { background: rgba(0,0,0,0.025) !important; }

/* Journal-Tabelle: erste Spalte (Datum) sticky beim horizontalen Scrollen */
.journal-table table {
    min-width: 800px;
}
.journal-table th:first-child,
.journal-table td:first-child {
    position: sticky;
    left: 0;
    background: white;
    z-index: 1;
    box-shadow: 2px 0 4px -2px rgba(0,0,0,0.1);
}
.journal-table thead th:first-child {
    background: #f3f4f6;
}

/* Mobile-Optimierungen ─────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Tabs: horizontal scrollbar statt wrap */
    #tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    #tabs .tab-btn {
        flex-shrink: 0;
        scroll-snap-align: start;
    }
    /* Modals: fast-fullscreen auf Mobile, Body-Padding kompakter */
    #tx-editor-modal > div,
    #list-modal > div,
    #ad-modal > div,
    #donor-modal > div {
        max-width: 100% !important;
        margin: 0;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }
    #tx-editor-modal,
    #list-modal,
    #ad-modal,
    #donor-modal {
        padding: 0 !important;
    }
    /* KPI-Karten kompakter */
    .grid > .bg-white.rounded.shadow {
        padding: 12px !important;
    }
    .grid > .bg-white.rounded.shadow .text-2xl {
        font-size: 1.25rem !important;
    }
    /* Sidebar als Drawer */
    aside#sidebar {
        width: 240px !important;
        height: 100vh;
        top: 0;
        padding-top: 70px;
        box-shadow: 2px 0 12px rgba(0,0,0,0.3);
    }
}

/* Header-Filter (Such-Inputs) etwas kompakter */
.tabulator .tabulator-header-filter input {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.85em;
}
.tabulator .tabulator-header-filter input:focus {
    outline: none;
    border-color: var(--bfl-red);
    box-shadow: 0 0 0 2px rgba(220,5,45,0.15);
}

/* ── Tabelle: Zeilenmarkierungen ────────────────────────────────────────── */
/* Pending (Vorgeschlagen): helles Gelb, dunkler Border, Schwarztext bleibt voll lesbar */
.tabulator-row.bfl-pending { background: #fef9ec !important; border-left: 3px solid var(--bfl-accent) !important; }
.tabulator-row.bfl-manual::after {
    content: "✎";
    color: var(--bfl-blue-dark);
    margin-left: 6px;
    font-size: 0.85em;
}
/* Fehlzahlung: hellrosa Hintergrund — Schwarztext hat darauf 16:1 Kontrast */
.tabulator-row.bfl-fehlzahlung { background: #fee2e2 !important; border-left: 3px solid var(--bfl-red) !important; }
.tabulator-row.bfl-fehlzahlung:hover { background: #fecaca !important; }
/* Unklassifiziert: hellgelb — Schwarztext hat 17:1 Kontrast */
.tabulator-row.bfl-unklassifiziert { background: #fef9c3 !important; border-left: 3px solid #ca8a04 !important; }
.tabulator-row.bfl-unklassifiziert:hover { background: #fef08a !important; }
/* Trésorier-Eingang: hellblauer Border-Left als Marker (kein Background, sonst zu viel) */
.tabulator-row.bfl-treasurer { border-left: 3px solid var(--bfl-blue) !important; }
/* Ausgehende Buchungen: leicht rötlicher Hintergrund + grauer Text */
.tabulator-row.bfl-outgoing { background: #fafafa !important; color: #6b7280; }
.tabulator-row.bfl-outgoing:hover .tabulator-cell { background: rgba(220,5,45,0.04) !important; }
.tabulator-row.bfl-outgoing .tabulator-cell { font-style: italic; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
/* Primär-Button: Dunkelrot statt reinem Bayern-Rot, damit weißer Text > 8:1 Kontrast hat.
   (Reines #dc052d hätte nur 4.6:1 — AA OK, aber knapp) */
.btn-primary, button.bg-blue-600, a.bg-blue-600 {
    background-color: var(--bfl-red-dark) !important;
    border-color: var(--bfl-red-dark) !important;
    color: #ffffff !important;
}
button.bg-blue-600:hover, a.bg-blue-600:hover,
.btn-primary:hover {
    background-color: var(--bfl-red-deep) !important;
}
/* Sekundär-Button (PDF, früher lila) → Wappenblau, weißer Text = 6.5:1 OK */
button.bg-purple-600, a.bg-purple-600 {
    background-color: var(--bfl-blue) !important;
    color: #ffffff !important;
}
button.bg-purple-600:hover, a.bg-purple-600:hover {
    background-color: var(--bfl-blue-dark) !important;
}

/* Phase 6 A11y: WCAG-AA-Kontrast-Fixes für die wichtigsten Aktionen.
   yellow-600 (#ca8a04 → 2.94:1) und green-600 (#16a34a → 3.3:1) mit weißem Text
   fielen unter AA. Dunklere Töne → ≥4.5:1. Betrifft "Periode schließen" + "Genehmigen". */
button.bg-yellow-600, a.bg-yellow-600,
button.bg-amber-600, a.bg-amber-600 {
    background-color: #a16207 !important;  /* 4.6:1 mit Weiß */
    color: #ffffff !important;
}
button.bg-yellow-600:hover, a.bg-yellow-600:hover,
button.bg-amber-600:hover, a.bg-amber-600:hover {
    background-color: #854d0e !important;
}
button.bg-green-600, a.bg-green-600 {
    background-color: #15803d !important;  /* 4.9:1 mit Weiß */
    color: #ffffff !important;
}
button.bg-green-600:hover, a.bg-green-600:hover {
    background-color: #166534 !important;
}
/* "kein Beleg"-Warnsymbol text-red-400 (#f87171 = 2.77:1) → bedeutungstragend, dunkler */
.text-red-400 { color: #dc2626 !important; }

/* Phase 6 A11y: globaler sichtbarer Fokus-Ring (Tastatur-Navigation).
   Vorher nur Browser-Default, auf dunkler Sidebar teils unsichtbar. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--bfl-accent) !important;
    outline-offset: 2px !important;
    border-radius: 3px;
}
/* Auf der dunklen Sidebar einen helleren Ring für genug Kontrast */
aside a:focus-visible {
    outline-color: #ffffff !important;
}

/* ── Fortschrittsbalken (FC-Bayern-Rot, dezent abgestuft) ──────────────── */
.bg-green-500 {
    background: linear-gradient(90deg, var(--bfl-red-dark), var(--bfl-red)) !important;
}

/* ── Toast ──────────────────────────────────────────────────────────────── */
/* (wird von app.js erzeugt — keine Klasse nötig, Inline-Styles bleiben) */

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
    aside, header nav, .no-print { display: none !important; }
    main { padding: 0 !important; }
    body { background: white; color: black; }
    .tabulator { border: 1px solid #888 !important; }
}


/* ── Glossar/Tooltip-System (Phase 5d C.6) ──────────────────────────────── */
.bfl-tip {
    position: relative;
    border-bottom: 1px dotted currentColor;
    cursor: help;
}
.bfl-tip:hover::after,
.bfl-tip:focus::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%);
    background: #1c1c24;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    line-height: 1.4;
    white-space: normal;
    width: max-content;
    max-width: 280px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 100;
    pointer-events: none;
}
.bfl-tip:hover::before,
.bfl-tip:focus::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 1px);
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1c1c24;
    z-index: 100;
}

/* Phase 6 B.3 — Mobile Sub-Tab-Bar in Buchhaltung: horizontal scroll statt wrap */
#acc-tabs {
    scrollbar-width: thin;
}
#acc-tabs::-webkit-scrollbar { height: 4px; }
#acc-tabs::-webkit-scrollbar-thumb { background: rgba(220,5,45,0.4); border-radius: 2px; }
#acc-tabs button { white-space: nowrap; flex-shrink: 0; }
#acc-tabs button.active {
    border-bottom-color: var(--bfl-red) !important;
    color: var(--bfl-red-dark) !important;
    font-weight: 600;
}