/**
 * PaperOffice AI - Dark Mode Styles
 * ==================================
 * Palantir-inspiriertes Dark Theme
 * 
 * Aktiviert durch: html.dark-side oder [data-theme="dark"]
 * 
 * Erstellt: Dezember 2024
 */

/* ============================================
   BASE ELEMENTS
   ============================================ */

html.dark-side,
[data-theme="dark"] {
    background-color: var(--po-bg-primary) !important;
}

html.dark-side body,
[data-theme="dark"] body {
    background-color: var(--po-bg-primary) !important;
    color: var(--po-text-primary) !important;
}

/* ============================================
   MAIN LAYOUT - PaperOffice AI Suite
   ============================================ */

/* WICHTIG: Überschreibt auch Inline-Styles mit !important */
html.dark-side #paperoffice_ai_suite_wrapper,
html.dark-side #paperoffice_ai_suite_wrapper[style],
[data-theme="dark"] #paperoffice_ai_suite_wrapper,
[data-theme="dark"] #paperoffice_ai_suite_wrapper[style] {
    background-color: var(--po-bg-primary) !important;
}

html.dark-side #paperoffice_ai_suite_wrapper_content_main_wrapper_cell,
html.dark-side #paperoffice_ai_suite_wrapper_content_main_wrapper_cell[style],
[data-theme="dark"] #paperoffice_ai_suite_wrapper_content_main_wrapper_cell,
[data-theme="dark"] #paperoffice_ai_suite_wrapper_content_main_wrapper_cell[style] {
    background-color: var(--po-bg-primary) !important;
}

/* Sidebars - mit Inline-Style Override */
html.dark-side #top_menu_sidebar_left_wrapper,
html.dark-side #top_menu_sidebar_left_wrapper[style],
html.dark-side #top_menu_sidebar_right_wrapper,
html.dark-side #top_menu_sidebar_right_wrapper[style],
[data-theme="dark"] #top_menu_sidebar_left_wrapper,
[data-theme="dark"] #top_menu_sidebar_left_wrapper[style],
[data-theme="dark"] #top_menu_sidebar_right_wrapper,
[data-theme="dark"] #top_menu_sidebar_right_wrapper[style] {
    background-color: var(--po-bg-sidebar) !important;
}

html.dark-side #top_menu_sidebar_left,
html.dark-side #top_menu_sidebar_right,
[data-theme="dark"] #top_menu_sidebar_left,
[data-theme="dark"] #top_menu_sidebar_right {
    background-color: var(--po-bg-sidebar) !important;
}

/* Sidebar Toggle Buttons - mit Inline-Style Override */
html.dark-side #top_menu_sidebar_left_toggle,
html.dark-side #top_menu_sidebar_left_toggle[style],
html.dark-side #top_menu_sidebar_right_toggle,
html.dark-side #top_menu_sidebar_right_toggle[style],
[data-theme="dark"] #top_menu_sidebar_left_toggle,
[data-theme="dark"] #top_menu_sidebar_left_toggle[style],
[data-theme="dark"] #top_menu_sidebar_right_toggle,
[data-theme="dark"] #top_menu_sidebar_right_toggle[style] {
    background-color: var(--po-bg-sidebar) !important;
    color: var(--po-text-muted) !important;
    border-color: var(--po-bg-sidebar) !important;
}

html.dark-side #top_menu_sidebar_left_toggle:hover,
html.dark-side #top_menu_sidebar_right_toggle:hover,
[data-theme="dark"] #top_menu_sidebar_left_toggle:hover,
[data-theme="dark"] #top_menu_sidebar_right_toggle:hover {
    background-color: var(--po-bg-tertiary) !important;
}

/* Alle Elemente mit hardcoded #EBEFF4 Inline-Styles */
html.dark-side [style*="background-color:#EBEFF4"],
html.dark-side [style*="background-color: #EBEFF4"],
html.dark-side [style*="background-color: rgb(235, 239, 244)"],
[data-theme="dark"] [style*="background-color:#EBEFF4"],
[data-theme="dark"] [style*="background-color: #EBEFF4"],
[data-theme="dark"] [style*="background-color: rgb(235, 239, 244)"] {
    background-color: var(--po-bg-primary) !important;
}

/* Pyro Message Box */
html.dark-side #paperoffice_pyro_message,
html.dark-side #paperoffice_pyro_message[style],
[data-theme="dark"] #paperoffice_pyro_message,
[data-theme="dark"] #paperoffice_pyro_message[style] {
    background-color: var(--po-bg-secondary) !important;
    color: var(--po-text-primary) !important;
}

/* Main Content Area — Shell-Canvas wie Sidebar-Rails, nicht po-bg-primary */
html.dark-side #paperoffice_ai_suite_wrapper_content,
html.dark-side #paperoffice_ai_suite_wrapper_content_main_wrapper,
html.dark-side #paperoffice_ai_suite_wrapper_content_main_wrapper.po-app-main-shell,
[data-theme="dark"] #paperoffice_ai_suite_wrapper_content,
[data-theme="dark"] #paperoffice_ai_suite_wrapper_content_main_wrapper,
[data-theme="dark"] #paperoffice_ai_suite_wrapper_content_main_wrapper.po-app-main-shell {
    background-color: var(--po-bg-sidebar) !important;
}

/* Top Menu / Header */
html.dark-side #paperoffice_ai_suite_wrapper_content_top,
[data-theme="dark"] #paperoffice_ai_suite_wrapper_content_top {
    background-color: var(--po-bg-secondary) !important;
    border-color: var(--po-border) !important;
}

/* Footer */
html.dark-side #paperoffice_ai_suite_wrapper_content_bottom,
[data-theme="dark"] #paperoffice_ai_suite_wrapper_content_bottom {
    background-color: var(--po-bg-secondary) !important;
    border-color: var(--po-border) !important;
}

/* ============================================
   METRO UI - WINDOWS & DIALOGS
   ============================================ */

html.dark-side .window,
html.dark-side .dialog,
[data-theme="dark"] .window,
[data-theme="dark"] .dialog {
    background-color: var(--po-bg-secondary) !important;
    border-color: var(--po-border) !important;
}

html.dark-side .window-caption,
html.dark-side .dialog-title,
[data-theme="dark"] .window-caption,
[data-theme="dark"] .dialog-title {
    background-color: var(--po-bg-tertiary) !important;
    color: var(--po-text-primary) !important;
    border-color: var(--po-border) !important;
}

html.dark-side .window-content,
html.dark-side .dialog-content,
[data-theme="dark"] .window-content,
[data-theme="dark"] .dialog-content {
    background-color: var(--po-bg-secondary) !important;
    color: var(--po-text-primary) !important;
}

html.dark-side .dialog-actions,
[data-theme="dark"] .dialog-actions {
    background-color: var(--po-bg-tertiary) !important;
    border-color: var(--po-border) !important;
}

/* Dialog Desktop Style Override */
html.dark-side .dialog_desktop,
[data-theme="dark"] .dialog_desktop {
    background-image: var(--po-dialog-bg) !important;
    border-color: var(--po-border) !important;
}

/* ============================================
   METRO UI - FORMS
   ============================================ */

/* Inputs */
html.dark-side .input,
html.dark-side .metro-input,
html.dark-side .textarea,
html.dark-side .select,
html.dark-side .file,
html.dark-side .spinner,
html.dark-side .tag-input,
html.dark-side input[type="text"],
html.dark-side input[type="password"],
html.dark-side input[type="email"],
html.dark-side input[type="number"],
html.dark-side input[type="search"],
html.dark-side input[type="url"],
html.dark-side input[type="tel"],
html.dark-side textarea,
[data-theme="dark"] .input,
[data-theme="dark"] .metro-input,
[data-theme="dark"] .textarea,
[data-theme="dark"] .select,
[data-theme="dark"] .file,
[data-theme="dark"] .spinner,
[data-theme="dark"] .tag-input,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] textarea {
    background-color: var(--po-bg-input) !important;
    border-color: var(--po-border) !important;
    color: var(--po-text-primary) !important;
}

html.dark-side .input:focus,
html.dark-side .metro-input:focus,
html.dark-side .textarea:focus,
html.dark-side input:focus,
html.dark-side textarea:focus,
[data-theme="dark"] .input:focus,
[data-theme="dark"] .metro-input:focus,
[data-theme="dark"] .textarea:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus {
    border-color: var(--po-accent) !important;
    box-shadow: 0 0 0 3px var(--po-accent-soft) !important;
}

/* Placeholder */
html.dark-side ::placeholder,
[data-theme="dark"] ::placeholder {
    color: var(--po-text-muted) !important;
    opacity: 1;
}

/* Select Dropdown */
html.dark-side .select .button-group,
html.dark-side .select .select-input,
[data-theme="dark"] .select .button-group,
[data-theme="dark"] .select .select-input {
    background-color: var(--po-bg-input) !important;
    color: var(--po-text-primary) !important;
}

html.dark-side .select .drop-container,
html.dark-side .select .option-list,
[data-theme="dark"] .select .drop-container,
[data-theme="dark"] .select .option-list {
    background-color: var(--po-bg-elevated) !important;
    border-color: var(--po-border) !important;
}

html.dark-side .select .option-list li,
html.dark-side .select .option-list a,
[data-theme="dark"] .select .option-list li,
[data-theme="dark"] .select .option-list a {
    color: var(--po-text-primary) !important;
}

html.dark-side .select .option-list li:hover,
html.dark-side .select .option-list a:hover,
[data-theme="dark"] .select .option-list li:hover,
[data-theme="dark"] .select .option-list a:hover {
    background-color: var(--po-bg-hover) !important;
}

html.dark-side .select .option-list li.active,
[data-theme="dark"] .select .option-list li.active {
    background-color: var(--po-accent) !important;
    color: var(--po-text-inverse) !important;
}

/* Checkbox & Radio */
html.dark-side .checkbox,
html.dark-side .radio,
[data-theme="dark"] .checkbox,
[data-theme="dark"] .radio {
    color: var(--po-text-primary) !important;
}

html.dark-side .checkbox .check,
html.dark-side .radio .check,
[data-theme="dark"] .checkbox .check,
[data-theme="dark"] .radio .check {
    border-color: var(--po-border-dark) !important;
    background-color: var(--po-bg-input) !important;
}

/* Switch */
html.dark-side .switch .check,
[data-theme="dark"] .switch .check {
    background-color: var(--po-bg-tertiary) !important;
    border-color: var(--po-border) !important;
}

html.dark-side .switch input:checked ~ .check,
[data-theme="dark"] .switch input:checked ~ .check {
    background-color: var(--po-accent-soft) !important;
}

/* Labels */
html.dark-side label,
[data-theme="dark"] label {
    color: var(--po-text-secondary) !important;
}

/* ============================================
   METRO UI - BUTTONS
   ============================================ */

html.dark-side .button:not(.primary):not(.success):not(.warning):not(.alert):not(.info):not([class*="bg-"]),
html.dark-side button:not(.primary):not(.success):not(.warning):not(.alert):not(.info):not([class*="bg-"]),
[data-theme="dark"] .button:not(.primary):not(.success):not(.warning):not(.alert):not(.info):not([class*="bg-"]),
[data-theme="dark"] button:not(.primary):not(.success):not(.warning):not(.alert):not(.info):not([class*="bg-"]) {
    background-color: transparent !important;
    border-color: var(--po-border) !important;
    color: var(--po-text-primary) !important;
}

html.dark-side .button:hover,
html.dark-side button:hover,
[data-theme="dark"] .button:hover,
[data-theme="dark"] button:hover {
    background-color: var(--po-bg-hover) !important;
}

