/* =========================================================
   EDUHUNT V2.1.16 — SIX PORTALS APP NAV + READABILITY
   Additive UI layer. Mobile/tablet bottom navigation for every role,
   branch identity emphasis and carefully scaled portal typography.
   Desktop business logic and all backend workflows remain unchanged.
========================================================= */

/* ---------- Branch-bound portal identity ---------- */
.role-school-banner{
  margin:0 0 22px;
  padding:25px 24px 21px;
  text-align:center;
  border:1px solid #c8daec;
  border-top:5px solid #0b5b96;
  border-radius:16px;
  background:linear-gradient(135deg,#fbfdff,#edf6ff);
  box-shadow:0 6px 20px rgba(11,77,134,.08);
}
.role-school-name{
  color:#063f70;
  font-size:clamp(29px,2.6vw,42px);
  font-weight:950;
  line-height:1.16;
  letter-spacing:.15px;
  text-transform:uppercase;
}
.role-school-address{
  margin-top:15px;
  color:#314e6b;
  font-size:16px;
  font-weight:800;
  line-height:1.7;
}
.role-school-caption{
  margin-top:16px;
  padding-top:13px;
  border-top:1px solid #c6d8e9;
  color:#102e4a;
  font-size:15px;
  font-weight:900;
}
.role-school-caption span{margin-left:8px;color:#65798d;font-weight:700}

/* The Principal banner already existed. Increase its vertical breathing room. */
.principal-school-banner{padding-top:29px!important;padding-bottom:25px!important}
.principal-school-address{margin-top:16px!important;line-height:1.75!important;font-size:16px!important}
.principal-school-caption{margin-top:17px!important;padding-top:14px!important}

/* ---------- Desktop readability: approximately +6 px ---------- */
@media screen and (min-width:1025px){
  body[data-portal-role] .content{font-size:21px}
  body[data-portal-role] .topbar-title h1{font-size:29px}
  body[data-portal-role] .topbar-title>span{font-size:14px}
  body[data-portal-role] .account-copy strong{font-size:16px}
  body[data-portal-role] .account-copy small{font-size:13px}
  body[data-portal-role] .page-head h2{font-size:clamp(31px,3vw,39px)}
  body[data-portal-role] .page-head p{font-size:18px;line-height:1.55}
  body[data-portal-role] .card-head h3{font-size:23px}
  body[data-portal-role] .card-head p{font-size:17px}
  body[data-portal-role] .section-title{font-size:17px}
  body[data-portal-role] .kpi-card b{font-size:33px}
  body[data-portal-role] .kpi-card>span{font-size:16px}
  body[data-portal-role] .quick-card strong{font-size:18px}
  body[data-portal-role] .quick-card small{font-size:15px}
  body[data-portal-role] .programme-card strong{font-size:17px}
  body[data-portal-role] .programme-card span{font-size:15px}
  body[data-portal-role] .programme-card b{font-size:19px}
  body[data-portal-role] .form-field>label,
  body[data-portal-role] .form-field>.label,
  body[data-portal-role] .field>span:first-child{font-size:17px}
  body[data-portal-role] input,
  body[data-portal-role] select,
  body[data-portal-role] textarea{font-size:17px}
  body[data-portal-role] .button{font-size:17px}
  body[data-portal-role] .button--small{font-size:15px}
  body[data-portal-role] .notice{font-size:17px}
  body[data-portal-role] .table-toolbar strong{font-size:18px}
  body[data-portal-role] .table-toolbar small{font-size:14px}
  body[data-portal-role] table{font-size:16px}
  body[data-portal-role] th{font-size:14px}
  body[data-portal-role] td{font-size:16px}
  body[data-portal-role] .cell-secondary{font-size:13px}
  body[data-portal-role] .nav-link,
  body[data-portal-role] .sidebar-link{font-size:15px}
  body[data-portal-role] .nav-group{font-size:11px}
  body[data-portal-role] .sidebar-identity strong{font-size:15px}
  body[data-portal-role] .sidebar-identity span{font-size:13px}
}

/* ---------- Universal app bottom navigation ---------- */
.role-bottom-nav{display:none}

@media screen and (max-width:1024px){
  /* Approximately +3 px throughout app views. */
  body[data-portal-role] .content{font-size:18px;padding-bottom:112px!important}
  body[data-portal-role] .topbar-title h1{font-size:22px!important}
  body[data-portal-role] .page-head h2{font-size:28px!important;line-height:1.15}
  body[data-portal-role] .page-head p{font-size:16px!important;line-height:1.5}
  body[data-portal-role] .card-head h3{font-size:21px!important}
  body[data-portal-role] .card-head p{font-size:15px!important}
  body[data-portal-role] .section-title{font-size:15px!important}
  body[data-portal-role] .kpi-card b{font-size:28px!important}
  body[data-portal-role] .kpi-card>span{font-size:14px!important}
  body[data-portal-role] .quick-card strong{font-size:16px!important;line-height:1.3}
  body[data-portal-role] .quick-card small{font-size:13px!important;line-height:1.45}
  body[data-portal-role] .form-field>label,
  body[data-portal-role] .form-field>.label{font-size:15px!important}
  body[data-portal-role] input,
  body[data-portal-role] select,
  body[data-portal-role] textarea{font-size:16px!important}
  body[data-portal-role] .button{font-size:15px!important}
  body[data-portal-role] .notice{font-size:15px!important;line-height:1.5}
  body[data-portal-role] table{font-size:14px!important}
  body[data-portal-role] th{font-size:13px!important}
  body[data-portal-role] td{font-size:14px!important}

  /* Teacher and Student branch identity, app-style dark. */
  .role-school-banner{
    margin:0 0 16px;
    padding:21px 15px 18px;
    border:1px solid #1d5875;
    border-top:4px solid var(--ehm-accent,#35e0d2);
    border-radius:0 0 18px 18px;
    background:
      radial-gradient(circle at 90% 10%,rgba(var(--ehm-accent-rgb,53,224,210),.13),transparent 34%),
      linear-gradient(145deg,#05172a,#073345);
    box-shadow:none;
  }
  .role-school-name{color:#fff;font-size:27px;line-height:1.18}
  .role-school-address{margin-top:12px;color:#acd0e4;font-size:14px;line-height:1.55}
  .role-school-caption{margin-top:13px;padding-top:11px;border-color:#285d75;color:#e8f7ff;font-size:13px}
  .role-school-caption span{display:block;margin:4px 0 0;color:#87adc3}

  /* Non-Principal portals use a fixed 6-button app bar. */
  body[data-portal-role]:not([data-portal-role="PRINCIPAL"]) .role-bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:1200;
    height:calc(84px + env(safe-area-inset-bottom));
    padding:7px 5px max(9px,env(safe-area-inset-bottom));
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:1px;
    border-top:1px solid #173b55;
    background:rgba(2,14,28,.985);
    box-shadow:0 -12px 38px rgba(0,0,0,.38);
    backdrop-filter:blur(18px);
  }
  .role-bottom-nav button{
    position:relative;
    min-width:0;
    padding:4px 2px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    border:0;
    background:transparent;
    color:#91a9c1;
    font-weight:900;
    cursor:pointer;
  }
  .role-bottom-nav button i{font-style:normal;font-size:23px;line-height:1;filter:saturate(1.25)}
  .role-bottom-nav button span{max-width:100%;overflow:hidden;font-size:10px;line-height:1.05;text-align:center;text-overflow:ellipsis;white-space:nowrap}
  .role-bottom-nav button.active{color:var(--ehm-accent,#35e0d2)}
  .role-bottom-nav button.active::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:31px;
    height:4px;
    transform:translateX(-50%);
    border-radius:5px;
    background:var(--ehm-accent,#35e0d2);
    box-shadow:0 0 13px rgba(var(--ehm-accent-rgb,53,224,210),.55);
  }
  .role-bottom-nav .role-bottom-logout{color:#ff7f98}

  /* Role-specific cheerful icon colours. */
  .role-bottom-nav button:nth-child(1){color:#65d8ff}
  .role-bottom-nav button:nth-child(2){color:#62f0c9}
  .role-bottom-nav button:nth-child(3){color:#ffbc5c}
  .role-bottom-nav button:nth-child(4){color:#c1a5ff}
  .role-bottom-nav button:nth-child(5){color:#5be5e3}
  .role-bottom-nav button:nth-child(6){color:#ff7894}
  .role-bottom-nav button.active{filter:brightness(1.18)}

  /* Principal: same app bar, now with mandatory Logout as sixth button. */
  body[data-portal-role="PRINCIPAL"] .principal-bottom-nav{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    height:calc(84px + env(safe-area-inset-bottom))!important;
    min-height:84px!important;
  }
  body[data-portal-role="PRINCIPAL"] .content{
    bottom:calc(84px + env(safe-area-inset-bottom))!important;
  }
  body[data-portal-role="PRINCIPAL"] .principal-bottom-nav button:nth-child(1){color:#ffd34f!important}
  body[data-portal-role="PRINCIPAL"] .principal-bottom-nav button:nth-child(2){color:#5ee9ff!important}
  body[data-portal-role="PRINCIPAL"] .principal-bottom-nav button:nth-child(3){color:#ff9566!important}
  body[data-portal-role="PRINCIPAL"] .principal-bottom-nav button:nth-child(4){color:#c8a6ff!important}
  body[data-portal-role="PRINCIPAL"] .principal-bottom-nav button:nth-child(5){color:#60f0c9!important}
  body[data-portal-role="PRINCIPAL"] .principal-bottom-nav button:nth-child(6){color:#ff7894!important}
  body[data-portal-role="PRINCIPAL"] .principal-bottom-nav button span{font-size:9px!important}

  /* Student identity: full name is the dashboard title, no greeting. */
  body[data-portal-role="STUDENT"] .page-head h2{
    color:#fff!important;
    font-size:30px!important;
    font-weight:950!important;
    letter-spacing:-.025em;
  }
  body[data-portal-role="STUDENT"] .page-head p{color:#61e4d8!important;font-weight:900}

  /* Make assignment, pattern and OMR cards clearly tappable in student/teacher apps. */
  body[data-portal-role="STUDENT"] .quick-card,
  body[data-portal-role="TEACHER"] .quick-card{
    border-color:#315a75!important;
    background:#0b2842!important;
  }
  body[data-portal-role="STUDENT"] .quick-card:active,
  body[data-portal-role="TEACHER"] .quick-card:active{transform:scale(.985)}
}

@media screen and (max-width:620px){
  .role-school-name{font-size:23px}
  .role-school-address{font-size:12px}
  .role-bottom-nav button i{font-size:21px}
  .role-bottom-nav button span{font-size:9px}
  body[data-portal-role] .content{padding-bottom:108px!important}
}

/* Never print app navigation or interactive app-only identity chrome. */
@media print{
  .role-bottom-nav,.principal-bottom-nav{display:none!important}
  .role-school-banner{background:#fff!important;border:0!important;border-bottom:2px solid #0b4d86!important;box-shadow:none!important}
  .role-school-name{color:#0b4d86!important}
  .role-school-address,.role-school-caption{color:#000!important}
}