/* =============================================================================
   elimu-theme.css — Native Elimu Academy look for apjakaltheme
   FULLY SCOPED. Desk rules live under [data-qboat="theme-Elimu"]; login rules
   under .elimu-login. Inert on any other variant (e.g. KGK theme-Apjakal).
   Brand colours come from --brand-primary / --brand-accent (injected per-site
   from Apjakal Theme Settings; defaults below = NEC navy / Elimu orange).
   ============================================================================= */

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

/* ───────────────── DESK: tokens ───────────────── */
[data-qboat="theme-Elimu"] {
	--brand-primary:       #1B2A6B;
	--brand-primary-hover: #2E3B8C;
	--brand-accent:        #F5A623;
	--brand-accent-hover:  #E09500;
	--brand-navy:          #0D1B4A;
	--brand-gold:          #F7B731;

	/* Dynamic-palette fallbacks. The per-site <style> injected from Apjakal
	   Theme Settings (app.html / login.html) overrides these so hovers, tints
	   and readable text-on-brand colours all follow the chosen brand colour. */
	--primary-rgb: 27, 42, 107;
	--accent-rgb:  245, 166, 35;
	--on-primary:  #ffffff;
	--on-accent:   #151C27;

	/* remap apjakaltheme / frappe core tokens onto the Elimu brand */
	--color-primary:               var(--brand-primary);
	--color-primary-hover:         var(--brand-primary-hover);
	--color-primary-soft:          rgba(var(--primary-rgb), 0.08);
	--color-sidebar-active-border: var(--brand-accent);
	--primary:                     var(--brand-primary);
	--primary-color:               var(--brand-primary);
	--accent-color:                var(--brand-accent);

	/* ── Semantic surface tokens (LIGHT values). Dark mode overrides these under
	   html[data-theme-mode="dark"]; the rest of the theme references the tokens so
	   flipping mode re-skins everything without touching individual rules. ── */
	--surface:      #FFFFFF;   /* card / widget surface */
	--surface-alt:  #FAFBFD;   /* subtle card-header surface */
	--app-bg:       #F7F8FA;   /* page background plane */
	--bd:           #ECEEF1;   /* hairline border */
	--bd-strong:    #DDE1E6;   /* hover border */
	--bd-soft:      #F1F3F7;   /* very soft divider */
	--ink:          #374151;   /* body / link text */
	--ink-strong:   #1F2430;   /* headings */
	--ink-muted:    #6B7280;
	--ink-faint:    #9AA3B2;
	--hover-bg:     #F5F7FB;   /* row / link hover */
	/* navbar */
	--nav-bg:        #FFFFFF;
	--nav-bd:        #ECEEF1;
	--nav-ink:       #374151;
	--nav-ink-2:     #4B5563;
	--nav-search-bg: #F4F6F8;

	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── DARK MODE: override the semantic tokens under Frappe's native dark mode
   (mode lives on <html data-theme-mode="dark">, variant on <body>). The light
   path is byte-untouched; flipping mode re-skins every token-driven surface. ── */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] {
	--app-bg:        #0F1420;
	--surface:       #1A2032;
	--surface-alt:   #212A40;
	--bd:            rgba(255, 255, 255, 0.09);
	--bd-strong:     rgba(255, 255, 255, 0.18);
	--bd-soft:       rgba(255, 255, 255, 0.06);
	--ink:           #D5DAE3;
	--ink-strong:    #F1F3F8;
	--ink-muted:     #9AA3B2;
	--ink-faint:     #6B7686;
	--hover-bg:      rgba(255, 255, 255, 0.05);
	--nav-bg:        #141A28;
	--nav-bd:        rgba(255, 255, 255, 0.08);
	--nav-ink:       #D5DAE3;
	--nav-ink-2:     #AEB6C4;
	--nav-search-bg: rgba(255, 255, 255, 0.06);
	/* sidebar rail goes dark too (overrides the per-tenant light injection) */
	--sidebar-bg:     #141A28;
	--sidebar-bg-rgb: 20, 26, 40;
	--sidebar-on:     #D5DAE3;
	--sidebar-on-rgb: 213, 218, 227;
}

/* ───────────────── DESK: buttons / links ───────────────── */
[data-qboat="theme-Elimu"] .btn-primary,
[data-qboat="theme-Elimu"] .btn.btn-primary {
	background-color: var(--brand-primary) !important;
	border-color:     var(--brand-primary) !important;
	color:            var(--on-primary) !important;
	box-shadow:       0 1px 3px rgba(var(--primary-rgb), 0.20) !important;
}
[data-qboat="theme-Elimu"] .btn-primary:hover,
[data-qboat="theme-Elimu"] .btn.btn-primary:hover,
[data-qboat="theme-Elimu"] .btn-primary:active {
	background-color: var(--brand-primary-hover) !important;
	border-color:     var(--brand-primary-hover) !important;
	color:            var(--on-primary) !important;
}
[data-qboat="theme-Elimu"] .bg-primary { background-color: var(--brand-primary) !important; color: var(--on-primary) !important; }
[data-qboat="theme-Elimu"] .text-primary { color: var(--brand-primary) !important; }
[data-qboat="theme-Elimu"] a { color: var(--brand-primary); }
[data-qboat="theme-Elimu"] a:hover { color: var(--brand-primary-hover); }

/* ───────────────── DESK: sidebar — unified dynamic rail ─────────────────
   The WHOLE strip (logo cap + scrolling menu + pinned footer) shares ONE
   surface, --sidebar-bg, injected per-site from Apjakal Theme Settings
   (sidebar_bg_color; default light #FBFBFD). Every text/icon/hover/hairline
   tint is derived from --sidebar-on-rgb — the readable ink picked by the
   backend from the background's luminance — so the rail stays legible on a
   light OR dark colour with zero hardcoded values. These rules override the
   vendored dark `!important` sidebar rules (apjakaltheme.css) for Elimu only. */
[data-qboat="theme-Elimu"] {
	--sidebar-bg:        #FBFBFD;          /* fallbacks; per-site <style> overrides these */
	--sidebar-bg-rgb:    251, 251, 253;
	--sidebar-on:        #151C27;
	--sidebar-on-rgb:    21, 28, 39;
	--sidebar-muted:     rgba(var(--sidebar-on-rgb), 0.62);
	--sidebar-faint:     rgba(var(--sidebar-on-rgb), 0.45);
	--sidebar-icon:      rgba(var(--sidebar-on-rgb), 0.7);
	--sidebar-hover-bg:  rgba(var(--sidebar-on-rgb), 0.06);
	--sidebar-hairline:  rgba(var(--sidebar-on-rgb), 0.10);
	--sidebar-active-bg: rgba(var(--primary-rgb), 0.10);
}

/* one continuous surface across every sidebar layer (kills the white logo cap
   + dark menu + dark footer patchwork). Blur off — flat, quiet, premium. */
[data-qboat="theme-Elimu"] .left-sidebar,
[data-qboat="theme-Elimu"] .left-sidebar .brand-logo,
[data-qboat="theme-Elimu"] .scroll-sidebar,
[data-qboat="theme-Elimu"] .sidebar-nav,
[data-qboat="theme-Elimu"] .sidebar {
	background: var(--sidebar-bg) !important;
	background-color: var(--sidebar-bg) !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}
/* logo cap sits ON the rail with only a hairline divider — no white block */
[data-qboat="theme-Elimu"] .left-sidebar .brand-logo { border-bottom: 1px solid var(--sidebar-hairline); }
[data-qboat="theme-Elimu"] .left-sidebar #companynamebrand,
[data-qboat="theme-Elimu"] .left-sidebar .company-name a { color: var(--sidebar-on) !important; }
/* Elimu: logo-only brand — hide the company name and enlarge the logo. */
[data-qboat="theme-Elimu"] .left-sidebar #companynamebrand,
[data-qboat="theme-Elimu"] .left-sidebar .company-name { display: none !important; }
[data-qboat="theme-Elimu"] .left-sidebar .brand-logo { display: flex; align-items: center; justify-content: center; padding: 10px 8px !important; }
[data-qboat="theme-Elimu"] .left-sidebar .brand-logo img,
[data-qboat="theme-Elimu"] .left-sidebar .brand-logo .logo-img {
	width: auto !important; height: auto !important;
	max-width: 200px !important; max-height: 96px !important;
	object-fit: contain;
}
body[data-qboat="theme-Elimu"][data-sidebartype="mini-sidebar"] .left-sidebar .brand-logo img,
body[data-qboat="theme-Elimu"][data-sidebartype="mini-sidebar"] .left-sidebar .brand-logo .logo-img { max-width: 40px !important; max-height: 40px !important; }

/* menu + submenu link text */
[data-qboat="theme-Elimu"] .sidebar .menu-list a.m-link,
[data-qboat="theme-Elimu"] .sidebar .menu-list a.ms-link,
[data-qboat="theme-Elimu"] .sidebar .menu-list a.sidebar-link,
[data-qboat="theme-Elimu"] .sidebar .menu-list > li ul li a,
[data-qboat="theme-Elimu"] .sidebar .menu-list > li .sub-menu a {
	color: var(--sidebar-on) !important;
}
/* icons — muted ink */
[data-qboat="theme-Elimu"] .sidebar .icon-sm,
[data-qboat="theme-Elimu"] .sidebar .icon-xs,
[data-qboat="theme-Elimu"] .sidebar .menu-list a svg,
[data-qboat="theme-Elimu"] .sidebar .menu-list a .icon,
[data-qboat="theme-Elimu"] .sidebar .sidebar-item-icon svg {
	stroke: var(--sidebar-icon) !important;
	color:  var(--sidebar-icon) !important;
	fill:   transparent !important;
}

/* hover — subtle wash, ink text, brand-primary glyph (NOT the orange fill) */
[data-qboat="theme-Elimu"] .sidebar .menu-list a.m-link:hover,
[data-qboat="theme-Elimu"] .sidebar .menu-list a.ms-link:hover,
[data-qboat="theme-Elimu"] .sidebar .menu-list a.sidebar-link:hover,
[data-qboat="theme-Elimu"] .sidebar .menu-list > li ul li a:hover {
	background-color: var(--sidebar-hover-bg) !important;
	color: var(--sidebar-on) !important;
}
[data-qboat="theme-Elimu"] .sidebar .menu-list a.m-link:hover *,
[data-qboat="theme-Elimu"] .sidebar .menu-list a.ms-link:hover *,
[data-qboat="theme-Elimu"] .sidebar .menu-list a.sidebar-link:hover * {
	background: transparent !important;
	color: var(--sidebar-on) !important;
}
[data-qboat="theme-Elimu"] .sidebar .menu-list a:hover svg,
[data-qboat="theme-Elimu"] .sidebar .menu-list a:hover .icon {
	stroke: var(--brand-primary) !important;
	color:  var(--brand-primary) !important;
}

/* active + expanded — amber rule, accent wash, brand-primary text/glyph */
[data-qboat="theme-Elimu"] .sidebar .menu-list a.m-link.active,
[data-qboat="theme-Elimu"] .sidebar .menu-list a.ms-link.active,
[data-qboat="theme-Elimu"] .sidebar .menu-list a.sidebar-link.active,
[data-qboat="theme-Elimu"] .sidebar .menu-list a[aria-expanded="true"] {
	background-color: var(--sidebar-active-bg) !important;
	color: var(--brand-primary) !important;
	border-radius: 8px;
	font-weight: 600;
}
[data-qboat="theme-Elimu"] .sidebar .menu-list a.active svg,
[data-qboat="theme-Elimu"] .sidebar .menu-list a.active .icon,
[data-qboat="theme-Elimu"] .sidebar .menu-list a[aria-expanded="true"] svg {
	stroke: var(--brand-primary) !important;
	color:  var(--brand-primary) !important;
}
/* native desk sidebar (if present) */
[data-qboat="theme-Elimu"] .desk-sidebar .standard-sidebar-item.selected {
	color:            var(--brand-primary) !important;
	border-left:      3px solid var(--brand-accent) !important;
	background-color: var(--sidebar-active-bg) !important;
}

/* ───────────────── DESK: forms / inputs ───────────────── */
[data-qboat="theme-Elimu"] .form-control:focus,
[data-qboat="theme-Elimu"] .frappe-control input:focus,
[data-qboat="theme-Elimu"] input[type="text"]:focus,
[data-qboat="theme-Elimu"] input[type="email"]:focus,
[data-qboat="theme-Elimu"] input[type="password"]:focus,
[data-qboat="theme-Elimu"] select:focus,
[data-qboat="theme-Elimu"] textarea:focus {
	border-color: var(--brand-primary) !important;
	box-shadow:   0 0 0 0.2rem rgba(var(--primary-rgb), 0.12) !important;
}
[data-qboat="theme-Elimu"] input[type="checkbox"],
[data-qboat="theme-Elimu"] input[type="radio"] { accent-color: var(--brand-primary) !important; }

/* ───────────────── DESK: tabs / pills / badges / breadcrumb ───────────────── */
[data-qboat="theme-Elimu"] .nav-pills .nav-link.active,
[data-qboat="theme-Elimu"] .nav-tabs .nav-link.active {
	background-color: var(--brand-primary) !important;
	border-color:     var(--brand-primary) !important;
	color:            var(--on-primary) !important;
}
[data-qboat="theme-Elimu"] .indicator-pill.blue,
[data-qboat="theme-Elimu"] .badge-primary { background-color: var(--brand-primary) !important; color: var(--on-primary) !important; }
/* solid navy fill needs readable (on-primary) text — apjakaltheme.css sets the
   blue-pill span to --color-primary (navy), which is invisible on this fill. */
