/* =============================================================================
   Consultation Summary  -  Vision & Prescription / Examination / Assessments
   -----------------------------------------------------------------------------
   Presentation layer for the three Consultation Summary accordions in
   templates/UsNewConsultation/NewDoctorWorkUpParent.html.

   Every selector below is scoped to `.csum__wrap--` (or to one of the component
   roots that only exists inside it), so nothing outside the new Consultation
   Summary markup can be affected by this file.

   Values are taken from the approved prototype (V&P,EXAM,ASSESSMENT.html).

   ARCHITECTURE - one class, one property
   --------------------------------------
   All of the styling is composed from single-property utility classes on the
   markup (d__f--, fd__c--, g__10--, px__12--, fs__11--, fw__8--, tc__1D5558--,
   bg__FFFFFF--n, br__10--, ta__c-- ...) taken from assets/frameworks and
   assets/ui-kit; 525 of the 552 declarations this file used to carry now live
   there. Anything the framework did not already provide was added there as a
   new one-property class - never here.

   NO class in this file declares more than one property. What is left is only
   what a utility class cannot express:

     1. the --csum-* design tokens (custom properties) on .csum__wrap--;
     2. complex / state selectors - combinators, :hover, :last-child, modifier
        compounds, and the uib-accordion chrome (.panel-heading/.panel-body),
        whose elements this template does not author and cannot class;
     3. the max-width breakpoint overrides. The framework's responsive variants
        are min-width (sm:/md:/lg:), so these cannot be expressed with them;
     4. seventeen single-property rules that must keep this stylesheet's late
        cascade position, because a rule in category 2 or 3 is meant to override
        them and an earlier-loading utility would lose that contest.

   Every change here was gated by a differential cascade simulation over the
   2382 rendered nodes at 1920/1366/1200/991/767/480px: computed styles are
   identical to the pre-refactor design.

   Re-use notes
   ------------
   * `table__style--17` (assets/frameworks/23-custom.css) was evaluated first for
     the measurement tables. It does not match the prototype: it forces
     `table-layout:fixed` (the prototype scrolls horizontally on
     `min-width:max-content`), `border-spacing:0 1px`, centred 700-weight #9ca3af
     body text and 4px/3px cell padding, and it paints its own 1.5px #d1d5db
     outline plus 10px radius which would double up with the set wrapper the
     prototype draws. Re-using it would mean overriding every one of its
     declarations, so the scoped `.csum__tbl--` below is used instead.
   * .fs__9--/.fs__10-- are flex-shrink in 10-flex.css AND font-size in
     14-typography.css, and .lh__1-- is line-height:1px - so the font sizes and
     the unitless line-height use .fs__9px--/.fs__10px--/.lh__1-0-- instead.
   * A `--n` suffix on a utility (bg__FFFFFF--n, tc__111827--n ...) is the
     non-important twin of an existing !important utility. The declarations they
     replace were non-important, so the twin keeps the original cascade weight
     and lets the rules below still override them.
   ============================================================================= */

.csum__wrap-- {
    --csum-brand: #1D5558;
    --csum-brand-08: rgba(29, 85, 88, .08);
    --csum-brand-10: rgba(29, 85, 88, .10);
    --csum-brand-15: rgba(29, 85, 88, .15);
    --csum-brand-lt: #E8F2F2;
    --csum-brand-bd: #C8DEDE;
    --csum-surface: #FFFFFF;
    --csum-surface-alt: #FAFAFA;
    --csum-surface-head: #F8F9FA;
    --csum-surface-sub: #F3F4F6;
    --csum-shell: #F0F2F5;
    --csum-border: #E5E7EB;
    --csum-border-2: #D1D5DB;
    --csum-divider: #F3F4F6;
    --csum-text: #111827;
    --csum-text-2: #4B5563;
    --csum-text-3: #9CA3AF;
    --csum-note: #656565;
    --csum-od-bg: #DBEAFE;
    --csum-od-tx: #1D4ED8;
    --csum-od-bd: #93C5FD;
    --csum-os-bg: #DCFCE7;
    --csum-os-tx: #15803D;
    --csum-ou-bg: #FDE8D0;
    --csum-ou-tx: #B45309;
    --csum-gen-bg: #E5E7EB;
    --csum-gen-tx: #374151;
}

