/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-eog6t8v1x5] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-eog6t8v1x5] {
    flex: 1;
    /* Allow main to shrink below its content's intrinsic width so a wide table
       scrolls inside its own overflow-x wrapper instead of forcing the flex row
       wider and stealing width from the sidebar. */
    min-width: 0;
}

/* Keep page content off the bottom edge so a fully expanded section
   (e.g. the JobDetail expenses table) doesn't run into the viewport. */
.content[b-eog6t8v1x5] {
    padding-bottom: var(--yp-space-3xl);
}

/* The sidebar is desktop-only; phones navigate from the fixed tab bar. */
.sidebar[b-eog6t8v1x5] {
    display: none;
    background-color: var(--yp-canvas);
    border-right: 1px solid var(--yp-border);
}

.top-row[b-eog6t8v1x5] {
    background-color: var(--yp-surface);
    border-bottom: 1px solid var(--yp-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--yp-space-sm);
    height: 3.5rem;
    position: sticky;
    top: 0;
    z-index: var(--yp-z-sticky);
}

/* Mobile wordmark. Hidden once the sidebar appears and carries its own. */
.app-brand[b-eog6t8v1x5] {
    min-width: 0;
    font-family: var(--yp-font-sans);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--yp-ink-strong);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "Pad" sits on the highlighter — charcoal text on yellow (both themes) */
.brand-mark[b-eog6t8v1x5] {
    background-color: var(--yp-yellow);
    color: var(--yp-on-accent);
    border-radius: var(--yp-radius-sm);
    padding: 0 5px;
    margin-left: 1px;
}

@media (max-width: 640.98px) {
    /* Clear the fixed tab bar (58px + the device's gesture inset). */
    .content[b-eog6t8v1x5] {
        padding-bottom: calc(58px + env(safe-area-inset-bottom) + var(--yp-space-2xl));
    }
}

@media (min-width: 641px) {
    .page[b-eog6t8v1x5] {
        flex-direction: row;
    }

    .sidebar[b-eog6t8v1x5] {
        display: block;
        width: 250px;
        /* Never let the flex algorithm squeeze the rail below its fixed width
           when a wide page (e.g. a populated invoices table) won't shrink. */
        flex-shrink: 0;
        height: 100vh;
        position: sticky;
        top: 0;
        transition: width var(--yp-dur-base) var(--yp-ease);
    }

    /* Collapsed to an icon rail (desktop only). */
    .page.sidebar-collapsed .sidebar[b-eog6t8v1x5] {
        width: 68px;
    }

    .app-brand[b-eog6t8v1x5] {
        display: none;
    }

    .top-row[b-eog6t8v1x5] {
        justify-content: flex-end;
        /* Below the sidebar's account popover and its outside-click backdrop,
           which both need to sit above this row while the menu is open. */
        z-index: 1;
    }

    .top-row[b-eog6t8v1x5], article[b-eog6t8v1x5] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar[b-eog6t8v1x5] {
        transition: none;
    }
}
/* /Layout/MobileNav.razor.rz.scp.css */
/* ============================================================
   Mobile tab bar — the phone's primary navigation.
   Fixed to the bottom edge so the four highest-frequency
   destinations sit in the thumb zone: one tap, no drawer. The
   highlighter marks where you are as a yellow pill behind the
   icon, keeping yellow scarce (one pill in ~58px of chrome)
   while carrying a charcoal glyph, per The Highlighter Rule.
   Hidden at 641px+, where the sidebar takes over.
   ============================================================ */
.yp-tabbar[b-nde3euglg5] {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--yp-z-sticky);
    display: flex;
    align-items: stretch;
    background-color: var(--yp-surface);
    border-top: 1px solid var(--yp-border);
    /* Clear the home indicator / gesture bar on iOS and Android. */
    padding-bottom: env(safe-area-inset-bottom);
}

.yp-tab[b-nde3euglg5] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 58px;
    padding: 7px 2px 8px;
    background: none;
    border: none;
    border-radius: 0;
    color: var(--yp-ink-soft);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--yp-dur-fast) var(--yp-ease);
}

