/* Site design refresh — header & sidebar navigation shell.
   Tokens and component styles ported from docs/Site design refresh/Header Nav Refresh.dc.html */

:root {
    --color-bg: #f2f2f3;
    --color-text: #1d1f20;
    /* IQSuite Green (#87b826), per the iPulse CID brand guide - the rest of this file
       already uses it directly; this ramp just brings the shared accent tokens in line. */
    --color-accent: #87b826;
    --color-accent-100: color-mix(in srgb, var(--color-accent) 12%, white);
    --color-accent-200: color-mix(in srgb, var(--color-accent) 22%, white);
    --color-accent-600: color-mix(in srgb, var(--color-accent) 70%, black);
    --color-accent-700: color-mix(in srgb, var(--color-accent) 60%, black);
    --color-accent-800: color-mix(in srgb, var(--color-accent) 50%, black);
    --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);
    --color-neutral-700: #5d5d60;
    --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
    --shadow-sm: 0 2px 6px color-mix(in srgb, #2b2b2d 12%, transparent);
    --space-2: 6.8px;
    --space-3: 10.2px;
    --space-4: 13.6px;
    --space-6: 20.4px;
    --space-8: 27.2px;
    /* Shared by .shell-header and .sidebar-top so their bottom dividers line up. */
    --shell-header-height: 64px;
    --font-body: 'Montserrat', sans-serif;
    --font-heading: 'Montserrat', sans-serif;
}

.app-shell {
    display: flex;
    min-height: 100vh;
    background: var(--color-bg);
}

/* Sidebar */
.sidebar {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--color-divider);
    background: var(--color-bg);
    transition: width 0.18s ease;
    flex-shrink: 0;
    height: 100vh;
    position: sticky;
    top: 0;
}

.sidebar-top {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: var(--shell-header-height);
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--color-divider);
    flex-shrink: 0;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: var(--space-2) 0;
    flex: 1;
    overflow-y: auto;
}

.sidebar-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--color-divider);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.sidebar-footer-logo {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 40px;
}

.sidebar-footer-logo-collapsed {
    width: auto;
    height: auto;
    max-width: 32px;
    max-height: 32px;
}

.sidebar-footer-logo-placeholder {
    width: 100%;
    height: 32px;
    border: 1px dashed var(--color-divider);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    font-size: 11px;
    color: color-mix(in srgb, var(--color-text) 50%, transparent);
}

.sidebar-footer-version {
    font-family: var(--font-body);
    font-size: 11px;
    color: color-mix(in srgb, var(--color-text) 50%, transparent);
    white-space: nowrap;
}

.side-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 14px;
    border-left: 2px solid transparent;
    white-space: nowrap;
    overflow: hidden;
}

    .side-item:hover {
        background: color-mix(in srgb, var(--color-accent) 8%, transparent);
        color: var(--color-accent-600);
    }

    .side-item.active {
        color: var(--color-accent-800);
        border-left-color: var(--color-accent);
        background: var(--color-accent-100);
    }

    .side-item svg {
        flex-shrink: 0;
    }

.side-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.logo-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #87b826;
    color: #ffffff;
}

    .logo-mark span {
        font-family: var(--font-heading);
        font-weight: 700;
        color: #ffffff;
        letter-spacing: -0.03em;
    }

/* Header */
.shell-header {
    box-sizing: border-box;
    height: var(--shell-header-height);
    padding: 0 var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-divider);
    position: relative;
    flex-shrink: 0;
}

.btn-ghost-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-accent);
    cursor: pointer;
}

    .btn-ghost-icon:hover {
        background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    }

.brand-lockup {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-right: auto;
}

.brand-logo {
    display: block;
    height: 32px;
    width: auto;
}

.brand-wordmark {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: 0.01em;
    color: var(--color-text);
}

    .brand-wordmark span {
        color: var(--color-accent-700);
    }

/* User menu */
.user-menu {
    position: relative;
}

.user-menu-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: transparent;
    border: 1px solid var(--color-divider);
    padding: 6px 10px 6px 6px;
    cursor: pointer;
    font-family: var(--font-body);
    color: var(--color-text);
}

.user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-accent-200);
    color: var(--color-accent-800);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-heading);
    flex-shrink: 0;
}

.user-menu-name {
    font-size: 14px;
    color: var(--color-text);
    white-space: nowrap;
}

.userpop-backdrop {
    position: fixed;
    inset: 0;
    z-index: 19;
}

.userpop {
    position: absolute;
    top: 42px;
    right: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-divider);
    box-shadow: var(--shadow-md);
    min-width: 200px;
    z-index: 20;
}

