/* ==========================================================================
   fms theme layer
   Design tokens + component restyles layered on top of portal.css / site.css.
   Sourced from the Stitch "Facility Management Design System" (DESIGN.md).
   Do not edit portal.css (compiled Bootstrap) — extend it here instead.
   ========================================================================== */

:root {
	/* portal.css defines --bs-primary: #eb0000 correctly, but its RGB companion
	   (--bs-primary-rgb, used by every rgba()-based Bootstrap utility: .text-primary,
	   .bg-primary/10, .border-primary, focus rings…) was left at 21,163,98 — a leftover
	   green from an earlier theme that was never updated when the hex changed. That
	   mismatch is why some icons/utilities render green instead of red. Fix at the root
	   and align both to our actual brand red so every utility (old pages included) is
	   consistent, not just the classes we hand-authored. */
	--bs-primary: #af0032;
	--bs-primary-rgb: 175, 0, 50;

	/* Color tokens */
	--fms-primary: #af0032;
	--fms-primary-container: #d81b45;
	--fms-on-primary: #ffffff;
	--fms-on-primary-container: #fff0ef;
	--fms-primary-fixed: #ffdada;
	--fms-primary-fixed-dim: #ffb3b6;

	--fms-secondary: #565e74;
	--fms-on-secondary: #ffffff;
	--fms-secondary-container: #dae2fd;
	--fms-on-secondary-container: #5c647a;

	--fms-error: #ba1a1a;
	--fms-on-error: #ffffff;
	--fms-error-container: #ffdad6;
	--fms-on-error-container: #93000a;

	--fms-surface: #f7f9fb;
	--fms-surface-dim: #d8dadc;
	--fms-surface-bright: #f7f9fb;
	--fms-surface-container-lowest: #ffffff;
	--fms-surface-container-low: #f2f4f6;
	--fms-surface-container: #eceef0;
	--fms-surface-container-high: #e6e8ea;
	--fms-surface-container-highest: #e0e3e5;
	--fms-surface-variant: #e0e3e5;

	--fms-on-surface: #191c1e;
	--fms-on-surface-variant: #5c3f41;
	--fms-outline: #906f70;
	--fms-outline-variant: #e4bdbe;

	--fms-success-bg: #d1fae5;
	--fms-success-text: #065f46;
	--fms-warning-bg: #fef3c7;
	--fms-warning-text: #92400e;

	/* Typography */
	--fms-font-headline: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--fms-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* Spacing (8px linear scale) */
	--fms-space-xs: 4px;
	--fms-space-sm: 8px;
	--fms-space-md: 16px;
	--fms-space-lg: 24px;
	--fms-space-xl: 32px;

	/* Shape — soften Bootstrap's own radius scale (portal.css defines these on :root
	   as --bs-border-radius*, and every native component already derives from them:
	   .btn, .card, .modal-content, .form-control, .badge, .alert, .dropdown-menu…).
	   Reuse that cascade instead of a separate one, so bumping it once here softens
	   the whole app — new and untouched pages alike — not just the redesigned views. */
	--bs-border-radius: 0.75rem;      /* 12px, was 6px */
	--bs-border-radius-sm: 0.5rem;    /* 8px, was 4px */
	--bs-border-radius-lg: 1rem;      /* 16px, was 8px — modal-content uses this */

	/* Our own component classes (not native Bootstrap ones) alias the same tokens
	   rather than hard-coding their own pixel values, so there's one source of truth. */
	--fms-radius-sm: var(--bs-border-radius-sm);
	--fms-radius-md: var(--bs-border-radius);
	--fms-radius-lg: var(--bs-border-radius-lg);
	--fms-radius-full: var(--bs-border-radius-pill);

	/* Elevation (tinted navy shadows, never pure black) */
	--fms-shadow-1: 0 2px 8px rgba(19, 27, 46, 0.06);
	--fms-shadow-2: 0 4px 16px rgba(19, 27, 46, 0.10);
}

/* Every Bootstrap .btn (native or the few left un-migrated to .app-btn-*, e.g. modal
   Cancel/Close/Save buttons) becomes a soft pill — one rule, whole app, no per-page fixes. */
