/* =============================================
   EN FORÊT Hair Therapy — Main Stylesheet
   (Design tokens, layout, all components)
============================================= */

/* ── DESIGN TOKENS ─────────────────────────────────── */
:root {
	--forest:       #1a2e1e;
	--forest-mid:   #2d4a32;
	--forest-light: #7a9e7e;
	--sage:         #7a9e7e;
	--sage-light:   #a8b899;
	--cream:        #faf9f7;
	--cream-dark:   #f0eeeb;
	--gold:         #c9a84c;
	--gold-light:   #dfc263;
	--vip:          #8b3a6b;
	--silver:       #8fa8b8;
	--white:        #ffffff;
	--border:       #e0dcd7;
	--text-dark:    #1a1a1a;
	--text-mid:     #5a5a5a;
	--text-light:   #9a9a9a;
	--danger:       #b91c1c;
	--success:      #27ae60;
}

[data-theme="dark"] {
	--cream:        #141210;
	--cream-dark:   #1a1714;
	--white:        #252018;
	--border:       rgba(255,255,255,0.12);
	--text-dark:    #e8e4de;
	--text-mid:     #a8a09a;
	--text-light:   #6a6258;
	/* Forest greens shift to lighter, readable values in dark mode */
	--forest:       #5aaa6a;
	--forest-mid:   #3d7d4c;
	--forest-light: #8ec89a;
	--gold:         #dfc263;
	--gold-light:   #e8cf7a;
}

/* ── BASE RESET ─────────────────────────────────────── */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body {
	height: 100%;
}

body {
	font-family: 'Plus Jakarta Sans', sans-serif;
	background: var(--cream);
	color: var(--text-dark);
	overflow: hidden;
	height: 100vh;
	transition: background 0.25s, color 0.25s;
}

/* index.html wraps everything in <form> — make it the flex row container */
body > form {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

a {
	text-decoration: none;
	color: inherit;
}

button {
	cursor: pointer;
	font-family: inherit;
}

textarea {
	font-family: inherit;
	font-size: 14px;
}

/* ── SIDEBAR ────────────────────────────────────────── */
.sidebar {
	width: 240px;
	min-width: 240px;
	background: var(--forest);
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	transition: left 0.25s ease;
	z-index: 100;
}

/* Desktop: sidebar always visible (no transform needed) */

.sidebar-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.45);
	z-index: 99;
}

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

/* Logo */
.logo {
	padding: 24px 20px 20px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	flex-shrink: 0;
}

.logo-sub {
	font-family: 'Cormorant Garamond', serif;
	font-size: 11px;
	letter-spacing: 4px;
	color: var(--sage-light);
	text-transform: uppercase;
	margin-bottom: 2px;
}

.logo-main {
	font-family: 'Cormorant Garamond', serif;
	font-size: 28px;
	font-weight: 600;
	color: #fff;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.logo-tag {
	font-size: 10px;
	letter-spacing: 2px;
	color: var(--sage);
	text-transform: uppercase;
	margin-top: 4px;
	font-weight: 500;
}

/* Navigation */
.nav {
	flex: 1;
	padding: 12px 10px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,0.28) transparent;
}

.nav::-webkit-scrollbar {
	width: 8px;
}

.nav::-webkit-scrollbar-button {
	display: block;
	height: 10px;
	background: rgba(255,255,255,0.18);
}

.nav::-webkit-scrollbar-button:vertical:decrement {
	background:
		linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.75) 50%) center 55%/6px 6px no-repeat,
		linear-gradient(225deg, transparent 50%, rgba(255,255,255,0.75) 50%) center 55%/6px 6px no-repeat,
		rgba(255,255,255,0.18);
}

.nav::-webkit-scrollbar-button:vertical:increment {
	background:
		linear-gradient(-45deg, transparent 50%, rgba(255,255,255,0.75) 50%) center 45%/6px 6px no-repeat,
		linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.75) 50%) center 45%/6px 6px no-repeat,
		rgba(255,255,255,0.18);
}

.nav::-webkit-scrollbar-track {
	background: transparent;
}

.nav::-webkit-scrollbar-thumb {
	background: rgba(255,255,255,0.28);
	border-radius: 8px;
}

.nav::-webkit-scrollbar-thumb:hover {
	background: rgba(255,255,255,0.4);
}

.nav-section {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--sage);
	padding: 16px 10px 6px;
	opacity: 0.7;
}

.nav-item {
	display: flex;
	align-items: center;
	padding: 10px 14px;
	border-radius: 10px;
	cursor: pointer;
	color: rgba(255,255,255,0.65);
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 2px;
	transition: background 0.15s, color 0.15s;
	user-select: none;
	text-decoration: none;
}

	.nav-item:hover {
		background: rgba(255,255,255,0.08);
		color: rgba(255,255,255,0.9);
	}

	.nav-item.active {
		background: rgba(255,255,255,0.14);
		color: #fff;
		font-weight: 600;
	}

.icon {
	margin-right: 10px;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	display: inline-block;
	object-fit: contain;
	opacity: 0.92;
}

/* Sidebar footer */
.sidebar-footer {
	padding: 14px 16px;
	border-top: 1px solid rgba(255,255,255,0.08);
	flex-shrink: 0;
}

.staff-avatar {
	display: flex;
	align-items: center;
	gap: 10px;
}

.avatar-circle {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--forest-light);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 15px;
	flex-shrink: 0;
}

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

.staff-name {
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.staff-role {
	font-size: 11px;
	color: var(--sage);
}

.logout-btn {
	color: rgba(255,255,255,0.45);
	display: flex;
	align-items: center;
	padding: 6px;
	border-radius: 6px;
	transition: color 0.15s;
	flex-shrink: 0;
}

	.logout-btn:hover {
		color: var(--danger);
	}

/* ── MAIN AREA ──────────────────────────────────────── */
.main {
	flex: 1;
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: hidden;
	min-width: 0;
	margin-left: 240px; /* Account for fixed sidebar width on desktop */
}

/* Mobile: main content takes full width */
@media (max-width: 768px) {
    .main {
        margin-left: 0;
    }
}

/* ── TOPBAR ─────────────────────────────────────────── */
.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24px;
	height: 60px;
	background: var(--white);
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
	gap: 12px;
	transition: background 0.25s;
}

.topbar-left {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.topbar-right {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.page-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--forest);
	white-space: nowrap;
}

.date-badge {
	font-size: 12px;
	color: var(--text-light);
	background: var(--cream-dark);
	padding: 4px 10px;
	border-radius: 20px;
	white-space: nowrap;
}

/* .mobile-menu-btn styles moved to components.css with proper media query */

/* Theme toggle */
.theme-toggle-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	user-select: none;
}

.theme-toggle-icon {
	width: 14px;
	height: 14px;
	object-fit: contain;
	display: inline-block;
	transition: opacity 0.2s;
}

.theme-toggle {
	position: relative;
	width: 36px;
	height: 20px;
	border-radius: 20px;
	border: none;
	background: var(--cream-dark);
	transition: background 0.2s;
	padding: 0;
	cursor: pointer;
}

	.theme-toggle::before {
		content: '';
		position: absolute;
		top: 3px;
		left: 3px;
		width: 14px;
		height: 14px;
		border-radius: 50%;
		background: var(--text-mid);
		transition: transform 0.2s, background 0.2s;
	}

[data-theme="dark"] .theme-toggle {
	background: var(--forest-light);
}

[data-theme="dark"] .theme-toggle::before {
	transform: translateX(16px);
	background: #fff;
}

/* Notification button */
.notif-btn {
	position: relative;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	border: none;
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-mid);
	transition: background 0.15s;
}

	.notif-btn:hover {
		background: var(--cream-dark);
	}

.topbar-icon {
	display: inline-block;
	object-fit: contain;
}

.topbar-icon-menu {
	width: 18px;
	height: 18px;
}

.topbar-icon-bell {
	width: 18px;
	height: 18px;
}

.notif-dot {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--danger);
	border: 2px solid var(--white);
}

/* ── CONTENT ────────────────────────────────────────── */
.content {
	flex: 1;
	overflow: auto;
	padding: 24px;
	background: var(--cream);
	transition: background 0.25s;
}

/* Responsive table/panel scrolling for mobile */
/* Need high specificity to override .panel { overflow: hidden } */
.panel.panel-responsive-scroll {
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch;
	overflow-y: visible !important;
	flex-shrink: 0; /* Prevent shrinking in flex containers */
}

/* With fr units, the table naturally adapts. Set a reasonable min-width
   to trigger horizontal scroll on very small screens (< 768px) */
.panel.panel-responsive-scroll .panel {
	min-width: 800px; /* Minimum width before scrolling kicks in */
}

/* ── PAGE SYSTEM ────────────────────────────────────── */
.page-tabs {
	display: none;
	flex-direction: column;
}

	.page-tabs.active {
		display: flex;
	}

/* ── STAT CARDS ─────────────────────────────────────── */
.stats-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 20px;
}

.stat-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 20px 24px;
	transition: background 0.25s, border-color 0.25s;
}

.stat-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--text-light);
	margin-bottom: 8px;
}

.stat-value {
	font-size: 28px;
	font-weight: 800;
	color: var(--forest);
	line-height: 1;
	margin-bottom: 4px;
	letter-spacing: -0.02em;
}

.stat-sub {
	font-size: 12px;
	color: var(--text-light);
	margin-bottom: 10px;
}

.stat-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 20px;
}

	.stat-badge.badge-up {
		background: rgba(39,174,96,0.12);
		color: #1e8a4a;
	}

	.stat-badge.badge-down {
		background: rgba(185,28,28,0.1);
		color: var(--danger);
	}

/* ── CALENDAR ───────────────────────────────────────── */
.calendar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	flex-wrap: wrap;
	gap: 10px;
}

.cal-nav {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cal-nav-btn {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	border: 1.5px solid var(--border);
	background: var(--white);
	font-size: 18px;
	color: var(--text-mid);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s;
}

	.cal-nav-btn:hover {
		background: var(--forest);
		color: #fff;
		border-color: var(--forest);
	}

.cal-month {
	font-size: 16px;
	font-weight: 700;
	color: var(--forest);
	min-width: 160px;
	text-align: center;
}

/* View tabs (shared: calendar + reports) */
.view-tabs {
	display: flex;
	background: var(--cream-dark);
	border-radius: 10px;
	padding: 4px;
	gap: 4px;
}

.view-tab {
	padding: 7px 14px;
	border-radius: 7px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-light);
	transition: all 0.2s ease;
	user-select: none;
	border: 2px solid transparent;
	position: relative;
}

.view-tab:hover {
	color: var(--text-dark);
	background: rgba(255,255,255,0.5);
}

.view-tab.active {
	background: var(--white);
	color: var(--forest);
	font-weight: 800;
	box-shadow: 0 4px 12px rgba(26,46,30,0.25);
	border-color: var(--forest);
	transform: translateY(-2px);
	z-index: 1;
}

/* Calendar grid */
.week-grid {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
	background: var(--white);
}

.week-header {
	display: flex;
	background: var(--cream);
	border-bottom: 1px solid var(--border);
	flex-shrink: 0;
}

.week-header-time {
	width: 64px;
	min-width: 64px;
	border-right: 1px solid var(--border);
	background: var(--cream);
}

.week-day-header {
	flex: 1;
	min-width: 0;
	text-align: center;
	padding: 10px 4px;
	border-left: 1px solid var(--border);
	font-size: 12px;
}

	.week-day-header.today {
		background: rgba(26,46,30,0.1);
		border-bottom: 1px solid var(--border);
	}

.week-day-name {
	font-weight: 700;
	color: var(--text-mid);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.week-day-num {
	font-size: 18px;
	font-weight: 800;
	color: var(--forest);
	margin-top: 2px;
}

.week-body {
	display: flex;
	align-items: flex-start;
	overflow-y: auto;
	max-height: 580px;
	position: relative;
}

/* Hide scrollbar track so it doesn't shift column widths vs header */
.week-body::-webkit-scrollbar {
	width: 6px;
}
.week-body::-webkit-scrollbar-track {
	background: transparent;
}
.week-body::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: 3px;
}

/* Reserve the same 6px gutter in the header so columns stay aligned */
.week-header::after {
	content: '';
	display: block;
	width: 6px;
	min-width: 6px;
	flex-shrink: 0;
}

.time-col {
	width: 64px;
	min-width: 64px;
	border-right: 1px solid var(--border);
	flex-shrink: 0;
}

