/* Presentation only: keep the established layout and interaction rules. */
body.light-mode {
  --lf-blue:#0059b3; --lf-blue-rgb:0,89,179; --lf-blue-deep:#003366;
  --primary-color:#0059b3; --primary-hover:#0066cc;
  --bg-dark:#0059b3; --panel-bg:#0059b3; --input-bg:#004080;
  --bubble-bg:#004080; --input-text:#f7fbff; --text-dark:#f7fbff; --text-muted:#d8eaff;
}
body:not(.light-mode) {
  --lf-blue:#08287F; --lf-blue-rgb:8,40,127; --lf-blue-deep:#061d5b;
  --primary-color:#08287F; --primary-hover:#123c9c;
  --dark-navy:#08287F; --bg-dark:#08287F; --panel-bg:#08287F;
  --input-bg:#061d5b; --bubble-bg:#061d5b; --text-muted:#d8eaff;
}
body.light-mode, body:not(.light-mode) { background-color:var(--lf-blue) !important; }
body.portal-active::before, body.portal-active::after,
#authSection::before, #authSection::after { content:none !important; }
.ambient-background { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; background:url('/assets/video/little-feet-login-clean.jpg') center/cover; }
.ambient-background video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transition:opacity .22s ease, visibility .22s ease; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.ambient-background .login-background-video { opacity:1; visibility:visible; }
.ambient-background .portal-background-video { opacity:0; visibility:hidden; }
body.portal-active .ambient-background .login-background-video { opacity:0; visibility:hidden; }
body.portal-active .ambient-background .portal-background-video { opacity:1; visibility:visible; }
.ambient-background::after { content:""; position:absolute; inset:0; background:rgba(4,18,38,.08); }
.ambient-background .login-background-video { filter:none; }
body.portal-active .ambient-background::after { background:rgba(var(--lf-blue-rgb),.35); }
body.portal-active:not(.light-mode) .ambient-background::after { background:rgba(var(--lf-blue-rgb),.56); }
#dashboardSection { z-index:1; }
/* :is keeps specificity above the existing theme guards without changing geometry. */
body:is(.light-mode,:not(.light-mode)) #dashboardSection > nav,
body:is(.light-mode,:not(.light-mode)) .app-sidebar,
body:is(.light-mode,:not(.light-mode)) .app-sidebar [data-nav-group],
body:is(.light-mode,:not(.light-mode)) .card,
body:is(.light-mode,:not(.light-mode)) .workspace-card,
body:is(.light-mode,:not(.light-mode)) .workspace-results-panel,
body:is(.light-mode,:not(.light-mode)) .store-item,
body:is(.light-mode,:not(.light-mode)) .chat-shell,
body:is(.light-mode,:not(.light-mode)) .guide-link-card,
body:is(.light-mode,:not(.light-mode)) .modal-card,
body:is(.light-mode,:not(.light-mode)) .item-row,
body:is(.light-mode,:not(.light-mode)) .wellbeing-banner,
body:is(.light-mode,:not(.light-mode)) #termsNotice,
body:is(.light-mode,:not(.light-mode)) #runtimeErrorBanner,
body:is(.light-mode,:not(.light-mode)) #schoolPinCard,
body:is(.light-mode,:not(.light-mode)) #householdSwitcher,
body:is(.light-mode,:not(.light-mode)) [data-roles][style*="background: var(--panel-bg)"],
body:is(.light-mode,:not(.light-mode)) footer {
  background:linear-gradient(145deg,rgba(var(--lf-blue-rgb),.96),var(--lf-blue-deep)) !important;
  color:#f7fbff !important; border-color:rgba(157,207,255,.4) !important;
}
body:is(.light-mode,:not(.light-mode)) input,
body:is(.light-mode,:not(.light-mode)) select,
body:is(.light-mode,:not(.light-mode)) textarea,
body:is(.light-mode,:not(.light-mode)) .chat-box,
body:is(.light-mode,:not(.light-mode)) .profile-icon-choice,
body:is(.light-mode,:not(.light-mode)) .social-signin button {
  background:var(--lf-blue-deep) !important; color:#f7fbff !important;
}
body:is(.light-mode,:not(.light-mode)) .nav-shortcut,
body:is(.light-mode,:not(.light-mode)) .nav-term-edit,
body:is(.light-mode,:not(.light-mode)) .action-btn.btn-blue,
body:is(.light-mode,:not(.light-mode)) button.submit-btn,
body:is(.light-mode,:not(.light-mode)) .sidebar-links .nav-btn.active {
  background:linear-gradient(180deg,var(--primary-hover),var(--lf-blue)) !important; color:white !important;
}
body:is(.light-mode,:not(.light-mode)) .portal-welcome-banner {
  background-image:linear-gradient(90deg,var(--lf-blue-deep),rgba(var(--lf-blue-rgb),.85) 44%,rgba(var(--lf-blue-rgb),.15)),url('/assets/4k/admin-mascot-dashboard-4k.jpg') !important;
}
.background-motion-toggle { position:fixed; bottom:max(12px,env(safe-area-inset-bottom)); right:12px; z-index:12; width:auto; min-height:44px; padding:8px 12px; border:1px solid #a9d3ff; border-radius:12px; background:var(--lf-blue-deep); color:white; font:600 12px system-ui; cursor:pointer; box-shadow:0 3px 12px #001a3355; }
.background-motion-toggle:focus-visible { outline:3px solid #fff; outline-offset:3px; }
@media (prefers-reduced-motion:reduce) { .ambient-background video { visibility:hidden; } }
/* Keep login and footer text legible over the moving blue backdrop. */
body:is(.light-mode,:not(.light-mode)) #authSection > .auth-card {
  background:linear-gradient(145deg,rgba(var(--lf-blue-rgb),.98),var(--lf-blue-deep)) !important;
  /* Live backdrop blur forces the browser to re-blur a large moving video
     every frame. Keep the card visually solid and let the video decode once. */
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
body:is(.light-mode,:not(.light-mode)) footer a,
body:is(.light-mode,:not(.light-mode)) footer p,
body:is(.light-mode,:not(.light-mode)) footer button,
body:is(.light-mode,:not(.light-mode)) footer span { color:#e3f0ff !important; }

/* Final material pass: the existing blue themes remain authoritative while
   every working surface reads as layered glass over the motion wallpaper. */
body.light-mode { --lf-glass-rgb:0,89,179; --lf-glass-deep-rgb:0,51,102; }
body:not(.light-mode) { --lf-glass-rgb:8,40,127; --lf-glass-deep-rgb:6,29,91; }
body:is(.light-mode,:not(.light-mode)) #dashboardSection > nav,
body:is(.light-mode,:not(.light-mode)) .app-sidebar {
  background:linear-gradient(135deg,rgba(var(--lf-glass-rgb),.86),rgba(var(--lf-glass-deep-rgb),.80)) !important;
  backdrop-filter:blur(20px) saturate(135%);
  -webkit-backdrop-filter:blur(20px) saturate(135%);
  box-shadow:0 14px 36px rgba(0,22,68,.28),inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.16) !important;
}
body:is(.light-mode,:not(.light-mode)) .app-sidebar [data-nav-group],
body:is(.light-mode,:not(.light-mode)) .card,
body:is(.light-mode,:not(.light-mode)) .workspace-card,
body:is(.light-mode,:not(.light-mode)) .workspace-results-panel,
body:is(.light-mode,:not(.light-mode)) .store-item,
body:is(.light-mode,:not(.light-mode)) .chat-shell,
body:is(.light-mode,:not(.light-mode)) .guide-link-card,
body:is(.light-mode,:not(.light-mode)) .modal-card,
body:is(.light-mode,:not(.light-mode)) .item-row,
body:is(.light-mode,:not(.light-mode)) .wellbeing-banner,
body:is(.light-mode,:not(.light-mode)) #termsNotice,
body:is(.light-mode,:not(.light-mode)) #runtimeErrorBanner,
body:is(.light-mode,:not(.light-mode)) #schoolPinCard,
body:is(.light-mode,:not(.light-mode)) #householdSwitcher,
body:is(.light-mode,:not(.light-mode)) [data-roles][style*="background: var(--panel-bg)"] {
  background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(var(--lf-glass-rgb),.72) 26%,rgba(var(--lf-glass-deep-rgb),.74)) !important;
  border-color:rgba(174,222,255,.38) !important;
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  box-shadow:0 18px 42px rgba(0,20,66,.25),inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.13) !important;
}
body:is(.light-mode,:not(.light-mode)) input,
body:is(.light-mode,:not(.light-mode)) select,
body:is(.light-mode,:not(.light-mode)) textarea,
body:is(.light-mode,:not(.light-mode)) .chat-box,
body:is(.light-mode,:not(.light-mode)) .profile-icon-choice,
body:is(.light-mode,:not(.light-mode)) .social-signin button {
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(var(--lf-glass-deep-rgb),.66)) !important;
  border-color:rgba(174,222,255,.42) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.16) !important;
}
body:is(.light-mode,:not(.light-mode)) .action-btn,
body:is(.light-mode,:not(.light-mode)) button.submit-btn,
body:is(.light-mode,:not(.light-mode)) .nav-shortcut,
body:is(.light-mode,:not(.light-mode)) .nav-term-edit,
body:is(.light-mode,:not(.light-mode)) .nav-more-toggle {
  border-color:rgba(214,241,255,.52) !important;
  box-shadow:0 8px 18px rgba(0,19,63,.28),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.18) !important;
}
body:is(.light-mode,:not(.light-mode)) .action-btn:hover,
body:is(.light-mode,:not(.light-mode)) button.submit-btn:hover,
body:is(.light-mode,:not(.light-mode)) .nav-shortcut:hover,
body:is(.light-mode,:not(.light-mode)) .nav-term-edit:hover,
body:is(.light-mode,:not(.light-mode)) .nav-more-toggle:hover {
  filter:brightness(1.12) saturate(1.1);
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(0,19,63,.34),0 0 18px rgba(153,220,255,.18),inset 0 1px 0 rgba(255,255,255,.34) !important;
}
@media (prefers-reduced-motion:reduce) {
  body:is(.light-mode,:not(.light-mode)) .action-btn:hover,
  body:is(.light-mode,:not(.light-mode)) button.submit-btn:hover,
  body:is(.light-mode,:not(.light-mode)) .nav-shortcut:hover,
  body:is(.light-mode,:not(.light-mode)) .nav-term-edit:hover,
  body:is(.light-mode,:not(.light-mode)) .nav-more-toggle:hover { transform:none; }
}
/* Keep the desktop header and its attached navigation edge visible while
   long panels scroll; mobile retains its established sticky drawer layout. */
