/* 2026-08-25b UI hotfixes
   - 外援輸入與外援列可讀性
   - 外援 icon 縮小
   - 數據管理封存（由 JS 移除）
   - 影片管理與排表管理同尺寸
   - 影片管理頁與原本管理頁完全隔離
*/

/* 外援區：輸入文字與 placeholder 必須在亮底可讀。 */
.external-support-panel .external-form input,
.external-support-panel .external-form select {
  color: #29263b !important;
  -webkit-text-fill-color: #29263b !important;
  caret-color: #29263b !important;
  background: #fffdf8 !important;
  opacity: 1 !important;
  font-weight: 800 !important;
}
.external-support-panel .external-form input::placeholder {
  color: #746a78 !important;
  -webkit-text-fill-color: #746a78 !important;
  opacity: 1 !important;
}
.external-support-panel .external-form select option {
  color: #29263b !important;
  background: #fffdf8 !important;
}

/* 外援區 header 的「援」icon 不再搶版面。 */
.external-support-panel .external-icon {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  font-size: 10px !important;
  line-height: 28px !important;
  border-radius: 8px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
}

/* 外援名單改成亮底深字，名稱、備註、移除按鈕都看得到。 */
.external-support-panel .external-list > div,
.external-support-panel.compact .external-list > div,
.sidebar > .external-support-panel.compact .external-list > div {
  color: #29263b !important;
  background: #fffdf8 !important;
  border-color: #29263b !important;
}
.external-support-panel .external-list > div > b,
.external-support-panel.compact .external-list > div > b {
  color: #29263b !important;
  -webkit-text-fill-color: #29263b !important;
  font-size: 13px !important;
  line-height: 1.25 !important;
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}
.external-support-panel .external-list > div > small,
.external-support-panel.compact .external-list > div > small {
  color: #716c7b !important;
  -webkit-text-fill-color: #716c7b !important;
  font-size: 10px !important;
}
.external-support-panel .external-list > div > button,
.external-support-panel.compact .external-list > div > button {
  color: #9f284f !important;
  background: #fff0f5 !important;
  border: 1px solid #d9a5b8 !important;
  border-radius: 7px !important;
  font-weight: 900 !important;
}

/* 外援職業圖示縮小：原本 38px 在側欄太大。 */
.external-job-icon,
.external-support-panel .profession-icon.external-job-icon {
  width: 27px !important;
  min-width: 27px !important;
  height: 27px !important;
  padding: 1px !important;
  border-width: 1px !important;
  border-radius: 7px !important;
}
.external-job-icon img,
.external-support-panel .profession-icon.external-job-icon img {
  width: 23px !important;
  height: 23px !important;
  object-fit: contain !important;
}

/* compact 外援表單在側欄仍保持可輸入，不讓欄位窄到文字消失。 */
.external-support-panel.compact .external-form,
.sidebar > .external-support-panel.compact .external-form {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 7px !important;
}
.external-support-panel.compact .external-form input,
.external-support-panel.compact .external-form select,
.external-support-panel.compact .external-form button {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 34px !important;
}

/* 影片管理按鈕 = 排表管理的尺寸；不再被舊手機規則縮成小字卡。 */
.main-nav .yjh-video-nav {
  width: 100% !important;
  min-height: 53px !important;
  padding: 12px 13px !important;
  gap: 13px !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  text-align: left !important;
  font-size: inherit !important;
}
.main-nav .yjh-video-nav .yjh-nav-icon {
  width: 27px !important;
  min-width: 27px !important;
  height: 27px !important;
  font-size: 12px !important;
}

/* 數據管理已封存。即使舊 DOM 一瞬間出現，也直接隱藏。 */
.main-nav .yjh-data-nav { display: none !important; }

/* 影片管理是獨立頁：React 重繪時也不能把出席/排表內容露回來。 */
body.yjh-video-open .content > :not(.yjh-video-page) {
  display: none !important;
}
body.yjh-video-open .content > .yjh-video-page {
  display: block !important;
}
body.yjh-video-open .yjh-video-page[hidden] {
  display: block !important;
}


