/**
 * SpinPro Global Contrast Fix - Applied Across All Pages
 * Fixes low-contrast text and elements for WCAG 2.1 AA compliance
 *
 * Resolves:
 * - rgba(255, 255, 255, 0.1/0.15/0.2) - too transparent
 * - #420D4B on light backgrounds - poor contrast
 * - text-muted/outline-light classes - gray on light backgrounds
 *
 * Date: 2026-03-27
 * Applied to: ALL pages (129 affected templates)
 */

/* ===== OVERRIDE LOW-CONTRAST TEXT VALUES ===== */

/* Fix very low opacity light text - should be high contrast on dark backgrounds */
*:is([style*="rgba(255, 255, 255, 0.1)"]),
*:is([style*="rgba(255, 255, 255, 0.15)"]),
*:is([style*="rgba(255, 255, 255, 0.2)"]) {
  color: rgba(255, 255, 255, 0.95) !important;
  opacity: 1 !important;
}

/* Fix dark purple (#420D4B) - use high-contrast white or cyan instead */
*:is([style*="#420D4B"]) {
  color: rgba(231, 240, 255, 0.98) !important;
}

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

/* text-muted: Change from muted gray to readable secondary text */
.text-muted:not(.header *):not(.nav *):not(.sidebar *) {
  color: rgba(205, 221, 244, 0.92) !important;
}

/* text-secondary: Ensure readable on all backgrounds */
.text-secondary {
  color: rgba(205, 221, 244, 0.92) !important;
}

/* outline-light: Change from light outline to readable outline */
.outline-light {
  color: rgba(205, 221, 244, 0.92) !important;
  border-color: rgba(231, 240, 255, 0.35) !important;
}

.outline-light:focus,
.outline-light:active {
  border-color: var(--neon-cyan) !important;
  color: rgba(241, 248, 255, 0.98) !important;
}

/* ===== FORM ELEMENTS ===== */

/* Input placeholders: Ensure readable contrast */
input::placeholder,
textarea::placeholder {
  color: rgba(205, 221, 244, 0.78) !important;
  opacity: 1 !important;
}

/* Select box itself: white background, dark navy text */
select,
.form-select {
  background-color: #ffffff !important;
  color: #0a0e27 !important;
  border-color: rgba(0, 255, 200, 0.35) !important;
}

select:focus,
.form-select:focus {
  background-color: #ffffff !important;
  color: #0a0e27 !important;
  border-color: #00ffc8 !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 255, 200, 0.25) !important;
}

/* Native dropdown options: must be dark text on white (browser renders on system bg) */
select option,
.form-select option {
  color: #0a0e27 !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
}

select option:disabled,
.form-select option:disabled,
select option[value=""],
.form-select option[value=""] {
  color: #6c757d !important;
}

/* Form labels: High contrast */
label {
  color: rgba(241, 248, 255, 0.96) !important;
}

label.text-muted,
label.text-secondary {
  color: rgba(205, 221, 244, 0.92) !important;
}

/* ===== BADGE & CHIP COLORS ===== */

