/* /Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-wz2yh6ttqg] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-main[b-wz2yh6ttqg] {
    flex: 1;
}

/*
    Width, centring and the horizontal gutter all come from .app-container in
    app.css, which the navbar uses too (finding U2). This rule owns the vertical
    rhythm only - it used to fight a second .content rule in app.css that set a
    different padding-top (finding H2).
*/
.content[b-wz2yh6ttqg] {
    padding-block: var(--app-space-4);
}
/* /Layout/NavMenu.razor.rz.scp.css */
/*
    The navbar and the status strip stick together as one block (finding H4), so
    nothing has to know how tall the navbar happens to be. --nav-height below is
    only a floor for the collapsed row; if the menu wraps or expands, the header
    grows and the strip travels with it.
*/
.app-header[b-cttyoaejtn] {
    position: sticky;
    top: 0;
    z-index: 1030;
}

/*
    Twelve destinations have to fit on one row inside --app-max-width, so the nav
    takes the small step of the type scale rather than body size. Set through
    Bootstrap's own --bs-nav-link-font-size so .nav-link keeps computing its
    padding and colours the normal way.
*/
.app-navbar[b-cttyoaejtn] {
    min-height: var(--nav-height);
    --bs-nav-link-font-size: var(--app-font-size-sm);
}

[b-cttyoaejtn] /*
    Same reason as .navbar-plan-status below: the collapse is itself a flex item
    of the navbar row, and its default min-width: auto is its content width. With
    the row now bounded by --app-max-width instead of running to the window edge,
    it has to be allowed to shrink or it pushes the export buttons off-screen and
    the whole page gets a horizontal scrollbar.
*/
.navbar-collapse {
    min-width: 0;

    /*
        When the destinations and the plan status can no longer share one row, wrap
        rather than squeezing the status out of existence.
    */
    flex-wrap: wrap;
    row-gap: var(--app-space-2);
}

/*
    The destination list is what yields first: it can shrink and scroll, because a
    clipped list is recoverable and an invisible save indicator is not.
*/
.navbar-collapse .navbar-nav[b-cttyoaejtn] {
    min-width: 0;
    flex-shrink: 1;
}

.navbar-brand[b-cttyoaejtn] {
    font-weight: var(--app-font-weight-bold);
    white-space: nowrap;
}

/*
    ::deep is required: NavLink is a child component, and Blazor does not stamp
    this component's scope attribute onto markup another component rendered. The
    plain `.nav-link` selector these rules used to carry silently matched nothing,
    which is why "Säule 3a" and "Hauskauf Simulator" were free to break in half.
*/
[b-cttyoaejtn] .nav-link {
    white-space: nowrap;
}

[b-cttyoaejtn] .nav-link.active {
    font-weight: var(--app-font-weight-bold);
    color: var(--bs-white) !important;
    border-bottom: 2px solid var(--bs-white);
}

.navbar-actions[b-cttyoaejtn] {
    display: flex;
    align-items: center;
    gap: var(--app-space-1);
    flex-shrink: 0;
    margin-top: var(--app-space-3);
    padding-bottom: var(--app-space-2);
}

.nav-icon-button[b-cttyoaejtn] {
    min-width: 2.25rem;
    line-height: var(--app-line-height-tight);
    text-align: center;
}

/*
    Mobile first: below Bootstrap's lg breakpoint the navbar is collapsed and the
    plan status stacks under the links. The desktop layout is the @media below -
    the only breakpoint this file uses, and it is one of Bootstrap's five.
*/
.navbar-plan-status[b-cttyoaejtn] {
    color: var(--bs-white);
    line-height: var(--app-line-height-tight);
    text-align: left;
    max-width: none;
    margin-top: var(--app-space-3);
    margin-inline-end: 0;

    /*
        The plan name is the one thing in the row that may be any length, so it
        is the one thing that gives way. flex-shrink alone does nothing here: a
        flex item's default min-width is auto, which is its content width, and
        the children below are nowrap - so without min-width: 0 this block
        refuses to shrink and pushes the export buttons out past the container
        instead of ellipsising.
    */
    flex-shrink: 1;
    min-width: 0;
}