.userpop-info {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-divider);
    font-family: var(--font-body);
    font-size: 13px;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
    line-height: 1.5;
}

    .userpop-info strong {
        display: block;
        font-size: 14px;
        color: var(--color-text);
        font-weight: 500;
    }

.userpop a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    color: var(--color-text);
    text-decoration: none;
    font-size: 14px;
    font-family: var(--font-body);
    cursor: pointer;
}

    .userpop a:hover {
        background: color-mix(in srgb, var(--color-accent) 8%, transparent);
        color: var(--color-accent-700);
    }

/* Settings tiles (see docs/Site design refresh Settings) */
.settings-page-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 28px;
    text-transform: uppercase;
    margin: 0 0 var(--space-6) 0;
    color: var(--color-text);
}

.settings-tabbar {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

.settings-tab {
    position: relative;
    flex: 1;
    min-width: 180px;
    border: 1px solid var(--color-divider);
    padding: var(--space-4);
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    cursor: pointer;
    color: var(--color-text);
}

    .settings-tab:hover {
        background: color-mix(in srgb, var(--color-text) 5%, transparent);
    }

    .settings-tab.active {
        border-color: #87b826;
        background: color-mix(in srgb, #87b826 10%, transparent);
        color: #4c6614;
    }

    .settings-tab input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        pointer-events: none;
    }

    .settings-tab:focus-within {
        outline: 2px solid var(--color-accent);
        outline-offset: -2px;
    }

.settings-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-divider);
    background: transparent;
    height: 100%;
    min-height: 240px;
    text-decoration: none;
    color: var(--color-text);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

    .settings-card:not(.settings-card-static):hover {
        border-color: var(--color-accent);
        box-shadow: var(--shadow-sm);
        transform: translateY(-2px);
    }

    .settings-card:not(.settings-card-static):active {
        transform: translateY(0);
        box-shadow: none;
    }

    .settings-card:not(.settings-card-static):hover .settings-manage-link {
        color: var(--color-accent);
    }

    .settings-card:not(.settings-card-static):hover .settings-manage-link svg {
        transform: translateX(2px);
    }

/* Opt-out for cards with more than one independent action (e.g. SmartTime's
   Export + disabled-Manage) that can't collapse into a single whole-card link;
   its own Export/Manage links keep their normal individual :hover behavior. */
.settings-card.settings-card-static {
    cursor: default;
}

.settings-app-logo-plate {
    padding: var(--space-4) var(--space-4) 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    flex-shrink: 0;
}

    .settings-app-logo-plate img {
        max-height: 100%;
        max-width: 100%;
        object-fit: contain;
    }

.settings-app-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-4);
    flex: 1;
}

.settings-app-caption {
    font-family: var(--font-body);
    font-size: 14px;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
    text-align: center;
}

.settings-card-body {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
    flex: 1;
}

.settings-card-icon {
    color: var(--color-accent);
    flex-shrink: 0;
}

.settings-card-body-stacked {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
    flex: 1;
}

.settings-card-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 17px;
    color: var(--color-text);
}

.settings-card-text {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--color-text);
}

.settings-card-footer {
    border-top: 1px solid var(--color-divider);
    padding: var(--space-3) var(--space-4);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-3);
}

.settings-manage-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    color: var(--color-accent-700);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

    .settings-manage-link:hover {
        color: var(--color-accent);
    }

    .settings-manage-link svg {
        transition: transform 0.15s ease;
    }

    .settings-manage-link:hover svg {
        transform: translateX(2px);
    }

.settings-card-empty {
    border: 1px solid var(--color-divider);
    padding: var(--space-8);
    text-align: center;
    color: color-mix(in srgb, var(--color-text) 50%, transparent);
    font-size: 14px;
}

/* Flattened System Settings category cards - a fixed-height hairline card per category with an
   internally-scrolling list of its actual destinations, so every destination is one click away
   instead of landing on a second page of tiles first (see docs/Site design refresh Settings). */
.settings-group-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    align-items: start;
}

@media (max-width: 1000px) {
    .settings-group-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    .settings-group-grid {
        grid-template-columns: 1fr;
    }
}

.settings-group-card {
    position: relative;
    border: 1px solid var(--color-divider);
    background: transparent;
    display: flex;
    flex-direction: column;
    height: 300px;
}

.settings-group-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-divider);
    flex-shrink: 0;
}

    .settings-group-header svg {
        color: var(--color-accent);
        flex-shrink: 0;
    }

.settings-group-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.01em;
    margin: 0;
    color: var(--color-text);
}

.settings-group-list {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex: 1;
}

