/* ============================================================
   Minimal Clean Admin — Global Overrides
   Wird ZULETZT geladen und setzt die Minimal-Tokens gegen
   Domiex / Materio / Bootstrap-Defaults durch.
   ============================================================ */

/* ---------- Grundlegende Oberflächen-Farben ------------------ */
html, body {
    font-family: var(--font-sans) !important;
    background: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
    font-size: 14px !important;
}

body, .main-content, .page-content, .container, .container-fluid {
    background-color: var(--color-surface) !important;
}

/* Kill Legacy-Margin auf .page-wrapper (Domiex ließ einen Gap links) */
.page-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Sidebar vereinheitlichen */
.sidebar,
nav.sidebar {
    background: var(--color-surface-raised) !important;
    border-right: 1px solid var(--color-border) !important;
    box-shadow: none !important;
}
.sidebar-header {
    background: var(--color-surface-raised) !important;
    border-bottom: 1px solid var(--color-border) !important;
    height: var(--layout-topbar-height) !important;
}
.sidebar-menu-title {
    color: var(--color-text-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    padding: var(--space-4) var(--space-3) var(--space-2) !important;
    margin: 0 !important;
}
.sidebar-menu-link {
    color: var(--color-text-secondary) !important;
    font-weight: 500 !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-2) var(--space-3) !important;
    margin: 1px 0 !important;
    min-height: 36px !important;
    background: transparent !important;
}
.sidebar-menu-link:hover {
    background: var(--color-surface-hover) !important;
    color: var(--color-text-primary) !important;
}
/* Active-State (Haupt-Nav-Items): solides Brand-Blau + weisser Text fuer klare Sichtbarkeit */
.sidebar-menu-link.active {
    background: var(--color-brand-primary) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(26,127,208,0.25) !important;
}
.sidebar-menu-link.active:hover {
    background: var(--color-brand-primary-hover) !important;
    color: #fff !important;
}
.sidebar-menu-link.active .sidebar-menu-icon,
.sidebar-menu-link.active .sidebar-menu-text {
    color: #fff !important;
}
/* Sub-Entity-Active-State: tint + primary-Text (visuell abgestuft gegenueber Haupt-Item) */
.sidebar-submenu .sidebar-menu-link.active,
.sidebar-submenu-link.active {
    background: var(--color-brand-primary-tint) !important;
    color: var(--color-brand-primary) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}
.sidebar-submenu .sidebar-menu-link.active:hover,
.sidebar-submenu-link.active:hover {
    background: var(--color-brand-primary-tint) !important;
    color: var(--color-brand-primary-hover) !important;
}
.sidebar-menu-icon {
    color: currentColor !important;
    width: 18px !important;
    font-size: 18px !important;
}

/* Topbar vereinheitlichen */
.topbar,
header.topbar {
    background: var(--color-surface-raised) !important;
    border-bottom: 1px solid var(--color-border) !important;
    height: var(--layout-topbar-height) !important;
    box-shadow: none !important;
    padding: 0 var(--space-5) !important;
}
.topbar-search input,
.topbar input[type="search"] {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--color-border) !important;
    background: var(--color-surface-sunken) !important;
    height: 34px !important;
    font-size: 13px !important;
}
/* Topbar-Search: das alte app.css (Domiex) macht .search-icon position:absolute
   und setzt padding-left:2.75rem auf .form-control. Im neuen Flex-Layout (layout.css)
   ist das Icon ein flex-item — wir muessen die Legacy-Absolute-Pos zurueckdrehen,
   sonst kollidiert das Icon mit dem Placeholder. */
