/*
 * CSP – Responsive dialogues du Dashboard v0.1.0
 * CSS uniquement : aucun endpoint, événement, calcul ou écriture métier.
 */

/* Le groupe d’ajout des destinataires reste toujours exploitable dans le flex parent. */
#csp-security-modal #csp-notification-recipient-input,
#csp-security-modal #csp-notification-recipient-input + .csp-payment-input {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

#csp-security-modal .csp-payment-modal {
    box-sizing: border-box;
    min-width: 0;
}

#csp-security-modal #csp-notification-recipient-list,
#csp-security-modal #csp-notification-recipient-list > div {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

#csp-security-modal #csp-notification-recipient-list > div > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Le conteneur généré autour du champ bénéficie d’une largeur explicite. */
#csp-security-modal #csp-notification-recipient-input {
    display: block;
    width: 100% !important;
}

/* Le dashboard place l’input dans un wrapper flex sans largeur intrinsèque.
 * On cible la ligne réelle pour empêcher la contraction à quelques pixels. */
#csp-security-modal #csp-security-form > div:has(#csp-notification-recipient-input),
.csp-payment-modal > div:has(#csp-notification-recipient-input) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    width: 100% !important;
}

#csp-security-modal #csp-security-form > div:has(#csp-notification-recipient-input) > div,
.csp-payment-modal > div:has(#csp-notification-recipient-input) > div {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

#csp-security-modal #csp-security-form > div:has(#csp-notification-recipient-input) .csp-payment-form-group,
.csp-payment-modal > div:has(#csp-notification-recipient-input) .csp-payment-form-group {
    width: 100% !important;
    min-width: 0 !important;
}

/* Nouvelle réservation : ancrage robuste sur ses identifiants réels. */
#csp-page-content > div:has(#nb-name) {
    min-width: 0;
}

#csp-page-content > div:has(#nb-name) .csp-detail-panel,
#csp-page-content > div:has(#nb-name) .csp-detail-section,
#csp-page-content > div:has(#nb-name) .csp-label,
#csp-page-content > div:has(#nb-name) #nb-options,
#csp-page-content > div:has(#nb-name) #nb-slots,
#csp-page-content > div:has(#nb-name) #nb-preview {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

#csp-page-content > div:has(#nb-name) input,
#csp-page-content > div:has(#nb-name) select,
#csp-page-content > div:has(#nb-name) textarea,
#csp-page-content > div:has(#nb-name) button {
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 960px) {
    /* À partir du format tablette portrait, on évite la colonne latérale minimale de 310 px. */
    #csp-page-content > div:has(#nb-name) {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: .85rem !important;
    }

    #csp-page-content > div:has(#nb-name) > aside.csp-detail-panel {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #csp-page-content > div:has(#nb-name) [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 600px) {
    /* Notifications : une ligne verticale lisible, sans champ réduit ni bouton compressé. */
    #csp-security-modal .csp-payment-modal {
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        max-height: calc(100dvh - 1rem) !important;
        margin: .5rem !important;
        padding: 1.25rem .95rem !important;
        overflow-x: hidden !important;
    }

    #csp-security-modal #csp-notification-recipient-list {
        width: 100%;
        margin-bottom: .85rem !important;
    }

    /* La ligne générée par le dashboard devient une vraie grille mobile. */
    #csp-security-modal #csp-security-form > div:has(#csp-notification-recipient-add),
.csp-payment-modal > div:has(#csp-notification-recipient-add) {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: .5rem !important;
    }

    #csp-security-modal #csp-security-form > div:has(#csp-notification-recipient-add) > div,
.csp-payment-modal > div:has(#csp-notification-recipient-add) > div {
        width: 100% !important;
        min-width: 0 !important;
    }

    #csp-security-modal #csp-security-form > div:has(#csp-notification-recipient-add) .csp-payment-form-group,
.csp-payment-modal > div:has(#csp-notification-recipient-add) .csp-payment-form-group {
        margin-bottom: 0 !important;
    }

    #csp-security-modal #csp-notification-recipient-list > div {
        gap: .5rem !important;
        padding: .62rem .68rem !important;
    }

    #csp-security-modal #csp-notification-recipient-list > div > span:first-child {
        font-size: .72rem !important;
    }

    #csp-security-modal #csp-notification-recipient-input {
        width: 100% !important;
    }

    #csp-security-modal #csp-notification-recipient-add {
        width: 100% !important;
        min-height: 44px;
        margin: .15rem 0 0 !important;
    }

    #csp-security-modal #csp-security-form > div:last-child {
        flex-direction: column !important;
        gap: .55rem !important;
    }

    #csp-security-modal #csp-security-form > div:last-child > button {
        width: 100%;
        min-height: 44px;
    }

    /* Nouvelle réservation : respiration, une colonne et défilement de page naturel. */
    #csp-page-content > div:has(#nb-name) {
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100%;
        max-width: 100%;
        overflow: visible !important;
    }

    #csp-page-content > div:has(#nb-name) .csp-detail-panel {
        width: 100% !important;
        padding: 1.15rem .9rem !important;
        overflow: visible !important;
        border-radius: 14px;
    }

    #csp-page-content > div:has(#nb-name) .csp-detail-section {
        margin-bottom: 1.15rem;
        padding-bottom: .95rem;
    }

    #csp-page-content > div:has(#nb-name) .csp-detail-section > div[style*="grid-template-columns:1fr 1fr"] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: .8rem !important;
    }

    #csp-page-content > div:has(#nb-name) .csp-label {
        display: block;
        width: 100%;
        overflow-wrap: anywhere;
    }

    #csp-page-content > div:has(#nb-name) #nb-slots {
        grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
    }

    #csp-page-content > div:has(#nb-name) #nb-submit {
        min-height: 48px;
        white-space: normal;
    }
}

@media (min-width: 601px) {
    #csp-security-modal #csp-notification-recipient-add {
        flex: 0 0 auto;
        min-width: 88px;
    }
}