@charset "utf-8";
/* ── Theme palette ──────────────────────────────────────────────────
   Central set of theme tokens referenced by this shared stylesheet.
   Only colors that repeat as real "chrome" (nav, hover states, panel
   backgrounds, shared borders/text) are tokenized here -- one-off
   decorative colors on individual elements are left as literals. A
   per-user theme overrides these by emitting a small <style> block
   (or inline style="--theme-...") ahead of this file that redefines
   whichever of these custom properties the chosen theme changes. */
:root {
	/* Page structure */
	--theme-page-bg: rgb(123, 192, 192);
	--theme-panel-bg: #DEFEF9;
	--theme-panel-bg-alt: #EEE;
	--theme-tab-bg: #99CACC;

	/* Brand / nav */
	--theme-brand: #0ABAB5;
	--theme-nav-bg: #009;
	--theme-nav-border: #36f;
	--theme-nav-divider: #336;

	/* Interactive states */
	--theme-hover-bg: #9cf;
	--theme-active-bg: #97fdfa;
	--theme-focus-bg: #ffc;
	--theme-sidebar-bg: #ffd;
	--theme-accent-strong: #369;

	/* Text */
	--theme-text-primary: #000;
	--theme-text-on-dark: #FFF;
	--theme-text-muted: #555;

	/* Borders */
	--theme-border-muted: #ccc;
	--theme-border-strong: #999;

	/* Status */
	--theme-danger: #F00;
	--theme-danger-light: #F99;

	/* Popup dialogs (jQuery UI .dialog()) */
	--theme-dialog-header-bg: #009;
	--theme-dialog-bg: #DEFEF9;

	/* Status + neutral surfaces (added 2026-10-02) */
	--theme-success: #007700;
	--theme-success-bg: #ccffcc;
	--theme-warning: #886600;
	--theme-warning-bg: #fff3cd;
	--theme-danger-text: #cc0000;
	--theme-card-bg: #ffffff;
	--theme-border-subtle: #e8e8e8;
}

body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
/*	background: #699; */
	background: var(--theme-page-bg);
	margin: 0;
	padding: 0;
	color: var(--theme-text-primary);
}

ul, ol, dl {
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	padding-right: 15px;
	padding-left: 15px;
	margin-bottom: 0px;
}
h1 {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	font-size: 24pt;
	color: var(--theme-text-on-dark);
	text-align: center;
	font-style: italic;
/*	font-weight:bold; */
	/* No padding-top/bottom -- .header's fixed height + flex centering below
	   place it vertically now, so its rendered height stays deterministic
	   (needed for .nav's own top offset, see .header/.nav below). h1 is used
	   nowhere but this one page-title banner across the whole app. */
	margin: 0px;
}

a img {
	border: none;
}

a:link {
	color: var(--theme-text-primary);
	text-decoration: underline;
}
a:visited {
	color: var(--theme-text-muted);
	text-decoration: underline;
}
a:hover, a:active, a:focus {
	text-decoration: none;
}
br {
	clear: right;
	float: none;
}
hr {
	margin: 3px 4px;
	padding: 0;
	clear: left;
}
input {
	font: 100% Verdana, Arial, Helvetica, sans-serif ;
}
input:focus {
	background-color: var(--theme-focus-bg);
/*	font: 100% Verdana, Arial, Helvetica, sans-serif; */
}
select {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
}
select:focus {
	background-color: var(--theme-focus-bg);
/*	font: 100% Verdana, Arial, Helvetica, sans-serif; */
}
textarea {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
}
textarea:focus {
	background-color: var(--theme-focus-bg);
/*	font: 100% Verdana, Arial, Helvetica, sans-serif; */
}
button {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
}

.container {
	width: 100%;
	background: var(--theme-panel-bg);
	margin-right: auto;
	margin-left: auto;
	/* Neither .sidebar (position:fixed -- out of flow entirely) nor
	   .contentWithSidebar (float:right) contributes to a plain block
	   parent's height, so without this .container (and therefore body,
	   whose own height .header's position:sticky is bounded by -- a sticky
	   element can't stick past its parent's box) collapsed to roughly
	   .header+.nav's height on any page that didn't happen to have a
	   later clear:both sibling (.footer, below) to force it open --
	   .header still looked fine pre-sticky since collapsed-but-visible
	   floats aren't clipped, but it broke .header/.nav's stickiness the
	   instant they needed real room to stick within. flow-root (not
	   overflow:hidden) contains the floats without becoming a scrolling
	   ancestor, which would otherwise wrongly capture any position:sticky
	   descendant instead of letting it stick to the whole page (same
	   .tab_content gotcha documented in Quote.css/SalesSvcOrd.css). */
	display: flow-root;
}

.header {
	background-color: var(--theme-brand);
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	/* Sticky page banner, pinned to the top of the viewport down through
	   .nav right below it (its own top offset is this height, see .nav) --
	   both stay visible while the page content scrolls underneath, the same
	   persistent-chrome treatment .sidebar already gets (position:fixed,
	   below). An explicit height (rather than relying on h1's own
	   padding/line-height) keeps this fully deterministic so .nav's offset
	   can be a plain pixel value instead of something measured at runtime. */
	height: 60px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	position: sticky;
	top: 0;
	z-index: 95;   /* just above .sidebar's 90 (see its own comment on the z-index tiers in use); comfortably below flyouts (200) and jQuery UI (.ui-front: 100; dialogs: 9999+) */
}
/* Header logos: tba-header-logo.png (center, in the h1) and
   tba-header-mark.png (left/right corners). Both are pre-cropped to their
   artwork with real transparency, at 2x the display sizes below for
   high-DPI screens; source art is tba-wide.png / tba-square-logo.png.
   The *_pill classes put a white rounded background behind each logo --
   drop hdr_wide_pill from the h1, or hdr_logo_pill's background/padding,
   to show a logo directly on the header color instead. */
