/* Universal AMOSYS viewport contract. No typography, zoom or drawing transforms.
   Keep this layer after application CSS in every authored entry document. */
@media screen {
  html { max-width: 100%; }
  body { min-width: 0 !important; }
  body > main, #root, #app, .shell, .workspace, .layout, .panel,
  .form-grid > *, .fields > *, .two-column > *, .decor-images > * {
    min-width: 0;
  }
  body > main { max-width: none; }
  .scroll, .table-wrap, .table-scroll, .register-scroll, .exact-ribbon-scroll {
    min-width: 0; max-width: 100%; overflow-x: auto;
  }
  dialog { box-sizing: border-box; min-width: 0; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow: auto; }
  .dialog-body, .dialog-content, .modal-body, .modal-content { min-width: 0; min-height: 0; }
  .actions, .actions > div, .heading, .page-heading, .panel-heading,
  .register-heading, .dialog-heading, .cutout-heading, .cutout-actions,
  .decor-filter-row, .decor-selection-row { flex-wrap: wrap; }
  .fields input, .fields select, .filters input, .filters select { max-width: 100%; }
  .panel pre, .dialog-body pre { white-space: pre-wrap; overflow-wrap: anywhere; }

  /* Company Control owns a standalone document, not the main AMOSYS shell. */
  body:has(> aside):has(#company-name) {
    --fit-nav: clamp(165px, 13vw, 210px);
    display: grid; grid-template-columns: var(--fit-nav) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr); height: 100dvh;
  }
  body:has(> aside):has(#company-name) > header {
    position: static; grid-column: 1 / -1; height: auto; min-height: 64px;
    padding: 10px 16px; grid-template-columns: calc(var(--fit-nav) - 16px) minmax(0, 1fr) auto;
  }
  body:has(> aside):has(#company-name) > header > span { margin-left: 12px; flex-wrap: wrap; }
  body:has(> aside):has(#company-name) > aside {
    position: static; width: auto; min-height: 0; padding: 12px; overflow: auto;
  }
  body:has(> aside):has(#company-name) > main {
    position: static; min-height: 0; overflow: auto; padding: 0 clamp(12px, 1.2vw, 24px) 12px;
  }
  body:has(> aside):has(#company-name) #content { min-width: 0; }
  body:has(> aside):has(#company-name) .inventory-controls {
    flex-wrap: wrap; overflow: visible; gap: 10px 16px;
  }
  body:has(> aside):has(#company-name) .inventory-controls .filters,
  body:has(> aside):has(#company-name) .inventory-controls .held-rule {
    flex-wrap: wrap; flex: 1 1 auto; min-width: 0;
  }
  body:has(> aside):has(#company-name) .inventory { width: 100%; max-width: none; }
  body:has(> aside):has(#company-name) .mode-tiers { width: 100%; }
  body:has(> aside):has(#company-name) .panel .scroll:has(.mode-tiers) { max-width: 100%; }
  body:has(> aside):has(#company-name) #content:has(.account-editor) { display: flex; flex-direction: column; }
  body:has(> aside):has(#company-name) .account-editor { flex: 1; min-height: min(320px, 50dvh); height: auto; width: 100%; }
  body:has(> aside):has(#company-name) #decor-editor .scroll { overflow: auto; }
  body:has(> aside):has(#company-name) .costing-breakdown { max-width: 100%; overflow: auto; }
  body:has(> aside):has(#company-name) .decor-layout, body:has(> aside):has(#company-name) .cutout-layout { min-width: 0; }
  body:has(> aside):has(#company-name) .fields .check-decor { min-width: min(300px, 100%); }
  body:has(> aside):has(#company-name) .fields label { min-width: min(180px, 100%); }

  /* User/access, campaign and portal management headers must reflow too. */
  body > header:has(nav) { flex-wrap: wrap; }
  body > header > nav { flex-wrap: wrap; }
  .platform-header, .brand-ribbon { min-width: 0; }
  .workspace, .users-main { overflow-wrap: anywhere; }
  .savebar { flex-wrap: wrap; gap: 10px; }
  .asset-workspace-shell, .template-viewer-shell { width: 100%; height: 100dvh; min-width: 0; }
  .asset-command-ribbon, .asset-sub-ribbon, .asset-ribbon-actions, .template-command-ribbon { flex-wrap: wrap; }
  .asset-workspace-shell { grid-template-rows: auto auto minmax(0, 1fr); }
  .asset-cabinet-picker { min-width: 0; grid-template-columns: auto minmax(0, 1fr); }
  .template-lookup, .asset-workspace-grid > * { min-width: 0; }
  .modules { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

  @media (max-height: 720px) {
    body:has(> aside):has(#company-name) #content:has(.inventory) { overflow: auto; }
    body:has(> aside):has(#company-name) #content > .scroll { flex: 1 0 auto; min-height: 160px; max-height: 55dvh; }
    body:has(> aside):has(#company-name) .ribbon { padding-block: 8px; }
  }
  @media (max-width: 1000px) {
    body:has(> aside):has(#company-name) .decor-layout, body:has(> aside):has(#company-name) .cutout-layout { grid-template-columns: minmax(0, 1fr); }
    body:has(> aside):has(#company-name) .decor-images { grid-template-columns: minmax(0, 1fr); }
    body:has(> aside):has(#company-name) .cutout-filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .heading, .page-heading { align-items: flex-start; }
  }
  @media (max-width: 600px) {
    .asset-workspace-grid:not(.bot-view-active) { grid-template-columns: minmax(0, 1fr); overflow: auto; }
    .asset-workspace-grid .asset-viewer-panel { min-height: 40dvh; }
    .asset-workspace-grid .dxf-inspection-sidebar { min-height: 220px; }
    .asset-command-ribbon { max-height: 35dvh; overflow: auto; }
    .template-command-ribbon { max-height: 40dvh; overflow: auto; }
    body:has(> aside):has(#company-name) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); }
    body:has(> aside):has(#company-name) > header { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
    body:has(> aside):has(#company-name) > header > div { grid-column: 1; grid-row: 2; }
    body:has(> aside):has(#company-name) > header > span { grid-column: 2; grid-row: 1 / 3; }
    body:has(> aside):has(#company-name) > aside { max-height: 24dvh; }
    body:has(> aside):has(#company-name) > aside nav { display: flex; gap: 6px; flex-wrap: wrap; }
    body:has(> aside):has(#company-name) > aside nav button { width: auto; }
    body:has(> aside):has(#company-name) > aside nav h3 { flex-basis: 100%; }
    body:has(> aside):has(#company-name) #content:has(.inventory) { overflow: auto; }
    body:has(> aside):has(#company-name) #content > .scroll { flex: 1 0 auto; min-height: 180px; max-height: 55dvh; }
    body:has(> aside):has(#company-name) .cutout-filter-row, body:has(> aside):has(#company-name) .cutout-fields { grid-template-columns: minmax(0, 1fr); }
    body:has(> aside):has(#company-name) .cutout-file { grid-template-columns: minmax(0, 1fr) auto; }
    body:has(> aside):has(#company-name) .decor-filter-row label { width: 100%; min-width: 0; flex: 1 1 100%; }
    .form-grid, .legacy-facts, .legacy-source { grid-template-columns: minmax(0, 1fr); }
    .brand-ribbon { height: auto; min-height: 64px; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px 12px; }
    .brand-ribbon .brand-title { grid-column: 1; grid-row: 2; }
    .brand-ribbon .company { display: none; }
  }
}