/* ===== CSS variable overrides ===== */
:root {
    --font-heading: 'Tungsten', sans-serif;
}

/* ===== Page wrapper ===== */
body {
    margin: 0;
}

.KJEWrapper {
    background: #ffffff;
    padding: 0;
    margin: 0;
}

.KJEWidthConstraint {
    max-width: 900px;
    text-align: left;
    margin: auto;
    background: #ffffff;
    padding: 15px;
}

/* ===== Calculator container ===== */
#KJEAllContent {
    font: normal 10pt arial, sans-serif;
    color: #000000;
}

.KJEGraphContainer {
    background-color: #ffffff !important;
    margin-top: 10px;
    border-left: 1px solid #e5e7eb !important;
    border-right: 1px solid #e5e7eb !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.KJEFontHeading {
    color: var(--eggplant-dark);
}

.KJEError {
    color: #FF0000;
}

/* ===== Calculator title ===== */
.KJETitle {
    font-size: 14pt;
    text-align: center;
    background-image: none;
    background-repeat: no-repeat;
    background-position: -8px -8px;
    background-size: 85px 85px;
}

#KJETitle {
    background-image: none !important;
    font-family: var(--font-heading);
    margin-top: 20px;
}

/* Title h1 — 30px Tungsten teal per Figma */
#KJETitleH1,
h1.KJEFontTitle {
    font-family: var(--font-heading) !important;
    font-size: 30px !important;
    color: #14363f !important;
    line-height: 36px !important;
    font-weight: 400 !important;
    text-align: center !important;
}

.KJEToggleTitle,
.KJEGraphTitle {
    font-family: var(--font-heading);
    font-weight: normal !important;
}

.KJESubTitle {
    font-weight: 400 !important;
}

/* ===== "*indicates required." note ===== */
#KJERequiredNote,
#KJEUpdateNotice {
    font-family: var(--font-body) !important;
    font-size: 12px !important;
    font-style: italic !important;
    color: #4b5563 !important;
}

/* Required asterisk — red */
span.KJERequired {
    color: #dc2626 !important;
}

/* ===== Buttons ===== */
.KJECommandButton {
    background-color: var(--indigo-light);
    border: none;
    border-radius: 9px;
    color: var(--eggplant-dark);
    font-weight: 400;
    font-size: 18px;
    width: 200px;
}

#KJECalculate {
    background-color: var(--indigo-light);
    border: 1px solid var(--eggplant);
    padding: 10px 16px !important;
    color: var(--eggplant);
    border-radius: 9px !important;
    font-size: 18px;
    font-weight: 400;
}

#KJEViewReport {
    background-color: #fff;
    border: 1px solid var(--eggplant);
    padding: 10px 16px !important;
    color: var(--eggplant);
    border-radius: 9px !important;
    font-size: 18px;
    font-weight: 400;
}

/* ===== Table ===== */
.KJECalculatorTable {
    border: none !important;
}

/* ===== Section card wrapper (.KJEDrop = parent of .KJEDropper + .KJEDroppee) ===== */
div.KJEDrop {
    background: transparent !important;
    margin-top: 10px;
}

/* ===== Section headers (input sections) ===== */
div.KJEDropper {
    background-color: #E5E7EB !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #d1d5db !important;
}

div.KJEDropper h2 {
    margin-bottom: 0 !important;
    color: #14363f !important;
    font-family: var(--font-body) !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 28px !important;
}

/* ===== Chart section header (lighter bg, centered title) ===== */
div.KJEGraphDropper {
    background-color: #f3f4f6 !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid #d1d5db !important;
}

div.KJEGraphDropper h2 {
    margin-bottom: 0 !important;
    color: #14363f !important;
    font-family: var(--font-body) !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 28px !important;
    text-align: center !important;
}