.btn {
	--bs-btn-border-radius: var(--bs-border-radius-pill);
}

/* ==========================================================================
   Typography
   ========================================================================== */

body {
	font-family: var(--fms-font-body);
}

h1, h2, h3, h4, h5, h6,
.app-page-title,
.headline-font {
	font-family: var(--fms-font-headline);
}

.app-page-title {
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--fms-on-surface);
}

.fms-label {
	font-family: var(--fms-font-body);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--fms-on-surface-variant);
}

.fms-label-sm {
	font-family: var(--fms-font-body);
	font-size: 11px;
	font-weight: 500;
	line-height: 14px;
	color: var(--fms-secondary);
}

/* ==========================================================================
   Core brand overrides
   ========================================================================== */

.app-header {
	background: var(--fms-surface-container-lowest);
	border-bottom: 1px solid var(--fms-outline-variant);
}

/* Pill-shaped nav items (inset from the sidepanel edges) instead of a full-width
   bar with a left accent border — matches the Stitch sidebar mock. */
.app-nav .nav-link {
	margin: 2px 12px;
	border-radius: var(--fms-radius-full);
	border-left-color: transparent;
	transition: background .15s ease, color .15s ease;
}

.app-nav .nav-link.active {
	color: var(--fms-primary);
	background: var(--fms-primary-fixed);
	border-left-color: transparent;
	font-weight: 700;
}

/* Small dot marker in front of the icon, active state only */
.app-nav .nav-link.active::before {
	content: '';
	position: absolute;
	left: .5rem;
	top: 50%;
	transform: translateY(-50%);
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--fms-primary);
}

.app-nav .nav-link:hover {
	color: var(--fms-primary);
	background: var(--fms-surface-container-low);
}
.app-nav .nav-link.active:hover {
	background: var(--fms-primary-fixed);
}

.sidepanel-inner {
	background: var(--fms-surface-container-lowest);
}

.app {
	background: var(--fms-surface);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/* Shared sizing for every .app-btn-* — was previously undefined, so buttons fell
   back to whatever font-size/padding happened to be inherited wherever they were
   used, which is why icon+text sometimes overflowed the pill (e.g. "Edit" clipping
   to "Edi"). One explicit, compact size for all of them, everywhere. */
.app-btn-outline-secondary,
.app-btn-secondary,
.app-btn-danger,
.app-btn-primary,
.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 14px;
	padding: 8px 16px;
	line-height: 1.3;
}

.app-btn-outline-secondary {
	background: var(--fms-surface-container-lowest);
	color: var(--fms-primary-container);
	border: 1px solid var(--fms-primary-container);
	border-radius: var(--fms-radius-full);
	font-weight: 600;
	transition: all .15s ease;
}
.app-btn-outline-secondary:hover {
	background: var(--fms-primary-fixed);
	color: var(--fms-primary-container);
	border-color: var(--fms-primary-container);
}

.app-btn-secondary {
	background: var(--fms-surface-container-low);
	color: var(--fms-on-surface);
	border: 1px solid transparent;
	border-radius: var(--fms-radius-full);
	font-weight: 600;
	transition: all .15s ease;
}
.app-btn-secondary:hover {
	background: var(--fms-surface-container-high);
	color: var(--fms-on-surface);
	border-color: var(--fms-outline-variant);
}

/* .app-btn-danger has no rule anywhere in portal.css — defining it here. */
.app-btn-danger {
	background: var(--fms-error-container);
	color: var(--fms-error);
	border: 1px solid transparent;
	border-radius: var(--fms-radius-full);
	font-weight: 600;
	transition: all .15s ease;
}
.app-btn-danger:hover {
	background: var(--fms-error);
	color: var(--fms-on-error);
}

.app-btn-primary,
.btn-primary {
	background: var(--fms-primary-container);
	border-color: var(--fms-primary-container);
	border-radius: var(--fms-radius-full);
	font-weight: 600;
}
.app-btn-primary:hover,
.btn-primary:hover {
	background: var(--fms-primary);
	border-color: var(--fms-primary);
}

