/* =====================================================
   3WA Photo — Dark Tech Theme
   ===================================================== */
:root {
  --photo-card-bg  : #161b22;
  --photo-border   : #30363d;
  --photo-glow     : #00e5ff;
  --photo-glow-dim : rgba(0,229,255,.25);
  --photo-text     : #c9d1d9;
  --photo-muted    : #8b949e;
  --photo-accent   : #f0a500;
  --photo-danger   : #f85149;
  --photo-radius   : 10px;
}

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

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

/* ── 相簿卡片 ── */
.photo-album-card {
  background    : var(--photo-card-bg);
  border        : 1px solid var(--photo-border);
  border-radius : var(--photo-radius);
  overflow      : hidden;
  cursor        : pointer;
  transition    : border-color .25s, box-shadow .25s, transform .25s;
  margin-bottom : 20px;
}
.photo-album-card:hover {
  border-color : var(--photo-glow);
  box-shadow   : 0 0 16px var(--photo-glow-dim);
  transform    : translateY(-3px);
}
.photo-album-card .cover-wrap {
  position   : relative;
  width      : 100%;
  height     : 180px;
  overflow   : hidden;
  background : #0d1117;
}
.photo-album-card .cover-img {
  width      : 100%;
  height     : 100%;
  object-fit : cover;
  transition : transform .35s;
  display    : block;
}
.photo-album-card:hover .cover-img {
  transform : scale(1.05);
}
.photo-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));
}
.photo-album-card .album-title {
  display     : block;
  color       : #fff;
  font-size   : .88em;
  white-space : nowrap;
  overflow    : hidden;
  text-overflow: ellipsis;
}
.photo-album-card .counter-badge {
  position   : absolute;
  top        : 8px;
  right      : 8px;
  background : rgba(0,0,0,.6);
  color      : var(--photo-accent);
  font-size  : .78em;
  padding    : 2px 6px;
  border-radius : 4px;
  border     : 1px solid var(--photo-accent);
}
.photo-album-card .album-footer {
  padding    : 8px 10px;
  font-size  : .78em;
  color      : var(--photo-muted);
  border-top : 1px solid var(--photo-border);
}

/* ── 照片格（相簿內） ── */
.photo-item {
  background    : var(--photo-card-bg);
  border        : 1px solid var(--photo-border);
  border-radius : var(--photo-radius);
  overflow      : hidden;
  margin-bottom : 16px;
  transition    : border-color .2s, box-shadow .2s, transform .2s;
  text-align    : center;
}
.photo-item:hover {
  border-color : var(--photo-glow);
  box-shadow   : 0 0 12px var(--photo-glow-dim);
  transform    : translateY(-2px);
}
.photo-item img {
  width      : 100%;
  display    : block;
  border-radius : var(--photo-radius) var(--photo-radius) 0 0;
}
.photo-item .photo-item-label {
  padding    : 6px 8px;
  font-size  : .8em;
  color      : var(--photo-text);
  white-space: nowrap;
  overflow   : hidden;
  text-overflow: ellipsis;
}
.photo-item .photo-item-count {
  font-size  : .72em;
  color      : var(--photo-muted);
  padding-bottom : 6px;
}

/* ── 單張照片 show.php ── */
.photo-show-container {
  background    : var(--photo-card-bg);
  border        : 1px solid var(--photo-border);
  border-radius : var(--photo-radius);
  padding       : 16px;
  margin-bottom : 16px;
}
.photo-main-img {
  max-width     : 100%;
  border-radius : var(--photo-radius);
  box-shadow    : 0 0 20px rgba(0,0,0,.6);
  cursor        : pointer;
}
.photo-nav-arrow {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 8px;
  min-height    : 200px;
  justify-content: center;
}
.photo-nav-arrow a {
  color      : var(--photo-glow);
  font-size  : 2em;
  line-height: 1;
  transition : text-shadow .2s;
}
.photo-nav-arrow a:hover {
  text-shadow : 0 0 10px var(--photo-glow);
  color       : var(--photo-glow);
}
.photo-thumb-strip a img {
  width         : 52px;
  height        : 52px;
  object-fit    : cover;
  border-radius : 5px;
  border        : 1px solid var(--photo-border);
  transition    : border-color .2s;
  margin        : 2px;
}
.photo-thumb-strip a img:hover {
  border-color : var(--photo-glow);
}
.photo-hr {
  border     : none;
  border-top : 1px solid var(--photo-glow);
  margin     : 12px 0;
  opacity    : .4;
}
.photo-meta {
  font-size  : .82em;
  color      : var(--photo-muted);
  line-height: 1.8;
}
.photo-url-box {
  background    : #0d1117;
  border        : 1px solid var(--photo-border);
  border-radius : 5px;
  padding       : 6px 10px;
  font-size     : .78em;
  color         : var(--photo-muted);
  word-break    : break-all;
}

