/* /Layout/EmptyLayout.razor.rz.scp.css */
/* Fills the viewport and centres whatever the page puts inside it, so a short
   page does not sit awkwardly against the top edge with no app bar above it.
   dvh rather than vh: on mobile browsers vh includes the retracting address bar,
   which leaves the content pushed below the fold on first paint. */
.empty-layout[b-ph076ntwta] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: 24px;
    background: var(--mud-palette-background);
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* Layout is handled by MudBlazor (MudLayout / MudAppBar / MudMainContent).
   Component-scoped tweaks only. */
[b-ji01m5n0he] .app-main {
    min-height: 100vh;
}

/* The app bar is one row that must never wrap: its children are absolutely
   sized by MudBlazor, so a wrap drops them on top of each other rather than
   onto a second line. Everything below makes the row fit instead. */
[b-ji01m5n0he] .mud-appbar .mud-toolbar {
    flex-wrap: nowrap;
    /* The toolbar's default side padding is generous for a desktop and is most
       of what overflows a small phone. */
    padding-inline: 0.5rem;
}

/* The brand is the one thing that can give: the logo stays, the wordmark is
   already hidden below sm, and the link itself must be allowed to shrink or it
   holds the row open at its full text width. */
[b-ji01m5n0he] .brand {
    min-width: 0;
    overflow: hidden;
}

    [b-ji01m5n0he] .brand .mud-typography {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

/* The view switch never shrinks — losing half of "My Niyyat" would be worse
   than showing the icon alone, which is what the narrow rule below does. */
[b-ji01m5n0he] .view-switch {
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

    [b-ji01m5n0he] .view-switch .mud-chip {
        white-space: nowrap;
    }

/* Phones: the two chips become icon-only. Their icons and the selected chip's
   checkmark still distinguish the views, and each chip keeps a title attribute
   carrying the label it no longer displays. */
@media (max-width: 599.98px) {
    [b-ji01m5n0he] .view-switch-label {
        /* Not display:none — the chip lays its content out in a flex row, and a
           removed child would leave the icon off-centre in the remaining box. */
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    [b-ji01m5n0he] .view-switch .mud-chip {
        min-width: 0;
        padding-inline: 0.5rem;
    }

        /* The icon carries the whole chip once the label is gone, so the gap it
           held for the text would read as lopsided padding. */
        [b-ji01m5n0he] .view-switch .mud-chip .mud-chip-icon {
            margin-inline: 0;
        }
}

/* Very narrow (small phones, split-screen): the theme toggle is a convenience
   and the account menu is not, so the toggle is what goes. It stays reachable —
   the app follows the device's own light/dark setting. */
@media (max-width: 359.98px) {
    [b-ji01m5n0he] .mud-appbar .theme-toggle {
        display: none;
    }
}
/* /Pages/IstifadaNiyyat.razor.rz.scp.css */
/* 0.875rem is the page's body size (see .instructions below). MudBlazor's
   inputs and alerts default to 1rem, so they are brought down to match — the
   floating labels are left alone, since the outlined notch is sized against
   their own scale. */
.niyyat-page[b-19mkj7xz8i]  .mud-input-root,
.niyyat-page[b-19mkj7xz8i]  .mud-input-slot,
.niyyat-page[b-19mkj7xz8i]  .mud-select-input,
.niyyat-page[b-19mkj7xz8i]  .mud-alert-message {
    font-size: 0.875rem;
}

/* One purpose: icon, label, and the amount pickers. Wide enough, the three sit
   on one line with the pickers pinned right at their natural size. The pickers
   need ~320px that cannot shrink, so below that the row hands them a line of
   their own under the label rather than pushing the card past the viewport.

   The pickers and the avatar are MudBlazor components, so their root elements
   never carry this file's scope attribute — those rules go through ::deep from
   .purpose-row, which is plain markup here and does carry it. */
.purpose-row[b-19mkj7xz8i] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    /* The label's longest word, not the row, decides how narrow this can get. */
    min-width: 0;
}

.purpose-row[b-19mkj7xz8i]  .purpose-avatar {
    flex: 0 0 auto;
}

.purpose-label[b-19mkj7xz8i] {
    flex: 1 1 12rem;
    /* Without this a long purpose name sets a floor on the flex item's width
       and the row overflows instead of wrapping. */
    min-width: 0;
}

.purpose-controls[b-19mkj7xz8i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    margin-left: auto;
    min-width: 0;
}

.purpose-controls[b-19mkj7xz8i]  .purpose-count {
    width: 100px;
    flex: 0 0 auto;
}

.purpose-controls[b-19mkj7xz8i]  .purpose-amount {
    width: 200px;
}

/* Pickers move under the label. They line up with it rather than with the
   avatar, so the row still reads as one purpose. */
@media (max-width: 720px) {
    .purpose-row[b-19mkj7xz8i] {
        gap: 0.5rem 1rem;
    }

    .purpose-controls[b-19mkj7xz8i] {
        flex: 1 1 100%;
        /* Avatar (40px) + the row's 1rem gap, so the controls sit under the label. */
        margin-left: calc(40px + 1rem);
    }

    .purpose-controls[b-19mkj7xz8i]  .purpose-amount {
        /* Takes the space Count leaves instead of holding 200px. */
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }
}

/* Narrower than the two pickers side by side: stack them full-width. */
@media (max-width: 420px) {
    .purpose-controls[b-19mkj7xz8i] {
        flex-wrap: wrap;
        margin-left: 0;
    }

    .purpose-controls[b-19mkj7xz8i]  .purpose-count,
    .purpose-controls[b-19mkj7xz8i]  .purpose-amount {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* Summary panel line: purpose on the left, its money on the right. The label
   carries an icon and can carry an "amount × count" breakdown, so it is the
   half that gives — the figure stays whole and right-aligned, since a wrapped
   number reads as two numbers. */
.summary-line[b-19mkj7xz8i] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
}

    /* Both children are MudText, so they carry no scope attribute of their own
       and have to be reached through ::deep from the row. */
    .summary-line[b-19mkj7xz8i]  > :first-child {
        min-width: 0;
    }

    .summary-line[b-19mkj7xz8i]  > :last-child {
        flex: 0 0 auto;
        text-align: right;
        white-space: nowrap;
    }

/* Payment instructions card. Plain HTML list rather than MudList so the
   address and memo blocks can nest inside a bullet; all colours come from the
   MudBlazor palette so the card follows the light/dark theme. */
.instructions[b-19mkj7xz8i] {
    margin: 0;
    padding-left: 1.15rem;
    font-size: 0.875rem;
    line-height: 1.6;
    /* The memo lines and the payee are long unbroken runs; on a phone they would
       otherwise widen the card and take the whole page into horizontal scroll. */
    overflow-wrap: anywhere;
}

    .instructions > li[b-19mkj7xz8i] {
        margin-bottom: 0.9rem;
    }

        .instructions > li:last-child[b-19mkj7xz8i] {
            margin-bottom: 0;
        }

        .instructions > li[b-19mkj7xz8i]::marker {
            color: var(--mud-palette-primary);
        }

/* Address block: called out from the surrounding text, not a quote. */
.instructions-address[b-19mkj7xz8i] {
    display: block;
    margin: 0.45rem 0 0;
    padding: 0.6rem 0.9rem;
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: 0 8px 8px 0;
    background-color: var(--mud-palette-background-grey);
    font-style: normal;
    line-height: 1.55;
}

.instructions-payee[b-19mkj7xz8i] {
    color: var(--mud-palette-error);
    font-weight: 600;
}

.instructions-address a[b-19mkj7xz8i] {
    color: inherit;
    text-decoration: none;
}

    .instructions-address a:hover[b-19mkj7xz8i] {
        text-decoration: underline;
    }

/* "and / Or" between the memo variants — a connector, so it reads quieter
   than the memo lines it separates. */
.instructions-memo[b-19mkj7xz8i] {
    margin-top: 0.35rem;
}

.instructions-separator[b-19mkj7xz8i] {
    margin: 0.2rem 0;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8rem;
}
/* /Pages/SignIn.razor.rz.scp.css */
/* Styled as a button, built as a link - see the comment beside it in the markup.
   Colours come from the theme's own tokens so it follows light and dark without
   a second rule. */
.its-login-button[b-6ta14kfmhl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px is the smallest comfortable touch target; this is the only control on
       the page and is often reached on a phone. */
    min-height: 44px;
    padding: 0 28px;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .55);
    transition: filter .15s ease, transform .15s ease;
}

.its-login-button:hover[b-6ta14kfmhl] {
    filter: brightness(1.08);
}

.its-login-button:active[b-6ta14kfmhl] {
    transform: translateY(1px);
}

/* Never remove the focus ring: this is the only way through the page for anyone
   navigating by keyboard. */
.its-login-button:focus-visible[b-6ta14kfmhl] {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 3px;
}

/* Capped in both directions: min() keeps it off the edges on a narrow phone, and
   the aspect ratio is left to the file rather than fixed here, so a re-export at
   different proportions cannot end up stretched. */
.brand-mark[b-6ta14kfmhl] {
    width: min(280px, 68vw);
    height: auto;
    margin-bottom: 32px;
}