/* Boutique Mate Unified Theme CSS */
/* This file provides consistent theming across all Boutique Mate pages */

@import url('theme-variables.css');

@view-transition {
	navigation: auto;
}

/*    ========================================
   BASE STYLES
   ======================================== */

/* Reset and Base */
* {
	box-sizing: border-box;
}

body {
	font-family: var(--bm-font-family);
	color: var(--bm-text-primary);
	line-height: var(--bm-line-height-normal);
}

/*    ========================================
   LAYOUT COMPONENTS
   ======================================== */

/* Main Container */
.bm-container {
	width: 100%;
	max-width: 1600px;
	margin: 0 auto;
	padding: var(--bm-spacing-xl);
	/*    background: var(--bm-white); */
}

/* Page Header */
.bm-page-header {
	margin-bottom: var(--bm-spacing-xl);
}

.bm-page-title {
	font-size: var(--bm-font-size-4xl);
	font-weight: 700;
	color: var(--bm-text-primary);
	margin: 0 0 var(--bm-spacing-sm) 0;
	line-height: var(--bm-line-height-tight);
}

.bm-page-subtitle {
	font-size: var(--bm-font-size-lg);
	color: var(--bm-text-secondary);
	margin: 0;
}

/* Header with Actions */
.bm-header-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--bm-spacing-lg);
	margin-bottom: var(--bm-spacing-2xl);
	border-bottom: 1px solid var(--bm-gray-300);
}

/*    ========================================
   GRID SYSTEM
   ======================================== */

.bm-grid {
	display: grid;
	gap: var(--bm-spacing-lg);
}

.bm-grid-2 {
	grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
}

.bm-grid-3 {
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.bm-grid-4 {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.bm-form-grid {
	display: grid;
	gap: var(--bm-spacing-lg);
	margin-bottom: var(--bm-spacing-lg);
	justify-content: center;
	align-items: flex-end;
}

.bm-form-grid-regular {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.bm-form-grid-tight {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/*    ========================================
   PANELS
   ======================================== */

/* Base */
.bm-panel {
	position: relative;
	overflow: visible;
	transition: all var(--bm-transition-base);
	padding: var(--bm-spacing-lg);
	border-radius: var(--bm-radius-lg);
}

/* Sizing */
.bm-panel_large {
	padding: var(--bm-spacing-xl);
	border-radius: var(--bm-radius-lg);
}

.bm-panel_small {
	padding: var(--bm-spacing-sm);
	border-radius: var(--bm-radius-md);
}

/* Colors */
.bm-panel-regular {
	background: var(--bm-white);
	border: 1px solid var(--bm-border-light);
}

.bm-panel-subdued {
	background: var(--bm-gray-25);
	border: 1px solid var(--bm-border-light);
}

/*    ========================================
   SECTIONS
   ======================================== */

.bm-section {
	margin-bottom: var(--bm-spacing-2xl);
}

.bm-section-header {
	display: flex;
	align-items: center;
	gap: var(--bm-spacing-md);
	margin-bottom: var(--bm-spacing-lg);
	padding-bottom: var(--bm-spacing-md);
	border-bottom: 4px solid var(--bm-primary);
}

.bm-section-count {
	font-size: var(--bm-font-size-5xl);
	font-weight: 700;
	color: var(--bm-text-primary);
	line-height: 1;
}

.bm-section-title {
	font-size: var(--bm-font-size-2xl);
	font-weight: 600;
	color: var(--bm-text-primary);
	margin: 0;
}

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

/* Base Card */
.bm-card {
	display: flex;
	flex-direction: column;
	background: var(--bm-white);
	border: 1px solid var(--bm-border-light);
	border-radius: var(--bm-radius-lg);
	overflow: hidden;
	transition: all var(--bm-transition-base);
	position: relative;
}

.bm-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--bm-shadow-lg);
	border-color: var(--bm-gray-300);
}

.bm-card-link {
	flex: 1;
	display: flex;
	flex-direction: column;
	height: 100%;

	text-decoration: none;
	color: inherit;
	/* display: block; */
}

/* Card Image */
.bm-card-image {
	position: relative;
	width: 100%;
	padding-top: 75%; /* 4:3 Aspect Ratio */
	overflow: hidden;
	background: var(--bm-gray-100);
}

.bm-card-image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--bm-transition-slow);
}

.bm-card:hover .bm-card-image img {
	transform: scale(1.05);
}

.bm-card-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(196, 126, 90, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity var(--bm-transition-base);
	z-index: 1;
}

.bm-card:hover .bm-card-overlay {
	opacity: 1;
}

