/* basis.css — het begin van de vroegere app.css (tokens, knoppen, tabs, formulieren, paginacontainer) + .cmp-empty en .rv-inline. Gedeeld door portaal en CRM-app: alleen wat de bibliotheken en beide hosts gebruiken. De portaal-chrome (zijbalk, kopbalk, instellingen, onderbalk, dashboard, PWA-banner) staat in css/portaal.css van het portaal, dat direct ná dit bestand laadt (BasisCssTests). */ /* ========================================================= APP ROOT – alles in de applicatie leeft hierbinnen ========================================================= */ /* ========================================================= LIGHT MODE – DESIGN TOKENS (DEFAULT) ========================================================= */ .app-root { color-scheme: light; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Primary (indigo / violet) */ --app-primary: #7c3aed; --app-primary-hover: #6d28d9; --app-primary-soft: rgba(124, 58, 237, 0.12); /* Secondary (slate) */ --app-secondary: #334155; --app-secondary-hover: #1e293b; --app-secondary-soft: #f1f5f9; --app-secondary-border: #e2e8f0; /* Status */ --app-danger: #dc2626; --app-danger-soft: rgba(220, 38, 38, 0.12); --app-success: #16a34a; --app-success-soft: rgba(22, 163, 74, 0.12); /* Warning */ --app-warning: #f59e0b; --app-warning-soft: rgba(245, 158, 11, 0.12); --app-warning-text: #92400e; /* Info */ --app-info: #8b5cf6; --app-info-soft: rgba(139, 92, 246, 0.12); /* Base */ --app-border: #e5e7eb; --app-bg: #f8fafc; --app-surface: #ffffff; --app-text: #0f172a; color: var(--app-text); background-color: var(--app-bg); /* Typography */ --app-text-primary: #0f172a; --app-text-secondary: #475569; /* Shadow */ --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); } /* ========================================================= DARK MODE – ZWART & GEEL → data-theme="dark" op ========================================================= */ :root[data-theme="dark"] .app-root { /* Native widgets (select-dropdowns, date/time-pickers) meekleuren met het thema — zonder dit rendert de browser ze licht in dark mode en waren de Dag/Week-opties wit-op-wit (UX-polish 27 aug 2026). */ color-scheme: dark; /* Base */ --app-bg: #0a0a0a; --app-surface: #111111; --app-border: #262626; --app-text: #f5f5f5; /* Primary (yellow) */ --app-primary: #facc15; --app-primary-hover: #eab308; --app-primary-soft: rgba(250, 204, 21, 0.18); /* Secondary */ --app-secondary: #e5e7eb; --app-secondary-hover: #f9fafb; --app-secondary-soft: #18181b; --app-secondary-border: #27272a; /* Status */ --app-danger: #f87171; --app-danger-soft: rgba(248, 113, 113, 0.18); --app-success: #4ade80; --app-success-soft: rgba(74, 222, 128, 0.18); /* Warning */ --app-warning: #facc15; --app-warning-soft: rgba(250, 204, 21, 0.18); --app-warning-text: #fef3c7; /* Info */ --app-info: #a78bfa; --app-info-soft: rgba(167, 139, 250, 0.18); /* Typography */ --app-text-primary: #f5f5f5; --app-text-secondary: #a1a1aa; /* Shadow */ --app-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.8); } /* ========================================================= SKIP LINK / SCREEN-READER UTILITIES ========================================================= */ .skip-to-content { position: absolute; top: -100%; left: 0.5rem; z-index: 9999; padding: 0.5rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; background: var(--app-primary, #4f46e5); color: #fff; text-decoration: none; transition: top 0.1s; } .skip-to-content:focus { top: 0.5rem; outline: 2px solid #fff; outline-offset: 2px; } /* ========================================================= TYPOGRAFIE ========================================================= */ .app-root h1:focus:not(:focus-visible) { outline: none; } .app-root code { color: var(--app-primary); } /* ========================================================= LINKS ========================================================= */ .app-root a, .app-root .btn-link { color: var(--app-primary); text-decoration: none; } .app-root a:hover { text-decoration: underline; } /* ========================================================= BUTTONS ========================================================= */ .app-root .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-weight: 600; border-radius: 0.75rem; transition: background-color .15s, color .15s, border-color .15s; /* Better touch targets on mobile */ min-height: 44px; } .app-root .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ---------- Primary ---------- */ .app-root .btn-primary { color: #ffffff; /* white text on purple buttons in light mode */ background-color: var(--app-primary); border: 1px solid var(--app-primary); padding: 0.625rem 1.25rem; } @media (max-width: 640px) { .app-root .btn-primary { padding: 0.5rem 1rem; font-size: 0.875rem; } } .app-root .btn-primary:hover:not(:disabled) { background-color: var(--app-primary-hover); border-color: var(--app-primary-hover); } /* Dark: primary is yellow, so text should be dark for contrast */ :root[data-theme="dark"] .app-root .btn-primary { color: #020617; } /* ---------- Secondary ---------- */ .app-root .btn-secondary { background-color: var(--app-secondary-soft); color: var(--app-secondary); border: 1px solid var(--app-secondary-border); padding: 0.625rem 1.25rem; } @media (max-width: 640px) { .app-root .btn-secondary { padding: 0.5rem 1rem; font-size: 0.875rem; } } .app-root .btn-secondary:hover:not(:disabled) { background-color: var(--app-border); } /* ---------- Secondary outline ---------- */ .app-root .btn-secondary-outline { background: transparent; color: var(--app-secondary); border: 1px solid var(--app-border); padding: 0.625rem 1.25rem; } @media (max-width: 640px) { .app-root .btn-secondary-outline { padding: 0.5rem 1rem; font-size: 0.875rem; } } .app-root .btn-secondary-outline:hover:not(:disabled) { background-color: var(--app-secondary-soft); } /* ---------- Success (Green gradient) ---------- */ .app-root .btn-success { background: linear-gradient(to right, #10b981, #059669); color: white; border: none; padding: 0.625rem 1.25rem; } @media (max-width: 640px) { .app-root .btn-success { padding: 0.5rem 1rem; font-size: 0.875rem; } } .app-root .btn-success:hover:not(:disabled) { background: linear-gradient(to right, #059669, #047857); } .app-root .btn-success:focus { box-shadow: 0 0 0 0.1rem var(--app-surface), 0 0 0 0.25rem rgba(16, 185, 129, 0.3); } /* ---------- Danger ---------- */ .app-root .btn-danger { color: #ffffff; background-color: var(--app-danger); border: 1px solid var(--app-danger); padding: 0.625rem 1.25rem; } @media (max-width: 640px) { .app-root .btn-danger { padding: 0.5rem 1rem; font-size: 0.875rem; } } .app-root .btn-danger:hover:not(:disabled) { background-color: #b91c1c; border-color: #b91c1c; } :root[data-theme="dark"] .app-root .btn-danger { background-color: var(--app-danger); color: #ffffff; } /* ---------- Warning ---------- */ .app-root .btn-warning { color: #ffffff; background-color: var(--app-warning); border: 1px solid var(--app-warning); padding: 0.625rem 1.25rem; } .app-root .btn-warning:hover:not(:disabled) { filter: brightness(0.9); } :root[data-theme="dark"] .app-root .btn-warning { color: #020617; } /* ---------- Focus ---------- */ .app-root .btn:focus, .app-root .btn:active:focus, .app-root .btn-link.nav-link:focus, .app-root .form-control:focus, .app-root .form-check-input:focus { box-shadow: 0 0 0 0.1rem var(--app-surface), 0 0 0 0.25rem var(--app-primary-soft); } /* ========================================================= VALIDATION STATES ========================================================= */ .app-root .valid.modified:not([type=checkbox]) { outline: 1px solid var(--app-success); } .app-root .invalid { outline: 1px solid var(--app-danger); } .app-root .validation-message { color: var(--app-danger); } /* ========================================================= PAGE TABS (secondary in-page navigation) ========================================================= */ .app-root .page-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--app-border); margin-bottom: 1.5rem; overflow-x: auto; } .app-root .page-tab { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 500; white-space: nowrap; color: var(--app-secondary); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; } @media (hover: hover) { /* Touch devices have no real "unhover" event — scoping this to real pointer devices avoids tabs staying tinted after a tap (same fix as the mobile companion's bottom nav). */ .app-root .page-tab:hover { color: var(--app-primary); } } .app-root .page-tab.active { color: var(--app-primary); border-bottom-color: var(--app-primary); } /* Telbadge op een tab met nog niet-ingevulde verplichte velden. Toont het aantal en pulseert subtiel om de aandacht te trekken. */ .app-root .page-tab-alert { min-width: 0.85rem; height: 0.85rem; padding: 0 0.22rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 0.55rem; font-weight: 700; line-height: 1; color: #422006; background: var(--app-warning); animation: pageTabAlertPulse 2s ease-in-out infinite; } .app-root .page-tab-alert i { font-size: 0.6rem; } @keyframes pageTabAlertPulse { 0%, 100% { box-shadow: 0 0 0 0 var(--app-warning-soft); } 50% { box-shadow: 0 0 0 4px var(--app-warning-soft); } } @media (prefers-reduced-motion: reduce) { .app-root .page-tab-alert { animation: none; } } @media (display-mode: standalone) { html, body { overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; } } /* ========================================================= ICONEN ========================================================= */ .app-root i, .app-root svg { color: currentColor; fill: currentColor; stroke: currentColor; } .app-root .icon-primary { color: var(--app-primary); } /* ========================================================= BLAZOR ERROR UI ========================================================= */ .app-root #blazor-error-ui { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } .app-root #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } /* ========================================================= LOADING INDICATOR ========================================================= */ .app-root .loading-progress { position: absolute; width: 8rem; height: 8rem; inset: 20vh 0 auto 0; margin: 0 auto; } .app-root .loading-progress circle { fill: none; stroke: #e0e0e0; stroke-width: 0.6rem; transform: rotate(-90deg); } .app-root .loading-progress circle:last-child { stroke: var(--app-primary); } /* ========================================================= ANIMATIES ========================================================= */ @keyframes app-soft-pulse { 0% { box-shadow: 0 0 0 0 rgba(250,204,21,.4); } 70% { box-shadow: 0 0 0 6px rgba(250,204,21,0); } 100% { box-shadow: 0 0 0 0 rgba(250,204,21,0); } } .app-root .pulse-missing { animation: app-soft-pulse 2.2s infinite; border-radius: 9999px; } /* Success */ .app-root .bg-success-soft { background-color: var(--app-success-soft); } .app-root .bg-success { background-color: var(--app-success); } .app-root .text-success { color: var(--app-success); } /* Danger */ .app-root .bg-danger-soft { background-color: var(--app-danger-soft); } .app-root .bg-danger { background-color: var(--app-danger); } .app-root .text-danger { color: var(--app-danger); } /* Warning */ .app-root .bg-warning-soft { background-color: var(--app-warning-soft); } .app-root .text-warning { color: var(--app-warning); } .app-root .text-warning-dark { color: var(--app-warning-text); } /* Info */ .app-root .bg-info-soft { background-color: var(--app-info-soft); } .app-root .text-info { color: var(--app-info); } /* Surface helpers */ .app-root .bg-surface { background-color: var(--app-surface); } .app-root .bg-bg { background-color: var(--app-bg); } .app-root .bg-secondary-soft { background-color: var(--app-secondary-soft); } .app-root .bg-primary { background-color: var(--app-primary); } .app-root .bg-primary-soft { background-color: var(--app-primary-soft); } .app-root .text-primary { color: var(--app-primary); } .app-root .text-on-primary { color: #ffffff; } :root[data-theme="dark"] .app-root .text-on-primary { color: #020617; } .app-root .border-border { border-color: var(--app-border); } .app-root .border-primary { border-color: var(--app-primary); } .app-root .border-danger { border-color: var(--app-danger); } .app-root .bg-secondary { background-color: var(--app-secondary); } .app-root .accent-primary { accent-color: var(--app-primary); } .app-root .accent-danger { accent-color: var(--app-danger); } .app-root .card { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: 1rem; padding: 1.5rem; box-shadow: var(--app-shadow-sm); } @media (max-width: 640px) { .app-root .card { padding: 1rem; border-radius: 0.75rem; } } .app-root .card-title { font-size: 1.125rem; font-weight: 600; color: var(--app-text-primary); } /* Leeg / mislukt / niets-te-doen — de staat van een paneel wanneer er geen inhoud te tonen is. Zat als .wd-state in het weekdigest-blok, maar de Acties-werkvoorraad heeft precies dezelfde drie toestanden nodig; liever één definitie hier dan een tweede kopie onder een andere naam. Combineer met .card voor een omkaderde variant. */ .app-root .state-block { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 3rem 1.5rem; text-align: center; } .app-root .state-block__icon { width: 3rem; height: 3rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background: var(--app-secondary-soft); color: var(--app-text-secondary); font-size: 1.1rem; } .app-root .state-block__icon--failed { background: var(--app-danger-soft); color: var(--app-danger); } .app-root .state-block__title { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--app-text-primary); } .app-root .state-block__hint { margin: 0; max-width: 32rem; font-size: 0.85rem; color: var(--app-text-secondary); } /* ========================================================= FORMULIEREN EN KLEINE BOUWSTENEN ========================================================= */ /* `.form-field` is dezelfde bouwsteen als `.form-group` -- de reserveringen- pagina's gebruiken die naam. Hij was nooit gedefinieerd, waardoor het omhullende