/*
 * CDR Status Report styles. Color tokens come from the design system's Gray
 * and Severity palettes — see comments beside each token for the spec name.
 */
:root {
    --cdr-bg: #F2F3F6;               /* Gray 200 */
    --cdr-card-bg: #FFFFFF;          /* White */
    --cdr-card-border: #CED4DE;      /* Gray 400 */
    --cdr-divider: #CED4DE;          /* Gray 400 */
    --cdr-text: #000000;             /* Black — headline text */
    --cdr-text-muted: #697488;       /* Gray 600 — sub-headline text */
    --cdr-text-subtle: #99A6BB;      /* Gray 500 */
    /* Match Risk Report's button styling (#75777A gray-blue from app_portfolio.css) */
    --cdr-btn-bg: #75777A;
    --cdr-btn-border: #75777A;
    --cdr-btn-text: #FFFFFF;
    --cdr-btn-bg-hover: #5F6164;
    /* Arrow semantics — Green 500 / Red 500. Alert tier uses the same hue;
     * visual emphasis comes from font-weight on the arrow glyph. */
    --cdr-positive: #61C465;         /* Green 500 */
    --cdr-positive-alert: #61C465;
    --cdr-negative: #E1463F;         /* Red 500 */
    --cdr-negative-alert: #E1463F;
    --cdr-neutral: #99A6BB;          /* Gray 500 */

    /* Bucket severity ramp (Severity 1–8, least → most delinquent).
     * Severity 4 (#F9C56D) is unused here — the bucket set doesn't split
     * 60-89 from 90-119, so 60-119 sits at Severity 3. */
    --cdr-bucket-current: #61C465;    /* Severity 1 */
    --cdr-bucket-1-59: #A0DCA3;       /* Severity 2 */
    --cdr-bucket-60-119: #DDDFAF;     /* Severity 3 */
    --cdr-bucket-120-179: #F59E0B;    /* Severity 5 */
    --cdr-bucket-180-269: #E86935;    /* Severity 6 */
    --cdr-bucket-270plus: #E1463F;    /* Severity 7 */
    --cdr-bucket-defaulted: #B73D3B;  /* Severity 8 */
}

.cdr-report-body {
    margin: 0;
    padding: 24px;
    background: var(--cdr-bg);
    font-family: Helvetica, Arial, sans-serif;
    color: var(--cdr-text);
}

.cdr-report {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--cdr-card-bg);
    border: 1px solid var(--cdr-card-border);
    border-radius: 8px;
    padding: 28px 32px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Header */
.cdr-report__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}
.cdr-report__title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 4px;
    letter-spacing: -0.2px;
}
.cdr-report__subtitle {
    margin: 0 0 6px;
    color: var(--cdr-text-muted);
    font-size: 14px;
}
.cdr-report__dates {
    margin: 0;
    color: var(--cdr-text-subtle);
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cdr-report__dates-icon {
    flex-shrink: 0;
}
.cdr-report__actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}
.cdr-btn {
    background: var(--cdr-btn-bg);
    border: 1px solid var(--cdr-btn-border);
    color: var(--cdr-btn-text);
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    border-radius: 4px;
}
.cdr-btn:hover { background: var(--cdr-btn-bg-hover); border-color: var(--cdr-btn-bg-hover); }

/* Summary cards — always fill one row, split evenly by cohort count */
.cdr-summary {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
}
.cdr-summary-card {
    flex: 1 1 0;
    min-width: 0;
    background: var(--cdr-card-bg);
    border: 1px solid var(--cdr-card-border);
    border-radius: 6px;
    padding: 18px 20px;
    /* Lets children query the card's width instead of the viewport */
    container-type: inline-size;
}
.cdr-summary-card__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--cdr-text-muted);
    margin-bottom: 4px;
}
.cdr-summary-card__rate {
    font-size: 42px;
    font-weight: 500;
    line-height: 1;
    color: var(--cdr-text);
    margin-bottom: 8px;
}
.cdr-summary-card__meta {
    font-size: 12px;
    color: var(--cdr-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}
.cdr-summary-card__meta-item {
    /* Belt-and-suspenders against theme overrides that break words */
    white-space: nowrap !important;
    word-break: keep-all;
    overflow-wrap: normal;
}
.cdr-summary-card__meta-item--two {
    padding-left: 8px;
    border-left: 1px solid var(--cdr-divider);
}

/* Narrow card: stack the two labels on their own lines, drop the visual separator. */
@container (max-width: 320px) {
    .cdr-summary-card__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .cdr-summary-card__meta-item--two {
        padding-left: 0;
        border-left: none;
    }
}

/* Movement section */
.cdr-movement__title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 12px;
}
.cdr-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    font-size: 11px;
    color: var(--cdr-text-muted);
}
.cdr-legend__item { display: flex; align-items: center; gap: 6px; }
.cdr-legend__swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: currentColor;
}
/* Only the swatch uses the bucket color; the text reverts to default muted. */
.cdr-legend__label { color: var(--cdr-text-muted); }

