@import '_content/DDConnect.Web.Shared/DDConnect.Web.Shared.zw1ss60g74.bundle.scp.css';

/* /Layout/HeaderSelectorCaption.razor.rz.scp.css */
.header-selector-caption[b-xlpxdlw3ic] {
    width: max-content;
    max-width: 100%;
    min-width: 0;
}

.header-selector-caption span[b-xlpxdlw3ic],
.header-selector-caption[b-xlpxdlw3ic]  .mud-typography {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.nav-menu-container[b-yogu6drmn5]  .nav-group-heading > .mud-nav-link > .mud-nav-link-text {
    font-weight: bold;
}

/* Only the nav entries scroll; the logo/profile (top) and version/update/copyright
   (bottom) stay anchored. Drawer overflow is capped via inline style on MudDrawer. */
.nav-menu-container[b-yogu6drmn5] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* The nav list scrolls between two fixed blocks, so its own scrollbar is the only
   sign there is more to see. These gradients add a shadow at whichever edge has
   content beyond it: the cover pair scrolls with the content and hides the shadow
   pair when that edge is reached. The drawer keeps one fixed colour in both
   themes, so the covers can match it. The shadow is the dark theme's background
   colour — a step below the sidebar in the same family — rather than black,
   which would read as a hole. */
.nav-menu-container[b-yogu6drmn5] {
    background:
        linear-gradient(var(--mud-palette-drawer-background), rgba(0, 0, 0, 0)) top / 100% 24px no-repeat local,
        linear-gradient(rgba(0, 0, 0, 0), var(--mud-palette-drawer-background)) bottom / 100% 24px no-repeat local,
        radial-gradient(farthest-side at 50% 0, rgba(17, 24, 29, 1), rgba(17, 24, 29, 0)) top / 100% 12px no-repeat scroll,
        radial-gradient(farthest-side at 50% 100%, rgba(17, 24, 29, 1), rgba(17, 24, 29, 0)) bottom / 100% 12px no-repeat scroll;
}
/* /Layout/WorkspaceSelector.razor.rz.scp.css */
/* Full-screen workspace picker shown once per sign-in, before the app shell
   renders. It replaces the previous dialog over an empty app. */
.workspace[b-5l37bld6tv] {
    min-height: 100vh;
    overflow-y: auto;
    background-color: var(--mud-palette-background);
}

.workspace-inner[b-5l37bld6tv] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 24px 48px 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.workspace-topbar[b-5l37bld6tv] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.workspace-card[b-5l37bld6tv] {
    position: relative;
    border-radius: 16px;
    padding: 40px 24px 24px 24px;
}

/* The two step badges sit on the top edge of the card, joined by a rule. */
.workspace-steps[b-5l37bld6tv] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 0;
}

