/* FCILL UI Design System (shared)
   Extracted from /ai/fcill/home/index.php + /ai/fcill/components/hover-sidebar.php
   Keep this file framework-agnostic (plain CSS) and reuse across modules.
*/

:root {
	--brand-primary: #3b82f6;
	--brand-primary-dark: #1d4ed8;
	--brand-secondary: #f97316;
	--brand-emerald: #22c55e;
	--brand-amber: #f59e0b;
	--brand-rose: #f43f5e;
	--transition-base: all 0.25s ease-in-out;

	--fc-text: #0f172a;
	--fc-muted: rgba(15, 23, 42, 0.72);
	--fc-muted-2: rgba(15, 23, 42, 0.6);
	--fc-surface: rgba(255, 255, 255, 0.88);
	--fc-surface-2: rgba(255, 255, 255, 0.72);
	--fc-surface-3: rgba(248, 250, 252, 0.92);
	--fc-border: rgba(15, 23, 42, 0.14);
	--fc-border-strong: rgba(15, 23, 42, 0.22);
	--brand-radius: 20px;
	--brand-shadow: 0 30px 60px -35px rgba(15, 23, 42, 0.25);

	/* Theme hooks (modules can override for dark mode). */
	--fc-hero-title: rgba(29, 78, 216, 0.92);
	--fc-input-placeholder: rgba(15, 23, 42, 0.45);
	--fc-surface-solid: #ffffff;
	--fc-surface-elevated: rgba(255, 255, 255, 0.92);

	/* Required generic tokens (map to FCILL tokens). */
	--primary: var(--brand-primary);
	--background: #ffffff;
	--card-bg: var(--fc-surface);
	--border: var(--fc-border);
	--muted-text: var(--fc-muted);
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.14), transparent 55%),
					radial-gradient(circle at 20% 80%, rgba(249, 115, 22, 0.10), transparent 55%),
					radial-gradient(circle at 85% 65%, rgba(34, 197, 94, 0.10), transparent 55%),
					linear-gradient(140deg, #ffffff, #f8fafc);
	color: var(--fc-text);
	min-height: 100vh;
	transition: background 0.35s ease;
}

body.dark-mode {
	background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.07), transparent 55%),
				radial-gradient(circle at 20% 80%, rgba(249, 115, 22, 0.05), transparent 55%),
				radial-gradient(circle at 85% 65%, rgba(34, 197, 94, 0.05), transparent 55%),
				linear-gradient(140deg, #080f1e, #0b1525);
}

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

.container { max-width: 1320px; margin: 0 auto; padding: 1.25rem 1.25rem 4.5rem; }
@media (min-width: 900px) { .container { padding-left: 2.25rem; padding-right: 2.25rem; } }

.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 1rem;
	border-radius: 999px;
	border: 1px solid var(--fc-border);
	background: var(--fc-surface);
	backdrop-filter: blur(14px);
	position: sticky;
	top: 14px;
	z-index: 40;
	margin-bottom: 1.5rem;
}
.brand { display: inline-flex; align-items: center; gap: 0.75rem; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; }
.brand-mark img { width: 38px; height: 38px; border-radius: 12px; object-fit: contain; display: block; }
.brand-text { display: grid; line-height: 1.1; }
.brand-text strong { font-weight: 800; letter-spacing: -0.01em; }
.brand-text span { font-size: 0.78rem; color: var(--fc-muted-2); }

.topbar-nav { display: none; gap: 0.5rem; align-items: center; }
@media (min-width: 900px) { .topbar-nav { display: inline-flex; } }
.nav-link {
	padding: 0.5rem 0.85rem;
	border-radius: 999px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--fc-muted);
	transition: var(--transition-base);
}
.nav-link:hover,
.nav-link.active,
.nav-link.is-active { background: rgba(59, 130, 246, 0.1); color: var(--brand-primary); }

.topbar-actions { display: inline-flex; align-items: center; gap: 0.5rem; }
.icon-btn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--fc-surface-2);
	border: 1px solid var(--fc-border);
	display: grid;
	place-items: center;
	cursor: pointer;
	color: var(--fc-muted);
	transition: var(--transition-base);
}
.icon-btn:hover { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }
.avatar-btn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
	color: #fff;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 0.85rem;
	border: none;
	cursor: pointer;
}