html.dark-side .button.primary,
html.dark-side .button.info,
html.dark-side .btn-primary,
html.dark-side .login_button_primary,
html.dark-side .register_button_primary,
html.dark-side .plan-button.primary,
html.dark-side .ws_share_btn_primary,
[data-theme="dark"] .button.primary,
[data-theme="dark"] .button.info,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .login_button_primary,
[data-theme="dark"] .register_button_primary,
[data-theme="dark"] .plan-button.primary,
[data-theme="dark"] .ws_share_btn_primary {
    background: var(--po-button-primary-bg) !important;
    background-color: var(--po-button-primary-bg) !important;
    border-color: var(--po-button-primary-bg) !important;
    color: var(--po-button-primary-text) !important;
}

html.dark-side .button.primary:hover,
html.dark-side .button.info:hover,
html.dark-side .btn-primary:hover,
html.dark-side .login_button_primary:hover,
html.dark-side .register_button_primary:hover,
html.dark-side .plan-button.primary:hover,
html.dark-side .ws_share_btn_primary:hover,
[data-theme="dark"] .button.primary:hover,
[data-theme="dark"] .button.info:hover,
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .login_button_primary:hover,
[data-theme="dark"] .register_button_primary:hover,
[data-theme="dark"] .plan-button.primary:hover,
[data-theme="dark"] .ws_share_btn_primary:hover {
    background: var(--po-button-primary-bg-hover) !important;
    background-color: var(--po-button-primary-bg-hover) !important;
    border-color: var(--po-button-primary-bg-hover) !important;
    color: var(--po-button-primary-text) !important;
}

/* Sprach-Popup im Topmenü: bg-light/fg-dark der Shell gezielt überschreiben. */
html.dark-side #topmenu_language_container,
[data-theme="dark"] #topmenu_language_container {
    color: var(--po-text-primary) !important;
}

html.dark-side #topmenu_language_container > div,
html.dark-side #topmenu_language_container .bg-light,
[data-theme="dark"] #topmenu_language_container > div,
[data-theme="dark"] #topmenu_language_container .bg-light {
    background: var(--po-bg-secondary) !important;
    background-color: var(--po-bg-secondary) !important;
    color: var(--po-text-primary) !important;
    border: 1px solid var(--po-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(96, 165, 250, 0.08) !important;
}

html.dark-side #topmenu_language_container .grid,
[data-theme="dark"] #topmenu_language_container .grid {
    background: var(--po-bg-secondary) !important;
    background-color: var(--po-bg-secondary) !important;
    border-color: var(--po-border) !important;
}

html.dark-side #topmenu_language_container .language_selector_link,
[data-theme="dark"] #topmenu_language_container .language_selector_link {
    color: var(--po-text-primary) !important;
}

html.dark-side #topmenu_language_container .button.light,
html.dark-side #topmenu_language_container button.light,
[data-theme="dark"] #topmenu_language_container .button.light,
[data-theme="dark"] #topmenu_language_container button.light {
    background: var(--po-bg-tertiary) !important;
    background-color: var(--po-bg-tertiary) !important;
    border-color: var(--po-border) !important;
    color: var(--po-text-primary) !important;
}

html.dark-side #topmenu_language_container .button.light:hover,
html.dark-side #topmenu_language_container button.light:hover,
[data-theme="dark"] #topmenu_language_container .button.light:hover,
[data-theme="dark"] #topmenu_language_container button.light:hover {
    background: var(--po-bg-hover) !important;
    background-color: var(--po-bg-hover) !important;
    border-color: rgba(96, 165, 250, 0.42) !important;
    color: var(--po-text-primary) !important;
}

html.dark-side #topmenu_language_container .button.info,
html.dark-side #topmenu_language_container button.info,
[data-theme="dark"] #topmenu_language_container .button.info,
[data-theme="dark"] #topmenu_language_container button.info {
    background: var(--po-accent) !important;
    background-color: var(--po-accent) !important;
    border-color: var(--po-accent) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.24), 0 8px 22px rgba(91, 155, 213, 0.22) !important;
}

html.dark-side .button.success,
[data-theme="dark"] .button.success {
    background-color: var(--po-success) !important;
    border-color: var(--po-success) !important;
}

html.dark-side .button.warning,
html.dark-side .button.alert,
[data-theme="dark"] .button.warning,
[data-theme="dark"] .button.alert {
    background-color: var(--po-warning) !important;
    border-color: var(--po-warning) !important;
}

html.dark-side .button.danger,
[data-theme="dark"] .button.danger {
    background-color: var(--po-danger) !important;
    border-color: var(--po-danger) !important;
}

/* Flat Buttons */
html.dark-side .flat-button,
[data-theme="dark"] .flat-button {
    color: var(--po-text-primary) !important;
}

html.dark-side .flat-button:hover,
[data-theme="dark"] .flat-button:hover {
    background-color: var(--po-bg-hover) !important;
}

/* ============================================
   METRO UI - TABLES
   ============================================ */

html.dark-side .table,
html.dark-side table,
[data-theme="dark"] .table,
[data-theme="dark"] table {
    background-color: var(--po-bg-secondary) !important;
    color: var(--po-text-primary) !important;
}

html.dark-side .table thead,
html.dark-side .table th,
html.dark-side table thead,
html.dark-side table th,
[data-theme="dark"] .table thead,
[data-theme="dark"] .table th,
[data-theme="dark"] table thead,
[data-theme="dark"] table th {
    background-color: var(--po-bg-tertiary) !important;
    color: var(--po-text-primary) !important;
    border-color: var(--po-border) !important;
}

html.dark-side .table td,
html.dark-side table td,
[data-theme="dark"] .table td,
[data-theme="dark"] table td {
    border-color: var(--po-border) !important;
    color: var(--po-text-primary) !important;
}

html.dark-side .table tbody tr:hover,
html.dark-side table tbody tr:hover,
[data-theme="dark"] .table tbody tr:hover,
[data-theme="dark"] table tbody tr:hover {
    background-color: var(--po-bg-hover) !important;
}

html.dark-side .table tbody tr.active,
html.dark-side table tbody tr.active,
[data-theme="dark"] .table tbody tr.active,
[data-theme="dark"] table tbody tr.active {
    background-color: var(--po-bg-active) !important;
}

/* Table Pagination */
html.dark-side .pagination .page-link,
[data-theme="dark"] .pagination .page-link {
    background-color: var(--po-bg-tertiary) !important;
    border-color: var(--po-border) !important;
    color: var(--po-text-primary) !important;
}

html.dark-side .pagination .page-link:hover,
[data-theme="dark"] .pagination .page-link:hover {
    background-color: var(--po-bg-hover) !important;
}

/* ============================================
   METRO UI - TABS
   ============================================ */

html.dark-side .tabs,
html.dark-side .tabs-material,
[data-theme="dark"] .tabs,
[data-theme="dark"] .tabs-material {
    background-color: var(--po-bg-secondary) !important;
}

html.dark-side .tabs li,
html.dark-side .tabs-material li,
[data-theme="dark"] .tabs li,
[data-theme="dark"] .tabs-material li {
    color: var(--po-text-secondary) !important;
}

html.dark-side .tabs li:hover,
html.dark-side .tabs-material li:hover,
[data-theme="dark"] .tabs li:hover,
[data-theme="dark"] .tabs-material li:hover {
    color: var(--po-text-primary) !important;
}

html.dark-side .tabs li.active,
html.dark-side .tabs-material li.active,
[data-theme="dark"] .tabs li.active,
[data-theme="dark"] .tabs-material li.active {
    color: var(--po-accent) !important;
}

html.dark-side .tab-marker,
[data-theme="dark"] .tab-marker {
    background-color: var(--po-accent) !important;
}

/* ============================================
   METRO UI - ACCORDION
   ============================================ */

html.dark-side .accordion .frame,
[data-theme="dark"] .accordion .frame {
    background-color: var(--po-bg-secondary) !important;
    border-color: var(--po-border) !important;
}

html.dark-side .accordion .heading,
[data-theme="dark"] .accordion .heading {
    background-color: var(--po-bg-tertiary) !important;
    color: var(--po-text-primary) !important;
    border-color: var(--po-border) !important;
}

html.dark-side .accordion .content,
[data-theme="dark"] .accordion .content {
    background-color: var(--po-bg-secondary) !important;
    color: var(--po-text-primary) !important;
}

/* ============================================
   SIDEBAR ACCORDION - Verschmilzt mit Sidebar BG
   ============================================ */

html.dark-side #top_menu_sidebar_left .accordion,
html.dark-side #top_menu_sidebar_right .accordion,
html.dark-side #top_menu_sidebar_left_content .accordion,
html.dark-side #top_menu_sidebar_right_content .accordion,
[data-theme="dark"] #top_menu_sidebar_left .accordion,
[data-theme="dark"] #top_menu_sidebar_right .accordion,
[data-theme="dark"] #top_menu_sidebar_left_content .accordion,
[data-theme="dark"] #top_menu_sidebar_right_content .accordion {
    background-color: var(--po-bg-sidebar) !important;
    border-color: var(--po-bg-sidebar) !important;
}

html.dark-side #top_menu_sidebar_left .accordion .frame,
html.dark-side #top_menu_sidebar_right .accordion .frame,
html.dark-side #top_menu_sidebar_left_content .accordion .frame,
html.dark-side #top_menu_sidebar_right_content .accordion .frame,
[data-theme="dark"] #top_menu_sidebar_left .accordion .frame,
[data-theme="dark"] #top_menu_sidebar_right .accordion .frame,
[data-theme="dark"] #top_menu_sidebar_left_content .accordion .frame,
[data-theme="dark"] #top_menu_sidebar_right_content .accordion .frame {
    background-color: var(--po-bg-sidebar) !important;
    border-color: var(--po-bg-sidebar) !important;
}

html.dark-side #top_menu_sidebar_left .accordion .heading,
html.dark-side #top_menu_sidebar_right .accordion .heading,
html.dark-side #top_menu_sidebar_left_content .accordion .heading,
html.dark-side #top_menu_sidebar_right_content .accordion .heading,
[data-theme="dark"] #top_menu_sidebar_left .accordion .heading,
[data-theme="dark"] #top_menu_sidebar_right .accordion .heading,
[data-theme="dark"] #top_menu_sidebar_left_content .accordion .heading,
[data-theme="dark"] #top_menu_sidebar_right_content .accordion .heading {
    background-color: var(--po-bg-sidebar) !important;
    border-color: var(--po-bg-sidebar) !important;
}

html.dark-side #top_menu_sidebar_left .accordion .heading:hover,
html.dark-side #top_menu_sidebar_right .accordion .heading:hover,
html.dark-side #top_menu_sidebar_left_content .accordion .heading:hover,
html.dark-side #top_menu_sidebar_right_content .accordion .heading:hover,
[data-theme="dark"] #top_menu_sidebar_left .accordion .heading:hover,
[data-theme="dark"] #top_menu_sidebar_right .accordion .heading:hover,
[data-theme="dark"] #top_menu_sidebar_left_content .accordion .heading:hover,
[data-theme="dark"] #top_menu_sidebar_right_content .accordion .heading:hover {
    background-color: var(--po-bg-tertiary) !important;
}

html.dark-side #top_menu_sidebar_left .accordion .content,
html.dark-side #top_menu_sidebar_right .accordion .content,
html.dark-side #top_menu_sidebar_left_content .accordion .content,
html.dark-side #top_menu_sidebar_right_content .accordion .content,
[data-theme="dark"] #top_menu_sidebar_left .accordion .content,
[data-theme="dark"] #top_menu_sidebar_right .accordion .content,
[data-theme="dark"] #top_menu_sidebar_left_content .accordion .content,
[data-theme="dark"] #top_menu_sidebar_right_content .accordion .content {
    background-color: var(--po-bg-sidebar) !important;
}

/* ============================================
   METRO UI - CARDS & PANELS
   ============================================ */