.workspace-step[b-5l37bld6tv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.workspace-step.is-done[b-5l37bld6tv] {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.workspace-steps-rule[b-5l37bld6tv] {
    width: 128px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.workspace-columns[b-5l37bld6tv] {
    display: flex;
    align-items: stretch;
    gap: 24px;
}

.workspace-column[b-5l37bld6tv] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.workspace-column + .workspace-column[b-5l37bld6tv] {
    border-left: 1px solid var(--mud-palette-lines-default);
    padding-left: 24px;
}

.workspace-column-head[b-5l37bld6tv] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.workspace-column-icon[b-5l37bld6tv] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: var(--mud-palette-primary-hover);
}

/* No frame and no rules between the rows: the selected row states the choice on its
   own, and a box around the list only competed with it. */
.workspace-options[b-5l37bld6tv] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.workspace-option[b-5l37bld6tv] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border: 0;
    background-color: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.workspace-option[b-5l37bld6tv] {
    border-radius: 12px;
}

.workspace-option:hover:not(:disabled)[b-5l37bld6tv] {
    background-color: var(--mud-palette-action-default-hover);
}

.workspace-option:disabled[b-5l37bld6tv] {
    cursor: default;
    opacity: 0.6;
}

.workspace-option[aria-checked="true"][b-5l37bld6tv] {
    background-color: var(--mud-palette-primary-hover);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
    border-radius: 12px;
}

.workspace-option-text[b-5l37bld6tv] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.workspace-option-title[b-5l37bld6tv] {
    font-weight: 600;
}

.workspace-option[aria-checked="true"] .workspace-option-title[b-5l37bld6tv] {
    color: var(--mud-palette-primary);
}

.workspace-option-caption[b-5l37bld6tv] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.workspace-option-meta[b-5l37bld6tv] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.workspace-note[b-5l37bld6tv] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 840px;
    margin: 0 auto;
    width: 100%;
    padding: 16px;
    border-radius: 12px;
    background-color: var(--mud-palette-primary-hover);
}

.workspace-actions[b-5l37bld6tv] {
    display: flex;
    justify-content: center;
}

@media (max-width: 899.98px) {
    .workspace-columns[b-5l37bld6tv] {
        flex-direction: column;
    }

    .workspace-column + .workspace-column[b-5l37bld6tv] {
        border-left: 0;
        border-top: 1px solid var(--mud-palette-lines-default);
        padding-left: 0;
        padding-top: 24px;
    }

    .workspace-steps[b-5l37bld6tv] {
        display: none;
    }

    .workspace-card[b-5l37bld6tv] {
        padding: 24px 16px;
    }
}
/* /Pages/Auth/LoginPage.razor.rz.scp.css */
/* Company code panel — the code the user entered in the first step, shown
   above the credential fields. Clicking it returns to the first step. */
.company-code-label[b-7616gfec8m] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    color: var(--mud-palette-primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.company-code-label[b-7616gfec8m]::before,
.company-code-label[b-7616gfec8m]::after {
    content: "";
    flex: 1 1 auto;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.company-code[b-7616gfec8m] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--mud-palette-primary);
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-primary-hover);
    color: var(--mud-palette-text-primary);
    font: inherit;
    cursor: pointer;
}

.company-code:hover[b-7616gfec8m] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.16);
}

.company-code-value[b-7616gfec8m] {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
/* /Pages/Dashboard/AutoRefreshIndicator.razor.rz.scp.css */
/* The status text changes every second. Left alone it resizes as it goes — 10 is wider than 9,
   and "Paused" is a different width again — and every resize reflows the filter bar row around it.

   Three rules stop that. Tabular figures make every digit the same width; nowrap keeps it on one
   line; and contain: layout tells the browser this element's inner layout cannot affect anything
   outside it, so even an unforeseen change stays put. The component pads the number to a fixed
   character count, which is what makes tabular figures sufficient. */
.auto-refresh-status[b-39fg5q7k7g] {
    display: inline-block;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    contain: layout;
}
/* /Pages/Dashboard/Cards/PieceworkPerformersCard.razor.rz.scp.css */
/* Fills the card body and scrolls internally. flex-grow lets the list fill the height the card inherits
   from the taller, fixed-height bar-chart card in the same row (row uses align-items: stretch), while
   max-height caps it at the bar chart's height (260px, kept in sync with PieceworkTotalsCard's
   ApexChart Height) so a full list of ~10 rows scrolls instead of stretching the whole row taller.
   flex-basis: auto (not 0) keeps the list from collapsing to nothing when the row wraps on a narrow
   viewport and the card stands alone with no taller sibling to stretch against. */
.performers-list[b-qni2g3xdje] {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 260px;
    overflow-y: auto;

    /* Shared column template for the header and every row so they line up: a fixed-width employee
       column (names all start at the same x, fits any realistic number), a flexible name column, and
       a fixed-width metric column (uniform, monospaced pills). */
    --perf-grid: 3rem 1fr 4.75rem;
}

/* Header and rows share the grid template so their columns align. The header is sticky inside the
   scroll container, so it stays visible — and aligned, sharing the same scrollbar gutter — as the
   list scrolls. */
.performers-header[b-qni2g3xdje],
.performer-row[b-qni2g3xdje] {
    display: grid;
    grid-template-columns: var(--perf-grid);
    align-items: center;
    gap: 8px;
}

.performers-header[b-qni2g3xdje] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--mud-palette-surface);
    padding-bottom: 4px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
}

.performers-header .h-employee[b-qni2g3xdje] {
    grid-column: 1 / 3;
}