.bm-card-overlay-text {
	color: var(--bm-white);
	font-weight: 600;
	font-size: var(--bm-font-size-lg);
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* Card Content */
.bm-card-content {
	flex-grow: 1;
	display: flex;
	flex-direction: column;

	padding: var(--bm-spacing-lg);
}

.bm-card-title {
	font-size: var(--bm-font-size-xl);
	font-weight: 600;
	color: var(--bm-text-primary);
	margin: 0 0 var(--bm-spacing-sm) 0;
	line-height: var(--bm-line-height-tight);
}

.bm-card-description {
	flex-grow: 1;
	font-size: var(--bm-font-size-base);
	color: var(--bm-text-secondary);
	margin: 0 0 var(--bm-spacing-md) 0;
	line-height: var(--bm-line-height-normal);
	font-weight: normal;
}

/* Card Statistics */
.bm-card-stats {
	/*    display: grid; */
	/*    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); */
	gap: var(--bm-spacing-sm);
	/*    margin-top: var(--bm-spacing-md); */
	padding-top: var(--bm-spacing-md);
}

.bm-stat-item {
	text-align: center;
	display: flex;
	gap: 4px;
	align-items: center;
}

.bm-stat-value {
	display: block;
	font-size: var(--bm-font-size-lg);
	font-weight: 700;
	color: var(--bm-primary);
	line-height: 1.2;
}

.bm-stat-label {
	display: block;
	font-size: var(--bm-font-size-xs);
	color: var(--bm-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: var(--bm-spacing-xs);
}

/* Stats Carousel */

/* Hide the 1st bm-card-stats element on hover ONLY if it has a sibling with the same class */
.bm-card:hover .bm-card-stats-carousel > .bm-card-stats:first-child:has(+ .bm-card-stats) {
	opacity: 0;
	transform: translateY(-20px);
}

/* Show the 2nd bm-card-stats element on hover ONLY if it is preceeded by a sibling with the same class */
.bm-card:hover .bm-card-stats-carousel > .bm-card-stats:first-child + .bm-card-stats {
	opacity: 1;
	transform: translateY(0);
	pointer-events: all;
}

.bm-card-stats-carousel {
	position: relative;
	height: 100px; /* Fixed height to prevent layout shift */
	overflow: hidden;
	margin-top: var(--bm-spacing-md);
	border-top: 1px solid var(--bm-border-light);
}

.bm-stats-group {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.5s ease-in-out;
	pointer-events: none;
	display: flex;
	flex-direction: column;
}

.bm-stats-group.active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: all;
}

.bm-stats-group.fade-out {
	opacity: 0;
	transform: translateY(-20px);
}

/* Pause animation on hover */
.bm-card:hover .bm-card-stats-carousel {
	animation-play-state: paused;
}

/* Loading animation for stats */
@keyframes statsShimmer {
	0% {
		background-position: -200px 0;
	}
	100% {
		background-position: calc(200px + 100%) 0;
	}
}

.bm-stat-value.loading {
	background: linear-gradient(90deg, var(--bm-gray-100) 0%, var(--bm-gray-200) 50%, var(--bm-gray-100) 100%);
	background-size: 200px 100%;
	animation: statsShimmer 1.5s ease-in-out infinite;
	color: transparent;
	min-width: 60px;
	min-height: 24px;
	display: inline-block;
	border-radius: var(--bm-radius-sm);
}

/* ========================================
   BUTTONS
   ======================================== */

.bm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bm-spacing-sm);
	padding: var(--bm-spacing-md) var(--bm-spacing-xl);
	border-radius: var(--bm-radius);
	font-size: var(--bm-font-size-base);
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: all var(--bm-transition-fast);
	border: none;
	line-height: 1;
}

.bm-btn-xs {
	padding: var(--bm-spacing-xs) var(--bm-spacing-md);
	font-size: var(--bm-font-size-xs);
}

.bm-btn-sm {
	padding: var(--bm-spacing-sm) var(--bm-spacing-md);
	font-size: var(--bm-font-size-sm);
}

.bm-btn-lg {
	padding: var(--bm-spacing-md) var(--bm-spacing-2xl);
	font-size: var(--bm-font-size-lg);
}

.bm-btn-icon {
	width: 36px;
	height: 36px;
	padding: 0;
}

.bm-btn-primary {
	background-color: var(--bm-primary);
	color: var(--bm-white);
}

.bm-btn-primary:hover {
	background-color: var(--bm-primary-hover);
	transform: translateY(-1px);
	color: var(--bm-white);
}

.bm-btn-primary.disabled {
	background-color: var(--bm-gray-200);
	color: var(--bm-white);
	pointer-events: none;
}

.bm-btn-secondary {
	background-color: var(--bm-gray-100);
	color: var(--bm-text-primary);
	border: 1px solid var(--bm-border-light);
}

.bm-btn-secondary:hover {
	background-color: var(--bm-gray-200);
	transform: translateY(-1px);
	border-color: var(--bm-border-medium);
}

.bm-btn-success {
	background-color: var(--bm-success-bg);
	color: var(--bm-success);
	border: 1px solid var(--bm-success);
}

.bm-btn-success:hover {
	background-color: var(--bm-success);
	color: var(--bm-white);
}

.bm-btn-danger {
	background-color: var(--bm-warning-bg);
	color: var(--bm-danger);
	border: 1px solid var(--bm-danger);
}

.bm-btn-danger:hover {
	background-color: var(--bm-danger);
	color: var(--bm-white);
}

.bm-btn-ghost {
	background-color: transparent;
	color: var(--bm-text-secondary);
	font-weight: bold;
}

.bm-btn-ghost:hover {
	background-color: var(--bm-gray-100);
	color: var(--bm-text-primary);
	transform: translateY(-1px);
}

.bm-btn-success-ghost:hover {
	background-color: var(--bm-success-bg);
	color: var(--bm-success-dark);
	transform: translateY(-1px);
}

.bm-btn-danger-ghost:hover {
	background-color: var(--bm-danger-bg);
	color: var(--bm-danger);
	transform: translateY(-1px);
}

.bm-btn-primary-ghost:hover {
	background-color: var(--bm-primary-lighter);
	color: var(--bm-primary);
	transform: translateY(-1px);
}

/* ========================================
   BUTTON LOADING STATES
   ======================================== */

.bm-btn.loading {
	position: relative;
	color: transparent;
}

.bm-btn.loading::after {
	content: '';
	position: absolute;
	width: 14px;
	height: 14px;
	top: 50%;
	left: 50%;
	margin-left: -7px;
	margin-top: -7px;
	border: 2px solid var(--bm-white);
	border-radius: 50%;
	border-top-color: transparent;
	animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
	to {
		transform: rotate(360deg);
	}
}

/* ========================================
   LIST
   ======================================== */

.bm-list {
	display: flex;
	flex-direction: column;
	gap: var(--bm-spacing-sm);
}

