/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-9uz64mrcma] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-9uz64mrcma] {
    flex: 1;
}

.sidebar[b-9uz64mrcma] {
    background-color: #1a1446;
    background-image: radial-gradient(120% 60% at 50% 100%, rgba(147, 51, 234, 0.35) 0%, transparent 70%), linear-gradient(180deg, #0b2463 0%, #1e1452 55%, #3a0647 100%);
}

.top-row[b-9uz64mrcma] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-9uz64mrcma]  a, .top-row[b-9uz64mrcma]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-9uz64mrcma]  a:hover, .top-row[b-9uz64mrcma]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-9uz64mrcma]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-9uz64mrcma] {
        justify-content: space-between;
    }

    .top-row[b-9uz64mrcma]  a, .top-row[b-9uz64mrcma]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-9uz64mrcma] {
        flex-direction: row;
    }

    .sidebar[b-9uz64mrcma] {
        width: 260px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-9uz64mrcma] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-9uz64mrcma]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-9uz64mrcma], article[b-9uz64mrcma] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Top bar: brand, version, language switch and (on phones) the menu button */
.top-row[b-xodhzeyzj0] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

    .top-row .container-fluid[b-xodhzeyzj0] {
        flex-wrap: nowrap;
        padding: 0 0.75rem 0 1rem;
    }

.navbar-brand[b-xodhzeyzj0] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: 0.5rem;
}

.brand-mark[b-xodhzeyzj0] {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    margin: -0.15rem -0.1rem -0.15rem -0.2rem;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.5));
}

.brand-name[b-xodhzeyzj0] {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: white;
}

.brand-version[b-xodhzeyzj0] {
    font-size: 0.68rem;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    background-color: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
}

.top-row-actions[b-xodhzeyzj0] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.navbar-toggler[b-xodhzeyzj0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    font-size: 1.4rem;
    color: white;
    background-color: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 0.6rem;
}

    .navbar-toggler:focus[b-xodhzeyzj0] {
        box-shadow: none;
    }

    .navbar-toggler:focus-visible[b-xodhzeyzj0] {
        box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.45);
    }

/* DA | EN toggle; it stays in the top bar so it is reachable on phones without opening the menu */
.language-switch[b-xodhzeyzj0] {
    display: inline-flex;
    padding: 2px;
    background-color: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 999px;
}

    .language-switch button[b-xodhzeyzj0] {
        font: inherit;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        color: rgba(255,255,255,0.7);
        background: none;
        border: 0;
        border-radius: 999px;
        padding: 0.2rem 0.6rem;
    }

        .language-switch button:hover[b-xodhzeyzj0] {
            color: white;
        }

        .language-switch button.active[b-xodhzeyzj0] {
            background-color: white;
            color: #1e1b4b;
        }

/* Menu */
.nav-sections[b-xodhzeyzj0] {
    padding: 0.75rem 0.75rem 0.5rem;
}

.nav-section + .nav-section[b-xodhzeyzj0] {
    margin-top: 1rem;
}

.nav-section-title[b-xodhzeyzj0] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    padding: 0 0.75rem 0.4rem;
}

/* Links and the log out button share one look */
.nav-section[b-xodhzeyzj0]  .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.75rem;
    margin-bottom: 0.2rem;
    padding: 0.35rem 0.75rem 0.35rem 0.4rem;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    color: rgba(255,255,255,0.78);
    text-align: start;
    background: none;
    border: 0;
    border-radius: 0.75rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .nav-section[b-xodhzeyzj0]  .nav-link:hover {
        background-color: rgba(255,255,255,0.07);
        color: white;
    }

    .nav-section[b-xodhzeyzj0]  .nav-link.active {
        background: linear-gradient(90deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.06) 100%);
        color: white;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
    }

        .nav-section[b-xodhzeyzj0]  .nav-link.active::before {
            content: "";
            position: absolute;
            left: -0.75rem;
            top: 0.6rem;
            bottom: 0.6rem;
            width: 4px;
            border-radius: 0 4px 4px 0;
            background-color: #facc15;
        }

.nav-section[b-xodhzeyzj0]  .nav-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.55rem;
    font-size: 1.05rem;
    line-height: 1;
    background-color: rgba(255,255,255,0.08);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-section[b-xodhzeyzj0]  .nav-link.active .nav-icon {
    background: linear-gradient(135deg, #fde047 0%, #f59e0b 100%);
    color: #3b0764;
}

.nav-section[b-xodhzeyzj0]  .nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The account pages, listed under the account name while one of them is open */
.nav-sublist[b-xodhzeyzj0] {
    list-style: none;
    margin: 0.1rem 0 0.4rem 1.4rem;
    padding: 0 0 0 0.75rem;
    border-left: 1px solid rgba(255,255,255,0.14);
}

.nav-sublink[b-xodhzeyzj0] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.1rem;
    padding: 0.25rem 0.6rem;
    margin-bottom: 0.1rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    border-radius: 0.55rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .nav-sublink:hover[b-xodhzeyzj0] {
        color: white;
        background-color: rgba(255,255,255,0.07);
    }

    .nav-sublink.active[b-xodhzeyzj0] {
        color: white;
        font-weight: 600;
        background-color: rgba(255,255,255,0.12);
    }

    .nav-sublink i[b-xodhzeyzj0] {
        flex: none;
        width: 1rem;
        font-size: 0.95rem;
        text-align: center;
    }

    .nav-sublink.active i[b-xodhzeyzj0] {
        color: #facc15;
    }

    .nav-sublink span[b-xodhzeyzj0] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* The wizard closes off the wide sidebar; in the phone menu it would push the page down */
.nav-footer[b-xodhzeyzj0] {
    display: none;
    margin-top: auto;
    padding: 1.5rem 1.25rem 1.25rem;
    text-align: center;
}

    .nav-footer img[b-xodhzeyzj0] {
        width: 100%;
        max-width: 170px;
        height: auto;
        filter: drop-shadow(0 10px 28px rgba(168, 85, 247, 0.45));
    }

    .nav-footer p[b-xodhzeyzj0] {
        margin: 0.75rem 0 0;
        font-size: 0.72rem;
        color: rgba(255,255,255,0.45);
    }

@media (min-width: 641px) {
    .navbar-toggler[b-xodhzeyzj0] {
        display: none;
    }

    .collapse[b-xodhzeyzj0] {
        /* Never collapse the sidebar for wide screens */
        display: flex;
    }

    .nav-scrollable[b-xodhzeyzj0] {
        /* A column, so the wizard footer sits at the bottom. Only here: on phones a display value
           would override Bootstrap's .collapse and keep the menu open */
        display: flex;
        flex-direction: column;
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }

    .nav-footer[b-xodhzeyzj0] {
        display: block;
    }
}

@media (max-width: 640.98px) {
    .nav-sections[b-xodhzeyzj0] {
        padding-bottom: 1rem;
    }

    .nav-section[b-xodhzeyzj0]  .nav-link {
        min-height: 3rem;
    }
}
/* /Components/Pages/Gas.razor.rz.scp.css */
/* Colours come from wwwroot/css/theme.css, so the page follows the light or dark theme */
.gas-dashboard[b-5gzi60bzc2] {
    max-width: 1100px;
    color: var(--text-primary);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.dashboard-header h1[b-5gzi60bzc2] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.subtitle[b-5gzi60bzc2] {
    margin: 0.25rem 0 0;
    color: var(--text-secondary);
}

.filters[b-5gzi60bzc2] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.25rem 0;
}

.segmented[b-5gzi60bzc2] {
    display: inline-flex;
    padding: 3px;
    border-radius: 10px;
    background: var(--control-track);
}

    .segmented button[b-5gzi60bzc2] {
        border: 0;
        border-radius: 8px;
        padding: 0.375rem 0.875rem;
        background: transparent;
        color: var(--text-secondary);
        font-size: 0.875rem;
        font-weight: 600;
        transition: background 120ms ease, color 120ms ease;
    }

        .segmented button:hover[b-5gzi60bzc2] {
            color: var(--text-primary);
        }

        .segmented button.active[b-5gzi60bzc2] {
            background: var(--surface-raised);
            color: var(--text-primary);
            box-shadow: var(--raised-shadow);
        }

        .segmented button:focus-visible[b-5gzi60bzc2] {
            outline: 2px solid var(--series-1);
            outline-offset: 1px;
        }

.ghost-button[b-5gzi60bzc2] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 0;
    border-radius: 10px;
    padding: 0.5rem 0.95rem;
    background: var(--control-track);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
}

    .ghost-button:hover[b-5gzi60bzc2] {
        color: var(--text-primary);
    }

    .ghost-button:focus-visible[b-5gzi60bzc2] {
        outline: 2px solid var(--series-1);
        outline-offset: 1px;
    }

/* From and to dates, styled as on the usage page */
.date-range[b-5gzi60bzc2] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.range-dash[b-5gzi60bzc2] {
    color: var(--text-muted);
}

