/* ==========================================================================
   ProAudit Variables - Shared CSS custom properties for the ProAudit dashboard.
   Applied via the `.proaudit-report` selector so child components inherit
   these variables through DOM ancestry.
   ========================================================================== */

.proaudit-report {
    /* Brand colors — aliased to --pe-* tokens where values match exactly.
       Non-matching tokens kept as literals to preserve ProAudit's existing
       look. The canonical source of truth is pe-design.css. */
    --brand-red: var(--pe-red);
    --brand-red-light: var(--pe-red-tint);
    --brand-orange: var(--pe-orange);
    --brand-orange-light: rgba(221, 145, 66, 0.08); /* ProAudit-only: pe-orange-tint is 0.10 */
    --brand-gold: var(--pe-gold);
    --brand-gold-light: rgba(179, 147, 50, 0.08); /* ProAudit-only */
    --brand-teal: var(--pe-teal);
    --brand-teal-light: rgba(0, 166, 156, 0.08); /* ProAudit-only: pe-teal-tint is 0.10 */
    --brand-teal-mid: rgba(0, 166, 156, 0.15); /* ProAudit-only */
    --brand-green: var(--pe-green);
    --brand-green-light: rgba(164, 205, 57, 0.1); /* ProAudit-only */
    --brand-charcoal: var(--pe-charcoal);

    /* Surface colors */
    --surface: var(--pe-card);
    --surface-dim: #f7f7f6; /* ProAudit-only */

    /* Text colors */
    --text-primary: var(--pe-text);
    --text-secondary: var(--pe-text-muted);
    --text-muted: var(--pe-text-dim);

    /* Border colors — ProAudit uses 50/50/50 base (cool gray), pe-design.css
       uses 90/74/53 base (warm brown). Kept as literals. */
    --border: rgba(50, 50, 50, 0.08);
    --border-strong: rgba(50, 50, 50, 0.15);

    /* Spacing and radii */
    --radius: var(--pe-radius-lg);
    --radius-sm: var(--pe-radius-sm);

    /* ── Warm design tokens (Mockup Q) ───────────────── */
    --warm-bg: var(--pe-warm-bg);
    --warm-bg-end: var(--pe-warm-end);
    --warm-shadow: var(--pe-shadow);
    --warm-shadow-hover: var(--pe-shadow-hover);
    --warm-text-muted: #6B5B45; /* ProAudit-only */
    --warm-text-secondary: rgba(107, 91, 69, 0.8); /* ProAudit-only */
    --warm-card-bg: var(--pe-card);
    --warm-card-border: rgba(90, 74, 53, 0.06); /* ProAudit-only: pe-card-border is 0.08 */
    --warm-badge-bg: var(--pe-warm-bg);
    --warm-badge-text: #8B7355; /* ProAudit-only */

    /* Dark hero tokens */
    --hero-gradient-start: #1a1a2e;
    --hero-gradient-end: #16213e;
    --hero-text: #ffffff;
    --hero-text-dim: rgba(255, 255, 255, 0.45);
    --hero-text-mid: rgba(255, 255, 255, 0.7);
    --hero-meta-bg: rgba(255, 255, 255, 0.08);
    --hero-meta-border: rgba(255, 255, 255, 0.1);
    --hero-adas-color: #5c9bd4;

    /* Impact color tokens */
    --impact-adas: #5c35a9;
    --impact-high: #bf1a2a;
    --impact-moderate: #dd9142;
    --impact-low: #b39332;
    --impact-advisory: #00a69c;
    --impact-oemprocedure: #1565c0;
}

/* ==========================================================================
   Shared utility classes - used by multiple ProAudit components
   ========================================================================== */

/* ---- Fade-in-up animation ---- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.proaudit-report .fade-in-up {
    animation: fadeInUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.proaudit-report .delay-1 { animation-delay: 0.06s; }
.proaudit-report .delay-2 { animation-delay: 0.12s; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .proaudit-report .fade-in-up {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ---- Accept sweep-out animation ---- */
@keyframes acceptSweepOut {
    from   { opacity: 1; transform: translateX(0) scale(1); }
    50%    { opacity: 0.8; transform: translateX(8px) scale(0.98); }
    to     { opacity: 0; transform: translateX(40px) scale(0.95); }
}

.proaudit-report .accept-exit {
    animation: acceptSweepOut 300ms ease-in both;
    pointer-events: none;
}

/* ---- Deny fade-out animation ---- */
@keyframes denyFadeOut {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.92); }
}

.proaudit-report .deny-exit {
    animation: denyFadeOut 250ms ease-in both;
    pointer-events: none;
}

/* ---- Reduced motion: accept/deny ---- */
@media (prefers-reduced-motion: reduce) {
    .proaudit-report .accept-exit,
    .proaudit-report .deny-exit {
        animation: none;
        opacity: 0;
        transform: none;
    }
}

/* ---- Completion bounce (walkthrough celebration) ---- */
@keyframes completionBounce {
    0%   { transform: scale(0); opacity: 0; }
    50%  { transform: scale(1.15); opacity: 1; }
    70%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* ---- Skeleton shimmer (for custom skeleton shapes) ---- */
@keyframes skeletonShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.proaudit-report .proaudit-skeleton {
    background: linear-gradient(90deg,
        rgba(50, 50, 50, 0.06) 25%,
        rgba(50, 50, 50, 0.12) 50%,
        rgba(50, 50, 50, 0.06) 75%);
    background-size: 400% 100%;
    animation: skeletonShimmer 1.8s ease infinite;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .proaudit-report .proaudit-skeleton {
        animation: none;
        background: rgba(50, 50, 50, 0.06);
    }
}

/* ---- Tier transition banner ---- */
.proaudit-report .tier-transition-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: color-mix(in srgb, var(--transition-color) 6%, transparent);
    border-left: 3px solid var(--transition-color);
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary, rgba(50, 50, 50, 0.65));
}

.proaudit-report .tier-transition-icon {
    color: var(--transition-color);
    display: flex;
    align-items: center;
}

/* ---- Walkthrough button pulse (when accepted card flies to it) ---- */
@keyframes walkthroughPulse {
    0%   { box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.7), 0 0 8px rgba(46, 125, 50, 0.3); transform: scale(1); }
    25%  { box-shadow: 0 0 0 6px rgba(46, 125, 50, 0.35), 0 0 20px rgba(46, 125, 50, 0.25); transform: scale(1.08); }
    50%  { box-shadow: 0 0 0 12px rgba(164, 205, 57, 0.15), 0 0 12px rgba(46, 125, 50, 0.1); transform: scale(1.03); }
    100% { box-shadow: 0 0 0 20px rgba(164, 205, 57, 0), 0 0 0 rgba(46, 125, 50, 0); transform: scale(1); }
}

.walkthrough-pulse {
    animation: walkthroughPulse 0.9s ease-out !important;
}

@media (prefers-reduced-motion: reduce) {
    .walkthrough-pulse {
        animation: none !important;
    }
}

/* ---- Lifecycle badge — shared across rule admin table + finding cards ---- */
/* Amber for StaffOnly (attention), slate for Draft (subdued), green for Public. */
.pa-lc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.5625rem;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}

.pa-lc-badge svg {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
}

.pa-lc-draft {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.pa-lc-staff-only {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.pa-lc-public {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}