.bm-list-item {
	display: flex;
	gap: var(--bm-spacing-sm);
}

/* ========================================
   PROVIDER SETUP FORMS ENHANCEMENT
   ======================================== */

.bm-form-element .descriptive-text {
	color: var(--bm-text-muted);
	font-size: var(--bm-font-size-xs);
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: var(--bm-spacing-xs);
}

label,
.ui.modal form label {
	display: block;
	font-size: var(--bm-font-size-xs);
	font-weight: bold;
	color: var(--bm-text-primary);
	margin-bottom: var(--bm-spacing-xs);
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.bm-panel .ui.form input,
.bm-panel .ui.form select,
.bm-panel .ui.form textarea,
form input,
form select,
form textarea,
.ui.modal .ui.input > input,
.ui.modal input[type='text'],
.ui.modal input[type='email'],
.ui.modal input[type='tel'],
.ui.modal form textarea {
	width: 100%;
	background: var(--bm-white) !important;
	border: 1px solid var(--bm-gray-300);
	border-radius: var(--bm-radius-sm);
	padding: 0.6rem 1rem;
	font-size: var(--bm-font-size-base);
	transition: all var(--bm-transition-base);
}

.bm-panel .ui.form input:focus,
.bm-panel .ui.form select:focus,
.bm-panel .ui.form textarea:focus,
.bm-panel form input:focus,
.bm-panel form select:focus,
.bm-panel form textarea:focus,
.ui.modal .ui.input > input:focus,
.ui.modal input[type='text']:focus,
.ui.modal input[type='email']:focus,
.ui.modal input[type='tel']:focus,
.ui.modal form textarea:focus {
	outline: none;
	border-color: var(--bm-primary);
	box-shadow: 0 0 0 3px rgba(var(--bm-primary-rgb), 0.1);
	border-radius: var(--bm-radius-sm);
}

.ui.modal .ui.input.error > input {
	border-color: var(--bm-danger) !important;
	background: var(--bm-danger-light) !important;
}

/* .bm-container .ui.form input[type="text"],
.bm-container .ui.form input[type="email"],
.bm-container .ui.form input[type="tel"],
.bm-container .ui.form input[type="url"],
.bm-container .ui.form select,
.bm-container .ui.form textarea {
    background: var(--bm-white);
    border: 1px solid var(--bm-gray-300);
    border-radius: var(--bm-radius-md);
    padding: 0.6rem 1rem;
    font-size: var(--bm-font-size-base);
    transition: all var(--bm-transition-base);
} */

/* .bm-container .ui.form input:focus,
.bm-container .ui.form select:focus,
.bm-container .ui.form textarea:focus {
    outline: none;
    border-color: var(--bm-primary);
    box-shadow: 0 0 0 3px rgba(var(--bm-primary-rgb), 0.1);
} */

/* Semantic UI dropdown styling */
.bm-container .ui.form .ui.dropdown {
	background: var(--bm-white);
	border: 1px solid var(--bm-gray-300);
	border-radius: var(--bm-radius-md);
	font-size: var(--bm-font-size-base);
	transition: all var(--bm-transition-base);
}

.bm-container .ui.form .ui.dropdown:hover {
	border-color: var(--bm-gray-400);
}

.bm-container .ui.form .ui.dropdown.active,
.bm-container .ui.form .ui.dropdown.visible {
	border-color: var(--bm-primary);
	box-shadow: 0 0 0 3px rgba(var(--bm-primary-rgb), 0.1);
}

.bm-container .ui.form .ui.dropdown > .text {
	color: var(--bm-text-primary);
}

.bm-container .ui.form .ui.dropdown > .dropdown.icon {
	color: var(--bm-text-secondary);
}

.bm-container .ui.form .ui.dropdown .menu {
	border: 1px solid var(--bm-gray-300);
	border-radius: var(--bm-radius-md);
	box-shadow: var(--bm-shadow-lg);
	margin-top: 0.25rem;
}

.bm-container .ui.form .ui.dropdown .menu > .item {
	border-radius: 0;
	color: var(--bm-text-primary);
	padding: 0.75rem 1rem;
	transition: all var(--bm-transition-base);
}

.bm-container .ui.form .ui.dropdown .menu > .item:hover {
	background: var(--bm-gray-50);
	color: var(--bm-primary);
}

.bm-container .ui.form .ui.dropdown .menu > .item.selected {
	background: var(--bm-primary-light);
	color: var(--bm-primary);
	font-weight: 500;
}

/* Compact field groups */
.bm-container .ui.form .two.fields,
.bm-container .ui.form .three.fields {
	margin-bottom: var(--bm-spacing-sm);
}

.bm-container .ui.form .fields > .field {
	margin-bottom: 0;
}

/* Modern buttons with BM styling */
.form-controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: var(--bm-spacing-lg);
	padding-top: var(--bm-spacing-lg);
	border-top: 1px solid var(--bm-border-light);
}

.form-controls.single-button {
	justify-content: flex-end;
}

/* Logo upload section enhancement */

.logo-preview {
	display: flex;
	gap: var(--bm-spacing-lg);
	align-items: flex-start;
}

.logo-image-wrapper {
	flex-shrink: 0;
	width: 120px;
	height: 120px;
	border-radius: var(--bm-radius-lg);
	overflow: hidden;
	border: 2px solid var(--bm-border-light);
	background: var(--bm-white);
}

.logo-image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.logo-upload-content {
	flex: 1;
}

/* Reduce textarea height for compact form */
.bm-container .ui.form textarea {
	min-height: 80px;
	resize: vertical;
}

/* ========================================
   STATUS CARDS
   ======================================== */

