/* ============================================================================
   Payroll port - the reference app's (jambo-payslip) design system, hand-ported.

   The reference is React + Tailwind v4 + shadcn/ui. We keep our own ERP sidebar and shell;
   only the payroll content is restyled to match the reference exactly. Everything here is
   scoped under a single wrapper class (.payroll-port) so it cannot leak into the rest of the
   ERP, and it forces the reference's LIGHT palette even when the surrounding app is in the
   dark glass theme (the reference ships a cream/green light design only).

   Colour values are the resolved sRGB of the reference's oklch tokens (captured from the live
   app); the deep green used on the PDF bands (#164e3a) is reproduced here as --pp-green-band so
   the on-screen headers and the printed documents share one green.
   ========================================================================== */

.payroll-port {
    /* ---- reference design tokens (resolved sRGB) ---- */
    --pp-background: #f9f6f1;
    --pp-foreground: #0d1f16;
    --pp-card: #fffdf8;
    --pp-card-foreground: #0d1f16;
    --pp-primary: #0c4f33;
    --pp-primary-foreground: #fbf8f1;
    --pp-secondary: #e6eadb;
    --pp-secondary-foreground: #0d1f16;
    --pp-muted: #efebe2;
    --pp-muted-foreground: #57685e;
    --pp-accent: #f5b75b;
    --pp-accent-foreground: #331b06;
    --pp-destructive: #cc2827;
    --pp-destructive-foreground: #fbf8f1;
    --pp-border: #d9d8cd;
    --pp-input: #d9d8cd;
    --pp-ring: #0c4f33;
    --pp-green-band: #164e3a;
    --pp-net-band: #ecf3ee;
    --pp-radius: 0.5rem;

    /* reference faces: Fraunces display, IBM Plex Sans body, IBM Plex Mono for figures */
    --pp-font-display: "Fraunces", Georgia, "Times New Roman", serif;
    --pp-font-body: "IBM Plex Sans", "Inter", "Segoe UI", sans-serif;
    --pp-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;

    /* ---- map our shared ERP tokens onto the reference palette so inherited components
       (erp-card, forms, rails that read --erp-*) take the look without touching the rest of
       the app; the values below are local to this subtree only ---- */
    --erp-primary: var(--pp-primary);
    --erp-primary-dark: #0a3f2a;
    --erp-accent: var(--pp-accent);
    --erp-ink: var(--pp-foreground);
    --erp-ink-muted: var(--pp-muted-foreground);
    --erp-muted: var(--pp-muted-foreground);
    --erp-surface: var(--pp-card);
    --erp-bg: var(--pp-background);
    --erp-border: var(--pp-border);
    --erp-card: var(--pp-card);
    --erp-elevated: var(--pp-card);
    --erp-radius: var(--pp-radius);
    --erp-radius-card: 0.75rem;
    --erp-shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --erp-mono: var(--pp-font-mono);

    min-height: 100%;
    box-sizing: border-box;
    padding: 1.5rem;
    background: var(--pp-background);
    color: var(--pp-foreground);
    font-family: var(--pp-font-body);
    -webkit-font-smoothing: antialiased;
}

.payroll-port *,
.payroll-port *::before,
.payroll-port *::after {
    box-sizing: border-box;
}

/* ------------------------------------------------------------------ cards */
.payroll-port .pp-card {
    background: var(--pp-card);
    color: var(--pp-card-foreground);
    border: 1px solid var(--pp-border);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.payroll-port .pp-card + .pp-card {
    margin-top: 1rem;
}

.payroll-port .pp-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--pp-border);
}

.payroll-port .pp-card-title {
    font-family: var(--pp-font-display);
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: var(--pp-foreground);
}

.payroll-port .pp-card-sub {
    color: var(--pp-muted-foreground);
    font-size: 0.85rem;
}

.payroll-port .pp-card-body {
    padding: 1.25rem;
}

/* ------------------------------------------------------------- page header */
/* The reference's PageHeader: a display-face title (Fraunces) over a muted one-line
   description, actions right-aligned. Where the reference shows the "Mshahara" wordmark,
   the company name is rendered instead. */
.payroll-port .pp-pagehead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.payroll-port .pp-pagehead h1 {
    font-family: var(--pp-font-display);
    font-weight: 600;
    font-size: 1.75rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--pp-foreground);
}

.payroll-port .pp-pagehead p {
    margin: 0.35rem 0 0;
    color: var(--pp-muted-foreground);
    font-size: 0.95rem;
}

.payroll-port .pp-pagehead-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------------ stats */
.payroll-port .pp-statgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.payroll-port .pp-stat {
    background: var(--pp-card);
    border: 1px solid var(--pp-border);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.payroll-port .pp-stat-label {
    color: var(--pp-muted-foreground);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 500;
}

.payroll-port .pp-stat-value {
    font-family: var(--pp-font-display);
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--pp-foreground);
}

