/* ==========================================================
   TALENT HUB — shared design system
   Loaded by every portal page after Tailwind so it can refine
   the look without any HTML being restructured.
   ========================================================== */

@font-face{font-family:'Jakarta';src:url('/static/fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Jakarta';src:url('/static/fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Jakarta';src:url('/static/fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Jakarta';src:url('/static/fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Jakarta';src:url('/static/fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2');font-weight:800;font-display:swap}

:root{
  --ink:#101B2D;
  --ink-soft:#26364F;
  --slate:#5A6B82;
  --mute:#8697AC;
  --azure:#15559E;
  --azure-600:#1567C4;
  --azure-50:#EAF2FC;
  --marigold:#D9930C;
  --marigold-50:#FDF4E1;
  --line:#E4E9F0;
  --paper:#F4F6F9;
  --card:#FFFFFF;
  --ok:#0F7B54;   --ok-50:#E6F5EF;
  --warn:#B4700A; --warn-50:#FDF3E2;
  --bad:#C0392F;  --bad-50:#FCEDEC;
  --r:12px;
  --shadow:0 1px 2px rgba(16,27,45,.05),0 4px 14px rgba(16,27,45,.05);
  --shadow-lg:0 8px 32px rgba(16,27,45,.11);
}

/* ---------- base ---------- */
body{
  font-family:'Jakarta',ui-sans-serif,system-ui,'Segoe UI',sans-serif !important;
  background:var(--paper) !important;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  letter-spacing:-0.005em;
}
h1,h2,h3,h4{letter-spacing:-0.02em;color:var(--ink)}
h1,.text-3xl{font-weight:700}
table,.tabular,td,th,.font-mono{font-variant-numeric:tabular-nums}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:8px;border:3px solid var(--paper)}
::-webkit-scrollbar-thumb:hover{background:#94A3B8}

*:focus-visible{outline:2px solid var(--azure-600);outline-offset:2px;border-radius:6px}

/* ---------- surfaces ---------- */
.bg-white,.dark\:bg-slate-900{
  background:var(--card) !important;
  border-radius:var(--r);
}
.rounded-xl,.rounded-lg,.rounded-2xl{border-radius:var(--r) !important}
.rounded-full{border-radius:999px !important}
.shadow-sm,.shadow,.shadow-md{box-shadow:var(--shadow) !important}
.shadow-lg,.shadow-xl,.shadow-2xl{box-shadow:var(--shadow-lg) !important}
.border,.border-slate-100,.border-slate-200,.border-gray-200{border-color:var(--line) !important}

/* stat / summary cards get a quiet top rule in the brand colour */
.content-section > .grid > .bg-white,
.content-section > .grid > div.bg-white{
  position:relative;overflow:hidden;
}

/* ---------- sidebar ----------
   NOTE: the markup is <aside class="bg-white ...">, so a bare
   `aside` selector loses to `.bg-white`. The attribute selector
   raises specificity above it without needing extra classes. */
aside[class]{
  background:var(--ink) !important;
  border-right:0 !important;
  box-shadow:1px 0 0 rgba(255,255,255,.06);
}
aside[class] > *{background:transparent !important}
aside[class] .border-b,aside[class] .border-t,
aside[class] [class*="border-slate"]{border-color:rgba(255,255,255,.10) !important}

aside[class] h1,aside[class] h2,aside[class] .text-xl,
aside[class] .text-2xl,aside[class] .font-bold{color:#FFFFFF !important}
aside[class] p,aside[class] .text-xs,aside[class] .text-sm,
aside[class] [class*="text-slate-"],aside[class] [class*="text-gray-"]{color:#93A8C6 !important}

aside[class] .nav-link{
  color:#DCE5F1 !important;
  border-radius:10px;
  font-weight:500;
  margin:1px 0;
  transition:background .16s ease,color .16s ease;
}
aside[class] .nav-link:hover{background:rgba(255,255,255,.09) !important;color:#FFFFFF !important}
/* showSection() marks the current page with `text-primary` and
   `bg-primary/10`, not `.active` - both are matched here. */
aside[class] .nav-link.text-primary,
aside[class] .nav-link[class*="bg-primary"],
aside[class] .nav-link.active{
  background:var(--azure) !important;
  color:#FFFFFF !important;
  font-weight:600;
  box-shadow:inset 3px 0 0 var(--marigold);
}
aside[class] .nav-link .material-symbols-outlined,
aside[class] .nav-link .material-symbols-rounded{
  font-size:20px;color:#8FA6C6;flex-shrink:0;
}
aside[class] .nav-link:hover .material-symbols-outlined,
aside[class] .nav-link:hover .material-symbols-rounded,
aside[class] .nav-link.active .material-symbols-outlined,
aside[class] .nav-link.active .material-symbols-rounded,
aside[class] .nav-link.text-primary .material-symbols-outlined,
aside[class] .nav-link.text-primary .material-symbols-rounded{color:#FFFFFF}

/* nav scroll area */
aside[class] nav{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
aside[class] nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border:3px solid transparent;background-clip:padding-box}

/* footer buttons inside the sidebar */
aside[class] .bg-slate-800,aside[class] .bg-slate-900{
  background:rgba(255,255,255,.10) !important;color:#fff !important;
  border:1px solid rgba(255,255,255,.14) !important;
}
aside[class] .bg-slate-800:hover,aside[class] .bg-slate-900:hover{background:rgba(255,255,255,.16) !important}
aside[class] .bg-red-600,aside[class] .bg-red-500{background:var(--bad) !important;color:#fff !important}

/* ---------- buttons ---------- */
button,.btn,a.btn{font-family:inherit;letter-spacing:-0.01em}
button,[type=submit]{transition:transform .12s ease,box-shadow .16s ease,background .16s ease}
button:active,[type=submit]:active{transform:translateY(1px)}

.bg-primary,.bg-blue-600,.bg-blue-700{background:var(--azure) !important}
.hover\:bg-blue-700:hover,.hover\:bg-primary:hover{background:var(--azure-600) !important}
.text-primary,.text-blue-600{color:var(--azure) !important}
.bg-green-600{background:var(--ok) !important}
.hover\:bg-green-700:hover{background:#0C6544 !important}
.bg-red-600{background:var(--bad) !important}
.text-green-600,.text-green-700{color:var(--ok) !important}
.text-red-600,.text-red-700{color:var(--bad) !important}
.text-amber-600,.text-yellow-600{color:var(--warn) !important}
.bg-slate-800,.bg-slate-900{background:var(--ink) !important}
.bg-slate-700{background:var(--ink-soft) !important}

/* ---------- inputs ---------- */
input,select,textarea{
  font-family:inherit !important;
  border:1px solid var(--line) !important;
  border-radius:10px !important;
  background:#FBFCFD !important;
  color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none !important;
  border-color:var(--azure) !important;
  background:#fff !important;
  box-shadow:0 0 0 3px var(--azure-50) !important;
}
input::placeholder,textarea::placeholder{color:var(--mute)}
label{color:var(--slate);font-weight:500}

/* ---------- tables ---------- */
table{border-collapse:separate;border-spacing:0}
thead tr th,thead.bg-slate-100 th,thead.bg-slate-50 th{
  background:#F0F3F7 !important;
  color:var(--slate) !important;
  font-size:11.5px !important;
  font-weight:600 !important;
  text-transform:uppercase;
  letter-spacing:.06em;
  border-bottom:1px solid var(--line) !important;
  white-space:nowrap;
}
tbody tr{transition:background .12s ease}
tbody tr:hover{background:#F7F9FC !important}
tbody td{border-bottom:1px solid #EEF1F6 !important;color:var(--ink-soft)}

/* ---------- pills / badges ---------- */
.bg-green-100{background:var(--ok-50) !important}
.bg-red-100{background:var(--bad-50) !important}
.bg-yellow-100,.bg-amber-100{background:var(--warn-50) !important}
.bg-blue-50,.bg-blue-100{background:var(--azure-50) !important}
.text-green-800{color:var(--ok) !important}
.text-red-800{color:var(--bad) !important}
.text-yellow-800,.text-amber-800{color:var(--warn) !important}

/* ---------- misc ---------- */
.material-symbols-outlined,.material-symbols-rounded{
  font-variation-settings:'wght' 400,'opsz' 24;
  vertical-align:middle;
}
img{image-rendering:auto}
.content-section{animation:thFade .28s ease both}
@keyframes thFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ---------- mobile ---------- */
@media (max-width:768px){
  body{font-size:15px}
  .p-8{padding:1.15rem !important}
  .p-6{padding:1rem !important}
  h2.text-3xl{font-size:1.5rem !important}
  table{font-size:13px}
  thead tr th,tbody td{padding-left:.6rem !important;padding-right:.6rem !important}
  button,[type=submit],.nav-link{min-height:44px}
  input,select,textarea{font-size:16px !important} /* stops iOS zooming on focus */
}

@media print{
  aside,nav,button,.no-print{display:none !important}
  body{background:#fff !important}
}

/* ==========================================================
   LOGIN — the first screen every parent, student and teacher
   sees. Two-tone split: institute identity on the left rail,
   the form kept plain and fast on the right.
   ========================================================== */
body.th-login{
  background:var(--ink) !important;
  min-height:100vh;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:1.05fr .95fr;
  align-items:stretch !important;
  justify-content:stretch !important;
}
body.th-login::before{
  content:"";
  grid-column:1;grid-row:1;
  background:
    radial-gradient(120% 90% at 12% 8%, rgba(21,85,158,.55) 0%, transparent 62%),
    radial-gradient(90% 70% at 92% 96%, rgba(217,147,12,.28) 0%, transparent 58%),
    var(--ink);
}
body.th-login > *{grid-column:2;grid-row:1;align-self:center;justify-self:center;
  width:100%;max-width:420px;padding:2rem 1.5rem}
body.th-login .th-rail{
  grid-column:1;grid-row:1;align-self:stretch;justify-self:stretch;
  max-width:none;padding:3.5rem 3rem;display:flex;flex-direction:column;
  justify-content:space-between;color:#fff;position:relative;z-index:2;
}
.th-rail .th-mark{display:flex;align-items:center;gap:.85rem}
.th-rail .th-mark img{width:52px;height:52px;object-fit:contain;background:#fff;
  border-radius:12px;padding:5px}
.th-rail .th-mark b{font-size:1.05rem;font-weight:700;letter-spacing:-.01em;line-height:1.15}
.th-rail .th-mark span{display:block;font-size:.72rem;font-weight:500;color:#9DB3D0;
  letter-spacing:.04em;text-transform:uppercase}
.th-rail h2{font-size:2.6rem;line-height:1.08;font-weight:800;letter-spacing:-.035em;
  color:#fff;margin:0 0 1rem}
.th-rail h2 em{font-style:normal;color:var(--marigold)}
.th-rail p{color:#A9BCD6;font-size:1rem;line-height:1.65;max-width:34ch;margin:0}
.th-rail .th-exams{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.th-rail .th-exams span{font-size:.75rem;font-weight:600;letter-spacing:.05em;
  padding:.4rem .75rem;border-radius:999px;background:rgba(255,255,255,.09);
  color:#D4E1F2;border:1px solid rgba(255,255,255,.12)}
.th-rail .th-foot{font-size:.76rem;color:#7D93B2;line-height:1.6}

/* right-hand form column */
body.th-login .login-card{
  background:#fff !important;backdrop-filter:none !important;
  border:1px solid var(--line) !important;border-radius:16px !important;
  box-shadow:0 10px 40px rgba(0,0,0,.28) !important;padding:2rem !important;
}
body.th-login .login-card > .absolute{display:none !important}
body.th-login h1{font-size:1.35rem !important;color:var(--ink) !important}
body.th-login > div > .text-center{margin-bottom:1.25rem !important}
body.th-login > div > .text-center > div:first-child{
  width:56px !important;height:56px !important;margin-bottom:.75rem !important;
  box-shadow:var(--shadow) !important;background:var(--azure-50) !important;
  color:var(--azure) !important;border-radius:14px !important}
body.th-login > div > .text-center > div:first-child svg{width:28px !important;height:28px !important}

@media (max-width:900px){
  body.th-login{grid-template-columns:1fr}
  body.th-login::before{display:none}
  body.th-login .th-rail{display:none}
  body.th-login{background:
    radial-gradient(120% 60% at 50% 0%, rgba(21,85,158,.5) 0%, transparent 60%),
    var(--ink) !important;}
  body.th-login > *{grid-column:1;padding:1.5rem 1.15rem}
}