/* ================================================================
   TALMID 360 — Themes & Background Illustrations
   ================================================================ */

/* ── THEME PICKER UI ── */
.theme-option, .illus-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: inherit;
  transition: all 0.2s ease;
}
.theme-option:hover, .illus-option:hover {
  border-color: rgba(123,160,91,0.5);
  background: rgba(123,160,91,0.08);
  transform: translateY(-2px);
}
.theme-option.selected, .illus-option.selected {
  border-color: #7BA05B;
  background: rgba(123,160,91,0.18);
  box-shadow: 0 0 12px rgba(123,160,91,0.3);
}
.theme-icon { font-size: 1.3rem; }
.theme-label { font-size: 0.68rem; text-align: center; }

/* ── LIGHT THEME ── */
body.theme-light {
  background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%) !important;
}
body.theme-light .main-content { background: #f5f7fa !important; }
body.theme-light .app-header {
  background: rgba(255,255,255,0.95) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 12px rgba(27,58,107,0.08) !important;
  backdrop-filter: none !important;
}
body.theme-light #page-title { color: #1B3A6B !important; text-shadow: none !important; }
body.theme-light .header-date { color: #64748b !important; }
body.theme-light .icon-btn { color: #1B3A6B !important; }
body.theme-light .icon-btn:hover { background: #f1f5f9 !important; }
body.theme-light .app-sidebar {
  background: linear-gradient(180deg, #1B3A6B 0%, #102444 100%) !important;
}
body.theme-light .view-title, body.theme-light h1, body.theme-light h2 {
  color: #1B3A6B !important;
  text-shadow: none !important;
}
body.theme-light .view-subtitle { color: #64748b !important; }
body.theme-light .dash-card, body.theme-light .stat-card,
body.theme-light .kpi-card, body.theme-light .event-card,
body.theme-light .lib-doc-card, body.theme-light .student-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  backdrop-filter: none !important;
  color: #1B3A6B !important;
  box-shadow: 0 4px 16px rgba(27,58,107,0.08) !important;
}
body.theme-light input, body.theme-light textarea, body.theme-light select {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #1B3A6B !important;
}
body.theme-light body::before, body.theme-light body::after { opacity: 0.3; }

/* ── NAVY THEME ── */
body.theme-navy {
  background: radial-gradient(ellipse at center, #1B3A6B 0%, #0a1628 100%) !important;
}
body.theme-navy .app-header { background: rgba(10,22,46,0.92) !important; }
body.theme-navy .app-sidebar { background: rgba(10,22,46,0.98) !important; }

/* ── FOREST THEME ── */
body.theme-forest {
  background: radial-gradient(ellipse at center, #1a3620 0%, #0a1a0e 100%) !important;
}
body.theme-forest body::before {
  background: radial-gradient(circle, rgba(123,160,91,0.2) 0%, transparent 70%) !important;
}
body.theme-forest .nav-item.active {
  background: linear-gradient(90deg, rgba(123,160,91,0.35), rgba(26,54,32,0.3)) !important;
}

/* ── GOLD THEME ── */
body.theme-gold {
  background: radial-gradient(ellipse at center, #2a1f06 0%, #120c02 100%) !important;
}
body.theme-gold body::before {
  background: radial-gradient(circle, rgba(212,175,55,0.18) 0%, transparent 70%) !important;
}
body.theme-gold body::after {
  background: radial-gradient(circle, rgba(212,175,55,0.12) 0%, transparent 70%) !important;
}
body.theme-gold .nav-item.active {
  background: linear-gradient(90deg, rgba(212,175,55,0.25), rgba(42,31,6,0.3)) !important;
  border-right-color: #D4AF37 !important;
  box-shadow: 0 0 20px rgba(212,175,55,0.2) !important;
}

/* ── PURPLE THEME ── */
body.theme-purple {
  background: radial-gradient(ellipse at center, #1e1040 0%, #0d0818 100%) !important;
}
body.theme-purple body::before {
  background: radial-gradient(circle, rgba(111,66,193,0.2) 0%, transparent 70%) !important;
}
body.theme-purple .nav-item.active {
  background: linear-gradient(90deg, rgba(111,66,193,0.3), rgba(30,16,64,0.3)) !important;
  border-right-color: #9b59b6 !important;
}

/* ═══════════════════════════════════════════════════════════════
   BACKGROUND ILLUSTRATIONS
   Applied via data-illustrations on <body>
   SVG encoded as data URIs — no female figures
   ═══════════════════════════════════════════════════════════════ */

/* Base illustration layer */
.view.active::before, .view.active::after { pointer-events: none; z-index: 0; }
.view.active > * { position: relative; z-index: 1; }

/* ── GEOMETRIC ── */
body[data-illustrations="geometric"] .view.active::before {
  content: '';
  position: fixed;
  top: 0; right: 0;
  width: 320px; height: 100vh;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='800' viewBox='0 0 320 800'%3E%3Cg opacity='0.07' fill='none' stroke='%237BA05B' stroke-width='1'%3E%3Cpolygon points='260,60 310,140 210,140'/%3E%3Cpolygon points='280,200 320,260 240,260'/%3E%3Crect x='240' y='320' width='60' height='60' transform='rotate(20,270,350)'/%3E%3Ccircle cx='290' cy='460' r='40'/%3E%3Cpolygon points='250,540 310,600 190,600'/%3E%3Crect x='260' y='660' width='50' height='50' transform='rotate(45,285,685)'/%3E%3C/g%3E%3Cg opacity='0.05' fill='none' stroke='%23D4AF37' stroke-width='1'%3E%3Ccircle cx='300' cy='100' r='60'/%3E%3Ccircle cx='280' cy='380' r='45'/%3E%3Ccircle cx='310' cy='650' r='50'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  pointer-events: none;
}
body[data-illustrations="geometric"] .view.active::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 280px; height: 100vh;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='800' viewBox='0 0 280 800'%3E%3Cg opacity='0.06' fill='none' stroke='%237BA05B' stroke-width='1'%3E%3Cpolygon points='20,80 80,160 0,160'/%3E%3Crect x='10' y='250' width='70' height='70' transform='rotate(15,45,285)'/%3E%3Ccircle cx='50' cy='420' r='45'/%3E%3Cpolygon points='10,530 80,600 0,620'/%3E%3Crect x='20' y='680' width='55' height='55' transform='rotate(30,47,707)'/%3E%3C/g%3E%3Cg opacity='0.04' fill='none' stroke='%23D4AF37' stroke-width='1.5'%3E%3Ccircle cx='30' cy='150' r='50'/%3E%3Ccircle cx='60' cy='500' r='60'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
  pointer-events: none;
}

/* ── CIRCUIT ── */
body[data-illustrations="circuit"] .view.active::before {
  content: '';
  position: fixed;
  top: 0; right: 0;
  width: 300px; height: 100vh;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='800'%3E%3Cg opacity='0.08' stroke='%237BA05B' stroke-width='1' fill='none'%3E%3Cpath d='M280 50 L280 120 L240 120 L240 200 L280 200 L280 280'/%3E%3Ccircle cx='280' cy='50' r='4' fill='%237BA05B'/%3E%3Ccircle cx='240' cy='120' r='4' fill='%237BA05B'/%3E%3Ccircle cx='280' cy='280' r='4' fill='%237BA05B'/%3E%3Cpath d='M260 320 L260 380 L220 380 L220 460 L260 460'/%3E%3Ccircle cx='260' cy='320' r='4' fill='%237BA05B'/%3E%3Ccircle cx='220' cy='380' r='4' fill='%237BA05B'/%3E%3Crect x='252' y='454' width='16' height='16' fill='%237BA05B' opacity='0.5'/%3E%3Cpath d='M270 520 L270 600 L240 600 L240 680'/%3E%3Ccircle cx='270' cy='520' r='4' fill='%23D4AF37'/%3E%3Ccircle cx='240' cy='680' r='4' fill='%23D4AF37'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  pointer-events: none;
}
body[data-illustrations="circuit"] .view.active::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 280px; height: 100vh;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='800'%3E%3Cg opacity='0.07' stroke='%237BA05B' stroke-width='1' fill='none'%3E%3Cpath d='M20 80 L20 160 L60 160 L60 240 L20 240 L20 320'/%3E%3Ccircle cx='20' cy='80' r='4' fill='%237BA05B'/%3E%3Ccircle cx='60' cy='160' r='4' fill='%237BA05B'/%3E%3Ccircle cx='20' cy='320' r='4' fill='%237BA05B'/%3E%3Cpath d='M40 380 L40 460 L70 460 L70 540'/%3E%3Ccircle cx='40' cy='380' r='4' fill='%23D4AF37'/%3E%3Ccircle cx='70' cy='540' r='4' fill='%23D4AF37'/%3E%3Crect x='32' y='454' width='16' height='16' fill='%2342a5f5' opacity='0.4'/%3E%3Cpath d='M30 600 L30 680 L60 680'/%3E%3Ccircle cx='30' cy='600' r='4' fill='%237BA05B'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
  pointer-events: none;
}

/* ── SPACE ── */
body[data-illustrations="space"] .view.active::before {
  content: '';
  position: fixed;
  top: 0; right: 0;
  width: 300px; height: 100vh;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='800'%3E%3Cg opacity='0.08' fill='%23D4AF37'%3E%3Ccircle cx='280' cy='80' r='2'/%3E%3Ccircle cx='250' cy='140' r='1.5'/%3E%3Ccircle cx='290' cy='220' r='3'/%3E%3Ccircle cx='260' cy='310' r='1.5'/%3E%3Ccircle cx='285' cy='400' r='2.5'/%3E%3Ccircle cx='270' cy='480' r='1.5'/%3E%3Ccircle cx='295' cy='560' r='2'/%3E%3Ccircle cx='255' cy='640' r='3'/%3E%3Ccircle cx='280' cy='720' r='1.5'/%3E%3C/g%3E%3Cg opacity='0.06' fill='none' stroke='%237BA05B' stroke-width='0.8'%3E%3Cellipse cx='270' cy='200' rx='50' ry='20'/%3E%3Cellipse cx='270' cy='200' rx='70' ry='28' stroke-dasharray='4,4'/%3E%3Ccircle cx='270' cy='200' r='12' fill='%237BA05B' opacity='0.3'/%3E%3Cellipse cx='260' cy='550' rx='40' ry='15'/%3E%3Ccircle cx='260' cy='550' r='8' fill='%23D4AF37' opacity='0.3'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  pointer-events: none;
}
body[data-illustrations="space"] .view.active::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 280px; height: 100vh;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='800'%3E%3Cg opacity='0.07' fill='%23D4AF37'%3E%3Ccircle cx='20' cy='120' r='2'/%3E%3Ccircle cx='50' cy='200' r='1.5'/%3E%3Ccircle cx='15' cy='300' r='2.5'/%3E%3Ccircle cx='45' cy='420' r='1.5'/%3E%3Ccircle cx='25' cy='520' r='2'/%3E%3Ccircle cx='55' cy='640' r='1.5'/%3E%3Ccircle cx='30' cy='720' r='2'/%3E%3C/g%3E%3Cg opacity='0.05' fill='none' stroke='%23D4AF37' stroke-width='0.8'%3E%3Cellipse cx='40' cy='350' rx='35' ry='14'/%3E%3Ccircle cx='40' cy='350' r='10' fill='%23D4AF37' opacity='0.25'/%3E%3Cellipse cx='30' cy='620' rx='28' ry='10'/%3E%3Ccircle cx='30' cy='620' r='7' fill='%237BA05B' opacity='0.3'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
  pointer-events: none;
}

/* ── NATURE (botanical — no figures) ── */
body[data-illustrations="nature"] .view.active::before {
  content: '';
  position: fixed;
  top: 0; right: 0;
  width: 280px; height: 100vh;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='800'%3E%3Cg opacity='0.07' fill='none' stroke='%237BA05B' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M270 100 Q250 60 270 20'/%3E%3Cpath d='M270 100 Q240 90 220 70'/%3E%3Cpath d='M270 100 Q240 110 230 130'/%3E%3Cpath d='M260 260 Q240 220 260 180'/%3E%3Cpath d='M260 260 Q230 250 210 230'/%3E%3Cpath d='M260 260 Q230 270 220 290'/%3E%3Cpath d='M275 420 Q255 380 275 340'/%3E%3Cpath d='M275 420 Q245 410 225 390'/%3E%3Cpath d='M265 580 Q245 540 265 500'/%3E%3Cpath d='M265 580 Q235 570 215 550'/%3E%3Cpath d='M265 580 Q235 590 225 610'/%3E%3Cpath d='M270 730 Q250 690 270 650'/%3E%3Cpath d='M270 730 Q240 720 220 700'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right top;
  pointer-events: none;
}
body[data-illustrations="nature"] .view.active::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 260px; height: 100vh;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='800'%3E%3Cg opacity='0.06' fill='none' stroke='%237BA05B' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M10 120 Q30 80 10 40'/%3E%3Cpath d='M10 120 Q40 110 60 90'/%3E%3Cpath d='M10 120 Q40 130 50 150'/%3E%3Cpath d='M20 300 Q40 260 20 220'/%3E%3Cpath d='M20 300 Q50 290 70 270'/%3E%3Cpath d='M15 460 Q35 420 15 380'/%3E%3Cpath d='M15 460 Q45 450 65 430'/%3E%3Cpath d='M15 460 Q45 470 55 490'/%3E%3Cpath d='M10 640 Q30 600 10 560'/%3E%3Cpath d='M10 640 Q40 630 60 610'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left top;
  pointer-events: none;
}

/* ── MINIMAL ── */
body[data-illustrations="minimal"] .view.active::before {
  content: '';
  position: fixed;
  top: 0; right: 0;
  width: 200px; height: 100vh;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='800'%3E%3Cg opacity='0.06' stroke='%237BA05B' stroke-width='0.8' fill='none'%3E%3Cline x1='190' y1='0' x2='190' y2='800'/%3E%3Cline x1='180' y1='100' x2='200' y2='100'/%3E%3Cline x1='180' y1='250' x2='200' y2='250'/%3E%3Cline x1='180' y1='400' x2='200' y2='400'/%3E%3Cline x1='180' y1='550' x2='200' y2='550'/%3E%3Cline x1='180' y1='700' x2='200' y2='700'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  pointer-events: none;
}
body[data-illustrations="minimal"] .view.active::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 200px; height: 100vh;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='800'%3E%3Cg opacity='0.06' stroke='%237BA05B' stroke-width='0.8' fill='none'%3E%3Cline x1='10' y1='0' x2='10' y2='800'/%3E%3Cline x1='0' y1='100' x2='20' y2='100'/%3E%3Cline x1='0' y1='250' x2='20' y2='250'/%3E%3Cline x1='0' y1='400' x2='20' y2='400'/%3E%3Cline x1='0' y1='550' x2='20' y2='550'/%3E%3Cline x1='0' y1='700' x2='20' y2='700'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   BOYS INSTITUTION THEME (data-institution="boys")
   ═══════════════════════════════════════════════════ */
body[data-institution="boys"] {
  --inst-accent1: #1B3A6B;
  --inst-accent2: #2A5298;
  --inst-accent3: #4f8ef7;
}
body[data-institution="boys"].theme-dark {
  --theme-bg: #060c18 !important;
  --theme-bg2: #0d2040 !important;
}
body[data-institution="boys"].theme-light {
  background: linear-gradient(135deg, #eef3ff 0%, #dce8ff 100%) !important;
}
body[data-institution="boys"] .app-sidebar {
  background: linear-gradient(180deg, #0d2040 0%, #1B3A6B 100%) !important;
}

/* Boys geometric/circuit background tint */
body[data-institution="boys"][data-illustrations="geometric"] .view.active::before,
body[data-institution="boys"][data-illustrations="circuit"] .view.active::before {
  filter: hue-rotate(200deg) saturate(1.4);
}

/* ═══════════════════════════════════════════════════
   GIRLS INSTITUTION THEME (data-institution="girls")
   ═══════════════════════════════════════════════════ */
body[data-institution="girls"] {
  --inst-accent1: #7c3aed;
  --inst-accent2: #a855f7;
  --inst-accent3: #ec4899;
}
body[data-institution="girls"].theme-dark {
  --theme-bg: #0f0618 !important;
  --theme-bg2: #1e0a30 !important;
  --theme-sidebar-bg: rgba(20,5,40,0.98) !important;
  --theme-accent: #a855f7 !important;
  --theme-accent2: #ec4899 !important;
}
body[data-institution="girls"].theme-light {
  background: linear-gradient(135deg, #fdf4ff 0%, #fce7f3 100%) !important;
}
body[data-institution="girls"] .app-sidebar {
  background: linear-gradient(180deg, #2d0a4e 0%, #4c1d95 100%) !important;
}
body[data-institution="girls"] .nav-item.active {
  background: linear-gradient(90deg, rgba(168,85,247,0.3), rgba(45,10,78,0.3)) !important;
  border-right-color: #a855f7 !important;
}
body[data-institution="girls"] .nav-item:hover {
  background: rgba(168,85,247,0.15) !important;
}

/* Girls flower/botanical illustration override */
body[data-institution="girls"][data-illustrations="geometric"] .view.active::before,
body[data-institution="girls"][data-illustrations="nature"] .view.active::before {
  filter: hue-rotate(260deg) saturate(1.5);
}

/* Girls — special rose/purple tinted geometric */
body[data-institution="girls"] .view.active::before {
  opacity: 0.12 !important;
}
body[data-institution="girls"] .view.active::after {
  opacity: 0.1 !important;
}

/* ═══════════════════════════════════════════════════
   PER-PAGE ILLUSTRATIONS (layered on top of global style)
   Using :has() where supported, fallback via JS class
   ═══════════════════════════════════════════════════ */

/* Dashboard — pulsing radial glow bottom-right */
#view-dashboard.active {
  position: relative;
}
#view-dashboard.active::before {
  content: '';
  position: fixed;
  bottom: -60px; right: -60px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123,160,91,0.09) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: t360-pulse 6s ease-in-out infinite;
}
#view-dashboard.active::after {
  content: '';
  position: fixed;
  top: 80px; left: 80px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: t360-pulse 8s ease-in-out infinite reverse;
}
@keyframes t360-pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.7; }
}

/* Students — subtle grid dots */
#view-students.active {
  background-image: radial-gradient(rgba(123,160,91,0.07) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Attendance — horizontal rhythm lines */
#view-attendance.active {
  background-image: linear-gradient(rgba(123,160,91,0.04) 1px, transparent 1px);
  background-size: 100% 56px;
}

/* Assessments — diagonal stripe texture */
#view-assessments.active {
  background-image: repeating-linear-gradient(
    -55deg,
    transparent,
    transparent 60px,
    rgba(42,82,152,0.03) 60px,
    rgba(42,82,152,0.03) 61px
  );
}

/* AI Advisor — starfield dots */
#view-ai-advisor.active {
  background-image:
    radial-gradient(rgba(212,175,55,0.12) 1.5px, transparent 1.5px),
    radial-gradient(rgba(123,160,91,0.08) 1px, transparent 1px);
  background-size: 80px 80px, 40px 40px;
  background-position: 0 0, 20px 20px;
}

/* Calendar — subtle grid */
#view-calendar.active {
  background-image:
    linear-gradient(rgba(27,58,107,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,58,107,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Reports — diagonal ruled */
#view-reports.active {
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 100px,
    rgba(212,175,55,0.03) 100px,
    rgba(212,175,55,0.03) 101px
  );
}

/* Library — page/book lines texture */
#view-library.active {
  background-image:
    linear-gradient(rgba(123,160,91,0.05) 1px, transparent 1px),
    radial-gradient(rgba(212,175,55,0.06) 1.5px, transparent 1.5px);
  background-size: 100% 40px, 60px 60px;
}

