/* CharityVerify brand styles — Brand Guidelines v0.1 */

:root {
    --cv-navy: #1A2B4A;
    --cv-slate-blue: #3D5A7A;
    --cv-gold: #C4972A;
    --cv-warm-white: #F8F7F4;
    --cv-near-black: #1A1A2E;
    --cv-slate-grey: #4A5568;
    --cv-fail-red: #822727;
}

html, body {
    font-family: 'Inter', 'Calibri', sans-serif;
    background-color: var(--cv-warm-white);
    color: var(--cv-near-black);
    line-height: 1.6;
}

.brand-wordmark {
    font-family: 'Playfair Display', Georgia, serif !important;
    letter-spacing: 0.02em;
}

/* Financial figures align on the decimal point (Brand §4.2) */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Blazor's FocusOnNavigate (Routes.razor) moves focus to the page <h1> on each
   navigation so screen-reader users land on the main heading. Headings aren't
   interactive and aren't in the tab order, so suppress the visual focus ring on
   that programmatic focus — it was being read as "selected" text. Buttons,
   inputs and links keep their focus outlines. */
h1:focus {
    outline: none;
}

/* ---- Account (static SSR) pages ---- */

.account-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cv-navy);
    padding: 24px;
}

.account-card {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 48px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}

.account-brand {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--cv-navy);
}

.account-strap {
    color: var(--cv-slate-grey);
    font-size: 14px;
    margin: 4px 0 32px;
}

.account-heading {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 24px;
    margin: 0 0 16px;
    color: var(--cv-near-black);
}

.account-note {
    font-size: 14px;
    color: var(--cv-slate-grey);
    margin-bottom: 24px;
}

.account-field {
    margin-bottom: 18px;
}

.account-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--cv-slate-grey);
    margin-bottom: 6px;
}

.account-field input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: 15px;
    font-family: inherit;
    box-sizing: border-box;
}

.account-field input:focus {
    outline: 2px solid var(--cv-slate-blue);
    border-color: var(--cv-slate-blue);
}

.account-field .validation-message {
    color: var(--cv-fail-red);
    font-size: 13px;
    margin-top: 4px;
    display: block;
}

.account-button {
    width: 100%;
    padding: 12px;
    background: var(--cv-navy);
    color: #FFFFFF;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    margin-top: 8px;
}

.account-button:hover {
    background: var(--cv-slate-blue);
}

.account-error {
    background: #FDF2F2;
    border-left: 3px solid var(--cv-fail-red);
    color: var(--cv-fail-red);
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 20px;
}

.account-footer {
    margin-top: 24px;
    font-size: 14px;
    color: var(--cv-slate-grey);
    text-align: center;
}

.account-footer a {
    color: var(--cv-slate-blue);
    font-weight: 500;
}

/* Raw API JSON evidence block */
.raw-json {
    background: #0F172A;
    color: #E2E8F0;
    border-radius: 6px;
    padding: 16px;
    font-size: 12.5px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---- Public landing page (Brand Guidelines §7) ---- */

.landing {
    background: var(--cv-warm-white);
    color: var(--cv-near-black);
    min-height: 100vh;
}

.landing-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 6vw;
    background: var(--cv-navy);
}

.landing-brand {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 24px;
    font-weight: 700;
    color: #FFFFFF;
}

.landing-nav-link {
    color: #FFFFFF;
    text-decoration: none;
    margin-right: 24px;
    font-size: 15px;
}

.landing-nav-link:hover { text-decoration: underline; }

.landing-button-outline {
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    padding: 9px 18px;
    text-decoration: none;
    font-size: 15px;
}

.landing-button-outline:hover { background: var(--cv-slate-blue); }

.landing-hero {
    background: var(--cv-navy);
    color: #FFFFFF;
    text-align: center;
    padding: 96px 6vw 110px;
}

.landing-hero h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(36px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 24px;
}

.landing-hero p {
    max-width: 640px;
    margin: 0 auto 36px;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
}

.landing-button-gold {
    display: inline-block;
    background: var(--cv-gold);
    color: var(--cv-near-black);
    font-weight: 600;
    padding: 14px 32px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 16px;
}

.landing-button-gold:hover { filter: brightness(1.08); }

.landing-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 72px 6vw;
}

