/* ============================================================
   tokens-v2.css — 換皮 Phase 1 (2026-04-27)
   來源：private_docs/ui_kits/admin_v2/shared.jsx
   用途：深色青藍科技感色彩系統，定義為 CSS 變數
   ⚠️ 此檔載入但不影響舊版 UI，只是備好新工具
   ============================================================ */

:root {
  /* ---------- 文字色 (TXT) ---------- */
  --v2-txt-primary:   #E2E8F0;
  --v2-txt-secondary: #94A3B8;
  --v2-txt-tertiary:  #64748B;
  --v2-txt-faint:     #475569;

  /* ---------- 背景色 (BG) ---------- */
  --v2-bg-app:         #0B1220;
  --v2-bg-surface:     #11182B;
  --v2-bg-surface2:    #1A2236;
  --v2-bg-line:        rgba(148, 163, 184, 0.14);
  --v2-bg-line-strong: rgba(148, 163, 184, 0.28);

  /* ---------- 強調色 (AC) ---------- */
  --v2-ac-cyan:  #22D3EE;
  --v2-ac-cyan2: #0EA5E9;
  --v2-ac-blue:  #3B82F6;
  --v2-ac-green: #10B981;
  --v2-ac-amber: #F59E0B;
  --v2-ac-red:   #EF4444;

  /* ---------- 漸層 ---------- */
  --v2-grad: linear-gradient(135deg, #22D3EE 0%, #0EA5E9 60%, #3B82F6 100%);

  /* ---------- 字型 ---------- */
  --v2-font-sans: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --v2-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- 圓角 ---------- */
  --v2-radius-sm: 5px;
  --v2-radius-md: 9px;
  --v2-radius-lg: 12px;
  --v2-radius-xl: 14px;

  /* ---------- 陰影 ---------- */
  --v2-shadow-btn:  0 8px 20px -8px rgba(14, 165, 233, 0.5);
  --v2-shadow-glow: 0 0 0 1px rgba(14, 165, 233, 0.3),
                    0 0 40px -10px rgba(14, 165, 233, 0.35);
}

/* ============================================================
   v2 utility class（限「v2-」前綴，不污染既有 Tailwind class）
   ============================================================ */

/* 頁面底色 — 套上 .v2-app 整頁變深色 */
.v2-app {
  background: var(--v2-bg-app);
  color: var(--v2-txt-primary);
  font-family: var(--v2-font-sans);
}

/* 卡片基底 */
.v2-card {
  background: var(--v2-bg-surface);
  border: 1px solid var(--v2-bg-line);
  border-radius: var(--v2-radius-xl);
  padding: 16px;
}
.v2-card-glow {
  box-shadow: var(--v2-shadow-glow);
}

/* 數字用等寬 */
.v2-tabular {
  font-variant-numeric: tabular-nums;
}

/* SectionLabel 文字樣式 */
.v2-section-label {
  color: var(--v2-txt-tertiary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ============================================================
   v2 動畫
   ============================================================ */

/* 警示卡呼吸動畫（逾期 / 待審核 用）*/
@keyframes v2pulse {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.3),
                0 0 20px -8px rgba(245, 158, 11, 0.4);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.5),
                0 0 32px -6px rgba(245, 158, 11, 0.6);
  }
}

/* 事故 banner 紅點脈動 — Phase 3 加 */
@keyframes hh_pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ============================================================
   Phase 3-J：全局 scrollbar V2 dark（取代 Tim 看到的白色滾動條）
   ============================================================ */

/* WebKit (Chrome / Safari / Edge / Brave) */
.hh-admin-shell *::-webkit-scrollbar,
.hh-admin-shell::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.hh-admin-shell *::-webkit-scrollbar-track,
.hh-admin-shell::-webkit-scrollbar-track {
  background: #0B1220;
}
.hh-admin-shell *::-webkit-scrollbar-thumb,
.hh-admin-shell::-webkit-scrollbar-thumb {
  background: #1A2236;
  border-radius: 6px;
  border: 2px solid #0B1220;
}
.hh-admin-shell *::-webkit-scrollbar-thumb:hover,
.hh-admin-shell::-webkit-scrollbar-thumb:hover {
  background: #2A3550;
}
.hh-admin-shell *::-webkit-scrollbar-corner,
.hh-admin-shell::-webkit-scrollbar-corner {
  background: #0B1220;
}

