/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* The #blazor-error-ui rules that used to live here moved to wwwroot/app.css.

   They had to move: scoped CSS adds a [b-xxxxx] attribute selector, which made the z-index
   here more specific than the global rule and kept the error bar underneath MudBlazor's
   drawer and overlay. It is now defined once, globally, above them. */
/* /Components/PageMessage.razor.rz.scp.css */
/* Centred, and narrow enough that the sentence does not run the width of a desktop screen -
   a line of prose is unreadable past about 70 characters. */
.page-message[b-ed9znlcgfh] {
    max-width: 32rem;
    margin: 3rem auto 0;
    padding: 0 1rem;
}

/* MudIcon sizes from the font, so a display-sized glyph is set here rather than by picking a
   Size that was meant for a button. */
.page-message-icon[b-ed9znlcgfh] {
    font-size: 3rem;
}
/* /Components/Pages/Administration/ErrorLog.razor.rz.scp.css */
/* A stack trace is preformatted text that must not be reflowed - the indentation is the
   structure. It wraps rather than scrolling sideways, because a horizontal scrollbar inside an
   expansion panel is a thing nobody finds. */
.error-detail[b-0b90ccb6rl] {
    margin: 0;
    font-family: var(--mud-typography-caption-family, monospace);
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--mud-palette-text-secondary);

    /* Capped: a nested exception chain can run to hundreds of lines, and one of those should not
       push every other error off the screen. */
    max-height: 22rem;
    overflow-y: auto;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Whole-card link styling.

   The selectors are descendant selectors from ".shortcut", which is a plain <a> written in
   Home.razor. That matters: Blazor CSS isolation only stamps its scope attribute onto elements
   declared in the .razor file, never onto HTML rendered by a child component - so a rule written
   directly against MudCard's class would never match. Scoping the anchor and reaching inward
   works, because only the anchor needs the attribute. */

.shortcut[b-j3v7xk800j] {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
    border-radius: var(--mud-default-borderradius);
}

    /* The card is the visible affordance, so the focus ring belongs on it rather than the
       anchor - keyboard users get the same highlight shape as the hover state. */
    .shortcut:focus[b-j3v7xk800j] {
        outline: none;
    }

    .shortcut .mud-card[b-j3v7xk800j] {
        transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
        cursor: pointer;
    }

    .shortcut:hover .mud-card[b-j3v7xk800j] {
        border-color: var(--mud-palette-primary);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    }

    .shortcut:focus-visible .mud-card[b-j3v7xk800j] {
        border-color: var(--mud-palette-primary);
        box-shadow: 0 0 0 2px var(--mud-palette-primary);
    }

    .shortcut:active .mud-card[b-j3v7xk800j] {
        transform: translateY(1px);
    }

    /* The chevron is decorative; nudge it on hover so the card reads as navigational. */
    .shortcut .mud-icon-root[b-j3v7xk800j] {
        transition: transform 0.15s ease;
    }

    .shortcut:hover .mud-typography + .mud-icon-root[b-j3v7xk800j],
    .shortcut:hover > .mud-card .mud-stack > .mud-icon-root:last-child[b-j3v7xk800j] {
        transform: translateX(2px);
    }

