/* ============================================
   HFS Admin — Component Layer
   Defines component appearance via tokens.
   No raw hex values. No inline style overrides.
   ============================================ */

/* Global disabled state */
/* button:disabled, select:disabled, input:disabled, textarea:disabled, */
/* .form-control:disabled, .form-select:disabled, .rcv-field-input:disabled { */
/* 	cursor: not-allowed; */
/* 	opacity: 0.6; */
/* } */
select:disabled,
input:disabled,
textarea:disabled,
.form-control:disabled,
.form-select:disabled,
.rcv-field-input:disabled {
	opacity: 0.6;
}

button:disabled,
.hfs-btn:disabled {
	cursor: not-allowed;
	opacity: 1;
}

/* ============================================
   ADMIN SHELL
   ============================================ */

.admin-topbar,
.admin-stat-card,
.card,
.dropdown-menu {
	background: var(--hfs-surface);
	color: var(--hfs-text);
}

/* Main content area and sections use page background, not surface */
.admin-main,
.admin-content {
	background: var(--hfs-bg);
	color: var(--hfs-text);
}
.admin-table-card {
	background: var(--hfs-dialog-bg);
	color: var(--hfs-text);
	border-color: var(--hfs-border);
}

/* Topbar + card headers use the brand bar color */
.admin-topbar,
.admin-table-card .card-header,
.admin-stat-card .card-header,
.card-header {
	background: var(--hfs-bar);
	color: var(--hfs-bar-text);
}

/* Sidebar brand strip */
.admin-sidebar .sidebar-brand {
	background: var(--hfs-bar);
	border-bottom: 1px solid var(--hfs-onbar-border);
}
.admin-sidebar .sidebar-brand .brand-text {
	/* Default: follow the bar text color unless a logo variant overrides it */
	color: var(--hfs-brand-strip-text, var(--hfs-bar-text));
}

/* Logo variant drives brand text color (keeps logo + text cohesive) */
.admin-sidebar .sidebar-brand.logo-gold .brand-text {
	color: var(--hfs-brand-strip-text);
}
.admin-sidebar .sidebar-brand.logo-white .brand-text {
	color: var(--hfs-bar-text);
}
.admin-sidebar .sidebar-brand.logo-black .brand-text {
	color: var(--hfs-text);
}

/* Tables — base token theming */
.table,
.table thead th,
.table tbody td {
	color: var(--hfs-text);
	border-color: var(--hfs-border);
	background-color: var(--hfs-bg);
	vertical-align: middle;
}

/* ── Admin section tables (non-POS) ── */

/* Dark header on all admin section tables */
.admin-section:not(.hfs-pos-fullscreen) .table thead th,
.admin-section:not(.hfs-pos-fullscreen) .admin-table thead th {
	background: var(--hfs-table-head-bg);
	color: var(--hfs-table-head-text);
	border-color: var(--hfs-table-head-bg);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
	padding: 6px 8px;
}

/* Compact body cells on all admin section tables */
.admin-section:not(.hfs-pos-fullscreen) .table tbody td,
.admin-section:not(.hfs-pos-fullscreen) .admin-table tbody td {
	font-size: 0.7rem;
	padding: 4px 8px;
}
/* Round the top-left and top-right corners of the first header row */
.admin-section:not(.hfs-pos-fullscreen) .table thead tr:first-child th:first-child,
.admin-section:not(.hfs-pos-fullscreen) .admin-table thead tr:first-child th:first-child {
	border-top-left-radius: 8px;
}
.admin-section:not(.hfs-pos-fullscreen) .table thead tr:first-child th:last-child,
.admin-section:not(.hfs-pos-fullscreen) .admin-table thead tr:first-child th:last-child {
	border-top-right-radius: 8px;
}
/* When a card already has an admin-card-title titlebar, the thead sits flush below it — no corner radius */
.admin-table-card:has(.admin-card-title) .table thead tr:first-child th:first-child { border-top-left-radius: 0; }
.admin-table-card:has(.admin-card-title) .table thead tr:first-child th:last-child  { border-top-right-radius: 0; }

/* Tables inside employee domain split panels (hfs-pos-fullscreen) need standard headers */
.emp-detail-scroll .table thead th,
.sch-detail-scroll .table thead th,
.emp-detail-fields .table thead th {
	background: var(--hfs-bg);
	color: var(--hfs-text);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
	padding: 6px 8px;
}
.emp-detail-scroll .table thead tr:first-child th:first-child,
.emp-detail-fields .table thead tr:first-child th:first-child {
	border-top-left-radius: 8px;
}
.emp-detail-scroll .table thead tr:first-child th:last-child,
.emp-detail-fields .table thead tr:first-child th:last-child {
	border-top-right-radius: 8px;
}
.emp-detail-scroll .table tbody td,
.emp-detail-fields .table tbody td {
	font-size: 0.7rem;
	padding: 4px 8px;
}

/* Editable/record tables: striped rows, hover */
.admin-section .table-records > tbody > tr:nth-child(odd) > td {
	background: transparent;
}
.admin-section .table-records > tbody > tr:nth-child(even) > td {
	background: var(--hfs-admin-row-alt);
}
.admin-section .table-records > tbody > tr:hover > td {
	background: var(--hfs-row-hover) !important;
}

/* Form-based/settings tables: hfs-bg body, no stripe */
.admin-section .table-settings {
	background: var(--hfs-bg);
}
.admin-section .table-settings tbody tr {
	background: var(--hfs-bg);
}
.admin-section .table-settings td,
.admin-section .table-settings th {
	background: var(--hfs-bg);
}

/* Inputs */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
select,
textarea,
.form-control:not(.form-control-color),
.form-select {
	background-color: var(--hfs-input-bg);
	color: var(--hfs-text);
	border-color: var(--hfs-border);
}
input::placeholder,
textarea::placeholder,
.form-control::placeholder,
.hfs-input::placeholder {
	color: var(--hfs-placeholder-color, #adb5bd);
	opacity: 1;
	font-style: italic;
}

/* Checkboxes */
.form-check-input {
	accent-color: var(--hfs-checkbox-accent);
}
.form-check-input:checked {
	background-color: var(--hfs-checkbox-accent);
	border-color: var(--hfs-checkbox-accent);
}


/* ============================================
   BOOTSTRAP MODALS (admin section)
   ============================================ */

.modal-content {
	background: var(--hfs-surface);
	color: var(--hfs-text);
	border: 1px solid var(--hfs-border);
	border-radius: 12px;
}
.modal-header {
	background: var(--hfs-bar);
	color: var(--hfs-bar-text);
	border-bottom: 1px solid var(--hfs-border);
	padding: 10px 14px;
}
.modal-header .modal-title {
	color: var(--hfs-bar-text);
	font-weight: 600;
}
.modal-header .btn-close {
	filter: var(--hfs-close-filter, none);
	opacity: 0.9;
}
.modal-footer {
	background: var(--hfs-surface);
	border-top: 1px solid var(--hfs-border);
	padding: 10px 14px;
}
.modal-body {
	background: var(--hfs-surface);
	padding: 12px 14px;
}
.modal-body .text-muted {
	color: var(--hfs-text-muted) !important;
}

/* Modal buttons — use brand bar system */
.modal .btn-success,
.modal .btn-primary,
.modal .btn-danger {
	background: var(--hfs-bar) !important;
	border-color: var(--hfs-bar) !important;
	color: var(--hfs-bar-text) !important;
}
.modal .btn-success:hover,
.modal .btn-primary:hover,
.modal .btn-danger:hover {
	filter: brightness(1.18);
	box-shadow: 0 0 0 2px var(--hfs-gold-fill-strong);
}
.modal .btn-secondary,
.modal .btn-outline-secondary {
	background: transparent !important;
	border-color: var(--hfs-bar) !important;
	color: var(--hfs-bar) !important;
}
.modal .btn-secondary:hover,
.modal .btn-outline-secondary:hover {
	background: var(--hfs-bar) !important;
	color: var(--hfs-bar-text) !important;
}

/* Close X button (FontAwesome variant) used in modal headers */
.hfs-modal-x {
	background: transparent;
	border: 1px solid var(--hfs-onbar-border-stronger);
	color: var(--hfs-bar-text);
	width: 28px;
	height: 28px;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.hfs-modal-x i { color: var(--hfs-bar-text) !important; }
.hfs-modal-x:hover,
.hfs-modal-x:focus {
	filter: brightness(1.18);
	box-shadow: 0 0 0 2px var(--hfs-gold-border-strong);
	outline: none;
}


/* ============================================
   DASHBOARD
   ============================================ */

/* Low Stock Alerts — passive striped list */
#dashLowStock .dash-lowstock-row {
	padding: 6px 0.8rem;
	border-bottom: 1px solid var(--hfs-border);
}
#dashLowStock .dash-lowstock-row:nth-child(even) {
	background: var(--hfs-gold-panel-fill);
}
#dashLowStock .dash-lowstock-row:hover {
	background: inherit;
}


/* ============================================
   POS DIALOG SYSTEM
   hfs-overlay  = fullscreen backdrop
   hfs-dialog   = the modal box
   hfs-dialog-bar   = header bar (dark brand bar)
   hfs-dialog-body  = scrollable content area
   hfs-dialog-footer = action row at bottom
   ============================================ */

/* Backdrop */
.hfs-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: var(--hfs-overlay-backdrop);
	z-index: 1050;
	align-items: center;
	justify-content: center;
}
.hfs-overlay.open {
	display: flex;
}

/* Scoped overlay — covers only the parent section, not the whole viewport */
.hfs-section-overlay {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 200;
	align-items: center;
	justify-content: center;
}
.hfs-section-overlay.open {
	display: flex;
}

/* Dialog box */
.hfs-dialog {
	background: var(--hfs-dialog-bg);
	color: var(--hfs-text);
	border: 1px solid var(--hfs-border);
	border-radius: 12px;
	box-shadow: 0 18px 55px var(--hfs-shadow-xl);
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Resizable variant */
.hfs-dialog--resizable {
	resize: both;
	overflow: hidden;
}

/* Dialog size modifiers */
/* Dialog size modifiers — viewport-relative, capped so dialog never fills entire screen */
.hfs-dialog--sm {
	width: min(90vw, 460px);
	max-height: 63vh;
	min-width: 300px;
	min-height: 200px;
}
.hfs-dialog--md {
	width: min(90vw, 700px);
	max-height: 88vh;
	min-width: 300px;
	min-height: 200px;
}
.hfs-dialog--lg {
	width: min(85vw, 860px);
	height: 80vh;
	min-width: 300px;
	min-height: 300px;
}
.hfs-dialog--xl {
	width: min(85vw, 1080px);
	height: 86vh;
	min-width: 300px;
	min-height: 300px;
}

/* Header bar */
.hfs-dialog-bar {
	background: var(--hfs-bar);
	color: var(--hfs-bar-text);
	border-bottom: 1px solid var(--hfs-border);
	padding: 10px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
}
.hfs-dialog-bar h4,
.hfs-dialog-bar h5,
.hfs-dialog-bar .modal-title {
	color: var(--hfs-bar-text);
	font-weight: 600;
	margin: 0;
	font-size: 0.95rem;
}
.hfs-dialog-bar i {
	color: var(--hfs-bar-text);
}

/* Dialog body */
.hfs-dialog-body {
	flex: 1;
	overflow-y: auto;
	background: var(--hfs-dialog-bg);
	color: var(--hfs-text);
	padding: 16px;
}

/* Dialog footer */
.hfs-dialog-footer {
	background: var(--hfs-surface);
	border-top: 1px solid var(--hfs-border);
	padding: 10px 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.hfs-dialog-footer--end     { justify-content: flex-end; }
.hfs-dialog-footer--between { justify-content: space-between; }

/* X icon button inside hfs-dialog-bar — white bg + dark border; hover inverts */
.hfs-dialog-x {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	border: 1px solid var(--hfs-onbar-border-max);
	background: transparent;
	color: var(--hfs-bar-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	margin-left: 12px;
	padding: 0;
	transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.hfs-dialog-x i { color: var(--hfs-bar-text) !important; transition: color 0.12s; }
.hfs-dialog-x:hover,
.hfs-dialog-x:focus {
	background: var(--hfs-onbar-border-max);
	border-color: var(--hfs-bar-text);
	box-shadow: none;
	outline: none;
}
.hfs-dialog-x:hover i,
.hfs-dialog-x:focus i { color: var(--hfs-bar-text) !important; }

/* hfs-dialog-close is the JS event hook class — no sizing rules here.
   On the X button it gets hfs-dialog-x for appearance.
   On Cancel buttons it gets hfs-btn hfs-btn-secondary + hfs-btn--md for appearance. */

/* Sub-section header bars inside dialogs (count labels etc.) */
.hfs-subbar {
	padding: 6px 12px;
	background: var(--hfs-subbar-bg);
	color: var(--hfs-subbar-text);
	border-bottom: 1px solid var(--hfs-subbar-border);
	font-size: 0.65rem;
	text-transform: uppercase;
	font-weight: 700;
}
.hfs-subbar-count {
	margin-left: 4px;
	color: var(--hfs-subbar-text);
	font-weight: 600;
}


/* ============================================
   POS DIALOG CONTROLS
   ============================================ */

/* ============================================
   POS BUTTON SYSTEM
   Base styles shared by primary + secondary.
   Size modifier classes: --sm, --md (default footer), --lg
   ============================================ */

/* Shared base — apply alongside primary/secondary */
/* ============================================
   BUTTON SYSTEM — canonical definitions
   One rule per variant. All use .hfs-btn.hfs-btn-* (double-class)
   so specificity always beats .hfs-btn alone.
   ============================================ */

/* Base — all buttons inherit this */
.hfs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.85rem;
	white-space: nowrap;
	cursor: pointer;
	flex-shrink: 0;
	vertical-align: middle;
	border: 1px solid transparent;
	line-height: 1;
	text-decoration: none;
	transition: filter 0.1s, box-shadow 0.1s, background 0.1s, color 0.1s, border-color 0.1s;
	/* Default size = --md */
	height: 36px;
	padding: 0 16px;
}

/* Primary — filled brand bar */
.hfs-btn.hfs-btn-primary {
	background: var(--hfs-bar);
	border-color: var(--hfs-bar);
	color: var(--hfs-bar-text);
}
.hfs-btn.hfs-btn-primary:not(:disabled):hover,
.hfs-btn.hfs-btn-primary:not(:disabled):focus {
	filter: brightness(1.18);
	box-shadow: 0 0 0 2px var(--hfs-gold-fill-strong);
	outline: none;
}
.hfs-btn.hfs-btn-primary:disabled {
	opacity: 1;
	cursor: not-allowed;
	filter: none;
	box-shadow: none;
}

/* Secondary — outlined */
.hfs-btn.hfs-btn-secondary {
	background: transparent;
	border-color: var(--hfs-bar);
	color: var(--hfs-bar);
}
.hfs-btn.hfs-btn-secondary:not(:disabled):hover,
.hfs-btn.hfs-btn-secondary:not(:disabled):focus {
	background: var(--hfs-bar);
	color: var(--hfs-bar-text);
	outline: none;
}
.hfs-btn.hfs-btn-secondary:disabled {
	opacity: 1;
	cursor: not-allowed;
	filter: none;
	box-shadow: none;
}

/* Danger/destructive button */
.hfs-btn.hfs-btn-danger {
	background: var(--hfs-btn-danger-bg);
	border-color: var(--hfs-btn-danger-border);
	color: var(--hfs-btn-danger-text);
}
.hfs-btn.hfs-btn-danger:not(:disabled):hover,
.hfs-btn.hfs-btn-danger:not(:disabled):focus {
	background: var(--hfs-btn-danger-hover-bg);
	outline: none;
}

/* Neutral — inline table/row controls only (qty +/-, set-primary, row-level toggles).
   NEVER use in dialog footers. Dialog secondary actions use hfs-btn-secondary. */
.hfs-btn.hfs-btn-neutral {
	background: var(--hfs-btn-neutral-bg);
	border-color: var(--hfs-btn-neutral-border);
	color: var(--hfs-btn-neutral-text);
}
.hfs-btn.hfs-btn-neutral:not(:disabled):hover,
.hfs-btn.hfs-btn-neutral:not(:disabled):focus {
	background: var(--hfs-btn-neutral-hover-bg);
	outline: none;
}

/* Success (green) button */
.hfs-btn.hfs-btn-success {
	background: var(--hfs-green);
	border-color: var(--hfs-green);
	color: #fff;
}
.hfs-btn.hfs-btn-warning:not(:disabled):hover,
.hfs-btn.hfs-btn-warning:not(:disabled):focus {
	background: var(--hfs-green-dark);
	border-color: var(--hfs-green-dark);
	outline: none;
}

/* Warning (gold) button */
.hfs-btn.hfs-btn-warning {
	background: var(--hfs-gold, #c89a30);
	border-color: var(--hfs-gold, #c89a30);
	color: #fff;
}
.hfs-btn.hfs-btn-warning:hover,
.hfs-btn.hfs-btn-warning:focus {
	background: #a67d1a;
	border-color: #a67d1a;
	outline: none;
}

/* Size modifiers */
.hfs-btn--sm {
	height: 28px;
	padding: 0 12px;
	font-size: 0.78rem;
}
.hfs-btn--md {
	height: 36px;
	padding: 0 18px;
	font-size: 0.85rem;
}
.hfs-btn--lg {
	height: 44px;
	padding: 0 24px;
	font-size: 0.95rem;
}



/* Text inputs inside POS dialogs */
.hfs-input {
	background: var(--hfs-input-bg);
	color: var(--hfs-text);
	border: 1px solid var(--hfs-border-focus-soft);
	border-radius: 8px;
	padding: 0 12px;
	height: var(--hfs-control-height);
	font-size: 0.9rem;
	width: 100%;
	text-align: left;
	box-sizing: border-box;
}
.hfs-input:focus {
	border-color: var(--hfs-gold-glow-strong);
	box-shadow: 0 0 0 2px var(--hfs-gold-fill-strong);
	outline: none;
}

/* Uppercase field label (gold accent) */
.hfs-field-label {
	font-size: 0.75rem;
	color: var(--hfs-brand-accent);
	text-transform: uppercase;
	font-weight: 600;
	display: block;
	margin-bottom: 4px;
}

/* Empty state hint text — token-driven, no opacity */
.hfs-empty-hint {
	color: var(--hfs-empty-state-text);
	text-align: center;
	padding: 40px;
	font-size: 0.8rem;
}
.hfs-empty-hint i {
	display: block;
	font-size: 1.8rem;
	margin-bottom: 8px;
	color: var(--hfs-empty-state-icon);
}

/* POS dialog form fields */
.hfs-field {
	margin-bottom: 10px;
}
.hfs-form-label {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--hfs-text-muted);
	margin-bottom: 4px;
}
.hfs-input--full {
	width: 100%;
}
.hfs-dialog-hint {
	font-size: 0.78rem;
	color: var(--hfs-text-muted);
	margin-bottom: 12px;
	line-height: 1.4;
}

/* Customer lookup result rows */
.hfs-customer-row {
	padding: 10px 16px;
	border-bottom: 1px solid var(--hfs-border);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	transition: background 0.1s;
}
.hfs-customer-row:hover {
	background: var(--hfs-row-hover);
}
.hfs-customer-row--selected {
	background: var(--hfs-success-fill);
}
.hfs-customer-row--selected:hover {
	background: var(--hfs-success-fill);
}
.hfs-customer-row-name {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--hfs-text);
}
.hfs-customer-row-sub {
	font-size: 0.72rem;
	color: var(--hfs-text-muted);
	margin-top: 2px;
}
.hfs-customer-row-sub i {
	font-size: 0.6rem;
	margin-right: 3px;
}
.hfs-customer-row-check {
	color: var(--hfs-green);
	font-size: 0.9rem;
}
.hfs-customer-row-chevron {
	color: var(--hfs-text-muted);
	font-size: 0.65rem;
}

/* Error message */
.hfs-field-error {
	background: var(--hfs-danger-fill-subtle);
	border: 1px solid var(--hfs-danger-border);
	color: var(--hfs-danger);
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 0.8rem;
}

/* Action button group — inline flex with gap for table row actions */
.hfs-action-btn-group {
	display: inline-flex;
	gap: 4px;
	align-items: center;
}

/* Icon buttons (search/clear in search bars) */
.hfs-btn.hfs-btn-icon {
	background: var(--hfs-bar);
	border: 1px solid var(--hfs-bar);
	color: var(--hfs-bar-text);
	width: var(--hfs-control-height);
	height: var(--hfs-control-btn-height);
	padding: 0;
	flex-shrink: 0;
	cursor: pointer;
}
.hfs-btn.hfs-btn-icon:disabled {
	cursor: not-allowed;
	box-shadow: none;
	filter: saturate(0.35);
}

.hfs-btn.hfs-btn-icon:disabled i {
	opacity: 0.55;
}

/* Ensure icon buttons keep control height inside Bootstrap input-groups */
.input-group .hfs-btn.hfs-btn-icon,
.input-group-sm .hfs-btn.hfs-btn-icon {
	height: var(--hfs-control-btn-height);
	min-height: var(--hfs-control-btn-height);
	width: var(--hfs-control-height);
}
/* Match input height inside hfs-input-group */
.hfs-input-group .form-control,
.hfs-input-group .form-select {
	height: var(--hfs-control-height);
}
.hfs-btn.hfs-btn-icon i { 
	color: var(--hfs-bar-text) !important; 
}

.hfs-btn.hfs-btn-icon:not(:disabled):hover,
.hfs-btn.hfs-btn-icon:not(:disabled):focus {
	filter: brightness(1.18);
	box-shadow: 0 0 0 2px var(--hfs-gold-border);
	outline: none;
}
.hfs-btn-icon--clear { border-radius: 0; }
.hfs-btn-icon--search { border-radius: 0 8px 8px 0; }
/* Ensure last icon button in input-group keeps its right radius */
.input-group > .hfs-btn-icon:last-child,
.input-group > .hfs-btn-icon--search {
	border-top-right-radius: 8px !important;
	border-bottom-right-radius: 8px !important;
}
/* Generic: always round the last element of any input group */
.hfs-input-group > :last-child { border-top-right-radius: 8px !important; border-bottom-right-radius: 8px !important; }


/* ============================================
   POS PAYMENT DIALOG
   ============================================ */

/* Payment method selector buttons */
.hfs-method-buttons {
	display: flex;
	gap: 8px;
	margin-bottom: 12px;
}
.hfs-method-btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 10px 6px;
	background: var(--hfs-surface);
	border: 2px solid var(--hfs-border);
	border-radius: 8px;
	color: var(--hfs-text);
	cursor: pointer;
	font-size: 0.78rem;
	font-weight: 600;
	transition: border-color 0.15s, background 0.15s;
}
.hfs-method-btn:hover {
	border-color: var(--hfs-brand-accent);
	color: var(--hfs-brand-accent);
}
.hfs-method-btn.selected {
	border-color: var(--hfs-brand-accent);
	background: var(--hfs-chart-sales-fill);
	color: var(--hfs-brand-accent);
}
.hfs-method-btn i { font-size: 1.2rem; }

/* Total display */
.hfs-total-display {
	background: var(--hfs-bar);
	color: var(--hfs-bar-text);
	border-radius: 8px;
	padding: 12px 16px;
	margin-bottom: 12px;
	text-align: center;
}

/* Input label */
.hfs-input-label {
	font-size: 0.75rem;
	color: var(--hfs-text-muted);
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 4px;
	display: block;
}

/* Change row */
.hfs-change-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--hfs-success-fill-subtle);
	border: 1px solid var(--hfs-success-border);
	border-radius: 6px;
	padding: 8px 12px;
	margin-top: 8px;
}
.hfs-change-label {
	font-size: 0.75rem;
	color: var(--hfs-text-muted);
}
.hfs-change-value {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--hfs-green);
}

/* Numpad */
.hfs-numpad {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin-top: 10px;
}
.hfs-numpad button {
	padding: 12px;
	background: var(--hfs-surface);
	border: 1px solid var(--hfs-border);
	border-radius: 6px;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--hfs-text);
	cursor: pointer;
}
.hfs-numpad button:hover {
	background: var(--hfs-pos-hover);
}
.hfs-numpad-clear {
	background: var(--hfs-danger-fill-subtle) !important;
	color: var(--hfs-danger) !important;
	border-color: var(--hfs-danger-border) !important;
}

/* Payment dialog two-column layout */
.hfs-pay-body {
	padding: 12px 16px;
	flex: 1 1 auto;
	overflow: auto;
}

.hfs-pay-cols {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.hfs-pay-left {
	flex: 1 1 0;
	min-width: 0;
}

.hfs-pay-right {
	flex: 0 0 auto;
	width: 190px;
}

/* Payment numpad variant — fills the right column height */
.hfs-numpad--payment {
	margin-top: 0;
	height: 100%;
}

.hfs-numpad--payment button {
	padding: 16px 6px;
	font-size: 1.2rem;
}

/* Pay cash / card complete buttons */
.hfs-pay-cash {
	background: var(--hfs-pay-cash-bg);
	border-color: var(--hfs-pay-cash-bg);
	color: white;
}
.hfs-pay-cash:hover { background: var(--hfs-pay-cash-hover-bg); }
.hfs-pay-card {
	background: var(--hfs-pay-card-bg);
	border-color: var(--hfs-pay-card-bg);
	color: white;
}
.hfs-pay-card:hover { background: var(--hfs-pay-card-hover-bg); }


/* ============================================
   POS REGISTER — TERMINAL ZONES
   ============================================ */

/* Zone B: Scan / Input Header */
.hfs-pos-fullscreen .center-panel {
	background: var(--hfs-bg) !important;
}
.hfs-pos-fullscreen .barcode-section {
	background: var(--hfs-pos-tint) !important;
	border-bottom: 1px solid var(--hfs-border);
}
.hfs-pos-fullscreen .barcode-input {
	background: var(--hfs-input-bg) !important;
	color: var(--hfs-text) !important;
	border: 1px solid var(--hfs-border) !important;
	border-right: none !important;
}
.hfs-pos-fullscreen .barcode-input::placeholder {
	color: var(--hfs-text-muted) !important;
}
.hfs-pos-fullscreen .barcode-input:focus {
	border-color: var(--hfs-border-focus-strong) !important;
	box-shadow: 0 0 0 2px var(--hfs-ring-focus) !important;
}
.hfs-pos-fullscreen .barcode-wrapper .hfs-btn.hfs-btn-icon {
	background: var(--hfs-bar) !important;
	border-color: var(--hfs-bar) !important;
	color: var(--hfs-bar-text) !important;
}
.hfs-pos-fullscreen .barcode-wrapper .hfs-btn.hfs-btn-icon i {
	color: var(--hfs-bar-text) !important;
}
.hfs-pos-fullscreen .barcode-wrapper .hfs-btn.hfs-btn-icon:not(:disabled):hover,
.hfs-pos-fullscreen .barcode-wrapper .hfs-btn.hfs-btn-icon:not(:disabled):focus {
	filter: brightness(1.18);
	box-shadow: 0 0 0 2px var(--hfs-gold-fill-strong);
}

.hfs-pos-fullscreen .barcode-wrapper > .hfs-btn {
	border-radius: 0 !important;
}

.hfs-pos-fullscreen .barcode-wrapper > .hfs-btn:last-child {
	border-top-right-radius: 8px !important;
	border-bottom-right-radius: 8px !important;
}

/* Zone C: Cart Surface */
.hfs-pos-fullscreen .items-section {
	background: var(--hfs-pos-tint) !important;
}
.hfs-pos-fullscreen .items-empty,
.hfs-pos-fullscreen .items-placeholder,
.hfs-pos-fullscreen .items-section .empty-state {
	background: transparent !important;
}
.hfs-pos-fullscreen .items-table thead {
	background: var(--hfs-bar) !important;
	color: var(--hfs-bar-text) !important;
}
.hfs-pos-fullscreen .items-table thead th {
	color: var(--hfs-bar-text) !important;
}
.hfs-pos-fullscreen .items-table tbody tr {
	background: var(--hfs-surface) !important;
	border-bottom: 1px solid var(--hfs-border) !important;
}
.hfs-pos-fullscreen .items-table tbody tr:hover {
	background: var(--hfs-pos-hover) !important;
}
.hfs-pos-fullscreen .product-name,
.hfs-pos-fullscreen .price,
.hfs-pos-fullscreen .total,
.hfs-pos-fullscreen .qty-num {
	color: var(--hfs-text) !important;
}
.hfs-pos-fullscreen .product-code {
	color: var(--hfs-text-muted) !important;
}
.hfs-pos-fullscreen .qty-controls {
	background: var(--hfs-pos-tint) !important;
}
.hfs-pos-fullscreen .qty-btn {
	background: var(--hfs-surface) !important;
	border-color: var(--hfs-border-focus) !important;
	color: var(--hfs-brand-accent) !important;
}
.hfs-pos-fullscreen .qty-btn:hover {
	background: var(--hfs-brand-accent) !important;
	color: var(--hfs-surface) !important;
}

/* Zone D: Totals Bar */
.hfs-pos-fullscreen .summary-bar {
	background: var(--hfs-bar) !important;
	color: var(--hfs-bar-text) !important;
	border-top: 1px solid var(--hfs-onbar-border-soft);
}
.hfs-pos-fullscreen .summary-label { color: var(--hfs-onbar-text-muted) !important; }
.hfs-pos-fullscreen .summary-value { color: var(--hfs-surface) !important; }
.hfs-pos-fullscreen .summary-right { background: var(--hfs-bar) !important; }
.hfs-pos-fullscreen .summary-middle { background: var(--hfs-bar) !important; border-left-color: var(--hfs-onbar-border-soft) !important; }
.hfs-pos-fullscreen .total-label   { color: var(--hfs-onbar-text-muted-strong) !important; }
.hfs-pos-fullscreen .total-value   { color: var(--hfs-gold) !important; }

/* Zone E: Right Sidebar */
.hfs-pos-fullscreen .sidebar-right {
	background: var(--hfs-pos-sidebar-bg) !important;
	border-left: 1px solid var(--hfs-pos-sidebar-border);
}
.hfs-pos-fullscreen .sidebar-right-header {
	background: var(--hfs-pos-header-bg) !important;
	border-bottom: 1px solid var(--hfs-pos-sidebar-border) !important;
}
.hfs-pos-fullscreen .header-info       { color: var(--hfs-text-muted) !important; }
.hfs-pos-fullscreen .header-info-label { color: var(--hfs-text-muted) !important; }
.hfs-pos-fullscreen .header-info-value { color: var(--hfs-text) !important; }

/* Bridge status pill */
.hfs-pos-fullscreen .bridge-status {
	padding: 1px 6px;
	line-height: 1.3;
	border: 1px solid var(--hfs-border);
	background: var(--hfs-surface);
	color: var(--hfs-text) !important;
}
.hfs-pos-fullscreen .bridge-status.online {
	background: var(--hfs-success-fill-subtle);
	border-color: var(--hfs-success-border);
}
.hfs-pos-fullscreen .bridge-status.offline {
	background: var(--hfs-danger-fill-subtle);
	border-color: var(--hfs-danger-border);
}

/* Customer block */
.hfs-pos-fullscreen .customer-section {
	background: var(--hfs-pos-tint) !important;
	border-bottom: 1px solid var(--hfs-pos-sidebar-border) !important;
	padding: 10px !important;
}
.hfs-pos-fullscreen .customer-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
	color: var(--hfs-brand-accent) !important;
}
.hfs-pos-fullscreen .customer-actions { display: flex; gap: 4px; }
.hfs-pos-fullscreen .customer-info    { font-size: 0.7rem; padding: 4px 0; color: var(--hfs-text-muted) !important; }
.hfs-pos-fullscreen .customer-empty   { color: var(--hfs-empty-state-text); }
.hfs-pos-fullscreen .customer-details { font-size: 0.68rem; color: var(--hfs-text) !important; padding: 0 0 4px; }
.hfs-pos-fullscreen .customer-phone   { margin-top: 2px; color: var(--hfs-text) !important; }
.hfs-pos-fullscreen .customer-email   { margin-top: 1px; color: var(--hfs-text-muted) !important; }
.hfs-pos-fullscreen .customer-remove-btn {
	background: none;
	border: none;
	color: var(--hfs-danger);
	font-size: 0.62rem;
	cursor: pointer;
	padding: 2px 0;
	margin-top: 2px;
}

/* Customer icon buttons */
.hfs-pos-fullscreen .hfs-register-customer-btn,
.hfs-pos-fullscreen .hfs-register-customer-btn:hover,
.hfs-pos-fullscreen .hfs-register-customer-btn:focus,
.hfs-pos-fullscreen .hfs-register-customer-btn:active {
	width: 26px;
	height: 26px;
	font-size: 0.72rem;
	background: var(--hfs-bar) !important;
	border-color: var(--hfs-bar) !important;
	color: var(--hfs-bar-text) !important;
	border-radius: 4px;
	padding: 0;
}
.hfs-pos-fullscreen .hfs-register-customer-btn i,
.hfs-pos-fullscreen .hfs-register-customer-btn:hover i,
.hfs-pos-fullscreen .hfs-register-customer-btn:focus i,
.hfs-pos-fullscreen .hfs-register-customer-btn:active i { color: var(--hfs-bar-text) !important; }
.hfs-pos-fullscreen .hfs-register-customer-btn:hover,
.hfs-pos-fullscreen .hfs-register-customer-btn:focus {
	filter: brightness(1.18);
	box-shadow: 0 0 0 2px var(--hfs-gold-fill-strong);
}

