/*
 * Connective Health styling, aligned with the patient summary PDFs (pdf-service views/style.css), which clinicians
 * already see, and with the 2025 logo artwork (its navy is exactly #40497C, its blue ~#389DD9):
 * - Navy #40497C: text, table/group headers, primary buttons (pdf-service's "dark blue" and back-to-top pill)
 * - CH blue #519DD4: section header bars (with CH_Gradient), accents; too light for small white text, so buttons
 *   use navy instead
 * - Alert red #BF1C34, amber #F5A623, row tint #E1EBF5, section border #BAD1E8, rule #D5D5D5
 * - Headings: Century Gothic like the PDFs (installed on most Windows EHR workstations), falling back to Josefin Sans,
 *   the brand deck's geometric header font. Body: Libre Franklin (brand deck); the PDFs use Helvetica.
 * Open brand question: the 2025 brand deck lists #2C3E50 / #3498DB, which neither the logo nor the PDFs use.
 */
:root {
    --ch-navy: #40497C;
    --ch-navy-80: #5E6590;
    --ch-blue: #519DD4;
    --ch-blue-dark: #2E6FA3;
    --ch-blue-tint: #E1EBF5;
    /* Neutral gray for code chips, neutral pills and dividers; must stay visible on the white cards */
    --ch-gray: #ECF0F1;
    --ch-gray-dark: #D5D5D5;
    --ch-border: #BAD1E8;
    --ch-light-blue: #BAD1E8;
    --ch-red: #BF1C34;
    --ch-amber: #F5A623;
    --ch-green: #1E8E5A;
    --ch-green-tint: #E6F4EC;
    --ch-heading-font: 'Century Gothic', 'Josefin Sans', sans-serif;

    --bs-body-font-family: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-color: var(--ch-navy);
    --bs-body-bg: #FFFFFF;
    --bs-secondary-color: var(--ch-navy-80);
    --bs-border-color: var(--ch-border);
    --bs-link-color: var(--ch-blue-dark);
    --bs-link-hover-color: var(--ch-navy);
    --bs-primary: var(--ch-navy);
    --bs-primary-rgb: 64, 73, 124;
}

/* EHR iframes are often narrow, so keep things compact */
body {
    font-size: 0.9rem;
    line-height: 1.45;
}

h1, h2, h3, .ch-heading {
    font-family: var(--ch-heading-font);
    font-weight: 600;
    color: var(--ch-navy);
    letter-spacing: 0.01em;
}

code {
    color: var(--ch-navy);
    background: var(--ch-gray);
    border-radius: 3px;
    padding: 0.05rem 0.3rem;
    font-size: 0.85em;
}

/* App header: logo with clear space around it (guideline: at least the height of the "C") */
.ch-appbar {
    background: #fff;
    border-bottom: 1px solid var(--ch-gray-dark);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ch-appbar .ch-logo {
    height: 30px; /* renders ~135px wide, above the 120px digital minimum */
    width: auto;
}

.ch-appbar .ch-wordmark {
    font-family: var(--ch-heading-font);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--ch-navy);
}

.ch-appbar .ch-product {
    font-family: var(--ch-heading-font);
    font-weight: 400;
    font-size: 1rem;
    color: var(--ch-navy-80);
    border-left: 1px solid var(--ch-gray-dark);
    padding-left: 1rem;
}

.ch-poc-tag {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ch-navy-80);
    border: 1px dashed var(--ch-navy-80);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
}

/* Patient banner */
.ch-patient {
    background: var(--ch-navy);
    color: #fff;
    padding: 0.85rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
}

.ch-patient h1 {
    color: #fff;
    font-size: 1.35rem;
    margin: 0;
}

.ch-patient .ch-demographics {
    color: var(--ch-light-blue);
    font-weight: 300;
}