.time-slot {
	height: 64px;
	border-bottom: 1px solid var(--border);
	font-size: 10px;
	font-weight: 600;
	color: var(--text-light);
	text-align: right;
	padding: 4px 8px 0 0;
	white-space: nowrap;
}

.day-col {
	flex: 1;
	border-left: 1px solid var(--border);
	position: relative;
	min-width: 0;
}

	.day-col.today-col {
		background: rgba(26,46,30,0.04);
		border-left: 1px solid var(--border);
	}

	.day-col.drag-over {
		background: rgba(45, 74, 50, 0.15);
	}

.stylist-col-body.drag-over,
.time-slot-cell.drag-over {
	background: rgba(45, 74, 50, 0.12);
}

.day-cell {
	height: 64px;
	border-bottom: 1px solid var(--border);
	position: relative;
	transition: background 0.15s;
}

.day-cell:hover {
	background: rgba(26,46,30,0.04);
}

.day-cell:nth-child(odd) {
	background: rgba(0,0,0,0.01);
}

.day-cell:nth-child(even) {
	background: rgba(0,0,0,0.02);
}

.day-view-date {
	padding: 12px 16px;
	background: var(--cream);
	border-bottom: 1px solid var(--border);
}

.day-view-date-main {
	font-size: 18px;
	font-weight: 800;
	color: var(--forest);
}

.day-view-date-sub {
	font-size: 12px;
	color: var(--text-light);
	margin-top: 2px;
}

.day-view-table {
	display: flex;
	width: 100%;
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
	background: var(--white);
}

.day-view-time-column {
	width: 64px;
	min-width: 64px;
	flex-shrink: 0;
	background: var(--cream);
	border-right: 1px solid var(--border);
}

.time-cell-label {
	height: 64px;
	border-bottom: 1px solid var(--border);
	font-size: 10px;
	font-weight: 600;
	color: var(--text-light);
	text-align: right;
	padding: 4px 8px 0 0;
}

.day-view-stylists {
	display: flex;
	flex: 1;
	overflow-x: auto;
}

.stylist-col {
	flex: 1;
	min-width: 0;
	border-left: 1px solid var(--border);
}

.stylist-col-header {
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 8px;
	text-align: center;
	background: var(--white);
	border-bottom: 2px solid var(--border);
	box-sizing: border-box;
}

.stylist-col-name {
	font-size: 13px;
	font-weight: 700;
	color: var(--text-dark);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.stylist-col-body {
	position: relative;
}

.time-slot-cell {
	height: 64px;
	border-bottom: 1px solid var(--border);
}

.time-slot-cell:nth-child(odd) {
	background: rgba(0,0,0,0.01);
}

.time-slot-cell:nth-child(even) {
	background: rgba(0,0,0,0.02);
}

.day-view-empty {
	padding: 60px 20px;
	text-align: center;
	color: var(--text-light);
	font-size: 14px;
}

.appt-pill {
	position: absolute;
	left: 3px;
	right: 3px;
	box-sizing: border-box;
	border-radius: 6px;
	padding: 4px 8px;
	font-size: 11px;
	font-weight: 600;
	overflow: hidden;
	cursor: pointer;
	z-index: 1;
	box-shadow: 0 1px 4px rgba(0,0,0,0.15);
	border: 1px solid rgba(255,255,255,0.65);
	transition: transform 0.1s, box-shadow 0.1s;
}

.appt-pill:hover {
	transform: translateX(1px);
		box-shadow: 0 2px 8px rgba(0,0,0,0.2);
		z-index: 2;
	}

/* ── APPOINTMENT LIST ───────────────────────────────── */
.appt-list-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 12px;
	border-radius: 10px;
	cursor: pointer;
	transition: background 0.12s;
}

	.appt-list-item:hover {
		background: var(--cream-dark);
	}

.appt-color-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.appt-list-info {
	flex: 1;
	min-width: 0;
}

.appt-list-name {
	font-weight: 600;
	font-size: 14px;
	color: var(--text-dark);
}

.appt-list-detail {
	font-size: 12px;
	color: var(--text-light);
	margin-top: 1px;
}

.appt-list-time {
	font-size: 12px;
	color: var(--text-mid);
	white-space: nowrap;
}

.appt-list-price {
	font-size: 14px;
	font-weight: 700;
	color: var(--forest);
	white-space: nowrap;
}

/* ── PANELS & LAYOUT ────────────────────────────────── */
.two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.panel {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 14px;
	overflow: hidden;
	transition: background 0.25s, border-color 0.25s;
}

.panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--border);
	background: var(--cream);
	transition: background 0.25s;
}

.panel-title {
	font-size: 14px;
	font-weight: 700;
	color: var(--forest);
}

.panel-body {
	padding: 16px 20px;
}

/* ── BUTTONS ────────────────────────────────────────── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 20px;
	border-radius: 10px;
	border: 1.5px solid transparent;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: all 0.15s;
	white-space: nowrap;
	user-select: none;
	text-decoration: none;
}

	.btn:disabled {
		opacity: 0.45;
		cursor: not-allowed;
		transform: none !important;
	}

.btn-primary {
	background: var(--forest);
	color: #fff;
	border-color: var(--forest);
}

	.btn-primary:hover:not(:disabled) {
		background: var(--forest-mid);
		border-color: var(--forest-mid);
		transform: translateY(-1px);
		box-shadow: 0 4px 12px rgba(26,46,30,0.25);
	}

	.btn-primary:active:not(:disabled) {
		transform: translateY(0);
	}

.btn-outline {
	background: transparent;
	color: var(--forest);
	border-color: var(--border);
}

	.btn-outline:hover:not(:disabled) {
		background: var(--cream-dark);
		border-color: var(--forest);
	}

.btn-gold {
	background: var(--gold);
	color: #1a1a1a;
	border-color: var(--gold);
}

	.btn-gold:hover:not(:disabled) {
		background: var(--gold-light);
		border-color: var(--gold-light);
	}

.btn-secondary {
	background: var(--cream-dark);
	color: var(--text-mid);
	border-color: var(--border);
}

	.btn-secondary:hover:not(:disabled) {
		background: var(--border);
	}

.btn-sm {
	padding: 7px 14px;
	font-size: 13px;
	border-radius: 8px;
}

/* ── FORMS ──────────────────────────────────────────── */
.form-group {
	margin-bottom: 16px;
}

.form-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	color: var(--text-mid);
	margin-bottom: 6px;
}

.form-input {
	width: 100%;
	padding: 10px 14px;
	border-radius: 8px;
	border: 1.5px solid var(--border);
	font-size: 14px;
	font-weight: 500;
	color: var(--text-dark);
	background: var(--white);
	font-family: 'Plus Jakarta Sans', sans-serif;
	outline: none;
	transition: border-color 0.2s, background 0.25s;
}

	.form-input:focus {
		border-color: var(--forest);
	}

	.form-input::placeholder {
		color: var(--text-light);
	}

.form-select {
	width: 100%;
	padding: 10px 14px;
	border-radius: 8px;
	border: 1.5px solid var(--border);
	font-size: 14px;
	font-weight: 500;
	color: var(--text-dark);
	background: var(--white);
	font-family: 'Plus Jakarta Sans', sans-serif;
	outline: none;
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239a9a9a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 32px;
	transition: border-color 0.2s, background-color 0.25s;
}

	.form-select:focus {
		border-color: var(--forest);
	}

.two-input {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* ── MEMBER COMPONENTS ──────────────────────────────── */
.members-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}

.member-card {
	background: var(--white);
	border: 1.5px solid var(--border);
	border-radius: 14px;
	padding: 20px;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s, background 0.25s;
}

	.member-card:hover {
		border-color: var(--forest);
		box-shadow: 0 4px 16px rgba(26,46,30,0.12);
	}

.member-card-top {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}

.member-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 16px;
	flex-shrink: 0;
	color: #fff;
}

.avatar-vip    { background: #8b3a6b; }
.avatar-gold   { background: #c9a84c; color: #1a1a1a; }
.avatar-silver { background: #8fa8b8; }
.avatar-regular { background: var(--forest-light); }

.member-meta {
	flex: 1;
	min-width: 0;
}

	.member-meta .name {
		font-weight: 600;
		font-size: 15px;
		color: var(--text-dark);
		display: flex;
		align-items: center;
		gap: 6px;
		flex-wrap: wrap;
	}

	.member-meta .email {
		font-size: 12px;
		color: var(--text-light);
		margin-top: 1px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

.member-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	padding-top: 14px;
	border-top: 1px solid var(--border);
}

.member-stat {
	text-align: center;
}

.ms-label {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text-light);
	margin-bottom: 2px;
}

.ms-val {
	font-size: 14px;
	font-weight: 700;
	color: var(--forest);
}

.member-badge {
	display: inline-block;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 20px;
	letter-spacing: 0.5px;
}

.badge-vip    { background: rgba(139,58,107,0.12); color: #8b3a6b; }
.badge-gold   { background: rgba(201,168,76,0.15);  color: #8b6914; }
.badge-silver { background: rgba(143,168,184,0.15); color: #4a7a8e; }
.badge-purple { background: rgba(128,0,128,0.15); color: #800080; }
.badge-green  { background: rgba(40,167,69,0.15);  color: #28a745; }

/* Membership plan card */
.membership-card {
	border: 1.5px solid var(--border);
	border-radius: 12px;
	padding: 16px;
	cursor: pointer;
	transition: all 0.15s;
}

	.membership-card.selected,
	.membership-card:hover {
		border-color: var(--forest);
		background: rgba(26,46,30,0.04);
	}

/* ── MODALS ─────────────────────────────────────────── */
.modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.45);
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 16px;
}

.modal-overlay.open {
	display: flex !important;
}

.modal {
	display: none;
	position: relative;
	background: var(--white);
	border-radius: 16px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0,0,0,0.25);
	transition: background 0.25s;
}

.modal.open {
	display: block !important;
}

.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid var(--border);
	position: sticky;
	top: 0;
	background: var(--white);
	z-index: 1;
	transition: background 0.25s;
}

.modal-title {
	font-size: 18px;
	font-weight: 700;
	color: var(--forest);
}

.modal-close {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: var(--cream-dark);
	font-size: 18px;
	line-height: 1;
	color: var(--text-mid);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s;
	cursor: pointer;
}

.modal-close:hover {
	background: rgba(185,28,28,0.1);
	color: var(--danger);
}

.modal-body {
	padding: 0 24px 8px;
}

.modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding: 16px 24px;
	border-top: 1px solid var(--border);
}

/* ── MODAL INTERNAL ELEMENTS ───────────────────────────── */
/* Modal appointment form tabs - layout only, colors controlled via JS */
.modal .appointment-tabs,
.modal .form-group[style*="padding:4px"] {
	display: flex;
	gap: 8px;
	padding: 4px;
	background: var(--cream);
	border-radius: 10px;
}

.modal .tab-btn {
	flex: 1;
	padding: 10px;
	border: 2px solid var(--border);
	border-radius: 8px;
	background: var(--white);
	color: var(--text-dark);
	font-weight: normal;
	cursor: pointer;
	transition: all 0.2s;
	text-align: center;
}

.modal .tab-btn:hover {
	background: var(--cream-dark);
}

.modal .tab-btn.active {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
	font-weight: 600;
}

.modal .tab-btn.active:hover {
	background: var(--forest-mid);
	border-color: var(--forest-mid);
	color: #fff;
}

/* Ensure modal buttons use proper text colors (only text, preserve bg) */
.modal .btn-outline {
	color: var(--text-dark) !important;
}

.modal .btn-outline:hover {
	color: var(--forest) !important;
}

.modal .btn-primary {
	color: #fff !important;
}

.modal .btn-primary:hover {
	color: #fff !important;
}

/* Override any component styles for modal */
.modal .btn-primary,
#appointmentModal .btn-primary,
button[type="submit"].btn-primary,
#appointmentModal button[type="submit"],
#submitAppointmentBtn {
	color: #ffffff !important;
	background: #2d4a32 !important;
	border: none !important;
}

.modal .btn-danger {
	color: #fff !important;
}

/* Modal close button */
.modal-close {
	color: var(--text-mid) !important;
}

.modal-close:hover {
	color: var(--danger) !important;
}

/* ── SETTINGS PAGE ──────────────────────────────────── */
.settings-layout {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 24px;
	align-items: start;
}

.settings-nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	position: sticky;
	top: 0;
}

.settings-nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 10px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-mid);
	transition: all 0.15s;
	user-select: none;
}

.settings-nav-item .settings-nav-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	object-fit: contain;
}