.csum__accordion-- > .panel-group {
    margin-bottom: 0;
}

    .csum__accordion-- > .panel-group > .panel {
        background: var(--csum-surface);
        border: 1.5px solid var(--csum-border);
        border-radius: 8px;
        box-shadow: none;
        overflow: hidden;
    }

        .csum__accordion-- > .panel-group > .panel + .panel {
            margin-top: 0;
        }

        .csum__accordion-- > .panel-group > .panel > .panel-heading {
            min-height: 36px;
            padding: 0 16px;
            background: var(--csum-surface);
            border: none;
            border-radius: 0;
        }

        .csum__accordion-- > .panel-group > .panel.panel-open > .panel-heading {
            border-bottom: 1.5px solid var(--csum-border);
        }

        /* uib-accordion transcludes the heading into
   .panel-heading > h4.panel-title > a.accordion-toggle > span, so each of those
   has to become a full-width block for the flex header row to lay out. */
        .csum__accordion-- > .panel-group > .panel > .panel-heading .panel-title,
        .csum__accordion-- > .panel-group > .panel > .panel-heading .panel-title > a,
        .csum__accordion-- > .panel-group > .panel > .panel-heading .panel-title > a > span {
            display: block;
            width: 100%;
            margin: 0;
            padding: 0;
            color: inherit;
            font-size: inherit;
            text-decoration: none;
        }

            .csum__accordion-- > .panel-group > .panel > .panel-heading .panel-title > a:hover,
            .csum__accordion-- > .panel-group > .panel > .panel-heading .panel-title > a:focus,
            .csum__accordion-- > .panel-group > .panel > .panel-heading .panel-title > a:active {
                color: inherit;
                text-decoration: none;
                outline: none;
            }

        .csum__accordion-- > .panel-group > .panel > .panel-collapse > .panel-body {
            min-height: 100px;
            padding: 0;
            background: var(--csum-surface);
            border: none;
            border-radius: 0 0 8px 8px;
        }

        /* Summary accordions moved onto this chrome from .accordian__style--7
   (Chief Complaints, Orders, Medical Rx ...) have no padded inner wrapper like
   .csum__list--, so the inset the old panel padding gave them goes on the body. */
        .csum__accordion--.csum__accordion--inset > .panel-group > .panel > .panel-collapse > .panel-body {
            padding: 10px 12px;
        }

/* The header icons render through the app's svg-icon directive (the heading is
   transcluded/cloned by uib-accordion, which hand-written inline SVG does not
   survive). Pin the box here so the section icon is sized and aligned even if
   the directive's width/height attributes are ever overridden. */
.csum__sec--head > .csum__icon-- {
    width: 20px;
    height: 20px;
}

.csum__accordion-- > .panel-group > .panel.panel-open .csum__chev-- {
    transform: rotate(0deg);
}

.csum__sec--edit:hover,
.csum__sec--edit:focus {
    background: var(--csum-shell);
    color: var(--csum-text-2);
    outline: none;
}

/* -----------------------------------------------------------------------------
   2. Card list and card shell
   Prototype .vp-sum-wrap : padding 10px 12px, column, gap 10px
   Prototype .vp-sum-card : white, 1.5px #D1D5DB, radius 10px, clipped
   -------------------------------------------------------------------------- */
.csum__list-- {
    padding: 10px 12px;
}

.csum__card--body {
    padding: 8px 8px;
}

    .csum__card--body.csum__card--flush {
        padding: 0 0 4px;
    }

/* Padding reset for the grid/body components above. The framework's `p__0--`
   utility carries no !important and loads before this file, so it loses the
   specificity tie against those component rules - this scoped modifier is used
   on the markup instead. */
.csum__flush--p {
    padding: 0 !important;
}

/* Measurement set - prototype .vp-sum-set */
.csum__set-- {
    border: 1.5px solid var(--csum-border);
}

    .csum__set--:last-child {
        margin-bottom: 0;
    }

.csum__scroll--x > .csum__tbl-- {
    min-width: max-content;
}

.csum__set--notes b {
    font-weight: 700;
    color: var(--csum-text-2);
}

.csum__set--meta {
    background: var(--csum-surface-alt);
}

    /* "Added by" strip that sits directly on a flush card body (Misc Tests,
   Visual Field) rather than inside a bordered set. */
    .csum__set--meta.csum__meta--inset {
        margin: 0 8px;
        background: transparent;
        border-top: none;
    }

/* Accent for the Assessment detail badge - the only prototype accent with no
   tc__<HEX>-- utility in the framework. Kept scoped so it cannot leak. */
.csum__wrap-- .csum__ic--0891B2 {
    color: #0891B2;
}

.csum__tbl-- > thead > tr > th {
    padding: 5px 8px;
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--csum-text-3);
    background: var(--csum-surface-head);
    border: none;
    border-bottom: 1px solid var(--csum-divider);
    white-space: nowrap;
    vertical-align: middle;
}

.csum__tbl-- > tbody > tr > td {
    padding: 5px 8px;
    text-align: left;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--csum-text);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--csum-divider);
    white-space: nowrap;
    vertical-align: middle;
}