/* The highlighter pill. Sized as its own target zone so the glyph
   has room to breathe and the active state reads at a glance. */
.yp-tab-mark[b-nde3euglg5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 28px;
    border-radius: var(--yp-radius-full);
    transition: background-color var(--yp-dur-fast) var(--yp-ease),
                transform var(--yp-dur-fast) var(--yp-ease);
}

.yp-tab-mark .bi[b-nde3euglg5] {
    display: block;
    width: auto;
    margin: 0;
    font-size: 1.1875rem;
    line-height: 1;
    color: var(--yp-slate);
    transition: color var(--yp-dur-fast) var(--yp-ease);
}

.yp-tab-label[b-nde3euglg5] {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Active — charcoal glyph on the highlighter, ink label below it. */
.yp-tab.is-current[b-nde3euglg5] { color: var(--yp-ink-strong); }
.yp-tab.is-current .yp-tab-mark[b-nde3euglg5] { background-color: var(--yp-yellow); }
.yp-tab.is-current .yp-tab-mark .bi[b-nde3euglg5] { color: var(--yp-on-accent); }

@media (hover: hover) {
    .yp-tab:hover[b-nde3euglg5] { color: var(--yp-ink); }
    .yp-tab:hover .yp-tab-mark[b-nde3euglg5] { background-color: var(--yp-slate-soft); }
    .yp-tab.is-current:hover .yp-tab-mark[b-nde3euglg5] { background-color: var(--yp-yellow-deep); }
}

/* Press feedback: the pill takes the tap, so a thumb sees the hit it
   made even when the destination takes a moment to paint. */
.yp-tab:active .yp-tab-mark[b-nde3euglg5] { transform: scale(0.9); }

/* An outward ring would be clipped by the fixed bar's bottom edge,
   so the keyboard ring is inset. Ink, never yellow. */
.yp-tab:focus-visible[b-nde3euglg5] {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--yp-ink);
}

@media (min-width: 641px) {
    .yp-tabbar[b-nde3euglg5] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .yp-tab:active .yp-tab-mark[b-nde3euglg5] { transform: none; }
}
/* /Layout/NavMenu.razor.rz.scp.css */
/* Brand row */
.top-row[b-e52je8kalb] {
    min-height: 3.5rem;
    background-color: var(--yp-surface);
    border-bottom: 1px solid var(--yp-border);
}

/* Keep the wordmark and toggle on one line. Bootstrap's navbar container is
   flex-wrap:wrap, which drops the toggle to a second row when the rem-scaled
   wordmark outgrows the fixed-width sidebar (e.g. a large browser font). */
.top-row .container-fluid[b-e52je8kalb] {
    flex-wrap: nowrap;
    min-width: 0;
}

.navbar-brand[b-e52je8kalb] {
    font-family: var(--yp-font-sans);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--yp-ink-strong);
    padding: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Pad" sits on the highlighter — charcoal text on yellow (both themes) */
.brand-mark[b-e52je8kalb] {
    background-color: var(--yp-yellow);
    color: var(--yp-on-accent);
    border-radius: var(--yp-radius-sm);
    padding: 0 5px;
    margin-left: 1px;
}

/* Expand / collapse the rail. */
.yp-rail-toggle[b-e52je8kalb] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background-color: transparent;
    border: none;
    border-radius: var(--yp-radius-sm);
    color: var(--yp-slate);
    cursor: pointer;
    transition: background-color var(--yp-dur-fast) var(--yp-ease), color var(--yp-dur-fast) var(--yp-ease);
}
.yp-rail-toggle:hover[b-e52je8kalb] { background-color: var(--yp-slate-soft); color: var(--yp-ink); }
.yp-rail-toggle:focus-visible[b-e52je8kalb] { outline: none; box-shadow: var(--yp-focus-ring); }
.yp-rail-toggle .bi[b-e52je8kalb] { margin-right: 0; width: auto; font-size: 1.15rem; }

/* Icons inside links inherit color from the link (slate at rest, ink when active) */
.bi[b-e52je8kalb] {
    display: inline-block;
    width: 1.25rem;
    margin-right: 0.65rem;
    text-align: center;
    color: var(--yp-slate);
}

