/* Theme Consistency CSS - Handles proper text/background contrasts in both light and dark modes */

/* Set root variables for both light and dark modes */
:root {
  /* Common colors */
  --tac-primary: #14819c;
  --tac-secondary: #e85a0c;
  --tac-success: #198754;
  --tac-info: #0dcaf0;
  --tac-warning: #ffc107;
  --tac-danger: #dc3545;
  
  /* Light mode defaults (default theme) */
  --text-color: #212529;
  --text-muted: #6c757d;
  --bg-color: #ffffff;
  --card-bg: #ffffff;
  --card-border: rgba(0, 0, 0, 0.125);
  --table-bg: #ffffff;
  --table-border: #dee2e6;
  --input-bg: #ffffff;
  --input-color: #212529;
}

/* Dark mode overrides - applied when the [data-bs-theme=dark] attribute is present */
[data-bs-theme="dark"] {
  --text-color: #f8f9fa;
  --text-muted: #adb5bd;
  --bg-color: #212529;
  --card-bg: #2c3034;
  --card-border: rgba(255, 255, 255, 0.125);
  --table-bg: #2c3034;
  --table-border: #495057;
  --input-bg: #2c3034;
  --input-color: #f8f9fa;
}

/* Base element styles */
body {
  color: var(--text-color);
  background-color: var(--bg-color);
}

/* Text color classes that respect the theme */
.text-theme {
  color: var(--text-color) !important;
}

.text-theme-muted {
  color: var(--text-muted) !important;
}

/* Card styles with proper contrast */
.card {
  background-color: var(--card-bg);
  border-color: var(--card-border);
  color: var(--text-color);
}

.card-header, .card-footer {
  background-color: rgba(0, 0, 0, 0.03);
  color: var(--text-color);
}

[data-bs-theme="dark"] .card-header, 
[data-bs-theme="dark"] .card-footer {
  background-color: rgba(255, 255, 255, 0.05);
}

.card-body {
  color: var(--text-color);
}

/* Ensure text in cards is always visible */
.card .card-title,
.card .card-text,
.card p {
  color: var(--text-color) !important;
}

/* Table styles */
.table {
  color: var(--text-color);
  border-color: var(--table-border);
}

.table thead th {
  color: var(--text-color);
}

.table-hover tbody tr:hover {
  color: var(--text-color);
}

/* Form controls */
.form-control, .form-select {
  background-color: var(--input-bg);
  color: var(--input-color);
  border-color: var(--table-border);
}

.form-control:focus, .form-select:focus {
  background-color: var(--input-bg);
  color: var(--input-color);
}

/* Input group addons */
.input-group-text {
  background-color: var(--card-bg);
  color: var(--text-color);
  border-color: var(--table-border);
}

/* Modal styles */
.modal-content {
  background-color: var(--card-bg);
  color: var(--text-color);
  border-color: var(--card-border);
}

.modal-header, .modal-footer {
  border-color: var(--card-border);
}

/* Badge colors that maintain visibility in both modes */
.badge.bg-secondary {
  color: #fff;
}

[data-bs-theme="dark"] .badge.bg-light,
[data-bs-theme="dark"] .badge.bg-white {
  color: #212529;
}

/* Special handling for cards in dark mode that need consistent appearance */
[data-bs-theme="dark"] .card.bg-secondary,
[data-bs-theme="dark"] .card.bg-light,
[data-bs-theme="dark"] .card.bg-white {
  color: #212529;
}

/* Ensure consistent colors for role category cards */
.card.role-category-card {
  background-color: var(--card-bg);
  color: var(--text-color);
}

/* Fix for cards with bg-opacity classes */
[data-bs-theme="dark"] .bg-secondary.bg-opacity-25 {
  background-color: rgba(108, 117, 125, 0.25) !important;
  color: var(--text-color) !important;
}

/* Ensure all paragraphs in cards have proper contrast */
[data-bs-theme="dark"] .card-text, 
[data-bs-theme="dark"] .card p:not(.text-muted):not(.text-white):not(.text-light) {
  color: var(--text-color) !important;
}

[data-bs-theme="light"] .card-text, 
[data-bs-theme="light"] .card p:not(.text-muted):not(.text-dark):not(.text-black) {
  color: var(--text-color) !important;
}

/* Forced text colors for situations where we need to guarantee visibility */
.text-force-dark {
  color: #212529 !important;
}

.text-force-light {
  color: #f8f9fa !important;
}

/* Enhanced table row visibility */
.table>tbody>tr>td {
  color: var(--text-color);
}

/* Table with dark background specific styling */
[data-bs-theme="dark"] .table.dark-theme-table {
  color: #f8f9fa;
}

[data-bs-theme="dark"] .table.dark-theme-table thead th {
  color: #f8f9fa;
}

/* Ensure consistent chart text colors */
#roleDistributionChart text {
  fill: var(--text-color);
}