.csum__tbl-- > tbody > tr:last-child > td {
    border-bottom: none;
}

/* Row-label cell (Pachy 1 / Pachy 2 ...) */
.csum__tbl-- td.csum__rowlbl-- {
    font-weight: 700;
    color: var(--csum-text-2);
}

/* Average row - the prototype tints it #ECFDF5 and bolds the values */
.csum__tbl-- > tbody > tr.csum__row--avg > td {
    background: #ECFDF5;
    font-weight: 800;
}

.csum__pam--eye.od {
    color: var(--csum-od-tx);
}

.csum__pam--eye.os {
    color: var(--csum-os-tx);
}

.csum__mini-- {
    max-width: calc(50% - 10px);
}

    .csum__mini-- .csum__set--notes {
        border-top: 1px solid var(--csum-divider);
    }

.csum__chart--note b {
    font-weight: 700;
    color: var(--csum-note);
}

.csum__seg--colhd.od {
    background: #EFF6FF;
    color: var(--csum-od-tx);
    border-right: 1px solid var(--csum-od-bd);
}

.csum__seg--colhd.os {
    background: #FEFCE8;
    color: #92400E;
}

.csum__seg--lbl:first-child {
    border-right: 1.5px solid var(--csum-border-2);
}

.csum__seg--cell {
    padding: 10px 14px 12px;
}

    .csum__seg--cell:last-child {
        border-right: none;
    }

.csum__find--:last-child {
    margin-bottom: 0;
}

.csum__find--note strong {
    font-weight: 700;
    color: var(--csum-note);
}

.csum__grp--body {
    padding: 12px;
}

.csum__test--:last-child {
    margin-bottom: 0;
}

/* Side-by-side test cards (Squint / Binocular). The pair wrapper is a direct
   child of .csum__grp--body; the nested .csum__eyecols-- inside a card is not,
   so only the pair rows are affected here.
   - the wrapper carries the 12px rhythm the sub-cards use, so the row does not
     collide with the sub-section that follows it;
   - the cards inside drop their own bottom margin, which both removes the
     double gap and lets the grid stretch them to one height so their bottom
     borders line up. */
.csum__grp--body > .csum__eyecols-- {
    margin-bottom: 12px;
}

    .csum__grp--body > .csum__eyecols--:last-child {
        margin-bottom: 0;
    }

    .csum__grp--body > .csum__eyecols-- > .csum__test-- {
        margin-bottom: 0;
    }

.csum__eyebar--lbl.od {
    background: #EFF6FF;
    color: var(--csum-od-tx);
}

.csum__eyebar--lbl.os {
    background: #EAFAF0;
    color: var(--csum-os-tx);
}

.csum__eyecols-- {
    padding: 10px 12px;
}

.csum__eyecols--3,
.csum__eyebar--3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.csum__kvgrid-- {
    grid-template-columns: 1fr 1fr;
}

.csum__kv-- b {
    margin-right: 3px;
    font-weight: 700;
    color: var(--csum-text-2);
}

.csum__chipcell-- b {
    font-weight: 700;
    color: var(--csum-text);
}

.csum__body--simple {
    padding: 10px 12px;
}

    .csum__body--simple .csum__kv-- {
        margin-bottom: 2px;
    }

.csum__test--note b {
    font-weight: 700;
    color: var(--csum-note);
}

.csum__tbl--ex > thead > tr > th {
    padding: 6px 10px;
    text-align: left;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--csum-text-3);
    background: var(--csum-surface-head);
    border: none;
    border-bottom: 1px solid var(--csum-divider);
    white-space: nowrap;
}

.csum__tbl--ex > tbody > tr > td {
    padding: 6px 10px;
    font-size: 11.5px;
    color: var(--csum-text);
    border: none;
    border-bottom: 1px solid var(--csum-divider);
    white-space: nowrap;
}

    .csum__tbl--ex > tbody > tr > td.csum__tbl--exsec {
        padding: 5px 10px;
        font-size: 10.5px;
        font-weight: 800;
        color: var(--csum-os-tx);
        background: #EAFAF0;
    }

.csum__gonio--bar.od {
    background: #EFF6FF;
    color: var(--csum-od-tx);
}

.csum__gonio--bar.os {
    background: #EAFAF0;
    color: var(--csum-os-tx);
}

/* -----------------------------------------------------------------------------
   7. Assessments - metric bar
   -------------------------------------------------------------------------- */
.csum__asum-- {
    padding: 12px 14px 16px;
}

.csum__metric--badge.od {
    color: var(--csum-od-tx);
}

.csum__metric--badge.os {
    color: var(--csum-os-tx);
}