/* Main sidebar nav SVGs use light strokes; on Settings light panel they need a dark silhouette */
.settings-nav-item:not(.active) .settings-nav-icon {
	filter: brightness(0);
	opacity: 0.58;
}

.settings-nav-item:hover:not(.active) .settings-nav-icon {
	opacity: 0.92;
}

	.settings-nav-item:hover {
		background: var(--cream-dark);
		color: var(--forest);
	}

	.settings-nav-item.active {
		background: var(--forest);
		color: #fff;
		font-weight: 600;
	}

	.settings-nav-item.active .settings-nav-icon {
		filter: brightness(0) invert(1);
		opacity: 1;
	}

[data-theme="dark"] .settings-nav-item:not(.active) .settings-nav-icon {
	filter: brightness(0) invert(1);
	opacity: 0.5;
}

[data-theme="dark"] .settings-nav-item:hover:not(.active) .settings-nav-icon {
	opacity: 0.9;
}

.settings-tier-range-hint {
	display: flex;
	align-items: center;
	gap: 8px;
}

.settings-tier-hint-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	object-fit: contain;
}

.settings-content {
	min-width: 0;
}

.settings-section {
	margin-bottom: 32px;
}

.settings-section-title {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--text-mid);
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--border);
}

/* Form groups (Design-based) */
.form-group {
    margin-bottom: 16px;
}
.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 6px;
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
}

/* Legacy form rows for backward compatibility */
.settings-form-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.settings-form-row label {
    flex: 0 0 140px;
    font-weight: 500;
    color: var(--text-dark);
}
.settings-form-row input,
.settings-form-row select {
    flex: 1;
}

/* Business hours rows */
.business-hours-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.business-hours-row .toggle-info {
    flex: 0 0 120px;
    font-weight: 500;
}
.business-hours-row .business-hours-controls {
    flex: 1;
    min-width: 300px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.business-hours-row .time-inputs {
    display: flex;
    gap: 10px;
    align-items: center;
    min-width: 260px;
}
.business-hours-row input[type="time"] {
    width: 120px;
    padding: 8px 12px;
    font-size: 14px;
    height: auto;
    min-height: auto;
    line-height: 1.1;
}
.business-hours-row .toggle-switch {
    margin-left: auto;
}

/* Toggle rows */
.toggle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
	border-bottom: 1px solid var(--border);
	gap: 16px;
}

.toggle-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.toggle-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-dark);
}

.toggle-desc {
	font-size: 12px;
	color: var(--text-light);
}

.toggle {
	position: relative;
	width: 44px;
	height: 24px;
	border-radius: 24px;
	border: none;
	background: var(--border);
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.2s;
}

	.toggle::before {
		content: '';
		position: absolute;
		top: 3px;
		left: 3px;
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: #fff;
		transition: transform 0.2s;
		box-shadow: 0 1px 3px rgba(0,0,0,0.2);
	}

	.toggle.on {
		background: var(--forest);
	}

		.toggle.on::before {
			transform: translateX(20px);
		}

/* Hardware cards */
.hardware-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border: 1.5px solid var(--border);
	border-radius: 10px;
	margin-bottom: 10px;
	background: var(--white);
	transition: background 0.25s;
}

.hw-left {
	display: flex;
	align-items: center;
	gap: 12px;
}

.hw-icon {
	font-size: 24px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.hw-icon .hw-icon-img {
	width: 26px;
	height: 26px;
	object-fit: contain;
	display: block;
}

.hw-name {
	font-weight: 600;
	font-size: 14px;
	color: var(--text-dark);
}

.hw-model {
	font-size: 12px;
	color: var(--text-light);
	margin-top: 2px;
}

.hw-status {
	font-size: 12px;
	font-weight: 600;
}

.hw-connected    { color: var(--success); }
.hw-disconnected { color: var(--text-light); }

/* ── POS SYSTEM ─────────────────────────────────────── */
.pos-layout {
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: 20px;
	align-items: start;
}

.pos-panel {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	transition: background 0.25s;
}

.service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 10px;
	padding: 16px;
}

.pos-items {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px;
	flex: 1;
	overflow-y: auto;
}

.pos-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border: 1.5px solid var(--border);
	border-radius: 10px;
	background: var(--white);
	transition: background 0.12s;
}

	.pos-item:hover {
		background: var(--cream);
	}

.pos-item-name {
	font-weight: 600;
	font-size: 14px;
	color: var(--text-dark);
}

.pos-item-sub {
	font-size: 12px;
	color: var(--text-light);
	margin-top: 1px;
}

.pos-item-price {
	font-weight: 700;
	color: var(--forest);
	font-size: 14px;
	margin-left: auto;
	white-space: nowrap;
}

.pos-item-remove {
	width: 24px;
	height: 24px;
	border-radius: 6px;
	border: none;
	background: none;
	font-size: 16px;
	color: var(--text-light);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.12s;
}

	.pos-item-remove:hover {
		background: rgba(185,28,28,0.1);
		color: var(--danger);
	}

.pos-summary {
	padding: 16px 20px;
	border-top: 1px solid var(--border);
}

.pos-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	margin-bottom: 8px;
	color: var(--text-mid);
}

	.pos-row.total {
		font-weight: 800;
		font-size: 18px;
		color: var(--forest);
		margin-top: 8px;
		padding-top: 8px;
		border-top: 1px solid var(--border);
		margin-bottom: 0;
	}

.pos-discount {
	color: var(--danger);
	font-weight: 600;
}

.pos-actions {
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* ── PAYMENT TABS & METHODS ─────────────────────────── */
.pay-tab-btn {
	flex: 1;
	padding: 10px;
	border: none;
	background: none;
	border-bottom: 2px solid transparent;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-light);
	cursor: pointer;
	transition: all 0.15s;
	font-family: inherit;
}

	.pay-tab-btn.active {
		color: var(--forest);
		border-bottom-color: var(--forest);
	}

.payment-method-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.pay-method {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1.5px solid var(--border);
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.15s;
	background: var(--white);
}

	.pay-method:hover {
		border-color: var(--forest);
	}

	.pay-method.selected {
		border-color: var(--forest);
		background: rgba(26,46,30,0.05);
	}

.pay-icon {
	font-size: 22px;
}

/* ── POS CART ITEMS ─────────────────────────────────── */
.pos-item-left {
	flex: 1;
	min-width: 0;
}

.qty-ctrl {
	display: flex;
	align-items: center;
	border: 1.5px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
}

.qty-btn {
	width: 28px;
	height: 28px;
	border: none;
	background: var(--cream-dark);
	color: var(--forest);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.12s;
	font-family: inherit;
}

	.qty-btn:hover { background: var(--cream); }
	.qty-btn:disabled { opacity: 0.35; cursor: default; }

.qty-num {
	min-width: 28px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	color: var(--text-dark);
	padding: 0 2px;
}

/* ── APPOINTMENT CLIENT DROPDOWN ────────────────────── */
.client-dropdown-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	cursor: pointer;
	transition: background 0.12s;
}

	.client-dropdown-item:hover { background: var(--cream-dark); }

.cd-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 800;
	flex-shrink: 0;
}

/* ── STAFF MANAGEMENT ───────────────────────────────── */
.staff-mgmt-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border: 1.5px solid var(--border);
	border-radius: 12px;
	background: var(--white);
	margin-bottom: 10px;
	transition: box-shadow 0.15s, border-color 0.15s;
}

	.staff-mgmt-card:hover {
		border-color: var(--forest-light);
		box-shadow: 0 2px 8px rgba(26,46,30,0.07);
	}

	.staff-mgmt-card.staff-inactive { opacity: 0.55; }

.staff-mgmt-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 800;
	flex-shrink: 0;
}

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

.staff-mgmt-name {
	font-size: 15px;
	font-weight: 700;
	color: var(--text-dark);
	margin-bottom: 3px;
}

.staff-mgmt-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--text-light);
}

.staff-mgmt-role {
	font-size: 12px;
	font-weight: 600;
	color: var(--forest);
	background: rgba(26,46,30,0.08);
	padding: 2px 8px;
	border-radius: 20px;
}

.staff-mgmt-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* Staff color selector chips */
.staff-color-chip {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 900;
	color: #fff;
	border: 2.5px solid transparent;
	transition: transform 0.12s, border-color 0.12s;
}

	.staff-color-chip:hover { transform: scale(1.15); }
	.staff-color-chip.selected {
		border-color: var(--text-dark);
		transform: scale(1.12);
	}

/* ── BUTTON VARIANTS ────────────────────────────────── */
.btn-danger {
	background: var(--danger);
	color: #fff;
	border: none;
}

	.btn-danger:hover { background: #991b1b; }

/* ── APPOINTMENT SERVICE ROW ────────────────────────── */
.appt-service-row-num {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--cream-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	color: var(--text-mid);
	flex-shrink: 0;
}

/* Dark mode overrides */
[data-theme="dark"] .staff-mgmt-card { background: var(--white); border-color: var(--border); }
[data-theme="dark"] .qty-btn { background: var(--cream-dark); }

/* ── REPORTS ────────────────────────────────────────── */
.report-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 16px;
}

.report-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 14px;
	overflow: hidden;
	transition: background 0.25s;
}

.rc-title {
	font-size: 13px;
	font-weight: 700;
	color: var(--text-mid);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--border);
}

/* Bar chart */
.bar-chart {
	padding: 14px 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bar-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.bar-label {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-mid);
	width: 80px;
	flex-shrink: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bar-track {
	flex: 1;
	height: 8px;
	background: var(--cream-dark);
	border-radius: 4px;
	overflow: hidden;
}

.bar-fill {
	height: 100%;
	border-radius: 4px;
	background: var(--forest);
	transition: width 0.4s ease;
}

.bar-val {
	font-size: 12px;
	font-weight: 700;
	color: var(--forest);
	width: 60px;
	text-align: right;
	flex-shrink: 0;
}

/* Staff report rows */
.staff-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 18px;
	border-bottom: 1px solid var(--border);
}

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

.staff-row-left {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
}

.staff-mini-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	flex-shrink: 0;
}

.staff-row-name {
	font-weight: 600;
	font-size: 14px;
	color: var(--text-dark);
}

.staff-row-sales {
	font-size: 12px;
	color: var(--text-light);
}

.staff-row-tip {
	font-weight: 700;
	font-size: 15px;
	color: var(--forest);
}

/* ── MOBILE NAVIGATION ──────────────────────────────── */
.mobile-nav {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--white);
	border-top: 1px solid var(--border);
	z-index: 90;
	transition: background 0.25s;
}

.mobile-nav-inner {
	display: flex;
	justify-content: space-around;
	padding: 8px 0 8px;
}

.mobile-nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 6px 12px;
	font-size: 10px;
	font-weight: 600;
	color: var(--text-light);
	cursor: pointer;
	border-radius: 8px;
	transition: color 0.15s;
	user-select: none;
	border: none;
	background: none;
	font-family: inherit;
}

	.mobile-nav-item.active {
		color: var(--forest);
	}

.mnav-icon {
	font-size: 20px;
}

.mobile-fab {
	position: fixed;
	bottom: 76px;
	right: 16px;
	z-index: 91;
}

.fab-btn {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: none;
	background: var(--forest);
	color: #fff;
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 16px rgba(26,46,30,0.35);
	transition: all 0.15s;
}

	.fab-btn:hover {
		background: var(--forest-mid);
		transform: scale(1.05);
	}

	.fab-btn.fab-main {
		width: 56px;
		height: 56px;
	}

/* ── DARK MODE OVERRIDES ────────────────────────────── */

/* Sidebar must stay dark even though --forest is now a lighter green */
[data-theme="dark"] .sidebar {
	background: #1a2e1e;
}

/* Buttons with forest background — keep dark green, use brighter text */
[data-theme="dark"] .btn-primary {
	background: #2d4a32;
	border-color: #2d4a32;
	color: #fff;
}
[data-theme="dark"] .btn-primary:hover:not(:disabled) {
	background: #3a5a40;
	border-color: #3a5a40;
}

/* Settings nav active item */
[data-theme="dark"] .settings-nav-item.active {
	background: #2d4a32;
	color: #fff;
}

/* Toggle on-state */
[data-theme="dark"] .toggle.on {
	background: #2d4a32;
}

/* Mobile FAB */
[data-theme="dark"] .fab-btn {
	background: #2d4a32;
}
[data-theme="dark"] .fab-btn:hover {
	background: #3a5a40;
}

/* Service category sidebar active item */
[data-theme="dark"] .svc-cat-item.active {
	background: #2d4a32;
	color: #fff;
}
[data-theme="dark"] .svc-toggle-pill.on {
	background: #2d4a32;
}

