/* _content/Mawhab.UI/Components/Layout/BudgetHeader.razor.rz.scp.css */
/*
    The month readout keeps a fixed width so the arrows either side of it do not
    shuffle sideways as the name changes length - "May 2026" and "September
    2026" are four characters apart. Bootstrap ships no min-width utility.
*/
.mawhab-month[b-fe3ta063fk] {
    min-width: 9rem;
}
/* _content/Mawhab.UI/Components/Layout/BudgetTable.razor.rz.scp.css */
/*
    The toolbar stays put while the budget scrolls under it, so the way to add a
    group and the two whole-month actions are reachable from anywhere in a long
    one. It sticks to the top of the scrolling area rather than the window, which
    is what puts it directly beneath the header - see the scroll container in
    MainLayout.razor.css. An opaque background is required: sticky elements are
    painted over the content passing behind them only if they have one.
*/
.mawhab-toolbar[b-cqgv4zdf02] {
    position: sticky;
    top: 0;
    z-index: 3;
    background-color: var(--bs-body-bg);

    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.mawhab-new-group[b-cqgv4zdf02] {
    max-width: 18rem;
}

/*
    The assigned cell reads as a label until it is being typed in.

    A column of bordered boxes turns the figure the user came to read into
    furniture, and a budget is read far more often than it is edited. Nothing is
    swapped for anything: it is the same input throughout, wearing no border
    until it has focus, so the caret lands where the figure already was rather
    than after a jump. Bootstrap ships no such variant of .form-control.
*/
.mawhab-assign[b-cqgv4zdf02] {
    max-width: 8rem;
    margin-left: auto;
    border-color: transparent;
    background-color: transparent;
    box-shadow: none;
}

.mawhab-assign:focus[b-cqgv4zdf02] {
    border-color: var(--bs-border-color);
    background-color: var(--bs-body-bg);
}

/*
    Dragging a category to another group or another position.

    The grip is on the name cell rather than the whole row: a draggable row
    swallows selecting text inside the assigned cell, which is the one thing that
    cell exists for.
*/
.mawhab-grab[b-cqgv4zdf02] {
    cursor: grab;
}

.mawhab-grab:active[b-cqgv4zdf02] {
    cursor: grabbing;
}

/*
    The grip. Small, and only there while the pointer is on the row: a column of
    them down the whole budget is furniture competing with the figures, which is
    what it looked like at full size. The space it occupies is reserved whether
    or not it is drawn, so nothing shifts sideways as the pointer moves.
*/
.mawhab-grip[b-cqgv4zdf02] {
    display: inline-block;
    width: 0.75rem;
    margin-right: 0.4rem;
    font-size: 0.6rem;
    vertical-align: 0.05rem;
    opacity: 0;
    transition: opacity 90ms linear;
}

tr:hover .mawhab-grip[b-cqgv4zdf02],
.mawhab-grab:focus-visible .mawhab-grip[b-cqgv4zdf02] {
    opacity: 0.4;
}

/* The row being carried, faded so the eye follows the gap rather than the ghost. */
.mawhab-dragging > td[b-cqgv4zdf02],
.mawhab-dragging > th[b-cqgv4zdf02] {
    opacity: 0.4;
}

/*
    Where it would land. Drawn as an inset shadow rather than a border, because a
    border on a table cell changes the row's height and makes the whole list
    twitch as the pointer crosses it.
*/
.mawhab-drop-before > td[b-cqgv4zdf02],
.mawhab-drop-before > th[b-cqgv4zdf02] {
    box-shadow: inset 0 2px 0 0 var(--bs-primary);
}

.mawhab-drop-after > td[b-cqgv4zdf02],
.mawhab-drop-after > th[b-cqgv4zdf02] {
    box-shadow: inset 0 -2px 0 0 var(--bs-primary);
}
/* _content/Mawhab.UI/Components/Layout/MainLayout.razor.rz.scp.css */
/*
    The shell fills the window and does not itself scroll; the content area
    inside it does.

    That is what makes a sticky toolbar inside the page sit directly beneath the
    header without being given its height in pixels - a number that would be
    wrong the moment the header's contents wrapped. It is also what Virtualize
    needs: it measures against the nearest scrolling ancestor, and against a
    document that grows without bound it concludes every row is visible and
    renders all of them.

    dvh rather than vh because vh is the *largest* viewport on a phone, which
    strands the bottom of the page under the browser's own chrome.
*/
.page[b-xbo8qqaq7h] {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100dvh;
}

main[b-xbo8qqaq7h] {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Without this a flex child refuses to shrink below its content, so the
       content area never becomes a scroller and the page grows instead. */
    min-height: 0;
    min-width: 0;
}

/*
    The scroll container, and it must carry no padding at the top.

    A sticky child asking for top: 0 cannot rise above its containing block,
    which is this element's *content* box - so any padding here becomes a gap
    the rows scroll through, showing as a sliver moving above a bar that is
    supposed to be covering them. Measured, not reasoned about: with the 1.1rem
    app.css puts here, the toolbar stuck 17.6px down and a row was visible above
    it. The spacing that padding was providing moves to the body wrapper below,
    which is inside the scroller and has no such constraint.
*/
.content[b-xbo8qqaq7h] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-top: 0 !important;
}