/* Actions grid */
.hfs-pos-fullscreen .actions-grid {
	background: var(--hfs-pos-tint) !important;
	border-bottom: 1px solid var(--hfs-pos-sidebar-border);
}
.hfs-pos-fullscreen .hfs-register-action-btn {
	background: var(--hfs-surface) !important;
	border: 1px solid var(--hfs-border) !important;
	color: var(--hfs-text) !important;
	font-weight: 700;
	border-radius: 6px;
	min-height: 54px;
	gap: 4px;
	box-shadow: none !important;
	transform: none !important;
}
.hfs-pos-fullscreen .hfs-register-action-btn i { color: var(--hfs-text) !important; }
.hfs-pos-fullscreen .hfs-register-action-btn:hover {
	background: var(--hfs-pos-hover) !important;
	border-color: var(--hfs-border-focus) !important;
}

/* Subtle function cues via left border */
.hfs-pos-fullscreen .hfs-register-btn-void     { border-left: 4px solid var(--hfs-pos-accent-void) !important; }
.hfs-pos-fullscreen .hfs-register-btn-hold     { border-left: 4px solid var(--hfs-pos-accent-hold) !important; }
.hfs-pos-fullscreen .hfs-register-btn-return   { border-left: 4px solid var(--hfs-pos-accent-return) !important; }
.hfs-pos-fullscreen .hfs-register-btn-discount { border-left: 4px solid var(--hfs-pos-accent-discount) !important; }
.hfs-pos-fullscreen .hfs-register-btn-pickup   { border-left: 4px solid var(--hfs-pos-accent-pickup) !important; }
.hfs-pos-fullscreen .hfs-register-btn-delivery { border-left: 4px solid var(--hfs-pos-accent-delivery) !important; }
.hfs-pos-fullscreen .hfs-register-btn-register { border-left: 4px solid var(--hfs-pos-accent-register) !important; }
.hfs-pos-fullscreen .hfs-register-btn-lock     { border-left: 4px solid var(--hfs-pos-accent-neutral) !important; }
.hfs-pos-fullscreen .hfs-register-btn-reprint  { border-left: 4px solid var(--hfs-pos-accent-neutral) !important; }
.hfs-pos-fullscreen .hfs-register-btn-nosale   { border-left: 4px solid var(--hfs-pos-accent-nosale) !important; }

/* Keypad */
.hfs-pos-fullscreen .keypad-section {
	background: var(--hfs-pos-tint) !important;
}
.hfs-pos-fullscreen .hfs-register-key-btn {
	background: var(--hfs-surface) !important;
	border-top: 1px solid var(--hfs-border) !important;
	border-right: 1px solid var(--hfs-border) !important;
	border-bottom: 1px solid var(--hfs-border) !important;
	border-left: 4px solid var(--hfs-bar) !important;
	color: var(--hfs-text) !important;
	border-radius: 6px;
}
.hfs-pos-fullscreen .hfs-register-key-btn:hover {
	background: var(--hfs-pos-hover) !important;
	border-color: var(--hfs-border-focus) !important;
}
.hfs-pos-fullscreen .hfs-register-tender-btn {
	background: var(--hfs-bar) !important;
	color: var(--hfs-bar-text) !important;
	border-radius: 8px;
}
.hfs-pos-fullscreen .hfs-register-tender-btn:hover { filter: brightness(1.08); }
.hfs-pos-fullscreen .hfs-register-tender-btn i     { color: var(--hfs-bar-text) !important; }


/* ============================================
   POS LOCK SCREEN
   ============================================ */

.hfs-lock-icon {
	font-size: 2rem;
	color: var(--hfs-brand-accent);
	margin-bottom: 10px;
	display: block;
}
.hfs-lock-title {
	margin: 0 0 4px;
	color: var(--hfs-surface);
	font-size: 1rem;
}
.hfs-lock-sub {
	font-size: 0.8rem;
	color: var(--hfs-text-muted);
	margin-bottom: 16px;
}
.hfs-lock-error {
	color: var(--hfs-danger-bg);
	font-size: 0.75rem;
	margin-top: 6px;
}
.hfs-unlock-btn {
	background: var(--hfs-green) !important;
	border-color: var(--hfs-green) !important;
	padding: 10px;
}


/* ============================================
   POS RETURNS DIALOG
   ============================================ */

/* hfs-return-thead-row — covered by .hfs-return-table thead th above */
.hfs-return-totals-bar {
	padding: 8px 16px;
	border-top: 1px solid var(--hfs-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	font-size: 1rem;
}
.hfs-return-count        { color: var(--hfs-brand-accent); }
.hfs-return-total-label  { color: var(--hfs-brand-accent); }
.hfs-return-total-value  { color: var(--hfs-brand-accent); font-weight: 700; }

/* Return payment buttons */
.hfs-return-btn {
	flex: none;
	padding: 8px 14px;
	font-size: 0.78rem;
	white-space: nowrap;
	border-radius: 6px;
	font-weight: 600;
	border: none;
	cursor: pointer;
}
.hfs-return-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.hfs-return-cash-btn   { background: var(--hfs-pay-cash-bg);  color: white; }
.hfs-return-card-btn   { background: var(--hfs-pay-card-bg);  color: white; }
.hfs-return-credit-btn { background: var(--hfs-brand-accent); color: var(--hfs-brown-dark); }
.hfs-return-cash-btn:hover:not(:disabled)   { background: var(--hfs-pay-cash-hover-bg); }
.hfs-return-card-btn:hover:not(:disabled)   { background: var(--hfs-pay-card-hover-bg); }
.hfs-return-credit-btn:hover:not(:disabled) { filter: brightness(1.08); }

/* Process Return — search input row (input + clear + search buttons in one group) */
/* ---- Search input rows — input + clear + search joined as one unit ---- */
/* Applies to: Customer Lookup, Product Search, Order Pickup, Process Return */
.hfs-search-dialog-row,
.hfs-pickup-search-row,
.hfs-return-search-row {
	display: flex;
	align-items: stretch;
	gap: 0;
}
.hfs-search-dialog-row .hfs-input,
.hfs-pickup-search-row .hfs-input,
.hfs-return-search-row .hfs-input {
	flex: 1;
	border-right: none;
	border-radius: 8px 0 0 8px;
}
.hfs-search-dialog-row .hfs-btn.hfs-btn-icon,
.hfs-pickup-search-row .hfs-btn.hfs-btn-icon,
.hfs-return-search-row .hfs-btn.hfs-btn-icon {
	border-radius: 0;
	border-left: none;
	border-right: none;
}
.hfs-search-dialog-row .hfs-btn.hfs-btn-icon:last-child,
.hfs-pickup-search-row .hfs-btn.hfs-btn-icon:last-child,
.hfs-return-search-row .hfs-btn.hfs-btn-icon:last-child {
	border-radius: 0 8px 8px 0;
	border-right: 1px solid var(--hfs-bar);
}

/* ---- Footer button groups ---- */
.hfs-register-btn-group {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Process Return — list area fills remaining dialog height */
.hfs-return-list-area {
	flex: 1;
	overflow-y: auto;
	background: var(--hfs-dialog-bg);
}

/* Process Return — table layout */
.hfs-return-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.85rem;
}
.hfs-return-table th,
.hfs-return-table td {
	padding: 7px 12px;
	text-align: left;
	border-bottom: 1px solid var(--hfs-border);
	white-space: nowrap;
}
.hfs-return-table thead th {
	background: var(--hfs-bar) !important;
	color: var(--hfs-bar-text) !important;
	font-weight: 600;
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	position: sticky;
	top: 0;
	z-index: 1;
}
.hfs-return-col-product { width: auto; white-space: normal; }
.hfs-return-col-qty     { width: 60px; text-align: center; }
.hfs-return-col-price   { width: 80px; text-align: right; }
.hfs-return-col-reason  { width: 200px; }
.hfs-return-col-total   { width: 80px; text-align: right; }
.hfs-return-col-remove  { width: 36px; text-align: center; }
.hfs-return-select--invalid {
	border-color: var(--hfs-danger, #c0392b) !important;
	box-shadow: inset 0 0 0 1px var(--hfs-danger, #c0392b);
}


/* ============================================
   POS PRODUCT SEARCH — TWO-PANEL LAYOUT
   ============================================ */

.hfs-search-panel-left {
	flex: 1;
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--hfs-border);
	overflow: hidden;
	background: var(--hfs-dialog-bg);
}
.hfs-search-panel-right {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: var(--hfs-dialog-bg);
	overflow: hidden;
}
.hfs-search-results,
/* Staging summary in Product Search footer — suppress hfs-empty-hint padding */
.hfs-staging-summary {
	padding: 0;
	text-align: left;
	align-self: center;
	font-size: 0.85rem;
}

.hfs-staging-list {
	background: var(--hfs-dialog-bg);
	color: var(--hfs-text);
	flex: 1;
	overflow-y: auto;
}
.hfs-search-results *,
.hfs-staging-list * { color: inherit; }

/* Register row action buttons (shared common component styling) */
.hfs-btn.hfs-btn-icon.hfs-register-row-action-btn,
.qty-btn.hfs-register-row-action-btn {
	background: var(--hfs-register-row-action-btn-bg) !important;
	border: 1px solid var(--hfs-register-row-action-btn-border) !important;
	color: var(--hfs-register-row-action-btn-text) !important;
	border-radius: 8px !important;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.hfs-btn.hfs-btn-icon.hfs-register-row-action-btn i,
.qty-btn.hfs-register-row-action-btn i {
	color: inherit !important;
}
.hfs-btn.hfs-btn-icon.hfs-register-row-action-btn:not(:disabled):hover,
.hfs-btn.hfs-btn-icon.hfs-register-row-action-btn:not(:disabled):focus,
.qty-btn.hfs-register-row-action-btn:not(:disabled):hover,
.qty-btn.hfs-register-row-action-btn:not(:disabled):focus {
	background: var(--hfs-register-row-action-btn-hover-bg) !important;
	border-color: var(--hfs-register-row-action-btn-hover-border) !important;
	color: var(--hfs-register-row-action-btn-hover-text) !important;
	filter: none;
	outline: none;
	box-shadow: 0 0 0 2px var(--hfs-gold-border);
}
.hfs-register-row-action-btn--md {
	width: var(--hfs-register-row-action-btn-md-size) !important;
	height: var(--hfs-register-row-action-btn-md-size) !important;
	font-size: 0.95rem;
}
.hfs-register-row-action-btn--sm {
	width: var(--hfs-register-row-action-btn-sm-size) !important;
	height: var(--hfs-register-row-action-btn-sm-size) !important;
	font-size: 0.85rem;
}



.hfs-search-dialog-controls {
	display: flex;
	align-items: stretch;
	gap: 8px;
	flex: 1;
	min-width: 0;
}
.hfs-search-dialog-controls .hfs-search-input {
	min-width: 0;
}
.hfs-pickup-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

/* ============================================
   POS SUCCESS OVERLAY
   ============================================ */

.hfs-success-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: var(--hfs-overlay-backdrop);
	z-index: 1060;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	color: var(--hfs-bar-text);
}
.hfs-success-overlay.open { display: flex; }
.hfs-success-overlay i    { font-size: 4rem; margin-bottom: 0.8rem; }
.hfs-success-overlay h2   { font-size: 1.8rem; }
.hfs-success-overlay .hfs-success-details {
	font-size: 1.1rem;
	margin-top: 0.5rem;
	opacity: 0.9;
}


/* ============================================
   POS QUICK-ADD CUSTOMER MODAL (Bootstrap)
   ============================================ */

#posCustomerModal .modal-content  { border-radius: 12px; }
#posCustomerModal .modal-header   { padding: 10px 14px; }
#posCustomerModal .modal-body     { padding: 12px 14px; }
#posCustomerModal .modal-footer   { padding: 10px 14px; gap: 6px; }
#posCustomerModal .btn-outline-secondary:hover {
	background: var(--hfs-surface-tint-2) !important;
}


/* ============================================
   MISC DISCOUNT / HOLD DIALOG ELEMENTS
   ============================================ */

.hfs-dialog-heading {
	margin: 0;
	font-size: 0.95rem;
	color: var(--hfs-bar-text);
}
/* pos-apply-btn: removed — Apply Discount uses standard hfs-btn hfs-btn-primary */


/* ============================================
   SHARED EMPTY STATE COMPONENT
   Use hfs-empty-state everywhere a panel
   is waiting for user input. Icon + text only.
   ============================================ */
.hfs-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
	text-align: center;
	color: var(--hfs-empty-state-text);
	width: 100%;
}
.hfs-empty-state i,
.hfs-empty-state .hfs-empty-state__icon {
	font-size: 1.8rem;
	display: block;
	margin-bottom: 10px;
	color: var(--hfs-empty-state-icon);
}
.hfs-empty-state__text {
	font-size: 0.82rem;
	line-height: 1.4;
}
.hfs-empty-state--sm {
	padding: 16px 12px;
	font-size: 0.78rem;
}

/* ============================================
   GENERIC LIST ROW
   Used by: hold list, pickup orders,
   return product search results
   ============================================ */
.hfs-list-row {
	display: flex;
	align-items: center;
	padding: 10px 12px;
	border-bottom: 1px solid var(--hfs-border);
	gap: 10px;
	background: var(--hfs-surface);
}
.hfs-list-row:hover {
	background: var(--hfs-row-hover);
}
.hfs-list-row__body {
	flex: 1;
	min-width: 0;
}
.hfs-list-row__title {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--hfs-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hfs-list-row__sub {
	font-size: 0.72rem;
	color: var(--hfs-text-muted);
	margin-top: 2px;
}
.hfs-list-row__price {
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--hfs-brand-accent);
	white-space: nowrap;
}
.hfs-list-row__status {
	color: var(--hfs-link);
}
.hfs-list-item-line {
	font-size: 0.72rem;
	color: var(--hfs-text-muted);
	padding: 2px 0 2px 12px;
}

/* ============================================
   STAGING AREA ROWS (Product Search dialog)
   ============================================ */
.hfs-staging-row {
	display: flex;
	align-items: center;
	padding: 8px 12px;
	border-bottom: 1px solid var(--hfs-border);
	gap: 8px;
	background: var(--hfs-surface);
}
.hfs-staging-body {
	flex: 1;
	min-width: 0;
}
.hfs-staging-name {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--hfs-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hfs-staging-sku {
	font-size: 0.65rem;
	color: var(--hfs-text-muted);
}
.hfs-staging-qty-ctrl {
	display: flex;
	align-items: center;
	gap: 3px;
}
.hfs-staging-qty {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--hfs-text);
	min-width: 18px;
	text-align: center;
}
.hfs-staging-price {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--hfs-brand-accent);
	min-width: 60px;
	text-align: right;
}
.hfs-staging-remove {
	background: none;
	border: none;
	color: var(--hfs-danger);
	cursor: pointer;
	font-size: 0.75rem;
	padding: 2px 4px;
	line-height: 1;
}
.hfs-staging-remove:hover {
	color: var(--hfs-btn-danger-hover-bg);
}

/* ============================================
   RETURN TABLE
   ============================================ */
.hfs-return-row td {
	padding: 6px 8px;
	border-bottom: 1px solid var(--hfs-border);
	color: var(--hfs-text);
	vertical-align: middle;
}
.hfs-return-sku {
	font-size: 0.68rem;
	color: var(--hfs-text-muted);
}
.hfs-return-price {
	text-align: right;
	color: var(--hfs-brand-accent);
}
.hfs-return-total {
	text-align: right;
	font-weight: 600;
	color: var(--hfs-text);
}
.hfs-return-select {
	background: var(--hfs-surface);
	color: var(--hfs-text);
	border: 1px solid var(--hfs-border-focus-soft);
	border-radius: 4px;
	font-size: 0.72rem;
	padding: 2px 4px;
	width: 100%;
}
.hfs-return-qty-input {
	width: 44px;
	background: var(--hfs-surface);
	color: var(--hfs-text);
	border: 1px solid var(--hfs-border-focus-soft);
	border-radius: 4px;
	text-align: center;
	font-size: 0.78rem;
	padding: 2px;
}
.hfs-btn-icon--danger {
	background: none;
	border: none;
	color: var(--hfs-danger);
	cursor: pointer;
	font-size: 0.9rem;
	padding: 2px 4px;
}
.hfs-btn-icon--danger:hover {
	color: var(--hfs-btn-danger-hover-bg);
}

/* ============================================
   REGISTER CLOSE SUMMARY CARDS
   ============================================ */
.hfs-register-summary {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 12px;
}
.hfs-register-stat-card {
	background: var(--hfs-pos-header-bg);
	border-radius: 6px;
	padding: 8px 10px;
}
.hfs-register-stat-label {
	font-size: 0.65rem;
	color: var(--hfs-pos-sidebar-text-muted);
	text-transform: uppercase;
	margin-bottom: 2px;
}
.hfs-register-stat-value {
	font-size: 0.95rem;
	color: var(--hfs-pos-sidebar-text);
	font-weight: 700;
}

/* Register notes label */
.hfs-register-notes-label {
	font-size: 0.75rem;
	color: var(--hfs-text-muted);
	display: block;
	margin-bottom: 4px;
}

/* Denomination grid */
.hfs-register-denom-grid {
	display: grid;
	grid-template-columns: 1fr 52px 68px;
	gap: 3px 6px;
	font-size: 0.78rem;
	align-items: center;
}
.hfs-register-denom-hdr {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--hfs-text-muted);
	text-transform: uppercase;
	margin-bottom: 4px;
}
.hfs-register-denom-label {
	color: var(--hfs-text);
}
.hfs-register-denom-sub {
	text-align: right;
	color: var(--hfs-brand-accent);
	font-weight: 600;
}
.hfs-register-denom-total-row {
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid var(--hfs-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.hfs-register-denom-total-label {
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--hfs-text-muted);
}
.hfs-register-denom-total-value {
	color: var(--hfs-brand-accent);
	font-weight: 700;
	font-size: 1.1rem;
}

/* Stock count classes */
.hfs-register-stock-in  { color: var(--hfs-green); }
.hfs-register-stock-out { color: var(--hfs-danger); }

/* Customer sidebar */
.hfs-register-cust-empty {
	color: var(--hfs-empty-state-text);
	font-size: 0.82rem;
}
.hfs-register-cust-name {
	font-weight: 700;
	color: var(--hfs-brand-accent);
}
.hfs-register-cust-contact i {
	font-size: 0.55rem;
	margin-right: 3px;
	color: var(--hfs-text-muted);
}


/* In-store-only banner */
.hfs-register-instore-banner {
	background: var(--hfs-green-dark);
	color: var(--hfs-bar-text);
	text-align: center;
	padding: 6px 12px;
	font-size: 0.82rem;
}

/* Store credit cart row */
.hfs-register-cashout-btn {
	background: var(--hfs-accent-orange);
	color: var(--hfs-bar-text);
	border: none;
	border-radius: 3px;
	padding: 1px 6px;
	font-size: 0.65rem;
	cursor: pointer;
}
.hfs-register-credit-qty {
	font-size: 0.75rem;
	color: var(--hfs-text-muted);
}

/* ============================================
   PICKUP ORDER TABLE
   ============================================ */
.hfs-pickup-tabs {
	display: flex;
	gap: 4px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--hfs-border);
	background: var(--hfs-surface);
}
.hfs-pickup-tab {
	padding: 4px 14px;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 600;
	border: 1px solid var(--hfs-border);
	background: transparent;
	color: var(--hfs-text-muted);
	cursor: pointer;
	transition: background 0.1s, color 0.1s;
}
.hfs-pickup-tab:hover {
	background: var(--hfs-row-hover);
	color: var(--hfs-text);
}
.hfs-pickup-tab.active {
	background: var(--hfs-bar);
	color: var(--hfs-bar-text);
	border-color: var(--hfs-bar);
}

/* ============================================
   DIALOG TABS (THEME-AWARE)
   Used by Product dialog (General / Images)
   ============================================ */
.hfs-tabs {
	display: flex;
	gap: 10px;
	padding: 0 2px 1px; /* 1px bottom padding so tabs sit tight to the line */
	border-bottom: 1px solid var(--hfs-border);
	margin-bottom: 12px;
}

.hfs-tab {
	appearance: none;
	border: 1px solid var(--hfs-border);
	border-bottom: none;
	background: var(--hfs-surface);
	color: var(--hfs-text);
	border-radius: 10px 10px 0 0;
	padding: 8px 18px;
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.hfs-tab:hover {
	background: var(--hfs-row-hover);
	color: var(--hfs-text);
}

.hfs-tab.active {
	background: var(--hfs-bar);
	color: var(--hfs-bar-text);
	border-color: var(--hfs-bar);
}

.hfs-tab.hfs-tab-disabled {
	opacity: 0.4;
	pointer-events: none;
	cursor: not-allowed;
}

.hfs-tabpane { display: none; }
.hfs-tabpane.active { display: block; }

.hfs-tab-subtitle {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--hfs-text);
	margin: 2px 0 10px;
}

/* ---- Settings section tabs (sticky underline style) ---- */
.settings-tabs-wrap {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--hfs-bg);
	padding-top: 12px;
}

.settings-tabs {
	display: flex;
	gap: 0;
	border-bottom: 2px solid var(--hfs-border);
	margin-bottom: 0;
	padding: 0;
}

.settings-tab {
	appearance: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px; /* overlap the container border-bottom */
	background: transparent;
	color: var(--hfs-text-muted);
	padding: 10px 20px;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 7px;
	transition: color 0.12s, border-color 0.12s;
	white-space: nowrap;
}

.settings-tab i {
	font-size: 1rem;
}

.settings-tab:hover {
	color: var(--hfs-text);
	border-bottom-color: var(--hfs-border);
}

.settings-tab.active {
	color: var(--hfs-primary);
	border-bottom-color: var(--hfs-primary);
}

.settings-tabpanes {
	padding-top: 20px;
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
}



.settings-tabpane { display: none; }
.settings-tabpane.active {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
}

.settings-pane-toolbar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

/* Product images grid in Product dialog */
.hfs-product-images-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.hfs-image-slot {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hfs-image-slot > .input-group {
	width: 100%;
}

.hfs-image-thumb {
	position: relative;
	border: 1px solid var(--hfs-border);
	border-radius: 12px;
	overflow: hidden;
	background: var(--hfs-surface);
	height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.hfs-image-thumb img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.hfs-image-slot-label {
	font-size: 0.75rem;
	color: var(--hfs-text-muted);
}

.hfs-image-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	background: var(--hfs-warning-fill, #f8d775);
	color: #1a1a1a;
	border-radius: 999px;
	padding: 2px 8px;
	font-size: 0.72rem;
	font-weight: 700;
	border: 1px solid rgba(0,0,0,0.08);
}

.hfs-image-del {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 30px;
	height: 30px;
	border-radius: 10px;
	border: 1px solid var(--hfs-border);
	background: var(--hfs-surface);
	color: var(--hfs-text);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.12s, color 0.12s;
}

.hfs-image-del:hover {
	background: var(--hfs-danger-fill-subtle, rgba(220, 53, 69, 0.12));
	color: var(--hfs-danger, #dc3545);
}

.hfs-pickup-table-wrap {
	flex: 1;
	overflow-y: auto;
	background: var(--hfs-dialog-bg);
}
.hfs-pickup-thead-row {
	background: var(--hfs-bar) !important;
	color: var(--hfs-bar-text) !important;
	position: sticky;
	top: 0;
}
.hfs-pickup-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.8rem;
}
.hfs-pickup-table thead th {
	padding: 6px 10px;
	text-align: left;
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	white-space: nowrap;
}
.hfs-pickup-table thead th:last-child { text-align: center; }
.hfs-pickup-table .pickup-row {
	border-bottom: 1px solid var(--hfs-border);
	cursor: default;
	background: var(--hfs-surface);
}
.hfs-pickup-table .pickup-row:hover {
	background: var(--hfs-row-hover);
}
.hfs-pickup-table .pickup-row td {
	padding: 8px 10px;
	vertical-align: top;
}
.pickup-order-num {
	font-weight: 700;
	color: var(--hfs-text);
	font-size: 0.82rem;
}
.pickup-customer {
	font-size: 0.75rem;
	color: var(--hfs-text);
	font-weight: 600;
}
.pickup-sub {
	font-size: 0.68rem;
	color: var(--hfs-text-muted);
	margin-top: 2px;
}
.pickup-item-lines {
	font-size: 0.68rem;
	color: var(--hfs-text-muted);
	margin-top: 3px;
	line-height: 1.5;
}
.pickup-date {
	font-size: 0.75rem;
	color: var(--hfs-text-muted);
	white-space: nowrap;
}
.pickup-status {
	font-size: 0.7rem;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 10px;
	display: inline-block;
	white-space: nowrap;
}
.pickup-status--pending    { background: var(--hfs-info-fill-subtle);   color: var(--hfs-link); }
.pickup-status--ready      { background: var(--hfs-success-fill);       color: var(--hfs-green-dark); }
.pickup-status--processing { background: var(--hfs-highlight-orange-soft); color: var(--hfs-accent-orange); }
.pickup-status--default    { background: var(--hfs-surface-alt);        color: var(--hfs-text-muted); }
.pickup-price {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--hfs-brand-accent);
	white-space: nowrap;
	text-align: right;
}
.pickup-actions {
	display: flex;
	gap: 4px;
	justify-content: center;
	align-items: center;
}

/* ============================================
   DIALOG AREAS WITH REGISTER-STYLE BACKGROUND
   Used by Return and Pickup for the list area
   ============================================ */
.hfs-dialog-list-area {
	flex: 1;
	overflow-y: auto;
	background: var(--hfs-dialog-bg);
}
.hfs-dialog-search-area,
.hfs-search-dialog-bar {
	padding: 10px 16px;
	border-bottom: 1px solid var(--hfs-border);
	background: var(--hfs-dialog-bg);
	flex-shrink: 0;
}

/* Pickup table empty state - transparent so wrap background shows */
.hfs-pickup-table tbody tr:not(.pickup-row) td {
	background: transparent;
	padding: 0;
}

/* Return table empty state row */
#posReturnItems tr:not(.hfs-return-row) td {
	background: var(--hfs-dialog-bg);
	padding: 0;
	border: none;
}

/* ---- Admin dialog overlay (reusable) ---- */
.hfs-dialog-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.55);
	z-index: 1200;
	align-items: center;
	justify-content: center;
}
.hfs-dialog-overlay.open {
	display: flex;
}
.hfs-dialog {
	background: var(--hfs-dialog-bg);
	border-radius: 10px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.28);
	display: flex;
	flex-direction: column;
	max-height: 90vh;
	overflow: hidden;
}
.hfs-dialog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--hfs-border);
	background: var(--hfs-surface);
}
.hfs-dialog-body {
	overflow-y: auto;
	flex: 1;
}
/* ---- Specials add dialog product rows ---- */
.specials-add-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--hfs-border);
	cursor: pointer;
	transition: background 0.1s;
}
.specials-add-row:last-child { border-bottom: none; }
.specials-add-row:hover { background: var(--hfs-row-hover); }
.specials-add-row.selected {
	background: var(--hfs-gold-bg, rgba(196,150,60,0.12));
	border-left: 3px solid var(--hfs-gold);
}
.specials-add-row img {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 4px;
	flex-shrink: 0;
}
.specials-add-row-info { flex: 1; min-width: 0; }
.specials-add-row-name {
	font-size: 0.85rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.specials-add-row-meta {
	font-size: 0.72rem;
	color: var(--hfs-text-muted);
}

/* Default drawer denomination grid in settings */
.settings-denom-cell {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.settings-denom-cell label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--hfs-text-muted);
	margin: 0;
}
.settings-denom-cell input {
	text-align: center;
	font-weight: 600;
}

/* ================================================================
   REPORTS SECTION — Phase 2.2
   Layout: full-width report area + collapsible right panel
   ================================================================ */

/* ================================================================
   REPORTS LAYOUT
   Goal: fixed container from topbar to bottom of viewport,
   right panel stays pinned, left area scrolls freely both axes
   as a single unit (like an iframe).
   ================================================================ */

/* Reports sections — fixed to viewport, below topbar, right of sidebar */
#section-reports_shift.admin-section,
#section-reports_sales.admin-section,
#section-reports_cpa.admin-section {
	padding: 0 !important;
	display: none;
	position: fixed;
	top: var(--hfs-topbar-height, 42px);
	left: 0;
	right: 0;
	bottom: 0;
	box-sizing: border-box;
	z-index: 10;
}
#section-reports_shift.admin-section.active,
#section-reports_sales.admin-section.active,
#section-reports_cpa.admin-section.active {
	display: flex !important;
}

/* Shell — fills the fixed section, row: [rpt-area] [toggle] [panel] */
.rpt-shell {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 100%;
	background: var(--hfs-bg);
}

/* Left content column — fills remaining width, clips so only rpt-body scrolls */
.rpt-area {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: all 0.25s ease;
}

/* Toolbar — pinned at top of rpt-area, never scrolls */
.rpt-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-bottom: 1px solid var(--hfs-border);
	background: var(--hfs-bg);
	flex-shrink: 0;
	flex-wrap: wrap;
}
.rpt-toolbar-title {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--hfs-text);
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.rpt-toolbar-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* THE scroll pane — single scrollable area, both axes, whole report moves together */
.rpt-body {
	flex: 1;
	overflow: auto;
	padding: 20px 24px;
	background: var(--hfs-bg);
}

/* Inner content wrapper — min-width forces horizontal scroll instead of wrapping */
.rpt-content {
	width: 100%;
	min-width: 0;
}
.rpt-content .rpt-table-wrap {
	width: max-content;
	min-width: 100%;
}

/* Empty / loading states */
.rpt-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	gap: 12px;
	color: var(--hfs-text-muted);
	text-align: center;
	padding: 40px;
}
.rpt-empty i {
	font-size: 3rem;
	opacity: 0.3;
}
.rpt-empty-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--hfs-text-muted);
}
.rpt-empty-sub {
	font-size: 0.8rem;
}

/* Right panel — fixed width, never scrolls with content */
.rpt-panel {
	width: 280px;
	min-width: 280px;
	background: var(--hfs-bg-alt);
	border-left: 1px solid var(--hfs-border);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: width 0.25s ease, min-width 0.25s ease;
	flex-shrink: 0;
}
.rpt-panel.collapsed {
	width: 0;
	min-width: 0;
	overflow: hidden;
}

/* Toggle tab — sits between rpt-area and rpt-panel */
.rpt-panel-toggle {
	align-self: center;
	z-index: 10;
	width: 24px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hfs-bg-alt);
	border: 1px solid var(--hfs-border);
	border-right: none;
	border-radius: 8px 0 0 8px;
	cursor: pointer;
	color: var(--hfs-text-muted);
	font-size: 0.75rem;
	transition: all 0.15s;
	flex-shrink: 0;
	margin-right: -1px;
}
.rpt-panel-toggle:hover {
	background: var(--hfs-gold-fill);
	color: var(--hfs-brand-accent);
	border-color: var(--hfs-brand-accent);
}
.rpt-panel-toggle i { transition: transform 0.25s; }
.rpt-panel-toggle.collapsed i { transform: rotate(180deg); }

/* Panel inner scroll */
.rpt-panel-inner {
	flex: 1;
	overflow-y: auto;
	padding: 16px 14px 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.rpt-panel.collapsed .rpt-panel-inner {
	display: none;
}

/* Panel section headers */
.rpt-panel-label {
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--hfs-text-muted);
	margin-bottom: 6px;
}

/* Report type selector */
.rpt-type-group {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.rpt-type-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	border-radius: 5px;
	cursor: pointer;
	font-size: 0.8rem;
	color: var(--hfs-text-muted);
	border: none;
	background: none;
	text-align: left;
	width: 100%;
	transition: background 0.15s, color 0.15s;
}
.rpt-type-btn:hover {
	background: var(--hfs-gold-fill);
	color: var(--hfs-text);
}
.rpt-type-btn.active {
	background: var(--hfs-gold-fill-strong);
	color: var(--hfs-brand-accent);
	font-weight: 600;
}
.rpt-type-btn i {
	width: 16px;
	text-align: center;
	flex-shrink: 0;
}
.rpt-type-parent {
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--hfs-text-muted);
	padding: 10px 10px 4px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}
.rpt-type-static {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--hfs-brand-accent, #7C5A2E);
	background: var(--hfs-gold-fill-strong, rgba(201,169,78,0.14));
	border-radius: 5px;
}
.rpt-type-static i {
	width: 16px;
	text-align: center;
	flex-shrink: 0;
}

/* Date range quick picks */
.rpt-quick-dates {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.rpt-quick-btn {
	font-size: 0.7rem;
	padding: 3px 8px;
	border-radius: 4px;
	border: 1px solid var(--hfs-border);
	background: var(--hfs-bg);
	color: var(--hfs-text-muted);
	cursor: pointer;
	transition: all 0.15s;
}
.rpt-quick-btn:hover, .rpt-quick-btn.active {
	border-color: var(--hfs-brand-accent);
	color: var(--hfs-brand-accent);
	background: var(--hfs-gold-fill);
}

/* Filter inputs */
.rpt-filter-row {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.rpt-filter-row label {
	font-size: 0.72rem;
	color: var(--hfs-text-muted);
	font-weight: 500;
}
.rpt-filter-row input,
.rpt-filter-row select {
	font-size: 0.78rem;
	padding: 5px 8px;
	border-radius: 4px;
	border: 1px solid var(--hfs-border);
	background: var(--hfs-bg);
	color: var(--hfs-text);
	width: 100%;
	box-sizing: border-box;
}

/* Run button */
.rpt-run-btn {
	width: 100%;
	padding: 9px;
	border-radius: 5px;
	border: none;
	background: var(--hfs-brand-accent);
	color: var(--hfs-bg);
	font-weight: 700;
	font-size: 0.82rem;
	cursor: pointer;
	transition: opacity 0.15s;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.rpt-run-btn:hover { opacity: 0.88; }
.rpt-run-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Summary cards row ---- */
.rpt-summary-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 20px;
	width: 100%;
	min-width: 0;
	position: relative;
}
.rpt-stat-card {
	background: var(--hfs-bg-alt);
	border: 1px solid var(--hfs-border);
	border-radius: 8px;
	padding: 14px 16px;
	text-align: center;
}
.rpt-stat-card .rpt-stat-label {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--hfs-text-muted);
	margin-bottom: 4px;
}
.rpt-stat-card .rpt-stat-value {
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--hfs-text);
	line-height: 1.1;
}
.rpt-stat-card .rpt-stat-value.positive { color: var(--hfs-success-accent-strong); }
.rpt-stat-card .rpt-stat-value.negative { color: var(--hfs-danger); }
.rpt-stat-card .rpt-stat-sub {
	font-size: 0.7rem;
	color: var(--hfs-text-muted);
	margin-top: 2px;
}

