/* Phone chrome (handoff 8b + the bars on 8c/8d/8e, mock v2): header with avatar and menu button, the menu sheet, the Program / Date Range button bar, the toolbar's chip row, page gutters, and the d-only utility.
   Phones only: App.razor links this file with media="screen and (max-width: 719.98px) and (hover: none) and
   (pointer: coarse)", so nothing here can reach desktop or print (docs/mobile-phone-layout.md).

   The markup: ChromeNav draws the phone header, the Program / Date Range bar and the ☰ sheet as "m-only"
   elements after the desktop nav row; the desktop header band (all three layouts) and the nav row carry
   "d-only". The toolbar keeps its desktop markup and is restyled here. Sizes and colours are the 8b/8c
   mock's (inline styles in the handoff), in the esmart.css tokens where one matches. */

/* ---------- Utilities every phone page shares ---------- */

/* Desktop markup that has a phone replacement. */
.d-only { display: none !important; }

/* Every field 48px tall with 16px text, so iOS Safari doesn't zoom in on focus. Specificity (0,1,1):
   it beats the single-class desktop rules (.search-box input, .date-row select, .loc-input) and any
   page or dialog rule with two classes (.ps-page .ps-filter select) overrides it. A rule of one class
   and a type (.hs-close-options textarea) only ties it, and this file loads after esmart.css, so the
   tie goes here. Textareas therefore take only the 16px text: each sets its own height or minimum
   (70px and more), which a 48px minimum would undercut. Checkboxes, radios and the like keep their
   size; DevExpress widgets (.dx-widget, dxbl-) draw their own fields (the dashboard's in pages.css). */
:root :is(input:not(:where([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="file"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"])), select, textarea):not(:where(.dx-widget *, [class*="dxbl-"] *)) {
	font-size: 16px;
}

:root :is(input:not(:where([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="file"], [type="color"], [type="button"], [type="submit"], [type="reset"], [type="image"])), select):not(:where(.dx-widget *, [class*="dxbl-"] *)) {
	min-height: 48px;
}

/* ---------- Header (8c/8d/8e): logo left, avatar and ☰ right ---------- */

/* The mock's 56px band (8 + 40 + 8): here 6 + 44 + 6, so the menu button is a full 44px target. */
.m-header,
.m-sheet-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 12px 6px 16px;
	background: var(--surface);
}

.m-header { border-bottom: 1px solid var(--border); }

/* The sheet scrolls inside itself once a menu opens; its top bar, with ×, stays in reach. */
.m-sheet-top { position: sticky; top: 0; z-index: 1; border-bottom: 1px solid var(--rule); }

.m-header > img,
.m-sheet-top > img { display: block; height: 26px; width: auto; }

/* Avatar (36px) then ☰ (40px drawn as 44): 6px apart as drawn, the avatar's 44px target included. */
.m-header-actions { display: flex; align-items: center; gap: 2px; }

.m-avatar-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.m-avatar {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 9px;
	background: var(--navy);
	color: #FFFFFF;
	font: 600 12px var(--font-ui);
}

/* ☰ and the sheet's close button. */
.m-icon-btn {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--border);
	border-radius: 9px;
	background: var(--surface-soft);
	color: var(--ink-body);
	cursor: pointer;
}

/* ---------- Program / Date Range bar (8c/8d) ---------- */

.m-context-bar {
	display: flex;
	gap: 8px;
	padding: 10px 12px;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
}

.m-context-btn {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 10px 0 12px;
	background: var(--surface-soft);
	border: 1px solid var(--border);
	border-radius: 10px;
	color: var(--text-quiet);
	font-family: var(--font-ui);
	text-align: left;
	cursor: pointer;
}

.m-context-program { flex-grow: 1.35; }

.m-context-btn > svg { flex: none; }

.m-context-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }

.m-context-label {
	font: 500 9.5px var(--font-mono);
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--text-quiet);
}

