/*
THESIS: A single premium event credential, not a dashboard of floating cards.
OWN-WORLD: DHL navy, signal yellow, Langkawi teal, clean white records, Outfit typography.
STORY: Identify the participant, surface room and team, present the QR, then show operational details.
FIRST VIEWPORT: Authentic event artwork, centred identity, two quick facts and the QR action.
FORM: Cinematic Center, seed 292; compact horizontal records inside one continuous passport sheet.
*/

#tab-profile{
  --profile-navy:#061b3a;
  --profile-blue:#0754dc;
  --profile-teal:#07998f;
  --profile-yellow:#ffd11a;
  --profile-orange:#ef6b2d;
  --profile-ink:#10233f;
  --profile-muted:#64748a;
  --profile-line:#e6ebf1;
  --profile-ground:#eef3f7;
  background:var(--profile-ground)!important;
  color:var(--profile-ink)!important;
  font-family:'Outfit','Satoshi',sans-serif!important;
  overflow-x:hidden!important;
}

/* Authentic event artwork is a brand surface, not translucent decoration. */
#tab-profile .pv2p-hero{
  position:relative!important;
  isolation:isolate!important;
  flex:none!important;
  min-height:calc(300px + var(--safe-top))!important;
  padding:0!important;
  overflow:hidden!important;
  display:block!important;
  color:#fff!important;
  text-align:center!important;
  background:var(--profile-navy)!important;
}
#tab-profile .pv2p-hero::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-2!important;
  display:block!important;
  background:url('./banner.webp') center 47%/cover no-repeat!important;
  transform:scale(1.025)!important;
}
#tab-profile .pv2p-hero::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  border:0!important;
  border-radius:0!important;
  background:rgba(6,27,58,.82)!important;
  transform:none!important;
}
#tab-profile .pv2p-paint{display:none!important;}
/* Repo owner asked to remove the top strip (event-name label + yellow
   ID-badge icon) and, separately, the star+team badge below the name —
   both hidden rather than deleted from markup so setProfileHero()'s real
   data wiring doesn't need touching. */
#tab-profile .pv2p-topline{display:none!important;}
#tab-profile .pv2p-topline-unused{
  position:absolute!important;
  z-index:3!important;
  top:calc(15px + var(--safe-top))!important;
  left:20px!important;
  right:20px!important;
  width:auto!important;
  min-height:24px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  color:#fff!important;
  font-family:'Outfit',sans-serif!important;
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
#tab-profile .pv2p-topline i{
  width:28px!important;
  height:28px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:8px!important;
  background:var(--profile-yellow)!important;
  color:var(--profile-navy)!important;
  font-size:16px!important;
}
#tab-profile .pv2p-hero h1{
  position:absolute!important;
  z-index:3!important;
  top:calc(51px + var(--safe-top))!important;
  left:0!important;
  width:100%!important;
  margin:0!important;
  color:rgba(255,255,255,.78)!important;
  font-family:'Outfit',sans-serif!important;
  font-size:12px!important;
  font-style:normal!important;
  font-weight:700!important;
  letter-spacing:.12em!important;
  line-height:1!important;
  text-transform:uppercase!important;
  text-shadow:none!important;
  transform:none!important;
}
#tab-profile .pv2p-avatar{
  position:absolute!important;
  z-index:3!important;
  top:calc(77px + var(--safe-top))!important;
  left:50%!important;
  width:94px!important;
  height:94px!important;
  display:grid!important;
  place-items:center!important;
  border:3px solid #fff!important;
  border-radius:50%!important;
  background:var(--profile-blue)!important;
  color:#fff!important;
  box-shadow:0 12px 26px -16px rgba(0,0,0,.72)!important;
  transform:translateX(-50%)!important;
}
#tab-profile .pv2p-avatar::after{display:none!important;}
#tab-profile .pv2p-avatar span{
  font-family:'Outfit',sans-serif!important;
  font-size:31px!important;
  font-weight:800!important;
  letter-spacing:-.03em!important;
  line-height:1!important;
}
#tab-profile .pv2p-hero h2{
  position:absolute!important;
  z-index:3!important;
  left:16px!important;
  right:16px!important;
  bottom:73px!important;
  width:auto!important;
  max-width:22ch!important;
  margin:0 auto!important;
  color:#fff!important;
  font-family:'Outfit',sans-serif!important;
  font-size:25px!important;
  font-style:normal!important;
  font-weight:800!important;
  letter-spacing:-.03em!important;
  line-height:1.05!important;
  text-align:center!important;
  text-wrap:balance!important;
  word-break:normal!important;
  text-shadow:none!important;
  transform:none!important;
}
#tab-profile .pv2p-team{
  position:absolute!important;
  z-index:3!important;
  left:0!important;
  right:0!important;
  bottom:45px!important;
  min-height:22px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  color:#fff!important;
  font-family:'Outfit',sans-serif!important;
  font-size:11px!important;
  font-weight:700!important;
  letter-spacing:.06em!important;
}
#tab-profile .pv2p-team b{color:var(--profile-yellow)!important;font-size:16px!important;}
#tab-profile .pv2p-team .pv2p-icon{width:20px!important;height:20px!important;margin:0!important;box-shadow:none!important;}
#tab-profile .pv2p-event-ribbon{
  position:absolute!important;
  z-index:3!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:30px!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  background:var(--profile-yellow)!important;
  color:var(--profile-navy)!important;
  font-size:9px!important;
  font-weight:800!important;
  letter-spacing:.11em!important;
  white-space:nowrap!important;
}
#tab-profile .pv2p-event-ribbon span{
  display:block!important;
  width:max-content!important;
  animation:profileRibbon 20s linear infinite!important;
}

