html, body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

.page { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

.sidebar { background-image: linear-gradient(180deg, #123a63 0%, #1b6ec2 90%); }
.sidebar .top-row { min-height: 3.5rem; }
.sidebar .navbar-brand { font-size: 1.05rem; color: #fff; }
.sidebar .nav-link { color: #d7e3f4; padding: .5rem 0; }
.sidebar .nav-link:hover { color: #fff; }
.sidebar .nav-link.active { color: #fff; font-weight: 600; }

.stat-card { min-width: 12rem; }

.auth-page { display: flex; align-items: center; justify-content: center;
             min-height: 100vh; background: #f0f4f9; }
.auth-card { width: 100%; max-width: 24rem; }

#blazor-error-ui {
    background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none; left: 0; padding: .6rem 1.25rem .7rem 1.25rem; position: fixed;
    width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

@media (min-width: 768px) {
    .page { flex-direction: row; }
    .sidebar { width: 240px; height: 100vh; position: sticky; top: 0; }
    .sidebar .navbar-toggler { display: none; }
    .sidebar .collapse { display: block !important; }
    .nav-scrollable { display: flex; flex-direction: column; height: calc(100vh - 3.5rem); padding-bottom: 1rem; }
    .nav-scrollable nav { display: flex; flex-direction: column; flex: 1; }
}

/* ---------- Mobile refinements ---------- */
@media (max-width: 767.98px) {
    .content { padding: .75rem !important; }

    /* Stat cards: clean 2-up grid instead of uneven wrapping */
    .stat-card { min-width: calc(50% - .5rem); flex: 1 1 calc(50% - .5rem); }
    .stat-card .h4 { font-size: 1.05rem; }
    .stat-card .card-body { padding: .6rem .75rem; }

    /* Compact tables; numbers stay on one line, horizontal scroll handles overflow */
    .table { font-size: .85rem; }
    .table td, .table th { padding: .4rem .45rem; white-space: nowrap; }

    .card-body { padding: .75rem; }
    h1.h4 { font-size: 1.15rem; }

    #forecastChart { max-height: 260px !important; }

    .btn-group-sm > .btn { padding: .25rem .45rem; font-size: .75rem; }

    /* Bigger touch targets in the nav */
    .sidebar .nav-link { padding: .65rem 0; font-size: 1.05rem; }
}

/* Keep number columns tight and readable at any size */
.table td.text-end, .table th.text-end { white-space: nowrap; }

/* Ended/inactive recurring series: grayed at the bottom of their section */
tr.series-ended td { opacity: .55; }