/* ============================================
   TERA APP - Responsive Mobile
   Zéro scroll horizontal, tableaux en cards
   ============================================ */

html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

.page-content,
.main-content,
.app-container {
    overflow-x: hidden;
}

@media (max-width: 992px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    div[style*="grid-template-columns: repeat(auto-fit, minmax(400px"] {
        grid-template-columns: 1fr !important;
    }

    .page-title {
        font-size: 1.1rem;
    }
}

@media (max-width: 768px) {

    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }

    .stat-card { padding: 14px !important; }
    .stat-value { font-size: 1.1rem !important; word-break: break-all; }
    .stat-label { font-size: 0.75rem !important; }
    .stat-icon { width: 36px !important; height: 36px !important; }
    .stat-icon i { font-size: 14px !important; }
    .stat-trend { font-size: 0.7rem !important; }

    .page-content { padding: 14px !important; }

    .card-header {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-start !important;
        padding: 14px !important;
    }

    .card-header .btn { width: 100%; justify-content: center; }
    .card-title { font-size: 1rem !important; }
    .card-body { padding: 10px !important; }

    .filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 0 !important;
        margin-bottom: 12px !important;
    }

    .filter-bar input,
    .filter-bar select,
    .filter-bar .month-filter { width: 100% !important; }

    .quick-actions { flex-direction: column; gap: 8px; }
    .quick-action-btn { padding: 10px 14px; font-size: 0.85rem; }

    .header { padding: 0 12px !important; height: 56px !important; }
    .header-left h1 { font-size: 1rem !important; }

    .sidebar-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,0.12);
        color: #fff;
        border: none;
        width: 34px;
        height: 34px;
        border-radius: 8px;
        font-size: 18px;
        cursor: pointer;
        margin-left: auto;
        transition: background 0.2s;
    }
    .sidebar-close:active { background: rgba(255,255,255,0.25); }
    .sidebar-header { display: flex; align-items: center; }

    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.45);
        z-index: 998;
    }
    .sidebar.active ~ .sidebar-overlay { display: block; }

    /* ---- TABLEAUX → CARDS 2 COLONNES ---- */

    .table-container {
        overflow-x: visible !important;
        overflow: visible !important;
    }

    .data-table thead,
    .newtable thead { display: none !important; }

    .data-table tbody tr,
    .newtable tbody tr {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 6px 12px;
        padding: 14px;
        margin-bottom: 10px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06);
        border: 1px solid #e5e7eb;
    }

    .data-table tbody td,
    .newtable tbody td {
        display: flex !important;
        flex-direction: column;
        padding: 4px 0 !important;
        border: none !important;
        font-size: 0.85rem;
        word-break: break-word;
        min-width: 0;
    }

    .data-table tbody td::before,
    .newtable tbody td::before {
        content: attr(data-label);
        font-size: 0.7rem;
        font-weight: 600;
        color: #9ca3af;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 2px;
    }

    .data-table tbody td:last-child,
    .newtable tbody td:last-child {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: flex-end;
        gap: 8px;
        padding-top: 8px !important;
        margin-top: 4px;
        border-top: 1px solid #f3f4f6 !important;
    }

    .data-table tbody td .badge,
    .newtable tbody td .badge {
        font-size: 0.7rem;
        padding: 3px 8px;
        align-self: flex-start;
    }

    /* DataTables contrôles */
    .dataTables_wrapper { overflow: visible !important; }
    .dataTables_wrapper .dataTables_filter { float: none !important; text-align: left !important; margin-bottom: 10px; }
    .dataTables_wrapper .dataTables_filter input { width: 100% !important; margin-left: 0 !important; }
    .dataTables_wrapper .dataTables_info { float: none !important; text-align: center !important; font-size: 12px !important; padding: 8px 0 !important; }
    .dataTables_wrapper .dataTables_paginate { float: none !important; text-align: center !important; padding: 8px 0 !important; }
    .dataTables_wrapper .dataTables_paginate .paginate_button { padding: 4px 10px !important; font-size: 12px !important; margin: 2px !important; }

    /* ---- Modal mobile : centré en haut ---- */
    .modal-overlay {
        align-items: flex-start !important;
        justify-content: center !important;
        padding: 16px 12px !important;
    }

    .modal {
        width: 95% !important;
        max-width: 95% !important;
        margin: 0 auto !important;
        border-radius: 14px !important;
        max-height: calc(100vh - 32px) !important;
        transform: translateY(-30px) !important;
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease !important;
    }

    .modal-overlay.active .modal {
        transform: translateY(0) !important;
        opacity: 1;
    }

    .modal-header {
        padding: 16px !important;
        position: sticky;
        top: 0;
        background: var(--white, #fff);
        z-index: 2;
        border-radius: 14px 14px 0 0;
    }

    .modal-body {
        padding: 16px !important;
        max-height: calc(100vh - 160px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .modal-footer {
        padding: 12px 16px !important;
        position: sticky;
        bottom: 0;
        background: var(--gray-50, #f9fafb);
        z-index: 2;
        border-radius: 0 0 14px 14px;
    }

    .modal-title { font-size: 1.1rem !important; }

    .modal-body div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Dropdown action : centré à l'écran */
    .dropdown {
        position: static !important;
    }

    .dropdown-menu {
        position: absolute !important;
        top: auto !important;
        bottom: auto !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) translateY(-10px) !important;
        width: calc(100vw - 32px) !important;
        min-width: auto !important;
        max-width: 380px !important;
        border-radius: 14px !important;
        z-index: 3000 !important;
        max-height: 50vh;
        overflow-y: auto;
        padding: 8px 0 !important;
        box-shadow: 0 8px 30px rgba(0,0,0,0.18) !important;
        transition: transform 0.25s ease, opacity 0.25s ease !important;
        opacity: 0 !important;
        visibility: hidden !important;
        margin-top: 8px;
    }

    .dropdown.active .dropdown-menu {
        transform: translateX(-50%) translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Overlay derrière le dropdown — fixé en fond, ne doit jamais
       recouvrir le menu lui-même ni intercepter ses taps */
    .dropdown.active::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 2998;
    }

    /* Le menu et ses items sont dans un contexte d'empilement isolé,
       toujours au-dessus de l'overlay. fixed + isolation garantit que
       le tap atteint bien l'item (et non l'overlay en dessous). */
    .dropdown.active .dropdown-menu {
        z-index: 3000 !important;
        isolation: isolate;
        pointer-events: auto !important;
    }

    .dropdown-item {
        padding: 14px 20px !important;
        font-size: 0.95rem;
        cursor: pointer;
        position: relative;
        z-index: 1;
        pointer-events: auto !important;
        -webkit-tap-highlight-color: rgba(0,0,0,0.05);
        touch-action: manipulation;
    }

    /* Les enfants (icône, texte) ne doivent pas voler le tap à l'item :
       le clic est toujours résolu sur le .dropdown-item porteur du onclick */
    .dropdown-item * {
        pointer-events: none;
    }

    .dropdown-item:active {
        background: #f3f4f6 !important;
    }

    .btn { font-size: 0.85rem !important; padding: 8px 14px !important; }
    .btn-sm { padding: 6px 10px !important; font-size: 0.75rem !important; }

    .data-table tbody td img,
    .newtable tbody td img { max-width: 60px !important; height: auto !important; border-radius: 8px; }
}

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr 1fr !important; gap: 8px; }
    .stat-card { padding: 10px !important; }
    .stat-value { font-size: 1rem !important; }
    .page-content { padding: 10px !important; }
    .data-table tbody tr, .newtable tbody tr { padding: 12px; gap: 4px 10px; }
    .data-table tbody td, .newtable tbody td { font-size: 0.8rem; }
    .header { padding: 0 10px !important; }
    .header-left h1 { font-size: 0.9rem !important; }
    .user-avatar { width: 32px !important; height: 32px !important; font-size: 0.8rem !important; }
    .modal-body { padding: 12px !important; max-height: calc(100vh - 140px) !important; }
    .login-page { padding: 8px !important; }
    .login-form-container { padding: 16px !important; }
    .login-branding h1 { font-size: 1.5rem !important; }
    .login-form-header h2 { font-size: 1.3rem !important; }
}

