/* ============================================================ ctr_libe Theme Layer ------------------------------------------------------------ Loaded last in base.html so it can harmonize Bootstrap and all app-specific CSS without changing every template. The active theme is stored on . ============================================================ */ :root, [data-theme="light"] { color-scheme: light; --ctr-app-bg: var(--ctr-bg, #f5f7fa); --ctr-app-surface: var(--ctr-surface, #ffffff); --ctr-app-surface-alt: var(--ctr-surface-alt, #fafbfc); --ctr-app-elevated: #ffffff; --ctr-app-border: var(--ctr-border, #e2e8f0); --ctr-app-border-strong: var(--ctr-border-strong, #cbd5e0); --ctr-app-divider: var(--ctr-divider, #edf0f4); --ctr-app-text: var(--ctr-text, #1f2937); --ctr-app-muted: var(--ctr-text-muted, #4b5563); --ctr-app-subtle: var(--ctr-text-subtle, #6b7280); --ctr-app-shadow: 0 8px 22px rgba(15, 23, 42, .08); --ctr-app-shadow-sm: 0 1px 3px rgba(15, 23, 42, .08); --ctr-app-focus: 0 0 0 .2rem rgba(42, 74, 127, .22); --ctr-primary-soft: #eef4ff; --ctr-success-soft: #dcfce7; --ctr-warning-soft: #fef3c7; --ctr-danger-soft: #fee2e2; --ctr-info-soft: #e0f2fe; --tt-cal-vacation-bg: #e8f1ff; --tt-cal-sick-bg: #fdecef; --tt-cal-other-bg: #eef1f4; --tt-cal-plan-bg: #e7f8ef; --tt-cal-holiday-bg: #fffbea; --ctrv2-bg: #eef2f7; --ctrv2-card: #ffffff; --ctrv2-border: #d9e2ef; --ctrv2-primary: #0b63ce; --ctrv2-primary-soft: #e8f2ff; --ctrv2-success: #157347; --ctrv2-text: #172033; --ctrv2-muted: #607086; } [data-theme="dark"] { color-scheme: dark; --ctr-bg: #0b1220; --ctr-surface: #111827; --ctr-surface-alt: #162033; --ctr-border: #283548; --ctr-border-strong: #3a4a60; --ctr-divider: #223047; --ctr-text: #e5edf7; --ctr-text-muted: #b8c5d6; --ctr-text-subtle: #91a1b7; --ctr-text-inverse: #07111f; --ctr-primary: #7db0ff; --ctr-primary-light: #a8c9ff; --ctr-primary-dark: #4d86da; --ctr-primary-50: #101d33; --ctr-primary-100: #172942; --ctr-primary-200: #25415f; --ctr-success: #4ade80; --ctr-success-bg: #10351f; --ctr-warning: #facc15; --ctr-warning-bg: #3a2d0a; --ctr-danger: #fb7185; --ctr-danger-bg: #3c1720; --ctr-info: #38bdf8; --ctr-info-bg: #0c2f45; --ctr-shadow-xs: 0 1px 2px rgba(0, 0, 0, .36); --ctr-shadow-sm: 0 8px 22px rgba(0, 0, 0, .28); --ctr-shadow-md: 0 14px 38px rgba(0, 0, 0, .34); --ctr-shadow-lg: 0 24px 60px rgba(0, 0, 0, .42); --ctr-card-shadow: var(--ctr-shadow-sm); --ctr-card-shadow-hover: var(--ctr-shadow-md); --ctr-focus-ring: 0 0 0 .2rem rgba(125, 176, 255, .28); --ctr-app-bg: var(--ctr-bg); --ctr-app-surface: var(--ctr-surface); --ctr-app-surface-alt: var(--ctr-surface-alt); --ctr-app-elevated: #172235; --ctr-app-border: var(--ctr-border); --ctr-app-border-strong: var(--ctr-border-strong); --ctr-app-divider: var(--ctr-divider); --ctr-app-text: var(--ctr-text); --ctr-app-muted: var(--ctr-text-muted); --ctr-app-subtle: var(--ctr-text-subtle); --ctr-app-shadow: 0 14px 36px rgba(0, 0, 0, .34); --ctr-app-shadow-sm: 0 6px 18px rgba(0, 0, 0, .26); --ctr-app-focus: var(--ctr-focus-ring); --ctr-primary-soft: rgba(125, 176, 255, .16); --ctr-success-soft: rgba(74, 222, 128, .16); --ctr-warning-soft: rgba(250, 204, 21, .16); --ctr-danger-soft: rgba(251, 113, 133, .16); --ctr-info-soft: rgba(56, 189, 248, .16); --bs-body-bg: var(--ctr-app-bg); --bs-body-color: var(--ctr-app-text); --bs-secondary-bg: var(--ctr-app-surface-alt); --bs-tertiary-bg: #1b2638; --bs-border-color: var(--ctr-app-border); --bs-border-color-translucent: rgba(148, 163, 184, .24); --bs-secondary-color: var(--ctr-app-muted); --bs-emphasis-color: var(--ctr-app-text); --bs-link-color: #93c5fd; --bs-link-hover-color: #bfdbfe; --bs-primary: #7db0ff; --bs-primary-rgb: 125, 176, 255; --tt-cal-vacation-bg: #122d50; --tt-cal-sick-bg: #3b1721; --tt-cal-other-bg: #202b3b; --tt-cal-plan-bg: #10311f; --tt-cal-holiday-bg: #3b2d0a; --ctrv2-bg: #0b1220; --ctrv2-card: #111827; --ctrv2-border: #283548; --ctrv2-primary: #7db0ff; --ctrv2-primary-soft: rgba(125, 176, 255, .16); --ctrv2-success: #4ade80; --ctrv2-text: #e5edf7; --ctrv2-muted: #9fb0c6; } html, body { background: var(--ctr-app-bg); color: var(--ctr-app-text); } body, .ctr-main, .base-container, .container, .container-fluid { color: var(--ctr-app-text); } .text-muted, .small.text-muted, .text-secondary, .form-text, .helptext, .ctr-page-header__title .subtitle { color: var(--ctr-app-muted) !important; } .border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--ctr-app-border) !important; } /* Theme toggle ---------------------------------------------------------- */ #themeToggle { display: inline-flex; align-items: center; justify-content: center; min-width: 2.35rem; min-height: 2.35rem; padding: .35rem .55rem; } #themeToggle .bi { margin-right: 0; } [data-theme="dark"] #themeToggle { background: rgba(255, 255, 255, .1); } .ctr-standalone-theme-toggle, .anfrage-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.35rem; height: 2.35rem; border: 1px solid var(--ctr-app-border-strong); border-radius: 999px; background: var(--ctr-app-surface); color: var(--ctr-app-text); box-shadow: var(--ctr-app-shadow-sm); } .ctr-standalone-theme-toggle:hover, .anfrage-theme-toggle:hover { background: var(--ctr-primary-soft); color: var(--ctr-primary); } .anfrage-theme-toggle { position: fixed; top: 1rem; right: 1rem; z-index: 20; } /* Navigation shell ------------------------------------------------------ */ [data-theme="dark"] .ctr-navbar { background: #07111f !important; border-bottom: 1px solid rgba(148, 163, 184, .18); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); } [data-theme="dark"] .ctr-navbar .nav-link:hover, [data-theme="dark"] .ctr-navbar .nav-link.active { background: rgba(125, 176, 255, .18); } .ctr-sidebar { background: var(--ctr-app-surface); border-right-color: var(--ctr-app-border); } .ctr-sidebar .nav-link { color: var(--ctr-app-muted); } .ctr-sidebar .nav-link:hover, .ctr-sidebar .nav-link.active { background: var(--ctr-primary-soft); color: var(--ctr-primary); } .ctr-sidebar .sidebar-heading { color: var(--ctr-app-subtle); } .ctr-footer { background: var(--ctr-app-surface); border-top: 1px solid var(--ctr-app-border); color: var(--ctr-app-muted); } /* Cards, panels, modals ------------------------------------------------- */ .card, .ctr-card, .base-card, .modal-content, .dropdown-menu, .offcanvas, .toast:not(.text-bg-success):not(.text-bg-danger):not(.text-bg-info):not(.text-bg-warning), .list-group-item, .accordion-item, .dms-card, .dms-folder-card, .forms-builder-panel, .forms-preview-panel, .warehouse-card, .dispatch-kpi-card, .dispatch-card, .dispatch-filter-panel, .dispatch-view-table .table-responsive, .dispatch-empty, .ls-stat-card, .tt-history-shell, .tt-cal-shell, .timer-card, .time-dashboard-tabs .nav-link.active, .tt-profile-click-card, .ctr-maps-filter, .df-runner-card, .df-field-card, .df-ro-rep-entry, .df-ro-rep-block, .df-image-tile, .df-signature-tile, .df-file-tile, .pm-builder-shell, .pm-builder-panel, .pm-preview-shell, .pm-preview-card, .fb-card, .fb-panel, .csv-card, .anfrage-magic-card, .anfrage-magic-meta { background: var(--ctr-app-surface) !important; border-color: var(--ctr-app-border) !important; color: var(--ctr-app-text) !important; box-shadow: var(--ctr-app-shadow-sm); } .card-header, .card-footer, .modal-header, .modal-footer, .dropdown-header, .accordion-button, .table-light, .ctr-card .card-header, .base-header, .df-form-block__title, .df-ro-rep-heading, .dispatch-table thead th, .ctr-table thead th, .tt-history-section .card-header, .tt-cal-head, .ctrv2-header, .ctrv2-footer, .ctrv2-pagenav, .ctrv2-page-description, .ctrv2-body--enduser .ctrv2-header, .ctrv2-body--enduser .ctrv2-header__status, .ctrv2-body--enduser .ctrv2-page-description { background: var(--ctr-app-surface-alt) !important; border-color: var(--ctr-app-border) !important; color: var(--ctr-app-text) !important; } .card:hover, .ctr-card:hover, .task-card:hover, .ls-stat-card:hover, .dispatch-card:hover, .tt-profile-click-card:hover { box-shadow: var(--ctr-app-shadow); } .bg-white, .bg-light, .table-light, .list-group-item-light { background-color: var(--ctr-app-surface-alt) !important; color: var(--ctr-app-text) !important; } /* Tables ---------------------------------------------------------------- */ .table, .ctr-table, .dispatch-table, .pm-tab-table, .df-ro-table-wrap table, .ctrv2-matrix__table { --bs-table-bg: transparent; --bs-table-color: var(--ctr-app-text); --bs-table-border-color: var(--ctr-app-border); --bs-table-striped-bg: rgba(125, 176, 255, .07); --bs-table-hover-bg: rgba(125, 176, 255, .11); color: var(--ctr-app-text); border-color: var(--ctr-app-border); } .table thead th, .ctr-table thead th, .dispatch-table thead th, .pm-tab-table thead th, .ctrv2-matrix__table th { background: var(--ctr-app-surface-alt) !important; border-color: var(--ctr-app-border) !important; color: var(--ctr-app-muted) !important; } .table tbody td, .table tbody th, .ctr-table tbody td, .ctr-table tbody th, .dispatch-table tbody td, .dispatch-table tbody th, .pm-tab-table tbody td, .pm-tab-table tbody th, .ctrv2-matrix__table td, .ctrv2-matrix__table th { border-color: var(--ctr-app-border) !important; color: var(--ctr-app-text); } .table-hover tbody tr:hover, .ctr-table tbody tr:hover, .dispatch-table tbody tr:hover, .pm-tab-table tbody tr:hover, .tt-history-section .table tbody tr:hover, .tt-profile-click-row:hover td, .tt-profile-click-row:focus td, .tt-profile-click-row.is-active td { background: rgba(125, 176, 255, .1) !important; } .ctr-table-wrap, .table-responsive, .tt-tbl-responsive, .pm-tab-table-wrap { background: var(--ctr-app-surface); border-color: var(--ctr-app-border); } /* Forms and buttons ----------------------------------------------------- */ .form-control, .form-select, .input-group-text, textarea, input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="date"], input[type="datetime-local"], input[type="time"], select, .ctrv2-field input, .ctrv2-field select, .ctrv2-field textarea, .ctrv2-repeater__cell input, .ctrv2-repeater__cell select, .ctrv2-repeater__cell textarea, .ctrv2-pagenav button:not(.btn) { background-color: var(--ctr-app-elevated) !important; border-color: var(--ctr-app-border-strong) !important; color: var(--ctr-app-text) !important; } /* Checkboxen/Radios brauchen ihre eigene Behandlung, damit Bootstraps :checked-Hintergrund (gefuellte blaue Box mit Haken) sichtbar bleibt. Früher waren sie Teil des !important-Blocks oben; das hat den :checked-State weiss-auf-weiss gerendert (Haken unsichtbar). */ .form-check-input { background-color: var(--ctr-app-elevated); border-color: var(--ctr-app-border-strong); } .form-check-input:checked { background-color: var(--ctr-primary); border-color: var(--ctr-primary); } .form-control:focus, .form-select:focus, .form-check-input:focus, .btn:focus-visible, .ctrv2-field input:focus, .ctrv2-field select:focus, .ctrv2-field textarea:focus, .ctrv2-repeater__cell input:focus, .ctrv2-repeater__cell select:focus, .ctrv2-repeater__cell textarea:focus { border-color: var(--ctr-primary) !important; box-shadow: var(--ctr-app-focus) !important; outline: none; } .form-control::placeholder, .ts-wrapper .ts-control > input::placeholder { color: var(--ctr-app-subtle) !important; } [data-theme="dark"] label, [data-theme="dark"] .form-label, [data-theme="dark"] .form-check-label, [data-theme="dark"] .base-form-group label, [data-theme="dark"] .forms-builder-settings label, [data-theme="dark"] .dms-form .form-label { color: var(--ctr-app-muted) !important; } .form-control:disabled, .form-select:disabled, .form-control[readonly], .ctrv2-field--readonly input, .ctrv2-field--readonly textarea, .ctrv2-field--readonly select { background-color: var(--ctr-app-surface-alt) !important; color: var(--ctr-app-muted) !important; } .btn-outline-secondary, .btn-outline-primary, .btn-outline-dark, .btn-light { background-color: transparent; border-color: var(--ctr-app-border-strong); color: var(--ctr-app-text); } .btn-outline-secondary:hover, .btn-outline-primary:hover, .btn-outline-dark:hover, .btn-light:hover { background-color: var(--ctr-primary-soft); color: var(--ctr-primary); } /* Tom Select ------------------------------------------------------------ */ .ts-wrapper .ts-control, .ts-dropdown, .ts-dropdown .dropdown-input { background: var(--ctr-app-elevated) !important; border-color: var(--ctr-app-border-strong) !important; color: var(--ctr-app-text) !important; } .ts-wrapper.focus .ts-control, .ts-wrapper.dropdown-active .ts-control { border-color: var(--ctr-primary) !important; box-shadow: var(--ctr-app-focus) !important; } .ts-wrapper .ts-control > input, .ts-dropdown .option, .ts-dropdown .optgroup-header { color: var(--ctr-app-text) !important; } .ts-dropdown .active, .ts-dropdown .option:hover, .ts-dropdown .create:hover { background: var(--ctr-primary-soft) !important; color: var(--ctr-primary) !important; } .ts-wrapper.multi .ts-control .item { background: var(--ctr-primary-soft) !important; border-color: rgba(125, 176, 255, .32) !important; color: var(--ctr-primary) !important; } .ts-wrapper.plugin-remove_button .item .remove { border-left-color: rgba(125, 176, 255, .32) !important; color: var(--ctr-primary) !important; } .ts-wrapper.single .ts-control::after { border-color: var(--ctr-app-muted) !important; } /* Dropdowns, pagination, nav tabs -------------------------------------- */ .dropdown-item, .page-link, .nav-tabs .nav-link, .dispatch-tabs .nav-link, .time-dashboard-tabs .nav-link, .ctr-filter-btn, .view-toggle-icon-btn, .ctr-map-status-toggle { color: var(--ctr-app-muted); border-color: var(--ctr-app-border); } .dropdown-item:hover, .dropdown-item:focus, .page-link:hover, .nav-tabs .nav-link:hover, .dispatch-tabs .nav-link:hover, .time-dashboard-tabs .nav-link:hover, .ctr-filter-btn:hover, .view-toggle-icon-btn:hover, .ctr-map-status-toggle:hover { background: var(--ctr-primary-soft) !important; color: var(--ctr-primary) !important; } .nav-tabs, .dispatch-tabs, .time-dashboard-tabs { border-color: var(--ctr-app-border) !important; } .nav-tabs .nav-link.active, .dispatch-tabs .nav-link.active, .time-dashboard-tabs .nav-link.active, .page-item.active .page-link, .view-toggle-icon-btn.active, .ctr-map-status-toggle.is-on { background: var(--ctr-primary-soft) !important; border-color: var(--ctr-primary) !important; color: var(--ctr-primary) !important; } .page-link { background: var(--ctr-app-surface); } /* Alerts and status pills ---------------------------------------------- */ .alert { border-color: var(--ctr-app-border); } .alert-info { background: var(--ctr-info-soft); color: var(--ctr-info); } .alert-success { background: var(--ctr-success-soft); color: var(--ctr-success); } .alert-warning { background: var(--ctr-warning-soft); color: var(--ctr-warning); } .alert-danger { background: var(--ctr-danger-soft); color: var(--ctr-danger); } .ctr-status-pill.is-pending, .forms-status-entwurf { background: var(--ctr-warning-soft) !important; color: var(--ctr-warning) !important; } .ctr-status-pill.is-approved, .forms-status-veroeffentlicht { background: var(--ctr-success-soft) !important; color: var(--ctr-success) !important; } .ctr-status-pill.is-rejected { background: var(--ctr-danger-soft) !important; color: var(--ctr-danger) !important; } .ctr-status-pill.is-info { background: var(--ctr-info-soft) !important; color: var(--ctr-info) !important; } .ctr-status-pill.is-neutral, .forms-status-archiviert { background: var(--ctr-app-surface-alt) !important; color: var(--ctr-app-muted) !important; } /* Dispatch / Leitstand -------------------------------------------------- */ .dispatch-kpi-card, .dispatch-filter-panel, .dispatch-empty { background: var(--ctr-app-surface) !important; } .dispatch-kpi-title, .dispatch-kpi-sub, .dispatch-kpi-value small, .dispatch-kpi-sub small, .dispatch-kpi-table thead th, .dispatch-poll-status, .ls-empty, .ls-card-neben, .ls-card-detail, .ls-card-desc, .ctr-maps-legend, .ctr-map .leaflet-popup-content .ctr-popup-meta { color: var(--ctr-app-muted) !important; } .dispatch-kpi-value, .dispatch-detail-btn, .dispatch-card .card-title, .page-header h1, .ctr-page-header__title h1 { color: var(--ctr-primary) !important; } .dispatch-toolbar .btn-group { background: var(--ctr-app-surface) !important; border-color: var(--ctr-app-border) !important; } .task-card, .ls-task-card { background: var(--ctr-app-surface) !important; color: var(--ctr-app-text) !important; border-color: var(--ctr-app-border) !important; } /* Time tracking --------------------------------------------------------- */ .tt-history-shell, .tt-cal-shell, .tt-cal-shell.tt-cal-shell--team { --tt-border: var(--ctr-app-border); --tt-muted: var(--ctr-app-muted); background: var(--ctr-app-surface-alt) !important; } .tt-cal-head, .tt-cal-shell--team .tt-cal-head, .tt-cal-cell, .table-mobile-cards tbody tr, .overview-table tbody tr, .timer-card { background: var(--ctr-app-surface) !important; border-color: var(--ctr-app-border) !important; color: var(--ctr-app-text) !important; } .tt-cal-cell.is-vacation, .tt-cal-vacation { background: var(--tt-cal-vacation-bg) !important; } .tt-cal-cell.is-sick, .tt-cal-sick { background: var(--tt-cal-sick-bg) !important; } .tt-cal-cell.is-other, .tt-cal-other { background: var(--tt-cal-other-bg) !important; } .tt-cal-cell.is-plan, .tt-cal-plan { background: var(--tt-cal-plan-bg) !important; } .tt-cal-cell.is-holiday, .tt-cal-holiday { background: var(--tt-cal-holiday-bg) !important; } .tt-profile-edit-cue { background: var(--ctr-primary-soft) !important; color: var(--ctr-primary) !important; } .time-dashboard-list-item { border-color: var(--ctr-app-border) !important; } /* Dynamic forms --------------------------------------------------------- */ .ctrv2-body, .ctrv2-body--enduser { background: var(--ctrv2-bg) !important; color: var(--ctrv2-text) !important; } .ctrv2-block, .ctrv2-field, .ctrv2-body--enduser .ctrv2-field, .ctrv2-repeater__row, .ctrv2-repeater__count, .ctrv2-field__radio, .ctrv2-field__check, .ctrv2-body--enduser .ctrv2-field__radio, .ctrv2-body--enduser .ctrv2-field__check, .ctrv2-matrix, .ctrv2-media__item, .ctrv2-camera, .ctrv2-scanlist__item, .ctrv2-pagenav, .ctrv2-page-description, .ctrv2-body--enduser .ctrv2-repeater__row, .ctrv2-body--enduser .ctrv2-repeater__count { background: var(--ctrv2-card) !important; border-color: var(--ctrv2-border) !important; color: var(--ctrv2-text) !important; } .ctrv2-block__title, .ctrv2-field__label, .ctrv2-repeater__label, .ctrv2-repeater__rowtitle, .ctrv2-repeater__block-title, .ctrv2-body--enduser .ctrv2-block__title, .ctrv2-body--enduser .ctrv2-field__label, .ctrv2-body--enduser .ctrv2-field__radio label, .ctrv2-body--enduser .ctrv2-field__check span { color: var(--ctrv2-text) !important; } .ctrv2-field__help, .ctrv2-repeater__help, .ctrv2-repeater__hint, .ctrv2-repeater__empty, .ctrv2-media__empty, .ctrv2-pagenav__indicator, .ctrv2-body--enduser .ctrv2-header__sub, .ctrv2-body--enduser .ctrv2-repeater__count-label, .ctrv2-body--enduser .ctrv2-repeater__count-hint { color: var(--ctrv2-muted) !important; } .ctrv2-body--enduser .ctrv2-field__radio input:checked + label, .ctrv2-body--enduser .ctrv2-field__check input:checked + span { background: var(--ctrv2-primary-soft) !important; color: var(--ctrv2-primary) !important; } .ctrv2-header__tools { display: inline-flex; align-items: center; justify-content: flex-end; gap: .5rem; grid-column: 2 / 3; grid-row: 1 / span 2; } .ctrv2-header__tools .ctrv2-header__status { position: static !important; grid-column: auto !important; grid-row: auto !important; } .ctrv2-header__tools .ctr-standalone-theme-toggle { flex: 0 0 auto; } @media (max-width: 700px) { .ctrv2-header__tools { grid-column: 1; grid-row: auto; justify-content: space-between; } } .ctrv2-signature__canvas { /* 2026-05-14 — Kein White-Override mehr; Hintergrund kommt aus runner_v2.css (helles Diamantmuster im Light-Mode, dunkler Untergrund im Dark-Mode). */ } .df-field-label, .df-ro-rep-cell-label, .df-ro-value, .df-ro-rep-cell-value, .df-image-name { color: var(--ctr-app-text) !important; } .df-form-block, .df-ro-table-wrap { border-color: var(--ctr-app-border) !important; } /* Maps and Leaflet ------------------------------------------------------ */ .ctr-map { background: var(--ctr-app-surface-alt) !important; border-color: var(--ctr-app-border) !important; } .leaflet-container, .leaflet-popup-content-wrapper, .leaflet-popup-tip, .leaflet-control-layers, .leaflet-bar a, .leaflet-bar a:hover { background: var(--ctr-app-surface) !important; color: var(--ctr-app-text) !important; border-color: var(--ctr-app-border) !important; } [data-theme="dark"] .leaflet-tile { filter: brightness(.78) contrast(1.08) saturate(.78); } [data-theme="dark"] .leaflet-marker-icon, [data-theme="dark"] .leaflet-marker-shadow, [data-theme="dark"] .ctr-marker-status, [data-theme="dark"] .ctr-marker-tech, [data-theme="dark"] .ctr-marker-kunde { filter: none; } .ctr-map-status-toggle { background: var(--ctr-app-surface) !important; } .ctr-maps-legend .legend-sep { background: var(--ctr-app-border) !important; } /* Public task request pages -------------------------------------------- */ .anfrage-magic-body { background: var(--ctr-app-bg) !important; color: var(--ctr-app-text) !important; } .anfrage-magic-title, .anfrage-form-label { color: var(--ctr-app-text) !important; } .anfrage-magic-meta, .anfrage-result, .anfrage-form-textarea { background: var(--ctr-app-surface-alt) !important; border-color: var(--ctr-app-border) !important; color: var(--ctr-app-text) !important; } .anfrage-badge-open { background: var(--ctr-warning-soft) !important; color: var(--ctr-warning) !important; border-color: rgba(250, 204, 21, .35) !important; } .anfrage-badge-accepted, .anfrage-result-success { background: var(--ctr-success-soft) !important; color: var(--ctr-success) !important; border-color: rgba(74, 222, 128, .35) !important; } .anfrage-badge-rejected, .anfrage-result-rejected { background: var(--ctr-danger-soft) !important; color: var(--ctr-danger) !important; border-color: rgba(251, 113, 133, .35) !important; } .anfrage-badge-withdrawn, .anfrage-result-info { background: var(--ctr-app-surface-alt) !important; color: var(--ctr-app-muted) !important; border-color: var(--ctr-app-border) !important; } .anfrage-badge-expired { background: rgba(168, 85, 247, .18) !important; color: #c4b5fd !important; border-color: rgba(196, 181, 253, .28) !important; } /* Flatpickr ------------------------------------------------------------- */ .flatpickr-calendar, .flatpickr-months, .flatpickr-weekdays, .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year { background: var(--ctr-app-surface) !important; color: var(--ctr-app-text) !important; border-color: var(--ctr-app-border) !important; } .flatpickr-day { color: var(--ctr-app-text) !important; } .flatpickr-day:hover, .flatpickr-day:focus, .flatpickr-day.inRange { background: var(--ctr-primary-soft) !important; border-color: var(--ctr-primary) !important; } .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--ctr-primary) !important; border-color: var(--ctr-primary) !important; color: var(--ctr-text-inverse) !important; } .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-weekday { color: var(--ctr-app-subtle) !important; } /* Dark mode polish: active rows, disabled controls, app-specific states ---- */ [data-theme="dark"] .table, [data-theme="dark"] .ctr-table, [data-theme="dark"] .dispatch-table, [data-theme="dark"] .pm-tab-table, [data-theme="dark"] .df-ro-table-wrap table, [data-theme="dark"] .ctrv2-matrix__table { --bs-table-bg: transparent; --bs-table-color: var(--ctr-app-text); --bs-table-striped-color: var(--ctr-app-text); --bs-table-striped-bg: rgba(125, 176, 255, .07); --bs-table-hover-color: var(--ctr-app-text); --bs-table-hover-bg: rgba(125, 176, 255, .13); --bs-table-active-color: var(--ctr-app-text); --bs-table-active-bg: rgba(125, 176, 255, .18); --bs-table-border-color: var(--ctr-app-border); } [data-theme="dark"] .table > :not(caption) > * > *, [data-theme="dark"] .ctr-table > :not(caption) > * > *, [data-theme="dark"] .dispatch-table > :not(caption) > * > *, [data-theme="dark"] .pm-tab-table > :not(caption) > * > * { background-color: transparent !important; color: var(--ctr-app-text) !important; border-color: var(--ctr-app-border) !important; } [data-theme="dark"] .table-active, [data-theme="dark"] .table-active > *, [data-theme="dark"] tr.table-active > *, [data-theme="dark"] .table-hover > tbody > tr.table-active:hover > *, [data-theme="dark"] .table tbody tr.active > *, [data-theme="dark"] .table tbody tr.is-active > *, [data-theme="dark"] .table tbody tr.selected > * { --bs-table-color-state: var(--ctr-app-text); --bs-table-bg-state: rgba(125, 176, 255, .18); background-color: rgba(125, 176, 255, .18) !important; color: var(--ctr-app-text) !important; } [data-theme="dark"] tr.table-active > :first-child, [data-theme="dark"] .table tbody tr.active > :first-child, [data-theme="dark"] .table tbody tr.is-active > :first-child, [data-theme="dark"] .table tbody tr.selected > :first-child { box-shadow: inset 3px 0 0 rgba(125, 176, 255, .55) !important; } [data-theme="dark"] .table-hover > tbody > tr:hover > *, [data-theme="dark"] .ctr-table tbody tr:hover > *, [data-theme="dark"] .dispatch-table tbody tr:hover > *, [data-theme="dark"] .pm-tab-table tbody tr:hover > * { --bs-table-color-state: var(--ctr-app-text); --bs-table-bg-state: rgba(125, 176, 255, .12); background-color: rgba(125, 176, 255, .12) !important; color: var(--ctr-app-text) !important; } [data-theme="dark"] .btn.disabled, [data-theme="dark"] .btn:disabled, [data-theme="dark"] fieldset:disabled .btn, [data-theme="dark"] .dropdown-item.disabled, [data-theme="dark"] .dropdown-item:disabled { opacity: 1 !important; background-color: var(--ctr-app-surface-alt) !important; border-color: var(--ctr-app-border) !important; color: var(--ctr-app-subtle) !important; box-shadow: none !important; } [data-theme="dark"] .dropdown-item.active, [data-theme="dark"] .dropdown-item:active, [data-theme="dark"] .list-group-item.active { background: var(--ctr-primary-soft) !important; border-color: rgba(125, 176, 255, .34) !important; color: var(--ctr-primary) !important; } [data-theme="dark"] .form-check-input:disabled, [data-theme="dark"] .form-check-input[disabled] { background-color: var(--ctr-app-surface-alt) !important; border-color: var(--ctr-app-border) !important; opacity: 1; } [data-theme="dark"] .text-bg-light, [data-theme="dark"] .badge.bg-light, [data-theme="dark"] .badge.text-bg-light { background-color: var(--ctr-app-surface-alt) !important; color: var(--ctr-app-muted) !important; border-color: var(--ctr-app-border) !important; } [data-theme="dark"] .dms-page { --dms-border: var(--ctr-app-border); --dms-muted: var(--ctr-app-muted); --dms-soft: var(--ctr-app-surface-alt); --dms-hover: rgba(125, 176, 255, .13); --dms-selected: rgba(125, 176, 255, .2); --dms-accent: #93c5fd; } [data-theme="dark"] .dms-sidebar, [data-theme="dark"] .dms-toolbar, [data-theme="dark"] .dms-search, [data-theme="dark"] .dms-search-main, [data-theme="dark"] .dms-folder-tile, [data-theme="dark"] .dms-tile, [data-theme="dark"] .dms-file-panel, [data-theme="dark"] .dms-empty, [data-theme="dark"] .dms-context-menu, [data-theme="dark"] .dms-detail-panel, [data-theme="dark"] .dms-sort-select { background: var(--ctr-app-surface) !important; border-color: var(--ctr-app-border) !important; color: var(--ctr-app-text) !important; } [data-theme="dark"] .dms-search-main, [data-theme="dark"] .dms-sort-select, [data-theme="dark"] .dms-sidebar-note, [data-theme="dark"] .dms-table thead th { background: var(--ctr-app-surface-alt) !important; } [data-theme="dark"] .dms-nav-item, [data-theme="dark"] .dms-tree-item, [data-theme="dark"] .dms-folder-tile, [data-theme="dark"] .dms-tile-name, [data-theme="dark"] .dms-file-name, [data-theme="dark"] .dms-file-button, [data-theme="dark"] .dms-context-menu-item, [data-theme="dark"] .dms-breadcrumb .current { color: var(--ctr-app-text) !important; } [data-theme="dark"] .dms-eyebrow, [data-theme="dark"] .dms-tree-label, [data-theme="dark"] .dms-tile-meta, [data-theme="dark"] .dms-file-subtitle, [data-theme="dark"] .dms-panel-heading, [data-theme="dark"] .dms-preview-unsupported { color: var(--ctr-app-muted) !important; } [data-theme="dark"] .dms-nav-item:hover, [data-theme="dark"] .dms-nav-item.active, [data-theme="dark"] .dms-tree-item:hover, [data-theme="dark"] .dms-tree-item.active, [data-theme="dark"] .dms-folder-tile:hover, [data-theme="dark"] .dms-tile:hover, [data-theme="dark"] .dms-context-menu-item:hover { background: var(--dms-hover) !important; color: var(--dms-accent) !important; } [data-theme="dark"] .dms-tile.selected, [data-theme="dark"] .dms-table tbody tr.selected > * { background: var(--dms-selected) !important; border-color: rgba(125, 176, 255, .46) !important; color: var(--ctr-app-text) !important; } [data-theme="dark"] .dms-table tbody tr:hover > * { background: var(--dms-hover) !important; } [data-theme="dark"] .dms-tile-icon-folder, [data-theme="dark"] .dms-file-icon-folder { background: rgba(250, 204, 21, .16) !important; color: #fde68a !important; } [data-theme="dark"] .dms-tile-icon-pdf, [data-theme="dark"] .dms-file-icon-pdf { background: rgba(251, 113, 133, .16) !important; color: #fda4af !important; } [data-theme="dark"] .dms-tile-icon-image, [data-theme="dark"] .dms-file-icon-image, [data-theme="dark"] .dms-tile-icon-excel, [data-theme="dark"] .dms-file-icon-excel { background: rgba(74, 222, 128, .16) !important; color: #86efac !important; } [data-theme="dark"] .dms-tile-icon-word, [data-theme="dark"] .dms-file-icon-word, [data-theme="dark"] .dms-tile-icon-default, [data-theme="dark"] .dms-file-icon-default { background: rgba(125, 176, 255, .16) !important; color: #bfdbfe !important; } [data-theme="dark"] .dms-tile-icon-zip, [data-theme="dark"] .dms-file-icon-zip { background: rgba(251, 146, 60, .16) !important; color: #fdba74 !important; } [data-theme="dark"] .dms-tile-icon-video, [data-theme="dark"] .dms-tile-icon-audio { background: rgba(196, 181, 253, .16) !important; color: #c4b5fd !important; } [data-theme="dark"] .tt-report-story-card, [data-theme="dark"] .tt-report-kpi-card, [data-theme="dark"] .tt-report-insight, [data-theme="dark"] .tt-report-section, [data-theme="dark"] .tt-report-person-card, [data-theme="dark"] .tt-report-activity-card, [data-theme="dark"] .tt-report-insight-row, [data-theme="dark"] .tt-report-empty-inline, [data-theme="dark"] .tt-report-chip, [data-theme="dark"] .tt-report-kpi-icon, [data-theme="dark"] .tt-report-card-metrics span, [data-theme="dark"] .tt-kpi, [data-theme="dark"] .tt-filter-panel, [data-theme="dark"] .tt-overflow-more, [data-theme="dark"] .tt-cal-toggle-btn { background: var(--ctr-app-surface) !important; border-color: var(--ctr-app-border) !important; color: var(--ctr-app-text) !important; } [data-theme="dark"] .tt-report-story-card.is-gradient { background: linear-gradient(145deg, #172235 0%, #111827 70%) !important; } [data-theme="dark"] .tt-report-story-head h2, [data-theme="dark"] .tt-report-story-value, [data-theme="dark"] .tt-report-type-label, [data-theme="dark"] .tt-report-kpi-value, [data-theme="dark"] .tt-report-insight-row span, [data-theme="dark"] .tt-report-card-top h3, [data-theme="dark"] .tt-report-card-metrics strong { color: var(--ctr-app-text) !important; } [data-theme="dark"] .tt-report-story-head span, [data-theme="dark"] .tt-report-story-label, [data-theme="dark"] .tt-report-story-meta, [data-theme="dark"] .tt-report-type-value, [data-theme="dark"] .tt-report-kpi-label, [data-theme="dark"] .tt-report-insight-row small, [data-theme="dark"] .tt-report-card-top span, [data-theme="dark"] .tt-cal-cta, [data-theme="dark"] .tt-cell-cta, [data-theme="dark"] .tt-cal-week-label { color: var(--ctr-app-muted) !important; } [data-theme="dark"] .tt-report-type-bar, [data-theme="dark"] .tt-report-progress { background: var(--ctr-app-surface-alt) !important; } [data-theme="dark"] .tt-report-pill.is-ok { background: var(--ctr-success-soft) !important; color: var(--ctr-success) !important; border-color: rgba(74, 222, 128, .28) !important; } [data-theme="dark"] .tt-report-pill.is-warn { background: var(--ctr-warning-soft) !important; color: var(--ctr-warning) !important; border-color: rgba(250, 204, 21, .3) !important; } [data-theme="dark"] .tt-report-pill.is-bad { background: var(--ctr-danger-soft) !important; color: var(--ctr-danger) !important; border-color: rgba(251, 113, 133, .3) !important; } [data-theme="dark"] .tt-cal-event.vacation, [data-theme="dark"] .tt-chip.vacation { background: var(--tt-cal-vacation-bg) !important; color: #93c5fd !important; } [data-theme="dark"] .tt-cal-event.sick, [data-theme="dark"] .tt-chip.sick { background: var(--tt-cal-sick-bg) !important; color: #fda4af !important; } [data-theme="dark"] .tt-cal-event.other_absence, [data-theme="dark"] .tt-chip.other_absence { background: var(--tt-cal-other-bg) !important; color: var(--ctr-app-muted) !important; } [data-theme="dark"] .tt-chip-planning { background: var(--tt-cal-plan-bg) !important; border-color: rgba(74, 222, 128, .28) !important; color: #86efac !important; } [data-theme="dark"] .tt-cal-event.holiday { background: var(--tt-cal-holiday-bg) !important; color: #fde68a !important; } [data-theme="dark"] .tt-kpi.pending-badge, [data-theme="dark"] .tt-cal-toggle-btn.is-special.is-on { background: var(--ctr-warning-soft) !important; border-color: rgba(250, 204, 21, .32) !important; color: var(--ctr-warning) !important; } [data-theme="dark"] .tt-cal-toggle-btn.is-on, [data-theme="dark"] .tt-overflow-more:hover { background: var(--ctr-primary-soft) !important; border-color: rgba(125, 176, 255, .36) !important; color: var(--ctr-primary) !important; } [data-theme="dark"] .tt-cal-cell.tt-today { border-color: var(--ctr-primary) !important; box-shadow: 0 0 0 2px rgba(125, 176, 255, .24) !important; } [data-theme="dark"] .tt-cal-shell--team .tt-cal-cell.tt-today { box-shadow: 0 0 0 2px rgba(125, 176, 255, .24) inset !important; } [data-theme="dark"] .dispatch-status--offen, [data-theme="dark"] .dispatch-status--auftrag_zugewiesen { --ds-bg: rgba(125, 176, 255, .16); --ds-fg: #bfdbfe; --ds-bd: rgba(125, 176, 255, .35); } [data-theme="dark"] .dispatch-status--vor_ort, [data-theme="dark"] .dispatch-status--geprueft, [data-theme="dark"] .dispatch-status--abgemeldet, [data-theme="dark"] .dispatch-status--erledigt, [data-theme="dark"] .dispatch-status--umgesetzt { --ds-bg: rgba(74, 222, 128, .16); --ds-fg: #86efac; --ds-bd: rgba(74, 222, 128, .34); } [data-theme="dark"] .dispatch-status--in_bearbeitung, [data-theme="dark"] .dispatch-status--storno { --ds-bg: rgba(56, 189, 248, .16); --ds-fg: #7dd3fc; --ds-bd: rgba(56, 189, 248, .34); } [data-theme="dark"] .dispatch-status--in_pruefung, [data-theme="dark"] .dispatch-status--wiedereinsatz { --ds-bg: rgba(251, 146, 60, .16); --ds-fg: #fdba74; --ds-bd: rgba(251, 146, 60, .34); } [data-theme="dark"] .dispatch-status--erstellt { --ds-bg: var(--ctr-app-surface-alt); --ds-fg: var(--ctr-app-muted); --ds-bd: var(--ctr-app-border); } [data-theme="dark"] .dispatch-status--angefragt, [data-theme="dark"] .dispatch-status--im_system_aufgenommen { --ds-bg: rgba(196, 181, 253, .16); --ds-fg: #c4b5fd; --ds-bd: rgba(196, 181, 253, .34); } [data-theme="dark"] .dispatch-status--handlungsbedarf, [data-theme="dark"] .dispatch-status--abbruch { --ds-bg: rgba(251, 113, 133, .16); --ds-fg: #fda4af; --ds-bd: rgba(251, 113, 133, .34); } [data-theme="dark"] .dispatch-calendar-detail-grid > div { background: var(--ctr-app-surface-alt) !important; border-color: var(--ctr-app-border) !important; } [data-theme="dark"] .dispatch-calendar-detail-grid span { color: var(--ctr-app-muted) !important; } [data-theme="dark"] .dispatch-calendar-detail-grid strong { color: var(--ctr-app-text) !important; } [data-theme="dark"] .dispatch-calendar-legend__swatch--holiday, [data-theme="dark"] .dispatch-calendar-holiday-badge--state { background: var(--ctr-warning-soft) !important; border-color: rgba(250, 204, 21, .35) !important; color: var(--ctr-warning) !important; } [data-theme="dark"] .ctr-map-status-toggle.is-on { background: rgba(125, 176, 255, .16) !important; border-color: var(--status-color, var(--ctr-primary)) !important; color: var(--ctr-app-text) !important; } [data-theme="dark"] .csv-help-callout, [data-theme="dark"] .csv-target-tab, [data-theme="dark"] .forms-submission-meta, [data-theme="dark"] .forms-submission-answer, [data-theme="dark"] .forms-toolbox-item, [data-theme="dark"] .forms-field-card, [data-theme="dark"] .forms-empty-state { background: var(--ctr-app-surface-alt) !important; border-color: var(--ctr-app-border) !important; color: var(--ctr-app-text) !important; } [data-theme="dark"] .forms-toolbox-item:hover, [data-theme="dark"] .forms-field-card:hover, [data-theme="dark"] .btn-check:checked + .csv-target-tab { background: var(--ctr-primary-soft) !important; border-color: var(--ctr-primary) !important; color: var(--ctr-primary) !important; } [data-theme="dark"] .vot-card { background: var(--ctr-app-surface) !important; border-color: var(--ctr-app-border) !important; color: var(--ctr-app-text) !important; } [data-theme="dark"] .vot-field, [data-theme="dark"] .vot-btn--secondary, [data-theme="dark"] .vot-btn-active { background: var(--ctr-app-surface-alt) !important; border-color: var(--ctr-app-border) !important; color: var(--ctr-app-text) !important; } [data-theme="dark"] .vot-card__inc, [data-theme="dark"] .vot-field__value { color: var(--ctr-app-text) !important; } [data-theme="dark"] .vot-field__label, [data-theme="dark"] .vot-field__muted, [data-theme="dark"] .vot-field__link, [data-theme="dark"] .vot-icon-btn { color: var(--ctr-app-muted) !important; } [data-theme="dark"] .vot-icon-btn:hover { background: var(--ctr-primary-soft) !important; color: var(--ctr-primary) !important; } [data-theme="dark"] .vot-badge--secondary { background: var(--ctr-app-surface-alt) !important; border-color: var(--ctr-app-border) !important; color: var(--ctr-app-muted) !important; } [data-theme="dark"] .ctrv2-body--enduser .ctrv2-field__radio label::before, [data-theme="dark"] .ctrv2-body--enduser .ctrv2-field__check span::before { background: var(--ctrv2-card) !important; border-color: var(--ctrv2-border) !important; } [data-theme="dark"] .ctrv2-body--enduser .ctrv2-field__radio input:checked + label::before, [data-theme="dark"] .ctrv2-body--enduser .ctrv2-field__check input:checked + span::before { background: var(--ctrv2-primary) !important; border-color: var(--ctrv2-primary) !important; box-shadow: inset 0 0 0 3px var(--ctrv2-card) !important; } [data-theme="dark"] .ctrv2-media__pending { background: var(--ctr-warning-soft) !important; border-color: rgba(250, 204, 21, .35) !important; color: var(--ctr-warning) !important; } /* Inline legacy color helpers ------------------------------------------ */ [data-theme="dark"] [style*="background:#fff"], [data-theme="dark"] [style*="background: #fff"], [data-theme="dark"] [style*="background:#ffffff"], [data-theme="dark"] [style*="background: #ffffff"] { background: var(--ctr-app-surface) !important; } [data-theme="dark"] [style*="background:#f7f8fa"], [data-theme="dark"] [style*="background: #f7f8fa"], [data-theme="dark"] [style*="background:#f8fafc"], [data-theme="dark"] [style*="background: #f8fafc"], [data-theme="dark"] [style*="background:#f8f9fa"], [data-theme="dark"] [style*="background: #f8f9fa"] { background: var(--ctr-app-surface-alt) !important; } [data-theme="dark"] [style*="color:#222"], [data-theme="dark"] [style*="color: #222"], [data-theme="dark"] [style*="color:#1f2937"], [data-theme="dark"] [style*="color: #1f2937"] { color: var(--ctr-app-text) !important; } /* Keep mail/PDF-like print outputs white unless printed from browser. */ @media print { html, body { background: #fff !important; color: #111 !important; } }