/* ==========================================================================
   Cards (desktop table wrapper card)
   ========================================================================== */

.app-card {
	border-radius: var(--fms-radius-md);
	box-shadow: 0 2px 8px rgba(19, 27, 46, 0.08);
	/* The page background (--fms-surface, #f7f9fb) is nearly indistinguishable from
	   the card's own white fill, so a light border reads as invisible. Use a visibly
	   darker outline so cards read as distinct surfaces, not just flat page content. */
	border: 1px solid var(--fms-surface-dim);
}

/* Table-wrapper cards specifically: clip content to the card's rounded corners,
   otherwise the table's square-cornered header/footer bands poke past them. */
.app-card-orders-table {
	overflow: hidden;
}

/* Zebra striping — very light red wash on alternating rows, easier to scan a long list.
   Bootstrap's own table CSS gives every <td> an opaque background-color (via --bs-table-bg),
   which sits on top of and completely hides a background-color set on the <tr> itself —
   confirmed even an inline `background: red !important` on the row got fully covered.
   Bootstrap ships the correct mechanism for exactly this: each cell also carries
   `box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg)`, which paints on top of the
   cell's own background. Setting that variable (inherited from the row) is what actually
   works, instead of fighting the cell's background-color directly. */
.app-table-hover > tbody > tr:nth-child(even) {
	--bs-table-accent-bg: #fef8f9;
}
.app-table-hover > tbody > tr:hover {
	background-color: var(--fms-surface-container-low);
}

/* Row action buttons (Edit / Details / Delete) — even gap, not just a one-sided margin.
   Lives on a wrapping <div>, not the <td> itself — `display:flex` directly on a table
   cell breaks border/row rendering in some browsers (the "line stops somewhere" bug). */
.action-btn-group {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* ==========================================================================
   Mobile entity cards (list views, < lg breakpoint)
   ========================================================================== */

.entity-card-list {
	display: flex;
	flex-direction: column;
	gap: var(--fms-space-md);
}

.entity-card {
	background: var(--fms-surface-container-lowest);
	border: 1px solid var(--fms-surface-container-high);
	border-radius: var(--fms-radius-lg);
	box-shadow: var(--fms-shadow-1);
	padding: var(--fms-space-md);
}

.entity-card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--fms-space-sm);
	margin-bottom: var(--fms-space-sm);
}

.entity-card-title {
	font-family: var(--fms-font-headline);
	font-size: 18px;
	font-weight: 700;
	color: var(--fms-on-surface);
	margin: 0;
}

.entity-card-subtitle {
	font-family: var(--fms-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--fms-primary);
	margin-top: var(--fms-space-xs);
}

.entity-meta-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--fms-space-sm) var(--fms-space-md);
	padding: var(--fms-space-sm) 0;
	margin: var(--fms-space-sm) 0;
	border-top: 1px solid var(--fms-surface-container);
	border-bottom: 1px solid var(--fms-surface-container);
}

.entity-meta-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.entity-meta-item span:first-child {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fms-on-surface-variant);
}

.entity-meta-item span:last-child {
	font-size: 14px;
	color: var(--fms-on-surface);
	overflow-wrap: anywhere;
}

/* Icon-only row actions (admin card lists, mobile) — three full-text buttons (Edit /
   Details / Delete) don't fit a phone-width card without overflowing it; fixed-size
   icon buttons do, and they match the icon-only treatment already used on desktop
   tables. Text is kept as a title/aria-label, not removed, for accessibility. */
.entity-card-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--fms-space-sm);
	padding-top: var(--fms-space-sm);
}

.entity-card-actions > a,
.entity-card-actions > button {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 17px;
	text-decoration: none;
}

/* Status / stock chips */
.status-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: var(--fms-radius-full);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	white-space: nowrap;
}
.status-chip-neutral {
	background: var(--fms-secondary-container);
	color: var(--fms-on-secondary-container);
}
.status-chip-success {
	background: var(--fms-success-bg);
	color: var(--fms-success-text);
}
.status-chip-warning {
	background: var(--fms-warning-bg);
	color: var(--fms-warning-text);
}
.status-chip-error {
	background: var(--fms-error-container);
	color: var(--fms-on-error-container);
}

