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

/* Huisstijl: navy #102032 en groen #06C380 (zelfde als de app en de beheeromgeving). */
:root {
    --primary: #102032;
    --primary-foreground: #ffffff;
    --mono: #102032;
}

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

/* Rode balk bovenaan: dit is de admin-omgeving met toegang tot alle klanten. */
.admin-balk {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-destructive, #f8285a);
    z-index: 20;
}

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

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

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

/* Utility-klassen die niet in de gecompileerde Metronic-CSS zitten */
.opacity-70 { opacity: 0.7; }
.hover\:border-primary:hover { border-color: var(--color-primary); }
.max-w-xs { max-width: 20rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.kt-checkbox-label { font-size: 0.875rem; }
.w-28 { width: 7rem; }
.border-destructive\/40 { border-color: color-mix(in oklab, var(--color-destructive) 40%, transparent); }

@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)); }
}

/* Klikbare tabelrijen (rij met een a[data-rij-link], zie admin.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)); }

/* ApexCharts: legenda naast elkaar (de Metronic-reset zet de items anders onder elkaar). */
.apexcharts-legend.apx-legend-position-top { flex-direction: row !important; flex-wrap: wrap; gap: 0 1rem; }