/* ---- Report title block ---- */
.rpt-report-header {
	margin-bottom: 20px;
}
.rpt-report-header h5 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--hfs-text);
	margin: 0 0 2px;
}
.rpt-report-header .rpt-period-label {
	font-size: 0.78rem;
	color: var(--hfs-text-muted);
}

/* ---- Data tables ---- */
.rpt-table-wrap {
	background: var(--hfs-bg-alt);
	border: 1px solid var(--hfs-border);
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 20px;
}
.rpt-table-wrap h6 {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--hfs-text-muted);
	padding: 10px 14px 8px;
	border-bottom: 1px solid var(--hfs-border);
	margin: 0;
}
.rpt-table {
	width: max-content;
	min-width: 100%;
	border-collapse: collapse;
	font-size: 0.8rem;
}
.rpt-table th {
	background: var(--hfs-bg);
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--hfs-text-muted);
	padding: 7px 12px;
	text-align: left;
	border-bottom: 1px solid var(--hfs-border);
	white-space: nowrap;
}
.rpt-table th.num, .rpt-table td.num { text-align: right; }
.rpt-table td {
	padding: 8px 12px;
	border-bottom: 1px solid var(--hfs-border-subtle);
	color: var(--hfs-text);
	vertical-align: middle;
}
.rpt-table tr:last-child td { border-bottom: none; }
.rpt-table tr:hover td { background: var(--hfs-gold-fill-subtle); }
.rpt-table td.neg { color: var(--hfs-danger); }
.rpt-table td.pos { color: var(--hfs-success-accent-strong); }
.rpt-table td.muted { color: var(--hfs-text-muted); font-size: 0.75rem; }
.rpt-table .rpt-expand-btn {
	background: none; border: none; cursor: pointer;
	color: var(--hfs-brand-accent); padding: 0 4px;
	font-size: 0.75rem;
}

/* Expandable session detail row */
.rpt-detail-row td {
	background: var(--hfs-bg) !important;
	padding: 0 !important;
}
.rpt-detail-inner {
	padding: 12px 20px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 10px;
	border-top: 1px solid var(--hfs-border-subtle);
}
.rpt-detail-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.rpt-detail-stat .rpt-dl { font-size: 0.68rem; color: var(--hfs-text-muted); font-weight: 600; text-transform: uppercase; }
.rpt-detail-stat .rpt-dv { font-size: 0.85rem; font-weight: 600; color: var(--hfs-text); }

/* Totals row */
.rpt-table tr.rpt-totals-row td {
	font-weight: 700;
	background: var(--hfs-gold-fill-subtle);
	border-top: 2px solid var(--hfs-border);
}

/* Loading state */
.rpt-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px;
	color: var(--hfs-text-muted);
	gap: 10px;
	font-size: 0.85rem;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
	.rpt-panel { width: 100%; min-width: 100%; position: absolute; right: 0; top: 0; height: 100%; z-index: 100; }
	.rpt-panel.collapsed { width: 0; min-width: 0; }
	.rpt-summary-row { grid-template-columns: repeat(2, 1fr); }
}

/* Spin utility for loading indicators */
@keyframes hfs-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
.spin { animation: hfs-spin 0.8s linear infinite; display: inline-block; }

/* ---- Status badges ---- */
.hfs-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 0.72rem;
	font-weight: 600;
	white-space: nowrap;
}
.hfs-badge--success  { background: rgba(39,174,96,0.12);  color: #1a7a42; }
.hfs-badge--danger   { background: rgba(220,53,69,0.12);  color: #b02a37; }
.hfs-badge--warning  { background: rgba(255,193,7,0.15);  color: #856404; }
.hfs-badge--muted    { background: rgba(0,0,0,0.06);      color: var(--hfs-text-muted); }
.hfs-badge--accent   { background: var(--hfs-gold-fill);  color: var(--hfs-brand-accent); }
.hfs-badge--info     { background: rgba(13,110,253,0.10); color: #084298; }

/* ---- Settings pane utilities ---- */
.hfs-settings-hint        { font-size: 0.82rem; color: var(--hfs-text-muted); margin-bottom: 1rem; }
.hfs-settings-hint--warn  { color: var(--hfs-rust); background: color-mix(in srgb, var(--hfs-rust) 8%, transparent); border-radius: 4px; padding: 6px 10px; }
.hfs-settings-subheading  { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hfs-text-muted); margin-bottom: 0.5rem; }
.hfs-settings-label       { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 0.25rem; }

/* ============================================================
   Settings form layout — Sprint 1 (Email Service)
   Used in section-integrations.jsp and future settings sections.
   All values use tokens — both light and dark themes supported.
   ============================================================ */

/* Utility: hidden element */
.hfs-hidden { display: none !important; }

/* Link style using theme token */
.hfs-link {
	color: var(--hfs-link, #3B7DD8);
	text-decoration: underline;
}
.hfs-link:hover {
	color: var(--hfs-link-hover, #4A90E2);
}

/* Settings section wrapper — padding + optional top separator */
.hfs-settings-section {
	padding: 20px;
}

/* Two-column responsive grid for settings fields */
.hfs-settings-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 20px;
}
@media (max-width: 640px) {
	.hfs-settings-grid { grid-template-columns: 1fr; }
}

/* Full-width field inside the grid */
.hfs-settings-field--full {
	grid-column: 1 / -1;
}

/* Store tab: split layout (settings left, logos right) */
.store-settings-split {
	display: flex;
	gap: 24px;
}
.store-settings-left {
	flex: 1;
	min-width: 0;
}
.store-settings-right {
	width: 320px;
	flex-shrink: 0;
}
@media (max-width: 860px) {
	.store-settings-split {
		flex-direction: column;
	}
	.store-settings-right {
		width: 100%;
	}
}
.hfs-settings-section-title {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--hfs-text);
	margin: 0 0 12px;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Logo slots */
.store-logo-slots {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.store-logo-slot {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border: 1px solid var(--hfs-border);
	border-radius: 6px;
	background: var(--hfs-input-bg);
}
.store-logo-slot.active {
	border-color: var(--hfs-bar);
	box-shadow: 0 0 0 1px var(--hfs-bar);
}
.store-logo-thumb {
	width: 64px;
	height: 40px;
	object-fit: contain;
	border-radius: 4px;
	flex-shrink: 0;
}
.store-logo-thumb--dark {
	background: #3a2b26;
	padding: 4px;
}
.store-logo-thumb--light {
	background: #f5f0eb;
	padding: 4px;
}
.store-logo-info {
	flex: 1;
	min-width: 0;
}
.store-logo-label {
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--hfs-text);
}
.store-logo-filename {
	font-size: 0.7rem;
	color: var(--hfs-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.store-logo-actions {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex-shrink: 0;
}

/* Toggle row: checkbox + label side by side */
.hfs-toggle-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.hfs-toggle-row .form-check-input {
	flex-shrink: 0;
	margin: 0;
}

/* Active toggle row inside gateway modal */
.hfs-settings-toggle-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 12px;
	border-top: 1px solid var(--hfs-border);
}

/* Send-test row at the bottom of the email tab */
.hfs-settings-test-row {
	border-top: 1px solid var(--hfs-border);
	padding-top: 16px;
	margin-top: 4px;
}
.hfs-settings-test-input-group {
	display: flex;
	gap: 8px;
	margin-top: 6px;
	align-items: center;
}
.hfs-settings-test-input-group .form-control {
	max-width: 300px;
}

/* hfs-dialog size variants used in integrations modals */
.hfs-dialog--xs  { max-width: 380px;  width: 100%; }
.hfs-dialog--sm  { max-width: 560px;  width: 100%; }

/* hfs-dialog-body variants */
.hfs-dialog-body--padded { padding: 20px; }
.hfs-dialog-body--grid   { padding: 20px; display: grid; gap: 16px; }

/* Semantic text colour utilities */
.hfs-text-success { color: var(--hfs-green-dark, #2E5339); }
.hfs-text-muted   { color: var(--hfs-text-muted); }

/* Denomination grid — replaces inline display:grid style on #settingsDrawerGrid */
.settings-denom-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	gap: 8px;
}

/* Gold accent text — replaces inline color:var(--hfs-gold) */
.hfs-gold-text { color: var(--hfs-gold); }

/* Date input stack in report panel — replaces inline display:flex/flex-direction:column */
.rpt-date-inputs {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Filter stack — replaces inline display:flex/flex-direction:column on filter groups */
.rpt-filter-stack {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Input group — standardises the input+button pattern */
.hfs-input-group { width: 260px; }
.hfs-filter-select {
	width: 180px;
	height: var(--hfs-control-height);
	font-size: 0.85rem;
	border-radius: 8px;
}

/* Supplier detail meta rows — replaces inline font-size:0.82rem */
.hfs-detail-meta { font-size: 0.82rem; }

/* Dashboard chart canvas wrapper — replaces inline position:relative */
.hfs-register-relative { position: relative; }

/* Scrollable card variant — replaces inline overflow-y:auto */
.admin-table-card--scrollable { overflow-y: auto; }

/* Sticky card title — replaces inline position:sticky;top:0;z-index:1 */
.admin-card-title--sticky { position: sticky; top: 0; z-index: 1; }

/* No-wrap label — replaces inline white-space:nowrap */
.hfs-nowrap { white-space: nowrap; }


/* ── Card Colors tab — one category at a time via dropdown ── */
.cat-colors-panel { display: none; }
.cat-colors-panel.active {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	align-items: flex-start;
}

/* Fields side — shrink-to-fit, wraps card below when space is tight */
.cat-colors-fields-wrap {
	flex: 0 1 auto;
	min-width: 0;
}

/* 2x2 group grid */
.cat-colors-groups-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem 1.5rem;
}

/* Individual group */
.cat-colors-group-title {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--hfs-brand-accent, #c2620a);
	margin-bottom: 6px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--hfs-border, rgba(0,0,0,0.08));
}
.cat-colors-group-fields {
	display: grid;
	grid-template-columns: auto auto;
	gap: 0;
}

/* One row per color: label on left, swatch on right */
.cat-colors-field {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	align-items: center;
	padding: 5px 8px;
	border-radius: 6px;
	transition: background 0.15s;
}

.cat-colors-field:hover {
	background: var(--hfs-surface-raised, rgba(255,255,255,0.04));
}

.cat-colors-field-label {
	font-size: 0.72rem;
	color: var(--hfs-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.4px;
	white-space: nowrap;
	padding-right: 0.75rem;
}

/* Color swatch — no white padding */
.cat-color-swatch {
	-webkit-appearance: none;
	appearance: none;
	width: 90px;
	height: 32px;
	border: 1px solid var(--hfs-border);
	border-radius: 5px;
	cursor: pointer;
	padding: 0;
	background: none;
	display: block;
	flex-shrink: 0;
	transition: border-color 0.15s;
}
.cat-color-swatch::-webkit-color-swatch-wrapper { padding: 0; border-radius: 4px; overflow: hidden; }
.cat-color-swatch::-webkit-color-swatch { border: none; border-radius: 4px; margin: 0; }
.cat-color-swatch::-moz-color-swatch { border: none; border-radius: 4px; }

/* Preview element highlight on swatch hover */
.cat-preview-highlight {
	outline: 1px dashed #ffffff !important;
	outline-offset: 1px;
}

/* Preview side — takes remaining space, wraps below when insufficient */
.cat-colors-preview-wrap {
	flex: 1 1 240px;
	min-width: 240px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

/* Groups wrap to single column at narrow widths */
@media (max-width: 900px) {
	.cat-colors-groups-grid {
		grid-template-columns: 1fr;
	}
}

/* ── Category Megamenu Images tab ── */
/* ── Megamenu Images tab — one category at a time via dropdown ── */
.cat-mega-panel { display: none; }
.cat-mega-panel.active {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Each section: inputs left, preview right */
.cat-mega-section {
	display: flex;
	flex-direction: row;
	gap: 2.5rem;
	align-items: flex-start;
}

/* Full-width divider between hero and specials */
.cat-mega-divider {
	border: none;
	border-top: 1px solid var(--hfs-border);
	margin: 1.5rem 0;
}

.cat-mega-input-group {
	flex: 0 0 280px;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
/* Input group button radius overrides */
.cat-mega-ig > .hfs-btn {
	border-radius: 0;
}
.cat-mega-ig > .hfs-btn:last-child {
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}

.cat-mega-group-label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--hfs-text-muted);
	margin-bottom: 0.25rem;
}

.cat-mega-select-label {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--hfs-text-muted);
	white-space: nowrap;
}

.cat-mega-toolbar {
	border-bottom: 1px solid var(--hfs-border);
	padding-bottom: 0.75rem;
}

.cat-mega-field-label {
	font-size: 0.72rem;
	color: var(--hfs-text-muted);
	display: block;
	margin-bottom: 3px;
}

.cat-mega-preview-col {
	flex: 1;
	display: inline-block;
}

.cat-mega-preview {
	position: relative;
	display: inline-block;
	border-radius: 8px;
	overflow: hidden;
	background: #2a1a0e;
	border: 1px solid var(--hfs-border);
	max-width: 100%;
}

.cat-mega-preview img {
	display: block;
	max-width: 100%;
	height: auto;
	opacity: 0.75;
}

.cat-mega-preview-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%);
}

.cat-mega-preview-text {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 8px 10px;
}

.cat-mega-preview-label {
	font-size: 0.55rem;
	color: rgba(255,255,255,0.75);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 1px;
}

.cat-mega-preview-tagline {
	font-size: 0.78rem;
	font-weight: 700;
	color: #fff;
	line-height: 1.25;
}

/* Specials preview label — positioned at bottom like store mm-promo-label */
.cat-mega-preview-spec-label {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 6px 10px;
	background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 100%);
	font-size: 0.72rem;
	font-weight: 700;
	color: #fff;
}

/* ── Megamenu Image Picker ── */
.mega-picker-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px;
	max-height: 400px;
	overflow-y: auto;
	padding: 4px;
}

.mega-picker-thumb {
	position: relative;
	border: 2px solid var(--hfs-border);
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.15s;
}

.mega-picker-thumb:hover {
	border-color: var(--hfs-blue);
}

.mega-picker-check {
	position: absolute;
	top: 4px;
	left: 4px;
	z-index: 1;
	cursor: pointer;
	line-height: 1;
}

.mega-picker-check input[type="checkbox"] {
	width: 16px;
	height: 16px;
	cursor: pointer;
	accent-color: var(--hfs-bar);
}

.mega-picker-thumb.picker-selected {
	border-color: var(--hfs-blue);
	box-shadow: 0 0 0 2px var(--hfs-gold-border);
}

.mega-picker-thumb img {
	width: 100%;
	height: 100px;
	object-fit: cover;
	display: block;
}

.mega-picker-name {
	font-size: 0.68rem;
	color: var(--hfs-text-muted);
	padding: 4px 6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	background: var(--hfs-surface);
}


/* Page image picker — must sit above TinyMCE dialog overlay (z-index ~1100) */
#pageImagePickerModal.open {
	z-index: 3200;
}

.hfs-dialog-scroll { overflow-y: auto; max-height: calc(80vh - 100px); }

/* ── Product card preview (Card Colors tab) ─────────────────────
   Self-contained subset of hfs-store style.css for admin preview.
   Scoped under .cat-colors-preview-wrap to avoid polluting admin. */
.cat-colors-preview-wrap .hfs-product-card {
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: none;
	width: 240px;
	box-shadow: 0 4px 20px rgba(62,39,35,0.18);
	font-family: 'Outfit', sans-serif;
}

.cat-colors-preview-wrap .card-image-area {
	height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	background: #f0e8df;
	flex-shrink: 0;
}

.cat-colors-preview-wrap .product-icon {
	font-size: 3.5rem;
	color: rgba(92,61,46,0.15);
}

.cat-colors-preview-wrap .price-tag {
	position: absolute;
	top: 0; right: 14px;
	background: #3b2314;
	color: #FDF5E6;
	font-weight: 700;
	font-size: 0.92rem;
	padding: 8px 14px 6px;
	border-radius: 0 0 8px 8px;
	z-index: 2;
	box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}

.cat-colors-preview-wrap .card-info {
	display: flex;
	flex-direction: column;
	position: relative;
	border-radius: 14px 14px 0 0;
	margin-top: -14px;
	z-index: 3;
	padding: 14px;
}

.cat-colors-preview-wrap .card-category {
	font-size: 0.58rem;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 700;
	margin-bottom: 4px;
}

.cat-colors-preview-wrap .card-product-name {
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--c-product-name, #FDF5E6);
	line-height: 1.25;
	margin-bottom: 4px;
	text-decoration: none;
	display: block;
}

.cat-colors-preview-wrap .card-product-desc {
	font-size: 0.68rem;
	color: var(--c-desc, #9e9080);
	line-height: 1.4;
	margin-bottom: 10px;
}

.cat-colors-preview-wrap .card-details {
	display: flex;
	flex-direction: column;
	margin-bottom: 12px;
}

.cat-colors-preview-wrap .card-detail-row {
	display: flex;
	align-items: center;
	font-size: 0.68rem;
	padding: 5px 0;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

.cat-colors-preview-wrap .card-detail-row:first-child {
	border-top: 1px solid rgba(255,255,255,0.08);
}

.cat-colors-preview-wrap .card-detail-label {
	flex: 0 0 30%;
	text-align: right;
	padding-right: 10px;
	color: var(--c-detail-label, #8B7A68);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.55rem;
	letter-spacing: 0.5px;
}

.cat-colors-preview-wrap .card-detail-divider {
	width: 1px;
	height: 14px;
	background: rgba(255,255,255,0.15);
	flex-shrink: 0;
}

.cat-colors-preview-wrap .card-detail-value {
	flex: 1;
	padding-left: 10px;
	color: var(--c-desc, #D7CCC8);
	font-weight: 500;
}

.cat-colors-preview-wrap .card-detail-value.in-stock   { color: #6ee7b7; }
.cat-colors-preview-wrap .card-detail-value.low-stock  { color: #fbbf24; }

.cat-colors-preview-wrap .card-details-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-size: 0.6rem;
	color: var(--c-detail-label, #8B7A68);
	cursor: pointer;
	padding: 4px 0 2px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: color 0.2s;
	user-select: none;
}

.cat-colors-preview-wrap .card-details-toggle:hover {
	color: var(--c-desc-hover, #D7CCC8);
}

.cat-colors-preview-wrap .card-details-toggle i {
	font-size: 0.7rem;
	transition: transform 0.2s;
}

.cat-colors-preview-wrap .card-details-toggle.open i {
	transform: rotate(180deg);
}

.cat-colors-preview-wrap .card-details-collapsible {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.25s ease;
}

.cat-colors-preview-wrap .card-details-collapsible.open {
	max-height: 200px;
}

.cat-colors-preview-wrap .card-btn-area { margin-top: 12px; }

.cat-colors-preview-wrap .card-add-btn {
	display: block;
	width: 100%;
	padding: 9px;
	border: none;
	border-radius: 8px;
	font-weight: 700;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}

.cat-colors-preview-wrap .card-add-btn:hover {
	background: var(--c-btn-hover, #1a3a24) !important;
	color: var(--c-btn-text-hover, #ffffff) !important;
	transform: translateY(-1px);
}

/* ── Count badge (On Special tab header) ── */
.hfs-count-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--hfs-gold, #C9A94E);
	color: var(--hfs-brown-dark, #2a1a0e);
	font-size: 0.68rem;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 20px;
	vertical-align: middle;
}

/* ── Specials search results (Manage tab) ── */
#specialsAddResults {
	max-height: 260px;
	overflow-y: auto;
	border: 1px solid var(--hfs-border);
	border-radius: 6px;
}

#specialsAddResults:empty { display: none; }

#specialsAddDialog .hfs-dialog {
	min-height: 440px;
}

#specialsAddDialog .hfs-dialog-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

#specialsAddResults {
	min-height: 260px;
	flex: 1 1 auto;
}

.specials-sort-select { width: 150px; height: 36px; font-size: 0.85rem; border-radius: 8px; }
.specials-empty-icon { font-size: 1.5rem; display: block; margin-bottom: 8px; }
.specials-manage-card { max-width: 600px; }

/* ── Reports alias sections (Sales / CPA redirect stubs) ── */
.rpt-alias {
	display: none;
	align-items: center;
	justify-content: center;
}

.rpt-alias.active {
	display: flex;
}

.rpt-alias-body {
	text-align: center;
	color: var(--hfs-text-muted);
	padding: 3rem;
}

.rpt-alias-icon {
	font-size: 2.5rem;
	display: block;
	margin-bottom: 0.75rem;
}

.rpt-alias-title {
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.rpt-alias-sub {
	font-size: 0.82rem;
}

/* ══════════════════════════════════════════════════════════════
   Specials tables — shared between On Special and Manage tabs
   ══════════════════════════════════════════════════════════════ */

/* Group header row */
.specials-group-row td {
	font-size: 0.73rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--hfs-text-muted);
	padding: 7px 14px !important;
	background: var(--hfs-surface-raised, var(--hfs-surface));
}

/* Product cell: thumbnail + name */
.specials-product-cell {
	display: flex;
	align-items: center;
	gap: 10px;
}

.specials-thumb {
	width: 34px;
	height: 34px;
	object-fit: cover;
	border-radius: 5px;
	flex-shrink: 0;
}

.specials-product-name {
	font-size: 0.87rem;
	font-weight: 600;
}

.specials-meta {
	font-size: 0.8rem;
	color: var(--hfs-text-muted);
}

.specials-price {
	font-size: 0.87rem;
	font-weight: 500;
}

/* Specials tabpane — admin-table-card must flex-fill like named table cards */
#section-specials .admin-table-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
	border-radius: 8px;
}

/* Scrollable body inside specials card */
#specialsListBody,
#specialsManageBody {
	flex: 1 1 0;
	min-height: 0;
	overflow-y: auto;
}

.specials-col-num {
	width: 40px;
	color: var(--hfs-text-muted);
	font-size: 0.8rem;
}

.specials-col-action { width: 52px; }

/* Status badges */
.hfs-status-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 20px;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.3px;
}

.hfs-status-badge--active   { background: var(--hfs-green, #22c55e);  color: #fff; }
.hfs-status-badge--inactive { background: var(--hfs-danger, #ef4444); color: #fff; }

/* Empty state */
.specials-empty {
	text-align: center;
	padding: 2.5rem 1rem;
	color: var(--hfs-text-muted);
}

.specials-empty-icon {
	font-size: 1.6rem;
	display: block;
	margin-bottom: 0.5rem;
}

/* Add product dialog: search results list */
.specials-search-results {
	max-height: 280px;
	overflow-y: auto;
	border: 1px solid var(--hfs-border);
	border-radius: 7px;
}

.specials-search-results:empty { display: none; }

.specials-add-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	cursor: pointer;
	border-bottom: 1px solid var(--hfs-border);
	transition: background 0.12s;
}

.specials-add-row:last-child { border-bottom: none; }

.specials-add-row:hover    { background: var(--hfs-surface-raised, rgba(0,0,0,0.04)); }
.specials-add-row.selected { background: var(--hfs-gold-fill, rgba(201,169,78,0.12)); }

.specials-add-thumb {
	width: 36px;
	height: 36px;
	object-fit: cover;
	border-radius: 5px;
	flex-shrink: 0;
}

.specials-add-row-name {
	font-size: 0.87rem;
	font-weight: 600;
}

.specials-add-row-meta {
	font-size: 0.75rem;
	color: var(--hfs-text-muted);
}

/* ══════════════════════════════════════════════════════════════
   Topbar role pill
   ══════════════════════════════════════════════════════════════ */

/* ── Specials add dialog — search empty state ── */
.specials-search-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
	color: var(--hfs-text-muted);
	text-align: center;
	min-height: 160px;
}

.specials-search-empty-icon {
	font-size: 2rem;
	margin-bottom: 0.6rem;
	opacity: 0.5;
}

.specials-search-empty-title {
	font-size: 0.95rem;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.specials-search-empty-sub {
	font-size: 0.78rem;
	opacity: 0.7;
}

/* Results list inside dialog */
.specials-search-list {
	border: 1px solid var(--hfs-border);
	border-radius: 7px;
	overflow: hidden;
	max-height: 260px;
	overflow-y: auto;
}

/* ── POS Payment overlay — Card auth code row ── */
.hfs-auth-row {
	display: none;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	padding: 10px 12px;
	border: 1px solid var(--hfs-border);
	border-radius: 8px;
	background: var(--hfs-surface-raised, var(--hfs-surface));
}

.hfs-auth-row--visible {
	display: flex;
}

.hfs-auth-label {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--hfs-text-muted);
	white-space: nowrap;
	flex-shrink: 0;
}

.hfs-auth-input {
	flex: 1;
	border: 1px solid var(--hfs-border);
	border-radius: 6px;
	padding: 6px 10px;
	font-size: 0.9rem;
	font-family: monospace;
	background: var(--hfs-dialog-bg);
	color: var(--hfs-text);
	letter-spacing: 0.05em;
}

.hfs-auth-input:focus {
	outline: none;
	border-color: var(--hfs-brand-accent);
	box-shadow: 0 0 0 2px var(--hfs-gold-fill, rgba(201,169,78,0.15));
}

.hfs-pay-mode-host {
	margin-top: 10px;
}

.hfs-pay-mode {
	display: none;
	margin-top: 10px;
	padding: 12px;
	border: 1px solid var(--hfs-border);
	border-radius: 8px;
	background: var(--hfs-surface-raised, var(--hfs-surface));
}

.hfs-pay-mode.is-active {
	display: block;
}

.hfs-pay-mode__header {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hfs-pay-mode__title {
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--hfs-text);
}

.hfs-pay-mode__title i {
	margin-right: 6px;
	color: var(--hfs-brand-accent);
}

.hfs-pay-mode__subtext {
	font-size: 0.82rem;
	color: var(--hfs-text-muted);
}

.hfs-pay-mode__message {
	margin-top: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 0.84rem;
	line-height: 1.4;
}

.hfs-pay-mode__message--info {
	background: rgba(41, 128, 185, 0.10);
	border: 1px solid rgba(41, 128, 185, 0.25);
	color: var(--hfs-text);
}

.hfs-pay-mode__message--warning {
	background: rgba(201, 169, 78, 0.12);
	border: 1px solid rgba(201, 169, 78, 0.28);
	color: var(--hfs-text);
}

.hfs-pay-mode .hfs-auth-row {
	margin-top: 10px;
}

/* ============================================================
   POS Discount Dialog
   ============================================================ */
.hfs-discount-scope-hint {
	font-size: 0.75rem;
	color: var(--hfs-text-muted);
	margin-top: 4px;
}
.hfs-disc-scope-btn--disabled {
	opacity: 0.4;
	pointer-events: none;
	cursor: not-allowed;
}
/* Discount cell in cart — clickable % icon or value */
.discount-add-icon {
	cursor: pointer;
	color: var(--hfs-text-muted);
	font-size: 0.85rem;
	padding: 2px 4px;
	border-radius: 3px;
	transition: color 0.15s, background 0.15s;
}
.discount-add-icon:hover {
	color: var(--hfs-accent-orange);
	background: var(--hfs-highlight-orange-soft);
}
.discount-add-icon--disabled {
	color: var(--hfs-text-muted);
	opacity: 0.35;
	cursor: not-allowed;
	pointer-events: none;
}
.discount-value-link {
	cursor: pointer;
	color: var(--hfs-accent-orange);
	font-size: 0.82rem;
	font-weight: 600;
	border-bottom: 1px dashed var(--hfs-accent-orange);
	white-space: nowrap;
}
.discount-value-link:hover {
	color: var(--hfs-brand-accent);
	border-color: var(--hfs-brand-accent);
}
.discount-remove-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	color: var(--hfs-danger);
	cursor: pointer;
	font-size: 0.75rem;
	border-radius: 4px;
}
.discount-remove-icon:hover {
	background: var(--hfs-danger);
	color: #fff;
}

.hfs-input--lg { font-size: 1.2rem; }
.hfs-input--sm { text-align: left; font-size: 0.85rem; }



/* ================================================================
   Products table — viewport-constrained with sticky header + footer
   ================================================================ */

/* Card fills remaining viewport height below toolbar */
.products-table-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
	border-radius: 8px;
}

/* Scrollable body — fills available space between header row and footer */
.products-table-scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: auto;
}

/* Sticky column headers */
.products-table-scroll thead th {
	position: sticky;
	top: 0;
	z-index: 2;
}

/* Sortable header cells */
#productsTable thead th.products-sortable {
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}
#productsTable thead th.products-sortable:hover {
	filter: brightness(1.15);
}
.products-sort-icon {
	font-size: 0.7rem;
	opacity: 0.6;
	margin-left: 3px;
	vertical-align: middle;
}
#productsTable thead th.products-sortable:hover .products-sort-icon,
#productsTable thead th .bi-arrow-up,
#productsTable thead th .bi-arrow-down {
	opacity: 1;
}

/* Column widths */
#productsTable col.col-prod-id     { width: 55px; }
#productsTable col.col-prod-img    { width: 60px; }
#productsTable col.col-prod-sku    { width: 140px; }
#productsTable col.col-prod-cost   { width: 80px; }
#productsTable col.col-prod-price  { width: 80px; }
#productsTable col.col-prod-status { width: 90px; }
#productsTable col.col-prod-actions { width: 90px; }

/* ── Footer bar ── */
/* ── Shared table footer bar (used by products, inventory, suppliers) ── */
.hfs-table-footer {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 14px;
	border-top: 1px solid var(--hfs-border);
	background: var(--hfs-surface);
	gap: 12px;
	min-height: 46px;
	border-radius: 0 0 8px 8px;
}
.hfs-footer-info {
	font-size: 0.82rem;
	color: var(--hfs-text-muted);
	white-space: nowrap;
	flex: 0 0 auto;
	min-width: 160px;
}
.hfs-footer-center {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}
.hfs-footer-center .hfs-pagination {
	margin: 0;
}
.hfs-footer-right {
	flex: 0 0 auto;
}
.hfs-page-size-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.82rem;
	color: var(--hfs-text-muted);
	margin: 0;
	white-space: nowrap;
}
.hfs-page-size-select {
	width: auto;
	min-width: 60px;
	padding: 2px 24px 2px 8px;
	font-size: 0.82rem;
}

.products-table-footer {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 14px;
	border-top: 1px solid var(--hfs-border);
	background: var(--hfs-surface);
	gap: 12px;
	min-height: 46px;
}
.products-footer-info {
	font-size: 0.82rem;
	color: var(--hfs-text-muted);
	white-space: nowrap;
	flex: 0 0 auto;
}
.products-footer-center {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}
.products-footer-center .hfs-pagination {
	margin: 0;
}
.products-footer-right {
	flex: 0 0 auto;
}
.products-page-size-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.82rem;
	color: var(--hfs-text-muted);
	margin: 0;
	white-space: nowrap;
}
.products-page-size {
	width: auto;
	min-width: 60px;
	padding: 2px 24px 2px 8px;
	font-size: 0.82rem;
}

/* ── admin-table-card loading state ── */
.admin-table-card {
	position: relative;
}
.admin-table-card.hfs-loading::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,0.6);
	z-index: 10;
}

/* ── Fancytree — category treegrid: match Products table style ── */

/* Container resets — kill skin-win8 border/scroll/padding.
   overflow: visible only on the table itself; scrolling is handled by .categories-table-scroll */
table.fancytree-container {
	overflow: visible !important;
}
.categories-table-scroll {
	overscroll-behavior: contain;
}
#categoriesTree.fancytree-container {
	border: none !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Table shell — same as .table in admin section */
#categoriesTree {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
	color: var(--hfs-text);
}

/* Dark header — identical to Products/Orders/etc */
#categoriesTree thead th {
	background: var(--hfs-table-head-bg);
	color: var(--hfs-table-head-text);
	border-color: var(--hfs-table-head-bg);
	padding: 8px 12px;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}
#categoriesTree thead th:first-child { border-top-left-radius: 8px; }
#categoriesTree thead th:last-child  { border-top-right-radius: 8px; }

/* Body rows */
#categoriesTree tbody tr {
	border-bottom: 1px solid var(--hfs-border);
	transition: background 0.1s;
}
#categoriesTree tbody tr:nth-child(even) td {
	background: var(--hfs-admin-row-alt);
}
#categoriesTree tbody tr:hover td,
#categoriesTree tbody tr.fancytree-active td,
#categoriesTree tbody tr.fancytree-selected td {
	background: var(--hfs-row-hover) !important;
}
#categoriesTree tbody td {
	padding: 7px 12px;
	vertical-align: middle;
}

/* Column alignment */
#categoriesTree thead th:nth-child(1),
#categoriesTree tbody td:nth-child(1) {
	text-align: right;
	padding-right: 16px;
}
#categoriesTree thead th:nth-child(2),
#categoriesTree tbody td:nth-child(2) {
	text-align: left;
}
#categoriesTree thead th:nth-child(3),
#categoriesTree tbody td:nth-child(3) {
	text-align: right;
	padding-right: 16px;
}
#categoriesTree thead th:last-child,
#categoriesTree tbody td:last-child {
	text-align: right;
	padding-right: 8px;
}

/* Column widths */
#categoriesTree col.col-cat-id       { width: 70px; }
#categoriesTree col.col-cat-products { width: 100px; }
#categoriesTree col.col-cat-actions  { width: 90px; }