/* ── 表單 panel ── */
.photo-panel {
  background    : var(--photo-card-bg);
  border        : 1px solid var(--photo-border);
  border-radius : var(--photo-radius);
  padding       : 20px;
  margin-bottom : 20px;
}
.photo-panel h3, .photo-panel h2 {
  color         : var(--photo-glow);
  margin-top    : 0;
  margin-bottom : 16px;
  letter-spacing: 1px;
}
.photo-panel label {
  color      : var(--photo-muted);
  font-weight: normal;
}

.form-control {
  background : #0d1117 !important;
  border     : 1px solid var(--photo-border) !important;
  color      : var(--photo-text) !important;
  border-radius : 5px !important;
}
.form-control:focus {
  border-color : var(--photo-glow) !important;
  box-shadow   : 0 0 6px var(--photo-glow-dim) !important;
}

/* ── 暗色 Bootstrap table 修補 ── */
.thetable {
  width         : 100%;
  border-collapse: collapse;
  color         : var(--photo-text);
  font-size     : .88em;
}
.thetable thead th {
  background    : #0d1117;
  color         : var(--photo-glow);
  border        : 1px solid var(--photo-border);
  padding       : 8px 10px;
  letter-spacing: 1px;
}
.thetable tbody td {
  border     : 1px solid var(--photo-border);
  padding    : 7px 10px;
  vertical-align: middle;
}
.thetable tbody tr:hover td {
  background : rgba(0,229,255,.05);
}
.thetable tbody td[field='fake_checkboxs'],
.thetable tbody td[field='fake_checkbox'] {
  text-align : center;
}

/* ── 按鈕 ── */
.btn-photo-primary {
  background : transparent;
  border     : 1px solid var(--photo-glow);
  color      : var(--photo-glow);
  border-radius : 5px;
  transition : background .2s, box-shadow .2s;
}
.btn-photo-primary:hover {
  background : var(--photo-glow-dim);
  box-shadow : 0 0 8px var(--photo-glow-dim);
  color      : var(--photo-glow);
}
.btn-photo-danger {
  background : transparent;
  border     : 1px solid var(--photo-danger);
  color      : var(--photo-danger);
  border-radius : 5px;
  transition : background .2s;
}
.btn-photo-danger:hover {
  background : rgba(248,81,73,.15);
  color      : var(--photo-danger);
}

/* ── 封面選擇 radio card ── */
.photo-radio-card {
  background    : var(--photo-card-bg);
  border        : 2px solid var(--photo-border);
  border-radius : var(--photo-radius);
  padding       : 10px;
  text-align    : center;
  cursor        : pointer;
  transition    : border-color .2s, box-shadow .2s;
  margin-bottom : 12px;
}
.photo-radio-card.selected,
.photo-radio-card:hover {
  border-color : var(--photo-glow);
  box-shadow   : 0 0 10px var(--photo-glow-dim);
}
.photo-radio-card img {
  width         : 80px;
  height        : 80px;
  object-fit    : cover;
  border-radius : 5px;
  display       : block;
  margin        : 0 auto 6px;
}

/* ── 上傳區 ── */
.photo-upload-zone {
  border        : 2px dashed var(--photo-border);
  border-radius : var(--photo-radius);
  padding       : 30px;
  text-align    : center;
  color         : var(--photo-muted);
  transition    : border-color .2s;
}
.photo-upload-zone:hover {
  border-color : var(--photo-glow);
  color        : var(--photo-glow);
}

/* ── 麵包屑 breadcrumb ── */
.photo-breadcrumb {
  font-size    : .85em;
  color        : var(--photo-muted);
  margin-bottom: 10px;
}
.photo-breadcrumb a {
  color        : var(--photo-glow);
}
.photo-breadcrumb a:hover {
  text-decoration: underline;
}