/* Accessibility */
/* Base */
:root {
  --bs-body-bg: #ffffff;
  --bs-body-color: #212529;

  --bs-primary: #0d6efd;
  --bs-success: #198754;
  --bs-danger: #dc3545;
  --bs-warning: #ffc107;
  --bs-info: #0dcaf0;

  --bs-primary-rgb: 13, 110, 253;
  --bs-border-color: #dee2e6;
  --bs-secondary-bg: #f8f9fa;

  --white: #ffffff;
}

/* Dark */
:root.dark {
  --bs-body-bg: #121212;
  --bs-body-color: #e9ecef;

  --bs-primary: #4dabf7;
  --bs-primary-rgb: 77, 171, 247;

  --bs-success: #51cf66;
  --bs-success-rgb: 81, 207, 102;

  --bs-danger: #ff6b6b;
  --bs-danger-rgb: 255, 107, 107;

  --bs-warning: #ffd43b;
  --bs-warning-rgb: 255, 212, 59;

  --bs-info: #3bc9db;
  --bs-info-rgb: 59, 201, 219;
}

/* Tritanopia */
:root.tritanopia {
  --bs-primary: #d55e00;
  --bs-primary-rgb: 213, 94, 0;

  --bs-success: #cc79a7;
  --bs-success-rgb: 204, 121, 167;

  --bs-danger: #000000;
  --bs-danger-rgb: 0, 0, 0;

  --bs-warning: #e69f00;
  --bs-warning-rgb: 230, 159, 0;

  --bs-info: #f0e442;
  --bs-info-rgb: 240, 228, 66;
}

/* Deuteranopia */
:root.deuteranopia {
  --bs-primary: #0072b2;
  --bs-primary-rgb: 0, 114, 178;

  --bs-success: #56b4e9;
  --bs-success-rgb: 86, 180, 233;

  --bs-danger: #d55e00;
  --bs-danger-rgb: 213, 94, 0;

  --bs-warning: #e69f00;
  --bs-warning-rgb: 230, 159, 0;

  --bs-info: #009e73;
  --bs-info-rgb: 0, 158, 115;
}

/* Protanopia */
:root.protanopia {
  --bs-primary: #0072b2;
  --bs-primary-rgb: 0, 114, 178;

  --bs-success: #009e73;
  --bs-success-rgb: 0, 158, 115;

  --bs-danger: #cc79a7;
  --bs-danger-rgb: 204, 121, 167;

  --bs-warning: #e69f00;
  --bs-warning-rgb: 230, 159, 0;

  --bs-info: #56b4e9;
  --bs-info-rgb: 86, 180, 233;
}

/* Font sizing */
body.fs--50 {
  font-size: 8px;
}

body.fs--75 {
  font-size: 10px;
}

body.fs-100 {
  font-size: 14px;
}

body.fs-125 {
  font-size: 18px;
}

body.fs-150 {
  font-size: 20px;
}

body.fs-200 {
  font-size: 24px;
}

/* ================= GLOBAL ================= */
/* body {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
}

a {
  text-decoration: underline;
} */

/* ================= BUTTONS ================= */
.btn {
  border-width: 2px;
  color: #fff !important;
}

.btn-warning,
.btn-info {
  color: #000 !important;
}

/* ================= ALERTS ================= */
.alert {
  border-left: 5px solid currentColor;
  background: rgba(0, 0, 0, 0.03);
}

:root.dark .alert {
  background: rgba(255, 255, 255, 0.05);
}

.alert::before {
  margin-right: 6px;
  font-weight: bold;
}

.alert-success::before {
  content: "✔";
}

.alert-danger::before {
  content: "✖";
}

.alert-warning::before {
  content: "⚠";
}

.alert-info::before {
  content: "ℹ";
}