html.dark-side .card,
html.dark-side .panel,
html.dark-side .poui_panel,
html.dark-side .po-card,
html.dark-side .po-surface,
html.dark-side .content-card,
html.dark-side .dashboard-card,
html.dark-side .settings-card,
html.dark-side .api-card,
html.dark-side .users-table-card,
html.dark-side .billing-card,
html.dark-side .trust-card,
html.dark-side .workspace-card,
html.dark-side .message-card,
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .poui_panel,
[data-theme="dark"] .po-card,
[data-theme="dark"] .po-surface,
[data-theme="dark"] .content-card,
[data-theme="dark"] .dashboard-card,
[data-theme="dark"] .settings-card,
[data-theme="dark"] .api-card,
[data-theme="dark"] .users-table-card,
[data-theme="dark"] .billing-card,
[data-theme="dark"] .trust-card,
[data-theme="dark"] .workspace-card,
[data-theme="dark"] .message-card {
    background-color: var(--po-surface) !important;
    border-color: var(--po-border) !important;
    color: var(--po-text-primary) !important;
    box-shadow: var(--po-shadow-md) !important;
}

html.dark-side .card-header,
html.dark-side .panel-title,
html.dark-side .content-header,
html.dark-side .card-title,
html.dark-side .section-title,
html.dark-side .users-table-header,
[data-theme="dark"] .card-header,
[data-theme="dark"] .panel-title,
[data-theme="dark"] .content-header,
[data-theme="dark"] .card-title,
[data-theme="dark"] .section-title,
[data-theme="dark"] .users-table-header {
    background-color: transparent !important;
    color: var(--po-text-primary) !important;
    border-color: var(--po-border) !important;
}

/* ============================================
   MODERNE APP-KOMPONENTENFLÄCHEN
   ============================================ */

html.dark-side .po-elevated,
html.dark-side .po-dialog,
html.dark-side .poui_dialog,
html.dark-side .poui_df_dialog,
html.dark-side .poui_df_content,
html.dark-side .dialog_wrapper,
html.dark-side .modal,
html.dark-side .modal-content,
[data-theme="dark"] .po-elevated,
[data-theme="dark"] .po-dialog,
[data-theme="dark"] .poui_dialog,
[data-theme="dark"] .poui_df_dialog,
[data-theme="dark"] .poui_df_content,
[data-theme="dark"] .dialog_wrapper,
[data-theme="dark"] .modal,
[data-theme="dark"] .modal-content {
    background-color: var(--po-surface-elevated) !important;
    color: var(--po-text-primary) !important;
    border-color: var(--po-border) !important;
    box-shadow: var(--po-shadow-lg) !important;
}

html.dark-side .po-muted-surface,
html.dark-side .empty-state,
html.dark-side .info-box,
html.dark-side .hint-box,
html.dark-side .summary-box,
html.dark-side .stats-card,
html.dark-side .metric-card,
[data-theme="dark"] .po-muted-surface,
[data-theme="dark"] .empty-state,
[data-theme="dark"] .info-box,
[data-theme="dark"] .hint-box,
[data-theme="dark"] .summary-box,
[data-theme="dark"] .stats-card,
[data-theme="dark"] .metric-card {
    background-color: var(--po-surface-muted) !important;
    color: var(--po-text-secondary) !important;
    border-color: var(--po-border) !important;
}

html.dark-side .po-input,
html.dark-side .po-select,
html.dark-side .poui-native-select,
html.dark-side .search-input,
html.dark-side .users-search-input,
html.dark-side .filter-input,
html.dark-side .filter-select,
[data-theme="dark"] .po-input,
[data-theme="dark"] .po-select,
[data-theme="dark"] .poui-native-select,
[data-theme="dark"] .search-input,
[data-theme="dark"] .users-search-input,
[data-theme="dark"] .filter-input,
[data-theme="dark"] .filter-select {
    background-color: var(--po-bg-input) !important;
    color: var(--po-text-primary) !important;
    border-color: var(--po-border) !important;
}

html.dark-side .po-input:focus,
html.dark-side .po-select:focus,
html.dark-side .poui-native-select:focus,
html.dark-side .search-input:focus,
html.dark-side .users-search-input:focus,
html.dark-side .filter-input:focus,
html.dark-side .filter-select:focus,
[data-theme="dark"] .po-input:focus,
[data-theme="dark"] .po-select:focus,
[data-theme="dark"] .poui-native-select:focus,
[data-theme="dark"] .search-input:focus,
[data-theme="dark"] .users-search-input:focus,
[data-theme="dark"] .filter-input:focus,
[data-theme="dark"] .filter-select:focus {
    border-color: var(--po-border-focus) !important;
    box-shadow: 0 0 0 3px var(--po-accent-soft) !important;
}

html.dark-side .po-table,
html.dark-side .table-card,
html.dark-side .table-container,
html.dark-side .tabulator,
html.dark-side .tabulator-tableholder,
[data-theme="dark"] .po-table,
[data-theme="dark"] .table-card,
[data-theme="dark"] .table-container,
[data-theme="dark"] .tabulator,
[data-theme="dark"] .tabulator-tableholder {
    background-color: var(--po-surface) !important;
    color: var(--po-text-primary) !important;
    border-color: var(--po-border) !important;
}

html.dark-side .tabulator .tabulator-header,
html.dark-side .tabulator .tabulator-row,
html.dark-side .tabulator .tabulator-cell,
[data-theme="dark"] .tabulator .tabulator-header,
[data-theme="dark"] .tabulator .tabulator-row,
[data-theme="dark"] .tabulator .tabulator-cell {
    background-color: transparent !important;
    color: var(--po-text-primary) !important;
    border-color: var(--po-border) !important;
}

html.dark-side .tabulator .tabulator-row:hover,
[data-theme="dark"] .tabulator .tabulator-row:hover {
    background-color: var(--po-bg-hover) !important;
}

html.dark-side .po-text-primary,
[data-theme="dark"] .po-text-primary {
    color: var(--po-text-primary) !important;
}

html.dark-side .po-text-secondary,
html.dark-side .muted,
html.dark-side .text-muted,
[data-theme="dark"] .po-text-secondary,
[data-theme="dark"] .muted,
[data-theme="dark"] .text-muted {
    color: var(--po-text-secondary) !important;
}

/* ============================================
   METRO UI - RIBBON MENU
   ============================================ */

html.dark-side .ribbon-menu,
[data-theme="dark"] .ribbon-menu {
    background-color: var(--po-bg-secondary) !important;
    border-color: var(--po-border) !important;
}

html.dark-side .ribbon-menu .tabs-holder,
[data-theme="dark"] .ribbon-menu .tabs-holder {
    background-color: var(--po-bg-tertiary) !important;
}

html.dark-side .ribbon-menu .tabs-holder li,
[data-theme="dark"] .ribbon-menu .tabs-holder li {
    background-color: var(--po-bg-tertiary) !important;
    color: var(--po-text-primary) !important;
}

html.dark-side .ribbon-menu .tabs-holder .active,
[data-theme="dark"] .ribbon-menu .tabs-holder .active {
    background-color: var(--po-bg-secondary) !important;
}

html.dark-side .ribbon-menu .content-holder,
[data-theme="dark"] .ribbon-menu .content-holder {
    background-color: var(--po-bg-secondary) !important;
}

/* ============================================
   METRO UI - SIDEBAR / NAVVIEW
   ============================================ */

html.dark-side .sidebar,
html.dark-side .navview,
[data-theme="dark"] .sidebar,
[data-theme="dark"] .navview {
    background-color: var(--po-bg-sidebar) !important;
}

html.dark-side .sidebar-menu li a,
html.dark-side .navview-menu li a,
[data-theme="dark"] .sidebar-menu li a,
[data-theme="dark"] .navview-menu li a {
    color: var(--po-text-secondary) !important;
}

html.dark-side .sidebar-menu li a:hover,
html.dark-side .navview-menu li a:hover,
[data-theme="dark"] .sidebar-menu li a:hover,
[data-theme="dark"] .navview-menu li a:hover {
    background-color: var(--po-bg-hover) !important;
    color: var(--po-text-primary) !important;
}

html.dark-side .sidebar-menu li.active > a,
html.dark-side .navview-menu li.active > a,
[data-theme="dark"] .sidebar-menu li.active > a,
[data-theme="dark"] .navview-menu li.active > a {
    background-color: var(--po-bg-active) !important;
    color: var(--po-accent) !important;
}

/* ============================================
   METRO UI - DROPDOWN / D-MENU
   ============================================ */

html.dark-side .d-menu,
html.dark-side .dropdown-menu,
[data-theme="dark"] .d-menu,
[data-theme="dark"] .dropdown-menu {
    background-color: var(--po-bg-elevated) !important;
    border-color: var(--po-border) !important;
    box-shadow: var(--po-shadow-lg) !important;
}

html.dark-side .d-menu li a,
html.dark-side .dropdown-menu li a,
[data-theme="dark"] .d-menu li a,
[data-theme="dark"] .dropdown-menu li a {
    color: var(--po-text-primary) !important;
}

html.dark-side .d-menu li a:hover,
html.dark-side .dropdown-menu li a:hover,
[data-theme="dark"] .d-menu li a:hover,
[data-theme="dark"] .dropdown-menu li a:hover {
    background-color: var(--po-bg-hover) !important;
}

html.dark-side .d-menu.context,
[data-theme="dark"] .d-menu.context {
    background-color: var(--po-bg-elevated) !important;
}

/* ============================================
   METRO UI - HINT / TOOLTIP
   ============================================ */

html.dark-side .hint,
html.dark-side .tippy-box,
[data-theme="dark"] .hint,
[data-theme="dark"] .tippy-box {
    background-color: var(--po-bg-elevated) !important;
    color: var(--po-text-primary) !important;
    border-color: var(--po-border) !important;
}

html.dark-side .tippy-arrow,
[data-theme="dark"] .tippy-arrow {
    color: var(--po-bg-elevated) !important;
}

/* ============================================
   METRO UI - LISTVIEW / TREEVIEW
   ============================================ */

html.dark-side .listview,
html.dark-side .treeview,
html.dark-side .e-treeview,
[data-theme="dark"] .listview,
[data-theme="dark"] .treeview,
[data-theme="dark"] .e-treeview {
    background-color: transparent !important;
    color: var(--po-text-primary) !important;
}

html.dark-side .listview .node,
html.dark-side .treeview .node,
[data-theme="dark"] .listview .node,
[data-theme="dark"] .treeview .node {
    color: var(--po-text-primary) !important;
}

html.dark-side .listview .node:hover,
html.dark-side .treeview .node:hover,
[data-theme="dark"] .listview .node:hover,
[data-theme="dark"] .treeview .node:hover {
    background-color: var(--po-bg-hover) !important;
}

html.dark-side .e-treeview .e-list-item.e-hover > .e-fullrow,
[data-theme="dark"] .e-treeview .e-list-item.e-hover > .e-fullrow {
    background-color: var(--po-bg-hover) !important;
    border-color: var(--po-bg-hover) !important;
}

html.dark-side .e-treeview .e-list-text,
[data-theme="dark"] .e-treeview .e-list-text {
    color: var(--po-text-primary) !important;
}

/* ============================================
   METRO UI - ACTIVITY / SPINNER
   ============================================ */

html.dark-side .activity-ring,
html.dark-side .activity-metro,
[data-theme="dark"] .activity-ring,
[data-theme="dark"] .activity-metro {
    color: var(--po-accent) !important;
}

/* ============================================
   METRO UI - PROGRESS
   ============================================ */

html.dark-side .progress,
[data-theme="dark"] .progress {
    background-color: var(--po-bg-tertiary) !important;
}

html.dark-side .progress .bar,
[data-theme="dark"] .progress .bar {
    background-color: var(--po-accent) !important;
}

