/* ==========================================================================
   Project TrustCV - Production PWA Styling System
   Tokens, Typography, Micro-animations & Multi-Theme Adaptations
   ========================================================================== */

/* 隱藏原生滾動條但保留流暢滾動 */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 呼吸微光動畫 */
@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.35;
    transform: scale(1);
  }
  50% {
    opacity: 0.75;
    transform: scale(1.04);
  }
}

.animate-pulse-glow {
  animation: pulseGlow 3s ease-in-out infinite;
}

/* 掃描線動畫 (審計與驗證狀態) */
@keyframes scanMove {
  0% {
    top: 0%;
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

.animate-scan {
  animation: scanMove 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* 卡片光澤邊框 Hover 效果 */
.glass-card {
  background: rgba(18, 26, 36, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(30, 41, 59, 0.8);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  border-color: rgba(61, 245, 167, 0.5);
  box-shadow: 0 10px 25px -5px rgba(5, 150, 105, 0.15);
}

/* 響應式安全區域 (iOS Safe Area Padding) */
.safe-top {
  padding-top: env(safe-area-inset-top, 0px);
}
.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* 彈窗入場動畫 */
@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.animate-modal-in {
  animation: modalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 明亮模式覆蓋樣式 (Light Theme Overrides - Strict Separation) */
.light-mode {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
}

.light-mode #app-root {
  background-color: #F8FAFC !important;
}

.light-mode .glass-card {
  background: #FFFFFF !important;
  border-color: #E2E8F0 !important;
  box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}

.light-mode .glass-card:hover {
  border-color: rgba(16, 185, 129, 0.5) !important;
  box-shadow: 0 12px 28px -4px rgba(16, 185, 129, 0.12) !important;
}

.light-mode .bg-brand-obsidian,
.light-mode .bg-brand-obsidian\/95 {
  background-color: rgba(255, 255, 255, 0.98) !important;
}

.light-mode .bg-brand-card,
.light-mode .bg-brand-card\/80 {
  background-color: #FFFFFF !important;
  box-shadow: 0 4px 14px -2px rgba(15, 23, 42, 0.05) !important;
}

.light-mode .border-brand-border,
.light-mode .border-slate-800,
.light-mode .border-slate-800\/80,
.light-mode .border-slate-800\/60,
.light-mode .border-slate-700 {
  border-color: #E2E8F0 !important;
}

.light-mode .text-white,
.light-mode .text-slate-100 {
  color: #0F172A !important;
}

.light-mode .text-slate-200 {
  color: #1E293B !important;
}

.light-mode .text-slate-300 {
  color: #334155 !important;
}

.light-mode .text-slate-400 {
  color: #64748B !important;
}

.light-mode .text-slate-500 {
  color: #94A3B8 !important;
}

/* 灰底區塊轉換為白瓷淺灰 */
.light-mode .bg-slate-900,
.light-mode .bg-slate-900\/90,
.light-mode .bg-slate-900\/80,
.light-mode .bg-slate-900\/70,
.light-mode .bg-slate-900\/60,
.light-mode .bg-slate-900\/40 {
  background-color: #F1F5F9 !important;
}

.light-mode .bg-slate-800,
.light-mode .bg-slate-800\/80 {
  background-color: #E2E8F0 !important;
  color: #334155 !important;
}

.light-mode .bg-slate-800:hover {
  background-color: #CBD5E1 !important;
  color: #0F172A !important;
}

/* 綠標徽章與高亮狀態 */
.light-mode .bg-emerald-950,
.light-mode .bg-emerald-950\/70,
.light-mode .bg-brand-forest\/40,
.light-mode .bg-brand-forest\/50 {
  background-color: #ECFDF5 !important;
  border-color: #A7F3D0 !important;
}

.light-mode .text-brand-mint {
  color: #059669 !important;
}

.light-mode .text-emerald-400,
.light-mode .text-emerald-400\/90 {
  color: #047857 !important;
}

/* 琥珀色與警告警示區塊 */
.light-mode .bg-amber-950\/60,
.light-mode .bg-amber-950 {
  background-color: #FFFBEB !important;
  border-color: #FDE68A !important;
}

.light-mode .text-amber-400 {
  color: #D97706 !important;
}

/* 桌面端導航與 Tab */
.light-mode .desktop-nav-active {
  background-color: #FFFFFF !important;
  color: #059669 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

/* 表單輸入框亮色模式 */
.light-mode input[type="text"],
.light-mode input[type="email"],
.light-mode input[type="file"] {
  background-color: #F8FAFC !important;
  border-color: #CBD5E1 !important;
  color: #0F172A !important;
}

.light-mode input::placeholder {
  color: #94A3B8 !important;
}