/**
 * Imbeke Mentorship Management System (SMMS) - Front-End Design System
 * Mobile-First, Accessible, and Touch-Optimized
 */

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

:root {
	--smms-font: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* --- Dark mode (default) --- */
	--smms-primary: #3b82f6;
	--smms-primary-hover: #2563eb;
	--smms-primary-light: rgba(59, 130, 246, 0.18);
	--smms-primary-border: rgba(59, 130, 246, 0.4);
	--smms-bg: #0b1324;
	--smms-bg-subtle: #0f1a30;
	--smms-surface: #152238;
	--smms-surface-hover: #1c2c47;
	--smms-card-bg: rgba(21, 34, 56, 0.85);
	--smms-card-bg-elevated: rgba(28, 44, 71, 0.95);
	--smms-border: rgba(255, 255, 255, 0.12);
	--smms-border-subtle: rgba(255, 255, 255, 0.07);
	--smms-text: #f8fafc;
	--smms-text-muted: #94a3b8;
	--smms-text-dim: #64748b;
	--smms-heading: #ffffff;
	--smms-link: #60a5fa;
	--smms-accent: #a855f7;
	--smms-accent-light: rgba(168, 85, 247, 0.18);
	--smms-success: #10b981;
	--smms-success-light: rgba(16, 185, 129, 0.18);
	--smms-success-text: #34d399;
	--smms-warning: #f59e0b;
	--smms-warning-light: rgba(245, 158, 11, 0.18);
	--smms-warning-text: #fbbf24;
	--smms-danger: #ef4444;
	--smms-danger-light: rgba(239, 68, 68, 0.18);
	--smms-danger-text: #f87171;
	--smms-info-text: #93c5fd;
	--smms-alert-danger-text: #fca5a5;
	--smms-alert-success-text: #a7f3d0;
	--smms-alert-warning-text: #fde68a;

	/* Overlay scale — subtle tints layered on surfaces for hover/active states */
	--smms-overlay-faint: rgba(255, 255, 255, 0.04);
	--smms-overlay-soft: rgba(255, 255, 255, 0.07);
	--smms-overlay-medium: rgba(255, 255, 255, 0.09);
	--smms-overlay-strong: rgba(255, 255, 255, 0.14);
	--smms-disabled-overlay: rgba(0, 0, 0, 0.2);

	/* Inputs & search */
	--smms-input-bg-focus: #0d1728;
	--smms-input-solid-bg: #0f172a;
	--smms-search-bg: rgba(15, 26, 48, 0.75);
	--smms-search-bg-focus: rgba(15, 26, 48, 0.95);

	/* Recessed / translucent panels */
	--smms-topbar-bg: rgba(11, 19, 36, 0.92);
	--smms-bottom-nav-bg: rgba(11, 19, 36, 0.96);
	--smms-panel-bg: rgba(11, 19, 36, 0.6);
	--smms-panel-bg-soft: rgba(11, 19, 36, 0.5);
	--smms-modal-backdrop-bg: rgba(0, 0, 0, 0.75);
	--smms-drawer-overlay-bg: rgba(0, 0, 0, 0.65);

	/* Logo treatment — logo art is designed for dark backgrounds */
	--smms-logo-blend: lighten;
	--smms-logo-shadow: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
	--smms-logo-shadow-sm: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));

	--smms-radius-sm: 8px;
	--smms-radius: 14px;
	--smms-radius-lg: 20px;
	--smms-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.25);
	--smms-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.35), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
	--smms-shadow-lg: 0 20px 35px -10px rgba(0, 0, 0, 0.5);
	--smms-shadow-avatar: 0 2px 8px rgba(0, 0, 0, 0.25);
	--smms-shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.4);
	--smms-shadow-bottom-nav: 0 -4px 20px rgba(0, 0, 0, 0.4);
	--smms-shadow-drawer: 4px 0 25px rgba(0, 0, 0, 0.6);
	--smms-spinner-track: rgba(255, 255, 255, 0.1);

	--smms-bottom-nav-height: 64px;
}

/* --- Light mode --- */
.smms-portal-wrapper[data-smms-theme="light"] {
	--smms-primary: #2563eb;
	--smms-primary-hover: #1d4ed8;
	--smms-primary-light: rgba(37, 99, 235, 0.10);
	--smms-primary-border: rgba(37, 99, 235, 0.30);
	--smms-bg: #f3f5f9;
	--smms-bg-subtle: #eaeef4;
	--smms-surface: #ffffff;
	--smms-surface-hover: #f1f4f9;
	--smms-card-bg: #ffffff;
	--smms-card-bg-elevated: #ffffff;
	--smms-border: rgba(15, 23, 42, 0.11);
	--smms-border-subtle: rgba(15, 23, 42, 0.07);
	--smms-text: #33415a;
	--smms-text-muted: #64748b;
	--smms-text-dim: #94a3b8;
	--smms-heading: #0f172a;
	--smms-link: #1d4ed8;
	--smms-accent: #9333ea;
	--smms-accent-light: rgba(147, 51, 234, 0.10);
	--smms-success: #059669;
	--smms-success-light: rgba(5, 150, 105, 0.12);
	--smms-success-text: #047857;
	--smms-warning: #b45309;
	--smms-warning-light: rgba(180, 83, 9, 0.12);
	--smms-warning-text: #92400e;
	--smms-danger: #dc2626;
	--smms-danger-light: rgba(220, 38, 38, 0.10);
	--smms-danger-text: #b91c1c;
	--smms-info-text: #1d4ed8;
	--smms-alert-danger-text: #b91c1c;
	--smms-alert-success-text: #047857;
	--smms-alert-warning-text: #92400e;

	--smms-overlay-faint: rgba(15, 23, 42, 0.035);
	--smms-overlay-soft: rgba(15, 23, 42, 0.05);
	--smms-overlay-medium: rgba(15, 23, 42, 0.07);
	--smms-overlay-strong: rgba(15, 23, 42, 0.10);
	--smms-disabled-overlay: rgba(15, 23, 42, 0.06);

	--smms-input-bg-focus: #ffffff;
	--smms-input-solid-bg: #ffffff;
	--smms-search-bg: #ffffff;
	--smms-search-bg-focus: #ffffff;

	--smms-topbar-bg: rgba(255, 255, 255, 0.88);
	--smms-bottom-nav-bg: rgba(255, 255, 255, 0.94);
	--smms-panel-bg: rgba(15, 23, 42, 0.035);
	--smms-panel-bg-soft: rgba(15, 23, 42, 0.025);
	--smms-modal-backdrop-bg: rgba(15, 23, 42, 0.4);
	--smms-drawer-overlay-bg: rgba(15, 23, 42, 0.32);

	--smms-logo-blend: normal;
	--smms-logo-shadow: none;
	--smms-logo-shadow-sm: none;

	--smms-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.05);
	--smms-shadow: 0 10px 20px -6px rgba(15, 23, 42, 0.10), 0 4px 8px -4px rgba(15, 23, 42, 0.06);
	--smms-shadow-lg: 0 20px 30px -12px rgba(15, 23, 42, 0.16);
	--smms-shadow-avatar: 0 2px 6px rgba(15, 23, 42, 0.14);
	--smms-shadow-elevated: 0 10px 20px -4px rgba(15, 23, 42, 0.12);
	--smms-shadow-bottom-nav: 0 -2px 12px rgba(15, 23, 42, 0.08);
	--smms-shadow-drawer: 4px 0 20px rgba(15, 23, 42, 0.14);
	--smms-spinner-track: rgba(15, 23, 42, 0.10);
}