/* Node title — kill skin highlight/border */
#categoriesTree span.fancytree-title {
	border: none !important;
	background: transparent !important;
	outline: none !important;
	color: inherit;
	padding: 1px 3px;
}
#categoriesTree span.fancytree-node:hover span.fancytree-title,
#categoriesTree span.fancytree-active span.fancytree-title {
	border: none !important;
	background: transparent !important;
	color: inherit;
}

/* Expander */
#categoriesTree span.fancytree-expander {
	opacity: 0.6;
}

/* Level styling */
#categoriesTree tr[data-level="1"] span.fancytree-title {
	font-weight: 700;
	font-size: 0.9rem;
}
#categoriesTree tr[data-level="2"] span.fancytree-title {
	font-weight: 600;
}
#categoriesTree tr[data-level="3"] span.fancytree-title {
	font-weight: 400;
	color: var(--hfs-text-muted);
}

/* Product count — plain number, no badge */
.cat-tree-count {
	font-size: 0.875rem;
	color: var(--hfs-text);
}
.cat-tree-count--zero {
	color: var(--hfs-text-muted);
}

/* Action buttons — always visible, same style as Products table */
.cat-tree-actions {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* Filter highlight */
#categoriesTree .fancytree-match span.fancytree-title {
	color: var(--hfs-brand-primary) !important;
	font-weight: 600;
}

/* ── Utility: small text ── */
.hfs-text-sm { font-size: 0.78rem; }

/* ── Inventory viewport constraint ── */
/* topbar(42) + section padding top+bottom(48) + toolbar(70) */
.inventory-table-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
	border-radius: 8px;
}
.inventory-table-scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: auto;
}
.inventory-table-scroll thead th {
	position: sticky;
	top: 0;
	z-index: 2;
}
/* inventory footer → uses .hfs-table-footer */

/* ── Suppliers table CSS removed — replaced by sup- split-panel ── */
/* ── Brands table CSS removed — replaced by brd- split-panel ── */

/* ── Categories viewport constraint ── */
.categories-table-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
	border-radius: 8px;
}
.categories-table-scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: auto;
}
.categories-table-scroll thead th {
	position: sticky;
	top: 0;
	z-index: 2;
}

/* ── Product Identifiers panel ── */
.hfs-identifiers-add-row {
	border-top: 1px solid var(--hfs-border);
	padding-top: 12px;
	margin-top: 4px;
}

/* ================================================================
   PRINT STYLES — Reports
   Target: standard inkjet (Letter 8.5×11", ~96dpi screen → 72dpi print)
   ================================================================ */
@media print {

	/* Hide everything except the active report body */
	body > *:not(.admin-wrapper)							{ display: none !important; }
	.admin-sidebar,
	.admin-sidebar-toggle,
	.admin-topbar,
	.rpt-toolbar,
	.rpt-panel-toggle,
	.rpt-panel,
	.rpt-empty,
	.rpt-loading,
	.rpt-expand-btn									{ display: none !important; }

	/* Reset fixed positioning — let report flow naturally on paper */
	#section-reports_shift.admin-section,
	#section-reports_sales.admin-section,
	#section-reports_cpa.admin-section {
		position: static !important;
		display: block !important;
		height: auto !important;
		overflow: visible !important;
	}

	.admin-wrapper,
	.admin-main,
	.admin-content									{
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		height: auto !important;
		overflow: visible !important;
		background: #fff !important;
	}

	.rpt-shell,
	.rpt-area										{
		display: block !important;
		width: 100% !important;
		height: auto !important;
		overflow: visible !important;
	}

	.rpt-body {
		display: block !important;
		overflow: visible !important;
		padding: 0 !important;
		height: auto !important;
	}

	/* Print header — store name + report title + date */
	.rpt-report-header {
		margin-bottom: 16pt;
		padding-bottom: 8pt;
		border-bottom: 1.5pt solid #333;
	}
	.rpt-report-header h5 {
		font-size: 14pt;
		font-weight: 700;
		margin: 0 0 3pt;
		color: #000;
	}
	.rpt-period-label {
		font-size: 9pt;
		color: #555;
	}

	/* Summary stat cards — flow in a row, no shadows */
	.rpt-stat-card {
		display: inline-block !important;
		border: 1pt solid #ccc !important;
		border-radius: 4pt !important;
		padding: 6pt 10pt !important;
		margin: 0 6pt 8pt 0 !important;
		background: #fafafa !important;
		box-shadow: none !important;
		vertical-align: top;
	}
	.rpt-stat-label {
		font-size: 7pt;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: #777;
	}
	.rpt-stat-value {
		font-size: 13pt;
		font-weight: 700;
		color: #000;
	}
	.rpt-stat-value.neg	{ color: #B7472A !important; }
	.rpt-stat-value.pos	{ color: #2E5339 !important; }

	/* Tables */
	.rpt-table {
		width: 100% !important;
		border-collapse: collapse !important;
		font-size: 9pt;
		margin-top: 10pt;
		page-break-inside: auto;
	}
	.rpt-table th {
		background: #f0f0f0 !important;
		color: #000 !important;
		border: 0.5pt solid #bbb !important;
		padding: 4pt 6pt !important;
		font-size: 8pt;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
	}
	.rpt-table td {
		border: 0.5pt solid #ddd !important;
		padding: 3pt 6pt !important;
		vertical-align: top;
		color: #000 !important;
	}
	.rpt-table tr { page-break-inside: avoid; }
	.rpt-totals-row td {
		font-weight: 700 !important;
		background: #f5f5e8 !important;
		border-top: 1pt solid #aaa !important;
	}
	.rpt-summary-row td {
		background: #f9f9f9 !important;
		font-style: italic;
	}
	.num { text-align: right !important; }
	.neg { color: #B7472A !important; }
	.pos { color: #2E5339 !important; }

	/* Section dividers */
	.rpt-section-title {
		font-size: 10pt;
		font-weight: 700;
		margin: 14pt 0 4pt;
		padding-bottom: 3pt;
		border-bottom: 0.5pt solid #ccc;
		color: #000;
		page-break-after: avoid;
	}

	/* Detail rows (expandable session details) — always show on print */
	.rpt-detail-row { display: table-row !important; }
	.rpt-detail-inner {
		display: block !important;
		padding: 4pt 8pt !important;
		font-size: 8pt;
		background: #fafafa !important;
		border: 0.5pt solid #e0e0e0 !important;
	}

	/* Page setup */
	@page {
		size: letter portrait;
		margin: 0.65in 0.6in 0.75in;
	}
	@page :first {
		margin-top: 0.5in;
	}

	/* Footer via content trick — page numbers */
	@page {
		@bottom-center {
			content: "Page " counter(page) " of " counter(pages);
			font-size: 8pt;
			color: #888;
		}
		@bottom-left {
			content: "Homestead Feed & Supply — Confidential";
			font-size: 7pt;
			color: #aaa;
		}
	}
}

/* ============================================================
   DataTables — HFS Integration
   DT provides sort + child rows ONLY.
   All layout/scroll/styling is handled by HFS card pattern.
   topbar(42) + section-padding-top(24) + tabs-wrap(48) +
   tabpanes-padding-top(20) + toolbar(48) + section-padding-bottom(24) = 206px
   ============================================================ */

/* Card + scroll container — mirrors .products-table-card / .products-table-scroll */
.hfs-dt-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
	border-radius: 8px;
}
.hfs-dt-scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: auto;
}
.hfs-dt-scroll thead th {
	position: sticky;
	top: 0;
	z-index: 2;
}

/* Chevron and actions column widths */
.hfs-col-chevron { width: 36px !important; padding-left: 10px !important; padding-right: 4px !important; }
th.hfs-col-actions   { width: 110px !important; white-space: nowrap; text-align: center; }
td.hfs-col-actions   { width: 110px !important; white-space: nowrap; text-align: left; }
th.hfs-dt-actions-col { width: 110px !important; min-width: 110px !important; white-space: nowrap; text-align: center; }
td.hfs-dt-actions-col { width: 110px !important; min-width: 110px !important; white-space: nowrap; text-align: left; }

/* Chevron toggle button */
.hfs-dt-chevron {
	background: none;
	border: none;
	padding: 2px 4px;
	cursor: pointer;
	color: var(--hfs-text-muted);
	font-size: 0.9rem;
	transition: transform 0.15s, color 0.15s;
	line-height: 1;
	display: inline-block;
}
.hfs-dt-chevron:hover { color: var(--hfs-primary); }
.hfs-dt-chevron.open  { transform: rotate(90deg); color: var(--hfs-primary); }

/* Suppress DataTables 2.x UI chrome — target toolbar rows by their specific classes */
/* DT 2.x: .dt-layout-start = top toolbar, .dt-layout-end = bottom toolbar, .dt-layout-table = the table */
.dataTables_filter,
.dataTables_length,
.dataTables_info,
.dataTables_paginate,
.dt-layout-start,
.dt-layout-end { display: none !important; }

/* DT 2.x container wrappers — transparent to flex layout */
.dt-container { display: contents; }
.dt-layout-row { display: contents; }
.dt-layout-full { display: contents; }
.dt-layout-table { display: contents; }

/* Child / expanded row highlight */
.hfs-dt-scroll tbody tr.dt-hasChild td { background: var(--hfs-primary-faint, rgba(139,90,43,0.05)) !important; }
.hfs-dt-scroll tbody tr.dt-childRow > td {
	background: var(--hfs-surface) !important;
	padding: 14px 20px !important;
	border-bottom: 2px solid var(--hfs-border) !important;
}

/* Inactive customer rows */
.hfs-dt-scroll tbody tr.hfs-row-inactive td { opacity: 0.5; }
.hfs-dt-scroll tbody tr.hfs-row-inactive:hover td { opacity: 0.75; }

/* Customer child row detail layout */
.hfs-cust-child {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	align-items: flex-start;
}
.hfs-cust-child-detail { flex: 1; min-width: 180px; }
.hfs-cust-child-detail .label {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--hfs-text-muted);
	margin-bottom: 2px;
}
.hfs-cust-child-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-top: 2px;
}

/* Hidden file input (triggered by label) */
.hfs-file-input-hidden { display: none; }

/* ── Sub-table component (nested detail rows inside a parent table) ──
   Specificity (0,4,2) must beat the parent table header rule
   .admin-section:not(.hfs-pos-fullscreen) .table thead th (0,3,2)
   so the sub-table tokens control their own appearance. Any new nested
   sub-table (audit detail, return detail, etc.) should reuse these
   same tokens by adding its wrapper class alongside .hfs-order-child. */
.admin-section .admin-table-card .hfs-order-child table thead th {
	background: var(--hfs-subtable-head-bg);
	color: var(--hfs-subtable-head-text);
	border-color: var(--hfs-subtable-border-bottom);
	font-weight: 600;
	font-size: 0.72rem;
	text-transform: uppercase;
	padding: 4px 8px;
	border-bottom: 1px solid var(--hfs-subtable-border-bottom);
}
.hfs-order-child { font-size: 0.85rem; }
.hfs-order-child table {
	width: 100%;
	border-collapse: collapse;
}
.hfs-order-child table td {
	padding: 5px 8px;
	border-bottom: 1px solid var(--hfs-subtable-border-bottom);
}
.hfs-order-child-meta {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.hfs-order-child-meta .label {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hfs-text-muted);
}

/* Order Details dialog table — standard table header, transparent rows */
.hfs-order-detail-table {
	border-collapse: collapse;
}
.hfs-order-detail-table thead th {
	background: var(--hfs-table-head-bg);
	color: var(--hfs-table-head-text);
	border-color: var(--hfs-table-head-bg);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.5rem 0.75rem;
}
.hfs-order-detail-table thead th:first-child { border-top-left-radius: 8px; }
.hfs-order-detail-table thead th:last-child  { border-top-right-radius: 8px; }
.hfs-order-detail-table tbody td {
	background: transparent;
	padding: 0.5rem 0.75rem;
	font-size: 0.85rem;
	border-bottom: 1px solid var(--hfs-border);
}

/* ============================================================
   Inline-style cleanup — v2.18.48
   ============================================================ */

/* Cart flyout item */
.cart-item-name        { font-size: 0.88rem; }
.cart-item-price-each  { font-size: 0.78rem; }
.cart-item-line-total  { color: var(--hfs-green-dark); }

/* Toast */
.hfs-toast-wrap { z-index: 1100; }

/* Dashboard low-stock */
.dash-lowstock-row  { display: flex; align-items: center; font-size: 0.82rem; }
.dash-lowstock-qty  { min-width: 30px; text-align: center; font-weight: 700; }
.dash-lowstock-info { flex: 1; margin-left: 8px; }
.dash-lowstock-name { font-weight: 600; color: var(--hfs-brown); }

/* Dashboard recent transactions */
.dash-txn-method  { font-size: 0.75rem; }
.dash-txn-badge   { font-size: 0.65rem; }
.dash-txn-time    { font-size: 0.75rem; }
.dash-txn-product { font-size: 0.82rem; }

/* Product identifier pack qty */
.ident-packqty-wrap  { display: none; }
.ident-packqty-input { width: 80px; }

/* Product thumbnail in tables */
.prod-thumb-img {
	width: 34px;
	height: 34px;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid var(--hfs-border);
	background: var(--hfs-surface);
}

/* Inline error messages */
.hfs-inline-error     { color: var(--hfs-danger); }
.hfs-inline-error--sm { color: var(--hfs-danger); font-size: 0.85rem; }

/* Generic badge font sizes */
.hfs-badge-xs  { font-size: 0.7rem; }
.hfs-badge-xxs { font-size: 0.65rem; }
.hfs-badge-6   { font-size: 0.6rem; }
.hfs-badge-5   { font-size: 0.5rem; }

/* Product image slot */
.prod-img-slot-wrap {
	position: relative;
	border: 1px solid var(--hfs-border);
	border-radius: 10px;
	overflow: hidden;
	background: var(--hfs-surface);
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.prod-img-slot-badge { position: absolute; top: 6px; left: 6px; }
.prod-img-slot-del   { position: absolute; top: 6px; right: 6px; }
.prod-img-slot-img   { max-width: 100%; max-height: 100%; object-fit: cover; }
.prod-img-slot-label { font-size: 0.75rem; color: var(--hfs-text-muted); margin-top: 4px; }

/* Brands logo placeholder */
.brands-logo-thumb-placeholder { display: none; }

/* POS cart store-credit row */
.pos-cart-store-credit-row { background: var(--hfs-highlight-orange-soft); }

/* POS cart store-credit item name */
.pos-cart-credit-name { color: var(--hfs-accent-orange); }

/* POS cart store-credit icon spacing */
.pos-cart-credit-icon { margin-right: 4px; }

/* POS pay title return icon */
.pos-pay-return-icon { color: var(--hfs-accent-orange); }

/* POS txn total display */
.pos-txn-total-display { font-size: 1.5rem; color: var(--hfs-rust); }

/* Return search result rows */
.pos-return-search-row { cursor: pointer; font-size: 0.78rem; }
.pos-return-error      { color: var(--hfs-danger); }
.pos-return-qty-cell   { text-align: center; }
.pos-return-act-cell   { text-align: center; }

/* Register open/close dialog content */
.reg-dialog-hint       { font-size: 0.82rem; color: var(--hfs-text-muted); margin-bottom: 12px; }
.reg-dialog-hint--b    { font-size: 0.82rem; color: var(--hfs-text-muted); margin-bottom: 10px; }
.reg-dialog-section    { margin-top: 12px; }
.reg-dialog-flex       { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.reg-dialog-chk-label  { font-size: 0.8rem; color: var(--hfs-text-muted); cursor: pointer; }
.reg-dialog-notes-wrap { margin-top: 10px; }
.reg-dialog-textarea   { text-align: left; font-size: 0.8rem; font-weight: 400; padding: 5px 10px; }
.reg-summary-wrap      { margin-bottom: 12px; }

/* Denomination grid */
.hfs-denom-col-hdr-count   { text-align: center; }
.hfs-denom-col-hdr-sub     { text-align: right; }
.hfs-denom-input           { text-align: center; padding: 3px 4px; font-size: 0.78rem; }
.hfs-denom-two-col         { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

/* System settings store hours */
.sys-hours-switch-wrap { padding-left: 2.5rem; }
.sys-hours-closed-lbl  { font-size: 0.78rem; color: var(--hfs-text-muted); }

/* Lockout list */
.lockout-list-sm       { font-size: 0.82rem; }
.lockout-table-wrap    { font-size: 0.82rem; }

/* Staff permissions */
.staff-perm-badge      { font-size: 0.6rem; }
.staff-perm-cell       { max-width: 300px; }
.staff-perm-chk-label  { font-size: 0.82rem; min-width: 140px; }

/* Integrations table */
.intg-env-cell         { font-size: 0.85rem; }
.intg-cred-cell        { font-family: monospace; font-size: 0.78rem; color: var(--hfs-text-muted); }

/* Reports */
.rpt-override-note     { color: var(--hfs-danger); font-size: 0.7rem; }
.rpt-detail-row        { display: none; }
.rpt-empty-tall        { height: 200px; }
.rpt-empty-check-icon  { color: var(--hfs-success-accent-strong); }
.rpt-totals-indent     { padding-left: 20px; }
.rpt-asof-label        { font-size: 0.75rem; color: var(--hfs-text-muted); margin-bottom: 10px; }
.rpt-void-status       { color: var(--hfs-danger); font-weight: 600; }

/* Print content */
.print-store-name      { margin-bottom: 4px; }
.print-report-type     { font-size: 10px; color: #666; margin-bottom: 12px; }

/* Terminals table */
.term-lastseen-cell    { font-size: 0.8rem; }
.term-cashier-sub      { font-size: 0.75rem; }


.hfs-list-row__eyebrow {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hfs-text-muted);
	margin-bottom: 2px;
}

.hfs-return-dialog-body {
	display: flex;
	gap: 12px;
	flex: 1 1 auto;
	min-height: 0;
	padding: 12px 16px 0;
}

.hfs-return-left-panel {
	flex: 0 0 40%;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.hfs-return-search-panel {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0;
}

.hfs-return-list-area {
	flex: 0 0 60%;
	min-width: 0;
	border: 1px solid var(--hfs-border);
	border-radius: 10px;
	overflow: auto;
}

.hfs-return-search-row {
	gap: 0;
}

.hfs-return-mode-select {
	flex: 0 0 160px;
	border-radius: 8px 0 0 8px;
	border-right: none;
}

.hfs-return-search-row .hfs-return-search-input {
	border-radius: 0;
}

.hfs-return-search-results {
	flex: 1 1 auto;
	min-height: 260px;
	max-height: none;
	border: 1px solid var(--hfs-border);
	border-radius: 10px;
	background: var(--hfs-surface);
	overflow-y: auto;
	margin-top: 0;
}

.hfs-return-search-results .hfs-list-row:first-child {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.hfs-return-search-results .hfs-list-row:last-child {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.hfs-pos-fullscreen .hfs-register-action-btn.hfs-btn-disabled,
.hfs-pos-fullscreen .hfs-register-action-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	background: var(--hfs-surface) !important;
	border-color: var(--hfs-border) !important;
	box-shadow: none !important;
}

/* ============================================
   POS RETURNS DIALOG — Product Search Match (v2.18.77)
   ============================================ */
#posReturnOverlay .hfs-dialog {
	display: flex;
	flex-direction: column;
}
#posReturnOverlay .hfs-return-search-topbar {
	flex-shrink: 0;
}
#posReturnOverlay .hfs-return-two-panel {
	flex: 1;
	min-height: 0;
}
#posReturnOverlay .hfs-return-panel-left {
	flex: 0 0 40%;
	max-width: 40%;
	background: var(--hfs-dialog-bg);
}
#posReturnOverlay .hfs-return-panel-right {
	flex: 0 0 60%;
	max-width: 60%;
	background: var(--hfs-dialog-bg);
}
#posReturnOverlay .hfs-return-search-results {
	background: var(--hfs-dialog-bg);
}
#posReturnOverlay .hfs-return-list-scroll {
	background: var(--hfs-dialog-bg);
	padding: 0;
}
#posReturnOverlay .hfs-return-summary {
	color: var(--hfs-brand-accent);
	font-size: 0.9rem;
}
#posReturnOverlay .hfs-return-total-value {
	color: var(--hfs-brand-accent);
	font-weight: 700;
}
#posReturnOverlay .hfs-return-card-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.55rem;
}
#posReturnOverlay .hfs-return-card {
	background: var(--hfs-surface);
	border: 1px solid var(--hfs-border);
	border-radius: 12px;
	padding: 0.45rem 0.55rem 0.55rem;
}
#posReturnOverlay .hfs-return-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.4rem;
	margin-bottom: 0.15rem;
}
#posReturnOverlay .hfs-return-product-name {
	display: block;
	flex: 1;
	overflow: hidden;
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.2;
}
#posReturnOverlay .hfs-return-card-meta {
	margin-bottom: 0.35rem;
}
#posReturnOverlay .hfs-return-sku {
	font-size: 0.78rem;
}
#posReturnOverlay .hfs-return-card-grid {
	display: grid;
	grid-template-columns: 86px minmax(0, 1.2fr) 68px 68px;
	column-gap: 0.24rem;
	align-items: center;
}
#posReturnOverlay .hfs-return-card-grid--labels {
	margin-bottom: 0.08rem;
}
#posReturnOverlay .hfs-return-card-label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hfs-text-muted);
}
#posReturnOverlay .hfs-return-card-label--qty,
#posReturnOverlay .hfs-return-card-cell--qty {
	text-align: center;
}
#posReturnOverlay .hfs-return-card-label--price,
#posReturnOverlay .hfs-return-card-label--total,
#posReturnOverlay .hfs-return-card-cell--price,
#posReturnOverlay .hfs-return-card-cell--total {
	text-align: right;
}
#posReturnOverlay .hfs-return-card-cell {
	min-width: 0;
}
#posReturnOverlay .hfs-return-qty-controls {
	gap: 0.16rem;
	justify-content: center;
	background: transparent;
	padding: 0;
	border-radius: 0;
}
#posReturnOverlay .hfs-return-qty-num {
	min-width: 14px;
	font-size: 0.86rem;
	text-align: center;
}
#posReturnOverlay .hfs-return-select {
	width: 100%;
	height: 32px;
	font-size: 0.86rem;
}
#posReturnOverlay .hfs-return-price,
#posReturnOverlay .hfs-return-total {
	font-weight: 600;
	font-size: 0.9rem;
	white-space: nowrap;
}
#posReturnOverlay .hfs-return-remove {
	font-size: 0.9rem;
	flex: 0 0 auto;
}
.hfs-pos-fullscreen .barcode-wrapper .hfs-btn-icon.hfs-btn-disabled,
.hfs-pos-fullscreen .hfs-register-key-btn.hfs-btn-disabled,
.hfs-pos-fullscreen .hfs-register-tender-btn.hfs-btn-disabled,
.hfs-pos-fullscreen .barcode-input:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}
#posReturnOverlay .hfs-search-dialog-controls .hfs-return-mode-select {
	flex: 0 0 180px;
	min-width: 0;
}
#posReturnOverlay .search-result-item .sr-add {
	pointer-events: none;
}
@media (max-width: 1100px) {
	#posReturnOverlay .hfs-return-card-grid {
		grid-template-columns: 98px minmax(0, 1.2fr) 68px 68px;
		column-gap: 0.28rem;
	}
}

/*
   POS RETURN FINALIZATION SHELL (v2.18.83)
   Sprint A: separated return dialog shell from sale payment flow.
*/
#posReturnFinalizeOverlay .hfs-dialog {
	max-width: 560px;
}
#posReturnFinalizeOverlay .hfs-return-finalize-body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1rem 1.1rem 1.05rem;
}
#posReturnFinalizeOverlay .hfs-return-finalize-total-wrap {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
#posReturnFinalizeOverlay .hfs-return-finalize-total {
	font-size: 2rem;
	font-weight: 700;
}
#posReturnFinalizeOverlay .hfs-return-finalize-helper,
#posReturnFinalizeOverlay .hfs-return-finalize-pending {
	font-size: 0.95rem;
	line-height: 1.45;
	color: var(--hfs-text-color, #3d3127);
}
#posReturnFinalizeOverlay .hfs-return-finalize-pending {
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--hfs-border-color, rgba(89, 70, 52, 0.18));
	border-radius: 12px;
	background: var(--hfs-surface-2, rgba(255, 248, 240, 0.75));
}
#posReturnFinalizeOverlay .hfs-return-finalize-methods {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
}
#posReturnFinalizeOverlay .hfs-return-method-btn {
	justify-content: center;
	min-height: 70px;
	padding: 0.9rem 0.75rem;
	font-weight: 700;
}
#posReturnFinalizeOverlay .hfs-return-method-btn i {
	margin-right: 0.4rem;
}
@media (max-width: 760px) {
	#posReturnFinalizeOverlay .hfs-return-finalize-methods {
		grid-template-columns: 1fr;
	}
}

/* v2.18.83 — Store Credit exchange state */
.hfs-register-exchange-summary {
	display: none;
	background: transparent;
}

.hfs-register-exchange-summary.is-active {
	display: grid;
}

.hfs-register-exchange-label {
	font-weight: 700;
	color: rgba(255,255,255,0.86);
}

.hfs-register-exchange-value {
	font-weight: 700;
	color: #fff;
}

.hfs-return-finalize-helper--minor {
	margin-top: 8px;
	font-size: 12px;
	opacity: 0.9;
}

/* ============================================================
   System > Event Logs
   ============================================================ */
#section-system_eventlog.active {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 0;
	box-sizing: border-box;
}
#section-system_eventlog .eventlog-tabs-wrap {
	position: sticky;
	top: 0;
	z-index: 100;
	padding-bottom: 0;
	flex: 0 0 auto;
	position: sticky;
}
#section-system_eventlog .eventlog-tabs-wrap .settings-tabs {
	position: relative;
}
.eventlog-filter-toggle {
	position: absolute;
	left: 50%;
	bottom: -24px;
	transform: translateX(-50%);
	width: 42px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hfs-sidebar-bg);
	border: 1px solid var(--hfs-border);
	border-top: none;
	border-radius: 0 0 8px 8px;
	cursor: pointer;
	color: var(--hfs-sidebar-text-muted);
	font-size: 0.75rem;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	z-index: 3;
}
.eventlog-filter-toggle:hover {
	background: var(--hfs-sidebar-hover-bg);
	color: var(--hfs-brand-accent);
	border-color: var(--hfs-brand-accent);
}
.eventlog-filter-toggle i {
	transition: transform 0.25s ease;
}
.eventlog-filter-toggle:not(.collapsed) i {
	transform: rotate(180deg);
}
#section-system_eventlog .eventlog-tabpanes {
	padding-top: 26px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
	min-width: 0;
	width: 100%;
	max-width: 100%;
}
#section-system_eventlog .settings-tabpane {
	display: none;
	overflow: hidden;
	min-height: 0;
	min-width: 0;
	width: 100%;
	max-width: 100%;
}
#section-system_eventlog .settings-tabpane.active {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
	min-width: 0;
}
#section-system_eventlog .eventlog-pane-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
	min-width: 0;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}
.eventlog-filter-panel {
	display: none;
	background: var(--hfs-surface);
	border: 1px solid var(--hfs-border);
	border-radius: 8px;
	padding: 12px 14px 14px;
	margin: 0 0 10px;
	flex: 0 0 auto;
}
.eventlog-filter-panel.is-open {
	display: block;
}
.eventlog-filter-grid {
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 10px 12px;
}
.eventlog-filter-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding-top: 10px;
	flex-wrap: wrap;
}
/* Named Event Logs card + scroll wrappers — mirrors Brands/Products table pattern */
.events-table-card,
.events-audit-table-card,
.events-checkout-table-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
	min-width: 0;
	height: 100%;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	border-radius: 8px;
}
.events-table-scroll,
.events-audit-table-scroll,
.events-checkout-table-scroll {
	flex: 1 1 0;
	min-height: 0;
	min-width: 0;
	height: 100%;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.events-table-scroll thead th,
.events-audit-table-scroll thead th,
.events-checkout-table-scroll thead th {
	position: sticky;
	top: 0;
	z-index: 2;
}
.events-table-card .hfs-table-footer,
.events-audit-table-card .hfs-table-footer,
.events-checkout-table-card .hfs-table-footer {
	flex: 0 0 auto;
	min-width: 0;
	width: 100%;
	max-width: 100%;
}
.eventlog-table {
	table-layout: auto;
	width: 100%;
	min-width: 100%;
}
.eventlog-table thead th,
.eventlog-table tbody td {
	white-space: nowrap;
}
.eventlog-table tbody td {
	font-size: 0.78rem !important;
	line-height: 1.2;
}
.eventlog-table thead th {
	font-size: 0.68rem !important;
}
.eventlog-cell-primary {
	display: block;
	font-weight: 600;
	color: var(--hfs-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.eventlog-cell-secondary {
	display: block;
	font-size: 0.72rem;
	color: var(--hfs-text-muted);
}
.eventlog-summary-cell {
	max-width: 460px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.eventlog-table tbody tr.dt-hasChild > td {
	white-space: normal;
}
.eventlog-table tbody tr > td .hfs-event-child,
.eventlog-table tbody tr.dt-childRow > td .hfs-event-child {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	overflow: hidden;
}
.eventlog-ref-cell {
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.eventlog-status-wrap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.eventlog-status-pill,
.eventlog-severity-pill {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.eventlog-status-pill {
	background: var(--hfs-chip-bg, rgba(139,90,43,0.10));
	color: var(--hfs-text);
}
.eventlog-severity-pill {
	background: var(--hfs-primary-faint, rgba(139,90,43,0.08));
	color: var(--hfs-primary);
}
.eventlog-status-pill.is-empty,
.eventlog-severity-pill.is-empty {
	background: transparent;
	padding-left: 0;
	padding-right: 0;
}
.hfs-event-child {
	font-size: 0.84rem;
}
.hfs-event-child-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 18px;
	align-items: stretch;
	width: 100%;
	max-width: 100%;
	min-width: 0;
}
.hfs-event-child-section {
	background: var(--hfs-dialog-bg);
	border: 1px solid var(--hfs-border);
	border-radius: 8px;
	padding: 12px;
	min-width: 0;
	width: 100%;
	max-width: 100%;
	height: 100%;
	box-sizing: border-box;
}
.hfs-event-child-section--wide {
	grid-column: 1 / -1;
}
.hfs-event-child-title,
.hfs-event-dialog-section-title {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--hfs-text-muted);
	margin-bottom: 10px;
}
.hfs-event-kv {
	display: grid;
	grid-template-columns: minmax(110px, 150px) minmax(0, 1fr);
	gap: 6px 12px;
	font-size: 0.82rem;
	width: 100%;
	max-width: 100%;
}
.hfs-event-kv-label {
	color: var(--hfs-text-muted);
	font-weight: 600;
}
.hfs-event-kv-value {
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.hfs-event-message {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font-size: 0.84rem;
}
.hfs-event-related-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.hfs-event-related-item {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--hfs-border);
	min-width: 0;
}
.hfs-event-related-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}
.hfs-event-related-meta {
	font-size: 0.74rem;
	color: var(--hfs-text-muted);
	white-space: nowrap;
}
.hfs-event-related-main {
	min-width: 0;
	flex: 1 1 auto;
}
.hfs-event-related-main strong,
.hfs-event-related-main span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.hfs-event-child-actions {
	display: flex;
	justify-content: flex-end;
	padding-top: 12px;
}
.eventlog-table tbody tr.dt-childRow > td,
.eventlog-table tbody tr.dt-hasChild > td {
	min-width: 0;
}
.hfs-event-detail-table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}
.hfs-event-detail-table thead th {
	background: var(--hfs-subtable-head-bg);
	color: var(--hfs-subtable-head-text);
	border-color: var(--hfs-subtable-border-bottom);
	font-weight: 600;
	font-size: 0.72rem;
	text-transform: uppercase;
	padding: 6px 8px;
	border-bottom: 1px solid var(--hfs-subtable-border-bottom);
}
.hfs-event-detail-table td {
	padding: 6px 8px;
	border-bottom: 1px solid var(--hfs-subtable-border-bottom);
	font-size: 0.82rem;
	vertical-align: top;
	overflow-wrap: anywhere;
	word-break: break-word;
}
.hfs-event-dialog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px 18px;
}
.hfs-event-dialog-grid .hfs-event-child-section--wide {
	grid-column: 1 / -1;
}
#eventLogDetailModal .modal-dialog {
	max-width: min(1240px, calc(100vw - 48px));
}
#eventLogDetailModal .modal-body {
	max-height: calc(100vh - 150px);
}
#eventLogDetailModal .modal-content {
	min-height: 60vh;
}
@media (max-width: 991.98px) {
	.eventlog-summary-cell {
		max-width: 320px;
	}
	.hfs-event-child-grid,
	.hfs-event-dialog-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 767.98px) {
	.eventlog-filter-panel {
		padding: 10px 10px 12px;
	}
	.eventlog-filter-grid {
		grid-template-columns: 1fr;
	}
	#eventLogDetailModal .modal-dialog {
		max-width: calc(100vw - 18px);
		margin: 0.5rem auto;
	}
}

/* ================================================================
   Product Import / Export
   ================================================================ */

/* Parse log scrollable area inside import dialog */
.import-parse-log-wrap {
	margin-top: 4px;
}

.import-parse-log {
	border: 1px solid var(--hfs-border);
	border-radius: var(--hfs-radius);
	background: var(--hfs-surface);
	min-height: 120px;
	max-height: 260px;
	overflow-y: auto;
	padding: 10px 12px;
	font-size: 0.82rem;
	line-height: 1.6;
}

.import-log-line {
	padding: 2px 0;
}

.import-log-line i {
	margin-right: 6px;
	font-size: 0.78rem;
}