.header h1.hdr_wide { line-height: 0; padding: 0; }
.hdr_wide img { display: block; width: 390px; height: 47px; }
.hdr_logo { position: absolute; top: 8px; line-height: 0; }
.hdr_logo img { display: block; width: 99px; height: 36px; }
.hdr_logo_left { left: 16px; }
.hdr_logo_right { right: 16px; }
.header h1.hdr_wide_pill,
.hdr_logo_pill { padding: 4px 10px; background: #fff; border-radius: 8px; }
/* Corner logos collide with the centered one below ~680px (16px inset +
   119px corner pill on each side of the 410px center pill), so hide them
   under 700px and let the center logo stand alone. */
@media (max-width: 699px) {
	.hdr_logo { display: none; }
}
.nav {
	width: 100%;
	text-align:center;
	background-color: var(--theme-nav-bg);
	font-size: 13pt;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	/* Sticks right below .header (60px, see above) so the two form one
	   continuous pinned strip at the top of the viewport. */
	position: sticky;
	top: 60px;
	z-index: 94;
}
/* Icon in front of a navbar tab's label (std2.js g_nav_tab_icons) -- its
   SVG strokes with currentColor, so it matches the tab's own text color. */
.nav_tab_icon { display: inline-block; line-height: 0; margin-right: 5px; vertical-align: -0.15em; }
.nav_tab_icon svg { width: 1em; height: 1em; }
.nav_tabs {
	display: flex;
	justify-content: center;
	background-color: var(--theme-nav-bg);
}
.nav_tab, .nav_tab_act, .nav_tab_first {
	background-color: var(--theme-nav-bg);
	border-right-width: 1px;
	border-right-color: var(--theme-text-on-dark);
	color: var(--theme-text-on-dark);
	float:left;
	border-right-style: solid;
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 2px;
	padding-bottom: 3px;
	position: relative;  /* anchor for flyout menu */
}
.nav_tab_first {
	border-left-width: 1px;
	border-left-style: solid;
}
.nav_tab:hover, .nav_tab_first:hover {
	background-color: var(--theme-hover-bg);
	color: var(--theme-text-primary);
	cursor: pointer;
}

/* ── Top nav flyout menus ──────────────────────────────────────────── */
.nav_tab_flyout {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 190px;
	background-color: var(--theme-nav-bg);
	border: 1px solid var(--theme-nav-border);
	border-top: none;
	z-index: 200;
	box-shadow: 3px 4px 8px rgba(0,0,0,0.35);
}
.nav_tab:hover .nav_tab_flyout,
.nav_tab_first:hover .nav_tab_flyout {
	display: block;
}
.nav_flyout_item {
	display: block;
	position: relative;
	padding: 5px 12px;
	color: var(--theme-text-on-dark);
	cursor: pointer;
	white-space: nowrap;
	border-bottom: 1px solid var(--theme-nav-divider);
	font-size: 90%;
	text-align: left;   /* override .nav's inherited text-align:center */
}
.nav_flyout_item:last-child {
	border-bottom: none;
}
.nav_flyout_item:hover {
	background-color: var(--theme-hover-bg);
	color: var(--theme-text-primary);
}
.nav_flyout_has_sub::after {
	content: " \25BA";
	float: right;
	padding-left: 8px;
}
.nav_sub_flyout {
	display: none;
	position: absolute;
	top: 0;
	left: 100%;
	min-width: 190px;
	background-color: var(--theme-nav-bg);
	border: 1px solid var(--theme-nav-border);
	z-index: 201;
	box-shadow: 3px 4px 8px rgba(0,0,0,0.35);
}
/* Direct-child combinator, not descendant -- a level-4 nav entry (e.g.
   perms.cpp's "Data Import" > "QuickBooks" > "QuickBooks Import") nests a
   second .nav_sub_flyout inside the first, since buildFlyoutHtml() (std2.js)
   reuses the same classes at every depth. A plain descendant selector here
   would match that inner .nav_sub_flyout too while only the outer item
   (Data Import) is hovered, popping open a grandchild's children early --
   same fix already applied to .tile_flyout_item:hover > .tile_flyout below. */
.nav_flyout_item:hover > .nav_sub_flyout {
	display: block;
}
.nav_sub_flyout_item {
	display: block;
	padding: 5px 12px;
	color: var(--theme-text-on-dark);
	cursor: pointer;
	white-space: nowrap;
	border-bottom: 1px solid var(--theme-nav-divider);
	font-size: 90%;
	text-align: left;   /* override .nav's inherited text-align:center */
}
.nav_sub_flyout_item:last-child {
	border-bottom: none;
}
.nav_sub_flyout_item:hover {
	background-color: var(--theme-hover-bg);
	color: var(--theme-text-primary);
}
.nav_tab a {
	color: var(--theme-text-on-dark);
	text-decoration: none;
}
.nav_tab_first a {
	color: var(--theme-text-on-dark);
	text-decoration: none;
}
.nav_tab_act {
	background-color: var(--theme-hover-bg);
	color: var(--theme-text-primary);
	text-decoration: none;
}
.nav_tab_act a {
	color: var(--theme-text-primary);
	text-decoration: none;
}
.nav_spacer {
	width: 100%;
	font-size: 75%;
}
.sidebar {
	float: left;
	width: 10%;
	position:fixed;
	/* Without its own z-index, position:fixed still starts a stacking
	   context but at "auto" priority -- any descendant's z-index (e.g.
	   .side_flyout_body's 200 below) only ranks within THIS context, it
	   doesn't let the sidebar itself outrank a sibling stacking context
	   elsewhere on the page. SalesSvcOrd.css's/Quote.css's sticky line-item
	   header (.sol_line_head_sticky, z-index: 5) is exactly such a sibling
	   context, and an explicit positive z-index beats "auto" -- so without
	   this, that sticky header painted over the sidebar's open flyout menu
	   once scrolled. Comfortably above every in-page sticky/dropdown z-index
	   in use (5, 50) and below .header/.nav's own sticky page banner (94/95,
	   above) and jQuery UI's own (.ui-front: 100; dialogs: 9999+), which
	   still render on top via later DOM order either way. */
	z-index: 90;
	background-color: var(--theme-sidebar-bg);
	padding-top: 10px;
	padding-bottom: 25px;
	margin: 0px;
}
.side_exit {
	float: left;
	Width: 100%;
	text-align:left;
	margin-top: 2px;
	margin-bottom: 2px;
	padding-top: 1px;
	padding-bottom: 1px;
	padding-left: 5px;
	margin-right: 0px;
}
.side_exit:hover {
	background-color: var(--theme-border-muted);
	cursor: pointer;
	padding-left: 0px;
}
.side_head {
	float: left;
	Width: 100%;
	background-color: var(--theme-brand);
	text-align:center;
	margin-top: 1px;
	margin-bottom: 2px;
	padding-top: 1px;
	padding-bottom: 1px;
}
.side_item, .side_item_act, .side_item_gray {
	float: left;
	width: 100%;
	text-align:center;
	margin-top: 2px;
	margin-bottom: 2px;
	padding-top: 1px;
	padding-bottom: 1px;
}
.side_item a {
	text-decoration: none;
	color: var(--theme-text-primary);
}
.side_item:hover, .side_exit:hover {
	background-color: var(--theme-hover-bg);
	cursor: pointer;
}
.side_item_act {
	background-color: var(--theme-active-bg);
}
.side_item_gray {
	color: var(--theme-border-strong);
}

/* ── Sidebar flyout groups ─────────────────────────────────────────── */
/* Mirrors .nav_sub_flyout's sideways-hover technique (top nav bar) rather
   than .nav_tab_flyout's downward one -- the sidebar is a vertical list on
   the left edge, so its flyouts fly out to the right, not down. */
.side_flyout {
	position: relative;
}
.side_flyout::after {
	content: " \25B8";
	padding-left: 4px;
}
.side_flyout_body {
	display: none;
	position: absolute;
	top: 0;
	left: 100%;
	min-width: 160px;
	background-color: var(--theme-sidebar-bg);
	border: 1px solid var(--theme-border-strong);
	z-index: 200;
	box-shadow: 3px 4px 8px rgba(0,0,0,0.35);
}
.side_flyout:hover > .side_flyout_body {
	display: block;
}
.side_button_div {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 2px;
	padding: 10px;
}
.side_button {
	float: left;
	padding: 2px 2px;
	width: 140px;
	margin: auto;
	text-align: center;
}
.side_button:hover, .side_button_div:hover {
	background-color: var(--theme-hover-bg);
/*	color: #FFF; */
	cursor: pointer;
}
/* ── Tile flyout menus (SetupMenu.html / Home.html) ────────────────── */
/* Same box treatment as .side_flyout_body above (--theme-sidebar-bg /
   --theme-border-strong, flies out to the right), but for a tile's hover
   flyout instead of a sidebar item's. Built by std2.js's buildFlyoutHtml()
   with these class names, at any depth -- a nested (second-stage) flyout
   reuses .tile_flyout itself, so it looks identical to the first stage
   rather than switching palettes. */
.tile_flyout {
	display: none;
	position: absolute;
	top: 0;
	left: 100%;
	min-width: 210px;
	background-color: var(--theme-sidebar-bg);
	border: 1px solid var(--theme-border-strong);
	z-index: 200;
	box-shadow: 3px 4px 8px rgba(0,0,0,0.35);
}
/* Opens leftward instead of rightward -- applied by JS (positionTileFlyout()
   in std2.js) when a trigger is close enough to the right edge of the
   viewport that the default left:100% placement would run off-page. */
.tile_flyout.tile_flyout_left {
	left: auto;
	right: 100%;
}
.tile_flyout_item {
	display: block;
	position: relative;
	padding: 8px 14px;
	color: var(--theme-text-primary);
	cursor: pointer;
	white-space: nowrap;
	border-bottom: 1px solid var(--theme-border-muted);
	text-align: left;
}
.tile_flyout_item:last-child {
	border-bottom: none;
}
.tile_flyout_item:hover {
	background-color: var(--theme-hover-bg);
}
/* Reveal a second-stage (nested) flyout on hover of the item that owns it --
   the first-stage flyout itself is revealed by each page's own
   ".tile_menu_tile:hover > .tile_flyout" / ".setup_tile:hover > .tile_flyout"
   rule (TileMenu.css/SetupMenu.css), but nothing previously revealed a *nested*
   flyout when hovering the item inside it that opens it (e.g. "Company"
   inside the Setup tile's flyout, whose own Users/Sites sub-list stayed
   display:none forever) -- real bug, found while adding the edge-flip
   behavior below. This rule is generic to any depth, since buildFlyoutHtml()
   reuses the same .tile_flyout_item/.tile_flyout classes at every level. */
.tile_flyout_item:hover > .tile_flyout {
	display: block;
}
/* An item that opens a second-stage flyout (e.g. SetupMenu's headings-
   within-a-tile precedent doesn't need this -- it only ever appears one
   level down, on Home.html tiles whose first-stage item is itself a nav
   heading, like "Company" inside the Setup tile) shows its arrow
   icon inline, right after the label, rather than a floated ::after
   character. */
.tile_flyout_has_sub {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.tile_flyout_arrow {
	flex: none;
	margin-left: 10px;
	color: var(--theme-text-muted);
}
.tile_flyout_arrow svg {
	width: 12px;
	height: 12px;
	display: block;
}

/* Wider variant of .side_button that sizes to its text and never wraps --
   used by the Utility Menu dialog (std.js), whose items ("Change current
   site", "Reload permissions") are too long for .side_button's fixed
   140px width. */
.side_button_wide {
	float: none;
	display: inline-block;
	padding: 2px 10px;
	width: auto;
	white-space: nowrap;
	margin: auto;
	text-align: center;
}
.sub-title-spacer {
	width: 170px;
	float: left;
	padding-top: 2px;
}
.sub-title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 24px;
	text-align: center;
	font-weight: bold;
	color: var(--theme-text-primary);
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	height: auto;
}
.contentHeader {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 28px;
	float: left;
	width: 780px;
	text-align: center;
	font-weight: bold;
	margin: 0px;
	background-color: #00F;
	color: var(--theme-text-on-dark);
}

.content {
/*	width: 90%; */
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	float: left;
}
.contentWithSidebar {
	width: 90%;
	background: var(--theme-panel-bg);
	margin-right: auto;
	margin-left: auto;
	float: right;
}
.tab_spacer {
	position: relative;
	width: 25px;
	float: left;
}
.tab_image_active {
	position: relative;
	height: 25px;
	margin: 0px 0px -1px 0px;
	float: left;
	padding: 0px;
	border: none;
	top: 2px;
}
.tab_active {
	position: relative;
	top: 1px;
	float: left;
	padding-left: 10px;
	padding-right: 10px;
	margin: 0px 0px -1px 0px;
	background-color: var(--theme-tab-bg);
	list-style: none;
	border-top: solid 1px var(--theme-border-strong);
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	cursor: pointer;
	height: 25px;
}
.tab {
	position: relative;
	top: 1px;
	float: left;
	padding-left: 10px;
	padding-right: 10px;
	margin: 0px;
	background-color: var(--theme-panel-bg-alt);
	list-style: none;
	border-bottom: solid 1px var(--theme-border-strong);
	border-top: solid 1px var(--theme-border-strong);
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	cursor: pointer;
	height: 24px;
}
.tab_gray {
	position: relative;
	top: 1px;
	float: left;
	padding-left: 10px;
	padding-right: 10px;
	margin: 0px;
	background-color: var(--theme-panel-bg-alt);
	list-style: none;
	border-bottom: solid 1px var(--theme-border-strong);
	border-top: solid 1px var(--theme-border-strong);
	user-select: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	cursor: pointer;
	height: 24px;
	color: var(--theme-border-strong);
}
.tab_image {
	position: relative;
	height: 24px;
	margin: 0px;
	float: left;
	padding: 0px;
	border: none;
	top: 2px;
}
.tab:hover, .tab_image_active:hover, .tab_active:hover {
	background: var(--theme-hover-bg);
	color: var(--theme-text-on-dark);
}
.tab a {
	color: var(--theme-text-primary);
	text-decoration: none;
}
.tab_content {
	width: 100%;
	border-left: solid 1px var(--theme-border-muted);
	border-bottom: solid 1px var(--theme-border-muted);
	border-top: solid 1px var(--theme-border-strong);
	border-right: solid 1px var(--theme-border-strong);
	background-color: var(--theme-tab-bg);
	overflow: hidden;
	margin: 0px 0px 10px 0px;
	padding: none;
	padding-bottom: 10px;
	clear: both;
}
.footer {
	padding: 10px 0;
	width: 100%;
	background: var(--theme-brand);
/*	position: relative; */
	clear: both;
	text-align: center;
}
.form_alert_msg {
	color: var(--theme-danger);
	display: inline;
	margin-left: 5px;
	padding: 2px 5px;
	border-top: 1px solid var(--theme-danger);
	border-right: 2px solid var(--theme-danger-light);
	border-bottom: 2px solid var(--theme-danger);
	border-left: 1px solid var(--theme-danger-light);
}
.status {
	float: left;
	padding-left: 5px;
	color: var(--theme-danger);
}

/* ── photo.js shared styles ─────────────────────────────────────────────── */
.pm-row {
    display: flex;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid var(--theme-border-muted);
    min-height: 70px;
}
.pm-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    margin: 0 8px;
    border: 1px solid var(--theme-border-muted);
}
.pm-label {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
}
.pm-drop-zone {
    border: 2px dashed var(--theme-border-strong);
    border-radius: 6px;
    padding: 20px 14px;
    text-align: center;
    color: var(--theme-text-muted);
    cursor: pointer;
    margin-bottom: 8px;
}
.pm-drop-zone:hover,
.pm-drop-zone.pm-dragover {
    border-color: var(--theme-accent-strong);
    background-color: var(--theme-hover-bg);
}
.pm-file-info {
    font-style: italic;
    color: var(--theme-text-muted);
    margin-bottom: 4px;
}
.pm-progress-bar {
    height: 18px;
    background-color: var(--theme-border-muted);
    border-radius: 4px;
    margin-bottom: 4px;
    overflow: hidden;
}
.pm-progress-fill {
    height: 100%;
    width: 0%;
    background-color: #4a90d9;
    text-align: center;
    color: white;
    font-size: 12px;
    line-height: 18px;
    transition: width 0.2s;
}
#pm-upload-status {
    min-height: 1.2em;
}

/* ── Attachment manager tabs (Photos/Files) ───────────────────────────────
   The dialog's generic "a" color rule above (text-primary) also hits the tab
   anchors, which jquery-ui.css paints on its own light ui-state-default tile
   -- so on a dark theme the label was light-on-light. Tabs get theme tokens
   explicitly, scoped to #am-tabs so no other tabs widget is touched. */
#am-tabs .ui-tabs-nav li.ui-state-default {
    background: var(--theme-panel-bg-alt);
    border-color: var(--theme-border-strong);
}
#am-tabs .ui-tabs-nav li.ui-state-default a {
    color: var(--theme-text-primary);
}
#am-tabs .ui-tabs-nav li.ui-state-active {
    background: var(--theme-dialog-header-bg);
    border-color: var(--theme-border-strong);
}
#am-tabs .ui-tabs-nav li.ui-state-active a {
    color: var(--theme-text-on-dark);
}
#am-tabs .ui-tabs-nav li.ui-state-hover:not(.ui-state-active) {
    background: var(--theme-hover-bg);
}
#am-tabs.ui-tabs, #am-tabs .ui-tabs-panel {
    background: transparent;
    color: var(--theme-text-primary);
}

/* ── Attachment manager — file list table ─────────────────────────────────── */
.am-files-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 8px;
}
.am-files-table th {
    text-align: left;
    border-bottom: 1px solid var(--theme-border-strong);
    padding: 3px 6px;
    background-color: var(--theme-panel-bg-alt);
}
.am-files-table td {
    padding: 4px 6px;
    border-bottom: 1px solid var(--theme-border-muted);
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.am-files-table tr:hover td {
    background-color: var(--theme-hover-bg);
}
#am-file-upload-status {
    min-height: 1.2em;
    font-size: 13px;
    margin-bottom: 2px;
}
/* Pagination */
#pagination_bar { clear: both; text-align: right; padding: 8px 0; }
.pag_info { display: block; font-size: 0.85em; color: var(--theme-text-muted); margin-bottom: 4px; }
.pag_nav { display: block; }
.pag_btn { display: inline-block; padding: 3px 8px; margin: 0 1px; border: 1px solid var(--theme-border-strong); background: var(--theme-panel-bg-alt); cursor: pointer; font-size: 0.9em; border-radius: 3px; }
.pag_btn:hover { background: var(--theme-hover-bg); }
.pag_current { background: var(--theme-accent-strong); color: var(--theme-text-on-dark); border-color: var(--theme-accent-strong); font-weight: bold; }
.pag_current:hover { background: var(--theme-accent-strong); }
.pag_disabled { color: var(--theme-border-strong); cursor: default; border-color: var(--theme-border-muted); }
.pag_disabled:hover { background: var(--theme-panel-bg-alt); }
.pag_size_sel { font-size: 0.85em; padding: 2px 4px; border: 1px solid var(--theme-border-strong); border-radius: 3px; cursor: pointer; margin-right: 8px; }