/* Report progress bar */
[data-theme="dark"] .report-prog-fill {
	background: #4a7a52;
}

/* VK action keys (Enter, Done) */
[data-theme="dark"] .vk-action,
[data-theme="dark"] .vk-done-num,
[data-theme="dark"] #vk-done-btn {
	background: #2d4a32;
	color: #fff;
}
[data-theme="dark"] .vk-action:active,
[data-theme="dark"] .vk-done-num:active {
	background: #3a5a40;
}
[data-theme="dark"] #vk-shift.vk-shift-on,
[data-theme="dark"] #vk-kor-shift.vk-shift-on {
	background: #2d4a32;
	color: #fff;
}

/* Calendar nav hover */
[data-theme="dark"] .cal-nav-btn:hover {
	background: #2d4a32;
	border-color: #2d4a32;
	color: #fff;
}

[data-theme="dark"] .topbar {
	background: var(--cream);
	border-color: var(--border);
}

[data-theme="dark"] .panel-header,
[data-theme="dark"] .week-header {
	background: var(--cream);
}

[data-theme="dark"] .stat-card,
[data-theme="dark"] .panel,
[data-theme="dark"] .member-card,
[data-theme="dark"] .pos-panel,
[data-theme="dark"] .hardware-card,
[data-theme="dark"] .week-grid,
[data-theme="dark"] .report-card,
[data-theme="dark"] .modal,
[data-theme="dark"] .modal-header {
	background: var(--white);
}

[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select {
	background: var(--cream-dark);
	color: var(--text-dark);
	border-color: var(--border);
}

[data-theme="dark"] .pos-item {
	background: var(--white);
	border-color: var(--border);
}

[data-theme="dark"] .pay-method {
	background: var(--white);
	border-color: var(--border);
}

[data-theme="dark"] .cal-nav-btn {
	background: var(--white);
	border-color: var(--border);
}

[data-theme="dark"] .mobile-nav {
	background: var(--white);
}

/* Mobile responsiveness (max-width: 768px) */
@media (max-width: 768px) {
    body {
        overflow: auto;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: -280px;
        height: 100vh;
        width: 280px;
        z-index: 101;
    }

    .sidebar.open {
        left: 0 !important;
    }

    .main {
        width: 100%;
        height: 100vh;
    }

    /* .mobile-menu-btn { display: flex; } */ /* Removed - use components.css default (block in mobile media query) */

    /* Desktop: hide mobile menu button */
    @media (min-width: 769px) {
        .topbar .mobile-menu-btn,
        .sidebar ~ .main .mobile-menu-btn,
        button.mobile-menu-btn {
            display: none !important;
        }
    }

    .topbar-right .btn:not(:last-child) {
        display: none;
    }

    .content {
        padding: 16px;
        padding-bottom: 80px;
    }

    .stats-row {
        grid-template-columns: 1fr 1fr;
    }

    .two-col {
        grid-template-columns: 1fr;
    }

    .members-grid {
        grid-template-columns: 1fr;
    }

    .pos-layout {
        grid-template-columns: 1fr;
    }

    .settings-layout {
        grid-template-columns: 1fr;
    }

    .mobile-nav {
        display: block;
    }

    .date-badge {
        display: none;
    }

    .page-title {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
	.stats-row {
		grid-template-columns: 1fr;
	}

	.two-input {
		grid-template-columns: 1fr;
	}
}

/* ── SERVICES PAGE ──────────────────────────────────── */
.svc-cat-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	cursor: pointer;
	border-radius: 8px;
	margin: 2px 8px;
	font-size: 14px;
	color: var(--text-mid);
	transition: background 0.15s;
	position: relative;
}
.svc-cat-item:hover { background: var(--cream-dark); }
.svc-cat-item.active {
	background: var(--forest);
	color: #fff;
}
.svc-cat-icon { font-size: 16px; flex-shrink: 0; }
.svc-cat-name { flex: 1; font-weight: 500; }
.svc-cat-count {
	font-size: 11px;
	font-weight: 700;
	background: rgba(0,0,0,0.08);
	border-radius: 20px;
	padding: 2px 7px;
	min-width: 22px;
	text-align: center;
}
.svc-cat-item.active .svc-cat-count { background: rgba(255,255,255,0.2); }
.svc-cat-actions {
	display: none;
	gap: 4px;
}
.svc-cat-item:hover .svc-cat-actions { display: flex; }
.svc-cat-actions button {
	background: none;
	border: none;
	padding: 2px 4px;
	cursor: pointer;
	border-radius: 4px;
	font-size: 13px;
	opacity: 0.7;
}
.svc-cat-actions button:hover { opacity: 1; background: rgba(0,0,0,0.08); }

/* Service Card Row */
.svc-card-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1.5px solid var(--border);
	border-radius: 12px;
	margin-bottom: 10px;
	background: var(--white);
	transition: box-shadow 0.15s, border-color 0.15s;
}
.svc-card-row:hover {
	border-color: var(--forest-light);
	box-shadow: 0 2px 8px rgba(26,46,30,0.08);
}
.svc-inactive { opacity: 0.5; }
.svc-card-icon { font-size: 28px; flex-shrink: 0; width: 40px; text-align: center; }
.svc-card-body { flex: 1; min-width: 0; }
.svc-card-name { font-size: 15px; font-weight: 700; color: var(--text-dark); margin-bottom: 4px; }
.svc-card-meta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--text-mid);
	margin-bottom: 6px;
}
.svc-meta-dot { color: var(--text-light); }
.svc-staff-row { display: flex; flex-wrap: wrap; gap: 4px; }
.svc-staff-chip {
	font-size: 11px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 20px;
	letter-spacing: 0.5px;
}

/* Service Card Actions */
.svc-card-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.svc-act-btn {
	padding: 6px 12px;
	border: 1.5px solid var(--border);
	border-radius: 8px;
	background: var(--cream-dark);
	font-size: 13px;
	cursor: pointer;
	color: var(--text-mid);
	transition: background 0.15s, border-color 0.15s;
}
.svc-act-btn:hover { background: var(--white); border-color: var(--forest-light); color: var(--forest); }
.svc-act-del:hover { border-color: var(--danger); color: var(--danger); }

/* Product icon picker */
.prod-icon-opt {
	font-size: 22px;
	padding: 4px;
	border-radius: 6px;
	cursor: pointer;
	border: 2px solid transparent;
	transition: border-color 0.15s, background 0.15s;
	line-height: 1.3;
}
.prod-icon-opt:hover { background: var(--cream-dark); }

/* Service Toggle Pill */
.svc-toggle-wrap { cursor: pointer; display: flex; align-items: center; }
.svc-toggle-pill {
	display: inline-block;
	width: 40px;
	height: 22px;
	border-radius: 11px;
	background: var(--border);
	position: relative;
	transition: background 0.2s;
}
.svc-toggle-pill::before {
	content: '';
	position: absolute;
	top: 3px; left: 3px;
	width: 16px; height: 16px;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.2s;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.svc-toggle-pill.on { background: var(--forest); }
.svc-toggle-pill.on::before { transform: translateX(18px); }

/* Staff selector chips in svc modal */
.svc-staff-sel-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 20px;
	border: 1.5px solid var(--border);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s;
	color: var(--text-mid);
	background: var(--cream-dark);
}
.svc-staff-sel-chip:hover { border-color: var(--forest-light); }
.svc-staff-sel-chip.selected { font-weight: 700; }

/* Dark mode overrides for services */
[data-theme="dark"] .svc-card-row { background: var(--white); border-color: var(--border); }
[data-theme="dark"] .svc-act-btn { background: var(--cream-dark); border-color: var(--border); color: var(--text-mid); }
[data-theme="dark"] .svc-cat-item:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .svc-staff-sel-chip { background: var(--cream-dark); border-color: var(--border); color: var(--text-mid); }

/* ── VIRTUAL KEYBOARD (app-wide) ────────────────────── */
#vk-overlay {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1200;
	background: #d1d5db;
	border: 1px solid #b0b3b8;
	border-radius: 16px;
	padding: 12px 12px 16px;
	user-select: none;
	-webkit-user-select: none;
	width: 480px;
	max-width: 96vw;
	box-shadow: 0 24px 64px rgba(0,0,0,0.35);
}

	#vk-overlay.vk-open {
		display: block;
	}

#vk-handle {
	width: 40px;
	height: 5px;
	background: rgba(0,0,0,0.22);
	border-radius: 3px;
	margin: 0 auto 10px;
	cursor: grab;
	transition: background 0.15s;
}

	#vk-handle:hover { background: rgba(0,0,0,0.38); }
	#vk-handle:active { cursor: grabbing; }

#vk-topbar {
	display: flex;
	align-items: center;
	padding: 0 4px 6px;
	gap: 8px;
}

#vk-preview-wrap {
	flex: 1;
	min-width: 0;
	background: #fff;
	border: 1px solid #c7c7c7;
	border-radius: 6px;
	padding: 6px 10px;
	font-size: 14px;
	color: #555;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#vk-done-btn {
	padding: 7px 16px;
	background: var(--forest);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
}

.vk-row {
	display: flex;
	gap: 5px;
	margin-bottom: 5px;
	justify-content: center;
}

	.vk-row:last-child {
		margin-bottom: 0;
	}

.vk-key {
	flex: 1;
	height: 42px;
	border-radius: 6px;
	border: none;
	background: #fff;
	font-size: 16px;
	font-weight: 500;
	color: #1a1a1a;
	cursor: pointer;
	font-family: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 0 rgba(0,0,0,0.28);
	transition: background 0.07s;
	padding: 0;
}

	.vk-key:active {
		background: #d0d4d9;
		box-shadow: none;
	}

.vk-special {
	background: #adb5bd;
	color: #1a1a1a;
}

	.vk-special:active {
		background: #8f979e;
	}

.vk-space {
	flex: 4;
	font-size: 13px;
	color: #555;
	letter-spacing: 0.5px;
}

.vk-action {
	flex: 1.6;
	background: var(--forest);
	color: #fff;
	font-size: 14px;
}

	.vk-action:active {
		background: var(--forest-mid);
	}

.vk-at-key {
	flex: 1.2;
	font-size: 15px;
	font-weight: 700;
	color: var(--forest);
}

.vk-email-key {
	flex: 1.4;
	font-size: 12px;
}

.vk-numpad-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 5px;
}

.vk-done-num {
	grid-column: 1 / -1;
	background: var(--forest);
	color: #fff;
	font-size: 14px;
}

	.vk-done-num:active {
		background: var(--forest-mid);
	}

/* Shift active state */
#vk-shift.shifted,
#vk-shift.vk-shift-on,
#vk-kor-shift.vk-shift-on {
	background: var(--forest);
	color: #fff;
}

/* Korean key font size (jamo chars are wider) */
.vk-kor-key {
	font-size: 15px;
}

[data-theme="dark"] #vk-overlay {
	background: #2a2720;
	border-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .vk-key {
	background: #3a3530;
	color: var(--text-dark);
	box-shadow: 0 1px 0 rgba(0,0,0,0.5);
}

[data-theme="dark"] .vk-special {
	background: #1e1b16;
}

[data-theme="dark"] #vk-preview-wrap {
	background: #1a1714;
	border-color: rgba(255,255,255,0.1);
	color: var(--text-light);
}

/* ═══════════════════════════════════════════════════════
   PAGE VIEW COMPONENTS (dotnet MVC views support)
   ═══════════════════════════════════════════════════════ */

/* ── PAGE CONTAINERS ─────────────────────────────────── */
.calendar-container,
.members-container,
.pos-container,
.reports-container,
.services-container,
.appointments-container,
.settings-container {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-height: 0;
}

/* ── COMMON TOOLBAR ──────────────────────────────────── */
.calendar-toolbar,
.members-toolbar,
.reports-toolbar,
.appointments-toolbar,
.services-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.calendar-nav,
.report-nav {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

/* ── SEARCH / FILTER ─────────────────────────────────── */
.search-input {
	flex: 1;
	max-width: 320px;
	padding: 9px 14px;
	border-radius: 8px;
	border: 1.5px solid var(--border);
	font-size: 14px;
	color: var(--text-dark);
	background: var(--white);
	outline: none;
	font-family: 'Plus Jakarta Sans', sans-serif;
	transition: border-color 0.2s;
}
.search-input:focus { border-color: var(--forest); }

.filter-select {
	padding: 9px 14px;
	border-radius: 8px;
	border: 1.5px solid var(--border);
	font-size: 13px;
	color: var(--text-dark);
	background: var(--white);
	font-family: 'Plus Jakarta Sans', sans-serif;
	cursor: pointer;
	outline: none;
}

.search-results {
	position: absolute;
	left: 0; right: 0;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.12);
	z-index: 200;
	max-height: 200px;
	overflow-y: auto;
}
.result-item {
	padding: 10px 14px;
	font-size: 13px;
	cursor: pointer;
}
.result-item:hover { background: var(--cream-dark); }

