/* ==========================================================================
   FID.Compass MINIMAL DESIGN SYSTEM - COLORS ONLY - MIT DARK MODE
   ========================================================================== */

:root {
    /* Main Brand Colors - Light Theme - Unified FID.Compass Blue */
    --primary-color: #00618F;
    --primary-hover: #327EBB;
    --primary-light: #6BA3E8;
    --primary-dark: #2A6BC0;
    --secondary-color: #6A7594;         
    
    /* Light Theme Colors */
    --background-color: #F6F7F9;        
    --background-light: #FFFFFF;        
    --accent-color: #8ED1B0;            
    --text-color: #333333;              
    --text-dark: #2C2C2C;               
    --text-muted: #6C757D;              
    --text-on-primary: #FFFFFF;         
    --text-on-secondary: #FFFFFF;       
    
    /* Border & Surface Colors */
    --border-color: #E0E6ED;            
    --surface-color: #FFFFFF;           
    --card-background: #FFFFFF;         
    
    /* Bootstrap Colors - Unified FID.Compass Blue */
    --bootstrap-primary: #00618F;
    --bootstrap-blue: #00618F;
    --bootstrap-purple: #6A7594;
    --bootstrap-orange: #8ED1B0;
    
    /* Semantic Colors */
    --success-color: #8ED1B0;           
    --error-color: #E74C3C;             
    --error-hover: #C0392B;             
    --warning-color: #F39C12;           
    --warning-text: #8A6914;            
    --info-color: #00618F;             
    --danger-color: #E74C3C;            
}

/* Global Body Styling */
body {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* HTML Root auch setzen */
html {
    background-color: var(--background-color) !important;
}

/* Alle möglichen Container */
body, html, .main-content, #app, .app {
    background-color: var(--background-color) !important;
}

/* Container und Main Content */
.container,
.container-fluid,
main {
    background-color: transparent !important;
    color: var(--text-color) !important;
}

/* Footer */
footer {
    background-color: var(--background-light) !important;
    color: var(--text-color) !important;
    border-top: 1px solid var(--border-color) !important;
}

footer .text-muted {
    color: var(--text-muted) !important;
}

/* Dark Theme */
[data-theme="dark"] {
    --primary-color: #4A9BD9;           /* Slightly brighter for dark mode readability */
    --primary-hover: #5BAAE8;
    --primary-light: #6BB0F8;
    --primary-dark: #3A7BC8;
    --secondary-color: #7A85A4;         
    
    --background-color: #1A1D23;        
    --background-light: #252A32;        
    --accent-color: #9EE1C0;            
    --text-color: #E8E9EA;              
    --text-dark: #FFFFFF;               
    --text-muted: #B0B3B8;              
    --text-on-primary: #FFFFFF;         
    --text-on-secondary: #FFFFFF;       
    
    --border-color: #3A3B3C;            
    --surface-color: #252A32;           
    --card-background: #252A32;         
    
    --success-color: #9EE1C0;           
    --error-color: #F56565;             
    --error-hover: #E53E3E;             
    --warning-color: #F6AD55;           
    --warning-text: #C05621;            
    --info-color: #4A9BD9;             
    --danger-color: #F56565;            
}

/* Dark Theme Body Styling */
[data-theme="dark"] body,
[data-theme="dark"] html,
[data-theme="dark"] .main-content,
[data-theme="dark"] #app,
[data-theme="dark"] .app {
    background-color: #1A1D23 !important;
    color: #E8E9EA !important;
}

/* Dark Theme - Container und Footer */
[data-theme="dark"] .container,
[data-theme="dark"] .container-fluid,
[data-theme="dark"] main {
    background-color: transparent !important;
    color: #E8E9EA !important;
}

[data-theme="dark"] footer {
    background-color: #252A32 !important;
    color: #E8E9EA !important;
    border-top: 1px solid #3A3B3C !important;
}

[data-theme="dark"] footer .text-muted {
    color: #B0B3B8 !important;
}

/* Dark Theme - Bootstrap Components */
[data-theme="dark"] .bg-light {
    background-color: #252A32 !important;
}

[data-theme="dark"] .text-muted {
    color: #B0B3B8 !important;
}

[data-theme="dark"] .text-dark {
    color: #E8E9EA !important;
}

[data-theme="dark"] .alert {
    background-color: #252A32 !important;
    border: 1px solid #3A3B3C !important;
    color: #E8E9EA !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: #252A32 !important;
    border: 1px solid #3A3B3C !important;
    color: #E8E9EA !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: #252A32 !important;
    border-color: #4A9BD9 !important;
    color: #E8E9EA !important;
    box-shadow: none;
}

/* Dark Theme - Cards */
[data-theme="dark"] .card {
    background-color: #252A32 !important;
    border: 1px solid #3A3B3C !important;
    color: #E8E9EA !important;
    box-shadow: none;
}