.nav-item[b-e52je8kalb] {
    font-size: 0.9rem;
    padding-bottom: 0.25rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.nav-item:first-of-type[b-e52je8kalb] { padding-top: 1rem; }
.nav-item:last-of-type[b-e52je8kalb] { padding-bottom: 1rem; }

.nav-item[b-e52je8kalb]  a {
    color: var(--yp-ink);
    font-weight: 600;
    font-size: 1.0625rem;
    border-radius: var(--yp-radius-md);
    min-height: 44px;
    display: flex;
    align-items: center;
    line-height: 1.2;
    padding: 0 0.75rem;
    transition: background-color var(--yp-dur-fast) var(--yp-ease), color var(--yp-dur-fast) var(--yp-ease);
}

/* Inactive hover — quiet slate wash */
.nav-item[b-e52je8kalb]  a:hover {
    background-color: var(--yp-slate-soft);
    color: var(--yp-ink-strong);
}

/* Active — the highlighter marks where you are (dark text on yellow, both themes) */
.nav-item[b-e52je8kalb]  a.active {
    background-color: var(--yp-yellow);
    color: var(--yp-on-accent);
}
.nav-item[b-e52je8kalb]  a.active .bi { color: var(--yp-on-accent); }

/* The scroll container is a flex column: nav links take the slack and
   scroll, the account control pins to the bottom above a hairline. */
.nav-scrollable[b-e52je8kalb] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 3.5rem);
}

.nav-scrollable > nav[b-e52je8kalb] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* ---- Icon rail (collapsed) ---- */

/* Brand row shows only the toggle, centered. */
.top-row.rail[b-e52je8kalb] { padding-left: 0 !important; }
.top-row.rail .navbar-brand[b-e52je8kalb] { display: none; }
.top-row.rail .container-fluid[b-e52je8kalb] { justify-content: center; padding-left: 0; padding-right: 0; }

/* Nav links become centered 44px icon targets; labels hide. */
.nav-scrollable.rail .nav[b-e52je8kalb] { align-items: center; }
.nav-scrollable.rail .nav-item[b-e52je8kalb] {
    padding-left: 0;
    padding-right: 0;
    display: flex;
    justify-content: center;
}
.nav-scrollable.rail .nav-item[b-e52je8kalb]  a {
    width: 44px;
    padding: 0;
    justify-content: center;
}
.nav-scrollable.rail .nav-item[b-e52je8kalb]  a .bi { margin-right: 0; }
.nav-scrollable.rail .nav-label[b-e52je8kalb] { display: none; }

/* Account collapses to the avatar; its popover escapes to the right. */
.nav-scrollable.rail .yp-account[b-e52je8kalb] { padding: var(--yp-space-sm) 0; }
.nav-scrollable.rail .yp-account-trigger[b-e52je8kalb] { justify-content: center; padding: 6px 0; }
.nav-scrollable.rail .yp-account-name[b-e52je8kalb],
.nav-scrollable.rail .yp-account-chevron[b-e52je8kalb] { display: none; }
.nav-scrollable.rail .yp-account-pop[b-e52je8kalb] {
    left: calc(100% - 6px);
    right: auto;
    bottom: var(--yp-space-sm);
    width: 220px;
}

/* ---- Account control — bottom-of-sidebar identity + menu ----
   Avatar + name trigger that opens an upward popover (Settings for
   admins, Log out). Matches the overlay vocabulary of the clock chip:
   1px border, overlay shadow, dropdown z-index. */
.yp-account[b-e52je8kalb] {
    position: relative;
    flex: 0 0 auto;
    border-top: 1px solid var(--yp-border);
    padding: var(--yp-space-sm);
}

/* Lift the whole control above the outside-click backdrop while open. */
.yp-account.open[b-e52je8kalb] {
    z-index: var(--yp-z-sticky);
}