/* ============================================
   METRO UI - NOTIFY / TOAST
   ============================================ */

html.dark-side .notify,
html.dark-side .toast,
[data-theme="dark"] .notify,
[data-theme="dark"] .toast {
    background-color: var(--po-bg-elevated) !important;
    color: var(--po-text-primary) !important;
    border-color: var(--po-border) !important;
}

/* ============================================
   SCROLLBARS
   ============================================ */

html.dark-side ::-webkit-scrollbar,
[data-theme="dark"] ::-webkit-scrollbar {
    width: var(--po-scrollbar-size, 10px);
    height: var(--po-scrollbar-size, 10px);
    background: var(--po-scrollbar-track) !important;
}

/* Native Scrollbars folgen denselben Tokens wie WebKit-Scrollbars. */
html.dark-side,
html.dark-side *,
[data-theme="dark"],
[data-theme="dark"] * {
    scrollbar-color: var(--po-scrollbar-thumb) var(--po-scrollbar-track);
    scrollbar-width: thin;
}

html.dark-side ::-webkit-scrollbar-track,
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--po-scrollbar-track) !important;
    border-radius: 0;
}

html.dark-side ::-webkit-scrollbar-thumb,
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--po-scrollbar-thumb) !important;
    border-radius: 5px;
    border: 2px solid var(--po-scrollbar-track);
}

html.dark-side ::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--po-scrollbar-thumb-hover) !important;
}

html.dark-side ::-webkit-scrollbar-corner,
[data-theme="dark"] ::-webkit-scrollbar-corner {
    background: var(--po-scrollbar-corner) !important;
}

/* mCustomScrollbar */
html.dark-side .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
[data-theme="dark"] .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    background-color: var(--po-scrollbar-thumb) !important;
}

html.dark-side .mCSB_scrollTools .mCSB_draggerRail,
[data-theme="dark"] .mCSB_scrollTools .mCSB_draggerRail {
    background-color: var(--po-scrollbar-track) !important;
}

/* ============================================
   PAPEROFFICE SPECIFIC COMPONENTS
   ============================================ */

/* Document List */
html.dark-side .documentlist_document_block:hover,
html.dark-side #documentlist_detailview_bottom tbody tr:hover,
[data-theme="dark"] .documentlist_document_block:hover,
[data-theme="dark"] #documentlist_detailview_bottom tbody tr:hover {
    background-color: var(--po-bg-hover) !important;
}

html.dark-side .documentlist_document_block.active,
html.dark-side #documentlist_detailview_bottom tr.active,
[data-theme="dark"] .documentlist_document_block.active,
[data-theme="dark"] #documentlist_detailview_bottom tr.active {
    background-color: var(--po-bg-active) !important;
}

/* Collapse Trigger */
html.dark-side .collapse-trigger,
[data-theme="dark"] .collapse-trigger {
    color: var(--po-text-primary) !important;
}

html.dark-side .collapse-trigger.active,
[data-theme="dark"] .collapse-trigger.active {
    background-color: var(--po-bg-active) !important;
}

/* Sidebar Active Links */
html.dark-side #top_menu_sidebar_left_content a.sidebar-active,
html.dark-side #top_menu_sidebar_left_content a.sidebar-active.bg-transparent,
[data-theme="dark"] #top_menu_sidebar_left_content a.sidebar-active,
[data-theme="dark"] #top_menu_sidebar_left_content a.sidebar-active.bg-transparent {
    background-color: var(--po-bg-active) !important;
}

/* POUI Panel */
html.dark-side .poui_panel,
[data-theme="dark"] .poui_panel {
    background-color: var(--po-bg-tertiary) !important;
}

/* Footer */
html.dark-side .paperoffice_footer_version,
html.dark-side .paperoffice_footer_sse,
[data-theme="dark"] .paperoffice_footer_version,
[data-theme="dark"] .paperoffice_footer_sse {
    color: var(--po-text-muted) !important;
}

html.dark-side .paperoffice_footer_sse.connected,
[data-theme="dark"] .paperoffice_footer_sse.connected {
    color: var(--po-success) !important;
}

html.dark-side .paperoffice_footer_sse.disconnected,
[data-theme="dark"] .paperoffice_footer_sse.disconnected {
    color: var(--po-danger) !important;
}

/* ============================================
   SYNCFUSION COMPONENTS
   ============================================ */

html.dark-side .e-grid,
html.dark-side .e-gridheader,
html.dark-side .e-gridcontent,
[data-theme="dark"] .e-grid,
[data-theme="dark"] .e-gridheader,
[data-theme="dark"] .e-gridcontent {
    background-color: var(--po-bg-secondary) !important;
}

html.dark-side .e-grid .e-headercell,
html.dark-side .e-grid .e-headercelldiv,
[data-theme="dark"] .e-grid .e-headercell,
[data-theme="dark"] .e-grid .e-headercelldiv {
    background-color: var(--po-bg-tertiary) !important;
    color: var(--po-text-primary) !important;
    border-color: transparent !important;
    border: none !important;
}

html.dark-side .e-grid .e-gridheader,
[data-theme="dark"] .e-grid .e-gridheader {
    border-bottom: 1px solid var(--po-border) !important;
}

html.dark-side .e-grid .e-rowcell,
[data-theme="dark"] .e-grid .e-rowcell {
    color: var(--po-text-primary) !important;
    border-color: transparent !important;
    border-bottom: none !important;
    border-top: none !important;
}

html.dark-side .e-grid .e-row,
[data-theme="dark"] .e-grid .e-row {
    border-bottom: 1px solid var(--po-border) !important;
}

html.dark-side .e-grid .e-row:hover .e-rowcell,
[data-theme="dark"] .e-grid .e-row:hover .e-rowcell {
    background-color: var(--po-bg-hover) !important;
}

/* Syncfusion Grid - Entferne alle vertikalen Borders im Dark Mode */
html.dark-side .e-grid .e-headercell,
html.dark-side .e-grid .e-detailheadercell,
[data-theme="dark"] .e-grid .e-headercell,
[data-theme="dark"] .e-grid .e-detailheadercell {
    border-right: none !important;
    border-left: none !important;
}

html.dark-side .e-grid .e-table,
html.dark-side .e-grid .e-content,
[data-theme="dark"] .e-grid .e-table,
[data-theme="dark"] .e-grid .e-content {
    border: none !important;
}

html.dark-side .e-grid,
[data-theme="dark"] .e-grid {
    border: none !important;
}

/* Page Badge - Seitenanzahl auf Dokument-Thumbnails */
html.dark-side .page-badge,
[data-theme="dark"] .page-badge {
    background: var(--po-bg-elevated) !important;
    border-color: var(--po-border) !important;
    color: var(--po-text-primary) !important;
}

/* ============================================
   TAGS & BADGES - Dark Mode Optimierung
   ============================================ */

/* Basis Tag-Klasse */
html.dark-side .tag,
[data-theme="dark"] .tag {
    background-color: var(--po-bg-tertiary) !important;
    border-color: var(--po-border) !important;
    color: var(--po-text-primary) !important;
}

html.dark-side .tag-light,
[data-theme="dark"] .tag-light {
    background-color: var(--po-bg-tertiary) !important;
    border-color: var(--po-border) !important;
    color: var(--po-text-secondary) !important;
}

/* Datenfelder-Tags: System (grau) */
html.dark-side .tag[style*="background-color: #e2e8f0"],
html.dark-side .tag[style*="background-color:#e2e8f0"],
[data-theme="dark"] .tag[style*="background-color: #e2e8f0"],
[data-theme="dark"] .tag[style*="background-color:#e2e8f0"] {
    background-color: var(--po-bg-tertiary) !important;
    color: var(--po-text-secondary) !important;
}

/* Datenfelder-Tags: Manuell (blau) */
html.dark-side .tag[style*="background-color: #dbeafe"],
html.dark-side .tag[style*="background-color:#dbeafe"],
[data-theme="dark"] .tag[style*="background-color: #dbeafe"],
[data-theme="dark"] .tag[style*="background-color:#dbeafe"] {
    background-color: rgba(91, 155, 213, 0.25) !important;
    color: #7ab3e0 !important;
}

/* Datenfelder-Tags: Auto (grün) */
html.dark-side .tag[style*="background-color: rgba(81, 207, 102"],
[data-theme="dark"] .tag[style*="background-color: rgba(81, 207, 102"] {
    background-color: rgba(52, 211, 153, 0.2) !important;
    color: #34d399 !important;
}

/* Speicherpfad-Tags (blau) */
html.dark-side .tag[style*="background: #e3f2fd"],
html.dark-side .tag[style*="background:#e3f2fd"],
[data-theme="dark"] .tag[style*="background: #e3f2fd"],
[data-theme="dark"] .tag[style*="background:#e3f2fd"] {
    background: rgba(91, 155, 213, 0.2) !important;
    color: #7ab3e0 !important;
}

/* Schlüsselwörter/Keywords Tags */
html.dark-side .keywords-container .tag,
[data-theme="dark"] .keywords-container .tag {
    background-color: rgba(91, 155, 213, 0.15) !important;
    border-color: rgba(91, 155, 213, 0.3) !important;
    color: #7ab3e0 !important;
}

/* Dokument-Typ Tags */
html.dark-side .e-grid [aria-describedby*="document_types"] .tag,
[data-theme="dark"] .e-grid [aria-describedby*="document_types"] .tag {
    background-color: var(--po-bg-tertiary) !important;
    border-color: var(--po-border) !important;
    color: var(--po-text-primary) !important;
}

/* Status-Badges: Paid, Unpaid, Closed, Open */
html.dark-side .tag[style*="Paid"],
html.dark-side .tag[style*="paid"],
[data-theme="dark"] .tag[style*="Paid"],
[data-theme="dark"] .tag[style*="paid"] {
    background-color: rgba(52, 211, 153, 0.2) !important;
    color: #34d399 !important;
}

/* "+X weitere" Text */
html.dark-side .remaining-items small,
html.dark-side .more-keywords,
[data-theme="dark"] .remaining-items small,
[data-theme="dark"] .more-keywords {
    color: var(--po-text-muted) !important;
}

/* Locale-Text unter Flagge */
html.dark-side [style*="color: #64748b"],
[data-theme="dark"] [style*="color: #64748b"] {
    color: var(--po-text-muted) !important;
}

/* Shimmer/Loading Animation für Dark Mode */
html.dark-side [style*="background: linear-gradient(90deg, #EBEFF4"],
[data-theme="dark"] [style*="background: linear-gradient(90deg, #EBEFF4"] {
    background: linear-gradient(90deg, var(--po-bg-tertiary) 25%, var(--po-bg-hover) 37%, var(--po-bg-tertiary) 63%) !important;
}

