@font-face {
    font-family: "RobotoCondensed";
    src: url("../fonts/RobotoCondensed-Regular.woff") format('woff');
}

body {
    --reportbackground: #757575;
    --equationno: #EEE;
    --tocborder: 1px dotted #000;
    --tableheaderborder: 2px solid #333;
}

body.dark {
    --reportbackground: #222222;
    --equationnoview: #444;
    --tocborder: 1px dotted #888888;
    --tableheaderborder: 2px solid #888;
}

.report {
    background-color: var(--reportbackground);
    font: 13px normal, RobotoCondensed;
    color: #000;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    --col1-left: 2.4in;
    --col2-left: 5.6in;
    --row1-upper-top: 0.4in;
    --row1-lower-top: 0.52in;
    --row2-upper-top: 0.74in;
    --row2-lower-top: 0.85in;

    /* Palette used by the Document Information page (page 2) only.
       Header, footer, TOC, chapter/section titles keep the legacy style
       per the screenshot the user confirmed as the target. */
    --report-navy:   #1a2a44;
    --report-label:  #8892a6;
    --report-border: #c8ccd1;
    --report-mono:   'Consolas', 'Courier New', monospace;
}

body.dark .viewing.report-view .report-body,
body.dark .viewing.report-view .page {
    background-color: var(--reportbackground);
}

body.dark .viewing.report-view {
    color: var(--fontcolor);
}

body.dark .viewing.report-view .chapter-title {
    color: var(--fontcolor);
}

.report .page {
    background-color: #FFF;
    margin: 16px auto;
    height: 9.5in;
    width: 7.5in;
    padding: 1in 0.5in 0.5in 0.5in;
    overflow: hidden;
    position: relative;
}

