/* _content/Mawhab.UI/Components/Controls/SearchPicker.razor.rz.scp.css */
/*
    The wrapper is the menu's positioning context. Bootstrap's own dropdown
    would do this, but it is driven by its own JS and expects a toggle button -
    what is wanted here is a text box that opens a list, which is a different
    control with no Bootstrap equivalent.
*/
.mawhab-picker[b-9m9udlx7so] {
    position: relative;
}

/*
    The menu. Its height is fifteen rows of 30px plus the padding, which is
    what SearchPicker.VisibleRows and RowHeight say in C# - the two have to
    agree or Virtualize scrolls to the wrong offset.

    It is its own scroll container on purpose: Virtualize measures against the
    nearest scrolling ancestor, and without one here it would measure against
    the page and conclude every payee in the plan is visible.
*/
.mawhab-picker-menu[b-9m9udlx7so] {
    position: absolute;
    z-index: 1056;
    top: calc(100% + 2px);
    left: 0;
    min-width: 100%;
    max-width: 22rem;
    max-height: 456px;
    overflow-y: auto;
    padding: 0.25rem 0;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

/*
    One row. A fixed height rather than a padded one, because Virtualize
    positions rows arithmetically from ItemSize and a row that grows when its
    text wraps drags every row below it out of place.
*/
.mawhab-picker-option[b-9m9udlx7so] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    height: 30px;
    padding: 0 0.6rem;
    border: 0;
    background: transparent;
    color: var(--bs-body-color);
    font-size: 0.8125rem;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mawhab-picker-option:hover[b-9m9udlx7so],
.mawhab-picker-option:focus[b-9m9udlx7so] {
    background-color: var(--bs-tertiary-bg);
}

.mawhab-picker-option.active[b-9m9udlx7so] {
    background-color: var(--bs-secondary-bg);
    font-weight: 600;
}

/*
    The group a category sits in, shown beside its name so two groups may each
    hold a "Gas". Narrower than the name and clipped rather than wrapped, since
    the row's height is fixed.
*/
.mawhab-picker-group[b-9m9udlx7so] {
    flex: 0 0 auto;
    max-width: 45%;
    opacity: 0.65;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* _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;
}

/*
    The phone's month list. A migrated budget covers ten years, so the menu has
    to scroll rather than run off the screen; Bootstrap's dropdown has no height
    of its own.
*/
.mawhab-months[b-fe3ta063fk] {
    max-height: 60vh;
    overflow-y: auto;
}
/* _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 phone's title bar. Drawn only below md, where the rail is a drawer rather
    than a column, so something has to hold the control that opens it.
*/
.mawhab-topbar[b-xbo8qqaq7h] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

/*
    Below md the rail is an offcanvas drawer sitting over the page, so it must
    not also take a row of the column layout. Bootstrap's own offcanvas rules
    handle the drawer itself; this is only about the wrapper the layout puts
    around it.
*/
@media (max-width: 767.98px) {
    .sidebar[b-xbo8qqaq7h] {
        display: contents;
    }
}

/*
    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: 767.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: 768px) {
    .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.
*/
/*
    The drawer, below md only. Bootstrap sizes an offcanvas from its own
    variables; this only narrows it, because a full-width drawer over a budget
    hides the thing you opened it to navigate away from.
*/
.mawhab-drawer[b-kl1xza5e1w] {
    --bs-offcanvas-width: 17rem;
}

.mawhab-rail[b-kl1xza5e1w] {
    height: 100%;
    overflow-y: auto;
}

/*
    At md and above the offcanvas container is transparent and its body has no
    padding, both forced by Bootstrap. The rail inside is what carries the look,
    so it has to fill the container rather than sit in it.
*/
@media (min-width: 768px) {
    .mawhab-drawer[b-kl1xza5e1w],
    .mawhab-drawer .offcanvas-body[b-kl1xza5e1w] {
        height: 100%;
    }
}

/*
    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] {
    /* The one deliberately coloured thing in the rail. It is the application's
       mark, so it takes the accent rather than the button's own text colour -
       through --mawhab-accent, since the deep green is unreadable on a dark
       rail and the pale one is unreadable on a light one. */
    color: var(--mawhab-accent);
    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/Layout/RegisterTable.razor.rz.scp.css */
/*
    The register's own rules. Everything here is either a size Bootstrap has no
    utility for or a structure it does not ship - a popup anchored to a table
    cell, and the phone's day list.
*/

/*
    The bar that holds the toolbar and the forms it opens.

    Sticky at the very top of the scrolling area, which is what puts it directly
    beneath the page header - see the scroll container in MainLayout.razor.css.
    An opaque background is required: a sticky element is painted over the
    content passing behind it only if it has one.

    It used to be a card. A border drawn around a box that is already inside a
    box says nothing, and the one edge that does say something - where the bar
    ends and the rows begin - is the bottom border below.
*/
.mawhab-register-bar[b-9indpp5orx] {
    position: sticky;
    top: 0;
    z-index: 4;
    background-color: var(--bs-body-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

.mawhab-register-bar-body[b-9indpp5orx] {
    padding: 0.6rem 0.5rem;
}

/*
    Smaller than the page's body text, and tighter. A register is a dense list
    read a screenful at a time rather than prose, and at 1rem with Bootstrap's
    own cell padding it was taking half again the vertical space it needs.

    Bootstrap's .table-sm changes only the padding, not the type, and .small on
    every cell would be a class on every cell.
*/
.mawhab-register[b-9indpp5orx] {
    font-size: 0.8125rem;
}

.mawhab-register > :not(caption) > * > *[b-9indpp5orx] {
    padding: 0.3rem 0.5rem;
}

/*
    The column headings, stuck directly under the bar above them.

    --mawhab-bar-h is written onto the scroll container by page.js, which
    measures the bar - it is not a constant, since the toolbar wraps on a narrow
    window and each of the four forms replaces it at a different height. The
    fallback keeps the head at the top of the scroller if the measurement has
    not arrived yet, or if there is no bar at all (the all-accounts view).

    position: sticky goes on the th, not the thead: with border-collapse -
    which every Bootstrap table uses - a thead cannot be positioned, and Chrome
    ignores it silently.
*/
.mawhab-register thead th[b-9indpp5orx] {
    position: sticky;
    top: var(--mawhab-bar-h, 0px);
    z-index: 3;
    background-color: var(--bs-body-bg);
}

/*
    The underline under the headings, drawn as an inset shadow rather than as a
    border.

    Two reasons, and the first is the bug this replaces. Bootstrap draws a cell's
    bottom border through `border-bottom-width` on a collapsed-border table, so
    the line belongs to the *table* rather than to the cell - and the first
    column's share of it was being painted over by the row beneath, which is why
    the heading rule started at PAYEE and left DATE bare. The second is that a
    collapsed border does not travel with a sticky cell at all: it stays where
    the table drew it and the headings scroll away from their own underline.

    A shadow is painted by the cell, so it is neither collapsed away nor left
    behind.
*/
.mawhab-register thead th[b-9indpp5orx] {
    border-bottom-width: 0;
    box-shadow: inset 0 -1px 0 var(--bs-border-color);
}

/*
    The search box. Sized so the placeholder - "Search" plus an account name -
    fits, and allowed to shrink on a narrow window rather than pushing the
    toolbar into a second line.
*/
.mawhab-search[b-9indpp5orx] {
    width: 14rem;
    min-width: 8rem;
    max-width: 100%;
}

/*
    The whole row is the control: one click opens the action popup, two go
    straight to the editor. Nothing about that is visible without a cursor
    saying so.
*/
.mawhab-row[b-9indpp5orx] {
    cursor: pointer;
}

/*
    The cell the popup hangs from. It is the date cell, so the popup opens under
    the left of the row - which is where the pointer is after clicking - and it
    lives inside a cell rather than in a row of its own because the list is
    virtualized: an extra row would be an item Virtualize has not counted.
*/
.mawhab-anchor[b-9indpp5orx] {
    position: relative;
}

.mawhab-actions[b-9indpp5orx] {
    position: absolute;
    z-index: 4;
    top: 100%;
    left: 0.25rem;
    display: flex;
    gap: 0.35rem;
    padding: 0.4rem;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    white-space: nowrap;
}

/*
    The editor's row. Its controls are taller than the text they replace, so the
    row grows - which is fine for one row and would not be for all of them,
    hence the fixed height above applying to the rest.
*/
.mawhab-editing > td[b-9indpp5orx] {
    vertical-align: top;
}

/*
    The cleared state in the C column while editing. Wide enough for one letter
    and the caret, and no wider - the column is one character across.
*/
.mawhab-cleared[b-9indpp5orx] {
    width: 4.25rem;
    padding-left: 0.4rem;
}

/* ==================================================================
   The phone
   ==================================================================

   Not a narrower table: a list of days, each with the transactions that fell on
   it underneath. Rendered instead of the table rather than beside it - see the
   note on `narrow` in the code-behind.
*/

.mawhab-day-list[b-9indpp5orx] {
    display: flex;
    flex-direction: column;
}

/*
    The day. Sized to the same box every time, because Virtualize positions rows
    arithmetically from ItemSize and a line whose height depends on its contents
    drags every line below it out of place.
*/
.mawhab-day-heading[b-9indpp5orx] {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background-color: var(--bs-tertiary-bg);
    border-bottom: 1px solid var(--bs-border-color);
}

/*
    One transaction. A button rather than a div, because tapping it is the only
    way to open it - a phone has no hover and no room for a row of controls -
    and a button is what a screen reader and the keyboard both already
    understand.
*/
.mawhab-day-row[b-9indpp5orx] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    width: 100%;
    height: 64px;
    padding: 0.35rem 0.25rem;
    border: 0;
    border-bottom: 1px solid var(--bs-border-color);
    background: transparent;
    color: var(--bs-body-color);
    text-align: left;
}

.mawhab-day-top[b-9indpp5orx] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    /* Without this a flex child refuses to shrink below its content, so the
       payee never truncates and the amount is pushed off the screen instead. */
    min-width: 0;
}

/*
    The payee, cut off by the box rather than by trimming the string - the
    ellipsis then lands where the space actually runs out rather than at a
    character count guessed in C#.
*/
.mawhab-day-payee[b-9indpp5orx] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9375rem;
}