@media (max-width: 360px) {
    .stats-grid { grid-template-columns: 1fr !important; }
    .data-table tbody tr, .newtable tbody tr { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .swal2-popup, .sweet-alert { width: 90% !important; font-size: 0.9rem !important; }
}

/* Anti-débordement */
.table-container { max-width: 100%; }
img { max-width: 100%; height: auto; }
input, select, textarea, button { max-width: 100%; }
td, th { word-wrap: break-word; overflow-wrap: break-word; }
.data-table td, .newtable td { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* =====================================================================
   Fallback orientation paysage (mobile)
   ---------------------------------------------------------------------
   Caché par défaut. Affiché uniquement quand un appareil tactile mobile
   est tenu en paysage. Couvre les cas où le verrouillage natif ne
   s'applique pas (iOS, navigateur classique). En PWA Android le manifest
   empêche déjà la rotation, donc cet écran ne s'y affiche pas.
   ===================================================================== */
.orientation-lock { display: none; }

@media only screen and (max-width: 920px) and (orientation: landscape) and (pointer: coarse) {
    .orientation-lock {
        display: flex !important;
        position: fixed;
        inset: 0;
        z-index: 99999;
        background: #06621e;
        color: #fff;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 24px;
    }
    .orientation-lock-inner i {
        font-size: 56px;
        color: #F9D406;
        animation: tv-rotate-hint 1.8s ease-in-out infinite;
        display: inline-block;
    }
    .orientation-lock-inner p {
        font-size: 1.1rem;
        font-weight: 600;
        margin: 18px 0 6px;
        line-height: 1.4;
    }
    .orientation-lock-inner small {
        font-size: 0.85rem;
        opacity: 0.85;
    }
    @keyframes tv-rotate-hint {
        0%, 100% { transform: rotate(0deg); }
        50%      { transform: rotate(-90deg); }
    }
    /* Empêche le scroll de l'app derrière l'écran de blocage */
    body { overflow: hidden; }
}