/* ============================================
   HFS Admin — Base Styles
   ============================================ */

/* ============================================
   HFS Admin - Consolidated Stylesheet
   Generated from: style.css, admin.css, hfs-pos.css
   ============================================ */

/* ===== BEGIN style.css (v2.15.6) ===== */
/* ============================================
   Homestead Feed & Supply - Warm Premium Theme
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600&display=swap');



body {
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	background-color: var(--hfs-bg);
	color: var(--hfs-text);
}

a { color: var(--hfs-brown); }
a:hover { color: var(--hfs-brown-dark); }


/* ---- Navbar ---- */
.hfs-navbar {
	background: var(--hfs-brown-dark) !important;
	padding: 0.5rem 1rem;
}

.hfs-navbar .navbar-brand {
	display: flex;
	align-items: center;
	padding: 0;
}

.hfs-navbar .navbar-brand img {
	height: 44px;
	width: auto;
}

.hfs-search-bar {
	max-width: 560px;
	flex-grow: 1;
}

.hfs-search-bar .form-control {
	border: 2px solid var(--hfs-tan);
	border-right: none;
	border-radius: 8px 0 0 8px;
	background: var(--hfs-brown-mid);
	color: var(--hfs-bg-alt);
	font-size: 0.84rem;
}

.hfs-search-bar .form-control::placeholder { color: var(--hfs-sidebar-text-muted); }

.hfs-search-bar .form-control:focus {
	box-shadow: 0 0 0 0.15rem var(--hfs-focus-ring-neutral);
	border-color: var(--hfs-tan-light);
	background: var(--hfs-brown);
}

.hfs-search-bar .btn {
	background: var(--hfs-tan);
	border: 2px solid var(--hfs-tan);
	color: var(--hfs-brown-dark);
	border-radius: 0 8px 8px 0;
	font-weight: 700;
}

.hfs-search-bar .btn:hover {
	background: var(--hfs-tan-dark);
	border-color: var(--hfs-tan-dark);
}

.hfs-nav-link {
	color: var(--hfs-border-soft) !important;
	font-size: 0.84rem;
	padding: 0.3rem 0.8rem !important;
	transition: color 0.15s;
}

.hfs-nav-link:hover { color: var(--hfs-tan-light) !important; }

.hfs-nav-link .badge {
	background-color: var(--hfs-rust);
	font-size: 0.65rem;
}


/* ---- Category bar ---- */
.hfs-cat-bar {
	background: var(--hfs-brown-mid);
	border-bottom: 2px solid var(--hfs-tan);
	padding: 0;
	position: relative;
	z-index: 90;
}

.hfs-cat-bar .cat-all-btn {
	display: flex;
	align-items: center;
	gap: 6px;
	background: var(--hfs-sidebar-bg);
	color: var(--hfs-bg-alt);
	border: none;
	padding: 10px 18px;
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 0.82rem;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s;
	border-right: 1px solid var(--hfs-onbar-bg-tint-3);
}

.hfs-cat-bar .cat-all-btn:hover { background: var(--hfs-catbar-btn-hover-bg); }
.hfs-cat-bar .cat-all-btn i { font-size: 1rem; }

.hfs-cat-bar .cat-nav-links {
	display: flex;
	align-items: center;
	margin-left: auto;
}

.hfs-cat-bar .cat-nav-links a {
	color: var(--hfs-border-soft);
	text-decoration: none;
	font-size: 0.8rem;
	font-weight: 500;
	padding: 10px 16px;
	transition: all 0.15s;
	white-space: nowrap;
}

.hfs-cat-bar .cat-nav-links a:hover {
	color: var(--hfs-tan-light);
	background: var(--hfs-onbar-bg-tint-1);
}

/* All categories dropdown */
.hfs-cat-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--hfs-surface);
	border-radius: 0 0 10px 10px;
	box-shadow: 0 12px 40px var(--hfs-shadow-md);
	padding: 0.8rem 0;
	min-width: 280px;
	z-index: 200;
}

.hfs-cat-dropdown.open { display: block; }

.hfs-cat-dropdown .cat-group-label {
	padding: 6px 20px 4px;
	font-family: 'Outfit', sans-serif;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--hfs-brown-light);
}

.hfs-cat-dropdown .cat-group-label:not(:first-child) {
	margin-top: 6px;
	border-top: 1px solid var(--hfs-cream-dark);
	padding-top: 10px;
}

.hfs-cat-dropdown a {
	display: flex;
	align-items: center;
	padding: 6px 20px 6px 30px;
	color: var(--hfs-text);
	text-decoration: none;
	font-size: 0.84rem;
	font-weight: 500;
	transition: background 0.1s;
}

.hfs-cat-dropdown a:hover { background: var(--hfs-cream); }


/* ---- Hero ---- */
.hfs-hero {
	background: linear-gradient(135deg, var(--hfs-brown-dark) 0%, var(--hfs-green-dark) 100%);
	background-image: url("../images/banner/banner-cattle-01.jpg");
	background-size: cover;
	background-position: center;
	color: var(--hfs-bg-alt);
	padding: 3rem 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.hfs-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 0%, var(--hfs-hero-glow) 0%, transparent 60%);
}

.hfs-hero h1 {
	font-family: 'Outfit', sans-serif;
	font-size: 2.2rem;
	font-weight: 800;
	letter-spacing: -0.5px;
	position: relative;
}

.hfs-hero p {
	font-size: 1rem;
	opacity: 0.85;
	margin-top: 0.3rem;
	position: relative;
}

.hfs-hero .btn {
	background: var(--hfs-green-dark);
	color: var(--hfs-success-bg);
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	border: none;
	padding: 0.65rem 2.2rem;
	margin-top: 1rem;
	border-radius: 8px;
	position: relative;
}

.hfs-hero .btn:hover { background: var(--hfs-cta-hover-bg); color: var(--hfs-surface); }


/* ============================================
   PRODUCT CARDS
   ============================================ */

.hfs-product-card {
	border-radius: 14px;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
	background: var(--hfs-surface);
	border: none;
	height: 100%;
	box-shadow:
		0 1px 2px var(--hfs-shadow-brown-soft),
		0 4px 8px var(--hfs-shadow-brown-soft),
		0 8px 20px var(--hfs-shadow-brown),
		0 12px 28px var(--hfs-shadow-brown-faint);
}

.hfs-product-card:hover {
	transform: translateY(-5px);
	box-shadow:
		0 2px 4px var(--hfs-shadow-brown-soft),
		0 8px 16px var(--hfs-shadow-brown),
		0 16px 32px var(--hfs-shadow-brown-strong),
		0 24px 48px var(--hfs-shadow-brown-soft);
}

/* Image area */
.hfs-product-card .card-image-area {
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
	background: var(--hfs-cream-dark);
	flex-shrink: 0;
}

.hfs-product-card .card-image-area img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
	z-index: 1;
}

.hfs-product-card .card-image-area .product-icon {
	font-size: 3.5rem;
	color: var(--hfs-product-icon-muted);
	position: relative;
	z-index: 1;
}

/* Price tag -- hangs from top */
.hfs-product-card .price-tag {
	position: absolute;
	top: 0;
	right: 14px;
	background: var(--hfs-brown-dark);
	color: var(--hfs-bg-alt);
	font-family: 'Outfit', sans-serif;
	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 var(--hfs-surface-tint-10);
}

/* Info section -- category colored, rounded top */
.hfs-product-card .card-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	position: relative;
	border-radius: 14px 14px 0 0;
	margin-top: -14px;
	z-index: 3;
	padding: 14px 14px 14px;
}

.hfs-product-card .card-category {
	font-family: 'Outfit', sans-serif;
	font-size: 0.58rem;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 700;
	margin-bottom: 4px;
}

.hfs-product-card .card-product-name {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--hfs-bg-alt);
	line-height: 1.25;
	margin-bottom: 4px;
	min-height: 2.3em;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-decoration: none;
}

a.card-product-name:hover { color: var(--hfs-surface); text-decoration: none; }

.hfs-product-card .card-product-desc {
	font-size: 0.68rem;
	color: var(--hfs-text-subtle);
	line-height: 1.4;
	margin-bottom: 10px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 1.9em;
}

/* Detail rows */
.hfs-product-card .card-details {
	display: flex;
	flex-direction: column;
	margin-bottom: 12px;
}

.hfs-product-card .card-detail-row {
	display: flex;
	align-items: center;
	font-size: 0.68rem;
	padding: 5px 0;
	border-bottom: 1px solid var(--hfs-onbar-bg-tint-3);
}

.hfs-product-card .card-detail-row:first-child {
	border-top: 1px solid var(--hfs-onbar-bg-tint-3);
}

.hfs-product-card .card-detail-label {
	flex: 0 0 30%;
	text-align: right;
	padding-right: 10px;
	color: var(--hfs-text-subtle-2);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 1.2rem;
	letter-spacing: 0.5px;
}

.hfs-product-card .card-detail-divider {
	width: 1px;
	height: 14px;
	background: var(--hfs-onbar-border-15);
	flex-shrink: 0;
}

.hfs-product-card .card-detail-value {
	flex: 1;
	padding-left: 10px;
	color: var(--hfs-border-soft);
	font-weight: 500;
}

/* Collapsible details toggle */
.hfs-product-card .card-details-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-size: 0.6rem;
	color: var(--hfs-text-subtle-2);
	cursor: pointer;
	padding: 4px 0 2px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: color 0.2s;
}
.hfs-product-card .card-details-toggle:hover { color: var(--hfs-border-soft); }
.hfs-product-card .card-details-toggle i { font-size: 0.7rem; transition: transform 0.2s; }
.hfs-product-card .card-details-toggle.open i { transform: rotate(180deg); }

.hfs-product-card .card-details-collapsible {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.25s ease;
}
.hfs-product-card .card-details-collapsible.open {
	max-height: 200px;
}

.hfs-product-card .card-detail-value.in-stock { color: var(--hfs-stock-in); }
.hfs-product-card .card-detail-value.low-stock { color: var(--hfs-stock-low); }
.hfs-product-card .card-detail-value.out-of-stock { color: var(--hfs-danger-bg); }

/* Button -- forest green */
.hfs-product-card .card-btn-area { margin-top: auto; }

.hfs-product-card .card-add-btn {
	display: block;
	width: 100%;
	padding: 9px;
	border: none;
	border-radius: 8px;
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
	transition: all 0.15s ease;
	text-align: center;
	background: var(--hfs-green-dark);
	color: var(--hfs-success-bg);
}

.hfs-product-card .card-add-btn:hover {
	background: var(--hfs-cta-hover-bg);
	transform: translateY(-1px);
}

.hfs-product-card .card-add-btn:disabled {
	background: var(--hfs-panel-dark-bg);
	color: var(--hfs-panel-dark-text);
	cursor: not-allowed;
	transform: none;
}


/* ---- 6 High-Level Category Colors ---- */
.cat-feed-nutrition .card-info { background: linear-gradient(170deg, var(--hfs-brown-deep) 0%, var(--hfs-brown-deep) 100%); }
.cat-feed-nutrition .card-category { color: var(--hfs-accent-orange-light); }

.cat-pet-animal .card-info { background: linear-gradient(170deg, var(--hfs-cat-pet-grad-start) 0%, var(--hfs-cat-pet-grad-end) 100%); }
.cat-pet-animal .card-category { color: var(--hfs-cat-pet-accent); }

.cat-health-wellness .card-info { background: linear-gradient(170deg, var(--hfs-cat-health-grad-start) 0%, var(--hfs-cat-health-grad-end) 100%); }
.cat-health-wellness .card-category { color: var(--hfs-cat-health-accent); }

.cat-farm-ranch .card-info { background: linear-gradient(170deg, var(--hfs-cat-farm-grad-start) 0%, var(--hfs-cat-farm-grad-end) 100%); }
.cat-farm-ranch .card-category { color: var(--hfs-cat-farm-accent); }