.report-body {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.report-scroll {
    flex: 1;
    overflow: auto;
}

.report-auth-banner {
    background: var(--buttonactivecolor);
    color: #FFF;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    text-align: center;
    flex: 0 0 auto;
}

.report-auth-banner .auth-link {
    /* color: var(--buttonactivecolor);
    text-decoration: underline;
    cursor: pointer;
    font-weight: 700; */
}

/* ----- Cover Page ----- */
.report .page.cover-page {
    padding: 0 !important;
    position: relative;
}

.cover-page .page-inner {
    padding: 0.5in 0.5in 0 0.5in;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Top: logo + company name/details side by side */
.cover-top {
    display: flex;
    align-items: center;
    gap: 18px;
}

.cover-logo-box {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

/* Win against the generic `.report img` rule (padding/margin/max-width
   produces a negative max-width inside the 90×90 box → image hidden). */
.report .cover-page .cover-logo-box img {
    width: 72px !important;
    height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
    padding: 0 !important;
    margin: 0 !important;
    object-fit: contain;
    display: block;
}

.cover-company {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cover-company-name {
    font-size: 22px;
    font-weight: 700;
    color: #1a2a44;
    line-height: 1.2;
}

.cover-company-details {
    font-size: 14px;
    color: #555;
    margin-top: 4px;
}

/* Navy line that separates the header from the model area */
.cover-divider {
    border-bottom: 2px solid #1a2a44;
    margin: 12px 0 0.35in 0;
}

/* Wrapper for the model canvas - no border, no background per user's
   request. Canvas inside is sized explicitly (5in tall, 100% wide) by
   the renderer; this div is kept only as a positional anchor. */
.cover-model-frame {
    margin-top: 0.25in;
}

.cover-report-title {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin-top: 0.4in;
    color: #000;
}

.cover-info-list {
    text-align: center;
    font-size: 18px;
    line-height: 1.55;
    margin-top: 0.15in;
    color: #000;
}

.cover-info-line {
    padding: 1px 0;
}

/* Dark blue bar across the bottom of the cover page. Left = Date,
   Right = Generated by. */
.cover-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #1a2a44;
    color: #fff;
    padding: 14px 0.5in;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    box-sizing: border-box;
}

.cover-footer .label {
    display: block;
    font-size: 11px;
    color: #b8c0d0;
    margin-bottom: 2px;
    font-weight: 400;
}

.cover-footer-left {
    font-size: 14px;
}

.cover-footer-right {
    font-size: 14px;
    text-align: right;
}

/* When the app supplies no model image (e.g. Frame Analysis), collapse the
   empty model frame and let `margin: auto` in the flex column push the
   title + info block to the vertical centre between the divider and the
   absolute-positioned footer at the bottom. */
.cover-page.cover-no-model .cover-model-frame {
    display: none;
}

.cover-page.cover-no-model .cover-report-title {
    margin-top: auto;
}

.cover-page.cover-no-model .cover-info-list {
    margin-bottom: auto;
    padding-bottom: 0.6in;
}

.viewing .toc-page {
    display: none;
}

.toc-item {
    cursor: pointer;
    position: relative;
    margin: 0 0.5in;
}

.toc-item.level-1 {
    border-bottom: var(--tocborder);
    font-size: 16px;
    font-weight: bold;
    padding: 4px 0;
    margin-top: 16px;
}

.toc-item.level-2 {
    border-bottom: var(--tocborder);
    margin-left: 0.75in;
    padding: 4px 0;
}

.toc-item.level-3 {
    border-bottom: var(--tocborder);
    margin-left: 1in;
    padding: 4px 0;
}

.toc-item .prefix {
    font-weight: bold;
    margin-right: 12px;
}

.toc-page {
    font-size: 12px;
    position: absolute;
    top: 3px;
    right: 0;
}

.page-inner {
    height: 100%;
}

.page-header {
    border-collapse: collapse;
    border: 1px solid #000;
    margin-bottom: 0.25in;
    width: 100%;
}

.page-header td {
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    padding: 4px 12px;
}

.page-header td:nth-child(2) {
    width: 3in;
}

.page-header td:nth-child(3) {
    width: 3in;
}

.page-header td:first-child {}

.page-header td.logo {
    border-left: 1px solid #000;
}

.page-header td.logo img {
    border: none;
    display: block;
    width: 1in;
    margin: 0 auto;
    max-width: unset;
    text-align: center;
    padding: 0;
    height: 64px;
    width: auto;
}

.page-header .label {
    font-weight: bold;
    margin-right: 8px;
}

/* ----- Page Footer ----- 3-cell row: Date | N/total | Eagle Eye: app */
.page-footer {
    position: absolute !important;
    left: 0.5in;
    right: 0.5in;
    bottom: 0.3in;
    border-collapse: collapse;
    width: calc(100% - 1in);
    table-layout: fixed;
}

.page-footer td {
    padding: 6px 0 0 0;
    font-size: 11px;
    color: #000;
    border: none;
    border-top: 1px solid #ccc;
}

.page-footer .footer-left   { text-align: left;   width: 33%; }
.page-footer .footer-center { text-align: center; width: 34%; font-weight: 600; }
.page-footer .footer-right  { text-align: right;  width: 33%; font-weight: 600; }

.page-footer .label {
    color: #666;
    margin-right: 8px;
    font-weight: 400;
}

.chapter-title {
    column-span: all;
    font-size: 32px;
    font-weight: bold;
    margin: 0 0 32px 0;
    color: #708090;
    text-align: center;
}

/* ----- Document Information page (rendered after Cover Page) -----
   Modern look distinct from the legacy report style: left-aligned navy
   uppercase letter-spaced title with full-width underline, light grey
   bordered grid, small uppercase grey labels above monospace navy values.
   This is the *only* report page that uses the navy palette; the rest of
   the report keeps the legacy slate-grey / sans-serif look. */
.doc-info-title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--report-navy);
    border-bottom: 2px solid var(--report-navy);
    padding-bottom: 10px;
    margin: 0.3in 0 0.35in 0;
    text-align: left;
}

.doc-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--report-border);
    border-radius: 2px;
}

.doc-info-cell {
    padding: 12px 16px;
    border-right: 1px solid var(--report-border);
    border-bottom: 1px solid var(--report-border);
    min-height: 56px;
    background: #fff;
    display: block;
}

/* Remove the trailing right border on the right-column cells */
.doc-info-cell:nth-child(2n) {
    border-right: none;
}

/* Remove the trailing bottom border on the last row */
.doc-info-cell:nth-last-child(-n+2) {
    border-bottom: none;
}

.doc-info-label {
    display: block;
    font-size: 11px;
    font-weight: bold;
    color: #000;
    margin: 0 0 4px 0;
    font-family: 'RobotoCondensed', sans-serif;
}

