/* Sainiki Vidyalaya website: night mode (14/11/2026, Claude).
   Applies only when <html data-svt-theme="dark">, which svt-night/night.js sets from the visitor's choice
   (cookie svt_theme, shared with the school's admin panels). Day mode is untouched.
   Design: deep navy background, bright text, the school's blue and gold kept vivid; photos are never altered. */

html[data-svt-theme="dark"]{
  color-scheme:dark;
  --n-bg:9 16 32;           /* page        #091020 */
  --n-surface:17 28 53;     /* cards       #111c35 */
  --n-surface2:24 38 70;    /* raised      #182646 */
  --n-line:148 163 184;     /* borders (used with alpha) */
  --n-text:232 238 248;     /* body text   #e8eef8 */
  --n-muted:166 182 206;    /* secondary   #a6b6ce */
  --n-navy:6 26 64;         /* the real school navy, for dark bands */

  --c-bg:var(--n-bg);
  --c-header-bg:13 23 45;
  --c-text:var(--n-text);
  --c-navy:var(--n-text);           /* navy is used as text colour all over the site: make it bright */
  --c-navy-light:20 33 61;
  --c-brand:72 140 255;             /* vivid school blue: readable as text and as a button colour */
  --c-brand-dark:46 108 230;
  --c-brand-light:20 36 70;
  --c-teal:72 140 255;
  --c-teal-light:20 36 70;
  --c-accent:247 190 64;            /* gold accent, brighter at night */
  --c-accent-light:52 40 14;
  --c-gold:247 196 76;
  --c-gold-light:50 40 16;
  --c-cta:214 150 20;
  --c-cta-text:255 255 255;
  --c-cta-hover:46 108 230;
  --c-btn-text:var(--n-navy);       /* gold buttons keep dark navy text */
  --c-btn-hover:255 255 255;
  --c-nav-text:var(--n-text);
  --c-nav-hover:255 196 86;
  --c-dd-bg:24 52 112;
  --c-dd-text:255 255 255;
  --c-link:120 178 255;
  --c-focus:255 196 86;
  --c-topbar-bg:5 11 24;
  --c-topbar-text:226 232 240;
  --c-footer-bg:5 11 24;
  --c-footer-text:203 213 225;
  --c-footer-head:255 255 255;
  background:rgb(var(--n-bg));
}
/* Places that use navy as a BACKGROUND keep the real dark navy (hero overlay, dark bands, gradients, buttons). */
html[data-svt-theme="dark"] :is(.svt-hero,.bg-navy,[class*="from-navy"],[class*="via-navy"],[class*="to-navy"],.svt-view-fab,.backdrop\:bg-navy\/80){--c-navy:var(--n-navy)}
/* The Appearance panel's hero overlays are built from navy at the page root: rebuild them with the real navy. */
html[data-svt-theme="dark"]{
  --svt-sunrise:linear-gradient(150deg,rgba(255,208,124,.50) 0%,rgba(255,172,100,.34) 16%,rgba(255,150,110,.18) 30%,rgb(46 108 230/.45) 52%,rgb(6 26 64/.82) 78%,rgb(6 26 64/.94) 100%);
  --svt-sunset:linear-gradient(115deg,rgb(6 26 64/.92),rgb(46 108 230/.70) 45%,rgba(255,122,24,.45) 75%,rgba(214,51,132,.55));
}
html[data-svt-theme="dark"] body{background-color:rgb(var(--n-bg));color:rgb(var(--n-text))}

