/* Optimo Light Theme - Centralized Utilities */

/* ===== Global Defaults (Safe Fallbacks) ===== */
body.light-bg {
  background-color: #FFFFFF;
  color: #141A8C;
}

/* Default headings outside boxes - Deep Blue */
body.light-bg h1,
body.light-bg h2,
body.light-bg h3,
body.light-bg h4,
body.light-bg h5,
body.light-bg h6 {
  color: #141A8C;
  -webkit-text-fill-color: #141A8C;
}

/* Default text - Dark Blue for readability */
body.light-bg p,
body.light-bg span,
body.light-bg div {
  color: #141A8C;
}

/* ===== Page Backgrounds ===== */
.light-bg {
  background-color: #FFFFFF;
}

.light-nav {
  background-color: #FFFFFF;
  border-bottom: 2px solid rgba(128, 242, 145, 0.3);
}

.light-footer {
  background-color: #141A8C;
  border-top: 2px solid rgba(128, 242, 145, 0.3);
  color: #FFFFFF;
}

/* ===== Boxes/Cards (Blue Containers) ===== */
.blue-box {
  background-color: #141A8C;
  border: 2px solid rgba(128, 242, 145, 0.3);
}

/* ===== Headings (Color Context) ===== */
/* Headings OUTSIDE blue boxes - Deep Blue */
.heading-outside {
  color: #141A8C !important;
  -webkit-text-fill-color: #141A8C !important;
}

/* Headings INSIDE blue boxes - Green */
.heading-inside {
  color: #80F291 !important;
  -webkit-text-fill-color: #80F291 !important;
}

/* ===== Text (Color Context) ===== */
/* Text OUTSIDE boxes - Dark for readability */
.text-outside {
  color: #141A8C;
}

.text-outside-muted {
  color: rgba(20, 26, 140, 0.7);
}