.import-log-summary {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--hfs-border);
	font-weight: 600;
}

/* Import history table scroll */
.product-import-table-scroll {
	overflow: auto;
	min-height: 170px;
	max-height: 220px;
}

.product-import-table-scroll thead th {
	position: sticky;
	top: 0;
	z-index: 2;
}

/* ── Import comparison view ────────────────────────────────── */

.import-comparison-wrap {
	display: flex;
	flex-direction: column;
}

.import-comparison-separator {
	border-top: 1px solid var(--hfs-border);
	margin: 12px 0 10px 0;
}

.import-comparison-panels {
	display: flex;
	gap: 8px;
}

.import-comparison-panel {
	flex: 1 1 50%;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.import-comparison-panel-label {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--hfs-text);
	padding: 6px 10px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.import-comparison-scroll {
	height: calc(100vh - 440px);
	min-height: 180px;
	overflow: auto;
	border: 1px solid var(--hfs-border);
	border-radius: var(--hfs-radius);
	background: var(--hfs-dialog-bg);
	margin-bottom: 10px;
}

.import-comparison-scroll thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	white-space: nowrap;
}

.import-comparison-scroll tbody td {
	white-space: nowrap;
}

/* Diff highlight — cell value differs between CSV and live */
.import-diff-cell {
	background: var(--hfs-highlight-bg) !important;
}

/* New product row — NONE match type */
.import-row-new > td {
	background: var(--hfs-success-bg, rgba(40, 167, 69, 0.08));
}

/* Unknown category warning */
.import-cell-unknown-cat {
	color: var(--hfs-danger-strong);
	font-weight: 600;
}
.import-cell-unknown-cat::after {
	content: ' \26A0';
	font-size: 0.72rem;
}

/* Active history row */
.import-history-row--active > td {
	background: var(--hfs-highlight-bg);
}

/* Clickable history rows */
#importHistoryBody tr {
	cursor: pointer;
}

/* ── Import comparison actions row ── */
.import-comparison-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-bottom: 6px;
}

.import-comparison-actions-info {
	margin-right: auto;
	font-size: 0.78rem;
	color: var(--hfs-text-muted);
}

.import-comparison-filter {
	width: 160px;
	font-size: 0.7rem;
	height: var(--hfs-control-height);
}

/* Checkbox column */
.import-col-chk {
	width: 28px;
	text-align: center;
}
.import-row-chk {
	width: 28px;
	text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   PAGES — site navigation management
   ═══════════════════════════════════════════════════════════════ */

.pages-table-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
}

.pages-table-scroll {
	flex: 1 1 0;
	overflow-y: auto;
	min-height: 0;
}

.pages-col-name    { min-width: 240px; }
.pages-col-type    { width: 100px; }
.pages-col-target  { min-width: 200px; }
.pages-col-visible { width: 70px; }
.pages-col-sort    { width: 60px; }
.pages-col-actions { width: 90px; white-space: nowrap; }

.pages-name-wrap {
	display: flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}

/* Type icons */
.pages-type-icon { font-size: 0.8rem; opacity: 0.7; }
.pages-type-icon--mega    { color: var(--hfs-gold); }
.pages-type-icon--content { color: var(--hfs-primary); }
.pages-type-icon--link    { color: var(--hfs-text-muted); }

/* Type badges */
.pages-type-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: 1px solid var(--hfs-border);
}
.pages-type-badge--link {
	background: var(--hfs-surface);
	color: var(--hfs-text-muted);
}
.pages-type-badge--mega {
	background: var(--hfs-surface);
	color: var(--hfs-gold);
	border-color: var(--hfs-gold);
}
.pages-type-badge--content {
	background: var(--hfs-surface);
	color: var(--hfs-primary);
	border-color: var(--hfs-primary);
}

/* Category pill */
.pages-category-pill {
	display: inline-block;
	padding: 1px 6px;
	border-radius: 3px;
	font-size: 0.6rem;
	font-weight: 500;
	background: var(--hfs-surface);
	color: var(--hfs-brand-accent);
	border: 1px solid var(--hfs-border-soft, var(--hfs-border));
}

/* Megamenu flag icon */
.pages-mega-flag {
	font-size: 0.6rem;
	color: var(--hfs-gold);
	margin-left: 2px;
}

/* Page form error */
.hfs-page-form-error {
	display: none;
	font-size: 0.78rem;
	margin-bottom: 8px;
}

/* ── Pages dialog — percentage-based sizing ── */
.pages-dialog {
	width: 85%;
	height: 85%;
	min-width: 500px;
	min-height: 400px;
}

.pages-dialog > .hfs-dialog-body {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.pages-tabpanes {
	padding-top: 12px;
}

/* Editor tab: flex fill so editor takes all available space */
#pagePane-content {
	flex-direction: column;
}

.pages-editor-wrap {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
}

/* ── Visual / Source toggle bar ── */
.pages-editor-mode-bar {
	display: flex;
	gap: 0;
	margin-bottom: 8px;
	flex-shrink: 0;
}

.pages-editor-mode-btn {
	padding: 5px 14px;
	font-size: 0.75rem;
	font-weight: 600;
	border: 1px solid var(--hfs-border-color, #444);
	background: var(--hfs-bg-secondary, #2a2a2a);
	color: var(--hfs-text-muted);
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}

.pages-editor-mode-btn:first-child {
	border-radius: 4px 0 0 4px;
}

.pages-editor-mode-btn:last-child {
	border-radius: 0 4px 4px 0;
	border-left: none;
}

.pages-editor-mode-btn.active {
	background: var(--hfs-accent-blue, #4a90d9);
	color: #fff;
	border-color: var(--hfs-accent-blue, #4a90d9);
}

.pages-editor-mode-btn:hover:not(.active) {
	color: var(--hfs-text);
}

/* ── Visual editor (TinyMCE) container ── */
.pages-editor-visual {
	flex: 1 1 0;
	min-height: 200px;
	display: none;
	flex-direction: column;
}

.pages-editor-visual.active {
	display: flex;
}

.pages-editor-visual .tox-tinymce {
	flex: 1 1 0;
	min-height: 200px;
	border-radius: 4px;
}

/* ── Source editor (CodeMirror) container ── */
.pages-editor-source {
	flex: 1 1 0;
	min-height: 0;
	display: none;
	flex-direction: column;
}

.pages-editor-source.active {
	display: flex;
}

/* ── Pages content editor ── */
.pages-content-editor {
	font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
	font-size: 0.75rem;
	line-height: 1.5;
	tab-size: 4;
	resize: vertical;
	min-height: 200px;
}

/* CodeMirror fills the source container */
.pages-editor-source .CodeMirror {
	flex: 1 1 0;
	min-height: 400px;
	border: 1px solid var(--hfs-border-color, #444);
	border-radius: 4px;
	font-size: 0.78rem;
	line-height: 1.5;
}

.pages-content-hint {
	flex-shrink: 0;
}

.pages-content-hint code {
	padding: 1px 4px;
	border-radius: 3px;
	font-size: 0.65rem;
	background: var(--hfs-bg-secondary, #2a2a2a);
	color: var(--hfs-accent-orange-light);
}

/* Validation feedback */
.pages-content-error {
	display: none;
	padding: 6px 10px;
	margin-top: 6px;
	border-radius: 4px;
	font-size: 0.75rem;
	font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
	background: rgba(255, 80, 80, 0.12);
	color: #ff6b6b;
	border: 1px solid rgba(255, 80, 80, 0.25);
	white-space: pre-wrap;
	word-break: break-word;
	flex-shrink: 0;
}

.pages-content-error--success {
	background: rgba(80, 200, 120, 0.12);
	color: #50c878;
	border-color: rgba(80, 200, 120, 0.25);
	font-family: inherit;
}

/* ── Pages preview — full-screen overlay ── */
.pages-preview-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: #000;
	display: none;
	flex-direction: column;
}

.pages-preview-overlay.open {
	display: flex;
}

.pages-preview-close {
	position: fixed;
	top: 12px;
	right: 16px;
	z-index: 10000;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: none;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}

.pages-preview-close:hover {
	background: rgba(0, 0, 0, 0.9);
}

.pages-preview-frame {
	width: 100%;
	height: 100%;
	border: none;
	background: #fff;
}

/* ── Category Navigation tree (read-only) ────────────────────── */
.catnav-table-card {
	border: 1px solid var(--hfs-border);
	border-radius: var(--hfs-radius, 6px);
	overflow: hidden;
}
.catnav-table-scroll {
	overflow-x: auto;
	max-height: calc(100vh - 240px);
	overflow-y: auto;
}
.catnav-col-name     { min-width: 280px; }
.catnav-col-type     { width: 140px; }
.catnav-col-products { width: 90px; }
.catnav-col-sort     { width: 60px; }

.catnav-name-wrap {
	display: flex;
	align-items: center;
	white-space: nowrap;
}
.catnav-type-icon {
	font-size: 0.8rem;
	opacity: 0.6;
	margin-right: 4px;
}

.catnav-type-badge {
	display: inline-block;
	font-size: 0.65rem;
	font-weight: 600;
	padding: 1px 7px;
	border-radius: 3px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.catnav-type-badge--root {
	background: color-mix(in srgb, var(--hfs-gold) 18%, transparent);
	color: var(--hfs-gold);
}
.catnav-type-badge--sub {
	background: color-mix(in srgb, var(--hfs-primary) 12%, transparent);
	color: var(--hfs-primary);
}

/* ── Placeholder message (used for stubbed tabs) ─────────────── */
.hfs-placeholder-message {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	text-align: center;
}
.hfs-placeholder-icon {
	font-size: 2rem;
	opacity: 0.4;
}

/* ---- Reviews moderation ---- */
.review-text-cell {
	max-width: 350px;
	font-size: 0.7rem;
	line-height: 1.4;
}

.reviews-table-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
	border-radius: 8px;
}

.reviews-table-scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: auto;
}

.reviews-table-scroll thead th {
	position: sticky;
	top: 0;
	z-index: 2;
}

.hero-table-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
	border-radius: 8px;
}

.hero-table-scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: auto;
}

.hero-table-scroll thead th {
	position: sticky;
	top: 0;
	z-index: 2;
}

.hero-col-order   { width: 40px; }
.hero-col-preview { width: 80px; }
.hero-col-active  { width: 70px; }

.hfs-table-count { font-size: 0.75rem; }

.hero-thumb { width: 60px; height: 34px; object-fit: cover; border-radius: 3px; }

.articles-table-card {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
	border-radius: 8px;
}

.articles-table-scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: auto;
}

.articles-table-scroll thead th {
	position: sticky;
	top: 0;
	z-index: 2;
}
.hero-headline { font-size: 0.72rem; }
.hero-tagline { font-size: 0.65rem; }
.hero-link-cell { font-size: 0.65rem; }
.hero-type-badge { font-size: 0.62rem; }

/* Article split-panel: preview and comment cards */
.art-editor-wrap .pages-editor-wrap {
	display: flex;
	flex-direction: column;
	min-height: 420px;
}

.art-editor-wrap .pages-editor-visual {
	display: flex;
	flex: 1 1 0;
}

.art-preview-wrap {
	padding: 16px;
}
.art-preview-article h2 {
	margin: 0 0 8px;
	font-size: 1.4rem;
}
.art-preview-meta {
	display: flex;
	gap: 16px;
	color: var(--hfs-text-muted);
	font-size: 0.78rem;
	margin-bottom: 12px;
}
.art-preview-excerpt {
	font-style: italic;
	color: var(--hfs-text-muted);
	margin-bottom: 12px;
	font-size: 0.85rem;
}
.art-preview-body {
	line-height: 1.6;
	font-size: 0.9rem;
}
.art-preview-body h2, .art-preview-body h3 {
	margin-top: 16px;
}

.art-comment-card {
	border: 1px solid var(--hfs-border);
	border-radius: 6px;
	padding: 10px 12px;
	margin-bottom: 8px;
	background: var(--hfs-bg);
}
.art-comment-card.art-comment-reply {
	margin-left: 24px;
	border-left: 3px solid var(--hfs-border);
}
.art-comment-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
}
.art-comment-author {
	font-weight: 600;
	font-size: 0.82rem;
}
.art-comment-text {
	font-size: 0.85rem;
	line-height: 1.5;
	margin-bottom: 6px;
}
.art-comment-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.art-comment-date {
	font-size: 0.7rem;
	color: var(--hfs-text-muted);
}
.art-editor-wrap .pages-editor-wrap {
	border: 1px solid var(--hfs-border);
	border-radius: 6px;
/* 	overflow: hidden; */
}
#artPane-content .emp-detail-scroll {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

#artPane-content .emp-detail-fields {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
}

#artPane-content .art-editor-wrap {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
	margin: 0;
}

#artPane-content .pages-editor-wrap {
	flex: 1 1 0;
	min-height: 0;
}

#artPane-content .pages-editor-visual .tox-tinymce {
	height: 100% !important;
	min-height: 0 !important;
}

/* Article split-panel — wider left panel for titles */
.art-shell {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--hfs-bg);
}
.art-shell .emp-top {
	flex-shrink: 0;
	background: var(--hfs-bg);
}
.art-split {
	display: flex;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}
.art-split .art-list-panel {
	width: 360px;
	flex-shrink: 0;
	border-right: 1px solid var(--hfs-border);
	display: flex;
	flex-direction: column;
	background: var(--hfs-bg);
}
.art-split .art-list-panel .emp-list-scroll {
	flex: 1;
	overflow-y: auto;
}
.art-split .art-list-panel .emp-list-item-name {
	white-space: normal;
	word-wrap: break-word;
}

/* Article filter bar — consistent control heights */
.art-shell .emp-filter-bar .input-group,
.art-shell .emp-filter-bar .input-group .form-control,
.art-shell .emp-filter-bar .input-group .hfs-btn,
.art-shell .emp-filter-bar .hfs-btn,
.art-shell .emp-filter-bar select {
	height: var(--hfs-control-height);
}

/* ============================================
   COMMENTS — Split-panel moderation
   All com-prefixed classes.
   ============================================ */
.com-shell {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--hfs-bg);
}
.com-shell .emp-top {
	flex-shrink: 0;
	background: var(--hfs-bg);
}
.com-split {
	display: flex;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}
.com-split .com-list-panel {
	width: 360px;
	flex-shrink: 0;
	border-right: 1px solid var(--hfs-border);
	display: flex;
	flex-direction: column;
	background: var(--hfs-bg);
}
.com-split .com-list-panel .emp-list-scroll {
	flex: 1;
	overflow-y: auto;
}
/* Status chip bar above list */
.com-status-bar {
	display: flex;
	gap: 10px;
	padding: 6px 12px;
	border-bottom: 1px solid var(--hfs-border);
	font-size: 0.72rem;
	color: var(--hfs-text-muted);
}
.com-status-chip {
	display: flex;
	align-items: center;
	gap: 4px;
}
/* List items */
.com-list-item {
	padding: 8px 12px;
	border-bottom: 1px solid var(--hfs-border);
	cursor: pointer;
	transition: background 0.1s;
}
.com-list-item:hover {
	background: var(--hfs-pos-tint);
}
.com-list-item.active {
	background: var(--hfs-bar);
	color: var(--hfs-bar-text, #fff);
}
.com-list-item.active .com-list-item-ref,
.com-list-item.active .com-list-item-date,
.com-list-item.active .com-list-item-text {
	color: var(--hfs-bar-text, #fff);
	opacity: 0.85;
}
.com-list-item-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 6px;
	margin-bottom: 2px;
}
.com-list-item-author {
	font-weight: 600;
	font-size: 0.82rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	min-width: 0;
}
.com-list-item-text {
	font-size: 0.75rem;
	color: var(--hfs-text-muted);
	line-height: 1.3;
	display: -webkit-box;
	line-clamp: 2;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 2px;
}
.com-list-item-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.7rem;
	color: var(--hfs-text-muted);
}
.com-list-item-ref {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	min-width: 0;
}
/* Detail sections */
.com-detail-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}
.com-detail-date {
	font-size: 0.78rem;
	color: var(--hfs-text-muted);
}
.com-detail-section {
	margin-bottom: 12px;
}
.com-detail-section .form-label {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hfs-text-muted);
	margin-bottom: 2px;
}
.com-detail-text {
	white-space: pre-wrap;
	line-height: 1.6;
	font-size: 0.88rem;
	padding: 10px 12px;
	background: var(--hfs-pos-tint);
	border-radius: 6px;
	border: 1px solid var(--hfs-border);
}
.com-detail-ref {
	font-size: 0.85rem;
}
.com-detail-reply-ref {
	font-size: 0.82rem;
	font-style: italic;
	color: var(--hfs-text-muted);
}

/* ── Comment thread (chat-style) ── */
.com-thread-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	border-bottom: 1px solid var(--hfs-border);
	background: var(--hfs-pos-tint);
	flex-shrink: 0;
}
.com-thread-ref {
	font-size: 0.78rem;
	color: var(--hfs-text);
	font-weight: 600;
}
.com-thread-scroll {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Chat bubbles */
.com-bubble {
	max-width: 80%;
	padding: 10px 14px;
	border-radius: 12px;
	font-size: 0.82rem;
	line-height: 1.45;
	position: relative;
}
.com-bubble--customer {
	align-self: flex-start;
	background: var(--hfs-surface-tint);
	border: 1px solid var(--hfs-border);
	border-bottom-left-radius: 4px;
}
.com-bubble--staff {
	align-self: flex-end;
	background: var(--hfs-bar);
	color: var(--hfs-bar-text);
	border-bottom-right-radius: 4px;
}
.com-bubble-author {
	font-size: 0.68rem;
	font-weight: 700;
	margin-bottom: 3px;
}
.com-bubble--customer .com-bubble-author {
	color: var(--hfs-text);
}
.com-bubble--staff .com-bubble-author {
	color: var(--hfs-bar-text);
	opacity: 0.85;
}
.com-bubble-text {
	word-wrap: break-word;
}
.com-bubble-text p {
	margin: 0 0 0.4em;
}
.com-bubble-text p:last-child {
	margin-bottom: 0;
}
.com-bubble-meta {
	font-size: 0.62rem;
	margin-top: 4px;
	opacity: 0.65;
}
.com-bubble--staff .com-bubble-meta {
	text-align: right;
}
.com-bubble-status {
	display: inline-block;
	font-size: 0.58rem;
	padding: 1px 5px;
	border-radius: 3px;
	margin-left: 6px;
	vertical-align: middle;
}

/* Reply input bar */
.com-reply-bar {
	flex-shrink: 0;
	display: flex;
	align-items: stretch;
	gap: 8px;
	padding: 8px 12px;
	border-top: 1px solid var(--hfs-border);
	background: var(--hfs-pos-tint);
	height: var(--com-reply-h, 140px);
}
.com-reply-editor-wrap {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.com-reply-editor-wrap .tox-tinymce {
	flex: 1 !important;
	height: 100% !important;
}
.com-reply-textarea {
	display: none; /* hidden once TinyMCE inits */
}
.com-reply-send {
	height: 36px;
	width: 36px;
	flex-shrink: 0;
	align-self: flex-end;
}

/* Filter bar control heights */
.com-shell .emp-filter-bar .input-group,
.com-shell .emp-filter-bar .input-group .form-control,
.com-shell .emp-filter-bar .input-group .hfs-btn,
.com-shell .emp-filter-bar .hfs-btn,
.com-shell .emp-filter-bar select {
	height: var(--hfs-control-height);
}

/* ============================================
   REVIEWS — Split-panel moderation
   All rev-prefixed classes.
   ============================================ */
.rev-shell {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--hfs-bg);
}
.rev-shell .emp-top {
	flex-shrink: 0;
	background: var(--hfs-pos-tint);
}
.rev-split {
	display: flex;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}
.rev-split .rev-list-panel {
	width: 320px;
	flex-shrink: 0;
	border-right: 1px solid var(--hfs-border);
	display: flex;
	flex-direction: column;
	background: var(--hfs-bg);
}
.rev-split .rev-list-panel .emp-list-scroll {
	flex: 1;
	overflow-y: auto;
}
/* Status chip bar above list */
.rev-status-bar {
	display: flex;
	gap: 10px;
	padding: 6px 12px;
	border-bottom: 1px solid var(--hfs-border);
	font-size: 0.72rem;
	color: var(--hfs-text-muted);
}
.rev-status-chip {
	display: flex;
	align-items: center;
	gap: 4px;
}
/* List items */
.rev-list-item {
	padding: 8px 12px;
	border-bottom: 1px solid var(--hfs-border);
	cursor: pointer;
	transition: background 0.1s;
}
.rev-list-item:hover {
	background: var(--hfs-pos-tint);
}
.rev-list-item.active {
	background: var(--hfs-bar);
	color: var(--hfs-bar-text, #fff);
}
.rev-list-item.active .rev-list-item-product,
.rev-list-item.active .rev-list-item-date,
.rev-list-item.active .rev-list-item-text {
	color: var(--hfs-bar-text, #fff);
	opacity: 0.85;
}
.rev-list-item-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 6px;
	margin-bottom: 2px;
}
.rev-list-item-customer {
	font-weight: 600;
	font-size: 0.82rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	min-width: 0;
}
.rev-list-item-stars {
	font-size: 0.65rem;
	margin-bottom: 2px;
}
.rev-list-item-text {
	font-size: 0.75rem;
	color: var(--hfs-text-muted);
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 2px;
}
.rev-list-item-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.7rem;
	color: var(--hfs-text-muted);
}
.rev-list-item-product {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	min-width: 0;
}
/* Detail sections */
.rev-detail-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}
.rev-detail-date {
	font-size: 0.78rem;
	color: var(--hfs-text-muted);
}
.rev-detail-section {
	margin-bottom: 12px;
}
.rev-detail-section .form-label {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hfs-text-muted);
	margin-bottom: 2px;
}
.rev-detail-text {
	white-space: pre-wrap;
	line-height: 1.6;
	font-size: 0.88rem;
	padding: 10px 12px;
	background: var(--hfs-pos-tint);
	border-radius: 6px;
	border: 1px solid var(--hfs-border);
}
.rev-detail-product {
	font-size: 0.88rem;
	font-weight: 600;
}
.rev-detail-title {
	font-size: 0.88rem;
	font-weight: 600;
	font-style: italic;
}
/* Filter bar control heights */
.rev-shell .emp-filter-bar .input-group,
.rev-shell .emp-filter-bar .input-group .form-control,
.rev-shell .emp-filter-bar .input-group .hfs-btn,
.rev-shell .emp-filter-bar .hfs-btn,
.rev-shell .emp-filter-bar select {
	height: var(--hfs-control-height);
}

/* ============================================
   RECEIVING — Batch Workflow
   Fullscreen layout, all rcv-prefixed.
   Does NOT reuse any pos- or barcode- classes.
   ============================================ */

/* Shell */
.rcv-shell {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--hfs-bg);
}

/* Top section -- tan background, matches PO */
.rcv-top {
	flex-shrink: 0;
	background: var(--hfs-pos-tint);
}
.rcv-top > h4 {
	padding: 10px 12px 8px;
	border-bottom: 1px solid var(--hfs-border);
}
.rcv-filter-bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 8px 12px;
	border-bottom: 1px solid var(--hfs-border);
}
.rcv-filters {
	display: flex;
	gap: 6px;
	align-items: center;
	flex-wrap: wrap;
}
.rcv-filter-btn {
	border-radius: 6px !important;
	width: var(--hfs-control-height);
	height: var(--hfs-control-btn-height);
}
.rcv-filter-actions {
	display: flex;
	gap: 6px;
	margin-left: 0.5rem;
}