.date-field[b-5gzi60bzc2] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.2rem 0.6rem;
    background: var(--surface-raised);
    color: var(--text-secondary);
}

    .date-field input[b-5gzi60bzc2] {
        border: 0;
        padding: 0.2rem 0;
        background: transparent;
        color: var(--text-primary);
        font-size: 0.875rem;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

        .date-field input:focus[b-5gzi60bzc2] {
            outline: none;
        }

    .date-field:focus-within[b-5gzi60bzc2] {
        outline: 2px solid var(--series-1);
        outline-offset: 1px;
    }

.card[b-5gzi60bzc2] {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    padding: 1.25rem;
}

.dashboard-body[b-5gzi60bzc2] {
    display: grid;
    gap: 1rem;
    transition: opacity 150ms ease;
}

    .dashboard-body.is-loading[b-5gzi60bzc2] {
        opacity: 0.55;
    }

.card-header-row[b-5gzi60bzc2] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

    .card-header-row h2[b-5gzi60bzc2] {
        margin: 0;
        font-size: 1.0625rem;
        font-weight: 650;
    }

.note[b-5gzi60bzc2] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.empty-state[b-5gzi60bzc2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-secondary);
}

    .empty-state p[b-5gzi60bzc2] {
        margin: 0;
    }

    .empty-state i[b-5gzi60bzc2] {
        font-size: 1.5rem;
        color: var(--series-1);
    }

/* Four headline numbers */
.stats[b-5gzi60bzc2] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.stat[b-5gzi60bzc2] {
    display: grid;
    gap: 0.2rem;
}

.stat-label[b-5gzi60bzc2] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.stat-value[b-5gzi60bzc2] {
    font-size: 1.625rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

    .stat-value small[b-5gzi60bzc2] {
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--text-secondary);
    }

.stat-hint[b-5gzi60bzc2] {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Line chart: the axis labels are HTML beside a stretched SVG, so text never scales with the plot */
.chart[b-5gzi60bzc2] {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 220px auto;
    column-gap: 0.5rem;
}

.chart-axis[b-5gzi60bzc2] {
    position: relative;
    min-width: 2.5rem;
}

    .chart-axis span[b-5gzi60bzc2] {
        position: absolute;
        right: 0;
        transform: translateY(-50%);
        font-size: 0.75rem;
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
    }

.chart-plot[b-5gzi60bzc2] {
    position: relative;
}

    .chart-plot svg[b-5gzi60bzc2] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
    }