.landing-section-alt { background: #FFFFFF; max-width: none; }

.landing-section-alt > * {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.landing-section h2, .landing-cta h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 20px;
}

.landing-lede {
    font-size: 17px;
    line-height: 1.7;
    max-width: 720px;
    color: var(--cv-slate-grey);
    margin: 0 0 16px;
}

.landing-emphasis {
    font-size: 19px;
    font-weight: 600;
    color: var(--cv-near-black);
}

.landing-scores { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 24px; }

.landing-score {
    color: #FFFFFF;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 15px;
}

.landing-score-pass { background: #2D6A4F; }
.landing-score-review { background: #9A6519; }
.landing-score-fail { background: #822727; }

.landing-sample-report-callout {
    background: #FFFFFF;
    border-left: 4px solid var(--cv-gold);
}

.landing-sample-report-callout .landing-button-outline {
    color: var(--cv-navy);
    border-color: var(--cv-navy);
}

.landing-sample-report-callout .landing-button-outline:hover { background: #EEF2F6; }

.landing-pricing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 24px;
    margin-top: 40px;
}

.landing-price-card {
    background: #FFFFFF;
    border: 1px solid #E5E2DB;
    border-radius: 8px;
    padding: 28px;
}

.landing-price-card h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 8px;
}

.landing-price {
    font-size: 30px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-bottom: 12px;
}

.landing-price-card p {
    font-size: 14px;
    color: var(--cv-slate-grey);
    line-height: 1.6;
    margin: 0;
}

.landing-price-seats { color: var(--cv-near-black); font-weight: 600; }

.landing-price-action {
    display: block;
    margin-top: 24px;
    padding: 12px 16px;
    text-align: center;
}

.landing-price-card .landing-button-outline {
    color: var(--cv-navy);
    border-color: var(--cv-navy);
}

.landing-price-card .landing-button-outline:hover { background: #EEF2F6; }

.landing-price-card.is-selected {
    border-color: var(--cv-gold);
}

.landing-price-card button.landing-button-gold {
    border: 0;
    cursor: pointer;
    font-family: inherit;
    width: 100%;
}

.landing-price-card button.landing-button-gold[aria-pressed="true"] {
    box-shadow: inset 0 0 0 2px var(--cv-navy);
}

/* ---- Admin billing ---- */

.billing-plan-selection {
    max-width: 1040px;
}

.billing-plan-selection .landing-price-card {
    display: flex;
    flex-direction: column;
}

.billing-plan-selection .landing-price-card .landing-price-action {
    margin-top: auto;
}

.billing-order-summary {
    max-width: 760px;
}

.billing-order-summary-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 24px;
}

.landing-vat-disclosure {
    color: var(--cv-slate-grey);
    font-size: 14px;
    margin: 20px 0 0;
}

.landing-button-gold:focus-visible,
.landing-button-outline:focus-visible,
.landing-price-card button:focus-visible {
    outline: 3px solid var(--cv-gold);
    outline-offset: 3px;
}

.landing-cta {
    background: var(--cv-navy);
    color: #FFFFFF;
    text-align: center;
    padding: 80px 6vw;
}

.landing-cta p {
    max-width: 560px;
    margin: 0 auto 32px;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
}

.landing-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 28px 6vw;
    font-size: 13px;
    color: var(--cv-slate-grey);
    background: var(--cv-warm-white);
}

/* ---- Public sample report ---- */

.sample-report { background: var(--cv-warm-white); color: var(--cv-near-black); }
.sample-report-hero { max-width: 780px; margin: 0 auto; padding: 76px 6vw 44px; text-align: center; }
.sample-report-hero h1 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(38px, 5vw, 58px); line-height: 1.12; margin: 0 0 18px; }
.sample-report-hero > p:last-child { color: var(--cv-slate-grey); font-size: 18px; line-height: 1.65; margin: 0; }
.sample-report-eyebrow { color: var(--cv-gold); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sample-report-feature { align-items: center; background: #FFFFFF; display: grid; gap: clamp(40px, 6vw, 76px); grid-template-columns: minmax(280px, 500px) minmax(0, 1fr); margin: 0 auto; max-width: 1160px; padding: clamp(36px, 5vw, 64px) 6vw; }
.sample-report-feature-copy { max-width: 480px; }
.sample-report-feature h2 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(30px, 3vw, 40px); line-height: 1.2; margin: 0 0 18px; }
.sample-report-feature-copy > p { color: var(--cv-slate-grey); line-height: 1.65; }
.sample-report-feature-copy > .sample-report-eyebrow { color: var(--cv-gold); line-height: 1.4; }
.sample-report-feature img { border: 1px solid #E5E2DB; box-shadow: 0 18px 44px rgba(26, 43, 74, .17); display: block; height: auto; width: 100%; }
.sample-report-preview-link { display: block; }
.sample-report-preview-link:focus-visible { outline: 3px solid var(--cv-gold); outline-offset: 5px; }
.sample-report-section-list { color: var(--cv-near-black); display: grid; gap: 10px; list-style: none; margin: 24px 0 28px; padding: 0; }
.sample-report-section-list li { border-bottom: 1px solid #E5E2DB; padding: 0 0 10px 22px; position: relative; }
.sample-report-section-list li::before { color: var(--cv-gold); content: '•'; left: 0; position: absolute; }
.sample-report-outcome-note { border-left: 3px solid var(--cv-gold); font-size: 14px; margin: 0 0 28px; padding-left: 14px; }
.sample-report-disclosure { border-top: 1px solid #E5E2DB; color: var(--cv-slate-grey); margin: 56px auto 0; max-width: 840px; padding: 32px 6vw 52px; }
.sample-report-disclosure h2 { color: var(--cv-near-black); font-family: 'Playfair Display', Georgia, serif; font-size: 24px; margin: 0 0 10px; }
.sample-report-disclosure p { line-height: 1.65; margin: 8px 0; }
.sample-report-cta { margin-top: 0; }
body:has(.sample-report) { position: relative; }
body:has(.sample-report) .analytics-settings { position: absolute; }

@media (max-width: 720px) {
    .landing-nav { padding: 14px 4vw; }
    .landing-brand { font-size: 20px; }
    .landing-nav-link { font-size: 13px; margin-right: 12px; }
    .landing-button-outline { font-size: 13px; padding: 7px 10px; white-space: nowrap; }
    .sample-report-hero { padding: 54px 6vw 34px; }
    .sample-report-feature { grid-template-columns: 1fr; gap: 34px; padding: 36px 6vw 44px; }
    .sample-report-feature-copy { max-width: none; }
    .sample-report-disclosure { margin-top: 36px; }
    .landing-pricing { grid-template-columns: 1fr; gap: 16px; }
    .landing-price-card { padding: 24px; }
    .landing-price-action { min-height: 44px; box-sizing: border-box; }
    .billing-order-summary-row { align-items: stretch; flex-direction: column; gap: 8px; }
}

@media (max-width: 768px) {
    .app-user-name {
        display: none;
    }
}

/* Keep the canonical result and its exports inside narrow signed-in viewports. */
.job-results-header,
.job-results-actions,
.job-results-table,
.job-results-detail,
.job-results-detail-content {
    min-width: 0;
}

.job-results-detail-content {
    max-width: 100%;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .job-results-header {
        align-items: stretch !important;
    }

    .job-results-header > div,
    .job-results-actions {
        min-width: 0;
        width: 100%;
    }

    .job-results-actions {
        align-items: stretch !important;
        flex-direction: column;
    }

    .job-results-actions > .mud-button-root,
    .job-results-actions > .mud-button-group-root {
        box-sizing: border-box;
        max-width: 100%;
        width: 100%;
    }

    .job-results-actions > .mud-button-group-root {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .job-results-actions .mud-button-root,
    .job-results-actions .mud-button-label {
        min-width: 0;
    }

    .job-results-actions .mud-button-label {
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .job-results-table .mud-table-container,
    .job-results-table table,
    .job-results-table .mud-table-body,
    .job-results-table .mud-table-row,
    .job-results-table .mud-table-cell {
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }

    .job-results-table table {
        table-layout: fixed;
    }

    .job-results-table td.job-results-detail {
        display: block !important;
        padding: 16px !important;
    }

    .job-results-detail-content,
    .job-results-detail-content > * {
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
    }
}

/* Optional analytics consent: small and readable on public and signed-in layouts. */
.analytics-consent {
    position: fixed;
    z-index: 2000;
    right: 1rem;
    bottom: 3.25rem;
    width: min(30rem, calc(100vw - 2rem));
    padding: 1rem 1.125rem;
    color: #1A1A2E;
    background: #fff;
    border: 1px solid rgba(26, 43, 74, .2);
    border-radius: .5rem;
    box-shadow: 0 .75rem 2rem rgba(26, 43, 74, .2);
}
.analytics-consent[hidden] { display: none; }
.analytics-consent p { margin: .5rem 0 .75rem; font-size: .9rem; line-height: 1.45; }
.analytics-consent div { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }
.analytics-consent button {
    border: 1px solid #1A2B4A;
    border-radius: .3rem;
    padding: .55rem .8rem;
    color: #fff;
    background: #1A2B4A;
    cursor: pointer;
}
.analytics-consent .analytics-consent-secondary { color: #1A2B4A; background: #fff; }
.analytics-settings {
    position: fixed;
    z-index: 1900;
    right: .75rem;
    bottom: .65rem;
    padding: .35rem .55rem;
    border: 1px solid rgba(26, 43, 74, .35);
    border-radius: .25rem;
    color: #1A2B4A;
    background: rgba(255, 255, 255, .95);
    font: inherit;
    font-size: .75rem;
    cursor: pointer;
}

/* ---- Portfolio monitoring ---- */

.monitoring-page {
    max-width: 1120px;
}

.monitoring-heading > div:first-child {
    max-width: 720px;
    min-width: 0;
}

.monitoring-create-focus:focus {
    outline: 3px solid var(--cv-gold);
    outline-offset: 4px;
}

.monitoring-create,
.monitoring-row,
.monitoring-run,
.monitoring-attention-row {
    border: 1px solid #E5E2DB;
}

.monitoring-recipient-fieldset {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.monitoring-recipient-fieldset legend {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.monitoring-recipient-grid {
    display: grid;
    gap: 4px 20px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.monitoring-list,
.monitoring-history,
.monitoring-attention-list {
    display: grid;
    gap: 14px;
}

.monitoring-row {
    align-items: center;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(220px, 1.4fr) minmax(360px, 1fr) auto;
    min-width: 0;
}

.monitoring-row-primary,
.monitoring-attention-copy,
.monitoring-change-copy {
    min-width: 0;
    overflow-wrap: anywhere;
}

.monitoring-row-schedule,
.monitoring-summary-grid {
    display: grid;
    gap: 10px 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.monitoring-row-schedule div,
.monitoring-summary-grid div {
    min-width: 0;
}

.monitoring-row-schedule dt,
.monitoring-summary-grid dt {
    color: var(--cv-slate-grey);
    font-size: 0.78rem;
}

.monitoring-row-schedule dd,
.monitoring-summary-grid dd {
    font-size: 0.9rem;
    margin: 0;
    overflow-wrap: anywhere;
}

.monitoring-status,
.monitoring-no-change,
.monitoring-change {
    align-items: flex-start;
    display: flex;
    gap: 9px;
    min-width: 0;
}

.monitoring-status .mud-icon-root,
.monitoring-no-change .mud-icon-root,
.monitoring-change .mud-icon-root {
    color: var(--cv-navy);
    flex: 0 0 auto;
    margin-top: 2px;
}

.monitoring-row-actions,
.monitoring-attention-actions {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.monitoring-disclosure {
    background: #F1F3F5;
    border: 1px solid rgba(26, 43, 74, 0.12);
    max-width: 820px;
}

.monitoring-empty {
    max-width: 760px;
}

.monitoring-back-link {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    text-underline-offset: 3px;
}

.monitoring-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.monitoring-change-list {
    display: grid;
    gap: 12px;
}

.monitoring-change {
    border-top: 1px solid #E5E2DB;
    padding-top: 12px;
}

.monitoring-change:first-child {
    border-top: 0;
    padding-top: 0;
}

.monitoring-change-label {
    font-weight: 600;
}

.monitoring-attention-row {
    align-items: center;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    min-width: 0;
}

@media (max-width: 900px) {
    .monitoring-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .monitoring-row-schedule {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

@media (max-width: 720px) {
    .analytics-settings,
    body:has(.sample-report) .analytics-settings {
        position: static;
        display: block;
        min-height: 44px;
        margin: .75rem .75rem .75rem auto;
        box-sizing: border-box;
    }

    .monitoring-heading,
    .monitoring-section-heading,
    .monitoring-run-heading,
    .monitoring-attention-row {
        align-items: stretch !important;
        flex-direction: column;
    }

    .monitoring-heading > *,
    .monitoring-heading .mud-button-root,
    .monitoring-detail-actions,
    .monitoring-detail-actions .mud-button-root,
    .monitoring-run-heading .mud-button-root,
    .monitoring-attention-actions,
    .monitoring-attention-actions .mud-button-root {
        box-sizing: border-box;
        max-width: 100%;
        width: 100%;
    }

    .monitoring-row {
        align-items: stretch;
        grid-template-columns: minmax(0, 1fr);
    }

    .monitoring-row-schedule {
        grid-column: auto;
        grid-row: auto;
        grid-template-columns: minmax(0, 1fr);
    }

    .monitoring-row-actions {
        width: 100%;
    }

    .monitoring-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .monitoring-create,
    .monitoring-row,
    .monitoring-run,
    .monitoring-detail-summary,
    .monitoring-edit {
        padding: 20px !important;
    }
}