/* =====================================================================
   evps-1000x-contrast.css  — WCAG AA remediation layer (load LAST)
   =====================================================================
   A real-browser audit (tests/browser/contrast-audit.mjs) walked every page
   in BOTH light and dark mode and found the failures were almost entirely on
   WHMCS-NATIVE Bootstrap markup that the theme had not fully restyled:

     1. Dark mode — native .card / .list-group-item / .breadcrumb / labels keep
        a hardcoded WHITE background while the theme sets a global light text
        colour, producing ~1.04–1.18:1 (invisible) text inside those frames.
        Fix: route native surfaces through the --evps-* tokens, which already
        carry correct values for each mode, so they invert automatically.

     2. Both modes — WHMCS semantic fills (.label-* / .badge-* / .btn-success
        / .bg-color-* / .status-*) are too light for their baked-in white text
        (1.95–3.96:1). Fix: darken the fills to AA-safe shades (>=4.5:1 vs #fff).

   Everything is scoped to .evps-app (or to WHMCS-native classes the theme does
   not otherwise use) so the first-party .evps-* components — which already pass
   — are left untouched.
   ===================================================================== */

/* ── 1. Native Bootstrap surfaces follow the theme palette ─────────────── */
.evps-app .card,
.evps-app .card-header,
.evps-app .card-body,
.evps-app .card-footer,
.evps-app .panel,
.evps-app .panel-default,
.evps-app .panel-body,
.evps-app .panel-heading,
.evps-app .well,
.evps-app .jumbotron,
.evps-app .modal-content,
.evps-app .list-group-item,
.evps-app .breadcrumb {
  background-color: var(--evps-surface) !important;
  border-color: var(--evps-border) !important;
}

/* Text inside those surfaces (cascades to children that don't set their own
   colour) + the specific elements the audit flagged. */
.evps-app .card-body,
.evps-app .card-header,
.evps-app .card-footer,
.evps-app .panel-body,
.evps-app .well,
.evps-app .list-group-item,
.evps-app .breadcrumb,
.evps-app .breadcrumb a,
.evps-app .card-title,
.evps-app .card-text,
.evps-app .card-subtitle,
.evps-app .col-form-label,
.evps-app .control-label,
.evps-app .form-control-label,
.evps-app label,
.evps-app legend,
.evps-app fieldset > legend,
.evps-app strong,
.evps-app b,
.evps-app dt,
.evps-app dd,
.evps-app .stat,
.evps-app .data,
.evps-app .btn-view-more,
.evps-app .selected-dial-code,
.evps-app .twofa-config-link,
.evps-app h1, .evps-app h2, .evps-app h3, .evps-app h4, .evps-app h5, .evps-app h6,
.evps-app .h1, .evps-app .h2, .evps-app .h3, .evps-app .h4, .evps-app .h5, .evps-app .h6 {
  color: var(--evps-text) !important;
}

/* Muted helper / secondary text → AA-safe muted token (passes on surface). */
.evps-app .text-muted,
.evps-app small.text-muted,
.evps-app .small-font,
.evps-app .markdown-save,
.evps-app .breadcrumb-item.active,
.evps-app .help-block,
.evps-app .form-text,
.evps-app .title {
  color: var(--evps-text-muted) !important;
}

/* Native form controls → inset surface + readable text + visible border. */
.evps-app .form-control,
.evps-app .custom-select,
.evps-app textarea,
.evps-app select,
.evps-app input[type="text"],
.evps-app input[type="email"],
.evps-app input[type="password"],
.evps-app input[type="tel"],
.evps-app input[type="number"],
.evps-app input[type="search"],
.evps-app input[type="url"],
.evps-app input[type="date"] {
  background-color: var(--evps-surface-inset) !important;
  color: var(--evps-text) !important;
  border-color: var(--evps-border) !important;
}
.evps-app .form-control::placeholder { color: var(--evps-text-dim) !important; }

/* Native alerts: keep them legible in dark mode (surface + theme text). */
.evps-app .alert-info { background-color: var(--evps-surface-2) !important; color: var(--evps-text) !important; border-color: var(--evps-border) !important; }
.evps-app .alert-success,
.evps-app .alert-warning,
.evps-app .alert-danger { color: var(--evps-text) !important; }

