/* 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;
}