/* EDUHUNT R457 — School branding + Student dashboard/medal fit
   Scope:
   - School branding: PRINCIPAL / TEACHER / STUDENT only
   - Student dashboard and Student medal UI only
   No data, exam, result or permission logic is changed.
*/

/* =====================================================================
   SCHOOL BRANDING — PRINCIPAL / TEACHER / STUDENT
   ===================================================================== */
body:is([data-portal-role="PRINCIPAL"],[data-portal-role="TEACHER"],[data-portal-role="STUDENT"]) .topbar-title{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  grid-template-rows:auto auto auto!important;
  column-gap:12px!important;
  row-gap:1px!important;
  align-items:center!important;
  min-width:0!important;
  flex:1 1 auto!important;
}
body:is([data-portal-role="PRINCIPAL"],[data-portal-role="TEACHER"],[data-portal-role="STUDENT"]) .topbar-school-logo{
  grid-column:1!important;
  grid-row:1 / 3!important;
  display:block;
  width:48px!important;
  height:48px!important;
  object-fit:contain!important;
  border-radius:10px!important;
  background:#fff!important;
  padding:3px!important;
  box-sizing:border-box!important;
  border:1px solid rgba(120,190,235,.35)!important;
}
body:is([data-portal-role="PRINCIPAL"],[data-portal-role="TEACHER"],[data-portal-role="STUDENT"]) .topbar-school-logo[hidden]{display:none!important}
body:is([data-portal-role="PRINCIPAL"],[data-portal-role="TEACHER"],[data-portal-role="STUDENT"]) #topbarPortal{
  grid-column:2!important;
  grid-row:1!important;
  display:block!important;
  min-width:0!important;
  max-width:none!important;
  width:100%!important;
  margin:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:clamp(25px,2.35vw,34px)!important;
  line-height:1.05!important;
  font-weight:950!important;
  letter-spacing:.015em!important;
  text-transform:uppercase!important;
}
body:is([data-portal-role="PRINCIPAL"],[data-portal-role="TEACHER"],[data-portal-role="STUDENT"]) #topbarRoleLabel{
  grid-column:2!important;
  grid-row:2!important;
  margin:1px 0 0!important;
  font-size:13px!important;
  line-height:1.05!important;
  font-weight:950!important;
}
body:is([data-portal-role="PRINCIPAL"],[data-portal-role="TEACHER"],[data-portal-role="STUDENT"]) #pageTitle{
  grid-column:1 / -1!important;
  grid-row:3!important;
}

/* School logo in the login/portal introduction animation. */
#ehIntroSplash.eh-intro-school .eh-intro-school-logo{
  display:block;
  width:92px;
  height:92px;
  margin:0 auto 12px;
  object-fit:contain;
  padding:6px;
  border-radius:18px;
  background:#fff;
  border:2px solid rgba(126,216,255,.55);
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
#ehIntroSplash.eh-intro-school .eh-intro-school-logo[hidden]{display:none!important}

@media(max-width:1024px){
  body:is([data-portal-role="PRINCIPAL"],[data-portal-role="TEACHER"],[data-portal-role="STUDENT"]) .topbar-title{
    column-gap:8px!important;
  }
  body:is([data-portal-role="PRINCIPAL"],[data-portal-role="TEACHER"],[data-portal-role="STUDENT"]) .topbar-school-logo{
    width:36px!important;
    height:36px!important;
    border-radius:8px!important;
    padding:2px!important;
  }
  body:is([data-portal-role="PRINCIPAL"],[data-portal-role="TEACHER"],[data-portal-role="STUDENT"]) #topbarPortal{
    font-size:clamp(19px,4.8vw,27px)!important;
    text-align:left!important;
  }
  body:is([data-portal-role="PRINCIPAL"],[data-portal-role="TEACHER"],[data-portal-role="STUDENT"]) #topbarRoleLabel{
    font-size:11px!important;
    text-align:left!important;
  }
  #ehIntroSplash.eh-intro-school .eh-intro-school-logo{width:74px;height:74px;margin-bottom:9px}
}
@media(max-width:520px){
  body:is([data-portal-role="PRINCIPAL"],[data-portal-role="TEACHER"],[data-portal-role="STUDENT"]) .topbar-school-logo{width:32px!important;height:32px!important}
  body:is([data-portal-role="PRINCIPAL"],[data-portal-role="TEACHER"],[data-portal-role="STUDENT"]) #topbarPortal{font-size:19px!important}
  body:is([data-portal-role="PRINCIPAL"],[data-portal-role="TEACHER"],[data-portal-role="STUDENT"]) #topbarRoleLabel{font-size:10px!important}
}