/* Native ghost button (.btn-default): readable text + border in both modes. */
.evps-app .btn-default,
.evps-app .btn-secondary {
  color: var(--evps-text) !important;
  background-color: var(--evps-surface) !important;
  border-color: var(--evps-border-strong, var(--evps-border)) !important;
}

/* ── 2. Semantic fills darkened so baked-in white text meets AA ────────── */
:root {
  --evps-aa-success: #157347; /* white text ≈ 5.0:1 */
  --evps-aa-info:    #0f6478; /* white text ≈ 6.4:1 */
  --evps-aa-warning: #8a5a00; /* white text ≈ 5.1:1 */
  --evps-aa-danger:  #b02a37; /* white text ≈ 6.1:1 */
  --evps-aa-neutral: #515a6e; /* white text ≈ 5.6:1 */
}
.label-success, .badge-success, .btn-success,
.bg-color-green, .bg-color-emerald, .bg-color-nephritis,
.status-active, .status-open, .status-paid, .status-completed,
.textgreen, .text-paid,
.bootstrap-switch-success .bootstrap-switch-handle-on {
  background-color: var(--evps-aa-success) !important;
  border-color: var(--evps-aa-success) !important;
  color: #fff !important;
}
.label-info, .badge-info, .btn-info,
.bg-color-blue, .bg-color-peterriver, .bg-color-belize,
.status-info {
  background-color: var(--evps-aa-info) !important;
  border-color: var(--evps-aa-info) !important;
  color: #fff !important;
}
.label-warning, .badge-warning, .btn-warning,
.bg-color-gold, .bg-color-orange, .bg-color-sunflower, .bg-color-carrot,
.status-suspended, .status-pending, .status-fraud-review {
  background-color: var(--evps-aa-warning) !important;
  border-color: var(--evps-aa-warning) !important;
  color: #fff !important;
}
.label-danger, .badge-danger, .btn-danger,
.bg-color-red, .bg-color-alizarin, .bg-color-pomegranate,
.status-terminated, .status-cancelled, .status-fraud, .status-overdue,
.textred, .text-unpaid {
  background-color: var(--evps-aa-danger) !important;
  border-color: var(--evps-aa-danger) !important;
  color: #fff !important;
}
.bg-color-asbestos, .bg-color-concrete, .bg-color-silver,
.label-default, .badge-secondary, .badge-default {
  background-color: var(--evps-aa-neutral) !important;
  border-color: var(--evps-aa-neutral) !important;
  color: #fff !important;
}

/* ── 3. First-party fixes the audit flagged on evps-* components ────────── */
/* Account dropdown items resolved a *light* text token on a dark dropdown
   surface (the menu sits in a region where the var() resolves to the light
   palette). Pin explicit per-mode values keyed off the <html> data-theme so
   there is no var-scope ambiguity. Dark is the default (no/auto attribute). */