.ch-patient .ch-count {
    margin-left: auto;
    background: #fff;
    color: var(--ch-navy);
    font-weight: 600;
    border-radius: 999px;
    padding: 0.2rem 0.75rem;
    font-size: 0.8rem;
}

.ch-main {
    padding: 1rem;
}

.ch-section-title {
    font-family: var(--ch-heading-font);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ch-navy-80);
    margin-bottom: 0.5rem;
}

/* Insight cards */
.ch-card {
    background: #fff;
    border: 1px solid var(--ch-gray-dark);
    border-left: 4px solid var(--ch-blue);
    border-radius: 6px;
    padding: 1rem 1.1rem;
    margin-bottom: 0.75rem;
}

.ch-card.is-done {
    border-left-color: var(--ch-gray-dark);
    background: #FAFBFB;
}

.ch-card.is-done .ch-card-body {
    display: none;
}

.ch-card h2 {
    font-size: 1.05rem;
    margin-bottom: 0.2rem;
}

.ch-meta {
    font-size: 0.8rem;
    color: var(--ch-navy-80);
}

.ch-hcc {
    display: inline-block;
    background: var(--ch-blue-tint);
    color: var(--ch-blue-dark);
    font-weight: 600;
    border-radius: 4px;
    padding: 0.05rem 0.4rem;
    margin-right: 0.35rem;
}

.ch-upgrade {
    font-size: 0.8rem;
    margin-top: 0.4rem;
    color: var(--ch-navy-80);
}

.ch-evidence {
    margin-top: 0.75rem;
    border-top: 1px solid var(--ch-gray);
    padding-top: 0.6rem;
    font-size: 0.85rem;
}

.ch-evidence dt {
    font-family: var(--ch-heading-font);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ch-navy-80);
    margin-top: 0.4rem;
}

.ch-evidence ul {
    margin: 0.2rem 0 0;
    padding-left: 1.1rem;
}

.ch-evidence .ch-source {
    color: var(--ch-navy-80);
    font-weight: 300;
}

/* Status pills */
.ch-status {
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    white-space: nowrap;
}

.ch-status.pending { background: #FEF3E0; color: #8A5A00; border: 1px solid var(--ch-amber); }
.ch-status.accepted { background: var(--ch-green-tint); color: var(--ch-green); }
.ch-status.rejected, .ch-status.existing { background: var(--ch-gray); color: var(--ch-navy-80); }

/* Actions: Medical Blue for the call to action, per guidelines */
.ch-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.btn-ch {
    background: var(--ch-navy);
    border: 1px solid var(--ch-navy);
    color: #fff;
    font-weight: 600;
}

.btn-ch:hover, .btn-ch:focus {
    background: #2F3662;
    border-color: #2F3662;
    color: #fff;
}

.btn-ch-outline {
    background: #fff;
    border: 1px solid var(--ch-gray-dark);
    color: var(--ch-navy);
}

.btn-ch-outline:hover {
    border-color: var(--ch-navy-80);
    color: var(--ch-navy);
}

details.ch-reject[open] {
    flex-basis: 100%;
}

details.ch-reject > summary {
    list-style: none;
    display: inline-block;
}

details.ch-reject > summary::-webkit-details-marker {
    display: none;
}

details.ch-reject[open] > summary {
    display: none;
}

/* Diagnosis picker and Accept on one row, wrapping in narrow EHR sidebars */
.ch-accept-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    max-width: 100%;
}

.ch-accept-form select {
    width: auto;
    max-width: 100%;
    min-width: 0;
    flex: 1 1 16rem;
}

/* Header tools menu (gear at the end of the app bar): demo reset and launch context */
.ch-tools {
    position: relative;
}

.ch-tools > summary {
    list-style: none;
    cursor: pointer;
    color: var(--ch-navy-80);
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
}

.ch-tools > summary::-webkit-details-marker {
    display: none;
}

.ch-tools > summary:hover,
.ch-tools[open] > summary {
    background: var(--ch-gray);
}

