/* ===================================================================== Urenregistratie — mobile-first stylesheet ===================================================================== */ :root { --kleur-primair: #2563eb; --kleur-primair-donker: #1d4ed8; --kleur-tekst: #1f2937; --kleur-subtiel: #6b7280; --kleur-rand: #e2e8f0; --kleur-achtergrond: #f8fafc; --kleur-wit: #ffffff; --kleur-rood: #dc2626; --kleur-rood-bg: #fee2e2; --kleur-rood-tekst: #991b1b; --kleur-groen: #16a34a; --kleur-groen-bg: #dcfce7; --kleur-groen-tekst: #166534; --kleur-geel-bg: #fef9c3; --kleur-geel-tekst: #854d0e; --kleur-blauw-bg: #e0f2fe; --kleur-blauw-tekst: #075985; --kleur-gewerkt: #2563eb; --kleur-overuren: #9333ea; --kleur-vakantie: #16a34a; --kleur-adv: #0d9488; --kleur-overuren-opname: #c026d3; --kleur-afwezig: #dc2626; --kleur-feestdag: #d97706; --kleur-afgehandeld: #64748b; --kleur-globaal: #1d4ed8; --radius: 8px; } /* Donkere modus: expliciet gekozen door de ingelogde gebruiker (instellingen.php) via data-theme op , met prefers-color-scheme als fallback voor uitlogschermen waar nog geen gebruikersvoorkeur bekend is. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --kleur-tekst: #e2e8f0; --kleur-subtiel: #94a3b8; --kleur-rand: #334155; --kleur-achtergrond: #0f172a; --kleur-wit: #1e293b; --kleur-rood: #f87171; --kleur-rood-bg: #45161a; --kleur-rood-tekst: #fca5a5; --kleur-groen: #4ade80; --kleur-groen-bg: #103322; --kleur-groen-tekst: #86efac; --kleur-geel-bg: #3f2d0a; --kleur-geel-tekst: #fcd34d; --kleur-blauw-bg: #0c2d48; --kleur-blauw-tekst: #7dd3fc; --kleur-primair: #3b82f6; --kleur-primair-donker: #60a5fa; } } :root[data-theme="dark"] { --kleur-tekst: #e2e8f0; --kleur-subtiel: #94a3b8; --kleur-rand: #334155; --kleur-achtergrond: #0f172a; --kleur-wit: #1e293b; --kleur-rood: #f87171; --kleur-rood-bg: #45161a; --kleur-rood-tekst: #fca5a5; --kleur-groen: #4ade80; --kleur-groen-bg: #103322; --kleur-groen-tekst: #86efac; --kleur-geel-bg: #3f2d0a; --kleur-geel-tekst: #fcd34d; --kleur-blauw-bg: #0c2d48; --kleur-blauw-tekst: #7dd3fc; --kleur-primair: #3b82f6; --kleur-primair-donker: #60a5fa; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--kleur-achtergrond); color: var(--kleur-tekst); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; } h1, h2, h3 { line-height: 1.25; margin: 0 0 12px; } h1 { font-size: 1.5rem; padding: 16px 16px 0; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; margin-top: 20px; } a { color: var(--kleur-primair); } .inhoud { max-width: 1100px; margin: 0 auto; padding: 0 16px 60px; } /* --------------------------------------------------------------------- Topbar / navigatie --------------------------------------------------------------------- */ .topbar { background: var(--kleur-wit); border-bottom: 1px solid var(--kleur-rand); position: sticky; top: 0; z-index: 20; } .topbar-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; flex-wrap: wrap; } .logo { font-weight: 700; text-decoration: none; color: var(--kleur-tekst); font-size: 1.1rem; } .menu-toggle { display: flex; flex-direction: column; justify-content: space-between; width: 26px; height: 20px; background: none; border: none; cursor: pointer; padding: 0; } .menu-toggle span { display: block; height: 2px; background: var(--kleur-tekst); border-radius: 2px; } .hoofdnav { display: none; flex-direction: column; width: 100%; gap: 4px; margin-top: 10px; } .hoofdnav.open { display: flex; } .hoofdnav a { text-decoration: none; color: var(--kleur-tekst); padding: 10px 12px; border-radius: var(--radius); } .hoofdnav a.actief, .hoofdnav a:hover { background: var(--kleur-achtergrond); color: var(--kleur-primair); } .hoofdnav .nav-gebruiker { padding: 10px 12px; color: var(--kleur-subtiel); font-size: 0.9rem; } .hoofdnav .nav-uitloggen { font-weight: 600; } @media (min-width: 800px) { .menu-toggle { display: none; } .hoofdnav { display: flex !important; flex-direction: row; align-items: center; width: auto; margin-top: 0; } .hoofdnav .nav-gebruiker { margin-left: 8px; } } /* --------------------------------------------------------------------- Flash-berichten --------------------------------------------------------------------- */ .flash { padding: 12px 16px; border-radius: var(--radius); margin: 16px 0; font-size: 0.95rem; } .flash-succes { background: var(--kleur-groen-bg); color: var(--kleur-groen-tekst); } .flash-fout { background: var(--kleur-rood-bg); color: var(--kleur-rood-tekst); } .flash-waarschuwing { background: var(--kleur-geel-bg); color: var(--kleur-geel-tekst); } .flash-info { background: var(--kleur-blauw-bg); color: var(--kleur-blauw-tekst); } /* --------------------------------------------------------------------- Auth-schermen --------------------------------------------------------------------- */ .auth-scherm { max-width: 400px; margin: 40px auto; background: var(--kleur-wit); padding: 24px; border-radius: var(--radius); border: 1px solid var(--kleur-rand); } .auth-formulier { display: flex; flex-direction: column; gap: 4px; } /* --------------------------------------------------------------------- Formulieren (algemeen) --------------------------------------------------------------------- */ label { font-weight: 600; font-size: 0.9rem; margin-top: 12px; display: block; } input, select, textarea, button { font-family: inherit; font-size: 1rem; } input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=month], select, textarea { width: 100%; padding: 10px 12px; margin-top: 4px; border: 1px solid var(--kleur-rand); border-radius: var(--radius); background: var(--kleur-wit); color: var(--kleur-tekst); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--kleur-primair); outline-offset: 1px; } .checkbox-label, .checkbox-label-klein { display: flex; align-items: center; gap: 6px; font-weight: 500; margin-top: 10px; } .checkbox-label input, .checkbox-label-klein input { width: auto; margin: 0; } .checkbox-label-klein { font-size: 0.85rem; color: var(--kleur-subtiel); margin-top: 4px; } fieldset { border: 1px solid var(--kleur-rand); border-radius: var(--radius); margin-top: 14px; padding: 10px 12px; } legend { font-weight: 600; padding: 0 4px; } .btn { display: inline-block; padding: 12px 20px; border-radius: var(--radius); border: none; font-weight: 600; cursor: pointer; text-decoration: none; text-align: center; } .btn-primary { background: var(--kleur-primair); color: #fff; } .btn-primary:hover { background: var(--kleur-primair-donker); } .btn-secundair { background: var(--kleur-wit); color: var(--kleur-tekst); border: 1px solid var(--kleur-rand); } .link-knop { background: none; border: none; color: var(--kleur-primair); cursor: pointer; padding: 4px 0; text-decoration: underline; font-size: 0.9rem; } .link-knop-gevaar { color: var(--kleur-rood); } .btn-tekstlink { background: none; border: none; color: var(--kleur-primair); cursor: pointer; padding: 8px 0; font-weight: 600; } .inline-form { display: inline-block; margin: 0 6px 0 0; } .acties-cel { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; } /* --------------------------------------------------------------------- Panelen en kaarten --------------------------------------------------------------------- */ .paneel { background: var(--kleur-wit); border: 1px solid var(--kleur-rand); border-radius: var(--radius); padding: 16px; margin: 20px 0; } .kaarten-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 16px 0; } @media (min-width: 640px) { .kaarten-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .kaarten-grid { grid-template-columns: repeat(5, 1fr); } } .kaart { background: var(--kleur-wit); border: 1px solid var(--kleur-rand); border-left: 4px solid var(--kleur-primair); border-radius: var(--radius); padding: 14px 16px; } .kaart h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--kleur-subtiel); margin-bottom: 6px; } .kaart-groot { font-size: 1.6rem; font-weight: 700; margin: 0; } .kaart-groot.negatief { color: var(--kleur-rood); } .kaart-sub { color: var(--kleur-subtiel); font-size: 0.85rem; margin: 2px 0 0; } .kaart-details { list-style: none; padding: 0; margin: 10px 0 0; font-size: 0.85rem; color: var(--kleur-subtiel); } .kaart-details li { padding: 2px 0; } /* --------------------------------------------------------------------- Formulieren: uren-invoer --------------------------------------------------------------------- */ .uren-formulier, .instellingen-formulier { display: grid; grid-template-columns: 1fr; gap: 4px 16px; } @media (min-width: 640px) { .uren-formulier, .instellingen-formulier { grid-template-columns: 1fr 1fr; } .veld-breed { grid-column: 1 / -1; } } .instellingen-formulier-inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .instellingen-formulier-inline label { margin-top: 0; } .instellingen-formulier-inline input { width: auto; } .snelknoppen { display: flex; gap: 6px; margin-top: 6px; } .btn-snel { padding: 8px 14px; border: 1px solid var(--kleur-rand); background: var(--kleur-wit); border-radius: var(--radius); cursor: pointer; font-weight: 600; } .btn-snel:hover { background: var(--kleur-achtergrond); } .formulier-acties { grid-column: 1 / -1; display: flex; gap: 10px; margin-top: 16px; } .kopieer-formulier { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--kleur-rand); } .kopieer-formulier label { margin-top: 0; } .kopieer-formulier input { width: auto; margin-top: 0; } .jaar-selector, .maand-selector { display: flex; align-items: center; gap: 8px; margin: 12px 0; flex-wrap: wrap; } .jaar-selector label, .maand-selector label { margin-top: 0; } .jaar-selector select, .maand-selector input, .maand-selector select { width: auto; margin-top: 0; } /* --------------------------------------------------------------------- Tabellen --------------------------------------------------------------------- */ .tabel-scroll { overflow-x: auto; margin-top: 8px; } .data-tabel { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 560px; } .data-tabel th, .data-tabel td { padding: 8px 10px; border-bottom: 1px solid var(--kleur-rand); text-align: left; white-space: nowrap; } .data-tabel td:nth-child(6), .data-tabel td.opmerking-cel { white-space: normal; } .data-tabel thead th { color: var(--kleur-subtiel); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; } .data-tabel tfoot td { font-weight: 700; border-top: 2px solid var(--kleur-tekst); border-bottom: none; } .lege-staat { background: var(--kleur-achtergrond); border: 1px dashed var(--kleur-rand); border-radius: var(--radius); padding: 16px; color: var(--kleur-subtiel); } /* --------------------------------------------------------------------- Badges (kleurcodering per type) --------------------------------------------------------------------- */ .badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; color: #fff; white-space: nowrap; } .badge-gewerkt { background: var(--kleur-gewerkt); } .badge-overuren { background: var(--kleur-overuren); } .badge-vakantie { background: var(--kleur-vakantie); } .badge-adv { background: var(--kleur-adv); } .badge-overuren-opname { background: var(--kleur-overuren-opname); } .badge-afwezig { background: var(--kleur-afwezig); } .badge-feestdag { background: var(--kleur-feestdag); } .badge-afgehandeld { background: var(--kleur-afgehandeld); } .badge-globaal { background: var(--kleur-globaal); } .tekst-rood { color: var(--kleur-rood); font-weight: 600; } .tekst-groen { color: var(--kleur-groen); font-weight: 600; } .tekst-subtiel { color: var(--kleur-subtiel); font-size: 0.88rem; } /* --------------------------------------------------------------------- Week-invoer --------------------------------------------------------------------- */ .week-navigatie { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 12px 0; } .week-label { font-weight: 600; } .week-dag { margin: 14px 0; } .week-tabel input, .week-tabel select { margin-top: 0; } .week-totaal { font-size: 1.1rem; margin: 20px 0; } .nieuwe-regel-template { background: var(--kleur-achtergrond); } /* --------------------------------------------------------------------- Rapportage — CSS-staafdiagram --------------------------------------------------------------------- */ .staafdiagram-cel { min-width: 160px; } .staaf-balk-achtergrond { background: var(--kleur-achtergrond); border-radius: 4px; height: 14px; overflow: hidden; width: 100%; } .staaf-balk { background: var(--kleur-primair); height: 100%; border-radius: 4px; } /* --------------------------------------------------------------------- Projecten (instellingen) --------------------------------------------------------------------- */ .project-grid { display: grid; grid-template-columns: 1fr; gap: 6px; margin-top: 10px; } .project-grid-koppen { display: none; font-size: 0.8rem; text-transform: uppercase; color: var(--kleur-subtiel); font-weight: 600; } .project-grid-rij { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 10px; background: var(--kleur-achtergrond); border-radius: var(--radius); } .project-grid-rij input { margin-top: 0; } .project-grid-acties-extra { display: flex; gap: 12px; padding: 0 10px 10px; margin-top: -8px; } @media (min-width: 720px) { .project-grid-koppen, .project-grid-rij { grid-template-columns: 140px 1fr 100px 120px; align-items: center; } .project-grid-koppen { display: grid; padding: 0 10px; } } /* --------------------------------------------------------------------- Maandstaat / print --------------------------------------------------------------------- */ .maandstaat-acties { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 12px 0 20px; } .maandstaat { background: var(--kleur-wit); border: 1px solid var(--kleur-rand); border-radius: var(--radius); padding: 20px; } .maandstaat-header { border-bottom: 2px solid var(--kleur-tekst); padding-bottom: 10px; margin-bottom: 16px; } .maandstaat-totalen { margin-top: 20px; max-width: 400px; } .maandstaat-voettekst { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--kleur-rand); font-size: 0.9rem; } @media print { .no-print, .topbar, .voettekst, .maandstaat-acties { display: none !important; } body, .inhoud { background: #fff; margin: 0; padding: 0; } .maandstaat { border: none; padding: 0; } .data-tabel th, .data-tabel td { color: #000 !important; border-color: #999; } .badge { color: #000 !important; background: none !important; border: 1px solid #333; } a { color: #000; text-decoration: none; } } /* --------------------------------------------------------------------- Footer --------------------------------------------------------------------- */ .voettekst { text-align: center; color: var(--kleur-subtiel); font-size: 0.8rem; padding: 30px 0 10px; } .bulk-details { margin-top: 20px; } .bulk-formulier { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 10px; } .bulk-formulier label { margin-top: 0; } .bulk-formulier input { width: auto; margin-top: 0; }