.yp-account-trigger[b-e52je8kalb] {
    display: flex;
    align-items: center;
    gap: var(--yp-space-sm);
    width: 100%;
    min-height: 48px;
    padding: 6px 8px;
    background: transparent;
    border: none;
    border-radius: var(--yp-radius-md);
    cursor: pointer;
    text-align: left;
    color: var(--yp-ink);
    transition: background-color var(--yp-dur-fast) var(--yp-ease);
}
.yp-account-trigger:hover[b-e52je8kalb] { background: var(--yp-slate-soft); }
.yp-account-trigger:focus-visible[b-e52je8kalb] { outline: none; box-shadow: var(--yp-focus-ring); }

.yp-account-avatar[b-e52je8kalb] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--yp-radius-full);
    background: var(--yp-slate-deep);
    color: #fff;
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
}

.yp-account-name[b-e52je8kalb] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--yp-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.yp-account-chevron[b-e52je8kalb] {
    flex: 0 0 auto;
    width: auto;
    margin-right: 0;
    color: var(--yp-slate);
    font-size: 0.8125rem;
    transition: transform var(--yp-dur-base) var(--yp-ease);
}
.yp-account.open .yp-account-chevron[b-e52je8kalb] { transform: rotate(180deg); }

/* Transparent full-viewport catcher for outside clicks. */
.yp-account-backdrop[b-e52je8kalb] {
    position: fixed;
    inset: 0;
    z-index: var(--yp-z-dropdown);
    background: transparent;
    border: none;
    padding: 0;
    cursor: default;
}

.yp-account-pop[b-e52je8kalb] {
    position: absolute;
    left: var(--yp-space-sm);
    right: var(--yp-space-sm);
    bottom: calc(100% - 4px);
    background: var(--yp-surface);
    border: 1px solid var(--yp-border);
    border-radius: var(--yp-radius-md);
    box-shadow: var(--yp-shadow-overlay);
    padding: var(--yp-space-xs);
    z-index: var(--yp-z-sticky);
    animation: yp-account-rise-b-e52je8kalb var(--yp-dur-base) var(--yp-ease);
}

@keyframes yp-account-rise-b-e52je8kalb {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Quick theme switch — a compact segmented control at the top of the account
   popover so anyone (field crew included) can flip light/dark in one tap
   without leaving the page. Selecting applies instantly; the menu stays open. */
.yp-account-theme[b-e52je8kalb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--yp-space-sm);
    padding: 6px 10px 8px;
}
.yp-account-theme-label[b-e52je8kalb] {
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    color: var(--yp-ink-soft);
}
.yp-account-theme-seg[b-e52je8kalb] {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: var(--yp-slate-soft);
    border-radius: var(--yp-radius-md);
}
.yp-account-theme-btn[b-e52je8kalb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: var(--yp-radius-sm);
    color: var(--yp-ink-soft);
    cursor: pointer;
    transition: background-color var(--yp-dur-fast) var(--yp-ease),
                color var(--yp-dur-fast) var(--yp-ease);
}
.yp-account-theme-btn .bi[b-e52je8kalb] { width: auto; margin: 0; font-size: 0.95rem; color: inherit; }
.yp-account-theme-btn:hover[b-e52je8kalb] { color: var(--yp-ink); }
.yp-account-theme-btn:focus-visible[b-e52je8kalb] { outline: none; box-shadow: var(--yp-focus-ring); }
.yp-account-theme-btn.is-active[b-e52je8kalb] {
    background: var(--yp-surface);
    color: var(--yp-ink);
    box-shadow: var(--yp-shadow-hover);
}

.yp-account-sep[b-e52je8kalb] {
    height: 1px;
    margin: 2px 6px;
    background: var(--yp-border);
}

.yp-account-item[b-e52je8kalb] {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 42px;
    padding: 0 10px;
    background: transparent;
    border: none;
    border-radius: var(--yp-radius-sm);
    cursor: pointer;
    text-align: left;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--yp-ink);
    text-decoration: none;
    transition: background-color var(--yp-dur-fast) var(--yp-ease);
}
.yp-account-item:hover[b-e52je8kalb] { background: var(--yp-slate-soft); color: var(--yp-ink-strong); }
.yp-account-item:focus-visible[b-e52je8kalb] { outline: none; box-shadow: var(--yp-focus-ring); }
.yp-account-item .bi[b-e52je8kalb] { color: var(--yp-slate); }