.csum__atabs-- {
    padding: 0 14px;
}

    .csum__atabs-- > li {
        flex-shrink: 0;
    }

        .csum__atabs-- > li > a {
            display: block;
            padding: 10px 12px;
            font-size: 12px;
            font-weight: 600;
            color: var(--csum-text-3);
            white-space: nowrap;
            border-bottom: 2px solid transparent;
            text-decoration: none;
        }

            .csum__atabs-- > li > a:hover,
            .csum__atabs-- > li > a:focus,
            .csum__atabs-- > li.active > a {
                color: var(--csum-brand);
                text-decoration: none;
            }

        .csum__atabs-- > li.active > a {
            font-weight: 800;
            border-bottom-color: var(--csum-brand);
        }

/* The Severity column is right-aligned in the prototype; the framework's
   `ta__r--` utility on that <th> cannot out-specify the rule below, so the
   alignment is honoured here. */
.csum__atbl-- > thead > tr > th.ta__r-- {
    text-align: right;
}

.csum__atbl-- > thead > tr > th {
    padding: 9px 14px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .2px;
    color: var(--csum-brand);
    background: var(--csum-brand-08);
    border: none;
    border-bottom: 1.5px solid var(--csum-border-2);
    white-space: nowrap;
    vertical-align: middle;
}

.csum__atbl-- > tbody > tr > td {
    padding: 11px 14px;
    font-size: 12.5px;
    color: var(--csum-text);
    background: var(--csum-surface);
    border: none;
    border-bottom: 1px solid var(--csum-divider);
    vertical-align: top;
}

.csum__arow--:hover > td {
    background: #FAFBFC;
}

.csum__arow--.expanded > td,
.csum__arow--.expanded:hover > td {
    background: var(--csum-brand-10);
    border-bottom: none;
}

.csum__arow--.expanded .csum__achev-- {
    transform: rotate(90deg);
}

.csum__apri-- {
    color: var(--csum-text-2);
}

.csum__asev-- {
    color: var(--csum-text-2);
}

.csum__atbl-- > tbody > tr > td.csum__adetail--cell {
    padding: 0;
    background: var(--csum-brand-10);
    border-bottom: 1px solid var(--csum-divider);
}

.csum__adetail-- {
    padding: 16px 20px 18px 42px;
}

.csum__adetail--sec:last-child {
    margin-bottom: 0;
}

.csum__adetail--body p {
    margin: 0 0 8px;
}

    .csum__adetail--body p:last-child {
        margin-bottom: 0;
    }

/* -----------------------------------------------------------------------------
   10. Responsive - tablet and below
   -------------------------------------------------------------------------- */
@media (max-width: 1366px) {
    .csum__list-- {
        padding: 8px;
    }

    .csum__segment--,
    .csum__grp-- {
        margin: 8px;
    }

    .csum__asum-- {
        padding: 10px;
    }

    .csum__atabs-- {
        padding: 0 8px;
    }

    .csum__atbl-- > thead > tr > th,
    .csum__atbl-- > tbody > tr > td {
        padding-left: 10px;
        padding-right: 10px;
    }

    .csum__adetail-- {
        padding: 12px 14px 14px 28px;
    }

    .csum__seg--cell {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 991px) {
    .csum__mini-- {
        flex-basis: 100%;
        max-width: 100%;
    }

    .csum__eyecols--,
    .csum__eyebar--,
    .csum__eyecols--3,
    .csum__eyebar--3 {
        grid-template-columns: 1fr;
    }

    .csum__metrics-- {
        grid-gap: 14px;
        gap: 14px;
    }

    .csum__grp--body {
        padding: 10px;
    }
}

@media (max-width: 767px) {
    .csum__list-- {
        padding: 8px 6px;
    }

    .csum__segment--,
    .csum__grp-- {
        margin: 8px 6px;
    }

    .csum__seg--colrow,
    .csum__seg--lblrow,
    .csum__seg--row {
        grid-template-columns: 1fr;
    }

    .csum__seg--colhd.od {
        border-right: none;
    }

    .csum__seg--lbl:first-child {
        border-right: none;
    }

    .csum__seg--cell {
        border-right: none;
        border-bottom: 1.5px solid var(--csum-border-2);
    }

    .csum__seg--row > .csum__seg--cell:last-child {
        border-bottom: none;
    }

    .csum__kvgrid-- {
        grid-template-columns: 1fr;
    }

    .csum__chart--row {
        grid-gap: 14px;
        gap: 14px;
    }

    .csum__adetail-- {
        padding: 12px;
    }

    .csum__accordion-- > .panel-group > .panel > .panel-heading {
        padding: 0 12px;
    }
}