/* Firefox */
.hh-admin-shell, .hh-admin-shell * {
  scrollbar-width: thin;
  scrollbar-color: #1A2236 #0B1220;
}

/* ============================================================
   Phase 3-L (2026-04-27)：全域根治 admin 範圍內所有殘餘白色
   策略：限定 .hh-admin-shell 範圍，把 Tailwind light className
        全部 override 成 V2 dark 系統色
   作用範圍：admin 後台（含 modal）；LIFF 司機端不受影響
   ============================================================ */

/* ---------- 背景色：白色/淺灰 → V2 dark surface ---------- */
.hh-admin-shell .bg-white {
  background-color: var(--v2-bg-surface) !important;
  color: var(--v2-txt-primary);
}
.hh-admin-shell .bg-gray-50,
.hh-admin-shell .hover\:bg-gray-50:hover,
.hh-admin-shell .bg-slate-50,
.hh-admin-shell .hover\:bg-slate-50:hover {
  background-color: var(--v2-bg-surface2) !important;
  color: var(--v2-txt-primary);
}
.hh-admin-shell .bg-gray-100,
.hh-admin-shell .hover\:bg-gray-100:hover,
.hh-admin-shell .active\:bg-gray-100:active {
  background-color: var(--v2-bg-surface2) !important;
  color: var(--v2-txt-primary);
}
.hh-admin-shell .bg-gray-200,
.hh-admin-shell .hover\:bg-gray-200:hover,
.hh-admin-shell .active\:bg-gray-200:active {
  background-color: rgba(148,163,184,0.18) !important;
  color: var(--v2-txt-primary);
}
.hh-admin-shell .bg-gray-300 {
  background-color: rgba(148,163,184,0.28) !important;
  color: var(--v2-txt-primary);
}

/* body 基底 */
.hh-admin-shell.bg-gray-100,
body.bg-gray-100 .hh-admin-shell {
  background-color: var(--v2-bg-app) !important;
}

/* ---------- 半透明色階：保留語義但改深色版 ---------- */
.hh-admin-shell .bg-blue-50,
.hh-admin-shell .bg-indigo-50,
.hh-admin-shell .bg-sky-50 {
  background-color: rgba(59,130,246,0.10) !important;
  color: #93C5FD;
}
.hh-admin-shell .bg-cyan-50,
.hh-admin-shell .bg-teal-50 {
  background-color: rgba(34,211,238,0.08) !important;
  color: #67E8F9;
}
.hh-admin-shell .bg-yellow-50,
.hh-admin-shell .bg-amber-50,
.hh-admin-shell .hover\:bg-yellow-50:hover {
  background-color: rgba(245,158,11,0.10) !important;
  color: #FBBF24;
}
.hh-admin-shell .bg-orange-50,
.hh-admin-shell .hover\:bg-orange-50:hover {
  background-color: rgba(249,115,22,0.10) !important;
  color: #FDBA74;
}
.hh-admin-shell .bg-red-50,
.hh-admin-shell .hover\:bg-red-50:hover {
  background-color: rgba(239,68,68,0.10) !important;
  color: #FCA5A5;
}
.hh-admin-shell .bg-green-50,
.hh-admin-shell .bg-emerald-50,
.hh-admin-shell .hover\:bg-green-50:hover {
  background-color: rgba(16,185,129,0.10) !important;
  color: #6EE7B7;
}
.hh-admin-shell .bg-purple-50 {
  background-color: rgba(168,85,247,0.10) !important;
  color: #C4B5FD;
}
.hh-admin-shell .bg-pink-50,
.hh-admin-shell .bg-rose-50 {
  background-color: rgba(244,114,182,0.10) !important;
  color: #F9A8D4;
}