.navbar-plan-name[b-cttyoaejtn] {
    font-size: var(--app-font-size-sm);
    font-weight: var(--app-font-weight-bold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar-cache-status[b-cttyoaejtn] {
    font-size: var(--app-font-size-sm);
    opacity: 0.8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
    No position/top/z-index of its own any more: .app-header carries all three
    for the pair. The inline gutter comes from the .app-container inside it.
*/
.nav-status[b-cttyoaejtn] {
    padding-block: var(--app-space-1);
    font-size: var(--app-font-size-sm);
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.nav-status-info[b-cttyoaejtn] {
    color: var(--bs-primary-text-emphasis);
    background-color: var(--bs-primary-bg-subtle);
}

.nav-status-error[b-cttyoaejtn] {
    color: var(--bs-danger-text-emphasis);
    background-color: var(--bs-danger-bg-subtle);
}

@media (min-width: 992px) {
    .navbar-plan-status[b-cttyoaejtn] {
        text-align: right;
        max-width: 360px;
        margin-top: 0;
        margin-inline-end: var(--app-space-3);

        /*
            min-width: 0 above lets this block give way so the row does not overflow.
            Unbounded, that is too generous: with twelve navigation destinations the
            list takes everything and this collapses to width 0 - taking the plan name
            and, worse, the export-needed / saved badge with it. Measured across
            viewports, it vanished at and below 1280px, which is an ordinary laptop.

            The badge is the data-loss indicator, so it may shrink but must never
            disappear. Below this floor the row wraps instead (see .navbar-collapse).
        */
        min-width: 12rem;
    }

    .navbar-actions[b-cttyoaejtn] {
        margin-top: 0;
        padding-bottom: 0;
    }
}

/*
    Icon navigation.

    Twelve text destinations could not share a row with the plan name and the save badge,
    which is how the badge ended up at zero width on an ordinary laptop. Icons buy that
    space back.

    Icons alone are ambiguous, so the label is never actually removed - it is present for
    assistive technology at every width, shown in full while the menu is expanded on a
    phone (where there is vertical room), and hidden visually only on wide screens, where
    each link still carries a title and an aria-label.
*/
[b-cttyoaejtn] .nav-link-icon {
    display: flex;
    align-items: center;
    gap: var(--app-space-2);
    white-space: nowrap;
}

[b-cttyoaejtn] .nav-icon {
    flex: 0 0 auto;
}

@media (min-width: 992px) {
    /*
        Wide screens: glyph only. visually-hidden rather than display:none - the name still
        reaches a screen reader, and the link keeps an accessible name from aria-label.
    */
    [b-cttyoaejtn] .nav-link-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    [b-cttyoaejtn] .nav-link-icon {
        padding-inline: var(--app-space-3);
        justify-content: center;
    }

    /* The active destination needs to be obvious without a word to underline. */
    [b-cttyoaejtn] .nav-link-icon.active {
        background-color: rgb(255 255 255 / 0.14);
        border-radius: var(--app-radius-sm);
    }
}
/* /Pages/AccountStatement.razor.rz.scp.css */
.account-info-list dt[b-vlkej3r3qk] {
    font-weight: 600;
}

.account-info-list dd[b-vlkej3r3qk] {
    margin-bottom: 0.55rem;
}

.statement-chart-panel[b-vlkej3r3qk] {
    min-height: 220px;
    padding: 0.75rem 0.75rem 0.25rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.statement-balance-chart[b-vlkej3r3qk] {
    width: 100%;
    height: 220px;
    display: block;
}

.statement-chart-axis[b-vlkej3r3qk] {
    stroke: #cbd5e1;
    stroke-width: 1;
}

.statement-chart-grid[b-vlkej3r3qk] {
    stroke: #e5e7eb;
    stroke-width: 1;
    stroke-dasharray: 4 4;
}

.statement-chart-area[b-vlkej3r3qk] {
    fill: rgba(13, 110, 253, 0.10);
}

.statement-chart-line[b-vlkej3r3qk] {
    fill: none;
    stroke: #0d6efd;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.statement-chart-point[b-vlkej3r3qk] {
    fill: #ffffff;
    stroke: #0d6efd;
    stroke-width: 2;
}

.statement-chart-label[b-vlkej3r3qk] {
    fill: #64748b;
    font-size: 11px;
}