/* ═══════════════════════════════════════════════════════════════════
   ATICA PORTAL — mobile.css
   Supplements styles.css mobile block (≤768px already in styles.css)
   This file handles: overlays with hardcoded left:220px, bottom nav,
   UBB positioning, and component-level fixes styles.css can't reach.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Bottom nav — hidden on desktop ─────────────────────────────── */
#mob-bottom-nav { display: none; }

@media (max-width: 768px) {


  /* ══════════════════════════════════════════════════════════════
     ROOT LAYOUT FIXES — these are the core cause of narrow widths
     ══════════════════════════════════════════════════════════════ */

  /* .main must fill full viewport width */
  .main {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  /* All screens full width */
  /* Screens — fixed full viewport, stacked by z-index */
  .screen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--mob-nav) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    z-index: 10 !important;
    background: var(--bg, #f4f1ec) !important;
    display: none !important;
  }
  .screen.active {
    display: flex !important;
    flex-direction: column !important;
  }
  /* When in a flow, screen bottom accounts for UBB not bottom nav */
  body.mob-in-flow .screen {
    bottom: var(--mob-ubb) !important;
  }
  body.ubb-active .screen {
    bottom: var(--mob-ubb) !important;
  }

  /* ── New order scroll area — remove desktop padding & max-width ── */
  #no-scroll-area {
    padding: 14px 14px 12px !important;
    max-width: 100% !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Step 1-3 containers — full width */
  #no-step-rep,
  #no-step-1,
  #no-step-2,
  #no-step-tier {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Rep pre-step max-width container */
  #no-step-rep > div {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Client search rows — vertical stack */
  .no-client-row {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Client search input */
  #no-step-1 .field-input,
  #no-step-1 input {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── New order action bar ─────────────────────────────────────── */
  #no-action-bar {
    padding: 10px 14px !important;
    gap: 6px !important;
  }

  /* ── Fabric step (no-step-tier) full width ────────────────────── */
  #no-step-tier {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Fabric toggle row */
  #fabric-toggle-row,
  #no-step-tier > div > div[style*="display:flex"] {
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  /* Fabric inputs */
  #fabric-number-input,
  #order-need-by,
  #no-step-tier input,
  #no-step-tier select {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Fabric detail panel */
  #fabric-detail {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Tier card grid */
  #tier-card-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── UBB context text — prevent 3px crush ────────────────────── */
  #unified-bottom-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  /* Context center div — allow shrink but keep minimum */
  #unified-bottom-bar > div:nth-child(2) {
    flex: 1 1 auto !important;
    min-width: 40px !important;
    overflow: hidden !important;
  }
  /* Back and action button groups — don't shrink to nothing */
  #unified-bottom-bar > div:first-child,
  #unified-bottom-bar > div:last-child {
    flex-shrink: 0 !important;
  }
  #ubb-context {
    font-size: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #ubb-sub { display: none !important; } /* hide sub on mobile to save space */

  /* ── Style tab summary rows (.ss-row) ────────────────────────── */
  /* These render in the right panel of the layout — on mobile the
     right panel is hidden, so style selections show via cat-nav/opt-body */
  .ss-row {
    min-width: 0 !important;
    width: 100% !important;
  }
  .ss-row-text {
    flex: 1 1 auto !important;
    min-width: 60px !important;
    font-size: 11px !important;
  }
  .ss-thumb {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
  }

  /* ── Orders screen header — search + button ──────────────────── */
  #screen-orders .screen-hdr > div,
  #screen-clients .screen-hdr > div {
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Search bar full width */
  #orders-search,
  #clients-search {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 44px;
    font-size: 16px !important;
    padding: 10px 12px !important;
  }

  /* ── Bottom nav — 5 equal buttons, no overflow ───────────────── */
  #mob-bottom-nav {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  #mob-bottom-nav .mob-nav-btn {
    min-width: 0 !important;
    overflow: hidden !important;
    font-size: 7px !important;
  }
  #mob-bottom-nav .mob-nav-btn svg {
    width: 16px !important;
    height: 16px !important;
  }


  /* ── Variables ───────────────────────────────────────────────────── */
  :root {
    --mob-nav: 56px;
    --mob-ubb: 60px;
  }


  /* ── Bottom nav — hide when inside a flow (has UBB) ─────────────── */
  /* JS adds body.mob-in-flow when entering order/client/new-order */
  body.mob-in-flow #mob-bottom-nav {
    display: none !important;
  }
  /* UBB fills to bottom when nav is hidden */
  body.mob-in-flow #unified-bottom-bar {
    bottom: 0 !important;
  }
  body.mob-in-flow .screen,
  body.mob-in-flow #review-pane,
  body.mob-in-flow #no-step-3[style*="flex"],
  body.mob-in-flow #no-step-3[style*="flex"] {
    bottom: var(--mob-ubb) !important;
  }


  /* ── Bottom nav ──────────────────────────────────────────────────── */
  #mob-bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--mob-nav);
    background: #fff;
    border-top: 0.5px solid #e5e1db;
    z-index: 9999;
    align-items: stretch;
  }
  #mob-bottom-nav .mob-nav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: none;
    background: none;
    cursor: pointer;
    color: #9099ad;
    font-size: 8px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-family: var(--mono, monospace);
    padding: 4px 2px;
    min-height: 44px;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  #mob-bottom-nav .mob-nav-btn.active { color: #1a2940; }
  #mob-bottom-nav .mob-nav-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
  #mob-bottom-nav .mob-nav-btn.mob-new-order {
    color: #1a2940;
    background: #f0f4f8;
    border-radius: 8px;
    margin: 5px 3px;
  }

  /* ── Body — ensure padding for both nav + UBB ────────────────────── */
  body {
    padding-bottom: var(--mob-nav) !important;
  }

  /* ── Fix hardcoded left:220px overlays ───────────────────────────── */
  /* These have inline styles so need !important */
  #mgr-overlay,
  #fac-overlay,
  #locations-overlay {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    bottom: var(--mob-nav) !important;
  }

  /* ── UBB ─────────────────────────────────────────────────────────── */
  #unified-bottom-bar {
    left: 0 !important;
    right: 0 !important;
    bottom: var(--mob-nav) !important;
    padding: 8px 10px !important;
    gap: 6px !important;
    z-index: 500 !important;
  }
  body.ubb-active #mob-bottom-nav { display: none !important; }
  body.ubb-active #unified-bottom-bar { bottom: 0 !important; }
  #ubb-back, #ubb-secondary { font-size: 10px !important; padding: 7px 10px !important; }
  #ubb-primary { font-size: 11px !important; padding: 8px 14px !important; }
  #ubb-context { font-size: 11px !important; }
  #ubb-sub { font-size: 9px !important; }

  /* ── Review pane ─────────────────────────────────────────────────── */
  #review-pane {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--mob-nav) !important;
    width: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    z-index: 100 !important;
    background: #f4f1ec !important;
  }
  body.ubb-active #review-pane {
    bottom: var(--mob-ubb) !important;
  }
  /* Outer layout — single column using IDs */
  #review-layout {
    flex-direction: column !important;
    min-height: unset !important;
    width: 100% !important;
  }
  #review-left-panel {
    width: 100% !important;
    overflow-y: visible !important;
    padding: 14px 14px 20px !important;
  }
  #review-right-panel {
    width: 100% !important;
    height: auto !important;
    position: static !important;
    border-left: none !important;
    border-top: 0.5px solid #e5e1db !important;
    padding: 14px !important;
  }
  /* Fallback for old selector */
  #review-pane div[style*="width:420px"] {
    width: 100% !important;
    height: auto !important;
    position: static !important;
    border-left: none !important;
    border-top: 0.5px solid #e5e1db !important;
  }
  #review-pdf-btn {
    top: auto !important;
    bottom: calc(var(--mob-ubb) + 8px) !important;
    right: 12px !important;
    font-size: 10px !important;
    padding: 6px 12px !important;
  }

  /* ── Screen new-order ────────────────────────────────────────────── */
  #screen-new-order {
    width: 100% !important;
    left: 0 !important;
  }


  /* ── Rep pre-step ────────────────────────────────────────────────── */
  /* @mobile: rep pre-step */
  #no-step-rep {
    position: relative !important;
    width: 100% !important;
    min-height: calc(100vh - 120px) !important;
    padding: 24px 16px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  #no-step-rep > div {
    max-width: 100% !important;
    width: 100% !important;
  }
  #rep-prestep-list {
    width: 100% !important;
  }
  #rep-prestep-list > div {
    min-height: 56px !important;
    padding: 12px 14px !important;
  }
  #rep-prestep-btn {
    min-height: 50px !important;
    font-size: 15px !important;
    margin-top: 8px !important;
  }


  /* ── Step pills — scrollable ─────────────────────────────────────── */
  #no-pills, .step-pills {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 12px !important;
    gap: 4px !important;
  }
  #no-pills::-webkit-scrollbar, .step-pills::-webkit-scrollbar { display: none; }
  .step-pill {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 9px !important;
    padding: 4px 8px !important;
  }
  .step-pill::after { width: 16px !important; margin: 0 4px !important; }

  /* ── Orders screen header ─────────────────────────────────────────── */
  #screen-orders .screen-hdr,
  #screen-clients .screen-hdr {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #screen-orders .screen-hdr .btn,
  #screen-clients .screen-hdr .btn,
  #screen-orders .hdr-actions .btn,
  #screen-clients .hdr-actions .btn {
    width: 100% !important;
    text-align: center !important;
    min-height: 44px;
  }
  #screen-orders .hdr-actions,
  #screen-clients .hdr-actions {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* ── Inputs — prevent iOS zoom ───────────────────────────────────── */
  input, select, textarea { font-size: 16px !important; }

  /* ── Fabric step — single column ─────────────────────────────────── */
  #no-step-tier > div[style*="flex"] {
    flex-direction: column !important;
  }
  #mill-chips {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Manager overlay ─────────────────────────────────────────────── */
  /* Stage cards already 2-col via styles.css */
  /* Bottom grid already 1-col via styles.css */
  /* Just ensure mgr overlay content is scrollable */
  #mgr-overlay > div:last-child,
  #dash-pane-overview,
  #dash-pane-queue {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Settings — 2col inputs ──────────────────────────────────────── */
  #screen-settings input,
  #screen-settings select {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* User management header row → hide, rows → card */
  #user-management-section > div:first-child { display: none !important; }
  #user-management-section > div[style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
    padding: 12px 14px !important;
    gap: 3px !important;
  }
  #user-management-section > div[style*="grid-template-columns"] > div {
    width: 100% !important;
  }



  /* ── Orders filter bar — compact on mobile ──────────────────────── */
  /* @mobile: orders filter bar */
  #screen-orders div[style*="flex-wrap:wrap"][style*="padding:10px 20px"],
  #screen-orders div[style*="flex-wrap: wrap"][style*="background:#f0ede8"] {
    padding: 8px 12px !important;
    gap: 6px !important;
  }
  /* Status + rep selects — 2 col */
  #orders-status-select,
  #orders-rep-select {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important;
    font-size: 13px !important;
    padding: 7px 8px !important;
  }
  /* Date row — inline, smaller */
  #orders-date-from,
  #orders-date-to {
    flex: 1 1 calc(50% - 20px) !important;
    min-width: 0 !important;
    font-size: 12px !important;
    padding: 5px 6px !important;
  }
  /* From / To labels */
  #screen-orders span[style*="From"],
  #screen-orders span[style*="To"] {
    font-size: 11px !important;
    flex-shrink: 0 !important;
  }
  /* Location select — full width */
  #orders-location-select {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Reset button */
  #orders-reset-btn {
    width: 100% !important;
    text-align: center !important;
  }

  /* ── Orders header — search + new order button ───────────────────── */
  #screen-orders .screen-hdr {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 10px 14px !important;
    gap: 6px !important;
  }
  #screen-orders .screen-hdr > div {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
  }
  #orders-search {
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    font-size: 13px !important;
  }
  #screen-orders .btn-accent {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 7px 12px !important;
    font-size: 11px !important;
    min-height: 38px !important;
  }


  /* ── Manager dashboard ───────────────────────────────────────────── */
  /* @mobile: manager dashboard */

  /* Header — stack title + tabs vertically */
  #mgr-overlay > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 12px 14px !important;
    gap: 8px !important;
  }
  /* Tab buttons */
  #dash-tab-overview,
  #dash-tab-queue {
    min-height: 44px;
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
  /* Close / back button for manager on mobile */
  #mgr-overlay > div:first-child::before {
    content: none;
  }

  /* Content area padding */
  #mgr-overlay > div[style*="overflow-y:auto"],
  #mgr-overlay > div[style*="overflow-y: auto"] {
    padding: 14px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Stage filter cards — 2 col grid (was 6 col) */
  #mgr-overlay div[style*="grid-template-columns:repeat(6"],
  #mgr-overlay div[style*="repeat(6,1fr)"],
  #mgr-overlay div[style*="repeat(6, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  /* Stage card touch target */
  #mgr-overlay div[style*="grid-template-columns"] > div {
    min-height: 70px;
    padding: 10px 8px !important;
  }

  /* Bottom grid (locations + shipments) — already 1 col via styles.css */
  /* Ensure scrollable */
  #dash-pane-overview,
  #dash-pane-queue {
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Recent flags / activity rows */
  #mgr-overlay .mgr-fr,
  #mgr-overlay .mgr-flag-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Add mobile back button to manager overlay */
  #mob-mgr-back {
    display: flex !important;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #1a2940;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    min-height: 44px;
    font-family: var(--mono, monospace);
  }


  /* ── Modals ──────────────────────────────────────────────────────── */
  #user-modal-overlay > div,
  #price-adj-overlay > div,
  #loc-switch-overlay > div {
    width: 96vw !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
  }


  /* ── Configurator nav bar (no-step-3 main nav) ────────────────────── */
  /* @mobile: configurator nav bar */
  #main-nav-bar {
    grid-template-columns: 1fr !important;
    padding: 6px 10px !important;
    gap: 6px !important;
  }
  #main-nav-bar > div:last-child { display: none !important; } /* spacer */
  #main-nav-bar > div:first-child {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px !important;
    width: 100% !important;
  }
  #main-nav-bar > div:first-child::-webkit-scrollbar { display: none; }
  /* Fitting/Style toggle */
  #main-nav-bar > div:first-child > div:first-child {
    flex-shrink: 0 !important;
  }
  #main-tab-fitting, #main-tab-style {
    padding: 5px 10px !important;
    font-size: 11px !important;
    min-height: 36px;
  }
  /* Garment tabs */
  #garment-tabs {
    flex-shrink: 0 !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }
  #garment-tabs::-webkit-scrollbar { display: none; }
  /* Mode toggle (Base pattern / Full MTM) */
  #fitting-mode-toggle {
    flex-shrink: 0 !important;
  }
  #nav-mode-bp, #nav-mode-full {
    padding: 5px 10px !important;
    font-size: 10px !important;
    min-height: 36px;
  }

  /* ── Step 4 full layout — constrain height properly ─────────────── */
  /* Only apply layout to no-step-3 when it is actually shown (inline display:flex) */
  #no-step-3[style*="display: flex"],
  #no-step-3[style*="display:flex"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--mob-nav) !important;
    overflow: hidden !important;
    flex-direction: column !important;
  }
  /* Never force display on no-step-3 — JS controls visibility */
  #no-step-3 {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--mob-nav) !important;
    overflow: hidden !important;
    flex-direction: column !important;
  }
  body.ubb-active #no-step-3 {
    bottom: calc(var(--mob-nav) + var(--mob-ubb)) !important;
  }
  /* Inner panes fill remaining height */
  #main-pane-fitting,
  #main-pane-style {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  /* Style pane — single column (left takes full width, right panel hidden below) */
  #main-pane-style .layout {
    flex-direction: column !important;
    height: auto !important;
    overflow: visible !important;
  }
  #main-pane-style .left {
    overflow: visible !important;
    height: auto !important;
  }
  #main-pane-style .right {
    display: none !important; /* hide jacket preview panel on mobile */
  }
  /* Cat nav + opt-body scrollable */
  .opt-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 80px !important;
  }



  /* ── Stage progress timeline — horizontal scroll ─────────────────── */
  /* @mobile: order record stage pipeline */
  .pipeline-wrap,
  #or-pipeline,
  div[id*="pipeline"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px !important;
  }
  .pipeline-wrap::-webkit-scrollbar { display: none; }
  /* Stage steps — don't shrink */
  .pl-stage,
  .tl-step { flex-shrink: 0 !important; min-width: 64px !important; }
  .tl-line { min-width: 20px !important; }

  /* ── Step pill truncation fix ─────────────────────────────────────── */
  /* @mobile: new order step pills */
  .step-pill {
    font-size: 8px !important;
    padding: 3px 6px !important;
    letter-spacing: .04em !important;
  }
  .step-pill-num {
    width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
    flex-shrink: 0 !important;
  }
  .step-pill::after {
    width: 10px !important;
    margin: 0 2px !important;
  }

  /* ── Date filter "To" label ─────────────────────────────────────── */
  /* @mobile: orders filter date row */
  #screen-orders div[style*="From"],
  #screen-orders span[style*="From"],
  #screen-orders span[style*="To"] {
    font-size: 10px !important;
    color: var(--muted) !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  /* Date inputs row — keep on one line */
  #orders-date-from,
  #orders-date-to {
    font-size: 11px !important;
    padding: 5px 4px !important;
    min-width: 0 !important;
    flex: 1 1 80px !important;
  }

  /* ── Orders table — wrap long garment strings gracefully ─────────── */
  /* @mobile: orders table rows */
  #orders-table-body .table-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 8px !important;
    padding: 10px 14px !important;
    align-items: flex-start !important;
    grid-template-columns: unset !important;
  }
  /* Order ref — bold, full width */
  #orders-table-body .trow-mono:first-child {
    font-size: 11px !important;
    font-weight: 600 !important;
    flex: 0 0 80px !important;
  }
  /* Client name */
  #orders-table-body .trow-name {
    flex: 1 1 100px !important;
    font-size: 13px !important;
  }
  /* Status pill */
  #orders-table-body .status-pill {
    flex-shrink: 0 !important;
    font-size: 8px !important;
  }
  /* Garment + updated — smaller, secondary */
  #orders-table-body .trow-sub,
  #orders-table-body .trow-mono:not(:first-child) {
    font-size: 10px !important;
    color: var(--muted) !important;
    width: 100% !important;
  }

  /* ── Settings — factory routing email inputs full width ──────────── */
  /* @mobile: settings factory routing */
  #screen-settings div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  #shr-primary, #jyy-primary,
  #disc-shr-primary, #disc-jyy-primary {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ── Step 4 header breathing room ────────────────────────────────── */
  /* @mobile: configurator step 4 header */
  #main-nav-bar {
    padding: 8px 10px !important;
    min-height: 50px !important;
  }

  /* ── Full MTM dropdowns — more readable ──────────────────────────── */
  /* @mobile: full mtm cut/base selectors */
  .ft-wrap .top-bar select,
  .ft-wrap select {
    font-size: 14px !important;
    min-height: 36px !important;
  }
  /* Ease profile pills */
  .ft-wrap .fit-option {
    padding: 6px 4px !important;
  }
  .ft-wrap .fit-name { font-size: 11px !important; }
  .ft-wrap .fit-desc { font-size: 8px !important; }

  /* ── Size chips — slightly larger touch target ───────────────────── */
  .size-chip, .bp-chip {
    padding: 6px 10px !important;
    min-height: 32px !important;
  }



  /* ── Full MTM layout — simple scroll, no sticky tricks ─────────── */
  /* The ft-wrap renders inside #ft-fitting-pane which already scrolls.
     Just ensure content isn't hidden and measurement rows are clean. */

  /* Don't collapse the fitting pane */
  .ft-wrap {
    overflow: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Mode toggle and top-bar — normal flow, no sticky on mobile */
  .ft-wrap .mode-toggle-wrap {
    position: relative !important;
    top: auto !important;
  }
  .ft-wrap .top-bar {
    position: relative !important;
    top: auto !important;
    flex-wrap: wrap !important;
  }

  /* Fix the fitting pane scroll chain */
  #main-pane-fitting {
    overflow: hidden !important;
    flex: 1 !important;
    min-height: 0 !important;
  }
  #ft-fitting-pane {
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    flex: 1 !important;
    min-height: 0 !important;
    height: 100% !important;
  }
  /* mode-full-view and mode-bp-view must NOT be flex:1 — let them grow naturally */
  #mode-full-view,
  #mode-bp-view {
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-bottom: 100px !important;
  }
  /* ft-wrap also natural height */
  .ft-wrap {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    flex: none !important;
  }

  /* mode-full-view — let it scroll naturally inside ft-fitting-pane */
  #mode-full-view {
    overflow-y: visible !important;
    height: auto !important;
    padding: 8px 12px 80px !important;
  }


  /* ── Full MTM measurement rows — fix overlap ────────────────────── */
  /* The desktop .fit-row layout (flex row with s/cm/spec/adj columns)
     overlaps at 360px. Restructure to vertical label + horizontal inputs */

  /* Hide the noisy metadata on mobile */
  .ft-wrap .shared-badge { display: none !important; }
  .ft-wrap .ease-dot,
  .ft-wrap .req-dot,
  .ft-wrap .rec-dot,
  .ft-wrap .calc-dot,
  .ft-wrap .no-dot { display: none !important; }
  .ft-wrap .row-flag { display: none !important; }
  /* Hide diff badge and pat pill — too small to read anyway */
  .ft-wrap .diff-badge { display: none !important; }
  /* Hide "s" shared prefix text nodes — hide body-calc */
  .ft-wrap .body-calc { display: none !important; }

  /* Restructure fit-row to 2-line layout */
  .ft-wrap .fit-row {
    flex-wrap: wrap !important;
    padding: 6px 0 !important;
    min-height: unset !important;
    gap: 4px 6px !important;
  }
  /* Row label — full width line 1 */
  .ft-wrap .row-lbl {
    flex: 0 0 100% !important;
    font-size: 12px !important;
    margin-bottom: 2px !important;
  }
  /* Body input — compact */
  .ft-wrap .body-wrap {
    flex: 0 0 auto !important;
  }
  .ft-wrap .body-wrap input {
    width: 70px !important;
    font-size: 13px !important;
    padding: 5px 6px !important;
  }
  .ft-wrap .body-wrap .unit {
    font-size: 11px !important;
    margin-left: 3px !important;
  }
  /* Spec value */
  .ft-wrap .spec-val {
    width: 54px !important;
    font-size: 12px !important;
    padding: 3px 4px !important;
    min-height: 26px !important;
  }
  /* Spinner */
  .ft-wrap .spinner { margin-left: 4px !important; }
  .ft-wrap .spin-btn { width: 22px !important; height: 13px !important; }
  .ft-wrap .spin-val { font-size: 11px !important; min-width: 28px !important; }
  /* Pat col — reference number, keep but compact */
  .ft-wrap .pat-col {
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }
  .ft-wrap .pat-pill {
    font-size: 10px !important;
    padding: 2px 5px !important;
  }
  /* body-empty spacer — hide */
  .ft-wrap .body-empty { display: none !important; }




  /* ── Fitting tool specific fixes ────────────────────────────────── */
  /* @mobile: fitting tool base pattern + full mtm */

  /* Mode toggle — layout only, JS controls display */
  #fitting-mode-toggle {
    width: 100% !important;
  }
  #nav-mode-bp, #nav-mode-full {
    flex: 1 !important;
    text-align: center !important;
    min-height: 38px !important;
    padding: 6px 8px !important;
    font-size: 11px !important;
  }

  /* Expand (+) buttons — same size as size chips, NOT 44px */
  .size-expand-btn,
  .bp-expand-btn {
    min-height: unset !important;
    height: auto !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  /* Size chips — consistent height */
  .size-chip,
  .bp-chip {
    min-height: unset !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
  }

  /* bp-selector — ensure visible, not collapsed */
  .ft-wrap .bp-selector {
    display: block !important;
    overflow: visible !important;
    max-height: none !important;
  }

  /* Base pattern view — only override layout, never force display
     JS controls visibility via inline style */
  #mode-bp-view {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Fit block buttons — side by side */
  .ft-wrap .bp-fitblock-row {
    display: flex !important;
    gap: 8px !important;
  }
  .ft-wrap .bp-fb-btn {
    flex: 1 !important;
    min-height: 44px !important;
    padding: 10px 10px !important;
  }

  /* UBB on fitting/configurator — compress labels */
  body.ubb-active #unified-bottom-bar #ubb-context {
    font-size: 10px !important;
    max-width: 80px !important;
  }
  /* Nav2 button in UBB (Tier & Fabric) — smaller text */
  #ubb-nav2 {
    font-size: 9px !important;
    padding: 6px 8px !important;
    white-space: nowrap !important;
  }
  #ubb-back {
    font-size: 9px !important;
    padding: 6px 8px !important;
    white-space: nowrap !important;
  }
  #ubb-primary {
    font-size: 11px !important;
    padding: 8px 12px !important;
    white-space: nowrap !important;
  }
  #ubb-secondary {
    font-size: 9px !important;
    padding: 6px 8px !important;
    white-space: nowrap !important;
  }
  /* UBB — allow all buttons to be seen */
  #unified-bottom-bar > div:first-child,
  #unified-bottom-bar > div:last-child {
    display: flex !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
  }
  /* Save draft label — hide on mobile to save space */
  #ubb-secondary[style*="Save draft"] {
    display: none !important;
  }


  /* ── Fitting tool measurement rows ───────────────────────────────── */
  /* @mobile: fitting tool measurements */
  /* The ft-wrap already has a mobile block in styles.css for its own
     internal layout. These fix the Full MTM measurement table. */

  /* Measurement table rows — stack vertically on mobile */
  .meas-header-row { display: none !important; }
  .meas-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 10px 0 !important;
  }
  /* Label full width */
  .meas-label { font-size: 13px !important; }
  /* Input row — keep inline but smaller */
  .meas-delta-wrap {
    flex-wrap: nowrap !important;
    gap: 4px !important;
  }
  .meas-step-btn {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    font-size: 18px !important;
  }
  .meas-delta-input {
    width: 60px !important;
    font-size: 14px !important;
    min-height: 36px;
  }
  .meas-base { font-size: 12px !important; }
  .meas-final { font-size: 13px !important; }
  .meas-range { font-size: 9px !important; }


  /* Validation panel — collapsible on mobile to save space */
  .ft-wrap .validation-panel.error.show {
    cursor: pointer;
    max-height: 52px;
    overflow: hidden;
    transition: max-height 0.2s;
  }
  .ft-wrap .validation-panel.error.show.expanded {
    max-height: 300px;
  }
  /* Add visual cue it's expandable */
  .ft-wrap .validation-panel.error.show::after {
    content: ' ▾ tap to expand';
    font-size: 9px;
    opacity: 0.6;
  }
  .ft-wrap .validation-panel.error.show.expanded::after {
    content: ' ▴ tap to collapse';
    font-size: 9px;
    opacity: 0.6;
  }



  /* ft-wrap Full MTM view — layout fix */
  #mode-full-view .ft-wrap .fit-row {
    display: grid !important;
    grid-template-columns: 1fr auto auto auto !important;
    gap: 6px !important;
    align-items: center !important;
    padding: 8px 0 !important;
    min-height: 44px;
  }
  /* Body wrap input */
  .ft-wrap .body-wrap input {
    width: 72px !important;
    font-size: 14px !important;
    min-height: 36px;
  }
  /* Spec val */
  .ft-wrap .spec-val {
    width: 60px !important;
    font-size: 13px !important;
    min-height: 32px;
    padding: 3px 4px !important;
  }
  /* Spinner buttons */
  .ft-wrap .spin-btn {
    width: 28px !important;
    height: 20px !important;
  }
  /* Pat pill — hide on mobile to save space */
  /* pat-col contains base pattern reference numbers — keep visible, just smaller */
  .ft-wrap .pat-col {
    flex-shrink: 0 !important;
    min-width: 44px !important;
    font-size: 10px !important;
  }
  .ft-wrap .pat-pill {
    font-size: 10px !important;
    padding: 2px 5px !important;
  }

  /* UBB label text — truncate on mobile */
  #ubb-sub {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 120px !important;
  }


  /* ── Touch target baseline ───────────────────────────────────────── */
  button { min-height: 44px; }
  /* Exempt small utility buttons from 44px */
  .adj-trigger, .muted-link, a,
  .size-expand-btn, .bp-expand-btn,
  .spin-btn, .bp-spin-btn,
  .meas-step-btn,
  .qty-btn,
  .ctab, .htab, .tab-btn, .fstep,
  .nav-item { min-height: unset !important; }

  /* ── Sidebar footer — hide (shown in bottom nav instead) ─────────── */
  #sidebar-rep-footer { display: none !important; }

} /* end @media (max-width: 768px) */