/* EDUHUNT R432 — Principal Video Lectures: player-first active view.
   Scope: Principal Portal only. Playback/data/API logic remains unchanged. */

/* Use flex ordering only on the Principal video page. A hidden player consumes no space. */
body[data-portal-role="PRINCIPAL"] .video-library-r167{
  display:flex!important;
  flex-direction:column!important;
}
body[data-portal-role="PRINCIPAL"] .video-library-r167 > .page-head{order:0!important}
body[data-portal-role="PRINCIPAL"] .video-library-r167 > #eduVideoPlayerCard{order:1!important}
body[data-portal-role="PRINCIPAL"] .video-library-r167 > .video-library-toolbar--recipient{order:2!important}
body[data-portal-role="PRINCIPAL"] .video-library-r167 > #videoLibraryGrid{order:3!important}

/* Once a chapter/playlist is opened, remove the chapter/filter area entirely.
   The player becomes the first content block and its playlist/subtopics remain below it. */
body[data-portal-role="PRINCIPAL"] .video-library-r167.is-video-playing > .video-library-toolbar--recipient,
body[data-portal-role="PRINCIPAL"] .video-library-r167.is-video-playing > #videoLibraryGrid{
  display:none!important;
}

/* Legacy/static Principal video path gets the same active behavior. */
body[data-portal-role="PRINCIPAL"] .edu-video-library.is-video-playing > .edu-video-select-row,
body[data-portal-role="PRINCIPAL"] .edu-video-library.is-video-playing > .section-title,
body[data-portal-role="PRINCIPAL"] .edu-video-library.is-video-playing > #eduVideoTopics{
  display:none!important;
}
body[data-portal-role="PRINCIPAL"] .edu-video-library{
  display:flex!important;
  flex-direction:column!important;
}
body[data-portal-role="PRINCIPAL"] .edu-video-library > #eduVideoPlayerCard{order:0!important}
body[data-portal-role="PRINCIPAL"] .edu-video-library > .edu-video-select-row{order:1!important}
body[data-portal-role="PRINCIPAL"] .edu-video-library > .section-title{order:2!important}
body[data-portal-role="PRINCIPAL"] .edu-video-library > #eduVideoTopics{order:3!important}

/* Remove the redundant NOW PLAYING line. Current video information is the H3 title. */
body[data-portal-role="PRINCIPAL"] #eduVideoPlayerCard .edu-video-player-head > span:first-child{
  display:none!important;
}
body[data-portal-role="PRINCIPAL"] #eduVideoPlayerCard .edu-video-player-head{
  display:block!important;
  padding:10px 2px 9px!important;
  margin:0!important;
}
body[data-portal-role="PRINCIPAL"] #eduVideoPlayerCard .edu-video-player-head h3{
  margin:0!important;
  font-size:clamp(16px,2vw,21px)!important;
  line-height:1.3!important;
  font-weight:900!important;
  color:var(--text,#f5f9ff)!important;
  overflow-wrap:anywhere!important;
}
body[data-portal-role="PRINCIPAL"] #eduVideoPlaylistContext:empty{display:none!important}

/* Player sits immediately under the current-video title. */
body[data-portal-role="PRINCIPAL"] #eduVideoPlayerCard{
  margin-top:0!important;
  padding-top:0!important;
}
body[data-portal-role="PRINCIPAL"] #eduVideoFrame{
  position:relative!important;
  overflow:hidden!important;
  width:100%!important;
}

/* R438: remove the added EduHunt watermark overlay.
   Keep the video player and native player controls unobstructed. */
body[data-portal-role="PRINCIPAL"] #eduVideoFrame::after{
  content:none!important;
  display:none!important;
}

/* Playlist rows are the subtopics. Keep them directly below the player. */
body[data-portal-role="PRINCIPAL"] #eduVideoPlaylistRows{
  display:grid!important;
  gap:8px!important;
  margin-top:12px!important;
}
body[data-portal-role="PRINCIPAL"] #eduVideoPlaylistRows .edu-video-list-row{
  width:100%!important;
}

@media(max-width:1024px){
  body[data-portal-role="PRINCIPAL"] #eduVideoPlayerCard .edu-video-player-head{
    padding:8px 0 8px!important;
  }
  body[data-portal-role="PRINCIPAL"] #eduVideoPlayerCard .edu-video-player-head h3{
    font-size:16px!important;
  }
}

@media(max-width:520px){
  body[data-portal-role="PRINCIPAL"] #eduVideoPlaylistRows{
    gap:7px!important;
    margin-top:10px!important;
  }
}