/* 2026-08-25c 外援區風格微調
   - 表單格子改回全站同系的淺色漫畫風
   - 外援人數改成高對比 badge，手機上也看得清楚
*/
.external-support-panel .external-form {
  background: #fff4bf !important;
  border-top: 0 !important;
  border-bottom: 2px solid #29263b !important;
  padding: 12px !important;
  gap: 10px !important;
}

.external-support-panel .external-form input,
.external-support-panel .external-form select {
  min-height: 42px !important;
  color: #29263b !important;
  -webkit-text-fill-color: #29263b !important;
  background: #fffef9 !important;
  border: 2px solid #29263b !important;
  border-radius: 12px 4px 12px 4px !important;
  box-shadow: 2px 2px 0 rgba(41,38,59,.16) !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.external-support-panel .external-form input::placeholder {
  color: #8a7c8f !important;
  -webkit-text-fill-color: #8a7c8f !important;
  opacity: 1 !important;
}

.external-support-panel .external-form button {
  min-height: 42px !important;
  border: 2px solid #29263b !important;
  border-radius: 999px !important;
  box-shadow: 3px 3px 0 rgba(41,38,59,.9) !important;
}

.external-support-panel > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

.external-support-panel > header > div {
  min-width: 0 !important;
}

.external-support-panel > header > b {
  flex: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 56px !important;
  padding: 6px 10px !important;
  color: #6e5a73 !important;
  background: #fffef9 !important;
  border: 2px solid #29263b !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  box-shadow: 2px 2px 0 rgba(41,38,59,.18) !important;
  white-space: nowrap !important;
}

.external-support-panel > header h3 {
  margin-right: 8px !important;
}

@media (max-width: 760px) {
  .external-support-panel > header > b {
    min-width: 52px !important;
    padding: 5px 8px !important;
    font-size: 12px !important;
  }
}


/* 2026-08-25d 外援區色彩統一
   - 輸入框改成跟站內淺色表單一致
   - 左上「援」圖章同步同色系
   - 人數 badge 提高辨識度
*/
.external-support-panel .external-form input,
.external-support-panel .external-form select,
.external-support-panel.compact .external-form input,
.external-support-panel.compact .external-form select,
.sidebar > .external-support-panel.compact .external-form input,
.sidebar > .external-support-panel.compact .external-form select {
  color: #3b2a39 !important;
  -webkit-text-fill-color: #3b2a39 !important;
  background: #f8f3ed !important;
  border: 2px solid #e1a8be !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-weight: 800 !important;
}

.external-support-panel .external-form input::placeholder,
.external-support-panel.compact .external-form input::placeholder {
  color: #8e7385 !important;
  -webkit-text-fill-color: #8e7385 !important;
}

.external-support-panel .external-form select option,
.external-support-panel.compact .external-form select option {
  color: #3b2a39 !important;
  background: #f8f3ed !important;
}

.external-support-panel .external-icon,
.external-support-panel.compact .external-icon,
.sidebar > .external-support-panel.compact .external-icon {
  color: #5b3a50 !important;
  background: #f8f3ed !important;
  border: 2px solid #e1a8be !important;
  box-shadow: none !important;
}

.external-support-panel > header > b,
.external-support-panel.compact > header > b,
.sidebar > .external-support-panel.compact > header > b {
  color: #ef6a9d !important;
  background: #fff7fb !important;
  border: 2px solid #efb2c9 !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
}

@media (max-width: 760px) {
  .external-support-panel > header > b,
  .external-support-panel.compact > header > b,
  .sidebar > .external-support-panel.compact > header > b {
    color: #eb5c95 !important;
    background: #fff7fb !important;
    border-color: #efb2c9 !important;
    font-size: 12px !important;
  }
}


/* 2026-08-25e 外援卡片與頂部 logo 微調
   - 外援職業圖示再縮小，名稱/移除同一排
   - 隱藏 ID / 備註小字
   - 左上「援」章放大一點
   - 排表管理右側 logo 置中
*/
.external-support-panel.compact .external-list,
.sidebar > .external-support-panel.compact .external-list {
  gap: 8px !important;
}

.external-support-panel.compact .external-list > div,
.sidebar > .external-support-panel.compact .external-list > div {
  grid-template-columns: 20px minmax(0, 1fr) auto !important;
  grid-template-rows: auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 8px 8px 10px !important;
}

.external-support-panel.compact .external-list > div > small,
.sidebar > .external-support-panel.compact .external-list > div > small {
  display: none !important;
}

.external-support-panel.compact .external-list > div > b,
.sidebar > .external-support-panel.compact .external-list > div > b {
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.external-support-panel.compact .external-list > div > button,
.sidebar > .external-support-panel.compact .external-list > div > button {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: end !important;
  margin: 0 !important;
  padding: 2px 6px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

.external-support-panel.compact .external-job-icon,
.external-support-panel.compact .profession-icon.external-job-icon,
.sidebar > .external-support-panel.compact .external-job-icon,
.sidebar > .external-support-panel.compact .profession-icon.external-job-icon {
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  border-radius: 6px !important;
}

.external-support-panel.compact .external-job-icon img,
.external-support-panel.compact .profession-icon.external-job-icon img,
.sidebar > .external-support-panel.compact .external-job-icon img,
.sidebar > .external-support-panel.compact .profession-icon.external-job-icon img {
  width: 16px !important;
  height: 16px !important;
}

.external-support-panel .external-icon,
.external-support-panel.compact .external-icon,
.sidebar > .external-support-panel.compact .external-icon {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  font-size: 14px !important;
  line-height: 34px !important;
  border-radius: 10px !important;
}

.topbar > div:first-child {
  grid-template-columns: max-content minmax(240px, 1fr) !important;
  width: min(100%, 760px) !important;
}

.yjh-topbar-logo {
  justify-self: center !important;
  width: min(320px, 28vw) !important;
  object-position: center center !important;
}

@media (max-width: 760px) {
  .external-support-panel .external-icon,
  .external-support-panel.compact .external-icon,
  .sidebar > .external-support-panel.compact .external-icon {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
  }

  .topbar > div:first-child {
    grid-template-columns: max-content minmax(120px, 1fr) !important;
    width: 100% !important;
  }

  .yjh-topbar-logo {
    width: min(180px, 42vw) !important;
  }
}


/* 2026-08-25f 頂部一劍飛花 logo 精準置中，不裁切 */
.topbar {
  position: relative !important;
}

.topbar > div:first-child {
  width: auto !important;
  min-width: 0 !important;
}

.yjh-topbar-logo {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: block !important;
  height: 56px !important;
  width: auto !important;
  max-width: min(360px, 32vw) !important;
  object-fit: contain !important;
  object-position: center center !important;
  justify-self: auto !important;
  pointer-events: none !important;
}

@media (max-width: 1100px) {
  .yjh-topbar-logo {
    max-width: min(300px, 30vw) !important;
    height: 52px !important;
  }
}

@media (max-width: 760px) {
  .yjh-topbar-logo {
    max-width: min(180px, 34vw) !important;
    height: 42px !important;
  }
}


/* 2026-08-25g 頂部 logo 放大到接近左側黑框高度 */
.yjh-topbar-logo {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  height: 92px !important;
  width: auto !important;
  max-width: min(520px, 42vw) !important;
  object-fit: contain !important;
  object-position: center center !important;
}

@media (max-width: 1100px) {
  .yjh-topbar-logo {
    height: 76px !important;
    max-width: min(420px, 38vw) !important;
  }
}

@media (max-width: 760px) {
  .yjh-topbar-logo {
    height: 52px !important;
    max-width: min(220px, 40vw) !important;
  }
}


/* 2026-08-25h 頂部 logo 剛剛好版 */
.topbar {
  min-height: 112px !important;
}

.yjh-topbar-logo {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  height: 82px !important;
  width: auto !important;
  max-width: min(460px, 38vw) !important;
  object-fit: contain !important;
  object-position: center center !important;
  pointer-events: none !important;
}

@media (max-width: 1100px) {
  .topbar { min-height: 104px !important; }
  .yjh-topbar-logo {
    height: 70px !important;
    max-width: min(380px, 38vw) !important;
  }
}

@media (max-width: 760px) {
  .topbar { min-height: 90px !important; }
  .yjh-topbar-logo {
    height: 52px !important;
    max-width: min(240px, 42vw) !important;
  }
}