/* _content/Ayva.Finance.Payroll/Components/Admin/ApproveConfirmDialog.razor.rz.scp.css */
/* ApproveConfirmDialog — the commitment, stated plainly. Tokens only. */

.payroll-approve-heading[b-qkby49fm4s] {
    font-family: var(--font-primary);
    font-size: var(--text-lg);
    font-weight: 700;
}

.payroll-approve[b-qkby49fm4s] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    min-width: 0;
    color: var(--text-primary);
    font-family: var(--font-primary);
}

.payroll-approve-loading[b-qkby49fm4s] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-xl) 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.payroll-approve-error[b-qkby49fm4s] {
    margin: 0;
    padding: var(--space-lg);
    background: var(--error-color-10);
    border: 1px solid var(--error-color-30);
    border-radius: var(--radius-md);
    color: var(--error-text);
    font-size: var(--text-sm);
}

.payroll-approve-facts[b-qkby49fm4s] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-lg);
    width: 100%;
    margin: 0;
}

.payroll-approve-facts dt[b-qkby49fm4s] {
    color: var(--text-muted);
    font-size: var(--text-3xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.payroll-approve-facts dd[b-qkby49fm4s] {
    margin: var(--space-2xs) 0 0;
    font-size: var(--text-lg);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.payroll-approve-sentence[b-qkby49fm4s] {
    margin: 0;
    font-size: var(--text-sm);
}

.payroll-approve-sentence-bad[b-qkby49fm4s] {
    color: var(--error-text);
    font-weight: 600;
}

.payroll-approve-warnings[b-qkby49fm4s] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.payroll-approve-warning[b-qkby49fm4s] {
    padding: var(--space-md) var(--space-lg);
    background: var(--warning-color-10);
    border: 1px solid var(--warning-color-30);
    border-radius: var(--radius-md);
    color: var(--warning-color);
    font-size: var(--text-xs);
}

.payroll-approve-variance[b-qkby49fm4s] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-lg);
    background: var(--error-color-10);
    border: 1px solid var(--error-color-30);
    border-radius: var(--radius-md);
}

.payroll-approve-ack[b-qkby49fm4s]  .mud-checkbox-label {
    /* ::deep — MudCheckBox renders a child component with no scope attribute. */
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
}

.payroll-approve-button[b-qkby49fm4s] {
    min-height: var(--tap-target-min);
    padding: 0 var(--space-lg);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--accent-color-light);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), opacity var(--transition-fast);
}

.payroll-approve-button:hover:not(:disabled)[b-qkby49fm4s] {
    border-color: var(--accent-color);
    background: var(--bg-hover);
}

.payroll-approve-button:focus-visible[b-qkby49fm4s] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.payroll-approve-button:disabled[b-qkby49fm4s] {
    opacity: 0.5;
    cursor: not-allowed;
}

.payroll-approve-button-primary[b-qkby49fm4s] {
    background: var(--accent-color-10);
    border-color: var(--accent-color-30);
    font-weight: 700;
}

@media (max-width: 768px) {
    .payroll-approve-facts[b-qkby49fm4s] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-md);
    }
}

@media (prefers-reduced-motion: reduce) {
    .payroll-approve-button[b-qkby49fm4s] {
        transition: none;
    }
}
/* _content/Ayva.Finance.Payroll/Components/Admin/OverviewTab.razor.rz.scp.css */
/* OverviewTab — desktop-first cards over a worklist. Tokens only; the grid
   stacks at 768px so a phone reads it as one column rather than two half-
   width tables. */

.payroll-overview[b-2pqfaw7vd0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xl);
    min-width: 0;
    color: var(--text-primary);
    font-family: var(--font-primary);
}

.payroll-overview-loading[b-2pqfaw7vd0] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-3xl) 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* ── Head ──────────────────────────────────────────────────────────────── */

.payroll-overview-head[b-2pqfaw7vd0] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-xl);
    min-width: 0;
}

.payroll-overview-heading[b-2pqfaw7vd0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
}