/* ---------- 帶 100 強度色塊 (chips/badges) ---------- */
.hh-admin-shell .bg-blue-100 {
  background-color: rgba(59,130,246,0.18) !important;
  color: #93C5FD;
}
.hh-admin-shell .bg-cyan-100,
.hh-admin-shell .bg-teal-100 {
  background-color: rgba(34,211,238,0.18) !important;
  color: #67E8F9;
}
.hh-admin-shell .bg-yellow-100,
.hh-admin-shell .bg-amber-100 {
  background-color: rgba(245,158,11,0.18) !important;
  color: #FBBF24;
}
.hh-admin-shell .bg-orange-100 {
  background-color: rgba(249,115,22,0.18) !important;
  color: #FDBA74;
}
.hh-admin-shell .bg-red-100 {
  background-color: rgba(239,68,68,0.18) !important;
  color: #FCA5A5;
}
.hh-admin-shell .bg-green-100,
.hh-admin-shell .bg-emerald-100 {
  background-color: rgba(16,185,129,0.18) !important;
  color: #6EE7B7;
}
.hh-admin-shell .bg-indigo-100 {
  background-color: rgba(99,102,241,0.18) !important;
  color: #A5B4FC;
}
.hh-admin-shell .bg-purple-100 {
  background-color: rgba(168,85,247,0.18) !important;
  color: #C4B5FD;
}
.hh-admin-shell .bg-pink-100 {
  background-color: rgba(244,114,182,0.18) !important;
  color: #F9A8D4;
}
.hh-admin-shell .bg-violet-100 {
  background-color: rgba(139,92,246,0.18) !important;
  color: #C4B5FD;
}