/* ---- Tailwind colours that are fixed (not theme variables) ---- */
html[data-svt-theme="dark"] .bg-white{background-color:rgb(var(--n-surface))}
html[data-svt-theme="dark"] .bg-white\/90{background-color:rgb(var(--n-surface)/.92)}
html[data-svt-theme="dark"] .focus\:bg-white:focus{background-color:rgb(var(--n-surface))}
html[data-svt-theme="dark"] .text-slate-800,html[data-svt-theme="dark"] .text-slate-700{color:rgb(var(--n-text))}
html[data-svt-theme="dark"] .text-slate-600{color:rgb(196 208 226)}
html[data-svt-theme="dark"] .text-slate-500{color:rgb(var(--n-muted))}
html[data-svt-theme="dark"] .border-slate-100{border-color:rgb(var(--n-line)/.12)}
html[data-svt-theme="dark"] .border-slate-200{border-color:rgb(var(--n-line)/.18)}
html[data-svt-theme="dark"] .border-black\/10{border-color:rgb(var(--n-line)/.16)}
html[data-svt-theme="dark"] .border-white{border-color:rgb(var(--n-surface))}
html[data-svt-theme="dark"] .ring-white{--tw-ring-color:rgb(var(--n-surface2))}
html[data-svt-theme="dark"] .text-brand,html[data-svt-theme="dark"] .group:hover .group-hover\:text-brand{color:rgb(120 178 255)}
html[data-svt-theme="dark"] .text-accent{color:rgb(var(--c-accent))}
html[data-svt-theme="dark"] header{box-shadow:0 6px 18px -10px rgb(0 0 0/.8)!important}
html[data-svt-theme="dark"] .svt-card,html[data-svt-theme="dark"] .shadow,html[data-svt-theme="dark"] .shadow-lg{--tw-shadow-color:rgb(0 0 0/.6)}
html[data-svt-theme="dark"] .svt-card{box-shadow:0 10px 26px -8px rgb(0 0 0/.65)!important;border-color:rgb(var(--n-line)/.10)!important}
html[data-svt-theme="dark"] .svt-card:hover{box-shadow:0 16px 34px -10px rgb(0 0 0/.75),0 0 0 1px rgb(var(--c-gold)/.35)!important}
html[data-svt-theme="dark"] .svt-cap{color:rgb(var(--n-muted))}
html[data-svt-theme="dark"] hr{border-color:rgb(var(--n-line)/.18)}

/* menus */
html[data-svt-theme="dark"] .dd a:hover,html[data-svt-theme="dark"] .dd a:focus-visible{background:rgb(var(--c-gold));color:rgb(var(--n-navy))}
html[data-svt-theme="dark"] header :is(.nav-item:hover,.nav-item:focus-within,.nav-item.open)>.nav-link,
html[data-svt-theme="dark"] header .nav-link[aria-current],
html[data-svt-theme="dark"] header nav.mnav>div>ul>li>:is(a,button):is(:hover,:focus-visible,:active,[aria-expanded=true]){color:rgb(255 170 120)!important}
html[data-svt-theme="dark"] header .nav-link::after,
html[data-svt-theme="dark"] header nav.mnav>div>ul>li>:is(a,button)::after{background:rgb(255 150 90)!important}
html[data-svt-theme="dark"] header nav.mnav,html[data-svt-theme="dark"] header nav.mnav *{border-color:rgb(var(--n-line)/.14)}

/* article text, tables, documents */
html[data-svt-theme="dark"] .prose-svt td,html[data-svt-theme="dark"] .prose-svt th{border-color:rgb(var(--n-line)/.2)}
html[data-svt-theme="dark"] .prose-svt img{box-shadow:0 6px 18px rgb(0 0 0/.5)}
html[data-svt-theme="dark"] :is(input,select,textarea){background-color:rgb(var(--n-surface2));color:rgb(var(--n-text));border-color:rgb(var(--n-line)/.3)}
html[data-svt-theme="dark"] ::placeholder{color:rgb(var(--n-muted))}

