/*
 * =============================================================================
 * Copyright (c) 2026 Paseo Platform LLC. All rights reserved.
 *
 * CONFIDENTIAL AND PROPRIETARY
 *
 * For licensing inquiries: www.paseoplatform.com
 * =============================================================================
 */

/**
 * Paseo Platform - Accessibility Overrides for Bootstrap-flavored markup
 *
 * Extracted from inline <style> in templates/reports/base.html as part of
 * PASEO-ENH-FE-003.
 *
 * NOTE: Some rules in this file CONFLICT with rules in static/css/accessibility.css
 * (e.g. .skip-link, *:focus-visible, .required-legend). The conflict
 * existed before extraction — the inline <style> block won by load order.
 * This file preserves that win by being loaded after accessibility.css
 * (see <link> order in templates/reports/base.html). Reconciling the two
 * is out of scope for FE-003; flag as a follow-up if a future audit cares.
 */

/* ===================================================================
   SKIP NAVIGATION LINK
   Different visual treatment than accessibility.css's variant:
   black/white instead of brand-primary, lower z-index.
   =================================================================== */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    z-index: 1100;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
}

/* ===================================================================
   REQUIRED FIELD INDICATORS (Bootstrap label variants)
   =================================================================== */

label.required::after,
.form-label.required::after {
    content: " *";
    color: #dc3545;
}

.required-legend {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

.required-legend .asterisk {
    color: #dc3545;
    font-weight: bold;
}

/* ===================================================================
   FOCUS VISIBLE OVERRIDES (WCAG 2.4.7)
   2px blue outline instead of accessibility.css's 3px brand-accent.
   Preserved as-is from inline <style>; reconcile in a future pass.
   =================================================================== */

*:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

*:focus:not(:focus-visible) {
    outline: none;
}

*:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.btn:focus-visible,
a:focus-visible {
    outline: 3px solid #0d6efd;
    outline-offset: 2px;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.form-control:focus,
.form-select:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* ===================================================================
   TEXT & LINK CONTRAST (WCAG AAA, 7:1)
   Light theme: dark muted gray + dark blue links.
   Dark theme: lighter muted/links since #0747a6 is invisible on navy.
   =================================================================== */

.text-muted {
    color: #4a5157 !important;
}

a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.sidebar-nav-link):not(.topbar-dropdown-item) {
    color: #0747a6;
}

a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.sidebar-nav-link):not(.topbar-dropdown-item):hover {
    color: #053580;
}

[data-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.sidebar-nav-link):not(.topbar-dropdown-item) {
    color: #80d8ff;
}

[data-theme="dark"] a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.sidebar-nav-link):not(.topbar-dropdown-item):hover {
    color: #b388ff;
}

/* ===================================================================
   ALERT TEXT CONTRAST (WCAG AA)
   Bootstrap .alert-* color overrides.
   =================================================================== */

.alert-danger {
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
}

.alert-success {
    color: #0f5132;
    background-color: #d1e7dd;
    border-color: #badbcc;
}

.alert-warning {
    color: #664d03;
    background-color: #fff3cd;
    border-color: #ffecb5;
}

.alert-info {
    color: #055160;
    background-color: #cff4fc;
    border-color: #b6effb;
}

/* ===================================================================
   WCAG AA CONTRAST REMEDIATION (scoped) - AB#29939
   A first broad !important attempt over-reached (recoloured badge/alert
   text nested inside .task-meta and hit dark surfaces). This version is
   scoped by theme and targets the ELEMENT ONLY (never descendants), each
   rule verified against the specific failing surface a live DOM probe found.
   Loads last in reports/base.html, so no !important is needed.
   =================================================================== */

/* Light theme: the .task-meta element itself computes to Bootstrap's #6c757d
   on light card surfaces (#fff5f5 / #f0f9ff), ~4.2:1. Darken the ELEMENT only
   -- descendants (badges, .text-muted, alerts) keep their own colours, which
   is what the earlier broad rule got wrong. */
html:not([data-theme="dark"]) .task-meta {
    color: #565e64; /* ~6:1 on the light card tints */
}