.bm-status-card {
	display: inline-flex;
	align-items: center;
	gap: var(--bm-spacing-lg);
	padding: var(--bm-spacing-md) var(--bm-spacing-xl);
	border-radius: var(--bm-radius);
	font-size: var(--bm-font-size-base);
	font-weight: 500;
	text-decoration: none;
	transition: all var(--bm-transition-fast);
	border: none;
	line-height: 1;
}

.bm-status-card-text-content {
	display: flex;
	flex-direction: column;
	gap: var(--bm-spacing-sm);
}

.bm-status-card-success {
	color: var(--bm-success);
	background-color: var(--bm-success-bg);
	border: 1px solid var(--bm-success-light);
}

.bm-status-card-warning {
	color: var(--bm-warning);
	background-color: var(--bm-warning-bg);
	border: 1px solid var(--bm-warning);
}

.bm-status-card-danger {
	color: var(--bm-danger-dark);
	background-color: var(--bm-danger-bg);
	border: 1px solid var(--bm-danger);
}

.bm-status-card-info {
	color: var(--bm-info);
	background-color: var(--bm-info-bg);
	border: 1px solid var(--bm-info);
}

/* ========================================
   SEARCH AND FILTERS
   ======================================== */

.bm-search-filter-bar {
	display: flex;
	gap: var(--bm-spacing-lg);
	margin-bottom: var(--bm-spacing-2xl);
	align-items: stretch;
	flex-wrap: wrap;
}

.bm-search-wrapper {
	flex: 1;
	min-width: 300px;
	position: relative;
}

.bm-search-input {
	width: 100%;
	padding: var(--bm-spacing-md) var(--bm-spacing-md) var(--bm-spacing-md) var(--bm-spacing-2xl);
	border: 1px solid var(--bm-gray-200);
	border-radius: var(--bm-radius-sm);
	font-size: var(--bm-font-size-base);
	background: var(--bm-white);
	transition: all var(--bm-transition-base);
	height: 48px;
}

.bm-search-input:hover {
	border-color: var(--bm-primary-light);
}

.bm-search-input:focus {
	outline: none;
	border-color: var(--bm-primary);
	background: var(--bm-white);
	box-shadow: 0 0 0 3px rgba(196, 126, 90, 0.1);
}

.bm-search-icon {
	position: absolute;
	left: var(--bm-spacing-md);
	top: 50%;
	transform: translateY(-50%);
	color: var(--bm-text-muted);
	pointer-events: none;
}

/* Filter Tabs */
.bm-filter-tabs {
	display: flex;
	background: var(--bm-gray-200);
	border-radius: var(--bm-radius);
	/* padding: var(--bm-spacing-xs); */
}

.bm-filter-tab {
	padding: var(--bm-spacing-sm) var(--bm-spacing-lg);
	border: none;
	background: transparent;
	color: var(--bm-text-secondary);
	font-size: var(--bm-font-size-base);
	font-weight: 500;
	cursor: pointer;
	border-radius: calc(var(--bm-radius) - 2px);
	transition: all var(--bm-transition-fast);
	white-space: nowrap;
}

.bm-filter-tab:hover {
	color: var(--bm-text-primary);
}

.bm-filter-tab.active {
	background: var(--bm-gray-600);
	color: var(--bm-white);
}

/* ========================================
   STATUS BADGES
   ======================================== */

.bm-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--bm-spacing-xs);
	padding: var(--bm-spacing-xs) var(--bm-spacing-sm);
	border-radius: var(--bm-radius-full);
	font-size: var(--bm-font-size-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	white-space: nowrap;
}

/* Ensure icon and text stay on same line */
.bm-badge i {
	display: inline;
	margin: 0 0.25rem 0 0 !important;
	font-size: 0.875rem;
	line-height: 1;
}

.bm-badge-success {
	background: var(--bm-success-bg);
	color: var(--bm-success);
}

.bm-badge-warning {
	background: var(--bm-warning-bg);
	color: var(--bm-warning);
}

.bm-badge-danger {
	background: var(--bm-danger-light);
	color: var(--bm-danger);
}

.bm-badge-neutral {
	background: var(--bm-gray-100);
	color: var(--bm-text-secondary);
}

.bm-badge-primary {
	background: var(--bm-primary-lighter);
	color: var(--bm-primary-dark);
}

.bm-badge-info {
	background: var(--bm-info);
	color: var(--bm-white);
}

.bm-badge-black {
	background: var(--bm-gray-900);
	color: var(--bm-white);
}

.bm-badge-count {
	font-size: var(--bm-font-size-xs);
	background: rgba(0, 0, 0, 0.1);
	padding: 0 6px;
	border-radius: var(--bm-radius-full);
	margin-left: 4px;
}

/* ========================================
   ROUNDED ICONS
   ======================================== */

.bm-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--bm-radius-full);
	font-size: var(--bm-font-size-xs);
	width: 20px;
	height: 20px;
}

.bm-icon-success-filled {
	background-color: var(--bm-success);
	color: var(--bm-white);
}

.bm-icon-warning-filled {
	background-color: var(--bm-warning);
	color: var(--bm-white);
}

.bm-icon-danger-filled {
	background-color: var(--bm-danger);
	color: var(--bm-white);
}

/* ========================================
   PROGRESS BARS
   ======================================== */

.bm-progress {
	position: relative;
	width: 100%;
	height: 20px;
	border-radius: var(--bm-radius-lg);
	overflow: hidden;
}

.bm-progress-child {
	height: 100%;
	width: 100%;
	transition: width var(--bm-transition-slow);
}

.bm-progress-fill {
	background: linear-gradient(90deg, var(--bm-primary) 0%, var(--bm-success) 100%);
	border-radius: var(--bm-radius-sm);
}

.bm-progress-shrink {
	background-color: var(--bm-gray-100);
	position: absolute;
	top: 0;
	right: 0;
}

