/* Desktop site's small-screen layout. Never loaded by the separate mobile app. */
.site-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.site-menu-toggle i { margin: 0; }
.desktop-machine-browser, .site-nav-backdrop,
.phone-tools-toggle, .phone-stats-toggle, .phone-sales-tools-toggle,
.phone-calendar-tools, .phone-calendar-status, .phone-filters-toggle, .phone-tools-panel,
.phone-settings-heading, .phone-threshold-cancel,
.phone-export-intro, .phone-export-icon, .phone-export-description { display: none; }

@media (max-width: 900px) {
  body.desktop-site {
    --phone-ink: #25324a;
    --phone-muted: #627188;
    --phone-line: #dce4ec;
    --phone-surface: #f0f4f8;
    --site-header-height: 120px;
    --site-footer-height: 90px;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    background: var(--phone-surface);
    -webkit-text-size-adjust: 100%;
  }
  .desktop-site > header {
    position: relative;
    flex: 0 0 auto;
    height: auto !important;
    width: 100%;
    z-index: 100;
    background: #343957;
  }
  .desktop-site #headerBar {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 0;
    height: auto;
    padding: calc(10px + env(safe-area-inset-top)) 12px 10px !important;
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
    border-radius: 0;
    box-shadow: 0 2px 12px #18213a18;
  }
  .desktop-site .home-content {
    position: absolute !important;
    top: calc(10px + env(safe-area-inset-top));
    left: 8px;
    width: 44px;
    height: 44px;
    z-index: 120;
    transition: none;
  }
  .desktop-site .site-menu-toggle {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: #fff;
    background: #ffffff12;
  }
  .desktop-site .site-menu-toggle i { font-size: 28px; }
  .desktop-site #headerBar .header-left {
    display: flex !important;
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
    min-width: 0;
    margin: 0 0 0 48px;
    gap: 8px;
  }
  .desktop-site #headerBar .search {
    flex: 1 1 140px;
    position: relative;
    inset: auto;
    width: auto;
    min-width: 0;
    margin: 0 !important;
    min-height: 44px;
  }
  .desktop-site #headerBar .search input {
    width: 100%;
    min-width: 0;
    height: 44px;
    margin: 0;
    padding: 8px 12px 8px 38px !important;
    border: 1px solid #dbe3ef;
    border-radius: 12px;
    font-size: 16px;
  }
  .desktop-site .search .fa-search { font-size: 17px; left: 13px; top: 50%; transform: translateY(-50%); line-height: 1; }
  .desktop-site #headerBar .search-actions {
    width: auto;
    flex: 0 0 auto;
    display: flex !important;
    gap: 8px;
  }
  .desktop-site #headerBar .search-actions:empty { display: none !important; }
  .desktop-site #headerBar .header-right {
    display: flex !important;
    flex: 1 1 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    margin: 0;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .desktop-site #headerBar .header-right > * { flex: 0 0 auto; }
  .desktop-site #headerBar :is(.options-button, .productTasksButton, .searchBuilderButton, .machines-reset-filters, .fixedColumnSelector, .fixedMachineColumnsToggle) {
    width: auto;
    height: auto;
    min-height: 40px;
    margin: 0;
    padding: 8px 12px;
    border-radius: 10px;
  }
  .desktop-site #headerBar #advancedSearchButton { display: inline-flex !important; }
  .desktop-site #machinePageLength { width: auto; }
  .desktop-site #machinePageLength select { height: 40px; font-size: 14px; border: 1px solid #dbe3ef; border-radius: 10px; padding: 8px; }
  .desktop-site #headerBar .header-center { display: none !important; }
  .desktop-site #headerBar :is(#fixedColumnSelector, #fixMachineColumnsToggle) { display: none; }

  /* A drawer, not a hover-only flyout extending outside the phone. */
  .desktop-site .sidebar {
    top: 0;
    bottom: 0;
    width: min(330px, calc(100vw - 48px));
    height: 100vh;
    height: 100dvh;
    z-index: 130;
    box-shadow: 12px 0 48px #10192e55;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .desktop-site .sidebar.close { display: none; }
  .desktop-site .sidebar::before { content: "Navigation"; position: absolute; top: calc(22px + env(safe-area-inset-top)); left: 64px; color: #fff; font-size: 15px; font-weight: 600; }
  .desktop-site .sidebar .nav-links {
    top: 0;
    height: auto;
    margin: 0;
    padding: calc(64px + env(safe-area-inset-top)) 10px calc(20px + env(safe-area-inset-bottom));
  }
  .desktop-site .sidebar .nav-links .iocn-link { min-height: 48px; border-radius: 10px; }
  .desktop-site .sidebar .nav-links li a .link_name { flex: 1; width: auto; font-size: 14px; }
  .desktop-site .sidebar .nav-links li i { min-width: 44px; }
  .desktop-site .sidebar .nav-links li .sub-menu,
  .desktop-site .sidebar .nav-links li.showMenu .sub-menu {
    position: static;
    width: 100%;
    min-width: 0;
    height: auto;
    max-height: none;
    margin: 4px 0 8px;
    padding: 8px 12px;
    border-radius: 10px;
    overflow: visible;
    transform: none;
  }
  .desktop-site .sidebar .nav-links .sub-menu a { white-space: normal; opacity: 1; min-height: 40px; }
  .desktop-site .sidebar .sub-menu p { color: #b0bacf; font-size: 11px; margin: 14px 5px 4px; }
  .desktop-site .sidebar .nav-links .sub2-menu {
    position: static !important;
    width: auto !important;
    opacity: 1 !important;
    display: block !important;
    padding-left: 14px;
  }
  .desktop-site .sidebar .profile-details { position: static; width: 100%; margin-top: 16px; border-radius: 12px; }
  .desktop-site.nav-drawer-open .home-content { z-index: 140; }
  .desktop-site.nav-drawer-open .site-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 125;
    background: #10192e80;
    border: 0;
    backdrop-filter: blur(3px);
  }

  .desktop-site #mainWrapper {
    top: 0;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    flex: 1 1 auto;
    overflow: auto;
  }
  .desktop-site #table-container, .desktop-site #tabulatorContainer {
    margin-top: 0 !important;
    width: 100%;
    height: calc(100vh - var(--site-header-height) - var(--site-footer-height)) !important;
    height: calc(100dvh - var(--site-header-height) - var(--site-footer-height)) !important;
    min-height: 150px;
    overflow: auto;
  }
  .desktop-site #main-table { min-height: 200px; flex: 1 0 auto; }
  .desktop-site #main-table .tabulator-tableholder { overscroll-behavior-x: contain; }
  .desktop-site .tabulator { max-width: 100%; font-size: 13px; }
  .desktop-site .tabulator :is(.tabulator-header, .tabulator-cell) { font-size: 13px; }
  .desktop-site .tabulator .tabulator-frozen { position: static !important; left: auto !important; right: auto !important; }
  .desktop-site .desktop-machine-browser { display: block; padding: 14px 12px 20px; }
  .desktop-site .machine-browser-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
  .desktop-site .machine-browser-tools h1 { font-size: 20px; font-weight: 700; color: var(--phone-ink); margin: 0 auto 0 0; }
  .desktop-site .machine-view-switch { display: flex; background: #e2e8f0; border-radius: 11px; padding: 3px; }
  .desktop-site .machine-view-switch button { border: 0; border-radius: 8px; background: transparent; padding: 8px 12px; min-height: 38px; font-size: 13px; color: #475569; }
  .desktop-site .machine-view-switch button[aria-pressed="true"] { background: white; color: #21354c; box-shadow: 0 2px 6px #17233a15; font-weight: 600; }
  .desktop-site .machine-sort { display: flex; align-items: center; gap: 8px; width: 100%; font-size: 12px; color: var(--phone-muted); }
  .desktop-site .machine-sort select { min-width: 0; flex: 1; background: white; color: var(--phone-ink); border: 1px solid var(--phone-line); border-radius: 9px; padding: 8px; min-height: 40px; }
  .desktop-site .machine-card-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .desktop-site .desktop-machine-browser > .machines-disabled-section { margin: 0 0 14px; flex-shrink: 0; box-shadow: none; }
  .desktop-site .desktop-machine-browser .machines-disabled-section-header { min-height: 52px; gap: 10px; padding: 12px; }
  .desktop-site .desktop-machine-browser .machines-disabled-section-title-wrap { min-width: 0; flex-wrap: wrap; gap: 6px 8px; }
  .desktop-site .desktop-machine-browser .machines-disabled-list { margin-bottom: 0; max-height: min(50dvh, 420px); padding: 8px; overscroll-behavior: contain; }
  .desktop-site .desktop-machine-browser .machines-disabled-card { padding: 10px; }
  .desktop-site .desktop-machine-browser .machines-disabled-card-meta { flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
  .desktop-site .desktop-machine-browser .machines-disabled-open-btn { flex-shrink: 0; min-height: 44px; }
  .desktop-site .machine-card { min-width: 0; background: white; border: 1px solid var(--phone-line); border-radius: 16px; padding: 16px; box-shadow: 0 4px 14px #24364b08; }
  .desktop-site .machine-card-title { display: block; text-align: left; font-size: 16px; font-weight: 700; color: #214573; border: 0; background: none; padding: 0; min-height: 32px; overflow-wrap: anywhere; }
  .desktop-site .machine-card-location { color: var(--phone-muted); font-size: 12px; font-weight: 400; line-height: 1.6; margin: 4px 0 14px !important; padding: 0; overflow-wrap: anywhere; }
  .desktop-site .machine-card-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; }
  .desktop-site .machine-card-metrics > div { background: #f3f7fa; border-radius: 10px; padding: 10px 8px; }
  .desktop-site .machine-card-metrics :is(dt, dd) { float: none; position: static; width: auto; height: auto; padding: 0; margin: 0; border: 0; line-height: 1.5; }
  .desktop-site .machine-card-metrics dt { font-size: 10px; font-weight: 500; color: var(--phone-muted); margin-bottom: 4px; }
  .desktop-site .machine-card-metrics dd { margin: 0; font-size: 16px; font-weight: 700; color: var(--phone-ink); overflow-wrap: anywhere; }
  .desktop-site .machine-card-meta { color: var(--phone-muted); font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
  .desktop-site .machine-card-actions { display: flex; gap: 8px; margin-top: 14px; }
  .desktop-site .machine-card-actions > * { flex: 1; text-align: center; min-height: 44px; padding: 11px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; text-decoration: none; }
  .desktop-site .machine-card-actions button { color: #fff; background: #343957; border: 1px solid #343957; }
  .desktop-site .machine-card-actions a { color: #285345; background: #edf6f1; border: 1px solid #c9e2d5; }
  .desktop-site .machine-browser-empty { padding: 32px 16px; text-align: center; color: var(--phone-muted); }
  .desktop-site .desktop-machine-browser [hidden] { display: none !important; }
  .desktop-site #table-container.machine-cards-active #main-table { display: none !important; }
  .desktop-site .machine-table-hint { color: var(--phone-muted); font-size: 12px; margin: 0; }
  .desktop-site #footer {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    height: auto;
    width: 100%;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    background: #fff;
    color: var(--phone-ink);
    border-top: 1px solid var(--phone-line);
    z-index: 5;
  }
  .desktop-site #footer:empty { display: none; }
  .desktop-site #footer .dt-info { color: var(--phone-muted); font-size: 11px; text-align: center; }
  .desktop-site :is(#footer, .products-footer, .popup-footer, .locations-footer, .customers-footer) .dt-paging { margin: 0; max-width: 100%; overflow-x: auto; }
  .desktop-site .pagination { margin: 0; width: max-content; min-width: 100%; justify-content: center; }
  .desktop-site .pagination .page-link { min-height: 40px; min-width: 36px; display: grid; place-items: center; font-size: 12px; }
  .desktop-site #footer .page-item[data-page-distance]:not([data-page-distance="0"]):not([data-page-distance="1"]) { display: none; }

  /* Machine and service detail views keep one content scroller below the tabs. */
  .desktop-site .assetMenu {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
  }
  .desktop-site .assetToolbar { position: relative; display: flex; flex-direction: column; align-items: stretch; height: auto; padding: calc(16px + env(safe-area-inset-top)) 16px 12px; gap: 4px; box-shadow: none; cursor: default; }
  .desktop-site .assetTitle { font-size: 18px; line-height: 1.4; margin: 0; padding-right: 48px; overflow-wrap: anywhere; }
  .desktop-site .assetSubElement { position: static; font-size: 12px; color: #d2dbea; padding-right: 40px; overflow-wrap: anywhere; }
  .desktop-site .assetToolbarRight { width: 100%; min-width: 0; }
  .desktop-site .assetSpans { width: 100%; display: flex; gap: 14px; overflow-x: auto; padding: 8px 0 0; }
  .desktop-site .assetSpans > span { flex: 0 0 auto; font-size: 12px; }
  .desktop-site .assetSpans > span::before { content: attr(data-stat-label); display: block; max-width: 100px; white-space: normal; font-size: 9px; color: #cbd5e1; margin-bottom: 4px; }
  .desktop-site .assetToolbar .assetClose { position: absolute; right: 12px; top: calc(12px + env(safe-area-inset-top)); margin: 0; }
  .desktop-site :is(.assetClose, .productClose, .popup-close-btn) { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; margin: 0; flex-shrink: 0; }
  .desktop-site :is(.assetClose, .productClose) i { margin: 0; font-size: 24px; }
  .desktop-site .assetContent { flex-direction: column; align-items: stretch; }
  .desktop-site .assetMenuViews { display: flex; width: 100%; height: auto; overflow-x: auto; overflow-y: hidden; gap: 4px; padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--phone-line); }
  .desktop-site .assetMenuView { flex: 0 0 auto; width: auto; padding: 8px 14px; min-height: 42px; font-size: 13px; line-height: 26px; border-radius: 10px; white-space: nowrap; color: #5b6880; }
  .desktop-site .assetMenuViewSelected { background: #343957; color: #fff; }
  .desktop-site .assetContentRight { width: 100%; flex: 1 1 auto; min-width: 0; height: auto; padding: 12px 12px calc(16px + env(safe-area-inset-bottom)); background: var(--phone-surface); gap: 12px; overscroll-behavior: contain; }
  .desktop-site .assetRowSection { padding: 16px; border: 1px solid var(--phone-line); border-radius: 14px; box-shadow: 0 3px 12px #24364b08; flex-shrink: 0; min-width: 0; }
  .desktop-site :is(.assetSectionHeader, .assetSectionTitle) { gap: 8px; flex-wrap: wrap; font-size: 16px; color: var(--phone-ink); padding: 0 0 12px; }
  .desktop-site .assetSectionActions { flex-wrap: wrap; }
  .desktop-site .assetSectionActionButton { min-height: 40px; }
  .desktop-site .assetRow { flex-direction: column; align-items: stretch; gap: 6px; margin: 0 0 16px; }
  .desktop-site :is(.assetLabel, .coin-mech-asset-label) { width: 100%; text-align: left; padding: 0; font-size: 12px; color: var(--phone-muted); }
  .desktop-site .assetValue { width: 100%; min-width: 0; font-size: 14px; }
  .desktop-site .assetValue :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .dropdown-selector-wrapper, .dropdown-selector-button) { width: 100% !important; min-width: 0; max-width: 100%; }
  .desktop-site .assetValue :is(input, select, textarea, .dropdown-selector-button) { min-height: 44px; font-size: 16px; border-radius: 9px; padding: 10px; }
  .desktop-site .assetValue :is(input[type="checkbox"], input[type="radio"]) { min-height: 22px; width: 22px; height: 22px; }
  .desktop-site #coin-mech-info .assetRow { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .desktop-site #coin-mech-info .assetLabel { text-align: left; }
  .desktop-site .dropdown-selector-content { max-width: 100%; }

  /* Shared dialogs and data-heavy screens. Wide tables scroll inside their panel. */
  .desktop-site :is(.popup-container, #products-modal, #product-detail-overlay > div) {
    max-width: 100vw !important;
    width: 100% !important;
    height: 100vh;
    height: 100dvh !important;
    max-height: 100dvh;
    min-width: 0 !important;
    border-radius: 0 !important;
    overflow: hidden;
  }
  .desktop-site :is(.popup-title-bar, .product-detail-header-row) { padding: calc(10px + env(safe-area-inset-top)) 14px 10px !important; min-height: 64px; gap: 10px; flex-shrink: 0; }
  .desktop-site .product-detail-header-row { justify-content: space-between; align-items: center; }
  .desktop-site :is(.popup-title-bar, .product-detail-header-row, .products-popup-header-row) :is(h2, h3, h4) { font-size: 18px !important; overflow-wrap: anywhere; min-width: 0; }
  .desktop-site :is(.popup-content, #product-detail-content) { min-width: 0; min-height: 0; padding: 14px !important; overflow: auto; }
  .desktop-site :is(.popup-controls, .popup-right-controls, .locations-controls, .customers-controls, .popup-form-actions, .popup-action-buttons) { display: flex; flex-wrap: wrap; gap: 8px; width: auto; min-width: 0; }
  .desktop-site :is(.popup-container, #products-modal, #product-detail-overlay, #add-product-overlay, #options) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { min-width: 0 !important; max-width: 100%; min-height: 44px; font-size: 16px !important; }
  .desktop-site :is(#product-detail-content, #add-product-overlay) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) { background: #fff; color: var(--phone-ink) !important; border: 1px solid #cbd5e1; border-radius: 9px !important; }
  .desktop-site :is(.popup-container, #products-modal, #product-detail-overlay) button { min-height: 40px; }
  .desktop-site :is(.popup-footer, .products-footer, .locations-footer, .customers-footer) { flex-wrap: wrap; height: auto; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .desktop-site .popup-shortcuts-panel { position: fixed; top: calc(64px + env(safe-area-inset-top)); left: 12px; right: 12px; width: auto; max-width: none; max-height: 65dvh; overflow: auto; }
  .desktop-site #products-modal > div:nth-child(2) { padding: 10px 12px !important; gap: 8px !important; max-height: 32dvh; overflow: auto; flex-shrink: 0; }
  .desktop-site #products-modal > div:nth-child(2) > :is(input, select) { flex: 1 1 140px; width: 100px; }
  .desktop-site #products-modal > div:nth-child(3) { padding: 0 !important; min-height: 160px; }
  .desktop-site #product-detail-overlay .product-detail-header-row + div { overflow-x: auto; flex-shrink: 0; }
  .desktop-site .product-tab { flex-shrink: 0; padding: 14px !important; font-size: 13px !important; white-space: nowrap; }
  .desktop-site :is(#product-detail-content, #add-product-overlay) [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  .desktop-site #product-detail-content [style*="grid-template-columns: repeat(5"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .desktop-site #product-detail-content > div { min-width: 0; }
  .desktop-site #product-detail-content :is(img, [style*="width: 300px"], [style*="width: 250px"]) { max-width: 100%; }
  .desktop-site #product-detail-content [style*="width: 300px"] { width: 100% !important; }
  .desktop-site #product-detail-content > div:has(#selections-tabulator) { height: auto !important; min-height: 100%; }
  .desktop-site #selections-tabulator { height: 60dvh !important; min-height: 300px; }
  .desktop-site #selections-top-panels :is([style*="display: flex"]) { flex-wrap: wrap; gap: 10px; }
  .desktop-site #bulk-product-dropdown { width: 100% !important; }
  .desktop-site #add-product-overlay { padding: 0 !important; }
  .desktop-site #add-product-overlay > div { width: 100% !important; max-height: 100dvh !important; border-radius: 0 !important; }
  .desktop-site #add-product-overlay > div > div { padding: 16px !important; min-width: 0; }
  .desktop-site :is(.machine-sales-report-controls, .product-sales-report-controls, .sales-list-controls, .service-run-header-controls, .template-row-header) { flex-wrap: wrap; min-width: 0; gap: 8px; }
  .desktop-site :is(.machine-sales-columns-popup, .service-run-confirm-box, .service-run-flagged-menu) { min-width: 0; max-width: calc(100vw - 24px); }
  .desktop-site .service-run-flagged-menu { width: min(340px, calc(100vw - 24px)); }
  .desktop-site .template-row-wrapper { overflow-x: auto; }
  .desktop-site .modal-dialog { width: auto !important; max-width: calc(100vw - 20px) !important; margin: 10px auto; }
  .desktop-site .modal-content { max-height: calc(100dvh - 20px); }
  .desktop-site .modal-body { overflow: auto; min-height: 0; }
  .desktop-site #searchBuilderModal .tabulator-filter-row { flex-wrap: wrap; }
  .desktop-site #searchBuilderModal .tabulator-filter-row > * { flex-basis: 100%; }
  .desktop-site #headerBar #options.options { display: none !important; }
  .desktop-site #headerBar #options.optionsSelected { display: block !important; position: fixed; top: var(--site-header-height); bottom: 0; left: 0; width: 100%; height: auto; max-height: none; overflow: auto; padding-bottom: env(safe-area-inset-bottom); z-index: 150; }
  .desktop-site #options-menu { display: flex; overflow-x: auto; width: 100%; height: auto; }
  .desktop-site #options-menu > div { flex: 0 0 auto; min-height: 44px; font-size: 12px; padding: 12px; }
  .desktop-site :is(.options-panel, .options-panel-row) { flex-wrap: wrap; min-width: 0; }
  .desktop-site .options-panel-column { width: 100%; min-width: 0; }
  .desktop-site :is(.options-data-selected, .column-data) { width: 100%; max-width: 100%; }
  .desktop-site .planogram-row { overflow-x: auto; }
  .desktop-site .planogram-popup-modal { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .desktop-site .planogram-popup-body { min-width: 0; overflow: auto; }
  .desktop-site.planogram-page .planogram-page-scroll { height: 100dvh; padding: 8px; }
  .desktop-site.planogram-page .planogram-page-header { flex-wrap: wrap; padding: 12px; gap: 10px; }
  .desktop-site.planogram-page .planogram-asset-chip { order: -1; width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .desktop-site.planogram-page #headerBar { min-height: 0; padding: 0 !important; width: auto; }
  .desktop-site.planogram-page .planogram-header-stats { width: 100%; min-width: 0; overflow-x: auto; }
  .desktop-site.planogram-page .planogram-header-meta { max-width: 100%; }
  .desktop-site :is(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid #2782bd; outline-offset: 2px; }
}

@media (min-width: 600px) and (max-width: 900px) {
  .desktop-site .machine-card-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desktop-site .assetRow { flex-direction: row; align-items: center; }
  .desktop-site .assetLabel { width: 32%; flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .desktop-site .sidebar { transition: none; }
}

/* Keep the wide planogram canvas separate from viewport-sized chrome and editors. */
@media (max-width: 900px) {
  .desktop-site.planogram-page .planogram-page-scroll { display: flex; flex-direction: column; width: 100%; max-width: 100vw; padding: 0; overflow: hidden; }
  .desktop-site.planogram-page .planogram-page-scroll > .planogram-page-header { flex: 0 0 auto; width: 100%; max-width: 100%; min-width: 0; margin: 0; border-radius: 0; box-shadow: none; }
  .desktop-site.planogram-page .planogram-page-scroll > .planogramCell { flex: 1 1 auto; width: 100% !important; max-width: 100%; min-width: 0; min-height: 0; height: auto; overflow: auto; overscroll-behavior: contain; padding: 8px; }
  .desktop-site .productMenuVisible { width: calc(100vw - 24px); max-width: 480px; max-height: calc(100dvh - 24px); height: auto; inset: 50% auto auto 50%; transform: translate(-50%, -50%); display: block; overflow: auto; overscroll-behavior: contain; border: 1px solid #dce4ec; border-radius: 14px; padding: 0; box-shadow: 0 16px 60px #14233a55; }
  .desktop-site .productMenuVisible .productToolbar { position: sticky; top: 0; z-index: 2; width: 100%; height: auto; min-height: 56px; margin: 0; padding: 6px 8px 6px 14px; display: flex; align-items: center; gap: 8px; }
  .desktop-site .productMenuVisible .productTitle { flex: 1; width: auto; min-width: 0; height: auto; padding: 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
  .desktop-site .productMenuVisible .productImgWrapper { height: 112px; width: 100%; margin: 0; padding: 12px; }
  .desktop-site .productMenuVisible .productImgWrapper img { max-height: 88px; max-width: 100%; object-fit: contain; }
  .desktop-site .productMenuVisible .productDetailsWrapper { display: grid; grid-template-columns: minmax(80px, .8fr) minmax(0, 1.5fr); gap: 10px 8px; padding: 12px; margin: 0; }
  .desktop-site .productMenuVisible :is(.productDetail, .productValues) { width: auto; min-width: 0; height: auto; float: none; position: static; margin: 0; padding: 0; text-align: left; justify-content: flex-start; font-size: 12px; }
  .desktop-site .productMenuVisible .productDetail { color: #627188; }
  .desktop-site .productMenuVisible .productValues { flex-wrap: wrap; gap: 4px; }
  .desktop-site .productMenuVisible .productChangeWrapper { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(80px, .8fr) minmax(0, 1.5fr); gap: 10px 8px; }
  .desktop-site .productMenuVisible input:not([type="checkbox"]) { font-size: 16px; min-height: 40px; border: 1px solid #cbd5e1; border-radius: 7px; padding: 4px; max-width: 100%; }
  .desktop-site .productMenuVisible .product_counts { width: 38px; }
  .desktop-site .productMenuVisible .product_price { width: 100px !important; }
  .desktop-site .productMenuVisible #productDefaultPrice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .desktop-site .productMenuVisible #productDefaultPrice button { height: auto; min-height: 36px; line-height: 1.3; white-space: normal; }
  .desktop-site .productMenuVisible :is(.changeProduct, .submitChanges) { float: none; display: flex; justify-content: center; align-items: center; min-height: 44px; height: auto; line-height: 1.4; margin: 0; padding: 10px; font-size: 13px; }
}

.phone-report-filters-toggle, .phone-report-tools-toggle, .phone-report-empty { display: none; }

/* Sales hub: keep the report in view, with optional filters and table tools. */
@media (max-width: 900px) {
  .desktop-site #dynamic-popup-overlay .popup-content.sales-hub-content { flex: 1; padding: 10px !important; overflow: auto; background: linear-gradient(180deg, #f3f6fa, #fff 260px); }
  .desktop-site #dynamic-popup-overlay .sales-hub-content button { min-height: 44px; }
  .desktop-site .sales-hub-content .report-view-container { gap: 10px; min-width: 0; height: 100%; }
  .desktop-site .sales-hub-tabs > .sales-hub-tab { flex: 1 0 auto; text-align: center; }
  .desktop-site .sales-hub-content .report-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; margin: 0; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px #23334c08; overflow: visible; }
  .desktop-site .sales-hub-content :is(.machine-sales-date-range, .product-sales-date-trigger) { grid-column: 1 / -1; grid-row: 1; min-width: 0; width: 100%; min-height: 44px; height: auto; padding: 10px; font-size: 16px; border-radius: 8px; box-shadow: none; color: #27364b; }
  .desktop-site .sales-hub-content .product-sales-date-trigger { justify-content: center; }
  .desktop-site .sales-hub-content .product-sales-date-badge { background: transparent; color: inherit; font-size: 14px; padding: 0; white-space: normal; }
  .desktop-site .sales-hub-content .report-controls > .btn-primary { grid-column: 2; grid-row: 2; }
  .desktop-site .sales-hub-content .report-controls > .btn { min-height: 44px; margin: 0; padding: 8px 10px; border-radius: 8px; box-shadow: none; font-size: 13px; }
  .desktop-site .sales-hub-content .report-controls > .btn:not(.btn-primary) { grid-column: 1 / -1; background: #f4f6f9; color: #475569; border: 1px solid #d7e1ef; }
  .desktop-site .phone-report-filters-toggle, .desktop-site .phone-report-tools-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f5f7fa; color: #343957; font-size: 13px; font-weight: 600; }
  .desktop-site .phone-report-filters-toggle { grid-column: 1; grid-row: 2; }
  .desktop-site :is(.phone-report-filters-toggle, .phone-report-tools-toggle)::after { content: '+'; font-size: 16px; }
  .desktop-site :is(.phone-report-filters-toggle, .phone-report-tools-toggle)[aria-expanded="true"] { background: #343957; color: #fff; }
  .desktop-site :is(.phone-report-filters-toggle, .phone-report-tools-toggle)[aria-expanded="true"]::after { content: '-'; }
  .desktop-site .sales-hub-content .phone-report-ready .report-controls:not(.phone-report-filters-open) > :is(.machine-sales-filter, .product-sales-filter, .btn:not(.btn-primary)) { display: none; }
  .desktop-site .sales-hub-content :is(.machine-sales-filter, .product-sales-filter) { min-width: 0; width: 100%; margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; flex-direction: column; align-items: stretch; gap: 4px; }
  .desktop-site .sales-hub-content .machine-sales-filter .region-label { font-size: 11px; font-weight: 600; }
  .desktop-site .sales-hub-content :is(.machine-sales-filter .region-select, .product-sales-filter-trigger) { width: 100%; min-width: 0; min-height: 44px; padding: 8px 26px 8px 8px; font-size: 16px; border: 1px solid #d7e1ef; border-radius: 8px; background-color: #fff; box-shadow: none; }
  .desktop-site .sales-hub-content .product-sales-filter-trigger { padding: 8px; font-size: 13px; text-align: left; }
  .desktop-site .sales-hub-content .product-sales-filter-trigger span { min-width: 0; overflow-wrap: anywhere; }
  .desktop-site .sales-hub-content .product-sales-filter-dropdown { position: static; max-height: 240px; padding: 6px; box-shadow: none; }
  .desktop-site .sales-hub-content .product-sales-filter-search { width: 100%; min-width: 0; min-height: 44px; font-size: 16px; }
  .desktop-site .sales-hub-content .product-sales-filter-option { min-height: 44px; padding: 10px 6px; overflow-wrap: anywhere; }
  .desktop-site .sales-hub-content :is(.machine-sales-report-summary, .product-sales-summary) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; flex: 0 0 auto; }
  .desktop-site .sales-hub-content .client-sales-report-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desktop-site .sales-hub-content :is(.summary-item, .product-sales-summary-card) { min-width: 0; padding: 8px; gap: 3px; border-radius: 8px; background: #edf2f7; border: 0; box-shadow: none; }
  .desktop-site .sales-hub-content :is(.summary-item, .product-sales-summary-card):first-child { grid-column: 1 / -1; padding: 0 2px; background: transparent; flex-direction: row; align-items: baseline; gap: 8px; }
  .desktop-site .sales-hub-content .product-sales-summary-card:first-child .product-sales-summary-text { flex-direction: row; gap: 8px; align-items: baseline; }
  .desktop-site .sales-hub-content .product-sales-summary-icon { display: none; }
  .desktop-site .sales-hub-content :is(.summary-label, .product-sales-summary-label) { font-size: 10px; line-height: 1.4; letter-spacing: 0; text-transform: none; color: #5c6c80; }
  .desktop-site .sales-hub-content :is(.summary-value, .product-sales-summary-value) { font-size: 16px; line-height: 1.4; font-weight: 700; overflow-wrap: anywhere; }
  .desktop-site .sales-hub-content :is(.summary-item, .product-sales-summary-card):first-child :is(.summary-value, .product-sales-summary-value) { font-size: 11px; font-weight: 500; }
  .desktop-site .sales-hub-content :is(.machine-sales-report-tools, .product-sales-tools) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 0; flex: 0 0 auto; }
  .desktop-site .sales-hub-content :is(.machine-sales-report-search, .product-sales-search) { grid-column: 1; grid-row: 1; width: 100%; min-width: 0; height: 44px; font-size: 16px; padding: 8px 10px; border-radius: 8px; }
  .desktop-site .phone-report-tools-toggle { grid-column: 2; grid-row: 1; }
  .desktop-site .sales-hub-content :is(.machine-sales-report-group, .product-sales-group-toggle, .product-sales-actions) { grid-column: 1 / -1; min-width: 0; margin: 0; }
  .desktop-site .sales-hub-content .machine-sales-report-group select { min-width: 0; flex: 1; width: auto; min-height: 44px; font-size: 16px; }
  .desktop-site .sales-hub-content .product-sales-group-toggle button { flex: 1; min-height: 44px; font-size: 12px; }
  .desktop-site .sales-hub-content :is(.machine-sales-report-actions, .product-sales-actions) { display: flex; gap: 8px; flex: 0 0 auto; margin: 0; }
  .desktop-site .sales-hub-content :is(.machine-sales-report-actions, .product-sales-actions) .btn { min-height: 44px; padding: 8px; font-size: 12px; border-radius: 8px; }
  .desktop-site .sales-hub-content .machine-sales-columns-btn { width: 44px; flex: 0 0 44px; }
  .desktop-site .sales-hub-content :is(.machine-sales-report-actions, .product-sales-actions) > .btn:last-child { flex: 1; }
  .desktop-site .sales-hub-content .phone-report-ready:not(.phone-report-tools-open) :is(.machine-sales-report-group, .product-sales-group-toggle, .machine-sales-report-actions, .product-sales-actions) { display: none; }
  .desktop-site .sales-hub-content .machine-sales-report-table-wrap { position: relative; min-height: 260px; flex: 1 0 260px; border-radius: 10px; }
  .desktop-site .sales-hub-content .phone-report-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; gap: 8px; color: #5c6c80; text-align: center; font-size: 13px; pointer-events: none; background: linear-gradient(145deg, #fff, #f5f8fb); }
  .desktop-site .phone-report-empty i { font-size: 28px; color: #536681; }
  .desktop-site .phone-report-empty strong { font-size: 15px; color: #27364b; }
  .desktop-site .phone-report-empty p { margin: 0; max-width: 250px; color: #5c6c80; font-size: 13px; font-weight: 400; line-height: 1.5; }
  .desktop-site .sales-hub-content .machine-sales-report-table-wrap:has(.tabulator-header) .phone-report-empty { display: none; }
  .desktop-site .sales-hub-content .machine-sales-columns-popup { display: flex; flex-direction: column; width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 0; overflow: hidden; border-radius: 12px; }
  .desktop-site .sales-hub-content .machine-sales-columns-header { padding: 10px 12px; flex-shrink: 0; }
  .desktop-site .sales-hub-content .machine-sales-columns-body { padding: 12px; min-height: 0; overflow: auto; grid-template-columns: minmax(0, 1fr); }
}

/* Shared popup shells keep titles, navigation and content in separate rows. */
@media (max-width: 900px) {
  .desktop-site .popup-title-bar { flex-wrap: wrap; gap: 6px !important; padding: calc(8px + env(safe-area-inset-top)) 12px 8px !important; }
  .desktop-site .popup-title-bar > h3 { flex: 1 1 0; margin: 0; line-height: 1.3; overflow-wrap: normal; }
  .desktop-site .popup-title-bar > :is(.popup-shortcuts-wrap, .productClose, .popup-header-actions) { flex: 0 0 auto; margin: 0 !important; }
  .desktop-site .popup-title-bar > :is(.operations-hub-section-tabs, .reports-hub-section-tabs, .sales-hub-tabs) { order: 2; flex: 0 0 100%; width: 100%; min-width: 0; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding: 4px 0 0; scrollbar-width: thin; }
  .desktop-site :is(.operations-hub-section-tabs, .reports-hub-section-tabs, .sales-hub-tabs) > button { flex-shrink: 0; min-height: 36px; padding: 6px 10px; font-size: 12px; white-space: nowrap; border-radius: 8px; }
  .desktop-site .popup-content.operations-hub-content { padding: 0 !important; overflow: hidden; }
  .desktop-site .popup-content.reports-hub-content { padding: 0 !important; }
  .desktop-site .reports-hub-container { --reports-hub-gutter: 8px; padding: 0 8px 8px; min-width: 0; }
  .desktop-site .operations-hub-container { --operations-hub-gutter: 8px; --operations-hub-bottom-padding: 0px; min-width: 0; padding: 0 8px; }
  .desktop-site :is(.operations-hub-subtabs, .reports-hub-subtabs) { flex: 0 0 auto; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; gap: 4px; margin: 0 -8px 8px; padding: 6px 8px; background: #fff; border-bottom: 1px solid var(--phone-line); }
  .desktop-site :is(.operations-hub-subtabs, .reports-hub-subtabs) > button { flex: 0 0 auto; min-height: 38px; white-space: nowrap; font-size: 12px; padding: 6px 10px; color: #52617b; background: transparent; border-color: transparent; box-shadow: none; }
  .desktop-site :is(.operations-hub-subtabs, .reports-hub-subtabs) > button.active { color: #fff; background: #343957; border-color: #343957; }
  .desktop-site .operations-hub-view-root { min-width: 0; min-height: 0; border: 0; border-radius: 0; }
  .desktop-site .operations-hub-view-root.modems-popup-content { padding: 0; }
  .desktop-site .operations-hub-view-actions { gap: 6px; max-height: 30dvh; overflow: auto; }
  .desktop-site .operations-hub-view-actions > label { flex: 1 1 130px; min-width: 0; margin: 0; }
  .desktop-site .operations-hub-view-actions :is(input, select) { width: 100%; }
  .desktop-site .operations-hub-layout { grid-template-columns: minmax(0, 1fr); overflow: auto; }
  .desktop-site .operations-hub-panel { min-width: 0; padding: 12px; box-shadow: none; }
  .desktop-site .modems-toolbar { grid-template-columns: minmax(0, 1fr) auto; flex: 0 0 auto; gap: 8px; padding: 8px; margin: 0; border-radius: 10px; background: #f5f7fa; max-height: 35dvh; overflow: auto; }
  .desktop-site .modems-toolbar .modems-search { grid-column: 1; grid-row: 1; width: 100%; }
  .desktop-site .phone-filters-toggle { display: inline-flex; align-items: center; justify-content: center; grid-column: 2; grid-row: 1; border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px 12px; color: #34415a; background: white; min-height: 44px; font-size: 12px; }
  .desktop-site .phone-filters-toggle[aria-expanded="true"] { color: white; background: #343957; }
  .desktop-site .modems-toolbar:not(.phone-filters-open) > :is(select, .modems-toolbar-actions) { display: none; }
  .desktop-site .modems-toolbar.phone-filters-open > select { grid-column: 1 / -1; width: 100%; }
  .desktop-site .modems-toolbar-actions { grid-column: 1 / -1; }
  .desktop-site .modems-toolbar-actions button { min-width: 44px; }
  .desktop-site .modems-view { min-width: 0; }
  .desktop-site .operations-hub-container .modems-pagination-footer { width: 100%; margin: 0; }
  .desktop-site .sales-report-columns-popup { display: flex; flex-direction: column; width: calc(100vw - 24px) !important; max-width: 420px; max-height: calc(100dvh - 24px); border-radius: 14px; overflow: hidden; }
  .desktop-site .sales-report-columns-header { flex-shrink: 0; padding: 8px 12px; }
  .desktop-site .sales-report-columns-body { min-height: 0; overflow: auto; padding: 12px; }
  .desktop-site :is(.operations-hub-popup-grid, .operations-hub-popup-toggles, .modem-edit-grid) { grid-template-columns: minmax(0, 1fr); }
  .desktop-site :is(.operations-hub-popup-actions, .modem-edit-footer) { flex-wrap: wrap; gap: 8px; }
  .desktop-site .modem-edit-body { padding: 12px; min-height: 0; overflow: auto; }
  .desktop-site.planogram-page .planogram-page-header { padding: 10px; border-radius: 14px; }
  .desktop-site.planogram-page .planogram-header-stats { flex: 0 0 100%; }
  .desktop-site.planogram-page .planogram-header-stats .assetSpans { flex-wrap: nowrap; align-items: flex-start; margin: 0; padding: 4px 0 8px; gap: 16px; }
  .desktop-site.planogram-page .planogram-header-stats .assetSpans > span { max-width: 150px; }
}

/* Phone controls use disclosure rather than shrinking every desktop tool into view. */
@media (max-width: 900px) {
  .desktop-site #headerBar:has(.phone-tools-toggle) {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 8px;
    padding: calc(8px + env(safe-area-inset-top)) 10px 8px !important;
  }
  .desktop-site #headerBar:has(.phone-tools-toggle) .header-left { display: contents !important; }
  .desktop-site #headerBar:has(.phone-tools-toggle) .search { grid-column: 2; grid-row: 1; width: 100%; }
  .desktop-site #headerBar:has(.phone-tools-toggle) .search input { border-radius: 10px; }
  .desktop-site .home-content { top: calc(8px + env(safe-area-inset-top)); left: 8px; }
  .desktop-site .phone-tools-toggle { display: grid; place-items: center; grid-column: 3; grid-row: 1; width: 40px; height: 44px; border: 1px solid #ffffff30; border-radius: 10px; color: white; background: #ffffff12; font-size: 18px; }
  .desktop-site .phone-tools-toggle[aria-expanded="true"] { background: #fff; color: #343957; }
  .desktop-site #headerBar:has(.phone-tools-toggle):not(.phone-tools-open) :is(.search-actions, .header-right) { display: none !important; }
  .desktop-site #headerBar.phone-tools-open .search-actions { grid-column: 1 / -1; width: 100%; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid #ffffff20; }
  .desktop-site #headerBar.phone-tools-open .search-actions > button { flex: 1; justify-content: center; align-items: center; line-height: 1.3 !important; }
  .desktop-site #headerBar.phone-tools-open .header-right { grid-column: 1 / -1; display: grid !important; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 40px; gap: 8px; overflow: visible; padding: 0; }
  .desktop-site #headerBar.phone-tools-open .header-right > * { min-width: 0; margin: 0; }
  .desktop-site #headerBar.phone-tools-open :is(.options-button, .productTasksButton) { width: 100%; height: 40px; padding: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
  .desktop-site #headerBar.phone-tools-open #machinePageLength select { font-size: 12px; padding: 6px 24px 6px 8px; line-height: 1.3; }
  .desktop-site #headerBar.phone-tools-open :is(.searchBuilderButton, .machines-reset-filters, .options-button) { font-size: 13px; }
  .desktop-site #headerBar.phone-tools-open .search-actions > * { min-width: 0; }
  .desktop-site #headerBar.phone-tools-open #machinePageLength { flex: 1 1 130px; min-width: 0; }
  .desktop-site #machinePageLength :is(.dt-length, select) { width: 100% !important; min-width: 0; }
  .desktop-site .machine-card { padding: 13px; border-radius: 13px; }
  .desktop-site .machine-card-location { margin-bottom: 10px !important; }
  .desktop-site .machine-card-actions { margin-top: 10px; }

  .desktop-site .assetToolbar:has(.phone-stats-toggle) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: calc(10px + env(safe-area-inset-top)) 12px 8px; }
  .desktop-site .assetToolbar:has(.phone-stats-toggle) .assetTitle { grid-column: 1 / -1; padding-right: 44px; font-size: 16px; }
  .desktop-site .assetToolbar:has(.phone-stats-toggle) .assetSubElement { grid-column: 1; padding: 0; font-size: 11px; }
  .desktop-site .assetToolbar:has(.phone-stats-toggle) .assetToolbarRight { display: contents; }
  .desktop-site .assetToolbar:has(.phone-stats-toggle) .assetClose { top: calc(4px + env(safe-area-inset-top)); right: 6px; }
  .desktop-site .phone-stats-toggle { display: inline-flex; align-items: center; gap: 6px; grid-column: 2; grid-row: 2; min-height: 32px; padding: 4px 10px; border: 1px solid #ffffff35; border-radius: 8px; background: transparent; color: #e2e8f0; font-size: 11px; }
  .desktop-site .phone-stats-toggle::after { content: "+"; font-size: 16px; }
  .desktop-site .phone-stats-toggle[aria-expanded="true"]::after { content: "-"; }
  .desktop-site .assetToolbar:has(.phone-stats-toggle):not(.phone-stats-open) .assetSpans { display: none; }
  .desktop-site .assetToolbar.phone-stats-open .assetSpans { grid-column: 1 / -1; padding: 8px 0 4px; gap: 12px; }
  .desktop-site .assetSpans > span::before { max-width: 86px; font-size: 9px; line-height: 1.4; }
  .desktop-site .assetMenuViews { padding: 5px 8px; gap: 2px; scrollbar-width: thin; }
  .desktop-site .assetMenuView { padding: 6px 12px; min-height: 38px; font-size: 12px; }
  .desktop-site .assetContentRight.asset-content-paged { padding: 8px 8px 0; overflow: hidden; }

  .desktop-site .sales-list-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 10px;
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
    max-height: 42dvh;
    overflow: auto;
  }
  .desktop-site .sales-list-search { grid-column: 1 / -1; grid-row: 1; min-width: 0; gap: 6px; }
  .desktop-site .sales-list-search input { font-size: 16px; height: 38px; min-width: 0; border-radius: 8px; }
  .desktop-site .sales-list-search .btn { font-size: 12px; min-height: 38px; padding: 6px 10px; }
  .desktop-site .sales-report-quick-actions { grid-column: 1; gap: 6px; flex-wrap: nowrap; }
  .desktop-site .sales-report-action-card { min-width: 0; min-height: 36px; gap: 6px; padding: 6px 10px; border-radius: 8px; box-shadow: none; }
  .desktop-site .sales-report-action-icon { width: 20px; height: 20px; border-radius: 0; background: transparent; font-size: 17px; }
  .desktop-site .sales-report-action-title { font-size: 12px; }
  .desktop-site .sales-report-action-subtitle { display: none; }
  .desktop-site .phone-sales-tools-toggle { display: inline-flex; align-items: center; justify-content: center; grid-column: 2; min-height: 36px; padding: 6px 10px; border: 1px solid #d9e2ee; border-radius: 8px; background: #f3f6fa; color: #475569; font-size: 12px; }
  .desktop-site .sales-list-controls:not(.phone-sales-tools-open) :is(.sales-list-per-page, .sales-list-inline-actions) { display: none !important; }
  .desktop-site .sales-list-controls.phone-sales-tools-open .sales-list-per-page { grid-column: 1 / -1; width: 100%; max-width: none; min-width: 0; font-size: 14px; min-height: 38px; }
  .desktop-site .sales-list-controls .sales-list-inline-actions { grid-column: 1 / -1; margin: 0; flex-wrap: wrap; gap: 6px; }
  .desktop-site .sales-list-inline-actions .btn { padding: 6px 10px; min-height: 36px; font-size: 12px; border-radius: 8px; }
  .desktop-site .sales-list-controls .sales-report-controls-panel { grid-column: 1 / -1; min-width: 0; padding: 0; gap: 6px; }
  .desktop-site .sales-report-controls-panel :is(input, select) { font-size: 16px; min-width: 0; max-width: 100%; }
  .desktop-site .sales-report-controls-panel .btn { min-height: 36px; font-size: 12px; padding: 6px 10px; }
  .desktop-site .sales-report-controls-panel .machine-sales-filter { width: 100%; min-width: 0; }
  .desktop-site .sales-list-table-wrap { margin-top: 8px; overflow: auto; }
  .desktop-site .asset-menu-pagination-footer { display: flex; flex-direction: column; align-items: stretch; flex-shrink: 0; gap: 4px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); margin: 0 !important; width: 100%; background: #fff; color: #475569; border-top: 1px solid #dce4ec; }
  .desktop-site .asset-menu-pagination-footer .dt-info { width: 100%; flex: none; font-size: 11px; line-height: 1.4; color: #627188; text-align: center; white-space: normal; }
  .desktop-site .asset-menu-pagination-footer .dt-paging { width: 100%; margin: 0; overflow-x: auto; }
  .desktop-site .asset-menu-pagination-footer .page-link { min-width: 32px; min-height: 34px; padding: 6px 9px; font-size: 12px; border-radius: 6px; }
  .desktop-site .assetContentRight.asset-content-paged .asset-menu-pagination-footer { width: 100%; }
  .desktop-site .asset-menu-pagination-footer .page-link { color: #475569; background: #f5f7fa; border-color: #dce4ec; }
  .desktop-site .asset-menu-pagination-footer .page-item.active .page-link { color: #fff; background: #343957; border-color: #343957; }
  .desktop-site .asset-menu-pagination-footer .page-item.disabled .page-link { color: #7c8797; background: #f5f7fa; border-color: #dce4ec; }
  .desktop-site .asset-menu-pagination-footer .phone-distant-page { display: none; }

  .desktop-site .sales-graph-modal-overlay { padding: 8px; }
  .desktop-site .sales-graph-modal-overlay.sales-graph-overlay-fullscreen { padding: 0; }
  .desktop-site .sales-graph-modal { width: 100%; max-width: 100%; height: min(560px, calc(100dvh - 16px)); max-height: calc(100dvh - 16px); min-height: 0; border-radius: 14px; overflow: hidden; }
  .desktop-site .sales-graph-modal.sales-graph-modal-fullscreen { height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .desktop-site .sales-graph-modal-header { flex-shrink: 0; padding: 8px 12px; min-height: 52px; border-radius: 0; }
  .desktop-site .sales-graph-modal-title { font-size: 16px; gap: 8px; }
  .desktop-site .sales-graph-modal-body { flex: 1 1 auto; min-height: 0; padding: 10px; gap: 10px; overflow: auto; }
  .desktop-site .sales-graph-controls { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; flex-shrink: 0; }
  .desktop-site .sales-graph-controls > :is(.form-select, .sales-graph-range-dropdown) { grid-column: span 3; width: 100%; min-width: 0; max-width: 100%; font-size: 14px; min-height: 38px; box-shadow: none; border-radius: 8px; }
  .desktop-site .sales-graph-range-dropdown .dropdown-selector-button { width: 100%; font-size: 14px; min-height: 38px; box-shadow: none; }
  .desktop-site .sales-graph-range-dropdown .dropdown-selector-content { min-width: 0; width: 100%; max-height: 40dvh; overflow: auto; }
  .desktop-site .sales-graph-controls > .btn { grid-column: span 2; min-height: 36px; padding: 6px; border-radius: 8px; font-size: 12px; }
  .desktop-site .sales-graph-controls-bottom { grid-column: 1 / -1; margin: 0; }
  .desktop-site .sales-graph-date-btn { width: 100%; min-height: 36px; justify-content: center; padding: 6px 10px; font-size: 12px; border-radius: 8px; }
  .desktop-site .sales-graph-chart-wrapper { flex: 1 0 220px; min-height: 220px; }
  .desktop-site .sales-graph-empty { padding: 20px 12px; font-size: 14px; }
  .desktop-site .sales-graph-modal-footer { margin: 0; padding: 8px; flex-wrap: wrap; gap: 6px; border-radius: 8px; }

  /* Portaled to body while open so overflow/transform on a dialog cannot clip it. */
  .desktop-site .flatpickr-calendar.phone-calendar {
    position: fixed !important;
    inset: auto 8px calc(8px + env(safe-area-inset-bottom)) 8px !important;
    margin: 0 auto;
    width: calc(100% - 16px) !important;
    max-width: 380px;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    border: 1px solid #d4deeb;
    border-radius: 16px;
    box-shadow: 0 12px 60px #14233a55;
    padding: 0 8px 10px;
    background: #fff;
    z-index: 100100;
    animation: none;
  }
  .desktop-site .phone-calendar::before, .desktop-site .phone-calendar::after { display: none; }
  .desktop-site .phone-calendar .phone-calendar-tools { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 4px; color: #25324a; font-size: 14px; border-bottom: 1px solid #e2e8f0; }
  .desktop-site .phone-calendar-tools button { border: 0; background: #343957; color: #fff; border-radius: 8px; min-height: 36px; padding: 6px 12px; font-size: 12px; }
  .desktop-site .phone-calendar-status { display: block; font-size: 11px; line-height: 1.5; padding: 10px 6px 0; color: #58697e; text-align: center; }
  .desktop-site .phone-calendar .flatpickr-months { position: relative; padding-top: 8px; }
  .desktop-site .phone-calendar :is(.flatpickr-prev-month, .flatpickr-next-month) { top: 8px; width: 38px; height: 38px; padding: 10px; }
  .desktop-site .phone-calendar .flatpickr-current-month { font-size: 16px; padding-top: 6px; }
  .desktop-site .phone-calendar .numInputWrapper { width: 64px !important; }
  .desktop-site .phone-calendar input.cur-year { width: 100%; font-size: 16px; }
  .desktop-site .phone-calendar :is(.flatpickr-innerContainer, .flatpickr-rContainer, .flatpickr-days, .dayContainer) { width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
  .desktop-site .phone-calendar .dayContainer { padding: 0; }
  .desktop-site .phone-calendar .flatpickr-day { flex-basis: 14.285714%; width: 14.285714%; max-width: none; height: 38px; line-height: 38px; font-size: 13px; border-radius: 9px; }
  .desktop-site .phone-calendar .flatpickr-day.inRange { border-radius: 0; box-shadow: none; background: #edf1fa; border-color: #edf1fa; }

  .desktop-site #headerBar.phone-tools-open .phone-tools-panel { display: block; position: absolute; top: calc(100% + 6px); right: 10px; width: min(360px, calc(100vw - 20px)); max-height: 70dvh; overflow: auto; padding: 12px; border: 1px solid #dce4ec; border-radius: 14px; background: #fff; color: #25324a; box-shadow: 0 16px 44px #14233a33; z-index: 125; }
  .desktop-site .phone-tools-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 14px; }
  .desktop-site .phone-tools-close { min-height: 40px; border: 0; border-radius: 8px; padding: 6px 10px; background: #f0f4f8; color: #52617b; font-size: 12px; }
  .desktop-site #headerBar.phone-tools-open .phone-tools-panel .search-actions { padding: 0 0 10px; border: 0; margin: 0; }
  .desktop-site #headerBar.phone-tools-open .phone-tools-panel .search-actions > * { width: 100%; flex: 1; }
  .desktop-site #headerBar .phone-tools-panel #advancedSearchButton { display: flex !important; width: 100% !important; left: 0 !important; justify-content: space-between; text-align: left; background: #f3f6fa !important; border: 1px solid #e2e8f0; color: #25324a !important; padding: 10px 12px !important; font-size: 13px !important; min-height: 44px; }
  .desktop-site #headerBar .phone-tools-panel .searchBuilderButton::after { content: '\203A'; font-size: 20px; }
  .desktop-site #headerBar.phone-tools-open .phone-tools-panel .header-right { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .desktop-site #headerBar .phone-tools-panel #machinePageLength { grid-column: 1 / -1; display: flex; gap: 10px; justify-content: space-between; padding: 10px 0; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; }
  .desktop-site #headerBar .phone-tools-panel #machinePageLength::before { content: 'Rows per page'; font-size: 12px; white-space: nowrap; color: #627188; }
  .desktop-site #headerBar .phone-tools-panel #machinePageLength .dt-length { flex: 0 1 170px; }
  .desktop-site #headerBar .phone-tools-panel :is(.options-button, .productTasksButton) { min-height: 44px; background: #fff; border: 1px solid #dce4ec; color: #34415a; border-radius: 9px; font-size: 12px; }
  .desktop-site #headerBar .phone-tools-panel .productTasksButton::after { content: 'Product tasks'; font-size: 12px; }
}

/* Settings is a viewport-sized screen, with one scrolling panel below its tabs. */
@media (max-width: 900px) {
  .desktop-site #headerBar #options.optionsSelected { display: flex !important; flex-direction: column; inset: 0; width: 100%; height: 100dvh; max-height: 100dvh; padding: 0; overflow: hidden; background: #f0f4f8; z-index: 160; }
  .desktop-site:has(#options.optionsSelected) .home-content { visibility: hidden; }
  .desktop-site #options .phone-settings-heading { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; padding: calc(8px + env(safe-area-inset-top)) 14px 8px; min-height: 60px; background: #343957; color: #fff; font-size: 16px; }
  .desktop-site .phone-settings-heading button { min-height: 40px; padding: 8px 14px; border: 1px solid #ffffff40; border-radius: 9px; color: #fff; background: #ffffff12; font-size: 13px; }
  .desktop-site #options #options-menu { flex-shrink: 0; min-height: 50px; padding: 5px 8px; gap: 4px; background: #fff; border-bottom: 1px solid #dce4ec; }
  .desktop-site #options #options-menu > div { float: none; width: auto; height: auto; min-height: 40px; padding: 8px 12px; line-height: 24px; background: transparent; color: #52617b; border: 0; border-radius: 8px; box-shadow: none; font-family: inherit; white-space: nowrap; }
  .desktop-site #options #options-menu > .optionselected { background: #343957; color: #fff; }
  .desktop-site #options > .options-data-selected { flex: 1 1 auto; height: auto; min-height: 0; width: 100%; overflow: auto; overscroll-behavior: contain; padding: 12px 12px calc(16px + env(safe-area-inset-bottom)); font-family: inherit; }
  .desktop-site #options #general .options-panel { display: flex; flex-direction: column; min-height: 100%; padding: 14px; gap: 20px; border-radius: 12px; box-shadow: none; }
  .desktop-site #options .options-panel-column { flex: 0 0 auto; min-width: 0; width: 100%; }
  .desktop-site #options .options-panel-label { font-size: 12px; margin: 0; }
  .desktop-site #options .options-panel-row select { width: 100%; height: 42px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 7px 30px 7px 10px; background-color: #fff; color: #25324a; }
  .desktop-site #options .machines-toggle-item { min-height: 40px; font-size: 12px; line-height: 1.5; }
  .desktop-site #options .machines-toggle-item input { flex-shrink: 0; width: 18px; height: 18px; }
  .desktop-site #options .machines-column-align-settings { max-height: none; overflow: visible; }
  .desktop-site #options .machines-column-align-row { grid-template-columns: minmax(0, 1fr) 125px; gap: 8px; align-items: center; }
  .desktop-site #options .machines-column-align-row select { font-size: 14px !important; padding: 6px 24px 6px 8px; }
  .desktop-site #options .machines-column-align-row label { font-size: 12px; white-space: normal; }
  .desktop-site #options #columns :is(#defaultSortColumn, #defaultSortOrder) { width: 100%; float: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; margin: 0 0 10px; padding: 10px; border: 1px solid #dce4ec; border-radius: 10px; background: #fff; color: #52617b; }
  .desktop-site #options #columns :is(#defaultSortColumn, #defaultSortOrder) span { font-size: 12px; }
  .desktop-site #options #columns :is(#defaultSortColumn, #defaultSortOrder) select { width: 100%; min-height: 40px; height: 40px; margin: 0; padding: 6px 28px 6px 10px; border: 1px solid #cbd5e1; border-radius: 7px; font-size: 14px !important; background: #f8fafc; color: #25324a; }
  .desktop-site #options #columnSelect { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; }
  .desktop-site #options .columnCheck { min-width: 0; width: auto; padding: 10px; font-size: 12px; line-height: 1.4; min-height: 44px; }
  .desktop-site #options #thresholdForm { padding: 0; height: auto; max-height: none; overflow: visible; }
  .desktop-site #options .thresholdRow { display: block; padding: 12px; margin-bottom: 12px; border: 1px solid #dce4ec; border-radius: 12px; background: #fff; }
  .desktop-site #options :is(.thresholdColumn1, .thresholdColumn2) { display: block; width: 100%; margin: 0; padding: 0; }
  .desktop-site #options .thresholdColumn1 { cursor: pointer; }
  .desktop-site #options .thresholdItem { font-size: 0; line-height: 1.4; }
  .desktop-site #options .thresholdItem::after { content: attr(data-phone-label); font-size: 13px; font-weight: 600; color: #25324a; }
  .desktop-site #options .thresholdColumn1::after { content: 'Tap to edit maximum'; font-size: 10px; color: #627188; }
  .desktop-site #options .threshold_options { width: 100%; }
  .desktop-site #options .sliders_control { width: 100%; margin: 0; min-height: 118px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 50px; }
  .desktop-site #options .sliders_control input[type="range"] { position: absolute; top: 22px; left: 0; width: 100%; min-height: 0; height: 6px; padding: 0; margin: 0; border: 0; border-radius: 6px; touch-action: none; }
  .desktop-site #options .sliders_control input[id^="fromSlider_"] { height: 0; margin-top: 3px; }
  .desktop-site #options .sliders_control input[type="range"]::-webkit-slider-thumb { width: 26px; height: 26px; border: 2px solid #52617b; box-shadow: 0 2px 5px #25324a25; }
  .desktop-site #options .sliders_control input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border: 2px solid #52617b; box-shadow: 0 2px 5px #25324a25; }
  .desktop-site #options .sliders_control .form_control_container { position: static; width: auto; transform: none; transition: none; }
  .desktop-site #options .form_control_container::before { content: attr(data-phone-label); display: block; margin-bottom: 5px; font-size: 11px; color: #627188; }
  .desktop-site #options .form_control_container input { width: 100%; height: 40px; min-height: 40px; padding: 6px; background: #f8fafc; color: #25324a; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 16px; }
  .desktop-site #options .slider-markers { display: none; }
  .desktop-site #options #thresholdForm > .submit { display: block; width: 100%; min-height: 44px; border: 0; border-radius: 9px; margin: 0; font-size: 14px; background: #343957; color: #fff; }
  .desktop-site #options .minMaxWrapper { position: fixed; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: calc(100vw - 32px); max-width: 400px; max-height: 80dvh; margin: 0; padding: 12px; overflow: auto; border: 1px solid #dce4ec; border-radius: 12px; box-shadow: 0 12px 60px #14233a55; }
  .desktop-site #options .minMaxDescription { padding: 12px; border-radius: 8px; font-family: inherit; }
  .desktop-site #options .minMaxInputWrapper { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 0; }
  .desktop-site #options .minMaxInputWrapper input:not([type="hidden"]) { width: 120px; background: #f8fafc; color: #25324a; border: 1px solid #cbd5e1; border-radius: 8px; padding: 8px; }
  .desktop-site #options .submitMinMax { width: 100%; min-height: 44px; padding: 10px; border-radius: 8px; text-align: center; }
  .desktop-site #options .phone-threshold-cancel { display: block; width: 100%; min-height: 44px; margin-top: 8px; border: 1px solid #cbd5e1; border-radius: 8px; background: white; color: #52617b; }
  .desktop-site #options .phone-export-intro { display: block; padding: 10px 4px 18px; }
  .desktop-site #options .phone-export-intro h2 { margin: 0 0 8px; color: #25324a; font-size: 20px; font-weight: 600; line-height: 1.3; }
  .desktop-site #options .phone-export-intro p { margin: 0; max-width: 32ch; color: #627188; font-size: 13px; font-weight: 400; line-height: 1.6; }
  .desktop-site #options #export-data { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0 0 8px; }
  .desktop-site #options #export-data button[data-phone-export] { --export-accent: #3166a0; --export-tint: #eaf2fc; display: grid; grid-template-columns: 44px minmax(0, 1fr) 12px; grid-template-rows: auto auto; gap: 3px 12px; align-items: center; width: 100%; min-height: 82px; height: auto; margin: 0; padding: 14px; border: 1px solid #dce4ec; border-radius: 12px !important; text-align: left; white-space: normal; background: #fff; color: #25324a; box-shadow: 0 3px 10px #25324a05; }
  .desktop-site #options #export-data button[data-phone-export="excel"] { --export-accent: #28764e; --export-tint: #e7f5ec; }
  .desktop-site #options #export-data button[data-phone-export="csv"] { --export-accent: #9a651d; --export-tint: #fff3df; }
  .desktop-site #options #export-data button[data-phone-export="pdf"] { --export-accent: #ba4948; --export-tint: #fceeed; }
  .desktop-site #options #export-data button[data-phone-export="print"] { --export-accent: #546379; --export-tint: #edf1f6; }
  .desktop-site #options #export-data .phone-export-icon { display: grid; place-items: center; grid-column: 1; grid-row: 1 / 3; width: 44px; height: 44px; border-radius: 11px; background: var(--export-tint); color: var(--export-accent); font-size: 22px; }
  .desktop-site #options #export-data .phone-export-label { grid-column: 2; grid-row: 1; align-self: end; font-size: 14px; font-weight: 600; line-height: 1.4; }
  .desktop-site #options #export-data .phone-export-description { display: block; grid-column: 2; grid-row: 2; align-self: start; font-size: 11px; line-height: 1.5; color: #627188; }
  .desktop-site #options #export-data button[data-phone-export]::after { content: ''; grid-column: 3; grid-row: 1 / 3; width: 7px; height: 7px; border-top: 1.5px solid #94a3b8; border-right: 1.5px solid #94a3b8; transform: rotate(45deg); }
  .desktop-site #options #export-data button[data-phone-export]:is(:hover, :focus-visible) { border-color: var(--export-accent); background: #fbfcfe; }
  .desktop-site #options #export-data button[data-phone-export]:active { background: var(--export-tint); }
}
@media (max-width: 360px) {
  .desktop-site #options #columnSelect { grid-template-columns: minmax(0, 1fr); }
}