/* ═══════════════════════════════════════════
   GLOBAL.CSS — Reset, Variables, Typography
   ═══════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --primary-light: #e0e7ff;
  --primary-dark: #312e81;
  --success: #10b981;
  --success-hover: #059669;
  --danger: #ef4444;
  --danger-hover: #dc2626;
  --danger-light: #fee2e2;
  --warning: #f59e0b;
  --warning-light: #fef3c7;
  --info: #3b82f6;
  --info-light: #dbeafe;

  --gradient-primary: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
  --gradient-success: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  --gradient-danger: linear-gradient(135deg, #ef4444 0%, #f87171 100%);

  --bg: #f8fafc;
  --card: #ffffff;
  --text-dark: #0f172a;
  --text-muted: #64748b;
  --text-light: #94a3b8;
  --border: #e2e8f0;
  --input-bg: #ffffff;

  --sidebar-bg: #0f172a;
  --sidebar-hover: #1e293b;
  --sidebar-active: #4f46e5;
  --sidebar-text: #94a3b8;
  --sidebar-text-active: #ffffff;
  --sidebar-width: 260px;

  --wa-header: #075e54;
  --wa-chat-bg: #ece5dd;
  --wa-bubble: #dcf8c6;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
  --shadow-md: 0 10px 25px rgba(0,0,0,0.06);
  --shadow-lg: 0 20px 40px -10px rgba(0,0,0,0.1);
  --shadow-xl: 0 30px 60px -15px rgba(0,0,0,0.15);
}

/* ── Dark Theme ───────────────────────────── */
[data-theme="dark"] {
  --bg: #0f172a;
  --card: #1e293b;
  --text-dark: #f1f5f9;
  --text-muted: #94a3b8;
  --text-light: #64748b;
  --border: #334155;
  --input-bg: #0f172a;
  --sidebar-bg: #020617;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
  --shadow-md: 0 10px 25px rgba(0,0,0,0.3);
  --shadow-lg: 0 20px 40px -10px rgba(0,0,0,0.4);
  --shadow-xl: 0 30px 60px -15px rgba(0,0,0,0.5);
}

[data-theme="dark"] .top-bar { background: var(--card); }
[data-theme="dark"] .card-header { background: rgba(30,41,59,0.8); }
[data-theme="dark"] tr:hover { background: rgba(51,65,85,0.4); }
[data-theme="dark"] .modern-card-header { background: rgba(30,41,59,0.8); }
[data-theme="dark"] .insight-mini-card { background: #0f172a; }
[data-theme="dark"] .ai-warning-box { background: rgba(239,68,68,0.1); }
[data-theme="dark"] .modal-glass { background: rgba(30,41,59,0.95); }
[data-theme="dark"] .badge-success { background: rgba(16,185,129,0.15); }
[data-theme="dark"] .badge-warning { background: rgba(245,158,11,0.15); }
[data-theme="dark"] .badge-primary { background: rgba(99,102,241,0.2); }
[data-theme="dark"] .badge-danger { background: rgba(239,68,68,0.15); }
[data-theme="dark"] .dash-list-time { background: rgba(99,102,241,0.15); }

/* ── WhatsApp Dark Mode Overrides ────────── */
[data-theme="dark"] { --wa-header: #202c33; }
[data-theme="dark"] .wa-chat-area { background-color: #0b141a; border-radius: 0; }
[data-theme="dark"] .wa-date-divider { background: rgba(32,44,51,0.8); color: #8696a0; }
[data-theme="dark"] .wa-message-bubble { background: #005c4b; color: #e9edef; box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
[data-theme="dark"] .wa-message-bubble::before { border-top-color: #005c4b; border-right-color: #005c4b; }
[data-theme="dark"] .wa-message-sender { color: #53bdeb; }
[data-theme="dark"] .wa-message-textarea { color: #e9edef; }
[data-theme="dark"] .wa-message-meta { color: rgba(255,255,255,0.6); }
[data-theme="dark"] .wa-intelligence-match { background: rgba(32,44,51,0.85); border: 1px solid rgba(255,255,255,0.05); color: #e9edef; }
[data-theme="dark"] .match-score, [data-theme="dark"] .match-address { color: #e9edef; }
[data-theme="dark"] .ai-insight { background: rgba(32,44,51,0.5); border-color: rgba(255,255,255,0.1); color: #8696a0; }
[data-theme="dark"] .wa-select-tactic { color: #e9edef; background: #2a3942; border-radius: 4px; padding: 2px 4px; }
[data-theme="dark"] .wa-footer-action { background: #202c33; border-top: 1px solid rgba(255,255,255,0.05); }

/* ── Password Wrapper ────────────────────── */
.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.password-wrapper .form-input {
  flex: 1;
  padding-right: 44px;
}
.password-wrapper .toggle-password {
  position: absolute;
  right: 14px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 1rem;
  transition: color 0.2s;
}
.password-wrapper .toggle-password:hover {
  color: var(--primary);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Montserrat', sans-serif;
  color: var(--text-dark);
  background-color: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }

.hidden { display: none !important; }

/* ── Animations ───────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes modalIn {
  0% { opacity: 0; transform: scale(0.95) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(0,71,171,0.4); }
  70% { box-shadow: 0 0 0 6px rgba(0,71,171,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,71,171,0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-fade-in { animation: fadeInUp 0.5s cubic-bezier(0.16,1,0.3,1) forwards; }
.animate-slide-in { animation: slideInLeft 0.4s ease forwards; }
.animate-modal-in { animation: modalIn 0.4s cubic-bezier(0.16,1,0.3,1) forwards; }

/* ── Scrollbar ────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-light); }