/* JPS Player overrides — fix legacy CSS clashes with video.js 8 + YouTube-like sticky top
 * Loaded AFTER gbajps.css and video-js.min.css so these rules win.
 */

/* === Login form: Turnstile alignment === */
/* Turnstile widget is 300px wide and renders inside .gba-input-group without the
   .gba-label + .gba-input-control 2-column structure → it sticks out left.
   Center the row so the widget sits visually between the input fields above and the login button below. */
.gba-input-group:has(> .cf-turnstile) {
    display: flex;
    justify-content: center;
    padding: 8px 0;
}
.cf-turnstile {
    display: block;
}

/* === video.js 8 layered architecture restoration === */
/* gbajps.css L1046 sets .vjs-tech { position: relative } for old viblast/video.js 5.
   video.js 8 default skin requires absolute so the control bar can overlay correctly. */
.video-js .vjs-tech {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Force control bar visible regardless of vjs-has-started state.
   Otherwise when autoplay is blocked, control bar stays display:none until first user-initiated play. */
.video-js .vjs-control-bar {
    display: flex !important;
}
.video-js.vjs-paused .vjs-control-bar,
.video-js .vjs-control-bar {
    visibility: visible;
    opacity: 1;
}

/* Make sure progress bar shows even before play */
.video-js.vjs-paused.vjs-user-inactive .vjs-control-bar {
    opacity: 1;
}

/* === Force play/pause icon swap from PLAYER ROOT class ===
   Built-in selector `.video-js .vjs-play-control.vjs-playing ...` requires the BUTTON
   itself to have vjs-playing class. With overrideNative=true VHS may not propagate this
   to the button reliably — duplicate the rule keyed on the player root, which always
   gets vjs-playing/vjs-paused. */
.video-js.vjs-playing .vjs-play-control .vjs-icon-placeholder:before {
    content: "\f103" !important;  /* pause glyph */
}
.video-js.vjs-paused .vjs-play-control .vjs-icon-placeholder:before {
    content: "\f101" !important;  /* play glyph */
}
.video-js.vjs-ended .vjs-play-control .vjs-icon-placeholder:before {
    content: "\f105" !important;  /* replay glyph */
}

/* === Quality selector dropdown: ordering done via JS (jps-player.js#reorderQualityMenu)
   to put highest-resolution first and keep Auto pinned to the bottom (YouTube layout). */

/* === Top alignment: player area vs right 現正播放 table ===
   Player col has style="padding:0" inline, table col has Bootstrap default padding (~15px top).
   → player ends up higher than table. Force player col to match table top padding. */
.player-info-zone {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.player-info-zone > div {
    float: none !important;  /* override Bootstrap col floats so flex works */
}
/* Match top of player + table — both start at the same Y offset within the zone */
.player-info-zone > div:first-child {
    padding-top: 30px !important;  /* override inline style="padding:0", match table top */
}
/* Player container's wrapping img background pushes player down — remove */
.player-info-zone .player-area > .tv > img,
.player-info-zone .player-area > div.tv > img {
    display: none;
}

/* === Play button — enlarge glyph + compensate for downward baseline shift.
   font-size:2em scales the icon but pushes it ~30px below ⏪ ⏩ baseline;
   translateY(-30px) physically pulls it back up. (vertical-align/line-height tricks
   didn't work — only the transform did.) */
.video-js .vjs-play-control .vjs-icon-placeholder {
    font-size: 2em !important;
    transform: translateY(-30px) !important;
}

/* === Bring ⏪ ⏸ ⏩ closer together — tighten skip button width === */
.video-js .vjs-jps-skip {
    width: 3em !important;
    flex: 0 0 3em !important;
    padding: 0 !important;
}
/* Skip buttons — vertically center the glyphicon (default line-height: 3em sits at bottom) */
.video-js .vjs-jps-skip {
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.video-js .vjs-jps-skip .glyphicons {
    line-height: 1;
    color: #fff;
    font-size: 1.4em;
    display: inline-block;
}

/* === YouTube-like sticky player + info-table === */
/* Player area + score-table row stays at top of viewport while the bottom paginated work list scrolls.
   .content has overflow:hidden in legacy CSS which kills `position: sticky` for any descendant —
   override it. Also clear ancestors that might reintroduce overflow clipping. */
.content,
.work-judge-table-list,
.work-judge-table-list > div,
.gba-center {
    overflow: visible !important;
}

/* Layout reality: the page has THREE .row siblings inside .content:
   1. .row.note-area (lastScoreInfo)
   2. .row containing player + 現正播放 info table  ← sticky target
   3. .row containing the long paginated work list  ← scrolls past
   Apply sticky to the player row. Its containing block is .content (covers all 3 rows),
   so the sticky element has scroll-range = entire content height. */
.content > .row:has(.player-info-zone) {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 50;
    background: #4a4a4a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
/* Bootstrap floats inside .work-judge-table-list collapse parent height to 0;
   flow-root creates a new BFC so the row knows its real height. */
.content > .row:has(.player-info-zone) > .col-lg-12,
.content > .row:has(.player-info-zone) .work-judge-table-list {
    display: flow-root;
}

/* === Bottom work-list table header: freeze below the sticky player row === */
/* Three blockers found:
   1. `position: sticky` on a `<tr>` isn't honored by most browsers (table-row layout) →
      apply sticky on each `<th>` directly.
   2. `.table-div` wrapping the table has `overflow: hidden` → kills sticky for descendants.
   3. `<table>` defaults to `border-collapse: collapse` which prevents sticky on cells in
      Chrome/Safari → switch to `separate` and use `border-spacing: 0` to keep visual.
   --jps-player-row-h is set by JS in jps-player.js based on the player row's actual height. */
.rwd-table-a-wrap-fix .table-div,
.work-judge-table-list .table-div {
    overflow: visible !important;
}
.rwd-table-a {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}
/* 2026-05-27：dialog 內的 rwd-table-a 也用同 class（如 cvDlg 新人獎表），
   排除 .rwd-table-dialog 避免 sticky 跑到 460px 卡在 dialog 中間。 */
.rwd-table-a:not(.rwd-table-dialog) > tbody > tr:first-child > th,
.rwd-table-a:not(.rwd-table-dialog) > tr:first-child > th {
    position: sticky;
    top: var(--jps-player-row-h, 460px);
    z-index: 40;
    background: #c9a967;
    color: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

/* The "現正播放" panel on the right side — make it scrollable internally if work has many applicants
   so the sticky block doesn't grow taller than viewport. */
.work-judge-table .player-table-info {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* === Player container size adjustments ===
   Legacy CSS positioned .video-area { position: absolute; top: 0; left: 0 } which assumed the
   parent had a fixed height. With v8 player & sticky layout we use natural flow instead. */
#entirePage .video-area {
    position: relative !important;
    top: auto !important;
    left: auto !important;
}

/* Ensure player keeps its 16:9 ratio responsively (overrides hard-coded width=760/height=427) */
.video-area .video-js {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    max-height: 50vh;
}

/* === Bottom work list spacing === */
/* Push paginated work list down a bit so it doesn't slide under the sticky header on initial load */
.work-judge-table-list > .pagination-list,
.work-judge-table-list h\:panelGroup {
    margin-top: 8px;
}

/* =========================================================================
 * 2026-05-28: jps work-list table 各欄寬度公版
 *
 * 數據來源 gba61jpstest DB 量測（73 prizes、3000+ applicants）：
 *   流水號 7-9 chars 固定 / 報名獎項 max 20 chars / 參賽者 max 116 chars
 *   集別 廣播=3 全部, 電視 max=10 (動畫獎/迷你劇集) / 附件 max ~5 icons
 *
 * 一套寬度通吃廣播+電視。table-layout 維持 auto（避免影響到其他細部 layout）,
 * 用 width hint + max-width + word-break 控制。
 *
 * Header sort 三角已存在於 .title / .serial_num / .td-contestant / .quantity 四欄,
 * white-space:nowrap 確保「報名獎項 ▼」「參賽者 ▼」不會折行。
 * mobile（max-width:767）的 display:block 排版維持原樣不動。
 * ========================================================================= */
@media only screen and (min-width: 768px) {
  /* table-layout: auto + min-width 強制 → 短內容也撐到該欄該有的寬度，
   * 長內容（如 116 字公司聯名）才會 wrap。比 fixed 對 title flex 友善。*/
  .work-judge-table-list .rwd-table-a {
    width: 100%;
  }
  .work-judge-table-list .rwd-table-a > tbody > tr.mobile-style > th,
  .work-judge-table-list .rwd-table-a > tr.mobile-style > th {
    white-space: nowrap;
  }
  /* 中文無空白靠 overflow-wrap 斷字 */
  .work-judge-table-list .rwd-table-a td {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  /* 作品名稱：flex 主欄，吃剩餘空間 */
  .work-judge-table-list .rwd-table-a th.title,
  .work-judge-table-list .rwd-table-a td.td-title {
    min-width: 200px;
    max-width: 350px;
  }
  /* 流水號：9 字固定 */
  .work-judge-table-list .rwd-table-a th.serial_num,
  .work-judge-table-list .rwd-table-a td.td-serial_num {
    width: 90px;
    min-width: 90px;
  }
  /* 報名獎項：廣播 max 20 字 */
  .work-judge-table-list .rwd-table-a th.td-prize,
  .work-judge-table-list .rwd-table-a td.td-prizes {
    width: 180px;
    min-width: 180px;
  }
  /* 參賽者：固定 220 不論內容長短，max 116 字多公司聯名 wrap 多行 */
  .work-judge-table-list .rwd-table-a th.td-contestant,
  .work-judge-table-list .rwd-table-a td.td-contestant {
    width: 220px;
    min-width: 220px;
    max-width: 220px;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  /* 參賽附件：D01 戲劇新人 max 5 icons / D05 主題歌曲 icons + text */
  .work-judge-table-list .rwd-table-a th.td-attachment,
  .work-judge-table-list .rwd-table-a td.td-attachment {
    width: 200px;
    min-width: 200px;
  }
  /* 參賽集別：電視 max 10 集（動畫獎） */
  .work-judge-table-list .rwd-table-a th.td-num,
  .work-judge-table-list .rwd-table-a td.td-video {
    width: 240px;
    min-width: 240px;
  }
  /* 資格審/分數：下拉 */
  .work-judge-table-list .rwd-table-a th.quantity:not(.remark),
  .work-judge-table-list .rwd-table-a td.td-quantity {
    width: 120px;
    min-width: 120px;
  }
  /* 備註：1 按鈕 + 「備註」二字 header */
  .work-judge-table-list .rwd-table-a th.quantity.remark,
  .work-judge-table-list .rwd-table-a td.td-top {
    width: 60px;
    min-width: 60px;
  }
}

/* =========================================================================
 * 2026-05-28: Issue 1 — 主題歌曲類「片頭曲/片尾曲/插曲: NAME」換行到 icons 下方
 *
 * .icon-list 預設 flex-wrap: nowrap（gbajps.css L1306），<br/> 在 flex 中無效。
 * 把 nowrap 改 wrap、theme-song-line 用 flex-basis: 100% 強制獨佔一行。
 * ========================================================================= */
.work-judge-table-list .icon-list {
  flex-wrap: wrap !important;
}
.work-judge-table-list .icon-list .theme-song-line {
  flex-basis: 100%;
  margin-top: 4px;
  font-size: 13px;
  color: #555;
  text-align: center;
}

/* =========================================================================
 * 2026-05-28: Issue 3 — picDlg 拿掉 dialog 內白框 + image 等比例縮放
 *
 * 原本 .ui-dialog-content padding: 16px 在深色背景上呈現 16px 邊距，加 scrollPanel
 * 內嵌 width:600 (vs dialog 700) 又留 100px 白邊。padding 改 0 + scrollPanel
 * 取消 fixed 寬高（已在 xhtml 移除 inline style）→ image 100% 撐滿。
 * ========================================================================= */
.ui-dialog[id*="picDlgId"] .ui-dialog-content {
  padding: 0 !important;
}
.ui-dialog[id*="picDlgId"] .ui-scrollpanel,
.ui-dialog[id*="picDlgId"] .ui-scrollpanel-container,
.ui-dialog[id*="picDlgId"] .ui-scrollpanel-content {
  width: 100% !important;
  height: auto !important;
  max-height: 72vh !important;
  background: transparent !important;
}
.ui-dialog[id*="picDlgId"] .row,
.ui-dialog[id*="picDlgId"] .row > div {
  padding: 0 !important;
  margin: 0 !important;
}
/* 2026-05-28 補：jps-dialog-redesign.css L849 留了 spinner ::before pseudo-element
 * 預設一直轉。原設計是「img 蓋住 spinner」，但多張圖之間 gap 露出 spinner（user
 * 截圖那個橘色圈圈）。改用 :has(img) 偵測到 DOM 有 img 就藏 spinner。 */
.ui-dialog[id*="picDlgId"] .ui-scrollpanel-content:has(img)::before,
.ui-dialog[id*="picDlgId"] .ui-dialog-content > .row > div:has(img)::before {
  display: none !important;
}

/* =========================================================================
 * 2026-05-28: Issue 4 — workDlg「節目企畫及內容說明：」section 跑版修正
 *
 * 該 section 結構是 <div class="gba-input-group">[label][content]</div>，外層
 * .ui-dialog .gba-input-group 預設 display: grid 2 col。短 content（如 podcast
 * 780-0060「結合歷史…」30 字）會塞在 col 2 留大量白邊，視覺像跑版。
 *
 * 用 :has() 偵測「group 含 section-heading 標籤（inline style color:#3379b8）」→
 * 改成 display: block，標題在上、內容在下、全寬。長 content 同樣全寬，視覺一致。
 * ========================================================================= */
.ui-dialog[id*="workDlgId"] .gba-input-group:has(> [style*="color:#3379b8"]),
.ui-dialog[id*="workDlgId"] .gba-input-group:has(> [style*="color: #3379b8"]) {
  display: block !important;
}