/* Base resets & box sizing */
.smms-portal-wrapper {
	font-family: var(--smms-font);
	background: var(--smms-bg);
	color: var(--smms-text);
	min-height: 100vh;
	width: 100%;
	box-sizing: border-box;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	transition: background-color 0.25s ease, color 0.25s ease;
}

.smms-portal-wrapper,
.smms-portal-wrapper * {
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* =========================================================================
   THEME TOGGLE — sidebar segmented control (Light / Dark)
   ========================================================================= */
.smms-theme-toggle {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	background: var(--smms-bg-subtle);
	border: 1px solid var(--smms-border);
	border-radius: 10px;
	margin-bottom: 10px;
}

.smms-theme-toggle-option {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 7px 8px;
	border-radius: 7px;
	font-size: 12px;
	font-weight: 600;
	color: var(--smms-text-muted);
	cursor: pointer;
	user-select: none;
	transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.smms-theme-toggle-option svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
	flex-shrink: 0;
}

.smms-theme-toggle-option:hover {
	color: var(--smms-text);
}

.smms-theme-toggle-option.active {
	background: var(--smms-surface);
	color: var(--smms-text);
	box-shadow: var(--smms-shadow-sm);
}

.smms-theme-toggle-option.active svg {
	color: var(--smms-primary);
	fill: var(--smms-primary);
}

.smms-portal-wrapper *,
.smms-portal-wrapper *::before,
.smms-portal-wrapper *::after {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

.smms-portal-wrapper h1,
.smms-portal-wrapper h2,
.smms-portal-wrapper h3,
.smms-portal-wrapper h4,
.smms-portal-wrapper h5,
.smms-portal-wrapper h6 {
	color: var(--smms-heading);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
}

/* Loading Splash */
.smms-loading-splash {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 65vh;
	gap: 16px;
	color: var(--smms-text-muted);
	padding: 24px;
	text-align: center;
}

.smms-spinner {
	width: 44px;
	height: 44px;
	border: 3px solid var(--smms-overlay-medium);
	border-radius: 50%;
	border-top-color: var(--smms-primary);
	animation: smms-spin 0.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes smms-spin {
	to { transform: rotate(360deg); }
}

/* Auth Card / Form */
.smms-auth-container {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 85vh;
	padding: 20px 16px;
}

.smms-auth-card {
	background: var(--smms-card-bg);
	backdrop-filter: blur(16px);
	border: 1px solid var(--smms-border);
	border-radius: var(--smms-radius-lg);
	padding: 32px 24px;
	width: 100%;
	max-width: 440px;
	box-shadow: var(--smms-shadow-lg);
	animation: smms-fade-in 0.35s ease-out;
}

.smms-auth-header {
	text-align: center;
	margin-bottom: 26px;
}

.smms-auth-brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 20px;
	font-weight: 700;
	color: var(--smms-text);
	margin-bottom: 10px;
}

.smms-auth-logo {
	max-width: 180px;
	height: auto;
	max-height: 65px;
	object-fit: contain;
	display: block;
	margin: 0 auto;
	mix-blend-mode: var(--smms-logo-blend);
	filter: var(--smms-logo-shadow);
}

.smms-splash-logo {
	max-width: 140px;
	height: auto;
	max-height: 50px;
	object-fit: contain;
	margin-bottom: 8px;
	mix-blend-mode: var(--smms-logo-blend);
	filter: var(--smms-logo-shadow);
}

.smms-auth-subtitle {
	font-size: 14px;
	color: var(--smms-text-muted);
}

/* Form Elements */
.smms-form-group {
	margin-bottom: 18px;
}

.smms-form-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 7px;
	color: var(--smms-text);
}

.smms-form-input {
	width: 100%;
	padding: 12px 14px;
	background: var(--smms-bg);
	border: 1px solid var(--smms-border);
	border-radius: 10px;
	color: var(--smms-text);
	font-size: 16px; /* Prevents auto-zoom on iOS */
	font-family: inherit;
	transition: all 0.2s ease;
	min-height: 46px;
	outline: none;
}

.smms-form-input option {
	background-color: var(--smms-input-solid-bg);
	color: var(--smms-text);
	padding: 8px;
}

.smms-form-input:focus {
	border-color: var(--smms-primary);
	box-shadow: 0 0 0 3px var(--smms-primary-light);
	background: var(--smms-input-bg-focus);
}

.smms-form-input:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	background: var(--smms-disabled-overlay);
}

/* Buttons */
.smms-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	min-height: 44px; /* Accessible touch target */
	border-radius: 10px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	border: 1px solid transparent;
	transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
	text-decoration: none;
	touch-action: manipulation;
	user-select: none;
}

.smms-btn:active {
	transform: scale(0.98);
}

.smms-btn-primary {
	background: var(--smms-primary);
	color: #ffffff;
	box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
}

.smms-btn-primary:hover {
	background: var(--smms-primary-hover);
	box-shadow: 0 6px 18px rgba(59, 130, 246, 0.45);
	transform: translateY(-1px);
}

.smms-btn-secondary {
	background: var(--smms-overlay-medium);
	color: var(--smms-text);
	border-color: var(--smms-border);
}

.smms-btn-secondary:hover {
	background: var(--smms-overlay-strong);
}

.smms-btn-ghost {
	background: transparent;
	color: var(--smms-text-muted);
}

.smms-btn-ghost:hover {
	background: var(--smms-overlay-soft);
	color: var(--smms-text);
}

.smms-btn-sm {
	padding: 6px 12px;
	min-height: 36px;
	font-size: 12px;
	border-radius: 8px;
}

.smms-btn-full {
	width: 100%;
}

.smms-btn-icon {
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 10px;
}