/* Preview Zoom - Dark Mode */
html.dark-side .e-grid tbody tr .preview-container:hover img,
[data-theme="dark"] .e-grid tbody tr .preview-container:hover img {
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

/* ============================================
   GRID CHECKBOXEN - Nur bei Hover oder Checked anzeigen
   ============================================ */

/* Checkbox standardmäßig verstecken */
html.dark-side .e-grid .e-rowcell .e-checkbox-wrapper,
[data-theme="dark"] .e-grid .e-rowcell .e-checkbox-wrapper {
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* Checkbox bei Row-Hover anzeigen */
html.dark-side .e-grid .e-row:hover .e-checkbox-wrapper,
[data-theme="dark"] .e-grid .e-row:hover .e-checkbox-wrapper {
    opacity: 1;
}

/* Checkbox immer anzeigen wenn checked */
html.dark-side .e-grid .e-checkbox-wrapper.e-checkbox-checked,
html.dark-side .e-grid .e-checkbox-wrapper:has(input:checked),
[data-theme="dark"] .e-grid .e-checkbox-wrapper.e-checkbox-checked,
[data-theme="dark"] .e-grid .e-checkbox-wrapper:has(input:checked) {
    opacity: 1 !important;
}

/* Header-Checkbox immer sichtbar */
html.dark-side .e-grid .e-headercell .e-checkbox-wrapper,
[data-theme="dark"] .e-grid .e-headercell .e-checkbox-wrapper {
    opacity: 1 !important;
}

/* ============================================
   TEXT & ICON COLORS
   ============================================ */

html.dark-side .fg-default,
[data-theme="dark"] .fg-default {
    color: var(--po-text-primary) !important;
}

html.dark-side .fg-dark,
[data-theme="dark"] .fg-dark {
    color: var(--po-text-primary) !important;
}

html.dark-side .fg-light,
[data-theme="dark"] .fg-light {
    color: var(--po-text-muted) !important;
}

/* Icons in Top Menu - auch Inline-Styles überschreiben */
html.dark-side .poui_button_dock i,
html.dark-side .poui_button_dock i[style],
[data-theme="dark"] .poui_button_dock i,
[data-theme="dark"] .poui_button_dock i[style] {
    color: var(--po-icon-default) !important;
}

html.dark-side .poui_button_dock:hover i,
html.dark-side .poui_button_dock:hover i[style],
[data-theme="dark"] .poui_button_dock:hover i,
[data-theme="dark"] .poui_button_dock:hover i[style] {
    color: var(--po-accent) !important;
}

/* Alle Icons mit #647687 Inline-Style */
html.dark-side [style*="color:#647687"],
html.dark-side [style*="color: #647687"],
[data-theme="dark"] [style*="color:#647687"],
[data-theme="dark"] [style*="color: #647687"] {
    color: var(--po-icon-default) !important;
}

/* ============================================
   BACKGROUND UTILITY OVERRIDES
   ============================================ */

html.dark-side .bg-light,
html.dark-side .bg-white,
html.dark-side .bg-lighter,
html.dark-side .bg-pogray,
html.dark-side .bg-lightererSteel,
html.dark-side .bg-lighterSteel,
[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-lighter,
[data-theme="dark"] .bg-pogray,
[data-theme="dark"] .bg-lightererSteel,
[data-theme="dark"] .bg-lighterSteel {
    background-color: var(--po-bg-secondary) !important;
}

html.dark-side .bg-transparent,
[data-theme="dark"] .bg-transparent {
    background-color: transparent !important;
}

/* ============================================
   LINKS
   ============================================ */

html.dark-side a,
html.dark-side a.link,
[data-theme="dark"] a,
[data-theme="dark"] a.link {
    color: var(--po-accent-light) !important;
}

html.dark-side a:hover,
html.dark-side a.link:hover,
[data-theme="dark"] a:hover,
[data-theme="dark"] a.link:hover {
    color: var(--po-accent) !important;
}

/* Reset for buttons and specific links */
html.dark-side .button a,
html.dark-side button a,
html.dark-side a.button,
[data-theme="dark"] .button a,
[data-theme="dark"] button a,
[data-theme="dark"] a.button {
    color: inherit !important;
}

/* ============================================
   UPLOAD COMPONENTS
   ============================================ */

html.dark-side .upload-file-list,
html.dark-side .dropzone-full,
html.dark-side .source-panel,
[data-theme="dark"] .upload-file-list,
[data-theme="dark"] .dropzone-full,
[data-theme="dark"] .source-panel {
    background-color: var(--po-bg-tertiary) !important;
    border-color: var(--po-border) !important;
}

html.dark-side .upload-file-item,
[data-theme="dark"] .upload-file-item {
    background-color: var(--po-bg-secondary) !important;
    border-color: var(--po-border) !important;
}

html.dark-side .upload-file-item .file-name,
[data-theme="dark"] .upload-file-item .file-name {
    color: var(--po-text-primary) !important;
}

/* ============================================
   SECTION MANAGEMENT / DATENFELDER
   ============================================ */

html.dark-side .section-header,
html.dark-side .section-content,
[data-theme="dark"] .section-header,
[data-theme="dark"] .section-content {
    background-color: var(--po-bg-secondary) !important;
    border-color: var(--po-border) !important;
    color: var(--po-text-primary) !important;
}

html.dark-side .section-title,
[data-theme="dark"] .section-title {
    color: var(--po-text-primary) !important;
}

html.dark-side .modern-controls-row,
[data-theme="dark"] .modern-controls-row {
    background: var(--po-bg-tertiary) !important;
    border-color: var(--po-border) !important;
}

html.dark-side .filter-option-item,
[data-theme="dark"] .filter-option-item {
    background-color: var(--po-bg-secondary) !important;
    border-color: var(--po-border) !important;
    color: var(--po-text-primary) !important;
}

html.dark-side .filter-option-item:hover,
[data-theme="dark"] .filter-option-item:hover {
    background-color: var(--po-bg-hover) !important;
}

html.dark-side .filter-option-item.selected,
[data-theme="dark"] .filter-option-item.selected {
    background-color: var(--po-accent) !important;
    color: white !important;
}

/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */

#topmenu_theme_toggle {
    position: relative;
    cursor: pointer;
}

#topmenu_theme_toggle i {
    transition: transform 0.3s ease, color 0.3s ease;
}

html.dark-side #topmenu_theme_toggle i.fa-moon,
[data-theme="dark"] #topmenu_theme_toggle i.fa-moon {
    display: none;
}

html.dark-side #topmenu_theme_toggle i.fa-sun,
[data-theme="dark"] #topmenu_theme_toggle i.fa-sun {
    display: inline-block;
    color: var(--po-warning) !important;
}

html:not(.dark-side) #topmenu_theme_toggle i.fa-sun,
[data-theme="light"] #topmenu_theme_toggle i.fa-sun {
    display: none;
}

html:not(.dark-side) #topmenu_theme_toggle i.fa-moon,
[data-theme="light"] #topmenu_theme_toggle i.fa-moon {
    display: inline-block;
}

/* ============================================
   FANCYBOX / LIGHTBOX
   ============================================ */

html.dark-side .fancybox__container,
[data-theme="dark"] .fancybox__container {
    --fancybox-bg: rgba(26, 29, 33, 0.95);
}

html.dark-side .fancybox__toolbar,
html.dark-side .fancybox__nav,
[data-theme="dark"] .fancybox__toolbar,
[data-theme="dark"] .fancybox__nav {
    color: var(--po-text-primary) !important;
}

/* ============================================
   QR POPUP
   ============================================ */

html.dark-side .qr-popup-content,
[data-theme="dark"] .qr-popup-content {
    background-color: var(--po-bg-secondary) !important;
    color: var(--po-text-primary) !important;
}

html.dark-side .qr-code-wrapper,
[data-theme="dark"] .qr-code-wrapper {
    background-color: white !important; /* QR Code braucht weißen Hintergrund */
}

/* ============================================
   HR / DIVIDERS
   ============================================ */

html.dark-side hr,
html.dark-side .text-divider::before,
html.dark-side .text-divider::after,
[data-theme="dark"] hr,
[data-theme="dark"] .text-divider::before,
[data-theme="dark"] .text-divider::after {
    background-color: var(--po-border) !important;
    border-color: var(--po-border) !important;
}

/* ============================================
   CODE / PRE
   ============================================ */

html.dark-side code,
html.dark-side pre,
[data-theme="dark"] code,
[data-theme="dark"] pre {
    background-color: var(--po-bg-tertiary) !important;
    color: var(--po-text-primary) !important;
    border-color: var(--po-border) !important;
}

/* ============================================
   BADGES / PILLS
   ============================================ */

html.dark-side .badge,
html.dark-side .pill,
html.dark-side .tag,
[data-theme="dark"] .badge,
[data-theme="dark"] .pill,
[data-theme="dark"] .tag {
    background-color: var(--po-bg-tertiary) !important;
    color: var(--po-text-primary) !important;
}

/* ============================================
   STEPPER
   ============================================ */

html.dark-side .stepper .step,
[data-theme="dark"] .stepper .step {
    color: var(--po-text-secondary) !important;
}

html.dark-side .stepper .step.active,
html.dark-side .stepper .step.complete,
[data-theme="dark"] .stepper .step.active,
[data-theme="dark"] .stepper .step.complete {
    color: var(--po-accent) !important;
}

/* ============================================
   ADDITIONAL DARK MODE OVERRIDES
   ============================================ */

/* Headings */
html.dark-side h1,
html.dark-side h2,
html.dark-side h3,
html.dark-side h4,
html.dark-side h5,
html.dark-side h6,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--po-text-primary) !important;
}

/* Metro UI Color Classes Override */
html.dark-side .fg-dark,
[data-theme="dark"] .fg-dark {
    color: var(--po-text-primary) !important;
}

html.dark-side .bg-light-hover:hover,
[data-theme="dark"] .bg-light-hover:hover {
    background-color: var(--po-bg-hover) !important;
}

/* Images - Logo needs to stay visible */
html.dark-side #top_menu_sidebar_left_logo,
html.dark-side #top_menu_sidebar_left_logo_small,
[data-theme="dark"] #top_menu_sidebar_left_logo,
[data-theme="dark"] #top_menu_sidebar_left_logo_small {
    filter: brightness(0.95);
}

/* Loading Screen */
html.dark-side #loading_screen,
[data-theme="dark"] #loading_screen {
    background-color: var(--po-bg-primary) !important;
}

html.dark-side #loading_screen h3,
html.dark-side #loading_screen p,
[data-theme="dark"] #loading_screen h3,
[data-theme="dark"] #loading_screen p {
    color: var(--po-text-primary) !important;
}

/* Croppie / Image Upload */
html.dark-side .cr-slider,
[data-theme="dark"] .cr-slider {
    background-color: var(--po-bg-tertiary) !important;
}

/* Croppie darf im Dark-Mode keine generischen UI-Hintergründe erben.
   Der Crop-Ausschnitt und die Drag-Fläche müssen transparent bleiben,
   sonst liegt ein dunkler Block direkt über dem Bild. */
html.dark-side .croppie-container .cr-viewport,
html.dark-side .croppie-container .cr-resizer,
html.dark-side .croppie-container .cr-overlay,
[data-theme="dark"] .croppie-container .cr-viewport,
[data-theme="dark"] .croppie-container .cr-resizer,
[data-theme="dark"] .croppie-container .cr-overlay {
    background: transparent !important;
    background-color: transparent !important;
}

html.dark-side .croppie-container .cr-boundary,
[data-theme="dark"] .croppie-container .cr-boundary {
    background: transparent !important;
    background-color: transparent !important;
}

/* Die Abdunklung außerhalb des Crop-Ausschnitts bleibt bewusst erhalten,
   aber als Croppie-Maske statt als gefüllter Viewport-Hintergrund. */
html.dark-side .croppie-container .cr-viewport,
[data-theme="dark"] .croppie-container .cr-viewport {
    border-color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 0 2000px 2000px rgba(15, 23, 42, 0.58) !important;
}

/* Color Picker */
html.dark-side .color-picker,
[data-theme="dark"] .color-picker {
    background-color: var(--po-bg-secondary) !important;
    border-color: var(--po-border) !important;
}

/* Autocomplete */
html.dark-side .autocomplete-list,
[data-theme="dark"] .autocomplete-list {
    background-color: var(--po-bg-elevated) !important;
    border-color: var(--po-border) !important;
}

html.dark-side .autocomplete-list li,
[data-theme="dark"] .autocomplete-list li {
    color: var(--po-text-primary) !important;
}

html.dark-side .autocomplete-list li:hover,
[data-theme="dark"] .autocomplete-list li:hover {
    background-color: var(--po-bg-hover) !important;
}