.bm-progress-text {
	position: absolute;
	top: 0;
	font-size: var(--bm-font-size-xs);
	color: var(--bm-text-primary);
	font-weight: bold;
	padding-left: var(--bm-spacing-xs);
}

/* ========================================
   EMPTY STATES
   ======================================== */

.bm-empty-state {
	text-align: center;
	padding: var(--bm-spacing-3xl) var(--bm-spacing-xl);
}

.bm-empty-icon {
	font-size: 4rem;
	color: var(--bm-gray-300);
	margin-bottom: var(--bm-spacing-lg);
}

.bm-empty-title {
	font-size: var(--bm-font-size-2xl);
	color: var(--bm-gray-700);
	margin-bottom: var(--bm-spacing-sm);
}

.bm-empty-text {
	font-size: var(--bm-font-size-lg);
	color: var(--bm-text-secondary);
	margin-bottom: var(--bm-spacing-xl);
}

/* ========================================
   UTILITIES
   ======================================== */

/* Spacing */
.bm-mt-sm {
	margin-top: var(--bm-spacing-sm);
}

.bm-mt-md {
	margin-top: var(--bm-spacing-md);
}

.bm-mt-lg {
	margin-top: var(--bm-spacing-lg);
}

.bm-mb-sm {
	margin-bottom: var(--bm-spacing-sm);
}

.bm-mb-md {
	margin-bottom: var(--bm-spacing-md);
}

.bm-mb-lg {
	margin-bottom: var(--bm-spacing-lg);
}

/* Text Alignment */
.bm-text-center {
	text-align: center;
}

.bm-text-left {
	text-align: left;
}

.bm-text-right {
	text-align: right;
}

/* Display */
.bm-hidden {
	display: none;
}

.bm-block {
	display: block;
}

.bm-flex {
	display: flex;
}

/* ========================================
   FEATURE CARDS
   ======================================== */

.bm-feature-header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.bm-feature-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: auto;
}

.bm-link-arrow {
	color: var(--bm-primary);
	font-weight: bold;
	transition: transform 0.2s ease;
}

.bm-feature-card:hover .bm-link-arrow {
	transform: translateX(4px);
}

.bm-features-content {
	position: relative;
}

/* Provider Header Styles */
.bm-provider-header {
	display: flex;
	align-items: center;
	gap: var(--bm-spacing-lg);
	padding: var(--bm-spacing-lg);
	background: var(--bm-white);
	border: 1px solid var(--bm-border-light);
	border-radius: var(--bm-radius-lg);
	margin-bottom: var(--bm-spacing-lg);
	transition: all var(--bm-transition-base);
}

/* Removed sticky header to prevent flickering
.bm-provider-header.stuck {
    position: sticky;
    top: 60px;
    z-index: 10;
    box-shadow: var(--bm-shadow-lg);
} */

.bm-provider-logo {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: var(--bm-radius-md);
	border: 2px solid var(--bm-border-light);
}

.bm-provider-info {
	flex: 1;
}

.bm-provider-name {
	font-size: var(--bm-font-size-xl);
	font-weight: 600;
	color: var(--bm-text-primary);
	margin: 0 0 0.25rem 0;
}

.bm-provider-address {
	color: var(--bm-text-secondary);
	margin: 0;
}

.bm-feature-type-section {
	margin-bottom: var(--bm-spacing-xl);
}

/* Dropdown styling in search filter bar */
.bm-search-filter-bar .field .ui.dropdown {
	min-width: 200px;
	height: 48px;
	padding: var(--bm-spacing-md) 2.5rem var(--bm-spacing-md) var(--bm-spacing-md);
	font-size: var(--bm-font-size-base);
	border-radius: var(--bm-radius-sm);
	background: var(--bm-white);
	border: 2px solid var(--bm-gray-200);
	transition: all var(--bm-transition-base);
	display: flex;
	align-items: center;
}

.bm-search-filter-bar .field .ui.dropdown:hover {
	border-color: var(--bm-primary-light);
}

.bm-search-filter-bar .field .ui.dropdown.active,
.bm-search-filter-bar .field .ui.dropdown.visible {
	border-color: var(--bm-primary);
	box-shadow: 0 0 0 3px rgba(196, 126, 90, 0.1);
}

/* ========================================
   STAFF CARDS
   ======================================== */

.bm-staff-container {
	margin-top: var(--bm-spacing-lg);
}

.bm-staff-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
	gap: var(--bm-spacing-lg);
	margin-bottom: var(--bm-spacing-xl);
}