html:not([data-theme="light"]) .evps-app .evps-account-menu__panel a.evps-account-menu__item,
html[data-theme="dark"] .evps-app .evps-account-menu__panel a.evps-account-menu__item { color: #e8ecf5 !important; }
html[data-theme="light"] .evps-app .evps-account-menu__panel a.evps-account-menu__item { color: #0e1422 !important; }
.evps-account-menu__item:hover { background: var(--evps-surface-3) !important; }

/* Skip link: --evps-primary is brand-customisable and can be a light blue
   (#3a7bd5 → white text only 4.22:1). Pin an AA-safe fill (>=4.5:1). */
.evps-skip-link { background-color: #1f4e96 !important; color: #fff !important; }

/* Brand initial/avatar circles (sidebar logo, user avatar, AI bubble/avatar)
   carry white text on the brand gradient (~3.45:1 — logotype-class, exempt from
   1.4.3, but borderline). A text-shadow makes the initials crisply legible on
   any brand hue without altering the brand colour. */
.evps-sidebar__logo,
.evps-sidebar__logo--sm,
.evps-avatar,
.evps-ai-bubble,
.evps-ai-drawer__avatar {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

/* ---------------------------------------------------------------------------
   Exemption: self-contained module heroes that paint their own dark background.

   The blanket `.evps-app ... {color: var(--evps-text) !important}` rules above
   exist to rescue Bootstrap/WHMCS-native surfaces that inherit no colour. They
   are indiscriminate about heading elements, so they also repaint the headings
   of a module that ALREADY set a light colour on its own dark hero. The OPSB
   landing (/store/managed-engineering) is exactly that case: `.opsb-hero` sets
   `color:#fff` on the container, but its <h1> was being forced back to
   var(--evps-text) — dark navy on a mid-tone gradient, measured at 3.00:1 on
   live, i.e. large-text AA with no headroom and a fail for anything smaller.

   Scoped to the hero only, so the rest of the module's copy (which sits on the
   normal page surface) keeps the contrast fixes above.
   Uses `!important` deliberately: it is the only way to beat an `!important`
   from the block above at equal specificity. Do not "tidy" it away.

   The element list must cover every inline tag the blanket rules above name, not
   just the obvious ones. A first pass listed `strong` but not `b`, and the hero's
   KPI figures are <b>, so "52" and "USD 75 / USD 150" stayed dark navy on a
   #2849ab card, measured at 2.30:1 from the rendered pixels. Keep this list in
   sync with the selector block near the top of this file.
   -------------------------------------------------------------------------- */
.evps-app .opsb-hero,
.evps-app .opsb-hero h1,
.evps-app .opsb-hero h2,
.evps-app .opsb-hero h3,
.evps-app .opsb-hero h4,
.evps-app .opsb-hero h5,
.evps-app .opsb-hero h6,
.evps-app .opsb-hero p,
.evps-app .opsb-hero span,
.evps-app .opsb-hero div,
.evps-app .opsb-hero li,
.evps-app .opsb-hero strong,
.evps-app .opsb-hero b,
.evps-app .opsb-hero em,
.evps-app .opsb-hero i,
.evps-app .opsb-hero small,
.evps-app .opsb-hero label,
.evps-app .opsb-hero .opsb-h1,
.evps-app .opsb-hero .opsb-sub,
.evps-app .opsb-hero .opsb-kpi,
.evps-app .opsb-hero .opsb-kpi b,
.evps-app .opsb-hero .opsb-step {
  color: var(--opsb-color-hero-text, #ffffff) !important;
}

/* ---------------------------------------------------------------------------
   OPSB landing: adopt the theme's design tokens.

   Recolouring the gradient was not enough. The module ships its own design
   system (--opsb-*) with NO reference to --evps-*, so even in brand colours the
   block read as a foreign component pasted onto the page:
     font-family  system-ui            vs the site's Inter  <- the loudest tell
     radius       24px hardcoded       vs --evps-radius-xl
     border       none                 vs 1px solid --evps-border
     shadow       0 30px 80px /.35     vs the theme's shadow scale
     padding      56px 48px 48px       vs the theme's header rhythm
   Overriding from the THEME side (rather than editing the module) keeps this
   working across OPSB upgrades and puts the styling where the theme owns it.
   -------------------------------------------------------------------------- */
.evps-app .opsb-1000x,
.evps-app .opsb-1000x .opsb-hero,
.evps-app .opsb-1000x h1,
.evps-app .opsb-1000x h2,
.evps-app .opsb-1000x h3,
.evps-app .opsb-1000x h4,
.evps-app .opsb-1000x p,
.evps-app .opsb-1000x span,
.evps-app .opsb-1000x b,
.evps-app .opsb-1000x a {
  font-family: var(--evps-font-sans, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif) !important;
}
.evps-app .opsb-1000x .opsb-hero {
  border-radius: var(--evps-radius-xl, 16px) !important;
  padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 36px) !important;
  border: 1px solid color-mix(in srgb, #ffffff 16%, transparent) !important;
  box-shadow: var(--evps-shadow-lg, 0 18px 44px rgba(16, 24, 40, 0.14)) !important;
}
/* The conic sweep is the module's own flourish. Keep the motion, halve the
   intensity: at full strength it lightens the gradient enough to move the
   white-text contrast around, which is how the earlier measurements disagreed. */
.evps-app .opsb-1000x .opsb-hero::before { opacity: .5 !important; }
@media (prefers-reduced-motion: reduce) {
  .evps-app .opsb-1000x .opsb-hero::before { animation: none !important; }
}
/* Inner cards pick up the theme's corner radius so they sit in the same family
   as every other card on the storefront. */
.evps-app .opsb-1000x .opsb-kpi,
.evps-app .opsb-1000x .opsb-step,
.evps-app .opsb-1000x .opsb-card,
.evps-app .opsb-1000x .opsb-section {
  border-radius: var(--evps-radius-lg, 12px) !important;
}