/* 音樂音效排程（page21）
   選擇器一律帶 .audioscd- 前綴避免污染全域；顏色一律走 CSS 變數，不寫死色碼。 */

.audioscd-wrapper {
  /* 甘特左欄寬度。橫幅文字的 sticky 定位要靠它避開左欄，
     兩處各寫死一次遲早對不上，故集中在這裡。 */
  --audioscd-name-w: 260px;

  /* 四種項目類型的色彩對應。==圖例、bar、明細色條、JS 動態漸層全部引用這四個變數==，
     不得在任何一處另外寫死顏色——混色 bar 的漸層由 JS 依實際內容組出來，
     顏色若在 CSS 與 JS 各定義一份，改色時必然漏掉一邊。 */
  --audioscd-c-music: var(--brand-teal);
  --audioscd-c-sfx: var(--warning);
  --audioscd-c-cv: var(--success);
  --audioscd-c-other: var(--text-muted);
}

.audioscd-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 400;
}

.audioscd-updating {
  color: var(--warning);
  font-weight: 600;
}

#audioScdStatus.error {
  color: var(--error);
}

/* ── 篩選列 ── */

/* 篩選列的度量一律對齊「遊戲分析」（templates/pages/epic_analytics.html
   ＋ static/css/pages/epic_analytics.css 的 .epicana-selector-row）：
   兩頁的「是否 Release / Provider」並排在使用者的心智裡是同一組控制項，
   高度或間距只要差一點就會看起來像沒對齊。故此處刻意照抄它的：
   row padding 16px 24px 12px、gap 24px、label 為一般 inline 標籤
   ＋ select `display:block; margin-top:4px; width:130px`。
   ==改這裡之前先去量遊戲分析的實際值==，不要憑印象調。 */

.audioscd-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 24px;
  padding: 16px 24px 12px;
}

.audioscd-filter-item .input-ui {
  display: block;
  margin-top: 4px;
  width: 130px;
}

.audioscd-filter-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.audioscd-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0 24px 16px;
  align-items: baseline;
}

/* ── 視圖切換（沿用遊戲分析的 mode-switch 觀感） ── */

.audioscd-view-switch {
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  overflow: hidden;
}

.audioscd-view-switch button {
  padding: 6px 16px;
  font-size: 0.85rem;
  background: transparent;
  color: var(--text-secondary);
  border: none;
  cursor: pointer;
}

.audioscd-view-switch button.active {
  background: var(--brand-teal);
  color: #fff;
}

/* ── 圖例 ── */

.audioscd-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.audioscd-swatch {
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 3px;
  margin-right: 5px;
  vertical-align: middle;
}

.audioscd-swatch-music { background: var(--audioscd-c-music); }
.audioscd-swatch-sfx { background: var(--audioscd-c-sfx); }
.audioscd-swatch-cv { background: var(--audioscd-c-cv); }
.audioscd-swatch-other { background: var(--audioscd-c-other); }

/* ── 甘特 ── */

.audioscd-gantt-scroll {
  overflow-x: auto;
  padding: 0 0 20px;
}

.audioscd-gantt {
  min-width: max-content;
}

.audioscd-gantt-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border-color);
}

.audioscd-gantt-row:last-child {
  border-bottom: none;
}

/* 左欄固定：橫向捲動時遊戲名不跟著跑掉 */
.audioscd-gantt-name {
  position: sticky;
  left: 0;
  /* ==必須高於 .audioscd-bar 的 z-index==：兩者同為 row 的子層，
     z-index 平手時由 DOM 順序決勝，bar 在後面就會蓋到 sticky 左欄上面，
     橫向捲動時遊戲名會被捲過來的 bar 壓住。 */
  z-index: 4;
  flex: 0 0 var(--audioscd-name-w);
  width: var(--audioscd-name-w);
  padding: 8px 12px 8px 24px;
  background: var(--bg-card);
  border-right: 1px solid var(--border-color);
  box-sizing: border-box;
}

.audioscd-gantt-name.clickable {
  cursor: pointer;
}

.audioscd-gantt-name.clickable:hover .audioscd-name-main {
  color: var(--brand-teal);
}

