/* Planning Tool v1.0 — Hoofdstijlblad * CSS-variabelen bepalen het kleurenpalet en theming. * Nooit hex-waarden hardcoderen buiten dit bestand. * Thema: data-theme="light" | data-theme="dark" op */ /* ─── CSS-variabelen: licht thema ─────────────────────────────────────────── */ :root, [data-theme="light"] { --kleur-achtergrond: #ffffff; --kleur-achtergrond-alt: #f5f7fa; --kleur-rand: #d1d5db; --kleur-tekst: #111827; --kleur-tekst-zwak: #6b7280; --kleur-primair: #2563eb; --kleur-primair-hover: #1d4ed8; --kleur-primair-tekst: #ffffff; --kleur-gevaar: #dc2626; --kleur-gevaar-hover: #b91c1c; --kleur-succes: #16a34a; --kleur-waarschuwing: #d97706; --kleur-info: #0ea5e9; --kleur-fout-achtergrond: #fef2f2; --kleur-fout-rand: #fecaca; --kleur-fout-tekst: #991b1b; /* Status badge-achtergronden (light theme) */ --kleur-succes-bg: #dcfce7; --kleur-info-bg: #dbeafe; --kleur-navigatie: #1e3a5f; --kleur-navigatie-tekst: #ffffff; --kleur-navigatie-hover: #2d5986; /* Planning grid kleuren — exact per gui_planning_grid.md spec */ --grid-vroeg: #dbeafe; --grid-laat: #fef9c3; --grid-nacht: #e9d5ff; --grid-rust: #f3f4f6; --grid-ziekte: #ffebee; --grid-standby: #fef3c7; --grid-dag: #e8f5e9; --grid-weekend: #f5f5f5; /* Shifttype-code aliassen: DB-code → semantische kleurvariabele */ --grid-vv: var(--grid-dag); /* Verlof */ --grid-kd: var(--grid-dag); /* Kind ziek */ --grid-da: var(--grid-dag); /* ADV-dag */ --grid-vd: var(--grid-dag); /* Verlofdag */ --grid-vp: var(--grid-dag); /* Verlof ploeg */ --grid-rxw: var(--grid-rust); /* Rustdag weekend */ --grid-rxf: var(--grid-rust); /* Rustdag feestdag */ --grid-cxw: var(--grid-rust); /* Compensatie weekend */ --grid-cxa: var(--grid-rust); /* Compensatie ADV */ --grid-z: var(--grid-ziekte); /* Ziekte */ --grid-t: var(--grid-standby); /* Training */ --schaduw-klein: 0 1px 2px 0 rgba(0,0,0,.05); --schaduw: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1); --schaduw-groot: 0 10px 15px -3px rgba(0,0,0,.1); --rand-radius: 0.375rem; --rand-radius-klein: 0.25rem; --rand-radius-groot: 0.5rem; /* Spacing-schaal */ --ruimte-xs: 0.25rem; --ruimte-s: 0.5rem; --ruimte-m: 1rem; --ruimte-l: 1.5rem; --ruimte-xl: 2rem; /* Hoekradius-aliassen (backward compat met templates die --straal/--radius gebruiken) */ --straal: var(--rand-radius); --radius: var(--rand-radius); /* Kleur-aliassen */ --kleur-tekst-subtiel: var(--kleur-tekst-zwak); --kleur-tekst-zacht: var(--kleur-tekst-zwak); --kleur-hover: var(--kleur-achtergrond-alt); --kleur-primair-licht: var(--kleur-info-bg); --kleur-primair-zwak: var(--kleur-info-bg); --kleur-succes-zacht: var(--kleur-succes-bg); --kleur-succes-donker: var(--kleur-succes); --kleur-succes-tekst: var(--kleur-succes); --kleur-paneel: var(--kleur-achtergrond-alt); --kleur-rand-zwak: var(--kleur-rand); --kleur-waarschuwing-bg:#fef3c7; --kleur-gevaar-bg: var(--kleur-fout-achtergrond); } /* ─── CSS-variabelen: donker thema ───────────────────────────────────────── */ [data-theme="dark"] { --kleur-achtergrond: #111827; --kleur-achtergrond-alt: #1f2937; --kleur-rand: #374151; --kleur-tekst: #f9fafb; --kleur-tekst-zwak: #9ca3af; --kleur-primair: #3b82f6; --kleur-primair-hover: #2563eb; --kleur-primair-tekst: #ffffff; --kleur-gevaar: #ef4444; --kleur-gevaar-hover: #dc2626; --kleur-succes: #22c55e; --kleur-waarschuwing: #f59e0b; --kleur-info: #38bdf8; --kleur-fout-achtergrond: #450a0a; --kleur-fout-rand: #7f1d1d; --kleur-fout-tekst: #fca5a5; /* Status badge-achtergronden (dark theme) */ --kleur-succes-bg: #052e16; --kleur-info-bg: #0c4a6e; --kleur-navigatie: #0f172a; --kleur-navigatie-tekst: #e2e8f0; --kleur-navigatie-hover: #1e3a5f; --grid-vroeg: #1e3a5f; --grid-laat: #422006; --grid-nacht: #3b0764; --grid-rust: #1f2937; --grid-ziekte: #7f1d1d; --grid-standby: #451a03; --grid-dag: #064e3b; --grid-weekend: #374151; --kleur-waarschuwing-bg:#78350f; --kleur-gevaar-bg: var(--kleur-fout-achtergrond); /* Shifttype-code aliassen (donker thema) */ --grid-vv: var(--grid-dag); --grid-kd: var(--grid-dag); --grid-da: var(--grid-dag); --grid-vd: var(--grid-dag); --grid-vp: var(--grid-dag); --grid-rxw: var(--grid-rust); --grid-rxf: var(--grid-rust); --grid-cxw: var(--grid-rust); --grid-cxa: var(--grid-rust); --grid-z: var(--grid-ziekte); --grid-t: var(--grid-standby); } /* ─── Reset & basis ───────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--kleur-achtergrond); color: var(--kleur-tekst); line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; } /* ─── Navigatie ───────────────────────────────────────────────────────────── */ .hoofd-navigatie { background-color: var(--kleur-navigatie); color: var(--kleur-navigatie-tekst); padding: 0 1.5rem; display: flex; align-items: center; gap: 1rem; height: 3.5rem; position: sticky; top: 0; z-index: 100; box-shadow: var(--schaduw); } .nav-merk .merk-link { color: var(--kleur-navigatie-tekst); text-decoration: none; font-weight: 700; font-size: 1.125rem; } .hoofd-menu { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; } .nav-link { color: var(--kleur-navigatie-tekst); text-decoration: none; padding: 0.5rem 0.75rem; border-radius: var(--rand-radius-klein); font-size: 0.875rem; transition: background-color 0.15s; } .nav-link:hover, .nav-link.actief { background-color: var(--kleur-navigatie-hover); } .nav-gebruiker { display: flex; align-items: center; gap: 0.75rem; margin-left: 1rem; padding-left: 1rem; border-left: 1px solid rgba(255,255,255,.2); } .gebruikersnaam { font-size: 0.875rem; } /* CSS-only hamburger (verborgen op desktop) */ .menu-toggle, .menu-icoon { display: none; } /* ─── Hoofdinhoud ─────────────────────────────────────────────────────────── */ .hoofd-inhoud { flex: 1; padding: 1.5rem; max-width: 1400px; width: 100%; margin: 0 auto; } /* ─── Formulieren ─────────────────────────────────────────────────────────── */ .formulier { display: flex; flex-direction: column; gap: 1rem; } .formulier-veld { display: flex; flex-direction: column; gap: 0.375rem; } .formulier-veld label { font-size: 0.875rem; font-weight: 500; color: var(--kleur-tekst); } .invoer { padding: 0.5rem 0.75rem; border: 1px solid var(--kleur-rand); border-radius: var(--rand-radius); background-color: var(--kleur-achtergrond); color: var(--kleur-tekst); font-size: 0.875rem; transition: border-color 0.15s, box-shadow 0.15s; } .invoer:focus { outline: none; border-color: var(--kleur-primair); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .wachtwoord-wrapper { position: relative; } .wachtwoord-wrapper .invoer { padding-right: 2.5rem; width: 100%; box-sizing: border-box; } .wachtwoord-toggle { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 0.2rem; color: var(--kleur-tekst-zwak, #6b7280); display: flex; align-items: center; line-height: 1; } .wachtwoord-toggle:hover { color: var(--kleur-tekst); } .invoer-totp { font-size: 1.5rem; letter-spacing: 0.5rem; text-align: center; max-width: 12rem; } /* ─── Knoppen ─────────────────────────────────────────────────────────────── */ .knop { padding: 0.5rem 1rem; border: none; border-radius: var(--rand-radius); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background-color 0.15s, opacity 0.15s; text-decoration: none; display: inline-flex; align-items: center; gap: 0.375rem; } .knop:disabled { opacity: 0.5; cursor: not-allowed; } .knop-primair { background-color: var(--kleur-primair); color: var(--kleur-primair-tekst); } .knop-primair:hover:not(:disabled) { background-color: var(--kleur-primair-hover); } .knop-gevaar { background-color: var(--kleur-gevaar); color: white; } .knop-gevaar:hover:not(:disabled) { background-color: var(--kleur-gevaar-hover); } .knop-link { background: none; border: none; color: var(--kleur-primair); cursor: pointer; font-size: inherit; padding: 0; text-decoration: underline; } .inline-formulier { display: inline; } /* ─── Foutmeldingen ───────────────────────────────────────────────────────── */ .fout-bericht { background-color: var(--kleur-fout-achtergrond); border: 1px solid var(--kleur-fout-rand); color: var(--kleur-fout-tekst); border-radius: var(--rand-radius); padding: 0.75rem 1rem; font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; } .fout-icoon { font-size: 1rem; } /* ─── Login-pagina ────────────────────────────────────────────────────────── */ .login-container { max-width: 24rem; margin: 4rem auto; padding: 2rem; background-color: var(--kleur-achtergrond-alt); border: 1px solid var(--kleur-rand); border-radius: var(--rand-radius-groot); box-shadow: var(--schaduw-groot); } .login-titel { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; text-align: center; } .login-omschrijving { color: var(--kleur-tekst-zwak); font-size: 0.875rem; margin-bottom: 1.5rem; text-align: center; } /* ─── Tabel ───────────────────────────────────────────────────────────────── */ .tabel { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .tabel th, .tabel td { padding: 0.625rem 0.75rem; text-align: left; border-bottom: 1px solid var(--kleur-rand); } .tabel th { font-weight: 600; background-color: var(--kleur-achtergrond-alt); position: sticky; top: 3.5rem; } .tabel tbody tr:hover { background-color: var(--kleur-achtergrond-alt); } /* ─── Voettekst ───────────────────────────────────────────────────────────── */ .hoofd-voettekst { padding: 1rem 1.5rem; border-top: 1px solid var(--kleur-rand); text-align: center; color: var(--kleur-tekst-zwak); font-size: 0.75rem; } /* ─── HTMX laadtoestand ───────────────────────────────────────────────────── */ .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; } .htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; } /* ─── Tegel-icoon kleuren ─────────────────────────────────────────────────── */ :root, [data-theme="light"] { --tegel-planning: #2563eb; --tegel-verlof: #16a34a; --tegel-notities: #7c3aed; --tegel-gebruikers: #0891b2; --tegel-shiftcodes: #ea580c; --tegel-typetabel: #0d9488; --tegel-hr: #dc2626; --tegel-locaties: #4f46e5; --tegel-instellingen: #374151; --tegel-competenties: #b45309; --tegel-aankondigingen:#be185d; --tegel-database: #0ea5e9; --tegel-rapporten: #6366f1; } [data-theme="dark"] { --tegel-planning: #3b82f6; --tegel-verlof: #22c55e; --tegel-notities: #a78bfa; --tegel-gebruikers: #22d3ee; --tegel-shiftcodes: #fb923c; --tegel-typetabel: #2dd4bf; --tegel-hr: #f87171; --tegel-locaties: #818cf8; --tegel-instellingen: #9ca3af; --tegel-competenties: #fbbf24; --tegel-aankondigingen:#f472b6; --tegel-database: #0284c7; --tegel-rapporten: #818cf8; } /* ─── Paginastructuur ─────────────────────────────────────────────────────── */ .pagina-inhoud { display: flex; flex-direction: column; gap: 1.5rem; } .pagina-kop, .pagina-hoofd { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; } .pagina-titel { font-size: 1.5rem; font-weight: 700; color: var(--kleur-tekst); } .pagina-acties { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } /* ─── Kaart ───────────────────────────────────────────────────────────────── */ .kaart { background-color: var(--kleur-achtergrond-alt); border: 1px solid var(--kleur-rand); border-radius: var(--rand-radius-groot); padding: 1.25rem; box-shadow: var(--schaduw-klein); } .kaart-titel { font-size: 1rem; font-weight: 600; color: var(--kleur-tekst); margin-bottom: 1rem; } /* ─── Welkomstbanner ─────────────────────────────────────────────────────── */ .welkomst-banner { background: linear-gradient(135deg, var(--kleur-navigatie) 0%, var(--kleur-navigatie-hover) 100%); color: white; padding: 1.5rem 2rem; border-radius: var(--rand-radius-groot); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .welkomst-naam { font-size: 1.375rem; font-weight: 700; } .welkomst-subtitel { font-size: 0.9375rem; opacity: 0.85; margin-top: 0.25rem; } .welkomst-datum { font-size: 0.875rem; opacity: 0.75; text-align: right; } /* ─── Stat-kaarten ───────────────────────────────────────────────────────── */ .stat-rooster { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; } .stat-kaart { background-color: var(--kleur-achtergrond-alt); border: 1px solid var(--kleur-rand); border-radius: var(--rand-radius-groot); padding: 1.25rem; display: flex; align-items: flex-start; gap: 1rem; box-shadow: var(--schaduw-klein); } .stat-icoon { width: 44px; height: 44px; border-radius: var(--rand-radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: white; font-size: 1.25rem; } .stat-inhoud { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .stat-getal { font-size: 1.75rem; font-weight: 700; line-height: 1; color: var(--kleur-tekst); } .stat-label { font-size: 0.8125rem; color: var(--kleur-tekst-zwak); } /* Brede variant voor shifts-kaart */ .stat-kaart--breed { grid-column: span 2; align-items: flex-start; } /* Dashboard eigen shifts mini-lijst */ .dashboard-shifts-lijst { list-style: none; margin: 0.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; } .dashboard-shift-rij { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; } .dashboard-shift-datum { min-width: 90px; color: var(--kleur-tekst-zwak); font-size: 0.75rem; } .dashboard-shift-datum strong { color: var(--kleur-tekst); } .dashboard-shift-code { font-weight: 700; font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: var(--rand-radius-klein); white-space: nowrap; color: var(--kleur-tekst); } .dashboard-shift-tijden { font-size: 0.7rem; color: var(--kleur-tekst-zwak); white-space: nowrap; } .stat-leeg { font-size: 0.8rem; color: var(--kleur-tekst-zwak); font-style: italic; margin-top: 0.25rem; } /* ─── Moduletegels ───────────────────────────────────────────────────────── */ .module-rooster { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; } .module-tegel { display: flex; align-items: center; gap: 0.875rem; padding: 1rem 1.25rem; background-color: var(--kleur-achtergrond-alt); border: 1px solid var(--kleur-rand); border-radius: var(--rand-radius-groot); text-decoration: none; color: var(--kleur-tekst); box-shadow: var(--schaduw-klein); transition: box-shadow 0.15s, border-color 0.15s, transform 0.1s; } .module-tegel:hover { box-shadow: var(--schaduw); border-color: var(--kleur-primair); transform: translateY(-1px); } .tegel-icoon { width: 40px; height: 40px; border-radius: var(--rand-radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: white; } .tegel-tekst { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; } .tegel-titel { font-size: 0.9375rem; font-weight: 600; display: flex; align-items: center; gap: 0.4rem; } .tegel-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; border-radius: 999px; background: var(--kleur-gevaar, #dc2626); color: #fff; font-size: 0.6875rem; font-weight: 700; line-height: 1; } .tegel-sub { font-size: 0.75rem; color: var(--kleur-tekst-zwak); overflow-wrap: break-word; } /* ─── Badges ─────────────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; padding: 0.1875rem 0.5rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 600; line-height: 1; } .badge-succes { background-color: #dcfce7; color: #166534; } .badge-waarschuwing { background-color: #fef9c3; color: #854d0e; } .badge-fout { background-color: #fee2e2; color: #991b1b; } .badge-info { background-color: #e0f2fe; color: #075985; } .badge-neutraal { background-color: var(--kleur-achtergrond-alt); color: var(--kleur-tekst-zwak); border: 1px solid var(--kleur-rand); } .badge-rol-super { background-color: var(--kleur-primair); color: white; } .badge-rol-planner { background-color: #7c3aed; color: white; } .badge-rol-hr { background-color: #0891b2; color: white; } [data-theme="dark"] .badge-succes { background-color: #052e16; color: #4ade80; } [data-theme="dark"] .badge-waarschuwing { background-color: #422006; color: #fbbf24; } [data-theme="dark"] .badge-fout { background-color: #450a0a; color: #fca5a5; } [data-theme="dark"] .badge-info { background-color: #0c4a6e; color: #7dd3fc; } /* ─── Alerts ─────────────────────────────────────────────────────────────── */ .alert { padding: 0.875rem 1rem; border-radius: var(--rand-radius); font-size: 0.875rem; display: flex; align-items: flex-start; gap: 0.625rem; border-left: 4px solid transparent; } .alert-succes { background-color: #f0fdf4; border-left-color: var(--kleur-succes); color: #166534; } .alert-waarschuwing { background-color: #fffbeb; border-left-color: var(--kleur-waarschuwing); color: #92400e; } .alert-fout { background-color: var(--kleur-fout-achtergrond); border-left-color: var(--kleur-gevaar); color: var(--kleur-fout-tekst); } .alert-info { background-color: #f0f9ff; border-left-color: var(--kleur-info); color: #075985; } [data-theme="dark"] .alert-succes { background-color: #052e16; color: #4ade80; } [data-theme="dark"] .alert-waarschuwing { background-color: #422006; color: #fbbf24; } [data-theme="dark"] .alert-info { background-color: #0c4a6e; color: #7dd3fc; } /* ─── Aankondigingenbanner ───────────────────────────────────────────────── */ .aankondiging-banner { padding: 0.75rem 1rem; border-radius: var(--rand-radius); display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.25rem; border-left: 4px solid transparent; } .aankondiging-banner.type-info { background-color: #f0f9ff; border-left-color: var(--kleur-info); color: #075985; } .aankondiging-banner.type-waarschuwing { background-color: #fffbeb; border-left-color: var(--kleur-waarschuwing); color: #92400e; } .aankondiging-banner.type-kritiek { background-color: var(--kleur-fout-achtergrond); border-left-color: var(--kleur-gevaar); color: var(--kleur-fout-tekst); } [data-theme="dark"] .aankondiging-banner.type-info { background-color: #0c4a6e; color: #7dd3fc; } [data-theme="dark"] .aankondiging-banner.type-waarschuwing { background-color: #422006; color: #fbbf24; } [data-theme="dark"] .aankondiging-banner.type-kritiek { background-color: #450a0a; color: #fca5a5; border-left-color: #ef4444; } .aankondiging-banner-inhoud { flex: 1; min-width: 0; } .aankondiging-banner-titel { font-weight: 600; font-size: 0.875rem; } .aankondiging-banner-bericht { font-size: 0.8125rem; margin-top: 0.125rem; opacity: 0.9; } /* ─── Skeleton loader ────────────────────────────────────────────────────── */ @keyframes skeleton-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton { background: linear-gradient(90deg, var(--kleur-rand) 25%, var(--kleur-achtergrond-alt) 50%, var(--kleur-rand) 75% ); background-size: 200% 100%; animation: skeleton-shimmer 1.5s infinite; border-radius: var(--rand-radius); color: transparent !important; } .stat-kaart.skeleton { height: 90px; } /* ─── Knop-varianten (aanvulling) ────────────────────────────────────────── */ .knop-secundair { background-color: var(--kleur-achtergrond-alt); color: var(--kleur-tekst); border: 1px solid var(--kleur-rand); } .knop-secundair:hover:not(:disabled) { background-color: var(--kleur-rand); } .knop-ghost { background-color: transparent; color: var(--kleur-tekst); border: 1px solid var(--kleur-rand); } .knop-ghost:hover:not(:disabled) { background-color: var(--kleur-achtergrond-alt); } /* ─── Veld-groep (formulieren v2) ────────────────────────────────────────── */ .veld-groep { display: flex; flex-direction: column; gap: 0.375rem; } .veld-label { font-size: 0.875rem; font-weight: 500; color: var(--kleur-tekst); } .veld-invoer { padding: 0.5rem 0.75rem; border: 1px solid var(--kleur-rand); border-radius: var(--rand-radius); background-color: var(--kleur-achtergrond); color: var(--kleur-tekst); font-size: 0.875rem; transition: border-color 0.15s, box-shadow 0.15s; width: 100%; } .veld-invoer:focus { outline: none; border-color: var(--kleur-primair); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .veld-fout { font-size: 0.75rem; color: var(--kleur-gevaar); } /* ─── Sectietitel ────────────────────────────────────────────────────────── */ .sectie-titel { font-size: 0.8125rem; font-weight: 600; color: var(--kleur-tekst-zwak); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; } /* ─── Laden-indicator ────────────────────────────────────────────────────── */ .laden-indicator { padding: 1.5rem; text-align: center; color: var(--kleur-tekst-zwak); font-size: 0.875rem; } /* ─── Leeg staat ─────────────────────────────────────────────────────────── */ .leeg { color: var(--kleur-tekst-zwak); font-size: 0.875rem; padding: 1.5rem; text-align: center; } /* ─── Responsief (mobiel) ─────────────────────────────────────────────────── */ @media (max-width: 768px) { .hoofd-inhoud { padding: 1rem; } /* Minimale raakdoelgrootte voor inputs en selects (iOS/Android: 44 px) */ .veld-invoer, .invoer, select.veld-invoer { min-height: 2.75rem; } /* Hamburger menu op mobiel */ .menu-toggle { display: none; /* verborgen maar functioneel */ } .menu-icoon { display: flex; flex-direction: column; gap: 5px; cursor: pointer; padding: 0.5rem; margin-left: auto; } .menu-icoon span { display: block; width: 22px; height: 2px; background-color: var(--kleur-navigatie-tekst); transition: transform 0.3s, opacity 0.3s; } .hoofd-menu { display: none; position: absolute; top: 3.5rem; left: 0; right: 0; background-color: var(--kleur-navigatie); flex-direction: column; align-items: stretch; padding: 0.5rem; gap: 0.25rem; box-shadow: var(--schaduw-groot); } .menu-toggle:checked ~ .hoofd-menu { display: flex; } .menu-toggle:checked ~ .menu-icoon span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-toggle:checked ~ .menu-icoon span:nth-child(2) { opacity: 0; } .menu-toggle:checked ~ .menu-icoon span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-gebruiker { border-left: none; border-top: 1px solid rgba(255,255,255,.2); margin-left: 0; padding-left: 0; padding-top: 0.5rem; flex-direction: column; align-items: flex-start; } .nav-gebruiker-menu { border-left: none; border-top: 1px solid rgba(255,255,255,.2); margin-left: 0; padding-left: 0; padding-top: 0.5rem; width: 100%; } .nav-gebruiker-dropdown { position: static; box-shadow: none; border: none; background: transparent; min-width: 0; } .nav-dropdown-item { color: var(--kleur-navigatie-tekst); border-top: 1px solid rgba(255,255,255,.1); } .nav-dropdown-item:hover { background-color: var(--kleur-navigatie-hover); } /* Planning tabel: compactere font op kleine schermen */ .planning-tabel { font-size: 0.75rem; } } /* ─── Themawisselaar ─────────────────────────────────────────────────────── */ .thema-knop { background: none; border: none; cursor: pointer; color: var(--kleur-navigatie-tekst); padding: 0.375rem; display: flex; align-items: center; border-radius: var(--rand-radius); } .thema-knop:hover { background-color: var(--kleur-navigatie-hover); } /* ─── Gebruikersmenu (details/summary dropdown) ──────────────────────────── */ .nav-gebruiker-menu { position: relative; margin-left: 1rem; padding-left: 1rem; border-left: 1px solid rgba(255,255,255,.2); } .nav-gebruiker-samenvatting { list-style: none; cursor: pointer; font-size: 0.875rem; color: var(--kleur-navigatie-tekst); display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.5rem; border-radius: var(--rand-radius); user-select: none; } .nav-gebruiker-samenvatting::-webkit-details-marker { display: none; } .nav-gebruiker-samenvatting:hover { background-color: var(--kleur-navigatie-hover); } .nav-gebruiker-dropdown { position: absolute; right: 0; top: calc(100% + 0.375rem); background: var(--kleur-achtergrond); border: 1px solid var(--kleur-rand); border-radius: var(--rand-radius); box-shadow: var(--schaduw-groot); min-width: 170px; z-index: 200; overflow: hidden; } .nav-dropdown-item { display: block; padding: 0.625rem 1rem; font-size: 0.875rem; color: var(--kleur-tekst); text-decoration: none; background: none; border: none; border-top: 1px solid var(--kleur-rand); width: 100%; text-align: left; cursor: pointer; } .nav-dropdown-item:first-child { border-top: none; } .nav-dropdown-item:hover { background-color: var(--kleur-achtergrond-alt); } /* ── Taalwisseling ─────────────────────────────────────────────────────────── */ .taal-keuze { display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 1.5rem; } .taal-knop { background: var(--kleur-achtergrond-alt); border: 1px solid var(--kleur-rand); border-radius: var(--rand-radius); color: var(--kleur-tekst-zwak); cursor: pointer; font-size: 0.85rem; font-weight: 500; padding: 0.35rem 0.75rem; transition: background 0.15s, border-color 0.15s, color 0.15s; } .taal-knop:hover { background: var(--kleur-rand); color: var(--kleur-tekst); } .taal-knop.actief { background: var(--kleur-primair); border-color: var(--kleur-primair); color: var(--kleur-primair-tekst); } /* ── Login hulptekst ───────────────────────────────────────────────────────── */ .login-hulp { margin-top: 1rem; text-align: center; font-size: 0.875rem; } .link-secundair { color: var(--kleur-tekst-zwak); text-decoration: none; } .link-secundair:hover { color: var(--kleur-primair); text-decoration: underline; } /* ─── Notities ─────────────────────────────────────────────────────────────── */ .notities-lijst { list-style: none; margin: 0; padding: 0; } .notitie-rij { padding: 0.75rem 1rem; border-bottom: 1px solid var(--kleur-rand); display: flex; flex-direction: column; gap: 0.375rem; } .notitie-rij.notitie-ongelezen { background: var(--kleur-achtergrond-alt); border-left: 3px solid var(--kleur-primair); } .notitie-rij.notitie-prioriteit-dringend { border-left: 3px solid var(--kleur-waarschuwing); } .notitie-rij.notitie-prioriteit-kritiek { border-left: 3px solid var(--kleur-gevaar); } .notitie-kop { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .notitie-datum { font-size: 0.75rem; color: var(--kleur-tekst-zwak); } .notitie-meta { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; flex: 1; } .notitie-richting { font-weight: 600; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.1rem 0.35rem; border-radius: var(--rand-radius-klein); } .notitie-richting--ontvangen { background: var(--kleur-primair-licht, #dbeafe); color: var(--kleur-primair, #2563eb); } .notitie-richting--verzonden { background: var(--kleur-achtergrond-alt); color: var(--kleur-tekst-zwak); } .notitie-planning-datum { font-size: 0.75rem; color: var(--kleur-tekst-zacht); margin-bottom: 0.25rem; } .notitie-datum-label { font-weight: 600; margin-right: 0.25rem; } .notitie-bericht { font-size: 0.875rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .notitie-vlag-melding { font-size: 0.75rem; color: var(--kleur-succes); display: flex; align-items: center; gap: 0.25rem; } .notitie-bevestiging { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--kleur-succes-zacht, #d1fae5); color: var(--kleur-succes-donker, #065f46); border-radius: var(--radius); font-size: 0.9rem; margin-bottom: 0.5rem; } .notitie-bevestiging-icoon { font-size: 1.1rem; font-weight: 700; } .notitie-badge-teller { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.25rem; background: var(--kleur-gevaar); color: #fff; border-radius: 9999px; font-size: 0.6875rem; font-weight: 700; line-height: 1; margin-left: 0.25rem; vertical-align: middle; } .notitie-formulier-kaart { margin-bottom: 1rem; } .kaart-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .kaart-subtitel { font-size: 1rem; font-weight: 600; margin: 0; } .veld-horizontaal { display: flex; align-items: center; gap: 0.5rem; } .formulier-acties { display: flex; gap: 0.5rem; margin-top: 1rem; } .knop-klein { padding: 0.25rem 0.5rem; font-size: 0.75rem; } /* ─── Gebruikersbeheer ──────────────────────────────────────────────────────── */ .gebruikers-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 1024px) { .gebruikers-layout { grid-template-columns: 1fr 1fr; } } .filter-balk { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .filter-label { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--kleur-tekst-zwak); cursor: pointer; } .tabel { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .tabel-kop { padding: 0.5rem 0.75rem; text-align: left; font-size: 0.75rem; font-weight: 600; color: var(--kleur-tekst-zwak); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 2px solid var(--kleur-rand); background: var(--kleur-achtergrond-alt); } .tabel-rij { border-bottom: 1px solid var(--kleur-rand); transition: background 0.1s; } .tabel-rij:hover { background: var(--kleur-hover); } .tabel-rij.rij-inactief { opacity: 0.6; } .tabel-cel { padding: 0.5rem 0.75rem; vertical-align: middle; } .tekst-mono { font-family: monospace; font-size: 0.8125rem; } .gebruiker-detail-kaart { position: sticky; top: 1rem; } .detail-lijst { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; font-size: 0.875rem; margin-bottom: 1rem; } .detail-lijst dt { color: var(--kleur-tekst-zwak); font-weight: 500; } .detail-sectie { border-top: 1px solid var(--kleur-rand); padding-top: 1rem; margin-top: 1rem; } .detail-sectie-titel { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--kleur-tekst-zwak); text-transform: uppercase; letter-spacing: 0.04em; } .lidmaatschappen-lijst { list-style: none; padding: 0; margin: 0 0 0.75rem; } .lidmaatschap-rij { display: flex; align-items: center; justify-content: space-between; padding: 0.375rem 0; border-bottom: 1px solid var(--kleur-rand); font-size: 0.875rem; } .lid-info { display: flex; align-items: center; gap: 0.5rem; } .lid-acties { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; } .lid-pad { display: flex; align-items: center; gap: 0.2rem; flex-wrap: wrap; } .lid-pad-stap { color: var(--kleur-tekst-zwak); font-size: 0.8125rem; } .lid-reserve-toggle { display: flex; align-items: center; gap: 0.35rem; font-size: 0.875rem; cursor: pointer; user-select: none; } /* ── Lidmaatschap bewerk-dialoog ─────────────────────────────────── */ /* Reset browser UA (dialog krijgt standaard background:Canvas en color:CanvasText die de system color-scheme volgen i.p.v. de pagina's data-theme) */ .lid-dialoog { border: 1px solid var(--kleur-rand); border-radius: var(--rand-radius); background-color: var(--kleur-achtergrond); color: var(--kleur-tekst); font-family: inherit; font-size: inherit; padding: 0; width: min(440px, 90vw); max-height: 85vh; overflow: auto; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28); /* Zorg dat de browser color-scheme de pagina-theme volgt, niet het OS */ color-scheme: light; } [data-theme="dark"] .lid-dialoog { color-scheme: dark; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6); } .lid-dialoog::backdrop { background-color: rgba(0, 0, 0, 0.5); } [data-theme="dark"] .lid-dialoog::backdrop { background-color: rgba(0, 0, 0, 0.7); } .lid-dialoog-kop { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.875rem 1rem 0.625rem; border-bottom: 1px solid var(--kleur-rand); position: sticky; top: 0; background-color: var(--kleur-achtergrond); } .lid-dialoog-kop h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--kleur-tekst); } .lid-dialoog-inhoud { padding: 1rem; display: flex; flex-direction: column; gap: 0.75rem; } .lid-dialoog-voet { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.625rem 1rem 0.875rem; border-top: 1px solid var(--kleur-rand); position: sticky; bottom: 0; background-color: var(--kleur-achtergrond); } .knop-sluit-dialoog { background-color: transparent; border: none; font-size: 1.25rem; line-height: 1; cursor: pointer; color: var(--kleur-tekst-zwak); padding: 0.15rem 0.4rem; border-radius: var(--rand-radius-klein); flex-shrink: 0; } .knop-sluit-dialoog:hover { color: var(--kleur-tekst); background-color: var(--kleur-achtergrond-alt); } .uitklap-formulier summary { cursor: pointer; display: inline-block; margin-bottom: 0.5rem; } .lid-formulier, .reset-formulier { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; padding: 0.75rem; background: var(--kleur-achtergrond-alt); border-radius: var(--rand-radius); } /* Omtrek-variant: transparante achtergrond met rode rand (voor inline acties) */ .knop-gevaar-omtrek { background: transparent; color: var(--kleur-gevaar); border: 1px solid var(--kleur-gevaar); border-radius: var(--rand-radius-klein); padding: 0.25rem 0.625rem; font-size: 0.8125rem; cursor: pointer; } .knop-gevaar-omtrek:hover { background: var(--kleur-gevaar); color: #fff; } /* ─── Shiftcodes beheer ──────────────────────────────────────────────────── */ /* Twee-kolom layout op desktop: lijst links, formulier rechts */ .shiftcodes-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 1024px) { .shiftcodes-layout { grid-template-columns: 3fr 2fr; align-items: start; } } /* Gekleurde pill/badge voor de shiftcode */ .shiftcode-code-badge { display: inline-flex; align-items: center; padding: 0.1875rem 0.625rem; border-radius: 9999px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.03em; } .shiftcode-code-badge--neutraal { background-color: var(--kleur-achtergrond-alt); color: var(--kleur-tekst); border: 1px solid var(--kleur-rand); } /* Categorie badge */ .categorie-badge { display: inline-flex; align-items: center; padding: 0.1875rem 0.5rem; border-radius: var(--rand-radius-klein); font-size: 0.6875rem; font-weight: 600; background-color: var(--kleur-achtergrond-alt); color: var(--kleur-tekst-zwak); border: 1px solid var(--kleur-rand); text-transform: uppercase; letter-spacing: 0.04em; } .categorie-badge--werk { background-color: #eff6ff; color: #1e40af; border-color: #bfdbfe; } .categorie-badge--admin { background-color: #fef3c7; color: #92400e; border-color: #fde68a; } [data-theme="dark"] .categorie-badge--werk { background-color: #1e3a5f; color: #93c5fd; border-color: #1e40af; } [data-theme="dark"] .categorie-badge--admin { background-color: #451a03; color: #fbbf24; border-color: #92400e; } /* Formulierkaart */ .shiftcode-formulier-kaart { position: sticky; top: 1rem; } .shiftcode-formulier { display: flex; flex-direction: column; gap: 0.75rem; } /* Kleur-invoer inline naast het kleurvak */ .kleur-invoer-groep { display: flex; align-items: center; gap: 0.5rem; } .veld-invoer--kleur { width: 3rem; height: 2rem; padding: 0.125rem; border-radius: var(--rand-radius-klein); cursor: pointer; } /* ─── Typetabellen ──────────────────────────────────────────────────────────── */ .typetabellen-layout { display: grid; grid-template-columns: 320px 1fr; gap: 1.5rem; align-items: start; } @media (max-width: 900px) { .typetabellen-layout { grid-template-columns: 1fr; } } .typetabellen-kolom-lijst { display: flex; flex-direction: column; gap: 1rem; } .typetabellen-kolom-grid { overflow-x: auto; } .typetabel-grid-leeg { padding: 2rem; text-align: center; color: var(--kleur-tekst-zwak); } .typetabel-grid-container { display: flex; flex-direction: column; gap: 1.25rem; } .typetabel-grid-kop { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; } .typetabel-grid-titel { font-size: 1.125rem; font-weight: 600; color: var(--kleur-tekst); margin: 0; } .typetabel-grid-meta { font-size: 0.875rem; color: var(--kleur-tekst-zwak); margin: 0.25rem 0 0; } .typetabel-import-sectie { display: flex; align-items: flex-end; gap: 0.5rem; } .typetabel-import-vorm { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .veld-invoer--smal { width: 5rem; } .typetabel-grid-wrapper { overflow-x: auto; border: 1px solid var(--kleur-rand); border-radius: var(--rand-radius); } .typetabel-grid-tabel { border-collapse: collapse; font-size: 0.8125rem; min-width: max-content; } .tabel--vast { table-layout: fixed; } .typetabel-lijn-kop { min-width: 8rem; white-space: nowrap; } .typetabel-dag-kop { min-width: 3.5rem; text-align: center; padding: 0.25rem 0.125rem; } .typetabel-dag-kop--weekend { background-color: var(--grid-weekend); } .typetabel-week-label { display: block; font-size: 0.6875rem; color: var(--kleur-tekst-zwak); font-weight: 400; } .typetabel-dag-label { display: block; font-weight: 600; } .typetabel-lijn-cel { padding: 0.375rem 0.5rem; vertical-align: middle; white-space: nowrap; } .typetabel-lijn-nummer { font-weight: 600; font-size: 0.8125rem; } .typetabel-lid-badge { display: inline-block; margin-left: 0.375rem; padding: 0.0625rem 0.375rem; background-color: var(--kleur-primair); color: var(--kleur-primair-tekst); border-radius: var(--rand-radius-klein); font-size: 0.6875rem; } .typetabel-cel { padding: 0.125rem; text-align: center; vertical-align: middle; border: 1px solid var(--kleur-rand); } .typetabel-cel--weekend { background-color: var(--grid-weekend); } .typetabel-cel-inhoud { display: block; padding: 0.25rem 0.25rem; border-radius: var(--rand-radius-klein); font-size: 0.75rem; font-weight: 600; min-width: 2.5rem; text-align: center; transition: opacity 0.1s; } .typetabel-cel-inhoud:hover { opacity: 0.8; outline: 2px solid var(--kleur-primair); } .typetabel-cel-leeg { display: block; padding: 0.25rem 0.25rem; color: var(--kleur-tekst-zwak); font-size: 0.75rem; min-width: 2.5rem; text-align: center; } .typetabel-cel-leeg:hover { background-color: var(--kleur-achtergrond-alt); border-radius: var(--rand-radius-klein); } .typetabel-cel-editor-vorm { display: contents; } .typetabel-cel-invoer { width: 3.5rem; padding: 0.125rem 0.25rem; font-size: 0.8125rem; text-transform: uppercase; border: 1px solid var(--kleur-primair); border-radius: var(--rand-radius-klein); text-align: center; background-color: var(--kleur-achtergrond); color: var(--kleur-tekst); } .typetabel-formulier-kaart { position: sticky; top: 1rem; } .typetabel-formulier { display: flex; flex-direction: column; gap: 0.75rem; } .typetabel-lijnkoppelingen { border-top: 1px solid var(--kleur-rand); padding-top: 1rem; } .lijn-koppelingen-sectie { display: flex; flex-direction: column; gap: 1rem; } .lijn-koppeling { /* Tabelrij per lijn */ } .lijn-koppeling-vorm { padding: 0.75rem; background-color: var(--kleur-achtergrond-alt); border-radius: var(--rand-radius); border: 1px solid var(--kleur-rand); } .veld-rij { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } /* ─── HR-regels ────────────────────────────────────────────────────────────── */ .hr-regel-code { font-family: monospace; font-weight: bold; font-size: 0.9375rem; letter-spacing: 0.02em; } .hr-regel-inactief { opacity: 0.5; } .hr-regel-beschrijving { cursor: help; margin-left: 0.25rem; font-size: 0.75rem; } .hr-regel-waarde-input { width: 5rem; } .hr-regels-tabel { width: 100%; } /* Gewijzigd-badge: oranje/amber */ .badge-gewijzigd { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.125rem 0.5rem; background-color: #fef3c7; color: #92400e; border: 1px solid #fcd34d; border-radius: var(--rand-radius-klein); font-size: 0.75rem; font-weight: 500; margin-left: 0.25rem; } [data-theme="dark"] .badge-gewijzigd { background-color: #451a03; color: #fcd34d; border-color: #92400e; } /* Ernst-niveau selectie kleuren */ .ernst-info { color: var(--kleur-info); border-color: var(--kleur-info); } .ernst-warning { color: var(--kleur-waarschuwing); border-color: var(--kleur-waarschuwing); } .ernst-critical { color: var(--kleur-gevaar); border-color: var(--kleur-gevaar); font-weight: 600; } /* Rode lijn sectie */ .rode-lijn-sectie { max-width: 32rem; } /* Definitielijst voor rode-lijn configuratie */ .definitielijst { display: grid; grid-template-columns: auto 1fr; gap: 0; } .definitielijst-rij { display: contents; } .definitielijst-rij dt { padding: 0.5rem 1rem 0.5rem 0; font-weight: 500; color: var(--kleur-tekst-zwak); white-space: nowrap; } .definitielijst-rij dd { padding: 0.5rem 0; margin: 0; color: var(--kleur-tekst); } /* ─── Locaties & organisatie ─────────────────────────────────────────────── */ .locaties-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; } @media (min-width: 1024px) { .locaties-layout { grid-template-columns: 1fr 1fr; } } /* Organisatieboom container */ .org-boom { font-size: 0.875rem; } .org-boom-lijst { list-style: none; margin: 0; padding: 0; } .org-node-wrapper { margin: 0; padding: 0; } /* Klapbare details-element */ .org-details > summary { list-style: none; } .org-details > summary::-webkit-details-marker { display: none; } /* Inspringing per niveau */ .org-niveau-1 { padding-left: 0; } .org-niveau-2 { padding-left: 1rem; } .org-niveau-3 { padding-left: 2rem; } .org-niveau-4 { padding-left: 3rem; } /* Klikbare node */ .org-node { display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.5rem; border-radius: var(--rand-radius-klein); cursor: pointer; transition: background-color 0.1s; user-select: none; } .org-node:hover { background-color: var(--kleur-achtergrond-alt); } .org-node.actief-pagina { background-color: var(--kleur-primair); color: var(--kleur-primair-tekst); } /* Inactieve eenheden zijn half-transparant */ .org-inactief { opacity: 0.5; } .org-node-icoon { font-size: 1em; flex-shrink: 0; } .org-node-naam { font-weight: 500; flex: 1; } .org-node-code { font-size: 0.8em; } /* Geneste lijst inspringing */ .org-details .org-boom-lijst { padding-left: 1.25rem; border-left: 2px solid var(--kleur-rand); margin-left: 0.75rem; margin-top: 0.125rem; margin-bottom: 0.125rem; } /* Detail panel */ .locatie-detail-kaart { min-height: 12rem; } .locatie-detail-leeg { padding: 2rem; text-align: center; } .locatie-bewerk-formulier { display: flex; flex-direction: column; gap: 0.75rem; } .formulier-veld-groep { display: flex; flex-direction: column; gap: 0.75rem; } /* ─── Instellingen ────────────────────────────────────────────────────────── */ .instellingen-sectie { margin-bottom: 2rem; } .instelling-sleutel { font-family: monospace; font-size: 0.85rem; color: var(--kleur-tekst-subtiel); } .instelling-beschrijving { font-size: 0.875rem; color: var(--kleur-tekst-subtiel); max-width: 24rem; } .instelling-waarde-cel { display: flex; align-items: center; gap: 0.75rem; } .instelling-tekst-form { display: contents; } .instelling-tekst-invoer { max-width: 18rem; } /* Toggle switch */ .toggle-switch-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; user-select: none; } .toggle-switch-input { position: absolute; opacity: 0; width: 0; height: 0; } .toggle-switch-schuif { position: relative; display: inline-block; width: 2.5rem; height: 1.375rem; background-color: var(--kleur-rand); border-radius: 1rem; transition: background-color 0.2s; flex-shrink: 0; } .toggle-switch-schuif::after { content: ''; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1rem; height: 1rem; border-radius: 50%; background-color: white; transition: transform 0.2s; } .toggle-switch-input:checked + .toggle-switch-schuif { background-color: var(--kleur-primair); } .toggle-switch-input:checked + .toggle-switch-schuif::after { transform: translateX(1.125rem); } .toggle-switch-tekst { font-size: 0.875rem; color: var(--kleur-tekst-subtiel); } /* Opgeslagen-indicator */ .instelling-opgeslagen { font-size: 0.75rem; color: var(--kleur-succes); font-weight: 500; animation: instelling-fade-uit 3s forwards; } @keyframes instelling-fade-uit { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } } /* ─── Competenties matrix ──────────────────────────────────────────────────── */ .competenties-matrix { border-collapse: collapse; width: max-content; min-width: 100%; font-size: 0.875rem; } .competenties-matrix th, .competenties-matrix td { border: 1px solid var(--kleur-rand); padding: 0.375rem 0.5rem; text-align: center; vertical-align: middle; } .matrix-naam-kolom { text-align: left !important; min-width: 12rem; white-space: nowrap; background-color: var(--kleur-achtergrond-alt); font-weight: 500; position: sticky; left: 0; z-index: 1; } .matrix-header { min-width: 5rem; max-width: 7rem; background-color: var(--kleur-achtergrond-alt); font-weight: 500; } .matrix-header span { display: block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; max-height: 6rem; overflow: hidden; text-overflow: ellipsis; padding: 0.25rem 0; } .matrix-cel { min-width: 4rem; } .matrix-cel-aan { background-color: color-mix(in srgb, var(--kleur-succes) 10%, transparent); } .matrix-cel-uit { background-color: var(--kleur-achtergrond); } .competentie-vinkje { display: flex; align-items: center; justify-content: center; gap: 0.25rem; color: var(--kleur-succes); font-weight: 600; font-size: 1rem; } .competentie-meta { font-size: 0.6875rem; color: var(--kleur-tekst-zwak); font-weight: 400; } /* Waarschuwingsbanner bij eenheden met kinderen */ .melding-waarschuwing { background-color: var(--kleur-fout-achtergrond); border: 1px solid var(--kleur-fout-rand); color: var(--kleur-fout-tekst); border-radius: var(--rand-radius); padding: 0.5rem 0.75rem; font-size: 0.875rem; margin-bottom: 0.75rem; } /* ── Aankondigingen beheer ─────────────────────────────────────────── */ .aankondiging-type-info { background: var(--kleur-info-bg, #dbeafe); color: var(--kleur-info, #1d4ed8); } .aankondiging-type-waarschuwing { background: var(--kleur-waarschuwing-bg, #fef3c7); color: var(--kleur-waarschuwing, #d97706); } .aankondiging-type-kritiek { background: var(--kleur-gevaar-bg, #fee2e2); color: var(--kleur-gevaar, #dc2626); } .aankondiging-verlopen { opacity: 0.55; } /* ── Account pagina ────────────────────────────────────────────────── */ .account-secties { display: flex; flex-direction: column; gap: 1.5rem; max-width: 640px; } .account-sectie { padding: 1.25rem 1.5rem; } .profiel-info { display: grid; grid-template-columns: 160px 1fr; gap: 0.4rem 1rem; } .profiel-info dt { font-weight: 600; color: var(--kleur-tekst-zwak); } .taal-knoppen, .thema-knoppen { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.5rem; } .taal-knop { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1rem; border: 2px solid var(--kleur-rand); border-radius: var(--straal); background: transparent; cursor: pointer; } .taal-knop-actief { border-color: var(--kleur-primair); background: var(--kleur-primair-zwak, #eff6ff); font-weight: 600; } .taal-vlag { font-size: 1.25rem; } .knop-actief { border-color: var(--kleur-primair); background: var(--kleur-primair-zwak, #eff6ff); font-weight: 600; } /* ── iCal-feed-token ───────────────────────────────────────────────── */ .ical-token-eenmalig { flex-direction: column; align-items: stretch; gap: 0.5rem; } .ical-url-veld { width: 100%; box-sizing: border-box; font-size: 0.85rem; line-height: 1.4; word-break: break-all; overflow-wrap: anywhere; white-space: pre-wrap; resize: vertical; min-height: 4.5rem; margin-bottom: 0.75rem; } .ical-acties { gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; } .ical-qr { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--kleur-rand); text-align: center; } .ical-qr-afbeelding { display: block; margin: 0.5rem auto 0; background: #fff; padding: 0.5rem; border-radius: var(--straal); max-width: 100%; height: auto; } /* ── Desktop-only banner ───────────────────────────────────────────── */ /* Verborgen op desktop, zichtbaar op mobiel/tablet */ .desktop-only-banner { display: none; } @media (max-width: 1023px) { .desktop-only-banner { display: block; background: var(--kleur-waarschuwing-bg, #fef3c7); color: var(--kleur-waarschuwing, #d97706); border: 1px solid var(--kleur-waarschuwing, #d97706); border-radius: var(--straal); padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 0.9rem; } } /* ─── Verlof ─────────────────────────────────────────────────────────────── */ /* Aanvragenlijst */ .verlof-lijst { list-style: none; display: flex; flex-direction: column; gap: 0.75rem; } .verlof-rij { padding: 0.875rem 1rem; background: var(--kleur-achtergrond-alt); border: 1px solid var(--kleur-rand); border-radius: var(--rand-radius); } .verlof-rij-kop { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .verlof-aanvrager { font-size: 0.875rem; min-width: 0; } .verlof-periode { font-size: 0.875rem; color: var(--kleur-tekst); flex: 1; min-width: 0; } .verlof-opmerking { margin-top: 0.375rem; color: var(--kleur-tekst-zwak); } .verlof-weigering { margin-top: 0.375rem; } .verlof-acties { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.625rem; } .verlof-formulier-kaart { max-width: 520px; } /* Saldo-widget */ .saldo-lijst { display: grid; grid-template-columns: 1fr; gap: 0.5rem; font-size: 0.875rem; } .saldo-rij { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--kleur-rand); } .saldo-rij:last-child { border-bottom: none; } .saldo-label { font-weight: 500; color: var(--kleur-tekst); } .saldo-waarde { font-size: 1.125rem; font-weight: 700; color: var(--kleur-tekst); text-align: right; } .saldo-detail { display: block; color: var(--kleur-tekst-zwak); font-weight: 400; font-size: 0.75rem; } /* Verlof-indicator (capaciteitsheatmap) */ .verlof-indicator { display: inline-block; width: 0.875rem; height: 0.875rem; border-radius: 50%; flex-shrink: 0; vertical-align: middle; } .verlof-indicator--groen { background: var(--kleur-succes); } .verlof-indicator--geel { background: var(--kleur-waarschuwing); } .verlof-indicator--rood { background: var(--kleur-gevaar); } .verlof-indicator--grijs { background: var(--kleur-tekst-zwak); } .verlof-indicator-legenda { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.8125rem; color: var(--kleur-tekst-zwak); margin-bottom: 0.75rem; } /* Verlof-kalender tabel */ .verlof-kalender-tabel { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .verlof-kalender-tabel th, .verlof-kalender-tabel td { padding: 0.375rem 0.625rem; border-bottom: 1px solid var(--kleur-rand); vertical-align: top; } .verlof-kalender-tabel th { text-align: left; font-weight: 600; color: var(--kleur-tekst-zwak); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; } .verlof-kalender-tabel__datum-kol { width: 5rem; } .verlof-kalender-tabel__indicator-kol { width: 3.5rem; text-align: center; } .verlof-kalender-tabel__datum { white-space: nowrap; } .verlof-kalender-tabel__dagnr { font-weight: 600; margin-right: 0.25rem; } .verlof-kalender-tabel__indicator { text-align: center; } .verlof-kalender-tabel__rij--weekend td { background: var(--kleur-achtergrond-alt); color: var(--kleur-tekst-zwak); } .verlof-kalender-tabel__rij--conflict td { background: var(--kleur-gevaar-bg); } .verlof-kalender-namenlijst { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: center; } .verlof-kalender-tabel__aantallen { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; } /* ─── Utility-klassen ─────────────────────────────────────────────────────── */ /* Tekst */ .tekst-zwak { color: var(--kleur-tekst-zwak); } .tekst-klein { font-size: 0.75rem; } .tekst-vet { font-weight: 600; } .tekst-mono { font-family: monospace; } .tekst-waarschuwing { color: var(--kleur-waarschuwing); } .tekst-gevaar { color: var(--kleur-gevaar); } .tekst-succes { color: var(--kleur-succes); } /* Volledig verborgen — gebruikt door HTMX-heartbeat, sticky-banners en JS-toggles. */ .verborgen { display: none !important; } /* Generieke banner — alert-stijl, herbruikbaar voor lock-conflicten, verlopen vergrendelingen en andere statusmeldingen. */ .banner { padding: 0.75rem 1rem; border-left: 4px solid var(--kleur-rand); border-radius: var(--rand-radius); background: var(--kleur-achtergrond-alt); color: var(--kleur-tekst); margin: 0.5rem 0; } .banner-titel { font-weight: 600; margin: 0 0 0.25rem 0; } .banner-waarschuwing { background: #fffbeb; border-left-color: var(--kleur-waarschuwing); color: #92400e; } [data-theme="dark"] .banner-waarschuwing { background: #422006; color: #fbbf24; } /* Verticale formulier-stapel — labels boven invoervelden, ruimte ertussen. */ .formulier-stapel { display: flex; flex-direction: column; gap: 1rem; } .formulier-stapel .veld { display: flex; flex-direction: column; gap: 0.25rem; } .knop-balk { display: flex; gap: 0.5rem; justify-content: flex-end; } /* Centraal "dialoog"-paneel voor losse loadscreens (planning openen e.d.). */ .dialoog-paneel { max-width: 32rem; margin: 2rem auto; padding: 1.5rem; background: var(--kleur-achtergrond); border: 1px solid var(--kleur-rand); border-radius: var(--rand-radius); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } /* Screenreader-only (visueel verborgen maar leesbaar door screenreaders) */ .visueel-verborgen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Kaart-helpers */ .kaart-inhoud { /* markeer-klasse; layout via parent .kaart */ } .kaart-genest { background: var(--kleur-achtergrond); border: 1px solid var(--kleur-rand); border-radius: var(--rand-radius); padding: 0.75rem; } .kaart-kop-acties { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; } /* Pagina-helpers */ .pagina-subtitel { font-size: 0.875rem; color: var(--kleur-tekst-zwak); margin-top: 0.25rem; } .login-subtitel { font-size: 0.875rem; color: var(--kleur-tekst-zwak); margin-top: 0.25rem; text-align: center; } /* Tabel-helpers */ .tabel-wrapper { overflow-x: auto; } .tabel-compact .tabel-kop, .tabel-compact .tabel-cel { padding: 0.25rem 0.5rem; font-size: 0.8125rem; } .cel-rechts { text-align: right; } /* Lege-staat */ .leeg-staat { padding: 2rem 1rem; text-align: center; } .leeg-staat-tekst { color: var(--kleur-tekst-zwak); font-size: 0.875rem; } .leeg-staat-icoon { display: block; font-size: 2rem; margin-bottom: 0.5rem; opacity: 0.4; } /* Detail-lijsten */ .detail-lijst-breed { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; font-size: 0.875rem; } .detail-lijst--compact { display: grid; grid-template-columns: auto 1fr; gap: 0.125rem 0.75rem; font-size: 0.8125rem; } .detail-rij { display: contents; } .detail-rij dt { font-weight: 500; color: var(--kleur-tekst-zwak); } /* Knop-rijen */ .knoppen-rij, .knop-rij { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } /* Veld-helpers */ .veld-groep--rij { display: flex; gap: 0.75rem; flex-wrap: wrap; } .veld-groep--checkbox { display: flex; align-items: center; gap: 0.5rem; } .veld-sub-groep { padding-left: 1rem; border-left: 2px solid var(--kleur-rand); } .veld-hint { font-size: 0.75rem; color: var(--kleur-tekst-zwak); margin-top: 0.25rem; } .veld-invoer--uppercase { text-transform: uppercase; } /* Locaties-layout */ .locaties-boom-kolom { flex: 0 0 320px; } .locaties-detail-kolom { flex: 1; min-width: 0; } /* Dashboard-secties */ .dashboard-sectie { display: flex; flex-direction: column; gap: 1rem; }