:root {
    --rd-bg: #f4f5f7;
    --rd-surface: #ffffff;
    --rd-surface-alt: #eef1f4;
    --rd-border: #d7dce3;
    --rd-text: #1f2933;
    --rd-muted: #6b7280;
    --rd-accent: #5f6b7a;
    --rd-accent-dark: #44505d;
    --rd-heading: #1a202c;
}

body {
    background:
        radial-gradient(circle at top left, rgba(95, 107, 122, 0.09), transparent 30%),
        linear-gradient(180deg, #fafbfc 0%, var(--rd-bg) 100%);
    color: var(--rd-text);
    font-family: "Libre Franklin", sans-serif;
    min-height: 100vh;
}

.login-page {
    background:
        linear-gradient(135deg, rgba(95, 107, 122, 0.18), transparent 40%),
        linear-gradient(180deg, #f9fafb 0%, #eceff3 100%);
}

.site-header {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(16px);
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.brand-mark {
    align-items: center;
    background: linear-gradient(135deg, var(--rd-accent-dark), var(--rd-accent));
    border-radius: 0.85rem;
    color: #fff;
    display: inline-flex;
    font-size: 0.9rem;
    height: 2.6rem;
    justify-content: center;
    letter-spacing: 0.08em;
    width: 2.6rem;
}

.brand-title,
.brand-subtitle {
    display: block;
    line-height: 1.1;
}

.brand-title {
    color: var(--rd-heading);
    font-size: 1rem;
}

.brand-subtitle {
    color: var(--rd-muted);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.brand-shell {
    animation: fadeUp 0.45s ease-out;
}

.display-title,
.page-title,
.panel-title {
    color: var(--rd-heading);
    font-family: "Merriweather", serif;
}

.display-title {
    font-size: clamp(2rem, 3vw, 2.7rem);
}

.page-title {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    margin-bottom: 0.25rem;
}

.panel-title {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

.eyebrow {
    color: var(--rd-accent-dark);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.page-header {
    margin-bottom: 1.75rem;
}

.panel-card,
.summary-card {
    background: var(--rd-surface);
    border: 1px solid var(--rd-border);
    border-radius: 1rem;
    box-shadow: 0 16px 38px rgba(31, 41, 51, 0.06);
}

.panel-card .card-header {
    background: linear-gradient(180deg, #fbfcfd 0%, #f0f3f7 100%);
    border-bottom: 1px solid var(--rd-border);
}

.summary-card {
    padding: 1.25rem 1.4rem;
}

.weather-banner {
    background: linear-gradient(135deg, #f7f9fb, #eef3f7);
    border: 1px solid var(--rd-border);
    border-radius: 1rem;
    box-shadow: 0 16px 38px rgba(31, 41, 51, 0.06);
    padding: 1rem 1.25rem;
}

.weather-label {
    color: var(--rd-muted);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
}

.weather-headline {
    color: var(--rd-heading);
    font-family: "Merriweather", serif;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.weather-details,
.weather-source {
    color: var(--rd-text);
    font-size: 0.95rem;
}

.weather-source {
    color: var(--rd-muted);
    margin-top: 0.35rem;
}

.summary-label {
    color: var(--rd-muted);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.summary-value {
    color: var(--rd-heading);
    font-size: 1.8rem;
    font-weight: 700;
}

.region-header {
    padding: 1rem 1.25rem;
}

.report-table th {
    background: #f8fafc;
    color: var(--rd-muted);
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.report-table td,
.report-table th {
    padding: 0.95rem 1rem;
}

.table-missing td {
    background: rgba(255, 243, 205, 0.35);
}

.whitespace-prewrap {
    white-space: pre-wrap;
}

.print-only-inline {
    display: none;
}

.form-control,
.form-select {
    border-color: var(--rd-border);
    padding: 0.75rem 0.9rem;
}

.form-control:focus,
.form-select:focus {
    border-color: #9ca8b6;
    box-shadow: 0 0 0 0.25rem rgba(95, 107, 122, 0.15);
}

.btn-primary {
    background: linear-gradient(135deg, var(--rd-accent-dark), var(--rd-accent));
    border-color: var(--rd-accent-dark);
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #384450, #556273);
    border-color: #384450;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 767.98px) {
    .report-actions form {
        width: 100%;
    }

    .summary-value {
        font-size: 1.5rem;
    }
}

@media print {
    @page {
        margin: 0.18in;
        size: landscape;
    }

    body {
        background: #fff;
        color: #000;
    }

    .print-hidden,
    .btn,
    .navbar,
    .report-actions,
    .alert,
    .badge.text-bg-warning {
        display: none !important;
    }

    .screen-only-inline,
    .logged-by-col {
        display: none !important;
    }

    .print-only-inline {
        display: inline !important;
    }

    .panel-card,
    .summary-card,
    .weather-banner {
        border: 1px solid #bbb;
        box-shadow: none;
    }

    .table-missing td {
        background: transparent !important;
    }

    main {
        padding-top: 0 !important;
    }

    .page-title {
        font-size: 1.08rem;
        line-height: 1.05;
    }

    .page-header,
    .weather-banner,
    .print-summary-row {
        margin-bottom: 0.18rem !important;
    }

    .page-header p,
    .page-header .text-secondary {
        margin-bottom: 0 !important;
        font-size: 0.63rem;
    }

    .summary-card {
        min-height: 0;
        padding: 0.28rem 0.38rem;
    }

    .summary-label {
        font-size: 0.5rem;
        margin-bottom: 0.08rem;
    }

    .summary-value {
        font-size: 0.78rem;
        line-height: 1;
    }

    .weather-label,
    .weather-headline,
    .weather-details,
    .weather-source {
        font-size: 0.58rem;
        line-height: 1.1;
        margin-bottom: 0.02rem;
    }

    .weather-banner {
        padding: 0.3rem 0.45rem;
    }

    .report-grid {
        display: grid;
        gap: 0.14rem;
        grid-template-columns: 1fr 1fr;
    }

    .report-region-card {
        break-inside: avoid;
        margin-bottom: 0 !important;
    }

    .region-header {
        min-height: 0;
        padding: 0.18rem 0.26rem;
    }

    .panel-title {
        font-size: 0.68rem;
        margin-bottom: 0;
        line-height: 1.05;
    }

    .report-table th,
    .report-table td {
        font-size: 0.5rem;
        line-height: 1.1;
        padding: 0.08rem 0.12rem;
        vertical-align: top;
    }

    .report-table .badge {
        display: none !important;
    }

    .report-table tfoot td {
        font-weight: 700;
    }

    .report-table .text-center {
        text-align: center !important;
        white-space: nowrap;
        width: 1%;
    }

    .print-only-inline {
        color: #000;
        font-size: 0.48rem;
        line-height: 1.05;
    }

    .print-muted {
        font-size: 0.46rem;
    }

    .table-missing td:first-child::after {
        color: #666;
        content: " (Missing)";
        font-size: 0.46rem;
    }

    .container-xxl {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
}