/* QuickStartWizard.html guided-sequence step reminder -- see std2.js's showWizardStepBanner() */
.wizard_step_banner {
	clear: both;
	margin: 6px 0 14px 0;
	padding: 8px 14px;
	background-color: #eef6ff;
	border: 1px solid var(--theme-hover-bg);
	border-radius: 4px;
	font-weight: bold;
	color: #036;
}

/* ── Popup dialogs (jQuery UI .dialog(), e.g. messageDialog()/std.js and
   every page's own editor/confirm/drill-down dialogs) ──────────────────
   jquery-ui.css's stock theme paints these via its own tiled gradient PNGs
   (.ui-widget-content/.ui-widget-header, an orange/tan "gloss" look) with
   no relation to this app's theme system at all. Overridden here with flat
   theme colors instead, matching this app's already-flat design language
   elsewhere (.tab_active, .nav, etc.) -- compound selectors (.ui-dialog.
   ui-widget-content, not bare .ui-widget-content) so this targets only the
   dialog widget's own box, not every other jQuery UI widget that happens to
   share those same generic classes (datepicker, buttons, tabs, ...). Button
   styling inside dialogs is left as jQuery UI's own default -- out of scope
   here, and shared with non-dialog widgets the same way. */
.ui-dialog.ui-widget-content {
	background: var(--theme-dialog-bg);
	border: 1px solid var(--theme-border-strong);
	/* jquery-ui.css's own .ui-widget-content sets color:#1e1b1d (a class
	   selector), which otherwise wins over this app's plain "body {color:
	   var(--theme-text-primary)}" element selector regardless of stylesheet
	   order (class beats element in specificity) -- left unset, dialog body
	   text stayed near-black no matter the theme, invisible on a dark
	   --theme-dialog-bg. */
	color: var(--theme-text-primary);
}
/* jQuery UI's dialog widget puts "ui-widget-content" on TWO elements: the
   .ui-dialog wrapper above, and this inner .ui-dialog-content div (the
   original element passed to .dialog(), which is where a page's actual
   content -- e.g. std.js's Utility Menu buttons -- lives). The color set
   above only reaches this div by inheritance, but .ui-dialog-content also
   directly carries jquery-ui.css's own ".ui-widget-content{color:#1e1b1d}",
   and a rule declared directly on an element always wins over an inherited
   value regardless of specificity -- so without this, dialog content text
   stayed near-black no matter the theme even after the fix above. */
.ui-dialog .ui-dialog-content {
	color: var(--theme-text-primary);
}
/* Same problem again, one level down: jquery-ui.css also directly declares
   ".ui-widget-content a{color:#1e1b1d}" -- a rule on the "a" element itself,
   not just inherited from .ui-dialog-content's own color -- so a plain link
   inside any dialog (e.g. std.js's Utility Menu "Open Task List") stayed
   near-black no matter the theme, invisible against a dark --theme-dialog-bg,
   even after the fix above. Confirmed live (Bert, 2026-09-23): visible on
   pages where some other, more specific selector happens to style that same
   link, invisible wherever a dialog's link has no such override. */
.ui-dialog .ui-dialog-content a {
	color: var(--theme-text-primary);
}
.ui-dialog .ui-dialog-titlebar.ui-widget-header {
	background: var(--theme-dialog-header-bg);
	color: var(--theme-text-on-dark);
	border: none;
}
/* The titlebar's close icon is a background-image sprite, not a text glyph
   -- jquery-ui.css's own ".ui-widget-header .ui-icon" rule already swaps in
   its white-on-dark variant for any icon nested inside a .ui-widget-header
   (which .ui-dialog-titlebar always carries), so it needs no override here. */

/* ── Datepicker calendar popup (jQuery UI .datepicker(), every date field
   app-wide) ─────────────────────────────────────────────────────────────
   Same problem and same fix as the dialog block above: jquery-ui.css paints
   this via its own tan/gloss .ui-widget-content/.ui-widget-header/.ui-state-*
   rules, unrelated to this app's theme. Reuses existing --theme-* tokens
   rather than adding calendar-only ones -- .ui-datepicker is a floating
   box with its own header bar, so it borrows the same tokens the dialog box
   above uses for that; hover/selected days borrow the same tokens as every
   other hover/active surface elsewhere in the app (.nav a:hover, .tab_active,
   etc.). All selectors are scoped under .ui-datepicker so none of this
   leaks into buttons/tabs/menus/etc., which share these same generic
   .ui-state-* classes for their own, still-default-themed look. */
/* Three classes (not two) deliberately -- .ui-datepicker always also
   carries ui-widget alongside ui-widget-content (jquery-ui.js's own
   _mainDivId markup), so a two-class ".ui-datepicker.ui-widget-content"
   would tie jquery-ui.css's own ".ui-widget.ui-widget-content" border rule
   on specificity, and jquery-ui.css -- loaded after this file on every page
   -- would win that tie and keep its stock border. */
.ui-datepicker.ui-widget.ui-widget-content {
	background: var(--theme-dialog-bg);
	border: 1px solid var(--theme-border-strong);
	color: var(--theme-text-primary);
}
.ui-datepicker .ui-widget-header {
	background: var(--theme-dialog-header-bg);
	color: var(--theme-text-on-dark);
	border: none;
}
/* Every day cell carries ui-state-default at rest (jquery-ui.css's stock
   theme tiles it with its own beige gradient) -- flattened here to match
   this app's flat design language elsewhere, same rationale as the dialog
   box's own background override above. */
.ui-datepicker .ui-state-default {
	background: transparent;
	border: 1px solid transparent;
	color: var(--theme-text-primary);
}
.ui-datepicker .ui-state-hover {
	background: var(--theme-hover-bg);
	border: 1px solid var(--theme-hover-bg);
	color: var(--theme-text-primary);
}
/* The selected date. */
.ui-datepicker .ui-state-active {
	background: var(--theme-active-bg);
	border: 1px solid var(--theme-active-bg);
	color: var(--theme-text-primary);
}
/* Today (when not also the selected date) -- deliberately NOT
   theme_hover_bg/theme_active_bg (those are meant to read as an
   interaction, not a fixed marker) and NOT theme_focus_bg (that token is
   reserved for form-field focus and stays light even in Dark Theme, on the
   assumption -- see theme.cpp's own ThemeLightColors comment -- that it's
   only ever seen behind an unthemed-black input text color; paired with
   this rule's themed text color instead, a Dark Theme could land light text
   on that same light background and go unreadable). theme_accent_strong is
   already used this same way for "the current one" elsewhere (.pag_current
   in pagination), paired with the same on-dark text color. */
.ui-datepicker .ui-state-highlight {
	background: var(--theme-accent-strong);
	border: 1px solid var(--theme-accent-strong);
	color: var(--theme-text-on-dark);
}

/* ── Time picker popup (jquery.timepicker.min.css/.js -- a separate,
   self-contained plugin from jQuery UI's own datepicker above, used
   wherever a page pairs a date field with a time field, e.g. Payment.html/
   Invoice.html/Item.html). Its own CSS ships fixed colors with no relation
   to this app's theme, same problem as the widgets above -- themed here by
   reusing the exact same selectors it defines (guarantees an equal-
   specificity match rather than needing a specificity-bumping trick like
   the datepicker override above) and the same --theme-* tokens the
   datepicker override above already settled on, so a themed date field and
   its paired time field read as one consistent widget. This only works
   because every page loading jquery.timepicker.min.css links it BEFORE this
   file -- on an equal-specificity tie the later stylesheet wins, so if that
   order is ever changed, these rules need the same specificity bump the
   datepicker override above did. */
.ui-timepicker-wrapper {
	background: var(--theme-dialog-bg);
	border: 1px solid var(--theme-border-strong);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.ui-timepicker-list li {
	color: var(--theme-text-primary);
}
.ui-timepicker-duration,
.ui-timepicker-list:hover .ui-timepicker-duration {
	color: var(--theme-text-muted);
}
/* While hovering the list overall, the item that's actually selected drops
   back to a plain look (so it doesn't visually compete with whatever's
   under the mouse) -- same "plain surface" this app's own panels use. */
.ui-timepicker-list:hover .ui-timepicker-selected {
	background: var(--theme-panel-bg);
	color: var(--theme-text-primary);
}
/* Selected time + hovered time -- same tokens as the datepicker's own
   selected-date override above (.ui-datepicker .ui-state-active). */
li.ui-timepicker-selected,
.ui-timepicker-list li:hover,
.ui-timepicker-list .ui-timepicker-selected:hover {
	background: var(--theme-active-bg);
	color: var(--theme-text-primary);
}
li.ui-timepicker-selected .ui-timepicker-duration,
.ui-timepicker-list li:hover .ui-timepicker-duration {
	color: var(--theme-text-muted);
}
.ui-timepicker-list li.ui-timepicker-disabled,
.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
	color: var(--theme-text-muted);
}
.ui-timepicker-list li.ui-timepicker-disabled:hover,
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
	background: var(--theme-panel-bg-alt);
}

/* "Set to now" clock icon (images/clock-small-icon20.png) -- used across
   Invoice/Quote/SalesSvcOrd/Payment/Po/TaskMin/ClientComms/VendorComms,
   both as a static <img> and JS-templated (.sol_clock/.tm_now_icon). It's
   a plain black PNG with a transparent surround, so on a dark custom theme
   it disappears into the background. Rather than patch every call site (or
   guess at a "this theme is dark" flag that doesn't exist -- see
   theme.hpp, themes are arbitrary per-token colors, not a light/dark pair),
   give it a small fixed-white badge here so it stays legible against any
   theme, targeted by its shared src so new call sites are covered for
   free. */
img[src="images/clock-small-icon20.png"] {
	background-color: #FFF;
	border-radius: 50%;
	padding: 1px;
}


/* ══ Mobile layout (phones) ═══════════════════════════════════════════
   Everything below is scoped to html.tba_mobile, which std.js sets only on
   pages listed in g_mobile_pages while window.innerWidth <= 700 and the user
   hasn't chosen the desktop layout. Without that class none of it applies,
   so desktop and not-yet-converted pages are unaffected. The navbar becomes
   a top bar + menu drawer, and the sidebar becomes a panel; both open
   from the left edge (never together) and are toggled by std.js. */
.nav_m_bar, .nav_m_drawer_head, .nav_m_self, #nav_m_backdrop { display: none; }

html.tba_mobile { -webkit-text-size-adjust: 100%; }

/* Header: shorter, smaller logo */
html.tba_mobile .header { height: 48px; }
html.tba_mobile .header h1.hdr_wide_pill { padding: 3px 8px; max-width: calc(100vw - 24px); box-sizing: border-box; }
html.tba_mobile .hdr_wide img { width: auto; max-width: 100%; height: 30px; }

/* Top bar (replaces the tab strip) */
html.tba_mobile .nav { top: 48px; z-index: 96; }
html.tba_mobile .nav_m_bar {
	display: flex;
	align-items: center;
	height: 44px;
	color: var(--theme-text-on-dark);
}
html.tba_mobile .nav_m_title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}
html.tba_mobile .nav_m_btn {
	flex: 0 0 44px;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: var(--theme-text-on-dark);
	font-size: 24px;
	line-height: 44px;
	padding: 0;
	cursor: pointer;
}
html.tba_mobile:not(.tba_has_sidebar) #nav_m_actions { visibility: hidden; }
/* Sidebar button on the left (where the sidebar lives on desktop), menu button on the right;
   both panels open from the left edge. */
html.tba_mobile #nav_m_actions { order: 0; }
html.tba_mobile .nav_m_title { order: 1; }
html.tba_mobile #nav_m_menu { order: 2; }

