/*
 * m. — design system
 * Eén bestand. De waarheid voor alle pagina's.
 *
 * Gebruik: <link rel="stylesheet" href="/static/m_design_system.css">
 * Bevat: gradient, kleur-tokens, typografie, topbar, knoppen, cards,
 *        status-badges, tabs, inputs, spacing, radii.
 *
 * Versie 1 — 3 mei 2026
 */


/* ==========================================================================
   1. FONT IMPORTS
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap');


/* ==========================================================================
   2. KLEUR-TOKENS  (en spacing, radii, schaduwen)
   ========================================================================== */

:root {
    /* Basis kleuren */
    --m-zwart:        #0F0E0C;
    --m-donker:       #1F1D1A;
    --m-grijs:        #7A7670;
    --m-licht:        #E0DCD2;
    --m-creme:        #F0EBE2;
    --m-wit:          #FAFAFA;

    /* Glass-card achtergronden (voor op de gradient) */
    --m-card:         rgba(255, 255, 255, 0.85);
    --m-card-licht:   rgba(255, 255, 255, 0.5);
    --m-card-glass:   rgba(255, 255, 255, 0.4);

    /* Accent + status */
    --m-groen:        #1A5C48;
    --m-groen-licht:  rgba(26, 92, 72, 0.15);
    --m-perzik:       #F0B894;
    --m-oranje:       #B85A1A;
    --m-oranje-licht: rgba(184, 90, 26, 0.15);
    --m-rood:         #C73B3B;
    --m-rood-licht:   rgba(199, 59, 59, 0.15);
    --m-paars:        #7F77DD;
    --m-paars-licht:  rgba(127, 119, 221, 0.18);
    --m-teal:         #1D9E75;
    --m-indigo:       #534AB7;

    /* Tekst-opacities op witte cards */
    --m-tekst-zacht:  rgba(15, 14, 12, 0.7);
    --m-tekst-uit:    rgba(15, 14, 12, 0.45);

    /* Spacing-tokens */
    --m-sp-xs:  4px;
    --m-sp-sm:  8px;
    --m-sp-md:  16px;
    --m-sp-lg:  24px;
    --m-sp-xl:  32px;
    --m-sp-xxl: 48px;

    /* Border-radii */
    --m-r-none: 0;
    --m-r-sm:   4px;   /* knoppen, kleine pills */
    --m-r-md:   8px;   /* cards, panels */
    --m-r-lg:   12px;  /* grote panels, hero-blokken */
    --m-r-pill: 999px; /* filters, ronde tabs */

    /* Schaduwen — minimaal gebruiken */
    --m-shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.06);
    --m-shadow-md:  0 4px 16px rgba(0, 0, 0, 0.10);
    --m-shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.18);

    /* Border-styles */
    --m-border:      0.5px solid rgba(15, 14, 12, 0.12);
    --m-border-zwak: 0.5px solid rgba(15, 14, 12, 0.06);
    --m-border-fel:  1px   solid rgba(15, 14, 12, 0.4);
}


/* ==========================================================================
   3. ACHTERGROND-GRADIENT
   Eén ademende gradient voor de hele app.
   Implementatie: body krijgt transparant background, ::before doet het werk.
   ========================================================================== */

body {
    background: transparent !important;
    color: var(--m-zwart);
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
    position: relative;
    min-height: 100vh;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(160deg,
        #6FE89D 0%,
        #4ACFE8 30%,
        #6B7FE8 60%,
        #C44CE8 100%);
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(160deg,
        #C44CE8 0%,
        #FF6B9D 30%,
        #FF6B6B 60%,
        #FFB347 100%);
    animation: m-fade 60s ease-in-out infinite alternate;
}

@keyframes m-fade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}


/* ==========================================================================
   4. TYPOGRAFIE
   Bebas Neue voor titels en accenten, DM Sans voor body.
   ========================================================================== */

.m-mega {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 56px;
    line-height: 0.9;
    letter-spacing: 0.01em;
    color: var(--m-zwart);
    margin: 0;
}

h1, .m-h1 {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.01em;
    color: var(--m-zwart);
    margin: 0 0 var(--m-sp-md);
}

h2, .m-h2 {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: var(--m-zwart);
    margin: 0 0 var(--m-sp-sm);
}

h3, .m-h3 {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--m-zwart);
    margin: 0 0 var(--m-sp-sm);
}

p, .m-body {
    font-size: 14px;
    line-height: 1.5;
    color: var(--m-zwart);
    margin: 0 0 var(--m-sp-md);
}

.m-small {
    font-size: 11px;
    line-height: 1.4;
    color: var(--m-grijs);
}

