/* Readable text on solid brand backgrounds.
 *
 * These rules exist because AdminKit paints card titles (--bs-card-title-color:
 * #939ba2) and muted text a mid grey that disappears on a solid .bg-* fill.
 *
 * They used to hardcode `color: #fff`, which assumed every brand colour is dark.
 * It isn't: white on the DEFAULT --bs-warning (#ffc107) measures 1.63:1, far
 * below the WCAG AA 4.5:1 floor, and a tenant who brands on yellow/mint/sky
 * broke every other fill too. The foreground now comes from --bs-on-*, emitted
 * per tenant by BusinessTheme#on_color_tokens, which picks white or #212529 by
 * measured contrast against that tenant's actual brand colour.
 *
 * The fallbacks matter: surfaces rendered without a business theme (sign-in,
 * error pages) never get the inline <style id="custom-theme"> block, so each
 * var() carries the correct value for Bootstrap's own default of that colour.
 */

/* Primary background */
.bg-primary,
.card.bg-primary {
  color: var(--bs-on-primary, #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: var(--bs-on-primary, #fff) !important;
}

/* Success background */
.bg-success,
.card.bg-success {
  color: var(--bs-on-success, #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: var(--bs-on-success, #fff) !important;
}

/* Danger background */
.bg-danger,
.card.bg-danger {
  color: var(--bs-on-danger, #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: var(--bs-on-danger, #fff) !important;
}

/* Warning background — Bootstrap's own default (#ffc107) needs DARK text, which
   is why the fallback here differs from every other fill in this file. */
.bg-warning,
.card.bg-warning {
  color: var(--bs-on-warning, #212529) !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: var(--bs-on-warning, #212529) !important;
}

/* Info background — Bootstrap's default (#0dcaf0) is also a light cyan. */
.bg-info,
.card.bg-info {
  color: var(--bs-on-info, #212529) !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: var(--bs-on-info, #212529) !important;
}

/* Secondary background */
.bg-secondary,
.card.bg-secondary {
  color: var(--bs-on-secondary, #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: var(--bs-on-secondary, #fff) !important;
}

/* Dark background — --bs-dark isn't tenant-themable, but it IS mode-dependent:
   AdminKit's dark sheet flips it from #212529 to a near-white #e9eaec. Hardcoding
   white here measured 1.2:1 in dark mode (invisible), so the pairing is declared
   per mode rather than assumed. */
:root {
  --bs-on-dark: #ffffff;
}

:root[data-theme="dark"] {
  --bs-on-dark: #212529;
}

.bg-dark,
.card.bg-dark {
  color: var(--bs-on-dark, #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: var(--bs-on-dark, #fff) !important;
}

/* Payroll / summary cards: figures inside a solid fill inherit the fill's
   foreground. Listed by class rather than swept with `*` — see the note on the
   descendant rules below. */
.bg-primary .total,
.bg-primary .payroll,
.bg-primary .hours,
.bg-primary .overtime {
  color: var(--bs-on-primary, #fff) !important;
}

.bg-success .total,
.bg-success .payroll,
.bg-success .hours,
.bg-success .overtime {
  color: var(--bs-on-success, #fff) !important;
}

.bg-info .total,
.bg-info .payroll,
.bg-info .hours,
.bg-info .overtime {
  color: var(--bs-on-info, #212529) !important;
}

.bg-warning .total,
.bg-warning .payroll,
.bg-warning .hours,
.bg-warning .overtime {
  color: var(--bs-on-warning, #212529) !important;
}

.bg-danger .total,
.bg-danger .payroll,
.bg-danger .hours,
.bg-danger .overtime {
  color: var(--bs-on-danger, #fff) !important;
}

.bg-secondary .total {
  color: var(--bs-on-secondary, #fff) !important;
}

.bg-dark .total {
  color: var(--bs-on-dark, #fff) !important;
}

/* Descendant sweep for solid cards.
 *
 * This was `.card.bg-primary *`, which forced white onto EVERY descendant —
 * including children that carry their own background and therefore their own
 * correct foreground. A `.badge.bg-light` inside a `.bg-primary` card rendered
 * white-on-#f5f7fb at 1.06:1: invisible. The exclusion list below skips any
 * child that paints its own surface or states its own text colour, so those
 * components keep the contrast they were designed with. Layout utilities
 * (.text-center, .text-truncate) are deliberately NOT excluded — matching
 * `[class*="text-"]` would have dropped them out of the sweep as well.
 */
.card.bg-primary *:not(.badge):not(.btn):not(.alert):not(.card):not([class*="bg-"]):not(.text-white):not(.text-dark):not(.text-black):not(.text-body):not(.text-muted):not(.text-primary):not(.text-secondary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info) {
  color: var(--bs-on-primary, #fff) !important;
}

.card.bg-success *:not(.badge):not(.btn):not(.alert):not(.card):not([class*="bg-"]):not(.text-white):not(.text-dark):not(.text-black):not(.text-body):not(.text-muted):not(.text-primary):not(.text-secondary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info) {
  color: var(--bs-on-success, #fff) !important;
}

.card.bg-info *:not(.badge):not(.btn):not(.alert):not(.card):not([class*="bg-"]):not(.text-white):not(.text-dark):not(.text-black):not(.text-body):not(.text-muted):not(.text-primary):not(.text-secondary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info) {
  color: var(--bs-on-info, #212529) !important;
}

.card.bg-warning *:not(.badge):not(.btn):not(.alert):not(.card):not([class*="bg-"]):not(.text-white):not(.text-dark):not(.text-black):not(.text-body):not(.text-muted):not(.text-primary):not(.text-secondary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info) {
  color: var(--bs-on-warning, #212529) !important;
}

.card.bg-danger *:not(.badge):not(.btn):not(.alert):not(.card):not([class*="bg-"]):not(.text-white):not(.text-dark):not(.text-black):not(.text-body):not(.text-muted):not(.text-primary):not(.text-secondary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info) {
  color: var(--bs-on-danger, #fff) !important;
}

.card.bg-secondary *:not(.badge):not(.btn):not(.alert):not(.card):not([class*="bg-"]):not(.text-white):not(.text-dark):not(.text-black):not(.text-body):not(.text-muted):not(.text-primary):not(.text-secondary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info) {
  color: var(--bs-on-secondary, #fff) !important;
}

.card.bg-dark *:not(.badge):not(.btn):not(.alert):not(.card):not([class*="bg-"]):not(.text-white):not(.text-dark):not(.text-black):not(.text-body):not(.text-muted):not(.text-primary):not(.text-secondary):not(.text-success):not(.text-danger):not(.text-warning):not(.text-info) {
  color: var(--bs-on-dark, #fff) !important;
}

/* NOTE — two rules were deleted here rather than fixed, because CSS cannot make
 * them correct:
 *
 *   [style*="background-color: #"]     { color: #fff !important; }
 *   .card[style*="background-color"]   { color: #fff !important; }
 *
 * A substring match on the style attribute cannot know how light the colour is.
 * The escape hatch that followed tested the FIRST HEX DIGIT (f/e/d/c), which is
 * not a lightness test: #c00000 (dark red) was read as light and got dark text,
 * while #a1e6ff (near-white) was read as dark and got white text at 1.4:1. Both
 * failure directions were live. Worse, the colours flowing into these rules are
 * admin-picked (leave-type colours, workspace card colours) and so can be any
 * lightness at all.
 *
 * Elements with an inline background now state their own foreground, computed by
 * the `contrast_color` helper in application_helper.rb — the pattern the leave
 * and password-manager badges already used. Do not reintroduce a blanket
 * attribute selector here; fix the view instead.
 */

/* Text within badges on a solid fill: badges carry their own background, so this
   only covers the ones that don't (.badge with no bg-* class inherits the card). */
.bg-primary .badge:not([class*="bg-"]) {
  color: var(--bs-on-primary, #fff) !important;
}

.bg-success .badge:not([class*="bg-"]) {
  color: var(--bs-on-success, #fff) !important;
}

.bg-danger .badge:not([class*="bg-"]) {
  color: var(--bs-on-danger, #fff) !important;
}

.bg-warning .badge:not([class*="bg-"]) {
  color: var(--bs-on-warning, #212529) !important;
}

.bg-info .badge:not([class*="bg-"]) {
  color: var(--bs-on-info, #212529) !important;
}

.bg-secondary .badge:not([class*="bg-"]) {
  color: var(--bs-on-secondary, #fff) !important;
}

.bg-dark .badge:not([class*="bg-"]) {
  color: var(--bs-on-dark, #fff) !important;
}

/* AdminKit's pastel `.bg-*-light` fills — the third background family, and the
 * only one that had no foreground paired with it.
 *
 * AdminKit declares `.badge { color: #fff }` unconditionally and then declares
 * `.bg-success-light { background: #a5f1db }` (and siblings) with no colour at
 * all. A `<span class="badge bg-success-light">` therefore paints white on a
 * near-white pastel: measured on /apps/tasks/analytics, every status tag landed
 * between 1.06:1 (bg-warning-light) and 1.49:1 (bg-secondary-light), against a
 * WCAG AA floor of 4.5:1. `opacity` is 1 the whole time — the text just has
 * almost no contrast, which reads to users as a greyed-out, inactive tag.
 *
 * The pairing is Bootstrap's own `--bs-*-text-emphasis`, not the tenant
 * `--bs-on-subtle-*` used for `.bg-opacity-10` above: these pastels are FIXED
 * hex values that do not follow the tenant's brand, so a foreground computed
 * against a tenant-blended tint would be measured against the wrong background.
 * AdminKit ships the same pastels AND the same six emphasis values in both
 * light.css and dark.css, so one declaration is correct in both modes
 * (7.8:1–10.5:1 measured across the six).
 *
 * Deliberately NOT `!important`: `.badge.bg-*-light` (0,2,0) already outranks
 * AdminKit's `.badge` (0,1,0), while Bootstrap's `.text-*` utilities carry
 * `!important` and keep winning — so the views that already state their own
 * foreground (`badge bg-success-light text-success`) are left exactly as they
 * were. `-light`/`-dark` are omitted: no view pairs them with `.badge`, and
 * unlike the six they are the one family whose pastel flips between modes.
 */
.badge.bg-primary-light {
  color: var(--bs-primary-text-emphasis, #183258);
}

.badge.bg-secondary-light {
  color: var(--bs-secondary-text-emphasis, #2b2f32);
}

.badge.bg-success-light {
  color: var(--bs-success-text-emphasis, #0b4b38);
}

.badge.bg-info-light {
  color: var(--bs-info-text-emphasis, #09414a);
}

.badge.bg-warning-light {
  color: var(--bs-warning-text-emphasis, #654a12);
}

.badge.bg-danger-light {
  color: var(--bs-danger-text-emphasis, #58151c);
}

/* For dark mode compatibility */
[data-bs-theme="dark"] .text-white,
[data-theme="dark"] .text-white {
  color: #fff !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.
 *
 * The colour is --bs-on-subtle-* rather than the raw --bs-* it used to be. A
 * 10% tint of a colour is a poor background FOR that same colour: the raw brand
 * on its own tint measured 2.93:1 with the default blue on a dark card, and on a
 * pale brand it disappears outright. BusinessTheme#subtle_on_color_tokens
 * already computes the readable variant against the actual blended tint and
 * emits it at :root in both modes — this just consumes it. The raw brand stays
 * as the var() fallback for surfaces that render without a theme block.
 */

.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-on-subtle-primary, 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-on-subtle-secondary, 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-on-subtle-success, 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-on-subtle-info, 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-on-subtle-danger, var(--bs-danger)) !important;
}