/* ═══════════════════════════════════════════════════════════════════════════
   ElectroCAD — Admin v12 « A12 » (2026-07-15)
   Overlay global : navigation mobile (bottom bar + panneau), tables→cartes,
   drawers plein écran, neutralisation des largeurs inline, polish transversal.
   AUCUNE logique métier touchée — purement additif, chargé après les CSS v9.
   Namespace : .a12-*  (+ overrides ciblés scopés #admin-content / mobile).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. Wrapper scroll générique (posé par admin-v12.js) ────────────── */
.a12-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    scrollbar-width: thin;
}
.a12-scroll::-webkit-scrollbar { height: 8px; }
.a12-scroll::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.35); border-radius: 4px; }
.a12-scroll::-webkit-scrollbar-track { background: transparent; }

/* ─── 2. Focus clavier homogène dans l'admin ─────────────────────────── */
#admin-content :is(button, a, select, input, [tabindex]):focus-visible {
    outline: 2px solid #DC2626;
    outline-offset: 2px;
    border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════
   3. BOTTOM NAVIGATION (≤1024px) — remplace le <select> et la tab strip
   ═══════════════════════════════════════════════════════════════════════ */
.a12-bottomnav {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;
    background: var(--surface, #17171B);
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.35);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}
.a12-bottomnav .admin-nav-item,
.a12-more {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 52px;
    padding: 5px 2px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--text3, #8b8b93);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    position: relative;
    transition: color .14s, background .14s;
    -webkit-tap-highlight-color: transparent;
    max-width: 96px;
    overflow: visible;
}
.a12-bottomnav .admin-nav-item i,
.a12-more i {
    font-size: 1.05rem;
    line-height: 1;
    width: auto;
}
.a12-bottomnav .admin-nav-item span,
.a12-more span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.a12-bottomnav .admin-nav-item.active {
    color: #DC2626;
    background: rgba(220, 38, 38, 0.10);
}
.a12-bottomnav .admin-nav-item:active,
.a12-more:active { transform: scale(0.95); }

/* badges (trials/chat/emails, spans injectés avec styles inline) recalés */
.a12-bottomnav .admin-nav-item :is(.trials-tab-badge, .chat-tab-badge, .email-tab-badge, [class*="-tab-badge"]) {
    position: absolute !important;
    top: 2px !important;
    right: calc(50% - 20px) !important;
    margin: 0 !important;
    font-size: 0.6rem !important;
    padding: 0 5px !important;
    min-width: 16px;
    height: 15px;
    line-height: 15px;
    border-radius: 8px !important;
}

