.dropdown-toggle::after { display: none !important; } .page-title-row > :first-child { min-width: 0; max-width: 100%; overflow: hidden; } .page-title-row > :last-child { flex-shrink: 0; } html, body { overflow-x: hidden; height:100%; background-color: var(--orbit-body-bg) } body { font-family: 'Public Sans', sans-serif; font-size:15px; height: 100vh } :root { color-scheme: light; --orbit-radius: 10px; /* ---- xYnta brand tokens (cycle E iteratie 5) Gesynched met www.xynta.com main_min.css. Brand-colors blijven constant in dark-mode; context-tokens (bg, border, text) rebinden wel in dark.css. */ --x-brand-blue: #2F6FB3; --x-brand-blue-rgb: 47, 111, 179; --x-brand-blue-deep: #3B5F86; --x-brand-blue-deep-rgb: 59, 95, 134; --x-brand-blue-soft: #91B2D2; --x-brand-blue-soft-rgb: 145, 178, 210; --x-brand-orange: #F28C38; --x-brand-orange-rgb: 244, 138, 58; --x-brand-orange-soft: #F2A55F; --x-brand-orange-soft-rgb: 242, 165, 95; /* xYnta brand palette (matches www.xynta.com). Override Bootstrap so all bg-X / text-X / border-X / btn-X classes use brand-consistent colors. Iteratie 5: warning nu #F28C38 (merge met brand-orange zoals website doet). */ --bs-primary: #2F6FB3; --bs-secondary: #3B5F86; --bs-success: #96bd5e; --bs-info: #6E9EC2; --bs-warning: #F28C38; --bs-danger: #DC3545; --bs-primary-rgb: 47, 111, 179; --bs-secondary-rgb: 59, 95, 134; --bs-success-rgb: 150, 189, 94; --bs-info-rgb: 110, 158, 194; --bs-warning-rgb: 244, 138, 58; --bs-danger-rgb: 220, 53, 69; --bs-body-bg: #F4F7FB; --bs-body-color: #2D3F5A; --bs-border-color: #D8E2EE; --bs-link-color: #2F6FB3; --bs-link-hover-color: #255B94; /* Alle surface-bg tokens (modal/card/list-group/accordion/ dropdown/nav-tabs/form-control) staan op component-level verderop in deze file — Bootstrap 5.3 defineert die tokens lokaal in `.modal{...}` / `.card{...}` / etc., wat :root-override shadowt. Component-level scope werkt wel (gelijke specificity, later in source-order). */ /* Orbit brand product-semantic tokens (theme-invariant). */ --orbit-primary-deep: #1a3150; --orbit-primary: #254672; /* Info theme accents (theme-invariant; --helios-info-accent is a separate theme-varying token for form-focus borders etc). */ --orbit-info-accent: #8ab2d2; --orbit-info-bg-subtle: #e6f0f7; /* Body background (html, body). */ --orbit-body-bg: #ededed; /* User-menu segmented sub-system (4-color cohesive set used on the userManageMenu dropdown's dark-blue inline background). */ --orbit-segmented-border: #1b355a; --orbit-segmented-bg: #203d63; --orbit-segmented-bg-hover: #274a78; --orbit-segmented-bg-selected: #2c568f; --orbit-stat-card-neutral-bg: #f5f8fc; --orbit-stat-card-neutral-border: #d7e0eb; --orbit-stat-card-neutral-value: #1f2f44; --orbit-stat-card-neutral-label: #4e6077; --orbit-stat-card-info-bg: #ecf6ff; --orbit-stat-card-info-border: #b9d9f4; --orbit-stat-card-info-value: #174f7f; --orbit-stat-card-success-bg: #f1f7e6; --orbit-stat-card-success-border: #cfe1aa; --orbit-stat-card-success-value: #4f6f2a; --orbit-stat-card-primary-bg: #eef3fb; --orbit-stat-card-primary-border: #c7d9ef; --orbit-stat-card-primary-value: #1e4d82; --orbit-stat-card-warning-bg: #fff7e0; --orbit-stat-card-warning-border: #f0d28a; --orbit-stat-card-warning-value: #7a5a14; --orbit-stat-card-danger-bg: #fdeff1; --orbit-stat-card-danger-border: #f1c2c8; --orbit-stat-card-danger-value: #8b1e2c; --orbit-chart-primary: #2F6FB3; --orbit-chart-success: #96bd5e; --orbit-chart-warning: #f0c36d; --orbit-chart-danger: #DC3545; --orbit-chart-info: #6E9EC2; --orbit-chart-secondary: #6c757d; --orbit-chart-grid: #dfe6ef; --orbit-chart-fore: #5f7087; --orbit-chart-tooltip-bg: #ffffff; --orbit-chart-tooltip-text: #1f2f44; --orbit-chart-tooltip-border: #d7dde6; --orbit-chart-empty-text: #4f5f75; --orbit-chart-empty-bg: linear-gradient(180deg, rgba(110,158,194,0.12) 0%, rgba(245,248,252,0.95) 100%); --orbit-chart-empty-border: rgba(47, 111, 179, 0.2); /* Card surface used for pie/donut segment strokes (theme-aware). */ --orbit-card-bg: #ffffff; /* --------------------------------------------------------------- Accent family — brand oranje/rood for primary CTAs, sidebar active-state, and gradient endpoints. Introduced in cycle D for visual alignment with xynta.com. See design-system.md §8 for use-cases. Not a replacement for --bs-primary (that stays the standard "save/submit" color); accent is ONE CTA per page. --------------------------------------------------------------- */ --orbit-accent: #F28C38; --orbit-accent-hover: #DD7A25; --orbit-accent-subtle: rgba(244, 138, 58, 0.12); --orbit-accent-deep: #BE6720; --orbit-accent-light: #F5A867; --orbit-on-accent: #ffffff; /* Brand gradients — CTA for accent buttons with gradient fills. Hero gradients live in the hero-v2 token-block. */ --orbit-gradient-cta: linear-gradient(135deg, #F5A867 0%, #F28C38 100%); /* Light-mode fallback for the subtle border used on cards. dark.css defines its own value; this lets rules reference var(--helios-border-subtle) without needing a fallback. */ --helios-border-subtle: rgba(0, 0, 0, 0.08); /* Helios dark-surface tokens (light-mode fallbacks). Used by rules in dark.css to avoid hardcoded hex; these defaults apply when no dark theme is active. */ --helios-text: #212529; --helios-surface-raised: #ffffff; --helios-surface-sunken: #f8f9fa; --helios-surface-deep: #223f67; --helios-surface-hover: #e9ecef; --helios-surface-selected: #dee2e6; --helios-info-accent: #6E9EC2; --helios-muted: #6c757d; --helios-timeline-line: #dee2e6; } [data-theme="dark"], [data-bs-theme="dark"] { --orbit-stat-card-neutral-bg: #263445; --orbit-stat-card-neutral-border: #3a4d63; --orbit-stat-card-neutral-value: #e6edf7; --orbit-stat-card-neutral-label: #b8c7d9; --orbit-stat-card-info-bg: #213849; --orbit-stat-card-info-border: #355872; --orbit-stat-card-info-value: #d6e9fb; --orbit-stat-card-success-bg: #2a3a1f; --orbit-stat-card-success-border: #4d6831; --orbit-stat-card-success-value: #d4ecaa; --orbit-stat-card-primary-bg: #22364b; --orbit-stat-card-primary-border: #35506f; --orbit-stat-card-primary-value: #d9e8fa; --orbit-stat-card-warning-bg: #4a3320; --orbit-stat-card-warning-border: #75522e; --orbit-stat-card-warning-value: #ffd5a8; --orbit-stat-card-danger-bg: #472b31; --orbit-stat-card-danger-border: #6c3c45; --orbit-stat-card-danger-value: #ffd6dc; --orbit-chart-primary: #5f8fb3; --orbit-chart-success: #b9da82; --orbit-chart-warning: #f5b27a; --orbit-chart-danger: #f07a89; --orbit-chart-info: #7aa7c7; --orbit-chart-secondary: #95a8bd; --orbit-chart-grid: #32465f; --orbit-chart-fore: #b6c2d1; --orbit-chart-tooltip-bg: #1d2a3b; --orbit-chart-tooltip-text: #e6edf5; --orbit-chart-tooltip-border: #32465f; --orbit-chart-empty-text: #c7d4e2; --orbit-chart-empty-bg: linear-gradient(180deg, rgba(47,111,179,0.18) 0%, rgba(21,30,40,0.95) 100%); --orbit-chart-empty-border: rgba(110, 158, 194, 0.25); /* Dark-mode card surface for pie/donut segment strokes. */ --orbit-card-bg: #1d2a3b; /* Helios dark-surface tokens (dark-mode values). */ --helios-text: #e6eaf0; --helios-surface-raised: #151e28; --helios-surface-sunken: #131b24; --helios-surface-deep: #0b1220; --helios-surface-hover: #1a2533; --helios-surface-selected: #2a3446; --helios-info-accent: #8ab2d2; --helios-muted: #94a3b8; --helios-timeline-line: #334155; } /* Auto theme: mirror dark-mode CSS vars when OS prefers dark. Closes a gap where [data-theme="auto"] previously inherited the light :root tokens on a dark-preferring OS. */ @media (prefers-color-scheme: dark) { [data-theme="auto"], [data-bs-theme="auto"] { --orbit-stat-card-neutral-bg: #263445; --orbit-stat-card-neutral-border: #3a4d63; --orbit-stat-card-neutral-value: #e6edf7; --orbit-stat-card-neutral-label: #b8c7d9; --orbit-stat-card-info-bg: #213849; --orbit-stat-card-info-border: #355872; --orbit-stat-card-info-value: #d6e9fb; --orbit-stat-card-success-bg: #2a3a1f; --orbit-stat-card-success-border: #4d6831; --orbit-stat-card-success-value: #d4ecaa; --orbit-stat-card-primary-bg: #22364b; --orbit-stat-card-primary-border: #35506f; --orbit-stat-card-primary-value: #d9e8fa; --orbit-stat-card-warning-bg: #4a3320; --orbit-stat-card-warning-border: #75522e; --orbit-stat-card-warning-value: #ffd5a8; --orbit-stat-card-danger-bg: #472b31; --orbit-stat-card-danger-border: #6c3c45; --orbit-stat-card-danger-value: #ffd6dc; --orbit-chart-primary: #5f8fb3; --orbit-chart-success: #b9da82; --orbit-chart-warning: #f5b27a; --orbit-chart-danger: #f07a89; --orbit-chart-info: #7aa7c7; --orbit-chart-secondary: #95a8bd; --orbit-chart-grid: #32465f; --orbit-chart-fore: #b6c2d1; --orbit-chart-tooltip-bg: #1d2a3b; --orbit-chart-tooltip-text: #e6edf5; --orbit-chart-tooltip-border: #32465f; --orbit-chart-empty-text: #c7d4e2; --orbit-chart-empty-bg: linear-gradient(180deg, rgba(47,111,179,0.18) 0%, rgba(21,30,40,0.95) 100%); --orbit-chart-empty-border: rgba(110, 158, 194, 0.25); --orbit-card-bg: #1d2a3b; --helios-text: #e6eaf0; --helios-surface-raised: #151e28; --helios-surface-sunken: #131b24; --helios-surface-deep: #0b1220; --helios-surface-hover: #1a2533; --helios-surface-selected: #2a3446; --helios-info-accent: #8ab2d2; --helios-muted: #94a3b8; --helios-timeline-line: #334155; } } body.offcanvas-open { position: fixed; width: 100%; overflow-x: hidden !important; } img.invert { filter: invert(1); } .select2-dropdown { z-index: 10000 !important; } .select2-container--open .select2-dropdown { z-index: 10000 !important; } .select2-container { z-index: 9998 !important; } .select2-container--open { z-index: 9998 !important; } /* Make modal body scrollable with max height */ #manageGeneralDiscountsModal .modal-body, #manageCustomerDiscountsModal .modal-body, #managePriceChangesModal .modal-body, #viewPriceHistoryModal .modal-body { max-height: calc(100vh - 200px); overflow-y: auto; } /* Frontend auth helpers */ .auth-helper a { color: var(--bs-primary); } /* Make entire list item show draggable cursor and improve drag feedback */ #orderList .list-group-item { cursor: grab; } #orderList .list-group-item:active { cursor: grabbing; } #orderList .list-group-item .drag-handle { cursor: grab; } .sortable-ghost { opacity: 0.7; } .auth-helper a:hover { text-decoration: underline; } .html-content h1, .html-content h2, .html-content h3, .html-content h4, .html-content h5, .html-content h6 { font-family: 'Public Sans', sans-serif; line-height: 1.25; margin: 0 0 0.75rem; font-weight: 700; text-transform:none; } .html-content h1 { font-size: 1.6rem; } .html-content h2 { font-size: 1.35rem; } .html-content h3 { font-size: 1.15rem; } .html-content h4 { font-size: 1.0rem; } .html-content h5 { font-size: 0.95rem; } .html-content h6 { font-size: 0.9rem; } .html-content img { max-width: 100%; height:auto } /* Orbit divider */ .orbit-divider { display: flex; align-items: center; text-align: center; color: #9ca3af; font-size: 0.85rem; } .orbit-divider::before, .orbit-divider::after { content: ''; flex: 1; border-bottom: 1px solid rgba(0,0,0,.1); } .orbit-divider span { padding: 0 .75rem; } .offcanvas-backdrop-less { overflow: hidden; } /* Orbit language switcher */ .orbit-language-switch .orbit-flag { width: 34px; height: 34px; border-radius: 50%; background: #ffffff; display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.15); } .orbit-language-switch .orbit-flag img { width: 26px; height: 26px; } .orbit-language-switch .orbit-chevron { width: 12px; opacity: .6; } /* Prevent flag icons from being inverted in dark mode */ .orbit-language-switch .orbit-flag img, .orbit-language-switch .dropdown-menu img { filter: none !important; } .orbit-language-switch button:hover .orbit-flag { box-shadow: 0 0 0 3px rgba(255,255,255,.25); } /* Mobile hamburger-toggle — accent-oranje gradient als herkenbare "open-sidebar" CTA. Icon erft kleur via currentColor; wit in light (contrast op oranje), zwart in dark-mode (dark.css rebindt). Twee Lucide-icons (open/close) crossfaden via opacity- transition op aria-expanded. Button houdt vaste 44×44px zodat absolute-centered icons layout niet verschuiven. */ .mobile-nav { position: relative; width: 44px; height: 44px; background: linear-gradient( 135deg, var(--orbit-accent), var(--orbit-accent-hover) ); color: #ffffff; border: 0 !important; box-shadow: 0 2px 6px rgba(var(--x-brand-orange-rgb), 0.25); transition: transform 0.1s ease, box-shadow 0.15s ease; } .mobile-nav:hover, .mobile-nav:focus-visible { background: linear-gradient( 135deg, var(--orbit-accent-hover), var(--orbit-accent-deep) ); box-shadow: 0 4px 10px rgba(var(--x-brand-orange-rgb), 0.35); transform: translateY(-1px); } .mobile-nav:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(var(--x-brand-orange-rgb), 0.20); } /* Icon crossfade via opacity-transition op aria-expanded. Beide icons gelaagd op zelfde positie (absolute-centered); closed zichtbaar in rust, open fade-in bij aria-expanded="true". 200ms ease-out iets sneller dan sidebar-slide (250ms) zodat icon al klaar is voor volledige sidebar-open. */ .mobile-nav .mobile-nav-icon-closed, .mobile-nav .mobile-nav-icon-open { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: opacity 200ms ease-out; } .mobile-nav .mobile-nav-icon-closed { opacity: 1; } .mobile-nav .mobile-nav-icon-open { opacity: 0; } .mobile-nav[aria-expanded="true"] .mobile-nav-icon-closed { opacity: 0; } .mobile-nav[aria-expanded="true"] .mobile-nav-icon-open { opacity: 1; } .helios-logo { content: url("/assets/img/logo_orbit_light.webp"); } #mobileHeader { height: 64px; min-height: 64px; z-index: 1200; background: var(--orbit-primary); backdrop-filter: blur(6px); } .helios-hover-lift { transition: transform .12s ease, box-shadow .12s ease; } .helios-hover-lift:hover { transform: translateY(-1px); box-shadow: 0 .25rem .75rem rgba(0,0,0,.05); } .helios-badge { font-size: .65rem; font-weight: 500; padding: .15rem .4rem; border-radius: .375rem; background: #f1f3f5; color: var(--helios-muted); } .dataTables_wrapper { overflow: visible!important; } .form-control-warning { background-color: #fff8e1; border: 1px solid var(--bs-warning); color: #000; } .helios-avatar { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; color: #fff; background: var(--helios-avatar-bg, var(--helios-muted)); border-radius: 10px; overflow: hidden; flex-shrink: 0; } .helios-avatar img { width: 100%; height: 100%; object-fit: cover; } /* Sizes */ .helios-avatar-sm { width: 32px; height: 32px; font-size: 0.75rem; } .helios-avatar-md { width: 48px; height: 48px; font-size: 0.95rem; } .helios-avatar-lg { width: 96px; height: 96px; font-size: 1.5rem; } .no-first-spacing > :first-child { margin-top: 0; padding-top: 0; } .no-last-spacing > :last-child { margin-bottom: 0; padding-bottom: 0; } .helios-clickable-rows tbody tr.session-row { cursor: pointer; } .helios-clickable-rows tbody tr.session-row:hover { background-color: rgba(0, 0, 0, 0.025); } .helios-clickable-rows tbody tr.known-ip-row, #knownIpsTable tbody tr.known-ip-row { cursor: pointer; } .helios-clickable-rows tbody tr.known-ip-row:hover, #knownIpsTable tbody tr.known-ip-row:hover { background-color: rgba(0, 0, 0, 0.025); } tr.user-separator { pointer-events: none; } #suspiciousSessionsModal tbody tr { cursor: pointer; } #suspiciousSessionsModal tbody tr:hover { background-color: rgba(0, 0, 0, 0.03); } .device-list-item { padding: .5rem .75rem; border-bottom: 1px solid var(--bs-border-color); } /* Select2 Placeholder Font */ .select2-container, .select2-container * { font-family: 'Public Sans', sans-serif !important; } /* Default: netjes afgerond */ .helios-collapsible { border-radius: .5rem; overflow: hidden; } /* Als de collapse OPEN is */ .helios-collapsible .card-header button[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* Als de collapse DICHT is → card blijft mooi afgerond */ .helios-collapsible .card-header button[aria-expanded="false"] { border-radius: .5rem; } /* Basis: geen dubbele randen */ .helios-collapsible .card-header { border-bottom: 0; } /* Alleen als de collapse OPEN is, weer een scheidingslijn */ .helios-collapsible .card-header:focus-within { border-bottom: 1px solid var(--bs-border-color); } .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } /* Filter dropdown refinements */ .dropdown-menu .filter-item { margin: 0; } .dropdown-menu .filter-item:hover { background-color: rgba(0, 0, 0, 0.025); } .dropdown-menu .filter-item input:checked ~ .filter-count, .dropdown-menu .filter-item input:checked + .form-check-label { font-weight: 500; } .dropdown-menu .filter-item input:checked { /* no visual checkbox, but keeps state */ } .dropdown-menu .filter-item input:checked ~ * { /* hook for future styling if needed */ } .dropdown-menu .filter-item input:checked { /* no-op, state carrier only */ } .dropdown-menu .filter-item input:checked ~ .filter-count { color: #000; } #activeFilters .remove-icon { margin-left: .35rem; } .helios-segmented .btn { border-radius: 0 !important; } .helios-segmented .btn.is-selected { background-color: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary); border-color: rgba(var(--bs-primary-rgb), .35); } .helios-segmented.btn-group-vertical .btn:first-of-type { border-top-left-radius: 10px !important; border-top-right-radius: 10px !important; } .helios-segmented.btn-group-vertical { border-top: 1px solid var(--bs-border-color); border-top-left-radius: 10px !important; border-top-right-radius: 10px !important; } .helios-segmented.btn-group-vertical { border-top: 1px solid var(--bs-border-color); border-top-left-radius: 10px !important; border-top-right-radius: 10px !important; } .helios-segmented .btn.is-selected, .helios-segmented label.btn.is-selected { background-color: var(--orbit-primary); border-color: var(--orbit-primary); color: #ffffff; } .helios-segmented.btn-group-vertical .btn:first-of-type { border-top-width: 1px!important; } .helios-segmented.btn-group-vertical .btn:last-of-type { border-bottom-left-radius: 10px !important; border-bottom-right-radius: 10px !important; } .helios-segmented.btn-group:not(.btn-group-vertical) .btn:first-of-type { border-top-left-radius: 10px !important; border-bottom-left-radius: 10px !important; } .helios-segmented.btn-group:not(.btn-group-vertical) .btn:last-of-type { border-top-right-radius: 10px !important; border-bottom-right-radius: 10px !important; } /* User-menu dropdown (avatar rechtsboven sidebar). Design-patroon overgenomen van page-header Beheren-dropdown: - Container-padding 0.5rem, radius 12px - Items padding 0.75rem, subtle radius 0.375rem, margin 2px - Font-size 1rem, line-height 1.4, gap 0.75rem voor icons - Divider edge-to-edge via negatieve margin Kleur-strategie: user-menu is iets LICHTER dan sidebar + NEUTRALER (minder blauw-verzadigd). Voorkomt dat dropdown in light mode visueel wegsmelt in sidebar, en in dark mode "ingeplakte blauw-vlek" voelt tegen bijna-zwarte sidebar. - Light bg: #3d5470 (HSL 213°/30%/34%) — vs sidebar #223f67 (HSL 215°/50%/27%): +7 L-punten, -20 S-punten. Zelfde hue-familie voor visuele connectie, maar grijzer en lichter voor container-pop. - Dark bg (dark.css): #2a2f38 (HSL 219°/14%/19%) — vs sidebar #0b1220 (HSL 220°/49%/8%): +11 L-punten, -35 S-punten. Sterk gedesatureerd naar neutraal-grijs met subtiele blauw-undertone. - Tekst: wit - Hover: subtle wit-tint (rgba-wit 0.06) — werkt op beide bgs als subtiele lift - Active (match current route): blue-soft 20% tint — op neutraal-grijs bg duidelijker onderscheiden dan voorheen op blue bg, dus beter leesbare cue - Divider: wit-12% edge-to-edge */ #userManageMenu { width: 240px; /* !important om dark.css `#sidebar .dropdown-menu { bg: helios- surface-raised !important }` te overrulen. Dark-mode krijgt eigen override in dark.css. */ background-color: #3d5470 !important; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 0.5rem; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } #userManageMenu .dropdown-item { color: rgba(255, 255, 255, 0.92); border-radius: 0.375rem; padding: 0.75rem; margin: 2px 0; font-size: 1rem; line-height: 1.4; display: flex; align-items: center; gap: 0.75rem; } #userManageMenu .dropdown-item:hover, #userManageMenu .dropdown-item:focus { background-color: rgba(255, 255, 255, 0.06); color: #ffffff; } #userManageMenu .dropdown-item.active, #userManageMenu .dropdown-item[aria-current="page"] { background-color: rgba(var(--x-brand-blue-soft-rgb), 0.20); color: #ffffff; font-weight: 600; } #userManageMenu .dropdown-item.active:hover, #userManageMenu .dropdown-item[aria-current="page"]:hover { background-color: rgba(var(--x-brand-blue-soft-rgb), 0.26); } #userManageMenu .dropdown-item.text-danger { color: rgb(255, 138, 138); } #userManageMenu .dropdown-item.text-danger:hover, #userManageMenu .dropdown-item.text-danger:focus { background-color: rgba(var(--bs-danger-rgb), 0.18); color: rgb(255, 168, 168); } #userManageMenu .user-menu-icon { width: 18px; height: 18px; stroke-width: 2; opacity: 0.9; flex-shrink: 0; } /* Edge-to-edge divider via negatieve horizontale margin = container-padding. Verticale margin voor ritmische scheiding tussen actie-groepen. */ #userManageMenu .dropdown-divider { margin: 0.5rem -0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.12); opacity: 1; } /* Appearance section (theme-selector): subtle dark-tone label. Segmented-buttons behouden hun dark-blue palette (dark.css #userManageMenu .helios-segmented rules) omdat container zelf dark is in alle modes. */ #userManageMenu .small.text-muted { color: rgba(255, 255, 255, 0.55) !important; } #userManageMenu .helios-segmented { border: 1px solid rgba(255, 255, 255, 0.14); border-radius: .375rem; overflow: hidden; } #userManageMenu .helios-segmented .btn { /* Transparante rust-state + blauw-tint active, zodat de segmented-group dezelfde kleur-taal gebruikt als de user-menu items (hover 6% wit, active 20% blue-soft). !important op background-color overschrijft Bootstrap's .btn-light (--bs-btn-bg: #f8f9fa), die anders als "ingeplakt" witte vlak doorschijnt. Base-border 0 + right-border-1 op non-last-child = één gedeelde divider-lijn tussen knoppen. Geen dubbele lines door aangrenzende borders die optellen. Laatste knop heeft geen right-border want container zelf heeft die. */ background-color: transparent !important; border: 0 !important; border-right: 1px solid rgba(255, 255, 255, 0.14) !important; color: rgba(255, 255, 255, 0.85); --bs-btn-bg: transparent; --bs-btn-hover-bg: transparent; --bs-btn-active-bg: transparent; --bs-btn-color: rgba(255, 255, 255, 0.85); --bs-btn-hover-color: #ffffff; --bs-btn-active-color: #ffffff; border-radius: 0 !important; box-shadow: none !important; } #userManageMenu .helios-segmented .btn:last-child { border-right: 0 !important; } #userManageMenu .helios-segmented .btn:hover, #userManageMenu .helios-segmented .btn:focus-visible { background-color: rgba(255, 255, 255, 0.06) !important; color: #ffffff; } #userManageMenu .helios-segmented .btn.is-selected { background-color: rgba(var(--x-brand-blue-soft-rgb), 0.20) !important; color: #ffffff !important; font-weight: 600; } #userManageMenu .helios-segmented .btn.is-selected:hover { background-color: rgba(var(--x-brand-blue-soft-rgb), 0.26) !important; } html[data-theme="light"] #userManageMenu .helios-segmented .btn, html[data-theme="auto"] #userManageMenu .helios-segmented .btn { border-radius: 0; } html[data-theme="light"] #userManageMenu .helios-segmented .btn:first-child, html[data-theme="auto"] #userManageMenu .helios-segmented .btn:first-child { border-top-left-radius: .375rem; border-bottom-left-radius: .375rem; } html[data-theme="light"] #userManageMenu .helios-segmented .btn:last-child, html[data-theme="auto"] #userManageMenu .helios-segmented .btn:last-child { border-top-right-radius: .375rem; border-bottom-right-radius: .375rem; } span.small { font-size:12px; } .rounded { border-radius:10px; } /* Cards */ .card:not(.rounded):not(.rounded-pill) { border-radius: var(--orbit-radius); } .card:not(.rounded):not(.rounded-pill) { border-radius: var(--orbit-radius); } .card:not(.rounded):not(.rounded-pill) .card-header { border-top-left-radius: inherit; border-top-right-radius: inherit; } .card:not(.rounded):not(.rounded-pill) .card-footer { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } .alert:not(.rounded):not(.rounded-pill) { border-radius: var(--orbit-radius); } .btn:not(.rounded):not(.rounded-pill) { border-radius: var(--orbit-radius); } /* Re-apply Bootstrap btn-group corner-stripping after Orbit's .btn radius override above. The shorthand `border-radius: var(--orbit-radius)` resets all four corners, clobbering Bootstrap's per-corner zeros for middle/edge buttons inside a .btn-group. Without this, a 3-button group ends up with four rounded buttons instead of the expected round-square-round shape. */ .btn-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .btn-group > .btn:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .dropdown-menu:not(.rounded):not(.rounded-pill) { border-radius: var(--orbit-radius); } .modal-content:not(.rounded):not(.rounded-pill) { border-radius: var(--orbit-radius); } .form-control-plaintext { padding: .375rem .75rem; background-color: var(--helios-surface-sunken); border: 1px solid var(--helios-surface-selected); border-radius: 10px; color: #495057; } /* Slightly dim truly readonly values */ .form-control-plaintext[readonly] { opacity: .9; } .form-control:not(.rounded):not(.rounded-pill), .form-select:not(.rounded):not(.rounded-pill), .form-select-sm:not(.rounded):not(.rounded-pill) { border-radius: var(--orbit-radius); } .badge:not(.rounded):not(.rounded-pill) { border-radius: calc(var(--orbit-radius) / 1.5); } .no-focus-ring:focus, .no-focus-ring:focus-visible, .no-focus-ring:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } .no-focus-ring { -webkit-tap-highlight-color: transparent; } .dropdown-menu.dropdown-menu-primary { background:var(--orbit-primary)!important; } .dropdown-menu.dropdown-menu-primary li .dropdown-item { font-weight:500!important } .badge { display: inline-flex; align-items: center; line-height: 1; vertical-align: middle; } .timeline { position: relative; padding-left: 24px; } .timeline::before { content: ''; position: absolute; top: 0; bottom: 0; left: 8px; width: 2px; background: rgba(0,0,0,.1); } .timeline-marker { position: relative; width: 16px; flex-shrink: 0; } .timeline-dot { position: absolute; left: -20px; top: 10px; z-index: 1; width: 10px; height: 10px; background: var(--helios-muted); border-radius: 50%; } .card-body-update ul:last-child, .card-body-update p:last-child { margin-bottom: 0; } /* Must beat Bootstrap utility classes like .d-flex { display:flex !important; } */ .timeline-item.is-hidden { display: none !important; } .card-body.card-body-preview p:last-child, .card-body.card-body-preview ul:last-child, .card-body.card-body-preview ol:last-child { margin-bottom:0 } th[data-sort] { cursor: pointer; user-select: none; position: relative; padding-right: 18px; } th[data-sort]::after { content: "⇅"; font-size: 10px; opacity: 0.35; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); } th[data-sort].sort-asc::after { content: "▲"; opacity: 1; } th[data-sort].sort-desc::after { content: "▼"; opacity: 1; } .chart-container { position: relative; height: 180px; /* desktop */ } .badge.bg-info { background-color: var(--orbit-info-accent) !important; color: #ffffff; } .alert-info { background-color: var(--orbit-info-bg-subtle); border: 1px solid var(--orbit-info-accent); color: var(--orbit-primary-deep); } .drag-zone, .drag-handle { cursor: grab; } .drag-zone:active, .drag-handle:active { cursor: grabbing; } [data-sortable-item] { user-select: none; } .backend-mode-indicator { background-color: rgba(0, 0, 0, 0.2); background-image: linear-gradient( 45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent ); background-size: 1rem 1rem; border-top: 1px solid rgba(0, 0, 0, 0.08); } .component-actions { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; } .component-count { font-family: var(--bs-font-monospace); } .component-actions .badge { font-size: 0.75rem; padding: 0.35em 0.55em; line-height: 1; white-space: nowrap; } .component-visibility img { display: inline-block; opacity: .7; } .component-actions .btn, .component-actions .dropdown-toggle { padding: 0.25rem 0.45rem; font-size: 0.75rem; line-height: 1; } .component-actions img { width: 14px; height: 14px; } .component-actions .dropdown-menu { font-size: 0.85rem; } .component-item:last-child { margin-bottom: 0 !important; } .btn { font-weight:500 } .btn.btn-info { background-color: var(--orbit-info-accent); border-color: var(--orbit-info-accent); color: #ffffff; } .btn.btn-info:hover { background-color: var(--bs-info); border-color: var(--bs-info); color: #ffffff; } .btn-outline-info { border: 1px solid var(--orbit-info-accent); color: var(--orbit-primary-deep); background-color: transparent; } .btn-outline-info:hover { background-color: var(--orbit-info-accent); border-color: var(--orbit-info-accent); color: #ffffff; } .border-info { border-color: var(--orbit-info-accent) !important; } .text-info { color: var(--bs-info) !important; } .form-check.form-switch { display: flex; align-items: center; gap: 0.5rem; } .form-check.form-switch .form-check-input { margin-top: 0; flex-shrink: 0; } .form-check.form-switch .form-check-label { margin-bottom: 0; line-height: 1.4; } /* Loader spinner – Helios primary */ .spinner-border.text-primary, .spinner-grow.text-primary { color: var(--orbit-primary-deep) !important; } .bg-info-soft { background-color: var(--orbit-info-bg-subtle) !important; } .nav-item .nav-link, a { color:var(--orbit-primary-deep); } a:hover { color:#162a45; } .collapse-arrow { display: inline-flex; align-items: center; transition: transform .2s ease; } .card-header[aria-expanded="true"] .collapse-arrow { transform: rotate(180deg); } .pagination .page-link { color: var(--orbit-primary-deep); border-color: rgba(26, 49, 80, 0.15); background-color: #ffffff; font-weight: 500; min-width: 34px; text-align: center; } .pagination .page-link:hover { color: #ffffff; background-color: var(--orbit-primary-deep); border-color: var(--orbit-primary-deep); } .pagination .page-item.active .page-link { background-color: var(--orbit-primary-deep); border-color: var(--orbit-primary-deep); color: #ffffff; font-weight: 600; } .pagination .page-item.disabled .page-link { color: rgba(26, 49, 80, 0.4); background-color: #f5f6f8; border-color: rgba(26, 49, 80, 0.1); cursor: default; } .pagination .page-link:focus { box-shadow: none; } /* Form toggle buttons – Helios style */ .form-check-input { cursor: pointer; } .form-check-input:checked { background-color: var(--orbit-primary-deep); border-color: var(--orbit-primary-deep); } .form-check-input:focus { box-shadow: none; border-color: rgba(26, 49, 80, 0.4); } /* Switch specific */ .form-switch .form-check-input { width: 2.25em; height: 1.25em; } .form-switch .form-check-input:checked { background-color: var(--orbit-primary-deep); } .form-switch .form-check-input:checked::before { background-color: #ffffff; } /* Button toggle groups (btn-check) */ .btn-check:checked + .btn.btn-secondary, .btn-check:checked + .btn.btn-primary { background-color: var(--orbit-primary-deep); border-color: var(--orbit-primary-deep); color: #ffffff; } .bg-primary { background-color: var(--orbit-primary) !important; color: #fff; --bs-badge-bg: var(--orbit-primary); --bs-badge-color: #fff; } .btn-check:focus + .btn, .btn-check:hover + .btn { box-shadow: none; } label.btn-outline-tertiary.is-selected { background-color: var(--orbit-primary); border-color: var(--orbit-primary); color: #ffffff; } label.btn-outline-tertiary.is-selected { background-color: var(--bs-tertiary-bg); color: var(--bs-tertiary-color); border-color: var(--bs-tertiary-border-subtle); } label.btn.is-selected:focus, label.btn.is-selected:focus-visible, label.btn.is-selected:hover { background-color: inherit; color: inherit; } .btn-outline-secondary.btn-toggle { color: var(--orbit-primary-deep); border-color: rgba(26, 49, 80, 0.25); } .btn-outline-secondary.btn-toggle:hover { background-color: var(--orbit-primary-deep); color: #ffffff; } #serverDropdown.btn-outline-secondary { background-color: #ffffff; color: var(--orbit-primary-deep); } #serverDropdown.btn-outline-secondary:hover, #serverDropdown.btn-outline-secondary:focus { background-color: #f8f9fb; color: var(--orbit-primary-deep); border-color: rgba(26, 49, 80, 0.25); box-shadow: none; } #serverDropdown.btn-outline-secondary.show, #serverDropdown.btn-outline-secondary:active { background-color: #ffffff; color: var(--orbit-primary-deep); border-color: rgba(26, 49, 80, 0.35); box-shadow: none; } .badge .lock-icon { height: 10px; width: auto; display: block; } .remove-icon { width: 16px; height: 16px; transition: filter 0.15s ease-in-out; } .btn-outline-primary:hover .invert-icon, .btn-outline-secondary:hover .invert-icon { filter: invert(1); } .btn-outline-danger:hover .remove-icon { filter: brightness(0) invert(1); } .agent-alt-card { opacity: 0.3; transition: opacity 0.2s ease-in-out; } .agent-alt-card:hover { opacity: 1; } .card .card-header { padding-top:10px; padding-bottom:10px } .card .card-header p.fw-semibold, .nav.nav-pills .nav-link { font-size:16px } /* Prevent tab titles from wrapping to multiple lines (centered text) */ .nav.nav-pills .nav-link { display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Ensure tab title truncates while badge remains visible */ .nav.nav-pills .nav-link > span:first-of-type { overflow: hidden; text-overflow: ellipsis; } .chart-container { height: 300px; } .card.card-login { border-radius:10px } .nav.nav-pills .nav-link.active { background:var(--orbit-primary); } /* Tab count badges – subtle Helios style. !important nodig om Bootstrap's `.bg-*` utility-overrides te neutraliseren. Eén regel dekt alle bg-varianten af zodat templates `bg-primary`, `bg-secondary`, `bg-info`, etc. kunnen gebruiken zonder visuele inconsistentie. */ .nav.nav-pills .nav-link .badge { margin-left: 6px; font-size: 11px; font-weight: 600; padding: 3px 7px; border-radius: 999px; line-height: 1; background-color: rgba(26, 49, 80, 0.08) !important; color: rgba(26, 49, 80, 0.75) !important; } /* Active tab count badge – iets prominenter tegen donkere pill */ .nav.nav-pills .nav-link.active .badge { background-color: rgba(255, 255, 255, 0.55) !important; color: rgba(26, 49, 80, 0.9) !important; } /* Dark backgrounds (safety for reused pills) */ .nav.nav-pills.bg-dark .nav-link .badge, .nav.nav-pills.bg-tertiary .nav-link .badge { background-color: rgba(255, 255, 255, 0.25) !important; color: #ffffff !important; } .table tr.table-dark th { background:var(--orbit-primary-deep) } .status-field.is-invalid .invalid-feedback { display: block; } .btn-outline-primary { border:1px solid var(--orbit-primary)!important; color:var(--orbit-primary); } .btn-outline-primary:hover { border:1px solid var(--orbit-primary)!important; background:var(--orbit-primary); color:#fff } .btn-outline-primary { border:1px solid var(--orbit-primary)!important; color:#8e8e8e; } .btn-outline-primary:hover { border:1px solid var(--orbit-primary)!important; background:var(--orbit-primary); color:#fff } .btn-check:checked + .btn-outline-primary { --bs-btn-active-bg: var(--orbit-primary); --bs-btn-active-border-color: var(--orbit-primary); --bs-btn-active-color: #ffffff; } .btn.btn-link { color:var(--orbit-primary) } .btn.btn-primary { background:var(--orbit-primary); border:1px solid var(--orbit-primary); } .card .card-header.bg-primary { background-color: var(--orbit-primary)!important; color: #ffffff!important; border-bottom: 1px solid rgba(0, 0, 0, 0.08)!important; } .text-success { color:var(--bs-success)!important; } .alert-success { background-color: rgba(152, 190, 97, 0.18); /* zachte achtergrond */ border: 1px solid var(--bs-success); color: #1f2d16; /* donker, goed leesbaar groen */ } .progress-bar.bg-success, .badge.bg-success, .btn.btn-success { background:var(--bs-success)!important; } .btn.btn-success:hover { background:#88AB57!important; } .toast.text-bg-success { background-color: var(--bs-success) !important; color: #ffffff; } .toast.text-bg-success .btn-close { filter: invert(1); } .dropdown-menu .dropdown-item.active, .dropdown-menu .dropdown-item:active { background-color: rgba(26, 49, 80, 0.12); /* subtiele Helios-blauw tint */ color: var(--orbit-primary-deep); font-weight: 600; } .dropdown-menu .dropdown-item.active:hover { background-color: rgba(26, 49, 80, 0.18); color: var(--orbit-primary-deep); } .btn.btn-success { border:1px solid var(--bs-success); } .border-success { border-color:var(--bs-success)!important; } .border-primary { border-color:var(--orbit-primary)!important; } h1, h2, h3, h4, h5, h6 { word-break: break-word; overflow-wrap: break-word; } table td, table th { white-space: nowrap; } /* DataTables sort icons: Bootstrap Icons chevrons via SVG (font file not available) */ table.dataTable thead > tr > th span.dt-column-order::before, table.dataTable thead > tr > td span.dt-column-order::before { content: "" !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; width: 10px; height: 10px; opacity: 0.55; } table.dataTable thead > tr > th span.dt-column-order::after, table.dataTable thead > tr > td span.dt-column-order::after { content: "" !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; width: 10px; height: 10px; opacity: 0.55; } table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::before, table.dataTable thead > tr > td.dt-ordering-asc span.dt-column-order::before, table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::after, table.dataTable thead > tr > td.dt-ordering-desc span.dt-column-order::after { opacity: 1; } /* Rounded corners on bordered tables. Bootstrap's .rounded utility doesn't visually apply to tables with default border-collapse: collapse because inner-cell borders paint over outer corners. Fix: switch to border-collapse: separate, hide overflow on the table, and apply corner-specific radii to outermost cells. Works for tables with or without by targeting both th and td on first/last rows. */ /* Stat-card tinted footer for Δ-indicator / trend context. Distinct from Bootstrap's .card-footer (which dark.css already styles as a sunken neutral block). Use as a sibling to .card-body inside a stat-card. Each semantic variant pairs with the matching card-color per design-system.md §7b. Light-mode uses Bootstrap's *-text-emphasis vars for guaranteed contrast on the soft tint. Dark-mode overrides live in dark.css. */ .stat-card-footer { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; font-size: 0.8125rem; line-height: 1.3; border-top: 1px solid rgba(0, 0, 0, 0.06); background-color: rgba(0, 0, 0, 0.03); color: var(--helios-muted, #6c757d); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; } .stat-card-footer-info { background-color: rgba(var(--bs-info-rgb), 0.15); color: var(--bs-info-text-emphasis); border-top-color: rgba(var(--bs-info-rgb), 0.25); } .stat-card-footer-success { background-color: rgba(var(--bs-success-rgb), 0.15); color: var(--bs-success-text-emphasis); border-top-color: rgba(var(--bs-success-rgb), 0.25); } .stat-card-footer-warning { background-color: rgba(var(--bs-warning-rgb), 0.20); color: var(--bs-warning-text-emphasis); border-top-color: rgba(var(--bs-warning-rgb), 0.30); } .stat-card-footer-danger { background-color: rgba(var(--bs-danger-rgb), 0.15); color: var(--bs-danger-text-emphasis); border-top-color: rgba(var(--bs-danger-rgb), 0.25); } .stat-card-footer-dark { background-color: rgba(var(--bs-dark-rgb), 0.10); color: var(--bs-dark-text-emphasis); border-top-color: rgba(var(--bs-dark-rgb), 0.18); } /* Stat-card info-tip button — top-right positioned, button element so it's keyboard-focusable. Pair with `position-relative` on the parent .card. Pattern: replaces the prior "icon next to label" placement so it doesn't compete with the label for attention. */ .stat-card-info-icon { position: absolute; top: 0.5rem; right: 0.5rem; background: transparent; border: 0; padding: 0.125rem 0.25rem; line-height: 1; color: var(--helios-muted, #6c757d); opacity: 0.55; border-radius: 50%; transition: opacity 0.15s ease, color 0.15s ease; cursor: help; z-index: 2; } .stat-card-info-icon:hover, .stat-card-info-icon:focus-visible { opacity: 1; color: var(--orbit-primary, #1d3557); outline: none; } .stat-card-info-icon .bi { font-size: 0.95rem; } /* Consistent spacing between an icon and text inside a .badge. Single-space-character separator is unreliable across font/zoom combinations; this rule guarantees the gap. Affects every badge in Orbit. */ .badge > .bi:first-child, .badge > i.bi:first-child { margin-right: 0.3em; } .badge > .bi:last-child:not(:first-child), .badge > i.bi:last-child:not(:first-child) { margin-right: 0; margin-left: 0.3em; } /* ============================================================ Cycle E redesign — Page-header architectuur-reset ============================================================ Platte layout zonder card-wrapper. Breadcrumb boven, title + icon-badge links, actions rechts (desktop) of onderin (mobile). Dotted divider onder het geheel. Acties zijn `.page-header-btn` componenten; mobile Beheren-menu gebruikt Bootstrap Offcanvas (bottom). 100% Lucide icons. */ /* Spacing-hiërarchie (foundation-iteratie — sectie-feel): De header ademt onder (margin-bottom op wrapper + margin-top op divider) zodat hij als eigen sectie leest, niet als prefix van content. Interne gaps zijn ritmisch: breadcrumb→title tight (ze horen bij elkaar als "page-label"), title→intro nog tighter (intro is continuation van title), intro→divider generous (signaal sectie-einde). Mobile gebruikt dezelfde ritmiek gecompressed. Top-padding is 0: de view-container wrap (`.container-fluid py-4`) levert al 1.5rem padding-top, wat gelijk is aan de horizontal padding `px-md-4` (1.5rem) op desktop. Zo zijn top-offset en side-offset symmetrisch zonder dat we de container hoeven aan te raken. Op mobiel blijft de container's `py-4` 1.5rem dominant; een strikte mobile- symmetry met `px-3` (1rem) of `px-2` (0.5rem) zou container- padding requires, buiten scope van deze iteratie. */ .page-header { position: relative; padding-top: 0; padding-bottom: 0; margin-bottom: 2rem; } .page-header-breadcrumb { margin-bottom: 0.75rem; } .page-header-breadcrumb .breadcrumb { font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; margin: 0; color: var(--bs-secondary-color); } .page-header-breadcrumb .breadcrumb-item, .page-header-breadcrumb .breadcrumb-item.active { color: var(--bs-secondary-color); } .page-header-breadcrumb .breadcrumb a { color: var(--bs-secondary-color); text-decoration: none; opacity: 0.85; } .page-header-breadcrumb .breadcrumb a:hover { opacity: 1; color: var(--bs-body-color); } .page-header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; /* Uniform hoogte: title-row heeft altijd minstens button- hoogte, ongeacht of er actions staan. Zonder deze min-height zou de row collapsen naar title-height op views zonder actions → title-baseline schuift omhoog, breadcrumb-naar-title spacing oogt inconsistent vergeleken met views waar row button-hoog is. */ min-height: 2.75rem; } .page-header-title-block { display: flex; align-items: center; gap: 0.75rem; min-width: 0; flex: 1 1 auto; } .page-header-title { font-size: 2.25rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; color: var(--bs-body-color); margin: 0; min-width: 0; word-break: break-word; } .page-header-intro { margin: 0.5rem 0 0; font-size: 0.9375rem; color: var(--bs-secondary-color); max-width: 72ch; } .page-header-divider { margin: 1.5rem 0 0; border: 0; border-top: 1px dotted var(--bs-border-color); opacity: 1; height: 0; } /* ---- Actions-row ---- */ .page-header-actions { display: flex; gap: 0.5rem; align-items: center; flex-shrink: 0; flex-wrap: wrap; } /* ---- Button component ---- */ .page-header-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 2.75rem; padding: 0.5rem 0.9rem; font-size: 0.9375rem; font-weight: 600; line-height: 1.3; border-radius: 8px; border: 1px solid transparent; background-color: transparent; color: var(--bs-body-color); text-decoration: none; cursor: pointer; transition: transform 0.1s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; white-space: nowrap; } .page-header-btn svg, .page-header-btn i { width: 16px; height: 16px; stroke-width: 2; flex: 0 0 auto; } .page-header-btn:focus-visible { outline: 2px solid rgba(var(--x-brand-blue-rgb), 0.50); outline-offset: 2px; } .page-header-btn:active { transform: translateY(1px); } /* Dropdown-toggle: caret-less (cleaner with Lucide chevron-icon in label) */ .page-header-btn.dropdown-toggle::after { display: none; } /* Back modifier — icon-only, neutraal tint */ .page-header-btn-back { min-width: 2.75rem; padding: 0.5rem 0.75rem; background-color: rgba(var(--x-brand-blue-deep-rgb), 0.04); color: var(--x-brand-blue-deep); border-color: rgba(var(--x-brand-blue-deep-rgb), 0.14); box-shadow: 0 1px 2px rgba(var(--x-brand-blue-deep-rgb), 0.04); } .page-header-btn-back:hover, .page-header-btn-back:focus-visible { background-color: rgba(var(--x-brand-blue-deep-rgb), 0.10); color: var(--x-brand-blue-deep); border-color: rgba(var(--x-brand-blue-deep-rgb), 0.22); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(var(--x-brand-blue-deep-rgb), 0.10); } /* Primary modifier — accent-oranje, prominent */ .page-header-btn-primary { background-color: var(--orbit-accent); color: var(--orbit-on-accent); border-color: var(--orbit-accent); border-bottom: 2px solid var(--orbit-accent-deep); box-shadow: 0 2px 6px rgba(var(--x-brand-orange-rgb), 0.25); } .page-header-btn-primary:hover, .page-header-btn-primary:focus-visible { background-color: var(--orbit-accent-hover); color: var(--orbit-on-accent); border-color: var(--orbit-accent-hover); border-bottom-color: var(--orbit-accent-deep); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(var(--x-brand-orange-rgb), 0.35); } .page-header-btn-primary:active { background-color: var(--orbit-accent-deep); border-color: var(--orbit-accent-deep); border-bottom-width: 1px; color: var(--orbit-on-accent); transform: translateY(1px); box-shadow: 0 1px 3px rgba(var(--x-brand-orange-rgb), 0.20); } /* Secondary modifier — licht blauw-tint */ .page-header-btn-secondary { background-color: rgba(var(--x-brand-blue-rgb), 0.06); color: var(--x-brand-blue-deep); border-color: rgba(var(--x-brand-blue-deep-rgb), 0.18); box-shadow: 0 1px 2px rgba(var(--x-brand-blue-deep-rgb), 0.04); } .page-header-btn-secondary:hover, .page-header-btn-secondary:focus-visible { background-color: rgba(var(--x-brand-blue-rgb), 0.10); color: var(--x-brand-blue-deep); border-color: rgba(var(--x-brand-blue-deep-rgb), 0.28); transform: translateY(-1px); box-shadow: 0 3px 8px rgba(var(--x-brand-blue-deep-rgb), 0.10); } /* ---- Desktop dropdown-menu (Bootstrap, Popper-positioned) */ /* Container: eigen radius, padding rondom items zodat items tile-achtig in container "drijven" met subtle gap. */ .page-header-actions .dropdown-menu { --bs-dropdown-bg: #ffffff; border: 1px solid var(--bs-border-color); border-radius: 12px; padding: 0.5rem; box-shadow: 0 8px 24px rgba(var(--x-brand-blue-deep-rgb), 0.14); min-width: 240px; } /* Items: body-font-size (1rem), ruimere padding, subtiele radius (tile-look), icon-label gap 0.75rem voor Lucide stroke-icons. */ .page-header-actions .dropdown-menu .dropdown-item { border-radius: 0.375rem; padding: 0.75rem; margin: 2px 0; font-size: 1rem; line-height: 1.4; display: flex; align-items: center; gap: 0.75rem; } .page-header-actions .dropdown-menu .dropdown-item svg, .page-header-actions .dropdown-menu .dropdown-item i { width: 18px; height: 18px; stroke-width: 2; flex: 0 0 auto; } /* Divider: edge-to-edge door container-padding via negatieve horizontale margin. Verticale margin behouden voor ritmische scheiding tussen actie-groepen. */ .page-header-actions .dropdown-menu .dropdown-divider { margin: 0.5rem -0.5rem; border-top: 1px solid var(--bs-border-color); opacity: 1; } /* Danger-items: zelfde radius + body als regular items; alleen bg + text-color wijken af. */ .page-header-actions .dropdown-menu li.bg-danger { background-color: rgba(var(--bs-danger-rgb), 0.9) !important; border-radius: 0.375rem; margin: 2px 0; } .page-header-actions .dropdown-menu li.bg-danger .dropdown-item { color: #ffffff; background-color: transparent; } .page-header-actions .dropdown-menu li.bg-danger .dropdown-item:hover { background-color: rgba(0, 0, 0, 0.15); color: #ffffff; } /* ---- Mobile offcanvas-bottom (Beheren menu) Header-loos design — geen close-X, geen title-bar. Content drijft op natuurlijke hoogte met 70vh safety-cap. Sluit via buiten-tap of swipe-down (Bootstrap native behavior). */ .page-header-offcanvas { height: auto !important; max-height: 70vh; border-top-left-radius: 1rem; border-top-right-radius: 1rem; border-top: 1px solid var(--bs-border-color); background-color: #ffffff; } /* Body-padding 0.5rem matcht dropdown — items tile-achtig binnen container. Divider breekt uit via negatieve margin. */ .page-header-offcanvas .offcanvas-body { padding: 0.5rem; padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)); overflow-y: auto; } .page-header-offcanvas-list { list-style: none; margin: 0; padding: 0; } .page-header-offcanvas-list > li { margin: 0; } /* Items: body-font-size (1rem), subtiele radius voor tile-look, ruime padding voor comfortabele tap-targets op mobile. */ .page-header-offcanvas-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.875rem 0.75rem; margin: 2px 0; min-height: 3rem; color: var(--bs-body-color); background-color: transparent; border: 0; border-radius: 0.375rem; text-align: left; text-decoration: none; font-size: 1rem; font-weight: 500; line-height: 1.4; cursor: pointer; transition: background-color 0.12s ease; } .page-header-offcanvas-item:hover, .page-header-offcanvas-item:focus-visible { background-color: rgba(var(--x-brand-blue-rgb), 0.08); color: var(--x-brand-blue-deep); outline: none; } .page-header-offcanvas-item svg, .page-header-offcanvas-item i { width: 18px; height: 18px; stroke-width: 2; flex: 0 0 auto; } .page-header-offcanvas-item.is-danger { color: var(--bs-danger); } .page-header-offcanvas-item.is-danger:hover, .page-header-offcanvas-item.is-danger:focus-visible { background-color: rgba(var(--bs-danger-rgb), 0.10); color: var(--bs-danger); } /* Divider edge-to-edge via negatieve horizontale margin = container-padding. */ .page-header-offcanvas-divider { border: 0; border-top: 1px solid var(--bs-border-color); margin: 0.5rem -0.5rem; } /* Section label: horizontaal-align met items (0.75rem padding + container's 0.5rem = 1.25rem van offcanvas-rand). */ .page-header-offcanvas-section { padding: 0.75rem 0.75rem 0.25rem; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bs-secondary-color); font-weight: 600; } /* ---- Mobile layout ---- Compacte spacing met dezelfde ritme-verhoudingen als desktop (breadcrumb tight, intro tight onder title, divider met extra ruimte erboven als sectie-einde-signaal). */ @media (max-width: 575.98px) { .page-header { padding-top: 0; padding-bottom: 0; margin-bottom: 1.25rem; } .page-header-breadcrumb { margin-bottom: 0.5rem; } .page-header-row { flex-direction: column; align-items: stretch; gap: 0.625rem; } .page-header-title-block { width: 100%; } .page-header-title { font-size: 1.5rem; line-height: 1.2; } .page-header-intro { margin-top: 0.375rem; } .page-header-actions { width: 100%; justify-content: flex-start; gap: 0.5rem; } .page-header-actions > .page-header-btn { flex: 1 1 auto; } .page-header-actions > .page-header-btn-back { flex: 0 0 auto; } .page-header-divider { margin-top: 1rem; } } /* ---- Accent button (brand oranje CTA) -------------------- */ /* Physical feel: border-bottom-2px darker tint gives depth (the button looks "standing up"). On :active we reduce the border-bottom to 1px and translateY(+1px) — the button visibly "pushes in". */ .btn-accent { background-color: var(--orbit-accent); border-color: var(--orbit-accent); border-bottom: 2px solid var(--orbit-accent-deep); color: var(--orbit-on-accent); box-shadow: 0 2px 6px rgba(var(--x-brand-orange-rgb), 0.25); transition: transform 0.1s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, border-bottom-width 0.1s ease; } .btn-accent:hover, .btn-accent:focus-visible { background-color: var(--orbit-accent-hover); border-color: var(--orbit-accent-hover); border-bottom-color: var(--orbit-accent-deep); color: var(--orbit-on-accent); box-shadow: 0 4px 10px rgba(var(--x-brand-orange-rgb), 0.35); transform: translateY(-1px); } .btn-accent:active, .btn-accent.active { background-color: var(--orbit-accent-deep); border-color: var(--orbit-accent-deep); border-bottom-width: 1px; color: var(--orbit-on-accent); box-shadow: 0 1px 3px rgba(var(--x-brand-orange-rgb), 0.20); transform: translateY(1px); } .btn-accent:disabled, .btn-accent.disabled { background-color: var(--orbit-accent); border-color: var(--orbit-accent); color: var(--orbit-on-accent); opacity: 0.6; box-shadow: none; transform: none; } /* Icon spacing consistent with other bi-icon-in-button patterns */ .btn-accent > .bi:first-child { margin-right: 0.4em; } .btn-outline-accent { background-color: transparent; border-color: var(--orbit-accent); color: var(--orbit-accent); transition: background-color 0.15s ease, color 0.15s ease; } .btn-outline-accent:hover, .btn-outline-accent:focus-visible { background-color: var(--orbit-accent); border-color: var(--orbit-accent); color: var(--orbit-on-accent); } /* ---- Sidebar active-state + sub-item tints --------------- Active-leaf-nav-link: bg-tint (blue-soft) zonder border-left. Alleen voor leaf-links die naar concrete views wijzen — de section-header toggles hebben geen `.active` class, dus `#sidebar .nav-link.active` raakt alleen leaf-items. Sub- items krijgen nog steeds een subtle baseline-tint zodat het accordion-groep-gevoel behouden blijft. */ /* Rust-state: transparent. Alleen hover + active krijgen tint zodat items visueel rustig zijn in idle-state. Hover subtle (rgba-wit 0.04), active duidelijk (blue-soft 0.18) — 4× alpha-sprong tussen hover en active maakt active- state onmiddellijk herkenbaar. */ #sidebar .nav-link { background-color: transparent; } #sidebar .nav-link:hover { background-color: rgba(255, 255, 255, 0.04); } #sidebar .nav-link.active { background-color: rgba(var(--x-brand-blue-soft-rgb), 0.18); color: #ffffff; } /* Sub-items in collapse-accordion: identiek aan top-level, geen extra baseline-tint meer. */ #sidebar .collapse .nav-link.active { background-color: rgba(var(--x-brand-blue-soft-rgb), 0.22); color: #ffffff; } /* ---- Icon badges (soft circular icon chips) -------------- */ .icon-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; flex-shrink: 0; font-size: 0.875rem; line-height: 1; } .icon-badge-success { background-color: rgba(var(--bs-success-rgb), 0.15); color: var(--bs-success); } .icon-badge-accent { background-color: var(--orbit-accent-subtle); color: var(--orbit-accent); } .icon-badge-info { background-color: rgba(var(--bs-info-rgb), 0.15); color: var(--bs-info); } .icon-badge-warning { background-color: rgba(var(--bs-warning-rgb), 0.20); color: #b38318; } .icon-badge-danger { background-color: rgba(var(--bs-danger-rgb), 0.12); color: var(--bs-danger); } .icon-badge-secondary { background-color: rgba(var(--bs-secondary-rgb), 0.15); color: var(--bs-secondary); } /* ---- Card shadow refresh (global) ------------------------ */ /* Softer shadow + subtle border to align with xynta.com brand. Replaces Bootstrap's default by being more specific / later in cascade. God-file views that rely on default card styling keep working; views with .shadow-sm / .shadow-none utility classes override this as before. */ .card { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); border: 1px solid var(--helios-border-subtle); /* Surface-bg override op component-level — Bootstrap 5.3.8 defineert `--bs-card-bg: var(--bs-body-bg)` lokaal binnen `.card{...}` wat :root-override shadowt. Component-level override werkt wel (gelijke specificity, later in source). */ --bs-card-bg: #ffffff; } /* Overige Bootstrap surface-components met lokale bg-tokens. Dezelfde shadowing-truc als .card — moet op component-level, :root is no-op. */ .modal { --bs-modal-bg: #ffffff; --bs-modal-color: var(--bs-body-color); --bs-modal-border-color: var(--bs-border-color); --bs-modal-header-bg: #ffffff; --bs-modal-footer-bg: #ffffff; } .accordion { --bs-accordion-bg: #ffffff; } .list-group { --bs-list-group-bg: #ffffff; } .dropdown-menu { --bs-dropdown-bg: #ffffff; } .nav-tabs { --bs-nav-tabs-link-active-bg: #ffffff; } /* Form-control heeft geen --bs-form-control-bg token in Bootstrap 5.3 — Bootstrap gebruikt `background-color: var(--bs-body-bg)` direct. Directe background-color override nodig. */ .form-control, .form-select { background-color: #ffffff; } /* ============================================================ */ /* Align table cells inside a .card with .card-header padding (px-3 px-md-4). Apply via when the table sits flush inside .card-body.p-0. Without this, table-cells use their own padding (often Bootstrap default 0.5rem) and visually misalign with the card title above. See design-system.md §7c references; pattern documented organically as more views adopt it. */ .card-table > thead > tr > th:first-child, .card-table > tbody > tr > td:first-child { padding-left: 1rem; /* matches Bootstrap .px-3 = 16px */ } .card-table > thead > tr > th:last-child, .card-table > tbody > tr > td:last-child { padding-right: 1rem; } @media (min-width: 768px) { .card-table > thead > tr > th:first-child, .card-table > tbody > tr > td:first-child { padding-left: 1.5rem; /* matches Bootstrap .px-md-4 = 24px */ } .card-table > thead > tr > th:last-child, .card-table > tbody > tr > td:last-child { padding-right: 1.5rem; } } .helios-table-rounded { border-collapse: separate; border-spacing: 0; overflow: hidden; } .helios-table-rounded tr:first-child th:first-child, .helios-table-rounded tr:first-child td:first-child { border-top-left-radius: var(--orbit-radius); } .helios-table-rounded tr:first-child th:last-child, .helios-table-rounded tr:first-child td:last-child { border-top-right-radius: var(--orbit-radius); } .helios-table-rounded tr:last-child td:first-child, .helios-table-rounded tr:last-child th:first-child { border-bottom-left-radius: var(--orbit-radius); } .helios-table-rounded tr:last-child td:last-child, .helios-table-rounded tr:last-child th:last-child { border-bottom-right-radius: var(--orbit-radius); } @media (max-width: 767.98px) { .orbit-table-mobile { border: 0; width: 100%; min-width: 100%; table-layout: fixed; } .table-responsive > .orbit-table-mobile { width: 100% !important; min-width: 100% !important; } .table-responsive.orbit-table-mobile-wrap { overflow-x: visible; } .orbit-table-mobile tbody, .orbit-table-mobile tbody tr { width: 100%; box-sizing: border-box; } .orbit-table-mobile.table-bordered > :not(caption) > * > * { border: 0; } .orbit-table-mobile thead { display: none; } .orbit-table-mobile tbody tr { display: block; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: var(--orbit-radius); margin-bottom: 0.65rem; overflow: hidden; position: relative; box-shadow: none; } .orbit-table-mobile tbody td { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.8rem; border-top: 0; text-align: left !important; white-space: normal !important; background: transparent; } .orbit-table-mobile tbody tr:nth-child(even) { background: #f8f9fb; } .orbit-table-mobile tbody td[data-label]::before { content: attr(data-label); font-weight: 600; color: var(--helios-muted); font-size: 0.75rem; letter-spacing: 0.02em; text-transform: uppercase; flex: 0 0 40%; } .orbit-table-mobile td.orbit-table-actions { display: block; padding: 0.65rem 0.8rem; } /* Acties-cell heeft geen kolomlabel nodig op mobiel — de knoppen spreken voor zich. Onderdrukt het [data-label]::before pseudo zodat templates met of zonder data-label op de actions-td consistent renderen. */ .orbit-table-mobile td.orbit-table-actions[data-label]::before { content: none; } .orbit-table-mobile td.orbit-table-actions .d-grid, .orbit-table-mobile td.orbit-table-actions .d-md-flex, .orbit-table-mobile td.orbit-table-actions .d-flex { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); align-items: stretch; gap: 0.5rem !important; } .orbit-table-mobile td.orbit-table-actions .dropdown { width: 100%; } .orbit-table-mobile td.orbit-table-actions form, .orbit-table-mobile td.orbit-table-actions .btn { width: 100%; } .orbit-table-mobile td.orbit-table-actions .btn { justify-content: center; } .orbit-table-mobile tbody tr:last-child { margin-bottom: 0; } .orbit-table-mobile code { white-space: normal; word-break: break-word; } .orbit-table-mobile .text-truncate { max-width: none !important; overflow: visible; text-overflow: unset; white-space: normal !important; } .orbit-table-mobile td .text-muted.small { display: none; } /* Tabs op mobiel: VERTICAAL stapelen i.p.v. horizontaal scrollen. Horizontale scroll verbergt tabs achter de viewport-rand en is makkelijk te missen. Een gestapelde lijst is direct zichtbaar en discoverable. Werkt voor zowel `.nav-tabs` als `.nav-pills`, en negeert Bootstrap's `row row-cols-N` grid + `g-*` gutters op mobiel zodat er geen dubbele spacing ontstaat. */ .nav.nav-tabs, .nav.nav-pills { flex-direction: column; flex-wrap: nowrap; row-gap: 0.25rem; margin-bottom: 1rem !important; --bs-gutter-x: 0; --bs-gutter-y: 0; } .nav.nav-tabs > .nav-item, .nav.nav-pills > .nav-item, .nav.nav-tabs > .col, .nav.nav-pills > .col { padding-left: 0; padding-right: 0; margin-top: 0; } .nav.nav-tabs .nav-item, .nav.nav-pills .nav-item { flex: 0 0 auto; width: 100%; max-width: 100%; } .nav.nav-tabs .nav-link, .nav.nav-pills .nav-link { width: 100%; justify-content: space-between; text-align: left; white-space: normal; } .form-select, .form-control, .nav-link, .dropdown-item { min-height: 44px; } /* .btn krijgt op mobiel iets meer vertical padding i.p.v. een min-height: 44px forcering. min-height gaf ~14px extra symmetrische ruimte die door icon/baseline-verschillen visueel als asymmetrische bottom-padding oogde. Padding schaalt de knop natural mee met zijn inhoud en respecteert size-modifiers (.btn-sm, .btn-lg) automatisch. WCAG 2.5.5 tap-target blijft voldaan (~42px hoogte). */ .btn { --bs-btn-padding-y: 0.5625rem; } /* 2FA one-time-code cluster: 6 single-digit inputs side-by-side. Onder 400px krimpen ze gelijkmatig i.p.v. te overflowen. */ #twofa-code-inputs .form-control { min-height: 0; } } #twofa-code-inputs .form-control { width: 48px; font-size: 1.25rem; text-align: center; } /* Pre-xs edge for 2FA input cluster on small phones */ @media (max-width: 400px) { #twofa-code-inputs { gap: 0.375rem; } #twofa-code-inputs .form-control { width: auto; flex: 1 1 0; min-width: 0; font-size: 1.1rem; } } /* Action-dropdowns (listings, stats, detail-toolbars). Natural 260px op tablet+, volle viewport-breedte op smalle telefoons. */ .dropdown-menu.dropdown-menu-action { width: 260px; } @media (max-width: 575.98px) { .dropdown-menu.dropdown-menu-action { width: calc(100vw - 2rem); max-width: 260px; } } /* Right-aligned dropdowns force-left-align op smalle telefoons om viewport-clip te voorkomen. Popper's flip-middleware zou dit normaal al regelen, maar de fixed-strategy patch in footer.php maakt flip-gedrag onbetrouwbaar. !important is nodig om Popper's inline left: style te overrulen. */ @media (max-width: 575.98px) { .dropdown-menu.dropdown-menu-end { --bs-position: start; left: 0 !important; right: auto !important; } } @media (min-width: 768px) { .table-responsive.orbit-table-mobile-wrap { overflow: visible !important; overflow-x: visible !important; overflow-y: visible !important; } .table-responsive.orbit-table-mobile-wrap > .table.orbit-table-mobile { overflow: visible !important; } .table-responsive.orbit-table-mobile-wrap .orbit-table-actions, .table-responsive.orbit-table-mobile-wrap .orbit-table-actions .dropdown { position: relative; overflow: visible; } .table-responsive.orbit-table-mobile-wrap .orbit-table-actions .dropdown, .table-responsive.orbit-table-mobile-wrap .orbit-table-actions .btn { width: auto !important; } .table-responsive.orbit-table-mobile-wrap .orbit-table-actions .btn { justify-content: center; } } h1,h2,h3,h4,h5 { font-family:'Unbounded',sans-serif; text-transform:uppercase; } h5.modal-title { font-size:16px; font-weight:600!important } .badge { font-weight:500; text-transform:uppercase; } /* ──────────────────────────────────────────────────────────── SIDEBAR Desktop layout + nav-link staten + inner dropdown-menu. Sidebar is altijd aanwezig (desktop); op mobile rendert dezelfde markup als offcanvas. Dark-mode overrides (#sidebar *) staan in dark.css C3/C8/C10/C11/C12 secties. ──────────────────────────────────────────────────────────── */ #sidebar { max-width: 100vw; overflow-x: hidden; width:300px; height:100vh; z-index:1100; border-right:1px solid rgba(255,255,255,0.15); background:var(--helios-surface-deep) !important; display:block; backdrop-filter: blur(4px); } /* Sidebar slide-in/out: 250ms ease-out voor vloeiende animatie BEIDE richtingen (open + close). Transition staat op base- selector (niet op .show state) zodat close symmetrisch met open werkt. Bootstrap past de `.offcanvas-xxl` class aan (niet `.offcanvas`) voor offcanvas-behavior; Bootstrap's default transition staat binnen @media (max-width: 1399.98px). We wrappen onze override in dezelfde media query. Selector `#sidebar.offcanvas- xxl` matcht het daadwerkelijke class-patroon. Ook: sidebar start onder mobile-navbar (64px) zodat navbar persistent zichtbaar blijft als app-chrome. Alleen van toepassing wanneer sidebar als offcanvas rendert ( .d-flex { flex-direction: column; align-items: flex-start !important; gap: 0.5rem; } .timeline-content .btn-group { width: 100%; justify-content: flex-start; } .timeline-content .btn-group .btn { width: auto; } .card-body, .card-body-update { padding: 0.75rem !important; } .btn.rounded-pill, .btn-outline-secondary.rounded-pill { width: 100%; } .nav-pills .nav-link { padding: 0.5rem 0.75rem; } } @media (max-width: 575.98px) { .nav.nav-pills .nav-link { padding-left: .75rem; padding-right: .75rem; font-size: 14px; } } /* ──────────────────────────────────────────────────────────── Tables inside cards — no double border. Card already provides outer border; the table only needs internal row separators. Applies to Bootstrap .table-bordered and to default .table inside any .card. ──────────────────────────────────────────────────────────── */ /* Globale fix: Bootstrap zet `border-bottom-width` op td/th maar GEEN border-color → cellen vallen terug op currentColor (= tekstkleur), wat bijna-zwarte row-separators oplevert in light mode. Forceer hier de juiste themabewuste variabele. */ .table > :not(caption) > * > * { border-color: var(--bs-table-border-color, var(--bs-border-color)); } /* ──────────────────────────────────────────────────────────── Globale tabel-typografie (light + dark identiek). Header: uppercase label-stijl. Cells: iets luchtiger padding. Eerste body-rij zonder dubbele top-border tegen de header. ──────────────────────────────────────────────────────────── */ .table > thead th { font-weight: 600; font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; border-bottom-width: 1px; } .table > :not(caption) > * > * { padding-top: 0.65rem; padding-bottom: 0.65rem; } .table > tbody > tr:first-child > * { border-top: 0; } /* ──────────────────────────────────────────────────────────── Default mobiele verticale gap voor card-rows. Op <768px krijgt elke .row standaard --bs-gutter-y: 1rem. Rows met een g-X of gy-X utility worden uitgesloten zodat expliciete keuzes blijven gelden. ──────────────────────────────────────────────────────────── */ @media (max-width: 767.98px) { .row:not([class*="g-"]):not([class*="gy-"]) { --bs-gutter-y: 1rem; } } /* ──────────────────────────────────────────────────────────── Tabellen in cards: GEEN extra styling. De card-body padding lijnt de tabel uit met de card-header. Tabellen gebruiken Bootstrap default row-separators (themabewust via --bs-table-border-color, zie regel hierboven). ──────────────────────────────────────────────────────────── */