/**
 * mobile.css — Responsive PWA
 * Accompagnement Résidentiel
 * S'applique uniquement en dessous de 768px
 */

/* ── Variables mobiles ───────────────────────────────────────────────────── */
:root {
    --mobile-padding: 1rem;
    --mobile-radius:  12px;
}

@media (max-width: 768px) {

    /* ── Layout général ──────────────────────────────────────────────────── */
    body {
        font-size: 15px;
    }

    .container {
        padding: var(--mobile-padding) !important;
    }

    /* ── Header navigation ───────────────────────────────────────────────── */
    .dashboard-header {
        padding: 0;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .dashboard-nav {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px var(--mobile-padding);
    }

    .nav-brand .brand-text {
        font-size: 1rem;
    }

    .user-menu {
        gap: 6px;
        flex-wrap: wrap;
    }

    /* Masquer le "Bienvenue, Nom" sur mobile — garde avatar + déconnexion */
    .user-menu > span:not(.user-avatar) {
        display: none;
    }

    .user-menu .btn-outline {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    /* ── Nav agent (liens) ───────────────────────────────────────────────── */
    .agent-nav-link {
        padding: 4px 8px;
        font-size: 0.75rem;
    }

    /* Masquer les labels texte, garder les emojis */
    .agent-nav-link {
        font-size: 0;
    }

    .agent-nav-link::before {
        font-size: 20px;
    }

    /* ── Titres de page ──────────────────────────────────────────────────── */
    h1[style*="2rem"],
    .page-title {
        font-size: 1.375rem !important;
    }

    /* ── Grilles stats ───────────────────────────────────────────────────── */
    .stats-grid,
    .stats-mini,
    .kpi-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .stat-card,
    .stat-mini-card,
    .kpi-card {
        padding: 14px !important;
    }

    .stat-card-value,
    .stat-mini-value,
    .kpi-value {
        font-size: 1.5rem !important;
    }

    /* ── Tableaux → scroll horizontal ───────────────────────────────────── */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--mobile-radius);
    }

    table {
        min-width: 600px;
        font-size: 0.8rem;
    }

    th, td {
        padding: 10px 8px !important;
        white-space: nowrap;
    }

    /* ── Formulaires ─────────────────────────────────────────────────────── */
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px !important; /* Évite le zoom auto iOS */
        padding: 12px 14px !important;
    }

    .form-group label {
        font-size: 0.8rem;
    }

    /* ── Filtres ─────────────────────────────────────────────────────────── */
    form[style*="grid"] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* ── Boutons ─────────────────────────────────────────────────────────── */
    .btn-large {
        padding: 12px 18px !important;
        font-size: 0.9rem !important;
    }

    /* Stack les boutons d'action sur mobile */
    div[style*="justify-content:flex-end"],
    div[style*="justify-content: flex-end"] {
        flex-direction: column !important;
        gap: 10px !important;
    }

    div[style*="justify-content:flex-end"] .btn,
    div[style*="justify-content: flex-end"] .btn {
        width: 100% !important;
        text-align: center !important;
    }

    /* ── Dashboard ───────────────────────────────────────────────────────── */
    /* Graphique CA */
    .grid-3,
    .grid-2 {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .kpi-strip {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* ── Cards agents/biens ──────────────────────────────────────────────── */
    .agent-card {
        grid-template-columns: auto 1fr !important;
    }

    /* ── Planning disponibilités ─────────────────────────────────────────── */
    .planning-grid {
        font-size: 0.65rem;
    }

    .planning-header-cell {
        padding: 6px 2px;
        font-size: 0.65rem;
    }

    .time-label {
        font-size: 0.6rem;
        padding: 0 2px;
    }

    /* ── Sections formulaires ────────────────────────────────────────────── */
    .form-section,
    .info-box,
    .card {
        padding: 16px !important;
        border-radius: var(--mobile-radius) !important;
    }

    /* ── Hero bien/mission ───────────────────────────────────────────────── */
    .bien-hero,
    .mission-hero {
        padding: 20px !important;
    }

    .bien-hero h1,
    .mission-hero h1 {
        font-size: 1.25rem !important;
    }

    /* ── Info grids ──────────────────────────────────────────────────────── */
    .info-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Notes & accès ───────────────────────────────────────────────────── */
    div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* ── Arbre parrainage ────────────────────────────────────────────────── */
    .arbre-node {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .arbre-chain {
        font-size: 0.75rem;
    }

    /* ── Commissions tabs ────────────────────────────────────────────────── */
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tab {
        white-space: nowrap;
        padding: 10px 14px;
        font-size: 0.8rem;
    }

    /* ── Licences jalons ─────────────────────────────────────────────────── */
    .jcard-head {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .jfoot {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .jfoot form {
        width: 100%;
    }

    .tbtn {
        width: 100% !important;
    }

    .sstrip {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }

    /* ── PWA standalone — safe areas iPhone ─────────────────────────────── */
    .pwa-standalone .dashboard-header {
        padding-top: env(safe-area-inset-top);
    }

    .pwa-standalone .container {
        padding-bottom: calc(var(--mobile-padding) + env(safe-area-inset-bottom));
    }
}

/* ── Très petits écrans (< 380px) ────────────────────────────────────────── */
@media (max-width: 380px) {
    .stats-grid,
    .stats-mini,
    .kpi-grid {
        grid-template-columns: 1fr !important;
    }

    .nav-brand .brand-text strong {
        display: none;
    }
}

/* ── Améliorations tactiles générales ────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {

    /* Zones tactiles plus grandes */
    .btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    a, button {
        min-height: 44px;
    }

    /* Supprimer les effets hover qui restent collés sur mobile */
    .stat-card:hover,
    .info-box:hover {
        transform: none !important;
        box-shadow: var(--shadow-md) !important;
    }

    /* Checkbox et radio plus grandes */
    input[type="checkbox"],
    input[type="radio"] {
        width: 20px !important;
        height: 20px !important;
    }
}