@media (min-width:960px) {
  #dashboardSection { padding-top:var(--portal-header-height,68px); }
  #dashboardSection > nav { position:fixed !important; inset:0 0 auto; width:100%; }
}

/* Stronger separation for controls and nested panels; each remains readable
   over the moving wallpaper without making the whole page opaque. */
body:is(.light-mode,:not(.light-mode)) .app-sidebar [data-nav-group],
body:is(.light-mode,:not(.light-mode)) .sidebar-links .nav-btn,
body:is(.light-mode,:not(.light-mode)) .sidebar-group-toggle {
  border-color:rgba(174,222,255,.46) !important;
  background-color:rgba(var(--lf-glass-deep-rgb),.42);
}
body:is(.light-mode,:not(.light-mode)) .workspace-card,
body:is(.light-mode,:not(.light-mode)) .store-item,
body:is(.light-mode,:not(.light-mode)) .guide-link-card,
body:is(.light-mode,:not(.light-mode)) .item-row {
  background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(var(--lf-glass-deep-rgb),.78)) !important;
  border-color:rgba(174,222,255,.48) !important;
}
body:is(.light-mode,:not(.light-mode)) input,
body:is(.light-mode,:not(.light-mode)) select,
body:is(.light-mode,:not(.light-mode)) textarea,
body:is(.light-mode,:not(.light-mode)) .chat-box {
  background:linear-gradient(180deg,rgba(var(--lf-glass-deep-rgb),.88),rgba(0,20,70,.92)) !important;
  border-color:rgba(174,222,255,.58) !important;
}
/* Per-card backdrop blur is expensive while a video is running. The gradient
   and rim light preserve the glass material, while only the shell is blurred. */
