/* 3WA Video — Dark Tech Theme */
:root {
  --video-bg:       #0d1117;
  --video-card-bg:  #161b22;
  --video-border:   #30363d;
  --video-glow:     #00e5ff;
  --video-glow-dim: rgba(0,229,255,.25);
  --video-glow2:    #0077b6;
  --video-text:     #c9d1d9;
  --video-muted:    #8b949e;
  --video-accent:   #f0a500;
}

body { background: var(--video-bg) !important; color: var(--video-text) !important; }

/* ── 標題 ── */
.video-page-title {
  text-align  : center;
  padding     : 18px 0 6px;
  color       : var(--video-glow);
  letter-spacing : 2px;
  text-shadow : 0 0 10px var(--video-glow-dim);
}
.video-page-subtitle {
  text-align  : center;
  color       : var(--video-muted);
  font-size   : .9em;
  margin-bottom : 20px;
  letter-spacing : 1px;
}

/* ── 導覽列 ── */
.video-nav {
  background    : rgba(22,27,34,.85);
  border        : 1px solid var(--video-border);
  border-radius : 10px;
  padding       : 8px 16px;
  margin-bottom : 16px;
  display       : flex;
  justify-content: space-between;
  align-items   : center;
  flex-wrap     : wrap;
  gap           : 10px;
}
.video-nav .nav-pills {
  margin : 0;
}
.video-nav .nav-search {
  flex : 0 0 320px;
}
@media (max-width: 768px) {
  .video-nav .nav-search { flex: 1 1 100%; }
}
.video-nav .nav-pills > li > a {
  color         : var(--video-muted);
  border-radius : 6px;
  transition    : background .2s, color .2s;
}
.video-nav .nav-pills > li > a:hover,
.video-nav .nav-pills > li.active > a {
  background : var(--video-glow-dim);
  color      : var(--video-glow);
  box-shadow : 0 0 8px var(--video-glow-dim);
}

/* ── 影片分類卡片（總覽頁） ── */
.video-album-card {
  background    : var(--video-card-bg);
  border        : 1px solid var(--video-border);
  border-radius : 10px;
  overflow      : hidden;
  cursor        : pointer;
  transition    : border-color .25s, box-shadow .25s, transform .25s;
  margin-bottom : 20px;
}
.video-album-card:hover {
  border-color : var(--video-glow);
  box-shadow   : 0 0 16px var(--video-glow-dim);
  transform    : translateY(-3px);
}
.video-album-card .cover-wrap {
  position   : relative;
  width      : 100%;
  height     : 180px;
  overflow   : hidden;
  background : #0d1117;
}
.video-album-card .cover-img {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
  transition : transform .35s;
  display    : block;
}
.video-album-card:hover .cover-img {
  transform : scale(1.05);
}
.video-album-card .cover-overlay {
  position   : absolute;
  bottom     : 0;
  left       : 0;
  right      : 0;
  padding    : 28px 10px 8px;
  background : linear-gradient(transparent, rgba(0,0,0,.82));
}
.video-album-card .album-title {
  display     : block;
  color       : #fff;
  font-size   : .88em;
  white-space : nowrap;
  overflow    : hidden;
  text-overflow: ellipsis;
  font-weight: normal;
}
.video-album-card .counter-badge {
  position   : absolute;
  top        : 8px;
  right      : 8px;
  background : rgba(0,0,0,.6);
  color      : var(--video-accent);
  font-size  : .78em;
  padding    : 2px 6px;
  border-radius : 4px;
  border     : 1px solid var(--video-accent);
}
.video-album-card .card-footer-text {
  padding    : 8px 10px;
  font-size  : .78em;
  color      : var(--video-muted);
  border-top : 1px solid var(--video-border);
}

/* ── 影片格（select 模式） ── */
.video-item {
  background    : var(--video-card-bg);
  border        : 1px solid var(--video-border);
  border-radius : 10px;
  overflow      : hidden;
  margin-bottom : 16px;
  transition    : border-color .2s, box-shadow .2s, transform .2s;
  text-align    : center;
}
.video-item:hover {
  border-color : var(--video-glow);
  box-shadow   : 0 0 12px var(--video-glow-dim);
  transform    : translateY(-2px);
}
.video-item a { text-decoration: none; color: inherit; }
.video-item img {
  width      : 100%;
  display    : block;
  border-radius : 10px 10px 0 0;
  object-fit : cover;
  height     : 180px;
}
.video-item .item-title {
  padding    : 6px 8px;
  font-size  : .8em;
  color      : var(--video-text);
  white-space: nowrap;
  overflow   : hidden;
  text-overflow: ellipsis;
}
.video-item .item-meta {
  font-size  : .72em;
  color      : var(--video-muted);
  padding-bottom : 6px;
}

/* ── 麵包屑 ── */
.video-breadcrumb {
  color: var(--video-muted);
  font-size: .9em;
  padding: 8px 0;
  border-bottom: 1px solid var(--video-border);
  margin-bottom: 16px;
}
.video-breadcrumb a { color: var(--video-glow); text-decoration: none; }
.video-breadcrumb a:hover { text-decoration: underline; }

