:root { --alternating-row-color: var(--color-1973); --border-color-black: var(--color-spots); --border-color-tan: #c1c1c1; --caption-background-color-: var(--color-rosette); --caption-foreground-color-: var(--white); }
section.container:has(table) { align-items: flex-start; display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; }
section.container:has(table) *:not(table):not(table *) { width: 100%; }
section.container table { border-collapse: collapse; border-spacing: 0; margin: 0 auto 1rem auto; table-layout: fixed; width: auto; /* Let the table size itself based on content */ max-width: 100%; /* Prevent overflow on smaller screens */ min-width: 50ch; /* Ensure enough room for readable content */ margin: 1em auto; /* Center the table with vertical spacing */ }
section.container table caption, section.container table caption * { background-color: var(--color-rosette); color: var(--white) !important; font-size: 1.5rem; font-weight: bold; line-height: 1.5; margin: 0; padding: 3px 5px; text-align: center; text-wrap: pretty; }
section.container table tbody { background-color: #ffffff; border: 0; display: table-row-group; }
section.container table tbody td { border-left: 1px solid var(--color-pillars); border-right: 1px solid var(--color-pillars); font-size: inherit; font-weight: inherit; line-height: 1.5; }
section.container table tbody td:first-child { border-left: none; }
section.container table tbody td:last-child { border-right: none; }
section.container table tbody tr:hover { background-color: var(--color-rings) !important; cursor: default; }
section.container table tbody td * { margin: 0; }
section.container table tbody td p + p { line-height: 1.5; }
section.container table tbody td ul { font-size: 0.9em; margin: 0; padding: 0 0 0 1rem; }
section.container table tbody td ul li { text-align: left; text-wrap: pretty; }
section.container table tbody td, section.container table tbody th { margin: 0; padding: 3px 5px; text-wrap: pretty; vertical-align: middle; }
section.container table tbody tr > :first-child { border-left: 1px var(--color-pillars) solid; }
section.container table tbody tr > :last-child { border-right: 1px var(--color-pillars) solid; }
section.container table tbody tr:last-child th, section.container table tbody tr:last-child td { border-bottom: 1px var(--color-pillars) solid; }
section.container table tbody tr:nth-child(even) { background-color: var(--alternating-row-color); }
section.container table th p { display: block; line-height: 1.2; margin: 0; }
section.container table thead td p + p { line-height: 1.5; }
section.container 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 0 1px; color: var(--color-spots); font-size: inherit; font-weight: bold; line-height: 1.5; margin: 0; padding: 3px 5px; text-align: center; text-wrap: pretty; vertical-align: bottom; }
section.container table thead th:first-of-type { border-left-color: var(--color-pillars); }
section.container table thead th:last-of-type { border-right-color: var(--color-pillars); }
td, th { padding: 0.5em 1em; word-break: keep-all; /* Avoid breaking words mid-cell */ white-space: nowrap; /* Prevent wrapping unless necessary */ }

@media screen and (max-width: 600px) {
    section.container table { font-size: 0.9rem; width: 97vw; }
    /*section.container table caption { font-size: 1.2em; text-align: left; }
    section.container table tbody { border-color: #1a1a1a; border-style: solid; border-width: 0 0 1px 0; }
    section.container table tbody td { align-items: center; border-bottom-color: #1a1a1a47; border-left-color: #000000; border-right-color: #000000; border-top-color: transparent; border-width: 0 1px 1px 1px; display: flex; justify-content: space-between; white-space: normal;*/ /* Allow wrapping when space is tight */ /*}
    section.container table tbody td:before, section.container table tbody th:before { content: attr(data-label); font-weight: bold; margin-left: 0; margin-right: auto; text-align: left; }
    section.container table tbody th { border-color: transparent; border-width: 0; padding: 0 5px; text-align: right; }
    section.container table tbody th:before { float: left; }
    section.container table tbody tr > :first-child { text-align: right; }
    section.container table tbody tr > :last-child { border-bottom: none;*/ /* Custom styles for the last cell in tbody rows */ /*}
    section.container table tbody tr td:first-child, section.container table tbody tr th:first-child { background-color: var(--color-pillars); color: #ffffff; font-weight: bold; }
    section.container table tbody tr:nth-child(odd) { background-color: var(--white); }
    section.container table thead { display: none; }
    section.container table tr:not(:last-child) { margin-bottom: 0; }
    section.container table, section.container table caption, section.container table tbody, section.container table th, section.container table tr { display: block; }*/
}

@media only screen and (min-width: 1440px) and (max-width: 1920px) {
    section.container:has(table.side-by-side) > *:not(table) { width: 100%; }
    section.container table.side-by-side { display: table; flex: 1 1 calc(50% - 10px); }
}

@media only screen and (min-width: 1921px) {
    section.container table { max-width: 1920px; }
}
