/* Mobile-first responsive styles for School Dashboard Portal */
/* Color palette: blue, green, purple, orange + accents */

:root {
	--blue: #2563eb; /* bright educational blue */
	--green: #16a34a; /* vibrant green */
	--purple: #7c3aed; /* vivid purple */
	--orange: #f97316; /* lively orange */
	--indigo: #4f46e5;
	--teal: #0d9488;
	--bg: #f8fafc; /* slate-50 */
	--card-bg: #ffffff;
	--text: #0f172a; /* slate-900 */
	--muted: #475569; /* slate-600 */
	--ring: rgba(0,0,0,0.08);
	--radius: 16px;
	--shadow: 0 10px 20px -10px rgba(2,6,23,0.2);
}

* { box-sizing: border-box; }
html, body {
	padding: 0; margin: 0; height: 100%;
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	background: var(--bg);
	color: var(--text);
}

.container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 16px;
}

/* Header */
.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--card-bg);
	padding: 12px 16px;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	position: sticky;
	top: 0;
	z-index: 50;
}
.brand {
	display: flex;
	align-items: center;
	gap: 12px;
}
.brand img {
	width: 44px; height: 44px; border-radius: 50%;
	box-shadow: 0 4px 10px -6px rgba(2,6,23,0.35);
}
.brand .school-name {
	font-size: 1.125rem;
	font-weight: 700;
}

/* Grid */
.grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-top: 16px;
}
@media (min-width: 900px) {
	.grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
}

/* Card */
.card {
	position: relative;
	background: var(--card-bg);
	border-radius: var(--radius);
	padding: 16px;
	box-shadow: var(--shadow);
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	transform: translateZ(0);
}
.card:hover { box-shadow: 0 14px 24px -12px rgba(2,6,23,0.28); }

.card .icon {
	width: 64px; height: 64px;
	border-radius: 50%;
	display: grid; place-items: center;
	color: #fff;
	font-size: 28px;
	box-shadow: inset 0 0 0 2px rgba(255,255,255,0.15), 0 10px 14px -8px rgba(2,6,23,0.4);
}
.card .title { font-size: 0.95rem; font-weight: 800; margin-top: 12px; letter-spacing: .2px; }
.card .subtitle { font-size: 0.85rem; color: var(--muted); margin-top: 6px; line-height: 1.35; }

/* Color variants */
.bg-blue { background: var(--blue); }
.bg-green { background: var(--green); }
.bg-purple { background: var(--purple); }
.bg-orange { background: var(--orange); }
.bg-teal { background: var(--teal); }
.bg-indigo { background: var(--indigo); }

/* Ripple effect */
.ripple {
	position: absolute;
	border-radius: 50%;
	transform: scale(0);
	animation: ripple 600ms linear;
	background-color: rgba(255,255,255,0.35);
	pointer-events: none;
}
@keyframes ripple {
	to { transform: scale(10); opacity: 0; }
}

/* Floating help button */
.fab {
	position: fixed;
	right: 16px;
	bottom: 16px;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: var(--indigo);
	color: #fff;
	display: grid; place-items: center;
	box-shadow: var(--shadow);
	cursor: pointer;
	transition: transform .15s ease, box-shadow .2s ease;
	z-index: 60;
}
.fab:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(2,6,23,0.35); }

/* Tooltip for FAB */
.fab .tooltip {
	position: absolute;
	right: 64px; bottom: 50%; transform: translateY(50%);
	background: var(--card-bg);
	color: var(--text);
	padding: 6px 10px;
	border-radius: 10px;
	box-shadow: var(--shadow);
	font-size: 12px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease;
}
.fab:hover .tooltip { opacity: 1; }

/* Utility */
.row { display: flex; align-items: center; gap: 12px; }
.space-between { justify-content: space-between; }
.mt-16 { margin-top: 16px; }


/* Rich content (WYSIWYG) display */
.content-html { white-space: normal; }
.content-html img { max-width: 100%; height: auto; display: block; margin: 8px 0; border-radius: 8px; }
.content-html h1, .content-html h2, .content-html h3 { margin: 10px 0 6px; font-weight: 800; }
.content-html ul, .content-html ol { padding-left: 18px; margin: 8px 0; }
.content-html a { color: var(--indigo); text-decoration: underline; }