.cat-garden-floral .card-info { background: linear-gradient(170deg, var(--hfs-cat-garden-grad-start) 0%, var(--hfs-cat-garden-grad-end) 100%); }
.cat-garden-floral .card-category { color: var(--hfs-cat-garden-accent); }

.cat-apparel-footwear .card-info { background: linear-gradient(170deg, var(--hfs-cat-apparel-grad-start) 0%, var(--hfs-cat-apparel-grad-end) 100%); }
.cat-apparel-footwear .card-category { color: var(--hfs-cat-apparel-accent); }

.cat-default .card-info { background: linear-gradient(170deg, var(--hfs-brown-deep) 0%, var(--hfs-brown-deep) 100%); }
.cat-default .card-category { color: var(--hfs-tan); }


/* ---- Category sidebar ---- */
.hfs-sidebar {
	background: var(--hfs-surface);
	border: 1px solid var(--hfs-border);
	border-radius: 10px;
	padding: 1rem;
}

.hfs-sidebar h5 {
	font-family: 'Outfit', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: var(--hfs-brown-dark);
	border-bottom: 2px solid var(--hfs-tan);
	padding-bottom: 0.5rem;
	margin-bottom: 0.8rem;
}

.hfs-sidebar .list-group-item {
	border: none;
	padding: 0.4rem 0.6rem;
	font-size: 0.85rem;
	color: var(--hfs-text);
	cursor: pointer;
	border-radius: 6px;
	background: transparent;
}

.hfs-sidebar .list-group-item:hover,
.hfs-sidebar .list-group-item.active {
	background: var(--hfs-cream);
	color: var(--hfs-brown-dark);
	font-weight: 600;
}


/* ---- Product detail ---- */
.hfs-product-detail .product-title {
	font-family: 'Outfit', sans-serif;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--hfs-brown-dark);
}

.hfs-product-detail .product-price-large {
	font-family: 'Outfit', sans-serif;
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--hfs-green-dark);
}

.hfs-product-detail .stock-status { font-size: 0.9rem; font-weight: 600; }
.hfs-product-detail .stock-status.in-stock { color: var(--hfs-green); }
.hfs-product-detail .stock-status.low-stock { color: var(--hfs-stock-low-strong); }
.hfs-product-detail .stock-status.out-of-stock { color: var(--hfs-rust); }

.hfs-product-detail .btn-add-cart-lg {
	background: var(--hfs-green-dark);
	color: var(--hfs-success-bg);
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 1rem;
	padding: 0.7rem 2.5rem;
	border: none;
	border-radius: 8px;
}

.hfs-product-detail .btn-add-cart-lg:hover { background: var(--hfs-cta-hover-bg); color: var(--hfs-surface); }

.hfs-product-detail .detail-info-box {
	background: var(--hfs-cream);
	border-radius: 8px;
	font-size: 0.88rem;
	padding: 1rem 1.2rem;
	margin-top: 1.5rem;
}

.hfs-product-detail .detail-image-wrap {
	background: var(--hfs-cream-dark);
	border-radius: 10px;
	padding: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}


/* ---- Cart flyout ---- */
.hfs-cart-flyout {
	position: fixed;
	top: 0;
	right: -420px;
	width: 400px;
	height: 100vh;
	background: var(--hfs-surface);
	box-shadow: -4px 0 30px var(--hfs-shadow-sm);
	z-index: 1050;
	transition: right 0.3s ease;
	display: flex;
	flex-direction: column;
}

.hfs-cart-flyout.open { right: 0; }

.hfs-cart-overlay {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: var(--hfs-surface-tint-20);
	z-index: 1049;
	display: none;
}

.hfs-cart-overlay.open { display: block; }

.hfs-cart-flyout .cart-header {
	background: var(--hfs-brown-dark);
	color: var(--hfs-bg-alt);
	padding: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.hfs-cart-flyout .cart-items {
	flex: 1;
	overflow-y: auto;
	padding: 1rem;
}

.hfs-cart-flyout .cart-footer {
	border-top: 2px solid var(--hfs-border);
	padding: 1rem;
	background: var(--hfs-cream);
}

.hfs-cart-flyout .cart-item {
	display: flex;
	gap: 0.8rem;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--hfs-border);
}

.hfs-cart-flyout .cart-item img {
	width: 60px;
	height: 60px;
	object-fit: contain;
	background: var(--hfs-cream-dark);
	border-radius: 6px;
}

.hfs-cart-flyout .btn-checkout {
	background: var(--hfs-green-dark);
	color: var(--hfs-success-bg);
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	width: 100%;
	padding: 0.7rem;
	border: none;
	border-radius: 8px;
	font-size: 1rem;
}

.hfs-cart-flyout .btn-checkout:hover { background: var(--hfs-cta-hover-bg); color: var(--hfs-surface); }


/* ---- Checkout ---- */
.hfs-checkout .form-label {
	font-weight: 600;
	font-size: 0.88rem;
	color: var(--hfs-text-light);
}

.hfs-checkout .order-summary {
	background: var(--hfs-surface);
	border: 1px solid var(--hfs-border);
	border-radius: 10px;
	padding: 1.2rem;
}

.hfs-checkout .btn-place-order {
	background: var(--hfs-green-dark);
	color: var(--hfs-success-bg);
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	width: 100%;
	padding: 0.8rem;
	border: none;
	font-size: 1.1rem;
	border-radius: 8px;
}

.hfs-checkout .btn-place-order:hover { background: var(--hfs-cta-hover-bg); color: var(--hfs-surface); }


/* ---- Account pages ---- */
.hfs-account-card {
	background: var(--hfs-surface);
	border: 1px solid var(--hfs-border);
	border-radius: 10px;
	padding: 2rem;
	max-width: 450px;
	margin: 2rem auto;
}

.hfs-account-card h3 {
	font-family: 'Outfit', sans-serif;
	color: var(--hfs-brown-dark);
	font-weight: 700;
	margin-bottom: 1.5rem;
}

.hfs-account-card .btn-primary {
	background: var(--hfs-green-dark);
	border-color: var(--hfs-green-dark);
	color: var(--hfs-success-bg);
	font-weight: 700;
}

.hfs-account-card .btn-primary:hover {
	background: var(--hfs-cta-hover-bg);
	border-color: var(--hfs-cta-hover-bg);
}


/* ---- Section headers ---- */
.hfs-section-title {
	font-family: 'Outfit', sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--hfs-brown-dark);
	border-left: 4px solid var(--hfs-tan);
	padding-left: 0.8rem;
	margin: 1.5rem 0 1rem;
}


/* ---- Footer ---- */
.hfs-footer {
	background: var(--hfs-brown-dark);
	color: var(--hfs-border-soft);
	padding: 2.5rem 0;
	margin-top: 3rem;
}

.hfs-footer h6 {
	font-family: 'Outfit', sans-serif;
	color: var(--hfs-tan);
	font-weight: 700;
	margin-bottom: 0.8rem;
}

.hfs-footer a {
	color: var(--hfs-border-soft);
	text-decoration: none;
	font-size: 0.88rem;
}

.hfs-footer a:hover { color: var(--hfs-tan-light); }

.hfs-footer .footer-bottom {
	border-top: 1px solid var(--hfs-brown);
	padding-top: 1rem;
	margin-top: 1.5rem;
	text-align: center;
	font-size: 0.82rem;
	color: var(--hfs-brown-light);
}

.footer-staff-link {
	color: var(--hfs-brown);
	text-decoration: none;
	margin-left: 1.5rem;
	font-size: 0.72rem;
	opacity: 0.5;
	transition: opacity 0.2s;
}
.footer-staff-link:hover { opacity: 1; color: var(--hfs-brown-light); }


/* ---- Utilities ---- */
.hfs-breadcrumb {
	font-size: 0.82rem;
	background: none;
	padding: 0.8rem 0 0.3rem;
}

.hfs-breadcrumb a { color: var(--hfs-text-light); }
.hfs-breadcrumb a:hover { color: var(--hfs-brown-dark); }

.hfs-badge-category {
	background-color: var(--hfs-green);
	font-size: 0.7rem;
}

.loading-spinner {
	text-align: center;
	padding: 3rem;
	color: var(--hfs-text-muted);
}

.loading-spinner .spinner-border {
	color: var(--hfs-tan);
}


/* ---- Pagination ---- */
.hfs-pagination .page-link {
	color: var(--hfs-brown);
}

.hfs-pagination .page-item.active .page-link {
	background-color: var(--hfs-green-dark);
	border-color: var(--hfs-green-dark);
	color: var(--hfs-surface);
}


/* ============================================
   SHARED FLYOUT OVERLAY
   ============================================ */

.hfs-flyout-overlay {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: var(--hfs-surface-tint-25);
	z-index: 1049;
	display: none;
}

.hfs-flyout-overlay.open { display: block; }


/* ============================================
   CATEGORIES FLYOUT (left side)
   ============================================ */

.hfs-cat-flyout {
	position: fixed;
	top: 0;
	left: -340px;
	width: 320px;
	height: 100vh;
	background: var(--hfs-surface);
	box-shadow: 4px 0 30px var(--hfs-shadow-sm);
	z-index: 1050;
	transition: left 0.3s ease;
	display: flex;
	flex-direction: column;
}

.hfs-cat-flyout.open { left: 0; }

.cat-flyout-header {
	background: var(--hfs-brown-dark);
	color: var(--hfs-bg-alt);
	padding: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-shrink: 0;
}

.cat-flyout-header h5 {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
}

.cat-flyout-body {
	flex: 1;
	overflow-y: auto;
	padding: 0.5rem 0;
}

.cat-flyout-group {
	font-family: 'Outfit', sans-serif;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--hfs-brown-light);
	padding: 12px 20px 4px;
}

.cat-flyout-group:not(:first-child) {
	margin-top: 4px;
	border-top: 1px solid var(--hfs-border);
	padding-top: 12px;
}

.cat-flyout-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 20px 8px 28px;
	color: var(--hfs-text);
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 500;
	transition: background 0.1s;
}

.cat-flyout-item:hover {
	background: var(--hfs-cream);
	color: var(--hfs-brown-dark);
}

.cat-flyout-count {
	font-size: 0.72rem;
	color: var(--hfs-text-muted);
	background: var(--hfs-cream-dark);
	padding: 1px 8px;
	border-radius: 10px;
}


/* ============================================
   MEGA MENU
   ============================================ */

.hfs-mega-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--hfs-surface);
	box-shadow: 0 8px 30px var(--hfs-border-subtle);
	z-index: 89;
	display: none;
	border-bottom: 2px solid var(--hfs-tan);
}

.hfs-mega-menu.open { display: block; }

.mega-menu-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 1.5rem 2rem;
}

.mega-menu-title {
	font-family: 'Outfit', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: var(--hfs-brown-dark);
	margin-bottom: 0.8rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--hfs-tan);
}

.mega-menu-links {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 4px 2rem;
}

.mega-menu-links a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	color: var(--hfs-text);
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 500;
	border-radius: 6px;
	transition: background 0.1s;
}

.mega-menu-links a:hover {
	background: var(--hfs-cream);
	color: var(--hfs-brown-dark);
}

.mega-menu-links a i { font-size: 0.7rem; color: var(--hfs-tan); }

.mega-menu-count {
	margin-left: auto;
	font-size: 0.72rem;
	color: var(--hfs-text-muted);
}

.mega-menu-footer {
	margin-top: 1rem;
	padding-top: 0.8rem;
	border-top: 1px solid var(--hfs-border);
}

.mega-menu-footer a {
	color: var(--hfs-green-dark);
	text-decoration: none;
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 0.88rem;
}