.yp-account-item-danger[b-e52je8kalb] { color: var(--yp-danger); }
.yp-account-item-danger:hover[b-e52je8kalb] { background: var(--yp-danger-soft); color: var(--yp-danger); }
.yp-account-item-danger .bi[b-e52je8kalb] { color: var(--yp-danger); }

@media (prefers-reduced-motion: reduce) {
    .yp-account-pop[b-e52je8kalb] { animation: none; }
    .yp-account-chevron[b-e52je8kalb] { transition: none; }
}
/* /Pages/EmployeeHome.razor.rz.scp.css */
/* ============================================================
   Employee home — a logging-first surface: clock state, week
   hours, the two log actions, and active jobs for reference.
   ============================================================ */
.emp[b-bqvfqv8f34] {
    max-width: 860px;
}

.emp-head[b-bqvfqv8f34] {
    margin-bottom: var(--yp-space-xl);
}
.emp-sub[b-bqvfqv8f34] {
    color: var(--yp-ink-soft);
    margin: 0.25rem 0 0;
    font-size: 1.0625rem;
}

/* ---- Clock / week cards ---- */
.emp-grid[b-bqvfqv8f34] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--yp-space-md);
    margin-bottom: var(--yp-space-lg);
}
.emp-card[b-bqvfqv8f34] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--yp-space-lg);
    background: var(--yp-surface);
    border: 1px solid var(--yp-border);
    border-radius: var(--yp-radius-lg);
}
.emp-card-label[b-bqvfqv8f34] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--yp-ink-soft);
    margin: 0;
}
.emp-card-value[b-bqvfqv8f34] {
    display: flex;
    align-items: center;
    gap: var(--yp-space-sm);
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--yp-ink-strong);
    margin: 0;
}
.emp-card-note[b-bqvfqv8f34] {
    font-size: 0.8125rem;
    color: var(--yp-ink-soft);
    margin: 0;
}
.emp-card-note a[b-bqvfqv8f34] { color: inherit; }
.emp-card-link[b-bqvfqv8f34] {
    margin-top: var(--yp-space-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--yp-ink-soft);
    text-decoration: none;
}
.emp-card-link:hover[b-bqvfqv8f34] { color: var(--yp-ink-strong); }
.emp-clock-dot[b-bqvfqv8f34] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--yp-success);
    flex: none;
}

/* ---- The two primary actions ---- */
.emp-actions[b-bqvfqv8f34] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--yp-space-md);
    margin-bottom: var(--yp-space-lg);
}
.emp-action[b-bqvfqv8f34] {
    display: flex;
    align-items: center;
    gap: var(--yp-space-md);
    padding: var(--yp-space-lg);
    background: var(--yp-surface);
    border: 1px solid var(--yp-border);
    border-radius: var(--yp-radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--yp-dur-fast) var(--yp-ease),
                box-shadow var(--yp-dur-fast) var(--yp-ease),
                transform var(--yp-dur-fast) var(--yp-ease);
}
.emp-action:hover[b-bqvfqv8f34] {
    border-color: var(--yp-slate);
    box-shadow: var(--yp-shadow-hover);
    transform: translateY(-1px);
}
.emp-action-icon[b-bqvfqv8f34] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--yp-radius-md);
    background: var(--yp-yellow-soft);
    color: var(--yp-ink-strong);
    font-size: 1.125rem;
}
.emp-action-main[b-bqvfqv8f34] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}
.emp-action-title[b-bqvfqv8f34] {
    font-weight: 600;
    color: var(--yp-ink);
}
.emp-action:hover .emp-action-title[b-bqvfqv8f34] { color: var(--yp-ink-strong); }
.emp-action-meta[b-bqvfqv8f34] {
    font-size: 0.8125rem;
    color: var(--yp-ink-soft);
}
.emp-action-aside[b-bqvfqv8f34] {
    flex: none;
    font-size: 0.875rem;
    color: var(--yp-slate);
}