/* 200 強度（極少數有看到 bg-yellow-200 等） */
.hh-admin-shell .bg-yellow-200 { background-color: rgba(245,158,11,0.25) !important; color: #FBBF24; }
.hh-admin-shell .bg-amber-200 { background-color: rgba(245,158,11,0.25) !important; color: #FBBF24; }

/* ---------- 文字色：暗背景下要看得清 ---------- */
.hh-admin-shell .text-gray-900,
.hh-admin-shell .text-gray-800,
.hh-admin-shell .text-slate-800,
.hh-admin-shell .text-slate-900 {
  color: var(--v2-txt-primary) !important;
}
.hh-admin-shell .text-gray-700,
.hh-admin-shell .text-gray-600,
.hh-admin-shell .text-slate-700,
.hh-admin-shell .text-slate-600 {
  color: var(--v2-txt-secondary) !important;
}
.hh-admin-shell .text-gray-500,
.hh-admin-shell .text-gray-400,
.hh-admin-shell .text-slate-500,
.hh-admin-shell .text-slate-400 {
  color: var(--v2-txt-tertiary) !important;
}
.hh-admin-shell .text-gray-300,
.hh-admin-shell .text-gray-200,
.hh-admin-shell .text-slate-300,
.hh-admin-shell .text-slate-200 {
  color: var(--v2-txt-faint) !important;
}

/* 強調色文字保留語義（不覆蓋） */
.hh-admin-shell .text-blue-700, .hh-admin-shell .text-blue-600 { color: #93C5FD !important; }
.hh-admin-shell .text-blue-500, .hh-admin-shell .text-blue-400 { color: #60A5FA !important; }
.hh-admin-shell .text-cyan-700, .hh-admin-shell .text-cyan-600 { color: #67E8F9 !important; }
.hh-admin-shell .text-teal-700, .hh-admin-shell .text-teal-600 { color: #5EEAD4 !important; }
.hh-admin-shell .text-yellow-700, .hh-admin-shell .text-yellow-600,
.hh-admin-shell .text-amber-700, .hh-admin-shell .text-amber-600,
.hh-admin-shell .text-amber-800 { color: #FBBF24 !important; }
.hh-admin-shell .text-orange-700, .hh-admin-shell .text-orange-600,
.hh-admin-shell .text-orange-500 { color: #FDBA74 !important; }
.hh-admin-shell .text-red-700, .hh-admin-shell .text-red-600,
.hh-admin-shell .text-red-500 { color: #FCA5A5 !important; }
.hh-admin-shell .text-green-700, .hh-admin-shell .text-green-600,
.hh-admin-shell .text-green-500,
.hh-admin-shell .text-emerald-700, .hh-admin-shell .text-emerald-600 { color: #6EE7B7 !important; }
.hh-admin-shell .text-indigo-700, .hh-admin-shell .text-indigo-600 { color: #A5B4FC !important; }
.hh-admin-shell .text-purple-700, .hh-admin-shell .text-purple-600 { color: #C4B5FD !important; }
.hh-admin-shell .text-pink-700, .hh-admin-shell .text-pink-600 { color: #F9A8D4 !important; }
.hh-admin-shell .text-violet-700, .hh-admin-shell .text-violet-600 { color: #C4B5FD !important; }

/* ---------- 邊框色：灰色 → V2 line ---------- */
.hh-admin-shell .border-gray-100,
.hh-admin-shell .border-gray-200,
.hh-admin-shell .border-slate-100,
.hh-admin-shell .border-slate-200 {
  border-color: var(--v2-bg-line) !important;
}
.hh-admin-shell .border-gray-300,
.hh-admin-shell .border-slate-300 {
  border-color: var(--v2-bg-line-strong) !important;
}
.hh-admin-shell .border-t,
.hh-admin-shell .border-b,
.hh-admin-shell .border-l,
.hh-admin-shell .border-r,
.hh-admin-shell .border {
  border-color: var(--v2-bg-line);
}

/* ---------- input / select / textarea 統一深色 ---------- */
.hh-admin-shell input[type="text"],
.hh-admin-shell input[type="email"],
.hh-admin-shell input[type="password"],
.hh-admin-shell input[type="number"],
.hh-admin-shell input[type="tel"],
.hh-admin-shell input[type="date"],
.hh-admin-shell input[type="datetime-local"],
.hh-admin-shell input[type="search"],
.hh-admin-shell input:not([type]),
.hh-admin-shell select,
.hh-admin-shell textarea {
  background-color: var(--v2-bg-surface2) !important;
  color: var(--v2-txt-primary) !important;
  border-color: var(--v2-bg-line) !important;
}
.hh-admin-shell input::placeholder,
.hh-admin-shell textarea::placeholder { color: var(--v2-txt-faint) !important; }

/* readonly input 顯示更暗 */
.hh-admin-shell input[readonly],
.hh-admin-shell select[disabled],
.hh-admin-shell input[disabled] {
  background-color: rgba(15,22,38,0.6) !important;
  color: var(--v2-txt-tertiary) !important;
}

/* ---------- 漸層背景：from-emerald-50 to-white 之類覆蓋 ---------- */
.hh-admin-shell [class*="from-emerald-50"],
.hh-admin-shell [class*="from-blue-50"],
.hh-admin-shell [class*="from-yellow-50"],
.hh-admin-shell [class*="from-red-50"],
.hh-admin-shell [class*="from-green-50"] {
  background-image: none !important;
}

/* ---------- shadow 系列：light shadow → glow ---------- */
.hh-admin-shell .shadow-sm,
.hh-admin-shell .shadow,
.hh-admin-shell .shadow-md {
  box-shadow: 0 4px 12px -4px rgba(0,0,0,0.4) !important;
}
.hh-admin-shell .shadow-lg,
.hh-admin-shell .shadow-xl,
.hh-admin-shell .shadow-2xl {
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.6), 0 0 0 1px rgba(34,211,238,0.08) !important;
}

/* ---------- divide-* (Tailwind divider 線) ---------- */
.hh-admin-shell [class*="divide-gray"] > :not([hidden]) ~ :not([hidden]),
.hh-admin-shell [class*="divide-slate"] > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--v2-bg-line) !important;
}

/* ============================================================
   Phase 3-P (2026-04-27)：V2Page 元件 mobile responsive
   ============================================================ */
@media (max-width: 768px) {
  .hh-admin-shell .hh-hero-row {
    grid-template-columns: 1fr !important;
  }
  .hh-admin-shell .hh-rev-cols {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 1024px) and (min-width: 769px) {
  .hh-admin-shell .hh-hero-row {
    grid-template-columns: 1fr 1fr !important;
  }
  .hh-admin-shell .hh-rev-cols {
    grid-template-columns: 1fr !important;
  }
}