/**
 * =================================================================
 * STYLES AMÉLIORÉS POUR LA PAGE DE CRÉATION DE DEMANDE
 * =================================================================
 */
 body {
    min-height: 100vh; /* Le body prend au minimum 100% de la hauteur de l'écran */
}

.new-request-page {
    padding-top: 2rem;
    padding-bottom: 3rem;
    max-width: 1600px !important;
}

.new-request-page .request-category {
    margin-bottom: 3rem;
}

.new-request-page .category-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem;
    background-color: #ffffff;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    margin-bottom: 1.5rem;
}

.new-request-page .category-icon {
    font-size: 1.75rem;
    color: var(--bs-primary);
}

.new-request-page .category-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.new-request-page .category-subtitle {
    font-size: 0.9rem;
    color: #6c757d;
    margin: 0;
    margin-top: 0.25rem;
}

/*
 * ===============================================================
 * Style pour les Cartes d'Information Modernes
 * ===============================================================
 */
.guidance-cards {
    margin-bottom: 2.5rem;
}

.info-card {
    background-color: #ffffff;
    padding: 1rem;
    border-radius: var(--bs-border-radius);
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    gap: 1rem; /* Espace entre l'icône et le texte */
    height: 100%;
}

/* La bordure latérale colorée */
.info-card-info {
    border-left: 5px solid var(--bs-info);
}
.info-card-warning {
    border-left: 5px solid var(--bs-warning);
}

/* L'icône */
.info-card i {
    font-size: 1.5rem;
    margin-top: 0.1rem; /* Petit ajustement pour l'alignement vertical */
}
.info-card-info i {
    color: var(--bs-info);
}
.info-card-warning i {
    color: var(--bs-warning);
}

/* Le texte */
.info-card strong {
    font-weight: 600;
}
.info-card p {
    font-size: 0.875rem;
    color: #6c757d;
}
.info-card .alert-link {
    font-weight: 600;
    text-decoration: none;
}

/* On retire le fond du header de catégorie pour un look plus intégré */
.new-request-page .category-header {
    background-color: transparent;
    border: none;
    padding: 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 1rem;
}

/* On rend le titre de la catégorie plus imposant */
.new-request-page .category-title {
    font-size: 1.5rem;
}

/* On donne plus de "vie" à la carte au survol */
.request-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 10px 30px rgba(var(--bs-primary-rgb), 0.15); /* Ombre plus prononcée */
    border-color: rgba(var(--bs-primary-rgb), 0.4);
}

/* On fait réagir la flèche plus distinctement */
.request-card .card-arrow {
    opacity: 0.5; /* Flèche discrète par défaut */
    transition: all 0.3s ease;
}
.request-card:hover .card-arrow {
    opacity: 1;
    transform: translateX(5px);
    color: var(--bs-primary);
}

/*
 * ===============================================================
 * En-tête de Page Épuré et Moderne
 * ===============================================================
 */

/* Conteneur pour l'en-tête de page */
.page-header-section {
    padding: 2.5rem 0; /* Espace vertical généreux */
    margin-bottom: 2rem; /* Espace avant le début du contenu */
    border-bottom: 1px solid var(--bs-border-color); 
    max-width: 1600px;
    margin: auto;/* Ligne de séparation subtile */
}

/* Titre principal de la page */
.page-header-section h1 {
    font-size: 2rem; /* Plus grand pour plus d'impact */
    font-weight: 700;
    margin: 0;
}

/* Sous-titre descriptif */
.page-header-section .lead {
    font-size: 1.1rem;
    margin-top: 0.5rem;
    margin-bottom: 0;
}


/*
 * ===============================================================
 * Style pour la liste des tickets en cours dans le formulaire
 * ===============================================================
 */
.current-tickets-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.current-tickets-list {
    list-style: none;
    padding-left: 0;
    font-size: 0.7rem;
}

.ticket-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
}

.ticket-item-status {
    flex-shrink: 0;
}
.ticket-item-status .status-label.small {
    padding: 2px 8px;
    font-size: 10px;
}

.ticket-item-subject {
    flex-grow: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ticket-item-subject a {
    text-decoration: none;
    font-weight: 500;
    color: var(--bs-primary);
}

.ticket-item-date {
    flex-shrink: 0;
    color: #6c757d;
    font-style: italic;
}

/* Conteneur principal qui cache le select original */
.custom-multi-select-wrapper {
    position: relative;
}

/* Le select original : on le rend invisible mais focusable */
.custom-multi-select-source {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Il prend toute la place du conteneur */
    opacity: 0; /* Complètement transparent */
    pointer-events: none; /* Ne capture pas les clics de la souris */
    z-index: 1; /* S'assure qu'il n'interfère pas (même si transparent) */
}

/* Zone où les tags sélectionnés apparaissent */
.custom-multi-select-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem;
    background-color: var(--bs-tertiary-bg);
    border: 2px solid var(--bs-tertiary-bg);
    border-radius: var(--bs-border-radius);
    margin-bottom: 0.75rem;
    min-height: 50px;
}

