/* Freelancer Marketing CRM & Hub Styling */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --primary-light: #eef2ff;
  --secondary: #0ea5e9;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --purple: #8b5cf6;
  --pink: #ec4899;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background-color: #f8fafc;
  color: #1e293b;
  overflow-x: hidden;
}

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

/* Glassmorphism & Soft Cards */
.glass-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.hover-card-rise {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-card-rise:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.08);
}

/* Status Badges */
.badge-lead { background-color: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.badge-consulting { background-color: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.badge-proposal { background-color: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.badge-won { background-color: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.badge-active { background-color: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; font-weight: 600; }
.badge-retention { background-color: #faf5ff; color: #7e22ce; border: 1px solid #e9d5ff; }

.badge-urgent { background-color: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.badge-high { background-color: #fff7ed; color: #c2410c; border: 1px solid #ffedd5; }
.badge-medium { background-color: #f0fdf4; color: #15803d; border: 1px solid #dcfce7; }
.badge-low { background-color: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }

/* Service Tags */
.tag-shopee { background-color: #fff1f0; color: #e04122; border: 1px solid #ffccc7; }
.tag-tiktok { background-color: #000000; color: #ffffff; }
.tag-facebook { background-color: #ebf5ff; color: #0064e0; border: 1px solid #bae0ff; }
.tag-koc { background-color: #fdf2f8; color: #db2777; border: 1px solid #fbcfe8; }
.tag-media { background-color: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe; }

/* Kanban Columns */
.kanban-col {
  min-height: calc(100vh - 270px);
  background: #f8fafc;
  border-radius: 1rem;
}

/* Modal Transitions */
.modal-backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}

.tab-active {
  background-color: #4f46e5 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.25s ease-out forwards;
}

/* ==================== CHẾ ĐỘ TỐI (DARK MODE) ==================== */
html.dark body,
body.dark-mode {
  background-color: #0b0f19 !important;
  color: #e2e8f0 !important;
}

html.dark aside,
body.dark-mode aside {
  background-color: #111827 !important;
  border-color: #1e293b !important;
}

html.dark header,
body.dark-mode header {
  background-color: #111827 !important;
  border-color: #1e293b !important;
}

html.dark #pageTitle,
body.dark-mode #pageTitle {
  color: #f8fafc !important;
}

/* Dark mode cards & containers */
html.dark .bg-white,
body.dark-mode .bg-white {
  background-color: #161f30 !important;
  color: #e2e8f0 !important;
}

html.dark .bg-slate-50,
body.dark-mode .bg-slate-50 {
  background-color: #0f172a !important;
}

html.dark .bg-slate-100,
body.dark-mode .bg-slate-100 {
  background-color: #1e293b !important;
}

html.dark .border-slate-100,
html.dark .border-slate-200,
html.dark .border-slate-200\/80,
body.dark-mode .border-slate-100,
body.dark-mode .border-slate-200,
body.dark-mode .border-slate-200\/80 {
  border-color: #243044 !important;
}

html.dark .text-slate-800,
html.dark .text-slate-900,
body.dark-mode .text-slate-800,
body.dark-mode .text-slate-900 {
  color: #f8fafc !important;
}

html.dark .text-slate-700,
body.dark-mode .text-slate-700 {
  color: #cbd5e1 !important;
}

html.dark .text-slate-600,
body.dark-mode .text-slate-600 {
  color: #94a3b8 !important;
}

html.dark .text-slate-500,
body.dark-mode .text-slate-500 {
  color: #94a3b8 !important;
}

/* Dark mode inputs & controls */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html.dark select,
html.dark textarea,
body.dark-mode input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body.dark-mode select,
body.dark-mode textarea {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #f8fafc !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder,
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #64748b !important;
}

/* Kanban in dark mode */
html.dark .kanban-col,
body.dark-mode .kanban-col {
  background-color: #0f172a !important;
  border: 1px solid #1e293b;
}

/* Glass cards in dark mode */
html.dark .glass-card,
body.dark-mode .glass-card {
  background: rgba(22, 31, 48, 0.88) !important;
  border: 1px solid rgba(51, 65, 85, 0.6) !important;
}

/* Dark mode scrollbars */
html.dark ::-webkit-scrollbar-track,
body.dark-mode ::-webkit-scrollbar-track {
  background: #0f172a;
}
html.dark ::-webkit-scrollbar-thumb,
body.dark-mode ::-webkit-scrollbar-thumb {
  background: #334155;
}
html.dark ::-webkit-scrollbar-thumb:hover,
body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* VIP V1 Badge & Glow Animation */
.badge-v1-vip {
  background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
  color: #1e1b4b;
  font-weight: 800;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.45);
  border: 1px solid #fef3c7;
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(245, 158, 11, 0.4); }
  50% { box-shadow: 0 0 18px rgba(245, 158, 11, 0.85); }
}

.glow-v1 {
  animation: pulseGlow 2.5s infinite;
}

/* Format Tooltips & Print */
@media print {
  .no-print {
    display: none !important;
  }
  .print-only {
    display: block !important;
  }
  body {
    background: white;
  }
}