.topbar-search {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    padding: 0 var(--space-3) !important;
    height: 36px !important;
}
.topbar-search .search-icon {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    font-size: 16px !important;
    color: var(--color-text-muted) !important;
    flex-shrink: 0 !important;
}
.topbar-search .form-control,
.topbar-search input.form-control {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    height: auto !important;
    box-shadow: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.topbar-search .form-control:focus {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

/* Main-Content — volle Breite, keine Zentrierung, keine max-width */
.main-content {
    margin-left: var(--layout-sidebar-width) !important;
    width: calc(100% - var(--layout-sidebar-width)) !important;
    max-width: none !important;
}
.sidebar.sidebar-collapsed ~ .main-content {
    margin-left: var(--layout-sidebar-collapsed) !important;
    width: calc(100% - var(--layout-sidebar-collapsed)) !important;
}
.page-content {
    padding: var(--space-5) var(--space-5) !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    background: var(--color-surface) !important;
}
.page-content > .container,
.page-content > .container-fluid,
.page-content > .container-xxl,
.page-content .container-fluid {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Alle Bootstrap-Panels & Cards */
.card,
div.card {
    background: var(--color-surface-raised) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: none !important;
}
.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--color-border) !important;
    padding: var(--space-4) var(--space-5) !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
}
.card-body { padding: var(--space-5) !important; }
.card-footer {
    background: var(--color-surface-sunken) !important;
    border-top: 1px solid var(--color-border) !important;
    padding: var(--space-3) var(--space-5) !important;
}

/* Tables */
.table,
table.table {
    background: var(--color-surface-raised) !important;
    font-size: 13.5px !important;
    color: var(--color-text-primary) !important;
}
.table thead th {
    background: var(--color-surface-sunken) !important;
    color: var(--color-text-muted) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    border-bottom: 1px solid var(--color-border) !important;
    padding: var(--space-3) var(--space-4) !important;
}
.table tbody td {
    border-bottom: 1px solid var(--color-border) !important;
    border-top: none !important;
    padding: var(--space-3) var(--space-4) !important;
    color: var(--color-text-primary) !important;
}
.table tbody tr:hover { background: var(--color-surface-hover) !important; }
.table-responsive { border-radius: var(--radius-lg) !important; }

/* Form inputs — Bootstrap-Reset */
.form-control,
.form-select,
input.form-control,
select.form-select,
textarea.form-control {
    border: 1px solid var(--color-border-strong) !important;
    border-radius: var(--radius-md) !important;
    background: var(--color-surface-raised) !important;
    color: var(--color-text-primary) !important;
    font-size: 13.5px !important;
    padding: var(--space-2) var(--space-3) !important;
    min-height: 36px !important;
    box-shadow: none !important;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--color-brand-primary) !important;
    box-shadow: var(--shadow-focus) !important;
}
.form-control::placeholder { color: var(--color-text-muted) !important; }
.form-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--color-text-primary) !important;
    margin-bottom: var(--space-1) !important;
}

/* Buttons — alles aus Bootstrap deaktivieren, unsere Tokens nutzen */
.btn {
    border-radius: var(--radius-md) !important;
    font-family: var(--font-sans) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    padding: 7px 14px !important;
    min-height: 34px !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    justify-content: center !important;
    border: 1px solid transparent !important;
}
.btn.btn-sm { font-size: 12.5px !important; padding: 4px 10px !important; min-height: 28px !important; }
.btn.btn-lg { font-size: 14.5px !important; padding: 10px 20px !important; min-height: 42px !important; }