/* Alerts */
.smms-alert {
	padding: 14px 16px;
	border-radius: 12px;
	font-size: 13px;
	line-height: 1.45;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.smms-alert-danger {
	background: rgba(239, 68, 68, 0.18);
	border: 1px solid rgba(239, 68, 68, 0.35);
	color: var(--smms-alert-danger-text);
}

.smms-alert-success {
	background: rgba(16, 185, 129, 0.18);
	border: 1px solid rgba(16, 185, 129, 0.35);
	color: var(--smms-alert-success-text);
}

.smms-alert-warning {
	background: rgba(245, 158, 11, 0.18);
	border: 1px solid rgba(245, 158, 11, 0.35);
	color: var(--smms-alert-warning-text);
}

.smms-alert-info {
	background: var(--smms-primary-light);
	border: 1px solid var(--smms-primary-border);
	color: var(--smms-info-text);
}

/* =========================================================================
   DASHBOARD TERM STRIP — current semester + how far through it the
   program is. Reuses the same card surface, border, and hint-link idiom
   as the dashboard's stat cards, so it reads as part of the same system
   rather than a bolted-on banner.
   ========================================================================= */
.smms-term-strip {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 28px;
	background: var(--smms-card-bg);
	border: 1px solid var(--smms-border);
	border-radius: var(--smms-radius);
	padding: 16px 20px;
	margin-bottom: 20px;
	backdrop-filter: blur(12px);
	box-shadow: var(--smms-shadow-sm);
}

.smms-term-strip-main {
	flex: 1 1 220px;
	min-width: 200px;
}

.smms-term-strip-title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 16px;
	font-weight: 800;
	color: var(--smms-heading);
	margin-top: 2px;
}

.smms-term-strip-dates {
	font-size: 12px;
	color: var(--smms-text-muted);
	margin-top: 4px;
}

.smms-term-strip .smms-card-hint {
	margin-top: 8px;
}

/* Grows to fill whatever space .smms-term-strip-main doesn't need, and
   — because flex-grow gives a lone wrapped item all the leftover width
   on its line — stretches to the card's full width on its own row
   instead of hugging the left edge, on any screen size. */
.smms-term-strip-progress {
	flex: 1 1 240px;
	min-width: 200px;
}

/* A row of abbreviated month chips spanning the term. Grid + auto-fit
   divides the strip's width evenly across however many months the
   term covers, and the current month is picked out so the card answers
   "where are we in the term" at a glance rather than just "how far". */
.smms-term-month-track {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(36px, 1fr));
	gap: 6px;
	width: 100%;
}

.smms-term-month {
	padding: 7px 4px;
	border-radius: var(--smms-radius-sm);
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	background: var(--smms-overlay-faint);
	color: var(--smms-text-muted);
	transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.smms-term-month-past {
	background: var(--smms-primary-light);
	color: var(--smms-link);
}

.smms-term-month-current {
	background: var(--smms-primary);
	color: #fff;
	box-shadow: 0 4px 10px -3px rgba(59, 130, 246, 0.45);
	transform: translateY(-2px);
}

.smms-term-strip-progress-label {
	font-size: 11px;
	font-weight: 600;
	color: var(--smms-text-muted);
	margin-top: 8px;
}

/* Main Layout */
.smms-app-layout {
	display: flex;
	min-height: 100vh;
	position: relative;
	/* .smms-app-layout (and .smms-main-content within it) never had their
	   own background — they always relied on .smms-portal-wrapper's
	   background painting behind them. On desktop .smms-portal-wrapper now
	   collapses to zero height (see the min-height: 0 override below,
	   needed so it stops reserving scrollable space in the underlying
	   theme page), so there's nothing left behind the fixed layout to
	   paint that colour. Setting it here directly removes that dependency. */
	background: var(--smms-bg);
}

/* Desktop Sidebar */
.smms-sidebar {
	width: 270px;
	background: var(--smms-surface);
	border-right: 1px solid var(--smms-border);
	display: flex;
	flex-direction: column;
	padding: 24px 16px;
	flex-shrink: 0;
	z-index: 50;
}

/* Desktop only: pin the whole app layout to the viewport (not just the
   sidebar) so the portal always fills the screen exactly, regardless of
   where the shortcode happens to sit in the surrounding theme page (site
   header, page title, admin bar, footer, etc). Without this, .smms-sidebar
   being fixed to the true viewport top/height while .smms-app-layout and
   .smms-main-content stayed in normal document flow — starting wherever
   the theme's header pushed them to — meant the two disagreed about where
   "the viewport" was: a gap of theme chrome could show above the content
   column, and main-content's own 100vh made it overflow past the real
   viewport bottom by that same offset. Pinning the layout itself removes
   the dependency on that offset entirely.

   Pinning .smms-app-layout alone isn't quite enough, though: its parent
   .smms-portal-wrapper still keeps its own min-height: 100vh and stays in
   normal document flow, so the underlying theme page (header + this now-
   empty 100vh block + footer) is still tall enough to scroll. The fixed
   layout doesn't move when that happens, but overscrolling past the real
   end of that underlying page (rubber-band/elastic scroll) briefly shifts
   the whole viewport — including fixed elements — and exposes a sliver of
   the theme page's own background (reported as a black strip, since this
   theme's page background is black) right at the edge before it snaps
   back. Locking html/body from scrolling at all removes the underlying
   page's ability to scroll, so there's nothing left to overscroll into;
   all scrolling happens inside .smms-sidebar / .smms-main-content instead,
   exactly as intended. Mobile keeps its own off-canvas drawer behavior and
   normal page scroll, fully redefined in the max-width:768px block, so
   none of this touches it. */
@media (min-width: 769px) {
	html:has(.smms-portal-wrapper),
	body:has(.smms-portal-wrapper) {
		overflow: hidden !important;
		height: 100vh !important;
	}

	/* Only collapse the wrapper once .smms-app-layout has actually mounted
	   and is painting its own full-viewport background (see above) — not
	   before. Before portal-app.js finishes loading, .smms-portal-wrapper
	   contains only the loading splash (.smms-loading-splash, which is
	   just ~65vh tall and has no background of its own), so collapsing the
	   wrapper at that point left nothing painting the bottom ~35% of the
	   screen — showing the theme page's own black background through
	   instead. Scoping this to :has(.smms-app-layout) keeps the wrapper at
	   its normal min-height: 100vh (covering the full screen with its own
	   background) during that loading state, and only hands off painting
	   duty to .smms-app-layout once it exists. */
	.smms-portal-wrapper:has(.smms-app-layout) {
		min-height: 0;
	}

	.smms-app-layout {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
	}

	.smms-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		overflow-y: auto;
	}

	.smms-main-content {
		margin-left: 270px;
		height: 100vh;
	}
}

.smms-sidebar-header {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 700;
	font-size: 18px;
	padding: 0 8px 20px 8px;
	border-bottom: 1px solid var(--smms-border);
	margin-bottom: 16px;
}

