/* ===================================
   Translation Panel - Shared Styles
   =================================== */

/* Card shadow system */
:root {
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 24px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
}

/* Custom shadow classes (Tailwind CDN doesn't have these) */
.shadow-card { box-shadow: var(--shadow-card); }
.hover\:shadow-md:hover { box-shadow: var(--shadow-md); }

/* Smooth transitions */
* { transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }

/* Table enhancements */
table tbody tr:hover td { background-color: #f8fafc !important; }
table tbody tr { transition: background-color 0.1s ease; }

/* Badge pulse animation */
@keyframes badgePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.badge-pulse { animation: badgePulse 0.3s ease; }

/* Select dropdown arrow fix for Firefox */
select { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 2.5rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

/* Skeleton loading */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton { background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 0.5rem; }
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-heading { height: 24px; width: 60%; margin-bottom: 12px; }
.skeleton-card { height: 100px; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Toast animation */
@keyframes slideInRight { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
.animate-slide-in { animation: slideInRight 0.3s ease-out; }

/* Fade scale modal */
@keyframes fadeScale { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.modal-box { animation: fadeScale 0.2s ease-out; }

/* =========== DARK MODE =========== */
.dark body, body.dark { background: #0f172a; color: #e2e8f0; }
.dark .bg-white { background: #1e293b !important; }
.dark .bg-slate-50 { background: #0f172a !important; }
.dark .text-slate-900 { color: #f1f5f9 !important; }
.dark .text-slate-800 { color: #e2e8f0 !important; }
.dark .text-slate-700 { color: #cbd5e1 !important; }
.dark .text-slate-600 { color: #94a3b8 !important; }
.dark .text-slate-500 { color: #64748b !important; }
.dark .border-slate-200 { border-color: #334155 !important; }
.dark .border-slate-200\/60 { border-color: #334155 !important; }
.dark .border-slate-100 { border-color: #1e293b !important; }
.dark .shadow-card { box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2) !important; }
.dark .bg-gray-100 { background: #1e293b !important; }
.dark table thead { background: #1e293b; }
.dark table tbody tr:hover td { background: #1e293b !important; }
.dark .sidebar-link:hover { background: #1e293b !important; }
.dark .sidebar-link.active { background: rgba(255,255,255,0.1) !important; }
.dark .spreadsheet-table td { background: #1e293b !important; border-color: #334155 !important; }
.dark .spreadsheet-table th { background: #0f172a !important; border-color: #334155 !important; }
.dark .spreadsheet-table tbody tr:hover td { background: #334155 !important; }
.dark input, .dark select, .dark textarea { background: #1e293b !important; color: #e2e8f0 !important; border-color: #334155 !important; }
.dark .bg-slate-100 { background: #1e293b !important; }
.dark .bg-teal-50 { background: #134e4a !important; }
.dark .bg-slate-200 { background: #334155 !important; }
.dark .hover\:bg-slate-50:hover { background: #334155 !important; }
.dark .hover\:bg-slate-100:hover { background: #334155 !important; }
.dark .spreadsheet-table th[data-translator] { color: #e2e8f0 !important; }
.dark .spreadsheet-table thead th { color: #e2e8f0 !important; }
.dark .spreadsheet-table tfoot td { color: #e2e8f0 !important; }
.dark .line-display { background: #334155 !important; color: #e2e8f0 !important; }
.dark .spreadsheet-table input { color: #e2e8f0 !important; background: #1e293b !important; }
.dark .series-title { color: #f87171 !important; }
.dark .csub-title { color: #818cf8 !important; }
.dark .movies-list-title { color: #f87171 !important; }

/* Barba.js transitions */
[data-barba="container"] { opacity: 1; }
.barba-leave-active { opacity: 0; transition: opacity 0.15s; }
.barba-enter-active { opacity: 1; transition: opacity 0.15s; }