.ch-tools-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.4rem);
    z-index: 10;
    width: 22rem;
    max-width: calc(100vw - 2rem);
    background: #fff;
    border: 1px solid var(--ch-gray-dark);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    padding: 0.75rem;
}

.ch-tools-heading {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.ch-demo-reset {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--ch-gray-dark);
}

.ch-demo-reset .ch-meta {
    flex: 1 1 12rem;
    font-size: 0.72rem;
}

.ch-reject-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    background: var(--ch-gray);
    border-radius: 6px;
    padding: 0.6rem;
}

/* Flash messages */
.ch-flash {
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    margin-bottom: 0.75rem;
    border: 1px solid transparent;
}

.ch-flash.success { background: var(--ch-green-tint); color: var(--ch-green); border-color: #BFE3CF; }
.ch-flash.secondary { background: #fff; color: var(--ch-navy); border-color: var(--ch-gray-dark); }
.ch-flash.danger { background: #FBE9EC; color: var(--ch-red); border-color: #F0C2CA; }

/* Sidebar */
.ch-panel {
    background: #fff;
    border: 1px solid var(--ch-gray-dark);
    border-radius: 6px;
}

.ch-panel .ch-panel-title {
    padding: 0.6rem 0.9rem 0;
}

.ch-panel ul {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0 0.4rem;
}

.ch-panel li {
    padding: 0.45rem 0.9rem;
    border-top: 1px solid var(--ch-gray);
    font-size: 0.85rem;
}

.ch-panel li:first-child {
    border-top: 0;
}

.ch-context {
    font-size: 0.75rem;
    color: var(--ch-navy-80);
}

.ch-footer {
    font-size: 0.72rem;
    color: var(--ch-navy-80);
    text-align: center;
    padding: 0.5rem 1rem 1rem;
}

.ch-appbar {
    flex-wrap: wrap;
    row-gap: 0.4rem;
}

.ch-appbar .ch-product,
.ch-poc-tag {
    white-space: nowrap;
}

/* Narrow EHR sidebars: drop the divider and the POC tag text size down */
@media (max-width: 480px) {
    .ch-appbar .ch-product {
        border-left: 0;
        padding-left: 0;
        font-size: 0.9rem;
    }

    .ch-patient h1 {
        font-size: 1.15rem;
    }
}


/* ---- Patient summary PDF patterns (pdf-service style.css) ---- */

/* Bordered section with a blue gradient header bar, like .section / .section-header in the PDFs */
.ch-section {
    border: 1px solid var(--ch-border);
    margin-bottom: 0.75rem;
    background: #fff;
}

.ch-section-header {
    background-color: var(--ch-blue);
    background-image: url("/static/images/ch-gradient.png");
    background-size: 100% 100%;
    padding: 0.35rem 0.75rem;
}

.ch-section-header h2 {
    color: #fff;
    font-family: var(--ch-heading-font);
    font-weight: 700;
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0;
}

.ch-section-body {
    padding: 0.75rem;
}

/* Group header, like the PDF's .header-row (navy, bold, uppercase, grey rule) */
.ch-group-header {
    display: flex;
    justify-content: space-between;
    color: var(--ch-navy);
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--ch-gray-dark);
    padding: 0 0 0.25rem 0.9rem;
    margin: 0.25rem 0 0.6rem;
}

.ch-group-header .ch-group-rationale {
    display: none;
}

.ch-addressed {
    font-style: italic;
    font-size: 0.8rem;
    color: var(--ch-navy-80);
    margin-top: 0.15rem;
}

/* The PDF's "Rationale": reasons then recommendations in one plain list */
.ch-rationale {
    list-style: none;
    margin: 0.3rem 0 0;
    padding: 0;
    font-size: 0.85rem;
}

.ch-rationale li {
    margin-bottom: 0.3rem;
    padding-left: 0.9rem;
    position: relative;
}

.ch-rationale li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 0.35rem;
    height: 0.35rem;
    background: var(--ch-blue);
}

.ch-rationale .ch-source {
    color: var(--ch-navy-80);
    font-weight: 300;
}

.ch-rationale-label {
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ch-navy);
    margin-top: 0.6rem;
}