/* Dropdown */
.dropdown { position: relative; }
.dropdown-menu {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 0.5rem;
	background: var(--fc-surface-solid);
	border: 1px solid var(--fc-border);
	border-radius: 14px;
	min-width: 200px;
	box-shadow: var(--brand-shadow);
	display: none;
	z-index: 70;
	overflow: hidden;
}
.dropdown.active .dropdown-menu { display: block; }
.dropdown-item {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.75rem 1rem;
	font-size: 0.88rem;
	color: var(--fc-text);
	transition: var(--transition-base);
}
.dropdown-item:hover { background: var(--fc-surface-3); }
.dropdown-item i { width: 18px; color: var(--fc-muted); }
.dropdown-divider { height: 1px; background: var(--fc-border); margin: 0.35rem 0; }
.dropdown-item.danger, .dropdown-item.danger i { color: var(--brand-rose); }

/* Layout helpers */
.dashboard-grid { display: grid; gap: 1.5rem; }
@media (min-width: 1024px) { .dashboard-grid { grid-template-columns: 1fr 360px; } }
.main-content { display: grid; gap: 1.5rem; }
.sidebar-content { display: grid; gap: 1.5rem; align-content: start; }

/* Metric cards */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; }
.stat-card {
	background: var(--fc-surface);
	border: 1px solid var(--fc-border);
	border-radius: 18px;
	padding: 1.25rem;
	display: grid;
	gap: 0.5rem;
}
.stat-card .stat-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.1rem; }
.stat-card .stat-icon.primary { background: rgba(59, 130, 246, 0.12); color: var(--brand-primary); }
.stat-card .stat-icon.secondary { background: rgba(249, 115, 22, 0.12); color: var(--brand-secondary); }
.stat-card .stat-icon.emerald { background: rgba(34, 197, 94, 0.12); color: var(--brand-emerald); }
.stat-card .stat-icon.amber { background: rgba(245, 158, 11, 0.12); color: var(--brand-amber); }
.stat-card .stat-icon.rose { background: rgba(244, 63, 94, 0.12); color: var(--brand-rose); }
.stat-value { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; }
.stat-label { font-size: 0.82rem; color: var(--fc-muted); }

/* Section card */
.section-card { background: var(--fc-surface); border: 1px solid var(--fc-border); border-radius: var(--brand-radius); overflow: hidden; }
.section-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--fc-border); }
.section-header h2 { margin: 0; font-size: 1.1rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.5rem; }
.section-body { padding: 1.25rem 1.5rem; }

/* Tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.tile { border: 1px solid var(--fc-border); background: var(--fc-surface-3); border-radius: 18px; padding: 1.05rem 1.1rem; display: grid; gap: 0.25rem; transition: var(--transition-base); }
.tile:hover { transform: translateY(-2px); border-color: rgba(59, 130, 246, 0.35); }
.tile .tile-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.tile .tile-icon { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: rgba(15, 23, 42, 0.08); color: var(--fc-text); font-size: 1.05rem; }
.tile .tile-icon.primary { background: rgba(59, 130, 246, 0.12); color: var(--brand-primary); }
.tile .tile-icon.secondary { background: rgba(249, 115, 22, 0.12); color: var(--brand-secondary); }
.tile .tile-icon.emerald { background: rgba(34, 197, 94, 0.12); color: var(--brand-emerald); }
.tile .tile-icon.amber { background: rgba(245, 158, 11, 0.12); color: var(--brand-amber); }
.tile .tile-icon.rose { background: rgba(244, 63, 94, 0.12); color: var(--brand-rose); }
.tile h3 { margin: 0.35rem 0 0; font-size: 1.02rem; font-weight: 780; letter-spacing: -0.01em; }
.tile p { margin: 0; color: var(--fc-muted); font-size: 0.87rem; }
.small-note { color: var(--fc-muted-2); font-size: 0.82rem; }

/* Mini rows */
.mini-title { margin: 0 0 0.55rem; font-size: 0.92rem; font-weight: 780; letter-spacing: -0.01em; display:flex; align-items:center; gap: 0.5rem; }
.mini-title i { color: var(--fc-muted-2); }
.mini-list { display: grid; gap: 0.55rem; }
.mini-row {
	display: grid;
	gap: 0.1rem;
	padding: 0.75rem 0.85rem;
	border-radius: 16px;
	border: 1px solid var(--fc-border);
	background: var(--fc-surface-elevated);
	transition: var(--transition-base);
}
.mini-row:hover { transform: translateY(-1px); border-color: rgba(59, 130, 246, 0.35); }
.mini-row strong { font-size: 0.92rem; font-weight: 780; }
.mini-row span { font-size: 0.82rem; color: var(--fc-muted-2); }
.mini-divider { height: 1px; background: var(--fc-border); margin: 0.95rem 0; }

