/*
 * Mobile rules for pages rendered inside the shared layout.
 * Every rule is scoped to the current Razor route. The dashboard/sidebar is
 * deliberately excluded so that it keeps its own independent scroll area.
 */

@media (max-width: 991.98px),
       (max-width: 1024px) and (pointer: coarse) {
    #main-area[data-page] {
        min-width: 0;
        max-width: 100%;
    }

    #main-area[data-page] > *,
    #main-area[data-page] .row,
    #main-area[data-page] [class*="-shell"],
    #main-area[data-page] [class*="-card"],
    #main-area[data-page] [class*="-panel"] {
        min-width: 0;
        max-width: 100%;
    }

    #main-area[data-page] :where(input, select, textarea, button) {
        max-width: 100%;
    }

    #main-area[data-page] :where(img, svg) {
        max-width: 100%;
    }

    #main-area[data-page] :where(h1, h2, h3, h4, h5, h6, p, label, a, button, th, td, span) {
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        word-break: normal;
    }

    /* Categories/Categories, Components/ListComponents, Products/ListProduct,
       Products/ListProduct2, SubCategories1/ListSubCategories1 and
       SubCategories2/ListSubCategories2: responsive card collections. */
    #main-area:is(
        [data-page="/categories/categories"],
        [data-page="/components/listcomponents"],
        [data-page="/products/listproduct"],
        [data-page="/products/listproduct2"],
        [data-page="/subcategories1/listsubcategories1"],
        [data-page="/subcategories2/listsubcategories2"]
    ) :is(#categoryContainer, #componentContainer, #subcategoryContainer, #subcategory2Container) {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 300px)) !important;
        justify-content: center !important;
        align-items: start;
        gap: 1rem !important;
        width: 100%;
        overflow: visible !important;
        padding-inline: .35rem !important;
    }

    #main-area:is(
        [data-page="/categories/categories"],
        [data-page="/components/listcomponents"],
        [data-page="/products/listproduct"],
        [data-page="/products/listproduct2"],
        [data-page="/subcategories1/listsubcategories1"],
        [data-page="/subcategories2/listsubcategories2"]
    ) :is(#categoryContainer, #componentContainer, #subcategoryContainer, #subcategory2Container) > div {
        width: 100% !important;
        max-width: 300px;
        min-width: 0;
        margin: 0 !important;
    }

    #main-area:is(
        [data-page="/categories/categories"],
        [data-page="/components/listcomponents"],
        [data-page="/products/listproduct"],
        [data-page="/products/listproduct2"],
        [data-page="/subcategories1/listsubcategories1"],
        [data-page="/subcategories2/listsubcategories2"]
    ) :is(.card, .category-card, .comp-card, .subcategory2-card) {
        width: 100% !important;
        max-width: 300px !important;
        min-width: 0 !important;
        margin-inline: 0 !important;
    }

    #main-area:is(
        [data-page="/categories/categories"],
        [data-page="/components/listcomponents"],
        [data-page="/products/listproduct2"],
        [data-page="/subcategories1/listsubcategories1"],
        [data-page="/subcategories2/listsubcategories2"]
    ) :is(.category-card-image, .comp-card-image img, .product-image-frame img, .list-card-image) {
        display: block;
        width: 100% !important;
        height: auto !important;
        max-height: 190px;
        object-fit: contain !important;
    }

    #main-area:is(
        [data-page="/components/listcomponents"],
        [data-page="/products/listproduct2"],
        [data-page="/subcategories1/listsubcategories1"],
        [data-page="/subcategories2/listsubcategories2"]
    ) :is(.product-filter-form, .subcategory-filter-bar) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100%;
    }

    /* Categories edit/input, SubCategories 1/2 edit/input and Components
       edit/input: single-column forms and image/picker dialogs. */
    #main-area:is(
        [data-page="/categories/inputcategory"],
        [data-page^="/categories/editcategories"],
        [data-page="/subcategories1/inputsubcategory1"],
        [data-page^="/subcategories1/editsubcategory1"],
        [data-page="/subcategories2/inputsubcategory2"],
        [data-page^="/subcategories2/editsubcategory2"],
        [data-page="/components/inputcomponent"],
        [data-page^="/components/editcomponent"]
    ) :is(.category-input-shell, .subcategory-input-shell, .component-input-shell, .component-edit-shell) {
        width: 100% !important;
        min-width: 0 !important;
        padding: clamp(.65rem, 3vw, 1rem) !important;
    }

    #main-area:is(
        [data-page="/categories/inputcategory"],
        [data-page^="/categories/editcategories"],
        [data-page="/subcategories1/inputsubcategory1"],
        [data-page^="/subcategories1/editsubcategory1"],
        [data-page="/subcategories2/inputsubcategory2"],
        [data-page^="/subcategories2/editsubcategory2"],
        [data-page="/components/inputcomponent"],
        [data-page^="/components/editcomponent"]
    ) :is(.category-input-actions, .subcategory-input-actions, .component-input-actions, .component-edit-actions) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100%;
    }

    #main-area:is(
        [data-page="/categories/inputcategory"],
        [data-page^="/categories/editcategories"],
        [data-page="/subcategories1/inputsubcategory1"],
        [data-page^="/subcategories1/editsubcategory1"],
        [data-page="/subcategories2/inputsubcategory2"],
        [data-page^="/subcategories2/editsubcategory2"],
        [data-page="/components/inputcomponent"],
        [data-page^="/components/editcomponent"]
    ) :is(.image-picker-modal-window, .component-pricelist-modal-window) {
        width: calc(100vw - 1rem) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 1rem) !important;
        max-height: calc(100dvh - 1rem);
        overflow: auto;
    }

    #main-area:is(
        [data-page="/components/inputcomponent"],
        [data-page^="/components/editcomponent"]
    ) :is(.component-pricelist-grid, .component-pricelist-items) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #main-area:is(
        [data-page="/categories/inputcategory"],
        [data-page^="/categories/editcategories"],
        [data-page="/subcategories1/inputsubcategory1"],
        [data-page^="/subcategories1/editsubcategory1"],
        [data-page="/subcategories2/inputsubcategory2"],
        [data-page^="/subcategories2/editsubcategory2"],
        [data-page="/components/inputcomponent"],
        [data-page^="/components/editcomponent"]
    ) :is(.image-picker-preview-frame img, .category-image-preview img, .subcategory-image-preview img) {
        width: 100% !important;
        height: auto !important;
        max-height: 42dvh;
        object-fit: contain !important;
    }

    /* Products/InputProduct, InputProduct2 and EditProduct2: all complex
       editors retain their own inner scroll but stack their work areas. */
    #main-area:is(
        [data-page="/products/inputproduct"],
        [data-page="/products/inputproduct2"],
        [data-page^="/products/editproduct2"]
    ) :is(.product2-top-grid, .product2-builder-layout, .builder-layout, .planner-layout,
          .planner-workspace, .product2-inspector-grid, .samplebook-mapping-row,
          .product2-category-template-grid, .global-picker-shell) {
        grid-template-columns: minmax(0, 1fr) !important;
        min-width: 0 !important;
    }

    #main-area:is(
        [data-page="/products/inputproduct"],
        [data-page="/products/inputproduct2"],
        [data-page^="/products/editproduct2"]
    ) :is(.builder-modal-window, .global-picker-shell, .product-image-modal-window, .pricelist-picker-window) {
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        min-width: 0 !important;
        max-height: calc(100dvh - 1rem);
        overflow: auto;
    }

    #main-area:is(
        [data-page="/products/inputproduct"],
        [data-page="/products/inputproduct2"],
        [data-page^="/products/editproduct2"]
    ) :is(.global-picker-grid, .pricelist-picker-grid) {
        grid-template-columns: repeat(auto-fit, minmax(min(165px, 100%), 1fr)) !important;
    }

    #main-area:is(
        [data-page="/products/inputproduct"],
        [data-page="/products/inputproduct2"],
        [data-page^="/products/editproduct2"]
    ) :is(.planner-canvas-shell, .table-responsive-scroll) {
        max-width: 100%;
        overflow: auto !important;
        touch-action: pan-x pan-y;
    }

    #main-area:is(
        [data-page="/products/inputproduct"],
        [data-page="/products/inputproduct2"],
        [data-page^="/products/editproduct2"]
    ) :is(.product-image-modal-window img, .global-picker-card img) {
        width: 100% !important;
        height: auto !important;
        max-height: 190px;
        object-fit: contain !important;
    }

    /* Sample book galleries, checked individually: Sunblock, Orchestra,
       OrchestraMax, Polyester, Sunworker, Ammos, Prisma and RAL Classic. */
    #main-area:is(
        [data-page="/samplebooks/sunblock/saintclair"],
        [data-page="/samplebooks/dicksonorchestra/orchestra"],
        [data-page="/samplebooks/dicksonorchestramax/orchestramax"],
        [data-page="/samplebooks/dicksonpolyester/polyester"],
        [data-page="/samplebooks/dicksonsunworker/sunworker"],
        [data-page="/samplebooks/neokemammos/ammos"],
        [data-page="/samplebooks/neokemprisma/prisma"],
        [data-page="/samplebooks/neokemralclassic/ralclassic"]
    ) :is(.samplebook-shell, .orchestra-shell) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100%;
    }

    #main-area:is(
        [data-page="/samplebooks/sunblock/saintclair"],
        [data-page="/samplebooks/dicksonorchestra/orchestra"],
        [data-page="/samplebooks/dicksonorchestramax/orchestramax"],
        [data-page="/samplebooks/dicksonpolyester/polyester"],
        [data-page="/samplebooks/dicksonsunworker/sunworker"],
        [data-page="/samplebooks/neokemammos/ammos"],
        [data-page="/samplebooks/neokemprisma/prisma"],
        [data-page="/samplebooks/neokemralclassic/ralclassic"]
    ) :is(.samplebook-toolbar, .orchestra-filters) {
        position: static !important;
        width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #main-area:is(
        [data-page="/samplebooks/sunblock/saintclair"],
        [data-page="/samplebooks/dicksonorchestra/orchestra"],
        [data-page="/samplebooks/dicksonorchestramax/orchestramax"],
        [data-page="/samplebooks/dicksonpolyester/polyester"],
        [data-page="/samplebooks/dicksonsunworker/sunworker"],
        [data-page="/samplebooks/neokemammos/ammos"],
        [data-page="/samplebooks/neokemprisma/prisma"],
        [data-page="/samplebooks/neokemralclassic/ralclassic"]
    ) :is(.color-grid, .orchestra-grid) {
        grid-template-columns: repeat(auto-fit, minmax(min(132px, 100%), 1fr)) !important;
    }

    #main-area:is(
        [data-page="/samplebooks/sunblock/saintclair"],
        [data-page="/samplebooks/dicksonorchestra/orchestra"],
        [data-page="/samplebooks/dicksonorchestramax/orchestramax"],
        [data-page="/samplebooks/dicksonpolyester/polyester"],
        [data-page="/samplebooks/dicksonsunworker/sunworker"],
        [data-page="/samplebooks/neokemammos/ammos"],
        [data-page="/samplebooks/neokemprisma/prisma"],
        [data-page="/samplebooks/neokemralclassic/ralclassic"]
    ) :is(.swatch img, .orchestra-swatch img, .samplebook-modal-image, .orchestra-modal-image) {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* Every sample-book Input/Edit page is a responsive single-column form. */
    #main-area:is(
        [data-page^="/samplebooks/sunblock/input"], [data-page^="/samplebooks/sunblock/edit"],
        [data-page^="/samplebooks/dicksonorchestra/input"], [data-page^="/samplebooks/dicksonorchestra/edit"],
        [data-page^="/samplebooks/dicksonorchestramax/input"], [data-page^="/samplebooks/dicksonorchestramax/edit"],
        [data-page^="/samplebooks/dicksonpolyester/input"], [data-page^="/samplebooks/dicksonpolyester/edit"],
        [data-page^="/samplebooks/dicksonsunworker/input"], [data-page^="/samplebooks/dicksonsunworker/edit"],
        [data-page^="/samplebooks/neokemammos/input"], [data-page^="/samplebooks/neokemammos/edit"],
        [data-page^="/samplebooks/neokemprisma/input"], [data-page^="/samplebooks/neokemprisma/edit"],
        [data-page^="/samplebooks/neokemralclassic/input"], [data-page^="/samplebooks/neokemralclassic/edit"]
    ) :is(.row, form, [class*="-form"], [class*="-grid"]) {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* OrderList and OrderStats keep readable columns and scroll horizontally
       inside their own table wrapper instead of turning words vertically. */
    #main-area:is(
        [data-page="/orders/orderlist"],
        [data-page="/orders/orderstats"]
    ) :is(.orders-list-table-wrap, .table-responsive, [class*="table-wrap"]) {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        overscroll-behavior-inline: contain;
        touch-action: pan-x pan-y;
    }

    #main-area:is(
        [data-page="/orders/orderlist"],
        [data-page="/orders/orderstats"]
    ) table {
        min-width: 820px !important;
        width: max-content;
        table-layout: auto !important;
    }

    #main-area[data-page="/orders/orderstats"] .order-stats-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* Retail pages: AppointmentCalendar, ClientCommunicationEntry,
       ClientRetail, ClientRetailList, Measurement, RetailLists and
       RetailMeasurementOrder. */
    #main-area:is(
        [data-page="/retailtentoset/appointmentcalendar"],
        [data-page="/retailtentoset/clientcommunicationentry"],
        [data-page^="/retailtentoset/clientretail/"],
        [data-page="/retailtentoset/clientretaillist"],
        [data-page="/retailtentoset/measurement"],
        [data-page="/retailtentoset/retaillists"],
        [data-page^="/retailtentoset/retailmeasurementorder"]
    ) :is(.retail-client-grid, .retail-new-client-grid, .retail-customer-left-grid,
          .retail-client-geocode-grid, .retail-appointment-suggestions-grid,
          .retail-entry-grid, .retail-entry-addon-grid, .retail-top-row,
          .retail-list-grid, .retail-lists-grid, .retail-list-role-grid,
          .retail-list-modal-grid, .retail-measure-grid, .retail-order-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
        min-width: 0 !important;
    }

    #main-area:is(
        [data-page="/retailtentoset/appointmentcalendar"],
        [data-page="/retailtentoset/clientcommunicationentry"],
        [data-page^="/retailtentoset/clientretail/"],
        [data-page="/retailtentoset/clientretaillist"],
        [data-page="/retailtentoset/measurement"],
        [data-page="/retailtentoset/retaillists"],
        [data-page^="/retailtentoset/retailmeasurementorder"]
    ) :is(.retail-client-table-wrap, .retail-list-table-wrap, .retail-measure-table-wrap,
          .retail-measure-matrix-table-wrap, .appointment-calendar-scroll,
          .table-responsive, [class*="calendar-wrap"]) {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        touch-action: pan-x pan-y;
    }

    #main-area[data-page="/retailtentoset/retaillists"] .retail-list-modal-card {
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        min-width: 0 !important;
        max-height: calc(100dvh - 1rem);
        overflow: auto;
    }

    #main-area:is(
        [data-page="/retailtentoset/appointmentcalendar"],
        [data-page="/retailtentoset/measurement"]
    ) table {
        min-width: 760px !important;
        table-layout: auto !important;
    }

    /* Management/form pages checked individually: templates, sewing drop,
       draws, statuses, packagings, dimensions, production departments,
       rules, sewing rules, units and user roles. */
    #main-area:is(
        [data-page="/cards/managetemplates"],
        [data-page="/cards/sewingdropsettings"],
        [data-page="/draws/managecategorydraws"],
        [data-page="/orderstatuses/manageorderstatuses"],
        [data-page="/packagings/managepackagings"],
        [data-page="/productdimensions/manageproductdimensions"],
        [data-page="/productiondeparts/manageproductiondeparts"],
        [data-page="/rules/rulestable"],
        [data-page="/sewingrules/managesewingrules"],
        [data-page="/units/manageunits"],
        [data-page="/usersdistrib/userlist"],
        [data-page^="/usersdistrib/manageuserroles"]
    ) :is(.sewing-drop-grid, .mapping-grid, .packaging-grid, .order-status-grid,
          .production-depart-grid, .product-dimension-grid, .rule-grid,
          .sewing-rule-grid, .sewing-rules-grid, .unit-grid, .user-role-grid,
          .roles-grid, .roles-edit-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #main-area:is(
        [data-page="/cards/managetemplates"],
        [data-page="/draws/managecategorydraws"],
        [data-page="/orderstatuses/manageorderstatuses"],
        [data-page="/packagings/managepackagings"],
        [data-page="/productdimensions/manageproductdimensions"],
        [data-page="/productiondeparts/manageproductiondeparts"],
        [data-page="/rules/rulestable"],
        [data-page="/sewingrules/managesewingrules"],
        [data-page="/units/manageunits"],
        [data-page="/usersdistrib/userlist"]
    ) :is(.table-responsive, [class*="table-wrap"], [class*="table-shell"]) {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        touch-action: pan-x pan-y;
    }

    #main-area:is(
        [data-page="/cards/managetemplates"],
        [data-page="/draws/managecategorydraws"],
        [data-page="/orderstatuses/manageorderstatuses"],
        [data-page="/packagings/managepackagings"],
        [data-page="/productdimensions/manageproductdimensions"],
        [data-page="/productiondeparts/manageproductiondeparts"],
        [data-page="/rules/rulestable"],
        [data-page="/sewingrules/managesewingrules"],
        [data-page="/units/manageunits"],
        [data-page="/usersdistrib/userlist"]
    ) table {
        min-width: 680px;
        table-layout: auto !important;
    }

    #main-area[data-page="/productdimensions/manageproductdimensions"] .dimensions-table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        touch-action: pan-x pan-y;
    }

    #main-area[data-page="/rules/rulestable"] .modal-dialog,
    #main-area[data-page="/usersdistrib/userlist"] :is(.users-shell, .roles-edit-grid),
    #main-area[data-page^="/usersdistrib/manageuserroles"] .roles-shell {
        width: calc(100% - 1rem) !important;
        max-width: calc(100% - 1rem) !important;
        min-width: 0 !important;
        margin-inline: auto !important;
    }

    #main-area[data-page="/cards/managetemplates"] :is(.templates-unsaved-window, .modal-dialog),
    #main-area[data-page="/draws/managecategorydraws"] .modal-dialog {
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        min-width: 0 !important;
        margin: .5rem auto !important;
    }

    /* All pricelist pages: Arco, Mikro, Mega, Vector, Vision,
       Bioclimatic, Primus, Shelter, SideBeam, PergolaColumn,
       PolycarbonateTriangle, Lighting and the dynamic Tentoset tables. */
    #main-area[data-page^="/pricelists/"] :is(.table-responsive, [class*="table-wrap"], [class*="table-container"], [class*="table-shell"]) {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        touch-action: pan-x pan-y;
    }

    #main-area[data-page^="/pricelists/"] table {
        min-width: 660px !important;
        width: max-content;
        table-layout: auto !important;
    }

    #main-area[data-page^="/pricelists/"] :is(.modal-dialog, [class*="modal-window"]) {
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        min-width: 0 !important;
        margin-inline: auto !important;
    }

    /* Wholesale/ProductionOrders and dynamic ProductionDepartments routes.
       The page keeps its own detailed mobile layout; these rules only protect
       its scrollable tables and non-QR content images. */
    #main-area:is(
        [data-page="/wholesale/productionorders"],
        [data-page^="/productiondepartments/"]
    ) :is(.production-orders-table-wrap, .production-summary-table-wrap, [class*="table-wrap"]) {
        max-width: 100%;
        overflow-x: auto !important;
        touch-action: pan-x pan-y;
    }

    #main-area:is(
        [data-page="/wholesale/productionorders"],
        [data-page^="/productiondepartments/"]
    ) img:not([class*="qr"]):not([class*="barcode"]) {
        height: auto;
        object-fit: contain;
    }

    /* Index, Privacy and Error are deliberately simple but still bounded. */
    #main-area:is(
        [data-page="/"],
        [data-page="/index"],
        [data-page="/privacy"],
        [data-page="/error"]
    ) :is(.container, .text-center, main, section) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
}

@media (max-width: 767.98px),
       (max-width: 1024px) and (pointer: coarse) {
    /* Identity pages have no #main-area before authentication. They are
       therefore scoped through the route stored on body, never through a
       generic body rule. */
    body:is(
        [data-page^="/identity/account"],
        [data-page="/identity/error"],
        [data-page^="/identity/admin/"]
    ) :is(.row, .col-md-4, .confirm-email-page, .approval-page) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-inline: 0 !important;
    }

    body:is(
        [data-page^="/identity/account"],
        [data-page="/identity/error"],
        [data-page^="/identity/admin/"]
    ) :is(.login-card, .role-selection-card, .confirm-email-card, .approval-card, form) {
        width: min(100%, calc(100vw - 1rem)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 1rem) !important;
        margin-inline: auto !important;
    }

    body[data-page^="/identity/account/manage/"] .container {
        width: calc(100vw - 1rem) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 1rem) !important;
        margin-inline: auto !important;
    }

    body[data-page^="/identity/account/manage/"] .container > div > div {
        display: flex !important;
        flex-direction: column !important;
        min-width: 0;
    }

    body[data-page^="/identity/account/manage/"] :is(.identity-nav, .identity-content) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}