[data-theme="dark"] .card-header {
    background-color: #1A1D23 !important;
    border-bottom: 1px solid #3A3B3C !important;
    color: #E8E9EA !important;
}

[data-theme="dark"] .card-body {
    background-color: #252A32 !important;
    color: #E8E9EA !important;
}

[data-theme="dark"] .card-footer {
    background-color: #1A1D23 !important;
    border-top: 1px solid #3A3B3C !important;
    color: #E8E9EA !important;
}

[data-theme="dark"] .card.border-hover:hover {
    border-color: #4A9BD9 !important;
    box-shadow: none;
    transform: translateY(-2px);
    transition: all 0.3s ease !important;
}

/* Dark Theme - Card Footer mit besserer Sichtbarkeit */
[data-theme="dark"] .card-footer.bg-transparent {
    background-color: #1A1D23 !important;
    border-top: 1px solid #3A3B3C !important;
}

/* Dark Theme - Tables */
[data-theme="dark"] .table {
    background-color: #252A32 !important;
    color: #E8E9EA !important;
}

[data-theme="dark"] .table-light th {
    background-color: #1A1D23 !important;
    color: #E8E9EA !important;
    border-color: #3A3B3C !important;
}

[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: #3A3B3C !important;
    color: #E8E9EA !important;
}

[data-theme="dark"] .table td,
[data-theme="dark"] .table th {
    border-color: #3A3B3C !important;
}

/* Dark Theme - Badges */
[data-theme="dark"] .badge.bg-light {
    background-color: #3A3B3C !important;
    color: #E8E9EA !important;
}

[data-theme="dark"] .badge.bg-secondary {
    background-color: #6A7594 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .badge.bg-info {
    background-color: #4A9BD9 !important;
    color: #FFFFFF !important;
}

/* Dark Theme - Buttons */
[data-theme="dark"] .btn-outline-primary {
    color: #4A9BD9 !important;
    border-color: #4A9BD9 !important;
}

[data-theme="dark"] .btn-outline-primary:hover {
    background-color: #4A9BD9 !important;
    border-color: #4A9BD9 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .btn-outline-secondary {
    color: #B0B3B8 !important;
    border-color: #3A3B3C !important;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: #3A3B3C !important;
    border-color: #3A3B3C !important;
    color: #E8E9EA !important;
}

[data-theme="dark"] .btn-link {
    color: #4A9BD9 !important;
}

/* Dark Theme - Spezielle Fixes für FID Liste */
[data-theme="dark"] .card h5,
[data-theme="dark"] .card h6 {
    color: #E8E9EA !important;
}

[data-theme="dark"] .form-label {
    color: #E8E9EA !important;
}

/* Dark Theme - Card Text Elements */
[data-theme="dark"] .card-text {
    color: #B0B3B8 !important;
}

[data-theme="dark"] .card-title {
    color: #E8E9EA !important;
}

/* Dark Theme - Row und Col Fixes */
[data-theme="dark"] .row,
[data-theme="dark"] .col-12,
[data-theme="dark"] .col-md-3,
[data-theme="dark"] .col-md-4,
[data-theme="dark"] .col-lg-6,
[data-theme="dark"] .col-xl-4 {
    background-color: transparent !important;
}

/* Dark Theme - Collapse Content */
[data-theme="dark"] .collapse {
    background-color: transparent !important;
    color: #E8E9EA !important;
}

/* Dark Theme - Filter Sidebar (FID Liste mit Filtern) */
[data-theme="dark"] .filter-sidebar {
    background: #252A32 !important;
    border-right: 1px solid #3A3B3C !important;
    color: #E8E9EA !important;
}

[data-theme="dark"] .filter-section {
    border-bottom: 1px solid #3A3B3C !important;
}

[data-theme="dark"] .filter-title {
    color: #E8E9EA !important;
}

[data-theme="dark"] .filter-label {
    color: #B0B3B8 !important;
}

[data-theme="dark"] .filter-option:hover {
    background-color: #3A3B3C !important;
}

[data-theme="dark"] .filter-count {
    background: #6A7594 !important;
    color: #FFFFFF !important;
}

[data-theme="dark"] .filter-option.active .filter-count {
    background: #4A9BD9 !important;
}

[data-theme="dark"] .search-box input {
    background-color: #252A32 !important;
    border: 1px solid #3A3B3C !important;
    color: #E8E9EA !important;
}

[data-theme="dark"] .search-box input:focus {
    border-color: #4A9BD9 !important;
    box-shadow: none;
}

[data-theme="dark"] .clear-filters {
    background-color: #3A3B3C !important;
    color: #E8E9EA !important;
    border: 1px solid #3A3B3C !important;
}

[data-theme="dark"] .clear-filters:hover {
    background-color: #4A9BD9 !important;
    color: #FFFFFF !important;
}

