/* LASA System — mobile usability layer (P3, 2026-10-24).
 * Loaded after app.css on every page that uses layouts.head.
 * Phone rules are inside max-width:767.98px so the desktop layout is unchanged,
 * except the forgot/reset password pages, which now match the LASA red login page. */

@media (max-width: 767.98px) {
    /* iPhone zooms the page when a focused field is below 16px */
    .form-control, .form-select, select, textarea,
    input[type="text"], input[type="email"], input[type="password"], input[type="search"],
    input[type="number"], input[type="tel"], input[type="date"], input[type="url"],
    .dataTables_filter input, .dataTables_length select, .select2-search__field {
        font-size: 16px !important;
    }
    .form-control, .form-select, .dataTables_length select, .dataTables_filter input { min-height: 44px; }
    .dataTables_length select { min-width: 76px; }

    /* Tap targets: at least 44 x 44 */
    .btn:not(.btn-close) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .35em;
    }
    .input-group > .btn { min-width: 44px; }
    .page-link {
        min-width: 44px; min-height: 44px;
        display: flex; align-items: center; justify-content: center;
    }
    .right-bar-toggle {
        display: inline-flex; min-width: 44px; min-height: 44px;
        align-items: center; justify-content: center;
    }
    .dropdown-menu .dropdown-item { padding-top: .7rem; padding-bottom: .7rem; }
    #sidebar-menu ul li a { min-height: 44px; }
    .select2-container .select2-selection--single { min-height: 44px; }
    .select2-container .select2-selection--single .select2-selection__rendered { line-height: 42px; }
    .select2-container .select2-selection--single .select2-selection__arrow { height: 42px; }

    /* Wide tables scroll sideways inside their card instead of being cut off
       (lasa-mobile.js wraps only the tables that do not fit) */
    .lasa-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

    /* ---- P3b 2026-10-24: whole workflows on a phone ---- */
    /* Icon-only action buttons in lists (view / finalize / print / mail / edit stock) were 31px wide */
    .btn-sm { min-width: 44px; }
    #scrollButton { width: 44px; height: 44px; }
    .modal .btn-close {
        box-sizing: border-box; width: 44px; height: 44px; padding: 0; flex: 0 0 44px;
        margin: -10px -10px -10px auto; background-size: 14px;
    }
    /* Auto-save "Unsaved changes" pill is information only: let taps reach the buttons under it */
    #draftStatusBar { pointer-events: none; bottom: 8px !important; right: 8px !important; padding: 6px 12px !important; font-size: .8rem; }
    /* Scan & Ship: branch picker and the trash button in session history */
    #branchSelect { min-height: 44px; }
    button[title="Remove"] { min-width: 44px; min-height: 44px; }

    /* "+" detail rows of DataTables: use the full width so badges are not cut */
    table.dataTable > tbody > tr.child ul.dtr-details { display: block; width: 100%; }
    table.dataTable > tbody > tr.child .badge { white-space: normal; text-align: left; }

    /* Invoice / quotation item tables (#table_product_order, 21 screens):
       lasa-mobile.js adds .lasa-stack and data-label; each product line becomes a card,
       totals become right-aligned "label  value" lines. No sideways scrolling. */
    table.lasa-stack, table.lasa-stack > tbody { display: block; width: 100%; }
    table.lasa-stack > thead { display: none; }
    table.lasa-stack > tbody > tr { display: block; }
    table.lasa-stack > tbody > tr > td { border: 0 !important; box-shadow: none !important; background: transparent !important; }
    table.lasa-stack > tbody > tr.lasa-item {
        border: 1px solid #dfe3ea; border-radius: 10px; margin: 0 0 12px; padding: 6px 12px; background: #fff;
    }
    table.lasa-stack > tbody > tr.lasa-item > td {
        display: flex; align-items: center; gap: 10px; width: auto !important; padding: 6px 0;
    }
    table.lasa-stack > tbody > tr.lasa-item > td::before {
        content: attr(data-label); flex: 0 0 32%; font-size: 13px; font-weight: 600; color: #555;
    }
    table.lasa-stack > tbody > tr.lasa-item > td > * { flex: 1 1 auto; min-width: 0; }
    table.lasa-stack > tbody > tr.lasa-item .input-group { flex-wrap: nowrap; }
    table.lasa-stack > tbody > tr.lasa-item .select2-container { width: 100% !important; }
    table.lasa-stack > tbody > tr.lasa-sum {
        display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
        gap: 4px 12px; padding: 6px 0; border-bottom: 1px solid #eef0f4;
    }
    table.lasa-stack > tbody > tr.lasa-sum > td { padding: 4px 0; text-align: right !important; }
    table.lasa-stack > tbody > tr.lasa-sum > td input.form-control { width: 140px; }
    table.lasa-stack > tbody > tr > td.lasa-empty,
    table.lasa-stack > tbody > tr > td.hidden { display: none !important; }
}

/* ---------- Forgot / reset password pages (layouts.master-without-nav) ---------- */
body.authentication-bg {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
    min-height: 100vh;
}
body.authentication-bg .home-btn a { color: rgba(255, 255, 255, .7) !important; }
body.authentication-bg .account-pages {
    margin: 0 !important; padding: 24px 0 !important;
    min-height: 100vh; display: flex; align-items: center;
}
/* was: container padding 5px vs row margin -10px => page 5px wider than the phone */
body.authentication-bg .account-pages .container { padding-left: 16px; padding-right: 16px; }
body.authentication-bg .account-pages .row { margin-left: 0; margin-right: 0; }
body.authentication-bg .account-pages .row > * { padding-left: 0; padding-right: 0; }
body.authentication-bg .auth-logo { text-align: center; margin-bottom: 24px !important; }
body.authentication-bg .auth-logo img { height: auto; max-width: 160px; filter: brightness(0) invert(1); }
body.authentication-bg .card {
    border: 0; border-radius: 20px; overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .3);
}
body.authentication-bg .card .text-primary { color: #C8102E !important; }
body.authentication-bg .form-label {
    font-size: 11px; font-weight: 600; color: #555;
    text-transform: uppercase; letter-spacing: 1px;
}
body.authentication-bg .form-control {
    font-size: 16px; min-height: 48px; padding: 12px 14px;
    border: 2px solid #e8e8e8; border-radius: 10px; background: #fafafa;
}
body.authentication-bg .form-control:focus {
    border-color: #C8102E; background: #fff; box-shadow: 0 0 0 4px rgba(200, 16, 46, .08);
}
body.authentication-bg .btn-primary {
    width: 100%; min-height: 48px; border: 0; border-radius: 10px;
    background: linear-gradient(135deg, #C8102E, #a00d24);
    font-weight: 600; letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(200, 16, 46, .3);
}
body.authentication-bg .btn-primary:hover, body.authentication-bg .btn-primary:focus {
    background: linear-gradient(135deg, #a00d24, #870b1f);
}
body.authentication-bg .account-pages a.fw-medium { display: inline-block; padding: 12px 6px; }
body.authentication-bg .account-pages .mt-5.text-center p { color: rgba(255, 255, 255, .55); }