/* ---- Active jobs panel ---- */
.emp-panel[b-bqvfqv8f34] {
    background: var(--yp-surface);
    border: 1px solid var(--yp-border);
    border-radius: var(--yp-radius-lg);
    overflow: hidden;
}
.emp-panel-head[b-bqvfqv8f34] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--yp-space-md);
    padding: var(--yp-space-lg) var(--yp-space-xl);
    border-bottom: 1px solid var(--yp-border);
}
.emp-panel-title[b-bqvfqv8f34] {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0;
}
.emp-panel-link[b-bqvfqv8f34] {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--yp-ink-soft);
    text-decoration: none;
    white-space: nowrap;
}
.emp-panel-link:hover[b-bqvfqv8f34] { color: var(--yp-ink-strong); }
.emp-panel-foot[b-bqvfqv8f34] {
    display: block;
    padding: var(--yp-space-md) var(--yp-space-xl);
    border-top: 1px solid var(--yp-border);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--yp-ink);
    text-decoration: none;
    transition: background var(--yp-dur-fast) var(--yp-ease);
}
.emp-panel-foot:hover[b-bqvfqv8f34] { background: var(--yp-slate-soft); color: var(--yp-ink-strong); }

.emp-list[b-bqvfqv8f34] {
    list-style: none;
    margin: 0;
    padding: 0;
}
.emp-list > li + li .emp-row[b-bqvfqv8f34] {
    border-top: 1px solid var(--yp-border);
}
.emp-row[b-bqvfqv8f34] {
    display: flex;
    align-items: center;
    gap: var(--yp-space-md);
    padding: var(--yp-space-md) var(--yp-space-xl);
    min-height: 56px;
    text-decoration: none;
    color: inherit;
    transition: background var(--yp-dur-fast) var(--yp-ease);
}
.emp-row:hover[b-bqvfqv8f34] { background: var(--yp-slate-soft); }
.emp-row-main[b-bqvfqv8f34] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}
.emp-row-title[b-bqvfqv8f34] {
    font-weight: 600;
    color: var(--yp-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.emp-row:hover .emp-row-title[b-bqvfqv8f34] { color: var(--yp-ink-strong); }
.emp-row-meta[b-bqvfqv8f34] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--yp-ink-soft);
}
.emp-row-meta .yp-mono[b-bqvfqv8f34] { font-size: 0.8125rem; color: var(--yp-ink-soft); }
.emp-row-sep[b-bqvfqv8f34] { color: var(--yp-border); }
.emp-row-aside[b-bqvfqv8f34] {
    flex: none;
    font-size: 0.875rem;
    color: var(--yp-slate);
}

/* ---- Empty state / skeletons ---- */
.emp-empty[b-bqvfqv8f34] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--yp-space-sm);
    padding: var(--yp-space-2xl) var(--yp-space-xl);
}
.emp-empty-title[b-bqvfqv8f34] { margin: 0; font-weight: 600; font-size: 1.0625rem; color: var(--yp-ink); }
.emp-empty-body[b-bqvfqv8f34] { margin: 0; color: var(--yp-ink-soft); max-width: 46ch; }

.emp-skel-card[b-bqvfqv8f34] { height: 130px; border-radius: var(--yp-radius-lg); }
.emp-skel-panel[b-bqvfqv8f34] { height: 280px; border-radius: var(--yp-radius-lg); }
/* /Pages/Home.razor.rz.scp.css */
/* ============================================================
   Dashboard (/) — a jobs-focused overview of the system.
   Status at a glance, the live work front-and-center, and the
   few things that need acting on. Charcoal reads; yellow stays
   reserved for the one primary action (+ New job).
   ============================================================ */
.dash[b-nx42yxngls] {
    max-width: 1100px;
}

/* ---- Header: greeting + the one primary action ---- */
.dash-head[b-nx42yxngls] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--yp-space-md);
    flex-wrap: wrap;
    margin-bottom: var(--yp-space-xl);
}
.dash-head-text[b-nx42yxngls] {
    min-width: 0;
}
.dash-sub[b-nx42yxngls] {
    color: var(--yp-ink-soft);
    margin: 0.25rem 0 0;
    font-size: 1.0625rem;
}

