/* Phone layout for the legacy desktop shell. Touch devices only: a narrow desktop window has a fine
   pointer and never matches, so nothing here can change the desktop. Keep EVERY rule inside the block
   below; tests/MobileCssGuardTest.php fails otherwise. */
@media screen and (max-width: 767px) and (pointer: coarse) {
    /* Root cause: design.php sets an inline width of 1500px on the page container. */
    #container_prog { width: auto !important; padding-left: 10px; padding-right: 10px; }
    .contenu-lord { padding-left: 0 !important; }

    /* Dossier columns: folded behind the "Dossiers (n)" button that js/mobile.js adds, stacked when open. */
    .columns-area { padding-top: 0 !important; }
    .columns-area.m-collapsed { display: none !important; }
    #div_folders, #div_folders_positive, #div_folders_negative {
        position: static !important; width: auto !important; height: auto !important; margin: 0 0 8px 0 !important;
    }
    #mobile_folders_toggle { margin: 6px 0; min-height: 36px; }

    /* Filter bars: JS (positionUnifiedFilter) writes left/width inline, hence !important. */
    #unified_filter_container, .well[style*="width: 750px"] {
        position: static !important; width: auto !important; left: auto !important; max-width: 100%;
    }

    /* Desktop-only "hide the negative column" button: it pushed the filter row 22px past the screen, and the
       phone folds the columns with its own Dossiers toggle. */
    #toggle_columns { display: none !important; }

    /* Modals: style.css forces 50% width, and openWindowNewClient() injects .modal{left:50%} and
       #clientAddModal{transform} at click time, after this file, hence the body/ID prefixes. */
    body .modal, body .modal.fade, body .modal.fade.in, body #clientAddModal {
        left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important;
        margin: 0 8px !important; top: 10px !important; transform: none !important;
    }
    body .modal-dialog { width: auto !important; max-width: 100% !important; margin: 0 !important; }
    /* ClientNouveau.php hard-codes min-width:675px in a style block loaded after this file. */
    #clientAddModal .client-new-container, #clientAddModal .wizard-progress,
    #clientAddModal .wizard-content, #clientAddModal .wizard-section { min-width: 0 !important; }
    .jquery-doringui-popup { max-width: calc(100vw - 16px) !important; }

    /* Tables. js/mobile.js tags them: read-only ones become cards, the rest scroll sideways. */
    #div_content table.m-scroll { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
    #div_content table.m-scroll th, #div_content table.m-scroll td { min-width: 84px; }
    #div_content table.m-scroll textarea { min-width: 200px; }
    /* Tables js/mobile.js never tags (no .table class, JS-built, nested are left alone): still cannot widen the page. */
    #div_content table:not(.m-cards):not(.m-scroll):not(table table) { display: block; max-width: 100%; overflow-x: auto; }
    #div_content table.m-scroll .m-stick { position: sticky; left: 0; background: #fff; z-index: 1; min-width: 140px; box-shadow: 2px 0 3px rgba(0,0,0,.12); }
    #div_content table.m-cards, .m-cards thead, .m-cards tbody, .m-cards tfoot, .m-cards tr, .m-cards td, .m-cards th {
        display: block; width: auto !important; max-width: 100%;
    }
    .m-cards .m-head, .m-cards thead { display: none; }
    .m-cards tr { border: 1px solid #ccc; border-radius: 6px; margin: 0 0 8px 0; padding: 4px 8px; background: #fff; }
    .m-cards td, .m-cards th { border: 0 !important; padding: 3px 0 !important; text-align: left !important; background: transparent !important; }
    .m-cards td[data-label]:not([data-label=""])::before { content: attr(data-label) " : "; font-weight: bold; color: #555; }
    .m-cards .m-dash { display: none; }

    /* 16px inputs stop iOS zooming on focus. */
    input, select, textarea { font-size: 16px !important; }

    /* Navbar: compact bar, and compact items once the burger menu is open. */
    .navbar-fixed-top .navbar-inner { min-height: 0; padding-top: 0; padding-bottom: 0; }
    .navbar .brand { padding: 6px 10px; font-size: 16px; line-height: 20px; }
    .navbar .btn-navbar { margin: 5px; padding: 6px 9px; }
    .navbar .nav-collapse .nav > li > a { padding: 6px 12px; line-height: 20px; }
    .navbar .nav-collapse .dropdown-menu a { padding: 6px 12px; }

    /* Invoice view. */
    /* Print toggles: .btn-group is nowrap and made the page 715px wide. Wrap them as separate buttons. */
    #facture_print_toggles { white-space: normal; display: flex; flex-wrap: wrap; gap: 4px; }
    #facture_print_toggles > .btn, #facture_print_toggles > .btn + .btn { margin-left: 0; border-radius: 4px; min-height: 36px; }

    /* Invoice lines as cards: ClientFactureInfo.php's inline <style> forces min-height 50px, padding 8px and
       centred PRIX BRUT/NET cells with !important, which beat the generic .m-cards rules above. */
    #div_client_info_content .table.m-cards td { min-height: 0 !important; padding: 3px 0 !important; text-align: left !important; }
    #div_client_info_content .badge[rel^="badge_"] { margin: 3px 0 0 0 !important; }
    /* Totals / payment rows (colspan, tagged m-flat): label and value side by side instead of stacked. */
    #div_client_info_content .m-cards tr.m-flat { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
    #div_client_info_content .m-cards tr.m-flat input[type="text"] { width: 7em !important; }
    #div_client_info_content .m-cards tr.m-flat:has(> td[style*="height: 20px"]) { display: none; }


    /* Filter bar. */
    /* Filter row: the input's intrinsic width (~191px) pushed the € button 8px out of the well. Inline styles, hence !important. */
    #unified_filter_container { padding: 10px !important; box-sizing: border-box; }
    #unified_dossier_filter { min-width: 0; width: 100%; }
    #unified_filter_container .btn { flex: 0 0 auto; }

    /* Modals. */
    /* The "body .modal-body{max-height:70vh}" rule above loses to index_login.js' injected
       ".modal-body{max-height:100% !important}" and to inline styles (productAddModal), so the cap is
       restated with !important. The modal itself scrolls as a backstop (dvh: iOS toolbar). */
    body .modal { max-height: calc(100vh - 20px) !important; max-height: calc(100dvh - 20px) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
    body .modal .modal-body { max-height: calc(100vh - 170px) !important; max-height: calc(100dvh - 170px) !important; overflow: auto !important; }

    /* Modals whose own <style> pins "#id.in{left:50%;transform:translateX(-50%)}" (ClientCommande.php)
       or whose inline style carries "left:72% !important" (ClientFactureInfo.php, nothing outranks inline
       !important, so the offset is cancelled by a margin of -72% instead). ID selectors to win. */
    body #moveProductsModal.in, body #orderManagementModal.in {
        left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important;
        margin: 0 8px !important; top: 10px !important; transform: none !important;
    }
    body #factureDeliveryHistoryModal {
        width: calc(100vw - 16px) !important; max-width: none !important; transform: none !important;
        margin: 0 8px 0 calc(8px - 72%) !important; top: 10px !important;
    }

    /* Inline px widths inside modal bodies (ProduitOptionEdit/Add form 600px, inputs 284/398/586px,
       deleteProductsReason 95%...) cap at the dialog width. */
    body .modal [style*="width"] { max-width: 100% !important; }
    body .modal input[style*="width"], body .modal select[style*="width"], body .modal textarea[style*="width"] { box-sizing: border-box !important; }
    /* ProduitNouveau.php hard-codes min-width:550px in a style block injected after this file. */
    #productAddModal .product-new-container, #productAddModal .wizard-progress,
    #productAddModal .wizard-content, #productAddModal .wizard-section { min-width: 0 !important; max-width: 100% !important; }

    /* dossier_pdf_import.js pins its geometry (innerWidth * 0.92) inline, which already fits; only its
       fixed-layout table (34+135+74+105+105px of fixed columns) squeezes the designation column to nothing. */
    body #pdfImportTable { min-width: 640px; }
    body #pdfImportReviewBar { flex-wrap: wrap; }

    /* Tappable buttons. */
    body .modal-footer .btn, body .modal-footer .btn + .btn { min-height: 44px; margin-bottom: 6px; }
    body .modal-header .close { font-size: 28px; line-height: 1; padding: 8px 12px; margin: -6px -6px 0 0; }

    /* Fixed toasts (client_commande.js, client_notifications.js, ClientHistorique.php): min-width:300px + right:20px
       leaves no room at 320px. */
    body [style*="position: fixed"][style*="; right: 20px"] { min-width: 0 !important; max-width: calc(100vw - 24px) !important; right: 12px !important; }
    /* Some runtime-built modals (categoryAddModal) left the body 50px short of the dialog (content-box + 15px padding). */
    body .modal .modal-body { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; }

    /* Product breadcrumb (CategoriesGet.php): inline position:fixed floats over the items while scrolling.
       Let it flow with the page and wrap long trails. */
    div[style*="position: fixed"][style*="margin-top: 50px"] { position: static !important; margin-top: 6px !important; z-index: auto !important; width: auto !important; max-width: 100% !important; }
    div[style*="position: fixed"][style*="margin-top: 50px"] > div[style*="display: table"] { display: block !important; }
    div[style*="position: fixed"][style*="margin-top: 50px"] .breadcrumb li { display: inline-block; }

    /* Dossier cards. */
    /* Dossier editor #products-table (js/mobile.js tags it m-cards, never m-scroll). Only display/layout: the header row
       (bulk controls) becomes an "Actions groupées" panel, each product row a card. Flex-basis is used instead of width
       because ClientCommande.php pins widths inline with !important, which no stylesheet can beat. */
    #div_content #products-table.m-cards tr.m-head { display: flex; flex-wrap: wrap; background: #f4faff; border-color: #49B0FF; }
    #div_content #products-table.m-cards tr.m-head::before { content: "Actions groupées"; flex: 0 0 100%; font-weight: bold; }
    #div_content #products-table.m-cards tr.m-head > th { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 !important; }
    /* "Tout sélectionner": real <label> injected by js/mobile.js. */
    #div_content #products-table.m-cards tr.m-head .m-selall-label { display: inline-flex; align-items: center; min-height: 36px; padding: 0 8px; font-weight: bold; }

    #div_content #products-table.m-cards tr[data-dossier-produit-id] { display: flex; flex-wrap: wrap; align-items: center; padding: 6px 8px; }
    #div_content #products-table.m-cards tr[data-dossier-produit-id] > td { display: flex; flex-wrap: wrap; align-items: center; flex: 0 0 100%; min-height: 40px; box-sizing: border-box; }
    #div_content #products-table.m-cards tr[data-dossier-produit-id] > td.m-empty { display: none; }
    /* Title line: checkbox + product (buttons, reference, textarea). */
    #div_content #products-table.m-cards tr[data-dossier-produit-id] > td:nth-child(1) { flex: 0 0 40px; }
    #div_content #products-table.m-cards tr[data-dossier-produit-id] > td:nth-child(2) { display: block; flex: 1 1 0; min-width: 0; }
    #div_content #products-table.m-cards tr[data-dossier-produit-id] > td:nth-child(-n+2)::before { content: none; }
    #div_content #products-table.m-cards tr[data-dossier-produit-id] > td:nth-child(2) textarea { width: 100%; min-height: 64px; box-sizing: border-box; }
    #div_content #products-table.m-cards tr[data-dossier-produit-id] > td:nth-child(2) > .btn { text-align: center; }
    /* Label : value lines. */
    #div_content #products-table.m-cards td[data-label]::before { flex: 0 0 5.5em; }
    #div_content #products-table.m-cards tr[data-dossier-produit-id] > td input:not([type="checkbox"]):not([type="hidden"]) { flex: 1 1 0; min-width: 0; min-height: 40px; }
    #div_content #products-table.m-cards tr[data-dossier-produit-id] > td > span[id^="dossier_produit_prix_vente_unitaire_ht_"] { flex: 1 1 0; min-width: 0; }
    #div_content #products-table.m-cards tr[data-dossier-produit-id] > td > span > input { width: 100% !important; box-sizing: border-box; }
    #div_content #products-table.m-cards input[type="checkbox"] { width: 36px; height: 36px; margin: 0; }
    /* Stock hints under the quantity go on their own line. */
    #div_content #products-table.m-cards tr[data-dossier-produit-id] > td:nth-child(8) > div[style*="margin-top"] { flex: 0 0 100%; padding-left: 5.5em; box-sizing: border-box; }
    /* Advised-discount / advised-price badges: ClientCommande.php centres the first one absolutely. */
    #div_content #products-table.m-cards .badge[rel^="badge_"] { position: static; transform: none; flex: 0 0 auto; margin: 0 0 0 8px !important; }

    /* Rows with colspan (new reference, totals; tagged m-flat). */
    #div_content #products-table.m-cards tr.m-flat { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
    #div_content #products-table.m-cards tr.m-flat > td { flex: 0 1 auto; }
    #div_content #products-table.m-cards tr.m-flat > td[colspan] { flex: 1 1 0; text-align: right !important; }
    #div_content #products-table.m-cards tr.m-flat > td[colspan="10"] { flex: 1 1 100%; text-align: left !important; }
    #div_content #products-table.m-cards tr.m-flat .pull-right { float: none; }
    #div_content #products-table.m-cards tr.m-flat > td[colspan="10"] > span.btn { float: none !important; margin: 0 6px 6px 0 !important; }
    #div_content #products-table.m-cards #folder_reference_autocomplete { display: block; max-width: calc(100% - 26px); min-height: 40px; }

    /* One height for the in-content buttons (they ranged 26-58px: stretched by min-height + !important padding). */
    #unified_filter_container .btn,
    #div_content #products-table.m-cards tr.m-head .btn,
    #div_content #products-table.m-cards tr[data-dossier-produit-id] > td:nth-child(2) > .btn,
    #div_content #products-table.m-cards tr.m-flat > td[colspan="10"] > span.btn {
        height: 36px !important; min-height: 0 !important; min-width: 36px; padding: 0 12px !important; line-height: 34px !important; box-sizing: border-box; }
    #unified_dossier_filter, #div_content #products-table.m-cards tr.m-head input[type="text"] { height: 36px !important; min-height: 0 !important; }

    /* Small icon buttons inside cards (payment edit / delete): same 36px tap size and gap as the other buttons. */
    #div_content .m-cards td .btn-mini { height: 36px !important; min-width: 36px; padding: 0 10px !important; line-height: 34px; margin: 0 6px 0 0 !important; box-sizing: border-box; }

    /* Totals rows (Total Hors TVA / TVA / Total à payer): label left, number right, with room between and inside. */
    #div_content #products-table.m-cards tr.m-flat > td[colspan="9"] { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-start; text-align: left !important; padding: 8px 12px !important; }
    #div_content #products-table.m-cards tr.m-flat > td[colspan="9"] + td { flex: 0 0 auto; text-align: right !important; padding: 8px 12px !important; font-weight: bold; }

    /* Bulk-actions panel: one control per row, aligned as label | P | field | extra button (it wrapped unevenly). */
    #div_content #products-table.m-cards tr.m-head { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; }
    #div_content #products-table.m-cards tr.m-head > th:not(:nth-child(1)) { display: grid; grid-template-columns: 64px 36px minmax(0, 1fr) auto; align-items: center; column-gap: 8px; width: 100%; }
    #div_content #products-table.m-cards tr.m-head > th:nth-child(3) { grid-template-columns: 64px auto; }
    #div_content #products-table.m-cards tr.m-head > th input[type="text"] { width: 100% !important; min-width: 0; flex: none; }
    /* Produit, BRUT, Qté, TOTAL carry no bulk control. */
    #div_content #products-table.m-cards tr.m-head > th:nth-child(2), #div_content #products-table.m-cards tr.m-head > th:nth-child(5),
    #div_content #products-table.m-cards tr.m-head > th:nth-child(8), #div_content #products-table.m-cards tr.m-head > th:nth-child(10) { display: none !important; }

    /* Same-type buttons, same size: stand-alone action buttons (tagged .m-btn by mobile.js) are full-width blocks
       with one height, padding and gap; button groups (Enregistrer + caret) follow the same rhythm. */
    #div_content .m-btn { display: block; float: none !important; width: 100% !important; box-sizing: border-box;
        height: auto !important; min-height: 36px !important; padding: 8px 12px !important; line-height: 20px !important;
        margin: 0 0 6px 0 !important; text-align: center; white-space: normal; }
    /* The display:block above must not resurrect a hidden button. */
    #div_content .m-btn[style*="display: none"], #div_content .m-btn[style*="display:none"], #div_content .m-btn.hide { display: none !important; }
    #div_content .m-btngroup { display: flex; width: 100%; margin: 0 0 6px 0 !important; }
    #div_content .m-btngroup > .btn { height: 36px !important; line-height: 34px !important; padding: 0 12px !important; box-sizing: border-box; }
    #div_content .m-btngroup > .btn:first-child { flex: 1 1 auto; }
    #div_content .m-btngroup > .dropdown-toggle { flex: 0 0 40px; }
    #orderManagementButtonWrapper { margin: 0 !important; }
    /* Rows that lay their buttons side by side with an inline flex style (Imprimer / Bon de livraison | Enregistrer): stack them. */
    #div_content div[style*="justify-content: space-between"]:has(.m-btn, .m-btngroup) { flex-wrap: wrap !important; }
    #div_content div[style*="justify-content: space-between"]:has(.m-btn, .m-btngroup) > * { flex: 1 1 100% !important; width: 100% !important; margin: 0 0 6px 0 !important; }

    /* Bootstrap 2 input-append / input-prepend groups are nowrap: a row of select + inputs + add-ons (Heures supp.
       "new entry") ran to 579px. Let them wrap as a flex row. */
    #div_content .well:has(#new_user_id) .input-append, #div_content .well:has(#new_user_id) .input-prepend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; white-space: normal; }
    #div_content .well:has(#new_user_id) .input-append input, #div_content .well:has(#new_user_id) .input-prepend input { min-width: 0; }
    #div_content .well:has(#new_user_id) .input-append .hide, #div_content .well:has(#new_user_id) .input-prepend .hide { display: none !important; }
    /* Panel headings are white on the light grey wells (Heures supp.): illegible on a phone. */
    #div_content .well > h4 { color: #333; }
    #div_content .well, #div_content .well label { color: #333; }

    /* No pinch-zoom on phones (owner request); js/mobile.js also stops the iOS gesture events. */
    html, body { touch-action: pan-x pan-y; }

    /* Login step 2 (TOTP code / enrolment with QR): centred. */
    [id^="login_enrol_block"], [id^="login_totp_block"] { text-align: center; }
    [id^="login_enrol_msg"] img, [id^="login_enrol_msg"] canvas, [id^="login_enrol_msg"] svg { display: block; margin: 0 auto 10px auto; max-width: 100%; height: auto; }
    [id^="login_enrol_block"] input, [id^="login_totp_block"] input { display: block; margin-left: auto; margin-right: auto; text-align: center; max-width: 100%; box-sizing: border-box; }
}