.smms-brand-lockup {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1;
	overflow: hidden;
}

.smms-brand-name {
	font-size: 16px;
	font-weight: 700;
	color: var(--smms-heading);
	letter-spacing: -0.01em;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.smms-sidebar-logo {
	max-width: 170px;
	height: auto;
	max-height: 46px;
	object-fit: contain;
	mix-blend-mode: var(--smms-logo-blend);
	filter: var(--smms-logo-shadow-sm);
	flex-shrink: 0;
}

.smms-nav {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex-grow: 1;
	overflow-y: auto;
}

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

.smms-nav-item:hover {
	background: var(--smms-overlay-soft);
	color: var(--smms-text);
}

.smms-nav-item.active {
	background: rgba(59, 130, 246, 0.12);
	color: var(--smms-link);
	font-weight: 600;
}

.smms-nav-item svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
	flex-shrink: 0;
}

.smms-sidebar-footer {
	border-top: 1px solid var(--smms-border);
	padding-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.smms-sidebar-version {
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	color: var(--smms-text-dim);
	letter-spacing: 0.02em;
	margin-top: 6px;
}

/* Content Area */
.smms-main-content {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow-y: auto;
}

.smms-top-bar {
	height: 76px;
	border-bottom: 1px solid var(--smms-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 32px;
	background: var(--smms-topbar-bg);
	backdrop-filter: blur(14px);
	position: sticky;
	top: 0;
	z-index: 40;
}

.smms-top-title {
	font-size: 18px;
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: 10px;
}

.smms-top-user {
	display: flex;
	align-items: center;
	gap: 16px;
}

.smms-user-badge {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 16px 6px 6px;
	/* A large, height-independent radius (rather than the previous 10px)
	   so the badge is a true pill/stadium shape however tall it ends up —
	   matching the fully circular (border-radius: 50%) avatar it wraps,
	   instead of a rounded rectangle whose corners cut awkwardly close to
	   the circle. */
	border-radius: 999px;
	background: var(--smms-overlay-faint);
	border: 1px solid var(--smms-border);
	transition: background 0.2s ease;
}

.smms-user-badge:hover {
	background: var(--smms-overlay-medium);
}

.smms-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--smms-surface-hover);
	border: 1px solid var(--smms-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	color: #fff;
	font-size: 14px;
	flex-shrink: 0;
	box-shadow: var(--smms-shadow-avatar);
	overflow: hidden;
}

.smms-avatar svg {
	width: 62%;
	height: 62%;
	fill: #ffffff;
	flex-shrink: 0;
}

/* Gender-based default avatars: a flat, single-tone fill (no gradient)
   with a simple bust icon, so mentors/mentees without an uploaded photo
   still get a distinct, professional-looking avatar instead of a plain
   initial. Falls back to the neutral initial circle above when gender
   isn't set. */
.smms-avatar-male {
	background: var(--smms-primary);
	border-color: var(--smms-primary-border);
}

.smms-avatar-female {
	background: var(--smms-accent);
	border-color: rgba(168, 85, 247, 0.4);
}

.smms-avatar-sm {
	width: 30px;
	height: 30px;
	font-size: 12px;
}

.smms-avatar-lg {
	width: 52px;
	height: 52px;
	font-size: 20px;
}

/* Avatar Stack — overlapping mini-avatars used to visualize a roster
   count (e.g. assigned mentees) without inventing an arbitrary capacity
   number. */
.smms-avatar-stack {
	display: flex;
	align-items: center;
}

.smms-avatar-stack .smms-avatar {
	margin-left: -10px;
	border: 2px solid var(--smms-surface);
	box-shadow: none;
}

.smms-avatar-stack .smms-avatar:first-child {
	margin-left: 0;
}

.smms-avatar-overflow {
	background: var(--smms-surface-hover);
	color: var(--smms-text-muted);
	font-weight: 700;
	font-size: 11px;
}

.smms-container {
	padding: 24px 28px;
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
}

/* Grid & Cards */
.smms-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
	margin-bottom: 24px;
}

.smms-card {
	background: var(--smms-card-bg);
	border: 1px solid var(--smms-border);
	border-radius: var(--smms-radius);
	padding: 20px;
	backdrop-filter: blur(12px);
	box-shadow: var(--smms-shadow-sm);
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.smms-clickable-card {
	cursor: pointer;
	position: relative;
}

.smms-clickable-card:hover {
	transform: translateY(-3px);
	border-color: var(--smms-primary-border);
	box-shadow: 0 10px 20px -5px rgba(59, 130, 246, 0.25);
}

.smms-clickable-card:active {
	transform: translateY(-1px);
}

/* =========================================================================
   DASHBOARD HERO + STAT LIST
   Replaces a flat wall of identical stat cards with one emphasized
   "headline" metric (a card of its own size/shape) beside a compact list
   of secondary stats — so importance reads from layout and colour, not
   just from a number sitting in an otherwise identical box.
   ========================================================================= */
.smms-dash-top-grid {
	display: grid;
	grid-template-columns: minmax(260px, 380px) 1fr;
	gap: 18px;
	margin-bottom: 24px;
	align-items: stretch;
}

@media (max-width: 760px) {
	.smms-dash-top-grid {
		grid-template-columns: 1fr;
	}
}

.smms-hero-card {
	background: var(--smms-card-bg);
	border: 1px solid var(--smms-border);
	border-radius: var(--smms-radius-lg);
	padding: 24px;
	backdrop-filter: blur(12px);
	box-shadow: var(--smms-shadow);
	display: flex;
	align-items: center;
	gap: 20px;
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.smms-progress-ring-wrap {
	position: relative;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.smms-progress-ring-value {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 24px;
	font-weight: 800;
	color: var(--smms-heading);
}

.smms-hero-card-info {
	min-width: 0;
	flex: 1;
}

.smms-hero-card-headline {
	font-size: 16px;
	font-weight: 700;
	color: var(--smms-heading);
	margin-top: 4px;
	line-height: 1.35;
}

.smms-hero-card-plain-value {
	font-size: 44px;
	font-weight: 800;
	color: var(--smms-heading);
	margin-top: 4px;
	line-height: 1.1;
}

.smms-stat-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.smms-stat-row {
	--stat-accent: var(--smms-primary);
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: var(--smms-card-bg);
	border: 1px solid var(--smms-border);
	border-radius: var(--smms-radius-sm);
	padding: 14px 18px;
	backdrop-filter: blur(12px);
	box-shadow: var(--smms-shadow-sm);
	transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.smms-clickable-row {
	cursor: pointer;
}

.smms-clickable-row:hover {
	transform: translateX(2px);
	background: var(--smms-surface-hover);
}

.smms-clickable-row:active {
	transform: translateX(0);
}

.smms-stat-row-main {
	min-width: 0;
	flex: 1;
}

.smms-stat-row-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--smms-text-muted);
}

.smms-stat-row-sub {
	font-size: 12px;
	color: var(--smms-text-muted);
	margin-top: 4px;
	font-weight: 600;
}

.smms-stat-row-value {
	font-size: 24px;
	font-weight: 800;
	color: var(--smms-heading);
	flex-shrink: 0;
}

.smms-segmented-bar {
	display: flex;
	width: 100%;
	height: 10px;
	border-radius: 6px;
	overflow: hidden;
	margin-top: 12px;
}

.smms-segmented-bar > div {
	transition: width 0.4s ease;
}

.smms-legend-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 5px;
	vertical-align: middle;
}

.smms-card-hint {
	font-size: 12px;
	color: var(--smms-link);
	margin-top: 10px;
	display: flex;
	align-items: center;
	gap: 4px;
	font-weight: 600;
}

.smms-card-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--smms-text-muted);
	margin-bottom: 6px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.smms-card-value {
	font-size: 26px;
	font-weight: 800;
	color: var(--smms-text);
}

