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