.badge {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.badge-light {
  background: rgba(228, 237, 250, 0.98) !important;
  color: #081028 !important;
  text-shadow: none;
}

.badge-secondary {
  background: rgba(205, 221, 244, 0.4) !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.chip {
  color: rgba(241, 248, 255, 0.96) !important;
}

.chip-light {
  background: rgba(228, 237, 250, 0.94) !important;
  color: #081028 !important;
}

/* ===== TABLE ELEMENTS ===== */

table th {
  background: rgba(8, 22, 56, 0.95) !important;
  color: rgba(241, 248, 255, 0.98) !important;
  font-weight: 600 !important;
}

table td {
  color: #f0f6ff !important;
}

tbody tr:hover {
  background: rgba(14, 34, 76, 0.5) !important;
}

tbody tr.alternate {
  background: rgba(14, 34, 76, 0.3) !important;
}

/* ===== LINKS & NAVIGATION ===== */

a:not(.nav a):not(.header a):not(.sidebar a):not(.link-dark) {
  color: var(--neon-cyan) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:not(.nav a):not(.header a):not(.sidebar a):not(.link-dark):hover {
  color: #00D4AA !important;
  text-decoration: underline;
}

a.link-secondary {
  color: rgba(205, 221, 244, 0.92) !important;
}

a.link-secondary:hover {
  color: rgba(241, 248, 255, 0.98) !important;
}

/* ===== CARD TEXT ELEMENTS ===== */

.card .card-text {
  color: rgba(205, 221, 244, 0.92) !important;
}

.card .card-subtitle {
  color: rgba(205, 221, 244, 0.78) !important;
}

.card .text-muted {
  color: rgba(205, 221, 244, 0.86) !important;
}

/* ===== HELPER TEXT & CAPTIONS ===== */

.help-text,
.form-text,
.caption,
.small {
  color: rgba(205, 221, 244, 0.86) !important;
}

/* ===== PAGE SECTIONS ===== */

/* Backgrounds: Ensure dark enough for white text */
.bg-light:not(header *):not(.nav *) {
  background: rgba(10, 18, 46, 0.88) !important;
}

.bg-light * {
  color: rgba(241, 248, 255, 0.96) !important;
}

.bg-light .text-muted {
  color: rgba(205, 221, 244, 0.92) !important;
}

/* ===== SPECIFIC COMPONENT FIXES ===== */

/* Alerts */
.alert {
  color: #ffffff !important;
}

.alert-light {
  background: rgba(228, 237, 250, 0.94) !important;
  color: #081028 !important;
  border-color: rgba(228, 237, 250, 0.58) !important;
}

/* Breadcrumb */
.breadcrumb {
  color: rgba(205, 221, 244, 0.86) !important;
}

.breadcrumb a {
  color: var(--neon-cyan) !important;
}

.breadcrumb-item.active {
  color: rgba(205, 221, 244, 0.92) !important;
}

/* Pagination */
.pagination a,
.pagination .page-link {
  color: var(--neon-cyan) !important;
}

.pagination a:hover,
.pagination .page-link:hover {
  color: #00D4AA !important;
}

.pagination .active .page-link {
  background: var(--neon-cyan) !important;
  color: #081028 !important;
}

/* ===== ACCESSIBILITY FOCUS STATES ===== */

button:focus-visible,
input:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--neon-cyan) !important;
  outline-offset: 2px !important;
}

/* ===== DISABLE LOW-CONTRAST PATTERNS ===== */

/* Prevent rendering of very low opacity text */
[style*="opacity: 0.1"],
[style*="opacity:0.1"],
[style*="opacity: 0.15"],
[style*="opacity:0.15"]  {
  opacity: 1 !important;
}

/* Override very light gray colors to readable white */
[style*="color: #ddd"],
[style*="color: #eee"],
[style*="color: #f5f5f5"],
[style*="color: #fafafa"],
[style*="color: #ccc"] {
  color: rgba(241, 248, 255, 0.96) !important;
}

/* ===== FOOTER & MINOR ELEMENTS ===== */

footer {
  color: rgba(238, 244, 255, 0.92) !important;
}

footer a {
  color: var(--neon-cyan) !important;
}

footer small,
footer .text-muted {
  color: rgba(205, 221, 244, 0.86) !important;
}

/* ===== MEDIA QUERIES: RESPONSIVE CONTRAST ===== */

@media (max-width: 768px) {
  /* Mobile: Increase text size and contrast for readability */
  body {
    font-size: 16px; /* Minimum for mobile accessibility */
  }

  .text-muted {
    color: rgba(205, 221, 244, 0.95) !important;
  }
}

/* ===== PRINT: HIGH CONTRAST ===== */

@media print {
  * {
    background: white !important;
    color: #000000 !important;
    border-color: #000000 !important;
  }
}