.audioscd-name-main {
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.audioscd-name-muted {
  color: var(--text-muted);
}

.audioscd-name-sub {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Jira 單號連結（沿用專案既有的 brand-teal 連結樣式） */
.audioscd-key {
  color: var(--brand-teal);
  font-weight: 600;
  text-decoration: none;
}

.audioscd-key:hover {
  text-decoration: underline;
}

/* Drive 資料夾連結：與 Jira 單號並列常駐顯示。
   ==刻意不做成 hover 才浮現==（✏️ 是那樣）——這是使用者要「找得到」的入口，
   藏起來等於沒做。 */
.audioscd-drive {
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.audioscd-drive:hover {
  color: var(--brand-teal);
  text-decoration: underline;
}

.audioscd-rel {
  color: var(--text-secondary);
}

.audioscd-rel.muted {
  color: var(--text-muted);
  opacity: 0.75;
}

.audioscd-gantt-track {
  position: relative;
  flex: 0 0 auto;
  min-height: 44px;
}

.audioscd-gantt-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
}

.audioscd-gantt-head .audioscd-gantt-name {
  z-index: 6;
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
}

.audioscd-gantt-head .audioscd-gantt-track {
  min-height: 30px;
}

.audioscd-week {
  position: absolute;
  top: 0;
  bottom: 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
  padding-left: 4px;
  border-left: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.audioscd-week.month-start {
  color: var(--text-secondary);
  font-weight: 600;
}

.audioscd-today {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--error);
  opacity: 0.65;
  z-index: 1;
}

/* ── 排程 bar ── */

.audioscd-bar {
  position: absolute;
  top: 8px;
  height: 26px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-sizing: border-box;
  transition: filter 0.12s ease;
}

.audioscd-bar:hover {
  filter: brightness(1.12);
}

.audioscd-bar-music { background: var(--audioscd-c-music); }
.audioscd-bar-sfx { background: var(--audioscd-c-sfx); }
.audioscd-bar-cv { background: var(--audioscd-c-cv); }
.audioscd-bar-other { background: var(--audioscd-c-other); }

/* 混色 bar 的實際漸層由 JS 依該區間真正含有的類型與比例 inline 產生。
   ==這裡不可以寫死某兩色的漸層==：曾經寫死 teal→orange，結果「音效＋口白」
   的區間也被畫成「音樂＋音效」的配色，顏色與內容對不上。
   此處僅留一個中性底色，作為 inline style 因故未套用時的保險。 */
.audioscd-bar-mixed {
  background: var(--audioscd-c-other);
}

/* 不交付的週（例：旅遊假）用深灰底。
   ==不可留白==：留白看起來像「漏排」，而它其實是刻意不排。
   ==也不用實黑==（`--text-primary` 在淺色主題是 #1f2328，過重）：
   改用 `--text-secondary`，淺色 #475569、深色 #c9d1d9，兩個主題下
   都與彩色 bar 明顯區隔又不刺眼。文字置中，與其他 bar 的數字對齊。 */
.audioscd-bar-note {
  background: var(--text-secondary);
  color: var(--bg-card);
  font-family: var(--font-main);
  font-weight: 600;
  padding: 0 8px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  justify-content: center;
}

/* ── 標記 ── */

.audioscd-flag {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 4px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  background: var(--bg-input);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.audioscd-flag.warn {
  color: var(--warning);
  border-color: var(--warning);
}

/* ── 項目清單（純文字，一行一個）──
   這份清單要能對著唸、直接複製貼回 Jira，所以不做成標籤：
   標籤會把名稱擠在一起、換行位置隨寬度亂跑，也複製不出乾淨的文字。 */

.audioscd-list {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.65;
}

.audioscd-line {
  color: var(--text-primary);
  white-space: nowrap;
}

/* 用左側細色條標示類型，維持純清單的可讀性又看得出 BGM / SE */
.audioscd-line-music { border-left: 3px solid var(--audioscd-c-music); padding-left: 8px; }
.audioscd-line-sfx { border-left: 3px solid var(--audioscd-c-sfx); padding-left: 8px; }
.audioscd-line-cv { border-left: 3px solid var(--audioscd-c-cv); padding-left: 8px; }
.audioscd-line-other { border-left: 3px solid var(--audioscd-c-other); padding-left: 8px; }

.audioscd-line-empty {
  color: var(--text-muted);
  border-left: none;
  padding-left: 0;
  font-family: var(--font-main);
}

/* ── 區間明細 ── */

.audioscd-blk {
  margin-top: 18px;
}

.audioscd-blk-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-color);
}

.audioscd-blk-range {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.audioscd-blk-date {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.audioscd-blk-count {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.audioscd-game-group {
  margin-top: 26px;
  padding-top: 4px;
}

.audioscd-game-head {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--brand-teal);
  padding-bottom: 4px;
}

/* ── 解析警示 ── */

.audioscd-warn-block {
  margin-top: 14px;
  padding-left: 12px;
  border-left: 3px solid var(--warning);
}

.audioscd-warn-title {
  font-size: 0.85rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.audioscd-warn-block ul {
  margin: 0;
  padding-left: 20px;
}

.audioscd-warn-block li {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.audioscd-warn-block code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: var(--bg-input);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--text-primary);
}

/* ── 空狀態 ── */

.audioscd-empty {
  padding: 32px 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.audioscd-th-sort {
  cursor: pointer;
  user-select: none;
}

.audioscd-th-sort:hover {
  color: var(--brand-teal);
}

.audioscd-tbl td.mono {
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

/* 項目清單欄吸收剩餘寬度，表格就不會被撐出容器逼使用者橫捲 */
.audioscd-tbl th:last-child,
.audioscd-tbl td:last-child {
  width: 100%;
  min-width: 200px;
}

.audioscd-tbl td {
  vertical-align: top;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ── 甘特左欄的編輯入口 ── */

.audioscd-name-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.audioscd-name-row .audioscd-name-main {
  flex: 1;
  min-width: 0;
}

/* Drive 資料夾：放在遊戲名那一行的圖示區，不佔副標行寬度。
   ==不可放回副標行==——那行已有「單號 ↗ · 上線 YYYY-MM-DD」，
   再加一段文字連結會把上線日擠到第二行（2026-09-11 實測跑版）。
   與 ✏️ 不同，這顆常駐顯示：它是要被找得到的入口。 */
.audioscd-folder-icon {
  flex: 0 0 auto;
  padding: 0 2px;
  font-size: 0.8rem;
  line-height: 1.3;
  text-decoration: none;
  opacity: 0.75;
}

.audioscd-folder-icon:hover {
  opacity: 1;
}

.audioscd-edit-icon {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  font-size: 0.8rem;
  line-height: 1.3;
  opacity: 0;
  transition: opacity 0.12s ease;
}

/* 平時藏起來，滑到該列才浮現——每列都掛一顆常駐鉛筆會把左欄弄得很吵 */
.audioscd-gantt-row:hover .audioscd-edit-icon,
.audioscd-edit-icon:focus-visible {
  opacity: 0.85;
}

.audioscd-edit-icon:hover {
  opacity: 1;
}

/* ── 編輯 Modal ── */

.audioscd-edit-body {
  display: flex;
  gap: 18px;
  padding: 16px 24px 4px;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.audioscd-edit-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.audioscd-textarea {
  flex: 1;
  min-height: 340px;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.65;
  padding: 10px 12px;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
}

.audioscd-preview {
  flex: 1;
  min-height: 340px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  background: var(--bg-input);
  padding: 12px 14px;
}

.audioscd-preview-sum {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
}

.audioscd-preview-blk {
  margin-top: 14px;
}

.audioscd-preview-blk-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.audioscd-preview-warn {
  margin-top: 14px;
  padding: 10px 12px;
  border-left: 3px solid var(--warning);
  background: var(--bg-card);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.audioscd-preview-warn ul {
  margin: 6px 0 0;
  padding-left: 20px;
}

.audioscd-preview-warn code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: var(--bg-input);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--text-primary);
}

/* 送出後實際會發生什麼（就地更新 vs 新增一則），一律講在按鈕上方 */
.audioscd-edit-notice {
  margin: 4px 24px 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 0.8rem;
  line-height: 1.6;
  background: var(--bg-input);
  color: var(--text-secondary);
  border-left: 3px solid var(--brand-teal);
}

.audioscd-edit-notice.warn {
  border-left-color: var(--warning);
}

.audioscd-edit-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  margin-top: 12px;
}

#audioScdEditStatus.error {
  color: var(--error);
}

.audioscd-edit-body code,
.audioscd-edit-notice code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: var(--bg-card);
  padding: 1px 5px;
  border-radius: 3px;
}

/* ── 無排程留言：整列跨行的高亮橫幅 ──
   這是要被看見的缺口（代表這款遊戲還沒人排音效），不是可以淡化的空白。
   底色用 color-mix 從 --warning 調出淡色，不寫死色碼；不支援 color-mix 的
   瀏覽器會落在前一行的 --bg-input，仍看得出與一般列不同。 */

.audioscd-gantt-row.no-schedule .audioscd-gantt-name {
  background: var(--bg-input);
  background: color-mix(in srgb, var(--warning) 10%, var(--bg-card));
  border-left: 3px solid var(--warning);
  padding-left: 21px;   /* 24px - 3px 邊框，維持與其他列的文字對齊 */
}

.audioscd-empty-band {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  bottom: 6px;
  display: flex;
  align-items: center;
  border-radius: 5px;
  background: var(--bg-input);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  border: 1px dashed var(--warning);
  z-index: 1;
}

.audioscd-empty-band > span {
  /* 貼在左欄右緣：時間軸很長時橫向捲到右邊仍看得到這列是空的。
     ==left 必須加上左欄寬度==，否則文字會停在捲動容器的最左邊、
     被 sticky 的左欄整個蓋掉（只露出被切一半的字）。 */
  position: sticky;
  left: calc(var(--audioscd-name-w) + 12px);
  padding: 0 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--warning);
  white-space: nowrap;
}

.audioscd-empty-band.muted {
  background: transparent;
  border-style: dotted;
  border-color: var(--border-color);
}

.audioscd-empty-band.muted > span {
  color: var(--text-muted);
  font-weight: 400;
}

/* ── 檢查交付結果 ── */

/* Drive 清單是 Apps Script 推送來的，必然有延遲。
   ==不講清楚資料時間，使用者會把「還沒同步」誤讀成「音效師沒交」==——
   那是會害人去追錯人的誤判，故資料時間常駐顯示、過期加強提示。 */
.audioscd-sync-line {
  font-size: 0.78rem;
  color: var(--text-muted);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

.audioscd-sync-line.stale {
  color: var(--warning);
  font-weight: 600;
}

.audioscd-week-ok .audioscd-blk-head { border-bottom-color: var(--success); }
.audioscd-week-warn .audioscd-blk-head { border-bottom-color: var(--warning); }
.audioscd-week-bad .audioscd-blk-head { border-bottom-color: var(--error); }
.audioscd-week-pending .audioscd-blk-head { border-bottom-color: var(--border-color); }

.audioscd-week-ok .audioscd-blk-count { color: var(--success); }
.audioscd-week-warn .audioscd-blk-count { color: var(--warning); }
.audioscd-week-bad .audioscd-blk-count { color: var(--error); }
.audioscd-week-pending .audioscd-blk-count { color: var(--text-muted); }

.audioscd-line-ok {
  border-left: 3px solid var(--success);
  padding-left: 8px;
  color: var(--text-secondary);
}

.audioscd-line-miss {
  border-left: 3px solid var(--error);
  padding-left: 8px;
  color: var(--error);
  font-weight: 600;
}

/* 尚未到期的項目不標紅：它不是缺失，只是還沒到交付日 */
.audioscd-line-wait {
  border-left: 3px solid var(--border-color);
  padding-left: 8px;
  color: var(--text-muted);
}

.audioscd-extra {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-color);
}

/* ── 區間註記（旅遊假等） ── */

.audioscd-blk-note {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: var(--radius);
  background: var(--text-secondary);
  color: var(--bg-card);
  font-size: 0.8rem;
  font-weight: 600;
}

.audioscd-blk.note-only .audioscd-blk-count {
  color: var(--text-muted);
}

/* ── 編輯 Modal 的開案時間列 ── */

.audioscd-kickoff-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.audioscd-kickoff-row .input-ui {
  width: 170px;
}

/* ── 排程總覽的開案狀態標示 ── */
/* 只在「有開案時間、但還沒排程」時出現；排程一填就回到一般呈現。 */

.audioscd-empty-band.kickoff-wait {
  background: var(--bg-input);
  border-style: dashed;
  border-color: var(--border-color);
}

.audioscd-empty-band.kickoff-wait > span {
  color: var(--text-secondary);
}

/* 已開案卻還沒排程＝該補排程了，沿用警示色 */
.audioscd-empty-band.kickoff-open > span {
  color: var(--warning);
}