/* ── CALENDAR PAGE ───────────────────────────────────── */
.calendar-grid {
	background: var(--white);
	border-radius: 12px;
	border: 1px solid var(--border);
	overflow: hidden;
	flex: 1;
}
.cal-header {
	display: grid;
	grid-template-columns: 60px repeat(7, 1fr);
	background: var(--cream-dark);
	border-bottom: 1px solid var(--border);
}
.cal-time-col { width: 60px; }
.cal-day-header {
	padding: 10px 8px;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-mid);
	border-left: 1px solid var(--border);
}
.cal-body { overflow-y: auto; max-height: 520px; }
.cal-row {
	display: grid;
	grid-template-columns: 60px repeat(7, 1fr);
	border-bottom: 1px solid var(--border);
	min-height: 56px;
}
.cal-time {
	font-size: 11px;
	color: var(--text-light);
	padding: 8px 6px;
	text-align: right;
	flex-shrink: 0;
}
.cal-cell {
	border-left: 1px solid var(--border);
	padding: 4px;
	position: relative;
}
.cal-appointment {
	background: var(--forest);
	color: #fff;
	border-radius: 6px;
	padding: 4px 6px;
	font-size: 11px;
	margin-bottom: 2px;
	cursor: pointer;
}
.cal-appointment strong { display: block; font-size: 12px; }
.cal-appointment span   { display: block; font-size: 10px; opacity: 0.8; }

/* ── REPORTS PAGE ────────────────────────────────────── */
.kpi-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
}
.kpi-card {
	background: var(--white);
	border: 1.5px solid var(--border);
	border-radius: 14px;
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	transition: border-color 0.2s, background 0.25s;
}
.kpi-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--text-light);
}
.kpi-value {
	font-size: 28px;
	font-weight: 800;
	color: var(--forest);
	line-height: 1;
}

.stylist-performance { background: var(--white); border-radius: 12px; border: 1px solid var(--border); padding: 20px; }
.stylist-performance h3 { font-size: 15px; font-weight: 700; color: var(--text-dark); margin: 0 0 14px 0; }

.performance-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.performance-table th {
	text-align: left;
	padding: 8px 12px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text-light);
	border-bottom: 1.5px solid var(--border);
}
.performance-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--border);
	color: var(--text-dark);
}
.performance-table tr:last-child td { border-bottom: none; }
.performance-table tr:hover td { background: var(--cream-dark); }

.revenue-chart { background: var(--white); border-radius: 12px; border: 1px solid var(--border); padding: 20px; }
.revenue-chart h3 { font-size: 15px; font-weight: 700; color: var(--text-dark); margin: 0 0 14px 0; }
.chart-container {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 160px;
	padding-top: 16px;
}
.chart-bar {
	flex: 1;
	background: var(--forest-light);
	border-radius: 4px 4px 0 0;
	position: relative;
	min-width: 8px;
	transition: background 0.2s;
	cursor: pointer;
}
.chart-bar:hover { background: var(--forest); }
.bar-label {
	position: absolute;
	bottom: -18px;
	left: 50%; transform: translateX(-50%);
	font-size: 10px;
	color: var(--text-light);
	white-space: nowrap;
}
.bar-value {
	position: absolute;
	top: -18px;
	left: 50%; transform: translateX(-50%);
	font-size: 10px;
	color: var(--text-dark);
	font-weight: 600;
	white-space: nowrap;
}
.stylist-dot {
	display: inline-block;
	width: 10px; height: 10px;
	border-radius: 50%;
	margin-right: 6px;
	vertical-align: middle;
}

/* ── SERVICES PAGE ───────────────────────────────────── */
.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px;
}
.service-card-full {
	background: var(--white);
	border: 1.5px solid var(--border);
	border-radius: 12px;
	padding: 18px;
	display: flex;
	align-items: center;
	gap: 14px;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s;
}
.service-card-full:hover { border-color: var(--forest); box-shadow: 0 4px 12px rgba(26,46,30,0.1); }
.service-icon-large { font-size: 28px; flex-shrink: 0; }
.service-details { flex: 1; min-width: 0; }
.service-details h4 { font-size: 14px; font-weight: 700; color: var(--text-dark); margin: 0 0 2px 0; }
.service-duration { font-size: 12px; color: var(--text-light); }
.service-price-large { font-size: 16px; font-weight: 800; color: var(--forest); white-space: nowrap; }

/* ── APPOINTMENTS PAGE ───────────────────────────────── */
.appointments-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--white);
	border-radius: 12px;
	border: 1px solid var(--border);
	overflow: hidden;
	font-size: 13px;
}
.appointments-table th {
	text-align: left;
	padding: 12px 16px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text-light);
	background: var(--cream-dark);
	border-bottom: 1.5px solid var(--border);
}
.appointments-table td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--border);
	color: var(--text-dark);
	vertical-align: middle;
}
.appointments-table tr:last-child td { border-bottom: none; }
.appointments-table tr:hover td { background: var(--cream-dark); }
.status-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.status-booked      { background: rgba(74,144,226,0.12); color: #2563eb; }
.status-confirmed   { background: rgba(74,144,226,0.12); color: #2563eb; }
.status-completed   { background: rgba(61,102,66,0.12);  color: var(--forest); }
.status-cancelled   { background: rgba(220,53,69,0.12);  color: var(--danger); }
.status-no-show     { background: rgba(255,140,0,0.12);  color: #b45309; }
.status-in-progress { background: rgba(139,58,107,0.12); color: var(--vip); }
.status-scheduled   { background: rgba(100,100,100,0.12); color: var(--text-dark); }

/* ── APPOINTMENTS CARD STYLES ───────────────────────────── */
.appointment-card {
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.appointment-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: var(--forest);
}
.appt-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 12px;
}
.appt-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-dark);
}
.appt-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
.appt-details p {
    margin: 0;
    font-size: 13px;
    color: var(--text-mid);
}
.appt-details p strong {
    color: var(--text-dark);
    font-weight: 600;
}
.appt-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

/* ── SETTINGS PAGE ───────────────────────────────────── */
.settings-section {
	background: var(--white);
	border: 1.5px solid var(--border);
	border-radius: 14px;
	padding: 24px;
	transition: background 0.25s;
}
.settings-section h3 {
	font-size: 15px;
	font-weight: 700;
	color: var(--text-dark);
	margin: 0 0 16px 0;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--border);
}
.settings-form { display: flex; flex-direction: column; gap: 14px; }
.settings-form .form-group input,
.settings-form .form-group textarea,
.settings-form .form-group select {
	width: 100%;
	padding: 10px 14px;
	border-radius: 8px;
	border: 1.5px solid var(--border);
	font-size: 14px;
	font-family: 'Plus Jakarta Sans', sans-serif;
	color: var(--text-dark);
	background: var(--white);
	outline: none;
}
.settings-form .form-group label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--text-mid);
	display: block;
	margin-bottom: 6px;
}
.setting-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
}
.setting-row label { font-size: 14px; font-weight: 500; color: var(--text-dark); }
.tier-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
}
.tier-card {
	border: 1.5px solid var(--border);
	border-radius: 10px;
	padding: 16px;
	background: var(--cream);
}
.tier-card h4 { font-size: 14px; font-weight: 700; color: var(--forest); margin: 0 0 10px 0; }
.tier-rates { display: flex; flex-direction: column; gap: 4px; }
.tier-rates span { font-size: 12px; color: var(--text-mid); }
.stylist-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.stylist-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var(--cream-dark);
	border-radius: 8px;
}
.stylist-row input[type="text"],
.stylist-row input[type="number"] {
	flex: 1;
	padding: 6px 10px;
	border-radius: 6px;
	border: 1px solid var(--border);
	font-size: 13px;
	font-family: 'Plus Jakarta Sans', sans-serif;
	background: var(--white);
	color: var(--text-dark);
}
.stylist-row input[type="color"] {
	width: 32px; height: 32px;
	border-radius: 50%;
	border: 2px solid var(--border);
	cursor: pointer;
	padding: 0;
}
.settings-actions { display: flex; justify-content: flex-end; padding-top: 4px; }

/* ── POS PAGE (view-specific) ────────────────────────── */
.pos-container {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 20px;
	align-items: start;
}
.pos-main {
	grid-column: 1;
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 16px;
	align-items: start;
}
.pos-side { grid-column: 2; grid-row: 1; }
.pos-services h3,
.pos-cart h3 { font-size: 15px; font-weight: 700; color: var(--text-dark); margin: 0 0 12px 0; }
.service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
}
.service-card {
	background: var(--white);
	border: 1.5px solid var(--border);
	border-radius: 10px;
	padding: 14px;
	text-align: center;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.service-card:hover { border-color: var(--forest); box-shadow: 0 4px 10px rgba(26,46,30,0.1); }
.service-icon { font-size: 24px; }
.service-name { font-size: 13px; font-weight: 600; color: var(--text-dark); }
.service-price { font-size: 13px; font-weight: 700; color: var(--forest); }
.pos-cart {
	background: var(--white);
	border: 1.5px solid var(--border);
	border-radius: 12px;
	padding: 18px;
}
.cart-items { min-height: 80px; margin-bottom: 12px; }
.empty-cart { text-align: center; color: var(--text-light); font-size: 13px; padding: 20px 0; }
.cart-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px solid var(--border);
	font-size: 13px;
}
.cart-item span:first-child { flex: 1; }
.cart-item button { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 16px; }
.cart-summary { border-top: 1.5px solid var(--border); padding-top: 12px; }
.summary-row {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	padding: 4px 0;
	color: var(--text-mid);
}
.summary-row.total {
	font-size: 16px;
	font-weight: 800;
	color: var(--text-dark);
	margin-top: 6px;
	padding-top: 8px;
	border-top: 1.5px solid var(--border);
}
.pos-side {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.member-select,
.payment-method,
.gift-card {
	background: var(--white);
	border: 1.5px solid var(--border);
	border-radius: 12px;
	padding: 16px;
}
.member-select h4,
.payment-method h4,
.gift-card h4 {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--text-light);
	margin: 0 0 10px 0;
}
.member-select input,
.gift-card input {
	width: 100%;
	padding: 8px 12px;
	border-radius: 8px;
	border: 1.5px solid var(--border);
	font-size: 13px;
	font-family: 'Plus Jakarta Sans', sans-serif;
}
.method-buttons { display: flex; gap: 8px; }
.method-buttons .btn { flex: 1; justify-content: center; }
.method-buttons .btn.active { background: var(--forest); color: #fff; border-color: var(--forest); }
.gift-balance { font-size: 13px; color: var(--forest); font-weight: 600; margin-top: 8px; }
.selected-member {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	background: var(--cream-dark);
	border-radius: 8px;
	margin-top: 8px;
}
.selected-member .member-name { font-weight: 600; font-size: 13px; }

/* Dark mode adjustments for view pages */
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .service-card-full,
[data-theme="dark"] .appointments-table,
[data-theme="dark"] .settings-section,
[data-theme="dark"] .performance-table,
[data-theme="dark"] .revenue-chart,
[data-theme="dark"] .stylist-performance,
[data-theme="dark"] .pos-cart,
[data-theme="dark"] .member-select,
[data-theme="dark"] .payment-method,
[data-theme="dark"] .gift-card {
	background: var(--white);
	border-color: var(--border);
}

/* ===== DESIGN SYSTEM COMPATIBILITY ===== */
/* Form groups (Design-based) */
.form-group {
	margin-bottom: 16px;
}
.form-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-dark);
	margin-bottom: 6px;
}
.form-group input,
.form-group select,
.form-group textarea {
	width: 100%;
}

/* Panel components */
.panel {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow: hidden;
}
.panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid var(--border);
	background: var(--cream);
}
.panel-title {
	font-weight: 700;
	font-size: 14px;
	color: var(--text-dark);
}
.panel-body {
	padding: 16px;
}

/* Service grid (POS) */
.service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 10px;
	padding: 16px;
}