/* Drawer */
html.tba_mobile .nav_tabs {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: min(86vw, 320px);
	flex-direction: column;
	justify-content: flex-start;
	overflow-y: auto;
	box-shadow: 4px 0 12px rgba(0,0,0,0.4);
	text-align: left;
	/* Shown/hidden outright rather than slid in with a transform: on Android
	   Chrome a transformed, scrollable fixed panel painted only its title bar
	   (the menu items stayed blank; Firefox was fine). */
	display: none;
}
html.tba_mobile.tba_nav_open .nav_tabs { display: flex; }
html.tba_mobile .nav_m_drawer_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 6px 0 16px;
	height: 48px;
	flex: 0 0 auto;
	font-size: 18px;
	font-weight: bold;
	color: var(--theme-text-on-dark);
	border-bottom: 1px solid var(--theme-nav-divider);
}
html.tba_mobile .nav_m_close {
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: var(--theme-text-on-dark);
	font-size: 28px;
	cursor: pointer;
}
html.tba_mobile .nav_tab,
html.tba_mobile .nav_tab_first {
	float: none;
	width: 100%;
	box-sizing: border-box;
	position: static;
	padding: 14px 16px;
	border: 0;
	border-bottom: 1px solid var(--theme-nav-divider);
	text-align: left;
	font-size: 16px;
}
/* Expand arrows: ::before floated right (so it sits on the label's own line,
   ahead of the child list) replaces the desktop's ::after "►". */
html.tba_mobile .nav_tab.nav_m_has_kids::before,
html.tba_mobile .nav_tab_first.nav_m_has_kids::before,
html.tba_mobile .nav_flyout_has_sub::before { content: "\25BE"; float: right; }
html.tba_mobile .nav_tab.m_open::before,
html.tba_mobile .nav_tab_first.m_open::before,
html.tba_mobile .nav_flyout_has_sub.m_open::before { content: "\25B4"; }
html.tba_mobile .nav_flyout_has_sub::after { content: none; }
/* Tapping must not leave desktop :hover flyouts open on touch screens */
html.tba_mobile .nav_tab .nav_tab_flyout,
html.tba_mobile .nav_tab_first .nav_tab_flyout,
html.tba_mobile .nav_flyout_item .nav_sub_flyout { display: none; }
html.tba_mobile .nav_tab.m_open > .nav_tab_flyout,
html.tba_mobile .nav_tab_first.m_open > .nav_tab_flyout,
html.tba_mobile .nav_flyout_item.m_open > .nav_sub_flyout { display: block; }
html.tba_mobile .nav_tab_flyout,
html.tba_mobile .nav_sub_flyout {
	position: static;
	min-width: 0;
	margin: 14px -16px -14px;
	border: 0;
	box-shadow: none;
	background-color: rgba(0,0,0,0.15);
}
html.tba_mobile .nav_flyout_item {
	padding: 13px 16px 13px 30px;
	white-space: normal;
	font-size: 15px;
}
html.tba_mobile .nav_sub_flyout { margin: 13px -16px -13px -30px; }
html.tba_mobile .nav_sub_flyout .nav_flyout_item { padding-left: 46px; }
html.tba_mobile .nav_sub_flyout .nav_sub_flyout .nav_flyout_item { padding-left: 62px; }
html.tba_mobile .nav_m_self { display: block; font-style: italic; }
/* Touch screens keep :hover "stuck" on whatever was last tapped -- show
   press feedback with :active instead and leave the resting colors alone. */
html.tba_mobile .nav_tab:hover,
html.tba_mobile .nav_tab_first:hover {
	background-color: var(--theme-nav-bg);
	color: var(--theme-text-on-dark);
}
html.tba_mobile .nav_flyout_item:hover { background-color: transparent; color: var(--theme-text-on-dark); }
html.tba_mobile .nav_tab:active,
html.tba_mobile .nav_tab_first:active,
html.tba_mobile .nav_flyout_item:active { background-color: var(--theme-hover-bg); color: var(--theme-text-primary); }

/* Backdrop behind an open drawer/panel (below .nav's 96 and the panel's 97) */
html.tba_mobile.tba_nav_open #nav_m_backdrop,
html.tba_mobile.tba_side_open #nav_m_backdrop {
	display: block;
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	background: rgba(0,0,0,0.45);
	z-index: 95;
}

/* Sidebar -> left-hand panel (opened by the bar's vertical-dots button) */
html.tba_mobile .sidebar {
	float: none;
	top: 0;
	left: 0;
	right: auto;
	bottom: 0;
	width: min(80vw, 300px);
	box-sizing: border-box;
	overflow-y: auto;
	display: none;
	z-index: 97;
	padding-top: 10px;
	text-align: left;
}
html.tba_mobile.tba_side_open .sidebar { display: block; box-shadow: 4px 0 12px rgba(0,0,0,0.4); }
html.tba_mobile .side_exit,
html.tba_mobile .side_item,
html.tba_mobile .side_item_act,
html.tba_mobile .side_item_gray,
html.tba_mobile .side_head {
	box-sizing: border-box;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 12px;
	font-size: 16px;
	text-align: left;
}
html.tba_mobile .side_item:hover,
html.tba_mobile .side_exit:hover { background-color: transparent; padding-left: 12px; }
html.tba_mobile .side_item:active,
html.tba_mobile .side_exit:active { background-color: var(--theme-hover-bg); }
html.tba_mobile #util_menu_link { text-align: left !important; }
html.tba_mobile .side_flyout::after { content: none; }
html.tba_mobile .side_flyout::before { content: "\25BE"; float: right; padding-right: 12px; }
html.tba_mobile .side_flyout.m_open::before { content: "\25B4"; }
html.tba_mobile .side_flyout:hover > .side_flyout_body { display: none; }
html.tba_mobile .side_flyout.m_open > .side_flyout_body { display: block; }
html.tba_mobile .side_flyout_body {
	position: static;
	min-width: 0;
	border: 0;
	box-shadow: none;
	background-color: rgba(0,0,0,0.08);
	padding-left: 12px;
}

/* .tab_content is width:100% plus 1px borders -- 2px wider than the screen,
   which gave every page that uses it a sideways scroll */
html.tba_mobile .tab_content { box-sizing: border-box; }

/* Tab strips (client pages' Client/Quotes/Orders/Invoices/..., in-page tabs):
   the sloped-corner images can't wrap cleanly, so phones get plain rounded
   tab buttons instead; the current tab is filled. */
html.tba_mobile .tab_image,
html.tba_mobile .tab_image_active,
html.tba_mobile .tab_spacer { display: none; }
html.tba_mobile .tab,
html.tba_mobile .tab_active {
	top: 0;
	height: auto;
	min-height: 36px;
	box-sizing: border-box;
	margin: 4px 0 2px 4px;
	padding: 7px 10px;
	line-height: 1.2;
	font-size: 14px;
	border: 1px solid var(--theme-border-strong);
	border-radius: 18px;
}
html.tba_mobile .tab_active {
	background-color: var(--theme-nav-bg);
	color: var(--theme-text-on-dark);
	font-weight: bold;
}
html.tba_mobile .tab:hover { background-color: var(--theme-panel-bg-alt); color: inherit; }
html.tba_mobile .tab:active { background-color: var(--theme-hover-bg); }

/* Content fills the screen (the 10% sidebar column is gone) */
html.tba_mobile .content,
html.tba_mobile .contentWithSidebar { float: none; width: 100%; margin: 0; }
html.tba_mobile .contentHeader { float: none; width: 100%; font-size: 22px; }
html.tba_mobile .sub-title-spacer { display: none; }
html.tba_mobile .sub-title { font-size: 20px; }

/* Touch-friendly controls; 16px inputs stop iOS zooming in on focus */
html.tba_mobile input[type=text],
html.tba_mobile input[type=number],
html.tba_mobile input[type=password],
html.tba_mobile input[type=email],
html.tba_mobile input[type=tel],
html.tba_mobile input[type=date],
html.tba_mobile input:not([type]),
html.tba_mobile select,
html.tba_mobile textarea { font-size: 16px; min-height: 36px; box-sizing: border-box; max-width: 100%; }
html.tba_mobile button:not(.ui-dialog-titlebar-close):not(.ui-datepicker-trigger) { min-height: 40px; }

/* jQuery UI dialogs: always fit the screen, scroll inside, no dragging/resizing.
   !important overrides the inline width/left/top jQuery UI recomputes on open. */
html.tba_mobile .ui-dialog {
	position: fixed !important;
	left: 2vw !important;
	top: 3vh !important;
	width: 96vw !important;
	max-width: 96vw;
	max-height: 94vh;
	box-sizing: border-box;
}
/* Content scrolls inside, leaving room for the title bar and button pane
   (inline display from jQuery UI rules out a flex column here) */
html.tba_mobile .ui-dialog .ui-dialog-content {
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: calc(94vh - 130px) !important;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
html.tba_mobile .ui-dialog .ui-dialog-buttonpane button { margin: 4px; }
html.tba_mobile .ui-resizable-handle { display: none; }
html.tba_mobile .ui-datepicker { font-size: 16px; max-width: 96vw; }

/* Date and time pickers: bigger touch targets (phone layout only) */
html.tba_mobile .ui-datepicker { width: min(21em, 96vw); padding: 0.4em; }
html.tba_mobile .ui-datepicker .ui-datepicker-prev,
html.tba_mobile .ui-datepicker .ui-datepicker-next { width: 2.6em; height: 2.6em; top: 50%; margin-top: -1.3em; }
html.tba_mobile .ui-datepicker .ui-datepicker-prev span,
html.tba_mobile .ui-datepicker .ui-datepicker-next span { top: 50%; margin-top: -8px; }
html.tba_mobile .ui-datepicker td span,
html.tba_mobile .ui-datepicker td a { padding: 0.65em 0.2em; }
html.tba_mobile .ui-datepicker select.ui-datepicker-month,
html.tba_mobile .ui-datepicker select.ui-datepicker-year { min-height: 36px; width: 46%; }
html.tba_mobile .ui-timepicker-wrapper { max-height: 40vh; min-width: 9em; }
html.tba_mobile .ui-timepicker-list li { padding: 11px 24px 11px 12px; font-size: 16px; }

/* ── List pages as cards (phones). std.js mobileCardifyLists() marks the page
   (html.tba_cards), labels each cell from its column header (data-label) and
   flags empty / long cells. Invoice/Quote lists keep their own custom cards. ── */
html.tba_mobile.tba_cards .m_listhead { display: none; }
html.tba_mobile.tba_cards #line_div .m_card {
	float: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 8px 14px;
	box-sizing: border-box;
	width: 100%;
	padding: 10px 8px;
	border-bottom: 1px solid var(--theme-border-muted);
}
html.tba_mobile.tba_cards #line_div .m_card > div {
	float: none;
	clear: none;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	text-align: left;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	overflow-wrap: anywhere;
}
html.tba_mobile.tba_cards #line_div .m_card > div[data-label]:not([data-label=""])::before {
	content: attr(data-label);
	display: block;
	font-size: 11px;
	line-height: 1.2;
	color: var(--theme-text-muted);
}
html.tba_mobile.tba_cards #line_div .m_card > .m_empty { display: none; }
html.tba_mobile.tba_cards #line_div .m_card > .m_wide { grid-column: 1 / -1; }

/* ═══ Phone layout: address / email / phone / web dialogs ═══════════════════
   Shared by every page that carries these dialogs (Client, Vendor, People,
   Personnel -- same markup, same ids). jQuery UI already fits each dialog to
   the screen (above); these re-lay their fixed-pixel contents. ══════════════ */
/* Address list: arrows + the address text (tap the text to edit) */
html.tba_mobile .addr_listrow {
	display: flex;
	align-items: center;
	width: auto;
	line-height: 1.3;
	border-bottom: 1px solid var(--theme-border-subtle);
}
html.tba_mobile .move_updn { float: none; width: 44px; flex: 0 0 44px; padding: 0; text-align: center; line-height: 44px; }
html.tba_mobile .del { float: none; width: 44px; flex: 0 0 44px; text-align: center; line-height: 44px; }
html.tba_mobile .move_updn img, html.tba_mobile .del img { vertical-align: middle; }
html.tba_mobile .addr_list_data { float: none; flex: 1 1 0; width: auto; min-width: 0; line-height: 1.3; overflow: visible; padding: 8px 4px; }
html.tba_mobile .addr_list_str { float: none; width: auto; white-space: normal; line-height: 1.3; }

/* Email / phone / web lists: one card per entry. Controls and the Name box
   share the first line; the address/number/URL box takes the line below. */
