/* ==========================================================================
   Table Styles – Mobile-First Responsive Design
   Preserves all original color variables and branding
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Variables (Preserved)
   -------------------------------------------------------------------------- */
:root { --alternating-row-color: var(--color-1973); --border-color-black: var(--color-spots); --border-color-tan: #c1c1c1; --color-1973: #f7f5f3; --color-coast: #182828; --color-golden: #ab8c5f; --color-jax: #dac08c; --color-pillars: #d9d9d9; --color-rings: #e3d8c9; --color-rosette: #ae0000; --color-spirit: #91744b; --color-spots: #1a1a1a; --white: #ffffff; }

table:not(.Prog-Info-Table) .align-right { /* common class for right-aligned cells i.e. dollar amounts.*/ text-align: right; }

table:not(.Prog-Info-Table) .align-center { /* common class for center-aligned cells.*/ text-align: center; }
section.white-smoke table:not(.Prog-Info-Table) tbody tr:nth-child(even) { --alternating-row-color: #e3d8c966; }

/* --------------------------------------------------------------------------
   Base Table Styles (Mobile-First)
   -------------------------------------------------------------------------- */
table:not(.Prog-Info-Table) { display: block; width: 100%; max-width: 100%; margin: 0 auto 1rem auto; border-collapse: collapse; border-spacing: 0; table-layout: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table:not(.Prog-Info-Table) caption, table:not(.Prog-Info-Table) caption * { background-color: var(--color-rosette); color: var(--white); display: block; font-size: 1.2rem; font-weight: 700; left: 0; line-height: 1.5; margin: 0; max-width: none; position: sticky; text-align: left; text-wrap: balance; width: 100%; z-index: 1; }
table:not(.Prog-Info-Table) caption, table:not(.Prog-Info-Table) th, table:not(.Prog-Info-Table) td { padding: 0.6em 0.8em; }
table:not(.Prog-Info-Table) thead th { background-color: var(--color-pillars); border-bottom-color: transparent; border-left-color: var(--color-1973); border-right-color: var(--color-1973); border-style: solid; border-top-color: transparent; border-width: 0 1px; color: var(--color-spots); font-weight: 700; text-align: center; text-wrap: pretty; vertical-align: bottom; }
table:not(.Prog-Info-Table) tbody { background-color: #fff; display: table-row-group; }
table:not(.Prog-Info-Table) tbody tr:nth-child(even) { background-color: var(--alternating-row-color); }
table:not(.Prog-Info-Table) tbody tr td, table:not(.Prog-Info-Table) tbody tr th { border: 1px solid var(--color-pillars); line-height: 1.5; max-width: 100%; overflow-wrap: break-word; text-align: left; text-wrap: pretty; vertical-align: middle; }
table:not(.Prog-Info-Table) tbody tr:hover { background-color: var(--color-rings); }
table:not(.Prog-Info-Table) tbody tr:hover td { border: none !important; border-right: 1px #0000001f solid !important; }

/* Crucial: Restore 'none' for the last cell in the hovered row */
table:not(.Prog-Info-Table) tbody tr:hover td:last-child { border-right: none !important; }
table:not(.Prog-Info-Table) tbody td *, table:not(.Prog-Info-Table) th p, table:not(.Prog-Info-Table) td { margin: 0; line-height: 1.5; white-space: normal; hyphens: auto; text-wrap: pretty; }
table:not(.Prog-Info-Table) tbody td p + p { line-height: 1.5; }
table:not(.Prog-Info-Table) tbody td ul { font-size: 0.9em; margin: 0; padding: 0 0 0 1rem; }
table:not(.Prog-Info-Table) tbody td ul li { text-align: left; text-wrap: pretty; }

/* --------------------------------------------------------------------------
   Responsive Adjustments – Small Screens (≤600px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 600px) {
    table:not(.Prog-Info-Table) * { font-size: 0.9rem; }

    table:not(.Prog-Info-Table) thead th, table:not(.Prog-Info-Table) thead th *, table:not(.Prog-Info-Table) tbody td *, table:not(.Prog-Info-Table) tbody td { min-width: 50vw; text-wrap: balance; /* text-wrap:nowrap;
        white-space:nowrap;*/ }

    table:not(.Prog-Info-Table) caption { font-size: 1.2rem; max-width: 100%; padding-left: 1rem; text-align: left; text-wrap: balance; width: auto; }
}
/* --------------------------------------------------------------------------
   Responsive Adjustments – Medium Screens (≥601px)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 601px) {
    table:not(.Prog-Info-Table) { display: table; table-layout: fixed; overflow-x: visible; width: auto; }

    table:not(.Prog-Info-Table) caption, table:not(.Prog-Info-Table) caption * { display: table-caption; font-size: 1.5rem; position: static; text-align: center; text-wrap: balance; width: auto; z-index: auto; }
    table:not(.Prog-Info-Table) caption { padding: 0.3em 0.8em; }
    table:not(.Prog-Info-Table) th, table:not(.Prog-Info-Table) td { padding: 0.5em 0.8em; }
}
/* --------------------------------------------------------------------------
   Large Screen Layouts
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 1440px) and (max-width: 1920px) {
    table.side-by-side:not(.Prog-Info-Table) { display: table; flex: 1 1 calc(50% - 10px); }
}

@media only screen and (min-width: 1921px) {
    table:not(.Prog-Info-Table) { max-width: 1920px; }
}

@media screen and (max-width: 1366px) {
    .columns .columns-3 { flex: 0 0 49%; max-width: 48%; }
}

@media screen and (max-width: 870px) {
    .columns .columns-3 { flex: 0 0 100%; max-width: 100%; }
}