/* View tabs (Reports, POS) */
.view-tabs {
	display: flex;
	gap: 6px;
	background: var(--cream);
	padding: 4px;
	border-radius: 8px;
}
.view-tab {
	padding: 6px 12px;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	color: var(--text-mid);
	transition: all 0.15s;
}
.view-tab:hover {
	color: var(--text-dark);
}
.view-tab.active {
	background: var(--white);
	color: var(--forest);
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* =============================================
   PAGE-SPECIFIC TOP CARD COLORS
   ============================================= */

/* Calendar - Forest Green */
#page-calendar .stat-card {
    background: linear-gradient(135deg, var(--forest) 0%, var(--forest-mid) 100%);
    border-color: var(--forest);
    color: var(--white);
}
#page-calendar .stat-card .stat-label,
#page-calendar .stat-card .stat-sub {
    color: rgba(255, 255, 255, 0.7);
}
#page-calendar .stat-card .stat-value {
    color: var(--white);
}

/* POS - Gold */
#page-pos .stat-card {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
    border-color: var(--gold);
    color: var(--white);
}
#page-pos .stat-card .stat-label,
#page-pos .stat-card .stat-sub {
    color: rgba(255, 255, 255, 0.7);
}
#page-pos .stat-card .stat-value {
    color: var(--white);
}

/* Services - Sage Green */
#page-services .stat-card {
    background: linear-gradient(135deg, var(--sage) 0%, var(--sage-light) 100%);
    border-color: var(--sage);
    color: var(--white);
}
#page-services .stat-card .stat-label,
#page-services .stat-card .stat-sub {
    color: rgba(255, 255, 255, 0.7);
}
#page-services .stat-card .stat-value {
    color: var(--white);
}

/* Members - Silver */
#page-members .stat-card {
    background: linear-gradient(135deg, var(--silver) 0%, #d1dde6 100%);
    border-color: var(--silver);
    color: var(--white);
}
#page-members .stat-card .stat-label,
#page-members .stat-card .stat-sub {
    color: rgba(255, 255, 255, 0.7);
}
#page-members .stat-card .stat-value {
    color: var(--white);
}

/* Appointments - Forest Mid */
#page-appointments .stat-card {
    background: var(--forest-mid);
    border-color: var(--forest-mid);
    color: var(--white);
}
#page-appointments .stat-card .stat-label,
#page-appointments .stat-card .stat-sub {
    color: rgba(255, 255, 255, 0.7);
}
#page-appointments .stat-card .stat-value {
    color: var(--white);
}

/* Reports - Gold Light */
#page-reports .stat-card {
    background: linear-gradient(135deg, var(--gold-light) 0%, #f5e9c1 100%);
    border-color: var(--gold-light);
    color: var(--white);
}
#page-reports .stat-card .stat-label,
#page-reports .stat-card .stat-sub {
    color: rgba(255, 255, 255, 0.7);
}
#page-reports .stat-card .stat-value {
    color: var(--white);
}

/* Inventory - Forest Light */
#page-inventory .stat-card {
    background: linear-gradient(135deg, var(--forest-light) 0%, #a8c5a0 100%);
    border-color: var(--forest-light);
    color: var(--white);
}
#page-inventory .stat-card .stat-label,
#page-inventory .stat-card .stat-sub {
    color: rgba(255, 255, 255, 0.7);
}
#page-inventory .stat-card .stat-value {
    color: var(--white);
}

/* Stores - Forest */
#page-stores .stat-card {
    background: var(--forest);
    border-color: var(--forest);
    color: var(--white);
}
#page-stores .stat-card .stat-label,
#page-stores .stat-card .stat-sub {
    color: rgba(255, 255, 255, 0.7);
}
#page-stores .stat-card .stat-value {
    color: var(--white);
}

/* Settings - Neutral Gray */
#page-settings .stat-card {
    background: linear-gradient(135deg, #6a6a6a 0%, #9a9a9a 100%);
    border-color: #9a9a9a;
    color: var(--white);
}
#page-settings .stat-card .stat-label,
#page-settings .stat-card .stat-sub {
    color: rgba(255, 255, 255, 0.7);
}
#page-settings .stat-card .stat-value {
    color: var(--white);
}

/* User Management — top stats: distinct readable colors per metric */
#page-agents .agents-user-stats .stat-card {
    border-width: 1px;
    border-style: solid;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

#page-agents .agents-user-stats .agents-stat-total {
    background: linear-gradient(145deg, #eaf0f5 0%, #dde8f1 100%);
    border-color: #7a92a3;
}

#page-agents .agents-user-stats .agents-stat-total .stat-label {
    color: #4a6274;
}

#page-agents .agents-user-stats .agents-stat-total .stat-value {
    color: #2a4050;
}

#page-agents .agents-user-stats .agents-stat-active {
    background: linear-gradient(145deg, #e5f6ea 0%, #d2edd9 100%);
    border-color: #3d9a56;
}

#page-agents .agents-user-stats .agents-stat-active .stat-label {
    color: #2a6b3d;
}

#page-agents .agents-user-stats .agents-stat-active .stat-value {
    color: #1a4d28;
}

#page-agents .agents-user-stats .agents-stat-admin {
    background: linear-gradient(145deg, #f1e8f5 0%, #e5d6ed 100%);
    border-color: var(--vip);
}

#page-agents .agents-user-stats .agents-stat-admin .stat-label {
    color: #6b3560;
}

#page-agents .agents-user-stats .agents-stat-admin .stat-value {
    color: #4a2240;
}

#page-agents .agents-user-stats .agents-stat-manager {
    background: linear-gradient(145deg, #e8eef9 0%, #d8e3f5 100%);
    border-color: #4a6fa8;
}

#page-agents .agents-user-stats .agents-stat-manager .stat-label {
    color: #3a5580;
}

#page-agents .agents-user-stats .agents-stat-manager .stat-value {
    color: #243558;
}

#page-agents .agents-user-stats .agents-stat-stylist {
    background: linear-gradient(145deg, #faf4e6 0%, #f0e4c4 100%);
    border-color: var(--gold);
}

#page-agents .agents-user-stats .agents-stat-stylist .stat-label {
    color: #7a6220;
}

#page-agents .agents-user-stats .agents-stat-stylist .stat-value {
    color: #4d3d14;
}

[data-theme="dark"] #page-agents .agents-user-stats .agents-stat-total {
    background: linear-gradient(145deg, #2a3542 0%, #1f2833 100%);
    border-color: #5a6e82;
}

[data-theme="dark"] #page-agents .agents-user-stats .agents-stat-total .stat-label {
    color: #9eb0c0;
}

[data-theme="dark"] #page-agents .agents-user-stats .agents-stat-total .stat-value {
    color: #e8eef4;
}

[data-theme="dark"] #page-agents .agents-user-stats .agents-stat-active {
    background: linear-gradient(145deg, #1e3528 0%, #152a20 100%);
    border-color: #3d8a55;
}

[data-theme="dark"] #page-agents .agents-user-stats .agents-stat-active .stat-label {
    color: #8ec89a;
}

[data-theme="dark"] #page-agents .agents-user-stats .agents-stat-active .stat-value {
    color: #dff5e4;
}

[data-theme="dark"] #page-agents .agents-user-stats .agents-stat-admin {
    background: linear-gradient(145deg, #352238 0%, #28182c 100%);
    border-color: #8b4a78;
}

[data-theme="dark"] #page-agents .agents-user-stats .agents-stat-admin .stat-label {
    color: #d4a8c8;
}

[data-theme="dark"] #page-agents .agents-user-stats .agents-stat-admin .stat-value {
    color: #fceef8;
}

[data-theme="dark"] #page-agents .agents-user-stats .agents-stat-manager {
    background: linear-gradient(145deg, #243147 0%, #1a2638 100%);
    border-color: #4a6fa8;
}

[data-theme="dark"] #page-agents .agents-user-stats .agents-stat-manager .stat-label {
    color: #9bb4d8;
}

[data-theme="dark"] #page-agents .agents-user-stats .agents-stat-manager .stat-value {
    color: #e8f0fc;
}

[data-theme="dark"] #page-agents .agents-user-stats .agents-stat-stylist {
    background: linear-gradient(145deg, #3a3420 0%, #2a2618 100%);
    border-color: var(--gold);
}

[data-theme="dark"] #page-agents .agents-user-stats .agents-stat-stylist .stat-label {
    color: #dfc263;
}

[data-theme="dark"] #page-agents .agents-user-stats .agents-stat-stylist .stat-value {
    color: #faf4e0;
}


/* =============================================
/* Card 1: Today's Revenue - Gold */
#page-calendar .stats-row > div:nth-child(1) .stat-card {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
    border-color: var(--gold);
}

/* Card 2: Monthly Revenue - Forest */
#page-calendar .stats-row > div:nth-child(2) .stat-card {
    background: linear-gradient(135deg, var(--forest) 0%, var(--forest-mid) 100%);
    border-color: var(--forest);
}

/* Card 3: Tips Collected - VIP Purple */
#page-calendar .stats-row > div:nth-child(3) .stat-card {
    background: linear-gradient(135deg, var(--vip) 0%, #a84c8b 100%);
    border-color: var(--vip);
}

/* Card 4: Open Bookings - Silver */
#page-calendar .stats-row > div:nth-child(4) .stat-card {
    background: linear-gradient(135deg, var(--silver) 0%, #d1dde6 100%);
    border-color: var(--silver);
}


/* =============================================
   CALENDAR PAGE - INDIVIDUAL STAT CARD COLORS
   ============================================= */

/* Card 1: Today's Revenue - Gold */
#page-calendar .stat-card:nth-of-type(1) {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%) !important;
    border-color: var(--gold) !important;
}
#page-calendar .stat-card:nth-of-type(1) .stat-label,
#page-calendar .stat-card:nth-of-type(1) .stat-sub {
    color: rgba(255, 255, 255, 0.7) !important;
}
#page-calendar .stat-card:nth-of-type(1) .stat-value {
    color: var(--white) !important;
}

/* Card 2: Monthly Revenue - Forest */
#page-calendar .stat-card:nth-of-type(2) {
    background: linear-gradient(135deg, var(--forest) 0%, var(--forest-mid) 100%) !important;
    border-color: var(--forest) !important;
}
#page-calendar .stat-card:nth-of-type(2) .stat-label,
#page-calendar .stat-card:nth-of-type(2) .stat-sub {
    color: rgba(255, 255, 255, 0.7) !important;
}
#page-calendar .stat-card:nth-of-type(2) .stat-value {
    color: var(--white) !important;
}

/* Card 3: Tips Collected - VIP Purple */
#page-calendar .stat-card:nth-of-type(3) {
    background: linear-gradient(135deg, var(--vip) 0%, #a84c8b 100%) !important;
    border-color: var(--vip) !important;
}
#page-calendar .stat-card:nth-of-type(3) .stat-label,
#page-calendar .stat-card:nth-of-type(3) .stat-sub {
    color: rgba(255, 255, 255, 0.7) !important;
}
#page-calendar .stat-card:nth-of-type(3) .stat-value {
    color: var(--white) !important;
}

/* Card 4: Open Bookings - Silver */
#page-calendar .stat-card:nth-of-type(4) {
    background: linear-gradient(135deg, var(--silver) 0%, #d1dde6 100%) !important;
    border-color: var(--silver) !important;
}
#page-calendar .stat-card:nth-of-type(4) .stat-label,
#page-calendar .stat-card:nth-of-type(4) .stat-sub {
    color: rgba(255, 255, 255, 0.7) !important;
}
#page-calendar .stat-card:nth-of-type(4) .stat-value {
    color: var(--white) !important;
}


/* =============================================
   SERVICES PAGE - INDIVIDUAL STAT CARD COLORS
   ============================================= */

/* Card 1: Total Services - Forest */
#page-services .stat-card:nth-of-type(1) {
    background: linear-gradient(135deg, var(--forest) 0%, var(--forest-mid) 100%) !important;
    border-color: var(--forest) !important;
}
#page-services .stat-card:nth-of-type(1) .stat-label,
#page-services .stat-card:nth-of-type(1) .stat-sub {
    color: rgba(255, 255, 255, 0.7) !important;
}
#page-services .stat-card:nth-of-type(1) .stat-value {
    color: var(--white) !important;
}

/* Card 2: Categories - Gold */
#page-services .stat-card:nth-of-type(2) {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%) !important;
    border-color: var(--gold) !important;
}
#page-services .stat-card:nth-of-type(2) .stat-label,
#page-services .stat-card:nth-of-type(2) .stat-sub {
    color: rgba(255, 255, 255, 0.7) !important;
}
#page-services .stat-card:nth-of-type(2) .stat-value {
    color: var(--white) !important;
}

