/* /Components/EngagementDashboard.razor.rz.scp.css */
/* Engagement Dashboard — visual polish only. Structure, testids, labels and counts are pinned by
   EngagementDashboardTests/EngagementDrillDownTests; everything here routes through ::deep because Mud
   components render without the scope attribute (.dash, a plain div, carries it). */

.dash[b-b5zryg9u9h]  .dash-panel {
    padding: 22px 24px;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(23, 29, 59, 0.04), 0 8px 24px -14px color-mix(in srgb, #3B57D9 22%, transparent);
}

.dash[b-b5zryg9u9h]  .dash-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.dash[b-b5zryg9u9h]  .dash-panel-title {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Tinted icon chips (shared by panel headers, revisit rows, mention rows). */
.dash[b-b5zryg9u9h]  .dash-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex: 0 0 auto;
}

.dash[b-b5zryg9u9h]  .dash-ico-primary { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); color: var(--mud-palette-primary); }
.dash[b-b5zryg9u9h]  .dash-ico-success { background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent); color: var(--mud-palette-success); }
.dash[b-b5zryg9u9h]  .dash-ico-warning { background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent); color: var(--mud-palette-warning); }
.dash[b-b5zryg9u9h]  .dash-ico-info    { background: color-mix(in srgb, var(--mud-palette-info) 12%, transparent); color: var(--mud-palette-info); }
.dash[b-b5zryg9u9h]  .dash-ico-error   { background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent); color: var(--mud-palette-error); }

/* ── Review-notes matrix ──────────────────────────────────────────────────── */

.dash[b-b5zryg9u9h]  table.dashboard-matrix {
    width: 100%;
    border-collapse: collapse;
}

    .dash[b-b5zryg9u9h]  table.dashboard-matrix thead th {
        text-align: center;
        font-size: 0.6875rem;
        font-weight: 650;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--mud-palette-text-secondary);
        padding: 4px;
    }

    .dash[b-b5zryg9u9h]  table.dashboard-matrix td {
        padding: 3px 4px;
        text-align: center;
    }

    .dash[b-b5zryg9u9h]  table.dashboard-matrix td.dash-matrix-label {
        text-align: left;
        padding: 3px 8px 3px 0;
        white-space: nowrap;
        font-size: 0.8125rem;
    }

    .dash[b-b5zryg9u9h]  table.dashboard-matrix tr.dash-matrix-total td {
        border-top: 1px solid var(--mud-palette-lines-default);
        padding-top: 7px;
    }

    /* Subtle zebra banding so wide matrices scan row-by-row. */
    .dash[b-b5zryg9u9h]  table.dashboard-matrix tbody tr:nth-child(even):not(.dash-matrix-total) {
        background: var(--mud-palette-gray-light);
    }

/* Clickable counts render as quiet pills that light up on hover. */
.dash[b-b5zryg9u9h]  .dash-count-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 34px;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.8125rem;
    transition: background 100ms ease;
}

    .dash[b-b5zryg9u9h]  .dash-count-pill:hover {
        background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
        color: var(--mud-palette-primary);
    }

/* Static count pill (legend / revisit counts). */
.dash[b-b5zryg9u9h]  .dash-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--mud-palette-gray-light);
    border: 1px solid var(--mud-palette-lines-default);
}

/* ── Hoverable drill rows (revisit reminders, mentions) ───────────────────── */

.dash[b-b5zryg9u9h]  .dash-hover-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 100ms ease;
}

    .dash[b-b5zryg9u9h]  .dash-hover-row:hover {
        background: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
    }

/* ── Workpaper stat tiles ─────────────────────────────────────────────────── */

