/* Custom styles use these tokens with their original light colors as fallbacks.
   Screen-only tokens keep PDF exports and browser printing on the light palette. */
.payroll-theme-picker {
  display: inline-flex;
  flex: 0 0 auto;
}

.payroll-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-width: 6.25rem;
  min-height: 2.25rem;
  padding: .375rem .625rem;
  background: transparent;
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  border-radius: .625rem;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .15s ease, border-color .15s ease;
}

.payroll-theme-toggle:hover {
  background: var(--bs-tertiary-bg);
}

.payroll-theme-toggle svg {
  display: block;
  width: 1.125rem;
  height: 1.125rem;
}

.payroll-theme-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.payroll-topbar .payroll-theme-toggle {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border-color: rgba(255, 255, 255, .35);
}

.payroll-topbar .payroll-theme-toggle:hover {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .6);
}

.payroll-account-nav {
  gap: .5rem;
  min-height: 4rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.payroll-account-nav-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
}

.payroll-account-nav .navbar-brand {
  margin-right: 0;
}

.payroll-account-nav .navbar-toggler {
  width: 44px;
  height: 44px;
  padding: .5rem;
  border-radius: .625rem;
}

.payroll-account-nav .navbar-toggler-icon {
  width: 1.25rem;
  height: 1.25rem;
}

@media (min-width: 992px) {
  .payroll-account-nav-actions {
    order: 1;
  }

  .payroll-account-nav .navbar-collapse {
    flex-basis: auto;
  }
}

@media (max-width: 767.98px) {
  .payroll-theme-toggle {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: .625rem;
  }

  .payroll-theme-toggle [data-payroll-theme-label] {
    display: none;
  }
}