.mini-row.mini-row-empty {
	border-style: dashed;
	background: var(--fc-surface-3);
}

/* Hero */
.hero {
	display: grid;
	gap: 0.65rem;
	text-align: center;
	padding: 1.4rem 0 1.35rem;
}
.hero h1 {
	margin: 0;
	font-size: clamp(2.15rem, 4.3vw, 3.4rem);
	letter-spacing: -0.05em;
	font-weight: 860;
	color: var(--fc-hero-title);
}
.hero p {
	margin: 0;
	font-size: 1.08rem;
	color: var(--fc-muted);
}
.hero-search {
	display: flex;
	justify-content: center;
	margin-top: 0.75rem;
}

/* Search pill */
.search-pill {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	width: min(980px, 100%);
	padding: 0.7rem 0.75rem;
	border-radius: 999px;
	border: 1px solid var(--fc-border);
	background: var(--fc-surface-elevated);
	box-shadow: 0 28px 55px rgba(15, 23, 42, 0.12);
}
.search-icon {
	width: 46px;
	height: 46px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	background: rgba(59, 130, 246, 0.10);
	color: var(--brand-primary);
	flex: 0 0 auto;
}
.search-input {
	flex: 1;
	border: 0;
	outline: none;
	background: transparent;
	font: inherit;
	font-size: 1.05rem;
	padding: 0.4rem 0.25rem;
	color: var(--fc-text);
}
.search-input::placeholder { color: var(--fc-input-placeholder); }

.search-btn {
	border: 0;
	cursor: pointer;
	border-radius: 999px;
	padding: 0.92rem 1.35rem;
	font-weight: 750;
	font-size: 1.02rem;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: #fff;
	background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
	transition: var(--transition-base);
	flex: 0 0 auto;
}
.search-btn:hover { transform: translateY(-1px); filter: brightness(1.02); }

/* Generic buttons matching FCILL */
.fc-btn {
	border: 1px solid transparent;
	cursor: pointer;
	border-radius: 999px;
	padding: 0.9rem 1.25rem;
	font-weight: 750;
	font-size: 0.98rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	transition: var(--transition-base);
	text-decoration: none;
	white-space: nowrap;
}
.fc-btn.primary {
	color: #fff;
	background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
	box-shadow: 0 18px 36px -26px rgba(59, 130, 246, 0.65);
}
.fc-btn.primary:hover { transform: translateY(-1px); filter: brightness(1.03); }
.fc-btn.secondary {
	color: var(--fc-text);
	background: var(--fc-surface-elevated);
	border-color: var(--fc-border);
}
.fc-btn.secondary:hover { transform: translateY(-1px); border-color: rgba(59, 130, 246, 0.35); }

/* Compatibility aliases (helps migrate other modules like /e-exams/ without rewriting markup) */
.btn {
	border: 1px solid var(--fc-border);
	cursor: pointer;
	border-radius: 999px;
	padding: 0.9rem 1.25rem;
	font-weight: 750;
	font-size: 0.98rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	transition: var(--transition-base);
	text-decoration: none;
	white-space: nowrap;
	background: var(--fc-surface-elevated);
	color: var(--fc-text);
}
.btn:hover { transform: translateY(-1px); border-color: rgba(59, 130, 246, 0.35); }

.btn-primary,
.btn.btn-primary {
	color: #fff;
	background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
	border-color: transparent;
	box-shadow: 0 18px 36px -26px rgba(59, 130, 246, 0.65);
}

.btn-secondary,
.btn.btn-secondary {
	color: var(--fc-text);
	background: var(--fc-surface-elevated);
	border-color: var(--fc-border);
}

.btn-danger,
.btn.btn-danger {
	color: var(--brand-rose);
	background: rgba(244, 63, 94, 0.10);
	border-color: rgba(244, 63, 94, 0.25);
}

