/*
 * Mobile UX v1 overlay for the 2026-08-13 production baseline.
 * Keep this isolated from catalog, backoffice, and data release versioning.
 */

@supports (min-height: 100dvh) {
  body.unified-backoffice-app,
  .unified-workspace,
  .unified-sidebar {
    min-height: 100dvh;
  }
}

@media (max-width: 720px) {
  html,
  body.unified-backoffice-app {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
  }

  .unified-topbar {
    min-height: calc(60px + env(safe-area-inset-top));
    padding-top: max(8px, env(safe-area-inset-top));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left: max(12px, env(safe-area-inset-left));
  }

  .unified-sidebar-toggle,
  .unified-topbar .language-picker,
  .unified-topbar .language-picker select,
  .unified-topbar .customer-catalog-link,
  .unified-backoffice-app button,
  .unified-backoffice-app .button-link,
  .unified-backoffice-app input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
  .unified-backoffice-app select,
  .unified-backoffice-app textarea {
    min-height: 44px;
  }

  .unified-sidebar-toggle,
  .unified-topbar .customer-catalog-link {
    width: 44px;
    min-width: 44px;
  }

  .unified-topbar .language-picker select {
    min-width: 116px;
  }

  body.unified-backoffice-app input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
  body.unified-backoffice-app select,
  body.unified-backoffice-app textarea,
  body.unified-backoffice-app .unified-topbar .language-picker select {
    font-size: 16px;
  }

  .backoffice-login-card,
  .sales-auth-card {
    margin-top: 12px;
    padding: 16px;
  }

  .backoffice-portal-shell,
  .admin-shell,
  .sales-auth-view,
  .sales-shell {
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
  }

  .backoffice-login-card #backofficeAuthStatus {
    min-height: 20px;
  }

  .backoffice-login-form,
  .admin-login-row,
  .sales-form-grid.auth-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .unified-sidebar {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .unified-sidebar-nav {
    overscroll-behavior: contain;
  }

  .order-detail-table {
    overflow: visible;
  }

  .order-detail-table table,
  .order-detail-table thead,
  .order-detail-table tbody,
  .order-detail-table tr,
  .order-detail-table td {
    display: block;
    width: 100%;
  }

  .order-detail-table table {
    min-width: 0;
  }

  .order-detail-table thead {
    display: none;
  }

  .order-detail-table tr {
    margin-bottom: 10px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
  }

  .order-detail-table td {
    display: grid;
    grid-template-columns: minmax(88px, 34%) minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
    padding: 9px 10px;
    overflow-wrap: anywhere;
  }

  .order-detail-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.35;
  }

  .order-detail-table img {
    width: 72px;
    height: 72px;
  }

  .quote-drawer-panel {
    max-height: 84dvh;
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  #quoteDrawerOrderBtn {
    position: fixed;
    z-index: 82;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    left: max(14px, env(safe-area-inset-left));
    width: auto;
    min-height: 52px;
    box-shadow: 0 6px 12px rgba(29, 85, 63, 0.2);
  }

  .catalog-filter-dialog {
    max-height: min(82dvh, 720px);
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .catalog-filter-dialog-actions {
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }

  .free-shipping-price-summary {
    min-height: 44px;
    align-content: center;
    box-sizing: border-box;
  }

  .app-view input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
  .app-view select,
  .app-view textarea,
  .product-detail-dialog input,
  .product-detail-dialog select,
  .product-detail-dialog textarea {
    font-size: 16px;
  }

  .utility-topbar {
    position: static;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-right: max(12px, env(safe-area-inset-right));
    padding-bottom: 12px;
    padding-left: max(12px, env(safe-area-inset-left));
  }

  .utility-topbar > div:first-child,
  .utility-topbar .top-actions {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    min-width: 0;
  }

  .utility-topbar h1 {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    display: block;
    overflow: visible;
    color: #171d1a;
    font-size: 18px;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
    -webkit-line-clamp: initial;
  }

  .utility-topbar p {
    display: block;
    margin: 5px 0 0;
    color: #59665f;
    font-size: 12px;
    line-height: 1.4;
  }

  .utility-topbar .top-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: stretch;
    gap: 6px;
  }

  .utility-topbar .top-actions > * {
    min-width: 0;
  }

  .utility-topbar .top-actions > #aiProductCount {
    display: none;
  }

  .utility-topbar .language-picker {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    grid-template-columns: 18px minmax(0, 1fr) 6px;
    gap: 3px;
    padding-inline: 6px;
  }

  .utility-topbar .language-picker select {
    width: 100%;
    min-width: 44px;
    min-height: 44px;
    font-size: 16px;
  }

  .utility-topbar .button-link {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    justify-content: center;
    padding: 7px 6px;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  body.ai-page button,
  body.ai-page .button-link,
  body.ai-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
  body.ai-page select,
  body.ai-page textarea {
    min-height: 44px;
  }

  body.ai-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
  body.ai-page select,
  body.ai-page textarea {
    font-size: 16px;
  }
}

@media (max-width: 720px) and (max-height: 600px) {
  .backoffice-login-card,
  .sales-auth-card {
    margin-top: 12px;
    padding: 16px;
  }

  .backoffice-login-card .page-header,
  .sales-auth-card .page-header {
    margin-bottom: 12px;
  }
}

@media (max-width: 380px) {
  .unified-topbar {
    gap: 6px;
  }

  .unified-topbar .language-picker {
    min-width: 64px;
  }

  .unified-topbar .language-picker select {
    min-width: 96px;
  }

  .utility-topbar h1 {
    font-size: 17px;
  }

  .utility-topbar p {
    display: none;
  }
}