/* Stationsinterner Jahresvergleich. Keine Belchertown-Grundstile überschreiben. */

.reports-page {
    --reports-border: #d9e2ec;
    --reports-surface: #f8fafc;
    --reports-head: #e8f1f8;
    --reports-muted: #5f6c7b;
    --reports-annual: #1976b9;
}

.reports-page .reports-section {
    margin: 0 0 30px;
}

.reports-page .reports-card {
    margin: 0 0 18px;
    padding: 16px;
    border: 1px solid var(--reports-border);
    border-radius: 8px;
    background: var(--reports-surface);
}

.reports-page .reports-card h3 {
    margin-top: 0;
}

.reports-page .reports-card h3 small,
.reports-page .reports-note,
.reports-page .reports-definition {
    color: var(--reports-muted);
}

.reports-page .reports-info {
    margin: 0 0 24px;
    padding: 12px 14px;
    border-left: 4px solid var(--reports-annual);
    background: var(--reports-surface);
    color: var(--reports-muted);
    line-height: 1.55;
}

.reports-page .reports-source-key {
    display: inline-block;
    margin: 6px 6px 0 0;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: .9em;
    line-height: 1.3;
}

.reports-page td.reports-source-dwd,
.reports-page .reports-source-key.reports-source-dwd { background: #e8f1fb; }
.reports-page td.reports-source-mixed,
.reports-page .reports-source-key.reports-source-mixed { background: #f3edf9; }
.reports-page .reports-source-key.reports-source-own { background: var(--reports-surface); border: 1px solid var(--reports-border); }

.reports-page .reports-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.reports-page .reports-table {
    width: 100%;
    min-width: 720px;
    margin: 0;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.reports-page .reports-table th,
.reports-page .reports-table td {
    padding: 8px 9px;
    border: 1px solid var(--reports-border);
    text-align: center;
    white-space: nowrap;
}

.reports-page .reports-year-row th,
.reports-page .reports-year-row td {
    background: var(--reports-head) !important;
    color: var(--reports-muted) !important;
    font-weight: 700;
}

/* Belchertown moves table header rows off-screen on small viewports. Safari
 * treats the semantic column headers below like such a row, even in <tbody>. */
.reports-page .reports-table tbody > tr.reports-year-row {
    position: static !important;
    top: auto !important;
    left: auto !important;
    display: table-row !important;
    visibility: visible !important;
}

.reports-page .reports-table tbody > tr.reports-year-row > th {
    display: table-cell !important;
    visibility: visible !important;
}

.reports-page .reports-month-column {
    position: sticky;
    left: 0;
    z-index: 2;
    text-align: left;
    background: var(--reports-surface);
}

.reports-page .reports-year-row .reports-month-column {
    z-index: 3;
    background: var(--reports-head) !important;
}

.reports-page .reports-total-row th,
.reports-page .reports-total-row td {
    border-top: 2px solid var(--reports-annual) !important;
    font-weight: 700;
}

.reports-page .reports-missing {
    color: var(--reports-muted);
}

.reports-page .reports-partial-row th,
.reports-page .reports-partial {
    font-style: italic;
}

.reports-page .reports-definition {
    margin: 10px 0 0;
    font-size: .9em;
}

.reports-page .reports-definition-ice { color: rgb(75, 132, 255); }
.reports-page .reports-definition-frost { color: rgb(35, 255, 158); }
.reports-page .reports-definition-summer { color: rgb(255, 172, 75); }
.reports-page .reports-definition-tropical { color: rgb(255, 140, 95); }
.reports-page .reports-definition-hot { color: rgb(255, 105, 105); }
.reports-page .reports-definition-very-hot { color: rgb(255, 73, 73); }
.reports-page .reports-definition-extreme-hot { color: rgb(191, 64, 64); }

.reports-page .reports-no-data {
    padding: 16px;
    border-left: 4px solid var(--reports-annual);
    background: var(--reports-surface);
}

body.dark .reports-page {
    --reports-border: #3e4a56;
    --reports-surface: #26323e;
    --reports-head: #32414e;
    --reports-muted: #c1ccd6;
    --reports-annual: #75beff;
}

body.dark .reports-page td.reports-source-dwd,
body.dark .reports-page .reports-source-key.reports-source-dwd { background: #28445e; }
body.dark .reports-page td.reports-source-mixed,
body.dark .reports-page .reports-source-key.reports-source-mixed { background: #463758; }

@media (max-width: 600px) {
    .reports-page .reports-card {
        padding: 12px;
    }
}