.gridline[b-5gzi60bzc2] {
    stroke: var(--gridline);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.line[b-5gzi60bzc2] {
    fill: none;
    stroke: var(--series-1);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.chart-hits[b-5gzi60bzc2] {
    position: absolute;
    inset: 0;
    display: flex;
}

.hit[b-5gzi60bzc2] {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

    .hit:hover[b-5gzi60bzc2] {
        background: linear-gradient(var(--axis), var(--axis)) center / 1px 100% no-repeat;
    }

.marker[b-5gzi60bzc2] {
    position: absolute;
    left: 50%;
    width: 10px;
    height: 10px;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background: var(--series-1);
    transform: translate(-50%, -50%);
    opacity: 0;
}

.tip[b-5gzi60bzc2] {
    position: absolute;
    z-index: 2;
    display: none;
    gap: 0.1rem;
    margin-top: 0.75rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-raised);
    box-shadow: var(--raised-shadow);
    font-size: 0.8125rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

.tip-right .tip[b-5gzi60bzc2] {
    left: calc(50% + 8px);
}

.tip-left .tip[b-5gzi60bzc2] {
    right: calc(50% + 8px);
}

.tip-muted[b-5gzi60bzc2] {
    color: var(--text-secondary);
}

.hit:hover .marker[b-5gzi60bzc2] {
    opacity: 1;
}

.hit:hover .tip[b-5gzi60bzc2] {
    display: grid;
}

.chart-dates[b-5gzi60bzc2] {
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    padding-top: 0.375rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Daily prices, newest first */
.table-scroll[b-5gzi60bzc2] {
    overflow-x: auto;
}

.gas-table[b-5gzi60bzc2] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

    .gas-table th[b-5gzi60bzc2] {
        padding: 0.5rem 0.625rem;
        border-bottom: 1px solid var(--border);
        color: var(--text-secondary);
        font-size: 0.75rem;
        font-weight: 600;
        text-align: left;
        white-space: nowrap;
    }

    .gas-table td[b-5gzi60bzc2] {
        padding: 0.5rem 0.625rem;
        border-bottom: 1px solid var(--border);
    }

    .gas-table tbody tr:last-child td[b-5gzi60bzc2] {
        border-bottom: 0;
    }

    .gas-table tbody tr:hover[b-5gzi60bzc2] {
        background: var(--hover-wash);
    }

    .gas-table .num[b-5gzi60bzc2] {
        text-align: right;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .gas-table .strong[b-5gzi60bzc2] {
        font-weight: 650;
    }

.day-short[b-5gzi60bzc2] {
    display: none;
}

.charges-note[b-5gzi60bzc2] {
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.list-end[b-5gzi60bzc2] {
    min-height: 1px;
    padding-top: 0.75rem;
    text-align: center;
}

.attribution[b-5gzi60bzc2] {
    margin: 1rem 0 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
}

@media (max-width: 900px) {
    .stats[b-5gzi60bzc2] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640.98px) {
    .dashboard-header h1[b-5gzi60bzc2] {
        font-size: 1.5rem;
    }

    .subtitle[b-5gzi60bzc2] {
        font-size: 0.875rem;
    }

    .filters[b-5gzi60bzc2] {
        margin: 1rem 0;
    }

    .segmented[b-5gzi60bzc2] {
        flex: 1 1 100%;
    }

    .date-range[b-5gzi60bzc2] {
        flex: 1 1 0;
    }

        .date-range .date-field[b-5gzi60bzc2] {
            flex: 1 1 0;
            min-height: 44px;
        }

            .date-range .date-field input[b-5gzi60bzc2] {
                width: 100%;
            }

    .ghost-button[b-5gzi60bzc2] {
        min-height: 44px;
    }

        .segmented button[b-5gzi60bzc2] {
            flex: 1 1 0;
            min-height: 44px;
            font-size: 0.9375rem;
        }

    .dashboard-body[b-5gzi60bzc2],
    .stats[b-5gzi60bzc2] {
        gap: 0.75rem;
    }

    .card[b-5gzi60bzc2] {
        padding: 1rem;
    }

    .stat-value[b-5gzi60bzc2] {
        font-size: 1.375rem;
    }

    .chart[b-5gzi60bzc2] {
        grid-template-rows: 180px auto;
    }

    /* The breakdown needs the width of a larger screen; the CSV has it too */
    .gas-table .part[b-5gzi60bzc2] {
        display: none;
    }

    /* Short dates keep each row on one line */
    .day-long[b-5gzi60bzc2] {
        display: none;
    }

    .day-short[b-5gzi60bzc2] {
        display: inline;
    }

    .gas-table th[b-5gzi60bzc2],
    .gas-table td[b-5gzi60bzc2] {
        padding: 0.5rem 0.375rem;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Colours come from wwwroot/css/theme.css, so the dashboard follows the light or dark theme */
.price-dashboard[b-e0lqowxa58] {
    max-width: 1100px;
    color: var(--text-primary);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.dashboard-header h1[b-e0lqowxa58] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.subtitle[b-e0lqowxa58] {
    margin: 0.25rem 0 0;
    color: var(--text-secondary);
}

/* One filter row, above everything it scopes */
.filters[b-e0lqowxa58] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.25rem 0;
}

.segmented[b-e0lqowxa58] {
    display: inline-flex;
    padding: 3px;
    border-radius: 10px;
    background: var(--control-track);
}

    .segmented button[b-e0lqowxa58] {
        border: 0;
        border-radius: 8px;
        padding: 0.375rem 0.875rem;
        background: transparent;
        color: var(--text-secondary);
        font-size: 0.875rem;
        font-weight: 600;
        transition: background 120ms ease, color 120ms ease;
    }

        .segmented button:hover[b-e0lqowxa58] {
            color: var(--text-primary);
        }

        .segmented button.active[b-e0lqowxa58] {
            background: var(--surface-raised);
            color: var(--text-primary);
            box-shadow: var(--raised-shadow);
        }

        .segmented button:focus-visible[b-e0lqowxa58] {
            outline: 2px solid var(--series-1);
            outline-offset: 1px;
        }

/* Day navigation: previous/next, a date picker and a way back to today */
.date-nav[b-e0lqowxa58] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 3px;
    border-radius: 10px;
    background: var(--control-track);
}

.icon-button[b-e0lqowxa58],
.today-button[b-e0lqowxa58] {
    border: 0;
    border-radius: 8px;
    padding: 0.375rem 0.6rem;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
    transition: background 120ms ease, color 120ms ease;
}

    .icon-button:hover:not(:disabled)[b-e0lqowxa58],
    .today-button:hover[b-e0lqowxa58] {
        background: var(--surface-raised);
        color: var(--text-primary);
    }

    .icon-button:disabled[b-e0lqowxa58] {
        opacity: 0.35;
    }

    .icon-button:focus-visible[b-e0lqowxa58],
    .today-button:focus-visible[b-e0lqowxa58] {
        outline: 2px solid var(--series-1);
        outline-offset: 1px;
    }

.today-button[b-e0lqowxa58] {
    color: var(--series-1);
}

.date-field[b-e0lqowxa58] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    border-radius: 8px;
    padding: 0.2rem 0.5rem;
    background: var(--surface-raised);
    box-shadow: var(--raised-shadow);
    color: var(--text-secondary);
}

    .date-field input[b-e0lqowxa58] {
        border: 0;
        padding: 0.15rem 0;
        background: transparent;
        color: var(--text-primary);
        font-size: 0.875rem;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

        .date-field input:focus[b-e0lqowxa58] {
            outline: none;
        }

    .date-field:focus-within[b-e0lqowxa58] {
        outline: 2px solid var(--series-1);
        outline-offset: 1px;
    }

/* Grid company for the total price, styled like the date field */
.select-field[b-e0lqowxa58] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    border-radius: 10px;
    padding: 0.2rem 0.6rem;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

    .select-field select[b-e0lqowxa58] {
        border: 0;
        padding: 0.2rem 0;
        background: transparent;
        color: var(--text-primary);
        font-size: 0.875rem;
        font-weight: 600;
    }

        .select-field select:focus[b-e0lqowxa58] {
            outline: none;
        }

        /* The open list is drawn by the browser; without its own colours it stays white with the light text of the dark theme */
        .select-field select option[b-e0lqowxa58] {
            background: var(--surface-raised);
            color: var(--text-primary);
            font-weight: 400;
        }

    .select-field:focus-within[b-e0lqowxa58] {
        outline: 2px solid var(--series-1);
        outline-offset: 1px;
    }

.option-hint[b-e0lqowxa58] {
    font-weight: 400;
    color: var(--text-muted);
}

.card[b-e0lqowxa58] {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    padding: 1.25rem;
}

.dashboard-body[b-e0lqowxa58] {
    display: grid;
    gap: 1rem;
    transition: opacity 150ms ease;
}

    /* Refetch keeps the frame: hold the previous render while new data loads */
    .dashboard-body.is-loading[b-e0lqowxa58] {
        opacity: 0.55;
    }

.card-header-row[b-e0lqowxa58] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

    .card-header-row h2[b-e0lqowxa58] {
        margin: 0;
        font-size: 1.0625rem;
        font-weight: 650;
    }

.note[b-e0lqowxa58] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.empty-state[b-e0lqowxa58] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-secondary);
}

    .empty-state p[b-e0lqowxa58] {
        margin: 0;
    }

    .empty-state i[b-e0lqowxa58] {
        font-size: 1.5rem;
        color: var(--series-1);
    }

@media (max-width: 640.98px) {
    .dashboard-header h1[b-e0lqowxa58] {
        font-size: 1.5rem;
    }

    .subtitle[b-e0lqowxa58] {
        font-size: 0.875rem;
    }

    .option-hint[b-e0lqowxa58] {
        display: none;
    }

    /* Each toggle takes half the row with thumb-sized buttons */
    .filters[b-e0lqowxa58] {
        gap: 0.5rem;
        margin: 1rem 0;
    }

    .segmented[b-e0lqowxa58] {
        flex: 1 1 0;
    }

    .select-field[b-e0lqowxa58] {
        flex: 1 1 0;
        min-height: 44px;
    }

        .select-field select[b-e0lqowxa58] {
            flex: 1 1 auto;
            font-size: 0.9375rem;
        }

        .segmented button[b-e0lqowxa58] {
            flex: 1 1 0;
            min-height: 44px;
            padding: 0.375rem 0.5rem;
            font-size: 0.9375rem;
        }

    .dashboard-body[b-e0lqowxa58] {
        gap: 0.75rem;
    }

    .card[b-e0lqowxa58] {
        padding: 1rem;
    }
}

.list-end[b-e0lqowxa58] {
    min-height: 1px;
    padding-top: 0.75rem;
    text-align: center;
}

.attribution[b-e0lqowxa58] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
}

.attribution a[b-e0lqowxa58] {
    color: inherit;
}

/* "Now" button: sticks to the top of the window over the price list and appears only when the "Now" row is out of view.
   The anchor takes no room, so the list does not move when the button comes and goes. */
.jump-now-anchor[b-e0lqowxa58] {
    position: sticky;
    top: 0.75rem;
    z-index: 4;
    display: flex;
    justify-content: center;
    height: 0;
}

.jump-now[b-e0lqowxa58] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2.25rem;
    padding: 0 1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-raised);
    box-shadow: var(--raised-shadow);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 650;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity 150ms ease, transform 150ms ease, visibility 0s linear 150ms;
}

    .jump-now.is-shown[b-e0lqowxa58] {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: opacity 150ms ease, transform 150ms ease;
    }

    /* Points up when "Now" is above the window */
    .jump-now.is-up i[b-e0lqowxa58] {
        transform: rotate(180deg);
    }

    .jump-now:hover[b-e0lqowxa58] {
        background: var(--hover-wash);
    }

    .jump-now:focus-visible[b-e0lqowxa58] {
        outline: 2px solid var(--focus-ring);
        outline-offset: 2px;
    }

@media (prefers-reduced-motion: reduce) {
    .jump-now[b-e0lqowxa58],
    .jump-now.is-shown[b-e0lqowxa58] {
        transition: none;
    }
}
/* /Components/Pages/Suppliers.razor.rz.scp.css */
/* Colours come from wwwroot/css/theme.css, so the table follows the light or dark theme */
.suppliers-page[b-fwbcf33l2t] {
    max-width: 1100px;
    color: var(--text-primary);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.suppliers-header h1[b-fwbcf33l2t] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.subtitle[b-fwbcf33l2t] {
    margin: 0.25rem 0 0;
    color: var(--text-secondary);
}

.data-fetched[b-fwbcf33l2t] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.filters[b-fwbcf33l2t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
}

.filter-label[b-fwbcf33l2t] {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.segmented[b-fwbcf33l2t] {
    display: inline-flex;
    padding: 3px;
    border-radius: 10px;
    background: var(--control-track);
}

    .segmented button[b-fwbcf33l2t] {
        border: 0;
        border-radius: 8px;
        padding: 0.375rem 0.75rem;
        background: transparent;
        color: var(--text-secondary);
        font-size: 0.875rem;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        transition: background 120ms ease, color 120ms ease;
    }

        .segmented button:hover[b-fwbcf33l2t] {
            color: var(--text-primary);
        }

        .segmented button.active[b-fwbcf33l2t] {
            background: var(--surface-raised);
            color: var(--text-primary);
            box-shadow: var(--raised-shadow);
        }

        .segmented button:focus-visible[b-fwbcf33l2t] {
            outline: 2px solid var(--series-1);
            outline-offset: 1px;
        }

.option-hint[b-fwbcf33l2t] {
    font-weight: 400;
    color: var(--text-muted);
}

.table-card[b-fwbcf33l2t] {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    overflow-x: auto;
}

.label-short[b-fwbcf33l2t] {
    display: none;
}

.supplier-table[b-fwbcf33l2t] {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

    .supplier-table th[b-fwbcf33l2t] {
        padding: 0.6rem 0.9rem;
        background: var(--control-track);
        color: var(--text-secondary);
        font-size: 0.75rem;
        font-weight: 650;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        text-align: left;
        white-space: nowrap;
    }

    .supplier-table td[b-fwbcf33l2t] {
        padding: 0.75rem 0.9rem;
        border-top: 1px solid var(--gridline);
        vertical-align: middle;
    }

    .supplier-table tbody tr[b-fwbcf33l2t] {
        transition: background 120ms ease;
    }

        .supplier-table tbody tr:hover[b-fwbcf33l2t] {
            background: var(--hover-wash);
        }

        .supplier-table tbody tr.is-cheapest[b-fwbcf33l2t] {
            background: var(--good-wash);
        }

.col-rank[b-fwbcf33l2t] {
    width: 2.5rem;
    color: var(--text-muted);
    font-weight: 600;
    text-align: center !important;
}

.supplier-table th.col-num[b-fwbcf33l2t],
.supplier-table td.col-num[b-fwbcf33l2t] {
    text-align: right;
    white-space: nowrap;
}

.col-yearly[b-fwbcf33l2t] {
    min-width: 9rem;
}

.sort-button[b-fwbcf33l2t] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

    .sort-button i[b-fwbcf33l2t] {
        font-size: 0.7rem;
        opacity: 0.5;
    }

    .sort-button:hover[b-fwbcf33l2t],
    .sort-button.is-sorted[b-fwbcf33l2t] {
        color: var(--text-primary);
    }

        .sort-button.is-sorted i[b-fwbcf33l2t] {
            opacity: 1;
            color: var(--series-1);
        }

    .sort-button:focus-visible[b-fwbcf33l2t] {
        outline: 2px solid var(--series-1);
        outline-offset: 2px;
        border-radius: 4px;
    }

.name-cell[b-fwbcf33l2t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.supplier-link[b-fwbcf33l2t] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: inherit;
    text-decoration: none;
}

    .supplier-link:hover .supplier-name[b-fwbcf33l2t] {
        color: var(--link);
        text-decoration: underline;
    }

.supplier-avatar[b-fwbcf33l2t] {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    background: hsl(var(--hue) 65% 50%);
    color: #ffffff;
    font-weight: 700;
    position: relative;
    overflow: hidden;
}

    /* Logos sit on white, since most are drawn for a light background */
    .supplier-avatar img[b-fwbcf33l2t] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 4px;
        background: #ffffff;
        object-fit: contain;
    }

.supplier-text[b-fwbcf33l2t] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.supplier-name[b-fwbcf33l2t] {
    font-weight: 650;
}

    .supplier-name i[b-fwbcf33l2t] {
        font-size: 0.7rem;
        color: var(--text-muted);
    }

.supplier-product[b-fwbcf33l2t] {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.badge-intro[b-fwbcf33l2t] {
    display: inline-block;
    margin-left: 0.3rem;
    border-radius: 999px;
    padding: 0 0.45rem;
    background: var(--manage-amber-bg);
    color: var(--manage-amber);
    font-size: 0.7rem;
    font-weight: 700;
    vertical-align: 1px;
}

.suppliers-empty[b-fwbcf33l2t] {
    padding: 1rem 0;
    color: var(--text-secondary);
}

.supplier-note[b-fwbcf33l2t] {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.badge-cheapest[b-fwbcf33l2t] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    background: var(--price-low);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
}

.amount[b-fwbcf33l2t] {
    font-size: 1.05rem;
    font-weight: 650;
}

    .amount.is-zero[b-fwbcf33l2t] {
        color: var(--good-text);
    }

.unit[b-fwbcf33l2t] {
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.yearly-bar[b-fwbcf33l2t] {
    display: block;
    height: 4px;
    margin-top: 0.35rem;
    border-radius: 2px;
    background: var(--control-track);
    overflow: hidden;
}

    .yearly-bar span[b-fwbcf33l2t] {
        display: block;
        height: 100%;
        margin-left: auto;
        border-radius: 2px;
        background: var(--series-1);
    }

.is-cheapest .yearly-bar span[b-fwbcf33l2t] {
    background: var(--price-low);
}

.suppliers-footnote[b-fwbcf33l2t] {
    margin: 1rem 0 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.col-rating[b-fwbcf33l2t] {
    white-space: nowrap;
}

.ratings[b-fwbcf33l2t] {
    display: inline-flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ratings-inline[b-fwbcf33l2t] {
    display: none;
}

.rating[b-fwbcf33l2t] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-primary);
    font-size: 0.85rem;
    text-decoration: none;
}

    .rating:hover .rating-source[b-fwbcf33l2t] {
        color: var(--link);
        text-decoration: underline;
    }

.rating-trustpilot i[b-fwbcf33l2t] {
    color: #00b67a;
}

.google-g[b-fwbcf33l2t] {
    display: inline-grid;
    place-items: center;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    background: #4285f4;
    color: #ffffff;
    font-size: 0.6rem;
    font-weight: 800;
}

.rating-value[b-fwbcf33l2t] {
    min-width: 1.6rem;
    font-weight: 650;
}

.rating-source[b-fwbcf33l2t] {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* Phones: drop the rank and the notes, keep the four numbers readable */
@media (max-width: 640px) {
    .col-rank[b-fwbcf33l2t],
    .supplier-note[b-fwbcf33l2t] {
        display: none;
    }

    .supplier-table th[b-fwbcf33l2t],
    .supplier-table td[b-fwbcf33l2t] {
        padding: 0.6rem 0.3rem;
    }

    .supplier-name[b-fwbcf33l2t] {
        font-size: 0.9rem;
    }

    .supplier-product[b-fwbcf33l2t] {
        font-size: 0.75rem;
        overflow-wrap: anywhere;
    }

    .unit[b-fwbcf33l2t] {
        font-size: 0.65rem;
    }

    .supplier-table th[b-fwbcf33l2t] {
        font-size: 0.68rem;
        letter-spacing: 0.02em;
    }

    .col-rating[b-fwbcf33l2t],
    .label-full[b-fwbcf33l2t],
    .supplier-name i[b-fwbcf33l2t],
    .filters .option-hint[b-fwbcf33l2t] {
        display: none;
    }

    .label-short[b-fwbcf33l2t] {
        display: inline;
    }

    /* The ratings move under the supplier's name, side by side */
    .name-cell[b-fwbcf33l2t] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .ratings-inline[b-fwbcf33l2t] {
        display: block;
    }

        .ratings-inline .ratings[b-fwbcf33l2t] {
            flex-direction: row;
            gap: 0.6rem;
        }

        .ratings-inline .rating-source[b-fwbcf33l2t] {
            display: none;
        }

    .supplier-table td.col-name[b-fwbcf33l2t] {
        padding-left: 0.75rem;
    }

    /* The logo goes above the name, so the numbers keep their width */
    .supplier-avatar[b-fwbcf33l2t] {
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 7px;
        font-size: 0.75rem;
    }

    .supplier-link[b-fwbcf33l2t] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }

    .col-yearly[b-fwbcf33l2t] {
        min-width: 0;
    }

    .amount[b-fwbcf33l2t] {
        font-size: 0.95rem;
    }

    .badge-cheapest[b-fwbcf33l2t] {
        font-size: 0.7rem;
    }
}
/* /Components/Pages/Usage.razor.rz.scp.css */
/* Same look as the price page (Home.razor.css); colours come from wwwroot/css/theme.css, so it follows the light or dark theme */
.usage-page[b-0lpx7jeypn] {
    max-width: 1100px;
    color: var(--text-primary);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.page-header h1[b-0lpx7jeypn] {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.subtitle[b-0lpx7jeypn] {
    margin: 0.25rem 0 0;
    color: var(--text-secondary);
}

.stored-note[b-0lpx7jeypn] {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.stored-note .bi[b-0lpx7jeypn] {
    margin-right: 0.25rem;
}

.card[b-0lpx7jeypn] {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    padding: 1.25rem;
}

.note[b-0lpx7jeypn] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

/* Refresh tokens: one pill per token, the chosen one lit */
.token-bar[b-0lpx7jeypn] {
    margin: 1.25rem 0 0;
}

.token-chips[b-0lpx7jeypn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.token-chip[b-0lpx7jeypn] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

    .token-chip:hover[b-0lpx7jeypn] {
        color: var(--text-primary);
        border-color: var(--series-1);
    }

    .token-chip.active[b-0lpx7jeypn] {
        border-color: transparent;
        background: var(--series-1);
        color: var(--on-series);
        box-shadow: 0 4px 14px -6px var(--series-1);
    }

    .token-chip.add[b-0lpx7jeypn] {
        border-style: dashed;
        background: transparent;
    }

        .token-chip.add.active[b-0lpx7jeypn] {
            background: var(--control-track);
            color: var(--text-primary);
            box-shadow: none;
        }

    .token-chip:focus-visible[b-0lpx7jeypn] {
        outline: 2px solid var(--series-1);
        outline-offset: 2px;
    }

.chip-badge[b-0lpx7jeypn] {
    border-radius: 999px;
    padding: 0 0.45rem;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.45;
}

    .chip-badge.warn[b-0lpx7jeypn] {
        background: var(--manage-warn-bg);
        color: var(--manage-warn);
    }

    .chip-badge.bad[b-0lpx7jeypn] {
        background: var(--bad-wash);
        color: var(--bad-text);
    }

.token-manage[b-0lpx7jeypn] {
    margin-left: 0.25rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
}

    .token-manage:hover[b-0lpx7jeypn] {
        color: var(--text-primary);
    }

/* Bootstrap's .card is a flex column; this form lays itself out as a block with a field grid */
.token-add[b-0lpx7jeypn] {
    display: block;
    margin-top: 0.75rem;
}

.token-add-head[b-0lpx7jeypn] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 1.1rem;
}

    .token-add-head h2[b-0lpx7jeypn] {
        margin: 0 0 0.2rem;
        font-size: 1.0625rem;
        font-weight: 700;
        color: var(--text-primary);
    }

    .token-add-head .note[b-0lpx7jeypn] {
        margin: 0;
    }

.token-add-icon[b-0lpx7jeypn] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 12px;
    background: var(--control-track);
    color: var(--series-1);
    font-size: 1.15rem;
}

.token-add-fields[b-0lpx7jeypn] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
    align-items: end;
    gap: 0.75rem;
}

.token-add .field[b-0lpx7jeypn] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.token-add input[b-0lpx7jeypn] {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    background: var(--surface-raised);
    color: var(--text-primary);
    font-size: 0.9375rem;
}

    .token-add input[b-0lpx7jeypn]::placeholder {
        color: var(--text-secondary);
        opacity: 0.75;
    }

    .token-add input:focus[b-0lpx7jeypn] {
        outline: 2px solid var(--series-1);
        outline-offset: 1px;
    }

.token-add .primary-button[b-0lpx7jeypn] {
    min-height: 42px;
    justify-content: center;
    white-space: nowrap;
}

.token-add .form-error[b-0lpx7jeypn] {
    margin-top: 0.75rem;
}

.token-add-foot[b-0lpx7jeypn] {
    margin: 1rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
}

    .token-add-foot .bi[b-0lpx7jeypn] {
        margin-right: 0.25rem;
    }

.form-error[b-0lpx7jeypn] {
    flex-basis: 100%;
    margin: 0;
    color: var(--bad-text);
    font-size: 0.875rem;
}

.primary-button[b-0lpx7jeypn],
.ghost-button[b-0lpx7jeypn] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 0;
    border-radius: 10px;
    padding: 0.5rem 0.95rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.primary-button[b-0lpx7jeypn] {
    background: var(--series-1);
    color: var(--on-series);
}

.ghost-button[b-0lpx7jeypn] {
    background: var(--control-track);
    color: var(--text-secondary);
}

    .ghost-button:hover[b-0lpx7jeypn] {
        color: var(--text-primary);
    }

/* Filters, styled as on the price page */
.filters[b-0lpx7jeypn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1rem 0 0.75rem;
}

.segmented[b-0lpx7jeypn] {
    display: inline-flex;
    padding: 3px;
    border-radius: 10px;
    background: var(--control-track);
}

    .segmented button[b-0lpx7jeypn] {
        border: 0;
        border-radius: 8px;
        padding: 0.375rem 0.875rem;
        background: transparent;
        color: var(--text-secondary);
        font-size: 0.875rem;
        font-weight: 600;
        white-space: nowrap;
        transition: background 120ms ease, color 120ms ease;
    }

        .segmented button:hover[b-0lpx7jeypn] {
            color: var(--text-primary);
        }

        .segmented button.active[b-0lpx7jeypn] {
            background: var(--surface-raised);
            color: var(--text-primary);
            box-shadow: var(--raised-shadow);
        }

        .segmented button:focus-visible[b-0lpx7jeypn] {
            outline: 2px solid var(--series-1);
            outline-offset: 1px;
        }

.select-field[b-0lpx7jeypn],
.date-field[b-0lpx7jeypn] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.2rem 0.6rem;
    background: var(--surface-raised);
    color: var(--text-secondary);
}

    .select-field select[b-0lpx7jeypn],
    .date-field input[b-0lpx7jeypn] {
        border: 0;
        padding: 0.2rem 0;
        background: transparent;
        color: var(--text-primary);
        font-size: 0.875rem;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

        .select-field select:focus[b-0lpx7jeypn],
        .date-field input:focus[b-0lpx7jeypn] {
            outline: none;
        }

        .select-field select option[b-0lpx7jeypn],
        .inline-select option[b-0lpx7jeypn] {
            background: var(--surface-raised);
            color: var(--text-primary);
        }

    .select-field:focus-within[b-0lpx7jeypn],
    .date-field:focus-within[b-0lpx7jeypn] {
        outline: 2px solid var(--series-1);
        outline-offset: 1px;
    }

.date-range[b-0lpx7jeypn] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.range-dash[b-0lpx7jeypn] {
    color: var(--text-muted);
}

.meter-line[b-0lpx7jeypn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.meter-id[b-0lpx7jeypn] {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.inline-select[b-0lpx7jeypn] {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.15rem 0.4rem;
    background: var(--surface-raised);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.empty-state[b-0lpx7jeypn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    color: var(--text-secondary);
}

    .empty-state p[b-0lpx7jeypn] {
        margin: 0;
    }

    .empty-state i[b-0lpx7jeypn] {
        font-size: 1.5rem;
        color: var(--series-1);
    }

    .empty-state.error i[b-0lpx7jeypn] {
        color: var(--bad-text);
    }

.spin[b-0lpx7jeypn] {
    display: inline-block;
    animation: spin-b-0lpx7jeypn 0.9s linear infinite;
}

@keyframes spin-b-0lpx7jeypn {
    to {
        transform: rotate(360deg);
    }
}

.usage-body[b-0lpx7jeypn] {
    display: grid;
    gap: 1rem;
    transition: opacity 150ms ease;
}

    .usage-body.is-loading[b-0lpx7jeypn] {
        opacity: 0.55;
    }

.card-header-row[b-0lpx7jeypn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

    .card-header-row h2[b-0lpx7jeypn] {
        margin: 0;
        font-size: 1.0625rem;
        font-weight: 650;
    }

/* Key figures */
.stats[b-0lpx7jeypn] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.stat[b-0lpx7jeypn] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    position: relative;
    overflow: hidden;
}

    .stat[b-0lpx7jeypn]::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 3px;
        background: linear-gradient(90deg, var(--part-spot), var(--part-grid), var(--part-vat));
        opacity: 0.85;
    }

.stat-label[b-0lpx7jeypn] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.stat-value[b-0lpx7jeypn] {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

    .stat-value small[b-0lpx7jeypn] {
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-secondary);
        letter-spacing: 0;
    }

.stat .note[b-0lpx7jeypn] {
    margin: 0;
}

/* Parts of the price, coloured as on the price page */
.part-spot[b-0lpx7jeypn] { background: var(--part-spot); }
.part-grid[b-0lpx7jeypn] { background: var(--part-grid); }
.part-tax[b-0lpx7jeypn] { background: var(--part-tax); }
.part-vat[b-0lpx7jeypn] { background: var(--part-vat); }

.dot[b-0lpx7jeypn] {
    display: inline-block;
    flex: none;
    width: 0.6rem;
    height: 0.6rem;
    margin-right: 0.4rem;
    border-radius: 3px;
}

.legend[b-0lpx7jeypn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

    .legend li[b-0lpx7jeypn] {
        display: inline-flex;
        align-items: center;
    }

/* Two lines on one plot, usage scaled to the left axis and price to the right; the columns on top carry the hover text */
.chart-graph[b-0lpx7jeypn] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 0.5rem;
}

.chart-yaxis[b-0lpx7jeypn] {
    position: relative;
    align-self: start;
    height: 200px;
    min-width: 3.25rem;
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

    .chart-yaxis span[b-0lpx7jeypn] {
        position: absolute;
        transform: translateY(50%);
        white-space: nowrap;
        line-height: 1;
    }

    .axis-kwh[b-0lpx7jeypn] {
        text-align: right;
    }

        .axis-kwh span[b-0lpx7jeypn] {
            right: 0;
        }

    .axis-kr span[b-0lpx7jeypn] {
        left: 0;
    }

.chart-scroll[b-0lpx7jeypn] {
    display: flex;
    flex-direction: row-reverse;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.chart-track[b-0lpx7jeypn] {
    flex: none;
    width: 100%;
}

.chart[b-0lpx7jeypn] {
    position: relative;
    height: 200px;
    border-bottom: 1px solid var(--axis);
    background-image: linear-gradient(var(--gridline) 1px, transparent 1px);
    background-size: 100% 50%;
}

.chart-lines[b-0lpx7jeypn] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.chart-line[b-0lpx7jeypn] {
    fill: none;
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.line-kwh[b-0lpx7jeypn] { --line: var(--part-spot); }
.line-kr[b-0lpx7jeypn] { --line: var(--part-vat); }

    .chart-line.line-kwh[b-0lpx7jeypn],
    .chart-line.line-kr[b-0lpx7jeypn] {
        stroke: var(--line);
    }

.line-key[b-0lpx7jeypn] {
    display: inline-block;
    flex: none;
    width: 1rem;
    height: 3px;
    margin-right: 0.4rem;
    border-radius: 2px;
    background: var(--line);
}

.chart-cols[b-0lpx7jeypn] {
    position: absolute;
    inset: 0;
    display: flex;
}

.chart-col[b-0lpx7jeypn] {
    flex: 1 1 0;
    min-width: 0;
}

    .chart-col:hover[b-0lpx7jeypn] {
        background: var(--hover-wash);
    }

.chart-axis[b-0lpx7jeypn] {
    display: flex;
    justify-content: space-between;
    margin-top: 0.35rem;
}

.chart-labels[b-0lpx7jeypn] {
    display: none;
}

    /* Each label is centred under its period and may overflow into its unlabelled neighbours; the end ones stay inside */
    .chart-labels span[b-0lpx7jeypn] {
        display: flex;
        flex: 1 1 0;
        justify-content: center;
        min-width: 0;
        white-space: nowrap;
    }

        .chart-labels span:first-child[b-0lpx7jeypn] {
            justify-content: flex-start;
        }

        .chart-labels span:last-child[b-0lpx7jeypn] {
            justify-content: flex-end;
        }

/* Table */
.table-tools[b-0lpx7jeypn] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.table-scroll[b-0lpx7jeypn] {
    max-height: 70vh;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
}

    .table-scroll:focus-visible[b-0lpx7jeypn] {
        outline: 2px solid var(--series-1);
    }

.usage-table[b-0lpx7jeypn] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

    .usage-table th[b-0lpx7jeypn],
    .usage-table td[b-0lpx7jeypn] {
        height: 40px;
        padding: 0 0.75rem;
        border-bottom: 1px solid var(--gridline);
        text-align: right;
        white-space: nowrap;
    }

    .usage-table thead th[b-0lpx7jeypn] {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--control-track);
        color: var(--text-secondary);
        font-size: 0.8rem;
        font-weight: 650;
    }

    .usage-table tfoot th[b-0lpx7jeypn],
    .usage-table tfoot td[b-0lpx7jeypn] {
        position: sticky;
        bottom: 0;
        z-index: 2;
        border-top: 2px solid var(--axis);
        border-bottom: 0;
        background: var(--surface-raised);
        font-weight: 700;
    }

    /* The period stays in view when the table scrolls sideways on a phone */
    .usage-table .period-col[b-0lpx7jeypn] {
        position: sticky;
        left: 0;
        z-index: 1;
        background: var(--surface);
        text-align: left;
        font-weight: 600;
    }

    .usage-table thead .period-col[b-0lpx7jeypn],
    .usage-table tfoot .period-col[b-0lpx7jeypn] {
        z-index: 3;
    }

    .usage-table thead .period-col[b-0lpx7jeypn] {
        background: var(--control-track);
    }

    .usage-table tfoot .period-col[b-0lpx7jeypn] {
        background: var(--surface-raised);
    }

    .usage-table tbody tr:not(.day-row):hover[b-0lpx7jeypn] {
        background: var(--hover-wash);
    }

    .usage-table .day-row th[b-0lpx7jeypn] {
        text-align: left;
        background: var(--surface);
        color: var(--series-1);
        font-size: 0.8125rem;
        font-weight: 700;
        letter-spacing: 0.01em;
    }

    .usage-table .negative[b-0lpx7jeypn] {
        color: var(--good-text);
    }

    .usage-table .unpriced[b-0lpx7jeypn] {
        text-align: center;
        color: var(--text-muted);
    }

    .usage-table .total-col[b-0lpx7jeypn] {
        font-weight: 700;
    }

.total-pill[b-0lpx7jeypn] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    min-width: 4.5rem;
}

.level[b-0lpx7jeypn] {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
}

    .level.price-low[b-0lpx7jeypn] { background: var(--price-low); }
    .level.price-mid[b-0lpx7jeypn] { background: var(--price-mid); }
    .level.price-higher[b-0lpx7jeypn] { background: var(--price-higher); }
    .level.price-high[b-0lpx7jeypn] { background: var(--price-high); }

.partial[b-0lpx7jeypn] {
    margin-left: 0.4rem;
    border-radius: 999px;
    padding: 0 0.4rem;
    background: var(--control-track);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 600;
}

.note.warn[b-0lpx7jeypn] {
    color: var(--manage-warn);
}

.table-note[b-0lpx7jeypn] {
    margin: 0.75rem 0 0;
}

@media (max-width: 900px) {
    .stats[b-0lpx7jeypn] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640.98px) {
    .page-header h1[b-0lpx7jeypn] {
        font-size: 1.5rem;
    }

    .subtitle[b-0lpx7jeypn] {
        font-size: 0.875rem;
    }

    .filters[b-0lpx7jeypn] {
        gap: 0.5rem;
    }

    .segmented[b-0lpx7jeypn],
    .select-field[b-0lpx7jeypn] {
        flex: 1 1 100%;
        min-height: 44px;
    }

        .segmented button[b-0lpx7jeypn] {
            flex: 1 1 0;
            padding: 0.375rem 0.35rem;
        }

    .presets[b-0lpx7jeypn] {
        overflow-x: auto;
    }

    .date-range[b-0lpx7jeypn] {
        flex: 1 1 100%;
    }

        .date-range .date-field[b-0lpx7jeypn] {
            flex: 1 1 0;
            min-height: 44px;
        }

    .card[b-0lpx7jeypn] {
        padding: 1rem;
    }

    .token-add-fields[b-0lpx7jeypn] {
        grid-template-columns: minmax(0, 1fr);
    }

    .token-add input[b-0lpx7jeypn],
    .token-add .primary-button[b-0lpx7jeypn] {
        min-height: 44px;
    }

    .token-add input[b-0lpx7jeypn] {
        font-size: 1rem;
    }

    .stats[b-0lpx7jeypn] {
        gap: 0.75rem;
    }

    .stat-value[b-0lpx7jeypn] {
        font-size: 1.35rem;
    }

    .chart[b-0lpx7jeypn],
    .chart-yaxis[b-0lpx7jeypn] {
        height: 150px;
    }

    .chart-yaxis[b-0lpx7jeypn] {
        min-width: 2.75rem;
    }

    .chart-track[b-0lpx7jeypn] {
        width: var(--mobile-width);
    }

    .chart-ticks[b-0lpx7jeypn] {
        display: none;
    }

    .chart-labels[b-0lpx7jeypn] {
        display: flex;
        padding-bottom: 0.25rem;
    }

    .usage-table th[b-0lpx7jeypn],
    .usage-table td[b-0lpx7jeypn] {
        padding: 0 0.5rem;
    }

    .table-tools[b-0lpx7jeypn] {
        width: 100%;
        flex-wrap: nowrap;
    }

        .table-tools .segmented[b-0lpx7jeypn] {
            flex: 1 1 auto;
        }
}
/* /Components/Prices/LiveNow.razor.rz.scp.css */
/* Colours come from wwwroot/css/theme.css, so the panel follows the light or dark theme */
.live-now[b-3b1lq3uzmb] {
    margin-bottom: 0.625rem;
}

.note[b-3b1lq3uzmb] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.live-head[b-3b1lq3uzmb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
}

/* A pulsing dot while readings arrive; grey when Watts Live has gone quiet */
.live-dot[b-3b1lq3uzmb] {
    flex: none;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--price-low);
    box-shadow: 0 0 0 0 var(--good-wash);
    animation: live-pulse-b-3b1lq3uzmb 2s ease-out infinite;
}

    .live-dot.is-stale[b-3b1lq3uzmb] {
        background: var(--text-muted);
        animation: none;
    }

@keyframes live-pulse-b-3b1lq3uzmb {
    0% { box-shadow: 0 0 0 0 var(--good-wash); }
    70% { box-shadow: 0 0 0 0.5rem transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .live-dot[b-3b1lq3uzmb] {
        animation: none;
    }
}

.live-stats[b-3b1lq3uzmb] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
}

    .live-stats > div[b-3b1lq3uzmb] {
        padding: 0.5rem 0.75rem;
        border-radius: 10px;
        background: var(--control-track);
    }

    .live-stats dt[b-3b1lq3uzmb] {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-secondary);
    }

    .live-stats dd[b-3b1lq3uzmb] {
        margin: 0.125rem 0 0;
        font-size: 1rem;
        font-weight: 650;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

.live-warning[b-3b1lq3uzmb] {
    margin: 0.5rem 0 0;
}

.live-problem[b-3b1lq3uzmb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0;
}

    .live-problem i[b-3b1lq3uzmb] {
        font-size: 1.125rem;
        color: var(--text-muted);
    }
/* /Components/Prices/LiveUsageCard.razor.rz.scp.css */
/* Colours come from wwwroot/css/theme.css, so the card follows the light or dark theme.
   .card, .note and .segmented match the pages' own (Home.razor.css, Usage.razor.css), whose styles don't reach into this component. */
.card[b-yxz8lybazl] {
    display: block;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    padding: 1.25rem;
}

/* Briefly outlined after the "Now" row's live usage button scrolled here (js/jump.js) */
.card.is-flash[b-yxz8lybazl] {
    animation: live-flash-b-yxz8lybazl 1.6s ease-out;
}

@keyframes live-flash-b-yxz8lybazl {
    0%, 40% { box-shadow: 0 0 0 3px var(--focus-ring); }
    100% { box-shadow: 0 0 0 3px transparent; }
}

.note[b-yxz8lybazl] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.live-head[b-yxz8lybazl] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

    .live-head h2[b-yxz8lybazl] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin: 0;
        font-size: 1.0625rem;
        font-weight: 650;
    }

    .live-head .note[b-yxz8lybazl] {
        margin: 0.125rem 0 0;
    }

/* A pulsing dot while readings arrive; grey when Watts Live has gone quiet */
.live-dot[b-yxz8lybazl] {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--price-low);
    box-shadow: 0 0 0 0 var(--good-wash);
    animation: live-pulse-b-yxz8lybazl 2s ease-out infinite;
}

    .live-dot.is-stale[b-yxz8lybazl] {
        background: var(--text-muted);
        animation: none;
    }

@keyframes live-pulse-b-yxz8lybazl {
    0% { box-shadow: 0 0 0 0 var(--good-wash); }
    70% { box-shadow: 0 0 0 0.5rem transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.live-total[b-yxz8lybazl] {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

    .live-total .value[b-yxz8lybazl] {
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1;
    }

    .live-total .unit[b-yxz8lybazl] {
        font-size: 0.875rem;
        color: var(--text-secondary);
    }

.live-stats[b-yxz8lybazl] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0 0 1rem;
}

    .live-stats > div[b-yxz8lybazl] {
        padding: 0.5rem 0.75rem;
        border-radius: 10px;
        background: var(--control-track);
    }

    .live-stats dt[b-yxz8lybazl] {
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--text-secondary);
    }

    .live-stats dd[b-yxz8lybazl] {
        margin: 0.125rem 0 0;
        font-size: 1rem;
        font-weight: 650;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

.live-graph-head[b-yxz8lybazl] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.625rem;
}

.live-max[b-yxz8lybazl] {
    font-variant-numeric: tabular-nums;
}

.segmented[b-yxz8lybazl] {
    display: inline-flex;
    padding: 3px;
    border-radius: 10px;
    background: var(--control-track);
}

    .segmented button[b-yxz8lybazl] {
        border: 0;
        border-radius: 8px;
        padding: 0.3125rem 0.75rem;
        background: transparent;
        color: var(--text-secondary);
        font-size: 0.8125rem;
        font-weight: 600;
        white-space: nowrap;
        transition: background 120ms ease, color 120ms ease;
    }

        .segmented button:hover[b-yxz8lybazl] {
            color: var(--text-primary);
        }

        .segmented button.active[b-yxz8lybazl] {
            background: var(--surface-raised);
            color: var(--text-primary);
            box-shadow: var(--raised-shadow);
        }

        .segmented button:focus-visible[b-yxz8lybazl] {
            outline: 2px solid var(--series-1);
            outline-offset: 1px;
        }

/* The kW labels sit in their own column left of the graph; the price strip and clock times go under the graph only */
.live-graph[b-yxz8lybazl] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.5rem;
    margin-top: 0.5rem;
}

.live-yaxis[b-yxz8lybazl] {
    position: relative;
    min-width: 2.5rem;
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

    .live-yaxis span[b-yxz8lybazl] {
        position: absolute;
        right: 0;
        transform: translateY(50%);
        white-space: nowrap;
        line-height: 1;
    }

.live-plot[b-yxz8lybazl] {
    position: relative;
    height: 128px;
    border-bottom: 1px solid var(--axis);
    /* Dragging sideways on a phone moves along the lines; scrolling up and down still scrolls the page */
    touch-action: pan-y;
    cursor: crosshair;
}

.live-gridline[b-yxz8lybazl] {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dashed var(--gridline);
}

/* One colour per Watts key, in the order the keys were saved; the same tokens as the price breakdown, so they suit both themes */
.key-0[b-yxz8lybazl] { --key: var(--series-1); }
.key-1[b-yxz8lybazl] { --key: var(--part-vat); }
.key-2[b-yxz8lybazl] { --key: var(--part-energinet); }
.key-3[b-yxz8lybazl] { --key: var(--part-grid); }
.key-4[b-yxz8lybazl] { --key: var(--price-higher); }
.key-5[b-yxz8lybazl] { --key: var(--price-low); }

/* The lines are drawn on a stretched 0–100 grid; non-scaling strokes keep them evenly thin */
.live-lines[b-yxz8lybazl] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.live-line[b-yxz8lybazl] {
    fill: none;
    stroke: var(--key);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.live-area[b-yxz8lybazl] {
    fill: var(--key);
    opacity: 0.14;
    stroke: none;
}

/* Where the details are read from: one invisible point per 5 minutes with readings */
.live-hit[b-yxz8lybazl] {
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
}

/* A line down through the pointed 5 minutes */
.live-guide[b-yxz8lybazl] {
    position: absolute;
    top: 0;
    bottom: 0;
    display: none;
    border-left: 1px solid var(--text-secondary);
    pointer-events: none;
}

    .live-plot.is-pointing .live-guide[b-yxz8lybazl] {
        display: block;
    }

/* The total price under the graph, coloured as in the price list */
.live-price-strip[b-yxz8lybazl] {
    grid-column: 2;
    position: relative;
    height: 5px;
    margin-top: 3px;
    border-radius: 2px;
    overflow: hidden;
}

    .live-price-strip span[b-yxz8lybazl] {
        position: absolute;
        top: 0;
        bottom: 0;
    }

.price-low[b-yxz8lybazl] { background: var(--price-low); }
.price-mid[b-yxz8lybazl] { background: var(--price-mid); }
.price-higher[b-yxz8lybazl] { background: var(--price-higher); }
.price-high[b-yxz8lybazl] { background: var(--price-high); }
.no-price[b-yxz8lybazl] { background: var(--axis); }

/* The keys, with more than one: each a button that shows or hides its line, so they are also the legend */
/* Under the graph, above the price colours */
.live-keys[b-yxz8lybazl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0.75rem 0 0;
}

.live-key[b-yxz8lybazl] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    padding: 0.3125rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
}

    .live-key.is-on[b-yxz8lybazl] {
        border-color: var(--key);
        background: var(--control-track);
        color: var(--text-primary);
    }

    .live-key:hover[b-yxz8lybazl] {
        color: var(--text-primary);
    }

    .live-key:focus-visible[b-yxz8lybazl] {
        outline: 2px solid var(--focus-ring);
        outline-offset: 1px;
    }

    .live-key .key-line[b-yxz8lybazl] {
        flex: none;
        width: 18px;
        height: 3px;
        border-radius: 2px;
        background: var(--key);
        opacity: 0.35;
    }

    .live-key.is-on .key-line[b-yxz8lybazl] {
        opacity: 1;
    }

    .live-key .key-label[b-yxz8lybazl] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .live-key .key-kw[b-yxz8lybazl] {
        color: var(--text-secondary);
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

.live-now-line[b-yxz8lybazl] {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px dashed var(--text-muted);
    pointer-events: none;
}

/* The box with the pointed moment's details, above the graph; js/live-chart.js fills and places it */
.live-tip[b-yxz8lybazl] {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 0;
    z-index: 5;
    display: none;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    box-shadow: var(--raised-shadow);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.45;
    white-space: nowrap;
    pointer-events: none;
}

    .live-tip.is-shown[b-yxz8lybazl] {
        display: block;
    }

    .live-tip strong[b-yxz8lybazl] {
        display: block;
        color: var(--text-primary);
        font-weight: 650;
    }

.tip-row[b-yxz8lybazl] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.tip-swatch[b-yxz8lybazl] {
    flex: none;
    width: 10px;
    height: 3px;
    border-radius: 2px;
    background: var(--key);
}

.tip-label[b-yxz8lybazl] {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tip-value[b-yxz8lybazl] {
    color: var(--text-primary);
}

.tip-price[b-yxz8lybazl] {
    margin-top: 0.125rem;
}

@media (prefers-reduced-motion: reduce) {
    .live-dot[b-yxz8lybazl] {
        animation: none;
    }
}

/* Colour key for the price strip, as in the price list */
.live-legend[b-yxz8lybazl] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

    .live-legend li[b-yxz8lybazl] {
        display: flex;
        align-items: center;
        gap: 6px;
    }

.swatch[b-yxz8lybazl] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

/* Clock times under the graph, each centred on its moment; the first and last stay inside the card */
.live-axis[b-yxz8lybazl] {
    grid-column: 2;
    position: relative;
    height: 1rem;
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

    .live-axis span[b-yxz8lybazl] {
        position: absolute;
        top: 0;
        transform: translateX(-50%);
        white-space: nowrap;
    }

        .live-axis span.is-start[b-yxz8lybazl] {
            transform: none;
        }

        .live-axis span.is-end[b-yxz8lybazl] {
            transform: translateX(-100%);
        }

.live-warning[b-yxz8lybazl] {
    margin: 0.625rem 0 0;
    color: var(--text-secondary);
}

@media (max-width: 480px) {
    .live-stats[b-yxz8lybazl] {
        grid-template-columns: 1fr;
    }

        .live-stats > div[b-yxz8lybazl] {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
        }

        .live-stats dd[b-yxz8lybazl] {
            margin: 0;
        }

    .live-graph-head .segmented[b-yxz8lybazl] {
        width: 100%;
    }

        .live-graph-head .segmented button[b-yxz8lybazl] {
            flex: 1;
        }
}
/* /Components/Prices/PriceBreakdownBar.razor.rz.scp.css */
.breakdown[b-zcq34is7aw] {
    font-variant-numeric: tabular-nums;
}

.stack[b-zcq34is7aw] {
    display: flex;
    gap: 2px;
    height: 1.75rem;
    overflow: hidden;
    border-radius: 8px;
    background: var(--gridline);
}

.compact .stack[b-zcq34is7aw] {
    height: 0.75rem;
    border-radius: 4px;
}

.segment[b-zcq34is7aw] {
    flex-basis: 0;
    min-width: 3px;
    transition: flex-grow 300ms ease;
}

.part-spot[b-zcq34is7aw] { background: var(--part-spot); }
.part-grid[b-zcq34is7aw] { background: var(--part-grid); }
.part-energinet[b-zcq34is7aw] { background: var(--part-energinet); }
.part-tax[b-zcq34is7aw] { background: var(--part-tax); }
.part-vat[b-zcq34is7aw] { background: var(--part-vat); }

.parts[b-zcq34is7aw] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem 1rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

    .parts li[b-zcq34is7aw] {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "dot label label"
            ". amount share";
        align-items: baseline;
        column-gap: 0.4rem;
    }

.dot[b-zcq34is7aw] {
    grid-area: dot;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    align-self: center;
}

.label[b-zcq34is7aw] {
    grid-area: label;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.detail[b-zcq34is7aw] {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.amount[b-zcq34is7aw] {
    grid-area: amount;
    font-size: 1.125rem;
    font-weight: 650;
}

    .amount[b-zcq34is7aw]::after {
        content: " kr";
        font-size: 0.75rem;
        font-weight: 400;
        color: var(--text-muted);
    }

.share[b-zcq34is7aw] {
    grid-area: share;
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* Inside a price row: one line per part */
.compact .parts[b-zcq34is7aw] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem 1rem;
    margin-top: 0.5rem;
}

    .compact .parts li[b-zcq34is7aw] {
        grid-template-areas: "dot label amount share";
        grid-template-columns: auto minmax(0, 1fr) auto 2.5rem;
    }

.compact .label[b-zcq34is7aw] {
    font-size: 0.8125rem;
}

.compact .detail[b-zcq34is7aw] {
    display: none;
}

.compact .amount[b-zcq34is7aw] {
    font-size: 0.875rem;
    font-weight: 600;
}

.compact .share[b-zcq34is7aw] {
    text-align: right;
}

@media (max-width: 640.98px) {
    .parts[b-zcq34is7aw] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .compact .parts[b-zcq34is7aw] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Prices/PriceList.razor.rz.scp.css */
.price-list[b-zorcsdoyfa] {
    font-variant-numeric: tabular-nums;
}

.legend[b-zorcsdoyfa] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

    .legend li[b-zorcsdoyfa] {
        display: flex;
        align-items: center;
        gap: 6px;
    }

.swatch[b-zorcsdoyfa] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--bar);
}

.day + .day[b-zorcsdoyfa] {
    margin-top: 1rem;
}

.day-heading[b-zorcsdoyfa] {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0;
    padding: 0.5rem 0 0.375rem;
    border-bottom: 1px solid var(--axis);
    background: var(--surface);
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--text-secondary);
}

.rows[b-zorcsdoyfa] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.slot[b-zorcsdoyfa] {
    border-bottom: 1px solid var(--gridline);
}

    .slot:last-child[b-zorcsdoyfa] {
        border-bottom: 0;
    }

    .slot.is-now[b-zorcsdoyfa] {
        border-radius: 8px;
        background: var(--hover-wash);
        box-shadow: inset 3px 0 0 var(--series-1);
        font-weight: 650;
    }

.row[b-zorcsdoyfa] {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) 8.5rem;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.25rem;
    padding: 0 0.5rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .row:disabled[b-zorcsdoyfa] {
        cursor: default;
    }

    .row:not(:disabled):hover[b-zorcsdoyfa] {
        background: var(--hover-wash);
    }

    .row:focus-visible[b-zorcsdoyfa] {
        outline: 2px solid var(--series-1);
        outline-offset: -2px;
    }

.chevron[b-zorcsdoyfa] {
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: transform 150ms ease;
}

.is-open .chevron[b-zorcsdoyfa] {
    transform: rotate(180deg);
}

.row-detail[b-zorcsdoyfa] {
    padding: 0.25rem 0.5rem 0.75rem 4.75rem;
}

.time[b-zorcsdoyfa] {
    font-size: 0.9375rem;
    white-space: nowrap;
    color: var(--text-secondary);
}

.is-now .time[b-zorcsdoyfa] {
    color: var(--text-primary);
}

.middle[b-zorcsdoyfa] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.track[b-zorcsdoyfa] {
    display: block;
    height: 0.875rem;
}

/* The user's Watts Live usage in the slot, under its price bar */
.usage[b-zorcsdoyfa] {
    overflow: hidden;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    .usage .bi[b-zorcsdoyfa] {
        color: var(--text-muted);
    }

.bar[b-zorcsdoyfa] {
    display: block;
    height: 100%;
    border-radius: 0 4px 4px 0;
    background: var(--series-1);
}

    /* Below zero: same band colour, hatched so it doesn't read as a cheap positive price */
    .bar.negative[b-zorcsdoyfa] {
        background-image: repeating-linear-gradient(135deg, transparent 0 3px, var(--negative-hatch) 3px 5px);
    }

/* Price bands; the current slot gets the darker shade */
.price-low[b-zorcsdoyfa] {
    --bar: var(--price-low);
    --bar-strong: var(--price-low-now);
}

.price-mid[b-zorcsdoyfa] {
    --bar: var(--price-mid);
    --bar-strong: var(--price-mid-now);
}

.price-higher[b-zorcsdoyfa] {
    --bar: var(--price-higher);
    --bar-strong: var(--price-higher-now);
}

.price-high[b-zorcsdoyfa] {
    --bar: var(--price-high);
    --bar-strong: var(--price-high-now);
}

.bar[class*="price-"][b-zorcsdoyfa] {
    background-color: var(--bar);
}

.is-now .bar[class*="price-"][b-zorcsdoyfa] {
    background-color: var(--bar-strong);
}

.price[b-zorcsdoyfa] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    font-size: 0.9375rem;
    white-space: nowrap;
}

.tag[b-zorcsdoyfa] {
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

    .tag.now[b-zorcsdoyfa] {
        background: var(--series-1);
        color: var(--on-series);
    }

    .tag.low[b-zorcsdoyfa] {
        background: var(--good-wash);
        color: var(--good-text);
    }

    .tag.high[b-zorcsdoyfa] {
        background: var(--bad-wash);
        color: var(--bad-text);
    }

@media (max-width: 640.98px) {
    .row-detail[b-zorcsdoyfa] {
        padding: 0.25rem 0.375rem 0.75rem;
    }

    .row[b-zorcsdoyfa] {
        grid-template-columns: 3rem minmax(0, 1fr) 7.5rem;
        gap: 0.5rem;
        min-height: 2.5rem;
        padding: 0 0.375rem;
    }
}

/* Notifications: a bell on every future slot */
.with-alerts .slot[b-zorcsdoyfa] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.25rem;
    align-items: center;
}

    .with-alerts .slot > .row-detail[b-zorcsdoyfa],
    .with-alerts .slot > .alert-editor[b-zorcsdoyfa] {
        grid-column: 1 / -1;
    }

.alert-toggle[b-zorcsdoyfa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.95rem;
    cursor: pointer;
}

    .alert-toggle:hover[b-zorcsdoyfa] {
        background: var(--hover-wash);
        color: var(--text-primary);
    }

    .alert-toggle:focus-visible[b-zorcsdoyfa] {
        outline: 2px solid var(--series-1);
        outline-offset: -2px;
    }

    .alert-toggle.is-set[b-zorcsdoyfa] {
        color: var(--series-1);
    }

    /* The "Now" row's button up to the live usage card: in the live dot's green so it reads as live */
    .alert-toggle.live-jump[b-zorcsdoyfa] {
        color: var(--price-low);
    }

.alert-editor[b-zorcsdoyfa] {
    margin: 0.25rem 0 0.75rem 4.25rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--axis);
    border-radius: 10px;
    background: var(--hover-wash);
    font-weight: 400;
}

.alert-editor-title[b-zorcsdoyfa] {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 650;
}

    .alert-editor-title i[b-zorcsdoyfa] {
        color: var(--series-1);
    }

.alert-editor-form[b-zorcsdoyfa] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

    .alert-editor-form input[b-zorcsdoyfa] {
        flex: 1 1 14rem;
        min-width: 0;
    }

.alert-editor-note[b-zorcsdoyfa],
.alert-editor-error[b-zorcsdoyfa] {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.alert-editor-error[b-zorcsdoyfa] {
    color: var(--price-high-now);
}

@media (max-width: 480px) {
    .alert-editor[b-zorcsdoyfa] {
        margin-left: 0;
    }
}