.dash[b-b5zryg9u9h]  .dash-stat {
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

    .dash[b-b5zryg9u9h]  .dash-stat:hover {
        border-color: color-mix(in srgb, var(--mud-palette-primary) 50%, var(--mud-palette-lines-default));
        box-shadow: 0 4px 12px -6px rgba(16, 24, 40, 0.12);
    }

.dash[b-b5zryg9u9h]  .dash-stat-value {
    font-size: 1.25rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Per-bucket accent strip down each tile's left edge (keyed off the test-pinned testid — no markup change). */
.dash[b-b5zryg9u9h]  [data-testid="workpaper-card-Total"]      { border-left: 3px solid var(--mud-palette-info); }
.dash[b-b5zryg9u9h]  [data-testid="workpaper-card-Overdue"]    { border-left: 3px solid var(--mud-palette-error); }
.dash[b-b5zryg9u9h]  [data-testid="workpaper-card-ComingDue"]  { border-left: 3px solid var(--mud-palette-warning); }
.dash[b-b5zryg9u9h]  [data-testid="workpaper-card-InProgress"] { border-left: 3px solid var(--mud-palette-info); }
.dash[b-b5zryg9u9h]  [data-testid="workpaper-card-NotStarted"] { border-left: 3px solid var(--mud-palette-lines-default); }
.dash[b-b5zryg9u9h]  [data-testid="workpaper-card-Reviewed"]   { border-left: 3px solid var(--mud-palette-success); }

/* ── Status distribution ──────────────────────────────────────────────────── */

.dash[b-b5zryg9u9h]  .dash-donut {
    position: relative;
}

    /* MudChart's donut hole hosts the headline stat. */
    .dash[b-b5zryg9u9h]  .dash-donut .dash-donut-centre {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

.dash[b-b5zryg9u9h]  .dash-donut-pct {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.dash[b-b5zryg9u9h]  .dash-donut-cap {
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
}

.dash[b-b5zryg9u9h]  .dash-legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.dash[b-b5zryg9u9h]  .dash-legend-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ── Workflow roll-up ─────────────────────────────────────────────────────── */

.dash[b-b5zryg9u9h]  .dash-rollup {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

.dash[b-b5zryg9u9h]  .dash-rollup-item {
    display: flex;
    flex-direction: column;
}

.dash[b-b5zryg9u9h]  .dash-rollup-v {
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.dash[b-b5zryg9u9h]  .dash-rollup-l {
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Team strip ───────────────────────────────────────────────────────────── */

.dash[b-b5zryg9u9h]  .dash-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 56px;
}

.dash[b-b5zryg9u9h]  .dash-member-name {
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
    max-width: 56px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* /Components/GeoField.razor.rz.scp.css */
/* GeoField — animation for the data-glyph background motif. Every animation is gated behind
   prefers-reduced-motion: no-preference; reduced-motion users get the static glyphs. */

.geo-field[b-u0w6x6ml5w] {
    pointer-events: none;
}

    .geo-field svg[b-u0w6x6ml5w] {
        width: 100%;
        height: 100%;
        display: block;
    }

@media (prefers-reduced-motion: no-preference) {
    /* Bars breathe between ~55% and full height, staggered like live data. */
    .geo-field .geo-bar[b-u0w6x6ml5w] {
        transform-box: fill-box;
        transform-origin: bottom;
        animation: geo-bar-breathe-b-u0w6x6ml5w 3.8s ease-in-out infinite alternate;
    }

    .geo-field .geo-bar-2[b-u0w6x6ml5w] { animation-delay: -0.9s; animation-duration: 4.4s; }
    .geo-field .geo-bar-3[b-u0w6x6ml5w] { animation-delay: -1.7s; animation-duration: 3.4s; }
    .geo-field .geo-bar-4[b-u0w6x6ml5w] { animation-delay: -2.6s; animation-duration: 4.8s; }
    .geo-field .geo-bar-5[b-u0w6x6ml5w] { animation-delay: -3.2s; animation-duration: 4.1s; }

    @keyframes geo-bar-breathe-b-u0w6x6ml5w {
        from { transform: scaleY(0.55); }
        to   { transform: scaleY(1); }
    }

    /* Donut arc sweeps continuously. */
    .geo-field .geo-donut[b-u0w6x6ml5w] {
        transform-box: fill-box;
        transform-origin: center;
        animation: geo-spin-b-u0w6x6ml5w 22s linear infinite;
    }

    @keyframes geo-spin-b-u0w6x6ml5w {
        to { transform: rotate(360deg); }
    }

    /* Sparkline draws itself, holds, and redraws. */
    .geo-field .geo-spark[b-u0w6x6ml5w] {
        stroke-dasharray: 100;
        animation: geo-spark-draw-b-u0w6x6ml5w 7.5s ease-in-out infinite;
    }

    @keyframes geo-spark-draw-b-u0w6x6ml5w {
        0%   { stroke-dashoffset: 100; }
        45%  { stroke-dashoffset: 0; }
        80%  { stroke-dashoffset: 0; }
        100% { stroke-dashoffset: -100; }
    }

    /* Network nodes pulse; edges glow in counter-phase. */
    .geo-field .geo-node[b-u0w6x6ml5w] {
        transform-box: fill-box;
        transform-origin: center;
        animation: geo-node-pulse-b-u0w6x6ml5w 3.2s ease-in-out infinite alternate;
    }

    .geo-field .geo-node-2[b-u0w6x6ml5w] { animation-delay: -0.8s; }
    .geo-field .geo-node-3[b-u0w6x6ml5w] { animation-delay: -1.6s; }
    .geo-field .geo-node-4[b-u0w6x6ml5w] { animation-delay: -2.4s; }

    @keyframes geo-node-pulse-b-u0w6x6ml5w {
        from { opacity: 0.35; transform: scale(0.8); }
        to   { opacity: 0.9;  transform: scale(1.15); }
    }

    .geo-field .geo-edge[b-u0w6x6ml5w] {
        animation: geo-edge-glow-b-u0w6x6ml5w 3.2s ease-in-out infinite alternate;
    }

    .geo-field .geo-edge-2[b-u0w6x6ml5w] { animation-delay: -1.1s; }
    .geo-field .geo-edge-3[b-u0w6x6ml5w] { animation-delay: -1.9s; }
    .geo-field .geo-edge-4[b-u0w6x6ml5w] { animation-delay: -2.7s; }

    @keyframes geo-edge-glow-b-u0w6x6ml5w {
        from { stroke-opacity: 0.14; }
        to   { stroke-opacity: 0.42; }
    }

    /* Cube bobs gently. */
    .geo-field .geo-cube[b-u0w6x6ml5w] {
        animation: geo-cube-bob-b-u0w6x6ml5w 9s ease-in-out infinite alternate;
    }

    @keyframes geo-cube-bob-b-u0w6x6ml5w {
        from { transform: translate(268px, 84px); }
        to   { transform: translate(268px, 96px); }
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-61eksk34lm] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-61eksk34lm] {
    flex: 1;
}

.sidebar[b-61eksk34lm] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-61eksk34lm] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-61eksk34lm]  a, .top-row[b-61eksk34lm]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-61eksk34lm]  a:hover, .top-row[b-61eksk34lm]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-61eksk34lm]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-61eksk34lm] {
        justify-content: space-between;
    }

    .top-row[b-61eksk34lm]  a, .top-row[b-61eksk34lm]  .btn-link {
        margin-left: 0;
    }
}

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

    .sidebar[b-61eksk34lm] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-61eksk34lm] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-61eksk34lm]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-61eksk34lm], article[b-61eksk34lm] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Pages/Engagement.razor.rz.scp.css */
/* Engagement detail page — brand design language (floating surfaces, big numerals, pill tabs). Rules go
   through ::deep because Mud components render without the scope attribute; .eng (a plain div) carries it. */