/* ============================================================
   Pipeline strip — modest functional counts, not a hero metric.
   Equal tiles, mono numerals, each a link into the full list.
   ============================================================ */
.dash-stats[b-nx42yxngls] {
    display: grid;
    /* 160px floor → tidy 2-up on a phone, 4-across on desktop. */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--yp-space-md);
    margin-bottom: var(--yp-space-xl);
}
.dash-stat[b-nx42yxngls] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--yp-space-lg);
    background: var(--yp-surface);
    border: 1px solid var(--yp-border);
    border-radius: var(--yp-radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--yp-dur-fast) var(--yp-ease),
                box-shadow var(--yp-dur-fast) var(--yp-ease),
                transform var(--yp-dur-fast) var(--yp-ease);
}
.dash-stat:hover[b-nx42yxngls] {
    border-color: var(--yp-slate);
    box-shadow: var(--yp-shadow-hover);
    transform: translateY(-1px);
}
.dash-stat-label[b-nx42yxngls] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--yp-ink-soft);
}
.dash-stat-value[b-nx42yxngls] {
    font-size: 1.875rem;
    line-height: 1.15;
    color: var(--yp-ink-strong);
}
.dash-stat-note[b-nx42yxngls] {
    font-size: 0.8125rem;
    color: var(--yp-ink-soft);
}
/* Actionable counts earn a quiet status colour on the note only —
   the number itself stays charcoal (numbers are ink, not status). */
.dash-stat-note.is-warning[b-nx42yxngls],
.dash-stat-note.is-danger[b-nx42yxngls] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.dash-stat-note.is-warning[b-nx42yxngls] { color: var(--yp-warning); }
.dash-stat-note.is-danger[b-nx42yxngls] { color: var(--yp-danger); }
.dash-stat-note.is-warning[b-nx42yxngls]::before,
.dash-stat-note.is-danger[b-nx42yxngls]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

/* ============================================================
   Body grid — the active-work panel beside the attention rail.
   Collapses to a single column on narrow screens.
   ============================================================ */
.dash-grid[b-nx42yxngls] {
    display: grid;
    /* minmax(0, 1fr), not 1fr: a bare 1fr is minmax(auto, 1fr), and that auto
       minimum refuses to shrink below the track's min-content width. The row
       names are nowrap, so a long job title held the single mobile column
       wider than the screen and the whole page scrolled sideways. The
       desktop rule below already guards its columns the same way. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--yp-space-lg);
    align-items: start;
}
@media (min-width: 880px) {
    .dash-grid.has-rail[b-nx42yxngls] {
        grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr);
    }
}

/* The main column stacks its panels the way the rail does, so adding one
   doesn't spill into the rail's grid track. */
.dash-main[b-nx42yxngls],
.dash-rail[b-nx42yxngls] {
    display: flex;
    flex-direction: column;
    gap: var(--yp-space-lg);
}

/* ---- Panel: a flat bordered surface with a titled head ---- */
.dash-panel[b-nx42yxngls] {
    background: var(--yp-surface);
    border: 1px solid var(--yp-border);
    border-radius: var(--yp-radius-lg);
    overflow: hidden;
}
.dash-panel-head[b-nx42yxngls] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--yp-space-md);
    padding: var(--yp-space-lg) var(--yp-space-xl);
    border-bottom: 1px solid var(--yp-border);
}
.dash-panel-title[b-nx42yxngls] {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0;
}
.dash-panel-link[b-nx42yxngls] {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--yp-ink-soft);
    text-decoration: none;
    white-space: nowrap;
}
.dash-panel-link:hover[b-nx42yxngls] { color: var(--yp-ink-strong); }

.dash-panel-foot[b-nx42yxngls] {
    display: block;
    padding: var(--yp-space-md) var(--yp-space-xl);
    border-top: 1px solid var(--yp-border);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--yp-ink);
    text-decoration: none;
    transition: background var(--yp-dur-fast) var(--yp-ease);
}
.dash-panel-foot:hover[b-nx42yxngls] { background: var(--yp-slate-soft); color: var(--yp-ink-strong); }

/* ============================================================
   List rows — one tappable row per job / invoice / action.
   ============================================================ */
