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