/* Border Override for common elements */
html.dark-side [style*="border: 1px solid #D7DDE8"],
html.dark-side [style*="border:1px solid #D7DDE8"],
html.dark-side [style*="border-color: #D7DDE8"],
html.dark-side [style*="border-color:#D7DDE8"],
[data-theme="dark"] [style*="border: 1px solid #D7DDE8"],
[data-theme="dark"] [style*="border:1px solid #D7DDE8"],
[data-theme="dark"] [style*="border-color: #D7DDE8"],
[data-theme="dark"] [style*="border-color:#D7DDE8"] {
    border-color: var(--po-border) !important;
}

/* Specific border class overrides */
html.dark-side .border,
html.dark-side .bd-light,
html.dark-side .bd-lightGray,
[data-theme="dark"] .border,
[data-theme="dark"] .bd-light,
[data-theme="dark"] .bd-lightGray {
    border-color: var(--po-border) !important;
}

/* Paper/Content Areas */
html.dark-side .paper,
html.dark-side .content-box,
html.dark-side .info-box,
[data-theme="dark"] .paper,
[data-theme="dark"] .content-box,
[data-theme="dark"] .info-box {
    background-color: var(--po-bg-secondary) !important;
    color: var(--po-text-primary) !important;
}

/* Metro Master/Detail */
html.dark-side .master,
html.dark-side .detail,
[data-theme="dark"] .master,
[data-theme="dark"] .detail {
    background-color: var(--po-bg-secondary) !important;
}

/* Charms */
html.dark-side .charm,
[data-theme="dark"] .charm {
    background-color: var(--po-bg-elevated) !important;
    color: var(--po-text-primary) !important;
}

/* InfoBox */
html.dark-side .info-box,
[data-theme="dark"] .info-box {
    background-color: var(--po-bg-secondary) !important;
    border-color: var(--po-border) !important;
}

/* Calendar / Date Picker */
html.dark-side .calendar,
html.dark-side .datepicker,
[data-theme="dark"] .calendar,
[data-theme="dark"] .datepicker {
    background-color: var(--po-bg-secondary) !important;
    border-color: var(--po-border) !important;
}

html.dark-side .calendar .day,
html.dark-side .datepicker .day,
[data-theme="dark"] .calendar .day,
[data-theme="dark"] .datepicker .day {
    color: var(--po-text-primary) !important;
}

html.dark-side .calendar .day:hover,
html.dark-side .datepicker .day:hover,
[data-theme="dark"] .calendar .day:hover,
[data-theme="dark"] .datepicker .day:hover {
    background-color: var(--po-bg-hover) !important;
}

html.dark-side .calendar .day.selected,
html.dark-side .datepicker .day.selected,
[data-theme="dark"] .calendar .day.selected,
[data-theme="dark"] .datepicker .day.selected {
    background-color: var(--po-accent) !important;
    color: white !important;
}

/* Metro Tiles */
html.dark-side .tile,
[data-theme="dark"] .tile {
    background-color: var(--po-bg-tertiary) !important;
}

/* Splitter */
html.dark-side .splitter,
html.dark-side .gutter,
[data-theme="dark"] .splitter,
[data-theme="dark"] .gutter {
    background-color: var(--po-border) !important;
}

/* List Group */
html.dark-side .list-group,
html.dark-side .list-group-item,
[data-theme="dark"] .list-group,
[data-theme="dark"] .list-group-item {
    background-color: var(--po-bg-secondary) !important;
    border-color: var(--po-border) !important;
    color: var(--po-text-primary) !important;
}

html.dark-side .list-group-item:hover,
[data-theme="dark"] .list-group-item:hover {
    background-color: var(--po-bg-hover) !important;
}

/* Breadcrumb */
html.dark-side .breadcrumb,
[data-theme="dark"] .breadcrumb {
    background-color: transparent !important;
}

html.dark-side .breadcrumb a,
html.dark-side .breadcrumb span,
[data-theme="dark"] .breadcrumb a,
[data-theme="dark"] .breadcrumb span {
    color: var(--po-text-secondary) !important;
}

/* App Bar */
html.dark-side .app-bar,
[data-theme="dark"] .app-bar {
    background-color: var(--po-bg-secondary) !important;
    border-color: var(--po-border) !important;
}

html.dark-side .app-bar-menu li a,
[data-theme="dark"] .app-bar-menu li a {
    color: var(--po-text-primary) !important;
}

html.dark-side .app-bar-menu li a:hover,
[data-theme="dark"] .app-bar-menu li a:hover {
    background-color: var(--po-bg-hover) !important;
}

/* Metro Overlay */
html.dark-side .overlay,
[data-theme="dark"] .overlay {
    background-color: var(--po-overlay) !important;
}

/* Image Gallery / Carousel */
html.dark-side .carousel,
html.dark-side .image-gallery,
[data-theme="dark"] .carousel,
[data-theme="dark"] .image-gallery {
    background-color: transparent !important;
}

/* Sidenav Counter */
html.dark-side .sidenav-counter a,
html.dark-side .sidenav-counter li,
[data-theme="dark"] .sidenav-counter a,
[data-theme="dark"] .sidenav-counter li {
    color: var(--po-text-primary) !important;
    background-color: transparent !important;
}

html.dark-side .sidenav-counter a:hover,
html.dark-side .sidenav-counter li:hover,
[data-theme="dark"] .sidenav-counter a:hover,
[data-theme="dark"] .sidenav-counter li:hover {
    background-color: var(--po-bg-hover) !important;
}

/* Modal Backdrop */
html.dark-side .modal-overlay,
html.dark-side .e-dlg-overlay,
[data-theme="dark"] .modal-overlay,
[data-theme="dark"] .e-dlg-overlay {
    background-color: var(--po-overlay) !important;
}

/* Chart.js / Lottie Containers */
html.dark-side .chart-container,
html.dark-side .lottie-container,
[data-theme="dark"] .chart-container,
[data-theme="dark"] .lottie-container {
    background-color: transparent !important;
}

/* Flip Card */
html.dark-side .flip-card,
html.dark-side .flip-card-inner,
html.dark-side .flip-card-front,
html.dark-side .flip-card-back,
[data-theme="dark"] .flip-card,
[data-theme="dark"] .flip-card-inner,
[data-theme="dark"] .flip-card-front,
[data-theme="dark"] .flip-card-back {
    background-color: transparent !important;
}

/* Secondary Dialog */
html.dark-side .dialog.secondary .dialog-title,
[data-theme="dark"] .dialog.secondary .dialog-title {
    background-color: var(--po-bg-tertiary) !important;
    color: var(--po-text-primary) !important;
}

/* Text Colors that should adapt */
html.dark-side .text-default,
html.dark-side .fg-text-color,
[data-theme="dark"] .text-default,
[data-theme="dark"] .fg-text-color {
    color: var(--po-text-primary) !important;
}

/* Muted Text */
html.dark-side .text-muted,
html.dark-side .fg-muted,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .fg-muted {
    color: var(--po-text-muted) !important;
}

/* Ensure proper contrast for success/warning/danger text on dark */
html.dark-side .fg-success,
html.dark-side .text-success,
[data-theme="dark"] .fg-success,
[data-theme="dark"] .text-success {
    color: var(--po-success) !important;
}

html.dark-side .fg-warning,
html.dark-side .text-warning,
[data-theme="dark"] .fg-warning,
[data-theme="dark"] .text-warning {
    color: var(--po-warning) !important;
}

html.dark-side .fg-danger,
html.dark-side .text-danger,
[data-theme="dark"] .fg-danger,
[data-theme="dark"] .text-danger {
    color: var(--po-danger) !important;
}

/* Theme Toggle specific styling */
#topmenu_theme_toggle {
    transition: transform 0.2s ease;
}

#topmenu_theme_toggle:hover {
    transform: scale(1.1);
}

#topmenu_theme_toggle:active {
    transform: scale(0.95);
}

/* ================================================================
   Welcome Public Page - Dark Mode
   ================================================================ */

html.dark-side .welcome-public,
[data-theme="dark"] .welcome-public {
    background: var(--po-bg-primary) !important;
}

html.dark-side .welcome-hero h1,
[data-theme="dark"] .welcome-hero h1 {
    color: var(--po-text-primary) !important;
}

html.dark-side .welcome-hero p,
[data-theme="dark"] .welcome-hero p {
    color: var(--po-text-muted) !important;
}

html.dark-side .welcome-stats-banner,
[data-theme="dark"] .welcome-stats-banner {
    background: var(--po-bg-secondary) !important;
    border-color: var(--po-border) !important;
}

html.dark-side .welcome-stat-label-top,
[data-theme="dark"] .welcome-stat-label-top {
    color: var(--po-text-muted) !important;
}

html.dark-side .welcome-stat-counter,
[data-theme="dark"] .welcome-stat-counter {
    color: var(--po-text-primary) !important;
}

html.dark-side .welcome-stat-unit,
[data-theme="dark"] .welcome-stat-unit {
    color: var(--po-text-muted) !important;
}

html.dark-side .stat-divider,
[data-theme="dark"] .stat-divider {
    background: var(--po-border) !important;
}

html.dark-side .status-text,
[data-theme="dark"] .status-text {
    color: #4ade80 !important;
}

html.dark-side .uptime-label,
[data-theme="dark"] .uptime-label {
    color: var(--po-text-muted) !important;
}

html.dark-side .welcome-card,
[data-theme="dark"] .welcome-card {
    background: var(--po-bg-secondary) !important;
    border-color: var(--po-border) !important;
}

html.dark-side .welcome-card-header,
[data-theme="dark"] .welcome-card-header {
    border-color: var(--po-border) !important;
}

html.dark-side .welcome-card-header i,
[data-theme="dark"] .welcome-card-header i {
    color: var(--po-text-muted) !important;
}

html.dark-side .welcome-card-header h2,
[data-theme="dark"] .welcome-card-header h2 {
    color: var(--po-text-primary) !important;
}

html.dark-side .welcome-docai-item,
[data-theme="dark"] .welcome-docai-item {
    background: var(--po-bg-tertiary) !important;
}

html.dark-side .welcome-docai-item:hover,
[data-theme="dark"] .welcome-docai-item:hover {
    background: var(--po-bg-hover) !important;
}

html.dark-side .welcome-docai-icon,
[data-theme="dark"] .welcome-docai-icon {
    background: rgba(91, 155, 213, 0.15) !important;
}

html.dark-side .welcome-docai-text h3,
[data-theme="dark"] .welcome-docai-text h3 {
    color: var(--po-text-primary) !important;
}

html.dark-side .welcome-docai-text p,
[data-theme="dark"] .welcome-docai-text p {
    color: var(--po-text-muted) !important;
}

html.dark-side .welcome-docai-tag,
[data-theme="dark"] .welcome-docai-tag {
    color: var(--po-text-secondary) !important;
    background: var(--po-border) !important;
}

html.dark-side .welcome-docai-badge,
[data-theme="dark"] .welcome-docai-badge {
    color: var(--po-text-secondary) !important;
    background: var(--po-border) !important;
}

html.dark-side .welcome-api-item,
[data-theme="dark"] .welcome-api-item {
    color: inherit !important;
}

html.dark-side .welcome-api-item:hover,
[data-theme="dark"] .welcome-api-item:hover {
    background: var(--po-bg-tertiary) !important;
}

html.dark-side .welcome-api-item i,
[data-theme="dark"] .welcome-api-item i {
    color: var(--po-text-muted) !important;
}

html.dark-side .welcome-api-item:hover i,
[data-theme="dark"] .welcome-api-item:hover i {
    color: var(--po-accent) !important;
}

html.dark-side .welcome-api-item span,
[data-theme="dark"] .welcome-api-item span {
    color: var(--po-text-muted) !important;
}