/* text-size panel */
html[data-svt-theme="dark"] .svt-view-panel{background:rgb(var(--n-surface));color:rgb(var(--n-text));border-color:rgb(var(--n-line)/.2)}
html[data-svt-theme="dark"] .svt-view-b,html[data-svt-theme="dark"] .svt-view-reset{background:rgb(var(--n-surface2));color:rgb(var(--n-text));border-color:rgb(var(--n-line)/.3)}
html[data-svt-theme="dark"] .svt-view-b.on{background:rgb(var(--c-brand));color:#fff}
html[data-svt-theme="dark"] .svt-view-pct{color:rgb(var(--n-muted))}

/* ---- Appearance panel's custom page styles (data/theme.css) that use white boxes ---- */
html[data-svt-theme="dark"] [data-sec="welcome"]::before{background:rgb(var(--n-bg))!important}
html[data-svt-theme="dark"] main .svt-staff-ph{background:rgb(var(--n-surface))!important}
html[data-svt-theme="dark"] body:is(:has(#h-hostel),:has(#h-co-curricular),:has(#h-about-school),:has(#h-school-docs),:has(#h-alumini)) main>div>section{
  background:rgb(var(--n-surface))!important;border-color:rgb(var(--n-line)/.12)!important;box-shadow:0 14px 34px rgb(0 0 0/.45)!important}
html[data-svt-theme="dark"] body:is(:has(#h-hostel),:has(#h-co-curricular),:has(#h-about-school),:has(#h-school-docs),:has(#h-alumini)) main .prose-svt td{background:rgb(var(--n-surface2))!important}
html[data-svt-theme="dark"] body:is(:has(#h-hostel),:has(#h-co-curricular)) main .prose-svt tbody tr:nth-child(even) td{background:rgb(var(--c-brand-light))!important}
html[data-svt-theme="dark"] body:is(:has(#h-about-school),:has(#h-school-docs),:has(#h-alumini)) main .prose-svt td:first-child{background:linear-gradient(135deg,#0077b6,#00b4d8)!important}
html[data-svt-theme="dark"] body:has(#h-hostel) main a.hf-btn.hf-alt{background:rgb(var(--n-surface2))!important;color:rgb(var(--n-text))!important}
html[data-svt-theme="dark"] body:has(#h-co-curricular) main a.ac-card,
html[data-svt-theme="dark"] body:has(#h-alumini) main .prose-svt h3+ul li:nth-child(n),
html[data-svt-theme="dark"] body:is(:has(#h-about-school),:has(#h-school-docs),:has(#h-alumini)) main a.dc{background:rgb(var(--n-surface2))!important;border-color:rgb(var(--n-line)/.14)!important}
html[data-svt-theme="dark"] body:has(#h-co-curricular) main .prose-svt img{background:rgb(var(--n-surface2))!important;border-color:rgb(var(--n-line)/.14)!important}
html[data-svt-theme="dark"] body:is(:has(#h-about-school),:has(#h-school-docs),:has(#h-alumini)) main .prose-svt img{
  background:linear-gradient(rgb(var(--n-surface)),rgb(var(--n-surface))) padding-box,linear-gradient(135deg,#ff9a3c,#ff3d77,#7b2ff7,#00b4d8) border-box!important}
html[data-svt-theme="dark"] body:is(:has(#h-about-school),:has(#h-school-docs),:has(#h-alumini)) main{
  background:radial-gradient(1200px 520px at 0% 0%,rgba(255,150,60,.13),transparent 60%),radial-gradient(1000px 520px at 100% 20%,rgba(123,47,247,.16),transparent 60%),rgb(var(--n-bg))!important}

/* ---- the day / night button ---- */
.svt-dn{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;margin-left:8px;border-radius:999px;border:1px solid rgb(var(--c-brand)/.35);background:transparent;color:rgb(var(--c-navy));cursor:pointer;font-size:17px;line-height:1;transition:background-color .2s,transform .2s,box-shadow .2s}
.svt-dn:hover{background:rgb(var(--c-brand)/.10);transform:rotate(-12deg)}
.svt-dn:focus-visible{outline:2px solid rgb(var(--c-gold));outline-offset:2px}
.svt-dn svg{width:18px;height:18px}
html[data-svt-theme="dark"] .svt-dn{border-color:rgb(var(--c-gold)/.55);color:rgb(var(--c-gold));box-shadow:0 0 14px rgb(var(--c-gold)/.25)}
html[data-svt-theme="dark"] .svt-dn:hover{background:rgb(var(--c-gold)/.12)}
.svt-dn-float{position:fixed;left:14px;bottom:14px;z-index:60;width:44px;height:44px;margin:0;background:rgb(var(--c-header-bg,255 255 255));box-shadow:0 6px 18px rgb(0 0 0/.25)}
@media print{.svt-dn{display:none!important}html[data-svt-theme="dark"]{color-scheme:light}}

/* Class timetable page (/timetable/, its own tt.css): the timetable keeps its day colours as bright cards on the night page. */
html[data-svt-theme="dark"] main.tt-wrap{--b:11 61 145;--bd:8 42 99;--bl:232 238 249;--nv:6 26 64;--ac:153 111 9;--gd:242 193 78;--tx:6 26 64;--card:255 255 255;--line:226 232 240;--muted:100 116 139;color:rgb(6 26 64)}
html[data-svt-theme="dark"] main.tt-wrap .card{box-shadow:0 12px 30px rgb(0 0 0/.55)}