/* Badges */
.smms-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
}

.smms-badge-success { background: var(--smms-success-light); color: var(--smms-success-text); border: 1px solid rgba(16, 185, 129, 0.3); }
.smms-badge-warning { background: var(--smms-warning-light); color: var(--smms-warning-text); border: 1px solid rgba(245, 158, 11, 0.3); }
.smms-badge-danger  { background: var(--smms-danger-light);  color: var(--smms-danger-text); border: 1px solid rgba(239, 68, 68, 0.3); }
.smms-badge-primary { background: var(--smms-primary-light); color: var(--smms-link); border: 1px solid var(--smms-primary-border); }
.smms-badge-neutral { background: var(--smms-overlay-medium); color: var(--smms-text-muted); border: 1px solid var(--smms-border); }

/* =========================================================================
   MENTEE PROFILE COMPLETION (Action Item group + Edit Mentee CTA states)
   ========================================================================= */

/* Subtle accent border so the Profile Completion group reads as its
   own action item "type" rather than blending into the regular
   topic-based action item cards below it. */
.smms-profile-completion-card {
	border-color: var(--smms-accent-light);
}

.smms-profile-completion-card.is-expanded {
	border-color: var(--smms-accent);
}

/* The collapsed header gets its own row for the completion meter
   instead of squeezing it in alongside the title, badge, and chevron —
   the meter is the whole point of this card, so it gets room to be
   readable rather than being the first thing dropped on a narrow
   screen. The top row keeps the usual title/badge/chevron layout;
   the meter spans the full width beneath it. */
.smms-collapsible-header.smms-profile-completion-header {
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	padding: 16px;
}

.smms-profile-completion-header-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.smms-profile-completion-meter-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.smms-profile-completion-meter-caption {
	font-size: 11px;
	font-weight: 700;
	color: var(--smms-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	flex-shrink: 0;
}

.smms-profile-completion-meter {
	flex: 1 1 auto;
	min-width: 0;
}

/* "+ Add [Field]" CTA chip — a tappable pill that takes a mentor
   straight to the missing field in the Edit Mentee form. Styled as an
   outlined warning pill (not a solid button) so a row of several
   doesn't visually shout, but still reads clearly as actionable. */
.smms-completion-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	background: var(--smms-warning-light);
	border: 1px solid rgba(245, 158, 11, 0.35);
	color: var(--smms-warning-text);
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.18s ease;
	touch-action: manipulation;
}

.smms-completion-chip:hover {
	background: rgba(245, 158, 11, 0.28);
	transform: translateY(-1px);
}

.smms-completion-chip:active {
	transform: scale(0.97);
}

/* Highlights the specific field(s) a profile-completion CTA linked
   to, inside the Edit Mentee form, so a mentor lands on exactly what
   needs filling in instead of having to re-scan the whole form. */
.smms-field-highlight {
	border-color: var(--smms-warning) !important;
	box-shadow: 0 0 0 3px var(--smms-warning-light) !important;
	animation: smms-field-highlight-pulse 1.6s ease-in-out 2;
}

@keyframes smms-field-highlight-pulse {
	0%, 100% { box-shadow: 0 0 0 3px var(--smms-warning-light); }
	50% { box-shadow: 0 0 0 5px var(--smms-warning-light); }
}

/* =========================================================================
   MONTHLY CHECK-IN TRACKER (Mentor "My Compliance" tab)
   Turns the raw compliance percentage into an actionable roster: one
   banner for the group-session requirement, one row per mentee for the
   individual-session requirement. Reuses the existing card/badge/avatar
   vocabulary above rather than introducing a new visual language.
   ========================================================================= */
.smms-checkin-banner {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--smms-warning-light);
	border: 1px solid rgba(245, 158, 11, 0.3);
	margin-bottom: 4px;
}

.smms-checkin-banner.is-met {
	background: var(--smms-success-light);
	border-color: rgba(16, 185, 129, 0.3);
}

.smms-checkin-banner-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 800;
	background: rgba(255, 255, 255, 0.08);
	color: var(--smms-warning-text);
}

.smms-checkin-banner.is-met .smms-checkin-banner-icon {
	color: var(--smms-success-text);
}

.smms-checkin-banner-body {
	flex: 1;
	min-width: 0;
}

.smms-checkin-banner-title {
	font-size: 14px;
	font-weight: 700;
}

.smms-checkin-banner-sub {
	font-size: 12px;
	color: var(--smms-text-muted);
	margin-top: 2px;
}

.smms-checkin-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.smms-checkin-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--smms-border);
	transition: background 0.18s ease, border-color 0.18s ease;
}

.smms-checkin-row.is-met {
	opacity: 0.72;
}

.smms-checkin-row:not(.is-met):hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: var(--smms-primary-border);
}

.smms-checkin-row-body {
	flex: 1;
	min-width: 0;
}

.smms-checkin-row-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--smms-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.smms-checkin-row-sub {
	font-size: 11px;
	color: var(--smms-text-muted);
	margin-top: 1px;
}

/* =========================================================================
   SEARCH & FILTER TOOLBAR (Mobile First)
   ========================================================================= */
.smms-toolbar {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 18px;
}

.smms-search-box {
	position: relative;
	width: 100%;
}

.smms-search-icon,
.smms-portal-wrapper .smms-search-icon {
	position: absolute !important;
	left: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 18px !important;
	height: 18px !important;
	fill: var(--smms-text-dim);
	pointer-events: none !important;
}