/* Card 3: Active Services - VIP Purple */
#page-services .stat-card:nth-of-type(3) {
    background: linear-gradient(135deg, var(--vip) 0%, #a84c8b 100%) !important;
    border-color: var(--vip) !important;
}
#page-services .stat-card:nth-of-type(3) .stat-label,
#page-services .stat-card:nth-of-type(3) .stat-sub {
    color: rgba(255, 255, 255, 0.7) !important;
}
#page-services .stat-card:nth-of-type(3) .stat-value {
    color: var(--white) !important;
}


/* =============================================
   REPORTS PAGE - INDIVIDUAL STAT CARD COLORS
   ============================================= */

/* Card 1: Revenue - Forest */
#page-reports .stat-card:nth-of-type(1) {
    background: linear-gradient(135deg, var(--forest) 0%, var(--forest-mid) 100%) !important;
    border-color: var(--forest) !important;
}
#page-reports .stat-card:nth-of-type(1) .stat-label,
#page-reports .stat-card:nth-of-type(1) .stat-sub {
    color: rgba(255, 255, 255, 0.7) !important;
}
#page-reports .stat-card:nth-of-type(1) .stat-value {
    color: var(--white) !important;
}

/* Card 2: Appointments - Gold */
#page-reports .stat-card:nth-of-type(2) {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%) !important;
    border-color: var(--gold) !important;
}
#page-reports .stat-card:nth-of-type(2) .stat-label,
#page-reports .stat-card:nth-of-type(2) .stat-sub {
    color: rgba(255, 255, 255, 0.7) !important;
}
#page-reports .stat-card:nth-of-type(2) .stat-value {
    color: var(--white) !important;
}

/* Card 3: Avg Ticket - Sage */
#page-reports .stat-card:nth-of-type(3) {
    background: linear-gradient(135deg, var(--sage) 0%, var(--sage-light) 100%) !important;
    border-color: var(--sage) !important;
}
#page-reports .stat-card:nth-of-type(3) .stat-label,
#page-reports .stat-card:nth-of-type(3) .stat-sub {
    color: rgba(255, 255, 255, 0.7) !important;
}
#page-reports .stat-card:nth-of-type(3) .stat-value {
    color: var(--white) !important;
}

/* Card 4: Tips - VIP Purple */
#page-reports .stat-card:nth-of-type(4) {
    background: linear-gradient(135deg, var(--vip) 0%, #a84c8b 100%) !important;
    border-color: var(--vip) !important;
}
#page-reports .stat-card:nth-of-type(4) .stat-label,
#page-reports .stat-card:nth-of-type(4) .stat-sub {
    color: rgba(255, 255, 255, 0.7) !important;
}
#page-reports .stat-card:nth-of-type(4) .stat-value {
    color: var(--white) !important;
}


/* =============================================
   STORES PAGE - INDIVIDUAL STAT CARD COLORS
   ============================================= */

/* Card 1: Stylist Count - Gold */
#page-stores .stat-card:nth-of-type(1) {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%) !important;
    border-color: var(--gold) !important;
}
#page-stores .stat-card:nth-of-type(1) .stat-label,
#page-stores .stat-card:nth-of-type(1) .stat-sub {
    color: rgba(255, 255, 255, 0.7) !important;
}
#page-stores .stat-card:nth-of-type(1) .stat-value {
    color: var(--white) !important;
}

/* Card 2: Service Count - Sage */
#page-stores .stat-card:nth-of-type(2) {
    background: linear-gradient(135deg, var(--sage) 0%, var(--sage-light) 100%) !important;
    border-color: var(--sage) !important;
}
#page-stores .stat-card:nth-of-type(2) .stat-label,
#page-stores .stat-card:nth-of-type(2) .stat-sub {
    color: rgba(255, 255, 255, 0.7) !important;
}
#page-stores .stat-card:nth-of-type(2) .stat-value {
    color: var(--white) !important;
}

/* Card 3: Product Count - Silver */
#page-stores .stat-card:nth-of-type(3) {
    background: linear-gradient(135deg, var(--silver) 0%, #d1dde6 100%) !important;
    border-color: var(--silver) !important;
}
#page-stores .stat-card:nth-of-type(3) .stat-label,
#page-stores .stat-card:nth-of-type(3) .stat-sub {
    color: rgba(255, 255, 255, 0.7) !important;
}
#page-stores .stat-card:nth-of-type(3) .stat-value {
    color: var(--white) !important;
}

/* Card 4: (Additional Store Stats) - VIP Purple */
#page-stores .stat-card:nth-of-type(4) {
    background: linear-gradient(135deg, var(--vip) 0%, #a84c8b 100%) !important;
    border-color: var(--vip) !important;
}
#page-stores .stat-card:nth-of-type(4) .stat-label,
#page-stores .stat-card:nth-of-type(4) .stat-sub {
    color: rgba(255, 255, 255, 0.7) !important;
}
#page-stores .stat-card:nth-of-type(4) .stat-value {
    color: var(--white) !important;
}


/* ── TOAST NOTIFICATIONS ───────────────────────────────── */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
    width: 100%;
}

.toast {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    backdrop-filter: blur(10px);
    background: var(--white);
    border: 1px solid var(--border);
    animation: slideIn 0.3s ease-out;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    min-width: 300px;
}

.toast.success {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    color: white;
    border: none;
}

.toast.error {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
    color: white;
    border: none;
}

.toast.warning {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    color: white;
    border: none;
}

.toast.info {
    background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
    color: white;
    border: none;
}

.toast-message {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    margin-right: 12px;
}

.toast-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.toast-close:hover {
    opacity: 1;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast.hiding {
    animation: slideOut 0.3s ease-out forwards;
}

/* Dark mode adjustments */
[data-theme="dark"] .toast {
    background: rgba(30, 30, 30, 0.95);
    border-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .toast:not(.success):not(.error):not(.warning):not(.info) {
    background: rgba(30, 30, 30, 0.95);
    color: var(--text-dark);
}

/* ============================================
   STORE SELECTOR - Multi-Store Support
   ============================================ */

.store-selector {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--white);
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 8px 36px 8px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dark);
    cursor: pointer;
    min-width: 160px;
    max-width: 240px;
    transition: all 0.2s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235a5a5a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    margin-left: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.store-selector:hover {
    border-color: var(--forest-mid);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.store-selector:focus {
    outline: none;
    border-color: var(--forest);
    box-shadow: 0 0 0 3px rgba(26, 46, 30, 0.15);
}

.store-selector option {
    padding: 10px 12px;
    font-size: 14px;
    color: var(--text-dark);
    background-color: var(--white);
}

.store-selector option:checked {
    background-color: var(--forest-light);
    color: var(--white);
}

/* Dark mode adjustments */
[data-theme="dark"] .store-selector {
    background-color: var(--cream);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--text-dark);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .store-selector:hover {
    border-color: var(--forest-light);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .store-selector:focus {
    border-color: var(--forest-light);
    box-shadow: 0 0 0 3px rgba(90, 170, 106, 0.2);
}

[data-theme="dark"] .store-selector option {
    background-color: var(--cream);
    color: var(--text-dark);
}

[data-theme="dark"] .store-selector option:checked {
    background-color: var(--forest-mid);
    color: var(--white);
}

/* Store indicator badge for current store */
.store-indicator {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: linear-gradient(135deg, var(--forest) 0%, var(--forest-mid) 100%);
    color: var(--white);
    border-radius: 24px;
    font-size: 13px;
    font-weight: 600;
    margin-left: 12px;
    box-shadow: 0 2px 6px rgba(26, 46, 30, 0.25);
    transition: all 0.2s ease;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.store-indicator:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(26, 46, 30, 0.35);
}

.store-indicator::before {
    content: "";
    width: 16px;
    height: 16px;
    background-image: url('/icons/nav/stores.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.store-indicator .store-name {
    font-weight: 700;
    color: var(--white);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.store-indicator .store-stats {
    display: flex;
    gap: 8px;
    font-size: 11px;
    font-weight: 500;
    opacity: 0.9;
    color: var(--cream);
}

.store-indicator .store-stat-item {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}

.store-indicator .store-stat-item::before {
    content: "";
    width: 10px;
    height: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.store-indicator .store-stat-item[data-kind="services"]::before {
    background-image: url('/icons/nav/services.svg');
}

.store-indicator .store-stat-item[data-kind="stylists"]::before {
    background-image: url('/icons/nav/users.svg');
}

.store-indicator .store-stat-item[data-kind="items"]::before {
    background-image: url('/icons/nav/inventory.svg');
}

[data-theme="dark"] .store-indicator {
    background: linear-gradient(135deg, var(--forest-mid) 0%, var(--forest-light) 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .store-indicator:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .store-indicator .store-stat-item {
    background-color: rgba(0, 0, 0, 0.2);
}

/* Responsive adjustments for store indicator */
@media (max-width: 768px) {
    .store-indicator {
        margin-left: 8px;
        padding: 4px 8px;
        font-size: 11px;
        max-width: 200px;
    }

    .store-indicator .store-name {
        max-width: 100px;
        font-size: 12px;
    }

    .store-indicator .store-stats {
        display: none;  /* Hide stats on small screens to save space */
    }

    .store-selector {
        margin-left: 8px;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .store-selector {
        min-width: 140px;
        max-width: 200px;
        padding: 6px 30px 6px 10px;
        font-size: 13px;
        margin-left: 8px;
    }
}

/* Responsive agents table for mobile */
@media (max-width: 768px) {
    .user-list-header {
        display: none;
    }

    .user-list-item {
        display: block;
        padding: 12px !important;
    }

    /* Hide non-essential columns on mobile (2-6: Email, Role, Stores, Staff, Status) */
    .user-list-item > div:nth-child(2),
    .user-list-item > div:nth-child(3),
    .user-list-item > div:nth-child(4),
    .user-list-item > div:nth-child(5),
    .user-list-item > div:nth-child(6) {
        display: none;
    }

    /* Show actions column */
    .user-list-item > div:nth-child(7) {
        display: flex;
        justify-content: flex-end;
        gap: 6px;
        margin-top: 8px;
        flex-wrap: wrap;
    }

    .user-list-item .btn {
        padding: 10px 14px;
        font-size: 13px;
        min-height: 40px;
        min-width: 50px;
    }
}

@media (max-width: 480px) {
    .user-list-item > div:nth-child(7) {
        gap: 4px;
    }

    .user-list-item .btn {
        padding: 12px 10px;
        font-size: 12px;
        min-width: 44px;
    }
}

/* ============================================
   AGENTS PAGE - MOBILE RESPONSIVE
   ============================================ */

/* User / stylist row: square icon action buttons (readable on any theme) */
.agents-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
}

.agents-action-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--cream-dark);
    color: var(--text-dark);
    cursor: pointer;
    line-height: 0;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.agents-action-btn:hover:not(:disabled) {
    background: var(--white);
    border-color: var(--forest-mid);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.agents-action-btn:focus-visible {
    outline: 2px solid var(--forest-mid);
    outline-offset: 2px;
}

.agents-action-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.agents-action-btn img {
    width: 18px;
    height: 18px;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

.agents-action-btn--edit {
    border-color: var(--forest-mid);
    background: var(--cream-dark);
}

.agents-action-btn--edit:hover:not(:disabled) {
    background: var(--white);
    border-color: var(--forest-mid);
}

.agents-action-btn--danger {
    border-color: var(--danger);
    background: var(--cream-dark);
}

.agents-action-btn--danger:hover:not(:disabled) {
    background: var(--white);
    border-color: var(--danger);
}

[data-theme="dark"] .agents-action-btn:hover:not(:disabled) {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* Agents: single table (thead + tbody), wide Actions for one-line icon row */
.agents-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.agents-data-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
}

.agents-data-table thead th {
    padding: 12px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-light);
    text-align: left;
    vertical-align: middle;
    border-bottom: 2px solid var(--border);
    background: var(--cream-dark);
}

.agents-data-table tbody td {
    padding: 12px 10px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
}

.agents-data-table tbody tr:last-child td {
    border-bottom: none;
}

.agents-data-table__th-center,
.agents-data-table__td-center {
    text-align: center;
}

.agents-data-table__th-left,
.agents-data-table__td-left {
    text-align: left;
}

.agents-data-table__th-actions,
.agents-data-table__td-actions {
    text-align: right;
    vertical-align: middle;
}

.agents-data-table--users .agents-col-actions {
    width: 248px;
}

.agents-data-table--users .agents-data-table__th-actions,
.agents-data-table--users .agents-data-table__td-actions {
    width: 248px;
    min-width: 248px;
    max-width: 248px;
    white-space: nowrap;
}

.agents-data-table--stylists .agents-stylist-col-actions {
    width: 112px;
}

.agents-data-table--stylists .agents-data-table__th-actions,
.agents-data-table--stylists .agents-data-table__td-actions {
    width: 112px;
    min-width: 112px;
    max-width: 112px;
    white-space: nowrap;
}

.agents-data-table__td-actions .agents-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
}

.agents-data-table__empty {
    text-align: center;
    padding: 40px 16px !important;
    color: var(--text-light);
    border-bottom: none !important;
}

.agents-data-table--users .agents-col-user {
    width: 14%;
}

.agents-data-table--users .agents-col-email {
    width: 24%;
}

.agents-data-table--users .agents-col-role {
    width: 9%;
}

.agents-data-table--users .agents-col-stores {
    width: 18%;
}

.agents-data-table--users .agents-col-staff {
    width: 12%;
}

.agents-data-table--users .agents-col-status {
    width: 9%;
}

.agents-data-table--stylists .agents-stylist-col-name {
    width: 32%;
}

.agents-data-table--stylists .agents-stylist-col-store {
    width: 12%;
}

.agents-data-table--stylists .agents-stylist-col-role {
    width: 14%;
}

.agents-data-table--stylists .agents-stylist-col-commission {
    width: 12%;
}

.agents-data-table--stylists .agents-stylist-col-status {
    width: 14%;
}

@media (max-width: 480px) {
    .agents-action-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }

    .agents-action-btn img {
        width: 16px;
        height: 16px;
    }
}

/* Allow horizontal scroll for wide tables on mobile */
@media (max-width: 768px) {
    .panel.panel-responsive-scroll {
        margin: 0 -16px;
        padding: 0 16px;
    }

    /* Toolbar: stack elements vertically on small screens */
    .agents-toolbar {
        flex-direction: column;
        align-items: stretch !important;
    }

    .agents-toolbar > div:first-child {
        width: 100%;
        margin-bottom: 8px;
    }

    .agents-toolbar input#agentSearch {
        width: 100% !important;
        flex: 1;
        min-width: auto !important;
    }

    .agents-toolbar select {
        flex: 1;
        min-width: 0;
    }

    .agents-toolbar .btn {
        width: 100%;
        margin-top: 8px;
    }
}

/* Tablet styles */
@media (min-width: 769px) and (max-width: 1024px) {
    .panel.panel-responsive-scroll {
        margin: 0 -12px;
        padding: 0 12px;
    }
}

/* Improve touch scrolling on iOS */
.panel.panel-responsive-scroll {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--text-light) transparent;
}

.panel.panel-responsive-scroll::-webkit-scrollbar {
    height: 8px;
}

.panel.panel-responsive-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.panel.panel-responsive-scroll::-webkit-scrollbar-thumb {
    background-color: var(--text-light);
    border-radius: 4px;
    opacity: 0.5;
}

/* ============================================
   USER INFO FOOTER - Login User Display
   ============================================ */

.user-info-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, var(--cream-dark) 0%, var(--cream) 100%);
    border-top: 1px solid var(--border);
    padding: 8px 20px;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

[data-theme="dark"] .user-info-footer {
    background: linear-gradient(to top, rgba(30, 30, 30, 0.95) 0%, rgba(20, 20, 20, 0.95) 100%);
    border-top-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

.user-info-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    max-width: 1600px;
    margin: 0 auto;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 14px;
    background-color: var(--white);
    border: 1px solid var(--border);
    border-radius: 25px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

[data-theme="dark"] .user-info {
    background-color: var(--cream);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.user-info:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--forest) 0%, var(--forest-mid) 100%);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(26, 46, 30, 0.2);
}

[data-theme="dark"] .user-avatar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.user-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-right: 8px;
}

.user-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-dark);
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-role {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-mid);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="dark"] .user-role {
    color: var(--text-light);
}

