/* =========================================================
   EDUHUNT V2.1.18 — COMPACT TOPBAR / SCHOOL CONTEXT REPAIR
   Scope:
   - All six portals: compact Refresh + Profile at top-right.
   - Logout lives only at the bottom of My Profile.
   - Dashboard body-level Refresh button removed in app.js.
   - Principal: authenticated school name is visible at the very top.
   - No backend, permission, upload or report logic changed.
========================================================= */

/* Keep one clear Profile entry point; sidebar logout remains hidden. */
#sidebarLogout{display:none!important}
.profile-logout-card{margin-top:14px!important;display:flex!important;justify-content:flex-end!important}
.profile-logout-button{min-width:160px!important}

/* Desktop already had the correct top-right controls; make them a little clearer. */
#globalRefresh,
#accountButton{
  flex:0 0 auto;
}
#globalRefresh{cursor:pointer}
#accountButton{cursor:pointer}

/* The authenticated school name is the portal context for Principal/Teacher/Student. */
body[data-portal-role="PRINCIPAL"] #topbarPortal,
body[data-portal-role="TEACHER"] #topbarPortal,
body[data-portal-role="STUDENT"] #topbarPortal{
  color:#0875d1;
  font-weight:900;
}

@media screen and (max-width:1024px){
  :root{--topbar-height:76px}

  .topbar{
    min-height:76px!important;
    height:76px!important;
    padding:8px 10px!important;
    gap:9px!important;
  }

  .topbar-title{
    flex:1 1 auto!important;
    min-width:0!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
  }

  /* School / portal context is intentionally visible on mobile/tablet. */
  .topbar-title>span{
    display:block!important;
    max-width:100%!important;
    margin:0 0 2px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    color:#4de0d5!important;
    font-size:10px!important;
    line-height:1.15!important;
    font-weight:900!important;
    letter-spacing:.035em!important;
    text-transform:uppercase!important;
  }
  .topbar-title h1{
    margin:0!important;
    font-size:18px!important;
    line-height:1.16!important;
    font-weight:900!important;
  }

  /* Principal school name is important enough to be slightly larger. */
  body[data-portal-role="PRINCIPAL"] .topbar-title>span{
    font-size:14px!important;
    color:#ffffff!important;
    letter-spacing:.02em!important;
  }

  .topbar-actions{
    margin-left:auto!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    flex:0 0 auto!important;
  }

  /* Only Refresh + Profile are shown in the compact app header. */
  #notificationButton{display:none!important}
  #globalRefresh,
  #accountButton{
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    min-height:42px!important;
    margin:0!important;
    padding:0!important;
    border:1px solid #315a78!important;
    border-radius:12px!important;
    background:#0c2945!important;
    color:#f6fbff!important;
    box-shadow:0 4px 14px rgba(0,0,0,.14)!important;
  }
  #globalRefresh:hover,
  #accountButton:hover{
    background:#123858!important;
    border-color:#50c8d7!important;
  }
  #globalRefresh:active,
  #accountButton:active{transform:scale(.97)}

  #globalRefresh svg{
    width:21px!important;
    height:21px!important;
    color:#ffffff!important;
    stroke:#ffffff!important;
  }
  #globalRefresh .topbar-button-label,
  #accountButton .account-copy{display:none!important}

  #topbarAvatar{
    width:31px!important;
    height:31px!important;
    display:grid!important;
    place-items:center!important;
    padding:0!important;
    border:0!important;
    border-radius:9px!important;
    background:linear-gradient(135deg,#21a7ff,#7468ff)!important;
    color:#fff!important;
    font-size:18px!important;
    line-height:1!important;
  }

  /* No large duplicate page refresh control should consume mobile space. */
  .page-head .page-actions [data-command="refresh"]{display:none!important}

  .profile-logout-card{
    margin:10px 0 0!important;
    padding:10px!important;
  }
  .profile-logout-button{
    width:100%!important;
    min-height:46px!important;
  }
}

@media screen and (max-width:560px){
  :root{--topbar-height:72px}
  .topbar{height:72px!important;min-height:72px!important;padding:7px 8px!important}
  .topbar-title>span{font-size:9px!important}
  body[data-portal-role="PRINCIPAL"] .topbar-title>span{font-size:13px!important}
  .topbar-title h1{font-size:17px!important}
  #globalRefresh,#accountButton{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;border-radius:11px!important}
  #topbarAvatar{width:29px!important;height:29px!important;font-size:17px!important}
}