/**
 * PINK THEME - Logo-Matched (Coral)
 * -----------------------------------------
 * Matches "The Immigration People" logo exactly
 * Warm coral-pink, professional, brand-aligned
 *
 * Color Reference:
 * - Primary Coral: #F2636E
 * - Primary Hover: #E05460
 * - Primary Active: #D04552
 * - Light Coral BG: #FDE8EA
 */


/* ===========================================
   CSS VARIABLES
   =========================================== */
:root,
[data-bs-theme="light"] {

  /* Primary Accent Colors (matched to logo) */
  --bs-primary: #F2636E;
  --bs-primary-rgb: 242, 99, 110;
  --bs-primary-hover: #E05460;
  --bs-primary-active: #D04552;
  --bs-primary-light: #FDE8EA;
  --bs-light-primary: #FDE8EA;

  /* Link colors */
  --bs-link-color: #F2636E;
  --bs-link-hover-color: #E05460;

  /* Semantic Colors */
  --bs-secondary: #9CA3AF;
  --bs-secondary-rgb: 156, 163, 175;
  --bs-success: #22C55E;
  --bs-success-rgb: 34, 197, 94;
  --bs-danger: #EF4444;
  --bs-danger-rgb: 239, 68, 68;
  --bs-warning: #F59E0B;
  --bs-warning-rgb: 245, 158, 11;
  --bs-info: #06B6D4;
  --bs-info-rgb: 6, 182, 212;
  --bs-dark: #1F2937;
  --bs-dark-rgb: 31, 41, 55;

  /* Gray Scale */
  --bs-gray-100: #F9FAFB;
  --bs-gray-200: #F3F4F6;
  --bs-gray-300: #E5E7EB;
  --bs-gray-400: #D1D5DB;
  --bs-gray-500: #9CA3AF;
  --bs-gray-600: #6B7280;
  --bs-gray-700: #4B5563;
  --bs-gray-800: #374151;
  --bs-gray-900: #1F2937;
  --bs-gray-100-rgb: 249, 250, 251;
  --bs-gray-200-rgb: 243, 244, 246;
  --bs-gray-300-rgb: 229, 231, 235;
  --bs-gray-400-rgb: 209, 213, 219;

  /* Semantic Backgrounds */
  --bs-body-bg: #ffffff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-secondary-bg: #FEF7F7;
  --bs-secondary-bg-rgb: 254, 247, 247;
  --bs-tertiary-bg: #FEF7F7;
  --bs-tertiary-bg-rgb: 254, 247, 247;
  --bs-light: #F9FAFB;
  --bs-light-rgb: 249, 250, 251;

  /* Borders */
  --bs-border-color: #E5E7EB;
  --bs-border-color-translucent: rgba(229, 231, 235, 0.5);

  /* Text Colors */
  --bs-body-color: #1F2937;
  --bs-body-color-rgb: 31, 41, 55;
  --bs-secondary-color: #6B7280;
  --bs-tertiary-color: #9CA3AF;
}


/* ===========================================
   LINKS
   =========================================== */
a {
  color: #F2636E;
}
a:hover {
  color: #E05460;
}


/* ===========================================
   BUTTONS - Primary
   =========================================== */
.btn-primary,
.btn-primary.btn,
.page-link.active,
.pagination .active > .page-link {
  --bs-btn-bg: #F2636E;
  --bs-btn-border-color: #F2636E;
  --bs-btn-hover-bg: #E05460;
  --bs-btn-hover-border-color: #E05460;
  --bs-btn-active-bg: #D04552;
  --bs-btn-active-border-color: #D04552;
  background-color: #F2636E !important;
  border-color: #F2636E !important;
  color: white !important;
}

.btn-outline-primary {
  --bs-btn-color: #F2636E;
  --bs-btn-border-color: #F2636E;
  --bs-btn-hover-bg: #F2636E;
  --bs-btn-hover-border-color: #F2636E;
  --bs-btn-hover-color: #fff;
}


/* ===========================================
   BUTTONS - Info (e.g., "Past" button → Coral)
   =========================================== */
.btn-info {
  --bs-btn-bg: #F2636E;
  --bs-btn-border-color: #F2636E;
  --bs-btn-hover-bg: #E05460;
  --bs-btn-hover-border-color: #E05460;
  --bs-btn-active-bg: #D04552;
  --bs-btn-active-border-color: #D04552;
  color: white;
}

.btn-outline-info {
  --bs-btn-color: #F2636E;
  --bs-btn-border-color: #F2636E;
  --bs-btn-hover-bg: #F2636E;
  --bs-btn-hover-border-color: #F2636E;
  --bs-btn-hover-color: #fff;
}


/* ===========================================
   BUTTONS - Secondary & Light
   =========================================== */
.btn-secondary {
  --bs-btn-bg: #F3F4F6;
  --bs-btn-border-color: #E5E7EB;
  --bs-btn-color: #374151;
  --bs-btn-hover-bg: #E5E7EB;
  --bs-btn-hover-border-color: #D1D5DB;
}

.btn-light {
  --bs-btn-bg: #F3F4F6;
  --bs-btn-border-color: #E5E7EB;
  --bs-btn-color: #374151;
}


/* ===========================================
   BUTTONS - Light Primary (Filter buttons)
   =========================================== */
.btn-light-primary {
  background-color: #FDE8EA !important;
  border-color: transparent !important;
  color: #F2636E !important;
}
.btn-light-primary:hover {
  background-color: #FBCDD1 !important;
  color: #E05460 !important;
}


/* ===========================================
   BUTTONS - Neutral Gray Hover States
   (Action buttons like "Modify", pagination arrows)
   =========================================== */
.btn-light:hover,
.btn-light:focus,
.btn-light.active,
.btn.btn-light:hover,
.btn.btn-light:focus {
  background-color: #E5E7EB !important;
  border-color: #D1D5DB !important;
  color: #374151 !important;
}

/* btn-active-light-primary → Neutral gray (not coral) */
.btn-active-light-primary:hover,
.btn-active-light-primary:focus,
.btn-active-light-primary:active,
.btn-active-light-primary.active,
.btn-active-light-primary.show,
.btn.btn-light.btn-active-light-primary:hover,
.btn.btn-light.btn-active-light-primary:focus,
.btn.btn-light.btn-active-light-primary:active,
.btn.btn-light.btn-active-light-primary.active,
.show > .btn-active-light-primary,
[class*="btn-active-light-primary"]:hover,
table .btn-active-light-primary:hover,
table .btn-active-light-primary:focus,
.card-body .btn-active-light-primary:hover,
.card-body .btn-active-light-primary:focus {
  background-color: #E5E7EB !important;
  border-color: #E5E7EB !important;
  color: #374151 !important;
}

/* Pagination arrow icons - neutral on hover */
.btn-icon:hover i,
.btn-icon:hover .ki-duotone,
.btn-icon:hover .ki-duotone span,
.btn.btn-light:hover i,
.btn.btn-light:hover .ki-duotone span {
  color: #374151 !important;
}


/* ===========================================
   BUTTONS - Active Color Primary (icon buttons)
   =========================================== */
.btn-active-color-primary:hover,
.btn-active-color-primary.active,
.btn-active-color-primary:focus {
  color: #F2636E !important;
}
.btn-active-color-primary:hover i,
.btn-active-color-primary.active i {
  color: #F2636E !important;
}


/* ===========================================
   SERVICE TYPE CARDS - Coral selection
   (leads_profile.html radio cards)
   =========================================== */
.btn-outline.btn-outline-dashed.btn-active-light-primary:hover,
.btn.btn-outline.btn-outline-dashed.btn-active-light-primary:hover,
label.btn.btn-outline.btn-outline-dashed:hover {
  background-color: #FDE8EA !important;
  border-color: #F2636E !important;
}

.btn-outline.btn-outline-dashed.btn-active-light-primary.active,
.btn.btn-outline.btn-outline-dashed.btn-active-light-primary.active,
label.btn.btn-outline.btn-outline-dashed.active,
label.btn.btn-outline-dashed:has(input:checked),
label.btn-active-light-primary:has(input:checked) {
  background-color: #FDE8EA !important;
  border-color: #F2636E !important;
}


/* ===========================================
   NAV PILLS (document.html User/Spouse/Child tabs)
   =========================================== */
body .nav-pills .nav-link {
  color: #F2636E !important;
  background: #FDE8EA !important;
}
body .nav-pills .nav-link:hover,
body .nav-pills .nav-link.active {
  background: #F2636E !important;
  color: #fff !important;
  box-shadow: 0 4px 8px rgba(242, 99, 110, 0.25) !important;
}


/* ===========================================
   NAV TABS
   =========================================== */
.nav-line-tabs .nav-link.active,
.nav-line-tabs .nav-link:hover {
  border-bottom-color: #F2636E;
  color: #F2636E;
}
.text-active-primary.active,
.active > .text-active-primary {
  color: #F2636E !important;
}


/* ===========================================
   FORMS
   =========================================== */
.form-control,
.form-select {
  border-color: var(--bs-gray-300);
}
.form-control:focus,
.form-select:focus {
  border-color: #F2636E;
  box-shadow: 0 0 0 0.25rem rgba(242, 99, 110, 0.15) !important;
}
.form-control-solid,
.form-select-solid {
  background-color: var(--bs-gray-100);
  border-color: var(--bs-gray-100);
}
.form-control-solid:focus,
.form-select-solid:focus {
  background-color: var(--bs-gray-200);
  border-color: var(--bs-gray-300);
}

/* Checkbox */
.form-check-input:checked {
  background-color: #F2636E;
  border-color: #F2636E;
}

/* Focus rings */
.btn:focus {
  box-shadow: 0 0 0 0.25rem rgba(242, 99, 110, 0.25) !important;
}


/* ===========================================
   SELECT2
   =========================================== */
/* Selected option - light coral with coral text & checkmark */
.select2-container--bootstrap5 .select2-results__option--selected,
.select2-container--bootstrap5 .select2-results__option[aria-selected="true"] {
  background-color: #FDE8EA !important;
  color: #F2636E !important;
}
.select2-container--bootstrap5 .select2-results__option--selected::after,
.select2-container--bootstrap5 .select2-results__option[aria-selected="true"]::after {
  background-color: #F2636E !important;
}

/* Hover (not selected) - neutral gray */
.select2-container--bootstrap5 .select2-results__option--highlighted:not(.select2-results__option--selected) {
  background-color: #F3F4F6 !important;
  color: #374151 !important;
}


/* ===========================================
   DROPDOWNS & MENUS
   =========================================== */
.dropdown-menu {
  border-color: var(--bs-gray-200);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--bs-gray-100);
  color: #374151;
}

/* Metronic menu states */
.menu-state-bg-light-primary .menu-item .menu-link:hover,
.menu-state-bg-light-primary .menu-item.hover > .menu-link,
.menu-state-bg-light-primary .menu-item .menu-link.active,
.menu-link:hover,
.menu-link.active {
  background-color: #F3F4F6 !important;
  color: #374151 !important;
}

/* Custom dropdown selected */
.custom-select-dropdown .dropdown-option.selected::after {
  background-color: #F2636E !important;
}
.dropdown-option.selected {
  background-color: #FDE8EA !important;
  color: #F2636E !important;
}


/* ===========================================
   CARDS
   =========================================== */
