/* Phone and tablet layouts. Desktop tables remain unchanged above 900px. */
@media (max-width:900px) {
  .main,.content,.panel,.heading>div,.order-head>div,.order-head>strong,
  .mobile-more-profile>div,.more-menu>button>span,.client-section-title>div {min-width:0}
  .content {padding:22px 16px calc(105px + env(safe-area-inset-bottom))}
  .panel,.notice,.meta,.heading,.order-head,.summary-line,.more-menu,.account-details {overflow-wrap:anywhere}
  input,select,textarea {font-size:16px;min-width:0;max-width:100%}
  input,select,button {min-height:44px}
  input[type=checkbox] {min-height:20px}
  textarea {min-height:110px}
  .heading {flex-direction:column;align-items:stretch;gap:12px;margin-bottom:20px}
  .heading h1 {font-size:27px;line-height:1.2;letter-spacing:-.7px}
  .heading p {font-size:13px}
  .heading>button {align-self:flex-start;max-width:100%;white-space:normal}
  .heading .eyebrow {font-size:10px;letter-spacing:1.5px}
  .hero {padding:20px;gap:12px}
  .hero h2 {font-size:21px}
  .tools {flex-direction:column}
  .tools select {max-width:none}
  .stats {grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .stat {min-width:0;padding:13px 10px}
  .stat small {line-height:1.5;overflow-wrap:anywhere}
  .stat strong {font-size:23px}
  .tabs {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .tabs button {padding:10px 8px}
  .row-actions {display:flex;flex-wrap:wrap;gap:10px}
  .row-actions>button {flex:1 1 145px;white-space:normal}
  .mobile-app-header {padding-left:16px;padding-right:16px;gap:10px}
  .mobile-app-header>.atlas-wordmark {min-width:0}
  .mobile-app-header>img {flex-shrink:0;width:38px;height:49px}
  .mobile-app-header .atlas-wordmark strong {font-size:23px}
  .mobile-app-header .atlas-wordmark>span {font-size:7px;letter-spacing:1.3px}
  .mobile-role {flex-shrink:0;max-width:95px;font-size:9px;padding:7px 8px;overflow-wrap:anywhere}
  .mobile-bottom-nav {padding-bottom:calc(7px + env(safe-area-inset-bottom))}
  .mobile-nav-item {min-height:53px;min-width:0}
  #toast {bottom:calc(88px + env(safe-area-inset-bottom));width:max-content;max-width:calc(100vw - 32px);font-size:13px;line-height:1.5;padding:12px 16px}

  /* Catalogue: readable prices and consistent actions. */
  .family-card {min-width:0}
  .family-name {font-size:16px}
  .grid>.card .product-bottom .price-ht {line-height:1.4}
  .grid>.card .product-bottom .price-ht small {display:block;font-size:11px}
  .grid>.card .product-bottom .price-ttc {line-height:1.5}
  .grid>.card .product-bottom>button.primary {min-height:44px;font-size:12px;width:100%;white-space:normal;padding:10px 8px}
  .grid>.card .product-bottom .availability-switch {white-space:normal;gap:7px;font-size:11px}
  .grid>.card .product-bottom .switch-track {width:42px}
  .grid>.card p {margin-bottom:15px;font-size:12px}

  /* Each table row becomes a labelled card instead of a horizontal scroller. */
  .cart-layout {grid-template-columns:minmax(0,1fr);gap:4px}
  .cart-layout>.panel {min-width:0}
  .cart-layout .table-wrap,.order-lines,.clients-panel>.table-wrap {overflow:visible}
  .cart-table,.order-lines,.clients-table {display:block;width:100%;min-width:0;table-layout:fixed}
  .cart-table thead,.order-lines thead,.clients-table thead {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .cart-table tbody,.order-lines tbody,.clients-table tbody {display:grid;gap:16px}
  .cart-table tr,.order-lines tr,.clients-table tr {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;padding:18px;border:1px solid #e0e9f5;border-radius:13px;background:#fff;min-width:0;position:relative}
  .cart-table td,.order-lines td,.clients-table td {display:block;min-width:0;padding:0;border:0;overflow-wrap:anywhere;font-size:13px;line-height:1.5}
  .cart-table td[data-label]:before,.order-lines td[data-label]:before,.clients-table td[data-label]:before {content:attr(data-label);display:block;font-size:11px;font-weight:500;color:#71849f;margin-bottom:8px;letter-spacing:0;text-transform:none}
  .cart-table .cart-product {grid-column:1/-1;padding-right:38px;font-size:14px}
  .cart-table .cart-product small {display:inline-block;margin-top:5px}
  .cart-table .cart-quantity input {width:100%;max-width:125px;min-height:44px;font-size:16px}
  .cart-table .cart-remove {position:absolute;top:8px;right:8px}
  .cart-remove button {width:44px;height:44px;padding:8px;font-size:22px}
  .cart-table .cart-line-total {grid-column:1/-1;min-width:0;background:#f1f6fd;border-radius:9px;padding:12px 14px}
  .cart-line-total .price-ht {font-size:17px;white-space:normal}
  .cart-table .price-ht {line-height:1.5}
  .cart-table .price-ht small {display:inline;font-size:11px}
  .cart-table .price-ttc {line-height:1.6}
  .cart-table .price-note {font-size:11px!important}
  .cart-layout .checkout-fields {margin-top:24px}
  .summary {padding:20px}
  .summary-line {gap:16px;align-items:baseline;line-height:1.5}
  .summary-line>span,.summary-line>strong {min-width:0}
  .summary-line>strong {flex-shrink:0;max-width:60%}
  .summary .primary {min-height:50px;font-size:15px}

  /* Request detail: editable prices and quantities fit the same card layout. */
  .order-head {flex-wrap:wrap;gap:12px}
  .order-head>strong {flex:1 1 170px}
  .order-lines .order-product,.order-lines .order-price {grid-column:1/-1}
  .order-lines .order-product {font-size:15px;padding-bottom:12px;border-bottom:1px solid #e5edf7}
  .order-lines .order-price {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .order-lines .order-price:before,.order-lines .order-price>.price-note {grid-column:1/-1;margin-bottom:0}
  .order-lines .order-price>label {font-size:11px;margin:0;line-height:1.5}
  .order-lines .order-price>label>input {display:block;margin-top:6px;min-width:0;width:100%;font-size:16px;min-height:44px}
  .order-lines td>input {width:100%;font-size:16px;min-height:44px}
  .order-lines .order-price>.price-ht,.order-lines .order-price>.price-ttc {grid-column:1/-1}
  .order-lines .order-price>.price-ttc {margin-top:0}
  .order-methods,.order-methods-edit {padding:16px;margin:20px 0}
  .order-methods-edit>button {width:100%;white-space:normal}
  .order-card {padding:18px}
  .order-card-bottom {flex-wrap:wrap;align-items:flex-start}
  .order-card-open {margin-top:4px}
  .order-preview-line {align-items:flex-start}
  .order-preview-line>span {min-width:0}

  /* Client management: full contacts and actions, without scrolling sideways. */
  .clients-table {padding:16px}
  .clients-table .client-partner,.clients-table .client-contact,.clients-table .client-action-cell {grid-column:1/-1}
  .client-identity {align-items:flex-start;gap:10px}
  .client-identity>div {min-width:0}
  .client-identity strong {font-size:14px}
  .client-actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .client-actions button {white-space:normal;min-height:44px;font-size:12px}
  .client-pagination {padding:0 16px 18px}
  .client-pagination>div {width:100%}
  .client-pagination button {flex:1}
  .client-editor,.delete-client-panel {padding:18px}
  .client-section-title {gap:10px}
  .client-section-title h2 {font-size:18px}
  .sage-match {align-items:flex-start}
  .sage-match>span:first-child {min-width:0;overflow-wrap:anywhere}
  .sage-match>span:last-child {padding-top:2px}

  /* Settings, account, questions and notifications share readable spacing. */
  .forms {grid-template-columns:minmax(0,1fr)}
  .forms>div {min-width:0}
  .checkout-settings {grid-template-columns:minmax(0,1fr);gap:0}
  .checkout-fields,.order-methods {grid-template-columns:minmax(0,1fr);gap:16px}
  .checkout-fields select {min-height:48px;font-size:16px}
  .checkout-option {align-items:flex-start;gap:12px}
  .checkout-option>strong {min-width:0;line-height:1.5;padding-top:9px}
  .checkout-option .availability-switch {min-height:44px;font-size:11px;gap:7px}
  .checkout-add>div {flex-direction:column}
  .checkout-add button {width:100%}
  .validation-question {flex-direction:column;gap:12px}
  .validation-question h2 {font-size:18px;line-height:1.4}
  .validation-question textarea {font-size:16px}
  .validation-question-body {width:100%}
  .validation-save>button {width:100%}
  .question-evidence summary {line-height:1.6;min-height:32px}
  .more-menu>button {padding:18px;gap:12px}
  .mobile-more-profile {align-items:flex-start;gap:12px}
  .mobile-more-profile h2 {font-size:19px}
  .footer-note {font-size:9px;line-height:1.8}

  /* The keyboard and short landscape screens must not crop the login form. */
  body.login-page {overflow:auto}
  .login-scene {height:auto;min-height:100dvh;overflow:hidden;justify-content:flex-start;padding:calc(20px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
  .access-card {margin-top:auto;margin-bottom:auto}
  .access-body {padding:24px}
  .access-body input {font-size:16px;min-height:46px}
  .access-submit {min-height:48px}
  .access-brand {padding:18px 24px}
  .login-scene-footer {flex-shrink:0;max-width:100%;text-align:center;flex-wrap:wrap;justify-content:center;line-height:1.7}
}
@media (max-width:560px) {
  .family-grid {grid-template-columns:minmax(0,1fr)}
  .family-card {padding:16px}
  .family-name {font-size:18px}
  .family-art {margin-bottom:16px}
  .family-count {margin-bottom:16px}
  .variant-dialog {padding:18px;width:calc(100vw - 24px);max-height:calc(100dvh - 32px)}
  .variant-heading {gap:10px}
  .variant-heading>div {min-width:0;overflow-wrap:anywhere}
  .variant-heading h2 {font-size:21px}
  .variant-heading button {width:44px;height:44px;flex-shrink:0}
  .variant-option {padding:13px;grid-template-columns:minmax(0,1fr) 82px;gap:12px}
  .variant-option>div {min-width:0;overflow-wrap:anywhere}
  .variant-option input {font-size:16px;min-width:0;min-height:46px;width:100%}
  .variant-price .price-ht small {display:block}
}
@media (max-width:379px) {
  .grid {grid-template-columns:minmax(0,1fr)}
  .content {padding-left:12px;padding-right:12px}
  .mobile-role {max-width:75px;font-size:8px}
  .mobile-app-header .atlas-wordmark strong {font-size:21px}
  .mobile-app-header .atlas-wordmark>span {letter-spacing:.8px}
  .access-brand {padding:16px;gap:9px}
  .access-brand strong {font-size:22px;letter-spacing:2px}
  .access-brand-line,.access-brand>small {display:none}
  .access-body {padding:20px}
  .access-body h1 {font-size:32px}
  .access-footer {padding:12px 20px;font-size:8px}
}
@media (min-width:901px) and (max-height:500px) {
  .sidebar .sidebar-profile,.sidebar .sidebar-section-label {display:none}
  .sidebar-brand {padding-bottom:10px}
}
@media (prefers-reduced-motion:reduce) {
  button {transition:none}
  .family-card:hover,.order-card:hover {transform:none}
}

@media(max-width:900px){.settings-layout{gap:16px}.checkout-option{flex-wrap:wrap}.checkout-option>strong{flex:1 1 110px}.checkout-option-actions{flex-wrap:wrap;gap:8px;max-width:100%;margin-left:auto}.checkout-option-actions .availability-switch{font-size:11px}.checkout-option-actions .danger{min-height:44px}}
@media(max-width:379px){.checkout-option-actions{width:100%;justify-content:space-between}}

@media(max-width:900px){.order-status-filters{gap:10px;margin:20px 0 18px}.order-status-filter{padding:14px 12px;gap:10px;align-items:flex-start}.order-status-filter .status-symbol{width:30px;height:30px;border-radius:9px;font-size:20px}.status-filter-label{font-size:11px}.order-status-filter strong{font-size:24px}.order-status{font-size:11px}.order-card-head{align-items:flex-start}.order-status-banner{padding:16px;gap:12px}.order-status-banner .status-symbol{width:32px;height:32px;font-size:20px}.order-status-banner h2{font-size:18px}.orders-list-heading{gap:10px;margin-bottom:18px}.order-line-adjusted td:first-child{border-left:0}.order-lines .order-line-adjusted{border-color:#afc9ee;border-left-width:4px}.order-state-explanation{font-size:12px}}
@media(max-width:379px){.order-status-filter{gap:7px;padding:12px 9px}.order-status-filter .status-symbol{width:25px;height:25px;font-size:18px}.status-filter-label{font-size:10px}}

@media(max-width:900px){.order-filter-bar{gap:6px;padding:7px;margin-top:18px}.order-filter-chip{min-height:44px;padding:9px 10px;gap:7px;font-size:12px;flex:1 1 auto}.order-filter-results{margin-bottom:16px}}

@media(max-width:900px){.orders-toolbar{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:16px}.orders-toolbar input,.orders-toolbar select{font-size:16px;min-height:48px}.order-card-company{font-size:18px;margin-bottom:13px}.order-card-head{align-items:flex-start;gap:8px}.order-age{font-size:11px}.order-client-group>summary{padding:16px;gap:11px;min-height:76px}.order-client-avatar{width:36px;height:36px;font-size:12px}.order-client-name>strong{font-size:15px}.order-client-group>.orders-grid{padding:0 12px 12px}.order-client-group .orders-grid{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.order-client-expand{transition:none}}