[data-qboat="theme-Elimu"] .indicator-pill.blue span,
[data-qboat="theme-Elimu"] .list-row .indicator-pill.blue span { color: var(--on-primary) !important; }
[data-qboat="theme-Elimu"] .progress-bar { background-color: var(--brand-primary) !important; }
[data-qboat="theme-Elimu"] .breadcrumb-item.active,
[data-qboat="theme-Elimu"] .breadcrumb-item a { color: var(--brand-primary) !important; }
[data-qboat="theme-Elimu"] .breadcrumb-item a:hover { color: var(--brand-primary-hover) !important; }

/* ───────────────── DESK: cards — soft Elimu surface ───────────────── */
[data-qboat="theme-Elimu"] .widget,
[data-qboat="theme-Elimu"] .form-section .section-body .frappe-card,
[data-qboat="theme-Elimu"] .layout-main-section .form-page {
	border-radius: 14px;
}
[data-qboat="theme-Elimu"] .widget.shortcut-widget-box:hover .widget-head .widget-title,
[data-qboat="theme-Elimu"] .widget.links-widget-box a:hover { color: var(--brand-primary) !important; }

/* ───────────────── DESK: splash ───────────────── */
[data-qboat="theme-Elimu"] .splash { background: var(--brand-navy) !important; }
[data-qboat="theme-Elimu"] .splash .splash-title { color: var(--brand-accent) !important; font-weight: 300 !important; }
[data-qboat="theme-Elimu"] .splash .spinner {
	border-color: rgba(var(--primary-rgb), 0.2) !important;
	border-top-color: var(--brand-accent) !important;
}

/* =============================================================================
   LOGIN: Elimu split-hero  (scoped under .elimu-login)
   ============================================================================= */
.elimu-login {
	--brand-primary: #1B2A6B;
	--brand-accent:  #F5A623;
	--brand-gold:    #F7B731;
	--brand-navy:    #0D1B4A;
	position: fixed;
	inset: 0;
	display: flex;
	background: #fff;
	z-index: 1000;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	overflow: hidden;
}

/* Hero (left) */
.elimu-login .elimu-hero {
	position: relative;
	flex: 0 0 70%;
	max-width: 70%;
	overflow: hidden;
	background:
		linear-gradient(135deg, rgba(var(--primary-rgb),0.96) 0%, rgba(var(--primary-rgb),0.86) 45%, rgba(var(--primary-rgb),0.72) 100%),
		var(--brand-primary);
	background-size: cover;
	background-position: center;
	color: var(--on-primary, #fff);
	display: flex;
	align-items: center;
	justify-content: center;
}
.elimu-login .elimu-hero.has-image { background-image: var(--hero-image); }
.elimu-login .elimu-hero.has-image::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(135deg, rgba(var(--primary-rgb),0.90), rgba(var(--primary-rgb),0.66));
}

/* grid overlay */
.elimu-login .elimu-hero-grid {
	position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
	background-image:
		linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
	background-size: 46px 46px;
}

/* floating orbs */
.elimu-login .orb { position: absolute; border-radius: 50%; filter: blur(6px); opacity: 0.55; pointer-events: none; }
.elimu-login .orb-1 { width: 320px; height: 320px; top: -60px; left: -60px;
	background: radial-gradient(circle, var(--brand-accent) 0%, transparent 70%);
	animation: elimuOrb1 14s ease-in-out infinite; }
.elimu-login .orb-2 { width: 260px; height: 260px; bottom: -40px; right: 10%;
	background: radial-gradient(circle, #5B6FCE 0%, transparent 70%);
	animation: elimuOrb2 18s ease-in-out infinite; }
.elimu-login .orb-3 { width: 180px; height: 180px; top: 40%; right: -40px;
	background: radial-gradient(circle, var(--brand-gold) 0%, transparent 70%);
	animation: elimuOrb3 12s ease-in-out infinite; }
.elimu-login .orb-4 { width: 140px; height: 140px; bottom: 25%; left: 12%;
	background: radial-gradient(circle, #7B8FE0 0%, transparent 70%);
	animation: elimuOrb1 16s ease-in-out infinite 2s; }
@keyframes elimuOrb1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(30px,40px)} }
@keyframes elimuOrb2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-40px,-30px)} }
@keyframes elimuOrb3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-20px,25px)} }

/* drifting particles */
.elimu-login .elimu-hero-particles { position: absolute; inset: 0; pointer-events: none; }
.elimu-login .particle { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.15); }
.elimu-login .particle:nth-child(1){width:6px;height:6px;top:15%;left:10%;animation:elimuDrift 12s linear infinite;}
.elimu-login .particle:nth-child(2){width:4px;height:4px;top:25%;left:75%;animation:elimuDrift 16s linear infinite 2s;}
.elimu-login .particle:nth-child(3){width:5px;height:5px;top:60%;left:20%;animation:elimuDrift 14s linear infinite 4s;}
.elimu-login .particle:nth-child(4){width:3px;height:3px;top:80%;left:55%;animation:elimuDrift 18s linear infinite 1s;}
.elimu-login .particle:nth-child(5){width:5px;height:5px;top:40%;left:85%;animation:elimuDrift 13s linear infinite 3s;}
.elimu-login .particle:nth-child(6){width:4px;height:4px;top:70%;left:40%;animation:elimuDrift 17s linear infinite 5s;}
@keyframes elimuDrift { 0%{transform:translateY(0);opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{transform:translateY(-120px);opacity:0} }

/* hero content */
.elimu-login .elimu-hero-content { position: relative; z-index: 2; padding: 3rem; max-width: 560px; }
.elimu-login .elimu-hero-logo img { max-height: 72px; width: auto; margin-bottom: 1.75rem; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3)); }
.elimu-login .elimu-hero-welcome { font-size: 1rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,0.75); margin: 0 0 .5rem; }
.elimu-login .elimu-hero-title {
	font-family: 'Josefin Sans', sans-serif; font-weight: 800; font-size: 2.9rem; line-height: 1.08; margin: 0 0 1.1rem;
	background: linear-gradient(135deg, var(--brand-accent), var(--brand-gold));
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.elimu-login .elimu-hero-tagline { font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,0.85); max-width: 460px; }