.doc-info-label::after {
    content: none;
}

.doc-info-value {
    display: block;
    font-size: 13px;
    color: #000;
    font-family: 'RobotoCondensed', sans-serif;
    line-height: 1.4;
}

.chapter-description {
    display: none;
    margin: 0;
    padding: 0;
    text-align: center;
    margin-bottom: 0.25in;
}

.section-title {
    font-size: 16px;
    font-weight: bold;
    margin: 32px 0 8px 0;
}

.section-title.level-1 {
    font-size: 13px;
    margin: 16px 0 0 0.25in;
}

.section-description {
    display: none;
}

.equation {
    border-bottom: var(--border);
    position: relative;
    padding: 16px 0;
    margin-bottom: 16px;
}

.equation-id {
    background-color: var(--equationno);
    display: block;
    font-weight: 600;
    vertical-align: top;
    position: absolute;
    padding: 2px 8px;
    vertical-align: middle;
    right: 0;
    top: 16px;
    white-space: nowrap;
}

.viewing.report-view .equation-id {
    background-color: var(--equationnoview);
}

.equation-id div div {
    display: inline-block;
}

.equation-title {
    margin-bottom: 8px;
}

.equation-full .equation-title {
    margin-bottom: 16px;
}

.equation-break .equation-id {
    display: inline-block;
    left: 0;
    width: unset !important;
}

.equation-raw {
    vertical-align: top;
    width: 50%;
}

.equation-full .equation-raw {
    width: 100%;
}


.equation-raw mjx-container {
    display: inline-flex !important;
}

.equation-parameters {
    margin: 16px 0;
    padding-bottom: 16px;
    width: 50%;
}

.equation-graph-button {
    /* display: none !important; */
    padding: 0 !important;
    position: absolute;
    width: 32px;
    right: 0;
}

.equation-graph-button img {
    padding: 0 !important;
    height: 20px !important;
    width: 20px !important;
    max-width: unset !important;
}

tr>.equation-parameters:first-child {
    padding-top: 32px;
}

.equation-parameter mjx-container {
    display: inline-flex !important;
    min-width: 20px;
    margin: 4px !important
}

.equation-value {
    border-radius: 4px;
    font-weight: 600;
    margin-top: 4px;
}

.report .toolbar {
    padding-left: 8px;
}

.report .header,
.report .paragraph,
.report .parameter,
.report img,
.report .calc-remark,
.table,
.equation {
    margin-left: 0.25in;
}

.report .report-parameter-value {
    font-weight: 600;
}

.report .header {
    font-size: 13px;
    font-weight: bold;
    padding: 16px 0 8px 0;
}

.equation table {
    border-collapse: collapse;
    width: 100%;
}

.report img {
    padding-bottom: 0.25in;
    padding-top: 0.25in;
    max-width: calc(100% - 1in);
}

.report .paragraph {
    padding-bottom: 1em;
}

.report .calc-remark {
    align-items: center;
    background-color: #EEE;
    border-left: 4px solid #888;
    color: #000;
    font-size: 12px;
    display: flex;
    text-align: left;
    font-weight: normal;
    padding: 2px 8px;
    margin-bottom: 16px;
    position: relative;
}

    .report .calc-remark .remark {
        border-radius: 8px;
        font-weight: bold;
        right: 0;
        top: 9px;
        padding: 0 8px;
        display: block;
        text-align: right;
        flex-grow: 1;
    }

.report .calc-remark .remark.passed {
    color: #00A;
}

.report .calc-remark .remark.failed {
    color: #A00;
}

    .report .calc-remark .MathJax {
        text-align: left;
        margin: 8px 0;
    }

    .report table.table {
        border-collapse: collapse;
        /* border: 1px solid #333; */
        width: calc(100% - 0.25in);
    }

.report table.table.half {
    width: 50%;
}

.report table.table th {
    border-bottom: var(--tableheaderborder);
    padding: 4px 0;
}

.report table.table td {
    border-bottom: 1px dashed #888;
    padding: 2px 0;
    text-align: center;
}

.report .report-parameter-text {
    display: inline-block;
    min-width: 2in;
}

.report .report-parameter-value {
    display: inline-block;
}

.report canvas {
    position: relative;
}