body:is(.light-mode,:not(.light-mode)) .card,
body:is(.light-mode,:not(.light-mode)) .workspace-card,
body:is(.light-mode,:not(.light-mode)) .workspace-results-panel,
body:is(.light-mode,:not(.light-mode)) .store-item,
body:is(.light-mode,:not(.light-mode)) .chat-shell,
body:is(.light-mode,:not(.light-mode)) .guide-link-card,
body:is(.light-mode,:not(.light-mode)) .modal-card,
body:is(.light-mode,:not(.light-mode)) .item-row { backdrop-filter:none; -webkit-backdrop-filter:none; }
@media (max-width:959px) {
  body:is(.light-mode,:not(.light-mode)) #dashboardSection > nav,
  body:is(.light-mode,:not(.light-mode)) .app-sidebar { backdrop-filter:none; -webkit-backdrop-filter:none; }
}
body:is(.light-mode,:not(.light-mode)) .nav-more-toggle {
  background:linear-gradient(145deg,var(--primary-hover),var(--lf-blue)) !important;
  color:#fff !important;
}

/* Professional system typography: fast, high-density-display friendly, and
   compatible with every existing language and form control. */
body,
input,
select,
textarea,
button { font-family:Aptos, "Segoe UI Variable", "Segoe UI", Arial, sans-serif; }
h1,
h2,
h3,
.card-header-bar h2,
.workspace-card h3,
.portal-welcome-banner h2 { font-family:"Aptos Display", Aptos, "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif; letter-spacing:-.018em; }
h1 { font-weight:750; }
h2 { font-weight:720; }
h3 { font-weight:680; }
.sidebar-heading,
.sidebar-group-toggle,
.portal-welcome-kicker,
.badge-tag { letter-spacing:.085em; font-weight:720; }
label,
.form-label { font-weight:650; letter-spacing:.01em; }
.action-btn,
button.submit-btn,
.nav-shortcut,
.nav-more-toggle,
.sidebar-links .nav-btn { font-weight:650; letter-spacing:.005em; }

body:not(.portal-active) .ambient-background{background-image:url("/assets/video/little-feet-login-clean.jpg")}
#authSection .login-iceberg-emblem{filter:drop-shadow(0 2px 1px #d8f9ff66) drop-shadow(0 12px 10px #09243b70)}