/* Screen-only fluid layout. Browser zoom and printed/exported documents stay independent. */
@media screen {
  :root {
    --screen207-sidebar: clamp(180px, 13vw, 240px);
    --screen207-gap: clamp(12px, 1.1vw, 24px);
    --screen207-text: clamp(13px, calc(11px + .16vw), 15px);
    --screen207-table: clamp(12px, calc(10px + .14vw), 14px);
    --screen207-small: clamp(11px, calc(9px + .14vw), 13px);
    --screen207-panel: clamp(420px, 34vw, 860px);
    font-size: var(--screen207-text);
  }
  body.ui165 {
    --ui165-button: clamp(34px, 2.4vw, 42px);
    --ui165-compact: clamp(30px, 2.15vw, 38px);
    --ui165-state: clamp(26px, 1.9vw, 32px);
  }
  #app > aside {
    width: var(--screen207-sidebar);
    padding: var(--screen207-gap) clamp(8px, .8vw, 18px);
    max-height: 100vh;
    max-height: 100dvh;
    overscroll-behavior: contain;
  }
  #app > aside .brand { font-size: clamp(14px, 1.1vw, 20px); letter-spacing: .035em; overflow-wrap: anywhere; }
  body.ui165 #app > aside nav button { font-size: var(--screen207-text)!important; padding: 7px clamp(6px, .6vw, 12px); min-height: clamp(34px, 2.5vw, 44px); }
  #app > main, body.home166 #app > main {
    margin-left: var(--screen207-sidebar);
    width: calc(100% - var(--screen207-sidebar));
    min-width: 0;
    max-width: none;
    padding: var(--screen207-gap);
  }
  #app main > header { gap: var(--screen207-gap); flex-wrap: wrap; }
  #app h1 { font-size: clamp(22px, 1.65vw, 32px); }
  #app h2 { font-size: clamp(15px, 1.05vw, 20px); }
  #app h3 { font-size: var(--screen207-text); }
  #app main .card { padding: clamp(12px, 1.2vw, 26px); min-width: 0; }
  #app main .toolbar { gap: var(--screen207-gap); flex-wrap: wrap; }
  #app main .toolbar input { width: clamp(220px, 26vw, 420px); max-width: 100%; }
  #app main .table-wrap { min-width: 0; max-width: 100%; }
  #app main table { font-size: var(--screen207-table); }
  #app main th, #app main td { padding: clamp(6px, .65vw, 13px) clamp(5px, .55vw, 12px); }
  body.ui165 #app main button:where(:not(.calendar-event):not(.wf-point):not(.inbox165-row):not(.h166-inbox-row):not(.p164-annual button)),
  body.ui165 #modal button:where(:not(.calendar-event):not(.wf-point)) { font-size: var(--screen207-text)!important; }
  body.ui165 #app main td button:where(:not(.calendar-event):not(.wf-point)),
  body.ui165 #app main .panel-body147 .actions button { font-size: var(--screen207-table)!important; }
  body.ui165 #app .badge, body.ui165 #app .state147, body.ui165 #app .approval151,
  body.ui165 #app [data-status-tone]:not(button):not(.calendar-phase163):not(.calendar-state163) { font-size: var(--screen207-small); }
  /* Layout owns the panel geometry; no fixed-position measurements or resize re-render. */
  #app main .workspace147 { grid-template-columns: minmax(0, 1fr) var(--screen207-panel); gap: var(--screen207-gap); }
  #app main .workspace147 > .panel147 {
    position: sticky; top: var(--screen207-gap); inset-inline: auto;
    width: 100%; min-width: 0; max-width: 100%; margin: 0;
    height: calc(100vh - 2 * var(--screen207-gap));
    height: calc(100dvh - 2 * var(--screen207-gap));
    padding: var(--screen207-gap);
  }
  #app main .panel147 .panel-body147 { overflow-y: auto; overflow-x: hidden; min-height: 0; }
  #app main .panel147 .shipping-fields147 { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
  #app main .workspace153 { grid-template-columns: minmax(0, 1fr) clamp(340px, 27vw, 620px); gap: var(--screen207-gap); }
  #app main .sources-panel153 { max-height: calc(100dvh - 2 * var(--screen207-gap)); }
  #app main .shipping-table147 { min-width: 0!important; width: 100%!important; table-layout: fixed; }
  #app main .shipping-table147 th, #app main .shipping-table147 td { min-width: 0!important; white-space: normal!important; overflow-wrap: anywhere!important; }
  #app main .shipping-table147 .ui-fields { display: block; padding: 0; margin: 0; background: transparent; border: 0; }
  #app main .shipping-table147 .ui-fields dd { margin: 4px 0 0; }
  /* Use the whole display; keep a useful width for both dashboard columns. */
  body.home166 #app .h166-layout { max-width: none; margin-inline: 0; gap: var(--screen207-gap); grid-template-columns: minmax(0, 1fr) minmax(340px, 34%); }
  body.home166 #app .h166-kpis { gap: var(--screen207-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.home166 #app .h166-kpis strong { font-size: clamp(20px, 1.6vw, 34px); }
  body.home166 #app .h167-chart { height: clamp(175px, 15vw, 270px); min-height: 0; max-height: none; }
  #app .fields { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
  #modal { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: clamp(14px, 1.5vw, 30px); }
  /* Narrow desktops put detail below the list instead of squeezing the table. */
  @media (max-width: 1599px) {
    #app main .workspace147, #app main .workspace153 { grid-template-columns: minmax(0, 1fr); }
    #app main .workspace147 > .panel147 { position: relative; inset: auto; width: 100%; height: auto; max-height: none; min-height: 0; }
    #app main .workspace147 > .panel147 .panel-body147 { max-height: min(72dvh, 850px); }
    #app main .sources-panel153 { position: relative; top: auto; max-height: none; margin-top: var(--screen207-gap); }
  }
  @media (min-width: 2100px) {
    body.home166 #app .h166-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  @media (max-width: 1199px) {
    body.home166 #app .h166-layout { grid-template-columns: minmax(0, 1fr); }
    #app .production147 .production-metrics147 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #app .grid-two { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 760px) {
    #app > aside { position: relative; width: 100%; max-height: none; padding: 10px 12px; }
    #app > aside nav { display: flex; gap: 4px; overflow-x: auto; padding: 4px 0; }
    #app > aside nav button { flex: 0 0 auto; width: auto!important; white-space: nowrap; }
    #app > aside nav .nav-group177 { display: none; }
    #app > aside .identity { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 6px; }
    #app > aside .identity button { padding: 5px 8px; }
    #app > main, body.home166 #app > main { margin-left: 0; width: 100%; }
    #app .production147 .production-metrics147 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #app main .toolbar input { width: 100%; }
  }
  @media (pointer: coarse) {
    body.ui165 { --ui165-button: 44px; --ui165-compact: 44px; }
  }
}