html, body {
    font-family: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Skip-to-content link — visually hidden until focused, then shown at top of viewport */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 200;
    padding: 0.5rem 1rem;
    background-color: #1b6ec2;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 4px 4px;
}

.skip-link:focus {
    top: 0;
    color: #fff;
}

/* Hide chrome (header, nav, sidebar) when printing — applies globally so the
   print report page renders cleanly without the site shell. */
@media print {
    .site-header,
    .header-spacer,
    .sidebar,
    .sidebar-toggle-btn {
        display: none !important;
    }

    /* Collapse flex layout so main isn't height-clamped to the viewport height.
       overflow-x: auto on main implicitly adds overflow-y: auto, turning main
       into a scroll container that only prints the visible region. */
    .page,
    .main-content {
        display: block !important;
        min-height: 0 !important;
    }

    main {
        overflow: visible !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Custom heading sizes - scaled down from default Bootstrap */
h1 {
    font-size: 1.75rem;  /* Same as Bootstrap's default h3 */
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.25rem;  /* Same as Bootstrap's default h5 */
}

h4 {
    font-size: 1.1rem;   /* Same as Bootstrap's default h6 */
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: 0.9rem;
}

h1, h2, h3, h4 {
    font-family: 'IBM Plex Serif', Georgia, serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ── Nav Tabs — raised tab appearance with WSU brand accent ── */

.nav-tabs {
    border-bottom: 2px solid #dee2e6;
    gap: 3px;
    flex-wrap: wrap;
}

.nav-tabs .nav-link {
    border: 1px solid #dee2e6;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    background-color: #eeede9;
    color: #555;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.45rem 1rem;
    margin-bottom: -2px;
    transition: background-color 0.15s, color 0.15s;
}

/* Respect user motion preferences on tab transitions */
@media (prefers-reduced-motion: reduce) {
    .nav-tabs .nav-link {
        transition: none;
    }
}

.nav-tabs .nav-link:hover:not(.active) {
    background-color: #e2e0db;
    color: #333;
    border-color: #ccc;
}

/* Active tab: white fill, crimson top accent, blends into content area */
.nav-tabs .nav-link.active {
    background-color: #ffffff;
    color: #981e32;
    font-weight: 600;
    border-color: #dee2e6;
    border-top: 3px solid #981e32;
    border-bottom: 2px solid #ffffff;
    padding-top: calc(0.45rem - 2px); /* compensate for thicker top border */
}

/* Content area: bordered on left, right, bottom — matches tab bar bottom */
.tab-content > .tab-pane {
    border: 1px solid #dee2e6;
    border-top: none;
    padding: 1.25rem;
    background-color: #ffffff;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #0f4280;
    border-color: #0c3870;
}

/* Accessible warning text — Bootstrap's #ffc107 fails WCAG AA on white */
.text-warning {
    color: #b45309 !important;
}

/* Destructive actions stay crimson */
.btn-danger {
    background-color: #981e32;
    border-color: #7d1929;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background-color: #7d1929;
    border-color: #6a1522;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

a.actionlink {
    cursor: pointer;
    text-decoration: none;
}

input[type=search] {
    max-width: 20rem;
    width: 100%;
    padding: 0.25rem 0.25rem 0.25rem 2.5rem;
    color: rgb(17 24 39);
    background-color: rgb(249 250 251);
    border: 1px solid rgb(209 213 219);
    border-radius: 0.5rem;
    outline-offset: 1px;
}

input[type=search]:focus {
    border-color: rgb(59 130 246);
    outline-color: rgb(59 130 246);
}

.search-box {
    position: relative;
}

.search-box:before {
    content: ' ';
    width: 1.25rem;
    height: 1.25rem;
    position: absolute;
    left: .75rem;
    top: calc(50% - 1.25rem/2);
    background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='rgb(107 114 128)' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' b-nrli8fdfc6=''%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z' b-nrli8fdfc6=''%3E%3C/path%3E%3C/svg%3E");
}

.disabled-link {
    pointer-events: none;
    color: gray;
    text-decoration: none;
    cursor: default;
}

/* ── Project info panel (shared by Details and Calculators pages) ── */
.project-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.project-header h2 {
    margin: 0;
}

.project-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.project-info-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
}

.project-info-column {
    flex: 1 1 300px;
    min-width: 250px;
}

.project-info-item {
    display: flex;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.project-info-item span.label {
    font-weight: 600;
    min-width: 160px;
    color: #495057;
}

.project-info-item span.value {
    color: #212529;
}

@media (max-width: 768px) {
    .project-info-column {
        flex: 1 1 100%;
    }

    .project-info-item span.label {
        min-width: 120px;
    }
}

/* ── Project Setup card layout (mirrors ProjectInfoPanelShort but editable) ── */
.project-setup-card {
    max-width: 900px;
    padding: 1rem 1.25rem;
    background-color: #f8f9fa;
    border-radius: 0.375rem;
    border: 1px solid #dee2e6;
    margin-bottom: 1.5rem;
}

.project-setup-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 2rem;
}

.project-setup-column {
    min-width: 0;
}

.project-setup-field {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: center;
    margin-bottom: 0.4rem;
    gap: 0.5rem;
}

.project-setup-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #495057;
    text-align: right;
    white-space: nowrap;
}

.project-setup-control {
    min-width: 0;
    max-width: 240px;
}

@media (max-width: 768px) {
    .project-setup-columns {
        grid-template-columns: 1fr;
    }

    .project-setup-control {
        max-width: none;
    }
}

/* "All Projects" back-navigation link on project subpages */
.back-to-projects-link {
    display: inline-flex;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 500;
    color: #981e32;
    text-decoration: none;
}

.back-to-projects-link:hover {
    color: #6b1524;
    text-decoration: underline;
}

h6.topDetails {
    line-height: 150%;
}

.topDetails span {
    padding-right: 5px;
    font-weight: bold;
}

.grid-table {
    display: block;
    width: 100%;
    /*display: block;*/
    /*max-height: 400px;  limit height so scrolling kicks in */
    overflow-x: auto; /* horizontal scroll for wide grids */
    overflow-y: auto; /* vertical scroll */
    border: 1px solid #ccc;
}

.grid-header,
.grid-row {
    display: grid;
    /* Door/Glazing: Actions, Plan, Desc, Ref, U, Qty, Ht Ft, Ht In, W Ft, W In, [Orientation], [Exempt], Area, UA, Delete */
    /* minmax(0,Xfr) prevents content from inflating columns — keeps all rows aligned */
    grid-template-columns: 140px minmax(0,2fr) minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 80px;
}

.grid-header-seven,
.grid-row-sevencol {
    display: grid;
    /* Wall/Floor/Ceiling + Slab: Actions, Plan, Desc, Ref, U, [Ht Ft], [Ht In], Area, UA, Delete */
    grid-template-columns: 140px minmax(0,2fr) minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 80px;
}
.grid-header-eleven,
.grid-row-elevencol {
    display: grid;
    /* Below Grade edit/add: Actions, Plan, Desc, Slab Depth, Ref, Wall U, Wall Area, UA, Slab F, Slab Perim, Slab UA, Delete */
    grid-template-columns: 140px minmax(0,2fr) minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 80px;
}
.grid-header-ten,
.grid-row-tencol {
    display: grid;
    /* Below Grade display: Actions, Plan, Desc, Ref, Wall U, Wall Area, UA, Slab F, Slab Perim, Slab UA, Delete */
    grid-template-columns: 140px minmax(0,2fr) minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 80px;
}

/* 6-column grid for Manage Custom Envelopes modal */
/* Columns: Title, U Value, F-Value, Slab Depth, Notes, Actions */
.grid-header-six,
.grid-row-sixcol {
    display: grid;
    grid-template-columns: 1fr 100px 100px 120px 1fr 180px;
}

.grid-header-four,
.grid-row-fourcol {
    display: grid;
    grid-template-columns: 1fr 100px 120px 180px;
}
.side-by-side-wrapper {
    display: flex;
    gap: 40px; /* Space between the two tables */
    align-items: flex-start;
}

.table-container-4 {
    flex: 1; /* Allows both tables to grow equally */
    min-width: 0; /* Prevents grid items from overflowing */
}

/*.table-wrapper-4 {
    flex: 1;
    min-width: 400px;*/
    /*background-color: #e8f5e9;*/
    /*padding: 15px;
    border-radius: 8px;
}*/

.grid-row:nth-child(even):not(.grid-subfooter):not(.grid-footer),
.grid-row-sevencol:nth-child(even):not(.grid-subfooter):not(.grid-footer),
.grid-row-sixcol:nth-child(even):not(.grid-subfooter):not(.grid-footer),
.grid-row-elevencol:nth-child(even):not(.grid-subfooter):not(.grid-footer),
.grid-row-tencol:nth-child(even):not(.grid-subfooter):not(.grid-footer) {
    background-color: #f2f2f2;
}


.grid-row:nth-child(odd):not(.grid-subfooter):not(.grid-footer),
.grid-row-sevencol:nth-child(odd):not(.grid-subfooter):not(.grid-footer),
.grid-row-sixcol:nth-child(odd):not(.grid-subfooter):not(.grid-footer),
.grid-row-elevencol:nth-child(odd):not(.grid-subfooter):not(.grid-footer),
.grid-row-tencol:nth-child(odd):not(.grid-subfooter):not(.grid-footer) {
    background-color: #ffffff;
}


.sticky-header {
    position: sticky;
    top: 0;
    background-color: #f8f9fa; /* Bootstrap light gray */
    z-index: 2;
    border-bottom: 2px solid #ccc;
    font-weight: bold;
}

/* Ensure header is not affected */
.grid-header {
    background-color: #f8f9fa; /* Bootstrap light gray */
    font-weight: bold;
}

.grid-cell {
    padding: 0.5rem;
    border-bottom: 1px solid #eee;
    word-break: break-word;
}

/* Right-align numeric columns (U, F, Qty, Height, Width, Area, UA, Perimeter, SlabUA) */
.grid-cell.num {
    text-align: right !important;
}

.grid-cell.orientation-col {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    white-space: nowrap;
}

.grid-cell.exempt-col {
    padding-left: 2rem;
    padding-right: 1.5rem;
    white-space: nowrap;
}

/* Give Area left padding when it immediately follows Orientation or Exempt */
.grid-cell.orientation-col + .grid-cell.num,
.grid-cell.exempt-col + .grid-cell.num {
    padding-left: 1.5rem;
}

/* Keep action buttons on one line */
.grid-cell:first-child {
    white-space: nowrap;
    overflow-wrap: break-word; /* modern equivalent */
}

/* Delete column is now auto-placed via consistent cell count across all rows */

/* Hover effect only on data rows, not footer */
.grid-row:hover:not(.grid-subfooter):not(.grid-footer),
.grid-row-sevencol:hover:not(.grid-subfooter):not(.grid-footer),
.grid-row-sixcol:hover:not(.grid-subfooter):not(.grid-footer),
.grid-row-elevencol:hover:not(.grid-subfooter):not(.grid-footer),
.grid-row-tencol:hover:not(.grid-subfooter):not(.grid-footer) {
    background-color: #d9edf7; /* light blue */
    cursor: pointer;
}

/* Sub-Footer & Footer row stays colored */
.grid-subfooter,
.grid-footer {
    background-color: #ffffff;
    font-weight: bold;
    color: #333;
    border-top: 2px solid #ccc;
}
.grid-footer {
    
    border-bottom: 2px solid #ccc;
}

/* Ensure sub-footer and footer hover does nothing */
    .grid-subfooter,
    .grid-footer:hover {
        background-color: #ffffff !important;
        cursor: default !important;
    }

/* Feedback lifecycle status badges — distinct from the four Bootstrap-contextual base
   states (Open/Resolved/Closed/Hidden). Class names are referenced from
   FeedbackTopicStatusDisplay.For() so the color lives in one place. */
.badge.badge-in-development { background-color: #d63384; color: #ffffff; }  /* rose — dev in progress */
.badge.badge-dev-complete   { background-color: #0dcaf0; color: #052c33; }  /* teal — dev done */
.badge.badge-ready-test     { background-color: #6f42c1; color: #ffffff; }  /* indigo — queued for test */
.badge.badge-testing        { background-color: #fd7e14; color: #ffffff; }  /* orange — in test */

.weighted-label {
   /* grid-column: span 2;*/
    text-align: center; /* optional: center the text */
    white-space: nowrap; /* keep text on one line */
}

.tab-icon {
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    margin-right: 0.25em;
}

.tab-header {
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
}


.tables-container {
    display: grid;
    gap: 30px;
    
}



/* 4 Column Grid Table */
/*.grid-table-4 {
    display: grid;
    grid-template-columns: 120px,100px,100px,100px;
    gap: 1px;
    background-color: #ddd;
    border: 1px solid #ddd;*/
   /* flex: 1;
    min-width: 400px;*/
/*}

    .grid-table-4 .grid-cell {
        background-color: white;
        padding: 12px;
        text-align: center;
    }

    .grid-table-4 .grid-header {
        background-color: #4CAF50;
        color: white;
        font-weight: bold;
        padding: 12px;
        text-align: center;
    }*/

/* Navigation progress bar — thin animated bar at top of viewport during page transitions */
.nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 9999;
    background: transparent;
    pointer-events: none;
}

.nav-progress-bar {
    height: 100%;
    background: #1b6ec2;
    animation: nav-progress-anim 1.5s ease-in-out infinite;
}

@keyframes nav-progress-anim {
    0%   { width: 0%;  margin-left: 0; }
    50%  { width: 60%; margin-left: 20%; }
    100% { width: 0%;  margin-left: 100%; }
}

.site-footer-bar {
    text-align: center;
    font-size: 0.75rem;
    color: #767676;
    padding: 0.5rem;
    border-top: 1px solid #dee2e6;
}

/* Blazor Server reconnection modal — intentionally disabled.
   The app depends on the InteractiveServer circuit, but we don't want the
   "Attempting to reconnect…/Reload?" overlay. A dropped circuit should do nothing visible;
   the next navigation re-establishes the circuit (or yields a normal browser error/404).
   The empty #components-reconnect-modal element lives in App.razor; !important wins over the
   components-reconnect-show/-failed/-rejected classes Blazor adds at runtime. */
#components-reconnect-modal {
    display: none !important;
}

/* Frozen project: grey the controls without disabling the text ones.
   A disabled input cannot be focused or text-selected in any current browser, and a frozen
   project's values are exactly the numbers someone wants to read off and copy -- which is why
   text inputs get readonly and only the controls with nothing to copy (selects, checkboxes,
   buttons) get disabled. This rule is what makes the two treatments read as ONE state.
   Matches Bootstrap's own disabled background. */
.frozen-readonly input[readonly],
.frozen-readonly textarea[readonly],
.frozen-readonly input:disabled,
.frozen-readonly select:disabled,
.frozen-readonly textarea:disabled {
    background-color: var(--bs-secondary-bg, #e9ecef);
    opacity: 1;
}

/* readonly does not change the cursor on its own, so without this a frozen text input still
   invites typing. Text selection stays available -- this is not pointer-events: none. */
.frozen-readonly input[readonly],
.frozen-readonly textarea[readonly] {
    cursor: default;
}

/* ===== Shared compliance-report styles =====
   Global, not scoped: this markup is split across Pages/Project/PrintReport.razor,
   Pages/SharedProject.razor and the extracted Components/Report/* children, which each carry a
   different Blazor scope id. Scoped copies in the two page .razor.css files would not reach the
   children. Keep this the single definition. */
.report-section {
    margin-top: 1.5rem;
}

.report-section h3 {
    font-size: 12pt;
    margin-bottom: 0.25rem;
}

.report-section h4 {
    font-size: 11pt;
    margin-top: 1rem;
    margin-bottom: 0.25rem;
}

.section-rule {
    margin: 0.25rem 0 0.75rem 0;
    border-top: 1px solid #999;
}

.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9pt;
    margin-top: 0.5rem;
}

.report-table th,
.report-table td {
    border: 1px solid #ccc;
    padding: 4px 8px;
    text-align: left;
}

.report-table thead th {
    background-color: #e9e9e9;
    font-weight: bold;
}

.report-table .total-row td {
    background-color: #f0f0f0;
    font-weight: bold;
    border-top: 2px solid #999;
}

.text-pass {
    color: #155724;
    font-weight: bold;
}

.text-fail {
    color: #721c24;
    font-weight: bold;
}

/* Promoted from the two page .razor.css files when the four duplicated report sections moved
   into Components/Report/ComplianceReportSummary.razor. The copies were byte-identical in
   PrintReport.razor.css and SharedProject.razor.css -- two definitions nothing kept in sync --
   and neither could reach a child component, which carries its own scope id. */
.summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.25rem 2rem;
    font-size: 10pt;
}

.determination-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 2rem;
    font-size: 11pt;
}

.compliance-status-box {
    text-align: center;
    font-size: 16pt;
    font-weight: bold;
    padding: 12px;
    border-radius: 4px;
}

.status-pass {
    background-color: #d4edda;
    color: #155724;
    border: 2px solid #155724;
}

.status-fail {
    background-color: #f8d7da;
    color: #721c24;
    border: 2px solid #721c24;
}

@media print {
    /* Browsers strip background colours when printing unless told otherwise, and PASS/FAIL is
       carried BY the colour on this box. Promoted alongside the rules above for the same reason:
       scoped @media print in PrintReport.razor.css cannot reach the child that now renders it. */
    .status-pass,
    .status-fail,
    .compliance-status-box {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* Print pagination for the report tables/sections above, promoted alongside them for the same
   reason (gap found during PONY-1 Step 9): PrintReport.razor.css's own @media print block sets
   these page-break rules, but scoped CSS only reaches markup rendered directly by that page --
   once part of .report-section/.report-table lives in Components/Report/* children, the scoped
   rule silently stops applying to them on print, same trap as the base styles Step 1 already
   fixed. Global here so it reaches every scope. Harmless on SharedProject (no print button; the
   rule is inert outside an actual print). */
@media print {
    .report-section {
        page-break-inside: avoid;
    }

    .report-table {
        page-break-inside: auto;
    }

    .report-table tr {
        page-break-inside: avoid;
    }
}