/* Selector duplicated with the .smms-portal-wrapper prefix, plus
   !important on the properties that actually cause misalignment, so a
   theme's own input/search-field styling can't win the cascade tie —
   this plugin's assets don't control whether they enqueue before or
   after the active theme's stylesheet. */
.smms-search-input,
.smms-portal-wrapper .smms-search-input {
	width: 100% !important;
	padding: 10px 14px 10px 42px !important;
	background: var(--smms-search-bg);
	border: 1px solid var(--smms-border);
	border-radius: 12px;
	color: var(--smms-text);
	font-size: 16px !important; /* Matches .smms-form-input — under 16px lets iOS auto-zoom the page on focus */
	font-family: inherit;
	min-height: 44px;
	transition: all 0.2s ease;
	outline: none;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important; /* Strip native search-field chrome so it can't add its own icon/clear button on top of ours */
}

/* Native search decorations (magnifier icon, "clear" button, results
   dropdown arrow) fight with the custom icon and placeholder on mobile
   Safari/Chrome — hide them since we render our own icon. */
.smms-search-input::-webkit-search-decoration,
.smms-search-input::-webkit-search-cancel-button,
.smms-search-input::-webkit-search-results-button,
.smms-search-input::-webkit-search-results-decoration {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: none !important;
}

.smms-search-input::placeholder {
	color: var(--smms-text-dim);
	opacity: 1;
}

.smms-search-input:focus {
	border-color: var(--smms-primary);
	box-shadow: 0 0 0 3px var(--smms-primary-light);
	background: var(--smms-search-bg-focus);
}

.smms-filter-chips {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 4px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.smms-filter-chips::-webkit-scrollbar {
	display: none;
}

.smms-filter-chip {
	padding: 6px 14px;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 600;
	background: var(--smms-overlay-soft);
	border: 1px solid var(--smms-border);
	color: var(--smms-text-muted);
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.18s ease;
	user-select: none;
}

.smms-filter-chip:hover {
	background: var(--smms-overlay-medium);
	color: var(--smms-text);
}

.smms-filter-chip.active {
	background: var(--smms-primary);
	color: #ffffff;
	border-color: var(--smms-primary);
	box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
}

/* =========================================================================
   COLLAPSIBLE ENTITY CARDS (Mobile-First Master-Detail)
   ========================================================================= */
.smms-collapsible-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.smms-collapsible-card {
	background: var(--smms-card-bg);
	border: 1px solid var(--smms-border);
	border-radius: var(--smms-radius);
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	box-shadow: var(--smms-shadow-sm);
}

.smms-collapsible-card.is-expanded {
	border-color: var(--smms-primary-border);
	background: var(--smms-card-bg-elevated);
	box-shadow: var(--smms-shadow-elevated);
}

.smms-collapsible-header {
	padding: 14px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	cursor: pointer;
	user-select: none;
	background: transparent;
	transition: background 0.15s ease;
}

.smms-collapsible-header:hover {
	background: var(--smms-overlay-faint);
}

.smms-collapsible-main {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	flex-grow: 1;
}

.smms-collapsible-title-wrap {
	min-width: 0;
	flex-grow: 1;
}

.smms-collapsible-title {
	font-weight: 700;
	font-size: 15px;
	color: var(--smms-heading);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	align-items: center;
	gap: 8px;
}

.smms-collapsible-subtitle {
	font-size: 12px;
	color: var(--smms-text-muted);
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Modifier for subtitles made of several badges (e.g. session cards) rather
   than a single line of text — wraps onto multiple lines instead of being
   clipped when there isn't room for every badge on one line. */
.smms-collapsible-subtitle-wrap {
	white-space: normal;
	overflow: visible;
	text-overflow: unset;
	flex-wrap: wrap;
	row-gap: 6px;
}

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

.smms-chevron-btn {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--smms-overlay-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--smms-text-muted);
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease, color 0.2s ease;
	flex-shrink: 0;
}

.smms-collapsible-card.is-expanded .smms-chevron-btn {
	transform: rotate(180deg);
	background: var(--smms-primary-light);
	color: var(--smms-link);
}

.smms-chevron-btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* Collapsible Content Body */
.smms-collapsible-body {
	display: none;
	padding: 0 16px 16px 16px;
	border-top: 1px solid var(--smms-border-subtle);
	animation: smms-slide-down 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.smms-collapsible-card.is-expanded .smms-collapsible-body {
	display: block;
}

@keyframes smms-slide-down {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}

.smms-details-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 10px 14px;
	margin-top: 14px;
	padding: 12px 14px;
	background: var(--smms-panel-bg);
	border: 1px solid var(--smms-border-subtle);
	border-radius: 10px;
}

.smms-detail-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.smms-detail-label {
	font-size: 11px;
	color: var(--smms-text-dim);
	text-transform: uppercase;
	font-weight: 600;
	letter-spacing: 0.03em;
}

.smms-detail-val {
	font-size: 13px;
	font-weight: 600;
	color: var(--smms-heading);
	word-break: break-word;
}

.smms-detail-link {
	color: var(--smms-link);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.smms-detail-link:hover {
	text-decoration: underline;
}

.smms-card-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 14px;
	flex-wrap: wrap;
}

/* =========================================================================
   SESSION TIMELINE & CARDS
   ========================================================================= */
.smms-session-card {
	background: var(--smms-card-bg);
	border: 1px solid var(--smms-border);
	border-radius: var(--smms-radius);
	padding: 16px;
	margin-bottom: 12px;
	transition: all 0.2s ease;
}

.smms-session-card:hover {
	border-color: var(--smms-primary-border);
}

.smms-session-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.smms-session-date {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 14px;
	color: var(--smms-heading);
}

.smms-session-date svg {
	width: 16px;
	height: 16px;
	fill: var(--smms-primary);
}

.smms-session-chips {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.smms-session-notes {
	background: var(--smms-panel-bg-soft);
	border: 1px solid var(--smms-border-subtle);
	border-radius: 10px;
	padding: 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--smms-text);
	margin-top: 8px;
	white-space: pre-line;
}

.smms-topic-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	border-radius: 6px;
	background: rgba(59, 130, 246, 0.12);
	border: 1px solid rgba(59, 130, 246, 0.25);
	color: var(--smms-info-text);
	font-size: 11px;
	font-weight: 600;
}

/* =========================================================================
   TASK / ACTION ITEMS CHECKLIST
   ========================================================================= */
.smms-task-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	background: var(--smms-card-bg);
	border: 1px solid var(--smms-border);
	border-radius: var(--smms-radius);
	gap: 12px;
	transition: all 0.2s ease;
}

.smms-task-item:hover {
	border-color: var(--smms-border);
	background: var(--smms-card-bg-elevated);
}

.smms-task-main {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
	flex-grow: 1;
}