/*
    Top spacing for a page rendered the ordinary way, through @Body. A page that
    fills the body slot instead supplies its own, because what belongs at the top
    of it may be a bar that has to sit flush against the header.
*/
.page-body[b-xbo8qqaq7h] {
    padding-top: 1.1rem;
}

/*
    The rail. Its colours come from Bootstrap's tokens rather than fixed hex, so
    it follows the theme - the scaffolded sheet assumed a dark gradient here and
    styled its links white, which left them all but invisible once the gradient
    went.
*/
.sidebar[b-xbo8qqaq7h] {
    background-color: var(--bs-tertiary-bg);
    border-right: 1px solid var(--bs-border-color);
}

/*
    The page header. It carries whatever the open page put in the header slot -
    on the budget that is a month pager, a heading and four figures - so it is
    sized by its content rather than pinned to one row's worth of height.
*/
.top-row[b-xbo8qqaq7h] {
    background-color: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 3.5rem;
    /* Never squeezed by the content area below it, which is the flex child that
       is meant to take the slack. */
    flex-shrink: 0;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

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

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

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

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

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

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

    .sidebar[b-xbo8qqaq7h] {
        width: 250px;
        flex-shrink: 0;
        /* Its own scroller, so a long list of accounts is reachable rather than
           clipped by the shell that no longer scrolls around it. */
        overflow-y: auto;
    }

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

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

    .top-row[b-xbo8qqaq7h], article[b-xbo8qqaq7h] {
/*        padding-left: 2rem !important;
        padding-right: 1.5rem !important;*/
    }
}
/* _content/Mawhab.UI/Components/Layout/NavMenu.razor.rz.scp.css */
/*
    The rail's own styles. Everything that Bootstrap already does - the pills,
    the dropdown, the buttons - is left to it, so this is only the two things it
    does not.
*/

/*
    The rail scrolls inside itself rather than making the shell scroll, so a
    budget with a dozen accounts still reaches its "Add account" button. It has
    to be here rather than on the sidebar: the layout sets overflow-hidden there
    deliberately, and this is the element that has something to scroll.

    Its links are body-coloured rather than link-coloured. They are a list of
    places, not references, and a rail of blue reads as a page full of links
    where only one of them is where you are.
*/
.mawhab-rail[b-kl1xza5e1w] {
    height: 100%;
    overflow-y: auto;
}

/*
    On the .nav itself, not on the rail: Bootstrap declares these on .nav, so a
    value set on an ancestor is shadowed rather than inherited. They are custom
    properties, which do inherit past the scoped-CSS boundary, which is what
    lets them reach a NavLink's own anchor without ::deep.
*/
.mawhab-rail .nav[b-kl1xza5e1w] {
    --bs-nav-link-color: var(--bs-body-color);
    --bs-nav-link-hover-color: var(--bs-body-color);
}

/*
    The shrug. Sized against the two lines of text beside it rather than set in
    pixels, so it stays in proportion if the button's font changes.
*/
.mawhab-mark[b-kl1xza5e1w] {
    font-size: 1.15rem;
    line-height: 1;
    letter-spacing: -0.05em;
    flex-shrink: 0;
}

/*
    The plan button holds two lines, so it cannot be a normal-height button, and
    the name has to be allowed to truncate rather than widen the rail. Bootstrap
    ships no min-width utility, which is what a flex child needs before
    text-overflow can do anything at all.
*/
.mawhab-plan-button[b-kl1xza5e1w] {
    --bs-btn-padding-y: 0.5rem;
    text-align: left;
}

.mawhab-min-w-0[b-kl1xza5e1w] {
    min-width: 0;
}
/* _content/Mawhab.UI/Components/Pages/Budget.razor.rz.scp.css */
/*
    Styles for the budget screen, scoped to it. Only what Bootstrap does not
    already do - the layout, spacing, table and colours are all its classes in
    the markup.
*/

/*
    The assignment cell. Bootstrap's form-control fills its container, which in
    a table means the Assigned column grows to whatever the widest name allows
    and the figures stop lining up. A fixed width keeps the column a column.
*/
.mawhab-assign[b-ffcr2xve13] {
    width: 7.5rem;
    margin-left: auto;
}

/*
    Number inputs draw spinners that steal width from a right-aligned figure and
    invite clicking a budget up by a cent at a time. The value is typed, not
    nudged.
*/
.mawhab-assign[b-ffcr2xve13]::-webkit-outer-spin-button,
.mawhab-assign[b-ffcr2xve13]::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

.mawhab-assign[b-ffcr2xve13] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/*
    Keeps the name column from collapsing to the width of the longest word once
    the figures have taken what they need.
*/
.mawhab-budget th:first-child[b-ffcr2xve13],
.mawhab-budget td:first-child[b-ffcr2xve13] {
    min-width: 12rem;
}