.m-context-value {
	font: 500 12.5px var(--font-ui);
	color: var(--ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------- Toolbar → one swipeable chip row (8c/8d v2) ----------
   The groups and their button strips step aside (display: contents), so every button, each group's own
   label and the pseudo-elements below become items of one scrolling row, and "order" lays them out as drawn:
     EXPORT  All Records, PDF | SHARE  Print, Email | Chart Summary | DISPLAY  Average / Percent, Chart Scale |
     TOOLS  Trend View, View All Records, Find Results
   Every desktop button stays: Chart Scale and Find Results stay in their own groups, and Trend View and Chart
   Summary sit where the mock puts them. Each divider is drawn by the group (or button) after it, so a group
   that isn't there takes its caption and divider with it. The toolbar markup is the desktop one, unchanged
   (ReportLayout): group 1 Display, 2 Tools, 3 Export, 4 Share. */
.app-shell > .app-toolbar { position: relative; padding: 0; border-bottom: 0; background: transparent; }

/* The 40px fade at the right edge says the row goes on. */
.app-shell > .app-toolbar::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 40px;
	background: linear-gradient(90deg, rgba(238, 241, 246, 0), var(--page) 75%);
	pointer-events: none;
}

.app-toolbar .toolbar-groups {
	flex-wrap: nowrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 12px 40px 4px 16px;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.app-toolbar .toolbar-groups::-webkit-scrollbar { display: none; }

.app-toolbar .toolbar-group,
.app-toolbar .segmented { display: contents; }

/* Group captions, inline in the row. */
.app-toolbar .group-label {
	flex: none;
	padding: 0 2px 0 4px;
	font: 500 9.5px var(--font-mono);
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: var(--text-quiet);
}

/* Dividers, 1 × 20px with 4px either side. Export leads the row, so its desktop divider goes; the one before
   its Chart Summary is drawn by its button strip. */
.app-toolbar .toolbar-group:nth-child(3)::before { content: none; }

.app-toolbar .toolbar-group:is(:nth-child(1), :nth-child(2), :nth-child(4))::before,
.app-toolbar .toolbar-group:nth-child(3) > .segmented::before {
	content: "";
	position: static;
	flex: none;
	align-self: center;
	width: 1px;
	height: 20px;
	margin: 0 4px;
	background: var(--border-input);
}

.app-toolbar .tool-btn {
	flex: none;
	position: relative;
	gap: 7px;
	height: 36px;
	padding: 0 13px;
	border-radius: 18px;
	font-size: 13px;
}

/* The chips are drawn 36px tall; this makes each a 44px target (the row's padding holds it). */
.app-toolbar .tool-btn::after { content: ""; position: absolute; inset: -4px 0; }

.app-toolbar .tool-btn > svg { width: 14px; height: 14px; stroke-width: 2; }

/* Export: caption, All Records, PDF. */
.app-toolbar .toolbar-group:nth-child(3) > .group-label { order: 10; }
.app-toolbar .toolbar-group:nth-child(3) .tool-btn:nth-child(1) { order: 11; }
.app-toolbar .toolbar-group:nth-child(3) .tool-btn:nth-child(3) { order: 12; }

/* Share: divider, caption, Print, Email. */
.app-toolbar .toolbar-group:nth-child(4)::before { order: 20; }
.app-toolbar .toolbar-group:nth-child(4) > .group-label { order: 21; }
.app-toolbar .toolbar-group:nth-child(4) .tool-btn { order: 22; }

/* Export's Chart Summary on its own, after a divider. */
.app-toolbar .toolbar-group:nth-child(3) > .segmented::before { order: 30; }
.app-toolbar .toolbar-group:nth-child(3) .tool-btn:nth-child(2) { order: 31; }

/* Display: divider, caption, Average / Percent, Chart Scale. */
.app-toolbar .toolbar-group:nth-child(1)::before { order: 40; }
.app-toolbar .toolbar-group:nth-child(1) > .group-label { order: 41; }
.app-toolbar .toolbar-group:nth-child(1) .tool-btn:nth-child(1) { order: 42; }
.app-toolbar .toolbar-group:nth-child(1) .tool-btn:nth-child(2) { order: 43; }

/* Tools: divider, caption, then Display's Trend View (as drawn), View All Records, Find Results. */
.app-toolbar .toolbar-group:nth-child(2)::before { order: 50; }
.app-toolbar .toolbar-group:nth-child(2) > .group-label { order: 51; }
.app-toolbar .toolbar-group:nth-child(1) .tool-btn:nth-child(3) { order: 52; }
.app-toolbar .toolbar-group:nth-child(2) .tool-btn { order: 53; }

/* ---------- Page gutters and footer ---------- */

/* 16px side gutters on every signed-in page (Report, Nav and Chrome layouts); a page can override. */
.app-content { padding: 16px 16px 24px; }

.app-footer {
	gap: 8px;
	padding: 18px 16px 22px;
	border-top: 0;
	font-size: 11px;
}

.app-footer img { height: 14px; }

/* ---------- The ☰ sheet (8b v2) ---------- */

/* Opened, the page behind stays put. */
body:has(.m-sheet) { overflow: hidden; }

/* cursor: pointer makes iOS Safari treat the plain div as clickable, so a tap sends the click Blazor listens
   for on the document (it does not for a div it thinks inert); no grey tap flash. */
.m-sheet-backdrop {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(15, 34, 54, .42);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.m-sheet {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 91;
	max-height: 100vh;
	max-height: 100dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--surface);
	border-radius: 0 0 20px 20px;
	box-shadow: 0 12px 40px rgba(15, 34, 54, .25);
}

/* The items, Overview first (8b v2): 50px rows 2px apart, a 7px dot slot, the label, a chevron. */
.m-sheet-nav { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; }

.m-sheet-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	height: 50px;
	padding: 0 14px;
	border: 0;
	border-radius: 10px;
	background: none;
	font: 500 15.5px var(--font-ui);
	color: var(--ink);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: var(--ease-ui);
}

.m-sheet-item .m-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.m-sheet-item .m-label { flex: 1; min-width: 0; }
.m-sheet-item .m-chev { flex: none; color: var(--zero); transition: transform 120ms ease; }

/* The section the page belongs to: the 6a active pill, with the orange dot. */
.m-sheet-item.active {
	background: var(--active-nav-bg);
	box-shadow: inset 0 0 0 1px var(--active-nav-ring);
	font-weight: 600;
	color: var(--navy);
}

.m-sheet-item.active .m-dot { background: var(--orange); }
.m-sheet-item.active .m-chev { color: #9FB4C8; }

/* A menu opened in place: its chevron turns down. */
.m-sheet-item[aria-expanded="true"] .m-chev { transform: rotate(90deg); }
.m-sheet-item[aria-expanded="true"]:not(.active) { background: var(--surface-hover); }

/* A menu's items (the desktop dropdown's), indented under its row. */
.m-sheet-sub { display: flex; flex-direction: column; padding: 2px 4px 8px 33px; }

.m-sheet-sub a,
.m-sheet-sub button {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 0;
	border-radius: 8px;
	background: none;
	font: 400 15px/1.35 var(--font-ui);
	color: var(--ink-body);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.m-sheet-sub a:active,
.m-sheet-sub button:active { background: var(--surface-hover); }

.m-sheet-sub button:disabled { color: var(--text-quiet); cursor: default; }

.m-sheet-sub .list-caption { margin: 10px 12px 2px; }

.m-sheet-sub hr { width: calc(100% - 24px); margin: 6px 12px; border: 0; border-top: 1px solid var(--rule); }

.m-sheet-sub .menu-help { font-size: 14px; font-weight: 500; color: var(--navy); }

/* Help and Account (8b v2): after a rule, two rows that open in place to every item of the desktop
   header's Help and account dropdowns. Below them the sheet keeps the 16px the mock ends with (its grey
   design note is not drawn). */
.m-sheet-more {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px 8px 22px;
	border-top: 1px solid var(--rule);
}

/* Help: an 18px question mark in the dot's place. */
.m-sheet-item .m-icon { flex: none; display: flex; color: var(--text-quiet); }

/* Account: a 30px avatar, the name with "Account" under it, in a 56px row. */
.m-sheet-item.m-sheet-account { height: auto; min-height: 56px; }

.m-avatar-sm { width: 30px; height: 30px; border-radius: 8px; font-size: 11.5px; }

.m-sheet-account-name {
	display: block;
	font: 500 15.5px var(--font-ui);
	color: var(--ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.m-sheet-account-caption { display: block; font: 400 12px var(--font-ui); color: var(--text-secondary); }

/* Their chevrons point down, and up while the row is open. */
.m-sheet-more .m-sheet-item[aria-expanded="true"] .m-chev { transform: rotate(180deg); }

/* Their items start 12px in from the row's label, as the nav menus' do (14px + icon + 12px gap). */
.m-sheet-sub.m-sheet-help-items { padding-left: 44px; }
.m-sheet-sub.m-sheet-account-items { padding-left: 56px; }

.m-sheet-email { padding: 4px 12px 6px; font-size: 13px; color: var(--text-secondary); overflow-wrap: anywhere; }

/* ---------- Dialogs (Components/Modals) as full-width sheets ----------
   Each dialog rises from the bottom edge, full width, at most the screen's height less 12px; its header
   and footer stay put and its body or list scrolls. Close and every button are 44px targets or more, the
   footer buttons 48px and side by side. Data Detail (.modal-xl) has its own phone layout in
   data-detail.css, so none of this touches it. */
.modal-backdrop:has(> .modal:not(.modal-xl)) {
	align-items: flex-end;
	padding: 12px 0 0;
}

/* Any dialog open (Data Detail too): the page behind stays put, anything wider than the screen behind it can't
   widen the layout viewport (and with it the fixed sheet), and a body or list scrolled to its end doesn't hand
   the scroll on to the page (nor, on iOS, resize the toolbar and with it the 100dvh sheet). */
html:has(.modal-backdrop),
html:has(.modal-backdrop) > body { overflow: hidden; }

.modal:not(.modal-xl),
.modal:not(.modal-xl) :is(.modal-body, .modal-list) { overscroll-behavior: contain; }

/* A tap on the backdrop strip reaches Blazor on iOS (see .m-sheet-backdrop); the dialog itself keeps the
   default cursor, so its text and spaces don't count as clickable. */
.modal-backdrop { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.modal-backdrop > .modal { cursor: auto; }

.modal-backdrop > .modal:not(.modal-xl) {
	width: 100% !important; /* the dialogs set their desktop width inline */
	max-width: 100%;
	max-height: calc(100vh - 12px);
	max-height: calc(100dvh - 12px);
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -8px 32px rgba(15, 34, 54, .18);
}

/* A dialog with a search box (Select Program) is the full height from the start: as the list filters down it
   doesn't shrink and drop its search box behind the on-screen keyboard; the list takes the room and scrolls. */
.modal-backdrop > .modal:not(.modal-xl):has(> .modal-search) {
	height: calc(100vh - 12px);
	height: calc(100dvh - 12px);
}

.modal:not(.modal-xl) > :is(.modal-header, .modal-search, .modal-footer) { flex: none; }

.modal:not(.modal-xl) .modal-header { gap: 10px; min-height: 57px; padding: 6px 8px 6px 16px; }
.modal:not(.modal-xl) .modal-header h2 { font-size: 18px; }
.modal:not(.modal-xl) .modal-header:has(.eyebrow) { padding-top: 12px; padding-bottom: 12px; }

.modal:not(.modal-xl) .modal-close {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	font-size: 26px;
	line-height: 1;
}

.modal:not(.modal-xl) .modal-body { padding: 16px; }
.modal:not(.modal-xl) .modal-search { padding: 16px 16px 8px; }
.modal:not(.modal-xl) .modal-search label { font-size: 13px; }
.modal:not(.modal-xl) .search-box input { height: 48px; padding-left: 38px; }

/* Select Program: the list takes the room the screen has. */
.modal:not(.modal-xl) .modal-list { flex: 1 1 auto; max-height: none; padding: 8px 8px 4px; }

.modal:not(.modal-xl) .list-row {
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
	min-height: 52px;
	padding: 10px 12px;
}

.modal:not(.modal-xl) .list-row .row-name { font-size: 15px; }
.modal:not(.modal-xl) .list-row .row-meta { font-size: 12.5px; white-space: normal; }

/* Footer: the help link on its own line, then the buttons, side by side and equal. */
.modal:not(.modal-xl) .modal-footer {
	flex-wrap: wrap;
	gap: 8px 12px;
	padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
	border-radius: 0;
}

.modal:not(.modal-xl) .footer-help { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }

.modal:not(.modal-xl) .footer-actions { flex: 1 1 100%; flex-wrap: wrap; gap: 10px; }

.modal:not(.modal-xl) .footer-actions > :is(button, a) {
	flex: 1 1 0;
	min-width: fit-content;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
}

.modal:not(.modal-xl) :is(.btn-secondary, .btn-primary-sm) { min-height: 44px; font-size: 15px; }

/* Set Date Range: the two modes stacked, 44px presets, each From/To row's selects under its label. */
.modal:not(.modal-xl) .mode-cards { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.modal:not(.modal-xl) .mode-card { padding: 14px; }
.modal:not(.modal-xl) .mode-text strong { font-size: 15px; }
.modal:not(.modal-xl) .mode-text span { font-size: 13px; }
.modal:not(.modal-xl) .radio-dot { width: 20px; height: 20px; }
.modal:not(.modal-xl) .radio-dot.on { border-width: 6px; }

.modal:not(.modal-xl) .chip { height: 44px; padding: 0 16px; border-radius: 22px; font-size: 14px; }

.modal:not(.modal-xl) .date-row { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.modal:not(.modal-xl) .date-label { flex: 1 1 100%; }
.modal:not(.modal-xl) .date-row select { flex: 1 1 0; min-width: 0; height: 48px; }
.modal:not(.modal-xl) .date-row select[aria-label$="month"] { flex-grow: 1.7; }

.modal:not(.modal-xl) .confirm-line { font-size: 13.5px; line-height: 1.5; }

/* The analysis dialogs' two-column pickers (Key Performers, Comparison, Correlation, Locate, Quick
   View drill, Drill Down) and the e-mail recipients: one column, 44px choices. */
.modal:not(.modal-xl) :is(.kp-grid, .dd-grid, .em-recipients) { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.modal:not(.modal-xl) .kp-list { max-height: 264px; }
.modal:not(.modal-xl) .kp-option { min-height: 44px; padding: 8px 10px; font-size: 15px; }
.modal:not(.modal-xl) .dd-inline { flex-wrap: wrap; }

.modal:not(.modal-xl) :is(.rdo-check, .te-check, .hs-check, .tr-mask) { min-height: 44px; font-size: 15px; }

.modal:not(.modal-xl) :is(.kp-option, .rdo-check, .te-check, .hs-check, .tr-mask) input:is([type="checkbox"], [type="radio"]) {
	flex: none;
	width: 20px;
	height: 20px;
}

.modal:not(.modal-xl) .em-message { min-height: 120px; }