/* =====================================================================
   responsive.css — Gestion Multi-Services
   Menu burger + adaptation à tous les écrans.
   À charger APRÈS admin.css.

   Points de rupture :
     > 992px  : ordinateur — barre latérale fixe, repliable (icônes seules)
                via le bouton burger
     ≤ 992px  : tablette — la barre latérale devient un tiroir coulissant
     ≤ 768px  : mobile — formulaires et grilles compacts
     ≤ 640px  : téléphone — les tableaux s'affichent en cartes empilées
     ≤ 400px  : petit téléphone
   ===================================================================== */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, video, canvas, iframe { max-width: 100%; }
img { height: auto; }

/* Les badges de statut restent sur une ligne */
.badge { white-space: nowrap; }

/* Le contenu ne doit jamais élargir la page */
.main-content { min-width: 0; }
.app-layout { overflow-x: clip; }

/* =====================================================================
   BOUTON BURGER (visible sur tous les écrans)
   ===================================================================== */
.burger-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    color: var(--primary, #1e3a5f);
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s, border-color .2s;
}
.burger-btn:hover { background: #eef2f7; border-color: #cbd5e1; }
.burger-btn:focus-visible { outline: 2px solid var(--primary-light, #2c5282); outline-offset: 2px; }
.burger-btn span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .28s ease, opacity .2s ease;
}
/* Le burger se transforme en croix quand le tiroir est ouvert */
body.menu-open .burger-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .burger-btn span:nth-child(2) { opacity: 0; }
body.menu-open .burger-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Titre de la barre du haut : à côté du burger, tronqué si trop long */
.topbar { gap: 12px; }
.topbar h1 {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.sidebar-overlay { display: none; }
.sidebar-close { display: none; }

/* Tableaux enveloppés automatiquement par responsive.js */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* =====================================================================
   ORDINATEUR (> 992px) : barre latérale repliable
   ===================================================================== */
@media (min-width: 993px) {
    .sidebar, .main-content { transition: width .25s ease, margin-left .25s ease; }
    .sidebar { overflow-x: hidden; }

    body.sidebar-collapsed { --sidebar-width: 76px; }
    body.sidebar-collapsed .sidebar { width: 76px; }
    body.sidebar-collapsed .main-content { margin-left: 76px; }

    body.sidebar-collapsed .sidebar .brand { justify-content: center; padding: 0 0 20px; font-size: 0; gap: 0; }
    body.sidebar-collapsed .sidebar .brand i { font-size: 22px; }
    body.sidebar-collapsed .sidebar .brand-text,
    body.sidebar-collapsed .sidebar .module-title,
    body.sidebar-collapsed .sidebar a .badge { display: none; }
    body.sidebar-collapsed .sidebar .module-group { margin-top: 6px; }
    body.sidebar-collapsed .sidebar .module-group + .module-group { border-top: 1px solid rgba(255,255,255,.08); padding-top: 6px; }
    body.sidebar-collapsed .sidebar a {
        justify-content: center;
        padding: 12px 0;
        font-size: 0;            /* masque le texte, garde l'icône */
        gap: 0;
        position: relative;
    }
    body.sidebar-collapsed .sidebar a i { font-size: 17px; width: auto; }
}

/* =====================================================================
   TABLETTE ET MOBILE (≤ 992px) : barre latérale en tiroir
   ===================================================================== */
@media (max-width: 992px) {
    .sidebar {
        position: fixed !important;
        top: 0; left: 0; bottom: 0;
        height: 100%;
        height: 100dvh;
        width: 280px !important;
        max-width: 85vw;
        transform: translateX(-105%);
        transition: transform .28s ease, box-shadow .28s ease;
        z-index: 1001 !important;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        box-shadow: none;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }
    body.menu-open .sidebar {
        transform: translateX(0);
        box-shadow: 6px 0 28px rgba(0, 0, 0, .35);
    }

    .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(10, 20, 30, .5);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: opacity .28s ease, visibility .28s ease;
        -webkit-tap-highlight-color: transparent;
    }
    body.menu-open .sidebar-overlay { opacity: 1; visibility: visible; }
    body.menu-open { overflow: hidden; }

    .sidebar-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 12px;
        right: 12px;
        width: 34px;
        height: 34px;
        border: none;
        border-radius: 50%;
        background: rgba(255, 255, 255, .14);
        color: #fff;
        font-size: 24px;
        line-height: 1;
        cursor: pointer;
        z-index: 2;
    }
    .sidebar-close:hover { background: rgba(255, 255, 255, .25); }
    .sidebar .brand { padding-right: 56px; }
    .sidebar a { min-height: 46px; }   /* zones faciles à toucher */

    .main-content { margin-left: 0 !important; width: 100%; }

    .topbar { position: sticky; top: 0; z-index: 50; padding: 12px 20px; }
    .page-body { padding: 18px 18px; }
}

/* =====================================================================
   MOBILE (≤ 768px)
   ===================================================================== */
@media (max-width: 768px) {
    .topbar { padding: 10px 12px; gap: 10px; }
    .topbar h1 { font-size: 16px; }
    .topbar-actions { gap: 8px; }

    /* Barre du haut : on garde l'avatar, on masque le nom et le rôle */
    .topbar .user-chip > div:not(.avatar) { display: none; }
    .topbar #btnInstallPwa { padding: 7px 9px; font-size: 0; gap: 0; }
    .topbar #btnInstallPwa i { font-size: 15px; }

    .page-body { padding: 14px 12px; }
    .main-content > .alert { margin: 12px 12px 0 !important; }

    .card { padding: 16px 14px; margin-bottom: 14px; }
    .card h2 { font-size: 17px; flex-wrap: wrap; }
    .card h3 { font-size: 15px; flex-wrap: wrap; }

    /* Cartes de statistiques : 2 par ligne */
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
    .stat-card { padding: 12px 14px; min-width: 0; gap: 8px; }
    .stat-card .value { font-size: 19px; word-break: break-word; }
    .stat-card .label { font-size: 12px; }
    .stat-card i { font-size: 22px; }

    /* Formulaires en ligne : 2 champs par ligne */
    form.inline-form { gap: 10px; }
    .field { min-width: 0 !important; flex: 1 1 calc(50% - 10px) !important; max-width: none !important; }

    /* 16px évite le zoom automatique de l'iPhone sur les champs */
    input, select, textarea { font-size: 16px; max-width: 100%; min-width: 0; }

    /* Styles écrits en ligne dans les pages */
    [style*="min-width"] { min-width: 0 !important; }
    [style*="max-width:500px"], [style*="max-width:520px"], [style*="max-width:300px"] { max-width: none !important; }
    [style*="margin:40px auto"] { margin-top: 16px !important; margin-bottom: 16px !important; padding: 0 12px !important; }
    [style*="display:flex"], [style*="display: flex"] { flex-wrap: wrap; }
    [style*="grid-template-columns"]:not([style*="auto-fit"]):not([style*="auto-fill"]) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .module-toggle-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .alert { flex-wrap: wrap; }

    /* Tableaux qui défilent : cellules sur une ligne, textes longs repliés */
    table.data-table { font-size: 13px; }
    table.data-table th, table.data-table td { white-space: nowrap; padding: 9px 10px; }
    table.data-table td.td-long { white-space: normal; min-width: 200px; max-width: 320px; }


    /* Pages de connexion / licence / accès refusé */
    .login-page { padding: 16px; align-items: flex-start; padding-top: max(24px, 6vh); }
    .login-box { width: 100% !important; max-width: 420px; padding: 28px 22px !important; }

    /* Fenêtres modales éventuelles */
    .modal-box, .modal-content, .modal-dialog { width: 94% !important; max-width: 94vw !important; max-height: 90vh; overflow-y: auto; }
}

/* =====================================================================
   TÉLÉPHONE (≤ 640px) : tableaux en cartes empilées
   (responsive.js ajoute .table-cards et les attributs data-label)
   ===================================================================== */
@media (max-width: 640px) {
    table.table-cards,
    table.table-cards tbody,
    table.table-cards thead,
    table.table-cards tr,
    table.table-cards td { display: block; width: 100%; }
    table.table-cards tr.row-header,
    table.table-cards thead { display: none; }

    table.table-cards tr {
        border: 1px solid var(--border, #e2e8f0);
        border-radius: 10px;
        margin-bottom: 10px;
        padding: 4px 12px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(0,0,0,.04);
    }
    table.table-cards tr:hover td { background: transparent; }
    table.table-cards td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 0 !important;
        border-bottom: 1px dashed var(--border, #e2e8f0);
        white-space: normal !important;
        text-align: right;
        min-width: 0 !important;
        max-width: none !important;
        word-break: break-word;
    }
    table.table-cards td:last-child { border-bottom: none; }
    table.table-cards td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        text-align: left;
        font-size: 11.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--text-light, #6b7a8f);
    }
    /* Première cellule = titre de la carte */
    table.table-cards td.cell-title { font-weight: 700; font-size: 14.5px; color: var(--text, #22303f); }
    /* Cellules sans intitulé (boutons d'action, messages « Aucun… ») */
    table.table-cards td.cell-nolabel { justify-content: flex-end; }
    table.table-cards td.cell-nolabel::before { display: none; }
    table.table-cards td[colspan] { justify-content: center; text-align: center !important; }
    table.table-cards td[colspan]::before { display: none; }
    table.table-cards td:empty { display: none; }
    /* Cellules d'actions : boutons alignés à droite, passage à la ligne sans écrasement */
    table.table-cards td.cell-actions { flex-wrap: wrap; justify-content: flex-end; gap: 6px; word-break: normal; }
    table.table-cards td.cell-actions::before { margin-right: auto; }
    table.table-cards td.cell-actions > * { flex: 0 0 auto; margin: 0 !important; }
    table.table-cards td.cell-actions .btn { white-space: nowrap; }
    table.table-cards td.cell-actions > form { display: inline-flex !important; gap: 6px; flex-wrap: wrap; }
    /* Formulaire d'édition dépliable : pleine largeur une fois ouvert */
    table.table-cards td details { display: inline-block; text-align: left; }
    table.table-cards td details[open] { flex: 1 1 100% !important; order: 10; background: #f8fafc; border-radius: 8px; padding: 8px; }
    table.table-cards td details[open] summary { margin-bottom: 6px; }
    table.table-cards td details form { display: block !important; }
    table.table-cards td details .field { flex: 1 1 100% !important; margin-bottom: 8px; }
    .table-wrap:has(> table.table-cards), .table-scroll:has(> table.table-cards) { overflow: visible; }
}

/* =====================================================================
   PETIT TÉLÉPHONE (≤ 480px / ≤ 400px)
   ===================================================================== */
@media (max-width: 480px) {
    .burger-btn { width: 40px; height: 40px; }
    .topbar h1 { font-size: 15px; }
    .topbar h1 i { display: none; }
    .btn { padding: 9px 12px; }

    .field { flex: 1 1 100% !important; }
    form.inline-form > .btn, form.inline-form > button, form.inline-form > a.btn { flex: 1 1 100%; justify-content: center; }

    .login-brand i { font-size: 34px; }
}
@media (max-width: 340px) {
    .stats-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 400px) {
    table.table-cards td::before { flex-basis: 45%; }
}

/* =====================================================================
   GRANDS ÉCRANS (≥ 1600px) : contenu plus aéré
   ===================================================================== */
@media (min-width: 1600px) {
    .page-body { padding: 28px 40px; }
    .topbar { padding: 14px 40px; }
}


/* =====================================================================
   Spécifique Gestion Multi-Services
   ===================================================================== */
/* Bandeau d'installation de l'application : au-dessus du contenu, sous le tiroir */
#bandeau-installation-app { z-index: 900 !important; }
@media (max-width: 480px) {
    #bandeau-installation-app { left: 8px !important; right: 8px !important; bottom: 8px !important; padding: 12px !important; font-size: 13px; }
    #bandeau-installation-app img { width: 32px !important; height: 32px !important; }
}
/* Cases à cocher des droits (rôles / utilisateurs) */
@media (max-width: 768px) {
    .perm-grid, .permissions-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---------- Réduction des animations si demandé par le système ---------- */
@media (prefers-reduced-motion: reduce) {
    .sidebar, .main-content, .sidebar-overlay, .burger-btn span { transition: none !important; }
}

/* ---------- Impression : jamais de menu ni de burger ---------- */
@media print {
    .burger-btn, .sidebar, .sidebar-overlay, .sidebar-close, #btnInstallPwa { display: none !important; }
    .main-content { margin-left: 0 !important; }
    .topbar { position: static; }
    .table-scroll { overflow: visible !important; }
}