﻿/* ==========================================================================
   FID.Compass CRITICAL OVERRIDES - HIGHEST PRIORITY - NEUE FARBPALETTE
   ========================================================================== */

@import './colors-only.css';

/* FORCE BOOTSTRAP BUTTON COLORS - Neue Farbpalette */
.btn-primary {
    background-color: var(--primary-color) !important;         /* Primärfarbe (Blau) */
    border-color: var(--primary-color) !important;
    color: var(--text-on-primary) !important;                  /* WEIßER TEXT auf Primärfarbe */
}

.btn-primary:hover {
    background-color: var(--primary-hover) !important;         /* Primärfarbe Hover */
    border-color: var(--primary-hover) !important;
    color: var(--text-on-primary) !important;                  /* WEIßER TEXT bleibt */
}

.btn-outline-primary {
    background-color: transparent !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;                    /* Primärfarbe als Text */
}

.btn-outline-primary:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-on-primary) !important;                  /* WEIßER TEXT beim Hover */
}

.btn-secondary {
    background-color: var(--secondary-color) !important;       /* Sekundärfarbe */
    border-color: var(--secondary-color) !important;
    color: var(--text-on-secondary) !important;                /* WEIßER TEXT auf Sekundärfarbe */
}

.btn-secondary:hover {
    background-color: #5A6584 !important;                      /* Dunklere Sekundärfarbe */
    border-color: #5A6584 !important;
    color: var(--text-on-secondary) !important;                /* WEIßER TEXT bleibt */
}

.btn-success {
    background-color: var(--success-color) !important;         /* Akzentfarbe (Grün) */
    border-color: var(--success-color) !important;
    color: var(--text-on-success) !important;                  /* DUNKLER TEXT auf hellem Grün */
}

.btn-danger {
    background-color: var(--error-color) !important;           /* Fehlerfarbe (Rot) */
    border-color: var(--error-color) !important;
    color: var(--text-on-error) !important;                    /* WEIßER TEXT auf Rot */
}

.btn-warning {
    background-color: var(--warning-color) !important;         /* Warnfarbe (Orange) */
    border-color: var(--warning-color) !important;
    color: var(--text-on-warning) !important;                  /* DUNKLER TEXT auf Orange */
}

.btn-info {
    background-color: var(--info-color) !important;            /* Info = Primärfarbe */
    border-color: var(--info-color) !important;
    color: var(--text-on-primary) !important;                  /* WEIßER TEXT auf Blau */
}

.bg-primary {
    background-color: var(--primary-color) !important;
    color: var(--text-on-primary) !important;                  /* WEIßER TEXT auf Primärhintergrund */
}

.text-primary {
    color: var(--primary-color) !important;                    /* Primärfarbe als Textfarbe */
}

.border-primary {
    border-color: var(--primary-color) !important;
}

/* FORCE BADGES AND SMALL BUTTONS - KRITISCH FÜR LESBARKEIT */
.badge-primary,
.badge.bg-primary {
    background-color: var(--primary-color) !important;
    color: var(--text-on-primary) !important;                  /* WEIßER TEXT auf Primary Badge */
}

.badge-secondary,
.badge.bg-secondary {
    background-color: var(--secondary-color) !important;
    color: var(--text-on-secondary) !important;                /* WEIßER TEXT auf Secondary Badge */
}

.badge-success,
.badge.bg-success {
    background-color: var(--success-color) !important;
    color: var(--text-on-success) !important;                  /* DUNKLER TEXT auf hellem Grün */
}

.badge-info,
.badge.bg-info {
    background-color: var(--info-color) !important;
    color: var(--text-on-primary) !important;                  /* WEIßER TEXT auf Info Badge */
}

.badge-warning,
.badge.bg-warning {
    background-color: var(--warning-color) !important;
    color: var(--text-on-warning) !important;                  /* DUNKLER TEXT auf Orange */
}

.badge-danger,
.badge.bg-danger {
    background-color: var(--error-color) !important;
    color: var(--text-on-error) !important;                    /* WEIßER TEXT auf Rot */
}

