/* ================================================================= Logboek — CSS systeem Mobile-first. Breakpoint naar desktop bij ~1100px. Theme via data-theme attribuut op : 'light', 'dark', of leeg (= auto, volg systeem). Default licht. Palet: warm beige met goud-accent (light), donkerblauw met goud- accent (dark). Professional, een tikkie maritiem. ================================================================= */ :root, :root[data-theme="light"] { --fg: #1a1a1a; --muted: #6b6b6b; --bg: #eef3f4; --card: #ffffff; --card-alt: #e0eaeb; --border: rgba(16, 122, 138, 0.14); --border-strong: rgba(16, 122, 138, 0.30); /* Petrol-blauw uit het Spaarnelanden logo */ --accent: #107a8a; --accent-fg: #ffffff; --accent-soft: rgba(16, 122, 138, 0.10); --accent-strong: #0a5a68; /* Lime-groen uit het accent-streepje van het logo */ --secondary: #7cba3d; --secondary-soft: rgba(124, 186, 61, 0.14); --secondary-strong: #5a942a; /* Storing/alarm: warm oranjerood */ --danger: #d8541f; --danger-bg: #fdebe0; --danger-fg: #b33d10; /* In behandeling: warm mosterd */ --warn-bg: #fdf3dc; --warn-fg: #8a6010; --warn-strong: #e8a92e; /* Opgelost / success: lime-groen */ --success-bg: #e8f4d6; --success-fg: #5a942a; --shadow: 0 1px 3px rgba(16, 80, 90, 0.06), 0 2px 8px rgba(16, 80, 90, 0.04); --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; color-scheme: light; } :root[data-theme="dark"] { /* Diepe petrol-basis (matcht Spaarnelanden brand maar dark) — alle hues blijven gelijk aan light, alleen lightness omgedraaid */ --fg: #e6ebec; --muted: #8a969a; --bg: #0c1518; --card: #142025; --card-alt: #1c2c33; --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.18); /* Petrol-blauw als primaire accent, lichter voor contrast op donker */ --accent: #5fb4c4; --accent-fg: #0c1518; --accent-soft: rgba(95, 180, 196, 0.14); --accent-strong: #7cc7d4; /* Lime-groen voor secondary/extern */ --secondary: #a3d062; --secondary-soft: rgba(163, 208, 98, 0.16); --secondary-strong: #b9e07a; /* Storing/alarm: helder oranjerood */ --danger: #ed7748; --danger-bg: rgba(237, 119, 72, 0.18); --danger-fg: #f59575; /* In behandeling: warme mosterd */ --warn-bg: rgba(232, 184, 96, 0.16); --warn-fg: #f0cd84; --warn-strong: #e8b860; /* Opgelost / success: lime */ --success-bg: rgba(163, 208, 98, 0.14); --success-fg: #b9e07a; --shadow: 0 1px 3px rgba(0,0,0,0.5), 0 4px 14px rgba(0,0,0,0.4); color-scheme: dark; } /* Auto: gebruik systeem-voorkeur als geen data-theme is gezet */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --fg: #e6ebec; --muted: #8a969a; --bg: #0c1518; --card: #142025; --card-alt: #1c2c33; --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.18); --accent: #5fb4c4; --accent-fg: #0c1518; --accent-soft: rgba(95, 180, 196, 0.14); --accent-strong: #7cc7d4; --secondary: #a3d062; --secondary-soft: rgba(163, 208, 98, 0.16); --secondary-strong: #b9e07a; --danger: #ed7748; --danger-bg: rgba(237, 119, 72, 0.18); --danger-fg: #f59575; --warn-bg: rgba(232, 184, 96, 0.16); --warn-fg: #f0cd84; --warn-strong: #e8b860; --success-bg: rgba(163, 208, 98, 0.14); --success-fg: #b9e07a; --shadow: 0 1px 3px rgba(0,0,0,0.5), 0 4px 14px rgba(0,0,0,0.4); color-scheme: dark; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; margin: 0; line-height: 1.6; color: var(--fg); background: var(--bg); -webkit-tap-highlight-color: transparent; } body.centered { display: grid; place-items: center; min-height: 100vh; } body.centered .container { max-width: 360px; padding: 1.25rem; } .container { max-width: 720px; margin: 0 auto; padding: 1.25rem 1rem 4rem; } /* ------ typografie ------ */ h1 { font-size: 1.4rem; font-weight: 500; margin: 0 0 0.5rem; line-height: 1.3; color: var(--accent-strong); } h2 { font-size: 0.95rem; font-weight: 500; margin: 1.75rem 0 0.5rem; color: var(--muted); } h3 { font-size: 1rem; font-weight: 500; margin: 0 0 0.25rem; } .lede { color: var(--muted); margin: 0 0 2rem; } @media (min-width: 768px) { .container { max-width: 960px; padding: 2rem 2rem 4rem; } h1 { font-size: 1.7rem; } } code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; background: var(--card); padding: 2px 6px; border-radius: var(--r-sm); font-size: 0.88em; border: 1px solid var(--border); } a { color: var(--accent); } /* ------ topbar ------ */ .topbar { background: var(--card); color: var(--fg); border-bottom: 3px solid var(--secondary); position: sticky; top: 0; z-index: 10; } .topbar-inner { max-width: 960px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 1rem; font-size: 0.9rem; } .topbar-logo { flex-shrink: 0; display: inline-flex; align-items: center; } .topbar-logo img { height: 32px; width: auto; display: block; } /* Donker thema: het donkere logo wordt onzichtbaar tegen donkere achtergrond. CSS-filter inverteert + brightens om 'm leesbaar te maken. Niet ideaal kleurmatig, maar werkt op dezelfde PNG. */ :root[data-theme="dark"] .topbar-logo img { filter: brightness(0) invert(1) opacity(0.92); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .topbar-logo img { filter: brightness(0) invert(1) opacity(0.92); } } .topbar-divider { width: 1px; height: 24px; background: var(--border); } .topbar-app-name { font-weight: 500; color: var(--accent-strong); white-space: nowrap; } .topbar-id { display: flex; align-items: center; gap: 0.4rem; min-width: 0; color: var(--fg); } .topbar-id strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-role { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; } .topbar-actions { display: flex; align-items: center; gap: 0.5rem; } .topbar-actions .btn-link { color: var(--accent); font-size: 0.85rem; } .topbar-actions .btn-link:hover { color: var(--accent-strong); } .btn-icon { background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0.3rem 0.5rem; font-size: 1rem; color: var(--fg); cursor: pointer; line-height: 1; } .btn-icon:hover { border-color: var(--border-strong); background: var(--accent-soft); } #theme-toggle .theme-icon-light { display: inline; } #theme-toggle .theme-icon-dark { display: none; } :root[data-theme="dark"] #theme-toggle .theme-icon-light { display: none; } :root[data-theme="dark"] #theme-toggle .theme-icon-dark { display: inline; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) #theme-toggle .theme-icon-light { display: none; } :root:not([data-theme]) #theme-toggle .theme-icon-dark { display: inline; } } .badge { display: inline-block; padding: 2px 8px; border-radius: var(--r-sm); font-size: 0.7rem; font-weight: 500; line-height: 1.4; } .badge-centrale { background: var(--accent); color: var(--accent-fg); } .badge-status { background: var(--card); border: 1px solid var(--border-strong); } .badge-status.is-open { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); } .badge-status.is-in_behandeling { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-fg); } .badge-status.is-opgelost { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-fg); } @media (min-width: 768px) { .topbar-inner { padding: 0.75rem 2rem; } } /* ------ flash ------ */ .flash { background: var(--warn-bg); color: var(--warn-fg); padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); text-align: center; font-size: 0.9rem; } /* ------ stat-tegels ------ */ .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 2rem; } .stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0.75rem 0.875rem; min-width: 0; } .stat-num { font-size: 1.5rem; font-weight: 500; color: var(--accent); line-height: 1.2; } .stat-lbl { font-size: 0.75rem; color: var(--muted); } @media (min-width: 768px) { .stats { gap: 0.75rem; } .stat { padding: 1rem 1.25rem; } .stat-num { font-size: 1.75rem; } .stat-lbl { font-size: 0.85rem; } } /* ------ cards & lijsten ------ */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1rem; margin-bottom: 0.625rem; } .card-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.375rem; } .card-title { font-weight: 500; font-size: 1rem; line-height: 1.3; } .card-meta { font-size: 0.8rem; color: var(--muted); } .card-body { font-size: 0.95rem; margin: 0.25rem 0 0.625rem; } .section-label { font-size: 0.78rem; font-weight: 500; color: var(--muted); margin: 0 0 0.5rem 0.25rem; } .empty { text-align: center; color: var(--muted); padding: 2rem 1rem; font-size: 0.9rem; } /* ------ forms ------ */ .form-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.75rem 1.5rem; } .form-card h1 { margin-bottom: 1.25rem; text-align: center; } .form-row { margin-bottom: 0.875rem; } .form-row label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.25rem; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="time"], select, textarea { width: 100%; padding: 0.55rem 0.75rem; font: inherit; font-size: 16px; /* voorkomt iOS-zoom */ color: var(--fg); background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(90, 138, 90, 0.2); } textarea { resize: vertical; min-height: 80px; line-height: 1.5; } .form-error { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); border-radius: var(--r-md); padding: 0.5rem 0.75rem; margin-bottom: 1rem; font-size: 0.9rem; } /* ------ buttons ------ */ .btn { display: inline-block; padding: 0.625rem 1rem; font: inherit; font-size: 0.95rem; font-weight: 500; color: var(--accent-fg); background: var(--accent); border: none; border-radius: var(--r-md); cursor: pointer; text-decoration: none; line-height: 1.3; transition: opacity 0.1s; } .btn:hover { opacity: 0.9; } .btn:active { transform: scale(0.98); } .btn:disabled { opacity: 0.5; cursor: default; } .btn-block { width: 100%; } .btn-secondary { color: var(--fg); background: var(--card); border: 1px solid var(--border-strong); } .btn-link { background: none; border: none; color: var(--muted); cursor: pointer; font: inherit; font-size: 0.85rem; padding: 0.25rem 0.5rem; text-decoration: underline; } .btn-link:hover { color: var(--fg); } /* ------ next-block (homepage) ------ */ .next { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem 1.25rem; } .next p { margin: 0.5rem 0; } .next p:first-child { margin-top: 0; } .next p:last-child { margin-bottom: 0; } ul { padding-left: 1.25rem; margin: 0; } li { margin: 0.25rem 0; } /* ------ install-prompt floater ------ */ .install-prompt { position: fixed; bottom: 1rem; left: 1rem; right: 1rem; background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: 0.875rem 1rem; display: none; align-items: center; gap: 0.625rem; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 100; font-size: 0.9rem; } .install-prompt.is-visible { display: flex; } .install-prompt-text { flex: 1; min-width: 0; } .install-prompt-text strong { display: block; } .install-prompt-text small { color: var(--muted); } /* Push-prompt staat boven install-prompt — voldoende gap zodat ze nooit overlappen, ongeacht install-prompt-hoogte. Op desktop ook stacked rechtsonder. (v62 fix) */ .push-prompt-stacked { bottom: auto; top: 1rem; } @media (min-width: 768px) { .install-prompt { left: auto; right: 1rem; max-width: 360px; } .push-prompt-stacked { top: auto; bottom: 7rem; /* boven install-prompt op desktop */ } } /* ------ HTMX swap-indicator ------ */ .htmx-indicator { display: none; } .htmx-request .htmx-indicator { display: inline-block; } .htmx-request.htmx-indicator { display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; } /* ------ Centralist UI (mobile / klein scherm) ------ */ .centralist-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: 1.5rem; } @media (min-width: 900px) { .centralist-grid { grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: start; } } .centralist-col { min-width: 0; } /* ============================================================ DESKTOP centralist-view (Full HD, 1920x1080 doelgericht) 3-koloms layout: status-board | tijdlijn | invoer/checklist ============================================================ */ /* Header — sticky bovenaan, helder */ .centralist-head { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin: 0 0 1.25rem; padding-top: 0.5rem; flex-wrap: wrap; } .centralist-head h1 { margin: 0; font-size: 1.4rem; font-weight: 500; letter-spacing: -0.01em; } .centralist-head-l { display: flex; align-items: baseline; gap: 0.875rem; flex-wrap: wrap; min-width: 0; } .centralist-head-l .lede { margin: 0; font-size: 0.875rem; color: var(--muted); } .centralist-head-r { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .centralist-head-r .btn { padding: 0.45rem 0.9rem; font-size: 0.875rem; white-space: nowrap; } #clock { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--fg); } /* Grid: 1-koloms default, 3-koloms boven 1100px (DevTools-vriendelijk) */ .centralist-desktop { display: grid; grid-template-columns: 1fr; gap: 1rem; } .container-wide { max-width: none !important; padding-left: 1rem !important; padding-right: 1rem !important; } @media (min-width: 1100px) { .centralist-desktop { grid-template-columns: 280px minmax(0, 1fr) 320px; gap: 1rem; align-items: start; } } @media (min-width: 1400px) { .container-wide { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } .centralist-desktop { grid-template-columns: 320px minmax(0, 1fr) 360px; gap: 1.25rem; } } @media (min-width: 1700px) { .container-wide { padding-left: 2rem !important; padding-right: 2rem !important; } .centralist-desktop { grid-template-columns: 340px minmax(0, 1fr) 400px; gap: 1.5rem; } } .centralist-aside-l, .centralist-aside-r { display: flex; flex-direction: column; gap: 0.875rem; min-width: 0; } .centralist-main { min-width: 0; } /* === Status-board (links) === */ .status-board { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } .status-board-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--border); background: var(--card-alt); } .status-board-head h2 { font-size: 0.72rem !important; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 500; margin: 0 !important; } .status-board-head .card-meta { font-size: 0.72rem; } .status-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; table-layout: fixed; /* belangrijk: voorkomt dat lange namen kolommen verschuiven */ } .status-table th { padding: 0.45rem 0.5rem; text-align: left; font-weight: 500; color: var(--muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--border); } .status-col-st, .status-col-ext, .status-col-fs { width: 2.5rem; text-align: center !important; } .status-col-fs { width: 3.2rem; } .status-table td { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); vertical-align: middle; } .status-table tbody tr:last-child td { border-bottom: none; } .status-table tbody tr:hover td { background: var(--accent-soft); } .status-table tr.has-storing td.status-loc { font-weight: 500; } .status-st, .status-ext, .status-fs { text-align: center; } .status-loc { display: flex; align-items: center; gap: 0.5rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .status-loc-link { color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid transparent; transition: border-color 0.1s, color 0.1s; } .status-loc-link:hover { color: var(--accent); border-bottom-color: var(--accent); } /* Type-stippen voor locaties */ .loc-type-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .loc-type-parkeergarage { background: #4a6a8a; } .loc-type-fietsenstalling { background: var(--accent); } .loc-type-depot { background: #a0593c; } .loc-type-overig { background: var(--muted); } /* Status pills */ .status-pill { display: inline-block; padding: 1px 6px; border-radius: var(--r-sm); font-size: 0.68rem; font-weight: 500; line-height: 1.5; min-width: 1.4em; font-variant-numeric: tabular-nums; } .status-pill-warn { background: var(--danger-bg); color: var(--danger); } .status-pill-info { background: var(--warn-bg); color: var(--warn-fg); } .status-pill-ok { background: var(--success-bg); color: var(--success-fg); } .status-pill-muted { background: var(--bg); color: var(--muted); border: 1px solid var(--border); } /* === Excel-stijl 3-kolom tijdlijn === */ .timeline-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.875rem; margin-top: 0; } @media (max-width: 1099px) { .timeline-cols { grid-template-columns: 1fr; gap: 0.875rem; } } .timeline-col { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; min-height: 200px; } .timeline-col-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); background: var(--card-alt); flex-shrink: 0; } .timeline-col-head h3 { margin: 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 500; } .timeline-col-empty { padding: 2rem 0.75rem; text-align: center; font-style: italic; font-size: 0.85rem; color: var(--muted); } .timeline-col-events { list-style: none; margin: 0; padding: 0.5rem; overflow-y: auto; max-height: calc(100vh - 220px); display: flex; flex-direction: column; gap: 0.4rem; } /* === Tijdlijn event-card === Layout: [meta-kolom 56px] [content 1fr] Compacte card met type-indicator als linker rand. */ .tl-event { display: grid; grid-template-columns: 56px 1fr; gap: 0.5rem; padding: 0.5rem 0.625rem 0.5rem 0.625rem; background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--muted); border-radius: var(--r-sm); font-size: 0.85rem; line-height: 1.4; transition: background 0.1s, border-color 0.1s; list-style: none; } .tl-event.is-clickable { cursor: pointer; } .tl-event.is-clickable:hover { background: var(--accent-soft); border-color: var(--border-strong); } .tl-event-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; padding-top: 1px; min-width: 0; } .tl-event-time { font-variant-numeric: tabular-nums; color: var(--fg); font-size: 0.78rem; font-weight: 500; } .tl-event-tag { font-size: 0.65rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .tl-event-content { display: flex; flex-direction: column; min-width: 0; } .tl-event-title { color: var(--fg); font-size: 0.875rem; line-height: 1.35; overflow-wrap: anywhere; } .tl-event-title strong { font-weight: 500; } .tl-event-sub { color: var(--muted); font-size: 0.78rem; line-height: 1.35; overflow-wrap: anywhere; margin-top: 0.1rem; } /* Locatie-label — net zo prominent als de storing-titel zelf. Wordt gebruikt in storing/alarm tijdlijn-cards. (v62) */ .tl-event-loc { display: inline-block; color: var(--fg); font-size: 0.85rem; font-weight: 600; line-height: 1.35; margin-top: 0.15rem; } .tl-event-detail { color: var(--muted); font-size: 0.78rem; line-height: 1.35; margin-top: 0.1rem; } .tl-event-actor { color: var(--muted); font-size: 0.7rem; margin-top: 0.2rem; font-style: italic; } .tl-event-note { color: var(--muted); font-style: italic; } /* Type-indicators (border-left kleur per type) */ .tl-event.tl-type-storing { border-left-color: var(--danger); } .tl-event.tl-type-storing-event-opgepakt { border-left-color: var(--warn-strong); } .tl-event.tl-type-storing-event-opgelost { border-left-color: var(--secondary); } .tl-event.tl-type-storing-event-overgedragen { border-left-color: var(--muted); } .tl-event.tl-type-storing-event-vrijgegeven { border-left-color: var(--warn-strong); } .tl-event.tl-type-storing-event-heropend { border-left-color: var(--danger); } .tl-event.tl-type-kpk { border-left-color: var(--accent); } .tl-event.tl-type-abonnement { border-left-color: var(--accent); } .tl-event.tl-type-mededeling { border-left-color: var(--warn-strong); } .tl-event.tl-type-extern_bedrijf { border-left-color: var(--secondary); } .tl-event.tl-type-dakloze { border-left-color: var(--muted); } .tl-event.tl-type-geen_betaalmogelijkheid { border-left-color: var(--muted); } .tl-event.tl-type-alarm { border-left-color: var(--danger); border-left-width: 4px; } /* === Invoer-blokken rechts: collapsible details === */ .invoer-block { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } .invoer-block > summary { padding: 0.55rem 0.875rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); background: var(--card-alt); cursor: pointer; user-select: none; list-style: none; font-weight: 500; } .invoer-block > summary strong { color: var(--muted); font-weight: 500; } .invoer-block > summary::-webkit-details-marker { display: none; } .invoer-block > summary::before { content: '▸'; display: inline-block; margin-right: 0.5rem; color: var(--muted); transition: transform 0.15s; font-size: 0.7rem; } .invoer-block[open] > summary::before { transform: rotate(90deg); } .invoer-block[open] > summary { border-bottom: 1px solid var(--border); } .invoer-block > .card, .invoer-block > section { margin: 0; border: none; border-radius: 0; } .invoer-block > .invoer-block-body { padding: 0.875rem; } .invoer-block .card { padding: 0.875rem !important; } .invoer-block .form-row { margin-bottom: 0.625rem; } .invoer-block .form-row label { font-size: 0.75rem; color: var(--muted); margin-bottom: 0.2rem; } .invoer-block input, .invoer-block select, .invoer-block textarea { font-size: 14px; padding: 0.4rem 0.6rem; } .invoer-block .btn { font-size: 0.85rem; padding: 0.5rem 0.875rem; } /* Aanwezig en checklist secties op desktop iets compacter */ .centralist-aside-r section h2 { font-size: 0.72rem !important; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.625rem !important; padding: 0; } .centralist-aside-r section .card { padding: 0.75rem !important; margin-bottom: 0.5rem !important; } /* === Edit form in modal === */ .entry-edit-form { padding-top: 0.5rem; } .entry-edit-actions { display: flex; gap: 0.5rem; align-items: center; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); } .entry-edit-actions .btn-link { margin-left: auto; } /* === Storing-status-blok in modal === */ .storing-status-block { background: var(--card-alt); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0.875rem 1rem; margin: 0.875rem 0; display: flex; flex-direction: column; gap: 0.625rem; } .storing-status-head { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; } .storing-status-head .card-meta:first-child { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.7rem; } .storing-events { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); padding-left: 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; } .storing-event { display: grid; grid-template-columns: 5em 1fr; gap: 0.5rem; align-items: baseline; font-size: 0.85rem; line-height: 1.4; } .storing-event time { font-variant-numeric: tabular-nums; font-size: 0.78rem; } .storing-event-text strong { font-weight: 500; } .storing-event-aangemaakt { color: var(--fg); } .storing-event-opgepakt { color: var(--warn-fg); } .storing-event-opgelost { color: var(--success-fg); } .storing-event-overgedragen { color: var(--muted); } .storing-event-heropend { color: var(--danger); } .storing-terugkoppeling { background: var(--bg); border-left: 2px solid var(--success-fg); padding: 0.5rem 0.75rem; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 0.875rem; line-height: 1.45; } .storing-terugkoppeling .card-meta { display: block; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.65rem; margin-bottom: 0.25rem; } .storing-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; } .storing-resolve-details { flex: 1; min-width: 240px; } .storing-resolve-details > summary { list-style: none; cursor: pointer; user-select: none; text-align: center; width: 100%; } .storing-resolve-details > summary::-webkit-details-marker { display: none; } .storing-resolve-details[open] > summary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .storing-resolve-form { margin-top: 0.625rem; display: flex; flex-direction: column; gap: 0.5rem; } .storing-resolve-form label { font-size: 0.78rem; color: var(--muted); } .storing-resolve-form textarea { padding: 0.5rem 0.625rem; font-size: 0.875rem; resize: vertical; } .storing-resolve-form .btn { align-self: flex-start; } .btn-danger { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); } .btn-danger:hover { background: var(--danger); color: white; } .entry-modal-close { font-size: 1.5rem !important; line-height: 1 !important; padding: 0 !important; } /* === Openstaand-blok in linker kolom (desktop) === */ .centralist-aside-l h2 { font-size: 0.72rem !important; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 0.625rem !important; padding: 0 0.125rem; } .centralist-aside-l .openstaand-list { gap: 0.375rem; margin-bottom: 0; } .centralist-aside-l .openstaand-row { padding: 0.5rem 0.625rem; font-size: 0.82rem; } .centralist-aside-l .empty { padding: 1rem 0.5rem; font-size: 0.85rem; } /* Persistent openstaand-blok */ .openstaand-list { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 1rem; } .openstaand-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); text-decoration: none; color: inherit; font-size: 0.9rem; width: 100%; text-align: left; cursor: pointer; font-family: inherit; transition: border-color 0.1s, background 0.1s; } .openstaand-row:hover { border-color: var(--border-strong); background: var(--accent-soft); } .openstaand-row strong { white-space: nowrap; } .openstaand-row .card-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } /* Tijdlijn */ .tijdlijn { list-style: none; padding: 0; margin: 0; } .tijdlijn li { display: grid; grid-template-columns: auto auto 1fr; gap: 0.5rem; align-items: baseline; padding: 0.5rem 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; } .tijdlijn li:last-child { border-bottom: none; } .tijdlijn-time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.85rem; min-width: 3em; } .tijdlijn-dienst { font-size: 0.7rem; min-width: 4em; } .tijdlijn-body { line-height: 1.5; word-wrap: break-word; min-width: 0; } /* Checklist */ .checklist { display: flex; flex-direction: column; gap: 0.25rem; } .checklist-row { display: grid; grid-template-columns: 1fr auto auto; gap: 0.5rem; align-items: center; padding: 0.375rem 0; border-bottom: 1px solid var(--border); } .checklist-row:last-child { border-bottom: none; } .checklist-label { font-size: 0.9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .checklist-btn { padding: 0.3rem 0.6rem; font-size: 0.8rem; min-width: 4em; border-radius: var(--r-sm); } .checklist-btn.is-done { background: var(--success-bg); color: var(--success-fg); border-color: var(--success-fg); font-variant-numeric: tabular-nums; } /* Wrapper rond de knop + edit-popover */ .checklist-btn-wrap { position: relative; display: inline-flex; align-items: center; } /* Edit-trigger (potlood-icoon) — klein, rechts naast de knop */ .checklist-edit { margin-left: 2px; } .checklist-edit > summary { list-style: none; cursor: pointer; font-size: 0.75rem; color: var(--muted); padding: 0.2rem 0.3rem; line-height: 1; border-radius: var(--r-sm); user-select: none; } .checklist-edit > summary::-webkit-details-marker { display: none; } .checklist-edit > summary:hover { color: var(--fg); background: var(--bg); } .checklist-edit[open] > summary { background: var(--bg); color: var(--fg); } /* Popover-form */ .checklist-edit-form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 100; background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); padding: 0.5rem; display: flex; gap: 0.4rem; align-items: center; white-space: nowrap; } .checklist-edit-form input[type="time"] { width: 6.5em; padding: 0.3rem 0.5rem; font-size: 0.9rem; background: var(--bg); border: 1px solid var(--border); color: var(--fg); border-radius: var(--r-sm); } .checklist-edit-form .btn { padding: 0.3rem 0.85rem; font-size: 0.85rem; background: var(--accent); color: var(--accent-fg); border: 1px solid var(--accent); } /* Form-status (klein toast-achtig) */ #entry-form-status:empty, #storing-form-status:empty, #extern-form-status:empty { display: none; } #entry-form-status .form-success, #storing-form-status .form-success, #extern-form-status .form-success { background: var(--success-bg); color: var(--success-fg); border: 1px solid var(--success-fg); border-radius: var(--r-md); padding: 0.5rem 0.75rem; margin-bottom: 1rem; font-size: 0.9rem; } /* details/summary collapsable */ details summary { cursor: pointer; padding: 0.25rem 0; } details summary::marker { color: var(--muted); } /* ------ Logboek scherm ------ */ .logboek-controls { display: flex; flex-direction: column; gap: 0.875rem; margin: 1rem 0 1.5rem; } .datum-nav { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .datum-nav input[type="date"] { flex: 1 1 auto; min-width: 9em; max-width: 14em; } .btn.is-disabled { opacity: 0.4; pointer-events: none; } .filter-bar { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0.5rem 0.875rem; } .filter-bar > details > summary { font-size: 0.9rem; color: var(--muted); } .filter-bar > details[open] > summary { color: var(--fg); margin-bottom: 0.875rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); } .filter-count { display: inline-block; background: var(--accent); color: var(--accent-fg); border-radius: 999px; padding: 0 7px; margin-left: 0.4rem; font-size: 0.75rem; line-height: 1.5; min-width: 1.4em; text-align: center; } .filter-row { display: grid; grid-template-columns: 7em 1fr; gap: 0.75rem; align-items: start; margin-bottom: 0.75rem; } .filter-row > label { font-size: 0.85rem; color: var(--muted); padding-top: 0.45rem; } .filter-checks { display: flex; flex-wrap: wrap; gap: 0.5rem; } .filter-check { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0.25rem 0.6rem; font-size: 0.85rem; cursor: pointer; } .filter-check input { margin: 0; } .filter-check:has(input:checked) { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); } .filter-actions { grid-template-columns: 1fr; gap: 0.5rem; margin-top: 0.5rem; } .filter-actions { display: flex; gap: 0.5rem; } @media (max-width: 600px) { .filter-row { grid-template-columns: 1fr; gap: 0.25rem; } .filter-row > label { padding-top: 0; } } /* Klikbare tijdlijn-rijen (in logboek view) */ .tijdlijn li.is-clickable { cursor: pointer; transition: background 0.1s; } .tijdlijn li.is-clickable:hover { background: var(--card); } /* Entry-detail modal — content-styling binnen .modal-overlay wrapper. v32: niet meer een , want die had te veel browser-quirks. Zie .modal-overlay onderaan voor de open/close-mechaniek. */ .entry-modal { border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--card); color: var(--fg); padding: 0; max-width: 560px; width: calc(100% - 2rem); max-height: calc(100vh - 4rem); overflow: hidden; /* houdt border-radius respect bij child-scroll */ box-shadow: 0 12px 36px rgba(0,0,0,0.25); display: flex; flex-direction: column; } /* De inhoud binnen de modal scrollt — niet de modal zelf en niet de body */ .entry-modal .entry-detail { padding: 1.25rem 1.25rem 1.5rem; overflow-y: auto; flex: 1; min-height: 0; scrollbar-gutter: stable; } .entry-detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 0.75rem; margin-bottom: 1rem; } .entry-detail-header .btn-link { font-size: 1.5rem; line-height: 1; padding: 0; } .entry-detail h3 { font-size: 0.85rem; color: var(--muted); margin: 1.25rem 0 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500; } .entry-fields { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; margin: 0; font-size: 0.92rem; } .entry-fields dt { color: var(--muted); font-family: ui-monospace, monospace; font-size: 0.85rem; align-self: baseline; } .entry-fields dd { margin: 0; word-wrap: break-word; min-width: 0; } .entry-events { list-style: none; padding: 0; margin: 0; font-size: 0.92rem; } .entry-events li { padding: 0.25rem 0; } /* ------ Admin scherm ------ */ .admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.5rem; } .admin-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.25rem; text-decoration: none; color: inherit; transition: border-color 0.1s; display: block; } .admin-card:hover { border-color: var(--accent); } .admin-card h2 { margin: 0 0 0.5rem; color: var(--fg); font-size: 1rem; } .admin-card-num { font-size: 1.75rem; font-weight: 500; color: var(--accent); line-height: 1.2; margin-bottom: 0.25rem; } /* Admin-tegels die een knop bevatten (demo, wis-data) — toon de knop onderin de tegel, niet de hele tegel als clicktarget. */ .admin-card-action { display: flex; flex-direction: column; } .admin-card-action .card-meta { flex: 1; margin-bottom: 0.875rem; } .admin-card-action .btn { width: 100%; } .admin-card-action:hover { border-color: var(--border-strong); } /* Demo-mode actief: tegel duidelijker markeren */ .admin-card-action.demo-on { border-color: var(--success-fg); background: var(--success-bg); } .admin-card-action.demo-on:hover { border-color: var(--success-fg); } /* Demo-banner — bovenaan elke pagina als demo aan staat. Mobile-first compact: alleen kop + admin-link op smal scherm, uitleg-tekst verschijnt vanaf 520px breed. */ .demo-banner { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; background: var(--warn-bg); border-bottom: 1px solid var(--warn-fg); color: var(--warn-fg); font-size: 0.78rem; line-height: 1.3; flex-wrap: nowrap; min-width: 0; } .demo-banner-dot { color: var(--warn-fg); animation: demo-pulse 2s ease-in-out infinite; flex-shrink: 0; } .demo-banner strong { font-weight: 600; flex-shrink: 0; white-space: nowrap; } .demo-banner-meta { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .demo-banner-link { margin-left: auto; color: var(--warn-fg); text-decoration: underline; flex-shrink: 0; padding-left: 0.5rem; white-space: nowrap; } @keyframes demo-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* Smal scherm: meta-tekst verbergen, alleen kop + link tonen */ @media (max-width: 520px) { .demo-banner-meta { display: none; } .demo-banner { padding: 0.35rem 0.625rem; font-size: 0.74rem; gap: 0.3rem; } } /* Iets groter scherm: volledige tekst maar compact gehouden */ @media (min-width: 521px) { .demo-banner { padding: 0.45rem 1rem; font-size: 0.82rem; gap: 0.5rem; } } .admin-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; font-size: 0.92rem; } .admin-table th, .admin-table td { padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; } .admin-table thead th { background: var(--bg); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 500; } .admin-table tbody tr:last-child td { border-bottom: none; } .admin-table tbody tr.is-inactive { opacity: 0.55; } .admin-table .admin-actions { white-space: nowrap; } .admin-table .admin-actions form { margin-right: 0.5rem; } .admin-table input[type="text"], .admin-table select { padding: 0.25rem 0.5rem; font-size: 0.9rem; } .badge-ok { background: var(--success-bg); color: var(--success-fg); border: 1px solid var(--success-fg); } .badge-info { background: var(--warn-bg); color: var(--warn-fg); border: 1px solid var(--warn-fg); } /* Op smal scherm: admin-table wordt gewoon scrollable horizontaal */ @media (max-width: 640px) { .admin-table { display: block; overflow-x: auto; white-space: nowrap; } } /* === Alarm-knop in centralist-header === */ .btn-alarm { background: var(--danger); color: #fff; border-color: var(--danger); font-weight: 500; box-shadow: 0 0 0 1px var(--danger); animation: alarm-glow 2s ease-in-out infinite; } .btn-alarm:hover { background: #b22e2e; border-color: #b22e2e; } @keyframes alarm-glow { 0%, 100% { box-shadow: 0 0 0 1px var(--danger); } 50% { box-shadow: 0 0 0 4px rgba(216, 75, 75, 0.25); } } /* === Alarm-modal === content-styling binnen .modal-overlay wrapper */ .alarm-dialog { border: 2px solid var(--danger); border-radius: var(--r-lg); background: var(--card); color: var(--fg); padding: 0; max-width: 560px; width: 92vw; } .alarm-dialog-content { padding: 1.25rem 1.5rem 1.5rem; } .alarm-type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-top: 0.5rem; } .alarm-type-option { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.875rem; border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; background: var(--card-alt); font-size: 0.95rem; transition: border-color 0.1s, background 0.1s; } .alarm-type-option:hover { border-color: var(--danger); } .alarm-type-option:has(input:checked) { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); font-weight: 500; } .alarm-type-option input { margin: 0; } /* === Alarm-event card in tijdlijn === */ .tl-event.tl-type-alarm { border-left: 3px solid var(--danger); background: var(--danger-bg); border-color: var(--danger); } .tl-event.tl-type-alarm .tl-event-title { color: var(--danger); font-weight: 500; } /* === Dienstnamen-balk === */ .dienstnamen-balk { margin-bottom: 1rem; } .dienstnamen-row { display: flex; align-items: center; gap: 1.5rem; padding: 0.5rem 0.875rem; background: var(--card-alt); border: 1px solid var(--border); border-radius: var(--r-md); font-size: 0.875rem; flex-wrap: wrap; } .dienstnamen-item { display: flex; align-items: baseline; gap: 0.5rem; } .dienstnamen-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 500; } .dienstnamen-tel { color: var(--accent); text-decoration: none; font-variant-numeric: tabular-nums; } .dienstnamen-tel:hover { text-decoration: underline; } .dienstnamen-edit { margin-left: auto; font-size: 0.85rem; } .topbar-actions a.btn-link { padding: 0 0.25rem; } /* =========================================================== 2FA setup pagina =========================================================== */ .setup-steps { list-style: none; counter-reset: step; padding: 0; margin: 1.5rem 0 0; } .setup-steps > li { counter-increment: step; position: relative; padding-left: 3rem; margin-bottom: 2rem; min-height: 2.5rem; } .setup-steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background: var(--accent); color: var(--accent-fg); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; } .setup-steps h3 { margin-top: 0; } .qr-block { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; margin-top: 0.5rem; } .qr-fallback { flex: 1; min-width: 200px; } .totp-secret { display: inline-block; padding: 0.5rem 0.75rem; background: var(--card-alt); border: 1px solid var(--border); border-radius: var(--r-sm); font-family: ui-monospace, "Courier New", monospace; font-size: 0.95rem; letter-spacing: 0.05em; word-break: break-all; user-select: all; } /* =========================================================== Data-tabellen (audit-log) =========================================================== */ .data-table { border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } .data-table th, .data-table td { padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; } .data-table thead th { background: var(--card-alt); font-weight: 500; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr:hover { background: var(--accent-soft); } .data-table code { background: var(--card-alt); padding: 1px 5px; border-radius: 3px; font-family: ui-monospace, monospace; } /* =========================================================== Tijdlijn groep-headers (sortering: storingen → snelinvoer → extern) =========================================================== */ /* Desktop 3-kolom: groep-kop binnen elke dienst-kolom */ .timeline-group { margin-bottom: 0.5rem; } .timeline-group:last-child { margin-bottom: 0; } .timeline-group-head { padding: 0.25rem 0.625rem; background: var(--card-alt); color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 0.4rem; display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem; } .timeline-group-head .card-meta { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 0.7rem; } .timeline-group .timeline-col-events { margin: 0; } /* Mobile single-column: tijdlijn-groep-kop voor groepen */ .tijdlijn-groep-kop { margin: 1.25rem 0 0.4rem; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); padding-bottom: 3px; border-bottom: 1.5px solid var(--secondary); display: flex; justify-content: space-between; align-items: baseline; } .tijdlijn-groep-kop:first-child { margin-top: 0.5rem; } .tijdlijn-groep-kop .card-meta { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); } /* ===================================================================== TIJDLIJN-SECTIONS — drie aparte gekleurde panelen per groep (Storingen / Snelle invoer / Externe bedrijven), elk met eigen 3-koloms grid (ochtend / middag / nacht) of stacked-list voor mobile. ===================================================================== */ .tl-sections { display: flex; flex-direction: column; gap: 1rem; margin: 0.5rem 0 1.5rem; } /* === Section card === */ .tl-section { background: var(--card); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 1px 2px rgba(16, 80, 90, 0.04), 0 4px 14px rgba(16, 80, 90, 0.06); border: 1px solid rgba(0, 0, 0, 0.04); transition: box-shadow 0.15s ease; } .tl-section:hover { box-shadow: 0 1px 2px rgba(16, 80, 90, 0.06), 0 6px 20px rgba(16, 80, 90, 0.08); } /* === Section header — vol-gekleurd, witte tekst === */ .tl-section-head { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 1rem; color: #fff; font-weight: 600; border-bottom: 3px solid rgba(0, 0, 0, 0.18); } .tl-section-icon { font-size: 1.15rem; line-height: 1; opacity: 0.95; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)); } .tl-section-titel { margin: 0; flex: 1; font-size: 0.92rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; } .tl-section-totaal { background: rgba(255, 255, 255, 0.22); color: #fff; font-size: 0.78rem; padding: 2px 11px; border-radius: 11px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 1.6rem; text-align: center; } /* === Per-groep kleuridentiteit (header) === */ .tl-section-storing .tl-section-head { background: linear-gradient(135deg, #d8541f 0%, #b33d10 100%); } .tl-section-snelinvoer .tl-section-head { background: linear-gradient(135deg, #107a8a 0%, #0a5a68 100%); } .tl-section-extern .tl-section-head { background: linear-gradient(135deg, #7cba3d 0%, #5a942a 100%); } /* === 3-koloms grid binnen elke section (desktop) === */ .tl-section-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: rgba(0, 0, 0, 0.06); } @media (max-width: 1099px) { .tl-section-grid { grid-template-columns: 1fr; background: transparent; gap: 0; } } /* === Een kolom binnen een section (per dienst) === */ .tl-section-col { background: var(--card); padding: 0.75rem 0.875rem 0.875rem; min-height: 90px; display: flex; flex-direction: column; } .tl-section-col-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem; padding-bottom: 0.4rem; border-bottom: 1px dashed rgba(0, 0, 0, 0.12); } .tl-section-col-naam { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 700; } .tl-section-col-aantal { font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); } /* Per-section accent op de kolom-aantal-cijfer */ .tl-section-storing .tl-section-col-aantal { color: #d8541f; } .tl-section-snelinvoer .tl-section-col-aantal { color: #107a8a; } .tl-section-extern .tl-section-col-aantal { color: #5a942a; } .tl-section-col-leeg { color: var(--muted); opacity: 0.7; font-size: 0.78rem; font-style: italic; text-align: center; padding: 0.875rem 0; } .tl-section-col-events { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } /* Stacked variant (mobile-tijdlijn, logboek): één lijst onder elkaar */ .tl-sections-stacked .tl-section-list { list-style: none; margin: 0; padding: 0.625rem; display: flex; flex-direction: column; gap: 0.4rem; } .tl-sections-stacked .tl-section-leeg { color: var(--muted); opacity: 0.75; font-size: 0.85rem; font-style: italic; text-align: center; padding: 1.25rem 1rem; } /* ===================================================================== EVENT-CARDS — per groep eigen tinted background ===================================================================== */ .tl-event { background: var(--card); border: 1px solid rgba(0, 0, 0, 0.08); border-left: 3px solid var(--muted); border-radius: var(--r-sm); padding: 0.5rem 0.7rem 0.6rem; /* v34: card-content vertikaal gestackt — meta-rij (tijd + status) boven content (titel/sub/actor/lifecycle). Voorheen stond meta links naast content in een 2-koloms grid; bij smalle kolommen wikkelde tekst dan in onleesbare flarden. */ display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.82rem; transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease; } .tl-event.is-clickable { cursor: pointer; } .tl-event.is-clickable:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(16, 80, 90, 0.10); } /* Per-section card-tint (subtiele warme/koele achtergrond) */ .tl-section-storing .tl-event { background: #fff7f3; border-color: #f3c8b3; } .tl-section-snelinvoer .tl-event { background: #f0f8fa; border-color: #c5e0e6; } .tl-section-extern .tl-event { background: #f3faea; border-color: #cee7b0; } /* Border-left kleur bewaart van de oude tl-type-* classes */ .tl-event.tl-type-storing { border-left-color: var(--danger); border-left-width: 4px; } .tl-event.tl-type-storing-event-opgepakt { border-left-color: var(--warn-strong); } .tl-event.tl-type-storing-event-opgelost { border-left-color: var(--secondary); } .tl-event.tl-type-storing-event-overgedragen{ border-left-color: var(--muted); } .tl-event.tl-type-storing-event-vrijgegeven { border-left-color: var(--warn-strong); } .tl-event.tl-type-storing-event-heropend { border-left-color: var(--danger); } .tl-event.tl-type-kpk { border-left-color: var(--accent); } .tl-event.tl-type-abonnement { border-left-color: var(--accent); } .tl-event.tl-type-mededeling { border-left-color: var(--warn-strong); } .tl-event.tl-type-extern_bedrijf { border-left-color: var(--secondary); } .tl-event.tl-type-dakloze { border-left-color: var(--muted); } .tl-event.tl-type-geen_betaalmogelijkheid { border-left-color: var(--muted); } .tl-event.tl-type-alarm { border-left-color: var(--danger); border-left-width: 5px; } /* Storing-status border-link gemixt met status */ .tl-event.is-status-open { border-left-color: var(--danger); } .tl-event.is-status-in_behandeling { border-left-color: var(--warn-strong); } .tl-event.is-status-opgelost { border-left-color: var(--secondary); opacity: 0.78; } .tl-event-meta { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .tl-event-time { font-weight: 700; font-size: 0.86rem; font-variant-numeric: tabular-nums; color: var(--fg); } .tl-event-tag { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; line-height: 1.1; } .tl-event-status { display: inline-block; font-size: 0.66rem; padding: 1px 7px; border-radius: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.4; white-space: nowrap; } .tl-status-open { background: var(--danger-bg); color: var(--danger-fg); } .tl-status-in_behandeling { background: var(--warn-bg); color: var(--warn-fg); } .tl-status-opgelost { background: var(--success-bg); color: var(--success-fg); } .tl-event-content { min-width: 0; } .tl-event-title { font-size: 0.86rem; font-weight: 500; line-height: 1.3; color: var(--fg); } .tl-event-title strong { font-weight: 700; } .tl-event-sub { color: var(--muted); font-size: 0.76rem; margin-top: 1px; line-height: 1.3; } /* Locatie prominent (v62) — gebruikt in storing/alarm cards */ .tl-event-loc { display: inline-block; color: var(--fg); font-size: 0.85rem; font-weight: 600; line-height: 1.3; margin-top: 2px; } .tl-event-detail { color: var(--muted); font-size: 0.76rem; line-height: 1.3; margin-top: 1px; } .tl-event-actor { color: var(--muted); opacity: 0.85; font-size: 0.7rem; font-style: italic; margin-top: 2px; } .tl-event-note { color: var(--muted); font-style: italic; } /* ===================================================================== OPENSTAAND-blok — krachtigere visuele kop + per-row meta ===================================================================== */ .openstaand-kop { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0 0.625rem; font-size: 1rem; font-weight: 600; color: var(--fg); } .openstaand-icon { color: var(--danger); font-size: 1.05rem; line-height: 1; } .openstaand-aantal { background: var(--danger); color: #fff; font-size: 0.72rem; padding: 2px 9px; border-radius: 10px; font-weight: 700; font-variant-numeric: tabular-nums; } .empty-success { color: var(--success-fg); background: var(--success-bg); padding: 0.625rem 0.875rem; border-radius: var(--r-sm); font-size: 0.85rem; border-left: 3px solid var(--success-fg); } .openstaand-row { display: flex; flex-direction: column; gap: 0.3rem; text-align: left; padding: 0.625rem 0.875rem; background: var(--card); border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--r-sm); cursor: pointer; transition: transform 0.1s ease, box-shadow 0.1s ease; width: 100%; font-size: inherit; color: inherit; font-family: inherit; } .openstaand-row:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(216, 84, 31, 0.10); } .openstaand-row.openstaand-status-open { border-left-color: var(--danger); background: #fff7f3; } .openstaand-row.openstaand-status-in_behandeling { border-left-color: var(--warn-strong); background: #fdf8e8; } .openstaand-row-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; } .openstaand-row-leeftijd { font-variant-numeric: tabular-nums; font-size: 0.75rem; font-weight: 700; color: var(--muted); background: rgba(0, 0, 0, 0.06); padding: 1px 8px; border-radius: 8px; } .openstaand-row.openstaand-status-open .openstaand-row-leeftijd { color: var(--danger-fg); background: var(--danger-bg); } .openstaand-row.openstaand-status-in_behandeling .openstaand-row-leeftijd { color: var(--warn-fg); background: var(--warn-bg); } .openstaand-row-titel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; line-height: 1.3; } .openstaand-row-titel strong { font-size: 0.92rem; color: var(--fg); } .openstaand-row-omschrijving { color: var(--muted); font-size: 0.82rem; } .openstaand-row-foot { display: flex; flex-wrap: wrap; gap: 0.875rem; font-size: 0.74rem; color: var(--muted); margin-top: 1px; } .openstaand-row-start, .openstaand-row-door { display: inline-flex; align-items: center; gap: 0.25rem; font-variant-numeric: tabular-nums; } /* ===================================================================== LOGBOEK-rows — voor terugkijken in historie ===================================================================== */ .logboek-titel { margin: 0.5rem 0 1rem; font-size: 1.15rem; font-weight: 600; color: var(--accent-strong); } .logboek-row { display: grid; grid-template-columns: 4em 5em 1fr; gap: 0.625rem; padding: 0.5rem 0.625rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: 0.85rem; align-items: baseline; transition: background 0.1s ease; } .logboek-row.is-clickable { cursor: pointer; } .logboek-row.is-clickable:hover { background: var(--accent-soft); } .logboek-row-tijd { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--fg); } .logboek-row-dienst { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; } .logboek-row-body { color: var(--fg); line-height: 1.4; } /* ===================================================================== v15 — Centralist header + datum-context + extra meta ===================================================================== */ /* Datum prominent in centralist header */ .centralist-head-datum { font-weight: 600; color: var(--accent-strong); text-transform: capitalize; } .centralist-head-shift { font-weight: 500; color: var(--accent); } .centralist-head-klok { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--fg); } /* Begonnen-regel onder een storing lifecycle-event */ .tl-event-start { color: var(--muted); font-size: 0.72rem; margin-top: 2px; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 0.2rem; } /* Checklist + aanwezig wrapper-meta (datum + shift, of teller) */ .checklist-meta, .aanwezig-meta { text-transform: capitalize; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--accent); } /* Aanwezig-cards (externe bedrijven binnen) — duidelijker */ .aanwezig-list { display: flex; flex-direction: column; gap: 0.5rem; } .aanwezig-card { background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--secondary); border-radius: var(--r-sm); padding: 0.5rem 0.75rem; display: flex; flex-direction: column; gap: 0.2rem; } .aanwezig-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; } .aanwezig-card-head strong { font-size: 0.92rem; color: var(--fg); } .aanwezig-leeftijd { font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--secondary-strong); background: var(--secondary-soft); padding: 1px 8px; border-radius: 8px; } .aanwezig-card-meta { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 0.25rem; } .aanwezig-card-opmerking { font-size: 0.8rem; color: var(--fg); font-style: italic; padding: 0.25rem 0; } .aanwezig-card .btn-sm { margin-top: 0.4rem; align-self: flex-start; padding: 0.25rem 0.75rem; font-size: 0.78rem; } /* Aanwezig - inboek details (uitvouwbaar formulier) */ .aanwezig-inboek summary { color: var(--accent); cursor: pointer; padding: 0.4rem 0; } .aanwezig-inboek summary:hover { color: var(--accent-strong); } /* ===================================================================== v15 — Openstaand boven Storingen-sectie: meer prominentie ===================================================================== */ #openstaand-section { margin-bottom: 1rem; } /* Card-grid voor openstaand wanneer er meerdere zijn (op breed scherm) */ @media (min-width: 700px) { .openstaand-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.625rem; } } /* Subtiele animatie bij update (HTMX swap) */ #openstaand-section.htmx-added .openstaand-row { animation: openstaand-fade-in 0.3s ease; } @keyframes openstaand-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* Btn klein-formaat hergebruik */ .btn.btn-sm { padding: 0.25rem 0.75rem; font-size: 0.78rem; } /* ===================================================================== v15 — Carry-over uit oude systeem (overgenomen storingen) ===================================================================== */ .tl-carryover { background: #fff8e8; border-bottom: 1px solid rgba(0, 0, 0, 0.06); padding: 0.5rem 0.875rem 0.625rem; } .tl-carryover-kop { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: #8a6010; font-weight: 700; margin-bottom: 0.5rem; } .tl-carryover-aantal { background: #e8a92e; color: #fff; font-size: 0.7rem; padding: 1px 8px; border-radius: 9px; font-weight: 700; margin-left: auto; } .tl-carryover-list { display: flex; flex-direction: column; gap: 0.3rem; } .tl-carryover-row { display: grid; grid-template-columns: auto auto 1fr auto auto; gap: 0.5rem; align-items: center; padding: 0.4rem 0.625rem; background: #fff; border: 1px solid #f0d8a0; border-left: 3px solid #e8a92e; border-radius: var(--r-sm); cursor: pointer; text-align: left; font-family: inherit; font-size: 0.82rem; color: var(--fg); transition: transform 0.1s ease, box-shadow 0.1s ease; } .tl-carryover-row:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(232, 169, 46, 0.18); } .tl-carryover-row.tl-carryover-status-open { border-left-color: var(--danger); } .tl-carryover-row strong { font-size: 0.86rem; white-space: nowrap; } .tl-carryover-omschr { color: var(--muted); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .tl-carryover-leeftijd { font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--warn-fg); background: var(--warn-bg); padding: 1px 7px; border-radius: 8px; white-space: nowrap; } .tl-carryover-start { font-size: 0.72rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } @media (max-width: 700px) { .tl-carryover-row { grid-template-columns: auto 1fr auto; grid-template-areas: "badge garage leeftijd" "omschr omschr omschr" "start start start"; } .tl-carryover-row .badge { grid-area: badge; } .tl-carryover-row strong { grid-area: garage; } .tl-carryover-row .tl-carryover-omschr { grid-area: omschr; white-space: normal; } .tl-carryover-row .tl-carryover-leeftijd { grid-area: leeftijd; } .tl-carryover-row .tl-carryover-start { grid-area: start; } } /* ===================================================================== v15 — Storing-event delete + hele storing wissen ===================================================================== */ /* Prullenbak-knop naast elk lifecycle-event */ .storing-event { display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem; align-items: center; padding: 0.35rem 0.5rem; } .storing-event-del { background: transparent; border: 1px solid transparent; color: var(--muted); cursor: pointer; padding: 0.2rem 0.4rem; border-radius: var(--r-sm); font-size: 0.95rem; line-height: 1; transition: all 0.1s ease; } .storing-event-del:hover { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger); } /* "Hele storing wissen" sectie — bewust weggemoffeld */ .storing-volledig-wissen { margin-top: 1rem; padding-top: 0.625rem; border-top: 1px dashed var(--border); } .storing-volledig-wissen summary { cursor: pointer; color: var(--muted); font-size: 0.82rem; padding: 0.25rem 0; list-style: none; transition: color 0.1s ease; } .storing-volledig-wissen summary:hover { color: var(--danger); } .storing-volledig-wissen summary::-webkit-details-marker { display: none; } .storing-wissen-uitleg { background: var(--danger-bg); color: var(--danger-fg); padding: 0.625rem 0.875rem; border-radius: var(--r-sm); font-size: 0.82rem; margin: 0.5rem 0 0.625rem; line-height: 1.5; } .storing-volledig-wissen[open] summary { color: var(--danger); font-weight: 600; } /* ===================================================================== v20 — DARK MODE: consistent palet ===================================================================== */ /* Helper macro: dark + auto-dark in één regel via :where() voor lage specificity */ :root[data-theme="dark"], :where(:root:not([data-theme])) { /* placeholder, alle echte rules gebruiken duplicate selectors hieronder zodat we op auto-detectie kunnen filteren */ } /* === Topbar-logo-invert blijft, accent-kleur logo nog vetter === */ /* === Section card-tints: subtiele kleur-zweem ipv aparte donkere blokken === */ :root[data-theme="dark"] .tl-section-storing .tl-event { background: rgba(237, 119, 72, 0.06); border-color: rgba(237, 119, 72, 0.18); } :root[data-theme="dark"] .tl-section-snelinvoer .tl-event { background: rgba(95, 180, 196, 0.05); border-color: rgba(95, 180, 196, 0.16); } :root[data-theme="dark"] .tl-section-extern .tl-event { background: rgba(163, 208, 98, 0.05); border-color: rgba(163, 208, 98, 0.16); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .tl-section-storing .tl-event { background: rgba(237, 119, 72, 0.06); border-color: rgba(237, 119, 72, 0.18); } :root:not([data-theme]) .tl-section-snelinvoer .tl-event { background: rgba(95, 180, 196, 0.05); border-color: rgba(95, 180, 196, 0.16); } :root:not([data-theme]) .tl-section-extern .tl-event { background: rgba(163, 208, 98, 0.05); border-color: rgba(163, 208, 98, 0.16); } } /* === Section column-aantallen: gebruik var() === */ :root[data-theme="dark"] .tl-section-storing .tl-section-col-aantal { color: var(--danger); } :root[data-theme="dark"] .tl-section-snelinvoer .tl-section-col-aantal { color: var(--accent); } :root[data-theme="dark"] .tl-section-extern .tl-section-col-aantal { color: var(--secondary); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .tl-section-storing .tl-section-col-aantal { color: var(--danger); } :root:not([data-theme]) .tl-section-snelinvoer .tl-section-col-aantal { color: var(--accent); } :root:not([data-theme]) .tl-section-extern .tl-section-col-aantal { color: var(--secondary); } } /* === Section grid-divider lichter in dark === */ :root[data-theme="dark"] .tl-section-grid { background: rgba(255, 255, 255, 0.06); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .tl-section-grid { background: rgba(255, 255, 255, 0.06); } } /* === Section-headers: in dark dezelfde gradients (krachtig + leesbaar) === */ :root[data-theme="dark"] .tl-section-storing .tl-section-head { background: linear-gradient(135deg, #b04318 0%, #8a3010 100%); } :root[data-theme="dark"] .tl-section-snelinvoer .tl-section-head { background: linear-gradient(135deg, #2a6a78 0%, #1a4d58 100%); } :root[data-theme="dark"] .tl-section-extern .tl-section-head { background: linear-gradient(135deg, #5a9032 0%, #3f6e22 100%); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .tl-section-storing .tl-section-head { background: linear-gradient(135deg, #b04318 0%, #8a3010 100%); } :root:not([data-theme]) .tl-section-snelinvoer .tl-section-head { background: linear-gradient(135deg, #2a6a78 0%, #1a4d58 100%); } :root:not([data-theme]) .tl-section-extern .tl-section-head { background: linear-gradient(135deg, #5a9032 0%, #3f6e22 100%); } } /* === Carry-over banner: subtiel mosterd in dark === */ :root[data-theme="dark"] .tl-carryover { background: rgba(232, 184, 96, 0.07); border-bottom-color: rgba(255, 255, 255, 0.06); } :root[data-theme="dark"] .tl-carryover-kop { color: var(--warn-fg); } :root[data-theme="dark"] .tl-carryover-aantal { background: var(--warn-strong); color: #1a1208; } :root[data-theme="dark"] .tl-carryover-row { background: var(--card-alt); border-color: rgba(232, 184, 96, 0.22); } :root[data-theme="dark"] .tl-carryover-leeftijd { color: var(--warn-fg); background: var(--warn-bg); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .tl-carryover { background: rgba(232, 184, 96, 0.07); border-bottom-color: rgba(255, 255, 255, 0.06); } :root:not([data-theme]) .tl-carryover-kop { color: var(--warn-fg); } :root:not([data-theme]) .tl-carryover-aantal { background: var(--warn-strong); color: #1a1208; } :root:not([data-theme]) .tl-carryover-row { background: var(--card-alt); border-color: rgba(232, 184, 96, 0.22); } :root:not([data-theme]) .tl-carryover-leeftijd { color: var(--warn-fg); background: var(--warn-bg); } } /* === Openstaand-rows (legacy, voor het geval ze nog ergens gebruikt worden) === */ :root[data-theme="dark"] .openstaand-row.openstaand-status-open { background: rgba(237, 119, 72, 0.10); } :root[data-theme="dark"] .openstaand-row.openstaand-status-in_behandeling { background: rgba(232, 184, 96, 0.08); } :root[data-theme="dark"] .openstaand-row-leeftijd { background: rgba(255, 255, 255, 0.08); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .openstaand-row.openstaand-status-open { background: rgba(237, 119, 72, 0.10); } :root:not([data-theme]) .openstaand-row.openstaand-status-in_behandeling { background: rgba(232, 184, 96, 0.08); } :root:not([data-theme]) .openstaand-row-leeftijd { background: rgba(255, 255, 255, 0.08); } } /* === Status-pills via vars (werkt automatisch door nieuwe palet-vars) === */ /* (geen aparte regels nodig — tl-status-* gebruikt al --danger-bg, --warn-bg, --success-bg) */ /* === Aanwezig-cards (externe bedrijven binnen) === */ :root[data-theme="dark"] .aanwezig-card { background: var(--card-alt); border-color: var(--border); } :root[data-theme="dark"] .aanwezig-leeftijd { color: var(--secondary-strong); background: var(--secondary-soft); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .aanwezig-card { background: var(--card-alt); border-color: var(--border); } :root:not([data-theme]) .aanwezig-leeftijd { color: var(--secondary-strong); background: var(--secondary-soft); } } /* === Logboek-row hover === */ :root[data-theme="dark"] .logboek-row { background: var(--card-alt); border-color: var(--border); } :root[data-theme="dark"] .logboek-row.is-clickable:hover { background: var(--accent-soft); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .logboek-row { background: var(--card-alt); border-color: var(--border); } :root:not([data-theme]) .logboek-row.is-clickable:hover { background: var(--accent-soft); } } /* === Hover lift voor event-cards === */ :root[data-theme="dark"] .tl-event.is-clickable:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .tl-event.is-clickable:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); } } /* (Modal-backdrop styling staat nu op .modal-overlay — zie onderaan) */ /* === Storing-events list in modal === */ :root[data-theme="dark"] .storing-event { border-color: var(--border); } :root[data-theme="dark"] .storing-volledig-wissen .storing-wissen-uitleg { background: var(--danger-bg); color: var(--danger-fg); border: 1px solid rgba(237, 119, 72, 0.4); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .storing-event { border-color: var(--border); } :root:not([data-theme]) .storing-volledig-wissen .storing-wissen-uitleg { background: var(--danger-bg); color: var(--danger-fg); border: 1px solid rgba(237, 119, 72, 0.4); } } /* === Section column-head divider lichter === */ :root[data-theme="dark"] .tl-section-col-head { border-bottom-color: rgba(255, 255, 255, 0.10); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .tl-section-col-head { border-bottom-color: rgba(255, 255, 255, 0.10); } } /* === Storing-event delete-knop === */ :root[data-theme="dark"] .storing-event-del { color: var(--muted); } :root[data-theme="dark"] .storing-event-del:hover { background: var(--danger-bg); color: var(--danger-fg); border-color: rgba(237, 119, 72, 0.4); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .storing-event-del { color: var(--muted); } :root:not([data-theme]) .storing-event-del:hover { background: var(--danger-bg); color: var(--danger-fg); border-color: rgba(237, 119, 72, 0.4); } } /* === Body bg subtiele radial gradient voor diepte === */ :root[data-theme="dark"] body { background: radial-gradient(ellipse at top, rgba(95, 180, 196, 0.04) 0%, transparent 60%), var(--bg); background-attachment: fixed; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) body { background: radial-gradient(ellipse at top, rgba(95, 180, 196, 0.04) 0%, transparent 60%), var(--bg); background-attachment: fixed; } } /* === Inputs en form-fields beter zichtbaar in dark === */ :root[data-theme="dark"] input[type="text"], :root[data-theme="dark"] input[type="email"], :root[data-theme="dark"] input[type="password"], :root[data-theme="dark"] input[type="time"], :root[data-theme="dark"] input[type="date"], :root[data-theme="dark"] input[type="number"], :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { background: var(--card-alt); color: var(--fg); border-color: var(--border-strong); } :root[data-theme="dark"] input:focus, :root[data-theme="dark"] textarea:focus, :root[data-theme="dark"] select:focus { outline: 2px solid var(--accent); outline-offset: -1px; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) input[type="text"], :root:not([data-theme]) input[type="email"], :root:not([data-theme]) input[type="password"], :root:not([data-theme]) input[type="time"], :root:not([data-theme]) input[type="date"], :root:not([data-theme]) input[type="number"], :root:not([data-theme]) textarea, :root:not([data-theme]) select { background: var(--card-alt); color: var(--fg); border-color: var(--border-strong); } :root:not([data-theme]) input:focus, :root:not([data-theme]) textarea:focus, :root:not([data-theme]) select:focus { outline: 2px solid var(--accent); outline-offset: -1px; } } /* === Scrollbar styling in dark mode === */ :root[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; } :root[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg); } :root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--card-alt); border-radius: 6px; border: 2px solid var(--bg); } :root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) ::-webkit-scrollbar { width: 12px; height: 12px; } :root:not([data-theme]) ::-webkit-scrollbar-track { background: var(--bg); } :root:not([data-theme]) ::-webkit-scrollbar-thumb { background: var(--card-alt); border-radius: 6px; border: 2px solid var(--bg); } :root:not([data-theme]) ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } } /* === Topbar in dark: blijft donker met accent-kleur === */ :root[data-theme="dark"] .topbar { background: var(--card); border-bottom: 3px solid var(--accent); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .topbar { background: var(--card); border-bottom: 3px solid var(--accent); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } } /* ===================================================================== v21 — Modal-header met prominent startmoment Datums en tijdstippen zijn essentieel — staan groot bovenaan. ===================================================================== */ .entry-detail-header-main { flex: 1; min-width: 0; } /* Startmoment: het belangrijkste element in de header */ .entry-detail-startmoment { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; color: var(--accent-strong); font-variant-numeric: tabular-nums; } .entry-detail-startmoment-icon { font-size: 1.1rem; line-height: 1; color: var(--accent); } .entry-detail-startmoment-tekst { font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; text-transform: capitalize; line-height: 1.15; } .entry-detail-titel { margin: 0 0 0.4rem; font-size: 1.05rem; font-weight: 500; line-height: 1.3; color: var(--fg); } .entry-detail-locatie { color: var(--muted); font-weight: 400; } .entry-detail-meta { font-size: 0.78rem; color: var(--muted); line-height: 1.3; } /* Dark-mode aanpassingen */ :root[data-theme="dark"] .entry-detail-startmoment { color: var(--accent-strong); } :root[data-theme="dark"] .entry-detail-startmoment-icon { color: var(--accent); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .entry-detail-startmoment { color: var(--accent-strong); } :root:not([data-theme]) .entry-detail-startmoment-icon { color: var(--accent); } } /* Lifecycle-event tijden in modal: prominenter dan card-meta */ .storing-event-tijd { font-size: 0.85rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg); text-transform: capitalize; white-space: nowrap; } /* ===================================================================== v23 — Centralisten-balk: handmatig wie er de dienst draait ===================================================================== */ /* Centralisten-balk: ALTIJD horizontaal — label + 3 shift-buttons in 1 rij, ongeacht viewport. Grid met auto-label + 3 gelijke kolommen. */ .centralisten-balk { display: grid; grid-template-columns: auto 1fr 1fr 1fr; align-items: stretch; gap: 0.4rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0.4rem 0.6rem; margin-bottom: 0.75rem; box-shadow: var(--shadow); } .centralisten-balk-label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--muted); padding: 0 0.5rem 0 0.25rem; border-right: 1px solid var(--border); white-space: nowrap; } .centralisten-balk-datum { font-size: 0.7rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--accent); font-variant-numeric: tabular-nums; } /* Eén veld per shift — klikbaar. min-width:0 + overflow:hidden zodat het bij smal scherm krimpt ipv naar volgende rij wraps. */ .centralisten-veld { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.4rem 0.55rem; background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; text-align: left; font-family: inherit; color: inherit; transition: background 0.1s ease, border-color 0.1s ease; overflow: hidden; } .centralisten-veld:hover { background: var(--accent-soft); border-color: var(--accent); } .centralisten-veld.is-current { background: var(--accent-soft); border-color: var(--accent); border-left: 3px solid var(--accent); padding-left: calc(0.7rem - 2px); } .centralisten-veld-shift { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--muted); } .centralisten-veld.is-current .centralisten-veld-shift { color: var(--accent-strong); } /* Kleine pulsing dot voor "nu" */ .centralisten-veld-now-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(16, 122, 138, 0.4); animation: now-pulse 2.4s ease-out infinite; } @keyframes now-pulse { 0% { box-shadow: 0 0 0 0 rgba(16, 122, 138, 0.5); } 70% { box-shadow: 0 0 0 8px rgba(16, 122, 138, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 122, 138, 0); } } .centralisten-veld-naam { font-size: 0.95rem; font-weight: 600; color: var(--fg); line-height: 1.2; } .centralisten-veld.is-current .centralisten-veld-naam { color: var(--accent-strong); } .centralisten-veld-leeg { font-size: 0.8rem; font-style: italic; color: var(--muted); } /* Mobile: stacked */ /* Smal scherm: kompakter — maar BLIJF horizontaal (grid-layout zorgt daarvoor). */ @media (max-width: 700px) { .centralisten-balk { gap: 0.3rem; padding: 0.35rem 0.4rem; } .centralisten-balk-label { font-size: 0.65rem; padding: 0 0.35rem 0 0.15rem; } .centralisten-veld { padding: 0.3rem 0.4rem; } .centralisten-veld-shift { font-size: 0.62rem; } .centralisten-veld-naam { font-size: 0.8rem; } .centralisten-veld-leeg { font-size: 0.7rem; } } /* Dark-mode: pulse-dot kleur aanpassen */ :root[data-theme="dark"] .centralisten-veld-now-dot { background: var(--accent); } :root[data-theme="dark"] @keyframes now-pulse { 0% { box-shadow: 0 0 0 0 rgba(95, 180, 196, 0.5); } 70% { box-shadow: 0 0 0 8px rgba(95, 180, 196, 0); } 100% { box-shadow: 0 0 0 0 rgba(95, 180, 196, 0); } } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .centralisten-veld-now-dot { background: var(--accent); } } /* ===================================================================== v27 — Centralist-modal als overlay (handgemaakt, geen ) Robuust over alle browsers — geen showModal/close API-calls. ===================================================================== */ .cent-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 9999; display: flex; align-items: flex-start; justify-content: center; padding: 4rem 1rem 1rem; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* hidden attribuut: native browser support voor display:none */ .cent-overlay[hidden] { display: none !important; } .cent-overlay-content { background: var(--card); color: var(--fg); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35); max-width: 560px; width: 100%; max-height: calc(100vh - 5rem); display: flex; flex-direction: column; overflow: hidden; } #cent-modal-content { overflow-y: auto; flex: 1; min-height: 0; scrollbar-gutter: stable; } /* Wanneer een .entry-detail binnen #cent-modal-content zit, krijgt die zelf padding */ #cent-modal-content > .entry-detail { padding: 1.25rem 1.25rem 1.5rem; } /* Voorkom body-scroll wanneer modal open is */ body.cent-modal-open { overflow: hidden; } /* Donkere variant van overlay-backdrop */ :root[data-theme="dark"] .cent-overlay { background: rgba(0, 0, 0, 0.7); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .cent-overlay { background: rgba(0, 0, 0, 0.7); } } /* ===================================================================== v32 — Generieke modal-overlay (entry-modal + alarm-modal) Zelfde mechaniek als .cent-overlay, maar voor herbruikbare modals met data-modal-close-attribuut en universele JS-handler in app.js. ===================================================================== */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 9999; display: flex; align-items: flex-start; justify-content: center; padding: 4rem 1rem 1rem; overflow-y: auto; -webkit-overflow-scrolling: touch; } .modal-overlay[hidden] { display: none !important; } /* Voorkom body-scroll wanneer modal open is */ body.modal-open { overflow: hidden; } :root[data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, 0.7); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .modal-overlay { background: rgba(0, 0, 0, 0.7); } } /* ===================================================================== v30 — Mobile: voorkom horizontaal scrollen + topbar inpassen ===================================================================== */ /* Body mag niet horizontaal scrollen - foutje in een child mag de pagina niet kapot maken op mobiel */ html, body { overflow-x: hidden; max-width: 100%; } /* Topbar compacter onder ~640px */ @media (max-width: 640px) { .topbar-inner { gap: 0.5rem; padding: 0.4rem 0.7rem; font-size: 0.85rem; } .topbar-divider { display: none; } /* App-naam: logo zegt het al, weghalen op smal scherm */ .topbar-app-name { display: none; } .topbar-actions { gap: 0.25rem; } .topbar-actions .btn-link { font-size: 0.78rem; padding: 0.25rem 0.4rem; } } /* Onder ~420px: verberg ook de role-tekst en zet user-naam compacter */ @media (max-width: 420px) { .topbar-id strong { font-size: 0.78rem; max-width: 80px; } .topbar-role { display: none; } .topbar-logo img { height: 26px; } } /* ===================================================================== v31 — Storing-bundle: lifecycle ingedrukt onder origin Voorkomt dat opgepakt/opgelost/heropend als losse cards verschijnen. ===================================================================== */ .tl-bundle-lifecycle { list-style: none; margin: 0.6rem 0 0; padding: 0.4rem 0 0.1rem 0.6rem; border-left: 2px solid var(--border-strong); display: flex; flex-direction: column; gap: 0.3rem; } .tl-bundle-event { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.78rem; line-height: 1.35; color: var(--muted); position: relative; } /* Subtiele dot links die de regel begint */ .tl-bundle-event::before { content: ''; position: absolute; left: -0.7rem; top: 0.45em; width: 5px; height: 5px; border-radius: 50%; background: var(--border-strong); } /* Specifieke dot-kleuren per event-type */ .tl-bundle-event-opgepakt::before { background: var(--warn-strong); } .tl-bundle-event-overgedragen::before { background: var(--accent); } .tl-bundle-event-vrijgegeven::before { background: var(--muted); } .tl-bundle-event-opgelost::before { background: var(--success-fg); } .tl-bundle-event-heropend::before { background: var(--danger); } .tl-bundle-event-time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--fg); flex-shrink: 0; min-width: 3rem; } .tl-bundle-event-text { flex: 1; min-width: 0; } .tl-bundle-event-actor { color: var(--muted); } .tl-bundle-event-note { color: var(--muted); font-style: italic; } /* ===================================================================== v36 — Exports landing-pagina: 4 consistente cards in een grid ===================================================================== */ .exports-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; } @media (max-width: 720px) { .exports-grid { grid-template-columns: 1fr; } } .export-card { /* gebruikt bestaande .card-styling als basis; overschrijft layout */ display: flex; flex-direction: column; gap: 0.75rem; text-decoration: none; color: inherit; padding: 1rem 1.1rem 1.1rem; transition: box-shadow 0.15s ease, transform 0.1s ease; } a.export-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(16, 80, 90, 0.12); } .export-card-head { display: flex; align-items: center; gap: 0.6rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; } .export-card-icon { font-size: 1.4rem; line-height: 1; } .export-card-titel { margin: 0; font-size: 1rem; font-weight: 600; color: var(--fg); } .export-card-omschr { margin: 0; color: var(--muted); font-size: 0.85rem; line-height: 1.45; flex: 1; } .export-card .form-row { margin: 0; } .export-card-foot { margin-top: 0.25rem; } .export-card-foot .btn { width: 100%; text-align: center; } .navigatie-kop { margin-top: 2rem; margin-bottom: 0; } /* ===================================================================== v41 — TECHNICUS-VIEW: mobile-first, technische cards Speciaal voor telefoons — grote tap-targets, hoge contrast, chips voor categorie/leeftijd, lifecycle-events ingedrukt. ===================================================================== */ .td-page { max-width: 640px; margin: 0 auto; padding: 0 0.75rem 4rem; } .td-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0.875rem 0 0.5rem; margin-bottom: 0.5rem; } .td-head-naam { font-size: 1.4rem; line-height: 1.2; } .td-head-naam .td-head-hoi { color: var(--muted); font-weight: 400; margin-right: 0.25rem; } .td-head-naam strong { color: var(--fg); font-weight: 600; } .td-head-tijd { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 1.1rem; color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; } .td-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 1.25rem; } .td-stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0.625rem 0.5rem; text-align: center; border-top: 3px solid var(--muted); } .td-stat-mijn { border-top-color: #8a6010; } .td-stat-carry { border-top-color: #b04318; } .td-stat-open { border-top-color: #d8541f; } .td-stat-klaar { border-top-color: #5a942a; } .td-stat-num { font-size: 1.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--fg); } .td-stat-lbl { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-top: 0.25rem; } .td-section { margin-bottom: 1.5rem; } .td-section-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; margin: 0 0 0.5rem; background: var(--card); border-left: 4px solid var(--accent, #107a8a); border-radius: var(--r-sm); } .td-section-icon { font-size: 1.1rem; line-height: 1; } .td-section-titel { margin: 0; flex: 1; font-size: 0.92rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent, var(--fg)); } .td-section-aantal { background: var(--accent, #107a8a); color: #fff; font-size: 0.78rem; font-weight: 700; padding: 2px 9px; border-radius: 11px; min-width: 1.6rem; text-align: center; font-variant-numeric: tabular-nums; } .td-section-uitleg { margin: 0 0 0.625rem; padding: 0 0.25rem; font-size: 0.78rem; color: var(--muted); line-height: 1.4; } .td-section-uitklap { font-size: 0.7rem; color: var(--muted); margin-left: 0.5rem; font-weight: 400; text-transform: none; letter-spacing: 0; } .td-section-klaar > summary { cursor: pointer; list-style: none; } .td-section-klaar > summary::-webkit-details-marker { display: none; } .td-card { display: block; background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--muted); border-radius: var(--r-md); padding: 0.875rem 0.875rem 0.75rem; margin-bottom: 0.625rem; text-decoration: none; color: var(--fg); transition: transform 0.08s ease, box-shadow 0.12s ease, border-color 0.1s; -webkit-tap-highlight-color: rgba(16, 80, 90, 0.15); } .td-card:hover, .td-card:active { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(16, 80, 90, 0.12); } .td-card:active { transform: translateY(0); } .td-card-open { border-left-color: #d8541f; } .td-card-in_behandeling { border-left-color: #8a6010; } .td-card-in_behandeling.td-card-mine { border-left-color: #8a6010; border-left-width: 6px; background: linear-gradient(to right, rgba(232, 169, 46, 0.08), var(--card) 12%); } .td-card-opgelost { border-left-color: #5a942a; opacity: 0.78; } .td-card-carry { background: linear-gradient(to right, rgba(176, 67, 24, 0.06), var(--card) 12%); } .td-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.625rem; margin-bottom: 0.5rem; } .td-card-loc-wrap { flex: 1; min-width: 0; } .td-card-loc { font-size: 1.1rem; font-weight: 700; line-height: 1.2; color: var(--fg); } .td-card-sub { font-size: 0.85rem; color: var(--muted); margin-top: 1px; } .td-card-status { display: inline-block; flex-shrink: 0; padding: 3px 9px; border-radius: 12px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } .td-card-status.td-status-open { background: var(--danger-bg); color: var(--danger-fg); } .td-card-status.td-status-in_behandeling { background: var(--warn-bg); color: var(--warn-fg); } .td-card-status.td-status-opgelost { background: var(--success-bg); color: var(--success-fg); } .td-card-omschr { font-size: 0.95rem; line-height: 1.4; color: var(--fg); margin-bottom: 0.5rem; word-wrap: break-word; } .td-card-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; } .td-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 3px 8px; border-radius: 10px; font-size: 0.72rem; font-weight: 600; background: rgba(0,0,0,0.04); color: var(--fg); border: 1px solid var(--border); line-height: 1.3; } .td-chip-cat { background: rgba(16, 122, 138, 0.10); color: #0a5a68; border-color: rgba(16, 122, 138, 0.3); } .td-chip-tijd { color: var(--muted); } .td-chip-dagen { background: rgba(176, 67, 24, 0.10); color: #b04318; border-color: rgba(176, 67, 24, 0.3); } .td-chip-icon { font-size: 0.95em; line-height: 1; } .td-card-meta { font-size: 0.78rem; color: var(--muted); line-height: 1.5; border-top: 1px dashed var(--border); padding-top: 0.4rem; margin-top: 0.25rem; } .td-card-meta strong { color: var(--fg); font-weight: 600; } .td-meta-label { text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.68rem; color: var(--muted); opacity: 0.85; margin-right: 2px; } .td-card-terugk { margin-top: 0.4rem; padding: 0.4rem 0.6rem; background: rgba(90, 148, 42, 0.08); border-left: 2px solid #5a942a; border-radius: var(--r-sm); font-size: 0.82rem; color: var(--fg); line-height: 1.4; } .td-card-events { margin-top: 0.5rem; padding-left: 0.625rem; border-left: 2px solid var(--border); } .td-card-event { position: relative; padding: 0.2rem 0 0.2rem 0.875rem; font-size: 0.78rem; color: var(--muted); line-height: 1.5; } .td-card-event-dot { position: absolute; left: -5px; top: 0.55rem; width: 7px; height: 7px; border-radius: 50%; border: 2px solid var(--card); } .td-card-event-tijd { font-family: ui-monospace, "SF Mono", Consolas, monospace; color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 0.25rem; } .td-card-event strong { color: var(--fg); font-weight: 600; } .td-card-event-from { color: var(--muted); opacity: 0.75; } .td-card-event-note { display: block; font-style: italic; color: var(--muted); margin-top: 1px; } .td-card-actie { margin-top: 0.625rem; padding-top: 0.5rem; border-top: 1px solid var(--border); text-align: right; } .td-card-actie-knop { display: inline-block; font-size: 0.85rem; font-weight: 600; padding: 4px 0; } .td-card-actie-prim { color: var(--accent); } .td-card-actie-sec { color: var(--muted); } .td-leeg { text-align: center; padding: 2rem 1rem; background: var(--card); border-radius: var(--r-md); border: 1px solid var(--border); margin: 1rem 0; } .td-leeg-icon { display: block; font-size: 3rem; color: #5a942a; line-height: 1; margin-bottom: 0.5rem; } .td-leeg strong { display: block; font-size: 1.05rem; color: var(--fg); margin-bottom: 0.25rem; } .td-leeg p { margin: 0; color: var(--muted); font-size: 0.85rem; } @media (max-width: 480px) { .td-page { padding: 0 0.5rem 4rem; } .td-stats { gap: 0.375rem; } .td-stat { padding: 0.5rem 0.25rem; } .td-stat-num { font-size: 1.4rem; } .td-stat-lbl { font-size: 0.65rem; } .td-card { padding: 0.75rem 0.75rem 0.625rem; } .td-card-loc { font-size: 1rem; } .td-card-omschr { font-size: 0.9rem; } } /* TD-view: alarm-sectie en -cards. Visueel apart van storingen — rode accent, pulserende rand bij brand. */ .td-section-alarm { margin-bottom: 1.25rem; } .td-section-head-alarm { background: rgba(176, 0, 32, 0.08); border-left-color: #b00020 !important; } .td-section-head-alarm .td-section-titel { color: #b00020; } .td-section-head-alarm .td-section-aantal { background: #b00020; animation: td-alarm-pulse 1.5s ease-in-out infinite; } .td-card-alarm { border: 1px solid rgba(176, 0, 32, 0.4); border-left: 5px solid #b00020; background: linear-gradient(to right, rgba(176, 0, 32, 0.08), var(--card) 14%); cursor: default; } .td-card-alarm:hover { transform: none; box-shadow: none; } .td-card-alarm.td-card-alarm-brand { border-left-color: #d8541f; } .td-card-alarm.td-card-alarm-diefstal { border-left-color: #b00020; } .td-card-alarm.td-card-alarm-politie { border-left-color: #1a4d8a; } .td-alarm-icon { display: inline-block; margin-right: 0.4rem; font-size: 1.3rem; vertical-align: -2px; } .td-card-status.td-status-alarm { background: #b00020; color: #fff; animation: td-alarm-pulse 1.5s ease-in-out infinite; } @keyframes td-alarm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* TD-alarm: afhandelen-form, ingeklapt tot user op de toggle klikt */ .td-alarm-resolve { margin-top: 0.625rem; padding-top: 0.5rem; border-top: 1px solid var(--border); } .td-alarm-resolve-toggle { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; font-size: 0.85rem; font-weight: 600; color: #5a942a; padding: 4px 10px; border: 1px solid #5a942a; border-radius: var(--r-sm); background: rgba(90, 148, 42, 0.08); list-style: none; user-select: none; transition: background 0.1s; } .td-alarm-resolve-toggle::-webkit-details-marker { display: none; } .td-alarm-resolve-toggle:hover { background: rgba(90, 148, 42, 0.18); } .td-alarm-resolve[open] .td-alarm-resolve-toggle { background: #5a942a; color: #fff; } .td-alarm-resolve-form { margin-top: 0.625rem; padding: 0.5rem 0; } .td-alarm-resolve-form label { display: block; font-size: 0.78rem; color: var(--muted); margin-bottom: 0.25rem; } .td-alarm-resolve-form textarea { width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card); color: var(--fg); font-family: inherit; font-size: 0.9rem; resize: vertical; min-height: 3rem; } .td-alarm-resolve-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .td-alarm-resolve-actions { margin-top: 0.5rem; text-align: right; } /* ===================================================================== v46 — Features-overview + handleiding pagina's ===================================================================== */ /* Features-pagina: groepen met lijst van feature-items */ .features-page { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: 1rem; } .feat-group { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem; } .feat-group-titel { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 600; color: var(--accent-strong); display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; text-transform: none; } .feat-group-icon { font-size: 1.2rem; line-height: 1; } .feat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.625rem; } .feat-item { background: var(--card-alt); border-left: 3px solid var(--accent); border-radius: var(--r-sm); padding: 0.5rem 0.75rem; } .feat-item-titel { font-weight: 600; font-size: 0.9rem; color: var(--fg); margin-bottom: 0.2rem; } .feat-item-kort { font-size: 0.8rem; color: var(--muted); line-height: 1.4; margin-bottom: 0.4rem; } .feat-item-link { display: inline-block; font-size: 0.78rem; color: var(--accent); text-decoration: none; font-weight: 600; } .feat-item-link:hover { color: var(--accent-strong); text-decoration: underline; } /* Handleiding-pagina */ .handl-toc { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r-md); padding: 0.875rem 1.25rem; margin: 1rem 0 1.5rem; font-size: 0.85rem; } .handl-toc > strong { display: block; margin-bottom: 0.5rem; color: var(--accent-strong); text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.78rem; } .handl-toc ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.5rem; } .handl-toc ul ul { columns: 1; margin: 0.25rem 0 0.5rem 0.75rem; padding: 0; } .handl-toc li { margin-bottom: 0.2rem; break-inside: avoid; } .handl-toc a { color: var(--accent); text-decoration: none; font-size: 0.82rem; } .handl-toc a:hover { text-decoration: underline; } @media (max-width: 720px) { .handl-toc ul { columns: 1; } } .handl-page { margin-top: 1rem; } .handl-group { margin-bottom: 2rem; } .handl-group-titel { font-size: 1.1rem; font-weight: 600; color: var(--accent-strong); border-bottom: 2px solid var(--secondary); padding-bottom: 0.4rem; margin: 1.5rem 0 1rem; display: flex; align-items: center; gap: 0.5rem; text-transform: none; } .handl-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem 1.25rem; margin-bottom: 0.75rem; scroll-margin-top: 4rem; } .handl-item:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .handl-item-titel { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 600; color: var(--fg); display: flex; align-items: center; gap: 0.5rem; } .handl-anchor { color: var(--muted); text-decoration: none; font-weight: 400; opacity: 0.4; font-size: 0.85em; transition: opacity 0.15s; } .handl-item:hover .handl-anchor { opacity: 1; } .handl-anchor:hover { color: var(--accent); } .handl-item-kort { margin: 0 0 0.5rem; color: var(--fg); font-size: 0.92rem; line-height: 1.5; } .handl-item-lang { margin: 0; color: var(--muted); font-size: 0.88rem; line-height: 1.55; } kbd { background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 1px 6px; font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.85em; color: var(--fg); } /* ===================================================================== v48 — Privacyverklaring + page-footer + AVG-blok op /profiel ===================================================================== */ .page-footer { max-width: 960px; margin: 2rem auto 0; padding: 1rem 1rem 1.5rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.78rem; text-align: center; display: flex; justify-content: center; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .page-footer a { color: var(--muted); text-decoration: none; } .page-footer a:hover { color: var(--accent); text-decoration: underline; } .page-footer-meta { opacity: 0.7; } /* Privacy-pagina */ .privacy-page { max-width: 760px; margin: 0 auto; } .privacy-page h1 { font-size: 1.6rem; margin-bottom: 0.5rem; } .privacy-page h2 { font-size: 1.05rem; color: var(--accent-strong); margin: 1.5rem 0 0.5rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--border); text-transform: none; letter-spacing: 0; font-weight: 600; } .privacy-page p { line-height: 1.55; color: var(--fg); } .privacy-page ul { line-height: 1.55; color: var(--fg); margin: 0.5rem 0; padding-left: 1.5rem; } .privacy-page ul li { margin: 0.25rem 0; } .privacy-verwerker { background: var(--card-alt); border-left: 3px solid var(--accent); padding: 0.75rem 1rem; border-radius: var(--r-sm); font-size: 0.88rem; line-height: 1.5; margin: 1rem 0 1.5rem; } .privacy-verwerker a { color: var(--accent); } .privacy-toc { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r-md); padding: 0.875rem 1.25rem; margin: 1rem 0 1.5rem; } .privacy-toc strong { display: block; margin-bottom: 0.4rem; color: var(--accent-strong); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; } .privacy-toc ol { margin: 0; padding-left: 1.5rem; line-height: 1.6; } .privacy-toc a { color: var(--accent); text-decoration: none; font-size: 0.85rem; } .privacy-toc a:hover { text-decoration: underline; } .privacy-sectie { scroll-margin-top: 4rem; margin-bottom: 1rem; } .privacy-sectie:target h2 { background: var(--accent-soft); padding: 0.4rem 0.6rem; border-radius: var(--r-sm); border-bottom-color: var(--accent); } /* ===================================================================== v49 — Veiligheid & AVG-checklist pagina ===================================================================== */ .vh-tally { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin: 1rem 0 1.5rem; } .vh-tally-item { background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--muted); border-radius: var(--r-md); padding: 0.625rem 0.5rem; text-align: center; } .vh-tally-item.is-pass { border-top-color: #5a942a; } .vh-tally-item.is-warn { border-top-color: #8a6010; } .vh-tally-item.is-fail { border-top-color: #b33d10; } .vh-tally-item.is-info { border-top-color: #0a5a68; } .vh-tally-num { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; } .vh-tally-lbl { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-top: 0.25rem; } .vh-h2 { margin: 1.75rem 0 0.75rem; color: var(--accent-strong); font-size: 1.05rem; font-weight: 600; text-transform: none; letter-spacing: 0; border-bottom: 2px solid var(--secondary); padding-bottom: 0.4rem; } .vh-section { margin-bottom: 1.25rem; } .vh-section-titel { margin: 0.75rem 0 0.5rem; font-size: 0.78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .vh-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; } .vh-item { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--muted); border-radius: var(--r-sm); padding: 0.625rem 0.875rem; } .vh-item.is-pass { border-left-color: #5a942a; } .vh-item.is-warn { border-left-color: #8a6010; background: rgba(232,169,46,0.05); } .vh-item.is-fail { border-left-color: #b33d10; background: rgba(216,84,31,0.06); } .vh-item.is-info { border-left-color: #0a5a68; } .vh-item-head { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.25rem; flex-wrap: wrap; } .vh-item-naam { font-size: 0.92rem; color: var(--fg); font-weight: 600; } .vh-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; flex-shrink: 0; } .vh-item-detail { color: var(--muted); font-size: 0.85rem; line-height: 1.45; } .vh-item-detail code { background: var(--card-alt); padding: 1px 5px; border-radius: 3px; font-size: 0.85em; } .vh-item-detail a { color: var(--accent); } /* Afgehandelde alarm-card op TD-view: lichter, geen pulserende status, zelfde voelen als een opgeloste storing */ .td-card-alarm.td-card-alarm-resolved { opacity: 0.78; background: var(--card); border-left-color: #5a942a; } .td-card-alarm.td-card-alarm-resolved .td-card-status.td-status-opgelost { background: var(--success-bg); color: var(--success-fg); animation: none; } /* Changelog-pagina: chronologische lijst van releases */ .changelog-list { list-style: none; margin: 1rem 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; } .changelog-entry { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r-md); padding: 1rem 1.25rem; scroll-margin-top: 4rem; } .changelog-entry:target { border-left-color: var(--secondary); box-shadow: 0 0 0 2px var(--accent-soft); } .changelog-head { display: flex; align-items: baseline; gap: 0.625rem; flex-wrap: wrap; margin-bottom: 0.5rem; border-bottom: 1px solid var(--border); padding-bottom: 0.4rem; } .changelog-version { background: var(--accent); color: var(--accent-fg); font-weight: 700; font-size: 0.78rem; padding: 2px 9px; border-radius: 11px; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; } .changelog-datum { color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; } .changelog-titel { margin: 0; flex: 1 1 100%; font-size: 1rem; font-weight: 600; color: var(--fg); text-transform: none; letter-spacing: 0; } .changelog-punten { margin: 0; padding-left: 1.5rem; line-height: 1.55; color: var(--fg); font-size: 0.88rem; } .changelog-punten li { margin: 0.25rem 0; } /* ===================================================================== v54 — Documentatie-pagina (samengevoegd features + handleiding) Progressive disclosure: titel + samenvatting altijd zichtbaar, uitgebreide instructie via expand. Plus zoekbalk. ===================================================================== */ .docs-toolbar { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 0.5rem 0 0.75rem; margin: 1rem 0 1rem; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.5rem; } .docs-zoek { width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--card); color: var(--fg); font-size: 0.95rem; font-family: inherit; } .docs-zoek:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .docs-stats { display: flex; align-items: center; gap: 0.625rem; font-size: 0.82rem; color: var(--muted); flex-wrap: wrap; } .docs-stats strong { color: var(--fg); font-variant-numeric: tabular-nums; } .docs-stats .btn-link { margin-left: auto; background: none; border: none; cursor: pointer; color: var(--accent); font-size: 0.82rem; padding: 2px 8px; } .docs-stats .btn-link:hover { color: var(--accent-strong); text-decoration: underline; } .docs-stats .btn-link + .btn-link { margin-left: 0; } .docs-empty { padding: 2rem 1rem; text-align: center; color: var(--muted); font-style: italic; background: var(--card); border: 1px dashed var(--border-strong); border-radius: var(--r-md); margin: 1rem 0; } .docs-page { margin-top: 0.5rem; } .docs-group { margin-bottom: 1.75rem; } .docs-group-titel { margin: 1.25rem 0 0.5rem; font-size: 1.05rem; font-weight: 600; color: var(--accent-strong); border-bottom: 2px solid var(--secondary); padding-bottom: 0.4rem; display: flex; align-items: center; gap: 0.5rem; text-transform: none; letter-spacing: 0; } .docs-group-aantal { background: var(--accent); color: var(--accent-fg); font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; margin-left: auto; font-variant-numeric: tabular-nums; } .docs-item { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: var(--r-md); margin-bottom: 0.5rem; overflow: hidden; scroll-margin-top: 6rem; transition: border-left-color 0.15s, box-shadow 0.15s; } .docs-item[open] { border-left-color: var(--accent); box-shadow: 0 1px 3px rgba(16, 80, 90, 0.06), 0 4px 14px rgba(16, 80, 90, 0.08); } .docs-item:target { border-left-color: var(--secondary); box-shadow: 0 0 0 2px var(--accent-soft); } .docs-item-summary { cursor: pointer; list-style: none; padding: 0.75rem 0.875rem; display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 0.625rem; align-items: baseline; user-select: none; } .docs-item-summary::-webkit-details-marker { display: none; } .docs-item-summary:hover { background: var(--accent-soft); } .docs-item-titel { grid-column: 1 / 2; font-weight: 600; font-size: 0.95rem; color: var(--fg); } .docs-item-kort { grid-column: 1 / 2; grid-row: 2; font-size: 0.82rem; color: var(--muted); line-height: 1.45; } .docs-item-chevron { grid-column: 2 / 3; grid-row: 1 / 3; align-self: center; color: var(--muted); font-size: 1.4rem; line-height: 1; transition: transform 0.2s; transform: rotate(0deg); } .docs-item[open] .docs-item-chevron { transform: rotate(90deg); } .docs-item-body { padding: 0.25rem 0.875rem 0.875rem; border-top: 1px solid var(--border); background: var(--card); } .docs-item-body p { margin: 0.625rem 0; line-height: 1.6; color: var(--fg); font-size: 0.9rem; } .docs-item-permalink { display: inline-block; font-size: 0.75rem; color: var(--muted); text-decoration: none; margin-top: 0.25rem; padding: 2px 6px; border-radius: 4px; } .docs-item-permalink:hover { color: var(--accent); background: var(--accent-soft); } @media (min-width: 700px) { .docs-toolbar { flex-direction: row; align-items: center; } .docs-zoek { flex: 1; max-width: 480px; } .docs-stats { flex-shrink: 0; } } /* ===================================================================== v55 — Geschiedenis (DB-snapshots) + viewer ===================================================================== */ .hist-toolbar { display: flex; flex-direction: column; gap: 0.625rem; background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r-md); padding: 0.875rem 1.125rem; margin: 1rem 0 1.5rem; } .hist-actions { margin: 0; } .hist-info { margin: 0; line-height: 1.5; } .hist-info code { background: var(--card-alt); padding: 1px 5px; border-radius: 3px; font-size: 0.85em; } .hist-year { margin-bottom: 1.5rem; } .hist-year-titel { font-size: 1.1rem; font-weight: 600; color: var(--accent-strong); border-bottom: 2px solid var(--secondary); padding-bottom: 0.4rem; margin: 1.25rem 0 0.75rem; text-transform: none; letter-spacing: 0; } .hist-month-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.625rem; } .hist-month { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0.75rem 0.875rem; } .hist-month-titel { margin: 0 0 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .hist-snap { display: block; padding: 0.5rem 0.625rem; background: var(--card-alt); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r-sm); color: var(--fg); text-decoration: none; transition: transform 0.1s, box-shadow 0.1s; } .hist-snap:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(16, 80, 90, 0.12); } .hist-snap-leeg { border-left-color: var(--muted); background: transparent; color: var(--muted); font-style: italic; cursor: default; } .hist-snap-leeg:hover { transform: none; box-shadow: none; } .hist-snap-label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 0.2rem; } .hist-snap-meta { color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; } .hist-handmatig { margin-top: 0.5rem; font-size: 0.82rem; } .hist-handmatig summary { cursor: pointer; color: var(--muted); padding: 0.25rem 0; } .hist-handmatig summary:hover { color: var(--accent); } .hist-handmatig ul { list-style: none; margin: 0.4rem 0 0; padding-left: 1rem; border-left: 2px solid var(--border); } .hist-handmatig li { padding: 0.2rem 0; } .hist-handmatig a { color: var(--accent); text-decoration: none; } .hist-handmatig a:hover { text-decoration: underline; } /* Snapshot-viewer */ .hist-h2 { margin-top: 2rem; color: var(--accent-strong); font-size: 1.05rem; font-weight: 600; border-bottom: 2px solid var(--secondary); padding-bottom: 0.4rem; text-transform: none; letter-spacing: 0; } .hist-h3 { margin-top: 1.5rem; color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .hist-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.5rem; margin: 1rem 0; } .hist-stat { background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--accent); border-radius: var(--r-md); padding: 0.75rem 0.5rem; text-align: center; } .hist-stat-num { font-size: 1.4rem; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; line-height: 1; } .hist-stat-lbl { font-size: 0.7rem; color: var(--muted); margin-top: 0.25rem; text-transform: uppercase; letter-spacing: 0.04em; } .hist-zoek-form { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0.875rem 1rem; margin: 0.5rem 0 1rem; } .hist-zoek-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.625rem; } .hist-events-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 0.5rem; } .hist-events-table th { text-align: left; background: var(--card-alt); color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 6px 8px; border-bottom: 1px solid var(--border); } .hist-events-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; } .hist-events-table tr:hover td { background: var(--accent-soft); } /* Recovery-uitleg op /admin/geschiedenis — uitklapbaar */ .hist-uitleg { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--secondary); border-radius: var(--r-md); margin: 0 0 1.5rem; } .hist-uitleg > summary { cursor: pointer; padding: 0.75rem 1rem; list-style: none; user-select: none; color: var(--accent-strong); } .hist-uitleg > summary::-webkit-details-marker { display: none; } .hist-uitleg > summary:hover { background: var(--accent-soft); } .hist-uitleg[open] > summary { border-bottom: 1px solid var(--border); } .hist-uitleg-body { padding: 0.5rem 1.25rem 1rem; line-height: 1.55; color: var(--fg); } .hist-uitleg-body h3 { margin: 1rem 0 0.4rem; font-size: 0.95rem; color: var(--accent-strong); text-transform: none; letter-spacing: 0; font-weight: 600; } .hist-uitleg-body p, .hist-uitleg-body ol, .hist-uitleg-body ul { font-size: 0.88rem; margin: 0.4rem 0; } .hist-uitleg-body ol, .hist-uitleg-body ul { padding-left: 1.5rem; } .hist-uitleg-body ol li, .hist-uitleg-body ul li { margin: 0.3rem 0; } .hist-uitleg-body code { background: var(--card-alt); padding: 1px 6px; border-radius: 3px; font-size: 0.88em; border: 1px solid var(--border); } .hist-uitleg-body strong { color: var(--accent-strong); } /* v58 — restore + upload + diff op /admin/geschiedenis */ .hist-actions-row { display: flex; gap: 0.625rem; flex-wrap: wrap; margin-bottom: 0.5rem; } .hist-actions-row form { margin: 0; } .hist-upload-form { display: inline-flex; align-items: center; gap: 0.5rem; } .hist-upload-label { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; padding: 0.5rem 0.875rem; background: var(--card); border: 1px dashed var(--border-strong); border-radius: var(--r-md); font-size: 0.85rem; color: var(--accent); transition: border-color 0.15s, background 0.15s; } .hist-upload-label:hover { border-color: var(--accent); background: var(--accent-soft); } .hist-upload-label input[type=file] { font-size: 0.78rem; color: var(--muted); } .hist-extra { padding: 0.2rem 0; } .hist-extra-cat { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; margin-left: 0.4rem; vertical-align: 1px; } .hist-extra-handmatig .hist-extra-cat { background: var(--accent-soft); color: var(--accent-strong); } .hist-extra-geüpload .hist-extra-cat, .hist-extra-geupload .hist-extra-cat { background: rgba(124, 186, 61, 0.16); color: #5a942a; } .hist-extra-pre-restore .hist-extra-cat { background: rgba(216, 84, 31, 0.14); color: #b33d10; } .hist-actie-bar { display: flex; gap: 0.625rem; flex-wrap: wrap; align-items: center; margin: 0.5rem 0 1.5rem; padding: 0.875rem 1rem; background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r-md); } .hist-actie-bar form { margin: 0; } .hist-restore-form { margin-left: auto; } .hist-delete-btn { color: var(--danger); background: none; border: none; cursor: pointer; font-size: 0.85rem; padding: 0.4rem 0.6rem; } .hist-delete-btn:hover { background: var(--danger-bg); border-radius: var(--r-sm); } .hist-warn { background: var(--warn-bg); border-left: 3px solid var(--warn-strong); padding: 0.75rem 1rem; border-radius: var(--r-sm); margin: 0.5rem 0 1rem; color: var(--warn-fg); font-size: 0.88rem; line-height: 1.5; } .hist-warn strong { color: var(--warn-fg); } .hist-info-blok { background: var(--accent-soft); border-left: 3px solid var(--accent); padding: 0.75rem 1rem; border-radius: var(--r-sm); margin: 0.5rem 0 1rem; color: var(--fg); font-size: 0.88rem; } .hist-diff-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 0.5rem 0 1rem; } .hist-diff-table th { text-align: left; background: var(--card-alt); color: var(--muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 6px 10px; border-bottom: 1px solid var(--border); } .hist-diff-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; } .hist-diff-table tr.is-minder td:last-child { color: var(--danger); font-weight: 600; } .hist-diff-table tr.is-meer td:last-child { color: var(--success-fg); } .hist-diff-table tr.is-gelijk td:last-child { color: var(--muted); } /* ===== Todo / open-taken pagina (v59) ===== */ .todo-tally { display: flex; gap: 0.75rem; margin: 1rem 0 1.5rem; flex-wrap: wrap; } .todo-tally-item { flex: 1 1 110px; min-width: 110px; background: var(--card-alt); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0.75rem 1rem; text-align: center; border-left-width: 3px; } .todo-tally-item.is-open { border-left-color: var(--accent); } .todo-tally-item.is-bezig { border-left-color: var(--warn-strong); } .todo-tally-item.is-klaar { border-left-color: var(--success-fg); } .todo-tally-item.is-geparkeerd { border-left-color: var(--muted); } .todo-tally-num { display: block; font-size: 1.6rem; font-weight: 700; color: var(--fg); line-height: 1.1; } .todo-tally-lbl { display: block; color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.2rem; } .todo-h2 { margin: 1.25rem 0 0.5rem; font-size: 1.05rem; color: var(--fg); padding-left: 0.6rem; border-left: 3px solid var(--border); } .todo-h2.is-open { border-left-color: var(--accent); } .todo-h2.is-bezig { border-left-color: var(--warn-strong); } .todo-h2.is-klaar { border-left-color: var(--success-fg); } .todo-h2.is-geparkeerd { border-left-color: var(--muted); } .todo-h2-num { color: var(--muted); font-weight: 400; font-size: 0.85rem; margin-left: 0.25rem; } .todo-list { list-style: none; padding: 0; margin: 0 0 1rem; } .todo-entry { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: var(--r-md); padding: 0.85rem 1rem; margin: 0 0 0.6rem; scroll-margin-top: 1rem; } .todo-entry.is-open { border-left-color: var(--accent); } .todo-entry.is-bezig { border-left-color: var(--warn-strong); background: var(--warn-bg); } .todo-entry.is-klaar { border-left-color: var(--success-fg); opacity: 0.75; } .todo-entry.is-geparkeerd { border-left-color: var(--muted); opacity: 0.7; } .todo-entry:target { outline: 2px solid var(--accent); outline-offset: 2px; } .todo-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.75rem; margin-bottom: 0.4rem; } .todo-id { font-family: var(--mono, monospace); font-size: 0.72rem; color: var(--muted); background: var(--card-alt); padding: 2px 6px; border-radius: var(--r-sm); letter-spacing: 0.02em; } .todo-titel { margin: 0; font-size: 1rem; font-weight: 600; color: var(--fg); flex: 1 1 200px; } .todo-entry.is-klaar .todo-titel { text-decoration: line-through; } .todo-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; font-size: 0.78rem; } .todo-cat { color: var(--muted); background: var(--card-alt); padding: 2px 8px; border-radius: 999px; text-transform: lowercase; letter-spacing: 0.02em; } .todo-prio { padding: 2px 6px; border-radius: var(--r-sm); font-weight: 500; } .todo-aang { color: var(--muted); } .todo-toelichting { margin: 0.4rem 0 0.6rem; color: var(--fg); font-size: 0.9rem; line-height: 1.5; } .todo-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.4rem; } .todo-action-form { display: inline; margin: 0; } .todo-actions .btn-sm { font-size: 0.78rem; padding: 0.35rem 0.7rem; } /* ===== Passkeys / WebAuthn (v60) ===== */ .login-divider { display: flex; align-items: center; margin: 1rem 0; color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; } .login-divider::before, .login-divider::after { content: ''; flex: 1; border-top: 1px solid var(--border); } .login-divider span { padding: 0 0.75rem; } .login-hint { font-size: 0.78rem; color: var(--muted); text-align: center; margin: 0.4rem 0 0.5rem; line-height: 1.4; } .pk-status { margin-top: 0.6rem; font-size: 0.85rem; line-height: 1.4; min-height: 1.2em; } .pk-info { background: var(--accent-soft); border-left: 3px solid var(--accent); padding: 0.85rem 1rem; border-radius: var(--r-sm); margin: 0.5rem 0 1.5rem; color: var(--fg); font-size: 0.88rem; line-height: 1.5; } .pk-list { list-style: none; padding: 0; margin: 0 0 1rem; } .pk-entry { display: flex; align-items: center; gap: 0.75rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0.75rem 1rem; margin: 0 0 0.5rem; } .pk-icon { font-size: 1.5rem; flex-shrink: 0; width: 2rem; text-align: center; } .pk-info-block { flex: 1; min-width: 0; } .pk-label { font-weight: 600; color: var(--fg); font-size: 0.95rem; } .pk-meta { color: var(--muted); font-size: 0.78rem; margin-top: 0.15rem; } .pk-revoke-form { margin: 0; flex-shrink: 0; } .pk-add-card { background: var(--card-alt); border: 1px dashed var(--border); border-radius: var(--r-md); padding: 1rem; margin: 0.5rem 0 1rem; } .pk-add-card .form-row { margin-bottom: 0.6rem; } .btn-danger-outline { background: transparent; color: var(--danger); border: 1px solid var(--danger); } .btn-danger-outline:hover { background: var(--danger-bg); } /* ===== Text selection — lime-groen accent uit logo (v62) ===== */ ::selection { background: var(--secondary); color: #fff; } ::-moz-selection { background: var(--secondary); color: #fff; } /* ===== Modal close-button — nette rode knop (v62) ===== */ /* Gebruikt door alle data-modal-close en entry-modal-close. Vervangt de oude btn-link "×" tekst-link door een rond rood icoon-knopje rechtsbovenin de modal. Cirkel-vormig, hover-glow. */ .modal-close-x, [data-modal-close].modal-close-x, .entry-modal-close { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0 !important; border: none; border-radius: 50%; background: var(--danger); color: #fff !important; font-size: 1.1rem !important; line-height: 1 !important; font-weight: 600; cursor: pointer; transition: background 0.15s, transform 0.15s, box-shadow 0.15s; box-shadow: 0 1px 3px rgba(216, 84, 31, 0.3); /* Btn-link erfde text-decoration: underline → "streepje onder × — strip 'm. */ text-decoration: none !important; } .modal-close-x:hover, [data-modal-close].modal-close-x:hover, .entry-modal-close:hover { background: var(--danger-fg); transform: scale(1.08); box-shadow: 0 2px 6px rgba(216, 84, 31, 0.5); } .modal-close-x:active, .entry-modal-close:active { transform: scale(0.95); } .modal-close-x:focus-visible, .entry-modal-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }