/* PFIN Custom Styles */

/* ===========================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   =========================================== */

:root {
  /* Peach Family */
  --bs-peach: #ffb366;
  --bs-peach-rgb: 255, 179, 102;
  --bs-peach-dark: #e6994d;
  --bs-peach-light: #ffcc99;
  --bs-peach-warm: #ffa366;
  --bs-peach-warm-rgb: 255, 163, 102;
  --bs-peach-cool: #ffb380;
  --bs-peach-cool-rgb: 255, 179, 128;
  --bs-peach-coral: #ff8c69;
  --bs-peach-coral-rgb: 255, 140, 105;
  
  /* Mint Green */
  --bs-mint: #00d4aa;
  --bs-mint-rgb: 0, 212, 170;
  --bs-mint-dark: #00b894;
  --bs-mint-light: #55efc4;
  
  /* Lavender */
  --bs-lavender: #a29bfe;
  --bs-lavender-rgb: 162, 155, 254;
  --bs-lavender-dark: #6c5ce7;
  --bs-lavender-light: #d1d4f9;
  
  /* Sage Green */
  --bs-sage: #81c784;
  --bs-sage-rgb: 129, 199, 132;
  --bs-sage-dark: #66bb6a;
  --bs-sage-light: #a5d6a7;
  
  /* Sunset Orange */
  --bs-sunset: #ff7675;
  --bs-sunset-rgb: 255, 118, 117;
  --bs-sunset-dark: #e84393;
  --bs-sunset-light: #ffa8a8;
  
  /* Ocean Blue */
  --bs-ocean: #74b9ff;
  --bs-ocean-rgb: 116, 185, 255;
  --bs-ocean-dark: #0984e3;
  --bs-ocean-light: #a7d0ff;
  
  /* Warm Gray */
  --bs-warm-gray: #636e72;
  --bs-warm-gray-rgb: 99, 110, 114;
  --bs-warm-gray-dark: #2d3436;
  --bs-warm-gray-light: #b2bec3;
}

/* ===========================================
   BACKGROUND COLOR UTILITIES
   =========================================== */

/* Peach Family */
.bg-peach { background-color: var(--bs-peach) !important; }
.bg-peach-dark { background-color: var(--bs-peach-dark) !important; }
.bg-peach-light { background-color: var(--bs-peach-light) !important; }
.bg-peach-warm { background-color: var(--bs-peach-warm) !important; }
.bg-peach-cool { background-color: var(--bs-peach-cool) !important; }
.bg-peach-coral { background-color: var(--bs-peach-coral) !important; }

/* Mint Green */
.bg-mint { background-color: var(--bs-mint) !important; }
.bg-mint-dark { background-color: var(--bs-mint-dark) !important; }
.bg-mint-light { background-color: var(--bs-mint-light) !important; }

/* Lavender */
.bg-lavender { background-color: var(--bs-lavender) !important; }
.bg-lavender-dark { background-color: var(--bs-lavender-dark) !important; }
.bg-lavender-light { background-color: var(--bs-lavender-light) !important; }

/* Sage Green */
.bg-sage { background-color: var(--bs-sage) !important; }
.bg-sage-dark { background-color: var(--bs-sage-dark) !important; }
.bg-sage-light { background-color: var(--bs-sage-light) !important; }

/* Sunset Orange */
.bg-sunset { background-color: var(--bs-sunset) !important; }
.bg-sunset-dark { background-color: var(--bs-sunset-dark) !important; }
.bg-sunset-light { background-color: var(--bs-sunset-light) !important; }

/* Ocean Blue */
.bg-ocean { background-color: var(--bs-ocean) !important; }
.bg-ocean-dark { background-color: var(--bs-ocean-dark) !important; }
.bg-ocean-light { background-color: var(--bs-ocean-light) !important; }

/* Warm Gray */
.bg-warm-gray { background-color: var(--bs-warm-gray) !important; }
.bg-warm-gray-dark { background-color: var(--bs-warm-gray-dark) !important; }
.bg-warm-gray-light { background-color: var(--bs-warm-gray-light) !important; }

/* ===========================================
   TEXT COLOR UTILITIES
   =========================================== */

/* Peach Family */
.text-peach { color: var(--bs-peach) !important; }
.text-peach-dark { color: var(--bs-peach-dark) !important; }

/* Mint Green */
.text-mint { color: var(--bs-mint) !important; }
.text-mint-dark { color: var(--bs-mint-dark) !important; }

/* Lavender */
.text-lavender { color: var(--bs-lavender) !important; }
.text-lavender-dark { color: var(--bs-lavender-dark) !important; }

/* Sage Green */
.text-sage { color: var(--bs-sage) !important; }
.text-sage-dark { color: var(--bs-sage-dark) !important; }

/* Sunset Orange */
.text-sunset { color: var(--bs-sunset) !important; }
.text-sunset-dark { color: var(--bs-sunset-dark) !important; }

/* Ocean Blue */
.text-ocean { color: var(--bs-ocean) !important; }
.text-ocean-dark { color: var(--bs-ocean-dark) !important; }

/* Warm Gray */
.text-warm-gray { color: var(--bs-warm-gray) !important; }
.text-warm-gray-dark { color: var(--bs-warm-gray-dark) !important; }

/* ===========================================
   BORDER COLOR UTILITIES
   =========================================== */

.border-peach { border-color: var(--bs-peach) !important; }
.border-mint { border-color: var(--bs-mint) !important; }
.border-lavender { border-color: var(--bs-lavender) !important; }
.border-sage { border-color: var(--bs-sage) !important; }
.border-sunset { border-color: var(--bs-sunset) !important; }
.border-ocean { border-color: var(--bs-ocean) !important; }
.border-warm-gray { border-color: var(--bs-warm-gray) !important; }

/* ===========================================
   BUTTON COMPONENTS
   =========================================== */

/* Peach Buttons */
.btn-peach {
  color: #000;
  background-color: var(--bs-peach);
  border-color: var(--bs-peach);
}
.btn-peach:hover {
  color: #000;
  background-color: var(--bs-peach-dark);
  border-color: var(--bs-peach-dark);
}
.btn-outline-peach {
  color: var(--bs-peach);
  border-color: var(--bs-peach);
}
.btn-outline-peach:hover {
  color: #000;
  background-color: var(--bs-peach);
  border-color: var(--bs-peach);
}

/* Mint Buttons */
.btn-mint {
  color: #000;
  background-color: var(--bs-mint);
  border-color: var(--bs-mint);
}
.btn-mint:hover {
  color: #000;
  background-color: var(--bs-mint-dark);
  border-color: var(--bs-mint-dark);
}
.btn-outline-mint {
  color: var(--bs-mint);
  border-color: var(--bs-mint);
}
.btn-outline-mint:hover {
  color: #000;
  background-color: var(--bs-mint);
  border-color: var(--bs-mint);
}

/* Lavender Buttons */
.btn-lavender {
  color: #fff;
  background-color: var(--bs-lavender);
  border-color: var(--bs-lavender);
}
.btn-lavender:hover {
  color: #fff;
  background-color: var(--bs-lavender-dark);
  border-color: var(--bs-lavender-dark);
}
.btn-outline-lavender {
  color: var(--bs-lavender);
  border-color: var(--bs-lavender);
}
.btn-outline-lavender:hover {
  color: #fff;
  background-color: var(--bs-lavender);
  border-color: var(--bs-lavender);
}

/* Sage Buttons */
.btn-sage {
  color: #fff;
  background-color: var(--bs-sage);
  border-color: var(--bs-sage);
}
.btn-sage:hover {
  color: #fff;
  background-color: var(--bs-sage-dark);
  border-color: var(--bs-sage-dark);
}
.btn-outline-sage {
  color: var(--bs-sage);
  border-color: var(--bs-sage);
}
.btn-outline-sage:hover {
  color: #fff;
  background-color: var(--bs-sage);
  border-color: var(--bs-sage);
}

/* Sunset Buttons */
.btn-sunset {
  color: #fff;
  background-color: var(--bs-sunset);
  border-color: var(--bs-sunset);
}
.btn-sunset:hover {
  color: #fff;
  background-color: var(--bs-sunset-dark);
  border-color: var(--bs-sunset-dark);
}
.btn-outline-sunset {
  color: var(--bs-sunset);
  border-color: var(--bs-sunset);
}
.btn-outline-sunset:hover {
  color: #fff;
  background-color: var(--bs-sunset);
  border-color: var(--bs-sunset);
}

/* Ocean Buttons */
.btn-ocean {
  color: #fff;
  background-color: var(--bs-ocean);
  border-color: var(--bs-ocean);
}
.btn-ocean:hover {
  color: #fff;
  background-color: var(--bs-ocean-dark);
  border-color: var(--bs-ocean-dark);
}
.btn-outline-ocean {
  color: var(--bs-ocean);
  border-color: var(--bs-ocean);
}
.btn-outline-ocean:hover {
  color: #fff;
  background-color: var(--bs-ocean);
  border-color: var(--bs-ocean);
}

/* Warm Gray Buttons */
.btn-warm-gray {
  color: #fff;
  background-color: var(--bs-warm-gray);
  border-color: var(--bs-warm-gray);
}
.btn-warm-gray:hover {
  color: #fff;
  background-color: var(--bs-warm-gray-dark);
  border-color: var(--bs-warm-gray-dark);
}
.btn-outline-warm-gray {
  color: var(--bs-warm-gray);
  border-color: var(--bs-warm-gray);
}
.btn-outline-warm-gray:hover {
  color: #fff;
  background-color: var(--bs-warm-gray);
  border-color: var(--bs-warm-gray);
}

/* ===========================================
   BADGE COMPONENTS
   =========================================== */

.badge-peach { background-color: var(--bs-peach); color: #000; }
.badge-mint { background-color: var(--bs-mint); color: #000; }
.badge-lavender { background-color: var(--bs-lavender); color: #fff; }
.badge-sage { background-color: var(--bs-sage); color: #fff; }
.badge-sunset { background-color: var(--bs-sunset); color: #fff; }
.badge-ocean { background-color: var(--bs-ocean); color: #fff; }
.badge-warm-gray { background-color: var(--bs-warm-gray); color: #fff; }

/* ===========================================
   PFIN SPECIFIC CUSTOMIZATIONS
   =========================================== */

.pending-transactions-header {
  background: linear-gradient(135deg, var(--bs-peach), var(--bs-peach-dark));
  border-bottom: 2px solid var(--bs-peach-dark);
  transition: background 0.3s ease;
}

.pending-transactions-header:hover {
  background: linear-gradient(135deg, var(--bs-peach-dark), var(--bs-peach));
}