/* Auto Theme - System Preferences */
@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --primary-color: #4A9BD9;           
        --primary-hover: #4A92E2;           
        --primary-light: #6BB0F8;           
        --primary-dark: #3A7BC8;            
        --secondary-color: #7A85A4;         
        
        --background-color: #1A1D23;        
        --background-light: #252A32;        
        --accent-color: #9EE1C0;            
        --text-color: #E8E9EA;              
        --text-dark: #FFFFFF;               
        --text-muted: #B0B3B8;              
        --text-on-primary: #FFFFFF;         
        --text-on-secondary: #FFFFFF;       
        
        --border-color: #3A3B3C;            
        --surface-color: #252A32;           
        --card-background: #252A32;         
        
        --success-color: #9EE1C0;           
        --error-color: #F56565;             
        --error-hover: #E53E3E;             
        --warning-color: #F6AD55;           
        --warning-text: #C05621;            
        --info-color: #4A9BD9;             
        --danger-color: #F56565;            
    }
    
    [data-theme="auto"] body {
        background-color: var(--background-color) !important;
        color: var(--text-color) !important;
    }
}

/* User Dropdown Menu - Fix für bessere Lesbarkeit */
.dropdown-menu {
    background-color: var(--background-light) !important;
    border: 1px solid var(--border-color) !important;
}

.dropdown-item {
    color: var(--text-color) !important;
    background-color: transparent !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active {
    background-color: transparent !important;
    color: var(--text-color) !important;
    text-decoration: none !important;
}

.dropdown-divider {
    border-color: var(--border-color) !important;
}

/* Light Mode - Dropdown Text dunkel */
:root .dropdown-item {
    color: #333333 !important;
}

/* Dark Mode - Dropdown Text hell */
[data-theme="dark"] .dropdown-item {
    color: #E8E9EA !important;
}

/* Navigation Bar */
.navbar {
    background-color: var(--background-light) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.navbar-brand,
.navbar-nav .nav-link {
    color: var(--text-color) !important;
}

.navbar-nav .nav-link:hover {
    color: var(--primary-color) !important;
}

/* Light Mode Navigation - dunkle Schrift */
:root .navbar-brand,
:root .navbar-nav .nav-link {
    color: #333333 !important;
}

/* Dark Mode Navigation - helle Schrift */
[data-theme="dark"] .navbar-brand,
[data-theme="dark"] .navbar-nav .nav-link {
    color: #E8E9EA !important;
}

/* Navigation mit primary-color Background Override */
.navbar[style*="background-color: var(--primary-color)"] {
    background-color: var(--primary-color) !important;
}

.navbar[style*="background-color: var(--primary-color)"] .navbar-brand,
.navbar[style*="background-color: var(--primary-color)"] .navbar-nav .nav-link {
    color: var(--text-on-primary) !important;
}

/* Dark Mode Navigation mit primary background */
[data-theme="dark"] .navbar[style*="background-color: var(--primary-color)"] {
    background-color: #4A9BD9 !important;
}

[data-theme="dark"] .navbar[style*="background-color: var(--primary-color)"] .navbar-brand,
[data-theme="dark"] .navbar[style*="background-color: var(--primary-color)"] .navbar-nav .nav-link {
    color: #FFFFFF !important;
}

/* Cards und Surfaces */
.card {
    background-color: var(--card-background) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
    margin-bottom: 1rem;
    box-shadow: none;
}

.card-header {
    background-color: var(--background-light) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

.card-body {
    background-color: var(--card-background) !important;
    color: var(--text-color) !important;
}

.card-footer {
    background-color: var(--background-light) !important;
    border-top: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Card Footer transparent override */
.card-footer.bg-transparent {
    background-color: var(--background-light) !important;
    border-top: 1px solid var(--border-color) !important;
}

/* Card Hover Effect */
.card.border-hover:hover {
    border-color: var(--primary-color) !important;
    box-shadow: none;
    transform: translateY(-2px);
    transition: all 0.3s ease !important;
}

/* FID Cards - besserer Kontrast zwischen Cards */
.card {
    transition: all 0.3s ease !important;
}

/* Table Styling */
.table {
    background-color: var(--background-light) !important;
    color: var(--text-color) !important;
}

.table-light th {
    background-color: var(--background-light) !important;
    color: var(--text-color) !important;
    border-color: var(--border-color) !important;
}

.table-hover tbody tr:hover {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
}

/* Main Content */
.container,
.container-fluid,
main {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
}

/* Bootstrap Components - Allgemeine Fixes */
.bg-light {
    background-color: var(--background-light) !important;
}

.bg-dark {
    background-color: var(--background-color) !important;
}

.text-muted {
    color: var(--text-muted) !important;
}

.text-dark {
    color: var(--text-color) !important;
}

/* Alert Messages */
.alert {
    background-color: var(--background-light) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

/* Form Elements */
.form-control,
.form-select {
    background-color: var(--background-light) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-color) !important;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--background-light) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-color) !important;
    box-shadow: none;
}