/* FORCE SMALL BUTTONS - KRITISCH FÜR LESBARKEIT */
.btn-sm.btn-primary,
.btn-xs.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-on-primary) !important;                  /* WEIßER TEXT */
}

.btn-sm.btn-secondary,
.btn-xs.btn-secondary {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: var(--text-on-secondary) !important;                /* WEIßER TEXT */
}

.btn-sm.btn-success,
.btn-xs.btn-success {
    background-color: var(--success-color) !important;
    border-color: var(--success-color) !important;
    color: var(--text-on-success) !important;                  /* DUNKLER TEXT */
}

.btn-sm.btn-info,
.btn-xs.btn-info {
    background-color: var(--info-color) !important;
    border-color: var(--info-color) !important;
    color: var(--text-on-primary) !important;                  /* WEIßER TEXT */
}

/* ALLGEMEINE LESBARKEIT - ALLE ELEMENTE MIT PRIMARY BACKGROUND */
.bg-primary,
.bg-primary * {
    color: var(--text-on-primary) !important;                  /* WEIßER TEXT auf Primary */
}

.bg-secondary,
.bg-secondary * {
    color: var(--text-on-secondary) !important;                /* WEIßER TEXT auf Secondary */
}

.bg-success,
.bg-success * {
    color: var(--text-on-success) !important;                  /* DUNKLER TEXT auf Grün */
}

/* SPEZIFISCHE API BROWSER FIXES */
.highlight,
.string,
.number,
.boolean,
.null,
.key {
    color: inherit !important;                                 /* Erbt Textfarbe vom Parent */
}

/* DJANGO REST FRAMEWORK SPECIFIC FIXES */
.prettyprint .tag,
.prettyprint .atn,
.prettyprint .atv {
    color: var(--text-on-primary) !important;                  /* WEIßER TEXT in Code Blocks */
}

.form-group label {
    color: var(--text-color) !important;                       /* Normale Textfarbe für Labels */
}

/* KRITISCHE FIXES FÜR API BROWSER - FACHGEBIET BUTTONS */
.well .btn,
.well .btn-primary,
.well .badge,
.well .badge-primary,
.well a.btn,
.well a.btn-primary,
.well span.btn,
.well span.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;                                  /* FORCE WEIß auf PRIMARY */
}

/* API RESPONSE CONTENT FIXES */
.response-info .btn,
.response-info .btn-primary,
.response-info .badge,
.response-info .badge-primary {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;                                  /* FORCE WEIß auf PRIMARY */
}

/* LIST VIEW BUTTONS IN API BROWSER */
.list-group-item .btn,
.list-group-item .btn-primary,
.list-group-item .badge,
.list-group-item .badge-primary {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;                                  /* FORCE WEIß auf PRIMARY */
}

/* PRE-FORMATTED CONTENT IN API RESPONSES */
pre .btn,
pre .btn-primary,
pre .badge,
pre .badge-primary,
code .btn,
code .btn-primary,
code .badge,
code .badge-primary {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;                                  /* FORCE WEIß auf PRIMARY */
}

/* INLINE ELEMENTS */
.inline .btn-primary,
.inline-btn-primary,
span[style*="primary"],
a[style*="primary"] {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;                                  /* FORCE WEIß auf PRIMARY */
}

/* GENERAL OVERRIDE FOR ANY ELEMENT WITH PRIMARY CLASS */
*[class*="primary"]:not(input):not(textarea) {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;                                  /* FORCE WEIß auf PRIMARY */
}

/* ULTIMATIVE OVERRIDE - ALLE ELEMENTE MIT PRIMARY BACKGROUND */
*[style*="background"] *[class*="primary"],
*[style*="primary"] {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;                                  /* FORCE WEIß */
}

/* FORCE ALL INLINE STYLES WITH PRIMARY */
[style*="btn-primary"] {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}

/* JSON RESPONSE CONTENT BUTTONS */
.content .btn,
.content .btn-primary,
.content .badge,
.content .badge-primary {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}

/* TABLE CONTENT BUTTONS */
table .btn,
table .btn-primary,
table .badge,
table .badge-primary,
td .btn,
td .btn-primary,
td .badge,
td .badge-primary {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}