/* ==========================================================================
   Detail pages (Details.cshtml)
   ========================================================================== */

.detail-card {
	background: var(--fms-surface-container-lowest);
	border: 1px solid var(--fms-surface-variant);
	border-radius: var(--fms-radius-lg);
	box-shadow: var(--fms-shadow-1);
	padding: var(--fms-space-md);
}

.detail-row {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-bottom: var(--fms-space-sm);
	margin-bottom: var(--fms-space-sm);
	border-bottom: 1px solid var(--fms-surface-container);
}
.detail-row:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.detail-row-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--fms-on-surface-variant);
}

.detail-row-value {
	font-size: 16px;
	color: var(--fms-on-surface);
	font-weight: 600;
}

.detail-meta-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--fms-space-md);
	padding-top: var(--fms-space-sm);
	margin-top: var(--fms-space-sm);
	border-top: 1px solid var(--fms-surface-container);
}

.detail-meta-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.detail-meta-item span:first-child {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fms-on-surface-variant);
}
.detail-meta-item span:last-child {
	font-size: 13px;
	color: var(--fms-on-surface-variant);
}

.detail-footer-actions {
	display: flex;
	gap: var(--fms-space-md);
	padding-top: var(--fms-space-lg);
	margin-top: var(--fms-space-lg);
	border-top: 1px solid var(--fms-outline-variant);
}
.detail-footer-actions > a,
.detail-footer-actions > button {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--fms-space-sm);
	min-height: 44px;
	font-family: var(--fms-font-headline);
	font-weight: 600;
	text-decoration: none;
}

/* Read-only action chips (e.g. CategoryActions) — never interactive buttons */
.action-chip-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fms-space-sm);
}
.action-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: var(--fms-radius-sm);
	font-size: 12px;
	font-weight: 600;
	background: var(--fms-surface-container-low);
	color: var(--fms-on-surface);
	border: 1px solid var(--fms-outline-variant);
}
.action-chip-custom {
	background: var(--fms-primary-fixed);
	color: var(--fms-on-primary-fixed-variant, var(--fms-primary));
	border-color: var(--fms-primary-container);
}

/* Section headers used above card lists on Details pages */
.fms-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: var(--fms-space-lg) 0 var(--fms-space-md);
}
.fms-section-header h2,
.fms-section-header h3 {
	margin: 0;
}
.fms-section-count {
	background: var(--fms-secondary-container);
	color: var(--fms-on-secondary-container);
	font-size: 11px;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: var(--fms-radius-full);
	white-space: nowrap;
}

/* Caps a sub-item-card list at a fixed height and scrolls internally instead of
   growing the whole card (and page) without bound — matters once a station has
   dozens of locations/employees instead of just one or two. */
.scrollable-item-list {
	max-height: 420px;
	overflow-y: auto;
	padding-right: 4px;
}

/* Sub-item cards (sub-locations under a location, locations under a station, employees, etc.) */
.sub-item-card {
	display: flex;
	align-items: center;
	gap: var(--fms-space-md);
	background: var(--fms-surface-container-lowest);
	border: 1px solid var(--fms-surface-variant);
	border-radius: var(--fms-radius-md);
	box-shadow: var(--fms-shadow-1);
	padding: var(--fms-space-md);
	text-decoration: none;
	color: inherit;
}
.sub-item-icon {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--fms-radius-sm);
	background: var(--fms-secondary-container);
	color: var(--fms-secondary);
}
.sub-item-icon-primary {
	background: var(--fms-primary-fixed);
	color: var(--fms-primary);
}
.sub-item-body {
	flex: 1;
	min-width: 0;
}
.sub-item-title {
	font-weight: 600;
	color: var(--fms-on-surface);
	display: block;
}
.sub-item-subtitle {
	font-size: 13px;
	color: var(--fms-on-surface-variant);
	display: block;
}
.sub-item-chevron {
	color: var(--fms-secondary);
	flex-shrink: 0;
}

