/**
 * AcademyOS portal — modern professional shell & dashboard polish.
 * Applies to student, parent, coach, teacher (and manager) dashboards.
 */

/* ── Page canvas ───────────────────────────────────────────── */
body.ao-shell-active {
	background: linear-gradient(160deg, #f0f4ff 0%, #f8fafc 35%, #faf5ff 100%) !important;
}

.ao-shell-wrap {
	--ao-accent: #4f46e5;
	--ao-accent-soft: #eef2ff;
	--ao-accent-glow: rgba(79, 70, 229, 0.35);
	--ao-sidebar-from: #0f172a;
	--ao-sidebar-to: #1e1b4b;
	--ao-card-radius: 16px;
	--ao-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
	--ao-card-shadow-hover: 0 4px 12px rgba(15, 23, 42, 0.08), 0 16px 40px rgba(79, 70, 229, 0.1);
}

.ao-shell-main {
	background: transparent !important;
}

@media (min-width: 1024px) {
	.ao-shell-main {
		margin-left: 16rem !important;
		width: calc(100% - 16rem) !important;
	}
}

.ao-shell-content {
	padding: 28px 24px 40px !important;
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

@media (min-width: 1024px) {
	.ao-shell-content {
		padding: 32px 32px 48px !important;
	}
}

@media (min-width: 1024px) {
	.ao-shell-topbar {
		left: 16rem !important;
		width: calc(100% - 16rem) !important;
	}
}

/* ── Sidebar — styles live in ao-portal-components.css (.ao-sidebar) ─ */

/* ── Topbar ────────────────────────────────────────────────── */
.ao-shell-topbar {
	background: rgba(255, 255, 255, 0.82) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 4px 20px rgba(15, 23, 42, 0.04) !important;
	height: 64px !important;
}

.ao-shell-topbar h1 {
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em;
	color: #0f172a !important;
}

.ao-shell-topbar input[type="search"] {
	background: #f8fafc !important;
	border-radius: 10px !important;
	border-color: #e2e8f0 !important;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.ao-shell-topbar input[type="search"]:focus {
	border-color: #818cf8 !important;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

.ao-shell-topbar .w-8.h-8.rounded-full,
.ao-shell-topbar .ao-topbar-avatar {
	background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
	box-shadow: 0 2px 8px var(--ao-accent-glow);
}

/* ── Cards & panels ────────────────────────────────────────── */
.ao-shell-wrap .bg-surface-container-lowest,
.ao-shell-wrap .bg-white.rounded-xl,
.ao-shell-wrap section.bg-white {
	background: #ffffff !important;
	border: 1px solid rgba(226, 232, 240, 0.85) !important;
	border-radius: var(--ao-card-radius) !important;
	box-shadow: var(--ao-card-shadow) !important;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.ao-shell-wrap .ao-course-card:hover,
.ao-shell-wrap .ao-stat-card:hover,
.ao-shell-wrap .hover\:shadow-md:hover {
	box-shadow: var(--ao-card-shadow-hover) !important;
}

.ao-shell-wrap .rounded-lg.border {
	border-radius: 12px !important;
}

/* Hero / profile header */
.ao-shell-wrap .ao-student-hero {
	border: 1px solid rgba(226, 232, 240, 0.9) !important;
}

/* KPI / stat tiles — scoped to ao-stat-card only */
.ao-shell-wrap .ao-stat-card .w-12.h-12.rounded-full {
	border-radius: 14px !important;
	box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}

.ao-shell-wrap .ao-stat-card .bg-secondary-container.w-12 {
	background: linear-gradient(135deg, #e0e7ff, #c7d2fe) !important;
	color: #4338ca !important;
}

.ao-shell-wrap .ao-stat-card .bg-error-container.w-12 {
	background: linear-gradient(135deg, #fee2e2, #fecaca) !important;
	color: #b91c1c !important;
}

.ao-shell-wrap .ao-stat-card .bg-tertiary-container.w-12 {
	background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
	color: #92400e !important;
}

/* GPA highlight box (legacy fallback) */
.ao-shell-wrap .min-w-\[140px\].shadow-sm {
	background: linear-gradient(145deg, #eef2ff, #ffffff) !important;
	border: 1px solid #c7d2fe !important;
	border-radius: 14px !important;
}

.ao-shell-wrap .min-w-\[140px\] .text-primary-container,
.ao-shell-wrap .font-h1.text-primary-container {
	background: linear-gradient(135deg, #4f46e5, #7c3aed);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* ── Pills & badges ────────────────────────────────────────── */
.ao-shell-wrap .rounded-full.text-label-sm,
.ao-shell-wrap .rounded-full.font-label-sm {
	border-radius: 999px !important;
	font-weight: 600 !important;
	padding: 0.35rem 0.85rem !important;
}

.ao-shell-wrap .bg-secondary-container.rounded-full,
.ao-shell-wrap .bg-secondary-container.px-3.py-1\.5 {
	background: linear-gradient(135deg, #eef2ff, #e0e7ff) !important;
	color: #3730a3 !important;
	border: 1px solid #c7d2fe !important;
}

/* ── Tabs ──────────────────────────────────────────────────── */
.ao-shell-wrap .ao-student-tab.is-active,
.ao-shell-wrap [data-ao-tabs-root] button.is-active {
	color: #4f46e5 !important;
}

/* Tab bar + panel — see ao-portal-components.css (.ao-tab-bar, .ao-tab-panel) */

/* Parent student chips */
.ao-shell-wrap #ao-parent-students button.is-active {
	background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
	border-color: transparent !important;
	box-shadow: 0 4px 14px var(--ao-accent-glow);
}

/* ── Tables ────────────────────────────────────────────────── */
.ao-shell-wrap table thead,
.ao-shell-wrap table thead.bg-surface-container-low,
.ao-shell-wrap table thead.bg-slate-50 {
	background: linear-gradient(180deg, #f8fafc, #f1f5f9) !important;
}

/* ── Buttons (supplement components.css) ───────────────────── */
.ao-shell-wrap .ao-btn,
.ao-shell-wrap .ao-btn-primary {
	border-radius: 10px !important;
	font-weight: 600 !important;
	padding: 0.5rem 1rem !important;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.ao-shell-wrap .ao-btn-primary {
	background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
	border: none !important;
	color: #ffffff !important;
	box-shadow: 0 4px 14px var(--ao-accent-glow) !important;
	text-decoration: none !important;
}

.ao-shell-wrap .ao-btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 20px var(--ao-accent-glow) !important;
}

.ao-shell-wrap .ao-btn-outline {
	border-radius: 10px !important;
	border-color: #e2e8f0 !important;
	background: #fff !important;
}

.ao-shell-wrap .ao-btn-outline:hover {
	border-color: #c7d2fe !important;
	background: #f8fafc !important;
	color: #4f46e5 !important;
}

/* ── Alerts ────────────────────────────────────────────────── */
.ao-shell-wrap .border-amber-200.bg-amber-50,
.ao-shell-wrap .bg-amber-50.border-amber-200 {
	border-radius: 12px !important;
	border-left: 4px solid #f59e0b !important;
}

.ao-shell-wrap .border-red-200.bg-red-50 {
	border-radius: 12px !important;
	border-left: 4px solid #ef4444 !important;
}

.ao-shell-wrap .border-emerald-200.bg-emerald-50 {
	border-radius: 12px !important;
	border-left: 4px solid #10b981 !important;
}

/* ── Section headings ──────────────────────────────────────── */
.ao-shell-wrap .ao-section__head,
.ao-shell-wrap .font-h2.text-h2,
.ao-shell-wrap h3.font-h2 {
	letter-spacing: -0.02em;
	position: relative;
}

.ao-shell-wrap .flex.justify-between.items-end.border-b {
	border-bottom: 2px solid #e2e8f0 !important;
	padding-bottom: 0.75rem !important;
	margin-bottom: 1.25rem !important;
}

/* ── Coach roster cards ────────────────────────────────────── */
.ao-shell-wrap article.bg-surface-container-lowest.border {
	border-radius: var(--ao-card-radius) !important;
}

.ao-shell-wrap article.bg-surface-container-lowest .w-12.h-12.rounded-full {
	background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
}

/* ── Forms & inputs inside shell ───────────────────────────── */
.ao-shell-wrap select.ao-input,
.ao-shell-wrap select.border,
.ao-shell-wrap input.ao-input,
.ao-shell-wrap textarea.ao-input {
	border-radius: 10px !important;
	border-color: #e2e8f0 !important;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.ao-shell-wrap select:focus,
.ao-shell-wrap input:focus,
.ao-shell-wrap textarea:focus {
	border-color: #818cf8 !important;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
	outline: none !important;
}

/* ── Progress bars ─────────────────────────────────────────── */
.ao-shell-wrap .ao-progress-bar,
.ao-shell-wrap .ao-coach-progress-bar {
	border-radius: 999px !important;
	background: #e2e8f0 !important;
	height: 8px !important;
}

.ao-shell-wrap .ao-progress-bar > span,
.ao-shell-wrap .ao-coach-progress-bar span {
	background: linear-gradient(90deg, #4f46e5, #7c3aed) !important;
	border-radius: 999px !important;
}

/* ── Empty states ──────────────────────────────────────────── */
.ao-shell-wrap .text-center .material-symbols-outlined.text-\[40px\] {
	opacity: 0.45;
}

/* ── Notification panel polish ─────────────────────────────── */
.ao-notification-panel {
	border-radius: 14px !important;
	border: 1px solid #e2e8f0 !important;
	box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15) !important;
}

/* ── Page intro blocks (teacher hub, etc.) ─────────────────── */
.ao-shell-wrap #ao-teacher-page-content-start h1,
.ao-shell-wrap .mb-stack-lg > h1.font-h1 {
	background: linear-gradient(135deg, #0f172a 0%, #3730a3 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}