.payroll-port .pp-stat-caption {
    color: var(--pp-muted-foreground);
    font-size: 0.8rem;
}

/* --------------------------------------------------------------- typography */
.payroll-port .pp-display {
    font-family: var(--pp-font-display);
    letter-spacing: -0.015em;
}

/* tabular figures, the reference's .font-figures - every money cell lines up */
.payroll-port .pp-figures,
.payroll-port .font-figures {
    font-family: var(--pp-font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

.payroll-port .pp-muted {
    color: var(--pp-muted-foreground);
}

.payroll-port .pp-strong {
    font-weight: 600;
    color: var(--pp-foreground);
}

.payroll-port .pp-hint {
    font-size: .72rem;
    color: var(--pp-muted-foreground);
    margin-top: .25rem;
}

/* A full-width section label inside a pp-grid (e.g. "Bank"), spanning the row of fields. */
.payroll-port .pp-grid-divider {
    grid-column: 1 / -1;
    font-family: var(--pp-font-display);
    font-weight: 600;
    font-size: .95rem;
    color: var(--pp-primary);
    border-top: 1px solid var(--pp-border);
    padding-top: .85rem;
    margin-top: .35rem;
}

/* An inline notice band (finalized-run lock, etc.), reference-flavoured: soft green panel, no icon dependency. */
.payroll-port .pp-alert {
    background: var(--pp-secondary);
    border: 1px solid var(--pp-border);
    border-left: 3px solid var(--pp-primary);
    border-radius: var(--pp-radius);
    padding: .8rem 1rem;
    margin: 1rem 0;
    font-size: .85rem;
    color: var(--pp-foreground);
}

/* A numeric cell inside the run grid that reads as text until it is hovered or focused for editing. */
.payroll-port .pp-cell-input {
    width: 120px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: .25rem .4rem;
    background: transparent;
    color: var(--pp-foreground);
    font-size: .85rem;
}

.payroll-port .pp-cell-input:not(:disabled):hover,
.payroll-port .pp-cell-input:focus {
    border-color: var(--pp-border);
    background: var(--pp-card);
    outline: none;
}

.payroll-port .pp-cell-input:disabled {
    color: var(--pp-muted-foreground);
    cursor: default;
}

/* A clickable table row (the P9 picker drills a card in on selection); the chosen row keeps a green plate. */
.payroll-port .pp-table tr.pp-selectable:hover td {
    background: var(--pp-muted);
}

.payroll-port .pp-table tr.pp-selected td {
    background: var(--pp-net-band);
}

/* ---------------------------------------------------------------- ledger-bg
   The reference's ruled "ledger" plate behind summary panels: a faint green rule every
   line, echoing a payslip ledger. */
.payroll-port .pp-ledger {
    background-color: var(--pp-card);
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 31px,
        rgba(12, 79, 51, 0.08) 31px,
        rgba(12, 79, 51, 0.08) 32px
    );
}

/* ----------------------------------------------------------------- buttons */
.payroll-port .pp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.25rem;
    padding: 0 1rem;
    border-radius: var(--pp-radius);
    font-family: var(--pp-font-body);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
}

.payroll-port .pp-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.payroll-port .pp-btn-primary {
    background: var(--pp-primary);
    color: var(--pp-primary-foreground);
}

.payroll-port .pp-btn-primary:hover:not(:disabled) {
    background: #0a4128;
}

.payroll-port .pp-btn-secondary {
    background: var(--pp-secondary);
    color: var(--pp-secondary-foreground);
}

.payroll-port .pp-btn-secondary:hover:not(:disabled) {
    background: #dbe1cb;
}

.payroll-port .pp-btn-outline {
    background: transparent;
    color: var(--pp-foreground);
    border-color: var(--pp-border);
}

.payroll-port .pp-btn-outline:hover:not(:disabled) {
    background: var(--pp-muted);
}

.payroll-port .pp-btn-ghost {
    background: transparent;
    color: var(--pp-foreground);
}

.payroll-port .pp-btn-ghost:hover:not(:disabled) {
    background: var(--pp-muted);
}

.payroll-port .pp-btn-destructive {
    background: var(--pp-destructive);
    color: var(--pp-destructive-foreground);
}

.payroll-port .pp-btn-destructive:hover:not(:disabled) {
    background: #b62323;
}

.payroll-port .pp-btn-sm {
    height: 1.85rem;
    padding: 0 0.75rem;
    font-size: 0.8rem;
}

/* ------------------------------------------------------------------ badges */
.payroll-port .pp-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    white-space: nowrap;
}

.payroll-port .pp-badge-draft {
    background: var(--pp-muted);
    color: var(--pp-muted-foreground);
    border-color: var(--pp-border);
}