/* Classroom — grid blueprint */
#view-classroom.active {
  background-image:
    linear-gradient(rgba(42,82,152,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,82,152,0.05) 1px, transparent 1px),
    linear-gradient(rgba(42,82,152,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42,82,152,0.02) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}

/* Simulation — circuit grid */
#view-simulation.active {
  background-image:
    linear-gradient(rgba(123,160,91,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123,160,91,0.04) 1px, transparent 1px),
    radial-gradient(rgba(123,160,91,0.08) 2px, transparent 2px);
  background-size: 40px 40px, 40px 40px, 80px 80px;
  background-position: 0 0, 0 0, 20px 20px;
}

/* Digital Twin — DNA helix feel (diagonal diamonds) */
#view-digital-twin.active {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 40px,
    rgba(111,66,193,0.03) 40px,
    rgba(111,66,193,0.03) 41px
  ),
  repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 40px,
    rgba(111,66,193,0.03) 40px,
    rgba(111,66,193,0.03) 41px
  );
}

/* Radar — concentric circles feel */
#view-radar.active {
  background-image:
    radial-gradient(circle at 50% 50%, transparent 120px, rgba(42,82,152,0.04) 121px, rgba(42,82,152,0.04) 122px, transparent 123px),
    radial-gradient(circle at 50% 50%, transparent 200px, rgba(42,82,152,0.03) 201px, rgba(42,82,152,0.03) 202px, transparent 203px),
    radial-gradient(circle at 50% 50%, transparent 300px, rgba(42,82,152,0.025) 301px, rgba(42,82,152,0.025) 302px, transparent 303px);
}