.settings-group-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 14px;
    border-bottom: 1px solid var(--color-divider);
}

    .settings-group-row:last-child {
        border-bottom: none;
    }

    .settings-group-row svg {
        flex-shrink: 0;
        color: color-mix(in srgb, var(--color-text) 40%, transparent);
    }

    .settings-group-row:hover {
        background: color-mix(in srgb, var(--color-accent) 8%, transparent);
        color: var(--color-accent-700);
    }

        .settings-group-row:hover svg {
            color: var(--color-accent);
        }

/* Grid toolbars (see docs/Site design refresh people toolbar buttond) */
.grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    width: 100%;
}

.grid-toolbar-left {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.grid-toolbar-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0;
    color: var(--color-text);
}

.grid-toolbar-toggle-label {
    font-family: var(--font-body);
    font-size: 13px;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
    white-space: nowrap;
}

/* A switch/label pair with its info tooltip icon (e.g. Devices grid toggles) — same gap
   rhythm as .grid-toolbar-right, grouped so the pair wraps together on narrow widths. */
.grid-toolbar-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}

.grid-toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.btn-ghost-icon.icon-grey {
    color: #474745;
}

.toolbar-menu-anchor {
    position: relative;
    /* Own stacking context above .userpop-backdrop (z-index: 19): without this, an open
       menu's full-viewport backdrop covers the *other* anchor's trigger button (they're
       stacking siblings), so a single click on that button just closes the open menu via
       the backdrop instead of also opening the one that was clicked. */
    z-index: 21;
}

/* A grid's toolbar and its sticky header cells are sibling stacking contexts, so a toolbar
   dropdown renders underneath the header despite its own z-index. MudBlazor puts FixedHeader
   cells at z-index 2 and sticky-left/right header cells at 3, so raise any grid toolbar that
   hosts a dropdown above both. */
.mud-table-toolbar:has(.toolbar-menu-anchor) {
    z-index: 4;
}

.toolbar-filter-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #87b826;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    padding: 0 2px;
    pointer-events: none;
}

.btn-primary-solid {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #87b826;
    border: 1px solid #87b826;
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

    .btn-primary-solid:hover {
        background: #729c20;
        border-color: #729c20;
    }

    .btn-primary-solid:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }

    .btn-primary-solid:disabled:hover {
        background: #87b826;
        border-color: #87b826;
    }

/* Content area */
.shell-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100vh;
}

.shell-content-body {
    flex: 1;
    overflow-y: auto;
}

/* ===== Shared form-shell pattern (person wizard, and any future multi-section form) ===== */

.step-tabbar {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin: var(--space-6) 0;
}

.step-tab {
    flex: 1;
    min-width: 150px;
    border: 1px solid var(--color-divider);
    background: transparent;
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text);
    white-space: nowrap;
}

    .step-tab:hover {
        background: color-mix(in srgb, var(--color-text) 5%, transparent);
    }

    .step-tab.active {
        border-color: #87b826;
        background: color-mix(in srgb, #87b826 10%, transparent);
        color: #4c6614;
    }

    .step-tab svg {
        flex-shrink: 0;
    }

.section-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 18px;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-divider);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-4);
}

.form-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-8);
    align-items: start;
}

@media (max-width: 900px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
}

.field-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

    .field-row > * {
        min-width: 0;
    }

/* Right-aligned action toolbar sitting above a data grid or section (Identifiers, Biometrics,
   Access) — same spacing rhythm as .grid-toolbar-right, used where there's no title on the left. */
.toolbar-flat {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.page-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 26px;
    text-transform: uppercase;
    color: var(--color-text);
    margin: 0 0 var(--space-6) 0;
}

/* A bordered cluster of filter controls sitting above a grid (date range, search, actions) —
   e.g. Clock Events. Wraps on narrow viewports rather than squeezing controls or wrapping text. */
.filter-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    border: 1px solid var(--color-divider);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-6);
}

.filter-bar-search {
    flex: 1;
    min-width: 180px;
}

.filter-bar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: transparent;
    border: 1px solid var(--color-divider);
    color: var(--color-text);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

    .btn-secondary:hover {
        background: color-mix(in srgb, var(--color-text) 5%, transparent);
    }

    .btn-secondary:disabled,
    .btn-ghost-icon:disabled {
        opacity: .5;
        cursor: default;
        pointer-events: none;
    }

/* Pass/fail pill for a grid result cell (Clock Result). Deliberate, scoped exception to the
   Industry system's single steel accent — used only for this kind of status signal. */