/* Style d'un tag individuel */
.custom-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
    border-radius: var(--bs-border-radius-pill);
}

/* La croix pour supprimer un tag */
.custom-tag .remove-tag {
    margin-left: 0.75rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}
.custom-tag .remove-tag:hover {
    opacity: 1;
}

/* Style du menu déroulant pour ajouter des items */
.custom-multi-select-dropdown .dropdown-menu {
    max-height: 250px;
    overflow-y: auto;
    width: 100%;
}

.mobile-header-controls {
    display: none; /* Caché par défaut sur PC */
    padding: 10px 15px;
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: 0;
    z-index: 1050; /* Au-dessus du contenu */
}

/* ==========================================================================
   CSS MOBILE UNIFIÉ (OFFCANVAS + FILTRES + TABLEAU)
   ========================================================================== */

@media screen and (max-width: 768px) {

    /* --- 1. OFFCANVAS (FORMULAIRE) --- */
    
    /* Force l'Offcanvas à prendre tout l'écran */
    #formOffcanvas, 
    #ticketOffcanvas {
        width: 100% !important;
        max-width: 100vw !important;
        border-left: none !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100% !important;
    }

    /* Corps du formulaire : Scrollable et padding adapté */
    #formOffcanvasBody,
    #offcanvasTicketBody {
        display: block !important;
        padding: 15px !important;
        overflow-y: auto !important; /* Scroll vertical */
        height: calc(100% - 60px) !important; /* Laisse de la place pour le header */
        -webkit-overflow-scrolling: touch;
    }

    /* Grille interne (Row) : Une seule colonne */
    #formOffcanvasBody > .row,
    #offcanvasTicketBody > .row {
        margin: 0 !important;
        width: 100% !important;
        display: block !important;
    }
    
    .col-lg-9, .col-lg-3, .offcanvas-main-content, .offcanvas-sidebar {
        width: 100% !important;
        display: block !important;
        padding: 0 !important;
        border: none !important;
    }

    /* Empêche le zoom sur iPhone (Input size 16px) */
    #new-request-form .form-control,
    #new-request-form .form-select,
    .select2-container--bootstrap-5 .select2-selection {
        font-size: 16px !important; 
    }

    /* Safe Area en bas pour le bouton d'envoi */
    #offcanvas-reply-container,
    .btn-submit-reply {
        padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
        margin-bottom: 20px !important;
    }

    /* Cache le widget Zendesk (Chat) quand le formulaire est ouvert */
    .offcanvas.show ~ iframe#launcher {
        display: none !important; 
    }


    /* --- 2. HEADER DU CANVA (BOUTON RETOUR) --- */
    
    .mobile-header-controls {
        display: flex !important; /* Affiche la barre blanche */
        align-items: center;
        justify-content: flex-start;
        height: 50px;
        padding: 0 15px;
        border-bottom: 1px solid #eee;
        background: #fff;
    }

    .btn-mobile-back {
        background: transparent;
        border: none;
        font-size: 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
        color: #333;
    }


    /* --- 3. FILTRES (BOTTOM SHEET) --- */
    
    /* Transforme les menus déroulants en panneaux bas */
    .filter-dropdown-menu,
    #toolbar-left .dropdown .dropdown-menu {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: 60vh !important;
        z-index: 2147483647 !important;
        margin: 0 !important;
        padding: 20px 0 !important;
        
        border-radius: 20px 20px 0 0 !important;
        border: none !important;
        background-color: #fff !important;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.3) !important;
        
        transform: none !important; /* Annule le positionnement JS */
        
        overflow-y: auto !important;
        display: none; /* Caché par défaut */
    }

    /* Affiche le menu quand la classe .show est présente */
    .filter-dropdown-menu.show,
    #toolbar-left .dropdown-menu.show {
        display: block !important;
        animation: slideUp 0.3s ease-out;
    }

    @keyframes slideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    /* Barre grise en haut du panneau pour "tirer" */
    .filter-dropdown-menu::before,
    #toolbar-left .dropdown-menu::before {
        content: '';
        display: block;
        width: 40px;
        height: 5px;
        background-color: #e0e0e0;
        border-radius: 3px;
        margin: -10px auto 15px auto;
    }

    /* Items du menu plus gros pour le doigt */
    .filter-dropdown-menu .dropdown-item,
    #toolbar-left .dropdown-item {
        padding: 15px 20px !important;
        font-size: 16px !important;
        border-bottom: 1px solid #f8f9fa;
    }
}