.bm-staff-card {
	background: var(--bm-white);
	border: 1px solid var(--bm-gray-200);
	border-radius: var(--bm-radius-lg);
	overflow: hidden;
	transition: all var(--bm-transition-base);
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 0;
	min-height: 180px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.bm-staff-card:hover {
	box-shadow: 0 8px 24px rgba(196, 126, 90, 0.12);
	border-color: var(--bm-primary-light);
	transform: translateY(-2px);
}

/* Staff Card Header Section */
.bm-staff-card-header {
	display: flex;
	align-items: center;
	gap: var(--bm-spacing-md);
	padding: var(--bm-spacing-lg);
	padding-bottom: 0;
}

.bm-staff-card-avatar {
	width: 48px;
	height: 48px;
	position: relative;
	overflow: hidden;
	background: var(--bm-gray-100);
	border-radius: var(--bm-radius-full);
	flex-shrink: 0;
	border: 2px solid var(--bm-gray-200);
}

.bm-staff-card-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bm-staff-card-info {
	flex: 1;
	min-width: 0;
}

.bm-staff-card-actions {
	display: flex;
	gap: var(--bm-spacing-xs);
	padding: var(--bm-spacing-md) var(--bm-spacing-lg);
	border-top: 1px solid var(--bm-gray-200);
	background: var(--bm-gray-50);
}

.bm-staff-card-content {
	flex: 1;
	padding: var(--bm-spacing-md) var(--bm-spacing-lg);
	padding-top: var(--bm-spacing-sm);
}

.bm-staff-card-name {
	font-size: var(--bm-font-size-lg);
	font-weight: 600;
	color: var(--bm-text-primary);
	margin: 0;
	display: flex;
	align-items: center;
	gap: var(--bm-spacing-xs);
	line-height: 1.2;
}

/* Email Display */
.bm-staff-card-email {
	font-size: var(--bm-font-size-sm);
	color: var(--bm-text-secondary);
	margin: var(--bm-spacing-xs) 0 0 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Current User Badge */
.bm-staff-card-current-badge {
	font-size: var(--bm-font-size-xs);
	padding: 2px 8px;
	background: var(--bm-primary);
	color: var(--bm-white);
	border-radius: var(--bm-radius-sm);
	font-weight: 500;
	flex-shrink: 0;
}

.bm-staff-card-role {
	font-size: var(--bm-font-size-sm);
	color: var(--bm-text-secondary);
	margin: 0;
}

.bm-staff-card-roles {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bm-spacing-xs);
	margin-top: var(--bm-spacing-xs);
}

.bm-staff-card-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--bm-spacing-xs);
	padding: 4px 12px;
	background: var(--bm-gray-100);
	color: var(--bm-text-secondary);
	border-radius: var(--bm-radius-full);
	font-size: var(--bm-font-size-sm);
	font-weight: 500;
	border: 1px solid var(--bm-gray-200);
	white-space: nowrap;
	line-height: 1.4;
	transition: all var(--bm-transition-base);
}

/* Add Staff Button */
.bm-add-staff-btn {
	margin-bottom: var(--bm-spacing-xl);
}

/* ========================================
   MODALS
   ======================================== */

/* Override Semantic UI Modal Styles - Modern and Clean */
.ui.modal {
	border-radius: var(--bm-radius-lg) !important;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
	border: none !important;
	overflow: hidden;
}

.ui.modal > .header {
	background: var(--bm-gray-50) !important;
	color: var(--bm-text-primary) !important;
	font-size: var(--bm-font-size-lg) !important;
	padding: var(--bm-spacing-lg) !important;
	border-bottom-color: var(--bm-gray-200) !important;
}

.ui.modal > .header i {
	margin-right: var(--bm-spacing-sm);
}

.ui.modal > .content,
.BMmodal-content {
	/* padding: var(--bm-spacing-lg) !important;
    background: var(--bm-white) !important; */
}

.ui.modal > .actions,
.BMmodal-actions {
	display: flex;
	justify-content: flex-end;
	gap: var(--bm-spacing-md);
	padding: var(--bm-spacing-lg);
	background: var(--bm-gray-50);
	border-top: 1px solid var(--bm-gray-200);
}

/* Ensure all inputs in modal are visible */
.ui.modal .ui.input {
	width: 100% !important;
}

.ui.modal .field {
	margin-bottom: var(--bm-spacing-md) !important;
}

/* Modal Labels - Smaller and cleaner */
.ui.modal p.ui.small.header {
	color: var(--bm-text-primary) !important;
	font-weight: 600 !important;
	font-size: var(--bm-font-size-sm) !important;
	margin: var(--bm-spacing-md) 0 var(--bm-spacing-xs) 0 !important;
}

/* Image Upload Section */
.ui.modal .ui.button.group {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: var(--bm-spacing-md) !important;
}

.ui.modal .ui.button.group.vertical {
	background: var(--bm-primary-lighter) !important;
	padding: var(--bm-spacing-lg) !important;
	border-radius: var(--bm-radius) !important;
	border: 2px dashed var(--bm-primary-light) !important;
}

.ui.modal .ui.rounded.image {
	width: 120px !important;
	height: 120px !important;
	object-fit: cover !important;
	border: 3px solid var(--bm-white) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
	transition: all var(--bm-transition-base) !important;
}

.ui.modal .ui.rounded.image:hover {
	transform: scale(1.02) !important;
	box-shadow: var(--bm-shadow-lg) !important;
}

/* DELETE */
/* Dropdown Styling */
/* .ui.modal .ui.dropdown {
    border: 2px solid var(--bm-gray-200) !important;
    border-radius: var(--bm-radius-sm) !important;
    padding: var(--bm-spacing-sm) var(--bm-spacing-md) !important;
    min-height: 40px !important;
    transition: all var(--bm-transition-fast) !important;
    background: var(--bm-white) !important;
}

.ui.modal .ui.dropdown:hover {
	border-color: var(--bm-primary-light) !important;
}

.ui.modal .ui.dropdown.active,
.ui.modal .ui.dropdown:focus {
	border-color: var(--bm-primary) !important;
	box-shadow: var(--bm-shadow-focus) !important;
}

.ui.modal .ui.dropdown > .dropdown.icon {
    color: var(--bm-text-secondary) !important;
} */

/* Multi-select Tags - Subtle */
.ui.modal .ui.label {
	background: var(--bm-primary-lighter) !important;
	color: var(--bm-primary-dark) !important;
	border-radius: var(--bm-radius-sm) !important;
	padding: 0.25rem 0.5rem !important;
	font-weight: 500 !important;
	margin: 0.125rem !important;
	font-size: var(--bm-font-size-xs) !important;
	border: none !important;
}

/* Upload button in modal - subtle style */
.ui.modal .ui.button.primary:not(.positive) {
	background: var(--bm-primary-lighter) !important;
	color: var(--bm-primary-dark) !important;
	border: 1px solid var(--bm-primary-light) !important;
}

.ui.modal .ui.button.primary:not(.positive):hover {
	background: var(--bm-primary-light) !important;
	border-color: var(--bm-primary) !important;
}

