/* The text-size trial (see Helpers/TextSize.cs). The layout sets data-ts on <html> only on the
   pages the trial covers - Dashboard (with Edit Order and its popups) and New Delivery.

   Each size ZOOMS the page body rather than restyling it: the pages stay exactly as built, just
   bigger, and the layout reflows to the narrower effective width - which is the trade-off the
   testers are judging. Once a size is chosen it becomes the pages' own sizes and this file goes. */
html[data-ts="s"]  { --ts: 1; }
html[data-ts="l"]  { --ts: 1.2; }
html[data-ts="xl"] { --ts: 1.35; }

html[data-ts="l"] .dash-wrap, html[data-ts="xl"] .dash-wrap,
html[data-ts="l"] .wz,        html[data-ts="xl"] .wz,
html[data-ts="l"] .modal-header, html[data-ts="xl"] .modal-header,
html[data-ts="l"] .modal-body,   html[data-ts="xl"] .modal-body,
html[data-ts="l"] .modal-footer, html[data-ts="xl"] .modal-footer { zoom: var(--ts); }

/* Popups grow with their content rather than squeezing it; viewport heights are divided back out
   because they are measured inside the zoom. */
@media (min-width: 576px) {
    html[data-ts] .modal-dialog { max-width: min(calc(500px * var(--ts)), calc(100vw - 32px)); }
}
@media (min-width: 992px) {
    html[data-ts] .modal-lg { max-width: min(calc(800px * var(--ts)), calc(100vw - 32px)); }
    html[data-ts] #dashDetailModal .modal-dialog { max-width: min(calc(1100px * var(--ts)), calc(100vw - 32px)); }
}
html[data-ts] .dash-widget .dash-body { max-height: calc(62vh / var(--ts)); }
html[data-ts] .wz-modal-card { max-height: calc(80vh / var(--ts)); }

/* All capitals (Lee, 2026-11-04) - DISPLAY ONLY: text-transform changes how text is drawn, never
   what is typed, sent or saved. What a person is typing stays as typed, so an email address or a
   unit number can be checked as it will be saved. */
html[data-caps="on"] :is(.dash-wrap, .wz, .modal),
html[data-caps="on"] :is(.dash-wrap, .wz, .modal) :is(button, select, option, .btn) { text-transform: uppercase; }   /* Bootstrap resets these to none */
html[data-caps="on"] :is(.dash-wrap, .wz, .modal) :is(input, textarea) { text-transform: none; }
html[data-caps="on"] :is(.dash-wrap, .wz, .modal) :is(input, textarea)::placeholder { text-transform: uppercase; }

/* The side menu (Ryan, 2026-11-11). Set by the layout on EVERY page, not just the trial pages, so
   the menu does not change size as you move around. It zooms like the page does: its 200px width
   is measured inside the zoom, so it renders 240px (Large) / 270px (XL), and the content is pushed
   over by the same amount. Its height is a viewport height, so it is divided back out. Desktop
   only - below 768px the menu is hidden and the content has no offset.
   Matched on the VALUE, never on presence: Razor can render an empty data-nav-ts="", and a
   presence match with --nts unset would void the menu's height and the content's offset. */
html[data-nav-ts="l"]  { --nts: 1.2; }
html[data-nav-ts="xl"] { --nts: 1.35; }
@media (min-width: 768px) {
    html:is([data-nav-ts="l"], [data-nav-ts="xl"]) #left-menu { zoom: var(--nts); height: calc(100vh / var(--nts)); }
    html:is([data-nav-ts="l"], [data-nav-ts="xl"]) .content-container { margin-left: calc(200px * var(--nts)); width: calc(100vw - 200px * var(--nts)); }
}
html[data-nav-caps="on"] #left-menu,
html[data-nav-caps="on"] #left-menu :is(button, .btn) { text-transform: uppercase; }   /* Sign out is a button */

/* The switch itself: never zoomed, so it stays put while the page grows. */
.ts-switch { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 10px;
             padding: 8px 22px 0; font-size: 13px; color: #33424D; }
.ts-label { font-weight: 600; }
.ts-seg { display: inline-flex; background: #EEF2F5; border: 1px solid #D5DDE3; border-radius: 9px; padding: 2px; }
.ts-seg button { border: 0; background: transparent; color: #33424D; font: inherit; font-weight: 600;
                 min-width: 0; height: 30px; padding: 0 12px; border-radius: 7px; cursor: pointer; line-height: 1; }
.ts-seg button:hover { background: #E1E8EE; color: #1C2A33; }
.ts-seg button[aria-pressed="true"] { background: #1C2A33; color: #fff; }
.ts-note { color: #A3211B; font-size: 12.5px; }