/* app.css — OSCAR huisstijl (Red/Black/White) */
/* -------------------------------------------------- */
/* 1) Kleuren & tokens */
:root {
    --oscar-primary: #c8102e; /* fel rood */
    --oscar-primary-600: #a50d24;
    --oscar-dark: #111111;    /* bijna zwart */
    --oscar-dark-2: #171717;
    --oscar-light: #f8f9fa;   /* licht grijs */
    --oscar-white: #ffffff;

    --oscar-surface: #ffffff;
    --oscar-surface-2: #f2f2f3;
    --oscar-border: #e6e6e8;

    --radius: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
    --shadow-md: 0 8px 24px rgba(0,0,0,.10);
    --shadow-lg: 0 16px 42px rgba(0,0,0,.14);
}

/* -------------------------------------------------- */
/* 2) Algemene body styling */
body {
    font-family: "Century Gothic", "URW Gothic L", "Avant Garde", Arial, sans-serif;
    background-color: var(--oscar-light);
    color: var(--oscar-dark);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: 56px; /* zelfde hoogte als navbar */

}

/* Tekst helpers */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: .2px;
    font-weight: 800;
}
.text-muted { color: #6b6f76 !important; }

/* Toetsenbordfocus toegankelijk */
:focus-visible {
    outline: 2px solid var(--oscar-primary);
    outline-offset: 3px;
    border-radius: 6px;
}

/* -------------------------------------------------- */
/* 3) Navbar (TOP – je huidige setup) */
.navbar {
    background-color: var(--oscar-dark) !important;
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: var(--shadow-sm);
}

.navbar .navbar-brand,
.navbar .nav-link {
    color: white !important;
    font-weight: 700;
}

.navbar .nav-link:hover {
    color: #f1f1f1 !important;
    background-color: rgba(255,255,255,.06);
    border-radius: 8px;
}

.navbar .nav-link.active {
    color: var(--oscar-primary) !important;
    font-weight: 800;
}

/* -------------------------------------------------- */
/* Sidebar menu */
/* Top navbar blijft bovenaan */
.top-row.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    z-index: 1100;
    background-color: var(--oscar-dark) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* Zorg dat de content niet onder de navbar kruipt */


/* Sidebar off-canvas */
.sidebar {
    position: fixed;
    top: 56px;              /* onder de navbar starten */
    left: -280px;           /* standaard buiten beeld */
    width: 280px;
    height: calc(100% - 56px);
    background-color: var(--oscar-dark);
    color: white;
    overflow-y: auto;
    transition: left 0.3s ease;
    z-index: 1050;
    box-shadow: 2px 0 8px rgba(0,0,0,.3);
}

.sidebar.open {
    left: 0; /* schuift in beeld */
}

.sidebar .nav-link {
    color: white;
    padding: .75rem 1rem;
    display: block;
}

.sidebar .nav-link.active,
.sidebar .nav-link:hover {
    background-color: var(--oscar-primary);
    color: white;
}



/* -------------------------------------------------- */
/* 5) Buttons */
.btn {
    font-weight: 800;
    letter-spacing: .2px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.btn-primary {
    background-color: var(--oscar-primary);
    border-color: var(--oscar-primary);
    color: #fff;
}

.btn-primary:hover {
    background-color: var(--oscar-primary-600);
    border-color: var(--oscar-primary-600);
}

.btn-outline-secondary {
    border-color: var(--oscar-dark);
    color: var(--oscar-dark);
    background: transparent;
}

.btn-outline-secondary:hover {
    background-color: var(--oscar-dark);
    color: white;
}


/* Grote ronde dashboard-knoppen (optioneel gebruiken) */
.btn-category {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    gap: .25rem;
    padding: 1.1rem 1.3rem;
    min-height: 4.25rem;
    width: 100%;
    border-radius: 999px;
    background: var(--oscar-surface);
    color: var(--oscar-dark);
    border: 1px solid var(--oscar-border);
    box-shadow: var(--shadow-sm);
}
.btn-category .btn-title { font-weight: 800; }
.btn-category .btn-sub   { font-size: .85rem; opacity: .8; }
.btn-category:hover { border-color: rgba(200,16,46,.5); }

/* -------------------------------------------------- */
/* 6) Cards */
.card {
    border: 1px solid var(--oscar-border);
    border-radius: var(--radius);
    background: var(--oscar-surface);
    box-shadow: var(--shadow-sm);
}

.card-header {
    background-color: var(--oscar-primary);
    color: white;
    font-weight: 800;
    border-bottom: 1px solid var(--oscar-primary-600);
}

/* -------------------------------------------------- */
/* 7) Tabellen */
.table {
    border: 1px solid var(--oscar-border);
    background: var(--oscar-surface);
    border-radius: var(--radius);
    overflow: hidden;
}

.table thead {
    background-color: var(--oscar-dark);
    color: white;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: var(--oscar-surface-2);
}

.table tbody tr:hover {
    background-color: rgba(200,16,46,.06);
}

/* -------------------------------------------------- */
/* 8) Links */
a {
    color: var(--oscar-primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* -------------------------------------------------- */
/* 9) Footer */
footer {
    background-color: var(--oscar-dark);
    color: white;
    text-align: center;
}

/* -------------------------------------------------- */
/* 10) Utilities (klein setje) */
.rounded        { border-radius: var(--radius) !important; }
.rounded-pill   { border-radius: 999px !important; }
.shadow-sm      { box-shadow: var(--shadow-sm) !important; }
.shadow-md      { box-shadow: var(--shadow-md) !important; }
.shadow-lg      { box-shadow: var(--shadow-lg) !important; }

/* Responsieve grid voor categorieknoppen (optioneel) */
.category-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 780px) { .category-grid { grid-template-columns: 1fr; } }

/* Selectie */
::selection { background: var(--oscar-primary); color: #fff; }

/* =====================
   17) Pagination
   ===================== */

.pagination-fixed {
    position: fixed;
    bottom: 0;
    left: 0;

    width: 100%;
    padding: 10px;

    background: #f8f9fa;
    border-top: 1px solid #ddd;

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 1050;
}

/* Wrapper van Leaflet divIcon transparant maken */
.oscar-marker-icon.leaflet-div-icon {
    background: transparent !important;
    border: none !important;
}

/* De badge zelf: schaalt mee met aantal karakters */
.oscar-passage-marker {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background: red;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 999px; /* wordt rond bij 1 cijfer, “pill” bij meerdere */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 800;
    padding: 0 8px;
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
}

    .oscar-passage-marker.flash {
        animation: oscarFlash .8s ease-out;
    }

@keyframes oscarFlash {
    0% {
        transform: scale(1)
    }

    35% {
        transform: scale(1.25)
    }

    100% {
        transform: scale(1)
    }
}