/* Problem list rows zebra-striped like the PDF's data tables */
.ch-section ul.ch-problems {
    list-style: none;
    margin: 0;
    padding: 0;
    /* Real problem lists run to ~100 entries; scroll inside the panel so the controls below it stay in reach */
    max-height: 32rem;
    overflow-y: auto;
}

.ch-section ul.ch-problems li {
    padding: 0.45rem 0.75rem;
    font-size: 0.85rem;
}

.ch-section ul.ch-problems li:nth-child(even) {
    background: var(--ch-blue-tint);
}


/* ---- After Accept/Dismiss: return to the same card, confirm inside it, highlight briefly ---- */
.ch-card {
    /* the redirect lands on #insight-<id>; leave room above the card */
    scroll-margin-top: 0.75rem;
}

.ch-card.ch-just-updated {
    border-left-color: var(--ch-navy);
    animation: ch-just-updated 2.5s ease-out;
}

@keyframes ch-just-updated {
    0%, 30% {
        background: var(--ch-blue-tint);
        box-shadow: 0 0 0 3px var(--ch-blue);
    }
    /* no 100% keyframe: it ends on the card's own background (white, or dimmed when dismissed) */
}

@media (prefers-reduced-motion: reduce) {
    .ch-card.ch-just-updated {
        animation: none;
        box-shadow: 0 0 0 2px var(--ch-blue);
    }
}

.ch-inline-flash {
    margin: 0.6rem 0 0;
    padding: 0.45rem 0.7rem;
    border-radius: 4px;
    font-size: 0.85rem;
    border: 1px solid transparent;
}

.ch-inline-flash.success { background: var(--ch-green-tint); color: var(--ch-green); border-color: #BFE3CF; }
.ch-inline-flash.secondary { background: var(--ch-blue-tint); color: var(--ch-navy); border-color: var(--ch-border); }
.ch-inline-flash.danger { background: #FBE9EC; color: var(--ch-red); border-color: #F0C2CA; }

/* While an Accept/Dismiss is being saved in the background (static/scripts/app.js) */
.ch-card[aria-busy="true"] {
    opacity: 0.65;
    cursor: progress;
}

.ch-card:focus {
    outline: none;
}

/* Demographics: clearly separated items (divider + gap) with small labels, wrapping cleanly when narrow */
.ch-patient .ch-demographics {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0;
}

.ch-patient .ch-demographics > span {
    padding: 0 1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.35);
    white-space: nowrap;
}

.ch-patient .ch-demographics > span:first-child {
    border-left: 0;
    padding-left: 0.25rem;
}

.ch-patient .ch-demo-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.8;
    margin-right: 0.3rem;
}

/* Dismissed insights: dimmed but still readable (text ~4.7:1), with an icon on the pill so it isn't color alone */
.ch-card.is-dismissed {
    background: #F7F8FA;
    border-color: #DDE1E8;
    border-left-color: #C3C8D4;
}

.ch-card.is-dismissed h2,
.ch-card.is-dismissed .ch-meta,
.ch-card.is-dismissed .ch-upgrade,
.ch-card.is-dismissed .ch-addressed,
.ch-card.is-dismissed .ch-rationale,
.ch-card.is-dismissed .ch-rationale .ch-source,
.ch-card.is-dismissed .ch-rationale-label {
    color: #6B7183;
}

.ch-card.is-dismissed h2 code,
.ch-card.is-dismissed .ch-hcc {
    background: #E8EBF0;
    color: #6B7183;
}

.ch-card.is-dismissed .ch-rationale li::before {
    background: #B8BDC9;
}

.ch-status.rejected {
    background: #E8EBF0;
    color: #555B6E;
}