.ui.modal .ui.label > .delete.icon {
	color: var(--bm-primary-dark) !important;
	opacity: 0.7 !important;
}

.ui.modal .ui.label > .delete.icon:hover {
	opacity: 1 !important;
}

/* ========================================
   DROPDOWN STYLING
   ======================================== */

/* General dropdown styling */
.ui.selection.dropdown {
	background: var(--bm-white) !important;
	border: 1px solid var(--bm-gray-200) !important;
	border-radius: var(--bm-radius-sm) !important;
	transition: all var(--bm-transition-base) !important;
}

.ui.selection.dropdown:hover {
	border-color: var(--bm-primary-light) !important;
}

.ui.selection.dropdown.active,
.ui.selection.dropdown.visible {
	border-color: var(--bm-primary) !important;
	box-shadow: 0 0 0 3px rgba(196, 126, 90, 0.1) !important;
}

/* Dropdown menu */
.ui.selection.dropdown .menu {
	border: 1px solid var(--bm-primary) !important;
	border-radius: var(--bm-radius-sm) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
	margin-top: 4px !important;
	background: var(--bm-white) !important;
}

.ui.selection.dropdown .menu > .item {
	padding: var(--bm-spacing-md) var(--bm-spacing-lg) !important;
	border-bottom: 1px solid var(--bm-gray-100) !important;
	font-size: var(--bm-font-size-base) !important;
	transition: all var(--bm-transition-fast) !important;
}

.ui.selection.dropdown .menu > .item:last-child {
	border-bottom: none !important;
}

.ui.selection.dropdown .menu > .item:hover {
	background: var(--bm-primary-lighter) !important;
	color: var(--bm-text-primary) !important;
}

.ui.selection.dropdown .menu > .item.selected,
.ui.selection.dropdown .menu > .item.active {
	background: var(--bm-primary-lighter) !important;
	color: var(--bm-primary-dark) !important;
	font-weight: 500 !important;
}

/* Role Selection Specific */
.ui.modal .ui.selection.dropdown {
	background: var(--bm-white) !important;
	border: 1px solid var(--bm-gray-200) !important;
	border-radius: var(--bm-radius-sm) !important;
}

.ui.modal .ui.multiple.selection.dropdown > .label {
	background: var(--bm-primary-light) !important;
	color: var(--bm-primary-dark) !important;
	border: none !important;
	margin: 3px 5px 3px 0 !important;
}

.ui.modal .ui.selection.dropdown .menu {
	border: 1px solid var(--bm-border) !important;
	border-radius: var(--bm-radius) !important;
	box-shadow: var(--bm-shadow-lg) !important;
	margin-top: 0.25rem !important;
}

.ui.modal .ui.selection.dropdown .menu > .item {
	padding: 0.75rem 1rem !important;
	border-bottom: 1px solid var(--bm-border-light) !important;
}

.ui.modal .ui.selection.dropdown .menu > .item:last-child {
	border-bottom: none !important;
}

.ui.modal .ui.selection.dropdown .menu > .item:hover {
	background: var(--bm-gray-50) !important;
	color: var(--bm-text-primary) !important;
}

/* Modal Backdrop - Lighter */
.ui.dimmer {
	background-color: rgba(0, 0, 0, 0.3) !important;
	backdrop-filter: blur(2px) !important;
}

/* Modal Animation */
.ui.modal {
	animation: bm-modalFadeIn 0.2s ease-out !important;
}

