/* =====================================================================
   SMRC v13 - Deep Density UI + Redesigned Report Card Visual
   Loaded LAST so it refines the existing look without replacing any
   existing stylesheet, markup, logic or download option.
   ===================================================================== */

/* =====================================================================
   1. DEEP DENSITY DASHBOARD - LIGHT THEME
   Richer, deeper surfaces with guaranteed text contrast.
   ===================================================================== */
body.smrc-app-page {
	--smrc-deep-1: #0e1a3a;
	--smrc-deep-2: #16265c;
	--smrc-deep-3: #1e3a8a;
	--smrc-accent: #0d9488;
	--smrc-accent-2: #b08d3c;
	--smrc-ink-strong: #0b1220;
	--smrc-ink-soft: #3d4a63;
}

body.smrc-app-page .smrc-portal-topbar {
	background: linear-gradient(120deg, #0e1a3a 0%, #1e3a8a 55%, #0d9488 100%);
	border-color: rgba(255, 255, 255, .22);
	color: #ffffff;
}
body.smrc-app-page .smrc-portal-topbar,
body.smrc-app-page .smrc-portal-topbar * { color: #ffffff; }
body.smrc-app-page .smrc-badge { background: rgba(255, 255, 255, .26); color: #ffffff; }

body.smrc-app-page .smrc-portal-body {
	background: #f4f6fb;
	border-color: rgba(14, 26, 58, .14);
}
body.smrc-app-page .smrc-portal-nav {
	background: #eef1f8;
	border-right: 1px solid rgba(14, 26, 58, .12);
}
body.smrc-app-page .smrc-portal-nav button { color: #24324f; font-weight: 650; }
body.smrc-app-page .smrc-portal-nav button:hover { background: rgba(30, 58, 138, .12); color: #0e1a3a; }
body.smrc-app-page .smrc-portal-nav button.active {
	background: linear-gradient(135deg, #16265c, #1e3a8a);
	color: #ffffff;
	box-shadow: inset 0 0 0 1.5px rgba(13, 148, 136, .55);
}
body.smrc-app-page .smrc-portal-nav button.active .smrc-nav-icon { color: #7dd3c6; }

body.smrc-app-page .smrc-card,
body.smrc-app-page .smrc-stat-card,
body.smrc-app-page .smrc-choice-card,
body.smrc-app-page .smrc-modal-box {
	background: #ffffff;
	border: 1px solid rgba(14, 26, 58, .14);
	color: var(--smrc-ink-strong);
}
body.smrc-app-page .smrc-stat-card { border-left: 5px solid #1e3a8a; }
body.smrc-app-page .smrc-stat-value { color: #0e1a3a; }
body.smrc-app-page .smrc-h1,
body.smrc-app-page h2,
body.smrc-app-page h3,
body.smrc-app-page h4 { color: #0b1220; }
body.smrc-app-page .smrc-muted,
body.smrc-app-page .smrc-choice-desc { color: #4a5872; }

body.smrc-app-page .smrc-table th {
	background: #16265c;
	color: #ffffff;
	border-bottom: 2px solid #0d9488;
}
body.smrc-app-page .smrc-table td { color: #17233d; border-color: rgba(14, 26, 58, .12); }
body.smrc-app-page .smrc-table tbody tr:nth-child(even) td { background: #f2f5fb; }
body.smrc-app-page .smrc-table tbody tr:hover td { background: #e6ecf9; }

body.smrc-app-page .smrc-btn { color: #ffffff; }
body.smrc-app-page .smrc-btn-secondary { background: #ffffff; color: #16265c; border: 1.5px solid #16265c; }
body.smrc-app-page .smrc-btn-secondary:hover { background: #16265c; color: #ffffff; }

body.smrc-app-page input,
body.smrc-app-page select,
body.smrc-app-page textarea {
	background: #ffffff;
	color: #0b1220;
	border: 1.5px solid rgba(14, 26, 58, .25);
}
body.smrc-app-page input::placeholder,
body.smrc-app-page textarea::placeholder { color: #6b7896; opacity: 1; }
body.smrc-app-page select option { background: #ffffff; color: #0b1220; }
body.smrc-app-page label { color: #24324f; }

/* =====================================================================
   2. DEEP DENSITY DASHBOARD - DARK THEME
   Deeper panels, brighter type. Nothing may render dark-on-dark.
   ===================================================================== */
body.smrc-app-page.smrc-dark {
	background-color: #060a17;
	background-image:
		radial-gradient(900px 520px at 8% 0%, rgba(30, 58, 138, .45), transparent 62%),
		radial-gradient(820px 520px at 95% 8%, rgba(13, 148, 136, .30), transparent 58%),
		linear-gradient(180deg, #060a17 0%, #0a1124 100%);
}
body.smrc-app-page.smrc-dark .smrc-portal-topbar {
	background: linear-gradient(120deg, #0a1226 0%, #16265c 55%, #0b5f58 100%);
	border-color: rgba(255, 255, 255, .14);
}
body.smrc-app-page.smrc-dark .smrc-portal-body {
	background: #0c1327;
	border-color: rgba(255, 255, 255, .12);
}
body.smrc-app-page.smrc-dark .smrc-portal-nav {
	background: #0a1022;
	border-right: 1px solid rgba(255, 255, 255, .1);
}
body.smrc-app-page.smrc-dark .smrc-portal-nav button { color: #dbe4f5; }
body.smrc-app-page.smrc-dark .smrc-portal-nav button:hover { background: rgba(59, 130, 246, .22); color: #ffffff; }
body.smrc-app-page.smrc-dark .smrc-portal-nav button.active {
	background: linear-gradient(135deg, #1e3a8a, #0d9488);
	color: #ffffff;
	box-shadow: inset 0 0 0 1.5px rgba(125, 211, 198, .6);
}
body.smrc-app-page.smrc-dark .smrc-card,
body.smrc-app-page.smrc-dark .smrc-stat-card,
body.smrc-app-page.smrc-dark .smrc-choice-card,
body.smrc-app-page.smrc-dark .smrc-modal-box,
body.smrc-app-page.smrc-dark .smrc-auth-wrap {
	background: #121b33;
	border: 1px solid rgba(255, 255, 255, .14);
	color: #eef2fb;
}
body.smrc-app-page.smrc-dark .smrc-stat-card { border-left: 5px solid #0d9488; }
body.smrc-app-page.smrc-dark .smrc-h1,
body.smrc-app-page.smrc-dark h2,
body.smrc-app-page.smrc-dark h3,
body.smrc-app-page.smrc-dark h4,
body.smrc-app-page.smrc-dark .smrc-stat-value,
body.smrc-app-page.smrc-dark p,
body.smrc-app-page.smrc-dark li,
body.smrc-app-page.smrc-dark span,
body.smrc-app-page.smrc-dark strong { color: #f2f6ff; }
body.smrc-app-page.smrc-dark .smrc-muted,
body.smrc-app-page.smrc-dark .smrc-choice-desc { color: #b3c0da; }
body.smrc-app-page.smrc-dark label { color: #dce4f5; }

body.smrc-app-page.smrc-dark .smrc-table { background: #0f1729; }
body.smrc-app-page.smrc-dark .smrc-table th { background: #1b2a55; color: #ffffff; border-bottom: 2px solid #0d9488; }
body.smrc-app-page.smrc-dark .smrc-table td { color: #e5ebf8; border-color: rgba(255, 255, 255, .1); }
body.smrc-app-page.smrc-dark .smrc-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .04); }
body.smrc-app-page.smrc-dark .smrc-table tbody tr:hover td { background: rgba(59, 130, 246, .18); }

body.smrc-app-page.smrc-dark input,
body.smrc-app-page.smrc-dark select,
body.smrc-app-page.smrc-dark textarea {
	background: #0d1526;
	color: #f2f6ff;
	border: 1.5px solid rgba(255, 255, 255, .22);
}
body.smrc-app-page.smrc-dark input::placeholder,
body.smrc-app-page.smrc-dark textarea::placeholder { color: #93a2c0; opacity: 1; }
body.smrc-app-page.smrc-dark select option { background: #0d1526; color: #f2f6ff; }
body.smrc-app-page.smrc-dark .smrc-btn-secondary { background: transparent; color: #cfe0ff; border: 1.5px solid #6d8bd6; }
body.smrc-app-page.smrc-dark .smrc-btn-secondary:hover { background: #1e3a8a; color: #ffffff; }
body.smrc-app-page.smrc-dark a { color: #8fc7ff; }

/* The report card is a printable document: it always stays light so no
   letter is ever hidden in dark mode. */
body.smrc-app-page.smrc-dark .smrc-reportcard,
body.smrc-app-page.smrc-dark .smrc-reportcard th,
body.smrc-app-page.smrc-dark .smrc-reportcard td,
body.smrc-app-page.smrc-dark .smrc-reportcard div { color: #101c33; }
body.smrc-app-page.smrc-dark .smrc-reportcard { background: #ffffff; }
body.smrc-app-page.smrc-dark .smrc-rc-input { background: #fffdf5; color: #101c33; }

/* =====================================================================
   3. REPORT CARD VISUAL - private-school presentation
   Structure, data and print behaviour are untouched; only the look.
   ===================================================================== */
.smrc-reportcard {
	--smrc-rc-navy: #102144;
	--smrc-rc-gold: #b08d3c;
	--smrc-rc-line: #b9c1d2;
	border: 1px solid var(--smrc-rc-navy);
	box-shadow: 0 18px 44px rgba(16, 33, 68, .18);
	font-family: "Times New Roman", Georgia, serif;
	color: #101c33;
	position: relative;
}
.smrc-reportcard::before {
	content: "";
	position: absolute; left: 0; right: 0; top: 0; height: 6px;
	background: linear-gradient(90deg, var(--smrc-rc-navy) 0%, #1e3a8a 60%, var(--smrc-rc-gold) 100%);
}

.smrc-rc-gov {
	border-bottom: 2px solid var(--smrc-rc-gold);
	padding-bottom: 6px;
}
.smrc-rc-gov-country,
.smrc-rc-gov-ministry { color: var(--smrc-rc-navy); }
.smrc-rc-gov-agency { color: #33405c; }
.smrc-rc-gov-motto { color: var(--smrc-rc-gold); font-weight: 600; }

.smrc-rc-school h2 {
	color: var(--smrc-rc-navy);
	border-bottom: 1px solid var(--smrc-rc-line);
	padding-bottom: 4px;
}

.smrc-rc-title {
	background: var(--smrc-rc-navy);
	color: #ffffff;
	border: 0;
	border-left: 5px solid var(--smrc-rc-gold);
	border-right: 5px solid var(--smrc-rc-gold);
	letter-spacing: 2px;
}

.smrc-reportcard th,
.smrc-reportcard td { border: 1px solid var(--smrc-rc-line); color: #101c33; }

.smrc-rc-profile th {
	background: #e8ecf5;
	color: var(--smrc-rc-navy);
	text-transform: uppercase;
	letter-spacing: .4px;
	font-size: calc(var(--smrc-rc-font) * .92);
}
.smrc-rc-profile td { color: #101c33; }

.smrc-rc-marks thead th {
	background: var(--smrc-rc-navy);
	color: #ffffff;
	border: 1px solid var(--smrc-rc-navy);
}
.smrc-rc-marks tbody tr:nth-child(even) td { background: #f5f7fc; }
.smrc-rc-marks tbody tr:hover td { background: #eaf0fb; }
.smrc-rc-marks tbody td.smrc-rc-subj { color: var(--smrc-rc-navy); }
.smrc-rc-marks tr.smrc-rc-total td {
	background: #e8ecf5; color: var(--smrc-rc-navy);
	border-top: 2px solid var(--smrc-rc-gold);
}

.smrc-rc-box { border: 1px solid var(--smrc-rc-line); }
.smrc-rc-box-label {
	background: var(--smrc-rc-navy); color: #ffffff;
	border-bottom: 2px solid var(--smrc-rc-gold);
}
.smrc-rc-signname { border-top: 1px solid var(--smrc-rc-gold); color: var(--smrc-rc-navy); }

@media print {
	.smrc-reportcard::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.smrc-rc-title,
	.smrc-rc-marks thead th,
	.smrc-rc-box-label { -webkit-print-color-adjust: exact; print-color-adjust: exact; color: #ffffff !important; }
	.smrc-reportcard th, .smrc-reportcard td { border: .8pt solid #4a5878 !important; }
}

/* =====================================================================
   4. RICHER DASHBOARD COLOR + ALWAYS-VISIBLE THEME TOGGLE
   Layout, markup and behaviour untouched - colour only.
   ===================================================================== */

/* Colourful stat cards (light) */
body.smrc-app-page .smrc-stat-card:nth-child(4n+1) { border-left-color: #1d4ed8; background: linear-gradient(135deg, #ffffff 0%, #eaf0ff 100%); }
body.smrc-app-page .smrc-stat-card:nth-child(4n+2) { border-left-color: #0d9488; background: linear-gradient(135deg, #ffffff 0%, #e6f7f4 100%); }
body.smrc-app-page .smrc-stat-card:nth-child(4n+3) { border-left-color: #b45309; background: linear-gradient(135deg, #ffffff 0%, #fdf3e3 100%); }
body.smrc-app-page .smrc-stat-card:nth-child(4n+4) { border-left-color: #9333ea; background: linear-gradient(135deg, #ffffff 0%, #f4ecfd 100%); }
body.smrc-app-page .smrc-stat-card:nth-child(4n+1) .smrc-stat-value { color: #17307a; }
body.smrc-app-page .smrc-stat-card:nth-child(4n+2) .smrc-stat-value { color: #0b6b62; }
body.smrc-app-page .smrc-stat-card:nth-child(4n+3) .smrc-stat-value { color: #8a4208; }
body.smrc-app-page .smrc-stat-card:nth-child(4n+4) .smrc-stat-value { color: #6b21a8; }

body.smrc-app-page .smrc-card { border-top: 3px solid #1d4ed8; }
body.smrc-app-page .smrc-choice-card:hover { border-color: #0d9488; box-shadow: 0 10px 26px rgba(13, 148, 136, .18); }

/* Colourful stat cards (dark) */
body.smrc-app-page.smrc-dark .smrc-stat-card:nth-child(4n+1) { border-left-color: #60a5fa; background: linear-gradient(135deg, #16213c 0%, #1b2c52 100%); }
body.smrc-app-page.smrc-dark .smrc-stat-card:nth-child(4n+2) { border-left-color: #2dd4bf; background: linear-gradient(135deg, #102430 0%, #12333b 100%); }
body.smrc-app-page.smrc-dark .smrc-stat-card:nth-child(4n+3) { border-left-color: #fbbf24; background: linear-gradient(135deg, #251f2e 0%, #322516 100%); }
body.smrc-app-page.smrc-dark .smrc-stat-card:nth-child(4n+4) { border-left-color: #c084fc; background: linear-gradient(135deg, #1d1b3a 0%, #2a1f45 100%); }
body.smrc-app-page.smrc-dark .smrc-card { border-top: 3px solid #3b82f6; }

/* Theme toggle - clearly visible in BOTH light and dark themes */
body.smrc-app-page .smrc-theme-toggle,
body.smrc-app-page.smrc-dark .smrc-theme-toggle {
	width: 40px; height: 40px;
	background: #ffffff;
	color: #16265c;
	border: 2px solid #16265c;
	box-shadow: 0 2px 8px rgba(11, 18, 32, .25);
	opacity: 1;
	backdrop-filter: none;
	z-index: 30;
}
body.smrc-app-page .smrc-theme-toggle:hover { background: #eaf0ff; color: #0e1a3a; border-color: #0d9488; }
body.smrc-app-page.smrc-dark .smrc-theme-toggle {
	background: #f6f9ff;
	color: #0b1226;
	border-color: #2dd4bf;
	box-shadow: 0 2px 10px rgba(45, 212, 191, .35);
}
body.smrc-app-page.smrc-dark .smrc-theme-toggle:hover { background: #ffffff; border-color: #ffffff; }
body.smrc-app-page .smrc-theme-toggle-auth,
body.smrc-app-page.smrc-dark .smrc-theme-toggle-auth { position: absolute; top: 22px; right: 22px; }

/* ---------------------------------------------------------------------
 * Learner profile pop-up (Global Search -> Profile). Previously this had
 * no styling at all, so the text floated over the blurred page. Everything
 * is scoped to .smrc-profile-* so no other pop-up is affected.
 * ------------------------------------------------------------------- */
body.smrc-app-page .smrc-modal.smrc-profile-modal { z-index: 10000; padding: 12px; align-items: center; justify-content: center; }
body.smrc-app-page .smrc-profile-box {
	--pf-bg: #ffffff; --pf-ink: #0b1220; --pf-muted: #51607a; --pf-line: rgba(14, 26, 58, .12); --pf-soft: #f1f5fb;
	display: flex; flex-direction: column; width: min(860px, 96vw);
	max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
	background: var(--pf-bg); color: var(--pf-ink); border: 1px solid var(--pf-line); border-top: 4px solid #0d9488;
	border-radius: 16px; box-shadow: 0 24px 60px -12px rgba(8, 15, 40, .55); overflow: hidden;
}
body.smrc-app-page.smrc-dark .smrc-profile-box {
	--pf-bg: #121b33; --pf-ink: #eef2fb; --pf-muted: #a9b6d0; --pf-line: rgba(255, 255, 255, .14); --pf-soft: rgba(255, 255, 255, .06);
}
body.smrc-app-page .smrc-profile-head {
	display: flex; align-items: center; gap: 14px; padding: 16px 20px; flex: none;
	background: linear-gradient(135deg, #16265c 0%, #0d6f8a 100%); color: #ffffff;
}
body.smrc-app-page .smrc-profile-avatar {
	flex: none; width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, .2); border: 2px solid rgba(255, 255, 255, .55); font-weight: 800; font-size: 19px; color: #fff;
}
body.smrc-app-page .smrc-profile-title { flex: 1; min-width: 0; }
body.smrc-app-page .smrc-profile-box .smrc-profile-name { margin: 0 0 6px; font-size: 20px; line-height: 1.2; color: #ffffff; overflow-wrap: anywhere; }
body.smrc-app-page .smrc-profile-chips { display: flex; flex-wrap: wrap; gap: 6px; }
body.smrc-app-page .smrc-profile-chip { background: rgba(255, 255, 255, .18); color: #fff; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
body.smrc-app-page .smrc-profile-chip.ok { background: #16a34a; }
body.smrc-app-page .smrc-profile-chip.warn { background: #d97706; }
body.smrc-app-page .smrc-profile-close {
	flex: none; width: 36px; height: 36px; border-radius: 10px; border: 0; cursor: pointer; font-size: 22px; line-height: 1;
	background: rgba(255, 255, 255, .95); color: #16265c; align-self: flex-start;
}
body.smrc-app-page .smrc-profile-close:hover { background: #ffffff; transform: none; box-shadow: none; }
body.smrc-app-page .smrc-profile-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 20px 22px; color: var(--pf-ink); }
body.smrc-app-page .smrc-profile-body .smrc-muted { color: var(--pf-muted); }
body.smrc-app-page .smrc-profile-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
body.smrc-app-page .smrc-profile-stat { background: var(--pf-soft); border: 1px solid var(--pf-line); border-radius: 12px; padding: 10px 12px; }
body.smrc-app-page .smrc-profile-stat span, body.smrc-app-page .smrc-profile-kv span { display: block; font-size: 12px; color: var(--pf-muted); font-weight: 600; margin-bottom: 2px; }
body.smrc-app-page .smrc-profile-stat strong { font-size: 17px; color: var(--pf-ink); overflow-wrap: anywhere; }
body.smrc-app-page .smrc-profile-sec { margin-top: 20px; }
body.smrc-app-page .smrc-profile-box .smrc-profile-sec h4 { margin: 0 0 10px; padding-bottom: 6px; font-size: 14px; font-weight: 800; color: var(--pf-ink); border-bottom: 2px solid #0d9488; display: inline-block; }
body.smrc-app-page .smrc-profile-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 18px; }
body.smrc-app-page .smrc-profile-kv strong { color: var(--pf-ink); font-weight: 650; overflow-wrap: anywhere; }
body.smrc-app-page .smrc-profile-term { border: 1px solid var(--pf-line); border-radius: 12px; margin-bottom: 10px; background: var(--pf-bg); overflow: hidden; }
body.smrc-app-page .smrc-profile-term summary { cursor: pointer; padding: 10px 14px; background: var(--pf-soft); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; list-style-position: inside; }
body.smrc-app-page .smrc-profile-term summary span { color: var(--pf-muted); font-size: 12px; }
body.smrc-app-page .smrc-profile-tablewrap { overflow-x: auto; }
body.smrc-app-page .smrc-profile-table { width: 100%; border-collapse: collapse; font-size: 13px; }
body.smrc-app-page .smrc-profile-table th { text-align: left; padding: 8px 12px; background: var(--pf-soft); color: var(--pf-muted); font-weight: 700; white-space: nowrap; }
body.smrc-app-page .smrc-profile-table td { padding: 8px 12px; border-top: 1px solid var(--pf-line); color: var(--pf-ink); }
body.smrc-app-page .smrc-profile-table small { color: var(--pf-muted); }
body.smrc-app-page .smrc-profile-remark { background: var(--pf-soft); border: 1px solid var(--pf-line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
body.smrc-app-page .smrc-profile-remark p { margin: 6px 0 0; font-size: 13px; }
@media (max-width: 600px) {
	body.smrc-app-page .smrc-profile-head { padding: 12px 14px; gap: 10px; }
	body.smrc-app-page .smrc-profile-avatar { width: 44px; height: 44px; font-size: 16px; }
	body.smrc-app-page .smrc-profile-box .smrc-profile-name { font-size: 17px; }
	body.smrc-app-page .smrc-profile-body { padding: 14px 14px 20px; }
}

/* Learner profile: Download Profile button row */
body.smrc-app-page .smrc-profile-actions { display: flex; justify-content: flex-end; margin: -4px 0 12px; }
body.smrc-app-page .smrc-profile-actions .smrc-btn { white-space: nowrap; }
@media print { body.smrc-app-page .smrc-profile-actions { display: none; } }