/* ================= FORMS ================= */
.form-control {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

.form-control:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.is-valid::after {
  content: " ✔";
}

.is-invalid::after {
  content: " ✖";
}

/* ================= FOCUS ================= */
/* :focus {
  outline: 3px solid rgba(var(--bs-primary-rgb), 0.6);
  outline-offset: 2px;
} */

/* ================= TABLE ================= */
.table {
  --bs-table-bg: var(--bs-body-bg);
}

.table-striped tbody tr:nth-child(odd) {
  background: var(--bs-secondary-bg);
}

/* .table-hover tbody tr:hover {
  outline: 2px solid var(--bs-primary);
} */

/* ================= BADGES ================= */
.badge {
  font-weight: 600;
}

.badge.bg-warning,
.badge.bg-info {
  color: #000;
}

/* ================= NAVBAR ================= */
.navbar {
  background: var(--bs-secondary-bg) !important;
}

/* ================= CARD / MODAL ================= */
.card,
.modal-content {
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

/* ================= PATTERNS ================= */
.pattern-stripes {
  background-image: repeating-linear-gradient(45deg,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.1) 5px,
      transparent 5px,
      transparent 10px);
}

/* =========================================================
FORCE BOOTSTRAP UTILITY OVERRIDES (THEME-AWARE)
Ensures ALL utilities respect CSS variables
========================================================= */


/* =========================
BACKGROUND UTILITIES
========================= */
.bg-primary {
  background-color: var(--bs-primary) !important;
}

.bg-success {
  background-color: var(--bs-success) !important;
}

.bg-danger {
  background-color: var(--bs-danger) !important;
}

.bg-warning {
  background-color: var(--bs-warning) !important;
}

.bg-info {
  background-color: var(--bs-info) !important;
}

.bg-light {
  background-color: var(--bs-secondary-bg) !important;
}

.bg-dark {
  background-color: #000 !important;
}


/* =========================
TEXT UTILITIES
========================= */
.text-primary {
  color: var(--bs-primary) !important;
}

.text-success {
  color: var(--bs-success) !important;
}

.text-danger {
  color: var(--bs-danger) !important;
}

.text-warning {
  color: var(--bs-warning) !important;
}

.text-info {
  color: var(--bs-info) !important;
}

.text-muted {
  color: rgba(var(--bs-primary-rgb), 0.6) !important;
}


/* =========================
BORDER UTILITIES
========================= */
.border-primary {
  border-color: var(--bs-primary) !important;
}

.border-success {
  border-color: var(--bs-success) !important;
}

.border-danger {
  border-color: var(--bs-danger) !important;
}

.border-warning {
  border-color: var(--bs-warning) !important;
}

.border-info {
  border-color: var(--bs-info) !important;
}


/* =========================
BUTTON COLOR FIXES
========================= */
.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.btn-success {
  background-color: var(--bs-success) !important;
  border-color: var(--bs-success) !important;
}

.btn-danger {
  background-color: var(--bs-danger) !important;
  border-color: var(--bs-danger) !important;
}

.btn-warning {
  background-color: var(--bs-warning) !important;
  border-color: var(--bs-warning) !important;
  color: #000 !important;
}

.btn-info {
  background-color: var(--bs-info) !important;
  border-color: var(--bs-info) !important;
  color: #000 !important;
}


/* =========================
OUTLINE BUTTONS
========================= */
.btn-outline-primary {
  background-color: var(--white);
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.btn-outline-success {
  background-color: var(--white);
  color: var(--bs-success) !important;
  border-color: var(--bs-success) !important;
}

.btn-outline-danger {
  background-color: var(--white);
  color: var(--bs-danger) !important;
  border-color: var(--bs-danger) !important;
}

.btn-outline-warning {
  background-color: var(--white);
  color: var(--bs-warning) !important;
  border-color: var(--bs-warning) !important;
}

.btn-outline-info {
  background-color: var(--white);
  color: var(--bs-info) !important;
  border-color: var(--bs-info) !important;
}

.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover {
  /* background-color: var(--white); */
}


/* =========================
ALERT COLORS (FORCE)
========================= */
.alert-primary {
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.alert-success {
  color: var(--bs-success) !important;
  border-color: var(--bs-success) !important;
}

.alert-danger {
  color: var(--bs-danger) !important;
  border-color: var(--bs-danger) !important;
}

.alert-warning {
  color: var(--bs-warning) !important;
  border-color: var(--bs-warning) !important;
}

.alert-info {
  color: var(--bs-info) !important;
  border-color: var(--bs-info) !important;
}


/* =========================
BADGES
========================= */
.badge.bg-primary {
  background-color: var(--bs-primary) !important;
}

.badge.bg-success {
  background-color: var(--bs-success) !important;
}

.badge.bg-danger {
  background-color: var(--bs-danger) !important;
}

.badge.bg-warning {
  background-color: var(--bs-warning) !important;
  color: #000 !important;
}

.badge.bg-info {
  background-color: var(--bs-info) !important;
  color: #000 !important;
}


/* =========================
PROGRESS BARS
========================= */
.progress-bar.bg-primary {
  background-color: var(--bs-primary) !important;
}

.progress-bar.bg-success {
  background-color: var(--bs-success) !important;
}

.progress-bar.bg-danger {
  background-color: var(--bs-danger) !important;
}

.progress-bar.bg-warning {
  background-color: var(--bs-warning) !important;
}

.progress-bar.bg-info {
  background-color: var(--bs-info) !important;
}


/* =========================
LIST GROUP
========================= */
.list-group-item.active {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}


/* =========================
LINK COLORS
========================= */
a.text-primary {
  color: var(--bs-primary) !important;
}

a.text-success {
  color: var(--bs-success) !important;
}

a.text-danger {
  color: var(--bs-danger) !important;
}


/* =========================
SPINNER COLORS
========================= */
.text-primary.spinner-border {
  color: var(--bs-primary) !important;
}

.text-success.spinner-border {
  color: var(--bs-success) !important;
}

.text-danger.spinner-border {
  color: var(--bs-danger) !important;
}


/* =========================
TABLE STATES
========================= */
.table-primary {
  background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
}

.table-success {
  background-color: rgba(var(--bs-success-rgb), 0.1) !important;
}

.table-danger {
  background-color: rgba(var(--bs-danger-rgb), 0.1) !important;
}


/* =========================
FOCUS + ACCESSIBILITY BOOST
========================= */
/* :focus {
  outline: 3px solid rgba(var(--bs-primary-rgb), 0.6) !important;
} */