/* =============================================================================
   saisie_fix.css — Corrections pour la page de saisie
   Placement : assets/saisie_fix.css
   ============================================================================= */

/* Texte visible dans les dropdowns sur thème sombre */
.saisie-dropdown .Select-value-label,
.saisie-dropdown .Select-placeholder,
.saisie-dropdown .Select-input > input,
.saisie-dropdown .Select-option {
    color: var(--text-primary, #e2e8f0) !important;
}
.saisie-dropdown .Select-control {
    background-color: var(--input-bg, #151e32) !important;
    border-color: var(--border-color, #2d3748) !important;
}
.saisie-dropdown .Select-menu-outer {
    background-color: var(--bg-card, #151e32) !important;
    z-index: 9999 !important;
}
.saisie-dropdown .Select-option {
    background-color: var(--bg-card, #151e32) !important;
}
.saisie-dropdown .Select-option.is-focused {
    background-color: var(--accent, #3b82f6) !important;
    color: white !important;
}

/* Cards de séquence — overflow visible pour les menus */
.saisie-seq-card {
    overflow: visible !important;
    position: relative;
}
.saisie-seq-card:nth-child(1)  { z-index: 80; }
.saisie-seq-card:nth-child(2)  { z-index: 70; }
.saisie-seq-card:nth-child(3)  { z-index: 60; }
.saisie-seq-card:nth-child(4)  { z-index: 50; }
.saisie-seq-card:nth-child(5)  { z-index: 40; }
.saisie-seq-card:nth-child(6)  { z-index: 30; }
.saisie-seq-card:nth-child(7)  { z-index: 20; }
.saisie-seq-card:nth-child(8)  { z-index: 10; }

.saisie-seq-card > div {
    overflow: visible !important;
}
.saisie-critere-row {
    position: relative;
}

/* Menus déroulants Dash react-select */
div[class*="css-"][class*="-menu"] {
    z-index: 9999 !important;
}

/* =============================================================================
   Animations et effets pour l'espace SAISIE
   ============================================================================= */

/* Animation bounce pour les icônes */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Boutons de navigation sidebar */
.sidebar-nav-btn:hover:not([style*="var(--accent)"]) {
    background-color: rgba(102, 126, 234, 0.08) !important;
    transform: translateX(4px);
}

/* Bouton retour sidebar */
.sidebar-return-btn:hover {
    background-color: rgba(102, 126, 234, 0.05) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

/* Cards avec animation hover */
.card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15) !important;
}

/* Bouton d'action principal */
.action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important;
}

/* Dropdowns avec transition */
.saisie-dropdown {
    transition: all 0.2s ease;
}

.saisie-dropdown:hover {
    border-color: var(--accent) !important;
}

/* Sous-menus avec effet déroulant */
.submenu-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.submenu-container.open {
    max-height: 200px;
}

.sidebar-submenu-btn {
    transition: all 0.2s ease;
    position: relative;
}

.sidebar-submenu-btn::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 50%;
    width: 3px;
    height: 0;
    background: var(--accent);
    transition: height 0.2s ease;
    transform: translateY(-50%);
}

.sidebar-submenu-btn:hover::before {
    height: 60%;
}

.sidebar-nav-btn .chevron {
    transition: transform 0.3s ease;
}

.sidebar-nav-btn.active .chevron {
    transform: rotate(180deg);
}

/* =============================================================================
   Responsive Design - Mobile First
   ============================================================================= */

/* Ajustements pour tablettes et petits écrans */
@media (max-width: 1024px) {
    /* Masquer la sidebar sur tablette */
    #saisie-sidebar-container {
        display: none !important;
    }

    /* Contenu principal prend toute la largeur */
    .main-content {
        padding: 15px !important;
    }
}

/* Classes pour grilles responsives */
.saisie-info-grid {
    display: grid;
    grid-template-columns: 2fr 2fr 1.5fr 1.5fr 1.5fr 1.5fr;
    gap: 16px;
}

.saisie-critere-grid {
    display: grid;
    grid-template-columns: 60px 3fr 110px 2fr;
    gap: 12px;
    align-items: center;
}

/* Ajustements pour smartphones */
@media (max-width: 768px) {
    /* Conteneur principal avec padding réduit */
    body {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Zone de saisie avec padding optimisé */
    #saisie-form-wrapper,
    #panel-agence-existante,
    #panel-agence-nouvelle {
        padding: 10px !important;
    }

    /* Inputs et dropdowns plus grands pour touch */
    input[type="text"],
    input[type="number"],
    textarea,
    .saisie-dropdown,
    .Select-control {
        font-size: 16px !important; /* Évite le zoom automatique sur iOS */
        padding: 12px 14px !important;
        min-height: 44px !important; /* Taille minimale recommandée pour touch */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Grilles responsive en colonne unique */
    .saisie-info-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .saisie-critere-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    /* Tous les éléments dans une row de critère en pleine largeur */
    .saisie-critere-row > * {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Assurer que les Select et Input dans critères prennent toute la largeur */
    .saisie-critere-row .Select,
    .saisie-critere-row .dash-dropdown,
    .saisie-critere-row input,
    .saisie-critere-row textarea {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Cards avec moins de padding */
    .card {
        padding: 12px !important;
        margin-bottom: 12px !important;
    }

    .card:hover {
        transform: none !important; /* Pas d'animation hover sur mobile */
    }

    /* Header de séquence plus compact */
    .saisie-seq-card > div:first-child {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
        padding: 12px !important;
    }

    .saisie-seq-card > div:first-child > div {
        width: 100% !important;
    }

    /* Critères en colonne sur mobile */
    .saisie-critere-row {
        display: flex !important;
        flex-direction: column !important;
        padding: 10px !important;
        gap: 10px !important;
    }

    .saisie-critere-row > span:first-child {
        text-align: left !important;
        width: 100% !important;
    }

    /* Footer en colonne sur mobile */
    .saisie-footer-content {
        flex-direction: column !important;
        gap: 16px !important;
        align-items: center !important;
    }

    .saisie-footer-content > div {
        width: 100% !important;
    }

    .saisie-footer-stats {
        flex-direction: column !important;
        gap: 16px !important;
        width: 100% !important;
    }

    #saisie-footer button {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Masquer les séparateurs verticaux sur mobile */
    .saisie-separator {
        display: none !important;
    }

    /* Dropdowns plus accessibles sur mobile */
    .saisie-dropdown,
    .Select-menu-outer {
        font-size: 16px !important;
    }

    /* Options de dropdown bien visibles */
    .Select-option {
        padding: 14px 12px !important;
        font-size: 16px !important;
    }

    /* Score circulaire centré sur mobile */
    .saisie-footer-content > div:first-child {
        justify-content: center !important;
    }

    /* Score circulaire plus petit sur mobile */
    [style*="conic-gradient"] {
        width: 70px !important;
        height: 70px !important;
    }

    /* Boutons plus grands pour touch */
    button {
        min-height: 44px !important;
        padding: 12px 20px !important;
        font-size: 0.9rem !important;
    }

    /* Labels plus visibles */
    label {
        font-size: 0.8rem !important;
        font-weight: 600 !important;
    }
}

/* Optimisations pour très petits écrans (< 375px) */
@media (max-width: 375px) {
    /* Réduction supplémentaire des espacements */
    .card {
        padding: 10px !important;
    }

    /* Textes plus petits si nécessaire */
    body {
        font-size: 14px !important;
    }

    /* Inputs full width */
    input,
    textarea,
    select,
    .saisie-dropdown {
        width: 100% !important;
    }
}