.status-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

    .status-tag svg {
        flex-shrink: 0;
    }

    .status-tag.ok {
        background: color-mix(in srgb, #87b826 14%, transparent);
        color: #4c6614;
    }

    .status-tag.fail {
        background: color-mix(in srgb, #b3432e 14%, transparent);
        color: #7c2e1d;
    }

    /* Neutral/inactive variant — for a boolean field that's simply "off" right now, not a
       failure (e.g. a read-only detail dialog showing Time and Attendance: false). */
    .status-tag.off {
        background: color-mix(in srgb, var(--color-text) 8%, transparent);
        color: color-mix(in srgb, var(--color-text) 55%, transparent);
    }

    /* Vehicle status pills (Vehicles grid) — Permanent reuses the same green as .ok,
       Temporary is a distinct amber (not a pass/fail signal, so kept as its own variant). */
    .status-tag.permanent {
        background: color-mix(in srgb, #87b826 14%, transparent);
        color: #4c6614;
    }

    .status-tag.temporary {
        background: color-mix(in srgb, #c98a2e 14%, transparent);
        color: #7c4f10;
    }

    /* Generic warning/attention-needed variant (e.g. a device "Under Investigation" status) —
       same amber as .temporary, named generically since it isn't specific to vehicles. */
    .status-tag.warn {
        background: color-mix(in srgb, #c98a2e 14%, transparent);
        color: #7c4f10;
    }

/* Role pill for a grid result cell (Users grid) — tinted with the theme's own accent ramp
   rather than a semantic status color, since a role isn't a pass/fail/warning signal. */
.tag-role {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: var(--color-accent-700);
    white-space: nowrap;
}

/* Muted placeholder for an empty grid cell (e.g. Vehicles Make/Model/Colour), instead of
   leaving the cell blank. */
.empty-dash {
    color: color-mix(in srgb, var(--color-text) 35%, transparent);
}

/* A dialog title bar with the flat "Industry" treatment (hairline border, page-background fill,
   no colored banner) — pass as a MudDialog's TitleClass to replace an ad-hoc colored header. */
.dialog-title-flat {
    background: var(--color-bg) !important;
    border-bottom: 1px solid var(--color-divider);
}

    .dialog-title-flat .mud-typography {
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 19px;
        color: var(--color-text);
    }

/* Shared dialog footer — hairline top border, right-aligned action button(s). */
.dlg-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    border-top: 1px solid var(--color-divider);
    padding-top: var(--space-4);
}

/* Borderless text button — e.g. a dialog's "Cancel" action, secondary to a primary/solid button. */
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

    .btn-ghost:hover {
        background: color-mix(in srgb, var(--color-text) 5%, transparent);
    }

/* Dashed drop-zone trigger for a file upload — reads as an upload target rather than a heavy
   call-to-action competing with the dialog's primary Save button. A plain <button> that calls
   MudFileUpload's CustomContent context.OpenFilePickerAsync() directly on click — MudBlazor 9.x
   exposes no other wiring (no native label-for-input passthrough, no auto-bound cascading value
   for arbitrary child content), so the click handler must invoke it explicitly. */
.upload-zone {
    width: 100%;
    border: 1px dashed var(--color-divider);
    padding: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    cursor: pointer;
    background: transparent;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    color: var(--color-accent-700);
    margin-top: var(--space-2);
}

    .upload-zone:hover {
        background: color-mix(in srgb, var(--color-accent) 6%, transparent);
    }

/* A read-only "label above hairline value box" field, used in detail dialogs. An empty value
   shows a muted em dash instead of full-opacity text, so it reads as "no data" at a glance
   rather than looking like every other filled-in field. */
.dlg-field label {
    display: block;
    font-size: 13px;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
    margin-bottom: 4px;
}

.dlg-field .val {
    border: 1px solid var(--color-divider);
    padding: var(--space-2) var(--space-3);
    font-size: 15px;
    color: var(--color-text);
}

    .dlg-field .val.empty {
        color: color-mix(in srgb, var(--color-text) 35%, transparent);
    }

/* Flat "Industry" treatment for MudBreadcrumbs — plain accent-colored links (no underline until
   hover) and a muted current-page label, instead of MudBlazor's default underlined-link +
   greyed-out-disabled look. Global since every page uses MudBreadcrumbs the same way. */
.mud-breadcrumbs .mud-breadcrumb-item > a {
    color: var(--color-accent);
    text-decoration: none;
    font-family: var(--font-body);
}

    .mud-breadcrumbs .mud-breadcrumb-item > a:hover {
        color: var(--color-accent-700);
        text-decoration: underline;
    }

.mud-breadcrumbs .mud-breadcrumb-item.mud-disabled > a {
    color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.mud-breadcrumbs .mud-breadcrumb-separator > span {
    color: color-mix(in srgb, var(--color-text) 35%, transparent);
    opacity: 1;
}