mjx-container[jax="CHTML"][display="true"] {
    display: block;
    text-align: center;
    margin: 0 !important;
    padding: 4px 0px !important;
}

.equation-value mjx-container[jax="CHTML"][display="true"] {
    margin-right: 4px !important;
}

.equation-parameter mjx-container {
    min-width: 48px;
}

.chapter-title .prefix,
.section-title .prefix {
    margin-right: 8px;
}

.cell-color {
    display: block;
    height: 16px;
    width: 16px;
    margin: 0 auto;
    text-align: center;
}

table .report-value-unint {
    display: none;
}

@media print {
    @page {
        size: letter portrait;
        margin: 0;
    }

    html,
    body {
        overflow: auto !important;
        -webkit-print-color-adjust: exact !important;
    }

    .no-print,
    .no-print * {
        display: none !important;
    }

    .toolbar-container {
        display: none !important;
    }

    body .main-container {
        padding: 0 !important;
        top: 0 !important;
        overflow: unset !important;
    }

    body .center-panel {
        border-radius: 0 !important;
        bottom: 0;
        left: 0 !important;
        right: 0;
        top: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: unset !important;
        overflow: unset !important;
    }

    .center-panel .tab-header {
        display: none !important;
    }

    .center-panel .tab-body {
        top: 0 !important;
    }

    .center-panel .report {
        border-radius: 0 !important;
        overflow: unset !important;
    }

    .split-container>div {
        position: unset !important;
        top: 0 !important;
    }

    .split-container>div:nth-child(1),
    .split-container>div:nth-child(2) {
        height: 0 !important;
        display: none !important;
    }

    .report .split-container>div:nth-child(3) {
        top: 0 !important;
    }

    .report-container {
        position: unset !important;
        top: 0 !important;
    }

    .appview {
        position: unset !important;
    }

    .appview-body {
        position: unset !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
    }

    .appview-model {
        position: unset !important;
        left: 0 !important;
        right: 0 !important;
    }

    .appview-explorer {
        position: unset !important;
    }

    .split-container {
        position: unset !important;
    }

    .panel-header.modelview-header {
        display: none !important;
    }

    .panel-body.modelview-body {
        position: unset !important;
        top: 0 !important;
    }

    .toolbar-container {
        display: none !important;
    }

    .report-body,
    .report-scroll {
        display: block !important;
        position: unset !important;
        overflow: unset !important;
    }

    .report {
        position: unset !important;
    }

    .panel {
        border: none !important;
        position: unset !important;
    }

    .canvas3d.invisible {
        display: none !important;
    }

    .panel-body.modelview-body {
        overflow: unset !important;
    }

    .report,
    .viewer-container {
        border-radius: 0 !important;
    }

    .report .page {
        margin: 0 auto;
        position: relative !important;
    }

    .report .page + .page {
        page-break-before: always;
    }

    .report-body {
        margin: 0 !important;
    }

    .page-footer {
        position: absolute !important;
        bottom: 0.5in;
        right: 0.5in;
    }

    .tab-body,
    .tab {
        position: unset !important;
    }

    .report .wala.page::before {
        background: #2A7B9B;
        background: linear-gradient(90deg, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
        color: #FFF;
        content: "P" "R" "O" " " "V" "E" "R" "S" "I" "O" "N" !important;
        position: absolute;
        font-size: 64px;
        text-align: center;
        top: 40%;
        width: 100%;
    }

    .wala.page * {
        display: none !important;
    }
}

.wala .hidden-values {
    /* background-color: #AAA;
    color: #FFF; */
    padding: 0 4px;
    margin-right: 4px;
    ;
}

.report img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.equation-break td {
    display: block;
    width: 100% !important;
}

.equation-parameter mjx-container {
    min-width: 24px;
}

.viewing.report-view .page {
    margin: 0 auto;
    height: unset !important;
    width: unset !important;
    max-width: 1000px;
    padding: 32px 0 0 0 !important;
    overflow: hidden;
    position: relative;
    page-break-after: always;
}

.viewing.report-view .page-header,
.viewing.report-view .page-footer {
    display: none;
}

.viewing.report-view {
    background-color: #FFF;
    ;
}

.viewing.report-view .report-body {
    padding: 32px;
}

.summary-report {
    position: relative;
}

/* Canvas sits in the upper-left as part of the left column flow. Kept
   short (1.5in via the JS-side Height arg) so the left column has room for
   ~20 rows of Section / Material / Design Code / Member properties below
   it without overflowing the page. */
.summary-report .canvas-2D {
    border: 1px solid #888;
    overflow: hidden;
    margin-bottom: 12px;
    width: 50% !important;
}

.viewing .summary-report .canvas-2D {
    width: 100% !important;
}

.summary-report .canvas-2D img {
    max-width: unset !important;
    padding: 0 !important;
}

.summary-report .left-summary-report {
    position: absolute;
    width: 50%;
}

.viewing .summary-report .left-summary-report {
    position: relative;
    width: 100%;
}

/* Right column takes the full page height starting at top so all 17+ rows
   (Strength / Classification / Flexure / Shear / Deflection / Slenderness)
   fit on one page. */
.summary-report .right-summary-report {
    position: absolute;
    top: 0;
    right: 0;
    width: calc(50% - 16px);
}

.viewing .summary-report .right-summary-report {
    position: relative;
    width: 100%;
    margin-top: 16px;
}

.viewing .summary-report .right-summary-report {
    margin-top: 16px;
    position: relative;
    width: 100%;
}

.summary-report .parameter-header {
    border-bottom: 0.5px solid #888;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 4px;
    padding-bottom: 4px;
}

.summary-report .left-summary-report .parameter-header:first-child,
.summary-report .right-summary-report .parameter-header:first-child {
    margin-top: 0;
}

.summary-report .parameter {
    margin-left: 0;
    margin-bottom: 2px;
}

/* ── Two-way slab (M53) summary drawings page ────────────────────────────────
   The parameter columns stay on the first summary page; this dedicated page
   stacks each drawing (plan + short/long reinforcement elevations) at full page
   width with a caption above it. Scoped to .summary-report--drawings so every
   other app's single-page summary is completely unaffected. */
.summary-report.summary-report--drawings .canvas-2D {
    width: 100% !important;
    margin-bottom: 14px;
}

.summary-report--drawings .summary-drawing-caption {
    font-weight: bold;
    border-bottom: 0.5px solid #888;
    padding-bottom: 4px;
    margin-bottom: 6px;
}

/* ── Summary page-1 full-width drawings (RC Beam Span M21) ───────────────────
   Rendered under the two parameter columns on the FIRST summary page. The
   columns are position:absolute, so the viewer measures the taller one and
   sets --summary-bottom-offset; padding (not margin) keeps that gap from
   collapsing out to .summary-report. In "viewing" mode the columns stack in
   flow, so the measured offset must not apply. */
.summary-report .summary-report-bottom {
    padding-top: var(--summary-bottom-offset, 0px);
}

.viewing .summary-report .summary-report-bottom {
    padding-top: 16px;
}

.summary-report .summary-report-bottom .canvas-2D {
    width: 100% !important;
    margin-bottom: 14px;
}

.summary-report .summary-report-bottom .summary-drawing-caption {
    font-weight: bold;
    border-bottom: 0.5px solid #888;
    padding-bottom: 4px;
    margin-bottom: 6px;
}

/* Compact table and explanatory notes on the summary pages. The report-wide .table rule
   indents by 0.25in for the chapter body; inside the summary block it sits flush with the
   drawing above it. */
.summary-report .summary-report-bottom table.table,
.summary-report--drawings table.table,
.summary-report--page table.table {
    margin-left: 0;
    width: 100%;
}

.summary-report .summary-drawing-note {
    font-size: 11px;
    line-height: 1.45;
    margin: 4px 0 12px 0;
}

/* Repeating summary pages (Multiple RC Beams: one per beam line). Same full-width
   drawing treatment as the dedicated drawings page, plus a page title. */
.summary-report.summary-report--page .canvas-2D {
    width: 100% !important;
    margin-bottom: 14px;
}

.summary-report--page .summary-page-title {
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

/* Keep report introductions attached to their content in native print layout too. */
.report .section-title, .report .header, .report .section-description {
    break-after: avoid;
    page-break-after: avoid;
}
.equation {
    break-inside: avoid;
    page-break-inside: avoid;
}
.equation-calculation-note {
    clear: both;
    color: #555;
    font-size: 12px;
    line-height: 1.4;
    margin: 8px 0;
}