.btn-primary {
    /* WCAG AA: weiss auf #1A7FD0 = 4.2 (knapp drunter). brand-primary-hover (#155E9E)
       gibt 6.7:1 → AA-konform und visuell weiterhin als Primary-Action erkennbar. */
    background: var(--color-brand-primary-hover) !important;
    border-color: var(--color-brand-primary-hover) !important;
    color: #fff !important;
    font-weight: 600 !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--color-brand-primary-active) !important;
    border-color: var(--color-brand-primary-active) !important;
    color: #fff !important;
}
.btn-secondary {
    background: var(--color-surface-raised) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-strong) !important;
    font-weight: 500 !important;
}
.btn-secondary:hover {
    background: var(--color-surface-hover) !important;
    color: var(--color-text-primary) !important;
}
.btn-success {
    background: var(--color-success) !important;
    border-color: var(--color-success) !important;
    color: #fff !important;
    font-weight: 600 !important;
}
.btn-success:hover { background: #15803d !important; border-color: #15803d !important; }
.btn-danger {
    background: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
    color: #fff !important;
    font-weight: 600 !important;
}
.btn-danger:hover { background: #b91c1c !important; border-color: #b91c1c !important; }

.btn-outline-primary {
    background: transparent !important;
    color: var(--color-brand-primary) !important;
    border-color: var(--color-brand-primary) !important;
}
.btn-outline-primary:hover {
    background: var(--color-brand-primary-tint) !important;
    color: var(--color-brand-primary-hover) !important;
    border-color: var(--color-brand-primary) !important;
}
.btn-outline-secondary {
    background: transparent !important;
    color: var(--color-text-secondary) !important;
    border-color: var(--color-border-strong) !important;
}
.btn-outline-secondary:hover {
    background: var(--color-surface-hover) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-strong) !important;
}
.btn-outline-success {
    background: transparent !important;
    color: var(--color-success) !important;
    border-color: var(--color-success) !important;
}
.btn-outline-success:hover { background: var(--color-success-tint) !important; color: var(--color-success) !important; }
.btn-outline-warning {
    background: transparent !important;
    color: var(--color-warning) !important;
    border-color: var(--color-warning) !important;
}
.btn-outline-warning:hover { background: var(--color-warning-tint) !important; color: var(--color-warning) !important; }
.btn-outline-danger {
    background: transparent !important;
    color: var(--color-danger) !important;
    border-color: var(--color-danger) !important;
}
.btn-outline-danger:hover { background: var(--color-danger-tint) !important; color: var(--color-danger) !important; }
.btn-outline-info {
    background: transparent !important;
    color: var(--color-info) !important;
    border-color: var(--color-info) !important;
}
.btn-outline-info:hover { background: var(--color-info-tint) !important; color: var(--color-info) !important; }
.btn-light, .btn-white {
    background: var(--color-surface-raised) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
}
.btn-ghost {
    background: transparent !important;
    color: var(--color-text-secondary) !important;
    border-color: transparent !important;
}
.btn-ghost:hover {
    background: var(--color-surface-hover) !important;
    color: var(--color-text-primary) !important;
}

/* Badges */
.badge {
    font-family: var(--font-sans) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    border-radius: var(--radius-sm) !important;
    padding: 2px 8px !important;
    letter-spacing: 0.02em !important;
    border: 1px solid transparent !important;
}
.badge.bg-primary, .badge.bg-brand {
    background: var(--color-brand-primary-tint) !important;
    color: var(--color-brand-primary-hover) !important;
}
.badge.bg-success { background: var(--color-success-tint) !important; color: #0f7a38 !important; }
.badge.bg-warning { background: var(--color-warning-tint) !important; color: #9a5502 !important; }
.badge.bg-danger { background: var(--color-danger-tint) !important; color: #a81d1d !important; }
.badge.bg-info { background: var(--color-info-tint) !important; color: #03608e !important; }
.badge.bg-secondary, .badge.bg-light {
    background: var(--color-surface-sunken) !important;
    color: var(--color-text-secondary) !important;
    border-color: var(--color-border) !important;
}

/* Dark-Mode-Badges: die Tint-Farben werden im Dark-Theme dunkler. Wir kehren
   den Foreground in eine helle Variante um (WCAG AA → 4.5:1 in Dark). */
[data-theme="dark"] .badge.bg-primary,
[data-theme="dark"] .badge.bg-brand { color: #7DBBED !important; }
[data-theme="dark"] .badge.bg-success { color: #4ADE80 !important; }
[data-theme="dark"] .badge.bg-warning { color: #FBBF24 !important; }
[data-theme="dark"] .badge.bg-danger  { color: #F87171 !important; }
[data-theme="dark"] .badge.bg-info    { color: #38BDF8 !important; }
/* bg-outline-primary nutzt brand-primary (#1A7FD0) als color → 4.22 auf neutral-950.
   Dark-Mode helleren Brand-Ton + helleren Border. */
[data-theme="dark"] .badge.bg-outline-primary {
    color: #7DBBED !important;
    border-color: #58A8E8 !important;
}

/* btn-outline-* nutzen ihre Farbe als Text-Color → in Dark zu dunkel.
   Auf hellere Töne ziehen, AA passt. */
[data-theme="dark"] .btn-outline-primary {
    color: #7DBBED !important;
    border-color: #58A8E8 !important;
}
[data-theme="dark"] .btn-outline-primary:hover {
    background: #58A8E8 !important;
    color: #0A0F1C !important;
}
[data-theme="dark"] .btn-outline-success {
    color: #4ADE80 !important;
    border-color: #22C55E !important;
}
[data-theme="dark"] .btn-outline-success:hover {
    background: #22C55E !important;
    color: #0A0F1C !important;
}
[data-theme="dark"] .btn-outline-warning {
    color: #FBBF24 !important;
    border-color: #F59E0B !important;
}
[data-theme="dark"] .btn-outline-warning:hover {
    background: #F59E0B !important;
    color: #0A0F1C !important;
}
[data-theme="dark"] .btn-outline-danger {
    color: #F87171 !important;
    border-color: #EF4444 !important;
}
[data-theme="dark"] .btn-outline-danger:hover {
    background: #EF4444 !important;
    color: #0A0F1C !important;
}
[data-theme="dark"] .btn-outline-info {
    color: #38BDF8 !important;
    border-color: #0EA5E9 !important;
}
[data-theme="dark"] .btn-outline-info:hover {
    background: #0EA5E9 !important;
    color: #0A0F1C !important;
}

/* Nav-tabs */
.nav-tabs {
    border-bottom: 1px solid var(--color-border) !important;
    gap: 4px !important;
}
.nav-tabs .nav-link {
    border: none !important;
    border-bottom: 2px solid transparent !important;
    padding: var(--space-2) var(--space-4) !important;
    margin-bottom: -1px !important;
    color: var(--color-text-secondary) !important;
    font-weight: 500 !important;
    font-size: 13.5px !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.nav-tabs .nav-link:hover { color: var(--color-text-primary) !important; background: transparent !important; }
.nav-tabs .nav-link.active {
    color: var(--color-brand-primary) !important;
    border-bottom-color: var(--color-brand-primary) !important;
    background: transparent !important;
    font-weight: 600 !important;
}

/* Alerts */
.alert {
    border-radius: var(--radius-md) !important;
    border: 1px solid transparent !important;
    padding: var(--space-3) var(--space-4) !important;
    font-size: 13.5px !important;
}
.alert-info { background: var(--color-info-tint) !important; color: #03608e !important; border-color: transparent !important; }
.alert-success { background: var(--color-success-tint) !important; color: #0f7a38 !important; border-color: transparent !important; }
.alert-warning { background: var(--color-warning-tint) !important; color: #9a5502 !important; border-color: transparent !important; }
.alert-danger { background: var(--color-danger-tint) !important; color: #a81d1d !important; border-color: transparent !important; }

/* Modals */
.modal-backdrop, div.modal-backdrop {
    background: rgba(10, 15, 28, 0.52) !important;
    backdrop-filter: blur(2px) !important;
    opacity: 1 !important;
}
.modal-content {
    background: var(--color-surface-raised) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-xl) !important;
}
.modal-header {
    padding: var(--space-4) var(--space-5) !important;
    border-bottom: 1px solid var(--color-border) !important;
    background: transparent !important;
}
.modal-title { font-size: 16px !important; font-weight: 600 !important; }
.modal-body { padding: var(--space-5) !important; }
.modal-footer {
    padding: var(--space-4) var(--space-5) !important;
    border-top: 1px solid var(--color-border) !important;
    background: var(--color-surface-sunken) !important;
}

/* Dropdown */
.dropdown-menu {
    background: var(--color-surface-raised) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: var(--space-1) !important;
    /* WICHTIG: ueber dem .dropdown-backdrop (z-index 1040) liegen, damit Klicks die Items erreichen */
    z-index: 1050 !important;
}
/* Dropdown-Backdrop: nur visueller Effekt, KEINE Klicks abfangen.
   Click-outside wird per Document-Listener (theme-toggle.js → window.dropdownOutside)
   gehandelt. Verhindert dass Klicks auf dropdown-items vom Backdrop gestohlen werden
   (alter Bug 6 aus Session 6). */
.dropdown-backdrop {
    pointer-events: none !important;
}

/* ============================================================
   Kalender + Nachrichten: hartcodierte Hex-Farben dark-modusieren
   Beide Pages haben in ihren <style>-Bloecken konkrete Hex-Werte fuer
   Backgrounds und Texte gesetzt. Im Dark-Mode bleiben diese leuchtend hell.
   Wir mappen die Light-Hex auf Surface-Tokens fuer den Dark-Mode.
   ============================================================ */

/* --- Kalender (Components/Pages/Kalender.razor) --- */
[data-theme="dark"] .calendar-grid { background: var(--color-surface-raised) !important; }
[data-theme="dark"] .calendar-header {
    background: var(--color-surface-sunken) !important;
    color: var(--color-text-secondary) !important;
    border-bottom-color: var(--color-border) !important;
}
[data-theme="dark"] .calendar-day {
    background: var(--color-surface-raised) !important;
    border-right-color: var(--color-border) !important;
    border-bottom-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}
[data-theme="dark"] .calendar-day.other-month {
    background: var(--color-surface) !important;
}
[data-theme="dark"] .calendar-day.other-month .day-number { color: var(--color-text-muted) !important; }
[data-theme="dark"] .calendar-day:hover { background: var(--color-surface-hover) !important; }
[data-theme="dark"] .calendar-day.today { background: rgba(88, 168, 232, 0.10) !important; }
[data-theme="dark"] .task-panel {
    background: var(--color-surface-sunken) !important;
    border-left-color: var(--color-border) !important;
}
[data-theme="dark"] .task-panel-header {
    background: var(--color-surface-raised) !important;
    border-bottom-color: var(--color-border) !important;
}
[data-theme="dark"] .task-card {
    background: var(--color-surface-raised) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

/* --- Nachrichten (Components/Pages/Nachrichten.razor) --- */
/* messages-container hatte height: calc(100vh - 80px) — passt nicht mehr nach
   .page-content overflow-y:auto. 100% des verfügbaren Slots. */
.messages-container { height: 100% !important; min-height: 480px; }
[data-theme="dark"] .messages-container { background: var(--color-surface) !important; }
[data-theme="dark"] .conversations-panel {
    background: var(--color-surface-raised) !important;
    border-right-color: var(--color-border) !important;
}
[data-theme="dark"] .conversations-header,
[data-theme="dark"] .conversation-item {
    border-bottom-color: var(--color-border) !important;
}
[data-theme="dark"] .conversation-item:hover { background: var(--color-surface-hover) !important; }
[data-theme="dark"] .conversation-item.active {
    background: rgba(88, 168, 232, 0.12) !important;
    border-left-color: #58A8E8 !important;
}
[data-theme="dark"] .conversation-name { color: var(--color-text-primary) !important; }
[data-theme="dark"] .conversation-preview,
[data-theme="dark"] .conversation-time { color: var(--color-text-muted) !important; }
[data-theme="dark"] .chat-header,
[data-theme="dark"] .chat-input {
    background: var(--color-surface-raised) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}
[data-theme="dark"] .chat-message.theirs .chat-bubble {
    background: var(--color-surface-raised) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}
[data-theme="dark"] .chat-quote {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--color-text-secondary) !important;
}
.dropdown-item {
    padding: var(--space-2) var(--space-3) !important;
    font-size: 13.5px !important;
    color: var(--color-text-primary) !important;
    border-radius: var(--radius-sm) !important;
}
.dropdown-item:hover { background: var(--color-surface-hover) !important; color: var(--color-text-primary) !important; }

/* Designer-Unified-Toolbar entschärfen */
.unified-designer-page {
    background: var(--color-surface) !important;
    padding: 0 !important;
}
.unified-designer-tabs {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin-bottom: var(--space-5) !important;
}
.unified-designer-tabs .nav-tabs { border: none !important; margin: 0 !important; padding: 0 !important; }
.unified-designer-tabs .nav-tabs .nav-link {
    padding: 10px 16px !important;
    font-size: 13.5px !important;
    color: var(--color-text-secondary) !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-weight: 500 !important;
}
.unified-designer-tabs .nav-tabs .nav-link.active {
    color: var(--color-brand-primary) !important;
    border-bottom-color: var(--color-brand-primary) !important;
    background: transparent !important;
    font-weight: 600 !important;
}

/* Unified Designer Titel-Block (aus designer-unified.css) */
.unified-designer-title {
    background: transparent !important;
    border: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 0 var(--space-4) 0 !important;
    color: var(--color-text-primary) !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
}
.unified-designer-title h1,
.unified-designer-title h2 {
    color: var(--color-text-primary) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em !important;
    margin: 0 !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
}
.unified-designer-title .subtitle {
    color: var(--color-text-muted) !important;
    font-size: 13.5px !important;
    margin-top: 2px !important;
    font-weight: 400 !important;
}
.unified-designer-toolbar {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 0 var(--space-4) !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    flex-wrap: wrap !important;
}
.unified-designer-toolbar .toolbar-spacer { flex: 1 !important; }

/* Footer */
.app-footer, footer.app-footer {
    background: var(--color-surface) !important;
    color: var(--color-text-muted) !important;
    font-size: 12px !important;
    padding: var(--space-3) var(--space-5) !important;
    border-top: 1px solid var(--color-border) !important;
}

/* Unterdrückung harter Schatten/Gradients aus Materio */
.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl { box-shadow: none !important; }
.card-shadow, .border-shadow { box-shadow: var(--shadow-sm) !important; }

/* Eckige Kalenderklassen / Materio Light-Theme overrides */
.bg-label-primary, .text-primary { color: var(--color-brand-primary) !important; }

/* Standard-Sidebar-Icons auf 18px */
.sidebar-menu i, .sidebar-menu svg { width: 18px; height: 18px; font-size: 17px; }

/* Scrollbar-Standard */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--color-neutral-400); background-clip: content-box; }

/* ============================================================
   Dark Mode — gilt für das gesamte Layout via [data-theme="dark"]
   ============================================================ */
[data-theme="dark"] body,
[data-theme="dark"] .main-content,
[data-theme="dark"] .page-content,
[data-theme="dark"] .container,
[data-theme="dark"] .container-fluid {
    background-color: var(--color-surface) !important;
    color: var(--color-text-primary) !important;
}
[data-theme="dark"] .sidebar,
[data-theme="dark"] .topbar,
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .app-footer,
[data-theme="dark"] .unified-designer-tabs {
    background: var(--color-surface-raised) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .sidebar-header {
    background: var(--color-surface-raised) !important;
    border-bottom-color: var(--color-border) !important;
}
[data-theme="dark"] .table,
[data-theme="dark"] table.table {
    background: var(--color-surface-raised) !important;
    color: var(--color-text-primary) !important;
}
[data-theme="dark"] .table thead th { background: var(--color-surface-sunken) !important; color: var(--color-text-muted) !important; }
[data-theme="dark"] .table tbody td { color: var(--color-text-primary) !important; border-bottom-color: var(--color-border) !important; }
[data-theme="dark"] .table tbody tr:hover { background: var(--color-surface-hover) !important; }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input.form-control,
[data-theme="dark"] textarea.form-control,
[data-theme="dark"] select.form-select {
    background: var(--color-surface-sunken) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background: var(--color-surface-raised) !important;
    border-color: var(--color-brand-primary) !important;
}
[data-theme="dark"] .topbar-search,
[data-theme="dark"] .topbar input[type="search"] {
    background: var(--color-surface-sunken) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .btn-secondary {
    background: var(--color-surface-sunken) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .btn-secondary:hover { background: var(--color-surface-hover) !important; }

/* Materio / Domiex specific overrides for dark */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light { background: var(--color-surface-raised) !important; }
[data-theme="dark"] .text-dark { color: var(--color-text-primary) !important; }
[data-theme="dark"] .text-muted { color: var(--color-text-muted) !important; }
[data-theme="dark"] .border { border-color: var(--color-border) !important; }

/* Status-Pills auf beiden Modes */
.status-workflow-pills { gap: 0 !important; }
.status-workflow-pills .status-pill {
    background: var(--color-surface-sunken) !important;
    color: var(--color-text-secondary) !important;
    border: 1px solid var(--color-border) !important;
}
.status-workflow-pills .status-pill.active {
    background: var(--color-brand-primary) !important;
    color: #fff !important;
    border-color: var(--color-brand-primary) !important;
    font-weight: 600 !important;
}

/* Login-Seite Minimal */
.login-wrap, .auth-wrap {
    background: var(--color-surface) !important;
}

/* Designer Status-Bar (Power-User Hybrid-Element) */
.dh-designer-statusbar {
    position: fixed;
    bottom: 0;
    left: var(--layout-sidebar-width);
    right: 0;
    height: 26px;
    background: var(--color-neutral-900) !important;
    color: var(--color-neutral-300) !important;
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
    border-top: 1px solid var(--color-neutral-700);
    z-index: 900;
}
.sidebar.sidebar-collapsed ~ .main-content ~ .dh-designer-statusbar,
.sidebar.sidebar-collapsed + .main-content .dh-designer-statusbar {
    left: var(--layout-sidebar-collapsed);
}
.dh-sb-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--color-neutral-300);
}
.dh-sb-item::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-neutral-500);
}
.dh-sb-item.dh-sb-ok::before { background: var(--color-success); }
.dh-sb-item.dh-sb-warn::before { background: var(--color-warning); }
.dh-sb-grow { flex: 1; }
.dh-sb-kbd-hint {
    color: var(--color-neutral-400);
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.dh-kbd {
    background: var(--color-neutral-800);
    border: 1px solid var(--color-neutral-700);
    padding: 0 5px;
    border-radius: 3px;
    color: var(--color-neutral-100);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0;
}
.dh-mono { font-family: var(--font-mono); color: var(--color-brand-primary); }
/* Give designer pages bottom padding so content isn't hidden under the status bar */
.unified-designer-page { padding-bottom: 30px !important; }

/* Theme-Toggle Button — zeigt Sonne im Light, Mond im Dark */
.theme-toggle-btn {
    position: relative;
    width: 36px;
    min-height: 36px;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.theme-toggle-btn .theme-icon-light,
.theme-toggle-btn .theme-icon-dark {
    font-size: 18px;
    line-height: 1;
    transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
/* Toggle-Symbol zeigt das ZIEL-Theme (Action-Hint), nicht den aktuellen Stand:
   - Light-Mode → Mond sichtbar (Klick wechselt zu Dark)
   - Dark-Mode  → Sonne sichtbar (Klick wechselt zu Light) */
.theme-toggle-btn .theme-icon-light { display: none; }
.theme-toggle-btn .theme-icon-dark { display: inline-block; }
[data-theme="dark"] .theme-toggle-btn .theme-icon-dark { display: none; }
[data-theme="dark"] .theme-toggle-btn .theme-icon-light { display: inline-block; }

/* ============================================================
   Mobile Overrides (< 1024px) — setzen Desktop-Sidebar-Margin zurueck
   ============================================================ */
@media (max-width: 1023.98px) {
    .sidebar {
        transform: translateX(-100%) !important;
        transition: transform var(--duration-base, 180ms) var(--ease-out, ease) !important;
        z-index: 1060 !important;
    }
    .sidebar.sidebar-mobile-open {
        transform: translateX(0) !important;
        box-shadow: 4px 0 20px rgba(10, 15, 28, 0.18) !important;
    }
    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    .sidebar.sidebar-collapsed ~ .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
    .page-content {
        padding: var(--space-4) var(--space-3) !important;
        overflow-x: hidden !important;
    }
    .page-wrapper {
        overflow-x: hidden !important;
    }
    body {
        overflow-x: hidden !important;
    }
    /* Sidebar-Backdrop wenn mobile offen */
    .sidebar-backdrop {
        display: none !important;
    }
    .sidebar-backdrop.show {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        background: rgba(10, 15, 28, 0.45) !important;
        z-index: 1055 !important;
    }
}

/* ============================================================
   Designer-Mode-Button + Design-Mode-Exit — orange sichtbar halten
   gegen .btn/button.btn-Regeln aus components.css/core.css/bootstrap
   ============================================================ */
.btn.designer-mode-btn,
button.designer-mode-btn {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%) !important;
    background-image: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%) !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(255, 107, 53, 0.3) !important;
}
.btn.designer-mode-btn:hover,
button.designer-mode-btn:hover {
    background: linear-gradient(135deg, #E55A2B 0%, #D4800F 100%) !important;
    background-image: linear-gradient(135deg, #E55A2B 0%, #D4800F 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.4) !important;
}
.btn.designer-mode-btn.active,
button.designer-mode-btn.active {
    background: linear-gradient(135deg, #E55A2B 0%, #D4800F 100%) !important;
    background-image: linear-gradient(135deg, #E55A2B 0%, #D4800F 100%) !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.3), 0 2px 6px rgba(255, 107, 53, 0.3) !important;
}

.btn.design-mode-exit,
button.design-mode-exit {
    background: #BF360C !important;
    background-image: none !important;
    color: #fff !important;
    border: 1px solid #BF360C !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(191, 54, 12, 0.25) !important;
}
.btn.design-mode-exit:hover,
button.design-mode-exit:hover {
    background: #8A2700 !important;
    background-image: none !important;
    color: #fff !important;
    border-color: #8A2700 !important;
    box-shadow: 0 4px 10px rgba(191, 54, 12, 0.35) !important;
}
[data-theme="dark"] .btn.design-mode-exit,
[data-theme="dark"] button.design-mode-exit {
    /* WCAG AA: weiss auf #E55A2B = 3.60 (drunter). #BF360C → 5.60. */
    background: #BF360C !important;
    color: #fff !important;
    border-color: #BF360C !important;
}
[data-theme="dark"] .btn.design-mode-exit:hover,
[data-theme="dark"] button.design-mode-exit:hover {
    background: #A93613 !important;
    color: #fff !important;
    border-color: #A93613 !important;
}

/* ============================================================
   WCAG 2.1 AA — Kontrast-Korrekturen (axe-Befunde, Session 7)
   ============================================================ */

/* Bootstrap-Defaults fuer .text-* sind nicht AA-konform auf Weiss
   (text-success #22c55e = 2.27, text-warning #eab308 = 1.91, etc.).
   Wir mappen auf die dunkleren Token-Varianten, die in den Badges schon
   AA-konformen Kontrast erreichen. */
.text-success { color: #0f7a38 !important; }
.text-warning { color: #9a5502 !important; }
.text-danger  { color: #a81d1d !important; }
.text-info    { color: #03608e !important; }
/* Materio core.css setzt .text-muted mit !important auf rgb(171,168,177) — viel zu
   hell. Wir erzwingen unseren AA-konformen Token-Wert (#525B70 ≈ 6.45:1 auf surface). */
.text-muted   { color: var(--color-text-muted) !important; }
small.text-muted, .small.text-muted { color: var(--color-text-muted) !important; }

/* Materio/Domiex setzen --bs-heading-color = #6c757d, was h6 auf 4.44:1 bringt
   (knapp unter AA). Wir mappen Headings auf text-primary (h1–h5) bzw. text-muted (h6). */
h6 { color: var(--color-text-muted) !important; }
[data-theme="dark"] .text-success { color: #4ade80 !important; }
[data-theme="dark"] .text-warning { color: #fbbf24 !important; }
[data-theme="dark"] .text-danger  { color: #f87171 !important; }
[data-theme="dark"] .text-info    { color: #38bdf8 !important; }

/* Sidebar Active-State: brand-primary (#1A7FD0) gegen weiss = 4.2 (knapp unter AA).
   #155E9E waere 6.7:1 aber zu dunkel/streng. #1670B5 = 5.23:1 → AA passt + freundlicher.
   Hover-State nimmt den dunkleren brand-primary-hover (mehr Press-Feedback). */
.sidebar-menu-link.active {
    background: #1670B5 !important;
    box-shadow: 0 1px 3px rgba(22, 112, 181, 0.28) !important;
}
.sidebar-menu-link.active:hover {
    background: var(--color-brand-primary-hover) !important;
}
/* Sub-Entity Active-State (helle Tint-Variante): brand-primary auf brand-primary-tint
   = 3.73 → unter AA. Auf brand-primary-hover hochziehen → 5.96:1. */
.sidebar-submenu .sidebar-menu-link.active,
.sidebar-submenu-link.active {
    color: var(--color-brand-primary-hover) !important;
}
/* Sub-Entity Hover-State: Materio rendert mit #2092ec auf #edf6fd → 3.0. Hochziehen. */
.sidebar-submenu .sidebar-menu-link:hover,
.sidebar-submenu-link:hover {
    color: var(--color-brand-primary-hover) !important;
}

/* Footer-Copyright + Version: dunkler ziehen (text-primary statt text-secondary)
   für bessere Lesbarkeit nach User-Wunsch. */
.app-footer-copyright,
.app-footer-version,
.app-footer-version strong {
    color: var(--color-text-primary) !important;
    font-weight: 500 !important;
}
.app-footer-version strong { font-weight: 600 !important; }

/* Bootstrap-Tabs (.nav-link.active) auf Stammdaten/RoleManagement etc.:
   brand-primary auf Surface = 3.98 → unter AA. Hochziehen auf brand-primary-hover. */
.nav-link.active:not(.sidebar-menu-link):not(.sidebar-submenu-link) {
    color: var(--color-brand-primary-hover) !important;
}
/* Dark-Mode: brand-primary-hover auf neutral-950 = 2.65 (zu dunkel). Helle Variante. */
[data-theme="dark"] .nav-link.active:not(.sidebar-menu-link):not(.sidebar-submenu-link) {
    color: #58A8E8 !important;
}
[data-theme="dark"] .sidebar-submenu .sidebar-menu-link.active,
[data-theme="dark"] .sidebar-submenu-link.active {
    color: #58A8E8 !important;
}
[data-theme="dark"] .sidebar-submenu .sidebar-menu-link:hover,
[data-theme="dark"] .sidebar-submenu-link:hover {
    color: #58A8E8 !important;
}

/* Paragraph-Color in Dark-Mode: Bootstrap setzt #6c757d, was auf neutral-950
   nur 3.79:1 erreicht. Wir mappen auf text-secondary. */
[data-theme="dark"] p {
    color: var(--color-text-secondary) !important;
}

/* Dark-Mode Breadcrumbs: Materio setzt Item-Color auf #6d6777 / Active auf #433c50,
   was auf neutral-950 nur 3.51 / 1.82 erreicht. Wir setzen passende helle Toene. */
[data-theme="dark"] .breadcrumb-item a {
    color: var(--color-text-secondary) !important;
}
[data-theme="dark"] .breadcrumb-item.active,
[data-theme="dark"] .breadcrumb-item.active a {
    color: var(--color-text-muted) !important;
}

/* Dark-Mode generic text: Materio setzt diverse list-/span-/fw-medium-color auf
   #433c50 (1.69:1 auf neutral-950). Wir greifen body-color durch, wo nicht spezifisch
   ueberschrieben — text-primary erbt 12.5:1+. */
[data-theme="dark"] li,
[data-theme="dark"] span:not(.badge):not([class*="bg-"]):not(.avatar-text):not(.kpi-card-value):not(.kbd),
[data-theme="dark"] .fw-medium,
[data-theme="dark"] .fw-semibold,
[data-theme="dark"] .fw-bold {
    color: inherit;
}
[data-theme="dark"] body,
[data-theme="dark"] .card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .list-group-item {
    color: var(--color-text-primary) !important;
}

/* Bootstrap .btn-success: weiss auf #16A34A = 3.30 — unter AA fuer Text.
   Hintergrund auf #15803D dunkler ziehen → 5.02:1. */
.btn-success,
button.btn-success {
    background-color: #15803D !important;
    border-color: #15803D !important;
    color: #fff !important;
}
.btn-success:hover,
button.btn-success:hover {
    background-color: #126331 !important;
    border-color: #126331 !important;
}