/* =============================================================================
   elimu-theme.css — Native Elimu Campus 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;
	--hero-width:    70%;
	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 var(--hero-width);
	max-width: var(--hero-width);
	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); }

/* Centre the footer text under the hero rather than under the whole viewport.
   loginstyle.css pins this bar full-width and flex-centred with !important at
   specificity (0,3,1), so this has to match that selector and outrank it.
   Reserving the login panel's share on the right shifts the flex centring onto
   the hero's midpoint, leaving the bar itself full-width (no seam).

   Only applied where the hero exists (it is display:none at <=992px). Scoping
   by min-width rather than undoing it in the <=992px block leaves loginstyle's
   own padding — including its <=480px phone rule — untouched below that.
   The 24px matches loginstyle's padding-left at these widths. */
@media (min-width: 993px) {
	body.qboat[frappe-session-status="logged-out"] .elimu-login .login-page-footer {
		padding-right: calc(100% - var(--hero-width) + 24px) !important;
	}
}

/* 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; }
