/*
 * poule-app / assets/css/poule.css
 *
 * Overrides op Bootstrap 5. Kleuren komen via CSS-vars die header.php
 * inline injecteert uit poule_settings (--poule-primary / --poule-secondary).
 * Wijzig hier layout-detail; wijzig kleuren in poule_settings via admin.
 */

:root {
    --poule-primary: #dc3545;
    --poule-secondary: #212529;
    --poule-primary-contrast: #ffffff;
    --poule-bg: #f5f6f8;
}

body {
    background: var(--poule-bg);
    color: var(--poule-secondary);
    -webkit-font-smoothing: antialiased;
}

/* Nav */
.poule-navbar {
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.poule-navbar .navbar-brand {
    color: var(--poule-primary);
    font-weight: 700;
    letter-spacing: .01em;
}
.poule-navbar .nav-link {
    color: var(--poule-secondary);
    font-weight: 500;
}
.poule-navbar .nav-link.active,
.poule-navbar .nav-link:hover,
.poule-navbar .nav-link:focus {
    color: var(--poule-primary);
}
.poule-navbar .dropdown-menu {
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
}
.poule-assoc-label {
    background: rgba(0, 0, 0, .05);
    padding: .25rem .6rem;
    border-radius: 12px;
    font-size: .85rem;
    color: #495057;
}

/* Buttons — primary knop volgt vereniging-kleur */
.btn-poule {
    background: var(--poule-primary);
    border-color: var(--poule-primary);
    color: var(--poule-primary-contrast);
}
.btn-poule:hover,
.btn-poule:focus {
    background: var(--poule-primary);
    border-color: var(--poule-primary);
    color: var(--poule-primary-contrast);
    filter: brightness(.92);
}
.btn-poule:disabled {
    filter: none;
    opacity: .6;
}

/* Cards + main */
.poule-main {
    padding-top: 1.25rem;
    padding-bottom: 3rem;
    min-height: calc(100vh - 130px);
}
.card {
    border-radius: 10px;
    border-color: rgba(0, 0, 0, .07);
}
.card > .card-header {
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    font-weight: 600;
}

/* Footer */
.poule-footer {
    padding: 1rem 0;
    color: #6c757d;
    font-size: .85rem;
    border-top: 1px solid rgba(0, 0, 0, .06);
    background: #fff;
}

/* Alerts — subtielere hover van dismiss knop */
.alert .btn-close:focus {
    box-shadow: none;
}

/* Focus */
:focus-visible {
    outline: 2px solid var(--poule-primary);
    outline-offset: 2px;
}

/* Mobile tuning */
@media (max-width: 991.98px) {
    .poule-navbar .offcanvas {
        max-width: 85vw;
    }
    .poule-navbar .navbar-nav .nav-link {
        padding: .6rem 0;
    }
    .poule-assoc-label {
        display: inline-block;
        margin: .5rem 0;
    }
}