/*
 * VIETDESK universal responsive compatibility layer.
 * Loaded last by every interactive shell so legacy feature CSS cannot force a
 * desktop canvas on a phone.  Feature-specific CSS may still choose a richer
 * mobile presentation; these rules only guarantee viewport safety/usability.
 */

body.vds-responsive-page {
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
}

body.vds-responsive-page,
body.vds-responsive-page * {
    box-sizing: border-box;
}

body.vds-responsive-page :where(img, video, svg, canvas, iframe, object, embed) {
    max-width: 100%;
}

/* Intrinsic sizing is a fallback. A component's explicit image height wins. */
:where(body.vds-responsive-page) :where(img, video) {
    height: auto;
}

body.vds-responsive-page :where(pre, code, .vds-code-block) {
    max-width: 100%;
    overflow-wrap: anywhere;
}

body.vds-responsive-page :where(td, th, .card, .modal-content, .alert, .toast, .list-group-item) {
    overflow-wrap: anywhere;
}

body.vds-responsive-page :where(pre, .vds-code-block) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Runtime escape hatches.  vds-mobile-runtime.js only applies these classes
   when a real small viewport overflow is detected. */
@media screen and (max-width: 991.98px) {
body.vds-responsive-page .vds-mobile-runtime-constrain {
    min-width: 0 !important;
    max-width: 100% !important;
}

body.vds-responsive-page .vds-mobile-runtime-scroll-x {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

body.vds-responsive-page .vds-mobile-runtime-table-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

/* Runtime-only layout repairs for legacy components whose class names do not
   follow VIETDESK naming conventions. They are applied only after actual
   mobile overflow/compression is detected. */
body.vds-responsive-page .vds-mobile-runtime-flex-wrap {
    flex-wrap: wrap !important;
}

body.vds-responsive-page .vds-mobile-runtime-flex-wrap > * {
    min-width: 0 !important;
    max-width: 100% !important;
}

body.vds-responsive-page .vds-mobile-runtime-grid-fit {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
}

body.vds-responsive-page .vds-mobile-runtime-grid-fit > * {
    min-width: 0 !important;
    max-width: 100% !important;
}
}

@media (max-width: 991.98px) {
    html:has(body.vds-responsive-page),
    body.vds-responsive-page {
        width: 100%;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: clip !important;
    }

    /* Fixed-width legacy block boxes are capped to the actual viewport. */
    body.vds-responsive-page :where(
        main, article, section, aside, header, footer, nav,
        div, form, fieldset,
        .container, .container-fluid, .row, .row > *,
        [class*="col-"],
        .card, .card-body, .card-header, .card-footer,
        .tab-content, .tab-pane,
        .modal-content, .modal-body, .modal-header, .modal-footer,
        .offcanvas, .offcanvas-body
    ) {
        min-width: 0 !important;
        max-width: 100%;
    }

    /* Inline desktop widths are common in old Razor views. max-width wins over
       width without destroying the intended desktop width above this breakpoint. */
    body.vds-responsive-page :where(
        div, section, article, aside, main, nav, header, footer,
        form, fieldset, input:not([type="checkbox"]):not([type="radio"]), select, textarea, button
    )[style*="width"] {
        max-width: 100% !important;
    }

    body.vds-responsive-page :where(
        div, section, article, aside, main, nav, header, footer,
        form, fieldset, input:not([type="checkbox"]):not([type="radio"]), select, textarea
    )[style*="min-width"] {
        min-width: 0 !important;
    }

    body.vds-responsive-page :where(
        input:not([type="checkbox"]):not([type="radio"]), select, textarea, button,
        .form-control, .form-select, .input-group, .input-group-text,
        .btn, .btn-group, .dropdown, .dropdown-menu
    ) {
        min-width: 0;
        max-width: 100%;
    }

    body.vds-responsive-page :where(
        .table-responsive,
        .table-scroll-x,
        .table-scroll,
        .table-wrap,
        .table-wrapper,
        .table-container,
        [class$="-table-wrap"], [class*="-table-wrap "],
        [class$="-table-scroll"], [class*="-table-scroll "],
        [class$="-table-container"], [class*="-table-container "]
    ) {
        width: 100%;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* A table is allowed to remain intrinsically wide only inside its local
       scroll surface. Never make the page itself the horizontal scroller. */
    body.vds-responsive-page table {
        max-width: none;
    }

    body.vds-responsive-page :where(.breadcrumb, .pagination) {
        max-width: 100%;
        flex-wrap: wrap;
    }

    /* Tabs stay reachable when labels cannot all fit. */
    body.vds-responsive-page :where(
        .nav-tabs, .nav-pills, [role="tablist"],
        [class$="-tabs"], [class*="-tabs "]
    ) {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    body.vds-responsive-page :where(
        .page-head, .page-header, .page-title-row,
        .toolbar, [class$="-toolbar"], [class*="-toolbar "],
        .filter-bar, .filters-bar, .filter-row, .filters-row,
        .filter-actions, .action-buttons,
        .card-header, .card-footer
    ) {
        min-width: 0 !important;
        max-width: 100%;
        flex-wrap: wrap;
    }

    body.vds-responsive-page :where(
        .page-head, .page-header, .page-title-row,
        .toolbar, [class$="-toolbar"], [class*="-toolbar "],
        .filter-bar, .filters-bar, .filter-row, .filters-row,
        .filter-actions, .action-buttons
    ) > * {
        min-width: 0;
        max-width: 100%;
    }

    /* Common information/stat/form grids: these are content grids, not spatial
       widgets such as calendars, room maps or odontograms. */
    body.vds-responsive-page :where(
        [class$="-summary-grid"], [class*="-summary-grid "],
        [class$="-stats-grid"], [class*="-stats-grid "],
        [class$="-stat-grid"], [class*="-stat-grid "],
        [class$="-metric-grid"], [class*="-metric-grid "],
        [class$="-cards-grid"], [class*="-cards-grid "],
        [class$="-filter-grid"], [class*="-filter-grid "],
        [class$="-form-grid"], [class*="-form-grid "],
        [class$="-info-grid"], [class*="-info-grid "],
        [class$="-detail-grid"], [class*="-detail-grid "]
    ) {
        min-width: 0 !important;
        max-width: 100%;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    }

    body.vds-responsive-page .modal-dialog:not(.modal-fullscreen) {
        width: auto;
        max-width: calc(100vw - 24px) !important;
        margin-left: 12px;
        margin-right: 12px;
    }

    body.vds-responsive-page .dropdown-menu {
        max-width: min(94vw, 420px);
        overflow-wrap: anywhere;
    }

    body.vds-responsive-page :where(.toast-container, .popover, .tooltip) {
        max-width: calc(100vw - 20px);
    }
}

@media (max-width: 767.98px) {
    body.vds-responsive-page {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* Prevent iOS Safari's focus zoom and keep controls finger-friendly. */
    body.vds-responsive-page :where(
        input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
        select, textarea,
        .form-control, .form-select
    ) {
        font-size: max(16px, 1em);
    }

    body.vds-responsive-page :where(
        button, .btn,
        input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
        select, textarea, .form-control, .form-select
    ) {
        min-height: 42px;
    }

    /* The public footer has its own compact type scale. */
    body.vds-responsive-page :where(h1, .h1):not(:where(.vds-footer-v2 *)) {
        font-size: clamp(1.5rem, 7vw, 2rem);
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    body.vds-responsive-page :where(h2, .h2):not(:where(.vds-footer-v2 *)) {
        font-size: clamp(1.25rem, 5.8vw, 1.7rem);
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    body.vds-responsive-page :where(.modal-footer, .card-footer) > :where(.btn, button) {
        flex: 1 1 auto;
    }

    body.vds-responsive-page :where(
        [class$="-summary-grid"], [class*="-summary-grid "],
        [class$="-stats-grid"], [class*="-stats-grid "],
        [class$="-stat-grid"], [class*="-stat-grid "],
        [class$="-metric-grid"], [class*="-metric-grid "]
    ) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    body.vds-responsive-page :where(
        [class$="-summary-grid"], [class*="-summary-grid "],
        [class$="-stats-grid"], [class*="-stats-grid "],
        [class$="-stat-grid"], [class*="-stat-grid "],
        [class$="-metric-grid"], [class*="-metric-grid "],
        [class$="-cards-grid"], [class*="-cards-grid "],
        [class$="-filter-grid"], [class*="-filter-grid "],
        [class$="-form-grid"], [class*="-form-grid "],
        [class$="-info-grid"], [class*="-info-grid "],
        [class$="-detail-grid"], [class*="-detail-grid "]
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.vds-responsive-page :where(.kv, [class$="-kv"], [class*="-kv "]) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.vds-responsive-page :where(
        .filter-actions, .action-buttons,
        [class$="-actions"], [class*="-actions "]
    ) > :where(.btn, button, form) {
        min-width: 0;
        max-width: 100%;
    }

    body.vds-responsive-page .modal-dialog:not(.modal-fullscreen) {
        max-width: calc(100vw - 12px) !important;
        margin-left: 6px;
        margin-right: 6px;
    }
}

/* Printing must remain governed by each print template, never by phone rules. */
@media print {
    body.vds-responsive-page {
        overflow: visible !important;
    }

    body.vds-responsive-page .vds-mobile-runtime-scroll-x,
    body.vds-responsive-page .vds-mobile-runtime-table-wrap {
        overflow: visible !important;
    }
}

/* Bootstrap check controls float into their parent's left padding. That parent
   can have a zero-width content box: a percentage max-width collapses the
   control to its border. Keep intrinsic control sizing in all business shells,
   including runtime flex/table repairs, without changing checked/disabled UI. */
body.vds-responsive-page input.form-check-input:is([type="checkbox"], [type="radio"]),
body.app-body input.form-check-input:is([type="checkbox"], [type="radio"]) {
    max-width: none !important;
    flex-shrink: 0;
}