html.tba_mobile #email-dialog > .email_listrow,
html.tba_mobile #web-dialog > .web_listrow,
html.tba_mobile #phone-dialog > .phone_listrow,
html.tba_mobile #email-dialog > hr,
html.tba_mobile #web-dialog > hr,
html.tba_mobile #phone-dialog > hr,
html.tba_mobile #email_line_div > br,
html.tba_mobile #web_line_div > br { display: none; }       /* the column-header row (the boxes carry their own labels) */
html.tba_mobile .email_listrow,
html.tba_mobile .web_listrow,
html.tba_mobile .phone_listrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: auto;
	line-height: 1.3;
	font-size: 0;                    /* collapses the rows' stray &nbsp; text */
	padding: 6px 0;
	border-bottom: 1px solid var(--theme-border-subtle);
}
html.tba_mobile .email_list_data,
html.tba_mobile .web_list_data,
html.tba_mobile .phone_list_data { display: contents; }
html.tba_mobile .email_list_name,
html.tba_mobile .web_list_name,
html.tba_mobile .phone_list_name { float: none; flex: 1 1 0; width: auto; min-width: 0; margin: 0; padding: 0 0 0 4px; text-align: left; overflow: visible; font-size: 16px; }
html.tba_mobile .email_list_email,
html.tba_mobile .web_list_url,
html.tba_mobile .phone_list_number { float: none; flex: 0 0 100%; width: auto; margin: 4px 0 0; padding: 0 4px; text-align: left; overflow: visible; font-size: 16px; box-sizing: border-box; }
html.tba_mobile .email_list_name::before,
html.tba_mobile .web_list_name::before,
html.tba_mobile .phone_list_name::before { content: "Name"; display: block; font-size: 12px; color: var(--theme-text-muted); }
html.tba_mobile .email_list_email::before { content: "Email address"; display: block; font-size: 12px; color: var(--theme-text-muted); }
html.tba_mobile .web_list_url::before { content: "Web address (URL)"; display: block; font-size: 12px; color: var(--theme-text-muted); }
html.tba_mobile .phone_list_number::before { content: "Number"; display: block; font-size: 12px; color: var(--theme-text-muted); }
html.tba_mobile .email_list_name input,
html.tba_mobile .web_list_name input,
html.tba_mobile .phone_list_name input,
html.tba_mobile .email_list_email input,
html.tba_mobile .web_list_url input,
html.tba_mobile .phone_list_number input { width: 100%; box-sizing: border-box; max-width: 100%; }

/* New/edit address: one column */
html.tba_mobile #addrNew-dialog { font-size: 0; }
html.tba_mobile #addrNew-dialog > * { font-size: 16px; }
html.tba_mobile #addrNew-dialog > br { display: none; }
html.tba_mobile .addrNew_delbtn { width: auto; text-align: right; clear: none; }
html.tba_mobile .addrNew_names,
html.tba_mobile .addrNew_state_name,
html.tba_mobile .addrNew_postal_name { float: none; width: auto; margin: 10px 0 2px; text-align: left; font-weight: bold; clear: none; }
html.tba_mobile .addrNew_data,
html.tba_mobile .addrNew_city_data,
html.tba_mobile .addrNew_state_data,
html.tba_mobile .addrNew_postal_data { float: none; width: auto; margin: 0; padding: 0; clear: none; }
html.tba_mobile #addrNew-dialog input[type=text],
html.tba_mobile #addrNew-dialog select { width: 100%; box-sizing: border-box; max-width: 100%; }



/* ═══ Phone layout: record forms built from label/field pairs ═══════════════
   For pages whose <form class="m_form"> wraps each label+field pair in
   <div class="m_row"> (Vendor, People, Personnel...). .m_row is invisible on
   desktop (display:contents), so the page's own floats lay out exactly as
   before. On a phone each row becomes a flex line: label first, then any
   action icon + count (plus-folder etc.) beside it, then the inputs below.
   Works whichever order the markup has the label and the field in, because
   the label is placed with `order`, not by where it sits in the markup. ═══ */
.m_row, .m_pair { display: contents; }

html.tba_mobile .m_form { display: block; padding: 0 10px; font-size: 0; }   /* font-size 0 collapses stray &nbsp;<br> text */
html.tba_mobile .m_form > br,
html.tba_mobile .m_form .m_nb { display: none; }
html.tba_mobile .m_form .m_row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	font-size: 16px;
	margin: 0 0 12px;
	min-width: 0;
}
/* forced line break after the label/icon group, so the inputs start on their own line */
html.tba_mobile .m_form .m_row::after { content: ""; order: -7; flex: 0 0 100%; height: 0; margin: -6px 0 0; }
html.tba_mobile .m_form .m_row > .field_names,
html.tba_mobile .m_form .m_row > .addr_names,
html.tba_mobile .m_form .m_row > .state_name,
html.tba_mobile .m_form .m_row > .postal_name,
html.tba_mobile .m_form .m_row > .names1,
html.tba_mobile .m_form .m_row > .hdr_name,
html.tba_mobile .m_form .m_row > .full_line_fld_name,
html.tba_mobile .m_form .m_row > .hdr_name3 {
	float: none;
	clear: none;
	width: auto;
	flex: 0 1 auto;
	max-width: 100%;
	order: -10;
	margin: 0;
	padding: 0;
	text-align: left;
	font-weight: bold;
	white-space: normal;
}
html.tba_mobile .m_form .m_pair { display: flex; flex-direction: column-reverse; }   /* State/City rows: City first */
html.tba_mobile .m_form .m_row.m_blank > .field_names,
html.tba_mobile .m_form .m_row.m_blank > .addr_names,
html.tba_mobile .m_form .m_row.m_blank > .full_line_fld_name,
html.tba_mobile .m_form .m_row.m_blank > .state_name { display: none; }
/* the data wrapper dissolves so its inputs/icons become items of the row */
html.tba_mobile .m_form .m_row > .field_data,
html.tba_mobile .m_form .m_row > .addr_data,
html.tba_mobile .m_form .m_row > .city_data,
html.tba_mobile .m_form .m_row > .state_data,
html.tba_mobile .m_form .m_row > .postal_data,
html.tba_mobile .m_form .m_row > .data1,
html.tba_mobile .m_form .m_row > .hdr_data,
html.tba_mobile .m_form .m_row > .full_line_fld_data,
html.tba_mobile .m_form .m_row > .hdr_data3 { display: contents; }
html.tba_mobile .m_form .m_row img { order: -9; }
html.tba_mobile .m_form .m_row [id$="_num"] { order: -8; margin-right: auto; }
html.tba_mobile .m_form .m_row input[type=text],
html.tba_mobile .m_form .m_row input[type=email],
html.tba_mobile .m_form .m_row input[type=number],
html.tba_mobile .m_form .m_row input[type=password],
html.tba_mobile .m_form .m_row input[type=tel],
html.tba_mobile .m_form .m_row select,
html.tba_mobile .m_form .m_row textarea {
	flex: 1 1 100%;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}
html.tba_mobile .m_form .m_row #phone1_name,
html.tba_mobile .m_form .m_row #phone2_name { flex: 0 0 34%; width: auto; }
html.tba_mobile .m_form .m_row #phone1,
html.tba_mobile .m_form .m_row #phone2 { flex: 1 1 50%; width: auto; }
html.tba_mobile .m_form .m_row #web_name { flex: 1 1 40%; width: auto; }
html.tba_mobile .m_form .m_row #postal { flex: 0 1 12em; width: auto; }
html.tba_mobile .m_form textarea { height: 6em; }
html.tba_mobile .m_form .submit_button { margin: 20px auto; width: 100%; }
html.tba_mobile .m_form .submit_button input { width: 100%; min-height: 44px; font-size: 17px; }
/* small photo above the form, instead of a 150-200px float beside it */
html.tba_mobile .tab_content > .pic,
html.tba_mobile .m_form .pic { float: none; width: 120px; height: 120px; margin: 10px auto 4px; }
html.tba_mobile .tab_content > .pic img,
html.tba_mobile .m_form .pic img { width: 120px; height: 120px; display: block; }
html.tba_mobile .m_form .line83pc { float: none; width: auto; }
html.tba_mobile .m_form .ctr_full_line { float: none; }

/* Personnel's "ID numbers" dialog -- same card shape as the email/phone/web lists above */
html.tba_mobile #id-dialog > .id_listrow,
html.tba_mobile #id-dialog > hr { display: none; }
html.tba_mobile .id_listrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: auto;
	line-height: 1.3;
	font-size: 0;
	padding: 6px 0;
	border-bottom: 1px solid var(--theme-border-subtle);
}
html.tba_mobile .id_list_data { display: contents; }
html.tba_mobile .id_list_type { float: none; flex: 1 1 0; width: auto; min-width: 0; margin: 0; padding: 0 0 0 4px; text-align: left; overflow: visible; font-size: 16px; }
html.tba_mobile .id_list_num { float: none; flex: 0 0 100%; width: auto; margin: 4px 0 0; padding: 0 4px; text-align: left; overflow: visible; font-size: 16px; box-sizing: border-box; }
html.tba_mobile .id_list_type::before { content: "Type"; display: block; font-size: 12px; color: var(--theme-text-muted); }
html.tba_mobile .id_list_num::before { content: "ID number"; display: block; font-size: 12px; color: var(--theme-text-muted); }
html.tba_mobile .id_list_type input,
html.tba_mobile .id_list_num input { width: 100%; box-sizing: border-box; max-width: 100%; }

/* A row whose "field" is just a read-only value (Vendor#, Personnel#): the value sits beside its label */
html.tba_mobile .m_form .m_row.m_inline > .field_data { display: block; order: -9; flex: 1 1 0; min-width: 0; margin: 0; padding: 0; float: none; width: auto; }

/* Explanatory paragraphs inside a phone record form (the form's own text is collapsed to 0 -- see above) */
html.tba_mobile .m_form > p { font-size: 16px; margin: 0 0 12px; padding: 0; }
html.tba_mobile .line83pc.m_form { float: none; width: auto; }
/* checkbox/radio labels inside a phone record form: one per line, easy to tap */
html.tba_mobile .m_form .m_row label { flex: 1 1 100%; margin: 0 !important; padding: 6px 0; }


/* ═══ Phone layout: caption + control "lines" inside a record form row ═══════
   (Item.css has its own #SaveForm-scoped copy.) <span class="m_line"> holds a
   caption and its control: stacked by default, side-by-side with m_side. ═══ */
html.tba_mobile .m_form .m_line { display: flex; flex-direction: column; flex: 1 1 100%; width: 100%; gap: 3px; margin: 0 0 4px; text-align: left; align-items: stretch; }
html.tba_mobile .m_form .m_line.m_side { flex-direction: row; align-items: center; gap: 8px; }
html.tba_mobile .m_form .m_cap { font-weight: bold; }
html.tba_mobile .m_form .m_line input[type=text] { flex: none; width: 100%; box-sizing: border-box; }


/* ═══ Phone layout: sales documents (Service Order; Quote/Invoice share these classes) ═══
   A document is a header of label/field rows (.m_form/.m_row, above), a list of
   line items, and totals. Each line item becomes a card. The three desktop float
   columns (.sol_col1/2/3) dissolve (display:contents) so their pieces can be
   ordered as one flex card: top row (collapse, line#, Find, type + move/delete),
   recent-items pick, description, notes, qty/UoM/price/amount/tax, then detail. */