/* ===== Section content (expanded droppee) ===== */
.KJEDroppee {
    background-color: #f8fafc !important;
    border-left: 1px solid #e5e7eb !important;
    border-right: 1px solid #e5e7eb !important;
    border-bottom: 1px solid #e5e7eb !important;
}

/* Chart content area is white, not slate */
.KJEGraphDropper ~ .KJEDroppee,
div.KJEDrop:has(.KJEGraphDropper) .KJEDroppee {
    background-color: #ffffff !important;
}

/* ===== Hover/focus states ===== */
.KJEInputContainer {
    margin-top: 16px !important;
}

.KJEInputContainer:hover {
    background-color: #ffffff;
}

div.KJEDropper:hover {
    background-color: #E5E7EB;
}

div.KJEGraphDropper:hover {
    background-color: #f3f4f6;
}

div.KJEDropper:focus,
div.KJEGraphDropper:focus {
    outline: var(--indigo);
}

.KJEInputContainer .help:hover {
    color: #333333;
}

/* ===== Monthly payment summary (right bold text) ===== */
.KJERightBold {
    color: #14363f !important;
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 24px !important;
}

/* ===== Field labels ===== */
Label.KJEHelp {
    color: #14363f !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    margin-top: 0 !important;
}

/* ===== Input fields — value text ===== */
.KJEInputContainer input.KJEInputModern,
.KJEInputContainer select.KJEDropBoxModern {
    color: #14363f !important;
    font-family: var(--font-body) !important;
    font-size: 16px !important;
}

/* ===== Definition icon (?) ===== */
button.KJEDefinitionIcon {
    border-color: #14363F !important;
    color: #14363f !important;
    font-size: 12px !important;
}

/* ===== Radio buttons — custom teal styling ===== */
.KJEInputContainer input[type=radio],
#KJEAllContent input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    border: 1px solid #6b7280 !important;
    background: #ffffff !important;
    cursor: pointer;
    vertical-align: middle;
    position: relative;
    margin: 0 4px 0 0;
}

.KJEInputContainer input[type=radio]:checked,
#KJEAllContent input[type=radio]:checked {
    background: #14363f !important;
    border-color: transparent !important;
    box-shadow: inset 0 0 0 3px #14363f !important;
}

/* ===== Range sliders ===== */

/* WebKit track */
.KJEInputContainer input[type=range]::-webkit-slider-runnable-track,
.KJEInputContainer input[type=range]:active::-webkit-slider-runnable-track {
    height: 4px !important;
    background: #d1d5db !important;
    border-radius: 2px !important;
    border: none !important;
    background-image: linear-gradient(
        90deg,
        var(--eggplant) var(--webkitProgressPercent),
        #d1d5db var(--webkitProgressPercent)
    ) !important;
}

/* WebKit thumb */
.KJEInputContainer input[type=range]::-webkit-slider-thumb,
.KJEInputContainer input[type=range]:active::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    border: none !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 9px !important;
    background: var(--eggplant) !important;
    margin-top: -7px !important;
    box-shadow: none !important;
}

/* Firefox track */
.KJEInputContainer input[type=range]::-moz-range-track,
.KJEInputContainer input[type=range]:active::-moz-range-track {
    height: 4px !important;
    background: #d1d5db !important;
    border-radius: 2px !important;
    border: none !important;
}

/* Firefox thumb */
.KJEInputContainer input[type=range]::-moz-range-thumb,
.KJEInputContainer input[type=range]:active::-moz-range-thumb {
    border: none !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 9px !important;
    background: var(--eggplant) !important;
    box-shadow: none !important;
}

/* Slider scale tick labels — Inter per Figma */
div.KJESlider div.KJEScale {
    font-family: var(--font-body) !important;
    font-size: 10px !important;
    color: #14363F !important;
}

