/* doc-project | stats/assets/css/stats-date-modal.css | Définit la modale premium responsive de sélection de date du module statistiques, ouverte par l’icône calendrier de la toolbar, avec champ date tactile, actions lisibles et fermeture confortable sur mobile sans débordement viewport. | Expose: .stats-date-modal* | Dépend de: stats/stats.php, stats/assets/js/stats-date-modal.js, variables CSS de stats/assets/css/stats.css | Impacte: UI statistiques, sélection de date en modale, lisibilité mobile/desktop, remplacement du bloc date visible par une interface compacte | Tables: aucune */

.stats-date-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    overflow-x: hidden;
    overflow-y: auto;
}

.stats-date-modal[hidden] {
    display: none;
}

.stats-date-modal__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top, rgba(56, 189, 248, 0.22), transparent 34rem),
        rgba(2, 6, 23, 0.78);
    backdrop-filter: blur(14px);
}

.stats-date-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 440px);
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 28px;
    color: var(--stats-text, #f8fafc);
    background:
        linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.96)),
        linear-gradient(90deg, rgba(56, 189, 248, 0.10), rgba(245, 158, 11, 0.08));
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.52);
}

.stats-date-modal__dialog::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, var(--stats-primary, #38bdf8), var(--stats-warning, #f59e0b));
}

.stats-date-modal__body {
    padding: 28px;
    text-align: left;
}

.stats-date-modal__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--stats-primary, #38bdf8);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.stats-date-modal__eyebrow::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--stats-success, #22c55e);
    box-shadow: 0 0 18px rgba(34, 197, 94, 0.7);
}

.stats-date-modal__title {
    margin: 0;
    font-size: clamp(1.45rem, 4vw, 2.1rem);
    font-weight: 950;
    letter-spacing: -0.06em;
}

.stats-date-modal__text {
    margin: 12px 0 0;
    color: var(--stats-muted-strong, #cbd5e1);
    line-height: 1.55;
}

.stats-date-modal__field {
    display: grid;
    gap: 8px;
    margin: 20px 0 0;
}

.stats-date-modal__field label {
    color: var(--stats-muted-strong, #cbd5e1);
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.stats-date-modal__input {
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 16px;
    color: var(--stats-text, #f8fafc);
    background: rgba(2, 6, 23, 0.54);
    box-shadow: 0 0 0 1px rgba(248, 250, 252, 0.04) inset;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 800;
    outline: none;
}

.stats-date-modal__input:focus {
    border-color: rgba(56, 189, 248, 0.78);
    box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.16);
}

.stats-date-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

.stats-date-modal__button {
    min-height: 46px;
    padding: 10px 18px;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 950;
}

.stats-date-modal__button--secondary {
    color: var(--stats-muted-strong, #cbd5e1);
    background: rgba(148, 163, 184, 0.14);
}

.stats-date-modal__button--primary {
    color: #082f49;
    background: linear-gradient(135deg, var(--stats-primary, #38bdf8), var(--stats-primary-strong, #0ea5e9));
    box-shadow: 0 16px 32px rgba(14, 165, 233, 0.22);
}

.stats-date-modal__button:hover {
    transform: translateY(-1px);
}

@media (max-width: 576px) {
    .stats-date-modal {
        align-items: flex-end;
        padding: 12px;
    }

    .stats-date-modal__dialog {
        width: 100%;
        border-radius: 24px;
    }

    .stats-date-modal__body {
        padding: 22px 18px;
    }

    .stats-date-modal__actions {
        flex-direction: column-reverse;
    }

    .stats-date-modal__button {
        width: 100%;
        min-height: 48px;
    }
}