/* Respect a reduced-motion preference - no transforms, colour feedback only. */
@media (prefers-reduced-motion: reduce) {
    .shortcut .mud-card[b-j3v7xk800j],
    .shortcut .mud-icon-root[b-j3v7xk800j] {
        transition: none;
    }

    .shortcut:active .mud-card[b-j3v7xk800j],
    .shortcut:hover > .mud-card .mud-stack > .mud-icon-root:last-child[b-j3v7xk800j] {
        transform: none;
    }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* Scoped to the login page. The native inputs exist because cookie sign-in needs a real form
   POST (see the comment in Login.razor); these rules make them match MudBlazor's outlined
   fields, and they read from the theme's CSS variables so dark mode follows automatically. */

.login-page[b-ve42oy835d] {
    min-height: 100dvh; /* dvh, not vh - 100vh sits under the mobile address bar */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: var(--mud-palette-background);
}

.login-card[b-ve42oy835d] {
    width: 100%;
    max-width: 26rem;
}

/* The regulatory notice under the card. Small and quiet: it has to be there and legible, but a
   returning user signs in every morning and should not have to read past it to find the fields.

   It has its own faint container so it reads as one statement rather than as loose text trailing
   off the bottom of the form - but the fill stays near-transparent, because a second solid panel
   below the card would compete with the thing the page is actually for.

   Sizes step down from the name, so the eye goes name -> what it is -> the legal wording rather
   than meeting one undifferentiated grey paragraph. */
.login-notice[b-ve42oy835d] {
    /* Clear of the card: the notice is a separate thing to read, not a footer attached to the
       form, and at this size it needs air around it to stop looking like fine print stuck on. */
    margin-top: 2.25rem;
    padding: 0.9rem 1rem;

    /* A barely-there tint rather than a solid panel. --mud-palette-action-default-hover is the
       theme's own lowest-alpha overlay - roughly 4% - so it sits on whatever the page background
       is and flips with dark mode by itself, which a hardcoded rgba() would not. */
    background-color: var(--mud-palette-action-default-hover);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);

    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.login-notice-lead[b-ve42oy835d] {
    margin: 0 0 0.35rem;
    text-align: center;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    color: var(--mud-palette-text-primary);
}

.login-notice-expansion[b-ve42oy835d] {
    font-style: italic;
    opacity: 0.75;
}

.login-notice-body[b-ve42oy835d] {
    margin: 0 0 0.55rem;
    font-size: 0.625rem;
    line-height: 1.5;
}

/* Separated by a hairline rather than a heading: it is a different kind of statement from the
   description above it, and a rule says so without adding another line of text to read. */
.login-notice-compliance[b-ve42oy835d] {
    margin: 0;
    padding-top: 0.55rem;
    border-top: 1px solid var(--mud-palette-lines-default);

    /* Same 10px as the line above rather than smaller again. A notice nobody can read is not a
       notice, and the hairline plus the lighter colour already separate it. */
    font-size: 0.625rem;
    line-height: 1.55;
    opacity: 0.85;
    text-wrap: pretty;  /* keeps a single word off the last line where supported */
}

.login-label[b-ve42oy835d] {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.login-input[b-ve42oy835d] {
    width: 100%;
    padding: 0.75rem 0.875rem;
    font-size: 1rem; /* 16px minimum, or iOS Safari zooms the page on focus */
    font-family: inherit;
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: var(--mud-default-borderradius);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .login-input:hover[b-ve42oy835d] {
        border-color: var(--mud-palette-action-default);
    }

    .login-input:focus[b-ve42oy835d] {
        border-color: var(--mud-palette-primary);
        box-shadow: 0 0 0 1px var(--mud-palette-primary);
    }

.login-submit[b-ve42oy835d] {
    width: 100%;
    min-height: 2.75rem; /* comfortable touch target */
    padding: 0.625rem 1rem;
    font-size: 0.9375rem;
    font-family: inherit;
    font-weight: 500;
    color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary);
    border: none;
    border-radius: var(--mud-default-borderradius);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

    .login-submit:hover[b-ve42oy835d] {
        background-color: var(--mud-palette-primary-darken);
    }

    .login-submit:active[b-ve42oy835d] {
        background-color: var(--mud-palette-primary-darken);
    }

    .login-submit:focus-visible[b-ve42oy835d] {
        outline: 2px solid var(--mud-palette-primary);
        outline-offset: 2px;
    }
/* /Components/Pages/Payroll/Payslips.razor.rz.scp.css */
/* Payslip print layout - a reproduction of the workbook's PAYSLIP sheet.

   Sized for letter (8.5in x 11in). With 0.4in margins the printable width is 7.7in, and every
   column below is declared in inches so the total comes to exactly that. Percentages were not
   used on purpose: they resolve against whatever the browser thinks the page is, which differs
   between the screen preview and the print job, and the sheet then reflows between the two.

   Colour is limited to the two blues of the original and the red captions. Everything structural
   is black hairlines on white, so it survives a mono laser. */

.payslip-toolbar[b-xcqibk2zk9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.payslip[b-xcqibk2zk9] {
    background: #fff;
    color: #000;
    width: 7.7in;
    margin: 0 auto 1.5rem;
    padding: 0;
    font-family: Calibri, Arial, sans-serif;
    font-size: 9.5px;
    line-height: 1.25;
}

/* ---------------------------------------------------------- grid */

.ps-grid[b-xcqibk2zk9] {
    width: 7.7in;
    table-layout: fixed;   /* honour the colgroup widths instead of sizing to content */
    border-collapse: collapse;
}

.ps-grid th[b-xcqibk2zk9],
.ps-grid td[b-xcqibk2zk9] {
    border: 1px solid #000;
    padding: 1px 3px;
    height: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Numbers right-aligned on tabular figures, so columns of money line up digit for digit. */
.ps-grid .n[b-xcqibk2zk9] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ps-grid .b[b-xcqibk2zk9] {
    font-weight: 700;
}

/* The blue header row of each panel. */
.ps-head th[b-xcqibk2zk9] {
    background: #9DC3E6;
    font-weight: 700;
    text-align: center;
}

/* Cells that carry no grid in the original - the gutter between the deduction and particular
   panels, and the empty cells that pad a panel out to the same height as its neighbour. */
.ps-grid .ps-blank[b-xcqibk2zk9],
.ps-grid .ps-void[b-xcqibk2zk9] {
    border: none;
}

.ps-head .ps-blank[b-xcqibk2zk9] {
    background: transparent;
}

/* The payroll reference is red in the workbook, which is how the encoder spots the key the rest
   of the sheet is looked up by. */
.ps-id[b-xcqibk2zk9] {
    color: #c00000;
}

/* The blue rule dividing the two bands. */
.ps-rule[b-xcqibk2zk9] {
    width: 7.7in;
    height: 9px;
    background: #9DC3E6;
    margin: 2px 0;
}

/* Red captions over the two day grids. */
.ps-caption[b-xcqibk2zk9] {
    color: #c00000;
    font-weight: 700;
    text-align: center;
}

/* ---------------------------------------------------------- letterhead

   Sits in the lower band, indented so it begins exactly where the PARTICULAR panel begins.

   The panel starts 5.70in across (2.00 + 0.30 + 0.55 + 0.80 + 1.05 + 0.80 + 0.20), and this cell
   starts at 3.70in (1.15 + 0.35 + 0.45 + 0.65 + 0.45 + 0.65). The difference is the 2.00in indent
   below, leaving a 2.00in block that lines up with the two PARTICULAR columns.

   The indent is not decoration: the space it leaves to the left is where the employee signs. */

.ps-company[b-xcqibk2zk9] {
    border: none !important;
    vertical-align: top;
    padding: 4px 0 0 0 !important;

    /* The receipt space and the letterhead sit side by side, filling the cell's 4.00in:
       2.00in of open space to sign in, then 2.00in of letterhead aligned under PARTICULAR. */
    display: flex;
    align-items: flex-start;
}

.ps-receipt[b-xcqibk2zk9] {
    width: 2.00in;
    flex: 0 0 2.00in;
    padding-top: 2px;
}

.ps-receipt-label[b-xcqibk2zk9] {
    font-size: 8px;
    font-weight: 700;
}

.ps-receipt-hint[b-xcqibk2zk9] {
    font-size: 6px;
    color: #555;
    white-space: normal;
}

.ps-company-block[b-xcqibk2zk9] {
    width: 2.00in;
    flex: 0 0 2.00in;
    text-align: center;
}

/* The period is the longest value in a 1.00in column, so it is allowed to shrink rather than
   be clipped by the cell's ellipsis. */
.ps-period[b-xcqibk2zk9] {
    font-size: 8px;
}

.ps-company-name[b-xcqibk2zk9] {
    font-weight: 700;
    font-size: 10px;
    color: #1f3864;
    line-height: 1.2;
}

.ps-company-line[b-xcqibk2zk9] {
    font-size: 6.5px;
    line-height: 1.25;
    white-space: normal;
}

/* ---------------------------------------------------------- cut line */

.ps-cut[b-xcqibk2zk9] {
    position: relative;
    border-top: 1px dashed #666;
    margin-top: 10px;
    height: 0;
}

.ps-cut span[b-xcqibk2zk9] {
    position: absolute;
    top: -7px;
    left: 0;
    background: #fff;
    padding-right: 4px;
    font-size: 9px;
    color: #666;
    line-height: 1;
}

/* Nothing to cut after the last slip on the run. */
.payslip:last-child .ps-cut[b-xcqibk2zk9] {
    display: none;
}

/* ---------------------------------------------------------- columns

   Top band: 2.00 + 0.30 + 0.55 + 0.80 + 1.05 + 0.80 + 0.20 + 1.00 + 1.00 = 7.70in
   Lower band: 1.15 + 0.35 + 0.45 + 0.65 + 0.45 + 0.65 + 4.00 = 7.70in */

.c-earn-label[b-xcqibk2zk9] { width: 2.00in; }
.c-hrs[b-xcqibk2zk9]        { width: 0.30in; }
.c-rate[b-xcqibk2zk9]       { width: 0.55in; }
.c-amount[b-xcqibk2zk9]     { width: 0.80in; }
.c-ded-label[b-xcqibk2zk9]  { width: 1.05in; }
.c-gap[b-xcqibk2zk9]        { width: 0.20in; }
.c-part-label[b-xcqibk2zk9] { width: 1.00in; }
.c-part-value[b-xcqibk2zk9] { width: 1.00in; }

.c-sum-label[b-xcqibk2zk9]  { width: 1.15in; }
.c-sum-value[b-xcqibk2zk9]  { width: 0.35in; }
.c-day[b-xcqibk2zk9]        { width: 0.45in; }
.c-dayval[b-xcqibk2zk9]     { width: 0.65in; }
.c-company[b-xcqibk2zk9]    { width: 4.00in; }

/* ---------------------------------------------------------- screen

   Below letter width the sheet is scaled rather than reflowed. A payslip that rearranged itself
   on a phone would no longer be a preview of what comes out of the printer, which is the only
   thing this page is for. */

@media (max-width: 8in) {
    .payslip[b-xcqibk2zk9] {
        transform: scale(0.46);
        transform-origin: top left;
        margin-bottom: -18rem;
    }
}

/* ---------------------------------------------------------- print */

@page {
    size: letter;
    margin: 0.4in;
}

@media print {
    /* Payslips flow, several to a sheet, and are cut apart afterwards - a forced page break per
       employee would waste most of every page. break-inside still applies, so a slip is never
       split across two sheets - half a payslip is not something you can hand to anybody. */
    .payslip[b-xcqibk2zk9] {
        margin: 0 0 0.22in;
        transform: none;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Header fills and the blue rule are backgrounds, which browsers drop from printouts by
       default. Without this the sheet prints as an unbanded grid and stops looking like the
       document people already know. */
    .ps-head th[b-xcqibk2zk9],
    .ps-rule[b-xcqibk2zk9] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* The dashed rule is a border, so it prints - but the scissors glyph sits on a white chip to
       break the line, and that chip is a background. */
    .ps-cut span[b-xcqibk2zk9] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
/* /Components/Pages/Payroll/Receivables.razor.rz.scp.css */
/* The two date pickers sit in the page header beside the Apply button. Narrow enough that the
   three controls stay on one line on a tablet, and they wrap rather than shrink below that. */
.receivables-date[b-h7tdc1iqmo] {
    width: 9rem;
}

@media (max-width: 599.98px) {
    .receivables-date[b-h7tdc1iqmo] {
        width: 100%;
    }
}
/* /Components/Pages/Profile.razor.rz.scp.css */
/* View mode for My Details.

   A definition list rather than read-only text fields. MudTextField renders only its floating
   label when it has no value, so an employee with no middle name, suffix, birthdate or email got
   a column of headings with nothing beneath them and uneven gaps where the values should have
   been. Every row here has the same shape whether or not there is anything in it.

   Two columns at EVERY size, including a phone. Stacking label above value doubled the height of
   the list for no benefit: seven fields became fourteen rows of mostly whitespace, so a form
   short enough to fit on one screen needed scrolling instead. The label column is fixed and
   narrow, the value takes the rest, and a long email wraps within its own column rather than
   pushing the card sideways.

   Mobile first: the phone layout is the base rule here, and the wider screens only get a roomier
   label column - not a different shape. */

.profile-details[b-fi4kgz7uy6] {
    margin: 0;
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    column-gap: 0.75rem;
    align-items: baseline;
}

.profile-details dt[b-fi4kgz7uy6] {
    grid-column: 1;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    line-height: 1.35;
}

.profile-details dd[b-fi4kgz7uy6] {
    grid-column: 2;
    margin: 0;
    font-size: 0.9375rem;
    color: var(--mud-palette-text-primary);
    /* Long emails wrap inside the column instead of widening the card. */
    overflow-wrap: anywhere;
}

/* A hairline between rows, skipped on the first, so the list reads as a table of facts without
   drawing a full grid around them. */
.profile-details dt:not(:first-of-type)[b-fi4kgz7uy6],
.profile-details dd:not(:first-of-type)[b-fi4kgz7uy6] {
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-top: 0.55rem;
    margin-top: 0.55rem;
}

@media (min-width: 600px) {
    .profile-details[b-fi4kgz7uy6] {
        grid-template-columns: 10rem 1fr;
        column-gap: 1.5rem;
    }
}

/* Daily Time Record on the payroll tab.

   A list of days rather than a table. Date, Time In, Time Out, OT and UT abreast needs more width
   than a phone has: the headings wrapped, "08:46 AM" broke after the minutes, and on an ordinary
   day three of the five cells held only a dash.

   So the day is the row. Date down the left, the two punches as one phrase beside it, and OT and
   UT as pills that appear only when there is something to report. Mobile first: this is the phone
   layout, and the wider screen only pulls the pills up onto the same line. */

.dtr-day[b-fi4kgz7uy6] {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    column-gap: 0.75rem;
    row-gap: 0.25rem;
    padding: 0.5rem 0;
    align-items: baseline;
}

/* A hairline between days, skipped before the first, so the list reads as a record without a grid
   drawn around it - the same treatment as the details list above. */
.dtr-day + .dtr-day[b-fi4kgz7uy6] {
    border-top: 1px solid var(--mud-palette-lines-default);
}

.dtr-date[b-fi4kgz7uy6] {
    grid-column: 1;
    grid-row: 1;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.dtr-times[b-fi4kgz7uy6] {
    grid-column: 2;
    grid-row: 1;
    font-size: 0.9375rem;
    color: var(--mud-palette-text-primary);
    /* Tabular figures, so the clock-in times line up down the column even though the text around
       them is proportional. */
    font-variant-numeric: tabular-nums;
}

/* A day with no punches at all. Still listed - an absence the payroll counted should be visible -
   but it should not compete with the days that were worked. */
.dtr-quiet[b-fi4kgz7uy6] {
    color: var(--mud-palette-text-disabled);
}

.dtr-flags[b-fi4kgz7uy6] {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.dtr-flag[b-fi4kgz7uy6] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0 0.45rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.75rem;
    line-height: 1.7;
    white-space: nowrap;
}

.dtr-ot-approved[b-fi4kgz7uy6] {
    color: var(--mud-palette-success);
}

/* Worked but not approved, so not paid. Deliberately the quietest of the three: it is a statement
   about what did NOT happen, and colouring it as a problem would read as an accusation. */
.dtr-ot-pending[b-fi4kgz7uy6] {
    color: var(--mud-palette-text-secondary);
}

.dtr-ut[b-fi4kgz7uy6] {
    color: var(--mud-palette-warning);
}

@media (min-width: 600px) {
    .dtr-day[b-fi4kgz7uy6] {
        grid-template-columns: 8rem 1fr auto;
        align-items: center;
    }

    .dtr-flags[b-fi4kgz7uy6] {
        grid-column: 3;
        grid-row: 1;
        justify-content: flex-end;
    }
}
/* /Components/Pages/SetupAdmin.razor.rz.scp.css */
/* Same shape as the sign-in page: a single centred card on the page background.
   dvh, not vh - 100vh sits under the mobile browser's address bar. */
.setup-page[b-wt29ujels4] {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: var(--mud-palette-background);
}

.setup-card[b-wt29ujels4] {
    width: 100%;
    max-width: 30rem;
}