.mawhab-day-amount[b-9indpp5orx] {
    flex: 0 0 auto;
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
}

/* The reconciliation letter, in a fixed width so the amounts above and below
   it line up whether or not a row has one. */
.mawhab-day-cleared[b-9indpp5orx] {
    flex: 0 0 1rem;
    text-align: right;
    font-size: 0.75rem;
    font-weight: 600;
}

/*
    Every category the money went to. They scroll sideways rather than wrapping,
    because wrapping would make the row's height depend on how many splits it
    has - which is exactly what the fixed height above cannot allow.
*/
.mawhab-day-pills[b-9indpp5orx] {
    display: flex;
    gap: 0.25rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.mawhab-day-pills[b-9indpp5orx]::-webkit-scrollbar {
    display: none;
}

.mawhab-day-pills .badge[b-9indpp5orx] {
    flex: 0 0 auto;
    font-weight: 500;
    font-size: 0.6875rem;
}

/*
    The phone's editor: a sheet over the whole page. Bootstrap's modal would do
    this and is driven by its own JS, which would mean handing it a reference and
    keeping its open state in step with the component's - for a panel that is
    shown by an @if and nothing else.

    dvh rather than vh, as the shell does, so the bottom of the panel is not
    stranded under the browser's own chrome.
*/
.mawhab-sheet[b-9indpp5orx] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: stretch;
    background-color: rgba(0, 0, 0, 0.5);
}

.mawhab-sheet-panel[b-9indpp5orx] {
    flex: 1 1 auto;
    max-height: 100dvh;
    overflow-y: auto;
    padding: 1rem;
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    background-color: var(--bs-body-bg);
}
/* _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;
}