/* =====================================================================
   STUDENT HOME — name/class + compact four cards
   ===================================================================== */
body[data-portal-role="STUDENT"][data-portal-module="dashboard"] .page-head{
  margin-bottom:8px!important;
}
body[data-portal-role="STUDENT"][data-portal-module="dashboard"] .page-head h2{
  font-size:clamp(23px,3vw,34px)!important;
  line-height:1.08!important;
  margin:0!important;
}
body[data-portal-role="STUDENT"][data-portal-module="dashboard"] .page-head p{
  margin:2px 0 0!important;
}

/* Numbers occupy the free upper-center part of each KPI card. */
body[data-portal-role="STUDENT"][data-portal-module="dashboard"] .student-dashboard-kpis .kpi-card:not([data-student-next-exam])>b{
  left:42px!important;
  right:6px!important;
  top:13px!important;
  width:auto!important;
  text-align:center!important;
  font-size:28px!important;
  line-height:1!important;
}
body[data-portal-role="STUDENT"][data-portal-module="dashboard"] .student-dashboard-kpis [data-student-next-exam] .kpi-trend{
  top:8px!important;
  right:8px!important;
  max-width:calc(100% - 50px)!important;
  font-size:16px!important;
  line-height:1!important;
  text-align:center!important;
}
body[data-portal-role="STUDENT"][data-portal-module="dashboard"] .student-dashboard-kpis [data-student-next-exam]>b{
  left:42px!important;
  right:6px!important;
  top:45px!important;
  text-align:center!important;
  font-size:22px!important;
  line-height:1.05!important;
}

@media(max-width:1024px){
  body[data-portal-role="STUDENT"][data-portal-module="dashboard"] .page-head h2{font-size:25px!important}
  body[data-portal-role="STUDENT"][data-portal-module="dashboard"] .student-dashboard-kpis .kpi-card:not([data-student-next-exam])>b{
    left:36px!important;right:3px!important;top:10px!important;font-size:24px!important;
  }
  body[data-portal-role="STUDENT"][data-portal-module="dashboard"] .student-dashboard-kpis [data-student-next-exam] .kpi-trend{
    top:7px!important;right:4px!important;max-width:calc(100% - 38px)!important;font-size:14px!important;
  }
  body[data-portal-role="STUDENT"][data-portal-module="dashboard"] .student-dashboard-kpis [data-student-next-exam]>b{
    left:34px!important;right:3px!important;top:43px!important;font-size:18px!important;
  }
}
@media(max-width:560px){
  body[data-portal-role="STUDENT"][data-portal-module="dashboard"] .page-head h2{font-size:23px!important}
  body[data-portal-role="STUDENT"][data-portal-module="dashboard"] .student-dashboard-kpis .kpi-card:not([data-student-next-exam])>b{
    left:31px!important;right:2px!important;top:7px!important;font-size:21px!important;
  }
  body[data-portal-role="STUDENT"][data-portal-module="dashboard"] .student-dashboard-kpis [data-student-next-exam] .kpi-trend{
    top:6px!important;right:3px!important;max-width:calc(100% - 34px)!important;font-size:13px!important;
  }
  body[data-portal-role="STUDENT"][data-portal-module="dashboard"] .student-dashboard-kpis [data-student-next-exam]>b{
    left:29px!important;right:2px!important;top:40px!important;font-size:15.5px!important;
  }
}

/* =====================================================================
   STUDENT MEDAL CARD — Rule control at top and compact fit
   ===================================================================== */
body[data-portal-role="STUDENT"] .medal-race-card--student{
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
}
body[data-portal-role="STUDENT"] .medal-race-card--student .medal-race-head{order:1!important}
body[data-portal-role="STUDENT"] .medal-race-card--student>.medal-rule-details{
  order:2!important;
  margin:0!important;
}
body[data-portal-role="STUDENT"] .medal-race-card--student>.medal-student-position{order:3!important;margin-top:0!important}
body[data-portal-role="STUDENT"] .medal-race-card--student>.medal-stage-message{order:4!important;margin-top:0!important}