/* FORCE ANY ELEMENT WITH BUTTON APPEARANCE */
*[class*="btn"][class*="primary"] {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border-color: var(--primary-color) !important;
}

/* EMERGENCY OVERRIDE - LAST RESORT */
body * {
    --bs-btn-color: #ffffff !important;
    --bs-btn-bg: var(--primary-color) !important;
    --bs-btn-border-color: var(--primary-color) !important;
}

/* SPECIFIC API BROWSER OVERRIDES */
.browsable-api .btn-primary,
.browsable-api .badge-primary {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border: 1px solid var(--primary-color) !important;
}

/* ABSOLUTE NUCLEAR OPTION - FORCE ALL PRIMARY ELEMENTS */
body .btn-primary,
body .badge-primary,
body [class*="btn-primary"],
body [class*="badge-primary"] {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border-color: var(--primary-color) !important;
}

/* FORCE ALL TEXT CONTENT WITH PRIMARY STYLING */
.highlight .s,
.highlight .s1,
.highlight .s2,
.highlight .nb,
.highlight .nf {
    color: inherit !important;
}

/* API RESPONSE CONTENT - JSON VALUES */
.rest-framework .prettyprint .str,
.rest-framework .prettyprint .string,
.rest-framework pre .str,
.rest-framework pre .string {
    color: #ffffff !important;
}

/* DJANGO REST FRAMEWORK SPECIFIC ELEMENTS */
.rest-framework .btn-primary {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    border-color: var(--primary-color) !important;
}

/* OVERRIDE ANY BOOTSTRAP THEME */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: #ffffff !important;
}

/* FORCE JSON CONTENT STYLING */
pre .highlight .s,
pre .highlight .s1,
pre .highlight .s2,
code .highlight .s,
code .highlight .s1,
code .highlight .s2 {
    color: #ffffff !important;
}

/* ULTIMATE OVERRIDE FOR API BROWSER */
.rest-framework *[class*="primary"],
.browsable-api *[class*="primary"] {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}

/* FORCE ALL LINKS - Neue Farbpalette */
a {
    color: var(--primary-color) !important;                    /* Primärfarbe (Blau) */
}

a:hover {
    color: var(--primary-hover) !important;                    /* Primärfarbe Hover */
}

/* FORCE NAVBAR AND HEADER COLORS - Neue Farbpalette */
.navbar,
.header,
.nav-link {
    background-color: var(--primary-color) !important;         /* Primärfarbe (Blau) */
    color: var(--text-on-primary) !important;                  /* WEIßER TEXT auf Primärfarbe */
}

/* FORCE ALL PRIMARY ELEMENTS - Neue Farbpalette */
*[class*="primary"]:not(.btn):not(.bg-primary) {
    color: var(--primary-color) !important;                    /* Primärfarbe als Text */
}

.bg-primary *,
.btn-primary *,
.navbar *,
.header * {
    color: var(--text-on-primary) !important;                  /* WEIßER TEXT auf Primärhintergrund */
}

/* FORCE SUCCESS ELEMENTS - Verwende Akzentfarbe */
.btn-success,
.bg-success,
.border-success,
*[class*="success"] {
    background-color: var(--success-color) !important;         /* Akzentfarbe (Grün) */
    border-color: var(--success-color) !important;
    color: var(--text-on-success) !important;                  /* DUNKLER TEXT auf hellem Grün */
}

.text-success {
    color: var(--success-color) !important;                    /* Grün als Textfarbe */
}

/* Force filter sidebar styling - mit neuer Farbpalette */
.container-fluid .row .col-lg-3 .filter-sidebar,
.container-fluid .row .col-md-4 .filter-sidebar,
.filter-sidebar {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: var(--background-color) !important;    /* Hintergrundfarbe */
    border-right: 1px solid var(--border-medium) !important;
    padding: 20px !important;
    position: sticky !important;
    top: 20px !important;
    height: calc(100vh - 40px) !important;
    overflow-y: auto !important;
    border-radius: 0 !important;
    margin: 0 !important;
    z-index: 100 !important;
}

