/**
 * WP Site Auditor — Portal v2 "Vivid Signal" reskin
 *
 * A pure-CSS rebrand of the client portal + report body onto the SiteDocket
 * logo palette (azure #1E74D9 + pumpkin #F26B21). Works by overriding the
 * existing design tokens — the portal chrome uses --p-*, the report body
 * (admin.css, rendered inside .wpsa-portal on the portal) uses --wpsa-*.
 *
 * Scoped entirely to .wpsa-portal so the WP-admin report view is untouched.
 * Loaded LAST (after portal-ui.css) — every rule here is additive/colour-only,
 * no layout or logic changes.
 *
 * @since 2.47.0
 */

/* =========================================================================
   LIGHT — token overrides (specificity: .wpsa-portal beats :root)
   ========================================================================= */
.wpsa-portal {
  /* ---- portal chrome (--p-*) ---- */
  --p-blue:       #1E74D9;
  --p-blue-hover: #1660C0;
  --p-blue-lt:    #E4F0FD;
  --p-surface:    #FFFFFF;
  --p-surface-2:  #F3F6FB;
  --p-surface-3:  #EAEEF7;
  --p-input-bg:   #FFFFFF;
  --p-border:     #E1E8F2;
  --p-border-2:   #D6DEEA;
  --p-text:       #0F1C2E;
  --p-text-2:     #44526A;
  --p-text-3:     #7A8698;
  --p-good:       #16A34A;
  --p-warn:       #F59E0B;
  --p-bad:        #EF4444;
  --p-avg:        #F59E0B;
  --p-poor:       #EF4444;
  /* new: brand accent + signature gradient */
  --p-accent:        #F26B21;
  --p-accent-hover:  #DD5A14;
  --p-accent-lt:     #FDECDD;
  --p-grad: linear-gradient(135deg, #1E74D9, #F26B21);

  /* ---- report body (--wpsa-*) ---- */
  --wpsa-blue:        #1E74D9;
  --wpsa-blue-bright: #4B9BF0;
  --wpsa-info:        #1E74D9;
  --wpsa-navy:        #0F1C2E;
  --wpsa-navy-mid:    #1B2A3F;
  --wpsa-navy-light:  #44526A;
  --wpsa-good:        #16A34A;
  --wpsa-good-bg:     #E4F6EA;
  --wpsa-good-border: #BBECCB;
  --wpsa-avg:         #F59E0B;
  --wpsa-avg-bg:      #FDF3E1;
  --wpsa-avg-border:  #FAE0AC;
  --wpsa-poor:        #EF4444;
  --wpsa-poor-bg:     #FCE9E9;
  --wpsa-poor-border: #F6C9C9;
  --wpsa-critical:    #EF4444;
  --wpsa-warning:     #F59E0B;
  --wpsa-surface:     #FFFFFF;
  --wpsa-surface-2:   #F3F6FB;
  --wpsa-border:      #E1E8F2;
  --wpsa-border-2:    #EAEEF7;
  --wpsa-text:        #0F1C2E;
  --wpsa-text-2:      #44526A;
  --wpsa-text-3:      #7A8698;
}

/* =========================================================================
   DARK — same tokens, navy ground (matches sitedocket.com's own dark brand)
   ========================================================================= */
.wpsa-portal[data-theme="dark"] {
  --p-blue:       #3B93F0;
  --p-blue-hover: #5AA6F5;
  --p-blue-lt:    rgba(59,147,240,.16);
  --p-surface:    #0F1C31;
  --p-surface-2:  #16273E;
  --p-surface-3:  #0C1A2E;
  --p-input-bg:   #16273E;
  --p-border:     #213347;
  --p-border-2:   #2F455E;
  --p-text:       #EAF1FB;
  --p-text-2:     #A6B6CB;
  --p-text-3:     #6D7E95;
  --p-good:       #2FBE6A;
  --p-warn:       #FBBF24;
  --p-bad:        #F26060;
  --p-avg:        #FBBF24;
  --p-poor:       #F26060;
  --p-accent:        #FF7F35;
  --p-accent-hover:  #FF934F;
  --p-accent-lt:     rgba(255,127,53,.16);
  --p-grad: linear-gradient(135deg, #3B93F0, #FF7F35);

  --wpsa-blue:        #3B93F0;
  --wpsa-blue-bright: #6FB6FF;
  --wpsa-info:        #3B93F0;
  --wpsa-navy:        #EAF1FB;
  --wpsa-navy-mid:    #C6D3E4;
  --wpsa-navy-light:  #A6B6CB;
  --wpsa-good:        #2FBE6A;
  --wpsa-good-bg:     rgba(47,190,106,.14);
  --wpsa-good-border: rgba(47,190,106,.30);
  --wpsa-avg:         #FBBF24;
  --wpsa-avg-bg:      rgba(251,191,36,.14);
  --wpsa-avg-border:  rgba(251,191,36,.30);
  --wpsa-poor:        #F26060;
  --wpsa-poor-bg:     rgba(242,96,96,.14);
  --wpsa-poor-border: rgba(242,96,96,.30);
  --wpsa-critical:    #F26060;
  --wpsa-warning:     #FBBF24;
  --wpsa-surface:     #0F1C31;
  --wpsa-surface-2:   #16273E;
  --wpsa-border:      #213347;
  --wpsa-border-2:    #16273E;
  --wpsa-text:        #EAF1FB;
  --wpsa-text-2:      #A6B6CB;
  --wpsa-text-3:      #6D7E95;
}

/* =========================================================================
   Signature blue -> orange moments (the logo's own gradient)
   ========================================================================= */
.wpsa-portal .wpsa-btn--primary {
  background: var(--p-grad);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(30,116,217,.26);
}
.wpsa-portal .wpsa-btn--primary:hover {
  filter: brightness(1.05);
  background: var(--p-grad);
  box-shadow: 0 6px 20px rgba(242,107,33,.30);
}

.wpsa-portal .wpsa-portal__plan-badge {
  background: var(--p-grad);
  color: #fff;
  border: none;
}
.wpsa-portal .wpsa-quota-bar__fill { background: var(--p-grad); }

.wpsa-portal .wpsa-nav-brand-text { letter-spacing: -.02em; }

/* Report: AI-fix button + GEO plan accents carry the brand gradient */
.wpsa-portal .wpsa-ai-fix-btn {
  background: var(--p-grad) !important;
  border: none !important;
  color: #fff !important;
}
.wpsa-portal .wpsa-ai-fix-btn:hover { filter: brightness(1.05); }

/* Report: "Dev needed" effort badge -> brand azure (was indigo) */
.wpsa-portal .wpsa-effort-badge--dev { background: var(--p-blue-lt); color: var(--p-blue); }
.wpsa-portal[data-theme="dark"] .wpsa-effort-badge--dev { background: rgba(59,147,240,.20); color: #7CB0F5; }

/* Trial banner CTA + locked-feature CTA -> brand gradient */
.wpsa-portal .wpsa-trial-banner__cta,
.wpsa-portal .wpsa-locked-feature__cta { background: var(--p-grad); border-color: transparent; }
.wpsa-portal .wpsa-trial-banner__cta:hover,
.wpsa-portal .wpsa-locked-feature__cta:hover { filter: brightness(1.05); }

/* =========================================================================
   Rail v2 — grouped nav sections + bolder active state
   ========================================================================= */
.wpsa-portal .wpsa-portal__nav-section { padding: 2px 0 6px; }
.wpsa-portal .wpsa-portal__nav-section-label {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--p-text-3);
  padding: 8px 16px 6px;
}
/* sections stack from the top; the footer keeps its margin-top:auto */
.wpsa-portal .wpsa-portal__nav-list { flex: 0 0 auto; padding: 0 8px; gap: 2px; }
.wpsa-portal .wpsa-portal__nav-link { font-weight: 600; }

/* Active item -> solid brand azure with white text (Vivid Signal) */
.wpsa-portal .wpsa-portal__nav-item--active .wpsa-portal__nav-link {
  background: var(--p-blue);
  color: #fff;
  box-shadow: 0 3px 10px rgba(30,116,217,.22);
}
.wpsa-portal[data-theme="dark"] .wpsa-portal__nav-item--active .wpsa-portal__nav-link { box-shadow: none; }
.wpsa-portal .wpsa-portal__nav-item--active .wpsa-portal__nav-link .dashicons { opacity: 1; color: #fff; }

/* =========================================================================
   Shared component layer — chrome that recurs across every view
   (view-header, forms, notices, empty states, section headers, modals).
   Views with their own inline <style> (dashboard/reports/new-audit) win by
   source order; this covers the secondary views for free.
   ========================================================================= */
.wpsa-portal .wpsa-view-title { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--p-text); }
.wpsa-portal .wpsa-view-subtitle { font-size: 14px; color: var(--p-text-3); }
.wpsa-portal .wpsa-form-control {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid var(--p-border-2); border-radius: 10px;
  background: var(--p-input-bg); color: var(--p-text); font-size: 14px; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.wpsa-portal .wpsa-form-control:focus { outline: none; border-color: var(--p-blue); box-shadow: 0 0 0 3px var(--p-blue-lt); }
.wpsa-portal .wpsa-form-control--sm { padding: 7px 10px; font-size: 12.5px; }
.wpsa-portal .wpsa-form-control--inline { width: auto; display: inline-block; }
.wpsa-portal .wpsa-form-group { display: flex; flex-direction: column; gap: 6px; }
.wpsa-portal .wpsa-form-group > label, .wpsa-portal .wpsa-form-group__heading { font-size: 13px; font-weight: 600; color: var(--p-text-2); }
.wpsa-portal .wpsa-notice { padding: 11px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5; border: 1px solid var(--p-border); }
.wpsa-portal .wpsa-notice--success { background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.30); color: var(--p-good); }
.wpsa-portal .wpsa-notice--error { background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.30); color: var(--p-bad); }
.wpsa-portal .wpsa-empty-state {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 52px 24px; text-align: center;
  background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 14px; box-shadow: var(--p-shadow);
}
.wpsa-portal .wpsa-empty-state__icon { font-size: 38px; color: var(--p-text-3); opacity: .55; width: auto; height: auto; }
.wpsa-portal .wpsa-empty-state h3 { font-size: 16px; font-weight: 800; margin: 0; color: var(--p-text); }
.wpsa-portal .wpsa-empty-state p { font-size: 13px; color: var(--p-text-3); margin: 0; max-width: 420px; }
.wpsa-portal .wpsa-section-title { font-size: 15px; font-weight: 800; color: var(--p-text); }
.wpsa-portal .wpsa-modal { background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 16px; box-shadow: var(--p-shadow-md); }

/* =========================================================================
   Auth (login/register/reset) — rebrand off hardcoded indigo onto blue+orange.
   Root is .wpsa-auth2 (NOT .wpsa-portal); this file loads after portal-ui so
   these win. --x-indigo drives links/focus/accents; the rest were hardcoded.
   ========================================================================= */
.wpsa-auth2 { --x-indigo: #1E74D9; }
.wpsa-auth2.is-dark { --x-indigo: #3B93F0; }
.wpsa-auth2__brand { background: linear-gradient(135deg, #ffffff 0%, #eaf2fd 48%, #fdeee2 100%); }
.wpsa-auth2__orb--a { background: radial-gradient(circle, rgba(30,116,217,.34), transparent 70%); }
.wpsa-auth2__orb--b { background: radial-gradient(circle, rgba(242,107,33,.30), transparent 70%); }
.wpsa-auth2__orb--c { background: radial-gradient(circle, rgba(30,116,217,.26), transparent 70%); }
.wpsa-auth2__brand-mark { background: linear-gradient(135deg, #1E74D9, #F26B21); box-shadow: 0 6px 16px rgba(30,116,217,.30); }
.wpsa-auth2__feature { border-color: rgba(30,116,217,.18); }
.wpsa-auth2__feature-icon { background: #E4F0FD; color: #1E74D9; }
.wpsa-auth2__input:focus { border-color: #1E74D9; box-shadow: 0 0 0 4px rgba(30,116,217,.14); }
.wpsa-auth2__btn { background: linear-gradient(135deg, #1E74D9, #F26B21); box-shadow: 0 1px 2px rgba(30,116,217,.3), 0 8px 20px rgba(30,116,217,.22); }
.wpsa-auth2__btn:hover { background: linear-gradient(135deg, #1660C0, #DD5A14); box-shadow: 0 2px 8px rgba(30,116,217,.34), 0 12px 28px rgba(242,107,33,.24); }
.wpsa-auth2__notice--info { background: #E4F0FD; border-color: #BBD8F7; color: #1660C0; }
.wpsa-auth2.is-dark .wpsa-auth2__brand { background: linear-gradient(135deg, #0A1424 0%, #0F1C31 50%, #16273E 100%); }
.wpsa-auth2.is-dark .wpsa-auth2__brand-mark { background: linear-gradient(135deg, #3B93F0, #FF7F35); box-shadow: 0 6px 16px rgba(59,147,240,.40); }
.wpsa-auth2.is-dark .wpsa-auth2__feature-icon { background: rgba(59,147,240,.16); color: #7CB0F5; }
.wpsa-auth2.is-dark .wpsa-auth2__panel { background: #0A1424; }

/* =========================================================================
   Report body — flip the hero from the old navy banner to the Vivid light
   card (mockup), and dark-ify the audit console. Scoped .wpsa-portal so the
   WP-admin report is untouched. admin.css children are white-on-navy; recolor.
   ========================================================================= */
.wpsa-portal .wpsa-results-panel .wpsa-results-hero {
  background: var(--p-surface) !important;
  border: 1px solid var(--p-border) !important;
  box-shadow: var(--p-shadow) !important;
}
.wpsa-portal .wpsa-results-panel .wpsa-results-hero::after {
  background: radial-gradient(circle, rgba(30,116,217,.10) 0%, transparent 70%) !important;
}
.wpsa-portal .wpsa-results-panel .wpsa-score-ring__track,
.wpsa-portal .wpsa-results-panel .wpsa-cat-ring__track { stroke: var(--p-surface-3) !important; }
.wpsa-portal .wpsa-results-panel .wpsa-score-ring__number,
.wpsa-portal .wpsa-results-panel .wpsa-hero-score__grade { color: var(--p-text) !important; }
.wpsa-portal .wpsa-results-panel .wpsa-score-ring__sub,
.wpsa-portal .wpsa-results-panel .wpsa-hero-score__label,
.wpsa-portal .wpsa-results-panel .wpsa-hero-meta__duration { color: var(--p-text-3) !important; }
.wpsa-portal .wpsa-results-panel .wpsa-hero-meta__url { color: var(--p-text-2) !important; }
.wpsa-portal .wpsa-results-panel .wpsa-hero-divider { background: var(--p-border) !important; }
.wpsa-portal .wpsa-results-panel .wpsa-cat-card { background: var(--p-surface-2) !important; border-color: var(--p-border) !important; }
.wpsa-portal .wpsa-results-panel .wpsa-cat-card__label { color: var(--p-text-3) !important; }
.wpsa-portal .wpsa-results-panel .wpsa-cat-ring__num { color: var(--p-text) !important; fill: var(--p-text) !important; }

/* Report category tab nav (.wpsa-rtabs / .wpsa-rtab) — active = brand azure */
.wpsa-portal .wpsa-rtab--active, .wpsa-portal .wpsa-rtab.is-active {
  background: var(--p-blue); color: #fff; border-color: var(--p-blue);
}

/* Audit console — proper dark terminal, readable in both themes */
.wpsa-portal .wpsa-terminal { background: #0e1b2e; border: 1px solid #1e2d44; }
.wpsa-portal .wpsa-terminal__body { background: #0e1b2e; color: #c7d2e0; }