/* COLORJET Sales Entry mobile enhancement.
 * Scope contract: this file has no effect unless the route guard adds
 * html.cj-mobile-sales-entry. Desktop (>= 769px) remains untouched. */
@media (max-width: 768px) {
  html.cj-mobile-sales-entry {
    --cj-sales-touch: 44px;
    --cj-sales-gap: 10px;
  }

  html.cj-mobile-sales-entry body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
  }

  html.cj-mobile-sales-entry .entry-form-paper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
    overflow: visible !important;
    box-sizing: border-box;
  }

  html.cj-mobile-sales-entry .entry-form-paper .MuiGrid-container {
    row-gap: var(--cj-sales-gap);
  }

  html.cj-mobile-sales-entry .entry-form-paper .MuiGrid-item {
    min-width: 0;
  }

  /* The compiled entry form uses desktop xs-1..xs-6 widths, which produced
     six cramped columns on a phone. Keep xs-12 sections full width and make
     ordinary form controls a readable two-column mobile grid. */
  html.cj-mobile-sales-entry .entry-form-paper .MuiGrid-grid-xs-1,
  html.cj-mobile-sales-entry .entry-form-paper .MuiGrid-grid-xs-2,
  html.cj-mobile-sales-entry .entry-form-paper .MuiGrid-grid-xs-3,
  html.cj-mobile-sales-entry .entry-form-paper .MuiGrid-grid-xs-4,
  html.cj-mobile-sales-entry .entry-form-paper .MuiGrid-grid-xs-5,
  html.cj-mobile-sales-entry .entry-form-paper .MuiGrid-grid-xs-6 {
    flex-basis: 50% !important;
    max-width: 50% !important;
  }

  html.cj-mobile-sales-entry .entry-form-paper .MuiGrid-grid-xs-12 {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }

  html.cj-mobile-sales-entry .entry-form-paper .MuiInputLabel-root {
    max-width: calc(100% - 18px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The desktop sticky action bar covered customer and warehouse fields on
     short phone viewports. Keep the same actions in normal document flow. */
  html.cj-mobile-sales-entry .entry-form-paper [data-cj-sales-actions="true"] {
    position: static !important;
  }

  html.cj-mobile-sales-entry .entry-form-paper .auto-complete,
  html.cj-mobile-sales-entry .entry-form-paper .small-autocompletefield,
  html.cj-mobile-sales-entry .entry-form-paper .small-textfield,
  html.cj-mobile-sales-entry .entry-form-paper .MuiFormControl-root {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html.cj-mobile-sales-entry .entry-form-paper input,
  html.cj-mobile-sales-entry .entry-form-paper textarea,
  html.cj-mobile-sales-entry .entry-form-paper .MuiInputBase-root,
  html.cj-mobile-sales-entry .entry-form-paper .MuiButtonBase-root,
  html.cj-mobile-sales-entry .entry-form-paper button,
  html.cj-mobile-sales-entry .entry-form-paper [role="button"] {
    min-height: var(--cj-sales-touch);
  }

  html.cj-mobile-sales-entry .entry-form-paper input,
  html.cj-mobile-sales-entry .entry-form-paper textarea {
    font-size: 16px !important;
  }

  html.cj-mobile-sales-entry .entry-form-paper .plus-link-div,
  html.cj-mobile-sales-entry .entry-form-paper .plus-link {
    min-width: var(--cj-sales-touch);
    min-height: var(--cj-sales-touch);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Keep the compiled column/table ratio; scroll the table instead of
     squeezing, hiding, or converting cells into cards. */
  html.cj-mobile-sales-entry .entry-form-paper .table-responsive,
  html.cj-mobile-sales-entry .entry-form-paper .MuiTableContainer-root,
  html.cj-mobile-sales-entry .entry-form-paper [data-cj-sales-table-scroll] {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  html.cj-mobile-sales-entry .entry-form-paper table {
    width: max-content !important;
    min-width: 760px;
    table-layout: auto !important;
  }

  html.cj-mobile-sales-entry .entry-form-paper th,
  html.cj-mobile-sales-entry .entry-form-paper td,
  html.cj-mobile-sales-entry .entry-form-paper .cart-table-header-style {
    white-space: nowrap;
  }

  html.cj-mobile-sales-entry .entry-form-paper [data-cj-attribute-field="true"] {
    border-inline-start: 3px solid #167c80;
    padding-inline-start: 8px;
  }

  html.cj-mobile-sales-entry .entry-form-paper [data-cj-attribute-field="true"]::before {
    content: attr(data-cj-attribute-label);
    display: block;
    margin: 0 0 4px;
    color: #17324d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .035em;
    text-transform: uppercase;
  }

  /* Stable customer portal surfaces audited in the portal's live app.js and
     styles.css. Tables retain their columns inside a local scroll container. */
  html.cj-mobile-customer-portal,
  html.cj-mobile-customer-portal body,
  html.cj-mobile-customer-portal #app {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  html.cj-mobile-customer-portal .content,
  html.cj-mobile-customer-portal .customer-app,
  html.cj-mobile-customer-portal .customer-app .card,
  html.cj-mobile-customer-portal .customer-app .tab-body {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  html.cj-mobile-customer-portal .customer-app :where(.btn, .tab-btn, button, a[role="button"]),
  html.cj-mobile-customer-portal .customer-mobile-nav :where(a, button) {
    min-height: 44px;
    touch-action: manipulation;
  }

  html.cj-mobile-customer-portal .customer-app :where(input, select, textarea) {
    min-height: 44px;
    max-width: 100%;
    font-size: 16px;
    box-sizing: border-box;
  }

  html.cj-mobile-customer-portal .customer-app :where(.table-wrap, .tabbar, .profile-tabs) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  html.cj-mobile-customer-portal .customer-app :where(.btn, .tab-btn, .card) {
    transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
  }

  /* Shared login treatment: /login in the ERP and the audited portal
     .auth-shell/.auth-card family. Route classes prevent authenticated ERP
     pages and desktop layouts from inheriting these rules. */
  html.cj-mobile-shared-auth,
  html.cj-mobile-shared-auth body,
  html.cj-mobile-shared-auth #root,
  html.cj-mobile-shared-auth #app {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  html.cj-mobile-shared-auth #root :where(input, button),
  html.cj-mobile-shared-auth .auth-card :where(input, select, button, .btn) {
    min-height: 44px;
    max-width: 100%;
    touch-action: manipulation;
    box-sizing: border-box;
  }

  html.cj-mobile-shared-auth #root input,
  html.cj-mobile-shared-auth .auth-card :where(input, select, textarea) {
    font-size: 16px;
  }

  html.cj-mobile-shared-auth .auth-shell,
  html.cj-mobile-shared-auth .auth-panel,
  html.cj-mobile-shared-auth .auth-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  html.cj-mobile-shared-auth :where(button, .btn, input, select) {
    transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease;
  }
}

@media (max-width: 420px) {
  html.cj-mobile-sales-entry .entry-form-paper {
    padding: 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.cj-mobile-sales-entry .entry-form-paper *,
  html.cj-mobile-sales-entry .entry-form-paper *::before,
  html.cj-mobile-sales-entry .entry-form-paper *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }

  html.cj-mobile-customer-portal *,
  html.cj-mobile-customer-portal *::before,
  html.cj-mobile-customer-portal *::after,
  html.cj-mobile-shared-auth *,
  html.cj-mobile-shared-auth *::before,
  html.cj-mobile-shared-auth *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}