@keyframes bm-modalFadeIn {
	from {
		opacity: 0;
		transform: scale(0.98) translateY(-10px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

/* Make modal layout more horizontal */
.ui.modal .ui.two.column.doubling.padded.grid {
	display: flex !important;
	align-items: flex-start !important;
	gap: var(--bm-spacing-xl) !important;
}

.ui.modal .ui.two.column.doubling.padded.grid > .column {
	width: auto !important;
	flex: 1 !important;
	padding: 0 !important;
}

.ui.modal .ui.two.column.doubling.padded.grid > .column:first-child {
	flex: 0 0 auto !important;
	display: flex !important;
	justify-content: center !important;
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes bm-fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.bm-animate-in {
	animation: bm-fadeIn 0.5s ease-out backwards;
}

.bm-staff-card.bm-animate-in {
	animation: bm-fadeInScale 0.5s ease-out backwards;
}

@keyframes bm-fadeInScale {
	from {
		opacity: 0;
		transform: scale(0.95) translateY(10px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

/* ========================================
   MODAL STYLES
   ======================================== */

/* Modal Form Field Styles */
.ui.modal .ui.form .field {
	margin-bottom: var(--bm-spacing-lg);
}

/* Remove error styling on initial load */
.ui.modal .ui.form .field.error .ui.input input:not(:focus) {
	background: var(--bm-white);
	border-color: var(--bm-gray-300);
}

.ui.modal .ui.form .field.error .ui.input input:focus {
	background: var(--bm-white);
	border-color: var(--bm-danger);
}

.ui.modal .ui.input input:hover {
	border-color: var(--bm-gray-400) !important;
}

.ui.modal .ui.input input:focus {
	border-color: var(--bm-primary) !important;
	box-shadow: 0 0 0 3px rgba(196, 126, 90, 0.1) !important;
}

/* Modal Button Styles */

/* Image Upload Area */
.ui.modal .ui.image {
	margin-bottom: var(--bm-spacing-md);
}

/* Modal Dimmer */
.ui.dimmer {
	background-color: rgba(0, 0, 0, 0.7) !important;
}

/* Modal Open Body Class */
body.bm-modal-open {
	overflow: hidden;
}

/* ========================================
   ONBOARDING TAB NAVIGATION (Pill Style)
   ======================================== */

/* Container: remove underline, add gray background group */
.ui.secondary.pointing.menu.mainContent__SecondaryNav {
	border-bottom: none !important;
	display: flex !important;
	gap: var(--bm-spacing-sm);
	padding: var(--bm-spacing-sm);
	background: var(--bm-gray-100);
	border-radius: var(--bm-radius-lg);
	margin-bottom: var(--bm-spacing-lg);
}

/* Each tab: equal-width pill shape */
.ui.secondary.pointing.menu.mainContent__SecondaryNav .item {
	flex: 1 !important;
	display: flex !important;
	align-items: center;
	justify-content: center !important;
	text-align: center;
	padding: var(--bm-spacing-sm) var(--bm-spacing-md) !important;
	margin: 0 !important;
	border-radius: var(--bm-radius) !important;
	border-bottom: none !important;
	background: var(--bm-white);
	border: 1px solid var(--bm-border-light) !important;
	color: var(--bm-text-primary) !important;
	font-weight: 500;
	font-size: var(--bm-font-size-sm);
	transition: all var(--bm-transition-fast);
}

.ui.secondary.pointing.menu.mainContent__SecondaryNav .item > div[style*='position: relative'] {
	display: inline-flex !important;
	align-items: center;
	margin-left: var(--bm-spacing-xs);
	position: static !important;
	line-height: 1;
}

.ui.secondary.pointing.menu.mainContent__SecondaryNav .item > div[style*='position: relative'] > i {
	position: static !important;
	right: auto !important;
	bottom: auto !important;
}

/* Active tab: filled primary color */
.ui.secondary.pointing.menu.mainContent__SecondaryNav .item.active {
	background: var(--bm-primary) !important;
	color: var(--bm-white) !important;
	border-color: var(--bm-primary) !important;
	font-weight: 600;
}

/* Hover state for inactive tabs */
.ui.secondary.pointing.menu.mainContent__SecondaryNav .item:not(.active):hover {
	background: var(--bm-gray-200) !important;
	color: var(--bm-text-primary) !important;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
	.bm-container {
		padding: var(--bm-spacing-md);
	}

	.bm-page-title {
		font-size: var(--bm-font-size-3xl);
	}

	.bm-header-row {
		flex-direction: column;
		align-items: stretch;
	}

	.bm-grid-2,
	.bm-grid-3,
	.bm-grid-4 {
		grid-template-columns: 1fr;
	}

	.bm-search-filter-bar {
		flex-direction: column;
		align-items: stretch;
	}

	.bm-search-wrapper {
		min-width: 100%;
	}

	.bm-btn {
		width: 100%;
		justify-content: center;
	}

	/* Adjust stats carousel for mobile */
	.bm-card-stats-carousel {
		height: 120px; /* Slightly more height for wrapped content */
	}

	.bm-stat-value {
		font-size: var(--bm-font-size-base);
	}

	.bm-stat-label {
		font-size: 0.65rem;
	}
}

@media (min-width: 769px) and (max-width: 1200px) {
	.bm-grid-4 {
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	}
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

.bm-card:focus-within,
.bm-btn:focus,
button:focus,
a:focus,
input:focus,
select:focus {
	outline: 2px solid var(--bm-primary);
	outline-offset: 2px;
}

/* Skip to content link */
.bm-skip-link {
	position: absolute;
	top: -40px;
	left: 0;
	background: var(--bm-primary);
	color: var(--bm-white);
	padding: var(--bm-spacing-sm) var(--bm-spacing-md);
	text-decoration: none;
	border-radius: var(--bm-radius);
}

.bm-skip-link:focus {
	top: 0;
}

/* ========================================
   FEATURE TABS
   ======================================== */

/* Override Semantic UI tab styles for features page */
.ui.tabular.menu .item {
	margin-bottom: 0 !important;
}

.ui.tabular.menu .item.active {
	background: var(--bm-white) !important;
	color: var(--bm-primary) !important;
	border-color: transparent !important;
	border-bottom: 3px solid var(--bm-primary) !important;
	font-weight: 600 !important;
}

.ui.tabular.menu .item:hover:not(.active) {
	background: var(--bm-gray-50) !important;
	color: var(--bm-text-primary) !important;
}

.ui.top.attached.tabular.menu {
	border-radius: var(--bm-radius-lg) var(--bm-radius-lg) 0 0 !important;
	overflow: hidden;
}

.ui.top.attached.tabular.menu .item:first-child {
	border-top-left-radius: var(--bm-radius-lg) !important;
}

.ui.top.attached.tabular.menu .item:last-child {
	border-top-right-radius: var(--bm-radius-lg) !important;
}

/*    ========================================
   AGREEMENT TWO-PANE LAYOUT
   ======================================== */

.bm-agreement-layout {
	display: flex;
	gap: var(--bm-spacing-lg);
	align-items: flex-start;
	margin-top: var(--bm-spacing-md);
}

.bm-agreement-layout__sidebar {
	flex: 0 0 35%;
	min-width: 280px;
}

.bm-agreement-layout__main {
	flex: 1;
	min-width: 0;
}

.bm-agreement-placeholder {
	padding: var(--bm-spacing-2xl);
	text-align: center;
	min-height: 400px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--bm-text-muted);
}

.bm-agreement-placeholder__icon {
	font-size: 4rem;
	margin-bottom: var(--bm-spacing-lg);
	opacity: 0.3;
}

.bm-agreement-placeholder__text {
	font-size: var(--bm-font-size-lg);
}

/* Disabled form panel — disables all inputs within */
.bm-form-disabled input,
.bm-form-disabled select,
.bm-form-disabled textarea {
	background: var(--bm-gray-100);
	color: var(--bm-text-disabled, var(--bm-text-muted));
	cursor: not-allowed;
	pointer-events: none;
}