/* Principal — leadership sunburst */
#view-principal.active {
  background-image:
    conic-gradient(from 0deg at 50% -20%, transparent 0deg, rgba(212,175,55,0.025) 30deg, transparent 60deg, rgba(212,175,55,0.02) 90deg, transparent 120deg, rgba(212,175,55,0.025) 150deg, transparent 180deg, rgba(212,175,55,0.02) 210deg, transparent 240deg, rgba(212,175,55,0.025) 270deg, transparent 300deg, rgba(212,175,55,0.02) 330deg, transparent 360deg);
}

/* Settings — clean wave pattern */
#view-settings.active {
  background-image:
    radial-gradient(rgba(27,58,107,0.06) 2px, transparent 2px);
  background-size: 36px 36px;
}

/* Boys institution — override dashboard glow to blue */
body[data-institution="boys"] #view-dashboard.active::before {
  background: radial-gradient(circle, rgba(79,142,247,0.1) 0%, transparent 70%);
}
body[data-institution="boys"] #view-dashboard.active::after {
  background: radial-gradient(circle, rgba(42,82,152,0.08) 0%, transparent 70%);
}

/* Girls institution — override dashboard glow to purple/pink */
body[data-institution="girls"] #view-dashboard.active::before {
  background: radial-gradient(circle, rgba(168,85,247,0.1) 0%, transparent 70%);
}
body[data-institution="girls"] #view-dashboard.active::after {
  background: radial-gradient(circle, rgba(236,72,153,0.08) 0%, transparent 70%);
}
body[data-institution="girls"] #view-ai-advisor.active {
  background-image:
    radial-gradient(rgba(236,72,153,0.1) 1.5px, transparent 1.5px),
    radial-gradient(rgba(168,85,247,0.07) 1px, transparent 1px);
  background-size: 80px 80px, 40px 40px;
  background-position: 0 0, 20px 20px;
}