/* Split panel */
.rcv-split {
	display: flex;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

/* Left: Batch list */
.rcv-list-panel {
	width: 340px;
	flex-shrink: 0;
	border-right: 1px solid var(--hfs-border);
	display: flex;
	flex-direction: column;
	background: var(--hfs-bg);
}
.rcv-list-scroll {
	flex: 1;
	overflow-y: auto;
}

/* Batch list rows */
.rcv-list-item {
	display: flex;
	flex-direction: column;
	padding: 10px 12px;
	border-bottom: 1px solid var(--hfs-border);
	cursor: pointer;
	transition: background 0.1s;
	gap: 3px;
}
.rcv-list-item:hover { background: var(--hfs-surface-tint-2); }
.rcv-list-item.active {
	background: var(--hfs-bar);
	color: var(--hfs-bar-text, #fff);
}
.rcv-list-item.active .rcv-list-item-number,
.rcv-list-item.active .rcv-list-item-supplier,
.rcv-list-item.active .rcv-list-item-total {
	color: var(--hfs-bar-text, #fff);
}
.rcv-list-item.active .rcv-list-item-meta {
	color: var(--hfs-bar-text, #fff);
	opacity: 0.85;
}
.rcv-list-item-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}
.rcv-list-item-number {
	font-family: monospace;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--hfs-text);
}
.rcv-list-item-supplier {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--hfs-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rcv-list-item-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}
.rcv-list-item-meta {
	font-size: 0.68rem;
	color: var(--hfs-text-muted);
}
.rcv-list-item-total {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--hfs-text);
	font-family: monospace;
}

/* Batch status badges */
.rcv-batch-status-badge {
	font-size: 0.58rem; font-weight: 700; text-transform: uppercase;
	padding: 1px 6px; border-radius: 3px; white-space: nowrap;
}
.rcv-batch-status-badge:empty { display: none; }
.rcv-batch-status--open      { color: var(--hfs-primary); background: var(--hfs-surface-tint-2); border: 1px solid var(--hfs-primary); }
.rcv-batch-status--committed { color: var(--hfs-success, #27ae60); background: var(--hfs-surface-tint-2); border: 1px solid var(--hfs-success, #27ae60); }
.rcv-batch-status--voided    { color: var(--hfs-danger, #c0392b); background: var(--hfs-surface-tint-2); border: 1px solid var(--hfs-danger, #c0392b); }

/* Right: Batch detail */
.rcv-detail-panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
}

/* Detail content -- flex column: scroll area + fixed bottom bar */
.rcv-detail-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

/* Scrollable area for header + scan + queue */
.rcv-detail-scroll {
	flex: 1;
	overflow-y: auto;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Detail header */
.rcv-detail-header {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.rcv-detail-title-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.rcv-detail-batch-number {
	font-family: monospace;
	font-size: 1rem;
	font-weight: 700;
	color: var(--hfs-text);
}
.rcv-detail-fields {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.rcv-detail-field {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 140px;
	flex: 1;
}
.rcv-detail-field--wide { flex: 2; min-width: 200px; }

/* Scan section */
.rcv-scan-section {
	border-top: 1px solid var(--hfs-border);
	padding-top: 10px;
}

/* Shared field styles */
.rcv-field-label {
	font-size: 0.65rem; font-weight: 600; color: var(--hfs-text-muted);
	text-transform: uppercase; letter-spacing: 0.03em;
}
.rcv-field-input {
	padding: 5px 10px;
	border: 1px solid var(--hfs-border);
	border-radius: 6px;
	background: var(--hfs-input-bg);
	color: var(--hfs-text);
	font-size: 0.8rem;
	height: var(--hfs-control-height);
	box-sizing: border-box;
}
.rcv-field-input--sm { font-size: 0.78rem; }
.rcv-field-input:focus {
	outline: none;
	border-color: var(--hfs-border-focus-strong);
	box-shadow: 0 0 0 2px var(--hfs-ring-focus);
}

/* Scan row */
.rcv-scan-row {
	display: flex; flex-direction: column; gap: 4px;
}
.rcv-input-group {
	display: flex; gap: 0;
}
.rcv-scan-input {
	flex: 1;
	padding: 5px 12px;
	border: 1px solid var(--hfs-border);
	border-right: none;
	border-radius: 6px 0 0 6px;
	background: var(--hfs-input-bg);
	color: var(--hfs-text);
	font-size: 0.85rem;
	height: var(--hfs-control-height);
	box-sizing: border-box;
}
.rcv-scan-input::placeholder { color: var(--hfs-text-muted); }
.rcv-scan-input:focus {
	outline: none;
	border-color: var(--hfs-border-focus-strong);
	box-shadow: 0 0 0 2px var(--hfs-ring-focus);
	z-index: 1;
}
.rcv-input-btn {
	appearance: none;
	width: var(--hfs-control-height);
	height: var(--hfs-control-btn-height);
	background: var(--hfs-bar); 
	color: var(--hfs-bar-text);
	border: 1px solid var(--hfs-bar); 
	border-left: 1px solid rgba(255,255,255,0.15);
	cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	font-size: 0.9rem; flex-shrink: 0;
	transition: filter 0.12s;
	box-sizing: border-box;
}
.rcv-input-btn:first-of-type { border-left: 1px solid var(--hfs-bar); }
.rcv-input-btn:hover { filter: brightness(1.18); }
.rcv-input-btn--last {
	border-radius: 0 6px 6px 0;
}
.rcv-scan-feedback {
	font-size: 0.75rem; min-height: 1em;
	color: var(--hfs-text-muted); transition: opacity 0.3s;
}
.rcv-feedback-hidden { opacity: 0; }
.rcv-feedback-success { color: var(--hfs-success, #27ae60); }
.rcv-feedback-warning { color: var(--hfs-gold, #c89a30); }
.rcv-feedback-danger  { color: var(--hfs-danger, #c0392b); }

/* Scan mode toggle */
.rcv-scan-mode-toggle {
	display: flex;
	gap: 0;
	margin-bottom: 4px;
}
.rcv-scan-mode-btn {
	appearance: none;
	padding: 4px 12px;
	font-size: 0.75rem;
	font-weight: 600;
	border: 1px solid var(--hfs-border);
	background: var(--hfs-input-bg);
	color: var(--hfs-text-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 4px;
	transition: background 0.15s, color 0.15s;
}
.rcv-scan-mode-btn:first-child { border-radius: 6px 0 0 6px; }
.rcv-scan-mode-btn:last-child  { border-radius: 0 6px 6px 0; border-left: none; }
.rcv-scan-mode-btn.active {
	background: var(--hfs-bar);
	color: var(--hfs-bar-text);
	border-color: var(--hfs-bar);
}
.rcv-scan-mode-btn:hover:not(.active) {
	background: var(--hfs-hover-bg);
}

/* Queue items section */
.rcv-detail-items {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}
.rcv-items-toolbar {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: 6px 0;
	margin-bottom: 4px;
	border-top: 1px solid var(--hfs-border);
	padding-top: 10px;
}
.rcv-items-title {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--hfs-text);
	display: flex;
	align-items: center;
	gap: 6px;
}

#section-receiving .table thead th {
	background: var(--hfs-bg);
	color: var(--hfs-text);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 6px 8px;
	border-color: var(--hfs-bar);
}
#section-receiving .table tbody td {
	font-size: 0.7rem;
	padding: 4px 8px;
	background: var(--hfs-bg);
}

/* Unmatched barcode panel */
.rcv-unmatched-panel {
	background: var(--hfs-surface); border-bottom: 1px solid var(--hfs-border); flex-shrink: 0;
}
.rcv-unmatched-inner { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.rcv-unmatched-icon { color: var(--hfs-gold, #c89a30); font-size: 1.1rem; }
.rcv-unmatched-text { font-size: 0.8rem; color: var(--hfs-text); flex: 1; }
.rcv-unmatched-text code { font-weight: 700; }
.rcv-col-expand  { width: 32px; text-align: center; }
.rcv-col-actions { width: 36px; text-align: center; }

/* Items empty */
.rcv-items-empty {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 8px; color: var(--hfs-text-muted); font-size: 0.85rem; padding: 60px 20px;
}
.rcv-items-empty i { font-size: 2rem; opacity: 0.5; }
.rcv-items-empty p { margin: 0; }

/* Expand / delete buttons */
.rcv-expand-btn, .rcv-delete-btn, .rcv-delete-product-btn {
	appearance: none; border: none; background: transparent; color: var(--hfs-text-muted);
	cursor: pointer; padding: 2px; font-size: 0.78rem; transition: color 0.12s;
}
.rcv-expand-btn:hover { color: var(--hfs-primary); }
.rcv-delete-btn:hover, .rcv-delete-product-btn:hover { color: var(--hfs-danger, #c0392b); }

/* Detail row */
.rcv-detail-row > td { padding: 0 !important; background: var(--hfs-surface-tint-1) !important; }
.rcv-expand-panel { padding: 10px 16px; display: flex; flex-direction: column; gap: 10px; }
.rcv-detail-info { display: flex; gap: 20px; flex-wrap: wrap; }
.rcv-detail-group { display: flex; flex-direction: column; gap: 1px; }
.rcv-detail-label {
	font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.04em; color: var(--hfs-text-muted);
}
.rcv-detail-value { font-size: 0.78rem; font-weight: 600; color: var(--hfs-text); }
.rcv-detail-edit { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.rcv-detail-field { display: flex; flex-direction: column; gap: 2px; min-width: 90px; }
.rcv-detail-field--wide { flex: 1; min-width: 160px; }
.rcv-detail-field--action { min-width: auto; }

/* Status badges */
.rcv-status-pending    { font-size: 0.65rem; font-weight: 600; color: var(--hfs-text-muted); }
.rcv-status-adjustment { font-size: 0.65rem; font-weight: 600; color: var(--hfs-gold, #c89a30); }

/* Cost mismatch highlighting */
.rcv-cost-mismatch { color: var(--hfs-gold, #c89a30); font-weight: 700; }
.rcv-cost-mismatch i { font-size: 0.85em; }
.rcv-queue-row.rcv-cost-warn > td:nth-child(7) { background: rgba(200,154,48,0.08); }

/* Cost preview in detail row */
.rcv-cost-preview {
	display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
	padding: 6px 10px; margin-top: 6px;
	background: var(--hfs-surface-tint-2); border-radius: 4px;
	font-size: 0.75rem; color: var(--hfs-text-muted);
}
.rcv-cost-preview-item { display: flex; gap: 4px; align-items: center; }
.rcv-cost-preview-label { font-weight: 500; }
.rcv-cost-preview-value { font-weight: 700; color: var(--hfs-text); }
.rcv-cost-preview-arrow { color: var(--hfs-gold, #c89a30); font-weight: 700; }
.rcv-status-committed  { font-size: 0.65rem; font-weight: 600; color: var(--hfs-success, #27ae60); }
.rcv-status-voided     { font-size: 0.65rem; font-weight: 600; color: var(--hfs-danger, #c0392b); }
.rcv-status-open       { font-size: 0.65rem; font-weight: 600; color: var(--hfs-primary); }
.rcv-status-mixed      { font-size: 0.65rem; font-weight: 600; color: var(--hfs-gold, #c89a30); font-style: italic; }
.rcv-units-partial     { color: var(--hfs-gold, #c89a30); }

/* Sub-lines within expanded detail (grouped items per product) */
.rcv-subline {
	padding: 8px 0;
	border-top: 1px solid var(--hfs-border);
}
.rcv-subline:first-of-type { border-top: none; margin-top: 6px; }
.rcv-subline-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
	font-size: 0.78rem;
	font-weight: 600;
}
.rcv-subline-qty {
	color: var(--hfs-text);
	font-weight: 700;
}
.rcv-subline-note {
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--hfs-text-muted);
	font-style: italic;
}

/* Summary bar */
.rcv-summary-bar {
	display: flex; align-items: center; justify-content: space-between;
	padding: 8px 12px; background: var(--hfs-bar); color: var(--hfs-bar-text);
	border-top: 1px solid var(--hfs-border); flex-shrink: 0;
}
.rcv-summary-left { display: flex; align-items: center; gap: 6px; }
.rcv-summary-label { font-size: 0.72rem; color: var(--hfs-onbar-text-muted); font-weight: 500; }
.rcv-summary-value { font-size: 0.82rem; font-weight: 700; color: var(--hfs-bar-text); margin-right: 10px; }
.rcv-summary-right { display: flex; gap: 6px; }

/* Action buttons */
.rcv-action-btn {
	appearance: none; border: none; padding: 6px 16px; border-radius: 6px;
	font-size: 0.78rem; font-weight: 700; cursor: pointer;
	display: inline-flex; align-items: center; gap: 5px;
	transition: background 0.12s, opacity 0.12s;
}
.rcv-action-btn:disabled { opacity: 0.4; cursor: default; }
.rcv-action-btn--commit { background: var(--hfs-green); color: #fff; }
.rcv-action-btn--commit:hover:not(:disabled) { background: var(--hfs-green-dark); }
.rcv-action-btn--clear {
	background: transparent; color: var(--hfs-onbar-text-muted);
	border: 1px solid var(--hfs-onbar-border-soft);
}
.rcv-action-btn--clear:hover:not(:disabled) { color: var(--hfs-bar-text); border-color: var(--hfs-bar-text); }

/* Commit dialog */
.rcv-commit-summary { font-size: 0.82rem; }
.rcv-commit-header { margin-bottom: 10px; font-size: 0.9rem; }
.rcv-commit-lines { max-height: 250px; overflow-y: auto; margin-bottom: 10px; }
.rcv-commit-line {
	display: flex; justify-content: space-between; padding: 4px 0;
	border-bottom: 1px solid var(--hfs-border); font-size: 0.78rem;
}
.rcv-commit-note { font-size: 0.75rem; color: var(--hfs-text-muted); font-style: italic; }

/* Product search results */
.rcv-search-results-scroll {
	flex: 1; overflow-y: auto; min-height: 200px; max-height: 400px;
	background: var(--hfs-dialog-bg);
}
.rcv-search-result { cursor: pointer; }


/* ============================================
   PURCHASE ORDERS — Split-Panel Layout
   ============================================ */

/* Shell */
.po-shell {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--hfs-bg);
}

/* Top section — tan background, matches receiving */
.po-top {
	flex-shrink: 0;
	background: var(--hfs-pos-tint);
}
.po-top > h4 {
	padding: 10px 12px 8px;
	border-bottom: 1px solid var(--hfs-border);
}
.po-filter-bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--hfs-border);
}

.po-filters {
	display: flex;
	gap: 6px;
	align-items: center;
	flex-wrap: wrap;
}

.po-filter-actions {
	display: flex;
	gap: 6px;
}

/* Split panel */
.po-split {
	display: flex;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

/* Left: PO list */
.po-list-panel {
	width: 340px;
	flex-shrink: 0;
	border-right: 1px solid var(--hfs-border);
	display: flex;
	flex-direction: column;
	background: var(--hfs-bg);
}
.po-list-scroll {
	flex: 1;
	overflow-y: auto;
}

/* PO list rows */
.po-list-item {
	display: flex;
	flex-direction: column;
	padding: 10px 12px;
	border-bottom: 1px solid var(--hfs-border);
	cursor: pointer;
	transition: background 0.1s;
	gap: 3px;
}
.po-list-item:hover { background: var(--hfs-surface-tint-2); }
.po-list-item.active {
	background: var(--hfs-bar);
	color: var(--hfs-bar-text, #fff);
}
.po-list-item.active .po-list-item-number,
.po-list-item.active .po-list-item-supplier,
.po-list-item.active .po-list-item-total {
	color: var(--hfs-bar-text, #fff);
}
.po-list-item.active .po-list-item-meta {
	color: var(--hfs-bar-text, #fff);
	opacity: 0.85;
}
.po-list-item-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}
.po-list-item-number {
	font-family: monospace;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--hfs-text);
}
.po-list-item-supplier {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--hfs-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.po-list-item-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}
.po-list-item-meta {
	font-size: 0.68rem;
	color: var(--hfs-text-muted);
}
.po-list-item-total {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--hfs-text);
	font-family: monospace;
}

/* PO status badges */
.po-status-badge {
	font-size: 0.58rem; font-weight: 700; text-transform: uppercase;
	padding: 1px 6px; border-radius: 3px; white-space: nowrap;
}
.po-status--draft      { color: var(--hfs-text-muted); background: var(--hfs-surface-tint-2); }
.po-status--submitted  { color: var(--hfs-primary); background: var(--hfs-surface-tint-2); font-weight: 700; border: 1px solid var(--hfs-primary); }
.po-status--partial    { color: var(--hfs-gold, #c89a30); background: var(--hfs-surface-tint-2); font-weight: 700; border: 1px solid var(--hfs-gold, #c89a30); }
.po-status--received   { color: var(--hfs-success, #27ae60); background: var(--hfs-surface-tint-2); font-weight: 700; border: 1px solid var(--hfs-success, #27ae60); }
.po-status--closed     { color: var(--hfs-text-muted); background: var(--hfs-surface-tint-2); }
.po-status--cancelled  { color: var(--hfs-danger, #c0392b); background: var(--hfs-surface-tint-2); font-weight: 700; border: 1px solid var(--hfs-danger, #c0392b); }

/* Right: PO detail */
.po-detail-panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
}

/* Detail content — flex column: scroll area + fixed bottom bar */
.po-detail-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

/* PO detail tabs (Edit / Print Preview) */
.po-detail-tabs {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--hfs-border);
	flex-shrink: 0;
	padding: 0 12px;
	background: var(--hfs-pos-tint);
}
.po-detail-tab {
	appearance: none;
	border: none;
	background: transparent;
	color: var(--hfs-text-muted);
	font-size: 0.78rem;
	font-weight: 600;
	padding: 8px 14px;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	display: flex;
	align-items: center;
	gap: 5px;
	transition: color 0.15s, border-color 0.15s;
}
.po-detail-tab:hover { color: var(--hfs-text); }
.po-detail-tab.active {
	color: var(--hfs-text);
	border-bottom-color: var(--hfs-bar);
}
.po-detail-tab.hfs-hidden { display: none; }

/* Tab panes */
.po-tabpane {
	display: none;
	flex: 1;
	min-height: 0;
	flex-direction: column;
}
.po-tabpane.active {
	display: flex;
}

/* Preview tab */
.po-preview-scroll {
	flex: 1;
	overflow-y: auto;
	padding: 12px;
}
.po-preview-actions {
	display: flex;
	gap: 6px;
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--hfs-border);
}
.po-preview-frame {
	background: #fff;
	border: 1px solid var(--hfs-border);
	border-radius: 4px;
	padding: 20px;
	min-height: 400px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* Scrollable area for header fields + line items */
.po-detail-scroll {
	flex: 1;
	overflow-y: auto;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Detail header */
.po-detail-header {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.po-detail-title-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.po-detail-po-number {
	font-family: monospace;
	font-size: 1rem;
	font-weight: 700;
	color: var(--hfs-text);
}
.po-detail-fields {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
.po-detail-field {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 140px;
	flex: 1;
}
.po-detail-field--wide { flex: 2; min-width: 200px; }

/* Line items section */
.po-detail-items {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}
.po-items-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 0;
	margin-bottom: 4px;
	border-top: 1px solid var(--hfs-border);
	padding-top: 10px;
}
.po-items-title {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--hfs-text);
	display: flex;
	align-items: center;
	gap: 6px;
}
.po-items-actions {
	display: flex;
	gap: 6px;
}
.po-col-actions { width: 36px; text-align: center; }

#section-purchasing .table thead th {
	background: var(--hfs-bg);
	color: var(--hfs-text);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 6px 8px;
	border-color: var(--hfs-bar);
}
#section-purchasing .table tbody td {
	font-size: 0.7rem;
	padding: 4px 8px;
	background: var(--hfs-bg);
}

/* Inline edit inputs */
.po-inline-qty,
.po-inline-cost {
	width: 75px;
	text-align: center;
	padding: 2px 4px;
	font-size: 0.7rem;
	border: 1px solid var(--hfs-border);
	border-radius: 4px;
	background: var(--hfs-input-bg);
	color: var(--hfs-text);
	box-sizing: border-box;
}

/* PO item status */
.po-item-status { font-size: 0.65rem; font-weight: 600; }
.po-item-status--pending   { color: var(--hfs-text-muted); }
.po-item-status--partial   { color: var(--hfs-gold, #c89a30); }
.po-item-status--received  { color: var(--hfs-success, #27ae60); }
.po-item-status--cancelled { color: var(--hfs-danger, #c0392b); }
.po-item-status--short     { color: var(--hfs-danger, #c0392b); }

/* Summary bar — fixed bottom, matches receiving pattern */
.po-summary-bar {
	display: flex; align-items: center; justify-content: space-between;
	padding: 8px 12px; background: var(--hfs-bar); color: var(--hfs-bar-text);
	border-top: 1px solid var(--hfs-border); flex-shrink: 0;
}
.po-summary-left { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.po-summary-label { font-size: 0.72rem; color: var(--hfs-onbar-text-muted); font-weight: 500; }
.po-summary-label--total { font-weight: 700; color: var(--hfs-bar-text); }
.po-summary-value { font-size: 0.82rem; font-weight: 700; color: var(--hfs-bar-text); margin-right: 10px; }
.po-summary-value--total { font-size: 0.88rem; }
.po-summary-sep {
	width: 1px; height: 18px; background: var(--hfs-onbar-border-soft, rgba(255,255,255,0.2));
	margin: 0 4px;
}
.po-summary-right { display: flex; gap: 6px; }

/* Search results */
.po-search-results-scroll {
	flex: 1; overflow-y: auto; min-height: 200px; max-height: 400px;
	background: var(--hfs-dialog-bg);
}

/* ========================================================================
   Help Panel — right-side slide-in
   ======================================================================== */

/* Help overlay */
.admin-help-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.25);
	z-index: 1055;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}
.admin-help-overlay.open {
	opacity: 1;
	pointer-events: auto;
}

.admin-help-panel {
	position: fixed;
	top: 0;
	right: 0;
	width: 340px;
	height: 100vh;
	background: var(--hfs-dialog-bg);
	border-left: 1px solid var(--hfs-border);
	box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
	z-index: 1060;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.25s ease;
}
.admin-help-panel.open {
	transform: translateX(0);
}
.admin-help-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid var(--hfs-border);
	background: var(--hfs-bar);
	color: var(--hfs-bar-text);
	flex-shrink: 0;
}
.admin-help-panel-title {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 8px;
}
.admin-help-panel-close {
	appearance: none;
	border: none;
	background: transparent;
	color: var(--hfs-bar-text);
	cursor: pointer;
	font-size: 1rem;
	padding: 4px;
	opacity: 0.7;
	transition: opacity 0.15s;
}
.admin-help-panel-close:hover { opacity: 1; }
.admin-help-panel-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
}
.admin-help-panel-empty {
	text-align: center;
	color: var(--hfs-text-muted);
	padding: 40px 16px;
}
.admin-help-panel-empty i {
	font-size: 2rem;
	display: block;
	margin-bottom: 8px;
	opacity: 0.5;
}
.admin-help-panel-empty p {
	margin: 0;
	font-size: 0.85rem;
}

/* Help entry content */
.admin-help-entry {
	margin-bottom: 16px;
}
.admin-help-entry:last-child { margin-bottom: 0; }
.admin-help-entry-title {
	font-size: 0.85rem;
	font-weight: 700;
	margin: 0 0 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--hfs-border);
	color: var(--hfs-text);
}
.admin-help-entry-body {
	font-size: 0.82rem;
	line-height: 1.55;
	color: var(--hfs-text);
}
.admin-help-entry-body h6 {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--hfs-text-muted);
	margin: 12px 0 6px;
}
.admin-help-entry-body ul,
.admin-help-entry-body ol {
	padding-left: 18px;
	margin: 4px 0 8px;
}
.admin-help-entry-body li {
	margin-bottom: 4px;
}
.admin-help-entry-body p {
	margin: 0 0 8px;
}
.admin-help-entry-body strong {
	color: var(--hfs-text);
}


/* ================================================================
   EMPLOYEE DOMAIN — Split-panel layout (emp- prefix)
   Follows PO/Receiving pattern
   ================================================================ */

.emp-shell {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--hfs-bg);
}

.emp-top {
	flex-shrink: 0;
	background: var(--hfs-pos-tint);
}
.emp-top > h4 {
	padding: 10px 12px 8px;
	border-bottom: 1px solid var(--hfs-border);
}
.mysch-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 10px 12px 8px;
	border-bottom: 1px solid var(--hfs-border);
}
.mysch-title-row > h4 {
	padding: 0;
	border-bottom: 0;
	flex: 1 1 auto;
}
.emp-filter-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	border-bottom: 1px solid var(--hfs-border);
}
.emp-filters {
	display: flex;
	gap: 6px;
	align-items: center;
	flex-wrap: wrap;
}
.emp-filter-actions {
	display: flex;
	gap: 6px;
}

/* Split panel */
.emp-split {
	display: flex;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

/* Left: Employee list */
.emp-list-panel {
	width: 300px;
	flex-shrink: 0;
	border-right: 1px solid var(--hfs-border);
	display: flex;
	flex-direction: column;
	background: var(--hfs-bg);
}
.emp-list-scroll {
	flex: 1;
	overflow-y: auto;
}

/* Employee list rows */
.emp-list-item {
	display: flex;
	flex-direction: column;
	padding: 10px 12px;
	border-bottom: 1px solid var(--hfs-border);
	cursor: pointer;
	transition: background 0.12s;
}
.emp-list-item:hover { background: var(--hfs-surface-tint-2); }
.emp-list-item.active {
	background: var(--hfs-bar);
	color: var(--hfs-bar-text, #fff);
}
.emp-list-item.active .emp-list-item-name {
	color: var(--hfs-bar-text, #fff);
}
.emp-list-item.active .emp-list-item-role,
.emp-list-item.active .emp-list-item-number,
.emp-list-item.active .emp-list-item-bottom span {
	color: var(--hfs-bar-text, #fff);
	opacity: 0.85;
}
.emp-list-item-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2px;
}
.emp-list-item-name {
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--hfs-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.emp-list-item-number {
	font-size: 0.72rem;
	color: var(--hfs-text-muted);
	white-space: nowrap;
}
.emp-list-item-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 0.75rem;
	color: var(--hfs-text-muted);
}
.emp-list-item-role {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Status badge in list */
.emp-status-badge {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 10px;
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.emp-status--active     { color: var(--hfs-success, #27ae60); background: var(--hfs-surface-tint-2); border: 1px solid var(--hfs-success, #27ae60); }
.emp-status--inactive   { color: var(--hfs-text-muted); background: var(--hfs-surface-tint-2); }
.emp-status--on_leave   { color: var(--hfs-gold, #c89a30); background: var(--hfs-surface-tint-2); border: 1px solid var(--hfs-gold, #c89a30); }
.emp-status--terminated { color: var(--hfs-danger, #c0392b); background: var(--hfs-surface-tint-2); border: 1px solid var(--hfs-danger, #c0392b); }
.emp-status--draft      { color: var(--hfs-text-muted); background: var(--hfs-surface-tint-2); }

/* Right: Detail panel */
.emp-detail-panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
}

.emp-detail-content {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

/* Detail tabs */
.emp-detail-tabs {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--hfs-border);
	flex-shrink: 0;
	padding: 0 12px;
	background: var(--hfs-pos-tint);
}
.emp-detail-tab {
	appearance: none;
	border: none;
	background: transparent;
	color: var(--hfs-text-muted);
	font-size: 0.78rem;
	font-weight: 600;
	padding: 8px 14px;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	display: flex;
	align-items: center;
	gap: 5px;
	transition: color 0.15s, border-color 0.15s;
}
.emp-detail-tab:hover { color: var(--hfs-text); }
.emp-detail-tab.active {
	color: var(--hfs-text);
	border-bottom-color: var(--hfs-bar);
}

/* Tab panes */
.emp-tabpane {
	display: none;
	flex: 1;
	min-height: 0;
	flex-direction: column;
}
.emp-tabpane.active {
	display: flex;
}

/* Scrollable content within tab */
.emp-detail-scroll {
	flex: 1;
	overflow-y: auto;
	padding: 12px;
}

/* Header row (employee number + status) */
.emp-detail-header {
	margin-bottom: 10px;
}
.emp-detail-title-row {
	display: flex;
	align-items: center;
	gap: 10px;
}
.emp-detail-emp-number {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--hfs-text-muted);
}

/* Bottom action bar (save button) */
.emp-detail-bottom {
	flex-shrink: 0;
	padding: 8px 12px;
	border-top: 1px solid var(--hfs-border);
	background: var(--hfs-pos-tint);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}
.emp-detail-bottom .text-danger {
	margin-right: auto;
}

/* Role tab panes (reuse emp-tabpane pattern) */
.role-tabpane {
	display: none;
	flex: 1;
	min-height: 0;
	flex-direction: column;
}
.role-tabpane.active {
	display: flex;
}

/* Permission checkbox grid */
.role-perm-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 4px 16px;
	margin-left: 30px;
}
.role-perm-check {
	padding: 6px 8px;
	border-radius: 4px;
	transition: background 0.12s;
}
.role-perm-check:hover {
	background: var(--hfs-surface-tint-2);
}
.role-perm-code {
	display: block;
	font-size: 0.68rem;
	color: var(--hfs-text-muted);
	margin-left: 1.5em;
}


/* ================================================================
/* ================================================================
/* ================================================================
/* ================================================================
/* ================================================================
/* ================================================================
   SCHEDULE DOMAIN — sch- prefix
   Views: Roster (week), Calendar (month), Day (drill-down).
   Split-panel + Flatpickr + Flyout editor.
   ================================================================ */

.sch-shell { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--hfs-bg); position: relative; }

/* ── Title ── */
.sch-top { flex-shrink: 0; background: var(--hfs-pos-tint); }
.sch-top > h4 { padding: 10px 12px 8px; border-bottom: 1px solid var(--hfs-border); }

/* ── Layout (full width — sidebar removed) ── */
.sch-split { display: none; } /* Legacy — no longer used */
.sch-list-panel { display: none; } /* Sidebar removed */
.sch-detail-panel { display: none; } /* Legacy wrapper removed */

/* Views are direct children of .sch-shell now */
.sch-view-roster, .sch-view-weekly, .sch-view-calendar, .sch-view-day { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

/* Pills */
.sch-pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border: 1px solid var(--hfs-border); border-radius: 20px; font-size: 0.8rem; font-weight: 600; color: var(--hfs-text); background: var(--hfs-bg); cursor: pointer; white-space: nowrap; transition: border-color 0.12s, background 0.12s; }
.sch-pill:hover { border-color: var(--hfs-bar); background: var(--hfs-surface-tint-1); }
.sch-pill i { font-size: 0.78rem; }
.sch-pill-caret { font-size: 0.6rem !important; color: var(--hfs-text-muted); }
.sch-pill-wrap { position: relative; display: inline-flex; }
.sch-pill-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 25; background: var(--hfs-bg); border: 1px solid var(--hfs-border); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); min-width: 160px; padding: 4px 0; display: none; }
.sch-pill-menu.open { display: block; }
.sch-pill-menu-item { display: block; width: 100%; padding: 7px 14px; font-size: 0.8rem; color: var(--hfs-text); background: none; border: none; text-align: left; cursor: pointer; }
.sch-pill-menu-item:hover { background: var(--hfs-surface-tint-2); }
.sch-pill-menu-item.active { font-weight: 700; color: var(--hfs-bar); }

/* Multi-select pill menus */
.sch-pill-menu--multi { padding: 6px 10px; min-width: 180px; }
.sch-pill-check { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--hfs-text); cursor: pointer; padding: 4px 0; }
.sch-pill-check input[type="checkbox"] { width: 15px; height: 15px; flex-shrink: 0; accent-color: var(--hfs-bar); }
.sch-filter-count { font-size: 0.72rem; color: var(--hfs-text-muted); margin-left: auto; }

/* ── Date bar ── */
.sch-date-bar { display: flex; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--hfs-border); flex-shrink: 0; background: var(--hfs-bg); gap: 10px; }
.sch-date-bar-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sch-date-bar-center { flex: 1; text-align: center; }
.sch-date-bar-right { flex-shrink: 0; }
.sch-period-select { height: 30px; border: 1px solid var(--hfs-border); border-radius: 4px; padding: 0 24px 0 8px; font-size: 0.8rem; font-weight: 600; background: var(--hfs-surface-tint-1); color: var(--hfs-text); cursor: pointer; appearance: auto; }
.sch-period-select:focus { outline: none; border-color: var(--hfs-bar); }
.sch-flatpickr-input { height: 30px; border: 1px solid var(--hfs-border); border-radius: 4px; padding: 0 8px; font-size: 0.8rem; font-weight: 600; background: var(--hfs-surface-tint-1); color: var(--hfs-text); cursor: pointer; width: 110px; text-align: center; }
.sch-flatpickr-input:focus { outline: none; border-color: var(--hfs-bar); }
.sch-date-range { font-size: 0.88rem; font-weight: 700; color: var(--hfs-text); }
.sch-today-link { background: none; border: none; color: var(--hfs-bar); font-size: 0.82rem; font-weight: 600; cursor: pointer; padding: 2px 6px; }
.sch-today-link:hover { text-decoration: underline; }

/* Flatpickr week highlight override */
.flatpickr-calendar .week.selected { background: var(--hfs-bar); border-radius: 4px; }
.flatpickr-calendar .week.selected span { color: var(--hfs-bar-text, #fff); }

/* ── Day bar (drill-down back nav) ── */
.sch-day-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--hfs-border); flex-shrink: 0; background: var(--hfs-surface-tint-1); }
.sch-day-back { display: flex; align-items: center; gap: 4px; background: none; border: none; color: var(--hfs-bar); font-size: 0.82rem; font-weight: 600; cursor: pointer; padding: 2px 6px; }
.sch-day-back:hover { text-decoration: underline; }
.sch-day-title { font-size: 0.9rem; font-weight: 700; color: var(--hfs-text); }

/* ================================================================
   ROSTER VIEW (week)
   ================================================================ */
.sch-view-roster { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.sch-roster-scroll { flex: 1; overflow: auto; }
.sch-roster-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sch-roster-header th { position: sticky; top: 0; z-index: 2; background: var(--hfs-bg); border-bottom: 2px solid var(--hfs-border); border-right: 1px solid var(--hfs-border); padding: 8px 6px; font-size: 0.78rem; font-weight: 600; text-align: center; color: var(--hfs-text-muted); white-space: nowrap; cursor: pointer; }
.sch-roster-header th:last-child { border-right: none; }
.sch-roster-header th.sch-col-emp { text-align: left; padding-left: 12px; width: 180px; min-width: 150px; cursor: default; }
.sch-roster-header th.sch-col-total { width: 56px; min-width: 48px; cursor: default; }
.sch-roster-header th.sch-col-day:hover { background: var(--hfs-surface-tint-2); }
.sch-roster-header th.sch-today { color: var(--hfs-bar); }
.sch-day-header-name { display: block; font-weight: 600; }
.sch-day-header-date { display: block; font-size: 0.72rem; font-weight: 400; }
.sch-today .sch-day-header-date { color: var(--hfs-bar); }

.sch-open-row td { border-bottom: 2px solid var(--hfs-border); background: var(--hfs-surface-tint-1); border-right: 1px solid var(--hfs-border); }
.sch-open-row td:last-child { border-right: none; }
.sch-open-label { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 0.8rem; }
.sch-open-label i { color: var(--hfs-warning, #e67e22); }

.sch-roster-row td { border-bottom: 1px solid var(--hfs-border); border-right: 1px solid var(--hfs-border); vertical-align: top; padding: 6px; height: 56px; }
.sch-roster-row td:last-child { border-right: none; }
.sch-roster-row:hover td { background: var(--hfs-surface-tint-1); }
.sch-roster-row.sch-row-selected td { background: var(--hfs-surface-tint-2); }

.sch-emp-cell { display: flex; align-items: center; gap: 8px; padding: 4px 6px; cursor: pointer; height: 100%; }
.sch-emp-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--hfs-bar); color: var(--hfs-bar-text, #fff); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; flex-shrink: 0; }
.sch-emp-info-text { min-width: 0; }
.sch-emp-name { font-size: 0.82rem; font-weight: 600; color: var(--hfs-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-emp-role-label { font-size: 0.7rem; color: var(--hfs-text-muted); }

.sch-day-cell { padding: 4px; cursor: pointer; vertical-align: top; }
.sch-day-cell:hover { background: var(--hfs-surface-tint-2); }
.sch-day-cell.sch-today { background: rgba(52, 152, 219, 0.04); }

.sch-total-cell { text-align: center; font-weight: 700; font-size: 0.85rem; color: var(--hfs-text); vertical-align: middle; }
.sch-total-cell.sch-overtime { color: var(--hfs-danger, #c0392b); }

/* ── Shift Cards ── */
.sch-shift-card { background: var(--hfs-bg); border: 1px solid var(--hfs-border); border-left: 3px solid var(--hfs-text-muted); border-radius: 4px; padding: 4px 6px; margin-bottom: 3px; cursor: pointer; transition: box-shadow 0.12s, border-color 0.12s; }
.sch-shift-card:last-child { margin-bottom: 0; }
.sch-shift-card:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.1); border-color: var(--hfs-bar); }
.sch-shift-card.sch-card-selected { border-color: var(--hfs-bar); box-shadow: 0 0 0 1px var(--hfs-bar); }
.sch-shift-card.sch-card-open { border-left-color: var(--hfs-warning, #e67e22); background: rgba(230, 126, 34, 0.06); }
.sch-shift-card.sch-card-draft { border-style: dashed; border-left-style: solid; }
.sch-shift-card.sch-card-timeoff { border-left-color: var(--hfs-info, #1abc9c); background: rgba(26, 188, 156, 0.06); }
.sch-card-emp-name { font-size: 0.72rem; font-weight: 600; color: var(--hfs-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-card-time { font-size: 0.76rem; font-weight: 700; color: var(--hfs-text); white-space: nowrap; line-height: 1.3; }
.sch-card-role { font-size: 0.68rem; color: var(--hfs-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-card-meta { display: flex; align-items: center; gap: 6px; margin-top: 1px; }
.sch-card-break { font-size: 0.64rem; color: var(--hfs-text-muted); display: flex; align-items: center; gap: 2px; }
.sch-card-status-badge { font-size: 0.6rem; font-weight: 600; text-transform: uppercase; padding: 1px 4px; border-radius: 2px; background: var(--hfs-surface-tint-2); color: var(--hfs-text-muted); }
.sch-off-badge { display: inline-block; font-size: 0.72rem; font-weight: 600; color: var(--hfs-info, #1abc9c); padding: 4px 8px; background: rgba(26, 188, 156, 0.08); border-radius: 4px; cursor: pointer; }
.sch-off-card { margin-bottom: 3px; }
.sch-off-card:last-child { margin-bottom: 0; }

/* Conflict and overtime pills */
.sch-card-pill-conflict {
	font-size: 0.58rem; font-weight: 700; text-transform: uppercase;
	padding: 1px 4px; border-radius: 2px;
	background: rgba(192, 57, 43, 0.12); color: var(--hfs-danger, #c0392b);
}
.sch-card-pill-ot {
	font-size: 0.58rem; font-weight: 700; text-transform: uppercase;
	padding: 1px 4px; border-radius: 2px;
	background: rgba(230, 126, 34, 0.12); color: var(--hfs-warning, #e67e22);
}
.sch-shift-card.sch-card-conflict {
	border-color: rgba(192, 57, 43, 0.3);
}

/* ================================================================
   MOBILE RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
	/* Hide left filter panel on mobile */
	.sch-list-panel { display: none; }

	/* Controls stack */
	.sch-controls { flex-wrap: wrap; gap: 6px; }
	.sch-controls-left { flex-wrap: wrap; }

	/* Date bar stack */
	.sch-date-bar { flex-wrap: wrap; gap: 6px; }
	.sch-date-bar-center { flex: none; width: 100%; text-align: left; order: 3; }

	/* Roster: hide employee column, show single day */
	.sch-roster-grid { table-layout: auto; }
	.sch-col-emp { display: none; }
	.sch-col-total { display: none; }

	/* Day blocks full width */
	.sch-day-block { font-size: 0.75rem; }
	.sch-day-block-name { font-size: 0.72rem; }

	/* Flyout full width */
	.sch-flyout { width: 100%; }

	/* Copy dialog full width */
	.sch-copy-dialog { width: calc(100% - 32px); }

	/* Pills smaller */
	.sch-pill { padding: 4px 8px; font-size: 0.72rem; }

	/* Footer stack */
	.sch-footer { flex-direction: column; gap: 8px; align-items: flex-start; }
	.sch-footer-actions { width: 100%; justify-content: flex-end; }
}

/* ================================================================
   CALENDAR VIEW (month)
   ================================================================ */
.sch-view-calendar { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.sch-month-scroll { flex: 1; overflow: auto; display: flex; flex-direction: column; }
.sch-month-grid { width: 100%; border-collapse: collapse; table-layout: fixed; flex: 1; }
.sch-month-grid tbody { display: table-row-group; height: 100%; }
.sch-month-grid tbody tr { height: 20%; }
.sch-month-header th { position: sticky; top: 0; z-index: 2; background: var(--hfs-bg); border-bottom: 2px solid var(--hfs-border); border-right: 1px solid var(--hfs-border); padding: 8px 6px; font-size: 0.78rem; font-weight: 600; text-align: center; color: var(--hfs-text-muted); }
.sch-month-header th:last-child { border-right: none; }
.sch-month-cell { border-bottom: 1px solid var(--hfs-border); border-right: 1px solid var(--hfs-border); vertical-align: top; padding: 6px 8px; cursor: pointer; }
.sch-month-cell:last-child { border-right: none; }
.sch-month-cell:hover { background: var(--hfs-surface-tint-2); }
.sch-month-cell.sch-month-outside { background: var(--hfs-surface-tint-1); opacity: 0.4; }
.sch-month-cell.sch-today { background: rgba(52, 152, 219, 0.04); }
.sch-month-day-num { font-size: 0.92rem; font-weight: 700; color: var(--hfs-text); margin-bottom: 4px; display: inline-block; }
.sch-today .sch-month-day-num {
	color: #fff; background: var(--hfs-bar); border-radius: 50%;
	width: 26px; height: 26px; line-height: 26px; text-align: center;
}
.sch-month-outside .sch-month-day-num { color: var(--hfs-text-muted); font-weight: 600; }
.sch-month-summary { font-size: 0.72rem; color: var(--hfs-text-muted); line-height: 1.4; }
.sch-month-summary strong { color: var(--hfs-text); }

/* ================================================================
   DAY VIEW (drill-down) — hour timeline
   ================================================================ */
.sch-view-day { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.sch-day-scroll { flex: 1; overflow-y: auto; padding: 0; }
.sch-day-list { padding: 0; }
.sch-day-timeline { position: relative; margin: 0; }
.sch-day-empty { padding: 32px; text-align: center; color: var(--hfs-text-muted); font-size: 0.85rem; }

/* Hour rows */
.sch-day-hour-row {
	position: absolute; left: 0; right: 0; height: 0;
	display: flex; align-items: flex-start;
}
.sch-day-hour-label {
	width: 60px; flex-shrink: 0; text-align: right; padding-right: 8px;
	font-size: 0.7rem; font-weight: 600; color: var(--hfs-text-muted);
	transform: translateY(-7px);
}
.sch-day-hour-line {
	flex: 1; border-top: 1px solid var(--hfs-border);
}

/* Shift blocks — positioned absolutely */
.sch-day-block {
	position: absolute; border-radius: 4px; padding: 6px 8px;
	background: var(--hfs-bg); border: 1px solid var(--hfs-border);
	border-left: 4px solid var(--hfs-text-muted);
	cursor: pointer; overflow: hidden;
	transition: box-shadow 0.12s;
	min-width: 120px; max-width: 220px; width: auto;
}
.sch-day-block:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.12); z-index: 1; }
.sch-day-block.sch-card-open { border-left-color: var(--hfs-warning, #e67e22); background: rgba(230, 126, 34, 0.06); }
.sch-day-block.sch-card-draft { border-style: dashed; border-left-style: solid; }
.sch-day-block.sch-card-timeoff { border-left-color: var(--hfs-info, #1abc9c); background: rgba(26, 188, 156, 0.04); }
.sch-day-block-name { font-size: 0.78rem; font-weight: 700; color: var(--hfs-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-day-block-time { font-size: 0.72rem; font-weight: 600; color: var(--hfs-text); }
.sch-day-block-role { font-size: 0.68rem; color: var(--hfs-text-muted); }
.sch-day-block-break { font-size: 0.64rem; color: var(--hfs-text-muted); display: flex; align-items: center; gap: 2px; }

/* ── Footer ── */
.sch-footer { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-top: 1px solid var(--hfs-border); background: var(--hfs-pos-tint); font-size: 0.8rem; color: var(--hfs-text-muted); }
.sch-footer strong { color: var(--hfs-text); }
.sch-footer-stats { display: flex; align-items: center; gap: 16px; }
.sch-footer-sep { width: 1px; height: 14px; background: var(--hfs-border); }
.sch-footer-actions { display: flex; align-items: center; gap: 6px; }

/* ── Flyout ── */
.sch-flyout { position: absolute; top: 0; right: 0; bottom: 0; width: 400px; background: var(--hfs-bg); border-left: 1px solid var(--hfs-border); box-shadow: -4px 0 16px rgba(0,0,0,0.1); z-index: 20; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.2s ease; }
.sch-flyout.open { transform: translateX(0); }
.sch-flyout-backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.15); z-index: 19; display: none; }
.sch-flyout-backdrop.open { display: block; }
.sch-flyout-inner { display: flex; flex-direction: column; height: 100%; }
.sch-flyout-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--hfs-border); background: var(--hfs-pos-tint); flex-shrink: 0; }
.sch-flyout-title { font-size: 0.95rem; font-weight: 700; color: var(--hfs-text); }
.sch-flyout-close { background: none; border: none; color: var(--hfs-text-muted); cursor: pointer; font-size: 1rem; padding: 4px; }
.sch-flyout-close:hover { color: var(--hfs-text); }
.sch-flyout-body { flex: 1; overflow-y: auto; padding: 16px; }
.sch-flyout-footer { flex-shrink: 0; padding: 10px 16px; border-top: 1px solid var(--hfs-border); display: flex; gap: 6px; background: var(--hfs-bg); }
.sch-flyout-footer:empty { display: none; }

/* ── Copy dialog ── */
.sch-copy-dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); z-index: 30; width: 400px; background: var(--hfs-bg); border: 1px solid var(--hfs-border); border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); display: none; opacity: 0; transition: opacity 0.15s, transform 0.15s; }
.sch-copy-dialog.open { display: block; opacity: 1; transform: translate(-50%, -50%) scale(1); }
.sch-copy-backdrop { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.25); z-index: 29; display: none; }
.sch-copy-backdrop.open { display: block; }

/* ── Form fields ── */
.sch-form-field { margin-bottom: 12px; }
.sch-form-field label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--hfs-text-muted); margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.03em; }
.sch-form-field select, .sch-form-field input, .sch-form-field textarea { width: 100%; height: var(--hfs-control-height); border: 1px solid var(--hfs-border); border-radius: 4px; padding: 0 8px; font-size: 0.82rem; background: var(--hfs-surface-tint-1); color: var(--hfs-text); }
.sch-form-field textarea { height: auto; min-height: 60px; padding: 6px 8px; resize: vertical; }
.sch-form-field select:focus, .sch-form-field input:focus, .sch-form-field textarea:focus { outline: none; border-color: var(--hfs-bar); }
.sch-form-row { display: flex; gap: 10px; }
.sch-form-row .sch-form-field { flex: 1; }
.sch-form-time-row { display: flex; align-items: center; gap: 8px; }
.sch-form-time-row input { flex: 1; }
.sch-form-time-sep { font-size: 0.8rem; color: var(--hfs-text-muted); font-weight: 600; }
.sch-form-error { padding: 6px 10px; font-size: 0.78rem; color: var(--hfs-danger, #c0392b); background: rgba(192, 57, 43, 0.08); border: 1px solid rgba(192, 57, 43, 0.2); border-radius: 4px; margin-bottom: 12px; display: none; }

/* Quick actions */
.sch-quick-actions { border-top: 1px solid var(--hfs-border); padding-top: 12px; margin-top: 4px; }
.sch-quick-actions-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--hfs-text-muted); margin-bottom: 8px; }
.sch-quick-action { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 0.82rem; color: var(--hfs-text); cursor: pointer; border: none; background: none; width: 100%; text-align: left; }
.sch-quick-action:hover { color: var(--hfs-bar); }
.sch-quick-action i { font-size: 0.85rem; color: var(--hfs-text-muted); width: 18px; text-align: center; }
.sch-quick-action:hover i { color: var(--hfs-bar); }

/* Employee summary in flyout */
.sch-flyout-emp-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.sch-flyout-emp-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--hfs-bar); color: var(--hfs-bar-text, #fff); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; flex-shrink: 0; }
.sch-flyout-emp-name { font-size: 0.95rem; font-weight: 700; color: var(--hfs-text); }
.sch-flyout-emp-role { font-size: 0.78rem; color: var(--hfs-text-muted); }
.sch-emp-summary-stat { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--hfs-border); font-size: 0.82rem; }
.sch-emp-summary-stat:last-child { border-bottom: none; }
.sch-emp-summary-label { color: var(--hfs-text-muted); }
.sch-emp-summary-value { font-weight: 600; color: var(--hfs-text); }
.sch-emp-shift-list-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--hfs-text-muted); margin: 12px 0 6px; }
.sch-emp-shift-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--hfs-border); font-size: 0.8rem; cursor: pointer; }
.sch-emp-shift-item:hover { color: var(--hfs-bar); }
.sch-emp-shift-day { font-weight: 600; width: 36px; flex-shrink: 0; }
.sch-emp-shift-time { flex: 1; }

/* Permissions */
#empPermissionsWrap { overflow-y: auto; }
#empPermissionsWrap .table { margin-bottom: 0; }
#rolePermissionsGrid { padding: 0; }
.prod-shell {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--hfs-bg);
}

.prod-top {
	flex-shrink: 0;
	background: var(--hfs-pos-tint);
}
.prod-top > h4 {
	padding: 10px 12px 8px;
	border-bottom: 1px solid var(--hfs-border);
}
.prod-filter-bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 8px 12px;
	border-bottom: 1px solid var(--hfs-border);
	gap: 6px;
}
.prod-filters {
	display: flex;
	gap: 6px;
	align-items: center;
	flex-wrap: wrap;
}
.prod-filter-actions {
	display: flex;
	gap: 6px;
	align-items: center;
}
/* Enforce uniform control height across all top bar elements */
.prod-filter-bar .form-control,
.prod-filter-bar .form-select,
.prod-filter-bar .rcv-field-input,
.prod-filter-bar .hfs-btn,
.prod-filter-bar .input-group {
	height: var(--hfs-control-height);
}
.prod-filter-bar .hfs-btn {
	height: var(--hfs-control-btn-height);
}
.prod-filter-bar .input-group .form-control {
	height: var(--hfs-control-height);
}

/* Split panel */
.prod-split {
	display: flex;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

/* Left: Product list (wider than emp/po) */
.prod-list-panel {
	width: 480px;
	flex-shrink: 0;
	border-right: 1px solid var(--hfs-border);
	display: flex;
	flex-direction: column;
	background: var(--hfs-bg);
}
.prod-list-scroll {
	flex: 1;
	overflow-y: auto;
}
.prod-list-footer {
	flex-shrink: 0;
	border-top: 1px solid var(--hfs-border);
	padding: 6px 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.7rem;
	color: var(--hfs-muted);
	background: var(--hfs-pos-tint);
	min-height: 32px;
}
.prod-list-footer .hfs-pagination {
	margin: 0;
}

/* Product list rows — structured layout */
.prod-list-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--hfs-border);
	cursor: pointer;
	transition: background 0.12s;
}
.prod-list-item:hover { background: var(--hfs-surface-tint-2); }
.prod-list-item.active {
	background: var(--hfs-bar);
	color: var(--hfs-bar-text);
}

.prod-list-thumb {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 4px;
	overflow: hidden;
	background: var(--hfs-surface-tint);
}
.prod-list-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.prod-list-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.prod-list-name {
	font-weight: 600;
	font-size: 0.78rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.prod-list-item.active .prod-list-name {
	color: var(--hfs-bar-text);
}
.prod-list-meta {
	display: flex;
	gap: 8px;
	font-size: 0.68rem;
	color: var(--hfs-muted);
	white-space: nowrap;
	overflow: hidden;
}
.prod-list-item.active .prod-list-meta,
.prod-list-item.active .prod-list-meta span {
	color: var(--hfs-bar-text);
	opacity: 0.8;
}
.prod-list-meta span {
	overflow: hidden;
	text-overflow: ellipsis;
}
.prod-list-meta .prod-meta-sku {
	font-family: var(--hfs-font-mono, monospace);
	font-size: 0.66rem;
}

.prod-list-right {
	flex-shrink: 0;
	text-align: right;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
}
.prod-list-price {
	font-weight: 600;
	font-size: 0.78rem;
	white-space: nowrap;
}
.prod-list-item.active .prod-list-price {
	color: var(--hfs-bar-text);
}
.prod-list-stock {
	font-size: 0.66rem;
	color: var(--hfs-muted);
}
.prod-list-item.active .prod-list-stock {
	color: var(--hfs-bar-text);
	opacity: 0.8;
}
.prod-list-badge-var {
	font-size: 0.6rem;
	padding: 1px 5px;
	border-radius: 3px;
	background: var(--hfs-surface-tint-2);
	color: var(--hfs-muted);
	white-space: nowrap;
}
.prod-list-item.active .prod-list-badge-var {
	background: rgba(255,255,255,0.15);
	color: var(--hfs-bar-text);
}

/* Right: Detail panel */
.prod-detail-panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--hfs-bg);
}
.prod-detail-content {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}
.prod-detail-tabs {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--hfs-border);
	background: var(--hfs-pos-tint);
	flex-shrink: 0;
	overflow-x: auto;
}
.prod-detail-tab {
	padding: 8px 14px;
	border: none;
	background: none;
	cursor: pointer;
	font-size: 0.72rem;
	color: var(--hfs-muted);
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color 0.15s, border-color 0.15s;
}
.prod-detail-tab:hover {
	color: var(--hfs-text);
}
.prod-detail-tab.active {
	color: var(--hfs-text);
	border-bottom-color: var(--hfs-bar);
}
.prod-detail-tab.prod-tab-disabled {
	opacity: 0.4;
	pointer-events: none;
}
.prod-tabpane {
	display: none;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}
.prod-tabpane.active {
	display: flex;
}
.prod-detail-scroll {
	flex: 1;
	overflow-y: auto;
	padding: 12px 16px;
}
.prod-detail-fields {
	max-width: 800px;
}
.prod-detail-bottom {
	flex-shrink: 0;
	padding: 8px 16px;
	border-top: 1px solid var(--hfs-border);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	background: var(--hfs-pos-tint);
}

.prod-detail-bottom .text-danger {
	margin-right: auto;
}

/* Variations table */
.prod-var-table {
	width: 100%;
	font-size: 0.72rem;
	border-collapse: collapse;
}
.prod-var-table th {
	font-weight: 600;
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--hfs-muted);
	padding: 6px 8px;
	border-bottom: 1px solid var(--hfs-border);
	white-space: nowrap;
}
.prod-var-table td {
	padding: 5px 8px;
	border-bottom: 1px solid var(--hfs-border);
	vertical-align: middle;
}
.prod-var-table tr:hover {
	background: var(--hfs-surface-tint-2);
}
.prod-var-table .var-col-actions {
	width: 70px;
	text-align: right;
}
.prod-var-table input.var-inline-input {
	border: 1px solid var(--hfs-border);
	border-radius: 3px;
	padding: 3px 6px;
	font-size: 0.72rem;
	background: var(--hfs-bg);
	color: var(--hfs-text);
	height: var(--hfs-control-height);
}
.prod-var-table input.var-inline-input:focus {
	outline: none;
	border-color: var(--hfs-bar);
}
.prod-var-empty {
	text-align: center;
	padding: 24px;
	color: var(--hfs-muted);
	font-size: 0.75rem;
}

/* Products section uses hfs-pos-fullscreen — no extra height chain needed */

/* Import/Export panel (toggleable) */
.prod-import-panel {
	flex-shrink: 0;
	border-top: 2px solid var(--hfs-border);
	background: var(--hfs-bg);
	max-height: 50%;
	overflow-y: auto;
}
.prod-import-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 12px;
	border-bottom: 1px solid var(--hfs-border);
	background: var(--hfs-pos-tint);
}
.prod-import-toolbar h5 {
	font-size: 0.82rem;
	margin: 0;
}

/* POS Variation Picker */
.pos-var-picker {
	padding: 12px;
}
.pos-var-picker-title {
	font-size: 0.82rem;
	font-weight: 600;
	margin-bottom: 10px;
}
.pos-var-picker-btns {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 10px;
}
.pos-var-picker-btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 12px;
	border: 1px solid var(--hfs-border);
	border-radius: 4px;
	background: var(--hfs-bg);
	color: var(--hfs-text);
	font-size: 0.78rem;
	cursor: pointer;
	transition: all 0.12s;
	text-align: left;
}
.pos-var-picker-btn:hover {
	border-color: var(--hfs-bar);
	background: var(--hfs-surface-tint-2);
}
.pos-var-picker-stock {
	font-size: 0.68rem;
	color: var(--hfs-muted);
	margin-left: 8px;
}
.pos-var-picker-cancel {
	margin-top: 4px;
}

/* POS search variation badge */
.hfs-register-var-badge {
	display: inline-block;
	font-size: 0.62rem;
	padding: 1px 5px;
	border-radius: 3px;
	background: var(--hfs-surface-tint-2);
	color: var(--hfs-muted);
	margin-left: 6px;
	vertical-align: middle;
}

/* POS staging variation label */
.hfs-staging-var {
	font-size: 0.72rem;
	color: var(--hfs-muted);
}

/* ============================================
   DATA EXCHANGE — Split-panel layout
   All dx-prefixed classes.
   ============================================ */

.dx-shell {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--hfs-bg);
}
.dx-shell .emp-top {
	flex-shrink: 0;
	background: var(--hfs-pos-tint);
}

/* Split */
.dx-split {
	display: flex;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

/* Left: history list */
.dx-list-panel {
	width: 300px;
	min-width: 260px;
	max-width: 340px;
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--hfs-border);
	background: var(--hfs-pos-tint);
}
.dx-list-header {
	padding: 8px 12px;
	border-bottom: 1px solid var(--hfs-border);
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--hfs-text);
}

/* List items */
.dx-list-item {
	padding: 10px 12px;
	border-bottom: 1px solid var(--hfs-border);
	cursor: pointer;
	transition: background 0.12s;
}
.dx-list-item:hover {
	background: var(--hfs-surface-tint-2);
}
.dx-list-item.active {
	background: var(--hfs-bar);
	color: var(--hfs-bar-text);
}
.dx-list-item-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2px;
}
.dx-list-item-scope {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
}
.dx-list-item-date {
	font-size: 0.68rem;
	opacity: 0.7;
}
.dx-list-item-counts {
	font-size: 0.7rem;
	opacity: 0.8;
}
.dx-list-item-meta {
	font-size: 0.66rem;
	opacity: 0.6;
	margin-top: 2px;
}

/* Detail tabs */
.dx-detail-tabs {
	display: flex;
	border-bottom: 1px solid var(--hfs-border);
	flex-shrink: 0;
	background: var(--hfs-pos-tint);
}
.dx-detail-tab {
	padding: 8px 16px;
	font-size: 0.78rem;
	font-weight: 600;
	border: none;
	background: transparent;
	color: var(--hfs-muted);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: color 0.15s, border-color 0.15s;
}
.dx-detail-tab:hover {
	color: var(--hfs-text);
}
.dx-detail-tab.active {
	color: var(--hfs-text);
	border-bottom-color: var(--hfs-bar);
}

/* Tab panes */
.dx-tabpane {
	display: none;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}
.dx-tabpane.active {
	display: flex;
}

/* Detail scroll */
.dx-detail-scroll {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
}

/* Form sections */
.dx-form-section {
	margin-bottom: 16px;
}
.dx-form-section .form-label {
	font-size: 0.78rem;
	margin-bottom: 4px;
}
.dx-filter-checks {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.dx-check-label {
	font-size: 0.78rem;
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}

/* ── Preview cards (invcreator-style card grid) ── */
.dx-preview-area {
	margin-top: 8px;
}
.dx-preview-empty {
	text-align: center;
	color: var(--hfs-muted);
	font-size: 0.82rem;
	padding: 24px 16px;
	font-style: italic;
}

.dx-preview-cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
}

.dx-card-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}
.dx-card-row--center {
	justify-content: center;
}

.dx-card {
	border: 1.5px dashed var(--hfs-border);
	border-radius: 10px;
	padding: 10px 20px;
	text-align: center;
	background: var(--hfs-bg);
	min-width: 100px;
}
.dx-card-label {
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--hfs-muted);
	margin-bottom: 2px;
}
.dx-card-value {
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--hfs-text);
}
.dx-card-value--count {
	font-size: 1.2rem;
}

/* ============================================
   UNITS OF MEASURE — Split-panel
   All uom-prefixed classes.
   ============================================ */

.uom-shell {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--hfs-bg);
}
.uom-shell .emp-top {
	flex-shrink: 0;
	background: var(--hfs-pos-tint);
}
.uom-split {
	display: flex;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

/* Left: category list */
.uom-list-panel {
	width: 240px;
	min-width: 200px;
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--hfs-border);
	background: var(--hfs-pos-tint);
}
.uom-list-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	border-bottom: 1px solid var(--hfs-border);
}
.uom-list-title {
	font-size: 0.78rem;
	font-weight: 700;
}

/* Category items */
.uom-cat-item {
	padding: 10px 12px;
	cursor: pointer;
}
.uom-cat-name {
	font-size: 0.82rem;
	font-weight: 600;
}
.uom-cat-count {
	font-size: 0.68rem;
	color: var(--hfs-muted);
	margin-top: 1px;
}
.uom-cat-item.active .uom-cat-count {
	color: var(--hfs-bar-text);
	opacity: 0.8;
}

/* Right: detail header */
.uom-detail-header {
	padding: 10px 16px;
	border-bottom: 1px solid var(--hfs-border);
	background: var(--hfs-pos-tint);
	flex-shrink: 0;
}
.uom-detail-header h5 {
	font-size: 0.9rem;
}

/* Table inside detail scroll — dark headers */
#uomUnitsScroll .table thead th {
	background: var(--hfs-table-head-bg);
	color: var(--hfs-table-head-text);
	border-color: var(--hfs-table-head-bg);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 700;
	padding: 6px 8px;
}
#uomUnitsScroll .table tbody td {
	font-size: 0.78rem;
	padding: 6px 8px;
}
/* Column widths: Code narrow, Label fills, Active narrow, Actions auto */
#uomUnitsScroll .table th:nth-child(1),
#uomUnitsScroll .table td:nth-child(1) { width: 80px; }
#uomUnitsScroll .table th:nth-child(2),
#uomUnitsScroll .table td:nth-child(2) { width: auto; }
#uomUnitsScroll .table th:nth-child(3),
#uomUnitsScroll .table td:nth-child(3) { width: 70px; }
#uomUnitsScroll .table th:nth-child(4),
#uomUnitsScroll .table td:nth-child(4) { width: 160px; white-space: nowrap; }


/* ============================================================
   POS Comments — split-panel dialog
   All pos-com- prefixed classes.
   ============================================================ */
.pos-com-dialog {
	width: 85%;
	max-width: 85%;
	height: 80%;
	max-height: 80%;
	display: flex;
	flex-direction: column;
}
.hfs-pos-badge {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	font-size: 0.65rem;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	color: #fff;
	background: var(--hfs-danger, #dc3545);
	border-radius: 9px;
}
.hfs-register-btn-comments {
	position: relative;
}
.pos-com-toolbar {
	display: flex;
	gap: 6px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--hfs-separator);
}
.pos-com-toolbar select {
	width: 120px;
	flex-shrink: 0;
}
.pos-com-toolbar input {
	flex: 1;
	min-width: 0;
}
.pos-com-split {
	display: flex;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}
.pos-com-list-panel {
	width: 340px;
	min-width: 340px;
	border-right: 1px solid var(--hfs-separator);
	display: flex;
	flex-direction: column;
}
.pos-com-list-scroll {
	flex: 1;
	overflow-y: auto;
}
.pos-com-list-item {
	padding: 8px 10px;
	border-bottom: 1px solid var(--hfs-separator);
	cursor: pointer;
	transition: background 0.15s;
}
.pos-com-list-item:hover {
	background: var(--hfs-bg-subtle, #f9fafb);
}
.pos-com-list-item.active {
	background: var(--hfs-bar);
	color: var(--hfs-bar-text);
}
.pos-com-list-item.active .pos-com-item-context,
.pos-com-list-item.active .pos-com-item-preview,
.pos-com-list-item.active .pos-com-item-date {
	color: var(--hfs-bar-text);
	opacity: 0.8;
}
.pos-com-item-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2px;
}
.pos-com-item-author {
	font-weight: 600;
	font-size: 0.8rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pos-com-item-status {
	font-size: 0.65rem;
	flex-shrink: 0;
}
.pos-com-item-context {
	font-size: 0.72rem;
	color: var(--hfs-text-muted, #6b7280);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.pos-com-item-preview {
	font-size: 0.8rem;
	line-height: 1.3;
	color: var(--hfs-text-muted, #6b7280);
	display: -webkit-box;
	line-clamp: 2;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 2px 0;
}
.pos-com-item-date {
	font-size: 0.7rem;
	color: var(--hfs-text-muted, #6b7280);
}
.pos-com-detail-panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.pos-com-detail-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.pos-com-detail-empty {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--hfs-text-muted, #6b7280);
	font-size: 0.9rem;
}
.pos-com-detail-empty i {
	font-size: 2rem;
	margin-bottom: 8px;
	opacity: 0.4;
}
.pos-com-detail-header {
	padding: 8px 14px;
	border-bottom: 1px solid var(--hfs-separator);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.pos-com-header-context {
	font-size: 0.85rem;
	font-weight: 600;
}
.pos-com-detail-actions {
	display: flex;
	gap: 6px;
	padding: 6px 14px;
	border-bottom: 1px solid var(--hfs-separator);
}
.pos-com-detail-actions:empty {
	display: none;
}
.pos-com-thread-scroll {
	flex: 1;
	overflow-y: auto;
	padding: 10px 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.pos-com-bubble {
	max-width: 80%;
	padding: 10px 14px;
	border-radius: 12px;
	font-size: 0.82rem;
	line-height: 1.45;
	position: relative;
}
.pos-com-bubble--customer {
	align-self: flex-start;
	background: var(--hfs-surface-tint);
	border: 1px solid var(--hfs-border);
	border-bottom-left-radius: 4px;
}
.pos-com-bubble--staff {
	align-self: flex-end;
	background: var(--hfs-bar);
	color: var(--hfs-bar-text);
	border-bottom-right-radius: 4px;
}
.pos-com-bubble-header {
	display: flex;
	gap: 6px;
	align-items: center;
	margin-bottom: 3px;
}
.pos-com-bubble-author {
	font-size: 0.68rem;
	font-weight: 700;
}
.pos-com-bubble--customer .pos-com-bubble-author {
	color: var(--hfs-text);
}
.pos-com-bubble--staff .pos-com-bubble-author {
	color: var(--hfs-bar-text);
	opacity: 0.85;
}
.pos-com-bubble-author i {
	margin-left: 2px;
}
.pos-com-bubble-date {
	font-size: 0.62rem;
	margin-left: auto;
	opacity: 0.65;
}
.pos-com-bubble--staff .pos-com-bubble-date {
	color: var(--hfs-bar-text);
}
.pos-com-bubble-text {
	word-wrap: break-word;
}
.pos-com-bubble-text p {
	margin: 0 0 0.4em;
}
.pos-com-bubble-text p:last-child {
	margin-bottom: 0;
}
.pos-com-reply-bar {
	flex-shrink: 0;
	display: flex;
	gap: 8px;
	align-items: stretch;
	padding: 8px 12px;
	border-top: 1px solid var(--hfs-border);
	background: var(--hfs-pos-tint);
	height: var(--com-reply-h, 140px);
}
.pos-com-reply-editor-wrap {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.pos-com-reply-editor-wrap .tox-tinymce {
	flex: 1 !important;
	height: 100% !important;
	border-radius: 6px !important;
}
.pos-com-reply-bar .hfs-btn {
	height: 36px;
	width: 36px;
	flex-shrink: 0;
	align-self: flex-end;
}

/* ============================================================
   Reply bar resize handle — admin + POS comments
   ============================================================ */
.com-reply-resize-handle {
	height: 6px;
	cursor: ns-resize;
	background: var(--hfs-separator);
	position: relative;
	flex-shrink: 0;
}
.com-reply-resize-handle::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 32px;
	height: 3px;
	border-top: 1px solid var(--hfs-text-muted, #999);
	border-bottom: 1px solid var(--hfs-text-muted, #999);
	opacity: 0.5;
}
.com-reply-resize-handle:hover::after {
	opacity: 1;
}
body.com-resizing {
	user-select: none;
	cursor: ns-resize;
}

/* ============================================================
   Comments filter bar — wider filters, search fills space
   ============================================================ */
.com-filter-actions {
	display: flex;
	gap: 8px;
	align-items: center;
	flex: 1;
}
.com-filter-select {
	min-width: 140px;
}
.com-filter-search {
	flex: 1;
	min-width: 0;
}
.pos-com-search-group {
	flex: 1;
	min-width: 0;
}

/* ============================================================
   TinyMCE background blending — reply editors
   ============================================================ */
.tox :not(svg):not(rect),
.tox :not(svg):not(rect) {
	background: var(--hfs-bg) !important;
}

/* ============================================================
   Product Inventory Tab (prod-inv- prefix)
   v2.20.09
   ============================================================ */
.prod-inv-section-title {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--hfs-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 6px;
	margin-top: 10px;
	display: flex;
	align-items: center;
	gap: 6px;
	border-bottom: 1px solid var(--hfs-border);
	padding-bottom: 4px;
}
.prod-inv-section-title:first-child {
	margin-top: 0;
}
.prod-inv-drift {
	display: flex;
	align-items: center;
	height: var(--hfs-control-height);
	padding: 0 8px;
}
.prod-inv-log-wrap {
	max-height: 220px;
	overflow-y: auto;
	border: none;
	border-radius: 0;
	background: transparent;
}
.prod-inv-log-wrap .table {
	font-size: 0.8rem;
	background: transparent;
	--bs-table-bg: transparent;
}
.prod-inv-log-wrap .table th {
	position: sticky;
	top: 0;
	background: var(--hfs-bg);
	z-index: 1;
	border-bottom: 2px solid var(--hfs-border);
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--hfs-text-muted);
}
.prod-inv-log-wrap .table td {
	background: transparent;
	border-bottom: 1px solid var(--hfs-border);
}
.prod-inv-log-wrap .table tr:last-child td {
	border-bottom: none;
}
.prod-inv-adjust-type {
	display: inline-block;
	padding: 1px 6px;
	border-radius: 3px;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	background: var(--hfs-surface-tint);
	color: var(--hfs-text);
}

/* ============================================================
   Product History Tab — status badges
   ============================================================ */
.prod-hist-po-link,
.prod-hist-rcv-link {
	color: var(--hfs-link);
	text-decoration: none;
	font-weight: 500;
}
.prod-hist-po-link:hover,
.prod-hist-rcv-link:hover {
	text-decoration: underline;
}
.prod-hist-status {
	display: inline-block;
	padding: 1px 0;
	font-size: 0.7rem;
	font-weight: 500;
	text-transform: uppercase;
	color: var(--hfs-text-muted);
}

/* ============================================================
   Inventory Report — stock status badges (rpt-inv- prefix)
   ============================================================ */
.rpt-inv-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
}
.rpt-inv-ok { background: #e6f4ea; color: #137333; }
.rpt-inv-low { background: #fef7e0; color: #b06d00; }
.rpt-inv-out { background: #fce8e6; color: #c5221f; }

/* ============================================================
   Brands — Split-panel (brd- prefix)
   ============================================================ */
.brd-shell {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--hfs-bg);
}
.brd-split {
	display: flex;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

/* Left: Brand list */
.brd-list-panel {
	width: 340px;
	flex-shrink: 0;
	border-right: 1px solid var(--hfs-border);
	display: flex;
	flex-direction: column;
	background: var(--hfs-bg);
}
.brd-list-scroll {
	flex: 1;
	overflow-y: auto;
}
.brd-list-footer {
	flex-shrink: 0;
	border-top: 1px solid var(--hfs-border);
	padding: 6px 10px;
	font-size: 0.7rem;
	color: var(--hfs-muted);
	background: var(--hfs-pos-tint);
	min-height: 28px;
}

/* Brand list rows */
.brd-list-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--hfs-border);
	cursor: pointer;
	transition: background 0.12s;
}
.brd-list-item:hover { background: var(--hfs-surface-tint-2); }
.brd-list-item.active {
	background: var(--hfs-bar);
	color: var(--hfs-bar-text);
}

.brd-list-logo {
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border-radius: 4px;
	overflow: hidden;
	background: var(--hfs-surface-tint);
}
.brd-list-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.brd-list-logo-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--hfs-muted);
	font-size: 1rem;
}

.brd-list-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.brd-list-name {
	font-weight: 600;
	font-size: 0.78rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.brd-list-item.active .brd-list-name { color: var(--hfs-bar-text); }

.brd-list-meta {
	display: flex;
	gap: 8px;
	font-size: 0.68rem;
	color: var(--hfs-muted);
	white-space: nowrap;
	overflow: hidden;
}
.brd-list-item.active .brd-list-meta,
.brd-list-item.active .brd-list-meta span {
	color: var(--hfs-bar-text);
	opacity: 0.8;
}
.brd-list-url {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Right: Detail panel */
.brd-detail-panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--hfs-bg);
}
.brd-detail-content {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}
.brd-detail-tabs {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--hfs-border);
	background: var(--hfs-pos-tint);
	flex-shrink: 0;
}
.brd-detail-tab {
	padding: 8px 14px;
	border: none;
	background: none;
	cursor: pointer;
	font-size: 0.72rem;
	color: var(--hfs-muted);
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color 0.15s, border-color 0.15s;
}
.brd-detail-tab:hover { color: var(--hfs-text); }
.brd-detail-tab.active {
	color: var(--hfs-text);
	border-bottom-color: var(--hfs-bar);
}
.brd-tabpane {
	display: none;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}
.brd-tabpane.active { display: flex; }
.brd-detail-scroll {
	flex: 1;
	overflow-y: auto;
	padding: 16px 20px;
}

/* General tab form */
.brd-form-grid {
	max-width: 560px;
}
.brd-form-section {
	margin-bottom: 16px;
}
.brd-form-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	padding: 8px 16px;
	border-top: 1px solid var(--hfs-border);
	background: var(--hfs-pos-tint);
	flex-shrink: 0;
}

/* Logo upload */
.brd-logo-upload-wrap {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.brd-logo-preview-wrap {
	width: 80px;
	height: 80px;
	flex-shrink: 0;
	border-radius: 6px;
	overflow: hidden;
	background: var(--hfs-surface-tint);
	border: 1px solid var(--hfs-border);
}
.brd-logo-preview {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.brd-logo-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--hfs-muted);
	font-size: 1.5rem;
}
.brd-logo-controls {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.brd-logo-file-row {
	display: flex;
	align-items: center;
	gap: 8px;
}
.brd-logo-filename {
	color: var(--hfs-muted);
}

/* Products tab table */
.brd-products-wrap {
	overflow-x: auto;
}
.brd-products-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.78rem;
}
.brd-products-table th {
	font-weight: 600;
	font-size: 0.7rem;
	text-transform: uppercase;
	color: var(--hfs-muted);
	padding: 6px 10px;
	border-bottom: 2px solid var(--hfs-border);
}
.brd-products-table td {
	padding: 6px 10px;
	border-bottom: 1px solid var(--hfs-border);
}

/* ============================================================
   Suppliers — Split-panel (sup- prefix)
   ============================================================ */
.sup-shell {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--hfs-bg);
}
.sup-split {
	display: flex;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

/* Left: Supplier list */
.sup-list-panel {
	width: 340px;
	flex-shrink: 0;
	border-right: 1px solid var(--hfs-border);
	display: flex;
	flex-direction: column;
	background: var(--hfs-bg);
}
.sup-list-scroll {
	flex: 1;
	overflow-y: auto;
}
.sup-list-footer {
	flex-shrink: 0;
	border-top: 1px solid var(--hfs-border);
	padding: 6px 10px;
	font-size: 0.7rem;
	color: var(--hfs-muted);
	background: var(--hfs-pos-tint);
	min-height: 28px;
}

/* Supplier list rows */
.sup-list-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--hfs-border);
	cursor: pointer;
	transition: background 0.12s;
}
.sup-list-item:hover { background: var(--hfs-surface-tint-2); }
.sup-list-item.active {
	background: var(--hfs-bar);
	color: var(--hfs-bar-text);
}

.sup-list-icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 4px;
	background: var(--hfs-surface-tint);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--hfs-muted);
	font-size: 0.9rem;
}
.sup-list-item.active .sup-list-icon {
	background: rgba(255,255,255,0.15);
	color: var(--hfs-bar-text);
}

.sup-list-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.sup-list-name {
	font-weight: 600;
	font-size: 0.78rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.sup-list-item.active .sup-list-name { color: var(--hfs-bar-text); }

.sup-list-meta {
	display: flex;
	gap: 8px;
	font-size: 0.68rem;
	color: var(--hfs-muted);
	white-space: nowrap;
	overflow: hidden;
}
.sup-list-item.active .sup-list-meta,
.sup-list-item.active .sup-list-meta span {
	color: var(--hfs-bar-text);
	opacity: 0.8;
}

.sup-list-right {
	flex-shrink: 0;
}
.sup-list-status {
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
	padding: 1px 5px;
	border-radius: 3px;
}
.sup-status-active { background: #e6f4ea; color: #137333; }
.sup-status-inactive { background: var(--hfs-surface-tint); color: var(--hfs-muted); }
.sup-list-item.active .sup-list-status {
	background: rgba(255,255,255,0.15);
	color: var(--hfs-bar-text);
}

/* Right: Detail panel */
.sup-detail-panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--hfs-bg);
}
.sup-detail-content {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}
.sup-detail-tabs {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--hfs-border);
	background: var(--hfs-pos-tint);
	flex-shrink: 0;
}
.sup-detail-tab {
	padding: 8px 14px;
	border: none;
	background: none;
	cursor: pointer;
	font-size: 0.72rem;
	color: var(--hfs-muted);
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color 0.15s, border-color 0.15s;
}
.sup-detail-tab:hover { color: var(--hfs-text); }
.sup-detail-tab.active {
	color: var(--hfs-text);
	border-bottom-color: var(--hfs-bar);
}
.sup-tabpane {
	display: none;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}
.sup-tabpane.active { display: flex; }
.sup-detail-scroll {
	flex: 1;
	overflow-y: auto;
	padding: 16px 20px;
}

/* General tab form */
.sup-form-section {
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--hfs-border);
}
.sup-form-section:last-of-type {
	border-bottom: none;
}
.sup-section-label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--hfs-muted);
	text-transform: uppercase;
	letter-spacing: 0.3px;
	margin-bottom: 6px;
}
.sup-form-actions {
	flex-shrink: 0;
	padding: 8px 16px;
	border-top: 1px solid var(--hfs-border);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	background: var(--hfs-pos-tint);
	margin-top: 0;
}
.sup-tabpane {
	display: none;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.sup-tabpane.active {
	display: flex;
}

.sup-detail-scroll {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
}

/* Products tab toolbar */
.sup-products-toolbar {
	flex-shrink: 0;
	padding: 8px 20px;
	border-bottom: 1px solid var(--hfs-border);
	display: flex;
	justify-content: flex-end;
}

/* Products tab table */
.sup-products-wrap {
	overflow-x: auto;
}
.sup-products-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.78rem;
}
.sup-products-table th {
	font-weight: 600;
	font-size: 0.7rem;
	text-transform: uppercase;
	color: var(--hfs-muted);
	padding: 6px 10px;
	border-bottom: 2px solid var(--hfs-border);
}
.sup-products-table td {
	padding: 6px 10px;
	border-bottom: 1px solid var(--hfs-border);
}

/* ================================================================
   Seasonal Hours (System > General > Hours Tab)
   Prefix: shrs-
   ================================================================ */
.shrs-split { display: flex; gap: 0; height: 100%; min-height: 340px; }
.shrs-list-panel { width: 280px; min-width: 280px; border-right: 1px solid var(--hfs-border); display: flex; flex-direction: column; }
.shrs-list-header { padding: 12px 16px; border-bottom: 1px solid var(--hfs-border); }
.shrs-list-title { font-size: 0.92rem; font-weight: 700; color: var(--hfs-text); }
.shrs-list-scroll { flex: 1; overflow-y: auto; }
.shrs-list-item { padding: 12px 16px; border-bottom: 1px solid var(--hfs-border); cursor: pointer; transition: background 0.1s; }
.shrs-list-item:hover { background: var(--hfs-surface-tint-2); }
.shrs-list-item.shrs-selected { background: var(--hfs-bar); color: var(--hfs-bar-text); }
.shrs-list-item.shrs-selected .shrs-item-hours,
.shrs-list-item.shrs-selected .shrs-item-closed { color: var(--hfs-bar-text); opacity: 0.85; }
.shrs-item-season { font-weight: 600; font-size: 0.88rem; margin-bottom: 2px; }
.shrs-item-hours { font-size: 0.8rem; color: var(--hfs-text-muted); }
.shrs-item-closed { font-size: 0.75rem; color: var(--hfs-danger); margin-top: 2px; }

.shrs-detail-panel { flex: 1; display: flex; flex-direction: column; }
.shrs-detail-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--hfs-text-muted); font-size: 0.85rem; }
.shrs-detail-form { flex: 1; display: flex; flex-direction: column; }
.shrs-form-header { padding: 16px 20px 12px; border-bottom: 1px solid var(--hfs-border); }
.shrs-form-title { margin: 0 0 2px; font-size: 1rem; font-weight: 700; }
.shrs-form-subtitle { font-size: 0.8rem; color: var(--hfs-text-muted); }
.shrs-form-body { padding: 16px 20px; flex: 1; }
.shrs-form-row { display: flex; gap: 16px; margin-bottom: 16px; }
.shrs-form-field { flex: 1; }
.shrs-form-field label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--hfs-text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.03em; }
.shrs-form-section { margin-bottom: 16px; }
.shrs-form-section-label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--hfs-text-muted); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.03em; }
.shrs-closed-days { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.shrs-day-check { display: flex; align-items: center; gap: 6px; font-size: 0.84rem; cursor: pointer; }
.shrs-day-check input[type="checkbox"] { cursor: pointer; }
.shrs-form-footer { padding: 12px 20px; border-top: 1px solid var(--hfs-border); display: flex; gap: 8px; }

/* ================================================================
   Schedule Gap Detection Pills (Calendar Month View)
   ================================================================ */
.sch-month-gap-slot { min-height: 0; }
.sch-gap-pill {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 600;
	padding: 1px 6px;
	border-radius: 3px;
	background: var(--hfs-danger, #e74c3c);
	color: #fff;
	white-space: nowrap;
	margin-bottom: 2px;
}

/* Seasonal Hours — day table in editor */
.shrs-day-table { width: 100%; border-collapse: collapse; }
.shrs-day-table th { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--hfs-text-muted); padding: 6px 8px; text-align: left; border-bottom: 2px solid var(--hfs-border); }
.shrs-day-table td { padding: 6px 8px; border-bottom: 1px solid var(--hfs-border); vertical-align: middle; }
.shrs-day-label { white-space: nowrap; width: 100px; }
.shrs-closed-switch { padding-left: 2.5rem; }
.shrs-closed-lbl { font-size: 0.78rem; color: var(--hfs-text-muted); }

/* ================================================================
   Weekly Timeline View (sch-wk- prefix)
   Layout: fixed left time gutter + horizontally/vertically scrollable day columns.
   Time gutter stays fixed on horizontal scroll.
   Day headers stick to top on vertical scroll.
   Concurrent shifts render as side-by-side content-width cards.
   ================================================================ */
.sch-weekly-scroll { flex: 1; overflow: hidden; }
.sch-weekly-grid { display: flex; height: 100%; }

/* Time gutter — fixed left, scrolls vertically with content */
.sch-wk-gutter {
	width: 58px; flex-shrink: 0; position: relative;
	border-right: 1px solid var(--hfs-border); background: var(--hfs-bg);
	z-index: 4;
}
.sch-wk-gutter-header {
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--hfs-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom: 1px solid var(--hfs-border);
	background: var(--hfs-bg);
	position: sticky;
	top: 0;
	z-index: 5;
}
.sch-wk-hour-label {
	position: absolute; right: 6px;
	font-size: 0.68rem; color: var(--hfs-text-muted);
	line-height: 1; transform: translateY(-50%); white-space: nowrap;
}

/* Scrollable days area — scrolls both horizontally and vertically */
.sch-wk-days-scroll { flex: 1; overflow: auto; position: relative; }

/* Day columns container */
.sch-wk-days { display: flex; min-width: 100%; }
.sch-wk-day-col { flex: 1 1 0; border-right: 1px solid var(--hfs-border); display: flex; flex-direction: column; min-width: 160px; }
.sch-wk-day-col:last-child { border-right: 1px solid var(--hfs-border); }

/* Day headers — sticky top, must be opaque to cover scrolling content */
.sch-wk-day-header {
	text-align: center; padding: 6px 4px;
	border-bottom: 1px solid var(--hfs-border);
	background: var(--hfs-bg);
	position: sticky; top: 0; z-index: 3;
	height: 38px;
}
.sch-wk-day-name { display: block; font-size: 0.72rem; font-weight: 600; color: var(--hfs-text-muted); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; }
.sch-wk-day-date { display: block; font-size: 0.92rem; font-weight: 700; color: var(--hfs-text); line-height: 1.1; }
.sch-wk-today .sch-wk-day-date { color: var(--hfs-bar); }
.sch-wk-today .sch-wk-day-header { background: var(--hfs-bg); }

/* Day body — holds hour lines and shift cards */
.sch-wk-day-body { position: relative; }
.sch-wk-hour-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--hfs-border); opacity: 0.5; }

/* Weekly cards — absolutely positioned by time */
.sch-wk-card {
	position: absolute;
	border: 1px solid var(--hfs-border);
	border-left: 3px solid var(--hfs-bar);
	background: var(--hfs-surface);
	border-radius: 8px;
	padding: 4px;
	cursor: pointer;
	font-size: 0.75rem;
	box-sizing: border-box;
	transition: box-shadow 0.12s ease, width 0.12s ease, left 0.12s ease;
	z-index: 2;
	overflow: hidden;
	display: flex;
	align-items: flex-start;
	gap: 6px;
}
.sch-wk-card:hover {
	box-shadow: 0 10px 22px rgba(0,0,0,0.18);
	z-index: 12;
}
.sch-wk-card.sch-card-open {
	border-left-color: var(--hfs-warning, #e67e22);
	background: var(--hfs-surface);
}
.sch-wk-card.sch-card-draft { opacity: 0.92; }
.sch-wk-card.sch-card-timeoff {
	border-left-color: var(--hfs-info, #1abc9c);
	background: var(--hfs-surface);
}
.sch-wk-card-avatar {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--hfs-bar);
	color: var(--hfs-bar-text, #fff);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.60rem;
	font-weight: 700;
	flex-shrink: 0;
	margin: 1px 0 0 0;
}
.sch-wk-card-full {
	left: 2px;
	width: calc(100% - 4px);
	min-width: 0;
}
.sch-wk-card-full .sch-wk-card-detail {
	display: block;
	min-width: 0;
	flex: 1;
}
.sch-wk-card-compact {
	padding: 3px 2px;
	justify-content: center;
	align-items: flex-start;
	gap: 0;
	min-width: 30px;
	max-width: 30px;
}
.sch-wk-card-compact .sch-wk-card-avatar {
	margin: 1px auto 0;
}
.sch-wk-card-compact .sch-wk-card-detail {
	display: none;
}
.sch-wk-card-compact:hover {
	left: 2px !important;
	width: calc(100% - 4px) !important;
	max-width: none;
	justify-content: flex-start;
	padding: 4px;
	overflow: hidden;
}
.sch-wk-card-compact:hover .sch-wk-card-avatar {
	margin: 1px 0 0 0;
}
.sch-wk-card-compact:hover .sch-wk-card-detail {
	display: block;
	min-width: 0;
	flex: 1;
}
.sch-wk-card-name { font-weight: 600; font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-wk-card-time { font-size: 0.68rem; color: var(--hfs-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sch-wk-card-role, .sch-wk-card-break { font-size: 0.65rem; color: var(--hfs-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Footer cost label */
.sch-footer-cost { font-size: 0.78rem; color: var(--hfs-text-muted); margin-left: 4px; }

/* ============================================================
   My Schedule (Sprint 4 self-service)
   ============================================================ */
.mysch-shell { position: relative; }
.mysch-period-label {
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hfs-text-muted);
}
.mysch-content {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--hfs-bg);
}
.mysch-weekly-panel {
	display: flex;
	flex: 0 0 430px;
	min-height: 320px;
	border-bottom: 1px solid var(--hfs-border);
	background: var(--hfs-bg);
}
.mysch-detail-scroll {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 12px;
	background: var(--hfs-bg);
}
.mysch-detail-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.9fr);
	gap: 12px;
	align-items: start;
}
.mysch-card {
	background: var(--hfs-panel);
	border: 1px solid var(--hfs-border);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--hfs-shadow-sm);
}
.mysch-card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.95rem 1rem;
	border-bottom: 1px solid var(--hfs-border);
	background: var(--hfs-pos-tint);
}
.mysch-card-body { padding: 0.95rem 1rem 1rem; }
.mysch-card-title { margin: 0; font-size: 1rem; font-weight: 800; color: var(--hfs-text); }
.mysch-card-subtitle { margin-top: 0.18rem; font-size: 0.82rem; color: var(--hfs-text-muted); }
.mysch-inline-actions { display: flex; gap: 0.45rem; flex-wrap: wrap; }
.mysch-employee-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.28rem 0.32rem 0.28rem 0.28rem;
	border-radius: 999px;
	border: 1px solid var(--hfs-border);
	background: var(--hfs-bg);
}
.mysch-employee-avatar {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--hfs-bar);
	color: var(--hfs-bar-text);
	font-size: 0.78rem;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mysch-employee-name { font-size: 0.88rem; font-weight: 800; color: var(--hfs-text); line-height: 1.1; }
.mysch-employee-role { font-size: 0.73rem; color: var(--hfs-text-muted); line-height: 1.1; }
.mysch-weekly-panel .sch-weekly-scroll { flex: 1; overflow: hidden; }
.mysch-weekly-panel .sch-weekly-grid { display: flex; height: 100%; }
.mysch-weekly-panel .sch-wk-day-col { min-width: 160px; }
.mysch-weekly-panel .sch-wk-card { cursor: default; }
.mysch-weekly-panel .sch-wk-card-name,
.mysch-weekly-panel .sch-wk-card-time,
.mysch-weekly-panel .sch-wk-card-role,
.mysch-weekly-panel .sch-wk-card-break { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mysch-card-note { margin-top: 0.2rem; font-size: 0.74rem; color: var(--hfs-text-muted); }
.mysch-availability-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 0.95fr);
	gap: 1rem;
	align-items: start;
}
.mysch-block-title {
	font-size: 0.8rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hfs-text-muted);
	margin-bottom: 0.55rem;
}
.mysch-availability-table { margin-bottom: 0; }
.mysch-availability-table th {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--hfs-text-muted);
}
.mysch-exception-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.55rem;
	margin-bottom: 0.8rem;
}
.mysch-exception-form input[type="text"],
.mysch-exception-form button { grid-column: span 2; }
.mysch-exception-item {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 0;
	border-top: 1px solid var(--hfs-border);
	align-items: center;
}
.mysch-exception-item:first-child { border-top: 1px solid var(--hfs-border); }
.mysch-exception-date { font-weight: 800; color: var(--hfs-text); }
.mysch-exception-meta { font-size: 0.8rem; color: var(--hfs-text-muted); }
.mysch-notification-summary {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--hfs-border);
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--hfs-text-muted);
	background: var(--hfs-bg);
}
.mysch-notification-list { padding: 0.8rem 1rem 1rem; }
.mysch-notification-item {
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--hfs-border);
	border-radius: 10px;
	background: var(--hfs-bg);
}
.mysch-notification-item + .mysch-notification-item { margin-top: 0.6rem; }
.mysch-notification-item.unread {
	border-color: color-mix(in srgb, var(--hfs-bar) 38%, var(--hfs-border));
	box-shadow: inset 3px 0 0 var(--hfs-bar);
}
.mysch-notification-title { font-weight: 800; color: var(--hfs-text); }
.mysch-notification-message { margin-top: 0.2rem; font-size: 0.82rem; color: var(--hfs-text); }
.mysch-notification-meta { margin-top: 0.35rem; font-size: 0.75rem; color: var(--hfs-text-muted); }
.mysch-notification-actions { margin-top: 0.55rem; display: flex; gap: 0.45rem; flex-wrap: wrap; }

.mysch-request-shell {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	height: 100%;
	min-height: 0;
	background: var(--hfs-bg);
	overflow: hidden;
}
.mysch-request-forms {
	padding: 0 0 0.2rem;
	background: transparent;
}
.mysch-request-workspace {
	display: flex;
	flex: 1;
	min-height: 540px;
	background: var(--hfs-bg);
	border: 1px solid var(--hfs-border);
	overflow: hidden;
}
.mysch-request-list-panel {
	width: 38%;
	min-width: 320px;
	max-width: 520px;
	border-right: 1px solid var(--hfs-border);
	background: var(--hfs-bg);
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.mysch-request-detail-panel {
	flex: 1;
	background: var(--hfs-bg);
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	border-left: 0;
}
.mysch-request-list-scroll,
.mysch-request-detail-scroll {
	flex: 1;
	min-height: 0;
	overflow: auto;
}
.mysch-request-form-card {
	background: var(--hfs-bg);
	border: 1px solid var(--hfs-border);
	border-radius: 10px;
}
.mysch-request-form-body {
	padding: 1rem;
}
#mySchRequestList {
	background: var(--hfs-bg);
}
.mysch-request-item {
	display: block;
	width: 100%;
	padding: 1rem 1rem;
	text-align: left;
	border: 0;
	border-bottom: 1px solid var(--hfs-border);
	background: var(--hfs-bg);
	color: var(--hfs-text);
	transition: background 0.12s ease, box-shadow 0.12s ease;
}
.mysch-request-item:hover {
	background: var(--hfs-surface-tint-2);
}
.mysch-request-item.active {
	background: var(--hfs-bar);
	color: var(--hfs-bar-text);
}
.mysch-request-item-main {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
}
.mysch-request-item-title {
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--hfs-text);
}
.mysch-request-item.active .mysch-request-item-title {
	color: var(--hfs-bar-text);
}
.mysch-request-item-subtitle {
	margin-top: 0.25rem;
	font-size: 0.82rem;
	color: var(--hfs-text);
}
.mysch-request-item.active .mysch-request-item-subtitle {
	color: var(--hfs-bar-text);
	opacity: 0.85;
}
.mysch-request-item-summary {
	margin-top: 0.35rem;
	font-size: 0.78rem;
	color: var(--hfs-text-muted);
}
.mysch-request-item.active .mysch-request-item-summary {
	color: var(--hfs-bar-text);
	opacity: 0.8;
}
.mysch-request-status {
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	background: var(--hfs-pos-tint);
	border: 1px solid var(--hfs-border);
	font-size: 0.72rem;
	font-weight: 700;
	white-space: nowrap;
	color: var(--hfs-text);
}
.mysch-request-item.active .mysch-request-status {
	background: rgba(255,255,255,0.12);
	border-color: rgba(255,255,255,0.18);
	color: var(--hfs-bar-text);
}
.mysch-request-detail-empty,
.mysch-request-list-empty,
.mysch-request-detail-error {
	padding: 1.15rem 1rem;
	color: var(--hfs-text-muted);
}
.mysch-request-detail-body {
	padding: 1.15rem 1rem 1.25rem;
}
.mysch-request-detail-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--hfs-border);
}
.mysch-request-detail-title {
	font-size: 1.55rem;
	font-weight: 500;
	line-height: 1.2;
	color: var(--hfs-text);
}
.mysch-request-detail-subtitle {
	margin-top: 0.25rem;
	font-size: 0.95rem;
	color: var(--hfs-text-muted);
}
.mysch-request-detail-section + .mysch-request-detail-section {
	margin-top: 1rem;
}
.mysch-request-detail-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.65rem;
}
.mysch-request-detail-row {
	font-size: 0.95rem;
	line-height: 1.45;
	color: var(--hfs-text);
}
.mysch-request-detail-row strong {
	font-weight: 700;
}
.mysch-request-action-box {
	padding: 1rem;
	border: 1px solid var(--hfs-border);
	border-radius: 10px;
	background: var(--hfs-panel);
}
.mysch-request-action-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.85rem;
}
.mysch-request-history-list {
	border: 1px solid var(--hfs-border);
	border-radius: 10px;
	overflow: hidden;
}
.mysch-request-history-item {
	padding: 0.85rem 1rem;
	background: var(--hfs-bg);
}
.mysch-request-history-item + .mysch-request-history-item {
	border-top: 1px solid var(--hfs-border);
}
.mysch-request-history-title {
	font-size: 0.84rem;
	font-weight: 700;
	color: var(--hfs-text);
}
.mysch-request-history-meta {
	margin-top: 0.15rem;
	font-size: 0.76rem;
	color: var(--hfs-text-muted);
}
.mysch-request-history-note {
	margin-top: 0.35rem;
	font-size: 0.82rem;
	color: var(--hfs-text);
}
.mysch-empty-state {
	padding: 1rem;
	border: 1px dashed var(--hfs-border);
	border-radius: 10px;
	font-size: 0.82rem;
	color: var(--hfs-text-muted);
	text-align: center;
	background: var(--hfs-bg);
}
#mysch-requests {
	padding: 0.2rem 0 0;
}
@media (max-width: 1100px) {
	.mysch-detail-grid,
	.mysch-availability-grid { grid-template-columns: 1fr; }
	.mysch-request-workspace {
		flex-direction: column;
		min-height: 0;
	}
	.mysch-request-list-panel {
		width: 100%;
		max-width: none;
		min-width: 0;
		border-right: 0;
	}
	.mysch-request-detail-panel { min-height: 360px; }
}
@media (max-width: 700px) {
	.mysch-card-header,
	.mysch-shell .emp-filter-bar,
	.mysch-shell .sch-date-bar,
	.mysch-title-row,
	.mysch-controls,
	.mysch-date-controls {
		flex-direction: column;
		align-items: stretch;
	}
	.mysch-weekly-panel { flex-basis: 360px; }
	.mysch-exception-form { grid-template-columns: 1fr; }
	.mysch-exception-form input[type="text"],
	.mysch-exception-form button { grid-column: auto; }
}