.mega-menu-footer a:hover { color: var(--hfs-cta-hover-bg); }

/* Active state for cat bar links */
.cat-nav-links a.active {
	color: var(--hfs-tan-light) !important;
	background: var(--hfs-sidebar-hover-bg);
}


/* ============================================
   PRODUCTS PAGE LAYOUT
   ============================================ */

.hfs-products-page {
	width: 100%;
}

.products-layout {
	display: flex;
	max-width: 100%;
}

/* Filter sidebar */
.filter-sidebar {
	width: 260px;
	flex-shrink: 0;
	background: var(--hfs-surface);
	border-right: 1px solid var(--hfs-border);
	position: sticky;
	top: 0;
	align-self: flex-start;
	height: 100vh;
	display: flex;
	flex-direction: column;
	transition: width 0.25s ease, min-width 0.25s ease;
	overflow: hidden;
}

/* Collapsed state on desktop */
.filter-sidebar.collapsed {
	width: 0;
	min-width: 0;
	border-right: none;
}

/* Sidebar toggle button (visible on desktop, floats on edge) */
.filter-sidebar-toggle {
	position: sticky;
	top: 50%;
	align-self: flex-start;
	z-index: 10;
	width: 24px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hfs-cream-dark);
	border: 1px solid var(--hfs-border);
	border-left: none;
	border-radius: 0 8px 8px 0;
	cursor: pointer;
	color: var(--hfs-text);
	font-size: 0.75rem;
	transition: all 0.15s;
	flex-shrink: 0;
	margin-left: -1px;
}
.filter-sidebar-toggle:hover {
	background: var(--hfs-green-dark);
	color: var(--hfs-surface);
	border-color: var(--hfs-green-dark);
}
.filter-sidebar-toggle i { transition: transform 0.25s; }
.filter-sidebar-toggle.collapsed i { transform: rotate(180deg); }

.filter-sidebar-body {
	padding: 1rem;
	overflow-y: auto;
	flex: 1;
}

.filter-section {
	margin-bottom: 1.2rem;
}

.filter-title {
	font-family: 'Outfit', sans-serif;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--hfs-brown-dark);
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--hfs-border);
	margin-bottom: 0.6rem;
}

.filter-title i { font-size: 0.7rem; transition: transform 0.2s; }
.filter-title[aria-expanded="false"] i { transform: rotate(-90deg); }

.filter-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 300px;
	overflow-y: auto;
}

.filter-checkbox {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.82rem;
	padding: 3px 4px;
	border-radius: 4px;
	cursor: pointer;
	color: var(--hfs-text);
}

.filter-checkbox:hover { background: var(--hfs-cream); }

.filter-checkbox input { accent-color: var(--hfs-green-dark); }

.filter-count {
	color: var(--hfs-text-muted);
	font-size: 0.72rem;
	margin-left: auto;
}

/* Hierarchical category groups in filter */
.filter-cat-group-label {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--hfs-brown-dark);
	padding: 6px 4px 3px;
	margin-top: 4px;
}
.filter-cat-group-label:first-child { margin-top: 0; }

.filter-cat-sub {
	padding-left: 14px;
}

/* Apply filters button in toolbar */
.filter-apply-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 30px;
	padding: 0 12px;
	border: none;
	border-radius: 6px;
	background: var(--hfs-green-dark);
	color: var(--hfs-success-bg);
	cursor: pointer;
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 0.75rem;
	transition: all 0.15s;
	white-space: nowrap;
}
.filter-apply-btn:hover { background: var(--hfs-cta-hover-bg); }
.filter-apply-btn.has-changes {
	animation: filter-pulse 0.5s ease;
}
@keyframes filter-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}

/* Dirty indicator when filters changed but not applied */
.filter-dirty-dot {
	display: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--hfs-rust);
	flex-shrink: 0;
}
.filter-apply-btn.dirty .filter-dirty-dot { display: inline-block; }

/* Filter sidebar footer (always visible, both desktop and mobile) */
.filter-sidebar-footer {
	padding: 8px 10px;
	border-top: 1px solid var(--hfs-border);
	background: var(--hfs-cream);
}

.price-range-inputs .input-group-text {
	background: var(--hfs-cream-dark);
	border-color: var(--hfs-border);
	font-size: 0.8rem;
}

.price-range-inputs .form-control {
	font-size: 0.8rem;
}

/* Price slider */
.price-slider-wrap {
	padding: 0.3rem 0;
}

.price-slider-labels {
	display: flex;
	justify-content: space-between;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--hfs-text);
	margin-bottom: 4px;
}

.price-slider-track {
	position: relative;
	height: 28px;
	display: flex;
	align-items: center;
}

.price-slider-range {
	position: absolute;
	height: 4px;
	background: var(--hfs-green-dark);
	border-radius: 2px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
}

.price-slider-input {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	width: 100%;
	height: 4px;
	background: transparent;
	pointer-events: none;
	z-index: 2;
	margin: 0;
	top: 50%;
	transform: translateY(-50%);
}

.price-slider-input::-webkit-slider-track {
	-webkit-appearance: none;
	height: 4px;
	background: var(--hfs-border);
	border-radius: 2px;
}

.price-slider-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--hfs-green-dark);
	border: 2px solid var(--hfs-surface);
	box-shadow: 0 1px 4px var(--hfs-surface-tint-10);
	cursor: pointer;
	pointer-events: auto;
	margin-top: -7px;
}

.price-slider-input::-moz-range-track {
	height: 4px;
	background: transparent;
	border: none;
}

.price-slider-input::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--hfs-green-dark);
	border: 2px solid var(--hfs-surface);
	box-shadow: 0 1px 4px var(--hfs-surface-tint-10);
	cursor: pointer;
	pointer-events: auto;
}

.price-preset-checks {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

/* Filter toolbar (sticky at top of sidebar) */
.filter-toolbar {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 8px 10px;
	background: var(--hfs-cream-dark);
	border-bottom: 1px solid var(--hfs-border);
	position: sticky;
	top: 0;
	z-index: 5;
}

.filter-tb-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--hfs-border);
	border-radius: 6px;
	background: var(--hfs-surface);
	color: var(--hfs-text);
	cursor: pointer;
	font-size: 0.82rem;
	transition: all 0.15s;
}

.filter-tb-btn:hover:not(:disabled) {
	background: var(--hfs-green-dark);
	color: var(--hfs-surface);
	border-color: var(--hfs-green-dark);
}

.filter-tb-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.filter-tb-label {
	font-size: 0.65rem;
	color: var(--hfs-text-muted);
	margin-left: auto;
	font-weight: 600;
}

/* Mobile filter footer - now handled by .filter-sidebar-footer */

/* Products main area */
.products-main {
	flex: 1;
	min-width: 0;
	padding: 1rem 1.5rem;
}

.products-toolbar {
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
}

/* Active filter tags */
.active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 1rem;
}

.active-filter-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--hfs-cream);
	border: 1px solid var(--hfs-border);
	border-radius: 20px;
	padding: 3px 10px;
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--hfs-text);
}

.active-filter-tag i {
	cursor: pointer;
	font-size: 0.7rem;
	color: var(--hfs-rust);
}

.active-filter-tag i:hover { color: var(--hfs-danger-strong); }

/* Mobile filter bar */
.filter-toggle-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: var(--hfs-surface);
	border-bottom: 1px solid var(--hfs-border);
}

.btn-filter-toggle {
	background: var(--hfs-cream);
	border: 1px solid var(--hfs-border);
	border-radius: 8px;
	padding: 6px 14px;
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 0.8rem;
	cursor: pointer;
	color: var(--hfs-text);
}

.result-count-mobile {
	font-size: 0.78rem;
	color: var(--hfs-text-muted);
	flex: 1;
}

.sort-select-mobile {
	font-size: 0.78rem;
	border: 1px solid var(--hfs-border);
	border-radius: 6px;
	padding: 4px 8px;
	background: var(--hfs-surface);
}

/* Filter sidebar mobile overlay */
.filter-overlay {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: var(--hfs-surface-tint-20);
	z-index: 1040;
	display: none;
}

.filter-overlay.open { display: block; }

.filter-sidebar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem;
	border-bottom: 1px solid var(--hfs-border);
	background: var(--hfs-brown-dark);
	color: var(--hfs-bg-alt);
}

.filter-sidebar-header h5 {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
}


/* ---- Responsive ---- */
@media (max-width: 991px) {
	/* Filter sidebar becomes mobile drawer */
	.filter-sidebar {
		position: fixed;
		top: 0;
		left: -320px;
		width: 300px;
		height: 100vh;
		z-index: 1045;
		transition: left 0.3s ease;
		border-right: none;
		box-shadow: 4px 0 20px var(--hfs-shadow-sm);
	}

	.filter-sidebar.open { left: 0; }

	.products-main { padding: 0.8rem; }
}

@media (max-width: 768px) {
	.hfs-cart-flyout {
		width: 100%;
		right: -100%;
	}

	.hfs-cat-flyout {
		width: 100%;
		left: -100%;
	}

	.hfs-hero h1 { font-size: 1.5rem; }

	.hfs-product-card .card-image-area { height: 160px; }

	.mega-menu-links { grid-template-columns: 1fr 1fr; }
}

/* In-store only mode - no longer hides cart/buttons since checkout is available */
/* ===== END style.css ===== */

/* ===== BEGIN admin.css (v2.15.6) ===== */
/* ============================================
   HFS Admin Panel Styles
   ============================================ */

.admin-wrapper {
	display: flex;
	min-height: 100vh;
}

.modal-content {
	resize: both;
	overflow: auto;
	color: var(--hfs-accent-orange);
	background: linear-gradient(180deg, var(--hfs-brown-dark) 0%, var(--hfs-brown-mid) 100%);
}

.modal-content .modal-header {
	color: var(--hfs-accent-orange);
	background: linear-gradient(180deg, var(--hfs-brown-dark) 0%, var(--hfs-brown-mid) 100%);
	border-bottom: 1px solid var(--hfs-brown-light)
}

.modal-content input {
	color: var(--hfs-bg-alt);
	border: 1px solid var(--hfs-brown-light);
	background: linear-gradient(180deg, var(--hfs-brown-dark) 0%, var(--hfs-brown-mid) 100%);
}

.modal-content input::placeholder {
	color: var(--hfs-cream-overlay);
}

.modal-content input:focus {
	color: var(--hfs-brand-accent);
	border: 1px solid var(--hfs-brown-light);
	background: linear-gradient(180deg, var(--hfs-brown-dark) 0%, var(--hfs-brown-mid) 100%);
}

.modal-content select {
	color: var(--hfs-bg-alt);
	border: 1px solid var(--hfs-brown-light);
	background: linear-gradient(180deg, var(--hfs-brown-dark) 0%, var(--hfs-brown-mid) 100%);
}

.modal-content select::placeholder {
	color: var(--hfs-cream-overlay);
}

.modal-content select:focus {
	color: var(--hfs-brand-accent);
	border: 1px solid var(--hfs-brown-light);
	background: linear-gradient(180deg, var(--hfs-brown-dark) 0%, var(--hfs-brown-mid) 100%);
}

.modal-content .modal-footer {
	color: var(--hfs-accent-orange);
	border-top: 1px solid var(--hfs-brown-light);
}

.modal-content .modal-footer .btn-save {
	color: var(--hfs-surface);
	border: none;
	font-size: 0.85rem;
	font-weight: 600;
	background-color: var(--hfs-green);
}

.modal-content .modal-footer .btn-cancel {
	color: var(--hfs-surface);
	border: none;
	font-size: 0.85rem;
	font-weight: 600;
	background-color: var(--hfs-danger);
}

