html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
    height: 100vh;
    margin: 10px;
}

form, .progress-container, #pagination {
    flex: 0 0 auto;
}

h1 {
    color: #1750a8;
}

p {
    margin: 2px;
}

input, button {
    margin: 10px 0;
    padding: 8px;
}

button {
    background-color: #1750a8;
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 10px 15px;
}

button:disabled {
    background-color: #808080;
    color: #000000;
    opacity: 0.6;
}

button:hover {
    background-color: #4ac0ef;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.table-container {
    flex: 1 1 auto;
    overflow: auto;
    min-height: 0; /* for proper flexbox shrinking */
    position: relative;
}

th {
    background-color: #1750a8;
    color: #EFF3F5;
    position: sticky;
    top: 0;
    padding: 8px;
    border: 1px solid #EFF3F5;
    border-top: none;
    z-index: 10;
}

td {
    border: 1px solid #EFF3F5;
    padding: 8px;
    text-align: left;
}

tr:nth-child(even) {
    background-color: #EFF3F5;
}

tr:nth-child(odd) {
    background-color: #ffffff;
}

td.pass,
td.warn,
td.fail {
    text-align: center;
}
td.pass::after,
td.warn::after,
td.fail::after {
    content: '';
    display: inline-block;
    width: 25px;
    height: 25px;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

td.pass {
    color: #31D98E;
    background-color: #F2FFF7;
}
td.pass::after {
    background-color: currentColor;
    mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M530.8 134.1C545.1 144.5 548.3 164.5 537.9 178.8L281.9 530.8C276.4 538.4 267.9 543.1 258.5 543.9C249.1 544.7 240 541.2 233.4 534.6L105.4 406.6C92.9 394.1 92.9 373.8 105.4 361.3C117.9 348.8 138.2 348.8 150.7 361.3L252.2 462.8L486.2 141.1C496.6 126.8 516.6 123.6 530.9 134z"/></svg>');
    mask-size: contain;
}

td.warn {
    color: #FFD22E;
    background-color: #FFFEE6;
}
td.warn::after {
    background-color: currentColor;
    mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M320 64C334.7 64 348.2 72.1 355.2 85L571.2 485C577.9 497.4 577.6 512.4 570.4 524.5C563.2 536.6 550.1 544 536 544L104 544C89.9 544 76.9 536.6 69.6 524.5C62.3 512.4 62.1 497.4 68.8 485L284.8 85C291.8 72.1 305.3 64 320 64zM320 232C306.7 232 296 242.7 296 256L296 368C296 381.3 306.7 392 320 392C333.3 392 344 381.3 344 368L344 256C344 242.7 333.3 232 320 232zM346.7 448C347.3 438.1 342.4 428.7 333.9 423.5C325.4 418.4 314.7 418.4 306.2 423.5C297.7 428.7 292.8 438.1 293.4 448C292.8 457.9 297.7 467.3 306.2 472.5C314.7 477.6 325.4 477.6 333.9 472.5C342.4 467.3 347.3 457.9 346.7 448z"/></svg>');
    mask-size: contain;
}

td.fail {
    color: #E52F52;
    background-color: #FFEBEF;
}
td.fail::after {
    background-color: currentColor;
    mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM320 200C333.3 200 344 210.7 344 224L344 336C344 349.3 333.3 360 320 360C306.7 360 296 349.3 296 336L296 224C296 210.7 306.7 200 320 200zM293.3 416C292.7 406.1 297.6 396.7 306.1 391.5C314.6 386.4 325.3 386.4 333.8 391.5C342.3 396.7 347.2 406.1 346.6 416C347.2 425.9 342.3 435.3 333.8 440.5C325.3 445.6 314.6 445.6 306.1 440.5C297.6 435.3 292.7 425.9 293.3 416z"/></svg>');
    mask-size: contain;
}

#progress-status {
    position: absolute;
    z-index: 10;
    color: #fff;
}

.progress-container {
    margin-top: 0;
    margin-bottom: 0;
    display: none;
    position: relative;
    height: 25px;
}

.progress-container progress {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: transparent;
    z-index: 1;
}

#file-progress {
    opacity: 1;
    z-index: 1;
}
#error-progress {
    opacity: 1;
    z-index: 2;
}

.progress-container progress[value] {
    /* Reset the default appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    width: 100%;
    height: 25px;
}

.progress-container progress[value]::-webkit-progress-bar {
    background-color: transparent;
    border-radius: 2px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

#file-progress::-webkit-progress-value {
    background-color: #31D98E;
    opacity: 0.25;
}
#error-progress::-webkit-progress-value {
    background-color: #31D98E;
    opacity: 0.75;
}

#pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}