html.tba_mobile .m_form .sol_line_area,
html.tba_mobile .m_form .totals_section,
html.tba_mobile .m_form .submit_button { font-size: 16px; }
html.tba_mobile .sol_line_head_sticky { display: none; }                     /* column headings -- each card captions its own boxes */
html.tba_mobile .sol_line_area { float: none; width: auto; }
html.tba_mobile #line_div { float: none; width: auto; }
html.tba_mobile .m_form .hdr_row3 { float: none; width: auto; display: block; margin: 0; }
html.tba_mobile .line_item_row {
	float: none;
	clear: none;
	width: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	box-sizing: border-box;
	padding: 10px;
	margin: 0 0 10px;
	border: 1px solid var(--theme-border-strong);
	border-radius: 6px;
	background-color: var(--theme-card-bg);
	font-size: 16px;
}
html.tba_mobile .line_item_row > .sol_col1,
html.tba_mobile .line_item_row > .sol_col2,
html.tba_mobile .line_item_row > .sol_col3 { display: contents; }
html.tba_mobile .line_item_row .sol_line { float: none; clear: none; width: auto; margin: 0; overflow: visible; }
/* top row: collapse + line# + Find + type (+ badge), then move/delete at the right */
html.tba_mobile .sol_col1 > .sol_line:nth-child(1) { order: 1; flex: 1 1 0; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
html.tba_mobile .sol_col1 > .sol_line:nth-child(3) { order: 2; flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
html.tba_mobile .sol_col1 > .sol_recent { order: 3; flex: 0 0 100%; }
html.tba_mobile .sol_col1 > .sol_line:nth-child(4) { order: 12; flex: 0 0 100%; }
html.tba_mobile .sol_line_toggle { float: none; width: auto; display: flex; align-items: center; gap: 6px; }
html.tba_mobile .sol_collapse, html.tba_mobile .sol_linenum { flex: none; text-align: left; }
html.tba_mobile .sol_collapse_btn { width: 30px; height: 30px; line-height: 28px; font-size: 18px; }
html.tba_mobile .sol_find_btn, html.tba_mobile .sol_type { float: none; width: auto; margin: 0; text-align: left; }
html.tba_mobile .sol_updn, html.tba_mobile .sol_del { float: none; width: 40px; text-align: center; }
html.tba_mobile .sol_recent select { width: 100%; font-size: 1em; box-sizing: border-box; }
/* description / notes */
html.tba_mobile .sol_col2 > [id^="lt_svc_top1_row"],
html.tba_mobile .sol_col2 > [id^="lt_svc_top2_row"] { order: 4; flex: 0 0 100%; float: none; width: auto; }
html.tba_mobile .sol_col2 > .sol_desc_ta { order: 6; flex: 0 0 100%; width: 100%; box-sizing: border-box; }
html.tba_mobile .sol_col2 > .sol_notes { order: 7; flex: 0 0 100%; width: 100%; box-sizing: border-box; }
html.tba_mobile .sol_col2 > .sol_collapse_info { order: 6; flex: 0 0 100%; }
/* column 3: spacer row isn't needed once there are no columns to line up */
html.tba_mobile .sol_col3 > .sol_svc_spacer_row { display: none !important; }
html.tba_mobile .sol_col3 > .sol_svc_rate_row { order: 5; flex: 0 0 100%; }
html.tba_mobile .sol_col3 > .sol_line:nth-child(3) { order: 8; flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: flex-end; }   /* qty .. tax */
html.tba_mobile .sol_col3 > .sol_line:nth-child(4) { order: 9; flex: 0 0 100%; }
html.tba_mobile .sol_col3 > .sol_line:nth-child(5) { order: 10; flex: 0 0 100%; }
html.tba_mobile .sol_col3 > [id^="lt_gl_row"] { order: 11; flex: 0 0 100%; }
html.tba_mobile .sol_qty, html.tba_mobile .sol_uom, html.tba_mobile .sol_price,
html.tba_mobile .sol_amount, html.tba_mobile .sol_tax,
html.tba_mobile .sol_cost { float: none; margin: 0; text-align: left; min-width: 0; }
html.tba_mobile .sol_qty { flex: 1 1 22%; width: auto; }
html.tba_mobile .sol_uom { flex: 1 1 22%; width: auto; }
html.tba_mobile .sol_price { flex: 1 1 30%; width: auto; }
html.tba_mobile .sol_cost { flex: 1 1 30%; width: auto; }
html.tba_mobile .sol_amount { flex: 1 1 40%; width: auto; font-weight: bold; }
html.tba_mobile .sol_tax { flex: 0 0 auto; width: auto; }
html.tba_mobile .sol_tax { display: flex; align-items: center; gap: 6px; min-height: 32px; }   /* checkbox beside its "Tax" caption */
html.tba_mobile .sol_qty input, html.tba_mobile .sol_price input, html.tba_mobile .sol_cost input,
html.tba_mobile .sol_uom select { width: 100%; box-sizing: border-box; text-align: left; }
html.tba_mobile .sol_qty::before, html.tba_mobile .sol_uom::before, html.tba_mobile .sol_price::before,
html.tba_mobile .sol_cost::before, html.tba_mobile .sol_amount::before, html.tba_mobile .sol_tax::before { display: block; font-size: 11px; font-weight: normal; color: var(--theme-text-muted); }
html.tba_mobile .sol_qty::before { content: "Qty"; }
html.tba_mobile .sol_uom::before { content: "UoM"; }
html.tba_mobile .sol_price::before { content: "Unit price"; }
html.tba_mobile .sol_cost::before { content: "Cost"; }
html.tba_mobile .sol_amount::before { content: "Amount"; }
html.tba_mobile .sol_tax::before { content: "Tax"; }
html.tba_mobile .sol_tax::before { display: inline; }
html.tba_mobile .sol_mfr_info, html.tba_mobile .sol_gl_wrap { float: none; width: auto; }

/* totals: a label on the left, the amount on the right */
html.tba_mobile .totals_section { float: none; width: auto; margin-top: 8px; }
html.tba_mobile .tot_row { float: none; clear: none; width: auto; }
html.tba_mobile .tot_first, html.tba_mobile .tot_uom, html.tba_mobile .tot_calcprice { display: none; }
html.tba_mobile .tot_content { float: none; width: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; }
html.tba_mobile .tot_content > div { float: none; width: auto; margin: 0; padding: 0; text-align: left; }
html.tba_mobile .tot_content > .tot_amount { text-align: right; margin-left: auto; }
html.tba_mobile .tot_content > .tot_amount hr { margin: 2px 0; }
html.tba_mobile .tot_bold { font-weight: bold; }

/* Dropdown group headings (e.g. "Recent Client Items") in bold, items normal. Desktop browsers do this by
   default; a phone's own picker may or may not follow it -- we ask anyway. */
html.tba_mobile optgroup { font-weight: bold; font-style: normal; }
html.tba_mobile optgroup > option { font-weight: normal; }


/* ═══ Phone pick-list sheet (std.js mobileOpenSheet) ═══════════════════════
   Replaces the phone's own list for selects marked data-m-sheet. The button
   stands in for the select; both are inert on desktop. ════════════════════ */
.m_pick_btn { display: none; }
html.tba_mobile select.m_pick_hidden { display: none; }
html.tba_mobile .m_pick_btn {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
	box-sizing: border-box;
	min-height: 40px;
	padding: 6px 30px 6px 10px;
	text-align: left;
	font-size: 16px;
	color: var(--theme-text-primary);
	background: var(--theme-card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23555' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 10px center;
	border: 1px solid var(--theme-border-strong);
	border-radius: 4px;
}
html.m_sheet_open { overflow: hidden; }
#m_sheet_backdrop {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 10050;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: flex-end;
}
#m_sheet {
	width: 100%;
	max-height: 75vh;
	display: flex;
	flex-direction: column;
	background: var(--theme-panel-bg);
	color: var(--theme-text-primary);
	border-radius: 14px 14px 0 0;
	box-shadow: 0 -4px 16px rgba(0,0,0,0.35);
	font-size: 16px;
}
#m_sheet .m_sheet_title { padding: 14px 16px 8px; font-weight: bold; text-align: center; border-bottom: 1px solid var(--theme-border-muted); }
#m_sheet .m_sheet_body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
#m_sheet .m_sheet_group {
	position: sticky;
	top: 0;
	padding: 10px 16px 6px;
	font-weight: bold;
	background: var(--theme-panel-bg-alt);
	border-bottom: 1px solid var(--theme-border-muted);
}
#m_sheet .m_sheet_item {
	position: relative;
	padding: 12px 16px 12px 34px;      /* room for the bullet; wrapped lines hang under the text, not the bullet */
	min-height: 24px;
	border-bottom: 1px solid var(--theme-border-subtle);
	overflow-wrap: anywhere;      /* long descriptions wrap in full -- no line limit */
}
#m_sheet .m_sheet_item::before { content: "\2022"; position: absolute; left: 16px; top: 12px; color: var(--theme-text-muted); font-weight: bold; }
#m_sheet .m_sheet_item:active { background: var(--theme-hover-bg); }
#m_sheet .m_sheet_item.m_sheet_sel { font-weight: bold; }
#m_sheet .m_sheet_item.m_sheet_sel::before { content: "\2713"; }
#m_sheet .m_sheet_cancel {
	flex: 0 0 auto;
	margin: 8px 16px 14px;
	min-height: 44px;
	font-size: 16px;
}


/* ═══ Phone layout: the Find pages (BillFind, ClientFind, InvoiceFind, ... -- every <form id="Find...">) ═══
   One shared template: a label above each field, date ranges ("from ... to ...") side by side, the Find
   button full width. ═══ */
html.tba_mobile form[id^="Find"] { font-size: 16px; padding: 0 10px; }
html.tba_mobile form[id^="Find"] br { display: none; }
html.tba_mobile form[id^="Find"] .field_names {
	float: none; clear: both; width: auto; margin: 12px 0 3px; padding: 0; text-align: left; font-weight: bold;
}
html.tba_mobile form[id^="Find"] .field_data {
	float: none; clear: both; width: auto; margin: 0; padding: 0; text-align: left;
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
}
html.tba_mobile form[id^="Find"] .field_data > .m_nb,
html.tba_mobile form[id^="Find"] .field_data > br { display: none; }
html.tba_mobile form[id^="Find"] .field_data input[type=text],
html.tba_mobile form[id^="Find"] .field_data input[type=email],
html.tba_mobile form[id^="Find"] .field_data input[type=number],
html.tba_mobile form[id^="Find"] .field_data input[type=password],
html.tba_mobile form[id^="Find"] .field_data input[type=tel],
html.tba_mobile form[id^="Find"] .field_data textarea { flex: 1 1 40%; width: auto; min-width: 0; max-width: 100%; box-sizing: border-box; }
html.tba_mobile form[id^="Find"] .field_data > select,
html.tba_mobile form[id^="Find"] .field_data > div:not(.field_names) { flex: 1 1 100%; max-width: 100%; }
html.tba_mobile form[id^="Find"] .field_data label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; margin-right: 14px; }
html.tba_mobile form[id^="Find"] .submit_button { float: none; clear: both; width: auto; margin: 18px 0 8px; padding: 0; text-align: center; }
html.tba_mobile form[id^="Find"] .submit_button input[type=submit] { width: 100%; min-height: 46px; font-size: 18px; }
/* the shared "Other info" block (IdSearch.js) uses the same field_names/field_data pair */
html.tba_mobile #idsearch_div { float: none; clear: both; width: auto; }
html.tba_mobile #idsearch_div .field_data { flex-wrap: wrap; }
html.tba_mobile #idsearch_div small { display: block; flex: 1 1 100%; font-size: 12px; }


/* ═══ Phone layout: the read-only "...Min" views (html.tba_min is set from the page name by std.js) ═══
   Label above value, whatever the page's own label/value classes are called. ═══ */
html.tba_mobile.tba_min .tab_content { font-size: 16px; padding: 0 10px; box-sizing: border-box; }
html.tba_mobile.tba_min .tab_content > br,
html.tba_mobile.tba_min .tab_content form > br { display: none; }
html.tba_mobile.tba_min .full_line_fld_name, html.tba_mobile.tba_min .names1, html.tba_mobile.tba_min .field_names,
html.tba_mobile.tba_min .notes_name {
	float: none; clear: both; width: auto; margin: 12px 0 2px; padding: 0; text-align: left; font-weight: bold;
}
html.tba_mobile.tba_min .full_line_fld_data, html.tba_mobile.tba_min .data1, html.tba_mobile.tba_min .field_data,
html.tba_mobile.tba_min .notes_data {
	float: none; clear: both; width: auto; margin: 0; padding: 0; text-align: left; overflow-wrap: anywhere;
}
html.tba_mobile.tba_min .full_line, html.tba_mobile.tba_min .line83pc { float: none; clear: both; width: auto; }
html.tba_mobile.tba_min .tab_content textarea, html.tba_mobile.tba_min .tab_content input[type=text] { max-width: 100%; box-sizing: border-box; }
html.tba_mobile.tba_min .submit_button { float: none; clear: both; width: auto; text-align: center; padding: 14px 0; }