/* Search input used on mobile card headers */
.fms-search-input {
	border-radius: var(--fms-radius-sm);
	border: 1px solid transparent;
	background: var(--fms-surface-container-low);
}
.fms-search-input:focus {
	border-color: var(--fms-primary);
	box-shadow: 0 0 0 .2rem rgba(175, 0, 50, .15);
}

mark {
	background-color: var(--fms-primary);
	color: #fff;
	padding: 0 2px;
	border-radius: 2px;
}

/* ==========================================================================
   Desktop-optimized tables/bento layouts (>= lg), second Stitch batch
   ========================================================================== */

.status-chip-resolved {
	background: var(--fms-surface-container-high);
	color: var(--fms-on-surface-variant);
}

.table-uppercase-head th {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 11px;
	color: var(--fms-on-surface-variant);
	font-weight: 600;
	background-color: var(--fms-surface-container-low);
	border-bottom: 1px solid var(--fms-surface-variant);
	white-space: nowrap;
}

.table-footer-count {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--fms-space-sm) var(--fms-space-md);
	border-top: 1px solid var(--fms-surface-variant);
	background: var(--fms-surface-container-lowest);
	font-size: 14px;
	color: var(--fms-on-surface-variant);
}
.table-footer-count .pager-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var(--fms-radius-sm);
	border: 1px solid var(--fms-surface-variant);
	color: var(--fms-on-surface-variant);
	opacity: .5;
}

.row-icon-avatar {
	width: 32px;
	height: 32px;
	border-radius: var(--fms-radius-sm);
	background: var(--fms-secondary-container);
	color: var(--fms-secondary);
	/* portal.css has `.app-card-orders-table .cell span { display: inline-block }`
	   which outranks a single class on specificity — important needed to actually win. */
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 1;
}
.row-icon-avatar i {
	display: block;
	line-height: 1;
}

/* Row actions: always visible (matches the Stitch table mock), each icon keeps
   its own resting color — edit/view neutral, delete red — with a soft hover fill. */
.icon-action-row {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 2px;
}
.icon-action-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--fms-radius-full);
	color: var(--fms-on-surface-variant);
	background: transparent;
	border: none;
	transition: all .15s ease;
}
.icon-action-btn:hover,
.icon-action-btn:focus-visible {
	background: var(--fms-surface-container-high);
	color: var(--fms-primary);
}
.icon-action-btn-danger {
	color: var(--fms-error);
}
.icon-action-btn-danger:hover,
.icon-action-btn-danger:focus-visible {
	background: var(--fms-error);
	color: var(--fms-on-error);
}

/* Bento metadata cards (Details pages, desktop) */
.bento-card {
	background: var(--fms-surface-container-lowest);
	border: 1px solid var(--fms-surface-dim);
	border-radius: var(--fms-radius-sm);
	padding: var(--fms-space-md);
}
.bento-card-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fms-secondary);
	margin-bottom: var(--fms-space-sm);
}
.bento-card-value {
	font-family: var(--fms-font-headline);
	font-size: 24px;
	font-weight: 700;
	color: var(--fms-on-surface);
}

/* Empty-state placeholder box */
.empty-state-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 2px;
	padding: var(--fms-space-xl) var(--fms-space-md);
	border: 2px dashed var(--fms-surface-variant);
	border-radius: var(--fms-radius-sm);
	background: var(--fms-surface);
	color: var(--fms-on-surface-variant);
	flex: 1;
}
.empty-state-box .bi {
	font-size: 40px;
	color: var(--fms-surface-variant);
	margin-bottom: var(--fms-space-sm);
}

/* Review Report status picker (chip buttons replacing a <select>) */
.status-select-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: var(--fms-space-sm);
}
.status-select-chip {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: var(--fms-space-sm);
	border-radius: var(--fms-radius-lg);
	border: 2px solid transparent;
	background: var(--fms-surface-container-low);
	color: var(--fms-on-surface-variant);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all .15s ease;
}
.status-select-chip:hover {
	filter: brightness(0.97);
}
.status-select-chip.selected {
	border-color: var(--fms-primary-container);
	box-shadow: 0 0 0 1px var(--fms-primary-container);
	font-weight: 700;
}
.status-select-chip i {
	font-size: 18px;
}