/* ── Panneau « Plus » (bottom sheet) ── */
.a12-sheet-scrim {
    display: none;
    position: fixed; inset: 0;
    z-index: 890;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity .2s;
}
.a12-sheet {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 895;
    max-height: 72vh;
    overflow-y: auto;
    background: var(--surface, #17171B);
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    padding: 10px 14px calc(84px + env(safe-area-inset-bottom, 0px));
    transform: translateY(102%);
    transition: transform .24s cubic-bezier(.2, .8, .25, 1);
    box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.5);
}
.a12-open .a12-sheet-scrim { display: block; opacity: 1; }
.a12-open .a12-sheet { display: block; transform: none; }
.a12-sheet-grab {
    width: 42px; height: 4px;
    border-radius: 2px;
    background: var(--border, rgba(255, 255, 255, 0.18));
    margin: 2px auto 12px;
}
.a12-sheet-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text3, #8b8b93);
    margin: 10px 4px 8px;
}
.a12-sheet-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.a12-sheet .admin-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 74px;
    padding: 10px 4px;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 14px;
    background: var(--bg2, rgba(255, 255, 255, 0.03));
    color: var(--text2, #b9b9c0);
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    transition: background .14s, border-color .14s, color .14s;
    -webkit-tap-highlight-color: transparent;
}
.a12-sheet .admin-nav-item i { font-size: 1.15rem; width: auto; }
.a12-sheet .admin-nav-item span {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.a12-sheet .admin-nav-item.active {
    border-color: rgba(220, 38, 38, 0.5);
    background: rgba(220, 38, 38, 0.10);
    color: #DC2626;
}
.a12-sheet .admin-nav-item :is(.trials-tab-badge, .chat-tab-badge, .email-tab-badge, [class*="-tab-badge"]) {
    position: absolute !important;
    top: 6px !important;
    right: 8px !important;
    margin: 0 !important;
}

/* Activation mobile : bottom nav visible, anciens sélecteurs masqués.
   ⚠ admin-tabs-v9.css est chargé APRÈS ce fichier et force
   `.admin-tabs-mobile { display:flex !important }` → on gagne à la
   SPÉCIFICITÉ (classe doublée / id), pas à l'ordre. */
@media (max-width: 1024px) {
    .a12-bottomnav { display: flex; }
    body .admin-tabs-select-wrap,
    .admin-tabs-select-wrap.admin-tabs-select-wrap { display: none !important; }
    #admin-tabs.admin-tabs-mobile,
    .admin-tabs-mobile.admin-tabs-mobile { display: none !important; }
    .atb-wrap { display: none !important; }
    /* l'admin respire au-dessus de la barre */
    .admin-root-section { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important; }
    /* la messagerie EMX aussi (elle calcule sa hauteur) */
    .emx { height: calc(100vh - 232px) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   4. TABLES → CARTES (≤700px) — tables marquées .a12-cards par le JS
   (data-label injecté depuis le thead ; tables à cartes dédiées exclues)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
    #admin-content table.a12-cards { display: block; width: 100% !important; }
    #admin-content table.a12-cards thead { display: none; }
    #admin-content table.a12-cards tbody { display: flex; flex-direction: column; gap: 10px; }
    #admin-content table.a12-cards tbody tr {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 12px 14px;
        background: var(--bg2, rgba(255, 255, 255, 0.03));
        border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
        border-radius: 12px;
    }
    #admin-content table.a12-cards tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 4px 0 !important;
        border: none !important;
        width: auto !important;
        max-width: none !important;
        white-space: normal !important;
        text-align: left !important;
        min-width: 0;
        overflow-wrap: anywhere;
    }
    #admin-content table.a12-cards tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 45%;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--text3, #8b8b93);
    }
    #admin-content table.a12-cards tbody td:not([data-label])::before { content: none; }
    #admin-content table.a12-cards tbody td[data-label=""]::before { content: none; }
    /* cellule sans label (actions) : boutons alignés à droite */
    #admin-content table.a12-cards tbody td:not([data-label]) { justify-content: flex-end; flex-wrap: wrap; }

    /* les th à largeur inline ne dictent plus rien */
    #admin-content table th[style*="width"] { width: auto !important; min-width: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   5. CORRECTIFS CIBLÉS MOBILE (largeurs/grilles inline en dur)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
    /* heatmap monitoring : grid inline "90px repeat(N,1fr)" → flex fluide */
    #admin-content .mon-heat-row,
    #admin-content [class*="mon-heat"] [style*="90px repeat"] {
        display: flex !important;
    }
    #admin-content .mon-heat-row > * { flex: 1 1 0; min-width: 0; }
    #admin-content .mon-heat-row > :first-child { flex: 0 0 52px; font-size: 0.65rem; }

    /* grilles détail clients "repeat(4, 1fr)" → 2 colonnes */
    #admin-content [style*="repeat(4, 1fr)"],
    #admin-content [style*="repeat(4,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* mini-barres monitoring width:140px inline → fluides */
    #admin-content .mon-mini-bar,
    #admin-content [style*="width:140px"] { width: 100% !important; max-width: 160px; }

    /* recherches à min-width inline (visiteurs etc.) */
    #admin-content [style*="min-width:240px"],
    #admin-content [style*="min-width: 240px"] { min-width: 0 !important; width: 100%; }

    /* cellules nowrap inline : autoriser le retour à la ligne en cartes */
    #admin-content table.a12-cards [style*="white-space:nowrap"],
    #admin-content table.a12-cards [style*="white-space: nowrap"] { white-space: normal !important; }
}
@media (max-width: 480px) {
    /* grilles 2 colonnes inline → 1 colonne sur très petit écran */
    #admin-content [style*="grid-template-columns:1fr 1fr"],
    #admin-content [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    /* stats d'aperçu : 2 colonnes compactes */
    .aov-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   6. DRAWERS PLEIN ÉCRAN MOBILE (tous les tiroirs de détail)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    .ec-drawer,
    .eclic-drawer,
    .act-detail-drawer,
    .arl-drawer,
    .adg-drawer {
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
        border-left: none !important;
    }
    /* modal newsletter legacy : plein écran */
    .anl-modal {
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        resize: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   7. POLISH TRANSVERSAL LÉGER
   ═══════════════════════════════════════════════════════════════════════ */
/* boutons/cibles tactiles confortables au doigt, sans casser le desktop */
@media (pointer: coarse) and (max-width: 1024px) {
    #admin-content :is(.btn, .atr-btn, .eclic-btn, .ann-btn, .apk-btn, .aud-chip, .aud-filter-btn, .ec-clients-toolbar__btn) {
        min-height: 42px;
    }
    #admin-content select,
    #admin-content input[type="text"],
    #admin-content input[type="search"],
    #admin-content input[type="email"],
    #admin-content input[type="number"] {
        min-height: 42px;
        font-size: 16px; /* évite le zoom iOS */
    }
}

/* toolbars de vues : défilement horizontal doux plutôt que débordement */
@media (max-width: 700px) {
    #admin-content :is(.ecc-toolbar, .aud-quickfilters, .aov-quick-actions) {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 8px;
        padding-bottom: 4px;
    }
    #admin-content :is(.ecc-toolbar, .aud-quickfilters, .aov-quick-actions)::-webkit-scrollbar { display: none; }
    #admin-content :is(.ecc-toolbar, .aud-quickfilters, .aov-quick-actions) > * { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .a12-sheet, .a12-sheet-scrim { transition: none !important; }
}