/* Login panel (right) */
.elimu-login .elimu-login-panel {
	flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: 2rem; overflow-y: auto; position: relative;
}
.elimu-login .elimu-login-panel > div { width: 100%; max-width: 420px; }
.elimu-login .elimu-login-panel .for-login,
.elimu-login .elimu-login-panel .for-forgot,
.elimu-login .elimu-login-panel .for-email-login,
.elimu-login .elimu-login-panel .for-signup,
.elimu-login .elimu-login-panel .for-login-with-email-link { width: 100%; max-width: 420px; margin: 0 auto; }
.elimu-login .login-welcome-sub { text-align: center; color: #6B7280; margin-bottom: 1rem; }
.elimu-login .page-card, .elimu-login .login-content { box-shadow: none !important; border: none !important; background: transparent !important; padding: 0 !important; }
.elimu-login .app-logo { max-height: 96px !important; height: auto !important; }
/* Beat loginstyle.css's body.qboat[frappe-session-status="logged-out"] .btn-login red (specificity 0,2,1) */
body .elimu-login .btn-dark,
body .elimu-login .btn-login,
body .elimu-login .btn-forgot,
body .elimu-login .btn-login-with-email-link,
body.qboat[frappe-session-status="logged-out"] .elimu-login .btn-login,
body.qboat[frappe-session-status="logged-out"] .elimu-login .btn-forgot,
body.qboat[frappe-session-status="logged-out"] .elimu-login .btn-login-with-email-link {
	background-color: var(--brand-primary) !important; background: var(--brand-primary) !important;
	border-color: var(--brand-primary) !important; color: #fff !important;
	border-radius: 8px;
}
body.qboat[frappe-session-status="logged-out"] .elimu-login .btn-login:hover,
body.qboat[frappe-session-status="logged-out"] .elimu-login .btn-forgot:hover,
body .elimu-login .btn-dark:hover {
	background-color: var(--brand-primary-hover, #2E3B8C) !important; background: var(--brand-primary-hover, #2E3B8C) !important;
	box-shadow: 0 4px 14px rgba(var(--primary-rgb), 0.30) !important;
}
.elimu-login a { color: var(--brand-primary); }
.elimu-login .input-group-text { background: #f6f7fb; }
.elimu-login .form-control:focus { border-color: var(--brand-primary) !important; box-shadow: 0 0 0 .2rem rgba(var(--primary-rgb),.12) !important; }
.elimu-login .login-page-footer { position: absolute; bottom: .75rem; left: 0; right: 0; text-align: center; color: #9AA3B2; font-size: .8rem; }
.elimu-login .login-page-footer .lpf-link { color: var(--brand-primary); }

/* two-row hero: top (welcome + brand title + logo) / bottom (product left, tiles card right) */
.elimu-login .elimu-hero-content {
	display: flex; flex-direction: column; justify-content: center; gap: 2.75rem;
	width: 100%; max-width: 1040px; padding: 3rem 3.5rem; text-align: left;
}
.elimu-login .elimu-hero-top { text-align: center; }
.elimu-login .elimu-hero-welcome { text-align: center; margin-bottom: .35rem; }
.elimu-login .elimu-hero-title { text-align: center; font-size: 3.1rem; margin-bottom: 1.5rem; }
.elimu-login .elimu-hero-logo { display: flex; justify-content: center; }
.elimu-login .elimu-hero-logo img {
	max-height: 128px; width: auto; background: transparent; box-shadow: none;
	filter: drop-shadow(0 6px 16px rgba(0,0,0,0.30));
}

/* bottom row */
.elimu-login .elimu-hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; flex-wrap: wrap; }
.elimu-login .elimu-hero-product { flex: 1 1 300px; max-width: 46%; text-align: center; }
.elimu-login .elimu-product-name {
	display: flex; align-items: center; justify-content: center; gap: 10px; font-family: 'Josefin Sans', sans-serif; font-weight: 700;
	font-size: 1.9rem; color: var(--brand-accent); margin-bottom: .9rem;
}
.elimu-login .elimu-product-logo { max-height: 34px; width: auto; }
.elimu-login .elimu-hero-pill {
	display: inline-block; margin: 0 auto 1rem; padding: 8px 18px; border-radius: 999px;
	background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.18);
	color: #fff; font-weight: 600; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; backdrop-filter: blur(6px);
}
.elimu-login .elimu-hero-pill strong, .elimu-login .elimu-hero-pill b { color: var(--brand-accent); }
.elimu-login .elimu-hero-tagline { text-align: center; margin: 0; font-style: italic; font-size: 1.05rem; color: rgba(255,255,255,0.85); max-width: none; }

/* tiles as a glassy vertical card */
.elimu-login .elimu-hero-tiles {
	flex: 1 1 340px; max-width: 500px; display: flex; flex-direction: column; gap: 2px;
	background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
	border-radius: 18px; padding: 10px 20px; backdrop-filter: blur(8px);
}
.elimu-login .elimu-tile {
	display: flex; align-items: center; gap: 14px; padding: 15px 4px; text-align: left;
	border-bottom: 1px solid rgba(255,255,255,0.07);
}
.elimu-login .elimu-tile:last-child { border-bottom: none; }
.elimu-login .elimu-tile-icon {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
	border-radius: 12px; background: rgba(255,255,255,0.10); font-size: 1.05rem; color: #fff;
}
.elimu-login .elimu-tile-title { font-weight: 700; font-size: 1rem; color: #fff; margin-bottom: 2px; }
.elimu-login .elimu-tile-sub { font-size: .82rem; line-height: 1.35; color: rgba(255,255,255,0.72); }

/* right panel header */
.elimu-login .elimu-panel-head { text-align: center; margin-bottom: 1.75rem; }
.elimu-login .elimu-panel-welcome { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: #9AA3B2; margin: 0 0 .35rem; }
.elimu-login .elimu-panel-heading { font-family: 'Josefin Sans', sans-serif; font-weight: 700; font-size: 2rem; color: #1f2430; margin: 0 0 .35rem; }
.elimu-login .elimu-panel-sub { color: #6B7280; font-size: .95rem; margin: 0; }

/* labelled, rounded fields */
.elimu-login .elimu-field-label { display: block; font-weight: 600; font-size: .85rem; color: #374151; margin-bottom: .4rem; }
.elimu-login .input-group { border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px #E5E7EB; }
.elimu-login .input-group .form-control, .elimu-login .input-group .input-group-text { border: none; background: #F7F8FB; }
.elimu-login .input-group .form-control { padding-top: .8rem; padding-bottom: .8rem; }

/* remember + forgot row */
.elimu-login .elimu-remember-row { display: flex; align-items: center; justify-content: space-between; }
.elimu-login .elimu-remember { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: #4B5563; margin: 0; cursor: pointer; }
.elimu-login .elimu-remember input { accent-color: var(--brand-primary); width: 15px; height: 15px; }
.elimu-login .elimu-remember-row .for_get { font-size: .88rem; color: var(--brand-primary); font-weight: 600; }

/* button: Sign In (not uppercase), full width, gradient */
.elimu-login .btn-login, .elimu-login .btn-forgot, .elimu-login .btn-login-with-email-link {
	text-transform: none !important; letter-spacing: .01em !important; font-weight: 600 !important;
	background-image: linear-gradient(135deg, var(--brand-primary), #2E3B8C) !important;
}
.elimu-login .login-divider { color: #9AA3B2; }

/* Neutralize loginstyle.css KGK-red (#F43024) accents inside the Elimu login */
body.qboat[frappe-session-status="logged-out"] .elimu-login .login-content,
body.qboat[frappe-session-status="logged-out"] .elimu-login section .page-card {
	border-top-color: var(--brand-primary) !important;
}
body.qboat[frappe-session-status="logged-out"] .elimu-login .input-group:focus-within,
body.qboat[frappe-session-status="logged-out"] .elimu-login .form-control:focus {
	border-color: var(--brand-primary) !important;
	box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.10) !important;
}
body.qboat[frappe-session-status="logged-out"] .elimu-login .field-icon { stroke: var(--brand-primary) !important; }
body.qboat[frappe-session-status="logged-out"] .elimu-login a,
body.qboat[frappe-session-status="logged-out"] .elimu-login .for_get,
body.qboat[frappe-session-status="logged-out"] .elimu-login .toggle-password { color: var(--brand-primary) !important; }
body.qboat[frappe-session-status="logged-out"] .elimu-login .btn-login,
body.qboat[frappe-session-status="logged-out"] .elimu-login .btn-forgot,
body.qboat[frappe-session-status="logged-out"] .elimu-login .btn-login-with-email-link { text-transform: none !important; }

/* responsive: hide hero on small screens */
@media (max-width: 992px) {
	.elimu-login .elimu-hero { display: none; }
	.elimu-login .elimu-login-panel { flex: 1 1 100%; }
}

/* =============================================================================
   Native Elimu dashboard (desk Page edu-dashboard) — scoped under .elimu-dash
   ============================================================================= */
.elimu-dash { --nav: #1B2A6B; --org: #F5A623; --grn: #3BB273; --prp: #7C3AED; padding: 4px 2px 40px; }
.elimu-dash-loading { padding: 40px; text-align: center; }
.elimu-dash .ed-banner {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	background: linear-gradient(135deg, #eef1f8, #f7f8fc); border: 1px solid #E5E7EB;
	border-radius: 16px; padding: 18px 22px; margin-bottom: 16px;
}
.elimu-dash .ed-banner h2 { margin: 0 0 3px; font-weight: 700; font-size: 1.45rem; color: #1f2430; }
.elimu-dash .ed-banner h2 { color: var(--nav); }
.elimu-dash .ed-banner p { margin: 0; color: #6B7280; font-size: .86rem; }
.elimu-dash .ed-banner-actions { display: flex; gap: 10px; }

/* Section band — a lighter divider for extra dashboard sections (e.g. HR → Staff Compliance) */
.elimu-dash .ed-section-band {
	display: flex; align-items: center; gap: 12px;
	margin: 26px 0 14px; padding: 12px 16px;
	background: linear-gradient(135deg, #eef1f8, #f7f8fc); border: 1px solid #E5E7EB; border-radius: 12px;
}
.elimu-dash .ed-section-band-icon { display: inline-flex; color: var(--nav); }
.elimu-dash .ed-section-band h3 { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--nav); }
.elimu-dash .ed-section-band p { margin: 2px 0 0; font-size: .8rem; color: #6B7280; }

/* Table cell badges — dates and days-to-expiry urgency */
.elimu-dash .ed-badge-date {
	display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: .78rem; font-weight: 600;
	background: #eef1f8; color: #4b5563;
}
.elimu-dash .ed-badge-days {
	display: inline-block; min-width: 30px; text-align: center; padding: 2px 8px; border-radius: 10px;
	font-size: .78rem; font-weight: 700; background: #eef1f8; color: #4b5563;
}
.elimu-dash .ed-badge-days.red { background: #fdecec; color: #C0392B; }
.elimu-dash .ed-badge-days.org { background: #fef3e2; color: #B9770E; }
.elimu-dash .ed-badge-days.grn { background: #e9f7ef; color: #1E8449; }

/* Modern table cards — title header + body, paired 2-up (matches live theme) */
.elimu-dash .ed-tgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 6px 0 16px; }
.elimu-dash .ed-tgrid.single { grid-template-columns: 1fr; }
@media (max-width: 1100px) { .elimu-dash .ed-tgrid { grid-template-columns: 1fr; } }
.elimu-dash .ed-tcard { background: #fff; border: 1px solid #E5E7EB; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.elimu-dash .ed-tcard-head { padding: 13px 18px; border-bottom: 1px solid #eef0f4; font-weight: 700; color: #1f2430; font-size: .9rem; }
.elimu-dash .ed-tcard-body { padding: 4px 6px; max-height: 440px; overflow: auto; }
.elimu-dash .ed-tcard .ed-table { font-size: .8rem; }
.elimu-dash .ed-tcard .ed-table td { vertical-align: top; }

/* Reason cell as a soft-red issue pill (multi-issue text wraps inside the pill) */
.elimu-dash .ed-issue-pill {
	display: inline-block; padding: 4px 10px; border-radius: 10px;
	font-size: .72rem; font-weight: 600; line-height: 1.45;
	background: rgba(232,72,85,.13); color: #C0392B;
}

/* Dark variants */
html[data-theme-mode="dark"] .elimu-dash .ed-tcard { background: var(--surface) !important; border-color: var(--bd) !important; }
html[data-theme-mode="dark"] .elimu-dash .ed-tcard-head { color: var(--ink-strong) !important; border-bottom-color: var(--bd) !important; }
html[data-theme-mode="dark"] .elimu-dash .ed-issue-pill { background: rgba(232,72,85,.20) !important; color: #f28b82 !important; }

.elimu-dash .ed-filterbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	background: #fff; border: 1px solid #E5E7EB; border-radius: 12px; padding: 10px 14px; margin-bottom: 18px; }
.elimu-dash .ed-filter-label { color: #6B7280; font-size: .85rem; font-weight: 600; }
.elimu-dash .ed-chip { background: #EEF1FA; color: var(--nav); border-radius: 999px; padding: 4px 12px; font-size: .8rem; font-weight: 600; }

.elimu-dash .ed-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.elimu-dash .ed-card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #E5E7EB;
	border-radius: 14px; padding: 14px 16px; transition: box-shadow .2s, transform .2s; }
.elimu-dash .ed-card:hover { box-shadow: 0 8px 22px rgba(var(--primary-rgb),.08); transform: translateY(-2px); }
.elimu-dash .ed-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
	border-radius: 11px; flex: 0 0 auto; }
.elimu-dash .ed-card-icon svg, .elimu-dash .ed-quick-icon svg { width: 20px; height: 20px; }
/* Solid colored chips + white glyph — distinct, high-contrast, matches Quick Access tiles & legacy. */
.elimu-dash .ed-card-icon { color: #fff; --icon-stroke: #fff; }
.elimu-dash .ed-card.nav .ed-card-icon { background: var(--nav); }
.elimu-dash .ed-card.org .ed-card-icon { background: var(--org); }
.elimu-dash .ed-card.grn .ed-card-icon { background: var(--grn); }
.elimu-dash .ed-card.prp .ed-card-icon { background: var(--prp); }
.elimu-dash .ed-card.red .ed-card-icon { background: #E24C4C; }
.elimu-dash .ed-card-label { font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: #6B7280; font-weight: 600; }
.elimu-dash .ed-card-value { font-size: 1.2rem; font-weight: 700; color: #1f2430; }
/* Value inherits its card accent — colored & neat, matching legacy. */
.elimu-dash .ed-card.nav .ed-card-value { color: var(--nav); }
.elimu-dash .ed-card.grn .ed-card-value { color: var(--grn); }
.elimu-dash .ed-card.org .ed-card-value { color: #D98400; }
.elimu-dash .ed-card.prp .ed-card-value { color: var(--prp); }
.elimu-dash .ed-card.red .ed-card-value { color: #E24C4C; }

.elimu-dash .ed-section-title { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: #6B7280;
	font-weight: 700; margin: 8px 2px 12px; }
.elimu-dash .ed-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.elimu-dash .ed-quick-tile { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid #E5E7EB;
	border-radius: 14px; padding: 13px 15px; cursor: pointer; transition: box-shadow .2s, transform .2s; }
.elimu-dash .ed-quick-tile:hover { box-shadow: 0 8px 22px rgba(var(--primary-rgb),.08); transform: translateY(-2px); }
.elimu-dash .ed-quick-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px; color: #fff; flex: 0 0 auto; }
.elimu-dash .ed-quick-icon.nav { background: var(--nav); } .elimu-dash .ed-quick-icon.org { background: var(--org); }
.elimu-dash .ed-quick-icon.grn { background: var(--grn); } .elimu-dash .ed-quick-icon.prp { background: var(--prp); }
.elimu-dash .ed-quick-t { font-weight: 700; color: #1f2430; }
.elimu-dash .ed-quick-s { font-size: .8rem; color: #6B7280; }

.elimu-dash .ed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.elimu-dash .ed-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.elimu-dash .ed-panel { background: #fff; border: 1px solid #E5E7EB; border-radius: 14px; padding: 16px 18px; }
.elimu-dash .ed-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.elimu-dash .ed-panel-title { font-weight: 700; color: #1f2430; }
.elimu-dash .ed-panel-meta { font-size: .78rem; color: #9AA3B2; }
.elimu-dash .ed-panel-body { position: relative; min-height: 90px; }
.elimu-dash .ed-grid .ed-panel-body { height: 240px; }
.elimu-dash .ed-grid-3 .ed-panel-body { height: auto; min-height: 150px; }
.elimu-dash .ed-panel-body canvas { max-height: 240px; }
/* Horizontal-bar panels: taller so 8-10 category rows stay legible */
.elimu-dash .ed-grid-tall .ed-panel-body { height: 360px; }
.elimu-dash .ed-grid-tall .ed-panel-body canvas { max-height: 360px; }

.elimu-dash .ed-empty-center { display: flex; flex-direction: column; align-items: center; justify-content: center;
	min-height: 130px; color: #9AA3B2; text-align: center; }
.elimu-dash .ed-empty-sub { font-size: .82rem; color: #6B7280; margin-top: 6px; }
.elimu-dash .ed-table { width: 100%; font-size: .86rem; border-collapse: collapse; }
.elimu-dash .ed-table th { text-align: left; color: #9AA3B2; font-weight: 600; font-size: .72rem; text-transform: uppercase; padding: 6px 4px; border-bottom: 1px solid #EEF1F5; }
.elimu-dash .ed-table td { padding: 9px 4px; border-bottom: 1px solid #F4F6F8; color: #374151; }
.elimu-dash .ed-list { list-style: none; margin: 0; padding: 0; }
.elimu-dash .ed-list li { display: flex; justify-content: space-between; padding: 8px 2px; border-bottom: 1px solid #F4F6F8; font-size: .86rem; }
.elimu-dash .ed-list-sub { color: #9AA3B2; }
.elimu-dash .ed-gbar { margin-bottom: 14px; }
.elimu-dash .ed-gbar-top { display: flex; justify-content: space-between; font-size: .84rem; color: #374151; margin-bottom: 5px; }
.elimu-dash .ed-gbar-track { height: 9px; background: #EEF1F5; border-radius: 6px; overflow: hidden; }
.elimu-dash .ed-gbar-fill { height: 100%; border-radius: 6px; }
.elimu-dash .ed-gbar-fill.nav { background: var(--nav); } .elimu-dash .ed-gbar-fill.org { background: var(--org); } .elimu-dash .ed-gbar-fill.grn { background: var(--grn); }
.elimu-dash .ed-att-today { display: flex; gap: 24px; justify-content: center; padding: 16px 0 6px; }
.elimu-dash .ed-att-today b { font-size: 1.6rem; color: var(--nav); display: block; text-align: center; }
.elimu-dash .ed-att-today span { color: #6B7280; font-size: .8rem; }

@media (max-width: 1100px) { .elimu-dash .ed-cards, .elimu-dash .ed-quick { grid-template-columns: repeat(2, 1fr); } .elimu-dash .ed-grid, .elimu-dash .ed-grid-3 { grid-template-columns: 1fr; } }

/* =============================================================================
   Elimu desk: overall font trim (base ~15px -> 12.5px). Scoped -> KGK unaffected.
   ============================================================================= */
[data-qboat="theme-Elimu"] { font-size: 12.5px; }
[data-qboat="theme-Elimu"] .sidebar .menu-list a.m-link,
[data-qboat="theme-Elimu"] .sidebar .menu-list a,
[data-qboat="theme-Elimu"] .company-name a,
[data-qboat="theme-Elimu"] #companynamebrand { font-size: 12.5px; }
[data-qboat="theme-Elimu"] .list-row,
[data-qboat="theme-Elimu"] .list-row-head,
[data-qboat="theme-Elimu"] .form-control,
[data-qboat="theme-Elimu"] .control-value,
[data-qboat="theme-Elimu"] .frappe-control { font-size: 12.5px; }
[data-qboat="theme-Elimu"] .page-title .title-text { font-size: 1.15rem; }

/* dashboard trim to match the tighter scale */
.elimu-dash .ed-banner h2 { font-size: 1.4rem; }
.elimu-dash .ed-banner p { font-size: .85rem; }
.elimu-dash .ed-card-value { font-size: 1.35rem; }
.elimu-dash .ed-card-label { font-size: .68rem; }
.elimu-dash .ed-quick-t, .elimu-dash .ed-panel-title { font-size: .9rem; }
.elimu-dash .ed-quick-s { font-size: .76rem; }
.elimu-dash .ed-chip { font-size: .76rem; }
.elimu-dash .ed-table, .elimu-dash .ed-list li { font-size: .82rem; }

/* Dashboard filter-bar dropdowns */
.elimu-dash .ed-filterbar select {
	border: 1px solid #E5E7EB; border-radius: 8px; padding: 5px 10px; font-size: .82rem;
	background: #fff; color: #374151; max-width: 280px; cursor: pointer;
}
.elimu-dash .ed-filterbar select:focus { border-color: var(--nav); outline: none; box-shadow: 0 0 0 2px rgba(var(--primary-rgb),.12); }
.elimu-dash .ed-filter-reset { font-size: .8rem; color: var(--nav); font-weight: 600; margin-left: 2px; white-space: nowrap; }

/* Elimu grouped sidebar — collapsible module section headers */
[data-qboat="theme-Elimu"] .elimu-side-group-wrap { list-style: none; }
[data-qboat="theme-Elimu"] .elimu-side-group {
	display: flex; align-items: center; justify-content: space-between;
	padding: 15px 20px 5px; margin: 2px 0 0; cursor: pointer; user-select: none;
}
[data-qboat="theme-Elimu"] .elimu-group-label {
	font-size: .66rem; letter-spacing: .11em; text-transform: uppercase;
	color: rgba(var(--sidebar-on-rgb), 0.9); font-weight: 700;
}
[data-qboat="theme-Elimu"] .elimu-side-group:hover .elimu-group-label { color: var(--sidebar-on); }
[data-qboat="theme-Elimu"] .elimu-group-arrow {
	display: inline-flex; align-items: center; color: rgba(var(--sidebar-on-rgb), 0.75); transition: transform .2s ease;
}
/* the chevron svg is an .icon-xs, painted by the base sidebar icon rule — must
   out-specify it so the arrow is clearly visible per group. */
[data-qboat="theme-Elimu"] .elimu-side-group .elimu-group-arrow svg {
	stroke: rgba(var(--sidebar-on-rgb), 0.75) !important;
	color: rgba(var(--sidebar-on-rgb), 0.75) !important;
}
[data-qboat="theme-Elimu"] .elimu-group-arrow svg { width: 12px; height: 12px; }
[data-qboat="theme-Elimu"] .elimu-side-group.collapsed .elimu-group-arrow { transform: rotate(-90deg); }
[data-qboat="theme-Elimu"] .elimu-group-items { list-style: none; padding: 0; margin: 0; }
[data-qboat="theme-Elimu"] .elimu-group-items.hidden { display: none; }

/* Module views (Students, etc.) */
.elimu-dash .ed-module-head { display: flex; align-items: center; gap: 16px; margin: 4px 2px 16px; }
.elimu-dash .ed-back { font-size: .82rem; color: var(--nav); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.elimu-dash .ed-back:hover { text-decoration: underline; }
.elimu-dash .ed-module-head h2 { margin: 0; font-weight: 700; color: #1f2430; font-size: 1.35rem; }
.elimu-dash .ed-module-sub { font-size: .8rem; color: #9AA3B2; font-weight: 500; margin-left: 6px; }
.elimu-dash .ed-card.ed-drill, .elimu-dash .ed-card[data-page] { cursor: pointer; }
.elimu-dash .ed-grid-1 { grid-template-columns: 1fr; }

/* =============================================================================
   ELIMU AI — native chat assistant (page edu-ai)
   ============================================================================= */
.elimu-ai { --nav: #1B2A6B; --org: #F5A623; display: flex; height: calc(100vh - 180px); min-height: 480px;
	border: 1px solid #E5E7EB; border-radius: 14px; overflow: hidden; background: #fff; }
.elimu-ai .eai-sidebar { width: 240px; border-right: 1px solid #EEF1F5; padding: 14px; display: flex; flex-direction: column; gap: 12px; background: #FAFBFC; }
.elimu-ai .eai-new { width: 100%; }
.elimu-ai .eai-convos { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.elimu-ai .eai-convo { padding: 8px 10px; border-radius: 8px; font-size: .82rem; color: #374151; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elimu-ai .eai-convo:hover, .elimu-ai .eai-convo.active { background: #EEF1FA; }
.elimu-ai .eai-convo.active { color: var(--nav); font-weight: 600; }
.elimu-ai .eai-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.elimu-ai .eai-messages { flex: 1; overflow-y: auto; padding: 20px 24px; }
.elimu-ai .eai-msg { display: flex; margin-bottom: 16px; }
.elimu-ai .eai-user { justify-content: flex-end; }
.elimu-ai .eai-bubble { max-width: 80%; padding: 12px 16px; border-radius: 14px; font-size: .88rem; line-height: 1.5; }
.elimu-ai .eai-user .eai-bubble { background: var(--nav); color: #fff; border-bottom-right-radius: 4px; }
.elimu-ai .eai-ai .eai-bubble { background: #F4F6F8; color: #1f2430; border-bottom-left-radius: 4px; max-width: 92%; }
.elimu-ai .eai-answer p { margin: 0 0 8px; }
.elimu-ai .eai-chart { height: 240px; margin: 10px 0; background: #fff; border-radius: 10px; padding: 8px; }
.elimu-ai .eai-chart canvas { max-height: 224px; }
.elimu-ai .eai-table-wrap { margin: 8px 0; overflow-x: auto; }
.elimu-ai .eai-table { background: #fff; border-radius: 8px; width: 100%; }
.elimu-ai .eai-more { font-size: .75rem; color: #9AA3B2; padding: 4px; }
.elimu-ai .eai-insight { font-size: .82rem; color: #4B5563; padding: 4px 0; }
.elimu-ai .eai-followups, .elimu-ai .eai-samples { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.elimu-ai .eai-sample { background: #fff; border: 1px solid #D9DEE6; border-radius: 999px; padding: 6px 14px; font-size: .8rem; color: var(--nav); cursor: pointer; }
.elimu-ai .eai-sample:hover { background: var(--nav); color: #fff; border-color: var(--nav); }
.elimu-ai .eai-error { color: #E84855; }
.elimu-ai .eai-inputbar { display: flex; gap: 8px; padding: 14px 18px; border-top: 1px solid #EEF1F5; align-items: flex-end; }
.elimu-ai .eai-input { resize: none; max-height: 120px; border-radius: 10px; }
.elimu-ai .eai-welcome { text-align: center; max-width: 520px; margin: 40px auto; color: #374151; }
.elimu-ai .eai-welcome-icon { color: var(--org); margin-bottom: 8px; }
.elimu-ai .eai-welcome h3 { font-weight: 700; }
.elimu-ai .eai-welcome p { color: #6B7280; font-size: .9rem; }
.elimu-ai .eai-dots span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #9AA3B2; margin: 0 2px; animation: eaiDot 1.2s infinite; }
.elimu-ai .eai-dots span:nth-child(2) { animation-delay: .2s; }
.elimu-ai .eai-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes eaiDot { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

/* ERP | ELIMU AI toggle at the top of the Elimu sidebar */
[data-qboat="theme-Elimu"] .elimu-mode-toggle-wrap { list-style: none; }
[data-qboat="theme-Elimu"] .elimu-mode-toggle { display: flex; gap: 0; margin: 4px 12px 8px; border-bottom: 2px solid var(--sidebar-hairline); }
[data-qboat="theme-Elimu"] .elimu-mode-toggle a { flex: 1; text-align: center; font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 9px 4px; margin-bottom: -2px; border-bottom: 2px solid transparent; color: var(--sidebar-muted); cursor: pointer; transition: color .18s ease, border-color .18s ease; }
[data-qboat="theme-Elimu"] .elimu-mode-toggle a.active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); background: none; }
[data-qboat="theme-Elimu"] .elimu-mode-toggle a:hover:not(.active) { color: var(--sidebar-on); }

/* Elimu AI — legacy-style shell (AI Insights header, search, circular send) */
.elimu-ai .eai-title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--nav); font-size: .95rem; padding: 4px 2px 2px; }
.elimu-ai .eai-title svg { width: 16px; height: 16px; }
.elimu-ai .eai-search { border: 1px solid #E5E7EB; border-radius: 9px; font-size: .82rem; padding: 7px 10px; background: #fff; }
.elimu-ai .eai-new { width: 100%; border: 1px dashed #C7CEDA; background: #fff; color: var(--nav); border-radius: 10px; padding: 9px; font-weight: 600; font-size: .85rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.elimu-ai .eai-new:hover { background: #EEF1FA; border-color: var(--nav); }
.elimu-ai .eai-send { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--nav); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.elimu-ai .eai-send:hover { background: #2E3B8C; }
.elimu-ai .eai-send svg { width: 18px; height: 18px; }
.elimu-ai .eai-welcome-icon { color: #C7CEDA; margin-bottom: 8px; display: flex; justify-content: center; }
.elimu-ai .eai-welcome h3 { color: #1f2430; font-weight: 700; }
.elimu-ai .eai-samples { justify-content: center; }

/* ── Elimu AI: conversation nav lives in the desk sidebar (AI mode) ── */
body.elimu-ai-mode .layout-side-section-menu > li.sidebar-item,
body.elimu-ai-mode .layout-side-section-menu > .elimu-side-group-wrap { display: none !important; }
body:not(.elimu-ai-mode) .eai-nav-li { display: none; }
.eai-nav-li { list-style: none; padding: 6px 14px 16px; }
.eai-nav .eai-title { display: flex; align-items: center; gap: 8px; color: rgba(var(--sidebar-on-rgb),.9); font-weight: 700; font-size: .9rem; margin-bottom: 10px; }
.eai-nav .eai-title svg { width: 15px; height: 15px; }
.eai-nav .eai-search { width: 100%; background: rgba(var(--sidebar-on-rgb),.06); border: 1px solid rgba(var(--sidebar-on-rgb),.14); color: var(--sidebar-on); border-radius: 9px; padding: 7px 10px; font-size: .82rem; margin-bottom: 10px; }
.eai-nav .eai-search::placeholder { color: rgba(var(--sidebar-on-rgb),.45); }
.eai-nav .eai-search:focus { outline: none; border-color: var(--brand-accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .35); background: rgba(var(--sidebar-on-rgb),.09); }
.eai-nav .eai-new { width: 100%; background: rgba(var(--sidebar-on-rgb),.05); border: 1px dashed rgba(var(--sidebar-on-rgb),.28); color: var(--sidebar-on); border-radius: 10px; padding: 9px; font-weight: 600; font-size: .82rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 12px; }
.eai-nav .eai-new:hover { background: rgba(var(--sidebar-on-rgb),.10); }
.eai-nav .eai-new svg { width: 13px; height: 13px; }
.eai-nav .eai-convos { display: flex; flex-direction: column; gap: 2px; }
.eai-nav .eai-convo { padding: 8px 10px; border-radius: 8px; font-size: .82rem; color: rgba(var(--sidebar-on-rgb),.72); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eai-nav .eai-convo:hover { background: rgba(var(--sidebar-on-rgb),.06); color: var(--sidebar-on); }
.eai-nav .eai-convo.active { background: rgba(var(--accent-rgb),.2); color: var(--sidebar-on); }

/* Chat fills the page now that the nav moved to the sidebar */
.elimu-ai.elimu-ai-chat { flex-direction: column; height: calc(100vh - 190px); min-height: 460px; border: 1px solid #E5E7EB; border-radius: 14px; overflow: hidden; background: #fff; }
.elimu-ai-chat .eai-messages { flex: 1; overflow-y: auto; padding: 22px 26px; }
.elimu-ai-chat .eai-inputbar { display: flex; gap: 8px; padding: 14px 18px; border-top: 1px solid #EEF1F5; align-items: flex-end; }
.elimu-ai-chat .eai-input { resize: none; max-height: 120px; }

/* Current-term chip on the dashboard filter bar (distinct from the neutral Prev chip) */
.elimu-dash .ed-chip.ed-chip-current { background: var(--nav, #1B2A6B); color: #fff; }

/* Left-align grouped sidebar items + tighter icon/text gap (match legacy Elimu rail) */
[data-qboat="theme-Elimu"] .layout-side-section-menu .elimu-group-items { padding-left: 0 !important; margin-left: 0 !important; }
[data-qboat="theme-Elimu"] .elimu-side-group { padding-left: 16px; padding-right: 14px; }
[data-qboat="theme-Elimu"] .layout-side-section-menu .sidebar-item a.m-link {
	padding-left: 14px !important; padding-right: 10px !important;
}
[data-qboat="theme-Elimu"] .layout-side-section-menu .sidebar-item a.m-link span.mx-3 {
	margin-left: 9px !important; margin-right: 0 !important; padding-left: 0 !important;
}

/* ── Per-workspace 3-view switcher (Dashboard / Workspace / Reports) ──
   Native desk + dynamic vars. The icons are INLINE at the row's right in a
   FIXED reserved slot (visibility toggled, not display) — so there's no layout
   shift and they can NEVER cover the name. Shown on the active row + on hover;
   the current view is highlighted in accent. Long names truncate to the left. */
[data-qboat="theme-Elimu"] li.sidebar-item.ws-has-views { display: flex !important; align-items: center; }
[data-qboat="theme-Elimu"] .ws-has-views > a.m-link { flex: 1 1 0% !important; min-width: 0; display: flex !important; align-items: center; }
[data-qboat="theme-Elimu"] .ws-has-views > a.m-link > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Single active-view indicator: shown on the ACTIVE row when not hovering. It's
   tiny (14px) so the workspace name is never squeezed. Hovering swaps it for the
   3-icon cluster. (production behaviour) */
[data-qboat="theme-Elimu"] .ws-active-tab-indicator {
	display: none; flex: 0 0 auto; align-items: center;
	margin-left: 6px; margin-right: 10px; color: var(--brand-primary);
}
[data-qboat="theme-Elimu"] .ws-active-tab-indicator svg { width: 14px; height: 14px; }
[data-qboat="theme-Elimu"] .ws-has-views:has(> a.m-link.active) .ws-active-tab-indicator { display: inline-flex; }
[data-qboat="theme-Elimu"] .ws-has-views:hover:has(> a.m-link.active) .ws-active-tab-indicator { display: none; }

/* 3-icon cluster: hover only, width-capped so the label always keeps room. */
[data-qboat="theme-Elimu"] .ws-view-icons {
	display: none; flex: 0 0 auto; align-items: center; gap: 2px;
	margin-left: 6px; margin-right: 8px;
}
[data-qboat="theme-Elimu"] .ws-has-views:hover .ws-view-icons { display: flex; }
/* NOTE: selector MUST out-specify the vendored `.sidebar .menu-list > li ul li a`
   (padding 5px 14px 5px 36px !important) — otherwise the view buttons inherit a
   36px left-pad, balloon to ~53px each, and crush the workspace label. */
[data-qboat="theme-Elimu"] .ws-view-icons a.ws-view-btn {
	flex: 0 0 21px !important;
	width: 21px !important; min-width: 21px !important; max-width: 21px !important; height: 21px !important;
	padding: 0 !important; margin: 0 !important; box-sizing: border-box !important;
	display: flex !important; align-items: center; justify-content: center;
	border: none !important; background: none; border-radius: 5px; cursor: pointer;
	color: var(--sidebar-on); transition: color .12s ease, background .12s ease;
}
[data-qboat="theme-Elimu"] .ws-view-icons a.ws-view-btn svg { width: 13px; height: 13px; }
[data-qboat="theme-Elimu"] .ws-view-icons a.ws-view-btn:hover { color: var(--brand-primary); background: var(--sidebar-hover-bg); }
[data-qboat="theme-Elimu"] .ws-view-icons a.ws-view-btn.vb-active { color: var(--brand-primary); background: rgba(var(--primary-rgb), 0.12); }

/* ── Dashboard-layout tab bar (injected on the native dashboard pages) ── */
.edu-dash-tabbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 4px 14px; margin-bottom: 6px; border-bottom: 1px solid #EDF0F5; }
.edu-dash-tabbar .edt-tab { font-size: .82rem; font-weight: 600; color: #4B5563; background: #fff; border: 1px solid #E5E7EB; border-radius: 999px; padding: 6px 14px; cursor: pointer; white-space: nowrap; }
.edu-dash-tabbar .edt-tab:hover { border-color: var(--nav, #1B2A6B); color: var(--nav, #1B2A6B); }
.edu-dash-tabbar .edt-tab.active { background: var(--nav, #1B2A6B); border-color: var(--nav, #1B2A6B); color: #fff; }

/* ── Reports layout (native card grid) ── */
.elimu-reports { padding: 4px 2px 24px; }
/* Masonry so short report cards pack up into the gaps instead of staggering.
   column-width keeps it responsive; break-inside keeps each card intact. */
/* Even-height rows via CSS grid (like the production workspace cards), not
   masonry — cards in a row stretch to the tallest, with a title icon. */
.elimu-reports .er-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; align-items: stretch; }
.elimu-reports .er-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--bd); border-radius: 10px; overflow: hidden; }
.elimu-reports .er-card-head { display: flex; align-items: center; justify-content: flex-start; text-align: left; gap: 9px; padding: 12px 15px; font-weight: 700; color: var(--nav, #1B2A6B); border-bottom: 1px solid var(--bd-soft); background: var(--surface-alt); font-size: 15.5px; letter-spacing: .1px; }
.elimu-reports .er-card-head .er-head-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--nav, #1B2A6B); }
.elimu-reports .er-card-body { display: flex; flex-direction: column; padding: 5px 0; }
.elimu-reports .er-link { padding: 8px 15px; font-size: .86rem; color: var(--ink); cursor: pointer; text-decoration: none; border-left: 2px solid transparent; }
.elimu-reports .er-link:hover { background: var(--hover-bg); color: var(--nav, #1B2A6B); border-left-color: var(--brand-accent, #F5A623); }
.elimu-reports .er-empty, .elimu-reports .er-loading { padding: 40px; text-align: center; }

/* =============================================================================
   A11Y: keyboard focus + reduced motion (scoped to the Elimu variant/login)
   ============================================================================= */
/* Visible keyboard focus for interactive elements — only for keyboard users
   (:focus-visible), so mouse clicks don't show a ring. Accent-coloured for
   contrast on both light surfaces and the dark rail/hero. */
[data-qboat="theme-Elimu"] .btn:focus-visible,
[data-qboat="theme-Elimu"] a:focus-visible,
[data-qboat="theme-Elimu"] .sidebar .menu-list a.m-link:focus-visible,
[data-qboat="theme-Elimu"] .nav-link:focus-visible,
[data-qboat="theme-Elimu"] .indicator-pill:focus-visible,
[data-qboat="theme-Elimu"] [tabindex]:focus-visible,
[data-qboat="theme-Elimu"] input:focus-visible,
[data-qboat="theme-Elimu"] select:focus-visible,
[data-qboat="theme-Elimu"] textarea:focus-visible,
.elimu-login a:focus-visible,
.elimu-login button:focus-visible,
.elimu-login input:focus-visible,
.elimu-login .elimu-tile:focus-visible {
	outline: 2px solid var(--brand-accent) !important;
	outline-offset: 2px !important;
}

/* Respect users who ask for less motion: freeze the ambient hero orbs,
   drifting particles, loading pulses and glass hover transitions. */
@media (prefers-reduced-motion: reduce) {
	[data-qboat="theme-Elimu"] *,
	[data-qboat="theme-Elimu"] *::before,
	[data-qboat="theme-Elimu"] *::after,
	.elimu-login *,
	.elimu-login *::before,
	.elimu-login *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* =============================================================================
   GLASS: elegant corporate glassmorphism + unified typography
   Restrained enterprise glass — high-opacity frosted cards (readable, not
   flashy) over a soft gradient plane so the blur actually refracts. Navy-tinted
   layered shadows for premium depth. Scoped to the Elimu variant.
   ============================================================================= */
[data-qboat="theme-Elimu"] {
	/* Unify the font: the vendored template drives the sidebar/body off Bootstrap's
	   --bs-font-sans-serif, while content already uses Inter — hence the mismatch.
	   Point that variable at Inter and the whole desk matches. Icon fonts
	   (tabler / FontAwesome / Line Awesome) are declared explicitly, so untouched. */
	--bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* glass tokens */
	--glass-fill:        rgba(255, 255, 255, 0.72);
	--glass-border:      rgba(255, 255, 255, 0.60);
	--glass-hairline:    rgba(var(--primary-rgb), 0.10);
	--glass-blur:        14px;
	--radius-lg:         16px;
	/* navy-tinted elevation (premium, soft) */
	--elev-rest:  0 8px 28px rgba(16, 20, 40, 0.08), 0 2px 6px rgba(16, 20, 40, 0.05);
	--elev-hover: 0 14px 40px rgba(16, 20, 40, 0.13), 0 3px 8px rgba(16, 20, 40, 0.06);
}

/* Flat, quiet background plane (no more radial-gradient glass plane). */
[data-qboat="theme-Elimu"] .body-wrapper,
[data-qboat="theme-Elimu"] .page-wrapper {
	background: var(--app-bg) !important;
	background-attachment: initial !important;
}

/* ── Workspace / form cards — flat "quiet premium" (Issue #2) ──
   Replaces the frosted-glass treatment: flat white surface, one hairline
   border, NO rest shadow and NO blur; a single soft shadow appears only on
   hover. Card GRID layout is left to Frappe (only the visual style changes). */
[data-qboat="theme-Elimu"] .widget,
[data-qboat="theme-Elimu"] .number-card,
[data-qboat="theme-Elimu"] .shortcut-widget-box,
[data-qboat="theme-Elimu"] .links-widget-box,
[data-qboat="theme-Elimu"] .onboarding-widget-box,
[data-qboat="theme-Elimu"] .layout-main-section .form-page .form-section {
	background: var(--surface) !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	border: 1px solid var(--bd) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	transition: box-shadow 0.15s ease, border-color 0.15s ease !important;
}
[data-qboat="theme-Elimu"] .widget:hover,
[data-qboat="theme-Elimu"] .shortcut-widget-box:hover,
[data-qboat="theme-Elimu"] .links-widget-box:hover,
[data-qboat="theme-Elimu"] .number-card:hover {
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10) !important;
	border-color: var(--bd-strong) !important;
	transform: none !important;
}
/* tidy shortcut / link cards: no underline on the titles/links */
[data-qboat="theme-Elimu"] .shortcut-widget-box a,
[data-qboat="theme-Elimu"] .shortcut-widget-box .widget-title,
[data-qboat="theme-Elimu"] .links-widget-box a,
[data-qboat="theme-Elimu"] .links-widget-box .link-item { text-decoration: none !important; }

/* Workspace "spacer" blocks are .widget too, so the flat-card rule above gave
   them a border + white fill + radius — rendering an empty bordered pill between
   sections. Spacers must stay invisible (just vertical space). */
[data-qboat="theme-Elimu"] .widget.spacer {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

/* Reduce workspace card fonts (tighter, production-like — titles were 15px).
   Must out-specify the vendored codex-editor rule
   (.codex-editor__redactor .ce-block .ce-block__content .shortcut-widget-box
   .widget-title = 0,5,0 !important), so mirror that chain. */
[data-qboat="theme-Elimu"] .codex-editor__redactor .ce-block .ce-block__content .widget .widget-head .widget-title,
[data-qboat="theme-Elimu"] .codex-editor__redactor .ce-block .ce-block__content .shortcut-widget-box .widget-title,
[data-qboat="theme-Elimu"] .codex-editor__redactor .ce-block .ce-block__content .links-widget-box .widget-title { font-size: 14px !important; }
[data-qboat="theme-Elimu"] .codex-editor__redactor .ce-block .ce-block__content .links-widget-box .link-item,
[data-qboat="theme-Elimu"] .codex-editor__redactor .ce-block .ce-block__content .links-widget-box .link-item a { font-size: 13.5px !important; }
/* Card SECTION title must read as a header, not another link — bigger + heavier
   than the 13.5px link items (client feedback 2026-07-16). Extra .widget-head in
   the chain out-specifies the 14px rule above; icon bumped to match (see ::before). */
[data-qboat="theme-Elimu"] .codex-editor__redactor .ce-block .ce-block__content .links-widget-box .widget-head .widget-title {
	font-size: 15.5px !important; font-weight: 700 !important; letter-spacing: .1px;
}

/* Workspace link-card title icons — a MEANINGFUL icon per card, mapped by a
   keyword in the card title (Tools->wrench, Student/Instructor->people, Fees->$,
   Schedule->calendar, Attendance->calendar-check, Assessment->clipboard,
   Reports->bar-chart, Settings->sliders, Admission->user-plus, Masters->layers,
   Content->book, Requests->inbox; default document). Icon is a CSS mask so its
   colour follows the dynamic --brand-primary. :has() keyword rules are ordered so
   the more specific one wins on overlap (Assessment Reports -> bar-chart). */
[data-qboat="theme-Elimu"] .links-widget-box .widget-head{display:flex;align-items:center;--cico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='16' y1='13' x2='8' y2='13'/><line x1='16' y1='17' x2='8' y2='17'/></svg>")}
[data-qboat="theme-Elimu"] .links-widget-box .widget-head .widget-control{margin-left:auto}
[data-qboat="theme-Elimu"] .links-widget-box .widget-head:has([title*="Master"]){--cico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 2 7 12 12 22 7 12 2'/><polyline points='2 17 12 22 22 17'/><polyline points='2 12 12 17 22 12'/></svg>")}
[data-qboat="theme-Elimu"] .links-widget-box .widget-head:has([title*="Content"]){--cico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/><path d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/></svg>")}
[data-qboat="theme-Elimu"] .links-widget-box .widget-head:has([title*="Setting"]){--cico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='21' x2='4' y2='14'/><line x1='4' y1='10' x2='4' y2='3'/><line x1='12' y1='21' x2='12' y2='12'/><line x1='12' y1='8' x2='12' y2='3'/><line x1='20' y1='21' x2='20' y2='16'/><line x1='20' y1='12' x2='20' y2='3'/><line x1='1' y1='14' x2='7' y2='14'/><line x1='9' y1='8' x2='15' y2='8'/><line x1='17' y1='16' x2='23' y2='16'/></svg>")}
[data-qboat="theme-Elimu"] .links-widget-box .widget-head:has([title*="Admission"]){--cico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='8.5' cy='7' r='4'/><line x1='20' y1='8' x2='20' y2='14'/><line x1='23' y1='11' x2='17' y2='11'/></svg>")}
[data-qboat="theme-Elimu"] .links-widget-box .widget-head:has([title*="Fee"]){--cico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='1' x2='12' y2='23'/><path d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/></svg>")}
[data-qboat="theme-Elimu"] .links-widget-box .widget-head:has([title*="Schedul"]){--cico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>")}
[data-qboat="theme-Elimu"] .links-widget-box .widget-head:has([title*="Attendance"]){--cico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h8'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/><path d='M16 20l2 2 4-4'/></svg>")}
[data-qboat="theme-Elimu"] .links-widget-box .widget-head:has([title*="Assessment"]){--cico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><rect x='8' y='2' width='8' height='4' rx='1'/><path d='m9 14 2 2 4-4'/></svg>")}
[data-qboat="theme-Elimu"] .links-widget-box .widget-head:has([title*="Report"]){--cico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='12' y1='20' x2='12' y2='10'/><line x1='18' y1='20' x2='18' y2='4'/><line x1='6' y1='20' x2='6' y2='16'/></svg>")}
[data-qboat="theme-Elimu"] .links-widget-box .widget-head:has([title*="Tool"]){--cico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/></svg>")}
[data-qboat="theme-Elimu"] .links-widget-box .widget-head:has([title*="Instructor"]){--cico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>")}
[data-qboat="theme-Elimu"] .links-widget-box .widget-head:has([title*="Request"]){--cico:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='22 12 16 12 14 15 10 15 8 12 2 12'/><path d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/></svg>")}
[data-qboat="theme-Elimu"] .links-widget-box .widget-head::before{content:"";flex:0 0 auto;width:18px;height:18px;margin-right:9px;background-color:var(--brand-primary);-webkit-mask:var(--cico) center/contain no-repeat;mask:var(--cico) center/contain no-repeat}

/* ── Workspace link cards adopt the Reports-layout look: shaded header BAND +
   divider, and NO native ↗ open-arrows — so the native /app/<ws> card grid and
   the custom Reports view (.elimu-reports .er-card) are visually identical.
   Global Elimu change (client feedback 2026-07-16). Card padding moves to the
   head + body so the band spans edge-to-edge. ── */
[data-qboat="theme-Elimu"] .links-widget-box { padding: 0 !important; }
[data-qboat="theme-Elimu"] .links-widget-box .widget-head {
	margin: 0 !important; padding: 12px 15px !important;
	background: var(--surface-alt) !important;
	border-bottom: 1px solid var(--bd-soft) !important;
	border-top-left-radius: 10px; border-top-right-radius: 10px;
}
[data-qboat="theme-Elimu"] .links-widget-box .widget-body { padding: 5px 0 !important; }
[data-qboat="theme-Elimu"] .links-widget-box .link-item {
	padding: 8px 15px !important; border-left: 2px solid transparent !important; border-radius: 0 !important;
}
[data-qboat="theme-Elimu"] .links-widget-box .link-item:hover {
	background: var(--hover-bg) !important; border-left-color: var(--brand-accent, #F5A623) !important;
}
/* hide the native ↗ open-arrow icon so links match the arrow-less Reports view */
[data-qboat="theme-Elimu"] .links-widget-box .link-item .link-content .icon { display: none !important; }

/* Sidebar as a flex column: logo (top), scrolling menu (middle), pinned footer
   (bottom). This keeps the brand footer visible at all times while the menu
   scrolls. Hairline right border ties it into the glass system. */
[data-qboat="theme-Elimu"] .left-sidebar {
	border-right: 1px solid var(--glass-hairline);
	display: flex;
	flex-direction: column;
	height: 100vh;
}
[data-qboat="theme-Elimu"] .left-sidebar .scroll-sidebar {
	flex: 1 1 auto;
	min-height: 0;   /* the flexbox trick: scroll here instead of pushing the footer off */
}

/* Brand footer — pinned at the bottom of the sidebar, always visible. Sits
   OUTSIDE the scrolling menu, so it needs its own surface: white for a light
   sidebar (dark text below), the dark rail colour for a dark sidebar. */
/* Footer shares the one rail surface (--sidebar-bg) with ink derived from
   --sidebar-on — so it reads as one continuous strip on a light OR dark rail,
   no per-mode special-casing. */
[data-qboat="theme-Elimu"] .apjakal-sidebar-footer {
	flex: 0 0 auto;
	list-style: none;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 14px 14px 16px;
	border-top: 1px solid var(--sidebar-hairline);
	font-size: 11px;
	line-height: 1.55;
	text-align: center;
	color: var(--sidebar-muted);
	background: var(--sidebar-bg);
	/* logo + text row, matching the production footprint */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
}
/* small product logo (dynamic: product_logo -> brand_logo) */
[data-qboat="theme-Elimu"] .apjakal-sidebar-footer .afs-logo { flex: 0 0 auto; width: 26px; height: 26px; object-fit: contain; }
[data-qboat="theme-Elimu"] .apjakal-sidebar-footer .afs-text { display: flex; flex-direction: column; min-width: 0; }
/* Elimu-reference layout: "Powered by <Product>", italic tagline, "Built by Apjakal". */
[data-qboat="theme-Elimu"] .apjakal-sidebar-footer .afs-powered { font-size: 12px; color: var(--sidebar-muted); }
[data-qboat="theme-Elimu"] .apjakal-sidebar-footer .afs-powered strong { font-weight: 700; color: var(--sidebar-on); }
[data-qboat="theme-Elimu"] .apjakal-sidebar-footer .afs-tagline {
	font-style: italic;
	color: var(--brand-accent);
	opacity: .95;
	margin: 1px 0 3px;
}
[data-qboat="theme-Elimu"] .apjakal-sidebar-footer .afs-by { color: var(--sidebar-faint); }
[data-qboat="theme-Elimu"] .apjakal-sidebar-footer a { color: var(--sidebar-on); font-weight: 600; text-decoration: none; }
[data-qboat="theme-Elimu"] .apjakal-sidebar-footer a:hover { color: var(--brand-accent); text-decoration: underline; }

/* hide the legacy bottom footer bar when the sidebar footer is present */
[data-qboat="theme-Elimu"] .apjakal-footer-bar { display: none !important; }

/* =============================================================================
   SIDEBAR POLISH — grouped section panels, greeting card, rounded nav items.
   Ported in spirit from the production Elimu rail (native, no iframe). Every
   colour is a dynamic sidebar var, so it adapts to any chosen rail colour.
   ============================================================================= */
/* Module groups: flat like production — no persistent panel, just a subtle
   hover tint on the whole group. */
[data-qboat="theme-Elimu"] .elimu-side-group-wrap {
	margin: 10px 6px 0;
	padding: 2px;
	border-radius: 8px;
	transition: background .15s ease;
}
[data-qboat="theme-Elimu"] .elimu-side-group-wrap:hover { background: rgba(var(--sidebar-on-rgb), 0.04); }
[data-qboat="theme-Elimu"] .elimu-side-group { padding: 6px 10px 4px; }

/* Rounded hover fill on nav items (active keeps its amber-rule pill shape). */
[data-qboat="theme-Elimu"] .sidebar .menu-list a.m-link { border-radius: 8px; }

/* Flush the rail — the vendored theme floats the sidebar as a rounded, shadowed
   card inset by #main-wrapper padding, leaving gaps on every side. Remove them
   so the rail sits edge-to-edge (full height, no rounding, no shadow). */
[data-qboat="theme-Elimu"] #main-wrapper { padding: 0 !important; }
[data-qboat="theme-Elimu"] .left-sidebar {
	left: 0 !important; top: 0 !important; margin: 0 !important;
	border-radius: 0 !important; box-shadow: none !important;
}

/* Nav icon colour consistency: Frappe sprite icons are painted via the
   --icon-stroke / --icon-fill custom properties, which DO inherit into the
   <use> shadow tree (outside CSS selectors cannot reach those shapes, but
   custom props cascade in). Some symbols hardcode a slate colour that reads as
   "light blue" while others are near-black — setting both vars unifies EVERY
   nav icon to one colour; the active row gets brand-primary for emphasis. */
[data-qboat="theme-Elimu"] .sidebar { --icon-stroke: rgba(var(--sidebar-on-rgb), 0.72); --icon-fill: rgba(var(--sidebar-on-rgb), 0.72); }
[data-qboat="theme-Elimu"] .sidebar .menu-list a.m-link.active { --icon-stroke: var(--brand-primary); --icon-fill: var(--brand-primary); }

/* =============================================================================
   TOP NAVBAR — quiet, light bar (production-style). The vendored theme paints
   .page-header with var(--dark), which buries the sidebar toggle, search and
   breadcrumb. Flip it to a light bar with dark ink so all of it is visible.
   Elimu-scoped; dynamic-friendly.
   ============================================================================= */
[data-qboat="theme-Elimu"] .page-header,
[data-qboat="theme-Elimu"] header.topbar.page-header,
[data-qboat="theme-Elimu"] .page-header.topbar {
	background-color: var(--nav-bg) !important;
	border-bottom: 1px solid var(--nav-bd) !important;
	box-shadow: none !important;
	/* The navbar is top chrome and MUST sit above the sticky .page-head strip
	   (raised to z-index 11 for the Actions-dropdown fix). The vendored theme's
	   `styles.css .topbar{z-index:9}` loads AFTER `new-style.css .page-header{z-index:1021}`
	   and wins by load order, so the navbar's whole stacking context collapsed to 9 —
	   BELOW page-head(11) — burying the awesomebar results dropdown under the page-head
	   strip. Force the navbar context back above page-head. */
	z-index: 1030 !important;
	/* the vendored dark navbar set --icon-stroke/-fill to near-white, so
	   sprite icons (notification bell, etc.) rendered white-on-white and vanished
	   — the bell showed only its hardcoded orange dot. Flip the icon vars to the
	   navbar ink so the outline shapes are visible (light OR dark bar). */
	--icon-stroke: var(--nav-ink-2);
	--icon-fill: var(--nav-ink-2);
}
/* navbar text + icons -> navbar ink */
[data-qboat="theme-Elimu"] .page-header,
[data-qboat="theme-Elimu"] .page-header a,
[data-qboat="theme-Elimu"] .page-header .nav-link,
[data-qboat="theme-Elimu"] .page-header .navbar-nav > li > a,
[data-qboat="theme-Elimu"] .page-header .sidebartoggler,
[data-qboat="theme-Elimu"] .page-header .menu-toggle {
	color: var(--nav-ink) !important;
}
[data-qboat="theme-Elimu"] .page-header .navbar-nav svg,
[data-qboat="theme-Elimu"] .page-header .nav-link svg,
[data-qboat="theme-Elimu"] .page-header .sidebartoggler svg,
[data-qboat="theme-Elimu"] .page-header .sidebartoggler i,
[data-qboat="theme-Elimu"] .page-header i {
	stroke: var(--nav-ink-2) !important; color: var(--nav-ink-2) !important;
}
/* global search field */
[data-qboat="theme-Elimu"] .page-header input,
[data-qboat="theme-Elimu"] .page-header .form-control,
[data-qboat="theme-Elimu"] .page-header .search-bar input,
[data-qboat="theme-Elimu"] .page-header .awesomplete input {
	background: var(--nav-search-bg) !important;
	color: var(--nav-ink) !important;
	border: 1px solid var(--nav-bd) !important;
}
[data-qboat="theme-Elimu"] .page-header input::placeholder { color: var(--ink-faint) !important; }
/* sidebar toggle: clearly visible on the light bar */
[data-qboat="theme-Elimu"] .page-header .sidebartoggler,
[data-qboat="theme-Elimu"] .page-header .navbar-toggler {
	color: var(--nav-ink) !important; opacity: 1 !important;
}

/* =============================================================================
   COLLAPSED RAIL (data-sidebartype="mini-sidebar") — Elimu tweaks.
   The vendored 65px mini rail is too tight for our grouped layout: group titles
   get cut ("ACAD"), and the brand footer stays full-size (~230px tall). Widen
   slightly, shrink the group titles so they fit left-aligned within the rail
   (simplebar keeps the inner content wide, so centering would push them
   off-screen — keep them at flex-start), and compact the footer badge.
   ============================================================================= */
body[data-qboat="theme-Elimu"][data-sidebartype="mini-sidebar"] .left-sidebar { width: 110px !important; min-width: 110px !important; }
body[data-qboat="theme-Elimu"][data-sidebartype="mini-sidebar"] .page-wrapper { margin-left: 110px !important; }
/* group titles: smaller font, drop the chevron; they sit left and fit the rail */
body[data-qboat="theme-Elimu"][data-sidebartype="mini-sidebar"] .elimu-side-group { padding: 7px 6px 3px !important; }
body[data-qboat="theme-Elimu"][data-sidebartype="mini-sidebar"] .elimu-group-label { font-size: .52rem !important; letter-spacing: .03em !important; }
body[data-qboat="theme-Elimu"][data-sidebartype="mini-sidebar"] .elimu-group-arrow { display: none !important; }
/* compact brand footer badge */
body[data-qboat="theme-Elimu"][data-sidebartype="mini-sidebar"] .apjakal-sidebar-footer { font-size: 7.5px !important; padding: 8px 4px 10px !important; line-height: 1.35 !important; flex-direction: column !important; gap: 4px !important; }
body[data-qboat="theme-Elimu"][data-sidebartype="mini-sidebar"] .apjakal-sidebar-footer .afs-logo { width: 20px !important; height: 20px !important; }
body[data-qboat="theme-Elimu"][data-sidebartype="mini-sidebar"] .apjakal-sidebar-footer .afs-powered { font-size: 8px !important; }
body[data-qboat="theme-Elimu"][data-sidebartype="mini-sidebar"] .apjakal-sidebar-footer .afs-tagline { display: none !important; }
/* ERP | ELIMU AI toggle doesn't fit the narrow rail -> hide (returns when expanded) */
body[data-qboat="theme-Elimu"][data-sidebartype="mini-sidebar"] .elimu-mode-toggle-wrap { display: none !important; }

/* Notification-dropdown "see all" button lives inside .page-header, so the navbar
   dark-ink rule (a{color:#374151}) overrode its .text-white -> invisible dark text
   on the primary-filled pill. Keep .text-white white inside the navbar. */
[data-qboat="theme-Elimu"] .page-header .text-white,
[data-qboat="theme-Elimu"] .page-header a.btn.bg-primary.text-white { color: #fff !important; }

/* Wider navbar global search bar. */
[data-qboat="theme-Elimu"] .page-header .search-bar,
[data-qboat="theme-Elimu"] .page-header .awesomplete { width: 400px !important; max-width: 42vw !important; }
[data-qboat="theme-Elimu"] .page-header .search-bar input,
[data-qboat="theme-Elimu"] .page-header .awesomplete input { width: 100% !important; }
/* Awesomebar results dropdown was going BEHIND the page-head (raised to z-index 11
   for the Actions dropdown fix); awesomplete's default ul z-index is 1. Lift it. */
[data-qboat="theme-Elimu"] .page-header .awesomplete > ul,
[data-qboat="theme-Elimu"] .page-header .search-bar .awesomplete > ul { z-index: 1001 !important; }
/* Seat the search bar on the RIGHT, immediately before the moon/bell/profile icon
   cluster. margin-left:auto absorbs the free space to its left so the search +
   the icon <ul> sit together at the right edge. */
[data-qboat="theme-Elimu"] .page-header .form-inline .search-bar,
[data-qboat="theme-Elimu"] .page-header .form-inline .input-group.search-bar {
	margin-left: auto !important; margin-right: 12px !important;
}
/* Search bar: a visible single border by default, a double-lined border while typing. */
[data-qboat="theme-Elimu"] .page-header .search-bar input,
[data-qboat="theme-Elimu"] .page-header .awesomplete input { border: 1px solid var(--bd-strong) !important; border-radius: 8px !important; }
[data-qboat="theme-Elimu"] .page-header .search-bar input:focus,
[data-qboat="theme-Elimu"] .page-header .awesomplete input:focus { border: 3px double #F5A623 !important; outline: none !important; box-shadow: none !important; }

/* Navbar: replace the toggle's list icon with a panel/sidebar icon (production
   style), and style the injected Home button. Icons are CSS masks in navbar ink. */
[data-qboat="theme-Elimu"] .page-header .sidebartoggler iconify-icon { display: none !important; }
[data-qboat="theme-Elimu"] .page-header .sidebartoggler .nav-icon-hover-bg,
[data-qboat="theme-Elimu"] .elimu-home-btn .nav-icon-hover-bg { display: inline-flex; align-items: center; justify-content: center; }
[data-qboat="theme-Elimu"] .page-header .sidebartoggler .nav-icon-hover-bg::before {
	content: ""; width: 20px; height: 20px; background-color: var(--nav-ink);
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><line x1='9' y1='3' x2='9' y2='21'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><line x1='9' y1='3' x2='9' y2='21'/></svg>") center / contain no-repeat;
}
[data-qboat="theme-Elimu"] .elimu-home-btn .ehb-ico {
	display: inline-block; width: 19px; height: 19px; background-color: var(--nav-ink);
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><polyline points='9 22 9 12 15 12 15 22'/></svg>") center / contain no-repeat;
}

/* ── DARK MODE: edu-dashboard (.elimu-dash) surfaces use literal light colours;
   remap the key ones onto the dark tokens. (.elimu-dash is desk-only + Elimu.) ── */
html[data-theme-mode="dark"] .elimu-dash .ed-banner,
html[data-theme-mode="dark"] .elimu-dash .ed-section-band { background: var(--surface-alt) !important; border-color: var(--bd) !important; }
html[data-theme-mode="dark"] .elimu-dash .ed-section-band h3 { color: var(--ink-strong) !important; }
html[data-theme-mode="dark"] .elimu-dash .ed-section-band p { color: var(--ink-muted) !important; }
html[data-theme-mode="dark"] .elimu-dash .ed-badge-date,
html[data-theme-mode="dark"] .elimu-dash .ed-badge-days { background: rgba(255,255,255,0.08) !important; color: var(--ink) !important; }
html[data-theme-mode="dark"] .elimu-dash .ed-badge-days.red { background: rgba(224,73,73,0.18) !important; color: #f28b82 !important; }
html[data-theme-mode="dark"] .elimu-dash .ed-badge-days.org { background: rgba(245,166,35,0.18) !important; color: #f5c060 !important; }
html[data-theme-mode="dark"] .elimu-dash .ed-badge-days.grn { background: rgba(46,158,91,0.18) !important; color: #6fce9a !important; }
html[data-theme-mode="dark"] .elimu-dash .ed-filterbar,
html[data-theme-mode="dark"] .elimu-dash .ed-card,
html[data-theme-mode="dark"] .elimu-dash .ed-quick-tile,
html[data-theme-mode="dark"] .elimu-dash .ed-panel { background: var(--surface) !important; border-color: var(--bd) !important; }
html[data-theme-mode="dark"] .elimu-dash .ed-banner h2,
html[data-theme-mode="dark"] .elimu-dash .ed-card-value,
html[data-theme-mode="dark"] .elimu-dash .ed-quick-t,
html[data-theme-mode="dark"] .elimu-dash .ed-panel-title,
html[data-theme-mode="dark"] .elimu-dash .ed-att-today b { color: var(--ink-strong) !important; }
html[data-theme-mode="dark"] .elimu-dash .ed-banner p,
html[data-theme-mode="dark"] .elimu-dash .ed-card-label,
html[data-theme-mode="dark"] .elimu-dash .ed-quick-s,
html[data-theme-mode="dark"] .elimu-dash .ed-section-title,
html[data-theme-mode="dark"] .elimu-dash .ed-filter-label,
html[data-theme-mode="dark"] .elimu-dash .ed-att-today span,
html[data-theme-mode="dark"] .elimu-dash .ed-table th { color: var(--ink-muted) !important; }
html[data-theme-mode="dark"] .elimu-dash .ed-table td,
html[data-theme-mode="dark"] .elimu-dash .ed-gbar-top,
html[data-theme-mode="dark"] .elimu-dash .ed-list li { color: var(--ink) !important; }
html[data-theme-mode="dark"] .elimu-dash .ed-panel-meta,
html[data-theme-mode="dark"] .elimu-dash .ed-empty-center,
html[data-theme-mode="dark"] .elimu-dash .ed-empty-sub,
html[data-theme-mode="dark"] .elimu-dash .ed-list-sub { color: var(--ink-faint) !important; }
html[data-theme-mode="dark"] .elimu-dash .ed-table th,
html[data-theme-mode="dark"] .elimu-dash .ed-table td,
html[data-theme-mode="dark"] .elimu-dash .ed-list li { border-color: var(--bd-soft) !important; }
html[data-theme-mode="dark"] .elimu-dash .ed-gbar-track { background: var(--hover-bg) !important; }
html[data-theme-mode="dark"] .elimu-dash .ed-chip { background: rgba(255,255,255,.08) !important; color: var(--ink) !important; }
html[data-theme-mode="dark"] .elimu-dash .ed-filterbar select { background: var(--surface) !important; color: var(--ink) !important; border-color: var(--bd) !important; }

/* ── Inline-light DASHBOARD desk pages (highered / neccustomisations / apjakaltheme)
   are built with hardcoded inline LIGHT styles (white cards, dark text) + frappe.Chart
   SVGs, so they render as light dashboards even under dark theme. Under dark theme the
   desk lightens inherited text + SVG, which then vanishes on the white cards:
   (1) plain inline <select> filters have no text colour -> selected value goes
       white-on-white ("values not appearing");
   (2) frappe.Chart axis/value/label TEXT is lightened -> fades on the white cards;
       gridlines darken;
   (3) HTML text that INHERITS the theme ink (legend labels, counts, table cells)
       fades on white.
   Keep them clean, readable LIGHT surfaces (a full dark-card restyle of all this
   inline markup would be a much bigger, separate task). Scoped to the dashboard-tab
   page ids via :is() so nothing else is touched. Elements with their own (dark
   enough) inline colour keep it — only inherited/theme-lightened text is forced. ── */
html[data-theme-mode="dark"] :is(#page-admissions-dashboard, #page-student-demographics, #page-results-analysis, #page-senate-performance, #page-exam-integrity, #page-instructor-dashboard, #page-student-enrollment-audit, #page-senate-results-analysis) { color: #1f2430; }
html[data-theme-mode="dark"] :is(#page-admissions-dashboard, #page-student-demographics, #page-results-analysis, #page-senate-performance, #page-exam-integrity, #page-instructor-dashboard, #page-student-enrollment-audit, #page-senate-results-analysis) :is(select, select option) { color: #111827 !important; background-color: #ffffff !important; }
html[data-theme-mode="dark"] :is(#page-admissions-dashboard, #page-student-demographics, #page-results-analysis, #page-senate-performance, #page-exam-integrity, #page-instructor-dashboard, #page-student-enrollment-audit, #page-senate-results-analysis) svg text { fill: #374151 !important; }
html[data-theme-mode="dark"] :is(#page-admissions-dashboard, #page-student-demographics, #page-results-analysis, #page-senate-performance, #page-exam-integrity, #page-instructor-dashboard, #page-student-enrollment-audit, #page-senate-results-analysis) :is(svg .line-horizontal, svg line) { stroke: #e5e7eb !important; }
html[data-theme-mode="dark"] :is(#page-admissions-dashboard, #page-student-demographics, #page-results-analysis, #page-senate-performance, #page-exam-integrity, #page-instructor-dashboard, #page-student-enrollment-audit, #page-senate-results-analysis) :is(table, th, td) { color: #1f2430 !important; }

/* Navbar theme-toggle button (light/dark). Moon icon, navbar ink via mask. */
/* Plain .nav-item gets margin:auto (both sides) from vendored CSS, which would
   center the toggle in the navbar gap. Force left-auto only so it snugs against
   the notification bell on the right. */
[data-qboat="theme-Elimu"] .page-header .header-menu > li:has(.elimu-theme-btn) { margin-left: auto !important; margin-right: 8px !important; }
[data-qboat="theme-Elimu"] .elimu-theme-btn .nav-icon-hover-bg { display: inline-flex; align-items: center; justify-content: center; }
[data-qboat="theme-Elimu"] .elimu-theme-btn .etb-ico {
	display: inline-block; width: 18px; height: 18px; background-color: var(--nav-ink);
	-webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/></svg>") center / contain no-repeat;
}

/* Dark mode: workspace section headings (codex .ce-header + inner .h4) are
   hardcoded dark navy -> invisible on the dark canvas. Lift to light ink. */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .ce-header,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .ce-header .h4,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .workspace-body .h4 { color: var(--ink-strong) !important; }

/* Dark mode: form & list inputs. The vendored qboat theme forces .form-control
   white with light borders, so form/list fields stayed light on the dark canvas.
   Remap onto dark tokens. The navbar search is re-asserted below so it keeps its
   own token (this rule would otherwise out-specify it). */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .form-control,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] textarea.form-control,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] select.form-control {
	background: var(--surface-alt) !important; color: var(--ink) !important; border-color: var(--bd-strong) !important;
}
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .form-control::placeholder { color: var(--ink-faint) !important; }
/* read-only display value */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .like-disabled-input,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .control-value { color: var(--ink) !important; }
/* Field & checkbox LABELS: the theme's dark mode (data-theme-mode) doesn't trigger
   Frappe's native dark vars (data-theme), so labels kept a near-background colour on
   the navy surface. Pin them to a legible muted ink (~5.8:1 on #1A2032), section/
   column headings a touch brighter, help text still muted but readable. */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .control-label,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .checkbox .label-area,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .form-column .column-label,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .grid-heading-row .col,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .list-row-head .list-subject { color: var(--ink-muted) !important; }
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .form-section .section-head,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .sidebar-label { color: var(--ink-strong) !important; }
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .help-box,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .control-help,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .field-description { color: var(--ink-muted) !important; }
/* keep the navbar search on its own token (out-specify the rule above) */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .page-header .form-control {
	background: var(--nav-search-bg) !important; color: var(--nav-ink) !important; border-color: var(--nav-bd) !important;
}
/* list header row is a hardcoded light slate -> dark */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .list-row-head {
	background: var(--surface-alt) !important; color: var(--ink-muted) !important; border-color: var(--bd) !important;
}

/* Dark mode: dialogs/modals (new-doc, quick entry, confirm, msgprint) stay white
   with light text -> invisible titles. Remap onto dark surface tokens. */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .modal-content { background: var(--surface) !important; color: var(--ink) !important; }
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .modal-header,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .modal-footer { background: var(--surface) !important; border-color: var(--bd) !important; }
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .modal-title { color: var(--ink-strong) !important; }
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .modal-body,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .modal-body .text-muted { color: var(--ink) !important; }
/* .form-page (form/modal field container) is a light-gray band -> transparent so
   the dark surface behind it shows through (fixes white stripes in dark dialogs).
   Its card frame also keeps Frappe's light #E5E7EB border -> soften to a hairline
   so the record page matches the workspace/list frame. */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .form-page { background: transparent !important; border-color: var(--bd) !important; }
/* Dark mode: list/report paging footer ("20 100 500 ... Load More") is white. */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .list-paging-area { background: var(--surface) !important; color: var(--ink-muted) !important; border-color: var(--bd) !important; }

/* Dark mode: the list RESULT area (rows, links, pills) + secondary toolbar
   buttons escaped the dark pass. Vendored qboat hard-codes .list-row and
   .btn-default white, so the list body stayed light under the dark header. */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .list-row,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .list-row-container,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .frappe-list .result { background: var(--surface) !important; }
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .list-row { border-bottom-color: var(--bd-soft) !important; }
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .list-row:hover { background: var(--hover-bg) !important; }
/* row text / links */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .list-row a,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .list-subject a,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .list-row .level-item { color: var(--ink) !important; }
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .list-count { color: var(--ink-muted) !important; }
/* status indicator pill -> subtle dark chip (semantic dot preserved) */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .indicator-pill { background: var(--hover-bg) !important; color: var(--ink) !important; }
/* secondary toolbar buttons (List View, refresh, menu, form actions) */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .btn-default,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .btn-secondary {
	background: var(--surface-alt) !important; color: var(--ink) !important; border-color: var(--bd-strong) !important;
}
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .btn-default:hover,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .btn-secondary:hover { background: var(--hover-bg) !important; }

/* Dark mode contrast polish — reported low-contrast spots:
   1) sidebar workspace links, 2) list header labels, 3) list row/sort icons,
   4) ERP|ELIMU AI active tab, 5) filter input borders. */
/* 1. sidebar workspace links -> near-white; active/current -> full white */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .sidebar .m-link,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .sidebar-link { color: #EAEEF5 !important; }
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .sidebar .selected .m-link,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .sidebar-item.selected .m-link,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .sidebar .m-link.active { color: #FFFFFF !important; }
/* 2. list header column labels (STUDENT NAME, STATUS, ...) were dark-on-dark */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .list-row-head,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .list-row-head .list-row-col,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .list-row-head .level-item,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .list-row-head span { color: var(--ink-strong) !important; }
/* 3. list row + toolbar icons (sort, comment, star) were near-black / faint */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .frappe-list { --icon-stroke: var(--ink-muted); }
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .sort-selector,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .sort-selector .sort-order,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .list-row .comment-count,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .list-row-activity,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .list-row .list-row-col .icon { color: var(--ink-muted) !important; }
/* 4. ERP | ELIMU AI mode toggle — the active tab was dark navy */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .elimu-mode-toggle a { color: var(--ink-muted) !important; }
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .elimu-mode-toggle a.active { color: var(--ink-strong) !important; }
/* 5. list filter input borders -> a touch more visible */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .standard-filter-section .form-control,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .filter-box .form-control { border-color: rgba(255,255,255,0.26) !important; }

/* Dark mode: workspace menu-card text kept light-mode inks (#374151 / #A8ACAF),
   so shortcut labels, card headers and link items were all dim/near-invisible on
   the dark cards. Remap onto dark tokens. */
/* shortcut cards (Student / Instructor / Program ...) */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .shortcut-widget-box .widget-label,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .shortcut-widget-box .widget-title { color: var(--ink-strong) !important; }
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .shortcut-widget-box .widget-subtitle { color: var(--ink-muted) !important; }
/* link cards: section header (the label sits on .widget-head) + doctype items */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .links-widget-box .widget-head,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .links-widget-box .widget-head .widget-title,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .links-widget-box .widget-head .widget-label,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .links-widget-box .widget-title { color: var(--ink-strong) !important; }
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .link-item { color: var(--ink) !important; }
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .link-item:hover { color: var(--ink-strong) !important; background: var(--hover-bg) !important; }
/* card arrows / icons */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .link-item,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .shortcut-widget-box { --icon-stroke: var(--ink-muted); }

/* Dark mode polish r2 — reported: black hover, black icons, invisible toolbar
   buttons, black ERP active-tab indicator. */
/* 1. card + link hover -> crisp neutral lift + Elimu gold accent border, text
   stays white. (A gold FILL went muddy-brown over the dark card and the
   vendored hover forced the label dark — both fixed here.) */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .shortcut-widget-box:hover,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .links-widget-box .link-item:hover {
	background: rgba(255,255,255,0.06) !important;
}
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .shortcut-widget-box:hover { border-color: #F5A623 !important; }
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .links-widget-box .link-item:hover { box-shadow: inset 2px 0 0 #F5A623 !important; }
/* keep ALL hovered card text bright (vendored hover pushes it dark) */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .shortcut-widget-box:hover .widget-label,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .shortcut-widget-box:hover .widget-title,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .shortcut-widget-box:hover .widget-subtitle,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .shortcut-widget-box:hover .widget-label *,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .links-widget-box .link-item:hover { color: #FFFFFF !important; }
/* 2. sprite icons across dark desk content (card headers, arrows, toolbar, rows,
   filter/sort) used the light-mode slate stroke. Frappe icon paths read
   var(--icon-stroke)/var(--icon-fill), so override those custom props (setting
   `stroke` directly does nothing — the path's var value wins). */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .widget,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .widget-head,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .link-item,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .page-head,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .page-actions,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .list-row,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .filter-selector,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .sort-selector { --icon-stroke: var(--ink-muted); --icon-fill: var(--ink-muted); }
/* 3. ERP | ELIMU AI active tab underline -> Elimu gold (was black) */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .elimu-mode-toggle a.active { border-bottom-color: #F5A623 !important; }
/* 4. list toolbar buttons -> clearer border so they read on the dark bar */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .page-head .btn-default,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .page-actions .btn-default { border-color: rgba(255,255,255,0.24) !important; }
/* the per-card header mask icon is filled with var(--brand-primary) (navy) ->
   invisible on dark. Light it up in dark mode. */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .links-widget-box .widget-head::before { background-color: var(--ink) !important; }

/* Reports layout (edu-reports page): the .er-card-head title + icon are hardcoded
   to var(--nav, #1B2A6B) navy — near-invisible on the dark card surface. Lift them. */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .elimu-reports .er-card-head { color: var(--ink-strong) !important; }
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .elimu-reports .er-card-head .er-head-icon { color: #F5A623 !important; }

/* Dark mode: form child tables (grid). Heading labels were dark navy / dim grey
   and some cell text (.static-area) rendered dark navy -> illegible on dark.
   Align the grid surfaces to the theme tokens and lift all grid text. */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .grid-heading-row { background: var(--surface-alt) !important; border-color: var(--bd) !important; }
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .grid-heading-row,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .grid-heading-row .col,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .grid-heading-row .field-area,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .grid-heading-row .static-area { color: var(--ink-strong) !important; }
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .grid-body .grid-row .static-area,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .grid-body .grid-row .field-area,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .grid-body .grid-row .col { color: var(--ink) !important; }
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .grid-body .grid-row,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .grid-body .grid-heading-row { border-color: var(--bd-soft) !important; }
/* grid Link-field cells render their value in an <a> with a near-black link
   colour -> illegible on dark. Lift cell anchors to match the other cells. */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .grid-body .grid-row a,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .grid-body .static-area a { color: var(--ink) !important; }

/* Freeze the record/page header (title + action buttons) and the form tabs on
   scroll — they stick below the sticky navbar (h 77px). Both light & dark; all
   scroll ancestors are overflow:visible so sticky is clean. */
/* z-index must beat the sticky .form-tabs-list (Frappe core sets it to 5). At an
   equal z-index the tab bar, being later in the DOM, painted over the page-head's
   Actions / ellipsis / Offer Letter dropdowns and clipped them. 11 sits above the
   tabs and well below the navbar. */
[data-qboat="theme-Elimu"] .page-head { position: sticky !important; top: 77px !important;
	background: var(--bg-color, #f4f5f6) !important; z-index: 11 !important;
	box-shadow: 0 6px 10px -8px rgba(15, 23, 42, .18); }
[data-qboat="theme-Elimu"] .form-tabs-list { top: 126px !important; }
/* dark: the page-head strip + tabs were white/neutral -> match the navbar;
   keep the record title and the active tab bright (active tab was dark navy). */
/* Header + tab strip: --nav-bg is near-black (#141A28) and clashed with the navy
   form surface, reading as a black band. Use --surface-alt (a subtle navy lift). */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .page-head,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .form-tabs-list { background: var(--surface-alt) !important; }
/* Titles (form + list). apjakaltheme.bundle.css gives the title a gradient-text
   effect via `-webkit-text-fill-color: var(--color-text-main) !important` at high
   specificity — dim in dark, and -webkit-text-fill-color beats plain `color`. Beat
   it by setting BOTH properties at matching specificity and unsetting the gradient. */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .page-head .title-text,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .title-area .title-text,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .page-title .title-area .title-text,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .content-page-container .page-head .page-head-content .page-title .title-area .title-text {
	color: var(--ink-strong) !important;
	-webkit-text-fill-color: var(--ink-strong) !important;
	background: none !important;
}
/* Each tab carried a --card-bg (near-black) box; flatten it onto the navy strip
   and brighten inactive labels (active stays brightest). */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .form-tabs .nav-item .nav-link { background-color: transparent !important; color: var(--ink-muted) !important; }
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .form-tabs .nav-item .nav-link.active { color: var(--ink-strong) !important; }

/* ---- Dark-mode desk contrast polish (reported low-visibility spots) ---- */
/* Selected workspace: its icon used brand navy (dim on the dark sidebar) while
   the name was bright — light it to match the label. */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .sidebar .menu-list a.m-link.active,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .sidebar .menu-list a.m-link.active .sidebar-item-icon {
	--icon-stroke: var(--ink-strong) !important; --icon-fill: var(--ink-strong) !important; color: var(--ink-strong) !important;
}
/* Page-head action buttons: the ellipsis "..." menu + prev/next/print icons were
   near-invisible (icon custom props unset for these buttons). */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .page-actions .btn-default,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .page-head .menu-btn-group .btn,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .page-head .standard-actions .btn-default,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .page-head .btn-default .icon {
	--icon-stroke: var(--ink) !important; --icon-fill: var(--ink) !important; color: var(--ink) !important;
}
/* List toolbar: filter + sort selector icons and labels were too dim (--ink-muted). */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .filter-selector,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .filter-selector .btn,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .sort-selector,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .sort-selector .btn {
	color: var(--ink) !important; --icon-stroke: var(--ink) !important; --icon-fill: var(--ink) !important;
}
/* File-attach fields: the file-path link was a dim colour on a dark box. */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .attached-file-link,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .control-value a,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .attach-input a { color: #8ab4f8 !important; }
/* List status pills were washed out on the dark rows — give them a legible chip.
   The label sits in a nested <span> with its own colour, so target it too. */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .list-row .indicator-pill,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .list-row .indicator-pill span {
	color: var(--ink-strong) !important;
}
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .list-row .indicator-pill {
	background: var(--surface-alt) !important; border: 1px solid var(--bd-strong) !important;
}
/* Toast / desk-alert (save + error + "Copied to clipboard") kept a light --toast-bg
   with light text -> invisible. Give it a dark card + legible text. */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .desk-alert {
	background-color: var(--surface-alt) !important; border: 1px solid var(--bd-strong) !important;
}
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .desk-alert .alert-message { color: var(--ink-strong) !important; }
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .desk-alert .alert-subtitle,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .desk-alert .close,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .desk-alert .next-action { color: var(--ink-muted) !important; }
/* comments / activity timeline in the form footer were dark navy on dark */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .form-footer h4,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .form-footer .h4,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .form-footer h5,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .form-footer h6 { color: var(--ink-strong) !important; }
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .comment-input-header,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .timeline-content,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .timeline-content a { color: var(--ink) !important; }
/* the main-section column keeps Frappe's light #F3F4F6 fill; form sections paint
   their own dark surface over it, but the Comments/Activity strip is transparent
   so the light wrapper bled through as a grey band -> let the dark page show. */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .layout-main-section-wrapper { background: transparent !important; }
/* footer polish: Frappe paints the comment input its raw #232323 with a light
   border, and the timeline rows a *different* near-black (#171717) with a stray
   1px+18px-radius bracket -> muddy stacked bands. Unify onto the theme tokens:
   comment input matches the form fields, timeline rows go transparent on the
   page bg (one tone), and real comment/email cards get the surface treatment. */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .comment-box .ql-editor {
	background-color: var(--surface-alt) !important; border-color: var(--bd-strong) !important; color: var(--ink) !important;
}
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .new-timeline .activity-title,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .new-timeline .timeline-actions,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .new-timeline .timeline-items,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .new-timeline .timeline-item { background-color: transparent !important; border: none !important; }
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .new-timeline .timeline-dot { background-color: var(--app-bg) !important; }
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .timeline-content.frappe-card {
	background-color: var(--surface) !important; border: 1px solid var(--bd) !important;
}
/* the page-content card frame keeps Frappe's light #E5E7EB border in dark mode,
   so it reads as a bright outline -> soften to a faint dark hairline. (Frappe
   toggles .frappe-card by view, so target the base class to catch every page.) */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .layout-main-section { border-color: var(--bd) !important; }
/* Connections tab: the link/report badges + "New" buttons kept Frappe's light
   defaults — near-black #0F0F0F link text on a dark #232323 pill (invisible),
   dim group titles, and loud near-white "+" circles. Re-skin onto theme tokens
   so the links & shortcuts read clearly. */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .document-link-badge,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .report-link-badge { background-color: var(--surface-alt) !important; border: 1px solid var(--bd) !important; }
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .document-link-badge .badge-link,
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .report-link-badge .report-link { color: var(--ink) !important; }
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .form-links .form-link-title { color: var(--ink-strong) !important; }
/* the "New" (+) button glyph: Frappe's `.btn-secondary .icon { --icon-stroke:#fff }`
   assumes a coloured button, but these connection buttons are light -> the + is
   white-on-light and vanishes (in BOTH themes). Drive --icon-stroke on the .icon
   itself (beats the .btn-secondary rule) with --ink-strong, which flips per mode:
   near-black on the light button, near-white on the dark navy button. NOT dark-
   scoped — this is the fix for the light theme too. */
[data-qboat="theme-Elimu"] .document-link .btn-new .icon { --icon-stroke: var(--ink-strong) !important; }
/* dark: also paint the button navy (Frappe pins it near-white via a 5-class
   selector, so match that specificity) so the light glyph has a dark ground. */
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .document-link .btn.btn-new.icon-btn { background-color: var(--surface-alt) !important; border: 1px solid var(--bd) !important; }
html[data-theme-mode="dark"] [data-qboat="theme-Elimu"] .document-link .open-notification { background-color: var(--surface-alt) !important; color: var(--ink) !important; }

/* Module-dashboard: empty-state row for "My Open ..." tables */
.elimu-dash .ed-table-empty { text-align: center; color: #94a3b8; padding: 22px; font-size: .85rem; }
