:root {
	--color-gradient-start: #667eea;
	--color-gradient-end: #764ba2;
	--color-primary: #667eea;
	--color-primary-2: #764ba2;
	--color-surface: #ffffff;
	--color-surface-muted: #f5f6fa;
	--color-text-on-gradient: #ffffff;
	--color-text-on-surface: #1f2937;
	--color-border: #e5e7eb;
	--focus-ring: 0 0 0 0.2rem rgba(102,126,234,0.35);
	--radius-sm: 6px;
	--radius-md: 10px;
	--spacing: 24px;
}

/* Global page background gradient */
body {
	background: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 100%);
	color: var(--color-text-on-surface);
}

/* Sidebar */
.sidebar {
	background: #1f2241;
}
.sidebar .brand {
	color: #fff;
}
.sidebar a { color: #cfd3ff; }
.sidebar a.active {
	background: rgba(255,255,255,0.08);
	border-left-color: var(--color-primary);
	color: #fff;
}
.sidebar a:hover { color: #fff; }

/* Topbar minimal */
.topbar { color: #fff; }

/* ========================================
   USER MENU DROPDOWN - REBUILT FROM SCRATCH
   ======================================== */

/* Container */
.user-menu-container {
	position: relative;
	display: inline-block;
}

/* Button */
.user-menu-btn {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #ffffff;
	color: #1f2937;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-menu-btn:hover {
	background: #f9fafb;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transform: translateY(-1px);
}

.user-menu-btn:active {
	transform: translateY(0);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.user-menu-btn .bi-person-circle {
	font-size: 18px;
	color: var(--color-primary);
}

.user-menu-btn .user-name {
	color: #1f2937;
	font-weight: 500;
}

.user-menu-btn .chevron-icon {
	font-size: 12px;
	color: #6b7280;
	transition: transform 0.2s ease;
}

.user-menu-btn[aria-expanded="true"] .chevron-icon {
	transform: rotate(180deg);
}

/* Dropdown Menu */
.user-menu-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	min-width: 200px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: all 0.2s ease;
	z-index: 1000;
}

.user-menu-dropdown.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Menu Items */
.user-menu-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	color: #1f2937;
	text-decoration: none;
	transition: all 0.15s ease;
	border-radius: 6px;
	margin: 4px;
}

.user-menu-item:hover {
	background: #f3f4f6;
	color: var(--color-primary);
}

.user-menu-item i {
	font-size: 16px;
	color: var(--color-primary);
}

.user-menu-item span {
	font-size: 14px;
	font-weight: 500;
}

/* Headers on gradient blocks */
.header-section .display-5,
.header-section .display-6,
.header-section h1,
.header-section h2,
.header-section p,
.header-section .lead {
	color: var(--color-text-on-gradient) !important;
}

/* Section containers */
.main-container { max-width: 100%; }
.content-section { padding: var(--spacing); }

/* Cards/Sections on surface */
.info-card,
.search-section,
.pagination-section,
.table-responsive {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: none;
}

/* Buttons */
.btn-gradient,
.btn-view,
.btn-apply-filters {
	background: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 100%);
	border: none;
	color: #fff !important;
}
.btn-gradient:hover,
.btn-view:hover,
.btn-apply-filters:hover {
	filter: brightness(1.05);
}
.btn:focus { box-shadow: var(--focus-ring); }

/* Inputs */
.form-control:focus,
.form-select:focus { border-color: var(--color-primary); box-shadow: var(--focus-ring); }

/* Badges (status) */
.status-badge.active { background-color: #2ea043; color: #fff; }
.status-badge.pending { background-color: #f59e0b; color: #fff; }
.status-badge.inactive { background-color: #e5534b; color: #fff; }

/* Tables */
.table thead th {
	background: linear-gradient(135deg, var(--color-gradient-start) 0%, var(--color-gradient-end) 100%);
	color: #fff;
	border: none;
}
.table tbody tr:hover { background-color: #fafafa; }

/* Utility spacing adjustments for tighter, cleaner layout */
.stats-cards .stat-card { border-radius: var(--radius-md); }
.stat-number { font-size: 2.25rem; }

/* Breadcrumb on surface */
.breadcrumb-nav { padding: 0; }
.breadcrumb .breadcrumb-item a { color: var(--color-primary); }
.breadcrumb .breadcrumb-item.active { color: #6b7280; }

/* Analytics chart canvas spacing */
#analyticsChart { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px; }

/* Pagination */
.pagination .page-link,
.pagination .page-link:visited,
.pagination .page-item .page-link { color: #fff !important; border-color: var(--color-primary); background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end)); }
.pagination .page-link:hover { filter: brightness(1.05); color: #fff !important; }
.pagination .page-item.active .page-link { background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end)); border-color: var(--color-primary); color: #fff !important; }
.pagination .page-item.disabled .page-link { color: rgba(255,255,255,0.75) !important; background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end)); border-color: var(--color-primary); }

/* Toast override to ensure legibility */
.toast .toast-body { color: #fff; }

/* Ensure all header-section text is white (for metrics like "10 Total Volunteers") */
.header-section { color: #ffffff !important; }
.header-section i { color: #ffffff; }

/* Breadcrumb on gradient header/content area */
.breadcrumb-nav,
.breadcrumb-nav .breadcrumb-item,
.breadcrumb-nav .breadcrumb-item a { color: #ffffff !important; }
.breadcrumb-nav .breadcrumb-item.active { color: rgba(255,255,255,0.85) !important; }

/* Inside surface cards, use dark section titles for contrast */
.info-card .section-title { color: var(--color-text-on-surface); border-bottom: 3px solid var(--color-border); }
.info-card .section-title i { color: var(--color-primary); }

/* ============================================
   MOBILE-FIRST RESPONSIVE FRAMEWORK
   Bootstrap 5 breakpoints (mobile-first):
   - xs: 0-575px (phones portrait)
   - sm: 576-767px (phones landscape)
   - md: 768-991px (tablets portrait)
   - lg: 992-1199px (tablets landscape, existing sidebar breakpoint)
   - xl: 1200-1399px (desktops)
   - xxl: 1400px+ (large desktops)
   ============================================ */

/* ============================================
   1. TOUCH TARGET UTILITIES (WCAG 2.2 Compliant)
   Minimum 48×48px touch targets for accessibility
   ============================================ */

.btn-touch,
.btn,
button {
	min-height: 48px;
	min-width: 48px;
}

/* Ensure all buttons have proper spacing */
.btn,
button {
	margin: 4px 0;
}

/* ============================================
   2. MOBILE FORM OPTIMIZATION
   Prevents iOS auto-zoom with 16px minimum font-size
   ============================================ */

@media (max-width: 767px) {
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="password"],
	input[type="number"],
	input[type="date"],
	input[type="time"],
	select,
	textarea,
	.form-control,
	.form-select {
		font-size: 16px;
		min-height: 48px;
		padding: 12px 16px;
	}

	/* Form groups - optimized spacing */
	.form-group {
		margin-bottom: 16px;
	}
}

/* ============================================
   3. RESPONSIVE GRID PATTERN
   Mobile-first grid that collapses gracefully
   ============================================ */

.responsive-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 1rem;
}

/* ============================================
   4. TABLE TO CARD TRANSFORMATION
   Uses data-label attributes for mobile display
   ============================================ */

@media (max-width: 767px) {
	.mobile-cards table,
	.mobile-cards thead,
	.mobile-cards tbody,
	.mobile-cards th,
	.mobile-cards td,
	.mobile-cards tr {
		display: block;
	}

	.mobile-cards thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	.mobile-cards tr {
		margin-bottom: 16px;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		padding: 16px;
		background: var(--color-surface);
	}

	.mobile-cards td {
		border: none;
		position: relative;
		padding-left: 50%;
		padding-top: 8px;
		padding-bottom: 8px;
		min-height: 48px;
		display: flex;
		align-items: center;
	}

	.mobile-cards td:before {
		content: attr(data-label);
		position: absolute;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
		font-weight: bold;
		color: var(--color-primary);
	}
}

/* ============================================
   5. STICKY BUTTON PATTERN (iOS-Safe)
   Fixed bottom buttons with safe area insets
   ============================================ */

@media (max-width: 767px) {
	.sticky-mobile-cta {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 16px;
		padding-bottom: calc(16px + env(safe-area-inset-bottom));
		background: white;
		box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
		z-index: 1000;
	}

	.sticky-mobile-cta .btn {
		width: 100%;
		min-height: 56px;
		font-size: 18px;
	}
}

/* ============================================
   6. MOBILE SPACING UTILITIES
   Reduced spacing on mobile for better content density
   ============================================ */

@media (max-width: 767px) {
	.main {
		padding: 16px !important;
	}

	.content-section {
		padding: 16px !important;
	}

	.info-card,
	.search-section {
		padding: 16px !important;
		margin-bottom: 16px !important;
	}
}

/* ============================================
   7. SAFE AREA INSETS (Notched Devices)
   Support for iPhone X+ and other devices with notches
   ============================================ */

body {
	padding-top: env(safe-area-inset-top);
	padding-bottom: env(safe-area-inset-bottom);
}

/* ============================================
   8. TOUCH-FRIENDLY HOVER STATES
   Disable transform animations on touch devices
   ============================================ */

@media (hover: none) {
	.info-card:hover {
		transform: none;
	}
}