html.dark-side .welcome-footer,
[data-theme="dark"] .welcome-footer {
    background: var(--po-bg-secondary) !important;
    border-color: var(--po-border) !important;
    color: var(--po-text-muted) !important;
}

html.dark-side .welcome-footer a,
[data-theme="dark"] .welcome-footer a {
    color: var(--po-accent) !important;
}

/* ============================================
   UI-DARKMODE ISSUE FIXES - 13.01.2026
   GitHub Issues: #1, #3, #4, #6, #7, #8, #9, 
   #10, #17, #18, #19, #20, #21, #23
   ============================================ */

/* ============================================
   FIX #1, #7, #8, #9, #20: SEARCH/INPUT INTERNAL BOX COLOR
   Fixes: Searchbox, Input fields mit weißem Hintergrund
   ============================================ */

/* Metro UI Input interne Box-Farbe */
html.dark-side .input-wrapper,
html.dark-side .input-group,
html.dark-side .search-block input,
html.dark-side .metro-input,
html.dark-side input.input,
html.dark-side .dt-search input,
html.dark-side .dataTables_filter input,
html.dark-side .dataTables_length select,
html.dark-side div.dataTables_wrapper div.dataTables_filter input,
[data-theme="dark"] .input-wrapper,
[data-theme="dark"] .input-group,
[data-theme="dark"] .search-block input,
[data-theme="dark"] .metro-input,
[data-theme="dark"] input.input,
[data-theme="dark"] .dt-search input,
[data-theme="dark"] .dataTables_filter input,
[data-theme="dark"] .dataTables_length select,
[data-theme="dark"] div.dataTables_wrapper div.dataTables_filter input {
    background-color: var(--po-bg-input) !important;
    border-color: var(--po-border) !important;
    color: var(--po-text-primary) !important;
}

/* DataTables Wrapper Hintergrund */
html.dark-side .dataTables_wrapper,
html.dark-side div.dataTables_wrapper,
[data-theme="dark"] .dataTables_wrapper,
[data-theme="dark"] div.dataTables_wrapper {
    background-color: transparent !important;
}

/* ============================================
   FIX #3, #4, #17, #18, #19: SELECT/DROPDOWN INTERNAL BOX
   Fixes: Dropdown/Select Felder mit weißem Innenhintergrund
   ============================================ */

/* Metro UI Select Dropdown komplett */
html.dark-side .select,
html.dark-side .select input,
html.dark-side .select .select-input,
html.dark-side .select .button-group,
html.dark-side .select .dropdown-toggle,
html.dark-side select.input,
html.dark-side select.metro-input,
html.dark-side .form-control,
html.dark-side .metro-select,
[data-theme="dark"] .select,
[data-theme="dark"] .select input,
[data-theme="dark"] .select .select-input,
[data-theme="dark"] .select .button-group,
[data-theme="dark"] .select .dropdown-toggle,
[data-theme="dark"] select.input,
[data-theme="dark"] select.metro-input,
[data-theme="dark"] .form-control,
[data-theme="dark"] .metro-select {
    background-color: var(--po-bg-input) !important;
    border-color: var(--po-border) !important;
    color: var(--po-text-primary) !important;
}

/* Select Prepend/Append */
html.dark-side .select .prepend,
html.dark-side .select .append,
html.dark-side .input .prepend,
html.dark-side .input .append,
[data-theme="dark"] .select .prepend,
[data-theme="dark"] .select .append,
[data-theme="dark"] .input .prepend,
[data-theme="dark"] .input .append {
    background-color: var(--po-bg-tertiary) !important;
    border-color: var(--po-border) !important;
    color: var(--po-text-secondary) !important;
}

/* Select Dropdown Options Container */
html.dark-side .select .d-menu,
html.dark-side .select ul,
html.dark-side .select .drop-container ul,
html.dark-side .drop-container,
html.dark-side .dropdown-menu,
html.dark-side .option-list,
[data-theme="dark"] .select .d-menu,
[data-theme="dark"] .select ul,
[data-theme="dark"] .select .drop-container ul,
[data-theme="dark"] .drop-container,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .option-list {
    background-color: var(--po-bg-elevated) !important;
    border-color: var(--po-border) !important;
}

/* Option Items */
html.dark-side .select li,
html.dark-side .select .option-list li,
html.dark-side .drop-container li,
html.dark-side .d-menu li,
[data-theme="dark"] .select li,
[data-theme="dark"] .select .option-list li,
[data-theme="dark"] .drop-container li,
[data-theme="dark"] .d-menu li {
    background-color: transparent !important;
    color: var(--po-text-primary) !important;
}

html.dark-side .select li:hover,
html.dark-side .select .option-list li:hover,
html.dark-side .drop-container li:hover,
html.dark-side .d-menu li:hover,
[data-theme="dark"] .select li:hover,
[data-theme="dark"] .select .option-list li:hover,
[data-theme="dark"] .drop-container li:hover,
[data-theme="dark"] .d-menu li:hover {
    background-color: var(--po-bg-hover) !important;
}

/* ============================================
   FIX #1, #7, #20: DATATABLE/GRID BORDERS & BADGES
   Fixes: Weiße Borders in Datatables, Badge Farben
   ============================================ */

/* DataTables Borders */
html.dark-side .dataTable,
html.dark-side .dataTable th,
html.dark-side .dataTable td,
html.dark-side table.dataTable,
html.dark-side table.dataTable thead th,
html.dark-side table.dataTable tbody td,
html.dark-side .dataTables_wrapper table,
[data-theme="dark"] .dataTable,
[data-theme="dark"] .dataTable th,
[data-theme="dark"] .dataTable td,
[data-theme="dark"] table.dataTable,
[data-theme="dark"] table.dataTable thead th,
[data-theme="dark"] table.dataTable tbody td,
[data-theme="dark"] .dataTables_wrapper table {
    border-color: var(--po-border) !important;
}

/* DataTables Header */
html.dark-side table.dataTable thead th,
html.dark-side table.dataTable thead td,
html.dark-side .dataTables_wrapper .dataTables_scroll .dataTables_scrollHead,
[data-theme="dark"] table.dataTable thead th,
[data-theme="dark"] table.dataTable thead td,
[data-theme="dark"] .dataTables_wrapper .dataTables_scroll .dataTables_scrollHead {
    background-color: var(--po-bg-tertiary) !important;
    color: var(--po-text-primary) !important;
}

/* DataTables Body Rows */
html.dark-side table.dataTable tbody tr,
[data-theme="dark"] table.dataTable tbody tr {
    background-color: var(--po-bg-secondary) !important;
}

html.dark-side table.dataTable tbody tr:hover,
[data-theme="dark"] table.dataTable tbody tr:hover {
    background-color: var(--po-bg-hover) !important;
}

/* Badges in Columns (Issue #1) */
html.dark-side .badge,
html.dark-side span.badge,
html.dark-side .label,
html.dark-side .e-badge,
[data-theme="dark"] .badge,
[data-theme="dark"] span.badge,
[data-theme="dark"] .label,
[data-theme="dark"] .e-badge {
    background-color: var(--po-bg-tertiary) !important;
    color: var(--po-text-primary) !important;
    border-color: var(--po-border) !important;
}

/* Column Hover (Issue #1) */
html.dark-side table.dataTable tbody td:hover,
html.dark-side .e-grid .e-rowcell:hover,
[data-theme="dark"] table.dataTable tbody td:hover,
[data-theme="dark"] .e-grid .e-rowcell:hover {
    background-color: var(--po-bg-hover) !important;
}

/* ============================================
   FIX #19, #20: PAGINATION/PAGER BUTTONS
   Fixes: Weiße Borders auf Pager Buttons
   ============================================ */

/* DataTables Pagination */
html.dark-side .dataTables_paginate,
html.dark-side .dataTables_paginate .paginate_button,
html.dark-side .dataTables_wrapper .dataTables_paginate .paginate_button,
html.dark-side .pagination-group button,
html.dark-side .pagination li a,
html.dark-side .pager button,
html.dark-side .pager a,
[data-theme="dark"] .dataTables_paginate,
[data-theme="dark"] .dataTables_paginate .paginate_button,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button,
[data-theme="dark"] .pagination-group button,
[data-theme="dark"] .pagination li a,
[data-theme="dark"] .pager button,
[data-theme="dark"] .pager a {
    background-color: var(--po-bg-tertiary) !important;
    border-color: var(--po-border) !important;
    color: var(--po-text-primary) !important;
}

html.dark-side .dataTables_paginate .paginate_button:hover,
html.dark-side .dataTables_paginate .paginate_button.current,
html.dark-side .pagination li a:hover,
html.dark-side .pagination li.active a,
html.dark-side .pager button:hover,
[data-theme="dark"] .dataTables_paginate .paginate_button:hover,
[data-theme="dark"] .dataTables_paginate .paginate_button.current,
[data-theme="dark"] .pagination li a:hover,
[data-theme="dark"] .pagination li.active a,
[data-theme="dark"] .pager button:hover {
    background-color: var(--po-accent) !important;
    border-color: var(--po-accent) !important;
    color: white !important;
}

html.dark-side .dataTables_paginate .paginate_button.disabled,
[data-theme="dark"] .dataTables_paginate .paginate_button.disabled {
    background-color: var(--po-bg-secondary) !important;
    color: var(--po-text-muted) !important;
    opacity: 0.5;
}

/* DataTables Info & Length */
html.dark-side .dataTables_info,
html.dark-side .dataTables_length,
html.dark-side .dataTables_length label,
[data-theme="dark"] .dataTables_info,
[data-theme="dark"] .dataTables_length,
[data-theme="dark"] .dataTables_length label {
    color: var(--po-text-secondary) !important;
}

/* ============================================
   FIX #6: CHART.JS TOOLTIPS
   Fixes: Schwarze Box bei Chart Hover
   ============================================ */

/* Chart.js Tooltip */
html.dark-side .chartjs-tooltip,
html.dark-side div[class*="chart"] .tooltip,
[data-theme="dark"] .chartjs-tooltip,
[data-theme="dark"] div[class*="chart"] .tooltip {
    background-color: var(--po-bg-elevated) !important;
    color: var(--po-text-primary) !important;
    border-color: var(--po-border) !important;
    border: 1px solid var(--po-border) !important;
    box-shadow: var(--po-shadow-lg) !important;
}

/* Chart Axis Labels & Grid */
html.dark-side canvas + * text,
html.dark-side .chart-container text,
[data-theme="dark"] canvas + * text,
[data-theme="dark"] .chart-container text {
    fill: var(--po-text-secondary) !important;
}

/* ============================================
   FIX #23: TABS & UPLOAD DIALOGS
   Fixes: Weiße Tabs, Upload Dialog Hintergründe
   ============================================ */

/* Tabs mit weißem Hintergrund */
html.dark-side .tabs-material li,
html.dark-side .tabs li,
html.dark-side .tab-content,
html.dark-side .tabs-content,
html.dark-side .nav-tabs,
html.dark-side .nav-tabs li,
html.dark-side .nav-tabs a,
[data-theme="dark"] .tabs-material li,
[data-theme="dark"] .tabs li,
[data-theme="dark"] .tab-content,
[data-theme="dark"] .tabs-content,
[data-theme="dark"] .nav-tabs,
[data-theme="dark"] .nav-tabs li,
[data-theme="dark"] .nav-tabs a {
    background-color: transparent !important;
    color: var(--po-text-primary) !important;
}

html.dark-side .tabs-material li.active,
html.dark-side .tabs li.active,
html.dark-side .nav-tabs li.active a,
[data-theme="dark"] .tabs-material li.active,
[data-theme="dark"] .tabs li.active,
[data-theme="dark"] .nav-tabs li.active a {
    background-color: var(--po-bg-secondary) !important;
    color: var(--po-accent) !important;
}