.smms-task-text {
	font-size: 14px;
	font-weight: 600;
	color: var(--smms-heading);
	line-height: 1.4;
}

.smms-task-meta {
	font-size: 12px;
	color: var(--smms-text-muted);
	margin-top: 4px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* =========================================================================
   MOBILE BOTTOM NAVIGATION BAR
   ========================================================================= */
.smms-bottom-nav {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: var(--smms-bottom-nav-height);
	background: var(--smms-bottom-nav-bg);
	backdrop-filter: blur(16px);
	border-top: 1px solid var(--smms-border);
	z-index: 90;
	padding: 0 4px;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	box-shadow: var(--smms-shadow-bottom-nav);
	justify-content: space-around;
	align-items: center;
}

.smms-bottom-nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	flex: 1;
	height: 100%;
	color: var(--smms-text-muted);
	text-decoration: none;
	font-size: 10.5px;
	font-weight: 600;
	cursor: pointer;
	position: relative;
	transition: color 0.15s ease;
	user-select: none;
	padding: 4px 2px;
}

.smms-bottom-nav-item svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
	transition: transform 0.2s ease;
}

.smms-bottom-nav-item.active {
	color: var(--smms-primary);
}

.smms-bottom-nav-item.active svg {
	transform: translateY(-2px);
}

.smms-bottom-nav-item .smms-nav-badge {
	position: absolute;
	top: 6px;
	right: calc(50% - 16px);
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--smms-warning);
	color: #000000;
	font-size: 10px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* =========================================================================
   MODALS & BOTTOM SHEETS
   ========================================================================= */
.smms-modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: var(--smms-modal-backdrop-bg);
	backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 16px;
	animation: smms-fade-in 0.2s ease-out;
}

.smms-modal {
	background: var(--smms-surface);
	border: 1px solid var(--smms-border);
	border-radius: var(--smms-radius-lg);
	width: 100%;
	max-width: 540px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	box-shadow: var(--smms-shadow-lg);
	overflow: hidden;
}

.smms-modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 24px;
	border-bottom: 1px solid var(--smms-border);
	flex-shrink: 0;
}

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

.smms-modal-content {
	padding: 20px 24px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	flex-grow: 1;
}

.smms-modal-footer {
	padding: 16px 24px;
	border-top: 1px solid var(--smms-border);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	flex-shrink: 0;
	background: var(--smms-panel-bg-soft);
}

.smms-close-btn {
	position: relative;
	background: transparent;
	border: none;
	color: var(--smms-text-muted);
	font-size: 0; /* hide the native × glyph in favor of the drawn cross below */
	width: 32px;
	height: 32px;
	border-radius: var(--smms-radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
	line-height: 1;
	flex-shrink: 0;
}

.smms-close-btn::before,
.smms-close-btn::after {
	content: '';
	position: absolute;
	width: 14px;
	height: 1.5px;
	background: currentColor;
	border-radius: 1px;
}

.smms-close-btn::before { transform: rotate(45deg); }
.smms-close-btn::after { transform: rotate(-45deg); }

.smms-close-btn:hover {
	background: var(--smms-overlay-medium);
	color: var(--smms-heading);
}

@keyframes smms-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Mobile Header & Drawer */
.smms-mobile-header {
	display: none;
	height: 60px;
	background: var(--smms-surface);
	border-bottom: 1px solid var(--smms-border);
	padding: 0 16px;
	align-items: center;
	justify-content: space-between;
	position: sticky;
	top: 0;
	z-index: 80;
}

.smms-mobile-header-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

.smms-mobile-menu-toggle {
	background: var(--smms-overlay-medium);
	border: 1px solid var(--smms-border);
	border-radius: 8px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--smms-text);
	cursor: pointer;
	padding: 0;
}

.smms-mobile-menu-toggle svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.smms-sidebar-close {
	display: none;
	position: relative;
	background: transparent;
	border: none;
	border-radius: var(--smms-radius-sm);
	width: 32px;
	height: 32px;
	color: var(--smms-text-muted);
	font-size: 0; /* hide the native × glyph in favor of the drawn cross below */
	cursor: pointer;
	margin-left: auto;
	line-height: 1;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, color 0.15s ease;
}

.smms-sidebar-close::before,
.smms-sidebar-close::after {
	content: '';
	position: absolute;
	width: 14px;
	height: 1.5px;
	background: currentColor;
	border-radius: 1px;
}

.smms-sidebar-close::before { transform: rotate(45deg); }
.smms-sidebar-close::after { transform: rotate(-45deg); }

.smms-sidebar-close:hover {
	background: var(--smms-overlay-medium);
	color: var(--smms-heading);
}

.smms-sidebar-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: var(--smms-drawer-overlay-bg);
	backdrop-filter: blur(4px);
	z-index: 900;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.smms-sidebar-overlay.open {
	display: block;
	opacity: 1;
}

/* =========================================================================
   RESPONSIVE BREAKPOINTS (Mobile Optimization)
   ========================================================================= */