/* Dark theme: brand purple #7c4dff fails as text on the dark navy surfaces
   (~3:1). It is injected by the per-org branding CSS (not a static file), so an
   !important is needed to win; scoped to text/accent uses only. :hover/:focus/
   :active are excluded so outline buttons keep Bootstrap's filled-hover state
   (white text on the purple fill). Solid-fill buttons, nav, dropdown, sidebar,
   and pagination are excluded so their own treatments stand. */
[data-theme="dark"] .btn-outline-primary:not(:hover):not(:focus):not(:active),
[data-theme="dark"] .btn-link,
[data-theme="dark"] .text-primary,
[data-theme="dark"] .link-primary,
[data-theme="dark"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.sidebar-nav-link):not(.page-link) {
    color: #b388ff !important; /* ~6.8:1 on #14142e */
}

/* Dark theme: muted small text / small links use #4a4a7a (gray-300), nearly the
   background (~1.8:1). Lift to the readable light-grey tint. Kept narrow
   (a.small / small.d-block) to avoid recolouring small text inside coloured
   badges or alerts. */
[data-theme="dark"] a.small,
[data-theme="dark"] small.d-block {
    color: #c4c4dc !important; /* ~8:1 on the dark surfaces */
}

/* Sidebar context label: white-50 on the purple sidebar (~2.4:1). Bump the
   opacity so the label clears AA without changing the palette. */
.sidebar-context-label {
    color: rgba(255, 255, 255, 0.82) !important; /* ~4.6:1 on #311b92 */
}

/* ===================================================================
   AB#29939 FINISHING PASS — remaining top offenders from contrast_audit
   (dir 20260705_100102). Each targets a specific measured (selector, fg, bg).
   =================================================================== */

/* Dark theme: table headers render in the brand purple (#7c4dff, branding-
   injected so !important) on the navy header fill -- unreadable. Neutral light. */
[data-theme="dark"] th {
    color: #e8e8f4 !important;
}

/* Dark theme: muted form labels (#6b7280) and inline code (#d63384) on navy. */
[data-theme="dark"] label {
    color: #c4c4dc !important;
}
[data-theme="dark"] code {
    color: #f0a9d0 !important; /* lighter pink, ~5:1 on #14142e */
}

/* Outline-info buttons: pale cyan (#0dcaf0) on white in light theme; brand
   purple text in dark. Give each a readable value; keep hover/focus states. */
.btn-outline-info.btn-sm:not(:hover):not(:focus):not(:active) {
    color: #0a7d8f !important; /* darker cyan, ~4.6:1 on white */
}
[data-theme="dark"] .btn-outline-info:not(:hover):not(:focus):not(:active) {
    color: #6ed3e6 !important;
}

/* Skip-link: brand-blue (#0747a6) on its black background failed; use white. */
.skip-link {
    color: #ffffff !important;
}

/* menu-tree: light theme type label (#8a8aa0) too pale on white; dark theme has
   a theme-LEAK -- the tree kept a white background with near-white text
   (#f5f5ff on #ffffff). Darken the label in light; in dark, drop the leaked
   white background and use light text. */
.menu-tree__type {
    color: #565e64;
}
[data-theme="dark"] .menu-tree,
[data-theme="dark"] .menu-tree__label,
[data-theme="dark"] .menu-tree__type {
    background-color: transparent !important;
    color: #e8e8f4 !important;
}

/* Danger red used as TEXT on light-pink surfaces (#dc3545 on #fff5f5 ~3.8:1).
   Light theme ONLY -- the darker red would fail on the dark-theme navy surface. */
:root:not([data-theme="dark"]) .vendor-no-appt {
    color: #a52834 !important; /* darker red, ~4.7:1 on #fff5f5 */
}

/* Light theme: plain secondary <small> text (#6b7280) dips below AA on the
   light-grey card surfaces. Darken it -- no !important so an explicit colour on
   a badge/coloured context still wins (avoids the earlier over-reach). */
:root:not([data-theme="dark"]) small:not(.badge):not(.text-white) {
    color: #565e64;
}