/**
 * amn-pwa.css — Agence Maritale du Niger v2.9.1
 *
 * STYLES PWA — Couche réseau applicative (offline, qualité réseau, nav mobile).
 *
 * CORRECTIFS v2.9.1 (double-check audit)
 * ─────────────────────────────────────────────────────────────────────
 * [FIX-B7]  body.amn-net-2g::after — correction du positionnement desktop.
 *           En v2.9.0, --amn-nav-height (60px) était utilisé dans le calcul
 *           bottom même sur desktop où la nav-bottom n'existe pas.
 *           Solution : --amn-nav-height redéfini à 0px dans le scope desktop
 *           via :root override dans @media (min-width: 769px).
 *           Le badge 2G est ainsi positionné à 8px du bas sur desktop,
 *           et à 68px (60px nav + 8px) sur mobile.
 *
 * MOBILE-FIRST : règles de base pour mobile, overrides dans @media (min-width:769px).
 */


/* ═══════════════════════════════════════════════════════════════════════
 * VARIABLES LOCALES
 * ═══════════════════════════════════════════════════════════════════════ */
:root {
    --amn-offline-bg:        #8e44ad;
    --amn-reconnected-bg:    #27ae60;
    --amn-net-slow-bg:       #e67e22;
    --amn-nav-height:        60px;   /* Hauteur de la bottom nav sur mobile */
    --amn-nav-bg:            var(--im-blanc, #fff);
    --amn-nav-color:         #888;
    --amn-nav-active-color:  var(--im-rose, #E91E63);
    --amn-nav-z:             9999;
    --amn-indicator-z:       10002;
    --amn-badge-size:        18px;
}

/*
 * [FIX-B7] Sur desktop, la bottom nav n'existe pas → --amn-nav-height = 0.
 * Tous les calculs utilisant cette variable (::after, margin-bottom, etc.)
 * donnent ainsi le bon résultat sans media query supplémentaire.
 */
@media (min-width: 769px) {
    :root {
        --amn-nav-height: 0px;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
 * INDICATEUR HORS-LIGNE ENRICHI
 * ═══════════════════════════════════════════════════════════════════════ */
#amn-offline-indicator {
    /* Texte seul — sans fond, sans banderole, sans bordure */
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%) translateY(-120%);
    width: auto;
    max-width: 90%;
    background: transparent;
    color: var(--amn-offline-bg, #8e44ad);
    padding: 0;
    margin: 0;
    text-align: center;
    z-index: var(--amn-indicator-z);
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
    border: none;
    pointer-events: none;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Visible hors-ligne */
#amn-offline-indicator.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Reconnecté — texte vert bref avant disparition */
#amn-offline-indicator.is-reconnected {
    color: var(--amn-reconnected-bg, #27ae60);
}

.amn-offline-counter {
    opacity: 0.75;
    font-size: 12px;
    margin-left: 4px;
}


/* ═══════════════════════════════════════════════════════════════════════
 * INDICATEUR DE QUALITÉ RÉSEAU
 * ═══════════════════════════════════════════════════════════════════════ */
#amn-network-quality-indicator {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--amn-net-slow-bg);
    color: #fff;
    padding: 6px 12px;
    text-align: center;
    z-index: var(--amn-indicator-z);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    pointer-events: none;
}

#amn-network-quality-indicator.is-visible {
    transform: translateY(0);
}


/* ═══════════════════════════════════════════════════════════════════════
 * ADAPTATION VISUELLE PAR QUALITÉ RÉSEAU (.amn-net-2g / 3g / 4g / savedata)
 * ═══════════════════════════════════════════════════════════════════════ */

/* Connexion lente (2G ou saveData) → désactiver les animations non essentielles */
body.amn-net-2g *,
body.amn-net-savedata * {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
}

/*
 * [FIX-2G-6] Spinner et indicateurs de chargement TOUJOURS visibles sur 2G.
 * La règle ci-dessus coupe les transitions, ce qui cachait visuellement
 * le spinner (opacity fade désactivé → il restait display:none après .show()).
 * On force display:block et opacity:1 pour tous les spinners sur 2G.
 */
body.amn-net-2g .im-spinner,
body.amn-net-savedata .im-spinner {
    display:    block   !important;
    opacity:    1       !important;
    visibility: visible !important;
}

/* Message "réseau lent" — style discret */
.amn-slow-network-msg {
    color:       #7f5c00;
    background:  #fff8e1;
    border-left: 3px solid #f39c12;
    padding:     8px 12px;
    border-radius: 4px;
    font-size:   13px;
    margin:      0;
}

/* Désactivation des backgrounds complexes */
body.amn-net-2g .im-card-bg-gradient,
body.amn-net-savedata .im-card-bg-gradient {
    background-image: none !important;
}

/*
 * Badge indicateur 2G — coin bas droit.
 *
 * [FIX-B7] bottom: calc(var(--amn-nav-height) + 8px)
 *   Mobile  : calc(60px + 8px) = 68px → au-dessus de la bottom nav ✓
 *   Desktop : calc(0px  + 8px) = 8px  → collé au bas de l'écran  ✓
 *   Plus besoin de @media override séparé pour le repositionner.
 */
body.amn-net-2g::after,
body.amn-net-savedata::after {
    content: '⚡ 2G';
    position: fixed;
    bottom: calc(var(--amn-nav-height) + 8px);
    right: 8px;
    background: rgba(230, 126, 34, 0.85);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    z-index: calc(var(--amn-indicator-z) - 1);
    pointer-events: none;
    letter-spacing: 0.5px;
}


/* ═══════════════════════════════════════════════════════════════════════
 * BADGE FILE D'ATTENTE OFFLINE (#amn-sync-badge)
 *
 * position: fixed en bas à gauche au-dessus de la nav.
 * La v2.9.0 utilisait position:absolute sur un parent absent → badge perdu.
 * v2.9.1 : position:fixed autonome, visible partout sans parent relatif.
 * ═══════════════════════════════════════════════════════════════════════ */
#amn-sync-badge {
    display: none;
    position: fixed;
    bottom: calc(var(--amn-nav-height) + 10px); /* [FIX-B7] 0px desktop, 70px mobile */
    left: 12px;
    min-width: var(--amn-badge-size);
    height: var(--amn-badge-size);
    background: var(--im-rose, #E91E63);
    color: #fff;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 700;
    line-height: var(--amn-badge-size);
    text-align: center;
    padding: 0 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    animation: amnBadgePulse 2s ease-in-out infinite;
    pointer-events: none;
    z-index: calc(var(--amn-nav-z) + 1);
}

#amn-sync-badge.is-visible {
    display: inline-block;
}

@keyframes amnBadgePulse {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%       { transform: scale(1.15); opacity: 0.85; }
}


/* ═══════════════════════════════════════════════════════════════════════
 * BARRE DE NAVIGATION INFÉRIEURE MOBILE — Mobile-First
 * ═══════════════════════════════════════════════════════════════════════ */

/* Desktop : cachée */
.amn-bottom-nav {
    display: none;
}

/* ─── Mobile (≤ 768px) ─────────────────────────────────────────────── */
@media (max-width: 768px) {

    body {
        padding-bottom: var(--amn-nav-height);
    }

    .amn-bottom-nav {
        display:         flex;
        position:        fixed;
        bottom:          0;
        left:            0;
        width:           100%;
        height:          var(--amn-nav-height);
        background:      var(--amn-nav-bg);
        box-shadow:      0 -3px 12px rgba(0, 0, 0, 0.08);
        justify-content: space-around;
        align-items:     center;
        z-index:         var(--amn-nav-z);
        border-top:      1px solid #eee;
    }

    .amn-nav-item {
        display:         flex;
        flex-direction:  column;
        align-items:     center;
        justify-content: center;
        text-decoration: none;
        color:           var(--amn-nav-color);
        font-size:       11px;
        font-weight:     500;
        flex-grow:       1;
        height:          100%;
        transition:      color 0.2s, background-color 0.2s;
        position:        relative;
        -webkit-tap-highlight-color: transparent;
    }

    .amn-nav-item:hover {
        color: var(--amn-nav-active-color);
    }

    .amn-nav-item .dashicons {
        font-size:     24px;
        width:         24px;
        height:        24px;
        margin-bottom: 3px;
    }

    .amn-nav-item label {
        line-height:    1;
        letter-spacing: 0.3px;
        cursor:         pointer;
    }

    .amn-nav-item.is-active {
        color: var(--amn-nav-active-color);
    }

    /* Indicateur : barre supérieure colorée sur l'item actif */
    .amn-nav-item.is-active::before {
        content:          '';
        position:         absolute;
        top:              0;
        left:             50%;
        transform:        translateX(-50%);
        width:            28px;
        height:           3px;
        background:       var(--amn-nav-active-color);
        border-radius:    0 0 4px 4px;
    }

    /* Zone de tap élargie (accessibilité mobile) */
    .amn-nav-item::after {
        content:  '';
        position: absolute;
        top:      -8px;
        left:     0;
        right:    0;
        bottom:   -4px;
    }

} /* fin @media mobile */


/* ═══════════════════════════════════════════════════════════════════════
 * MODALE TABLEAU DE BORD
 * ═══════════════════════════════════════════════════════════════════════ */
.amn-modal-overlay {
    position:        fixed;
    top:             0;
    left:            0;
    width:           100%;
    height:          100%;
    background:      rgba(0, 0, 0, 0.7);
    z-index:         10001;
    display:         none;
    align-items:     center;
    justify-content: center;
}

.amn-modal-content {
    background:    var(--im-blanc, #fff);
    border-radius: 15px;
    padding:       25px;
    max-width:     90%;
    width:         400px;
    position:      relative;
    box-shadow:    0 5px 20px rgba(0, 0, 0, 0.3);
    animation:     amnModalSlideUp 0.2s ease-out;
}

@keyframes amnModalSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.amn-modal-close {
    position:    absolute;
    top:         10px;
    right:       15px;
    font-size:   28px;
    font-weight: bold;
    color:       #888;
    cursor:      pointer;
    line-height: 1;
    transition:  color 0.2s;
    padding:     4px 8px;
}
.amn-modal-close:hover { color: #333; }

.amn-modal-title {
    color:         var(--im-rose, #E91E63);
    margin-top:    0;
    margin-bottom: 20px;
    text-align:    center;
    font-size:     18px;
}

.amn-modal-nav {
    list-style: none;
    padding:    0;
    margin:     0;
}

.amn-modal-nav li a {
    display:         block;
    padding:         12px 15px;
    text-decoration: none;
    color:           var(--im-gris-fonce, #333);
    border-radius:   8px;
    font-weight:     500;
    transition:      background-color 0.2s;
}

.amn-modal-nav li a:hover,
.amn-modal-nav li a:focus {
    background-color: #f1f1f1;
    outline:          none;
}

.amn-modal-nav li + li {
    border-top: 1px solid #f0f0f0;
}

/* ─── Mobile : bottom sheet ───────────────────────────────────────── */
@media (max-width: 768px) {
    .amn-modal-overlay {
        align-items: flex-end;
    }

    .amn-modal-content {
        width:         100%;
        max-width:     100%;
        border-radius: 18px 18px 0 0;
        padding-bottom: calc(25px + env(safe-area-inset-bottom, 0px));
        animation:     amnModalSlideUpMobile 0.25s ease-out;
    }

    @keyframes amnModalSlideUpMobile {
        from { transform: translateY(100%); opacity: 0; }
        to   { transform: translateY(0);    opacity: 1; }
    }
}