@media (max-width: 768px) {
	.smms-app-layout {
		flex-direction: column;
		padding-bottom: var(--smms-bottom-nav-height);
	}

	.smms-mobile-header {
		display: flex;
	}

	.smms-mobile-header-brand .smms-sidebar-logo {
		max-width: 84px;
		max-height: 30px;
	}

	.smms-mobile-header-brand .smms-brand-name {
		font-size: 13.5px;
	}

	.smms-bottom-nav {
		display: flex;
	}

	.smms-sidebar-close {
		display: flex;
	}

	.smms-sidebar {
		position: fixed;
		top: 0;
		left: -290px;
		width: 290px;
		height: 100vh;
		z-index: 1000;
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		box-shadow: var(--smms-shadow-drawer);
		overflow-y: auto;
	}

	.smms-sidebar.open {
		transform: translateX(290px);
	}

	.smms-sidebar-header {
		padding-bottom: 14px;
		margin-bottom: 14px;
	}

	.smms-top-bar {
		padding: 10px 14px;
		height: auto;
		min-height: 52px;
	}

	.smms-top-title {
		font-size: 16px;
	}

	.smms-user-info-text {
		display: none;
	}

	/* The mobile top header already has its own profile button next to the
	   hamburger toggle, so hide the top-bar's avatar badge here to avoid
	   showing two separate profile entry points on small screens. */
	.smms-user-badge {
		display: none;
	}

	.smms-container {
		padding: 14px 12px 28px 12px;
	}

	.smms-grid {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-bottom: 18px;
	}

	.smms-card {
		padding: 16px;
		border-radius: 12px;
	}

	.smms-auth-card {
		padding: 24px 18px;
		border-radius: 16px;
	}

	/* Bottom sheet appearance for modals on small screens */
	.smms-modal-backdrop {
		align-items: flex-end;
		padding: 0;
	}

	.smms-modal {
		max-width: 100%;
		border-radius: 20px 20px 0 0;
		max-height: 88vh;
		border-bottom: none;
		animation: smms-sheet-up 0.28s cubic-bezier(0.4, 0, 0.2, 1);
	}

	@keyframes smms-sheet-up {
		from { transform: translateY(100%); }
		to { transform: translateY(0); }
	}

	.smms-modal-header {
		padding: 16px 18px;
	}

	.smms-modal-content {
		padding: 16px 18px;
	}

	.smms-modal-footer {
		padding: 12px 18px;
	}

	.smms-details-grid {
		grid-template-columns: 1fr 1fr;
		gap: 8px 10px;
		padding: 10px 12px;
	}

	.smms-card-actions {
		justify-content: stretch;
	}

	.smms-card-actions .smms-btn {
		flex: 1;
		text-align: center;
	}

	/* Session/entity cards: let the header top-align once the subtitle
	   wraps to more than one line, instead of vertically centering the
	   chevron against a taller left column. */
	.smms-collapsible-header {
		align-items: flex-start;
	}

	.smms-collapsible-right {
		padding-top: 2px;
	}

	.smms-collapsible-subtitle-wrap .smms-badge {
		font-size: 10px;
		padding: 3px 7px;
	}

	/* Dashboard cards: match the padding reduction every other card gets
	   on mobile, and let the hero card's contents wrap onto their own
	   line instead of squeezing the progress ring and text into a row
	   that no longer fits a phone-width column. */
	.smms-term-strip {
		padding: 14px 16px;
		gap: 12px 20px;
	}

	.smms-hero-card {
		padding: 18px;
		gap: 16px;
	}

	.smms-hero-card-plain-value {
		font-size: 34px;
	}

	.smms-stat-list {
		gap: 8px;
	}

	.smms-stat-row {
		padding: 12px 14px;
		gap: 12px;
	}

	.smms-stat-row-value {
		font-size: 20px;
	}
}

@media (max-width: 480px) {
	/* Below phone-portrait width the hero card's fixed-size progress
	   ring and its label no longer both fit on one row without crowding
	   the card's edges, so stack them and shrink the ring to match. */
	.smms-hero-card {
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}

	.smms-hero-card-info {
		width: 100%;
	}

	.smms-progress-ring-wrap svg {
		width: 76px;
		height: 76px;
	}

	.smms-progress-ring-value {
		font-size: 18px;
	}

	.smms-card-hint {
		justify-content: center;
	}
}

@media (max-width: 420px) {
	.smms-details-grid {
		grid-template-columns: 1fr;
	}

	.smms-mobile-header-brand .smms-sidebar-logo {
		max-width: 60px;
		max-height: 26px;
	}

	.smms-mobile-header-brand .smms-brand-name {
		font-size: 12.5px;
	}
}

/* =========================================================================
   HELP & GUIDE — FAQ ACCORDION
   ========================================================================= */
.smms-card details summary {
	transition: background 0.15s ease;
}

.smms-card details summary:hover {
	background: var(--smms-overlay-faint);
}

.smms-card details summary::-webkit-details-marker {
	display: none;
}

.smms-card details summary::marker {
	content: '';
}

.smms-card details summary::before {
	content: '+';
	display: inline-block;
	width: 16px;
	color: var(--smms-link);
	font-weight: 800;
}

.smms-card details[open] summary::before {
	content: '\2212';
}

/* =========================================================================
   LOG-SESSION FORM — plain choice groups, chips, and rating rows.
   Shared building blocks so the form reads as one consistent system
   rather than one-off inline styles per field.
   ========================================================================= */
.smms-field-hint {
	font-size: 12px;
	color: var(--smms-text-muted);
	margin-top: 6px;
	line-height: 1.4;
}

/* Row of mutually-exclusive plain buttons (session type, meeting mode). */
.smms-choice-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 8px;
}

.smms-choice-btn {
	padding: 11px 10px;
	border: 1px solid var(--smms-border);
	border-radius: var(--smms-radius-sm);
	background: var(--smms-bg);
	color: var(--smms-text);
	font-size: 13.5px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	text-align: center;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.smms-choice-btn.active {
	border-color: var(--smms-primary);
	background: var(--smms-primary-light);
	color: var(--smms-link);
}

/* Checklist rows (group mentee attendance). */
.smms-check-row {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--smms-text);
	cursor: pointer;
	padding: 10px 12px;
	border-radius: var(--smms-radius-sm);
	background: var(--smms-bg);
	border: 1px solid var(--smms-border);
}

.smms-check-row input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--smms-primary);
	flex-shrink: 0;
}

/* Plain toggle chips (discussion topics). */
.smms-chip {
	display: inline-flex;
	align-items: center;
	padding: 7px 13px;
	border-radius: 999px;
	background: var(--smms-bg);
	border: 1px solid var(--smms-border);
	font-size: 12.5px;
	color: var(--smms-text);
	cursor: pointer;
	user-select: none;
}

.smms-chip.active {
	background: var(--smms-primary-light);
	border-color: var(--smms-primary);
	color: var(--smms-link);
}

/* Per-topic rating row — three plain text buttons, no icons. */
.smms-rating-card {
	border: 1px solid var(--smms-border);
	border-radius: var(--smms-radius-sm);
	padding: 10px 12px;
	background: var(--smms-bg);
}

.smms-rating-card + .smms-rating-card {
	margin-top: 8px;
}

.smms-rating-title {
	font-size: 12.5px;
	font-weight: 600;
	margin-bottom: 8px;
}

.smms-rating-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
}

.smms-rating-btn {
	padding: 8px 4px;
	border-radius: 8px;
	border: 1px solid var(--smms-border);
	background: var(--smms-bg);
	color: var(--smms-text-muted);
	font-size: 11.5px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	text-align: center;
	line-height: 1.3;
}

.smms-rating-btn:active {
	transform: scale(0.97);
}

.smms-rating-btn.status-doing_well.active {
	border-color: var(--smms-success);
	background: var(--smms-success-light);
	color: var(--smms-success-text);
}

.smms-rating-btn.status-some_challenges.active {
	border-color: var(--smms-warning);
	background: var(--smms-warning-light);
	color: var(--smms-warning-text);
}

.smms-rating-btn.status-need_more_support.active {
	border-color: var(--smms-danger);
	background: var(--smms-danger-light);
	color: var(--smms-danger-text);
}

.smms-duration-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.smms-duration-btn {
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--smms-border);
	background: var(--smms-bg);
	color: var(--smms-text);
	font-size: 12.5px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
}

.smms-duration-btn.active {
	border-color: var(--smms-primary);
	background: var(--smms-primary-light);
	color: var(--smms-link);
}