.payroll-overview-title[b-2pqfaw7vd0] {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.payroll-overview-chips[b-2pqfaw7vd0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.payroll-chip[b-2pqfaw7vd0] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-2xs) var(--space-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: var(--text-2xs);
    font-weight: 600;
}

.payroll-chip-dot[b-2pqfaw7vd0] {
    width: var(--space-sm);
    height: var(--space-sm);
    border-radius: var(--radius-full);
    background: currentColor;
}

.payroll-chip-neutral[b-2pqfaw7vd0] {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

.payroll-chip-good[b-2pqfaw7vd0] {
    background: var(--success-color-10);
    border-color: var(--success-color-30);
    color: var(--success-color);
}

.payroll-chip-warn[b-2pqfaw7vd0] {
    background: var(--warning-color-10);
    border-color: var(--warning-color-30);
    color: var(--warning-color);
}

.payroll-chip-bad[b-2pqfaw7vd0] {
    background: var(--error-color-10);
    border-color: var(--error-color-30);
    color: var(--error-text);
}

.payroll-chip-link[b-2pqfaw7vd0] {
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font-family: var(--font-primary);
    font-size: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.payroll-chip-link:focus-visible[b-2pqfaw7vd0] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* ── Cards ─────────────────────────────────────────────────────────────── */

.payroll-card[b-2pqfaw7vd0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    align-items: flex-start;
    min-width: 0;
    padding: var(--space-2xl);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast);
}

.payroll-card-bad[b-2pqfaw7vd0] {
    flex-direction: row;
    align-items: center;
    border-color: var(--error-color-30);
    color: var(--error-text);
    font-size: var(--text-sm);
}

.payroll-card-head[b-2pqfaw7vd0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    width: 100%;
    min-width: 0;
}

.payroll-card-title[b-2pqfaw7vd0] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 600;
}

.payroll-card-meta[b-2pqfaw7vd0] {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.payroll-empty[b-2pqfaw7vd0] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.payroll-action[b-2pqfaw7vd0] {
    min-height: var(--tap-target-min);
    padding: 0 var(--space-lg);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--accent-color-light);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.payroll-action:hover[b-2pqfaw7vd0] {
    border-color: var(--accent-color);
    background: var(--bg-hover);
}

.payroll-action:focus-visible[b-2pqfaw7vd0] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* ── Checklist ─────────────────────────────────────────────────────────── */

.payroll-checklist-list[b-2pqfaw7vd0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.payroll-checklist-row[b-2pqfaw7vd0] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
    color: var(--text-primary);
}

.payroll-checklist-row-done[b-2pqfaw7vd0] {
    color: var(--text-secondary);
}

.payroll-checklist-row-done[b-2pqfaw7vd0]  .mud-icon-root {
    /* ::deep — MudIcon is a child component and carries no scope attribute. */
    color: var(--success-color);
}

.payroll-checklist-text[b-2pqfaw7vd0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.payroll-checklist-headline[b-2pqfaw7vd0] {
    font-size: var(--text-sm);
    font-weight: 600;
}

.payroll-checklist-detail[b-2pqfaw7vd0] {
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

/* ── Two-card grid ─────────────────────────────────────────────────────── */

.payroll-overview-grid[b-2pqfaw7vd0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: var(--space-xl);
    min-width: 0;
}

.payroll-facts[b-2pqfaw7vd0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--space-lg);
    width: 100%;
    margin: 0;
}

.payroll-facts dt[b-2pqfaw7vd0] {
    color: var(--text-muted);
    font-size: var(--text-3xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.payroll-facts dd[b-2pqfaw7vd0] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-sm);
    margin: var(--space-2xs) 0 0;
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.payroll-facts-why[b-2pqfaw7vd0] {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-variant-numeric: normal;
}

/* ── Drafts ────────────────────────────────────────────────────────────── */

.payroll-draft-list[b-2pqfaw7vd0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.payroll-draft-row[b-2pqfaw7vd0] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--glass-panel);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.payroll-draft-text[b-2pqfaw7vd0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.payroll-draft-headline[b-2pqfaw7vd0] {
    font-size: var(--text-sm);
    font-weight: 600;
}

.payroll-draft-detail[b-2pqfaw7vd0] {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

/* ── Worklist ──────────────────────────────────────────────────────────── */

.payroll-attention[b-2pqfaw7vd0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
}

.payroll-attention-badge[b-2pqfaw7vd0] {
    padding: 0 var(--space-sm);
    background: var(--warning-color-10);
    border: 1px solid var(--warning-color-30);
    border-radius: var(--radius-full);
    color: var(--warning-color);
    font-size: var(--text-xs);
    font-weight: 700;
}

.payroll-attention-list[b-2pqfaw7vd0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.payroll-attention-row[b-2pqfaw7vd0] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--glass-panel);
    border: 1px solid var(--border-color);
    border-left-width: 3px;
    border-radius: var(--radius-md);
}

.payroll-attention-row-warn[b-2pqfaw7vd0] {
    border-left-color: var(--warning-color);
}

.payroll-attention-row-bad[b-2pqfaw7vd0] {
    border-left-color: var(--error-color);
}

.payroll-attention-row-warn[b-2pqfaw7vd0]  .mud-icon-root {
    color: var(--warning-color);
}

.payroll-attention-row-bad[b-2pqfaw7vd0]  .mud-icon-root {
    color: var(--error-text);
}

.payroll-attention-text[b-2pqfaw7vd0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.payroll-attention-headline[b-2pqfaw7vd0] {
    font-size: var(--text-sm);
    font-weight: 600;
}

.payroll-attention-detail[b-2pqfaw7vd0] {
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

.payroll-attention-alt[b-2pqfaw7vd0] {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.payroll-attention-alt:hover[b-2pqfaw7vd0] {
    color: var(--accent-color);
}

.payroll-attention-alt:focus-visible[b-2pqfaw7vd0] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* ── Phone ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .payroll-overview[b-2pqfaw7vd0] {
        gap: var(--space-2xl);
    }

    .payroll-overview-title[b-2pqfaw7vd0] {
        font-size: var(--text-xl);
    }

    .payroll-overview-grid[b-2pqfaw7vd0] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-md);
    }

    .payroll-card[b-2pqfaw7vd0] {
        padding: var(--space-lg);
    }

    .payroll-attention-row[b-2pqfaw7vd0],
    .payroll-draft-row[b-2pqfaw7vd0] {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: var(--space-sm);
    }

    .payroll-attention-row .payroll-action[b-2pqfaw7vd0],
    .payroll-attention-alt[b-2pqfaw7vd0],
    .payroll-draft-row .payroll-action[b-2pqfaw7vd0] {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .payroll-card[b-2pqfaw7vd0],
    .payroll-action[b-2pqfaw7vd0] {
        transition: none;
    }
}
/* _content/Ayva.Finance.Payroll/Components/Admin/PayrollAdminConsole.razor.rz.scp.css */
/* PayrollAdminConsole — desktop-first (it is an operations console), but the
   tab strip still has to survive a phone: it wraps rather than becoming a
   horizontal scroller that hides the current tab. Tokens only. */

.payroll-admin[b-qn88sulzjs] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--text-primary);
    font-family: var(--font-primary);
}

/* ── Full-surface states ───────────────────────────────────────────────── */

.payroll-admin-centre[b-qn88sulzjs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    min-height: 40dvh;
    padding: var(--space-3xl) var(--space-xl);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    text-align: center;
}

.payroll-admin-fatal[b-qn88sulzjs] {
    color: var(--warning-color);
}

/* ── Tabs ──────────────────────────────────────────────────────────────── */

.payroll-admin-tabs[b-qn88sulzjs] {
    display: flex;
    align-items: stretch;
    gap: var(--space-xs);
    border-bottom: 1px solid var(--border-color);
}

.payroll-admin-tab[b-qn88sulzjs] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: var(--tap-target-min);
    padding: var(--space-md) var(--space-lg);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.payroll-admin-tab:hover[b-qn88sulzjs] {
    color: var(--text-secondary);
}

.payroll-admin-tab:focus-visible[b-qn88sulzjs] {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
}

.payroll-admin-tab-current[b-qn88sulzjs] {
    /* -light: the strip sits on the panel ground where the base accent only
       clears 4.16:1. The underline keeps the saturated accent. */
    color: var(--accent-color-light);
    border-bottom-color: var(--accent-color);
}

.payroll-admin-tab-current[b-qn88sulzjs]  .mud-icon-root {
    /* ::deep — MudIcon renders a child component with no scope attribute. */
    color: var(--accent-color-light);
}

/* ── Body ──────────────────────────────────────────────────────────────── */

.payroll-admin-body[b-qn88sulzjs] {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--space-2xl) 0 0;
}

.payroll-admin-denied[b-qn88sulzjs],
.payroll-admin-soon[b-qn88sulzjs] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-2xl);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* ── Phone ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .payroll-admin-tabs[b-qn88sulzjs] {
        flex-wrap: wrap;
        row-gap: 0;
    }

    .payroll-admin-tab[b-qn88sulzjs] {
        flex: 1 1 auto;
        justify-content: center;
        padding: var(--space-sm) var(--space-md);
    }

    .payroll-admin-body[b-qn88sulzjs] {
        padding-top: var(--space-lg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .payroll-admin-tab[b-qn88sulzjs] {
        transition: none;
    }
}
/* _content/Ayva.Finance.Payroll/Components/Admin/RunDetailDialog.razor.rz.scp.css */
/* RunDetailDialog — stacked cards inside .ayva-dialog. Tokens only; the
   global dialog skin owns the frame, this file owns what is inside it. */

.payroll-run-heading[b-t1sqftx8mp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
    font-family: var(--font-primary);
}

.payroll-run-heading-id[b-t1sqftx8mp] {
    font-size: var(--text-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.payroll-run-heading-kind[b-t1sqftx8mp] {
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

.payroll-run-detail[b-t1sqftx8mp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    min-width: 0;
    color: var(--text-primary);
    font-family: var(--font-primary);
}

.payroll-run-loading[b-t1sqftx8mp] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-2xl) 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* ── Cards ─────────────────────────────────────────────────────────────── */

.payroll-run-card[b-t1sqftx8mp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: flex-start;
    min-width: 0;
    padding: var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.payroll-run-card-bad[b-t1sqftx8mp] {
    border-color: var(--error-color-30);
}

.payroll-run-card-head[b-t1sqftx8mp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    width: 100%;
    min-width: 0;
}

.payroll-run-card-title[b-t1sqftx8mp] {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
}

.payroll-run-card-meta[b-t1sqftx8mp] {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.payroll-run-link[b-t1sqftx8mp] {
    color: var(--accent-color-light);
    font-size: var(--text-xs);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.payroll-run-link:hover[b-t1sqftx8mp] {
    color: var(--accent-color);
    text-decoration: underline;
}

.payroll-run-link:focus-visible[b-t1sqftx8mp] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* ── Facts ─────────────────────────────────────────────────────────────── */

.payroll-run-facts[b-t1sqftx8mp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-lg);
    width: 100%;
    margin: 0;
}

.payroll-run-facts dt[b-t1sqftx8mp] {
    color: var(--text-muted);
    font-size: var(--text-3xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.payroll-run-facts dd[b-t1sqftx8mp] {
    margin: var(--space-2xs) 0 0;
    font-size: var(--text-sm);
    font-variant-numeric: tabular-nums;
}

.payroll-run-fact-bad[b-t1sqftx8mp] {
    color: var(--error-text);
    font-weight: 700;
}

.payroll-run-sentence[b-t1sqftx8mp] {
    margin: 0;
    font-size: var(--text-sm);
}

.payroll-run-note[b-t1sqftx8mp] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

.payroll-run-note-bad[b-t1sqftx8mp] {
    color: var(--error-text);
}

/* ── Lists (blockers, contributors, preview, timeline) ─────────────────── */

.payroll-run-list[b-t1sqftx8mp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.payroll-run-list-row[b-t1sqftx8mp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
    padding: var(--space-md) var(--space-lg);
    background: var(--glass-panel);
    border: 1px solid var(--border-color);
    border-left-width: 3px;
    border-radius: var(--radius-md);
}

.payroll-run-list-row-bad[b-t1sqftx8mp] {
    border-left-color: var(--error-color);
}

.payroll-run-list-headline[b-t1sqftx8mp] {
    font-size: var(--text-sm);
    font-weight: 600;
}

.payroll-run-list-detail[b-t1sqftx8mp] {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

/* ── Flags ─────────────────────────────────────────────────────────────── */

.payroll-run-flags[b-t1sqftx8mp] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-top: var(--space-2xs);
}

.payroll-run-flag[b-t1sqftx8mp] {
    padding: 0 var(--space-sm);
    background: var(--warning-color-10);
    border: 1px solid var(--warning-color-30);
    border-radius: var(--radius-full);
    color: var(--warning-color);
    font-size: var(--text-3xs);
    font-weight: 700;
    white-space: nowrap;
}

.payroll-run-flag-bad[b-t1sqftx8mp] {
    background: var(--error-color-10);
    border-color: var(--error-color-30);
    color: var(--error-text);
}

/* ── Lines table ───────────────────────────────────────────────────────── */

.payroll-run-table[b-t1sqftx8mp] {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
}

.payroll-run-table[b-t1sqftx8mp]  .mud-table-root {
    /* ::deep — MudTable is a child component and carries no scope attribute. */
    background: transparent;
    font-family: var(--font-primary);
}

.payroll-run-table[b-t1sqftx8mp]  .mud-table-cell {
    border-color: var(--border-color);
    color: var(--text-primary);
    font-size: var(--text-xs);
    vertical-align: top;
}

.payroll-run-table[b-t1sqftx8mp]  .mud-table-head .mud-table-cell {
    color: var(--text-muted);
    font-size: var(--text-3xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.payroll-run-worker[b-t1sqftx8mp] {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
}

.payroll-run-sub[b-t1sqftx8mp] {
    display: block;
    color: var(--text-secondary);
    font-size: var(--text-2xs);
}

.payroll-run-line-actions[b-t1sqftx8mp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

.payroll-run-byhand[b-t1sqftx8mp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

.payroll-run-reference[b-t1sqftx8mp] {
    min-width: 12rem;
}

/* ── Note composer ─────────────────────────────────────────────────────── */

.payroll-run-note-composer[b-t1sqftx8mp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    min-width: 0;
}

.payroll-run-note-field[b-t1sqftx8mp] {
    flex: 1 1 16rem;
    min-width: 0;
}

/* ── Actions ───────────────────────────────────────────────────────────── */

.payroll-run-actions[b-t1sqftx8mp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm);
    width: 100%;
    min-width: 0;
}

.payroll-run-action[b-t1sqftx8mp] {
    min-height: var(--tap-target-min);
    padding: 0 var(--space-lg);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--accent-color-light);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), opacity var(--transition-fast);
}

.payroll-run-action:hover:not(:disabled)[b-t1sqftx8mp] {
    border-color: var(--accent-color);
    background: var(--bg-hover);
}

.payroll-run-action:focus-visible[b-t1sqftx8mp] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.payroll-run-action:disabled[b-t1sqftx8mp] {
    opacity: 0.5;
    cursor: not-allowed;
}

.payroll-run-action-primary[b-t1sqftx8mp] {
    background: var(--accent-color-10);
    border-color: var(--accent-color-30);
    font-weight: 700;
}

.payroll-run-action-bad[b-t1sqftx8mp] {
    color: var(--error-text);
    border-color: var(--error-color-30);
}

.payroll-run-action-bad:hover:not(:disabled)[b-t1sqftx8mp] {
    border-color: var(--error-color);
    background: var(--error-color-10);
}

/* ── Phone ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .payroll-run-card[b-t1sqftx8mp] {
        padding: var(--space-lg);
    }

    .payroll-run-facts[b-t1sqftx8mp] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-md);
    }

    .payroll-run-actions[b-t1sqftx8mp] {
        justify-content: stretch;
    }

    .payroll-run-actions .payroll-run-action[b-t1sqftx8mp] {
        flex: 1 1 100%;
    }

    .payroll-run-byhand[b-t1sqftx8mp],
    .payroll-run-note-composer[b-t1sqftx8mp] {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (prefers-reduced-motion: reduce) {
    .payroll-run-action[b-t1sqftx8mp],
    .payroll-run-link[b-t1sqftx8mp] {
        transition: none;
    }
}
/* _content/Ayva.Finance.Payroll/Components/Admin/RunsTab.razor.rz.scp.css */
/* RunsTab — chips over a table. Tokens only; the table hands itself to
   MudBlazor's own Md breakpoint, so this file styles the chrome around it and
   the cell contents inside it, never the grid. */

.payroll-runs[b-dijvuoupgw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    min-width: 0;
    color: var(--text-primary);
    font-family: var(--font-primary);
}

/* ── Head ──────────────────────────────────────────────────────────────── */

.payroll-runs-head[b-dijvuoupgw] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-xl);
    min-width: 0;
}

.payroll-runs-title[b-dijvuoupgw] {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.payroll-runs-kind-field[b-dijvuoupgw] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

.payroll-runs-kind-label[b-dijvuoupgw] {
    color: var(--text-muted);
    font-size: var(--text-3xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.payroll-runs-kind[b-dijvuoupgw] {
    min-height: var(--tap-target-min);
    padding: 0 var(--space-md);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.payroll-runs-kind:hover[b-dijvuoupgw] {
    border-color: var(--accent-color);
}

.payroll-runs-kind:focus-visible[b-dijvuoupgw] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* ── Chips ─────────────────────────────────────────────────────────────── */

.payroll-runs-chips[b-dijvuoupgw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

.payroll-runs-chip[b-dijvuoupgw] {
    min-height: var(--tap-target-min);
    padding: 0 var(--space-lg);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.payroll-runs-chip:hover[b-dijvuoupgw] {
    border-color: var(--accent-color);
    background: var(--bg-hover);
}

.payroll-runs-chip:focus-visible[b-dijvuoupgw] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.payroll-runs-chip-on[b-dijvuoupgw] {
    background: var(--accent-color-10);
    border-color: var(--accent-color-30);
    color: var(--accent-color-light);
}

/* ── States ────────────────────────────────────────────────────────────── */

.payroll-runs-loading[b-dijvuoupgw] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-3xl) 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.payroll-runs-error[b-dijvuoupgw] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--error-color-30);
    border-radius: var(--radius-lg);
    color: var(--error-text);
    font-size: var(--text-sm);
}

.payroll-runs-empty[b-dijvuoupgw] {
    margin: 0;
    padding: var(--space-2xl) 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* ── Table ─────────────────────────────────────────────────────────────── */

.payroll-runs-table[b-dijvuoupgw] {
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow-x: auto;
}

.payroll-runs-table[b-dijvuoupgw]  .mud-table-root {
    /* ::deep — MudTable is a child component and carries no scope attribute. */
    background: transparent;
    font-family: var(--font-primary);
}

.payroll-runs-table[b-dijvuoupgw]  .mud-table-cell {
    border-color: var(--border-color);
    color: var(--text-primary);
    font-size: var(--text-sm);
}

.payroll-runs-table[b-dijvuoupgw]  .mud-table-head .mud-table-cell {
    color: var(--text-muted);
    font-size: var(--text-3xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.payroll-runs-open[b-dijvuoupgw] {
    padding: 0;
    background: none;
    border: none;
    color: var(--accent-color-light);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.payroll-runs-open:hover[b-dijvuoupgw] {
    color: var(--accent-color);
    text-decoration: underline;
}

.payroll-runs-open:focus-visible[b-dijvuoupgw] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

.payroll-runs-kind-tag[b-dijvuoupgw] {
    display: block;
    color: var(--text-secondary);
    font-size: var(--text-2xs);
}

.payroll-runs-deadline[b-dijvuoupgw] {
    display: block;
    font-variant-numeric: tabular-nums;
}

.payroll-runs-deadline-why[b-dijvuoupgw],
.payroll-runs-debit[b-dijvuoupgw] {
    display: block;
    color: var(--text-secondary);
    font-size: var(--text-2xs);
}

.payroll-runs-total[b-dijvuoupgw] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ── Phone ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .payroll-runs[b-dijvuoupgw] {
        gap: var(--space-lg);
    }

    .payroll-runs-head[b-dijvuoupgw] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
    }

    .payroll-runs-title[b-dijvuoupgw] {
        font-size: var(--text-xl);
    }
}

@media (prefers-reduced-motion: reduce) {
    .payroll-runs-chip[b-dijvuoupgw],
    .payroll-runs-kind[b-dijvuoupgw],
    .payroll-runs-open[b-dijvuoupgw] {
        transition: none;
    }
}
/* _content/Ayva.Finance.Payroll/Components/Admin/SettingsTab.razor.rz.scp.css */
/* SettingsTab — a column of cards, one per group. Tokens only; the fields
   themselves are MudBlazor inputs, so this file styles the card chrome, the
   help text and the live-writes row, never the input internals. */

.payroll-settings[b-skvku1yvzn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    min-width: 0;
    color: var(--text-primary);
    font-family: var(--font-primary);
}

/* ── Head ──────────────────────────────────────────────────────────────── */

.payroll-settings-head[b-skvku1yvzn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.payroll-settings-title[b-skvku1yvzn] {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.payroll-settings-sub[b-skvku1yvzn] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* ── States ────────────────────────────────────────────────────────────── */

.payroll-settings-loading[b-skvku1yvzn] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-3xl) 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.payroll-settings-fatal[b-skvku1yvzn] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--error-color-30);
    border-radius: var(--radius-lg);
    color: var(--error-text);
    font-size: var(--text-sm);
}

/* ── Card ──────────────────────────────────────────────────────────────── */

.payroll-settings-card[b-skvku1yvzn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    min-width: 0;
    padding: var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.payroll-settings-card-title[b-skvku1yvzn] {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-3xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.payroll-settings-fields[b-skvku1yvzn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--space-xl);
    min-width: 0;
}

.payroll-settings-field[b-skvku1yvzn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.payroll-settings-help[b-skvku1yvzn] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-2xs);
    line-height: 1.5;
}

.payroll-settings-label[b-skvku1yvzn] {
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: 600;
}

/* ── Live writes ───────────────────────────────────────────────────────── */

/* The one row on this screen that is state plus a gesture, not a field. It
   spans the grid so the switch that arms every provider write is never a
   half-width control tucked beside a text box. */
.payroll-settings-live[b-skvku1yvzn] {
    grid-column: 1 / -1;
    padding: var(--space-lg);
    background: var(--warning-color-5);
    border: 1px solid var(--warning-color-20);
    border-radius: var(--radius-md);
}

.payroll-settings-live-row[b-skvku1yvzn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
}

.payroll-settings-chip[b-skvku1yvzn] {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.payroll-settings-chip-warn[b-skvku1yvzn] {
    background: var(--warning-color-10);
    border-color: var(--warning-color-30);
    color: var(--warning-text);
}

.payroll-settings-chip-off[b-skvku1yvzn] {
    background: var(--bg-hover);
}

/* ── Actions ───────────────────────────────────────────────────────────── */

.payroll-settings-actions[b-skvku1yvzn] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    min-width: 0;
}

.payroll-settings-button[b-skvku1yvzn] {
    min-height: var(--tap-target-min);
    padding: 0 var(--space-xl);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.payroll-settings-button:hover:not(:disabled)[b-skvku1yvzn] {
    border-color: var(--accent-color);
    background: var(--bg-hover);
}

.payroll-settings-button:focus-visible[b-skvku1yvzn] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.payroll-settings-button:disabled[b-skvku1yvzn] {
    cursor: not-allowed;
    opacity: 0.5;
}

.payroll-settings-button-primary[b-skvku1yvzn] {
    background: var(--accent-color-10);
    border-color: var(--accent-color-30);
    color: var(--accent-color-light);
}

.payroll-settings-button-danger[b-skvku1yvzn] {
    background: var(--warning-color-10);
    border-color: var(--warning-color-30);
    color: var(--warning-text);
}

.payroll-settings-card-error[b-skvku1yvzn] {
    margin: 0;
    padding: var(--space-md) var(--space-lg);
    background: var(--error-color-10);
    border: 1px solid var(--error-color-30);
    border-radius: var(--radius-md);
    color: var(--error-text);
    font-size: var(--text-xs);
}

/* ── Phone ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .payroll-settings[b-skvku1yvzn] {
        gap: var(--space-lg);
    }

    .payroll-settings-title[b-skvku1yvzn] {
        font-size: var(--text-xl);
    }

    .payroll-settings-fields[b-skvku1yvzn] {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .payroll-settings-card[b-skvku1yvzn] {
        padding: var(--space-lg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .payroll-settings-button[b-skvku1yvzn] {
        transition: none;
    }
}
/* _content/Ayva.Finance.Payroll/Components/Admin/WorkersTab.razor.rz.scp.css */
/* WorkersTab — a banner over a wide table. Tokens only; the table hands
   itself to MudBlazor's own Md breakpoint, so this file styles the chrome
   around it and the cell contents inside it, never the grid. */

.payroll-workers[b-3th2pwr89d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    min-width: 0;
    color: var(--text-primary);
    font-family: var(--font-primary);
}

/* ── Head ──────────────────────────────────────────────────────────────── */

.payroll-workers-head[b-3th2pwr89d] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-xl);
    min-width: 0;
}

.payroll-workers-heading[b-3th2pwr89d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 0;
}

.payroll-workers-title[b-3th2pwr89d] {
    margin: 0;
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.payroll-workers-sub[b-3th2pwr89d] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* ── Alignment banner ──────────────────────────────────────────────────── */

.payroll-workers-banner[b-3th2pwr89d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    min-width: 0;
    padding: var(--space-lg) var(--space-xl);
    background: var(--warning-color-10);
    border: 1px solid var(--warning-color-30);
    border-radius: var(--radius-lg);
    color: var(--warning-text);
    font-size: var(--text-sm);
}

.payroll-workers-banner-text[b-3th2pwr89d] {
    flex: 1 1 20rem;
    min-width: 0;
    line-height: 1.5;
}

/* ── States ────────────────────────────────────────────────────────────── */

.payroll-workers-loading[b-3th2pwr89d] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-3xl) 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.payroll-workers-error[b-3th2pwr89d] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--error-color-30);
    border-radius: var(--radius-lg);
    color: var(--error-text);
    font-size: var(--text-sm);
}

.payroll-workers-empty[b-3th2pwr89d] {
    margin: 0;
    padding: var(--space-2xl) 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* ── Table ─────────────────────────────────────────────────────────────── */

.payroll-workers-table[b-3th2pwr89d] {
    min-width: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow-x: auto;
}

/* ::deep — MudTable is a child component and carries no scope attribute. */
.payroll-workers-table[b-3th2pwr89d]  .mud-table-root {
    background: transparent;
    font-family: var(--font-primary);
}

.payroll-workers-table[b-3th2pwr89d]  .mud-table-cell {
    border-color: var(--border-color);
    color: var(--text-primary);
    font-size: var(--text-sm);
    vertical-align: top;
}

.payroll-workers-table[b-3th2pwr89d]  .mud-table-head .mud-table-cell {
    color: var(--text-muted);
    font-size: var(--text-3xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* The row the console was asked to open on. A tint and a rule, no scrolling. */
.payroll-workers-table[b-3th2pwr89d]  .payroll-workers-row-focused {
    background: var(--accent-color-10);
    box-shadow: inset var(--space-xs) 0 0 0 var(--accent-color);
}

/* ── Cells ─────────────────────────────────────────────────────────────── */

.payroll-workers-name[b-3th2pwr89d] {
    font-weight: 600;
}

.payroll-workers-external[b-3th2pwr89d] {
    display: block;
}

.payroll-workers-sub-line[b-3th2pwr89d],
.payroll-workers-tag[b-3th2pwr89d] {
    display: block;
    color: var(--text-secondary);
    font-size: var(--text-2xs);
}

.payroll-workers-chip[b-3th2pwr89d] {
    display: inline-flex;
    align-items: center;
    margin-right: var(--space-2xs);
    padding: 0 var(--space-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: var(--text-2xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.payroll-workers-chip-ok[b-3th2pwr89d] {
    background: var(--success-color-10);
    border-color: var(--success-color-30);
    color: var(--success-color-light);
}

.payroll-workers-chip-warn[b-3th2pwr89d] {
    background: var(--warning-color-10);
    border-color: var(--warning-color-30);
    color: var(--warning-text);
}

.payroll-workers-picker[b-3th2pwr89d] {
    min-width: 14rem;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.payroll-workers-actions[b-3th2pwr89d] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    min-width: 0;
}

.payroll-workers-button[b-3th2pwr89d] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: var(--tap-target-min);
    padding: 0 var(--space-lg);
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.payroll-workers-button:hover:not(:disabled)[b-3th2pwr89d] {
    border-color: var(--accent-color);
    background: var(--bg-hover);
}

.payroll-workers-button:focus-visible[b-3th2pwr89d],
.payroll-workers-link-button:focus-visible[b-3th2pwr89d] {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.payroll-workers-button:disabled[b-3th2pwr89d],
.payroll-workers-link-button:disabled[b-3th2pwr89d] {
    cursor: not-allowed;
    opacity: 0.5;
}

.payroll-workers-button-primary[b-3th2pwr89d] {
    background: var(--accent-color-10);
    border-color: var(--accent-color-30);
    color: var(--accent-color-light);
}

.payroll-workers-link-button[b-3th2pwr89d] {
    padding: 0;
    background: none;
    border: none;
    color: var(--accent-color-light);
    font-family: var(--font-primary);
    font-size: var(--text-2xs);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.payroll-workers-link-button:hover:not(:disabled)[b-3th2pwr89d] {
    color: var(--accent-color);
    text-decoration: underline;
}

/* ── Phone ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .payroll-workers[b-3th2pwr89d] {
        gap: var(--space-lg);
    }

    .payroll-workers-head[b-3th2pwr89d] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-md);
    }

    .payroll-workers-title[b-3th2pwr89d] {
        font-size: var(--text-xl);
    }

    .payroll-workers-banner[b-3th2pwr89d] {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .payroll-workers-button[b-3th2pwr89d],
    .payroll-workers-link-button[b-3th2pwr89d] {
        transition: none;
    }
}
/* _content/Ayva.Finance.Payroll/Components/Shared/RunStatusChip.razor.rz.scp.css */
/* RunStatusChip — one pill, five tones. Every colour is a token; the label
   carries the meaning, so the tone is reinforcement, not the signal. */

.run-chip[b-zr4is2uc5j] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-2xs) var(--space-sm);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    font-family: var(--font-primary);
    font-size: var(--text-3xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.run-chip-text[b-zr4is2uc5j] {
    display: inline-block;
}

.run-chip-neutral[b-zr4is2uc5j] {
    background: var(--bg-hover);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.run-chip-good[b-zr4is2uc5j] {
    background: var(--success-color-10);
    border-color: var(--success-color-30);
    color: var(--success-color);
}

.run-chip-info[b-zr4is2uc5j] {
    background: var(--info-color-10);
    border-color: var(--info-color-30);
    color: var(--info-color);
}

.run-chip-warn[b-zr4is2uc5j] {
    background: var(--warning-color-10);
    border-color: var(--warning-color-30);
    color: var(--warning-color);
}

.run-chip-bad[b-zr4is2uc5j] {
    /* --error-text, not --error-color: the -10 tint lifts the pill and the
       base red only clears 3.80:1 on it. The theme's red-for-text is the one
       that passes AA here (the same choice StatusChip documents). */
    background: var(--error-color-10);
    border-color: var(--error-color-30);
    color: var(--error-text);
}

/* Calculating / Submitting — a provider call in flight. Decorative, so it is
   aria-hidden and the label alone still says what is happening. */
.run-chip-pulse[b-zr4is2uc5j] {
    width: var(--space-sm);
    height: var(--space-sm);
    border-radius: var(--radius-full);
    background: var(--info-color);
    animation: run-chip-pulse-b-zr4is2uc5j 1.6s ease-in-out infinite;
}

@keyframes run-chip-pulse-b-zr4is2uc5j {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .run-chip-pulse[b-zr4is2uc5j] {
        animation: none;
    }
}
/* _content/Ayva.Finance.Payroll/Panels/PayrollAdminPanel.razor.rz.scp.css */
/* PayrollAdminPanel — the payroll console inside the /coms shell. Framing
   only; PayrollAdminConsole owns everything below the bar. */

.payroll-admin-panel[b-5sldgu1j5j] {
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--text-primary);
    font-family: var(--font-primary);
}

.payroll-admin-panel-bar[b-5sldgu1j5j] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: 0 0 var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.payroll-admin-panel-title[b-5sldgu1j5j] {
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Embedded: the console must not repeat the title the panel bar already
   shows, and its tab strip sits flush with the panel's own edges. ::deep
   reaches PayrollAdminConsole's scope, which this component never touches. */
.payroll-admin-panel[b-5sldgu1j5j]  .payroll-admin {
    min-height: 0;
}

@media (max-width: 640px) {
    .payroll-admin-panel-bar[b-5sldgu1j5j] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
}
/* _content/Ayva.Finance.Payroll/Widgets/PayrollQueueWidget.razor.rz.scp.css */
/* PayrollQueueWidget — the /coms dashboard tile.
   Tokens only; the stat-box layout mirrors the other dashboard widgets so a
   grid of tiles reads as one surface rather than as several. */

.widget-content[b-c50qma0y16] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    height: 100%;
    font-family: var(--font-primary);
}

/* ── Loading / error states ── */

.loading-state[b-c50qma0y16] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    flex: 1;
}

.error-state[b-c50qma0y16] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--error-color);
    font-size: var(--text-sm);
    padding: var(--space-sm);
}

.error-state .material-icons[b-c50qma0y16] {
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* ── Stats row ── */

.stats-row[b-c50qma0y16] {
    display: flex;
    gap: var(--space-sm);
}

.stat-box[b-c50qma0y16] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-sm) var(--space-xs);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
}

.stat-box:hover[b-c50qma0y16] {
    border-color: var(--accent-color);
}

/* A queue with something in it says so in colour — an operator scanning a
   dashboard should not have to read three zeroes to find the one that is
   not. */
.stat-box--attention[b-c50qma0y16] {
    border-color: color-mix(in srgb, var(--accent-color) 45%, transparent);
}

.stat-box--attention .stat-value[b-c50qma0y16] {
    color: var(--accent-color);
}

.stat-box--held[b-c50qma0y16] {
    border-color: color-mix(in srgb, var(--warning-color) 45%, transparent);
}

.stat-box--held .stat-value[b-c50qma0y16] {
    color: var(--warning-color);
}

.stat-value[b-c50qma0y16] {
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1;
}

.stat-label[b-c50qma0y16] {
    font-size: var(--text-2xs);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: var(--space-xs);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.stat-sub[b-c50qma0y16] {
    font-size: var(--text-2xs);
    color: var(--text-secondary);
    margin-top: var(--space-2xs);
    white-space: nowrap;
}

/* MudProgressCircular is a child component and carries no scope attribute. */
.loading-state[b-c50qma0y16]  .mud-progress-circular {
    color: var(--accent-color);
}

@media (max-width: 768px) {
    .stats-row[b-c50qma0y16] {
        flex-wrap: wrap;
    }

    .stat-box[b-c50qma0y16] {
        flex-basis: calc(50% - var(--space-sm));
    }

    .stat-label[b-c50qma0y16] {
        white-space: normal;
    }
}