/* ---- My Schedule ---- */
.mysch-shell {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}
.mysch-tabs-wrap,
.mysch-tabpanes {
	padding: 0.5rem;
}
.mysch-tabpanes {
	padding-top: 0.5rem;
}
.mysch-view-pill {
	cursor: default;
}
.mysch-weekly-panel {
	display: flex;
	flex: 1 1 auto;
	min-height: 0;
	background: var(--hfs-bg);
	border: 1px solid var(--hfs-border);
	border-radius: 14px;
	overflow: hidden;
}
#mysch-schedule.settings-tabpane.active {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}
#mysch-schedule .sch-view-weekly,
#mysch-schedule .sch-weekly-scroll,
#mysch-schedule .sch-weekly-grid {
	flex: 1 1 auto;
	min-height: 0;
}
.mysch-employee-chip {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}
.mysch-controls,
.mysch-date-controls {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
}
.mysch-controls.active,
.mysch-date-controls.active {
	display: flex;
}
.mysch-date-controls .sch-date-bar-left,
.mysch-date-controls .sch-date-bar-center,
.mysch-date-controls .sch-date-bar-right {
	display: flex;
	align-items: center;
}
.mysch-date-controls .sch-date-bar-center {
	justify-content: center;
	flex: 1 1 auto;
}
.mysch-gutter-body {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
}
#mySchStatusMenu.open {
	display: block;
}
#section-my_schedule .settings-tab {
	font-weight: 600;
}
#section-my_schedule .settings-tabpane {
	min-height: 0;
}
#section-my_schedule .admin-card.mysch-card {
	border-radius: 14px;
}
#section-my_schedule .mysch-card-body,
#section-my_schedule .mysch-notification-list {
	padding: 1rem;
}
#section-my_schedule .sch-wk-day-name {
	font-weight: 700;
}
#section-my_schedule .sch-wk-day-col {
	min-width: 160px;
}
#section-my_schedule .sch-wk-card {
	cursor: default;
}
#section-my_schedule .sch-wk-card-name,
#section-my_schedule .sch-wk-card-time,
#section-my_schedule .sch-wk-card-role,
#section-my_schedule .sch-wk-card-break {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#section-my_schedule .sch-weekly-scroll {
	overflow: hidden;
}
#section-my_schedule .sch-wk-gutter {
	overflow: hidden;
}


