/* Ensure white text on colored backgrounds */

/* Primary background */
.bg-primary,
.card.bg-primary {
  color: #fff !important;
}

.bg-primary h1,
.bg-primary h2,
.bg-primary h3,
.bg-primary h4,
.bg-primary h5,
.bg-primary h6,
.card.bg-primary h1,
.card.bg-primary h2,
.card.bg-primary h3,
.card.bg-primary h4,
.card.bg-primary h5,
.card.bg-primary h6,
.bg-primary .card-title,
.bg-primary .card-subtitle,
.card.bg-primary .card-title,
.card.bg-primary .card-subtitle {
  color: #fff !important;
}

/* Success background */
.bg-success,
.card.bg-success {
  color: #fff !important;
}

.bg-success h1,
.bg-success h2,
.bg-success h3,
.bg-success h4,
.bg-success h5,
.bg-success h6,
.card.bg-success h1,
.card.bg-success h2,
.card.bg-success h3,
.card.bg-success h4,
.card.bg-success h5,
.card.bg-success h6,
.bg-success .card-title,
.bg-success .card-subtitle,
.card.bg-success .card-title,
.card.bg-success .card-subtitle {
  color: #fff !important;
}

/* Danger background */
.bg-danger,
.card.bg-danger {
  color: #fff !important;
}

.bg-danger h1,
.bg-danger h2,
.bg-danger h3,
.bg-danger h4,
.bg-danger h5,
.bg-danger h6,
.card.bg-danger h1,
.card.bg-danger h2,
.card.bg-danger h3,
.card.bg-danger h4,
.card.bg-danger h5,
.card.bg-danger h6,
.bg-danger .card-title,
.bg-danger .card-subtitle,
.card.bg-danger .card-title,
.card.bg-danger .card-subtitle {
  color: #fff !important;
}

/* Warning background */
.bg-warning,
.card.bg-warning {
  color: #fff !important;
}

.bg-warning h1,
.bg-warning h2,
.bg-warning h3,
.bg-warning h4,
.bg-warning h5,
.bg-warning h6,
.card.bg-warning h1,
.card.bg-warning h2,
.card.bg-warning h3,
.card.bg-warning h4,
.card.bg-warning h5,
.card.bg-warning h6,
.bg-warning .card-title,
.bg-warning .card-subtitle,
.card.bg-warning .card-title,
.card.bg-warning .card-subtitle {
  color: #fff !important;
}

/* Info background */
.bg-info,
.card.bg-info {
  color: #fff !important;
}

.bg-info h1,
.bg-info h2,
.bg-info h3,
.bg-info h4,
.bg-info h5,
.bg-info h6,
.card.bg-info h1,
.card.bg-info h2,
.card.bg-info h3,
.card.bg-info h4,
.card.bg-info h5,
.card.bg-info h6,
.bg-info .card-title,
.bg-info .card-subtitle,
.card.bg-info .card-title,
.card.bg-info .card-subtitle {
  color: #fff !important;
}

/* Secondary background */
.bg-secondary,
.card.bg-secondary {
  color: #fff !important;
}

.bg-secondary h1,
.bg-secondary h2,
.bg-secondary h3,
.bg-secondary h4,
.bg-secondary h5,
.bg-secondary h6,
.card.bg-secondary h1,
.card.bg-secondary h2,
.card.bg-secondary h3,
.card.bg-secondary h4,
.card.bg-secondary h5,
.card.bg-secondary h6,
.bg-secondary .card-title,
.bg-secondary .card-subtitle,
.card.bg-secondary .card-title,
.card.bg-secondary .card-subtitle {
  color: #fff !important;
}

/* Dark background */
.bg-dark,
.card.bg-dark {
  color: #fff !important;
}

.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5,
.bg-dark h6,
.card.bg-dark h1,
.card.bg-dark h2,
.card.bg-dark h3,
.card.bg-dark h4,
.card.bg-dark h5,
.card.bg-dark h6,
.bg-dark .card-title,
.bg-dark .card-subtitle,
.card.bg-dark .card-title,
.card.bg-dark .card-subtitle {
  color: #fff !important;
}

/* Special handling for cards with custom background colors */
.card[style*="background-color"] {
  color: #fff !important;
}

.card[style*="background-color"] h1,
.card[style*="background-color"] h2,
.card[style*="background-color"] h3,
.card[style*="background-color"] h4,
.card[style*="background-color"] h5,
.card[style*="background-color"] h6,
.card[style*="background-color"] .card-title,
.card[style*="background-color"] .card-subtitle,
.card[style*="background-color"] span,
.card[style*="background-color"] p {
  color: #fff !important;
}

/* Force white text on cards with colored backgrounds in payroll reports */
.bg-primary .total,
.bg-info .total,
.bg-success .total,
.bg-warning .total,
.bg-danger .total,
.bg-secondary .total,
.bg-dark .total {
  color: #fff !important;
}

