/**
 * PRainews Theme — 套用舊 prnews.washinmura.jp 的深夜藍紫 + 琥珀金配色
 * 覆蓋 Tabler dark mode 的預設色
 */

[data-bs-theme="dark"] {
  /* 底色：深夜藍紫 */
  --tblr-body-bg: #1a1a2e;
  --tblr-bg-surface: #16213e;
  --tblr-bg-surface-secondary: #1a2744;
  --tblr-border-color: #2a3a5c;

  /* 文字：米白 */
  --tblr-body-color: #e8e0d4;
  --tblr-muted: #8b8578;

  /* 主色：琥珀金 */
  --tblr-primary: #e8a838;
  --tblr-primary-rgb: 232, 168, 56;

  /* 狀態色（保留 prnews 原始定義）*/
  --tblr-success: #40a02b;
  --tblr-warning: #df8e1d;
  --tblr-danger: #dc322f;
  --tblr-info: #2992a0;

  /* Card / Navbar */
  --tblr-card-bg: #16213e;
  --tblr-card-border-color: #2a3a5c;
  --tblr-navbar-bg: #16213e;
}

/* 字體：日本新聞稿用 — Noto Sans JP (Gothic)，
   日文字號比英文小 10%，行距加 15%（日本 UX 標準）*/
body {
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 0.9rem;  /* 日文比 Tabler default 16px 縮一點 */
  line-height: 1.8;   /* 日文行距加大 */
}

/* Brand mark */
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #e8a838, #c4883a);
  color: #1a1a2e;
  font-weight: 700;
  font-size: 1rem;
  border-radius: 8px;
  margin-right: 12px;
  flex-shrink: 0;
}

/* 主要按鈕用琥珀金 */
.btn-primary {
  --tblr-btn-bg: #e8a838;
  --tblr-btn-border-color: #e8a838;
  --tblr-btn-color: #1a1a2e;
  --tblr-btn-hover-bg: #c4883a;
  --tblr-btn-hover-border-color: #c4883a;
  --tblr-btn-hover-color: #1a1a2e;
  font-weight: 600;
}

/* Sidebar active */
.navbar-vertical .nav-link.active {
  color: #e8a838 !important;
  border-left-color: #e8a838 !important;
}

/* Toast / Alert 微調 */
.alert-success { background: rgba(64, 160, 43, 0.12); border-color: rgba(64, 160, 43, 0.3); }
.alert-danger  { background: rgba(220, 50, 47, 0.12); border-color: rgba(220, 50, 47, 0.3); }
.alert-warning { background: rgba(223, 142, 29, 0.12); border-color: rgba(223, 142, 29, 0.3); }
.alert-info    { background: rgba(41, 146, 160, 0.12); border-color: rgba(41, 146, 160, 0.3); }

/* ════════════════════════════════════════
   app.js 相容 CSS（舊 JS 動態生成 HTML 用這些 class）
   ════════════════════════════════════════ */
.tab-panel { display: none !important; }
.tab-panel.active { display: block !important; }

.status { padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: 0.9rem; }
.status.hidden { display: none !important; }
.status-info    { background: rgba(41, 146, 160, 0.12); border: 1px solid rgba(41, 146, 160, 0.3); color: #67d4e0; }
.status-success { background: rgba(64, 160, 43, 0.12); border: 1px solid rgba(64, 160, 43, 0.3); color: #6dda55; }
.status-warning { background: rgba(223, 142, 29, 0.12); border: 1px solid rgba(223, 142, 29, 0.3); color: #e8a838; }
.status-danger  { background: rgba(220, 50, 47, 0.12); border: 1px solid rgba(220, 50, 47, 0.3); color: #f56b6b; }

.list { margin-top: 0.5rem; }
.list-item {
  padding: 0.75rem 1rem; border: 1px solid var(--tblr-border-color, #2a3a5c);
  border-radius: 8px; margin-bottom: 0.5rem; cursor: pointer; transition: background 0.15s;
}
.list-item:hover { background: var(--tblr-bg-surface-secondary, #1a2744); }
.list-item.active { border-color: var(--tblr-primary, #e8a838); background: rgba(232, 168, 56, 0.08); }
.list-item h4 { margin: 0 0 4px; font-size: 0.95rem; font-weight: 600; color: var(--tblr-body-color); }
.list-item p { margin: 0; }

.meta, .empty { color: var(--tblr-muted, #8b8578); font-size: 0.85rem; }
.empty { padding: 1rem 0; }

/* Sidebar <a> 避免 button 殘留樣式 */
.navbar-vertical .nav-link { cursor: pointer; }

/* ═══ Fitts's Law：主按鈕放大 + touch target 最小 48px ═══ */

/* 主要行動按鈕（CTA）放大到 48px 高 — WCAG + Android guideline */
.btn-primary {
  min-height: 48px;
  padding: 12px 24px;
  font-size: 1rem;
}

/* 次要按鈕也確保 touch-friendly */
.btn-outline-primary, .btn-secondary, .btn-danger {
  min-height: 44px;
  padding: 10px 20px;
}

/* 小按鈕（btn-sm）不能低於 36px */
.btn-sm {
  min-height: 36px;
  padding: 6px 12px;
}

/* 相關按鈕靠在一起（減少移動距離）*/
.action-cluster {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* 底部固定操作列（常用操作永遠在手邊）*/
.sticky-actions {
  position: sticky;
  bottom: 0;
  background: var(--tblr-card-bg, #16213e);
  border-top: 1px solid var(--tblr-border-color, #2a3a5c);
  padding: 12px 20px;
  margin: 0 -20px -20px;
  border-radius: 0 0 8px 8px;
  z-index: 10;
}

/* ═══ Hick's Law：漸進式揭示 ═══ */

/* 進階選項折疊 */
.advanced-options {
  border-top: 1px solid var(--tblr-border-color, #2a3a5c);
  margin-top: 16px;
  padding-top: 12px;
}

.advanced-toggle {
  background: none;
  border: none;
  color: var(--tblr-muted, #8b8578);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.advanced-toggle:hover { color: var(--tblr-primary, #e8a838); }

.advanced-toggle .ti { transition: transform 0.2s; }
.advanced-toggle[aria-expanded="true"] .ti { transform: rotate(90deg); }

.advanced-content {
  display: none;
  padding-top: 12px;
}

.advanced-content.show { display: block; }

/* 步驟指示（告訴用戶現在在第幾步）*/
.step-indicator {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}

.step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tblr-border-color, #2a3a5c);
}

.step-dot.active {
  background: var(--tblr-primary, #e8a838);
  width: 24px;
  border-radius: 4px;
}