/* ===== Report styles ===== */
.KJEReportTitle {
    font-size: 14pt;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

.KJEReportTitleBlock {
    text-align: center;
    padding: 10px;
    margin-top: 5px;
    margin: 10px;
    border-width: 1px;
    border-style: solid;
    border-color: black;
}

/* ===== Report Table — Figma node 4054:6222 ===== */

/* Mobile: wide report/definition tables scroll horizontally rather than overflow the viewport.
 * (Rounded corners were reverted — they fought border-collapse and the per-context wrappers and
 * caused too many edge-case regressions to be worth it. Tables are square.) */
@media screen and (max-width: 767px) {
    div.KJEReportTableDiv:not(#KJEDefinitions *) {
        overflow-x: scroll;
        margin: 3px;
    }
    /* The "Current tax rate" definition table lives under #KJEDefinitions (excluded above). */
    #KJE-D-CURRENT_TAX_RATE div.KJEReportTableDiv {
        overflow-x: scroll;
    }
    /* "Child annual tuition" definition table — keep it at least 600px wide and let its wrapper
     * scroll horizontally on mobile. */
    #KJE-D-CHILD_ANNUAL_TUITION div.KJEReportTableDiv {
        overflow-x: scroll;
    }
    #KJE-D-CHILD_ANNUAL_TUITION div.KJEReportTableDiv table {
        min-width: 600px !important;
    }
    /* Tax-rate definition tables (all wide; scroll on mobile). */
    #KJE-D-FEDERAL_INCOME_TAX_RATES div.KJEReportTableDiv,
    #KJE-D-CONTRIB_TAX_RATE div.KJEReportTableDiv,
    #KJE-D-TAX_RATE div.KJEReportTableDiv,
    #KJE-D-LINE_6C_DEPENDENTS_QUALIFYING_FOR_CHILD_TAX_CREDIT div.KJEReportTableDiv {
        overflow-x: scroll;
    }
    #KJE-D-LINE_6C_DEPENDENTS_QUALIFYING_FOR_CHILD_TAX_CREDIT div.KJEReportTableDiv table {
        min-width: 600px !important;
    }
    /* First definition block's table — keep it >= 600px and scroll its wrapper on mobile. */
    #KJEDefinitionsDL > :first-child div.KJEReportTableDiv {
        overflow-x: scroll;
    }
    #KJEDefinitionsDL > :first-child div.KJEReportTableDiv table {
        min-width: 600px !important;
    }
}

#KJE-D-CHILD_ANNUAL_TUITION tr.KJEFooterRow th {
    background-color: #6aa0ae !important;
}

/* Table: border */
table.KJEReportTable {
    border: 2px solid #14363f !important;
    width: 100% !important;
    border-collapse: collapse !important;
}

/* Caption already styled in KJE.css */
table.KJEReportTable caption.KJEHeaderRow {
    caption-side: top !important;
    height: fit-content !important;
}

@media screen and (max-width: 397px) {
    table.KJEReportTable caption.KJEHeaderRow {
        height: 58px !important;
    }
}

/* Column header row — #6aa0ae with teal bottom border */
table.KJEReportTable tr.KJEHeaderRow {
    background-color: #6aa0ae !important;
    border-bottom: 2px solid #14363f !important;
    text-align: left !important;
    border-top: none !important;
}

table.KJEReportTable tr.KJEHeaderRow th,
table.KJEReportTable tr.KJEHeaderRow td {
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    padding: 9px 16px !important;
    letter-spacing: -0.31px !important;
    text-align: left !important;
    background-color: transparent !important;
    border-bottom: none !important;
}

/* Even body rows — light ecru */
table.KJEReportTable tr.KJEEvenRow {
    background-color: #f7f5e6 !important;
    border-bottom: 1px solid #17202a !important;
    text-align: left !important;
}

/* Odd body rows — white */
table.KJEReportTable tr.KJEOddRow {
    background-color: #ffffff !important;
    border-bottom: 1px solid #17202a !important;
    text-align: left !important;
}