.logout-btn {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 18px;
    background-color: transparent;
    border-color: var(--border);
    color: var(--text-mid);
    cursor: pointer;
    transition: all 0.2s ease;
}

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

/* Responsive adjustments */
@media (max-width: 768px) {
    .user-info-footer {
        padding: 6px 12px;
    }

    .user-info {
        padding: 4px 10px;
        gap: 8px;
    }

    .user-avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .user-name {
        font-size: 13px;
        max-width: 100px;
    }

    .user-role {
        font-size: 10px;
    }

    .logout-btn {
        padding: 4px 8px;
        font-size: 11px;
    }
}

/* ── CALENDAR MONTH VIEW ─────────────────────────────── */
.month-header {
    display: flex;
    flex-direction: column;
    background: var(--cream);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.month-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--cream);
    border-bottom: 1px solid var(--border);
}

.month-nav .cal-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--white);
    cursor: pointer;
    font-size: 18px;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.month-nav .cal-nav-btn:hover {
    background: var(--forest);
    color: #fff;
    border-color: var(--forest);
}

.month-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    flex: 1;
    text-align: center;
}

.month-nav .btn-sm {
    font-size: 12px;
    padding: 6px 14px;
}

.month-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--cream);
    border-bottom: 1px solid var(--border);
}

.month-weekday {
    text-align: center;
    padding: 8px 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-mid);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-left: 1px solid var(--border);
}

.month-weekday:first-child {
    border-left: none;
}

/* Month grid: 6 rows x 7 columns */
.month-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(6, minmax(100px, 1fr));
    gap: 1px;
    background: var(--border);
    flex: 1;
    overflow-y: auto;
    position: relative;
}

.month-day {
    background: var(--white);
    min-height: 100px;
    padding: 6px 8px;
    position: relative;
    transition: background 0.15s;
    cursor: pointer;
}

.month-day:hover {
    background: var(--cream-dark);
}

.month-day.today {
    background: rgba(26, 46, 30, 0.05);
}

.month-day.today .month-day-num {
    background: var(--forest);
    color: #fff;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.month-day.other-month {
    background: var(--cream);
    opacity: 0.6;
}

.month-day.drag-over {
    background: rgba(45, 74, 50, 0.15);
}

.month-day-num {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 4px;
    width: 24px;
    height: 24px;
    line-height: 24px;
}

.month-day-appts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.month-appt-pill {
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 11px;
    color: #fff;
    overflow: hidden;
    cursor: pointer;
    transition: opacity 0.15s;
    line-height: 1.3;
}

.month-appt-pill:hover {
    opacity: 0.85;
}

.month-more {
    font-size: 11px;
    color: var(--text-mid);
    padding: 2px 4px;
    text-align: center;
}

.month-total {
    font-size: 11px;
    color: var(--text-mid);
    text-align: center;
    padding: 4px;
}

/* Agenda view styles */
#weekBody.agenda-view {
    display: block;
    padding: 8px;
}

.appt-list-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
    cursor: pointer;
}

.appt-list-item:hover {
    background: var(--cream-dark);
}

.appt-color-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}

.appt-list-info {
    flex: 1;
    min-width: 0;
}

.appt-list-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 2px;
}

.member-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 6px;
    text-transform: uppercase;
    font-weight: 700;
}

.badge-vip {
    background: var(--vip);
    color: #fff;
}

.badge-gold {
    background: var(--gold);
    color: var(--text-dark);
}

.badge-silver {
    background: var(--silver);
    color: var(--text-dark);
}

.appt-list-detail {
    font-size: 13px;
    color: var(--text-mid);
    line-height: 1.4;
}

.appt-list-time {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-mid);
    white-space: nowrap;
    margin-bottom: 2px;
}

.appt-list-price {
    font-size: 14px;
    font-weight: 700;
    color: var(--forest);
}

[data-theme="dark"] .month-day {
    background: #1a1714;
}

[data-theme="dark"] .month-day.today {
    background: rgba(90, 170, 104, 0.1);
}

[data-theme="dark"] .month-day.other-month {
    background: var(--cream);
    opacity: 0.4;
}

[data-theme="dark"] .appt-list-item:hover {
    background: var(--cream-dark);
}

/* Store Management: Copy Reference Data modal */
.copy-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: min(64vh, 620px);
    overflow-y: auto;
    padding-right: 4px;
}

.copy-modal-grid {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin-bottom: 0;
}

.copy-form > .copy-modal-grid:first-of-type {
    margin-top: 6px;
}

.copy-modal-grid .form-label {
    margin-top: 8px;
    font-weight: 600;
    color: var(--text);
}

.copy-modal-checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.4;
}

.copy-modal-checkbox-wrapper input[type="checkbox"] {
    margin-top: 2px;
}

.copy-overwrite-note {
    color: var(--text-light);
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
}

.copy-options-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.copy-option-card {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-light, #f8f9fa);
}

.copy-option-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.copy-data-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0;
}

.copy-warning {
    display: none;
    margin-top: 4px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(194, 120, 3, 0.35);
    background: rgba(255, 193, 7, 0.12);
    color: #7a5400;
    font-size: 13px;
    line-height: 1.5;
}

.copy-warning.show {
    display: block;
}

.copy-progress,
.copy-results {
    display: none;
    margin-top: 4px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-light, #f8f9fa);
}

.copy-progress.show,
.copy-results.show {
    display: block !important;
}

.copy-progress-header {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

#copyProgressList > div {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    line-height: 1.45;
    padding: 4px 0;
}

.copy-results-inner h4 {
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.copy-results-inner p {
    margin: 0 0 10px 0;
    color: var(--text-mid);
}

.copy-results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;
}

.copy-results-table th,
.copy-results-table td {
    border-top: 1px solid var(--border);
    padding: 9px 8px;
    text-align: left;
    vertical-align: top;
}

.copy-results-table th {
    color: var(--text-light);
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(26, 77, 46, 0.06);
}

.copy-results-table th:nth-child(1) {
    width: 24%;
}

.copy-results-table th:nth-child(2),
.copy-results-table th:nth-child(3) {
    width: 12%;
}

.copy-results-table th:nth-child(4) {
    width: 52%;
}

.copy-results-table .text-right {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.copy-results-table tr.has-error td {
    background: rgba(220, 53, 69, 0.06);
}

.copy-results-table tbody tr:nth-child(even) td {
    background: rgba(26, 77, 46, 0.035);
}

.copy-results-table td:last-child {
    word-break: break-word;
    line-height: 1.45;
}

.copy-results-summary {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
}

.copy-results-summary.success {
    background: rgba(46, 125, 50, 0.12);
    color: #1f5f24;
    border: 1px solid rgba(46, 125, 50, 0.25);
}

.copy-results-summary.error {
    background: rgba(198, 40, 40, 0.1);
    color: #8d2222;
    border: 1px solid rgba(198, 40, 40, 0.25);
}

@media (max-width: 760px) {
    .copy-modal-grid {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .copy-modal-grid .form-label {
        margin-top: 0;
    }

    .copy-options-layout {
        grid-template-columns: 1fr;
    }
}

/* Store Management list - single table layout */
.stores-table-row {
    padding: 12px;
    border-top: 1px solid var(--border);
}

.stores-table-grid {
    display: grid;
    grid-template-columns: 0.4fr 0.4fr 0.4fr 0.3fr 0.3fr 0.3fr auto;
    gap: 12px;
    align-items: center;
}

.stores-table-grid-header {
    font-weight: 600;
    color: var(--text-light);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.stores-table-row-header {
    border-top: none;
    border-bottom: 1px solid var(--border);
    background: rgba(26, 77, 46, 0.04);
}

.stores-table-row:nth-child(even) {
    background: rgba(26, 77, 46, 0.035);
}

.stores-table-row:hover {
    background: rgba(26, 77, 46, 0.12);
}

.stores-table-row-header:hover {
    background: rgba(26, 77, 46, 0.04);
}

/* Store Management - Manage Users table layout */
.store-users-table-wrap {
    margin-top: 8px;
    max-height: 260px;
    overflow-y: auto;
}

.store-users-row {
    padding: 10px 12px;
    border-top: 1px solid var(--border);
}

.store-users-row-header {
    border-top: none;
    border-bottom: 1px solid var(--border);
    background: rgba(26, 77, 46, 0.04);
}

.store-users-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 120px 120px;
    gap: 12px;
    align-items: center;
}

.store-users-grid-header {
    font-weight: 600;
    color: var(--text-light);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.store-users-row:nth-child(even) {
    background: rgba(26, 77, 46, 0.03);
}

.store-users-row:hover {
    background: rgba(26, 77, 46, 0.1);
}

.store-users-row-header:hover {
    background: rgba(26, 77, 46, 0.04);
}