/* Custom styles and animations - CATIF FinTech & SaaS Theme */
:root {
  --color-primary-navy: #071C45;
  --color-secondary-blue: #0A2A66;
  --color-brand-yellow: #FFD21E;
  --color-wa-green: #25D366;
  --color-danger-red: #EF4444;
  --color-bg-slate: #F8FAFC;

  --color-wa: #25D366;
  --color-admin: #071C45;
  --color-social: #0A2A66;
  --color-quota: #FFD21E;
  --color-safety: #7A5600;
}

@layer utilities {
  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .scrollbar-thin::-webkit-scrollbar-track {
    background: #F1F5F9;
  }
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 9999px;
  }
  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
  }
}

body {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  background-color: #F8FAFC !important;
  color: #0F172A !important;
}

/* White Theme Surface & Card Overrides */
.glass-panel {
  background: #FFFFFF !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03) !important;
  color: #0F172A !important;
}

.glass-panel-elevated {
  background: #FFFFFF !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.04) !important;
  color: #0F172A !important;
}

/* Auth / Login Screen White Theme */
#auth-screen {
  background: #F8FAFC !important;
}
#auth-screen > div {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.12) !important;
}
#auth-screen h2 {
  color: #0F172A !important;
}
#auth-screen input {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}

/* Header & Nav */
header.glass-panel {
  background: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid #E2E8F0 !important;
}
header h1 {
  color: #0F172A !important;
}

/* Common Text Overrides for Light Theme */
.text-slate-100, .text-slate-200, .text-slate-300 {
  color: #334155;
}
.text-slate-400 {
  color: #64748B;
}

/* Dark Container Protection: ensure Navy & dark cards maintain pristine light text */
.bg-\[\#071C45\] *, .bg-\[\#0A2A66\] *, .quota-dark *, .dark-card * {
  /* Inherit high contrast text */
}
.bg-\[\#071C45\] .text-white, .bg-\[\#0A2A66\] .text-white, .quota-dark .text-white, .dark-card .text-white {
  color: #FFFFFF !important;
}
.bg-\[\#071C45\] .text-slate-200, .bg-\[\#0A2A66\] .text-slate-200, .quota-dark .text-slate-200 {
  color: #F1F5F9 !important;
}
.bg-\[\#071C45\] .text-slate-300, .bg-\[\#0A2A66\] .text-slate-300, .quota-dark .text-slate-300 {
  color: #E2E8F0 !important;
}
.bg-\[\#071C45\] .text-slate-400, .bg-\[\#0A2A66\] .text-slate-400, .quota-dark .text-slate-400 {
  color: #94A3B8 !important;
}
.bg-\[\#071C45\] .text-amber-400, .bg-\[\#071C45\] .text-\[\#FFD21E\], .quota-dark .text-amber-400 {
  color: #FFD21E !important;
}

/* Background Card Overrides */
.bg-slate-900\/50, .bg-slate-900\/80, .bg-slate-800\/80, .bg-slate-800, .bg-\[\#1E293B\], .bg-\[\#1E293B\]\/85, .bg-\[\#202c33\], .bg-\[\#111b21\] {
  background-color: #FFFFFF !important;
}
.border-slate-700, .border-slate-700\/60, .border-slate-800, .border-\[\#374045\] {
  border-color: #E2E8F0 !important;
}

/* Inputs & Form Controls */
input, textarea, select {
  background-color: #FFFFFF !important;
  color: #0F172A !important;
  border-color: #CBD5E1 !important;
}
input:focus, textarea:focus, select:focus {
  border-color: #2563EB !important;
  outline: none !important;
}

/* Table styling in white theme */
table thead {
  background-color: #F1F5F9 !important;
  color: #475569 !important;
}
table tbody tr {
  border-color: #F1F5F9 !important;
}
table tbody tr:hover {
  background-color: #F8FAFC !important;
}

/* Animations */
@keyframes pulse-subtle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(1.02); }
}

.pulse-subtle {
  animation: pulse-subtle 2s infinite ease-in-out;
}

/* Toast message slide-in */
.toast-enter {
  animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.toast-exit {
  animation: toastOut 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toastOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
  }
}

/* ========================================================
   WhatsApp Connection Hub Custom Scrollbar & Indicator
   ======================================================== */