/* One continuous passport sheet. No glass, nested card pile or decorative borders. */
#tab-profile #profileContent{
  position:relative!important;
  z-index:4!important;
  flex:none!important;
  height:auto!important;
  overflow:hidden!important;
  margin:14px 16px 16px!important;
  padding:0!important;
  display:block!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 18px 42px -28px rgba(6,27,58,.62)!important;
}
/* Simple plain-text line, per repo owner's request to drop the two
   icon-cards ("no need icons here, i want a simpler one") in favour of
   one line: "Room 319 | Team 12". */
#tab-profile .profile-quick-line{
  margin:0!important;
  padding:2px 2px 4px!important;
  color:var(--profile-ink)!important;
  font-size:14px!important;
  font-weight:700!important;
  text-align:center!important;
}

#tab-profile .personal-qr-block{
  position:relative!important;
  width:100%!important;
  min-height:258px!important;
  margin:0!important;
  padding:17px 16px 16px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  border:0!important;
  border-top:1px solid rgba(6,27,58,.12)!important;
  border-radius:0!important;
  background:var(--profile-yellow)!important;
  color:var(--profile-navy)!important;
  box-shadow:none!important;
}
#tab-profile .pv2p-qr-label{
  align-self:center!important;
  margin:0 0 10px!important;
  color:var(--profile-navy)!important;
  font-family:'Outfit',sans-serif!important;
  font-size:16px!important;
  font-weight:800!important;
  letter-spacing:-.02em!important;
  text-align:center!important;
}
#tab-profile .personal-qr-container{
  width:168px!important;
  height:168px!important;
  display:grid!important;
  place-items:center!important;
  padding:11px!important;
  margin:0 auto!important;
  border:0!important;
  border-radius:12px!important;
  background:#fff!important;
  box-shadow:0 8px 18px -12px rgba(6,27,58,.45)!important;
}
#tab-profile .personal-qr-container svg{width:100%!important;height:100%!important;display:block!important;}
/* Only rendered when room_no + registration_counter are both set AND
   hotel_checkin is still false (see showCheckinInstructions in app.js) —
   hides itself again once the participant is actually checked in, since
   there's nothing left to act on at that point. */
#tab-profile .pv2p-qr-instructions{
  margin:12px 0 0!important;
  color:var(--profile-navy)!important;
  font-family:'Inter','Segoe UI',system-ui,sans-serif!important;
  font-size:14px!important;
  font-weight:700!important;
  line-height:1.4!important;
  text-align:center!important;
}
#tab-profile .pv2p-qr-room-line{
  display:inline-block!important;
  margin-bottom:2px!important;
  font-size:21px!important;
}

#tab-profile #profileContent>.profile-band{
  overflow:visible!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-top:1px solid var(--profile-line)!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
}
#tab-profile .profile-band h3{
  min-height:58px!important;
  margin:0!important;
  padding:12px 15px!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  border:0!important;
  background:#fff!important;
  color:var(--profile-ink)!important;
  font-family:'Outfit',sans-serif!important;
  font-size:14px!important;
  font-weight:800!important;
  letter-spacing:-.01em!important;
  text-transform:none!important;
}
#tab-profile .profile-band h3 i{
  width:34px!important;
  height:34px!important;
  display:grid!important;
  place-items:center!important;
  flex:none!important;
  border:0!important;
  border-radius:10px!important;
  color:#fff!important;
  font-size:16px!important;
}
#tab-profile .profile-band-personal h3 i{background:var(--profile-blue)!important;}
#tab-profile .profile-band-gala h3 i{background:#7136dd!important;}
#tab-profile .profile-band-transport h3 i{background:var(--profile-teal)!important;}
#tab-profile .profile-band-hotel h3 i{background:var(--profile-orange)!important;}
#tab-profile .profile-band .info-list{
  margin:0!important;
  padding:0 15px 8px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
}
#tab-profile .profile-band .info-row{
  min-height:54px!important;
  margin:0!important;
  padding:9px 0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  border:0!important;
  border-top:1px solid var(--profile-line)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#tab-profile .profile-band .info-row-stacked{align-items:stretch!important;flex-direction:column!important;gap:8px!important;}
