/* ============================================================================
   MOBILE RESPONSIVE STYLES (max-width 1023px)
   Core mobile layout: body resets, toolbar, header, docks, tabs, login,
   sessions, orders, measurements, features, accounts, dashboard, etc.
   ============================================================================ */

@media screen and (max-width: 1023px) {

    body {
        min-width: 0 !important;
        min-height: 0 !important;
        /* Prevent Safari edge-swipe back navigation from
           conflicting with our panel swipe gestures */
        overscroll-behavior-x: none !important;
    }

    /* Prevent iOS Safari auto-zoom on input focus (triggers at <16px) */
    input, select, textarea {
        font-size: 16px !important;
    }

    /* Tell the browser we handle horizontal panning ourselves;
       Safari will not trigger its back/forward navigation. */
    #ContainerVM,
    #ContainerVMLeftDock,
    #ContainerVMRightDock {
        touch-action: pan-y !important;
    }

    .login-page {
        margin-top: 80px !important;
    }

    .ui-contextmenu {
        padding: 6px 0 !important;
        z-index: 102 !important;
        -webkit-user-select: none !important;
        user-select: none !important;
        -webkit-touch-callout: none !important;
        border-radius: 10px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
        min-width: 200px !important;
    }
    .ui-contextmenu * {
        -webkit-user-select: none !important;
        user-select: none !important;
        -webkit-touch-callout: none !important;
    }

    #SystemVMHeaderLogo {
        display: none !important;
    }

    #MobileMenu {
        display: none !important;
    }

    /* Mobile bottom toolbar — replaces hamburger menu */
    #MobileBottomToolbar {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 56px !important;
        background: var(--color-header-bg, #333) !important;
        z-index: 98 !important;
        overflow: hidden !important;
        align-items: stretch !important;
        padding: 0 !important;
        box-shadow: 0 -2px 6px rgba(0,0,0,0.3) !important;
        transition: opacity 0.2s ease !important;
    }

    /* Disabled state: visible but non-interactive when a dialog is open */
    #MobileBottomToolbar.mobile-toolbar-disabled {
        pointer-events: none !important;
        opacity: 0.3 !important;
    }



    .mobile-tab-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 64px !important;
        padding: 4px 8px !important;
        color: rgba(255,255,255,0.6) !important;
        cursor: pointer !important;
        flex-shrink: 0 !important;
        -webkit-tap-highlight-color: transparent !important;
        border-bottom: 2px solid transparent !important;
    }
    .mobile-tab-item.mobile-tab-active {
        color: white !important;
        border-bottom-color: var(--color-accent, #33bbee) !important;
    }
    .mobile-tab-icon {
        font-size: 20px !important;
    }
    .mobile-tab-icon i {
        font-size: 20px !important;
    }
    .mobile-tab-label {
        font-size: 10px !important;
        white-space: nowrap !important;
        margin-top: 2px !important;
    }

    /* Accounts toggle button — pinned left */
    .mobile-tab-accounts {
        flex-shrink: 0 !important;
        padding: 4px 10px !important;
    }

    /* Divider between Accounts and scrollable module tabs */
    .mobile-toolbar-divider {
        width: 1px !important;
        flex-shrink: 0 !important;
        background: rgba(255,255,255,0.2) !important;
        margin: 8px 0 !important;
    }

    /* Scrollable container for module tabs */
    .mobile-tabs-scroll {
        display: flex !important;
        flex: 1 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        align-items: stretch !important;
        padding: 0 4px !important;
        /* Hide scrollbar but keep scrolling */
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    .mobile-tabs-scroll::-webkit-scrollbar {
        display: none !important;
    }

    /* Fix iOS Safari 100vh bug: on iOS, 100vh includes the URL bar
       area (836px) but the visible viewport is only ~796px.  With
       position:absolute + max-height:100vh, html starts at y=-40.
       position:fixed pins html to the actual visible viewport. */
    html {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
    }

    /* Reserve space for the fixed MobileBottomToolbar (56px).
       100dvh = actual visible viewport (excludes iOS URL bar).
       100vh on iOS includes URL bar space, making content too tall. */

    /* Adjust SystemVM layout for bottom toolbar */
    #SystemVM {
        grid-template-rows: auto 1fr !important;
        height: calc(100dvh - 56px) !important;
        max-height: calc(100dvh - 56px) !important;
    }
    #SystemVMFooter {
        display: none !important;
    }

    /* Hide the inline menu bar inside MainManagerVM */
    #MainManagerVMMenu {
        display: none !important;
    }

    #SystemVMHeader {
        grid-template-columns: 25px 1fr auto !important;
        grid-template-rows: 1fr !important;
        padding: 0px 8px !important;
        width: 100vw !important;
        height: 50px !important;
    }

    #SystemVMHeaderAccountPath {
        font-size: 14px !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
        margin-left: 8px !important;
    }

    #SystemVMHeaderAccountControls {
        display: block !important;
        text-align: right !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        padding: 2px 0 2px 8px !important;
        line-height: 1.3 !important;
    }

    #SystemVMHeaderAccountControls #logoutLink {
        display: block !important;
        font-size: 10px !important;
    }

    /* Mobile: show "username (credential)" instead of "logged in to username as credential" */
    #SystemVMHeaderAccountControls .login-label,
    #SystemVMHeaderAccountControls .as-label,
    #SystemVMHeaderAccountControls .login-separator {
        display: none !important;
    }
    #SystemVMHeaderAccountControls .credential-name::before {
        content: '(' !important;
    }
    #SystemVMHeaderAccountControls .credential-name::after {
        content: ')' !important;
    }

    /* ── Phase 3: Overlay panels (swipe from edge) ── */

    /* Force ContainerVM to single-column layout;
       docks become position:fixed overlays instead of grid columns */
    #ContainerVM {
        grid-template-columns: 1fr !important;
        grid-template-areas: 'content' !important;
    }

    /* Hide left tabs and resize handles — swipe replaces them */
    #ContainerVMLeftTabs,
    #ContainerVMLeftResize, #ContainerVMRightResize {
        display: none !important;
    }

    /* Right tabs: hidden by default on mobile, shown via JS when right dock opens */
    #ContainerVMRightTabs {
        display: none !important;
        position: fixed !important;
        top: 54px !important;
        right: 0 !important;
        width: auto !important;
        height: 40px !important;
        z-index: 101 !important;
        grid-auto-flow: column !important;
        grid-auto-rows: unset !important;
        grid-auto-columns: 40px !important;
        grid-row-gap: 0 !important;
        grid-column-gap: 4px !important;
        padding: 0 4px !important;
        background: var(--color-surface, white) !important;
        box-shadow: -2px 2px 6px rgba(0,0,0,0.2) !important;
        border-bottom-left-radius: 4px !important;
    }
    #ContainerVMRightTabs.mobile-visible {
        display: grid !important;
    }

    /* Left dock: fixed overlay sliding in from left edge */
    #ContainerVMLeftDock {
        position: fixed !important;
        left: 0 !important;
        top: 54px !important;
        bottom: 56px !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        min-width: 0 !important;
        min-height: auto !important;
        z-index: 100 !important;
        background: var(--color-surface, white) !important;
        box-shadow: 2px 0 8px rgba(0,0,0,0.3) !important;
        animation: slideInLeft 0.3s ease !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }

    /* Right dock: fixed overlay sliding in from right edge */
    #ContainerVMRightDock {
        position: fixed !important;
        right: 0 !important;
        top: 54px !important;
        bottom: 56px !important;
        width: 85vw !important;
        max-width: 85vw !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: auto !important;
        z-index: 100 !important;
        background: var(--color-surface, white) !important;
        box-shadow: -2px 0 8px rgba(0,0,0,0.3) !important;
        animation: slideInRight 0.3s ease !important;
        overflow: hidden !important;        /* Match desktop — let internal .absoluteScroll handle scrolling */
        padding: 0 8px !important;
        box-sizing: border-box !important;
    }

    /* Prevent the ManagerVM inside the dock from becoming an implicit scroll
       container.  The global mobile rule sets overflow-x:hidden on .ManagerVM,
       which forces overflow-y:auto per CSS spec.  That extra scroll container
       intercepts touch events before they reach .absoluteScroll. */
    #ContainerVMRightDock .ManagerVM {
        overflow-y: hidden !important;
    }

    /* ── Prevent scroll-chaining from QuickView to background ── */
    /* The inner overflow-y:auto wrapper inside the right dock must contain
       overscroll so that touches at the scroll boundary don't chain through
       to the background list, which causes iOS rubber-band bounce.           */
    #ContainerVMRightDock > div {
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch;
    }
    #ContainerVMRightDock .absoluteScroll {
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Lock background scroll when a mobile panel is open */
    body.mobile-panel-open {
        overflow: hidden !important;
    }
    body.mobile-panel-open #ContainerVMContent {
        overflow: hidden !important;
        pointer-events: none !important;
    }

    /* Backdrop: covers content when a panel is open */
    .mobile-backdrop.active {
        display: block !important;
    }

    #MainManagerVMMenu {
        background-color: var(--color-header-bg) !important;
        width: var(--sidebar-width) !important;
        height: auto !important;
        position: fixed !important;
        z-index: 4 !important;
    }

    #MainManagerVMMenuContainer {
        grid-gap: 10px !important;
        padding: 20px !important;
        color: white !important;
    }

        #MainManagerVMMenuContainer .selected .menuButton {
            color: black !important;
        }

        #MainManagerVMMenuContainer .menuButton {
            color: white !important;
            padding: 10px !important;
            width: 210px !important;
        }

    #AccountTree {
        height: auto !important;
        min-height: 44px !important;
    }

    #AccountTreeHeader {
        grid-template-rows: 40px 1fr !important;
        padding-left: 10px !important;
        grid-row-gap: 6px !important;
    }
    #AccountControllerManagerVMHeaderLabel {
        padding-left: 10px !important;
        margin-left: 10px !important;
    }

    /* ── Account Tree: search bar — larger tap target on mobile ── */
    #AccountTreeHeader > .grid:first-child {
        height: 40px !important;
        line-height: 40px !important;
    }
    #searchTextBox {
        height: 40px !important;
        font-size: 16px !important;
        padding: 0 8px !important;
        border-radius: 4px !important;
    }
    #clearSearchButton,
    #allowSessionMoveButton,
    #allowDragButton {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }

    /* ── Account Tree: node sizing & touch targets ── */
    #ContainerVMLeftDock #AccountTree {
        font-size: 16px !important;
        height: auto !important;
        min-height: 44px !important;
        grid-template-columns: 36px 28px minmax(0, 1fr) auto !important;
    }

    /* Expand/collapse toggle — larger touch target */
    #ContainerVMLeftDock #AccountTree > .tree-toggle {
        width: 36px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 20px !important;
        font-weight: bold !important;
        color: #666 !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    #ContainerVMLeftDock #AccountTree > .tree-toggle:active {
        background-color: rgba(0,0,0,0.08) !important;
        border-radius: 4px !important;
    }

    /* Icon column — vertically center, touch-friendly for long-press */
    #ContainerVMLeftDock #AccountTree > .tree-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 44px !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /* Account name — full-height tap target */
    #ContainerVMLeftDock #AccountTree .hasmenu {
        line-height: 44px !important;
        min-height: 44px !important;
        -webkit-user-select: none !important;
        user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    /* Active feedback on tap */
    #ContainerVMLeftDock #AccountTree .hasmenu:active {
        background-color: rgba(0,0,0,0.05) !important;
    }

    /* ── Account Tree: reduced nesting indent on mobile ── */
    #ContainerVMLeftDock div[style*="margin-left:20px"],
    #ContainerVMLeftDock div[style*="margin-left: 20px"] {
        margin-left: 12px !important;
    }

    /* ── Account Tree: better selection indicator ── */
    #ContainerVMLeftDock #AccountTree.selected {
        background-color: #e3f2fd !important;
        border-left: 3px solid #33bbee !important;
        border-radius: 0 4px 4px 0 !important;
    }
    #ContainerVMLeftDock #AccountTree.selected2 {
        background-color: #f0f0f0 !important;
        border-left: 3px solid #999 !important;
        border-radius: 0 4px 4px 0 !important;
    }

    /* ── Account Tree: more-button (⋯) — hidden by default, shown on selected node via CSS ── */
    #ContainerVMLeftDock #AccountTree.selected > .tree-more-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        min-height: 44px !important;
        font-size: 20px !important;
        color: #666 !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: transparent !important;
        border: none !important;
        background: none !important;
        padding: 0 !important;
    }
    #ContainerVMLeftDock #AccountTree.selected > .tree-more-btn:active {
        color: #333 !important;
        background-color: rgba(0,0,0,0.08) !important;
        border-radius: 4px !important;
    }

    /* ── Context menu: mobile-sized items ── */
    .ui-contextmenu .ui-menu-item {
        min-height: 0 !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        font-size: 16px !important;
    }
    .ui-contextmenu .ui-menu-item a,
    .ui-contextmenu .ui-menu-item .ui-menu-item-wrapper {
        display: flex !important;
        align-items: center !important;
        min-height: 48px !important;
        padding: 0 20px !important;
        margin: 0 !important;
        font-size: 16px !important;
        line-height: 1.3 !important;
        color: #222 !important;
        text-decoration: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    .ui-contextmenu .ui-menu-item a:active,
    .ui-contextmenu .ui-menu-item .ui-menu-item-wrapper:active {
        background-color: rgba(0,0,0,0.06) !important;
    }
    /* Divider between items */
    .ui-contextmenu .ui-menu-item + .ui-menu-item {
        border-top: 1px solid rgba(0,0,0,0.08) !important;
    }

    /* PHASE 1 FIX: Remove forced large min-widths — let content reflow */
    .ManagerVMContent {
        min-width: 0 !important;
    }

    /* PHASE 2 FIX: Break the min-width:auto cascade that lets the toolbar
       blow out the grid width on mobile.
       Chain: ToolbarContainer → ManagerVM → ContainerVMContent → ContainerVM
       Each is a CSS Grid item whose default min-width:auto = min-content,
       so a wide toolbar propagates outward, making everything too wide. */
    #ContainerVMContent {
        min-width: 0 !important;
    }

    .ManagerVM {
        min-width: 0 !important;
        /* overflow-x only — ManagerVMContent already handles vertical clipping.
           overflow:hidden here was killing vertical scroll on content areas. */
        overflow-x: hidden !important;
    }

    /* Config manager needs horizontal scroll — override the hidden above */
    #AccountConfigManagerVM {
        overflow-x: auto !important;
    }

    /* Toolbar: let it scroll horizontally instead of blowing out width.
       min-width:0 overrides the grid-item default (auto) so the toolbar
       can actually be narrower than its content → overflow-x kicks in. */
    .ManagerVMToolbar {
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        /* Hide the scrollbar while keeping scroll functionality */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
        /* Enclosure toolbar sets justify-self:start inline which collapses
           width to content — override so it fills the grid column and
           can actually scroll. */
        justify-self: stretch !important;
        width: 100% !important;
    }
    .ManagerVMToolbar::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

    /* Keep buttons at natural width — don't let the grid compress them.
       width:max-content ensures the container stays as wide as its children
       so the parent scrolls instead of squishing. */
    .ManagerVMToolbarContainer {
        width: max-content !important;
        min-width: max-content !important;
    }

    /* ── Phase 2: Header icon-only square buttons on mobile ── */
    .ManagerVMHeader {
        grid-template-columns: 1fr repeat(5, auto) !important;
        height: 40px !important;
        padding: 0 var(--space-xs) !important;
    }

    .headerButton {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        padding: 0 !important;
        /* DO NOT set display here — Knockout's style:{display:'none'}
           binding controls button visibility (edit/discard/save toggling).
           Using !important would override it and show all buttons always. */
        text-align: center !important;
        line-height: 32px !important;
    }

    /* Hide text labels, show icons */
    .headerBtnLabel {
        display: none !important;
    }
    .headerBtnIcon {
        display: inline !important;
        font-size: 16px !important;
    }

    /* Hide fullscreen button - not useful on mobile */
    #fullScreenButton {
        display: none !important;
    }

    /* Shrink header title for mobile */
    .headerTitle {
        font-size: large !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Prevent horizontal scrolling inside the absolute-positioned scroll area */
    .absoluteScroll {
        overflow-x: hidden !important;
    }

    /* ── Features module: horizontal scroll for wide grid ── */
    /* Each tree row is an independent CSS grid, nested via containers
       with inline margin-left:18px.  That shifts entire rows right,
       misaligning columns across nesting levels.
       Fix: zero out margin-left, track depth via CSS custom property,
       and indent only the name cell with padding-left. */

    /* Outer wrapper = horizontal scroll viewport + indent root */
    #FeatureManagerVMContent {
        overflow-x: auto !important;
        --feat-indent: 0px;
    }
    #FeatureManagerVMContent .absoluteScroll {
        overflow-x: auto !important;
    }
    /* Neutralise margin-left on ALL nesting containers inside the tree.
       Broad attribute selector handles browser normalisation of inline styles
       (Safari may add space after colon: "margin-left: 18px"). */
    #FeatureManagerVMContent div[style*="margin-left"] {
        margin-left: 0px !important;
        --feat-indent: calc(var(--feat-indent) + 18px);
    }
    /* Indent only the name cell (2nd child of every grid row) by tree depth */
    #FeatureManagerVMContent div[style*="grid-template-columns"] > :nth-child(2) {
        padding-left: calc(var(--feat-indent) + 5px) !important;
    }
    /* Override inline grid columns for mobile. Using 1fr for the name column
       ensures uniform sizing across all rows now that margin-left is zeroed. */
    #FeatureManagerVMContent div[style*="grid-template-columns"] {
        grid-template-columns: 20px 1fr 60px 130px 60px 60px 60px 60px 0px !important;
        min-width: 700px !important;
    }

    /* ── Account Config: scrollable settings grid (both axes) ──
       Problem: the old rules created NESTED scroll containers — both
       #AccountConfigManagerVMContent and .absoluteScroll had overflow-x:auto,
       with min-width:900px while actual content was ~1300px (description column
       has inline min-width:500px).  Horizontal scroll stopped at 900px (the
       inner container's min-width) and vertical scroll was broken because
       position:relative on .absoluteScroll removed height containment.

       Fix: make #AccountConfigManagerVMContent the SINGLE scroll viewport
       for both axes.  Convert .absoluteScroll to normal flow (position:relative,
       overflow:visible) so content naturally sizes the scroll area.  A sticky
       header keeps column labels visible during vertical scroll.              */
    #AccountConfigManagerVMContent {
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    /* Sticky column-header row — stays at top during vertical scroll */
    #AccountConfigManagerVMContent > div[style*="grid-template-columns"] {
        position: sticky !important;
        top: 0 !important;
        z-index: 1 !important;
        background: white !important;
    }
    /* Match the data rows' description-column min-width so headers align */
    #AccountConfigManagerVMContent > div[style*="grid-template-columns"] > div:nth-child(5) {
        min-width: 500px !important;
    }
    /* Data area: flow layout — parent handles all scrolling */
    #AccountConfigManagerVMContent .absoluteScroll {
        position: relative !important;
        top: 0 !important;                 /* neutralise inline top:25px */
        overflow: visible !important;      /* no nested scroll trap */
    }
    /* Ensure inner grid rows keep natural width (driven by inline
       min-width:500px on the description column ≈ 1300px total) */
    #AccountConfigManagerVMContent .absoluteScroll div[style*="grid-template-columns"] {
        min-width: max-content !important;
    }

    /* ── Sessions module: mobile master-detail ── */
    #SessionManagerVM {
        min-width: 0 !important;
        grid-template-columns: 1fr !important;
    }
    /* Portrait default: show list, hide content */
    #SessionManagerVM #SessionManagerVMTree {
        display: grid !important;
        width: 100% !important;
        padding-bottom: 10px !important;
        box-sizing: border-box !important;
    }
    #SessionManagerVM #SessionManagerVMContent {
        display: none !important;
    }
    /* When a session is selected on mobile: hide list, show content */
    #SessionManagerVM.mobile-detail-active #SessionManagerVMTree {
        display: none !important;
    }
    #SessionManagerVM.mobile-detail-active {
        height: calc(100vh - 112px) !important; /* viewport minus header(56px) + toolbar(56px) */
    }
    #SessionManagerVM.mobile-detail-active #SessionManagerVMContent {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        overflow: auto !important;
    }
    /* Show back button only on mobile */
    #SessionManagerVM.mobile-detail-active .mobile-back-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* Session detail header — responsive wrapping */
    #SessionVMHeader {
        grid-template-columns: auto 1fr !important;
        grid-template-areas: none !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        height: auto !important;
        min-height: 44px !important;
        padding: 4px !important;
        align-items: center !important;
    }
    #SessionVMHeader .headerTitle {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    #SessionVMHeader > div {
        flex-shrink: 0 !important;
    }
    #SessionVMHeader button.headerButton {
        width: auto !important;
        min-width: 33px !important;
        padding: 0 6px !important;
    }
    /* Feedback panel: use fixed positioning on mobile so it isn't
       clipped by the button wrapper's position:relative              */
    #feedbackButton {
        position: static !important;   /* remove implicit containing block */
    }
    #feedbackPanel {
        position: fixed !important;
        top: auto !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
        z-index: 200 !important;
    }
    /* Hide fullscreen button on mobile — not useful */
    #fullScreenSessionButton {
        display: none !important;
    }

    /* ── Measurement bar: keep desktop layout, scroll horizontally ── */
    #measurementSessionVMView > .row:first-child > .cell {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100vw !important;
    }
    #measurementSessionVMView > .row:first-child > .cell > .table {
        height: auto !important;
        margin: 4px 0 !important;
        white-space: nowrap !important;
        width: max-content !important;
    }
    #measurementSessionVMView {
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
    }
    /* Tighten measurement bar spacing on mobile */
    #measurementSessionVMView .titleLabel {
        padding-left: 4px !important;
        padding-right: 4px !important;
        font-size: 8px !important;
    }
    #measurementSessionVMView .valueLabel {
        padding-left: 4px !important;
        padding-right: 4px !important;
        font-size: 11px !important;
    }
    #measurementSessionVMView .unitsLabel {
        padding-left: 4px !important;
        padding-right: 4px !important;
        font-size: 7px !important;
        width: auto !important;
    }

    /* Session image thumbnails — wrap and fit (direct child only, not measurement tables) */
    #SessionVMContent > .table {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    #SessionVMContent > .table > .row {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }
    #SessionVMContent > .table .cell.imageContainer {
        width: 40px !important;
        margin: 2px !important;
        display: contents !important;
    }

    #SubscriptionManagerVM {
        min-width: 0 !important;
    }

    #OrderManagerVMContent {
        min-width: 0 !important;
    }

    #AccountControllerManagerVMContent {
        min-width: 0 !important;
    }

    #QuickViewManagerVMContent {
        min-width: 0 !important;
    }

    #SearchManagerVMContent {
        min-width: 0 !important;
    }

    #AccountHistoryManagerVMContent {
        min-width: 0 !important;
    }

    /* ── Account Users: mobile master/detail (old horizontal-scroll rules removed) ── */
    #AccountUserManagerVM {
        overflow-x: hidden !important;
    }
    #AccountUserManagerVMContent {
        overflow-x: hidden !important;
    }

    #MainManagerVMContent {
        min-width: 0 !important;
    }

    /* Google Places Autocomplete dropdown — larger, scrollable on mobile */
    .pac-container {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-height: 50vh !important;
        overflow-y: scroll !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        z-index: 999999 !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important;
    }
    /* Prevent Google's JS from resetting the container to hidden overflow */
    .pac-container::after {
        display: none !important;
    }
    .pac-container .pac-item {
        padding: 12px 14px !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        min-height: 44px !important;
        border-bottom: 1px solid #e0e0e0 !important;
    }
    .pac-container .pac-item .pac-icon {
        margin-top: 4px !important;
        flex-shrink: 0 !important;
    }
    .pac-container .pac-item .pac-item-query {
        font-size: 15px !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
    .pac-container .pac-item > span:last-child {
        /* Secondary text (address line) — display on its own row */
        font-size: 13px !important;
        color: #666 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        width: 100% !important;
        padding-left: 28px !important; /* align with text past the icon */
    }

    #AccountCreationDialogVM {
        padding: 0 12px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        /* max-width: calc(100vw - 30px) !important; */
        overflow: hidden !important;
    }

    #AccountCreationDialogVMHeader {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .account-creation-drafts-label {
        display: none !important;
    }

    .account-creation-drafts-bar {
        margin-right: 0 !important;
        gap: 8px !important;
    }

    .account-creation-drafts-picker {
        justify-content: stretch !important;
    }

    .account-creation-drafts-select {
        min-width: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }

    /* Root checkbox / region row — span full width and wrap on mobile */
    #AccountEditVMHeader > .gridSpan,
    #AccountCreationDialogVMHeader > .gridSpan {
        grid-column: 1 / -1 !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding-left: 0 !important;
        line-height: normal !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
    #AccountEditVMHeader > .gridSpan select,
    #AccountCreationDialogVMHeader > .gridSpan select {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 200px !important;

    }

    /* Domain / Other section checkboxes — align label inline with checkbox */
    #AccountEditVMDomain .gridSpan,
    #DomainEditVM .gridSpan {
        grid-column: 1 / -1 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding-left: 0 !important;
        line-height: normal !important;
    }
    #AccountEditVMDomain .gridSpan input[type="checkbox"],
    #DomainEditVM .gridSpan input[type="checkbox"] {
        height: auto !important;
        width: auto !important;
        flex-shrink: 0 !important;
    }

    /* Section headers — remove large left padding on mobile */
    #AccountEditVMHeader .gridHeader,
    #AccountCreationDialogVMHeader .gridHeader,
    #AccountEditVMDomain .gridHeader,
    #AccountEditVMBillingAddress .gridHeader {
        padding-left: 0 !important;
    }

    /* Fix CSS Grid min-height so dialog content area is properly constrained */
    #DialogVM > div:nth-child(2) {
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /* Dialog custom buttons — shrink to fit viewport */
    #DialogVM > div:last-child .grid {
        grid-auto-columns: 1fr !important;
        margin-right: 0 !important;
        padding: 0 4px !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
    }
    #DialogVM > div:last-child button {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 13px !important;
        padding: 6px 4px !important;
    }

    #AccountEditVM {
        padding: 0 12px !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    #AccountEditVMHeader {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Vertically center labels with inputs on mobile + consistent columns + gap */
    #AccountEditVMHeader,
    #AccountEditVMDomain,
    #AccountEditVMOther,
    #AccountEditVMBillingAddress #AddressEditVMHeader,
    #AccountCreationDialogVMHeader,
    #DomainEditVM > div[style*="grid-template-columns"] {
        align-items: center !important;
        column-gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        grid-auto-rows: auto !important;
    }
    #AccountEditVMHeader > .gridLeft:not(.hidden),
    #AccountEditVMDomain > .gridLeft:not(.hidden),
    #AccountEditVMOther > .gridLeft:not(.hidden),
    #AddressEditVMHeader > .gridLeft:not(.hidden),
    #AccountCreationDialogVMHeader > .gridLeft:not(.hidden),
    #DomainEditVM .gridLeft:not(.hidden) {
        display: flex !important;
        align-items: center !important;
        line-height: normal !important;
        text-align: left !important;
        padding: 15px 0px 0px 0px !important;
        margin: 0 !important;
        font-size: 14px !important;
        white-space: nowrap !important;
        min-height: 0 !important;
        height: auto !important;
    }

    /* Fix gridRight line-height (base CSS sets 50px) + allow overflow */
    #AccountEditVMHeader > .gridRight:not(.hidden),
    #AccountEditVMDomain > .gridRight:not(.hidden),
    #AccountEditVMOther > .gridRight:not(.hidden),
    #AddressEditVMHeader > .gridRight:not(.hidden),
    #AccountCreationDialogVMHeader > .gridRight:not(.hidden),
    #DomainEditVM .gridRight:not(.hidden) {
        display: flex !important;
        align-items: center !important;
        line-height: normal !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
        height: auto !important;
    }
    /* Inputs inside flex gridRight must fill available width */
    #AccountEditVMHeader > .gridRight > input,
    #AccountEditVMHeader > .gridRight > select,
    #AccountEditVMHeader > .gridRight > span,
    #AccountEditVMHeader > .gridRight > .password-wrapper,
    #AccountEditVMDomain > .gridRight > input,
    #AccountEditVMDomain > .gridRight > select,
    #DomainEditVM .gridRight > input,
    #DomainEditVM .gridRight > select,
    #AccountEditVMOther > .gridRight > input,
    #AccountEditVMOther > .gridRight > select,
    #AddressEditVMHeader > .gridRight > input,
    #AddressEditVMHeader > .gridRight > select,
    #AccountCreationDialogVMHeader > .gridRight > input,
    #AccountCreationDialogVMHeader > .gridRight > select,
    #AccountCreationDialogVMHeader > .gridRight > span {
        flex: 1 !important;
        min-width: 0 !important;
    }
    #AccountEditVMHeader input[type="text"],
    #AccountEditVMHeader input[type="password"],
    #AccountEditVMHeader input[type="email"],
    #AccountEditVMHeader select,
    #AccountCreationDialogVMHeader input[type="text"],
    #AccountCreationDialogVMHeader select {
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-top: 0 !important;
    }

    /* Kill inline margin-top:8px on inputs in all form grid sections on mobile */
    #AccountEditVMDomain input,
    #AccountEditVMDomain select,
    #AccountEditVMOther input,
    #AccountEditVMOther select,
    #AddressEditVMHeader input,
    #AddressEditVMHeader select,
    #DomainEditVM input,
    #DomainEditVM select {
        margin-top: 0 !important;
    }

    #AccountEditVMDomain {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #AccountEditVMBillingAddress {
        width: 100% !important;
        box-sizing: border-box !important;
        grid-template-columns: 150px 1fr !important;
    }

    /* Make the address template span full width inside BillingAddress parent */
    #AccountEditVMBillingAddress > div[style*="grid-column"] {
        grid-column: 1 / -1 !important;
    }

    #AccountEditVMOther {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ── Address Search: clear button + input wrapper ── */

    .search-input-wrapper {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
    }
    .search-input-wrapper .search-input {
        flex: 1 !important;
        padding-right: 32px !important;
        min-width: 0 !important;
    }
    .search-clear-btn {
        display: block !important;
        position: absolute !important;
        right: 4px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: none !important;
        border: none !important;
        font-size: 20px !important;
        color: #999 !important;
        cursor: pointer !important;
        padding: 4px 8px !important;
        line-height: 1 !important;
        z-index: 1 !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    .search-clear-btn:active {
        color: #333 !important;
    }

    /* ── Input cursor visibility: prevent ellipsis that hides cursor on iOS ── */

    #AccountEditVM input[type="text"],
    #AccountEditVM input[type="email"],
    #AddressEditVMHeader input[type="text"] {
        text-overflow: clip !important;
    }

    /* ── Brand → Background panel: constrain to viewport on mobile ── */

    /* Brand absoluteScroll containers — constrain width (do NOT override display to preserve Knockout visible binding) */
    #AccountBrandManagerVMContent .absoluteScroll {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
    }

    /* BackgroundFile two-column grid → single column on mobile */
    div[style*="grid-template-columns:240px"] {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Constrain background preview images — keep placeholder size when no image loaded */
    #AccountBrandManagerVMContent img[style*="width: 240px"] {
        width: 50% !important;
        max-width: 50% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        min-height: 120px !important;
        background-color: #f0f0f0 !important;
    }

    /* Make image wrapper containers stack and fill width on mobile */
    #AccountBrandManagerVMContent div[style*="display:inline-block"][style*="position:relative"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 10px !important;
    }

    /* Background Details settings grid — constrain width */
    div[style*="grid-template-columns:auto auto"][style*="grid-auto-rows:50px"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        grid-template-columns: 1fr auto !important;
    }
    /* Wrap long labels in Background Details */
    div[style*="grid-template-columns:auto auto"][style*="grid-auto-rows:50px"] .tableLabel {
        white-space: normal !important;
        word-break: break-word !important;
        line-height: 1.3 !important;
    }

    /* ── Dashboard module: mobile-friendly layout ── */

    /* Dashboard top bar: stack menu + toolbar vertically, toolbar flows horizontally */
    #DashboardManagerVM > .grid-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #DashboardManagerMenu {
        width: 100% !important;
    }
    #DashboardExportToolbar {
        width: 100% !important;
        justify-self: stretch !important;
    }
    /* Hide export buttons in dashboard toolbar on mobile, keep Preset/Save/$ */
    #DashboardExportToolbarContainer [title="Export"],
    #DashboardExportToolbarContainer [title="Export Current Order Data"],
    #DashboardExportToolbarContainer [title="Export Current Order Monthly Data"],
    #DashboardExportToolbarContainer [title="Export All Order Data"],
    #DashboardExportToolbarContainer [title="Export All Subscriptions Data"],
    #DashboardExportToolbarContainer [title="Export Filtered Subscriptions Data"] {
        display: none !important;
    }
    /* Also hide dividers that precede Preset (they separate export items from Preset/Save/$) */
    #DashboardExportToolbarContainer > div[style*="width:1px"]:first-of-type {
        display: none !important;
    }

    /* Split content area 50/50 vertically */
    #DashboardManagerVMContent {
        overflow: hidden !important;
        max-width: 100% !important;
        height: 100% !important;
    }
    #DashboardManagerVMContent > div {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    /* Top half: filters + month buttons — capped at 40vh, scrollable */
    #divFilterSection {
        max-height: 40vh !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        flex-shrink: 0 !important;
    }
    .chartButtonRow {
        flex-shrink: 0 !important;
    }
    /* Constrain selectize inputs in dashboard filters */
    #divFilterSection .selectize-input {
        max-height: 34px !important;
        overflow-y: auto !important;
        padding: 4px 8px !important;
    }

    /* Bottom half: chart — fills remaining space */
    .dashChartArea {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        overflow: auto !important;
        position: relative !important;
    }

    /* Filter grid — 2 columns */
    .dash-filter-grid {
        grid-template-columns: 1fr 1fr !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 4px !important;
        gap: 4px !important;
    }
    .dash-filter-item {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding-bottom: 4px !important;
    }
    .dash-filter-item .selectize-control {
        width: 100% !important;
        max-width: 100% !important;
    }
    .dash-filter-dropdown {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Export toolbar — compact, no wrapping on phone row 1 */
    .dashboardExportToolbar {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 2px !important;
        margin-left: 0 !important;
        padding: 0 !important;
    }

    /* Dashboard toolbar items — compact spacing */
    #DashboardExportToolbarContainer > div {
        margin-right: 2px !important;
    }
    #DashboardExportToolbarContainer button.menuButton {
        max-width: 120px !important;
    }

    /* Month buttons row — replaced by dashTimeRange links */
    .dashTimeRange {
        padding: 4px !important;
    }
    .dashTimeRangeLinks {
        flex-wrap: wrap !important;
        gap: 0 !important;
    }
    .dashTimeLink {
        padding: 3px 7px !important;
        font-size: 12px !important;
    }
    .dashTimeLinkAction {
        font-size: 11px !important;
    }

    /* Stat cards on mobile */
    .dashStatsRow {
        gap: 6px !important;
        padding: 4px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
    }
    .dashStatCard {
        min-width: 110px !important;
        max-width: 180px !important;
        padding: 6px 10px 6px !important;
        flex-shrink: 0 !important;
    }
    .dashStatLabel {
        font-size: 12px !important;
    }
    .dashStatValue {
        font-size: 13px !important;
    }
    .dashStatMeta {
        font-size: 10px !important;
    }

    /* Dashboard toolbar rows */
    .dashToolbarRow {
        padding: 2px 4px !important;
    }
    #dashToolbarRow2 #dashResellerRow,
    #dashToolbarRow2 #dashMobileFilterBar {
        display: flex;
        max-width: 50% !important;
    }

    .chartButtonRow > div[style*="border-right"] {
        display: none !important;
    }
    /* Hide stats detail table on mobile — too wide */
    .chartButtonRowCell {
        display: none !important;
    }

    /* Chart canvases — fill the flex-allocated .dashChartArea */
    .chart-container {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
    }

    #AddressEditVMHeader {
        width: 100% !important;
    }

    #OrderRenewalButtons {
        top: -5px !important;
        grid-template-columns: 40px 40px 40px 40px 1fr auto auto !important;
    }

    #OrderProductDescription {
        font-size: x-small !important;
    }

    /* ── Order Create/Edit Form: mobile-friendly ── */

    /* Constrain jQuery UI dialog on mobile — prevent content from widening it */
    .ui-dialog {
        max-width: 100vw !important;
        width: 100vw !important;
        left: 0 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    .ui-dialog-content {
        max-width: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        padding: 0 !important;
    }

    /* Remove fixed min-widths that force horizontal scroll */
    #OrderCreateForm,
    #OrderEditForm {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    #OrderCreateForm > .grid,
    #OrderEditForm > .grid {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }
    #OrderCreateForm .relativeContainer,
    #OrderEditForm .relativeContainer {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Scroll container: ensure vertical scroll, contain width, more padding */
    #OrderCreateForm #scrollContainer,
    #OrderEditForm #scrollContainer {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 16px !important;
        grid-gap: 12px !important;
    }
    /* Invoice # / Invoice Date / Resale # rows: full width, equal input sizing */
    #OrderCreateForm #scrollContainer > .grid[style*="grid-template-columns:1fr 1fr 1fr"][style*="width:500px"],
    #OrderEditForm #scrollContainer > .grid[style*="grid-template-columns:1fr 1fr 1fr"][style*="width:500px"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    #OrderCreateForm #scrollContainer > .grid[style*="grid-template-columns:1fr 1fr 1fr"][style*="width:500px"] > input,
    #OrderEditForm #scrollContainer > .grid[style*="grid-template-columns:1fr 1fr 1fr"][style*="width:500px"] > input {
        width: 100% !important;
        box-sizing: border-box !important;
        height: 33px !important;
        padding: 4px 8px !important;
    }
    /* All direct children: constrain width and allow shrinking */
    #OrderCreateForm #scrollContainer > *,
    #OrderEditForm #scrollContainer > * {
        max-width: 100% !important;
        box-sizing: border-box !important;
        min-width: 0 !important;
    }
    /* All inputs, selects, textareas: respect container width */
    #OrderCreateForm #scrollContainer input,
    #OrderCreateForm #scrollContainer select,
    #OrderCreateForm #scrollContainer textarea,
    #OrderEditForm #scrollContainer input,
    #OrderEditForm #scrollContainer select,
    #OrderEditForm #scrollContainer textarea {
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 11px !important;
    }

    /* Sale type buttons: wrap into 2 rows instead of 7 across */
    #OrderCreateForm #scrollContainer > .grid:first-child,
    #OrderEditForm #scrollContainer > .grid:first-child {
        grid-template-columns: repeat(4, 1fr) !important;
        grid-template-rows: auto auto !important;
        height: auto !important;
        gap: 4px !important;
    }

    /* Quote/Invoice/Resale sections: remove fixed widths */
    #OrderCreateForm .grid-container.testBorders,
    #OrderEditForm .grid-container.testBorders {
        width: 100% !important;
        max-width: 100% !important;
    }
    #OrderCreateForm .grid-container.testBorders .grid-container,
    #OrderEditForm .grid-container.testBorders .grid-container {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        max-width: 100% !important;
    }
    #OrderCreateForm .grid-container.testBorders .grid-item,
    #OrderEditForm .grid-container.testBorders .grid-item {
        justify-self: start !important;
        max-width: 100% !important;
    }
    /* Quote description row: 110px 345px 280px → stack */
    #OrderCreateForm .grid-container[style*="110px 345px 280px"],
    #OrderEditForm .grid-container[style*="110px 345px 280px"] {
        grid-template-columns: 1fr !important;
    }
    #QuoteDescriptionTextBox {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Invoice/Resale number rows: override fixed 500px
       NOTE: both "width:500px" (no space) and "width: 500px" (with space) are
       needed because the browser re-serializes the style attribute with spaces
       after Knockout toggles the visible binding via element.style.display. */
    #OrderCreateForm .grid[style*="width:500px"],
    #OrderCreateForm .grid[style*="width: 500px"],
    #OrderEditForm .grid[style*="width:500px"],
    #OrderEditForm .grid[style*="width: 500px"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        grid-template-columns: 1fr 130px 1fr !important;
    }
    /* Quote section: override fixed 750px (both variants) */
    #OrderCreateForm .grid-container[style*="width:750px"],
    #OrderCreateForm .grid-container[style*="width: 750px"],
    #OrderEditForm .grid-container[style*="width:750px"],
    #OrderEditForm .grid-container[style*="width: 750px"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Center container that wraps quote/invoice: fill width, don't center (both variants) */
    #OrderCreateForm .grid[style*="justify-content: center"],
    #OrderCreateForm .grid[style*="justify-content:center"],
    #OrderEditForm .grid[style*="justify-content: center"],
    #OrderEditForm .grid[style*="justify-content:center"] {
        justify-content: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Address section: stack billing/shipping vertically */
    #OrderCreateForm .grid[style*="grid-template-columns:1fr auto 1fr"],
    #OrderCreateForm .grid[style*="grid-template-columns: 1fr auto 1fr"],
    #OrderEditForm .grid[style*="grid-template-columns:1fr auto 1fr"],
    #OrderEditForm .grid[style*="grid-template-columns: 1fr auto 1fr"] {
        grid-template-columns: 1fr !important;
        justify-items: stretch !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: -10px !important;
    }
    /* Bill to / Ship to selects: remove bottom margin */
    #OrderCreateForm .grid[style*="grid-template-columns:1fr auto 1fr"] > select,
    #OrderCreateForm .grid[style*="grid-template-columns: 1fr auto 1fr"] > select,
    #OrderEditForm .grid[style*="grid-template-columns:1fr auto 1fr"] > select,
    #OrderEditForm .grid[style*="grid-template-columns: 1fr auto 1fr"] > select {
        margin-bottom: 2px !important;
    }
    /* Left-justify all section headers (Packaging, Shipping, Payment, Purchases, Misc) */
    #packagingHeader,
    #shippingHeader,
    #paymentHeader,
    #purchaseHeader,
    #OrderCreateForm > #scrollContainer > .grid[style*="justify-items: center"][style*="background-color: #EEEEEE"]:not(.relativeContainer),
    #OrderEditForm > #scrollContainer > .grid[style*="justify-items: center"][style*="background-color: #EEEEEE"]:not(.relativeContainer) {
        justify-items: start !important;
        padding-left: 20px !important;
    }
    /* Extra left padding for Shipping header */
    #shippingHeader {
        padding-left: 39px !important;
    }

    /* Add 2px left padding to warning icon overlays */
    #packagingHeader .grid[style*="position: absolute"][style*="grid-template-columns: 33px"],
    #shippingHeader .grid[style*="position: absolute"][style*="grid-template-columns: 33px"],
    #paymentHeader .grid[style*="position: absolute"][style*="grid-template-columns: 33px"],
    #purchaseHeader .grid[style*="position: absolute"][style*="grid-template-columns: 33px"],
    .grid.relativeContainer[style*="1fr 50px 1fr"] .grid[style*="position: absolute"][style*="grid-template-columns: 33px"] {
        left: 2px !important;
    }

    /* Address header: only show billing label, hide spacing and shipping label */
    #OrderCreateForm .grid.relativeContainer[style*="1fr 50px 1fr"],
    #OrderEditForm .grid.relativeContainer[style*="1fr 50px 1fr"] {
        grid-template-columns: 1fr !important;
        align-items: center !important;
        justify-items: start !important;
        padding-left: 20px !important;
    }
    #OrderCreateForm .grid.relativeContainer[style*="1fr 50px 1fr"] > .grid,
    #OrderEditForm .grid.relativeContainer[style*="1fr 50px 1fr"] > .grid {
        justify-items: start !important;
    }
    /* Hide "Shipping Address" text from header — it appears via ::before below */
    #OrderCreateForm .grid.relativeContainer[style*="1fr 50px 1fr"] > .grid:nth-child(2),
    #OrderCreateForm .grid.relativeContainer[style*="1fr 50px 1fr"] > .grid:nth-child(3),
    #OrderEditForm .grid.relativeContainer[style*="1fr 50px 1fr"] > .grid:nth-child(2),
    #OrderEditForm .grid.relativeContainer[style*="1fr 50px 1fr"] > .grid:nth-child(3) {
        display: none !important;
    }

    /* Reorder address content children so billing & shipping group properly.
       DOM children of the 1fr-auto-1fr grid:
       1: Bill to select  →  order 1
       2: empty spacer    →  order 3 (becomes Shipping Address label)
       3: Ship to select  →  order 4
       4: Billing form    →  order 2
       5: Copy button     →  hidden
       6: Shipping form   →  order 5
       7: Email fields    →  order 6
       8: empty           →  hidden
       9: empty           →  hidden
      10: Tax Id fields   →  order 7 */
    #OrderCreateForm .grid[style*="grid-template-columns:1fr auto 1fr"] > :nth-child(1),
    #OrderCreateForm .grid[style*="grid-template-columns: 1fr auto 1fr"] > :nth-child(1),
    #OrderEditForm .grid[style*="grid-template-columns:1fr auto 1fr"] > :nth-child(1),
    #OrderEditForm .grid[style*="grid-template-columns: 1fr auto 1fr"] > :nth-child(1) {
        order: 1 !important;
    }
    /* Billing address form */
    #OrderCreateForm .grid[style*="grid-template-columns:1fr auto 1fr"] > :nth-child(4),
    #OrderCreateForm .grid[style*="grid-template-columns: 1fr auto 1fr"] > :nth-child(4),
    #OrderEditForm .grid[style*="grid-template-columns:1fr auto 1fr"] > :nth-child(4),
    #OrderEditForm .grid[style*="grid-template-columns: 1fr auto 1fr"] > :nth-child(4) {
        order: 2 !important;
        justify-items: start !important;
    }
    /* Spacer div → becomes "Shipping Address" label */
    #OrderCreateForm .grid[style*="grid-template-columns:1fr auto 1fr"] > div:nth-child(2),
    #OrderCreateForm .grid[style*="grid-template-columns: 1fr auto 1fr"] > div:nth-child(2),
    #OrderEditForm .grid[style*="grid-template-columns:1fr auto 1fr"] > div:nth-child(2),
    #OrderEditForm .grid[style*="grid-template-columns: 1fr auto 1fr"] > div:nth-child(2) {
        order: 3 !important;
        display: block !important;
        font-weight: bold !important;
        font-size: 14px !important;
        background-color: #EEEEEE !important;
        height: 33px !important;
        line-height: 33px !important;
        padding-left: 10px !important;
        margin-top: 12px !important;
    }
    #OrderCreateForm .grid[style*="grid-template-columns:1fr auto 1fr"] > div:nth-child(2)::before,
    #OrderCreateForm .grid[style*="grid-template-columns: 1fr auto 1fr"] > div:nth-child(2)::before,
    #OrderEditForm .grid[style*="grid-template-columns:1fr auto 1fr"] > div:nth-child(2)::before,
    #OrderEditForm .grid[style*="grid-template-columns: 1fr auto 1fr"] > div:nth-child(2)::before {
        content: "Shipping Address";
    }
    /* Ship to select */
    #OrderCreateForm .grid[style*="grid-template-columns:1fr auto 1fr"] > :nth-child(3),
    #OrderCreateForm .grid[style*="grid-template-columns: 1fr auto 1fr"] > :nth-child(3),
    #OrderEditForm .grid[style*="grid-template-columns:1fr auto 1fr"] > :nth-child(3),
    #OrderEditForm .grid[style*="grid-template-columns: 1fr auto 1fr"] > :nth-child(3) {
        order: 4 !important;
    }
    /* Hide copy-address button */
    #OrderCreateForm .grid[style*="grid-template-columns:1fr auto 1fr"] > :nth-child(5),
    #OrderCreateForm .grid[style*="grid-template-columns: 1fr auto 1fr"] > :nth-child(5),
    #OrderEditForm .grid[style*="grid-template-columns:1fr auto 1fr"] > :nth-child(5),
    #OrderEditForm .grid[style*="grid-template-columns: 1fr auto 1fr"] > :nth-child(5) {
        display: none !important;
    }
    /* Shipping address form */
    #OrderCreateForm .grid[style*="grid-template-columns:1fr auto 1fr"] > :nth-child(6),
    #OrderCreateForm .grid[style*="grid-template-columns: 1fr auto 1fr"] > :nth-child(6),
    #OrderEditForm .grid[style*="grid-template-columns:1fr auto 1fr"] > :nth-child(6),
    #OrderEditForm .grid[style*="grid-template-columns: 1fr auto 1fr"] > :nth-child(6) {
        order: 5 !important;
        justify-items: start !important;
    }
    /* Email fields */
    #OrderCreateForm .grid[style*="grid-template-columns:1fr auto 1fr"] > :nth-child(7),
    #OrderCreateForm .grid[style*="grid-template-columns: 1fr auto 1fr"] > :nth-child(7),
    #OrderEditForm .grid[style*="grid-template-columns:1fr auto 1fr"] > :nth-child(7),
    #OrderEditForm .grid[style*="grid-template-columns: 1fr auto 1fr"] > :nth-child(7) {
        order: 6 !important;
    }
    /* Hide empty spacers after email (children 8, 9) */
    #OrderCreateForm .grid[style*="grid-template-columns:1fr auto 1fr"] > :nth-child(8),
    #OrderCreateForm .grid[style*="grid-template-columns:1fr auto 1fr"] > :nth-child(9),
    #OrderCreateForm .grid[style*="grid-template-columns: 1fr auto 1fr"] > :nth-child(8),
    #OrderCreateForm .grid[style*="grid-template-columns: 1fr auto 1fr"] > :nth-child(9),
    #OrderEditForm .grid[style*="grid-template-columns:1fr auto 1fr"] > :nth-child(8),
    #OrderEditForm .grid[style*="grid-template-columns:1fr auto 1fr"] > :nth-child(9),
    #OrderEditForm .grid[style*="grid-template-columns: 1fr auto 1fr"] > :nth-child(8),
    #OrderEditForm .grid[style*="grid-template-columns: 1fr auto 1fr"] > :nth-child(9) {
        display: none !important;
    }
    /* Tax Id fields */
    #OrderCreateForm .grid[style*="grid-template-columns:1fr auto 1fr"] > :nth-child(10),
    #OrderCreateForm .grid[style*="grid-template-columns: 1fr auto 1fr"] > :nth-child(10),
    #OrderEditForm .grid[style*="grid-template-columns:1fr auto 1fr"] > :nth-child(10),
    #OrderEditForm .grid[style*="grid-template-columns: 1fr auto 1fr"] > :nth-child(10) {
        order: 7 !important;
    }
    /* Address form template: compact label + stretching input */
    #OrderCreateForm .grid[style*="grid-template-columns:1fr 1fr"][style*="grid-auto-rows"],
    #OrderEditForm .grid[style*="grid-template-columns:1fr 1fr"][style*="grid-auto-rows"],
    #OrderCreateForm .grid[style*="grid-template-columns: 1fr 1fr"][style*="grid-auto-rows"],
    #OrderEditForm .grid[style*="grid-template-columns: 1fr 1fr"][style*="grid-auto-rows"] {
        grid-template-columns: auto 1fr !important;
        gap: 6px 8px !important;
    }
    /* Labels: right-aligned, vertically centered */
    #OrderCreateForm .grid[style*="grid-template-columns:1fr 1fr"][style*="grid-auto-rows"] > .grid[style*="justify-items:right"],
    #OrderEditForm .grid[style*="grid-template-columns:1fr 1fr"][style*="grid-auto-rows"] > .grid[style*="justify-items:right"],
    #OrderCreateForm .grid[style*="grid-template-columns: 1fr 1fr"][style*="grid-auto-rows"] > .grid[style*="justify-items:right"],
    #OrderEditForm .grid[style*="grid-template-columns: 1fr 1fr"][style*="grid-auto-rows"] > .grid[style*="justify-items:right"] {
        justify-items: right !important;
        white-space: nowrap !important;
        padding-right: 4px !important;
    }
    /* Inputs & selects: fill available width */
    #OrderCreateForm .grid[style*="grid-template-columns:1fr 1fr"][style*="grid-auto-rows"] input,
    #OrderCreateForm .grid[style*="grid-template-columns:1fr 1fr"][style*="grid-auto-rows"] select,
    #OrderEditForm .grid[style*="grid-template-columns:1fr 1fr"][style*="grid-auto-rows"] input,
    #OrderEditForm .grid[style*="grid-template-columns:1fr 1fr"][style*="grid-auto-rows"] select,
    #OrderCreateForm .grid[style*="grid-template-columns: 1fr 1fr"][style*="grid-auto-rows"] input,
    #OrderCreateForm .grid[style*="grid-template-columns: 1fr 1fr"][style*="grid-auto-rows"] select,
    #OrderEditForm .grid[style*="grid-template-columns: 1fr 1fr"][style*="grid-auto-rows"] input,
    #OrderEditForm .grid[style*="grid-template-columns: 1fr 1fr"][style*="grid-auto-rows"] select {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Section headers: add breathing room */
    #OrderCreateForm .grid[style*="background-color: #EEEEEE"],
    #OrderEditForm .grid[style*="background-color: #EEEEEE"],
    #OrderCreateForm .grid[style*="background-color:#EEEEEE"],
    #OrderEditForm .grid[style*="background-color:#EEEEEE"] {
        margin-top: 8px !important;
    }

    /* ── Renewals header: "Renewals" + All/Selected on line 1, action buttons on line 2 ── */
    #OrderCreateForm .grid.relativeContainer[style*="background-color: #EEEEEE"]:has(#OrderRenewalButtons),
    #OrderEditForm .grid.relativeContainer[style*="background-color: #EEEEEE"]:has(#OrderRenewalButtons),
    #OrderCreateForm .grid.relativeContainer[style*="background-color:#EEEEEE"]:has(#OrderRenewalButtons),
    #OrderEditForm .grid.relativeContainer[style*="background-color:#EEEEEE"]:has(#OrderRenewalButtons) {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 4px !important;
        height: auto !important;
        min-height: 33px !important;
        padding: 6px 8px !important;
    }
    /* display:contents makes buttons behave as direct flex children of parent */
    #OrderRenewalButtons {
        display: contents !important;
    }
    /* Spacer div (child 6): repurpose as flex line break */
    #OrderRenewalButtons > :nth-child(6) {
        display: block !important;
        order: 1 !important;
        flex-basis: 100% !important;
        height: 0 !important;
    }
    /* All / Selected: stay on title line (order 0, same as text node) */
    #OrderRenewalButtons > :nth-child(7),
    #OrderRenewalButtons > :nth-child(8) {
        font-size: 12px !important;
        padding: 2px 8px !important;
        white-space: nowrap !important;
    }
    /* Push "All" to the right, taking "Selected" with it */
    #OrderRenewalButtons > :nth-child(7) {
        margin-left: auto !important;
    }
    /* Action buttons: order 2 so they come after the line break */
    #OrderRenewalButtons > :nth-child(1),
    #OrderRenewalButtons > :nth-child(2),
    #OrderRenewalButtons > :nth-child(3),
    #OrderRenewalButtons > :nth-child(4),
    #OrderRenewalButtons > :nth-child(5) {
        order: 2 !important;
        font-size: 9px !important;
        padding: 2px 3px !important;
        white-space: nowrap !important;
    }

    /* ── Renewals table: 2-line rows ──
       Mobile: 6-col grid, 2 rows per item
       Row 1: checkbox(1) | name(2) | owner(3,90px) | user(4,90px) | warning(10,20px) | invoice(9,20px)
       Row 2: old exp(5) | new exp(6) | prorate(7) | price(8)
       Hidden: total (11)
       Header row (no fullHeight): hides children 5-8 (line-2 labels) */
    .renewal-row {
        grid-template-columns: 28px minmax(0,1fr) 90px 90px 16px 20px 20px !important;
        grid-template-rows: auto auto !important;
        height: auto !important;
        font-size: 11px !important;
        gap: 1px 2px !important;
        border-bottom: 1px solid #eee !important;
        padding-bottom: 3px !important;
        margin-bottom: 2px !important;
    }
    /* Header row: single row */
    .renewal-row:not(.fullHeight) {
        grid-template-rows: auto !important;
    }
    /* Filter row: 2nd sibling header — single row */
    .renewal-row:not(.fullHeight) ~ .renewal-row:not(.fullHeight) {
        grid-template-rows: auto !important;
    }
    /* Filter row: hide children 6-11 */
    .renewal-row:not(.fullHeight) ~ .renewal-row:not(.fullHeight) > :nth-child(n+6) {
        display: none !important;
    }
    /* Filter row: first 5 children map to cols 1-5 */
    .renewal-row:not(.fullHeight) ~ .renewal-row:not(.fullHeight) > :nth-child(1) {
        grid-row: 1 !important; grid-column: 1 !important;
    }
    .renewal-row:not(.fullHeight) ~ .renewal-row:not(.fullHeight) > :nth-child(2) {
        grid-row: 1 !important; grid-column: 2 !important;
    }
    .renewal-row:not(.fullHeight) ~ .renewal-row:not(.fullHeight) > :nth-child(3) {
        grid-row: 1 !important; grid-column: 3 !important;
    }
    .renewal-row:not(.fullHeight) ~ .renewal-row:not(.fullHeight) > :nth-child(4) {
        grid-row: 1 !important; grid-column: 4 !important;
    }
    .renewal-row:not(.fullHeight) ~ .renewal-row:not(.fullHeight) > :nth-child(5) {
        grid-row: 1 !important; grid-column: 5 / 8 !important;
    }
    /* Filter row: compact selects */
    .renewal-row:not(.fullHeight) ~ .renewal-row:not(.fullHeight) select {
        font-size: 10px !important;
        padding: 0 !important;
        height: 24px !important;
        width: 100% !important;
    }
    /* Row 1: checkbox(1), name(2), owner(3), user(4) */
    .renewal-row > :nth-child(1) {
        grid-row: 1 !important; grid-column: 1 !important;
    }
    .renewal-row > :nth-child(2) {
        grid-row: 1 !important; grid-column: 2 !important;
        min-width: 0 !important;
        overflow: auto !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .renewal-row > :nth-child(3) {
        grid-row: 1 !important; grid-column: 3 !important;
        min-width: 0 !important;
        overflow: auto !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    .renewal-row > :nth-child(4) {
        grid-row: 1 !important; grid-column: 4 !important;
        min-width: 0 !important;
        overflow: auto !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    /* Row 1: invoice(9) in col 6, warning(10) in col 7 */
    .renewal-row > :nth-child(9) {
        grid-row: 1 !important; grid-column: 6 !important;
        justify-self: center !important;
    }
    .renewal-row > :nth-child(10) {
        grid-row: 1 !important; grid-column: 7 !important;
        justify-self: center !important;
    }
    /* Row 2: old exp(5), new exp(6), prorate(7), price(8) */
    .renewal-row > :nth-child(5) {
        grid-row: 2 !important; grid-column: 2 !important;
        text-align: right !important;
        justify-self: end !important;
        padding-right: 8px !important;
    }
    .renewal-row > :nth-child(6) {
        grid-row: 2 !important; grid-column: 3 !important;
    }
    .renewal-row > :nth-child(7) {
        grid-row: 2 !important; grid-column: 4 !important;
        justify-self: end !important;
        align-self: center !important;
    }
    /* Prorate button: small */
    .renewal-row > :nth-child(7) button {
        width: 24px !important;
        height: 24px !important;
        padding: 0 !important;
        font-size: 11px !important;
    }
    /* Change prorate icon from arrow to calculator */
    .renewal-row > :nth-child(7) .fas.fa-arrow-alt-right::before {
        content: "\f1ec" !important; /* fa-calculator */
    }
    .renewal-row > :nth-child(8) {
        grid-row: 2 !important; grid-column: 5 / 8 !important;
    }
    .renewal-row > :nth-child(8) input[type="number"] {
        width: 100% !important;
        min-width: 60px !important;
        max-width: 100px !important;
        font-size: 11px !important;
    }
    /* Hide total (11) */
    .renewal-row > :nth-child(11) {
        display: none !important;
    }
    /* Header only: hide row-2 column labels (Old Exp, New Exp, Prorate, Price) */
    .renewal-row:not(.fullHeight) > :nth-child(5),
    .renewal-row:not(.fullHeight) > :nth-child(6),
    .renewal-row:not(.fullHeight) > :nth-child(7),
    .renewal-row:not(.fullHeight) > :nth-child(8) {
        display: none !important;
    }
    /* Date input: compact */
    .renewal-row input[type="date"] {
        width: 100% !important;
        font-size: 10px !important;
        padding: 0 !important;
    }

    /* Products/Services header: title left, All/Selected/Cart right */
    #OrderCreateForm .grid.relativeContainer:has(> .grid[style*="33px auto 1fr auto auto auto"]),
    #OrderEditForm .grid.relativeContainer:has(> .grid[style*="33px auto 1fr auto auto auto"]) {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: auto !important;
        min-height: 33px !important;
        padding: 4px 8px !important;
    }
    #OrderCreateForm .grid.relativeContainer > .grid[style*="33px auto 1fr auto auto auto"],
    #OrderEditForm .grid.relativeContainer > .grid[style*="33px auto 1fr auto auto auto"] {
        position: relative !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        align-items: center !important;
    }
    /* Hide Show Prices checkbox (child 1) and label (child 2) and spacer (child 3) */
    #OrderCreateForm .grid.relativeContainer > .grid[style*="33px auto 1fr auto auto auto"] > :nth-child(1),
    #OrderCreateForm .grid.relativeContainer > .grid[style*="33px auto 1fr auto auto auto"] > :nth-child(2),
    #OrderCreateForm .grid.relativeContainer > .grid[style*="33px auto 1fr auto auto auto"] > :nth-child(3),
    #OrderEditForm .grid.relativeContainer > .grid[style*="33px auto 1fr auto auto auto"] > :nth-child(1),
    #OrderEditForm .grid.relativeContainer > .grid[style*="33px auto 1fr auto auto auto"] > :nth-child(2),
    #OrderEditForm .grid.relativeContainer > .grid[style*="33px auto 1fr auto auto auto"] > :nth-child(3) {
        display: none !important;
    }

    /* Products/Services table HEADER: shrink columns (both space variants) */
    #OrderCreateForm .grid[style*="grid-template-columns:33px 1fr 120px 80px 30px 90px"],
    #OrderCreateForm .grid[style*="grid-template-columns: 33px 1fr 120px 80px 30px 90px"],
    #OrderEditForm .grid[style*="grid-template-columns:33px 1fr 120px 80px 30px 90px"],
    #OrderEditForm .grid[style*="grid-template-columns: 33px 1fr 120px 80px 30px 90px"] {
        grid-template-columns: auto 1fr minmax(0, 80px) minmax(0, 60px) auto minmax(0, 65px) !important;
        font-size: 12px !important;
    }
    /* Products/Services ITEM ROWS (Create): 7-col with calendar icon column
       Use minmax(0, Xpx) so columns CAN shrink below their max on narrow screens */
    #OrderCreateForm .grid[style*="33px 1fr 15px 120px 80px 30px 90px"],
    #OrderEditForm .grid[style*="33px 1fr 15px 120px 80px 30px 90px"] {
        grid-template-columns: auto 1fr auto minmax(0, 90px) minmax(0, 60px) auto minmax(0, 65px) !important;
        font-size: 11px !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    /* Products/Services ITEM ROWS (Edit): 7-col with calendar icon column */
    #OrderCreateForm .grid[style*="33px 1fr 15px 140px 80px 30px 90px"],
    #OrderEditForm .grid[style*="33px 1fr 15px 140px 80px 30px 90px"] {
        grid-template-columns: auto 1fr auto minmax(0, 100px) minmax(0, 60px) auto minmax(0, 65px) !important;
        font-size: 11px !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    /* Quantity sub-grid inside product rows: make flexible */
    #OrderCreateForm .grid[style*="33px 1fr 15px 120px 80px 30px 90px"] .grid[style*="auto 1fr auto"],
    #OrderCreateForm .grid[style*="33px 1fr 15px 140px 80px 30px 90px"] .grid[style*="auto 1fr auto"],
    #OrderEditForm .grid[style*="33px 1fr 15px 120px 80px 30px 90px"] .grid[style*="auto 1fr auto"],
    #OrderEditForm .grid[style*="33px 1fr 15px 140px 80px 30px 90px"] .grid[style*="auto 1fr auto"] {
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        min-width: 0 !important;
    }
    /* Product row buttons and inputs: smaller on mobile */
    #OrderCreateForm .grid[style*="33px 1fr 15px 120px 80px 30px 90px"] button,
    #OrderCreateForm .grid[style*="33px 1fr 15px 140px 80px 30px 90px"] button,
    #OrderEditForm .grid[style*="33px 1fr 15px 120px 80px 30px 90px"] button,
    #OrderEditForm .grid[style*="33px 1fr 15px 140px 80px 30px 90px"] button {
        height: 26px !important;
        padding: 0 4px !important;
    }
    /* Date selection row: stack on mobile */
    #OrderCreateForm .grid[style*="grid-template-columns:100px auto auto auto 1fr"],
    #OrderCreateForm .grid[style*="grid-template-columns: 100px auto auto auto 1fr"],
    #OrderEditForm .grid[style*="grid-template-columns:100px auto auto auto 1fr"],
    #OrderEditForm .grid[style*="grid-template-columns: 100px auto auto auto 1fr"],
    #OrderCreateForm .grid[style*="grid-template-columns:100px auto auto 1fr"],
    #OrderCreateForm .grid[style*="grid-template-columns: 100px auto auto 1fr"],
    #OrderEditForm .grid[style*="grid-template-columns:100px auto auto 1fr"],
    #OrderEditForm .grid[style*="grid-template-columns: 100px auto auto 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    /* Shipping table: stack or shrink */
    #OrderCreateForm .grid[style*="grid-template-columns:33px 1fr 1fr 100px 100px 100px"],
    #OrderEditForm .grid[style*="grid-template-columns:33px 1fr 1fr 100px 100px 100px"] {
        grid-template-columns: 33px 1fr 1fr 70px 70px 70px !important;
        font-size: 11px !important;
    }

    /* Shipping charge row: stack */
    #shippingContainer > .grid[style*="border-top:1px solid black"] {
        grid-auto-flow: row !important;
        grid-auto-columns: unset !important;
        grid-template-columns: auto 1fr !important;
        height: auto !important;
        padding: 4px 0 !important;
    }

    /* Payment table: 2-line rows on mobile.
       Desktop: 125px 100px 1fr 100px 33px  (date, type, card-details, amount, edit-btn)
       Mobile:  Row1 = date(1), type(2), amount(4), edit-btn(5)
                Row2 = card-details(3) spanning full width */

    /* --- Payment header row (direct child of showPaymentTerms container, not inside foreach) --- */
    #OrderCreateForm [data-bind*="showPaymentTerms"] > .grid.fullWidth[style*="grid-template-columns:125px 100px 1fr 100px 33px"],
    #OrderEditForm [data-bind*="showPaymentTerms"] > .grid.fullWidth[style*="grid-template-columns:125px 100px 1fr 100px 33px"] {
        grid-template-columns: 1fr 1fr 1fr !important;
        font-size: 11px !important;
        height: 28px !important;
    }
    /* Hide empty "card details" header (child 3) */
    #OrderCreateForm [data-bind*="showPaymentTerms"] > .grid.fullWidth[style*="grid-template-columns:125px 100px 1fr 100px 33px"] > :nth-child(3),
    #OrderEditForm [data-bind*="showPaymentTerms"] > .grid.fullWidth[style*="grid-template-columns:125px 100px 1fr 100px 33px"] > :nth-child(3) {
        display: none !important;
    }
    /* Hide the empty edit-btn header (child 5) */
    #OrderCreateForm [data-bind*="showPaymentTerms"] > .grid.fullWidth[style*="grid-template-columns:125px 100px 1fr 100px 33px"] > :nth-child(5),
    #OrderEditForm [data-bind*="showPaymentTerms"] > .grid.fullWidth[style*="grid-template-columns:125px 100px 1fr 100px 33px"] > :nth-child(5) {
        display: none !important;
    }

    /* --- Payment foreach container: more gap between multi-line rows --- */
    #OrderCreateForm [data-bind*="showPaymentTerms"] > .grid[style*="grid-gap:2px"],
    #OrderEditForm [data-bind*="showPaymentTerms"] > .grid[style*="grid-gap:2px"] {
        grid-gap: 6px !important;
    }

    /* --- Payment data row (PaymentTermVMEditTemplate) --- */
    #OrderCreateForm .grid[style*="grid-gap"] > .grid.fullWidth[style*="grid-template-columns:125px 100px 1fr 100px 33px"],
    #OrderEditForm .grid[style*="grid-gap"] > .grid.fullWidth[style*="grid-template-columns:125px 100px 1fr 100px 33px"] {
        grid-template-columns: 1fr 1fr 1fr 28px !important;
        grid-template-rows: auto auto !important;
        grid-auto-flow: row !important;
        height: auto !important;
        font-size: 11px !important;
        row-gap: 4px !important;
        padding-bottom: 6px !important;
        border-bottom: 1px solid #e0e0e0 !important;
    }
    /* Row 1: date(1)→col1, type(2)→col2, amount(4)→col3, edit-btn(5)→col4 */
    #OrderCreateForm .grid[style*="grid-gap"] > .grid.fullWidth[style*="grid-template-columns:125px 100px 1fr 100px 33px"] > :nth-child(1),
    #OrderEditForm .grid[style*="grid-gap"] > .grid.fullWidth[style*="grid-template-columns:125px 100px 1fr 100px 33px"] > :nth-child(1) {
        grid-row: 1 !important;
        grid-column: 1 !important;
    }
    #OrderCreateForm .grid[style*="grid-gap"] > .grid.fullWidth[style*="grid-template-columns:125px 100px 1fr 100px 33px"] > :nth-child(2),
    #OrderEditForm .grid[style*="grid-gap"] > .grid.fullWidth[style*="grid-template-columns:125px 100px 1fr 100px 33px"] > :nth-child(2) {
        grid-row: 1 !important;
        grid-column: 2 !important;
    }
    #OrderCreateForm .grid[style*="grid-gap"] > .grid.fullWidth[style*="grid-template-columns:125px 100px 1fr 100px 33px"] > :nth-child(4),
    #OrderEditForm .grid[style*="grid-gap"] > .grid.fullWidth[style*="grid-template-columns:125px 100px 1fr 100px 33px"] > :nth-child(4) {
        grid-row: 1 !important;
        grid-column: 3 !important;
        justify-content: right !important;
    }
    #OrderCreateForm .grid[style*="grid-gap"] > .grid.fullWidth[style*="grid-template-columns:125px 100px 1fr 100px 33px"] > :nth-child(5),
    #OrderEditForm .grid[style*="grid-gap"] > .grid.fullWidth[style*="grid-template-columns:125px 100px 1fr 100px 33px"] > :nth-child(5) {
        grid-row: 1 !important;
        grid-column: 4 !important;
    }
    /* Row 2: card-details(3) spans all 4 columns */
    #OrderCreateForm .grid[style*="grid-gap"] > .grid.fullWidth[style*="grid-template-columns:125px 100px 1fr 100px 33px"] > :nth-child(3),
    #OrderEditForm .grid[style*="grid-gap"] > .grid.fullWidth[style*="grid-template-columns:125px 100px 1fr 100px 33px"] > :nth-child(3) {
        grid-row: 2 !important;
        grid-column: 1 / -1 !important;
    }

    /* Card details inner grid: shrink buttons, let card dropdown flex */
    #OrderCreateForm .grid.fullWidth[style*="grid-template-columns:1fr 33px 33px auto auto"],
    #OrderEditForm .grid.fullWidth[style*="grid-template-columns:1fr 33px 33px auto auto"] {
        grid-template-columns: 1fr 28px 28px 28px auto auto !important;
        grid-gap: 3px !important;
        height: 30px !important;
        font-size: 11px !important;
        overflow: visible !important;
    }
    /* Auth Code div: ensure it's displayed and sized */
    #OrderCreateForm .grid.fullWidth[style*="grid-template-columns:1fr 33px 33px auto auto"] > div:last-child,
    #OrderEditForm .grid.fullWidth[style*="grid-template-columns:1fr 33px 33px auto auto"] > div:last-child {
        display: block !important;
        min-width: 0 !important;
    }
    /* Auth Code input: narrower on mobile */
    #OrderCreateForm .grid.fullWidth[style*="grid-template-columns:1fr 33px 33px auto auto"] input[type="text"],
    #OrderEditForm .grid.fullWidth[style*="grid-template-columns:1fr 33px 33px auto auto"] input[type="text"] {
        width: 70px !important;
        font-size: 10px !important;
    }
    /* Card select dropdown: compact */
    #OrderCreateForm .grid.fullWidth[style*="grid-template-columns:1fr 33px 33px auto auto"] select,
    #OrderEditForm .grid.fullWidth[style*="grid-template-columns:1fr 33px 33px auto auto"] select {
        height: 28px !important;
        font-size: 11px !important;
        padding: 0 2px !important;
    }
    /* Card grid buttons: compact */
    #OrderCreateForm .grid.fullWidth[style*="grid-template-columns:1fr 33px 33px auto auto"] button,
    #OrderEditForm .grid.fullWidth[style*="grid-template-columns:1fr 33px 33px auto auto"] button {
        height: 28px !important;
        width: 28px !important;
        font-size: 11px !important;
        padding: 0 !important;
    }
    /* M/A button pair: smaller */
    #OrderCreateForm .grid.fullWidth[style*="grid-template-columns:1fr 33px 33px auto auto"] .buttonContainer button,
    #OrderEditForm .grid.fullWidth[style*="grid-template-columns:1fr 33px 33px auto auto"] .buttonContainer button {
        width: auto !important;
        min-width: 24px !important;
        height: 28px !important;
    }
    /* Date inputs in payment rows: compact */
    #OrderCreateForm .grid[style*="grid-gap"] > .grid.fullWidth[style*="grid-template-columns:125px 100px 1fr 100px 33px"] input[type="date"],
    #OrderEditForm .grid[style*="grid-gap"] > .grid.fullWidth[style*="grid-template-columns:125px 100px 1fr 100px 33px"] input[type="date"] {
        font-size: 11px !important;
        padding: 0 2px !important;
        height: 28px !important;
    }
    /* Payment type select: compact */
    #OrderCreateForm .grid[style*="grid-gap"] > .grid.fullWidth[style*="grid-template-columns:125px 100px 1fr 100px 33px"] > :nth-child(2) select,
    #OrderEditForm .grid[style*="grid-gap"] > .grid.fullWidth[style*="grid-template-columns:125px 100px 1fr 100px 33px"] > :nth-child(2) select {
        font-size: 11px !important;
        padding: 0 2px !important;
        height: 28px !important;
    }

    /* Payment notes / currency row: right-aligned */
    #paymentHeader ~ .grid[style*="border-top:1px solid black"] {
        grid-auto-flow: row !important;
        grid-auto-columns: unset !important;
        grid-template-columns: auto auto !important;
        justify-content: end !important;
        height: auto !important;
        padding: 4px 0 !important;
        gap: 4px 8px !important;
    }

    /* Misc section: single column with reordered children.
       DOM: 1=OrderType, 2=DoNotEmail, 3=LeadSource, 4=DoNotAttachInvoice,
            5=OrderNotesLabel, 6=InvoiceNotesLabel, 7=OrderNotesTxt, 8=InvoiceNotesTxt
       Mobile order: OrderType→1, LeadSource→2, DoNotEmail→3, DoNotAttachInvoice→4,
            OrderNotesLabel→5, OrderNotesTxt→6, InvoiceNotesLabel→7, InvoiceNotesTxt→8 */
    #OrderCreateForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"],
    #OrderEditForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] {
        grid-template-columns: 1fr !important;
        grid-gap: 4px 10px !important;
    }
    /* Lead Source (child 3) → after Order Type */
    #OrderCreateForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(3),
    #OrderEditForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(3) {
        order: 2 !important;
    }
    /* Do not email (child 2) → after Lead Source */
    #OrderCreateForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(2),
    #OrderEditForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(2) {
        order: 3 !important;
    }
    /* Do not attach invoice (child 4) stays after Do not email */
    #OrderCreateForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(4),
    #OrderEditForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(4) {
        order: 4 !important;
    }
    #OrderCreateForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(5),
    #OrderEditForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(5) {
        order: 5 !important;
    }
    #OrderCreateForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(7),
    #OrderEditForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(7) {
        order: 6 !important;
    }
    #OrderCreateForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(6),
    #OrderEditForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(6) {
        order: 7 !important;
    }
    #OrderCreateForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(8),
    #OrderEditForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(8) {
        order: 8 !important;
    }

    /* Align all misc rows: consistent label + input columns */
    #OrderCreateForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(1),
    #OrderCreateForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(2),
    #OrderCreateForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(3),
    #OrderCreateForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(4),
    #OrderEditForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(1),
    #OrderEditForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(2),
    #OrderEditForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(3),
    #OrderEditForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(4) {
        grid-auto-flow: column !important;
        grid-template-columns: 200px 1fr !important;
        justify-content: start !important;
        padding-left: 10px !important;
        align-items: center !important;
    }
    /* Make selects in Order Type and Lead Source rows fill available width */
    #OrderCreateForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(1) select,
    #OrderCreateForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(3) select,
    #OrderEditForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(1) select,
    #OrderEditForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(3) select {
        width: 100% !important;
        max-width: 200px !important;
    }
    /* Lead Source (child 3) has a nested grid wrapper — make it span full width and match the parent 200px/1fr columns */
    #OrderCreateForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(3) > .grid,
    #OrderEditForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(3) > .grid {
        grid-column: 1 / -1 !important;
        grid-template-columns: 200px 1fr !important;
        justify-content: start !important;
    }

    /* Reduce gap between notes labels (children 5,6) and their textareas (children 7,8) */
    #OrderCreateForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(5),
    #OrderCreateForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(6),
    #OrderEditForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(5),
    #OrderEditForm .grid[style*="grid-template-columns:1fr 1fr; grid-gap:10px 10px"] > :nth-child(6) {
        justify-content: start !important;
        padding-left: 10px !important;
        margin-bottom: -6px !important;
    }

    /* Purchases section: stack assign buttons */
    #OrderCreateForm .grid[style*="grid-template-columns:1fr auto auto auto"],
    #OrderEditForm .grid[style*="grid-template-columns:1fr auto auto auto"] {
        grid-template-columns: 1fr !important;
        grid-auto-flow: row !important;
        height: auto !important;
        gap: 4px !important;
    }

    /* ── Footer: 4-column grid with explicit placement ──
       Layout:  col 1-2 = left side (Fee, Discount)
                col 3-4 = right side (Sub Total, Tax1, Tax2, Shipping, Total)
       Row 1: Fee label+input  |  Sub Total label+value
       Row 2: Discount label+input  |  Tax1 label+value
       Row 3:                  |  Tax2 label+value
       Row 4:                  |  Shipping label+value
       Row 5: Icons (span all) |  Total label+value
       Children: 28 in 4-child pattern [empty][label][value][empty] × 7 rows,
       then [icons][total-label][total-value][empty] */
    #OrderCreateFormFooter,
    #OrderEditFormFooter {
        display: grid !important;
        grid-template-columns: auto auto auto 1fr !important;
        grid-template-rows: auto repeat(6, auto) !important;
        padding: 10px 12px !important;
        gap: 4px 8px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        background-color: #FAFAFA !important;
        align-items: center !important;
    }

    /* Hide spacer divs — positions 4n+1 (except 25) and 4n */
    #OrderCreateFormFooter > :nth-child(4n+1):not(:nth-child(25)),
    #OrderCreateFormFooter > :nth-child(4n),
    #OrderEditFormFooter > :nth-child(4n+1):not(:nth-child(25)),
    #OrderEditFormFooter > :nth-child(4n) {
        display: none !important;
    }

    /* Reset height on visible children */
    #OrderCreateFormFooter > :nth-child(4n+2),
    #OrderCreateFormFooter > :nth-child(4n+3),
    #OrderCreateFormFooter > :nth-child(25),
    #OrderEditFormFooter > :nth-child(4n+2),
    #OrderEditFormFooter > :nth-child(4n+3),
    #OrderEditFormFooter > :nth-child(25) {
        height: auto !important;
    }

    /* ── Icons: row 5, left side (under Discount) ── */
    #OrderCreateFormFooter > :nth-child(25),
    #OrderEditFormFooter > :nth-child(25) {
        grid-row: 5 !important;
        grid-column: 1 / 3 !important;
        justify-content: start !important;
        padding-top: 4px !important;
    }

    /* ── LEFT COLUMN: Fee (row 2) and Discount (row 3) ── */
    /* Fee label */
    #OrderCreateFormFooter > :nth-child(2),
    #OrderEditFormFooter > :nth-child(2) {
        grid-row: 1 !important;
        grid-column: 1 !important;
        justify-items: right !important;
    }
    /* Fee input */
    #OrderCreateFormFooter > :nth-child(3),
    #OrderEditFormFooter > :nth-child(3) {
        grid-row: 1 !important;
        grid-column: 2 !important;
    }
    /* Discount label */
    #OrderCreateFormFooter > :nth-child(6),
    #OrderEditFormFooter > :nth-child(6) {
        grid-row: 2 !important;
        grid-column: 1 !important;
        justify-items: right !important;
    }
    /* Discount input */
    #OrderCreateFormFooter > :nth-child(7),
    #OrderEditFormFooter > :nth-child(7) {
        grid-row: 2 !important;
        grid-column: 2 !important;
    }

    /* Fee & Discount input cells: tighten gap, constrain input width */
    #OrderCreateFormFooter > :nth-child(3),
    #OrderCreateFormFooter > :nth-child(7),
    #OrderEditFormFooter > :nth-child(3),
    #OrderEditFormFooter > :nth-child(7) {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        gap: 2px !important;
    }
    #OrderCreateFormFooter > :nth-child(3) span,
    #OrderCreateFormFooter > :nth-child(7) span,
    #OrderEditFormFooter > :nth-child(3) span,
    #OrderEditFormFooter > :nth-child(7) span {
        display: inline-block !important;
        width: 20px !important;
        text-align: right !important;
    }
    #OrderCreateFormFooter > :nth-child(3) input,
    #OrderCreateFormFooter > :nth-child(7) input,
    #OrderEditFormFooter > :nth-child(3) input,
    #OrderEditFormFooter > :nth-child(7) input {
        width: 50px !important;
    }

    /* ── RIGHT COLUMN: Sub Total through Total ── */
    /* Sub Total label */
    #OrderCreateFormFooter > :nth-child(10),
    #OrderEditFormFooter > :nth-child(10) {
        grid-row: 1 !important;
        grid-column: 3 !important;
        justify-items: right !important;
    }
    /* Sub Total value */
    #OrderCreateFormFooter > :nth-child(11),
    #OrderEditFormFooter > :nth-child(11) {
        grid-row: 1 !important;
        grid-column: 4 !important;
        justify-items: right !important;
    }
    /* Tax1 label */
    #OrderCreateFormFooter > :nth-child(14),
    #OrderEditFormFooter > :nth-child(14) {
        grid-row: 2 !important;
        grid-column: 3 !important;
        justify-items: right !important;
    }
    /* Tax1 value */
    #OrderCreateFormFooter > :nth-child(15),
    #OrderEditFormFooter > :nth-child(15) {
        grid-row: 2 !important;
        grid-column: 4 !important;
        justify-items: right !important;
    }
    /* Tax2 label */
    #OrderCreateFormFooter > :nth-child(18),
    #OrderEditFormFooter > :nth-child(18) {
        grid-row: 3 !important;
        grid-column: 3 !important;
        justify-items: right !important;
    }
    /* Tax2 value */
    #OrderCreateFormFooter > :nth-child(19),
    #OrderEditFormFooter > :nth-child(19) {
        grid-row: 3 !important;
        grid-column: 4 !important;
        justify-items: right !important;
    }
    /* Shipping label */
    #OrderCreateFormFooter > :nth-child(22),
    #OrderEditFormFooter > :nth-child(22) {
        grid-row: 4 !important;
        grid-column: 3 !important;
        justify-items: right !important;
    }
    /* Shipping value */
    #OrderCreateFormFooter > :nth-child(23),
    #OrderEditFormFooter > :nth-child(23) {
        grid-row: 4 !important;
        grid-column: 4 !important;
        justify-items: right !important;
    }
    /* Total label */
    #OrderCreateFormFooter > :nth-child(26),
    #OrderEditFormFooter > :nth-child(26) {
        grid-row: 5 !important;
        grid-column: 3 !important;
        justify-items: right !important;
        font-size: 14px !important;
        font-weight: bold !important;
        border-top: 1px solid #ccc !important;
        padding-top: 6px !important;
        margin-top: 4px !important;
    }
    /* Total value */
    #OrderCreateFormFooter > :nth-child(27),
    #OrderEditFormFooter > :nth-child(27) {
        grid-row: 5 !important;
        grid-column: 4 !important;
        justify-items: right !important;
        font-size: 14px !important;
        font-weight: bold !important;
        border-top: 1px solid #ccc !important;
        padding-top: 6px !important;
        margin-top: 4px !important;
    }

    /* ── Phase 2: Order list responsive ── */

    /* Order content wrapper: stack vertically on mobile */
    .orderContentWrapper {
        flex-direction: column !important;
    }

    /* The list pane must fill the available height so its absolutely-
       positioned child (.absoluteScroll) can resolve top:0/bottom:0.
       flex:0 0 auto collapses to 0 because the abs-pos child is out
       of flow and contributes no intrinsic height. */
    .orderListPane {
        flex: 1 1 0% !important;
    }

    /* When the detail panel is visible (KO removes display:none),
       hide the list pane so the detail fills the entire viewport —
       matching the "tap row → see detail → back" mobile UX. */
    .orderContentWrapper:has(> .orderDetailPanel:not([style*="display: none"])) > .orderListPane {
        display: none !important;
    }

    /* Hide the 12-column header & filter rows on mobile */
    .orderListHeader,
    .orderListFilters {
        display: none !important;
    }

    /* Contain width in the order list wrapper — do NOT set overflow:hidden
       on this element because it is a CSS Grid item inside .absoluteScroll;
       overflow!=visible on a grid item resets min-height from auto→0,
       collapsing the wrapper to the container height and killing scroll. */
    #orderListWrapper {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Convert order rows from 12-col grid to card layout */
    .orderListRow {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        height: auto !important;
        max-width: 100% !important;
        overflow: hidden !important;
        padding: var(--space-sm) !important;
        margin-bottom: var(--space-xs) !important;
        border: 1px solid var(--color-divider) !important;
        border-radius: 4px !important;
        background-color: var(--color-surface) !important;
        gap: 2px !important;
    }

    /* Selected card keeps accent color */
    .orderListRow.selected {
        background-color: var(--color-accent) !important;
    }

    /* Hide ALL desktop flat cells on mobile — the card body replaces them */
    .olc-account, .olc-created, .olc-shipped, .olc-delivered,
    .olc-quote, .olc-invoice, .olc-state, .olc-payState,
    .olc-saleType, .olc-subs, .olc-encs {
        display: none !important;
    }

    /* Card body — 3-column detail grid */
    .olc-card-body {
        display: grid !important;
        grid-column: 1 / -1 !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 4px var(--space-sm) !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
        padding: 2px 4px !important;
        min-width: 0 !important;
    }

    .olc-card-col {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .olc-card-col > div {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Detail panel: full-width view instead of 600px sidebar.
       Switch from position:absolute to position:relative so the panel
       is a normal in-flow element.  The sibling .absoluteScroll (order list)
       is already position:absolute and out of flow, so .orderDetailPanel
       becomes the sole in-flow child.  width:100% reliably fills
       .ManagerVMContent without depending on containing-block resolution. */
    .orderDetailPanel {
        position: relative !important;
        width: 100% !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        grid-template-columns: 33px 1fr !important;
    }

    /* Constrain the preview container (2nd grid cell = 1fr column).
       min-width:0 lets the 1fr track shrink below content width.
       min-height:0 lets the grid row height propagate downward.
       overflow:hidden clips any residual overflow. */
    .orderDetailPanel > .fullHeight {
        min-width: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    /* The template renders nested .fullWidth.fullHeight grids inside
       the 1fr column.  Each is a grid item that defaults min-height:auto
       (= grow to content).  Setting min-height:0 lets them honour the
       available height from their parent's 1fr row so overflow-y:auto
       can activate on .relativeContainer further down the chain. */
    .orderDetailPanel .fullWidth.fullHeight {
        min-height: 0 !important;
    }

    /* Constrain all nested fullWidth wrappers inside the template */
    .orderDetailPanel .fullWidth {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* ── ITERATION 26: fix vertical compression ──────────────────
       On desktop, .absoluteScroll2 is position:absolute filling
       .relativeContainer, acting as the scroll container.
       On mobile, this COMPRESSES grid rows into the fixed height,
       causing overlaps.  Fix: make .relativeContainer the scroll
       container and convert .absoluteScroll2 to static flow so
       grid rows size freely to their content. */
    .orderDetailPanel .relativeContainer {
        min-width: 0 !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    .orderDetailPanel .absoluteScroll2 {
        /* Remove absolute positioning — become a normal flow child
           so grid rows size to content, not the container height */
        position: static !important;
        /* Override inline overflow-y:auto / base overflow-y:scroll —
           .relativeContainer handles scrolling now */
        overflow-y: visible !important;
        /* Width constraints from iteration 25 — still needed */
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    /* Clip overflow on every direct child of the scroll area so that
       child grids with fixed-px tracks (e.g. Payment Terms) cannot
       visually extend beyond the column. */
    .orderDetailPanel .absoluteScroll2 > * {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Mobile: show back button, hide desktop toggle chevrons */
    .orderDetailBackBtn {
        display: grid !important;
    }
    .orderDetailToggle {
        display: none !important;
    }

    /* Make ALL grids inside the rendered preview template responsive.
       NOTE: #OrderPreviewVMTemplate is the <script> tag id — KnockoutJS
       renders content INSIDE .orderDetailPanel, NOT inside the <script>,
       so we must target via .orderDetailPanel instead. */
    .orderDetailPanel .grid {
        min-width: 0 !important;
    }

    /* (Preview header rule moved below the History rule — see cascade note) */

    /* Address blocks: keep side-by-side in preview */
    .orderPreviewAddresses {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .orderPreviewAddresses > div {
        min-width: 0 !important;
        word-break: break-word !important;
    }

    .orderPreviewMisc {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .orderPreviewMisc > div {
        text-align: left !important;
    }
    .orderPreviewNote {
        margin-bottom: 0 !important;
    }

    /* Product / Renewal / Payment / Shipping tables: allow text wrap */
    .orderDetailPanel .absoluteScroll2 {
        word-break: break-word !important;
    }

    /* (Renewal rules moved after Products rule — see cascade note below) */

    /* Product header & rows: shrink fixed columns for mobile
       Desktop: 1fr 80px 80px 80px (= 240px fixed).
       Mobile:  reduce to fit in ~264px content-box minus padding. */
    .orderDetailPanel .absoluteScroll2 .grid.fullWidth[style*="1fr 80px 80px 80px"] {
        grid-template-columns: 1fr 50px 55px 60px !important;
        font-size: 11px !important;
    }

    /* Products: normalize header & row spacing so columns align.
       MUST appear AFTER the generic [style*=] rule above. */
    .orderDetailPanel .absoluteScroll2 .grid.fullWidth.preview-products-header,
    .orderDetailPanel .absoluteScroll2 .grid.fullWidth.preview-product-row {
        grid-template-columns: 1fr 50px 55px 60px !important;
        font-size: 11px !important;
        gap: 0 !important;
        padding: 5px !important;
    }
    .orderDetailPanel .absoluteScroll2 .preview-product-row > .grid,
    .orderDetailPanel .absoluteScroll2 .preview-product-row > div {
        padding-left: 0 !important;
    }

    /* Renewals: MUST appear AFTER Products rule above because the
       renewals inline style "1fr 80px 80px 80px 80px" contains the
       substring "1fr 80px 80px 80px" that the Products selector matches.
       Higher specificity (0,6,0) beats Products (0,5,0). */
    .preview-oldexp-col {
        display: none !important;
    }
    .orderDetailPanel .absoluteScroll2 .grid.fullWidth.preview-renewals-header,
    .orderDetailPanel .absoluteScroll2 .grid.fullWidth.preview-renewal-row {
        grid-template-columns: 1fr 60px 60px 60px !important;
        font-size: 11px !important;
        gap: 0 !important;
        padding: 5px !important;
    }
    .orderDetailPanel .absoluteScroll2 .preview-renewal-row > .grid {
        padding-left: 0 !important;
    }

    /* Payment Terms header: desktop = 100px 100px 1fr 80px (= 280px fixed).
       Override to fractional columns that fit within available width. */
    .orderDetailPanel .absoluteScroll2 .grid.fullWidth[style*="100px 100px 1fr 80px"] {
        grid-template-columns: 1fr 1fr 1fr 60px !important;
        font-size: 11px !important;
    }

    /* Payment Terms rows (PaymentTermVMTemplate):
       desktop = 85px 85px 40px 1fr 70px (= 280px fixed).
       Override to fit mobile. */
    .orderDetailPanel .absoluteScroll2 .grid.fullWidth[style*="100px 100px 1fr 80px"],
    .orderDetailPanel .absoluteScroll2 div > .grid.fullWidth[style*="100px 100px 1fr 80px"] {
        grid-template-columns: 1fr 1fr auto 1fr 60px !important;
        font-size: 11px !important;
    }

    /* Payment Terms: normalize spacing so columns visually align.
       Header = 3 data cols + amount.  Rows = 5 cells rearranged to
       2 rows: dates + amount on row 1, type spanning row 2. */
    .orderDetailPanel .absoluteScroll2 .grid.fullWidth.preview-payment-header {
        grid-template-columns: 1fr 1fr 1fr 60px !important;
        font-size: 11px !important;
        gap: 0 !important;
        padding: 5px !important;
    }
    /* Hide the "Type" header column on mobile since type moves to row 2 */
    .orderDetailPanel .absoluteScroll2 .preview-payment-header > .preview-payment-type-hdr {
        display: none !important;
    }
    /* Rearrange header to 3 cols: Due Date | Pay Date | Amount */
    .orderDetailPanel .absoluteScroll2 .grid.fullWidth.preview-payment-header {
        grid-template-columns: 1fr 1fr auto auto 60px !important;
    }
    /* Placeholder cells in header for the M/A button columns */
    .orderDetailPanel .absoluteScroll2 .grid.fullWidth.preview-payment-header::before {
        content: '';
        grid-column: 3;
        grid-row: 1;
    }
    .orderDetailPanel .absoluteScroll2 .grid.fullWidth.preview-payment-header::after {
        content: '';
        grid-column: 4;
        grid-row: 1;
    }
    .orderDetailPanel .absoluteScroll2 .grid.fullWidth.preview-payment-row {
        grid-auto-flow: row !important;
        /* 5-col grid: date | date | M | A | amount */
        grid-template-columns: 1fr 1fr auto auto 60px !important;
        font-size: 11px !important;
        gap: 2px 2px !important;
        padding: 5px !important;
    }
    /* Type label (child 3): hide on mobile */
    .orderDetailPanel .absoluteScroll2 .preview-payment-row > *:nth-child(3) {
        display: none !important;
    }
    /* Type detail (child 4): break children into parent grid */
    .orderDetailPanel .absoluteScroll2 .preview-payment-row > *:nth-child(4) {
        display: contents !important;
    }
    /* --- Card type (1fr 60px auto auto) --- */
    .orderDetailPanel .absoluteScroll2 .preview-payment-row > *:nth-child(4) .grid[style*="1fr 60px auto auto"] {
        display: contents !important;
    }
    /* fullDesc: row 2, span full width */
    .orderDetailPanel .absoluteScroll2 .preview-payment-row > *:nth-child(4) .grid[style*="1fr 60px auto auto"] > *:first-child {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        word-break: break-word !important;
        white-space: normal !important;
        font-size: 10px !important;
    }
    /* Hide authCode */
    .orderDetailPanel .absoluteScroll2 .preview-payment-row > *:nth-child(4) .grid[style*="1fr 60px auto auto"] > *:nth-child(2) {
        display: none !important;
    }
    /* M button: row 1 col 3 */
    .orderDetailPanel .absoluteScroll2 .preview-payment-row > *:nth-child(4) .grid[style*="1fr 60px auto auto"] > *:nth-child(3) {
        grid-row: 1 !important;
        grid-column: 3 !important;
        align-self: center !important;
    }
    .orderDetailPanel .absoluteScroll2 .preview-payment-row > *:nth-child(4) .grid[style*="1fr 60px auto auto"] > *:nth-child(3) button {
        width: 22px !important;
        height: 22px !important;
        font-size: 9px !important;
        padding: 0 !important;
    }
    /* A button: row 1 col 4 */
    .orderDetailPanel .absoluteScroll2 .preview-payment-row > *:nth-child(4) .grid[style*="1fr 60px auto auto"] > *:nth-child(4) {
        grid-row: 1 !important;
        grid-column: 4 !important;
        align-self: center !important;
    }
    .orderDetailPanel .absoluteScroll2 .preview-payment-row > *:nth-child(4) .grid[style*="1fr 60px auto auto"] > *:nth-child(4) button {
        width: 22px !important;
        height: 22px !important;
        font-size: 9px !important;
        padding: 0 !important;
    }
    /* --- Check/Wire type (1fr auto) --- */
    .orderDetailPanel .absoluteScroll2 .preview-payment-row > *:nth-child(4) .grid[style*="1fr auto"] {
        display: contents !important;
    }
    /* Empty spacer div */
    .orderDetailPanel .absoluteScroll2 .preview-payment-row > *:nth-child(4) .grid[style*="1fr auto"] > *:first-child {
        display: none !important;
    }
    /* M button */
    .orderDetailPanel .absoluteScroll2 .preview-payment-row > *:nth-child(4) .grid[style*="1fr auto"] > *:last-child {
        grid-row: 1 !important;
        grid-column: 3 !important;
        align-self: center !important;
    }
    .orderDetailPanel .absoluteScroll2 .preview-payment-row > *:nth-child(4) .grid[style*="1fr auto"] > *:last-child button {
        width: 22px !important;
        height: 22px !important;
        font-size: 9px !important;
        padding: 0 !important;
    }
    /* Amount (child 5): row 1 col 5 */
    .orderDetailPanel .absoluteScroll2 .preview-payment-row > *:nth-child(5) {
        grid-row: 1 !important;
        grid-column: 5 !important;
        text-align: right !important;
    }

    /* Packaging grid: desktop = 1fr 125px 100px 50px 50px 50px (= 375px fixed).
       Stack to 2 rows on mobile. */
    .orderDetailPanel .absoluteScroll2 .grid.fullWidth[style*="1fr 125px 100px 50px 50px 50px"] {
        grid-template-columns: 1fr 1fr 1fr !important;
        font-size: 11px !important;
    }

    /* Shipping grid: desktop = 1fr 1fr 70px 70px 70px (= 210px fixed). */
    .orderDetailPanel .absoluteScroll2 .grid.fullWidth[style*="1fr 1fr 70px 70px 70px"] {
        grid-template-columns: 1fr 1fr 50px 50px 50px !important;
        font-size: 11px !important;
    }

    /* History rows: 3-col → 1-col stacked on mobile */
    .orderDetailPanel .absoluteScroll2 .grid[style*="1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        font-size: 11px !important;
    }

    /* Preview header: 2-col card layout on mobile.
       MUST appear AFTER the History rule above because both selectors
       have equal specificity (0,4,0) and the header's inline style
       contains "1fr 1fr 1fr" which the History rule also matches.
       Later rule wins the cascade with !important. */
    .orderDetailPanel .absoluteScroll2 > .grid:first-child {
        grid-template-columns: 1fr 1fr !important;
        font-size: 14px !important;
        gap: 4px 12px !important;
    }
    .orderDetailPanel .absoluteScroll2 > .grid:first-child > .grid {
        text-align: left !important;
    }

    /* Preview footer: stack buttons */
    .orderDetailPanel .fullWidth:last-child {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* ── Documents section: compact for mobile ── */
    /* DocumentVMTemplate rows: name takes remaining space, date + buttons shrink */
    .preview-documents .grid.fullWiidth[style*="1fr 1fr 1fr"] {
        grid-template-columns: 1fr auto auto auto !important;
        height: auto !important;
        min-height: 30px !important;
        font-size: 11px !important;
        align-items: center !important;
        gap: 4px !important;
    }
    /* Flatten the button container — remove inner grid, show buttons inline */
    .preview-documents .grid.fullWiidth .relativeContainer {
        display: contents !important;
    }
    /* Only flatten the buttons grid (has grid-template-columns), NOT the overlay (has position:absolute) */
    .preview-documents .grid.fullWiidth .relativeContainer > .grid[style*="grid-template-columns"] {
        display: contents !important;
    }
    /* Hide button text, show icon only */
    .preview-documents .grid.fullWiidth button > span {
        display: none !important;
    }
    .preview-documents .grid.fullWiidth button {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        padding: 0 !important;
        font-size: 14px !important;
    }
    /* "Generating..." overlay */
    .preview-documents .relativeContainer > .grid[style*="position:absolute"] {
        position: static !important;
        grid-column: 1 / -1 !important;
        font-size: 11px !important;
    }

    /* ── Hide Export section on mobile ── */
    .preview-export-section {
        display: none !important;
    }

    /* ── Users tab: single-column master/detail ── */
    .user-manager-grid {
        grid-template-columns: 1fr !important;
        grid-column-gap: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .user-manager-grid .user-list-panel {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .user-manager-grid .user-detail-panel {
        grid-column: 1 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Detail panel inner content — stretch to full width */
    .user-manager-grid .user-detail-panel > div {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Credential detail form grids — full width on mobile */
    .user-detail-panel .grid[style*="grid-template-columns:150px"] {
        grid-template-columns: 110px 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* All child grids/divs inside the detail panel must respect 100% */
    .user-detail-panel * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Password row: stack buttons vertically on mobile */
    .user-detail-panel .gridRight[style*="grid-template-columns: auto auto"] {
        grid-template-columns: 1fr 1fr !important;
        grid-gap: 6px !important;
    }
    .user-detail-panel .gridRight[style*="grid-template-columns: auto auto"] input[type="button"] {
        width: 100% !important;
    }

    /* Security tab content — full width */
    .user-detail-panel div[style*="margin-left: 20px"] {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 10px !important;
    }

    /* Tab bar — fill width */
    .user-detail-panel .credential-form-width[style*="display:flex"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* No credential selected → hide detail panel */
    .user-manager-grid:not(.credential-selected) .user-detail-panel {
        display: none !important;
    }

    /* Credential selected → hide list panel */
    .user-manager-grid.credential-selected .user-list-panel {
        display: none !important;
    }

    /* Show back button on mobile */
    .user-back-btn {
        display: flex !important;
    }

    /* Cap form widths so they don't overflow on small screens */
    .credential-form-width {
        max-width: 100% !important;
        width: 100% !important;
    }

    #AccountUserManagerVMContent {
        overflow-x: hidden !important;
    }
}

/* --- Mobile landscape: fullscreen session detail --- */
@media screen and (max-width: 1023px) and (orientation: landscape) {
    /* Landscape: make session fill full viewport (hide header + toolbar) */
    body.session-detail-active #SystemVMHeader,
    body.session-detail-active #MobileBottomToolbar {
        display: none !important;
    }
    #SessionManagerVM.mobile-detail-active {
        grid-template-columns: 1fr !important;
        height: 100vh !important;
    }
    #SessionManagerVM.mobile-detail-active #SessionManagerVMTree {
        display: none !important;
    }
    #SessionManagerVM.mobile-detail-active #SessionManagerVMContent {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        overflow: auto !important;
    }
    /* Hide session detail header — full immersion */
    #SessionManagerVM.mobile-detail-active #SessionVMHeader {
        display: none !important;
    }
    /* Image thumbnails: 40px in landscape */
    #SessionManagerVM.mobile-detail-active .imageContainer {
        width: 40px !important;
        height: 40px !important;
        overflow: hidden !important;
    }
    /* Floating back button for exiting fullscreen */
    #SessionManagerVM.mobile-detail-active .mobile-back-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: fixed !important;
        top: 4px !important;
        left: 4px !important;
        z-index: 201 !important;
        width: 30px !important;
        height: 30px !important;
        background: rgba(0,0,0,0.5) !important;
        color: white !important;
        border-radius: 50% !important;
        border: none !important;
    }
    /* When no session selected in landscape: show list full-width */
    #SessionManagerVM:not(.mobile-detail-active) {
        grid-template-columns: 1fr !important;
    }
    #SessionManagerVM:not(.mobile-detail-active) #SessionManagerVMTree {
        display: grid !important;
    }
    #SessionManagerVM:not(.mobile-detail-active) #SessionManagerVMContent {
        display: none !important;
    }
    #SessionManagerVM:not(.mobile-detail-active) .mobile-back-btn {
        display: none !important;
    }

    /* ══════════════════════════════════════════════════════════════
       Brand sub-tabs: mobile-friendly responsive overrides
       ══════════════════════════════════════════════════════════════ */

    /* ── Global: ensure Brand content area constrains children ── */
    #AccountBrandManagerVMContent {
        overflow-x: auto !important;
    }
    #AccountBrandManagerVMContent > div {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    #AccountBrandManagerVMContent .absoluteScroll {
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }

    /* ── Logos tab (mode==7) ── */

    /* Logo images: responsive sizing */
    #AccountBrandManagerVMContent img[style*="width: 240px"][style*="height:180px"] {
        width: 100% !important;
        max-width: 240px !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
    }

    /* Logo image wrapper: fill available width */
    #AccountBrandManagerVMContent div[style*="display:inline-block"][style*="position:relative"] {
        display: block !important;
        width: 100% !important;
        max-width: 280px !important;
        margin-bottom: 8px !important;
    }

    /* FrameSelection 2-column logo grid → single column */
    .brand-logo-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Icons tab (mode==8) ── */

    /* Icon images: responsive sizing */
    #AccountBrandManagerVMContent img[style*="width: 180px"][style*="height:180px"] {
        width: 100% !important;
        max-width: 180px !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
    }

    /* ── Background tab (mode==0) ── */

    /* Background two-column layout: stack on mobile */
    .brand-bg-layout {
        grid-template-columns: 1fr !important;
    }
    /* Background Details settings grid: constrain to width */
    .brand-bg-settings {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ── Lenses tab (mode==1) ── */

    /* Allow horizontal scrolling instead of squishing columns */
    .brand-lens-container {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
    }
    /* Keep original column widths so content is readable; set a min-width */
    .brand-lens-header,
    .brand-lens-row {
        min-width: 450px !important;
    }

    /* ── Lens Shapes tab (mode==9) ── */

    /* LensShape header row */
    .brand-lensshape-header {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    }
    /* LensShape item rows: flexible columns */
    .brand-lensshape-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto !important;
        max-width: 100% !important;
    }
    /* Truncate lens shape names/filenames */
    .brand-lensshape-row > div {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* ── Language tab (mode==2) ── */

    /* Two-column culture layout → stacked single column */
    .brand-language-grid {
        grid-template-columns: 1fr !important;
        grid-gap: 15px !important;
    }
    /* Culture list: reduce fixed height on smaller screens */
    .brand-language-list {
        height: 250px !important;
    }
    /* Language file detail grid: stack label/value vertically */
    .brand-language-detail {
        grid-template-columns: 1fr !important;
    }
    .brand-language-detail > div[style*="grid-column: 1 / 3"] {
        grid-column: 1 !important;
    }

    /* ── Integration / Export / Lens Ordering tabs (mode==3,4,5) ── */

    /* Integration form grid: stack label/value vertically */
    .brand-integration-grid {
        grid-template-columns: 1fr !important;
        grid-row-gap: 6px !important;
    }
    /* Span full-width elements across the single column */
    .brand-integration-grid > div[style*="grid-column: 1 / 3"] {
        grid-column: 1 !important;
    }
    /* Override hardcoded widths on Integration inputs */
    .brand-integration-grid input[type="text"],
    .brand-integration-grid input[type="password"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .brand-integration-grid select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Password wrapper in Integration tab */
    .brand-integration-grid .password-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ── Files / Upload tab (mode==6) ── */

    /* Files grid column: fill width instead of fixed 350px */
    .brand-files-grid {
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
    }
    /* File item row: compact on narrow screens */
    .brand-files-item {
        grid-template-columns: 1fr auto auto auto !important;
        max-width: 100% !important;
    }
    /* File item buttons: smaller on mobile */
    .brand-files-item button {
        padding: 6px !important;
        font-size: 11px !important;
        margin-left: 3px !important;
    }

    /* ── Brand .tableLabel / .tableValue widths on mobile ── */
    #AccountBrandManagerVMContent .tableLabel {
        width: auto !important;
        min-width: 0 !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
    #AccountBrandManagerVMContent .tableValue {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* ── Detail grids (Integration/Files culture details) ── */
    .brand-detail-grid {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ── Brand enable hint: block display on mobile ── */

    /* ===== SHOW Mode Panel — Mobile/Tablet Responsive ===== */

    /* Reduce padding on top bar */
    #ShowManagerVM > div:first-child {
        padding: 8px 12px !important;
    }

    /* Main content area: less padding, tighter gaps */
    #ShowManagerVM > div:nth-child(2) {
        padding: 20px 12px !important;
        gap: 16px !important;
    }

    /* Logo: smaller on tablets */
    #ShowManagerVM > div:nth-child(2) img {
        max-width: 180px !important;
    }

    /* Welcome heading: smaller */
    #ShowManagerVM > div:nth-child(2) h1 {
        font-size: 22px !important;
    }

    /* Show name input: full available width */
    #ShowManagerVM > div:nth-child(2) > div:nth-child(2) input {
        width: 100% !important;
        max-width: 300px !important;
        font-size: 16px !important; /* Prevent iOS auto-zoom on focus */
    }

    /* New Customer button: slightly smaller */
    #ShowManagerVM > div:nth-child(2) button {
        padding: 14px 36px !important;
        font-size: 16px !important;
    }

    /* Bottom bar: less padding */
    #ShowManagerVM > div:nth-child(3) {
        padding: 8px 12px !important;
    }

    /* Activity panel: responsive padding */
    #ShowManagerVM > div:nth-child(4) {
        padding: 12px 14px !important;
    }

    /* Activity daily summary: wrap on smaller screens */
    #ShowManagerVM > div:nth-child(4) > div:first-child > div {
        gap: 8px !important;
        font-size: 12px !important;
    }

    /* Activity entries: tighter */
    #ShowManagerVM > div:nth-child(4) .show-activity-entry {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
}