/**
 * Custom CSS - Ovinode Dashboard
 * Styles personnalisés pour le back-office
 */

/* ==============================================
   Charte graphique Ovinode
   - Bleu foncé (primaire) : #243a73
   - Rouge (accent/danger) : #f24c4c
   ============================================== */

/* Variables personnalisées Ovinode */
:root {
    --ovinode-primary: #243a73;
    --ovinode-primary-rgb: 36, 58, 115;
    --ovinode-accent: #f24c4c;
    --ovinode-accent-rgb: 242, 76, 76;
    
    /* Surcharge des couleurs Bootstrap pour Vuexy */
    --bs-primary: #243a73 !important;
    --bs-primary-rgb: 36, 58, 115 !important;
    --bs-danger: #f24c4c !important;
    --bs-danger-rgb: 242, 76, 76 !important;
    
    /* Couleurs dérivées pour le thème */
    --bs-primary-hover: #1a2b56;
    --bs-primary-active: #152247;
}

/* Surcharge pour le thème sombre */
[data-bs-theme="dark"] {
    --bs-primary: #3d5a9e !important;
    --bs-primary-rgb: 61, 90, 158 !important;
}

/* Liens et éléments interactifs */
a {
    color: var(--ovinode-primary);
}

a:hover {
    color: var(--bs-primary-hover);
}

/* Boutons primaires - assurer la bonne couleur */
.btn-primary {
    background-color: var(--ovinode-primary) !important;
    border-color: var(--ovinode-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--bs-primary-hover) !important;
    border-color: var(--bs-primary-hover) !important;
}

.btn-primary:active {
    background-color: var(--bs-primary-active) !important;
    border-color: var(--bs-primary-active) !important;
}

/* Boutons outline primary */
.btn-outline-primary {
    color: var(--ovinode-primary) !important;
    border-color: var(--ovinode-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--ovinode-primary) !important;
    border-color: var(--ovinode-primary) !important;
    color: #fff !important;
}

/* Boutons danger avec couleur Ovinode */
.btn-danger {
    background-color: var(--ovinode-accent) !important;
    border-color: var(--ovinode-accent) !important;
}

/* Badge et label primary */
.badge.bg-primary,
.bg-primary {
    background-color: var(--ovinode-primary) !important;
}

.bg-label-primary {
    background-color: rgba(var(--ovinode-primary-rgb), 0.16) !important;
    color: var(--ovinode-primary) !important;
}

/* Text primary */
.text-primary {
    color: var(--ovinode-primary) !important;
}

/* Form controls focus */
.form-control:focus,
.form-select:focus {
    border-color: var(--ovinode-primary);
    box-shadow: 0 0.125rem 0.375rem 0 rgba(var(--ovinode-primary-rgb), 0.3);
}

/* Checkbox et radio checked */
.form-check-input:checked {
    background-color: var(--ovinode-primary);
    border-color: var(--ovinode-primary);
}

/* Switch checked */
.form-switch .form-check-input:checked {
    background-color: var(--ovinode-primary);
}

/* Nav pills active */
.nav-pills .nav-link.active {
    background-color: var(--ovinode-primary) !important;
}

/* Menu sidebar active */
.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
    background: linear-gradient(90deg, var(--ovinode-primary) 0%, rgba(var(--ovinode-primary-rgb), 0.7) 100%) !important;
}

/* Pagination active */
.pagination .page-item.active .page-link {
    background-color: var(--ovinode-primary);
    border-color: var(--ovinode-primary);
}

/* Progress bar */
.progress-bar {
    background-color: var(--ovinode-primary);
}

/* ==============================================
   Logo Ovinode - Sidebar Toggle
   ============================================== */

/* Par défaut : afficher le logo complet, masquer l'icône */
.app-brand-logo-full {
    display: block;
}

.app-brand-logo-icon {
    display: none;
}

/* Quand le menu est collapsed : afficher l'icône, masquer le complet */
.layout-menu-collapsed .app-brand-logo-full,
.layout-menu-hover.layout-menu-collapsed .layout-menu:not(:hover) .app-brand-logo-full {
    display: none;
}

.layout-menu-collapsed .app-brand-logo-icon,
.layout-menu-hover.layout-menu-collapsed .layout-menu:not(:hover) .app-brand-logo-icon {
    display: block;
}

/* Quand on survole le menu collapsed : réafficher le logo complet */
.layout-menu-hover.layout-menu-collapsed .layout-menu:hover .app-brand-logo-full {
    display: block;
}

.layout-menu-hover.layout-menu-collapsed .layout-menu:hover .app-brand-logo-icon {
    display: none;
}

/* Centrer le logo icône quand collapsed */
.layout-menu-collapsed .app-brand-link {
    justify-content: center;
}

.layout-menu-hover.layout-menu-collapsed .layout-menu:hover .app-brand-link {
    justify-content: flex-start;
}

/* Masquer le bouton toggle quand collapsed (le logo est cliquable) */
.layout-menu-collapsed .layout-menu:not(:hover) .layout-menu-toggle {
    display: none;
}

/* Réafficher le bouton toggle au survol du menu collapsed */
.layout-menu-hover.layout-menu-collapsed .layout-menu:hover .layout-menu-toggle {
    display: flex;
}

/* ==============================================
   Styles généraux existants
   ============================================== */

/* Ajustements pour Django messages */
.django-message-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 9999;
    max-width: 400px;
}

/* Style pour les formulaires Django */
.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: #ea5455;
}

.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: #28c76f;
}

/* Ajustements sidebar active */
.menu-item.active > .menu-link {
    font-weight: 600;
}

/* Loader personnalisé */
.ovinode-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Styles pour les badges de statut */
.badge-published {
    background-color: #28c76f;
}

.badge-draft {
    background-color: #ff9f43;
}

.badge-pending {
    background-color: #00cfe8;
}

/* Animation fade pour les messages */
.fade-out {
    animation: fadeOut 0.5s ease-out forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100px);
    }
}

/* ==============================================
   Sidebar sticky pour les formulaires
   Utilisé dans les colonnes latérales (col-lg-4)
   ============================================== */
.sticky-sidebar {
    position: sticky;
    top: 80px;
}