/* InSpktr beheer – aanvullingen op Metronic (styles.css bevat alleen klassen uit de demo's). */

/* Huisstijl: navy #102032 en groen #06C380 (zelfde als de app). Licht: navy als hoofdkleur;
   donker: groen, met navy tekst op knoppen voor genoeg contrast. */
:root {
    --primary: #102032;
    --primary-foreground: #ffffff;
    --mono: #102032;
}

.dark {
    --primary: #06C380;
    --primary-foreground: #102032;
}

.woordmerk {
    height: 34px;
    width: auto;
}

.woordmerk-groot {
    height: 52px;
    width: auto;
}

/* Icoonfonts van de app, voor de icoonkiezer bij meldcategorieën */
@font-face {
    font-family: 'InSpktrMaterial';
    src: url('../fonts/material-icons-outlined-regular.otf') format('opentype');
    font-display: block;
}

@font-face {
    font-family: 'InSpktrFaSolid';
    src: url('../fonts/fa-solid-900.ttf') format('truetype');
    font-display: block;
}

.app-icoon {
    font-size: 22px;
    line-height: 1;
    font-style: normal;
    display: inline-block;
}

.app-icoon-MaterialDesign { font-family: 'InSpktrMaterial'; }
.app-icoon-FaSolid { font-family: 'InSpktrFaSolid'; font-size: 18px; }

/* Handtekeningen zijn zwart op wit, ook in het donkere thema */
.handtekening {
    background: #fff;
    border-radius: 0.5rem;
    max-height: 80px;
    max-width: 200px;
    object-fit: contain;
}

/* Foto's bij een melding */
.melding-foto {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 0.75rem;
}

/* Nieuws: kleine afbeelding in de lijst en voorbeeld in het formulier */
.nieuws-mini {
    width: 72px;
    height: 48px;
    object-fit: cover;
    border-radius: 0.5rem;
}

.nieuws-voorbeeld {
    width: 100%;
    max-height: 160px;
    object-fit: cover;
    border-radius: 0.75rem;
}

/* Printbare QR-code */
.qr-code svg,
.qr-code img {
    width: 160px;
    height: 160px;
    background: #fff;
    padding: 8px;
    border-radius: 0.5rem;
}

.tekst-blok {
    white-space: pre-wrap;
}

@media print {
    header, footer, .geen-print { display: none !important; }
}

/* Utility-klassen die niet in de gecompileerde Metronic-CSS zitten */
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.text-success { color: var(--color-green-500, #17c653); }
.hover\:border-primary:hover { border-color: var(--color-primary); }
.max-w-xs { max-width: 20rem; }
.mt-0\.5 { margin-top: 0.125rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.tracking-widest { letter-spacing: 0.1em; }
.kt-checkbox-label { font-size: 0.875rem; }

@media (width >= 64rem) {
    .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Kaart met Leaflet. Eigen stapelcontext, zodat de kaartlagen (z-index 400+) niet over de vaste header schuiven. */
.kaart {
    position: relative;
    z-index: 0;
    height: 320px;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    overflow: hidden;
}

/* Klikbare tabelrijen (rij met een a[data-rij-link], zie inspktr.js) */
tr:has(a[data-rij-link]) { cursor: pointer; }
tr:has(a[data-rij-link]):hover > td { background-color: var(--color-muted, rgba(0, 0, 0, 0.03)); }