.m-caps {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--m-grijs);
    font-weight: 500;
}


/* ==========================================================================
   5. TOPBAR
   Eén navigatiebalk voor alle pagina's.
   ========================================================================== */

.m-topbar {
    display: flex;
    align-items: center;
    gap: var(--m-sp-lg);
    padding: var(--m-sp-md) var(--m-sp-xl);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.m-topbar-logo {
    font-family: 'Bebas Neue', Impact, sans-serif;
    font-size: 28px;
    line-height: 1;
    color: var(--m-zwart);
    text-decoration: none;
    letter-spacing: 0;
}

.m-topbar-logo img {
    height: 24px;
    width: auto;
    display: block;
}

.m-topbar a {
    text-decoration: none;
    color: var(--m-tekst-zacht);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: color 0.15s ease;
    cursor: pointer;
    padding-bottom: 2px;
    border-bottom: 1.5px solid transparent;
}

.m-topbar a:hover {
    color: var(--m-zwart);
}

.m-topbar a.actief,
.m-topbar a.active {
    color: var(--m-zwart);
    border-bottom-color: var(--m-zwart);
}

/* Knoppen (m-btn) in de topbar krijgen hun eigen kleur terug —
   .m-topbar a heeft specificiteit 0,1,1 en wint anders van .m-btn-primary (0,1,0) */
.m-topbar .m-btn-primary { color: var(--m-creme); border-bottom: none; }
.m-topbar .m-btn-primary:hover { color: var(--m-creme); }
.m-topbar .m-btn-secondary { color: var(--m-zwart); border-bottom: none; }
.m-topbar .m-btn-ghost { color: var(--m-zwart); border-bottom: none; }
.m-topbar .m-btn-danger { color: white; border-bottom: none; }
.m-topbar .m-btn-success { color: white; border-bottom: none; }

.m-topbar-rechts {
    margin-left: auto;
    display: flex;
    gap: var(--m-sp-md);
    align-items: center;
}


/* ==========================================================================
   6. KNOPPEN
   Vijf typen. Geen andere knop-stijlen meer.
   ========================================================================== */

.m-btn {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 500;
    padding: 10px 16px;
    border-radius: var(--m-r-sm);
    cursor: pointer;
    border: none;
    transition: opacity 0.15s, background 0.15s;
    display: inline-flex;
    align-items: center;
    gap: var(--m-sp-xs);
    text-decoration: none;
    line-height: 1;
}

.m-btn-primary {
    background: var(--m-zwart);
    color: var(--m-creme);
}
.m-btn-primary:hover {
    background: var(--m-donker);
}

.m-btn-secondary {
    background: transparent;
    color: var(--m-zwart);
    border: 0.5px solid rgba(15, 14, 12, 0.4);
}
.m-btn-secondary:hover {
    background: rgba(15, 14, 12, 0.05);
}

.m-btn-success {
    background: var(--m-groen);
    color: var(--m-creme);
}
.m-btn-success:hover {
    background: #144E3D;
}

.m-btn-danger {
    background: var(--m-rood);
    color: var(--m-wit);
}
.m-btn-danger:hover {
    background: #A82E2E;
}

.m-btn-ghost {
    background: transparent;
    color: var(--m-zwart);
    padding: 10px 8px;
}
.m-btn-ghost:hover {
    color: var(--m-tekst-zacht);
}

.m-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.m-btn-sm {
    padding: 7px 12px;
    font-size: 10px;
}


/* ==========================================================================
   7. CARDS / PANELS
   Vier varianten. Glass-stijl op de gradient.
   ========================================================================== */

.m-card {
    background: var(--m-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--m-r-md);
    padding: var(--m-sp-md);
    color: var(--m-zwart);
}

.m-card-licht {
    background: var(--m-card-licht);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--m-r-md);
    padding: var(--m-sp-md);
}

.m-card-accent-grn {
    border-left: 2.5px solid var(--m-groen);
    border-radius: 0 var(--m-r-md) var(--m-r-md) 0;
}

.m-card-accent-org {
    border-left: 2.5px solid var(--m-oranje);
    border-radius: 0 var(--m-r-md) var(--m-r-md) 0;
}

.m-card-accent-rd {
    border-left: 2.5px solid var(--m-rood);
    border-radius: 0 var(--m-r-md) var(--m-r-md) 0;
}

.m-card-accent-perzik {
    border-left: 2.5px solid var(--m-perzik);
    border-radius: 0 var(--m-r-md) var(--m-r-md) 0;
}

