/* ═══════════════════════════════════════════════════════════════════════════
   DJM Portaal — eigen opmaak bovenop Bootstrap 5.3

   Eén bestand voor portaal, beheer en installatie. De browser haalt het
   daardoor één keer op en gebruikt het daarna uit zijn cache; na een update
   zorgt ?v=<versie> ervoor dat hij het tóch opnieuw ophaalt.

   Het enige dat níét in dit bestand staat, zijn de drie kleurvariabelen: die
   komen uit de instellingen en worden per pagina meegegeven (zie djm_head()).

       --djm              de merkkleur
       --djm-tekst        zwart of wit — wat leesbaar is op de merkkleur
       --djm-tekst-zacht  dezelfde kleur, gedempt
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Gedeeld ────────────────────────────────────────────────────────────── */

:root {
    /* Deze pagina's zijn licht opgemaakt. Zonder deze regel kleurt een browser
       in donkere modus de formuliervelden donker, met onleesbare combinaties
       als gevolg. */
    color-scheme: light;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.btn-djm {
    background: var(--djm);
    border-color: var(--djm);
    color: var(--djm-tekst);
}

.btn-djm:hover,
.btn-djm:focus,
.btn-djm:active {
    background: var(--djm);
    border-color: var(--djm);
    color: var(--djm-tekst);
    filter: brightness(.92);
}

/* De focusring van Bootstrap is blauw; op een andere merkkleur valt hij dan
   uit de toon. Toetsenbordgebruikers moeten wél kunnen zien waar ze zijn. */
.btn-djm:focus-visible {
    outline: 2px solid var(--djm);
    outline-offset: 2px;
    box-shadow: none;
}

/* Op een telefoon volledige breedte, vanaf tablet zo breed als de inhoud.
   `.djm-actie` voor de hoofdknop van een blok, `.djm-knoppenbalk` voor een rij
   knoppen naast een kop. */
.djm-actie,
.djm-knoppenbalk {
    width: 100%;
}

@media (min-width: 576px) {

    .djm-actie,
    .djm-knoppenbalk {
        width: auto;
    }
}

/* Op een smal scherm passen een keuzelijst en een knop niet naast elkaar in één
   input-group: de knoptekst valt dan buiten zijn rand. Daar zetten we alles
   onder elkaar, elk over de volle breedte. */
@media (max-width: 575.98px) {

    .djm-knoppenbalk>form,
    .djm-knoppenbalk>.btn {
        width: 100%;
    }

    .djm-knoppenbalk .input-group {
        flex-direction: column;
    }

    .djm-knoppenbalk .input-group>.form-select,
    .djm-knoppenbalk .input-group>.btn {
        width: 100%;
        border-radius: var(--bs-border-radius-sm) !important;
    }

    .djm-knoppenbalk .input-group>.btn {
        margin-top: .5rem;
    }
}

/* Lange, door de beheerder ingevoerde teksten mogen de opmaak niet oprekken. */
.djm-afkappen {
    display: inline-block;
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* ─── Portaal (publiek) ──────────────────────────────────────────────────── */

.djm-portaal {
    background: #0f172a;
    background: linear-gradient(160deg, #0f172a 0%, #1e293b 100%);
    background-attachment: fixed;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

@supports (min-height: 100dvh) {
    /* Op een telefoon telt 100vh de adresbalk mee; 100dvh niet. */
    .djm-portaal {
        min-height: 100dvh;
    }
}

.djm-portaal main {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
}

.djm-kaart {
    width: 100%;
    max-width: 820px;
    background: #fff;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    overflow: hidden;
}

.djm-kaart-smal {
    max-width: 440px;
}

.djm-kop {
    background: var(--djm);
    padding: 28px 24px;
    text-align: center;
    color: var(--djm-tekst);
}

.djm-kop img {
    max-height: 52px;
    max-width: 100%;
    width: auto;
}

.djm-kop .djm-kop-titel {
    color: var(--djm-tekst-zacht);
}

.djm-code-invoer {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 2rem;
    letter-spacing: .6rem;
    text-align: center;
    /* De letterspatiëring zet de cijfers uit het midden; dit trekt dat recht. */
    text-indent: .6rem;
}

.djm-portaal footer {
    flex-shrink: 0;
    padding: 18px;
    text-align: center;
    color: rgba(255, 255, 255, .55);
    font-size: .8rem;
}

/* ─── Beheer ─────────────────────────────────────────────────────────────── */

.djm-beheer {
    background: #f4f6f9;
}

.navbar-djm {
    background: var(--djm);
}

.navbar-djm .nav-link,
.navbar-djm .navbar-brand {
    color: var(--djm-tekst-zacht);
}

.navbar-djm .nav-link:hover,
.navbar-djm .nav-link:focus,
.navbar-djm .nav-link.active,
.navbar-djm .navbar-brand:hover {
    color: var(--djm-tekst);
}

.navbar-djm .nav-link.active {
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--djm-tekst);
}

.navbar-djm .navbar-toggler {
    color: var(--djm-tekst);
}

.navbar-djm .navbar-toggler:focus {
    box-shadow: none;
    outline: 2px solid var(--djm-tekst);
    outline-offset: 2px;
}

/* Het menu-item Uitloggen is een knop in een formulier (CSRF), maar moet er
   hetzelfde uitzien als de links ernaast. */
.navbar-djm .nav-link.btn {
    border: 0;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

/* Icoon en label horen op één regel te blijven. Zonder dit breekt het label
   onder het icoon zodra de balk krap wordt, en wordt de navigatiebalk anderhalf
   keer zo hoog. */
.navbar-djm .nav-link,
.navbar-djm .navbar-brand {
    white-space: nowrap;
}

/* De portaalnaam is vrij in te vullen. Een lange naam mag de navigatiebalk
   niet zo breed maken dat de menu-items eruit vallen; hij wordt dan afgekapt.
   Zolang het menu ingeklapt is, staat er alleen een hamburgerknop naast en mag
   de naam vrijwel de hele balk gebruiken. */
.navbar-djm .navbar-brand {
    max-width: calc(100vw - 5.5rem);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Zodra het menu uitklapt, staan er tien items naast de portaalnaam binnen een
   container van maximaal 1320 pixels. Met de standaardmaten van Bootstrap past
   dat niet: de naam wordt dan op élk breed scherm afgekapt. Iets minder
   tussenruimte en een fractie kleinere letter lossen dat op. */
@media (min-width: 1200px) {
    .navbar-djm .navbar-nav .nav-link {
        padding-left: .4rem;
        padding-right: .4rem;
        font-size: .9375rem;
    }

    .navbar-djm .navbar-brand {
        font-size: 1rem;
        max-width: 300px;
    }
}

/* Tussen 1200 en 1400 pixels is het nog krapper. Daar wordt de naam van de
   beheerder ingeklapt tot alleen het uitlogicoon; hij blijft wel in de HTML
   staan, zodat een schermlezer hem nog voorleest. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navbar-djm .djm-beheerdersnaam {
        position: absolute !important;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* De uitlogknop is het enige menu-item in een formulier; zonder zichtbaar
       label hoeft het icoon daar geen rechtermarge meer. */
    .navbar-djm form .nav-link .bi {
        margin-right: 0 !important;
    }
}

@media (min-width: 1400px) {
    .navbar-djm .navbar-brand {
        max-width: 420px;
    }
}

.kaart {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.tabel-compact td,
.tabel-compact th {
    vertical-align: middle;
}

code.pad {
    font-size: .8rem;
    color: #6b7280;
    word-break: break-all;
}

/* Sprongnavigatie boven een lange formulierpagina. Gewone ankerlinks, geen
   JavaScript: ook als er iets misgaat met een script blijft alles bereikbaar. */
.djm-sectienav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.5rem;
}

.djm-sectienav a {
    display: inline-block;
    padding: .25rem .7rem;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    color: #4b5563;
    font-size: .8125rem;
    text-decoration: none;
    white-space: nowrap;
}

.djm-sectienav a:hover,
.djm-sectienav a:focus-visible {
    border-color: var(--djm);
    color: var(--djm);
}

/* Zodat een aangesprongen kaart niet tegen de bovenrand van het scherm plakt. */
.djm-sectie {
    scroll-margin-top: 1rem;
}

/* Opslaanbalk die meeschuift zolang het formulier in beeld is. Op een pagina
   van een paar duizend pixels hoeft niemand meer naar beneden te scrollen om
   zijn wijzigingen te bewaren. */
.djm-opslagbalk {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
    padding: .75rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    /* Ondoorzichtig: de velden eronder mogen er niet doorheen schemeren. */
    background: #fff;
    box-shadow: 0 -6px 20px rgba(15, 23, 42, .08);
}

/* Brede tabellen schuiven horizontaal binnen hun kaart. Op een aanraakscherm
   is er standaard geen schuifbalk te zien, waardoor het lijkt alsof de laatste
   kolommen ontbreken. Deze regels laten een dunne balk altijd staan. */
@media (max-width: 991.98px) {
    .table-responsive {
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, .28) transparent;
    }

    .table-responsive::-webkit-scrollbar {
        height: 6px;
        -webkit-appearance: none;
    }

    .table-responsive::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, .28);
        border-radius: 3px;
    }
}

/* ─── Inlogkaart van het beheer ──────────────────────────────────────────── */

.djm-inlogkaart {
    background: #0f172a;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
}

@supports (min-height: 100dvh) {
    .djm-inlogkaart {
        min-height: 100dvh;
    }
}

.djm-inlogkaart .kaart {
    width: 100%;
    max-width: 420px;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
}

.djm-inlogkaart .kop {
    background: var(--djm);
    color: var(--djm-tekst);
    padding: 24px;
    text-align: center;
}

/* ─── Installatie (setup.php) ────────────────────────────────────────────── */

.djm-setup {
    background: #f5f6f8;
}

.djm-setup .setup-kaart {
    max-width: 780px;
    margin: 2.5rem auto;
}

.djm-setup .setup-lijst li {
    margin-bottom: .35rem;
}

.djm-setup code,
.djm-setup pre {
    font-size: .875rem;
}

.djm-setup pre {
    background: #f1f3f5;
    padding: .75rem 1rem;
    border-radius: .375rem;
    overflow-x: auto;
}

/* ─── Afdrukken ──────────────────────────────────────────────────────────── */

@media print {

    .navbar,
    .djm-portaal footer {
        display: none;
    }

    .djm-portaal,
    .djm-inlogkaart {
        background: #fff;
    }

    .djm-kaart {
        box-shadow: none;
    }
}