.payroll-port .pp-badge-finalized {
    background: rgba(12, 79, 51, 0.12);
    color: var(--pp-primary);
    border-color: rgba(12, 79, 51, 0.25);
}

.payroll-port .pp-badge-paid {
    background: rgba(22, 101, 52, 0.14);
    color: #166534;
    border-color: rgba(22, 101, 52, 0.28);
}

.payroll-port .pp-badge-warning {
    background: rgba(245, 183, 91, 0.22);
    color: var(--pp-accent-foreground);
    border-color: rgba(245, 183, 91, 0.5);
}

.payroll-port .pp-badge-destructive {
    background: rgba(204, 40, 39, 0.12);
    color: var(--pp-destructive);
    border-color: rgba(204, 40, 39, 0.28);
}

/* ------------------------------------------------------------------ tables */
.payroll-port .pp-tablewrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--pp-border);
    border-radius: 0.75rem;
    background: var(--pp-card);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.payroll-port table.pp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    caption-side: bottom;
}

.payroll-port table.pp-table thead th {
    background: var(--pp-green-band);
    color: #fff;
    font-weight: 600;
    text-align: left;
    padding: 0.6rem 0.85rem;
    white-space: nowrap;
    border-bottom: 1px solid var(--pp-green-band);
}

.payroll-port table.pp-table th.pp-num,
.payroll-port table.pp-table td.pp-num {
    text-align: right;
}

.payroll-port table.pp-table tbody td {
    padding: 0.6rem 0.85rem;
    border-bottom: 1px solid var(--pp-border);
    color: var(--pp-card-foreground);
    vertical-align: middle;
}

.payroll-port table.pp-table tbody tr:last-child td {
    border-bottom: none;
}

.payroll-port table.pp-table tbody tr:hover {
    background: var(--pp-muted);
}

.payroll-port table.pp-table tr.pp-total td {
    font-weight: 700;
    color: var(--pp-primary);
    background: rgba(12, 79, 51, 0.06);
    border-top: 2px solid var(--pp-green-band);
}

/* ------------------------------------------------------------- inputs/labels */
.payroll-port .pp-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.payroll-port .pp-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--pp-foreground);
}

.payroll-port .pp-input,
.payroll-port .pp-select {
    height: 2.25rem;
    width: 100%;
    padding: 0 0.75rem;
    border: 1px solid var(--pp-input);
    border-radius: var(--pp-radius);
    background: var(--pp-card);
    color: var(--pp-foreground);
    font-family: var(--pp-font-body);
    font-size: 0.875rem;
}

.payroll-port .pp-input:focus,
.payroll-port .pp-select:focus {
    outline: none;
    border-color: var(--pp-ring);
    box-shadow: 0 0 0 2px rgba(12, 79, 51, 0.25);
}

.payroll-port .pp-grid {
    display: grid;
    gap: 1rem;
}

.payroll-port .pp-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.payroll-port .pp-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.payroll-port .pp-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 720px) {
    .payroll-port .pp-grid-2,
    .payroll-port .pp-grid-3,
    .payroll-port .pp-grid-4 {
        grid-template-columns: 1fr;
    }
}

.payroll-port .pp-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.payroll-port .pp-spacer {
    flex: 1 1 auto;
}

.payroll-port .pp-section + .pp-section {
    margin-top: 1rem;
}

.payroll-port .pp-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--pp-muted-foreground);
}

/* ============================================================================
   MudBlazor overrides, scoped to the payroll subtree.
   Screens built from Mud components still read the reference palette without a
   full markup rewrite; the hand-rolled .pp-* classes above are for the screens that
   emit reference-shaped HTML directly.
   ========================================================================== */
.payroll-port .mud-paper,
.payroll-port .erp-card {
    background-color: var(--pp-card) !important;
    color: var(--pp-card-foreground);
    border: 1px solid var(--pp-border);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
}

.payroll-port .mud-table {
    background-color: transparent;
    color: var(--pp-card-foreground);
}

.payroll-port .mud-table thead th,
.payroll-port .mud-table .mud-table-head th {
    background-color: var(--pp-green-band);
    color: #fff;
    font-weight: 600;
}

.payroll-port .mud-table tbody tr:hover {
    background-color: var(--pp-muted);
}

.payroll-port .mud-button-filled-primary,
.payroll-port .mud-button-filled {
    background-color: var(--pp-primary) !important;
    color: var(--pp-primary-foreground) !important;
}

.payroll-port .mud-button-outlined-primary {
    border-color: var(--pp-border);
    color: var(--pp-foreground);
}

.payroll-port .mud-chip {
    background-color: var(--pp-muted);
    color: var(--pp-muted-foreground);
}

.payroll-port .mud-text-field .mud-input,
.payroll-port .mud-input {
    font-family: var(--pp-font-body);
}

.payroll-port a {
    color: var(--pp-primary);
}