/* ── SETTINGS PAGE LAYOUT ── */
#view-settings .settings-page-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}
#view-settings .settings-page-title {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--theme-text, #1B3A6B);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
}
#view-settings .settings-page-subtitle {
  color: var(--theme-text-muted, #64748b);
  font-size: 0.9rem;
  margin-bottom: 32px;
}
#view-settings .settings-section {
  background: var(--theme-card-bg, #fff);
  border: 1.5px solid var(--theme-border, #e2e8f0);
  border-radius: 18px;
  padding: 24px 28px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px rgba(27,58,107,0.07);
  transition: box-shadow 0.2s;
}
#view-settings .settings-section:hover {
  box-shadow: 0 8px 32px rgba(27,58,107,0.12);
}
#view-settings .settings-section-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--theme-text, #1B3A6B);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1.5px dashed var(--theme-border, #e2e8f0);
}
#view-settings .settings-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 600px) {
  #view-settings .settings-2col { grid-template-columns: 1fr; }
}
#view-settings label.s-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--theme-text, #1B3A6B);
  display: block;
  margin-bottom: 5px;
}
#view-settings input[type=text],
#view-settings input[type=email],
#view-settings select {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid var(--theme-border, #c7d7f5);
  border-radius: 10px;
  font-size: 0.88rem;
  font-family: inherit;
  background: var(--theme-input-bg, #fff);
  color: var(--theme-text, #1B3A6B);
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#view-settings input:focus,
#view-settings select:focus {
  outline: none;
  border-color: #7BA05B;
  box-shadow: 0 0 0 3px rgba(123,160,91,0.15);
}
#view-settings .settings-save-btn {
  background: linear-gradient(135deg, #1B3A6B, #2A5298);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 13px 32px;
  font-size: 0.95rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 16px rgba(27,58,107,0.25);
}
#view-settings .settings-save-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(27,58,107,0.35);
}
#view-settings .theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
#view-settings .illus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.settings-theme-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: 14px;
  border: 2px solid var(--theme-border, #e2e8f0);
  background: var(--theme-card-bg, #fff);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--theme-text, #1B3A6B);
  transition: all 0.2s ease;
}
.settings-theme-card:hover {
  border-color: #7BA05B;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(123,160,91,0.2);
}
.settings-theme-card.selected {
  border-color: #7BA05B;
  background: rgba(123,160,91,0.12);
  box-shadow: 0 0 0 3px rgba(123,160,91,0.25);
}
.settings-theme-card .tc-icon { font-size: 1.6rem; }
.settings-theme-swatch {
  width: 100%;
  height: 28px;
  border-radius: 7px;
  margin-bottom: 4px;
}
.settings-parent-rows {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}
.settings-parent-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.settings-parent-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--theme-text, #1B3A6B);
  min-width: 90px;
}
.settings-parent-row input[type=email] {
  flex: 1;
  padding: 7px 10px;
  font-size: 0.8rem;
  direction: ltr;
}
/* Light/Dark quick toggle buttons */
.light-dark-row {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}
.ld-btn {
  flex: 1;
  padding: 18px 12px;
  border-radius: 16px;
  border: 2.5px solid var(--theme-border, #e2e8f0);
  background: var(--theme-card-bg, #fff);
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--theme-text, #1B3A6B);
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.ld-btn:hover { transform: translateY(-3px); }
.ld-btn.ld-light { background: linear-gradient(135deg, #f0f4ff, #e8f0fe); border-color: #b8ccf5; }
.ld-btn.ld-dark  { background: linear-gradient(135deg, #0d1829, #1B3A6B); border-color: #2A5298; color: #fff; }
.ld-btn.selected { box-shadow: 0 0 0 3px #7BA05B, 0 8px 24px rgba(123,160,91,0.25); border-color: #7BA05B; }
.ld-btn .ld-icon { font-size: 2rem; }