/* hidden-until-needed note rows (voided / printed / credit info): no gap while they are hidden */
html.tba_mobile .m_form .m_row.m_voided { margin: 0; }
html.tba_mobile .m_voided .ro_span { margin-bottom: 12px; }
html.tba_mobile .m_dollar { display: none; }
html.tba_mobile .m_dollar_wrap { display: contents; }


/* ═══ Phone layout: the shared "editable list" pages (ShipMethods, Uom, PersStat, PersonnelRoles, SvcHoliday,
   InfoCats, VendorIdCats, GL Classes, Time Activities ...): <x>_list_wrap > <x>_header + rows of
   <x>_move_updn / <x>_del / name input. ═══ */
html.tba_mobile [class$="_list_wrap"] { display: block; width: auto; min-width: 0; margin-left: 0; font-size: 16px; text-align: left; }
html.tba_mobile [class$="_list_wrap"] > [class$="_header"] { display: none; }
html.tba_mobile [class$="_list_wrap"] [class$="_row"] {
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; float: none; width: auto; overflow: visible; margin: 0 0 10px;
	box-sizing: border-box; padding: 8px; border: 1px solid var(--theme-border-strong); border-radius: 8px; background: var(--theme-card-bg);
}
html.tba_mobile [class$="_list_wrap"] [class$="_row"] > div { float: none; width: auto; margin: 0; min-width: 0; flex: 1 1 30%; }
html.tba_mobile [class$="_list_wrap"] [class$="_row"] > div[class$="_move_updn"],
html.tba_mobile [class$="_list_wrap"] [class$="_row"] > div[class$="_del"] {
	flex: 0 0 40px; min-height: 40px; display: flex; align-items: center; justify-content: center;
}
html.tba_mobile [class$="_list_wrap"] [class$="_row"] > input[type=text] { flex: 1 1 120px; width: auto; min-width: 0; min-height: 40px; box-sizing: border-box; }
html.tba_mobile [class$="_list_wrap"] [class$="_row"] > div input[type=text] { width: 100%; box-sizing: border-box; min-height: 40px; }
html.tba_mobile [class$="_list_wrap"] [class$="_row"] > div[class$="_col"] { flex: 1 1 100%; }
html.tba_mobile [class$="_list_wrap"] input[type=text], html.tba_mobile [class$="_list_wrap"] input[type=number] { max-width: 100%; }


/* ═══ Phone layout: simple field_names/field_data setup forms (<form class="m_simple">) ═══
   One shared template: a label above each field, date ranges ("from ... to ...") side by side, the Find
   button full width. ═══ */
html.tba_mobile form.m_simple { font-size: 16px; padding: 0 10px; }
html.tba_mobile form.m_simple br { display: none; }
html.tba_mobile form.m_simple .field_names {
	float: none; clear: both; width: auto; margin: 12px 0 3px; padding: 0; text-align: left; font-weight: bold;
}
html.tba_mobile form.m_simple .field_data {
	float: none; clear: both; width: auto; margin: 0; padding: 0; text-align: left;
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
}
html.tba_mobile form.m_simple .field_data > .m_nb,
html.tba_mobile form.m_simple .field_data > br { display: none; }
html.tba_mobile form.m_simple .field_data input[type=text],
html.tba_mobile form.m_simple .field_data input[type=email],
html.tba_mobile form.m_simple .field_data input[type=number],
html.tba_mobile form.m_simple .field_data input[type=password],
html.tba_mobile form.m_simple .field_data input[type=tel],
html.tba_mobile form.m_simple .field_data textarea { flex: 1 1 40%; width: auto; min-width: 0; max-width: 100%; box-sizing: border-box; }
html.tba_mobile form.m_simple .field_data > select,
html.tba_mobile form.m_simple .field_data > div:not(.field_names) { flex: 1 1 100%; max-width: 100%; }
html.tba_mobile form.m_simple .field_data label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; margin-right: 14px; }
html.tba_mobile form.m_simple .submit_button { float: none; clear: both; width: auto; margin: 18px 0 8px; padding: 0; text-align: center; }
html.tba_mobile form.m_simple .submit_button input[type=submit] { width: 100%; min-height: 46px; font-size: 18px; }
/* the shared "Other info" block (IdSearch.js) uses the same field_names/field_data pair */
html.tba_mobile #idsearch_div { float: none; clear: both; width: auto; }
html.tba_mobile #idsearch_div .field_data { flex-wrap: wrap; }
html.tba_mobile #idsearch_div small { display: block; flex: 1 1 100%; font-size: 12px; }


/* ═══ Phone layout: the read-only "...Min" views (html.tba_min is set from the page name by std.js) ═══
   Label above value, whatever the page's own label/value classes are called. ═══ */
html.tba_mobile.tba_min .tab_content { font-size: 16px; padding: 0 10px; box-sizing: border-box; }
html.tba_mobile.tba_min .tab_content > br,
html.tba_mobile.tba_min .tab_content form > br { display: none; }
html.tba_mobile.tba_min .full_line_fld_name, html.tba_mobile.tba_min .names1, html.tba_mobile.tba_min .field_names,
html.tba_mobile.tba_min .notes_name {
	float: none; clear: both; width: auto; margin: 12px 0 2px; padding: 0; text-align: left; font-weight: bold;
}
html.tba_mobile.tba_min .full_line_fld_data, html.tba_mobile.tba_min .data1, html.tba_mobile.tba_min .field_data,
html.tba_mobile.tba_min .notes_data {
	float: none; clear: both; width: auto; margin: 0; padding: 0; text-align: left; overflow-wrap: anywhere;
}
html.tba_mobile.tba_min .full_line, html.tba_mobile.tba_min .line83pc { float: none; clear: both; width: auto; }
html.tba_mobile.tba_min .tab_content textarea, html.tba_mobile.tba_min .tab_content input[type=text] { max-width: 100%; box-sizing: border-box; }
html.tba_mobile.tba_min .submit_button { float: none; clear: both; width: auto; text-align: center; padding: 14px 0; }

/* hidden-until-needed note rows (voided / printed / credit info): no gap while they are hidden */
html.tba_mobile .m_form .m_row.m_voided { margin: 0; }
html.tba_mobile .m_voided .ro_span { margin-bottom: 12px; }
html.tba_mobile .m_dollar { display: none; }
html.tba_mobile .m_dollar_wrap { display: contents; }


html.tba_mobile form.m_simple .field_note { float: none; clear: both; width: auto; margin: 2px 0 0; font-size: 13px; color: var(--theme-text-muted); text-align: left; }
html.tba_mobile form.m_simple .field_data > input[type=checkbox] { width: 24px; height: 24px; flex: 0 0 auto; }
html.tba_mobile form.m_simple b { font-weight: bold; }

/* UserAdd/UserMod style label/field classes (left_/mid_/right_/center_/email_ fld names + data) */
html.tba_mobile form.m_simple [class$="_fld_names"], html.tba_mobile form.m_simple [class$="_fld_name"] {
	float: none; clear: both; width: auto; margin: 12px 0 3px; padding: 0; text-align: left; font-weight: bold;
}
html.tba_mobile form.m_simple [class$="_fld_data"] {
	float: none; clear: both; width: auto; margin: 0; padding: 0; text-align: left;
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
}
html.tba_mobile form.m_simple [class$="_fld_data"] input[type=text], html.tba_mobile form.m_simple [class$="_fld_data"] input[type=email],
html.tba_mobile form.m_simple [class$="_fld_data"] input[type=password], html.tba_mobile form.m_simple [class$="_fld_data"] input[type=tel] {
	flex: 1 1 40%; width: auto; min-width: 0; max-width: 100%; box-sizing: border-box;
}


/* ═══ Phone layout: report filter bars (every <x>_filter_row / <x>_label pair on the report pages) ═══
   Controls wrap instead of running off the edge; the result tables keep their own horizontal scroll. ═══ */
html.tba_mobile [class$="_filter_row"] {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; text-align: left; line-height: 1.4; margin: 0 0 10px;
}
html.tba_mobile [class$="_filter_row"] > [class$="_label"] { margin: 0; flex: 0 0 auto; }
html.tba_mobile [class$="_filter_row"] input[type=text], html.tba_mobile [class$="_filter_row"] input[type=number] { flex: 1 1 8em; min-width: 0; max-width: 100%; box-sizing: border-box; }
html.tba_mobile [class$="_filter_row"] label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
html.tba_mobile [class$="_filter_row"] button, html.tba_mobile [class$="_filter_row"] input[type=button] { min-height: 40px; }
html.tba_mobile #filter_bar { text-align: left; }
html.tba_mobile #filter_bar, html.tba_mobile [id$="_grid_wrap"] { box-sizing: border-box; padding-left: 8px; padding-right: 8px; font-size: 16px; }
html.tba_mobile [id$="_grid_wrap"] { -webkit-overflow-scrolling: touch; }

/* report drill-down dialogs: the columns are percentages of a ~900px dialog, so on a phone they overlap.
   Give the rows a minimum width and let the dialog body scroll sideways instead. */
html.tba_mobile [id^="dlg_"].ui-dialog-content { overflow-x: auto; }
html.tba_mobile [id^="dlg_"] [class*="det_hdr_row"], html.tba_mobile [id^="dlg_"] [class*="det_data_row"],
html.tba_mobile [id^="dlg_"] #det_grid_body, html.tba_mobile [id^="dlg_"] #det_col_hdr { min-width: 680px; box-sizing: border-box; }


/* ═══ Phone layout: dialogs that use the page-level label/field class names (itemfind_dlg_*, field_names/field_data):
   label above field, field full width. Page-specific #dialog rules (higher specificity) still win. ═══ */
html.tba_mobile .ui-dialog-content > br { display: none; }
html.tba_mobile .ui-dialog-content .itemfind_dlg_names,
html.tba_mobile .ui-dialog-content .field_names {
	float: none; clear: both; width: auto; margin: 10px 0 2px; padding: 0; text-align: left; font-weight: bold;
}
html.tba_mobile .ui-dialog-content .itemfind_dlg_data,
html.tba_mobile .ui-dialog-content .field_data {
	float: none; clear: both; width: auto; margin: 0; padding: 0; text-align: left;
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
}
html.tba_mobile .ui-dialog-content .itemfind_dlg_data input[type=text], html.tba_mobile .ui-dialog-content .itemfind_dlg_data input[type=email],
html.tba_mobile .ui-dialog-content .itemfind_dlg_data input[type=number], html.tba_mobile .ui-dialog-content .itemfind_dlg_data textarea,
html.tba_mobile .ui-dialog-content .field_data input[type=text], html.tba_mobile .ui-dialog-content .field_data input[type=email],
html.tba_mobile .ui-dialog-content .field_data input[type=number], html.tba_mobile .ui-dialog-content .field_data textarea {
	flex: 1 1 40%; width: auto; min-width: 0; max-width: 100%; box-sizing: border-box;
}
html.tba_mobile .ui-dialog-content .itemfind_dlg_data > div, html.tba_mobile .ui-dialog-content .field_data > div { flex: 1 1 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
html.tba_mobile .ui-dialog-content .itemfind_dlg_data label, html.tba_mobile .ui-dialog-content .field_data label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
/* the version picker: its Version / Status / Date heading strip has no matching captions on a phone */
html.tba_mobile #versionpicker-dialog .sc_head_row { display: none; }
html.tba_mobile #versionpicker-dialog .sc_item_row { display: flex; flex-wrap: wrap; gap: 4px 12px; width: auto; }
html.tba_mobile #versionpicker-dialog .sc_item_row > div::before { content: none; display: none; }
html.tba_mobile #versionpicker-dialog .sc_item_row > div { flex: 0 0 auto; width: auto; float: none; }


/* ═══ Phone layout: dialogs shared by Quote / Sales-Service Order / Invoice / Po / Payment / Comms pages (jQuery UI fits each to the screen) ═══ */

/* Delivery address: label above field; City / State / Zip each on their own line */
html.tba_mobile #svcaddrNew-dialog > br { display: none; }
html.tba_mobile #svcaddrNew-dialog .itemfind_dlg_names { float: none; clear: none; width: auto; margin: 10px 0 2px; text-align: left; font-weight: bold; }
html.tba_mobile #svcaddrNew-dialog .itemfind_dlg_data { float: none; clear: none; width: auto; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
html.tba_mobile #svcaddrNew-dialog input[type=text],
html.tba_mobile #svcaddrNew-dialog select { flex: 1 1 100%; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }

/* Assigned personnel: delete + name, then role / status, then percent */
html.tba_mobile #assignedpersonnel-dialog .ap_head_row { display: none; }
html.tba_mobile .ap_item_row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 0; border-bottom: 1px solid var(--theme-border-subtle); }
html.tba_mobile .ap_item_row > .ap_del { flex: 0 0 44px; width: 44px; text-align: center; margin: 0; }
html.tba_mobile .ap_item_row > .ap_name { flex: 1 1 calc(100% - 70px); width: auto; margin: 0; min-width: 0; white-space: normal; overflow: visible; text-overflow: clip; font-weight: bold; }
html.tba_mobile .ap_item_row > .ap_role,
html.tba_mobile .ap_item_row > .ap_status { flex: 1 1 40%; width: auto; margin: 0; min-width: 0; }
html.tba_mobile .ap_item_row > .ap_percent { flex: 0 0 auto; width: auto; margin: 0; white-space: nowrap; }
html.tba_mobile .ap_item_row select { width: 100%; box-sizing: border-box; }
html.tba_mobile .ap_percent input { width: 5em; }