.card {
  border-color: var(--bs-gray-200);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.card-header {
  background-color: transparent;
  border-bottom-color: var(--bs-gray-200);
}


/* ===========================================
   TABLES
   =========================================== */
.table {
  --bs-table-border-color: var(--bs-gray-200);
}
.table > thead {
  background-color: #ffffff;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(253, 232, 234, 0.3);
}
.table > tbody > tr:hover {
  background-color: rgba(253, 232, 234, 0.6) !important;
}


/* ===========================================
   PAGINATION
   =========================================== */
.page-item.active .page-link {
  background-color: #F2636E !important;
  border-color: #F2636E !important;
}
.page-link:hover {
  background-color: #F3F4F6 !important;
  color: #374151 !important;
}

/* DataTables pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #F2636E !important;
  border-color: #F2636E !important;
  color: white !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #E5E7EB !important;
  border-color: #E5E7EB !important;
  color: #374151 !important;
}


/* ===========================================
   BADGES - Semantic Colors
   =========================================== */
.badge.bg-primary,
.symbol-label.bg-primary {
  background-color: #F2636E !important;
  color: white !important;
}
.badge.bg-success,
.symbol-label.bg-success {
  background-color: #22C55E !important;
  color: white !important;
}
.badge.bg-warning,
.symbol-label.bg-warning {
  background-color: #F59E0B !important;
  color: #1F2937 !important;
}
.badge.bg-danger,
.symbol-label.bg-danger {
  background-color: #EF4444 !important;
  color: white !important;
}
.badge.bg-info,
.symbol-label.bg-info {
  background-color: #06B6D4 !important;
  color: white !important;
}
.badge.bg-secondary,
.symbol-label.bg-secondary {
  background-color: #6B7280 !important;
  color: white !important;
}
.badge.bg-light,
.symbol-label.bg-light {
  background-color: #FDE8EA !important;
  color: #8B4D54 !important;
}

/* Light badge variants */
.badge-light-primary {
  background-color: #F3F4F6 !important;
  color: #374151 !important;
}
.badge-light-success {
  background-color: rgba(34, 197, 94, 0.15) !important;
  color: #16A34A !important;
}
.badge-light-danger {
  background-color: rgba(239, 68, 68, 0.15) !important;
  color: #DC2626 !important;
}
.badge-light-warning {
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: #D97706 !important;
}
.badge-light-info {
  background-color: rgba(6, 182, 212, 0.15) !important;
  color: #0891B2 !important;
}


/* ===========================================
   BACKGROUND COLORS
   =========================================== */
.bg-primary {
  background-color: #F2636E !important;
}
.bg-light-primary {
  background-color: #FDE8EA !important;
}
.bg-success {
  background-color: #22C55E !important;
}
.bg-danger {
  background-color: #EF4444 !important;
}
.bg-warning {
  background-color: #F59E0B !important;
}
.bg-info {
  background-color: #06B6D4 !important;
}
.bg-light {
  background-color: var(--bs-gray-100) !important;
}


/* ===========================================
   TEXT COLORS
   =========================================== */
.text-primary {
  color: #F2636E !important;
}
.text-hover-primary:hover {
  color: #F2636E !important;
}
.text-gray-500 { color: var(--bs-gray-500) !important; }
.text-gray-600 { color: var(--bs-gray-600) !important; }
.text-gray-700 { color: var(--bs-gray-700) !important; }
.text-gray-800 { color: var(--bs-gray-800) !important; }
.text-gray-900 { color: var(--bs-gray-900) !important; }


/* ===========================================
   BORDERS
   =========================================== */
.border-primary {
  border-color: #F2636E !important;
}
.border-gray-300 {
  border-color: var(--bs-gray-300) !important;
}
.separator {
  border-color: var(--bs-gray-200);
}


/* ===========================================
   ICONS
   =========================================== */
.svg-icon-primary,
.ki-duotone.text-primary,
i.text-primary,
.ki-duotone.text-primary span,
.text-primary .ki-duotone span {
  color: #F2636E !important;
}
.symbol-label i {
  color: var(--bs-gray-600);
}


/* ===========================================
   SYMBOLS / AVATARS
   =========================================== */
.symbol-label {
  background-color: #FDE8EA;
  color: var(--bs-gray-700);
}
.symbol.symbol-circle .symbol-label {
  background-color: #FDE8EA;
}


/* ===========================================
   PROGRESS BARS
   =========================================== */
.progress {
  background-color: var(--bs-gray-200);
}
.progress-bar.bg-primary {
  background-color: #F2636E !important;
}
.progress-bar.bg-success {
  background-color: #22C55E !important;
}


/* ===========================================
   BULLET INDICATORS (Chart legends)
   =========================================== */
.bullet.bg-primary { background-color: #F2636E !important; }
.bullet.bg-success { background-color: #22C55E !important; }
.bullet.bg-danger { background-color: #EF4444 !important; }
.bullet.bg-warning { background-color: #F59E0B !important; }
.bullet.bg-info { background-color: #06B6D4 !important; }
.bullet.bg-secondary { background-color: #9CA3AF !important; }
.bullet.bg-dark { background-color: #1F2937 !important; }
.bullet.bg-gray-300 { background-color: #E5E7EB !important; }
.bullet.bg-gray-400 { background-color: #D1D5DB !important; }
.bullet.bg-gray-500 { background-color: #9CA3AF !important; }
.bullet.bg-gray-600 { background-color: #6B7280 !important; }

/* Vertical bullets */
.bullet-vertical.bg-primary {
  background-color: #F2636E !important;
}


/* ===========================================
   MODALS
   =========================================== */
.modal-header,
.modal-footer {
  border-color: var(--bs-gray-200);
}


/* ===========================================
   TIMELINE
   =========================================== */
.timeline-phase.is-done .timeline-icon {
  color: #22C55E !important;
}


/* ===========================================
   EVENT SIDEBAR BARS
   =========================================== */
.position-absolute.bg-primary {
  background-color: #F2636E !important;
}
.position-absolute.bg-danger {
  background-color: #EF4444 !important;
}


/* ===========================================
   LOGIN PAGE - Dark Elegant Theme
   (Prevents clash with coral logo)
   =========================================== */
.auth-bg .bg-primary {
  background: linear-gradient(160deg, #1F2937 0%, #111827 100%) !important;
}

/* Keep text white on dark background */
.auth-bg .bg-primary h1,
.auth-bg .bg-primary p,
.auth-bg .bg-primary .text-white {
  color: #ffffff !important;
}

/* Login form buttons use logo coral */
.auth-bg .btn-primary {
  background-color: #F2636E !important;
  border-color: #F2636E !important;
}
.auth-bg .btn-primary:hover {
  background-color: #E05460 !important;
  border-color: #E05460 !important;
}

/* Links on login page */
.auth-bg .link-primary {
  color: #F2636E !important;
}
.auth-bg .link-primary:hover {
  color: #E05460 !important;
}

/* 2FA modal radio cards on login */
.auth-bg .btn-outline.btn-outline-dashed.btn-active-light-primary:hover,
.auth-bg label.btn.btn-outline.btn-outline-dashed:hover {
  background-color: #FDE8EA !important;
  border-color: #F2636E !important;
}
.auth-bg label.btn.btn-outline-dashed:has(input:checked) {
  background-color: #FDE8EA !important;
  border-color: #F2636E !important;
}

/* ===========================================
   PAGINATION (Clean)
   - Numbers: minimal (no pill/shadow), active = coral
   - Arrows: default = plain icon, no bg/shadow
            hover/focus = grey pill + subtle shadow + coral icon
   =========================================== */

/* Base pagination (numbers) */
body .pagination .page-link {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body .pagination .page-link:hover,
body .pagination .page-link:focus {
  background: transparent !important;
  box-shadow: none !important;
}

/* Active page (coral pill) */
body .pagination .page-item.active .page-link {
  background-color: #F2636E !important;
  border-color: #F2636E !important;
  color: #fff !important;
  border-radius: 0.75rem !important;
}

/* Prev/Next buttons */
body .dt-paging-button .page-link.previous,
body .dt-paging-button .page-link.next {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 0.75rem !important;
  background: transparent !important;  /* BEFORE: no grey */
  box-shadow: none !important;         /* BEFORE: no shadow */
}

/* Arrow icon default (BEFORE: normal arrow like screenshot 2) */
body .dt-paging-button .page-link.previous i.previous,
body .dt-paging-button .page-link.next i.next {
  color: var(--bs-gray-600) !important;
}

/* Disabled arrows */
body .dt-paging-button.disabled .page-link.previous i.previous,
body .dt-paging-button.disabled .page-link.next i.next {
  color: var(--bs-gray-400) !important;
}

/* AFTER: hover/focus shows grey pill + shadow + coral arrow (screenshot 1) */
body .dt-paging-button:not(.disabled) .page-link.previous:hover,
body .dt-paging-button:not(.disabled) .page-link.previous:focus,
body .dt-paging-button:not(.disabled) .page-link.next:hover,
body .dt-paging-button:not(.disabled) .page-link.next:focus {
  background-color: var(--bs-gray-200) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10) !important;
}

body .dt-paging-button:not(.disabled) .page-link.previous:hover i.previous,
body .dt-paging-button:not(.disabled) .page-link.previous:focus i.previous,
body .dt-paging-button:not(.disabled) .page-link.next:hover i.next,
body .dt-paging-button:not(.disabled) .page-link.next:focus i.next {
  color: #F2636E !important;
}

/* =================================================
   FORCE PAGINATION ARROW ICON COLOR (MASK FIX)
   ================================================= */

/* Default arrow (before hover) */
body .dt-paging-button .page-link i.previous,
body .dt-paging-button .page-link i.next {
  background-color: var(--bs-gray-600) !important; /* neutral arrow */
}

/* Hover / focus arrow (after) */
body .dt-paging-button:not(.disabled) .page-link:hover i.previous,
body .dt-paging-button:not(.disabled) .page-link:focus i.previous,
body .dt-paging-button:not(.disabled) .page-link:hover i.next,
body .dt-paging-button:not(.disabled) .page-link:focus i.next {
  background-color: #F2636E !important; /* coral */
}

/* Disabled arrows */
body .dt-paging-button.disabled i.previous,
body .dt-paging-button.disabled i.next {
  background-color: var(--bs-gray-400) !important;
}