#tab-profile .profile-band .info-label{
  min-width:0!important;
  max-width:50%!important;
  display:inline-flex!important;
  align-items:center!important;
  color:var(--profile-muted)!important;
  font-family:'Inter','Segoe UI',system-ui,sans-serif!important;
  font-size:14px!important;
  font-weight:600!important;
  line-height:1.3!important;
}
#tab-profile .profile-band .info-value{
  min-width:0!important;
  max-width:50%!important;
  color:var(--profile-ink)!important;
  font-family:'Inter','Segoe UI',system-ui,sans-serif!important;
  font-size:15.5px!important;
  font-weight:700!important;
  line-height:1.3!important;
  text-align:right!important;
  overflow-wrap:anywhere!important;
}
#tab-profile .pv2p-icon{
  width:30px!important;
  height:30px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 auto!important;
  margin:0 8px 0 0!important;
  border-radius:9px!important;
  color:#fff!important;
  font-size:14px!important;
  box-shadow:none!important;
  vertical-align:middle!important;
}
/* Plain text + green tick, no pill/highlight box (repo owner's request —
   replaces the old .pv2p-status pill badge). */
#tab-profile .pv2p-plain-status{
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  color:#06684c!important;
  font-family:'Inter','Segoe UI',system-ui,sans-serif!important;
  font-size:15.5px!important;
  font-weight:700!important;
  white-space:nowrap!important;
}
#tab-profile .pv2p-plain-status i{font-size:17px!important;}
#tab-profile .room-members-list{width:100%!important;padding-left:38px!important;}
#tab-profile .room-member-row{color:var(--profile-ink)!important;font-family:'Inter','Segoe UI',system-ui,sans-serif!important;font-size:15.5px!important;font-weight:700!important;}
#tab-profile .gala-locked-zone{border-top:1px solid var(--profile-line)!important;}
#tab-profile .gala-locked-note{margin:0!important;padding:11px 0 13px!important;color:var(--profile-muted)!important;font-family:'Inter','Segoe UI',system-ui,sans-serif!important;font-size:13.5px!important;font-weight:600!important;}

#tab-profile #btnProfileLogout{
  min-height:48px!important;
  margin:0 16px 24px!important;
  width:calc(100% - 32px)!important;
  flex:none!important;
  border:0!important;
  border-radius:12px!important;
  background:var(--profile-navy)!important;
  color:#fff!important;
  box-shadow:0 12px 24px -18px rgba(6,27,58,.72)!important;
  font-family:'Outfit',sans-serif!important;
  font-size:12px!important;
  font-weight:700!important;
  text-transform:none!important;
}
#tab-profile #btnProfileLogout:focus-visible{outline:3px solid var(--profile-yellow)!important;outline-offset:2px!important;}

@media (hover:hover) and (pointer:fine){
  #tab-profile #btnProfileLogout:hover{background:#0c2d59!important;}
}
@media (min-width:720px){
  #tab-profile #profileContent{
    width:min(calc(100% - 48px),760px)!important;
    margin:14px auto 18px!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-flow:dense!important;
  }
  /* Repo owner asked for Hotel stacked BELOW Transport, not side-by-side
     — every card spans the full width, no 2-column split. */
  #tab-profile .profile-quick-card,#tab-profile .personal-qr-block,#tab-profile .profile-band-personal,
  #tab-profile .profile-band-gala,#tab-profile .profile-band-transport,#tab-profile .profile-band-hotel{grid-column:1/-1!important;}
  #tab-profile .profile-band-hotel{border-left:0!important;}
  #tab-profile #btnProfileLogout{width:min(calc(100% - 48px),760px)!important;margin-left:auto!important;margin-right:auto!important;}
}
@media (max-width:359px){
  #tab-profile #profileContent{margin-left:12px!important;margin-right:12px!important;}
  #tab-profile .profile-quick-row{padding-left:12px!important;padding-right:12px!important;}
  #tab-profile .profile-band .info-list{padding-left:12px!important;padding-right:12px!important;}
  #tab-profile .profile-band .info-row{gap:7px!important;}
  #tab-profile .profile-band .info-label{max-width:52%!important;}
  #tab-profile .profile-band .info-value{max-width:48%!important;font-size:14px!important;}
}
@media (prefers-reduced-motion:reduce){
  #tab-profile .pv2p-event-ribbon span{animation:none!important;}
}
@keyframes profileRibbon{to{transform:translateX(-50%)}}

/* Placed last to win the cascade over the earlier .pv2p-team{display:flex}
   rule (equal specificity, both !important — later source wins): repo
   owner asked to remove the star+team badge below the name entirely. */
#tab-profile .pv2p-team{display:none!important;}