/* Cohort rows */
.cdr-cohorts { display: flex; flex-direction: column; gap: 16px; }
.cdr-cohort {
    background: var(--cdr-card-bg);
    border: 1px solid var(--cdr-card-border);
    border-radius: 6px;
    padding: 18px 24px;
}
.cdr-cohort__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
.cdr-cohort__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}
.cdr-cohort__total {
    font-size: 12px;
    font-weight: 400;
    color: var(--cdr-text-muted);
    margin-left: 6px;
}
.cdr-cohort__toggle {
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    color: var(--cdr-text-muted);
    cursor: pointer;
    padding: 4px 8px;
}
.cdr-cohort__buckets {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 12px;
}
.cdr-cohort--collapsed .cdr-cohort__buckets { display: none; }

/* Bucket cells — values pulled from Figma inspector (Score Card component).
 * Width is fixed at 116px in the mock; we keep a 7-col grid so cards flex
 * with container width, but colors/radius/padding/type match the spec. */
.cdr-bucket {
    background: #F8F9FB;
    border: 1px solid #E5E8ED;
    border-radius: 8px;
    padding: 16px;
}
.cdr-bucket::before {
    content: '';
    display: block;
    height: 3px;
    background: currentColor;
    border-radius: 2px;
    margin-bottom: 10px;
}
.cdr-bucket__label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--cdr-text-muted);
    margin-bottom: 8px;
    white-space: nowrap;
}
.cdr-bucket__change {
    font-size: 22px;
    font-weight: 700;
    color: var(--cdr-text);
    line-height: 1;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.cdr-bucket__arrow {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Per business rule (2026-04-22): the change number stays in default text color.
 * Only the arrow glyph carries the directional tone. Current (NotDelinquent) flips
 * direction vs. all other buckets. See JS changeTone(). */
.cdr-bucket__arrow--flat         { color: var(--cdr-text); }
.cdr-bucket__arrow--neutral      { color: var(--cdr-neutral); }
.cdr-bucket__arrow--good-normal  { color: var(--cdr-positive); }
.cdr-bucket__arrow--good-alert   { color: var(--cdr-positive-alert); font-weight: 800; }
.cdr-bucket__arrow--bad-normal   { color: var(--cdr-negative); }
.cdr-bucket__arrow--bad-alert    { color: var(--cdr-negative-alert); font-weight: 800; }
.cdr-bucket__current {
    font-size: 11px;
    color: var(--cdr-text-muted);
}

/* Per-bucket color hooks — color: applied here flows into border-top and legend swatch */
.bucket--current    { color: var(--cdr-bucket-current); }
.bucket--1-59       { color: var(--cdr-bucket-1-59); }
.bucket--60-119     { color: var(--cdr-bucket-60-119); }
.bucket--120-179    { color: var(--cdr-bucket-120-179); }
.bucket--180-269    { color: var(--cdr-bucket-180-269); }
.bucket--270plus    { color: var(--cdr-bucket-270plus); }
.bucket--defaulted  { color: var(--cdr-bucket-defaulted); }

/* State messages */
.cdr-report__state {
    margin: 24px 0 0;
    text-align: center;
    color: var(--cdr-text-muted);
    font-size: 13px;
}

/* Filter form (shortcode output) */
.cdr-form {
    max-width: 520px;
    padding: 20px 24px;
    background: var(--cdr-card-bg);
    border: 1px solid var(--cdr-card-border);
    border-radius: 6px;
    font-family: Helvetica, Arial, sans-serif;
    color: var(--cdr-text);
}
.cdr-form__title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
}
.cdr-form__desc {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--cdr-text-muted);
}
.cdr-form__fieldset {
    border: 1px solid var(--cdr-card-border);
    border-radius: 4px;
    padding: 12px 16px;
    margin: 0 0 16px;
}
.cdr-form__legend {
    padding: 0 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--cdr-text-muted);
}
.cdr-form__years {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    font-size: 13px;
}
.cdr-form__year { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.cdr-form__all {
    background: none;
    border: 1px solid var(--cdr-btn-border);
    color: var(--cdr-btn-bg);
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 3px;
    cursor: pointer;
    margin-left: auto;
}
.cdr-form__submit {
    background: #2f8f3e;
    color: #ffffff;
    border: none;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-radius: 4px;
    cursor: pointer;
}
.cdr-form__submit:hover { background: #267532; }

/* Print */
@page { size: letter landscape; margin: 0.4in; }
@media print {
    .cdr-report__actions { display: none !important; }
    .cdr-report-body { background: #fff; padding: 0; }
    .cdr-report { box-shadow: none; border: none; }
    /* Keep each cohort row (and the summary strip) on a single page. */
    .cdr-summary,
    .cdr-summary-card,
    .cdr-cohort {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    /* Force browsers to print background colors (legend swatches, etc.) */
    .cdr-legend__swatch,
    .cdr-summary-card,
    .cdr-cohort {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}