/* --- CSS VARIABLER & TEMA-HANTERING --- */

/* Mörkt Tema (Standard) */
[data-bs-theme="dark"] {
    --brf-bg: #1C1C1E;           /* Mörkgrå bakgrund */
    --brf-card-bg: #2C2C2E;      /* Kort-bakgrund */
    --brf-text: #F2F2F7;         /* Ljus text */
    --brf-border: #3d3d3d;       /* Mörka kanter */
    --brf-accent: #0A84FF;       /* Blå accent */
    --brf-input-bg: #1C1C1E;
}

/* Ljust Tema */
[data-bs-theme="light"] {
    --brf-bg: #F0F2F5;           /* Ljusgrå bakgrund (Facebook-liknande) */
    --brf-card-bg: #FFFFFF;      /* Vita kort */
    --brf-text: #1C1C1E;         /* Mörk text */
    --brf-border: #DEE2E6;       /* Ljusa kanter */
    --brf-accent: #0056b3;       /* Något mörkare blå för kontrast mot vitt */
    --brf-input-bg: #FFFFFF;
}

/* --- GLOBALA STILAR --- */

body {
    background-color: var(--brf-bg) !important;
    color: var(--brf-text) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    transition: background-color 0.3s, color 0.3s; /* Mjuk övergång */
}

/* --- KOMPATIBILITETSLAGER --- */
/* Detta gör att vi inte behöver ändra 'bg-dark' och 'text-light' i alla PHP-filer */

/* Anpassa .bg-secondary (som används för kort) */
.bg-secondary {
    background-color: var(--brf-card-bg) !important;
    color: var(--brf-text) !important;
    border: 1px solid var(--brf-border);
}

/* I Ljust läge: Tvinga .bg-dark att bli ljus (förutom i specifika fall som footer om man vill) */
[data-bs-theme="light"] .bg-dark {
    background-color: #FFFFFF !important;
    color: #000000 !important;
    border-color: var(--brf-border) !important;
}

/* I Ljust läge: Tvinga .text-light att bli mörk */
[data-bs-theme="light"] .text-light {
    color: #212529 !important;
}

/* I Ljust läge: Gör text-muted lite mörkare för läsbarhet */
[data-bs-theme="light"] .text-secondary {
    color: #6c757d !important;
}

/* NYTT: Fix för btn-outline-light i ljust läge så den syns mot vit bakgrund */
[data-bs-theme="light"] .btn-outline-light {
    color: #212529 !important;
    border-color: #DEE2E6 !important;
}
[data-bs-theme="light"] .btn-outline-light:hover {
    background-color: #E9ECEF !important;
    color: #000 !important;
}

/* NYTT: Fix för Accordion-pilar */
[data-bs-theme="dark"] .accordion-button::after {
    filter: invert(1); /* Gör pilen vit i mörkt läge */
}
[data-bs-theme="light"] .accordion-button::after {
    filter: none; /* Gör pilen mörk (standard) i ljust läge */
}
/* Se till att aktiva accordion-knappar har rätt färg */
.accordion-button:not(.collapsed) {
    background-color: var(--brf-accent) !important;
    color: white !important;
}
/* När knappen är aktiv (blå), vill vi alltid ha vit pil oavsett tema */
.accordion-button:not(.collapsed)::after {
    filter: invert(1) !important;
}


/* --- KNAPPAR & LÄNKAR --- */

.navbar-brand, .text-primary {
    color: var(--brf-accent) !important;
}

.btn-primary {
    background-color: var(--brf-accent);
    border-color: var(--brf-accent);
    color: #fff;
}

.btn-outline-primary {
    color: var(--brf-accent);
    border-color: var(--brf-accent);
}
[data-bs-theme="light"] .btn-outline-primary:hover {
    color: #fff;
    background-color: var(--brf-accent);
}

/* Gränser */
.border-secondary {
    border-color: var(--brf-border) !important;
}

/* Skuggor */
.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.15) !important;
}

/* Fix för formulär i ljust läge */
[data-bs-theme="light"] .form-control, 
[data-bs-theme="light"] .form-select {
    background-color: #fff !important;
    color: #000 !important;
    border: 1px solid #ced4da !important;
}

/* Behåll navbaren mörk även i ljust läge för snygg kontrast (valfritt) */
[data-bs-theme="light"] nav.navbar {
    background-color: #1C1C1E !important; 
    color: #fff !important;
}
[data-bs-theme="light"] nav.navbar .nav-link {
    color: rgba(255,255,255,0.8) !important;
}
[data-bs-theme="light"] nav.navbar .nav-link:hover {
    color: #fff !important;
}