/**
 * EVAS Live Accessibility Scanner (axe-core) - results overlay
 *
 * Only ever loaded for logged-in administrators (see EVAS_Live_Scanner),
 * kept deliberately independent from panel.css's --evas-* custom properties
 * since this overlay is an admin/QA tool, not part of the visitor-facing
 * accessibility panel it styles.
 *
 * @package Everyone_Accessibility_Suite
 */

#wp-admin-bar-evas-live-scan .ab-item {
    overflow: visible;
}

/* Core floats .ab-icon to the TOP of the 32px item rather than centring it, so
   every core node carries its own optical nudge (#wp-admin-bar-comments +3px,
   new-content +4px, updates +2px). Ours had none and sat visibly high. 1px is
   measured, not guessed: it puts the circle's centre within a quarter pixel of
   the neighbouring labels' optical centre. Matching the comment bubble's
   nudge instead would sit a pixel low - that glyph's box includes its tail, so
   its ink centre is lower than what the eye reads as its middle. The mobile
   (<=782px) admin bar hides this node outright, so core's 40px sizing there
   never applies to it. */
#wpadminbar #wp-admin-bar-evas-live-scan .ab-icon {
    position: relative;
    overflow: visible;
    top: 1px;
}

/* The size has to be set on the pseudo-element, not on .ab-icon: core's own
   sizing rule leads with "#wpadminbar > #wp-toolbar > #wp-admin-bar-root-default
   .ab-icon", three IDs, which outranks anything sane written against the
   element itself. Nothing in core targets .ab-icon:before, so this needs no
   !important. universal-access-alt fills 18 of dashicons' 20-unit design grid
   where the comment bubble fills 16 and the plus 13, so at core's shared 20px
   this one glyph towered over its neighbours; 18px brings the circle down to
   16.5px, level with the bubble. */
#wpadminbar #wp-admin-bar-evas-live-scan .ab-icon:before {
    font-size: 18px;
}

#wp-admin-bar-evas-live-scan .evas-lsc-label {
    margin-left: 2px;
}

/* Colored count circle overlapping the top-right corner of the icon,
   Yoast-notification-bell style - state set by live-scanner.js's
   setBadge(). Lives inside .ab-icon (not next to the label) and is
   positioned relative to that icon alone, so its corner position never
   shifts with the "WCAG Scan" label's text. Empty/idle (never scanned)
   collapses to nothing rather than showing an empty grey dot. The dark
   border matches the admin bar background so the circle reads as "cut
   into" the icon instead of just floating next to it.
   Selectors are prefixed with the #wp-admin-bar-evas-live-scan id (rather
   than a bare .evas-lsc-badge class) because WP core's admin-bar.css ships
   a "#wpadminbar *" reset rule - an ID selector - that would otherwise
   always win the cascade over a plain class and silently strip the
   position/size set here. */
#wp-admin-bar-evas-live-scan .evas-lsc-badge {
    display: none;
    position: absolute;
    top: 0;
    right: -4px;
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 14px;
    padding: 0 2px;
    border-radius: 999px;
    border: 1.5px solid #1d2327;
    background: #787c82;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

#wp-admin-bar-evas-live-scan .evas-lsc-badge.is-scanning,
#wp-admin-bar-evas-live-scan .evas-lsc-badge.is-good,
#wp-admin-bar-evas-live-scan .evas-lsc-badge.is-warning,
#wp-admin-bar-evas-live-scan .evas-lsc-badge.is-error {
    display: inline-flex;
}

#wp-admin-bar-evas-live-scan .evas-lsc-badge.is-good    { background: #00a32a; }
#wp-admin-bar-evas-live-scan .evas-lsc-badge.is-warning { background: #dba617; }
#wp-admin-bar-evas-live-scan .evas-lsc-badge.is-error { background: #d63638; }

#wp-admin-bar-evas-live-scan .evas-lsc-badge.is-scanning {
    background: #787c82;
    animation: evas-lsc-pulse 1s ease-in-out infinite;
}

@keyframes evas-lsc-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

#evas-live-scan-overlay {
    position: fixed;
    top: 46px;
    right: 16px;
    z-index: 99998;
    width: 360px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    background: #fff;
    color: #1d2327;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

.evas-lsc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #2271b1;
    color: #fff;
    border-radius: 8px 8px 0 0;
    position: sticky;
    top: 0;
}

.evas-lsc-header strong {
    font-size: 14px;
}

.evas-lsc-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.evas-lsc-empty {
    padding: 16px;
    color: #646970;
    margin: 0;
}

.evas-lsc-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 16px;
    border-bottom: 1px solid #dcdcde;
}

.evas-lsc-chip {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
}

.evas-lsc-chip.is-critical { background: #b32d2e; }
.evas-lsc-chip.is-serious  { background: #d63638; }
.evas-lsc-chip.is-moderate { background: #dba617; }
.evas-lsc-chip.is-minor    { background: #787c82; }

.evas-lsc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.evas-lsc-item {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f1;
    border-left: 3px solid transparent;
}

.evas-lsc-item.is-critical { border-left-color: #b32d2e; }
.evas-lsc-item.is-serious  { border-left-color: #d63638; }
.evas-lsc-item.is-moderate { border-left-color: #dba617; }
.evas-lsc-item.is-minor    { border-left-color: #787c82; }

.evas-lsc-item-impact {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #646970;
    margin-bottom: 4px;
}

.evas-lsc-item-desc {
    margin: 0 0 8px;
    color: #1d2327;
}

.evas-lsc-item-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.evas-lsc-item-show {
    background: #f0f0f1;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    color: #1d2327;
}

.evas-lsc-item-show:hover {
    background: #e0e0e0;
}

.evas-lsc-item-link {
    font-size: 12px;
    color: #2271b1;
    text-decoration: none;
}

.evas-lsc-item-link:hover {
    text-decoration: underline;
}

/* Applied briefly to the offending element on the live page when "Show on
   page" is clicked - high-contrast outline so it's visible regardless of
   the page's own colors. */
.evas-lsc-highlight {
    outline: 3px solid #d63638 !important;
    outline-offset: 2px !important;
    transition: outline-color 0.2s ease;
}