* { box-sizing: border-box; }

html, body { height: 100%; }

/* page = header + main; main fills the rest of the window */
body {
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: system-ui, Arial, sans-serif;
    background: #f4f5f7;
    color: #222;
}

header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 24px;
    background: #fff;
    border-bottom: 4px solid #2e7d32;
}

.logo { height: 70px; width: auto; }

h1 { margin: 0; font-size: 1.8rem; }

main {
    flex: 1;
    min-height: 0;                 /* lets the table box shrink and scroll */
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 24px;
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 16px;
}

#btnPdf {
    align-self: flex-end;           /* bottom-aligned with the selects */
    padding: 8px 18px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: #2e7d32;
    border: 1px solid #2e7d32;
    border-radius: 4px;
    cursor: pointer;
}
#btnPdf:hover:not(:disabled) { background: #1b5e20; }
#btnPdf:disabled { background: #a5c8a7; border-color: #a5c8a7; cursor: default; }

.filters label {
    display: flex;
    flex-direction: column;
    font-weight: 600;
    gap: 6px;
    flex: 1 1 280px;
}

select {
    padding: 8px;
    font-size: 1rem;
    border: 1px solid #bbb;
    border-radius: 4px;
    background: #fff;
}

#status { color: #555; min-height: 1.2em; }

/* rows scroll inside this box, the column header stays on top */
.table-wrap {
    flex: 0 1 auto;                /* as high as the rows, at most the space left */
    min-height: 0;
    overflow: auto;
    background: #fff;
    border: 1px solid #ddd;
}
#tblMeldungen[hidden] { display: none; }
.table-wrap:has(> table[hidden]) { display: none; }

table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

th, td {
    padding: 8px 10px;
    border-bottom: 1px solid #ddd;
    text-align: left;
    white-space: nowrap;
}

th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #2e7d32;
    color: #fff;
}

/* Each Meldung is its own <tbody> with two rows */
tbody:nth-of-type(even) { background: #f7f9f7; }
tbody:hover { background: #e8f5e9; }

/* no divider between the two rows of one Meldung */
tbody tr:first-child td.col-titel { border-bottom: none; padding-bottom: 2px; }
tbody tr:last-child  td.col-crew  { padding-top: 2px; }

td.col-nr, td.col-zeit, td.col-ab { vertical-align: middle; }
td.col-nr   { font-weight: 600; text-align: right; width: 1%; }
/* Meldung column takes only the space that is left and wraps,
   so all other columns (which stay on one line) fit into main */
td.col-titel, td.col-crew {
    width: auto;
    white-space: normal;
    overflow-wrap: anywhere;
}
td.col-titel { font-weight: 600; }
td.col-crew  { color: #555; font-size: 0.92rem; }

/* tighter cells for the number columns */
td.col-platz, td.col-nr, td.col-zeit, td.col-t, td.col-ab,
th.col-t { padding-left: 6px; padding-right: 6px; }
td.col-zeit { width: 1%; }
td.col-ab   { width: 1%; text-align: center; color: #c62828; }

td.col-platz { width: 1%; text-align: right; font-weight: 700; vertical-align: middle; }
th.col-t, td.col-t { text-align: right; width: 1%; }
td.col-t { vertical-align: middle; font-variant-numeric: tabular-nums; color: #555; }
td.col-t.last { font-weight: 700; color: #222; }

/* "Vorläufig" banner above non-final results */
.vorlaeufig[hidden] { display: none; }
.vorlaeufig {
    margin-bottom: 8px;
    padding: 8px 10px;
    background: #fff3cd;
    color: #8a5a00;
    border: 1px solid #f0d58a;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: left;
}

td.col-t.dnf { font-weight: 700; color: #c62828; }

#status { margin: 0 0 8px; }

/* fallback if the PDF libraries are missing: browser "print to PDF" */
@media print {
    .filters, #status { display: none; }
    html, body, main { height: auto; display: block; }
    .table-wrap { overflow: visible; border: none; }
    th { position: static; }
    tbody { break-inside: avoid; }
}

/* time since start (row 1) and split time (row 2) of one point */
tbody tr:first-child td.col-t.cum { border-bottom: none; padding-bottom: 2px; vertical-align: bottom; }
td.col-t.split { padding-top: 2px; vertical-align: top; font-size: 0.85rem; color: #888; }

/* time columns hidden when the table is too wide */
.sec-hidden { display: none; }