/* Screen preference only: never alter document formatting or printed output. */
@media screen {
  html[data-display-layout] { min-width: 0; }
  html[data-display-layout] body {
    zoom: var(--display-scale, 1);
    min-width: 0;
    min-height: var(--display-viewport-height, 100dvh);
  }
  html[data-display-layout] #app { min-height: 0; }
  html[data-display-layout="desktop"] body.admin-screen {
    height: var(--display-viewport-height, 100dvh);
    min-height: 0;
  }
  html[data-display-layout="desktop"] body.admin-screen .app-shell,
  html[data-display-layout="desktop"] body.admin-screen .quote-layout { height: 100%; }
  html[data-display-layout]:not([data-display-layout="desktop"]) body.admin-screen {
    height: auto;
    min-height: var(--display-viewport-height, 100dvh);
  }
  html[data-display-layout]:not([data-display-layout="desktop"]) body.admin-screen .app-shell,
  html[data-display-layout]:not([data-display-layout="desktop"]) body.admin-screen .quote-layout { height: auto; }
  html[data-display-layout] .quote-table-wrap { zoom: 1; }

  /* The content must shrink with the positioned popover, not only its frame. */
  html[data-display-layout] .product-cascade-menu {
    width: 410px;
    grid-template-columns: minmax(0, 150fr) minmax(0, 260fr);
    height: min(420px, calc(var(--display-viewport-height, 100dvh) - 16px));
  }
  html[data-display-layout] .product-menu-column,
  html[data-display-layout] .product-menu-search { min-width: 0; }
  html[data-display-layout] .product-menu-search { grid-template-columns: minmax(0, 1fr) minmax(0, 128px); }
  html[data-display-layout] .product-menu-custom { width: 100%; min-width: 0; }
  html[data-display-layout] .product-match-menu {
    display: flex;
    flex-direction: column;
    width: 460px;
    height: auto;
  }
  html[data-display-layout] .product-match-head { flex: 0 0 auto; flex-wrap: wrap; gap: 4px 12px; }
  html[data-display-layout] .product-match-list { min-height: 0; flex: 1 1 auto; }
  html[data-display-layout] .design-color-palette { overflow: auto; }
  html[data-display-layout] .design-color-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  html[data-display-layout] .design-color-grid button { width: 100%; min-width: 0; }

  .display-scale-controls {
    flex: 0 0 auto;
    box-sizing: border-box;
    min-width: 0;
    width: 190px;
    padding: 10px;
    border: 1px solid #c6d9ef;
    border-radius: 10px;
    color: #294869;
    background: #f3f8ff;
    font: 12px/1.4 -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  }
  .display-scale-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
  .display-scale-heading > span { white-space: nowrap; }
  .display-scale-controls .display-scale-heading button {
    min-height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font: inherit;
    font-size: 11px;
  }
  .display-scale-buttons { display: grid; grid-template-columns: 30px minmax(58px, 1fr) 30px; align-items: stretch; gap: 5px; }
  .display-scale-controls .display-scale-buttons button,
  .display-scale-controls select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 32px;
    min-height: 32px;
    margin: 0;
    padding: 0 4px;
    border: 1px solid #c6d9ef;
    border-radius: 6px;
    background: #fff;
    color: #1b4d84;
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-align-last: center;
    box-shadow: none;
  }
  .display-scale-controls .display-scale-buttons button { font-size: 18px; }
  .display-scale-controls button:hover { background: #dfedff; transform: none; }
  .display-scale-controls button:disabled { opacity: .45; cursor: default; }
  .display-scale-controls :is(button, select):focus-visible { outline: 2px solid #76b9ff; outline-offset: 2px; }
  .side-navigation > .display-scale-controls { width: 100%; margin-top: auto; margin-bottom: 8px; }
  .side-navigation > .display-scale-controls + .topbar-actions { margin-top: 0; }
  html[data-display-layout="desktop"] .side-navigation > .display-scale-controls {
    margin-top: auto;
    border-color: #ffffff24;
    color: #e4eeff;
    background: #ffffff0c;
  }
  html[data-display-layout="desktop"] .side-navigation > .display-scale-controls .display-scale-buttons :is(button, select) {
    border-color: #ffffff26;
    color: #eaf2ff;
    background: #19325a;
  }
  .display-scale-bar {
    display: flex;
    justify-content: flex-end;
    padding: 8px 16px;
    border-bottom: 1px solid #dae6f5;
    background: #f3f8ff;
  }
  .display-scale-bar[hidden] { display: none; }
  .display-scale-bar > .display-scale-controls,
  .manager-actions > .display-scale-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    width: auto;
    max-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .display-scale-bar .display-scale-heading,
  .manager-actions .display-scale-heading { margin: 0; gap: 10px; }
  .display-scale-bar .display-scale-buttons,
  .manager-actions .display-scale-buttons { width: 144px; }
  html[data-display-layout="phone"] .display-scale-bar { padding: 8px; justify-content: center; }
  html[data-display-layout="phone"] .display-scale-bar > .display-scale-controls { flex-wrap: wrap; justify-content: center; gap: 6px 12px; }
  html[data-display-layout="phone"] .manager-actions > .display-scale-controls { flex-wrap: wrap; }
}

@media print {
  body { zoom: 1 !important; }
  .display-scale-controls, .display-scale-bar { display: none !important; }
}