/* Special handling for leave balance cards */
.leave-balance-box,
.card[style*="background-color"] .balance-label,
.card[style*="background-color"] .balance-amount {
  color: #fff !important;
}

/* Handle text within badge elements appropriately */
.bg-primary .badge:not(.bg-light),
.bg-success .badge:not(.bg-light),
.bg-danger .badge:not(.bg-light),
.bg-warning .badge:not(.bg-light),
.bg-info .badge:not(.bg-light),
.bg-secondary .badge:not(.bg-light),
.bg-dark .badge:not(.bg-light) {
  color: #fff !important;
}

/* For dark mode compatibility */
[data-bs-theme="dark"] .text-white,
[data-theme="dark"] .text-white {
  color: #fff !important;
}

/* Specific styles for payroll report summary cards */
.bg-primary .total,
.bg-primary .payroll,
.bg-primary .hours,
.bg-primary .overtime {
  color: #fff !important;
}

.bg-success .total,
.bg-success .payroll,
.bg-success .hours,
.bg-success .overtime {
  color: #fff !important;
}

.bg-info .total,
.bg-info .payroll,
.bg-info .hours,
.bg-info .overtime {
  color: #fff !important;
}

.bg-warning .total,
.bg-warning .payroll,
.bg-warning .hours,
.bg-warning .overtime {
  color: #fff !important;
}

/* Specific rules for payroll reports */
[class^="col-"]>.card.bg-primary,
[class^="col-"]>.card.bg-success,
[class^="col-"]>.card.bg-info,
[class^="col-"]>.card.bg-warning,
[class^="col-"]>.card.bg-danger,
[class^="col-"]>.card.bg-secondary,
[class^="col-"]>.card.bg-dark {
  color: #fff !important;
}

/* Ensure all texts inside payroll report cards are white */
.card.bg-primary *,
.card.bg-success *,
.card.bg-info *,
.card.bg-warning *,
.card.bg-danger *,
.card.bg-secondary *,
.card.bg-dark * {
  color: #fff !important;
}

/* Catch-all for elements with inline background styles that are dark enough */
[style*="background-color: #"] {
  color: #fff !important;
}

/* Override for very light backgrounds where we want to keep dark text */
[style*="background-color: #f"],
[style*="background-color: #e"],
[style*="background-color: #d"],
[style*="background-color: #c"],
[style*="background-color: #FFF"],
[style*="background-color: #fff"],
[style*="background-color: rgb(255"] {
  color: inherit !important;
}

/* Fix for chart containers to prevent scrolling issues */
.chart-container {
  overflow: visible;
  position: relative;
}

.chart-container canvas {
  max-height: 100%;
}

/* Fix for payroll chart specifically */
#payrollChart {
  height: 100%;
  width: 100%;
  max-height: none;
  max-width: none;
}

/* Ensure chart container cards have proper padding */
.card-body.d-flex.align-items-center.justify-content-center {
  padding: 1rem;
  overflow: hidden;
}

/* Chart container styling - updated for better dimensions */
.chart-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 280px;
  position: relative;
  padding: 1rem;
  overflow: visible;
}

.chart-center-container {
  position: relative;
  height: 230px;
  width: auto;
  aspect-ratio: 1/1;
  margin: 0 auto;
}

/* Fix pie chart legend and layout */
#payrollChart {
  margin: 0 auto;
}

/* Component Style Text Color Fixes */
/* Override the global white text rules for subtle (10% opacity) backgrounds */
/* These need colored text, not white text, for proper contrast */

.bg-primary.bg-opacity-10,
.bg-primary.bg-opacity-10 *,
.card-header.bg-primary.bg-opacity-10,
.card-header.bg-primary.bg-opacity-10 *,
.modal-header.bg-primary.bg-opacity-10,
.modal-header.bg-primary.bg-opacity-10 *,
.modal-footer.bg-primary.bg-opacity-10,
.modal-footer.bg-primary.bg-opacity-10 * {
  color: inherit !important;
}

.bg-primary.bg-opacity-10.text-primary,
.bg-primary.bg-opacity-10.text-primary *,
.card-header.bg-primary.bg-opacity-10.text-primary h1,
.card-header.bg-primary.bg-opacity-10.text-primary h2,
.card-header.bg-primary.bg-opacity-10.text-primary h3,
.card-header.bg-primary.bg-opacity-10.text-primary h4,
.card-header.bg-primary.bg-opacity-10.text-primary h5,
.card-header.bg-primary.bg-opacity-10.text-primary h6 {
  color: var(--bs-primary) !important;
}

.bg-secondary.bg-opacity-10,
.bg-secondary.bg-opacity-10 *,
.card-header.bg-secondary.bg-opacity-10,
.card-header.bg-secondary.bg-opacity-10 *,
.modal-header.bg-secondary.bg-opacity-10,
.modal-header.bg-secondary.bg-opacity-10 *,
.modal-footer.bg-secondary.bg-opacity-10,
.modal-footer.bg-secondary.bg-opacity-10 * {
  color: inherit !important;
}