/* All body cells */
table.KJEReportTable tr.KJEEvenRow td,
table.KJEReportTable tr.KJEEvenRow th,
table.KJEReportTable tr.KJEOddRow td,
table.KJEReportTable tr.KJEOddRow th {
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #000000 !important;
    padding: 9px 16px !important;
    letter-spacing: -0.31px !important;
    text-align: left !important;
}

/* Label/first-column cells — teal right divider, match row bg */
table.KJEReportTable tr.KJEEvenRow td.KJELabel,
table.KJEReportTable tr.KJEEvenRow th.KJELabel,
table.KJEReportTable tr.KJEOddRow td.KJELabel,
table.KJEReportTable tr.KJEOddRow th.KJELabel,
table.KJEReportTable tr.KJEHeaderRow th.KJELabel,
table.KJEReportTable tr.KJEHeaderRow td.KJELabel {
    border-right: 1px solid #14363f !important;
    background: inherit !important;
    font-weight: inherit !important;
}

/* Cells with explicit right border class */
table.KJEReportTable td.KJECellBorder,
table.KJEReportTable th.KJECellBorder {
    border-right-color: #14363f !important;
    border-right-width: 1px !important;
}

/* Footer strong/centered cell — teal fill */
table.KJEReportTable tfoot .KJECellStrong.KJECenter {
    background-color: #6aa0ae !important;
}

/* Remove all cell hover highlight */
table.KJEReportTable td.KJECell:hover,
table.KJEReportTable td.KJECellStrong:hover,
table.KJEReportTable .KJELabel:hover,
table.KJEReportTable tr.KJEEvenRow:hover td.KJELabel,
table.KJEReportTable tr.KJEOddRow:hover td.KJELabel {
    color: inherit !important;
    background-color: inherit !important;
}

table.KJEReportTable .KJELabel:hover,
table.KJEReportTable td.KJECell:hover {
    color: #000000 !important;
}

@media screen and (max-width: 461px) {
    div#KJECommandButtons {
        display: flex;
    }
}

tr.KJEScheduleEvenRow {
    background: #f7f5e6 !important;
}

tr.KJEScheduleHeaderRow {
    background: #6aa0ae !important;
}

tr.KJEScheduleHeaderRow {
    background: #14363F !important;
}

/* =========================================================================
 * 2026 KJE engine compatibility (PERKINS-1442)
 * The updated (licensed) KJE.js is a newer build that renamed/restructured
 * some of the DOM the brand styles above target, and adds chrome the previous
 * engine didn't. These rules bridge the gap so the new engine renders with the
 * established brand layout on both the input and View Report screens.
 * ========================================================================= */

/* The engine renamed the calculator-table class from ".KJECalculatorTable" to
 * ".CalculatorTable" (plus a state suffix, e.g. KJECalculatorTableIsFixed /
 * ...ReportView), so the original border reset (line ~130) no longer matched
 * and a 2px border box reappeared around the calculator. */
.CalculatorTable {
    border: none !important;
}

/* The newer fragment no longer includes ".KJEWrapper" / ".KJEWidthConstraint",
 * so the command-button bar (Calculate / View Report / Print / Hide Report)
 * spanned the full page width and sat left of the centered calculator body.
 * Re-apply the width constraint to #KJEAllContent (which is present); 940px
 * matches the engine's own max content width so nothing is clipped. */
#KJEAllContent {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
}

/* Hide the new "additional functions" hamburger menu + its (?) popup, which the
 * previous engine did not render (removed per QA). */
#KJEMenu,
#KJEMenuContainer {
    display: none !important;
}

/* Center the command buttons (Calculate / View Report / Print / Hide Report)
 * over the calculator body. The engine gives the sticky bar (#KJECalcTop) an
 * inline width:1240px that overflows the constrained body; cap it to the
 * calculator width so centering lines up with the box (max-width overrides the
 * inline width). Applies on both the input and report screens. */
#KJECalcTop,
#KJECommandButtons {
    max-width: 940px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#KJECommandButtons {
    text-align: center !important;
}