/* Each status keeps its own semantic tint at rest — matches the Stitch mock
   (only the ring/border changes on selection, the color identity doesn't). */
.status-select-chip-pending {
	background: var(--fms-warning-bg);
	color: var(--fms-warning-text);
}
.status-select-chip-review {
	background: var(--fms-secondary-container);
	color: var(--fms-on-secondary-container);
}
.status-select-chip-damaged {
	background: var(--fms-error-container);
	color: var(--fms-on-error-container);
}
.status-select-chip-clear {
	background: var(--fms-success-bg);
	color: var(--fms-success-text);
}
.status-select-chip-resolved {
	background: var(--fms-surface-container-high);
	color: var(--fms-on-surface-variant);
}

.current-status-line {
	display: flex;
	align-items: center;
	gap: var(--fms-space-sm);
	margin-bottom: var(--fms-space-md);
	font-size: 14px;
	color: var(--fms-on-surface-variant);
}

/* "Created by / Updated by" identity text — the Stitch source consistently uses a
   distinct blue for these across every list/detail mock, so it reads as "who" at a
   glance rather than blending into the rest of the metadata. */
td.identity-text,
.identity-text {
	color: var(--fms-on-surface);
	font-weight: 400;
}

/* Small muted line under a page's <h1>, e.g. "Manage and monitor facility stations…" */
.app-page-subtitle {
	font-size: 14px;
	color: var(--fms-on-surface-variant);
	margin-top: 2px;
}

/* Product name everywhere it's shown (list rows, mobile cards, Details) — softer slate
   gray instead of near-black, still dark enough to read clearly as the primary text. */
.product-name {
	color: var(--fms-secondary) !important;
}

/* ==========================================================================
   "pcard" — new mobile card design, trialed first on Products/Index before
   rolling out to other list pages. Intentionally a separate component from
   .entity-card rather than a rework of it, so the old design stays intact
   elsewhere while this is being evaluated. Its title is deliberately full
   dark (not .product-name's softened gray) to match the reference design —
   see the compound override below.
   ========================================================================== */

.pcard-list {
	display: flex;
	flex-direction: column;
	gap: var(--fms-space-md);
}

.pcard {
	background: var(--fms-surface-container-lowest);
	border: 1px solid var(--fms-surface-dim);
	border-radius: var(--fms-radius-lg);
	box-shadow: var(--fms-shadow-1);
	overflow: hidden;
	cursor: pointer;
}

.pcard-body {
	padding: var(--fms-space-md);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.pcard-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--fms-space-sm);
}

.pcard-title-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.pcard-title {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0;
}
.pcard-title.product-name {
	color: var(--fms-on-surface) !important;
}

.pcard-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: var(--fms-radius-sm);
	background: var(--fms-surface-container-low);
	border: 1px solid var(--fms-surface-container-high);
	font-size: 11px;
	font-weight: 500;
	color: var(--fms-on-surface-variant);
	width: fit-content;
}
.pcard-badge i {
	color: var(--fms-primary-container);
	font-size: 11px;
}

.pcard-meta-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--fms-space-sm);
	padding: 10px;
	border-radius: var(--fms-radius-sm);
	background: var(--fms-surface-container-low);
	border: 1px solid var(--fms-surface-container);
}

.pcard-meta-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.pcard-meta-item + .pcard-meta-item {
	border-left: 1px solid var(--fms-surface-container-high);
	padding-left: 10px;
}

.pcard-meta-label {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--fms-on-surface-variant);
	opacity: .8;
}
.pcard-meta-value {
	font-size: 11px;
	font-weight: 500;
	color: var(--fms-on-surface);
}

.pcard-footer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fms-space-sm);
	font-size: 12px;
}

