/**
 * Serciloj - Koloroj (couleurs et apparence visuelle)
 * Couleurs : backgrounds, bordures, ombres, couleurs de texte
 */

/* ==========================================================================
   Couleurs des composants de base Serciloj
   ========================================================================== */

/* Bouton de base - couleur par défaut (primary) */
.serciloj-adaptative-btn-primary {
    background-color: var(--osun-primary);
    color: #fff;
    border-color: hsl(
        var(--osun-primary-h),
        var(--osun-primary-s),
        calc(var(--osun-primary-l) - 20%)
    );
}

.serciloj-adaptative-btn-primary:hover {
    filter: brightness(0.9);
}

/* Bouton primary actif (filtres actifs) */
.serciloj-btn-primary {
    background-color: var(--osun-primary);
    color: #fff;
    border-color: var(--osun-primary);
}

/* Input de base - couleurs */
.serciloj-form-control {
    color: var(--osun-text);
    background-color: var(--osun-surface);
    border-color: var(--osun-border);
}

.serciloj-form-control:focus {
    border-color: var(--osun-primary);
    box-shadow: 0 0 0 0.25rem hsl(
        var(--osun-primary-h),
        var(--osun-primary-s),
        var(--osun-primary-l),
        0.25
    );
}

/* Select de base - couleurs */
.serciloj-form-select {
    color: var(--osun-text);
    background-color: var(--osun-surface);
    border-color: var(--osun-border);
}

.serciloj-form-select:focus {
    border-color: var(--osun-primary);
    box-shadow: 0 0 0 0.25rem hsl(
        var(--osun-primary-h),
        var(--osun-primary-s),
        var(--osun-primary-l),
        0.25
    );
}

/* ==========================================================================
   Conteneur de recherche (.search-tools-form) - couleurs
   ========================================================================== */

/* Conteneur principal */
.search-tools-form {
    background: linear-gradient(to bottom, var(--osun-bg-alt), var(--osun-bg));
    border: 1px solid var(--osun-border);
    box-shadow: var(--osun-shadow-sm);
    border-bottom: none;
    border-bottom-left-radius: unset;
    border-bottom-right-radius: unset;
}

/* Barre de recherche avec icône intégrée */
.search-tools-form .input-group-text {
    background-color: var(--osun-surface);
}

.search-tools-form .input-group .form-control:focus {
    border-color: var(--osun-border);
    box-shadow: none;
}

.search-tools-form .input-group:focus-within .input-group-text {
    border-color: var(--osun-primary);
}

.search-tools-form .input-group:focus-within .form-control {
    border-color: var(--osun-primary);
}

/* Panel de filtres */
.serciloj-search-filters .bg-white {
    background-color: var(--osun-surface) !important;
    border: 1px solid var(--osun-border);
    box-shadow: var(--osun-shadow-md);
}

.serciloj-search-filters h6 {
    color: var(--osun-text);
}

.serciloj-search-filters .border-bottom {
    border-bottom: 1px solid var(--osun-border) !important;
}

/* Labels des filtres */
.serciloj-search-filters label {
    color: var(--osun-text);
}

/* Compatibilité avec ID */
#searchFilters .bg-white {
    background-color: var(--osun-surface) !important;
    border: 1px solid var(--osun-border);
    box-shadow: var(--osun-shadow-md);
}

#searchFilters h6 {
    color: var(--osun-text);
}

#searchFilters .border-bottom {
    border-bottom: 1px solid var(--osun-border) !important;
}

#searchFilters label {
    color: var(--osun-text);
}

/* Labels avec icônes (tri et limite) */
.search-tools-form label {
    color: var(--osun-text-muted);
}

/* Bouton de réinitialisation dans les filtres */
.serciloj-search-filters .btn-outline-secondary,
#searchFilters .btn-outline-secondary {
    border-color: var(--osun-border);
}

.serciloj-search-filters .btn-outline-secondary:hover,
#searchFilters .btn-outline-secondary:hover {
    background-color: var(--osun-bg-alt);
    border-color: var(--osun-border);
    color: var(--osun-white);
}

/* Badge de compteur de filtres actifs */
.search-tools-form .btn-primary .badge.bg-light {
    background-color: rgba(255, 255, 255, 0.9) !important;
    color: var(--osun-primary) !important;
}

/* Hover states */
.search-tools-form .btn-outline-secondary:hover {
    background-color: var(--osun-bg-alt);
    border-color: var(--osun-border);
}

/* Focus states pour accessibilité */
.search-tools-form .form-control:focus,
.search-tools-form .form-select:focus,
.search-tools-form .btn:focus {
    box-shadow: 0 0 0 0.25rem hsl(
        var(--osun-primary-h),
        var(--osun-primary-s),
        var(--osun-primary-l),
        0.25
    );
}

/* Message de filtres actifs */
.search-tools-form .alert.alert-info.d-flex {
    background-color: var(--osun-bg-alt);
    border-color: var(--osun-border);
    color: var(--osun-text);
}

/* Bouton outline dans search tools */
.search-tools-form .serciloj-btn.btn-outline-secondary {
    color: var(--osun-text);
    border-color: var(--osun-border);
    background-color: transparent;
}

.search-tools-form .serciloj-btn.btn-outline-secondary:hover {
    background-color: var(--osun-bg-alt);
    border-color: var(--osun-border);
}

.globalFilterLabel {
    background-color: var(--osun-text-muted);
}