/* Version 29: main-ribbon alignment and login photo framing, frontend only. */
body #topbar{
 display:flex!important;align-items:center!important;justify-content:flex-start!important;
 flex-wrap:nowrap!important;column-gap:12px!important;min-height:70px!important;
 padding:9px 17px!important;box-sizing:border-box;
}
body #topbar .college-ribbon-title{
 display:flex!important;flex-direction:column;justify-content:center;
 min-width:0;flex:1 1 auto;margin:0!important;
 text-align:left!important;font:800 clamp(12px,1.18vw,17px)/1.28 'Segoe UI',Arial,sans-serif!important;
 letter-spacing:-.12px;color:#0b315f!important;
}
body #topbar .college-ribbon-title::after{
 content:'Postgraduate Student E-Logbook';display:block;
 text-align:left!important;margin:3px 0 0!important;font:500 12px/1.25 'Segoe UI',Arial,sans-serif!important;
 color:#4b6886!important;
}
body #topbar #logbookIdentity{
 display:flex!important;align-items:center!important;justify-content:flex-end;flex:0 1 auto;
 min-width:0;max-width:290px;margin:0!important;white-space:normal;
}
body #topbar #logbookIdentity .account-avatar{width:36px;height:36px;flex-shrink:0;object-fit:cover}
body #topbar #logbookIdentity strong{font-size:12px;line-height:1.15}
body #topbar #logbookIdentity small{font-size:10px;line-height:1.25}
body #topbar #logbookMenu{flex:0 0 auto;margin:0!important;align-self:center!important}
body #topbar #logbookMenu>summary{
 display:grid!important;place-items:center!important;width:36px!important;height:36px!important;
 border:1px solid #c9ddee!important;border-radius:50%!important;
 background:#eff6fc!important;color:#0d4777!important;font:700 24px/1 Arial,sans-serif!important;
 padding:0!important;box-shadow:none!important;transition:background .2s;
}
body #topbar #logbookMenu>summary:hover{background:#dceffc!important}
body #topbar #sidebarToggle{flex-shrink:0}
body #topbar #whoBadge,body #topbar #statusMsg{display:none!important}
/* Preserve the exact approved college banner, but show more of the lower buildings
   by moving the painted photo up within its allotted frame. */
#loginScreen .v25-campus-header{
 background-image:url("assets/college-campus-framed-v29.webp")!important;
 background-position:center 50%!important;
 background-size:cover!important;
}
#loginScreen .v25-campus-header::before{
 background:radial-gradient(ellipse at 50% 42%,#ffffff 4%,#fffffff2 36%,#ffffffe0 57%,#ffffff00 85%)!important;
 inset:108px 13% 44px!important;
}
#loginScreen .v25-college-name,
#loginScreen .v25-programme-title,
#loginScreen .v25-programme-subtitle{
 text-shadow:0 0 8px #fff,0 0 22px #fff,0 1px 2px white!important;
}
@media(max-width:900px){
 body #topbar{gap:7px!important;padding:9px 10px!important}
 body #topbar .college-ribbon-title{font-size:12px!important}
 body #topbar #logbookIdentity{max-width:145px}
 body #topbar #logbookIdentity small{display:none}
 #loginScreen .v25-campus-header{background-size:cover!important;background-position:center 61%!important}
}
@media(max-width:550px){
 body #topbar #logbookIdentity{max-width:98px}
 body #topbar #logbookIdentity .account-avatar{display:none!important}
 body #topbar .college-ribbon-title{font-size:11px!important}
 body #topbar .college-ribbon-title::after{font-size:10px!important}
}