.pcard-creator-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	border-radius: var(--fms-radius-sm);
	background: var(--fms-surface-container-low);
	border: 1px solid var(--fms-surface-container-high);
	font-size: 11px;
	color: var(--fms-on-surface);
	min-width: 0;
}
.pcard-creator-pill span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pcard-creator-avatar {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--fms-surface-container-high);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fms-on-surface-variant);
	font-size: 9px;
	flex-shrink: 0;
}

.pcard-id-text {
	font-size: 11px;
	font-weight: 500;
	color: var(--fms-on-surface-variant);
	opacity: .8;
	white-space: nowrap;
}

.pcard-actions {
	border-top: 1px solid var(--fms-surface-container);
	background: var(--fms-surface-container-low);
	padding: 8px var(--fms-space-md);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--fms-space-sm);
}
.pcard-actions .app-btn-secondary,
.pcard-actions .app-btn-danger {
	font-size: 12px;
	padding: 6px 12px;
}

/* Turns a plain Bootstrap outline button's hover/active fill red instead of portal.css's
   default slate-gray, without touching its resting (non-hover) look. */
.btn-hover-red {
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #af0032;
	--bs-btn-hover-border-color: #af0032;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #af0032;
	--bs-btn-active-border-color: #af0032;
}

/* Whole table rows / entity-cards that navigate to a Details page on click
   (see the delegated click handler in app.js). */
[data-row-href] {
	cursor: pointer;
}

/* portal.css forces a blanket `.form-control { height: 2.5rem }`, which clips every
   <textarea class="form-control"> to a single-line-input height regardless of its
   `rows` attribute — so rows="3" never actually rendered 3 rows anywhere in the app.
   Restore the natural, rows-driven height for textareas specifically. */
textarea.form-control {
	height: auto;
	overflow-y: hidden;
	resize: none;
}

/* A <textarea rows="1"> styled to look like a normal single-line .form-control on
   desktop, but grows taller on phones so long values wrap instead of forcing the
   native horizontal scroll a single-line <input> would need. */
.mobile-tall-field {
	resize: none;
}
@media (max-width: 991.98px) {
	.mobile-tall-field {
		min-height: 90px;
	}
}

/* ==========================================================================
   Stock-per-sub-location editor (Products Create/Edit) — stacked cards
   instead of a wide table, so it never overflows on mobile.
   ========================================================================== */

.stock-row-section-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--fms-space-md);
	flex-wrap: wrap;
}
.stock-row-section-title {
	font-size: 15px;
	font-weight: 700;
	color: var(--fms-on-surface);
	margin: 0;
}
.stock-row-section-hint {
	font-size: 12px;
	color: var(--fms-on-surface-variant);
	margin: 2px 0 0;
}

.stock-row-list {
	display: flex;
	flex-direction: column;
	gap: var(--fms-space-sm);
}

.stock-row-card {
	background: var(--fms-surface-container-lowest);
	border: 1px solid var(--fms-surface-variant);
	border-radius: var(--fms-radius-md);
	padding: var(--fms-space-md);
}

.stock-row-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fms-space-sm);
	padding-bottom: var(--fms-space-sm);
	margin-bottom: var(--fms-space-sm);
	border-bottom: 1px solid var(--fms-surface-container);
}

.stock-row-select-wrap {
	display: flex;
	align-items: center;
	gap: var(--fms-space-sm);
	flex: 1;
	min-width: 0;
}

.stock-row-select {
	font-weight: 600;
	color: var(--fms-on-surface);
	min-width: 0;
}

.stock-row-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--fms-space-sm);
}
.stock-row-grid label {
	display: block;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--fms-on-surface-variant);
	margin-bottom: 4px;
}
.stock-row-grid input {
	text-align: center;
	font-weight: 600;
}

/* Product image dropzone (Create/Edit) */
.image-upload-zone {
	border: 2px dashed var(--fms-surface-variant);
	border-radius: var(--fms-radius-md);
	padding: var(--fms-space-lg);
	background: var(--fms-surface-container-low);
	transition: border-color .2s, background-color .2s;
}