/* ============================================================
   Evora IQ – app.css
   Uses CSS custom properties from brand.css (served from DB)
   ============================================================ */

/* ---------- Utilities ---------- */
.py-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.hover-lift { transition: transform .18s ease, box-shadow .18s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.12) !important; }
.icon-box { display: inline-flex; align-items: center; justify-content: center; }
.font-monospace { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; }

/* ---------- Form readability ---------- */
.form-label,
.form-check-label,
.form-text,
label {
    color: var(--cp-text, #1f2937) !important;
}
.card label,
.card .form-label,
.card .form-check-label,
.card .form-text,
.modal label,
.modal .form-label,
.modal .form-check-label,
.modal .form-text,
.bg-white label,
.bg-white .form-label,
.bg-white .form-check-label,
.bg-light label,
.bg-light .form-label,
.bg-light .form-check-label {
    color: var(--cp-text, #1f2937) !important;
}
.text-white label,
.text-white .form-label,
.text-white .form-check-label,
.bg-primary label,
.bg-primary .form-label,
.bg-primary .form-check-label,
.bg-primary-gradient label,
.bg-primary-gradient .form-label,
.bg-primary-gradient .form-check-label,
.bg-dark label,
.bg-dark .form-label,
.bg-dark .form-check-label,
footer label,
footer .form-label,
footer .form-check-label {
    color: #fff !important;
}
.form-control::placeholder {
    color: #6b7280;
    opacity: 1;
}

/* ---------- Brand gradient hero ---------- */
.bg-primary-gradient {
    background: linear-gradient(135deg, var(--cp-primary, #68bcf5) 0%, var(--cp-accent, #10B981) 52%, var(--cp-primary-dark, #0d3f66) 100%);
}

/* ---------- Primary colour overrides via CSS vars ---------- */
.text-primary          { color: color-mix(in srgb, var(--cp-primary, #68bcf5) 62%, #06324f) !important; }
.bg-primary            { background-color: var(--cp-primary, #68bcf5) !important; }
section.bg-primary     { background: linear-gradient(135deg, var(--cp-primary, #68bcf5) 0%, var(--cp-accent, #10B981) 55%, var(--cp-primary-dark, #0d3f66) 100%) !important; }
section.bg-primary-soft { background: linear-gradient(135deg, color-mix(in srgb, var(--cp-primary, #68bcf5) 18%, white) 0%, #fff 55%, color-mix(in srgb, var(--cp-accent, #10B981) 10%, white) 100%) !important; }
.card-header.bg-primary,
.nav-link.active.bg-primary {
    background: linear-gradient(135deg, var(--cp-primary, #68bcf5), var(--cp-accent, #10B981)) !important;
}
.btn-primary           { background-color: var(--cp-primary, #68bcf5); border-color: var(--cp-primary, #68bcf5); color: #06324f; }
.btn-primary:hover     { background-color: color-mix(in srgb, var(--cp-primary, #68bcf5) 78%, #06324f); border-color: transparent; color: #fff; }
.btn-outline-primary   { color: color-mix(in srgb, var(--cp-primary, #68bcf5) 45%, #06324f); border-color: var(--cp-primary, #68bcf5); }
.btn-outline-primary:hover { background-color: var(--cp-primary, #68bcf5); color: #06324f; }
.border-primary        { border-color: var(--cp-primary, #68bcf5) !important; }
.bg-primary-soft       { background-color: color-mix(in srgb, var(--cp-primary, #68bcf5) 12%, white); }
.text-purple           { color: var(--cp-accent, #10B981); }
.currency-switcher .btn-link:hover { background: color-mix(in srgb, var(--cp-primary, #68bcf5) 24%, transparent); }

/* ---------- Footer ---------- */
footer.bg-dark {
    background-color: var(--cp-footer-bg, #0d3f66) !important;
}
footer .text-white-50 {
    color: rgba(255,255,255,.74) !important;
}
footer a.text-white-50:hover {
    color: #fff !important;
}

/* ---------- Sidebar ---------- */
.sidebar { min-height: calc(100vh - 56px); position: sticky; top: 56px; overflow-y: auto; }
.sidebar .nav-link { font-size: .875rem; padding: .45rem .75rem; transition: background .15s; }
.sidebar .nav-link.active { font-weight: 600; }
.sidebar .nav-link:not(.active):hover { background: rgba(0,0,0,.05); }

/* ---------- Admin sidebar ---------- */
nav.sidebar .nav-link { font-size: .8rem; }

/* ---------- Score badges (4-tier) ---------- */
/* Excellent ≥85 */
.score-badge.score-success  { background-color: #16a34a !important; color: #fff !important; }
/* Good 70–84 */
.score-badge.score-info     { background-color: #0891b2 !important; color: #fff !important; }
/* Needs Work 50–69 */
.score-badge.score-warning  { background-color: #d97706 !important; color: #fff !important; }
/* High Risk 0–49 */
.score-badge.score-danger   { background-color: #dc2626 !important; color: #fff !important; }

/* ---------- Score gauge card ---------- */
.score-gauge-card { position: relative; }
.score-gauge-card svg { display: block; margin: 0 auto; }

/* ---------- Score tier legend ---------- */
.score-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .78rem; }
.score-legend-item { display: flex; align-items: center; gap: .35rem; }
.score-legend-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

/* ---------- Category score bars ---------- */
.cat-score-bar { height: 8px; border-radius: 4px; transition: width .5s ease; }

/* ---------- SEO badge ---------- */
.badge-seo { background-color: #7c3aed; color: #fff; }

/* ---------- Dashboard cards ---------- */
.card { border-radius: .75rem !important; }
.card-header { border-radius: .75rem .75rem 0 0 !important; }

/* ---------- Score display on report ---------- */
.score-circle {
    width: 120px; height: 120px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; font-weight: 700;
    border: 6px solid;
}
.score-circle.excellent { border-color: #16a34a; color: #16a34a; }
.score-circle.good      { border-color: #65a30d; color: #65a30d; }
.score-circle.fair      { border-color: #ca8a04; color: #ca8a04; }
.score-circle.poor      { border-color: #dc2626; color: #dc2626; }

/* ---------- Auth pages ---------- */
.auth-card { max-width: 440px; margin: 0 auto; }

/* ---------- Landing page hero text ---------- */
.hero-section h1 { text-shadow: 0 2px 12px rgba(0,0,0,.18); }
.hero-section .opacity-90 { opacity: .9; }
.hero-red-white h1 { color: #111827; text-shadow: none; line-height: 1.02; }
.hero-red-white .lead { max-width: 680px; }
.hero-scan-form .form-control,
.hero-scan-form .input-group-text,
.hero-scan-form .btn {
    min-height: 58px;
}
.hero-score-preview {
    border: 1px solid #e5e7eb;
    border-top: 5px solid var(--cp-primary, #68bcf5);
    border-radius: 12px;
    background: #fff;
    padding: 1.5rem;
    box-shadow: 0 1.5rem 4rem rgba(17,24,39,.10);
}
.blurred-improvements {
    border: 1px dashed color-mix(in srgb, var(--cp-primary, #68bcf5) 45%, transparent);
    border-radius: 10px;
    padding: 1rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--cp-primary, #68bcf5) 8%, transparent), rgba(255,255,255,.85));
}

/* ---------- CMS content ---------- */
.cms-rich-text {
    color: var(--cp-text, #111827);
    line-height: 1.75;
}
.cms-rich-text h2,
.cms-rich-text h3,
.cms-rich-text h4 {
    color: var(--cp-text, #111827);
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.cms-rich-text p,
.cms-rich-text li {
    color: #4b5563;
}
.cms-rich-text a {
    color: color-mix(in srgb, var(--cp-primary, #68bcf5) 55%, #06324f);
    font-weight: 600;
}
.cms-rich-text img {
    max-width: 100%;
    height: auto;
    border-radius: .75rem;
}

/* ---------- Testimonials ---------- */
.testimonial-photo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 .5rem 1.25rem rgba(15,23,42,.12);
}
.testimonial-photo.photo-left { object-position: 16% 50%; }
.testimonial-photo.photo-mid { object-position: 50% 50%; }
.testimonial-photo.photo-right { object-position: 84% 50%; }

/* ════════════════════════════════════════════════
   Report — Tab Navigation
   ════════════════════════════════════════════════ */

/* Wrapper gives the tabs a clean white card feel */
.report-tabs-wrapper {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(15,23,42,.06);
}

/* Tab bar */
.report-nav-tabs {
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
    padding: .5rem .75rem 0;
    gap: .25rem;
    /* scrollable on mobile */
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none; /* Firefox */
}
.report-nav-tabs::-webkit-scrollbar { display: none; }

.report-nav-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: .5rem .5rem 0 0;
    padding: .55rem 1rem;
    font-size: .82rem;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
    transition: color .15s, background .15s, border-color .15s;
    background: transparent;
}
.report-nav-tabs .nav-link:hover {
    color: var(--cp-primary, #68bcf5);
    background: rgba(104,188,245,.07);
}
.report-nav-tabs .nav-link.active {
    color: var(--cp-primary, #0891b2);
    border-bottom-color: var(--cp-primary, #0891b2);
    background: #fff;
}
.report-nav-tabs .nav-link .badge {
    vertical-align: middle;
    font-size: .6rem;
}

/* Tab content area */
.report-tab-content {
    padding: 0 1.5rem;
}

/* Finding cards — slight hover lift */
.finding-card {
    border: 1px solid #e5e7eb !important;
    border-radius: .75rem !important;
    transition: box-shadow .15s;
}
.finding-card:hover { box-shadow: 0 4px 12px rgba(15,23,42,.08); }

/* ---------- Report responsive previews ---------- */
.viewport-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}
.viewport-frame {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    overflow: hidden;
}
.viewport-frame iframe {
    width: 100%;
    height: 320px;
    border: 0;
    background: #fff;
    transform-origin: top left;
}
.viewport-shell {
    height: 320px;
    overflow: hidden;
    background: #fff;
}
.remediation-steps li,
.validation-steps li {
    margin-bottom: .35rem;
}

/* ---------- Subtle backgrounds ---------- */
.bg-success-soft { background-color: rgba(22,163,74,.1); }
.bg-danger-soft  { background-color: rgba(220,38,38,.1); }
.bg-warning-soft { background-color: rgba(202,138,4,.1); }
.bg-info-soft    { background-color: rgba(8,145,178,.1); }

/* ---------- Tables ---------- */
.table th { font-size: .75rem; text-transform: uppercase; letter-spacing: 0; color: #6b7280; font-weight: 600; }

/* ---------- Accordion overrides ---------- */
.accordion-button:not(.collapsed) { background-color: color-mix(in srgb, var(--cp-primary, #68bcf5) 8%, white); color: color-mix(in srgb, var(--cp-primary, #68bcf5) 50%, #06324f); }
.accordion-button:focus { box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--cp-primary, #68bcf5) 25%, transparent); }

/* ---------- Step numbers (how it works) ---------- */
.step-number { border: 3px solid var(--cp-primary, #68bcf5); }

/* ---------- Toast / scan progress ---------- */
#scanProgress { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; min-width: 280px; }

/* ---------- Responsive sidebar collapse on mobile ---------- */
@media (max-width: 767.98px) {
    .sidebar { min-width: 0; width: 100%; min-height: auto; position: static; border-bottom: 1px solid #dee2e6; }
    .d-flex.flex-column-md { flex-direction: column !important; }
    .viewport-preview-grid { grid-template-columns: 1fr; }
}

/* ---------- Badge contrast enforcement ---------- */
/* Ensure every badge has readable text regardless of bg */
.badge { font-weight: 600; letter-spacing: 0; }
.badge.bg-primary   { color: #06324f !important; }
.badge.bg-secondary { color: #fff !important; }
.badge.bg-success   { color: #fff !important; }
.badge.bg-danger    { color: #fff !important; }
.badge.bg-warning   { color: #1a1a1a !important; }   /* yellow bg → dark text */
.badge.bg-info      { color: #fff !important; }
.badge.bg-dark      { color: #fff !important; }
.badge.bg-light     { color: #1a1a1a !important; }   /* white/light bg → dark text */
.badge.bg-primary-subtle,
.badge.bg-primary-soft,
.badge.bg-primary.bg-opacity-10,
.badge.bg-primary.bg-opacity-15,
.badge.text-primary,
.bg-primary-subtle.text-primary,
.bg-primary-soft.text-primary {
    color: #06324f !important;
}
.badge.bg-success-subtle,
.badge.text-success,
.bg-success-subtle.text-success {
    color: #14532d !important;
}
.badge.bg-info-subtle,
.badge.text-info,
.bg-info-subtle.text-info {
    color: #064e5f !important;
}
.badge.bg-warning-subtle,
.badge.text-warning,
.bg-warning-subtle.text-warning {
    color: #713f12 !important;
}
.badge.bg-danger-subtle,
.badge.text-danger,
.bg-danger-subtle.text-danger {
    color: #7f1d1d !important;
}
.badge.bg-secondary-subtle,
.badge.text-secondary,
.bg-secondary-subtle.text-secondary {
    color: #374151 !important;
}
/* Soft opacity badges */
.badge.bg-primary.bg-opacity-15   { color: color-mix(in srgb, var(--cp-primary, #68bcf5) 55%, #06324f) !important; }
.badge.bg-success.bg-opacity-15   { color: #14532d !important; }
.badge.bg-danger.bg-opacity-15    { color: #7f1d1d !important; }
.badge.bg-warning.bg-opacity-15   { color: #713f12 !important; }
/* Severity badges */
.badge-critical { background-color: #7f1d1d; color: #fff !important; }
.badge-high     { background-color: #dc2626; color: #fff !important; }
.badge-medium   { background-color: #d97706; color: #fff !important; }
.badge-low      { background-color: #0891b2; color: #fff !important; }
.badge-info-cp  { background-color: #10B981; color: #fff !important; }
/* Module category badges */
.badge-seo          { background-color: #7c3aed; color: #fff !important; }
.badge-accessibility{ background-color: #10B981; color: #fff !important; }
.badge-security     { background-color: #dc2626; color: #fff !important; }
.badge-privacy      { background-color: #7c3aed; color: #fff !important; }
.badge-healthcare   { background-color: #16a34a; color: #fff !important; }
.badge-ai           { background-color: #68bcf5; color: #06324f !important; }
.badge-speed        { background-color: #d97706; color: #fff !important; }

/* ---------- Active admin sidebar link ---------- */
.nav-link.active.bg-primary { color: #fff !important; }
.sidebar .nav-link.active   { color: #fff !important; }