.m-card-dark {
    background: var(--m-zwart);
    color: var(--m-creme);
    border-radius: var(--m-r-md);
    padding: var(--m-sp-md);
    box-shadow: var(--m-shadow-md);
}

.m-card-dark .m-caps {
    color: var(--m-perzik);
}


/* ==========================================================================
   8. STATUS-BADGES
   Pills voor statussen.
   ========================================================================== */

.m-badge {
    display: inline-block;
    font-family: 'DM Sans', sans-serif;
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 3px var(--m-sp-sm);
    border-radius: 3px;
    font-weight: 500;
    line-height: 1.4;
}

.m-badge-grn   { background: var(--m-groen-licht);  color: var(--m-groen); }
.m-badge-org   { background: var(--m-oranje-licht); color: var(--m-oranje); }
.m-badge-rd    { background: var(--m-rood-licht);   color: var(--m-rood); }
.m-badge-info  { background: rgba(15,14,12,0.08);    color: var(--m-zwart); }
.m-badge-paars { background: var(--m-paars-licht);  color: var(--m-indigo); }


/* ==========================================================================
   9. FILTER-TABS / TABS
   Pill-keuzes.
   ========================================================================== */

.m-tabs {
    display: flex;
    gap: var(--m-sp-xs);
    flex-wrap: wrap;
    align-items: center;
}

.m-tab {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 7px 14px;
    border-radius: var(--m-r-pill);
    cursor: pointer;
    font-weight: 500;
    border: 0.5px solid transparent;
    background: transparent;
    color: var(--m-zwart);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    text-decoration: none;
    display: inline-block;
    line-height: 1;
}

.m-tab:not(.actief):not(.active) {
    border-color: rgba(15, 14, 12, 0.2);
}

.m-tab:hover {
    background: rgba(15, 14, 12, 0.05);
}

.m-tab.actief,
.m-tab.active {
    background: var(--m-zwart);
    color: var(--m-creme);
    border-color: var(--m-zwart);
}


/* ==========================================================================
   10. FORMULIER-INPUTS
   Eén stijl voor text, datum, select, textarea.
   ========================================================================== */

.m-input,
.m-select,
.m-textarea {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: var(--m-zwart);
    background: var(--m-wit);
    border: 0.5px solid rgba(15, 14, 12, 0.2);
    border-radius: var(--m-r-sm);
    padding: 9px 12px;
    width: 100%;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.m-input:focus,
.m-select:focus,
.m-textarea:focus {
    outline: none;
    border-color: var(--m-zwart);
}

.m-input::placeholder,
.m-textarea::placeholder {
    color: var(--m-tekst-uit);
}

.m-textarea {
    min-height: 80px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}

.m-label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--m-grijs);
    margin-bottom: var(--m-sp-xs);
    font-weight: 500;
}


/* ==========================================================================
   11. UTILITIES
   Korte hulpklassen die overal van pas komen.
   ========================================================================== */

.m-stack { display: flex; flex-direction: column; }
.m-stack-sm { gap: var(--m-sp-sm); }
.m-stack-md { gap: var(--m-sp-md); }
.m-stack-lg { gap: var(--m-sp-lg); }

.m-row { display: flex; align-items: center; }
.m-row-sm { gap: var(--m-sp-sm); }
.m-row-md { gap: var(--m-sp-md); }
.m-row-lg { gap: var(--m-sp-lg); }

.m-tussen { margin-left: auto; }
.m-rechts { text-align: right; }
.m-links  { text-align: left; }
.m-midden { text-align: center; }

.m-grijs { color: var(--m-grijs); }
.m-zwart { color: var(--m-zwart); }
.m-groen { color: var(--m-groen); }
.m-oranje { color: var(--m-oranje); }
.m-rood { color: var(--m-rood); }


/* ==========================================================================
   12. PAGE LAYOUT HELPERS
   Containers voor pagina's.
   ========================================================================== */

.m-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--m-sp-lg) var(--m-sp-xl);
}

.m-container-smal {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--m-sp-lg) var(--m-sp-xl);
}

.m-pagina-kop {
    margin-bottom: var(--m-sp-xl);
}

.m-pagina-kop .m-caps {
    margin-bottom: var(--m-sp-xs);
}


/* ==========================================================================
   13. PRINT-STIJLEN
   Voor /bibliotheek/print en recept-print.
   Verberg gradient, zwart op wit.
   ========================================================================== */

@media print {
    body::before { display: none; }
    body { background: white !important; }
    .m-topbar { display: none; }
    .m-card,
    .m-card-licht {
        background: white !important;
        backdrop-filter: none;
        border: 0.5px solid #ccc;
    }
}