/* ── show 頁 ── */
.video-show-container { margin-bottom: 20px; }
.video-nav-arrow { text-align: center; padding-top: 30px; }
.video-nav-arrow a {
  color: var(--video-glow);
  text-decoration: none;
  display: block;
  font-size: 2em;
  line-height: 1.4;
  transition: text-shadow .2s;
}
.video-nav-arrow a:hover { text-shadow: 0 0 10px var(--video-glow); color: var(--video-glow); }
.video-nav-arrow a img {
  font-size: initial;
  border-radius: 4px;
  border: 1px solid var(--video-border);
  margin: 6px auto;
  display: block;
  max-width: 100%;
  transition: border-color .2s;
}
.video-nav-arrow a:hover img { border-color: var(--video-glow); }
.video-nav-arrow .nav-title { font-size: .42em; color: var(--video-muted); margin-top: 4px; }
.video-main-player {
  max-width: 100%;
  border-radius: 8px;
  border: 2px solid var(--video-border);
  background: #000;
}
.video-hr { border-color: var(--video-glow); opacity: .35; margin: 16px 0; }
.video-meta {
  background: var(--video-card-bg);
  border: 1px solid var(--video-border);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: .9em;
  color: var(--video-text);
  margin-bottom: 12px;
}

/* ── 影片路徑代碼框 ── */
.video-code-section {
  background: var(--video-card-bg);
  border: 1px solid var(--video-border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.video-code-section h5 {
  color: var(--video-glow);
  margin: 0 0 10px;
  font-size: .95em;
  letter-spacing: 1px;
}
.video-code-box {
  background: #0d1117;
  border: 1px solid var(--video-border);
  border-radius: 4px;
  padding: 10px;
  font-size: .78em;
  color: var(--video-text);
  word-break: break-all;
  max-height: 150px;
  overflow-y: auto;
  font-family: monospace;
  margin-bottom: 8px;
}

/* ── 表單面板 ── */
.video-panel {
  background    : var(--video-card-bg);
  border        : 1px solid var(--video-border);
  border-radius : 10px;
  padding       : 20px;
  margin-bottom : 20px;
}
.video-panel h3 { color: var(--video-glow); margin-top: 0; margin-bottom: 16px; }

.form-control {
  background : #0d1117 !important;
  border     : 1px solid var(--video-border) !important;
  color      : var(--video-text) !important;
  border-radius : 5px !important;
}
.form-control:focus {
  border-color : var(--video-glow) !important;
  box-shadow   : 0 0 6px var(--video-glow-dim) !important;
}
.video-panel label { color: var(--video-muted); font-weight: normal; }

/* ── 按鈕 ── */
.btn-video-primary {
  background: var(--video-glow2);
  border: 1px solid var(--video-glow);
  color: #fff;
  border-radius: 4px;
  transition: all .2s;
}
.btn-video-primary:hover, .btn-video-primary:focus {
  background: var(--video-glow);
  color: #000;
  box-shadow: 0 0 8px var(--video-glow-dim);
}
.btn-video-danger {
  background: #6b0f0f;
  border: 1px solid #c0392b;
  color: #fff;
  border-radius: 4px;
  transition: all .2s;
}
.btn-video-danger:hover, .btn-video-danger:focus {
  background: #c0392b;
  color: #fff;
  box-shadow: 0 0 8px rgba(192,57,43,.4);
}

/* ── 管理表格 ── */
.thetable { width: 100%; border-collapse: collapse; color: var(--video-text); font-size: .88em; }
.thetable thead th {
  background: var(--video-card-bg);
  border: 1px solid var(--video-border);
  padding: 6px 8px;
  color: var(--video-glow);
  white-space: nowrap;
}
.thetable tbody td {
  border: 1px solid var(--video-border);
  padding: 5px 8px;
  vertical-align: middle;
}
.thetable tbody tr:nth-child(even) { background: rgba(255,255,255,.03); }
.thetable tbody tr:hover { background: rgba(0,229,255,.05); }
.thetable tbody td[field='total_subtitle_length'] { text-align: right; padding-right: 10px; }

/* ── 條列管理工具列 ── */
.video-select-bar {
  background: var(--video-card-bg);
  border: 1px solid var(--video-border);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.video-select-bar label { margin: 0; color: var(--video-muted); }
.video-select-bar select.form-control {
  background: #0d1117;
  border-color: var(--video-border);
  color: var(--video-text);
  width: auto;
  display: inline-block;
  height: 30px;
  padding: 2px 8px;
}

/* ── 上傳區 ── */
.video-upload-zone {
  border: 2px dashed var(--video-border);
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  color: var(--video-muted);
  transition: border-color .2s;
  margin-bottom: 16px;
}
.video-upload-zone:hover { border-color: var(--video-glow); }
.video-upload-zone input[type="file"] { color: var(--video-text); }

/* ── radio 選封面 ── */
.video-radio-card {
  display: block;
  background: var(--video-card-bg);
  border: 2px solid var(--video-border);
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  text-align: center;
  transition: border-color .2s, box-shadow .2s;
  margin-bottom: 12px;
}
.video-radio-card input[type="radio"] { display: none; }
.video-radio-card img { width: 100%; border-radius: 4px; display: block; }
.video-radio-card.selected,
.video-radio-card:hover {
  border-color: var(--video-glow);
  box-shadow: 0 0 8px var(--video-glow-dim);
}