/* =================================================================
   mobile.css — Overrides mobile pour l'admin panel
   =================================================================
   Chargé APRÈS tous les autres CSS. Tout est dans des @media queries,
   RIEN n'affecte le desktop.

   Convention :
   - Les composants réutilisables reçoivent des classes CSS "hooks"
     (.modal-header, .sc-body, .dt-header, etc.) pour être ciblés ici.
   - Les futurs modules héritent automatiquement du responsive
     s'ils utilisent les composants standard.
   - Deux breakpoints : 768px (tablettes+phones), 480px (petits phones).
   - Classes utilitaires .mob-cols-1 / .mob-cols-2 pour les grilles
     des pages individuelles.
   ================================================================= */


/* ─────────────────────────────────────────────────────────────────
   TABLETTES + PHONES (≤ 768px)
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    /* ══════════════════════════════════════════════════════════════
       MODAL — réduction paddings (px-6 → px-4)
       ══════════════════════════════════════════════════════════════ */
    .modal-header {
        padding: 0.75rem 1rem !important;
    }
    .modal-header h3 {
        font-size: 0.9375rem !important;
    }
    .modal-body {
        padding: 0.875rem 1rem !important;
    }
    .modal-footer {
        padding: 0.75rem 1rem !important;
    }

    /* ══════════════════════════════════════════════════════════════
       SHOW-CARD — garder des paddings confortables (pleine largeur)
       ══════════════════════════════════════════════════════════════ */
    .sc-header {
        padding: 0.875rem 1.125rem !important;
    }
    .sc-body {
        padding: 1.125rem !important;
    }

    /* ══════════════════════════════════════════════════════════════
       TAB-BAR — gap réduit, texte compact, scrollbar cachée
       ══════════════════════════════════════════════════════════════ */
    .tab-bar-nav {
        gap: 0.375rem !important;
    }
    .tab-bar-nav > button {
        font-size: 0.75rem !important;
        gap: 0.25rem !important;
        padding-bottom: 0.375rem !important;
    }
    .tab-bar-nav > button > i {
        font-size: 13px !important;
    }
    .tab-bar-wrap {
        scrollbar-width: none;
    }
    .tab-bar-wrap::-webkit-scrollbar {
        display: none;
    }

    /* ══════════════════════════════════════════════════════════════
       DATA-TABLE — compact header, cellules, footer, recherche
       ══════════════════════════════════════════════════════════════ */

    /* Header : padding + titre réduits */
    .dt-header {
        padding: 0.5rem 0.625rem !important;
        gap: 0.375rem !important;
    }
    .dt-header h2 {
        font-size: 0.875rem !important;
    }
    .dt-header .w-9 {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }
    .dt-header .w-9 > i {
        font-size: 14px !important;
    }

    /* Cellules : padding et taille de police compacts */
    [id^="dt-"] th {
        padding: 0.375rem 0.5rem !important;
        font-size: 0.6875rem !important;
    }
    [id^="dt-"] td {
        padding: 0.375rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    /* Checkbox column : plus étroite */
    [id^="dt-"] th:first-child:has(.cb),
    [id^="dt-"] td:first-child:has(.cb) {
        width: 36px !important;
        padding-left: 0.375rem !important;
        padding-right: 0.25rem !important;
    }

    /* Search input : supprimer le min-width restrictif */
    .dt-search {
        min-width: 0 !important;
    }
    /* Ancien layout (inline) : search prend toute la largeur sauf le toggle */
    .dt-qf-inline > .dt-search {
        min-width: calc(100% - 80px) !important;
    }

    /* Footer : compact */
    .dt-footer {
        padding: 0.375rem 0.5rem !important;
    }

    /* Chips de filtre : truncate les longues valeurs */
    .chip-filter {
        max-width: 220px;
    }
    .chip-value {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 120px;
        display: inline-block;
        vertical-align: middle;
    }

    /* Quick filters : réduire la taille min des boutons */
    .dt-filter-btn {
        max-width: 140px;
        font-size: 11px;
        padding: 5px 8px;
    }

    /* Quick filters : cachés par défaut, toggle via bouton */
    .dt-qf-mob-toggle {
        display: inline-flex !important;
    }
    .dt-qf-mob-hidden {
        display: none !important;
    }

    /* Summary-cards : padding confortable (comme show-card) */
    .sc-grid [class*="card-"] {
        padding: 0.875rem 1rem !important;
    }

    /* ══════════════════════════════════════════════════════════════
       INPUT-PHONE — select pays plus étroit (160px → 110px)
       ══════════════════════════════════════════════════════════════ */
    .phone-country {
        width: 110px !important;
    }

    /* ══════════════════════════════════════════════════════════════
       SUMMARY-CARDS — 1 colonne sur mobile
       ══════════════════════════════════════════════════════════════ */
    .sc-grid {
        grid-template-columns: 1fr !important;
    }

    /* ══════════════════════════════════════════════════════════════
       TOOLTIP — wrapping + largeur max
       ══════════════════════════════════════════════════════════════ */
    #tooltip {
        white-space: normal !important;
        max-width: 280px;
    }

    /* ══════════════════════════════════════════════════════════════
       UTILITAIRES — classes optionnelles pour les grilles de pages
       Usage : <div class="grid grid-cols-3 mob-cols-1">
       ══════════════════════════════════════════════════════════════ */
    .mob-cols-1 {
        grid-template-columns: 1fr !important;
    }
    /* Neutraliser les col-span dans une grille 1 col (sinon crée des colonnes implicites) */
    .mob-cols-1 > [class*="col-span-"] {
        grid-column: span 1 !important;
    }
    .mob-cols-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Empiler les flex 2-colonnes (pages show) → colonne unique pleine largeur */
    .mob-stack {
        flex-direction: column !important;
    }
    .mob-stack > * {
        width: 100% !important;
        flex-shrink: 1 !important;
    }

    /* ══════════════════════════════════════════════════════════════
       MODAL — background opaque (compense le backdrop-filter désactivé)
       Le blur(40px) est coupé par glass.css sur mobile (GPU).
       On renforce le fond pour que la modale reste bien lisible.
       ══════════════════════════════════════════════════════════════ */
    .modal-panel,
    [style*="backdrop-filter"]:not(.topbar-blur):not(.sidebar):not(.select-dropdown):not(.dt-filter-title):not(.dt-filter-panel):not(.keep-blur) {
        background: rgba(12, 12, 28, 0.92) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    /* Dropdowns (selects, quick filters, recherche avancée) : fond 100% opaque */
    .select-dropdown,
    [style*="--z-dropdown"]:not(.dd-backdrop),
    .dt-filter-dropdown,
    .dt-filter-title,
    .dt-filter-panel {
        background: rgb(10, 10, 18) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    /* Overlay derrière la modale : plus opaque pour compenser le blur réduit */
    .modal-overlay {
        background: rgba(0, 0, 0, 0.85) !important;
    }

    /* ══════════════════════════════════════════════════════════════
       DIVERS
       ══════════════════════════════════════════════════════════════ */

    /* Data-table backdrop-filter : désactiver (lourd sur mobile) */
    [id^="dt-"] {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}


/* ─────────────────────────────────────────────────────────────────
   PETITS PHONES (≤ 480px)
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

    /* Cellules datatable : encore plus compact */
    [id^="dt-"] th {
        padding: 0.25rem 0.35rem !important;
        font-size: 0.625rem !important;
    }
    [id^="dt-"] td {
        padding: 0.25rem 0.35rem !important;
        font-size: 0.6875rem !important;
    }

    /* Chips de filtre : truncate plus agressif */
    .chip-value {
        max-width: 80px;
    }
    .chip-filter {
        max-width: 180px;
        font-size: 10px;
        padding: 3px 7px;
    }

    /* Modal body : padding minimal */
    .modal-body {
        padding: 0.75rem !important;
    }

    /* Show-card body : garder lisible */
    .sc-body {
        padding: 0.875rem !important;
    }

    /* Summary-cards : padding réduit par carte */
    .sc-grid .card-glow,
    .sc-grid .card-plain {
        padding: 0.5rem !important;
    }

    /* Input-phone : encore plus étroit */
    .phone-country {
        width: 90px !important;
    }

    /* Data-table header : encore plus compact */
    .dt-header h2 {
        font-size: 0.8125rem !important;
    }
    .dt-header .w-9,
    .dt-header [class*="w-1.75rem"] {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
}


/* ─────────────────────────────────────────────────────────────────
   ACCESSIBILITE — Reduced motion
   Désactive toutes les animations si l'utilisateur le préfère.
   ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}