.input, .select, .textarea {
	width: 100%;
	padding: 0.85rem 0.95rem;
	border-radius: 14px;
	border: 1px solid var(--fc-border-strong);
	background: rgba(255,255,255,0.92);
	outline: none;
	font: inherit;
	color: var(--fc-text);
	transition: var(--transition-base);
}
.input:focus, .select:focus, .textarea:focus {
	border-color: rgba(59, 130, 246, 0.55);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.textarea { min-height: 110px; resize: vertical; }

body.dark-mode .input,
body.dark-mode .select,
body.dark-mode .textarea {
	background: var(--fc-surface-solid);
}

/* Select inside pill */
.fc-pill-select {
	border: 1px solid var(--fc-border);
	background: var(--fc-surface-3);
	color: var(--fc-text);
	border-radius: 999px;
	padding: 0.65rem 0.9rem;
	font: inherit;
	font-size: 0.95rem;
	outline: none;
	min-width: 180px;
	transition: var(--transition-base);
}
.fc-pill-select:focus { border-color: rgba(59, 130, 246, 0.55); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14); }

/* Focus ring for inputs */
.search-input:focus { box-shadow: none; }

@media (max-width: 640px) {
	.search-pill { flex-wrap: wrap; gap: 0.5rem; padding: 0.6rem; border-radius: 24px; }
	.search-icon { width: 44px; height: 44px; }
	.search-btn { padding: 0.85rem 1.05rem; width: 100%; justify-content: center; }
	.fc-pill-select { width: 100%; }
}

/* FCILL hover sidebar (left) - extracted from /ai/fcill/components/hover-sidebar.php */
.hover-sidebar {
	position: fixed;
	top: 110px;
	left: 18px;
	width: min(340px, calc(100vw - 80px));
	max-height: calc(100vh - 150px);
	overflow: auto;
	border-radius: 24px;
	border: 1px solid var(--fc-border, rgba(15, 23, 42, 0.14));
	background: var(--fc-surface, rgba(255, 255, 255, 0.88));
	backdrop-filter: blur(14px);
	box-shadow: 0 40px 80px rgba(15, 23, 42, 0.2);
	padding: 1rem 1rem 1.05rem;
	z-index: 65;
	transform: translateX(calc(-100% + 54px));
	transition: transform 0.25s ease;
}
.hover-sidebar:hover,
.hover-sidebar.open { transform: translateX(0); }
.hover-sidebar-tab {
	position: absolute;
	right: -52px;
	top: 18px;
	width: 46px;
	height: 46px;
	border-radius: 999px;
	border: 1px solid var(--fc-border-strong, rgba(15, 23, 42, 0.22));
	background: var(--fc-surface-elevated);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.25s ease-in-out;
	box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
}
.hover-sidebar-tab:hover { transform: translateY(-2px); border-color: rgba(59, 130, 246, 0.35); }
.hover-sidebar h3 {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 780;
	letter-spacing: -0.01em;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
}
.hover-sidebar .side-section {
	display: grid;
	gap: 0.7rem;
	padding: 0.9rem 0.95rem;
	border-radius: 18px;
	border: 1px solid var(--fc-border, rgba(15, 23, 42, 0.14));
	background: var(--fc-surface-3, rgba(248, 250, 252, 0.92));
}
.hover-sidebar .side-section + .side-section { margin-top: 0.85rem; }
.side-links { display: grid; gap: 0.55rem; }
.side-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 0.85rem;
	border-radius: 16px;
	border: 1px solid var(--fc-border, rgba(15, 23, 42, 0.14));
	background: var(--fc-surface-elevated, rgba(255, 255, 255, 0.92));
	transition: all 0.25s ease-in-out;
}
.side-link:hover { transform: translateY(-2px); border-color: rgba(59, 130, 246, 0.35); }
.side-link.active-link {
	border-color: rgba(59, 130, 246, 0.55);
	background: rgba(59, 130, 246, 0.08);
}
.side-link .left {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	min-width: 0;
}
.side-link strong {
	font-size: 0.98rem;
	font-weight: 760;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 220px;
}
.side-link span {
	color: var(--fc-muted-2, rgba(15, 23, 42, 0.6));
	font-size: 0.86rem;
	white-space: nowrap;
}
@media (max-width: 1180px) { .hover-sidebar { display: none; } }