@import url('colors.css');

body {
    font-family: Verdana;
}

/* Fixed Headers */
/* fixed column headers */
thead th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
}
thead th:first-child {
    left: 0;
    z-index: 3;
}
tbody tr td:first-child {
    z-index: 2;
    left: 0;
    position: sticky;
}
tbody tr td:not(:first-child) {
    z-index: 1;
}

/* Proven method to visually hide something but */
/* still make it available to assistive technology */
/* Thanks to https://adrianroselli.com/2020/01/fixed-table-headers.html#VisHidden */
.visually-hidden {
    position: absolute;
    top: auto;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE 6/7 */
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    white-space: nowrap;
}

/* scroll container */
[role="region"][aria-labelledby][tabindex] {
    overflow: auto;
    max-height: 100vh;
}

[role="region"][aria-labelledby][tabindex]:focus {
    outline: .1em solid rgba(0,0,0,.1);
}
/* scrolling shadow */
[role="region"][aria-labelledby][tabindex] {
    background:
        linear-gradient(to right, transparent 30%, rgba(255,255,255,0)),
        linear-gradient(to right, rgba(255,255,255,0), white 70%) 0 100%,
        radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,0.2), rgba(0,0,0,0)),
        radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.2), rgba(0,0,0,0)) 0 100%;
    background-repeat: no-repeat;
    background-color: #fff;
    background-size: 4em 100%, 4em 100%, 1.4em 100%, 1.4em 100%;
    background-position: 0 0, 100%, 0 0, 100%;
    background-attachment: local, local, scroll, scroll;
}
/* adjust scroll-padding-top if there's a target element (url#target) so the fixed header doesn't obfuscate it */
[role="region"][aria-labelledby][tabindex]:has(:target) {
    scroll-padding-top: 5rem;
}

/* overall table style */
table {
    border-collapse: collapse;
    width: 100%;
}
th, td {
    min-width: 5rem;
}
table caption {
    font-size: smaller;
    font-style: italic;
    text-align: left;
    padding: 1vh;
}
/* a solid background color and inset shadow for a 'border' stay fixed better than other options, for when the header is fixed and the table scrolls */
thead th {
    background: var(--hardcomp);
}
thead th {
    /* top and bottom 'border' */
    box-shadow: inset 0 1px 0 var(--primary), inset 0 -1px 0 var(--primary);
}
thead th:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
thead th:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
thead th:first-of-type {
    /* left, top and bottom 'border' */
    box-shadow: inset 0 1px 0 var(--primary), inset 0 -1px 0 var(--primary), inset 1px 0 0 var(--primary);
}
thead th:last-of-type {
    /* right, top and bottom 'border' */
    box-shadow: inset -1px 0 0 var(--primary), inset 0 1px 0 var(--primary), inset 0 -1px 0 var(--primary);
}
tbody tr:nth-child(even) {
    background-color: var(--softcomp);
}
tbody tr:nth-child(even) td:first-child {
    background-color: var(--hardcomp);
}
tbody tr:nth-child(odd) td:first-child {
    background-color: white;
}
th, td {
    text-align: left;
    font-size: smaller;
    font-weight: normal;
    vertical-align: top;
    padding: 3vh;
}
/* header text */
thead th {
    vertical-align: bottom;
    font-size: smaller;
    font-weight: bolder;
}
table.tests-for-topic thead th {
    vertical-align: top;
}
/* body text */
tbody a {
    display: block;
    padding-bottom: 1vh;
    color: var(--primary);
}
tbody ul {
    line-height: 1.5rem;
}

/**************************/
/* results table-specific */
tbody .testenv a {
    display: block;
    padding-bottom: 1vh;
}
tbody span.sw {
    display: block;
} 
tbody a.score, tbody td:not(:first-of-type) a {
    color: inherit;
}
tbody .not-tested {
    font-weight: lighter;
    font-style: italic;
}
tbody .readingSystem {
    font-size: larger;
}
tbody .sw:not(.readingSystem) {
    padding-left: 0.5rem;
}
tbody .readingSystem .vendor {
    font-size: smaller;
    display: block;
}
tbody span.pass, tbody span.fail {
    white-space: nowrap;
}


/* sorting */
thead th.sortable {
    cursor: pointer;
}
thead th.sortable::after {
    color: var(--sort-icons-color);
}
thead th.sortable[aria-sort='ascending']::after {
    content: '▲';
}
thead th.sortable[aria-sort='descending']::after {
    content: '▼';
}

/* on the admin results by topic page*/
.testenv-details span {
    display: block;
}

.table-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.table-controls .table-filters {
    display: flex;
    flex-wrap: wrap;
    border: none;
    padding: 0;
    margin: 0;
    row-gap: .5rem;
    column-gap: 2rem;
}

.table-controls button {
    height: min-content;
    align-self: end;
}
.table-controls .rowcount {
    font-style: italic;
    font-size: smaller;
    align-self: end;
    margin-bottom: 3px;
}
.flagged-test td:nth-child(1) span.update-required {
    display: block;
    width: min-content;
    background-color: var(--message);
    padding: 2px;
    margin-top: 2rem;
}
/* smaller table; used on results-by-topic-version page e.g. /results/topic/basic-functionality/1.0.0 */
table.compact {
    line-height: 1;
    width: inherit;
    /* left and top 'border' */
    box-shadow: inset 0 2px 0 black, inset 2px 0 0 black;
    border-radius: 5px;
    --border-thickness: 1px;
}
table.compact td {
    padding: 1.5vh;
}

table.compact thead th {
    /* top 'border' */
    box-shadow: inset 0 var(--border-thickness) 0 black;
}
table.compact thead th:first-of-type {
    /* left and top 'border' */
    box-shadow: inset 0 var(--border-thickness) 0 black, inset var(--border-thickness) 0 0 black;
}
table.compact thead th:last-of-type {
    /* right and top 'border' */
    box-shadow: inset calc(var(--border-thickness) * -1) 0 0 black, inset 0 var(--border-thickness) 0 black;
}
table.compact thead th:first-of-type {
    border-bottom-left-radius: 0;
}
table.compact thead th:last-of-type {
    border-bottom-right-radius: 0;
}
table.compact tbody tr {
    box-shadow: inset calc(var(--border-thickness) * -1) 0 0 black, inset var(--border-thickness) 0 0 black;
}
table.compact tbody td:first-child {
    box-shadow: inset var(--border-thickness) 0 0 black;
}
table.compact tbody tr:last-child {
    box-shadow: inset 0 calc(var(--border-thickness) * -1) 0 black;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
table.compact tbody tr:last-child td:first-child {
    box-shadow: inset var(--border-thickness) 0 0 black, inset 0 calc(var(--border-thickness) * -1) 0 black;
    border-bottom-left-radius: 5px;
}
table.compact tbody tr:last-child td:last-child {
    box-shadow: inset calc(var(--border-thickness) * -1) 0 0 black, inset 0 calc(var(--border-thickness) * -1) 0 black;
    border-bottom-right-radius: 5px;
}

table.compact tbody tr:nth-child(even),
table.compact tbody tr:nth-child(even) td:first-child,
table.compact tbody tr:nth-child(odd) td:first-child {
    background-color: white;
}

form.edit-results table td:nth-child(2) {
    max-width: 5rem;
}
form.edit-results table td:nth-child(3) {
    max-width: 15rem;
}

@media (max-width: 768px) {
    .table-controls .table-filters {
        gap: .5rem;
    }
}