@media screen {
  [data-bs-theme="dark"] {
    --payroll-surface: var(--bs-body-bg);
    --payroll-surface-muted: var(--bs-tertiary-bg);
    --payroll-ink: var(--bs-body-color);
    --payroll-muted: var(--bs-secondary-color);
    --payroll-border: var(--bs-border-color);
    --payroll-accent-lift: 65%;
    --payroll-success-bg: var(--bs-success-bg-subtle);
    --payroll-success-text: var(--bs-success-text-emphasis);
    --payroll-success-border: var(--bs-success-border-subtle);
    --payroll-warning-bg: var(--bs-warning-bg-subtle);
    --payroll-warning-text: var(--bs-warning-text-emphasis);
    --payroll-warning-border: var(--bs-warning-border-subtle);
    --payroll-danger-bg: var(--bs-danger-bg-subtle);
    --payroll-danger-text: var(--bs-danger-text-emphasis);
    --payroll-danger-border: var(--bs-danger-border-subtle);
    --payroll-info-bg: var(--bs-primary-bg-subtle);
    --payroll-info-text: var(--bs-primary-text-emphasis);
    --payroll-info-border: var(--bs-primary-border-subtle);
    --employee-group-bg: var(--bs-tertiary-bg);
    --employee-group-text: var(--bs-body-color);
    --employee-group-count: var(--bs-secondary-color);
    --employee-group-hover: var(--bs-tertiary-bg);
  }

  /* Bootstrap's fixed light utilities predate its adaptive color modes. */
  [data-bs-theme="dark"] .bg-white {
    background-color: var(--bs-body-bg) !important;
  }

  [data-bs-theme="dark"] .bg-light,
  [data-bs-theme="dark"] .text-bg-light {
    background-color: var(--bs-tertiary-bg) !important;
  }

  [data-bs-theme="dark"] .text-dark,
  [data-bs-theme="dark"] .text-black,
  [data-bs-theme="dark"] .badge.bg-light,
  [data-bs-theme="dark"] .text-bg-light {
    color: var(--bs-body-color) !important;
  }

  [data-bs-theme="dark"] .border-light {
    border-color: var(--bs-border-color) !important;
  }

  /* Warning badges keep a bright background in Bootstrap. */
  [data-bs-theme="dark"] .bg-warning.text-dark,
  [data-bs-theme="dark"] .badge.bg-warning {
    color: #212529 !important;
  }

  /* Bootstrap paints table cells over a row's background, so light utilities
     on tables, rows and cells need the table palette as well. */
  [data-bs-theme="dark"] .table-light,
  [data-bs-theme="dark"] .table.bg-light,
  [data-bs-theme="dark"] .table.text-bg-light,
  [data-bs-theme="dark"] .table .bg-light,
  [data-bs-theme="dark"] .table .text-bg-light {
    --bs-table-color: var(--bs-body-color);
    --bs-table-bg: var(--bs-tertiary-bg);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-striped-color: var(--bs-body-color);
    --bs-table-striped-bg: rgba(255, 255, 255, .03);
    --bs-table-hover-color: var(--bs-body-color);
    --bs-table-hover-bg: rgba(255, 255, 255, .075);
    --bs-table-active-color: var(--bs-body-color);
    --bs-table-active-bg: rgba(255, 255, 255, .1);
  }

  [data-bs-theme="dark"] .btn-outline-dark,
  [data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-border-color: #869099;
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: #dee2e6;
    --bs-btn-hover-border-color: #dee2e6;
    --bs-btn-active-color: #212529;
    --bs-btn-active-bg: #dee2e6;
    --bs-btn-active-border-color: #dee2e6;
    --bs-btn-disabled-color: #869099;
  }

  [data-bs-theme="dark"] .btn-light {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--bs-tertiary-bg);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-hover-border-color: #869099;
    --bs-btn-active-color: var(--bs-body-color);
    --bs-btn-active-bg: var(--bs-secondary-bg);
    --bs-btn-active-border-color: #869099;
    --bs-btn-disabled-color: var(--bs-secondary-color);
    --bs-btn-disabled-bg: var(--bs-tertiary-bg);
    --bs-btn-disabled-border-color: var(--bs-border-color);
  }

  [data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: var(--bs-primary-text-emphasis); }
  [data-bs-theme="dark"] .btn-outline-info { --bs-btn-color: var(--bs-info-text-emphasis); }
  [data-bs-theme="dark"] .btn-outline-success { --bs-btn-color: var(--bs-success-text-emphasis); }
  [data-bs-theme="dark"] .btn-outline-danger { --bs-btn-color: var(--bs-danger-text-emphasis); }
  [data-bs-theme="dark"] .btn-outline-warning { --bs-btn-color: var(--bs-warning-text-emphasis); }
  [data-bs-theme="dark"] .text-primary { color: var(--bs-primary-text-emphasis) !important; }
  [data-bs-theme="dark"] .text-info { color: var(--bs-info-text-emphasis) !important; }
  [data-bs-theme="dark"] .text-success { color: var(--bs-success-text-emphasis) !important; }
  [data-bs-theme="dark"] .text-danger { color: var(--bs-danger-text-emphasis) !important; }

  [data-bs-theme="dark"] [data-paystubs-download-label] {
    color: color-mix(in srgb, var(--payroll-accent-color), white 65%);
  }

  [data-bs-theme="dark"] .input-group-text,
  [data-bs-theme="dark"] .input-group > :is(.form-control, .form-select) {
    --bs-border-color: #495057;
  }

  [data-bs-theme="dark"] .input-group-text {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
  }

  [data-bs-theme="dark"] .input-group:focus-within > .input-group-text {
    background-color: var(--bs-primary-bg-subtle);
    border-color: #86b7fe;
  }

  [data-bs-theme="dark"] .input-group:has(> .is-invalid) > .input-group-text {
    border-color: var(--bs-form-invalid-border-color);
  }

  [data-bs-theme="dark"] .input-group:has(> .is-valid) > .input-group-text {
    border-color: var(--bs-form-valid-border-color);
  }

  [data-bs-theme="dark"] .input-group:has(> .is-invalid):focus-within > .input-group-text {
    background-color: var(--bs-danger-bg-subtle);
  }

  [data-bs-theme="dark"] .input-group:has(> .is-valid):focus-within > .input-group-text {
    background-color: var(--bs-success-bg-subtle);
  }

  [data-bs-theme="dark"] .billing-checkout {
    --billing-checkout-border: var(--bs-border-color);
    --billing-checkout-ink: var(--bs-body-color);
  }

  [data-bs-theme="dark"] .employee-select-container .dropdown-toggle,
  [data-bs-theme="dark"] .multi-select-container .dropdown-toggle {
    color: var(--bs-body-color);
  }

  [data-bs-theme="dark"] .payroll-entry-mode-pill-btn:hover {
    background: var(--bs-secondary-bg) !important;
  }

  [data-bs-theme="dark"] .payroll-daily-drawer,
  [data-bs-theme="dark"] .payroll-daily-drawer-subtitle {
    color: var(--bs-secondary-color);
  }

  [data-bs-theme="dark"] .payroll-daily-drawer-title,
  [data-bs-theme="dark"] .payroll-modern-rows .table .payroll-daily-repeat-header-row th label,
  [data-bs-theme="dark"] .payroll-modern-rows .table .payroll-daily-repeat-header-row td label {
    color: var(--bs-secondary-color) !important;
  }

  [data-bs-theme="dark"] .contractor-project-total {
    background: var(--bs-secondary-bg) !important;
  }

  [data-bs-theme="dark"] .bg-pastel-orange {
    color: #ffb971;
    background-color: #442a18;
  }

  [data-bs-theme="dark"] .bg-pastel-purple {
    color: #c6a7f0;
    background-color: #30233f;
  }

  [data-bs-theme="dark"] .payroll-group-open-button:hover,
  [data-bs-theme="dark"] .payroll-group-open-button:focus,
  [data-bs-theme="dark"] .payroll-group-builder-icon {
    background: var(--bs-tertiary-bg);
  }

  [data-bs-theme="dark"] .tfa-auth-panel,
  [data-bs-theme="dark"] .tfa-auth-form .form-control,
  [data-bs-theme="dark"] .tfa-auth-secondary,
  [data-bs-theme="dark"] .tfa-passkey-help-card,
  [data-bs-theme="dark"] .tfa-passkey-help-close {
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
  }

  [data-bs-theme="dark"] .tfa-auth-title,
  [data-bs-theme="dark"] .tfa-auth-form label,
  [data-bs-theme="dark"] .tfa-passkey-login-button {
    color: var(--bs-body-color);
  }

  [data-bs-theme="dark"] .tfa-auth-subtitle,
  [data-bs-theme="dark"] .tfa-auth-note,
  [data-bs-theme="dark"] .tfa-auth-links,
  [data-bs-theme="dark"] .tfa-auth-divider {
    color: var(--bs-secondary-color);
  }

  [data-bs-theme="dark"] .tfa-auth-eyebrow,
  [data-bs-theme="dark"] .tfa-auth-links a,
  [data-bs-theme="dark"] .tfa-password-toggle,
  [data-bs-theme="dark"] .tfa-passkey-help summary,
  [data-bs-theme="dark"] .tfa-passkey-help-card h3,
  [data-bs-theme="dark"] .tfa-passkey-login-button:hover,
  [data-bs-theme="dark"] .tfa-passkey-login-button:focus {
    color: #b3c4ad !important;
  }

  [data-bs-theme="dark"] .tfa-auth-panel .btn-outline-primary {
    color: #b3c4ad;
    border-color: #8b9e85;
  }

  [data-bs-theme="dark"] .tfa-auth-panel .btn-outline-primary:hover,
  [data-bs-theme="dark"] .tfa-auth-panel .btn-outline-primary:focus,
  [data-bs-theme="dark"] .tfa-auth-panel .btn-outline-primary:active {
    background-color: #b3c4ad;
    border-color: #b3c4ad;
    color: #212529;
  }

  /* Native fields on the sign-in page do not all carry .form-control. */
  [data-bs-theme="dark"] #login_form input:not([type="checkbox"]):not([type="hidden"]),
  [data-bs-theme="dark"] #signup_form input:not([type="checkbox"]):not([type="hidden"]) {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
  }
}

/* CSS also protects printing when scripts are disabled or a renderer skips print events. */
@media print {
  [data-bs-theme="dark"] {
    color-scheme: light;
    --bs-body-color: #212529;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-body-bg: #fff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-secondary-color: #495057;
    --bs-secondary-color-rgb: 73, 80, 87;
    --bs-secondary-bg: #e9ecef;
    --bs-secondary-bg-rgb: 233, 236, 239;
    --bs-tertiary-color: #6c757d;
    --bs-tertiary-color-rgb: 108, 117, 125;
    --bs-tertiary-bg: #f8f9fa;
    --bs-tertiary-bg-rgb: 248, 249, 250;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, .175);
    --bs-link-color: #2780e3;
    --bs-link-color-rgb: 39, 128, 227;
    --bs-link-hover-color: #1f66b6;
    --bs-link-hover-color-rgb: 31, 102, 182;
    --bs-heading-color: inherit;
  }

  body {
    color: #212529 !important;
    background: #fff !important;
  }
}