/* ============================================================
   CompliancePilot – 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,
label {
    color: var(--cp-text, #1f2937);
}
.text-white .form-label,
.text-white .form-check-label,
.bg-primary .form-label,
.bg-primary .form-check-label,
.bg-primary-gradient .form-label,
.bg-primary-gradient .form-check-label {
    color: #fff;
}

/* ---------- Brand gradient hero ---------- */
.bg-primary-gradient {
    background: linear-gradient(135deg, var(--cp-primary, #2563eb) 0%, var(--cp-accent, #7c3aed) 100%);
}

/* ---------- Primary colour overrides via CSS vars ---------- */
.text-primary          { color: var(--cp-primary, #2563eb) !important; }
.bg-primary            { background-color: var(--cp-primary, #2563eb) !important; }
.btn-primary           { background-color: var(--cp-primary, #2563eb); border-color: var(--cp-primary, #2563eb); }
.btn-primary:hover     { background-color: color-mix(in srgb, var(--cp-primary, #2563eb) 85%, black); border-color: transparent; }
.btn-outline-primary   { color: var(--cp-primary, #2563eb); border-color: var(--cp-primary, #2563eb); }
.btn-outline-primary:hover { background-color: var(--cp-primary, #2563eb); color: #fff; }
.border-primary        { border-color: var(--cp-primary, #2563eb) !important; }
.bg-primary-soft       { background-color: color-mix(in srgb, var(--cp-primary, #2563eb) 12%, white); }
.text-purple           { color: var(--cp-accent, #7c3aed); }

/* ---------- 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, #E30613);
    border-radius: 12px;
    background: #fff;
    padding: 1.5rem;
    box-shadow: 0 1.5rem 4rem rgba(17,24,39,.10);
}
.blurred-improvements {
    border: 1px dashed rgba(227,6,19,.35);
    border-radius: 10px;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(227,6,19,.06), rgba(255,255,255,.85));
}

/* ---------- 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 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: .05em; color: #6b7280; font-weight: 600; }

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

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

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