/* Shared responsive behaviour. Desktop geometry remains owned by each product. */
:root { --nx-viewport-height: 100dvh; --nx-viewport-top: 0px; }
html { scroll-padding-top: calc(var(--app-header-height, 72px) + 12px); }
:is(input,select,textarea,button,a,summary,[tabindex]) { scroll-margin-top: calc(var(--app-header-height,72px) + 12px); scroll-margin-bottom: 24px; }
main, .mcd-content, form, fieldset, .grid > *, .op-row > * { min-width: 0; }
fieldset { box-sizing: border-box; max-width: 100%; }
input, select, textarea { max-width: 100%; min-width: 0; }
:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
[hidden]:not([hidden="until-found"]) { display: none !important; }
.nx-selected-value, .nx-table-controls:empty, .nx-navigation-close { display: none; }
.nx-selection-control { display: contents; }
.nx-record-table-region { max-width: 100%; overflow-x: auto; }
.nx-scroll-region { max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; }
.nx-floating-panel[popover]:not(:popover-open) { display: none !important; }
.nx-floating-panel.nx-floating-panel {
    position: fixed !important; inset: auto !important; left: var(--nx-menu-left) !important; top: var(--nx-menu-top) !important;
    width: var(--nx-menu-width) !important; min-width: 0 !important; max-width: var(--nx-menu-width) !important;
    max-height: var(--nx-menu-height) !important; height: auto !important; margin: 0 !important; box-sizing: border-box;
    overflow-y: auto !important; overscroll-behavior: contain; z-index: 1000; white-space: normal; overflow-wrap: anywhere;
    transform: none !important; box-shadow: 0 8px 24px #10203326 !important;
}
.nx-floating-panel :is(a,button,label,summary,span) { white-space: normal !important; overflow-wrap: anywhere; min-width: 0; }
.nx-floating-panel :is(a,button,summary) { min-height: 44px; box-sizing: border-box; }
.nx-floating-panel input:not([type=checkbox]):not([type=radio]), .nx-floating-panel select { width: 100%; }
.nx-floating-panel .searchable-options { min-width: 0; }
.nx-floating-panel .searchable-options label { min-height: 44px; box-sizing: border-box; }
dialog { box-sizing: border-box; max-width: calc(100vw - 24px); max-height: calc(var(--nx-viewport-height) - 24px); overflow-y: auto; overscroll-behavior: contain; }
dialog::backdrop { background: #10203380; }
@media (max-width: 1024px) {
    main select:not([multiple]):not([size]) { appearance: none; min-height: 44px; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%2352677f' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px; }
    main :is(input,select,textarea) { font-size: 16px; }
    main :is(input,select):not([type=checkbox]):not([type=radio]):not([type=hidden]) { min-height: 44px; }
    main :is(button,.button,summary,.page-tabs a,.op-tab,.op-chip) { min-height: 44px; box-sizing: border-box; white-space: normal; }
    main .op-table :is(button,.button,summary), main .op-actions :is(button,.button,a), main .map-controls button { min-height: 44px; min-width: 44px; }
    main :is(input[type=checkbox],input[type=radio]) { flex: 0 0 auto; width: 22px; height: 22px; margin: 0 8px 0 0; }
    main label:has(> :is(input[type=checkbox],input[type=radio])) { min-height: 44px; }
    main label.nx-selection-control { display: inline-flex; min-width: 44px; min-height: 44px; margin: 0; justify-content: center; }

    main .nx-selected-value { display: block; font-size: .875rem; font-weight: 400; line-height: 1.4; overflow-wrap: anywhere; margin-top: 4px; color: #52677F; }
    main .grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
    main .grid > *, main .op-row > *, main .panel, main .table-responsive { min-width: 0; max-width: 100%; box-sizing: border-box; }
    .op-header, .nx-contextual-toolbar__primary, .nx-contextual-toolbar__secondary, .nx-contextual-toolbar__more { flex-wrap: wrap; }
    .op-row { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 1024px) {
    main .nx-record-table-region { overflow: visible; }
    main .table-responsive { width: 100%; min-width: 0; max-width: 100%; }
    main table.op-table:not([data-responsive-table="scroll"]) { display: block; width: 100%; min-width: 0 !important; max-width: 100%; overflow: visible; white-space: normal; }
    main .op-table:not([data-responsive-table="scroll"]) > :is(tbody,tfoot) { display: block; }
    main .op-table:not([data-responsive-table="scroll"]) > :is(thead,tbody) > .nx-header-row { display: none; }
    main .op-table:not([data-responsive-table="scroll"]) > :is(tbody,tfoot) > tr { display: block; height: auto; min-height: 0; padding: 12px 8px; }
    main .op-table:not([data-responsive-table="scroll"]) > :is(tbody,tfoot) > tr > :is(td,th) { display: block; height: auto; min-height: 0; width: auto; max-width: 100%; box-sizing: border-box; padding: 6px 8px; white-space: normal; overflow-wrap: anywhere; }
    main .op-table td[colspan]::before, main .op-table .nx-detail-row > td::before { content: none !important; }
    main .op-table > tbody > .nx-record-with-details { border-bottom: 0; padding-bottom: 0; }
    main .op-table > tbody > .nx-detail-row { padding-top: 0; border-bottom: 2px solid #c8d7e8; }
    main .op-table .nx-detail-row :is(details,form,div) { min-width: 0; max-width: 100%; box-sizing: border-box; }
    main .op-table .nx-detail-row details { margin: 8px 0; }
    .nx-table-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 12px; background: #f5f8fc; border-bottom: 1px solid #D8E7F7; }
    .nx-table-controls :is(label,button,a) { min-height: 44px; margin: 0; display: inline-flex; align-items: center; }
    .nx-table-controls input[type=checkbox] { width: 22px; height: 22px; }
    .nx-scroll-region > table { display: table; white-space: normal; }
    main table[data-responsive-table="scroll"] > thead { display: table-header-group; }
    main table[data-responsive-table="scroll"] > tbody { display: table-row-group; }
    main table[data-responsive-table="scroll"] tr { display: table-row; }
    main table[data-responsive-table="scroll"] :is(td,th) { display: table-cell; }
    main table[data-responsive-table="scroll"] td::before { content: none; }
    main .op-table td[data-label]::before { content: attr(data-label); display: block; color: #52677F; font-size: .75rem; font-weight: 800; }
    main .op-table:not([data-responsive-table="scroll"]) > thead { display: none; }
    main .route-assignment { min-width: 0 !important; width: 100%; }
    main .route-assignment .grid { grid-template-columns: minmax(0,1fr) !important; }
}
@media (max-width: 760px) {
    .app-header { gap: 8px; padding: calc(8px + env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 8px max(8px,env(safe-area-inset-left)); flex-wrap: nowrap; }
    .app-header .header-start { flex: 1 1 0; min-width: 0; max-width: none; gap: 8px; }
    .app-header .brand-lockup { flex: 1 1 0; min-width: 0; max-width: none; overflow-wrap: anywhere; }
    .app-header .brand-lockup img { max-width: 100%; width: auto; height: auto; max-height: 42px; object-fit: contain; }
    .app-header .brand-lockup strong { font-size: 16px; line-height: 1.2; }
    .app-header .brand-lockup, .app-header .brand-lockup strong, .app-header .brand-lockup span { color: white; }
    .app-header .brand-lockup span { font-size: 11px; }
    .app-header .mobile-menu-toggle, .app-header .portal-switcher > summary, .app-header > .nx-header-account > summary { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; }
    .app-header > .nx-header-account { flex: 0 0 44px; margin: 0; }
    .app-header > .nx-header-account > summary .settings-label { display: none; }
    .app-header > .nx-header-account .settings-menu-panel { color: #102033; background: white; border: 1px solid #D8E7F7; }
    .nx-header-account .settings-menu-panel :is(a,button) { display: block; box-sizing: border-box; width: 100%; padding: 10px 12px; margin: 0; text-align: left; font: inherit; color: #102033; background: white; }
    .app-header > #app-navigation.mobile-open { position: fixed; z-index: 90; inset: var(--app-header-height,72px) 0 auto; width: 100%; height: auto; overscroll-behavior: contain; max-height: calc(var(--nx-viewport-height) - var(--app-header-height,72px) - 8px); padding: 12px max(12px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); background: #102A49; box-shadow: 0 12px 30px #10203366; }
    .app-header .nx-navigation-close { display: block; align-self: flex-end; min-height: 44px; margin: 0; padding: 10px 14px; border: 1px solid #9cb7d6; border-radius: 6px; }
    main { box-sizing: border-box; width: 100%; padding: 16px max(12px,env(safe-area-inset-right)) calc(88px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
    main main { padding: 0; }
    main :is(.panel,.card,.op-metric) { padding: 12px; }
    main :is(.panel,.card) :is(.panel,.card) { padding: 10px; }
    main :is(.op-list,.panel:has(> table),.panel:has(> .table-responsive)) { padding: 0; }
    main :is(h1,h2,h3,p,li,dt,dd,label,summary,.button,a,small,.muted) { overflow-wrap: anywhere; }
    main :is(label,.grid > *,form > div) { min-width: 0; }
    main :is(.grid,.details-grid,.service-detail-grid,.route-assignment .grid,.quote-line .grid,.quote-inventory-row,.help-layout) { grid-template-columns: minmax(0,1fr) !important; }
    main form [style*="grid-template-columns"] { grid-template-columns: minmax(0,1fr) !important; }
    main .route-assignment { min-width: 0; width: 100%; }
    main .route-assignment button { width: 100%; }
    main :is(.actions,.dialog-actions,.quote-actions,.op-actions,.op-bulk,.page-heading-actions,.calendar-detail-card summary,.service-list-heading,.nx-contextual-toolbar__primary,.nx-contextual-toolbar__secondary,.nx-contextual-toolbar__more) { flex-wrap: wrap; gap: 8px; }
    main :is(.page-tabs,.op-tabs,.filter-actions,.page-size-form,.route-filter) { min-width: 0; max-width: 100%; flex-wrap: wrap; }
    main :is(.page-tabs a,.op-tab,.op-status) { max-width: 100%; white-space: normal; }
    main .op-row { grid-template-columns: minmax(0,1fr); }
    main .op-row > * { grid-column: 1; grid-row: auto; text-align: left; }
    main .op-actions { justify-content: flex-start; }
    dialog { padding: 16px; width: calc(100vw - 24px); max-width: calc(100vw - 24px); max-height: calc(var(--nx-viewport-height) - 24px); }
    dialog :is(.dialog-heading,.dialog-actions) { flex-wrap: wrap; }
    dialog .grid { grid-template-columns: minmax(0,1fr) !important; }
    .map-location-drawer { width: 100%; height: var(--nx-viewport-height); max-width: 100%; }
    .map-location-drawer__heading { padding: 12px; }
    .map-location-drawer__content { padding: 0 12px max(24px,env(safe-area-inset-bottom)); }
    main .shift-timeline-wrap, main .live-pattern-preview__track-wrap { min-width: 0; }
    main .shift-day-row, main .live-pattern-preview__row { grid-template-columns: minmax(0,1fr); }
    main .pattern-control-actions label { min-width: 0; width: 100%; }
    main :is(.wizard-actions,.rich-toolbar,.live-pattern-preview__heading) { flex-wrap: wrap; }
    main dialog, main dialog[data-inventory-dialog] { max-height: calc(var(--nx-viewport-height) - 24px); }
    .searchable-select > summary { box-sizing: border-box; }
}

/* Light menu state pairs are shared and cached, rather than repeated in every page. */
.portal-switcher-panel a:hover, .portal-switcher-panel button:hover { color: var(--nx-menu-ink); background: var(--nx-menu-hover); }
.app-header nav .settings-menu-panel a:hover { background: var(--nx-menu-hover); color: var(--nx-menu-ink); }
.app-header nav .settings-menu-panel button:hover { background: var(--nx-menu-hover); color: var(--nx-menu-ink); }
.settings-submenu[open] > summary { background: var(--nx-menu-hover); color: var(--nx-menu-ink); }
.op-menu :is(a,button):is(:hover,:focus-visible) { color:var(--nx-menu-ink); background:var(--nx-menu-hover); }