/* Litia Leads - Template color accents and visual details */

/* Dashboard KPI cards - template primary/info/success accents */
.card.kpi-card {
  border-left: 4px solid var(--bs-primary);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card.kpi-card:hover {
  box-shadow: 0 0.25rem 0.5rem rgba(99, 91, 255, 0.15);
}
.card.kpi-card.kpi-total { border-left-color: var(--bs-primary); }
.card.kpi-card.kpi-new    { border-left-color: var(--bs-info); }
.card.kpi-card.kpi-messenger { border-left-color: var(--bs-success); }
.card.kpi-card.kpi-leadads { border-left-color: var(--bs-warning); }

.card.kpi-card .card-body h3 {
  color: var(--bs-primary);
  font-weight: 700;
}
.card.kpi-card.kpi-new .card-body h3 { color: var(--bs-info); }
.card.kpi-card.kpi-messenger .card-body h3 { color: var(--bs-success); }
.card.kpi-card.kpi-leadads .card-body h3 { color: var(--bs-warning); }

/* Main content cards - subtle border and shadow */
.body-wrapper .card {
  border: 1px solid var(--bs-gray-200);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.body-wrapper .card-header {
  background: var(--bs-light);
  border-bottom: 1px solid var(--bs-gray-200);
  font-weight: 600;
}

/* Sidebar active state - template primary */
.sidebar-nav .sidebar-link.active,
.sidebar-nav .sidebar-link:hover {
  background: rgba(99, 91, 255, 0.08);
  color: var(--bs-primary);
}

/* Tables - striped with subtle primary on hover */
.table-hover tbody tr:hover {
  background-color: rgba(99, 91, 255, 0.04);
}

/* Buttons - ensure primary stands out */
.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}
.btn-primary:hover {
  background-color: #5046e5;
  border-color: #5046e5;
}

/* Alerts - use template colors */
.alert-success { border-left: 4px solid var(--bs-success); }
.alert-danger { border-left: 4px solid var(--bs-danger); }
.alert-info { border-left: 4px solid var(--bs-info); }

/* Page titles */
.card-title.fw-semibold {
  color: var(--bs-dark);
}

/* Dashboard 3 style - subtle gradient KPI cards (template _background.scss) */
.card.primary-gradient {
  background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), 0.12) 0%, rgba(var(--bs-primary-rgb), 0.03) 100%);
  border: none;
}
.card.warning-gradient {
  background: linear-gradient(180deg, rgba(var(--bs-warning-rgb), 0.12) 0%, rgba(var(--bs-warning-rgb), 0.03) 100%);
  border: none;
}
.card.secondary-gradient {
  background: linear-gradient(180deg, rgba(var(--bs-secondary-rgb), 0.12) 0%, rgba(var(--bs-secondary-rgb), 0.03) 100%);
  border: none;
}
.card.danger-gradient {
  background: linear-gradient(180deg, rgba(var(--bs-danger-rgb), 0.12) 0%, rgba(var(--bs-danger-rgb), 0.03) 100%);
  border: none;
}
.card.success-gradient {
  background: linear-gradient(180deg, rgba(var(--bs-success-rgb), 0.12) 0%, rgba(var(--bs-success-rgb), 0.03) 100%);
  border: none;
}
.card.info-gradient {
  background: linear-gradient(180deg, rgba(var(--bs-info-rgb), 0.12) 0%, rgba(var(--bs-info-rgb), 0.03) 100%);
  border: none;
}
.round-48 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.card.primary-gradient .round-48,
.card.secondary-gradient .round-48,
.card.success-gradient .round-48,
.card.danger-gradient .round-48,
.card.warning-gradient .round-48,
.card.info-gradient .round-48 {
  background: rgba(var(--bs-primary-rgb), 0.2);
}
.card.info-gradient .round-48 { background: rgba(var(--bs-info-rgb), 0.2); }
.card.success-gradient .round-48 { background: rgba(var(--bs-success-rgb), 0.2); }
.card.warning-gradient .round-48 { background: rgba(var(--bs-warning-rgb), 0.2); }
.card.danger-gradient .round-48 { background: rgba(var(--bs-danger-rgb), 0.2); }
.card.secondary-gradient .round-48 { background: rgba(var(--bs-secondary-rgb), 0.2); }
.btn-white {
  background: #fff;
  color: var(--bs-primary);
  border: none;
}
.btn-white:hover {
  background: var(--bs-gray-100);
  color: var(--bs-primary);
}

/* Account Setting - nav pills for profile */
.user-profile-tab .nav-link {
  border-bottom: 2px solid transparent;
}
.user-profile-tab .nav-link.active {
  border-bottom-color: var(--bs-primary);
  background: transparent !important;
  color: var(--bs-primary) !important;
}
.user-profile-tab .nav-link:hover {
  background: var(--bs-gray-100) !important;
}

/* Auth / side login (template authentication-login) */
.radial-gradient {
  position: relative;
}
.radial-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(rgb(237 251 243), rgb(219 242 255), rgb(233 244 255)) 0% 0% / 400% 400%;
  animation: gradient-shift 15s ease infinite;
  z-index: 0;
}
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.circle-top {
  position: absolute;
  top: -33%;
  left: -14%;
  border: 120px solid #0b2947;
  height: 700px;
  width: 700px;
  display: block;
  background: transparent;
  border-radius: 100%;
  z-index: 1;
}
.circle-bottom {
  position: absolute;
  bottom: -4%;
  right: 1%;
  height: 450px;
  width: 450px;
  display: block;
  background: transparent;
  z-index: 1;
  opacity: 0.5;
}
.h-n80 { height: 80%; }
.auth-card {
  max-width: 460px !important;
}
.auth-form-content {
  display: block !important;
  visibility: visible !important;
}
.auth-card .form-control,
.auth-card .form-label,
.auth-card .btn {
  display: block !important;
  visibility: visible !important;
}

/* Select2 inside Bootstrap modal - dropdown above modal */
.modal .select2-container {
  z-index: 1060 !important;
}
.modal .select2-dropdown,
.modal .select2-search--dropdown {
  z-index: 1060 !important;
}

/* Lead source with platform icon */
.source-with-icon {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.source-with-icon .ti {
  font-size: 1em;
  opacity: 0.95;
}

/* Lead source / type platform colors */
.badge-source-meta_messenger { background-color: #0084FF !important; color: #fff; }
.badge-source-meta_leadads   { background-color: #1877F2 !important; color: #fff; }
.badge-source-google         { background: linear-gradient(135deg, #4285F4 0%, #EA4335 50%, #FBBC05 75%, #34A853 100%) !important; color: #fff; }
.badge-source-tiktok         { background-color: #000 !important; color: #fff; }
.badge-source-default        { background-color: var(--bs-secondary) !important; color: #fff; }
.badge-type-messenger         { background-color: #0084FF !important; color: #fff; }
.badge-type-form              { background-color: #1877F2 !important; color: #fff; }
.badge-type-other             { background-color: var(--bs-secondary) !important; color: #fff; }