/* Scheduled personnel: delete + name, role, start / end (date + time), time, notes */
html.tba_mobile #scheduledpersonnel-dialog .sp_head_row { display: none; }
html.tba_mobile .sp_row_wrap { border-bottom: 1px solid var(--theme-border-subtle); padding: 8px 0; }
html.tba_mobile .sp_item_row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 8px; width: auto; }
html.tba_mobile .sp_item_row > div { float: none; width: auto; margin: 0; min-width: 0; text-align: left; }
html.tba_mobile .sp_item_row > .sp_del { flex: 0 0 44px; text-align: center; align-self: center; }
html.tba_mobile .sp_item_row > .sp_name { flex: 1 1 calc(100% - 70px); font-weight: bold; white-space: normal; overflow: visible; align-self: center; }
html.tba_mobile .sp_item_row > .sp_role { flex: 0 0 100%; }
html.tba_mobile .sp_item_row > .sp_start_date,
html.tba_mobile .sp_item_row > .sp_end_date { flex: 1 1 45%; }
html.tba_mobile .sp_item_row > .sp_start_time,
html.tba_mobile .sp_item_row > .sp_end_time { flex: 1 1 45%; }
html.tba_mobile .sp_item_row > .sp_duration { flex: 0 0 100%; }
html.tba_mobile .sp_item_row select,
html.tba_mobile .sp_item_row input[type=text] { width: 100%; box-sizing: border-box; }
html.tba_mobile .sp_item_row > .sp_start_date::before { content: "Start date"; }
html.tba_mobile .sp_item_row > .sp_start_time::before { content: "Start time"; }
html.tba_mobile .sp_item_row > .sp_end_date::before { content: "End date"; }
html.tba_mobile .sp_item_row > .sp_end_time::before { content: "End time"; }
html.tba_mobile .sp_item_row > .sp_duration::before { content: "Scheduled time"; }
html.tba_mobile .sp_item_row > .sp_start_date::before,
html.tba_mobile .sp_item_row > .sp_start_time::before,
html.tba_mobile .sp_item_row > .sp_end_date::before,
html.tba_mobile .sp_item_row > .sp_end_time::before,
html.tba_mobile .sp_item_row > .sp_duration::before { display: block; font-size: 11px; color: var(--theme-text-muted); }
html.tba_mobile .sp_notes_row { margin-top: 6px; }
html.tba_mobile .sp_notes_row textarea { width: 100%; box-sizing: border-box; }
html.tba_mobile .sp_total_row { display: flex; gap: 10px; align-items: baseline; }
html.tba_mobile .sp_total_row > div { float: none; width: auto; margin: 0; }

/* Status changes: a small two-column card per change */
html.tba_mobile #statuschanges-dialog .sc_head_row { display: none; }
html.tba_mobile .sc_item_row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--theme-border-subtle); width: auto; }
html.tba_mobile .sc_item_row > div { float: none; width: auto; margin: 0; padding: 0; text-align: left; min-width: 0; overflow-wrap: anywhere; white-space: normal; }
html.tba_mobile .sc_item_row > div::before { display: block; font-size: 11px; color: var(--theme-text-muted); }
html.tba_mobile .sc_status::before { content: "Status"; }
html.tba_mobile .sc_date::before { content: "Date"; }
html.tba_mobile .sc_time::before { content: "Time"; }
html.tba_mobile .sc_user::before { content: "Changed by"; }

/* Communication methods: arrows, delete, name */
html.tba_mobile #commMethod-dialog > .method_listrow,
html.tba_mobile #commMethod-dialog > hr { display: none; }
html.tba_mobile #commMethod_line_div .method_listrow { display: flex; align-items: center; gap: 4px; width: auto; padding: 4px 0; }
html.tba_mobile .method_list_method { float: none; flex: 1 1 0; width: auto; min-width: 0; margin: 0; padding: 0 0 0 4px; }
html.tba_mobile .method_list_method input { width: 100%; box-sizing: border-box; }
html.tba_mobile .sp_notes_row { margin-left: 0; padding: 0; float: none; width: auto; }
html.tba_mobile .sp_notes_row .sp_notes { margin-left: 0; }
html.tba_mobile .sp_total_label,
html.tba_mobile .sp_total_row .sp_duration { float: none; width: auto; margin: 0; padding: 0; text-align: left; }

/* Phone: the order number goes above the order date */
html.tba_mobile .m_form .m_row .m_line.m_so { order: -11; }

/* Salespeople dialog (Invoice) shares the assigned-personnel row classes */
html.tba_mobile #salespeople-dialog .ap_head_row { display: none; }
/* Payments applied to an invoice: heading strip off, rows wrap */
html.tba_mobile #pmt_list-dialog .pmt_det_hdr_row { display: none; }
html.tba_mobile #pmt_list-dialog [class*="pmt_det_col"] { float: none; width: auto; }
html.tba_mobile #pmt_list_grid_body > div { display: flex; flex-wrap: wrap; gap: 2px 12px; padding: 6px 0; border-bottom: 1px solid var(--theme-border-subtle); }


/* ═══ Phone layout: the Item / Inventory / Client-item pages' dialogs (shared) ═══════════════════════════════
   (jQuery UI already fits each to the screen -- style2.css.) ═══════════════ */

/* Add a Vendor/Payee: label above field, same shape as the vendor page */
html.tba_mobile #addVendor-dialog > br { display: none; }
html.tba_mobile .av_fld_name { float: none; clear: none; width: auto; margin: 10px 0 2px; text-align: left; font-weight: bold; }
html.tba_mobile .av_fld_data { float: none; clear: none; width: auto; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
html.tba_mobile .av_fld_data input[type=text],
html.tba_mobile .av_fld_data input[type=email],
html.tba_mobile .av_fld_data textarea,
html.tba_mobile .av_fld_data select { flex: 1 1 100%; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
html.tba_mobile #av_phone1_name, html.tba_mobile #av_phone2_name { flex: 0 0 34%; width: auto; }
html.tba_mobile #av_phone1, html.tba_mobile #av_phone2 { flex: 1 1 50%; width: auto; }
html.tba_mobile #av_web_name { flex: 1 1 40%; width: auto; }
html.tba_mobile #av_postal { flex: 0 1 12em; width: auto; }

/* More Data */
html.tba_mobile #more-dialog > br { display: none; }
html.tba_mobile #more-dialog .notes_name { display: none; }                       /* both are blank spacers here */
html.tba_mobile #more-dialog .notes_data,
html.tba_mobile #more-dialog .dlg_data1,
html.tba_mobile #more-dialog .data8,
html.tba_mobile #more-dialog .data9 { float: none; clear: none; width: auto; margin: 0 0 8px; }
html.tba_mobile #more-dialog .dlg_name1,
html.tba_mobile #more-dialog .names8,
html.tba_mobile #more-dialog .names9 { float: none; clear: none; width: auto; margin: 8px 0 2px; text-align: left; font-weight: bold; }
html.tba_mobile #more-dialog .full_line { float: none; width: auto; }
html.tba_mobile #more-dialog input[type=text],
html.tba_mobile #more-dialog textarea { width: 100%; max-width: 100%; box-sizing: border-box; margin-bottom: 4px; }
html.tba_mobile #more-dialog #cost,
html.tba_mobile #more-dialog #rental_cost { width: 9em; }
html.tba_mobile #more-dialog #pricetag_form_name { width: calc(100% - 90px); }
html.tba_mobile #more-dialog .center920 { width: auto; margin: 8px 0; text-align: left; }

/* Selling prices list: one card per price */
html.tba_mobile #prices-dialog > br,
html.tba_mobile #prices-dialog > hr,
html.tba_mobile #prices-dialog .prices_headrow { display: none; }
html.tba_mobile .prices_row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	width: auto;
	padding: 8px 0;
	border-bottom: 1px solid var(--theme-border-subtle);
}
html.tba_mobile .prices_arrowcol { float: none; flex: 0 0 40px; width: 40px; margin: 0; padding: 0; text-align: center; }
html.tba_mobile .prices_item {
	flex: 0 0 100%;
	width: auto;
	float: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 12px;
	cursor: pointer;
}
html.tba_mobile .prices_item > div { float: none; width: auto; margin: 0; padding: 0; text-align: left; min-width: 0; overflow-wrap: anywhere; white-space: normal; }
html.tba_mobile .prices_item > div::before { display: block; font-size: 11px; color: var(--theme-text-muted); }
html.tba_mobile .prices_col_site::before { content: "Site / Client"; }
html.tba_mobile .prices_col_name::before { content: "Price name"; }
html.tba_mobile .prices_col_price::before { content: "Price"; }
html.tba_mobile .prices_col_qty::before { content: "Min qty"; }
html.tba_mobile .prices_col_type::before { content: "Type"; }

/* Department list */
html.tba_mobile #dept-dialog .dept_listrow > b,
html.tba_mobile #dept-dialog .dept_list_content > br,
html.tba_mobile #dept-dialog .dept_list_content > hr { display: none; }
html.tba_mobile #dept_line_div .dept_listrow { float: none; width: auto; padding: 10px 4px; border-bottom: 1px solid var(--theme-border-subtle); }
html.tba_mobile #dept_line_div .dept_name { float: none; width: auto; margin: 0; white-space: normal; overflow: visible; text-overflow: clip; }

/* Vendor / manufacturer / client pick lists: name on top, details underneath */
html.tba_mobile #vend-list-dialog > b,
html.tba_mobile #mfr-list-dialog > b,
html.tba_mobile #client-list-dialog > b,
html.tba_mobile #vend-list-dialog > br,
html.tba_mobile #mfr-list-dialog > br,
html.tba_mobile #client-list-dialog > br,
html.tba_mobile #vend-list-dialog > hr,
html.tba_mobile #mfr-list-dialog > hr,
html.tba_mobile #client-list-dialog > hr { display: none; }
html.tba_mobile .vendlist_listrow,
html.tba_mobile #cllist_line_div > div {
	float: none;
	width: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 12px;
	padding: 10px 4px;
	border-bottom: 1px solid var(--theme-border-subtle);
	cursor: pointer;
}
html.tba_mobile .vendlist_listrow > div,
html.tba_mobile #cllist_line_div > div > div { float: none; width: auto; margin: 0; padding: 0; text-align: left; min-width: 0; overflow-wrap: anywhere; white-space: normal; }
html.tba_mobile .vendlist_name,
html.tba_mobile .clientlist_name { grid-column: 1 / -1; font-weight: bold; }
html.tba_mobile .vendlist_name { order: -1; }


html.tba_mobile .sp_total_label, html.tba_mobile .sp_total_row .sp_duration { flex: 0 1 auto; }
/* Communication Methods dialog on the Client/Vendor Comms pages (same rows as #commMethod-dialog) */
html.tba_mobile #method-dialog > .method_listrow, html.tba_mobile #method-dialog > hr { display: none; }
html.tba_mobile #method_line_div .method_listrow { display: flex; align-items: center; gap: 4px; width: auto; padding: 4px 0; float: none; }
html.tba_mobile #method-dialog .method_list_method { float: none; flex: 1 1 0; width: auto; min-width: 0; margin: 0; padding: 0 0 0 4px; }
html.tba_mobile #method-dialog .method_list_method input { width: 100%; box-sizing: border-box; }