.bg-secondary.bg-opacity-10.text-secondary,
.bg-secondary.bg-opacity-10.text-secondary *,
.card-header.bg-secondary.bg-opacity-10.text-secondary h1,
.card-header.bg-secondary.bg-opacity-10.text-secondary h2,
.card-header.bg-secondary.bg-opacity-10.text-secondary h3,
.card-header.bg-secondary.bg-opacity-10.text-secondary h4,
.card-header.bg-secondary.bg-opacity-10.text-secondary h5,
.card-header.bg-secondary.bg-opacity-10.text-secondary h6 {
  color: var(--bs-secondary) !important;
}

.bg-success.bg-opacity-10,
.bg-success.bg-opacity-10 *,
.card-header.bg-success.bg-opacity-10,
.card-header.bg-success.bg-opacity-10 *,
.modal-header.bg-success.bg-opacity-10,
.modal-header.bg-success.bg-opacity-10 *,
.modal-footer.bg-success.bg-opacity-10,
.modal-footer.bg-success.bg-opacity-10 * {
  color: inherit !important;
}

.bg-success.bg-opacity-10.text-success,
.bg-success.bg-opacity-10.text-success *,
.card-header.bg-success.bg-opacity-10.text-success h1,
.card-header.bg-success.bg-opacity-10.text-success h2,
.card-header.bg-success.bg-opacity-10.text-success h3,
.card-header.bg-success.bg-opacity-10.text-success h4,
.card-header.bg-success.bg-opacity-10.text-success h5,
.card-header.bg-success.bg-opacity-10.text-success h6 {
  color: var(--bs-success) !important;
}

.bg-info.bg-opacity-10,
.bg-info.bg-opacity-10 *,
.card-header.bg-info.bg-opacity-10,
.card-header.bg-info.bg-opacity-10 *,
.modal-header.bg-info.bg-opacity-10,
.modal-header.bg-info.bg-opacity-10 *,
.modal-footer.bg-info.bg-opacity-10,
.modal-footer.bg-info.bg-opacity-10 * {
  color: inherit !important;
}

.bg-info.bg-opacity-10.text-info,
.bg-info.bg-opacity-10.text-info *,
.card-header.bg-info.bg-opacity-10.text-info h1,
.card-header.bg-info.bg-opacity-10.text-info h2,
.card-header.bg-info.bg-opacity-10.text-info h3,
.card-header.bg-info.bg-opacity-10.text-info h4,
.card-header.bg-info.bg-opacity-10.text-info h5,
.card-header.bg-info.bg-opacity-10.text-info h6 {
  color: var(--bs-info) !important;
}

.bg-warning.bg-opacity-10,
.bg-warning.bg-opacity-10 *,
.card-header.bg-warning.bg-opacity-10,
.card-header.bg-warning.bg-opacity-10 *,
.modal-header.bg-warning.bg-opacity-10,
.modal-header.bg-warning.bg-opacity-10 *,
.modal-footer.bg-warning.bg-opacity-10,
.modal-footer.bg-warning.bg-opacity-10 * {
  color: inherit !important;
}

.bg-warning.bg-opacity-10.text-dark,
.bg-warning.bg-opacity-10.text-dark *,
.card-header.bg-warning.bg-opacity-10.text-dark h1,
.card-header.bg-warning.bg-opacity-10.text-dark h2,
.card-header.bg-warning.bg-opacity-10.text-dark h3,
.card-header.bg-warning.bg-opacity-10.text-dark h4,
.card-header.bg-warning.bg-opacity-10.text-dark h5,
.card-header.bg-warning.bg-opacity-10.text-dark h6 {
  color: var(--bs-dark) !important;
}

.bg-danger.bg-opacity-10,
.bg-danger.bg-opacity-10 *,
.card-header.bg-danger.bg-opacity-10,
.card-header.bg-danger.bg-opacity-10 *,
.modal-header.bg-danger.bg-opacity-10,
.modal-header.bg-danger.bg-opacity-10 *,
.modal-footer.bg-danger.bg-opacity-10,
.modal-footer.bg-danger.bg-opacity-10 * {
  color: inherit !important;
}

.bg-danger.bg-opacity-10.text-danger,
.bg-danger.bg-opacity-10.text-danger *,
.card-header.bg-danger.bg-opacity-10.text-danger h1,
.card-header.bg-danger.bg-opacity-10.text-danger h2,
.card-header.bg-danger.bg-opacity-10.text-danger h3,
.card-header.bg-danger.bg-opacity-10.text-danger h4,
.card-header.bg-danger.bg-opacity-10.text-danger h5,
.card-header.bg-danger.bg-opacity-10.text-danger h6 {
  color: var(--bs-danger) !important;
}