/* ============================================================
   Notifications foundation (Sprint 5A)
   ============================================================ */
.admin-notify-wrap {
	position: relative;
}
.admin-notify-trigger {
	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 4px 10px 4px 8px;
	border: none;
	border-radius: 6px;
	background: var(--hfs-onbar-bg-tint-3);
	color: var(--hfs-onbar-text);
	cursor: pointer;
	transition: background 0.15s;
	flex-shrink: 0;
}
.admin-notify-trigger:hover,
.admin-notify-trigger.open {
	background: var(--hfs-onbar-bg-tint-4);
}
.admin-notify-trigger-icon {
	width: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.95rem;
}
.admin-notify-trigger-caret {
	font-size: 1.2rem;
	color: var(--hfs-onbar-text-muted);
	margin-left: 1px;
	line-height: 1;
}
.admin-notify-pill {
	position: absolute;
	top: -5px;
	right: -5px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--hfs-danger, #c64545);
	color: #fff;
	font-size: 0.6rem;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(0,0,0,0.14);
}

.admin-notify-pill.notify-badge-error {
	min-width: 18px;
	padding: 0 5px;
	background: #B91C1C;
}
.admin-notify-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 320px;
	max-width: calc(100vw - 1rem);
	display: none;
	background: #FDF5E6;
	background: var(--hfs-mega-bg, #FDF5E6);
	border: 1px solid var(--hfs-mega-border, #D7CCC8);
	border-radius: 0 0 10px 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.15);
	z-index: 1060;
	overflow: hidden;
}
.admin-notify-dropdown.open { display: block; }
.admin-notify-dropdown-header, .admin-notify-dropdown-footer { padding: 12px 14px; background: transparent; }
.admin-notify-dropdown-header { border-bottom: 1px solid var(--hfs-mega-border, #D7CCC8); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.admin-notify-dropdown-title { font-size: 0.875rem; font-weight: 600; color: var(--hfs-mega-text, #3A2C1A); }
.admin-notify-markall { border: 0; background: transparent; color: var(--hfs-primary); font-size: 0.72rem; font-weight: 700; padding: 0; }
.admin-notify-dropdown-list { max-height: 420px; overflow-y: auto; overflow-x: hidden; background: transparent; }
.admin-notify-item { width: 100%; display: block; text-align: left; border: 0; border-bottom: 1px solid var(--hfs-mega-border, #D7CCC8); background: transparent; padding: 10px 14px; overflow: hidden; }
.admin-notify-item:hover { background: rgba(0,0,0,0.03); }
.admin-notify-item.unread { background: rgba(124, 90, 46, 0.08); }
.admin-notify-item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.admin-notify-item-title { font-size: 0.8rem; font-weight: 700; color: var(--hfs-mega-text, #3A2C1A); flex: 1 1 180px; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.admin-notify-item-date { font-size: 0.68rem; color: var(--hfs-mega-text-muted, #8B6F47); flex: 0 1 auto; white-space: normal; text-align: right; }
.admin-notify-item-text { margin-top: 0.2rem; color: var(--hfs-mega-text, #3A2C1A); font-size: 0.76rem; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
.ntf-dropdown-item-title-wrap { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; flex: 1 1 180px; }
.ntf-dropdown-item-icon { font-size: 0.82rem; opacity: 0.85; flex: 0 0 auto; }
.ntf-dropdown-item-bottom { margin-top: 0.35rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; font-size: 0.68rem; color: var(--hfs-mega-text-muted, #8B6F47); }
.ntf-dropdown-item-type { font-weight: 700; }
.admin-notify-item.ntf-dropdown-item--action_required { border-left: 3px solid var(--hfs-warn, #B45309); }
.admin-notify-item.ntf-dropdown-item--warning { border-left: 3px solid var(--hfs-danger, #B91C1C); }
.admin-notify-item.ntf-dropdown-item--info { border-left: 3px solid var(--hfs-accent, #7C5A2E); }
.admin-notify-empty { padding: 1rem; text-align: center; color: var(--hfs-mega-text-muted, #8B6F47); font-size: 0.8rem; }

.ntf-shell { min-height: 0; }
.ntf-split { gap: 0; padding: 0; }
.ntf-summary-chip { display: inline-flex; align-items: center; gap: 0.45rem; height: var(--hfs-control-height); padding: 0 0.8rem; border: 1px solid var(--hfs-border); border-radius: 6px; background: var(--hfs-surface); color: var(--hfs-text); font-size: 0.78rem; font-weight: 600; }
.ntf-list-panel { width: 420px; }
.ntf-list-scroll { flex: 1; overflow-y: auto; }
.ntf-list-item { display: block; padding: 10px 12px; border-bottom: 1px solid var(--hfs-border); cursor: pointer; transition: background 0.12s; }
.ntf-list-item:hover { background: var(--hfs-surface-tint-2); }
.ntf-list-item.active { background: var(--hfs-bar); color: var(--hfs-bar-text); }
.ntf-list-item.unread { background: rgba(124, 90, 46, 0.08); }
.ntf-list-item.unread.active { background: var(--hfs-bar); }
.ntf-list-item--action_required { border-left: 3px solid var(--hfs-warn, #B45309); }
.ntf-list-item--warning { border-left: 3px solid var(--hfs-danger, #B91C1C); }
.ntf-list-item--info { border-left: 3px solid var(--hfs-accent, #7C5A2E); }
.ntf-list-item-top, .ntf-list-item-bottom, .ntf-detail-header-top, .ntf-detail-statusline { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; flex-wrap: wrap; }
.ntf-list-item-title { font-weight: 600; font-size: 0.78rem; color: inherit; }
.ntf-list-item-message { margin-top: 0.2rem; font-size: 0.72rem; line-height: 1.4; color: var(--hfs-muted); }
.ntf-list-item-bottom { margin-top: 0.4rem; font-size: 0.66rem; color: var(--hfs-muted); }
.ntf-list-item.active .ntf-list-item-message, .ntf-list-item.active .ntf-list-item-bottom, .ntf-list-item.active .ntf-severity-badge { color: var(--hfs-bar-text); }
.ntf-detail-panel { min-width: 0; }
.ntf-detail-content { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.ntf-detail-fields { display: flex; flex-direction: column; gap: 0.9rem; }
.ntf-detail-header { padding: 0; border: 0; background: transparent; }
.ntf-detail-title { margin: 0.45rem 0 0; color: var(--hfs-text); font-weight: 700; }
.ntf-detail-title { display: flex; align-items: center; gap: 0.55rem; }
.ntf-detail-title-icon { font-size: 1rem; opacity: 0.9; }
.ntf-detail-route-hint { margin-top: 0.3rem; font-size: 0.74rem; color: var(--hfs-muted); }
.ntf-detail-date { color: var(--hfs-muted); font-size: 0.78rem; }
.ntf-detail-meta { display: flex; flex-direction: column; gap: 0.55rem; padding-top: 0.1rem; }
.ntf-detail-meta-row { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 0.8rem; align-items: start; }
.ntf-detail-meta-label { color: var(--hfs-muted); font-size: 0.76rem; font-weight: 700; }
.ntf-detail-meta-value { color: var(--hfs-text); font-size: 0.8rem; min-width: 0; }
.ntf-detail-message-wrap { padding-top: 0.2rem; }
.ntf-detail-message { white-space: pre-wrap; color: var(--hfs-text); line-height: 1.6; font-size: 0.84rem; }

.ntf-list-item-title-wrap { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; }
.ntf-list-item-icon { font-size: 0.82rem; opacity: 0.85; }
.ntf-list-item-type { font-weight: 700; }
.ntf-detail-followup { padding: 0.9rem 1rem; border: 1px solid var(--hfs-border); border-radius: 10px; background: var(--hfs-surface-tint); }
.ntf-detail-followup-label { color: var(--hfs-muted); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.ntf-detail-followup-text { margin-top: 0.35rem; color: var(--hfs-text); font-size: 0.8rem; line-height: 1.5; }
.ntf-detail-context { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.6rem; margin-top: 0.85rem; }
.ntf-detail-context-card { border: 1px solid var(--hfs-border); border-radius: 10px; background: var(--hfs-surface); padding: 0.75rem 0.85rem; min-width: 0; }
.ntf-detail-context-label { color: var(--hfs-muted); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.ntf-detail-context-value { margin-top: 0.28rem; color: var(--hfs-text); font-size: 0.8rem; line-height: 1.45; word-break: break-word; }
.ntf-type-actions-empty { color: var(--hfs-muted); font-size: 0.76rem; }
.ntf-severity-badge, .ntf-state-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 22px; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.66rem; font-weight: 700; border: 1px solid var(--hfs-border); background: var(--hfs-surface-tint); color: var(--hfs-text); }
.ntf-severity-badge--info { background: rgba(40, 116, 240, 0.10); color: #285ec8; border-color: rgba(40, 116, 240, 0.18); }
.ntf-severity-badge--success { background: rgba(29, 143, 80, 0.10); color: #1d8f50; border-color: rgba(29, 143, 80, 0.18); }
.ntf-severity-badge--warning { background: rgba(206, 122, 39, 0.12); color: #b06220; border-color: rgba(206, 122, 39, 0.2); }
.ntf-severity-badge--action_required { background: rgba(198, 69, 69, 0.12); color: #b53b3b; border-color: rgba(198, 69, 69, 0.2); }
.ntf-state-chip--unread { background: rgba(124, 90, 46, 0.08); color: var(--hfs-primary); border-color: rgba(124, 90, 46, 0.15); }
.ntf-detail-statusline { justify-content: flex-start; }
.ntf-detail-statusline .ntf-state-chip { margin-right: 0.35rem; }

@media (max-width: 1024px) {
	.ntf-list-panel { width: 360px; }
}

@media (max-width: 640px) {
	.admin-notify-dropdown { right: 0.5rem; width: min(320px, calc(100vw - 0.75rem)); }
	.ntf-list-panel { width: 100%; }
}