/* Topbar brand (logo + text, moved from sidebar) */
.topbar-brand {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}
.topbar-brand-logo {
	height: 22px;
	width: auto;
}
.topbar-brand-text {
	font-weight: 600;
	font-size: 0.82rem;
	white-space: nowrap;
	color: var(--hfs-brand-strip-text, #FEBD69);
	letter-spacing: 0.5px;
}
/* Brand text color driven by logo variant set by applyLogoForTheme() */
.topbar-brand.logo-gold .topbar-brand-text  { color: #FEBD69; }
.topbar-brand.logo-white .topbar-brand-text { color: #FFFFFF; }
.topbar-brand.logo-black .topbar-brand-text { color: #1A1A1A; }

/* ---- Main content ---- */
.admin-main {
	flex: 1;
	background: var(--hfs-bg);
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: hidden;
	position: relative;
}

.admin-topbar {
	background: var(--hfs-bar);
	border-bottom: 1px solid var(--hfs-onbar-bg-tint-4);
	padding: 0 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	top: 0;
	z-index: 1030;
	height: var(--hfs-topbar-height, 42px);
	box-sizing: border-box;
}

.topbar-auth-wrap,
#navAuth {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	flex-shrink: 0;
	margin-left: auto;
}

/* ---- Megamenu grid trigger ---- */
.admin-megamenu-trigger {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	border: none;
	background: var(--hfs-onbar-bg-tint-3);
	color: var(--hfs-onbar-text);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s;
	flex-shrink: 0;
}
.admin-megamenu-trigger:hover,
.admin-megamenu-trigger.active {
	background: var(--hfs-onbar-bg-tint-4);
}

/* ---- Topbar direct link buttons (Dashboard, etc.) ---- */
.admin-topbar-btn {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	border: none;
	background: var(--hfs-onbar-bg-tint-3);
	color: var(--hfs-onbar-text);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s;
	flex-shrink: 0;
}
.admin-topbar-btn:hover {
	background: var(--hfs-onbar-bg-tint-4);
}

/* ---- Help trigger ---- */
.admin-help-trigger {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	border: none;
	background: var(--hfs-onbar-bg-tint-3);
	color: var(--hfs-onbar-text);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s;
	flex-shrink: 0;
}
.admin-help-trigger:hover {
	background: var(--hfs-onbar-bg-tint-4);
}

/* ---- User chip ---- */
.admin-user-chip {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px 4px 6px;
	border-radius: 6px;
	background: var(--hfs-onbar-bg-tint-3);
	cursor: pointer;
	transition: background 0.15s;
	position: relative;
	flex-shrink: 0;
}
.admin-user-chip:hover { background: var(--hfs-onbar-bg-tint-4); }
.admin-user-chip-avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--hfs-onbar-bg-tint-4);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	color: var(--hfs-onbar-text);
}
.admin-user-chip-name {
	font-size: 0.75rem;
	color: var(--hfs-onbar-text);
	font-weight: 500;
}
.admin-user-chip-caret {
	font-size: 1.2rem;
	color: var(--hfs-onbar-text-muted);
	margin-left: 2px;
}

/* ---- User dropdown ---- */
.admin-user-dropdown {
	display: none;
	position: fixed;
	top: var(--hfs-topbar-height, 42px);
	right: 8px;
	width: 220px;
	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-user-dropdown.open { display: block; }
.admin-user-dd-header {
	padding: 14px 16px 12px;
	border-bottom: 1px solid var(--hfs-mega-border, #D7CCC8);
}
.admin-user-dd-name {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--hfs-mega-text, #3A2C1A);
}
.admin-user-dd-role {
	font-size: 0.68rem;
	color: var(--hfs-mega-text-muted, #8B6F47);
	margin-top: 2px;
	letter-spacing: 0.3px;
}
.admin-user-dd-items { padding: 6px 0; }
.admin-user-dd-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px;
	font-size: 0.8rem;
	color: var(--hfs-mega-text, #3A2C1A);
	cursor: pointer;
	transition: background 0.1s;
	text-decoration: none;
}
.admin-user-dd-item:hover { background: var(--hfs-mega-hover, #ece0d0); }
.admin-user-dd-item i {
	font-size: 0.9rem;
	color: var(--hfs-mega-text-muted, #8B6F47);
	width: 16px;
	text-align: center;
}
.admin-user-dd-divider {
	height: 1px;
	background: var(--hfs-mega-border, #D7CCC8);
	margin: 4px 0;
}

/* ---- Admin megamenu panel ---- */
.admin-megamenu {
	display: none;
	position: fixed;
	top: var(--hfs-topbar-height, 42px);
	left: 0;
	right: 0;
	z-index: 1040;
	box-shadow: 0 12px 40px rgba(0,0,0,0.18);
}
.admin-megamenu.open { display: block; }
.admin-megamenu-inner {
	position: relative;
	background: #FDF5E6;
	background: var(--hfs-mega-bg, #FDF5E6);
	border: 1px solid var(--hfs-border);
	border-top: 2px solid var(--hfs-bar, #4A3728);
}

.admin-megamenu-close {
	position: absolute;
	top: 8px;
	right: 12px;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	border: none;
	background: transparent;
	color: var(--hfs-mega-text-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
	z-index: 2;
}
.admin-megamenu-close:hover { background: var(--hfs-mega-hover, #ece0d0); }

.admin-megamenu-tabs {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--hfs-mega-border, #D7CCC8);
	padding: 0 20px;
	background: #eee5d8;
	background: var(--hfs-mega-tab-bg, #eee5d8);
}
.admin-megamenu-tab {
	padding: 10px 16px 9px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--hfs-mega-text-muted, #8B6F47);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color 0.15s, border-color 0.15s;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	white-space: nowrap;
}
.admin-megamenu-tab:hover { color: var(--hfs-mega-text, #3A2C1A); }
.admin-megamenu-tab.active {
	color: var(--hfs-mega-text, #3A2C1A);
	border-bottom-color: var(--hfs-bar, #4A3728);
}
/* Home tab — direct navigation, not a panel switcher */
.admin-megamenu-tab--home {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-right: 6px;
	padding-right: 16px;
	border-right: 1px solid var(--hfs-mega-border, rgba(0,0,0,0.08));
}

.admin-megamenu-panel {
	display: none;
	padding: 20px 24px 18px;
	background: #FDF5E6;
	background: var(--hfs-mega-bg, #FDF5E6);
}
.admin-megamenu-panel.active { display: block; }

.admin-megamenu-groups {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 20px 32px;
}

.admin-megamenu-group-title {
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--hfs-mega-text-muted, #8B6F47);
	margin-bottom: 10px;
	padding-bottom: 6px;
	border-bottom: 1.5px solid var(--hfs-mega-group-border, #d4c4a8);
}

.admin-megamenu-group-items {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.admin-megamenu-item {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 10px;
	border-radius: 7px;
	cursor: pointer;
	transition: background 0.12s;
	text-decoration: none;
}
.admin-megamenu-item:hover { background: var(--hfs-mega-hover, #ece0d0); }
.admin-megamenu-item.coming-soon .admin-megamenu-item-icon,
.admin-megamenu-item.coming-soon .admin-megamenu-item-label,
.admin-megamenu-item.coming-soon .admin-megamenu-item-desc {
	color: var(--hfs-mega-text-muted, #8B6F47);
}
.admin-megamenu-item.coming-soon:hover { background: var(--hfs-mega-hover, #ece0d0); }

.admin-megamenu-item-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--hfs-mega-text, #3A2C1A);
	font-size: 0.875rem;
}

.admin-megamenu-item-label {
	font-size: 0.8rem;
	font-weight: 500;
	color: var(--hfs-mega-text, #3A2C1A);
}
.admin-megamenu-item-desc {
	font-size: 0.68rem;
	color: var(--hfs-mega-text-muted, #8B6F47);
	margin-top: 1px;
}
.admin-megamenu-item-badge {
	font-size: 0.56rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--hfs-mega-text-muted, #8B6F47);
	background: var(--hfs-mega-tab-bg, #eee5d8);
	padding: 1px 6px;
	border-radius: 4px;
	margin-left: 6px;
}

.admin-megamenu-footer {
	padding: 8px 24px;
	background: #f5ede0;
	background: var(--hfs-mega-footer-bg, #f5ede0);
	border-top: 1px solid var(--hfs-mega-group-border, #d4c4a8);
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.68rem;
	color: var(--hfs-mega-text-muted);
	min-height: 32px;
}
.admin-megamenu-footer i { opacity: 0.5; font-size: 0.75rem; }
.admin-megamenu-footer.notify {
	color: var(--hfs-rust);
	font-weight: 600;
}
.admin-megamenu-footer.notify i { opacity: 1; }

.admin-main > .admin-content {
	box-sizing: border-box;
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
}

.admin-content > .admin-section {
	max-width: 100%;
	padding: 1.5rem;
	padding-bottom: 2rem;
	box-sizing: border-box;
}

/* POS section fills remaining height below topbar, no padding */
.admin-content .hfs-pos-fullscreen {
	padding: 0 !important;
	height: calc(100vh - 42px);
	overflow: hidden;
	box-sizing: border-box;
}

.hfs-pos-fullscreen .hfs-pos-shell {
	height: 100% !important;
}

/* ---- Dashboard heading ---- */
.dash-heading {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.dash-heading-title {
	margin: 0;
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--hfs-text);
}
.dash-heading-sub {
	font-size: 0.8rem;
	color: var(--hfs-text-muted);
	font-weight: 400;
}

/* ---- Dashboard cards ---- */
.admin-stat-card {
	background: var(--hfs-surface);
	border: 1px solid var(--hfs-border);
	border-radius: 8px;
	padding: 1.2rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.admin-stat-card .stat-icon {
	width: 50px;
	height: 50px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	color: var(--hfs-surface);
}

.admin-stat-card .stat-icon.bg-products { background: var(--hfs-green); }
.admin-stat-card .stat-icon.bg-categories { background: var(--hfs-brown); }
.admin-stat-card .stat-icon.bg-customers { background: var(--hfs-stat-customers-bg); }
.admin-stat-card .stat-icon.bg-orders { background: var(--hfs-rust); }
.admin-stat-card .stat-icon.bg-inventory { background: var(--hfs-gold); }

.admin-stat-card .stat-value {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--hfs-text);
	line-height: 1;
}

.admin-stat-card .stat-label {
	font-size: 0.82rem;
	color: var(--hfs-text-light);
}

/* ---- Admin tables ---- */
.admin-table-card {
	background: var(--hfs-surface);
	border: 1px solid var(--hfs-border);
	border-radius: 8px;
	overflow: hidden;
}

/* Dashboard helpers */
.admin-table-card--fixed320 { height: 320px; }

.admin-table-card .card-header {
	background: var(--hfs-bar);
	padding: 0.7rem 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid var(--hfs-border);
}

.admin-table-card .card-header h5,
.admin-table-card .card-header h6 {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--hfs-bar-text);
}

.admin-table-card .card-header .btn {
	color: var(--hfs-bar-text);
	border-color: var(--hfs-onbar-border-max);
}

/* Section header inside cards */
.admin-card-title {
	background: var(--hfs-bar);
	color: var(--hfs-bar-text);
	padding: 0.6rem 1rem;
	font-size: 0.85rem;
	font-weight: 600;
	margin: 0;
	border-radius: 8px 8px 0px 0px;
	border-bottom: 1px solid var(--hfs-border);
}

.admin-table-card .table {
	margin: 0;
}

.admin-table-card .table-responsive {
	padding-bottom: 4px;
}

.admin-table-card .table thead th {
	background: var(--hfs-bar);
	color: var(--hfs-bar-text);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom: 2px solid var(--hfs-border);
	padding: 0.5rem 0.75rem;
	white-space: nowrap;
}

.admin-table-card .table tbody td {
	padding: 0.55rem 0.75rem;
	font-size: 0.88rem;
	vertical-align: middle;
}

/* Softened table rows — warm greige matching dialog/register palette */
.admin-table-card .table > tbody > tr > td,
.admin-table-card .table > tbody > tr > th {
	background: var(--hfs-dialog-bg) !important;
}
.admin-table-card .table > tbody > tr:nth-child(even) > td,
.admin-table-card .table > tbody > tr:nth-child(even) > th {
	background: var(--hfs-admin-row-alt) !important;
}
.admin-table-card .table > tbody > tr:hover > td,
.admin-table-card .table > tbody > tr:hover > th {
	background: var(--hfs-pos-hover) !important;
}

/* .admin-table-card .table th — superseded by thead th rule above */

.admin-table-card .table-body-empty {
	text-align: center;
	padding: 2rem;
	color: var(--hfs-text-light);
}

/* ---- Admin buttons ---- */
/* btn-admin-primary — standardized to hfs-btn hfs-btn-primary in JSP */

/* ---- Admin page sections (shown/hidden via JS) ---- */
.admin-section {
	display: none;
}

.admin-section.active {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
}

/* Scrollable sections (Dashboard, etc.) — content overflows naturally */
.admin-section.admin-section--scrollable.active {
	overflow-y: auto;
}

.admin-section.hfs-pos-fullscreen.active {
	display: flex;
}

/* Ensure POS shell takes no space when section is hidden */
.admin-section:not(.active) .hfs-pos-shell,
.admin-section:not(.active) .hfs-register-layout {
	height: 0;
	overflow: hidden;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
	.admin-megamenu-tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ============================================
   Embedded POS Register Styles
   ============================================ */

.hfs-pos-fullscreen {
	padding: 0 !important;
	margin: 0;
	width: 100%;
	height: 100%;
	flex-direction: column;
	overflow: hidden;
}

.hfs-pos-fullscreen .hfs-pos-shell {
	height: 100% !important;
}

.hfs-pos-fullscreen .hfs-pos-shell {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.hfs-pos-fullscreen .hfs-pos-shell,
.hfs-pos-fullscreen .hfs-register-layout,
.hfs-pos-fullscreen .center-panel,
.hfs-pos-fullscreen .sidebar-right {
	height: 100%;
	overflow: hidden;
}

.hfs-pos-fullscreen .hfs-register-layout {
	max-height: 100%;
}

.hfs-pos-fullscreen .sidebar-right {
	overflow-y: auto;
}

.hfs-pos-fullscreen .items-section {
	min-height: 0;
}

.hfs-register-embedded {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--hfs-surface-soft);
}

.hfs-register-topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 12px;
	background: var(--hfs-brown-dark);
	color: var(--hfs-cream);
	gap: 10px;
}

.hfs-register-scan-area {
	display: flex;
	gap: 6px;
	flex: 1;
	max-width: 600px;
}

.hfs-register-barcode-input {
	flex: 1;
	padding: 6px 12px;
	border: 2px solid var(--hfs-gold);
	border-radius: 6px;
	font-size: 0.95rem;
	background: var(--hfs-surface);
	outline: none;
}
.hfs-register-barcode-input:focus { border-color: var(--hfs-rust); box-shadow: 0 0 0 2px var(--hfs-ring-rust); }

.hfs-register-scan-btn, .hfs-register-search-btn {
	padding: 6px 12px;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-size: 0.85rem;
}
.hfs-register-scan-btn { background: var(--hfs-gold); color: var(--hfs-brown-dark); }
.hfs-register-search-btn { background: var(--hfs-rust); color: white; }
.hfs-register-scan-btn:hover { filter: brightness(1.1); }
.hfs-register-search-btn:hover { filter: brightness(1.1); }

.hfs-register-customer-area {
	display: flex;
	align-items: center;
	gap: 6px;
}

.hfs-register-customer-label {
	font-size: 0.85rem;
	color: var(--hfs-cream);
}

.hfs-register-cust-btn {
	background: transparent;
	border: 1px solid var(--hfs-cream);
	color: var(--hfs-cream);
	border-radius: 6px;
	padding: 4px 8px;
	cursor: pointer;
	font-size: 0.82rem;
}
.hfs-register-cust-btn:hover { background: var(--hfs-onbar-bg-tint-4); }

.hfs-register-body {
	flex: 1;
	display: flex;
	overflow: hidden;
}

.hfs-register-items-panel {
	flex: 1;
	overflow-y: auto;
	padding: 8px;
}

.hfs-register-items-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.88rem;
}
.hfs-register-items-table thead th {
	background: var(--hfs-brown);
	color: var(--hfs-cream);
	padding: 6px 10px;
	font-size: 0.78rem;
	text-transform: uppercase;
}
.hfs-register-items-table tbody td {
	padding: 8px 10px;
	border-bottom: 1px solid var(--hfs-border-soft-2);
	vertical-align: middle;
}
.hfs-register-items-table tbody tr:hover { background: var(--hfs-row-hover); }

.hfs-register-qty-input {
	width: 52px;
	padding: 3px 6px;
	border: 1px solid var(--hfs-border);
	border-radius: 4px;
	text-align: center;
	font-size: 0.88rem;
}

.hfs-register-remove-btn {
	background: none;
	border: none;
	color: var(--hfs-danger);
	cursor: pointer;
	font-size: 0.9rem;
	padding: 2px 6px;
}
.hfs-register-remove-btn:hover { color: var(--hfs-danger-strong); }

.hfs-register-items-empty {
	text-align: center;
	padding: 60px 20px;
	color: var(--hfs-brown);
	opacity: 0.4;
}
.hfs-register-items-empty i { font-size: 3rem; display: block; margin-bottom: 10px; }
.hfs-register-items-empty p { font-size: 0.95rem; }

.hfs-register-totals-panel {
	width: 260px;
	min-width: 260px;
	background: white;
	border-left: 2px solid var(--hfs-border-soft-3);
	padding: 16px;
	display: flex;
	flex-direction: column;
}

.hfs-register-total-row {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	font-size: 0.9rem;
	border-bottom: 1px solid var(--hfs-border-soft-4);
}

.hfs-register-grand-total {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--hfs-rust);
	border-bottom: 2px solid var(--hfs-rust);
	margin-bottom: 16px;
	padding-bottom: 10px;
}

.hfs-register-payment-btns {
	display: flex;
	gap: 8px;
	margin-top: auto;
}

.hfs-register-pay-btn {
	flex: 1;
	padding: 12px;
	border: none;
	border-radius: 8px;
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.hfs-pay-cash { background: var(--hfs-pay-cash-bg); color: white; }
.hfs-pay-card { background: var(--hfs-pay-card-bg); color: white; }
.hfs-pay-cash:hover { background: var(--hfs-pay-cash-hover-bg); }
.hfs-pay-card:hover { background: var(--hfs-pay-card-hover-bg); }

.hfs-register-void-btn {
	margin-top: 8px;
	padding: 8px;
	background: none;
	border: 1px solid var(--hfs-border);
	border-radius: 6px;
	color: var(--hfs-text-disabled);
	cursor: pointer;
	font-size: 0.82rem;
}
.hfs-register-void-btn:hover { background: var(--hfs-danger-soft-bg); color: var(--hfs-danger); border-color: var(--hfs-danger); }

/* ---- Responsive POS ---- */
@media (max-width: 768px) {
	.hfs-register-body { flex-direction: column; }
	.hfs-register-totals-panel { width: 100%; min-width: auto; border-left: none; border-top: 2px solid var(--hfs-border-soft-3); }
	.hfs-register-topbar { flex-wrap: wrap; }
	.hfs-register-scan-area { max-width: 100%; }
}
/* ===== END admin.css ===== */

/* ===== BEGIN hfs-pos.css (v2.15.6) ===== */
/*
 * HFS POS Terminal
 *   hfs-pos.css
 *
 * Rustic feed store theme — brown/cream/green/gold palette
 * Matches Homestead Feed & Supply storefront
 */

.hfs-pos-shell * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.hfs-pos-shell {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: var(--hfs-brown);
	height: 100vh;
	overflow: hidden;
}

/*---------- LAYOUT ----------*/

.hfs-register-layout {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: 1fr;
	height: 100%;
	overflow: hidden;
	transition: grid-template-columns 0.3s ease;
}

.hfs-register-layout.left-collapsed {
	grid-template-columns: 50px 1fr 280px;
}

.hfs-register-layout.left-collapsed .sidebar-left-header {
	justify-content: center;
	padding: 8px 0;
}

.hfs-register-layout.left-collapsed .menu-label {
	opacity: 0;
	width: 0;
}

.hfs-register-layout.left-collapsed .nav-item-text {
	opacity: 0;
	width: 0;
}

.hfs-register-layout.left-collapsed .nav-item {
	justify-content: center;
	padding: 10px 0;
}

.hfs-register-layout.left-expanded {
	grid-template-columns: 180px 1fr 280px;
}


/*---------- LEFT SIDEBAR ----------*/

.sidebar-left {
	background: linear-gradient(180deg, var(--hfs-brown-dark) 0%, var(--hfs-brown-mid) 100%);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: all 0.3s ease;
}

.sidebar-left-header {
	padding: 8px;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: all 0.3s;
	border-bottom: 1px solid var(--hfs-onbar-bg-tint-4);
}

.sidebar-left-header .menu-toggle {
	padding: 2px 4px;
}

.menu-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
}

.menu-icon {
	color: var(--hfs-bg-alt);
	font-size: 1rem;
	width: 28px;
	height: 28px;
	display: flex;
	margin-left: 0.5rem;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	cursor: pointer;
	border-radius: 4px;
	transition: background 0.2s;
}

.menu-icon:hover {
	background: var(--hfs-onbar-bg-tint-4);
}

.menu-label {
	color: var(--hfs-brand-accent);
	font-size: 0.65rem;
	font-weight: 500;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	transition: opacity 0.3s, width 0.3s;
}

/*---------- CENTER PANEL ----------*/

.center-panel {
	background: var(--hfs-highlight-bg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}


/*---------- BARCODE SECTION ----------*/

.barcode-section {
	background: linear-gradient(180deg, var(--hfs-brown-dark) 0%, var(--hfs-brown-mid) 100%);
	padding: 8px 12px;
	flex-shrink: 0;
}

.barcode-wrapper {
	display: flex;
	gap: 0;
}

.barcode-wrapper .hfs-btn-icon--search {
	border-top-right-radius: 8px !important;
	border-bottom-right-radius: 8px !important;
}

.barcode-input {
	flex: 1;
	padding: 4px 10px;
	border: 1px solid var(--hfs-brown-light);
	border-radius: 4px 0 0 4px;
	border-right: none;
	font-size: 0.8rem;
	background: var(--hfs-onbar-bg-tint-4);
	color: var(--hfs-bg-alt);
}

.barcode-input::placeholder {
	color: var(--hfs-brown-light);
}

.barcode-input:focus {
	outline: none;
	border-color: var(--hfs-brand-accent);
	box-shadow: 0 0 0 1px var(--hfs-gold-surface);
}

.hfs-btn.hfs-btn-icon {
	width: 32px;
	height: 32px;
	background: var(--hfs-green);
	color: var(--hfs-bg-alt);
	border: 1px solid var(--hfs-brown-light);
	border-radius: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	flex-shrink: 0;
}

.hfs-btn.hfs-btn-icon:hover { background: var(--hfs-brown); }

/* Item search button */
.item-search-btn {
	background: var(--hfs-green) !important;
}

.item-search-btn:hover { background: var(--hfs-green-light) !important; }

/* Hardware bridge status indicator */
.bridge-status {
	display: inline-block;
	font-size: 0.55rem;
	border-radius: 8px;
	font-weight: 600;
}

.bridge-status.online { color: var(--hfs-surface); }
.bridge-status.offline { color: var(--hfs-surface); }


/*---------- ITEMS TABLE ----------*/

.items-section {
	flex: 1;
	background: var(--hfs-highlight-bg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 0;
}

.items-table {
	width: 100%;
	border-collapse: collapse;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}

.items-table thead {
	background: var(--hfs-brown);
	color: var(--hfs-bg-alt);
	flex-shrink: 0;
}

.items-table thead tr {
	display: flex;
	width: 100%;
}

.items-table th {
	padding: 6px 10px;
	text-align: left;
	font-size: 0.65rem;
	font-weight: 600;
	text-transform: uppercase;
}

.items-table th:nth-child(1) { flex: 2; }
.items-table th:nth-child(2) { flex: 1; text-align: left; }
.items-table th:nth-child(3) { flex: 1; text-align: center; }
.items-table th:nth-child(4) { flex: 0.8; text-align: center; }
.items-table th:nth-child(5) { flex: 0.8; text-align: center; }

.items-table tbody {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	display: block;
	min-height: 0;
}

.items-table tbody::-webkit-scrollbar { width: 6px; }
.items-table tbody::-webkit-scrollbar-track { background: var(--hfs-scrollbar-track); }
.items-table tbody::-webkit-scrollbar-thumb { background: var(--hfs-brown-light); border-radius: 3px; }
.items-table tbody::-webkit-scrollbar-thumb:hover { background: var(--hfs-brown); }

.items-table tbody tr {
	background: var(--hfs-bg-alt);
	border-bottom: 1px solid var(--hfs-border-soft);
	display: flex;
	width: 100%;
}

.items-table tbody tr:hover {
	background: var(--hfs-highlight-bg);
}

.items-table td {
	padding: 8px 10px;
	font-size: 0.7rem;
}

.items-table td:nth-child(1) { flex: 2; }
.items-table td:nth-child(2) { flex: 1; }
.items-table td:nth-child(3) { flex: 1; text-align: center; }
.items-table td:nth-child(4) { flex: 0.8; text-align: center; }
.items-table td:nth-child(5) { flex: 0.8; text-align: center; }

.product-name {
	font-weight: 600;
	color: var(--hfs-brown-dark);
	line-height: 1.3;
	font-size: 0.7rem;
}

.product-code {
	font-size: 0.6rem;
	color: var(--hfs-brown-light);
}

.price {
	color: var(--hfs-brown-dark);
	font-weight: 500;
}

.qty-cell { text-align: center; }

.qty-controls {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--hfs-scrollbar-track);
	padding: 2px 4px;
	border-radius: 3px;
}

.qty-btn {
	width: 18px;
	height: 18px;
	background: var(--hfs-bg-alt);
	border: 1px solid var(--hfs-brown-light);
	border-radius: 2px;
	color: var(--hfs-brown);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.65rem;
	font-weight: bold;
}

.qty-btn:hover {
	background: var(--hfs-brown);
	color: var(--hfs-bg-alt);
}

.qty-num {
	font-weight: 600;
	color: var(--hfs-brown-dark);
	font-size: 0.7rem;
	min-width: 18px;
	text-align: center;
}

.discount-cell {
	text-align: center;
	color: var(--hfs-danger);
	font-weight: 500;
}

.discount-add-icon {
	width: 18px;
	height: 18px;
	border: 1px solid var(--hfs-brown-light);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--hfs-brown-light);
	font-size: 0.65rem;
	cursor: pointer;
}

.discount-add-icon:hover {
	background: var(--hfs-brown-light);
	color: var(--hfs-bg-alt);
}

.total {
	text-align: center;
	font-weight: 700;
	color: var(--hfs-brown-dark);
}

/* Empty cart message */
.items-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3rem;
	color: var(--hfs-empty-state-text);
	width: 100%;
	height: calc(100vh - 203px);
}

.items-empty i { font-size: 2rem; margin-bottom: 0.5rem; }

/* items-empty inside a table cell - height is determined by parent */
td > .items-empty {
	height: auto;
	min-height: 180px;
}


/*---------- SUMMARY BAR ----------*/

.summary-bar {
	background: var(--hfs-pos-summary-bg);
	color: var(--hfs-bg-alt);
	padding: 0;
	display: flex;
	gap: 0;
	align-items: stretch;
	flex-shrink: 0;
}

.summary-left,
.summary-middle {
	flex: 1 1 0;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: repeat(4, 1fr);
	padding: 8px 15px;
	gap: 4px 15px;
	align-content: center;
}

.summary-middle {
	max-width: 260px;
	border-left: 1px solid rgba(255,255,255,0.08);
}

.summary-label {
	font-size: 0.6rem;
	text-transform: uppercase;
	color: var(--hfs-border-soft);
	font-weight: 500;
	text-align: left;
	align-self: center;
}

.summary-value {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--hfs-bg-alt);
	text-align: left;
	align-self: center;
}

.summary-right {
	background: linear-gradient(135deg, var(--hfs-brown) 0%, var(--hfs-brown-dark) 100%);
	padding: 10px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 150px;
}

.total-label {
	font-size: 0.6rem;
	text-transform: uppercase;
	color: var(--hfs-border-soft);
	margin-bottom: 4px;
	font-weight: 600;
}

.total-value {
	font-size: 2.2rem;
	font-weight: 700;
	color: var(--hfs-brand-accent);
	line-height: 1;
}


/*---------- RIGHT SIDEBAR ----------*/

.sidebar-right {
	background: var(--hfs-pos-sidebar-bg);
	color: var(--hfs-pos-sidebar-text);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: all 0.3s ease;
}

.sidebar-right-header {
	padding: 8px 10px;
	background: var(--hfs-pos-header-bg);
	color: var(--hfs-pos-header-text);
	border-bottom: 1px solid var(--hfs-pos-sidebar-border);
}

.header-info {
	display: grid;
	grid-template-columns: auto 1fr auto 1fr;
	gap: 4px 8px;
	font-size: 0.55rem;
	color: var(--hfs-border-soft);
}

.header-info-label {
	color: var(--hfs-pos-sidebar-text-muted);
	text-align: left;
}

.header-info-label::after { content: ':'; }

.header-info-value {
	font-weight: 600;
}


/*---------- CUSTOMER SECTION ----------*/

.customer-section {
	padding: 10px;
	background: var(--hfs-pos-customer-bg);
	border-bottom: 1px solid var(--hfs-pos-customer-border);
	position: relative;
}

.customer-title {
	font-size: 0.7rem;
	font-weight: 600;
	color: var(--hfs-brand-accent);
	margin-bottom: 6px;
	text-transform: uppercase;
}

.customer-search {
	position: relative;
	margin-bottom: 6px;
}

.customer-input {
	width: 100%;
	padding: 5px 26px 5px 8px;
	border: 1px solid var(--hfs-onbar-border-20);
	border-radius: 3px;
	font-size: 0.65rem;
	background: var(--hfs-onbar-bg-tint-4);
	color: var(--hfs-bg-alt);
}

.customer-input::placeholder {
	color: var(--hfs-onbar-bg-tint-10);
}

.customer-search-icon {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--hfs-border-soft);
	font-size: 0.7rem;
}

.customer-info {
	font-size: 0.6rem;
	line-height: 1.4;
	color: var(--hfs-border-soft);
}

.customer-results {
	position: absolute;
	left: 10px;
	right: 10px;
	background: var(--hfs-brown-dark);
	border: 1px solid var(--hfs-brown-light);
	border-radius: 4px;
	max-height: 150px;
	overflow-y: auto;
	z-index: 100;
	display: none;
}

.customer-results .cust-result {
	padding: 6px 10px;
	font-size: 0.65rem;
	color: var(--hfs-border-soft);
	cursor: pointer;
	border-bottom: 1px solid var(--hfs-onbar-bg-tint-1);
}

.customer-results .cust-result:hover {
	background: var(--hfs-chart-sales-fill);
	color: var(--hfs-bg-alt);
}

.customer-results .cust-result strong {
	color: var(--hfs-brand-accent);
}

.hfs-register-customer-dropdown {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: var(--hfs-brown-dark);
	border: 1px solid var(--hfs-brown-light);
	border-top: none;
	border-radius: 0 0 4px 4px;
	max-height: 180px;
	overflow-y: auto;
	z-index: 200;
	box-shadow: 0 4px 12px var(--hfs-surface-tint-20);
}

.hfs-register-customer-dropdown .cust-dd-item {
	padding: 6px 10px;
	font-size: 0.65rem;
	color: var(--hfs-border-soft);
	cursor: pointer;
	border-bottom: 1px solid var(--hfs-onbar-bg-tint-1);
}

.hfs-register-customer-dropdown .cust-dd-item:hover {
	background: var(--hfs-chart-sales-fill);
	color: var(--hfs-bg-alt);
}

.hfs-register-customer-dropdown .cust-dd-item strong {
	color: var(--hfs-brand-accent);
}

.hfs-register-customer-dropdown .cust-dd-empty {
	padding: 10px;
	font-size: 0.65rem;
	color: var(--hfs-brown-light);
	text-align: center;
	font-style: italic;
}


/*---------- QUICK ACTIONS ----------*/

.actions-grid {
	padding: 8px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5px;
	flex: 1;
	overflow-y: auto;
	align-content: start;
}

.hfs-register-action-btn {
	background: var(--hfs-pos-action-bg);
	border: none;
	border-radius: 3px;
	padding: 6px 4px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	color: var(--hfs-pos-action-text);
	font-size: 0.55rem;
	font-weight: 600;
	text-transform: uppercase;
	transition: all 0.15s;
}

.hfs-register-action-btn i { font-size: 0.75rem; }

.hfs-register-action-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 2px 6px var(--hfs-surface-tint-10);
}

.hfs-register-action-btn.return { background: var(--hfs-green); }
.hfs-register-action-btn.exchange { background: var(--hfs-green-light); }
.hfs-register-action-btn.print { background: var(--hfs-brown); }
.hfs-register-action-btn.delivery { background: var(--hfs-brand-accent); color: var(--hfs-brown-dark); }
.hfs-register-action-btn.loyalty { background: var(--hfs-green); }
.hfs-register-action-btn.update { background: var(--hfs-brown-light); }
.hfs-register-action-btn.void { background: var(--hfs-danger); }
.hfs-register-action-btn.total { background: var(--hfs-brown); }

/* POS Action Button Colors - grouped by function */
/* Row 1: Transaction actions */
.hfs-register-btn-void { background: var(--hfs-danger) !important; }                           /* Red - destructive */
.hfs-register-btn-hold { background: var(--hfs-accent-warn) !important; color: var(--hfs-brown-dark) !important; } /* Amber - pause */
/* Row 2: Returns & value */
.hfs-register-btn-return { background: var(--hfs-accent-orange) !important; }                          /* Orange - refund */
.hfs-register-btn-discount { background: var(--hfs-green) !important; }                        /* Green - value */
/* Row 3: Fulfillment family */
.hfs-register-btn-pickup { background: var(--hfs-link) !important; }                          /* Blue - pickup */
.hfs-register-btn-delivery { background: var(--hfs-link-hover) !important; }                        /* Blue light - delivery */
/* Row 4: Register management */
.hfs-register-btn-register { background: var(--hfs-brown) !important; }                        /* Brown - register */
.hfs-register-btn-lock { background: var(--hfs-gray-action) !important; }                            /* Gray - lock */
/* Row 5: Utilities */
.hfs-register-btn-reprint { background: var(--hfs-gray-action) !important; }                         /* Gray - admin */
.hfs-register-btn-nosale { background: var(--hfs-brown-light) !important; }                          /* Brown - drawer */


/*---------- KEYPAD ----------*/

.hfs-dialog--resizable {
	resize: both;
	overflow: hidden;
}
.hfs-dialog--resizable::-webkit-resizable {
	background: var(--hfs-brown-light);
}

/*---------- KEYPAD (actual) ----------*/

.keypad-section {
	padding: 6px 8px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	border-top: 1px solid var(--hfs-onbar-bg-tint-4);
}

.keypad-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
}

.hfs-register-key-btn {
	background: var(--hfs-pos-keybtn-bg);
	border: 2px solid var(--hfs-pos-keybtn-border);
	border-radius: 3px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--hfs-pos-keybtn-text);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.1s;
	height: 38px;
}

.hfs-register-key-btn:hover {
	background: var(--hfs-pos-keybtn-hover-bg);
	color: var(--hfs-pos-keybtn-hover-text);
	border-color: var(--hfs-pos-keybtn-hover-bg);
}

.hfs-register-key-btn:active {
	transform: scale(0.95);
}


/*---------- TENDER BUTTON ----------*/

.hfs-register-tender-btn {
	background: var(--hfs-pos-process-bg);
	border: none;
	border-radius: 4px;
	padding: 10px;
	color: var(--hfs-bg-alt);
	font-size: 0.75rem;
	font-weight: 700;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: all 0.2s;
}

.hfs-register-tender-btn:hover {
	background: var(--hfs-pos-process-hover-bg);
	transform: translateY(-1px);
}

.hfs-register-tender-btn i { font-size: 0.9rem; }


/*---------- PAYMENT MODAL ----------*/

.hfs-overlay {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: var(--hfs-overlay-backdrop);
	z-index: 2000;
	display: none;
	align-items: center;
	justify-content: center;
}

.hfs-overlay.open { display: flex; }

/* .hfs-dialog defined in hfs-components.css */

.hfs-method-buttons {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	margin-bottom: 1rem;
}

.hfs-method-btn {
	padding: 10px;
	border: 2px solid var(--hfs-brown-light);
	border-radius: 6px;
	background: transparent;
	color: var(--hfs-border-soft);
	font-size: 0.75rem;
	font-weight: 700;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	transition: all 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; }

.hfs-total-display {
	font-size: 2rem;
	font-weight: 700;
	color: var(--hfs-brand-accent);
	text-align: center;
	margin-bottom: 0.5rem;
}

.hfs-input-label {
	font-size: 0.7rem;
	color: var(--hfs-border-soft);
	text-transform: uppercase;
	margin-bottom: 4px;
}

.hfs-input {
	width: 100%;
	background: var(--hfs-onbar-bg-tint-4);
	border: 1px solid var(--hfs-brown-light);
	color: var(--hfs-bg-alt);
	font-size: 1.3rem;
	font-weight: 700;
	text-align: right;
	padding: 8px 12px;
	border-radius: 4px;
}

.hfs-input:focus {
	border-color: var(--hfs-brand-accent);
	outline: none;
	box-shadow: 0 0 0 1px var(--hfs-gold-surface);
}

.hfs-change-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 0.5rem;
	padding: 8px 0;
}

.hfs-change-label { font-size: 0.75rem; color: var(--hfs-border-soft); }
.hfs-change-value { font-size: 1.4rem; font-weight: 700; color: var(--hfs-green); }

.hfs-numpad {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
	margin-top: 0.8rem;
}

.hfs-numpad button {
	padding: 10px;
	font-size: 1.1rem;
	font-weight: 700;
	border: 1px solid var(--hfs-brown-light);
	background: var(--hfs-onbar-bg-tint-1);
	color: var(--hfs-bg-alt);
	border-radius: 4px;
	cursor: pointer;
}

.hfs-numpad button:hover { background: var(--hfs-sidebar-active-bg); }

.hfs-dialog-actions {
	display: flex;
	gap: 8px;
	margin-top: 1rem;
	justify-content: right;
}

/* hfs-btn hfs-btn-primary and hfs-btn hfs-btn-secondary defined in hfs-components.css */

.hfs-field-error {
	background: var(--hfs-danger-fill);
	color: var(--hfs-cancel-accent);
	padding: 6px 10px;
	border-radius: 4px;
	font-size: 0.75rem;
	margin-bottom: 0.5rem;
	display: none;
}


/*---------- SUCCESS OVERLAY ----------*/

.hfs-success-overlay {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background: var(--hfs-success-accent-strong);
	z-index: 3000;
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	color: var(--hfs-bg-alt);
	text-align: center;
}

.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; }


/*---------- ITEM SEARCH RESULTS ----------*/

.search-result-item {
	display: flex;
	align-items: center;
	padding: 8px 10px;
	border-bottom: 1px solid var(--hfs-border);
	cursor: pointer;
	gap: 10px;
	transition: background 0.1s;
}

.search-result-item:hover {
	background: var(--hfs-gold-fill);
}

.search-result-item .sr-info { flex: 1; }
.search-result-item .sr-name { font-size: 0.8rem; font-weight: 600; color: var(--hfs-text); }
.search-result-item .sr-sku { font-size: 0.72rem; color: var(--hfs-text-muted); font-weight: 500; }
.search-result-item .sr-price { font-size: 0.9rem; font-weight: 700; color: var(--hfs-brand-accent); }
.search-result-item .sr-add {
	background: var(--hfs-green);
	color: var(--hfs-bg-alt);
	border: none;
	border-radius: 4px;
	padding: 4px 10px;
	font-size: 0.7rem;
	font-weight: 700;
	cursor: pointer;
}

.search-result-item .sr-add:hover { background: var(--hfs-green-dark); }


/*---------- RESPONSIVE ----------*/

@media (max-width: 992px) {
	.hfs-register-layout {
		grid-template-columns: 1fr;
	}

	.sidebar-left,
	.sidebar-right {
		overflow-y: auto;
	}
}
/* ===== END hfs-pos.css ===== */



/* --- Keypad toggle (123/ABC) button: themeable (was inline background) --- */
.hfs-register-key-btn--toggle {
	background: var(--hfs-keypad-toggle-bg, var(--hfs-border-soft)) !important;
	color: var(--hfs-keypad-toggle-text, var(--hfs-brown-dark)) !important;
	border-color: var(--hfs-keypad-toggle-border, var(--hfs-brown-light)) !important;
}


/* ============================================
   Button Standardization (NON-POS)
   Only POS action buttons should be multicolor.
   ============================================ */

.admin-main .btn,
.admin-main button.btn,
.admin-main a.btn {
	border-radius: 0.45rem;
	font-weight: 600;
}

/* Treat Bootstrap contextual buttons as "primary" in admin UI */
.admin-main .btn-primary,
.admin-main .btn-success,
.admin-main .btn-info,
.admin-main .btn-warning,
.admin-main .btn-danger {
	background: var(--hfs-btn-primary-bg) !important;
	border-color: var(--hfs-btn-primary-border) !important;
	color: var(--hfs-btn-primary-text) !important;
}

.admin-main .btn-primary:hover,
.admin-main .btn-success:hover,
.admin-main .btn-info:hover,
.admin-main .btn-warning:hover,
.admin-main .btn-danger:hover {
	background: var(--hfs-btn-primary-hover-bg) !important;
	border-color: var(--hfs-btn-primary-hover-bg) !important;
}

/* Secondary */
.admin-main .btn-secondary,
.admin-main .btn-outline-secondary,
.admin-main .btn-light {
	background: var(--hfs-btn-secondary-bg) !important;
	border-color: var(--hfs-btn-secondary-border) !important;
	color: var(--hfs-btn-secondary-text) !important;
}

.admin-main .btn-secondary:hover,
.admin-main .btn-outline-secondary:hover,
.admin-main .btn-light:hover {
	background: var(--hfs-btn-secondary-hover-bg) !important;
}

/* Ensure icon-only buttons also follow theme */
.admin-main .btn.btn-icon {
	background: var(--hfs-btn-secondary-bg) !important;
	border-color: var(--hfs-btn-secondary-border) !important;
	color: var(--hfs-btn-secondary-text) !important;
}
.admin-main .btn.btn-icon:hover {
	background: var(--hfs-btn-secondary-hover-bg) !important;
}


/* ============================================
   Checkbox visibility (global)
   ============================================ */
input[type="checkbox"], input[type="radio"] {
	accent-color: var(--hfs-checkbox-accent);
}

/* Never force text-input styling onto checkbox/radio */
.modal-content input[type="checkbox"],
.modal-content input[type="radio"] {
	background: transparent !important;
	border-color: var(--hfs-border) !important;
}

/* Settings cards don't contain scrollable tables — allow dropdowns to overflow */
#themeSettingsCard,
#section-system_general .admin-table-card,
#section-system_operations .admin-table-card,
#section-system_integrations .admin-table-card,
#section-system_advanced .admin-table-card {
	overflow: visible;
}


/* ============================================
   Admin Login Page
   ============================================ */
.hfs-admin-login-body {
	background: var(--hfs-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 24px;
}

.hfs-login-wrap {
	width: 100%;
	max-width: 400px;
}

.hfs-login-card {
	background: var(--hfs-surface);
	border: 1px solid var(--hfs-border);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 8px 32px var(--hfs-shadow-md);
}

.hfs-login-header {
	background: var(--hfs-bar);
	color: var(--hfs-bar-text);
	padding: 20px 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.hfs-login-logo-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
}

.hfs-login-logo {
	max-height: 48px;
	max-width: 200px;
	object-fit: contain;
}

.hfs-login-shield {
	position: absolute;
	top: 10px;
	right: 12px;
	font-size: 0.9rem;
	opacity: 0.5;
}

.hfs-login-title-row {
	text-align: center;
	margin-bottom: 16px;
}

.hfs-login-title {
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--hfs-text);
}

.hfs-login-body {
	padding: 24px;
}

.hfs-login-field {
	margin-bottom: 16px;
}

.hfs-login-label {
	display: block;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--hfs-text);
	margin-bottom: 5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.hfs-login-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.82rem;
	margin-bottom: 16px;
}

.hfs-login-lockout-notice {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: -0.1rem 0 0.9rem;
	padding: 0.55rem 0.75rem;
	border: 1px solid rgba(245, 158, 11, 0.38);
	border-radius: 0.75rem;
	background: rgba(245, 158, 11, 0.12);
	color: #92400e;
	font-size: 0.84rem;
	font-weight: 700;
}

.hfs-login-footer {
	background: var(--hfs-bg);
	border-top: 1px solid var(--hfs-border);
	padding: 12px 24px;
	display: flex;
	justify-content: center;
}

.hfs-login-btn-full {
	width: 100%;
	height: 40px;
	font-size: 0.9rem;
}

/* ============================================
   POS Register Section - Layout
   ============================================ */
.hfs-register-section-relative {
	position: relative;
}

.hfs-register-layout-default {
	grid-template-columns: 1fr 280px;
}

/* ============================================
   POS Register Closed Overlay
   ============================================ */
.hfs-register-closed-overlay-bg {
	background: rgba(20,12,5,0.92);
}

.hfs-register-closed-overlay-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	text-align: center;
	padding: 2rem;
}

.hfs-register-closed-icon {
	font-size: 3.5rem;
	color: var(--hfs-gold);
	margin-bottom: 1.2rem;
}

.hfs-register-closed-title {
	color: #fff;
	font-size: 1.4rem;
	margin-bottom: 0.4rem;
}

.hfs-register-closed-meta {
	color: rgba(255,255,255,0.55);
	font-size: 0.82rem;
	margin-bottom: 0.3rem;
}

.hfs-register-closed-hours {
	color: rgba(255,255,255,0.4);
	font-size: 0.75rem;
	margin-bottom: 1.8rem;
}

/* ============================================
   POS Customer Details
   ============================================ */
.hfs-register-customer-details {
	display: none;
}

.hfs-register-customer-details.visible {
	display: block;
}

/* ============================================
   POS Alpha Keypad
   ============================================ */
.hfs-register-alphapad-grid {
	grid-template-columns: repeat(6, 1fr);
}

.hfs-register-key-btn--del {
	font-size: 0.55rem;
}

.hfs-register-key-btn--toggle-abc {
	font-size: 0.7rem;
}

/* ============================================
   POS Customer Dialog
   ============================================ */
.hfs-search-dialog-bar {
	padding: 10px 16px;
	border-bottom: 1px solid var(--hfs-onbar-bg-tint-4);
}

.hfs-search-dialog-row {
	display: flex;
	gap: 0;
	align-items: stretch;
}

.hfs-search-input {
	flex: 1 1 auto;
	text-align: left;
	font-size: 0.85rem;
	font-weight: 400;
	border-radius: 8px 0 0 8px;
	border-right: none;
	padding: 4px 10px;
}

.hfs-dialog-results {
	flex: 1;
	overflow-y: auto;
	padding: 0;
}

/* ============================================
   POS Lock Screen
   ============================================ */
.hfs-lock-overlay {
	z-index: 9999;
}

.hfs-lock-inner {
	padding: 30px 30px 16px;
	text-align: center;
	width: 100%;
}

.hfs-lock-actions {
	padding: 10px 30px 16px;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hfs-lock-pin-input {
	text-align: center;
	font-size: 1.1rem;
	letter-spacing: 4px;
	padding: 8px 12px;
}

.hfs-lock-switch-btn {
	padding: 8px;
	font-size: 0.75rem;
}

/* ============================================
   POS Product Search Overlay
   ============================================ */
.hfs-search-dialog-bar {
	padding: 10px 16px;
	border-bottom: 1px solid var(--hfs-onbar-bg-tint-4);
}

.hfs-search-dialog-row {
	display: flex;
	gap: 0;
	align-items: stretch;
}

.hfs-search-category-select {
	flex: 0 0 180px;
	min-width: 0;
	font-size: 0.8rem;
	font-weight: 400;
	border-radius: 8px 0 0 8px;
	border-right: none;
	padding: 0 10px;
	height: var(--hfs-control-height);
	box-sizing: border-box;
}

.hfs-search-input {
	flex: 1 1 auto;
	text-align: left;
	font-size: 0.85rem;
	font-weight: 400;
	border-radius: 0;
	border-right: none;
	padding: 0 10px;
	height: var(--hfs-control-height);
	box-sizing: border-box;
}

.hfs-search-two-panel {
	flex: 1;
	display: flex;
	overflow: hidden;
	min-height: 0;
}

.hfs-search-results-scroll {
	flex: 1;
	overflow-y: auto;
}

.hfs-staging-scroll {
	flex: 1;
	overflow-y: auto;
}

.hfs-staging-summary {
	padding: 4px 0;
}

/* ============================================
   POS Delivery Overlay
   ============================================ */
.hfs-delivery-body {
	padding: 12px 16px;
	flex: 1 1 auto;
	overflow: auto;
}

.hfs-delivery-field {
	margin-bottom: 10px;
}

.hfs-delivery-input {
	text-align: left;
	font-size: 0.85rem;
}

/* ============================================
   POS Order Pickup
   ============================================ */
.hfs-pickup-search-row {
	display: flex;
	gap: 0;
}

.hfs-pickup-search-input {
	font-size: 0.85rem;
	border-radius: 8px 0 0 8px;
	border-right: none;
	padding: 4px 10px;
}

/* ============================================
   POS Returns Overlay
   ============================================ */
.hfs-return-search-row {
	display: flex;
	gap: 0;
	align-items: stretch;
}

.hfs-return-search-input {
	text-align: left;
	font-size: 0.85rem;
	font-weight: 400;
	border-radius: 8px 0 0 8px;
	border-right: none;
	padding: 4px 10px;
}

.hfs-return-search-results {
	max-height: 120px;
	overflow-y: auto;
	margin-top: 4px;
}

.hfs-return-list-area {
	padding: 0;
}

/* ============================================
   POS Discount Overlay
   ============================================ */
.hfs-discount-body {
	padding: 12px 16px;
	flex: 1 1 auto;
	overflow: auto;
}

.hfs-discount-scope-btns {
	display: flex;
	gap: 6px;
}

.hfs-discount-type-btns {
	display: flex;
	gap: 6px;
}

.hfs-discount-method-btn-full {
	flex: 1;
}

.hfs-discount-field {
	margin-bottom: 12px;
}

/* ============================================
   POS Hold List Overlay
   ============================================ */
.hfs-hold-list {
	flex: 1;
	overflow-y: auto;
	padding: 8px;
}

.hfs-hold-empty {
	text-align: center;
	padding: 30px;
	font-size: 0.8rem;
}

/* ============================================
   POS Open Register / Cash Count Dialogs
   ============================================ */
.hfs-register-open-overlay {
	z-index: 2100;
}

.hfs-register-cash-count-overlay {
	z-index: 2100;
}

.hfs-register-dialog-content {
	padding: 16px;
	flex: 1;
	overflow-y: auto;
}

.hfs-register-cash-count-footer {
	justify-content: space-between;
	align-items: center;
}

.hfs-register-cash-count-title {
	color: var(--hfs-danger-light, #f87171);
}

/* ============================================
   POS Override Close Dialog
   ============================================ */
.hfs-override-close-overlay {
	z-index: 2200;
}

.hfs-override-close-body {
	padding: 16px;
}

.hfs-override-reason-label {
	font-size: 0.82rem;
	font-weight: 600;
	display: block;
	margin-bottom: 4px;
}

.hfs-override-reason-hint {
	font-size: 0.82rem;
	color: var(--hfs-text-muted);
	margin-bottom: 12px;
}

.hfs-override-textarea {
	text-align: left;
	font-size: 0.8rem;
	font-weight: 400;
	padding: 6px 10px;
	resize: vertical;
}

/* ============================================
   Terminal Setup Screen
   ============================================ */
.terminal-setup-screen {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9000;
	background: var(--hfs-bg, #1a1007);
	align-items: center;
	justify-content: center;
	flex-direction: column;
	text-align: center;
	padding: 2rem;
}

.terminal-setup-logo {
	height: 56px;
	margin-bottom: 2rem;
}

.terminal-setup-title {
	color: var(--hfs-gold, #b8960c);
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
}

.terminal-setup-desc {
	color: var(--hfs-text-muted, #9ca3af);
	font-size: 0.9rem;
	max-width: 420px;
	margin-bottom: 2.5rem;
}

.terminal-setup-btns {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 1.5rem;
}

.terminal-setup-btn {
	min-width: 180px;
	padding: 1rem 1.5rem;
	font-size: 0.95rem;
	flex-direction: column;
	gap: 8px;
	height: auto;
}

.terminal-setup-btn-icon {
	font-size: 1.8rem;
	display: block;
	margin-bottom: 6px;
}

.terminal-setup-btn-sub {
	font-size: 0.75rem;
	font-weight: 400;
	opacity: 0.8;
}

.terminal-id-entry {
	display: none;
	margin-top: 0.5rem;
}

.terminal-id-hint {
	color: var(--hfs-text-muted, #9ca3af);
	font-size: 0.82rem;
	margin-bottom: 8px;
}

.terminal-id-row {
	display: flex;
	gap: 8px;
	justify-content: center;
	align-items: center;
}

.terminal-id-input {
	max-width: 160px;
	text-align: center;
	font-weight: 600;
	text-transform: uppercase;
}

.terminal-id-error {
	color: var(--hfs-danger, #ef4444);
	font-size: 0.8rem;
	margin-top: 6px;
	display: none;
}

/* ============================================
   General Modals - Misc inline style fixes
   ============================================ */
.hfs-modal-hr {
	border-color: var(--hfs-border);
}

.hfs-modal-hint-text {
	color: var(--hfs-text-muted);
}

.hfs-product-form-error {
	display: none;
	font-size: 0.85rem;
}

.hfs-adjust-error {
	display: none;
	font-size: 0.85rem;
}

.hfs-customer-form-error {
	display: none;
	font-size: 0.85rem;
}

.hfs-supplier-form-error {
	display: none;
	font-size: 0.85rem;
}

/* ============================================
   Admin JSP fragment - stray inline styles
   ============================================ */
.hfs-settings-search-select {
	min-width: 160px;
}

.hfs-table-col-day {
	width: 110px;
}

.hfs-table-col-time {
	width: 140px;
}

.hfs-settings-hint-padded {
	padding: 10px 16px;
	border-top: 1px solid var(--hfs-border);
}

.hfs-password-honeypot {
	display: none;
}

.hfs-gateway-modal-error {
	font-size: 0.85rem;
}

.hfs-ops-col-setting {
	min-width: 180px;
}

.hfs-ops-col-value {
	min-width: 260px;
}

.hfs-ops-col-setting-lg {
	min-width: 200px;
}

.hfs-terminal-edit-error {
	font-size: 0.85rem;
}

.hfs-terminal-force-close-hint {
	font-size: 0.9rem;
}

/* ============================================
   Error Pages
   ============================================ */
.hfs-error-wrap {
	max-width: 480px;
}

.hfs-error-body-center {
	text-align: center;
	padding: 32px 24px;
}

.hfs-error-code {
	font-size: 3.5rem;
	font-weight: 800;
	line-height: 1;
}

.hfs-error-code--danger {
	color: var(--hfs-danger);
}

.hfs-error-code--accent {
	color: var(--hfs-brand-accent);
}

.hfs-error-message {
	margin: 12px 0 24px;
	color: var(--hfs-text-muted);
	font-size: 0.9rem;
}

.hfs-error-actions {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}

/* ---- Inline style migrations: hfs-register-modals, hfs-register, system-general, system-integrations ---- */
.hfs-empty-hint-icon {
	font-size: 1.5rem;
	display: block;
	margin-bottom: 8px;
}
.hfs-delivery-input--mb {
	margin-bottom: 6px;
}
.hfs-override-btn {
	font-size: 0.75rem;
}
.hfs-col-day  { width: 110px; }
.hfs-col-time { width: 140px; }

/* ---- Transactions button ---- */
.hfs-register-btn-transactions { background: var(--hfs-blue, #2563eb); color: #fff; }
.hfs-register-btn-transactions:hover { background: #1d4ed8; }

/* ---- Transactions dialog ---- */
.hfs-transactions-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 6px 16px;
	background: var(--hfs-surface-alt);
	border-bottom: 1px solid var(--hfs-border);
	font-size: 0.85rem;
}
.hfs-txn-session-label { color: var(--hfs-text-muted); }
.hfs-txn-count { font-weight: 600; }
.hfs-transactions-scroll {
	overflow-y: auto;
	padding: 12px;
	max-height: 420px;
}
.hfs-txn-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--hfs-border);
	border-radius: 8px;
	margin-bottom: 8px;
	background: var(--hfs-surface);
	font-size: 0.88rem;
}
.hfs-txn-row--voided { opacity: 0.55; }
.hfs-txn-meta { flex: 1; min-width: 0; }
.hfs-txn-num  { font-weight: 700; font-size: 0.92rem; }
.hfs-txn-detail { color: var(--hfs-text-muted); font-size: 0.82rem; margin-top: 2px; }
.hfs-txn-amount { font-weight: 700; font-size: 1rem; white-space: nowrap; }
.hfs-txn-status { font-size: 0.75rem; }
.hfs-txn-void-btn {
	padding: 4px 10px;
	font-size: 0.78rem;
	white-space: nowrap;
}

/* ---- Override dialog hint (uses hfs-discount-body for layout) ---- */
.hfs-override-hint { font-size: 0.88rem; color: var(--hfs-text-muted); margin-bottom: 14px; }

/* ---- Channel badges (Web / In-Store) ---- */
.hfs-badge-web  { background: var(--hfs-blue, #2563eb); color: #fff; }
.hfs-badge-pos  { background: var(--hfs-accent-orange, #c2620a); color: #fff; }


.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;
}