/* Import/Upload Panels */
html.dark-side .source-panel,
html.dark-side .upload-panel,
html.dark-side .import-panel,
html.dark-side .dropzone,
html.dark-side .file-drop-zone,
html.dark-side .uppy-Dashboard,
html.dark-side .uppy-Dashboard-inner,
[data-theme="dark"] .source-panel,
[data-theme="dark"] .upload-panel,
[data-theme="dark"] .import-panel,
[data-theme="dark"] .dropzone,
[data-theme="dark"] .file-drop-zone,
[data-theme="dark"] .uppy-Dashboard,
[data-theme="dark"] .uppy-Dashboard-inner {
    background-color: var(--po-bg-tertiary) !important;
    border-color: var(--po-border) !important;
    color: var(--po-text-primary) !important;
}

/* Info-Boxen (Issue #23 - E-Mail-Adresse Tab)
   Keine generischen [class*="info"]-Selektoren verwenden: viele Layout-Container
   (z. B. Dashboard-Dokumentinfos) tragen "info" im Namen, sind aber keine Hinweise. */
html.dark-side .info-box,
html.dark-side .alert-info,
html.dark-side .remark,
html.dark-side .notice,
[data-theme="dark"] .info-box,
[data-theme="dark"] .alert-info,
[data-theme="dark"] .remark,
[data-theme="dark"] .notice {
    background-color: rgba(96, 165, 250, 0.1) !important;
    border-color: var(--po-accent) !important;
    color: var(--po-text-primary) !important;
}

/* ============================================
   FIX #10: DOCUMENT VIEW MENU OPTIONS
   Fixes: Top doc menu, OCR-BEREICHE overflow
   ============================================ */

/* Document Edit Top Menu */
html.dark-side .document-toolbar,
html.dark-side .doc-menu,
html.dark-side .toolbar-menu,
html.dark-side #document_edit_toolbar,
html.dark-side .ribbon-menu .tabs-holder li,
[data-theme="dark"] .document-toolbar,
[data-theme="dark"] .doc-menu,
[data-theme="dark"] .toolbar-menu,
[data-theme="dark"] #document_edit_toolbar,
[data-theme="dark"] .ribbon-menu .tabs-holder li {
    background-color: var(--po-bg-secondary) !important;
    color: var(--po-text-primary) !important;
}

/* OCR Bereiche Sidebar */
html.dark-side .ocr-regions,
html.dark-side .sidebar-panel,
html.dark-side #ocr_sidebar,
[data-theme="dark"] .ocr-regions,
[data-theme="dark"] .sidebar-panel,
[data-theme="dark"] #ocr_sidebar {
    background-color: var(--po-bg-secondary) !important;
    border-color: var(--po-border) !important;
    overflow: auto !important;
}

/* ============================================
   FIX #3: BUTTON HOVER TEXT VISIBILITY
   Fixes: Hover-Text auf Buttons nicht sichtbar
   ============================================ */

html.dark-side .button:hover,
html.dark-side button:hover,
html.dark-side .btn:hover,
[data-theme="dark"] .button:hover,
[data-theme="dark"] button:hover,
[data-theme="dark"] .btn:hover {
    color: var(--po-text-primary) !important;
}

html.dark-side .button.primary:hover,
html.dark-side .button.info:hover,
html.dark-side .btn-primary:hover,
html.dark-side .btn-info:hover,
[data-theme="dark"] .button.primary:hover,
[data-theme="dark"] .button.info:hover,
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-info:hover {
    color: white !important;
}

/* ============================================
   FIX #19, #21: SPELL CHECK UNDERLINE DEAKTIVIEREN
   Fixes: Rote Rechtschreibprüfungs-Unterstreichung
   ============================================ */

html.dark-side input,
html.dark-side textarea,
html.dark-side [contenteditable="true"],
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] [contenteditable="true"] {
    -webkit-text-decoration-skip: objects;
}

/* Spellcheck-Unterstreichung ausblenden kann nur via HTML-Attribut erfolgen */
/* CSS-Workaround: Rote Farbe anpassen */
html.dark-side ::spelling-error,
[data-theme="dark"] ::spelling-error {
    text-decoration-color: var(--po-danger) !important;
}

/* ============================================
   FIX #21: AUDIO/VIDEO PLAYER CONTROLS
   Fixes: Weiße Hintergründe in Player Controls
   ============================================ */

/* Audio/Video Player Container */
html.dark-side .audio-player,
html.dark-side .video-player,
html.dark-side .voice-player,
html.dark-side .tts-player,
html.dark-side .player-container,
html.dark-side audio::-webkit-media-controls-panel,
html.dark-side video::-webkit-media-controls-panel,
[data-theme="dark"] .audio-player,
[data-theme="dark"] .video-player,
[data-theme="dark"] .voice-player,
[data-theme="dark"] .tts-player,
[data-theme="dark"] .player-container,
[data-theme="dark"] audio::-webkit-media-controls-panel,
[data-theme="dark"] video::-webkit-media-controls-panel {
    background-color: var(--po-bg-tertiary) !important;
    border-color: var(--po-border) !important;
}

/* Player Timeline/Slider */
html.dark-side .player-timeline,
html.dark-side .player-progress,
html.dark-side .volume-slider,
html.dark-side input[type="range"],
html.dark-side .range-slider,
[data-theme="dark"] .player-timeline,
[data-theme="dark"] .player-progress,
[data-theme="dark"] .volume-slider,
[data-theme="dark"] input[type="range"],
[data-theme="dark"] .range-slider {
    background-color: var(--po-bg-tertiary) !important;
}

html.dark-side input[type="range"]::-webkit-slider-runnable-track,
[data-theme="dark"] input[type="range"]::-webkit-slider-runnable-track {
    background-color: var(--po-bg-tertiary) !important;
}

html.dark-side input[type="range"]::-webkit-slider-thumb,
[data-theme="dark"] input[type="range"]::-webkit-slider-thumb {
    background-color: var(--po-accent) !important;
}

/* Player Buttons - Weiße Ecken entfernen */
html.dark-side .player-button,
html.dark-side .player-controls button,
html.dark-side .media-controls button,
html.dark-side .plyr__controls button,
[data-theme="dark"] .player-button,
[data-theme="dark"] .player-controls button,
[data-theme="dark"] .media-controls button,
[data-theme="dark"] .plyr__controls button {
    background-color: transparent !important;
    border-color: var(--po-border) !important;
    color: var(--po-text-primary) !important;
    border-radius: 4px !important;
}

html.dark-side .player-button:hover,
html.dark-side .player-controls button:hover,
[data-theme="dark"] .player-button:hover,
[data-theme="dark"] .player-controls button:hover {
    background-color: var(--po-bg-hover) !important;
}

/* Sidebar Player (Issue #21) */
html.dark-side .sidebar-player,
html.dark-side .voice-sidebar,
html.dark-side #voice_preview_player,
[data-theme="dark"] .sidebar-player,
[data-theme="dark"] .voice-sidebar,
[data-theme="dark"] #voice_preview_player {
    background-color: var(--po-bg-secondary) !important;
    border-color: var(--po-border) !important;
}

/* ============================================
   ZUSÄTZLICHE FIXES: ALLGEMEINE VERBESSERUNGEN
   ============================================ */

/* Alle weißen Inline-Styles überschreiben */
html.dark-side [style*="background: white"],
html.dark-side [style*="background:white"],
html.dark-side [style*="background-color: white"],
html.dark-side [style*="background-color:white"],
html.dark-side [style*="background: #fff"],
html.dark-side [style*="background:#fff"],
html.dark-side [style*="background-color: #fff"],
html.dark-side [style*="background-color:#fff"],
html.dark-side [style*="background: rgb(255"],
html.dark-side [style*="background-color: rgb(255"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background-color: white"],
[data-theme="dark"] [style*="background-color:white"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background-color: #fff"],
[data-theme="dark"] [style*="background-color:#fff"],
[data-theme="dark"] [style*="background: rgb(255"],
[data-theme="dark"] [style*="background-color: rgb(255"] {
    background: var(--po-bg-secondary) !important;
    background-color: var(--po-bg-secondary) !important;
    border-color: var(--po-border) !important;
}

/* Harte Inline-Textfarben aus hellen Dialogen auf Dark-Mode-Tokens umbiegen */
html.dark-side [style*="color:#0f172a"],
html.dark-side [style*="color: #0f172a"],
html.dark-side [style*="color:#111827"],
html.dark-side [style*="color: #111827"],
html.dark-side [style*="color:#1f2937"],
html.dark-side [style*="color: #1f2937"],
html.dark-side [style*="color:#1e293b"],
html.dark-side [style*="color: #1e293b"],
html.dark-side [style*="color:#334155"],
html.dark-side [style*="color: #334155"],
[data-theme="dark"] [style*="color:#0f172a"],
[data-theme="dark"] [style*="color: #0f172a"],
[data-theme="dark"] [style*="color:#111827"],
[data-theme="dark"] [style*="color: #111827"],
[data-theme="dark"] [style*="color:#1f2937"],
[data-theme="dark"] [style*="color: #1f2937"],
[data-theme="dark"] [style*="color:#1e293b"],
[data-theme="dark"] [style*="color: #1e293b"],
[data-theme="dark"] [style*="color:#334155"],
[data-theme="dark"] [style*="color: #334155"] {
    color: var(--po-text-primary) !important;
}

/* Harte Inline-Borders aus hellen Karten/Dialogen neutralisieren */
html.dark-side [style*="border:1px solid #e5e7eb"],
html.dark-side [style*="border: 1px solid #e5e7eb"],
html.dark-side [style*="border:1px solid #e2e8f0"],
html.dark-side [style*="border: 1px solid #e2e8f0"],
html.dark-side [style*="border:2px solid #e5e7eb"],
html.dark-side [style*="border: 2px solid #e5e7eb"],
html.dark-side [style*="border:2px solid #e2e8f0"],
html.dark-side [style*="border: 2px solid #e2e8f0"],
[data-theme="dark"] [style*="border:1px solid #e5e7eb"],
[data-theme="dark"] [style*="border: 1px solid #e5e7eb"],
[data-theme="dark"] [style*="border:1px solid #e2e8f0"],
[data-theme="dark"] [style*="border: 1px solid #e2e8f0"],
[data-theme="dark"] [style*="border:2px solid #e5e7eb"],
[data-theme="dark"] [style*="border: 2px solid #e5e7eb"],
[data-theme="dark"] [style*="border:2px solid #e2e8f0"],
[data-theme="dark"] [style*="border: 2px solid #e2e8f0"] {
    border-color: var(--po-border) !important;
}

/* Form Groups */
html.dark-side .form-group,
html.dark-side .form-row,
html.dark-side .field-group,
[data-theme="dark"] .form-group,
[data-theme="dark"] .form-row,
[data-theme="dark"] .field-group {
    color: var(--po-text-primary) !important;
}

/* Modal Footer Buttons */
html.dark-side .dialog-actions .button,
html.dark-side .modal-footer .button,
html.dark-side .modal-footer .btn,
[data-theme="dark"] .dialog-actions .button,
[data-theme="dark"] .modal-footer .button,
[data-theme="dark"] .modal-footer .btn {
    background-color: var(--po-bg-tertiary) !important;
    border-color: var(--po-border) !important;
    color: var(--po-text-primary) !important;
}

html.dark-side .dialog-actions .button.primary,
html.dark-side .modal-footer .button.primary,
html.dark-side .modal-footer .btn-primary,
[data-theme="dark"] .dialog-actions .button.primary,
[data-theme="dark"] .modal-footer .button.primary,
[data-theme="dark"] .modal-footer .btn-primary {
    background-color: var(--po-button-primary-bg) !important;
    border-color: var(--po-button-primary-bg) !important;
    color: var(--po-button-primary-text) !important;
}