.performers-header .h-metric[b-qni2g3xdje] {
    grid-column: 3;
    text-align: center;
}

.performer-row[b-qni2g3xdje] {
    padding: 1px 0;
}

.performer-row .p-emp[b-qni2g3xdje] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.performer-row .p-name[b-qni2g3xdje] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Rank-shaded pill. The background and text colours are set inline per row (MetricPillStyle); this
   rule owns the pill shape. width: 100% fills the fixed metric column, so every pill is the same
   width regardless of value; the value is monospaced so digits align. */
.performer-row .p-metric[b-qni2g3xdje] {
    width: 100%;
    padding: 2px 8px;
    border-radius: 999px;
    text-align: center;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Pages/Employee/EmployeeSummaryHeader.razor.rz.scp.css */
/* Placeholder until employee photos are stored. The strip around it is
   ResourceDetailHeader's. */
.employee-summary-photo[b-n2ftykky4k] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
}

.employee-summary-initials[b-n2ftykky4k] {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
/* /Pages/Piecework/PieceworkPaymentEntriesGrid.razor.rz.scp.css */
/* The employee number and the name stay in place while the sixteen figures scroll past them. A
   reader who scrolls right to the wage columns must still see whose line they are reading.

   This is CSS and not a grid parameter on purpose (spec §2.1): StickyLeft and the column-options
   panel hang off MudBlazor's filtering machinery, which ddconnect-ui-conventions R12 turns off
   with Filterable="false".

   The wrapper class is written before ::deep, not inside it: scoped CSS prefixes the scope
   attribute, so `::deep X` compiles to `[scope] X` and needs the attribute on an ANCESTOR.
   `.piecework-entries` carries the attribute itself, so it has to sit on the left of ::deep. The
   cells themselves are rendered by MudDataGrid, which never carries this component's scope.

   The sideways scrolling itself is the grid's own HorizontalScrollbar parameter. Only the two
   columns that stay in place need CSS. */

/* A solid ground under the two cells that stay in place. Without it the figures scrolling
   underneath show through them. It is the table's own surface colour, so a striped row and a
   hovered row do not carry their tint into these two cells — the alternative is content bleeding
   through, which is worse. */
.piecework-entries[b-o2u493j4v9] {
    min-height: 0;
}

.piecework-entries[b-o2u493j4v9]  .piecework-entries-first,
.piecework-entries[b-o2u493j4v9]  .piecework-entries-second {
    position: sticky;
    z-index: 1;
    background-color: var(--mud-palette-surface);
}

/* The two heading cells sit above the body cells they share a column with. */
.piecework-entries[b-o2u493j4v9]  th.piecework-entries-first,
.piecework-entries[b-o2u493j4v9]  th.piecework-entries-second {
    z-index: 2;
}

.piecework-entries[b-o2u493j4v9]  .piecework-entries-first {
    left: 0;
    width: 7rem;
    min-width: 7rem;
}

/* The name starts where the number ends, so the two do not overlap. */
.piecework-entries[b-o2u493j4v9]  .piecework-entries-second {
    left: 7rem;
    width: 14rem;
    min-width: 14rem;
}

/* The number is one of the eighteen a person can turn off. With it off, the name is the first
   column and starts at the left edge, or it would hold a 7rem gap of scrolled figures beside it. */
.piecework-entries.piecework-entries-no-number[b-o2u493j4v9]  .piecework-entries-second {
    left: 0;
}
/* /Pages/Piecework/PieceworkPricingFormulaFields.razor.rz.scp.css */
/* MudSelect renders the selected item's whole template in the closed value slot as well as in the
   dropdown list, so the formula description would show inside the box AND again as helper text
   under it. It belongs in the list and in the helper text, not crammed into the box on top of
   both, so it is hidden in the value slot only.

   The wrapper is written before ::deep, not inside it: scoped CSS prefixes the scope attribute,
   so `::deep X` compiles to `[scope] X` and needs the attribute on an ANCESTOR. `.formula-select`
   carries the attribute itself, so it has to sit on the left of ::deep to match. */
.formula-select[b-l57kkmg5ym]  .mud-input-slot .formula-hint {
    display: none;
}