/* KPI tiles: floating stat cards matching the portfolio's language. */
.eng[b-e4vlwgholl]  .eng-kpi {
    padding: 16px 18px;
    border-radius: 14px;
    height: 100%;
    box-shadow:
        0 1px 2px rgba(23, 29, 59, 0.04),
        0 8px 24px -12px color-mix(in srgb, #3B57D9 24%, transparent);
    transition: box-shadow 140ms ease, transform 140ms ease;
}

    .eng[b-e4vlwgholl]  .eng-kpi:hover {
        box-shadow:
            0 1px 2px rgba(23, 29, 59, 0.04),
            0 14px 34px -14px color-mix(in srgb, #3B57D9 38%, transparent);
        transform: translateY(-2px);
    }

.eng[b-e4vlwgholl]  .eng-kpi-value {
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.eng[b-e4vlwgholl]  .eng-kpi .mud-typography-caption {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
}

/* Tab bar: a floating pill strip — the active tab reads as a raised pill, the ink-bar slider is hidden. */
.eng[b-e4vlwgholl]  .mud-tabs .mud-tabs-tabbar {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    padding: 5px;
    box-shadow: 0 1px 2px rgba(23, 29, 59, 0.04);
}

.eng[b-e4vlwgholl]  .mud-tabs .mud-tab {
    border-radius: 10px;
    text-transform: none;
    font-weight: 600;
    min-height: 38px;
}

    .eng[b-e4vlwgholl]  .mud-tabs .mud-tab.mud-tab-active {
        background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
        color: var(--mud-palette-primary);
    }

.eng[b-e4vlwgholl]  .mud-tabs .mud-tab-slider {
    display: none;
}

/* Findings / drill-down expansion panels join the floating-surface family. */
.eng[b-e4vlwgholl]  .mud-expand-panel {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(23, 29, 59, 0.04);
}

    .eng[b-e4vlwgholl]  .mud-expand-panel + .mud-expand-panel {
        margin-top: 10px;
    }

.eng[b-e4vlwgholl]  .mud-expansion-panels {
    background: transparent;
    box-shadow: none;
}

/* ── Reproducibility-log tab (EnableWebCommandLog) ───────────────────────── */

.eng[b-e4vlwgholl]  .cmdlog-row {
    border-radius: 12px;
}

.eng[b-e4vlwgholl]  .cmdlog-sql {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--mud-palette-gray-light);
    border: 1px solid var(--mud-palette-lines-default);
    font-size: 0.75rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* /Pages/Governance.razor.rz.scp.css */
/* Governance page — brand design language: floating KPI stat tiles with tinted icon chips, styled table,
   faint geometric backdrop. Rules route through ::deep; .gov (a plain div) carries the scope attribute. */

.gov[b-7raujkeyig] {
    position: relative;
}

    /* Faint colour tint behind the header/KPI region (the animated glyphs live in the GeoField instance). */
    .gov[b-7raujkeyig]::before {
        content: "";
        position: absolute;
        top: -40px;
        right: -20px;
        width: 560px;
        height: 300px;
        background: radial-gradient(20rem 14rem at 80% 20%, color-mix(in srgb, #6C8CFF 18%, transparent), transparent 62%);
        pointer-events: none;
    }

/* Animated data-glyph field: right of the header, above the table. */
.gov[b-7raujkeyig]  .gov-geo {
    position: absolute;
    top: -36px;
    right: 0;
    width: 540px;
    height: 300px;
    opacity: 0.7;
}

/* KPI stat tiles: floating cards with tinted icon chips (icon colour itself stays the Mud Color param —
   the mud-error/mud-success class on it is test-pinned). */
.gov[b-7raujkeyig]  .gov-kpi {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 14px;
    height: 100%;
    box-shadow:
        0 1px 2px rgba(23, 29, 59, 0.04),
        0 8px 24px -12px color-mix(in srgb, #3B57D9 24%, transparent);
    transition: box-shadow 140ms ease, transform 140ms ease;
}

    .gov[b-7raujkeyig]  .gov-kpi:hover {
        box-shadow:
            0 1px 2px rgba(23, 29, 59, 0.04),
            0 14px 34px -14px color-mix(in srgb, #3B57D9 38%, transparent);
        transform: translateY(-2px);
    }

.gov[b-7raujkeyig]  .gov-kpi-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    flex: 0 0 auto;
}

.gov[b-7raujkeyig]  .gov-ico-primary { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); }
.gov[b-7raujkeyig]  .gov-ico-success { background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent); }
.gov[b-7raujkeyig]  .gov-ico-error   { background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent); }

.gov[b-7raujkeyig]  .gov-kpi-value {
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.gov[b-7raujkeyig]  .gov-kpi .mud-typography-caption {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
}

/* Integrity table: floating surface, uppercase headers, real right alignment. */
.gov[b-7raujkeyig]  .gov-table {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(23, 29, 59, 0.04);
}

    .gov[b-7raujkeyig]  .gov-table th {
        font-size: 0.6875rem;
        font-weight: 650;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--mud-palette-text-secondary);
        background: var(--mud-palette-gray-light);
    }

    .gov[b-7raujkeyig]  .gov-table td {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .gov[b-7raujkeyig]  .gov-table th.text-right,
    .gov[b-7raujkeyig]  .gov-table td.text-right {
        text-align: right;
    }
/* /Pages/Login.razor.rz.scp.css */
/* Login page — split brand/sign-in layout. Colours come from the MudBlazor palette variables the
   MudThemeProvider emits (see MainLayout.razor), so the card side follows the light/dark toggle
   automatically; the brand panel is deliberately navy in both themes (matches the app bar). */

.login-shell[b-3z2ojya94f] {
    display: flex;
    /* Fill exactly the viewport below the dense app bar: MudMainContent pads by
       (appbar-height - appbar-height/4) when the app bar is Dense — mirror that calc. */
    min-height: calc(100vh - (var(--mud-appbar-height, 64px) - var(--mud-appbar-height, 64px) / 4));
    background: var(--mud-palette-background, #F4F6FA);
}

/* ── Brand panel (left, ≥ md) ─────────────────────────────────────────────── */

.login-brand[b-3z2ojya94f] {
    position: relative;
    flex: 1 1 52%;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 56px 64px 32px;
    color: var(--mud-palette-text-primary);
    /* Palette-derived colour wash (theme toggle flips it): pastel periwinkle/violet/teal over the light
       surface, luminous indigo field in dark — same recipe as the portfolio hero, tuned stronger. */
    background:
        radial-gradient(48rem 34rem at 2% -16%, color-mix(in srgb, #6C8CFF 36%, transparent), transparent 58%),
        radial-gradient(40rem 32rem at 82% -20%, color-mix(in srgb, #8B6CFF 28%, transparent), transparent 54%),
        radial-gradient(44rem 34rem at 112% 78%, color-mix(in srgb, #37C8C3 20%, transparent), transparent 55%),
        linear-gradient(163deg,
            color-mix(in srgb, #6C8CFF 16%, var(--mud-palette-surface)) 0%,
            color-mix(in srgb, #8B6CFF 8%, var(--mud-palette-surface)) 55%,
            var(--mud-palette-background) 100%);
}

    /* Isometric lattice texture (the animated data glyphs live in the GeoField component instance below). */
    .login-brand[b-3z2ojya94f]::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
            repeating-linear-gradient(0deg, color-mix(in srgb, var(--mud-palette-primary) 8%, transparent) 0 1px, transparent 1px 52px),
            repeating-linear-gradient(60deg, color-mix(in srgb, var(--mud-palette-primary) 7%, transparent) 0 1px, transparent 1px 52px),
            repeating-linear-gradient(120deg, color-mix(in srgb, var(--mud-palette-primary) 7%, transparent) 0 1px, transparent 1px 52px);
        -webkit-mask-image: radial-gradient(ellipse at 40% 40%, black 42%, transparent 96%);
        mask-image: radial-gradient(ellipse at 40% 40%, black 42%, transparent 96%);
        pointer-events: none;
    }

/* Animated data-glyph field: upper region of the panel, clear of the headline column. */
.login-brand[b-3z2ojya94f]  .login-geo {
    position: absolute;
    top: 2%;
    right: 0;
    width: min(600px, 90%);
    height: 34%;
}

    /* Giant watermark of the cube mark anchoring the bottom-right — brand texture, not decoration noise. */
    .login-brand[b-3z2ojya94f]::after {
        content: "";
        position: absolute;
        right: -120px;
        bottom: -130px;
        width: 520px;
        height: 520px;
        background: url('img/exgear-logo.svg') no-repeat center / contain;
        opacity: 0.07;
        transform: rotate(-8deg);
        pointer-events: none;
    }

/* Slow-breathing cyan glow behind the headline (decorative div; guarded for reduced-motion users). */
.login-brand-glow[b-3z2ojya94f] {
    position: absolute;
    left: -8%;
    top: 18%;
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--mud-palette-primary) 22%, transparent), transparent 65%);
    filter: blur(10px);
    pointer-events: none;
}

/* ── Flowing thread-lines + particles (reference animation) ───────────────── */

.login-brand-waves[b-3z2ojya94f] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 74%;
    width: 100%;
    pointer-events: none;
}

    .login-brand-waves path[b-3z2ojya94f] {
        fill: none;
        stroke: url('#exg-wave-grad');
        stroke-linecap: round;
    }

    .login-brand-waves .wave-layer-1[b-3z2ojya94f] { opacity: 0.58; }
    .login-brand-waves .wave-layer-2[b-3z2ojya94f] { opacity: 0.40; }
    .login-brand-waves .wave-layer-3[b-3z2ojya94f] { opacity: 0.26; }

    .login-brand-waves .wave-layer-1 path[b-3z2ojya94f] { stroke-width: 1.8; }
    .login-brand-waves .wave-layer-2 path[b-3z2ojya94f] { stroke-width: 1.4; }
    .login-brand-waves .wave-layer-3 path[b-3z2ojya94f] { stroke-width: 1.1; }

    .login-brand-waves .wave-dot[b-3z2ojya94f] {
        fill: color-mix(in srgb, var(--mud-palette-primary) 85%, #fff);
    }

    .login-brand-waves .wave-dot-halo[b-3z2ojya94f] {
        fill: var(--mud-palette-primary);
        opacity: 0.30;
    }

@media (prefers-reduced-motion: no-preference) {
    .login-brand-waves .wave-layer-1[b-3z2ojya94f] { animation: exg-wave-drift-b-3z2ojya94f 12s ease-in-out infinite alternate; }
    .login-brand-waves .wave-layer-2[b-3z2ojya94f] { animation: exg-wave-drift-b-3z2ojya94f 17s ease-in-out -5s infinite alternate-reverse; }
    .login-brand-waves .wave-layer-3[b-3z2ojya94f] { animation: exg-wave-drift-b-3z2ojya94f 22s ease-in-out -9s infinite alternate; }

    @keyframes exg-wave-drift-b-3z2ojya94f {
        from { transform: translateY(0); }
        to   { transform: translateY(-10px); }
    }
}

@media (prefers-reduced-motion: reduce) {
    /* SMIL motion cannot be paused from CSS — hide the riders, keep the static curves. */
    .login-brand-waves .wave-dot[b-3z2ojya94f],
    .login-brand-waves .wave-dot-halo[b-3z2ojya94f] {
        display: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .login-brand-glow[b-3z2ojya94f] {
        animation: login-glow-drift-b-3z2ojya94f 14s ease-in-out infinite alternate;
    }

    @keyframes login-glow-drift-b-3z2ojya94f {
        from { transform: translate(0, 0) scale(1); opacity: 0.75; }
        to   { transform: translate(9rem, 5rem) scale(1.25); opacity: 1; }
    }
}

.login-brand-body[b-3z2ojya94f] {
    position: relative;
    max-width: 34rem;
    margin: auto 0;
}

.login-brand-badge[b-3z2ojya94f] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 44px;
}

/* Badge tiles: the ExGear cube mark sits on a white tile — its navy faces need a light backing to read on
   the navy panel / app bar / dark-mode card. */
.login-brand-mark[b-3z2ojya94f] {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 8px 20px -8px color-mix(in srgb, #3B57D9 40%, transparent);
}

    .login-brand-mark img[b-3z2ojya94f] {
        width: 32px;
        height: 32px;
    }

.login-brand-name[b-3z2ojya94f] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.login-brand-word[b-3z2ojya94f] {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.login-brand-tag[b-3z2ojya94f] {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.login-brand-headline[b-3z2ojya94f] {
    margin: 0 0 18px;
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.login-brand-copy[b-3z2ojya94f] {
    margin: 0 0 38px;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--mud-palette-text-secondary);
}

/* The feature list is a frosted-glass panel sitting ON the wave field (reference: the "trusted by" bar). */
.login-brand-features[b-3z2ojya94f] {
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--mud-palette-surface) 32%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-surface) 55%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 25%, transparent),
        0 10px 34px -14px color-mix(in srgb, #3B57D9 32%, transparent);
}

    .login-brand-features li[b-3z2ojya94f] {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 0.875rem;
        color: var(--mud-palette-text-primary);
    }

.login-feature-icon[b-3z2ojya94f] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 32%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    flex: 0 0 auto;
}

    .login-feature-icon[b-3z2ojya94f]  svg {
        color: var(--mud-palette-primary);
    }

.login-brand-foot[b-3z2ojya94f] {
    position: relative;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

/* ── Sign-in panel (right) ────────────────────────────────────────────────── */

.login-panel[b-3z2ojya94f] {
    position: relative;
    overflow: hidden;
    flex: 1 1 48%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}

    /* Colour blobs behind the frosted card — the thing the glass visibly blurs. One sits directly under the
       card's edge so the frost line is unmistakable. */
    .login-panel[b-3z2ojya94f]::before {
        content: "";
        position: absolute;
        inset: -10%;
        background:
            radial-gradient(26rem 22rem at 62% 28%, color-mix(in srgb, #8B6CFF 36%, transparent), transparent 62%),
            radial-gradient(28rem 24rem at 28% 74%, color-mix(in srgb, #6C8CFF 38%, transparent), transparent 60%),
            radial-gradient(20rem 18rem at 84% 84%, color-mix(in srgb, #37C8C3 26%, transparent), transparent 60%),
            radial-gradient(16rem 14rem at 80% 12%, color-mix(in srgb, #6C8CFF 22%, transparent), transparent 62%);
        filter: blur(4px);
        pointer-events: none;
    }

@media (prefers-reduced-motion: no-preference) {
    .login-panel[b-3z2ojya94f]::before {
        animation: exg-blob-drift-b-3z2ojya94f 26s ease-in-out infinite alternate;
    }

    @keyframes exg-blob-drift-b-3z2ojya94f {
        to { transform: translate(-34px, 26px) scale(1.07); }
    }
}

/* Frosted-glass orb accent floating behind the card's shoulder (reference: the glassy 3D shapes). */
.login-glass-orb[b-3z2ojya94f] {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    right: calc(50% - 16.5rem);
    top: 13%;
    background: linear-gradient(135deg, color-mix(in srgb, #fff 34%, transparent), color-mix(in srgb, #fff 6%, transparent));
    border: 1px solid color-mix(in srgb, #fff 45%, transparent);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent),
        0 20px 44px -20px color-mix(in srgb, #3B57D9 40%, transparent);
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    .login-glass-orb[b-3z2ojya94f] {
        animation: exg-orb-float-b-3z2ojya94f 12s ease-in-out infinite alternate;
    }

    @keyframes exg-orb-float-b-3z2ojya94f {
        to { transform: translateY(18px); }
    }
}

/* Frosted-glass sign-in card: translucent surface + backdrop blur over the panel's colour blobs. */
.login-card[b-3z2ojya94f] {
    position: relative;
    width: 100%;
    max-width: 27rem;
    background: color-mix(in srgb, var(--mud-palette-surface) 55%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    backdrop-filter: blur(22px) saturate(1.4);
    border: 1px solid color-mix(in srgb, #fff 40%, var(--mud-palette-lines-default));
    border-radius: 18px;
    padding: 42px 38px 34px;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent),
        0 1px 2px rgba(23, 29, 59, 0.05),
        0 20px 50px -16px color-mix(in srgb, #3B57D9 30%, transparent);
}

.login-card-mark[b-3z2ojya94f] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--mud-palette-lines-default, #E3E8F0);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

    .login-card-mark img[b-3z2ojya94f] {
        width: 28px;
        height: 28px;
    }

.login-card[b-3z2ojya94f]  .login-title {
    font-size: 1.375rem;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.login-card[b-3z2ojya94f]  .login-subtitle {
    margin: 4px 0 24px;
}

.login-card[b-3z2ojya94f]  .login-field {
    margin-top: 14px;
}

.login-card[b-3z2ojya94f]  .login-alert {
    margin-top: 16px;
    border-radius: 8px;
}

.login-card[b-3z2ojya94f]  .login-submit {
    margin-top: 24px;
    height: 44px;
}

.login-card[b-3z2ojya94f]  .login-sso {
    height: 44px;
    border-color: var(--mud-palette-lines-default, #E3E8F0);
}

/* Verification-code input: centred, spaced digits. */
.login-card[b-3z2ojya94f]  .login-mfa-code input {
    text-align: center;
    letter-spacing: 0.4em;
    font-size: 1.125rem;
    font-variant-numeric: tabular-nums;
}

.login-divider[b-3z2ojya94f] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--mud-palette-text-secondary, #475467);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

    .login-divider[b-3z2ojya94f]::before,
    .login-divider[b-3z2ojya94f]::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--mud-palette-lines-default, #E3E8F0);
    }

.login-card[b-3z2ojya94f]  .login-alt-link {
    display: block;
    margin-top: 14px;
    text-align: center;
    font-size: 0.8125rem;
    cursor: pointer;
}

.login-foot-note[b-3z2ojya94f] {
    margin: 20px 0 0;
    max-width: 26.5rem;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary, #475467);
}

.login-foot-copy[b-3z2ojya94f] {
    margin: 10px 0 0;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary, #475467);
}

/* ── Small screens: brand panel is display-utility hidden; tighten the card. ── */

@media (max-width: 959.98px) {
    .login-panel[b-3z2ojya94f] {
        padding: 32px 16px;
        justify-content: flex-start;
    }

    .login-card[b-3z2ojya94f] {
        padding: 32px 24px 28px;
    }
}
/* /Pages/OrgAdmin.razor.rz.scp.css */
/* Org-admin console — brand design language (floating tiles + section cards). Rules go through ::deep because
   Mud components render without the scope attribute; .oa (a plain div) carries it. */

.oa[b-957suwu1j8]  .oa-kpi {
    padding: 16px 18px;
    border-radius: 14px;
    height: 100%;
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(23, 29, 59, 0.04), 0 10px 28px -18px rgba(23, 29, 59, 0.18);
}

.oa[b-957suwu1j8]  .oa-sec {
    border-radius: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.oa[b-957suwu1j8]  .oa-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
}

.oa[b-957suwu1j8]  .text-right {
    text-align: right;
}
/* /Pages/Portfolio.razor.rz.scp.css */
/* Portfolio page — enterprise polish over the MudBlazor structure the bUnit suite pins (.mud-card count,
   first .mud-paper KPI text, .mud-paper-outlined list rows, a real <table> in grid view). All rules go
   through ::deep because Mud components render without the scope attribute; .pf (a plain div) carries it. */

/* Drifting colour blobs behind the hero region — the backdrop the glass hero visibly frosts. On .pf itself
   (a plain scoped div), so no markup change; confined to the top of the page. */
.pf[b-o2uxmnp7qg] {
    position: relative;
}

    /* inset 0 (NOT negative) + a leftward-only drift: an absolutely-positioned layer that reaches past the
       page's right edge creates horizontal scrollable overflow, and animating it made the horizontal
       scrollbar flicker in and out on a 28s cycle. Gradients paint the same wash without needing bleed. */
    .pf[b-o2uxmnp7qg]::before {
        content: "";
        position: absolute;
        top: -8px;
        left: 0;
        right: 0;
        height: 440px;
        background:
            radial-gradient(26rem 20rem at 12% 18%, color-mix(in srgb, #6C8CFF 42%, transparent), transparent 60%),
            radial-gradient(24rem 20rem at 55% -10%, color-mix(in srgb, #8B6CFF 34%, transparent), transparent 58%),
            radial-gradient(22rem 18rem at 88% 30%, color-mix(in srgb, #37C8C3 28%, transparent), transparent 60%),
            radial-gradient(20rem 16rem at 35% 55%, color-mix(in srgb, #6691FF 24%, transparent), transparent 62%);
        filter: blur(6px);
        pointer-events: none;
    }

@media (prefers-reduced-motion: no-preference) {
    .pf[b-o2uxmnp7qg]::before {
        animation: pf-blob-drift-b-o2uxmnp7qg 28s ease-in-out infinite alternate;
    }

    @keyframes pf-blob-drift-b-o2uxmnp7qg {
        to { transform: translate(-28px, 14px); }
    }
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.pf[b-o2uxmnp7qg]  .pf-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.pf[b-o2uxmnp7qg]  .pf-head-sub {
    margin-top: 2px;
    color: var(--mud-palette-text-secondary);
}

.pf[b-o2uxmnp7qg]  .pf-views {
    display: flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
}

.pf[b-o2uxmnp7qg]  .pf-view-btn {
    border-radius: 7px;
}

.pf[b-o2uxmnp7qg]  .pf-view-btn-active {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

/* ── Hero (loaded state): reference language — a soft periwinkle/violet colour wash with FLOATING white
      stat cards over it (shadows, not borders), deep-ink display type, generous air. Wash hues are the
      brand trio (periwinkle #6C8CFF, violet #8B6CFF, teal #37C8C3) mixed over the theme surface, so light
      mode reads as a pastel Clearbit-style backdrop and dark mode as a luminous indigo field. ── */

/* Truly glass hero: a translucent frosted surface over the .pf::before colour blobs — the colour lives
   BEHIND the pane and reads through the blur, instead of being painted on the pane. */
.pf[b-o2uxmnp7qg]  .pf-hero {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: 38px 40px 34px;
    margin-bottom: 24px;
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-surface) 42%, transparent);
    -webkit-backdrop-filter: blur(26px) saturate(1.5);
    backdrop-filter: blur(26px) saturate(1.5);
    border: 1px solid color-mix(in srgb, #fff 45%, var(--mud-palette-lines-default));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent),
        0 14px 44px -20px color-mix(in srgb, #4E6FF3 45%, transparent);
}

    /* Isometric lattice texture (the animated data glyphs live in the GeoField instance). */
    .pf[b-o2uxmnp7qg]  .pf-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
            repeating-linear-gradient(0deg, color-mix(in srgb, var(--mud-palette-primary) 7%, transparent) 0 1px, transparent 1px 46px),
            repeating-linear-gradient(60deg, color-mix(in srgb, var(--mud-palette-primary) 6%, transparent) 0 1px, transparent 1px 46px),
            repeating-linear-gradient(120deg, color-mix(in srgb, var(--mud-palette-primary) 6%, transparent) 0 1px, transparent 1px 46px);
        -webkit-mask-image: radial-gradient(ellipse at 35% 30%, black 35%, transparent 92%);
        mask-image: radial-gradient(ellipse at 35% 30%, black 35%, transparent 92%);
        pointer-events: none;
    }

/* Animated data-glyph field: right-hand end of the hero, tucked behind the KPI edge. */
.pf[b-o2uxmnp7qg]  .pf-geo {
    position: absolute;
    top: -12px;
    right: 6px;
    width: 460px;
    height: 105%;
    opacity: 0.85;
}

.pf[b-o2uxmnp7qg]  .pf-head-hero {
    position: relative;
    margin-bottom: 30px;
}

    .pf[b-o2uxmnp7qg]  .pf-head-hero .pf-head-sub {
        font-size: 0.9375rem;
        margin-top: 6px;
    }

.pf[b-o2uxmnp7qg]  .pf-hero-kpis {
    position: relative;
}

/* Cube watermark anchoring the hero's right edge. */
.pf[b-o2uxmnp7qg]  .pf-hero .pf-hero-mark {
    position: absolute;
    right: -50px;
    top: -60px;
    width: 300px;
    height: 300px;
    background: url('img/exgear-logo.svg') no-repeat center / contain;
    opacity: 0.05;
    transform: rotate(-8deg);
    pointer-events: none;
}

/* Stat cards are glass panes within the glass hero: translucent, frosted, light-edged, big numerals. */
.pf[b-o2uxmnp7qg]  .pf-hero .pf-kpi {
    border: 1px solid color-mix(in srgb, #fff 50%, transparent);
    padding: 20px 22px;
    background: color-mix(in srgb, var(--mud-palette-surface) 52%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent),
        0 10px 30px -12px color-mix(in srgb, #3B57D9 30%, transparent);
}

    .pf[b-o2uxmnp7qg]  .pf-hero .pf-kpi:hover {
        box-shadow:
            inset 0 1px 0 color-mix(in srgb, #fff 35%, transparent),
            0 16px 40px -14px color-mix(in srgb, #3B57D9 45%, transparent);
        transform: translateY(-2px);
    }

    .pf[b-o2uxmnp7qg]  .pf-hero .pf-kpi .pf-kpi-value {
        font-size: 2rem;
        line-height: 1.1;
    }

    .pf[b-o2uxmnp7qg]  .pf-hero .pf-kpi .mud-typography-caption {
        font-size: 0.6875rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 600;
    }

/* ── Loading / empty states ───────────────────────────────────────────────── */

.pf[b-o2uxmnp7qg]  .pf-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 96px 0;
}

.pf[b-o2uxmnp7qg]  .pf-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 80px 24px;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 12px;
}

.pf[b-o2uxmnp7qg]  .pf-empty-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    margin-bottom: 10px;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    color: var(--mud-palette-primary);
}

/* ── KPI tiles ────────────────────────────────────────────────────────────── */

.pf[b-o2uxmnp7qg]  .pf-kpi {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 12px;
    height: 100%;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

    .pf[b-o2uxmnp7qg]  .pf-kpi:hover {
        border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-lines-default));
        box-shadow: 0 4px 16px -6px rgba(16, 24, 40, 0.12);
    }

.pf[b-o2uxmnp7qg]  .pf-kpi-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    flex: 0 0 auto;
}

.pf[b-o2uxmnp7qg]  .pf-kpi-ico-primary { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); }
.pf[b-o2uxmnp7qg]  .pf-kpi-ico-warning { background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent); }
.pf[b-o2uxmnp7qg]  .pf-kpi-ico-error   { background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent); }
.pf[b-o2uxmnp7qg]  .pf-kpi-ico-success { background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent); }

.pf[b-o2uxmnp7qg]  .pf-kpi-value {
    font-weight: 650;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

/* ── Engagement cards ─────────────────────────────────────────────────────── */

.pf[b-o2uxmnp7qg]  .pf-card {
    height: 100%;
    cursor: pointer;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(23, 29, 59, 0.04);
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

    .pf[b-o2uxmnp7qg]  .pf-card:hover {
        border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-lines-default));
        box-shadow: 0 18px 40px -16px color-mix(in srgb, #3B57D9 32%, transparent);
        transform: translateY(-3px);
    }

.pf[b-o2uxmnp7qg]  .pf-card-body {
    padding: 22px 24px 18px;
}

/* Status accent strip down the card's left edge (error wins over status when integrity/materiality is hot). */
.pf[b-o2uxmnp7qg]  .pf-card.pf-accent-success { border-left: 3px solid var(--mud-palette-success); }
.pf[b-o2uxmnp7qg]  .pf-card.pf-accent-warning { border-left: 3px solid var(--mud-palette-warning); }
.pf[b-o2uxmnp7qg]  .pf-card.pf-accent-error   { border-left: 3px solid var(--mud-palette-error); }
.pf[b-o2uxmnp7qg]  .pf-card.pf-accent-default { border-left: 3px solid var(--mud-palette-lines-default); }

.pf[b-o2uxmnp7qg]  .pf-card-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.pf[b-o2uxmnp7qg]  .pf-card-title {
    flex: 1;
    min-width: 0;
}

.pf[b-o2uxmnp7qg]  .pf-card-name {
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.pf[b-o2uxmnp7qg]  .pf-chiprow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 14px;
}

/* Completion ring: MudProgressCircular with the percentage overlaid in its centre. */
.pf[b-o2uxmnp7qg]  .pf-ring-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pf[b-o2uxmnp7qg]  .pf-ring {
    position: relative;
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
}

    /* Track circle behind MudProgressCircular's value arc (the arc alone vanishes near 0%). Geometry mirrors
       the Mud svg: r≈20.2 in a 44-unit viewBox ⇒ ~4px band centred ~26.5px out on a 58px box. */
    .pf[b-o2uxmnp7qg]  .pf-ring::before {
        content: "";
        position: absolute;
        inset: 1px;
        border: 4px solid var(--mud-palette-lines-default);
        border-radius: 50%;
    }

.pf[b-o2uxmnp7qg]  .pf-ring-pct {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.pf[b-o2uxmnp7qg]  .pf-ring-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pf[b-o2uxmnp7qg]  .pf-ring-label {
    font-size: 0.8125rem;
    font-weight: 600;
}

.pf[b-o2uxmnp7qg]  .pf-metrics {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.pf[b-o2uxmnp7qg]  .pf-metric {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.pf[b-o2uxmnp7qg]  .pf-metric-v {
    font-size: 0.9375rem;
    font-weight: 650;
    line-height: 1.2;
}

.pf[b-o2uxmnp7qg]  .pf-metric-attn {
    color: var(--mud-palette-warning);
}

.pf[b-o2uxmnp7qg]  .pf-metric-l {
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── List rows ────────────────────────────────────────────────────────────── */

.pf[b-o2uxmnp7qg]  .pf-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    margin-bottom: 8px;
    cursor: pointer;
    border-radius: 10px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

    .pf[b-o2uxmnp7qg]  .pf-row:hover {
        border-color: color-mix(in srgb, var(--mud-palette-primary) 55%, var(--mud-palette-lines-default));
        box-shadow: 0 4px 14px -6px rgba(16, 24, 40, 0.12);
    }

    .pf[b-o2uxmnp7qg]  .pf-row:hover .pf-row-chev {
        color: var(--mud-palette-primary);
        transform: translateX(2px);
    }

.pf[b-o2uxmnp7qg]  .pf-row-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    flex: 0 0 auto;
    font-weight: 650;
    font-size: 0.9375rem;
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
}

.pf[b-o2uxmnp7qg]  .pf-row-main {
    flex: 1;
    min-width: 0;
}

.pf[b-o2uxmnp7qg]  .pf-row-name {
    font-weight: 550;
}

.pf[b-o2uxmnp7qg]  .pf-row-chips {
    align-items: center;
    gap: 6px;
}

.pf[b-o2uxmnp7qg]  .pf-row-findings {
    gap: 20px;
}

    /* In list rows the metric blocks are fixed-content columns — never squeeze/ellipsize their labels
       (cards use flex:1 so the three columns share the card width instead). */
    .pf[b-o2uxmnp7qg]  .pf-row-findings .pf-metric {
        flex: 0 0 auto;
    }

.pf[b-o2uxmnp7qg]  .pf-row-progress {
    width: 140px;
    flex-shrink: 0;
}

.pf[b-o2uxmnp7qg]  .pf-row-chev {
    color: var(--mud-palette-action-default);
    transition: color 120ms ease, transform 120ms ease;
}

/* ── Grid (table) view ────────────────────────────────────────────────────── */

.pf[b-o2uxmnp7qg]  .pf-table {
    border-radius: 12px;
    overflow: hidden;
}

    .pf[b-o2uxmnp7qg]  .pf-table th {
        font-size: 0.6875rem;
        font-weight: 650;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--mud-palette-text-secondary);
        background: var(--mud-palette-gray-light);
    }

    .pf[b-o2uxmnp7qg]  .pf-table td {
        padding-top: 10px;
        padding-bottom: 10px;
    }

/* `text-right` isn't defined by MudBlazor/app.css (Bootstrap 5 renamed it text-end) — give the grid's
   numeric columns a real right alignment. */
.pf[b-o2uxmnp7qg]  .pf-table th.text-right,
.pf[b-o2uxmnp7qg]  .pf-table td.text-right {
    text-align: right;
}

.pf[b-o2uxmnp7qg]  .pf-cell-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 140px;
}

    .pf[b-o2uxmnp7qg]  .pf-cell-progress .mud-progress-linear {
        flex: 1;
        max-width: 110px;
    }

.pf[b-o2uxmnp7qg]  .pf-dim {
    color: var(--mud-palette-text-secondary);
}

.pf[b-o2uxmnp7qg]  .pf-over {
    color: var(--mud-palette-error);
    font-weight: 650;
}

@media (max-width: 599.98px) {
    .pf[b-o2uxmnp7qg]  .pf-head {
        flex-direction: column;
        align-items: stretch;
    }

    .pf[b-o2uxmnp7qg]  .pf-views {
        align-self: flex-end;
    }

    .pf[b-o2uxmnp7qg]  .pf-row-progress {
        width: 100px;
    }
}
/* /Pages/Profile.razor.rz.scp.css */
/* My-profile page — mirrors the desktop UserAccountManagement ("Account Settings") window: an accent
   identity sidebar beside a sectioned content column, inside one window-like shell. Deliberately NO
   background animation (user request). Rules route through ::deep for Mud internals; .prof (a plain div)
   carries the scope attribute. */

.prof[b-tnlj4u046x] {
    min-height: calc(100vh - (var(--mud-appbar-height, 64px) - var(--mud-appbar-height, 64px) / 4));
}

/* ── Window shell: sidebar + content, like the desktop dialog ─────────────── */

.prof[b-tnlj4u046x]  .prof-shell {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 24px 60px -24px color-mix(in srgb, #3B57D9 28%, transparent);
}

@media (max-width: 750px) {
    .prof[b-tnlj4u046x]  .prof-shell {
        grid-template-columns: 1fr;
    }
}

/* ── Identity sidebar (desktop: the accent panel) ─────────────────────────── */

.prof .prof-side[b-tnlj4u046x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 24px 32px;
    background:
        radial-gradient(20rem 16rem at 82% -6%, color-mix(in srgb, #8B6CFF 55%, transparent), transparent 65%),
        radial-gradient(18rem 14rem at -10% 104%, color-mix(in srgb, #37C8C3 30%, transparent), transparent 60%),
        linear-gradient(165deg, #4E6FF3, #3B57D9);
}

.prof[b-tnlj4u046x]  .prof-avatar {
    width: 104px;
    height: 104px;
    font-size: 36px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 14px 30px -12px rgba(13, 16, 48, 0.55);
}

.prof[b-tnlj4u046x]  .prof-side-name {
    color: #fff;
    margin-top: 14px;
}

.prof .prof-alias-chip[b-tnlj4u046x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 3px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
}

.prof[b-tnlj4u046x]  .prof-side-email {
    color: rgba(255, 255, 255, 0.85);
    margin-top: 10px;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.prof .prof-license-pill[b-tnlj4u046x] {
    margin-top: 16px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    font-size: 0.75rem;
    text-align: center;
}

/* ── Content column ───────────────────────────────────────────────────────── */

.prof .prof-main[b-tnlj4u046x] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 28px 32px 32px;
    min-width: 0;
    background: var(--mud-palette-surface);
}

.prof .prof-sec[b-tnlj4u046x] {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    padding: 18px 20px;
    background: var(--mud-palette-background);
}

.prof .prof-sec-title[b-tnlj4u046x] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

/* Desktop "Dash" rows: icon chip · muted label · right-aligned semibold value. */
.prof .prof-row[b-tnlj4u046x] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
}

.prof .prof-row-label[b-tnlj4u046x] {
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

.prof .prof-row-value[b-tnlj4u046x] {
    margin-left: auto;
    font-weight: 600;
    font-size: 0.8125rem;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Tasks / Notifications feeds ──────────────────────────────────────────── */

.prof[b-tnlj4u046x]  .prof-tabs .mud-tabs-tabbar {
    background: transparent;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.prof[b-tnlj4u046x]  .prof-tabs .mud-tab {
    text-transform: none;
    font-weight: 600;
}

.prof[b-tnlj4u046x]  .prof-feed-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 100ms ease;
}

    .prof[b-tnlj4u046x]  .prof-feed-row:hover {
        background: color-mix(in srgb, var(--mud-palette-primary) 7%, transparent);
    }

.prof[b-tnlj4u046x]  .prof-kind-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    flex: 0 0 auto;
}

.prof[b-tnlj4u046x]  .prof-ico-primary { background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent); color: var(--mud-palette-primary); }
.prof[b-tnlj4u046x]  .prof-ico-success { background: color-mix(in srgb, var(--mud-palette-success) 12%, transparent); color: var(--mud-palette-success); }
.prof[b-tnlj4u046x]  .prof-ico-warning { background: color-mix(in srgb, var(--mud-palette-warning) 14%, transparent); color: var(--mud-palette-warning); }
.prof[b-tnlj4u046x]  .prof-ico-error   { background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent); color: var(--mud-palette-error); }

.prof[b-tnlj4u046x]  .prof-kind-pill {
    flex: 0 0 auto;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    background: var(--mud-palette-gray-light);
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.prof[b-tnlj4u046x]  .prof-feed-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 48px 16px;
}