.custom-hub-scrollbar::-webkit-scrollbar {
  width: 8px;
}
.custom-hub-scrollbar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}
.custom-hub-scrollbar::-webkit-scrollbar-thumb {
  background: #FFD21E;
  border-radius: 4px;
}
.custom-hub-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #EAB308;
}
.custom-hub-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #FFD21E rgba(255, 255, 255, 0.08);
}

/* ========================================================
   Modern SaaS Module Navigation Tabs (Notion / Stripe Style)
   ======================================================== */
.module-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #64748B;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
  white-space: nowrap;
  background: transparent;
  cursor: pointer;
}

.module-tab:hover {
  color: #071C45;
  border-bottom-color: #CBD5E1;
}

.module-tab.active {
  color: #071C45 !important;
  font-weight: 700 !important;
  border-bottom-color: #071C45 !important;
}

/* Workspace iframe embedding: prevent double main navbar */
.in-workspace-iframe #main-app-navbar {
  display: none !important;
}

/* WhatsApp Connection & Dual-SIM Hub Overlay */
#login-modal {
  z-index: 99999 !important;
}

/* Chatbot Pill Tabs */
.cb-pill-tab {
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  font-family: inherit;
}

/* ========================================================
   Smart Keyword Trigger Rules: High Visibility Inputs & Chips
   ======================================================== */
.keyword-input-styled {
  background-color: #FFFFFF !important;
  color: #071C45 !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  border: 1.5px solid #CBD5E1 !important;
  border-radius: 0.75rem !important;
  padding: 0.625rem 0.875rem !important;
  width: 100% !important;
  min-width: 150px !important;
  transition: all 0.2s ease-in-out !important;
}

.keyword-input-styled:focus {
  border-color: #10B981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
  outline: none !important;
}

.keyword-input-styled.has-value {
  border-color: #10B981 !important;
}

.keyword-input-styled::placeholder {
  color: #64748B !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  opacity: 1 !important;
}

/* Active Keyword Tag / Chip: Background #DCFCE7, Text #15803D, Border #86EFAC */
.keyword-active-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  background-color: #DCFCE7 !important;
  color: #15803D !important;
  border: 1px solid #86EFAC !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important; /* 13px */
  padding: 0.25rem 0.65rem !important;
  border-radius: 0.5rem !important;
  line-height: 1.25 !important;
  user-select: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.15s ease !important;
}
.keyword-active-chip:hover {
  background-color: #BBF7D0 !important;
  border-color: #4ADE80 !important;
}
.keyword-active-chip .chip-remove-btn {
  cursor: pointer;
  color: #166534;
  font-weight: 700;
  font-size: 0.75rem;
  margin-left: 2px;
  padding: 0 2px;
  border-radius: 9999px;
  transition: all 0.15s ease;
}
.keyword-active-chip .chip-remove-btn:hover {
  color: #DC2626;
  background-color: rgba(220, 38, 38, 0.1);
}

/* Sample Quick-Add Keyword Pill */
.sample-kw-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.65rem;
  background-color: #F8FAFC;
  border: 1px dashed #CBD5E1;
  color: #334155;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.sample-kw-pill:hover {
  background-color: #DCFCE7;
  border-color: #86EFAC;
  color: #15803D;
  transform: translateY(-1px);
}

/* ========================================================
   Enhanced Greeting Message Editor & Live WhatsApp Preview
   ======================================================== */
.greeting-textarea-custom {
  background-color: #FFFFFF !important;
  color: #071C45 !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
  padding: 16px !important;
  border-radius: 16px !important;
  border: 1.5px solid #CBD5E1 !important;
  font-weight: 600 !important;
  min-height: 220px !important;
  overflow-y: hidden !important;
  resize: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: min-height 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.greeting-textarea-custom:focus {
  border-color: #10B981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
  outline: none !important;
}

.greeting-textarea-custom::placeholder {
  color: #64748B !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  opacity: 1 !important;
}

.greeting-textarea-custom.editor-expanded {
  min-height: 400px !important;
}

/* WhatsApp Live Preview Chat Bubble */
.wa-chat-preview-bubble {
  position: relative;
  background-color: #FFFFFF;
  color: #071C45;
  border: 1px solid #E2E8F0;
  border-radius: 18px;
  border-top-left-radius: 4px;
  padding: 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  font-size: 14px;
  line-height: 1.75;
}