/* =====================================================================
   LOGIN MEDAL CONGRATULATIONS — fit viewport; no vertical scroll
   ===================================================================== */
#studentMedalCelebrationR372{
  overflow:hidden!important;
  padding:6px!important;
}
#studentMedalCelebrationR372 .smc372-card{
  max-height:calc(100dvh - 12px)!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
}
#studentMedalCelebrationR372 .smc372-school{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
}
#studentMedalCelebrationR372 .smc372-school:before,
#studentMedalCelebrationR372 .smc372-school:after{display:none!important}
#studentMedalCelebrationR372 .smc372-school-logo{
  width:42px!important;
  height:42px!important;
  object-fit:contain!important;
  padding:2px!important;
  border-radius:8px!important;
  background:#fff!important;
  flex:0 0 auto!important;
}
#studentMedalCelebrationR372 .smc372-performance{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}

@media(max-width:720px){
  #studentMedalCelebrationR372{padding:4px!important}
  #studentMedalCelebrationR372 .smc372-card{
    width:100%!important;
    max-height:calc(100dvh - 8px)!important;
    padding:9px 10px 10px!important;
    border-radius:16px!important;
  }
  #studentMedalCelebrationR372 .smc372-school{margin-bottom:2px!important;font-size:13px!important}
  #studentMedalCelebrationR372 .smc372-school-logo{width:32px!important;height:32px!important}
  #studentMedalCelebrationR372 .smc372-stage{grid-template-columns:34px minmax(0,1fr) 34px!important;gap:4px!important;margin-top:1px!important}
  #studentMedalCelebrationR372 .smc372-trophy,
  #studentMedalCelebrationR372 .smc372-medal{font-size:30px!important}
  #studentMedalCelebrationR372 .smc372-copy h2{font-size:29px!important;line-height:1!important}
  #studentMedalCelebrationR372 .smc372-copy .winner-line{font-size:15px!important;line-height:1.15!important;margin-top:5px!important}
  #studentMedalCelebrationR372 .smc372-copy .subline{font-size:12px!important;margin-top:4px!important}
  #studentMedalCelebrationR372 .smc372-medal-banner{margin-top:7px!important;padding:7px 10px!important;font-size:12px!important}
  #studentMedalCelebrationR372 .smc372-performance{margin-top:8px!important;gap:5px!important;grid-template-columns:repeat(4,minmax(0,1fr))!important}
  #studentMedalCelebrationR372 .smc372-stat{padding:6px 3px!important;border-radius:9px!important}
  #studentMedalCelebrationR372 .smc372-stat strong{font-size:15px!important;line-height:1!important;overflow-wrap:anywhere!important}
  #studentMedalCelebrationR372 .smc372-stat span{font-size:7.5px!important;margin-top:2px!important}
  #studentMedalCelebrationR372 .smc372-actions{margin-top:8px!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important}
  #studentMedalCelebrationR372 .smc372-actions button{width:auto!important;min-height:36px!important;padding:5px 7px!important;font-size:11px!important}
}
@media(max-width:420px){
  #studentMedalCelebrationR372 .smc372-copy h2{font-size:25px!important}
  #studentMedalCelebrationR372 .smc372-copy .winner-line{font-size:13px!important}
  #studentMedalCelebrationR372 .smc372-stage{grid-template-columns:28px minmax(0,1fr) 28px!important}
  #studentMedalCelebrationR372 .smc372-trophy,#studentMedalCelebrationR372 .smc372-medal{font-size:24px!important}
  #studentMedalCelebrationR372 .smc372-stat strong{font-size:13px!important}
  #studentMedalCelebrationR372 .smc372-stat span{font-size:6.5px!important}
}
@media(max-height:650px) and (max-width:720px){
  #studentMedalCelebrationR372 .smc372-school{display:none!important}
  #studentMedalCelebrationR372 .smc372-copy .subline{display:none!important}
  #studentMedalCelebrationR372 .smc372-medal-banner{margin-top:4px!important}
  #studentMedalCelebrationR372 .smc372-performance{margin-top:5px!important}
  #studentMedalCelebrationR372 .smc372-actions{margin-top:5px!important}
}