/* Text INSIDE blue boxes - White */
.text-inside {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

.text-inside-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ===== Navigation ===== */
.blue-header {
  background-color: #141A8C;
  border-bottom: 2px solid rgba(128, 242, 145, 0.3);
}

.nav-text-white {
  color: #FFFFFF !important;
}

.nav-link-light {
  color: #141A8C;
  transition: color 0.2s, background-color 0.2s;
}

.nav-link-light:hover {
  color: #80F291;
  background-color: rgba(128, 242, 145, 0.15);
}

/* ===== Icons ===== */
.icon-green {
  color: #80F291 !important;
  -webkit-text-fill-color: #80F291 !important;
}

/* ===== Buttons ===== */
.btn-primary-light {
  background-color: #80F291;
  color: #141A8C;
  transition: all 0.3s ease;
  font-weight: 600;
}

.btn-primary-light:hover {
  background-color: #6dd97d;
  box-shadow: 0 0 20px rgba(128, 242, 145, 0.5);
  transform: translateY(-2px);
}

.logout-btn-light {
  background-color: rgba(240, 75, 75, 0.1);
  color: #141A8C;
}

.logout-text-red {
  color: #F04B4B !important;
  -webkit-text-fill-color: #F04B4B !important;
}

/* ===== Utility Bar (Back to Main Website) ===== */
.utility-bar {
  background-color: #FFFFFF;
  border-bottom: 2px solid rgba(128, 242, 145, 0.3);
}

.utility-bar-link {
  color: #141A8C;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

/* White variant for utility bar link inside blue backgrounds */
.utility-bar-link-inside {
  color: #FFFFFF !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.back-link-light {
  color: #141A8C;
  font-weight: 600;
  text-decoration: none;
}

.back-link-blue {
  color: #141A8C !important;
  font-weight: 600;
  text-decoration: none;
}

/* White variant for back links inside blue backgrounds */
.back-link-inside {
  color: #FFFFFF !important;
  font-weight: 600;
  text-decoration: none;
}

/* ===== Mobile Menu (Light Theme) ===== */
.mobile-menu-light {
  background-color: #FFFFFF;
  border-left: 2px solid #80F291;
}

.mobile-active-link {
  color: #141A8C;
  background-color: rgba(128, 242, 145, 0.15);
}

/* ===== Dropdowns (Light Theme) ===== */
.dropdown-light {
  background-color: #141A8C;
  border: 2px solid #80F291;
}

.dropdown-panel-light {
  background-color: #141A8C;
  border: 2px solid #80F291;
}

.dropdown-link-light {
  color: #FFFFFF;
}

.dropdown-item-light {
  color: #FFFFFF;
  transition: background-color 0.2s;
}

.dropdown-item-light:hover {
  background-color: rgba(128, 242, 145, 0.2);
}

/* ===== Logo ===== */
.logo-img {
  height: 40px;
}

/* ===== Form Labels (Context-Aware) ===== */
label.label-inside {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

label.label-outside {
  color: #141A8C !important;
  -webkit-text-fill-color: #141A8C !important;
}

/* ===== Status Badges (Light Theme) ===== */
.badge-inside {
  background-color: rgba(128, 242, 145, 0.25);
  color: #141A8C;
  font-weight: 700;
  border: 1px solid rgba(128, 242, 145, 0.4);
}

/* Lead Status Badges - Light Theme */
.badge-light-new {
  background-color: rgba(128, 242, 145, 0.25);
  color: #141A8C;
  font-weight: 700;
  border: 1px solid rgba(128, 242, 145, 0.4);
}

.badge-light-review {
  background-color: rgba(128, 242, 145, 0.2);
  color: #141A8C;
  font-weight: 700;
  border: 1px solid rgba(128, 242, 145, 0.4);
}

.badge-light-qualified {
  background-color: rgba(128, 242, 145, 0.35);
  color: #141A8C;
  font-weight: 700;
  border: 1px solid rgba(128, 242, 145, 0.5);
}

.badge-light-rejected {
  background-color: rgba(240, 75, 75, 0.2);
  color: #F04B4B;
  font-weight: 700;
  border: 1px solid rgba(240, 75, 75, 0.4);
}

.badge-light-won {
  background-color: #80F291;
  color: #141A8C;
  font-weight: 700;
  border: 1px solid rgba(128, 242, 145, 0.6);
}

/* Placeholder text - Light Theme */
.placeholder-light {
  color: rgba(20, 26, 140, 0.6);
  font-style: italic;
  font-weight: 500;
}

/* ===== Dashboard Cards (Light Theme) ===== */
.card-light {
  background-color: #FFFFFF;
  border: 2px solid rgba(128, 242, 145, 0.3);
  border-left: 4px solid #80F291;
}

.card-stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: #141A8C;
}

.card-stat-label {
  color: #141A8C;
  font-size: 0.875rem;
  font-weight: 600;
}

/* ===== Table Rows (Light Theme) ===== */
.table-row-light {
  border-bottom: 1px solid rgba(128, 242, 145, 0.1);
  color: #141A8C;
}

.table-row-light:hover {
  background-color: rgba(128, 242, 145, 0.05);
}

/* ===== Tip Box ===== */
.tip-box-light {
  background-color: rgba(128, 242, 145, 0.1);
  border-left: 4px solid #80F291;
  color: #141A8C;
}

/* ===== Icon Circles ===== */
.icon-circle-green {
  background-color: rgba(128, 242, 145, 0.2);
}

/* ===== Muted Text ===== */
.text-muted-light {
  color: rgba(20, 26, 140, 0.8);
  font-weight: 500;
}

/* ===== Table Header ===== */
.table-header-light {
  background-color: rgba(128, 242, 145, 0.1);
  color: #141A8C;
  font-weight: 700;
}

/* ===== Badge Backgrounds ===== */
.badge-bg-new {
  background-color: rgba(128, 242, 145, 0.1);
  color: #141A8C;
  font-weight: 600;
}

.badge-bg-review {
  background-color: rgba(128, 242, 145, 0.2);
  color: #141A8C;
  font-weight: 600;
}

.badge-bg-qualified {
  background-color: rgba(128, 242, 145, 0.3);
  color: #141A8C;
  font-weight: 600;
}

.badge-bg-rejected {
  background-color: rgba(240, 75, 75, 0.2);
  color: #F04B4B;
  font-weight: 600;
}

.badge-bg-won {
  background-color: #80F291;
  color: #141A8C;
  font-weight: 600;
}

/* ===== Overlays / Backdrops ===== */
.overlay-dark {
  background-color: rgba(20, 26, 140, 0.9);
}

/* ===== CTAs / Buttons ===== */
.btn-green {
  background-color: #80F291;
  color: #141A8C;
}

.btn-green:hover {
  opacity: 0.9;
}

/* ===== Border Utilities ===== */
.border-light-divider {
  border-bottom: 1px solid rgba(128, 242, 145, 0.2);
}

/* ===== Badge Count ===== */
.badge-count {
  background-color: rgba(128, 242, 145, 0.2);
  color: #141A8C;
  font-weight: 600;
}

/* ===== Empty State Icon ===== */
.icon-empty-state {
  color: rgba(128, 242, 145, 0.3);
}

/* ===== Button Variants ===== */
.btn-outline-green {
  background-color: transparent;
  border: 2px solid #80F291;
  color: #FFFFFF;
}

.btn-outline-green:hover {
  background-color: rgba(128, 242, 145, 0.1);
  border-color: #80F291;
}

/* ===== Icon Background Large (Onboarding) ===== */
.icon-bg-green-large {
  background-color: #80F291;
}

.icon-bg-green-large i {
  color: #141A8C;
}

/* ===== Table Styles (Inside Blue Container) ===== */
.table-header-inside {
  background-color: rgba(128, 242, 145, 0.1);
}

.table-header-inside th {
  color: #80F291;
}

.table-row-inside {
  border-bottom: 1px solid rgba(128, 242, 145, 0.1);
}

.table-row-inside:hover {
  background-color: rgba(128, 242, 145, 0.05);
}

.table-cell-inside {
  color: #FFFFFF;
}

/* ===== FAQ Answer Styling ===== */
.faq-answer {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* ===== Support Grid Spacing ===== */
.support-grid {
  gap: 1.25rem;
}

/* ===== Alert Messages (Error & Success) ===== */
/* Error messages - HIGH CONTRAST for visibility (WCAG AA compliant) */
.alert-error {
  background-color: #D32F2F !important;
  border: 2px solid #F04B4B !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  padding: 1rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(240, 75, 75, 0.25);
}

.alert-error i {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* Success messages - HIGH CONTRAST for visibility */
.alert-success {
  background-color: #80F291 !important;
  border: 2px solid #80F291 !important;
  color: #141A8C !important;
  -webkit-text-fill-color: #141A8C !important;
  padding: 1rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  font-weight: 600;
}

.alert-success i {
  color: #141A8C !important;
  -webkit-text-fill-color: #141A8C !important;
}