/**
 * Margot Projet V2 — Mobile Optimizations
 * Comportement natif app-like, pas de scroll horizontal parasite
 */

/* ============================================================
   1. Prevent horizontal overflow & rubber-band scrolling
   ============================================================ */
html, body {
    overflow-x: hidden;
}

@media (max-width: 1023px) {
    html, body {
        overscroll-behavior-x: none;
        -webkit-overflow-scrolling: touch;
    }
}

.mpv2 {
    overflow-x: hidden;
}

/* ============================================================
   2. Touch-friendly tap targets (min 44px)
   ============================================================ */
@media (max-width: 768px) {
    .mpv2 .tab {
        padding: 10px 14px;
        font-size: 12px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mpv2 .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
        gap: 2px;
        padding: 4px;
    }
    .mpv2 .tabs::-webkit-scrollbar { display: none; }

    .mpv2-btn, .mpv2-btn-sm, .btn-sm {
        min-height: 40px;
        min-width: 40px;
        font-size: 13px;
    }

    .mpv2-btn-icon {
        width: 40px;
        height: 40px;
    }

    /* ============================================================
       3. Project list / cards
       ============================================================ */
    .mpv2 .project-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    /* Separate content from header with visible card effect */
    .mpv2 {
        padding-top: 20px !important;
        margin-top: 12px !important;
        background: #fff !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
    }

    .mpv2 .project-card {
        padding: 16px;
    }

    .mpv2 .project-code { font-size: 14px; }
    .mpv2 .project-name { font-size: 14px; margin-bottom: 4px; }

    .mpv2 .project-meta {
        gap: 8px;
        font-size: 12px;
    }

    .mpv2 .section-title { font-size: 20px; }
    .mpv2 .section-subtitle { font-size: 13px; }
    .mpv2 .btn-new-project { padding: 10px 16px; font-size: 13px; width: 100%; justify-content: center; }

    /* ============================================================
       4. Stats cards — 2 columns on mobile
       ============================================================ */
    .mpv2-ct-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }

    .mpv2-ct-card {
        padding: 10px 12px;
        gap: 8px;
    }

    .mpv2-ct-card-value {
        font-size: 14px;
        line-height: 1.2;
    }

    .mpv2-ct-card-label {
        font-size: 10px;
    }

    .mpv2-ct-card-icon {
        display: none;
    }

    /* ============================================================
       5. Charts — stack vertically
       ============================================================ */
    .mpv2-ct-charts {
        flex-direction: column !important;
    }

    .mpv2-ct-chart-box {
        min-height: 200px;
    }

    /* ============================================================
       6. Detail view — project header
       ============================================================ */
    .mpv2 .detail-header {
        padding: 16px;
    }

    .mpv2 .detail-title {
        font-size: 18px;
    }

    .mpv2 .detail-info {
        flex-direction: column;
        gap: 6px;
        font-size: 12px;
    }

    /* ============================================================
       7. Gantt table — horizontal scroll contained
       ============================================================ */
    .mpv2 .gantt-table {
        font-size: 12px;
    }

    .mpv2 .tab-content {
        padding: 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mpv2 .gantt-bar-cell {
        min-width: 200px;
    }

    .mpv2 .gantt-controls {
        flex-direction: column;
        gap: 8px;
    }

    /* ============================================================
       8. Tenders / Soumissions
       ============================================================ */
    /* Tenders filters */
    .mpv2-tenders-wrapper {
        overflow-x: hidden;
    }

    .mpv2-tenders-filters {
        flex-direction: column;
        gap: 8px;
        padding: 0 0 12px;
    }

    /* Status filters — grid layout to see all */
    .mpv2-tenders-status-filters,
    .mpv2-po-wrapper > div:nth-child(2) > div:first-child {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
        overflow: visible !important;
        white-space: normal !important;
    }

    .mpv2-status-filter {
        white-space: nowrap;
        padding: 7px 6px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
        text-align: center;
        min-height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mpv2-tenders-search input {
        font-size: 14px !important;
    }

    .mpv2-tenders-filters .mpv2-btn {
        width: 100%;
        justify-content: center;
    }

    .mpv2-toggle-filter {
        font-size: 12px;
    }

    /* Tender rows — card layout on mobile */
    .mpv2-tenders-list {
        overflow-x: hidden !important;
    }

    .mpv2-tender-row {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 4px 8px !important;
        padding: 12px !important;
        border-bottom: 1px solid #f1f5f9;
        cursor: pointer;
    }

    .mpv2-tender-row-status { grid-row: 1; grid-column: 1; }
    .mpv2-tender-row-ref { grid-row: 1; grid-column: 2; font-weight: 700; font-size: 13px; align-self: center; }
    .mpv2-tender-row-title { grid-row: 2; grid-column: 1 / -1; font-size: 12px; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mpv2-tender-row-date { grid-row: 3; grid-column: 1 / -1; font-size: 11px; color: #94a3b8; }
    .mpv2-tender-row-counts { display: none !important; }
    .mpv2-tender-row-author { display: none !important; }

    /* Tender stats */
    .mpv2-tenders-stats {
        gap: 4px;
        flex-wrap: wrap;
    }

    .mpv2-stat-badge {
        font-size: 11px;
        padding: 3px 8px;
    }

    /* Tender detail panel */
    .mpv2-detail-cards {
        flex-direction: column;
        gap: 12px;
    }

    .mpv2-detail-card {
        min-width: 0;
        padding: 14px;
    }

    .mpv2-detail-card h4 {
        font-size: 13px;
    }

    .mpv2-detail-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .mpv2-detail-lines {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mpv2-detail-lines h4 {
        font-size: 14px;
    }

    .mpv2-detail-actions {
        padding: 12px 0;
    }

    .mpv2-action-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .mpv2-action-buttons .mpv2-btn {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 12px;
        padding: 8px 12px;
        text-align: center;
        justify-content: center;
    }

    /* ============================================================
       9. Tables — responsive scroll
       ============================================================ */
    .mpv2-table-responsive,
    .mpv2-lines-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mpv2-lines-table {
        font-size: 12px;
    }

    .mpv2-lines-table th,
    .mpv2-lines-table td {
        padding: 8px 10px;
        white-space: nowrap;
    }

    /* ============================================================
       10. PO / BC — status filters grid
       ============================================================ */
    .mpv2-po-wrapper > div:nth-child(2) > div:first-child {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
    }

    .mpv2-po-table-header {
        display: none;
    }

    .mpv2-po-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 12px;
        border-bottom: 1px solid #e2e8f0;
        align-items: center;
    }

    .mpv2-po-cell-status { order: 1; }
    .mpv2-po-cell-numero { order: 2; font-weight: 700; }
    .mpv2-po-cell-supplier { order: 3; flex-basis: 100%; font-size: 13px; }
    .mpv2-po-cell-montant { order: 4; font-weight: 700; color: #1B3A5C; }
    .mpv2-po-cell-source { order: 5; }
    .mpv2-po-cell-date { order: 6; font-size: 11px; color: #94a3b8; }
    .mpv2-po-cell-actions { order: 7; flex-basis: 100%; margin-top: 4px; }
    .mpv2-po-cell-author { display: none; }

    .mpv2-po-actions {
        flex-wrap: wrap;
    }

    /* ============================================================
       11. Supplier cards — single column
       ============================================================ */
    .mpv2-suppliers-grid {
        grid-template-columns: 1fr !important;
    }

    /* ============================================================
       11b. Pagination — fix overflow on mobile
       ============================================================ */
    .mpv2-pagination,
    .mpv2-suppliers-wrapper .mpv2-pagination,
    .mpv2-projects-wrapper .mpv2-pagination,
    #suppliers-pagination,
    #projects-pagination,
    #tenders-pagination,
    #po-pagination,
    #received-pagination,
    #budget-history-pagination,
    #ct-overview-pagination {
        flex-wrap: wrap !important;
        gap: 4px !important;
        justify-content: center;
        overflow-x: hidden;
        padding: 12px 4px;
    }

    .mpv2-page-btn,
    .mpv2-pagination button {
        min-width: 32px;
        height: 32px;
        padding: 0 6px;
        font-size: 12px;
        border-radius: 6px;
    }

    .mpv2-page-info,
    .mpv2-pagination-info {
        flex-basis: 100%;
        text-align: center;
        font-size: 11px;
        order: -1;
        margin-bottom: 4px;
    }

    .mpv2-pagination-buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }

    /* ============================================================
       12. BC Express form
       ============================================================ */
    .mpv2-form-grid {
        grid-template-columns: 1fr !important;
    }

    .mpv2-searchbox-results,
    .mpv2-searchbox-results div {
        font-size: 13px;
    }

    /* ============================================================
       13. Modals — full screen on mobile
       ============================================================ */
    .mpv2-modal-container,
    .mpv2-modal-container.mpv2-modal-wide {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    .mpv2-modal-body {
        padding: 16px;
    }

    .mpv2-modal-header {
        padding: 14px 16px;
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 2;
    }

    .mpv2-modal-footer {
        padding: 12px 16px;
        position: sticky;
        bottom: 0;
        background: #fff;
        z-index: 2;
    }

    /* ============================================================
       14. Documents folders — 3 cols, compact
       ============================================================ */
    [id^="mpv2-docs-folders-"] {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    [id^="mpv2-docs-folders-"] > div {
        padding: 12px 8px !important;
        border-radius: 10px !important;
    }

    [id^="mpv2-docs-folders-"] svg {
        width: 24px !important;
        height: 24px !important;
    }

    /* ============================================================
       15. Dropzone — compact
       ============================================================ */
    .mpv2-dropzone {
        padding: 16px 12px;
        border-radius: 10px !important;
    }

    .mpv2-dropzone svg {
        width: 28px;
        height: 28px;
    }

    .mpv2-dropzone p {
        font-size: 12px !important;
    }

    /* ============================================================
       16. PDF Viewer overlay — full screen
       ============================================================ */
    .mpv2-viewer {
        border-radius: 0 !important;
    }

    .mpv2-viewer .mpv2-pdf-container {
        min-height: 0;
        flex: 1;
    }

    .mpv2-viewer .mpv2-pdf-controls {
        flex-wrap: wrap;
        gap: 4px;
        padding: 8px;
    }

    .mpv2-viewer .mpv2-pdf-controls button {
        font-size: 12px;
        padding: 6px 10px;
        min-height: 36px;
    }

    /* ============================================================
       17. All dynamic modals — full screen on mobile
       ============================================================ */
    #mpv2-signature-modal > div:last-child,
    #mpv2-send-emails-modal > div,
    #mpv2-tender-modal > div:last-child,
    #mpv2-addtask-modal .mpv2-modal-container,
    #mpv2-edit-overlay .mpv2-modal-container {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow-y: auto;
    }

    /* ============================================================
       18. Gantt / Echéancier — horizontal scroll
       ============================================================ */
    .mpv2 .gantt-table {
        font-size: 11px;
    }

    .mpv2 .gantt-table th,
    .mpv2 .gantt-table td {
        padding: 6px 8px !important;
    }

    .mpv2 .gantt-code {
        font-size: 10px;
        padding: 1px 5px;
    }

    .mpv2 .gantt-bar-cell {
        min-width: 180px;
    }

    .mpv2 .gantt-controls {
        gap: 6px;
    }

    .mpv2 .gantt-legend {
        font-size: 11px;
        gap: 8px;
    }

    .mpv2 .gantt-legend-dot {
        width: 10px;
        height: 10px;
    }

    /* ============================================================
       19. BC Express form — compact
       ============================================================ */
    .mpv2-tender-items-table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mpv2-tender-items-table {
        font-size: 12px;
    }

    .mpv2-tender-items-table th,
    .mpv2-tender-items-table td {
        padding: 6px 4px;
    }

    .mpv2-searchbox-results {
        max-height: 200px;
    }

    /* ============================================================
       20. Suivi des coûts — compact cards & tables
       ============================================================ */
    .mpv2-ct-table-section {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mpv2-ct-table-section h4 {
        font-size: 14px;
    }

    .mpv2-ct-table-section table {
        font-size: 12px;
    }

    .mpv2-ct-table-section th,
    .mpv2-ct-table-section td {
        padding: 8px 6px;
        white-space: nowrap;
    }

    /* ============================================================
       21. Detail header — compact on mobile
       ============================================================ */
    .mpv2 .detail-back {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        font-weight: 600;
        color: #1B3A5C;
        background: #fff;
        border: 1px solid #e2e8f0;
        padding: 10px 16px;
        border-radius: 10px;
        margin-bottom: 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    .mpv2 .detail-back:active {
        background: #f1f5f9;
    }

    /* ============================================================
       22. Global — all status filter rows & carousels as grid
       ============================================================ */
    /* Invoice validation month carousel */
    .iv-carousel-wrap,
    .mpv2-carousel-wrap {
        overflow: visible !important;
    }

    .iv-carousel-inner,
    .mpv2-carousel-inner,
    .mpv2-month-nav,
    .mpv2-project-nav {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px !important;
        overflow: visible !important;
        flex-wrap: wrap !important;
    }

    .iv-carousel-inner a,
    .mpv2-carousel-inner a,
    .mpv2-month-link,
    .mpv2-project-link {
        text-align: center;
        font-size: 11px !important;
        padding: 8px 4px !important;
        white-space: nowrap;
    }

    .iv-carousel-arrow,
    .mpv2-carousel-arrow {
        display: none !important;
    }

    /* ============================================================
       23. Global — ALL inputs, dates, selects across all plugins
       ============================================================ */
    .mpv2 * {
        -webkit-tap-highlight-color: transparent;
    }

    /* Prevent zoom on input focus (iOS) + uniform style */
    input, select, textarea {
        font-size: 16px !important;
    }

    /* All date inputs — visible with clear borders */
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"] {
        padding: 12px 14px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 10px !important;
        background: #fff !important;
        color: #1e293b !important;
        font-size: 16px !important;
        min-height: 44px !important;
        width: 100% !important;
        appearance: none;
        -webkit-appearance: none;
    }

    input[type="date"]:focus,
    input[type="datetime-local"]:focus,
    input[type="time"]:focus {
        border-color: #E8A630 !important;
        box-shadow: 0 0 0 3px rgba(232,166,48,0.12) !important;
        outline: none !important;
    }

    /* All search/text inputs */
    .mpv2-input,
    .mpv2-search-input,
    input[type="text"][placeholder*="echerch"],
    input[type="text"][placeholder*="ournisseur"],
    input[type="text"][placeholder*="rojet"],
    input[type="email"],
    input[type="number"],
    input[type="tel"] {
        padding: 12px 14px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 10px !important;
        background: #fff !important;
        font-size: 16px !important;
        min-height: 44px !important;
        width: 100% !important;
    }

    .mpv2-input:focus,
    .mpv2-search-input:focus {
        border-color: #E8A630 !important;
        box-shadow: 0 0 0 3px rgba(232,166,48,0.12) !important;
        outline: none !important;
    }

    /* All selects */
    select,
    .mpv2-select {
        padding: 12px 14px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 10px !important;
        background: #fff !important;
        font-size: 16px !important;
        min-height: 44px !important;
        width: 100% !important;
    }

    /* All textareas */
    textarea,
    .mpv2-textarea {
        padding: 12px 14px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 10px !important;
        font-size: 16px !important;
        width: 100% !important;
    }

    /* Maestro search */
    #maestro-project-search {
        padding: 12px 14px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 10px !important;
        min-height: 44px !important;
    }

    /* Consistent tab content padding */
    .mpv2 .tab-content {
        padding: 14px !important;
    }

    /* All action button rows */
    .mpv2-po-actions,
    .mpv2-action-buttons {
        gap: 4px !important;
    }

    .mpv2-po-actions .mpv2-btn,
    .mpv2-po-actions .mpv2-btn-sm {
        font-size: 11px !important;
        padding: 6px 8px !important;
        min-height: 34px !important;
    }
}

/* ============================================================
   Small phones (< 400px)
   ============================================================ */
@media (max-width: 400px) {
    .mpv2-ct-cards {
        grid-template-columns: 1fr !important;
    }

    .mpv2 .tab {
        padding: 8px 10px;
        font-size: 11px;
    }

    .mpv2-stat-badge {
        font-size: 10px;
        padding: 2px 6px;
    }

    .mpv2-tenders-stats {
        gap: 4px;
    }
}