/* Force filter section styling - mit neuer Farbpalette */
.filter-sidebar .filter-section,
.filter-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 25px !important;
    border-bottom: 1px solid var(--border-light) !important;
    padding-bottom: 15px !important;
}

.filter-sidebar .filter-section:last-child {
    border-bottom: none !important;
}

/* Force filter title styling - mit neuer Farbpalette */
.filter-sidebar .filter-title,
.filter-title {
    display: block !important;
    visibility: visible !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;       /* Sekundärfarbe für Titel */
    margin-bottom: 12px !important;
    font-size: 0.95rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Force filter option styling */
.filter-sidebar .filter-option,
.filter-option {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 0 !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    transition: background-color 0.2s !important;
    margin: 0 !important;
    border: none !important;
}

.filter-sidebar .filter-option:hover {
    background-color: var(--gray-200) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.filter-sidebar .filter-option input[type="checkbox"] {
    margin-right: 8px !important;
    accent-color: var(--primary-color) !important;
}

.filter-sidebar .filter-label {
    flex-grow: 1 !important;
    font-size: 0.9rem !important;
    color: var(--gray-700) !important;
    cursor: pointer !important;
    margin: 0 !important;
    font-weight: normal !important;
}

.filter-sidebar .filter-count {
    background: var(--gray-600) !important;
    color: var(--white) !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    min-width: 20px !important;
    text-align: center !important;
}

.filter-sidebar .filter-option.active .filter-count {
    background: var(--primary-color) !important;
}

/* Force search box styling */
.filter-sidebar .search-box {
    margin-bottom: 25px !important;
}

.filter-sidebar .search-box input,
.filter-sidebar .search-box .form-control {
    border-radius: 6px !important;
    border: 1px solid var(--gray-400) !important;
    padding: 10px 12px !important;
    font-size: 0.9rem !important;
    width: 100% !important;
    background-color: var(--white) !important;
    color: var(--gray-900) !important;
}

.filter-sidebar .search-box input:focus,
.filter-sidebar .search-box .form-control:focus {
    outline: none !important;
    border-color: var(--primary-color) !important;
    box-shadow: none;
}

/* Force clear filters button styling */
.filter-sidebar .clear-filters {
    background: var(--error-color) !important;
    color: var(--white) !important;
    border: none !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    font-size: 0.85rem !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
}

.filter-sidebar .clear-filters:hover {
    background: var(--error-hover) !important;
}

/* Force FID card styling */
.results-area .fid-card {
    border: 1px solid var(--gray-300) !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    background: var(--white) !important;
    transition: transform 0.1s !important;
}

.results-area .fid-card:hover {
    box-shadow: none;
    transform: translateY(-2px) !important;
}

.results-area .fid-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 15px !important;
}

.results-area .fid-card-title {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: var(--gray-900) !important;
    margin: 0 !important;
}

.results-area .fid-card-title a {
    color: inherit !important;
    text-decoration: none !important;
}

.results-area .fid-card-title a:hover {
    color: var(--primary-color) !important;
}

/* Force results area styling */
.results-area {
    padding: 20px !important;
}

.results-area .results-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid var(--gray-300) !important;
}

.results-area .results-count {
    color: var(--gray-600) !important;
    font-size: 0.9rem !important;
}

/* Force checkbox and input visibility in filters */
.filter-sidebar input[type="checkbox"],
.filter-sidebar input[type="radio"],
.filter-section input[type="checkbox"],
.filter-section input[type="radio"],
.form-check-input {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
    position: relative !important;
    z-index: 1000 !important;
    background-color: var(--white) !important;
    border: 1px solid var(--gray-400) !important;
}

/* Force all labels in filters to be visible */
.filter-sidebar label,
.filter-section label,
.filter-option label,
.form-check-label,
label {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    cursor: pointer !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: var(--text-dark) !important;
    z-index: 1000 !important;
    margin: 0 !important;
}

/* Remove any conflicting Bootstrap margins/padding */
.filter-sidebar * {
    box-sizing: border-box !important;
}

.filter-sidebar .mb-3 {
    margin-bottom: 1rem !important;
}