.dash-list[b-nx42yxngls] {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dash-list > li + li .dash-row[b-nx42yxngls],
.dash-list > li + li .dash-action[b-nx42yxngls] {
    border-top: 1px solid var(--yp-border);
}

.dash-row[b-nx42yxngls],
.dash-action[b-nx42yxngls] {
    display: flex;
    align-items: center;
    gap: var(--yp-space-md);
    padding: var(--yp-space-md) var(--yp-space-xl);
    min-height: 56px;
    text-decoration: none;
    color: inherit;
    transition: background var(--yp-dur-fast) var(--yp-ease);
}
.dash-row:hover[b-nx42yxngls],
.dash-action:hover[b-nx42yxngls] { background: var(--yp-slate-soft); }

.dash-row-main[b-nx42yxngls],
.dash-action-main[b-nx42yxngls] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}
.dash-row-title[b-nx42yxngls] {
    display: flex;
    align-items: center;
    gap: var(--yp-space-sm);
    font-weight: 600;
    color: var(--yp-ink);
    min-width: 0;
}
/* Only the name text truncates; a trailing badge (Ready to bill / Overdue)
   stays whole and shoves the ellipsis onto the title instead of clipping. */
.dash-row-name[b-nx42yxngls] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-row:hover .dash-row-title[b-nx42yxngls],
.dash-action:hover .dash-row-title[b-nx42yxngls] { color: var(--yp-ink-strong); }
.dash-row-meta[b-nx42yxngls] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--yp-ink-soft);
}
.dash-row-meta .yp-mono[b-nx42yxngls] { font-size: 0.8125rem; color: var(--yp-ink-soft); }
.dash-row-sep[b-nx42yxngls] { color: var(--yp-border); }

.dash-row-aside[b-nx42yxngls] {
    flex: none;
    font-size: 0.8125rem;
    color: var(--yp-ink-soft);
    white-space: nowrap;
}
.dash-row-aside.yp-mono[b-nx42yxngls] { font-size: 0.875rem; color: var(--yp-ink); }
.dash-amount-danger[b-nx42yxngls] { color: var(--yp-danger) !important; }
.dash-row-aside.bi[b-nx42yxngls] { font-size: 0.875rem; color: var(--yp-slate); }

/* The badge inside a row title shouldn't shrink the title's grip on space. */
.dash-row-title .yp-badge[b-nx42yxngls] { flex: none; }

/* ---- Quick-action rows (field crew rail) ---- */
.dash-action-icon[b-nx42yxngls] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--yp-radius-md);
    background: var(--yp-yellow-soft);
    color: var(--yp-ink-strong);
    font-size: 1.0625rem;
}

/* ============================================================
   Empty / caught-up states inside panels
   ============================================================ */
.dash-empty[b-nx42yxngls] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--yp-space-sm);
    padding: var(--yp-space-2xl) var(--yp-space-xl);
}
.dash-empty-title[b-nx42yxngls] { margin: 0; font-weight: 600; font-size: 1.0625rem; color: var(--yp-ink); }
.dash-empty-body[b-nx42yxngls] { margin: 0 0 var(--yp-space-xs); color: var(--yp-ink-soft); max-width: 46ch; }

.dash-clear[b-nx42yxngls] {
    display: flex;
    align-items: center;
    gap: var(--yp-space-md);
    padding: var(--yp-space-xl);
}
.dash-clear-mark[b-nx42yxngls] {
    flex: none;
    font-size: 1.5rem;
    color: var(--yp-success);
}
.dash-clear-text[b-nx42yxngls] { margin: 0; color: var(--yp-ink-soft); font-size: 0.9375rem; }

/* ============================================================
   Loading skeletons — mirror the real shapes, no mid-page spinner
   ============================================================ */
.dash-skel-stat[b-nx42yxngls] { height: 96px; border-radius: var(--yp-radius-lg); }
.dash-skel-panel[b-nx42yxngls] { height: 320px; border-radius: var(--yp-radius-lg); }
@media (max-width: 879px) {
    .dash-grid.has-rail .dash-skel-panel:last-child[b-nx42yxngls] { height: 200px; }
}